/* =========================================================================
   AINativeX — Enterprise AI-native transformation site
   Palette shared with the AIUdaan brand system (AI Udaan Brand Guidelines v1.0):
     Navy Blue   #1A1A5E  wordmark, headings
     Coral       #D85A30  'AI' text, CTAs
     Amber Gold  #EF9F27  accents
     Deep Amber  #BA7517  supporting details
     Light Cream #FAEEDA  light backgrounds
     Dark Navy   #1A1A1E  dark sections
   ========================================================================= */

:root {
  --navy:        #1A1A5E;
  --coral:       #D85A30;
  --amber:       #EF9F27;
  --deep-amber:  #BA7517;
  --cream:       #FAEEDA;
  --dark-navy:   #1A1A1E;

  --ink:         #1d1d33;
  --muted:       #5b5b73;
  --line:        #e7e3da;
  --white:       #ffffff;
  --cream-soft:  #fdf8ef;

  --container:   1120px;
  --radius:      14px;
  --radius-lg:   22px;
  --shadow-sm:   0 1px 2px rgba(26, 26, 94, .06), 0 4px 14px rgba(26, 26, 94, .06);
  --shadow-md:   0 10px 30px rgba(26, 26, 94, .10);
  --shadow-cta:  0 8px 22px rgba(216, 90, 48, .28);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Display serif for h1/h2, matching the transformation deck. Set this to
     var(--font) to put section headings back on Inter. */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;

  --num: #9c9284;   /* warm grey used for numerals and tags */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--coral); text-decoration: none; }
a:hover { text-decoration: underline; }
/* text-wrap: balance evens out the last line of a heading instead of leaving a
   one-word orphan under a nearly-full line. Body copy gets `pretty`, which only
   polices the final line and so stays cheap on long paragraphs. */
h1, h2, h3 { color: var(--navy); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance; }
h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
h3 { font-size: 1.25rem; font-weight: 700; }
p  { margin: 0 0 1rem; text-wrap: pretty; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 22px; }
[id] { scroll-margin-top: 84px; }
/* Vertical rhythm comes from one place. The section owns the space between
   bands; the last block inside it drops its trailing margin so the two don't
   compound into a void. The `.container` line is the one that actually bites —
   a section's only direct child is the container, so the trailing paragraph is
   a grandchild, not a child.

   This value is a HALF-gap. Padding does not collapse, so every boundary pays
   it twice: the gap between two sections is double what is set here. 64px
   therefore reads as 128px between bands at desktop, 72px at phone width. */
section { padding-block: clamp(36px, 5vw, 64px); }
section > *:last-child { margin-bottom: 0; }
section > .container > *:last-child { margin-bottom: 0; }
/* The hero's own grid supplies its padding, so it opts out instead of doubling. */
.hero { padding-block: 0; }
.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--deep-amber); margin-bottom: .9rem;
}
.eyebrow--coral { color: var(--coral); }
.center { text-align: center; }
.lead { font-size: 1.15rem; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.section--tint { background: var(--cream-soft); border-block: 1px solid var(--line); }
/* Measure is set per element, in ch, so heading and body are each tuned to
   their own font. A single max-width on the wrapper would measure both in
   Inter and let the much larger display serif run past the body's edge.

   34ch, not 20: `ch` is the width of "0", which in Playfair is wider than its
   average lowercase glyph, so the cap buys roughly 40 real characters. That is
   enough for every heading on this page to sit on one line from 1024px up,
   while still reining in anything longer. Below ~700px the container binds
   first, so the cap is inert on phones and `text-wrap: balance` takes over. */
.section-head { margin-bottom: 2.2rem; }
.section-head h2 { max-width: 34ch; margin-bottom: .6rem; }
.section-head .lead { max-width: 60ch; margin-bottom: 0; }
.note { max-width: 66ch; color: var(--muted); font-size: .98rem; }

/* Single-line conclusion under a block, in the deck's voice. */
.pull {
  margin: 2rem 0 0; text-align: center;
  font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--navy);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; text-decoration: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.5rem; border-radius: 999px;
  font-weight: 700; font-size: 1rem; line-height: 1;
  border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn .arw { transition: transform .15s ease; }
.btn:hover .arw { transform: translateX(3px); }
.btn--primary { background: var(--coral); color: #fff; box-shadow: var(--shadow-cta); }
.btn--primary:hover { background: #c44e28; color: #fff; }
.btn--amber { background: var(--amber); color: #3a2402; box-shadow: 0 8px 22px rgba(239,159,39,.30); }
.btn--amber:hover { background: var(--deep-amber); color: #fff; }
.btn--ghost { background: transparent; color: var(--navy); border-color: #d9d2c6; border-width: 1px; }
.btn--ghost:hover { background: #fff; border-color: var(--navy); color: var(--navy); }
.btn--light { background: #fff; color: var(--navy); border-color: var(--line); }
.btn--light:hover { border-color: var(--navy); }
.btn--lg { padding: 1rem 1.55rem; font-size: 1.02rem; }
.btn--sm { padding: .6rem 1.1rem; font-size: .92rem; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 12px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; }
.brand img { height: 46px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 1.35rem; }
.nav-links a {
  color: var(--navy); font-weight: 600; font-size: .96rem;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
  /* The bar runs close to full width, so a label must never break mid-phrase. */
  white-space: nowrap;
}
.nav-links a:hover { color: var(--coral); text-decoration: none; }
.nav-links a.is-current { color: var(--coral); border-bottom-color: var(--amber); }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--navy); margin: 5px 0; transition: .2s; }

/* ---------- Hero ---------- */
.hero { background: var(--cream-soft); border-bottom: 1px solid var(--line); }
.hero-grid {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 4vw, 3.6rem); align-items: center;
  padding-block: clamp(44px, 7vw, 88px);
}
.hero h1 { margin-bottom: 1.1rem; max-width: 16ch; }
.hero-sub {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: #3a3a52;
  max-width: 44ch; margin: 0 0 1.8rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero-fine { margin: 1.1rem 0 0; font-size: .92rem; color: var(--muted); }

/* Credibility card — carries the operator bio, so there is no About section. */
.hero-side { display: grid; gap: 1rem; }
.bio-card {
  margin: 0; background: var(--navy); color: #fff;
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.1rem);
  box-shadow: var(--shadow-md);
}
.bio-lead {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.3; color: #fff;
  margin-bottom: 1.1rem;
}
.bio-body { font-size: 1rem; color: #cfcfe6; margin-bottom: 1.2rem; }
.bio-attr { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem; }
/* The source is a 4:5 cut-out with a transparent background, so the circle
   supplies its own fill, and the image is scaled about the face — plain
   object-fit can only ever frame the top of the portrait, not the head. */
.bio-avatar {
  flex: 0 0 auto; display: block; width: 60px; height: 60px;
  border-radius: 50%; overflow: hidden;
  background: rgba(255,255,255,.12);
  box-shadow: 0 0 0 2px rgba(255,255,255,.22);
}
.bio-avatar img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
  transform: scale(1.3); transform-origin: 50% 15%;
}
.bio-name { font-weight: 700; color: var(--amber); }
.linkedin-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .82rem; font-weight: 700; color: var(--navy);
  padding: .28rem .7rem .28rem .55rem; border: 1px solid var(--line);
  border-radius: 999px; background: #fff;
}
.linkedin-pill:hover { color: var(--coral); border-color: var(--coral); text-decoration: none; }
.linkedin-pill svg { flex: 0 0 auto; }
.linkedin-pill--onDark {
  color: #fff; background: transparent; border-color: rgba(255,255,255,.35);
  box-shadow: none; top: 0;
}
.linkedin-pill--onDark:hover { color: var(--amber); border-color: var(--amber); }
/* Sits inline beside a name, so it has to read as a link rather than compete
   with the name for weight. */
.linkedin-pill--sm {
  font-size: .74rem; padding: .15rem .55rem .15rem .45rem;
  gap: .25rem; color: var(--navy); background: #fff;
}

.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.stats li {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem .95rem; font-size: .88rem; line-height: 1.4; color: var(--muted);
}
.stat-num {
  display: block; margin-bottom: .35rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: var(--navy);
}

/* ---------- The premise: the 70 / 20 / 10 split ---------- */
.split {
  list-style: none; margin: 2.4rem 0 1.8rem; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
}
.split-item {
  background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--amber);
  border-radius: var(--radius-lg); padding: 1.6rem 1.4rem; box-shadow: var(--shadow-sm);
}
/* The weights are unequal, so the accent carries the hierarchy before the
   reader parses a number: coral on the 70%, amber on the 20%, and the palette's
   desaturated grey-navy on the 10%. All three are existing brand tokens. */
.split-item--lead { border-top-color: var(--coral); }
.split-item--minor { border-top-color: var(--muted); }
.split-num {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 3.4rem); line-height: 1; color: var(--navy);
  margin-bottom: .6rem;
}
.split-item--lead .split-num { color: var(--coral); }
.split-item h3 { margin-bottom: .35rem; font-size: 1.1rem; }
.split-item p { margin: 0; color: #34344a; font-size: .95rem; }

/* Third-party corroboration for the split, held apart from the first-hand
   commentary below it: tinted panel, amber rule on the leading edge, and the
   attribution pushed to the trailing edge so the claim reads first. */
.source-note {
  display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: baseline;
  background: var(--cream-soft); border: 1px solid var(--line); border-left: 4px solid var(--amber);
  border-radius: var(--radius); padding: 1rem 1.2rem; margin: 0 0 1.8rem;
  font-size: .95rem; color: #34344a;
}
.source-attr { margin-left: auto; font-size: .82rem; color: var(--muted); white-space: nowrap; }

/* Commentary under the cards, set in two columns so it occupies the same row
   width as the card grid above it. Multicol rather than a two-column grid: it
   balances the column heights on its own, and `break-inside` keeps each
   paragraph whole so reading order survives. Same idiom as `.ecard .ticks`. */
.notes { columns: 2; column-gap: clamp(2rem, 4vw, 4rem); }
.notes .note { break-inside: avoid; max-width: none; }
.notes .note:last-child { margin-bottom: 0; }

/* ---------- Where it breaks: the two gaps ---------- */
.gaps { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.gap {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.7rem 1.5rem; box-shadow: var(--shadow-sm);
  border-top: 5px solid var(--navy);
}
.gap--accent { border-top-color: var(--coral); }
.gap-kicker {
  display: block; font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--num); margin-bottom: .7rem;
}
.gap--accent .gap-kicker { color: var(--coral); }
.gap h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; margin-bottom: .5rem; }
.gap p { margin: 0; color: #34344a; }

/* ---------- Expertise: the layer stack ----------
   Rows read top-down from application to hardware, so the tag column is fixed
   width and the stack keeps a single left rule. */
.layers { list-style: none; margin: 2.2rem 0 1.6rem; padding: 0; }
.layer {
  display: grid; grid-template-columns: 150px 1fr; gap: 1.4rem;
  padding: 1.25rem 0; border-top: 1px solid var(--line);
}
.layer:last-child { border-bottom: 1px solid var(--line); }
.layer-tag {
  display: inline-block; align-self: start; justify-self: start;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--deep-amber); background: var(--cream); border-radius: 999px;
  padding: .35rem .8rem; margin-top: .15rem;
}
.layer h3 { font-size: 1.08rem; margin-bottom: .35rem; }
.layer p { margin: 0; color: #34344a; font-size: .96rem; max-width: 66ch; }

/* ---------- Engagements ---------- */
/* One card per row, ascending by duration, so the depths read top to bottom.
   A half-width column would strand empty space beside the full-width card. */
.engage { display: grid; grid-template-columns: 1fr; gap: 1.2rem; margin: 1.8rem 0 1.4rem; }
.ecard {
  background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--amber);
  border-radius: var(--radius-lg); padding: 1.7rem 1.5rem; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ecard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* The enterprise engagement is the flagship, so it spans the row and takes coral. */
.ecard--full { grid-column: 1 / -1; border-top-color: var(--coral); }
.ecard-tag {
  display: block; font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--deep-amber); margin-bottom: .6rem;
}
.ecard--full .ecard-tag { color: var(--coral); }
.ecard h3 { font-size: 1.28rem; margin-bottom: .5rem; }
.ecard-lead { color: #34344a; }
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; color: #34344a; font-size: .96rem; }
.ticks li:last-child { margin-bottom: 0; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px;
  border-radius: 2px; background: var(--amber); transform: rotate(45deg);
}
/* Full-width rows would otherwise give the bullets an unreadable measure. */
.ecard .ticks { columns: 2; column-gap: 2rem; }
.ecard .ticks li { break-inside: avoid; }
/* Delivery mechanics under the bullets — secondary to them, so muted italic. */
.how-it-runs {
  margin: 1rem 0 0; font-style: italic; color: var(--muted); font-size: .92rem;
}
.how-it-runs + .how-it-runs { margin-top: .6rem; }
.plans-note { font-weight: 600; color: var(--navy); max-width: 66ch; }

/* ---------- Why: credentials + pull quote ---------- */
.why-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.6rem, 3vw, 2.6rem); align-items: start; }
.why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; }
.why-list li { border-left: 3px solid var(--amber); padding-left: 1.1rem; }
.why-list li:first-child { border-left-color: var(--coral); }
.why-list h3 { font-size: 1.08rem; margin-bottom: .3rem; }
.why-list p { margin: 0; color: #34344a; font-size: .97rem; }
.quote-card {
  margin: 0; background: var(--dark-navy); color: #fff;
  border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-md);
}
.quote-card blockquote {
  margin: 0 0 1rem; font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.15rem, 1.9vw, 1.42rem); line-height: 1.35;
}
.quote-card figcaption { font-size: .85rem; color: var(--amber); font-weight: 700; }

