/* ==========================================================================
   Arrow Electronics
   Flat technical style: hairline rules, monospace data labels, no gradients,
   no glow, no glassmorphism. Spacing runs on a 4/8px rhythm.
   ========================================================================== */

:root {
  /* --- Light zone: hero, services, products, industries, why, FAQ --- */
  --bg:        #FAFAF8;
  --panel:     #FFFFFF;
  --line:      #E4E6E4;
  --line-firm: #D5D8D5;   /* derived: hairline that stays visible over white panels */
  --text:      #182C3A;
  --text-2:    #5C6B75;
  --text-3:    #8B979E;   /* decorative / large type only, see contrast note below */

  /* --- Dark zone: header, contact section, footer --- */
  --dk-bg:     #0B0F14;
  --dk-panel:  #141A21;
  --dk-line:   #232B34;
  --dk-text:   #E8ECF1;
  --dk-text-2: #8D97A3;

  /* --- Shared accents --- */
  --accent:    #3D8BFF;   /* CTAs, logo, card top rules, accents on dark */
  --accent-dk: #1F6FE0;   /* small accent text on light backgrounds */
  --accent-2:  #00B8B0;   /* logo detail, product tag bullets */
  --ok:        #2E9E5B;   /* in-stock indicator */
  --ok-txt:    #1F7A45;   /* derived: #2E9E5B is 3.26:1 on light, under AA for small text */
  --danger:    #A93226;
  --danger-dk: #F4796B;   /* derived: #A93226 is 2.66:1 on the dark panel */

  /* Fonts.
     'Source Sans 3' is the current name for Source Sans Pro on Google Fonts;
     it sits next in the stack so the body face survives if Google ever stops
     serving the legacy family name. */
  --font-head: 'Hind', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sub:  'Neuton', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans Pro', 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Spacing scale (4/8 rhythm) */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 48px; --s-8: 64px;

  --wrap: 1200px;
  --gutter: 24px;
  --section-y: clamp(64px, 8vw, 112px);

  /* Motion tokens — one rhythm across the whole page */
  --dur: 200ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* z-index scale */
  --z-base: 0; --z-raised: 10; --z-overlay: 100;
}

/* NOTE ON CONTRAST
   Three palette colours fail WCAG AA as small text, so each has a derived
   companion used wherever real copy sits on a light background:

     --accent    #3D8BFF  3.17:1 on --bg  ->  --accent-dk  #1F6FE0  4.56:1
     --ok        #2E9E5B  3.26:1 on --bg  ->  --ok-txt     #1F7A45  5.12:1
     --danger    #A93226  2.66:1 on dark  ->  --danger-dk  #F4796B  6.49:1

   The plain values still drive fills, borders, dots, large display numbers, and
   any accent text sitting on the dark zones, where they clear AA comfortably
   (--accent reaches 5.71:1 on #0B0F14).

   --text-3 (#8B979E) sits at ~2.9:1 on the page background and is used only for
   large display type and non-essential decoration. Anything a visitor needs to
   read uses --text-2 (~5.3:1) or darker. */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* height:auto is required, or the width/height HTML attributes win over
   aspect-ratio and every image renders at its intrinsic height. */
img { max-width: 100%; height: auto; display: block; }

/* Hind carries taller ascenders than Ubuntu did, so headings get slightly
   looser leading and less negative tracking. `balance` keeps multi-line
   headings from dropping a single orphaned word onto the last line. */
h1, h2, h3 {
  font-family: var(--font-head);
  color: var(--text);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 var(--s-3);
  letter-spacing: -0.018em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.05rem, 4.6vw, 3.35rem); }
h2 { font-size: clamp(1.65rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.06rem, 1.6vw, 1.22rem); font-weight: 600; letter-spacing: -0.008em; }

p { text-wrap: pretty; }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-dk); text-decoration: none; }
a:hover, a:focus-visible { color: var(--accent-dk); text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

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

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--panel); color: var(--text);
  font-family: var(--font-mono); font-size: 0.85rem;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--text); z-index: var(--z-overlay);
}
.skip-link:focus { left: var(--s-3); top: var(--s-3); }

