/* ============================================================
   Halloran & Vance — Trial Attorneys
   Concept: "Every case is a matter of record."
   The hero IS the proof — a self-drawing verdict ledger on a lit
   document, floated over scorched-oak dark. Single gold accent on
   the dark ground; oxblood + ink on the paper. System-font stack,
   no CDN, no FOUC.
   All body text verified >= 4.5:1 on its ground (see notes inline).
   ============================================================ */

:root{
  /* warm-shifted near-black (R>G>B): scorched-oak, sworn-document dark */
  --bg:        #0d0b09;
  --bg-2:      #12100c;   /* lifted panels */
  --bg-3:      #17140f;   /* deepest inset / inputs */
  --ink-hi:    #f2ece0;   /* warm parchment text  (~15:1 on bg) */
  --ink:       #d9d0c1;   /* body on dark         (~11:1 on bg) */
  --ink-mid:   #a99e8c;   /* secondary on dark    (~7:1  on bg-3) */
  --ink-low:   #948a7a;   /* low-emphasis on dark (~5.4:1 on bg-3) */

  /* single accent — deep gold. Three tiers so text always clears AA on dark. */
  --gold:      #c9a24b;   /* brand — large / decorative + text on dark (~8:1) */
  --gold-mid:  #d9b463;   /* large display italics (~10:1) */
  --gold-hi:   #e7c67e;   /* small accent text on dark (~12:1) */
  --gold-num:  #b98f3e;   /* small gold numerals/labels on dark (~6:1) */
  --gold-deep: #8f6f2f;   /* engraving lines / borders ONLY (not text) */

  --line:      rgba(201,162,75,.16);   /* drafted gold hairline */
  --line-2:    rgba(242,236,224,.08);  /* neutral hairline */

  /* ledger paper — aged cream lit from above */
  --paper:     #e9dfc8;
  --paper-hi:  #f2e9d4;
  --paper-lo:  #ded1b4;
  --pk-ink:    #241f16;               /* primary ink on paper (~12:1) */
  --pk-ink2:   #5b4e35;               /* labels on paper      (~6:1)  */
  --pk-line:   rgba(36,31,22,.16);
  --pk-dot:    rgba(36,31,22,.34);
  --oxblood:   #7c2d2a;               /* the red line / totals (~7:1 on paper) */

  --serif:  'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', 'Hoefler Text', Georgia, 'Times New Roman', serif;
  --sans:   system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:   ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, 'Cascadia Mono', 'Roboto Mono', Consolas, monospace;

  --ease:   cubic-bezier(.22, 1, .36, 1);

  --pad:    clamp(20px, 5vw, 84px);
  --maxw:   1220px;
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .2vw, 1.08rem);
  line-height:1.62;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
