/* GoldenPaw Concrete - bespoke system. Warm, bold, craftsman.
   Gold + charcoal on bone paper. No pure white anywhere. */

:root{
  --ink:#171310;
  --char:#2a2320;
  --char-2:#3d3125;
  --gold:#c28a1a;
  --gold-hi:#e0a63a;
  --gold-soft:#f7e9c9;
  --bone:#fbf8f3;
  --bone-2:#f4efe6;
  --bone-3:#e9e1d3;
  --paper:#ffffff;
  --rule:rgba(23,19,16,.11);
  --rule-2:rgba(23,19,16,.06);
  --muted:rgba(23,19,16,.64);
  --muted-2:rgba(23,19,16,.45);
  --onchar:rgba(251,248,243,.76);
  --shadow:0 2px 4px rgba(23,19,16,.03), 0 12px 30px -18px rgba(23,19,16,.28);
  --shadow-lg:0 4px 8px rgba(23,19,16,.04), 0 30px 60px -30px rgba(23,19,16,.38);
  --r:14px;
  --r-sm:10px;
  --ease:cubic-bezier(.22,.68,.36,1);
  --max:1200px;
  --gut:clamp(20px,4vw,44px);
}

*,*::before,*::after{box-sizing:border-box}
/* DO NOT put overflow-x on html or body. On either one it creates a nested
   scroll container: window scroll offsets go stale AND every viewport-rooted
   IntersectionObserver stops firing, which silently kills the progress rail,
   header condense, stat counters and all reveal animations. There is no
   horizontal overflow on this site (audited), so nothing needs clamping. If
   one ever appears, fix the offending element, not the root. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
/* An inline <svg> with no width/height attribute has NO intrinsic size and will
   expand to fill whatever box it lands in. This baseline makes every icon
   sane by default; components below override with explicit sizes. This bug has
   now bitten three times (label span, wide card, hero button) - do not remove. */
svg{width:1em;height:1em;flex:0 0 auto}
.btn svg{width:18px;height:18px;flex:0 0 18px}
a{color:inherit}
h1,h2,h3,h4{font-family:'Figtree',system-ui,sans-serif;font-weight:800;line-height:1.1;letter-spacing:-.028em;margin:0}
h1{font-size:clamp(2.15rem,5vw,3.6rem);font-weight:900;letter-spacing:-.035em}
h2{font-size:clamp(1.6rem,3.2vw,2.45rem);font-weight:800}
h3{font-size:clamp(1.1rem,1.7vw,1.3rem);line-height:1.28;letter-spacing:-.015em;font-weight:700}
h4{font-size:1.03rem;font-weight:700;line-height:1.3}
p{margin:0 0 1.05em}
/* .wrap owns the horizontal gutter. It uses padding-INLINE deliberately.
   Any rule that lands on the same element as .wrap (.hero-in, .hdr-in, .narrow)
   must set vertical space with padding-BLOCK, never the `padding` shorthand.
   A shorthand here silently resets the gutter to 0 and text runs to the screen
   edge on mobile. This is exactly what happened to .hero-in on 2026-07-21. */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.narrow{max-width:760px}
.lede{font-size:clamp(1.09rem,1.9vw,1.3rem);line-height:1.55;color:var(--char-2)}
.eyebrow{
  font-size:.775rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--gold);display:flex;align-items:center;gap:.5rem;margin-bottom:.9rem;
}
/* the paw is the section glyph sitewide - quiet brand repetition */
.eyebrow::before{content:'';width:17px;height:17px;flex:0 0 17px;
  background:url('/assets/img/brand/paw-glyph.png') center/contain no-repeat}
.eyebrow.on-dark{color:var(--gold-hi)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------- skip + topbar */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bone);padding:.7rem 1rem;z-index:200}
.skip:focus{left:0}







/* ---------------------------------------------------------------- header */
.hdr{position:sticky;top:0;z-index:120;background:rgba(255,255,255,.97);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--rule)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:82px}
.logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.logo-img{height:38px;width:auto;display:block;transition:opacity .2s var(--ease)}
.logo:hover .logo-img{opacity:.85}
body.scrolled .logo-img{height:33px}
.ft .logo-img{height:44px}
.mobnav .logo-img{height:32px}
@media (max-width:520px){ .logo-img{height:31px} }
.logo .lt{display:flex;flex-direction:column;line-height:1}
.logo .l1{font-family:'Figtree',system-ui,sans-serif;font-weight:800;font-size:1.16rem;letter-spacing:-.02em;color:var(--ink)}
.logo .l2{font-family:'Figtree',system-ui,sans-serif;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:3px}

.nav{display:flex;align-items:center;gap:.15rem}
.nav > .navitem{position:relative}
.nav a.nl,.nav button.nl{
  font-family:'Figtree',system-ui,sans-serif;font-size:.945rem;font-weight:600;color:var(--char);
  text-decoration:none;padding:.62rem .72rem;border-radius:var(--r-sm);background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:.34rem;transition:color .18s var(--ease),background .18s var(--ease);
}
.nav a.nl:hover,.nav button.nl:hover,.nav .navitem:hover > .nl{color:var(--gold);background:var(--bone-2)}
.nl .chev{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s var(--ease)}
.navitem:hover .chev{transform:rotate(225deg) translate(-3px,-3px)}
.drop{
  position:absolute;top:100%;left:0;min-width:300px;background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:.6rem;margin-top:.3rem;
  opacity:0;visibility:hidden;transform:translateY(7px);transition:all .19s var(--ease);
}
.drop.wide{min-width:520px;column-count:2;column-gap:.4rem}
.navitem:hover .drop,.navitem:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{display:block;padding:.55rem .7rem;font-size:.885rem;font-weight:600;text-decoration:none;color:var(--char);border-left:2px solid transparent;break-inside:avoid}
.drop a small{display:block;font-weight:400;font-size:.755rem;color:var(--muted);margin-top:2px;line-height:1.35}
.drop a:hover{background:var(--bone-2);color:var(--ink);border-left-color:var(--gold)}
.drop .dhead{font-family:'Figtree',system-ui,sans-serif;font-size:.65rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted-2);padding:.7rem .7rem .3rem}

.hdr-cta{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.hphone{text-decoration:none;display:flex;flex-direction:column;line-height:1.1;text-align:right}
.hphone .hp1{font-family:'Figtree',system-ui,sans-serif;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.hphone .hp2{font-family:'Figtree',system-ui,sans-serif;font-weight:800;font-size:1.06rem;color:var(--ink)}
.hphone:hover .hp2{color:var(--gold)}

/* real hamburger - base rules first, then media query */
.burger{display:none;width:46px;height:46px;border:1px solid var(--rule);background:var(--paper);cursor:pointer;padding:0;position:relative;border-radius:var(--r-sm)}
.burger span{position:absolute;left:12px;width:22px;height:2px;background:var(--ink);transition:transform .25s var(--ease),opacity .18s var(--ease)}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:28px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobnav{display:none}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:'Figtree',system-ui,sans-serif;font-weight:700;font-size:.925rem;letter-spacing:.005em;
  padding:.92rem 1.6rem;text-decoration:none;cursor:pointer;border:2px solid transparent;border-radius:var(--r-sm);
  transition:transform .16s var(--ease),background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease);
  line-height:1.15;text-align:center;white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--gold);color:#fffdf7;border-color:var(--gold);box-shadow:0 10px 22px -14px rgba(194,138,26,.9)}
