/* GlowUpLED colour system — values lifted verbatim from
   EasyLed/apps/control/src/constants/theme.ts (Palette) and docs/brand-brief.md. */
:root {
  /* ── Base neutrals: the dark studio ─────────────────────── */
  --color-charcoal:          #1A1A1A; /* app background — a studio at night, not pure black */
  --color-surface:           #242424; /* cards / raised surfaces */
  --color-surface-raised:    #2C2C2C; /* elevated / hover / slider track */
  --color-surface-selected:  #37312A; /* selected — warm-tinted */
  --color-hairline:          #333333; /* borders / dividers */

  /* ── Brand accents: the glow ────────────────────────────── */
  --color-amber:             #F5A623; /* primary accent */
  --color-amber-soft:        #FFC85C; /* lighter amber — gradients, glow borders */
  --color-coral:             #FF7A59; /* secondary accent / CTAs */

  /* ── Semantic status ────────────────────────────────────── */
  --color-success:           #5FD08A;
  --color-error:             #E5604D;

  /* ── Text ───────────────────────────────────────────────── */
  --color-text-primary:      #F0F0F0; /* off-white, never stark */
  --color-text-secondary:    #9A9A9A;
  --color-text-muted:        #5C5C5C;

  --color-white:             #FFFFFF;
  --color-black:             #000000;

  /* ── Translucent amber (glow, dim fills, borders) ───────── */
  --color-amber-glow:        rgba(245, 166, 35, 0.50);
  --color-amber-glow-soft:   rgba(245, 166, 35, 0.22);
  --color-amber-dim:         rgba(245, 166, 35, 0.12);
  --color-amber-border:      rgba(245, 166, 35, 0.35);
  --color-hairline-light:    rgba(255, 255, 255, 0.08); /* swatch rims */
  --color-scrim:             rgba(0, 0, 0, 0.55);

  /* ── LED swatch palette (BRAND_COLORS, lib/wled/looksCatalog.ts) ── */
  --led-warm-white:          #FFDAB0;
  --led-soft-amber:          #FFB03C;
  --led-gold:                #FFC840;
  --led-coral:               #FF7A59;
  --led-rose:                #FF698C;
  --led-sky:                 #5AAAFF;
  --led-mint:                #6EE6B4;
  --led-deep-blue:           #304ED2;

  /* ── Semantic aliases (use these in product UI) ─────────── */
  --bg:                      var(--color-charcoal);
  --surface-card:            var(--color-surface);
  --surface-hover:           var(--color-surface-raised);
  --surface-selected:        var(--color-surface-selected);
  --border:                  var(--color-hairline);
  --border-glow:             var(--color-amber-soft);

  --text-body:               var(--color-text-primary);
  --text-secondary:          var(--color-text-secondary);
  --text-muted:              var(--color-text-muted);

  --accent:                  var(--color-amber);
  --accent-soft:             var(--color-amber-soft);
  --accent-secondary:        var(--color-coral);
  --on-accent:               var(--color-charcoal); /* text/glyphs on an amber fill */

  --status-online:           var(--color-success);
  --status-error:            var(--color-error);
}

/* Families come from EasyLed/apps/control/src/global.css.
   Spline Sans is the display face; self-hosted from /assets/fonts (see readme.md → Font substitutions). */
/* latin-ext */
@font-face {
  font-family: 'Spline Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/spline-sans-latin-ext.woff2") format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Spline Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/spline-sans-latin.woff2") format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/spline-sans-mono-latin-ext.woff2") format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/spline-sans-mono-latin.woff2") format('woff2');
  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;
}

