/* Vytalio — hand-written stylesheet (replaces the Tailwind build).
 * Design tokens + a curated subset of exactly the utilities the markup uses.
 * Class names keep the Tailwind shape (so the ported markup is verbatim);
 * special chars (/ : [ ]) are CSS-escaped. Zero external resources. */

/* ---------- tokens ---------- */
:root {
  --primary:#000666; --primary-container:#1a237e;
  --secondary:#75584d; --tertiary:#191b1c;
  --surface:#fbf9f4; --background:#fbf9f4;
  --surface-container:#f0eee9; --surface-container-low:#f5f3ee;
  --surface-container-high:#eae8e3; --surface-container-highest:#e4e2dd;
  --surface-container-lowest:#ffffff; --surface-dim:#dbdad5;
  --on-primary:#ffffff; --on-surface:#1b1c19; --on-surface-variant:#454652;
  --serif:"Source Serif 4",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
}

/* ---------- fonts ---------- */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 700;font-display:swap;src:url("/fonts/source-serif-4-latin.woff2") format("woff2");}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400 700;font-display:swap;src:url("/fonts/source-serif-4-latin-italic.woff2") format("woff2");}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/hanken-grotesk-latin.woff2") format("woff2");}
@font-face{font-family:"Sora";font-style:normal;font-weight:100 800;font-display:swap;src:url("/fonts/sora-latin.woff2") format("woff2");}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:var(--sans);color:var(--on-surface);line-height:1.6;-webkit-font-smoothing:antialiased;}
img,video,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
h1,h2,h3,h4{font-weight:inherit;}
.scroll-smooth{scroll-behavior:smooth;}

/* ---------- typography ---------- */
.font-display-lg,.font-headline-lg,.font-headline-md{font-family:var(--serif);}
.font-body-lg,.font-body-md,.font-label-sm{font-family:var(--sans);}
.text-display-lg{font-size:clamp(2rem,7vw,64px);line-height:1.1;font-weight:600;}
.text-headline-lg{font-size:clamp(1.6rem,4.5vw,32px);line-height:1.3;font-weight:500;}
.text-headline-md{font-size:24px;line-height:1.4;font-weight:500;}
.text-body-lg{font-size:20px;line-height:1.6;font-weight:400;}
.text-body-md{font-size:18px;line-height:1.6;font-weight:400;}
.text-label-sm{font-size:15px;line-height:1;font-weight:600;letter-spacing:.1em;}
.text-sm{font-size:14px;line-height:1.4;}
.text-base{font-size:16px;line-height:1.5;}
.text-lg{font-size:18px;line-height:1.6;}
.text-xl{font-size:20px;line-height:1.4;}
.text-2xl{font-size:24px;line-height:1.2;}
.text-3xl{font-size:30px;line-height:1.2;}
.text-4xl{font-size:36px;line-height:1.1;}
.text-6xl{font-size:60px;line-height:1;}
.font-bold{font-weight:700;} .font-semibold{font-weight:600;}
.italic{font-style:italic;}
.uppercase{text-transform:uppercase;}
.leading-none{line-height:1;} .leading-tight{line-height:1.15;} .leading-relaxed{line-height:1.7;}
.tracking-tight{letter-spacing:-.02em;} .tracking-widest{letter-spacing:.1em;}
.tracking-\[0\.2em\]{letter-spacing:.2em;} .tracking-\[0\.3em\]{letter-spacing:.3em;}

/* Wordmark — Sora (geometric, enterprise-grade), self-hosted variable woff2. */
.wordmark{font-family:"Sora",var(--sans);font-weight:700;letter-spacing:-.02em;}
/* Official logo mark (teal monogram). */
.logo-mark{height:2.25rem;width:2.25rem;flex-shrink:0;display:block;}
.logo-mark-sm{height:2rem;width:2rem;flex-shrink:0;display:block;}

