/* ============================================================
   WLF DESIGN SYSTEM v1 (2026-07-19)
   Extracted from the APPROVED home-v8.html direction (light,
   UP-register, sharp flat, print shadows). Every interior page
   of the rebuild loads THIS file and inherits identical tokens,
   type, buttons, nav, and footer.

   RULES FOR PAGE BUILDERS (subagents and humans alike):
   - NEVER redefine :root tokens, nav, footer, or button styles
     in a page. Page-specific <style> blocks are allowed ONLY
     for that page's own sections, and may use var() tokens
     only: no new hex colors, no new fonts, no radius > 4px,
     shadows = the --sh-* soft elevation tokens ONLY (offset print shadows retired 2026-07-25; glow/neon still banned).
   - Fonts: Bebas Neue (display) + Barlow (body). Nothing else.
   - Photos: B&W grade via .bw unless a section is explicitly
     art-directed otherwise. Never crushed dark.
   - No em dashes anywhere. Safe language only.
   NOTE: assets/wlf.css is the RETIRED dark system from the
   rejected instrument build. Do not load it.
   ============================================================ */

:root{
  --paper:#F7F5F0;        /* warm white base, the UP greige family */
  --white:#FFFFFF;
  --card:#F2EFE8;         /* soft cream card */
  --ink:#141412;          /* near-black, warm */
  --ink-60:#5A574F;       /* secondary text on light, AA on paper */
  --line:#E2DED4;
  --flame:#EB683A;
  --flame-deep:#C8531F;
  --brick:#8A3A1B;        /* flame, pressed dark */
  --brick-tint:#F4B08B;   /* accent phrase on brick/ink */
  --sage:#5C7A5E;
  /* sage as it is used ON INK. #5C7A5E is the light-surface cut and measures
     under the floor on #141412; this is the value already hardcoded across the
     dark surfaces, tokenised 2026-07-27 so the readout accent has one name. */
  --sage-dk:#9DBE9F;
  --mist:#E2F4DC;         /* WLF pale green, form fields on dark */
  --r:2px;                /* sharp editorial crops */
  /* flame-deep measures 4.11:1 on paper = large text only. Small flame
     labels on light surfaces use this darker cut (5.08:1, passes AA) */
  --flame-text:#B0491B;
  /* premium soft elevation (2026-07-25): the offset print-shadow signature is
     RETIRED (Ashmit: reads AI). Use these; never re-add Npx Npx 0 offsets. */
  --sh-sm:0 2px 5px rgba(10,10,9,.18),0 7px 16px -7px rgba(10,10,9,.3);
  --sh-md:0 2px 5px rgba(10,10,9,.1),0 14px 30px -12px rgba(10,10,9,.28);
  --sh-dk:0 10px 28px rgba(0,0,0,.42),0 34px 70px -26px rgba(0,0,0,.55);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* brand text highlight: selecting copy anywhere on the site paints flame */
::selection{background:#9DBE9F;color:var(--ink)}
.drop-panel a.current{color:#9DBE9F}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{background:var(--paper);color:var(--ink);font-family:'Barlow',system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
a{color:inherit}

/* ---------- type ---------- */
.eyebrow{font-family:'Bebas Neue',sans-serif;font-size:17px;letter-spacing:.14em;color:var(--flame-text)}
h1,h2{font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.015em;line-height:.95}
h1{font-size:clamp(52px, 36px + 4vw, 100px)}
h2{font-size:clamp(38px, 28px + 2.4vw, 66px)}
h3{font-weight:700;font-size:22px;letter-spacing:-0.01em}
.lede{font-size:19px;color:var(--ink-60);line-height:1.55;max-width:56ch}
.accent{color:var(--flame-deep)}
.bw{filter:grayscale(1) contrast(1.14) brightness(.95)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:3px;
     font-weight:700;font-size:14.5px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;
     padding:17px 34px;transition:transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;border:1.5px solid transparent}
.btn-solid,.btn-pill-flame{box-shadow:var(--sh-sm)}
.btn-solid:active,.btn-pill-flame:active{box-shadow:0 1px 3px rgba(10,10,9,.22)}
.btn:active{transform:scale(.98)}
.btn-solid{background:var(--ink);color:var(--white)}
.btn-solid:hover{background:#000}
.btn-pill-flame{background:var(--flame-deep);color:var(--white)}
.btn-pill-flame:hover{background:var(--brick)}
.btn-flame-bright{background:var(--flame);color:var(--white);box-shadow:var(--sh-sm)}
.btn-flame-bright:hover{background:var(--flame-deep)}
.btn-flame{background:var(--flame);color:var(--ink);font-weight:800;box-shadow:var(--sh-sm)}
.btn-flame:hover{background:#E05A2B}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:var(--white)}
.btn-line.on-dark{border-color:rgba(255,255,255,.7);color:var(--white)}
.btn-line.on-dark:hover{background:var(--white);color:var(--ink)}
.btn .btn-arr{display:inline-block;font-weight:800;transition:transform .22s cubic-bezier(.4,0,.2,1)}
.btn:hover .btn-arr,.btn:focus-visible .btn-arr{transform:translateX(6px)}
.btn:active .btn-arr{transform:translateX(13px)}
@media (prefers-reduced-motion: reduce){ .btn .btn-arr{transition:none} }
.quiet{font-size:13.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-60);
  text-decoration:underline;text-underline-offset:4px}
.quiet:hover{color:var(--ink)}

/* ---------- nav: dark bar, real wordmark, expanding-arrow links.
   SOLID ink at top; darkened glass once scrolled (site.js toggles). Never
   plain translucency: brightness(.45) crushes bright frames first. ---------- */
.site-header{position:sticky;top:0;z-index:50;background:#0A0A0A;
  border-bottom:1px solid rgba(255,255,255,.14);
  transition:border-color .35s ease, background .35s ease}
.site-header.scrolled{background:rgba(10,10,9,.55);
  backdrop-filter:blur(12px) brightness(.45) saturate(.9);
  -webkit-backdrop-filter:blur(12px) brightness(.45) saturate(.9);
  border-bottom-color:rgba(255,255,255,.09)}
@media (prefers-reduced-motion: reduce){ .site-header{transition:none} }
/* 3-zone bar (Ashmit 07-19, "nav could be centred"): brand left, links TRUE
   center, tel+CTA right. Grid 1fr auto 1fr keeps the link group centered on
   the page regardless of how wide the brand or CTA side is. */
.site-header .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:26px;height:78px;
  max-width:1400px} /* wider than the page wrap so the side zones fit and the links stay TRUE center */
.brand{display:flex;align-items:center;text-decoration:none;justify-self:start}
.brand img{height:34px;width:auto}
.nav{display:flex;align-items:center;gap:26px;justify-self:center}
.nav-right{display:flex;align-items:center;gap:26px;justify-self:end}
/* right zone never wraps: the CTA and number stay one line each */
.nav-right .btn{white-space:nowrap}
.nav-tel{white-space:nowrap}
@media (max-width:1280px){ .nav-tel{display:none} } /* number lives in the info band + footer + contact page */
@media (max-width:1180px){ .site-header .wrap{gap:18px} .nav{gap:18px} .nav-right{gap:18px} }
.nav .navlink{text-decoration:none;font-weight:600;font-size:14.5px;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(255,255,255,.88);display:inline-flex;align-items:center;transition:color .2s ease;
  background:none;border:none;cursor:pointer;font-family:inherit;padding:0}
/* hover = a sage underline filling left to right (Ashmit 07-25; the sliding
   arrow prefix is retired) */
.nav .navlink{position:relative}
.nav .navlink::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;
  background:#9DBE9F;transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.nav .navlink:hover{color:var(--white)}
.nav .navlink:hover::after,.nav .navlink:focus-visible::after{transform:scaleX(1)}
@media (prefers-reduced-motion: reduce){ .nav .navlink::after{transition:none} }
.nav-right .btn{padding:12px 26px;font-size:14px}
.nav-tel{color:rgba(255,255,255,.6) !important;text-decoration:none;font-weight:600;font-size:14.5px;letter-spacing:.04em}
.nav-tel:hover{color:var(--white) !important}
.nav-drop{position:relative}
.nav-drop .chev{margin-left:7px;transition:transform .22s ease;color:var(--flame)}
.nav-drop:hover .chev,.nav-drop:focus-within .chev{transform:rotate(180deg)}
.drop-panel{position:absolute;top:calc(100% + 16px);left:-20px;min-width:240px;background:#181715;
  border:1px solid rgba(255,255,255,.16);box-shadow:var(--sh-dk);padding:6px 0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;z-index:60}
.nav-drop.open .drop-panel,.nav-drop:hover .drop-panel,.nav-drop:focus-within .drop-panel{
  opacity:1;visibility:visible;transform:none;transition:opacity .22s ease, transform .22s ease}
.drop-panel::before{content:"";position:absolute;top:-17px;left:0;right:0;height:17px} /* hover bridge */
.drop-panel a{display:block;padding:12px 20px;text-decoration:none;color:rgba(255,255,255,.88);
  font-weight:600;font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;
  transition:background .15s, color .15s, box-shadow .15s}
.drop-panel a:hover,.drop-panel a:focus-visible{color:var(--white);background:#1F1E1B;box-shadow:inset 3px 0 0 var(--flame)}
.drop-panel .drop-all{color:var(--flame);border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:5px;padding-bottom:13px}
@media (prefers-reduced-motion: reduce){ .drop-panel,.nav-drop .chev{transition:none} }
@media (max-width:900px){ .nav .navlink, .nav-tel, .nav-drop{display:none} }
/* phone: the CTA drops to a compact "Start here" so it stops dwarfing the wordmark */
.nav-right .btn .cta-s{display:none}
@media (max-width:640px){
  .nav-right .btn{padding:10px 16px;font-size:12.5px}
  .nav-right .btn .cta-l{display:none}
  .nav-right .btn .cta-s{display:inline}
}

/* ---------- interior page head: ink band, eyebrow + h1 + lede ---------- */
.page-head{background:var(--ink);color:var(--white);padding:96px 0 72px}
.page-head .eyebrow{color:var(--flame)}
.page-head h1{margin:14px 0 18px}  /* no width cap (Ashmit 07-19); a page needing a tight title block sets its own max-width */
.page-head .lede{color:rgba(247,245,240,.88)}
@media (max-width:760px){ .page-head{padding:64px 0 52px} }

/* ---------- sections ---------- */
.section{padding:96px 0}
.section.alt{background:var(--white)}
.section .eyebrow{color:var(--flame-text)}
@media (max-width:760px){ .section{padding:64px 0} }
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media (max-width:960px){ .grid-2{grid-template-columns:1fr;gap:36px} }

/* ---------- long-form prose (service copy, blog bodies, policy) ---------- */
.prose{max-width:70ch}
.prose h2{font-size:clamp(30px, 24px + 1.4vw, 44px);margin:52px 0 18px}
.prose h3{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:26px;letter-spacing:.03em;margin:36px 0 12px}
.prose p{margin:0 0 18px;color:var(--ink);font-size:17px}
.prose p.muted, .prose .muted{color:var(--ink-60)}
.prose ul,.prose ol{margin:0 0 18px 22px}
.prose li{margin-bottom:8px}
.prose blockquote{border-left:3px solid var(--flame-deep);padding:4px 0 4px 22px;margin:26px 0;color:var(--ink-60)}
.prose table{width:100%;border-collapse:collapse;margin:26px 0;font-size:15.5px}
.prose th{text-align:left;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-60);
  border-bottom:2px solid var(--ink);padding:10px 14px 10px 0}
.prose td{border-bottom:1px solid var(--line);padding:12px 14px 12px 0;vertical-align:top}

/* ---------- photo frames + flat black annotation bar ---------- */
.frame{position:relative;overflow:hidden;border-radius:var(--r);background:var(--card)}
.frame img{width:100%;height:100%;object-fit:cover}
.frame.shadow-card{box-shadow:var(--sh-dk)}
.frame.shadow-flame{box-shadow:var(--sh-dk)} /* flame offset retired 2026-07-25 (Ashmit: reads AI); class kept so pages need no markup change */
.abar{position:absolute;left:0;bottom:0;background:var(--ink);color:var(--paper);z-index:2;
  font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:.12em;padding:10px 16px}
.cap{margin-top:14px;font-size:13px;font-weight:600;color:var(--ink-60)}
.cap b{color:var(--ink);font-weight:700}
/* light placeholder for frames waiting on the 07-20 shoot */
.ph-light{border:1.5px dashed #C9C3B4;border-radius:var(--r);background:var(--card);
  display:flex;flex-direction:column;justify-content:flex-end;padding:26px}
.ph-light .ph-id{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:.1em;color:var(--flame-deep)}
.ph-light p{font-size:14px;color:var(--ink-60);margin-top:6px}

/* dark placeholder for PORTRAIT frames waiting on a shot (ink surfaces, added
   2026-07-26). Companion to .ph-light. Deliberately plain: it has to read as
   "not shot yet", never as a design flourish, and it exists so a named person's
   row is NEVER anchored with somebody else's face. Usage: put it on the same
   element that would carry the photo, keep the .abar with the person's name.
   When the real portrait lands, delete the .ph-dark class + its inner spans and
   drop an <img> in. Nothing else about the row changes. */
.ph-dark{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:rgba(247,245,240,.045);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);
  text-align:center;padding:26px}
.ph-dark .ph-mk{color:rgba(157,190,159,.42);display:flex}
.ph-dark .ph-id{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:.1em;color:#9DBE9F}
.ph-dark p{font-size:13.5px;color:rgba(247,245,240,.45);max-width:26ch;line-height:1.5}

/* ---------- FAQ: flat print accordion ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:baseline;gap:18px;cursor:pointer;list-style:none;
  padding:24px 8px;font-weight:700;font-size:18px;transition:background .15s ease, padding-left .15s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary .qmark{font-family:'Bebas Neue',sans-serif;font-size:19px;color:var(--flame-text);min-width:26px}
.faq summary:hover{background:var(--card)}
.faq details[open] summary{background:var(--card);box-shadow:inset 4px 0 0 var(--flame);padding-left:22px}
.faq .faq-a{padding:4px 8px 26px 52px;color:var(--ink-60);font-size:16px;max-width:64ch;
  overflow:hidden;transition:height .4s cubic-bezier(.4,0,.2,1), opacity .35s ease}
.faq summary::after{content:"+";margin-left:auto;font-family:'Bebas Neue',sans-serif;font-size:26px;
  line-height:1;color:var(--flame-text);transition:transform .3s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
@media (prefers-reduced-motion: reduce){ .faq .faq-a,.faq summary::after{transition:none} }
.faq .faq-a p{margin-bottom:12px}

/* ---------- callout: card with the flame edge ---------- */
.callout{background:var(--card);border-left:4px solid var(--flame);border-radius:var(--r);
  padding:28px 30px;box-shadow:var(--sh-md)}
.callout b{display:block;font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:24px;letter-spacing:.04em;margin-bottom:8px}
.callout p{font-size:15.5px;color:var(--ink-60)}

/* ---------- dark closing CTA strip (interior pages) ---------- */
.page-cta{background:var(--ink);color:var(--white);padding:76px 0}
.page-cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.page-cta b{display:block;font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(28px,24px+1vw,40px);letter-spacing:.03em}
.page-cta p{font-size:15.5px;color:rgba(247,245,240,.72);margin-top:6px;max-width:62ch}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#CFCBC2;padding:72px 0 44px;font-size:15.5px}
.footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:32px}
@media (max-width:1000px){ .footer .wrap{grid-template-columns:repeat(2,1fr)} }
.footer .display{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:.08em;color:var(--white);margin-bottom:10px}
.footer a{color:#CFCBC2}
.footer .disclaimer{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:22px;font-size:13px;color:#8F8B82}
.footer .legal{grid-column:1/-1;font-size:13px;color:#8F8B82;margin-top:6px}
.footer .legal a{color:#8F8B82}
.footer .legal a:hover{color:var(--white)}

/* footer v3: icon-topped columns with vertical dividers (Ashmit mockup 07-19) */
.footer .fi{display:block;width:26px;height:26px;color:var(--flame);margin-bottom:14px}
.footer .fi svg,.footer .disc-row svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter}
@media (min-width:1001px){
  .footer .wrap > div + div:not(.disc-row){border-left:1px solid rgba(255,255,255,.12);padding-left:32px}
}
.footer .f-dir{display:inline-block;margin-top:12px;font-weight:700;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;border-bottom:2px solid var(--flame);padding-bottom:2px}
.footer .f-dir:hover{color:var(--white)}
.footer .disc-row{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:22px;
  display:flex;gap:14px;align-items:flex-start;font-size:13px;color:#8F8B82}
.footer .disc-row svg{width:22px;height:22px;flex:none;margin-top:1px;stroke-width:1.5}
.footer .legal .lsep{margin:0 12px;color:rgba(255,255,255,.25)}
/* back-to-top: appears past the first screen, animates up (site-wide) */
.totop{position:fixed;right:26px;bottom:26px;z-index:80;width:52px;height:52px;border-radius:3px;
  background:var(--ink);color:var(--white);border:1px solid rgba(255,255,255,.28);cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-sm);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, background .2s ease, border-color .2s ease}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--flame);border-color:var(--flame)}
.totop svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion: reduce){ .totop{transition:none;transform:none} }

/* ---------- closer + info band (parts 1 and 2 of the standard footer) ---------- */
/* closer: full-bleed ink + flame banner with the neon sign, same treatment as home-v8 */
.closer{background:#0B0A09;border-top:4px solid var(--flame);color:var(--paper);
  padding:110px 0 120px;text-align:center;position:relative;overflow:hidden}
.closer-bg{position:absolute;inset:0}
.closer-bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%;
  filter:brightness(.48) saturate(.85)}
.closer-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(11,10,9,.9) 0%, rgba(11,10,9,.72) 50%, rgba(11,10,9,.9) 100%)}
.closer .wrap{position:relative;z-index:1}
.closer h2{color:var(--white);font-size:clamp(44px, 32px + 3vw, 84px)}
.closer h2 .accent{color:var(--flame)}
.closer .lede{color:rgba(247,245,240,.82);margin:20px auto 0;max-width:60ch}
.closer-cta{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;margin-top:40px}
.closer-cta .btn-flame-bright{height:62px;padding:0 46px;font-size:16px;font-weight:800}
.closer .quiet.on-dark{color:rgba(247,245,240,.66)}
.closer .quiet.on-dark:hover{color:var(--white)}
@media (max-width:960px){ .closer{padding:76px 0 84px} }
/* INFO BAND: dark visit/hours/socials/signup strip, part 2 of the footer standard */
.infoband{background:var(--ink);color:var(--paper);padding:84px 0;border-top:1px solid rgba(255,255,255,.14)}
.infoband .eyebrow{color:var(--flame)}
.ib-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:start}
@media (max-width:960px){ .ib-grid{grid-template-columns:1fr;gap:44px} }
.loc-addr{font-family:'Bebas Neue',sans-serif;font-size:clamp(30px, 24px + 1.4vw, 44px);
  letter-spacing:.03em;line-height:1.1;margin:18px 0 8px;color:var(--white)}