:root {
  /* ── Families ───────────────────────────────────────────── */
  --font-display: 'Spline Sans', Inter, ui-sans-serif, system-ui, sans-serif;
  --font-sans: var(--font-display);
  --font-mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-rounded: 'SF Pro Rounded', 'Hiragino Maru Gothic ProN', Meiryo, sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;
  --font: var(--font-display);

  /* ── Size scale (from components/themed-text.tsx + screens) ── */
  --text-2xs: 9px;   /* PRO pill */
  --text-xs: 12px;   /* code */
  --text-sm: 14px;   /* small / smallBold — labels, captions */
  --text-base: 16px; /* default body + UI */
  --text-lg: 18px;   /* text inputs */
  --text-xl: 22px;
  --text-2xl: 26px;  /* look-tile glyph, back chevron */
  --text-3xl: 32px;  /* subtitle — screen titles */
  --text-4xl: 40px;  /* wordmark on the connect hero */
  --text-5xl: 48px;  /* title */

  /* ── Line heights (absolute — matches the RN StyleSheet) ── */
  --leading-sm: 20px;
  --leading-base: 24px;
  --leading-3xl: 44px;
  --leading-4xl: 44px;
  --leading-5xl: 52px;
  --leading-normal: 1.5;
  --leading-tight: 1.15;

  /* ── Weights ────────────────────────────────────────────── */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;   /* body + UI default */
  --weight-semibold: 600; /* titles */
  --weight-bold: 700;     /* smallBold, buttons, key numbers */
  --weight-extrabold: 800;/* PRO pill */

  /* ── Letter spacing ─────────────────────────────────────── */
  --tracking-normal: 0;
  --tracking-caps: 1px;   /* uppercase section labels */
  --tracking-pill: 0.5px;

  /* ── Numerals: LED counts, watts and metres are everywhere ── */
  --numeric-tabular: tabular-nums;
}

/* Spacing + Radii — exact values from constants/theme.ts (Spacing, Radii). */
:root {
  /* ── Base scale (named as in code) ──────────────────────── */
  --space-half: 2px;
  --space-one: 4px;
  --space-two: 8px;
  --space-three: 16px;
  --space-four: 24px;
  --space-five: 32px;
  --space-six: 64px;

  /* ── Numeric aliases ───────────────────────────────────── */
  --space-2: var(--space-half);
  --space-4: var(--space-one);
  --space-8: var(--space-two);
  --space-16: var(--space-three);
  --space-24: var(--space-four);
  --space-32: var(--space-five);
  --space-64: var(--space-six);

  /* ── Semantic ───────────────────────────────────────────── */
  --space-screen-x: var(--space-four);   /* mobile screen gutter */
  --space-stack: var(--space-four);      /* gap between screen sections */
  --space-section-gap: var(--space-three);/* gap inside a section */
  --space-card: var(--space-three);      /* card padding */
  --wrap-max: 800px;                     /* MaxContentWidth */

  /* ── Radii — soft, consumer-lighting feel ───────────────── */
  --radius-sm: 8px;
  --radius-md: 14px;   /* inputs, cards, swatches */
  --radius-lg: 20px;   /* look tiles */
  --radius-xl: 28px;   /* power button, hero surfaces */
  --radius-pill: 999px;

  /* ── Touch targets (Control app is a premium remote) ────── */
  --hit-min: 44px;
  --hit-button: 52px;
  --hit-power: 84px;
  --hit-slider: 46px;
  --swatch-size: 52px;
}

/* Glow, shadow, gradient and motion — derived from the RN shadow props in
   components/control/*.tsx (shadowColor/Opacity/Radius → CSS box-shadow). */
:root {
  /* ── Glow: the signature effect. Always 0-offset, always amber. ── */
  --glow-power-on: 0 0 18px var(--color-amber-glow);          /* active power button */
  --glow-logo: 0 0 24px rgba(245, 166, 35, 0.60);             /* hero brand dot */
  --glow-dot: 0 0 8px rgba(245, 166, 35, 0.80);               /* device status dot */
  --glow-focus: 0 0 0 3px var(--color-amber-glow-soft);       /* keyboard focus ring */

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-thumb: 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.25);
  --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.45);

  /* ── Gradients ──────────────────────────────────────────── */
  --gradient-glow: radial-gradient(circle at 50% 50%, rgba(245,166,35,0.28) 0%, transparent 70%);
  --gradient-hue: linear-gradient(90deg,
    #FF0000 0%, #FFBF00 14%, #80FF00 29%, #00FF40 43%,
    #00FFFF 57%, #0040FF 71%, #8000FF 86%, #FF0080 100%);
  --gradient-amber: linear-gradient(135deg, var(--color-amber-soft) 0%, var(--color-amber) 60%, var(--color-coral) 100%);
  --gradient-scrim-bottom: linear-gradient(180deg, transparent 0%, rgba(26,26,26,0.92) 100%);

  /* ── Blur ───────────────────────────────────────────────── */
  --blur-pro-lock: blur(6px);
  --blur-overlay: blur(14px);

  /* ── Motion — short, no bounce, no spring on colour ────── */
  --duration-instant: 80ms;
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --transition-fast: all var(--duration-fast) var(--ease-out);
  --transition-normal: all var(--duration-normal) var(--ease-out);

  /* ── Interaction states ─────────────────────────────────── */
  --opacity-pressed: 0.7;
  --opacity-disabled: 0.4;
  --opacity-dimmed: 0.5;
  --border-width-hairline: 1px;
  --border-width-selected: 3px;
}