/* --------------------------------------------------------------------------
   Shared elements
   -------------------------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dk);
  margin: 0 0 var(--s-4);
}

.idx {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--accent-dk);
  border: 1px solid var(--line-firm);
  padding: 3px 7px;
  flex: none;
  font-variant-numeric: tabular-nums;
}

.dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  margin-right: var(--s-2);
  flex: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-head);
  font-weight: 700;
  /* 19.2px/700 clears WCAG's 18.66px bold "large text" threshold, where white
     on #3D8BFF (3.31:1) satisfies the 3:1 requirement. Do not drop below this
     size without darkening the background to --accent-dk. */
  font-size: 1.2rem;
  line-height: 1.2;
  min-height: 52px;
  padding: 14px 32px;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
  text-decoration: none;
}
.btn--primary:hover {
  background: var(--accent-dk);
  border-color: var(--accent-dk);
  color: #FFFFFF;
  text-decoration: none;
}
.btn--primary:active { transform: scale(0.985); }

/* The block asks for variant="glow", which the supplied shadcn button.tsx does
   not define (its variants stop at default/destructive/outline/secondary/ghost/
   link). Implemented here as a bordered button carrying a brand-tinted ring. */
.btn--glow {
  background: var(--panel);
  border-color: var(--line-firm);
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(61, 139, 255, 0.12);
}
.btn--glow:hover {
  border-color: var(--accent);
  color: var(--accent-dk);
  text-decoration: none;
  box-shadow: 0 0 0 4px rgba(61, 139, 255, 0.18);
}
.btn--glow:active { transform: scale(0.985); }
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.section { padding: var(--section-y) 0; }
.section--alt { background: var(--panel); border-block: 1px solid var(--line); }

.section__head { max-width: 720px; margin-bottom: clamp(36px, 4.5vw, 60px); }
/* Neuton runs small for its point size, so the serif passages carry a bump. */
.section__intro {
  font-family: var(--font-sub);
  font-size: clamp(1.14rem, 1.65vw, 1.3rem);
  color: var(--text-2);
  line-height: 1.66;
  max-width: 62ch;
}

.grid { display: grid; gap: var(--s-5); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Entrance animations for the hero block. These run on load rather than on
   scroll, so they are plain CSS animations with `forwards` — under
   prefers-reduced-motion the duration collapses and each element lands at its
   final state immediately. */
@keyframes appear {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: none; }
}
@keyframes appear-zoom {
  0%   { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
/* fill-mode `both` supplies the hidden start state during the delay and holds
   the end state afterwards. Deliberately NOT `opacity: 0` + `forwards`: that
   leaves the hero permanently blank anywhere the animation fails to run. */
.anim-appear { animation: appear 0.5s var(--ease) both; }
.anim-appear-zoom { animation: appear-zoom 0.5s var(--ease) both; }

.delay-100  { animation-delay: 100ms; }
.delay-300  { animation-delay: 300ms; }
.delay-700  { animation-delay: 700ms; }
.delay-1000 { animation-delay: 1000ms; }

/* Scroll reveal. Only active once JS marks the document, so a no-JS visitor
   sees everything. Respects prefers-reduced-motion further down. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Brand mark (this page has no navigation bar)
   -------------------------------------------------------------------------- */

.brandmark {
  background: var(--panel);
  border-bottom: 1px solid var(--line-firm);
}
.brandmark__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 104px;
  flex-wrap: wrap;
}
/* --------------------------------------------------------------------------
   Logo lockup
   The chevron bands are hollow: a wide gradient stroke with a narrower
   surface-coloured stroke laid over it, so --logo-knockout must always match
   whatever the logo is sitting on.
   The artwork's wordmark blue (#1656B8) measures 2.3:1 on #0B0F14, so the dark
   zones use a knockout variant: near-white wordmark, brightened trace gradient.
   -------------------------------------------------------------------------- */

.logo {
  --logo-a: #20BFC9;
  --logo-b: #1E86D6;
  --logo-c: #1B5AC0;
  --logo-node: #14CEB2;
  --logo-text: #1656B8;
  --logo-knockout: var(--bg);
  font-family: var(--font-head);
}
.zone-dark .logo {
  --logo-a: #2ED9C0;
  --logo-b: #35A6F5;
  --logo-c: #3D8BFF;
  --logo-node: #14CEB2;
  --logo-text: var(--dk-text);
  --logo-knockout: var(--dk-bg);
}

.logo__stop-a { stop-color: var(--logo-a); }
.logo__stop-b { stop-color: var(--logo-b); }
.logo__stop-c { stop-color: var(--logo-c); }
.logo__knockout { stroke: var(--logo-knockout); }
.logo__node { fill: var(--logo-node); }
.logo__text { fill: var(--logo-text); }

/* Height drives the size; width follows the lockup's 2.5:1 ratio. */
.brandmark__logo {
  display: block;
  flex: none;
  /* Taller than the previous lockup: the mark packs eight nodes and seven
     traces, which need the extra pixels to stay separable. */
  height: clamp(52px, 5.6vw, 76px);
  width: auto;
  max-width: 100%;
}
.brandmark__meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  border-left: 1px solid var(--line-firm);
  padding-left: var(--s-4);
  text-align: right;
}
.zone-dark .brandmark__meta { border-left-color: var(--dk-line); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: clamp(56px, 7vw, 100px) 0 var(--section-y);
  overflow: hidden;
}