.btn-gold:hover{background:var(--gold-hi);border-color:var(--gold-hi);color:var(--ink)}
.btn-ink{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.btn-ink:hover{background:var(--gold);border-color:var(--gold);color:#fffdf7}
.btn-out{background:transparent;color:var(--ink);border-color:rgba(26,23,20,.3)}
.btn-out:hover{border-color:var(--ink);background:var(--ink);color:var(--bone)}
.btn-out.on-dark{color:var(--bone);border-color:rgba(247,242,232,.35)}
.btn-out.on-dark:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn-sm{padding:.62rem 1.05rem;font-size:.83rem}
.btn-lg{padding:1.02rem 1.9rem;font-size:1rem}

/* ------------------------------------------------------------------- hero */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img,.hero-bg video{width:100%;height:100%;object-fit:cover;display:block}
/* scrim sits mostly behind the copy column so the footage stays visible */
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(94deg,rgba(18,15,12,.82) 0%,rgba(18,15,12,.62) 32%,rgba(18,15,12,.2) 58%,rgba(18,15,12,.04) 100%);
}
.hero-in{position:relative;z-index:1;padding-block:clamp(2.8rem,5vw,4.6rem) clamp(2.8rem,5vw,4.4rem);
  display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(2rem,4.5vw,4.5rem);align-items:center}
.hero .eyebrow{color:var(--gold-hi)}
.hero .eyebrow::before{filter:brightness(1.18)}
.hero h1{color:#fff;max-width:16ch;text-shadow:0 2px 30px rgba(18,15,12,.55)}
.hero h1 em{font-style:normal;color:var(--gold-hi)}
.hero .hsub{font-size:clamp(1.05rem,1.6vw,1.19rem);color:rgba(255,255,255,.86);line-height:1.6;
  max-width:48ch;margin-top:1.15rem;text-shadow:0 1px 20px rgba(18,15,12,.5)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.9rem}
.hero-note{font-size:.85rem;color:rgba(255,255,255,.6);margin-top:1.4rem}
.hero-note b{color:#fff;font-weight:600}

/* compact dark quote card, three details only */
.hero-form .formcard{background:rgba(24,20,17,.9);backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.14);color:#fff;box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.hero-form .formcard .fc-title{color:#fff}
.hero-form .formcard .fsub{color:rgba(255,255,255,.62)!important}
.hero-form .formcard .fld label{color:rgba(255,255,255,.55)}
.hero-form .formcard .fld input,.hero-form .formcard .fld select,.hero-form .formcard .fld textarea{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#fff}
.hero-form .formcard .fld input::placeholder,.hero-form .formcard .fld textarea::placeholder{color:rgba(255,255,255,.38)}
.hero-form .formcard .fld input:focus,.hero-form .formcard .fld select:focus,.hero-form .formcard .fld textarea:focus{
  background:rgba(255,255,255,.12);border-color:var(--gold-hi);box-shadow:0 0 0 3px rgba(217,160,60,.18)}
.hero-form .formcard .fnote{color:rgba(255,255,255,.45)}
.hero-form .formcard .fnote a{color:var(--gold-hi)}
.hero-form .formcard select option{background:#241f1b;color:#fff}

/* trust bar under the hero, real facts not adjectives */
.trustbar{background:var(--paper);border-bottom:1px solid var(--rule)}
.trustbar .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding-block:1.5rem}
.tb-item{display:flex;gap:.85rem;align-items:flex-start}
.tb-ic{flex:0 0 40px;width:40px;height:40px;border-radius:var(--r-sm);background:var(--gold-soft);
  display:flex;align-items:center;justify-content:center}
.tb-ic svg{width:19px;height:19px;color:var(--gold)}
.tb-t{font-weight:700;font-size:.955rem;line-height:1.3;color:var(--ink)}
.tb-d{font-size:.85rem;color:var(--muted);line-height:1.4;margin-top:.15rem}

/* --------------------------------------------------------------- sections */
section{position:relative}
.sec{padding:clamp(3.2rem,6.5vw,5.6rem) 0}
.sec-tight{padding:clamp(2.4rem,4.5vw,3.6rem) 0}
.sec-bone2{background:var(--bone-2)}
.sec-paper{background:var(--paper)}
.sec-ink{background:var(--ink);color:var(--bone)}
.sec-ink h2,.sec-ink h3{color:var(--bone)}
.sec-ink p{color:var(--onchar)}
.sec-head{max-width:66ch;margin-bottom:clamp(1.9rem,3.5vw,2.9rem)}
.sec-head p{color:var(--muted);font-size:1.04rem;margin-top:.85rem;margin-bottom:0}
.sec-ink .sec-head p{color:var(--onchar)}
.rule-top{border-top:1px solid var(--rule)}

/* ------------------------------------------------------------------ cards */
.grid{display:grid;gap:1.1rem}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:start}
.split-wide-left{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:start}

.card{
  background:var(--paper);border:1px solid var(--rule);padding:1.6rem 1.5rem;border-radius:var(--r);
  display:flex;flex-direction:column;position:relative;
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
a.card{text-decoration:none;color:inherit}
a.card:hover{border-color:rgba(194,138,26,.5);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
a.card:hover h3{color:var(--gold)}
.card h3{margin-bottom:.5rem;transition:color .18s var(--ease)}
.card p{color:var(--muted);font-size:.925rem;margin-bottom:0}
.card .cnum{font-family:'Figtree',system-ui,sans-serif;font-size:.74rem;letter-spacing:.06em;color:var(--gold);margin-bottom:.7rem;display:flex;align-items:center;gap:.4rem;min-height:16px}
.card .cnum svg{width:16px;height:16px;flex:0 0 16px;color:var(--gold)}
.card .more{margin-top:auto;padding-top:1rem;font-size:.83rem;font-weight:700;color:var(--gold);display:inline-flex;align-items:center;gap:.35rem}
a.card:hover .more{gap:.6rem}
.card-img{margin:-1.6rem -1.5rem 1.25rem;border-radius:var(--r) var(--r) 0 0;overflow:hidden;background:var(--bone-3)}
.card-img img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s var(--ease)}
a.card:hover .card-img img{transform:scale(1.035)}

/* service cards on ink */
.sec-ink .card{background:rgba(247,242,232,.04);border-color:rgba(247,242,232,.14)}
.sec-ink .card p{color:var(--onchar)}
.sec-ink a.card:hover{border-color:var(--gold-hi)}

/* --------------------------------------------------------------- features */
.feat{display:flex;gap:1rem;align-items:flex-start}
.feat .fi{
  flex-shrink:0;width:42px;height:42px;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;
  background:var(--bone-2);border-radius:var(--r-sm);
}
.feat .fi svg{width:20px;height:20px;color:var(--gold)}
.sec-ink .feat .fi{background:rgba(247,242,232,.06);border-color:rgba(247,242,232,.16)}
.feat h3,.feat h4{font-size:1.03rem;font-weight:700;line-height:1.3;margin-bottom:.3rem;letter-spacing:normal;font-family:'Figtree',system-ui,sans-serif}
.feat p{font-size:.905rem;color:var(--muted);margin-bottom:0}
.sec-ink .feat p{color:var(--onchar)}

/* ---------------------------------------------------------------- process */
.steps{counter-reset:s;display:grid;gap:0}
.step{display:grid;grid-template-columns:64px 1fr;gap:1.3rem;padding:1.5rem 0;border-top:1px solid var(--rule)}
.step:last-child{border-bottom:1px solid var(--rule)}
.step .sn{
  font-family:'Figtree',system-ui,sans-serif;font-weight:800;font-size:1.5rem;color:var(--gold);
  padding-right:1rem;line-height:1;
}
.step h3{margin-bottom:.42rem}
.step p{color:var(--muted);margin-bottom:0;font-size:.945rem}

/* ------------------------------------------------------------------ prose */
.prose{max-width:74ch}
.prose h2{margin:2.4rem 0 .9rem}
.prose h2:first-child{margin-top:0}
.prose h3{margin:1.9rem 0 .6rem}
.prose p{color:var(--char-2)}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.15rem;color:var(--char-2)}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--gold)}
.prose a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;font-weight:600}
.prose a:hover{color:var(--ink)}
.prose strong{font-weight:700;color:var(--ink)}

