/* TradieWebsiteHQ subpage kit. Locked design: Option 1 industrial hi-vis. */
:root{
  --paper:#FFFFFF; --ink:#1E2127; --navy:#14243A; --navy2:#1D3255;
  --orange:#F1662B; --orange-d:#DB5217; --orange-t:#FDEDE4;
  --yellow:#F2E51E;
  --tint:#F5F4EF; --line:#E2DED6; --line-dark:rgba(255,255,255,.14);
  --green:#1E8A5A; --green-t:#E4F3EC; --grey:#6A6F78;
  --disp:'Gabarito',sans-serif; --stencil:'Saira Stencil One',sans-serif; --body:'Figtree',sans-serif;
  --brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6C30 4.2 60 7.2 90 5.6C120 4.2 150 7 180 5.4C205 4.2 226 6.4 238 5.2' fill='none' stroke='%23F1662B' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M6 8C40 6.6 80 8.6 120 7.2C160 6 200 8.2 236 7' fill='none' stroke='%23F1662B' stroke-width='1' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;overflow-x:clip}
body{font-family:var(--body);font-size:18px;line-height:1.7;color:var(--ink);background:var(--paper)}
img{display:block;max-width:100%}
a{color:inherit}
p,li,blockquote{text-wrap:pretty}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
section{padding:clamp(64px,8vw,110px) 0;position:relative}
h1,h2,h3{font-family:var(--disp);font-weight:800;line-height:1.05;letter-spacing:-.025em;color:var(--navy)}
.h-xl{font-size:clamp(40px,5.6vw,72px);max-width:20ch;margin-bottom:24px}
.h-l{font-size:clamp(30px,4vw,48px);max-width:24ch;margin-bottom:20px}
h3{font-size:22px;margin-bottom:10px}
.lead{font-size:clamp(18px,1.7vw,21px);max-width:62ch;color:#3E4553}
.hl{color:var(--orange)}
.dark .hl{color:var(--yellow)}
.small{font-size:15px;color:var(--grey)}
/* section label */
.slabel{margin-bottom:26px}
.slabel-in{position:relative;display:inline-flex;gap:14px;align-items:baseline;padding-bottom:10px}
.slabel-in::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--brush) left center/100% 100% no-repeat}
.slabel .n{font-family:var(--stencil);font-size:19px;color:var(--orange)}
.slabel .t{font-size:14px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
/* dark sections + grain */
.dark{background:var(--navy);color:#EAEDF2}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark p{color:rgba(234,237,242,.85)}
.dark::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E") repeat;
  background-size:220px 220px;opacity:.5;mix-blend-mode:soft-light}
.dark>.wrap{position:relative;z-index:2}
/* header */
header{background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;transition:transform .3s ease}
header.hd-hidden{transform:translateY(-100%)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:74px;max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.logo-img{height:30px;width:auto;display:block}
nav{display:flex;align-items:center;gap:20px}
.nav-pill{display:flex;gap:3px;background:rgba(20,36,58,.06);border:1px solid var(--line);border-radius:12px;padding:5px}
nav a.nav-link{color:var(--navy);text-decoration:none;font-weight:500;font-size:15.5px;padding:8px 16px;border-radius:9px;transition:background .15s,color .15s}
nav a.nav-link:hover{background:#fff;color:var(--orange)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--orange);color:#fff;font-family:var(--disp);
  font-weight:700;font-size:17px;text-decoration:none;padding:15px 28px;border-radius:9px;border:none;cursor:pointer;
  transition:background .18s,transform .18s;box-shadow:0 14px 30px -14px rgba(241,102,43,.55)}
.btn:hover{background:var(--orange-d);transform:translateY(-1px)}
.btn.hbtn{padding:11px 20px;font-size:15px;box-shadow:none}
.btn-ghost{font-family:var(--disp);font-weight:700;color:var(--navy);text-decoration:none;
  position:relative;display:inline-block;padding-bottom:6px}
.btn-ghost::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background:var(--brush) left center/100% 100% no-repeat;
  transform:scaleX(1);transform-origin:left center;transition:transform .6s cubic-bezier(.2,.6,.2,1) .25s}
html.js .reveal:not(.in) .btn-ghost::after{transform:scaleX(0)}
.btn-ghost:hover{color:var(--orange)}
@media(max-width:880px){.nav-pill{display:none}}
/* page hero */
.page-hero{padding:clamp(52px,6vw,84px) 0 clamp(40px,5vw,64px)}
/* cards */
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:32px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:880px){.grid3{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}}
.card p{font-size:16px;color:#3E4553}
.ic-box{width:58px;height:58px;border-radius:12px;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.ic{width:28px;height:28px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* photo */
.photo{position:relative;overflow:hidden;border-radius:12px;background:linear-gradient(160deg,#22385A,#14243A)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo.noimg{display:none}
/* FAQ details */
details{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:14px;overflow:hidden;transition:background .18s,border-color .18s}
summary{display:flex;gap:20px;align-items:center;cursor:pointer;list-style:none;padding:22px 26px;font-family:var(--disp);font-weight:700;font-size:clamp(17px,1.7vw,21px);color:var(--navy)}
summary::-webkit-details-marker{display:none}
.faq-qn{font-family:var(--stencil);font-size:clamp(24px,2.6vw,32px);color:var(--orange);flex-shrink:0;min-width:56px}
summary::after{content:"+";margin-left:auto;font-family:var(--stencil);font-size:24px;color:var(--orange);transition:transform .2s}
details[open] summary::after{content:"×"}
details>p,details>div{padding:0 26px 24px 102px;font-size:16.5px;color:#3E4553;max-width:75ch}
@media(max-width:680px){details>p,details>div{padding-left:26px}}
details:not([open]):hover{background:var(--orange);border-color:var(--orange)}
details:not([open]):hover summary,details:not([open]):hover summary::after{color:#fff}
details:not([open]):hover .faq-qn{color:#fff}
/* forms */
.startform{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:12px;max-width:980px;margin:0 auto 14px;text-align:left}
@media(max-width:920px){.startform{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.startform{grid-template-columns:1fr}}
.startform input{font-family:var(--body);font-size:16px;padding:16px 18px;border-radius:9px;border:1px solid var(--line-dark);
  background:rgba(255,255,255,.08);color:#fff;outline:none;min-width:0}
.startform input::placeholder{color:rgba(255,255,255,.55)}
.startform input:focus{border-color:var(--yellow)}
.dark .btn{background:var(--yellow);color:var(--navy);box-shadow:none}
.dark .btn:hover{background:#B4D63F}
/* footer */
footer{background:var(--navy);color:#D7DCE4;padding:64px 0 34px;position:relative}
footer::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E") repeat;
  background-size:220px 220px;opacity:.5;mix-blend-mode:soft-light}
footer>.wrap{position:relative;z-index:2}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:48px}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
footer p,footer a{font-size:15px;color:rgba(215,220,228,.8);text-decoration:none}
footer h4{font-family:var(--disp);font-size:15px;color:#fff;margin-bottom:14px}
footer .col a{display:block;padding:4px 0}
footer .col a:hover{color:var(--yellow)}
.fbase{border-top:1px solid var(--line-dark);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:rgba(215,220,228,.6)}
/* reveal + utilities */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
html.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
.totop{position:fixed;right:22px;bottom:22px;width:50px;height:50px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--navy);
  display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s;z-index:49}
.totop.show{opacity:1;pointer-events:auto}
.totop:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;background:var(--orange);color:#fff;text-align:center;
  font-family:var(--disp);font-weight:700;font-size:17px;padding:16px;text-decoration:none}
@media(max-width:700px){.mcta{display:block}body{padding-bottom:58px}}
/* draft banner for legal pages */
.draftbanner{background:var(--yellow);color:var(--navy);font-weight:600;font-size:15px;text-align:center;padding:12px 20px}

/* ================= CRAFT LAYER: full homepage-grade system for subpages ================= */
/* dark sections: hazard stripe top + angled clean bottom + blueprint grid, same as homepage */
:root{--cut:64px}
.dark,footer{--hz:14px}
.dark{padding-top:calc(clamp(64px,8vw,110px) + var(--hz));padding-bottom:calc(clamp(64px,8vw,110px) + var(--cut));
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),0 100%);margin-bottom:-1px;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:44px 44px;background-color:var(--navy)}
.dark::before{content:"";position:absolute;top:0;left:0;right:0;height:var(--hz);z-index:3;
  background:repeating-linear-gradient(-45deg,var(--yellow) 0 22px,var(--navy) 22px 44px)}
@media(max-width:700px){:root{--cut:36px}}
footer{border-top:none}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:14px;z-index:3;
  background:repeating-linear-gradient(-45deg,var(--yellow) 0 22px,var(--navy) 22px 44px)}
/* tint band with drafting grid (guarantee/faq style) */
.tintb{background:var(--tint);
  background-image:linear-gradient(rgba(20,36,58,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(20,36,58,.045) 1px,transparent 1px);
  background-size:44px 44px}
/* giant stencil numerals */
.bignum{font-family:var(--stencil);font-weight:400;line-height:.85;color:transparent;
  -webkit-text-stroke:2.5px var(--orange);letter-spacing:-.02em}
.dark .bignum{-webkit-text-stroke-color:var(--yellow)}
/* icon tiles with hover flood (dark: yellow flood, navy text, white plate) */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;list-style:none}
@media(max-width:880px){.tiles{grid-template-columns:1fr}}
.tile{background:var(--navy2);border:1px solid var(--line-dark);border-radius:10px;padding:30px 28px;
  transition:background .18s ease,border-color .18s ease,transform .18s ease}
.tile h3{color:#fff;transition:color .18s ease}
.tile p{font-size:16px;color:rgba(234,237,242,.82);transition:color .18s ease}
.tile .ic-box{background:var(--yellow);color:var(--navy);transition:background .18s ease,color .18s ease}
.tile:hover{background:var(--yellow);border-color:var(--yellow);transform:translateY(-3px)}
.tile:hover h3,.tile:hover p{color:var(--navy)}
.tile:hover .ic-box{background:#fff;color:var(--yellow)}
/* light cards flood orange on hover (homepage steps/gcards behaviour) */
.card.flood{transition:background .18s ease,border-color .18s ease,transform .18s ease}
.card.flood h3,.card.flood p,.card.flood .cnum{transition:color .18s ease}
.card.flood:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-3px)}
.card.flood:hover h3,.card.flood:hover p{color:#fff}
.card.flood:hover .cnum{color:#fff}
.cnum{font-family:var(--stencil);font-size:30px;color:var(--orange);display:block;margin-bottom:10px;
  border-bottom:1px solid var(--line);padding-bottom:12px}
/* photo card with honest chip (hero-visual language) */
.photo-card{position:relative}
.photo-card .chip{position:absolute;top:18px;right:18px;background:#fff;border-radius:10px;padding:9px 15px;
  box-shadow:0 16px 36px -16px rgba(20,36,58,.4);display:flex;gap:9px;align-items:center;font-size:13.5px;font-weight:600;color:var(--navy);z-index:3}
.photo-card .chip i{width:8px;height:8px;border-radius:50%;background:#1E8A5A;flex-shrink:0}
/* statement quote band over photo */
.qband{position:relative;overflow:hidden;padding:clamp(100px,12vw,170px) 0;background:var(--navy)}
.qband .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.qband::after{content:"";position:absolute;inset:0;background:rgba(17,28,45,.82)}
.qband .wrap{position:relative;z-index:2}
.qband blockquote{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;line-height:1.25;color:#fff;
  font-size:clamp(24px,3.2vw,40px);max-width:26ch}
.qband blockquote em{font-style:normal;color:var(--yellow)}
.qband .who{margin-top:22px;color:rgba(234,237,242,.8);font-size:16px}
/* stat strip with count-ups */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}}
.stat .num{display:block;font-family:var(--stencil);font-size:clamp(56px,7vw,96px);color:var(--orange);line-height:1;margin-bottom:14px}
.dark .stat .num{color:var(--yellow)}
.stat .lbl{display:block;font-family:var(--disp);font-size:19px;font-weight:700;color:var(--navy);max-width:18ch;margin:0 auto;line-height:1.4}
.dark .stat .lbl{color:rgba(234,237,242,.7)}
.count{display:inline-block;font-variant-numeric:tabular-nums}
/* stamp slam (guarantee) */
.stampwrap{position:relative;display:flex;align-items:center;justify-content:center}
.stamp{width:min(260px,70%);height:auto;opacity:0;transform:rotate(-16deg) scale(2.6);filter:blur(5px)}
.stampwrap.in .stamp{animation:stampin .5s cubic-bezier(.5,0,.15,1) .25s forwards}
@keyframes stampin{0%{opacity:0;transform:rotate(-16deg) scale(2.6);filter:blur(5px)}30%{opacity:1}
  60%{transform:rotate(-4deg) scale(.93);filter:blur(0)}80%{transform:rotate(-4deg) scale(1.05)}
  100%{opacity:1;transform:rotate(-4deg) scale(1);filter:blur(0)}}
.stampwrap::after{content:"";position:absolute;width:min(260px,70%);aspect-ratio:1;border-radius:50%;
  border:3px solid rgba(241,235,222,.65);opacity:0;transform:scale(.6);pointer-events:none}
.stampwrap.in::after{animation:stampring .55s ease-out .5s}
@keyframes stampring{0%{opacity:.9;transform:scale(.62)}100%{opacity:0;transform:scale(1.55)}}
@media(prefers-reduced-motion:reduce){.stamp{opacity:1;transform:rotate(-4deg);filter:none}
  .stampwrap.in .stamp,.stampwrap.in::after{animation:none}}
/* page hero: eyebrow with brush underline */
.eyebrow{position:relative;display:inline-block;font-size:14px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);padding-bottom:9px;margin-bottom:22px}
.eyebrow::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background:var(--brush) left center/100% 100% no-repeat}
/* details flood already present; give open state navy edge like homepage Q1 */
details[open]{border-color:var(--navy);box-shadow:-6px 0 0 var(--yellow)}

/* no stacked navy panels: the final CTA flows straight into the footer as one block */
.cta-final{clip-path:none;padding-bottom:clamp(64px,8vw,110px);margin-bottom:0}
.cta-final+footer::before{display:none}
.cta-final+footer{border-top:1px solid rgba(255,255,255,.16)}
.card.flood:hover a{color:#fff !important}
/* TYPE LAW: a coloured emphasis phrase never splits across a line break.
   inline-block makes the whole phrase drop to the next line as one unit when it can't fit. */
h1 .hl,h2 .hl,h3 .hl{display:inline-block}

a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid var(--orange);outline-offset:2px;border-radius:4px}
.dark a:focus-visible,.dark button:focus-visible,.dark input:focus-visible{outline-color:var(--yellow)}

/* team caption under the group photo: editorial, no boxes.
   Columns align to where each person stands in the shot (left / centre / right). */
.teamnames{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line)}
.teamnames div:nth-child(1){text-align:left}
.teamnames div:nth-child(2){text-align:center}
.teamnames div:nth-child(3){text-align:right}
.teamnames b{display:block;font-family:var(--disp);font-weight:700;font-size:16px;color:var(--navy);line-height:1.3}
.teamnames span{display:block;font-size:11.5px;color:var(--grey);font-weight:600;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;line-height:1.7}
@media(max-width:480px){.teamnames{grid-template-columns:1fr}
  .teamnames div:nth-child(n){text-align:left}}

/* angled dark bottoms cut into the NEXT section's colour, not the page background:
   any tint band following a dark section tucks up underneath the angle */
.dark{z-index:1}
.dark+.tintb{margin-top:calc(-1*var(--cut));padding-top:calc(clamp(64px,8vw,110px) + var(--cut))}

nav a.nav-link.on{background:var(--navy);color:#fff}
nav a.nav-link.on:hover{background:var(--navy);color:#fff}

/* ================= STYLE-THIS-PAGE BAR (all pages) ================= */
body.theme-y{--orange:#CBEA5A;--orange-d:#B4D63F;--orange-t:#F4F9DE;--yellow:#CBEA5A;--brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6C30 4.2 60 7.2 90 5.6C120 4.2 150 7 180 5.4C205 4.2 226 6.4 238 5.2' fill='none' stroke='%23CBEA5A' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M6 8C40 6.6 80 8.6 120 7.2C160 6 200 8.2 236 7' fill='none' stroke='%23CBEA5A' stroke-width='1' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E")}
body.theme-b{--orange:#2E96EA;--orange-d:#1F81D2;--orange-t:#E3F1FC;--yellow:#6FC0F6}
body.theme-g{--orange:#2FA35B;--orange-d:#268B4C;--orange-t:#E4F4EA;--yellow:#8CE7A9}
body.font-cond{--disp:'Asap Condensed',sans-serif}
body.font-cond :where(h1,h2,h3,h4){font-weight:700;letter-spacing:0}
body.font-modern{--disp:'Mozilla Text',sans-serif;--body:'Mozilla Text',sans-serif}
body.font-modern :where(h1,h2,h3,h4){font-weight:600;letter-spacing:-.025em}
body.font-slab :where(h1,h2){font-family:'Alfa Slab One',serif;font-weight:400;letter-spacing:.005em}
body.font-slab .h-xl{font-size:clamp(30px,4.2vw,54px)}
body.font-slab .h-l{font-size:clamp(24px,3.2vw,38px)}
body.font-slab .hb{display:none}
.photo img{transition:filter .5s ease}
body.ph-duo .photo img{filter:grayscale(1) sepia(.45) hue-rotate(175deg) saturate(2.1) brightness(.96)}
body.ph-warm .photo img{filter:sepia(.32) saturate(1.25) contrast(1.03) brightness(1.02)}
body.ph-mono .photo img{filter:url(#duonavy)}
.colordev{position:fixed;bottom:14px;left:50%;transform:translate(-50%,130%);z-index:99;
  width:min(1240px,calc(100vw - 130px));background:#fff;color:var(--ink);border-radius:9px;
  padding:14px 22px 16px;display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr;gap:18px;font-size:12.5px;
  border:1px solid var(--line);box-shadow:0 14px 36px -16px rgba(20,36,58,.28);
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.colordev.up{transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){.colordev{transform:translate(-50%,0);transition:none}}
.cd-intro b{display:block;font-family:var(--disp);font-weight:700;font-size:14.5px;margin-bottom:3px}
.cd-intro b i{font-style:normal;color:var(--orange)}
.cd-intro p{font-size:12px;line-height:1.5;color:var(--grey);max-width:32ch}
.colordev button{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:7px;
  padding:5px 12px;font-size:12.5px;cursor:pointer;font-family:var(--body);transition:border-color .15s}
.colordev button:hover{border-color:var(--navy)}
.colordev button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.cd-row{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.cd-row+.cd-row{border-left:1px solid var(--line);padding-left:18px}
.cd-row span{display:block;color:var(--grey);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.cd-row .btns{display:flex;gap:7px;flex-wrap:wrap}
@media(max-width:860px){.colordev{display:none}}

/* NAV v2: no pill chrome. Quiet navy links, accent on hover, hand-drawn pencil line under the current page. */
.nav-pill{background:none;border:none;border-radius:0;padding:0;gap:8px}
nav a.nav-link{position:relative;background:none;border-radius:0;padding:10px 12px;font-weight:600;color:var(--navy)}
nav a.nav-link:hover{background:none;color:var(--orange)}
nav a.nav-link.on{background:none;color:var(--navy)}
nav a.nav-link.on::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:6px;
  background:var(--brush) left center/100% 100% no-repeat}

/* the pencil line draws itself in when a page is selected */
nav a.nav-link.on::after{transform:scaleX(0);transform-origin:left center;animation:navdraw .5s cubic-bezier(.4,0,.2,1) .2s forwards}
@keyframes navdraw{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){nav a.nav-link.on::after{transform:scaleX(1);animation:none}}

/* sub-heading pencil lines draw in as their section reveals */
html.js .eyebrow::after,html.js .slabel .slabel-in::after{transform:scaleX(0);transform-origin:left center}
html.js .eyebrow.in::after,html.js .reveal.in .eyebrow::after,
html.js .slabel.in .slabel-in::after,html.js .reveal.in .slabel-in::after{
  transform:scaleX(1);transition:transform .8s cubic-bezier(.2,.6,.2,1) .3s}
@media(prefers-reduced-motion:reduce){
  html.js .eyebrow::after,html.js .slabel .slabel-in::after{transform:scaleX(1);transition:none}}

.statband-w .lead{font-size:clamp(18px,1.8vw,22px)}
/* consistent stat band: white, orange dividers, hover pop */
.statband-w{background:#fff}
.stats{position:relative}
.stat{position:relative;padding:6px 10px;transition:transform .2s ease}
.stat:hover{transform:translateY(-4px)}
.stat:hover .num{color:var(--orange-d)}
.stat .num{transition:color .2s ease}
.stat:not(:nth-child(4n))::after{content:"";position:absolute;right:-9px;top:50%;transform:translateY(-50%);width:8px;height:min(110px,78%);
  background:var(--orange);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 240' preserveAspectRatio='none'%3E%3Cpath d='M6 2C4.2 30 7.2 60 5.6 90C4.2 120 7 150 5.4 180C4.2 205 6.4 226 5.2 238' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 240' preserveAspectRatio='none'%3E%3Cpath d='M6 2C4.2 30 7.2 60 5.6 90C4.2 120 7 150 5.4 180C4.2 205 6.4 226 5.2 238' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
@media(max-width:760px){.stat:nth-child(2)::after{display:none}}


/* twin founder quotes over the photo band */
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:start}
@media(max-width:820px){.qgrid{grid-template-columns:1fr}}
.qgrid blockquote{font-size:clamp(21px,2.1vw,29px);max-width:none}
.qgrid>div:nth-child(2){padding-top:clamp(30px,5vw,80px)}

/* broader hover affordances */
.card:not(.flood){transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:not(.flood):hover{transform:translateY(-3px);box-shadow:0 18px 36px -22px rgba(20,36,58,.3);border-color:var(--line)}
.work .shot,.pcard{transition:transform .22s ease,box-shadow .22s ease}
footer .col a{transition:color .15s ease,padding-left .15s ease}
footer .col a:hover{padding-left:4px}
.btn-ghost::after{transition:transform .25s ease}