/* ==========================================================================
   S-CUBUS Landing Pages
   Design language: "The Preparation Record"
   --------------------------------------------------------------------------
   The institute's whole argument in the content plan is system over shortcuts:
   concept, practice, test, review, repeat. So the pages are built to look like
   a well-kept academic record rather than a marketing brochure — ruled lines,
   indexed sections, tabular figures, generous margins, one confident accent.

   Consequences of that decision, on purpose:
     - Almost no boxed cards. Structure comes from hairline rules and indices,
       the way a syllabus or a mark sheet is organised.
     - Section rhythm alternates (ruled list -> offset split -> full bleed ->
       specimen row) so no two consecutive sections share a silhouette.
     - Figures are set large in tabular numerals, treated as typography.
     - Form inputs are underlines, not boxes. Less chrome, more paper.
     - Fraunces (a serif with an optical-size axis) carries authority in the
       headlines; Inter keeps the interface plain underneath it.

   CONTENTS
     01  Reset & base            08  Ruled list (indexed rows)
     02  Tokens                  09  Specimen row
     03  Cluster themes          10  Ledger / timeline
     04  Layout & rhythm         11  Editorial split
     05  Typographic furniture   12  Enquiry form
     06  Masthead & nav          13  FAQ
     07  Hero                    14  Closing band, footer, responsive
   ========================================================================== */


/* ==========================================================================
   01  RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(90px + env(safe-area-inset-top, 0px));
  overflow-x: clip;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16.5px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  overflow-x: clip;
  min-height: 100vh;
  min-height: 100dvh;
}
body.nav-open { overflow: hidden; }

h1, h2, h3, h4 {
  margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.08; letter-spacing: -0.015em;
  overflow-wrap: break-word; word-wrap: break-word;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

::selection { background: var(--accent); color: var(--ink); }
:is(.hero, .band--field, .pull) ::selection { background: var(--accent); color: #1a1020; }

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ink); color: var(--paper); padding: 12px 18px; font-weight: 700;
}
.skip:focus { left: 0; }

.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }


/* ==========================================================================
   02  TOKENS
   ========================================================================== */

:root {
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* Surfaces & ink — a paper stock, not a gradient */
  --paper:      #fbf9f6;
  --paper-2:    #f4efe9;
  --card:       #ffffff;
  --ink:        #16151a;
  --ink-2:      #4b4753;
  --ink-3:      #67626f;   /* darkened to clear 4.5:1 on --paper for meta text */
  --hair:       #ddd6cd;   /* hairline rules */
  --hair-soft:  #ebe5dd;

  /* BRAND CONSTANT — the S-CUBUS gold.
     Deliberately NOT themed. Every call to action, H1 highlight, accent spine
     and hover state across all fifteen pages resolves to this one colour, so
     the brand reads as one institute rather than fifteen microsites. Clusters
     differentiate through --field and --wash only. */
  --accent:     #F5AE3C;   /* buttons, H1 highlight, spines, hovers */
  --accent-ink: #78490A;   /* the same gold darkened to stay legible on paper */

  /* Cluster-specific, re-pointed by theme */
  --field:      #221a33;   /* full-bleed dark sections: hero, bands, closing */
  --field-2:    #170f26;
  --wash:       #f2edf7;   /* faint tint blocks */

  --maxw: 1200px;
  --gut: 28px;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --dock-h: 0px;
}

@media (max-width: 720px) { :root { --gut: 18px; } }
@media (max-width: 380px) { :root { --gut: 16px; } }


/* ==========================================================================
   03  CLUSTER THEMES
   Each landing page sets one on <body>. Only the field/accent/wash move, so
   the whole set still reads as one institute.
   ========================================================================== */

/* Themes set the DARK FIELD and the pale WASH only. The gold accent is a brand
   constant defined in :root and is never overridden here — that is what keeps
   every button, H1 highlight and hover state identical across all fifteen
   pages. Fields stay deep and saturated; muddy mid-tone darks read as cheap. */