::selection{background:var(--gold); color:#12100c}

a{color:inherit; text-decoration:none}
img,canvas,svg{display:block; max-width:100%}

.skip{
  position:fixed; left:12px; top:-60px; z-index:200;
  background:var(--gold); color:#12100c; padding:10px 16px; border-radius:2px;
  font-weight:600; transition:top .2s var(--ease);
}
.skip:focus{top:12px}

:focus-visible{
  outline:2px solid var(--gold-hi);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}

/* ---------- shared type atoms ---------- */
.kicker{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold-hi);
  padding-left:.3em;      /* optical re-center for tracked caps */
}
.sec-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2rem, 1.2rem + 3.4vw, 3.5rem);
  line-height:1.04;
  letter-spacing:-.015em;
  color:var(--ink-hi);
  text-wrap:balance;
  margin-top:.55rem;
  max-width:17ch;
}
.sec-title em{font-style:italic; color:var(--gold-mid)}
.sec-head{margin-bottom:clamp(2.4rem,5vw,4rem)}
.sec-head--split{
  display:grid; gap:clamp(1rem,3vw,3rem);
  grid-template-columns:1fr;
  align-items:end;
}
.sec-head__aside{color:var(--ink-mid); max-width:44ch; text-wrap:pretty}
@media (min-width:860px){
  .sec-head--split{grid-template-columns:1.1fr .9fr}
  .sec-title{font-size:clamp(2.4rem,1rem+3.8vw,3.6rem)}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em; justify-content:center;
  font-family:var(--sans); font-weight:600; font-size:.96rem;
  letter-spacing:.005em;
  padding:.92em 1.5em; border-radius:2px;
  border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:transform .5s var(--ease), background-color .5s var(--ease),
             color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.btn--gold{
  background:var(--gold); color:#17130a;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 10px 30px -12px rgba(201,162,75,.6);
}
.btn--gold:hover{background:var(--gold-hi); transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 16px 38px -12px rgba(201,162,75,.7)}
.btn--gold:disabled{opacity:.7; cursor:default; transform:none}
.btn--ghost{border-color:var(--line); color:var(--ink-hi); background:rgba(255,255,255,.015)}
.btn--ghost:hover{border-color:var(--gold); color:var(--gold-hi); transform:translateY(-2px)}
.btn--block{width:100%; padding-block:1.05em; font-size:1rem}
.btn__ico{display:inline-flex; opacity:.9}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background-color .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(13,11,9,.74);
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  border-bottom-color:var(--line-2);
}
.nav__in{
  max-width:1360px; margin-inline:auto;
  padding:.85rem var(--pad);
  display:flex; align-items:center; gap:1.5rem;
}
.brand{display:flex; align-items:center; gap:.7rem; color:var(--gold)}
.brand__seal{display:inline-flex; color:var(--gold)}
.brand__word{display:flex; flex-direction:column; line-height:1}
.brand__name{
  font-family:var(--serif); font-weight:600; font-size:1.06rem;
  letter-spacing:.01em; color:var(--ink-hi);
}
.brand__sub{
  font-family:var(--sans); font-size:.56rem; font-weight:600; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold-hi); margin-top:.34em; padding-left:.3em;
}
.nav__links{display:none; margin-left:auto; gap:1.9rem}
.nav__links a{
  font-size:.86rem; color:var(--ink-mid); letter-spacing:.01em;
  position:relative; padding:.3em 0;
  transition:color .4s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width .4s var(--ease);
}
.nav__links a:hover{color:var(--ink-hi)}
.nav__links a:hover::after{width:100%}
.btn--nav{padding:.62em 1.1em; font-size:.84rem; border:1px solid var(--line); color:var(--ink-hi)}
.btn--nav:hover{border-color:var(--gold); color:var(--gold-hi); background:rgba(201,162,75,.06)}
.btn__short{display:none}
@media (max-width:620px){
  .btn__full{display:none}
  .btn__short{display:inline}
}
@media (min-width:1000px){
  .nav__links{display:flex; margin-right:.4rem}
}
@media (max-width:999px){ .btn--nav{margin-left:auto} }
@media (max-width:560px){
  .nav__in{gap:.75rem}
  .brand__seal svg{width:30px; height:30px}
  .brand__name{font-size:.92rem}
  .brand__sub{font-size:.5rem; letter-spacing:.24em}
  .btn--nav{padding:.58em .8em; font-size:.74rem}
}
@media (max-width:440px){
  .brand__sub{display:none}
  .brand__name{font-size:.86rem}
  .nav__in{gap:.5rem}
  .btn--nav{font-size:.68rem; padding:.5em .64em}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(5rem,11vh,7.5rem) var(--pad) clamp(2.5rem,6vh,4rem);
  overflow:hidden;
  isolation:isolate;
}
.hero__seal{position:absolute; inset:0; width:100%; height:100%; z-index:-2; opacity:.62}
.hero__scrim{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(90% 80% at 20% 44%, rgba(13,11,9,.35) 0%, rgba(13,11,9,.62) 55%, rgba(13,11,9,.9) 100%),
    linear-gradient(180deg, rgba(13,11,9,.72) 0%, rgba(13,11,9,.3) 26%, rgba(13,11,9,.5) 72%, var(--bg) 100%);
}
.hero__in{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  display:grid; gap:clamp(2.4rem,5vw,4.5rem);
  grid-template-columns:1fr; align-items:center;
}
.hero__kicker{margin-bottom:1.5rem}
.hero__title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(3rem, 1.6rem + 8vw, 6.4rem);
  line-height:.95;
  letter-spacing:-.028em;
  color:var(--ink-hi);
  margin-bottom:1.7rem;
}
.hero__title .line{display:block; overflow:hidden; padding-bottom:.05em}
.hero__title .line__i{display:block}
.js .hero__title .line__i{transform:translateY(112%)}
.hero__title em{font-style:italic; color:var(--gold-mid)}
.hero.is-in .line__i{transform:translateY(0)}
.js .hero__title .line:nth-child(1) .line__i{transition:transform 1.2s var(--ease) .12s}
.js .hero__title .line:nth-child(2) .line__i{transition:transform 1.2s var(--ease) .28s}

