/*
 * TECside website — V2 theme: the TECside Design System (Huisstijl 2026, "Website — Bold").
 * Loaded instead of style.css when content.design.theme = 'v2' (or ?theme=v2). See render-v2.js.
 *
 * 1. Fonts — self-hosted (no third-party requests): Archivo Black (display), Archivo (UI,
 *    stand-in for Acumin Pro), Hanken Grotesk (body). Latin subsets of the OFL fonts.
 * 2. DESIGN SYSTEM LAYER — copied verbatim from the Claude Design project "TECside Design
 *    System" (tokens/*.css and the CSS of components/*.jsx; local copy of 2026-10-07).
 *    Do not edit here; re-copy when the design system changes.
 * 3. SITE LAYER — this site's layout, blocks and motion, built only from those tokens.
 */
@font-face{font-family:'Archivo Black';src:url('/assets/fonts/archivo-black-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Archivo';src:url('/assets/fonts/archivo-var.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('/assets/fonts/hanken-grotesk-var.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('/assets/fonts/hanken-grotesk-italic-var.woff2') format('woff2');font-weight:400 500;font-style:italic;font-display:swap}

/* =====================================================================
   DESIGN SYSTEM LAYER (verbatim)
   ===================================================================== */

/* ---- tokens/colors.css ---- */
:root {
  /* --- Brand spectrum (raw stops, sampled from logo) --- */
  --ts-magenta: #DC1E63;   /* rose / hot pink   rgb(220,30,99)  */
  --ts-purple:  #8F2E90;   /* violet            rgb(143,46,144) */
  --ts-orange:  #F27A3C;   /* warm orange       rgb(242,122,60) */
  --ts-gold:    #FFC20E;   /* signal gold       rgb(255,194,14) */

  /* Tints & shades of the spectrum anchors (for hovers, fills, borders) */
  --ts-magenta-600: #B81450;
  --ts-magenta-100: #FBE1EB;
  --ts-purple-600:  #732473;
  --ts-purple-100:  #F1E4F1;
  --ts-orange-600:  #D9612A;
  --ts-orange-100:  #FDEBDF;
  --ts-gold-600:    #E0A400;
  --ts-gold-100:    #FFF4D2;

  /* --- Ink & neutrals (charcoal, not pure black) --- */
  --ts-ink:      #262626;   /* the wordmark charcoal — primary text     */
  --ts-black:    #141414;   /* near-black surfaces / dark canvas         */
  --ts-graphite: #3D3D3D;
  --ts-gray-700: #565656;
  --ts-gray-600: #6E6E6E;   /* secondary text                           */
  --ts-gray-500: #8C8C8C;   /* muted / placeholder                      */
  --ts-gray-400: #B4B4B4;
  --ts-gray-300: #D6D6D6;   /* borders / dividers                       */
  --ts-gray-200: #E7E7E7;   /* subtle fills                             */
  --ts-gray-100: #F2F2F2;   /* app background                           */
  --ts-gray-50:  #F8F8F8;
  --ts-white:    #FFFFFF;

  /* --- Semantic status (derived from the spectrum, kept legible) --- */
  --ts-success: #2E9E6B;
  --ts-success-bg: #E4F5EC;
  --ts-warning: var(--ts-gold-600);
  --ts-warning-bg: var(--ts-gold-100);
  --ts-danger:  var(--ts-magenta-600);
  --ts-danger-bg: var(--ts-magenta-100);
  --ts-info:    var(--ts-purple);
  --ts-info-bg: var(--ts-purple-100);

  /* ============================================================
     Semantic aliases — reference these in components, not raw values
     ============================================================ */
  --text-strong:    var(--ts-ink);
  --text-body:      var(--ts-graphite);
  --text-muted:     var(--ts-gray-600);
  --text-subtle:    var(--ts-gray-500);
  --text-on-dark:   var(--ts-white);
  --text-on-accent: var(--ts-white);

  --surface-page:   var(--ts-gray-100);
  --surface-card:   var(--ts-white);
  --surface-sunken: var(--ts-gray-50);
  --surface-dark:   var(--ts-black);
  --surface-inverse:var(--ts-ink);

  --border-subtle:  var(--ts-gray-200);
  --border-default: var(--ts-gray-300);
  --border-strong:  var(--ts-gray-400);

  --accent:         var(--ts-magenta);
  --accent-hover:   var(--ts-magenta-600);
  --accent-soft:    var(--ts-magenta-100);
  --focus-ring:     var(--ts-purple);
}

/* ---- tokens/typography.css ---- */
:root {
  --ts-font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --ts-font-sans:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ts-font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Semantic font aliases */
  --font-title:    var(--ts-font-display);
  --font-subtitle: var(--ts-font-sans);
  --font-ui:       var(--ts-font-sans);
  --font-body:     var(--ts-font-body);

  /* Type scale (px, 1.250 major-third-ish, tuned for the display face) */
  --ts-text-xs:   12px;
  --ts-text-sm:   14px;
  --ts-text-base: 16px;
  --ts-text-md:   18px;
  --ts-text-lg:   22px;
  --ts-text-xl:   28px;
  --ts-text-2xl:  36px;
  --ts-text-3xl:  48px;
  --ts-text-4xl:  64px;
  --ts-text-5xl:  84px;
  --ts-text-6xl:  104px;  /* contact-kop, volledige breedte */
  --ts-text-7xl:  150px;  /* hero — bold, nooit in care */

  /* Weights */
  --ts-weight-regular: 400;
  --ts-weight-medium:  500;
  --ts-weight-semibold:600;
  --ts-weight-bold:    700;

  /* Line heights */
  --ts-leading-tight:   1.02;  /* display all-caps stacks */
  --ts-leading-snug:    1.2;
  --ts-leading-normal:  1.45;
  --ts-leading-relaxed: 1.65;  /* body long-form */

  /* Letter spacing — display & UI labels run slightly tight/wide */
  --ts-tracking-display: -0.01em;
  --ts-tracking-hero:    -0.025em; /* Archivo Black 64px+ */
  --ts-tracking-label:   0.08em;   /* uppercase eyebrows / buttons */
  --ts-tracking-eyebrow: 0.26em;   /* eyebrow met spectrumstreep */
  --ts-tracking-mono:    0.14em;   /* technische mono-labels op de zon */
  --ts-tracking-wide:    0.14em;
  --ts-tracking-normal:  0;
}

/* ---- tokens/spacing.css ---- */
:root {
  --ts-space-0:  0;
  --ts-space-1:  4px;
  --ts-space-2:  8px;
  --ts-space-3:  12px;
  --ts-space-4:  16px;
  --ts-space-5:  20px;
  --ts-space-6:  24px;
  --ts-space-8:  32px;
  --ts-space-10: 40px;
  --ts-space-12: 48px;
  --ts-space-16: 64px;
  --ts-space-20: 80px;
  --ts-space-24: 96px;
  --ts-space-32: 128px;

  /* Layout */
  --ts-container:  1200px;
  --ts-container-wide: 1440px;
  --ts-gutter:     24px;
}

/* ---- tokens/effects.css ---- */
:root {
  /* Radii — modest, engineered feel (the wordmark is squared).
     Huisstijl 2026: bold gebruikt 2xs–sm (2–6px), care uitsluitend 2xs (2px).
     md/lg/xl blijven bestaan voor app-UI (modals, panelen), niet voor merkbeelden. */
  --ts-radius-2xs: 2px;
  --ts-radius-xs:  3px;
  --ts-radius-sm:  6px;
  --ts-radius-md:  10px;
  --ts-radius-lg:  16px;
  --ts-radius-xl:  24px;
  --ts-radius-pill: 999px;

  /* Borders */
  --ts-border-hair: 1px;
  --ts-border-thick: 2px;

  /* Shadows — soft, cool-neutral, never heavy */
  --ts-shadow-xs: 0 1px 2px rgba(20,20,20,.06);
  --ts-shadow-sm: 0 1px 3px rgba(20,20,20,.08), 0 1px 2px rgba(20,20,20,.06);
  --ts-shadow-md: 0 4px 12px rgba(20,20,20,.10), 0 2px 4px rgba(20,20,20,.06);
  --ts-shadow-lg: 0 12px 32px rgba(20,20,20,.14), 0 4px 8px rgba(20,20,20,.06);
  --ts-shadow-xl: 0 24px 60px rgba(20,20,20,.20);
  /* Colored glow — evokes stage light; use sparingly on hero accents */
  /* Glow volgt de drager: magenta op licht, goud op donker. Nooit beide in één beeld. */
  --ts-glow-magenta: 0 8px 28px rgba(220,30,99,.35);
  --ts-glow-gold:    0 8px 28px rgba(255,194,14,.35);

  /* ===== Signature brand gradients ===== */
  /* The hero light-spectrum sweep */
  --ts-gradient-brand: linear-gradient(120deg, #8F2E90 0%, #DC1E63 32%, #F27A3C 68%, #FFC20E 100%); /* @kind other */
  /* Vertical variant — matches the logo's bar orientation */
  --ts-gradient-vertical: linear-gradient(180deg, #FFC20E 0%, #F27A3C 34%, #DC1E63 70%, #8F2E90 100%); /* @kind other */
  /* Warm-only (orange → gold) */
  --ts-gradient-warm: linear-gradient(120deg, #F27A3C 0%, #FFC20E 100%); /* @kind other */
  /* Cool-only (purple → magenta) */
  --ts-gradient-cool: linear-gradient(120deg, #8F2E90 0%, #DC1E63 100%); /* @kind other */
  /* Dark canvas wash for hero sections over near-black */
  --ts-gradient-dark: linear-gradient(160deg, #141414 0%, #262626 100%); /* @kind other */

  /* Motion */
  --ts-ease: cubic-bezier(.4, 0, .2, 1); /* @kind other */
  --ts-ease-out: cubic-bezier(.16, 1, .3, 1); /* @kind other */
  --ts-dur-fast: 120ms; /* @kind other */
  --ts-dur: 200ms; /* @kind other */
  --ts-dur-slow: 360ms; /* @kind other */
}

/* ---- tokens/lines.css ---- */
:root {
  /* Latten — de kern. Vlakken worden gelat, nooit vol gevuld. */
  /* dikte van één lat/lijn, en de afstand hart-op-hart */
  --ts-line-weight:  1.5px; /* @kind spacing */
  --ts-line-pitch:   12px; /* @kind spacing */
  --ts-slats:        repeating-linear-gradient(180deg,#000 0 var(--ts-line-weight),transparent var(--ts-line-weight) var(--ts-line-pitch)); /* @kind other */
  --ts-slats-fine:   repeating-linear-gradient(180deg,#000 0 1px,transparent 1px 6px); /* @kind other */
  --ts-slats-coarse: repeating-linear-gradient(180deg,#000 0 2px,transparent 2px 20px); /* @kind other */
  /* Lijnen DOOR de vorm — 1px op 4px. Door de hoofdkop, de kerncijfers en de
   eerste knop; nooit als overlay over een hele sectie of over lopende tekst.
   Alleen in de bold-stemming. */
  --ts-scanlines:    repeating-linear-gradient(180deg,rgba(0,0,0,.22) 0 1px,transparent 1px 4px); /* @kind other */
  /* Meetraster — vloer en achtergronden. */
  --ts-grid-line:    rgba(255,255,255,.09);
  --ts-grid:         repeating-linear-gradient(90deg,var(--ts-grid-line) 0 1px,transparent 1px 88px),
                     repeating-linear-gradient(0deg,var(--ts-grid-line) 0 1px,transparent 1px 64px);
}

/* Latten als masker over een gradiëntvlak: het retro-effect van de zon. */
.ts-slat{-webkit-mask-image:var(--ts-slats);mask-image:var(--ts-slats)}
.ts-slat--fine{-webkit-mask-image:var(--ts-slats-fine);mask-image:var(--ts-slats-fine)}
.ts-slat--coarse{-webkit-mask-image:var(--ts-slats-coarse);mask-image:var(--ts-slats-coarse)}

/* Lijnen binnen één vorm: zet als laatste kind IN de kop of de knop
   (niet in de sectie), zodat de lijnen door die vorm lopen. */
.ts-lines{position:absolute;inset:0;pointer-events:none;z-index:2;background:var(--ts-scanlines);display:var(--mode-scanlines,block)}
/* Gradiënttekst latten: op de tekst zelf, als masker. */
.ts-lines-text{-webkit-mask-image:repeating-linear-gradient(180deg,#000 0 3px,transparent 3px 4px);mask-image:repeating-linear-gradient(180deg,#000 0 3px,transparent 3px 4px)}

/* Perspectiefvloer — het horizonraster onder de zon. */
.ts-floor{position:absolute;left:-30%;right:-30%;bottom:0;height:540px;pointer-events:none;background:var(--ts-grid);transform:perspective(560px) rotateX(74deg);transform-origin:bottom;-webkit-mask-image:linear-gradient(180deg,transparent,#000 55%);mask-image:linear-gradient(180deg,transparent,#000 55%)}

/* Contourletter — de tweede regel van een kop. Max. één per beeld. */
.ts-outline{-webkit-text-fill-color:transparent;-webkit-text-stroke:2px currentColor}
.ts-outline--thin{-webkit-text-stroke-width:1.4px}

/* Gelatte letter — spectrum door latten heen. Alleen display-maten (64px+). */
.ts-slat-text{background:var(--ts-gradient-vertical);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-mask-image:var(--ts-slats-fine);mask-image:var(--ts-slats-fine)}

/* ---- tokens/modes.css ---- */
.ts-bold {
  --mode-surface:        var(--ts-black);
  --mode-surface-alt:    #1B1B1B;
  --mode-paper:          var(--ts-white);
  --mode-text:           var(--ts-white);
  --mode-text-muted:     rgba(255,255,255,.7);
  --mode-line:           rgba(255,255,255,.16);
  --mode-accent:         var(--ts-magenta);
  --mode-rule:           var(--ts-gradient-brand);
  --mode-heading-font:   var(--ts-font-display);
  --mode-heading-case:   uppercase; /* @kind other */
  --mode-heading-weight: 400;
  --mode-heading-track:  -.02em;
  --mode-heading-leading:.94;
  --mode-figure-tone:    spectrum; /* @kind other */
  --mode-scanlines:      block; /* @kind other */
}
.ts-care {
  --mode-surface:        #FAF8F5;
  --mode-surface-alt:    var(--ts-white);
  --mode-paper:          var(--ts-white);
  --mode-text:           var(--ts-ink);
  --mode-text-muted:     var(--ts-gray-700);
  --mode-line:           var(--ts-gray-200);
  --mode-accent:         var(--ts-gold-600);
  --mode-rule:           var(--ts-gold-600);
  --mode-heading-font:   var(--ts-font-body);
  --mode-heading-case:   none; /* @kind other */
  --mode-heading-weight: 500;
  --mode-heading-track:  -.015em;
  --mode-heading-leading:1.16;
  --mode-figure-tone:    care; /* @kind other */
  --mode-scanlines:      none; /* @kind other */
}
/* Handige helpers die de stemming volgen */
.ts-mode-surface{background:var(--mode-surface);color:var(--mode-text)}
.ts-mode-heading{font-family:var(--mode-heading-font);font-weight:var(--mode-heading-weight);text-transform:var(--mode-heading-case);letter-spacing:var(--mode-heading-track);line-height:var(--mode-heading-leading)}
.ts-mode-rule{height:4px;border:0;background:var(--mode-rule);border-radius:2px}
.ts-mode-scan{position:absolute;inset:0;display:var(--mode-scanlines);pointer-events:none;background:repeating-linear-gradient(180deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}

/* ============================================================
   Care overschrijft de accentkleuren van de formulieren.
   Geen roze, geen paars in de rustige stemming: oker als enige
   accent, inkt voor de aan-standen, grijs voor focus.
   ============================================================ */
.ts-care .tsCheck input:checked + .tsCheck__box{background:var(--ts-gold-600);border-color:var(--ts-gold-600)}
.ts-care .tsRadio input:checked + .tsRadio__dot{border-color:var(--ts-gold-600)}
.ts-care .tsRadio__dot::after{background:var(--ts-gold-600)}
.ts-care .tsSwitch input:checked + .tsSwitch__track{background:var(--ts-gold-600)}
.ts-care .tsField__req{color:var(--ts-gold-600)}
.ts-care .tsInput:focus,.ts-care .tsTextarea:focus,.ts-care .tsSelect:focus{border-color:var(--ts-ink);box-shadow:0 0 0 3px rgba(20,20,20,.08)}
.ts-care .tsInput--invalid,.ts-care .tsTextarea--invalid,.ts-care .tsSelect--invalid{border-color:var(--ts-gold-600)}
.ts-care .tsInput--invalid:focus{box-shadow:0 0 0 3px rgba(224,164,0,.16)}
.ts-care .tsField__hint--err{color:var(--ts-gold-600)}
.ts-care .tsCheck input:focus-visible + .tsCheck__box,
.ts-care .tsRadio input:focus-visible + .tsRadio__dot,
.ts-care .tsSwitch input:focus-visible + .tsSwitch__track,
.ts-care .tsBtn:focus-visible,
.ts-care .tsIconBtn:focus-visible{outline-color:var(--ts-ink)}
.ts-care .tsInput,.ts-care .tsTextarea,.ts-care .tsSelect{border-radius:2px}

/* ---- components/forms/Button.jsx ---- */
.tsBtn{--_bg:var(--ts-magenta);--_fg:#fff;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ts-font-sans);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  border:0;cursor:pointer;border-radius:var(--ts-radius-sm);white-space:nowrap;text-decoration:none;
  transition:transform var(--ts-dur-fast) var(--ts-ease),box-shadow var(--ts-dur) var(--ts-ease),background var(--ts-dur) var(--ts-ease),filter var(--ts-dur) var(--ts-ease);}
.tsBtn:focus-visible{outline:2px solid var(--ts-purple);outline-offset:2px}
.tsBtn:active{transform:scale(.98)}
.tsBtn[disabled]{cursor:not-allowed;opacity:.45;pointer-events:none}
.tsBtn--sm{height:34px;padding:0 14px;font-size:12px}
.tsBtn--md{height:44px;padding:0 22px;font-size:13px}
.tsBtn--lg{height:54px;padding:0 30px;font-size:14px}
.tsBtn--full{width:100%}
/* Gradient — uitzondering, nooit meer dan één per beeld. Het spectrum vult de knop
   vol; de lijnen zijn alleen een accent bovenaan dat bij hover naar onder opengaat. */
.tsBtn--gradient{position:relative;overflow:hidden;background:var(--ts-gradient-brand);color:#fff}
.tsBtn--gradient>*{position:relative;z-index:2}
.tsBtn--gradient::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(180deg,rgba(20,20,20,.5) 0 1px,transparent 1px 5px);
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 46%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 46%,transparent 100%);
  clip-path:inset(0 0 58% 0);transition:clip-path 520ms cubic-bezier(.2,.7,.25,1),opacity 260ms var(--ts-ease)}
.tsBtn--gradient:hover::after{clip-path:inset(0 0 0 0);opacity:.62}
.tsBtn--gradient:hover{box-shadow:0 0 0 1px rgba(255,194,14,.5),0 6px 34px rgba(255,194,14,.38)}
.tsBtn--solid{background:var(--ts-magenta);color:#fff}
.tsBtn--solid:hover{background:var(--ts-magenta-600)}
/* ── Huisstijl 2026 · de knop van de site ──
   Vlak met haarfijne latten erdóór en een halo die aanslaat bij hover.
   De halo volgt de drager: ROZE op wit, GEEL op zwart. */
.tsBtn--dark,.tsBtn--light{position:relative;overflow:hidden}
.tsBtn--dark>*,.tsBtn--light>*{position:relative;z-index:2}
.tsBtn--dark::after,.tsBtn--light::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--_slat)}
.tsBtn--dark{--_slat:repeating-linear-gradient(180deg,rgba(255,255,255,.16) 0 1px,transparent 1px 4px);background:var(--ts-ink);color:#fff}
.tsBtn--dark:hover{box-shadow:0 0 0 1px rgba(220,30,99,.5),0 6px 34px rgba(220,30,99,.38)}
.tsBtn--light{--_slat:repeating-linear-gradient(180deg,rgba(20,20,20,.22) 0 1px,transparent 1px 4px);background:#fff;color:var(--ts-ink)}
.tsBtn--light:hover{box-shadow:0 0 0 1px rgba(255,194,14,.55),0 6px 34px rgba(255,194,14,.45)}
/* gelat — het retro-alfabet: de vulling is een gelat spectrum, niet een vlakke sweep */
.tsBtn--slat{background:var(--ts-ink);color:#fff;position:relative;overflow:hidden}
.tsBtn--slat::before{content:"";position:absolute;inset:0;background:var(--ts-gradient-vertical);-webkit-mask-image:var(--ts-slats-fine);mask-image:var(--ts-slats-fine);opacity:.55;transition:opacity var(--ts-dur) var(--ts-ease)}
.tsBtn--slat:hover::before{opacity:.9}
.tsBtn--slat>*{position:relative;z-index:1}
/* gelatte contourknop: lijnen alleen bij hover */
.tsBtn--slatOutline{background:transparent;color:var(--ts-ink);box-shadow:inset 0 0 0 1px var(--ts-gray-400);position:relative;overflow:hidden}
.tsBtn--slatOutline::before{content:"";position:absolute;inset:0;background:var(--ts-gradient-vertical);-webkit-mask-image:var(--ts-slats-fine);mask-image:var(--ts-slats-fine);opacity:0;transition:opacity var(--ts-dur) var(--ts-ease)}
.tsBtn--slatOutline:hover::before{opacity:.32}
.tsBtn--slatOutline>*{position:relative;z-index:1}
/* Contourknoppen — de tweede actie. Haarlijn, geen vlak; halo blijft voor de eerste actie. */
.tsBtn--outline{background:transparent;color:var(--ts-ink);box-shadow:inset 0 0 0 1px var(--ts-gray-400)}
.tsBtn--outline:hover{box-shadow:inset 0 0 0 1px var(--ts-ink);background:var(--ts-gray-50)}
.tsBtn--outlineLight{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.tsBtn--outlineLight:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.75)}
.tsBtn--care{background:transparent;color:var(--ts-ink);border-radius:2px;letter-spacing:.16em;box-shadow:inset 0 0 0 1px var(--ts-gray-400)}
.tsBtn--care:hover{background:var(--ts-ink);color:#fff;box-shadow:none}
.tsBtn--ghost{background:transparent;color:var(--ts-ink)}
.tsBtn--ghost:hover{background:var(--ts-gray-100)}
.tsBtn__icon{display:inline-flex;align-items:center;justify-content:center}
.tsBtn__icon svg{width:1.15em;height:1.15em;display:block}

/* ---- components/display/Card.jsx ---- */
.tsCard{background:var(--ts-white);border:1px solid var(--ts-gray-200);border-radius:var(--ts-radius-xs);
  box-shadow:var(--ts-shadow-sm);overflow:hidden;display:flex;flex-direction:column;font-family:var(--ts-font-sans);color:var(--ts-ink)}
.tsCard--hover{transition:box-shadow var(--ts-dur) var(--ts-ease),transform var(--ts-dur) var(--ts-ease);cursor:pointer}
.tsCard--hover:hover{box-shadow:var(--ts-shadow-lg);transform:translateY(-3px)}
.tsCard--dark{background:#1B1B1B;border-color:rgba(255,255,255,.16);color:#fff;box-shadow:none}
/* care — uitvaartzorg en elke context die stilte vraagt: geen schaduw, oker als enige accent */
.tsCard--care{background:var(--ts-white);border-color:var(--ts-gray-200);border-radius:2px;box-shadow:none}
.tsCard--care .tsCard__rule{background:var(--ts-gold-600);height:2px}
.tsCard--care .tsCard__title{font-family:var(--ts-font-body);font-weight:500;text-transform:none;letter-spacing:-.015em;line-height:1.2}
.tsCard--care.tsCard--hover:hover{box-shadow:none;transform:none;border-color:var(--ts-gray-400)}
.tsCard__rule{height:4px;background:var(--ts-gradient-brand);flex:none}
.tsCard__body{padding:var(--ts-space-6);display:flex;flex-direction:column;gap:8px}
.tsCard__title{font-size:19px;font-weight:700;margin:0;letter-spacing:-.01em}
.tsCard__text{font-family:var(--ts-font-body);font-size:16px;line-height:1.55;color:var(--ts-gray-700);margin:0}
.tsCard--dark .tsCard__text{color:var(--ts-gray-300)}
.tsCard__footer{padding:var(--ts-space-4) var(--ts-space-6);border-top:1px solid var(--ts-gray-200);display:flex;gap:10px;align-items:center}
.tsCard--dark .tsCard__footer{border-color:rgba(255,255,255,.12)}

/* ---- components/display/Badge.jsx ---- */
.tsBadge{display:inline-flex;align-items:center;gap:5px;font-family:var(--ts-font-sans);font-weight:600;
  font-size:11px;text-transform:uppercase;letter-spacing:var(--ts-tracking-label);
  padding:4px 10px;border-radius:var(--ts-radius-xs);line-height:1.2}
.tsBadge--gradient{background:var(--ts-gradient-brand);color:#fff}
.tsBadge--neutral{background:var(--ts-gray-100);color:var(--ts-gray-700)}
.tsBadge--ink{background:var(--ts-ink);color:#fff}
.tsBadge--success{background:var(--ts-success-bg);color:var(--ts-success)}
.tsBadge--warning{background:var(--ts-warning-bg);color:var(--ts-gold-600)}
.tsBadge--danger{background:var(--ts-danger-bg);color:var(--ts-magenta-600)}
.tsBadge--info{background:var(--ts-info-bg);color:var(--ts-purple)}
.tsBadge--care{background:transparent;color:var(--ts-gold-600);box-shadow:inset 0 0 0 1px var(--ts-gold-600);border-radius:2px;text-transform:none;letter-spacing:.02em;font-family:var(--ts-font-body);font-weight:600}
.tsBadge__dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* ---- components/forms/Input.jsx ---- */
.tsField{display:flex;flex-direction:column;gap:6px;font-family:var(--ts-font-sans);width:100%}
.tsField__label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:var(--ts-tracking-label);color:var(--ts-gray-700)}
.tsField__req{color:var(--ts-magenta);margin-left:2px}
.tsInput{font-family:var(--ts-font-sans);font-size:15px;color:var(--ts-ink);background:var(--ts-white);
  border:1px solid var(--ts-gray-300);border-radius:var(--ts-radius-sm);height:44px;padding:0 14px;width:100%;box-sizing:border-box;
  transition:border-color var(--ts-dur) var(--ts-ease),box-shadow var(--ts-dur) var(--ts-ease);}
.tsInput::placeholder{color:var(--ts-gray-500)}
.tsInput:hover{border-color:var(--ts-gray-400)}
.tsInput:focus{outline:0;border-color:var(--ts-purple);box-shadow:0 0 0 3px rgba(143,46,144,.15)}
.tsInput[disabled]{background:var(--ts-gray-100);color:var(--ts-gray-500);cursor:not-allowed}
.tsInput--invalid{border-color:var(--ts-magenta-600)}
.tsInput--invalid:focus{box-shadow:0 0 0 3px rgba(220,30,99,.15)}
.tsField__hint{font-size:12px;color:var(--ts-gray-600)}
.tsField__hint--err{color:var(--ts-magenta-600)}

/* ---- components/forms/Textarea.jsx ---- */
.tsTextarea{font-family:var(--ts-font-sans);font-size:15px;color:var(--ts-ink);background:var(--ts-white);
  border:1px solid var(--ts-gray-300);border-radius:var(--ts-radius-sm);padding:12px 14px;width:100%;box-sizing:border-box;
  min-height:110px;resize:vertical;line-height:1.5;
  transition:border-color var(--ts-dur) var(--ts-ease),box-shadow var(--ts-dur) var(--ts-ease);}
.tsTextarea::placeholder{color:var(--ts-gray-500)}
.tsTextarea:hover{border-color:var(--ts-gray-400)}
.tsTextarea:focus{outline:0;border-color:var(--ts-purple);box-shadow:0 0 0 3px rgba(143,46,144,.15)}
.tsTextarea[disabled]{background:var(--ts-gray-100);color:var(--ts-gray-500);cursor:not-allowed}
.tsTextarea--invalid{border-color:var(--ts-magenta-600)}

/* ---- components/display/Prose.jsx ---- */
.tsProse{font-family:var(--ts-font-body);color:var(--ts-gray-700);font-size:17px;line-height:1.65;max-width:70ch}
.tsProse>*:first-child{margin-top:0}
.tsProse p{margin:0 0 1em;text-wrap:pretty}
.tsProse .tsProse__lead{font-size:22px;line-height:1.5;color:var(--ts-ink);font-weight:500;margin-bottom:.7em}
.tsProse strong{color:var(--ts-ink);font-weight:600}
.tsProse a{color:var(--ts-magenta);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--ts-magenta) 35%,transparent)}
.tsProse a:hover{border-bottom-color:var(--ts-magenta)}
.tsProse h2{font-family:var(--ts-font-display);text-transform:uppercase;letter-spacing:-.01em;font-size:30px;line-height:1.08;color:var(--ts-ink);margin:1.6em 0 .3em}
.tsProse h3{font-family:var(--ts-font-sans);font-weight:700;font-size:20px;color:var(--ts-ink);margin:1.4em 0 .25em;letter-spacing:-.01em}
.tsProse h4{font-family:var(--ts-font-sans);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--ts-magenta);margin:1.8em 0 .6em}
.tsProse ul,.tsProse ol{margin:0 0 1.1em;padding-left:0;list-style:none}
.tsProse li{position:relative;padding-left:1.7em;margin:0 0 .55em;text-wrap:pretty}
.tsProse ul>li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--ts-gradient-brand)}
.tsProse ol{counter-reset:tsp}
.tsProse ol>li{counter-increment:tsp}
.tsProse ol>li::before{content:counter(tsp);position:absolute;left:0;top:.05em;width:20px;height:20px;border-radius:50%;background:var(--ts-ink);color:#fff;font-family:var(--ts-font-sans);font-weight:700;font-size:11px;display:flex;align-items:center;justify-content:center}
.tsProse dl{margin:0 0 1.1em}
.tsProse dt{font-family:var(--ts-font-sans);font-weight:700;font-size:15px;color:var(--ts-ink);margin-top:.7em}
.tsProse dd{margin:2px 0 0;color:var(--ts-gray-700)}
.tsProse blockquote{margin:1.2em 0;padding:2px 0 2px 20px;border-left:3px solid;border-image:var(--ts-gradient-brand) 1}
.tsProse blockquote p{font-size:22px;line-height:1.4;color:var(--ts-ink);font-style:italic;font-weight:500;margin:0}
.tsProse blockquote cite{display:block;font-style:normal;font-family:var(--ts-font-sans);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--ts-gray-500);margin-top:10px}
.tsProse table{width:100%;border-collapse:collapse;margin:.6em 0 1.2em;font-size:15px}
.tsProse th{text-align:left;font-family:var(--ts-font-sans);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ts-gray-500);border-bottom:1.5px solid var(--ts-ink);padding:8px 12px 8px 0}
.tsProse td{padding:9px 12px 9px 0;border-bottom:1px solid var(--ts-gray-200);color:var(--ts-gray-700)}
.tsProse td:first-child{color:var(--ts-ink);font-weight:600}
.tsProse figure{margin:1.4em 0}
.tsProse figure img,.tsProse .tsProse__frame{display:block;width:100%;border-radius:var(--ts-radius-xs);overflow:hidden}
.tsProse .tsProse__frame{aspect-ratio:16/9;background:var(--ts-gray-100);border:1px solid var(--ts-gray-200);display:flex;align-items:center;justify-content:center;color:var(--ts-gray-400);font-family:var(--ts-font-sans);font-size:13px;letter-spacing:.02em}
.tsProse figcaption{margin-top:10px;font-family:var(--ts-font-sans);font-size:13px;line-height:1.5;color:var(--ts-gray-500);display:flex;gap:10px}
.tsProse figcaption::before{content:"";flex:none;width:18px;height:2px;margin-top:8px;background:var(--ts-gradient-brand)}
.tsProse figcaption b{color:var(--ts-ink);font-weight:600}
/* ── care · rustige stemming: koppen in de body-letter, zinsvorm, oker als enige accent ── */
.tsProse--care{color:var(--ts-gray-700);line-height:1.74}
.tsProse--care h2{font-family:var(--ts-font-body);font-weight:500;text-transform:none;font-size:25px;line-height:1.24;letter-spacing:-.015em}
.tsProse--care h3{font-family:var(--ts-font-body);font-weight:600;font-size:18px}
.tsProse--care h4{color:var(--ts-gold-600);letter-spacing:.2em;font-weight:600}
.tsProse--care a{color:var(--ts-gold-600);border-bottom-color:color-mix(in srgb,var(--ts-gold-600) 40%,transparent)}
.tsProse--care a:hover{border-bottom-color:var(--ts-gold-600)}
.tsProse--care ul>li::before{background:var(--ts-gold-600);border-radius:0;height:2px;width:14px;top:.72em}
.tsProse--care ol>li::before{background:transparent;color:var(--ts-gold-600);border:1px solid var(--ts-gold-600);font-family:var(--ts-font-body);font-weight:600}
.tsProse--care blockquote{border-image:none;border-left:2px solid var(--ts-gold-600)}
.tsProse--care blockquote p{font-style:normal;font-size:20px;line-height:1.5}
.tsProse--care th{border-bottom:1px solid var(--ts-ink);font-weight:600;color:var(--ts-gray-500)}
.tsProse--care figure img,.tsProse--care .tsProse__frame{border-radius:2px}
.tsProse--care figcaption::before{background:var(--ts-gold-600)}

/* ---- components/navigation/Tabs.jsx ---- */
/* Tabs volgen de sectorstrook van de site: haarlijnen tussen de tabs,
   spectrumregel BOVEN de actieve tab (zoals de pijlerkaarten), Archivo 700. */
.tsTabs{--_line:var(--ts-gray-200);--_fg:var(--ts-ink);--_muted:var(--ts-gray-600);--_surface:var(--ts-white);font-family:var(--ts-font-sans)}
.tsTabs__list{display:flex;gap:1px;background:var(--_line);border-top:1px solid var(--_line);border-bottom:1px solid var(--_line);position:relative}
.tsTab{flex:1;appearance:none;border:0;cursor:pointer;overflow:hidden;
  background:var(--_surface);font-family:inherit;font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--_muted);text-align:left;
  padding:18px 20px 17px;position:relative;transition:color var(--ts-dur) var(--ts-ease)}
.tsTab{isolation:isolate}
.tsTab__no{position:relative;z-index:2;display:block;font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.14em;color:var(--_muted);opacity:.7;margin-bottom:9px}
.tsTab__label{position:relative;z-index:2}
.tsTab:hover{color:var(--_fg)}
/* actief — de retro-toets, gedoseerd: spectrumregel bovenaan, daaronder gelatte
   lijnen die naar onder uitdunnen (niet-lineair). Bij hover gaat het vlak van
   boven naar onder open. Het label wordt zwaarder, niet lichter. */
.tsTab--active{color:var(--_fg);font-family:var(--ts-font-display);font-size:15px;letter-spacing:-.01em;font-weight:400}
.tsTab--active .tsTab__no{color:var(--ts-orange-600);opacity:1}
.tsTab--active::before{content:"";position:absolute;left:0;right:0;top:-1px;z-index:3;height:3px;background:var(--ts-gradient-brand)}
.tsTab::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:var(--ts-gradient-vertical);
  -webkit-mask-image:repeating-linear-gradient(180deg,#000 0 1px,transparent 1px 5px),linear-gradient(180deg,#000 0,rgba(0,0,0,.82) 18%,rgba(0,0,0,.4) 46%,rgba(0,0,0,.13) 74%,transparent 100%);
  mask-image:repeating-linear-gradient(180deg,#000 0 1px,transparent 1px 5px),linear-gradient(180deg,#000 0,rgba(0,0,0,.82) 18%,rgba(0,0,0,.4) 46%,rgba(0,0,0,.13) 74%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  clip-path:inset(0 0 100% 0);transition:clip-path 520ms cubic-bezier(.2,.7,.25,1),opacity 260ms var(--ts-ease)}
.tsTab--active::after{opacity:.34;clip-path:inset(0 0 0 0)}
.tsTab:hover::after{opacity:.34;clip-path:inset(0 0 0 0)}
.tsTab:focus-visible{outline:2px solid var(--ts-purple);outline-offset:-3px}
.tsTabs__panel{padding-top:22px}
/* op donkere dragers */
.tsTabs--dark{--_line:rgba(255,255,255,.16);--_fg:#fff;--_muted:rgba(255,255,255,.6);--_surface:var(--ts-black)}
.tsTabs--dark .tsTab--active .tsTab__no{color:var(--ts-gold)}
.tsTabs--dark .tsTab--active::after,.tsTabs--dark .tsTab:hover::after{opacity:.5}
/* care — geen gradient, geen latten, geen kapitalen. Eén okerlijn van 2px
   en een wit vlak markeren de actieve tab; de rest blijft papierwit. */
.tsTabs--care{--_line:var(--ts-gray-200);--_surface:#FAF8F5;--_muted:var(--ts-gray-600)}
.tsTabs--care .tsTab,.tsTabs--care .tsTab--active{font-family:var(--ts-font-body);font-weight:600;font-size:14px;text-transform:none;letter-spacing:0}
.tsTabs--care .tsTab--active{background:var(--ts-white);color:var(--ts-ink)}
.tsTabs--care .tsTab--active::before{height:2px;background:var(--ts-gold-600)}
.tsTabs--care .tsTab::after{display:none}
.tsTabs--care .tsTab__no{display:none}

/* ---- components/feedback/Alert.jsx ---- */
.tsAlert{position:relative;display:flex;gap:14px;font-family:var(--ts-font-sans);border-radius:var(--ts-radius-xs);
  padding:16px 18px;background:var(--ts-white);border:1px solid var(--ts-gray-200);box-shadow:var(--ts-shadow-sm);
  align-items:flex-start;color:var(--ts-ink);overflow:hidden}
.tsAlert::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--_accent)}
.tsAlert__icon{flex:none;width:36px;height:36px;border-radius:var(--ts-radius-sm);background:var(--_accent);color:#fff;
  display:inline-flex;align-items:center;justify-content:center}
.tsAlert__icon svg{width:19px;height:19px;display:block}
.tsAlert__body{flex:1;min-width:0;padding-top:1px}
.tsAlert__title{font-weight:700;font-size:13px;margin:0 0 3px;text-transform:uppercase;letter-spacing:var(--ts-tracking-label);color:var(--ts-ink)}
.tsAlert__msg{font-family:var(--ts-font-body);font-size:16px;line-height:1.5;margin:0;color:var(--ts-gray-700)}
.tsAlert__x{flex:none;background:none;border:0;cursor:pointer;color:var(--ts-gray-500);padding:3px;border-radius:var(--ts-radius-xs);line-height:0;transition:color var(--ts-dur) var(--ts-ease),background var(--ts-dur) var(--ts-ease)}
.tsAlert__x:hover{color:var(--ts-ink);background:var(--ts-gray-100)}
.tsAlert__x svg{width:16px;height:16px}
.tsAlert--info{--_accent:var(--ts-purple)}
.tsAlert--success{--_accent:var(--ts-success)}
.tsAlert--warning{--_accent:var(--ts-gold-600)}
.tsAlert--danger{--_accent:var(--ts-magenta)}

/* =====================================================================
   SITE LAYER — the tecside.be website in the design system.
   Layout of templates/website-bold (dark/light rhythm, sun in the hero,
   a spectrum line on every change of tone), mapped onto the CMS blocks.
   ===================================================================== */

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:96px}
body.v2{margin:0;background:var(--ts-black);color:var(--ts-ink);font-family:var(--ts-font-body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
.v2 img,.v2 video,.v2 svg{display:block;max-width:100%}
.v2 a{color:inherit;text-decoration:none}
.v2 p{margin:0}
.v2 ::selection{background:var(--ts-magenta);color:#fff}
.v2 :focus-visible{outline:2px solid var(--focus,var(--ts-purple));outline-offset:3px}
.skiplink{position:absolute;left:16px;top:-80px;z-index:100;padding:12px 18px;border-radius:6px;background:#E8E4DE;color:var(--ts-ink);font-family:var(--ts-font-sans);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.skiplink:focus{top:12px}
.w{max-width:var(--ts-container-wide);margin:0 auto;padding:0 72px}
.narrow{max-width:820px}
.ico{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- carriers: the two tones ---------- */
.t-light,.t-sunken{--bg:var(--ts-white);--fg:var(--ts-ink);--fg-2:var(--ts-gray-700);--muted:var(--ts-gray-600);--line:var(--ts-gray-200);--line-2:var(--ts-gray-300);--surface:var(--ts-white);--halo:220,30,99;--eb:var(--ts-gray-600);--meta:var(--ts-orange-600);--focus:var(--ts-purple);--link:var(--ts-magenta)}
.t-sunken{--bg:var(--ts-gray-50)}
.t-dark{--bg:var(--ts-black);--fg:#E8E4DE;--fg-2:rgba(232,228,222,.82);--muted:rgba(232,228,222,.62);--line:rgba(255,255,255,.14);--line-2:rgba(255,255,255,.28);--surface:#1B1B1B;--halo:255,194,14;--eb:rgba(232,228,222,.68);--meta:var(--ts-gold);--focus:var(--ts-gold);--link:var(--ts-gold)}
.s{position:relative;background:var(--bg);color:var(--fg);padding:clamp(88px,9vw,128px) 0}
.s>.w{position:relative;z-index:3}

/* A 4px spectrum line marks every change of tone (README: "elke overgang gemarkeerd"). */
.s__rule{position:absolute;left:0;right:0;top:0;height:4px;z-index:6;display:none;background:var(--ts-gradient-brand);transform-origin:left center}
.t-light+.t-dark>.s__rule,.t-sunken+.t-dark>.s__rule,.t-dark+.t-light>.s__rule,.t-dark+.t-sunken>.s__rule{display:block}

/* ---------- type ---------- */
.eyebrow{display:flex;align-items:center;gap:14px;margin:0;font-family:var(--ts-font-sans);font-size:12px;font-weight:700;line-height:1.4;text-transform:uppercase;letter-spacing:.28em;color:var(--eb)}
.eyebrow s{flex:none;width:52px;height:3px;border-radius:2px;background:var(--ts-gradient-brand);text-decoration:none;transform-origin:left center}
.d{position:relative;margin:22px 0 0;font-family:var(--ts-font-display);font-weight:400;text-transform:uppercase;letter-spacing:-.02em;line-height:.94;color:var(--fg);text-wrap:balance;hyphens:manual}
.d:first-child{margin-top:0}
.d1{font-size:clamp(42px,7vw,120px);line-height:.86;letter-spacing:-.025em}
.d1.is-long{font-size:clamp(36px,5.2vw,84px);line-height:.88}
.d2{font-size:clamp(36px,5.2vw,80px);line-height:.9;letter-spacing:-.03em}
.d2.is-long{font-size:clamp(32px,4vw,60px)}
.d2.is-xlong{font-size:clamp(28px,3vw,46px);line-height:.98;letter-spacing:-.02em}
.d3{font-size:clamp(30px,3.6vw,52px)}
.d3.is-long{font-size:clamp(28px,2.8vw,40px);line-height:.98}
.d3.is-xlong{font-size:clamp(24px,2.2vw,32px);line-height:1.02}
.d4{font-size:clamp(22px,2vw,28px);line-height:1.04;letter-spacing:-.01em}
.d .ts-lines{inset:-6px 0;background:repeating-linear-gradient(180deg,rgba(20,20,20,.55) 0 1px,transparent 1px 4px)}
.lead{max-width:46ch;margin-top:30px;font-size:clamp(18px,1.4vw,20px);line-height:1.64;color:var(--fg-2)}
.lead p+p{margin-top:.8em}
.lead a,.body a{color:var(--link)}
.body{margin-top:24px}
.btns{display:flex;flex-wrap:wrap;gap:14px 16px;align-items:center;margin-top:40px}
.more{display:inline-flex;align-items:center;gap:8px;font-family:var(--ts-font-sans);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--fg)}
.more .ico{transition:transform var(--ts-dur) var(--ts-ease-out)}
.crumb{display:inline-flex;align-items:center;gap:10px;margin-bottom:40px;font-family:var(--ts-font-sans);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);transition:color var(--ts-dur) var(--ts-ease)}
.crumb .ico{transition:transform var(--ts-dur) var(--ts-ease-out)}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,40ch);gap:24px 64px;align-items:end;margin-bottom:56px}
.head:has(>:only-child){grid-template-columns:minmax(0,1fr)}
.head .lead{margin-top:0}
.cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px 72px;align-items:start}
.cols .body{margin-top:0}
.cols .btns{margin-top:32px}

/* long words and pasted URLs never push the page sideways */
.tsProse,.lead,.facts dd,.tsCard__text{overflow-wrap:break-word}

/* Prose on a dark carrier */
.t-dark .tsProse{color:var(--fg-2)}
.t-dark .tsProse strong,.t-dark .tsProse h2,.t-dark .tsProse h3,.t-dark .tsProse blockquote p{color:var(--fg)}
.t-dark .tsProse a{color:var(--ts-gold);border-bottom-color:rgba(255,194,14,.35)}
.t-dark .tsProse h4{color:var(--ts-gold)}
.t-dark .tsProse ol>li::before{background:#E8E4DE;color:var(--ts-ink)}
.body.tsProse{font-size:17px;max-width:62ch}

/* ---------- buttons: the design system's site button, following its carrier ---------- */
.tsBtn--lg{height:52px;padding:0 28px;font-size:12px}
.tsBtn .ico{transition:transform var(--ts-dur) var(--ts-ease-out)}
.tsBtn--p{position:relative;overflow:hidden;--_slat:repeating-linear-gradient(180deg,rgba(255,255,255,.16) 0 1px,transparent 1px 4px);background:var(--ts-ink);color:#fff}
.tsBtn--p>*{position:relative;z-index:2}
.tsBtn--p::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--_slat)}
.t-dark .tsBtn--p{--_slat:repeating-linear-gradient(180deg,rgba(20,20,20,.22) 0 1px,transparent 1px 4px);background:#E8E4DE;color:var(--ts-ink)}
.tsBtn--s{background:transparent;color:var(--ts-ink);box-shadow:inset 0 0 0 1px var(--ts-gray-400)}
.t-dark .tsBtn--s{color:#E8E4DE;box-shadow:inset 0 0 0 1px rgba(232,228,222,.42)}
.t-dark .t-light .tsBtn--p{--_slat:repeating-linear-gradient(180deg,rgba(255,255,255,.16) 0 1px,transparent 1px 4px);background:var(--ts-ink);color:#fff}
.t-dark .t-light .tsBtn--s{color:var(--ts-ink);box-shadow:inset 0 0 0 1px var(--ts-gray-400)}

/* ---------- header: the navigation component (tabs on a dark carrier) ---------- */
/* the frosted glass sits on a pseudo-element: a backdrop-filter on .hdr itself would make it the
   containing block of the fixed mobile menu and squeeze that menu into the 72px bar */
.hdr{position:sticky;top:0;z-index:40;border-bottom:1px solid rgba(255,255,255,.14);color:#E8E4DE}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(20,20,20,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
@media (min-width:1101px){.hdr{view-transition-name:hdr}}
.hdr__in{position:relative;height:72px;display:flex;align-items:center;gap:24px}
.hdr__logo{flex:none;display:block;padding:6px 0}
.hdr__logo img{height:44px;width:auto}
.hdr__nav{flex:1;display:flex;align-self:stretch;min-width:0}
.hdr__tabs{display:flex;align-self:stretch;margin:0 auto;padding:0;list-style:none}
.hdr__tabs>li{display:flex}
.hdr__extra{display:none}
.tab{position:relative;display:flex;align-items:center;gap:9px;height:100%;padding:0 15px;font-family:var(--ts-font-sans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:rgba(232,228,222,.7);cursor:pointer;isolation:isolate;overflow:hidden;list-style:none;transition:color var(--ts-dur) var(--ts-ease)}
.tab::-webkit-details-marker{display:none}
.tab>span{position:relative;z-index:2}
/* active: spectrum rule over the tab, slats thinning out downwards (tsTabs--dark) */
.tab::before{content:"";position:absolute;left:0;right:0;top:0;z-index:3;height:3px;background:var(--ts-gradient-brand);transform:scaleX(0);transition:transform 320ms var(--ts-ease-out)}
.tab::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:var(--ts-gradient-vertical);
  -webkit-mask-image:repeating-linear-gradient(180deg,#000 0 1px,transparent 1px 5px),linear-gradient(180deg,#000 0,rgba(0,0,0,.82) 18%,rgba(0,0,0,.4) 46%,rgba(0,0,0,.13) 74%,transparent 100%);
  mask-image:repeating-linear-gradient(180deg,#000 0 1px,transparent 1px 5px),linear-gradient(180deg,#000 0,rgba(0,0,0,.82) 18%,rgba(0,0,0,.4) 46%,rgba(0,0,0,.13) 74%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;clip-path:inset(0 0 100% 0);transition:clip-path 520ms cubic-bezier(.2,.7,.25,1),opacity 260ms var(--ts-ease)}
.tab.is-here{color:#fff}
.tab.is-here::before{transform:none}
.tab.is-here::after,.drop[open]>.tab::after{opacity:.5;clip-path:inset(0 0 0 0)}
.drop[open]>.tab{color:#fff}
.caret{position:relative;z-index:2;width:7px;height:7px;margin-top:-4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform var(--ts-dur) var(--ts-ease-out)}
.drop[open] .caret{transform:translateY(3px) rotate(-135deg)}
.drop{position:relative;display:flex}
.drop>summary{list-style:none}
.drop__menu{position:absolute;top:100%;left:0;z-index:50;min-width:400px;margin-top:1px;background:var(--ts-black);border:1px solid rgba(255,255,255,.14);border-top:0;border-radius:0 0 6px 6px;box-shadow:var(--ts-shadow-xl);overflow:hidden;transform-origin:top left;
  transition:opacity 180ms var(--ts-ease-out),transform 220ms var(--ts-ease-out)}
@starting-style{.drop[open] .drop__menu{opacity:0;transform:translateY(-6px) scale(.98)}}
.drop__all{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 22px;font-family:var(--ts-font-sans);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(232,228,222,.62);border-bottom:1px solid rgba(255,255,255,.14);transition:color var(--ts-dur) var(--ts-ease)}
.drop__count{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.14em;color:var(--ts-gold)}
.drop__list{display:grid;gap:1px;margin:0;padding:0;list-style:none;background:rgba(255,255,255,.08)}
.drop__item{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) 18px;align-items:center;gap:6px;padding:15px 22px;background:var(--ts-black);font-family:var(--ts-font-sans);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,228,222,.82);isolation:isolate;overflow:hidden;transition:color var(--ts-dur) var(--ts-ease)}
.drop__item>*{position:relative;z-index:2}
.drop__no{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.14em;color:rgba(232,228,222,.5);transition:color var(--ts-dur) var(--ts-ease)}
.drop__item .ico{opacity:0;transform:translateX(-6px);transition:opacity var(--ts-dur) var(--ts-ease-out),transform var(--ts-dur) var(--ts-ease-out)}
.drop__item::before{content:"";position:absolute;left:0;top:0;bottom:0;z-index:3;width:3px;background:var(--ts-gradient-vertical);transform:scaleY(0);transform-origin:top;transition:transform 320ms var(--ts-ease-out)}
.drop__item::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:var(--ts-gradient-brand);
  -webkit-mask-image:repeating-linear-gradient(180deg,#000 0 1px,transparent 1px 5px),linear-gradient(90deg,#000 0,rgba(0,0,0,.4) 40%,transparent 100%);
  mask-image:repeating-linear-gradient(180deg,#000 0 1px,transparent 1px 5px),linear-gradient(90deg,#000 0,rgba(0,0,0,.4) 40%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;clip-path:inset(0 100% 0 0);transition:clip-path 520ms cubic-bezier(.2,.7,.25,1),opacity 260ms var(--ts-ease)}
.drop__item.is-here{color:#fff;font-family:var(--ts-font-display);font-weight:400;font-size:14px;letter-spacing:-.005em}
.drop__item.is-here::before{transform:none}
.drop__item.is-here .drop__no{color:var(--ts-gold)}
.lang{display:flex;align-items:center;gap:2px;font-family:var(--ts-font-sans);font-size:11px;font-weight:700;letter-spacing:.2em}
.lang a{position:relative;padding:8px 7px;color:rgba(232,228,222,.5);transition:color var(--ts-dur) var(--ts-ease)}
.lang a[aria-current]{color:#E8E4DE}
.lang a[aria-current]::after{content:"";position:absolute;left:7px;right:7px;bottom:2px;height:2px;background:var(--ts-gradient-brand)}
.hdr__right{display:flex;align-items:center;gap:18px;margin-left:auto}
.hdr__cta{white-space:nowrap;padding:9px 18px;border:1px solid rgba(232,228,222,.36);border-radius:999px;font-family:var(--ts-font-sans);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;transition:background var(--ts-dur) var(--ts-ease),color var(--ts-dur) var(--ts-ease),border-color var(--ts-dur) var(--ts-ease)}
.hdr__cta:active,.tab:active,.drop__item:active{transform:scale(.98)}
.burger{display:none}
.hdr__phone{display:inline-flex;align-items:center;gap:10px;font-family:var(--ts-font-sans);font-size:13px;font-weight:600;letter-spacing:.06em;color:rgba(232,228,222,.82)}

/* ---------- footer ---------- */
.ftr{position:relative;background:var(--bg);color:var(--fg);border-top:1px solid var(--line);padding-top:clamp(64px,7vw,96px)}
.ftr__grid{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));gap:48px}
.ftr__logo img{height:60px;width:auto}
.ftr__text{max-width:38ch;margin:24px 0 0;color:var(--fg-2);font-size:15.5px}
.ftr__contact{display:grid;gap:14px;margin:28px 0 0}
.ftr__contact dt,.ftr__h{font-family:var(--ts-font-sans);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.ftr__contact dd{margin:4px 0 0;font-size:15.5px;color:var(--fg)}
.ftr__h{margin:0 0 20px}
.ftr__col ul{display:grid;gap:11px;margin:0;padding:0;list-style:none}
.ftr__col a,.ftr__contact a,.ftr__social a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;color:var(--fg-2);font-size:15.5px;transition:color var(--ts-dur) var(--ts-ease),background-size 320ms var(--ts-ease-out)}
.ftr__contact a{color:var(--fg)}
.ftr__social{display:flex;gap:18px;margin-top:22px;text-transform:capitalize}
.ftr__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:72px;padding-top:26px;padding-bottom:34px;border-top:1px solid var(--line);font-family:var(--ts-font-sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(232,228,222,.45)}

/* ---------- hero ---------- */
.hero{overflow:hidden}
.hero__in{position:relative;z-index:3}
.hero--full,.hero--404{padding:clamp(72px,7.5vw,104px) 0 clamp(64px,7vw,110px)}
.hero__photo{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__photo .media{width:100%;height:100%;object-fit:cover}
.hero--full .hero__photo{left:34%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48%);mask-image:linear-gradient(90deg,transparent 0,#000 48%)}
.hero--full .hero__photo .media{opacity:.45}
.hero__sun{position:absolute;left:50%;top:120px;z-index:1;width:1180px;height:1180px;transform:translateX(-50%);color:#E8E4DE;pointer-events:none}
.hero__sun .sun{width:100%;height:100%}
.hero__veil{position:absolute;inset:0;z-index:2;background:radial-gradient(122% 76% at 50% 80%,rgba(20,20,20,0) 0,rgba(20,20,20,.62) 44%,#141414 76%)}
.hero--full .hero__veil{background:radial-gradient(122% 76% at 50% 80%,rgba(20,20,20,0) 0,rgba(20,20,20,.5) 44%,rgba(20,20,20,.92) 76%),linear-gradient(90deg,rgba(20,20,20,.75) 0,rgba(20,20,20,0) 62%)}
.ts-floor{z-index:2}
.hero__tag{margin:8px 0 0;font-family:var(--ts-font-display);font-size:clamp(24px,3.8vw,64px);line-height:.9;letter-spacing:-.02em;text-transform:uppercase;color:#E8E4DE;-webkit-text-stroke-width:1.4px}
.hero--full .lead{margin-top:34px}
.figs{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:1px;margin-top:clamp(56px,7vw,104px);background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fig{background:var(--bg);padding:26px 24px}
.fig__n{display:block;font-family:var(--ts-font-display);font-weight:400;font-size:clamp(36px,3.6vw,52px);white-space:nowrap;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;background:var(--ts-gradient-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.fig__l{display:block;margin-top:12px;font-family:var(--ts-font-sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.hero--page{padding:clamp(96px,10vw,140px) 0 clamp(88px,9vw,120px)}
/* The page-head sun stands on the bottom edge of the head (its horizon), right of the title. The box
   is the visible half; overflow:clip keeps anything below the horizon out of sight. */
.sunrise{position:absolute;right:clamp(-120px,-4vw,-24px);bottom:0;z-index:0;height:92%;max-height:520px;aspect-ratio:2/1;overflow:clip;pointer-events:none;color:#E8E4DE}
.sunrise .sun{width:100%;height:auto;aspect-ratio:1/1}
.sunrise--case{bottom:clamp(120px,12vw,190px);height:62%}
.hero--page .hero__in{position:relative;z-index:3}
/* Light sections: the contour sun (thin lines only) fixed in the window, its horizon on the bottom edge
   of the screen, at the right. As a fixed background it shows only inside light sections — a dark
   section scrolls over it like a cover. The SVG turns slowly by itself (and not under reduced motion). */
.s.t-light,.s.t-sunken{--sun-w:min(64vw,880px);background-image:url('/assets/v2/sun-contour.svg?v=3');background-repeat:no-repeat;background-attachment:fixed;
  background-size:var(--sun-w) var(--sun-w);background-position:right calc(-0.12 * var(--sun-w)) bottom calc(-0.5 * var(--sun-w))}
.hero__sun--side,.s__sun{position:absolute;left:auto;right:-200px;top:-160px;width:760px;height:760px;transform:none;opacity:.5;color:#E8E4DE;z-index:0;pointer-events:none}
.hero--page .d,.casehead .d{max-width:16ch}
/* a page head flowing into another dark section needs no second run-up */
.hero--page+.t-dark:not(.banner){padding-top:clamp(24px,3vw,40px)}
.hero--page .lead{max-width:52ch}
.hero--cover{min-height:min(calc(100svh - 72px),860px);display:flex;align-items:flex-end;padding:clamp(140px,16vw,220px) 0 clamp(64px,7vw,96px)}
.hero--cover .hero__in{width:100%}
.hero--cover .hero__veil{background:linear-gradient(180deg,rgba(20,20,20,.35) 0,rgba(20,20,20,.15) 30%,rgba(20,20,20,.88) 82%,#141414 100%),linear-gradient(90deg,rgba(20,20,20,.7) 0,rgba(20,20,20,0) 70%)}
.hero--cover .d{max-width:18ch}
.hero__cols{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 56px;align-items:end;margin-top:8px}
.hero__cols .btns{margin-top:0;justify-content:flex-end}
.hero--split{padding-top:clamp(72px,8vw,112px)}
.nf{margin:0 0 6px;font-family:var(--ts-font-display);font-size:clamp(120px,24vw,340px);line-height:.8;letter-spacing:-.04em;color:#E8E4DE}
.hero--404{min-height:min(calc(100svh - 72px),900px)}
.hero--404 .d{max-width:18ch}

/* the sectors ticker (template: under the hero) */
.ticker{position:relative;overflow:hidden;white-space:nowrap;padding:20px 0;background:var(--ts-gray-50);border-bottom:1px solid var(--ts-gray-200)}
.ticker .s__rule{display:block}
.ticker__track{display:inline-flex;gap:40px;padding-right:40px;font-family:var(--ts-font-sans);font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ts-gray-600);animation:tsTicker 46s linear infinite}
.ticker__track i{font-style:normal;color:var(--ts-orange-600)}
@keyframes tsTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- split, frames ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.is-left .split__text{order:2}
.frame{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:4px;background:var(--surface)}
.frame .media{width:100%;height:100%;object-fit:cover}
.split__media .media,.feature__media .media{aspect-ratio:4/3}
.feature__media{margin-top:56px}
.feature__media .media{aspect-ratio:21/9}
.media--ph{min-height:220px;aspect-ratio:4/3;background:repeating-linear-gradient(180deg,var(--line) 0 1px,transparent 1px 12px)}
.feature--text .narrow .d{max-width:20ch}

/* ---------- cards ---------- */
.cgrid{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:22px}
.crd .tsCard__body{padding:clamp(22px,10cqi,32px) clamp(20px,9cqi,28px) clamp(26px,11cqi,34px)}
.crd{position:relative;border-radius:4px;container-type:inline-size}
/* a card without a link is information, not a button: flat, no lift, no arrow */
div.crd{box-shadow:none;background:var(--ts-gray-50)}
.t-dark div.crd{background:transparent}
.crd .tsCard__body{flex:1;gap:0}
.crd__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px}
.crd__no{font-family:var(--ts-font-sans);font-size:11px;font-weight:700;letter-spacing:.24em;color:var(--ts-orange-600)}
.crd__icon{width:34px;height:34px;color:var(--ts-ink);object-fit:contain}
.crd__title{display:block;margin:0 0 13px;font-family:var(--ts-font-display);font-size:clamp(18px,8.4cqi,25px);line-height:1.04;letter-spacing:-.01em;text-transform:uppercase;color:var(--ts-ink)}
.crd .tsCard__text{font-size:15.5px;line-height:1.68}
.crd .more{margin-top:auto;padding-top:24px}
.crd__media{display:block;overflow:hidden}
.crd__img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 900ms var(--ts-ease-out)}
.t-dark .crd{background:#1B1B1B;border-color:rgba(255,255,255,.16);box-shadow:none}
.t-dark .crd__title,.t-dark .crd__icon,.t-dark .crd .more{color:#E8E4DE}
.t-dark .crd .tsCard__text{color:rgba(232,228,222,.72)}
.t-dark .crd__no{color:var(--ts-gold)}

/* ---------- logos ---------- */
.logos{padding:clamp(56px,6vw,88px) 0}
.logos__head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:40px;text-align:center}
.logos__strip{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.logos__track{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:40px 64px}
.logos__dup{display:contents}
.logos--run .logos__track{flex-wrap:nowrap;justify-content:flex-start;width:max-content;padding-right:64px;animation:tsTicker 48s linear infinite}
.logo{display:flex;align-items:center;justify-content:center;flex:none}
.logo img{height:46px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1) contrast(1.1);opacity:.62;transition:filter 300ms var(--ts-ease),opacity 300ms var(--ts-ease)}
.logo--name{font-family:var(--ts-font-sans);font-size:14px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ---------- steps (hairline grid, numbered like the tabs) ---------- */
.steps__grid{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:1px;margin:0;padding:0;list-style:none;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.step{position:relative;padding:32px 28px 40px;background:var(--bg)}
.step::before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--ts-gradient-brand);transform:scaleX(0);transform-origin:left center;transition:transform 900ms var(--ts-ease-out) calc(var(--i,0) * 90ms + 250ms)}
.step.in::before,html:not(.js) .step::before{transform:none}
.step__no{display:block;margin-bottom:30px;font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.14em;color:var(--meta)}
.step__icon{width:36px;height:36px;margin-bottom:22px;color:var(--fg)}
.step__title{margin:0 0 12px;font-family:var(--ts-font-display);font-weight:400;font-size:clamp(19px,1.55vw,22px);line-height:1.06;letter-spacing:-.005em;text-transform:uppercase}
.step__text{font-size:15.5px;line-height:1.66;color:var(--fg-2)}

/* ---------- testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:22px}
.quote{position:relative;margin:0;padding:34px 34px 30px;border:1px solid var(--line);border-radius:4px;background:var(--surface);overflow:hidden}
.quote::before{content:"\201C";position:absolute;right:26px;top:-6px;font-family:var(--ts-font-display);font-size:150px;line-height:1;color:var(--line)}
.stars{display:flex;gap:5px}
.stars i{width:15px;height:15px;background:var(--ts-gradient-warm);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.quote blockquote{position:relative;margin:24px 0 28px;font-weight:500;font-size:clamp(19px,1.6vw,23px);line-height:1.45;color:var(--fg);text-wrap:pretty}
.quote blockquote p+p{margin-top:.6em}
.quote figcaption b{display:block;font-family:var(--ts-font-sans);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.quote figcaption span{display:block;margin-top:4px;font-size:14px;color:var(--muted)}

/* ---------- team ---------- */
.team__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:40px 22px}
.member__photo .media{aspect-ratio:4/5;transition:transform 900ms var(--ts-ease-out)}
.member__name{margin:22px 0 8px;font-family:var(--ts-font-display);font-weight:400;font-size:22px;line-height:1.05;text-transform:uppercase}
.member__role{font-family:var(--ts-font-sans);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--meta)}
.member__links{display:grid;gap:4px;margin-top:14px;font-size:15px;color:var(--fg-2)}
.member__links a{overflow-wrap:anywhere;transition:color var(--ts-dur) var(--ts-ease)}
.join{grid-column:span 2;align-self:stretch;border-radius:4px;background:#1B1B1B;color:#E8E4DE;--fg:#E8E4DE;--fg-2:rgba(232,228,222,.72);--halo:255,194,14}
.join .tsCard__body{justify-content:flex-end;height:100%;padding:36px}
.join .lead{margin-top:14px}
.join .btns{margin-top:28px}
.join .tsBtn--p{--_slat:repeating-linear-gradient(180deg,rgba(20,20,20,.22) 0 1px,transparent 1px 4px);background:#E8E4DE;color:var(--ts-ink)}

/* ---------- banner + CTA band ---------- */
.banner{overflow:hidden;padding:clamp(120px,14vw,200px) 0}
.banner__photo{position:absolute;inset:0;z-index:0;overflow:hidden}
.banner__bg{width:100%;height:100%;object-fit:cover}
.banner__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(20,20,20,.92) 0,rgba(20,20,20,.68) 46%,rgba(20,20,20,.18) 100%)}
.banner__in{position:relative;z-index:3}
.banner .d{max-width:15ch}
.banner .lead{max-width:44ch}
.ctaband{overflow:hidden;padding:clamp(104px,10vw,140px) 0 clamp(96px,9vw,124px)}
.ctaband .banner__photo .media{opacity:.35}
.s__sun--low{left:50%;right:auto;top:auto;bottom:-620px;width:1180px;height:1180px;transform:translateX(-50%);opacity:1}
.contact__veil{position:absolute;inset:0;z-index:1;background:radial-gradient(112% 82% at 50% 118%,rgba(20,20,20,0),rgba(20,20,20,.74) 52%,#141414 80%)}
.ctaband .d{max-width:18ch}
.ctaband__row{display:flex;flex-wrap:wrap;align-items:center;gap:32px 56px;margin-top:46px}
.ctaband__row .btns,.ctaband__row .facts{margin-top:0}
.facts{display:flex;flex-wrap:wrap;gap:24px 52px;margin:46px 0 0}
.facts dt{font-family:var(--ts-font-sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.facts dd{display:flex;flex-direction:column;gap:8px;margin:8px 0 0;font-size:17px;font-weight:600;color:var(--fg)}
.facts dd a{transition:color var(--ts-dur) var(--ts-ease)}
.facts .more{font-size:11px;color:var(--muted)}

/* ---------- projects ---------- */
.projects{overflow:hidden}
.ftabs{margin:0 0 36px}
.ftabs .tsTabs__list{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.ftabs .tsTabs__list::-webkit-scrollbar{display:none}
.ftabs .tsTab{flex:1 0 auto;padding:16px 18px 15px;font-size:12px}
.tsTab__count{position:relative;z-index:2;margin-left:8px;font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.06em;opacity:.55}
/* the filter chips are the tabs: .is-on (site.js) wears the active tab */
.tsTab.is-on{color:var(--_fg);font-family:var(--ts-font-display);letter-spacing:-.01em;font-weight:400;font-size:14px}
.tsTab.is-on .tsTab__no{color:var(--ts-orange-600);opacity:1}
.tsTab.is-on::before{content:"";position:absolute;left:0;right:0;top:-1px;z-index:3;height:3px;background:var(--ts-gradient-brand)}
.tsTab.is-on::after{opacity:.34;clip-path:inset(0 0 0 0)}
.tsTabs--dark .tsTab.is-on .tsTab__no{color:var(--ts-gold)}
.tsTabs--dark .tsTab.is-on::after{opacity:.5}
.tsTab:active{transform:scale(.98)}
.pgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px}
.pc{grid-column:span 4;position:relative;display:flex;align-items:flex-end;min-height:clamp(280px,25vw,380px);border:1px solid rgba(255,255,255,.16);border-radius:6px;overflow:hidden;background:#1B1B1B;isolation:isolate;color:#E8E4DE}
.pc[data-span="5"]{grid-column:span 5}
.pc[data-span="7"]{grid-column:span 7}
.pc[data-span="5"],.pc[data-span="7"]{min-height:clamp(320px,34vw,540px)}
.pc[data-span="12"]{grid-column:1/-1;min-height:clamp(300px,30vw,500px)}
.pc[data-span="6"]{grid-column:span 6}
.pc__img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;transition:transform 1200ms var(--ts-ease-out)}
.pc__glow{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;background:radial-gradient(460px circle at var(--x,50%) var(--y,50%),rgba(255,194,14,.26),rgba(242,122,60,.08) 45%,transparent 70%);mix-blend-mode:screen;transition:opacity 360ms var(--ts-ease)}
.pc__body{position:relative;z-index:2;display:block;width:100%;padding:30px;background:linear-gradient(180deg,rgba(20,20,20,0),rgba(20,20,20,.9) 62%)}
.pc__meta{display:block;margin:0 0 8px;font-family:var(--ts-font-sans);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ts-gold)}
.pc__title{display:block;max-width:22ch;font-family:var(--ts-font-display);font-size:clamp(20px,1.7vw,24px);line-height:1.06;text-transform:uppercase;color:#E8E4DE}
.pc[data-span="7"] .pc__title,.pc[data-span="12"] .pc__title{font-size:clamp(22px,2.3vw,34px)}
.pc__client{display:block;margin-top:8px;font-size:14px;color:rgba(232,228,222,.62)}
.pc__go{position:absolute;top:20px;right:20px;z-index:3;display:grid;place-items:center;width:44px;height:44px;border-radius:999px;background:#E8E4DE;color:var(--ts-ink);opacity:0;transform:translate(-6px,6px) scale(.9);transition:opacity 220ms var(--ts-ease-out),transform 300ms var(--ts-ease-out)}
.pc .media--ph{position:absolute;inset:0;height:100%;aspect-ratio:auto;background:repeating-linear-gradient(180deg,rgba(255,255,255,.08) 0 1px,transparent 1px 12px)}
.related .head{margin-bottom:40px}

/* ---------- posts ---------- */
.postgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:22px}
.pst{border-radius:4px;color:var(--ts-ink)}
.pst__media{display:block;overflow:hidden}
.pst__img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 900ms var(--ts-ease-out)}
/* width/height attributes on <img> only reserve space; the CSS box (aspect-ratio) decides the size */
.crd__img,.pst__img{height:auto}
.pst__media .media--ph{aspect-ratio:16/10;min-height:0}
.pst .tsCard__body{flex:1;gap:12px;padding:26px 26px 30px}
.pst__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-family:var(--ts-font-sans);font-size:12px;color:var(--ts-gray-600)}
.pst__title{font-family:var(--ts-font-display);font-size:clamp(20px,1.6vw,23px);line-height:1.06;text-transform:uppercase;color:var(--ts-ink)}
.pst .tsCard__text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:15.5px}
.pst .more{margin-top:auto;padding-top:12px}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px}
.gal figure{grid-column:span 2;margin:0}
.gal figure[data-span="3"]{grid-column:span 3}
.gal figure[data-span="6"]{grid-column:1/-1}
.gal .media{aspect-ratio:4/3}
.gal [data-span="3"] .media{aspect-ratio:3/2}
.gal [data-span="6"] .media{aspect-ratio:21/9}
.gal__open{display:block;height:100%;cursor:zoom-in}
.gal__open .media{transition:transform 900ms var(--ts-ease-out)}

/* full-screen viewer (v2.js) */
.lb{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(14,14,14,.96);color:#E8E4DE;overflow:hidden;
  opacity:1;transition:opacity 220ms var(--ts-ease-out),display 220ms allow-discrete,overlay 220ms allow-discrete}
.lb:not([open]){opacity:0}
@starting-style{.lb[open]{opacity:0}}
.lb.lb--vt{transition:none}
::view-transition-group(lb-photo){animation-duration:360ms;animation-timing-function:cubic-bezier(.32,.72,0,1)}
.lb::backdrop{background:transparent}
html:has(.lb[open]){overflow:hidden}
.lb__stage{position:absolute;inset:72px 88px 72px;display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.lb__img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:2px;box-shadow:var(--ts-shadow-xl);user-select:none;-webkit-user-drag:none}
.lb__bar{position:absolute;left:0;right:0;top:0;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 24px 0 32px;font-family:var(--ts-font-sans);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(232,228,222,.62)}
.lb__count{font-family:ui-monospace,Menlo,monospace;letter-spacing:.14em;color:var(--ts-gold)}
.lb__caption{position:absolute;left:0;right:0;bottom:0;min-height:72px;display:flex;align-items:center;justify-content:center;padding:0 24px;font-size:15px;color:rgba(232,228,222,.72);text-align:center}
.lb__btn{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid rgba(232,228,222,.3);border-radius:999px;background:rgba(20,20,20,.6);color:#E8E4DE;cursor:pointer;transition:background var(--ts-dur) var(--ts-ease),border-color var(--ts-dur) var(--ts-ease),transform var(--ts-dur-fast) var(--ts-ease)}
.lb__btn:active{transform:scale(.96)}
.lb__btn .ico{width:20px;height:20px}
.lb__prev,.lb__next{position:absolute;top:50%;margin-top:-24px}
.lb__prev{left:24px}
.lb__next{right:24px}
.lb[data-single] .lb__prev,.lb[data-single] .lb__next,.lb[data-single] .lb__count{display:none}

/* ---------- FAQ ---------- */
.faq__list{border-top:1px solid var(--line)}
.faq__item{position:relative;border-bottom:1px solid var(--line)}
/* the open question carries the spectrum line, like the active tab */
.faq__item::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--ts-gradient-brand);transform:scaleX(0);transform-origin:left center;transition:transform 400ms var(--ts-ease-out)}
.faq__item[open]::before{transform:none}
.faq__item summary{display:grid;grid-template-columns:44px minmax(0,1fr) 18px;gap:12px;align-items:baseline;padding:22px 0;cursor:pointer;list-style:none;font-family:var(--ts-font-sans);font-weight:600;font-size:clamp(17px,1.35vw,19px);line-height:1.35;color:var(--fg)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__no{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.14em;color:var(--meta)}
.faq__q{transition:color var(--ts-dur) var(--ts-ease)}
.faq__icon{position:relative;align-self:center;width:14px;height:14px}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;left:0;top:50%;width:14px;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform 220ms var(--ts-ease-out)}
.faq__icon::after{transform:rotate(90deg)}
.faq__item[open] .faq__icon::after{transform:rotate(0deg)}
.faq__a{max-width:none;padding:0 32px 26px 56px;font-size:16px;color:var(--fg-2)}
.faq__a p:last-child{margin-bottom:0}
/* the answer unfolds instead of snapping open (where the browser can animate details) */
@supports selector(::details-content){
  .faq{interpolate-size:allow-keywords}
  .faq__item::details-content{block-size:0;overflow:clip;transition:block-size 280ms var(--ts-ease-out),content-visibility 280ms allow-discrete}
  .faq__item[open]::details-content{block-size:auto}
}

/* ---------- contact ---------- */
.contact{overflow:hidden}
.contact__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px clamp(40px,6vw,96px);align-items:start}
.contact--plain .contact__grid{grid-template-columns:minmax(0,1fr)}
.contact .d1{font-size:clamp(42px,6vw,92px);max-width:12ch}
.contact .lead{max-width:40ch}
.facts{position:relative}
.formcard{border:0;border-radius:4px;box-shadow:var(--ts-shadow-xl);color:var(--ts-ink)}
.formcard .tsCard__body{gap:0;padding:clamp(28px,3vw,40px)}
.formcard__text{margin-top:10px;color:var(--ts-gray-700);font-size:16px}
.contact__form{display:grid;gap:18px;margin-top:26px}
.form__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.human__q{font-family:var(--ts-font-body);font-weight:600;font-size:16px;color:var(--ts-ink)}
.contact__form .tsBtn{margin-top:6px}
.contact__form .tsAlert{display:block;padding:14px 18px 14px 22px;font-family:var(--ts-font-body);font-size:15px;box-shadow:none}
.contact__success{align-items:center;margin-top:26px}
.contact__success .tsAlert__icon svg{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
/* Sending: the label stays (dimmed) and a spectrum segment runs along the foot of the button —
   constant motion, so linear, for as long as the request takes. v2.js sets .is-busy. */
.tsBtn.is-busy[disabled]{opacity:1;cursor:progress}
.tsBtn.is-busy>span,.tsBtn.is-busy>.ico{opacity:.55;transition:opacity var(--ts-dur) var(--ts-ease)}
.tsBtn.is-busy::before{content:"";position:absolute;left:0;bottom:0;z-index:3;width:40%;height:2px;background:var(--ts-gradient-brand);animation:v2-busy 1100ms linear infinite}
@keyframes v2-busy{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
/* Sent: the thank-you rises into place (it was display:none, so @starting-style gives it a start),
   then its check draws itself. Shown once per visitor — the delight is allowed here. */
.contact__success{transition:opacity 400ms var(--ts-ease-out),translate 400ms var(--ts-ease-out)}
.contact__success .tsAlert__icon path{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 320ms var(--ts-ease-out) 180ms}
@starting-style{
  .contact__success{opacity:0;translate:0 8px}
  .contact__success .tsAlert__icon path{stroke-dashoffset:1}
}
.meeting{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 56px;align-items:end;margin-top:72px;padding-top:40px;border-top:1px solid var(--line)}
.meeting .btns{margin-top:0}

/* ---------- case + post ---------- */
.casehead{overflow:hidden;padding-bottom:clamp(150px,15vw,230px)}
.casehead .d{margin-top:22px}
.facts.facts--case{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;width:max-content;max-width:100%;gap:1px;margin-top:40px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts--case>div{padding:18px 40px 18px 0;background:var(--bg)}
.facts--case>div+div{padding-left:28px}
.case__intro{max-width:56ch;margin-top:34px}
.case__cover{position:relative;z-index:4;margin-top:calc(-1 * clamp(120px,12vw,190px));background:linear-gradient(180deg,transparent 0 50%,var(--ts-white) 50%)}
.case__cover .media{aspect-ratio:16/9}
.casebody{padding-top:clamp(64px,7vw,96px)}
.prose{margin:0 auto}
.posthead{padding-top:clamp(64px,7vw,96px)}
.posthead .narrow{margin:0 auto}
.post__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:26px;font-family:var(--ts-font-sans);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ts-gray-600)}
.post__cover{max-width:1120px;margin:56px auto 0}
.post__cover .media{aspect-ratio:16/9}
.posthead .tsProse{margin-top:56px}
.share{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:56px;padding-top:24px;border-top:1px solid var(--ts-gray-200);font-family:var(--ts-font-sans);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ts-gray-600)}
.share a{color:var(--ts-ink);border-bottom:1px solid var(--ts-gray-300);transition:border-color var(--ts-dur) var(--ts-ease),color var(--ts-dur) var(--ts-ease)}
.progress{display:none}

/* =====================================================================
   MOTION — purposeful, interruptible, off the main thread where possible.
   Entrances: ease-out (.16,1,.3,1) with small fades and 8px rises (README).
   Everything below is cancelled or reduced under prefers-reduced-motion.
   ===================================================================== */
/* page load: the hero assembles itself once (CSS, so it runs while the page still loads) */
.rise>*{animation:v2-rise 900ms var(--ts-ease-out) both}
.rise>:nth-child(2){animation-delay:70ms}.rise>:nth-child(3){animation-delay:140ms}.rise>:nth-child(4){animation-delay:210ms}
.rise>:nth-child(5){animation-delay:280ms}.rise>:nth-child(6){animation-delay:350ms}.rise>:nth-child(7){animation-delay:420ms}.rise>:nth-child(n+8){animation-delay:490ms}
.rise>.d{animation-name:v2-wipe;animation-duration:1100ms}
@keyframes v2-rise{from{opacity:0;translate:0 8px}}
@keyframes v2-wipe{from{opacity:0;translate:0 14px;clip-path:inset(0 0 100% 0)}to{clip-path:inset(-10% -2% -10% -2%)}}
.rise>.eyebrow s{animation:v2-draw 900ms var(--ts-ease-out) 200ms both}
@keyframes v2-draw{from{transform:scaleX(0)}}
/* the sun rises and its scale calibrates, tick by tick */
/* the head suns fade in once, then turn slowly — the scale one way, the dashed ring the other, like a
   measuring instrument. Constant motion, so linear, and slow enough to notice only when you look. */
.sun--rise{animation:v2-fade 1200ms var(--ts-ease-out) 100ms both}
.sun--rise .sun__ticks,.sun--rise .sun__dash{transform-box:view-box;transform-origin:500px 500px}
.sun--rise .sun__ticks{animation:v2-spin 240s linear infinite}
.sun--rise .sun__dash{animation:v2-spin 180s linear infinite reverse}
@keyframes v2-spin{to{transform:rotate(360deg)}}
@keyframes v2-sunrise{from{opacity:0;translate:0 70px}}
/* page heads: the sun comes up from behind its horizon once, then sets as the head scrolls away */
.sun--rise .sun__ticks line{animation:v2-fade 500ms var(--ts-ease-out) both;animation-delay:calc(600ms + var(--k) * 14ms)}
@keyframes v2-fade{from{opacity:0}}
.hero__sun{will-change:transform}

/* scroll reveal (site.js adds .in once; only hidden while JS really runs) */
.js .v2 .reveal{opacity:0;translate:0 8px;
  transition:opacity 700ms var(--ts-ease-out),translate 700ms var(--ts-ease-out),transform var(--ts-dur) var(--ts-ease),box-shadow var(--ts-dur) var(--ts-ease),border-color var(--ts-dur) var(--ts-ease);
  transition-delay:calc(var(--i,0) * 60ms),calc(var(--i,0) * 60ms),0s,0s,0s}
.js .v2 .reveal.in{opacity:1;translate:none}
/* spectrum lines draw from the left when they come into view */
.js .v2 .s__rule.reveal{opacity:1;translate:none;transform:scaleX(0);transition:transform 1200ms var(--ts-ease-out) 80ms}
.js .v2 .s__rule.reveal.in{transform:none}
.js .v2 .reveal .eyebrow s,.js .v2 .reveal.eyebrow s{transform:scaleX(0);transition:transform 800ms var(--ts-ease-out) 260ms}
.js .v2 .reveal.in .eyebrow s,.js .v2 .reveal.in.eyebrow s{transform:none}
.js .v2 .tsCard.reveal .tsCard__rule{transform:scaleX(0);transform-origin:left center;transition:transform 900ms var(--ts-ease-out) calc(var(--i,0) * 60ms + 220ms)}
.js .v2 .tsCard.reveal.in .tsCard__rule{transform:none}
/* photos open like a shutter: the frame unclips top-down while the image settles */
/* (the clip sits on the image, not on the observed frame: a fully clipped element never "intersects") */
.js .v2 .reveal-img{opacity:1;translate:none}
.js .v2 .reveal-img .media{clip-path:inset(0 0 100% 0);transform:scale(1.06);transition:clip-path 700ms cubic-bezier(.77,0,.175,1) calc(var(--i,0) * 50ms),transform 1000ms var(--ts-ease-out) calc(var(--i,0) * 50ms)}
.js .v2 .reveal-img.in .media{clip-path:inset(0 0 0 0);transform:none}

/* hover: only for a real pointer (touch fires hover on tap) */
/* once revealed, a gallery photo answers hover quickly (the reveal's long, delayed transform is done) */
.js .v2 .reveal-img.in .gal__open .media{transition:clip-path 700ms cubic-bezier(.77,0,.175,1) calc(var(--i,0) * 50ms),transform 900ms var(--ts-ease-out)}
@media (hover:hover) and (pointer:fine){
  .faq__item summary:hover .faq__q{color:var(--link)}
  .js .v2 .reveal-img.in .gal__open:hover .media{transform:scale(1.04)}
  .lb__btn:hover{background:#E8E4DE;border-color:#E8E4DE;color:var(--ts-ink)}
  .tab:hover{color:#fff}
  .tab:hover::after{opacity:.5;clip-path:inset(0 0 0 0)}
  .drop__all:hover{color:#E8E4DE}
  .drop__item:hover{color:#fff}
  .drop__item:hover .drop__no{color:var(--ts-gold)}
  .drop__item:hover .ico{opacity:1;transform:none}
  .drop__item:hover::after{opacity:.4;clip-path:inset(0 0 0 0)}
  .lang a:hover{color:#E8E4DE}
  .hdr__cta:hover{background:#E8E4DE;color:var(--ts-ink);border-color:#E8E4DE}
  .tsBtn--p:hover{box-shadow:0 0 0 1px rgba(var(--halo),.5),0 6px 34px rgba(var(--halo),.38)}
  .tsBtn--s:hover{box-shadow:inset 0 0 0 1px var(--fg);background:rgba(127,127,127,.08)}
  .tsBtn:hover .ico,a:hover>.more .ico,.more:hover .ico{transform:translateX(3px)}
  .crumb:hover{color:var(--fg)}
  .crumb:hover .ico{transform:translateX(-3px)}
  .ftr__col a:hover,.ftr__contact a:hover,.ftr__social a:hover{color:#fff;background-size:100% 1px}
  .facts dd a:hover{color:var(--link)}
  .gal__open:hover .media,.crd:hover .crd__img,.pst:hover .pst__img,.member:hover .member__photo .media{transform:scale(1.04)}
  .logo:hover img{filter:none;opacity:1}
  .ticker:hover .ticker__track,.logos--run:hover .logos__track{animation-play-state:paused}
  .pc:hover{border-color:rgba(255,255,255,.34)}
  .pc:hover .pc__img{transform:scale(1.05)}
  .pc:hover .pc__glow{opacity:1}
  .pc:hover .pc__go{opacity:1;transform:none}
  .share a:hover{color:var(--ts-magenta);border-color:var(--ts-magenta)}
}
.pc:focus-visible .pc__go{opacity:1;transform:none}

/* reading progress on articles — scroll-driven, no script */
@supports (animation-timeline:scroll()){
  .progress{display:block;position:fixed;left:0;right:0;top:72px;z-index:39;height:3px;background:var(--ts-gradient-brand);transform-origin:left center;transform:scaleX(0);animation:v2-progress linear both;animation-timeline:scroll(root)}
  @keyframes v2-progress{to{transform:scaleX(1)}}
}
/* big photos settle as they travel through the viewport — scroll-driven, no script */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .banner__bg,.hero--cover .hero__bg{animation:v2-settle linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes v2-settle{from{transform:scale(1.16) translateY(-3%)}to{transform:scale(1.06) translateY(2%)}}
  }
  /* page to page: a short cross-fade; the header stays put */
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:v2-out 160ms var(--ts-ease) both}
  ::view-transition-new(root){animation:v2-in 320ms var(--ts-ease-out) both}
  @keyframes v2-out{to{opacity:0}}
  @keyframes v2-in{from{opacity:0;translate:0 6px}}
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1240px){
  .tab{padding:0 11px;letter-spacing:.16em}
  .hdr__cta{display:none}
}
@media (max-width:1100px){
  .burger{position:relative;display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:44px;height:44px;padding:0;border:1px solid rgba(232,228,222,.3);border-radius:6px;background:transparent;color:#E8E4DE;cursor:pointer}
  .burger i{display:block;width:18px;height:1.5px;background:currentColor;transition:transform 300ms var(--ts-ease-out)}
  .nav.open .burger i:first-child{transform:translateY(3.75px) rotate(45deg)}
  .nav.open .burger i:last-child{transform:translateY(-3.75px) rotate(-45deg)}
  .hdr__nav{position:fixed;top:73px;left:0;right:0;bottom:0;z-index:45;flex-direction:column;justify-content:space-between;gap:32px;padding:16px 40px 40px;overflow-y:auto;overscroll-behavior:contain;background:var(--ts-black);visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path 360ms var(--ts-ease-drawer,cubic-bezier(.32,.72,0,1)),visibility 0s linear 360ms}
  .nav.open .hdr__nav{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path 480ms cubic-bezier(.32,.72,0,1),visibility 0s}
  html:has(.nav.open){overflow:hidden}
  .hdr__tabs{flex-direction:column;align-self:stretch;margin:0}
  .hdr__tabs>li{display:block;border-bottom:1px solid rgba(255,255,255,.12)}
  .drop{display:block}
  .tab{height:auto;padding:18px 0 16px;overflow:visible;font-family:var(--ts-font-display);font-weight:400;font-size:clamp(24px,5.4vw,38px);letter-spacing:-.01em;color:#E8E4DE}
  .tab::after{display:none}
  .tab::before{top:16px;bottom:16px;left:-40px;right:auto;width:3px;height:auto;background:var(--ts-gradient-vertical);transform:scaleY(0)}
  .tab.is-here::before{transform:none}
  .drop>.tab{justify-content:space-between}
  .caret{width:10px;height:10px}
  .drop__menu{position:static;min-width:0;margin:0 0 18px;border:1px solid rgba(255,255,255,.12);border-radius:4px;box-shadow:none}
  .hdr__extra{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
  .hdr__extra .tsBtn--p{--_slat:repeating-linear-gradient(180deg,rgba(20,20,20,.22) 0 1px,transparent 1px 4px);background:#E8E4DE;color:var(--ts-ink)}
  .nav.open .hdr__tabs>li,.nav.open .hdr__extra{animation:v2-rise 500ms var(--ts-ease-out) both}
  .nav.open .hdr__tabs>li:nth-child(2){animation-delay:40ms}.nav.open .hdr__tabs>li:nth-child(3){animation-delay:80ms}
  .nav.open .hdr__tabs>li:nth-child(4){animation-delay:120ms}.nav.open .hdr__tabs>li:nth-child(5){animation-delay:160ms}
  .nav.open .hdr__tabs>li:nth-child(n+6){animation-delay:200ms}.nav.open .hdr__extra{animation-delay:240ms}
}
@media (max-width:1024px){
  .w{padding:0 40px}
  .hdr__nav{padding-left:40px;padding-right:40px}
  .split,.cols{grid-template-columns:minmax(0,1fr)}
  .is-left .split__text{order:0}
  .split__text .d{max-width:none}
  .head{grid-template-columns:minmax(0,1fr)}
  .cgrid{grid-template-columns:repeat(min(var(--n),2),minmax(0,1fr))}
  .steps__grid{grid-template-columns:repeat(min(var(--n),2),minmax(0,1fr))}
  .pc,.pc[data-span="4"],.pc[data-span="5"],.pc[data-span="7"]{grid-column:span 6;min-height:clamp(300px,42vw,420px)}
  .contact__grid{grid-template-columns:minmax(0,1fr)}
  .ftr__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ftr__brand{grid-column:1/-1}
  .join{grid-column:1/-1}
  .hero--full .hero__photo{left:0;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 60%);mask-image:linear-gradient(180deg,transparent 0,#000 60%)}
  .hero__cols{grid-template-columns:minmax(0,1fr)}
  .hero__cols .btns{justify-content:flex-start}
  .hero__sun{width:960px;height:960px}
}
@media (max-width:720px){
  body.v2{font-size:16px}
  .w{padding:0 20px}
  .hdr__nav{padding:8px 20px 32px}
  .tab::before{left:-20px}
  .hdr__in{gap:12px}
  .hdr__logo img{height:38px}
  .s{padding:72px 0}
  .hero--page{padding:72px 0 64px}
  .eyebrow{gap:10px;font-size:11px;letter-spacing:.22em}
  .eyebrow s{width:32px}
  .d1{font-size:clamp(34px,10vw,54px)}
  .d1.is-long{font-size:clamp(30px,8.4vw,44px);line-height:.92}
  .d2{font-size:clamp(30px,9vw,46px)}
  .d2.is-long{font-size:clamp(26px,7.4vw,38px)}
  .d2.is-xlong{font-size:clamp(25px,6.8vw,34px)}
  .d3{font-size:clamp(28px,7.8vw,38px)}
  .d3.is-long{font-size:clamp(24px,6.6vw,32px)}
  .d3.is-xlong{font-size:clamp(23px,6vw,30px)}
  .tsProse{font-size:16px}
  .tsProse h2{font-size:24px}
  .tsProse .tsProse__lead,.tsProse blockquote p{font-size:19px}
  .lead{font-size:17px;margin-top:22px}
  .btns{margin-top:30px}
  .btns .tsBtn{flex:1 1 auto;height:auto;min-height:52px;padding:14px 22px;white-space:normal;text-align:center;line-height:1.35}
  .hero__tag{font-size:clamp(22px,6.6vw,34px)}
  .hero__sun{top:auto;bottom:-260px;width:720px;height:720px}
  .hero__sun--side,.s__sun{width:480px;height:480px;right:-180px;top:-120px}
  .sunrise{right:-150px;height:72%;opacity:.6}
  .s.t-light,.s.t-sunken{--sun-w:150vw}
  .sunrise--case{bottom:96px;height:46%}
  .s__sun--low{width:760px;height:760px;bottom:-400px}
  .figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fig{padding:18px 12px}
  .fig__n{font-size:30px}
  .fig__l{font-size:9.5px;letter-spacing:.12em}
  .cgrid,.steps__grid{grid-template-columns:minmax(0,1fr)}
  .pc,.pc[data-span]{grid-column:1/-1;min-height:300px}
  .pgrid{gap:14px}
  .pc__body{padding:22px}
  .ftabs .tsTab{flex:0 0 auto;padding:14px 14px 13px}
  .head{margin-bottom:36px}
  .form__row{grid-template-columns:minmax(0,1fr)}
  .faq__item summary{grid-template-columns:30px minmax(0,1fr) 14px;padding:18px 0}
  .faq__a{padding:0 0 22px 42px}
  .meeting{grid-template-columns:minmax(0,1fr)}
  .facts:not(.facts--case){gap:20px 36px}
  .facts.facts--case{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:minmax(0,1fr);width:auto}
  .facts--case>div,.facts--case>div+div{padding:14px 0}
  .quote{padding:28px 22px 24px}
  .logos__track{gap:32px 44px}
  .logo img{height:36px}
  .ftr__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 24px}
  .ftr__bottom{margin-top:48px}
  .gal{grid-template-columns:minmax(0,1fr);gap:14px}
  .gal figure,.gal figure[data-span]{grid-column:1/-1}
  .gal [data-span] .media{aspect-ratio:4/3}
  .lb__stage{inset:64px 12px 72px}
  .lb__bar{height:64px;padding:0 12px 0 20px}
  .lb__prev,.lb__next{top:auto;bottom:12px;margin-top:0}
  .lb__prev{left:12px}
  .lb__next{right:12px}
  .case__cover{margin-top:calc(-1 * 96px)}
  .casehead{padding-bottom:140px}
  .progress{top:72px}
  .lang a{padding:8px 5px}
}
@media (max-width:400px){
  .hdr__right{gap:10px}
}

/* =====================================================================
   REDUCED MOTION — fewer and gentler: keep fades that explain, drop travel.
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .rise>*,.rise>.eyebrow s,.sun--rise,.sun--rise .sun__ticks,.sun--rise .sun__dash,.sun--rise .sun__ticks line,.nav.open .hdr__tabs>li,.nav.open .hdr__extra{animation:none}
  .ticker__track,.logos--run .logos__track{animation:none}
  .logos--run .logos__track{flex-wrap:wrap;justify-content:center;width:auto;padding-right:0}
  .logos--run .logos__dup{display:none}
  .logos__strip{-webkit-mask-image:none;mask-image:none}
  .js .v2 .reveal{translate:none;transition:opacity 200ms var(--ts-ease)}
  .js .v2 .reveal-img .media,.js .v2 .reveal-img.in .media{clip-path:none;transform:none;transition:none}
  .js .v2 .s__rule.reveal,.js .v2 .reveal .eyebrow s,.js .v2 .tsCard.reveal .tsCard__rule,.step::before{transform:none;transition:none}
  .hdr__nav,.nav.open .hdr__nav{clip-path:none;transition:visibility 0s}
  .faq__item::details-content,.faq__item::before,.faq__icon::before,.faq__icon::after{transition:none}
  .tsBtn.is-busy::before{animation:none;width:100%;opacity:.6}
  .contact__success{transition:opacity 200ms var(--ts-ease)}
  .contact__success .tsAlert__icon path{transition:none}
  @starting-style{.contact__success{translate:none}.contact__success .tsAlert__icon path{stroke-dashoffset:0}}
  .pc__img,.crd__img,.pst__img,.member__photo .media{transition:none}
}

/* =====================================================================
   CARE — the quiet mood (tokens/modes.css .ts-care) for funeral work:
   paper white instead of black, ochre as the only accent, sentence-case
   headings in Hanken Grotesk, no lines through the form, no halo.
   ===================================================================== */
.ts-care .t-dark{--bg:#FAF8F5;--fg:var(--ts-ink);--fg-2:var(--ts-gray-700);--muted:var(--ts-gray-600);--line:var(--ts-gray-200);--line-2:var(--ts-gray-300);--surface:var(--ts-white);--eb:var(--ts-gray-600);--meta:var(--ts-gold-600);--focus:var(--ts-ink);--link:var(--ts-gold-600)}
.ts-care .t-light{--meta:var(--ts-gold-600);--focus:var(--ts-ink);--link:var(--ts-gold-600)}
body.v2.ts-care{background:#FAF8F5}
.ts-care .d{font-family:var(--ts-font-body);font-weight:500;text-transform:none;letter-spacing:-.015em;line-height:1.12}
.ts-care .d1{font-size:clamp(36px,4.8vw,68px)}
.ts-care .d2{font-size:clamp(30px,3.8vw,54px)}
.ts-care .ts-lines,.ts-care .ts-floor,.ts-care .hero__tag,.ts-care .tab::after,.ts-care .drop__item::after{display:none}
.ts-care .s__rule,.ts-care .ticker .s__rule{height:2px;background:var(--ts-gold-600)}
.ts-care .eyebrow s{height:2px;background:var(--ts-gold-600)}
.ts-care .hero__veil,.ts-care .contact__veil{background:radial-gradient(112% 82% at 50% 100%,rgba(250,248,245,0),rgba(250,248,245,.7) 52%,#FAF8F5 80%)}
.ts-care .hero--cover .hero__veil{background:linear-gradient(180deg,rgba(250,248,245,.2) 0,rgba(250,248,245,.4) 40%,rgba(250,248,245,.94) 84%,#FAF8F5 100%)}
.ts-care .banner__veil{background:linear-gradient(90deg,rgba(250,248,245,.96) 0,rgba(250,248,245,.78) 48%,rgba(250,248,245,.2) 100%)}
.ts-care .hero__sun,.ts-care .s__sun,.ts-care .sunrise{color:var(--ts-gray-500)}
.ts-care .tsBtn--p,.ts-care .tsBtn--s,.ts-care .t-dark .tsBtn--p,.ts-care .t-dark .tsBtn--s{background:transparent;color:var(--ts-ink);border-radius:2px;letter-spacing:.16em;box-shadow:inset 0 0 0 1px var(--ts-gray-400);transition:background 360ms var(--ts-ease),color 360ms var(--ts-ease)}
.ts-care .tsBtn--p::after{display:none}
.ts-care .tsCard,.ts-care .frame,.ts-care .quote,.ts-care .pc{border-radius:2px;box-shadow:none}
.ts-care .tsCard__rule{height:2px;background:var(--ts-gold-600)}
.ts-care .faq__item::before{background:var(--ts-gold-600)}
.ts-care .crd__no,.ts-care .pc__meta{color:var(--ts-gold-600)}
.ts-care .crd__title,.ts-care .pst__title,.ts-care .pc__title,.ts-care .step__title,.ts-care .member__name{font-family:var(--ts-font-body);font-weight:600;text-transform:none;letter-spacing:-.01em}
.ts-care .pc__meta{color:var(--ts-gold)}
.ts-care .stars i{background:var(--ts-gold-600)}
.ts-care .tsProse h2{font-family:var(--ts-font-body);font-weight:500;text-transform:none;font-size:25px;line-height:1.24;letter-spacing:-.015em}
.ts-care .tsProse h4,.ts-care .tsProse a{color:var(--ts-gold-600)}
.ts-care .tsProse ul>li::before{background:var(--ts-gold-600);border-radius:0;height:2px;width:14px;top:.72em}
.ts-care .tsProse blockquote{border-image:none;border-left:2px solid var(--ts-gold-600)}
.ts-care .hdr{color:var(--ts-ink);border-bottom-color:var(--ts-gray-200)}
.ts-care .hdr::before{background:rgba(250,248,245,.9)}
.ts-care .tab,.ts-care .lang a{color:var(--ts-gray-600)}
.ts-care .tab.is-here,.ts-care .drop[open]>.tab,.ts-care .lang a[aria-current]{color:var(--ts-ink)}
.ts-care .tab::before,.ts-care .lang a[aria-current]::after,.ts-care .drop__item::before{height:2px;background:var(--ts-gold-600)}
.ts-care .drop__menu,.ts-care .drop__item{background:#FAF8F5;color:var(--ts-ink);border-color:var(--ts-gray-200)}
.ts-care .drop__list{background:var(--ts-gray-200)}
.ts-care .drop__all,.ts-care .drop__no{color:var(--ts-gray-600)}
.ts-care .drop__count,.ts-care .drop__item.is-here .drop__no{color:var(--ts-gold-600)}
.ts-care .hdr__cta,.ts-care .burger{border-color:var(--ts-gray-400);color:var(--ts-ink)}
.ts-care .hdr__phone{color:var(--ts-ink)}
.ts-care .ftr__bottom{color:var(--ts-gray-500)}
.ts-care .fig__n{background:none;-webkit-text-fill-color:var(--ts-gold-600);color:var(--ts-gold-600)}
.ts-care .tsTabs--dark{--_line:var(--ts-gray-200);--_fg:var(--ts-ink);--_muted:var(--ts-gray-600);--_surface:#FAF8F5}
.ts-care .tsTab.is-on{background:var(--ts-white);font-family:var(--ts-font-body);font-weight:600;font-size:14px}
.ts-care .tsTab.is-on::before{height:2px;background:var(--ts-gold-600)}
.ts-care .tsTab::after{display:none}
.ts-care .reveal{transition-duration:1000ms}
@media (hover:hover) and (pointer:fine){
  .ts-care .tsBtn--p:hover,.ts-care .tsBtn--s:hover{background:var(--ts-ink);color:#fff;box-shadow:none}
  .ts-care .tab:hover,.ts-care .drop__item:hover,.ts-care .lang a:hover{color:var(--ts-ink)}
  .ts-care .hdr__cta:hover{background:var(--ts-ink);color:#fff;border-color:var(--ts-ink)}
  .ts-care .ftr__col a:hover,.ts-care .ftr__contact a:hover{color:var(--ts-ink)}
  .ts-care .pc__glow{display:none}
}
@media (max-width:1100px){
  .ts-care .hdr__nav{background:#FAF8F5}
  .ts-care .tab{color:var(--ts-ink)}
  .ts-care .hdr__tabs>li{border-bottom-color:var(--ts-gray-200)}
  .ts-care .hdr__extra .tsBtn--p{background:transparent;color:var(--ts-ink)}
}

/* the viewer's morph: the page behind only cross-fades (no page-to-page rise) */
html.lb-vt::view-transition-old(root){animation:v2-out 240ms var(--ts-ease) both}
html.lb-vt::view-transition-new(root){animation:v2-fade 240ms var(--ts-ease-out) both}