/* ═══════════════════════════════════════════════════════════════
   Wolf and Tiger Bookkeeping — site stylesheet
   Wolf = jade · Tiger = amber · structure = obsidian
   Light surfaces: white and a faint cool jade wash.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* structure */
  --obsidian:#0E0E18;
  --deep:#14141F;
  --charcoal:#1C1C2C;
  --slate:#252535;
  /* tiger */
  --amber:#D4900A;
  --amber-2:#E8A820;
  --amber-3:#F5C84A;
  --amber-deep:#8A5E05;
  /* wolf */
  --jade:#0D8A7C;
  --jade-2:#12A899;
  --jade-3:#3EC9BB;
  --jade-ink:#0B7A6E;
  /* light surfaces */
  --white:#FFFFFF;
  --wash:#F2F8F7;
  --wash-2:#E8F1EF;
  --line:#DDE7E5;
  --line-d:rgba(255,255,255,.10);
  /* type */
  --ink:#14141F;
  --body:#3C4450;
  --body-d:#B9C2C6;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --nav-h:78px;
  --ease:cubic-bezier(.22,1,.36,1);
  --wrap:1180px;

  /* motion system variables — the motion layer recolors from these */
  --motion-1:232,168,32;
  --motion-2:62,201,187;
  --motion-accent:#E8A820;
  --motion-accent-2:#3EC9BB;
  --motion-ink:#0E0E18;
  --motion-dark-rgb:14,14,24;
  --motion-nav-bg:rgba(255,255,255,.98);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.72;
  color:var(--body);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden;}

img{max-width:100%;display:block;height:auto;}

a{color:inherit;text-decoration:none;}

ul,ol{list-style:none;}

p{margin-bottom:1.05rem;}

p:last-child{margin-bottom:0;}

h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);line-height:1.14;font-weight:600;}

.container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 26px;}

:focus-visible{outline:3px solid var(--jade-2);outline-offset:3px;border-radius:2px;}

/* ── social row ─────────────────────────────────────────────── */
.social-row-wrap{background:var(--obsidian);}

.social-row-in{display:flex;justify-content:flex-end;}

.social-row{display:flex;gap:8px;align-items:center;}

.social-row:empty{display:none;}

.social-row-wrap:has(.social-row:empty){padding:0;line-height:0;font-size:0;}

.social-row a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  color:var(--body-d);border:1px solid var(--line-d);border-radius:50%;margin:7px 0;
  transition:color .25s,border-color .25s,background .25s;}

.social-row a:hover{color:var(--amber-3);border-color:rgba(232,168,32,.5);background:rgba(232,168,32,.08);}

/* ── nav ────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:900;background:var(--white);
  border-bottom:1px solid var(--line);padding:15px 0;}

.nav-in{display:flex;align-items:center;justify-content:space-between;gap:26px;}

.nav-brand img{width:248px;height:auto;}

.nav-links{display:flex;align-items:center;gap:30px;}

.nav-link{font-size:.87rem;font-weight:600;letter-spacing:.02em;color:var(--ink);
  display:inline-block;padding:6px 0;transition:color .25s;}

.nav-link:hover{color:var(--jade-ink);}

.nav-drop{position:relative;}

.drop-panel{position:absolute;top:calc(100% + 14px);left:-18px;min-width:236px;
  background:var(--white);border:1px solid var(--line);border-radius:3px;
  box-shadow:0 20px 46px rgba(14,14,24,.14);padding:8px 0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;}

.nav-drop:hover .drop-panel,.nav-drop:focus-within .drop-panel{opacity:1;visibility:visible;transform:none;}

.drop-panel a{display:block;padding:10px 20px;font-size:.86rem;font-weight:500;color:var(--body);
  border-left:2px solid transparent;transition:background .2s,color .2s,border-color .2s;}

.drop-panel a:hover{background:var(--wash);color:var(--ink);border-left-color:var(--amber);}

.nav-cta{margin-left:4px;}

.nav-toggle{display:none;background:none;border:0;width:44px;height:38px;padding:8px;cursor:pointer;}

.nav-toggle span{display:block;height:2px;background:var(--ink);margin:5px 0;transition:transform .3s,opacity .3s;}

.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}

.nav-toggle.is-open span:nth-child(2){opacity:0;}

.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-menu{display:none;flex-direction:column;padding:12px 26px 24px;border-top:1px solid var(--line);}

.mobile-menu a{padding:12px 0;font-size:.98rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);}

.mobile-menu .m-sub{padding-left:16px;font-weight:400;font-size:.9rem;color:var(--body);}

.mobile-menu .m-cta{margin-top:18px;border-bottom:0;text-align:center;}

/* ── buttons ────────────────────────────────────────────────── */
.btn{display:inline-block;padding:14px 30px;border-radius:2px;font-family:var(--sans);
  font-size:.83rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;border:1px solid transparent;}

.btn-lg{padding:17px 40px;font-size:.88rem;}

.btn-amber{background:var(--amber-2);color:var(--deep);}

.btn-amber:hover{background:var(--amber-3);}

.btn-jade{background:var(--jade-ink);color:var(--white);}

.btn-jade:hover{background:var(--jade);}

.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.42);}

.btn-ghost:hover{border-color:var(--amber-3);color:var(--amber-3);}

.btn-outline{background:transparent;color:var(--ink);border-color:var(--line);}

.btn-outline:hover{border-color:var(--jade-ink);color:var(--jade-ink);}

.tlink{display:inline-block;font-size:.86rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--jade-ink);}

.tlink-amber{color:var(--amber-deep);}

