/* ==========================================================================
   GLORINDA GmbH — Core stylesheet
   Design system tokens are defined once in :root (§ TOKENS) and every rule
   below derives from them. Nothing in this file hard-codes a brand colour.

   Section index
     1  Fonts
     2  Tokens
     3  Reset & base
     4  Typography
     5  Layout primitives
     6  Structural devices (eyebrow, spec rule, rating plate)
     7  Buttons & links
     8  Header + mega-menu          [component: mega-menu]
     9  Hero
    10  Cards & grids
    11  Tables & technical data
    12  Accordion / FAQ
    13  Slider (technologies)
    14  Typing module               [component: typing]
    15  Forms / RFQ                 [component: rfq]
    16  Cookie banner
    17  Footer
    18  Utilities
    19  Motion & reduced motion
    20  Print
   ========================================================================== */

/* --------------------------------------------------------------------------
   1  FONTS
   Self-hosted. No third-party font CDN is used anywhere on this site so that
   no visitor IP is transmitted to a US host on page load (DSGVO/GDPR).
   Europa is the brand face: drop the licensed woff2 files into
   /static/fonts/ and uncomment the two @font-face blocks below — nothing
   else needs to change, because every font reference goes through --g-font.
   -------------------------------------------------------------------------- */

/*
@font-face{
  font-family:"Europa";
  src:url("../fonts/europa-regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Europa";
  src:url("../fonts/europa-bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
*/

@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-latin.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-latin-ext.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --------------------------------------------------------------------------
   2  TOKENS
   -------------------------------------------------------------------------- */

:root{
  /* Master brand */
  --g-primary:      #035C67;  /* Glorinda main teal — used on every page */
  --g-primary-2:    #A7A7A9;  /* Glorinda secondary grey */

  /* Sector colours — each sector pairs its colour WITH --g-primary */
  --g-environment:  #6ABF4B;  /* Environment: water, wastewater, sludge, waste */
  --g-energy:       #F2A81D;  /* Energy: renewable, fossil, storage */
  --g-oilgas:       #F24E29;  /* Oil & Gas */
  --g-foodpharma:   #04B2D9;  /* Food & Pharma */

  /* Supporting palette — occasional use */
  --g-deep:         #077373;
  --g-slate:        #2F3A40;
  --g-charcoal:     #263238;
  --g-light:        #F2F2F2;

  --g-white:        #FFFFFF;

  /* Derived surfaces & rules. Kept as tokens so a theme swap is one edit. */
  --g-surface:        var(--g-white);
  --g-surface-alt:    var(--g-light);
  --g-surface-dark:   var(--g-charcoal);
  --g-surface-dark-2: var(--g-slate);
  --g-ink:            var(--g-charcoal);
  --g-ink-2:          var(--g-slate);
  --g-ink-muted:      #5A666D;               /* 5.6:1 on white — AA body */
  --g-ink-invert:     var(--g-white);
  --g-ink-invert-2:   #C9D1D4;               /* 9.4:1 on charcoal */
  --g-rule:           #DCE0E2;
  --g-rule-strong:    #B9C0C4;
  --g-rule-invert:    rgba(255,255,255,.16);

  /* Sector context. Every sector section re-declares --g-sector locally;
     the default is the master brand teal so nothing is ever un-branded. */
  --g-sector:         var(--g-primary);
  --g-sector-ink:     var(--g-primary);      /* text-safe sector variant     */
  --g-sector-wash:    #EAF1F2;               /* 8% sector tint on white      */

  /* Type */
  --g-font: "Europa","Inter","Helvetica Neue",Arial,sans-serif;
  --g-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --g-fs-eyebrow: .75rem;
  --g-fs-micro:   .8125rem;
  --g-fs-small:   .9375rem;
  --g-fs-body:    1rem;
  --g-fs-lead:    1.1875rem;
  --g-fs-h4:      1.125rem;
  --g-fs-h3:      clamp(1.25rem, .95rem + .9vw, 1.5rem);
  --g-fs-h2:      clamp(1.625rem, 1.15rem + 1.6vw, 2.375rem);
  --g-fs-h1:      clamp(2.125rem, 1.35rem + 2.9vw, 3.5rem);
  --g-fs-display: clamp(2.25rem, 1.35rem + 3.6vw, 4rem);

  --g-lh-tight: 1.12;
  --g-lh-head:  1.2;
  --g-lh-body:  1.62;

  /* Space — 4px rhythm */
  --g-s1: .25rem;  --g-s2: .5rem;   --g-s3: .75rem;  --g-s4: 1rem;
  --g-s5: 1.5rem;  --g-s6: 2rem;    --g-s7: 3rem;    --g-s8: 4rem;
  --g-s9: 6rem;    --g-s10: 8rem;

  --g-section-y:  clamp(3.5rem, 2rem + 5vw, 6rem);
  --g-gutter:     clamp(1.25rem, .6rem + 2.4vw, 3rem);
  --g-container:  78rem;   /* 1248px */
  --g-measure:    68ch;

  --g-radius:   2px;       /* precision, not softness */
  --g-radius-l: 3px;

  --g-dur-1: 150ms;
  --g-dur-2: 220ms;
  --g-dur-3: 300ms;
  --g-ease:      cubic-bezier(.22,.61,.36,1);
  --g-ease-out:  cubic-bezier(0,0,.2,1);

  --g-z-header: 100;
  --g-z-menu:   90;
  --g-z-cookie: 200;
  --g-z-skip:   300;
}

/* Sector context classes. Applied to <body> on sector pages and to any
   section that belongs to a single sector. One sector per section — two
   sector colours never sit side by side as equals. */