.callout{
  border-left:3px solid var(--gold);background:var(--bone-2);padding:1.15rem 1.3rem;margin:1.8rem 0;border-radius:0 2px 2px 0;
}
.callout p{margin-bottom:0;font-size:.945rem;color:var(--char-2)}
.callout .ct{font-family:'Figtree',system-ui,sans-serif;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.5rem;font-weight:500}

/* ------------------------------------------------------------------- FAQ */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.15rem 2.6rem 1.15rem 0;position:relative;
  font-family:'Figtree',system-ui,sans-serif;font-weight:700;font-size:1.045rem;line-height:1.32;color:var(--ink);
  transition:color .18s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq summary::after{
  content:'';position:absolute;right:6px;top:1.5rem;width:11px;height:11px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg);transition:transform .22s var(--ease);
}
.faq details[open] summary::after{transform:rotate(225deg);top:1.72rem}
.faq .fa{padding:0 2.6rem 1.35rem 0}
.faq .fa p{color:var(--muted);margin-bottom:0;font-size:.965rem}

/* ------------------------------------------------------------------ form */
.formcard{color:var(--ink);background:var(--paper);border:1px solid rgba(26,23,20,.2);padding:clamp(1.5rem,3vw,2.1rem);border-radius:var(--r-sm);box-shadow:0 24px 60px -26px rgba(0,0,0,.75)}
.formcard .fc-title{font-family:'Figtree',system-ui,sans-serif;font-weight:800;font-size:clamp(1.16rem,2vw,1.42rem);line-height:1.22;letter-spacing:-.01em;margin:0 0 .4rem;color:var(--ink)}
.formcard .fsub{color:var(--muted)!important;font-size:.9rem;margin-bottom:1.35rem}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.fld{margin-bottom:.85rem}
.fld label{display:block;font-family:'Figtree',system-ui,sans-serif;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2);margin-bottom:.4rem;font-weight:500}
.fld input,.fld select,.fld textarea{
  width:100%;padding:.76rem .85rem;border:1px solid var(--rule);background:var(--bone);color:var(--ink);
  font-family:'Figtree',system-ui,sans-serif;font-size:.945rem;border-radius:var(--r-sm);
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--gold);background:var(--paper);box-shadow:0 0 0 3px rgba(194,138,26,.13)}
.fld textarea{min-height:104px;resize:vertical}
.fnote{font-size:.755rem;color:var(--muted-2);margin-top:.85rem;line-height:1.45}
.fmsg{display:none;padding:.9rem 1rem;border-radius:var(--r-sm);font-size:.9rem;font-weight:600;margin-bottom:1rem}
.fmsg.ok{display:block;background:#e8f1e4;border:1px solid #b6cfa9;color:#2f4a26}
.fmsg.err{display:block;background:#f7e6e2;border:1px solid #ddb3a8;color:#7a3323}
.hp{position:absolute;left:-9999px}

/* --------------------------------------------------------------- CTA band */
.ctaband{background:var(--char);color:var(--bone);border-top:3px solid var(--gold)}
.ctaband .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.7rem;padding-block:2.4rem;flex-wrap:wrap}
.ctaband h2{color:var(--bone);font-size:clamp(1.35rem,2.4vw,1.85rem);max-width:22ch}
.ctaband p{color:var(--onchar);margin:.55rem 0 0;font-size:.955rem;max-width:52ch}
.ctaband .cb-a{display:flex;gap:.7rem;flex-wrap:wrap;flex-shrink:0}

/* ------------------------------------------------------------------ chips */
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{
  font-size:.83rem;font-weight:600;padding:.42rem .78rem;border:1px solid var(--rule);background:var(--paper);
  text-decoration:none;color:var(--char);border-radius:var(--r-sm);transition:all .17s var(--ease);
}
.chip:hover{border-color:var(--gold);color:var(--gold);background:var(--bone-2)}
.sec-ink .chip{background:rgba(247,242,232,.05);border-color:rgba(247,242,232,.16);color:var(--bone)}
.sec-ink .chip:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}

/* --------------------------------------------------------------- linklist */
.linklist{display:grid;gap:0;border-top:1px solid var(--rule)}
.linklist a{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.85rem 0;
  border-bottom:1px solid var(--rule);text-decoration:none;font-weight:600;font-size:.955rem;color:var(--char);
  transition:padding-left .2s var(--ease),color .18s var(--ease);
}
.linklist a:hover{color:var(--gold);padding-left:.5rem}
.linklist a span{font-family:'Figtree',system-ui,sans-serif;font-size:.72rem;color:var(--muted-2);font-weight:400;flex-shrink:0}

/* ----------------------------------------------------------- breadcrumbs */
.crumbs{font-size:.775rem;color:var(--muted-2);padding:.95rem 0;border-bottom:1px solid var(--rule-2);background:var(--bone)}
.crumbs a{color:var(--muted);text-decoration:none;font-weight:600}
.crumbs a:hover{color:var(--gold)}
.crumbs .sep{margin:0 .45rem;opacity:.5}

/* ----------------------------------------------------------------- stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--rule);background:var(--paper)}
.stat{padding:1.4rem 1.2rem;border-right:1px solid var(--rule)}
.stat:last-child{border-right:0}
.stat .sv{font-family:'Figtree',system-ui,sans-serif;font-weight:800;font-size:1.55rem;color:var(--gold);line-height:1;margin-bottom:.4rem}
.stat .sl{font-size:.845rem;color:var(--muted);line-height:1.4}

/* ---------------------------------------------------------------- footer */
.ft{background:var(--ink);color:var(--onchar);padding:clamp(2.8rem,5vw,4rem) 0 0;font-size:.9rem}
.ft-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.15fr 1fr;gap:2rem 1.8rem;padding-bottom:2.4rem;align-items:start}
.ft .fth,.ft h4{font-family:'Figtree',system-ui,sans-serif;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:500;margin-bottom:1rem;color:var(--gold-hi)}
.ft a{color:var(--onchar);text-decoration:none;transition:color .18s var(--ease)}
.ft a:hover{color:var(--gold-hi)}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{margin-bottom:.55rem;line-height:1.4}
.ft .fcol li a{display:inline-block}
.ft .fbrand p{color:rgba(247,242,232,.55);max-width:34ch;font-size:.875rem;margin:1rem 0 1.2rem}
.ft .fnap{font-style:normal;line-height:1.8;font-size:.875rem}
.ft .fnap b{color:var(--bone);font-weight:600}
.ft .fphone{color:var(--bone);font-weight:700;font-size:1rem}
.ft .fhours{color:rgba(247,242,232,.5)}
.ft .fcta{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1.3rem}

