/* AVENDOX site styles: fonts, tokens, header, the cinematic homepage and its information part, and what every
   page shares (plain-language switch, page transitions, skeleton screen). Page types add faq.css, simple.css,
   navband.css, film.css; Avi adds avi.css. */
@font-face{font-family:"Montserrat";font-weight:300;font-style:normal;font-display:swap;src:url(fonts/montserrat-300.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/montserrat-400.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/montserrat-500.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/montserrat-600.woff2) format("woff2")}
@font-face{font-family:"Lora";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/lora-400.woff2) format("woff2")}
@font-face{font-family:"Lora";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/lora-400-italic.woff2) format("woff2")}

:root{
  color-scheme:dark;
  --navy-950:#050D19; --navy:#0A1A2F; --navy-700:#1B3558;
  --champ:#D8B680; --champ-hi:#EBD4A0; --ivory:#F7F4ED; --slate:#93A6C1; --bronze:#7A5A24; --ink-soft:#4A5A70;
  --ink:var(--ivory); --muted:var(--slate); --accent:var(--champ); --line:rgba(216,182,128,.28); --focus:var(--champ-hi);
  --glass:rgba(5,13,25,.52);
  --f-sans:"Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-serif:"Lora", Georgia, "Times New Roman", serif;
  --gutter:clamp(16px, 4.5vw, 64px);
  --ease-out:cubic-bezier(.22,.8,.24,1);
  --dur-fast:160ms; --dur:280ms;
  --t-xs:12px; --t-sm:14px; --t-base:16px; --t-lg:18px; --t-xl:clamp(18px,1.4vw,21px);
  --t-h2:clamp(2rem, 4.2vw, 3.7rem); --t-h1:clamp(2.7rem, 7.2vw, 6.4rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html.reduced{scroll-behavior:auto}
body{margin:0; background:var(--navy-950); color:var(--ink); font-family:var(--f-sans); font-size:var(--t-base); line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:inherit}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:4px}
.skip{position:fixed; left:var(--gutter); top:calc(env(safe-area-inset-top,0px) + 12px); z-index:40; background:var(--champ); color:var(--navy); padding:10px 16px; border-radius:6px; font-weight:600; transform:translateY(-160%); transition:transform var(--dur) var(--ease-out); text-decoration:none}
.skip:focus{transform:none}
.ico{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round}

/* The fixed film stage: poster, scrubbed video, colour grade and particle canvas */
.stage{position:fixed; inset:0; z-index:0; pointer-events:none; background:var(--navy-950); overflow:hidden}
.stage .poster, .stage video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:var(--film,0)}
.stage .poster{opacity:max(.001, var(--film,0))} /* painted from the start, so its first appearance costs nothing */
/* Not 0: a fully transparent video may never be composited, so no frame is ever presented. 0.001 is invisible. */
.stage video{opacity:.001}
.stage.has-frame video{opacity:max(.001, var(--film,0))}
.stage.has-frame .poster{visibility:hidden}
/* The next quality tier decodes underneath, composited but invisible, until it shows the same frame. */
.stage video.standby, .stage.has-frame video.standby{opacity:.001}
.stage .grade{position:absolute; inset:0; background:linear-gradient(90deg, rgba(5,13,25,.55) 0%, rgba(5,13,25,.18) 42%, rgba(5,13,25,0) 70%), linear-gradient(0deg, rgba(5,13,25,.5) 0%, rgba(5,13,25,0) 32%); opacity:var(--film,0)}
.stage canvas{position:absolute; inset:0; width:100%; height:100%}
.stage.off{visibility:hidden}
#dawn{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0;
  background:radial-gradient(circle at var(--dx,70%) var(--dy,14%), var(--ivory) 0, var(--ivory) var(--R,0vmax), rgba(247,244,237,0) calc(var(--R,0vmax) + 28vmax))}
.cursor{position:fixed; left:0; top:0; width:30px; height:30px; margin:-15px 0 0 -15px; border:1px solid rgba(235,212,160,.55); border-radius:50%; z-index:50; pointer-events:none; opacity:0; transition:opacity var(--dur) ease, width var(--dur) var(--ease-out), height var(--dur) var(--ease-out), margin var(--dur) var(--ease-out), border-color var(--dur) ease}
.cursor.on{opacity:1}
.cursor.big{width:54px; height:54px; margin:-27px 0 0 -27px; border-color:rgba(235,212,160,.9)}
.on-ivory .cursor{border-color:rgba(10,26,47,.45)}
html.reduced .cursor, html:not(.fine) .cursor{display:none}

/* Top bar */
.bar{position:fixed; left:0; right:0; top:0; z-index:20; display:flex; align-items:center; gap:16px; padding:calc(env(safe-area-inset-top,0px) + 14px) var(--gutter) 14px; pointer-events:none}
.bar::before{content:""; position:absolute; inset:0 0 -28px; z-index:-1; pointer-events:none; background:linear-gradient(to bottom, rgba(5,13,25,.8), rgba(5,13,25,0)); transition:background var(--dur) ease}
.on-ivory .bar::before{background:linear-gradient(to bottom, rgba(247,244,237,.96) 60%, rgba(247,244,237,0))}
.bar > *{pointer-events:auto}
.brand{position:relative; display:flex; align-items:center; min-height:44px}
.brand .lk{height:46px; width:auto; object-fit:contain; object-position:left center}
.brand .ink{position:absolute; left:0; top:50%; transform:translateY(-50%); opacity:0; transition:opacity var(--dur) ease}
.brand .metal{transition:opacity var(--dur) ease}
.on-ivory .brand .ink{opacity:1}
.on-ivory .brand .metal{opacity:0}
.tagline{margin-right:auto; padding-left:18px; margin-left:4px; border-left:1px solid var(--line); font:500 10px/1.3 var(--f-sans); letter-spacing:.3em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.bar-actions{display:flex; align-items:center; gap:8px}
.seg{display:flex; border:1px solid var(--line); border-radius:999px; padding:3px; background:rgba(5,13,25,.35)}
.seg button, .pill{font:500 var(--t-xs)/1 var(--f-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); background:none; border:0; border-radius:999px; min-height:32px; min-width:40px; padding:0 12px; cursor:pointer; transition:color var(--dur-fast) ease, background var(--dur-fast) ease, border-color var(--dur-fast) ease}
.seg button[aria-pressed="true"]{background:var(--champ); color:var(--navy)}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]:hover{color:var(--navy)}
.pill{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:rgba(5,13,25,.35)}
.pill:hover{color:var(--ink); border-color:var(--accent)}
.pill[aria-pressed="true"]#sound{color:var(--ink); border-color:var(--accent)}
.btn{display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 20px; border-radius:999px; font:600 var(--t-xs)/1 var(--f-sans); letter-spacing:.18em; text-transform:uppercase; text-decoration:none; cursor:pointer; border:1px solid var(--accent); background:var(--accent); color:var(--navy); transition:background var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur) ease}
.btn:hover{background:var(--champ-hi); box-shadow:0 8px 28px -10px rgba(216,182,128,.7)}
.btn.ghost{background:transparent; color:var(--ink)}
.magnet-in{display:inline-flex; align-items:center; gap:10px; transition:transform 220ms var(--ease-out)}
.on-ivory .bar{--ink:var(--navy); --muted:var(--ink-soft); --line:rgba(10,26,47,.25); --accent:var(--navy); --focus:var(--navy)}
.on-ivory .bar .btn{color:var(--ivory)}
.on-ivory .bar .btn:hover{background:var(--navy-700)}
.on-ivory .seg, .on-ivory .pill{background:transparent}
.on-ivory .seg button[aria-pressed="true"]{background:var(--navy); color:var(--ivory)}