/* Minimal element defaults so any consumer page starts on-brand. */
:root { color-scheme: dark }
h1, h2, h3, h4 { margin: 0; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-normal) }
p { margin: 0; text-wrap: pretty }
button { font-family: inherit }
:focus-visible { outline: none; box-shadow: var(--glow-focus) }
.tabular { font-variant-numeric: var(--numeric-tabular) }

/* GlowUpLED — marketing site v2. Built on the GlowUpLED design system tokens.
   Chrome is charcoal + one amber accent; glow means "this is on". No shadows on dark. */

:root{--gutter:clamp(20px,5vw,64px);--section:clamp(72px,10vw,140px);--wrap:1200px;--narrow:820px}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text-body)}
body{font-family:var(--font-display);font-size:var(--text-base);line-height:var(--leading-normal);font-weight:var(--weight-medium);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none;transition:var(--transition-fast)}
a:hover{color:var(--accent-soft)}
:focus-visible{outline:none;box-shadow:var(--glow-focus)}
h1,h2,h3,h4,h5{margin:0;font-weight:var(--weight-semibold);letter-spacing:-0.02em;line-height:1.05}
p{margin:0}
::selection{background:var(--color-amber-glow-soft);color:var(--text-body)}

.shell{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section);position:relative}
.section.raised{background:var(--color-surface);border-block:1px solid var(--border)}
.rule{height:1px;background:var(--border);border:0;margin:0}

/* type */
.display{font-size:clamp(40px,6.4vw,84px);line-height:0.98;letter-spacing:-0.03em;font-weight:var(--weight-semibold)}
.h2{font-size:clamp(30px,3.9vw,54px);line-height:1.04;letter-spacing:-0.025em}
.h3{font-size:clamp(20px,1.7vw,26px);line-height:1.2;letter-spacing:-0.015em;font-weight:var(--weight-semibold)}
.label{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-secondary);font-weight:var(--weight-medium)}
.label.amber{color:var(--accent)}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--text-secondary);max-width:56ch;text-wrap:pretty}
.body{color:var(--text-secondary);line-height:1.6;text-wrap:pretty}
.amber{color:var(--accent)}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(26,26,26,0.86);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:var(--transition-normal)}
.nav.scrolled{border-bottom-color:var(--border)}
.nav-inner{display:flex;align-items:center;gap:var(--space-five);height:76px}
.nav-links{display:flex;gap:var(--space-four);margin-left:auto}
.nav-links a{color:var(--text-secondary);font-size:var(--text-sm)}
.nav-links a:hover{color:var(--text-body)}
.nav-cta{display:flex;gap:var(--space-two)}
@media(max-width:900px){.nav-links{display:none}.nav-cta{margin-left:auto}}

/* wordmark / logo */
.wordmark{display:inline-flex;align-items:center;gap:9px}
.wordmark svg{flex:0 0 auto;filter:drop-shadow(0 0 6px rgba(245,166,35,.5))}
.wordmark .word{font-family:var(--font-display);font-size:22px;line-height:1.1;font-weight:var(--weight-semibold);color:var(--text-body);letter-spacing:-0.015em;white-space:nowrap}
.wordmark .word .led{color:var(--accent)}
.wordmark.footer svg{width:23px;height:23px}
.wordmark.footer .word{font-size:22px}

/* status dot */
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 auto}
.status-dot.amber{background:var(--accent);box-shadow:var(--glow-dot)}

/* buttons (design-system Button is used for real actions; these are link-shaped twins) */
.btn{display:inline-flex;align-items:center;gap:var(--space-two);font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-base);border-radius:var(--radius-pill);padding:14px 26px;border:1px solid transparent;transition:var(--transition-fast);cursor:pointer}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent);color:var(--on-accent);box-shadow:var(--glow-power-on)}
.btn-secondary{background:var(--surface-card);color:var(--text-body);border-color:var(--border)}
.btn-secondary:hover{background:var(--surface-hover);color:var(--text-body)}
.btn-ghost{background:transparent;color:var(--accent);padding-inline:0}
.btn-ghost:hover{color:var(--accent-soft)}
.btn-sm{padding:9px 18px;font-size:var(--text-sm)}