/* full width city strip: fills the space under the brand block with something
   that actually earns its place rather than leaving a dead corner */
.ft-cities{border-top:1px solid rgba(247,242,232,.13);padding:1.6rem 0 1.4rem}
.ft-cities .fth,.ft-cities h4{margin-bottom:.9rem}
.ft-citylist{display:flex;flex-wrap:wrap;gap:.3rem .1rem;line-height:1.7}
.ft-citylist a{font-size:.83rem;color:rgba(247,242,232,.6);padding:.1rem .55rem;position:relative}
.ft-citylist a:not(:last-child)::after{content:'';position:absolute;right:-1px;top:50%;transform:translateY(-50%);
  width:1px;height:11px;background:rgba(247,242,232,.18)}
.ft-citylist a:hover{color:var(--gold-hi)}

.ft-bot{border-top:1px solid rgba(247,242,232,.13);padding:1.3rem 0;display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;font-size:.775rem;color:rgba(247,242,232,.45)}
.ft-bot a{color:rgba(247,242,232,.6)}
.attrib{font-size:.71rem;color:rgba(247,242,232,.34);line-height:1.55;padding:1.2rem 0 1.4rem;
  border-top:1px solid rgba(247,242,232,.08)}

/* ------------------------------------------------------------- call bar */
.callbar{display:none}

/* ------------------------------------------------------------- reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in,.no-js .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ------------------------------------------------------------ grain */
.grain{display:none}

/* ================================================================ MOBILE
   Media queries carry the same or higher specificity than the base grid
   rules so compound classes cannot beat them. */
@media (max-width:1040px){
  .nav{display:none}
  .burger{display:block}
  .hdr-cta .btn{display:none}
  .hero-in{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1.4fr 1fr 1fr}
  .ft .fbrand{grid-column:1 / -1}
  .ft-top{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--rule)}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.g3 > *:last-child:nth-child(odd),
  .grid.g4 > *:last-child:nth-child(odd){grid-column:1 / -1}
  .drop.wide{min-width:0;column-count:1}
  .mobnav{
    display:block;position:fixed;top:0;bottom:0;left:auto;right:-101vw;
    width:min(400px,88vw);background:var(--paper);
    z-index:150;transition:right .3s var(--ease),visibility .3s var(--ease);
    visibility:hidden;overflow-y:auto;box-shadow:-20px 0 60px -30px rgba(26,23,20,.7);
  }
  .mobnav.open{right:0;visibility:visible}
  .mobnav .mn-hd{display:flex;justify-content:space-between;align-items:center;padding:1.1rem var(--gut);border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--paper);z-index:2}
  .mobnav .mn-x{width:42px;height:42px;border:1px solid var(--rule);background:none;cursor:pointer;font-size:1.4rem;line-height:1;color:var(--ink);border-radius:var(--r-sm)}
  .mobnav .mn-body{padding:.6rem var(--gut) 3rem}
  .mobnav details{border-bottom:1px solid var(--rule-2)}
  .mobnav summary{list-style:none;cursor:pointer;padding:.95rem 0;font-family:'Figtree',system-ui,sans-serif;font-weight:700;font-size:1.03rem;position:relative}
  .mobnav summary::-webkit-details-marker{display:none}
  .mobnav summary::after{content:'';position:absolute;right:4px;top:1.28rem;width:9px;height:9px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform .2s var(--ease)}
  .mobnav details[open] summary::after{transform:rotate(225deg)}
  .mobnav .mn-sub{padding:0 0 .8rem .8rem}
  .mobnav .mn-sub a{display:block;padding:.5rem 0;font-size:.925rem;font-weight:600;color:var(--char);text-decoration:none}
  .mobnav .mn-sub a:hover{color:var(--gold)}
  .mobnav > .mn-body > a.mn-top{display:block;padding:.95rem 0;font-family:'Figtree',system-ui,sans-serif;font-weight:700;font-size:1.03rem;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--rule-2)}
  .mobnav .mn-cta{display:grid;gap:.6rem;margin-top:1.4rem}
  .mob-scrim{position:fixed;inset:0;background:rgba(26,23,20,.5);z-index:140;opacity:0;visibility:hidden;transition:opacity .25s var(--ease)}
  .mob-scrim.on{opacity:1;visibility:visible}
  body.locked{overflow:hidden}
  .callbar{
    display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:100;
    border-top:1px solid rgba(26,23,20,.2);
  }
  .callbar a{
    padding:.92rem .5rem;text-align:center;font-weight:700;font-size:.92rem;text-decoration:none;
    display:flex;align-items:center;justify-content:center;gap:.42rem;line-height:1;
  }
  .callbar a svg{width:17px;height:17px;flex:0 0 17px}
  .callbar .cb1{background:var(--ink);color:var(--bone)}
  .callbar .cb2{background:var(--gold);color:#fffdf7}
  .ft{padding-bottom:64px}
}

@media (max-width:760px){
  body{font-size:16.5px}
  :root{--gut:20px}
  .hero h1{max-width:none}
  .hero-in{padding-block:2.6rem 2.4rem}
  .hero .hsub,.hrot{max-width:none}
  .hero-badges{gap:.45rem;margin-top:1.35rem}
  .hbadge{font-size:.775rem;padding:.42rem .7rem}
  .chip{padding:.55rem .85rem;font-size:.86rem}
  .formcard{padding:1.35rem 1.2rem}
  .card{padding:1.3rem 1.2rem}
  .card-img{margin:-1.3rem -1.2rem 1.1rem}
  .faq summary{padding-right:2.2rem;font-size:1rem}
  .faq .fa{padding-right:0}
  .sec-head{margin-bottom:1.7rem}
  .prose{max-width:none}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:minmax(0,1fr)}
  .split,.split-wide-left{grid-template-columns:minmax(0,1fr)}
  .frow{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:minmax(0,1fr)}
  .stat{border-right:0;border-bottom:1px solid var(--rule)}
  .stat:last-child{border-bottom:0}
  .ft-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.9rem 1.4rem}
  .ft .fbrand{grid-column:1 / -1}
  .ft-citylist a{font-size:.8rem}
  .ctaband .wrap{flex-direction:column;align-items:flex-start}
  .step{grid-template-columns:44px 1fr;gap:.95rem}
  .steprail{left:44px}
  .step .sn{font-size:1.2rem;padding-right:.7rem}
  
  
  .hero-cta .btn{flex:1 1 100%}
  .btn{white-space:normal}
}
@media (max-width:420px){
  .logo .l1{font-size:1.02rem}
  .hphone{display:none}
}

/* ==================================================================
   MOTION + DEPTH LAYER
   Everything here is disabled wholesale under prefers-reduced-motion
   at the bottom of this block.
   ================================================================== */

/* ---- scroll progress rail */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;background:transparent;pointer-events:none}
.progress b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-hi));
  box-shadow:0 0 12px rgba(221,162,60,.55);transition:width .12s linear}