.loc-city{color:rgba(247,245,240,.65);font-size:17px;font-weight:600}
.loc-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:26px}
.soc-row{margin-top:30px;display:flex;gap:24px;flex-wrap:wrap}
.soc-row a{font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(247,245,240,.88);text-decoration:none;border-bottom:2px solid var(--flame);padding-bottom:3px}
.soc-row a:hover{color:var(--white)}
.hours{border-top:2px solid rgba(247,245,240,.32);margin-top:14px}
.hours .hrow{display:flex;justify-content:space-between;gap:18px;padding:13px 4px;
  border-bottom:1px solid rgba(247,245,240,.14);font-size:16px}
.hours .hrow b{font-weight:700;color:var(--white)}
.hours .hrow span{color:rgba(247,245,240,.7)}
.hours-note{margin-top:12px;font-size:13.5px;color:rgba(247,245,240,.55)}
.signup{margin-top:34px;border-top:1px solid rgba(247,245,240,.14);padding-top:26px}
.signup > b{display:block;font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:23px;
  letter-spacing:.06em;color:var(--white);margin-bottom:14px}
.signup form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ct-field{display:flex;flex-direction:column;gap:8px}
.ct-field.wide{grid-column:1/-1}
/* field labels: sage Bebas, the dark-surface label voice (square ticks retired
   2026-07-25: box markers read AI) */
