@font-face{font-family:'Sora';font-weight:100 800;font-display:swap;src:url(/fonts/sora-var.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:200 800;font-display:swap;src:url(/fonts/manrope-var.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/fraunces-var.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 700;font-display:swap;src:url(/fonts/fraunces-italic-var.woff2) format('woff2')}

:root{
  --night:#080B11;--deep:#111620;--line:rgba(201,182,142,.15);
  --ink:#EEEAE1;--soft:#A7A08E;--body:#D8D2C6;
  --gold:#E4B457;--gold-hi:#F5D585;--gold-deep:#B98A38;--gold-ink:#241905;--danger:#E0705E;
  --hair:rgba(201,182,142,.15);--hair-2:rgba(201,182,142,.26);
  --font-display:'Sora',system-ui,sans-serif;
  --font-body:'Manrope',system-ui,sans-serif;
  --font-editorial:'Fraunces',Georgia,serif;
  --measure:68ch;--shell:1160px;--land:960px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scrollbar-width:thin;scrollbar-color:rgba(201,182,142,.32) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(201,182,142,.22);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(201,182,142,.36)}
::-webkit-scrollbar-track{background:transparent}
::selection{background:rgba(228,180,87,.24);color:var(--ink)}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill{-webkit-text-fill-color:var(--ink)!important;-webkit-box-shadow:0 0 0 1000px var(--deep) inset!important;box-shadow:0 0 0 1000px var(--deep) inset!important;caret-color:var(--ink);transition:background-color 9999s ease-in-out 0s}

body{margin:0;background:var(--night);color:var(--ink);font-family:var(--font-body);font-size:18px;line-height:1.72;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
.reveal{opacity:1!important;transform:none!important}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-hi)}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:3px}
img{max-width:100%;height:auto}

/* ---------- atmosphere (GPU-only, barely-there) ---------- */
.bl-atmos{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(228,180,87,.055), transparent 62%),
    radial-gradient(900px 700px at 8% 4%, rgba(120,140,170,.05), transparent 60%),
    linear-gradient(180deg, #0A0E15 0%, var(--night) 34%, #06090E 100%)}
.bl-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;will-change:transform}
.bl-orb--1{width:520px;height:520px;top:-120px;right:-80px;background:radial-gradient(circle,rgba(228,180,87,.14),transparent 68%)}
.bl-orb--2{width:600px;height:600px;bottom:-180px;left:-160px;background:radial-gradient(circle,rgba(80,110,150,.10),transparent 70%)}

/* ---------- reading progress ---------- */
.bl-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;background:transparent;pointer-events:none}
.bl-progress__bar{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-hi));
  box-shadow:0 0 12px rgba(228,180,87,.35)}

/* ---------- header / footer ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(8,11,17,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{max-width:var(--shell);margin:0 auto;padding:0 26px;height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{text-decoration:none}
.logo-word{font-family:var(--font-editorial);font-size:1.4rem;line-height:1}
.lw-a{font-weight:460;color:var(--ink)}
.lw-b{font-style:italic;font-weight:500;color:var(--gold);margin-left:.06em}
.nav-links{display:flex;gap:22px;align-items:center;font-size:.92rem}
.nav-links a{color:var(--soft)}
.nav-links a:hover{color:var(--ink)}
.nav-cta{padding:9px 18px;border-radius:10px;background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep));color:var(--gold-ink)!important;font-weight:650}
.nav-cta:hover{color:var(--gold-ink)!important;filter:brightness(1.05)}
footer.site-foot{border-top:1px solid var(--line);padding:44px 0 70px;margin-top:56px;position:relative}
.foot{max-width:var(--shell);margin:0 auto;padding:0 26px;color:var(--soft);font-size:.85rem;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between}
.foot .legal{max-width:60ch}
.foot a{color:var(--soft)}
.foot a:hover{color:var(--ink)}

/* ---------- containers ---------- */
.wrap{max-width:var(--measure);margin:0 auto;padding:0 26px}
main.article{max-width:var(--shell);padding:44px 0 24px}
main.wrap:not(.article){max-width:var(--land)}