/* ---- header condense on scroll */
.hdr{transition:box-shadow .3s var(--ease),background .3s var(--ease)}
.hdr-in{transition:min-height .3s var(--ease)}
body.scrolled .hdr{box-shadow:0 12px 30px -24px rgba(26,23,20,.85);background:rgba(255,252,246,.96);backdrop-filter:saturate(1.4) blur(8px)}
body.scrolled .hdr-in{min-height:68px}

body.scrolled 

/* ---- hero: slow drift on the photograph */
.hero-bg img{animation:kb 34s var(--ease) infinite alternate;transform-origin:62% 55%}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.13)}}

/* ---- hero entrance, line by line */
.hr-1,.hr-2,.hr-3,.hr-4,.hr-5,.hr-6,.hr-7{opacity:0;transform:translateY(18px);
  animation:heroIn .82s var(--ease) forwards}
.hr-1{animation-delay:.05s}.hr-2{animation-delay:.15s}.hr-3{animation-delay:.28s}
.hr-4{animation-delay:.38s}.hr-5{animation-delay:.48s}.hr-6{animation-delay:.56s}
.hr-7{animation-delay:.3s}
@keyframes heroIn{to{opacity:1;transform:none}}
.no-js .hr-1,.no-js .hr-2,.no-js .hr-3,.no-js .hr-4,.no-js .hr-5,.no-js .hr-6,.no-js .hr-7{opacity:1;transform:none;animation:none}

.hero h1{position:relative}
.hero h1 em{position:relative;white-space:nowrap}
.hero h1 em::after{content:'';position:absolute;left:0;right:0;bottom:.06em;height:.09em;background:var(--gold);
  transform:scaleX(0);transform-origin:left;animation:underline .85s var(--ease) .75s forwards;border-radius:var(--r-sm)}


/* ---- rotating service line */
.hrot{text-shadow:0 1px 18px rgba(26,23,20,.75);font-family:'Figtree',system-ui,sans-serif;font-weight:700;font-size:clamp(1.12rem,2.1vw,1.5rem);
  color:var(--onchar);margin:.85rem 0 0;line-height:1.3;display:flex;flex-wrap:wrap;gap:.4rem;align-items:baseline}
/* inline-grid stacks every word in one cell, so the box auto-sizes to the
   longest option and nothing can ever be clipped mid-word */
