/* =====================================================================
   TrafixIA — Global stylesheet
   ---------------------------------------------------------------------
   Extracted from the monolithic <style> of the home v2.
   Table of contents:
     1.  Design tokens (:root)
     2.  Reset & base
     3.  Background decor (aurora, spotlight)
     4.  Typography
     5.  Glass primitives + tilt/glow
     6.  Layout (wrap, sections)
     7.  Buttons
     8.  Nav (desktop, mobile drawer, services dropdown)
     9.  Progress bar
     10. Section: Hero
     11. Section header
     12. Section: Problem
     13. Section: Diagnostic
     14. Section: Services
     15. Section: Method
     16. Section: Agency
     17. Section: Filter
     18. Section: Final CTA
     19. Footer
     20. Animations (reveal, word-mask, pulse)
     21. Responsive
   ===================================================================== */


/* =====================================================================
   1. Design tokens
   ===================================================================== */
:root{
    --ink:#0A0A0E;
    --ink-2:#101015;
    --paper:#F2EEE6;
    --paper-soft:#E8E3D8;
    --warm:#EFEAE0;
    --muted:#8A8593;
    --muted-2:#5E5A66;
    --line:rgba(239,234,224,.10);
    --line-strong:rgba(239,234,224,.22);
    --line-dark:rgba(10,10,14,.12);
    --acc:#E55A2B;        /* warm modern red */
    --acc-2:#C6342F;      /* deep bordeaux for continuity */
    --acc-3:#F4B860;      /* amber */
    --acc-4:#D8A06B;      /* sand */
    --glass: rgba(255,253,247,.04);
    --glass-2: rgba(255,253,247,.07);
    --glass-light: rgba(247,243,233,.78);
    --serif:"Instrument Serif", "Times New Roman", serif;
    --sans:"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --max:1360px;
    --gutter:clamp(20px, 4vw, 56px);
}


/* =====================================================================
   2. Reset & base
   ===================================================================== */
*,*::before,*::after{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
    background: var(--ink);
    color: var(--warm);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
::selection{ background: var(--acc); color: var(--warm); }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
p{ margin: 0 0 1em; }
p:last-child{ margin-bottom: 0; }
ul{ list-style: none; padding: 0; margin: 0; }
img,svg{ display: block; max-width: 100%; }


/* =====================================================================
   3. Background decor (aurora gradient + cursor spotlight)
   ===================================================================== */
.aurora{
    position: fixed; inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: var(--ink);
}
.aurora::before, .aurora::after{
    content:""; position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: .55;
    will-change: transform;
}
.aurora::before{
    width: 70vw; height: 70vw;
    background: radial-gradient(circle at center, var(--acc-2) 0%, transparent 60%);
    top: -20vw; right: -15vw;
    transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
    transition: transform .8s cubic-bezier(.2,.65,.2,1);
}
.aurora::after{
    width: 65vw; height: 65vw;
    background: radial-gradient(circle at center, var(--acc-3) 0%, transparent 65%);
    bottom: -25vw; left: -20vw;
    opacity: .35;
    transform: translate3d(calc(var(--mx, 0px) * -0.6), calc(var(--my, 0px) * -0.6), 0);
    transition: transform .8s cubic-bezier(.2,.65,.2,1);
}
.aurora__mid{
    position:absolute; inset:0;
    background:
      radial-gradient(40vw 40vw at 60% 40%, rgba(229,90,43,.18), transparent 60%),
      radial-gradient(50vw 50vw at 30% 80%, rgba(198,52,47,.22), transparent 65%),
      radial-gradient(45vw 45vw at 80% 90%, rgba(244,184,96,.10), transparent 60%);
    transform: translate3d(0, var(--scrolly, 0px), 0);
    will-change: transform;
}
.aurora__grain{
    position:absolute; inset:0; opacity:.5; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.aurora__vignette{
    position:absolute; inset:0;
    background: radial-gradient(120vw 80vh at 50% 50%, transparent 0%, rgba(10,10,14,.55) 70%, rgba(10,10,14,.85) 100%);
}

.spotlight{
    position: fixed; pointer-events: none; z-index: 1;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244,184,96,.10) 0%, transparent 60%);
    transform: translate(-50%,-50%);
    left: var(--cx, 50%); top: var(--cy, 50%);
    mix-blend-mode: screen;
    transition: opacity .3s ease;
    will-change: transform, left, top;
}
@media (max-width: 900px){ .spotlight{ display: none; } }


/* =====================================================================
   4. Typography
   ===================================================================== */
h1,h2,h3,h4{ margin: 0; font-weight: 400; letter-spacing: -0.02em; line-height: 1.02; }
h1{
    font-family: var(--serif);
    font-size: clamp(3.6rem, 8.4vw, 8.4rem);
    letter-spacing: -0.035em;
    line-height: .98;
}
h2{
    font-family: var(--serif);
    font-size: clamp(2.6rem, 5.2vw, 5rem);
    line-height: 1.02;
    letter-spacing: -0.028em;
}
h3{
    font-family: var(--serif);
    font-size: clamp(1.7rem, 2.4vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: -0.022em;
}
h4{
    font-family: var(--sans);
    font-size: .76rem; font-weight: 500;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--muted);
}
em, .it{ font-style: italic; font-family: var(--serif); }

.mono{
    font-family: var(--mono);
    font-size: .76rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}
.mono.num{ text-transform: none; font-feature-settings: "tnum"; letter-spacing: 0; }