.hero__lede{
  font-family:var(--serif);
  font-size:clamp(1.16rem, 1rem + .6vw, 1.45rem);
  line-height:1.5; color:var(--ink);
  max-width:44ch; text-wrap:pretty; letter-spacing:0;
}
.hero__cta{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem}
.hero__foot{
  margin-top:1.6rem; color:var(--ink-mid); font-size:.9rem;
  max-width:46ch; text-wrap:pretty;
}
.hero__badge{
  position:absolute; left:var(--pad); bottom:clamp(1.2rem,3.5vh,2.2rem);
  display:none; align-items:center; gap:.7rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  color:var(--ink-mid); text-transform:uppercase;
}
.hero__badge .dot{width:5px; height:5px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold)}

@media (min-width:940px){
  .hero__in{grid-template-columns:.92fr 1.08fr}
  .hero__badge{display:flex}
}

/* ============================================================
   THE VERDICT LEDGER (hero centerpiece)
   ============================================================ */
.ledger{
  position:relative; isolation:isolate;
  width:100%; max-width:600px; margin-inline:auto;
  padding:clamp(1.05rem,2.4vw,1.6rem) clamp(1.25rem,3vw,2rem);
  border-radius:3px;
  color:var(--pk-ink);
  overflow:hidden;
  background:
    radial-gradient(130% 70% at 50% -14%, var(--paper-hi), rgba(242,233,212,0) 55%),
    linear-gradient(178deg, var(--paper) 0%, var(--paper) 52%, var(--paper-lo) 100%);
  border:1px solid #cdba8f;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 60px 100px -55px rgba(0,0,0,.9),
    0 22px 55px -34px rgba(0,0,0,.65);
}
.ledger__grain{position:absolute; inset:0; width:100%; height:100%; z-index:0; mix-blend-mode:multiply; opacity:.55; pointer-events:none}
.ledger__frame{
  position:absolute; inset:6px; z-index:1; pointer-events:none;
  border:1px solid rgba(124,45,42,.24); border-radius:1px;
}
.ledger__head,.ledger__cols,.ledger__rows,.ledger__total,.ledger__note{position:relative; z-index:2}

.ledger__head{
  display:flex; align-items:center; gap:.9rem;
  padding-bottom:.68rem; border-bottom:1px solid var(--pk-line);
}
.ledger__seal{display:inline-flex; color:var(--oxblood); flex:none}
.ledger__kicker{
  font-family:var(--serif); font-weight:600; font-size:clamp(1.02rem,.9rem+.5vw,1.2rem);
  color:var(--pk-ink); letter-spacing:.005em; line-height:1.1;
}
.ledger__tag{
  font-family:var(--serif); font-style:italic; font-size:.9rem;
  color:var(--pk-ink2); margin-top:.15rem;
}

.ledger__cols{
  display:grid; grid-template-columns:2.4rem minmax(0,1fr) auto;
  column-gap:clamp(.5rem,2vw,1rem);
  padding:.5rem 0 .3rem; border-bottom:1px solid var(--pk-line);
}
.ledger__cols span{
  font-family:var(--sans); font-size:.58rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--pk-ink2);
}
.ledger__cols span:last-child{text-align:right}