/* Orbit navigation */

/* Chapters */
main{position:relative; z-index:2; overflow-x:clip}
.ch{position:relative; height:var(--h,240vh)}
.frame{position:sticky; top:0; height:100vh; height:100svh; display:grid; padding-inline:var(--gutter); padding-block:clamp(96px, 13vh, 132px) clamp(120px, 16vh, 150px); align-content:end}
.copy{max-width:34rem; position:relative}
.glass{background:var(--glass); border:1px solid rgba(235,212,160,.2); border-radius:20px; padding:clamp(22px,2.4vw,34px); -webkit-backdrop-filter:blur(16px) saturate(1.1); backdrop-filter:blur(16px) saturate(1.1); box-shadow:0 30px 80px -40px rgba(0,0,0,.8)}
/* Light mode (html.lite, set in <head> for devices with four or fewer processor threads or little memory): no
   background blur, which a laptop graphics chip has to recompute over the moving film on every frame; slightly
   more opaque panels instead, so text stays just as readable. */
html.lite{--glass:rgba(5,13,25,.78)}
html.lite *{-webkit-backdrop-filter:none!important; backdrop-filter:none!important}
html.lite .view-sw, html.lite .switch{background:rgba(5,13,25,.8)}
html.lite .skip-film{background:rgba(5,13,25,.86)}
html.lite.simple-view .bar::before{background:rgba(5,13,25,.88)}
html.lite .s-ctas .btn.ghost{background:rgba(5,13,25,.6)}
html.lite .s-search-box:not(.faq-hero .s-search-box){background:rgba(10,26,47,.88)}
html.lite .glass-edge{background:rgba(5,13,25,.78)}
html.lite .s-links a:not([aria-current]):not(.faq-hero .s-links a){background:rgba(5,13,25,.78)}
.eyebrow{margin:0 0 16px; font:500 var(--t-xs)/1.2 var(--f-sans); letter-spacing:.26em; text-transform:uppercase; color:var(--accent); font-variant-numeric:tabular-nums}
h1,h2{margin:0; font-weight:300; letter-spacing:-.025em; line-height:1.05; text-wrap:balance}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h1 em, h2 em, .w.it>span{font-family:var(--f-serif); font-style:italic; font-weight:400; color:var(--accent); letter-spacing:-.01em}
.lead{font-size:var(--t-xl); line-height:1.6; color:var(--ink); max-width:34rem; margin:22px 0 0; text-wrap:pretty}
.body{color:rgba(247,244,237,.86); font-size:var(--t-lg); line-height:1.65; margin:18px 0 0; text-wrap:pretty}
.words .w{display:inline-block; overflow:hidden; vertical-align:top; padding:0 .06em .1em 0; margin:0 -.06em -.1em 0}
.words .w>span{display:inline-block; will-change:transform}
.js-motion .ch .words .w>span{transform:translate3d(0, calc((1 - clamp(0, var(--e,1) * 3.2 - var(--i,0) * .07, 1)) * 112%), 0)}
.js-motion .ch .reveal{opacity:clamp(0, var(--e,1) * 2 - .6, 1); transform:translateY(calc((1 - clamp(0, var(--e,1) * 2 - .6, 1)) * 14px))}
.js-motion .ch .out{opacity:calc(clamp(0, var(--e,1) * 4, 1) - var(--x,0)); transform:translateY(calc(var(--x,0) * -28px))}
.js-motion .ch-hero .out{opacity:calc(1 - var(--x,0))}

/* Hero */
.ch-hero .frame{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); column-gap:clamp(24px,5vw,80px); align-items:end}
.ch-hero .copy{max-width:none}
.ch-hero h1{max-width:12ch}
.hint{display:flex; align-items:center; gap:10px; margin:22px 0 0; color:var(--muted); font-size:var(--t-sm)}
.hint .ico{color:var(--accent)}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
html.js-motion .hint .ico{animation:nudge 1.8s var(--ease-out) infinite}
.fallback{position:absolute; left:50%; top:clamp(90px, 13vh, 150px); transform:translateX(-50%); width:min(560px, 76vw)}
html.js:not(.no-webgl) .fallback{display:none}

/* Scroll cue: centred at the bottom of the opening */

/* Skip the experience */
.skip-film{position:fixed; z-index:20; left:var(--gutter); bottom:calc(env(safe-area-inset-bottom,0px) + 20px); display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 14px; border-radius:999px; background:rgba(5,13,25,.72); border:1px solid rgba(235,212,160,.22); color:var(--ivory); font:500 10px/1 var(--f-sans); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); opacity:0; visibility:hidden; transition:opacity var(--dur) ease, visibility var(--dur) ease, border-color var(--dur-fast) ease, background var(--dur-fast) ease}
.skip-film .ico{width:14px; height:14px; color:var(--champ)}
.skip-film:hover{border-color:var(--champ); background:rgba(5,13,25,.7)}
.skip-film .sm{display:none}
html.in-film .skip-film{opacity:1; visibility:visible}
html:not(.js) .skip-film{display:none}
#h-wat:focus{outline:none}
#h-wat:focus-visible{outline:2px solid var(--navy); outline-offset:6px}