.eyebrow{
    font-family: var(--mono);
    font-size: .72rem; letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    display: inline-flex; align-items: center; gap: 14px;
}
.eyebrow::before{
    content:""; width: 10px; height: 10px; border-radius:50%;
    background: var(--acc);
    box-shadow: 0 0 12px var(--acc);
}


/* =====================================================================
   5. Glass primitives + reusable tilt/glow
   ===================================================================== */
.glass{
    background: var(--glass);
    border: 1px solid var(--line);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}
.glass::before{
    /* highlight rim */
    content:""; position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 40%, transparent 60%, rgba(255,255,255,.04) 100%);
    pointer-events: none;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    padding: 1px;
}
.glass--strong{
    background: var(--glass-2);
    border-color: var(--line-strong);
}
.glass--light{
    background: var(--glass-light);
    color: var(--ink);
    border-color: rgba(10,10,14,.06);
}
.glass--light h4{ color: var(--muted-2); }
.glass--light .eyebrow{ color: var(--muted-2); }

/* Tilt + glow on hover for cards */
[data-tilt]{
    transform-style: preserve-3d;
    transition: transform .35s cubic-bezier(.2,.65,.2,1), box-shadow .35s ease;
    will-change: transform;
}
[data-tilt]:hover{
    box-shadow: 0 30px 80px -20px rgba(229,90,43,.25);
}
[data-glow]{
    position: relative;
    isolation: isolate;
}
[data-glow]::after{
    content: ""; position: absolute; inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(280px circle at var(--gx, 50%) var(--gy, 50%), rgba(244,184,96,.18), transparent 50%);
    opacity: 0; transition: opacity .3s ease;
    z-index: 0;
    mix-blend-mode: screen;
}
[data-glow]:hover::after{ opacity: 1; }


/* =====================================================================
   6. Layout (wrap, section padding)
   ===================================================================== */
.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 2; }
section{ position: relative; z-index: 2; }
.section-pad{ padding: clamp(80px, 11vw, 160px) 0; }


/* =====================================================================
   7. Buttons
   ===================================================================== */
.btn{
    display: inline-flex; align-items: center; gap: 14px;
    padding: 18px 26px;
    border-radius: 999px;
    font-size: .98rem; font-weight: 500; letter-spacing: 0;
    border: 1px solid transparent;
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
}
.btn .arrow{ display:inline-block; transition: transform .3s cubic-bezier(.4,.2,.2,1); }
.btn:hover .arrow{ transform: translateX(4px); }
.btn--primary{
    background: linear-gradient(180deg, #ED6B3D 0%, #C6342F 100%);
    color: var(--warm);
    box-shadow: 0 14px 40px -10px rgba(229,90,43,.55), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 22px 60px -10px rgba(229,90,43,.7), inset 0 1px 0 rgba(255,255,255,.22); }
.btn--glass{
    background: var(--glass-2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-color: var(--line-strong);
    color: var(--warm);
}
.btn--glass:hover{ background: rgba(255,253,247,.12); border-color: var(--warm); }
.btn--pill-inner{
    display:inline-flex; align-items:center;
    background: rgba(255,255,255,.16);
    padding: 4px 10px; border-radius: 999px;
    font-family: var(--mono); font-size: .76rem;
    margin-left: 4px;
}


/* =====================================================================
   8. Nav (floating desktop pill + services dropdown + mobile drawer)
   ===================================================================== */
.nav{
    position: fixed; top: 16px; left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: inline-flex; align-items: center; gap: 12px;
    padding: 8px 8px 8px 22px;
    border-radius: 999px;
    background: rgba(10,10,14,.45);
    border: 1px solid var(--line);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 20px 60px -20px rgba(0,0,0,.5);
    max-width: calc(100vw - 24px);
}
.brand{
    font-family: var(--serif); font-style: italic;
    font-size: 1.25rem;
    display: inline-flex; align-items: baseline; gap: 6px;
    padding-right: 14px;
    border-right: 1px solid var(--line);
    letter-spacing: -0.01em;
}
.brand .dot{
    display:inline-block; width:6px; height:6px; border-radius:50%;
    background: var(--acc);
    transform: translateY(-2px);
    box-shadow: 0 0 10px var(--acc);
}
.nav__links{ display: flex; gap: 4px; }
.nav__links > li{ position: relative; }
.nav__links a,
.nav__links .nav__toggle{
    padding: 10px 14px;
    font-size: .88rem;
    color: var(--muted);
    border-radius: 999px;
    transition: color .2s ease, background .2s ease;
    display: inline-flex; align-items: center; gap: 6px;
}
.nav__links a:hover,
.nav__links .nav__toggle:hover{ color: var(--warm); background: rgba(255,253,247,.06); }
.nav__toggle .caret{
    width: 8px; height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-1px,-1px);
    transition: transform .25s ease;
}

/* Dropdown — triggered on :hover and :focus-within */
.nav__dropdown{
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 320px;
    padding: 10px;
    border-radius: 20px;
    background: rgba(10,10,14,.85);
    border: 1px solid var(--line-strong);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 20px 60px -20px rgba(0,0,0,.5);
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, transform .25s ease, visibility 0s linear .25s;
    display: flex; flex-direction: column; gap: 2px;
}
.nav__has-dropdown:hover .nav__dropdown,
.nav__has-dropdown:focus-within .nav__dropdown{
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity .2s ease, transform .25s ease, visibility 0s linear 0s;
}
.nav__has-dropdown:hover .nav__toggle .caret,
.nav__has-dropdown:focus-within .nav__toggle .caret{ transform: rotate(-135deg) translate(-1px,-1px); }
.nav__dropdown a{
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 14px;
    color: var(--warm);
    font-size: .92rem;
}
.nav__dropdown a:hover{ background: rgba(255,253,247,.06); color: var(--warm); }
.nav__dropdown a .num{
    font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
    color: var(--muted);
}
.nav__dropdown a .tag{
    font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--acc-3);
}