.ledger__rows{list-style:none; position:relative}
/* the ledger margin rule — the classic red line */
.ledger__rows::before{
  content:""; position:absolute; top:0; bottom:0;
  left:calc(2.4rem + (clamp(.5rem,2vw,1rem) / 2) - .5px);
  width:1px; background:rgba(124,45,42,.32);
}
.lrow{
  display:grid; grid-template-columns:2.4rem minmax(0,1fr) auto;
  column-gap:clamp(.5rem,2vw,1rem); align-items:baseline;
  padding:.46rem 0;
  border-bottom:1px dotted var(--pk-dot);
}
.js .lrow{opacity:0; clip-path:inset(0 100% 0 -3px)}
.lrow{transition:opacity .5s var(--ease), clip-path .7s var(--ease)}
.js .lrow.is-written{opacity:1; clip-path:inset(0 -3px 0 -3px)}
.lrow__yr{
  font-family:var(--mono); font-size:.8rem; color:var(--pk-ink2);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.lrow__matter{
  font-family:var(--serif); font-size:clamp(.98rem,.92rem+.2vw,1.06rem);
  line-height:1.22; color:var(--pk-ink); min-width:0;
}
.lrow__disp{
  display:block; margin-top:.11rem;
  font-family:var(--sans); font-size:.6rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--pk-ink2);
}
.lrow__disp--v{color:var(--oxblood)}
.lrow__disp--v::before{content:"\2726\00a0"; font-size:.85em}
.lrow__amt{
  font-family:var(--mono); font-weight:600;
  font-size:clamp(.98rem,.9rem+.35vw,1.12rem);
  color:var(--pk-ink); text-align:right; align-self:center;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}

.ledger__total{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin-top:.1rem; padding-top:.68rem;
  border-top:3px double var(--pk-ink);
}
.ledger__total-k{
  font-family:var(--sans); font-size:.64rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--pk-ink2);
  line-height:1.35;
}
.ledger__total-num{
  font-family:var(--mono); font-weight:700;
  font-size:clamp(1.9rem,1rem+3.6vw,2.9rem);
  letter-spacing:-.03em; color:var(--oxblood);
  font-variant-numeric:tabular-nums; line-height:1;
  min-width:5.4ch; text-align:right;
}
.ledger__note{
  margin-top:.9rem; font-family:var(--sans);
  font-size:.68rem; line-height:1.5; color:var(--pk-ink2);
  text-wrap:pretty;
}

/* ============================================================
   PRACTICE AREAS — asymmetric mosaic
   ============================================================ */
.practice{padding:clamp(4.5rem,10vh,8rem) 0; background:var(--bg-2); border-top:1px solid var(--line-2)}
.areas{
  display:grid; gap:1px; background:var(--line-2);
  border:1px solid var(--line-2); border-radius:3px; overflow:hidden;
  grid-template-columns:1fr;
}
.area{
  background:var(--bg);
  padding:clamp(1.7rem,3.4vw,2.6rem);
  display:flex; flex-direction:column; gap:.7rem;
  position:relative;
  transition:background-color .5s var(--ease);
}
.area:hover{background:var(--bg-3)}
.area__no{font-family:var(--mono); font-size:.8rem; color:var(--gold-num); letter-spacing:.1em}
.area__t{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.4rem,1.1rem+1vw,1.85rem); line-height:1.08;
  color:var(--ink-hi); letter-spacing:-.01em;
}
.area__d{color:var(--ink-mid); font-size:.96rem; max-width:46ch; text-wrap:pretty}
.area__tag{
  margin-top:auto; padding-top:.6rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em;
  color:var(--gold-hi); text-transform:uppercase;
}
.area--lg .area__t{font-size:clamp(1.7rem,1.2rem+1.8vw,2.4rem)}
@media (min-width:760px){
  .areas{grid-template-columns:1.25fr .75fr}
  .area--lg{grid-row:span 2}
  .area--wide{grid-column:1 / -1}
}

/* ============================================================
   THE FIRM
   ============================================================ */