/* ---------- article header block ---------- */
main.article>.crumbs,main.article>.eyebrow,main.article>h1,main.article>.artmeta{max-width:var(--measure)}
.crumbs{font-size:.78rem;color:var(--soft);margin:0 0 26px;letter-spacing:.02em;display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.crumbs a{color:var(--soft)}
.crumbs a:hover{color:var(--ink)}
.crumbs span{opacity:.42;margin:0 8px}
.eyebrow{font-family:var(--font-display);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:0 0 16px}
h1{font-family:var(--font-display);font-weight:760;letter-spacing:-.022em;font-size:clamp(2rem,4.6vw,2.85rem);line-height:1.12;margin:0 0 20px;text-wrap:balance;color:var(--ink)}
.artmeta{color:var(--soft);font-size:.82rem;letter-spacing:.02em;margin:0 0 6px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.art-readtime{color:var(--gold-deep)}

/* ---------- two-column grid + sticky ToC ---------- */
.art-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 232px;column-gap:76px;align-items:start;margin-top:34px}
.art-body{min-width:0;position:relative}
.art-body>.prose{max-width:var(--measure)}

/* glass reading-plane: floats the article body over the static orbs
   (translucent deep fill + hairline + backdrop-blur), soft depth behind
   the text without lowering body contrast. GPU-only, pointer-transparent. */
.art-body::before{content:"";position:absolute;inset:-30px;z-index:-1;border-radius:20px;
  background:linear-gradient(180deg,rgba(17,22,32,.5),rgba(14,18,26,.3));
  border:1px solid var(--hair);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);pointer-events:none}

.toc{position:sticky;top:96px;align-self:start;font-family:var(--font-body)}
.toc-title{font-family:var(--font-editorial);font-style:italic;font-weight:500;font-size:1rem;color:var(--soft);margin:0 0 14px;letter-spacing:.01em}
.toc-list{list-style:none;margin:0;padding:0;counter-reset:toc;border-left:1px solid var(--line)}
.toc-link{display:block;position:relative;padding:.5em 0 .5em 1.15em;margin-left:-1px;font-size:.82rem;line-height:1.35;color:var(--soft);border-left:1px solid transparent;transition:color .25s var(--ease),border-color .25s var(--ease)}
.toc-link::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);font-family:var(--font-display);font-size:.62rem;letter-spacing:.08em;color:var(--gold-deep);opacity:.55;margin-right:.7em;font-weight:600;transition:opacity .25s var(--ease),color .25s var(--ease)}
.toc-link:hover{color:var(--ink)}
.toc-link.is-active{color:var(--ink);border-left-color:var(--gold)}
.toc-link.is-active::before{opacity:1;color:var(--gold)}

/* ---------- prose ---------- */
.prose{counter-reset:sec}
.prose p{margin:0 0 1.15em;color:var(--body)}
.prose>p:first-of-type{font-size:1.2rem;line-height:1.62;color:var(--ink);margin-bottom:1.35em}
.prose>p:first-of-type::first-letter{font-family:var(--font-editorial);font-weight:600;font-size:3.5em;line-height:.8;float:left;margin:.04em .14em -.02em -.02em;color:var(--gold-deep)}
.prose h2{counter-increment:sec;font-family:var(--font-display);font-weight:640;font-size:clamp(1.32rem,2.4vw,1.6rem);color:var(--ink);letter-spacing:-.012em;line-height:1.26;margin:2.9em 0 .7em;padding-top:2rem;border-top:1px solid var(--line);text-wrap:balance;scroll-margin-top:96px}
.prose h2::before{content:counter(sec,decimal-leading-zero);display:block;font-family:var(--font-display);font-size:.7rem;letter-spacing:.2em;color:var(--gold);font-weight:600;margin-bottom:1em}
.prose h3{font-family:var(--font-display);font-weight:600;font-size:1.14rem;color:var(--ink);letter-spacing:-.005em;margin:2em 0 .5em;line-height:1.35}
.prose ul,.prose ol{color:var(--body);padding-left:0;margin:0 0 1.2em;list-style:none}
.prose ul li,.prose ol li{position:relative;padding-left:1.7em;margin-bottom:.6em}
.prose ul li::before{content:"";position:absolute;left:0;top:.82em;width:14px;height:1px;background:var(--gold-deep)}
.prose ol{counter-reset:li}
.prose ol li{counter-increment:li}
.prose ol li::before{content:counter(li);position:absolute;left:0;top:0;font-family:var(--font-display);font-size:.78rem;font-weight:650;color:var(--gold);line-height:1.9}
.prose strong{color:var(--ink);font-weight:650}
.prose em{font-family:var(--font-editorial);font-style:italic}
.prose a{color:var(--gold);border-bottom:1px solid rgba(228,180,87,.32);transition:border-color .2s var(--ease),color .2s var(--ease)}
.prose a:hover{color:var(--gold-hi);border-color:var(--gold-hi)}
.prose blockquote{margin:1.9em 0;padding:.1em 0 .1em 1.5em;border-left:2px solid var(--gold-deep);font-family:var(--font-editorial);font-style:italic;font-size:1.32rem;line-height:1.5;color:var(--ink)}
.prose blockquote p{color:inherit;margin:0}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;background:rgba(201,182,142,.1);padding:.12em .4em;border-radius:5px;color:var(--gold-hi)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}

