/* ===========================================================
   The Playground Painters — brand stylesheet (v2)
   Aligned to the Playground Painters Brand Guidelines + TPP
   Mood Board. Palette, gradient, brush motifs and typography
   follow the brand system.

   Type: Modesto (brand display face) is a paid font and not a
   web font. Closest free web substitute for its bold, vintage,
   friendly signage character is ALFA SLAB ONE — used here for
   headings. Montserrat (brand secondary face) is used for body.

   Brand palette:
     Yellow  #FEE100   Green  #71C168   Blue  #4EC8F4
     Purple  #8E68AD   Pink   #F25D9C   Black #0C0C0C
   =========================================================== */

:root{
  /* brand core */
  --yellow:#FEE100;
  --green:#71C168;
  --blue:#4EC8F4;
  --purple:#8E68AD;
  --pink:#F25D9C;
  --black:#0C0C0C;

  /* readable / hover shades derived from brand */
  --blue-dark:#1f8fb3;
  --green-dark:#4f9e5b;
  --purple-strong:#6f4fa6;
  --pink-dark:#d63c7f;

  /* semantic tokens (kept same names the pages already use) */
  --ink:#141419;          /* near brand-black: dark text + dark sections */
  --ink-soft:#54555e;     /* muted body text */
  --cream:#f6f7fb;        /* light page background */
  --white:#ffffff;
  --orange:var(--pink);        /* primary CTA is now brand pink */
  --orange-dark:var(--pink-dark);
  --coral:var(--pink);
  --line:#e7e6ef;

  /* brand rainbow gradient */
  --grad:linear-gradient(90deg,#FEE100 0%,#71C168 27%,#4EC8F4 52%,#8E68AD 76%,#F25D9C 100%);

  --shadow:0 14px 40px rgba(20,20,25,.12);
  --shadow-sm:0 6px 18px rgba(20,20,25,.08);
  --radius:18px;
  --radius-lg:28px;
  --wrap:1180px;

  /* spacing rhythm — eyebrow to heading, used site-wide */
  --eyebrow-gap:1.15rem;
  --eyebrow-gap-tight:.6rem;
  --navh:64px;              /* live nav height, kept in sync by site.js */

  --display:"Alfa Slab One","Rockwell",Georgia,serif;
  --font:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* wobbly rainbow brush stroke (used as heading underline) */
  /* Paint-splash band along the bottom of the hero.
     The SVG is a solid-black SHAPE only — it's used as a mask over
     var(--grad), so the band always carries the exact brand gradient and
     there is no second copy of the palette to keep in sync. */
  --splash-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 170' preserveAspectRatio='none'%3E%3Cpath d='M0 86 C60 56 122 54 182 72 C242 90 268 72 320 58 C382 41 442 64 502 79 C562 94 602 70 662 56 C722 42 782 68 842 83 C902 98 952 74 1012 60 C1072 46 1132 70 1192 85 C1252 100 1302 76 1362 64 C1400 56 1424 62 1440 70 L1440 170 L0 170 Z' fill='%23000'/%3E%3C/svg%3E");

  --brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 22' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23FEE100'/%3E%3Cstop offset='.28' stop-color='%2371C168'/%3E%3Cstop offset='.52' stop-color='%234EC8F4'/%3E%3Cstop offset='.76' stop-color='%238E68AD'/%3E%3Cstop offset='1' stop-color='%23F25D9C'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M8 12 C70 4 150 18 210 10 C260 4 300 12 314 11 C312 16 306 19 300 19 C240 20 150 24 92 18 C54 15 22 19 8 18 Z' fill='url(%23g)'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--ink);
  background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--blue-dark);text-decoration:none}

/* headings: brand display face (Modesto substitute) */
h1,h2{font-family:var(--display);font-weight:400;line-height:1.08;margin:0 0 .4em;letter-spacing:.005em}
h3,h4{font-family:var(--font);line-height:1.2;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2rem,5vw,3.4rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.7rem)}
h3{font-size:1.25rem}
p{margin:0 0 1rem}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.section{padding:76px 0}
.section.tight{padding:52px 0}
.center{text-align:center}
.lead{font-size:1.15rem;color:var(--ink-soft);max-width:60ch}
.center .lead{margin-left:auto;margin-right:auto}
/* Eyebrow: block-level so its bottom margin is never absorbed by the
   line box. One value drives eyebrow-to-heading spacing site-wide. */
