/* Cooperative Dirty - Meir Ben David. A distressed condensed face that reads
   like fight-poster lettering. Self hosted, converted from the studio OTFs. */
@font-face{font-family:"Cooperative Dirty";src:url("../assets/fonts/cooperative-dirty.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cooperative Dirty";src:url("../assets/fonts/cooperative-dirty-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* =========================================================
   ROCA Fighting Gym
   Palette, type and motion derived from the brand logo.
   Motion components adapted from data/inspiration-library
   /prompts/_motionsites-report.md (the component kit).
   ========================================================= */

:root{
  /* colours - taken from ROCA LOGO.svg, not sampled by eye */
  --orange:#F79420;
  --orange-deep:#D97A0C;
  --blue:#135275;
  --blue-deep:#0D3A54;
  --ink:#111111;
  --ink-soft:#1B1B1B;
  --ink-card:#232323;
  --graphite:#666666;
  --gray:#9B9B9B;
  --paper:#F5F3F0;
  --paper-2:#EAE6E1;
  --white:#FFFFFF;

  --wa:#25D366;

  /* type */
  --display:"Cooperative Dirty", "Frank Ruhl Libre", Georgia, serif;
  --serif:"Frank Ruhl Libre", Georgia, serif;
  --poster:"Cooperative Dirty", "Frank Ruhl Libre", sans-serif;
  --body:"IBM Plex Sans Hebrew", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* motion - the house curve of the kit */
  --ease:cubic-bezier(0.16, 1, 0.3, 1);
  --step:120ms;

  --wrap:1180px;
  --radius:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;            /* never a horizontal scrollbar on the page */
}
img,video,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:.005em;margin:0}
p{margin:0}
ul,ol,dl{margin:0;padding:0;list-style:none}

.wrap{width:min(100% - 40px, var(--wrap));margin-inline:auto}
.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip:focus{position:fixed;inset-block-start:12px;inset-inline-start:12px;z-index:200;background:var(--orange);color:#000;padding:10px 18px;border-radius:999px}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---------- liquid glass (kit component, 23 of 76 files) ---------- */
.liquid-glass{
  background:rgba(255,255,255,.01);
  background-blend-mode:luminosity;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:none;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.1);
  position:relative;
  overflow:hidden;
}
.liquid-glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.45) 0%, rgba(255,255,255,.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,.15) 80%, rgba(255,255,255,.45) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}

/* ---------- entrance ladder (kit component) ----------
   fill-mode backwards, never both/forwards: a left-over transform
   kills backdrop-filter on any glass child. */
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.reveal{opacity:0}
.reveal.is-in{animation:rise .7s var(--ease) backwards;animation-delay:calc(var(--i,0) * var(--step));opacity:1}