/* Information on ivory */
.info{position:relative; z-index:2; background:var(--ivory); color:var(--navy); --ink:var(--navy); --muted:var(--ink-soft); --accent:var(--bronze); --line:rgba(10,26,47,.16); --focus:var(--navy); color-scheme:light; padding-inline:var(--gutter); padding-block:clamp(110px, 16vh, 170px) 0}
.info h2{color:var(--navy)}
.info .lead{color:var(--ink-soft)}
.info-in{max-width:1240px; margin:0 auto; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,6vw,96px); align-items:start; scroll-margin-top:90px}
.info-head{position:sticky; top:110px}
.index{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.index li{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:24px; padding:26px 0; border-bottom:1px solid var(--line); align-items:baseline}
.index h3{margin:0; font:400 italic clamp(1.4rem,2vw,1.75rem)/1.2 var(--f-serif); color:var(--navy)}
.index h3 a{color:inherit; text-decoration:none; background-image:linear-gradient(currentColor,currentColor); background-size:0 1px; background-repeat:no-repeat; background-position:0 100%; transition:background-size var(--dur) var(--ease-out)}
.index h3 a:hover, .index h3 a:focus-visible{background-size:100% 1px}
.index p{margin:0; color:var(--ink-soft); line-height:1.65}
.ways-wrap{max-width:1240px; margin:clamp(90px,14vh,150px) auto 0; border-top:1px solid var(--line); padding-top:40px}
.ways-title{margin:0 0 30px; font:500 var(--t-xs)/1 var(--f-sans); letter-spacing:.26em; text-transform:uppercase; color:var(--bronze)}
.ways{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:clamp(24px,4vw,56px)}
.ways h3{margin:0 0 10px; font:300 clamp(1.5rem,2.4vw,2.1rem)/1.15 var(--f-sans); letter-spacing:-.02em; color:var(--navy)}
.ways p{margin:0; color:var(--ink-soft); line-height:1.65}
.contact-in{max-width:1240px; margin:clamp(100px,16vh,170px) auto 0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px,6vw,96px); align-items:start; scroll-margin-top:90px}
.details{margin:40px 0 0; display:grid; border-top:1px solid var(--line)}
.details > div{display:grid; grid-template-columns:7.5rem minmax(0,1fr); gap:16px; padding:18px 0; border-bottom:1px solid var(--line); align-items:center}
.details dt{font:500 var(--t-xs)/1.3 var(--f-sans); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft)}
.details dd{margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; font-size:var(--t-lg); color:var(--navy); min-width:0}
.details dd a{text-decoration:none; border-bottom:1px solid rgba(10,26,47,.3); overflow-wrap:anywhere}
.details dd a:hover{border-color:var(--navy)}
.details .role{font-size:var(--t-sm); color:var(--ink-soft)}
.copy-btn{display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 12px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--ink-soft); font:500 11px/1 var(--f-sans); letter-spacing:.14em; text-transform:uppercase; cursor:pointer}
.copy-btn:hover{border-color:var(--navy); color:var(--navy)}
.copy-btn .ico{width:14px; height:14px}
.card-zone{display:grid; justify-items:center; gap:18px; padding-top:8px}
.card-stage{perspective:1400px; width:min(100%, 460px); position:relative; padding-bottom:28px}
.card{position:relative; width:100%; aspect-ratio:85/55; transform-style:preserve-3d; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); cursor:grab; touch-action:pan-y; border-radius:12px; outline-offset:6px}
.face{position:absolute; inset:0; border-radius:12px; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; background:radial-gradient(120% 90% at 30% 20%, #10264A 0%, #0A1A2F 50%, #050D19 100%); box-shadow:inset 0 0 0 1px rgba(216,182,128,.35)}
.face::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at var(--mx,30%) var(--my,20%), rgba(235,212,160,.32), rgba(235,212,160,0) 46%); mix-blend-mode:screen; pointer-events:none}
.front{display:grid; place-items:center}
.front img{width:76%; height:auto}
.back{transform:rotateY(180deg); padding:8% 8.5%; display:flex; flex-direction:column; justify-content:space-between; color:var(--ivory)}
.back .who{font:600 clamp(16px, 3.6vw, 21px)/1.2 var(--f-sans)}
.back .role{font:500 clamp(9px, 1.9vw, 11px)/1.3 var(--f-sans); letter-spacing:.24em; text-transform:uppercase; color:var(--champ); margin-top:6px}
.back .lines{display:grid; gap:4px; font:400 clamp(11px, 2.4vw, 14px)/1.4 var(--f-sans)}
.back .foot{display:flex; justify-content:space-between; align-items:flex-end}
.back .foot img{width:26%; height:auto}
.back .foot span{font:500 clamp(8px,1.6vw,10px)/1 var(--f-sans); letter-spacing:.3em; color:var(--champ); text-transform:uppercase}
.card-shadow{position:absolute; left:10%; right:10%; bottom:0; height:22px; border-radius:50%; background:radial-gradient(closest-side, rgba(10,26,47,.35), rgba(10,26,47,0)); transform:scaleX(var(--sw,1)); pointer-events:none}
.cap{margin:0; font-size:var(--t-sm); color:var(--ink-soft); text-align:center}
.info .btn.ghost{border-color:var(--navy); color:var(--navy)}
/* Opaque equivalent of 7% navy on ivory, so hover contrast is unambiguous */
.info .btn.ghost:hover{background:#E6E5E0}
.foot-note{max-width:1240px; margin:90px auto 0; padding:28px 0 calc(env(safe-area-inset-bottom,0px) + 128px); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px 40px; color:var(--ink-soft); font-size:var(--t-sm)}
.foot-note p{margin:0; max-width:44rem}
.faq-teaser{grid-column:1 / -1; margin:8px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; color:var(--ink-soft)}
.faq-teaser a{display:inline-flex; align-items:center; gap:8px; min-height:44px; font-weight:600; color:var(--navy); text-underline-offset:4px}
.faq-teaser a .ico{transition:transform var(--dur) var(--ease-out)}
.faq-teaser a:hover .ico{transform:translateX(3px)}
.foot-note a{color:inherit}
.foot-note .tag{font:500 11px/1.4 var(--f-sans); letter-spacing:.24em; text-transform:uppercase}

/* Service promise and contact form */
.service{display:flex; align-items:flex-start; gap:12px; margin:24px 0 0; padding:14px 16px; border:1px solid var(--line); border-radius:14px; color:var(--ink-soft); font-size:var(--t-base); line-height:1.5; max-width:34rem}
.service .ico{color:var(--bronze); margin-top:2px}
.service strong{color:var(--navy); font-weight:600}
.form-wrap{max-width:1240px; margin:clamp(90px,14vh,150px) auto 0; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,6vw,96px); align-items:start; scroll-margin-top:90px; border-top:1px solid var(--line); padding-top:clamp(40px,6vh,64px)}
.form{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px 24px}
.form .full{grid-column:1 / -1}
.field{display:flex; flex-direction:column; gap:8px; min-width:0; margin:0; padding:0; border:0}
.field label, .field legend{font:500 var(--t-xs)/1.3 var(--f-sans); letter-spacing:.18em; text-transform:uppercase; color:var(--navy); padding:0}
.field .opt{letter-spacing:.08em; text-transform:none; color:var(--ink-soft); font-weight:400}
.field input:not([type="radio"]), .field select, .field textarea{font:400 var(--t-base)/1.4 var(--f-sans); color:var(--navy); background:#FFFDF8; border:1px solid rgba(10,26,47,.28); border-radius:12px; padding:13px 14px; min-height:48px; width:100%; transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease}
.field textarea{resize:vertical; min-height:140px}
.field select{appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%); background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:40px}
.field input:not([type="radio"]):hover, .field select:hover, .field textarea:hover{border-color:rgba(10,26,47,.5)}
.field input:not([type="radio"]):focus-visible, .field select:focus-visible, .field textarea:focus-visible{outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(10,26,47,.18)}
.field [aria-invalid="true"]{border-color:#A3322A; box-shadow:0 0 0 1px #A3322A}
.err{margin:0; min-height:0; font-size:var(--t-sm); color:#A3322A}
.err:empty{display:none}
.choice{display:flex; flex-wrap:wrap; gap:10px}
.choice label{display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 16px; border:1px solid rgba(10,26,47,.28); border-radius:999px; font:400 var(--t-base)/1 var(--f-sans); letter-spacing:0; text-transform:none; color:var(--navy); cursor:pointer; background:#FFFDF8}
.choice input{accent-color:var(--navy); width:18px; height:18px; min-height:0; margin:0; flex:none}
.choice label:has(input:checked){border-color:var(--navy); box-shadow:inset 0 0 0 1px var(--navy)}
.choice label:has(input:focus-visible){outline:2px solid var(--navy); outline-offset:3px}
.actions{display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px}
.info .form .btn{background:var(--navy); border-color:var(--navy); color:var(--ivory)}
.info .form .btn:hover{background:var(--navy-700); box-shadow:0 10px 28px -12px rgba(10,26,47,.55)}
.info .form .btn[aria-busy="true"]{opacity:.7; cursor:progress}
.privacy{margin:0; font-size:var(--t-sm); color:var(--ink-soft); max-width:26rem}
.status{margin:0; font-size:var(--t-base); line-height:1.55; color:var(--navy)}
.status:empty{display:none}
.status.ok{padding:14px 16px; border:1px solid rgba(10,26,47,.25); border-radius:12px; background:#FFFDF8}
.status.bad{padding:14px 16px; border:1px solid #A3322A; border-radius:12px; color:#7E241E; background:#FFF8F6}

/* Responsive */
@media (max-width: 1100px){
  .tagline{display:none}
  .brand{margin-right:auto}
}
@media (max-width: 980px){
  .ch-hero .frame{grid-template-columns:minmax(0,1fr)}
  .info-in, .contact-in, .form-wrap{grid-template-columns:minmax(0,1fr)}
  .info-head{position:static}
  .ways{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 800px), (max-aspect-ratio: 9/10){
  .frame{padding-block:96px 150px}
  .copy{max-width:100%}
  .glass{padding:20px}
  .body{font-size:var(--t-base)}
  .lead{font-size:var(--t-lg)}
  .stage .grade{background:linear-gradient(0deg, rgba(5,13,25,.7) 0%, rgba(5,13,25,0) 48%)}
  .icon-only-sm .txt{display:none}
  .pill.icon-only-sm{padding:0 9px; min-width:34px}
  .index li{grid-template-columns:minmax(0,1fr); gap:8px}
  .details > div{grid-template-columns:minmax(0,1fr); gap:8px}
  .form{grid-template-columns:minmax(0,1fr)}
  /* Calmer opening on phones: smaller type, no scroll cue or pointer hint */
  .scroll-cue, .ch-hero .hint{display:none}
  .ch-hero h1{font-size:clamp(1.9rem, 8.6vw, 2.3rem); max-width:none}
  .ch-hero .eyebrow{font-size:10px; letter-spacing:.22em; margin-bottom:12px}
  .skip-film{padding:0 12px; min-height:36px; bottom:calc(env(safe-area-inset-bottom,0px) + 18px)}
  .skip-film .lg{display:none}
  .skip-film .sm{display:inline}
}
@media (max-width: 420px){
  .bar{gap:6px; padding-block:calc(env(safe-area-inset-top,0px) + 10px) 10px}
  .bar-actions{gap:5px}
  .brand .lk{height:32px}
  .seg{padding:2px}
  .seg button{min-width:28px; min-height:28px; padding:0 6px; font-size:10px}
  .pill{min-height:30px}
  .pill.icon-only-sm{padding:0 7px; min-width:30px}
  .pill .ico{width:14px; height:14px}
  .bar .btn{min-height:34px; padding:0 12px; font-size:10px; letter-spacing:.1em}
  .bar .btn .ico{display:none}
}
@media (max-width: 360px){
  .bar, .bar-actions{gap:4px}
  .brand .lk{height:28px}
  .seg button{min-width:26px; padding:0 5px}
  .pill.icon-only-sm, .pill.menu-btn{padding:0 6px; min-width:28px; min-height:28px}
  .bar .btn{padding:0 10px; letter-spacing:.06em}
}
/* View switch (cinematic <-> simple). Liquid glass, same anatomy as the plain-language switch on the service pages. */
.view-sw{display:inline-flex; align-items:center; gap:10px; min-height:36px; padding:0 14px 0 5px; border-radius:999px; border:1px solid rgba(235,212,160,.38); background:rgba(5,13,25,.42); -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 10px 30px -18px rgba(0,0,0,.8); color:var(--ink); font:600 var(--t-xs)/1 var(--f-sans); letter-spacing:.14em; text-transform:uppercase; cursor:pointer; white-space:nowrap; transition:border-color var(--dur-fast) ease, background var(--dur-fast) ease}
.view-sw .switch-track{position:relative; flex:none; width:36px; height:22px; border-radius:999px; background:rgba(147,166,193,.28); border:1px solid rgba(235,212,160,.55); transition:background var(--dur) var(--ease-out), border-color var(--dur) ease}
.view-sw .switch-thumb{position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--ivory); box-shadow:0 2px 6px rgba(0,0,0,.4); transition:transform var(--dur) var(--ease-out), background var(--dur) ease}
.view-sw[aria-checked="true"] .switch-track{background:var(--champ); border-color:var(--champ)}
.view-sw[aria-checked="true"] .switch-thumb{transform:translateX(14px); background:var(--navy)}
.view-sw:hover{border-color:var(--champ); background:rgba(27,53,88,.6)}
.view-sw:focus-visible{outline:2px solid var(--focus); outline-offset:3px}
.view-sw .sm{display:none}
.on-ivory .view-sw{background:rgba(247,244,237,.6); border-color:rgba(10,26,47,.3)}
.on-ivory .view-sw .switch-track{border-color:rgba(10,26,47,.45)}
@media (max-width: 1180px){ .view-sw .lg{display:none} .view-sw .sm{display:inline} }
@media (max-width: 800px), (max-aspect-ratio: 9/10){
  .view-sw{position:absolute; top:calc(100% - 2px); right:var(--gutter); min-height:28px; gap:8px; padding:0 11px 0 4px; font-size:10px; letter-spacing:.12em}
  .view-sw .switch-track{width:30px; height:18px}
  .view-sw .switch-thumb{width:12px; height:12px}
  .view-sw[aria-checked="true"] .switch-thumb{transform:translateX(12px)}
}
/* Leaving for the simple view: the page falls away while the logo bursts. */
html.leaving main, html.leaving .bar, html.leaving .skip-film, html.leaving .avi, html.leaving .cursor{opacity:0; transition:opacity .45s ease; pointer-events:none}
.leaving .stage video, .leaving .stage .poster, .leaving .stage .grade, .leaving #dawn{opacity:0; transition:opacity .9s ease .2s}
.bursting .stage{pointer-events:none}
@media (prefers-reduced-motion: reduce){ *{animation:none!important} }

.foot-links{display:flex; flex-wrap:wrap; gap:8px 24px}
.foot-note .company{flex-basis:100%; font-size:var(--t-xs)}
/* House mark: the AVENDOX lockup as a quiet watermark, bottom right of every footer */
.foot-note .hallmark{flex-basis:100%; max-width:none; display:flex; justify-content:flex-end; margin:8px 0 0}
.hallmark img{display:block; width:clamp(64px, 6vw, 84px); height:auto; opacity:.42; transition:opacity var(--dur) ease}
.hallmark:hover img{opacity:.7}

/* Service heads on the orbit around the logo (hero). The heads are real links; their eyes follow the pointer (eyes.js). */
.bots{position:absolute; inset:0; z-index:3; pointer-events:none; opacity:calc(1 - var(--bx,0) * 1.2)}
.bots.gone{visibility:hidden}
.bot{position:absolute; left:var(--x,50%); top:var(--y,60%); width:var(--s,120px); display:flex; flex-direction:column; align-items:center; text-decoration:none; color:var(--ivory); pointer-events:auto;
  transform:translate(-50%,-50%) translate(calc(var(--ox,0px) * var(--bx,0)), calc(var(--oy,0px) * var(--bx,0))); -webkit-tap-highlight-color:transparent}
.bot-slot{position:relative; display:block; width:var(--s,120px); aspect-ratio:1}
.bot-slot img{display:block; width:100%; height:100%; object-fit:contain; transition:opacity var(--dur) ease}
.bot-label{margin-top:2px; padding:4px 8px; border-radius:999px; font:500 11px/1.2 var(--f-sans); letter-spacing:.18em; text-transform:uppercase; color:var(--champ-hi); text-align:center; white-space:nowrap; transition:color var(--dur-fast) ease, background var(--dur-fast) ease}
.bot-desc{position:absolute; top:100%; left:50%; margin-top:6px; width:max-content; max-width:230px; transform:translate(-50%,-4px); text-align:center; font-size:13px; line-height:1.45; color:var(--ivory); opacity:0; pointer-events:none; transition:opacity var(--dur) ease, transform var(--dur) var(--ease-out)}
.bot:hover .bot-label, .bot:focus-visible .bot-label{background:rgba(216,182,128,.16); color:var(--ivory)}
.bot:hover .bot-desc, .bot:focus-visible .bot-desc{opacity:1; transform:translate(-50%,0)}
.bot:focus-visible{outline:none}
.bot:focus-visible .bot-label{outline:2px solid var(--focus); outline-offset:3px}
@media (max-width: 800px), (max-aspect-ratio: 9/10){
  /* Phones: a calm grid of 4 + 3 under the logo instead of an orbit */
  .bots{display:flex; flex-wrap:wrap; justify-content:center; align-content:flex-start; gap:8px 0; inset:auto 0 auto 0; top:43%; padding-inline:var(--gutter)}
  .bot{position:relative; left:auto; top:auto; width:25%; --s:min(16vw, 76px); transform:translateY(calc(var(--bx,0) * 40px))}
  .bot-label{font-size:9px; letter-spacing:.06em; white-space:normal; hyphens:manual; -webkit-hyphens:manual; line-height:1.25; padding:3px 2px; max-width:100%}
  .bot-desc{display:none}
}
@media (prefers-reduced-motion: reduce){ .bot-slot img, .bot-desc{transition:none} }


/* Scroll cue: glowing capsule inside a slowly turning orbit ring, a light trail and a HUD-style label */
.scroll-cue{position:absolute; left:0; right:0; margin:0 auto; width:max-content; bottom:calc(env(safe-area-inset-bottom,0px) + 18px); display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; z-index:3}
.cue-ring{position:relative; display:grid; place-items:center; width:62px; height:62px; border-radius:50%}
.cue-ring::before{content:""; position:absolute; inset:0; border-radius:50%; border:1px dashed rgba(235,212,160,.38)}
.cue-ring::after{content:""; position:absolute; left:50%; top:-3px; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:var(--champ-hi); box-shadow:0 0 12px 2px rgba(235,212,160,.8); transform-origin:3px 34px}
.cue-body{position:relative; width:26px; height:42px; border-radius:15px; border:1.5px solid rgba(235,212,160,.85); background:linear-gradient(180deg, rgba(216,182,128,.14), rgba(5,13,25,.4)); box-shadow:0 0 18px -4px rgba(235,212,160,.55), inset 0 0 10px rgba(235,212,160,.12)}
.cue-dot{position:absolute; left:50%; top:7px; width:5px; height:9px; margin-left:-2.5px; border-radius:3px; background:var(--champ-hi); box-shadow:0 0 10px 1px rgba(235,212,160,.95)}
.cue-track{position:relative; width:1px; height:34px; overflow:hidden; background:linear-gradient(to bottom, rgba(235,212,160,.5), rgba(235,212,160,0))}
.cue-comet{position:absolute; left:-1px; top:-18px; width:3px; height:18px; border-radius:2px; background:linear-gradient(to bottom, rgba(235,212,160,0), var(--champ-hi)); box-shadow:0 0 8px rgba(235,212,160,.9)}
.cue-label{position:relative; padding:6px 14px; font:600 11px/1 var(--f-sans); letter-spacing:.42em; text-transform:uppercase; color:var(--champ-hi); text-shadow:0 0 12px rgba(235,212,160,.45)}
.cue-label::before, .cue-label::after{content:""; position:absolute; top:0; bottom:0; width:8px; border:1px solid rgba(235,212,160,.6)}
.cue-label::before{left:0; border-right:0}
.cue-label::after{right:0; border-left:0}
html.js-motion .cue-ring::after{animation:cueOrbit 6s linear infinite}
html.js-motion .cue-dot{animation:cueDot 2.2s var(--ease-out) infinite}
html.js-motion .cue-comet{animation:cueComet 2.2s cubic-bezier(.4,0,.2,1) .5s infinite}
html.js-motion .cue-label{animation:cueGlow 2.2s ease-in-out infinite}
@keyframes cueOrbit{to{transform:rotate(360deg)}}
@keyframes cueDot{0%{transform:translateY(0); opacity:0} 20%{opacity:1} 70%{transform:translateY(15px); opacity:0} 100%{opacity:0}}
@keyframes cueComet{0%{transform:translateY(0)} 100%{transform:translateY(54px)}}
@keyframes cueGlow{0%,100%{opacity:.78} 50%{opacity:1}}

/* Navigation hint above the robot row: a calm HUD capsule that stays, and names the robot being pointed at */
.bot-bubble{position:absolute; left:var(--x,50%); top:var(--y,60%); z-index:4; margin:0; display:inline-flex; align-items:center; gap:12px; padding:6px 18px 6px 6px; border-radius:999px; background:rgba(5,13,25,.78); border:1px solid rgba(235,212,160,.4); color:var(--ivory); font:500 11px/1 var(--f-sans); letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 18px 40px -18px rgba(0,0,0,.85); transform:translate(-50%,-100%); pointer-events:none; transition:border-color var(--dur-fast) ease, box-shadow var(--dur) ease}
.bot-bubble::after{content:""; position:absolute; left:50%; top:100%; width:1px; height:18px; background:linear-gradient(rgba(235,212,160,.7), rgba(235,212,160,0))}
.bot-bubble .hint-ico{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--champ); color:var(--navy)}
.bot-bubble .hint-ico .ico{width:14px; height:14px}
.bot-bubble .hint-a{font-weight:600; color:var(--champ-hi)}
.bot-bubble .hint-sep{width:1px; height:12px; background:rgba(235,212,160,.45)}
.bot-bubble.live{border-color:var(--champ); box-shadow:0 0 0 3px rgba(216,182,128,.14), 0 18px 40px -18px rgba(0,0,0,.85)}
html.js-motion .bot-bubble{animation:bubbleIn .6s var(--ease-out) 1.4s both}
@keyframes bubbleIn{from{opacity:0; transform:translate(-50%,calc(-100% + 10px))}}
@keyframes bubbleInM{from{opacity:0; transform:translateY(10px)}}

/* Header menu: services and FAQ */
.menu{position:relative}
.menu-btn{min-width:36px; padding:0 9px; justify-content:center}
.menu-btn .ico{transition:transform var(--dur) var(--ease-out)}
.menu-btn[aria-expanded="true"] .ico{transform:rotate(180deg)}
.menu-list{position:absolute; right:0; top:calc(100% + 10px); z-index:30; width:280px; padding:10px; border-radius:16px; background:rgba(10,26,47,.97); border:1px solid rgba(235,212,160,.25); box-shadow:0 24px 60px -20px rgba(0,0,0,.7); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}
.menu-list[hidden]{display:none}
.menu-h{margin:4px 10px 8px; font:500 10px/1.2 var(--f-sans); letter-spacing:.26em; text-transform:uppercase; color:var(--slate)}
.menu-list a{display:flex; align-items:center; gap:10px; min-height:40px; padding:4px 10px; border-radius:10px; color:var(--ivory); text-decoration:none; font:500 var(--t-sm)/1.3 var(--f-sans); hyphens:manual}
.menu-list a img{width:30px; height:30px; flex:none}
.menu-list a:hover, .menu-list a:focus-visible{background:rgba(216,182,128,.14); outline:none}
.menu-list .menu-faq{margin-top:6px; padding-top:10px; border-top:1px solid rgba(235,212,160,.18); border-radius:0 0 10px 10px; justify-content:space-between; color:var(--champ-hi)}
.on-ivory .menu-list{background:rgba(247,244,237,.98); border-color:rgba(10,26,47,.18)}
.on-ivory .menu-list a{color:var(--navy)}
.on-ivory .menu-list .menu-faq{color:var(--bronze); border-top-color:rgba(10,26,47,.15)}
.on-ivory .menu-h{color:var(--ink-soft)}
.on-ivory .menu-list a:hover, .on-ivory .menu-list a:focus-visible{background:rgba(10,26,47,.07)}

/* What we do: seven robot cards, each leading to its page */
.wat-in{grid-template-columns:minmax(0,1fr)}
.wat-in .info-head{position:static; max-width:44rem}
.svc-cards{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.svc-card{position:relative; display:flex; flex-direction:column; height:100%; padding:14px 16px 18px; border-radius:18px; background:var(--navy); color:var(--ivory); text-decoration:none; transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) ease}
.svc-card-t{font:500 var(--t-base)/1.3 var(--f-sans); color:var(--champ-hi); hyphens:manual}
.svc-card-d{margin-top:6px; font-size:var(--t-sm); line-height:1.5; color:#C9D3E1}
.svc-card .ico{position:absolute; right:16px; top:18px; color:var(--champ); transition:transform var(--dur) var(--ease-out)}
.svc-card:hover, .svc-card:focus-visible{transform:translateY(-3px); box-shadow:0 18px 36px -18px rgba(10,26,47,.7)}
.svc-card:hover .ico{transform:translateX(3px)}
.svc-card:focus-visible{outline:2px solid var(--navy); outline-offset:3px}
@media (max-width: 1100px){ .svc-cards{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width: 800px), (max-aspect-ratio: 9/10){
  .svc-cards{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .svc-card{padding:12px 12px 14px}
  .svc-card img{width:72px; height:72px}
  .bots::before{content:""; order:-1; flex-basis:100%; height:0}
  .bot-bubble{position:relative; left:auto; top:auto; order:-2; margin:0 auto 12px; transform:none; display:grid; grid-template-columns:auto auto; column-gap:10px; row-gap:5px; align-items:center; padding:7px 16px 7px 7px; border-radius:22px; font-size:10px; letter-spacing:.14em; text-align:left}
  .bot-bubble .hint-ico{grid-row:1 / 3}
  .bot-bubble .hint-sep{display:none}
  .bot-bubble .hint-a{align-self:end}
  .bot-bubble .hint-b{align-self:start; color:var(--slate)}
  .bot-bubble .hint-a, .bot-bubble .hint-b{white-space:normal; line-height:1.35}
  .bot-bubble::after{height:12px}
  html.js-motion .bot-bubble{animation-name:bubbleInM}
}
.bot-label{white-space:normal; max-width:152px; letter-spacing:.14em; line-height:1.35}
@media (max-width: 800px), (max-aspect-ratio: 9/10){ .scroll-cue{display:none} }
@media (prefers-reduced-motion: reduce){ .cue-ring::after, .cue-dot, .cue-comet, .cue-label, .bot-bubble{animation:none!important} }

/* Robot eyes: original irises moving inside empty lenses (eyes.js) */
.eyes-on{position:relative; display:block; aspect-ratio:1; height:auto}
.eyes-on > img{display:block; width:100%; height:100%}
.eye-lens{position:absolute; aspect-ratio:1; border-radius:50%; overflow:hidden; pointer-events:none}
.eye-lens::after{content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.28), rgba(255,255,255,0) 32%), radial-gradient(circle at 70% 78%, rgba(255,255,255,.06), rgba(255,255,255,0) 40%); pointer-events:none}
.eye-lens .eye-iris{position:absolute; height:auto; will-change:transform; transform-origin:50% 50%}
.svc-card .bot-slot{width:92px; margin:0 0 6px -6px}
.svc-card .bot-slot img{margin:0}
@media (max-width: 800px), (max-aspect-ratio: 9/10){ .svc-card .bot-slot{width:72px} }
.menu-list a img.mark{object-fit:contain}

/* Page-to-page: cross-fade with the header standing still (browsers without support simply navigate) */
@view-transition{navigation:auto}
.bar{view-transition-name:bar}
::view-transition-old(root), ::view-transition-new(root){animation-duration:.22s; animation-timing-function:var(--ease-out)}
@media (prefers-reduced-motion: reduce){ ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){animation:none!important} }

/* Skeleton: the outline of the next page, shown only when a page takes longer than 200 ms (nav.js) */
.sk-screen{position:fixed; inset:0; z-index:100; background:var(--navy-950); opacity:0; transition:opacity .18s ease; overflow:hidden}
.sk-screen.on{opacity:1}
.sk-in{max-width:1320px; margin:0 auto; padding:calc(env(safe-area-inset-top,0px) + 18px) var(--gutter) 0}
.sk{display:block; border-radius:10px; background:linear-gradient(100deg, rgba(247,244,237,.06) 30%, rgba(235,212,160,.16) 50%, rgba(247,244,237,.06) 70%) 0 0/300% 100%; animation:skShimmer 1.4s linear infinite}
@keyframes skShimmer{from{background-position:100% 0} to{background-position:0 0}}
.sk-bar{display:flex; align-items:center; gap:10px; height:46px; margin-bottom:clamp(56px,10vh,110px)}
.sk-logo{width:80px; height:44px; margin-right:auto}
.sk-pill{width:74px; height:32px; border-radius:999px}
.sk-btn{width:132px; height:44px; border-radius:999px}
.sk-btn.ghost{width:150px; background-color:transparent; box-shadow:inset 0 0 0 1px rgba(235,212,160,.22)}
.sk-hero{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:center}
.sk-narrow{grid-template-columns:minmax(0,1fr); max-width:760px}
.sk-copy{display:grid; gap:14px}
.sk-eyebrow{width:160px; height:12px}
.sk-h{width:86%; height:clamp(34px,4.6vw,58px)}
.sk-h.short{width:58%}
.sk-line{width:var(--w,90%); height:14px; border-radius:7px}
.sk-ctas{display:flex; gap:12px; margin-top:12px}
.sk-media{aspect-ratio:1/1; max-height:56vh; width:100%; border-radius:22px}
.sk-search{height:52px; border-radius:999px; margin-top:12px}
.sk-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; margin-top:clamp(48px,8vh,90px)}
.sk-card{display:grid; gap:12px; padding:24px; border-radius:20px; box-shadow:inset 0 0 0 1px rgba(235,212,160,.12)}
.sk-list{display:grid; gap:12px; max-width:760px; margin-top:48px}
.sk-row{height:64px; border-radius:14px}
.sk-center{display:grid; justify-items:center; gap:clamp(40px,8vh,80px); padding-top:4vh}
.sk-orb{width:min(46vw,420px); aspect-ratio:3/2; border-radius:50%}
.sk-bots{display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(12px,3vw,40px)}
.sk-bot{width:clamp(48px,8vw,110px); aspect-ratio:1; border-radius:50%}
@media (max-width: 800px){
  .sk-hero, .sk-grid{grid-template-columns:minmax(0,1fr)}
  .sk-media{aspect-ratio:16/10}
  .sk-pill:nth-of-type(3){display:none}
}
@media (prefers-reduced-motion: reduce){ .sk{animation:none} .sk-screen{transition:none} }

/* Plain-language switch (service pages, About us, simple view) */
.plain-sw{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:24px 0 4px}
.switch{display:inline-flex; align-items:center; gap:12px; min-height:44px; padding:0 18px 0 6px; border-radius:999px; border:1px solid rgba(235,212,160,.4); background:rgba(5,13,25,.55); color:var(--ivory); font:600 var(--t-xs)/1 var(--f-sans); letter-spacing:.18em; text-transform:uppercase; cursor:pointer; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); transition:border-color var(--dur-fast) ease, background var(--dur-fast) ease}
.switch-track{position:relative; width:44px; height:26px; border-radius:999px; background:rgba(147,166,193,.28); border:1px solid rgba(235,212,160,.55); transition:background var(--dur) var(--ease-out), border-color var(--dur) ease}
.switch-thumb{position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--ivory); box-shadow:0 2px 6px rgba(0,0,0,.4); transition:transform var(--dur) var(--ease-out), background var(--dur) ease}
.switch[aria-checked="true"] .switch-track{background:var(--champ); border-color:var(--champ)}
.switch[aria-checked="true"] .switch-thumb{transform:translateX(18px); background:var(--navy)}
.switch:hover{border-color:var(--champ); background:rgba(27,53,88,.7)}
.switch:focus-visible{outline:2px solid var(--champ-hi); outline-offset:3px}
.switch-hint{font:400 13px/1.4 var(--f-sans); color:var(--slate)}
@media (max-width: 800px), (max-aspect-ratio: 9/10){
  /* Same size as the view switch in the header, so the two read as one family */
  .plain-sw{gap:4px 12px; margin-top:18px}
  .switch{gap:8px; min-height:28px; padding:0 11px 0 4px; font-size:10px; letter-spacing:.12em}
  .switch-track{width:30px; height:18px}
  .switch-thumb{width:12px; height:12px; top:2px; left:2px}
  .switch[aria-checked="true"] .switch-thumb{transform:translateX(12px)}
  .switch-hint{font-size:12px}
}
@media (prefers-reduced-motion: reduce){ .switch-track, .switch-thumb{transition:none} }

/* Plain language: one class on <html> (set before the first paint by the head script, then by the switch) */
html:not(.plain) [data-plain="1"], html.plain [data-plain="0"]{display:none}
/* Controls that need JavaScript stay out of view without it */
html:not(.js) .plain-sw, html:not(.js) .faq .search{display:none}

/* ---------------- Slogan: "We make it" flows into "work" and "worth it", like a message between agents ---------------- */
.slogan-band{margin:clamp(48px, 8vw, 96px) 0 clamp(32px, 5vw, 56px); background:linear-gradient(135deg, #0A1A2F 0%, #0D2140 60%, #0A1A2F 100%); color:var(--ivory); border-radius:24px; overflow:hidden; box-shadow:0 30px 80px -40px rgba(5,13,25,.55), inset 0 0 0 1px rgba(216,182,128,.18); display:flex; justify-content:center}
/* Inside a content page (About us) the band keeps to the content width, like the homepage, and the slogan is a
   little smaller so it sits in proportion to the page text. */
.faq .slogan-band{width:min(1240px, calc(100% - 2 * var(--gutter))); margin-inline:auto}
.faq .slogan-svg.wide{max-width:1040px}
.slogan-svg{display:block; width:100%; max-width:1200px; height:auto}
.slogan-eyebrow{font:600 13px/1 var(--f-sans); letter-spacing:.32em; fill:#93A6C1}
.slogan-root{font:italic 400 104px/1 var(--f-serif); letter-spacing:-.01em; fill:#F7F4ED}
.slogan-branch{font:500 62px/1 var(--f-serif); font-style:italic; fill:#EBD4A0}
.slogan-branch .dot{fill:#D8B680}
.sl-halo{fill:none; stroke:#D8B680; stroke-opacity:.12; stroke-width:12; stroke-linecap:round}
.sl-wire{fill:none; stroke:#D8B680; stroke-opacity:.85; stroke-width:2.6; stroke-linecap:round}
.sl-flow{fill:none; stroke:#F7F4ED; stroke-width:3.2; stroke-linecap:round; stroke-dasharray:2 34; animation:slFlow 1.8s linear infinite}
.sl-flow.late{animation-delay:-.6s}
@keyframes slFlow{to{stroke-dashoffset:-36}}
.sl-start{fill:#EBD4A0}
.sl-shadow{fill:#02070F; fill-opacity:.35}
.sl-depth{fill:#0B1C33; stroke:#D8B680; stroke-opacity:.25}
.sl-face{fill:#1B3A68; stroke:#EBD4A0; stroke-opacity:.9; stroke-width:1.6}
.sl-icon{fill:none; stroke:#EBD4A0; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.sl-label{font:600 11px/1 var(--f-sans); letter-spacing:.16em; fill:#F7F4ED}
.sl-out-ring{fill:rgba(216,182,128,.12); stroke:#D8B680; stroke-opacity:.6; stroke-width:1.5}
.sl-out-core{fill:#EBD4A0}
.sl-out path{fill:none; stroke:#0A1A2F; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round}
.slogan-eyebrow.sm{font-size:19px; letter-spacing:.26em}
.slogan-svg.narrow{display:none}
@media (max-width: 640px){ .slogan-svg.wide{display:none} .slogan-svg.narrow{display:block} }
@media (prefers-reduced-motion: reduce){ .sl-flow{animation:none; display:none} }
.slogan-mini{display:flex; align-items:center; gap:10px; margin:16px 0 0; color:var(--muted)}
.slogan-mini .sm-root{font:italic 400 16px/1 var(--f-serif); color:inherit}
.slogan-mini .sm-fork{width:38px; height:26px; flex:none; overflow:visible}
.slogan-mini .sm-fork path{fill:none; stroke:var(--accent); stroke-width:1.4; stroke-linecap:round}
.slogan-mini .sm-fork circle{fill:var(--accent)}
.slogan-mini .sm-branch{display:flex; flex-direction:column; gap:3px; font:italic 400 14px/1 var(--f-serif); color:var(--accent)}