:root{--ink:#17334b;--muted:#425c70;--cream:#f1f8fd;--paper:#ffffff;--orange:#0076c6;--line:#d0e2ef}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.65}a{color:inherit}img{max-width:100%;display:block}h1,h2,h3{font-family:Arial,Helvetica,sans-serif;font-weight:700;line-height:1.15;letter-spacing:-.025em}h1{font-size:clamp(2.8rem,6vw,5.8rem);margin:.3em 0}h2{font-size:clamp(2rem,3.8vw,3.5rem);margin:.2em 0 .5em}h3{font-size:1.55rem;margin:.6em 0 .25em}p{margin:.5em 0 1.2em}.wrap{max-width:1180px;margin:auto;padding:0 28px}.skip{position:absolute;left:-9999px}.skip:focus{left:10px;top:10px;background:white;z-index:10}.bar{background:#0076c6;color:#fff;text-align:center;padding:7px 12px;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase}.nav{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0}.brand{text-decoration:none;font-family:Arial,Helvetica,sans-serif;font-size:1.6rem;font-weight:700}.brand span{color:var(--orange)}.navlinks{display:flex;gap:24px;align-items:center;flex-wrap:wrap}.navlinks a{text-decoration:none;font-size:.92rem;font-weight:700}.navlinks a:hover,.foot a:hover{text-decoration:underline}.button{display:inline-block;background:var(--orange);border:1px solid var(--orange);color:white;text-decoration:none;padding:13px 24px;border-radius:4px;font-weight:700;transition:.2s}.button:hover{background:#005e9f}.button.light{background:transparent;color:var(--ink);border-color:var(--ink)}.button.light:hover{background:#e3f2fc}.hero{display:grid;grid-template-columns:1fr 1fr;gap:5%;align-items:center;padding:58px 0 80px}.hero .visual{background:#e6f3fb;border-radius:160px 160px 10px 10px;overflow:hidden;aspect-ratio:1/1.04}.hero .visual img{width:100%;height:100%;object-fit:cover}.eyebrow{text-transform:uppercase;letter-spacing:.18em;color:var(--orange);font-size:.78rem;font-weight:700}.lead{font-size:1.19rem;color:var(--muted);max-width:640px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}.section{padding:76px 0}.section.alt{background:var(--paper)}.intro{max-width:720px;margin-bottom:30px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.card{background:white;border:1px solid var(--line);border-radius:8px;overflow:hidden;text-decoration:none;display:block}.card img{width:100%;height:215px;object-fit:cover}.card .body{padding:18px 20px 22px}.card p{color:var(--muted);font-size:.92rem}.arrow{color:#006eae;font-weight:700}.feature{display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:center}.feature img{width:100%;height:450px;object-fit:cover;border-radius:8px}.narrow{max-width:810px}.prose h2{margin-top:1.2em}.prose li{margin:.5em 0}.notice{border-left:4px solid var(--orange);background:#fff7d1;padding:15px 20px;margin:24px 0}.faq details{border-bottom:1px solid var(--line);padding:15px 0}.faq summary{cursor:pointer;font-weight:700;font-size:1.06rem}.cta{background:#0076c6;color:white;padding:65px 0}.cta .lead{color:#e8f5ff}.cta .button{background:#ffd60a;border-color:#ffd60a;color:#17334b}.foot{padding:40px 0;background:#073c66;color:#eef7fd}.foot a{color:inherit}.footgrid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}.foot small{display:block;margin-top:25px;color:#bcd8ec}.breadcrumbs{padding-top:28px;font-size:.86rem;color:var(--muted)}.subhero{padding:45px 0 55px}.subhero h1{max-width:950px}.subhero .lead{max-width:780px}@media(max-width:850px){.grid{grid-template-columns:repeat(2,1fr)}.hero,.feature{grid-template-columns:1fr}.hero .visual{max-height:550px}.navlinks{gap:12px}.navlinks .button{display:none}}@media(max-width:520px){.grid{grid-template-columns:1fr}.nav{align-items:flex-start;flex-direction:column}.hero{padding:25px 0 50px}.section{padding:55px 0}.feature img{height:280px}}
/* Brand colours from the original LuxuryPlayMats site: blue #0076C6 and yellow #FFD60A. */
.brand span{color:#0076c6}.foot .brand span{color:#ffd60a}.bar{background:#ffd60a;color:#17334b}.eyebrow{color:#0069aa}.cta .eyebrow{color:#ffd60a}.hero .visual{background:#d8edfa}.navlinks .button{background:#0076c6;color:#fff}.button.light{border-color:#0076c6;color:#0062a3}.notice{border-left-color:#ffd60a}

.brand{display:inline-flex;align-items:center;flex-shrink:0}.brand img{width:82px;height:82px;object-fit:contain}.foot .brand img{width:90px;height:90px}.nav{padding:10px 0}
/* Buttons echo the yellow in the supplied Luxury Play Mats logo. */
.button,.navlinks .button,.cta .button{background:#ffd60a;border-color:#ffd60a;color:#17334b}
.button:hover,.navlinks .button:hover,.cta .button:hover{background:#e8be00;border-color:#e8be00;color:#10283d;text-decoration:none}
.button.light{background:#fff;color:#0062a3;border-color:#0076c6}
.button.light:hover{background:#e3f2fc;color:#004b7e;border-color:#005e9f}

/* Soft sky backdrop and subtle road motif, keeping the supplied blue/yellow identity. */
body{background:radial-gradient(circle at 92% 5%,#dceffa 0,transparent 26rem),radial-gradient(circle at 2% 38%,#e7f4fc 0,transparent 24rem),#f3f9fd;background-attachment:fixed}.section.alt{background:linear-gradient(135deg,#ffffff 0%,#f2f9fe 100%)}.hero .visual{border-radius:22px;box-shadow:0 25px 60px rgba(1,78,130,.13)}.feature img{box-shadow:0 20px 40px rgba(1,78,130,.1)}.card{box-shadow:0 12px 24px rgba(1,78,130,.06);transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-4px);box-shadow:0 18px 30px rgba(1,78,130,.13)}.cta{background:linear-gradient(125deg,#00528e,#0076c6)}.prose a:not(.button){color:#005c9c;text-decoration-thickness:2px;text-underline-offset:3px}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card{transition:none}}

.collection-guides{margin:22px 0 0;font-size:.93rem;color:#425c70}.collection-guides a{color:#005c9c;font-weight:700;text-underline-offset:3px}

/* Keep the shared page gutter when these sections set their own vertical padding. */
.wrap.nav,
.wrap.hero,
.wrap.subhero {
  padding-left: 28px;
  padding-right: 28px;
}

/* Give phone screens a comfortable reading margin without squeezing the content. */
@media (max-width: 520px) {
  .wrap,
  .wrap.nav,
  .wrap.hero,
  .wrap.subhero {
    padding-left: 22px;
    padding-right: 22px;
  }
  .hero > *,
  .feature > *,
  .grid > * { min-width: 0; }
  .button { max-width: 100%; white-space: normal; }
  h1, h2, h3 { overflow-wrap: break-word; }
}