/* ═══════════════════════════════════════════════════════════
   First Response Academy — proof-led authority build
   Palette sampled from their own logo: brand red + Star-of-Life navy
   ═══════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Big Shoulders"; font-style:normal; font-weight:900; font-display:swap;
  src:url("fonts/big-shoulders-900.woff2") format("woff2");
}
@font-face{
  font-family:"Public Sans"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("fonts/public-sans.woff2") format("woff2");
}
@font-face{
  font-family:"Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/plex-mono-400.woff2") format("woff2");
}
@font-face{
  font-family:"Plex Mono"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/plex-mono-500.woff2") format("woff2");
}

:root{
  --red:#A01117;
  --red-bright:#C80818;
  --navy:#00368C;
  --navy-deep:#04173D;
  --ink:#0E1621;
  --paper:#F4F2ED;
  --paper-2:#E9E5DB;
  --line:#D8D2C4;
  --on-dark:#FFFFFF;
  --on-dark-2:rgba(255,255,255,.66);
  --ink-2:#5C6472;

  --ff-hero:"Big Shoulders",Impact,sans-serif;
  --ff-body:"Public Sans",ui-sans-serif,system-ui,sans-serif;
  --ff-mono:"Plex Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  background:var(--paper); color:var(--ink);
  font-family:var(--ff-body); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
button{font-family:inherit}

.container{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,52px)}

.eyebrow{
  font-family:var(--ff-mono);font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:20px;height:2px;background:var(--red);flex:none}
.eyebrow--light{color:#FF6B72}
.eyebrow--light::before{background:#FF6B72}

.h-sec{
  font-family:var(--ff-hero);font-weight:900;text-transform:uppercase;
  font-size:clamp(36px,6vw,82px);line-height:.9;letter-spacing:-.01em;margin:18px 0 0;
}
.lede{margin:20px 0 0;max-width:52ch;font-size:clamp(15px,1.3vw,17px);line-height:1.7;color:var(--ink-2)}

/* ── SKIP LINK ─────────────────────────────────────────── */
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--navy-deep);color:#fff;
  padding:12px 18px;font-size:14px}
.skip:focus{left:8px;top:8px}

/* ── STICKY NAV ────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:120;background:rgba(4,23,61,.96);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.14);
  transform:translateY(-100%);transition:transform .45s var(--ease);
}
.nav.on{transform:translateY(0)}
.nav__in{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,52px);
  height:64px;display:flex;align-items:center;gap:clamp(12px,2vw,28px)}
.nav__logo{display:flex;align-items:center;flex:none}
.nav__logo img{height:34px;width:auto}
.nav__only-m{display:none}
.nav__links{list-style:none;display:flex;gap:clamp(10px,1.6vw,22px);margin:0;padding:0;
  flex:1;justify-content:center;min-width:0}
.nav__links a{color:rgba(255,255,255,.78);text-decoration:none;font-size:13px;white-space:nowrap;
  padding:6px 2px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.nav__links a:hover,.nav__links a:focus-visible{color:#fff;border-bottom-color:var(--red-bright)}
.nav__cta{display:flex;align-items:center;gap:10px;flex:none}
.nav__wa,.nav__book{font-size:13px;font-weight:600;text-decoration:none;padding:9px 14px;white-space:nowrap}
.nav__wa{color:#fff;border:1px solid rgba(255,255,255,.34)}
.nav__wa:hover{background:#25D366;border-color:#25D366;color:#04231a}
.nav__book{background:var(--red-bright);color:#fff}
.nav__book:hover{background:#fff;color:var(--navy-deep)}

/* Call button. The brochure moved out of the bar and into the hero at the
   client's request, so the cluster is language / call / book. */
