/* =====================================================================
   Base: reset, typography, primitives (buttons, fields, chips), motion
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:var(--navy-deep); overflow-x:hidden; scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0; font-family:var(--font); font-size:var(--fs-body); line-height:var(--lh); color:var(--navy); background:var(--warm-white); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip}
img,svg,video{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit; letter-spacing:inherit}
button{background:none; border:0; padding:0; cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0; list-style:none}
h1,h2,h3,h4{line-height:var(--lh-tight); font-weight:650; text-wrap:balance}
:root[lang="en"] h1,:root[lang="en"] h2{letter-spacing:-.022em}
p{text-wrap:pretty}
[hidden]{display:none!important}
::selection{background:var(--gold); color:var(--navy-deep)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:var(--r-xs)}
.dark :focus-visible,.on-dark:focus-visible{outline-color:var(--gold-on-dark)}

.container{width:100%; max-width:calc(var(--container) + var(--gutter) * 2); margin-inline:auto; padding-inline:var(--gutter)}
.sr-only{position:absolute!important; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.mono{font-family:var(--mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums}
.ltr{direction:ltr; unicode-bidi:isolate}
.i-dir{transition:transform var(--t2) var(--ease)}
:root[dir="ltr"] .i-dir{transform:scaleX(-1)}

.skip{position:fixed; inset-inline-start:16px; top:-60px; z-index:200; padding:10px 16px; border-radius:var(--r-s); background:var(--gold); color:var(--navy-deep); font-weight:600; transition:top var(--t2) var(--ease)}
.skip:focus{top:12px}

/* ---------- Surfaces ---------- */
.dark{background:var(--navy-deep); color:var(--text-on-dark)}
.dark-2{background:var(--navy); color:var(--text-on-dark)}
.light{background:var(--warm-white); color:var(--navy)}
.soft{background:var(--soft); color:var(--navy)}
.section{position:relative; padding-block:var(--section); isolation:isolate; overflow:clip}

/* Backgrounds — compass grid, noise, moving light */
.bg-grid::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(var(--grid-c, rgba(15,27,44,.06)) 1px, transparent 1px), linear-gradient(90deg, var(--grid-c, rgba(15,27,44,.06)) 1px, transparent 1px);
  background-size:64px 64px; background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%); mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%)}
.dark.bg-grid::before,.dark-2.bg-grid::before{--grid-c:rgba(255,255,255,.045)}
.bg-noise::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.glow{position:absolute; z-index:-1; pointer-events:none; width:720px; height:720px; border-radius:50%; filter:blur(10px);
  background:radial-gradient(closest-side, rgba(184,134,59,.16), rgba(184,134,59,0)); animation:drift 22s var(--ease-io) infinite alternate}
.glow--navy{background:radial-gradient(closest-side, rgba(38,66,104,.55), rgba(22,38,61,0))}
@keyframes drift{from{transform:translate3d(-4%,-3%,0) scale(1)} to{transform:translate3d(5%,4%,0) scale(1.08)}}
.is-offscreen .glow,.is-offscreen .orbit,.is-offscreen .flowline{animation-play-state:paused}

/* ---------- Headings kit ---------- */
.kicker{display:inline-flex; align-items:center; gap:12px; margin-bottom:var(--s4); font-size:var(--fs-sm); font-weight:500; color:var(--slate)}
.kicker .mono{color:var(--gold-text)}
.kicker::before{content:""; width:28px; height:1px; background:currentColor; opacity:.5}
.dark .kicker,.dark-2 .kicker{color:var(--text-on-dark-3)}
.dark .kicker .mono,.dark-2 .kicker .mono{color:var(--gold-on-dark)}
.h2{font-size:var(--fs-h2); font-weight:650}
.lead{font-size:var(--fs-lead); color:var(--slate); line-height:1.8}
.dark .lead,.dark-2 .lead{color:var(--text-on-dark-2)}
.muted{color:var(--slate)}
.dark .muted,.dark-2 .muted{color:var(--text-on-dark-3)}
.accent{color:var(--gold-text)}
.dark .accent,.dark-2 .accent{color:var(--gold-on-dark)}
.sec-head{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--s7); align-items:end; margin-bottom:var(--s8)}
@media (max-width:899px){ .sec-head{grid-template-columns:minmax(0,1fr); gap:var(--s4); margin-bottom:var(--s7)} }