/* JEE — indigo-violet ink */
[data-theme="jee"]          { --field:#1B1038; --field-2:#110921; --wash:#F2EFFC; }
[data-theme="jee-main"]     { --field:#141A4C; --field-2:#0C1030; --wash:#ECEFFC; }
[data-theme="jee-advanced"] { --field:#0E1030; --field-2:#07081D; --wash:#EAEDFB; }

/* NEET — deep emerald-pine */
[data-theme="neet"]         { --field:#04382F; --field-2:#02241E; --wash:#E8F5F0; }

/* Foundation & Olympiad — ocean blue, and plum */
[data-theme="foundation"]   { --field:#093350; --field-2:#04202F; --wash:#E8F2FB; }
[data-theme="olympiad"]     { --field:#310F3D; --field-2:#1E0726; --wash:#F5ECFA; }

/* Class series — cyan, to teal, to slate-navy: a palette that visibly matures */
[data-theme="class-8"]      { --field:#06394C; --field-2:#03222E; --wash:#E7F4F9; }
[data-theme="class-9"]      { --field:#0A3B3E; --field-2:#052527; --wash:#E8F4F4; }
[data-theme="class-10"]     { --field:#0F2E4A; --field-2:#081D30; --wash:#E9F1FA; }

/* Subjects — royal blue, plum-magenta, forest green */
[data-theme="physics"]      { --field:#0C2660; --field-2:#06153B; --wash:#E7EEFC; }
[data-theme="chemistry"]    { --field:#3D0B31; --field-2:#26051E; --wash:#FAE9F4; }
[data-theme="biology"]      { --field:#0A3620; --field-2:#052314; --wash:#E7F4EB; }

/* Learning modes — indigo, emerald-teal, and a plum hybrid */
[data-theme="online-jee"]   { --field:#141849; --field-2:#0B0E2C; --wash:#EBEEFC; }
[data-theme="online-neet"]  { --field:#04382E; --field-2:#02241D; --wash:#E7F5F1; }
[data-theme="hybrid"]       { --field:#20164A; --field-2:#140D2E; --wash:#F0ECFB; }


/* ==========================================================================
   04  LAYOUT & RHYTHM
   ========================================================================== */

.shell {
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding-left: max(var(--gut), var(--safe-l));
  padding-right: max(var(--gut), var(--safe-r));
}
.shell--tight { max-width: 860px; }

.band { padding: clamp(56px, 7vw, 104px) 0; position: relative; }
.band--tight { padding: clamp(40px, 4.5vw, 64px) 0; }
.band--paper2 { background: var(--paper-2); }
.band--wash { background: var(--wash); }
.band--field { background: var(--field); color: #fff; }
.band--field h2, .band--field h3 { color: #fff; }

/* Hairline that closes a band. Rules do the work boxes would otherwise do. */
.band + .band:not(.band--field):not(.band--paper2):not(.band--wash) { border-top: 1px solid var(--hair-soft); }

.rule { height: 1px; background: var(--hair); border: 0; margin: 0; }
.rule--ink { background: var(--ink); height: 2px; }
.rule--short { width: 58px; }


/* ==========================================================================
   05  TYPOGRAPHIC FURNITURE
   The small marks that make a page feel set rather than generated.
   ========================================================================== */

/* Bracketed, letterspaced section label: [ 02 ]  TESTING & ANALYSIS */
.label {
  display: flex; align-items: center; gap: 12px;
  font: 700 11px/1 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3);
}
.label::before {
  content: attr(data-index);
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
  border: 1px solid var(--hair);
  padding: 5px 8px; border-radius: 2px;
  letter-spacing: .08em;
}
.band--field .label { color: rgba(255,255,255,.62); }
.band--field .label::before { color: var(--accent); border-color: rgba(255,255,255,.24); }

/* Display headings */
.display  { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; }
.h-hero   { font-size: clamp(40px, 6.4vw, 82px); line-height: .98; }
.h-1      { font-size: clamp(30px, 4.1vw, 52px); line-height: 1.04; }
.h-2      { font-size: clamp(23px, 2.4vw, 31px); line-height: 1.14; }
.h-3      { font-size: clamp(19px, 1.5vw, 21px); line-height: 1.2; }

/* A headline where one clause is set in italic serif for emphasis. */
.display em { font-style: italic; font-weight: 500; }
.display .hi { color: var(--accent); font-style: italic; font-weight: 500; }

/* Standfirst paragraph under a headline. */
.stand { font-size: clamp(17px, 1.4vw, 19.5px); line-height: 1.6; color: var(--ink-2); max-width: 62ch; }

.prose { color: var(--ink-2); max-width: 64ch; }
.prose + .prose { margin-top: 16px; }
.small { font-size: 14px; color: var(--ink-3); }

/* ------------------------------------------------------------------------
   ON-DARK TEXT
   Every surface that paints a dark background is listed here once, so text
   colour can never be left at its dark default on top of it. Grouping the
   three dark surfaces in a single :is() is what stops this bug recurring
   when a new dark section is added later.
   ------------------------------------------------------------------------ */
:is(.hero, .band--field, .pull) :is(.stand, .prose) { color: rgba(255,255,255,.82); }
:is(.hero, .band--field, .pull) .small { color: rgba(255,255,255,.66); }
:is(.hero, .band--field, .pull) .aside-note { color: rgba(255,255,255,.7); }
:is(.hero, .band--field, .pull) :is(h1, h2, h3, h4) { color: #fff; }
:is(.hero, .band--field, .pull) .label { color: rgba(255,255,255,.66); }
:is(.hero, .band--field, .pull) .label::before { color: var(--accent); border-color: rgba(255,255,255,.26); }
:is(.hero, .band--field, .pull) .link { color: #fff; }
:is(.hero, .band--field, .pull) .link:hover { color: var(--accent); border-bottom-color: #fff; }
:is(.hero, .band--field, .pull) .arrowlink { color: #fff; }
/* Anything nested inside a light card that sits on a dark band keeps ink text. */
:is(.hero, .band--field) .enq :is(.stand, .prose, h1, h2, h3, h4) { color: var(--ink); }
:is(.hero, .band--field) .enq .small { color: var(--ink-3); }

/* Inline link with an offset underline — a considered detail, not default. */
.link {
  font-weight: 600; color: var(--ink);
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: 1px;
  transition: border-color .18s, color .18s;
}
.link:hover { color: var(--accent-ink); border-bottom-color: var(--ink); }
.band--field .link { color: #fff; }
.band--field .link:hover { color: var(--accent); border-bottom-color: #fff; }

/* Arrow link */
.arrowlink { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.arrowlink span { border-bottom: 1.5px solid var(--accent); padding-bottom: 1px; }
.arrowlink svg { width: 14px; height: 14px; flex: none; transition: transform .2s; }
.arrowlink:hover svg { transform: translateX(4px); }

/* Buttons — squared, typographic, minimal chrome. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 22px; border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper);
  font: 700 14.5px/1 var(--sans); letter-spacing: .01em; cursor: pointer;
  border-radius: 2px; transition: background .18s, color .18s, border-color .18s;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 28%, transparent);
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { background: transparent; color: var(--ink); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: #241503; }
.btn--accent:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-ink); border-color: var(--accent); }
.btn--quiet { background: transparent; color: var(--ink); }
.btn--quiet:hover { background: var(--ink); color: var(--paper); }
.btn--onfield { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.btn--onfield:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--full { width: 100%; }
.btn--sm { padding: 10px 15px; font-size: 13px; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ------------------------------------------------------------------------
   SEQUENCE LIST + PULL PANEL
   The pull is the dark aside that sits beside the methodology text. It
   contains a quote, a byline/label, and 4 sequence cards.

   Redesigned to feel premium: layered gradient background, decorative ring
   elements, frosted quote block, elegant diamond divider, and a 2×2 grid
   of glassmorphic seq cards with accent-numbered badges.
   ------------------------------------------------------------------------ */
.seq {
  position: relative; display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff;
  min-height: var(--seq-row, 52px);
  padding: 14px 18px 14px 18px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
.seq:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  background: rgba(255,255,255,.16);
  border-color: var(--accent);
}

/* Numbered badge — accent circle with the index numeral */
.seq__n {
  flex: none;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent);
  color: #241503;
  border-radius: 50%;
  font: 700 13px/1 var(--serif); font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
}
.seq__t {
  font: 600 14.5px/1.3 var(--sans); letter-spacing: .015em; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

/* Marginal note, set small and italic in the serif. */
.aside-note { font-family: var(--serif); font-style: italic; font-size: 15.5px; color: var(--ink-3); }


/* ==========================================================================
   06  MASTHEAD & NAV
   ========================================================================== */

.strap {
  background: var(--ink); color: rgba(255,255,255,.8);
  font: 500 12.5px/1 var(--sans);
  padding: 10px 0;
  padding-top: max(10px, var(--safe-t));
}
.strap__in { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.strap__devanagari { font-size: 13px; letter-spacing: .04em; }
.strap__right { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.strap a { color: #fff; font-weight: 700; }
.strap a:hover { color: var(--accent); }

.mast { background: var(--paper); border-bottom: 1px solid var(--hair); position: sticky; top: 0; z-index: 30; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.mast__in { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 78px; }

.logo { display: flex; align-items: center; gap: 11px; }
.logo__mark { width: 40px; height: 40px; flex: none; }
.logo__name { font: 600 21px/1 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.logo__name small { display: block; font: 700 8.5px/1 var(--sans); letter-spacing: .22em; color: var(--ink-3); margin-top: 5px; }

.mast__nav { display: flex; align-items: center; gap: 30px; }
.mast__nav a { font: 600 14px/1 var(--sans); color: var(--ink-2); padding: 4px 0; border-bottom: 1.5px solid transparent; transition: color .18s, border-bottom-color .18s; }
.mast__nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.mast__nav a.is-active { color: var(--ink); border-bottom-color: var(--accent); }

.mast__cta { display: flex; align-items: center; gap: 10px; }

.burger {
  display: none; background: none; border: 1px solid var(--hair); border-radius: 2px;
  padding: 0; cursor: pointer; color: var(--ink);
  width: 44px; height: 44px; align-items: center; justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 28%, transparent);
}
.drawer { display: none; border-top: 1px solid var(--hair); background: var(--paper); }
.drawer.is-open { display: block; }
.drawer a {
  display: flex; align-items: center; min-height: 48px;
  padding: 12px 0; font-weight: 600; border-bottom: 1px solid var(--hair-soft);
  -webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

/* Breadcrumbs, required by the content plan. Set as a fine rule of text. */
.crumbs { font: 500 12.5px/1 var(--sans); letter-spacing: .02em; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.crumbs li { display: flex; align-items: center; gap: 9px; }
.crumbs li + li::before { content: "/"; opacity: .45; }
.crumbs a { color: rgba(255,255,255,.78); }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current="page"] { color: #fff; font-weight: 700; }


/* ==========================================================================
   07  HERO
   Asymmetric by design: the headline sits on a wide measure, the form card
   overlaps the boundary into the next band so the fold is not a clean seam.
   ========================================================================== */

.hero { background: var(--field); color: #fff; position: relative; overflow: hidden; }
.hero__in { position: relative; z-index: 2; padding: 26px 0 clamp(56px, 7vw, 96px); }

.hero__glow {
  position: absolute; z-index: 1; pointer-events: none;
  width: 640px; height: 640px; right: -140px; top: -240px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%);
}

/* ------------------------------------------------------------------------
   BANNER FAMILIES
   One artwork treatment per cluster, so the three JEE pages recognise each
   other, the Foundation pages recognise each other, and so on. The rest of
   the page architecture stays identical across all fifteen.
   .hero__art is a decorative layer only and is aria-hidden in the markup.
   ------------------------------------------------------------------------ */

.hero__art { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero__art::before, .hero__art::after { content: ""; position: absolute; }

/* — JEE: engineering paper. Squared blueprint grid fading from the corner. */
.hero--jee .hero__art::before {
  inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 78% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(120% 90% at 78% 0%, #000 0%, transparent 72%);
}
.hero--jee .hero__art::after {
  right: 6%; top: 14%; width: 260px; height: 260px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 40px rgba(255,255,255,.035);
}

/* — NEET: clinical but organic. Wide concentric arcs, like a pulse trace. */
.hero--neet .hero__art::before {
  right: -260px; top: 50%; width: 780px; height: 780px; transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 0 0 60px rgba(255,255,255,.035), 0 0 0 120px rgba(255,255,255,.025), 0 0 0 180px rgba(255,255,255,.015);
}
.hero--neet .hero__art::after {
  left: -90px; bottom: -140px; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle at 60% 40%, rgba(255,255,255,.09), transparent 66%);
}

/* — FOUNDATION: growth. Rising columns off the baseline, dotted ground line. */
.hero--found .hero__art::before {
  left: 0; bottom: 0; width: 62%; height: 320px;
  background: repeating-linear-gradient(90deg,
      rgba(255,255,255,.085) 0 30px, transparent 30px 74px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 88%);
          mask-image: linear-gradient(to top, #000 0%, transparent 88%);
}
.hero--found .hero__art::after {
  left: 0; right: 0; bottom: 0; height: 1px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 6px, transparent 6px 14px);
}

/* — OLYMPIAD: distinction. Radiating spokes behind a struck medal ring. */
.hero--olympiad .hero__art::before {
  right: 4%; top: 50%; width: 520px; height: 520px; transform: translateY(-50%);
  background: repeating-conic-gradient(from 0deg,
      rgba(255,255,255,.075) 0deg 3deg, transparent 3deg 15deg);
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
          mask-image: radial-gradient(circle, #000 30%, transparent 70%);
}
.hero--olympiad .hero__art::after {
  right: calc(4% + 150px); top: 50%; width: 220px; height: 220px; transform: translateY(-50%);
  border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: inset 0 0 0 12px rgba(255,255,255,.05);
}

/* — SUBJECT: a plotted measurement. Axis rules with a dot field above. */
.hero--subject .hero__art::before {
  inset: 0; opacity: .34;
  background-image: radial-gradient(rgba(255,255,255,.5) 1.3px, transparent 1.3px);
  background-size: 30px 30px;
  -webkit-mask-image: linear-gradient(205deg, #000 0%, transparent 58%);
          mask-image: linear-gradient(205deg, #000 0%, transparent 58%);
}
.hero--subject .hero__art::after {
  left: 8%; bottom: 0; width: 46%; height: 62%;
  border-left: 1px solid rgba(255,255,255,.22);
  border-bottom: 1px solid rgba(255,255,255,.22);
}

/* — LEARNING MODE: transmission. Horizontal dashed streams. */
.hero--mode .hero__art::before {
  inset: 0; opacity: .6;
  background-image: repeating-linear-gradient(0deg,
      transparent 0 46px,
      rgba(255,255,255,.09) 46px 47px);
  -webkit-mask-image: linear-gradient(100deg, transparent 26%, #000 100%);
          mask-image: linear-gradient(100deg, transparent 26%, #000 100%);
}
.hero--mode .hero__art::after {
  right: -120px; top: -120px; width: 520px; height: 520px; border-radius: 50%;
  background: conic-gradient(from 210deg, color-mix(in srgb, var(--accent) 20%, transparent), transparent 45%);
}

@media (max-width: 720px) {
  .hero--olympiad .hero__art::after,
  .hero--jee .hero__art::after { display: none; }
  .hero--subject .hero__art::after { width: 70%; }
}

.hero__cols { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: end; margin-top: 40px; }
.hero__cols > * { min-width: 0; }

.hero h1 { color: #fff; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.72); margin-bottom: 22px;
}
.hero__eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--accent); }
.hero__stand { margin-top: 22px; }
.hero__actions { margin-top: 30px; }
.hero__foot { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16); font-size: 13.5px; color: rgba(255,255,255,.7); }


/* ==========================================================================
   08  FIGURES  (the statistics, treated as typography)
   ========================================================================== */

.figures { display: grid; grid-template-columns: repeat(4, 1fr); }
.figures__cell { padding: 30px 26px 30px 0; border-right: 1px solid var(--hair); }
.figures__cell:last-child { border-right: 0; }
.figures__n {
  display: block; font: 600 clamp(34px, 4vw, 48px)/1 var(--serif);
  letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.figures__k { display: block; margin-top: 8px; font: 600 12px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }


/* ==========================================================================
   09  RULED LIST  (replaces the generic card grid)
   Indexed rows separated by hairlines, like a syllabus.
   ========================================================================== */

.ruled { border-top: 1px solid var(--ink); }
.ruled__row {
  display: grid; grid-template-columns: 76px minmax(0, 300px) 1fr;
  gap: clamp(16px, 3vw, 44px); align-items: start;
  padding: 30px 0; border-bottom: 1px solid var(--hair);
}
.ruled__row:hover { background: linear-gradient(90deg, var(--wash), transparent 70%); }
.ruled__n { font: 600 15px/1 var(--serif); color: var(--accent-ink); padding-top: 4px; font-variant-numeric: tabular-nums; }
.ruled__row h3 { font-size: clamp(19px, 1.7vw, 23px); }
.ruled__row p { color: var(--ink-2); font-size: 15.5px; }
.band--field .ruled { border-top-color: rgba(255,255,255,.5); }
.band--field .ruled__row { border-bottom-color: rgba(255,255,255,.16); }
.band--field .ruled__row:hover { background: rgba(255,255,255,.04); }
.band--field .ruled__n { color: var(--accent); }
.band--field .ruled__row p { color: rgba(255,255,255,.74); }


/* ==========================================================================
   10  SPECIMEN ROW  (the three-subject / three-branch row)
   Elevated cards with an accent top-edge and a large ghosted index.
   Each card lifts on hover, so the row feels interactive and alive.
   ========================================================================== */

.specimen {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
  /* Remove the old border-top; cards now own their own boundaries. */
  border-top: 0;
}

.specimen__col {
  position: relative; overflow: hidden;
  background: var(--card);
  border: 1px solid var(--hair);
  border-top: 3px solid var(--accent);
  border-radius: 3px;
  padding: 36px 30px 32px;
  box-shadow: 0 2px 12px rgba(20,12,35,.06);
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.specimen__col:last-child { border-right: 1px solid var(--hair); padding-right: 30px; }
.specimen__col:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(20,12,35,.13);
  border-top-color: var(--accent);
}

/* Big ghosted numeral — now positioned as a decorative background element. */
.specimen__ghost {
  position: absolute; right: 16px; top: -8px;
  font: 600 110px/1 var(--serif); color: var(--ink);
  opacity: .055; letter-spacing: -.04em;
  pointer-events: none; user-select: none;
  margin-bottom: 0;
  transition: opacity .26s ease;
}
.specimen__col:hover .specimen__ghost { opacity: .10; }

.specimen__mark {
  position: relative; z-index: 1;
  font: 600 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-ink);
  display: inline-flex; align-items: center; gap: 10px;
}
.specimen__mark::after {
  content: ""; display: block; width: 28px; height: 1.5px;
  background: var(--accent); opacity: .6;
}

.specimen__col h3 {
  position: relative; z-index: 1;
  margin: 16px 0 14px; font-size: clamp(22px, 2vw, 27px);
}

.specimen__col p {
  position: relative; z-index: 1;
  color: var(--ink-2); font-size: 15.5px;
  margin-bottom: 24px;
}

.specimen__col .arrowlink {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14px; color: var(--accent-ink);
  padding: 8px 14px 8px 0;
  border-bottom: 1.5px solid var(--accent);
  transition: color .18s, gap .18s;
}
.specimen__col .arrowlink:hover { color: var(--ink); gap: 12px; }
.specimen__col .arrowlink span { border-bottom: 0; padding-bottom: 0; }


/* ==========================================================================
   11  LEDGER  (process / timeline / pathway — one horizontal ruled run)
   ========================================================================== */

.ledger { position: relative; padding-top: 34px; }
.ledger::before { content: ""; position: absolute; left: 0; right: 0; top: 33px; height: 1px; background: var(--hair); }
.band--field .ledger::before { background: rgba(255,255,255,.22); }
.ledger__run { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2.4vw, 32px); }
.ledger__stop { position: relative; padding-top: 30px; }
.ledger__stop::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--accent); transform: translateY(-4px);
}
.ledger__stop:first-child::before {
  animation: ledgerPulse 2s ease-in-out infinite;
}
@keyframes ledgerPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
  50% { box-shadow: 0 0 0 6px transparent; }
}
.ledger__stop--muted::before { background: var(--hair); }
.band--field .ledger__stop--muted::before { background: rgba(255,255,255,.3); }
.ledger__tick { font: 700 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.band--field .ledger__tick { color: rgba(255,255,255,.6); }
.ledger__stop h3 { margin: 12px 0 8px; font-size: 20px; }
.ledger__stop p { font-size: 14.5px; color: var(--ink-2); }
.band--field .ledger__stop p { color: rgba(255,255,255,.72); }

/* Three-stop variant used for the class pathway. */
.ledger--three .ledger__run { grid-template-columns: repeat(3, 1fr); }
.ledger__stop--now .ledger__tick { color: var(--accent-ink); }
.band--field .ledger__stop--now .ledger__tick { color: var(--accent); }
.ledger__stop--now h3 { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }


/* ==========================================================================
   12  EDITORIAL SPLIT & PULL PANEL
   ========================================================================== */

.duo { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(34px, 5vw, 76px); align-items: center; }
.duo--top { align-items: start; }
.duo--flip > :first-child { order: 2; }

/* Checklist with a rule above each item — reads like a marked-off list. */
.marks { margin-top: 26px; border-top: 1px solid var(--hair); }
.marks li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--hair); font-size: 15.5px; }
.marks svg { width: 16px; height: 16px; margin-top: 4px; color: var(--accent-ink); }
.band--field .marks { border-top-color: rgba(255,255,255,.24); }
.band--field .marks li { border-bottom-color: rgba(255,255,255,.14); color: rgba(255,255,255,.86); }
.band--field .marks svg { color: var(--accent); }

/* Pull panel — the dark methodology aside */
.pull {
  --seq-row: 52px;

  background: var(--field);
  background-image: linear-gradient(160deg, var(--field) 0%, color-mix(in srgb, var(--field) 85%, var(--accent)) 100%);
  color: #fff;
  padding: clamp(32px, 4vw, 52px);
  border-radius: 4px;
  position: relative; overflow: hidden;
  display: grid; align-content: start;
}

/* Decorative rings — two concentric circles for depth */
.pull::before,
.pull::after {
  content: ""; position: absolute; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.1);
  pointer-events: none;
}
.pull::before { right: -70px; bottom: -70px; width: 220px; height: 220px; }
.pull::after  { right: -30px; bottom: -30px; width: 140px; height: 140px; border-color: rgba(255,255,255,.06); }

/* Large decorative opening quotation mark */
.pull__q {
  position: relative; z-index: 1;
  font: 500 clamp(21px, 2.3vw, 31px)/1.28 var(--serif);
  font-style: italic; letter-spacing: -.02em;
  padding-left: 6px;
}
.pull__q::before {
  content: "\201C";
  position: absolute; left: -8px; top: -28px;
  font: 700 80px/1 var(--serif); font-style: normal;
  color: var(--accent); opacity: .25;
  pointer-events: none;
}

/* Diamond divider between quote and cards */
.pull__by {
  position: relative; z-index: 1;
  margin-top: 22px; padding-top: 20px;
  font: 700 11.5px/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.66);
  display: flex; align-items: center; gap: 14px;
}
.pull__by::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--accent);
  transform: rotate(45deg);
  flex: none;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 40%, transparent);
}
.pull__by::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.25), transparent);
}

/* 2×2 grid for seq cards */
.pull__seq {
  position: relative; z-index: 1;
  margin-top: 22px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}

/* Staggered reveal for seq cards inside pull */
.pull__seq .seq:nth-child(1) { transition-delay: 0s; }
.pull__seq .seq:nth-child(2) { transition-delay: .06s; }
.pull__seq .seq:nth-child(3) { transition-delay: .12s; }
.pull__seq .seq:nth-child(4) { transition-delay: .18s; }

/* Columned notes separated by hairlines (audience / who-can-join). */
.notes { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.notes__col { padding: 26px 24px 26px 0; border-right: 1px solid var(--hair); }
.notes__col:last-child { border-right: 0; }
.notes__col h3 { font-size: 19px; margin-bottom: 8px; }
.notes__col p { font-size: 14.5px; color: var(--ink-2); }

/* Two-column comparison, hairline separated. */
.against { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--ink); }
.against__col { padding: 30px 32px 30px 0; border-right: 1px solid var(--hair); }
.against__col:last-child { border-right: 0; padding-right: 0; padding-left: 32px; }
.against__col--weak { color: var(--ink-3); }
.against__col h3 { font-size: 21px; margin-bottom: 6px; }
.against__col li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hair-soft); font-size: 15px; }
.against__col li:last-child { border-bottom: 0; }
.against__col svg { width: 15px; height: 15px; margin-top: 4px; }

/* Weighted bars for subject balance. */
.weights { border-top: 1px solid var(--ink); }
.weights__row { display: grid; grid-template-columns: 210px 1fr; gap: 26px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--hair); }
.weights__name { font: 600 19px/1.2 var(--serif); }
.weights__name small { display: block; font: 500 13px/1.4 var(--sans); color: var(--ink-3); margin-top: 5px; }
.weights__bar { height: 8px; background: var(--hair-soft); position: relative; }
.weights__bar span { position: absolute; inset: 0 auto 0 0; background: var(--accent); }

/* Stacked revision passes. */
.passes { border-top: 1px solid var(--ink); }
.passes__row { display: grid; grid-template-columns: 130px 1fr; gap: 26px; padding: 22px 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.passes__tag { font: 700 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); }
.passes__row h3 { font-size: 19px; margin-bottom: 6px; }
.passes__row p { font-size: 15px; color: var(--ink-2); }

/* Schedule columns for the online pages. */
.sched { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
.sched__col { border-right: 1px solid var(--hair); padding: 26px 22px 26px 0; }
.sched__col:last-child { border-right: 0; }
.sched__day { font: 700 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-ink); }
.sched__col h3 { font-size: 19px; margin: 12px 0 14px; }
.sched__col li { font-size: 14.5px; color: var(--ink-2); padding: 9px 0; border-top: 1px solid var(--hair-soft); }


/* ==========================================================================
   13  ENQUIRY FORM
   The content plan requires one above the fold and one near the bottom.
   They are deliberately different objects: a full card up top, a single-line
   bar at the end, so the page never repeats itself.
   Inputs are underlines rather than boxes — much less chrome on paper.
   ========================================================================== */

.enq {
  background: var(--card); color: var(--ink);
  border: 1px solid var(--hair); border-top: 3px solid var(--accent);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: 0 30px 70px rgba(20,12,35,.28);
}
/* Overlap the hero boundary so the fold is not a clean seam. */
.enq--overlap { margin-bottom: clamp(-96px, -7vw, -56px); }
.enq__title { font-size: 24px; }
.enq__sub { margin-top: 7px; font-size: 14px; color: var(--ink-3); }

.form { position: relative; margin-top: 24px; }
.form__rows { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; }
.f { display: grid; gap: 6px; }
.f--wide { grid-column: 1 / -1; }
.f label { font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.f input, .f select, .f textarea {
  font: 500 16px/1.5 var(--sans); color: var(--ink);
  padding: 10px 2px; border: 0; border-bottom: 1.5px solid var(--hair);
  background: transparent; width: 100%; border-radius: 0;
  min-height: 44px;
}
.f input::placeholder, .f textarea::placeholder { color: var(--ink-3); opacity: .7; }
.f input:hover, .f select:hover, .f textarea:hover { border-bottom-color: var(--ink-3); }
.f input:focus, .f select:focus, .f textarea:focus { outline: 0; border-bottom-color: var(--accent); }
.f textarea { resize: vertical; min-height: 72px; }
.f select {
  cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2367626f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center; background-size: 12px;
}

.form__end { margin-top: 26px; display: grid; gap: 12px; }
.form__legal { font-size: 12px; color: var(--ink-3); }
.form__status { font: 600 13.5px/1.5 var(--sans); color: var(--accent-ink); }
.form__status[data-state="error"] { color: #a8271b; }
.trap { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

/* The slim closing bar — one row, not a second card. */
.enqbar {
  border-top: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22);
  padding: 26px 0; margin-top: 40px;
}
.enqbar .form { margin-top: 0; }
.enqbar__rows { display: grid; grid-template-columns: 1.1fr 1fr .9fr auto; gap: 22px; align-items: end; }
.enqbar .f label { color: rgba(255,255,255,.6); }
.enqbar .f input, .enqbar .f select { color: #fff; border-bottom-color: rgba(255,255,255,.34); }
.enqbar .f input::placeholder { color: rgba(255,255,255,.45); }
.enqbar .f input:hover, .enqbar .f select:hover { border-bottom-color: rgba(255,255,255,.7); }
.enqbar .f input:focus, .enqbar .f select:focus { border-bottom-color: var(--accent); }
.enqbar .f select option { color: var(--ink); }
.enqbar .f select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.6)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.enqbar .form__status { color: var(--accent); margin-top: 14px; }
.enqbar .form__legal { color: rgba(255,255,255,.55); margin-top: 12px; }


/* ==========================================================================
   14  FAQ
   ========================================================================== */

.qa { border-top: 1px solid var(--ink); }
.qa__item { border-bottom: 1px solid var(--hair); }
.qa__q {
  list-style: none; cursor: pointer; position: relative;
  padding: 24px 52px 24px 0;
  font: 600 clamp(17px, 1.5vw, 20px)/1.35 var(--serif); letter-spacing: -.01em; color: var(--ink);
  transition: background .18s, color .18s;
}
.qa__q:hover { background: var(--wash); }
.qa__q::-webkit-details-marker { display: none; }
.qa__q::after,
.qa__q::before {
  content: ""; position: absolute; right: 6px; top: 50%; background: var(--ink);
  transition: transform .22s ease, opacity .22s ease;
}
.qa__q::before { width: 17px; height: 1.5px; margin-top: -.75px; }
.qa__q::after  { width: 1.5px; height: 17px; right: 13.75px; margin-top: -8.5px; }
.qa__item[open] .qa__q::after { transform: rotate(90deg); opacity: 0; }
.qa__item[open] .qa__q { color: var(--accent-ink); }
.qa__a { padding: 0 15% 26px 0; font-size: 15.5px; color: var(--ink-2); }


/* ==========================================================================
   15  CLOSING BAND, FOOTER, RESPONSIVE
   ========================================================================== */

.close__top { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(30px, 5vw, 70px); align-items: end; }

.foot { background: var(--ink); color: rgba(255,255,255,.7); padding: 64px 0 0; }
.foot__cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 38px; }
.foot h3 { font: 700 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 18px; }
.foot li { padding: 5px 0; font-size: 14.5px; }
.foot a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.foot p { font-size: 14.5px; }
.foot .logo__name { color: #fff; }
.foot .logo__name small { color: rgba(255,255,255,.45); }
.foot__end {
  margin-top: 52px; border-top: 1px solid rgba(255,255,255,.14); padding: 20px 0;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px;
}

.implnote { display: none; background: var(--paper-2); border-top: 1px solid var(--hair); padding: 18px 0; }
.implnote p { font-size: 11.5px; color: var(--ink-3); letter-spacing: .01em; }
.implnote b { color: var(--ink-2); }

@media (max-width: 1040px) {
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .figures, .sched, .ledger__run { grid-template-columns: repeat(2, 1fr); }
  .figures__cell:nth-child(2) { border-right: 0; }
  .figures__cell:nth-child(-n+2) { border-bottom: 1px solid var(--hair); }
  .ledger::before { display: none; }
  .enqbar__rows { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .mast__nav { display: none; }
  .burger { display: inline-flex; }
  .drawer.is-open {
    max-height: min(70dvh, 520px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .mast__in { min-height: 64px; gap: 12px; }
  .mast__cta .btn--quiet { display: none; }
  .hero__cols, .duo, .close__top { grid-template-columns: 1fr; }
  .duo--flip > :first-child { order: 0; }
  .enq--overlap { margin-bottom: 0; }
  .specimen, .notes, .against, .weights__row, .passes__row { grid-template-columns: 1fr; }
  .specimen__col { border-right: 1px solid var(--hair); padding: 28px 22px 26px; }
  .specimen__col:last-child { padding-left: 22px; }
  .notes__col, .against__col { border-right: 0; border-bottom: 1px solid var(--hair); padding-right: 0; }
  .notes__col:last-child, .against__col:last-child { border-bottom: 0; padding-left: 0; }
  .ruled__row { grid-template-columns: 46px 1fr; }
  .ruled__row p { grid-column: 2; }
  .qa__a { padding-right: 0; }
  .qa__q { padding: 20px 48px 20px 0; min-height: 52px; }
  .weights__row { gap: 12px; }
  .passes__row { gap: 8px; }
  .pull { padding: 28px 22px; }
  .hero__in { padding-bottom: 40px; }
  .band { padding: clamp(40px, 8vw, 72px) 0; }
}

@media (max-width: 720px) {
  html { scroll-padding-top: calc(72px + var(--safe-t) + var(--dock-h)); }
  .h-hero { font-size: clamp(32px, 9.2vw, 52px); line-height: 1.04; }
  .hero__eyebrow { letter-spacing: .12em; font-size: 10.5px; }
  .hero__foot { font-size: 13px; }
  .crumbs { font-size: 12px; }
  .strap__in { gap: 10px; flex-wrap: wrap; }
  .strap__right span:first-child { display: none; }
  .strap__devanagari { font-size: 12px; letter-spacing: .02em; }
  .logo__mark { width: 34px; height: 34px; }
  .logo__name { font-size: 18px; }
  .form__rows, .enqbar__rows { grid-template-columns: 1fr; }
  .actions { gap: 8px; }
  .actions .btn { width: 100%; }
  .close__top .actions { width: 100%; }
  .sched__col { padding-right: 0; }
  .seq__t { white-space: normal; }
  .enq { padding: 22px 18px; }
  .figures__cell { padding: 22px 16px 22px 0; }
  .foot { padding: 48px 0 0; }
  .foot__end { padding-bottom: calc(16px + var(--safe-b)); }
}

/* Phones keep a 2×2 figure/ledger grid — denser and more “app-like” than a single stack. */
@media (max-width: 620px) {
  .figures, .sched, .ledger__run { grid-template-columns: 1fr 1fr; }
  .ledger--three .ledger__run { grid-template-columns: 1fr; }
  .figures__cell { border-right: 1px solid var(--hair); padding: 18px 12px 18px 0; }
  .figures__cell:nth-child(even) { border-right: 0; padding-right: 0; }
  .figures__cell:nth-child(-n+2) { border-bottom: 1px solid var(--hair); }
  .figures__cell:nth-child(n+3) { border-bottom: 0; }
  .figures__n { font-size: clamp(28px, 8vw, 36px); }
  .pull__seq { grid-template-columns: 1fr 1fr; }
  .foot__cols { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 380px) {
  .h-hero { font-size: 30px; }
  .pull__seq { grid-template-columns: 1fr; }
  .mast__cta .btn--sm { padding: 10px 12px; }
  .dock a { font-size: 11px; letter-spacing: .02em; gap: 4px; }
}

/* Landscape phones (Android Chrome URL bar eats vertical space). */
@media (max-height: 480px) and (orientation: landscape) {
  .hero__in { padding-top: 12px; padding-bottom: 24px; }
  .hero__art, .hero__glow { opacity: .35; }
  .mast__in { min-height: 52px; }
  .h-hero { font-size: clamp(28px, 6vh, 40px); }
}

/* ==========================================================================
   16  SCROLL REVEAL & MICRO-ANIMATIONS
   ========================================================================== */

.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.is-visible {
  opacity: 1; transform: translateY(0);
}
/* Staggered delay for sequential children (ruled rows, specimen cols, etc) */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: .08s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: .16s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: .24s; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: .32s; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: .40s; }

/* Back to top */
.btt {
  position: fixed; right: max(16px, var(--safe-r)); bottom: max(16px, var(--safe-b)); z-index: 40;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ink); color: var(--paper); border: 1.5px solid var(--hair);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.18);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .28s, transform .28s, background .18s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btt.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.btt:hover { background: var(--accent); color: #241503; border-color: var(--accent); }
.btt svg { width: 18px; height: 18px; }

/* ==========================================================================
   17  ANDROID / TOUCH CHROME
   Gesture-nav inset, no sticky :hover, 16px fields (already), and a dock
   so Call / WhatsApp / Enquire stay in thumb reach.
   ========================================================================== */

.dock {
  display: none;
}
@media (max-width: 720px) {
  :root { --dock-h: 64px; }
  body.has-dock { padding-bottom: calc(var(--dock-h) + var(--safe-b)); }
  .dock {
    display: grid;
    grid-template-columns: 1fr 1fr 1.15fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    gap: 8px;
    padding: 8px max(12px, var(--safe-r)) calc(8px + var(--safe-b)) max(12px, var(--safe-l));
    background: #111014;
    background: color-mix(in srgb, var(--field) 88%, #000);
    border-top: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 -12px 40px rgba(0,0,0,.28);
  }
  .dock a {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 48px; border-radius: 8px;
    font: 700 12.5px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase;
    color: #fff;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .dock a:active { transform: scale(.98); }
  .dock__call, .dock__wa {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
  }
  .dock__enq {
    background: var(--accent); color: #241503;
    border: 1px solid var(--accent);
  }
  .dock svg { width: 16px; height: 16px; flex: none; }
  body.has-dock .btt { bottom: calc(var(--dock-h) + var(--safe-b) + 12px); }
}

@media (hover: none) {
  .btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .btn:active { background: transparent; color: var(--ink); }
  .seq:hover {
    transform: none;
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.14);
  }
  .seq:active {
    background: rgba(255,255,255,.16);
    border-color: var(--accent);
  }
  .specimen__col:hover {
    transform: none;
    box-shadow: 0 2px 12px rgba(20,12,35,.06);
  }
  .specimen__col:active { border-top-color: var(--accent); }
  .ruled__row:hover { background: none; }
  .qa__q:hover { background: none; }
  .btn--accent:hover {
    background: var(--accent); border-color: var(--accent); color: #241503;
  }
  .btn--accent:active {
    background: color-mix(in srgb, var(--accent) 82%, #000);
  }
  .btn--onfield:hover {
    background: transparent; border-color: rgba(255,255,255,.4); color: #fff;
  }
  .btn--onfield:active { background: #fff; color: var(--ink); border-color: #fff; }
  .btn--quiet:hover { background: transparent; color: var(--ink); }
  .btt:hover { background: var(--ink); color: var(--paper); border-color: var(--hair); }
  .btt:active { background: var(--accent); color: #241503; border-color: var(--accent); }
  .arrowlink:hover svg { transform: none; }
}

@media (pointer: coarse) {
  .mast__nav a { padding: 10px 0; }
  .link, .arrowlink, .foot a { padding: 4px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms; animation-duration: .01ms; }
  .arrowlink:hover svg { transform: none; }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .strap, .mast, .enq, .enqbar, .implnote, .dock, .btt { display: none; }
  .hero, .band--field, .pull { background: none; color: #000; }
  .hero h1, .band--field h2 { color: #000; }
  body.has-dock { padding-bottom: 0; }
}