.firm{padding:clamp(4.5rem,11vh,9rem) 0; border-top:1px solid var(--line-2)}
.firm__grid{display:grid; gap:clamp(2.4rem,6vw,5rem); grid-template-columns:1fr; align-items:start}
.portrait{
  position:relative; aspect-ratio:4/5;
  border:1px solid var(--line);
  border-radius:3px;
  background:
    radial-gradient(120% 80% at 50% 18%, rgba(201,162,75,.1), transparent 60%),
    linear-gradient(160deg, var(--bg-3), var(--bg));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.1rem; overflow:hidden;
}
.portrait::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(201,162,75,.05) 6px 7px),
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(201,162,75,.035) 6px 7px);
  mask:radial-gradient(circle at 50% 40%, #000 30%, transparent 72%);
  -webkit-mask:radial-gradient(circle at 50% 40%, #000 30%, transparent 72%);
}
.portrait__mono{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(3.4rem,10vw,5.2rem); letter-spacing:.06em;
  color:var(--gold); position:relative;
  text-shadow:0 2px 30px rgba(201,162,75,.25);
}
.portrait__rule{width:54px; height:1px; background:var(--gold-deep); position:relative}
.portrait__meta{
  display:flex; flex-direction:column; align-items:center; gap:.25rem; position:relative;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--ink-mid);
  text-transform:uppercase; text-align:center;
}
.creds{list-style:none; margin-top:1.6rem; display:flex; flex-direction:column; gap:.7rem}
.creds li{display:flex; align-items:baseline; gap:.7rem; color:var(--ink); font-size:.94rem}
.creds li span{color:var(--gold); font-size:.6rem; line-height:1.4}
.firm__body{max-width:56ch}
.firm__p{color:var(--ink-mid); margin-top:1.3rem; text-wrap:pretty}
.firm__p:first-of-type{margin-top:1.6rem}
.firm__sign{margin-top:2rem; display:flex; flex-direction:column; gap:.2rem}
.firm__signname{
  font-family:var(--serif); font-style:italic; font-size:1.7rem;
  color:var(--ink-hi); letter-spacing:.01em;
}
.firm__signrole{
  font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-hi); padding-left:.1em; margin-top:.2rem;
}
@media (min-width:880px){
  .firm__grid{grid-template-columns:.82fr 1.18fr}
}

/* credential marks strip */
.marks{
  margin-top:clamp(2.6rem,6vw,4.4rem);
  padding-top:clamp(2rem,4vw,2.8rem);
  border-top:1px solid var(--line-2);
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.4rem,3vw,2.4rem);
}
.mark{display:flex; flex-direction:column; align-items:center; gap:.8rem; text-align:center}
.mark__seal{color:var(--gold); display:inline-flex}
.mark__seal svg{filter:drop-shadow(0 2px 10px rgba(201,162,75,.18))}
.mark__cap{
  font-family:var(--sans); font-size:.78rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-hi); line-height:1.35;
}
.mark__cap span{display:block; font-weight:500; letter-spacing:.04em; color:var(--ink-mid); margin-top:.25rem; text-transform:none; font-size:.74rem}
@media (min-width:720px){ .marks{grid-template-columns:repeat(4,1fr)} }

/* ============================================================
   TESTIMONIAL
   ============================================================ */
.quote{
  padding:clamp(4.5rem,11vh,8.5rem) 0;
  background:var(--bg-2);
  border-top:1px solid var(--line-2);
  position:relative;
}
.quote__in{position:relative; max-width:940px; padding-left:clamp(0px,2vw,2rem)}
.quote__in::before{
  content:""; position:absolute; left:0; top:.4rem; bottom:3.4rem; width:2px;
  background:linear-gradient(180deg, var(--gold), transparent);
  display:none;
}
.quote__mark{
  position:absolute; top:-.4em; left:-.02em;
  font-family:var(--serif); font-size:11rem; line-height:1;
  color:var(--gold); opacity:.16; pointer-events:none;
}
.quote__body{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.5rem, 1rem + 2.4vw, 2.6rem);
  line-height:1.3; letter-spacing:-.012em;
  color:var(--ink-hi); text-wrap:pretty; position:relative;
}
.quote__body em{font-style:italic; color:var(--gold-mid)}
.quote__by{margin-top:1.8rem; display:flex; flex-direction:column; gap:.25rem}
.quote__name{font-family:var(--sans); font-size:.8rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-hi)}
.quote__case{font-family:var(--mono); font-size:.8rem; color:var(--gold-hi); letter-spacing:.02em}
@media (min-width:720px){ .quote__in::before{display:block} }

