/* Love & Latte Co - site styles, v3 design system (2026-08-31).
   Rolled out from the Daniel-approved homepage prototype: Lora + Figtree +
   Yesteryear, ivory canvas, gold hairlines, wedding-framed imagery, premium
   red CTAs. One stylesheet for all 23 pages. */

:root{
  /* v3 tokens */
  --ivory:#FDFBF6;
  --paper:#FFFDF8;
  --shell:#F4EDE0;
  --panel:#F8F1E5;
  --ink:#241B14;
  --muted:#6E5E4D;
  --red:#8C0402;
  --red-deep:#6E0302;
  --red-soft:#F7E9E1;
  --gold-30:rgba(201,161,107,.3);
  --gold-38:rgba(201,161,107,.38);
  --gold-45:rgba(201,161,107,.45);
  --gold-55:rgba(201,161,107,.55);
  --gold-60:rgba(201,161,107,.6);
  --line:rgba(201,161,107,.32);
  --line-strong:rgba(201,161,107,.55);
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 2px 6px rgba(60,42,28,.06), 0 14px 34px -16px rgba(60,42,28,.24);
  --maxw:78rem;
  --font-display:"Lora",Georgia,'Times New Roman',serif;
  --font-body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --script:"Yesteryear",cursive;
  --ease-strong:cubic-bezier(0.23,1,0.32,1);
  /* scrollcraft engine tokens (homepage) */
  --sc-canvas:#FDFBF6;
  --sc-surface:#F4EDE0;
  --sc-ink:#241B14;
  --sc-ink-soft:#6E5E4D;
  --sc-accent:#8C0402;
  --sc-accent-ink:#FDFBF6;
  --sc-font-display:"Lora",Georgia,serif;
  --sc-font-text:"Figtree",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--font-body);font-size:16.8px;line-height:1.65;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--red);text-underline-offset:3px}
a:hover{color:var(--red-deep)}
a:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:3px}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.14;
  letter-spacing:-.01em;color:var(--ink);margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.35rem,4.9vw,3.6rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.22rem,2vw,1.5rem);font-weight:600}
h4{font-size:1rem;font-family:var(--font-body);font-weight:600;letter-spacing:.02em}
p{margin:0 0 1.1em}
.lede{font-size:clamp(1.1rem,1.9vw,1.3rem);color:var(--muted);line-height:1.6}
.display{font-family:var(--font-display);font-weight:500;letter-spacing:0;text-wrap:balance}
.accent-word{font-family:var(--script);font-size:1.16em;color:var(--red);font-weight:400}
.soft{color:var(--muted)}
.measure{max-width:34rem}
.fine{font-size:.9rem;line-height:1.6}
.eyebrow{display:inline-block;font:600 .68rem/1.4 var(--font-body);letter-spacing:.2em;
  text-transform:uppercase;color:var(--red);margin:0 0 14px}

.wrap{max-width:var(--maxw);margin-inline:auto;
  padding-left:clamp(1.3rem,4.4vw,4rem);padding-right:clamp(1.3rem,4.4vw,4rem)}
.narrow{max-width:760px}
section{padding:clamp(48px,7vw,86px) 0}
section.tight{padding:clamp(34px,4.5vw,54px) 0}
.shell{background:var(--shell)}
.paper{background:var(--paper)}

/* ---------- masthead ---------- */
.topnav{display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:1.05rem clamp(1.4rem,2.6vw,2.6rem)}
.topnav--over{position:absolute;inset:0 0 auto 0;z-index:40}
.topnav--bar{position:relative;z-index:40;background:var(--ivory);
  border-bottom:1px solid var(--gold-38)}
/* 2026-09-09 brief: "Increase the size of the navigation tabs. Slightly
   increase the logo size. Make the Instant Quote button more prominent." */
.topnav .brand img{height:clamp(54px,5vw,78px);width:auto;display:block}
.topnav--bar .brand img{height:clamp(50px,4.6vw,66px)}
.nav{display:flex;align-items:center;gap:clamp(1.4rem,2.6vw,2.4rem);
  font:500 1.02rem/1 var(--font-body)}
.topnav .nav>a,.topnav .nav .svc>a{color:var(--ink);text-decoration:none;padding:.5rem 0;
  border-bottom:0}
.topnav .nav>a:hover,.topnav .nav .svc>a:hover{color:var(--red)}
.topnav .nav>a[aria-current="page"],.topnav .nav .svc>a[aria-current="page"]{color:var(--red)}
.nav a:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:3px}
.nav .cta{background:linear-gradient(180deg,#9A0503,#7E0302);color:var(--ivory) !important;
  padding:.9rem 1.6rem !important;border-radius:999px;white-space:nowrap;font-weight:600;
  font-size:1rem;border:1px solid #6E0302;letter-spacing:.01em;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(201,161,107,.28),
    0 8px 20px -6px rgba(139,26,26,.55);
  transition:transform 140ms ease-out,box-shadow 140ms,filter 140ms}
.nav .cta:hover{filter:brightness(1.07);transform:translateY(-1px)}
.nav .cta:active{transform:scale(.97)}

/* Services dropdown: hover bridge + delayed close, works in masthead and slimbar */
.svc{position:relative;display:flex;align-items:center}
.svc::before{content:'';position:absolute;top:100%;left:-1.2rem;right:-1.2rem;height:.9rem}
.svc>a::after{content:"  \2193";font-size:.7em}
.submenu{position:absolute;top:100%;left:-1.2rem;margin:.7rem 0 0;padding:.7rem 0;
  list-style:none;background:var(--ivory);border:1px solid #E7DDCC;border-radius:14px;
  box-shadow:0 18px 44px rgba(20,12,8,.28);min-width:17.5rem;z-index:70;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity 160ms ease-out 120ms,transform 160ms ease-out 120ms}
.svc:hover .submenu,.svc:focus-within .submenu{opacity:1;transform:none;
  pointer-events:auto;transition-delay:0ms,0ms}
.submenu li{margin:0}
.submenu a{display:block;padding:.6rem 1.3rem;font-weight:500;font-size:.9rem;
  color:var(--ink);text-decoration:none;white-space:nowrap}
.submenu a:hover,.submenu a[aria-current="page"]{background:var(--shell);color:var(--red)}

/* slim bar: appears once the masthead is gone, and stays */
.slimbar{position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:.55rem clamp(1.4rem,2.6vw,2.6rem);
  background:rgba(253,251,246,.92);
  backdrop-filter:blur(12px) saturate(1.05);-webkit-backdrop-filter:blur(12px) saturate(1.05);
  border-bottom:1px solid var(--gold-38);
  box-shadow:0 10px 28px -16px rgba(60,42,28,.25);
  transform:translateY(-110%);transition:transform 320ms ease-out}
.slimbar.is-on{transform:none}
@supports (padding:env(safe-area-inset-top)){
  .slimbar{padding-top:calc(.5rem + env(safe-area-inset-top))}
}
.slimbar .brand img{height:38px;width:auto;display:block}
.slimbar .nav>a,.slimbar .nav .svc>a{color:var(--ink);font-size:.94rem;text-decoration:none;
  padding:.5rem 0}
.slimbar .nav .cta{padding:.7rem 1.3rem !important;font-size:.92rem}
.slimbar .submenu{top:calc(100% + .2rem)}
.slimbar .nav>a:hover,.slimbar .nav .svc>a:hover{color:var(--red)}

@media (max-width:900px){
  .topnav .nav>a,.topnav .nav .svc{display:none}
  .slimbar .nav>a:not(.cta),.slimbar .nav .svc{display:none}
  .topnav .mnav-btn,.slimbar .mnav-btn{display:inline-block}
  .topnav{padding:.85rem 1.1rem;gap:.7rem}
  .topnav .brand{flex:none}
  .topnav .brand img,.topnav--bar .brand img{height:44px}
  .topnav .nav,.slimbar .nav{gap:.6rem}
  .nav .cta{padding:.6rem 1rem !important;font-size:.82rem}
  /* the homepage masthead is logo + MENU only; interior pages keep their CTA */
  .topnav--over .nav .cta{display:none}
  .topnav--bar .nav>a.cta{display:inline-block}
  .slimbar{padding:.5rem 1.1rem;gap:.7rem}
  .slimbar .brand img{height:30px}
}
@media (max-width:560px){
  .hero{padding-top:4.4rem}
  .topnav{padding:.8rem .7rem;gap:.45rem}
  .topnav .brand img,.topnav--bar .brand img{height:34px}
  .nav .cta{padding:.55rem .8rem !important;font-size:.76rem}
  .mnav-btn{padding-left:.3rem;letter-spacing:.12em;font-size:.74rem}
  .slimbar{padding:.45rem .9rem;gap:.5rem}
  .slimbar .brand img{height:27px}
}
@media (max-width:388px){
  .topnav{padding:.75rem .5rem;gap:.3rem}
  .topnav .brand img,.topnav--bar .brand img{height:31px}
  .nav .cta{padding:.5rem .62rem !important;font-size:.7rem}
  .mnav-btn{padding-left:.1rem;letter-spacing:.09em;font-size:.7rem}
  .slimbar{padding:.45rem .5rem;gap:.3rem}
  .slimbar .brand img{height:25px}
}

/* ---------- mobile menu sheet ---------- */
.mnav-btn{display:none;background:none;border:0;font:600 .78rem/1 var(--font-body);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  padding:.55rem 0 .55rem .6rem;cursor:pointer}
.mnav-btn:focus-visible,.mnav-close:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.mnav{position:fixed;inset:0;z-index:95;display:flex;flex-direction:column;overflow:hidden;
  background:rgba(253,251,246,.98);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:1rem 1.4rem calc(1.6rem + env(safe-area-inset-bottom,0px));
  opacity:0;pointer-events:none;visibility:hidden;transform:translateY(-10px);
  transition:opacity 185ms var(--ease-strong),transform 185ms var(--ease-strong),
    visibility 0s linear 185ms}
.mnav.open{opacity:1;pointer-events:auto;visibility:visible;transform:none;
  transition-duration:260ms,260ms,0s;transition-delay:0s,0s,0s}
.mnav::after{content:'&';position:absolute;right:-1rem;bottom:-2rem;z-index:-1;
  font:400 16rem/1 var(--script);color:rgba(139,26,26,.05);pointer-events:none}
.mnav-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem}
.mnav-top img{height:42px;width:auto}
.mnav-close{background:none;border:0;font:600 .78rem/1 var(--font-body);
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  padding:.55rem 0 .55rem .6rem;cursor:pointer}
.mnav nav{display:grid;overflow-y:auto;scrollbar-width:none}
.mnav nav::-webkit-scrollbar{display:none}
.mnav nav>a{font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,5.6vw,2rem);color:var(--ink);text-decoration:none;
  padding:.62rem 0;border-bottom:1px solid rgba(201,161,107,.35);
  transition:transform 150ms var(--ease-strong)}