/* ---------- FAQ (considered Q&A) ---------- */
.art-faq-title{border-top:1px solid var(--hair-2)}
.art-faq{margin:1.2em 0 0;border-top:1px solid var(--line)}
.art-faq__item{border-bottom:1px solid var(--line)}
.art-faq__q{display:block;list-style:none;cursor:pointer;padding:1.05em 2.2em 1.05em 0;position:relative;font-family:var(--font-display);font-weight:560;font-size:1.04rem;color:var(--ink);line-height:1.4;transition:color .2s var(--ease)}
.art-faq__q::-webkit-details-marker{display:none}
.art-faq__q:hover{color:var(--gold-hi)}
.art-faq__q::after{content:"";position:absolute;right:.35em;top:1.5em;width:9px;height:9px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg);transition:transform .25s var(--ease);transform-origin:60% 60%}
.art-faq__item[open] .art-faq__q{color:var(--gold-hi)}
.art-faq__item[open] .art-faq__q::after{transform:rotate(-135deg)}
.art-faq__a{padding:0 1.5em 1.2em 0}
.art-faq__a p{margin:0 0 .8em;color:var(--body)}
.art-faq__a p:last-child{margin-bottom:0}
.art-endnote{margin:2.2em 0 0;font-family:var(--font-editorial);font-style:italic;font-size:1.06rem;line-height:1.6;color:var(--soft)}
.art-endnote a{font-style:normal;color:var(--gold);border-bottom:1px solid rgba(228,180,87,.32)}
.art-endnote a:hover{color:var(--gold-hi)}

/* ---------- disclaimer ---------- */
.disc{margin:40px 0 0;padding:20px 24px;border:1px solid var(--line);border-left:2px solid var(--gold-deep);border-radius:12px;background:linear-gradient(180deg,rgba(17,22,32,.6),rgba(17,22,32,.3));color:var(--soft);font-size:.9rem;line-height:1.6}
.disc strong{color:var(--gold-hi);font-weight:600}

/* ---------- related guides (card grid) ---------- */
.related{margin:52px 0 8px;border-top:1px solid var(--line);padding-top:30px}
.related h2{font-family:var(--font-display);font-weight:600;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 20px}
.related ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.related li{margin:0}
.related li a{display:block;height:100%;border:1px solid var(--line);border-radius:14px;padding:18px 20px;color:var(--ink);font-weight:520;font-size:.98rem;line-height:1.4;background:rgba(17,22,32,.32);transition:border-color .25s var(--ease),transform .25s var(--ease),background .25s var(--ease)}
.related li a::after{content:"\2197";display:inline-block;margin-left:.4em;color:var(--gold-deep);transition:transform .25s var(--ease),color .25s var(--ease)}
.related li a:hover{border-color:var(--hair-2);transform:translateY(-2px);background:rgba(17,22,32,.55);color:var(--gold-hi)}
.related li a:hover::after{transform:translate(2px,-2px);color:var(--gold)}