/* ---------- colors ---------- */
.text-primary{color:var(--primary);} .text-secondary{color:var(--secondary);}
.text-on-primary{color:var(--on-primary);} .text-on-surface-variant{color:var(--on-surface-variant);}
.text-white{color:#fff;} .text-on-primary\/60{color:rgba(255,255,255,.6);}
.bg-primary{background-color:var(--primary);} .bg-secondary{background-color:var(--secondary);}
.bg-surface{background-color:var(--surface);} .bg-background{background-color:var(--background);}
.bg-surface-container{background-color:var(--surface-container);}
.bg-surface-container-lowest{background-color:var(--surface-container-lowest);}
.bg-surface-dim{background-color:var(--surface-dim);}
.bg-primary\/20{background-color:rgba(0,6,102,.2);} .bg-primary\/25{background-color:rgba(0,6,102,.25);}
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--surface),rgba(251,249,244,.8) 50%,rgba(251,249,244,.25));}
.bg-background\/90{background-color:rgba(251,249,244,.9);}
.transition-colors{transition:color .25s,background-color .25s,border-color .25s;}
.hover\:text-primary:hover{color:var(--primary);}
.hover\:bg-primary-container:hover{background-color:var(--primary-container);}
.group:hover .group-hover\:text-primary{color:var(--primary);}

/* ---------- layout: container / spacing ---------- */
.max-w-7xl,.max-w-container-max{max-width:1280px;}
.max-w-3xl{max-width:48rem;} .max-w-2xl{max-width:42rem;} .max-w-xl{max-width:36rem;} .max-w-xs{max-width:20rem;}
.mx-auto{margin-left:auto;margin-right:auto;}
.px-margin-desktop{padding-left:64px;padding-right:64px;}
.px-6{padding-left:1.5rem;padding-right:1.5rem;}
.py-24{padding-top:6rem;padding-bottom:6rem;} .py-32{padding-top:8rem;padding-bottom:8rem;}
.py-12{padding-top:3rem;padding-bottom:3rem;}
.p-10{padding:2.5rem;} .p-12{padding:3rem;}
.px-5{padding-left:1.25rem;padding-right:1.25rem;} .py-2\.5{padding-top:.625rem;padding-bottom:.625rem;}
.px-6{padding-left:1.5rem;padding-right:1.5rem;} .py-3{padding-top:.75rem;padding-bottom:.75rem;}
.px-10{padding-left:2.5rem;padding-right:2.5rem;} .py-5{padding-top:1.25rem;padding-bottom:1.25rem;}
.pt-4{padding-top:1rem;} .pt-8{padding-top:2rem;} .pl-6{padding-left:1.5rem;}
.mb-24{margin-bottom:6rem;}

/* ---------- flex / grid ---------- */
.flex{display:flex;} .inline-flex{display:inline-flex;} .grid{display:grid;}
.block{display:block;} .inline-block{display:inline-block;} .contents{display:contents;} .hidden{display:none;}
.flex-col{flex-direction:column;}
.items-center{align-items:center;} .items-start{align-items:flex-start;}
.justify-between{justify-content:space-between;}
.flex-wrap{flex-wrap:wrap;}
.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr));}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}
.col-span-12{grid-column:span 12/span 12;} .col-span-5{grid-column:span 5/span 5;}
.gap-gutter{gap:32px;} .gap-2{gap:.5rem;} .gap-3{gap:.75rem;} .gap-4{gap:1rem;}
.gap-6{gap:1.5rem;} .gap-8{gap:2rem;} .gap-10{gap:2.5rem;}
.space-y-4>*+*{margin-top:1rem;} .space-y-6>*+*{margin-top:1.5rem;}
.space-y-8>*+*{margin-top:2rem;} .space-y-12>*+*{margin-top:3rem;}

/* ---------- sizing ---------- */
.w-full{width:100%;} .w-6{width:1.5rem;} .w-7{width:1.75rem;} .w-24{width:6rem;} .w-\[1px\]{width:1px;} .w-1\/3{width:33.333%;}
.h-full{height:100%;} .h-6{height:1.5rem;} .h-7{height:1.75rem;} .h-1{height:.25rem;} .h-20{height:5rem;} .h-\[1px\]{height:1px;} .h-\[500px\]{height:500px;}
.min-h-\[88vh\]{min-height:88vh;} .min-h-\[70vh\]{min-height:70vh;} .min-h-\[600px\]{min-height:600px;} .min-h-\[400px\]{min-height:400px;}
.shrink-0{flex-shrink:0;}

/* ---------- position ---------- */
.relative{position:relative;} .absolute{position:absolute;} .fixed{position:fixed;}
.inset-0{inset:0;} .top-0{top:0;} .bottom-4{bottom:1rem;} .-right-8{right:-2rem;} .right-0{right:0;} .left-0{left:0;}
.left-1\/4{left:25%;} .left-2\/4{left:50%;} .left-3\/4{left:75%;} .top-1\/3{top:33.333%;} .top-2\/3{top:66.667%;}
.z-0{z-index:0;} .z-10{z-index:10;} .z-50{z-index:50;}
.overflow-hidden{overflow:hidden;} .overflow-x-hidden{overflow-x:hidden;}
.object-cover{object-fit:cover;} .pointer-events-none{pointer-events:none;} .cursor-pointer{cursor:pointer;}

