/* Scheidemantle Commercial — SHARED SITE STYLESHEET.
   Every page of the site links this file. It carries the brand tokens, the reset, the
   typographic scale, the section-intro motion, the section-background rhythm, the shared
   components (bands, cards, steps, audience tiles, the specimen table, figures), the site
   navigation and the footer.
   ⚠️ Page-specific components stay in that page's own <style> block. Anything that appears
   on more than one page belongs HERE — this repo has already been bitten twice by copies
   drifting (charts.js against the homepage, portal.js across two projects), and a second
   copy of a button is the same failure with a smaller blast radius.
   Read the brand kit before changing a token:
   01_INTERNAL_Working_Files/ScheidemantleCommercial/DesignSystem/RonThem_..._BrandKit_WIP.md */
/* Scheidemantle Commercial — homepage draft.
   Palette, gradients and motion are the brand kit's, not the reference site's: Cabernet
   #552448 and Cream #EAE3D4 are locked by BHHS, the gradient tokens are --grad-glow /
   --grad-veil, and the motion library is the kit's "lines are the motif" set — eyebrow
   rises, a rule draws, the headline follows. What is borrowed from the reference is the
   SHAPE of the page: a scroll that narrates, with real artifacts from the product floating
   through it instead of stock photography. */
:root{
  --cabernet:#552448; --cab-deep:#3B1932; --cab-soft:#7C5070;
  --cream:#EAE3D4; --paper:#FBF8F1; --mist:#E2D8CB;
  --ink:#241A21; --ink-soft:#5C4E57; --card:#FFFFFF;
  --serif:'Marcellus',Georgia,serif; --sans:'Manrope',-apple-system,Helvetica,Arial,sans-serif;
  --grad-glow:radial-gradient(1100px 560px at 22% -8%,rgba(124,80,112,.5),transparent 62%),linear-gradient(160deg,#552448,#3B1932);
  --grad-veil:linear-gradient(135deg,#7C5070 0%,#552448 55%,#3B1932 100%);
  --grad-cream:linear-gradient(180deg,#EAE3D4 0%,#FBF8F1 100%);
  --grad-rise:linear-gradient(180deg,#FBF8F1 0%,#E2D8CB 100%);
  --dur:240ms; --dur-rise:600ms; --dur-draw:800ms; --ease:cubic-bezier(.2,.7,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--serif);font-weight:400;text-wrap:balance}
p{text-wrap:pretty}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
.narrow{max-width:720px}

/* ---- the kit's section-intro motion: eyebrow rises, rule draws, headline follows ---- */
.eyebrow{font:600 10.5px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--cab-soft);margin-bottom:10px}
.rule{height:2px;width:64px;background:var(--cabernet);transform-origin:left;
  transition:transform var(--dur-draw) var(--ease);margin-bottom:18px}
/* ⚠️ VISIBLE BY DEFAULT. The hidden state is applied only once JS has confirmed it can
   reveal things again — an earlier version hid .rise in plain CSS and the hero's headline,
   subhead and buttons never came back, because the hero was not one of the observed blocks.
   A page whose copy depends on a script succeeding is a page that can ship blank. */
.anim .reveal .rise{opacity:0;transform:translateY(26px) scale(.985);
  transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
/* directional entrances — the grids and lists slide in from the edge they live on */
.anim .reveal .cards .fcard,.anim .reveal .who .wcard,.anim .reveal .steps .step{
  opacity:0;transform:translateX(-30px);
  transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
.anim .reveal .cards .fcard:nth-child(even),.anim .reveal .who .wcard:nth-child(even){
  transform:translateX(30px)}
.anim .reveal.on .cards .fcard,.anim .reveal.on .who .wcard,.anim .reveal.on .steps .step{
  opacity:1;transform:none}
.anim .reveal.on .cards .fcard:nth-child(2),.anim .reveal.on .who .wcard:nth-child(2),
.anim .reveal.on .steps .step:nth-child(2){transition-delay:.10s}
.anim .reveal.on .cards .fcard:nth-child(3),.anim .reveal.on .who .wcard:nth-child(3),
.anim .reveal.on .steps .step:nth-child(3){transition-delay:.20s}
.anim .reveal.on .rise{opacity:1;transform:none}
/* ⚠️ .d1 had no delay rule at all, and a stray dangling ".anim .reveal" line above ran the
   d2 selector into a two-item list — so the whole stagger was really "everything, then two
   late items". All four steps are declared now. */
.anim .reveal.on .rise.d1{transition-delay:.13s}
.anim .reveal.on .rise.d2{transition-delay:.26s}
.anim .reveal.on .rise.d3{transition-delay:.39s}
.anim .reveal .rule,.anim .reveal .hair{transform:scaleX(0)}
.anim .reveal.on .rule,.anim .reveal.on .hair{transform:scaleX(1)}

.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
.btn{display:inline-block;font:600 15px var(--sans);text-decoration:none;padding:15px 30px;border-radius:5px;
  border:2px solid var(--cream);color:var(--cream);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn:hover{background:var(--cream);color:var(--cab-deep)}
.btn.solid{background:var(--cream);color:var(--cab-deep)}
.btn.solid:hover{background:transparent;color:var(--cream)}
.btn.dark{border-color:var(--cabernet);color:var(--cabernet)}
.btn.dark:hover{background:var(--cabernet);color:var(--cream)}
/* ---- proof strip ---- */
/* The three figures are the page's evidence that this is built on transactions rather than
   opinion, and they were set at 34px — smaller than several section headings that carry far
   less. They are now one of the three moments allowed to dominate. */
.proof{border-bottom:1px solid var(--mist);padding:56px 0 60px}
.proof .lbl{font:600 10px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--cab-soft);text-align:center;margin-bottom:34px}
.proof .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:30px;text-align:center}
.proof .row > div{position:relative}
/* A hairline between the figures, not under them — it separates without drawing a box, and
   it is suppressed on the first item and whenever they stack. */
@media (min-width:660px){
  .proof .row > div + div:before{content:"";position:absolute;left:-15px;top:12%;bottom:12%;
    width:1px;background:var(--mist)}
}
.proof .big{font-family:var(--serif);font-size:clamp(40px,5vw,58px);color:var(--cabernet);line-height:1;
  font-variant-numeric:tabular-nums}
.proof .cap{font-size:14.5px;color:var(--ink-soft);margin-top:11px;text-wrap:pretty}

/* ---- statement panels ---- */
.statement{background:var(--cab-deep);color:var(--cream);padding:120px 0;margin:0}
.statement.veil{background:var(--grad-veil)}
.statement h2{font-size:clamp(28px,4.6vw,46px);line-height:1.22;max-width:19ch}
.statement .hi{color:#D9B7CC}
.statement p{color:#E4D6DF;margin-top:22px;max-width:56ch;font-size:18px}

/* ---- section-background rhythm ----
   The page ran six light sections of flat #FBF8F1 in a row, which is exactly the "white slab
   after white slab" the house standard forbids. These are the kit's own light gradients
   (--grad-cream, --grad-rise) plus a cab-soft bloom, applied in an alternating cadence so a
   reader scrolling fast still feels chapters going by. No new hues — every stop is a token. */
.tone-cream{background:var(--grad-cream)}
.tone-rise{background:var(--grad-rise)}
/* A wash that fades in and back out, so two stacked light sections meet without a hard seam. */
.tone-wash{position:relative;background:
  linear-gradient(180deg,transparent 0%,rgba(234,227,212,.72) 22%,rgba(234,227,212,.72) 78%,transparent 100%)}
/* A single soft bloom of cab-soft behind a light section — the light-surface counterpart of
   --grad-glow. Kept under 5% so it reads as warmth in the paper, never as a colored panel. */
.bloom{position:relative}
.bloom:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(760px 420px at 78% 14%,rgba(124,80,112,.10),transparent 66%)}
.bloom > *{position:relative;z-index:1}

/* ---- section ---- */
section.band{padding:96px 0}
section.band h2{font-size:clamp(27px,4.2vw,40px);line-height:1.2;color:var(--cab-deep);max-width:20ch}
section.band .lede{font-size:18.5px;color:var(--ink-soft);margin-top:18px;max-width:58ch}
.hair{height:1px;background:var(--mist);transform-origin:left;
  transition:transform var(--dur-draw) var(--ease)}

/* ---- feature cards ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;margin-top:44px}
.fcard{background:var(--cab-deep);color:var(--cream);border-radius:10px;padding:34px 32px;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.fcard:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(36,26,33,.18)}
.fcard .k{font:600 9.5px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#C8A9BE;display:block;margin-bottom:12px}
.fcard h3{font-size:22px;line-height:1.24;margin-bottom:11px}
.fcard p{font-size:15px;color:#E4D6DF}

/* ---- the sample: a real page of the report ---- */
.sample{background:var(--card);border:1px solid var(--mist);border-radius:10px;overflow:hidden;
  box-shadow:0 26px 60px rgba(36,26,33,.13);margin-top:44px}
.sample .bar{background:var(--grad-veil);color:var(--cream);padding:15px 22px;font:600 10px var(--sans);
  letter-spacing:.15em;text-transform:uppercase;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.sample .bar span{color:#C8A9BE}
.sample table{width:100%;border-collapse:collapse;font-size:14.5px}
.sample th,.sample td{text-align:left;padding:12px 20px;border-bottom:1px solid var(--mist)}
.sample th{font:600 9.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--cabernet);
  border-bottom:1px solid var(--cab-soft);padding-top:22px}
.sample td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* The concluded line is the row the whole table exists to reach — it gets the weight. */
.sample tr.sum td{border-top:2px solid var(--cabernet);border-bottom:none;font-weight:600;
  background:#F4EBF1;padding-top:17px;padding-bottom:17px;font-size:16px}
.sample tr.sum td.num{font-family:var(--serif);font-weight:400;font-size:21px;color:var(--cabernet)}
.sample .foot{padding:16px 20px;font-size:13.5px;color:var(--ink-soft);background:var(--paper)}

/* ---- audiences ---- */
.who{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:40px}
.wcard{background:var(--card);border:1px solid var(--mist);border-left:3px solid var(--cabernet);
  border-radius:0 8px 8px 0;padding:28px 26px}
.wcard h3{font-size:20px;color:var(--cab-deep);margin-bottom:9px}
.wcard p{font-size:15px;color:var(--ink-soft)}

/* ---- steps ---- */
.steps{list-style:none;margin-top:44px;display:grid;gap:16px}
.step{display:flex;gap:26px;align-items:flex-start;background:var(--card);border:1px solid var(--mist);
  border-radius:10px;padding:28px 30px;box-shadow:0 1px 2px rgba(36,26,33,.04);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.step:hover{transform:translateX(4px);border-color:var(--cab-soft);box-shadow:0 10px 30px rgba(36,26,33,.09)}
.sn{flex:0 0 52px;height:52px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--serif);font-size:23px;color:var(--cream);background:var(--grad-veil);line-height:1}
.step h3{font-size:20px;color:var(--cab-deep);margin-bottom:7px}
.step p{font-size:15.5px;color:var(--ink-soft);margin:0}
@media (max-width:520px){.step{gap:18px;padding:24px 22px}.sn{flex:0 0 44px;height:44px;font-size:20px}}

/* ---- close ---- */
.close{background:var(--grad-veil);color:var(--cream);padding:104px 0;text-align:center}
.close h2{font-size:clamp(28px,4.6vw,44px);line-height:1.2;margin:0 auto;max-width:17ch}
.close p{color:#E4D6DF;margin:20px auto 0;max-width:50ch;font-size:18px}
.close .cta{justify-content:center}
/* ---- footer ----
   Was a wordmark and three text links, which read as an unfinished page. It now carries what
   a footer on a licensed brokerage's site has to: the mark, what they do, where they are, and
   the broker identification PA requires. The Quality Seal appears with the wordmark above it,
   never alone, and is never recolored or effected — BHHS standards pp.5–6. */
footer{background:var(--cab-deep);color:#C8A9BE;padding:64px 0 40px;font-size:13.5px;
  border-top:1px solid rgba(234,227,212,.12)}
.fgrid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:44px;align-items:start}
@media (max-width:820px){.fgrid{grid-template-columns:1fr 1fr;gap:36px}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr;gap:32px}}
.fmark img{width:min(250px,68vw);height:auto;display:block;margin-bottom:18px}
.fabout{color:#C8A9BE;max-width:34ch;line-height:1.7}
.fh{font:600 9.5px var(--sans);letter-spacing:.17em;text-transform:uppercase;color:#D9B7CC;margin-bottom:14px}
.fsvc{list-style:none;margin:0;display:grid;gap:9px}
.fsvc li{color:#C8A9BE;font-size:14px}
.faddr{font-style:normal;color:#C8A9BE;line-height:1.75}
/* The broker-identification block. Set in Georgia Regular at 0 tracking per the locked BHHS
   DBA/affiliate typography rule (standards pp.10–13) — NOT in Marcellus or Manrope. */
.fbroker{margin-top:48px;padding-top:26px;border-top:1px solid rgba(234,227,212,.12);
  display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.fbroker img{width:52px;height:52px;flex:0 0 52px;display:block}
.fbroker p{font-family:Georgia,'Times New Roman',serif;letter-spacing:0;font-size:12.5px;
  color:#B899AE;line-height:1.65;max-width:62ch}
.fbase{margin-top:26px;font-size:12px;color:#9E7F95}
.arw{display:inline-block;margin-left:9px;transition:transform var(--dur) var(--ease)}
.btn:hover .arw{transform:translateX(4px)}


/* ---- blueprint grid: the faint drafting texture under light sections. Cabernet at 3%,
   so it reads as paper you could measure on rather than as decoration. ---- */
.grid-bg{position:relative}
.grid-bg:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(85,36,72,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(85,36,72,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.grid-bg > *{position:relative;z-index:1}

/* ---- a real chart, lifted straight out of the report ---- */
.figure{background:var(--card);border:1px solid var(--mist);border-radius:10px;padding:26px 26px 20px;
  box-shadow:0 16px 40px rgba(36,26,33,.08);margin-top:40px}
.figure svg{display:block;width:100%;height:auto}
.figure figcaption{font-size:14px;color:var(--ink-soft);margin-top:14px;line-height:1.6;text-wrap:pretty}

/* ---- big number band ---- */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:32px;margin-top:46px}
.fig-n{font-family:var(--serif);font-size:clamp(38px,5vw,56px);color:var(--cabernet);line-height:1}
.fig-c{font-size:15px;color:var(--ink-soft);margin-top:10px;max-width:26ch}


@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition:none!important;animation:none!important}
  .anim .reveal .rise{opacity:1;transform:none}
  .lv-fill{transition:none}
  .art{opacity:1;transform:none}
}

/* ---- site navigation ----
   Every page opens on a dark band (the homepage's video hero, an interior page's header),
   so the bar is cream throughout and needs no light variant. It sits IN the flow of that
   band rather than fixed, because a fixed bar over a 88vh hero costs the one thing the hero
   is for. No JavaScript: four links wrap to a second row on a phone rather than hiding
   behind a menu button that has to be built, tested and kept accessible. */
.nav{position:relative;z-index:5}
.nav-in{display:flex;align-items:center;gap:30px;flex-wrap:wrap;padding-top:26px;padding-bottom:26px}
.nav-mark{display:block;flex:0 0 auto;margin-right:auto}
.nav-mark img{width:min(212px,44vw);height:auto;display:block;
  filter:drop-shadow(0 2px 12px rgba(20,8,16,.5))}
.nav-links{display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.nav-links a{color:#E4D6DF;text-decoration:none;font:600 13.5px var(--sans);position:relative;
  padding:4px 0;transition:color var(--dur) var(--ease)}
.nav-links a:hover{color:var(--cream)}
/* The kit's underline sweep: 1.5px, left to right, no color flash. */
.nav-links a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--cream);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease)}
.nav-links a:hover:after,.nav-links a[aria-current="page"]:after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--cream)}
.btn.sm{padding:11px 20px;font-size:13.5px;border-width:1.5px}
@media (max-width:1080px){.nav-in{gap:20px}.nav-links{gap:20px;order:3;width:100%}}
@media (max-width:560px){
  .nav-in{padding-top:20px;padding-bottom:20px;gap:16px}
  .nav-links{gap:14px 18px;order:2}
  .nav-links a{font-size:13px}
  /* On a phone the mark takes the whole first row, so the CTA wrapped BETWEEN the mark and
     the links and read as a stray button. Links come second, and the action takes the full
     width of its own row where it looks deliberate and is easier to hit. */
  .btn.sm{order:3;width:100%;text-align:center}
}

/* ---- interior page header: the compact dark opening every page other than the homepage
   uses, so the cream navigation always has something to sit on. ---- */
.phead{background:var(--grad-glow);color:var(--cream);position:relative;overflow:hidden}
.phead:before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(234,227,212,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(234,227,212,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(760px 460px at 22% 8%,#000,transparent 74%);
  mask-image:radial-gradient(760px 460px at 22% 8%,#000,transparent 74%)}
.phead > .wrap{position:relative;z-index:1}
/* ⚠️ NO max-width ON THE CONTAINER. A ch unit here resolves against the 17px body font, so
   40ch came out around 400px and folded a two-line headline into five. The measures belong
   on the elements themselves, where ch resolves against the type that is actually set. */
.phead-body{padding:58px 0 92px}
.phead .eyebrow{color:#C8A9BE}
.phead h1{font-size:clamp(34px,5.4vw,58px);line-height:1.1;max-width:17ch}
.phead .lede{font-size:19px;color:#E4D6DF;margin-top:20px;max-width:46ch}
@media (max-width:640px){.phead-body{padding:44px 0 68px}}

/* ---- footer navigation ---- */
.fsvc a{color:#C8A9BE;text-decoration:none;transition:color var(--dur) var(--ease)}
.fsvc a:hover{color:var(--cream)}
.faddr a{color:#C8A9BE;text-decoration:none;transition:color var(--dur) var(--ease)}
.faddr a:hover{color:var(--cream)}
.flegal{list-style:none;margin:14px 0 0;display:flex;gap:20px;flex-wrap:wrap}
.flegal a{color:#9E7F95;text-decoration:none;font-size:12px;transition:color var(--dur) var(--ease)}
.flegal a:hover{color:#C8A9BE}