.rot{display:inline-grid;height:1.35em;overflow:hidden;vertical-align:bottom}
.rot .rw{grid-area:1/1;align-self:start;white-space:nowrap;color:var(--gold-hi);
  opacity:0;transform:translateY(85%);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rot .rw.on{opacity:1;transform:none}
.rot .rw.out{opacity:0;transform:translateY(-85%)}

/* ---- hero city ticker */
.hero-ticker{position:relative;border-top:1px solid rgba(247,242,232,.14);
  background:rgba(26,23,20,.55);overflow:hidden;padding:.7rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tk-track{display:flex;align-items:center;gap:1rem;width:max-content;animation:tick 68s linear infinite}
.hero-ticker:hover .tk-track{animation-play-state:paused}
.tk-track a{font-family:'Figtree',system-ui,sans-serif;font-size:.78rem;letter-spacing:.03em;
  color:rgba(247,242,232,.62);text-decoration:none;transition:color .2s var(--ease);white-space:nowrap}
.tk-track a:hover{color:var(--gold-hi)}
.tk-track i{color:var(--gold);font-style:normal;opacity:.55;font-size:.6rem}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- reveal upgrade: wipe + rise */
.rv{opacity:0;transform:translateY(20px);clip-path:inset(0 0 12% 0);
  transition:opacity .72s var(--ease),transform .72s var(--ease),clip-path .72s var(--ease)}
.rv.in,.no-js .rv{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

/* ---- eyebrow rule draws in */


/* ---- cards: corner ticks + gold edge */
.card{overflow:hidden}

a.card .more{transition:gap .25s var(--ease),letter-spacing .25s var(--ease)}

/* ---- button sheen */
.btn{position:relative;overflow:hidden;isolation:isolate}


/* ---- prose link underline sweep */
.prose a{text-decoration:none;background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0 1.5px;background-repeat:no-repeat;background-position:0 100%;
  border-bottom:1px solid rgba(194,138,26,.4);transition:background-size .35s var(--ease),color .2s var(--ease)}
.prose a:hover{background-size:100% 1.5px;border-bottom-color:transparent}

/* ---- process rail fills on scroll */
.steps{position:relative}
.steprail{position:absolute;left:64px;top:0;bottom:0;width:2px;background:var(--rule);display:block}
.steprail b{display:block;width:100%;height:0;background:var(--gold);transition:height .18s linear}
.sec-ink .steprail{background:rgba(247,242,232,.16)}
.step .sn{transition:color .3s var(--ease),transform .3s var(--ease)}
.step.lit .sn{color:var(--gold-hi);transform:translateX(2px)}

/* ---- stat counters */
.stat .sv b.cnt{font-variant-numeric:tabular-nums;font-weight:800;color:inherit}
.stat{transition:background .3s var(--ease)}
.stat:hover{background:var(--bone-2)}

/* ---- section hairline texture on ink panels */

.sec-ink > *{position:relative}

/* ---- nav dropdown entrance polish */
.drop a{transition:background .18s var(--ease),color .18s var(--ease),border-left-color .18s var(--ease),padding-left .2s var(--ease)}
.drop a:hover{padding-left:1rem}

/* ---- FAQ answer slide */
.faq details[open] .fa{animation:faqIn .38s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---- form focus lift */
.formcard{transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.formcard:focus-within{transform:translateY(-2px)}

@media (max-width:1040px){
  .hero-bg img{animation:none}
  .hero-ticker{display:none}
}
@media (max-width:760px){
  .hrot{display:block}
  .rot{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .hero-bg img,.tk-track{animation:none!important}
  .hr-1,.hr-2,.hr-3,.hr-4,.hr-5,.hr-6,.hr-7{opacity:1!important;transform:none!important;animation:none!important}
  .hero h1 em::after{transform:scaleX(1);animation:none}
  .rv{opacity:1!important;transform:none!important;clip-path:none!important}
  .rot .rw{position:static;opacity:1;transform:none}
  .rot .rw:not(.on){display:none}
  .progress b{transition:none}
}

/* ==================================================================
   RICH CONTENT COMPONENTS
   ================================================================== */

/* ---- answer-first box: the block AI engines lift */
.answerbox{
  position:relative;background:var(--paper);border:1px solid var(--rule);
  border-left:4px solid var(--gold);padding:1.4rem 1.5rem;margin:0 0 1.9rem;border-radius:0 var(--r-sm) var(--r-sm) 0;
  box-shadow:0 10px 30px -26px rgba(26,23,20,.6);
}
.ab-label{font-family:'Figtree',system-ui,sans-serif;font-size:.73rem;letter-spacing:.075em;text-transform:uppercase;
  color:var(--gold);font-weight:500;display:block;margin-bottom:.75rem}
.ab-q{font-family:'Figtree',system-ui,sans-serif;font-weight:700;font-size:1.06rem;line-height:1.35;color:var(--ink);margin:0 0 .6rem}
.ab-a{font-size:1.02rem;line-height:1.62;color:var(--char-2);margin:0}
.ab-note{font-size:.83rem;color:var(--muted-2);margin:.7rem 0 0;font-style:italic}

/* ---- key takeaways */
.takeaways{background:var(--bone-2);border:1px solid var(--rule);padding:1.3rem 1.45rem;margin:1.9rem 0;border-radius:var(--r-sm)}
.tk-label{font-family:'Figtree',system-ui,sans-serif;font-size:.73rem;letter-spacing:.075em;text-transform:uppercase;
  color:var(--gold);font-weight:500;display:block;margin-bottom:.85rem}
.takeaways ul{margin:0;padding:0;list-style:none;display:grid;gap:.7rem}
.takeaways li{position:relative;padding-left:1.5rem;font-size:.955rem;line-height:1.55;color:var(--char-2)}
.takeaways li::before{content:'';position:absolute;left:0;top:.32em;width:14px;height:14px;
  background:url('/assets/img/brand/paw-glyph.png') center/contain no-repeat;opacity:.95}

/* ---- data tables */
.tblwrap{margin:1.9rem 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.dtbl{width:100%;border-collapse:collapse;font-size:.925rem;background:var(--paper);
  border:1px solid var(--rule);min-width:520px}
.dtbl caption{caption-side:top;text-align:left;font-family:'Figtree',system-ui,sans-serif;font-size:.63rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--gold);padding:0 0 .7rem;font-weight:500}
.dtbl th,.dtbl td{padding:.78rem .9rem;text-align:left;border-bottom:1px solid var(--rule-2);vertical-align:top;line-height:1.5}
.dtbl thead th{background:var(--ink);color:var(--bone);font-family:'Figtree',system-ui,sans-serif;font-weight:700;
  font-size:.79rem;letter-spacing:.03em;text-transform:uppercase;border-bottom:0}
.dtbl tbody th{font-weight:700;color:var(--ink);background:var(--bone-2);width:30%}
.dtbl tbody tr:last-child th,.dtbl tbody tr:last-child td{border-bottom:0}
.dtbl tbody tr:hover td,.dtbl tbody tr:hover th{background:var(--bone-2)}
.tbl-note{font-size:.83rem;color:var(--muted-2);margin:.65rem 0 0;line-height:1.5}

/* ---- byline */
.byline{display:flex;flex-wrap:wrap;gap:.35rem 1.3rem;align-items:center;padding:.85rem 0;margin:0 0 1.6rem;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-size:.815rem;color:var(--muted)}
.byline b{color:var(--char);font-weight:600}
.byline .by-loc{display:inline-flex;align-items:center;gap:.3rem;color:var(--gold);font-weight:600}
.byline .by-loc svg{width:13px;height:13px}

/* ---- table of contents */
.toc{background:var(--paper);border:1px solid var(--rule);padding:1.2rem 1.35rem;border-radius:var(--r-sm)}
.toc-label{font-family:'Figtree',system-ui,sans-serif;font-size:.73rem;letter-spacing:.075em;text-transform:uppercase;
  color:var(--gold);font-weight:500;display:block;margin-bottom:.85rem}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;display:grid;gap:.15rem}
.toc li{counter-increment:toc}
.toc a{display:block;padding:.44rem .5rem .44rem 2rem;position:relative;font-size:.895rem;line-height:1.4;
  font-weight:600;color:var(--char);text-decoration:none;border-left:2px solid transparent;
  transition:color .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease)}
.toc a::before{content:counter(toc,decimal-leading-zero);position:absolute;left:.5rem;top:.5rem;
  font-family:'Figtree',system-ui,sans-serif;font-size:.66rem;color:var(--muted-2);font-weight:400}
.toc a:hover{color:var(--gold);background:var(--bone-2)}
.toc a.active{color:var(--gold);border-left-color:var(--gold);background:var(--bone-2)}
.toc a.active::before{color:var(--gold)}

/* ---- stat strip */
.statstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;
  border:1px solid var(--rule);background:var(--paper);margin:1.9rem 0}
.sst{padding:1.15rem 1.2rem;border-right:1px solid var(--rule)}
.sst:last-child{border-right:0}
.sst-v{font-family:'Figtree',system-ui,sans-serif;font-weight:800;font-size:1.32rem;color:var(--gold);line-height:1.1;margin-bottom:.35rem}
.sst-l{font-size:.855rem;color:var(--muted);line-height:1.45}

/* ---- checklists */
.checklist{margin:1.7rem 0;padding:1.25rem 1.4rem;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--paper)}
.checklist.dont{background:var(--bone-2)}
.cl-label{font-family:'Figtree',system-ui,sans-serif;font-size:.73rem;letter-spacing:.075em;text-transform:uppercase;
  color:var(--gold);font-weight:500;display:block;margin-bottom:.85rem}
.checklist ul{margin:0;padding:0;list-style:none;display:grid;gap:.65rem}
.checklist li{display:flex;gap:.65rem;align-items:flex-start;font-size:.945rem;line-height:1.55;color:var(--char-2)}
.checklist li svg{width:16px;height:16px;flex:0 0 16px;margin-top:.28em;color:var(--gold)}

/* ---- two column compare */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin:1.9rem 0}
.cmp{border:1px solid var(--rule);background:var(--paper);padding:1.25rem 1.35rem;border-radius:var(--r-sm)}
.cmp h3,.cmp h4{font-family:'Figtree',system-ui,sans-serif;font-size:1.03rem;margin-bottom:.85rem;padding-bottom:.6rem;
  border-bottom:2px solid var(--gold);display:inline-block}
.cmp ul{margin:0;padding-left:1.05rem;display:grid;gap:.55rem}
.cmp li{font-size:.925rem;line-height:1.55;color:var(--char-2)}
.cmp li::marker{color:var(--gold)}

/* ---- article layout */
.article{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(2rem,4vw,3.6rem);align-items:start}
.article-side{position:sticky;top:104px;display:grid;gap:1.1rem}
.article .prose h2{scroll-margin-top:120px;margin-top:2.7rem;padding-top:1.6rem;border-top:1px solid var(--rule-2)}
.article .prose h2:first-of-type{border-top:0;padding-top:0}
.article .prose h3{scroll-margin-top:120px}

@media (max-width:1040px){
  .article{grid-template-columns:minmax(0,1fr)}
  .article-side{position:static;order:-1}
  .toc{background:var(--bone-2)}
}
@media (max-width:760px){
  .compare{grid-template-columns:minmax(0,1fr)}
  .statstrip{grid-template-columns:minmax(0,1fr)}
  .sst{border-right:0;border-bottom:1px solid var(--rule)}
  .sst:last-child{border-bottom:0}
  .answerbox{padding:1.2rem 1.2rem}
  .dtbl{min-width:460px}
  .tblwrap{margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
}

/* ==================================================================
   AUTO-BALANCING CARD GRID
   12 column track. Trailing items widen so a row is never left with a
   single orphaned card. See auto_grid() in shell.py.
   ================================================================== */
.gx{display:grid;grid-template-columns:repeat(12,1fr);gap:1.1rem;align-items:stretch}
.gx > .gcol-3{grid-column:span 3}
.gx > .gcol-4{grid-column:span 4}
.gx > .gcol-6{grid-column:span 6}
.gx > .gcol-12{grid-column:span 12}

/* a lone card becomes a deliberate wide feature card rather than a floater */
.gx > .card-wide{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:0;align-items:stretch;padding:0;overflow:hidden}
.gx > .card-wide .card-img{margin:0;border-bottom:0;border-right:1px solid var(--rule);height:100%}
.gx > .card-wide .card-img img{height:100%;aspect-ratio:auto;min-height:200px;object-fit:cover}
.gx > .card-wide .cnum,.gx > .card-wide h3,.gx > .card-wide p,.gx > .card-wide .more{
  padding-inline:1.45rem}
.gx > .card-wide .cnum{padding-top:1.5rem}
.gx > .card-wide .more{padding-bottom:1.5rem}
.gx > .card-wide::before{top:8px;left:8px}

/* lone card with no image: full width, but text held to a readable measure */
.gx > .card-solo{display:block}
.gx > .card-solo h3,.gx > .card-solo p{max-width:62ch}

/* The responsive rules MUST repeat the .gcol-* classes. Targeting `.gx > *`
   is specificity (0,1,0) and loses to the base `.gx > .gcol-4` (0,2,0), so the
   grid silently stays 3-up on phones. Same trap as the .wrap padding bug. */
@media (max-width:1040px){
  /* everything drops to 2-up ... */
  .gx > .gcol-3,.gx > .gcol-4,.gx > .gcol-6,.gx > .gcol-12{grid-column:span 6}
  /* ... and an odd total would strand the final card alone on the left, so the
     last item goes full width whenever it lands on an odd index. Tablet twin of
     the orphan rule in auto_grid(). */
  .gx > .gcol-3:last-child:nth-child(odd),
  .gx > .gcol-4:last-child:nth-child(odd),
  .gx > .gcol-6:last-child:nth-child(odd),
  .gx > .gcol-12:last-child:nth-child(odd){grid-column:span 12}
  .gx > .card-wide{grid-column:span 12}
}
@media (max-width:760px){
  .gx > .gcol-3,.gx > .gcol-4,.gx > .gcol-6,.gx > .gcol-12{grid-column:span 12}
  .gx > .card-wide{grid-template-columns:minmax(0,1fr)}
  .gx > .card-wide .card-img{border-right:0;border-bottom:1px solid var(--rule)}
  .gx > .card-wide .card-img img{min-height:0;aspect-ratio:16/10}
}

/* ---- outbound citations */
.sources{border-top:1px solid var(--rule);margin-top:2.4rem;padding-top:1.4rem}
.src-label{font-family:'Figtree',system-ui,sans-serif;font-size:.73rem;letter-spacing:.075em;text-transform:uppercase;
  color:var(--gold);font-weight:500;display:block;margin-bottom:.85rem}
.sources ul{margin:0;padding:0;list-style:none;display:grid;gap:.6rem}
.sources li{font-size:.885rem;line-height:1.55;color:var(--muted);padding-left:1.2rem;position:relative}
.sources li::before{content:'\2197';position:absolute;left:0;top:0;color:var(--gold);font-size:.85rem}
.sources a{color:var(--char);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(194,138,26,.45)}
.sources a:hover{color:var(--gold)}

/* <picture> must not break the layout its <img> used to hold */
picture{display:contents}

/* hero video + ghost button */
.hero-video{filter:none}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.34);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
@media (prefers-reduced-motion:reduce){ .hero-video{display:none} }
@media (max-width:1040px){
  .hero-in{grid-template-columns:minmax(0,1fr)}
  .trustbar .wrap{grid-template-columns:1fr 1fr;gap:1.2rem}
}
@media (max-width:760px){
  .trustbar .wrap{grid-template-columns:minmax(0,1fr)}
  .hero-bg::after{background:linear-gradient(180deg,rgba(18,15,12,.78) 0%,rgba(18,15,12,.88) 55%,rgba(18,15,12,.94) 100%)}
}

/* stacked service rows - reads as a considered list, not a card wall */
.srows{display:grid;gap:.7rem}
.srow{display:grid;grid-template-columns:46px 1fr;gap:1rem;align-items:start;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  padding:1.15rem 1.25rem;text-decoration:none;color:inherit;
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.srow:hover{border-color:rgba(194,138,26,.55);transform:translateX(3px);box-shadow:var(--shadow)}
.srow-ic{width:46px;height:46px;border-radius:var(--r-sm);background:var(--gold-soft);
  display:flex;align-items:center;justify-content:center}
.srow-ic svg{width:21px;height:21px;color:var(--gold)}
.srow-b{display:block}
.srow-t{display:block;font-weight:750;font-size:1.06rem;letter-spacing:-.015em;color:var(--ink);margin-bottom:.2rem}
.srow-d{display:block;font-size:.93rem;line-height:1.5;color:var(--muted)}
.srow-l{display:inline-block;margin-top:.5rem;font-size:.86rem;font-weight:700;color:var(--gold);
  border-bottom:1px solid rgba(194,138,26,.4);padding-bottom:1px}
.srow:hover .srow-l{border-bottom-color:var(--gold)}
@media (max-width:760px){
  .srow{grid-template-columns:38px 1fr;gap:.8rem;padding:1rem}
  .srow-ic{width:38px;height:38px}
  .srow-ic svg{width:18px;height:18px}
}

/* service split: give the rows room, keep the copy pinned while they scroll */
.svc-split{grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:1041px){ .svc-split > div:first-child{position:sticky;top:120px} }
@media (max-width:1040px){ .svc-split{grid-template-columns:minmax(0,1fr)} }

/* brand marks: the paw as a quiet watermark, never as decoration for its own sake */
.hero{position:relative}
.hero-in::after{
  content:'';position:absolute;right:-2%;bottom:-14%;width:min(300px,26vw);aspect-ratio:1;
  background:url('/assets/img/brand/icon-512.png') center/contain no-repeat;
  opacity:.05;pointer-events:none;z-index:-1}
.ctaband{position:relative;overflow:hidden}
.ctaband::after{
  content:'';position:absolute;right:2%;top:50%;transform:translateY(-50%);width:190px;aspect-ratio:1;
  background:url('/assets/img/brand/icon-512.png') center/contain no-repeat;
  opacity:.06;pointer-events:none}
@media (max-width:900px){ .hero-in::after,.ctaband::after{display:none} }

/* ---- mobile data tables: make it obvious they scroll, and loosen the squeeze */
@media (max-width:760px){
  .tblwrap{position:relative}
  .tblwrap::after{
    content:'';position:absolute;top:0;right:0;bottom:0;width:38px;pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.92));border-radius:0 var(--r-sm) var(--r-sm) 0}
  .tblwrap[data-scrollable="1"] .dtbl caption::after{
    content:' — swipe to see more';color:var(--muted-2);font-weight:400;text-transform:none;letter-spacing:0}
  .dtbl{min-width:440px;font-size:.875rem}
  .dtbl th,.dtbl td{padding:.6rem .65rem}
  .dtbl tbody th{width:34%}
}

