/* williamtrinh.com — Vietnamese mortgage site
   Generated by build.py — edit build.py / this file, then deploy. */

:root{
  /* v4 palette, taken from the scroll-animation design comp: warm paper ground,
     a single walnut accent (the old navy/gold pair collapses into it) and fully
     square corners. Variable NAMES are deliberately unchanged so all ~90 pages
     of existing rules keep working — only the values moved. */
  --navy:#9a7149;        /* accent walnut (was brand brown)  */
  --navy-2:#62422d;      /* accent, hover                    */
  --navy-3:#8a6340;      /* link walnut                      */
  --gold:#9a7149;        /* one accent now, not a gold pair  */
  --gold-soft:#eee6d9;   /* soft band wash (comp .paths)     */
  --teal:#9a7149;        /* checkmarks etc.                  */
  --orange:#9a7149;
  --ink:#39291f;
  --muted:#77685b;
  --line:#d9cfc0;
  --line-strong:#cabead;
  --bg:#f6f1e8;          /* paper: page / soft band          */
  --white:#fffaf3;       /* raised surface                   */
  --card:#fffaf3;        /* card fill                        */
  --dark:#39291f;        /* dark inverted section            */
  --hero-dark:#39291f;
  /* The comp is square-cornered throughout; only the animation canvas is
     rounded. Kept as tokens so the ~40 rules referencing them all follow. */
  --radius:0px;
  --radius-lg:0px;
  --radius-btn:0px;
  --shadow:0 4px 16px -6px rgba(57,41,31,.12),0 2px 6px rgba(57,41,31,.04);
  --shadow-sm:0 1px 2px rgba(57,41,31,.04),0 1px 3px rgba(57,41,31,.04);
  --shadow-lg:0 24px 48px -18px rgba(57,41,31,.20),0 8px 24px -10px rgba(57,41,31,.10);
  --max:1140px;

  /* Vietnamese needs diacritics that Instrument Serif / Karla do not ship, so
     the VI pages get Playfair Display + Be Vietnam Pro (both full VI coverage)
     and the EN pages get the display faces from the design. See config.py. */
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
html[lang="en"]{
  --serif:'Instrument Serif','Playfair Display',Georgia,serif;
  --sans:'Karla','Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.7;
  font-size:16.5px;
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy-3);text-decoration:none}
a:hover{color:var(--ink);text-decoration:underline}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.18;margin:0 0 .55em;font-weight:400;letter-spacing:-.01em}
h1{font-size:clamp(2.35rem,5vw,4.25rem);line-height:1.05}
h2{font-size:clamp(1.75rem,3.2vw,2.45rem)}
h3{font-size:1.42rem}
h4{font-size:1.1rem}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.narrow{max-width:820px}

/* ---------- Skip link / a11y ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#f6f1e8;padding:10px 16px;z-index:200;font-weight:500}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- Header / nav ----------
   v4: the comp puts a light paper masthead on a hairline rule, so the header
   and footer both invert from the old dark treatment. The only dark ground
   left on the site is the closing contact band. */
header.site{position:sticky;top:0;z-index:100;background:var(--bg);border-bottom:1px solid var(--line)}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:20px;padding-bottom:20px}
header.site .wrap{max-width:1280px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex:none}
.brand:hover{text-decoration:none}
/* Arched monogram from the comp: a rounded-top rule with a short baseline. */
.brand .mark{
  width:44px;height:50px;flex:none;position:relative;
  background:transparent;border:1px solid #9a7955;border-radius:50% 50% 0 0;
  color:var(--ink);display:grid;place-items:center;padding-top:4px;
  font-family:var(--serif);font-weight:400;font-size:1.15rem;letter-spacing:.5px;
}
.brand .mark::after{content:"";position:absolute;bottom:6px;width:21px;height:1px;background:var(--navy)}
.brand b{display:block;color:var(--ink);font-family:var(--serif);font-size:1.42rem;font-weight:400;line-height:1.15;white-space:nowrap;letter-spacing:0}
.brand span{display:block;color:var(--muted);font-size:.7rem;font-weight:400;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;margin-top:3px}

nav.main{display:flex;align-items:center;gap:2px;min-width:0}
nav.main > ul{display:flex;list-style:none;margin:0;padding:0;gap:0}
nav.main a{color:var(--ink);font-weight:400;font-size:.86rem;padding:9px 13px;border-radius:var(--radius-btn);display:block;white-space:nowrap}
nav.main a:hover{color:var(--navy);text-decoration:none}
nav.main a[aria-current="page"]{color:var(--navy)}
.has-sub{position:relative}
.has-sub > button{
  font:inherit;font-weight:400;font-size:.86rem;color:var(--ink);background:none;border:0;cursor:pointer;
  padding:9px 13px;border-radius:var(--radius-btn);display:flex;align-items:center;gap:6px;font-family:inherit;white-space:nowrap;
}
.has-sub > button:hover{color:var(--navy)}
.has-sub > button::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}
.submenu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:290px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:8px;list-style:none;margin:0;display:none;
}
.has-sub.open .submenu{display:block}
.submenu a{color:var(--ink);font-weight:400;font-size:.9rem;padding:9px 12px}
.submenu a:hover{background:var(--gold-soft);color:var(--navy)}

.nav-toggle{display:none;background:none;border:1px solid var(--line-strong);border-radius:var(--radius-btn);padding:10px 11px;cursor:pointer}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--ink);margin:4px 0}