/* the design-system Button component (used by the enquiry form's submit action) */
.button{font-family:var(--font-display);font-size:var(--text-base);line-height:var(--leading-base);font-weight:var(--weight-bold);border-radius:var(--radius-md);border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-two);cursor:pointer;transition:var(--transition-fast);text-align:center;background:var(--accent);color:var(--on-accent);min-height:60px;padding:0 var(--space-five);font-size:var(--text-lg);box-shadow:var(--glow-power-on)}
.button:hover{filter:brightness(1.03)}

/* section heads */
.head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--space-six);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
@media(max-width:900px){.head{grid-template-columns:1fr;gap:var(--space-four)}}
.head .h2{margin-top:var(--space-three)}

/* manifesto */
.manifesto{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-six);margin-top:clamp(40px,5vw,64px)}
@media(max-width:900px){.manifesto{grid-template-columns:1fr;gap:var(--space-five)}}
.manifesto .h3{margin-bottom:var(--space-two)}

/* case study */
.case-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:start}
@media(max-width:900px){.case-grid{grid-template-columns:1fr}}
.case-beats{display:flex;flex-direction:column;gap:var(--space-four);margin-top:var(--space-five)}
.beat{display:grid;grid-template-columns:auto 1fr;gap:var(--space-three);align-items:start}
.beat .k{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--accent);padding-top:4px;min-width:92px}
.case-shots{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-three)}
.case-shots .image-slot{display:block;width:100%;height:200px;object-fit:cover;border-radius:var(--radius-md);overflow:hidden}
.case-shots .wide{grid-column:span 2;height:440px}
.credit{display:flex;flex-wrap:wrap;gap:var(--space-three);align-items:flex-start;margin-top:var(--space-four);padding-top:var(--space-four);border-top:1px solid var(--border);color:var(--text-secondary);font-size:var(--text-sm)}
.credit .status-dot{margin-top:6px}
.credit a{color:inherit;text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:2px}
.credit a:hover{color:var(--text-body);text-decoration-color:var(--text-secondary)}

/* process */
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
@media(max-width:900px){.stages{grid-template-columns:1fr}}
.stage{background:var(--bg);padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;gap:var(--space-three)}
.stage-n{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-caps);color:var(--text-muted)}
.stage h3{color:var(--text-body)}
.stage ul{list-style:none;margin:var(--space-two) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-two)}
.stage li{display:grid;grid-template-columns:auto 1fr;gap:var(--space-two);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-secondary)}
.stage li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);margin-top:8px}
.stage .track{height:2px;border-radius:2px;background:var(--color-hairline);position:relative;overflow:hidden;margin-top:auto}
.stage .track i{position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--accent);box-shadow:var(--glow-power-on)}

/* volume */
.volume{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
@media(max-width:900px){.volume{grid-template-columns:1fr}}
.run-scale{display:flex;flex-direction:column;gap:var(--space-three)}
.run{display:grid;grid-template-columns:110px 1fr;gap:var(--space-three);align-items:center}
.run .n{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-secondary);letter-spacing:var(--tracking-caps);text-transform:uppercase}
.run .dots{display:flex;gap:6px;flex-wrap:wrap}
.run .dots span{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:var(--glow-dot)}
.run .dots span.off{background:var(--color-hairline);box-shadow:none}

/* capabilities */
.makes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-three)}
@media(max-width:900px){.makes{grid-template-columns:1fr}}
.make-card{height:100%;background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;transition:var(--transition-fast)}
.make{display:flex;flex-direction:column;gap:var(--space-two);height:100%}
.make .glyph{font-size:22px;color:var(--accent);line-height:1;margin-bottom:var(--space-two)}
.make p{font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-secondary)}