.nav__cta{
    padding: 12px 18px;
    border-radius: 999px;
    font-size: .88rem; font-weight: 500;
    background: linear-gradient(180deg, #ED6B3D 0%, #C6342F 100%);
    color: var(--warm);
    box-shadow: 0 6px 20px -4px rgba(229,90,43,.5);
    display: inline-flex; align-items: center; gap: 8px;
    transition: transform .2s ease;
}
.nav__cta:hover{ transform: translateY(-1px); }
.burger{
    display: none; width: 40px; height: 40px;
    border-radius: 999px; align-items: center; justify-content: center;
    border: 1px solid var(--line);
}
.burger span{
    width: 16px; height: 1.5px; background: var(--warm); position: relative;
    display: block;
}
.burger span::before, .burger span::after{
    content:""; position:absolute; left:0; width:100%; height:100%; background: var(--warm);
    transition: transform .25s, top .25s;
}
.burger span::before{ top: -5px; }
.burger span::after{ top: 5px; }
.nav.is-open .burger span{ background: transparent; }
.nav.is-open .burger span::before{ top: 0; transform: rotate(45deg); }
.nav.is-open .burger span::after{ top: 0; transform: rotate(-45deg); }

/* Drawer (mobile) */
.drawer{
    position: fixed; inset: 0; z-index: 49;
    background: rgba(10,10,14,.82);
    backdrop-filter: blur(30px) saturate(160%);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    transform: translateY(calc(-100% - 80px));
    visibility: hidden;
    transition: transform .4s cubic-bezier(.65,.05,.36,1), visibility 0s linear .4s;
    padding: 96px var(--gutter) 48px;
    display: flex; flex-direction: column;
    overflow-y: auto;
}
.drawer.is-open{
    transform: translateY(0); visibility: visible;
    transition: transform .4s cubic-bezier(.65,.05,.36,1), visibility 0s linear 0s;
}
.drawer a{
    padding: 22px 0; font-family: var(--serif);
    font-size: 2.4rem; letter-spacing: -0.025em;
    border-bottom: 1px solid var(--line);
    display: flex; justify-content: space-between; align-items: baseline;
}
.drawer a .num{ font-family: var(--mono); font-size: .82rem; color: var(--muted); }
.drawer__cta{
    margin-top: 32px;
    background: linear-gradient(180deg, #ED6B3D 0%, #C6342F 100%);
    color: var(--warm) !important;
    font-family: var(--sans) !important;
    font-size: 1rem !important;
    padding: 20px !important;
    border-radius: 999px;
    border-bottom: 0 !important;
    justify-content: center !important;
}


/* =====================================================================
   9. Progress bar
   ===================================================================== */
.progress{
    position: fixed; left:0; right:0; top:0; height: 2px;
    z-index: 60; pointer-events: none;
}
.progress > span{
    display:block; height:100%; width:0%;
    background: linear-gradient(90deg, var(--acc), var(--acc-3));
    transition: width .12s linear;
    box-shadow: 0 0 12px var(--acc);
}


/* =====================================================================
   10. Section: HERO
   ===================================================================== */
.hero{
    min-height: 100vh;
    padding: clamp(96px, 13vh, 128px) 0 clamp(48px, 6vh, 72px);
    display: flex; align-items: center;
    position: relative;
}
.hero__inner{ width: 100%; }
.hero__top{
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 32px; margin-bottom: clamp(24px, 4vh, 40px); flex-wrap: wrap;
}
.hero__chip{
    display: inline-flex; align-items: center; gap: 12px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--glass);
    border: 1px solid var(--line);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    font-family: var(--mono); font-size: .74rem;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted);
}
.hero__chip .live{
    display:inline-block; width:8px; height:8px; border-radius:50%;
    background: #5BE49B;
    box-shadow: 0 0 10px #5BE49B;
    animation: pulse 2s ease-in-out infinite;
}
.hero__pillar{
    display: flex; align-items: center; gap: 14px;
    font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted);
}
.hero__pillar > span:not(:last-child)::after{
    content: "·"; display: inline-block; margin-left: 14px; color: var(--muted-2);
}
.hero h1{
    text-wrap: balance;
    max-width: 16ch;
    font-size: clamp(3rem, 7.4vw, 7.6rem);
}
.hero h1 .it{
    color: transparent;
    background: linear-gradient(110deg, #F4B860 10%, #E55A2B 40%, #C6342F 70%);
    -webkit-background-clip: text;
    background-clip: text;
    display: inline-block;
    padding-right: 8px;
}
.hero h1 .it::after{
    content: "."; color: var(--warm);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
}
.hero__sub{
    margin-top: clamp(20px, 3vh, 36px);
    max-width: 56ch;
    font-size: 1.18rem;
    color: rgba(239,234,224,.78);
    line-height: 1.55;
}
.hero__ctas{
    margin-top: clamp(28px, 4.5vh, 44px);
    display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
}
.hero__hint{
    margin-left: 12px;
    font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
    color: var(--muted); text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 10px;
}
.hero__hint .kbd{
    border: 1px solid var(--line-strong);
    padding: 3px 7px; border-radius: 6px; font-size: .68rem;
    background: var(--glass);
}

.hero__strip{
    margin-top: clamp(40px, 6vh, 72px);
    padding: 24px 32px;
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
.hero__strip .cell{
    padding: 4px 24px;
    border-right: 1px solid var(--line);
}
.hero__strip .cell:first-child{ padding-left: 0; }
.hero__strip .cell:last-child{ border-right: 0; padding-right: 0; }
.hero__strip .cell .lbl{
    font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted);
    display: block; margin-bottom: 10px;
}
.hero__strip .cell .val{
    font-family: var(--serif); font-size: 2.2rem; letter-spacing: -0.03em; line-height: 1;
}
.hero__strip .cell .val .it{ color: var(--acc-3); font-size: .8em; }


/* =====================================================================
   11. Section header (reusable)
   ===================================================================== */
.sec-head{
    display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 80px);
    align-items: end;
    margin-bottom: clamp(56px, 8vw, 96px);
}
.sec-head h2{ text-wrap: balance; }
.sec-head__lede{
    font-size: 1.1rem;
    line-height: 1.55;
    color: rgba(239,234,224,.74);
    max-width: 56ch;
}