/* ── home hero ──────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;background:var(--obsidian);
  min-height:clamp(600px,88vh,860px);display:flex;align-items:center;padding:96px 0 84px;}

.hero-in{position:relative;z-index:2;text-align:center;}

.hero h1{font-size:clamp(2.4rem,5.1vw,4.05rem);color:var(--white);letter-spacing:-.01em;
  max-width:20ch;margin:0 auto 22px;text-shadow:0 2px 26px rgba(0,0,0,.5);}

.hero .hero-sub{font-size:clamp(1.03rem,1.55vw,1.2rem);color:#DCE4E7;max-width:60ch;margin:0 auto 14px;
  text-shadow:0 1px 14px rgba(0,0,0,.55);}

.hero-trust{font-size:.75rem;letter-spacing:.19em;text-transform:uppercase;color:var(--amber-3);
  font-weight:700;margin-bottom:30px;text-shadow:0 1px 12px rgba(0,0,0,.6);}

.hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:22px;}

.hero-scope{font-size:.83rem;color:#9FAAB0;max-width:58ch;margin:0 auto;}

.principles{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:860px;margin:52px auto 0;}

.principle{border:1px solid var(--line-d);border-radius:3px;padding:24px 26px;text-align:left;
  background:rgba(255,255,255,.045);}

.principle.p-wolf{border-top:2px solid var(--jade-2);}

.principle.p-tiger{border-top:2px solid var(--amber-2);}

.p-label{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;font-weight:700;margin-bottom:7px;}

.p-wolf .p-label{color:var(--jade-3);}

.p-tiger .p-label{color:var(--amber-3);}

.principle h2{font-size:1.16rem;color:var(--white);margin-bottom:14px;font-weight:600;}

.chips{display:flex;flex-wrap:wrap;gap:8px;}

.chip{font-size:.67rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  padding:6px 10px;border-radius:2px;color:#E4EAEC;background:rgba(255,255,255,.07);
  border:1px solid var(--line-d);}

.p-wolf .chip{border-color:rgba(62,201,187,.34);}

.p-tiger .chip{border-color:rgba(245,200,74,.34);}

/* ── inner page hero ────────────────────────────────────────── */
.page-hero{position:relative;overflow:hidden;background:
  linear-gradient(135deg,#0E0E18 0%,#1C1C2C 52%,#14141F 100%);padding:104px 0 88px;}

.page-hero-in{position:relative;z-index:2;max-width:820px;}

.page-hero h1{font-size:clamp(2.1rem,4.2vw,3.35rem);color:var(--white);margin-bottom:20px;}

.page-hero .lede{font-size:1.09rem;color:#DCE4E7;max-width:62ch;}

.crumb{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:#93A0A6;margin-bottom:20px;}

.crumb a{color:var(--amber-3);}

.crumb a:hover{text-decoration:underline;}

/* ── sections ───────────────────────────────────────────────── */
.sec{padding:96px 0;}

.sec-tight{padding:74px 0;}

.sec-white{background:var(--white);}

.sec-wash{background:var(--wash);}

.sec-dark{background:var(--obsidian);color:var(--body-d);}

.sec-dark h2,.sec-dark h3{color:var(--white);}

.sec-head{max-width:66ch;margin-bottom:52px;}

.sec-head.centered{margin-left:auto;margin-right:auto;text-align:center;}

.sec-head h2{font-size:clamp(1.75rem,3.1vw,2.65rem);margin-bottom:16px;}

.sec-head p{font-size:1.05rem;}

.rule{width:56px;height:3px;background:var(--amber-2);margin-bottom:26px;}

.rule-jade{background:var(--jade-2);}

.sec-head.centered .rule{margin-left:auto;margin-right:auto;}

/* ── numbered service tiles ─────────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px;}

.tile{position:relative;background:var(--white);border:1px solid var(--line);border-radius:3px;
  padding:34px 30px 30px;overflow:hidden;}

.sec-wash .tile{background:var(--white);}

.tile-n{position:absolute;top:8px;right:18px;font-family:var(--serif);font-size:4.4rem;
  font-weight:700;line-height:1;color:rgba(14,14,24,.055);pointer-events:none;}

.tile h3{font-size:1.1rem;margin-bottom:11px;position:relative;}

.tile p{font-size:.95rem;margin-bottom:14px;}

.tile .tlink{font-size:.78rem;}

/* ── service group listing ──────────────────────────────────── */
.svc-group{margin-bottom:74px;}

.svc-group:last-child{margin-bottom:0;}

.svc-group-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:34px;}

.svc-group-head h2{font-size:clamp(1.5rem,2.6vw,2.1rem);}

.svc-group-head span{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--jade-ink);}

.svc-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;}

.svc{background:var(--white);border:1px solid var(--line);border-radius:3px;padding:30px 28px;}

.sec-white .svc{background:var(--wash);}

.svc h3{font-size:1.06rem;margin-bottom:10px;}

.svc p{font-size:.94rem;margin-bottom:0;}

/* ── who we serve ───────────────────────────────────────────── */
.serve{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;}

.serve-card{background:var(--white);border:1px solid var(--line);border-radius:3px;
  padding:32px 26px;text-align:center;}

.serve-icon{width:52px;height:52px;margin:0 auto 18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--wash-2);color:var(--jade-ink);font-family:var(--serif);font-size:1.28rem;font-weight:700;}

.serve-card h3{font-size:1.02rem;margin-bottom:9px;text-align:center;}

.serve-card p{font-size:.92rem;margin-bottom:0;}

/* ── two-column brand band ──────────────────────────────────── */
.band{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;}

.band-img{position:relative;min-height:430px;overflow:hidden;background:var(--obsidian);}

.band-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}

.band-copy{padding:74px 62px;display:flex;flex-direction:column;justify-content:center;}

.band-copy.on-dark{background:var(--obsidian);}

.band-copy.on-dark h2{color:var(--white);}

.band-copy.on-dark p{color:var(--body-d);}

.band-copy.on-wash{background:var(--wash);}

.band-copy h2{font-size:clamp(1.6rem,2.8vw,2.35rem);margin-bottom:18px;}

.band-mark{width:86px;margin-bottom:26px;}

/* ── full-bleed photo band ──────────────────────────────────── */
.photo-band{position:relative;overflow:hidden;background:var(--obsidian);
  min-height:clamp(360px,42vw,520px);display:flex;align-items:center;}

.photo-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 58%;}

.photo-band-scrim{position:absolute;inset:0;
  background:linear-gradient(to right,rgba(14,14,24,.95) 0%,rgba(14,14,24,.91) 38%,rgba(14,14,24,.82) 53%,rgba(14,14,24,.34) 76%,rgba(14,14,24,.12) 100%);}

.photo-band-in{position:relative;z-index:2;max-width:560px;padding:74px 0;}

.photo-band-in h2{color:var(--white);font-size:clamp(1.6rem,2.8vw,2.35rem);margin-bottom:16px;
  text-shadow:0 1px 18px rgba(0,0,0,.5);}