.ct-lab{display:block;font-family:'Bebas Neue',sans-serif;font-weight:400;
  font-size:16px;letter-spacing:.12em;color:#9DBE9F}
/* input base carried here (not only in the quickread partial) so the contact
   form works on pages without the Quick Read. Fields went mist-green 07-25
   (Ashmit: "rather than white, a faint green"), then DARK 2026-07-28, his newer
   call: ink-surface fill + subtle border, flame on focus, mirroring the Quick
   Read's .q-input so the two forms read as one system. Orange stays the FOCUS
   state on purpose; a flame border at rest reads as a form full of errors. */
.signup .q-input{width:100%;border:1px solid rgba(255,255,255,.22);border-radius:3px;
  padding:15px 18px;font-family:inherit;font-size:16.5px;background:rgba(247,245,240,.05);color:var(--white)}
.signup .q-input::placeholder{color:rgba(247,245,240,.5)}
.signup .q-input:focus{outline:2px solid var(--flame);outline-offset:1px;border-color:var(--flame)}
.signup .ct-msg{resize:vertical;min-height:96px}
/* WLF inline validation (replaces the browser's default bubbles) */
.ct-err{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--flame)}
.ct-field.bad .q-input{border-color:var(--flame);box-shadow:inset 3px 0 0 var(--flame)}
.signup .btn{padding:0 26px;height:56px;justify-self:start}
@media (max-width:640px){ .signup form{grid-template-columns:1fr} .signup .btn{width:100%;justify-self:stretch} }
.signup-note{margin-top:10px;font-size:12.5px;color:rgba(247,245,240,.55)}
.signup-note a{color:rgba(247,245,240,.75)}
.signup-note a:hover{color:var(--white)}
.soc-row a svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}
.soc-row a{border-bottom:none;padding-bottom:0;color:rgba(247,245,240,.85);transition:color .2s ease}
.soc-row a:hover{color:var(--flame)}
.map-card{display:block;position:relative;margin-top:30px;max-width:480px;border:1px solid rgba(247,245,240,.22);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-md)}
.map-card img{display:block;width:100%;height:auto}
.map-card:hover{border-color:var(--flame)}
.map-attr{position:absolute;right:6px;bottom:5px;font-size:10.5px;color:rgba(20,20,18,.6);
  background:rgba(247,245,240,.75);padding:1px 6px;border-radius:2px}