/* ---------- Buttons ---------- */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 24px; border-radius:var(--r-s); border:1px solid transparent;
  font-size:var(--fs-sm); font-weight:600; line-height:1; white-space:nowrap; isolation:isolate; overflow:hidden;
  transition:background-color var(--t2) var(--ease), border-color var(--t2) var(--ease), color var(--t2) var(--ease), box-shadow var(--t3) var(--ease), transform var(--t1) var(--ease)}
.btn:active{transform:scale(.98)}
.btn svg{width:16px; height:16px; flex:none}
.btn .i-dir{transition:transform var(--t2) var(--ease)}
.btn:hover .i-dir{transform:translateX(-3px)}
:root[dir="ltr"] .btn:hover .i-dir{transform:scaleX(-1) translateX(-3px)}
.btn--gold{background:var(--gold); color:var(--navy-deep)}
.btn--gold::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform:translateX(-120%); transition:transform 700ms var(--ease)}
.btn--gold:hover{background:var(--gold-hover); box-shadow:0 10px 30px -12px rgba(184,134,59,.7)}
.btn--gold:hover::after{transform:translateX(120%)}
.btn--navy{background:var(--navy); color:var(--white)}
.btn--navy:hover{background:var(--navy-2); box-shadow:var(--shadow-2)}
.btn--line{border-color:var(--border); color:var(--navy); background:var(--white)}
.btn--line:hover{border-color:var(--navy)}
.btn--ghost{border-color:var(--line-dark-2); color:var(--white)}
.btn--ghost:hover{border-color:var(--gold-on-dark); color:var(--gold-on-dark)}
.btn--sm{min-height:44px; padding:0 18px; font-size:.875rem}
.btn--lg{min-height:56px; padding:0 30px; font-size:1rem}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45; cursor:not-allowed; box-shadow:none}
.magnetic{will-change:transform}

.tlink{display:inline-flex; align-items:center; gap:8px; min-height:44px; font-weight:600; font-size:var(--fs-sm); color:var(--gold-text); background:linear-gradient(currentColor,currentColor) 100% calc(100% - 10px)/0 1px no-repeat; transition:background-size var(--t3) var(--ease)}
:root[dir="ltr"] .tlink{background-position:0 calc(100% - 10px)}
.tlink:hover{background-size:100% 1px}
.tlink svg{width:14px; height:14px}
.dark .tlink,.dark-2 .tlink{color:var(--gold-on-dark)}

/* ---------- Reveal system ---------- */
.js [data-reveal]{opacity:0; transition:opacity var(--t4) var(--ease-out), transform 700ms var(--ease-out), filter 700ms var(--ease-out); transition-delay:calc(var(--i,0) * 70ms)}
.js [data-reveal="up"]{transform:translate3d(0,24px,0)}
.js [data-reveal="blur"]{filter:blur(10px); transform:translate3d(0,10px,0)}
.js [data-reveal="scale"]{transform:scale(.96)}
.js [data-reveal="start"]{transform:translate3d(28px,0,0)}
:root[dir="ltr"].js [data-reveal="start"]{transform:translate3d(-28px,0,0)}
.js [data-reveal].is-in,:root[dir="ltr"].js [data-reveal].is-in{opacity:1; transform:none; filter:none}