.mnav nav>a:active{color:var(--red);transform:scale(.98)}
.mnav-sub{display:flex;flex-wrap:wrap;gap:.5rem;padding:.85rem 0 1rem;
  border-bottom:1px solid rgba(201,161,107,.35)}
.mnav-sub a{font:500 .78rem/1 var(--font-body);color:var(--ink);text-decoration:none;
  border:1px solid var(--gold-55);border-radius:999px;padding:.48rem .78rem;
  background:var(--paper);display:inline-block;transition:transform 150ms var(--ease-strong)}
.mnav-sub a:active{transform:scale(.98)}
.mnav>.btn{margin-top:auto;text-align:center}
.mnav nav>a,.mnav-sub a{-webkit-tap-highlight-color:transparent}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:linear-gradient(180deg,#9A0503,#7E0302);color:var(--ivory);
  font:600 .98rem/1 var(--font-body);letter-spacing:.01em;padding:1rem 1.7rem;
  border-radius:999px;text-decoration:none;border:1px solid #6E0302;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(201,161,107,.28),
    0 1px 2px rgba(70,15,15,.25),0 10px 24px -8px rgba(139,26,26,.5);
  transition:transform 140ms ease-out,box-shadow 140ms,filter 140ms}
.btn:hover{color:var(--ivory);filter:brightness(1.07);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px rgba(201,161,107,.4),
    0 2px 4px rgba(70,15,15,.22),0 14px 30px -8px rgba(139,26,26,.55)}
.btn:active{transform:scale(.97);filter:brightness(.97)}
.btn:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.btn.lg{padding:1.05rem 1.9rem;font-size:1.02rem}
.btn.xl{padding:1.15rem 2.1rem;font-size:1.06rem}
.btnrow{display:flex;flex-wrap:wrap;align-items:center;gap:13px 18px;margin:26px 0 0}
.textlink{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:1rem;
  text-decoration:none;color:var(--red)}
.textlink::after{content:"›";font-weight:700;font-size:1.15em;line-height:1}
.textlink:hover{text-decoration:underline}
.textlink:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ---------- interior page heros: framed still in the system ---------- */
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,4vw,56px);
  align-items:center;padding:clamp(40px,5vw,64px) 0}
.hero-grid h1{margin-bottom:.35em}
.hero-grid .lede{max-width:34em}
.hero-media{position:relative;border-radius:4px;overflow:hidden;
  border:clamp(10px,1vw,14px) solid var(--paper);
  box-shadow:0 0 0 1px var(--gold-55),0 2px 6px rgba(60,42,28,.06),
    0 18px 44px rgba(60,42,28,.14),0 40px 80px -24px rgba(60,42,28,.2)}
.hero-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}}

/* ---------- generic grids ---------- */
.grid{display:grid;gap:clamp(16px,2.4vw,26px)}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.split.rev>*:first-child{order:2}
@media (max-width:860px){.split{grid-template-columns:1fr}.split.rev>*:first-child{order:0}}

/* ---------- cards ---------- */
.card{background:var(--paper);border:1px solid var(--gold-38);border-radius:var(--radius);
  padding:26px 26px 28px;box-shadow:0 5px 16px -9px rgba(60,42,28,.22)}
.card h3{margin-bottom:.4em}
.card p:last-child{margin-bottom:0}
.card ul{margin:.7em 0 0;padding-left:1.15em;color:var(--muted);font-size:.95rem}
.card li{margin:0 0 .45em}
.card-media{background:var(--paper);border:1px solid var(--gold-38);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 5px 16px -9px rgba(60,42,28,.22);display:flex;flex-direction:column}
.card-media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.card-media .body{padding:22px 24px 26px}
.card-media .body p:last-child{margin-bottom:0}
.card-media.wide img{aspect-ratio:3/2}

.figbox{border-radius:4px;overflow:hidden;
  border:clamp(10px,1vw,14px) solid var(--paper);
  box-shadow:0 0 0 1px var(--gold-55),0 2px 6px rgba(60,42,28,.06),
    0 18px 44px rgba(60,42,28,.14)}
.figbox img{width:100%;object-fit:cover}
.ratio-45 img{aspect-ratio:4/5}
.ratio-32 img{aspect-ratio:3/2}
.ratio-11 img{aspect-ratio:1/1}

/* ---------- steps (interior list) ---------- */
.steps{counter-reset:s;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  margin:34px 0 0;padding:0;list-style:none}
.steps li{counter-increment:s;background:var(--paper);border:1px solid var(--gold-38);
  border-radius:var(--radius);padding:22px 22px 24px;position:relative}
.steps li::before{content:counter(s);display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--red);color:var(--ivory);
  font-family:var(--font-body);font-weight:600;font-size:.92rem;margin:0 0 13px}
.steps strong{display:block;margin:0 0 5px;font-size:1.02rem}
.steps span{color:var(--muted);font-size:.94rem;line-height:1.55}

/* ---------- ticks ---------- */
.ticks{list-style:none;margin:1em 0 0;padding:0}
.ticks li{position:relative;padding-left:30px;margin:0 0 .62em;color:var(--muted)}
.ticks li::before{content:"";position:absolute;left:0;top:.52em;width:15px;height:9px;
  border-left:2.5px solid var(--red);border-bottom:2.5px solid var(--red);
  transform:rotate(-45deg)}
.ticks strong{color:var(--ink);font-weight:600}