.map-live{position:absolute;left:8px;top:8px;font-size:11.5px;font-weight:700;letter-spacing:.02em;
  color:var(--white);background:rgba(10,10,10,.78);padding:4px 10px;border-radius:2px;
  border-left:3px solid var(--flame)}
.map-card[data-automap="1"] .map-live{display:none}
.map-card.live .map-live,.map-card.live .map-attr{display:none}
.map-card iframe{display:block;width:100%;aspect-ratio:640/400;border:0}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:13px;line-height:1.5;
  color:rgba(247,245,240,.72);flex-basis:100%;cursor:pointer}
.consent input{margin-top:2px;accent-color:var(--flame);width:16px;height:16px;flex:none}

.soc-row a svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter;display:block}
.soc-row a svg.fill{fill:currentColor;stroke:none}
.soc-row a{border-bottom:none;padding-bottom:0;color:rgba(247,245,240,.85);transition:color .2s ease}
.soc-row a:hover{color:var(--flame)}
@media (max-width:560px){ .closer-cta{gap:16px} .closer-cta .btn-flame-bright{width:100%;height:56px;padding:0 18px;font-size:14.5px} .loc-cta .btn{width:100%} }


@media (max-width:760px){ .footer .wrap{grid-template-columns:1fr} }

/* paper grain overlay REMOVED (Ashmit 07-19: "the white grain looks like such an AI tell") */