/* ---- mobile tap targets: nothing interactive under 44px */
@media (max-width:760px){
  .chip{min-height:44px;display:inline-flex;align-items:center;padding:.55rem .95rem}
  .linklist a,.toc a,.faq summary{min-height:44px;display:flex;align-items:center}
  .faq summary{align-items:flex-start}
  .btn-sm{padding:.72rem 1.1rem;min-height:44px}
  .ft-citylist a{min-height:38px;display:inline-flex;align-items:center}
}

/* ---- interior hero meta row
   These used to be pill badges. Pills in a hero are one of the AI tells we
   removed from the homepage, so the same markup is now a quiet inline meta
   row: icon, label, thin divider. Consistent with the trust bar language. */
.hero-badges{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.15rem;margin-top:1.5rem}
.hbadge{
  display:inline-flex;align-items:center;gap:.45rem;position:relative;
  font-size:.875rem;font-weight:600;color:rgba(255,255,255,.82);
  background:none;border:0;padding:0;text-shadow:0 1px 14px rgba(18,15,12,.6);
}
.hbadge svg{width:16px;height:16px;flex:0 0 16px;color:var(--gold-hi)}
.hbadge:not(:last-child)::after{
  content:'';position:absolute;right:-.6rem;top:50%;transform:translateY(-50%);
  width:1px;height:14px;background:rgba(255,255,255,.22)}