.g-sector--environment{ --g-sector:var(--g-environment); --g-sector-ink:#2F7A1B; --g-sector-wash:#F0F8EC; }
.g-sector--energy     { --g-sector:var(--g-energy);      --g-sector-ink:#8A5C00; --g-sector-wash:#FEF6E7; }
.g-sector--oilgas     { --g-sector:var(--g-oilgas);      --g-sector-ink:#B32B0C; --g-sector-wash:#FEF0EC; }
.g-sector--foodpharma { --g-sector:var(--g-foodpharma);  --g-sector-ink:#046B84; --g-sector-wash:#E8F8FC; }
.g-sector--corporate  { --g-sector:var(--g-primary);     --g-sector-ink:var(--g-primary); --g-sector-wash:#EAF1F2; }

/* --------------------------------------------------------------------------
   3  RESET & BASE
   -------------------------------------------------------------------------- */

*,*::before,*::after{ box-sizing:border-box; }
/* Several components use the hidden attribute for progressive enhancement, and
   a class-level display value would otherwise win. */
[hidden]{ display:none!important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--g-font);
  font-size:var(--g-fs-body);
  line-height:var(--g-lh-body);
  color:var(--g-ink);
  background:var(--g-surface);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ max-inline-size:100%; block-size:auto; }
img{ background:var(--g-light); }
svg{ fill:currentColor; flex:none; }
ul,ol{ margin:0; padding:0; }
li{ list-style:none; }
button{ font:inherit; color:inherit; }

:focus-visible{
  outline:3px solid var(--g-primary);
  outline-offset:2px;
  border-radius:1px;
}
.g-on-dark :focus-visible,
.g-hero :focus-visible{ outline-color:var(--g-white); }

::selection{ background:var(--g-primary); color:var(--g-white); }

.g-skip{
  position:absolute; inset-inline-start:var(--g-s4); inset-block-start:-4rem;
  z-index:var(--g-z-skip);
  padding:var(--g-s3) var(--g-s5);
  background:var(--g-primary); color:var(--g-white);
  font-weight:600; text-decoration:none;
  transition:inset-block-start var(--g-dur-1) var(--g-ease);
}
.g-skip:focus{ inset-block-start:var(--g-s4); }

.g-sr{
  position:absolute!important; inline-size:1px; block-size:1px;
  padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* --------------------------------------------------------------------------
   4  TYPOGRAPHY
   -------------------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6{
  margin:0;
  font-weight:600;
  line-height:var(--g-lh-head);
  letter-spacing:-.02em;
  color:var(--g-ink);
  text-wrap:balance;
  /* Long German compounds (Datenschutzerklärung, Berufshaftpflichtversicherung)
     must break rather than push the page sideways — this matters now for the
     legal pages and will matter everywhere once the German locale is added. */
  overflow-wrap:break-word;
}
h1{ font-size:var(--g-fs-h1); line-height:var(--g-lh-tight); letter-spacing:-.03em; }
h2{ font-size:var(--g-fs-h2); letter-spacing:-.025em; }
h3{ font-size:var(--g-fs-h3); }
h4{ font-size:var(--g-fs-h4); letter-spacing:-.01em; }

p{ margin:0 0 var(--g-s4); max-inline-size:var(--g-measure); overflow-wrap:break-word; }
code{ font-family:var(--g-font-mono); font-size:.9em; overflow-wrap:anywhere; }
p:last-child{ margin-block-end:0; }

.g-lead{
  font-size:var(--g-fs-lead);
  line-height:1.55;
  color:var(--g-ink-2);
  max-inline-size:60ch;
}
.g-small{ font-size:var(--g-fs-small); }
.g-micro{ font-size:var(--g-fs-micro); color:var(--g-ink-muted); }
.g-muted{ color:var(--g-ink-muted); }

.g-mono{
  font-family:var(--g-font-mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* Prose block — the default rhythm for body copy areas */
.g-prose > * + *{ margin-block-start:var(--g-s4); }
.g-prose h3{ margin-block-start:var(--g-s6); }
.g-prose h4{ margin-block-start:var(--g-s5); }
.g-prose ul,.g-prose ol{ max-inline-size:var(--g-measure); }
.g-prose li{ position:relative; padding-inline-start:var(--g-s5); margin-block-end:var(--g-s2); }
.g-prose li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.66em;
  inline-size:9px; block-size:1px; background:var(--g-sector);
}
.g-prose ol{ counter-reset:g-ol; }
.g-prose ol > li{ counter-increment:g-ol; padding-inline-start:2.25rem; }
.g-prose ol > li::before{
  content:counter(g-ol,decimal-leading-zero);
  inline-size:auto; block-size:auto; background:none;
  inset-block-start:0;
  font-family:var(--g-font-mono); font-size:var(--g-fs-micro);
  color:var(--g-sector-ink); font-weight:500;
}
.g-prose strong{ font-weight:600; color:var(--g-ink); }

/* --------------------------------------------------------------------------
   5  LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.g-wrap{
  inline-size:100%;
  min-inline-size:0;
  max-inline-size:var(--g-container);
  margin-inline:auto;
  padding-inline:var(--g-gutter);
}
.g-wrap--narrow{ max-inline-size:52rem; }

/* One spacing owner. Sections never set their own vertical padding elsewhere
   in this file, which keeps specificity conflicts out of section rhythm. */
.g-section{ padding-block:var(--g-section-y); }
.g-section--tight{ padding-block:calc(var(--g-section-y) * .6); }
.g-section--flush-top{ padding-block-start:0; }
.g-section--alt{ background:var(--g-surface-alt); }
.g-section--wash{ background:var(--g-sector-wash); }
.g-section--dark{ background:var(--g-surface-dark); color:var(--g-ink-invert-2); }
.g-section--dark h2,.g-section--dark h3,.g-section--dark h4{ color:var(--g-ink-invert); }
.g-section--dark .g-lead{ color:var(--g-ink-invert-2); }
.g-section--dark .g-muted,.g-section--dark .g-micro{ color:var(--g-ink-invert-2); }

.g-grid{ display:grid; gap:var(--g-s5); }
.g-grid--2{ grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr)); }
.g-grid--3{ grid-template-columns:repeat(auto-fit,minmax(min(16.5rem,100%),1fr)); }
.g-grid--4{ grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr)); }

/* Editorial split: sticky section label beside the content it labels */
.g-split{ display:grid; gap:var(--g-s6); }
@media (min-width:60rem){
  .g-split{ grid-template-columns:minmax(0,17rem) minmax(0,1fr); gap:var(--g-s8); }
  .g-split__aside{ position:sticky; inset-block-start:6.5rem; align-self:start; }
}

.g-stack > * + *{ margin-block-start:var(--g-s4); }
.g-stack--lg > * + *{ margin-block-start:var(--g-s6); }

/* --------------------------------------------------------------------------
   6  STRUCTURAL DEVICES
   The eyebrow + spec rule pair is the site's structural signature. The rule
   carries the sector colour, so a reader always knows which part of the
   business a section belongs to; the mono code beside it is the sector's
   internal shorthand, not decoration.
   -------------------------------------------------------------------------- */

.g-eyebrow{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--g-s3);
  margin-block-end:var(--g-s4);
  font-family:var(--g-font-mono);
  font-size:var(--g-fs-eyebrow);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--g-ink-muted);
}
.g-eyebrow::before{
  content:""; inline-size:2rem; block-size:3px; flex:none;
  background:var(--g-sector);
}
.g-section--dark .g-eyebrow{ color:var(--g-ink-invert-2); }

/* Rating plate — the trust device. Modelled on an equipment nameplate:
   fixed fields, mono type, hairline dividers. It replaces the usual
   vanity-statistics band, and every field on it is verifiable. */