/* ---------- menu lists ---------- */
.menu-list{list-style:none;margin:1em 0 0;padding:0;border-top:1px solid var(--gold-45)}
.menu-list li{padding:13px 0;border-bottom:1px solid var(--gold-30)}
.menu-list b{display:block;font-family:var(--font-body);font-weight:600;font-size:1rem}
.menu-list span{color:var(--muted);font-size:.93rem;line-height:1.5}

/* ---------- reviews ---------- */
.stars{color:var(--red);letter-spacing:.14em;font-size:1.05rem}
.rating-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:0 0 8px}
.rating-line b{font-size:1.6rem;font-family:var(--font-display)}
.rating-line a{color:var(--muted)}
.quote{background:var(--paper);border:1px solid var(--gold-38);border-radius:var(--radius);
  padding:26px 26px 24px;box-shadow:0 5px 16px -9px rgba(60,42,28,.22);
  display:flex;flex-direction:column}
.quote p{font-family:var(--font-display);font-size:1.05rem;line-height:1.55}
.quote footer{margin-top:auto;padding-top:14px;color:var(--muted);font-size:.9rem;
  border-top:1px solid var(--gold-30)}
.quote footer b{color:var(--ink);display:block;font-weight:600;font-family:var(--font-body)}

/* ---------- gallery ---------- */
.gallery{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;
  box-shadow:0 0 0 1px var(--gold-38),0 6px 18px -8px rgba(60,42,28,.28)}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--gold-45);margin:30px 0 0}
.faq details{border-bottom:1px solid var(--gold-45)}
.faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font-family:var(--font-display);font-weight:600;font-size:1.08rem;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2.5px solid var(--red);border-bottom:2.5px solid var(--red);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .answer{padding:0 0 22px;color:var(--muted)}
.faq .answer p:last-child{margin-bottom:0}

/* ---------- form ---------- */
.form{background:var(--paper);border:1px solid var(--gold-38);border-radius:var(--radius);
  padding:clamp(22px,3vw,34px);box-shadow:var(--shadow)}
.field{margin:0 0 18px}
.field label{display:block;font-weight:600;font-size:.93rem;margin:0 0 6px}
.field .hint{font-weight:400;color:var(--muted);font-size:.86rem}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--gold-55);border-radius:var(--radius-sm);
  font-family:inherit;font-size:1rem;color:var(--ink);background:var(--ivory)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--red);outline-offset:1px;border-color:var(--red);background:#fff}
.field textarea{min-height:130px;resize:vertical}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media (max-width:640px){.f2{grid-template-columns:1fr}}
.form .btn{width:100%;text-align:center}
.formnote{color:var(--muted);font-size:.88rem;margin:14px 0 0}

/* ---------- contact tiles ---------- */
.ctile{display:flex;gap:15px;align-items:flex-start;background:var(--paper);
  border:1px solid var(--gold-38);border-radius:var(--radius);padding:20px 22px;
  box-shadow:0 5px 16px -9px rgba(60,42,28,.22)}
.ctile .ico{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--red-soft);
  display:flex;align-items:center;justify-content:center}
.ctile .ico svg{width:19px;height:19px;stroke:var(--red);fill:none;stroke-width:1.9}
.ctile b{display:block;font-size:.97rem}
.ctile a{font-size:1.03rem;font-weight:600;text-decoration:none}
.ctile span{color:var(--muted);font-size:.9rem;display:block;margin-top:3px}

/* ---------- quote embed ---------- */
.quotebox{background:#fff;border:1px solid #E7DDCC;border-radius:18px;
  padding:clamp(18px,2.6vw,28px);box-shadow:0 24px 60px rgba(36,27,20,.12);min-height:340px}

/* ---------- pre-footer CTA band ---------- */
.band{position:relative;background:linear-gradient(180deg,var(--ivory) 0%,#F3E9D7 55%,#EBDCC2 100%);
  border-top:1px solid var(--gold-30);overflow:hidden}
.band::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 70% 0%,rgba(255,252,244,.9),rgba(255,252,244,0) 55%);
  pointer-events:none}
.band .wrap{position:relative}
.band h2,.band h3{color:var(--ink)}
.band p{color:var(--muted)}
.bandgrid{display:grid;grid-template-columns:1.3fr auto;gap:26px;align-items:center}
@media (max-width:760px){.bandgrid{grid-template-columns:1fr}}

/* ---------- serving strip ---------- */
.serving{display:flex;flex-wrap:wrap;gap:8px 10px;margin:18px 0 0;padding:0;list-style:none}
.serving li{background:var(--paper);border:1px solid var(--gold-45);border-radius:999px;
  padding:7px 15px;font-size:.9rem;color:var(--muted)}
.serving a{text-decoration:none;color:var(--muted)}
.serving li:hover{border-color:var(--red)}
.serving li:hover a{color:var(--red)}

/* ---------- footer ---------- */
.site-footer{background:#4E0D0D;color:#EAD3C2;
  padding:clamp(3.4rem,8vh,5rem) 0 clamp(2rem,5vh,2.8rem);
  font:400 .88rem/1.75 var(--font-body);border-top:1px solid var(--gold-55)}
.site-footer .flogo{height:clamp(44px,4vw,58px);width:auto;display:block;margin:0 0 1rem}
.site-footer a{color:#FDFBF6;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(234,211,194,.45);transition:text-decoration-color 140ms}
.site-footer a:hover{color:#FDFBF6;text-decoration-color:#FDFBF6}
.site-footer a:focus-visible{outline:2px solid #FDFBF6;outline-offset:3px}
.site-footer .mast{font-family:var(--font-display);font-weight:600;color:#FDFBF6;
  font-size:1.05rem;letter-spacing:.01em;margin:0 0 1.4rem}
.site-footer .towns{max-width:56rem;margin:0 0 .4rem}
.site-footer h4{color:#FDFBF6;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 14px;font-weight:600;font-family:var(--font-body)}
.fgrid{display:grid;gap:34px;grid-template-columns:1.2fr 1fr 1.8fr;
  margin-top:2rem;padding-top:1.6rem;border-top:1px solid rgba(234,211,194,.22)}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr 1fr;gap:22px}}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:0 0 8px}
.site-footer ul a{text-decoration:none}
.site-footer ul a:hover{text-decoration:underline}
.fbase{margin:2.2rem 0 0;padding:1.2rem 0 0;border-top:1px solid rgba(234,211,194,.22);
  display:flex;flex-wrap:wrap;gap:10px 22px;color:rgba(234,211,194,.8);font-size:.84rem}
.fcredit{margin:1.4rem 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  color:rgba(234,211,194,.8);font-size:.84rem}
.fcredit a{display:inline-flex}
.fcredit img{display:block;opacity:.8}
.fcredit a:hover img{opacity:1}

.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--red);
  padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- breadcrumbs ---------- */
.crumbs{background:var(--shell);border-bottom:1px solid var(--gold-30);font-size:.86rem}
.crumbs .wrap{padding-top:11px;padding-bottom:11px;display:flex;flex-wrap:wrap;gap:7px;
  align-items:center;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--red);text-decoration:underline}
.crumbs .sep{opacity:.5}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:600}

/* ---------- lane pills ---------- */
.lanes{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.lanes a{display:inline-block;background:var(--paper);border:1px solid var(--gold-55);
  border-radius:999px;padding:10px 18px;text-decoration:none;color:var(--ink);
  font-weight:600;font-size:.93rem;transition:transform 150ms var(--ease-strong)}
.lanes a:hover{border-color:var(--red);color:var(--red)}
.lanes a:active{transform:scale(.97)}
.lanes a[aria-current="page"]{background:var(--red-soft);border-color:var(--red);color:var(--red-deep)}

/* ---------- whole-card links ---------- */
.cardlink{text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%}
.cardlink .body{flex:1}
.card-media:has(.cardlink):hover,.arealink:hover{border-color:var(--red)}
.arealink{text-decoration:none;color:inherit;display:block;
  transition:transform 150ms var(--ease-strong)}
.arealink:active{transform:scale(.985)}
.more{display:inline-block;margin-top:11px;color:var(--red);font-weight:600;font-size:.9rem}
.more::after{content:" \203A";font-weight:700}

/* ---------- hero social proof ---------- */
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:22px 0 0;
  padding:14px 18px;background:var(--paper);border:1px solid var(--gold-38);
  border-radius:var(--radius);box-shadow:0 5px 16px -9px rgba(60,42,28,.22);max-width:36em}