/* Centred stack: eyebrow / title / description / actions / mockup / stats. */
.hero__inner {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-5);
}

/* --- Eyebrow. Flat line of type, no pill, no border, no fill. --- */

.hero-badge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-4);
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero-badge__text { color: var(--text-2); }
.hero-badge__action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent-dk);
  font-weight: 700;
  text-decoration: none;
}
.hero-badge__action:hover { text-decoration: underline; }
.hero-badge__action svg { transition: transform var(--dur) var(--ease); }
.hero-badge__action:hover svg { transform: translateX(2px); }

/* --- Title: foreground -> muted-foreground gradient, clipped to the text --- */

.hero__title {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(2.25rem, 5vw, 4.05rem);
  line-height: 1.08;
  letter-spacing: -0.032em;
  word-spacing: -0.02em;
  color: var(--text);
  /* Evens out the line lengths instead of leaving "fast." alone on line three. */
  text-wrap: balance;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero__title {
    background-image: linear-gradient(to right, var(--text) 35%, var(--text-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
/* Clipped text disappears under Windows High Contrast; restore a solid colour. */
@media (forced-colors: active) {
  .hero__title { color: CanvasText; background-image: none; }
}

.hero__desc {
  /* Centred copy reads better nearer 50 characters than 58. */
  max-width: 50ch;
  margin: 0;
  font-family: var(--font-sub);
  font-size: clamp(1.14rem, 1.75vw, 1.34rem);
  line-height: 1.6;
  letter-spacing: 0.004em;
  color: var(--text-2);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-4);
}

/* --- Mockup frame + glow --- */

.hero__media {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin-top: var(--s-5);
}

/* MockupFrame, size="small" */
.mockup-frame {
  position: relative;
  z-index: var(--z-raised);
  padding: var(--s-2);
  border-radius: 16px;
  background: rgba(24, 44, 58, 0.05);
}
/* Mockup, type="responsive" */
.mockup {
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid rgba(24, 44, 58, 0.08);
  border-top-color: rgba(24, 44, 58, 0.16);
  /* The block calls for shadow-2xl; softened to stay closer to the flat house
     style while still lifting the mockup off the page. */
  box-shadow: 0 18px 40px -24px rgba(11, 15, 20, 0.45);
}
.mockup img { width: 100%; height: auto; aspect-ratio: 1248 / 765; object-fit: cover; }

/* Glow: two stacked brand radials, teal over blue, exactly as the block does */
.glow {
  position: absolute;
  width: 100%;
  pointer-events: none;
  z-index: var(--z-base);
}
.glow--top { top: 0; }
.glow::before,
.glow::after {
  content: "";
  position: absolute;
  left: 50%;
  border-radius: 50%;
}
/* The block's alphas (.5 teal / .3 blue) are tuned for a dark surface. Over
   #FAFAF8 they read as a flat cyan wash, so they are halved here. */
.glow::before {
  height: 256px;
  width: 60%;
  transform: translateX(-50%) scale(2.5);
  background: radial-gradient(ellipse at center,
    rgba(0, 184, 176, 0.22) 10%, rgba(0, 184, 176, 0) 60%);
}
.glow::after {
  height: 128px;
  width: 40%;
  transform: translateX(-50%) scale(2);
  background: radial-gradient(ellipse at center,
    rgba(61, 139, 255, 0.16) 10%, rgba(0, 184, 176, 0) 60%);
}
/* Restore full strength if this hero is ever dropped into a dark zone. */
.zone-dark .glow::before {
  background: radial-gradient(ellipse at center,
    rgba(0, 184, 176, 0.5) 10%, rgba(0, 184, 176, 0) 60%);
}
.zone-dark .glow::after {
  background: radial-gradient(ellipse at center,
    rgba(61, 139, 255, 0.3) 10%, rgba(0, 184, 176, 0) 60%);
}

/* --- Stat strip (kept from the previous hero, relaid as a row) --- */

.hero-stats {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: var(--s-6) 0 0;
  width: 100%;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
  text-align: left;
}
.hero-stats li { border-left: 2px solid var(--line); padding-left: var(--s-4); }
.hero-stats__num {
  display: flex;
  align-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.15;
  color: var(--accent-dk);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.hero-stats__num--stock { color: var(--ok-txt); font-size: 1.3rem; }
.hero-stats__label {
  display: block;
  font-size: 0.9rem;
  color: var(--text-2);
  margin-top: var(--s-1);
}
.hero-stats__note {
  width: 100%;
  margin: var(--s-4) 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-2);
  text-align: left;
}

/* --------------------------------------------------------------------------
   Service cards — squarer proportions than a tall photo card
   -------------------------------------------------------------------------- */

.card {
  background: var(--panel);
  border: 1px solid var(--line-firm);
  border-top: 2px solid var(--accent);
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur) var(--ease);
}
.card:hover { border-color: var(--text-3); border-top-color: var(--accent-dk); }

.card__media {
  position: relative;
  border-bottom: 1px solid var(--line-firm);
  background: #EFEFEC;
}
.card__media img {
  width: 100%;
  height: auto;
  /* A squat image plus a compact body keeps the whole card near-square
     (roughly 0.85 width:height at desktop) instead of a tall photo panel. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.card__idx {
  position: absolute;
  left: 0; bottom: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: #FFFFFF;
  background: var(--text);
  padding: 5px 10px;
  font-variant-numeric: tabular-nums;
}

.card__body {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card__body h3 { margin-bottom: var(--s-2); }
.card__body > p { font-size: 1rem; line-height: 1.55; }

.card__label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 500;
  margin: auto 0 var(--s-3);   /* pushes the tag row to the card foot */
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
/* Inline chips rather than a stacked list — keeps the card short and square. */
.taglist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.taglist li {
  display: inline-flex;
  align-items: center;
  max-width: 100%;   /* long part names must wrap inside the chip, not past it */
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text);
  border: 1px solid var(--line-firm);
  padding: 4px 9px;
}
.taglist li::before {
  content: "";
  display: block;
  width: 5px; height: 5px;
  background: var(--accent-2);
  flex: none;
}

/* --------------------------------------------------------------------------
   Products table
   -------------------------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line-firm);
  background: var(--panel);
  -webkit-overflow-scrolling: touch;
}
.ptable {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 0.93rem;
}
.ptable th, .ptable td {
  text-align: left;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.ptable thead th {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--bg);
  border-bottom: 1px solid var(--line-firm);
}
.ptable tbody th {
  font-family: var(--font-head);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
.ptable tbody td { color: var(--text-2); }
.ptable tbody tr:last-child th,
.ptable tbody tr:last-child td { border-bottom: 0; }

.pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-2);
  border: 1px solid var(--line-firm);
  padding: 4px 10px;
  white-space: nowrap;
}
.pill--stock { color: var(--ok-txt); border-color: #B9DCC6; font-weight: 500; }

.table-note {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   Industry tiles
   -------------------------------------------------------------------------- */

.tile {
  border: 1px solid var(--line-firm);
  background: var(--panel);
  transition: border-color var(--dur) var(--ease);
}
.tile:hover { border-color: var(--text-3); }
.tile img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-bottom: 1px solid var(--line-firm);
}
.tile__caption { padding: var(--s-4) var(--s-5); }
.tile__caption h3 { margin: 0; }

/* --------------------------------------------------------------------------
   Why Arrow
   -------------------------------------------------------------------------- */

.reasons {
  list-style: none;
  counter-reset: reason;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s-8);
  max-width: 1000px;
}
.reasons li {
  counter-increment: reason;
  padding: var(--s-6) 0;
  border-top: 1px solid var(--line);
}
.reasons li::before {
  content: counter(reason, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--accent-dk);
  margin-bottom: var(--s-2);
  font-variant-numeric: tabular-nums;
}
.reasons li h3 { margin-bottom: var(--s-2); }
.reasons li p { font-size: 1rem; margin: 0; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq {
  border-top: 1px solid var(--line-firm);
  max-width: 880px;
}
.faq__item { border-bottom: 1px solid var(--line-firm); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-5) 44px var(--s-5) 0;
  position: relative;
  min-height: 44px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { display: inline; margin: 0; }

.faq__item summary::after {
  content: "";
  position: absolute;
  right: 8px; top: 50%;
  width: 11px; height: 11px;
  border-right: 2px solid var(--accent-dk);
  border-bottom: 2px solid var(--accent-dk);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.faq__item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__item summary:hover h3 { color: var(--accent-dk); }

.faq__body {
  padding: 0 var(--s-8) var(--s-5) 0;
  max-width: 70ch;
}
.faq__body p { font-size: 1.02rem; margin: 0; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  background: var(--bg);
  border: 1px solid var(--line-firm);
  padding: clamp(24px, 3vw, 36px);
}
.form__legend {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.field { display: flex; flex-direction: column; min-width: 0; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--text);
  margin-bottom: var(--s-2);
}
.field .opt {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-left: var(--s-1);
}
.field .req { color: var(--accent); }

.field input,
.field textarea {
  font-family: var(--font-mono);
  font-size: 1rem;   /* 16px stops iOS zooming the page on focus */
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line-firm);
  border-radius: 2px;
  padding: 13px 14px;
  min-height: 48px;  /* comfortable touch target */
  width: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { resize: vertical; min-height: 176px; line-height: 1.6; }
.field input:focus,
.field textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: inset 0 0 0 1px var(--accent);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-3); }