/* ============================================================
   WOLF DIVIDER (repeatable element, moved here 2026-07-27)
   Was copy-pasted into the inline <style> of 8 pages and MISSING
   from home-v8, which is why its three dividers rendered as a
   cream full-bleed band with the mark shoved to the left edge:
   no background, no flex, so the rules collapsed to zero height.
   Living here means a page cannot ship a half-built divider again.
   Markup is the partial partials/wolfdiv.html; the #wolfdiv symbol
   defs are partials/wolfdefs.html and must sit BEFORE the first use.
   COLTON-GATED mark: the wolf ships nowhere without his sign-off.
   ============================================================ */
.lane-div{background:var(--ink)}
.lane-div .wrap{display:flex;align-items:center;gap:20px}
.lane-div .line{flex:1;height:1px;background:rgba(255,255,255,.14)}
.lane-div .mk{color:var(--flame);display:flex;align-items:center}
.lane-div .mk svg{display:block}

/* ---------- reveals ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){ .rv{opacity:1;transform:none;transition:none} }

/* ============================================================
   WLF VIDEO PLAYER (reusable component, added 2026-07-19)
   Drop-in on any page, site.js builds the controls:
     <div class="wlf-video"><video src="..." poster="..." muted loop playsinline preload="none"></video></div>
   States: ambient muted loop (dimmed, cover pill) -> sound-on
   (engaged: compact icon chips + flame scrub bar) -> paused.
   Frame click while engaged toggles play/pause; mute is chip-only.
   Never native controls. data-restart="off" keeps the first
   unmute from restarting the cut.
   ============================================================ */