.photo-band-in p{color:#CBD3D7;text-shadow:0 1px 14px rgba(0,0,0,.55);}

.photo-band .rule{margin-bottom:22px;}

@media (max-width:900px){
  .photo-band-scrim{background:linear-gradient(to bottom,rgba(14,14,24,.90) 0%,rgba(14,14,24,.82) 55%,rgba(14,14,24,.72) 100%);}
  .photo-band-in{max-width:none;padding:58px 0;}
}

/* ── wolf / tiger value columns ─────────────────────────────── */
.values{display:grid;grid-template-columns:1fr 1fr;}

.val-col{padding:74px 56px;}

.val-wolf{background:var(--wash);}

.val-tiger{background:var(--obsidian);}

.val-tiger h2,.val-tiger h3{color:var(--white);}

.val-tiger p{color:var(--body-d);}

.val-col h2{font-size:clamp(1.5rem,2.5vw,2.1rem);margin-bottom:10px;}

.val-sub{font-size:.95rem;margin-bottom:32px;}

.val-item{padding:22px 0;border-top:1px solid var(--line);}

.val-tiger .val-item{border-top-color:var(--line-d);}

.val-item h3{font-size:1.01rem;margin-bottom:7px;}

.val-item p{font-size:.93rem;margin-bottom:0;}

/* ── packages ───────────────────────────────────────────────── */
.pack-wrap{display:grid;grid-template-columns:1fr;gap:70px;}

.pack-head{margin-bottom:30px;}

.pack-head h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:8px;}

.pack-sub-line{font-size:.95rem;margin-bottom:0;}

.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;}

.pack{background:var(--white);border:1px solid var(--line);border-radius:3px;padding:34px 30px;
  display:flex;flex-direction:column;overflow:hidden;position:relative;}

.pack-name{font-family:var(--serif);font-size:1.42rem;font-weight:700;color:var(--ink);margin-bottom:4px;}

.pack-sub{font-size:.73rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;margin-bottom:18px;}

.pack-wolf .pack-sub{color:var(--jade-ink);}

.pack-tiger .pack-sub{color:var(--amber-deep);}

.pack p{font-size:.94rem;margin-bottom:20px;}

.pack ul{margin-bottom:24px;}

.pack li{position:relative;padding-left:24px;font-size:.92rem;line-height:1.6;margin-bottom:10px;color:var(--body);}

.pack li::before{content:'';position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--amber-2);}

.pack-wolf .pack li::before{background:var(--jade-2);}

.pack .btn{margin-top:auto;align-self:flex-start;}

.pack-flag{display:inline-block;align-self:flex-start;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--deep);background:var(--amber-3);padding:4px 10px;border-radius:2px;margin-bottom:14px;}

/* ── honesty band ───────────────────────────────────────────── */
.honesty{background:var(--charcoal);border-left:3px solid var(--amber-2);padding:46px 48px;}

.honesty h2{color:var(--white);font-size:1.5rem;margin-bottom:14px;}

.honesty p{color:var(--body-d);max-width:74ch;margin-bottom:0;}

/* ── promise box ────────────────────────────────────────────── */
.promise{background:var(--obsidian);padding:62px 58px;border-radius:3px;}

.promise h2{color:var(--white);font-size:clamp(1.5rem,2.5vw,2.05rem);margin-bottom:20px;}

.promise p{color:var(--body-d);max-width:78ch;}

.promise .sig{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-d);
  font-family:var(--serif);font-size:1.08rem;color:var(--amber-3);}

/* ── founders ───────────────────────────────────────────────── */
.founders{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;}

.founder{background:var(--white);border:1px solid var(--line);border-radius:3px;padding:34px 30px;text-align:center;}

.founder-mark{width:96px;height:96px;margin:0 auto 20px;border-radius:50%;background:var(--obsidian);
  display:flex;align-items:center;justify-content:center;overflow:hidden;}

.founder-mark img{width:62px;height:auto;}

.founder h3{font-size:1.12rem;margin-bottom:5px;text-align:center;}

.founder .role{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--jade-ink);margin-bottom:14px;}

.founder p{font-size:.93rem;margin-bottom:0;}

.founder .creds{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.83rem;color:var(--body);}

/* ── credential strip ───────────────────────────────────────── */
.creds-strip{display:flex;flex-wrap:wrap;gap:14px;}

.cred{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink);
  border:1px solid var(--line);border-radius:2px;padding:11px 18px;background:var(--white);}

/* ── steps ──────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;}

.step{border-top:2px solid var(--line);padding-top:22px;}

.step-n{font-family:var(--serif);font-size:1.7rem;font-weight:700;color:var(--amber-deep);margin-bottom:8px;}

.step h3{font-size:1rem;margin-bottom:8px;}

.step p{font-size:.92rem;margin-bottom:0;}

/* ── forms / embeds ─────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start;}

.card-pane{background:var(--white);border:1px solid var(--line);border-radius:3px;padding:40px 38px;}

.sec-white .card-pane{background:var(--wash);}

.embed-slot{border:1px dashed var(--line);border-radius:3px;background:var(--wash);
  min-height:430px;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px;}

.embed-slot p{font-size:.93rem;color:var(--body);max-width:44ch;margin-bottom:0;}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

.field{margin-bottom:16px;}

.field label{display:block;font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;color:var(--ink);margin-bottom:7px;}

.field input,.field select,.field textarea{width:100%;padding:13px 14px;border:1px solid var(--line);
  border-radius:2px;background:var(--white);font-family:var(--sans);font-size:.95rem;color:var(--ink);}

.field textarea{min-height:132px;resize:vertical;}

.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--jade-2);outline:none;
  box-shadow:0 0 0 3px rgba(18,168,153,.16);}

.form-note{font-size:.84rem;color:var(--body);margin-top:14px;}

/* ── info list ──────────────────────────────────────────────── */
.info-item{padding:20px 0;border-bottom:1px solid var(--line);}

.info-item:last-child{border-bottom:0;}

.info-item h3{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--jade-ink);margin-bottom:6px;}

.info-item p{font-size:1.02rem;color:var(--ink);margin-bottom:0;}

.info-item a{color:var(--ink);border-bottom:1px solid var(--line);}

.info-item a:hover{color:var(--jade-ink);border-bottom-color:var(--jade-ink);}

/* ── area pills ─────────────────────────────────────────────── */
.areas{display:flex;flex-wrap:wrap;gap:10px;}

.area{font-size:.85rem;font-weight:600;color:var(--ink);background:var(--white);
  border:1px solid var(--line);border-radius:2px;padding:10px 16px;}