/* =====================================================================
   12. Section: Problem
   ===================================================================== */
.problem{}
.problem__big{
    font-family: var(--serif);
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    line-height: 1.35; letter-spacing: -0.015em;
    color: rgba(239,234,224,.92);
    max-width: 38ch;
}
.problem__big em{ color: var(--acc-3); }
.problem__grid{
    margin-top: 56px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.problem__card{
    padding: 32px;
    min-height: 220px;
    display: flex; flex-direction: column; justify-content: space-between;
    gap: 24px;
}
.problem__card .big{
    font-family: var(--serif);
    font-size: clamp(3rem, 5vw, 4.5rem);
    line-height: .9; letter-spacing: -0.04em;
}
.problem__card .big .u{ font-size: .4em; color: var(--muted); }
.problem__card.accent .big{ color: var(--acc-3); }
.problem__card .lbl{
    font-size: .92rem;
    color: rgba(239,234,224,.65);
    line-height: 1.45;
    max-width: 28ch;
}
.problem__card .ix{
    font-family: var(--mono); font-size: .72rem;
    color: var(--muted); letter-spacing: .1em;
}


/* =====================================================================
   13. Section: Diagnostic
   ===================================================================== */
.diag{}
.diag__card{
    padding: clamp(40px, 5vw, 72px);
    border-radius: 32px;
    display: grid; grid-template-columns: 6fr 6fr; gap: clamp(40px, 5vw, 80px);
    align-items: start;
    position: relative;
}
.diag__card::after{
    /* corner spotlight */
    content:""; position:absolute; top:-1px; right:-1px;
    width: 40%; height: 60%;
    background: radial-gradient(circle at top right, rgba(244,184,96,.25), transparent 60%);
    border-radius: inherit;
    pointer-events: none;
}
.diag__left h2{
    font-size: clamp(2.4rem, 4.4vw, 4rem);
}
.diag__left h2 em{
    background: linear-gradient(110deg, #F4B860, #E55A2B);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.diag__meta{
    margin-top: 36px;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.diag__meta span{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255,253,247,.06);
    border: 1px solid var(--line);
    font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(239,234,224,.7);
}
.diag__meta span::before{
    content:""; width:5px; height:5px; border-radius:50%; background: var(--acc-3);
}
.diag__price{
    margin-top: 44px;
    display: flex; align-items: baseline; gap: 16px;
}
.diag__price .amount{
    font-family: var(--serif);
    font-size: clamp(4rem, 6.5vw, 6rem);
    letter-spacing: -0.04em; line-height: 1;
}
.diag__price .unit{
    font-family: var(--mono); font-size: .76rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted);
    max-width: 18ch;
}
.diag__right p{
    font-size: 1.08rem;
    color: rgba(239,234,224,.78);
    margin-bottom: 36px;
    line-height: 1.6;
}
.delivs{
    display: flex; flex-direction: column;
    gap: 8px;
    margin-bottom: 36px;
}
.deliv{
    display: grid; grid-template-columns: 40px 1fr;
    align-items: baseline; gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    transition: padding-left .25s ease;
}
.deliv:last-child{ border-bottom: 0; }
.deliv:hover{ padding-left: 8px; }
.deliv .ix{
    font-family: var(--mono); font-size: .76rem;
    color: var(--acc-3); letter-spacing: .05em;
}
.deliv .txt{
    font-size: 1.02rem; color: rgba(239,234,224,.92);
}


/* =====================================================================
   14. Section: Services
   ===================================================================== */
.services .sec-head{ align-items: end; }
.services__grid{
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}
.svc{
    grid-column: span 3;
    padding: 28px 32px 32px;
    border-radius: 24px;
    display: flex; flex-direction: column;
    gap: 18px;
    min-height: 260px;
    position: relative;
    transition: transform .35s cubic-bezier(.2,.65,.2,1);
}
.svc:hover{ transform: translateY(-4px); }
.svc--flag{
    grid-column: span 6;
    min-height: 220px;
    background: linear-gradient(135deg, rgba(229,90,43,.15) 0%, rgba(198,52,47,.05) 50%, rgba(244,184,96,.08) 100%);
    border-color: rgba(229,90,43,.25);
}
.svc__head{
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 14px;
}
.svc__ix{
    font-family: var(--mono); font-size: .72rem; color: var(--muted); letter-spacing: .08em;
}
.svc__tag{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 10px; border-radius: 999px;
    font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
    background: rgba(229,90,43,.18);
    color: var(--acc-3);
    border: 1px solid rgba(244,184,96,.3);
}
.svc__tag::before{
    content:""; width: 5px; height: 5px; border-radius: 50%; background: var(--acc-3);
    box-shadow: 0 0 8px var(--acc-3);
}
.svc__title{
    font-family: var(--serif);
    font-size: 1.85rem; line-height: 1.05; letter-spacing: -0.022em;
    margin-top: 4px;
}
.svc--flag .svc__title{ font-size: 2.6rem; max-width: 14ch; }
.svc__pitch{
    color: rgba(239,234,224,.7);
    font-size: .97rem;
    line-height: 1.5;
    margin-top: auto;
}
.svc__foot{
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    margin-top: 8px;
}
.svc__price{
    font-family: var(--mono); font-size: .92rem; letter-spacing: 0;
    color: var(--warm);
}
.svc__price small{
    display: block;
    font-size: .68rem; color: var(--muted);
    margin-top: 2px;
    letter-spacing: .08em; text-transform: uppercase;
}
.svc__go{
    width: 44px; height: 44px; border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: var(--glass);
    display: flex; align-items: center; justify-content: center;
    transition: background .25s ease, border-color .25s ease;
}
.svc:hover .svc__go{
    background: linear-gradient(180deg, #ED6B3D, #C6342F);
    border-color: transparent;
}
.svc__go svg{ transition: transform .3s cubic-bezier(.4,.2,.2,1); }
.svc:hover .svc__go svg{ transform: translate(2px,-2px); }


/* =====================================================================
   15. Section: Method (light panel)
   ===================================================================== */
.method{}
.method__plate{
    padding: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 56px);
    border-radius: 32px;
    background: var(--glass-light);
    backdrop-filter: blur(30px) saturate(140%);
    -webkit-backdrop-filter: blur(30px) saturate(140%);
    border: 1px solid rgba(10,10,14,.06);
    color: var(--ink);
    position: relative;
}
.method__plate h2{ color: var(--ink); }
.method__plate h2 em{ color: var(--acc-2); }
.method__plate .eyebrow{ color: var(--muted-2); }
.method__plate .eyebrow::before{ background: var(--acc); }
.method__plate .sec-head__lede{ color: var(--muted-2); }
.method__grid{
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid rgba(10,10,14,.12);
    margin-top: 32px;
}
.step{
    padding: 36px 24px 8px 0;
    border-right: 1px dashed rgba(10,10,14,.14);
    position: relative;
}
.step:last-child{ border-right: 0; padding-right: 0; }
.step__num{
    font-family: var(--serif); font-size: 4.5rem; line-height: .9;
    color: var(--acc-2);
    margin-bottom: 32px;
    letter-spacing: -0.04em;
    position: relative;
    display: inline-block;
}
.step__num::after{
    content:""; position: absolute; right: -8px; top: 8px;
    width: 8px; height: 8px; background: var(--acc); border-radius: 50%;
}
.step__title{
    font-family: var(--serif);
    font-size: 1.5rem; letter-spacing: -0.02em;
    margin-bottom: 14px;
    color: var(--ink);
}
.step__body{
    color: var(--muted-2);
    font-size: .95rem;
    line-height: 1.55;
}
.method__line{
    position: absolute; left: clamp(32px, 4vw, 56px); right: clamp(32px, 4vw, 56px); top: calc(50%);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--acc) 50%, transparent);
    opacity: .4; pointer-events: none;
}