.g-plate{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr));
  border:1px solid var(--g-rule-invert);
  background:var(--g-surface-dark-2);
}
.g-plate__cell{
  padding:var(--g-s5);
  border-inline-start:1px solid var(--g-rule-invert);
  border-block-start:1px solid var(--g-rule-invert);
}
.g-plate__cell:first-child{ border-inline-start:0; }
.g-plate__k{
  display:block;
  font-family:var(--g-font-mono); font-size:var(--g-fs-eyebrow);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--g-ink-invert-2);
  margin-block-end:var(--g-s2);
}
.g-plate__v{
  display:block; font-size:var(--g-fs-h4); font-weight:600;
  color:var(--g-ink-invert); letter-spacing:-.01em; line-height:1.3;
}
.g-plate__v .g-mono{ font-size:var(--g-fs-small); font-weight:500; }

/* Sector chip */
.g-chip{
  display:inline-flex; align-items:center; gap:var(--g-s2);
  padding:.3125rem var(--g-s3);
  border:1px solid var(--g-sector);
  background:var(--g-sector-wash);
  color:var(--g-sector-ink);
  font-family:var(--g-font-mono); font-size:var(--g-fs-eyebrow);
  font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  border-radius:var(--g-radius);
  text-decoration:none;
}
a.g-chip{ position:relative; }
/* A chip is deliberately small — it is a label, not a button. To still meet the
   44px minimum touch target, the hit area is extended past the visual bounds
   rather than the chip being inflated. The row gap keeps the extended areas
   from overlapping. */
a.g-chip::after{
  content:""; position:absolute; inset:-7px -2px; border-radius:inherit;
}
a.g-chip:hover{ background:var(--g-sector); color:var(--g-white); }
.g-chip--sample{
  border-color:var(--g-rule-strong); background:var(--g-light);
  color:var(--g-ink-2);
}

.g-chiprow{ display:flex; flex-wrap:wrap; gap:var(--g-s4) var(--g-s3); }

/* Breadcrumbs */
.g-crumbs{ padding-block:var(--g-s4); border-block-end:1px solid var(--g-rule); }
.g-crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--g-s2); }
.g-crumbs li{ display:flex; align-items:center; gap:var(--g-s2); font-size:var(--g-fs-micro); }
.g-crumbs li + li::before{ content:"/"; color:var(--g-rule-strong); }
.g-crumbs a{ color:var(--g-ink-muted); text-decoration:none; }
.g-crumbs a:hover{ color:var(--g-primary); text-decoration:underline; }
.g-crumbs [aria-current]{ color:var(--g-ink); font-weight:500; }

/* Divider */
.g-rule{ block-size:1px; background:var(--g-rule); border:0; margin:0; }

/* --------------------------------------------------------------------------
   7  BUTTONS & LINKS
   -------------------------------------------------------------------------- */

a{ color:var(--g-primary); text-underline-offset:.18em; }
a:hover{ color:var(--g-deep); }

.g-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--g-s2);
  min-block-size:2.75rem;                 /* 44px touch target */
  padding:var(--g-s3) var(--g-s5);
  border:1px solid transparent;
  border-radius:var(--g-radius);
  font-size:var(--g-fs-small); font-weight:600; letter-spacing:.01em;
  text-decoration:none; cursor:pointer;
  transition:background var(--g-dur-1) var(--g-ease),
             color var(--g-dur-1) var(--g-ease),
             border-color var(--g-dur-1) var(--g-ease);
}
.g-btn svg{ inline-size:1rem; block-size:1rem; }

.g-btn--primary{ background:var(--g-primary); color:var(--g-white); }
.g-btn--primary:hover{ background:var(--g-deep); color:var(--g-white); }

.g-btn--ghost{ background:transparent; color:var(--g-primary); border-color:var(--g-primary); }
.g-btn--ghost:hover{ background:var(--g-primary); color:var(--g-white); }

.g-btn--onDark{ background:var(--g-white); color:var(--g-charcoal); }
.g-btn--onDark:hover{ background:var(--g-light); color:var(--g-charcoal); }

.g-btn--onDarkGhost{ background:transparent; color:var(--g-white); border-color:rgba(255,255,255,.45); }
.g-btn--onDarkGhost:hover{ background:rgba(255,255,255,.12); color:var(--g-white); border-color:var(--g-white); }

.g-btn[disabled],.g-btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; }

.g-btnrow{ display:flex; flex-wrap:wrap; gap:var(--g-s3); }

/* Arrow link */
.g-alink{
  display:inline-flex; align-items:center; gap:var(--g-s2);
  min-block-size:2.75rem;
  font-size:var(--g-fs-small); font-weight:600;
  color:var(--g-primary); text-decoration:none;
}
.g-alink svg{ inline-size:1rem; block-size:1rem; transition:transform var(--g-dur-1) var(--g-ease); }
.g-alink:hover{ text-decoration:underline; }
.g-alink:hover svg{ transform:translateX(3px); }
.g-section--dark .g-alink{ color:var(--g-white); }

/* --------------------------------------------------------------------------
   8  HEADER + MEGA-MENU                     [component: mega-menu]
   Self-contained: markup in components.py -> header(), behaviour in
   /static/js/mega-menu.js, styles confined to this block. Rebuildable as a
   WordPress nav walker without touching anything else.
   -------------------------------------------------------------------------- */

.g-header{
  position:sticky; inset-block-start:0; z-index:var(--g-z-header);
  background:var(--g-white);
  border-block-end:1px solid var(--g-rule);
}
.g-header__bar{
  display:flex; align-items:center; gap:var(--g-s5);
  min-block-size:4.5rem;
}
.g-header__logo{
  display:flex; align-items:center; gap:var(--g-s3);
  min-block-size:2.75rem;               /* 44px touch target on small screens */
  text-decoration:none; color:var(--g-primary); flex:none;
}
.g-header__logo svg{ block-size:1.75rem; inline-size:auto; }
.g-header__logo b{ font-size:1.1875rem; font-weight:700; letter-spacing:-.02em; }
.g-header__logo span{
  display:none; font-family:var(--g-font-mono); font-size:.5625rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--g-ink-muted);
  margin-block-start:1px;
}
@media (min-width:26rem){ .g-header__logo span{ display:block; } }
.g-header__spacer{ flex:1; }
/* The header CTA is hidden on the narrowest screens: the drawer carries both
   CTAs, and keeping it here pushes the menu button off a 390px viewport. */
.g-header__bar > .g-btn{ display:none; }
@media (min-width:30rem){ .g-header__bar > .g-btn{ display:inline-flex; } }