/* ── reviews slot ───────────────────────────────────────────── */
.reviews-slot{border:1px solid var(--line);border-radius:3px;background:var(--white);
  padding:56px 40px;text-align:center;}

.reviews-slot p{font-size:.95rem;max-width:52ch;margin:0 auto;}

/* ── legal pages ────────────────────────────────────────────── */
.legal{max-width:820px;}

.legal .lead{font-size:1.04rem;margin-bottom:38px;}

.legal h2{font-size:1.32rem;margin:42px 0 14px;}

.legal h3{font-size:1rem;margin:26px 0 10px;}

.legal p,.legal li{font-size:.98rem;}

.legal ul{margin:0 0 1.05rem;}

.legal li{position:relative;padding-left:22px;margin-bottom:10px;}

.legal li::before{content:'';position:absolute;left:0;top:.66em;width:8px;height:2px;background:var(--jade-2);}

.legal .strong{font-weight:700;color:var(--ink);}

.legal .contact-block{background:var(--wash);border-left:3px solid var(--jade-2);padding:26px 28px;margin-top:14px;}

.legal .contact-block p{margin-bottom:6px;}

.legal .limit-block{background:var(--wash);border-left:3px solid var(--amber-2);padding:26px 28px;margin:18px 0;}

.legal-updated{font-size:.85rem;color:#93A0A6;margin-top:8px;}

/* ── media figure ───────────────────────────────────────────── */
.media-figure{border-radius:3px;overflow:hidden;border:1px solid var(--line);}

.media-figure img{width:100%;}

.media-cap{font-size:.82rem;color:var(--body);padding:12px 16px;background:var(--wash);}

/* ── cta band ───────────────────────────────────────────────── */
.cta-band{position:relative;overflow:hidden;padding:96px 0;
  background:linear-gradient(140deg,#0E0E18 0%,#1C1C2C 55%,#14141F 100%);}

.cta-in{position:relative;z-index:2;text-align:center;max-width:720px;margin:0 auto;}

.cta-in h2{color:var(--white);font-size:clamp(1.75rem,3.2vw,2.7rem);margin-bottom:18px;}

.cta-in p{color:var(--body-d);margin-bottom:30px;}

/* ── footer ─────────────────────────────────────────────────── */
.foot{background:var(--obsidian);color:var(--body-d);padding:76px 0 0;}

.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1.3fr;gap:44px;padding-bottom:56px;}

.foot h3{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-3);margin-bottom:18px;}

.foot-brand img{width:230px;margin-bottom:20px;}

.foot-line{font-family:var(--serif);font-size:1.03rem;color:#E4EAEC;margin-bottom:12px;}

.foot-note{font-size:.82rem;color:#93A0A6;}

.foot-col a{display:block;font-size:.92rem;padding:5px 0;color:var(--body-d);transition:color .25s;}

.foot-col a:hover{color:var(--amber-3);}

.foot-areas{font-size:.9rem;color:var(--body-d);}

.foot-nap p{margin-bottom:9px;font-size:.93rem;}

.nap-name{font-family:var(--serif);font-size:1.06rem;color:var(--white);}

.nap-phone a,.nap-email a{color:var(--body-d);}

.nap-phone a:hover,.nap-email a:hover{color:var(--amber-3);}

.nap-hours{font-size:.86rem;color:#93A0A6;}

.foot-base{border-top:1px solid var(--line-d);padding-top:26px;padding-bottom:34px;
  display:flex;flex-wrap:wrap;gap:12px 30px;align-items:center;justify-content:space-between;}

.foot-base p{font-size:.82rem;color:#93A0A6;margin-bottom:0;}

.foot-legal a{color:#93A0A6;}

.foot-legal a:hover{color:var(--amber-3);}

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width:980px){
  .nav-links{display:none;}
  .nav-toggle{display:block;}
  .mobile-menu{display:flex;}
  .mobile-menu[hidden]{display:none;}
  .band,.values,.split,.principles{grid-template-columns:1fr;}
  .band-copy,.val-col{padding:52px 30px;}
  .band-img{min-height:300px;}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px;}
}

@media (max-width:640px){
  body{font-size:16px;}
  .sec{padding:66px 0;}
  .sec-tight{padding:54px 0;}
  .page-hero{padding:74px 0 62px;}
  .hero{padding:70px 0 60px;min-height:0;}
  .form-row{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .card-pane,.promise,.honesty{padding:32px 24px;}
  .btn{width:100%;text-align:center;}
  .nav-cta,.pack .btn{width:auto;}
  .foot-base{flex-direction:column;align-items:flex-start;}
}

.nw{white-space:nowrap;}

/* ═══════════════════════════════════════════════════════════════
   CORE 30 PRODUCTION ADDITIONS
   Mega navigation, dropdown hover-bridge spacing, breadcrumbs,
   service-page furniture, FAQ, area grids, cross-links.
   Palette unchanged — every value below resolves from the tokens
   already declared in :root above.
   ═══════════════════════════════════════════════════════════════ */

/* ── nav: condense on scroll (hysteresis handled in animations.js) ── */
.nav.scrolled{padding:8px 0;}

.nav.scrolled .nav-brand img{width:212px;}

/* ── nav: mega dropdown ─────────────────────────────────────── */
.nav-drop{--motion-dropdown-gap:14px;}

.nav-drop.hovering>.drop-panel{opacity:1;visibility:visible;transform:none;}

/* The five category groups are packed into three columns that all start at the
   same top line, so no group is pushed into a second row far below the others.
   Panel is centred on its trigger and width-capped so it can never run past the
   viewport edge on a narrower laptop. */
.drop-panel.mega{left:50%;right:auto;min-width:0;width:max-content;
  max-width:min(800px,calc(100vw - 40px));padding:24px 28px 20px;
  transform:translateX(-50%) translateY(-6px);}

.nav-drop:hover>.drop-panel.mega,
.nav-drop:focus-within>.drop-panel.mega,
.nav-drop.hovering>.drop-panel.mega{transform:translateX(-50%);}

.drop-cols{display:grid;gap:0 30px;align-items:start;}

.drop-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}

.drop-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}

.drop-cols-1{grid-template-columns:minmax(0,1fr);}

.drop-col{padding:0;display:flex;flex-direction:column;gap:18px;min-width:0;}

.drop-group{min-width:0;}

.drop-head{display:block;font-family:var(--serif);font-size:.92rem;font-weight:700;color:var(--ink);
  padding:0 0 7px;margin-bottom:5px;border-bottom:1px solid var(--line);border-left:0;line-height:1.28;}

.drop-panel.mega a{padding:5px 0;border-left:0;font-size:.845rem;line-height:1.34;}

.drop-panel.mega a:hover{background:transparent;color:var(--jade-ink);}

.drop-head:hover{color:var(--amber-deep);}

.drop-all{margin-top:16px;padding-top:13px;border-top:1px solid var(--line);}

.drop-all a{font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--jade-ink);}

@media (max-width:1150px){
  .drop-panel.mega{max-width:min(700px,calc(100vw - 40px));padding:22px 24px 18px;}
  .drop-cols{gap:0 24px;}
}

/* ── nav: mobile accordion ──────────────────────────────────── */
.m-acc{border-bottom:1px solid var(--line);}

.m-acc>summary{list-style:none;cursor:pointer;padding:12px 0;font-size:.98rem;font-weight:600;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;}

.m-acc>summary::-webkit-details-marker{display:none;}

.m-acc>summary::after{content:'+';font-family:var(--serif);font-size:1.3rem;line-height:1;color:var(--amber-deep);}

.m-acc[open]>summary::after{content:'\2013';}

.m-acc .m-sub{padding:9px 0 9px 16px;font-weight:400;font-size:.9rem;color:var(--body);border-bottom:0;}

.m-acc .m-head{padding:11px 0 5px 0;font-size:.79rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--jade-ink);border-bottom:0;}

/* ── breadcrumbs ────────────────────────────────────────────── */
.crumb span[aria-hidden]{padding:0 7px;color:#6B767C;}

/* ── service page furniture ─────────────────────────────────── */
.prose{max-width:70ch;}

.prose h2{font-size:clamp(1.42rem,2.5vw,2rem);margin:0 0 16px;}

.prose h3{font-size:1.06rem;margin:30px 0 10px;}

.prose+.prose{margin-top:52px;}

.checks{margin:0 0 1.05rem;}

.checks li{position:relative;padding-left:26px;margin-bottom:11px;font-size:.96rem;line-height:1.65;}

.checks li::before{content:'';position:absolute;left:0;top:.66em;width:11px;height:2px;background:var(--jade-2);}

.checks.checks-amber li::before{background:var(--amber-2);}

.ladder{display:grid;gap:0;margin-top:8px;}

.ladder-item{display:grid;grid-template-columns:64px 1fr;gap:22px;padding:24px 0;border-top:1px solid var(--line);}

.ladder-item:last-child{border-bottom:1px solid var(--line);}

.ladder-n{font-family:var(--serif);font-size:1.85rem;font-weight:700;line-height:1;color:var(--amber-deep);}

.ladder-item h3{font-size:1.04rem;margin:0 0 7px;}

.ladder-item p{font-size:.94rem;margin-bottom:0;}

.sec-dark .ladder-item{border-top-color:var(--line-d);}

.sec-dark .ladder-item:last-child{border-bottom-color:var(--line-d);}

.sec-dark .ladder-n{color:var(--amber-3);}

.callout{background:var(--wash);border-left:3px solid var(--jade-2);padding:28px 30px;margin:30px 0;}

.callout h3{font-size:1.02rem;margin:0 0 9px;}

.callout p{font-size:.95rem;margin-bottom:0;}

.callout-amber{border-left-color:var(--amber-2);}

.faq-list{max-width:76ch;}

.faq-item{border-top:1px solid var(--line);padding:26px 0;}

.faq-item:last-child{border-bottom:1px solid var(--line);}

.faq-item h3{font-size:1.04rem;margin-bottom:9px;}

.faq-item p{font-size:.95rem;margin-bottom:0;}

.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;}

.rel-card{background:var(--white);border:1px solid var(--line);border-radius:3px;padding:24px 24px 22px;}

.sec-white .rel-card{background:var(--wash);}

.rel-card h3{font-size:1rem;margin-bottom:8px;}

.rel-card p{font-size:.9rem;margin-bottom:13px;}

.rel-card .tlink{font-size:.76rem;}

.next-strip{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center;justify-content:space-between;
  border-top:1px solid var(--line);margin-top:56px;padding-top:26px;}

.next-strip p{font-size:.95rem;margin-bottom:0;max-width:62ch;}

/* ── city / service-area pages ──────────────────────────────── */
.area-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px;}