@keyframes wordReveal{
  from{opacity:0;transform:translateY(100%);filter:blur(5px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
.word{display:inline-block;overflow:hidden;vertical-align:top}
.word > span{display:inline-block;opacity:0}
.words-in .word > span{animation:wordReveal .75s var(--ease) backwards;animation-delay:calc(var(--w) * 90ms);opacity:1}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 22px;border-radius:999px;border:1px solid transparent;
  font-family:var(--body);font-weight:600;font-size:15px;text-decoration:none;
  cursor:pointer;transition:transform .2s var(--ease), background-color .2s, opacity .2s;
}
.btn:hover{transform:translateY(-1px)}
.btn--lg{padding:15px 30px;font-size:16px}
.btn--wa{background:var(--orange);color:#151005}
.btn--wa:hover{background:#ffa939}
.btn--invert{background:var(--ink);color:var(--white)}
.btn--invert:hover{background:#000}
.btn--ghost{border-color:rgba(255,255,255,.45);color:var(--white)}
.btn--ghost:hover{background:rgba(255,255,255,.1)}

/* ---------- nav ----------
   Poster lettering, a brush mark on the section you are in, and a bar that
   only grows a ground once you leave the hero. */
.nav{position:fixed;inset-block-start:0;inset-inline:0;z-index:90;padding:16px 0;
     transition:background-color .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease)}
.nav.is-stuck{background:rgba(12,12,12,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
     padding:9px 0;box-shadow:0 1px 0 rgba(255,255,255,.09), 0 10px 30px rgba(0,0,0,.35)}
.nav__inner{position:relative;z-index:96;width:min(100% - 32px,1320px);margin-inline:auto;display:flex;align-items:center;gap:clamp(12px,2vw,26px)}
.nav__logo img{width:132px;height:auto;transition:width .35s var(--ease)}
.nav.is-stuck .nav__logo img{width:112px}

.nav__links{margin-inline-start:auto;display:flex;align-items:center;gap:clamp(4px,1.4vw,20px)}
.nav__links a{position:relative;padding:8px 4px;font-family:var(--poster);font-weight:700;font-size:18px;
  letter-spacing:.04em;color:rgba(255,255,255,.7);text-decoration:none;transition:color .25s var(--ease)}
.nav__links a:hover,.nav__links a.is-current{color:#fff}
/* the brand brush marks where you are, instead of a generic underline */
.nav__links a::after{content:"";position:absolute;inset-inline:-6%;inset-block-end:1px;height:9px;
  background:var(--orange);opacity:0;transform:scaleX(.4);transform-origin:right;
  -webkit-mask:url("../assets/logo/brush.svg") center/100% 100% no-repeat;
  mask:url("../assets/logo/brush.svg") center/100% 100% no-repeat;
  transition:opacity .3s var(--ease), transform .35s var(--ease)}
.nav__links a:hover::after{opacity:.45;transform:scaleX(.8)}
.nav__links a.is-current::after{opacity:1;transform:scaleX(1)}
.nav__cta{font-family:var(--poster);font-weight:700;font-size:17px;letter-spacing:.03em;padding:11px 20px}

.nav__toggle{position:relative;z-index:97;display:none;width:46px;height:42px;border-radius:10px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.nav__toggle span{display:block;width:20px;height:1.8px;background:#fff;transition:transform .3s var(--ease),opacity .2s}
.nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(3.9px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.9px) rotate(-45deg)}

.nav__mobile{position:fixed;inset:0;z-index:94;display:none;flex-direction:column;justify-content:center;gap:26px;
  padding:90px 28px 40px;background:rgba(10,10,10,.98);backdrop-filter:blur(8px)}
.nav.is-open .nav__mobile{display:flex}
.nav__mobile nav{display:flex;flex-direction:column;gap:2px}
.nav__mobile nav a{font-family:var(--poster);font-weight:700;font-size:clamp(28px,8vw,40px);letter-spacing:.02em;
  color:#fff;text-decoration:none;padding-block:12px;border-block-end:1px solid rgba(255,255,255,.1);
  opacity:0;transform:translateY(18px)}
.nav.is-open .nav__mobile nav a{animation:rise .5s var(--ease) forwards;animation-delay:calc(120ms + var(--i,0) * 70ms)}
.nav__mobile .btn{align-self:flex-start}
.nav__mobile-foot{font-size:13.5px;color:rgba(255,255,255,.45);letter-spacing:.04em}

/* ---------- hero ----------
   The source clips are 576x1024 portrait phone footage. They live in a
   framed card at close to native width instead of a stretched full-bleed
   background, so they stay sharp. (kit: Tech-Forward frames its video too) */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:130px 0 80px;overflow:hidden;background:#0C0C0C}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:60% center}
.hero__scrim{position:absolute;inset:0;background:
  linear-gradient(to top, rgba(10,10,10,.98) 2%, rgba(10,10,10,.62) 45%, rgba(10,10,10,.8) 100%),
  radial-gradient(120% 100% at 70% 45%, transparent 10%, rgba(10,10,10,.8) 100%),
  linear-gradient(to right, transparent 34%, rgba(10,10,10,.72) 88%);}   /* the copy column sits on the right in RTL */
.hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,70px);align-items:center}
.hero__content{display:flex;flex-direction:column;align-items:flex-start;gap:20px;text-align:start}
.chip{display:inline-block;padding:7px 18px;border-radius:999px;font-size:14px;letter-spacing:.02em;color:rgba(255,255,255,.92);background:rgba(255,255,255,.14)}
.hero__title{font-size:clamp(3rem,7.4vw,6.2rem);line-height:.94;text-shadow:0 2px 40px rgba(0,0,0,.55)}
.hero__sub{max-width:36ch;font-size:clamp(1rem,1.8vw,1.25rem);color:rgba(255,255,255,.82)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:6px}

.hero__media{display:flex;flex-direction:column;align-items:center;gap:14px}
.hero__card{width:min(100%,360px);border-radius:10px;padding:8px}
.hero__video{position:relative;aspect-ratio:9/16;border-radius:6px;overflow:hidden;background:#000}
.hero__video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;opacity:0;transition:opacity 1s linear}
.hero__video video.is-on{opacity:1}
.hero__thai{direction:ltr;unicode-bidi:isolate;font-size:14px;letter-spacing:.12em;color:rgba(255,255,255,.45)}

/* ---------- trust strip ---------- */
.trust{background:var(--ink);border-block:1px solid rgba(255,255,255,.1)}
.trust__list{display:grid;grid-template-columns:repeat(4,1fr);padding:0}
.trust__list li{display:flex;flex-direction:column;gap:3px;padding:26px 22px;border-inline-start:1px solid rgba(255,255,255,.1)}
.trust__list li:first-child{border-inline-start:0}
.trust__list strong{font-family:var(--poster);font-weight:700;font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1;color:var(--orange);letter-spacing:-.02em}
.trust__list span{font-size:14px;color:rgba(255,255,255,.62)}

/* ---------- section furniture ---------- */
.sec-head{padding-block:clamp(64px,9vw,110px) 34px;max-width:760px}
.eyebrow{display:inline-block;font-family:var(--poster);font-weight:700;font-size:16px;letter-spacing:.14em;color:var(--orange);margin-block-end:10px}
.sec-head h2{font-size:clamp(2.6rem,6vw,4.6rem)}
.sec-head h2 em{font-style:normal;position:relative;display:inline-block}
/* the brush mark from the logo, reused as the system underline */
.sec-head h2 em::after{
  content:"";position:absolute;inset-inline:-3%;inset-block-end:-.18em;height:.20em;
  background:var(--orange);
  -webkit-mask:url("../assets/logo/brush.svg") center/100% 100% no-repeat;
  mask:url("../assets/logo/brush.svg") center/100% 100% no-repeat;
}
.lead{margin-block-start:16px;font-size:clamp(1rem,1.7vw,1.15rem);color:rgba(255,255,255,.74);max-width:56ch}


/* ---------- surface: grain + a painted brush rule between sections ----------
   Every photograph here came off a phone in a different light. A single film
   grain over the dark ground is what makes them read as one shoot. */
.grain{position:relative}
.grain::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;mix-blend-mode:overlay;
}
.grain > *{position:relative;z-index:2}

/* the brush paints itself across as the section arrives */
.rule{height:16px;margin-block:clamp(40px,6vw,72px) 0;background:var(--orange);opacity:.85;
  -webkit-mask:url("../assets/logo/brush.svg") right center/0% 100% no-repeat;
  mask:url("../assets/logo/brush.svg") right center/0% 100% no-repeat;
  transition:-webkit-mask-size 1.4s var(--ease), mask-size 1.4s var(--ease)}
.rule.is-in{-webkit-mask-size:100% 100%;mask-size:100% 100%}

/* a vertical wordmark rail, the way it sits on a fight poster */
.rail{position:fixed;top:0;bottom:0;right:16px;z-index:70;display:flex;align-items:center;
  pointer-events:none;writing-mode:vertical-rl;text-orientation:mixed;direction:ltr;
  font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.5em;
  color:rgba(255,255,255,.22);mix-blend-mode:difference}
@media (max-width:1200px){.rail{display:none}}

/* the five animals of shaolin, as stamps rather than a sentence */
.animals{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-block:4px}
.animals li{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;
  border:1px solid rgba(255,255,255,.14);border-radius:2px;background:rgba(255,255,255,.02)}
.animals b{font-family:"Noto Serif SC","Songti SC","SimSun",serif;font-size:26px;font-weight:400;
  line-height:1;color:var(--c);opacity:.92}
.animals span{font-size:12.5px;color:rgba(255,255,255,.66)}

/* ---------- hall + marquee ---------- */
.hall{background:var(--ink);padding-block-end:clamp(60px,8vw,96px)}
.marquee{position:relative;overflow:hidden;direction:ltr;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);}
.marquee__track{display:flex;width:max-content;will-change:transform;animation:marquee 60s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee figure{margin:0 0 0 14px;flex:0 0 auto;width:clamp(230px,26vw,380px);aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);background:var(--ink-card)}
.marquee img{width:100%;height:100%;object-fit:cover}

/* ---------- three gates: full-width alternating rows ---------- */
.train{background:var(--ink);padding-block-end:clamp(70px,9vw,120px)}
.gates{display:flex;flex-direction:column;gap:clamp(48px,6vw,86px)}
.gate{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(24px,4vw,56px);align-items:center}
.gate:nth-child(even){direction:ltr}
.gate:nth-child(even) > *{direction:rtl}
.gate--fight{--c:var(--orange);--focus:24%;--ink:.5}
.gate--tradition{--c:#C9C3B8;--focus:15%;--ink:.3}
.gate--move{--c:#4FA3D1;--focus:44%;--ink:.45}
.gate__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:#000}
.gate__media img{width:100%;height:100%;object-fit:cover;object-position:center var(--focus,32%);
  filter:grayscale(1) contrast(1.06) brightness(.96);transition:transform 1.2s var(--ease), filter .7s var(--ease)}
.gate__media::before{content:"";position:absolute;inset:0;z-index:1;background:var(--c);
  mix-blend-mode:color;opacity:var(--ink,.5);transition:opacity .7s var(--ease);pointer-events:none}
.gate:hover .gate__media img{filter:none}
.gate:hover .gate__media::before{opacity:0}
.gate:hover .gate__media img{transform:scale(1.03)}
.gate__media::after{content:"";position:absolute;z-index:2;inset-block-end:0;inset-inline-start:0;width:38%;height:3px;background:var(--c)}
.gate__body{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:56ch}
.gate__index{font-family:var(--poster);font-weight:700;font-size:clamp(2.6rem,6vw,4.6rem);line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--c);letter-spacing:-.04em;margin-block-end:-6px}
.gate__kicker{font-family:var(--poster);font-weight:700;font-size:16px;letter-spacing:.12em;color:var(--c)}
.gate h3{font-size:clamp(2rem,4vw,3.2rem);line-height:1}
.gate__lede{color:rgba(255,255,255,.74);font-size:clamp(1rem,1.5vw,1.12rem)}
.gate__more{background:none;border:0;padding:6px 0;color:#fff;font:600 15px var(--body);cursor:pointer;border-block-end:1px solid var(--c);transition:color .2s}
.gate__more:hover{color:var(--c)}
.gate__panel[hidden]{display:none}
.gate__panel{border-block-start:1px solid rgba(255,255,255,.12);padding-block-start:18px;display:flex;flex-direction:column;gap:14px;font-size:15.5px;color:rgba(255,255,255,.76)}
.gate__panel dt{font-weight:700;color:#fff;margin-block-start:8px}
.gate__panel dd{margin:2px 0 0}
.ticks li{padding-inline-start:20px;position:relative;margin-block-end:6px}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.62em;width:7px;height:7px;border-radius:50%;background:var(--c)}
.gate__panel blockquote{margin:0;padding-inline-start:16px;border-inline-start:2px solid var(--c);font-family:var(--serif);font-weight:500;font-size:1.05rem;line-height:1.5;color:rgba(255,255,255,.9)}
.hours{color:#fff}
.todo{font-size:13px;color:#FFC46B;background:rgba(247,148,32,.1);border:1px dashed rgba(247,148,32,.45);border-radius:var(--radius);padding:8px 12px;align-self:stretch}

/* ---------- kids ---------- */
.kids{background:var(--blue);padding-block:clamp(64px,9vw,110px)}
.kids .eyebrow{color:#8FD3FF}
.kids__grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.kids h2{font-size:clamp(2.6rem,5.6vw,4.2rem)}
.kids h2 em{font-style:normal;color:#FFD9A3}
.kids .lead{color:rgba(255,255,255,.85)}
.kids__points{margin-block:26px;display:grid;gap:14px}
.kids__points li{display:flex;flex-direction:column;padding-inline-start:16px;border-inline-start:2px solid rgba(255,255,255,.3)}
.kids__points strong{font-size:16.5px}
.kids__points span{font-size:15px;color:rgba(255,255,255,.75)}
.kids__media{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kids__media figure{margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;background:rgba(0,0,0,.25)}
.kids__media figure:first-child{grid-column:1 / -1;aspect-ratio:16/10}
.kids__media img{width:100%;height:100%;object-fit:cover}

/* ---------- teachers: a ruled list, no cards ---------- */
.teachers{background:var(--paper);color:var(--ink)}
.teachers .eyebrow{color:var(--orange-deep)}
.teachers .lead{color:#4A4A4A}
.people{display:flex;flex-direction:column;padding-block-end:clamp(64px,9vw,110px);border-block-start:1px solid rgba(0,0,0,.14)}
.person{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(16px,4vw,54px);padding-block:30px;border-block-end:1px solid rgba(0,0,0,.14)}
.person__id h3{font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1}
.person__role{font-family:var(--poster);font-size:15px;font-weight:700;letter-spacing:.05em;color:var(--orange-deep);margin-block:8px 4px}
.person__since{font-size:13.5px;color:#7A756D}
.person__bio{font-size:16px;color:#3A3A38;line-height:1.72;align-self:center}

/* ---------- visit ---------- */
.visit{background:var(--ink);padding-block-end:clamp(70px,9vw,110px)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-block-end:44px}
.steps li{background:var(--ink-card);border-radius:var(--radius);padding:24px}
.steps__n{font-family:var(--poster);display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--orange);color:#161009;font-family:var(--display);margin-block-end:12px}
.steps h3{font-size:1.15rem;margin-block-end:6px}
.steps p{color:rgba(255,255,255,.72);font-size:15.5px}
.visit__grid{display:grid;grid-template-columns:1fr;gap:20px}
.visit__note{color:var(--orange);font-size:15.5px;margin-block-start:6px}
.visit__card{background:var(--ink-card);border-radius:var(--radius);padding:26px}
.visit__card h3{font-size:1.3rem;margin-block-end:16px}
.sched{width:100%;border-collapse:collapse;font-size:15.5px}
.sched th,.sched td{text-align:start;padding:11px 8px;border-block-end:1px solid rgba(255,255,255,.1)}
.sched thead th{font-size:12.5px;letter-spacing:.1em;color:var(--gray);font-weight:600}
.sched tbody th{font-weight:600}
.sched__todo th,.sched__todo td{color:rgba(255,255,255,.6);font-weight:400}
.addr{font-family:var(--display);font-size:1.3rem;margin-block-end:8px}
.visit__card p{color:rgba(255,255,255,.74);font-size:15.5px}
.visit__links{display:flex;gap:14px;margin-block:14px}
.visit__links a{color:var(--orange);font-weight:600;text-decoration:none;border-block-end:1px solid currentColor}
.cta-band{margin-block-start:44px;background:var(--orange);color:#171105;border-radius:var(--radius);padding:clamp(34px,5vw,56px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.cta-band h2{font-size:clamp(2.2rem,5vw,3.6rem)}
.cta-band p{opacity:.8}
.cta-band .btn{margin-block-start:10px}

/* ---------- footer ---------- */
.foot{background:#0A0A0A;padding-block:56px 0;font-size:15px}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
.foot__logo{width:150px;height:auto;margin-block-end:14px;opacity:.9}
.foot p{color:rgba(255,255,255,.6)}
.foot h3{font-size:1.05rem;margin-block-end:12px}
.foot li{padding-block:4px;color:rgba(255,255,255,.7)}
.foot a{color:rgba(255,255,255,.85);text-decoration:none}
.foot a:hover{color:var(--orange)}
.foot__bar{margin-block-start:44px;padding-block-end:78px;border-block-start:1px solid rgba(255,255,255,.08);padding-block:18px;display:flex;justify-content:space-between;gap:12px;width:min(100% - 40px,var(--wrap));margin-inline:auto;font-size:13.5px;color:rgba(255,255,255,.45)}

/* ---------- floating action ---------- */
.fab{position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:80;display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:999px;background:var(--orange);color:#151005;text-decoration:none;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.45);transition:transform .2s var(--ease)}
.fab:hover{transform:translateY(-2px)}

/* =========================================================
   responsive
   ========================================================= */
@media (max-width:1000px){
  .gate{grid-template-columns:1fr;gap:22px}
  .gate:nth-child(even){direction:rtl}
  .gate__media{aspect-ratio:16/11}
  .person{grid-template-columns:1fr;gap:10px}
  .trust__list{grid-template-columns:1fr 1fr}
  .trust__list li:nth-child(3){border-inline-start:0}
  .visit__grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .kids__grid{grid-template-columns:1fr;gap:30px}
  .foot__grid{grid-template-columns:1fr 1fr}
  .trust__list{grid-template-columns:1fr 1fr;gap:18px}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:flex}
  .hero{min-height:auto;padding:110px 0 60px}
  .hero__grid{grid-template-columns:1fr;gap:30px}
  .hero__content{align-items:center;text-align:center}
  .hero__sub{max-width:32ch}
  .hero__cta{justify-content:center}
  .hero__card{width:min(100%,300px)}
  .hero__bg img{object-position:66% center}   /* keep the subject in frame on phones */
  .foot__grid{grid-template-columns:1fr}
  .foot__bar{flex-direction:column;text-align:center}
  .marquee figure{width:220px}
  .fab{inset-inline:14px;inset-block-end:14px;justify-content:center}
  .kids__media figure:first-child{aspect-ratio:16/11}
}
@media (max-width:1000px) and (min-width:761px){
  .hero__grid{grid-template-columns:1.1fr .9fr}
  .hero__card{width:min(100%,300px)}
}

/* =========================================================
   reduced motion - everything off, nothing hidden
   (only 4 of 76 prompts in the kit do this. it is the difference we keep.)
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rule{-webkit-mask-size:100% 100%;mask-size:100% 100%;transition:none}
  .gate__media img,.gate__media::before{transition:none}
  .nav__links a::after{transition:none}
  .nav.is-open .nav__mobile nav a{animation:none;opacity:1;transform:none}
  .reveal,.reveal.is-in{opacity:1;animation:none}
  .words-in .word > span,.word > span{opacity:1;animation:none;filter:none;transform:none}
  .marquee__track{animation:none;flex-wrap:wrap;width:100%;justify-content:center}
  .marquee{-webkit-mask:none;mask:none}
  .hero__video video{transition:none}
  .gate__img img,.btn,.fab{transition:none}
}