/* =====================================================================
   16. Section: Agency
   ===================================================================== */
.agency{}
.agency__head{
    display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 6vw, 80px); align-items: end;
    margin-bottom: 80px;
}
.agency__stats{
    margin-bottom: 80px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.agency__stat{
    padding: 36px 32px;
    border-radius: 24px;
    min-height: 180px;
    display: flex; flex-direction: column; justify-content: space-between;
}
.agency__stat .big{
    font-family: var(--serif);
    font-size: clamp(3.2rem, 5vw, 4.6rem);
    line-height: .9; letter-spacing: -0.04em;
}
.agency__stat .big sup{
    font-size: .35em;
    color: var(--acc);
    vertical-align: super;
    margin-left: 2px;
}
.agency__stat .lbl{
    color: rgba(239,234,224,.65);
    font-size: .94rem;
    line-height: 1.5;
    max-width: 28ch;
}
.agency__body{
    display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 5vw, 80px);
}
.agency__copy p{
    font-size: 1.12rem;
    color: rgba(239,234,224,.78);
    line-height: 1.62;
    max-width: 56ch;
}
.agency__domains h4{
    margin-bottom: 24px;
}
.agency__domains ul{
    border-top: 1px solid var(--line);
}
.agency__domains li{
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}
.agency__domains .dom{
    font-family: var(--serif); font-size: 1.2rem; letter-spacing: -0.018em;
    display: block; margin-bottom: 6px;
}
.agency__domains .tools{
    font-family: var(--mono); font-size: .76rem;
    color: var(--muted); letter-spacing: .04em;
}
.agency__quote{
    margin-top: 56px;
    padding: 36px 40px;
    border-radius: 20px;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.2rem, 1.6vw, 1.45rem);
    color: rgba(239,234,224,.88);
    line-height: 1.55;
    max-width: 80ch;
    position: relative;
}
.agency__quote::before{
    content: "\201C";
    position: absolute; top: 20px; left: 28px;
    font-family: var(--serif); font-style: normal;
    font-size: 5rem; line-height: .8;
    color: var(--acc-3);
    opacity: .3;
}
.agency__quote p{
    padding-left: 36px;
    text-wrap: balance;
}