.area-card{background:var(--white);border:1px solid var(--line);border-radius:3px;padding:28px 26px;}

.sec-white .area-card{background:var(--wash);}

.area-card h3{font-size:1.06rem;margin-bottom:9px;}

.area-card p{font-size:.93rem;margin-bottom:14px;}

.area-card .tlink{font-size:.76rem;}

.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;margin-top:36px;}

.stat{border-top:2px solid var(--amber-2);padding-top:20px;}

.stat:nth-child(even){border-top-color:var(--jade-2);}

.stat h3{font-size:.77rem;letter-spacing:.16em;text-transform:uppercase;color:var(--jade-ink);margin-bottom:8px;}

.stat p{font-size:.95rem;margin-bottom:0;}

.sec-dark .stat h3{color:var(--amber-3);}

/* ── emblem plate (face-free brand mark, used where no photo) ─ */
.plate{background:var(--obsidian);border-radius:3px;padding:52px 44px;text-align:center;}

.plate img{width:104px;margin:0 auto 22px;}

.plate h3{color:var(--white);font-size:1.16rem;margin-bottom:12px;}

.plate p{color:var(--body-d);font-size:.94rem;max-width:44ch;margin:0 auto;}

@media (max-width:980px){
  .drop-panel.mega{min-width:0;}
  .ladder-item{grid-template-columns:48px 1fr;gap:16px;}
}

/* ════════════════════════════════════════════════════════════
   SITE MOTION SYSTEM — motion.css  (brand-agnostic)
   ------------------------------------------------------------
   Load it on every page (order-independent — works before OR after
   the site's own stylesheet). To match the brand, set any of these
   on :root in the SITE'S css; each has a sensible fallback so you
   only override what you want:

     :root{
       --motion-1: 232,168,32;            primary accent  (r,g,b)
       --motion-2: 130,175,225;           secondary accent (r,g,b)
       --motion-accent: #e8a820;          solid accent: bars/progress
       --motion-accent-2: #f5c842;        lighter accent
       --motion-ink: #0f2540;             deep brand color (dark accents)
       --motion-dark-rgb: 13,27,42;       dark brand color "r,g,b" — drives the video scrim
       --motion-nav-bg: rgba(255,255,255,.98);  scrolled-nav background
     }

   The JS (animations.js) reads --motion-1 / --motion-2 for the hero
   canvas. Honors prefers-reduced-motion automatically — the hero
   background video is paused + reset to its poster by animations.js
   (CSS alone cannot stop <video> playback).
   ════════════════════════════════════════════════════════════ */