.eyebrow{
  display:block;font-family:var(--font);font-size:.78rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--purple-strong);
  margin:0 0 var(--eyebrow-gap);line-height:1.35;
}
/* headings that directly follow an eyebrow don't add their own top space */
.eyebrow + h1,.eyebrow + h2,.eyebrow + h3{margin-top:0}
/* tighter inside compact cards */
.card .eyebrow,.res-card .eyebrow,.aud .eyebrow{margin-bottom:var(--eyebrow-gap-tight)}
.muted{color:var(--ink-soft)}

/* brush underline motif under centered section titles */
.center h2{position:relative;display:inline-block;padding-bottom:.34em}
.center h2::after{
  content:"";position:absolute;left:6%;right:6%;bottom:0;height:.4em;
  background:var(--brush) center/100% 100% no-repeat;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  font-family:var(--font);font-weight:700;font-size:1rem;padding:.85rem 1.5rem;border-radius:999px;
  border:2px solid transparent;cursor:pointer;transition:.18s ease;text-align:center;
}
.btn-primary{background:var(--pink);color:#fff;box-shadow:0 8px 20px rgba(242,93,156,.35)}
.btn-primary:hover{background:var(--pink-dark);transform:translateY(-2px)}
.btn-secondary{background:var(--white);color:var(--ink);border-color:var(--ink)}
.btn-secondary:hover{background:var(--ink);color:#fff}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.btn-ghost:hover{background:#fff;color:var(--ink)}
.btn-blue{background:var(--blue);color:#08333f}
.btn-blue:hover{background:#7ad8f7;transform:translateY(-2px)}
.btn-sm{padding:.55rem 1rem;font-size:.9rem}
.note{font-size:.82rem;color:var(--ink-soft);margin-top:.5rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
/* centre whether .center is the parent OR sits on the row itself */
.center .cta-row,.cta-row.center{justify-content:center}
.cta-row{margin-top:1.1rem}
.center > .cta-row:first-child,.cta-row:first-child{margin-top:0}

/* ---------- header ---------- */
.topbar{background:var(--ink);color:#d8d8e0;font-size:.83rem}
.topbar .wrap{display:flex;gap:1.6rem;justify-content:flex-end;align-items:center;padding:.45rem 22px}
.topbar a{color:#d8d8e0;display:inline-flex;align-items:center;gap:.35rem}
.topbar a:hover{color:var(--yellow)}
.topbar .loc{color:#9a9aa6}

.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  border-bottom:3px solid;border-image:var(--grad) 1;transition:box-shadow .2s}
.nav.scrolled{box-shadow:0 6px 20px rgba(20,20,25,.09)}
.nav .wrap{display:flex;align-items:center;gap:.5rem;padding:.5rem 22px;min-height:64px}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--display);color:var(--ink);font-size:1.05rem;flex-shrink:0}
.brand img{height:42px;width:auto}
.nav-links{display:flex;gap:.1rem;margin-left:auto;align-items:center;list-style:none;padding:0;margin-block:0}
.nav-links>li{display:flex}
.nav-links a{color:var(--ink-soft);font-weight:600;padding:.5rem .62rem;border-radius:10px;font-size:.93rem;white-space:nowrap;transition:.15s}
.nav-links a:hover{background:rgba(78,200,244,.16);color:var(--blue-dark)}
.nav-links a.active{background:rgba(242,93,156,.14);color:var(--pink-dark);font-weight:700}
.nav-cta{display:flex;gap:.5rem;align-items:center;margin-left:.55rem;padding-left:.7rem;border-left:1px solid var(--line)}
.nav-cta .btn{white-space:nowrap}
.nav-links>li.nav-contact{display:none}
.hamburger{display:none;position:relative;z-index:70;margin-left:auto;background:none;border:0;cursor:pointer;padding:.5rem;border-radius:10px}
.hamburger:hover{background:rgba(20,20,25,.06)}
.hamburger span{display:block;width:26px;height:3px;background:var(--ink);margin:5px 0;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.nav.menu-open .hamburger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav.menu-open .hamburger span:nth-child(2){opacity:0}
.nav.menu-open .hamburger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
body.nav-lock{overflow:hidden}

/* ---------- hero ---------- */
.hero{position:relative;color:#fff;overflow:hidden}
.hero .bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(115deg,rgba(12,12,16,.82) 0%,rgba(12,12,16,.5) 52%,rgba(142,104,173,.42) 78%,rgba(242,93,156,.4) 100%)}
/* extra bottom padding keeps hero copy clear of the paint-splash band */
.hero .wrap{position:relative;z-index:3;padding:96px 22px clamp(136px,13vw,196px)}

/* paint-splash band along the bottom of the hero, in the brand gradient */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:clamp(76px,8.5vw,124px);
  background:var(--grad);
  -webkit-mask:var(--splash-shape) bottom center/100% 100% no-repeat;
          mask:var(--splash-shape) bottom center/100% 100% no-repeat;
  pointer-events:none;z-index:1;
}
/* very old browsers with no mask support: plain gradient band, still on-brand */
@supports not ((-webkit-mask:none) or (mask:none)){
  .hero::after{height:clamp(10px,1.2vw,16px)}
}
/* loose splatter dots rising off the band, drawn in CSS so they stay circular */
.hero::before{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:clamp(150px,19vw,258px);pointer-events:none;z-index:1;
  background:
    radial-gradient(circle 10px at 6% 42%,  var(--yellow) 98%,transparent 100%),
    radial-gradient(circle 5px  at 11% 22%, var(--yellow) 98%,transparent 100%),
    radial-gradient(circle 7px  at 22% 38%, var(--green)  98%,transparent 100%),
    radial-gradient(circle 4px  at 29% 19%, var(--green)  98%,transparent 100%),
    radial-gradient(circle 9px  at 45% 41%, var(--blue)   98%,transparent 100%),
    radial-gradient(circle 5px  at 53% 21%, var(--blue)   98%,transparent 100%),
    radial-gradient(circle 8px  at 68% 40%, var(--purple) 98%,transparent 100%),
    radial-gradient(circle 4px  at 75% 18%, var(--purple) 98%,transparent 100%),
    radial-gradient(circle 10px at 88% 39%, var(--pink)   98%,transparent 100%),
    radial-gradient(circle 5px  at 94% 20%, var(--pink)   98%,transparent 100%);
}
/* soft purple colour-block behind the hero copy */
.hero-inner{max-width:640px;position:relative;isolation:isolate}
.hero-inner::before{
  content:"";position:absolute;inset:-30px -38px -22px -34px;z-index:-1;
  border-radius:34px;pointer-events:none;
  background:linear-gradient(105deg,rgba(142,104,173,.62) 0%,rgba(142,104,173,.34) 46%,rgba(142,104,173,0) 82%);
}
.hero h1{color:#fff;margin-bottom:.35em}
.hero p{font-size:1.2rem;color:#f2f4ff;max-width:52ch}
.trust-line{margin-top:1.3rem;font-size:.92rem;color:#eef1ff;display:flex;align-items:center;gap:.5rem}
.hero-mini{background:var(--ink);color:#fff}
.hero-mini .wrap{padding:64px 22px clamp(112px,11vw,160px)}
/* interior hero banners get the band but not the splatter, to stay calmer */
.hero-mini::before{display:none}
/* keep hero heading underline off (only centered section titles use it) */
.hero h1::after{content:none}

/* ---------- trust bar (black bullet strip, Topline lock-up on the left) ---------- */
.trustbar{background:var(--ink);color:#eef0f8}
.trustbar .wrap{
  display:flex;align-items:center;flex-wrap:wrap;gap:16px 30px;padding:18px 22px;
}
.trustbar .tb-logo{
  flex:0 0 auto;display:flex;align-items:center;
  padding-right:30px;border-right:1px solid rgba(255,255,255,.18);
}
.trustbar .tb-logo img{height:40px;width:auto;background:#fff;padding:6px 10px;border-radius:9px}
.trustbar .tb-items{
  flex:1 1 420px;display:flex;flex-wrap:wrap;align-items:center;
  gap:.6rem 2rem;font-weight:600;font-size:.95rem;line-height:1.35;
}
.trustbar .tb-items span{display:flex;align-items:center;gap:.5rem}
.trustbar .dot{color:var(--yellow);flex:0 0 auto}

/* ---------- generic grid ---------- */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}

/* ---------- cards ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm)}
.card h3{margin-top:.2rem}
a.card{color:var(--ink);display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease}
a.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
a.card .rc-link,.card.soon .soon-tag{margin-top:auto}
.card.soon{display:flex;flex-direction:column}
a.card p,.card.soon p{margin-bottom:1rem}
.card .ic{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:.9rem}
.tint-o{background:#ffe0ec}.tint-b{background:#dcf4fd}.tint-y{background:#fff7c2}.tint-g{background:#e1f3e3}.tint-p{background:#ece3f6}.tint-c{background:#ffe0ec}
.feature-img{border-radius:var(--radius-lg);box-shadow:var(--shadow);width:100%;object-fit:cover;aspect-ratio:4/3}

/* audience / who we work with */
.aud{background:#fff;border-radius:var(--radius);border:1px solid var(--line);padding:22px;box-shadow:var(--shadow-sm)}
.aud .tag{font-size:1.6rem}
.aud h3{font-size:1.1rem;margin:.5rem 0 .3rem}
.aud p{font-size:.94rem;color:var(--ink-soft);margin:0}

/* ---------- section backgrounds ---------- */
.bg-white{background:var(--white)}
.bg-ink{background:var(--ink);color:#eceef6}
.bg-ink h2,.bg-ink h3{color:#fff}
.bg-blue{background:linear-gradient(135deg,#2ea6cf,#1c86a8);color:#fff}
.bg-blue h2,.bg-blue .eyebrow{color:#fff}
.bg-blue h2::after{opacity:.95}
.bg-sun{background:linear-gradient(135deg,#FFE95C,#FEE100);color:var(--ink)}
.bg-sun h2{color:var(--ink)}
.bg-cream{background:var(--cream)}
/* on-brand purple panel option */
.bg-grape{background:linear-gradient(135deg,#9a76c4,#7a5bb0);color:#fff}
.bg-grape h2,.bg-grape .eyebrow{color:#fff}

/* ---------- testimonial ---------- */
.quote{background:#fff;border-left:6px solid var(--pink);border-radius:14px;padding:26px 30px;box-shadow:var(--shadow-sm);max-width:760px;margin:0 auto}
.quote p{font-size:1.15rem;font-style:italic;color:var(--ink)}
.quote .who{font-style:normal;font-weight:700;color:var(--ink-soft);font-size:.92rem;margin:0}
.ph{background:repeating-linear-gradient(45deg,#eef0f7,#eef0f7 10px,#e6e8f2 10px,#e6e8f2 20px);color:var(--ink-soft)}
.badge-ph{display:inline-block;background:var(--yellow);color:var(--ink);font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:.2rem .55rem;border-radius:6px;vertical-align:middle;margin-left:.4rem}

/* ---------- before / after slider ---------- */
.ba{position:relative;max-width:820px;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/10;user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 0 0 50%);}
.ba .handle{position:absolute;top:0;bottom:0;left:50%;width:4px;background:#fff;transform:translateX(-50%);box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.ba .knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--pink-dark)}
.ba .lab{position:absolute;bottom:14px;background:rgba(12,12,16,.78);color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.05em;padding:.25rem .6rem;border-radius:6px}
.ba .lab.l{left:14px}.ba .lab.r{right:14px}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}

/* ---------- games / atlas ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:0 0 30px}
.filters button{border:2px solid var(--line);background:#fff;color:var(--ink);padding:.5rem 1rem;border-radius:999px;font-weight:700;cursor:pointer;font-size:.9rem;transition:.15s}
.filters button:hover{border-color:var(--blue)}
.filters button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.games{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.game{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:.18s}
.game:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.game .thumb{aspect-ratio:1/1;object-fit:cover;width:100%;background:#eef0f7}
.game .thumb.noimg{display:flex;align-items:center;justify-content:center;font-size:2.4rem}
.game .body{padding:14px 16px 18px;display:flex;flex-direction:column;flex:1}
.game .cat{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.3rem}
.game h3{font-size:1rem;margin:0 0 .3rem}
.game p{font-size:.85rem;color:var(--ink-soft);margin:0 0 .8rem}
.game .add{margin-top:auto;font-size:.82rem;font-weight:700;color:var(--blue-dark)}
.cat-learn{color:#c99a00}.cat-move{color:var(--green-dark)}.cat-together{color:var(--blue-dark)}.cat-early{color:var(--pink-dark)}.cat-open{color:var(--purple-strong)}.cat-custom{color:var(--ink-soft)}

/* ---------- gallery ---------- */
.gallery{columns:4;column-gap:16px}
.gallery img{width:100%;border-radius:14px;margin-bottom:16px;box-shadow:var(--shadow-sm);break-inside:avoid}

/* ---------- process steps ---------- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 22px;box-shadow:var(--shadow-sm);position:relative}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-16px;left:22px;width:38px;height:38px;background:var(--pink);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--display)}
.step:nth-child(2)::before{background:var(--blue);color:#08333f}
.step:nth-child(3)::before{background:var(--green)}
.step:nth-child(4)::before{background:var(--purple)}

/* ---------- forms ---------- */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:.9rem;margin-bottom:.35rem}
.field .req{color:var(--pink-dark)}
.field input,.field select,.field textarea{
  width:100%;padding:.7rem .8rem;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:.95rem;background:#fbfbfe;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue)}
.field textarea{min-height:120px;resize:vertical}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.85rem;color:var(--ink-soft)}
.check input{width:auto;margin-top:.2rem}
.hs-error{color:var(--pink-dark);font-weight:600}

/* ---------- HubSpot embed slot ---------- */
.hs-embed:empty{display:none}
.hs-embed{margin-bottom:0}
.hs-placeholder{
  background:#fff7c2;border:1px dashed #d9c34d;border-radius:12px;
  padding:16px 18px;margin-bottom:18px;font-size:.88rem;color:#5c4b00
}
.hs-placeholder strong{display:block;margin-bottom:.3rem}
.hs-placeholder p{margin:0}
.hs-placeholder code{background:rgba(0,0,0,.07);padding:.05rem .3rem;border-radius:4px;font-size:.85em}
/* HubSpot's own markup, nudged toward the brand */
.hs-form .hs-input{
  width:100%;padding:.7rem .8rem;border:1.5px solid var(--line);border-radius:10px;
  font-family:inherit;font-size:.95rem;background:#fbfbfe
}
.hs-form .hs-button{
  background:var(--pink);color:#fff;border:0;border-radius:999px;
  font-family:var(--font);font-weight:700;padding:.85rem 1.5rem;cursor:pointer
}
.hs-form .hs-button:hover{background:var(--pink-dark)}
.hs-form label{font-weight:700;font-size:.9rem}
.hs-form .hs-error-msg{color:var(--pink-dark);font-size:.82rem}

/* ---------- resources ---------- */
.res-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;height:100%;
  color:var(--ink);transition:transform .18s ease,box-shadow .18s ease;
}
a.res-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.res-card .rc-top{height:8px;flex:0 0 8px}
.res-card > img{width:100%;aspect-ratio:4/3;object-fit:cover;flex:0 0 auto}
.res-card .rc-body{padding:24px;display:flex;flex-direction:column;flex:1}
.res-card h3{font-size:1.1rem;margin-bottom:.5rem}
.res-card p{color:var(--ink-soft);margin-bottom:1rem}
.res-card .rc-meta{
  font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 .9rem
}
/* push the read link to the bottom so every card lines up */
.res-card .rc-link{
  margin-top:auto;font-weight:700;font-size:.92rem;color:var(--blue-dark);
  display:inline-flex;align-items:center;gap:.4rem
}
a.res-card:hover .rc-link{color:var(--pink-dark)}
/* "coming soon" state for categories without articles yet */
.card.soon{position:relative}
.card .soon-tag{
  display:inline-block;margin-top:.4rem;font-size:.7rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);background:var(--cream);
  border:1px solid var(--line);padding:.2rem .55rem;border-radius:6px
}
.article{max-width:760px;margin:0 auto}
.article h2{margin-top:1.6em}
.article h2::after{content:none}
.article .meta{color:var(--ink-soft);font-size:.9rem;margin-bottom:1.5rem}
.callout{background:#e6f6fc;border:1px solid #c2e8f4;border-radius:14px;padding:20px 24px;margin:1.5rem 0}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#c9c9d4;padding:60px 0 26px}
.footer h4{color:#fff;font-size:1rem;letter-spacing:.03em;margin-bottom:1rem}
.footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:34px}
.footer a{color:#c9c9d4}
.footer a:hover{color:var(--yellow)}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:.5rem}
/* Footer brand mark.
   The .on-white chip exists only because the current logo is the colour
   version. When the white/knockout logo file is dropped in, swap the src
   and delete the "on-white" class — no CSS change needed. */
.footer .logo{height:56px;width:auto;margin-bottom:1rem;display:inline-block}
.footer .logo.on-white{background:#fff;padding:8px 10px;border-radius:12px}

.footer .partners{display:flex;flex-wrap:wrap;gap:12px}
.footer .partners a{
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;padding:8px 12px;border-radius:10px;min-height:52px;
  transition:transform .16s ease
}
.footer .partners a:hover{transform:translateY(-2px)}
.footer .partners img{height:34px;width:auto;display:block}
.footer .legal{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:20px;font-size:.82rem;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;justify-content:space-between;color:#8f8f9d}

/* prototype banner */
.proto{background:var(--yellow);color:var(--ink);text-align:center;font-size:.85rem;font-weight:700;padding:.5rem 22px}
.proto a{color:var(--ink);text-decoration:underline}

/* ---------- responsive: mobile navigation drawer ---------- */
@media(max-width:1024px){
  .topbar{display:none}
  .hamburger{display:block}
  /* IMPORTANT: backdrop-filter on .nav made it the containing block for the
     position:fixed drawer, so the drawer collapsed to the 64px nav height and
     appeared not to open. Dropping the blur on mobile restores fixed
     positioning against the viewport. */
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--white)}
  .nav .wrap{gap:.5rem}
  .nav-links{
    position:fixed;top:var(--navh);right:0;bottom:0;left:0;margin:0;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    background:var(--white);padding:8px 0 32px;overflow-y:auto;
    transform:translateX(100%);transition:transform .28s ease,visibility .28s ease;
    box-shadow:none;-webkit-overflow-scrolling:touch;
    visibility:hidden;z-index:58;
  }
  .nav.menu-open .nav-links{transform:translateX(0);visibility:visible}
  /* dim the page behind the open drawer */
  .nav-scrim{
    position:fixed;inset:0;background:rgba(12,12,16,.45);
    opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease;z-index:55
  }
  .nav.menu-open ~ .nav-scrim,body.nav-lock .nav-scrim{opacity:1;visibility:visible}
  .nav-links>li{width:100%;display:block;border-bottom:1px solid var(--line)}
  .nav-links>li a{display:block;padding:1.05rem 26px;font-size:1.14rem;border-radius:0;color:var(--ink);font-weight:600}
  .nav-links>li a:hover{background:rgba(78,200,244,.1)}
  .nav-links a.active{background:transparent;color:var(--pink-dark)}
  .nav-cta{display:flex;flex-direction:column;align-items:stretch;gap:.7rem;margin:0;padding:22px 26px 8px;border-left:0}
  .nav-cta .btn{width:100%;font-size:1.02rem;padding:.95rem 1.2rem}
  .nav-links>li.nav-contact{display:flex;flex-direction:column;gap:.7rem;padding:20px 26px;border-bottom:1px solid var(--line)}
  .nav-contact a{padding:0;font-size:1.02rem;color:var(--ink-soft);font-weight:600}
  .nav-contact .loc{font-size:.92rem;color:var(--ink-soft)}
}

/* ---------- responsive: layout ---------- */
@media(max-width:960px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .games{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .gallery{columns:2}
  .split{grid-template-columns:1fr;gap:28px}
  h1{font-size:clamp(1.9rem,7vw,2.6rem)}
  .section{padding:56px 0}
  .hero .wrap{padding:72px 22px}
}
@media(max-width:560px){
  .proto{font-size:.78rem;padding:.5rem 16px}
  .wrap{padding:0 16px}
  .g2,.g4,.g3,.games{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
  .form{padding:22px}
  .gallery{columns:1}
  .steps{grid-template-columns:1fr}
  .footer .cols{grid-template-columns:1fr;gap:26px}
  .hero .wrap{padding:56px 16px clamp(96px,26vw,140px)}
  .hero-inner::before{inset:-20px -22px -16px -20px;border-radius:24px}
  .cta-row .btn{width:100%}
  .btn{padding:.85rem 1.2rem}
  .trustbar .wrap{gap:14px}
  .trustbar .tb-logo{padding-right:0;padding-bottom:14px;border-right:0;border-bottom:1px solid rgba(255,255,255,.18);width:100%}
}

/* ===========================================================
   BUTTON LABEL COLOURS — must come last.
   Context selectors like `.nav-links a` and `.footer a` are more
   specific than `.btn-primary`, which was turning pink buttons in
   the nav, footer and dark sections grey. Two classes on the anchor
   beats those, so every button keeps its intended label colour.
   =========================================================== */
a.btn.btn-primary,a.btn.btn-primary:visited,button.btn.btn-primary{color:#fff}
a.btn.btn-primary:hover,button.btn.btn-primary:hover{color:#fff}
a.btn.btn-ghost,a.btn.btn-ghost:visited{color:#fff}
a.btn.btn-ghost:hover{color:var(--ink)}
a.btn.btn-secondary,a.btn.btn-secondary:visited{color:var(--ink)}
a.btn.btn-secondary:hover{color:#fff}
a.btn.btn-blue,a.btn.btn-blue:visited,a.btn.btn-blue:hover{color:#08333f}
a.btn{text-decoration:none}


/* ===========================================================
   ACCESSIBILITY LAYER
   Added 23 Aug 2026. Covers the brief's requirements for visible
   focus states, keyboard access and reduced-motion support.
   =========================================================== */

/* skip-to-content: visually hidden until focused */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;font-family:var(--font);font-weight:700;
  padding:.75rem 1.2rem;border-radius:0 0 10px 0;text-decoration:none
}
.skip:focus{left:0}

/* Visible focus ring on every interactive element. :focus-visible so it
   appears for keyboard users without ringing every mouse click. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--purple-strong);outline-offset:3px
}
/* on dark or saturated backgrounds the purple ring disappears — go white */
.hero a:focus-visible,.hero button:focus-visible,
.bg-ink a:focus-visible,.bg-ink button:focus-visible,
.bg-blue a:focus-visible,.bg-blue button:focus-visible,
.bg-grape a:focus-visible,.bg-grape button:focus-visible,
.trustbar a:focus-visible,.footer a:focus-visible,
.topbar a:focus-visible{
  outline-color:#fff
}
/* form fields already tint their border on focus — keep that AND the ring */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  border-color:var(--blue)
}
/* the before/after range sits invisible over the image; give it a ring too */
.ba input[type=range]:focus-visible{outline:3px solid #fff;outline-offset:-3px}

/* Respect the OS reduced-motion setting. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
  a.card:hover,.game:hover,.step:hover,a.res-card:hover,
  .btn:hover,.footer .partners a:hover{transform:none}
}

/* ---------- mobile CTA hierarchy ----------
   Per the brand brief: the Playground Builder is desktop-only, so the
   mobile drawer must not lead with it. Desktop keeps
   Design Your Playground / Request Pricing; mobile leads with
   Request Pricing and offers Explore Our Games as the secondary. */
.nav-cta .mob-only{display:none}
@media(max-width:1024px){
  .nav-cta .desk-only{display:none}
  .nav-cta .mob-only{display:inline-flex}
}


/* ===========================================================
   BRAND LAYER v3 — 23 Aug 2026
   Implements the parts of the design prompt that are pure
   front-end: spacing scale, pale section tints, graphic motifs,
   photo crops, distinct card types, headline treatments,
   tertiary links and reveal animation.
   Every piece here is additive — remove this block and the site
   returns to its previous appearance.
   =========================================================== */

:root{
  /* ---- spacing scale (values chosen to preserve current rhythm) ---- */
  --s1:.5rem; --s2:.75rem; --s3:1.15rem; --s4:1.75rem;
  --s5:2.75rem; --s6:4.75rem; --s7:7rem;

  /* ---- pale section tints, each derived from a brand colour ---- */
  --mint:#eef8ec;    /* green  */
  --blush:#fdeef4;   /* pink   */
  --sky:#e9f6fd;     /* blue   */
  --lilac:#f2ecf8;   /* purple */

  /* hand-drawn ring — a wobbly circle, brand guidelines motif */
  --ring:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M60 8 C88 8 113 31 113 60 C113 89 89 113 59 112 C30 111 7 88 8 59 C9 31 32 9 60 8 Z' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-dasharray='300 40'/%3E%3C/svg%3E");

  /* white paint-stroke backplate for headlines on colour */
  --plate:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120' preserveAspectRatio='none'%3E%3Cpath d='M14 26 C120 8 300 16 420 10 C520 5 578 14 592 20 C596 44 594 84 588 100 C470 112 250 104 130 110 C70 113 20 108 10 100 C6 76 8 42 14 26 Z' fill='%23fff'/%3E%3C/svg%3E");
}

.section{padding:var(--s6) 0}
.section.tight{padding:3.25rem 0}

/* ---------- pale section backgrounds ---------- */
.bg-mint{background:var(--mint)}
.bg-blush{background:var(--blush)}
.bg-sky{background:var(--sky)}
.bg-lilac{background:var(--lilac)}

/* body copy on the saturated sections */
.bg-grape p,.bg-grape .lead,.bg-blue p,.bg-blue .lead{color:rgba(255,255,255,.93)}
.bg-grape .card p,.bg-blue .card p{color:var(--ink-soft)}
.bg-grape .card h3,.bg-blue .card h3{color:var(--ink)}
.bg-grape h3,.bg-grape .eyebrow{color:#fff}

/* ---------- layered shapes behind content ----------
   currentColor means one rule works on light and dark sections:
   the shapes pick up the section's own text colour at low opacity. */
.has-shapes{position:relative;overflow:hidden}
.has-shapes > .wrap{position:relative;z-index:2}
.has-shapes::before,.has-shapes::after{
  content:"";position:absolute;pointer-events:none;color:inherit
}
.has-shapes::before{
  width:min(430px,46vw);aspect-ratio:1;border-radius:50%;
  background:currentColor;opacity:.07;top:-16%;right:-8%
}
.has-shapes::after{
  width:min(260px,28vw);aspect-ratio:1;
  /* masked so the ring takes the section's own text colour:
     dark on pale sections, white on saturated ones */
  background:currentColor;
  -webkit-mask:var(--ring) center/contain no-repeat;
          mask:var(--ring) center/contain no-repeat;
  opacity:.16;bottom:-9%;left:-5%
}

/* painted edge along the top of the footer */
.footer{position:relative}
.footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:16px;
  background:var(--brush) center/100% 100% no-repeat;pointer-events:none
}

/* ---------- photo crops ---------- */
.crop-arch{border-radius:280px 280px var(--radius-lg) var(--radius-lg);aspect-ratio:4/4.4;object-fit:cover}
.crop-circle{border-radius:50%;aspect-ratio:1;object-fit:cover}

/* ---------- trust bar: light blue, per the brief ---------- */
.trustbar{background:var(--sky);color:var(--ink)}
.trustbar .tb-logo{border-right-color:rgba(20,20,25,.14)}
.trustbar .tb-logo img{background:transparent;padding:0}
.trustbar .tb-items span:nth-child(1) .dot{color:var(--pink)}
.trustbar .tb-items span:nth-child(2) .dot{color:var(--green-dark)}
.trustbar .tb-items span:nth-child(3) .dot{color:var(--blue-dark)}
.trustbar .tb-items span:nth-child(4) .dot{color:var(--purple-strong)}
.trustbar .tb-items span:nth-child(5) .dot{color:var(--pink-dark)}

/* ---------- service card: colour header + consistent CTA ---------- */
.card--service{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card--service .ch{height:10px;flex:0 0 10px}
.card--service .cb{padding:24px;display:flex;flex-direction:column;flex:1}
.card--service .ic{margin-top:-2px}
.card--service .link-paint{margin-top:auto;padding-top:.4rem}

/* ---------- project card: before/after indicator + org label ---------- */
.pill{
  display:inline-flex;align-items:center;gap:.35rem;align-self:flex-start;
  font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:var(--sky);color:var(--blue-dark);border-radius:999px;
  padding:.28rem .6rem;margin-bottom:.7rem
}

/* ---------- tertiary link: painted underline that draws in ---------- */
.link-paint{
  display:inline-flex;align-items:center;gap:.45rem;width:fit-content;
  font-family:var(--font);font-weight:700;font-size:.94rem;color:var(--purple-strong);
  background-image:var(--brush);background-repeat:no-repeat;
  background-position:0 100%;background-size:0 .32em;
  padding-bottom:.34em;transition:background-size .28s ease,color .18s ease
}
.link-paint:hover,.link-paint:focus-visible{background-size:100% .32em;color:var(--pink-dark)}
.link-paint .arw{transition:transform .2s ease}
.link-paint:hover .arw{transform:translateX(4px)}
.bg-ink .link-paint,.bg-grape .link-paint,.bg-blue .link-paint{color:var(--yellow)}

/* ---------- headline treatments ----------
   1 plain (default)  2 white on colour (default in .bg-* sections)
   3 on a paint-stroke plate  4 one word in a second brand colour
   5 paired with playground geometry (.has-shapes)              */
h1.h-plate,h2.h-plate,h3.h-plate,
.bg-grape h2.h-plate,.bg-blue h2.h-plate,.bg-ink h2.h-plate,.bg-sun h2.h-plate{
  display:inline-block;position:relative;padding:.16em .7em .22em;
  color:var(--ink);isolation:isolate
}
.h-plate::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--plate) center/100% 100% no-repeat
}
/* the plate replaces the brush underline — don't run both */
.center h2.h-plate::after{content:none}
mark.hl{background:none;color:var(--pink-dark);font:inherit}
.bg-ink mark.hl,.bg-grape mark.hl,.bg-blue mark.hl,.hero mark.hl{color:var(--yellow)}

/* ---------- reveal on scroll (classes added by site.js) ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal.in{opacity:1;transform:none;transition:none}
  .link-paint{transition:none;background-size:100% .32em}
}

/* ---------- responsive guards ----------
   decorative shapes must never create horizontal scroll or sit
   under text, and the arch crop needs less height on small screens */
@media(max-width:960px){
  .crop-arch{aspect-ratio:4/4}
  .has-shapes::before{width:60vw;top:-10%;right:-18%}
  .has-shapes::after{width:38vw;bottom:-4%;left:-14%}
}
@media(max-width:560px){
  .has-shapes::after{display:none}
  .h-plate{padding:.14em .5em .2em}
}

/* resource + project card links share the tertiary painted-underline
   treatment, without needing a class change in the markup */
.res-card .rc-link{
  width:fit-content;background-image:var(--brush);background-repeat:no-repeat;
  background-position:0 100%;background-size:0 .3em;padding-bottom:.32em;
  transition:background-size .28s ease,color .18s ease
}
a.res-card:hover .rc-link,a.res-card:focus-visible .rc-link{background-size:100% .3em}
@media(prefers-reduced-motion:reduce){
  .res-card .rc-link{transition:none;background-size:100% .3em}
}