/* ==========================================================================
   Restart US — LineReady landing page
   Design tokens from the official Restart branding kit (US palette).
   Typeface: Atkinson Hyperlegible Next (OFL).
   ========================================================================== */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/AtkinsonHyperlegibleNext-400-800.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
/* metric-matched fallback, same overrides as the Restart Brasil site */
@font-face { font-family: "Atkinson Fallback"; src: local(Arial), local(Helvetica), local("Liberation Sans"); font-weight: 400 450; size-adjust: 97.75%; ascent-override: 100.67%; descent-override: 32.33%; line-gap-override: 0%; }
@font-face { font-family: "Atkinson Fallback"; src: local(Arial), local(Helvetica), local("Liberation Sans"); font-weight: 451 550; size-adjust: 100.46%; ascent-override: 97.95%; descent-override: 31.46%; line-gap-override: 0%; }
@font-face { font-family: "Atkinson Fallback"; src: local(Arial), local(Helvetica), local("Liberation Sans"); font-weight: 551 650; size-adjust: 102.43%; ascent-override: 96.07%; descent-override: 30.85%; line-gap-override: 0%; }
@font-face { font-family: "Atkinson Fallback"; src: local(Arial), local(Helvetica), local("Liberation Sans"); font-weight: 651 750; size-adjust: 104.48%; ascent-override: 94.18%; descent-override: 30.25%; line-gap-override: 0%; }
@font-face { font-family: "Atkinson Fallback"; src: local(Arial), local(Helvetica), local("Liberation Sans"); font-weight: 751 800; size-adjust: 107.98%; ascent-override: 91.13%; descent-override: 29.27%; line-gap-override: 0%; }

:root {
  /* Brand palette, sampled from the Restart US identity material. No other colour is allowed in this file:
     navy and white dominate, teal is the accent, surface is the page grey of the booklet. */
  --navy: #000031;
  --teal: #54bbbe;
  --white: #fff;
  --surface: #f1f1f5;
  --plate: var(--surface);
  /* the same navy at lower opacity: secondary text, field borders, hairlines */
  --navy-70: rgb(0 0 49 / .7);
  --navy-50: rgb(0 0 49 / .5);
  --navy-15: rgb(0 0 49 / .15);
  /* the sister brands, sampled from their official logos: only for the border of each one's card in "Group brands", as on the booklet */
  --brasil: #3e63af;
  --tech: #6f599c;
  --import: #f7c34a;
  --str: #f15a22;
  /* WhatsApp's own green (its official brand colour), only for the floating chat button */
  --whatsapp: #25d366;

  --ff: "Atkinson Hyperlegible Next", "Atkinson Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Type scale shared with the Restart Brasil site */
  --text-h1: clamp(2.25rem, 1.6rem + 2.6vw, 4rem);
  --text-h2: clamp(1.75rem, 1.35rem + 1.6vw, 3rem);
  --text-h3: clamp(1.25rem, 1.12rem + .5vw, 1.625rem);
  --text-lead: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
  --text-body: 1rem;
  --text-body-lg: 1.0625rem;
  --text-small: .9375rem;
  --text-label: .875rem;
  --tracking-display: -.025em;
  --tracking-snug: -.015em;
  --leading-tight: 1.08;
  --leading-heading: 1.15;
  --leading-body: 1.6;

  /* two radii, as on the other Restart sites: 18px for cards, photos and panels, 8px for buttons, fields and tags */
  --r: 18px;
  --r-lg: 18px;
  --r-sm: 8px;
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --sec: clamp(3.25rem, 2.5rem + 3vw, 5.5rem); /* section rhythm shared with the other Restart sites: 52 to 88px */
  --header-h: 72px;
  --ease: cubic-bezier(.2, .7, .3, 1);
  /* durations shared with the other Restart sites: hover, state and menus / scroll reveal / hero entrance */
  --dur-1: .2s;
  --dur-2: .4s;
  --dur-3: .6s;
  --shadow-lift: 0 2px 6px rgb(0 0 49 / .05), 0 28px 60px -34px rgb(0 0 49 / .45);
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ff);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
picture { display: contents; } /* a wrapper for the AVIF source only: the img inside lays out as if it were alone */
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
/* focus ring: navy on light surfaces, teal on navy */
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 6px; }
:is(.hero, .quote, .contact-copy, .site-header.on-dark:not(.is-stuck):not(.menu-open)) :focus-visible { outline-color: var(--teal); } /* the footer is teal: it keeps the navy ring */

.container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: var(--navy); color: #fff; padding: .75rem 1.1rem; border-radius: var(--r-sm); transition: top .2s; }
.skip:focus { top: 1rem; }
.ic { width: 1.25rem; height: 1.25rem; flex: none; }

/* ---------- type ---------- */
h1, h2, h3 { font-weight: 600; letter-spacing: var(--tracking-snug); line-height: var(--leading-heading); text-wrap: balance; }
h1 { font-size: var(--text-h1); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-h2); letter-spacing: var(--tracking-display); }
h3 { font-size: var(--text-h3); }
p { text-wrap: pretty; }

.eyebrow {
  display: inline-flex; align-items: baseline; gap: .6rem; /* baseline: the dot stays on the first line when the label wraps */
  font-size: var(--text-label); font-weight: 500; letter-spacing: 0; color: var(--navy);
}
.eyebrow .dot { flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgb(84 187 190 / .25); }