/* ---------- Buttons ---------- */
/* v4: square, ink-on-paper primary with a lift on hover, matching the comp. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:17px 26px;border-radius:var(--radius-btn);font-weight:500;font-size:.92rem;
  letter-spacing:.01em;text-align:center;border:1px solid transparent;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-gold{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-gold:hover{background:var(--navy-2);border-color:var(--navy-2);color:var(--bg)}
.btn-navy{background:var(--navy);color:#fffaf3;border-color:var(--navy)}
.btn-navy:hover{background:var(--navy-2);border-color:var(--navy-2);color:#fffaf3}
.btn-ghost{border-color:rgba(246,241,232,.4);color:#f6f1e8;background:transparent}
.btn-ghost:hover{background:rgba(246,241,232,.12);color:#f6f1e8}
.btn-outline{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn-outline:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
/* the header CTA now sits on paper */
.navbar .btn-gold{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.navbar .btn-gold:hover{background:var(--navy-2);border-color:var(--navy-2);color:var(--bg)}

/* ---------- Hero ----------
   Every inner page opens the way the home page does: paper ground, ink type, and
   the same little house sitting on the right. The picture is one still frame of
   the home page's scroll sequence, so the whole site is one continuous subject.

   /images/hero-house.webp is generated — run
   scripts/williamtrinh-make-hero-image.py, never edit it by hand. It is a 3200x800
   banner whose left run-out and top/bottom edges are already dissolved into
   --bg, which is why the rule below needs no overlay gradient: the flat cream
   ground and the image meet at the same colour on all three sides.

   `auto 100%` scales the banner to the hero's height, so the house never gets
   cropped by a short hero; on viewports wider than the banner's scaled width the
   page colour simply continues to the left, seamlessly.

   The ground under the banner is #f7f2e8, not --bg (#f6f1e8). Lossy WebP encodes
   the banner's flat cream one level brighter, and on a short hero the banner ends
   mid-screen, so that one level becomes a full-height vertical line — exactly the
   kind of edge the eye catches. Matching the encoded value removes it. The same
   1/255 gap against the rest of the page lands on the header rule and the hero's
   own bottom border, where nothing shows. (Lossless encoding would also fix it,
   at 255 KB instead of 45.) */
.hero{
  background:url("/images/hero-house.webp") right center/auto 100% no-repeat,#f7f2e8;
  color:var(--ink);position:relative;overflow:hidden;
  padding:0;  /* .hero .wrap owns the vertical rhythm */
  border-bottom:1px solid var(--line);
}
.hero .wrap{position:relative;z-index:1;padding-top:64px;padding-bottom:64px}
.hero h1{color:var(--ink);max-width:15ch;letter-spacing:-.015em}
/* The copy has to stay off the house on a wide screen. The banner's house sits
   in its right ~30%, so holding the text column to 46% of the wrap keeps a clear
   gap at every width the desktop rule applies to. */
.hero .wrap > *{max-width:min(46%,600px)}
.hero .lede{font-size:1.04rem;line-height:1.65;color:var(--muted);max-width:min(46%,42ch)}
/* Comp treatment: a short accent rule, then the label. Sits on both paper and
   the dark bands, so the colour is re-stated for the inverted contexts. */
.eyebrow{
  display:flex;align-items:center;gap:13px;background:none;border:0;padding:0;color:var(--navy);
  font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:22px;line-height:1.5;
}
.eyebrow::before{content:"";width:27px;height:1px;background:currentColor;flex:none}
.cta-band .eyebrow,.bg-navy .eyebrow{color:#c5ad8f}
.cta-band .eyebrow{justify-content:center}
.hero .btn-row{margin-top:28px}

/* ---------- Sections ---------- */
section{padding:64px 0}
section.tight{padding:44px 0}
.sec-head{max-width:70ch;margin-bottom:34px}
.sec-head p{color:var(--muted)}
.bg-white{background:var(--white)}
.bg-soft{background:var(--card)}
.bg-navy{background:var(--dark);color:#f6f1e8}
.bg-navy h2,.bg-navy h3{color:#f6f1e8}
.bg-navy p{color:rgba(246,241,232,.7)}

/* ---------- Cards ---------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;
  box-shadow:none;display:flex;flex-direction:column;
}
.card h3{margin-bottom:9px;color:var(--ink)}
.card p{color:var(--muted);font-size:.93rem;margin-bottom:14px}
.card .card-link{margin-top:auto;font-weight:500;font-size:.88rem;color:var(--navy)}
.card .card-link::after{content:" →"}
.card .ico{
  width:42px;height:42px;border-radius:var(--radius-btn);background:var(--gold-soft);color:var(--navy);
  display:grid;place-items:center;font-size:1.3rem;margin-bottom:16px;flex:none;
}
.ico svg{width:22px;height:22px;display:block}
.card-link-wrap{text-decoration:none;color:inherit;display:flex}
.card-link-wrap:hover{text-decoration:none}
.card-link-wrap:hover .card{border-color:var(--navy);transition:border-color .15s}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;text-align:center;box-shadow:none}
.stat b{display:block;font-family:var(--serif);font-weight:400;font-size:2.1rem;color:var(--navy);line-height:1.1}
.stat span{font-size:.83rem;color:var(--muted);font-weight:400}

/* ---------- Lists ---------- */
ul.check{list-style:none;padding:0;margin:0;display:grid;gap:10px}
ul.check li{position:relative;padding-left:30px;font-size:.97rem}
ul.check li::before{
  content:"✓";position:absolute;left:0;top:0;color:var(--navy);font-weight:700;
  background:var(--gold-soft);width:21px;height:21px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;margin-top:4px;
}
ul.cols{columns:2;column-gap:34px}
ul.cols li{break-inside:avoid}
ul.plain{list-style:none;padding:0;margin:0;display:grid;gap:8px}
ul.plain li{padding-left:20px;position:relative;font-size:.95rem}
ul.plain li::before{content:"•";position:absolute;left:4px;color:var(--gold);font-weight:800}

/* ---------- Steps ----------
   Rule-and-numeral treatment from the comp rather than boxed cards. */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px;counter-reset:s}
.step{background:none;border:0;border-top:1px solid rgba(57,41,31,.22);border-radius:0;padding:18px 0 0;position:relative;box-shadow:none}
.step::before{
  counter-increment:s;content:"0" counter(s);
  display:block;width:auto;height:auto;background:none;border-radius:0;
  color:var(--navy);font-weight:400;font-size:.86rem;letter-spacing:.04em;margin-bottom:10px;
}
.step h3{font-family:var(--sans);font-weight:500;font-size:1rem;margin-bottom:6px;letter-spacing:0}
.step p{color:var(--muted);font-size:.9rem;margin:0}

/* ---------- FAQ ---------- */
details.faq{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;box-shadow:none}
details.faq summary{
  cursor:pointer;padding:17px 48px 17px 22px;font-weight:500;font-size:1rem;list-style:none;
  display:block;position:relative;color:var(--ink);
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";position:absolute;right:20px;top:15px;font-size:1.3rem;color:var(--navy);line-height:1}
details.faq[open] summary::after{content:"–"}
details.faq .faq-body{padding:0 22px 20px;color:var(--muted);font-size:.95rem}
details.faq .faq-body p:last-child{margin-bottom:0}

/* ---------- Callout ---------- */
.callout{
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--radius);padding:22px 26px;box-shadow:none;
}
.callout.warn{border-left-color:var(--navy)}
.callout p:last-child{margin-bottom:0}

/* ---------- CTA band ---------- */
.cta-band{background:var(--dark);color:#f6f1e8;text-align:center}
.cta-band h2{color:#f6f1e8;max-width:24ch;margin-left:auto;margin-right:auto}
.cta-band p{color:rgba(246,241,232,.7);max-width:60ch;margin-left:auto;margin-right:auto}
.cta-band .btn-row{justify-content:center}
.cta-band .btn-gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.cta-band .btn-gold:hover{background:#D6AC83;border-color:#D6AC83;color:var(--ink)}

/* ---------- Contact form ---------- */
.form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:none}
.field{margin-bottom:16px}
.field label{display:block;font-weight:500;font-size:.88rem;margin-bottom:6px;color:var(--ink)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-btn);font:inherit;font-size:.95rem;background:var(--white);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);background:#fff}
.field .hint{font-size:.8rem;color:var(--muted);margin-top:4px}

/* ---------- Tables ---------- */
table.data{width:100%;max-width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:.93rem;table-layout:fixed}
table.data th,table.data td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);overflow-wrap:anywhere;word-break:break-word}
table.data th{background:var(--card);color:var(--navy);font-weight:500;font-size:.74rem;text-transform:uppercase;letter-spacing:.1em}
table.data tr:last-child td{border-bottom:0}

/* ---------- Footer ----------
   v4: paper ground with hairline rules, inverted from the old dark footer. */
footer.site{background:var(--bg);color:var(--muted);font-size:.9rem;padding:60px 0 0;border-top:1px solid var(--line)}
footer.site h4{color:var(--ink);font-family:var(--sans);font-weight:500;font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;margin-bottom:16px}
footer.site a{color:var(--ink)}
footer.site a:hover{color:var(--navy)}
footer.site ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;padding-bottom:38px}
.foot-brand b{color:var(--ink);font-family:var(--serif);font-weight:400;font-size:1.45rem;display:block;margin-bottom:6px}
.foot-verse{font-family:var(--serif);font-size:1.15rem;color:var(--muted);margin-top:16px}
.foot-social{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.foot-social a{
  width:38px;height:38px;border-radius:var(--radius-btn);background:transparent;display:grid;place-items:center;
  font-size:.74rem;font-weight:500;color:var(--ink);border:1px solid var(--line-strong);
}
.foot-social a:hover{background:var(--gold-soft);text-decoration:none}

.legal{border-top:1px solid var(--line);padding:28px 0 36px;font-size:.77rem;line-height:1.65;color:var(--muted)}
.legal p{margin:0 0 10px}
.legal a{color:var(--ink);text-decoration:underline}
.legal strong{color:var(--ink)}
.legal-badges{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:18px 0}
.badge-ehl{
  border:1px solid var(--line-strong);border-radius:var(--radius-btn);padding:8px 12px;font-size:.7rem;font-weight:500;
  color:var(--muted);display:flex;align-items:center;gap:8px;letter-spacing:.06em;
}
.badge-ehl .house{font-size:1rem}

/* ---------- Breadcrumb ---------- */
.crumbs{font-size:.8rem;color:var(--muted);margin-bottom:16px}
.crumbs a{color:var(--navy-3)}
.crumbs span{opacity:.5;margin:0 7px}

/* ---------- Utilities ---------- */
.center{text-align:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.small{font-size:.86rem;color:var(--muted)}
.pill{display:inline-block;background:var(--card);color:var(--navy);border:1px solid var(--line);border-radius:999px;padding:5px 13px;font-size:.8rem;font-weight:500;margin:0 6px 6px 0}
.lang-note{background:var(--gold-soft);border:1px solid var(--line-strong);border-radius:var(--radius);padding:13px 18px;font-size:.86rem;color:var(--navy-2);margin-bottom:0}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .g4,.stats,.steps{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
  .steps{gap:0 24px}
}
/* Header only has room for the full brand lockup on wide screens; below that the
   tagline is dropped (it is repeated in the top bar and hero) so the navbar can
   stay on a single line instead of wrapping into a 4-line block. */
@media(max-width:1500px){
  .brand > span > span{display:none}
}
@media(max-width:1240px){
  nav.main{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg);flex-direction:column;align-items:stretch;padding:12px;gap:2px;
  }
  nav.main.open{display:flex}
  nav.main > ul{flex-direction:column;gap:2px}
  .has-sub{position:static}
  .submenu{position:static;background:transparent;box-shadow:none;border:0;border-left:1px solid var(--line-strong);border-radius:0;margin:2px 0 8px 14px;padding:0 0 0 8px}
  .submenu a{color:var(--muted)}
  .submenu a:hover{background:var(--gold-soft);color:var(--navy)}
  .has-sub > button{width:100%;justify-content:space-between}
  .navbar .btn-gold{margin-top:6px}
  .nav-toggle{display:block}
  header.site{position:relative}
  .navbar{position:relative}
}
/* Below this width there is no room to stand the copy beside the house, so the
   picture drops under the text. The size is given in px rather than a percentage
   so the band keeps a fixed height as the viewport narrows — a percentage is
   relative to the hero's width, which would make the house balloon on a tablet.
   The wrap then reserves that height plus a little, so the copy always clears
   the roof. */
@media(max-width:860px){
  .hero{background:url("/images/hero-house.webp") right bottom/auto 300px no-repeat,#f7f2e8}
  .hero .wrap{padding-bottom:258px}
  .hero .wrap > *,.hero .lede{max-width:none}
  .hero h1{max-width:18ch}
  .hero .lede{max-width:46ch}
}
@media(max-width:620px){
  .hero{background-size:auto 250px}
  .hero .wrap{padding-bottom:214px}
}
@media(max-width:620px){
  .g2,.g3,.g4,.stats,.steps{grid-template-columns:1fr}
  ul.cols{columns:1}
  .foot-grid{grid-template-columns:1fr}
  section{padding:46px 0}
  .hero .wrap{padding-top:44px}
  .hero .btn-row{flex-direction:column;align-items:stretch}
  .hero .btn-row .btn{width:100%}
  .steps{gap:0}
}
@media print{
  header.site,.cta-band,nav.main,.scroll-story{display:none}
  body{background:#fff}
}

/* ---------- Profile photo ---------- */
.profile-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:none;display:flex;flex-direction:column;
}
.profile-card img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;background:var(--gold-soft)}
.profile-card__body{padding:26px}
.profile-card__body p{color:var(--muted)}
.about-profile{margin-bottom:20px}
.about-profile img{aspect-ratio:1/1;border-radius:0}

/* ---------------------------------------------------- floating language switcher */
.langfab{position:fixed;left:18px;bottom:18px;z-index:120}
.langfab-btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  background:var(--white);color:var(--ink);border:1px solid var(--line-strong);
  border-radius:999px;padding:10px 14px;font:inherit;font-size:13px;line-height:1;
  box-shadow:0 12px 28px -18px rgba(57,41,31,.4);
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.langfab-btn:hover{background:#fff;border-color:var(--navy);box-shadow:0 18px 40px -20px rgba(57,41,31,.4);text-decoration:none}
.langfab-btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.lf-globe{display:grid;place-items:center;color:var(--navy);flex:none}
.langfab-btn svg{width:17px;height:17px;flex:none;color:inherit;stroke-width:1.9}
.lf-cur{font-size:13px;font-weight:500;letter-spacing:0;color:var(--ink)}
.langfab-btn i{font-style:normal;width:auto;height:auto;border:0;transform:none;opacity:1;color:var(--muted);font-size:10px}
.langfab-btn i::before{content:"▾"}
.langfab.open .langfab-btn i{transform:none}
.langfab-menu{
  position:absolute;left:0;bottom:calc(100% + 8px);min-width:180px;
  max-height:280px;overflow-y:auto;
  list-style:none;margin:0;padding:8px;display:none;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 18px 40px -20px rgba(57,41,31,.4);
}
.langfab.open .langfab-menu{display:block}
.langfab-menu li{margin:0}
.langfab-menu a{
  display:block;padding:10px 14px;border-radius:8px;
  color:var(--muted);font-size:14px;font-weight:500;text-decoration:none;
  transition:background .15s,color .15s;
}
.langfab-menu a:hover,.langfab-menu a.is-active{background:var(--gold-soft);color:var(--navy);text-decoration:none}
@media(max-width:620px){
  /* clip, not hidden: `hidden` turns body into a scroll container, which kills
     the home page's position:sticky hero on phones. `clip` clamps without it. */
  html,body{max-width:100%;overflow-x:clip}
  .wrap{padding-left:16px;padding-right:16px}
  .card,.profile-card,.form-card,.callout{max-width:100%}
  table.data{display:block;border:0;background:transparent;border-radius:0;overflow:visible}
  table.data tbody,table.data tr,table.data th,table.data td{display:block;width:100%!important}
  table.data tr{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;overflow:hidden}
  table.data th{border-bottom:0;padding:10px 14px 4px;background:var(--card)}
  table.data td{padding:4px 14px 12px}
  .langfab{left:12px;bottom:12px}
  .langfab-btn{padding:10px 14px;font-size:13px}
  .langfab-menu{max-width:calc(100vw - 24px);max-height:260px}
}
@media print{.langfab{display:none}}

/* ============================================================ v2 additions */
/* ---------- Audience fork (home) ---------- */
.fork{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.fork a{
  text-decoration:none;color:inherit;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px;box-shadow:none;transition:border-color .15s,background .15s;position:relative;overflow:hidden;
}
.fork a:hover{border-color:var(--navy);background:#F3EBE0;text-decoration:none}
/* the slot that used to hold an emoji now carries the comp's category label */
.fork .fk-ico{
  display:block;font-family:var(--sans);font-size:.68rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--navy);margin-bottom:12px;position:relative;
}
.fork h3{font-size:1.7rem;color:var(--ink);margin-bottom:10px;position:relative}
.fork p{color:var(--muted);font-size:.95rem;margin-bottom:16px;position:relative}
.fork .go{margin-top:auto;font-weight:500;font-size:.88rem;color:var(--navy);position:relative}
.fork .go::after{content:" →"}

/* ---------- Blog cards + article ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:none;display:flex;flex-direction:column;transition:border-color .15s;
}
a.post-card:hover{text-decoration:none;border-color:var(--navy)}
.post-card .tag{display:inline-block;align-self:flex-start;font-size:.66rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.12em;padding:4px 10px;border-radius:999px;margin-bottom:14px}
.tag.viet{background:var(--gold-soft);color:var(--navy-2)}
.tag.str{background:#E7DED0;color:#6A4A2C}
.post-card h3{color:var(--ink);font-size:1.28rem;margin-bottom:9px}
.post-card p{color:var(--muted);font-size:.91rem;margin-bottom:14px}
.post-card .meta{margin-top:auto;font-size:.8rem;color:var(--muted)}
.article{max-width:720px;margin:0 auto}
.article h2{margin-top:1.5em;color:var(--ink)}
.article h3{margin-top:1.3em;color:var(--ink)}
.article ul,.article ol{margin:0 0 1.2em;padding-left:1.3em}
.article li{margin-bottom:.5em}
.article .post-head{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.article .post-head .meta{font-size:.84rem;color:var(--muted);margin-top:8px}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.filter-row button{font:inherit;font-weight:500;font-size:.86rem;cursor:pointer;
  padding:8px 16px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--ink)}
.filter-row button.active{background:var(--navy);color:#f6f1e8;border-color:var(--navy)}

/* ---------- About verse ---------- */
.verse-band{background:var(--gold-soft);border-radius:var(--radius);padding:26px 30px;
  border-left:3px solid var(--gold);font-family:var(--serif);font-size:1.25rem;line-height:1.5;
  font-style:italic;color:var(--navy-2)}
.foot-verse{margin:.7em 0 0;font-family:var(--serif);font-style:italic;color:var(--gold);font-size:1rem}

/* ---------- Multi-step intake form ---------- */
.intake-wrap{max-width:640px;margin:0 auto}
.intake-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px;box-shadow:none}
.ring-wrap{display:flex;flex-direction:column;align-items:center;gap:9px;margin-bottom:22px}
.ring{position:relative;width:78px;height:78px}
.ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.ring .ring-bg{fill:none;stroke:var(--line);stroke-width:9}
.ring .ring-fg{fill:none;stroke:var(--gold);stroke-width:9;stroke-linecap:round;
  transition:stroke-dashoffset .5s ease}
.ring-step{margin:0;font-size:.72rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.istep{display:none}
.istep.active{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.istep h2{font-size:1.35rem;text-align:center;margin-bottom:4px}
.istep .sub{text-align:center;color:var(--muted);font-size:.92rem;margin-bottom:22px}
.opt-grid{display:grid;gap:12px}
.opt{display:flex;align-items:center;gap:12px;padding:15px 18px;border:1px solid var(--line-strong);
  border-radius:var(--radius-btn);cursor:pointer;font-weight:500;transition:.12s;background:var(--white)}
.opt:hover{border-color:var(--navy)}
.opt input{width:20px;height:20px;flex:none;accent-color:var(--navy)}
.opt.sel{border-color:var(--navy);background:var(--gold-soft)}
.opt.err-on{border-color:#A33A22;background:#F7EAE4}
.field textarea{width:100%;padding:13px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-btn);
  background:var(--white);font:inherit;resize:vertical}
.field textarea:focus{border-color:var(--navy);background:#fff;outline:none}
[data-consent-err]{color:#A33A22;font-size:.85rem;margin-top:6px;display:none}
.opt .opt-ico{font-size:1.5rem}
.opt .opt-txt b{display:block}
.opt .opt-txt span{font-weight:500;color:var(--muted);font-size:.86rem}
.iform-nav{display:flex;gap:12px;margin-top:26px}
.iform-nav .btn{flex:1}
.iform-nav .btn-back{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.iform-nav .btn-back:hover{background:var(--gold-soft);border-color:var(--line-strong);color:var(--ink)}
.err{color:#A33A22;font-size:.85rem;margin-top:6px;display:none}
.field.bad input,.field.bad select{border-color:#A33A22;background:#F7EAE4}
.field.bad .err{display:block}
.intake-done{text-align:center;padding:20px 0}
.intake-done .big{font-size:3rem;margin-bottom:10px}
.trust-row{display:flex;gap:8px;align-items:center;justify-content:center;
  font-size:.82rem;color:var(--muted);margin-top:18px}
.save-note{text-align:center;font-size:.8rem;color:var(--muted);margin-top:14px}
@media(max-width:620px){.blog-grid{grid-template-columns:1fr}.fork{grid-template-columns:1fr}.intake-card{padding:22px}
  .ring{width:62px;height:62px}.ring-wrap{gap:8px;margin-bottom:18px}}

/* --- language suggestion bar -------------------------------------------
   Ships with [hidden]; revealed by JS only when the visitor's browser
   prefers the other language and they haven't already chosen. Not an
   interstitial — it never blocks content or the crawler. */
.langbar{background:var(--navy);color:#f6f1e8;font-size:.9rem}
.langbar[hidden]{display:none}
.langbar-in{display:flex;align-items:center;gap:14px;padding:9px 0;flex-wrap:wrap}
.langbar-txt{flex:1 1 auto}
.langbar-go{color:#F0DCC4;font-weight:500;text-decoration:underline;white-space:nowrap}
.langbar-go:hover{color:#fff}
.langbar-x{background:none;border:0;color:#f6f1e8;opacity:.7;font-size:1.4rem;
  line-height:1;cursor:pointer;padding:0 4px}
.langbar-x:hover{opacity:1}
@media(max-width:620px){.langbar{font-size:.84rem}.langbar-in{gap:10px}}

/* ============================================================ v4 home story
   Scroll-scrubbed WebP sequence homepage, ported from the design comp. The
   comp's own header/footer are dropped in favour of the site shell so the nav,
   language switcher and legal block stay identical across all ~90 pages.
   Class names that would collide with existing components (.hero, .steps,
   .contact) are prefixed `story-` here. */

/* The comp lets the masthead scroll away so the sticky hero can own the
   viewport. Only the home page has a .scroll-story, so scope it with :has(). */
body:has(.scroll-story) header.site{position:relative}
/* The language FAB is fixed to the bottom-left of every page; on the home page
   that is exactly where the pinned hero's rail puts the scroll prompt. Lift the
   FAB above the rail rather than moving it, so its position stays predictable. */
body:has(.scroll-story) .langfab{bottom:100px}

.scroll-story{height:170vh;position:relative}
.story-hero{
  height:100svh;min-height:650px;max-height:1100px;position:sticky;top:0;
  display:flex;align-items:center;padding:6% 6% 9%;overflow:hidden;
  background:radial-gradient(ellipse at 77% 45%,#e6dbca 0%,var(--bg) 58%);
  color:var(--ink);
}
.story-copy{position:relative;z-index:2;width:49%;pointer-events:none}
.story-copy a{pointer-events:auto}
.story-copy h1{
  font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(56px,7.1vw,110px);line-height:1.01;letter-spacing:-2.5px;margin:0 0 27px;
}
.story-copy h1 em,.story-contact h2 em{font-style:italic;font-weight:400;color:var(--navy)}
/* Vietnamese runs ~40% longer than the English and stacks tone marks above the
   caps, so the comp's display size spills to four lines and the diacritics
   collide at line-height 1.01. Scale down and open the leading for :lang(vi). */
html[lang="vi"] .story-copy h1{font-size:clamp(44px,5vw,74px);letter-spacing:-1px;line-height:1.14}
html[lang="vi"] .story-section h2,
html[lang="vi"] .story-contact h2{line-height:1.16}
html[lang="vi"] .story-section h2{font-size:clamp(34px,4.2vw,60px)}
html[lang="vi"] .story-contact h2{font-size:clamp(36px,5.2vw,70px)}
html[lang="vi"] .path h3,html[lang="vi"] .story-steps h3{line-height:1.2}
.story-copy .intro{color:var(--muted);font-size:1.13rem;line-height:1.65;margin-bottom:30px}
/* The bilingual promise used to be muted 13px text sitting directly on the
   artwork, which turns unreadable at the night end of the scrub. Give it its own
   opaque cream ground so it never depends on what the frame is doing behind it.
   It now sits under the stage caption rather than under the CTA, so it is a
   child of .scene-stack; fit-content keeps the badge as wide as the sentence. */
.scene-stack .bilingual{
  width:fit-content;max-width:100%;
  font-size:.94rem;font-weight:500;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);
  padding:9px 16px;margin:0;line-height:1.35;
}

/* Full-bleed backdrop: the scene spans the whole hero, edge to edge, and the
   copy sits on top of it. The frames are rendered on a flat cream ground that
   matches --bg, so the crop reads as page background rather than as a picture
   in a box. paint() scales the frame to the hero width; see the note there. */
.scene-wrap{
  position:absolute;inset:0;width:auto;height:auto;aspect-ratio:auto;
  transform:none;pointer-events:none;
}
.scene-wrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;opacity:0;transition:opacity .5s}
.scene-wrap.loaded canvas{opacity:1}
.frame-poster{position:absolute;inset:0;display:block}
/* The poster must fit exactly like the canvas or the hero visibly jumps when the
   first decoded frame replaces it. paint() scales to width, which on a landscape
   hero is what cover does; on a portrait hero it is what contain does, anchored
   low to match LETTERBOX_ANCHOR. Keyed off viewport aspect because the hero is
   100svh tall and full width, so the two ratios track each other. */
.scene-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-aspect-ratio:1/1){
  .scene-fallback{object-fit:contain;object-position:50% 100%}
}
.scene-wrap.loaded .frame-poster{display:none}
/* The scene now runs underneath the copy, so the headline needs a ground to sit
   on. ::after, not ::before — it has to paint above the canvas (both z-index 1,
   so DOM order decides) while staying below .story-copy at z-index 2.
   Two layers, held in custom properties so a breakpoint can retune one without
   restating the other:
   --scene-foot grounds .story-bottom. That one is not decoration. The rail spans
   the full width, so its left half sits over the wash and its right half over
   bare artwork — and the artwork turns to night around frame 235, which flips
   the contrast the --muted rail text needs. No single text colour survives both
   ends of the scrub, so the rail gets its own cream ground instead.
   --scene-wash carries the copy, and runs whichever way the copy is stacked. */
.story-hero{
  --scene-foot:linear-gradient(to top,
    rgba(246,241,232,.97) 0,rgba(246,241,232,.95) 90px,
    rgba(246,241,232,.86) 132px,rgba(246,241,232,.45) 178px,
    rgba(246,241,232,0) 232px);
  --scene-wash:linear-gradient(100deg,
    rgba(246,241,232,.98) 0%,rgba(246,241,232,.95) 31%,
    rgba(246,241,232,.72) 45%,rgba(246,241,232,.28) 57%,
    rgba(246,241,232,0) 70%);
}
.story-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--scene-foot),var(--scene-wash);
}
/* The stage caption is a sibling of .scene-wrap, not a child of it — it belongs
   to the page, not to the picture, and nesting it made its position track the
   scene's insets instead of the rail's.
   It carries its own opaque cream ground rather than relying on --scene-foot.
   The foot is a gradient, so how much cream is actually under the caption
   depends on where the rail lands, and the artwork underneath swings from cream
   to night across the scrub — a translucent ground cannot hold contrast at both
   ends. Opaque badge, brown chip, ink caption: legible on every frame.
   Anchored left, with the language FAB anchored right (see .langfab under the
   premium block), so the two can never meet however long a translation runs. */
/* The caption and the bilingual promise are one stack anchored to the rail, so
   the promise always tracks the caption instead of each needing its own offset
   retuned at every breakpoint. Only the wrapper is positioned; the badges below
   are laid out in normal flow inside it. align-items:flex-start so each badge
   shrinks to its own text rather than both stretching to the wider one. */
.scene-stack{
  position:absolute;bottom:104px;left:6%;right:auto;width:auto;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
}
.scene-label{
  display:inline-flex;align-items:center;gap:13px;
  background:var(--bg);border:1px solid var(--line);padding:7px 16px 7px 7px;
}
#scene-number{
  flex:none;background:var(--navy);color:var(--bg);
  font-size:.875rem;font-weight:600;letter-spacing:.08em;line-height:1;padding:7px 10px;
}
#scene-caption{font-size:.94rem;line-height:1.25;color:var(--ink)}

.story-bottom{
  position:absolute;bottom:32px;left:6%;right:6%;border-top:1px solid var(--line);
  padding-top:25px;display:flex;justify-content:space-between;align-items:center;gap:25px;
  font-size:.75rem;color:var(--muted);z-index:2;
}
.scroll-prompt{display:flex;gap:14px;align-items:center;color:var(--muted)}
.scroll-prompt:hover{color:var(--navy);text-decoration:none}
.scroll-icon{display:grid;place-items:center;width:23px;height:32px;border:1px solid var(--line-strong);border-radius:15px;font-size:.9rem;flex:none}
.chapter-progress{display:flex;align-items:center;gap:12px;font-size:.75rem}
.chapter-progress i{display:block;width:110px;height:1px;background:var(--line-strong)}
.chapter-progress b{display:block;width:0;height:1px;background:var(--navy)}
#motion-toggle{border:0;background:none;color:var(--muted);font-size:.75rem;font-family:inherit;padding:10px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
#motion-toggle:hover{color:var(--navy)}

/* Reduced motion / no-canvas: unstick the hero and let the page flow. */
body.reduced .scroll-story{height:auto}
body.reduced .story-hero{position:relative}
body.reduced .chapter-progress{display:none}

/* ---------- Goals fork ---------- */
.story-section{padding:110px 8%}
.story-section > .section-top{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;margin-bottom:55px}
.story-section .section-top .eyebrow{padding-top:18px;margin-bottom:0}
.story-section h2{font-family:var(--serif);font-weight:400;font-size:clamp(38px,5.2vw,75px);line-height:1.08;letter-spacing:-1px;margin:0}
.story-section .section-top h2{width:54%}
.paths{background:var(--gold-soft)}
.paths-layout{display:grid;grid-template-columns:1.04fr 1fr;gap:7%}
.home-photo{position:relative;min-height:500px;overflow:hidden}
.home-photo img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.home-photo::after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,rgba(34,22,13,.5))}
.home-photo > span{position:absolute;z-index:1;bottom:28px;left:28px;color:#fff;font-family:var(--serif);font-size:2rem}
.path{display:block;padding:28px 0 35px;border-top:1px solid var(--line-strong);color:inherit}
.path:hover{text-decoration:none;color:inherit}
.path:last-of-type{padding-bottom:0}
.path-number{font-size:.72rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.path h3{font-family:var(--serif);font-weight:400;font-size:2.4rem;line-height:1.08;margin:20px 0 13px;letter-spacing:-.5px}
.path p{font-size:1rem;color:var(--muted);line-height:1.5;margin-bottom:24px}
.text-link{font-size:.86rem;display:flex;gap:36px;align-items:center;color:var(--ink)}
.text-link b{font-size:1.35rem;font-weight:400;transition:transform .2s}
.path:hover .text-link b,a:hover > .text-link b{transform:translate(4px,-4px)}
.loan-strip{border-top:1px solid var(--line-strong);margin-top:46px;padding-top:24px;display:flex;justify-content:space-between;gap:20px;font-size:.86rem;color:var(--muted)}
.loan-strip a{color:var(--ink)}
.loan-strip a span{padding-left:22px}

/* ---------- Process ---------- */
.process{display:grid;grid-template-columns:1fr 1fr;gap:8%}
.process-heading .text-link{margin-top:34px}
.story-steps{list-style:none;padding:0;margin:0}
.story-steps li{display:flex;gap:30px;padding:24px 0;border-bottom:1px solid var(--line)}
.story-steps li:first-child{padding-top:0}
.story-steps li > span{font-size:.72rem;color:var(--navy);padding-top:8px;flex:none}
.story-steps h3{font-family:var(--serif);font-weight:400;font-size:1.85rem;margin:0 0 8px}
.story-steps p{font-size:.94rem;color:var(--muted);margin:0;line-height:1.5}

/* ---------- Closing contact band ---------- */
.story-contact{text-align:center;background:var(--ink);color:var(--bg);padding:100px 8% 95px}
.story-contact .eyebrow{justify-content:center;color:#c5ad8f}
.story-contact h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6.5vw,88px);line-height:1.06;margin:0}
.story-contact em{color:#cba77a}
.story-contact > p{font-size:1.05rem;line-height:1.6;color:#d3c3b1;margin:28px auto 32px;max-width:46ch}
.story-contact .email{display:block;color:#cbbba8;font-size:.86rem;margin-top:24px}
.story-contact .email:hover{color:var(--bg)}

@media(min-width:1600px){.story-copy{width:48%}}
@media(max-width:1240px){
  .story-hero{padding-left:5%}
  .story-section{padding:80px 6%}
  .chapter-progress{display:none}
  .path h3{font-size:2.1rem}
  .home-photo{min-height:480px}
}
@media(max-width:900px){
  /* Keep the sticky scrub on phones — the animation is the design. The scene is
     full width here too, but the frame letterboxes rather than cropping, so it
     sits as a band in the lower half and the copy stacks above it rather than
     on top of it. The wash therefore only has to soften the seam where the band
     begins (~46% down), not carry the whole headline, so it fades out early. */
  .scroll-story{height:160svh}
  /* --rail-space is the strip at the foot of the hero reserved for .story-bottom.
     It drives both the hero's own padding and the scene's bottom inset, so the
     two can't drift apart. That inset matters more than it looks: the hero is
     100svh but starts ~140px down the page (masthead + nav), so its true bottom
     hangs below the fold until the sticky kicks in. Anchoring the band to the
     raw hero bottom hid the base of the house on first paint. */
  .story-hero{
    --rail-space:124px;
    --scene-foot:linear-gradient(to top,
      rgba(246,241,232,.97) 0,rgba(246,241,232,.9) 62px,
      rgba(246,241,232,.55) 96px,rgba(246,241,232,.15) 130px,
      rgba(246,241,232,0) 165px);
    --scene-wash:linear-gradient(178deg,
      rgba(246,241,232,.96) 0%,rgba(246,241,232,.88) 28%,
      rgba(246,241,232,.55) 40%,rgba(246,241,232,.18) 48%,
      rgba(246,241,232,0) 56%);
    height:100svh;min-height:600px;max-height:950px;
    display:flex;flex-direction:column;padding:42px 7% var(--rail-space);
  }
  .scene-wrap{bottom:var(--rail-space)}
  .story-copy{width:100%;flex:none}
  .story-copy h1{font-size:clamp(44px,11vw,72px);letter-spacing:-1.3px;margin-bottom:17px}
  .story-copy h1 br{display:none}
  .story-copy .intro{font-size:1rem;line-height:1.55;margin-bottom:20px}
  .story-copy .intro br{display:none}
  /* Here the caption really is below the animation: the scene band stops at
     --rail-space, so anything under that line sits on bare page cream. Keep it
     inside that strip, above the rail. */
  /* 80px, not the old caption-only 72px: the stack is anchored by its lower
     edge, so the bilingual badge is what sits nearest the rail now. At 72px it
     cleared by -4px and the rail's border-top cut through the badge. */
  .scene-stack{bottom:80px;left:7%;right:auto;gap:8px}
  .scene-label{gap:8px;padding:6px 13px 6px 6px}
  /* Too narrow for prompt + toggle side by side, and the FAB already owns this
     corner. Scrolling needs no prompt on a phone; keep the motion control. */
  .scroll-prompt{display:none}
  .story-bottom{left:7%;right:7%;bottom:16px;padding-top:12px;gap:5px;justify-content:flex-end}
  body:has(.scroll-story) .langfab{bottom:18px}
  .story-section{padding:62px 7%}
  .story-section > .section-top{display:block;margin-bottom:32px}
  .story-section .section-top .eyebrow{padding:0;margin-bottom:20px}
  .story-section .section-top h2{width:100%}
  .paths-layout{display:flex;flex-direction:column;gap:28px}
  .home-photo{min-height:340px}
  .home-photo > span{font-size:1.7rem;left:22px;bottom:22px}
  .path h3{font-size:2rem;margin-top:16px}
  .path p br{display:none}
  .loan-strip{flex-direction:column;gap:10px}
  .process{grid-template-columns:1fr;gap:38px}
  .story-steps h3{font-size:1.6rem}
  .story-contact{padding:70px 7% 66px}
}
/* Short handsets: the copy plus a usable scene will not both fit at the comp's
   type sizes, and the Vietnamese copy runs longer still. Trim the display type
   and the chrome rather than letting the scene overflow its minimum height and
   push the caption down into the bottom rail. */
@media(max-width:900px) and (max-height:690px){
  /* Not enough height for the copy and the band to sit apart, so here the copy
     really does land on the artwork and the wash has to carry it the way it does
     on desktop — hold it near-opaque past the bilingual line before releasing. */
  /* 104px was enough for the rail alone; the caption now shares that strip and
     needs ~39px of it, so the reserved space grows or the badge clips the base
     of the house. 14px of scene height is the cheaper trade. */
  .story-hero{
    --rail-space:118px;padding-top:26px;
    --scene-wash:linear-gradient(178deg,
      rgba(246,241,232,.97) 0%,rgba(246,241,232,.93) 38%,
      rgba(246,241,232,.85) 48%,rgba(246,241,232,.35) 58%,
      rgba(246,241,232,0) 68%);
  }
  .story-copy h1{font-size:38px;letter-spacing:-1px;margin-bottom:12px}
  .story-copy .intro{font-size:.94rem;line-height:1.5;margin-bottom:14px}
  .scene-stack .bilingual{padding:7px 13px;font-size:.875rem}
}
/* Narrow handsets. Must come after the short-handset block above, because it
   overrides --rail-space and the cascade here is source order.
   Under ~375px the caption badge and the language pill cannot share a line: the
   badge wants ~208px and only ~176px is free beside the pill, and the
   Vietnamese pill is wider again. Give the caption its own row above the pill
   rather than shrinking the type past the 12px floor. The offset also covers
   the pre-sticky window — until the hero pins, anything anchored to it sits a
   masthead's height (~46px) low, which is what dragged the caption into the
   pill in the first place. */
@media(max-width:400px){
  .story-hero{--rail-space:156px}
  .scene-stack{bottom:100px}
  .scene-label{padding:5px 11px 5px 5px}
  #scene-number{font-size:.75rem;letter-spacing:.06em;padding:6px 8px}
  #scene-caption{font-size:.875rem}
  .scene-stack .bilingual{font-size:.8125rem;padding:6px 11px}
}
@media(max-height:700px) and (min-width:901px){
  .story-hero{min-height:570px}
  .story-copy h1{font-size:64px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scene-wrap canvas,.btn,.text-link b{transition:none}
}

/* ================================================================== premium
   The gold orbit on the primary call to action. It carries .premium-cta, which
   config.hero() and the home page put on exactly one button per page, so the
   class is the gate — there is no page-level scope to keep in sync. The motion
   is driven by assets/premium-glow.js, which flips one attribute on <html>
   rather than starting a second animation loop.

   The angle has to be a registered custom property: an unregistered one is a
   string, and strings do not interpolate, so the gradient would jump from 0 to
   360 instead of orbiting. */
@property --wt-glow-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes wt-border-orbit{to{--wt-glow-angle:360deg}}

/* Static bronze edge. This is what a browser without @property or conic
   gradients keeps, and it has to look deliberate on its own. */
.premium-cta{
  --wt-button-fill:var(--ink);
  position:relative;border:2px solid #aa8356;background:var(--wt-button-fill);
  color:#fff8ec;box-shadow:0 0 12px rgba(199,154,111,.14);
  /* .btn transitions `background`, which fights an animated gradient. Keep the
     lift, drop the colour tween. */
  transition:box-shadow 180ms ease,transform .2s ease;
}
@supports (background:conic-gradient(from 0deg,#805b39,#efd19e)){
  /* Two backgrounds in one box: a flat fill clipped to the padding box, and the
     rotating gradient clipped to the border box. The border is transparent, so
     only the gradient shows through it — the interior never moves. */
  .premium-cta{
    border-color:transparent;
    background:
      linear-gradient(var(--wt-button-fill),var(--wt-button-fill)) padding-box,
      conic-gradient(from var(--wt-glow-angle),
        #805b39 0deg,#805b39 220deg,#bd9461 275deg,
        #f5deb4 305deg,#bd9461 330deg,#805b39 360deg) border-box;
    animation:wt-border-orbit 8s linear infinite;animation-play-state:paused;
  }
  /* Paused by default and started by the script, so a hero that is offscreen,
     on a hidden tab, or paused by the user costs nothing. */
  html[data-wt-glow-running="true"] .premium-cta{
    animation-play-state:running;
  }
}
.premium-cta:hover{
  --wt-button-fill:#4b3425;color:#fff8ec;box-shadow:0 0 16px rgba(199,154,111,.23);
}
.premium-cta:focus-visible{outline:3px solid #a67948;outline-offset:4px}
/* The closing band inverts everything: the button sits on --dark, so the ink
   fill above would be the same colour as the ground — a glowing ring around a
   hole. It takes a paper face instead, which the bronze orbit reads against and
   which gives the label far more contrast than the old gold-on-gold did.
   `background` is restated because the no-@supports fallback paints it directly
   and .cta-band .btn-gold would otherwise win on specificity. */
.cta-band .premium-cta{
  --wt-button-fill:#f6f1e8;background:var(--wt-button-fill);color:var(--ink);
  box-shadow:0 0 18px rgba(199,154,111,.20);
}
.cta-band .premium-cta:hover{--wt-button-fill:#e6dcc9;color:var(--ink)}

/* One gold pass over the caption when the chapter changes. The badge is opaque
   and clips the sweep, so the gold never spills onto the artwork. */
body.wt-premium-home .scene-label{isolation:isolate;overflow:hidden}
body.wt-premium-home .scene-label::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;transform:translateX(-120%);
  background:linear-gradient(110deg,transparent 25%,
    rgba(210,174,118,.18) 44%,rgba(235,199,144,.45) 50%,
    rgba(210,174,118,.18) 56%,transparent 75%);
}
body.wt-premium-home .scene-label > span{position:relative;z-index:1}
@keyframes wt-chapter-sweep{
  0%{opacity:0;transform:translateX(-120%)}
  15%{opacity:1}
  85%{opacity:1}
  100%{opacity:0;transform:translateX(120%)}
}
body.wt-premium-home .scene-label.is-sweeping::after{animation:wt-chapter-sweep 900ms ease-out 1}

/* The FAB moves to the right on this page only, so the bottom-left column
   (caption over scroll prompt) is left alone. .langfab-menu opens upward from
   the button, so right-anchoring it keeps it on screen. */
body.wt-premium-home .langfab{
  left:auto;right:max(18px,env(safe-area-inset-right));
  bottom:max(18px,env(safe-area-inset-bottom));
}
body.wt-premium-home .langfab-menu{left:auto;right:0;max-width:calc(100vw - 36px)}
/* Pause motion sits at the right end of the rail and the FAB now overlaps that
   corner, so reserve the FAB's width plus a gap. */
body.wt-premium-home .story-bottom{padding-right:150px}
@media(max-width:900px){
  /* The rail is only Pause motion down here — send it to the left rather than
     reserving space it would then have to sit inside. */
  body.wt-premium-home .story-bottom{padding-right:0;justify-content:flex-start}
  body.wt-premium-home #motion-toggle{margin-right:auto;font-size:.8rem;padding-left:0}
}

@media(prefers-reduced-motion:reduce){
  body.wt-premium-home .story-copy .premium-cta,
  body.wt-premium-home .scene-label.is-sweeping::after{animation:none;transition:none}
}
@media(forced-colors:active){
  body.wt-premium-home .story-copy .premium-cta{
    background:ButtonFace;color:ButtonText;border-color:ButtonText;
    box-shadow:none;animation:none;
  }
  body.wt-premium-home .scene-label::after{display:none}
}