/* ---------- borders / radius ---------- */
.border{border:1px solid;} .border-b{border-bottom:1px solid;} .border-t{border-top:1px solid;}
.border-y{border-top:1px solid;border-bottom:1px solid;} .border-l-2{border-left:2px solid;}
.border-tertiary{border-color:var(--tertiary);}
.border-tertiary\/10{border-color:rgba(25,27,28,.1);} .border-tertiary\/5{border-color:rgba(25,27,28,.05);}
.border-secondary\/20{border-color:rgba(117,88,77,.2);}
.border-white\/20{border-color:rgba(255,255,255,.2);}
.hover\:border-primary:hover{border-color:var(--primary);}
.hover\:border-primary\/20:hover{border-color:rgba(0,6,102,.2);}
.rounded{border-radius:.25rem;} .rounded-none{border-radius:0;}

/* ---------- effects ---------- */
.backdrop-blur-md{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}
.opacity-0{opacity:0;} .opacity-10{opacity:.1;} .opacity-30{opacity:.3;} .opacity-40{opacity:.4;}
.opacity-\[0\.03\]{opacity:.03;}
.mix-blend-screen{mix-blend-mode:screen;}
.transition-all{transition:all .3s;} .transition-transform{transition:transform .3s;} .transition-opacity{transition:opacity .3s;}
.duration-500{transition-duration:.5s;} .duration-1000{transition-duration:1s;}
.group:hover .group-hover\:translate-x-1{transform:translateX(.25rem);}
.group:hover .group-hover\:scale-105{transform:scale(1.05);}
.group:hover .group-hover\:opacity-100{opacity:1;}

/* colored-shadow system (Tailwind shadow + shadow-<color>/<a>) via custom prop */
.shadow-xl{--sh:0 20px 25px -5px var(--shc,rgba(0,0,0,.1)),0 8px 10px -6px var(--shc,rgba(0,0,0,.1));box-shadow:var(--sh);}
.shadow-2xl{--sh:0 25px 50px -12px var(--shc,rgba(0,0,0,.25));box-shadow:var(--sh);}
.shadow-primary\/5{--shc:rgba(0,6,102,.05);}
.hover\:shadow-primary\/5:hover{--shc:rgba(0,6,102,.05);}
.hover\:shadow-primary\/20:hover{--shc:rgba(0,6,102,.2);}
.hover\:shadow-2xl:hover{--sh:0 25px 50px -12px var(--shc,rgba(0,0,0,.25));box-shadow:var(--sh);}

/* ---------- inline-SVG icons (replaces Material Symbols font) ---------- */
.ms-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1;}
.ms-icon .ms-svg{width:1em;height:1em;}

/* ---------- responsive ---------- */
@media(min-width:640px){
  .sm\:inline-block{display:inline-block;}
}
@media(min-width:768px){
  .md\:flex{display:flex;} .md\:flex-row{flex-direction:row;}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .md\:justify-end{justify-content:flex-end;}
  .md\:mt-1{margin-top:.25rem;}
}
@media(min-width:1024px){
  .lg\:block{display:block;} .lg\:flex-row{flex-direction:row;}
  .lg\:col-span-7{grid-column:span 7/span 7;}
  .lg\:w-1\/2{width:50%;} .lg\:pl-16{padding-left:4rem;} .lg\:px-16{padding-left:4rem;padding-right:4rem;}
}

/* responsive type bumps (mobile-first base above = mobile sizes) */
@media(min-width:768px){
  .text-display-lg{font-size:64px;}
  .md\:text-display-lg{font-size:64px;line-height:1.1;font-weight:600;}
  .md\:text-headline-lg{font-size:32px;line-height:1.3;font-weight:500;}
}

/* ========================================================================
 * SERVICE-PAGE EXTENSION — additional tokens + utilities used by the 4
 * service pages. Same conventions (escaped Tailwind-shaped class names).
 * ===================================================================== */
:root{
  --on-primary-container:#8690ee; --primary-fixed:#e0e0ff; --on-primary-fixed:#000767;
  --secondary-container:#fed7ca; --on-secondary:#ffffff; --on-secondary-container:#795c51;
  --secondary-fixed:#fed7ca; --outline:#767683; --outline-variant:#c6c5d4; --tertiary-fixed:#e2e2e2;
}