/* the "pill header" of the LIVRETO cards */
.tag {
  display: inline-block; padding: .55rem 1.1rem; border-radius: var(--r-sm);
  font-size: var(--text-label); font-weight: 600; letter-spacing: 0;
}
.tag-navy { background: var(--navy); color: #fff; }
.tag-teal { background: var(--teal); color: var(--navy); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 3rem; padding: 0 1.5rem; border-radius: var(--r-sm); border: 1px solid transparent;
  font-weight: 600; font-size: var(--text-small); letter-spacing: 0; white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), translate var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.btn .ic { transition: transform var(--dur-1) var(--ease); }
.btn:active { translate: 0 1px; } /* translate, not transform: .reveal owns transform */
.btn:disabled { opacity: .6; cursor: progress; }
.btn-sm { min-height: 2.75rem; padding: 0 1.15rem; font-size: var(--text-label); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-teal { background: var(--teal); color: var(--navy); }
/* touch screens keep :hover after a tap, which would leave e.g. the teal submit button white on the white form */
@media (hover: hover) {
  .btn:hover .ic { transform: translateX(3px); }
  .btn-navy:hover { background: var(--teal); color: var(--navy); }
  .btn-teal:hover { background: #fff; }
  .form .btn-teal:hover { background: var(--navy); color: #fff; } /* white on the white form otherwise */
}

/* ---------- header ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; }
/* nearly opaque, no backdrop blur: a blur under a fixed bar is recomputed on every scrolled frame, which stutters on phones */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(241 241 245 / .97); box-shadow: 0 1px 0 rgb(0 0 49 / .08); opacity: 0; transition: opacity var(--dur-1); }
.site-header.is-stuck::before { opacity: 1; }
.header-row { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { position: relative; z-index: 60; padding-block: .4rem; }
.brand img { width: 128px; height: auto; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); }
.nav a:not(.btn) { position: relative; font-weight: 600; font-size: .97rem; padding: .35rem 0; white-space: nowrap; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-1) var(--ease); }
.nav a:not(.btn):hover::after { transform: scaleX(1); }
.menu-btn { display: none; }

/* ---------- header over the dark hero ---------- */
.brand-light { display: none; }
.site-header.on-dark:not(.is-stuck):not(.menu-open) .brand-dark { display: none; }
.site-header.on-dark:not(.is-stuck):not(.menu-open) .brand-light { display: block; }
@media (min-width: 1024px) {
  .site-header.on-dark:not(.is-stuck) .nav a:not(.btn) { color: #fff; }
  .site-header.on-dark:not(.is-stuck) .nav-cta { background: transparent; border-color: rgb(255 255 255 / .45); color: #fff; } /* outline: the hero button is the one accent in the fold */
  .site-header.on-dark:not(.is-stuck) .nav-cta:hover { background: #fff; border-color: #fff; color: var(--navy); }
}
.site-header.on-dark:not(.is-stuck):not(.menu-open) .menu-btn span { background: #fff; }

/* ---------- hero: dark, technical, product-first ---------- */
.hero { position: relative; isolation: isolate; background: var(--navy); color: #fff; padding: calc(var(--header-h) + clamp(1.5rem, 4vw, 3rem)) 0 0; overflow: hidden; overflow: clip; }
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Restart identity: the two shapes of the official element meeting at a point (284,322 here), pivoting on it, placed and coloured as on the brand key visual (bar teal, leaf white).
   Brand intro only (html.intro, set once per session in <head>): they swing open in full colour with the logo, then leave (1.3 s). The hero stays clean.
   Each shape is a whole svg layer (same 1600x900 frame), turned and faded by the GPU: animating the paths inside one svg repainted it every frame */
.hero-id { display: none; position: absolute; left: 0; top: 0; width: max(1100px, min(100%, 160rem)); height: auto; aspect-ratio: 16 / 9; } /* capped at 2560px: wider screens keep the banner size, navy beyond */
.intro .hero-id { display: block; }
.intro-done .hero-id { display: none; } /* played (main.js): no idle layers left behind */
.id-layer { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; transform-origin: 17.75% 35.778%; opacity: 0; } /* 284,322 of the frame: where the two shapes meet */
.id-blade-a { fill: var(--teal); }
.id-blade-b { fill: #fff; }
.intro .id-layer { will-change: transform, opacity; }
.intro .id-blade-a { animation: id-intro-a 1.3s var(--ease) both; }
.intro .id-blade-b { animation: id-intro-b 1.3s var(--ease) both; }
.intro .id-logo-layer { animation: id-logo 1.3s ease both; }
@keyframes id-intro-a {
  0% { transform: rotate(-80deg) scale(.55); opacity: 0; }
  10% { opacity: 1; }
  32%, 56% { transform: none; opacity: 1; }
  100% { transform: rotate(-42deg) scale(.9); opacity: 0; }
}
@keyframes id-intro-b {
  0% { transform: rotate(80deg) scale(.55); opacity: 0; }
  10% { opacity: 1; }
  32%, 56% { transform: none; opacity: 1; }
  100% { transform: rotate(42deg) scale(.9); opacity: 0; }
}
@keyframes id-logo { 0%, 18% { opacity: 0; } 32%, 54% { opacity: 1; } 70%, 100% { opacity: 0; } }
/* the hero comes in as the shapes start to leave (.62 s); the header never waits, so the menu works from the first frame */
.intro .art-wrap { animation-delay: .7s, calc(.7s + var(--dur-3)); } /* entrance, then the float */
.intro .ht-in { animation-delay: calc(.62s + var(--d, 0s)); }

/* one screen: the headline and the illustration side by side, centred in the fold below the header. The same space above and below
   (--hero-pad), two equal columns, the artwork centred in its own and sized from the screen height, so it never sits in a corner or
   touches the bottom; the copy stays above the artwork (z-index) */
.hero { --hero-pad: clamp(1.5rem, 4.5vh, 3.5rem); min-height: min(100vh, 60rem); min-height: min(100svh, 60rem); display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--header-h) + var(--hero-pad)); padding-bottom: var(--hero-pad); }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: center; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow-light { color: var(--teal); }

/* headline: a white lead-in in two lines, then "Innovation starts here" large in teal, the highlight */
.hero-title { margin-top: 1.5rem; font-size: clamp(2.75rem, 1rem + 5.6vw, 6.5rem); line-height: .98; letter-spacing: var(--tracking-display); color: #fff; }
.ht-line { display: block; overflow: hidden; font-size: .5em; line-height: 1.12; padding-bottom: .12em; margin-bottom: -.12em; } /* the mask the line slides up through; the padding keeps descenders */
.ht-in { display: block; animation: ht-slide .7s var(--ease) var(--d, 0s) both; }
@keyframes ht-slide { from { transform: translateY(110%); } }
.ht-type { display: block; margin-top: .16em; font-style: normal; color: var(--teal); }
/* typewriter (main.js): the whole line is laid out from the start, the part still to come is transparent, so nothing reflows while it types.
   The caret is the Restart signature: solid while typing, then six blinks, then it leaves. Without JS or with reduced motion the line is plain text */
@media (prefers-reduced-motion: no-preference) { .js .ht-type:not(.is-typed) { visibility: hidden; } }
/* the caret is the left border of the part still to come: it always sits right after the last typed letter, adds no line-break
   opportunity (an inline-block would) and, with the negative margin, no width */
.tw-off { color: transparent; border-left: .06em solid var(--teal); margin-left: -.06em; }
.ht-type.is-done .tw-off { animation: caret .78s step-end 6 forwards; } /* by then it holds no text, only the caret: it blinks by opacity, on the GPU */

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.6rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.cta-row .link-arrow { margin-top: 0; }

.hero-visual { position: relative; z-index: 1; justify-self: center; padding-block: 1rem; }
/* the LINE MAN cut-out floats on the navy, height-bound so the whole hero fits the fold */
/* height-bound: the screen less the header, the two --hero-pad and the 2rem around the art (.hero-visual padding, room for the float) (.741 is the art's width / height); the art is 1482px, sharp up to 540px at 2x */
.art-wrap { position: relative; width: min(540px, 40vw, (100vh - var(--header-h) - 2 * var(--hero-pad) - 2rem) * .741); width: min(540px, 40vw, (100svh - var(--header-h) - 2 * var(--hero-pad) - 2rem) * .741); margin-inline: auto; aspect-ratio: 1482 / 2000; animation: rise var(--dur-3) var(--ease) both, float 9s ease-in-out var(--dur-3) infinite; }
.art-wrap picture, .hero-art { display: block; width: 100%; height: auto; }

/* the open case in "Explore the kit" (a cut-out) floats too, hotspots included. It is also the query container for the tooltips */
.kit-wrap { position: relative; width: min(100%, 600px); margin-inline: auto; aspect-ratio: 1300 / 1347; container-type: inline-size; animation: float 9s ease-in-out infinite; } /* scroll reveal brings it in; then it only floats */
.kit-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } /* its shadow is baked into the file: a CSS filter on a large, floating image made phones paint a grey box until it rasterised */
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
/* main.js sets .is-off on the hero and on "Explore the kit" while they are scrolled away: no endless animations nobody can see */
.is-off :is(.kit-wrap, .art-wrap), .is-off .hs-dot::after { animation-play-state: paused; }

/* starts at 1% opacity, not 0: browsers skip an element painted at opacity 0 as the page's main content (LCP) and then wait for
   the headline to finish typing; at 1% it counts from the first frame and still looks like a fade from nothing */
@keyframes rise { from { opacity: .01; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 var(--float, -14px); } }

/* ---------- story ---------- */
.story { background: #fff; padding: var(--sec) 0; }
.story-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.story-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.story-copy h2 { max-width: 24ch; }
.story-copy p { color: var(--navy-70); max-width: 56ch; font-size: var(--text-body-lg); }
.story-copy .story-beat { color: var(--navy); font-weight: 600; font-size: var(--text-h3); line-height: 1.3; letter-spacing: var(--tracking-snug); padding-left: 1rem; border-left: 3px solid var(--teal); }

/* ---------- LineReady ---------- */
.lr { background: var(--surface); padding: var(--sec) 0; }
.lr-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lr-logo { width: min(700px, 92%); margin-top: clamp(1.5rem, 3vw, 2.25rem); } /* the section's headline: the product mark, large */
.lr-sub { margin-top: .9rem; font-size: var(--text-lead); font-weight: 500; color: var(--navy-70); }
.lr-lead { margin-top: 1.1rem; max-width: 60ch; font-size: var(--text-lead); line-height: 1.55; color: var(--navy-70); }

.lr-beat { margin-top: 1.1rem; font-weight: 600; font-size: var(--text-lead); color: var(--navy); }

/* the case, front and back */
/* both files share one canvas with the square body at the same place and height (the front's handle hangs below), shadow baked in:
   aligned from the top, the two bodies line up at any width */
.case-duo { margin: clamp(2rem, 4vw, 3.25rem) auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.case-fig img { width: 100%; height: auto; }

/* ---------- explore: the case opened, a hotspot on each tool ---------- */
/* white between the grey LINE READY and Tools sections; the copy and the list sit centred against the case */
.explore { background: #fff; padding: var(--sec) 0; overflow: hidden; overflow: clip; }
.explore-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: 1fr auto auto 1fr; grid-template-areas: ". visual" "copy visual" "list visual" ". visual"; column-gap: clamp(2rem, 5vw, 5rem); }
.explore-copy { grid-area: copy; display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.explore-copy p { font-size: var(--text-lead); color: var(--navy-70); }
.hs-list { grid-area: list; margin-top: 2rem; max-width: 30rem; border-top: 1px solid var(--navy-15); }
.hs-item { display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 3.25rem; padding: .85rem .75rem; border: 0; border-bottom: 1px solid var(--navy-15); background: none; color: var(--navy); font: inherit; font-size: var(--text-lead); font-weight: 700; line-height: 1.3; text-align: left; cursor: pointer; transition: background-color var(--dur-1), box-shadow var(--dur-1); }
.hs-item b { flex: none; display: inline-grid; place-items: center; min-width: 2.4rem; height: 1.75rem; border-radius: var(--r-sm); background: var(--surface); font-size: .8125rem; letter-spacing: .06em; transition: background-color var(--dur-1); }
.hs-item[aria-expanded="true"] { background: var(--surface); box-shadow: inset 3px 0 0 var(--teal); }
.hs-item[aria-expanded="true"] b { background: var(--teal); } /* navy on teal, 6.5:1 */
@media (hover: hover) { .hs-item:hover { background: var(--surface); } .hs-item:hover b { background: var(--teal); } }
.hs-item:focus-visible { outline-offset: -3px; }
.explore-visual { grid-area: visual; align-self: center; padding-block: 1rem 2.5rem; } /* room for the shadow and the float */

/* a hotspot: the dot sits on the tool, at --x/--y of the artwork; its pill shows the number, and the name on hover, focus or while open */
.hs { display: contents; }
.hs-btn { position: absolute; left: var(--x); top: var(--y); z-index: 3; display: flex; align-items: center; gap: .6rem; padding: 0; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; translate: -7px -7px; }
.hs[data-side="l"] .hs-btn { flex-direction: row-reverse; translate: calc(-100% + 7px) -7px; }
.hs-btn::before { content: ""; position: absolute; inset: -.6rem -.4rem; } /* ~44px touch target */
.hs-dot { position: relative; width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgb(0 0 49 / .6); }
.hs-dot::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid var(--teal); animation: ping 2.4s ease-out infinite; }
.hs:nth-of-type(2) .hs-dot::after { animation-delay: .5s; }
.hs:nth-of-type(3) .hs-dot::after { animation-delay: 1s; }
.hs-label { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; padding: .42rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 700; color: #fff; background: rgb(0 0 49 / .84); border: 1px solid rgb(84 187 190 / .55); transition: background-color .2s, color .2s, border-color .2s; } /* no backdrop blur: on the floating case it was recomputed every frame */
.hs-label b { color: var(--teal); font-size: .72rem; letter-spacing: .08em; transition: color .2s; }
.hs-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* always the button's name for screen readers */
.hs-btn:is(:focus-visible, [aria-expanded="true"]) .hs-name { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.hs-btn:is(:focus-visible, [aria-expanded="true"]) .hs-label { background: var(--teal); color: var(--navy); border-color: var(--teal); }
.hs-btn:is(:focus-visible, [aria-expanded="true"]) .hs-label b { color: var(--navy); }
@media (hover: hover) {
  .hs-btn:hover .hs-name { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .hs-btn:hover .hs-label { background: var(--teal); color: var(--navy); border-color: var(--teal); }
  .hs-btn:hover .hs-label b { color: var(--navy); }
}
/* keyboard focus: a white and navy ring around the pill, so focus still shows on a hotspot that is already open (teal) */
.hs-btn:focus-visible { outline: none; }
.hs-btn:focus-visible .hs-label { box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--navy); }

/* its tooltip: opens on click or tap, below the dot and towards the middle of the artwork (data-side); --tx/--ty move it so it never
   covers another hotspot */
.hs-tip { position: absolute; z-index: 4; top: calc(var(--y) + var(--ty, 1.6rem)); left: calc(var(--x) - var(--tx, 1.25rem)); width: min(17.5rem, calc(100% - 1.5rem)); padding: 1.05rem 1.2rem 1.15rem; border: 1px solid var(--teal); border-radius: var(--r); background: #fff; color: var(--navy); box-shadow: var(--shadow-lift); opacity: 0; visibility: hidden; translate: 0 .5rem; transition: opacity var(--dur-1) var(--ease), translate var(--dur-1) var(--ease), visibility 0s var(--dur-1); }
.hs[data-side="l"] .hs-tip { left: auto; right: calc(100% - var(--x) - var(--tx, 1.25rem)); }
.hs[data-up] .hs-tip { top: auto; bottom: calc(var(--up) + 1rem); } /* grows upward from a set line, whatever its height */
.hs-tip.is-open { opacity: 1; visibility: visible; translate: none; transition-delay: 0s; }
.hs-tip:focus { outline: none; } /* focused only to bring it into reading order when opened from the list */
.hs-kicker { font-size: var(--text-label); font-weight: 500; color: var(--navy-70); padding-right: 2rem; }
.hs-kicker b { color: var(--navy); letter-spacing: .08em; margin-right: .3rem; }
.hs-tip h3 { margin-top: .35rem; font-size: 1.125rem; line-height: 1.25; padding-right: 1rem; }
.hs-tip p:not(.hs-kicker) { margin-top: .45rem; font-size: var(--text-small); line-height: 1.45; color: var(--navy-70); }
.hs-more { display: inline-flex; align-items: center; gap: .45rem; margin-top: .8rem; padding-bottom: .1rem; border-bottom: 2px solid var(--teal); font-size: var(--text-small); font-weight: 700; transition: gap var(--dur-1) var(--ease); }
.hs-more .ic { width: 1rem; height: 1rem; }
@media (hover: hover) { .hs-more:hover { gap: .7rem; } }
.hs-close { position: absolute; top: .5rem; right: .5rem; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: none; color: var(--navy); cursor: pointer; transition: background-color var(--dur-1); }
.hs-close span::before, .hs-close span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; border-radius: 2px; background: currentColor; translate: -50% -50%; rotate: 45deg; }
.hs-close span::after { rotate: -45deg; }
@media (hover: hover) { .hs-close:hover { background: var(--surface); } }
/* a narrow case (under 540px: tablets, phones, small laptops) has no room beside the dots: the tooltip docks across the artwork,
   starting below the lowest dot (03, at 47%), compact */
@container (max-width: 540px) {
  .hs-tip, .hs[data-side="l"] .hs-tip, .hs[data-up] .hs-tip { top: calc(50% + 1.75rem); bottom: auto; left: .75rem; right: .75rem; width: auto; padding: .8rem 1rem .95rem; }
  .hs-kicker { display: none; } /* the number is on the open pill */
  .hs-tip h3 { margin-top: .1rem; padding-right: 2.5rem; font-size: 1rem; }
  .hs-more { margin-top: .55rem; }
  /* the pills keep to their number: a long name would run off the screen and over the other dots; the tooltip shows it */
  .hs-stage .hs-btn:is(:hover, :focus-visible, [aria-expanded="true"]) .hs-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

.link-arrow { position: relative; display: inline-flex; align-items: center; gap: .55rem; margin-top: .5rem; font-weight: 700; border-bottom: 2px solid var(--teal); padding-bottom: .15rem; transition: gap var(--dur-1) var(--ease), color var(--dur-1); }
@media (hover: hover) { .link-arrow:hover { gap: .9rem; color: var(--teal); } }
/* 44px touch targets without moving anything */
.link-arrow::after, .channels a::after { content: ""; position: absolute; inset: -.6rem 0; }

/* tools */
.section-head { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.section-head-center { align-items: center; text-align: center; margin-inline: auto; max-width: 52rem; }
.section-head p { color: var(--navy-70); max-width: 60ch; }
.cards { margin-top: clamp(2rem, 4vw, 3.25rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.pcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--teal); border-radius: var(--r); overflow: hidden; transition: translate var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
@media (hover: hover) { .pcard:hover { translate: 0 -6px; box-shadow: var(--shadow-lift); } }
.pbody { padding: .75rem 1.6rem 1.9rem; display: flex; flex-direction: column; gap: .8rem; }
.pkicker { font-size: var(--text-label); font-weight: 500; color: var(--navy-70); }
.pbody > p:not(.pkicker) { color: var(--navy-70); }
.checks { margin-top: .5rem; display: grid; gap: .55rem; padding-top: 1rem; border-top: 1px solid var(--navy-15); }
.checks li { display: flex; align-items: flex-start; gap: .65rem; font-weight: 500; font-size: var(--text-small); line-height: 1.4; }
.pnote { margin-top: .35rem; font-size: .8rem; line-height: 1.45; color: var(--navy-70); }
.checks .ic { width: 1.15rem; height: 1.15rem; margin-top: .12rem; color: var(--navy); } /* 20:1 on the white card; teal would be 2.3:1 */

/* quote band */
.quote { position: relative; background: var(--navy); color: #fff; overflow: hidden; overflow: clip; }
/* the official element as on the dark brand banner (bar teal, leaf white): the banner's 1600x900 frame, as tall as the band and set
   against its left edge, so the shapes bleed off the top, bottom and left exactly as on the banner, and the text takes the banner's
   logo side. It swings open when the band scrolls in */
.quote-id { position: absolute; left: 0; top: 0; height: 100%; width: auto; aspect-ratio: 16 / 9; overflow: hidden; } /* the frame clips the shapes, not each turning layer */
.qb { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; transform-origin: 17.75% 35.778%; transition: transform 1.1s var(--ease) .1s; } /* 284,322 of the frame: the point where the two shapes meet */
.qb-a { fill: #fff; }
.qb-b { fill: var(--teal); }
.js .quote-id.reveal { transform: none; } /* the svg only fades in; the blades do the moving */
.js .quote-id:not(.in) .qb-a { transform: rotate(-24deg); }
.js .quote-id:not(.in) .qb-b { transform: rotate(24deg); }
.quote-inner { position: relative; padding-block: var(--sec); display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; }
/* from 1024px: the text where the banner has its logo, clear of the shapes, and ending on the container's right edge */
@media (min-width: 1024px) { .quote .quote-inner { width: auto; margin-left: clamp(28rem, 34vw, 36rem); margin-right: max(var(--gutter), (100% - var(--container)) / 2); } }
.quote p { font-size: var(--text-h1); font-weight: 700; letter-spacing: var(--tracking-display); line-height: var(--leading-tight); max-width: 20ch; text-wrap: balance; }

.quote .quote-sign { margin-top: -1rem; color: var(--teal); max-width: none; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; }

/* ---------- brands ---------- */
.brands { background: var(--surface); padding: var(--sec) 0; }
.brands .section-head p { font-size: var(--text-lead); line-height: 1.55; }
.bcard {
  --c: var(--navy);
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.4rem; text-align: center;
  background: #fff; border: 1px solid var(--c); border-radius: var(--r); padding: 2rem 1.5rem 1.6rem;
  transition: translate var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
@media (hover: hover) { .bcard:hover { translate: 0 -4px; box-shadow: var(--shadow-lift); } }
.bcard img { width: min(100%, 171px); height: auto; }
.bcard-str img { width: min(100%, 81px); }
/* the group's card: the Global Hub logo alone, centred both ways */
.bcard-hub { margin-top: clamp(2.25rem, 4vw, 3.5rem); width: min(100%, 560px); margin-inline: auto; justify-content: center; padding: clamp(2.25rem, 4vw, 3rem) 1.5rem; }
.bcard-hub img { display: block; width: min(100%, 260px); }
.bgrid { margin-top: 2rem; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; }
.bgrid .bcard { grid-column: span 2; }
.bgrid .bcard:nth-child(4), .bgrid .bcard:nth-child(5) { grid-column: span 3; }
/* each card takes its brand's colour, as on the booklet */
.bcard-us { --c: var(--teal); }
.bcard-brasil { --c: var(--brasil); }
.bcard-tech { --c: var(--tech); }
.bcard-import { --c: var(--import); }
.bcard-str { --c: var(--str); }
.here { position: absolute; top: -.85rem; left: 50%; translate: -50% 0; white-space: nowrap; background: var(--teal); color: var(--navy); font-size: .8125rem; font-weight: 600; letter-spacing: 0; padding: .3rem .8rem; border-radius: 999px; }

/* ---------- contact ---------- */
.contact { position: relative; background: var(--navy); color: #fff; padding: var(--sec) 0; overflow: hidden; overflow: clip; }
.contact-grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
.contact-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
.contact-copy > p { color: rgb(255 255 255 / .78); max-width: 42ch; }
.channels { margin-top: 1rem; display: grid; gap: 1rem; }
.channels li { display: grid; grid-template-columns: auto 1fr; gap: .1rem .9rem; align-items: center; }
.channels .ic { grid-row: span 2; width: 2.75rem; height: 2.75rem; padding: .7rem; border-radius: 50%; border: 1px solid rgb(255 255 255 / .28); color: var(--teal); }
.channels span { font-size: var(--text-label); font-weight: 500; color: rgb(255 255 255 / .6); }
.channels a { position: relative; font-weight: 700; border-bottom: 1px solid transparent; justify-self: start; transition: border-color .2s, color .2s; }
@media (hover: hover) { .channels a:hover { color: var(--teal); border-color: var(--teal); } }

.form { background: #fff; color: var(--navy); border-radius: var(--r-lg); padding: clamp(1.4rem, 3.4vw, 2.6rem); display: grid; gap: 1.15rem; }
.field { display: grid; gap: .45rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label { font-weight: 600; font-size: var(--text-label); }
.opt { font-weight: 400; color: var(--navy-70); }
.field input, .field textarea { width: 100%; min-height: 3rem; padding: .625rem 1rem; border: 1px solid var(--navy-50); /* 3.9:1 on white */ border-radius: var(--r-sm); background: #fff; transition: border-color .2s, box-shadow .2s; }
.field textarea { resize: vertical; min-height: 7.5rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--navy-70); }
.field input:hover, .field textarea:hover { border-color: var(--navy); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgb(84 187 190 / .3); }
/* errors stay in the palette: a heavier navy outline and a bold message */
.field input[aria-invalid="true"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.field input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1px var(--navy), 0 0 0 4px rgb(84 187 190 / .3); }
.field-err { font-size: .85rem; font-weight: 700; line-height: 1.35; color: var(--navy); }
.hp { position: absolute; left: -9999px; }
.form .btn { justify-self: start; margin-top: .3rem; }
.form-status { min-height: 1.4rem; font-weight: 600; font-size: .95rem; }
.form-status:empty { position: absolute; } /* no blank row under the button until there is a message (stays a live region) */
.form-status.ok { color: var(--navy); }
.form-status.err { color: var(--navy); }

/* ---------- footer ---------- */
/* the brand's light blue (teal) with navy text, as every teal surface (white on teal is 2.2:1); the logo in its on-teal colours
   (us-on-teal.svg: RE navy, START white, the same mapping as lineready-logo-on-teal.svg) */
.footer { background: var(--teal); color: var(--navy-70); padding: 2.75rem 0 2.25rem; font-size: .93rem; }
.footer-row { display: grid; grid-template-columns: auto 1fr; gap: 1.75rem 3rem; align-items: center; }
.footer-brand { display: flex; align-items: center; gap: 1.25rem; }
.footer-brand img { width: 128px; }
.footer-brand p strong { color: var(--navy); }
.footer-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; justify-content: flex-end; }
.footer-nav a { font-weight: 600; color: var(--navy); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .3em; text-decoration-thickness: 2px; transition: text-decoration-color .2s; }
@media (hover: hover) { .footer-nav a:hover { text-decoration-color: currentColor; } }
/* Instagram: a navy ring with the icon, 44px to tap; filled navy on hover */
.footer-nav .footer-ig { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; margin-block: -.5rem; border: 1.5px solid var(--navy); border-radius: 50%; text-decoration: none; transition: background-color var(--dur-1), color var(--dur-1); }
.footer-ig .ic { width: 1.2rem; height: 1.2rem; }
@media (hover: hover) { .footer-nav .footer-ig:hover { background: var(--navy); color: var(--teal); } }
.footer-legal { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid var(--navy-15); font-size: .82rem; color: var(--navy-70); }
.footer-legal .hashes { display: block; margin-top: .35rem; color: var(--navy); }

/* ---------- WhatsApp: floating chat button ---------- */
/* bottom right, in WhatsApp's green with its white glyph, clear of the phone's home bar; under the header (z-index), so the open
   menu covers it. It comes in once the hero has (transform and opacity only); hover grows it with `scale`, so the two never clash */
.wa-fab { position: fixed; right: max(1.25rem, env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 40; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--whatsapp); color: #fff; box-shadow: 0 6px 18px -4px rgb(0 0 49 / .45); transition: scale var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); animation: wa-in .4s var(--ease) 1.2s backwards; }
.wa-fab .ic { width: 1.85rem; height: 1.85rem; }
@media (hover: hover) { .wa-fab:hover { scale: 1.06; box-shadow: 0 10px 24px -6px rgb(0 0 49 / .5); } }
.wa-fab:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--navy); } /* white and navy: it shows on the navy and on the white sections */
.site-header.menu-open ~ .wa-fab { visibility: hidden; }
@keyframes wa-in { from { opacity: 0; transform: translateY(12px) scale(.9); } }

/* ---------- LINE READY: title, tool covers ---------- */
.lr-title { margin-top: 1.25rem; max-width: 20ch; }
.pcover { position: relative; margin: .75rem .75rem 0; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 16 / 10; background: var(--plate); }
.pcover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-1) var(--ease); }
@media (hover: hover) { .pcard:hover .pcover img { transform: scale(1.03); } }

/* story photo: one image (a RESAFE part being machined), 16:9 beside the text, below it on phones */
.story-photo { border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9; }
.story-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- render what is on screen first ---------- */
/* Each section below the hero is laid out and painted only when it comes near the screen (content-visibility), so the first
   frame does not wait for the whole page's text. main.js turns a section on 1.5 screens ahead (.cv-on), in time for its images
   to load, and turns them all on before an in-page link scrolls (.cv-all), so the jump lands exactly. --cv-h is the space held
   until then: the content height (padding excluded) measured at 375 and 1440px; the browser keeps the real size once a section has been shown */
:is(#lineready, #explore, #tools, #story, .quote, #brands, #contact, .footer) { content-visibility: auto; contain-intrinsic-size: auto var(--cv-h); }
:is(#lineready, #explore, #tools, #story, .quote, #brands, #contact, .footer).cv-on, .cv-all :is(#lineready, #explore, #tools, #story, .quote, #brands, #contact, .footer) { content-visibility: visible; }
#lineready { --cv-h: 1096px; }
#explore { --cv-h: 746px; }
#tools { --cv-h: 2316px; }
#story { --cv-h: 793px; }
.quote { --cv-h: 375px; }
#brands { --cv-h: 1056px; }
#contact { --cv-h: 1121px; }
.footer { --cv-h: 320px; }
@media (min-width: 901px) {
  #lineready { --cv-h: 1084px; }
  #explore { --cv-h: 679px; }
  #tools { --cv-h: 914px; }
  #story { --cv-h: 502px; }
  .quote { --cv-h: 485px; }
  #brands { --cv-h: 544px; }
  #contact { --cv-h: 599px; }
  .footer { --cv-h: 135px; }
}

/* ---------- reveal ---------- */
/* a short lift (16px) and a quick stagger (60% of each --d): blocks are there as soon as they scroll in, without a wait */
.js .reveal { --rd: calc(var(--d, 0s) * .6); opacity: 0; transform: translateY(16px); transition: opacity var(--dur-2) var(--ease) var(--rd), transform var(--dur-2) var(--ease) var(--rd); }
.js .reveal.in { opacity: 1; transform: none; }
/* .reveal replaces the transition list: cards and buttons that also react to hover/press get theirs back */
.js :is(.pcard, .bcard).reveal { transition: opacity var(--dur-2) var(--ease) var(--rd), transform var(--dur-2) var(--ease) var(--rd), translate var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.js .btn.reveal { transition: opacity var(--dur-2) var(--ease) var(--rd), transform var(--dur-2) var(--ease) var(--rd), translate var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
/* the hero (LCP area) animates in with CSS on first paint instead of waiting for deferred JS */
.js .hero .reveal { opacity: 1; transform: none; transition: none; animation: rise-in var(--dur-3) var(--ease) var(--d, 0s) both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(20px); } }
.intro .hero .reveal { animation-delay: calc(.62s + var(--d, 0s)); }
/* the caret at the end of the headline, the signature of the Restart sites. When main.js types the line it brings its own caret
   (.tw-caret); this one is the no-JS version. The negative margin gives its width back, so the line never grows or wraps. It shows
   once the lead-in has landed, blinks six times and leaves. Opacity only; with reduced motion it never shows. */
.ht-type:not(.is-typed)::after {
  content: ""; display: inline-block; width: .055em; height: .88em; margin: 0 -.06em 0 .005em; vertical-align: -.105em;
  background: var(--teal); opacity: 0;
  animation: caret .78s step-end .7s 6;
}
.intro .ht-type:not(.is-typed)::after { animation-delay: 1.32s; }
@keyframes caret { from { opacity: 1; } 50%, to { opacity: 0; } }

/* ---------- responsive ---------- */
/* three cards in a row: kicker, title, text and checklist share the same rows, so they line up across the cards */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1081px) {
    .cards { row-gap: 0; }
    .pcard { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 0; }
    .pbody { display: grid; grid-template-rows: subgrid; grid-row: span 5; align-items: start; }
    .pnote { align-self: end; }
  }
}

/* Brand intro below 1100px: the element keeps the banner's size and place; only the logo moves, into the navy right of the point where the
   shapes meet, as large as fits between the leaf below it and the screen edge (its corner at x 420, 380 or 335 of the 1600x900 frame) */
@media (max-width: 1100px) {
  .id-logo { transform-box: fill-box; transform-origin: 0 0; transform: translate(-160px, 3px) scale(.952); }
}
@media (max-width: 900px) {
  .id-logo { transform: translate(-200px, 3px) scale(.524); }
}
/* portrait screens: the banner frame as tall as the screen, its left 150 units off screen, so the shapes still bleed off the top and left */
@media (max-width: 1100px) and (orientation: portrait) {
  .hero-id { width: auto; height: 100vh; height: 100svh; left: -16.667vh; left: -16.667svh; }
  .id-logo { transform: translate(-245px, 3px) scale(.232); }
}
@media (max-width: 1100px) and (orientation: portrait) and (min-aspect-ratio: 7 / 10) {
  .id-logo { transform: translate(-222px, 3px) scale(.476); } /* tablets: the wider screen takes a larger logo, still clear of the leaf */
}
/* landscape screens narrower than 16:9 (most laptops): the frame as tall as the hero, so the leaf leaves at the bottom exactly where the
   banner crops it (a width-fitted frame would end above the hero's bottom and show the rest of the leaf); the right of the frame is cut */
@media (min-width: 901px) and (orientation: landscape) and (max-aspect-ratio: 16 / 9) {
  .hero-id { width: auto; height: 100%; }
  .id-logo { transform: none; }
}
@media (min-width: 901px) and (orientation: landscape) and (max-aspect-ratio: 1599 / 1000) {
  .id-logo { transform-box: fill-box; transform-origin: 0 0; transform: translate(-160px, 3px) scale(.8); } /* corner at x 420, ends at 1092: on screen down to 5:4, clear of the leaf */
}
/* short landscape phones: the frame as tall as the screen, the logo back in its banner place */
@media (orientation: landscape) and (max-height: 480px) {
  .hero-id { width: auto; height: 100vh; height: 100svh; }
  .id-logo { transform: none; }
}

/* five logo cards in one row */
@media (min-width: 1081px) {
  .bgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bgrid .bcard, .bgrid .bcard:nth-child(4), .bgrid .bcard:nth-child(5) { grid-column: auto; }
}

@media (max-width: 1080px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards .pcard:last-child { grid-column: 1 / -1; flex-direction: row; }
  .cards .pcard:last-child .pcover { flex: 0 0 46%; aspect-ratio: auto; margin: .75rem 0 .75rem .75rem; }
  .cards .pcard:last-child .pbody { flex: 1; padding-top: 1.6rem; }
}
/* there the stripper's photo fills a tall column: framed on its die block, the left part of the tool */
@media (min-width: 641px) and (max-width: 1080px) { #tool-stripper .pcover img { object-position: 30% 50%; } }

/* header: below 1024px (landscape phones, small tablets) the menu button takes over from the nav row */
@media (max-width: 1023px) {
  .header-row { gap: .75rem; }
  .quote-id { display: none; } /* no room beside the text: it leaves rather than sit under it */
  .brand { margin-right: auto; }
  .site-header.menu-open::before { z-index: 56; opacity: 1; background: var(--surface); box-shadow: none; } /* on short screens the links scroll under this bar, not under the logo */
  .menu-btn { display: inline-flex; flex: none; flex-direction: column; justify-content: center; gap: 6px; width: 2.9rem; height: 2.9rem; border: 0; background: transparent; padding: 0 .7rem; z-index: 60; }
  .menu-btn span { display: block; height: 2px; background: var(--navy); border-radius: 2px; transition: transform var(--dur-1) var(--ease), opacity .2s; }
  .menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .nav {
    position: fixed; inset: 0; z-index: 55; background: var(--surface); flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.4rem;
    padding: 5rem var(--gutter) 2rem; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--dur-1), transform var(--dur-1) var(--ease), visibility var(--dur-1);
  }
  .nav.open { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-1), transform var(--dur-1) var(--ease), visibility 0s; } /* visible at once, so focus can move in */
  /* short screens (phones in landscape): scroll instead of pushing the CTA out of reach; auto margins keep it centered when it fits */
  .nav { justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; }
  .nav > :first-child { margin-top: auto; }
  .nav > :last-child { margin-bottom: auto; }
  .nav a:not(.btn) { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; }
  .nav-cta { margin-top: 1rem; min-height: 3rem; padding-inline: 1.5rem; font-size: 1rem; } /* full-size button next to the large links */
}

@media (max-width: 900px) {
  :root { --header-h: 64px; }

  .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero-copy { display: contents; }
  .hero-copy .eyebrow { order: 1; }
  .hero h1 { order: 3; }
  .hero { min-height: 0; padding-top: calc(var(--header-h) + 1rem); padding-bottom: 2.25rem; } /* with the visual's .5rem: the same 44px above and below the art */
  .hero-visual { order: 6; justify-self: auto; width: 100%; margin: 2.25rem auto 0; padding-block: .5rem; }
  .art-wrap { width: min(90%, 420px); --float: -9px; } /* centred, with air on both sides and below */
  .kit-wrap { width: min(100%, 480px); --float: -9px; }
  .hero h1 { margin-top: .9rem; }
  .cta-row { margin-top: 1.5rem; gap: .6rem 1.6rem; }
  .story-grid { grid-template-columns: 1fr; }
  .explore-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "copy" "visual" "list"; row-gap: 1.25rem; }
  .hs-list { margin-top: 0; }
  .hs-list { max-width: none; }
  .cta-row { order: 4; }
  .contact-grid { grid-template-columns: 1fr; }

  .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bgrid .bcard, .bgrid .bcard:nth-child(4), .bgrid .bcard:nth-child(5) { grid-column: auto; }
  .bgrid .bcard:nth-child(5) { grid-column: 1 / -1; }
  .footer-row { grid-template-columns: 1fr; }
  .footer { padding-bottom: 5.5rem; } /* the last lines end above the WhatsApp button */
  .wa-fab { right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); width: 3.25rem; height: 3.25rem; }
  .wa-fab .ic { width: 1.7rem; height: 1.7rem; }
  .footer-nav { justify-content: flex-start; }
  .footer-nav a { padding-block: .65rem; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .cards { grid-template-columns: 1fr; }
  .cards .pcard:last-child { flex-direction: column; grid-column: auto; }
  .cards .pcard:last-child .pcover { flex: none; aspect-ratio: 16 / 10; margin: .75rem .75rem 0; }
  .cards .pcard:last-child .pbody { padding-top: .75rem; } /* same spacing as the other stacked cards */
  .footer-brand { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .field-row { grid-template-columns: 1fr; }
  .bgrid { grid-template-columns: 1fr; }
  .bgrid .bcard:nth-child(5) { grid-column: auto; }
  .cta-row .btn { flex: 1 1 100%; }
  .cta-row .link-arrow { margin-inline: auto; }
  /* long labels wrap instead of running out of the container */
  .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: .6rem; }
  .quote .btn { align-self: stretch; }
  .hs-label { font-size: .72rem; padding: .32rem .6rem; }
  .hs-btn::before { inset: -.75rem -.5rem; } /* the smaller pill keeps a ~44px touch target */
  .form .btn { justify-self: stretch; }
}

@media (max-width: 640px) {
  .case-duo { grid-template-columns: 1fr; max-width: 460px; row-gap: 2.5rem; }
  .hero-title { font-size: clamp(2.35rem, 11.4vw, 3.25rem); } /* "Innovation" / "starts here" on two lines, never cut */
  .ht-line { font-size: .56em; }
}

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