.g-nav{ display:none; }
.g-nav__list{ display:flex; align-items:center; gap:var(--g-s1); }
.g-nav__link,
.g-nav__toggle{
  display:inline-flex; align-items:center; gap:var(--g-s2);
  min-block-size:2.75rem; padding-inline:var(--g-s3);
  background:none; border:0; border-radius:var(--g-radius);
  font-size:var(--g-fs-small); font-weight:500; color:var(--g-ink-2);
  text-decoration:none; cursor:pointer;
  transition:color var(--g-dur-1) var(--g-ease);
}
.g-nav__link:hover,.g-nav__toggle:hover{ color:var(--g-primary); }
.g-nav__toggle svg{ inline-size:.75rem; block-size:.75rem; transition:transform var(--g-dur-1) var(--g-ease); }
.g-nav__toggle[aria-expanded="true"]{ color:var(--g-primary); }
.g-nav__toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.g-nav__item{ position:relative; }
.g-nav__item.is-current > .g-nav__link,
.g-nav__item.is-current > .g-nav__toggle{
  color:var(--g-primary); font-weight:600;
  box-shadow:inset 0 -3px 0 0 var(--g-primary);
}

.g-mega{
  display:none;
  position:absolute; inset-inline:0; inset-block-start:100%;
  z-index:var(--g-z-menu);
  background:var(--g-white);
  border-block:1px solid var(--g-rule);
  box-shadow:0 18px 36px -24px rgba(38,50,56,.35);
}
.g-mega[data-open="true"]{ display:block; }
.g-mega__inner{
  display:grid; gap:var(--g-s6);
  padding-block:var(--g-s6);
  grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));
}
.g-mega__col{ border-inline-start:3px solid var(--g-sector); padding-inline-start:var(--g-s4); }
.g-mega__title{
  display:block; margin-block-end:var(--g-s3);
  font-family:var(--g-font-mono); font-size:var(--g-fs-eyebrow);
  letter-spacing:.14em; text-transform:uppercase; color:var(--g-ink-muted);
}
.g-mega__col a{
  display:block; padding-block:.4375rem;
  font-size:var(--g-fs-small); color:var(--g-ink); text-decoration:none;
}
.g-mega__col a:hover{ color:var(--g-sector-ink); text-decoration:underline; }
.g-mega__col a strong{ display:block; font-weight:600; }
.g-mega__col a em{ display:block; font-style:normal; font-size:var(--g-fs-micro); color:var(--g-ink-muted); }
.g-mega__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--g-s4);
  padding-block:var(--g-s4);
  border-block-start:1px solid var(--g-rule);
  font-size:var(--g-fs-micro);
}

/* Mobile drawer */
.g-burger{
  display:inline-flex; align-items:center; justify-content:center;
  inline-size:2.75rem; block-size:2.75rem;
  background:none; border:1px solid var(--g-rule); border-radius:var(--g-radius);
  cursor:pointer; color:var(--g-ink);
}
.g-burger svg{ inline-size:1.25rem; block-size:1.25rem; }
.g-drawer{
  display:none;
  border-block-start:1px solid var(--g-rule);
  max-block-size:calc(100dvh - 4.5rem);
  overflow-y:auto;
  padding-block:var(--g-s4) var(--g-s7);
}
.g-drawer[data-open="true"]{ display:block; }
.g-drawer details{ border-block-end:1px solid var(--g-rule); }
.g-drawer summary{
  display:flex; align-items:center; justify-content:space-between;
  min-block-size:3rem; padding-block:var(--g-s2);
  font-weight:600; cursor:pointer; list-style:none;
}
.g-drawer summary::-webkit-details-marker{ display:none; }
.g-drawer summary::after{
  content:""; inline-size:.5rem; block-size:.5rem; flex:none;
  border-inline-end:2px solid var(--g-primary); border-block-end:2px solid var(--g-primary);
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--g-dur-1) var(--g-ease);
}
.g-drawer details[open] summary::after{ transform:rotate(225deg) translateY(-2px); }
.g-drawer__sub{ padding-block-end:var(--g-s4); }
.g-drawer__sub a,
.g-drawer > a{
  display:block; min-block-size:2.75rem; padding-block:var(--g-s2);
  font-size:var(--g-fs-small); color:var(--g-ink); text-decoration:none;
}
.g-drawer > a{ border-block-end:1px solid var(--g-rule); font-weight:600; }
.g-drawer__sub a{ padding-inline-start:var(--g-s4); border-inline-start:2px solid var(--g-rule); }
.g-drawer__sub a:hover{ border-inline-start-color:var(--g-sector); color:var(--g-primary); }
.g-drawer__cta{ margin-block-start:var(--g-s5); }

@media (min-width:64rem){
  .g-nav{ display:block; }
  .g-burger,.g-drawer{ display:none!important; }
}

/* --------------------------------------------------------------------------
   9  HERO
   -------------------------------------------------------------------------- */

.g-hero{
  position:relative;
  background:var(--g-surface-dark);
  color:var(--g-ink-invert-2);
  overflow:hidden;
  isolation:isolate;
}
.g-hero__media{ position:absolute; inset:0; z-index:-2; }
.g-hero__media img{
  inline-size:100%; block-size:100%; object-fit:cover;
  background:var(--g-charcoal);
  /* The hero photograph is a background layer. Its alt text stays in the markup
     for assistive technology and SEO, but is not painted over the plate while
     the file is missing or still loading. */
  color:transparent;
}
.g-hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,
    rgba(38,50,56,.94) 0%,
    rgba(38,50,56,.88) 42%,
    rgba(38,50,56,.62) 100%);
}
.g-hero__inner{ padding-block:clamp(3.5rem,2rem + 7vw,7rem) clamp(2.5rem,1.5rem + 4vw,4rem); }
.g-hero h1{ color:var(--g-white); max-inline-size:19ch; }
.g-hero .g-lead{ color:var(--g-ink-invert-2); max-inline-size:56ch; margin-block-start:var(--g-s5); }
.g-hero .g-eyebrow{ color:var(--g-ink-invert-2); }
.g-hero .g-btnrow{ margin-block-start:var(--g-s6); }

.g-hero--home h1{ font-size:var(--g-fs-display); max-inline-size:17ch; }

/* Page hero (interior) — lighter, still sector-coded */
.g-phero{
  background:var(--g-surface-dark);
  color:var(--g-ink-invert-2);
  border-block-end:4px solid var(--g-sector);
}
.g-phero__inner{ padding-block:clamp(2.5rem,1.5rem + 4vw,4.5rem); }
.g-phero h1{ color:var(--g-white); max-inline-size:22ch; }
.g-phero .g-lead{ color:var(--g-ink-invert-2); margin-block-start:var(--g-s4); }
.g-phero .g-eyebrow{ color:var(--g-ink-invert-2); }
.g-phero .g-btnrow{ margin-block-start:var(--g-s6); }

/* Sector spectrum — the home hero's one bold moment. Four measured segments
   read as a legend/scale bar from a technical drawing, and each is a link
   into that sector. */