:root { --motion-ease: cubic-bezier(.22,1,.36,1); }

@media (prefers-reduced-motion: reduce) {
  .rv,.rv-l,.rv-r,.rv-scale,.rv-stagger>* { opacity:1 !important; transform:none !important; }
  .orb,.mq-track { animation:none !important; }
  #hero-canvas,.banner-canvas { display:none !important; }
  /* hover kit: keep the color/glow feedback, suppress the movement */
  .hv-btn:hover,.hv-card:hover,
  .hv-card:hover .hv-icon,.hv-icon:hover,
  .hv-arrow:hover::after { transform:none !important; }
  .hv-btn::before { display:none !important; }
  /* the hero background video is paused + reset to its poster by
     animations.js — CSS cannot stop <video> playback */
}

/* page-load / page-leave fade */
body { animation: pgIn .5s ease both; }

body.leaving { opacity:0; transition:opacity .28s ease; }

@keyframes pgIn { from{opacity:0;} to{opacity:1;} }

/* scroll progress bar — RETIRED 2026-09-06 (owner ruling: reads as an AI template).
   No #sprog element, no rule. */

/* ── live video-background hero (the homepage standard, 2026-06) ──
   <video class="video-bg" autoplay muted loop playsinline
          aria-hidden="true" poster="…" src="…"></video>
   + a SEPARATE sibling <div class="video-scrim"></div> layered above.
   Set --motion-dark-rgb to the client's dark brand color ("r,g,b").
   The scrim is a LAYERED gradient: directional dark wash + bottom-up
   fade. NB: `at`-position syntax is radial-only — never use it inside
   linear-gradient() (the background silently drops → white section). */
.video-bg { position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; pointer-events:none; filter:brightness(.5); }

.video-scrim { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(105deg, rgba(var(--motion-dark-rgb,13,27,42),.86) 0%, rgba(var(--motion-dark-rgb,13,27,42),.55) 48%, rgba(var(--motion-dark-rgb,13,27,42),.28) 100%),
    linear-gradient(0deg, rgba(var(--motion-dark-rgb,13,27,42),.92) 0%, rgba(var(--motion-dark-rgb,13,27,42),0) 45%);
}

/* scroll-aware nav condense — solid background only; never
   backdrop-filter:blur() on a sticky/fixed nav (2026-06 perf rule).
   v1.2.0: .scrolled is applied with hysteresis (on past 96px, off under 24px)
   in animations.js — a site's .scrolled rule may shrink the nav, but the
   toggle can no longer flicker at the threshold (the 2026-09-06 bounce fix). */
[data-motion-nav] { transition: padding .3s var(--motion-ease), background .3s, box-shadow .3s; }

[data-motion-nav].scrolled {
  background: var(--motion-nav-bg,rgba(255,255,255,.98));
  box-shadow: 0 2px 0 rgba(15,37,64,.04), 0 10px 28px rgba(15,37,64,.12);
}