/* ---------- Testimonials ----------
   Same card shape as the AIUdaan testimonials: headline, an amber attribution
   line, then the quote in italics. Two columns; the quotes here are short
   enough to sit on the card, so there is no "read more" disclosure. */
.tcards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: 1.6rem; align-items: start; }
.tcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.4rem; box-shadow: var(--shadow-sm); margin: 0;
}
.tcard .tcard-title { margin: 0 0 .45rem; font-size: 1.15rem; line-height: 1.3; color: var(--navy); }
/* Name and its LinkedIn link share a line — the link belongs to the person,
   not to the card, so it sits with the name rather than in a footer. */
.tcard .tcard-arc {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  font-size: .88rem; font-weight: 700; color: var(--deep-amber);
  letter-spacing: .02em; margin: 0 0 .15rem;
}
.tcard .tcard-role {
  font-size: .88rem; font-weight: 700; color: var(--deep-amber);
  letter-spacing: .02em; margin: 0 0 .9rem;
}
.tcard .quote { margin: 0; font-size: 1rem; line-height: 1.6; color: #2c2c44; font-style: italic; }
.tcard .quote p { margin: 0 0 .8rem; }
.tcard .quote p:last-child { margin-bottom: 0; }

/* ---------- FAQ ---------- */
.faq-item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0; margin-bottom: .9rem; box-shadow: var(--shadow-sm); overflow: hidden;
}
.faq-item summary {
  cursor: pointer; padding: 1rem 1.3rem; font-weight: 700; color: var(--navy);
  font-size: 1.08rem; list-style-position: inside;
}
.faq-item summary:hover { color: var(--coral); }
.faq-item[open] summary { border-bottom: 1px solid var(--line); background: var(--cream-soft); }
.faq-item ul, .faq-item p { margin: 1rem 1.3rem; }
.faq-item ul { list-style: none; padding: 0; }
.faq-item ul li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; color: #34344a; }
.faq-item ul li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px;
  border-radius: 2px; background: var(--amber); transform: rotate(45deg);
}