.trust .score{display:flex;align-items:baseline;gap:8px}
.trust .score b{font-family:var(--font-display);font-size:1.5rem;line-height:1}
.trust .said{color:var(--muted);font-size:.93rem;line-height:1.45;flex:1 1 220px;margin:0}
.trust .said b{color:var(--ink);font-weight:600}
.helper{color:var(--muted);font-size:.97rem;margin:0 0 4px}

/* ---------- named clients (interior pill lists) ---------- */
.orgs{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 0;padding:0;list-style:none}
.orgs li{background:var(--paper);border:1px solid var(--gold-38);border-radius:999px;
  padding:8px 16px;font-size:.9rem;font-weight:500;color:var(--ink)}
.orgs.quiet li{background:transparent;border-color:var(--gold-55);color:var(--muted);
  font-weight:400}

/* ---------- pricing factors ---------- */
.factors{counter-reset:f;display:grid;gap:14px;margin:30px 0 0;padding:0;list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.factors li{counter-increment:f;background:var(--paper);border:1px solid var(--gold-38);
  border-radius:var(--radius);padding:24px;box-shadow:0 5px 16px -9px rgba(60,42,28,.22)}
.factors li::before{content:counter(f);display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:var(--red-soft);color:var(--red);
  font-family:var(--font-body);font-weight:700;font-size:.88rem;margin:0 0 12px}
.factors b{display:block;font-size:1.06rem;font-family:var(--font-display);margin:0 0 5px}
.factors span{color:var(--muted);font-size:.95rem;line-height:1.55}

/* ---------- fact rows ---------- */
.facts{list-style:none;margin:1.1em 0 0;padding:0;border-top:1px solid var(--gold-45)}
.facts li{display:grid;grid-template-columns:minmax(150px,.44fr) 1fr;gap:6px 22px;
  padding:15px 0;border-bottom:1px solid var(--gold-30)}
.facts b{font-family:var(--font-body);font-weight:600;font-size:.97rem}
.facts span{color:var(--muted);font-size:.96rem;line-height:1.55}
@media (max-width:560px){.facts li{grid-template-columns:1fr}}

/* ---------- two obvious paths on contact ---------- */
.paths{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin:30px 0 0}
.path{background:var(--paper);border:1px solid var(--gold-55);border-radius:var(--radius);
  padding:28px 26px 30px;box-shadow:0 5px 16px -9px rgba(60,42,28,.22);
  display:flex;flex-direction:column}
.path.lead{border-color:var(--red);border-width:2px}
.path h2{font-size:1.42rem;margin-bottom:.3em}
.path p{color:var(--muted);flex:1}
.path .btnrow{margin-top:8px}

/* ---------- callout ---------- */
.note{background:var(--red-soft);border:1px solid var(--gold-45);border-left:4px solid var(--red);
  border-radius:var(--radius-sm);padding:20px 22px;margin:26px 0 0}
.note p:last-child{margin-bottom:0}
.note b{color:var(--ink)}

/* ---------- portrait video ---------- */
.vwrap{border-radius:4px;overflow:hidden;background:var(--shell);position:relative;
  border:clamp(8px,.9vw,12px) solid var(--paper);
  box-shadow:0 0 0 1px var(--gold-55),0 2px 6px rgba(60,42,28,.06),
    0 18px 44px rgba(60,42,28,.14);
  width:100%;max-width:360px;margin-inline:auto}
.vwrap video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
@media (max-width:860px){.vwrap{max-width:300px}}
.vband{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:clamp(26px,4vw,56px);
  align-items:center}
@media (max-width:760px){
  .vband{grid-template-columns:1fr}
}

/* ---------- NAP block ---------- */
.nap{display:flex;flex-direction:column;gap:3px;font-size:.93rem;line-height:1.5}
.nap span:first-child{font-weight:600;color:#FDFBF6}
.social{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.social a{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;
  border:1px solid rgba(234,211,194,.35);border-radius:999px;font-size:.9rem;
  text-decoration:none}
.social a:hover{border-color:#FDFBF6;text-decoration:none;background:rgba(255,255,255,.07)}
.social svg{fill:none;stroke:currentColor;stroke-width:1.7;flex:0 0 auto}

/* ---------- mobile density ---------- */
@media (max-width:640px){
  .grid.g3,.grid.g4{grid-template-columns:1fr 1fr;gap:12px}
  .card-media img{aspect-ratio:4/3}
  .card-media .body{padding:14px 14px 16px}
  .card-media .body h3{font-size:1rem;line-height:1.25;margin-bottom:.3em}
  .card-media .body p{font-size:.88rem;line-height:1.45;margin-bottom:.5em}
  .card-media .more{font-size:.82rem;margin-top:6px}
  .card{padding:18px 18px 20px}
  .card h3{font-size:1.05rem}
  .card p{font-size:.9rem}
  .grid.g3 .quote{grid-column:1 / -1}
  section{padding:clamp(34px,6vw,86px) 0}
  section.tight{padding:clamp(26px,4vw,54px) 0}
  .fgrid{gap:22px}
  .site-footer li{margin:0 0 6px}
  .vwrap{max-width:220px}
  .quote{padding:18px 18px 16px}
  .quote p{font-size:.95rem;line-height:1.5}
  .quote footer{padding-top:10px}
  .figbox,.hero-media{border-width:8px}
}
@media (max-width:520px){
  .orgs{gap:7px}
  .orgs li{padding:6px 12px;font-size:.84rem}
}
@media (max-width:860px){
  .contact-top h1{font-size:clamp(1.75rem,7vw,2.1rem);margin-bottom:.25em}
  .contact-top .lede{font-size:1rem}
  .paths{gap:12px;margin-top:18px}
  .path{padding:20px 18px 22px}
  .path h2{font-size:1.16rem;margin-bottom:.25em}
  .path p{font-size:.93rem;margin-bottom:.7em}
  .path .btnrow{margin-top:4px}
  .path .facts{margin-top:.5em}
  .path .facts li{padding:9px 0}
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE - the v3 prototype, ported verbatim where it matters.
   These sections exist only on index.html.
   ═══════════════════════════════════════════════════════════════ */

[data-sc-progress]{position:fixed;top:0;left:0;right:0;height:3px;background:var(--red);
  transform-origin:0 50%;transform:scaleX(0);z-index:80}

/* ── 1 · hero: copy on the LEFT (2026-09-09 brief: "move the headline more
   to the left and increase the size", "use our signature red for the H1"),
   the framed montage on the right. Slides are photographs until her real
   clips land; the same box plays a <video> when a slide carries one.
   2026-09-14, Daniel's review: (a) the caption and the tab bar are ONE
   overlay stacked in flow, so the caption sits a fixed distance above the
   tabs however many lines they wrap to (it used to be placed by viewport
   height and landed on the bar at every laptop size); (b) a deeper scrim
   where the caption lives; (c) the copy column shares the frame's top and
   bottom edges, H1 to the image top and CTA to the image bottom; (d) the
   stat rows share one number column and the unit is set as a unit. ── */
.hero{position:relative;z-index:0;box-sizing:border-box;max-width:106rem;margin-inline:auto;
  min-height:100svh;
  padding:clamp(6.4rem,11.5vh,7.6rem) clamp(1.4rem,2.6vw,2.6rem) clamp(1.8rem,3.2vw,2.8rem);
  display:flex;align-items:center;gap:clamp(2.2rem,3.4vw,3.6rem)}
.hero::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:100vw;
  transform:translateX(-50%);z-index:-2;
  background:radial-gradient(58rem 30rem at 34% 16%,rgba(244,185,138,.13),transparent 68%);
  pointer-events:none}
.hero::after{content:'&';position:absolute;z-index:-1;left:clamp(1rem,6vw,7rem);top:46%;
  transform:translateY(-50%) rotate(-8deg);
  font:400 clamp(16rem,26vw,30rem)/1 var(--script);color:rgba(139,26,26,.04);
  pointer-events:none;user-select:none}
.hero-box{position:relative;flex:none;
  width:calc(56% + max(0px,(100vw - 106rem) / 2));
  margin-right:calc(-1 * max(0px,(100vw - 106rem) / 2));
  height:calc((100svh - clamp(6.2rem,11vh,7.4rem) - clamp(.8rem,1.6vw,1.6rem)) * .8);
  min-height:440px;border-radius:6px;overflow:hidden;
  border:clamp(16px,1.7vw,26px) solid var(--paper);
  box-shadow:0 0 0 1px var(--gold-55),0 2px 6px rgba(60,42,28,.06),
    0 18px 44px rgba(60,42,28,.12),0 44px 90px -20px rgba(60,42,28,.2)}
.hero-box::after{content:'';position:absolute;inset:0;border:1px solid rgba(201,161,107,.5);
  border-radius:3px;z-index:6;pointer-events:none}
.hero-slides,.slide{position:absolute;inset:0}
.slide{opacity:0;transition:opacity 700ms ease-out}
.slide.is-on{opacity:1}
.slide video,.slide .slide-img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%}
/* the scrim: a light diagonal wash across the frame, a soft fade at the top
   edge, and a deep pool in the bottom-left where the caption reads */
.hero-shade{position:absolute;inset:0;
  background:
    radial-gradient(64% 58% at 16% 100%,rgba(16,9,6,.5),rgba(16,9,6,0) 100%),
    linear-gradient(to top,rgba(16,9,6,.8) 0%,rgba(16,9,6,.6) 16%,rgba(16,9,6,.3) 38%,rgba(16,9,6,.06) 58%,rgba(16,9,6,0) 70%),
    linear-gradient(rgba(16,9,6,.26),rgba(16,9,6,0) 18%),
    linear-gradient(100deg,rgba(16,9,6,.22) 0%,rgba(16,9,6,.04) 45%,rgba(16,9,6,.1) 100%)}

/* the copy column is given the frame's own height (same formula as .hero-box)
   and is inset by the frame border, so
   the H1 meets the image's top edge and the CTA its bottom edge; past 40rem
   of height it stays centred instead of stretching thin */
.hero-fix{flex:1;min-width:0;max-width:40rem;display:flex;flex-direction:column;
  height:calc((100svh - clamp(6.2rem,11vh,7.4rem) - clamp(.8rem,1.6vw,1.6rem)) * .8);min-height:440px;
  justify-content:center;padding-block:clamp(16px,1.7vw,26px)}
.hero-glass{color:var(--ink);display:flex;flex-direction:column;align-items:flex-start;
  text-align:left;flex:1 1 auto;max-height:40rem}
.hero-glass h1{font-size:clamp(2.75rem,4.1vw,4.6rem);line-height:1.04;letter-spacing:-0.012em;
  margin:0 0 1.1rem;color:var(--red)}
.hero-glass .sub{font:400 clamp(1.08rem,1.35vw,1.28rem)/1.6 var(--font-body);color:var(--muted);
  margin:0 0 1.8rem;max-width:42ch}
.stats{display:flex;flex-wrap:wrap;gap:clamp(1.2rem,2vw,2.2rem);justify-content:flex-start;
  margin:auto 0 1.7rem}
.stat{text-align:left}
.stat+.stat{padding-left:clamp(1.2rem,2vw,2.2rem);border-left:1px solid var(--line)}
.stat-ic{width:15px;height:15px;fill:var(--muted);flex:none;align-self:center;display:none}
.stat b{display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,2vw,1.95rem);line-height:1.05;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.stat b .plus{color:var(--red);font-size:.58em;vertical-align:.3em;margin-left:.06em}
.stat b .unit{color:var(--red);font:600 .4em/1 var(--font-body);letter-spacing:.1em;
  text-transform:uppercase;margin-left:.32em;vertical-align:.24em}
.stat>span{display:block;font:600 .64rem/1.4 var(--font-body);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);max-width:11em;margin-top:.35rem}
@media (max-width:1600px){
  /* narrower copy column: one stat per row, icon + number + label, the
     three rows sharing a number column so the labels start on one line */
  .stat-ic{display:inline-block;margin:0}
  .stats{flex-direction:column;align-items:stretch;gap:.6rem}
  .stat{display:grid;grid-template-columns:15px 4.9rem minmax(0,1fr);column-gap:.7rem;
    align-items:baseline}
  .stat+.stat{padding-left:0;border-left:0}
  .stat>span{margin-top:0;max-width:none;white-space:nowrap}
  @supports (grid-template-columns:subgrid){
    .stats{display:grid;grid-template-columns:auto auto minmax(0,1fr);column-gap:.7rem;row-gap:.6rem}
    .stat{grid-column:1 / -1;grid-template-columns:subgrid}
  }
}

/* caption + tab bar: one overlay, stacked from the bottom of the frame */
.hero-ui{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  justify-content:flex-end;pointer-events:none}
.hero-caption{position:relative;pointer-events:auto;color:#FDF7EC;max-width:min(500px,66%);
  padding:0 clamp(1.1rem,2.4vw,2.4rem) clamp(1.2rem,2vw,1.8rem)}
.cap{display:none}
.cap.is-on{display:block;animation:capIn 520ms var(--ease-strong) both}
@keyframes capIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cap .cap-h{font-size:clamp(1.5rem,2.3vw,2.15rem);line-height:1.08;margin:0 0 .45rem;
  text-shadow:0 1px 2px rgba(10,6,4,.55),0 2px 22px rgba(10,6,4,.5)}
.cap .cap-h .accent-word{color:#F4B98A}
.cap p{font:400 .93rem/1.5 var(--font-body);color:#F7ECDD;margin:0 0 .65rem;max-width:40ch;
  text-shadow:0 1px 2px rgba(10,6,4,.6),0 2px 14px rgba(10,6,4,.45)}
.caplink{color:#F4B98A;font:600 .9rem/1 var(--font-body);text-decoration:none;
  text-shadow:0 1px 2px rgba(10,6,4,.6),0 2px 14px rgba(10,6,4,.45);
  -webkit-tap-highlight-color:transparent}
.caplink:hover{text-decoration:underline}
.caplink:focus-visible{outline:2px solid #F4B98A;outline-offset:3px}
.cap-anim .ch,.cap-anim .wd{display:inline-block;opacity:0}
.cap-anim .caplink{opacity:0;display:inline-block}
.cap.is-on .ch,.cap.is-on .wd,.cap.is-on .caplink{animation:inkIn 420ms ease-out both}
@keyframes inkIn{from{opacity:0;transform:translateY(7px);filter:blur(4px)}
  to{opacity:1;transform:none;filter:blur(0)}}
@media (prefers-reduced-motion:reduce){
  .cap.is-on{animation:none}
  .cap-anim .ch,.cap-anim .wd,.cap-anim .caplink{opacity:1;animation:none !important;
    filter:none;transform:none}
}

.hero-tabs{position:relative;pointer-events:auto;display:flex;
  border-top:1px solid rgba(253,247,236,.16);background:rgba(16,9,6,.46);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero-dots{display:none}
.tab{position:relative;flex:1 1 0;min-width:0;border:0;background:none;color:#EBDCCB;
  font:600 clamp(.66rem,.72vw,.76rem)/1.25 var(--font-body);letter-spacing:.05em;
  text-transform:uppercase;text-wrap:balance;
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:3.4rem;padding:.6rem .5rem .7rem;cursor:pointer;transition:background 140ms,color 140ms}
.tab:hover{background:rgba(253,247,236,.08);color:#fff}
.tab:focus-visible{outline:2px solid #F4B98A;outline-offset:-3px}
.tab.is-on{color:#fff}
.tab i{position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--red);
  transform:scaleX(0);transform-origin:0 50%}
.tab.is-on i{animation:tabRun var(--advance,7s) linear both}
@media (prefers-reduced-motion:reduce){.tab.is-on i{animation:none;transform:scaleX(1)}}
@keyframes tabRun{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:900px){
  /* the masthead sits over the hero; the bigger logo (09-13) needs the
     headline to start below it at every width, asserted by render-verify */
  .hero{padding-top:5rem;padding-inline:0;display:flex;flex-direction:column;
    align-items:stretch;min-height:0}
  .hero-glass h1{margin-bottom:.55rem}
  .hero-glass .sub{margin-bottom:.6rem;font-size:.95rem;line-height:1.5}
  .stats{gap:.45rem;margin-bottom:1.1rem}
  .hero-box{min-height:0;width:auto;height:auto;display:flex;flex-direction:column;
    border:0;border-radius:0;box-shadow:none;overflow:visible;margin-left:0}
  .hero-box::after{display:none}
  .hero-slides{position:relative;aspect-ratio:16 / 10;flex:none;overflow:hidden}
  .hero-shade{display:none}
  .hero::after{display:none}
  .hero-glass h1{font-size:clamp(2.05rem,9vw,2.6rem);line-height:1.1}
  .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(201,161,107,.28),
    0 6px 14px -6px rgba(60,42,28,.3)}
  .hero-dots{display:flex;justify-content:center;align-items:center;gap:0;padding:0}
  .hero-dots button{width:44px;height:44px;margin:-8px 0;display:grid;place-items:center;
    background:none;border:0;cursor:pointer;padding:0}
  .hero-dots button i{width:6px;height:6px;border-radius:50%;background:rgba(110,94,77,.35);
    transition:transform 180ms var(--ease-strong),background 180ms}
  .hero-dots button.is-on i{background:var(--red);transform:scale(1.5)}
  .hero-dots button:active i{transform:scale(1.2)}
  .hero-dots button:focus-visible{outline:2px solid var(--red);outline-offset:-8px;
    border-radius:50%}
  .hero-fix{order:0;margin:-.4rem 0 .6rem;max-width:none;padding:0 1.4rem;display:block;
    height:auto;min-height:0}
  .hero-glass{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
    gap:.4rem 1rem;align-items:start;max-height:none}
  .hero-glass h1{grid-column:1 / -1;grid-row:1}
  .hero-glass .sub{grid-column:1;grid-row:2 / 4}
  .hero-glass .stats{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:.6rem;
    margin:.1rem 0 0;align-content:start}
  .hero-glass .btn{grid-column:2;grid-row:3;justify-self:start;align-self:start;
    margin-top:.3rem;font-size:.8rem;padding:.6rem .95rem;white-space:nowrap}
  .stat{display:flex;align-items:baseline;gap:.45rem;text-align:left;min-width:0;
    padding-left:0;border-left:0}
  .stat b{font-size:1.15rem;flex:none}
  .stat>span{font-size:.56rem;letter-spacing:.08em;min-width:0;max-width:none;
    white-space:normal;margin-top:0}
  .stat-ic{width:13px;height:13px}
  .stats{justify-content:flex-start}
  /* the overlay covers exactly the 16:10 image (same width, same ratio), so
     the caption pill keeps its bottom-right seat above the dots */
  .hero-ui{inset:auto;top:0;left:0;right:0;aspect-ratio:16 / 10;align-items:flex-end;
    padding:0 .8rem 1.4rem 0}
  .hero-caption{max-width:78%;padding:.6rem .85rem .55rem;background:rgba(16,9,6,.55);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    border-radius:12px;color:#FDF7EC}
  .cap .cap-h{font-size:1.15rem;color:#FDF7EC;text-shadow:none}
  .cap p{display:none}
  .hero-caption .caplink{color:#F4B98A;font-size:.82rem;text-shadow:none}
  .hero-tabs{display:none}
  .tab{flex:none;padding:.85rem .85rem .95rem;white-space:nowrap}
}

/* ── 2 · "A Little Love From Our Clients": rotating review cards ──
   2026-09-09 brief: "Remove the current photo strip and replace it with
   rotating review cards ... 5-star ratings above each review. Auto-rotate or
   carousel style." A snap-scrolling track: three cards in view on desktop,
   two on tablet, one on a phone. */
.loves{background:var(--red);padding-block:clamp(3.8rem,8.5vh,6rem)}
.loves-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;
  gap:1rem 2rem;margin-bottom:1.8rem}
.loves-head h2{font-size:clamp(2.2rem,4.2vw,3.5rem);margin:.4rem 0 0}
.loves-head .rating-line{margin:0 0 .3rem;gap:8px}
.loves-head .rating-line b{font-size:1.25rem}
.loves-track{position:relative;display:flex;gap:clamp(.9rem,1.6vw,1.3rem);overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:.3rem 0 1rem}
.loves-track::-webkit-scrollbar{display:none}
.loves-track:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.rcard{flex:0 0 calc((100% - 2 * clamp(.9rem,1.6vw,1.3rem)) / 3);scroll-snap-align:start;
  background:var(--paper);border:1px solid var(--gold-38);border-radius:var(--radius);
  padding:1.5rem 1.5rem 1.35rem;box-shadow:0 5px 16px -9px rgba(60,42,28,.22);
  display:flex;flex-direction:column;gap:.7rem}
.rstars{color:var(--red);letter-spacing:.14em;font-size:1.05rem;line-height:1}
.rcard p{font-family:var(--font-display);font-size:1.02rem;line-height:1.55;margin:0;flex:1}
.rcard footer{padding-top:.8rem;border-top:1px solid var(--gold-30);font-size:.88rem;
  color:var(--muted);display:grid;gap:.1rem}
.rcard footer b{color:var(--ink);font-weight:600;font-family:var(--font-body)}
.loves-nav{display:flex;align-items:center;gap:.7rem;margin-top:.2rem}
.loves-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--gold-60);
  background:var(--paper);color:var(--ink);font:400 1.35rem/1 var(--font-display);cursor:pointer;
  display:grid;place-items:center;padding-bottom:3px;transition:transform 150ms var(--ease-strong)}
.loves-nav button:active{transform:scale(.93)}
.loves-nav button:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.loves-dots{display:flex;flex-wrap:wrap;margin-left:.4rem}
.loves-dots button{width:24px;height:44px;border:0;border-radius:0;background:none;padding:0;
  cursor:pointer;display:grid;place-items:center;box-shadow:none}
.loves-dots button i{width:6px;height:6px;border-radius:50%;background:rgba(110,94,77,.35);
  transition:transform 180ms var(--ease-strong),background 180ms}
.loves-dots button.is-on i{background:var(--red);transform:scale(1.5)}
@media (max-width:1000px){.rcard{flex-basis:calc((100% - clamp(.9rem,1.6vw,1.3rem)) / 2)}}
@media (max-width:640px){
  .rcard{flex-basis:88%;padding:1.2rem 1.15rem 1.1rem}
  .rcard p{font-size:.95rem;line-height:1.5}
  .loves-head h2{font-size:clamp(1.6rem,7vw,2rem)}
  .loves-dots{display:none}
}

/* ── 3 · "Built for Every Kind of Gathering": six visual cards ── */
.gather{padding-block:clamp(4.2rem,9vh,6.5rem)}
.gather h2{font-size:clamp(2.3rem,4.4vw,3.7rem);margin:.5rem 0 1.6rem}
.ggrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,1.8vw,1.5rem);
  margin-top:2rem}
.gcard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--gold-38);
  border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;
  box-shadow:0 5px 16px -9px rgba(60,42,28,.22);
  transition:transform 160ms var(--ease-strong),border-color 140ms;
  -webkit-tap-highlight-color:transparent}
.gcard:hover{border-color:var(--red);transform:translateY(-2px);color:inherit}
.gcard:active{transform:scale(.985)}
.gcard:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.gcard-media{display:block;aspect-ratio:3/2;overflow:hidden}
.gcard-media img{width:100%;height:100%;object-fit:cover;transition:transform 300ms ease-out}
.gcard:hover .gcard-media img{transform:scale(1.04)}
.gcard-body{display:flex;flex-direction:column;flex:1;padding:1.2rem 1.3rem 1.3rem;gap:.35rem}
.gcard h3{font-family:var(--font-display);font-weight:600;font-size:clamp(1.15rem,1.5vw,1.35rem);
  margin:0;line-height:1.2}
.gcard p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.55;flex:1}
.gcard .more{margin-top:.6rem}
.orgs-block{margin-top:3rem}
.orgs-block .lede{font:600 .68rem/1.5 var(--font-body);letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.orgs-block .orgs{display:flex;flex-wrap:wrap;gap:1.1rem 2.2rem;max-width:62rem;
  align-items:baseline;margin:0}
.orgs-block .orgs span{font:600 .8rem/1.4 var(--font-body);letter-spacing:.1em;
  text-transform:uppercase;color:#A08D75;white-space:nowrap}
@media (max-width:900px){.ggrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){
  .orgs-block .orgs{flex-wrap:nowrap;overflow-x:auto;gap:1.6rem;padding-bottom:.4rem;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .orgs-block .orgs::-webkit-scrollbar{display:none}
}
@media (max-width:640px){
  .ggrid{gap:.7rem;margin-top:1.4rem}
  .gcard-media{aspect-ratio:4/3}
  .gcard-body{padding:.8rem .85rem .9rem}
  .gcard h3{font-size:1rem;line-height:1.25}
  .gcard p{font-size:.82rem;line-height:1.45}
  .gcard .more{font-size:.82rem;margin-top:.4rem}
}

/* ── 4 · "More Than Just Coffee": one horizontal photograph with the phrase ── */
.moment{position:relative;height:clamp(420px,72svh,680px);overflow:hidden;background:var(--shell)}
.moment-media,.moment-media img{position:absolute;inset:0;width:100%;height:100%}
.moment-media img{object-fit:cover;object-position:50% 45%}
.moment .scrim{position:absolute;inset:0;
  background:linear-gradient(rgba(96,14,14,.10) 26%,rgba(108,16,16,.62) 60%,rgba(118,18,18,.90) 100%)}
.moment-copy{position:absolute;inset:auto 0 0 0;
  padding:0 clamp(1.3rem,5vw,5rem) clamp(2.6rem,7vh,4.2rem);color:#FDF7EC;text-align:center}
.moment h2{font-size:clamp(2.4rem,5vw,4.3rem);color:#FDF7EC;margin:0 0 .35rem;
  text-shadow:0 2px 20px rgba(10,6,4,.45)}
.moment h2 .accent-word{color:#FFFFFF}
.moment p{font:400 clamp(1.08rem,1.45vw,1.3rem)/1.5 var(--font-body);color:#F2DAD4;margin:0}
@media (max-width:640px){.moment{height:clamp(300px,62vw,420px)}}

/* ── 5 · the quote tool is the product ── */
.product{padding-block:clamp(4.5rem,10vh,7rem);background:var(--shell)}
.product-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(2rem,4.5vw,4.5rem);align-items:center}
.product h2{font-size:clamp(2.1rem,3.9vw,3.4rem);margin:.7rem 0 1.2rem}
.product .steps{display:grid;gap:.85rem;margin:1.5rem 0;grid-template-columns:1fr;
  counter-reset:none;padding:0;list-style:none}
.product .steps span{display:flex;align-items:baseline;gap:.7rem;
  font:500 1rem/1.5 var(--font-body);color:var(--ink)}
.product .steps i{font-style:normal;flex:none;display:grid;place-items:center;
  width:1.65rem;height:1.65rem;border-radius:50%;background:var(--red);color:var(--ivory);
  font:600 .78rem/1 var(--font-body);transform:translateY(.2rem)}
.quote-embed{background:#fff;border:1px solid #E7DDCC;border-radius:18px;
  padding:clamp(.9rem,1.8vw,1.6rem);box-shadow:0 24px 60px rgba(36,27,20,.12);min-height:26rem}
@media (max-width:900px){.product-grid{grid-template-columns:1fr}}

/* ── 6 · "What Sets Us Apart": five icon cards ── */
.apart{padding-block:clamp(4.2rem,9vh,6.5rem) clamp(3rem,7vh,5rem)}
.apart h2{font-size:clamp(2rem,3.6vw,3rem);margin:.5rem 0 1.8rem}
.apart-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(.9rem,1.6vw,1.3rem)}
.acard{background:var(--paper);border:1px solid var(--gold-38);border-radius:var(--radius);
  padding:1.35rem 1.25rem 1.3rem;display:grid;gap:.55rem;align-content:start;
  box-shadow:0 5px 16px -9px rgba(60,42,28,.22)}
/* ⛔ PHOTOGRAPHS, NOT ICON DISCS, since 2026-10-04. Julia: "Replace the current
   icons with photos from the new branding shoot." Square media keeps the row of
   five even although the source frames are a mix of portrait and landscape. */
.acard{padding:0 0 1.15rem;overflow:hidden}
.acard-media{display:block;aspect-ratio:1/1;overflow:hidden;
  border-radius:var(--radius) var(--radius) 0 0;background:var(--shell)}
.acard-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 300ms var(--ease-strong)}
.acard:hover .acard-media img{transform:scale(1.04)}
.acard h3{font-family:var(--font-display);font-weight:600;font-size:1.12rem;margin:1rem 1.1rem 0;line-height:1.25;color:var(--red)}
.acard p{margin:.45rem 1.1rem 0;font-size:.88rem;line-height:1.55;color:var(--muted)}
@media (max-width:1100px){.apart-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){
  .apart-grid{grid-template-columns:1fr 1fr;gap:.7rem}
  .acard{padding:1rem .95rem 1rem}
  .acard:last-child{grid-column:1 / -1}
  .acard h3{font-size:.98rem}
  .acard p{font-size:.8rem}
  .acard h3{margin-inline:.85rem}
  .acard p{margin-inline:.85rem}
}

/* ── 7 · "The Heart Behind the Cart" ── */
.heart{padding-block:clamp(3rem,7vh,5rem) clamp(4rem,9vh,6rem)}
.heart-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(1.8rem,4vw,4rem);align-items:center}
.heart-photos{display:grid;gap:1rem}
.heart-photos figure{margin:0;border-radius:4px;overflow:hidden;aspect-ratio:4 / 5;
  border:clamp(10px,1vw,14px) solid var(--paper);
  box-shadow:0 0 0 1px var(--gold-55),0 2px 6px rgba(60,42,28,.06),
    0 18px 44px rgba(60,42,28,.14),0 40px 80px -24px rgba(60,42,28,.2)}
.heart-photos img{width:100%;height:100%;object-fit:cover;display:block}
.heart-photos.two{grid-template-columns:1fr 1fr;align-items:start}
.heart-photos.two figure:last-child{margin-top:2.4rem}
/* THREE photos since 2026-10-04: her two portraits side by side with the team
   shot running full width beneath them, which is the only arrangement that
   does not crop the group photograph to a sliver. */
.heart-photos.three{grid-template-columns:1fr 1fr;align-items:start}
.heart-photos.three figure:nth-child(2){grid-column:1 / -1;aspect-ratio:4 / 3;order:3}
.heart-photos.three figure:nth-child(3){margin-top:2.4rem}
.heart h2{font-size:clamp(1.9rem,3.2vw,2.7rem);margin:.5rem 0 1rem;display:flex;
  align-items:center;gap:.45rem;flex-wrap:wrap}
.heart h2 .hh{width:.8em;height:.8em;fill:var(--red);flex:none}
.heart p{font:400 clamp(.95rem,1.05vw,1.05rem)/1.75 var(--font-body);color:var(--muted);
  max-width:60ch;margin:0 0 1em}
.heart p.lead{color:var(--ink);font-weight:500;font-size:clamp(1.02rem,1.15vw,1.12rem)}
.heart .sig{font-family:var(--script);color:var(--red);font-size:clamp(1.5rem,2vw,1.9rem);
  margin:.6rem 0 0;transform:rotate(-2.5deg);transform-origin:0 50%;max-width:none}
@media (max-width:820px){
  .heart-grid{grid-template-columns:1fr;gap:1.6rem}
  .heart-photos{max-width:300px;margin-inline:auto}
  .heart-photos.two,.heart-photos.three{max-width:none}
}

/* ── 8 · close: two options ── */
.close{position:relative;background:linear-gradient(180deg,#FDFBF6 0%,#F3E9D7 55%,#EBDCC2 100%);
  text-align:center;
  padding:clamp(5rem,13vh,9rem) clamp(1.3rem,5vw,5rem) clamp(4.5rem,11vh,7.5rem);overflow:hidden}
.close::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 70% 0%,rgba(255,252,244,.9),rgba(255,252,244,0) 55%);
  pointer-events:none}
.close h2{position:relative;font-size:clamp(2.2rem,4.4vw,3.8rem);margin:0 0 2rem}
.close-opts{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,320px));
  gap:1.2rem 1.6rem;justify-content:center}