/* ---------- index / landing ---------- */
.idx-hero{padding:70px 0 8px;max-width:var(--land);border-bottom:1px solid var(--line)}
.idx-hero .eyebrow{margin-bottom:20px}
.idx-hero h1{font-size:clamp(2.3rem,5.4vw,3.4rem);max-width:16ch;margin-bottom:22px}
.idx-sub{color:var(--soft);font-size:1.1rem;line-height:1.6;max-width:58ch;margin:0 0 34px}
.cluster{display:flex;flex-wrap:wrap;align-items:baseline;margin:52px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.ctag{font-family:var(--font-display);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600}
.cl-count{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);font-weight:500;position:relative;margin-left:16px;padding-left:15px}
.cl-count::before{content:"";position:absolute;left:0;top:50%;width:5px;height:5px;border-radius:50%;background:var(--gold-deep);transform:translateY(-50%)}
.cluster h2{flex:1 1 100%;font-family:var(--font-display);font-weight:640;font-size:clamp(1.3rem,2.6vw,1.62rem);color:var(--ink);letter-spacing:-.015em;margin:9px 0 2px;line-height:1.2}
.cluster ul{flex:1 1 100%;list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.cluster li{margin:0}
.cluster li a{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:1em;padding:.85em 0;border-bottom:1px solid var(--line);color:var(--body);font-weight:480;font-size:1rem;line-height:1.35;transition:color .2s var(--ease),padding-left .2s var(--ease)}
.cluster li a::after{content:"\2192";color:var(--gold-deep);opacity:0;transform:translateX(-6px);transition:opacity .22s var(--ease),transform .22s var(--ease),color .22s var(--ease)}
.cluster li a:hover{color:var(--ink);padding-left:.5em}
.cluster li a:hover::after{opacity:1;transform:translateX(0);color:var(--gold)}
.cluster li.pillar{grid-column:1/-1;margin-bottom:8px}
.cluster li.pillar a{display:block;position:relative;padding:2em 0 1.15em;border-bottom:1px solid var(--hair-2);font-family:var(--font-display);font-weight:600;font-size:clamp(1.14rem,2vw,1.3rem);color:var(--gold-hi);letter-spacing:-.01em;line-height:1.28}
.cluster li.pillar a::before{content:"Pillar guide \2014 start here";position:absolute;top:.5em;left:0;font-family:var(--font-display);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.cluster li.pillar a::after{content:"\2192";display:inline-block;margin-left:.5em;color:var(--gold-deep);opacity:1;transform:none;transition:color .22s var(--ease),transform .22s var(--ease)}
.cluster li.pillar a:hover{color:#FBF7EE;padding-left:0}
.cluster li.pillar a:hover::after{color:var(--gold);transform:translateX(3px)}

/* ---------- soft reveal ---------- */
.bl-reveal{opacity:0;transform:translateY(12px)}
.bl-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .art-grid{grid-template-columns:1fr;column-gap:0;row-gap:0}
  .art-body::before{inset:-20px -18px}
  .toc{position:static;top:auto;order:-1;margin:0 0 30px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:rgba(17,22,32,.34)}
  .toc-title{margin-bottom:10px}
  .toc-list{border-left:0;display:grid;gap:2px}
  .toc-link{padding:.35em 0;border-left:0}
  .toc-link.is-active{border-left:0;color:var(--gold-hi)}
  .art-body>.prose{max-width:none}
}
@media(max-width:640px){
  body{font-size:17px}
  main.article{padding:30px 0 20px}
  .bl-orb{filter:blur(70px)}
  .bl-orb--1{width:340px;height:340px}
  .bl-orb--2{width:380px;height:380px}
  .art-body::before{inset:-16px -14px;border-radius:16px}
  .related ul{grid-template-columns:1fr}
  .cluster ul{grid-template-columns:1fr;gap:0}
  .cluster li.pillar a{font-size:1.12rem}
  .prose>p:first-of-type::first-letter{font-size:3em}
  .foot{flex-direction:column;text-align:left!important}
  .nav-links{gap:14px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .bl-reveal{opacity:1!important;transform:none!important}
  .bl-orb{opacity:.4}
}
/* ============================================================
   HARBOURFIRST — Enquiry section ("Quiet luxury", Direction A)
   Embedded on-page block. All classes namespaced hf-enq__.
   Consumes global brand tokens (with portable var() fallbacks so
   the block still renders if a token is missing). No :root / html
   / body / * / @font-face. Natural height, the PAGE scrolls
   (no inner scroll).
   ============================================================ */

.hf-enq{
  /* Field surface is a SOLID colour so autofill can be masked to match it
     exactly — fields look identical empty, typed, or autofilled. */
  --hf-field:#0d121b;
  --hf-field-focus:#10161d;
  scroll-margin-top:88px;            /* clears the ~88px sticky header */
  font-family:var(--font-body,'Manrope',sans-serif);
  color:var(--ink,#EEEAE1);
}

/* ---- measure ---- */
.hf-enq__inner{ max-width:720px; margin-inline:auto; }

/* ---- head ---- */
.hf-enq__eyebrow{
  display:inline-flex; align-items:center; gap:.65em;
  margin:0 0 clamp(16px,2.4vw,22px);
  font-family:var(--font-display,'Sora',sans-serif);
  font-size:.8125rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--soft,#A7A08E);
}
.hf-enq__eyebrow::before{
  content:""; width:22px; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold,#E4B457));
}
.hf-enq__title{
  margin:0 0 clamp(14px,2vw,20px);
  font-family:var(--font-editorial,'Fraunces',serif);
  font-weight:400;
  font-size:clamp(2rem,4.6vw,3.25rem);
  line-height:1.06; letter-spacing:-.015em;
  color:var(--ink,#EEEAE1);
  text-shadow:0 1px 0 rgba(185,138,56,.22);
}
.hf-enq__title em{ font-style:italic; color:var(--gold,#E4B457); }
.hf-enq__lede{
  margin:0 0 clamp(28px,4vw,40px);
  max-width:52ch;
  font-size:var(--t-body,1.0625rem);
  line-height:1.65; color:var(--soft,#A7A08E);
}

/* ---- card (dark glass) ---- */
.hf-enq__card{
  position:relative;
  overflow:clip;                     /* contains the depth orb; card's own shadow is unaffected */
  padding:clamp(22px,4vw,40px);
  border-radius:20px;
  background:rgba(17,22,32,.55);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
          backdrop-filter:blur(14px) saturate(120%);
  border:1px solid var(--line,rgba(201,182,142,.15));
  box-shadow:
    0 1px 0 rgba(245,213,133,.08) inset,
    0 26px 70px -32px rgba(0,0,0,.62);
}

/* ---- STATIC depth orb (borrowed, dialled way down: no breathing loop) ---- */
.hf-enq__orb{
  position:absolute; z-index:0; pointer-events:none;
  left:50%; top:-14%;
  width:min(560px,120%); aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(185,138,56,.14), transparent 70%);
  filter:blur(42px);
}

/* form content sits above the orb */
.hf-enq__toggle,
.hf-enq__form,
.hf-enq__success{ position:relative; z-index:1; }

/* ---- segmented toggle with sliding pill ---- */
.hf-enq__toggle{
  display:grid; grid-template-columns:1fr 1fr;
  padding:5px;
  margin:0 0 clamp(22px,3vw,30px);
  border-radius:999px;
  background:rgba(8,11,17,.5);
  border:1px solid var(--line,rgba(201,182,142,.15));
}
.hf-enq__pill{
  position:absolute; top:5px; bottom:5px; left:5px;
  width:calc(50% - 5px);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(228,180,87,.16), rgba(228,180,87,.07));
  border:1px solid rgba(228,180,87,.34);
  box-shadow:
    0 1px 0 rgba(245,213,133,.18) inset,
    0 8px 20px -12px rgba(228,180,87,.5);
  transition:transform .42s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
.hf-enq__toggle[data-mode="director"] .hf-enq__pill{ transform:translateX(100%); }
.hf-enq__seg{
  position:relative; z-index:1;
  padding:11px 14px;
  font-family:var(--font-display,'Sora',sans-serif);
  font-size:.95rem; font-weight:600; letter-spacing:.01em;
  color:var(--soft,#A7A08E);
  background:none; border:0; cursor:pointer;
  border-radius:999px;
  transition:color .3s ease;
}
.hf-enq__seg.is-active{ color:var(--gold-hi,#F5D585); }
.hf-enq__seg:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--night,#080B11), 0 0 0 4px var(--gold,#E4B457);
}

/* ---- form grid ---- */
.hf-enq__form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(14px,2.2vw,20px);
}
.hf-enq__field{
  display:flex; flex-direction:column; gap:8px;
  grid-column:1 / -1;
}
.hf-enq__field--half{ grid-column:span 1; }
.hf-enq__field[hidden]{ display:none; }
@media (max-width:560px){
  .hf-enq__form{ grid-template-columns:1fr; }
  .hf-enq__field--half{ grid-column:1 / -1; }
}

/* ---- labels ---- */
.hf-enq__label{
  font-family:var(--font-display,'Sora',sans-serif);
  font-size:.8rem; font-weight:500; letter-spacing:.02em;
  color:var(--soft,#A7A08E);
}
.hf-enq__req{ color:var(--gold,#E4B457); margin-left:3px; }

/* ---- inputs (dark glass) ---- */
.hf-enq__input,
.hf-enq__textarea{
  width:100%;
  padding:14px 16px;
  font-family:var(--font-body,'Manrope',sans-serif);
  font-size:1rem; line-height:1.5;
  color:var(--ink,#EEEAE1);
  background:var(--hf-field);
  border:1px solid var(--line,rgba(201,182,142,.15));
  border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.25) inset;
  transition:border-color .25s ease, box-shadow .25s ease,
             background-color .25s ease, transform .25s ease;
  -webkit-appearance:none; appearance:none;
}
.hf-enq__input::placeholder,
.hf-enq__textarea::placeholder{ color:rgba(167,160,142,.5); }

/* fields settle subtly on focus + gold ring (no browser outline) */
.hf-enq__input:focus,
.hf-enq__textarea:focus{
  outline:none;
  background:var(--hf-field-focus);
  border-color:rgba(228,180,87,.55);
  box-shadow:0 0 0 3px rgba(228,180,87,.16), 0 1px 2px rgba(0,0,0,.25) inset;
  transform:translateY(-1px);
}
.hf-enq__textarea{ min-height:120px; resize:vertical; }

/* invalid state */
.hf-enq__input[aria-invalid="true"],
.hf-enq__textarea[aria-invalid="true"]{
  border-color:rgba(224,112,94,.7);
  box-shadow:0 0 0 3px rgba(224,112,94,.14), 0 1px 2px rgba(0,0,0,.25) inset;
}

/* ---- AUTOFILL NEUTRALISER — keep every field dark glass with light text,
   empty / typed / autofilled all identical. Mask uses the field's own bg. ---- */
.hf-enq input:-webkit-autofill,
.hf-enq input:-webkit-autofill:hover,
.hf-enq input:-webkit-autofill:focus,
.hf-enq textarea:-webkit-autofill,
.hf-enq textarea:-webkit-autofill:hover,
.hf-enq textarea:-webkit-autofill:focus,
.hf-enq select:-webkit-autofill{
  -webkit-text-fill-color:var(--ink,#EEEAE1);
  -webkit-box-shadow:0 0 0 1000px var(--hf-field) inset;
          box-shadow:0 0 0 1000px var(--hf-field) inset;
  caret-color:var(--ink,#EEEAE1);
  border:1px solid var(--line,rgba(201,182,142,.15));
  transition:background-color 9999s ease-in-out 0s;
}
/* autofilled + focused: match the focus surface + keep the gold ring */
.hf-enq input:-webkit-autofill:focus,
.hf-enq textarea:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--hf-field-focus) inset, 0 0 0 3px rgba(228,180,87,.16);
          box-shadow:0 0 0 1000px var(--hf-field-focus) inset, 0 0 0 3px rgba(228,180,87,.16);
  border-color:rgba(228,180,87,.55);
}

/* ---- field-level error text ---- */
.hf-enq__err{
  margin:0;
  font-family:var(--font-display,'Sora',sans-serif);
  font-size:.78rem; letter-spacing:.01em;
  color:var(--danger,#E0705E);
}
.hf-enq__err[hidden]{ display:none; }

/* ---- actions ---- */
.hf-enq__actions{
  grid-column:1 / -1;
  display:flex; flex-direction:column; gap:14px;
  margin-top:6px;
}
.hf-enq__submit{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:16px 30px; border-radius:12px;
  font-family:var(--font-display,'Sora',sans-serif);
  font-weight:600; font-size:1.02rem; letter-spacing:-.01em;
  color:var(--night,#080B11);
  background:linear-gradient(180deg, var(--gold-hi,#F5D585), var(--gold,#E4B457) 55%, var(--gold-deep,#B98A38));
  border:1px solid var(--gold-hi,#F5D585);
  box-shadow:
    0 1px 0 rgba(255,245,220,.5) inset,
    0 16px 38px -18px rgba(228,180,87,.55);
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.hf-enq__submit:hover{
  transform:translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,245,220,.55) inset,
    0 22px 48px -20px rgba(228,180,87,.7);
}
.hf-enq__submit:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--night,#080B11), 0 0 0 4px var(--gold,#E4B457);
}
.hf-enq__submit[disabled]{ opacity:.6; cursor:progress; transform:none; }
.hf-enq__note{
  margin:0;
  font-size:.8rem; color:var(--soft,#A7A08E); text-align:center;
}

/* submit / send error banner */
.hf-enq__formerr{
  grid-column:1 / -1;
  margin:0; padding:12px 14px;
  border-radius:10px;
  font-size:.85rem; line-height:1.5; color:var(--ink,#EEEAE1);
  background:rgba(224,112,94,.1);
  border:1px solid rgba(224,112,94,.4);
}
.hf-enq__formerr a{ color:var(--gold-hi,#F5D585); text-decoration:underline; text-underline-offset:2px; }
.hf-enq__formerr[hidden]{ display:none; }

/* ---- honeypot: visually hidden, kept in the layout flow off-screen ---- */
.hf-enq__hp{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---- collapse form + toggle once submitted ---- */
.hf-enq__form.is-gone,
.hf-enq__toggle.is-gone{ display:none; }

/* ============================================================
   SIGNATURE MOMENT — the success state: slow check-draw
   ============================================================ */
.hf-enq__success{
  text-align:center;
  padding:clamp(16px,3vw,28px) 0 6px;
  opacity:0; transform:translateY(12px);
  transition:opacity .6s ease, transform .6s ease;
}
.hf-enq__success[hidden]{ display:none; }
.hf-enq__success.is-in{ opacity:1; transform:none; }

.hf-enq__check{
  width:76px; height:76px;
  margin:0 auto clamp(18px,2.5vw,24px);
  display:block;
}
.hf-enq__check circle{
  fill:none; stroke:rgba(228,180,87,.4); stroke-width:2.5;
  stroke-dasharray:215; stroke-dashoffset:215;
  transition:stroke-dashoffset .8s cubic-bezier(.2,.7,.2,1);
}
.hf-enq__check path{
  fill:none; stroke:var(--gold-hi,#F5D585); stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:60; stroke-dashoffset:60;
  transition:stroke-dashoffset .55s cubic-bezier(.6,.2,.2,1) .5s;
}
.hf-enq__success.is-drawn .hf-enq__check circle,
.hf-enq__success.is-drawn .hf-enq__check path{ stroke-dashoffset:0; }

.hf-enq__success-title{
  margin:0 0 10px;
  font-family:var(--font-editorial,'Fraunces',serif); font-weight:400;
  font-size:clamp(1.5rem,3vw,2rem); letter-spacing:-.01em;
  color:var(--ink,#EEEAE1);
}
.hf-enq__success-title em{ font-style:italic; color:var(--gold,#E4B457); }
.hf-enq__success-line{
  margin:0 auto; max-width:46ch;
  color:var(--soft,#A7A08E); line-height:1.6;
}
.hf-enq__success-line a{ color:var(--gold-hi,#F5D585); text-decoration:underline; text-underline-offset:2px; }
.hf-enq__success:focus{ outline:none; }

/* ============================================================
   SLIM THEME-MATCHED SCROLLBAR
   Scoped to the section as a safe fallback. To apply page-wide,
   lift this identical block into a global stylesheet and drop the
   ".hf-enq" scope (target html / body / * there instead).
   ============================================================ */
.hf-enq{ scrollbar-width:thin; scrollbar-color:rgba(201,182,142,.22) transparent; }
.hf-enq ::-webkit-scrollbar{ width:8px; height:8px; }
.hf-enq ::-webkit-scrollbar-thumb{ background:rgba(201,182,142,.22); border-radius:999px; }
.hf-enq ::-webkit-scrollbar-track{ background:transparent; }

/* ---- reveal (piggybacks global .reveal; JS also self-triggers) ---- */
.hf-enq .reveal{ opacity:0; transform:translateY(20px);
  transition:opacity .6s ease, transform .6s ease; }
.hf-enq .reveal.in{ opacity:1; transform:none; }

/* ============================================================
   REDUCED MOTION — opacity-only, no draw, no lift.
   (The depth orb is already static — nothing to disable there.)
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .hf-enq__pill{ transition:none; }
  .hf-enq__input, .hf-enq__textarea{ transition:border-color .2s ease, box-shadow .2s ease; }
  .hf-enq__input:focus, .hf-enq__textarea:focus{ transform:none; }
  .hf-enq__submit:hover{ transform:none; }
  .hf-enq .reveal{ opacity:1; transform:none; transition:none; }
  .hf-enq__success{ transition:opacity .3s ease; transform:none; }
  .hf-enq__check circle, .hf-enq__check path{ transition:none; stroke-dashoffset:0; }
}