.g-spectrum{ margin-block-start:clamp(2.5rem,1.5rem + 4vw,4rem); }
.g-spectrum__bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.g-spectrum__seg{
  display:block; block-size:10px; background:var(--g-seg);
  transform-origin:left center;
}
.g-spectrum__list{
  display:grid; grid-template-columns:repeat(2,1fr); gap:0;
  margin-block-start:0;
}
@media (min-width:48rem){ .g-spectrum__list{ grid-template-columns:repeat(4,1fr); } }
.g-spectrum__item{ border-block-start:0; }
.g-spectrum__link{
  display:block; padding:var(--g-s4) var(--g-s4) var(--g-s5) 0;
  padding-inline-end:var(--g-s4);
  text-decoration:none; color:var(--g-ink-invert-2);
  border-block-start:1px solid var(--g-rule-invert);
  transition:color var(--g-dur-2) var(--g-ease);
}
.g-spectrum__link:hover{ color:var(--g-white); }
.g-spectrum__code{
  display:block; font-family:var(--g-font-mono); font-size:var(--g-fs-eyebrow);
  letter-spacing:.16em; color:var(--g-seg); margin-block-end:var(--g-s2);
}
.g-spectrum__name{
  display:block; font-size:var(--g-fs-h4); font-weight:600; color:var(--g-white);
  letter-spacing:-.01em; margin-block-end:var(--g-s2);
}
.g-spectrum__desc{ display:block; font-size:var(--g-fs-micro); line-height:1.5; }
.g-spectrum__link:hover .g-spectrum__name{ text-decoration:underline; }

/* --------------------------------------------------------------------------
   10  CARDS & GRIDS
   -------------------------------------------------------------------------- */

.g-card{
  display:flex; flex-direction:column;
  padding:var(--g-s5);
  background:var(--g-white);
  border:1px solid var(--g-rule);
  border-block-start:3px solid var(--g-sector);
  border-radius:0 0 var(--g-radius) var(--g-radius);
  transition:border-color var(--g-dur-2) var(--g-ease),
             box-shadow var(--g-dur-2) var(--g-ease),
             transform var(--g-dur-2) var(--g-ease);
}
.g-card h3,.g-card h4{ margin-block-end:var(--g-s3); }
.g-card p{ font-size:var(--g-fs-small); color:var(--g-ink-2); }
.g-card__foot{ margin-block-start:auto; padding-block-start:var(--g-s4); }
.g-card__icon{ color:var(--g-sector-ink); margin-block-end:var(--g-s4); }
.g-card__icon svg{ inline-size:1.75rem; block-size:1.75rem; }
.g-card__k{
  display:block; font-family:var(--g-font-mono); font-size:var(--g-fs-eyebrow);
  letter-spacing:.14em; text-transform:uppercase; color:var(--g-ink-muted);
  margin-block-end:var(--g-s2);
}

a.g-card{ text-decoration:none; color:inherit; }
a.g-card:hover{
  border-color:var(--g-sector);
  border-block-start-color:var(--g-sector);
  box-shadow:0 12px 24px -18px rgba(38,50,56,.45);
  transform:translateY(-2px);
}
a.g-card h3,a.g-card h4{ color:var(--g-ink); }
a.g-card:hover h3,a.g-card:hover h4{ color:var(--g-sector-ink); }

.g-section--alt .g-card,.g-section--wash .g-card{ background:var(--g-white); }
.g-section--dark .g-card{
  background:var(--g-surface-dark-2); border-color:var(--g-rule-invert);
  color:var(--g-ink-invert-2);
}
.g-section--dark .g-card p{ color:var(--g-ink-invert-2); }
.g-section--dark a.g-card:hover h3,.g-section--dark a.g-card:hover h4{ color:var(--g-sector); }

/* Media card (projects, blog) */
.g-mcard{ display:flex; flex-direction:column; background:var(--g-white); border:1px solid var(--g-rule); }
.g-mcard__img{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--g-light); }
.g-mcard__img img{ inline-size:100%; block-size:100%; object-fit:cover; transition:transform var(--g-dur-3) var(--g-ease); }
.g-mcard:hover .g-mcard__img img{ transform:scale(1.03); }
.g-mcard__body{ display:flex; flex-direction:column; flex:1; padding:var(--g-s5); border-block-start:3px solid var(--g-sector); }
.g-mcard__body p{ font-size:var(--g-fs-small); color:var(--g-ink-2); }
.g-mcard__flag{
  position:absolute; inset-block-start:var(--g-s3); inset-inline-start:var(--g-s3);
  padding:.25rem var(--g-s2);
  background:var(--g-charcoal); color:var(--g-white);
  font-family:var(--g-font-mono); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
}

/* Numbered process steps — used only where order genuinely carries meaning */
.g-steps{ counter-reset:g-step; display:grid; gap:0; }
.g-step{
  counter-increment:g-step;
  display:grid; gap:var(--g-s4);
  padding-block:var(--g-s5);
  border-block-start:1px solid var(--g-rule);
}
.g-step:last-child{ border-block-end:1px solid var(--g-rule); }
@media (min-width:48rem){ .g-step{ grid-template-columns:6rem minmax(0,1fr); gap:var(--g-s6); } }
.g-step__n{
  font-family:var(--g-font-mono); font-size:var(--g-fs-h3); font-weight:500;
  color:var(--g-sector-ink); line-height:1;
}
.g-step__n::before{ content:counter(g-step,decimal-leading-zero); }
.g-step h3{ margin-block-end:var(--g-s3); }
.g-step p{ color:var(--g-ink-2); }
.g-section--dark .g-step{ border-color:var(--g-rule-invert); }
.g-section--dark .g-step__n{ color:var(--g-sector); }

/* Definition rows (challenge → answer) */
.g-defs{ display:grid; gap:0; }
.g-def{
  display:grid; gap:var(--g-s3);
  padding-block:var(--g-s5);
  border-block-start:1px solid var(--g-rule);
}
.g-def:last-child{ border-block-end:1px solid var(--g-rule); }
@media (min-width:48rem){ .g-def{ grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:var(--g-s6); } }
.g-def__t{ font-weight:600; color:var(--g-ink); letter-spacing:-.01em; }
.g-def__d{ color:var(--g-ink-2); font-size:var(--g-fs-small); }
.g-def__d p{ font-size:inherit; }
.g-section--dark .g-def{ border-color:var(--g-rule-invert); }
.g-section--dark .g-def__t{ color:var(--g-white); }
.g-section--dark .g-def__d{ color:var(--g-ink-invert-2); }