/* floating ambient orbs — live inside dark hero sections */
.orb-field { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

.orb { position:absolute; border-radius:50%; filter:blur(44px); will-change:transform,opacity; }

.orb-1 { width:420px; height:420px; top:-90px; left:-70px;
  background:radial-gradient(circle, rgba(var(--motion-1,232,168,32),.42), transparent 70%);
  animation:wtOrb1 9s ease-in-out infinite alternate; }

.orb-2 { width:360px; height:360px; bottom:-100px; right:-50px;
  background:radial-gradient(circle, rgba(var(--motion-2,130,175,225),.32), transparent 70%);
  animation:wtOrb2 12s ease-in-out infinite alternate; }

.orb-3 { width:300px; height:300px; top:45%; left:60%;
  background:radial-gradient(circle, rgba(var(--motion-1,232,168,32),.22), transparent 70%);
  animation:wtOrb3 7s ease-in-out infinite alternate; }

@keyframes wtOrb1 { 0%{opacity:.40;transform:scale(1);} 100%{opacity:.75;transform:scale(1.12) translate(2%,2%);} }

@keyframes wtOrb2 { 0%{opacity:.30;transform:scale(1);} 100%{opacity:.62;transform:scale(1.1) translate(-2%,-3%);} }

@keyframes wtOrb3 { 0%{opacity:.16;transform:translate(-50%,-50%) scale(1);} 100%{opacity:.38;transform:translate(-50%,-50%) scale(1.4);} }

/* hero / banner canvases */
#hero-canvas { position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; }

.banner-canvas { position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; }

/* the section that holds a canvas/orbs must be position:relative and its
   content lifted above — add [data-motion-stage] to that section */
[data-motion-stage] { position:relative; }

[data-motion-stage] > .container,
[data-motion-stage] > div:not(.orb-field):not(.banner-canvas):not(.video-scrim) { position:relative; z-index:2; }

/* scroll reveal */
.rv { opacity:0; transform:translateY(22px); transition:opacity .9s var(--motion-ease),transform .9s var(--motion-ease); }

.rv.on { opacity:1; transform:none; }

.rv-l { opacity:0; transform:translateX(-26px); transition:opacity .9s var(--motion-ease),transform .9s var(--motion-ease); }

.rv-l.on { opacity:1; transform:none; }

.rv-r { opacity:0; transform:translateX(26px); transition:opacity .9s var(--motion-ease),transform .9s var(--motion-ease); }

.rv-r.on { opacity:1; transform:none; }

.rv-scale { opacity:0; transform:scale(.94); transition:opacity .9s var(--motion-ease),transform .9s var(--motion-ease); }

.rv-scale.on { opacity:1; transform:none; }

.rv-stagger > * { opacity:0; transform:translateY(22px); transition:opacity .8s var(--motion-ease),transform .8s var(--motion-ease); }

.rv-stagger.on > * { opacity:1; transform:none; }

.rv-stagger.on > *:nth-child(2){transition-delay:.08s;}

.rv-stagger.on > *:nth-child(3){transition-delay:.16s;}

.rv-stagger.on > *:nth-child(4){transition-delay:.24s;}

.rv-stagger.on > *:nth-child(5){transition-delay:.32s;}

.rv-stagger.on > *:nth-child(6){transition-delay:.40s;}

/* marquee trust ticker — CLIENT-REQUEST ONLY (removed from the
   standard 2026-06-22). Never wire a marquee by default; these rules
   stay dormant unless the client explicitly asks for one. */
.marquee { overflow:hidden; padding:14px 0; position:relative; }

.marquee--accent { background:linear-gradient(90deg, var(--motion-accent,#e8a820), var(--motion-accent-2,#f5c842)); }

.marquee--ink { background:var(--motion-ink,#0f2540); }

.mq-track { display:flex; white-space:nowrap; animation:mqs 30s linear infinite; }

.marquee:hover .mq-track { animation-play-state:paused; }

.mq-item { display:inline-flex; align-items:center; gap:22px; padding:0 38px;
  font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; }

.marquee--accent .mq-item { color:var(--motion-ink,#0f2540); }

.marquee--ink .mq-item { color:#fff; }

.mq-item span.dot { width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.55; }

@keyframes mqs { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ════════════════════════════════════════════════════════════
   HOVER-INTERACTION KIT (2026-08-25 — standard)
   ------------------------------------------------------------
   Harvested from the Wolf & Tiger reference build: the "sections
   respond to you" feel. CSS-only, no JS, additive opt-in hooks —
   never restyles a component's base look. Recolors entirely from
   the --motion-* brand variables (jewel tones under palette law).
   Only transform / opacity / box-shadow / color / border-color
   animate — never layout properties.
   Default accent is --motion-1; add .hv-2 to any hook to use
   --motion-2 instead.
   ════════════════════════════════════════════════════════════ */

/* 1 ── buttons: sheen sweep + lift + brand glow.
   <a class="btn hv-btn">Book a Consultation</a> */
.hv-btn { position:relative; overflow:hidden; isolation:isolate;
  transition:transform .3s var(--motion-ease), box-shadow .35s var(--motion-ease); }

.hv-btn::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.18) 50%, transparent 62%);
  transform:translateX(-101%); transition:transform .6s var(--motion-ease); }

.hv-btn:hover::before { transform:translateX(101%); }

.hv-btn:hover { transform:translateY(-3px);
  box-shadow:0 14px 36px rgba(var(--motion-1,232,168,32),.30),
             0 0 40px rgba(var(--motion-1,232,168,32),.16); }

.hv-btn.hv-2:hover { box-shadow:0 14px 36px rgba(var(--motion-2,130,175,225),.30),
             0 0 40px rgba(var(--motion-2,130,175,225),.16); }

/* 2 ── links / nav items: underline grows in with a faint glow.
   <a class="nav-link hv-underline">Services</a>  (needs inline/inline-block) */
.hv-underline { position:relative; }

.hv-underline::after { content:''; position:absolute; left:0; bottom:-2px;
  width:100%; height:1.5px; background:var(--motion-accent,#e8a820);
  box-shadow:0 0 10px rgba(var(--motion-1,232,168,32),.45);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .35s var(--motion-ease); }

.hv-underline:hover::after, .hv-underline.on::after { transform:scaleX(1); }

/* 3 ── cards / tiles: lift + brand-tinted layered shadow + border tint.
   <div class="card hv-card"> … </div> */
.hv-card { transition:transform .3s var(--motion-ease), box-shadow .35s var(--motion-ease),
  border-color .3s, background .3s; }

.hv-card:hover { transform:translateY(-4px);
  border-color:rgba(var(--motion-1,232,168,32),.28);
  box-shadow:0 20px 52px rgba(var(--motion-1,232,168,32),.14),
             0 4px 16px rgba(var(--motion-1,232,168,32),.08),
             0 0 40px rgba(var(--motion-1,232,168,32),.12); }

.hv-card.hv-2:hover { border-color:rgba(var(--motion-2,130,175,225),.28);
  box-shadow:0 20px 52px rgba(var(--motion-2,130,175,225),.14),
             0 4px 16px rgba(var(--motion-2,130,175,225),.08),
             0 0 40px rgba(var(--motion-2,130,175,225),.12); }

/* 4 ── accent bar: a 3px brand bar grows across the card's top edge.
   Add .hv-bar to the SAME element as .hv-card (needs position + overflow). */
.hv-bar { position:relative; overflow:hidden; }

.hv-bar::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:1;
  background:var(--motion-accent,#e8a820);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .4s var(--motion-ease); }

.hv-bar.hv-2::before { background:var(--motion-accent-2,#f5c842); }

.hv-bar:hover::before { transform:scaleX(1); }

/* 5 ── ghost numeral recolor: a card's oversized numeral shifts from
   neutral to a translucent brand tint when its card is hovered.
   <div class="hv-card hv-bar"><span class="hv-num">01</span> … </div>
   (The numeral's base size/color belong to the site's own CSS —
   this hook only adds the hover recolor.) */
.hv-num { transition:color .3s; }

.hv-card:hover .hv-num { color:rgba(var(--motion-1,232,168,32),.16); }

.hv-card.hv-2:hover .hv-num { color:rgba(var(--motion-2,130,175,225),.16); }

/* 6 ── icon chips: gentle scale + soft glow when their card (or the
   icon itself) is hovered.  <span class="wi-icon hv-icon">✓</span> */
.hv-icon { transition:transform .3s var(--motion-ease), box-shadow .3s; }

.hv-card:hover .hv-icon, .hv-icon:hover { transform:scale(1.08);
  box-shadow:0 0 16px rgba(var(--motion-1,232,168,32),.32); }

.hv-card.hv-2:hover .hv-icon { box-shadow:0 0 16px rgba(var(--motion-2,130,175,225),.32); }

/* 7 ── arrow nudge on text CTAs.  <a class="hv-arrow">Our services</a> */
.hv-arrow::after { content:'→'; display:inline-block; margin-left:8px;
  transition:transform .25s var(--motion-ease); }

.hv-arrow:hover::after { transform:translateX(4px); }

/* ════════════════════════════════════════════════════════════
   DROPDOWN MENUS — HOVER BRIDGE + CLOSE DELAY  (LAW, 2026-09-09, v1.3.0)
   ------------------------------------------------------------
   Utmost Financial (job 37, 2026-09-09): a nav dropdown closed the
   instant the pointer crossed the gap between its trigger and the
   panel below it — the gap was a hover dead zone, and the panel
   shut before the pointer ever reached it. Full story, the two
   rules, and the reproduce test: SKILL.md, "Dropdown menus — the
   hover bridge + close delay (LAW, 2026-09-09)".

   RULE 1 (this block): no dead zone between trigger and panel. An
   invisible ::before bridge on the panel spans exactly the gap
   between it and its trigger, so the panel is flush with the
   trigger's hit box for pointer purposes while staying visually
   clear of it — the site's own visual design is untouched. The
   bridge is disabled on the <=900px tap panel, where the menu opens
   by tap/class, not hover.
   RULE 2 (the close delay, >=200ms + cancel-on-re-entry) is the JS
   half — see assets/animations.js `initDropdownKit()`.

   Hook: [data-motion-dropdown] is the standard trigger hook for a
   new build (pair it with a [data-motion-dropdown-panel] child for
   the panel); a site already using the .has-drop / .has-sub
   convention with a .drop panel (the MAC marketing site itself, the
   source of this fix) is picked up automatically — no markup change
   required. NO-OP GUARD: every rule below is scoped to these three
   trigger selectors, so a page with none of them gets zero rules
   and zero visual change. --motion-dropdown-gap lets a site match
   its own trigger-to-panel spacing (defaults to 16px, the MAC
   value); this block does not set the panel's position/width/
   colors — those stay owned by the site's own CSS. */
[data-motion-dropdown],.has-drop,.has-sub { position:relative; }

[data-motion-dropdown] > [data-motion-dropdown-panel]::before,
[data-motion-dropdown] > .drop::before,
.has-drop > .drop::before,
.has-sub > .drop::before {
  content:''; position:absolute; left:0; right:0;
  top:calc(var(--motion-dropdown-gap,16px) * -1);
  height:var(--motion-dropdown-gap,16px);
}

@media (max-width:900px) {
  /* no hover bridge on the tap panel — mobile opens by tap/class */
  [data-motion-dropdown] > [data-motion-dropdown-panel]::before,
  [data-motion-dropdown] > .drop::before,
  .has-drop > .drop::before,
  .has-sub > .drop::before { display:none; }
}

/* ── ThemePort blog/utility templates (namespaced, no collision with site CSS) ── */
.tp-container { max-width: 1160px; margin: 0 auto; padding: 0 28px; width: 100%; }
.tp-page-hero { background: #0E0E18; padding: 88px 0 56px; }
.tp-page-hero h1 { color: #fff; font-family: 'Source Serif 4', serif; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; margin: 0; }
.tp-page-hero .tp-meta { color: rgba(255,255,255,.75); margin: 12px 0 0; }
.tp-section { padding: 64px 0; }
.tp-content { max-width: 820px; }
.tp-content p, .tp-content ul, .tp-content ol { margin: 0 0 1.2em; }
.tp-content h2, .tp-content h3 { font-family: 'Source Serif 4', serif; color: #0E0E18; margin: 1.6em 0 .6em; line-height: 1.25; }
.tp-content img, .tp-featured { max-width: 100%; height: auto; border-radius: 8px; margin: 0 0 1.4em; }
.tp-policy { max-width: 900px; width: 100%; }
.tp-policy h2, .tp-policy h3 { font-family: 'Source Serif 4', serif; color: #0E0E18; margin: 1.6em 0 .6em; }
.tp-policy p, .tp-policy ul { margin: 0 0 1.1em; }
.tp-post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 32px; }
.tp-post-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 10px; padding: 24px; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.tp-post-card img { width: 100%; height: 200px; object-fit: cover; border-radius: 6px; margin-bottom: 16px; }
.tp-post-card h2 { font-family: 'Source Serif 4', serif; font-size: 1.3rem; line-height: 1.3; margin: 0 0 8px; }
.tp-post-card h2 a { color: #0E0E18; text-decoration: none; }
.tp-meta { color: rgba(0,0,0,.5); font-size: .85rem; margin: 0 0 10px; }
.tp-readmore { color: #E8A820; font-weight: 700; text-decoration: none; }
.tp-pagination { margin-top: 40px; text-align: center; }
.tp-pagination .page-numbers { display: inline-block; padding: 8px 14px; margin: 0 3px; border: 1px solid rgba(0,0,0,.15); border-radius: 6px; color: #0E0E18; text-decoration: none; }
.tp-pagination .page-numbers.current { background: #0E0E18; color: #fff; }


/* ── ThemePort v2.8.0 — count-adaptive team tiers ────────────────────────── */
.tp-team{display:grid;justify-content:center;align-items:start;gap:2rem;margin-left:auto;margin-right:auto}
.tp-team__card{text-align:center}
.tp-team__photo img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:12px;display:block}
.tp-team__body h3{margin:.85rem 0 .15rem}
.tp-team__role{display:block;opacity:.75;font-size:.95em}
.tp-team__bio{margin-top:.65rem;text-align:left}

/* 1 — FOUNDER FEATURE: large portrait beside the full bio. Reads as a complete
   solo-firm About section, never as a team page with one lonely card. */
.tp-team--solo{grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:2.5rem;max-width:900px;text-align:left}
.tp-team--solo .tp-team__card{display:contents}
.tp-team--solo .tp-team__photo{grid-column:1}
.tp-team--solo .tp-team__body{grid-column:2;text-align:left}
.tp-team--solo .tp-team__body h3{margin-top:0;font-size:1.6em}
@media (max-width:720px){
  .tp-team--solo{grid-template-columns:minmax(0,1fr);max-width:420px}
  .tp-team--solo .tp-team__photo,.tp-team--solo .tp-team__body{grid-column:1}
}

/* 2 — balanced centered pair, generous cards side by side */
.tp-team--pair{grid-template-columns:repeat(2,minmax(0,300px));gap:2.5rem;max-width:700px}

/* 3–4 — one centered row of equal cards */
.tp-team--row{grid-template-columns:repeat(auto-fit,minmax(0,240px));max-width:1040px}

/* 5+ — full multi-row grid; photos smallest, density highest */
.tp-team--grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));max-width:1160px;gap:1.75rem}
.tp-team--grid .tp-team__bio{font-size:.94em}

@media (max-width:640px){
  .tp-team--pair,.tp-team--row,.tp-team--grid{grid-template-columns:minmax(0,1fr);max-width:380px}
}