/* =====================================================================
   17. Section: Filter (who it's for / who it's not for)
   ===================================================================== */
.filter{}
.filter__grid{
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.filter__panel{
    padding: 40px;
    border-radius: 28px;
    min-height: 480px;
}
.filter__panel.yes{
    background: linear-gradient(180deg, rgba(244,184,96,.08), rgba(229,90,43,.04));
    border-color: rgba(244,184,96,.2);
}
.filter__panel h3{
    font-size: 2rem;
    margin-bottom: 8px;
}
.filter__panel.yes h3 em{ color: var(--acc-3); }
.filter__panel.no h3 em{ color: var(--muted); }
.filter__panel .sub{
    font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted);
    margin-bottom: 36px;
    display: flex; align-items: center; gap: 14px;
}
.filter__panel .sub::before{
    content:""; width: 8px; height: 8px; border-radius: 50%; background: currentColor;
}
.filter__panel.yes .sub::before{ background: var(--acc-3); box-shadow: 0 0 10px var(--acc-3); }
.filter__panel.no .sub::before{ background: var(--muted); }
.filter__panel ul{
    border-top: 1px solid var(--line);
}
.filter__panel li{
    padding: 18px 0 18px 36px;
    border-bottom: 1px solid var(--line);
    font-size: 1.02rem;
    color: rgba(239,234,224,.88);
    position: relative;
    line-height: 1.45;
}
.filter__panel.yes li::before{
    content: "+";
    position: absolute; left: 0; top: 18px;
    font-family: var(--serif);
    font-size: 1.4rem; color: var(--acc-3);
    line-height: 1;
}
.filter__panel.no li{ color: rgba(239,234,224,.55); }
.filter__panel.no li::before{
    content: ""; position: absolute; left: 0; top: 28px;
    width: 16px; height: 1px; background: var(--muted);
}


/* =====================================================================
   18. Section: Final CTA
   ===================================================================== */
.cta{}
.cta__card{
    padding: clamp(56px, 8vw, 96px) clamp(40px, 6vw, 88px);
    border-radius: 32px;
    text-align: left;
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(80% 100% at 0% 100%, rgba(244,184,96,.12), transparent 60%),
      radial-gradient(80% 80% at 100% 0%, rgba(229,90,43,.15), transparent 60%),
      var(--glass-2);
}
.cta__card h2{
    font-size: clamp(2.6rem, 5.6vw, 5.6rem);
    max-width: 16ch;
    margin-bottom: 28px;
    text-wrap: balance;
}
.cta__card h2 em{
    background: linear-gradient(110deg, #F4B860, #E55A2B);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cta__card p.lede{
    font-size: 1.15rem;
    color: rgba(239,234,224,.78);
    max-width: 62ch;
    line-height: 1.55;
    margin-bottom: 48px;
}
.cta__ctas{ display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.cta__btn-primary{ padding: 22px 32px; font-size: 1.05rem; }
.cta__fine{
    margin-top: 32px;
    display: flex; flex-wrap: wrap; gap: 22px;
    font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted);
}
.cta__fine span{ display: inline-flex; align-items: center; gap: 10px; }
.cta__fine span::before{
    content:""; width: 5px; height: 5px; border-radius: 50%; background: var(--acc-3);
}
.cta__second{
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
    color: rgba(239,234,224,.6);
    font-size: 1rem;
}
.cta__second a{
    color: var(--warm); border-bottom: 1px solid var(--acc-3);
    padding-bottom: 2px;
    transition: color .2s ease;
}
.cta__second a:hover{ color: var(--acc-3); }


/* =====================================================================
   19. Footer
   ===================================================================== */
.foot{
    padding: 80px 0 32px;
    margin-top: 80px;
    border-top: 1px solid var(--line);
    position: relative;
    z-index: 2;
}
.foot__top{
    display: grid;
    grid-template-columns: 5fr 3fr 3fr 3fr;
    gap: 56px;
    padding-bottom: 56px;
}
.foot__brand{
    font-family: var(--serif); font-style: italic;
    font-size: 1.8rem;
    margin-bottom: 24px;
    display: inline-flex; align-items: baseline; gap: 8px;
}
.foot__brand .dot{
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--acc); transform: translateY(-4px);
    box-shadow: 0 0 10px var(--acc);
}
.foot p{
    color: rgba(239,234,224,.62);
    font-size: .94rem; line-height: 1.55; max-width: 36ch;
}
.foot .meta{
    margin-top: 18px;
    font-family: var(--mono); font-size: .72rem;
    color: var(--muted); letter-spacing: .04em;
    text-transform: uppercase;
}
.foot h5{
    font-family: var(--mono); font-size: .68rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--muted);
    margin: 0 0 20px;
}
.foot ul li{ margin-bottom: 12px; }
.foot ul a{
    color: rgba(239,234,224,.78);
    font-size: .94rem;
    transition: color .2s ease;
}
.foot ul a:hover{ color: var(--acc-3); }
.foot__bottom{
    padding-top: 32px;
    border-top: 1px solid var(--line);
    display: flex; justify-content: space-between; align-items: center;
    gap: 24px; flex-wrap: wrap;
    font-family: var(--mono); font-size: .72rem;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted);
}