.wlf-video{position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink)}
.wlf-video video{display:block;width:100%;aspect-ratio:16/9;transition:filter .3s ease}
.wlf-video:not(.sound-on) video{filter:saturate(.65) brightness(.8)}
.wlf-video.sound-on video{cursor:pointer}
.wlf-video.sound-on video:hover{filter:saturate(.85) brightness(.9)}
.wlf-video.paused video{filter:saturate(.6) brightness(.65);cursor:pointer}
.wlf-video .fvcover{position:absolute;inset:0;z-index:2;border:none;cursor:pointer;padding:0;
  background:rgba(10,10,9,.38);display:flex;align-items:center;justify-content:center;transition:background .25s ease}
.wlf-video .fvcover:hover{background:rgba(10,10,9,.26)}
.wlf-video.sound-on .fvcover{display:none}
.wlf-video .lab{display:inline-flex;align-items:center;gap:9px;background:#9DBE9F;color:var(--ink);
  border-radius:var(--r);font-family:'Barlow',sans-serif;font-size:12px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:9px 14px;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.wlf-video .fvcover:hover .lab{background:#E2F4DC}
.wlf-video .ic{width:0;height:0;border-left:8px solid var(--ink);border-top:5px solid transparent;border-bottom:5px solid transparent}
/* compact icon chips, engaged mode only. 34px squares, quiet print shadow. */
.wlf-video .fv-chips{position:absolute;right:12px;bottom:34px;display:none;gap:6px;z-index:2}
.wlf-video.sound-on .fv-chips,.wlf-video.paused .fv-chips{display:flex}
.wlf-video .fvbtn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  background:#9DBE9F;border:none;border-radius:var(--r);cursor:pointer;padding:0;
  box-shadow:0 2px 8px rgba(0,0,0,.35)}
.wlf-video .fvbtn:hover{background:#E2F4DC}
.wlf-video .fvbtn svg{width:14px;height:14px;fill:none;stroke:var(--ink);stroke-width:2.3;
  stroke-linecap:square;stroke-linejoin:miter}
.wlf-video .fvbtn .ic-fill{fill:var(--ink);stroke:none}
.wlf-video .p-play{display:none}
.wlf-video.paused .p-play{display:block}
.wlf-video.paused .p-bars{display:none}
.wlf-video .fv-pausedlab{position:absolute;left:14px;bottom:34px;display:none;pointer-events:none;z-index:1}
.wlf-video.paused .fv-pausedlab{display:block}
.wlf-video .fv-seek{position:absolute;left:0;right:0;bottom:0;height:24px;display:none;z-index:3;cursor:pointer;
  background:linear-gradient(0deg,rgba(10,10,9,.5),rgba(10,10,9,0));touch-action:none}
.wlf-video.sound-on .fv-seek,.wlf-video.paused .fv-seek{display:block}
.wlf-video .fv-seek::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(247,245,240,.3)}
.wlf-video .fv-seek-fill{position:absolute;left:0;bottom:0;height:3px;width:0;background:#9DBE9F}
.wlf-video .fv-seek:hover::before,.wlf-video .fv-seek:hover .fv-seek-fill{height:6px}
@media (max-width:960px){ .wlf-video .fv-chips{right:10px;bottom:32px} .wlf-video .fv-pausedlab{left:10px;bottom:32px} }

/* ---------- LOOK INSIDE: the real space, one shared component (2026-07-27) ----
   Added at Ashmit's ask: a "take a look inside" gallery on each service page.
   4:3 tiles, captioned. Works on paper sections and on .lane (ink) sections.

   THE RULE THAT MATTERS: a tile with no real photograph yet carries .ph-light
   (paper sections) or .ph-dark (ink sections) INSTEAD of an <img>. Never a
   stock substitute, never a frame borrowed from another lane, never an offsite
   event photo. A gap must read as "not shot yet". Recovery and Medical are
   mostly placeholders on purpose: those photographs do not exist.

   Do NOT re-skin this in a page's own <style> block. Per-page difference is a
   token here, same standing rule that the Quick Read got burned by. */
.lookin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px}
.lookin-tile{display:flex;flex-direction:column;gap:12px}
.lookin-tile .frame,.lookin-tile .ph-light,.lookin-tile .ph-dark{aspect-ratio:4/3}
.lookin-cap{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink-60)}
.lookin-cap b{color:var(--ink);font-weight:700}
.lane .lookin-cap{color:rgba(247,245,240,.62)}
.lane .lookin-cap b{color:var(--paper)}
.lane .lookin-tile .frame{background:rgba(247,245,240,.06)}
@media (max-width:900px){ .lookin-grid{grid-template-columns:repeat(2,1fr);gap:20px} }
@media (max-width:560px){ .lookin-grid{grid-template-columns:1fr;gap:24px} }