@media (max-width:760px){
  .hero-badges{gap:.45rem .9rem;margin-top:1.25rem}
  .hbadge{font-size:.83rem}
  .hbadge:not(:last-child)::after{display:none}
}

/* two classes were emitted with no rule behind them - caught by the orphan-class check */
.hero-copy{min-width:0}
.checklist.do .cl-label{color:var(--gold)}

/* ---- compact video hero for interior pages
   Same brand language as the homepage hero, shorter, so article content still
   starts high on the page. */
.hero.hero-compact .hero-in{
  grid-template-columns:minmax(0,1fr);
  padding-block:clamp(2.2rem,4vw,3.4rem) clamp(2rem,3.6vw,3rem);
  align-items:start}
.hero.hero-compact h1{max-width:22ch;font-size:clamp(1.95rem,4vw,3rem)}
.hero.hero-compact .hsub{max-width:62ch;margin-top:.9rem;font-size:clamp(1rem,1.4vw,1.1rem)}
.hero.hero-compact .hero-bg::after{
  background:linear-gradient(94deg,rgba(18,15,12,.88) 0%,rgba(18,15,12,.74) 42%,rgba(18,15,12,.5) 100%)}
.hero.hero-compact .hero-in::after{width:min(210px,20vw);bottom:-18%}
.hero-crumbs{position:relative;z-index:2;background:rgba(18,15,12,.55);border-bottom:1px solid rgba(255,255,255,.1)}
.hero-crumbs .crumbs{background:none;border:0;color:rgba(255,255,255,.6)}
.hero-crumbs .crumbs a{color:rgba(255,255,255,.78)}
.hero-crumbs .crumbs a:hover{color:var(--gold-hi)}

/* ---- brand accents */
/* gold underscore under every section heading that follows an eyebrow */
.sec-head h2::after{content:'';display:block;width:54px;height:3px;background:var(--gold);
  border-radius:2px;margin-top:.85rem}
.sec-ink .sec-head h2::after{background:var(--gold-hi)}
/* process step numbers wear the brand */
.step .sn{position:relative}
.step.lit .sn::after{content:'';position:absolute;left:0;bottom:-.35rem;width:22px;height:2px;background:var(--gold)}
/* answer box carries a small paw so the most quotable block is branded */
.answerbox{padding-left:1.5rem}
.ab-label{display:flex;align-items:center;gap:.45rem}
.ab-label::before{content:'';width:15px;height:15px;flex:0 0 15px;
  background:url('/assets/img/brand/paw-glyph.png') center/contain no-repeat}

/* ---- process steps on mobile
   The desktop layout is a numbered spine: a 64px number column with a gold rail
   on the column boundary. At phone width that column becomes a tall empty
   gutter and the rail floats mid-paragraph, so mobile gets a different shape
   entirely: a gold pill number above the heading, full width text, no rail.
   NOTE these rules live at the end of the file on purpose - the base
   .steprail{left:64px} was appended by the motion layer and would otherwise
   win over an earlier mobile override at equal specificity. */
@media (max-width:760px){
  .steps{position:relative}
  .steps .steprail{display:none}
  .step{
    grid-template-columns:minmax(0,1fr);
    gap:.45rem;padding:1.35rem 0;align-items:start}
  .step .sn{
    font-size:.75rem;font-weight:800;letter-spacing:.09em;line-height:1;
    display:inline-flex;align-items:center;justify-content:center;
    width:auto;justify-self:start;min-width:38px;height:27px;padding:0 .6rem;
    background:var(--gold-soft);color:var(--gold);
    border-radius:99px;border:0;padding-right:.6rem;margin-bottom:.15rem}
  .sec-ink .step .sn{background:rgba(224,166,58,.16);color:var(--gold-hi)}
  .step h3{font-size:1.08rem}
  .step p{font-size:.945rem}
  .step.lit .sn{transform:none}
  .step.lit .sn::after{display:none}
}

/* ---- contrast on dark panels
   `.step p` and `.sec-ink p` have equal specificity, so whichever is later in
   the file wins. The component rules were appended after the section rules,
   which left dark body text sitting on the dark panel. These explicit
   two-class rules end the ambiguity. */
.sec-ink .step p,
.sec-ink .feat p,
.sec-ink .card p,
.sec-ink .lede,
.sec-ink .sst-l,
.sec-ink .tbl-note{color:var(--onchar)}
.sec-ink .step h3,
.sec-ink .feat h3,
.sec-ink .feat h4{color:var(--bone)}
.sec-ink .steprail{background:rgba(251,248,243,.16)}

/* ---- readable form text on the dark quote card
   Labels and the privacy note were landing at 2.99:1, below the 4.5:1 AA
   threshold for small text. */
.hero-form .formcard .fld label{color:rgba(255,255,255,.78)}
.hero-form .formcard .fnote{color:rgba(255,255,255,.68)}
.hero-form .formcard .fsub{color:rgba(255,255,255,.78)!important}
.hero-form .formcard .fld input::placeholder,
.hero-form .formcard .fld textarea::placeholder{color:rgba(255,255,255,.55)}

/* ---- accessible gold for small text
   Savier's brand gold (#c28a1a) is ~3.0:1 on white, fine for fills, icons,
   buttons and large display type, but under the 4.5:1 AA minimum for small
   text. Small text on LIGHT backgrounds uses a deeper gold that still reads as
   the brand. On dark panels the light gold already passes, so it is untouched. */
:root{--gold-ink:#8a6512}
.eyebrow,
.card .cnum,
.card .more,
.srow-l,
.callout .ct,
.ab-label,
.tk-label,
.cl-label,
.src-label,
.toc-label,
.dtbl caption,
.byline .by-loc,
.prose a,
.linklist a:hover,
.chip:hover{color:var(--gold-ink)}
.sources a:hover,.faq summary:hover{color:var(--gold-ink)}
/* dark panels keep the bright gold - it passes there */
.sec-ink .eyebrow,.sec-ink .card .cnum,.sec-ink .card .more,
.hero .eyebrow,.hero-compact .eyebrow{color:var(--gold-hi)}

/* ---- gold buttons: deepen the fill so white label text is readable
   Brand gold with white text is ~2.97:1. A slightly deeper fill keeps the
   colour unmistakably the brand while lifting the label contrast. Hover
   returns to the bright brand gold with dark text, which reads even better. */
.btn-gold{background:#a5700f;border-color:#a5700f;color:#fff}
.btn-gold:hover{background:var(--gold-hi);border-color:var(--gold-hi);color:var(--ink)}
.callbar .cb2{background:#a5700f;color:#fff}