/* ---------- Final CTA ---------- */
.cta-band { background: linear-gradient(135deg, var(--dark-navy) 0%, var(--navy) 100%); color: #fff; }
.cta-band h2 { color: #fff; }
.cta-band .eyebrow { color: var(--amber); }
.cta-band p { color: #cfcfe6; max-width: 52ch; margin-inline: auto; }
.cta-band p a { color: var(--amber); }   /* coral fails contrast on the dark band */
.cta-band .hero-cta { justify-content: center; margin-top: 1.6rem; }

/* The ask itself, in place of a button. Scoped under .cta-band so it beats
   `.cta-band p`, which would otherwise win on specificity and hand it back
   that rule's colour and measure. */
.cta-band .cta-ask {
  margin: 1.7rem auto 0; max-width: 46ch;
  font-size: 1.12rem; line-height: 1.65; color: #e4e4f0;
}
.cta-band .cta-ask a {
  color: var(--amber); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.cta-band .cta-ask a:hover { color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: var(--dark-navy); color: #c9c9da; padding: 56px 0 30px; }
.site-footer a { color: var(--amber); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
/* The footer mark is the full stacked lockup, so it needs more height than a
   horizontal one to keep the wordmark and tagline legible. */
.site-footer img.flogo { height: 84px; margin-bottom: 1rem; }
.brand-note { font-size: .95rem; color: #b6b6cb; max-width: 44ch; }
.footer-col h4 { color: #fff; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 .9rem; }
.footer-col a { display: block; color: #c9c9da; margin-bottom: .5rem; font-weight: 500; }
.footer-col a:hover { color: var(--amber); text-decoration: none; }
.footer-bottom {
  margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.10);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .85rem; color: #8f8fa6;
}
.tagline-pill { color: var(--amber); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .nav-links { gap: 1.1rem; }
  .why-grid { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero h1, .hero-sub { max-width: none; }
  .split, .gaps, .engage { grid-template-columns: 1fr; }
  .ecard .ticks { columns: 1; }
  /* Collapses at the same breakpoint as the card grids above it. */
  .notes { columns: 1; }
  .notes .note { max-width: 66ch; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links {
    position: fixed; inset: 62px 0 auto 0; flex-direction: column; align-items: stretch;
    background: #fff; border-bottom: 1px solid var(--line); padding: 1rem 22px 1.4rem; gap: 1rem;
    transform: translateY(-130%); transition: transform .25s ease; box-shadow: var(--shadow-md);
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { padding: .3rem 0; border-bottom: 0; }
  .nav-links a.is-current { border-bottom: 0; }
  .nav-toggle { display: block; }
}
@media (max-width: 700px) {
  /* Tag above the copy — a 150px column starves the text at this width. */
  .layer { grid-template-columns: 1fr; gap: .6rem; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .tcards, .footer-grid { grid-template-columns: 1fr; }
  .brand img { height: 40px; }
  /* Three stat cards side by side get too cramped below this width. */
  .stats { grid-template-columns: 1fr; }
  .stats li { display: flex; align-items: baseline; gap: .6rem; padding: .8rem .95rem; }
  /* Labels like "70-20-10" must not break across lines in the side column. */
  .stat-num { flex: 0 0 auto; white-space: nowrap; margin-bottom: 0; font-size: 1.2rem; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  /* The address is one long unbreakable token at this width. */
  .cta-band .cta-ask { font-size: 1.05rem; }
  .cta-band .cta-ask a { overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}