/* Simple linked list block */
.g-links{ display:grid; gap:0; }
.g-links a{
  display:flex; align-items:center; justify-content:space-between; gap:var(--g-s4);
  min-block-size:3.25rem; padding-block:var(--g-s3);
  border-block-start:1px solid var(--g-rule);
  color:var(--g-ink); text-decoration:none; font-size:var(--g-fs-small);
}
.g-links a:last-child{ border-block-end:1px solid var(--g-rule); }
.g-links a:hover{ color:var(--g-sector-ink); }
.g-links a svg{ inline-size:1rem; block-size:1rem; color:var(--g-sector-ink); transition:transform var(--g-dur-1) var(--g-ease); }
.g-links a:hover svg{ transform:translateX(3px); }
.g-links strong{ font-weight:600; }
.g-links em{ display:block; font-style:normal; color:var(--g-ink-muted); font-size:var(--g-fs-micro); }

/* Figure / diagram placeholder */
.g-figure{ margin:0; }
.g-figure img{ inline-size:100%; border:1px solid var(--g-rule); }
.g-figure figcaption{
  margin-block-start:var(--g-s3); font-size:var(--g-fs-micro); color:var(--g-ink-muted);
  padding-inline-start:var(--g-s3); border-inline-start:3px solid var(--g-sector);
}

/* Diagram slot: reserved block for a static process diagram supplied later */
.g-diagram{
  display:flex; flex-direction:column; justify-content:center;
  min-block-size:16rem; padding:var(--g-s6);
  background:var(--g-surface-alt);
  border:1px dashed var(--g-rule-strong);
  text-align:start;
}

/* Downloads */
.g-dl{ display:grid; gap:0; }
.g-dl a{
  display:flex; align-items:center; gap:var(--g-s4);
  min-block-size:3.5rem; padding-block:var(--g-s3);
  border-block-start:1px solid var(--g-rule);
  color:var(--g-ink); text-decoration:none;
}
.g-dl a:last-child{ border-block-end:1px solid var(--g-rule); }
.g-dl a:hover{ color:var(--g-primary); }
.g-dl svg{ inline-size:1.25rem; block-size:1.25rem; color:var(--g-sector-ink); flex:none; }
.g-dl__meta{ margin-inline-start:auto; font-family:var(--g-font-mono); font-size:var(--g-fs-micro); color:var(--g-ink-muted); }

/* CTA band */
.g-cta{ background:var(--g-primary); color:var(--g-white); }
.g-cta__inner{
  display:grid; gap:var(--g-s5); align-items:center;
  padding-block:var(--g-s8);
}
@media (min-width:56rem){ .g-cta__inner{ grid-template-columns:minmax(0,1.4fr) auto; gap:var(--g-s8); } }
.g-cta h2{ color:var(--g-white); }
.g-cta p{ color:rgba(255,255,255,.88); margin-block-start:var(--g-s3); }
.g-cta .g-eyebrow{ color:rgba(255,255,255,.8); }
.g-cta .g-eyebrow::before{ background:var(--g-white); }

/* Conversion block that closes industry / technology / product / service pages */
.g-convert{ display:grid; gap:var(--g-s6); }
@media (min-width:60rem){ .g-convert{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr); gap:var(--g-s7); } }
.g-convert h2{ margin-block-end:var(--g-s4); }
.g-convert h3{ font-size:var(--g-fs-h4); margin-block-end:var(--g-s3); }

/* --------------------------------------------------------------------------
   11  TABLES & TECHNICAL DATA
   Spec data is set in the mono face with tabular figures. This is the
   engineering-credibility signal the brand needs; it is never used for prose.
   -------------------------------------------------------------------------- */

.g-tablewrap{ overflow-x:auto; border:1px solid var(--g-rule); }
.g-table{
  inline-size:100%; min-inline-size:36rem;
  border-collapse:collapse;
  font-family:var(--g-font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--g-fs-micro);
}
.g-table caption{
  padding:var(--g-s4) var(--g-s5);
  text-align:start; font-family:var(--g-font);
  font-size:var(--g-fs-small); font-weight:600; color:var(--g-ink);
  border-block-end:1px solid var(--g-rule);
  background:var(--g-surface-alt);
}
.g-table th,.g-table td{
  padding:var(--g-s3) var(--g-s4);
  text-align:start; vertical-align:top;
  border-block-start:1px solid var(--g-rule);
}
.g-table thead th{
  border-block-start:0;
  background:var(--g-surface-dark-2); color:var(--g-white);
  font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  font-size:.6875rem;
  white-space:nowrap;
}
.g-table tbody th{ font-weight:600; color:var(--g-ink); }
.g-table tbody tr:hover{ background:var(--g-sector-wash); }
.g-table td.is-num{ text-align:end; }

.g-tablenote{ margin-block-start:var(--g-s3); font-size:var(--g-fs-micro); color:var(--g-ink-muted); }

/* Key-figure list (verified values only) */
.g-figs{ display:grid; gap:var(--g-s5); grid-template-columns:repeat(auto-fit,minmax(min(12rem,100%),1fr)); }
.g-fig{ border-block-start:3px solid var(--g-sector); padding-block-start:var(--g-s4); }
.g-fig__v{
  display:block; font-family:var(--g-font-mono); font-variant-numeric:tabular-nums;
  font-size:clamp(1.5rem,1.1rem + 1.2vw,2rem); font-weight:600;
  color:var(--g-ink); letter-spacing:-.02em; line-height:1.1;
}
.g-fig__k{ display:block; margin-block-start:var(--g-s2); font-size:var(--g-fs-micro); color:var(--g-ink-muted); }
.g-section--dark .g-fig__v{ color:var(--g-white); }
.g-section--dark .g-fig__k{ color:var(--g-ink-invert-2); }

/* --------------------------------------------------------------------------
   12  ACCORDION / FAQ
   -------------------------------------------------------------------------- */

.g-faq{ border-block-start:1px solid var(--g-rule); }
.g-faq details{ border-block-end:1px solid var(--g-rule); }
.g-faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--g-s4);
  min-block-size:3.5rem; padding-block:var(--g-s4);
  font-size:var(--g-fs-h4); font-weight:600; letter-spacing:-.01em;
  cursor:pointer; list-style:none;
}
.g-faq summary::-webkit-details-marker{ display:none; }
.g-faq summary::after{
  content:""; flex:none; inline-size:1rem; block-size:1rem;
  background:var(--g-sector-ink);
  clip-path:polygon(46% 0,54% 0,54% 46%,100% 46%,100% 54%,54% 54%,54% 100%,46% 100%,46% 54%,0 54%,0 46%,46% 46%);
  transition:transform var(--g-dur-2) var(--g-ease);
}
.g-faq details[open] summary::after{ transform:rotate(135deg); }
.g-faq__a{ padding-block:0 var(--g-s5); }
.g-faq__a p{ color:var(--g-ink-2); }

/* --------------------------------------------------------------------------
   13  SLIDER (technologies)
   Scroll-snap based: works with no JS, arrows are progressive enhancement.
   -------------------------------------------------------------------------- */