/* living with it */
.live{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
@media(max-width:900px){.live{grid-template-columns:1fr}}
.live-chips{display:flex;flex-wrap:wrap;gap:var(--space-two);margin-top:var(--space-four)}
.chip{display:inline-flex;align-items:center;gap:var(--space-two);border:1px solid var(--border);border-radius:var(--radius-pill);padding:8px 16px;font-size:var(--text-sm);color:var(--text-secondary);background:var(--surface-card)}
.soon{display:flex;gap:var(--space-three);align-items:flex-start;margin-top:var(--space-four);padding-top:var(--space-four);border-top:1px solid var(--border);font-size:var(--text-sm);color:var(--text-muted);max-width:60ch}
.live-card{background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}

/* enquiry */
.enquire{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:start}
@media(max-width:900px){.enquire{grid-template-columns:1fr}}
.form{display:flex;flex-direction:column;gap:var(--space-four)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-three)}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:var(--space-two)}
.field > span{font-size:var(--text-sm);line-height:var(--leading-sm);font-weight:var(--weight-bold);letter-spacing:var(--tracking-caps);color:var(--text-secondary);text-transform:uppercase}
.field input,.field textarea,.field select{background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-three);color:var(--text-body);font-size:var(--text-lg);font-family:var(--font-display);outline:none;transition:var(--transition-fast);resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent)}
.field .hint{font-size:var(--text-sm);color:var(--text-muted);font-weight:var(--weight-medium);letter-spacing:0;text-transform:none}
.seg{display:flex;flex-wrap:wrap;gap:var(--space-two)}
.seg button{background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-pill);padding:10px 18px;color:var(--text-secondary);font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-medium);cursor:pointer;transition:var(--transition-fast)}
.seg button:hover{background:var(--surface-hover);color:var(--text-body)}
.seg button[aria-pressed="true"]{background:var(--surface-selected);border-color:var(--accent);color:var(--accent)}
.form-sent{display:flex;gap:var(--space-three);align-items:flex-start;border:1px solid var(--color-amber-border);background:var(--surface-selected);border-radius:var(--radius-md);padding:var(--space-four)}
.form-sent[hidden],.form[hidden]{display:none}
.form-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}

/* footer */
.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-six);padding-block:var(--section) var(--space-five)}
@media(max-width:900px){.foot{grid-template-columns:1fr;gap:var(--space-five)}}
.foot p{color:var(--text-muted);font-size:var(--text-sm);line-height:var(--leading-sm);max-width:42ch;margin-top:var(--space-three)}
.foot h5{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-secondary);font-weight:var(--weight-medium);margin-bottom:var(--space-three)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-two)}
.foot ul a{color:var(--text-secondary);font-size:var(--text-sm)}
.foot ul a:hover{color:var(--accent-soft)}
.foot-bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-three);padding-block:var(--space-four);border-top:1px solid var(--border);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)}

.image-slot{--is-radius:var(--radius-md);display:flex;width:100%;align-items:center;justify-content:center;text-align:center;background:var(--surface-card);border:1px dashed var(--border);border-radius:var(--is-radius);color:var(--text-muted);font-size:var(--text-xs);line-height:1.5;padding:var(--space-three)}
img.image-slot,#live-shot{border:none;background:none;padding:0}
.case-shots picture,.live-card picture,.hero-media picture{display:contents}
picture source{display:none}
.powered{display:inline-flex;align-items:center;gap:var(--space-two);margin-top:var(--space-four);padding:8px 14px 8px 12px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface-card);color:var(--text-secondary)}
.powered:hover{background:var(--surface-hover);color:var(--text-body)}
.powered .gw-logo{width:18px;height:18px;flex:0 0 auto}
.powered .gw-name{font-weight:var(--weight-bold);font-size:var(--text-sm);color:inherit}
.powered .gw-accent{color:#E45A18}

/* hero */
.hero{position:relative;min-height:min(92vh,900px);display:flex;align-items:flex-end;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media picture{display:block;width:100%;height:100%}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero-media::after{content:"";position:absolute;inset:0;--hs:0.72;background:linear-gradient(180deg,rgba(26,26,26,calc(var(--hs))) 0%,rgba(26,26,26,calc(var(--hs) * 0.48)) 32%,rgba(26,26,26,calc(0.4 + var(--hs) * 0.62)) 78%,var(--bg) 100%)}
.hero-body{position:relative;z-index:2;width:100%;padding-block:clamp(48px,9vw,110px)}
.hero-body .display{max-width:16ch;margin-top:20px}
.hero-body .lede{margin-top:var(--space-four);max-width:52ch;color:var(--text-body);opacity:.86}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-three);margin-top:var(--space-five)}
.hero-caption{position:absolute;right:var(--gutter);bottom:var(--space-four);z-index:2;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-secondary);text-align:right;line-height:1.5}
@media(max-width:760px){.hero-caption{display:none}}
.eyebrow-row{display:flex;align-items:center;gap:var(--space-two)}