/* mobile heading variants */
.text-display-lg-mobile{font-size:40px;line-height:1.1;font-weight:600;font-family:var(--serif);}
.text-headline-lg-mobile{font-size:26px;line-height:1.3;font-weight:500;font-family:var(--serif);}
.text-xs{font-size:12px;line-height:1.3;}
.font-light{font-weight:300;} .font-normal{font-weight:400;}
.tracking-wide{letter-spacing:.04em;} .tracking-wider{letter-spacing:.06em;} .tracking-tighter{letter-spacing:-.04em;}

/* colors */
.text-on-surface{color:var(--on-surface);}
.text-on-primary-container{color:var(--on-primary-container);}
.text-primary-fixed{color:var(--primary-fixed);} .text-primary-fixed\/70{color:rgba(224,224,255,.7);}
.text-secondary-fixed{color:var(--secondary-fixed);} .text-on-secondary{color:var(--on-secondary);}
.text-outline{color:var(--outline);}
.text-secondary\/40{color:rgba(117,88,77,.4);} .text-secondary\/60{color:rgba(117,88,77,.6);}
.bg-on-primary{background-color:var(--on-primary);}
.bg-secondary{background-color:var(--secondary);} .bg-secondary-fixed{background-color:var(--secondary-fixed);}
.bg-secondary-container{background-color:var(--secondary-container);}
.bg-primary-fixed{background-color:var(--primary-fixed);} .bg-outline{background-color:var(--outline);}
.bg-surface-container-high{background-color:var(--surface-container-high);}
.bg-surface-container-low{background-color:var(--surface-container-low);}
.bg-primary\/5{background-color:rgba(0,6,102,.05);} .bg-surface\/40{background-color:rgba(251,249,244,.4);}
.bg-gradient-to-t{background-image:linear-gradient(to top,rgba(0,6,102,.4),transparent);}
.hover\:bg-secondary-fixed:hover{background-color:var(--secondary-fixed);}
.hover\:bg-secondary-container:hover{background-color:var(--secondary-container);}
.hover\:bg-primary-fixed:hover{background-color:var(--primary-fixed);}
.hover\:bg-surface-container-low:hover{background-color:var(--surface-container-low);}
.hover\:bg-on-primary\/10:hover{background-color:rgba(255,255,255,.1);}
.hover\:bg-background:hover{background-color:var(--background);}
.hover\:bg-surface-container-lowest:hover{background-color:var(--surface-container-lowest);}
.hover\:text-on-secondary-container:hover{color:var(--on-secondary-container);}
.hover\:text-on-primary:hover{color:var(--on-primary);}
.hover\:text-primary:hover{color:var(--primary);}

/* borders */
.border-l{border-left:1px solid;} .border-r{border-right:1px solid;}
.border-4{border-width:4px;border-style:solid;}
.border-primary{border-color:var(--primary);} .border-secondary{border-color:var(--secondary);}
.border-background{border-color:var(--background);} .border-primary-fixed{border-color:var(--primary-fixed);}
.border-outline-variant{border-color:var(--outline-variant);}
.border-secondary\/30{border-color:rgba(117,88,77,.3);}
.border-primary\/10{border-color:rgba(0,6,102,.1);} .border-primary\/30{border-color:rgba(0,6,102,.3);}
.hover\:border-primary\/30:hover{border-color:rgba(0,6,102,.3);}
.border-tertiary\/20{border-color:rgba(25,27,28,.2);} .border-tertiary\/30{border-color:rgba(25,27,28,.3);}
.border-on-primary\/30{border-color:rgba(255,255,255,.3);} .border-on-primary\/40{border-color:rgba(255,255,255,.4);}