/* =====================================================================
   20. Animations (reveal, word-mask, pulse)
   ===================================================================== */
.reveal{
    opacity: 0; transform: translateY(28px);
    transition: opacity 1s cubic-bezier(.2,.65,.2,1), transform 1s cubic-bezier(.2,.65,.2,1);
}
.reveal.in{ opacity: 1; transform: none; }
.reveal[data-d="1"]{ transition-delay: .08s; }
.reveal[data-d="2"]{ transition-delay: .16s; }
.reveal[data-d="3"]{ transition-delay: .24s; }
.reveal[data-d="4"]{ transition-delay: .32s; }
.reveal[data-d="5"]{ transition-delay: .4s; }

.word-mask{
    display: inline-block; overflow: hidden; vertical-align: bottom;
}
.word-mask > span{
    display: inline-block;
    transform: translateY(110%);
    transition: transform 1s cubic-bezier(.2,.65,.2,1);
}
.reveal.in .word-mask > span{ transform: none; }

@keyframes pulse{
    0%,100%{ box-shadow: 0 0 10px #5BE49B; transform: scale(1); }
    50%{ box-shadow: 0 0 22px #5BE49B; transform: scale(1.15); }
}


/* =====================================================================
   21. Responsive
   ===================================================================== */
@media (max-width: 1080px){
    .services__grid{ grid-template-columns: repeat(2, 1fr); }
    .svc{ grid-column: span 1; }
    .svc--flag{ grid-column: span 2; }
    .agency__stats{ grid-template-columns: 1fr; }
    .problem__grid{ grid-template-columns: 1fr; }
    .method__grid{ grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
    .step{ border-right: 0; border-bottom: 1px dashed rgba(10,10,14,.14); padding: 28px 0; }
    .step:nth-child(2n){ border-right: 0; }
    .step:last-child{ border-bottom: 0; }
}
@media (max-width: 820px){
    .nav__links{ display: none; }
    .nav__cta{ display: none; }
    .burger{ display: inline-flex; }
    .nav{ padding: 6px 6px 6px 18px; }
    .brand{ font-size: 1.1rem; padding-right: 12px; }
    .hero{ padding-top: 96px; min-height: auto; padding-bottom: 48px; }
    .hero__strip{ grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 20px; margin-top: 36px; }
    .hero__strip .cell{ padding: 12px; border-right: 0; border-bottom: 1px solid var(--line); }
    .hero__strip .cell:nth-child(2n){ border-right: 0; }
    .hero__strip .cell:nth-last-child(-n+2){ border-bottom: 0; }
    .sec-head{ grid-template-columns: 1fr; gap: 32px; }
    .diag__card{ grid-template-columns: 1fr; gap: 40px; }
    .services__grid{ grid-template-columns: 1fr; gap: 14px; }
    .svc, .svc--flag{ grid-column: span 1; }
    .agency__head{ grid-template-columns: 1fr; gap: 32px; }
    .agency__body{ grid-template-columns: 1fr; gap: 48px; }
    .filter__grid{ grid-template-columns: 1fr; gap: 16px; }
    .filter__panel{ min-height: auto; padding: 32px; }
    .foot__top{ grid-template-columns: 1fr 1fr; gap: 40px; }
    .foot__top > *:first-child{ grid-column: 1 / -1; }
    .method__grid{ grid-template-columns: 1fr; }
    .hero h1 .it{ display: inline; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce){
    *{ transition: none !important; animation: none !important; }
    .reveal{ opacity: 1; transform: none; }
    .word-mask > span{ transform: none; }
}


/* =====================================================================
   22. Components shared by the service pages
   =====================================================================
   Defined here are the components used by the secondary pages
   (audit, automation, ecosystem, program, about, etc.)
   that are not specific to the home.
*/

/* ─── Section numbering (clean alias of .dsi-no) ─── */
.section-no{
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--acc-3);
    display: inline-block;
    margin-bottom: 24px;
}

/* ─── Generic 3-column grid (3 cards side by side) ─── */
.three-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 980px){ .three-grid{ grid-template-columns: 1fr; } }

/* ─── 4-column grid (automation examples, etc.) ─── */
.four-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
@media (max-width: 1080px){ .four-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){  .four-grid{ grid-template-columns: 1fr; } }

/* ─── Pricing card (pricing tile) ─── */
.pricing-tile{
    padding: 36px 32px;
    min-height: 280px;
    display: flex; flex-direction: column;
    gap: 18px;
    transition: transform .35s cubic-bezier(.2,.65,.2,1);
}
.pricing-tile:hover{ transform: translateY(-4px); }
.pricing-tile__name{
    font-family: var(--mono);
    font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--acc-3);
}
.pricing-tile__title{
    font-family: var(--serif);
    font-size: 1.85rem;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--warm);
    margin: 0;
}
.pricing-tile__desc{
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(239,234,224,.72);
    margin: 0;
    flex: 1;
}
.pricing-tile__price{
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-family: var(--serif);
    font-size: clamp(2rem, 3vw, 2.6rem);
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--warm);
}
.pricing-tile__price small{
    display: block;
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 8px;
}
.pricing-tile--highlight{
    background:
      linear-gradient(135deg, rgba(229,90,43,.16) 0%, rgba(244,184,96,.08) 100%);
    border-color: rgba(229,90,43,.28);
}