/* Placeholder INSIDE a step-panel photo frame (.hframe). Those frames are narrow
   by design (200px on recovery, 104px on mobile), so the full .ph-dark treatment
   does not fit. Shrink it, and below 760px drop to the mark alone: a caption that
   cannot be read is worse than no caption. Added 2026-07-27 with the red-light and
   IV placeholders. */
.hframe.ph-dark{padding:14px;gap:8px}
.hframe.ph-dark .ph-id{font-size:15px;line-height:1.2}
.hframe.ph-dark p{font-size:11.5px;line-height:1.45;max-width:20ch;margin-top:0}
@media (max-width:760px){ .hframe.ph-dark p,.hframe.ph-dark .ph-id{display:none} }

/* The team CTA row, moved below BOTH people 2026-07-27 (it used to sit inside the
   second person's text column, which read as belonging to that one person). Lives
   here rather than in three page style blocks so the three service pages that use
   it cannot drift apart. Ink sections get the ink rule, not the paper one. */
.ledby-cta{margin-top:52px;padding-top:34px;border-top:1px solid var(--line);display:flex;justify-content:center}
.lane .ledby-cta,.approach .ledby-cta{border-top-color:rgba(255,255,255,.14)}
.ledby-cta .btn-ghost{margin-top:0}
@media (max-width:760px){ .ledby-cta{margin-top:36px;padding-top:26px} }