.nav__tel{
  font-size:13px;font-weight:600;text-decoration:none;padding:9px 12px;
  white-space:nowrap;color:#fff;border:1px solid rgba(255,255,255,.34);
}
.nav__tel:hover{background:#fff;color:var(--navy-deep)}
/* This used to colour the ☎ dingbat. After the icon became an <svg>, the only
   remaining span is the phone NUMBER — leaving the rule turned the digits
   #C80818 on #04173D, about 1.9:1 and unreadable. Colour lives on the icon. */

.nav__ico{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav__tel .nav__ico{stroke:var(--red-bright)}
.nav__tel:hover .nav__ico{stroke:var(--navy-deep)}
.nav__t{margin-left:7px}

/* WhatsApp is the one that goes: it is duplicated by the floating button on
   every page, so the bar keeps phone, brochure and the booking CTA. */
@media(max-width:1180px){ .nav__wa{display:none} }
.nav__burger{display:none;background:none;border:0;cursor:pointer;padding:10px;flex:none}
.nav__burger span{display:block;width:22px;height:2px;background:#fff;margin:4px 0;
  transition:transform .3s var(--ease),opacity .3s}
.nav.open .nav__burger span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.nav.open .nav__burger span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* ── WHATSAPP FAB ──────────────────────────────────────── */
.wafab{
  position:fixed;right:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);z-index:110;
  display:inline-flex;align-items:center;gap:10px;padding:13px 18px;border-radius:40px;
  background:#25D366;color:#04231a;text-decoration:none;font-weight:600;font-size:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.24);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease),background .2s;
}
.wafab.on{opacity:1;transform:translateY(0);pointer-events:auto}
.wafab:hover{background:#1FBA59}
.wafab:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ── FIND US / MAP ─────────────────────────────────────── */
.findus{background:var(--ink);color:#fff;padding:clamp(60px,8vw,110px) 0}
.findus .h-sec{color:#fff}
.findus__grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(22px,3vw,44px);margin-top:clamp(28px,3.6vw,44px);align-items:stretch}
.findus__map{position:relative;min-height:320px;border:1px solid rgba(255,255,255,.18);overflow:hidden}
.findus__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) invert(.92) contrast(.9)}
.findus__side p{margin:0 0 14px;font-size:15px;line-height:1.7;color:var(--on-dark-2)}
.findus__dir{display:inline-block;color:#fff;font-weight:600;font-size:14px;text-decoration:none;
  border-bottom:1px solid var(--red-bright);padding-bottom:4px}
.findus__note{font-size:13.5px;margin-top:20px!important}

/* ── PRELOADER ─────────────────────────────────────────── */
#pre{
  position:fixed;inset:0;z-index:200;background:var(--navy-deep);
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:clamp(20px,4vw,48px);
}
/* height:auto is load-bearing. The <img> carries height="510" as an attribute;
   while the logo was an SVG its intrinsic ratio won, but for a raster the
   attribute is used as the height when CSS sets only width — rendering the
   lockup 150x510 instead of 150x100, a tall column covering the whole loader. */
#pre img{width:clamp(140px,20vw,240px);height:auto;align-self:flex-start;margin-top:auto}
#pre .pc{
  font-family:var(--ff-hero);font-weight:900;font-size:clamp(52px,12vw,160px);
  line-height:.8;color:#fff;font-variant-numeric:tabular-nums;
}
#pre .pbar{position:absolute;left:0;bottom:0;height:3px;width:0%;background:var(--red-bright)}

/* ── loader scene ──────────────────────────────────────── */
/* Centred behind the logo and counter, which stay pinned to the corners. */
.pscene{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-54%);
  width:min(680px,82vw);pointer-events:none;
}
.pscene svg{width:100%;height:auto;display:block;overflow:visible}

.p-ground{stroke:rgba(255,255,255,.22);stroke-width:1.5}