.close .opt{background:var(--paper);border:1px solid var(--gold-38);border-radius:var(--radius);
  padding:1.6rem 1.4rem 1.4rem;display:grid;gap:.75rem;justify-items:center;
  box-shadow:0 5px 16px -9px rgba(60,42,28,.22)}
.close .opt.lead{border-color:var(--red);border-width:2px}
.close .opt p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.5}
.close .btn{white-space:nowrap}
.btn.ghost{background:var(--paper);color:var(--red);border:1.5px solid var(--red);box-shadow:none}
.btn.ghost:hover{background:var(--red-soft);color:var(--red-deep);filter:none;box-shadow:none}
@media (max-width:640px){.close-opts{grid-template-columns:1fr}}

/* ── contact page: option labels ── */
.opt-eb{display:inline-block;font:600 .66rem/1.4 var(--font-body);letter-spacing:.2em;
  text-transform:uppercase;color:var(--red);margin:0 0 .5rem}

/* ---------- touch devices: no false hover states, real press feedback ---------- */
@media (hover:none),(pointer:coarse){
  .btn:hover,.nav .cta:hover{transform:none;filter:none}
  .gcard:hover{transform:none;border-color:var(--gold-38)}
  .gcard:hover .gcard-media img{transform:none}
}
@media (hover:hover) and (pointer:fine){
  .loves-nav button:hover{border-color:var(--red);color:var(--red)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;
    scroll-behavior:auto !important}
}