/* ============================================================
   PROCESS — vertical timeline
   ============================================================ */
.process{padding:clamp(4.5rem,10vh,8rem) 0; border-top:1px solid var(--line-2)}
.process__grid{display:grid; gap:clamp(2.6rem,5vw,4.5rem); grid-template-columns:1fr; align-items:start}
.process__lede{color:var(--ink-mid); margin-top:1.3rem; max-width:38ch; text-wrap:pretty}
.tline{list-style:none; position:relative; padding-left:3.6rem}
.tline::before{
  content:""; position:absolute; left:1.1rem; top:.6rem; bottom:.6rem; width:1px;
  background:linear-gradient(180deg, var(--gold-deep), rgba(143,111,47,.15));
}
.tstep{position:relative; padding-bottom:clamp(1.8rem,3.5vw,2.6rem)}
.tstep:last-child{padding-bottom:0}
.tstep__n{
  position:absolute; left:-3.6rem; top:-.1rem;
  width:2.2rem; height:2.2rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg); border:1px solid var(--line);
  font-family:var(--mono); font-size:.82rem; font-weight:500;
  color:var(--gold-num); font-variant-numeric:tabular-nums;
}
.tstep__t{
  font-family:var(--serif); font-weight:600; font-size:clamp(1.35rem,1.1rem+.9vw,1.7rem);
  color:var(--ink-hi); letter-spacing:-.01em;
}
.tstep__d{color:var(--ink-mid); font-size:.98rem; margin-top:.4rem; max-width:52ch; text-wrap:pretty}
@media (min-width:900px){
  .process__grid{grid-template-columns:.8fr 1.2fr}
  .process__head{position:sticky; top:6rem}
}

/* ============================================================
   REVIEW / CLOSING CTA + FORM
   ============================================================ */
.review{
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(4.5rem,11vh,9rem) 0;
  border-top:1px solid var(--line);
  background:var(--bg-3);
}
.review__texture{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(80% 90% at 82% 18%, rgba(201,162,75,.08), transparent 55%),
    repeating-linear-gradient(58deg, transparent 0 13px, rgba(201,162,75,.028) 13px 14px),
    linear-gradient(180deg, var(--bg-3), rgba(13,11,9,.85));
}
.review__grid{display:grid; gap:clamp(2.4rem,5vw,4.5rem); grid-template-columns:1fr; align-items:start}
.review__p{color:var(--ink); margin-top:1.3rem; max-width:46ch; text-wrap:pretty; font-size:1.04rem}
.review__call{
  display:inline-flex; flex-direction:column; gap:.15rem; margin-top:2rem;
  padding:1rem 1.4rem; border:1px solid var(--line); border-radius:3px;
  background:rgba(201,162,75,.04);
  transition:border-color .4s var(--ease), background-color .4s var(--ease), transform .4s var(--ease);
}
.review__call:hover{border-color:var(--gold); background:rgba(201,162,75,.08); transform:translateY(-2px)}
.review__callk{font-family:var(--sans); font-size:.62rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-hi)}
.review__calln{font-family:var(--serif); font-weight:600; font-size:1.9rem; color:var(--ink-hi); letter-spacing:.01em; font-variant-numeric:tabular-nums; margin-top:.15rem}
.review__callh{font-size:.82rem; color:var(--ink-mid); margin-top:.1rem}