/* ---------- Fields ---------- */
.field{display:flex; flex-direction:column; gap:8px; min-width:0}
.field--full{grid-column:1 / -1}
.field__label{display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:var(--fs-sm); font-weight:600; color:var(--navy)}
.field__label .req{color:var(--gold-text); margin-inline-start:2px}
.field__label .field__opt{font-weight:400; font-size:var(--fs-xs); color:var(--slate)}
.field__hint{font-size:var(--fs-xs); color:var(--slate); line-height:1.7}
.field__err{display:none; align-items:center; gap:6px; font-size:var(--fs-xs); font-weight:500; color:var(--danger); line-height:1.6}
.field__err svg{width:14px; height:14px; flex:none}
.field.is-invalid .field__err{display:flex; animation:errIn var(--t3) var(--ease-out)}
@keyframes errIn{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
.control{position:relative}
.input{width:100%; min-height:52px; padding:12px 16px; border:1px solid var(--border); border-radius:var(--r-s); background:var(--white); color:var(--navy); font-size:var(--fs-sm);
  transition:border-color var(--t2) var(--ease), box-shadow var(--t2) var(--ease), background-color var(--t2) var(--ease)}
.input::placeholder{color:#6E7682}
.input:hover{border-color:#B8BDC6}
.input:focus{outline:none; border-color:var(--navy); box-shadow:0 0 0 4px rgba(15,27,44,.08)}
textarea.input{min-height:120px; resize:vertical; line-height:1.8}
select.input{appearance:none; -webkit-appearance:none; padding-inline-end:44px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%235B6573' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 16px center}
:root[dir="ltr"] select.input{background-position:right 16px center}
.input.ltr-in{direction:ltr; text-align:left}
:root[dir="rtl"] .input.ltr-in{text-align:right}
.input.ltr-in::placeholder{direction:ltr}
.field.is-invalid .input{border-color:var(--danger); box-shadow:0 0 0 4px rgba(180,35,24,.08)}
.field.is-valid .input{border-color:#9FB9A9}
.field__ok{position:absolute; inset-inline-end:14px; top:17px; width:18px; height:18px; color:var(--success); opacity:0; transform:scale(.6); transition:opacity var(--t2) var(--ease), transform var(--t2) var(--ease); pointer-events:none}
.field.is-valid .field__ok{opacity:1; transform:none}
select.input ~ .field__ok{inset-inline-end:40px}
textarea.input ~ .field__ok{top:14px}
.counter{font-family:var(--mono); font-size:.6875rem; color:var(--slate); letter-spacing:.04em; direction:ltr; unicode-bidi:isolate}
.counter.is-over{color:var(--danger)}
.input-group{display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:8px}
@media (max-width:479px){ .input-group{grid-template-columns:minmax(0,1fr) 120px} }

/* Choice chips (multi) and choice cards (single) */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{position:relative; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border:1px solid var(--border); border-radius:var(--r-full); background:var(--white); font-size:var(--fs-sm); color:var(--navy); cursor:pointer; user-select:none;
  transition:border-color var(--t2) var(--ease), background-color var(--t2) var(--ease), color var(--t2) var(--ease), transform var(--t1) var(--ease)}
.chip input{position:absolute; opacity:0; pointer-events:none}
.chip:hover{border-color:var(--navy)}
.chip:active{transform:scale(.97)}
.chip .tick{width:14px; height:14px; margin-inline-start:-4px; display:none}
.chip:has(input:checked){background:var(--navy); border-color:var(--navy); color:var(--white)}
.chip:has(input:checked) .tick{display:block}
.chip:has(input:focus-visible){outline:2px solid var(--gold); outline-offset:2px}
.choices{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px}
.choice{position:relative; display:flex; flex-direction:column; gap:2px; min-height:64px; padding:12px 16px; padding-inline-end:42px; border:1px solid var(--border); border-radius:var(--r-s); background:var(--white); cursor:pointer;
  transition:border-color var(--t2) var(--ease), box-shadow var(--t2) var(--ease), background-color var(--t2) var(--ease)}
.choice input{position:absolute; opacity:0; pointer-events:none}
.choice strong{font-size:var(--fs-sm); font-weight:600}
.choice span{font-size:var(--fs-xs); color:var(--slate); line-height:1.6}
.choice::after{content:""; position:absolute; top:14px; inset-inline-end:14px; width:16px; height:16px; border-radius:50%; border:1px solid var(--border); transition:border var(--t2) var(--ease)}
.choice:hover{border-color:#9AA1AC}
.choice:has(input:checked){border-color:var(--navy); box-shadow:inset 0 0 0 1px var(--navy); background:var(--gold-soft)}
.choice:has(input:checked)::after{border:5px solid var(--navy)}
.choice:has(input:focus-visible){outline:2px solid var(--gold); outline-offset:2px}
.field.is-invalid .chip,.field.is-invalid .choice{border-color:rgba(180,35,24,.45)}

/* File input */
.file{display:flex; align-items:center; gap:16px; padding:12px; border:1px dashed #B8BDC6; border-radius:var(--r-s); background:var(--white); transition:border-color var(--t2) var(--ease), background-color var(--t2)}
.file:hover,.file.is-drag{border-color:var(--navy); background:var(--gold-soft)}
.file__thumb{flex:none; width:56px; height:56px; border-radius:var(--r-s); background:var(--soft) center/contain no-repeat; border:1px solid var(--border); display:grid; place-items:center; color:var(--slate)}
.file__thumb svg{width:22px; height:22px}
.file__body{flex:1; min-width:0; font-size:var(--fs-xs); color:var(--slate); line-height:1.7}
.file__body strong{display:block; font-size:var(--fs-sm); color:var(--navy); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.file__actions{display:flex; gap:8px}
.file input{position:absolute; width:1px; height:1px; opacity:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; transition-delay:0s!important; scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1!important; transform:none!important; filter:none!important}
}