/* ═══════════════════════════════════════════════════════════════════════════
   JULIA'S 2026-09-21 REVISION. Everything below was added or changed for that
   list. Headings and the type scale above were enlarged in the same pass.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The review band, on her brand red ──
   Her words: "Consider changing the review section background color to our
   brand red or incorporating more brand color into that section." Red was the
   one she named first. The cards stay cream so the reviews themselves stay as
   readable as they were; everything around them flips to light-on-red. */
.loves .eyebrow{color:#F3C8C0}
.loves-head h2{color:#FFF6F1}
.loves-head h2 .accent-word{color:#FFFFFF}
.loves-head .rating-line{color:#FFF6F1}
.loves-head .rating-line b{color:#FFF6F1}
.loves-head .rating-line .stars{color:#F4C9A1}
.loves-head .rating-line span{color:#F0CFC8 !important}
.loves-head .rating-line a{color:#FFF6F1;text-decoration-color:rgba(255,246,241,.5)}
.loves-head .rating-line a:hover{color:#fff}
.loves-track:focus-visible{outline-color:#FFF6F1}
.loves-nav button{border-color:rgba(255,246,241,.45);background:transparent;color:#FFF6F1}
.loves-nav button:hover{background:rgba(255,255,255,.12)}
.loves-nav button:focus-visible{outline-color:#FFF6F1}
.loves-dots button i{background:rgba(255,246,241,.42)}
.loves-dots button.is-on i{background:#FFF6F1}

/* ── The hero, after the three figures came out ──
   "Remove the stats section above the Instant Quote form." Removing them also
   removed the only social proof in the first screen, which her earlier spec
   explicitly asked for ("social proof/reviews immediately below or near the
   CTA"). One compact line keeps that promise in a single row. Daniel approved
   this reading on 2026-09-23. */
.hero-glass .btn.cta.lg{margin-top:auto}
.herotrust{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;
  margin:.95rem 0 0;font:500 .95rem/1.5 var(--font-body);color:var(--muted)}
.herotrust .stars{color:var(--red);letter-spacing:.1em;font-size:1rem;line-height:1}
.herotrust b{color:var(--ink);font-weight:650;font-size:1.05rem}
.herotrust a{color:var(--muted)}
.herotrust a:hover{color:var(--red)}
@media (max-width:700px){
  .herotrust{font-size:.86rem;gap:.35rem;margin-top:.7rem}
  .herotrust b{font-size:.95rem}
}

/* ── Built for Every Kind of Gathering: four icons, not six photos ──
   "Remove the photos and replace them with relevant icons. Remove the
   subheading. Add more brand color to this section." The tiles sit on a soft
   red wash with a red icon disc, which is where the extra brand color went. */
.gather{background:linear-gradient(180deg,var(--ivory) 0%,var(--red-soft) 100%)}
/* SIX tiles since 2026-10-04 (Julia's 10-01 list), so three across reads
   better than four with two orphans on the second row. */
.ggrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.gtile{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;
  background:var(--paper);border:1px solid var(--gold-38);border-radius:var(--radius);
  padding:1.6rem 1.5rem 1.7rem;box-shadow:0 5px 16px -9px rgba(60,42,28,.22)}
.gico{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:var(--red);box-shadow:0 6px 18px -8px rgba(140,4,2,.65)}
.gico svg{width:29px;height:29px;stroke:#FFF6F1;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.gtile h3{font-family:var(--font-display);font-weight:600;margin:.2rem 0 0;
  line-height:1.2;color:var(--red)}
.gtile p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.58}
@media (max-width:900px){.ggrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){
  .ggrid{grid-template-columns:1fr}
  .gtile{padding:1.25rem 1.2rem 1.3rem}
  .gico{width:50px;height:50px}
  .gico svg{width:25px;height:25px}
}

/* ── The Experiences hub cards ── */
.xcard{display:flex;flex-direction:column;gap:.6rem;padding:0 0 1.4rem;overflow:hidden;
  text-decoration:none;color:inherit}
.xcard-media{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0}
.xcard-media img{width:100%;height:100%;object-fit:cover;transition:transform 300ms ease-out}
.xcard:hover .xcard-media img{transform:scale(1.04)}
.xcard h2{margin:.9rem 1.3rem 0;font-size:clamp(1.4rem,2.2vw,1.85rem);color:var(--red)}
.xcard p{margin:0 1.3rem;color:var(--muted);font-size:.97rem;line-height:1.58;flex:1}
.xcard .textlink{margin:.3rem 1.3rem 0}
.xcard:hover{border-color:var(--red)}
/* ⛔ Julia, 2026-10-01: "Fit all four experience categories into a single row if
   possible." Four across on a desktop, which is the single row she asked for.
   Two across on a tablet and one on a phone, because four cards across a 390px
   screen gives each one 90px and nobody can read that. Told to her. */
.grid.g4.xrow{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.g4.xrow .xcard h2{font-size:clamp(1.15rem,1.5vw,1.4rem)}
.grid.g4.xrow .xcard p{font-size:.9rem}
@media (max-width:1000px){.grid.g4.xrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid.g4.xrow{grid-template-columns:1fr}}

/* ── Menu page ──
   "Please remove the current page heading." The display heading and its lede
   are gone; this is the quiet label that replaces them, so the page still has
   an H1 for Google and for screen readers without shouting one. */
.pagelabel{font-family:var(--font-body);font-weight:600;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--red);
  margin:0 0 1.4rem;line-height:1.4}
.menu-list .mnote{display:block;font-style:normal;font-size:.76rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin:.25rem 0 .1rem}

/* Keeps a hyphenated word whole, so "Add-Ons" cannot break across two lines. */
.nb{white-space:nowrap}

/* Her pricing factors went from four to five on 2026-09-21, and five items in a
   232px auto-fit grid left the fifth one stranded alone on a second row. A
   narrower track fits all five across on a desktop and still reflows to three,
   two and one, with auto-fit stretching each row so there is never an orphan
   gap beside the last card. */
.factors{grid-template-columns:repeat(auto-fit,minmax(198px,1fr))}
@media (max-width:1180px){.factors{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}}
.factors li{padding:22px 20px}