/* figures: signage pictograms, not characters */
.p-fig circle,.p-fig rect{fill:#fff}
.p-hat{fill:var(--red-bright)}
.p-hat--w{fill:#fff}
.p-fig line{stroke:#fff;stroke-width:6;stroke-linecap:round}
.p-fig{opacity:0}
.p-point{stroke:var(--red-bright)!important}

.p-ext rect{fill:var(--red-bright)}
.p-ext .p-hose{stroke:#fff;stroke-width:4;stroke-linecap:round}
.p-ext{opacity:0}

/* the discharge cone sweeps out from the nozzle */
.p-jet__core{fill:rgba(255,255,255,.30)}

/* flame: three nested copies of one path, each a little smaller and hotter */
/* No transform-box here: GSAP drives this group and pins the pivot with
   svgOrigin '320 180' (the flame's base). Declaring a fill-box origin as
   well made the two disagree and dropped the flame through the ground. */
.p-flame{}
.fl{transform-box:fill-box;transform-origin:50% 100%}
.fl--a path{fill:#8E0F14}
.fl--b path{fill:var(--red-bright)}
.fl--c path{fill:#FFB020}
.fl--b{transform:scale(.68)}
.fl--c{transform:scale(.38)}
/* Flicker lives in CSS while GSAP drives the die-out on the parent group —
   animating the same property from both would fight for control. */
.fl--a{animation:pflick 1.1s ease-in-out infinite alternate}
.fl--b{animation:pflick 0.8s ease-in-out infinite alternate-reverse}
.fl--c{animation:pflick 0.6s ease-in-out infinite alternate}
@keyframes pflick{
  from{transform:scale(var(--s,1)) translateY(0)}
  to{transform:scale(calc(var(--s,1) * 1.06)) translateY(-3px)}
}
.fl--b{--s:.68}
.fl--c{--s:.38}

.p-smoke circle{fill:rgba(255,255,255,.28)}
.p-smoke{opacity:0}

/* discharge particles; the cone alone read as a solid wedge */
.p-dust circle{fill:#fff}
.p-dust{opacity:0}
/* pivot comes from svgOrigin '214 130' (the nozzle) in site.js */
.p-jet{opacity:0}

/* the one teaching beat, stated plainly */
.pstep{
  display:block;margin-top:14px;text-align:center;min-height:1.2em;
  font-family:var(--ff-mono);font-size:clamp(9px,1.1vw,11px);letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.62);opacity:0;
}

@media(max-width:640px){
  .pscene{width:88vw;transform:translate(-50%,-58%)}
}
/* A loading screen is the worst place to ignore a motion preference: it is
   unskippable and it is the first thing rendered. Show the scene as a still. */
@media(prefers-reduced-motion:reduce){
  .fl--a,.fl--b,.fl--c{animation:none}
  .p-fig,.p-ext,.pstep{opacity:1}
}

/* ── HERO ──────────────────────────────────────────────── */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;background:var(--navy-deep)}
.hs{position:absolute;inset:0;opacity:0;pointer-events:none}
.hs.active{opacity:1}
.hs__img{position:absolute;inset:0;background-size:cover;background-position:center;
  will-change:transform;transform:scale(1.14)}

.hero__scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(96deg, rgba(4,23,61,.93) 0%, rgba(4,23,61,.66) 46%, rgba(4,23,61,.34) 100%),
    linear-gradient(0deg, rgba(4,23,61,.75) 0%, rgba(4,23,61,0) 46%);
}
.grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  background-size:140px 140px;
}
.vig{position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 200px 46px rgba(0,0,0,.5)}

.mast{
  position:absolute;top:0;left:0;right:0;z-index:8;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:clamp(16px,2.4vw,26px) clamp(20px,4vw,52px);
}
.mast__logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.mast__logo img{height:clamp(34px,4vw,46px);width:auto}
.mast__right{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.mast__tag{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-2);
}
.mast__ph{
  font-family:var(--ff-mono);font-size:12.5px;color:#fff;text-decoration:none;
  border:1px solid rgba(255,255,255,.32);padding:9px 14px;transition:background .25s,border-color .25s;
}
.mast__ph:hover{background:var(--red-bright);border-color:var(--red-bright)}

.hero__content{position:relative;z-index:4;height:100%;display:flex;flex-direction:column;justify-content:center}
.hero__eyebrow-wrap{overflow:hidden;margin-bottom:20px}
.hero__title{
  font-family:var(--ff-hero);font-weight:900;text-transform:uppercase;color:#fff;margin:0;
  font-size:clamp(52px,10.5vw,132px);line-height:.86;letter-spacing:-.012em;
}
.hero__title .ln{display:block;overflow:hidden}
.chm{overflow:hidden;display:inline-block}
.ch{display:inline-block;will-change:transform}
.hero__title .accent{color:#FF5A4F}

.hero__sub-wrap{overflow:hidden;margin-top:24px}
.hero__sub{margin:0;max-width:44ch;font-size:16px;line-height:1.65;color:var(--on-dark-2);will-change:transform}

.hero__cta{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin-top:34px;
  padding:15px 26px;background:var(--red-bright);color:#fff;text-decoration:none;
  font-weight:600;font-size:14px;letter-spacing:.02em;
  transition:background .22s,transform .22s var(--ease);
}
.hero__cta:hover{background:#fff;color:var(--navy-deep);transform:translateX(4px)}

.hero__ticks{
  position:absolute;left:clamp(20px,4vw,52px);bottom:clamp(20px,3vw,34px);z-index:5;
  display:flex;gap:8px;
}
.hero__ticks span{width:34px;height:2px;background:rgba(255,255,255,.28)}
.hero__ticks span.on{background:var(--red-bright)}

/* ── TRUSTED BY / LOGO WALL ────────────────────────────── */
.trust{background:var(--paper);padding:clamp(64px,9vw,120px) 0}
.trust__head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
/* minmax(0,1fr) not 1fr: a bare 1fr resolves to minmax(auto,1fr), so each
   track inherits the logo image's intrinsic min-content width and the grid
   overflows its container, scrolling the whole page sideways. */
.trust__grid{
  margin-top:clamp(34px,4.4vw,56px);
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
/* An explicit height, not aspect-ratio: .lg is a grid item, so it stretches to
   its row, and the row is sized by content — the logo's intrinsic 209px. That
   silently beat the 5/3 ratio and rendered the wall ~40% taller than designed
   (and portrait-shaped on phones). A definite height also gives the percentage
   max-height on the image a containing block to resolve against. */
.lg{
  position:relative;height:clamp(94px,11.5vw,130px);padding:0;background:#fff;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  filter:grayscale(1);opacity:.62;transition:filter .35s,opacity .35s,transform .35s var(--ease);
}
/* Absolute inset, not percentage sizing. Percentage width/height/max-height on
   a centered grid item resolve against an indefinite grid area and get dropped
   entirely, so tall marks (TATA, Suzuki, IndianOil) rendered at their intrinsic
   aspect and spilled past the cell borders. An absolutely positioned box gets
   its containing block from the padding box, which has a definite size here, so
   width/height can be stated against it explicitly. Note the insets alone are
   NOT enough: an absolutely positioned *replaced* element with auto width takes
   its intrinsic size and ignores them, which is why the marks still spilled. */
.lg img{position:absolute;top:18px;left:22px;
  width:calc(100% - 44px);height:calc(100% - 36px);
  object-fit:contain;object-position:center}
.lg:hover{filter:grayscale(0);opacity:1;transform:translateY(-3px)}

/* ── STAT BAND ─────────────────────────────────────────── */
.stats{background:var(--navy-deep);color:#fff;padding:clamp(60px,8vw,104px) 0}
/* Six tracks, not three. With five stats a 3-column grid leaves the last cell
   empty — a visible hole with the red underline stopping short. Spanning the
   first three by 2 and the last two by 3 fills both rows exactly. */
.stats__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  border-top:1px solid rgba(255,255,255,.16);border-left:1px solid rgba(255,255,255,.16)}
.stats__grid > .st:nth-child(-n+3){grid-column:span 2}
.stats__grid > .st:nth-child(n+4){grid-column:span 3}
.st{
  padding:clamp(22px,3vw,36px) clamp(16px,2.2vw,30px);position:relative;overflow:hidden;
  border-right:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16);
}
.st::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--red-bright);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.st.lit::after{transform:scaleX(1)}
.st__num{display:flex;align-items:flex-end;font-family:var(--ff-hero);font-weight:900;
  font-size:clamp(38px,5.2vw,70px);line-height:.86;letter-spacing:-.02em}
.odo{display:inline-flex;align-items:flex-start;height:1em;overflow:hidden;line-height:1}
.odo__col{display:flex;flex-direction:column;flex:none;align-self:flex-start;will-change:transform}
.odo__col i{font-style:normal;height:1em;line-height:1;display:block;flex:none;font-variant-numeric:tabular-nums}
.st__suf{color:var(--red-bright);margin-left:.05em}
.st__lbl{margin-top:12px;font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-dark-2);line-height:1.6}

/* ── THE MOAT ──────────────────────────────────────────── */
.moat{background:var(--paper);padding:clamp(70px,10vw,140px) 0}
.moat__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.85fr);
  gap:clamp(28px,5vw,72px);align-items:center}
.moat__quote{
  font-family:var(--ff-hero);font-weight:900;text-transform:uppercase;
  font-size:clamp(30px,4.4vw,62px);line-height:.96;letter-spacing:-.01em;margin:20px 0 0;
}
.moat__quote em{font-style:normal;color:var(--red)}
.moat__portrait{position:relative}
.moat__portrait img{width:100%;height:auto;filter:grayscale(.25) contrast(1.04)}
.moat__portrait::after{
  content:"";position:absolute;inset:0;border:1px solid var(--line);
  transform:translate(14px,14px);z-index:-1;
}
.moat__name{margin-top:14px;font-family:var(--ff-hero);font-weight:900;text-transform:uppercase;font-size:20px}
.moat__role{font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;color:var(--ink-2);text-transform:uppercase;margin-top:4px}
.moat__facts{margin-top:clamp(26px,3.4vw,40px);display:grid;gap:0;border-top:1px solid var(--line)}
.moat__facts div{display:flex;justify-content:space-between;gap:20px;padding:13px 2px;
  border-bottom:1px solid var(--line);font-size:14px}
.moat__facts b{font-weight:500;color:var(--ink-2);font-family:var(--ff-mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase}

/* ── FIELD RECORD ──────────────────────────────────────── */
.field{background:var(--paper-2);padding:clamp(70px,10vw,130px) 0 0}
.field__grid{
  margin-top:clamp(34px,4.6vw,58px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
}
.fc{margin:0;position:relative;overflow:hidden;background:var(--navy-deep)}
.fc img{
  width:100%;height:clamp(300px,34vw,460px);object-fit:cover;display:block;
  transition:transform .9s var(--ease),opacity .5s;
}
.fc:hover img{transform:scale(1.05)}
.fc figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:18px 18px 16px;
  display:flex;flex-direction:column;gap:3px;color:#fff;
  background:linear-gradient(0deg,rgba(4,23,61,.92) 0%,rgba(4,23,61,0) 100%);
}
.fc figcaption b{font-family:var(--ff-hero);font-weight:900;text-transform:uppercase;
  font-size:18px;line-height:1;letter-spacing:.005em}
.fc figcaption span{font-family:var(--ff-mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}

/* ── CREDENTIALS ───────────────────────────────────────── */
.creds{background:var(--ink);color:#fff;overflow:hidden;padding:clamp(70px,10vw,130px) 0 0}
.creds .h-sec{color:#fff}
.creds__lede{color:var(--on-dark-2)}
.creds__vp{margin-top:clamp(34px,4.6vw,60px);padding-bottom:clamp(60px,8vw,110px)}
.creds__track{display:flex;gap:clamp(14px,1.8vw,26px);padding:0 clamp(20px,4vw,52px);will-change:transform}
.cred{flex:none;width:clamp(200px,20vw,290px)}
.cred__m{background:#fff;overflow:hidden;aspect-ratio:3/4}
.cred__m img{width:100%;height:100%;object-fit:cover;object-position:top center}
.cred__n{margin-top:10px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;color:var(--on-dark-2)}

/* ── DEPARTMENTS ───────────────────────────────────────── */
.dept{background:var(--paper);padding:clamp(70px,10vw,140px) 0}
/* The departments used to be a list on the left driving a sticky detail panel
   on the right. That was replaced by a stacked list carrying each description
   inline, but the panel markup and its styles stayed behind — with nothing
   left to populate it, it rendered as an empty navy rectangle beside the list.
   Panel and the .dbtn selector buttons that drove it are both gone. */
.dept__list{border-top:1px solid var(--line);
  list-style:none;margin:clamp(32px,4.4vw,56px) 0 0;padding:0}

/* ── TEAM ──────────────────────────────────────────────── */
.team{background:var(--paper-2);padding:clamp(70px,10vw,130px) 0}
.team__grid{margin-top:clamp(32px,4.4vw,54px);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.tm{padding:22px 4px;border-bottom:1px solid var(--line)}
.tm:nth-child(odd){padding-right:clamp(16px,3vw,44px)}
.tm:nth-child(even){padding-left:clamp(16px,3vw,44px);border-left:1px solid var(--line)}
.tm__n{font-family:var(--ff-hero);font-weight:900;text-transform:uppercase;font-size:21px;line-height:1}
.tm__r{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--red);margin-top:7px}
.tm__d{margin-top:9px;font-size:13.5px;line-height:1.65;color:var(--ink-2)}

/* ── CONTACT ───────────────────────────────────────────── */
.cta{background:var(--red);color:#fff;padding:clamp(70px,10vw,140px) 0}
.cta__t{font-family:var(--ff-hero);font-weight:900;text-transform:uppercase;
  font-size:clamp(40px,7.4vw,110px);line-height:.88;margin:18px 0 0;max-width:14ch}
.cta__split{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,64px);align-items:start;
  margin-top:clamp(36px,5vw,64px);padding-top:34px;border-top:1px solid rgba(255,255,255,.3);
}
.cta__details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,32px)}
.cta__details h4{margin:0 0 9px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.72);font-weight:400}
.cta__details a,.cta__details p{color:#fff;text-decoration:none;font-size:14.5px;line-height:1.6;
  margin:0 0 5px;display:block;word-break:break-word}
.cta__details a:hover{text-decoration:underline}

/* ── ENQUIRY FORM ──────────────────────────────────────── */
.enq{background:var(--paper);color:var(--ink);padding:clamp(24px,3vw,38px)}
.enq__t{font-family:var(--ff-hero);font-weight:900;text-transform:uppercase;
  font-size:clamp(22px,2.6vw,32px);line-height:1;margin:0}
.enq__note{margin:10px 0 22px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.enq__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fld{display:flex;flex-direction:column;margin-bottom:14px;min-width:0}
.fld label{font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:6px}
.fld label span{color:var(--red)}
.fld input,.fld select,.fld textarea{
  font-family:var(--ff-body);font-size:15px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:0;padding:11px 12px;width:100%;
  transition:border-color .2s,box-shadow .2s;
}
.fld textarea{resize:vertical;min-height:76px}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,54,140,.15);
}
.fld.bad input,.fld.bad select,.fld.bad textarea{border-color:var(--red)}
.fld.bad input:focus,.fld.bad select:focus{box-shadow:0 0 0 3px rgba(160,17,23,.16)}
.err{min-height:0;font-size:12px;color:var(--red);margin-top:5px;display:none}
.fld.bad .err{display:block}

/* honeypot lives in extras.css as .hp-trap — `.hp` collided with the hero planes */

.enq__send{
  margin-top:6px;width:100%;padding:15px 22px;border:0;cursor:pointer;
  background:var(--navy-deep);color:#fff;font-weight:600;font-size:15px;letter-spacing:.02em;
  transition:background .22s,opacity .22s;
}
.enq__send:hover{background:var(--red)}
.enq__send:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.enq__send[disabled]{opacity:.6;cursor:default}
.enq__status{margin:12px 0 0;font-size:13.5px;line-height:1.6;min-height:1.2em}
.enq__status.ok{color:#0B6B3A}
.enq__status.no{color:var(--red)}

/* ── FOOTER ────────────────────────────────────────────── */
.foot{background:var(--navy-deep);color:var(--on-dark-2);padding:clamp(34px,5vw,58px) 0}
.foot__row{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.foot__row b{color:#fff;font-weight:500}
.foot__row--links{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
.foot__row--links a{color:var(--on-dark-2);text-decoration:none}
.foot__row--links a:hover{color:#fff;text-decoration:underline}

.cta__wide{grid-column:1/-1}
.cta__wide a{display:block;margin-bottom:7px}

/* ── RESPONSIVE ────────────────────────────────────────── */
@media(max-width:1000px){
  .field__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stats__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats__grid > .st:nth-child(-n+3),
  .stats__grid > .st:nth-child(n+4){grid-column:auto}
  .moat__grid{grid-template-columns:1fr}
  .cta__split{grid-template-columns:1fr}
}
@media(max-width:640px){
  .field__grid{grid-template-columns:1fr}
  .trust__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats__grid{grid-template-columns:1fr}
  .team__grid{grid-template-columns:1fr}
  .tm:nth-child(even){padding-left:4px;border-left:0}
  .tm:nth-child(odd){padding-right:4px}
  .mast__tag{display:none}
  .enq__row{grid-template-columns:1fr;gap:0}
  .cta__details{grid-template-columns:1fr}
  .wafab span{display:none}
  .wafab{padding:15px;border-radius:50%}
}

@media(max-width:1050px){
  .nav__links{
    position:fixed;left:0;right:0;top:64px;flex-direction:column;justify-content:flex-start;
    gap:0;background:var(--navy-deep);border-bottom:1px solid rgba(255,255,255,.14);
    padding:8px 0 14px;transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .3s,transform .3s var(--ease);
  }
  .nav.open .nav__links{opacity:1;transform:translateY(0);pointer-events:auto}
  .nav__links a{display:block;padding:13px clamp(20px,4vw,52px);font-size:15px}
  .nav__burger{display:block}
  .nav__only-m{display:block}
  .nav__cta .nav__wa{display:none}
  /* Four controls on a 390px bar only fit if the two icon buttons drop their
     labels and the booking CTA uses its short one. Measured: 51+73+39+110+42
     plus gaps already overran the 335px of usable width before the brochure
     was added at all. */
  .nav__tel .nav__t{display:none}
    .nav__tel{padding:9px 11px}
  /* Full label is back: the short "Book" only existed to make room for the
     brochure button, and that has moved to the hero. Measured at 390px:
     45+65+39+110+42 plus gaps = ~331 of 375 usable. */
  .nav__book{padding:9px 13px}
  .nav__cta{gap:7px}
  .nav__in{gap:8px}
  #langBtn{padding:9px 10px;font-size:12.5px}
  .nav__logo img{height:30px}
  .nav__links{flex:none}
  .nav__in{justify-content:space-between}
}

.findus__grid{}
@media(max-width:900px){
  .findus__grid{grid-template-columns:1fr}
  .findus__map{min-height:260px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── VERIFY PAGE ───────────────────────────────────────── */
.vpage{background:var(--paper)}
.vtop{background:var(--navy-deep);padding:16px 0}
.vtop__in{display:flex;align-items:center;justify-content:space-between;gap:16px}
.vtop__logo img{height:40px;width:auto}
.vtop__back{color:#fff;text-decoration:none;font-size:13.5px}
.vtop__back:hover{text-decoration:underline}
.vmain{padding:clamp(48px,7vw,96px) 0 clamp(60px,9vw,110px);min-height:70vh}

.vform{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
  margin-top:clamp(26px,3.4vw,40px);max-width:620px}
.vform .fld{flex:1 1 320px;margin-bottom:0}
.vform__go{padding:12px 26px;border:0;cursor:pointer;background:var(--navy-deep);color:#fff;
  font-family:var(--ff-body);font-weight:600;font-size:15px;height:44px;
  transition:background .22s}
.vform__go:hover{background:var(--red)}
.vform__go:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.vform__go[disabled]{opacity:.6;cursor:default}

.vresult{display:none;margin-top:clamp(26px,3.4vw,40px);max-width:720px;
  border:1px solid var(--line);background:#fff;padding:clamp(20px,2.6vw,30px)}
.vresult.on{display:block}
.vresult__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line)}
.vresult__tag{font-family:var(--ff-hero);font-weight:900;text-transform:uppercase;font-size:22px;line-height:1}
.vresult.ok .vresult__tag{color:#0B6B3A}
.vresult.warn .vresult__tag{color:#9A6206}
.vresult.no .vresult__tag{color:var(--red)}
.vresult__num{font-family:var(--ff-mono);font-size:12.5px;color:var(--ink-2);letter-spacing:.06em}
.vresult__rows{display:grid;gap:0;margin-top:6px}
.vresult__rows div{display:flex;justify-content:space-between;gap:18px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:14.5px}
.vresult__rows b{font-weight:500;color:var(--ink-2);font-family:var(--ff-mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase}
.vresult__msg{margin:14px 0 0;font-size:14px;line-height:1.65;color:var(--ink-2)}
.vnote{margin-top:clamp(28px,3.6vw,44px);font-size:13.5px;color:var(--ink-2);max-width:60ch;line-height:1.7}
.vnote a{color:var(--red)}

/* ── LANGUAGE TOGGLE ───────────────────────────────────── */
.nav__lang{
  background:none;border:1px solid rgba(255,255,255,.34);color:#fff;cursor:pointer;
  font-family:var(--ff-body);font-size:13px;font-weight:600;padding:9px 13px;white-space:nowrap;
  transition:background .2s,border-color .2s,color .2s;
}
.nav__lang:hover{background:#fff;color:var(--navy-deep);border-color:#fff}
.nav__lang:focus-visible{outline:2px solid var(--red-bright);outline-offset:2px}
/* Gujarati sets a taller x-height than the condensed display face allows */
.lang-gu .h-sec{line-height:1.06;font-size:clamp(30px,4.6vw,60px)}
.lang-gu .cta__t{line-height:1.06;font-size:clamp(32px,5.4vw,74px)}
.lang-gu .moat__quote{line-height:1.18;font-size:clamp(24px,3.4vw,46px)}