.field--invalid input,
.field--invalid textarea { border-color: var(--danger); }
.field--invalid input:focus,
.field--invalid textarea:focus { box-shadow: inset 0 0 0 1px var(--danger); }

.field__hint {
  font-size: 0.9rem;
  color: var(--text-2);
  margin: var(--s-2) 0 0;
}
.field__error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--danger);
  margin: var(--s-2) 0 0;
}
.field__error:empty { display: none; }
/* Not colour alone — errors carry a marker glyph too */
.field__error::before { content: "!"; font-family: var(--font-mono); }

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-5);
  border-top: 1px solid var(--line);
  padding-top: var(--s-5);
}
.form__status { font-size: 0.92rem; margin: 0; color: var(--text-2); }
.form__status.is-ok { color: var(--ok); font-weight: 700; }
.form__status.is-error { color: var(--danger); font-weight: 700; }

.contact__info {
  background: var(--panel);
  border: 1px solid var(--line-firm);
  padding: clamp(24px, 3vw, 32px);
}
.contact__info h3 { margin-bottom: var(--s-1); font-weight: 700; }
.contact__sub {
  font-family: var(--font-sub);
  font-style: italic;
  color: var(--text-2);
  font-size: 1.06rem;
  margin-bottom: var(--s-5);
}
.infolist { margin: 0; }
.infolist dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 500;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.infolist dd {
  margin: var(--s-1) 0 var(--s-4);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.contact__note {
  margin-top: var(--s-1);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: 0.94rem;
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--panel);
  border-top: 1px solid var(--line-firm);
  padding-top: clamp(44px, 5vw, 68px);
  font-size: 0.93rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: var(--s-6) var(--s-7);
  padding-bottom: var(--s-6);
}
.footer__logo {
  display: block;
  height: 68px;
  width: auto;
  max-width: 100%;
  margin-bottom: var(--s-4);
}
.footer__tag {
  font-family: var(--font-sub);
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 42ch;
}
.footer__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 500;
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}
.footer p { margin: 0 0 var(--s-1); }
.footer__grid div:not(.footer__brand) p:not(.footer__label) {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.footer__legal {
  border-top: 1px solid var(--line);
  padding-top: var(--s-5);
  padding-bottom: var(--s-6);
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}
.footer__legal p { margin: 0; }

/* ==========================================================================
   Dark zones — header, contact section, footer
   Everything below re-points the same components at the dark tokens. Layout,
   spacing, and type are untouched.
   ========================================================================== */

.zone-dark {
  background: var(--dk-bg);
  color: var(--dk-text-2);
  border-color: var(--dk-line);
}

.zone-dark h1,
.zone-dark h2,
.zone-dark h3 { color: var(--dk-text); }

/* Accent text is legible at full strength here (5.71:1 on #0B0F14), so the
   dark zones use --accent rather than the --accent-dk light-background variant. */
.zone-dark .eyebrow,
.zone-dark .idx { color: var(--accent); }
.zone-dark .idx { border-color: var(--dk-line); }

.zone-dark .section__intro,
.zone-dark p { color: var(--dk-text-2); }

.zone-dark a { color: var(--accent); }

/* --- Header --- */

.brandmark.zone-dark { border-bottom: 1px solid var(--dk-line); }
.zone-dark .brandmark__meta { color: var(--dk-text-2); }
.zone-dark .brandmark__meta { border-left-color: var(--dk-line); }

/* --- Contact section --- */

.section.zone-dark { border-block: 1px solid var(--dk-line); }

.zone-dark .form {
  background: var(--dk-panel);
  border-color: var(--dk-line);
}
.zone-dark .form__legend {
  color: var(--dk-text-2);
  border-bottom-color: var(--dk-line);
}
.zone-dark .field label { color: var(--dk-text); }
.zone-dark .field .opt { color: var(--dk-text-2); }

.zone-dark .field input,
.zone-dark .field textarea {
  background: var(--dk-bg);
  border-color: var(--dk-line);
  color: var(--dk-text);
}
.zone-dark .field input::placeholder,
.zone-dark .field textarea::placeholder { color: var(--dk-text-2); }
.zone-dark .field input:focus,
.zone-dark .field textarea:focus { border-color: var(--accent); }

.zone-dark .field__hint { color: var(--dk-text-2); }
.zone-dark .field__error { color: var(--danger-dk); }
.zone-dark .field--invalid input,
.zone-dark .field--invalid textarea { border-color: var(--danger-dk); }
.zone-dark .field--invalid input:focus,
.zone-dark .field--invalid textarea:focus { box-shadow: inset 0 0 0 1px var(--danger-dk); }

.zone-dark .form__actions { border-top-color: var(--dk-line); }
.zone-dark .form__status { color: var(--dk-text-2); }
.zone-dark .form__status.is-ok { color: var(--ok); }
.zone-dark .form__status.is-error { color: var(--danger-dk); }

.zone-dark .contact__info {
  background: var(--dk-panel);
  border-color: var(--dk-line);
}
.zone-dark .contact__sub { color: var(--dk-text-2); }
.zone-dark .infolist dt {
  color: var(--dk-text-2);
  border-top-color: var(--dk-line);
}
.zone-dark .infolist dd { color: var(--dk-text); }
.zone-dark .contact__note {
  color: var(--dk-text-2);
  border-top-color: var(--dk-line);
}

/* --- Footer --- */

.footer.zone-dark { border-top: 1px solid var(--dk-line); }
.zone-dark .footer__tag { color: var(--dk-text-2); }
.zone-dark .footer__label {
  color: var(--dk-text-2);
  border-bottom-color: var(--dk-line);
}
.zone-dark .footer__grid div:not(.footer__brand) p:not(.footer__label) { color: var(--dk-text-2); }
.zone-dark .footer__legal {
  border-top-color: var(--dk-line);
  color: var(--dk-text-2);
}

/* Focus rings need to stay visible against near-black */
.zone-dark :focus-visible { outline-color: var(--accent); }

/* ==========================================================================
   Breakpoints — 375 / 768 / 1024 / 1440
   ========================================================================== */

@media (max-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact__grid { grid-template-columns: 1fr; }
  .reasons { gap: 0 var(--s-7); }
}

/* The header meta is the first thing to run out of room. Drop the long half
   and keep the city, so the bar stays a single row rather than wrapping. */
@media (max-width: 900px) {
  .brandmark__meta-long { display: none; }
  .brandmark__meta {
    border-left: 0;
    padding-left: var(--s-3);
    letter-spacing: 0.12em;
  }
}

/* Single column below 700px */
@media (max-width: 700px) {
  :root { --gutter: 20px; --section-y: clamp(52px, 11vw, 72px); }
  body { font-size: 16px; }

  .grid--3 { grid-template-columns: 1fr; }
  .reasons { grid-template-columns: 1fr; gap: 0; }
  .reasons li { padding: var(--s-5) 0; }
  .form { grid-template-columns: 1fr; gap: var(--s-4); }
  .footer__grid { grid-template-columns: 1fr; gap: var(--s-5); }

  /* Header: one compact row, logo left, city right. */
  .brandmark__inner {
    min-height: 72px;
    gap: var(--s-3);
    flex-wrap: nowrap;
  }
  .brandmark__logo { height: 46px; }
  .brandmark__meta {
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    padding-left: 0;
    white-space: nowrap;
  }

  .hero { padding-top: clamp(36px, 9vw, 56px); }
  .hero__inner { gap: var(--s-4); }
  .hero__media { margin-top: var(--s-3); }
  /* Full-strength tracking pushes this eyebrow onto three lines at 375px. */
  .hero-badge {
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    gap: var(--s-1) var(--s-3);
  }
  .hero-stats {
    grid-template-columns: 1fr;
    gap: var(--s-4);
    margin-top: var(--s-5);
    padding-top: var(--s-5);
  }

  .section__head { margin-bottom: var(--s-6); }
  .card__media img { aspect-ratio: 16 / 9; }
  .form__actions { flex-direction: column; align-items: stretch; }
  .form__status { text-align: center; }
  .btn { width: 100%; }
  .faq__item summary { padding-block: var(--s-4); }
  .faq__body { padding-right: 0; }
  .footer__legal { flex-direction: column; gap: var(--s-2); }

  /* Tell people the table moves sideways, since the cue is easy to miss. */
  .table-note::before {
    content: "Swipe the table sideways to see every column. ";
    color: var(--accent-dk);
  }
}

@media (max-width: 420px) {
  .card__body { padding: var(--s-4); }
  .ptable th, .ptable td { padding: var(--s-3) var(--s-4); }
  .brandmark__logo { height: 42px; }
  .statpanel, .contact__info { padding: var(--s-4); }
  h1 { letter-spacing: -0.01em; }
}

/* Motion preferences ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;   /* or the hero sits invisible for 1s */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js-reveal .reveal { opacity: 1; transform: none; }
  .glow { display: none; }           /* large soft motion cue, not needed here */
}

/* Print -------------------------------------------------------------------- */

@media print {
  .card__media, .tile img { display: none; }
  body { background: #FFF; font-size: 11pt; }
  .section { padding: 18pt 0; }
}