/* =========================================================
   ABNC site.css — v12 "Light Authority"
   Light theme layer on top of the compiled Tailwind (tw.css).
   Loads AFTER tw.css, so single-class overrides win on source order.
   Palette is 100% ABNC brand: navy #0B1628, blue #0872B1,
   cyan #0C8AC0, gold #C59D3B, CTA gold #D4AF37.
   ========================================================= */

:root{
  --navy:#0B1628;      --navy-2:#16273D;   --navy-3:#22374F;
  --blue:#0872B1;      --blue-dk:#065C8F;  --cyan:#0C8AC0;
  --gold:#C59D3B;      --cta:#D4AF37;
  --paper:#FFFFFF;     --mist:#F3F7FB;     --mist-2:#E8F1F8;
  --line:#DDE7F1;      --line-2:#CBD9E7;
  --body:#3D4E63;      --muted:#556A82;    --faint:#607388;
  /* accessible ink shades of the brand gold and cyan, for text on light */
  --gold-ink:#8A6A1E;  --cyan-ink:#0A729F;
  --blob-cyan:#DCEDF8; --blob-gold:#F8EFD6;
}

html{scroll-behavior:smooth}
body{padding-bottom:76px;background:var(--paper);color:var(--body)}
@media (min-width:1024px){body{padding-bottom:0}}
.font-800{font-weight:800}
.font-700{font-weight:700}
h1,h2,h3{font-family:'Sora',sans-serif}
details summary::-webkit-details-marker{display:none}

/* ---------- token remap: surfaces ---------- */
.bg-ink{background-color:var(--paper)}
.bg-ink\/90{background-color:rgba(255,255,255,.86)}
.bg-ink2{background-color:var(--mist)}
.bg-ink2\/95{background-color:rgba(255,255,255,.96)}
.bg-ink3{background-color:var(--paper)}
.bg-black{background-color:var(--navy)}
.bg-white{background-color:var(--paper)}