/* spacing — margins */
.mb-1{margin-bottom:.25rem;} .mb-2{margin-bottom:.5rem;} .mb-4{margin-bottom:1rem;}
.mb-6{margin-bottom:1.5rem;} .mb-8{margin-bottom:2rem;} .mb-10{margin-bottom:2.5rem;}
.mb-12{margin-bottom:3rem;} .mb-16{margin-bottom:4rem;} .mb-20{margin-bottom:5rem;}
.mx-8{margin-left:2rem;margin-right:2rem;}
/* spacing — padding */
.pt-24{padding-top:6rem;} .pt-32{padding-top:8rem;} .pb-20{padding-bottom:5rem;} .pb-2{padding-bottom:.5rem;}
.p-1{padding:.25rem;} .p-2{padding:.5rem;} .p-6{padding:1.5rem;} .p-8{padding:2rem;}
.px-4{padding-left:1rem;padding-right:1rem;} .px-8{padding-left:2rem;padding-right:2rem;}
.py-1{padding-top:.25rem;padding-bottom:.25rem;} .py-2{padding-top:.5rem;padding-bottom:.5rem;}
.py-4{padding-top:1rem;padding-bottom:1rem;} .py-20{padding-top:5rem;padding-bottom:5rem;}
.pl-12{padding-left:3rem;}
/* gaps + stacks */
.gap-12{gap:3rem;} .gap-16{gap:4rem;} .gap-20{gap:5rem;}
.space-y-3>*+*{margin-top:.75rem;} .space-y-24>*+*{margin-top:6rem;}

/* sizing */
.w-12{width:3rem;} .w-32{width:8rem;} .w-48{width:12rem;} .w-64{width:16rem;}
.w-1\.5{width:.375rem;} .w-\[1px\]{width:1px;}
.h-px{height:1px;} .h-1\.5{height:.375rem;} .h-32{height:8rem;} .h-64{height:16rem;} .h-80{height:20rem;}
.min-h-\[819px\]{min-height:819px;} .min-h-\[716px\]{min-height:716px;}
.min-h-\[500px\]{min-height:500px;} .min-h-\[100px\]{min-height:100px;}
.max-w-md{max-width:28rem;} .max-w-4xl{max-width:56rem;}
.flex-1{flex:1 1 0%;} .flex-grow{flex-grow:1;}
.aspect-square{aspect-ratio:1/1;} .aspect-video{aspect-ratio:16/9;}
.aspect-\[4\/5\]{aspect-ratio:4/5;} .aspect-\[4\/3\]{aspect-ratio:4/3;}

/* position */
.bottom-0{bottom:0;} .bottom-8{bottom:2rem;} .left-8{left:2rem;}
.-bottom-4{bottom:-1rem;} .-right-4{right:-1rem;} .-bottom-8{bottom:-2rem;} .-left-8{left:-2rem;}
.-top-10{top:-2.5rem;} .-left-10{left:-2.5rem;} .-bottom-10{bottom:-2.5rem;} .-right-10{right:-2.5rem;}
.-left-3{left:-.75rem;} .-z-10{z-index:-10;}

/* effects */
.shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,.05);}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);}
.hover\:shadow-xl:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);}
.opacity-5{opacity:.05;} .opacity-20{opacity:.2;} .opacity-80{opacity:.8;} .opacity-90{opacity:.9;}
.grayscale{filter:grayscale(1);} .contrast-125{filter:contrast(1.25);}
.grayscale.contrast-125{filter:grayscale(1) contrast(1.25);}
.mix-blend-overlay{mix-blend-mode:overlay;} .mix-blend-multiply{mix-blend-mode:multiply;}
.backdrop-blur-sm{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.object-contain{object-fit:contain;}
.duration-700{transition-duration:.7s;}
.rotate-3{transform:rotate(3deg);} .-rotate-2{transform:rotate(-2deg);}
.translate-x-4{transform:translateX(1rem);} .translate-y-4{transform:translateY(1rem);}
.rotate-3.translate-x-4.translate-y-4{transform:rotate(3deg) translate(1rem,1rem);}
.hover\:opacity-100:hover{opacity:1;}
.hover\:scale-105:hover{transform:scale(1.05);}
.hover\:-translate-y-1:hover{transform:translateY(-.25rem);}
.active\:scale-95:active{transform:scale(.95);}
.group:hover .group-hover\:scale-110{transform:scale(1.1);}
.group:hover .group-hover\:rotate-12{transform:rotate(12deg);}
.group:hover .group-hover\:opacity-10{opacity:.1;}
.group:hover .group-hover\:gap-4{gap:1rem;}

/* responsive */
@media(min-width:640px){
  .sm\:flex-row{flex-direction:row;} .sm\:w-auto{width:auto;}
}
@media(min-width:768px){
  .md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr));}
  .md\:col-span-1{grid-column:span 1/span 1;} .md\:col-span-2{grid-column:span 2/span 2;}
  .md\:col-span-4{grid-column:span 4/span 4;} .md\:col-span-5{grid-column:span 5/span 5;}
  .md\:col-span-7{grid-column:span 7/span 7;} .md\:col-span-8{grid-column:span 8/span 8;}
  .md\:items-end{align-items:flex-end;} .md\:w-1\/2{width:50%;} .md\:w-48{width:12rem;}
  .md\:order-first{order:-9999;} .md\:border-r{border-right:1px solid;} .md\:border-b-0{border-bottom-width:0;}
}
.order-last{order:9999;}