/* form */
.cform{
  background:linear-gradient(160deg, var(--bg-2), var(--bg));
  border:1px solid var(--line);
  border-radius:4px;
  padding:clamp(1.6rem,3.4vw,2.4rem);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
}
.cform__title{
  font-family:var(--serif); font-weight:600; font-size:1.45rem;
  color:var(--ink-hi); margin-bottom:1.3rem;
}
.field{margin-bottom:1rem; display:flex; flex-direction:column; gap:.4rem}
.field--row{margin-bottom:0; display:grid; gap:1rem; grid-template-columns:1fr}
.field--row > .field{margin-bottom:1rem}
label{
  font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-mid);
}
input,select,textarea{
  width:100%; font-family:var(--sans); font-size:.98rem;
  color:var(--ink-hi); background:var(--bg-3);
  border:1px solid var(--line-2); border-radius:2px;
  padding:.8em .9em; line-height:1.4;
  transition:border-color .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
}
textarea{resize:vertical; min-height:80px}
input::placeholder,textarea::placeholder{color:var(--ink-low)}
select{appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 18px) center, calc(100% - 13px) center;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--gold);
  background:var(--bg-2);
  box-shadow:0 0 0 3px rgba(201,162,75,.14);
}
input[aria-invalid="true"]{border-color:#d0674a; background:rgba(208,103,74,.06)}
input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(208,103,74,.18)}
.field__err{
  font-family:var(--sans); font-size:.76rem; letter-spacing:.01em;
  color:#e79a80; margin-top:-.05rem;
}
.cform__fine{font-size:.78rem; color:var(--ink-low); margin-top:1rem; line-height:1.5}
.cform__fine span{color:var(--gold-hi); display:block; margin-top:.3rem}
.cform__ok{
  margin-top:1.1rem; padding:1rem 1.1rem; border-radius:3px;
  display:flex; gap:.8rem; align-items:flex-start;
  background:rgba(201,162,75,.1); border:1px solid var(--gold-deep);
  color:var(--ink-hi); font-size:.92rem; line-height:1.5;
}
.cform__ok strong{color:var(--gold-hi); display:block; font-size:1rem; margin-bottom:.15rem}
.cform__ok a{color:var(--gold-hi); text-decoration:underline; text-underline-offset:2px}
.cform__ok-mark{
  flex:none; width:2rem; height:2rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--gold); color:#17130a;
}
@media (min-width:520px){ .field--row{grid-template-columns:1fr 1fr} }
@media (min-width:920px){ .review__grid{grid-template-columns:1fr 1fr} }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{padding:clamp(3.5rem,8vh,5.5rem) 0 2.5rem; border-top:1px solid var(--line-2); background:var(--bg)}
.foot__in{display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:1fr}
.foot__brand .brand__name{font-family:var(--serif); font-size:1.3rem; letter-spacing:.01em; color:var(--ink-hi)}
.foot__brand .brand__name span{color:var(--gold-hi); font-size:.62em; font-family:var(--sans); font-weight:600; letter-spacing:.1em}
.foot__brand p{color:var(--ink-low); margin-top:.7rem; max-width:34ch; font-size:.9rem}
.foot__cols{display:grid; gap:1.8rem; grid-template-columns:repeat(3,1fr)}
.foot__h{
  display:block; font-family:var(--sans); font-size:.64rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-hi); margin-bottom:.9rem;
}
.foot__cols a,.foot__cols span{
  display:block; color:var(--ink-mid); font-size:.88rem; margin-bottom:.5rem;
  transition:color .3s var(--ease);
}
.foot__cols a:hover{color:var(--gold-hi)}
.foot__legal{
  margin-top:clamp(2.5rem,6vw,4rem); padding-top:1.6rem; border-top:1px solid var(--line-2);
  display:flex; flex-direction:column; gap:.6rem;
  color:var(--ink-low); font-size:.76rem; line-height:1.5;
}
@media (min-width:720px){
  .foot__in{grid-template-columns:1.1fr 1.6fr}
}
@media (min-width:820px){
  .foot__legal{flex-direction:row; justify-content:space-between; gap:2rem}
  .foot__legal span:last-child{max-width:52ch; text-align:right}
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.js .rv{opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.js .rv.in{opacity:1; transform:none}

/* ============================================================
   REDUCED MOTION — a complete, settled composition
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms !important; animation-duration:.001ms !important; animation-iteration-count:1 !important}
  .js .rv{opacity:1; transform:none}
  .js .hero__title .line__i{transform:none}
  .js .lrow{opacity:1; clip-path:none}
  .btn:hover,.review__call:hover,.area:hover{transform:none}
}