.g-slider{ position:relative; }
.g-slider__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--g-s4); margin-block-end:var(--g-s5); }
.g-slider__track{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(16rem,20rem);
  gap:var(--g-s4);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-block-end:var(--g-s4);
  scrollbar-width:thin;
}
.g-slider__track > *{ scroll-snap-align:start; }
.g-slider__nav{ display:flex; gap:var(--g-s2); }
.g-slider__btn{
  inline-size:2.75rem; block-size:2.75rem;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--g-white); border:1px solid var(--g-rule-strong);
  border-radius:var(--g-radius); cursor:pointer; color:var(--g-ink);
  transition:border-color var(--g-dur-1) var(--g-ease), color var(--g-dur-1) var(--g-ease);
}
.g-slider__btn:hover{ border-color:var(--g-primary); color:var(--g-primary); }
.g-slider__btn svg{ inline-size:1.125rem; block-size:1.125rem; }
.g-slider__btn[disabled]{ opacity:.35; cursor:default; }

/* --------------------------------------------------------------------------
   14  TYPING MODULE                          [component: typing]
   Markup in components.py -> problem_typing(), behaviour in
   /static/js/typing.js. With JS off, the full problem list renders as a
   static list — no content is lost.
   -------------------------------------------------------------------------- */

.g-typing{ display:grid; gap:var(--g-s6); align-items:start; }
@media (min-width:60rem){ .g-typing{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--g-s8); } }
.g-typing__stage{
  min-block-size:11rem;
  padding:var(--g-s6);
  background:var(--g-surface-dark);
  border-inline-start:4px solid var(--g-sector);
  display:flex; flex-direction:column; justify-content:center;
}
.g-typing__quote{
  font-size:var(--g-fs-h3); font-weight:600; letter-spacing:-.02em;
  color:var(--g-white); line-height:1.3; margin:0; min-block-size:3.5em;
}
.g-typing__caret{
  display:inline-block; inline-size:2px; block-size:1em;
  background:var(--g-sector); vertical-align:-.12em; margin-inline-start:2px;
}
.g-typing__answer{
  margin-block-start:var(--g-s5); padding-block-start:var(--g-s4);
  border-block-start:1px solid var(--g-rule-invert);
  font-family:var(--g-font-mono); font-size:var(--g-fs-small); font-weight:500;
  letter-spacing:.02em; color:var(--g-sector);
}
.g-typing__static li{ color:var(--g-ink-invert-2); }
/* Static fallback list is shown when JS is unavailable or motion is reduced */
.g-typing__stage[data-live="true"] .g-typing__static{ display:none; }
.g-typing__stage[data-live="true"] .g-typing__quote{ display:block; }
.g-typing__quote[hidden]{ display:none; }

/* --------------------------------------------------------------------------
   15  FORMS / RFQ                            [component: rfq]
   Markup in components.py -> rfq_form(), behaviour in /static/js/rfq.js.
   Without JS every step is visible and the form posts normally.
   -------------------------------------------------------------------------- */

.g-form{ display:grid; gap:var(--g-s6); }
.g-form fieldset{ margin:0; padding:0; border:0; }
.g-form legend{
  display:flex; align-items:baseline; gap:var(--g-s3);
  inline-size:100%; padding:0 0 var(--g-s4);
  font-size:var(--g-fs-h4); font-weight:600; letter-spacing:-.01em;
}
.g-form legend .g-mono{ font-size:var(--g-fs-eyebrow); letter-spacing:.14em; color:var(--g-ink-muted); }

.g-field{ display:grid; gap:var(--g-s2); margin-block-end:var(--g-s5); }
.g-field > label{ font-size:var(--g-fs-small); font-weight:600; }
.g-field .g-hint{ font-size:var(--g-fs-micro); color:var(--g-ink-muted); }
.g-req{ color:#B3261E; margin-inline-start:2px; }

.g-input,.g-select,.g-textarea{
  inline-size:100%; min-block-size:2.75rem;
  padding:var(--g-s3);
  font:inherit; font-size:var(--g-fs-small); color:var(--g-ink);
  background:var(--g-white);
  border:1px solid var(--g-rule-strong); border-radius:var(--g-radius);
  transition:border-color var(--g-dur-1) var(--g-ease);
}
.g-textarea{ min-block-size:8rem; resize:vertical; }
.g-select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--g-ink) 50%),
                   linear-gradient(135deg,var(--g-ink) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  padding-inline-end:var(--g-s7);
}
.g-input:hover,.g-select:hover,.g-textarea:hover{ border-color:var(--g-primary); }
.g-input[aria-invalid="true"],.g-select[aria-invalid="true"],.g-textarea[aria-invalid="true"]{
  border-color:#B3261E; border-inline-start-width:3px;
}
.g-error{
  display:flex; align-items:flex-start; gap:var(--g-s2);
  font-size:var(--g-fs-micro); color:#B3261E; font-weight:500;
}
.g-error:empty{ display:none; }
/* Once a field has shown an error, its message slot keeps the height it needed,
   so correcting the field never reflows the form under the user's pointer. */
.g-error.is-reserved:empty{ display:block; }
.g-error svg{ inline-size:1rem; block-size:1rem; flex:none; margin-block-start:.1rem; }

.g-choices{ display:grid; gap:var(--g-s2); grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr)); }
.g-choice{
  display:flex; align-items:flex-start; gap:var(--g-s3);
  min-block-size:2.75rem; padding:var(--g-s3);
  border:1px solid var(--g-rule-strong); border-radius:var(--g-radius);
  cursor:pointer; font-size:var(--g-fs-small);
  transition:border-color var(--g-dur-1) var(--g-ease), background var(--g-dur-1) var(--g-ease);
}
.g-choice:hover{ border-color:var(--g-primary); }
.g-choice input{ inline-size:1.125rem; block-size:1.125rem; margin:.15rem 0 0; accent-color:var(--g-primary); flex:none; }
.g-choice:has(input:checked){ border-color:var(--g-primary); background:var(--g-sector-wash); }
.g-choice span{ display:block; }
.g-choice em{ display:block; font-style:normal; font-size:var(--g-fs-micro); color:var(--g-ink-muted); }

.g-consent{
  display:flex; align-items:flex-start; gap:var(--g-s3);
  padding:var(--g-s4);
  background:var(--g-surface-alt); border:1px solid var(--g-rule);
  font-size:var(--g-fs-micro); line-height:1.55;
}
.g-consent input{ inline-size:1.125rem; block-size:1.125rem; margin:.1rem 0 0; accent-color:var(--g-primary); flex:none; }