/* gap-fixups surfaced by the used-vs-defined audit */
.text-center{text-align:center;}
.justify-center{justify-content:center;}
.items-end{align-items:flex-end;}
.pb-1{padding-bottom:.25rem;}
.gap-0{gap:0;}
.space-y-2>*+*{margin-top:.5rem;}
.bg-tertiary\/10{background-color:rgba(25,27,28,.1);}
.bg-tertiary\/20{background-color:rgba(25,27,28,.2);}
.border-primary\/20{border-color:rgba(0,6,102,.2);}
@media(min-width:768px){ .md\:block{display:block;} }

/* ============================ MOBILE RESPONSIVENESS ============================ */
/* display helpers for the mobile nav */
@media(min-width:768px){ .md\:hidden{display:none;} .md\:inline-block{display:inline-block;} }

/* zero-JS mobile nav (native <details> disclosure) */
.nav-mobile{position:relative;}
.nav-burger{list-style:none;cursor:pointer;display:inline-flex;align-items:center;color:var(--primary);-webkit-tap-highlight-color:transparent;padding:.5rem;margin:-.5rem;}
.nav-burger::-webkit-details-marker{display:none;}
.nav-panel{position:absolute;top:calc(100% + .65rem);right:0;z-index:60;display:flex;flex-direction:column;gap:.1rem;background:var(--surface);border:1px solid rgba(25,27,28,.12);box-shadow:0 16px 34px rgba(0,0,0,.13);padding:.75rem;min-width:15rem;}
.nav-panel{min-width:min(18rem,calc(100vw - 2rem));}
.nav-panel a{display:flex;align-items:center;min-height:44px;padding:.55rem .8rem;font-family:var(--sans);font-size:1rem;color:var(--on-surface-variant);}
.nav-panel a:hover{color:var(--primary);}
.nav-panel .nav-cta{margin-top:.45rem;background:var(--primary);color:var(--on-primary);text-align:center;font-weight:600;border-radius:.25rem;}
.nav-panel .nav-cta:hover{background:var(--primary-container);color:var(--on-primary);}

/* layout fixups for phones (<768px) */
@media(max-width:767px){
  .px-margin-desktop{padding-left:1.5rem;padding-right:1.5rem;}      /* was 64px -> too tight on phones */
  .min-h-\[88vh\],.min-h-\[819px\],.min-h-\[716px\]{min-height:0;}   /* don't force tall heroes */
  .py-32{padding-top:4.5rem;padding-bottom:4.5rem;}
  .mb-24{margin-bottom:3rem;} .mb-20{margin-bottom:2.5rem;} .mb-16{margin-bottom:2rem;}
  .gap-gutter{gap:1.5rem;} .gap-20{gap:2.5rem;} .gap-16{gap:2rem;} .gap-12{gap:1.75rem;}
  .p-12{padding:1.6rem;} .p-10{padding:1.6rem;}
  .text-6xl{font-size:44px;}
  .tracking-\[0\.3em\]{letter-spacing:.18em;}                        /* avoid overflow of wide-tracked labels */
  .h-20{height:4rem;}                                                /* shorter nav (80->64px) on phones */
  .hero-video{display:none;}                                         /* poster-only on mobile: save data/battery */
  footer nav a{padding-top:.45rem;padding-bottom:.45rem;}            /* bigger tap targets for footer links */
}

/* ---------- a11y + overflow safety ---------- */
html{overflow-x:hidden;}                                             /* belt-and-suspenders: no horizontal scroll */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:2px;}
.skip-link{position:absolute;left:.75rem;top:-3rem;z-index:100;background:var(--primary);color:var(--on-primary);padding:.6rem 1rem;font-family:var(--sans);font-weight:600;border-radius:.25rem;transition:top .15s;}
.skip-link:focus{top:.75rem;}

/* proof boxes: static (in flow, below image) on mobile, absolute overlay on desktop */
.proof-mobile{position:static;margin-top:1rem;}
@media(min-width:768px){ .proof-mobile{position:absolute;margin-top:0;} }