/* ---------- token remap: ink ---------- */
.text-white{color:var(--navy)}
.text-black{color:var(--navy)}
.text-zinc-300{color:var(--body)}
.text-zinc-400{color:var(--muted)}
.text-zinc-500{color:var(--faint)}
.text-zinc-700{color:var(--body)}
.text-white\/15{color:#DDE7F1}
.text-cta{color:var(--blue)}
.text-cyan{color:var(--cyan-ink)}
.text-gold{color:var(--gold)}

/* ---------- token remap: lines & rings ---------- */
.border-white\/10{border-color:var(--line)}
.border-white\/20{border-color:var(--line)}
.border-white\/25{border-color:var(--line-2)}
.border-cta{border-color:var(--cta)}
.border-cta\/40{border-color:rgba(212,175,55,.55)}
.border-gold\/40{border-color:rgba(197,157,59,.45)}
.ring-cta{--tw-ring-color:var(--cta)}

/* ---------- token remap: hovers (class+pseudo specificity) ---------- */
.hover\:text-white:hover{color:var(--navy)}
.hover\:text-black:hover{color:var(--navy)}
.hover\:bg-zinc-800:hover{background-color:var(--navy-2)}
.hover\:bg-zinc-200:hover{background-color:var(--mist-2)}
.hover\:bg-white\/5:hover{background-color:var(--mist)}
.hover\:border-gold\/50:hover{border-color:rgba(197,157,59,.7)}
.hover\:border-gold\/60:hover{border-color:rgba(197,157,59,.8)}

/* ---------- depth: cards read as cards on a light page ---------- */
.bg-ink3.rounded-3xl,.bg-white.rounded-3xl,.bg-ink3.rounded-2xl,.bg-white.rounded-2xl{
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(11,22,40,.04),0 8px 24px -12px rgba(11,22,40,.10);
}
.bg-ink3.rounded-3xl:hover,.bg-white.rounded-3xl:hover{
  box-shadow:0 2px 4px rgba(11,22,40,.05),0 16px 40px -16px rgba(11,22,40,.16);
  transition:box-shadow .2s ease;
}
.ring-4.ring-cta{box-shadow:0 0 0 4px var(--cta),0 18px 44px -18px rgba(11,22,40,.28)}

/* ---------- header ---------- */
header.sticky{box-shadow:0 1px 0 var(--line),0 6px 20px -18px rgba(11,22,40,.35)}
#menuBtn{color:var(--navy)}
#stickyCta{box-shadow:0 -8px 28px -18px rgba(11,22,40,.45)}

/* ---------- primary CTA: gold fill, navy ink ---------- */
.bg-cta{background-color:var(--cta)}
.bg-cta.text-black,a.bg-cta{color:var(--navy)}
a.bg-cta:hover{box-shadow:0 10px 26px -12px rgba(212,175,55,.85)}
.bg-cyansoft{background-color:var(--blob-cyan)}
.bg-goldsoft{background-color:var(--blob-gold)}
.bg-cyansoft.text-black,.bg-goldsoft.text-black{color:var(--navy)}

/* ---------- FAQ pills ---------- */
details summary.bg-white{border:1px solid transparent}
details[open] summary.bg-white{background:var(--navy);color:#fff}

/* =========================================================
   Dark bands — the one solid brand-colour section per page
   ========================================================= */
.band-dark{background-color:var(--navy)!important;border-color:rgba(255,255,255,.12)!important}
.band-dark .text-white,.band-dark h1,.band-dark h2,.band-dark h3{color:#fff}
.band-dark .text-zinc-300{color:#C4D3E3}
.band-dark .text-zinc-400{color:#9EB1C8}
.band-dark .text-zinc-500{color:#8195AE}
.band-dark .text-cta{color:var(--cta)}
.band-dark .text-cyan{color:#63C7F2}
.band-dark .text-gold{color:var(--cta)}
.band-dark .text-white\/15{color:rgba(255,255,255,.13)}
.band-dark .bg-ink3{background-color:var(--navy-2)}
.band-dark .bg-ink2{background-color:var(--navy-2)}
.band-dark .border-white\/10,.band-dark .border-white\/20{border-color:rgba(255,255,255,.14)}
.band-dark .border-white\/25{border-color:rgba(255,255,255,.28)}
.band-dark .bg-ink3.rounded-3xl,.band-dark .bg-ink3.rounded-2xl{
  border-color:rgba(255,255,255,.12);box-shadow:none
}
.band-dark .hover\:text-white:hover{color:#fff}
.band-dark .hover\:bg-white\/5:hover{background-color:rgba(255,255,255,.06)}
.band-dark .bg-white{background-color:#fff}
.band-dark .bg-white .text-black,.band-dark .bg-white.text-black{color:var(--navy)}
.band-dark .bg-black{background-color:#fff}
.band-dark a.bg-black{color:var(--navy)}
.band-dark .script{color:var(--cta)}
.band-dark .gold-line{background:linear-gradient(90deg,var(--cta),#EBCB6A)}

/* =========================================================
   Kim-style flourishes, in ABNC colours
   ========================================================= */

/* handwritten accent line */
.script{
  font-family:'Caveat','Segoe Script','Bradley Hand',cursive;
  font-weight:700;
  color:var(--blue);
  letter-spacing:0;
  line-height:.92;
  font-size:1.42em;
  display:inline-block;
  padding-bottom:.06em;
}
h1 .script{font-size:1.3em}

/* gold marker highlight behind a word */
.mark{
  background-image:linear-gradient(180deg,transparent 58%,rgba(212,175,55,.55) 58%,rgba(212,175,55,.55) 94%,transparent 94%);
  padding:0 .06em;
}

/* hand-drawn gold underline */
.swash{display:block;width:100%;max-width:22rem;height:14px;margin-top:.15rem;color:var(--cta)}
.swash svg{width:100%;height:100%;overflow:visible}

/* the soft blob behind the founder photo */
.blob-wrap{position:relative;display:flex;justify-content:center;align-items:flex-end}
.blob{
  position:absolute;left:50%;top:6%;transform:translateX(-50%);
  width:min(100%,26rem);aspect-ratio:1/1;
  background:var(--blob-cyan);
  border-radius:52% 48% 46% 54%/49% 44% 56% 51%;
  z-index:0;
}
.blob-2{
  position:absolute;left:1%;bottom:11%;
  width:5.5rem;height:5.5rem;background:var(--blob-gold);
  border-radius:56% 44% 47% 53%/45% 52% 48% 55%;
  z-index:0;
}
.blob-wrap img{position:relative;z-index:2}

/* doodle layer */
.doodles{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:visible}
.doodles svg{overflow:visible}
.dood-stroke{fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round}
.dood-dash{fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-dasharray:7 7}
.dood-gold{fill:var(--cta)}
.dood-cyan{fill:var(--cyan)}
.dood-label{font-family:'Caveat',cursive;font-weight:700;font-size:20px;fill:var(--navy)}
.dood-mini{font-family:'Inter',sans-serif;font-weight:700;font-size:9px;letter-spacing:.14em;fill:var(--navy)}

/* eyebrow rule */
.gold-line{background:linear-gradient(90deg,var(--gold),var(--cta));height:3px;width:64px;border-radius:2px}

/* dotted texture block */
.dots{
  background-image:radial-gradient(var(--line-2) 1.6px,transparent 1.6px);
  background-size:14px 14px;
}

/* section rhythm helper */
.tint{background-color:var(--mist)}

@media (max-width:767px){
  .blob{width:min(86%,18rem);top:10%}
  .blob-2{width:3.6rem;height:3.6rem}
  .doodles{display:none}
  h1 .script{font-size:1.18em}
}

/* footer sits a shade deeper than the closing band */
footer.band-dark{background-color:var(--navy-2)!important}
/* hero column needs room for the doodle layer */
.blob-wrap{min-height:420px}
@media (max-width:767px){.blob-wrap{min-height:340px}}

/* =========================================================
   v12 corrections
   ========================================================= */

/* dark-fill buttons must keep white ink (text-white is remapped to navy) */
.bg-black.text-white,a.bg-black.text-white{color:#fff}
.bg-black.text-white:hover{color:#fff}

/* brand gold is 2.6:1 on white — use a darkened shade of it for TEXT,
   keep true brand gold for the logotype and on navy */
.text-gold{color:var(--gold-ink)}
header .text-gold{color:var(--gold-ink)}
.band-dark .text-gold{color:var(--cta)}

/* header lockup: wordmark, nav and CTA all stay on one line */
header .max-w-6xl > a:first-child{white-space:nowrap;font-size:1.0625rem;letter-spacing:-.03em}
header nav:not(#mobileMenu) > a{white-space:nowrap;padding-left:.5rem;padding-right:.5rem;font-size:13px}
header nav:not(#mobileMenu) > a.bg-cta{font-size:10.5px;padding:.62rem 1.05rem;margin-left:.5rem}

/* soft brand wash behind the inner-page heroes */
.hero-glow{position:relative;overflow:hidden}
.hero-glow::before{
  content:"";position:absolute;left:50%;top:-10%;transform:translateX(-50%);
  width:min(96%,52rem);height:26rem;pointer-events:none;z-index:0;
  background:radial-gradient(58% 58% at 50% 42%,var(--blob-cyan) 0%,rgba(220,237,248,0) 72%);
}
.hero-glow > *{position:relative;z-index:1}

/* long accent lines use the gold marker instead of script */
h1 .mark{
  background-image:linear-gradient(180deg,transparent 70%,rgba(212,175,55,.58) 70%,rgba(212,175,55,.58) 97%,transparent 97%);
  padding:0 .1em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* real webfonts are wider than the old Trebuchet fallback — keep long
   strings and big numerals inside their containers at every width */
p,h1,h2,h3,a,span,summary{overflow-wrap:break-word}
footer a{overflow-wrap:anywhere}
@media (min-width:768px) and (max-width:1023px){
  .text-5xl{font-size:2.4rem;line-height:1}
  .md\:text-6xl{font-size:2.9rem;line-height:1}
}