.g-form__progress{
  display:flex; flex-wrap:wrap; gap:var(--g-s1);
  margin-block-end:var(--g-s6);
  font-family:var(--g-font-mono); font-size:var(--g-fs-eyebrow);
  letter-spacing:.1em; text-transform:uppercase;
}
.g-form__progress li{
  display:flex; align-items:center; gap:var(--g-s2);
  padding:var(--g-s2) var(--g-s3);
  color:var(--g-ink-muted); border-block-end:3px solid var(--g-rule);
}
.g-form__progress li[aria-current="step"]{ color:var(--g-primary); border-block-end-color:var(--g-primary); font-weight:600; }
.g-form__progress li[data-done="true"]{ color:var(--g-ink-2); border-block-end-color:var(--g-primary-2); }

.g-form__nav{ display:flex; flex-wrap:wrap; gap:var(--g-s3); align-items:center; }
.g-form__status{ font-size:var(--g-fs-small); }
.g-form__status:empty{ display:none; }

.g-formdone{
  padding:var(--g-s6);
  border:1px solid var(--g-primary); border-inline-start-width:4px;
  background:var(--g-sector-wash);
}
.g-formdone h3{ margin-block-end:var(--g-s3); color:var(--g-primary); }
.g-formdone[hidden]{ display:none; }

/* Prefilled context banner when the form is opened from a product/tech page */
.g-prefill{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--g-s3);
  padding:var(--g-s3) var(--g-s4);
  border:1px solid var(--g-primary); background:var(--g-sector-wash);
  font-size:var(--g-fs-micro);
}
.g-prefill[hidden]{ display:none; }

/* --------------------------------------------------------------------------
   16  COOKIE BANNER
   -------------------------------------------------------------------------- */

.g-cookie{
  position:fixed; inset-inline:0; inset-block-end:0; z-index:var(--g-z-cookie);
  background:var(--g-charcoal); color:var(--g-ink-invert-2);
  border-block-start:4px solid var(--g-primary);
}
.g-cookie[hidden]{ display:none; }
.g-cookie__inner{
  display:grid; gap:var(--g-s4); align-items:center;
  padding-block:var(--g-s5);
}
@media (min-width:56rem){ .g-cookie__inner{ grid-template-columns:minmax(0,1fr) auto; gap:var(--g-s6); } }
.g-cookie h2{ font-size:var(--g-fs-h4); color:var(--g-white); margin-block-end:var(--g-s2); }
.g-cookie p{ font-size:var(--g-fs-micro); max-inline-size:70ch; }
.g-cookie a{ color:var(--g-white); }
.g-cookie__opts{ display:grid; gap:var(--g-s2); margin-block:var(--g-s4) 0; }
.g-cookie__opts label{ display:flex; align-items:center; gap:var(--g-s3); font-size:var(--g-fs-micro); }
.g-cookie__opts input{ inline-size:1.125rem; block-size:1.125rem; accent-color:var(--g-primary); }

/* --------------------------------------------------------------------------
   17  FOOTER
   -------------------------------------------------------------------------- */

.g-footer{ background:var(--g-charcoal); color:var(--g-ink-invert-2); }
.g-footer a{ color:var(--g-ink-invert-2); text-decoration:none; }
.g-footer a:hover{ color:var(--g-white); text-decoration:underline; }
.g-footer__top{
  display:grid; gap:var(--g-s6);
  padding-block:var(--g-s8) var(--g-s7);
  grid-template-columns:repeat(auto-fit,minmax(min(12rem,100%),1fr));
}
.g-footer__brand{ grid-column:1/-1; }
@media (min-width:64rem){ .g-footer__brand{ grid-column:span 2; } }
.g-footer__brand svg{ block-size:1.75rem; inline-size:auto; color:var(--g-white); }
.g-footer h2{ font-size:var(--g-fs-eyebrow); }
.g-footer__title{
  display:block; margin-block-end:var(--g-s4);
  font-family:var(--g-font-mono); font-size:var(--g-fs-eyebrow);
  letter-spacing:.14em; text-transform:uppercase; color:var(--g-white);
}
.g-footer li{ margin-block-end:var(--g-s2); font-size:var(--g-fs-small); }
.g-footer address{ font-style:normal; font-size:var(--g-fs-small); line-height:1.7; }
.g-footer__bottom{
  display:flex; flex-wrap:wrap; gap:var(--g-s3) var(--g-s5);
  align-items:center;
  padding-block:var(--g-s5);
  border-block-start:1px solid var(--g-rule-invert);
  font-size:var(--g-fs-micro);
}
.g-footer__bottom nav{ display:flex; flex-wrap:wrap; gap:var(--g-s3) var(--g-s5); }
.g-footer__spectrum{ display:grid; grid-template-columns:repeat(4,1fr); block-size:4px; }

/* --------------------------------------------------------------------------
   18  UTILITIES
   -------------------------------------------------------------------------- */

.g-flow > * + *{ margin-block-start:var(--g-s5); }
.g-mt6{ margin-block-start:var(--g-s6); }
.g-mt5{ margin-block-start:var(--g-s5); }
.g-mb5{ margin-block-end:var(--g-s5); }
.g-nowrap{ white-space:nowrap; }
.g-cols2{ columns:2; column-gap:var(--g-s6); }
@media (max-width:47.99rem){ .g-cols2{ columns:1; } }
.g-cols2 li{ break-inside:avoid; }
.g-external::after{ content:"↗"; margin-inline-start:.25em; font-size:.85em; }

/* --------------------------------------------------------------------------
   19  MOTION
   -------------------------------------------------------------------------- */

/* Reveals are opt-in: the hidden state is only applied once site.js has
   confirmed IntersectionObserver support and that motion is not reduced, and
   a load-time failsafe reveals anything still hidden. Content is therefore
   never invisible because a script did not run. */
.g-reveal-ready [data-reveal]{ opacity:0; transform:translateY(10px); }
.g-reveal-ready [data-reveal].is-in{
  opacity:1; transform:none;
  transition:opacity var(--g-dur-3) var(--g-ease-out),
             transform var(--g-dur-3) var(--g-ease-out);
  transition-delay:var(--g-delay,0ms);
}

/* Home hero load sequence */
.g-reveal-ready .g-spectrum__seg{ transform:scaleX(0); }
.g-reveal-ready .g-spectrum.is-in .g-spectrum__seg{
  transform:scaleX(1);
  transition:transform 420ms var(--g-ease-out);
  transition-delay:var(--g-delay,0ms);
}


@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
  [data-reveal]{ opacity:1!important; transform:none!important; }
  .g-spectrum__seg{ transform:scaleX(1)!important; }
}

/* --------------------------------------------------------------------------
   20  PRINT
   -------------------------------------------------------------------------- */

@media print{
  .g-header,.g-footer,.g-cookie,.g-cta,.g-skip,.g-slider__nav{ display:none!important; }
  body{ color:#000; background:#fff; }
  .g-hero,.g-phero,.g-section--dark{ background:#fff!important; color:#000!important; }
  .g-hero h1,.g-phero h1,.g-section--dark h2{ color:#000!important; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.8em; }
}