/* ─── Product card (3 deliverables, 3 signals, 3 profiles...) ─── */
.feature-card{
    padding: 36px 32px;
    display: flex; flex-direction: column;
    gap: 14px;
    min-height: 220px;
    transition: transform .35s cubic-bezier(.2,.65,.2,1);
}
.feature-card:hover{ transform: translateY(-3px); }
.feature-card__tag{
    font-family: var(--mono);
    font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--acc-3);
}
.feature-card__title{
    font-family: var(--serif);
    font-size: 1.55rem;
    line-height: 1.15;
    letter-spacing: -0.018em;
    color: var(--warm);
    margin: 0;
}
.feature-card__body{
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(239,234,224,.72);
}

/* ─── Styled bullet list (yes/no variants, like filter__panel) ─── */
.bullet-list{
    border-top: 1px solid var(--line);
}
.bullet-list li{
    padding: 18px 0 18px 32px;
    border-bottom: 1px solid var(--line);
    font-size: 1.02rem;
    color: rgba(239,234,224,.88);
    line-height: 1.5;
    position: relative;
}
.bullet-list--yes li::before{
    content:"+";
    position: absolute; left: 0; top: 16px;
    font-family: var(--serif);
    font-size: 1.4rem;
    color: var(--acc-3);
    line-height: 1;
}
.bullet-list--no li{ color: rgba(239,234,224,.55); }
.bullet-list--no li::before{
    content:""; position: absolute; left: 0; top: 26px;
    width: 16px; height: 1px; background: var(--muted);
}
.bullet-list--plain li{ padding-left: 0; }
.bullet-list--plain li::before{ content: none; }

/* ─── Centered text block (editorial paragraphs) ─── */
.prose{
    max-width: 720px;
    margin: 0 auto;
    font-size: 1.125rem;
    line-height: 1.75;
    color: rgba(239,234,224,.85);
}
.prose p{ margin: 0 0 1.3em; }
.prose p:last-child{ margin-bottom: 0; }
.prose blockquote{
    margin: 32px 0;
    padding: 24px 28px;
    border-left: 2px solid var(--acc);
    background: var(--glass);
    border-radius: 0 14px 14px 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.55;
    color: rgba(239,234,224,.92);
}
.prose blockquote p:last-child{ margin-bottom: 0; }
.prose strong{
    color: var(--warm);
    font-weight: 500;
}

/* ─── Contact form ─── */
.contact-form{
    max-width: 720px;
    display: flex; flex-direction: column;
    gap: 22px;
}
.contact-form__row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}
@media (max-width: 720px){ .contact-form__row{ grid-template-columns: 1fr; } }
.contact-form__field label{
    display: block;
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}
.contact-form__field label .req{ color: var(--acc-3); margin-left: 4px; }
.contact-form input,
.contact-form select,
.contact-form textarea{
    width: 100%;
    padding: 16px 18px;
    background: var(--glass);
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    color: var(--warm);
    font: inherit;
    font-size: 1rem;
    transition: border-color .2s ease, background .2s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{ color: var(--muted); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
    outline: none;
    border-color: var(--acc);
    background: rgba(255,253,247,.06);
}
.contact-form textarea{ min-height: 200px; resize: vertical; }

/* <option> dropdown list: force the dark background + light text
   (otherwise the native OS rendering gives white on white in most browsers) */
.contact-form select option,
.contact-form select optgroup{
    background-color: #15151B;
    color: var(--warm);
}
.contact-form select option:disabled{ color: var(--muted); }
.contact-form__check{
    display: flex; align-items: flex-start; gap: 14px;
    font-size: .95rem;
    line-height: 1.5;
    color: rgba(239,234,224,.78);
}
.contact-form__check input{
    width: 18px; height: 18px;
    flex-shrink: 0;
    margin-top: 3px;
    accent-color: var(--acc);
}
.contact-form__notice{
    padding: 18px 22px;
    border-radius: 14px;
    background: rgba(91,228,155,.08);
    border: 1px solid rgba(91,228,155,.28);
    color: #B7EBC9;
    font-size: .98rem;
    line-height: 1.55;
}
.contact-form__notice.is-error{
    background: rgba(198,52,47,.1);
    border-color: rgba(229,90,43,.4);
    color: #F4B860;
}

/* ─── Legal page / long-form text ─── */
.legal-page{
    max-width: 820px;
    margin: 0 auto;
    color: rgba(239,234,224,.82);
    font-size: 1.05rem;
    line-height: 1.75;
}
.legal-page h2{
    font-family: var(--serif);
    font-size: 1.8rem;
    letter-spacing: -0.018em;
    margin: 48px 0 18px;
    color: var(--warm);
}
.legal-page h2:first-child{ margin-top: 0; }
.legal-page p{ margin: 0 0 1.2em; }
.legal-page a{
    color: var(--warm);
    border-bottom: 1px solid var(--acc-3);
    transition: color .2s ease;
}
.legal-page a:hover{ color: var(--acc-3); }