/* ============================================================
   RUNYAN LAW FIRM — Redesign Concept · shared stylesheet
   Concept by Full Circle MSP.
   Brand: deep pine green + brand green (#3e9d58, from the logo)
   with a restrained brass-gold metallic accent.
   ============================================================ */

:root{
  --ink:        #0c2719;   /* deep pine green */
  --ink-2:      #123a25;
  --ink-3:      #1b5536;
  --paper:      #fbf9f4;   /* warm off-white */
  --paper-2:    #eef3ec;   /* soft green-tinted off-white */
  --green:      #3e9d58;   /* brand green — from the firm's logo */
  --green-soft: #79c98f;
  --green-deep: #1f6b3c;
  --green-glow: rgba(62,157,88,.35);
  --gold:       #c9a24b;   /* metallic accent */
  --gold-soft:  #e3cd92;
  --gold-glow:  rgba(201,162,75,.35);
  --text:       #16241b;
  --muted:      #586b5f;
  --line:       rgba(12,39,25,.10);
  --white:      #ffffff;
  --radius:     18px;
  --shadow-sm:  0 4px 18px rgba(8,30,18,.08);
  --shadow-md:  0 18px 50px rgba(8,30,18,.16);
  --shadow-lg:  0 40px 90px rgba(8,30,18,.28);
  --ease:       cubic-bezier(.16,1,.3,1);
  /* Type: Caslon — the typeface legal documents have been set in since the 1700s.
     Display for headlines, Text for subheads/quotes, Source Serif for reading,
     Archivo for UI, and one script face reserved for Tom's signature only. */
  --display:    "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --serif:      "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --body:       "Source Serif 4", Georgia, serif;
  --sans:       "Archivo", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --script:     "Herr Von Muellerhoff", cursive;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
/* overflow-x:clip (not hidden) keeps phones from expanding the layout viewport
   when off-screen elements (menu drawer) park beyond the right edge */
html{ overflow-x:clip; }
body{
  font-family:var(--body);
  color:var(--text);
  background:var(--paper);
  line-height:1.7;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--green); color:#fff; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:700; line-height:1.12; letter-spacing:0; }
h1,h2{ font-family:var(--display); font-weight:400; }

/* Keyboard focus — visible everywhere, brass on dark surfaces */
:focus-visible{ outline:2px solid var(--green-deep); outline-offset:3px; border-radius:4px; }
.hero :focus-visible,.page-hero :focus-visible,.process :focus-visible,.stats :focus-visible,
.contact :focus-visible,footer :focus-visible,header.on-dark :focus-visible,.topbar :focus-visible{
  outline-color:var(--gold-soft);
}

.wrap{ width:min(1180px,92vw); margin-inline:auto; }
.eyebrow{
  font-family:var(--sans); font-weight:600; font-size:.74rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
  display:inline-flex; align-items:center; gap:.6rem;
}
/* eyebrow rules as tapered ink strokes — part of the signed-document motif */
.eyebrow::before{ content:""; width:34px; height:3px; border-radius:99px; background:linear-gradient(90deg,transparent,var(--gold) 55%); display:inline-block; }
.eyebrow.center::after{ content:""; width:34px; height:3px; border-radius:99px; background:linear-gradient(90deg,var(--gold) 45%,transparent); display:inline-block; }

.btn{
  --bg:var(--green); --fg:#fff;
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--sans); font-weight:600; font-size:.95rem;
  padding:.95rem 1.6rem; border-radius:999px; border:1px solid transparent;
  background:var(--bg); color:var(--fg); cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s;
  position:relative; white-space:nowrap;
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 14px 30px var(--green-glow); }
.btn svg{ width:16px; height:16px; transition:transform .35s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn.ghost{ --bg:transparent; --fg:var(--white); border-color:rgba(255,255,255,.30); }
.btn.ghost:hover{ background:rgba(255,255,255,.08); box-shadow:none; }
.btn.dark{ --bg:var(--ink); --fg:#fff; }
.btn.dark:hover{ box-shadow:var(--shadow-md); }
.btn.gold{ --bg:var(--gold); --fg:var(--ink); }
.btn.gold:hover{ box-shadow:0 14px 30px var(--gold-glow); }

/* ---------- Intro loader — the firm signs the page in ---------- */
.loader{
  position:fixed; inset:0; z-index:200; pointer-events:none;
  background:linear-gradient(160deg,#0c2719 0%,#123a25 70%,#08200f 100%);
  display:grid; place-items:center;
  visibility:hidden; transform:translateY(-101%);
  transition:transform .65s var(--ease), visibility 0s .65s;
}
html.boot{ overflow:hidden; }
html.boot .loader{ visibility:visible; transform:none; pointer-events:auto; transition:none; }
.loader-inner{ display:flex; flex-direction:column; align-items:center; gap:1.2rem; }
.loader-inner img{ height:74px; width:auto; opacity:0; }
html.boot .loader-inner img{ animation:riseIn .5s var(--ease) .1s both; }
.loader svg.ink{ position:static; width:180px; height:12px; }
html.boot .loader svg.ink path{ animation:inkdraw .55s var(--ease) .45s forwards; }

/* ---------- Announcement bar ---------- */
.topbar{
  background:var(--ink); color:#dfeee4; font-size:.82rem;
  display:flex; justify-content:center; gap:1.6rem; align-items:center;
  padding:.55rem 1rem; flex-wrap:wrap; position:relative; z-index:60;
}
.topbar a{ display:inline-flex; align-items:center; gap:.45rem; color:#dfeee4; transition:color .25s; font-weight:600; }
.topbar a:hover{ color:var(--green-soft); }
.topbar .pill{
  background:rgba(62,157,88,.18); color:var(--green-soft);
  border:1px solid rgba(62,157,88,.42); padding:.18rem .7rem; border-radius:999px;
  font-weight:600; letter-spacing:.04em; font-size:.72rem;
}
.topbar svg{ width:14px; height:14px; }
.topbar .sep{ opacity:.3; }
@media(max-width:680px){ .topbar .sep,.topbar .hide-sm{ display:none; } }

/* ---------- Header / Nav ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:var(--ink); /* solid at top so no body-color strip shows above the hero */
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
  padding:.5rem 0;
}
header.scrolled{
  background:rgba(251,249,244,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 var(--line), var(--shadow-sm);
}
.nav{ display:flex; align-items:center; gap:2rem; padding:.4rem 0; }
.brand{ display:flex; align-items:center; gap:.75rem; flex:0 0 auto; }
.monogram{
  width:46px; height:46px; border-radius:12px; flex:0 0 auto;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(145deg,var(--green),var(--green-deep));
  font-family:var(--serif); font-weight:700; font-size:1.5rem;
  box-shadow:0 6px 16px var(--green-glow); position:relative; overflow:hidden;
}
.monogram::after{ content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 55%); }
.brand-mark{ width:48px; height:48px; flex:0 0 auto; display:block; filter:drop-shadow(0 6px 14px var(--green-glow)); }
@media(max-width:600px){ .brand-mark{ width:42px; height:42px; } }
/* The firm's real logo — reverse (white) on the dark nav, dark version once it goes light on scroll */
.brand-logo{ height:54px; width:auto; display:block; }
.brand .logo-on-light{ display:none; }
header.scrolled .brand .logo-on-dark{ display:none; }
header.scrolled .brand .logo-on-light{ display:block; }
@media(max-width:600px){ .brand-logo{ height:44px; } }
.brand .name{ font-family:var(--serif); font-weight:600; font-size:1.18rem; color:var(--ink); line-height:1; letter-spacing:.01em; white-space:nowrap; }
.brand .sub{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:600; white-space:nowrap; }
header.on-dark .brand .name{ color:#fff; }
header.on-dark .brand .sub{ color:rgba(255,255,255,.65); }

.navlinks{ display:flex; align-items:center; gap:1.8rem; margin-left:auto; }
.navlinks a.link{ font-size:.92rem; font-weight:500; color:var(--ink); position:relative; padding:.3rem 0; white-space:nowrap; }
header.on-dark .navlinks a.link{ color:rgba(255,255,255,.85); }
.navlinks a.link::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--green);
  transition:width .35s var(--ease);
}
.navlinks a.link:hover::after,
.navlinks a.link.active::after{ width:100%; }
.navlinks a.link.active{ color:var(--green); }
header.on-dark .navlinks a.link.active{ color:var(--green-soft); }
.nav-cta{ display:flex; align-items:center; gap:.8rem; }
/* Compact buttons in the header bar (the full-size .btn is for page bodies) */
.nav .btn{ padding:.6rem 1.15rem; font-size:.85rem; }
.nav .btn svg{ width:14px; height:14px; }
.menu-btn{ display:none; background:none; border:0; cursor:pointer; width:42px; height:42px; }
.menu-btn span{ display:block; height:2px; width:24px; background:var(--ink); margin:5px auto; transition:.3s; border-radius:2px; }
header.on-dark .menu-btn span{ background:#fff; }

/* hide the wordy tagline before the nav gets cramped */
@media(max-width:1120px){ .brand .sub{ display:none; } .navlinks{ gap:1.4rem; } }

@media(max-width:940px){
  .navlinks{
    position:fixed; inset:0 0 0 auto; width:min(330px,84vw);
    background:var(--ink); flex-direction:column; align-items:flex-start;
    padding:6rem 2rem 2rem; gap:1.4rem; transform:translateX(100%); visibility:hidden;
    transition:transform .45s var(--ease), visibility 0s .45s; box-shadow:var(--shadow-lg); z-index:55; margin-left:0;
  }
  .navlinks.open{ transform:translateX(0); visibility:visible; transition:transform .45s var(--ease), visibility 0s 0s; }
  .navlinks a.link{ color:#fff; font-size:1.1rem; }
  .navlinks a.link.active{ color:var(--green-soft); }
  .navlinks .btn{ width:100%; justify-content:center; }
  .menu-btn{ display:block; z-index:56; }
  .nav-cta .btn:not(.menu-target){ display:none; }
  body.menu-open{ overflow:hidden; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; color:#eaf4ec; overflow:hidden;
  background:
    linear-gradient(0deg, rgba(8,26,16,.55) 0%, rgba(8,26,16,0) 42%),
    linear-gradient(100deg, rgba(8,26,16,.95) 0%, rgba(9,30,18,.80) 34%, rgba(9,30,18,.46) 62%, rgba(9,30,18,.34) 100%),
    url('hero.png') center/cover no-repeat,
    linear-gradient(160deg,#0c2719 0%, #123a25 55%, #08200f 100%);
  padding:5.5rem 0 6rem; margin-top:-4.5rem; padding-top:9rem;
}
.hero .orb{ display:none; } /* photo provides the visual interest now */
.hero .orb{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; pointer-events:none; }
.hero .orb.a{ width:460px; height:460px; background:radial-gradient(circle,rgba(201,162,75,.5),transparent 70%); top:-120px; right:-80px; animation:float1 14s var(--ease) infinite alternate; }
.hero .orb.b{ width:520px; height:520px; background:radial-gradient(circle,rgba(45,140,80,.7),transparent 70%); bottom:-160px; left:-120px; animation:float2 18s var(--ease) infinite alternate; }
@keyframes float1{ to{ transform:translate(-40px,40px) scale(1.1); } }
@keyframes float2{ to{ transform:translate(50px,-30px) scale(1.08); } }
.hero::after{
  content:""; position:absolute; inset:0; opacity:.05; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:54px 54px; mask-image:radial-gradient(circle at 50% 30%,#000,transparent 75%);
}
.hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:3.5rem; align-items:center; }
.hero .badge-row{ display:flex; align-items:center; gap:.6rem; margin-bottom:1.6rem; }
.hero .stars{ color:var(--gold); letter-spacing:2px; }
.hero .badge-row span{ font-size:.85rem; color:rgba(234,244,236,.75); }
.hero h1{ font-size:clamp(2.6rem,5.4vw,4.5rem); color:#fff; margin-bottom:1.4rem; }
.hero h1 .em{ font-style:italic; color:var(--gold-soft); }

/* ============ The signature device: a pen stroke that signs the page ============ */
.ink-wrap{ position:relative; display:inline-block; white-space:nowrap; }
svg.ink{ position:absolute; left:-2%; bottom:-.16em; width:104%; height:.34em; overflow:visible; pointer-events:none; }
svg.ink path{
  fill:none; stroke:var(--gold); stroke-width:5; stroke-linecap:round; opacity:.92;
  stroke-dasharray:230; stroke-dashoffset:230;
}
body.loaded svg.ink path{ animation:inkdraw .8s var(--ease) 1s forwards; }
@keyframes inkdraw{ to{ stroke-dashoffset:0; } }

/* Orchestrated hero entrance — one sequence, then the page is calm */
@keyframes riseIn{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
body.loaded .hero .badge-row{ animation:riseIn .7s var(--ease) .05s both; }
body.loaded .hero h1{ animation:riseIn .8s var(--ease) .18s both; }
body.loaded .hero p.lede{ animation:riseIn .7s var(--ease) .45s both; }
body.loaded .hero .cta-row{ animation:riseIn .7s var(--ease) .6s both; }
body.loaded .hero .trust{ animation:riseIn .7s var(--ease) .78s both; }
body.loaded .page-hero .crumb{ animation:riseIn .7s var(--ease) .05s both; }
body.loaded .page-hero .eyebrow{ animation:riseIn .7s var(--ease) .12s both; }
body.loaded .page-hero h1{ animation:riseIn .8s var(--ease) .2s both; }
body.loaded .page-hero p.lede{ animation:riseIn .7s var(--ease) .45s both; }
body.loaded .page-hero .cta-row{ animation:riseIn .7s var(--ease) .6s both; }
.hero p.lede{ font-size:1.16rem; color:rgba(234,244,236,.82); max-width:34rem; margin-bottom:2.2rem; }
.hero .cta-row{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.6rem; }
.hero .trust{ display:flex; gap:1.8rem; flex-wrap:wrap; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.12); }
.hero .trust .t{ display:flex; flex-direction:column; }
.hero .trust .t b{ font-family:var(--serif); font-size:1.5rem; color:#fff; line-height:1; }
.hero .trust .t small{ font-size:.78rem; color:rgba(234,244,236,.6); letter-spacing:.04em; }

/* hero glass card */
.quote-card{
  position:relative; background:rgba(9,28,17,.62); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border-radius:22px; padding:2rem; box-shadow:var(--shadow-lg);
  animation:rise 1s var(--ease) .35s both;
}
.quote-card h3{ color:#fff; font-size:1.35rem; margin-bottom:.4rem; }
.quote-card p.s{ font-size:.9rem; color:rgba(234,244,236,.7); margin-bottom:1.4rem; }
.field{ margin-bottom:.9rem; }
.field label{ display:block; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(234,244,236,.6); margin-bottom:.35rem; }
.field input,.field select{
  width:100%; padding:.8rem 1rem; border-radius:12px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#fff; font-family:var(--sans); font-size:.95rem; outline:none;
  transition:border .25s, background .25s;
}
.field input::placeholder{ color:rgba(234,244,236,.4); }
.field input:focus,.field select:focus{ border-color:var(--green-soft); background:rgba(255,255,255,.1); }
.field select option{ color:#0c2719; }
.quote-card .btn{ width:100%; justify-content:center; margin-top:.4rem; }
.quote-card .fineprint{ text-align:center; font-size:.74rem; color:rgba(234,244,236,.5); margin-top:.8rem; }
@keyframes rise{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:translateY(0); } }

.scroll-cue{ position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%); z-index:3; color:rgba(255,255,255,.5); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.scroll-cue .mouse{ width:22px; height:36px; border:2px solid rgba(255,255,255,.4); border-radius:14px; position:relative; }
.scroll-cue .mouse::after{ content:""; position:absolute; left:50%; top:7px; width:3px; height:7px; background:var(--green-soft); border-radius:2px; transform:translateX(-50%); animation:scrolly 1.6s infinite; }
@keyframes scrolly{ 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 100%{opacity:0;transform:translate(-50%,12px)} }

@media(max-width:900px){
  .hero-grid{ grid-template-columns:1fr; gap:2.5rem; }
  .quote-card{ order:2; }
  .scroll-cue{ display:none; }
}

/* ---------- Inner-page hero ---------- */
.page-hero{
  position:relative; color:#eaf4ec; overflow:hidden;
  background:
    radial-gradient(1000px 500px at 85% -10%, rgba(201,162,75,.16), transparent 60%),
    radial-gradient(800px 500px at 0% 120%, rgba(31,107,60,.85), transparent 55%),
    linear-gradient(160deg,#0c2719 0%, #123a25 60%, #08200f 100%);
  margin-top:-4.5rem; padding:8.5rem 0 4.5rem;
}
.page-hero .inner{ position:relative; z-index:2; max-width:42rem; }
.crumb{ display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:rgba(234,244,236,.6); margin-bottom:1.2rem; }
.crumb a{ transition:color .25s; } .crumb a:hover{ color:var(--green-soft); }
.crumb .sep{ opacity:.5; }
.page-hero h1{ font-size:clamp(2.3rem,4.6vw,3.6rem); color:#fff; margin:.6rem 0 1.1rem; }
.page-hero h1 .em{ font-style:italic; color:var(--gold-soft); }
.page-hero p.lede{ font-size:1.14rem; color:rgba(234,244,236,.82); margin-bottom:2rem; }
.page-hero .cta-row{ display:flex; gap:1rem; flex-wrap:wrap; }

/* ---------- Credibility strip ---------- */
.strip{ background:var(--ink-2); color:#d4e3d9; padding:1.4rem 0; }
.strip .wrap{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.strip .item{ display:flex; align-items:center; gap:.7rem; font-size:.92rem; font-weight:500; }
.strip .item svg{ width:22px; height:22px; color:var(--gold); flex:0 0 auto; }

/* ---------- Section scaffolding ---------- */
section.block{ padding:6.5rem 0; position:relative; }
.sec-head{ max-width:46rem; margin-bottom:3.2rem; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head h2{ font-size:clamp(2rem,3.6vw,3rem); color:var(--ink); margin:1rem 0 1rem; }
.sec-head p{ color:var(--muted); font-size:1.08rem; }

/* reveal */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; } .reveal.d5{ transition-delay:.4s; }

/* ---------- Stats band ---------- */
.stats{ background:linear-gradient(160deg,#0c2719,#1b5536); color:#fff; }
.stats .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; text-align:center; }
.stats .stat{ padding:1.4rem 1rem; position:relative; }
.stats .stat:not(:last-child)::after{ content:""; position:absolute; right:0; top:20%; height:60%; width:1px; background:rgba(255,255,255,.12); }
.stats .num{ font-family:var(--display); font-size:clamp(2.4rem,5vw,3.6rem); color:var(--gold-soft); line-height:1; font-weight:400; }
.stats .lab{ margin-top:.7rem; font-size:.86rem; letter-spacing:.04em; color:rgba(255,255,255,.72); }
@media(max-width:760px){ .stats .grid{ grid-template-columns:repeat(2,1fr); } .stats .stat:nth-child(2)::after{ display:none; } }

/* ---------- Cards ---------- */
.services{ background:var(--paper); }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.cards.two{ grid-template-columns:repeat(2,1fr); }
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:2rem 1.9rem;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
  position:relative; overflow:hidden;
}
.card::before{ content:""; position:absolute; left:0; top:0; height:3px; width:0; background:linear-gradient(90deg,var(--green),var(--green-soft)); transition:width .5s var(--ease); }
.card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-md); border-color:transparent; }
.card:hover::before{ width:100%; }
.card .ico{ width:56px; height:56px; border-radius:14px; display:grid; place-items:center; margin-bottom:1.3rem;
  background:linear-gradient(150deg,var(--paper-2),#fff); border:1px solid var(--line); color:var(--ink-3); transition:.45s; }
.card:hover .ico{ background:linear-gradient(150deg,var(--green),var(--green-deep)); color:#fff; }
.card .ico svg{ width:28px; height:28px; }
.card h3{ font-size:1.3rem; color:var(--ink); margin-bottom:.6rem; }
.card p{ color:var(--muted); font-size:.97rem; margin-bottom:1.1rem; }
.card .more{ font-size:.86rem; font-weight:600; color:var(--green-deep); display:inline-flex; align-items:center; gap:.4rem; letter-spacing:.02em; }
.card .more svg{ width:14px; height:14px; transition:transform .35s var(--ease); }
.card:hover .more svg{ transform:translateX(4px); }
.card .tag{ position:absolute; top:1.3rem; right:1.3rem; font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:var(--green); padding:.25rem .55rem; border-radius:999px; }
@media(max-width:920px){ .cards,.cards.two{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .cards,.cards.two{ grid-template-columns:1fr; } }

/* ---------- Split / checklist (content) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
.split.alt{ background:var(--paper-2); }
.prose p{ color:#33433a; font-size:1.06rem; margin-bottom:1.1rem; }
.prose h3{ color:var(--ink); font-size:1.6rem; margin-bottom:1rem; }
.checklist{ list-style:none; display:flex; flex-direction:column; gap:.9rem; margin-top:.4rem; }
.checklist li{ display:flex; gap:.75rem; align-items:flex-start; color:#2c3a30; font-size:1.02rem; }
.checklist svg{ width:22px; height:22px; color:var(--green); flex:0 0 auto; margin-top:3px; }
.media-card{
  border-radius:22px; overflow:hidden; box-shadow:var(--shadow-md); position:relative;
  background:radial-gradient(120% 80% at 30% 10%, rgba(62,157,88,.3), transparent 60%), linear-gradient(160deg,var(--ink-2),var(--ink));
  color:#fff; padding:2.6rem; min-height:300px; display:flex; flex-direction:column; justify-content:center;
}
.media-card .big{ font-family:var(--display); font-weight:400; font-size:clamp(2.6rem,5vw,3.8rem); color:var(--gold-soft); line-height:1; }
.media-card .big small{ display:block; font-family:var(--sans); font-size:1rem; color:rgba(255,255,255,.75); margin-top:.8rem; font-weight:500; letter-spacing:.02em; }
.media-card .rule{ height:1px; background:rgba(255,255,255,.14); margin:1.6rem 0; }
.media-card p{ color:rgba(255,255,255,.78); font-size:1rem; }
@media(max-width:820px){ .split{ grid-template-columns:1fr; gap:2.4rem; } }

/* ---------- Process ---------- */
.process{ background:var(--ink); color:#fff; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; counter-reset:step; }
.steps.four{ grid-template-columns:repeat(4,1fr); }
.step{ position:relative; padding:2rem 1.6rem; border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); background:rgba(255,255,255,.03); transition:.4s; }
.step:hover{ background:rgba(255,255,255,.06); transform:translateY(-6px); }
.step .n{ counter-increment:step; font-family:var(--display); font-weight:400; font-size:2.4rem; color:var(--gold-soft); line-height:1; }
.step .n::before{ content:"0" counter(step); }
.step h3{ color:#fff; font-size:1.25rem; margin:.8rem 0 .5rem; }
.step p{ color:rgba(255,255,255,.68); font-size:.95rem; }
@media(max-width:900px){ .steps.four{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:760px){ .steps{ grid-template-columns:1fr; } }

/* ---------- Testimonials ---------- */
.reviews{ background:var(--paper); }
.tcarousel{ position:relative; max-width:50rem; margin:0 auto; min-height:230px; }
.tslide{ position:absolute; inset:0; opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); text-align:center; pointer-events:none; }
.tslide.active{ opacity:1; transform:none; position:relative; pointer-events:auto; }
.tslide .stars{ color:var(--gold); letter-spacing:3px; font-size:1.1rem; margin-bottom:1.2rem; }
.tslide blockquote{ font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,2.6vw,1.9rem); color:var(--ink); line-height:1.4; font-weight:400; }
.tslide blockquote::before{ content:"\201C"; display:block; font-family:var(--display); font-size:3.4rem; color:var(--gold); line-height:.5; margin-bottom:.9rem; }
.tslide .who{ margin-top:1.6rem; font-weight:600; color:var(--ink); }
.tslide .who small{ display:block; font-weight:400; color:var(--muted); font-size:.85rem; }
.tdots{ display:flex; gap:.6rem; justify-content:center; margin-top:2.4rem; }
.tdots button{ width:10px; height:10px; border-radius:50%; border:0; background:var(--line); cursor:pointer; transition:.3s; padding:0; }
.tdots button.active{ background:var(--green); width:28px; border-radius:6px; }

/* ---------- FAQ ---------- */
.faq{ max-width:50rem; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:1.5rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem; font-family:var(--serif); font-size:1.18rem; color:var(--ink); }
.faq-q .pm{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; transition:.3s; color:var(--green); font-size:1.3rem; line-height:1; }
.faq-item.open .faq-q .pm{ transform:rotate(45deg); background:var(--green); color:#fff; border-color:var(--green); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.faq-a div{ padding-bottom:1.5rem; color:var(--muted); font-size:1.02rem; }

/* ---------- About / Attorney ---------- */
.about{ background:var(--paper-2); position:relative; }
.about-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:3.5rem; align-items:center; }
.portrait{
  position:relative; border-radius:22px; overflow:hidden; aspect-ratio:4/5;
  background:
    radial-gradient(120% 80% at 30% 10%, rgba(62,157,88,.3), transparent 60%),
    linear-gradient(160deg,var(--ink-2),var(--ink));
  box-shadow:var(--shadow-md); display:grid; place-items:center; color:rgba(255,255,255,.5);
}
/* the headshot is a background-removed cutout — Tom in natural color,
   standing against the pine gradient the frame provides */
.portrait-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; z-index:2;
  filter:drop-shadow(0 18px 30px rgba(5,20,12,.45)); }
.portrait-img.missing{ display:none; }
/* fallback monogram + note only when the headshot is absent — the blend ghosts them through otherwise */
.portrait-img:not(.missing) ~ .mono-lg,
.portrait-img:not(.missing) ~ .ph-note{ visibility:hidden; }
.portrait .mono-lg{ font-family:var(--serif); font-size:6rem; color:var(--green-soft); opacity:.85; z-index:1; }
.portrait .ph-note{ position:absolute; bottom:1rem; left:1rem; right:1rem; z-index:1; font-size:.72rem; text-align:center; color:rgba(255,255,255,.5); border:1px dashed rgba(255,255,255,.25); border-radius:8px; padding:.4rem; }
/* the firm seal — stamps on when the section reveals */
.portrait .seal{ position:absolute; top:1.2rem; left:1.2rem; z-index:3; width:66px; height:66px; border-radius:50%; border:2px solid var(--gold); color:var(--gold-soft); display:grid; place-items:center; font-family:var(--serif); font-weight:700; font-size:.7rem; text-align:center; line-height:1.1; background:rgba(8,30,18,.55); backdrop-filter:blur(2px); transform:rotate(-8deg); }
.portrait .seal::after{ content:""; position:absolute; inset:4px; border:1px dashed var(--gold-soft); border-radius:50%; opacity:.65; }
.reveal.in .seal{ animation:stamp .55s var(--ease) .55s both; }
@keyframes stamp{
  from{ transform:scale(1.7) rotate(-16deg); opacity:0; }
  60%{ transform:scale(.94) rotate(-6deg); opacity:1; }
  to{ transform:scale(1) rotate(-8deg); opacity:1; }
}
.about .float-card{ position:absolute; right:-18px; bottom:30px; z-index:4; background:#fff; border-radius:16px; box-shadow:var(--shadow-md); padding:1rem 1.2rem; display:flex; align-items:center; gap:.8rem; }
.about .float-card .big{ font-family:var(--serif); font-size:1.8rem; color:var(--ink); line-height:1; }
.about .float-card small{ font-size:.74rem; color:var(--muted); }
.about-body h2{ font-size:clamp(2rem,3.4vw,2.8rem); color:var(--ink); margin:1rem 0 1.2rem; }
.about-body p{ color:#33433a; margin-bottom:1.1rem; font-size:1.04rem; }
.creds{ display:flex; flex-wrap:wrap; gap:.6rem; margin:1.4rem 0 1.8rem; }
.creds span{ font-size:.82rem; font-weight:500; color:var(--ink-2); background:#fff; border:1px solid var(--line); padding:.5rem .9rem; border-radius:999px; display:inline-flex; align-items:center; gap:.45rem; }
.creds span svg{ width:14px; height:14px; color:var(--green); }
/* Tom's signature writes itself in — the script face is used here and nowhere else */
.signature{ font-family:var(--script); font-size:3.1rem; color:var(--ink); margin-top:.4rem; line-height:1; transform:rotate(-2deg); transform-origin:left center; }
.signature.sig{ clip-path:inset(-25% 102% -25% -2%); transition:clip-path 1.5s ease-out .35s; }
.signature.sig.in{ clip-path:inset(-25% -8% -25% -2%); }
@media(max-width:880px){ .about-grid{ grid-template-columns:1fr; gap:3.5rem; } .about .float-card{ right:1rem; } }

/* ---------- CTA / Contact ---------- */
.contact{ background:linear-gradient(160deg,#0c2719,#1b5536); color:#fff; position:relative; overflow:hidden; }
.contact .orb{ position:absolute; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgba(201,162,75,.2),transparent 70%); filter:blur(50px); top:-150px; right:-100px; pointer-events:none; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; position:relative; z-index:2; }
.contact h2{ font-size:clamp(2.1rem,4vw,3.2rem); color:#fff; margin:1rem 0 1.2rem; }
.contact p.lede{ color:rgba(234,244,236,.8); font-size:1.08rem; margin-bottom:2rem; max-width:30rem; }
.info-list{ list-style:none; display:flex; flex-direction:column; gap:1.1rem; }
.info-list li{ display:flex; align-items:flex-start; gap:1rem; }
.info-list .ic{ width:46px; height:46px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center; background:rgba(62,157,88,.16); border:1px solid rgba(121,201,143,.35); color:var(--green-soft); }
.info-list .ic svg{ width:20px; height:20px; }
.info-list b{ display:block; color:#fff; font-size:1.05rem; }
.info-list span{ color:rgba(234,244,236,.7); font-size:.94rem; }
.info-list a{ color:rgba(234,244,236,.7); transition:color .25s; }
.info-list a:hover{ color:var(--green-soft); }
.formcard{ background:#fff; border-radius:22px; padding:2.4rem; box-shadow:var(--shadow-lg); color:var(--text); }
.formcard h3{ font-size:1.5rem; color:var(--ink); margin-bottom:.4rem; }
.formcard p.s{ color:var(--muted); font-size:.92rem; margin-bottom:1.6rem; }
.formcard .field label{ color:var(--muted); }
.formcard .field input,.formcard .field select,.formcard .field textarea{
  background:var(--paper); border:1px solid var(--line); color:var(--text);
  width:100%; padding:.85rem 1rem; border-radius:12px; font-family:var(--sans); font-size:.95rem; outline:none; transition:border .25s, box-shadow .25s;
}
.formcard .field input:focus,.formcard .field select:focus,.formcard .field textarea:focus{ border-color:var(--green); box-shadow:0 0 0 3px var(--green-glow); }
.formcard textarea{ resize:vertical; min-height:90px; }
.formcard .row2{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.formcard .btn{ width:100%; justify-content:center; margin-top:.6rem; }
@media(max-width:880px){ .contact-grid{ grid-template-columns:1fr; gap:2.6rem; } .formcard .row2{ grid-template-columns:1fr; } }

/* ---------- Footer ---------- */
footer{ background:#071a10; color:#a3b8aa; padding:4rem 0 2rem; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.08); }
footer .brand .name{ color:#fff; } footer .brand .sub{ color:#74917f; display:block; }
footer p.blurb{ font-size:.92rem; margin-top:1.2rem; max-width:24rem; color:#8aa394; }
footer h4{ font-family:var(--sans); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin-bottom:1.2rem; }
footer ul{ list-style:none; display:flex; flex-direction:column; gap:.7rem; }
footer ul a{ font-size:.92rem; color:#a3b8aa; transition:color .25s, padding .25s; }
footer ul a:hover{ color:var(--green-soft); padding-left:4px; }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; padding-top:1.6rem; font-size:.82rem; color:#74917f; }
.foot-bottom .disc{ max-width:54rem; }
@media(max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }

/* ---------- Concept badge & back-to-top ---------- */
.concept{
  position:fixed; left:18px; bottom:18px; z-index:80;
  display:flex; align-items:center; gap:.6rem; padding:.5rem .85rem;
  background:rgba(8,30,18,.92); color:#fff; border:1px solid rgba(201,162,75,.45);
  border-radius:999px; font-size:.76rem; backdrop-filter:blur(8px); box-shadow:var(--shadow-md);
  transition:transform .3s var(--ease), opacity .3s;
}
.concept .dot{ width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 0 var(--gold-glow); animation:pulse 2s infinite; }
.concept b{ color:var(--gold-soft); }
.concept .x{ cursor:pointer; opacity:.5; margin-left:.3rem; } .concept .x:hover{ opacity:1; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 var(--gold-glow); } 70%{ box-shadow:0 0 0 10px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }

#toTop{ position:fixed; right:18px; bottom:18px; z-index:80; width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  background:var(--green); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-md);
  opacity:0; transform:translateY(20px) scale(.8); transition:.4s var(--ease); }
#toTop.show{ opacity:1; transform:none; }
#toTop svg{ width:20px; height:20px; }

@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  svg.ink path{ stroke-dasharray:none; stroke-dashoffset:0; }
  .signature.sig{ clip-path:none; }
  .loader{ display:none; }
  html.boot{ overflow:auto; }
}