/* Mavericks Construction, shared theme (2026-09-17).
 *
 * Dark brand: near black ground, orange accent, light paper bands behind the
 * photo and project sections only. Everything gained in the light pass is kept:
 * one token block, a spacing and type scale, system fonts (no web font
 * request), AA contrast, correct heading order.
 *
 * Load order matters. On pages that still carry their own inline <style>, this
 * file is linked AFTER it, so the tokens and the component rules below win.
 */

:root{
  /* ground and surfaces */
  --bg:#141416;
  --bg-2:#1C1C1F;          /* cards, panels, inputs */
  --bg-3:#0F0F11;          /* footer, sticky bar */
  --text:#F7F5F2;
  --text-2:#C9C5BF;
  --text-3:#9C978F;
  --hair:rgba(255,255,255,.14);
  --brand:#F58233;
  --brand-press:#E0701F;
  --brand-text:#FF9247;    /* orange for text on the dark ground */
  --on-brand:#141416;      /* text on an orange fill */
  --ok:#4ADE80;
  --err:#FF6B6B;
  /* On top of a photograph. These do not flip in a light band: a photo is
     dark or bright on its own terms, whatever ground the section has. */
  --scrim:rgba(15,15,17,.82);
  --on-photo:#FFFFFF;
  --on-photo-2:#D9D6CC;
  --star:#E8A317;          /* review stars */

  /* type */
  --font-display:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-hero:clamp(40px,7.4vw,88px);
  --fs-h2:clamp(32px,4.8vw,56px);
  --fs-h3:clamp(21px,2vw,26px);
  --fs-lead:clamp(19px,1.7vw,23px);
  --fs-body:clamp(17px,1.2vw,18px);
  --fs-small:14px;
  --fs-eyebrow:13px;
  --track-tight:-0.035em;
  --track-snug:-0.02em;

  /* space and shape */
  --maxw:1120px;
  --measure:65ch;
  --gutter:clamp(20px,4vw,32px);
  --section-y:clamp(56px,11vw,152px);
  --gap-s:12px;
  --gap-m:24px;
  --gap-l:clamp(32px,5vw,64px);
  --radius-s:12px;
  --radius-m:18px;
  --radius-l:28px;
  --radius-pill:999px;
  --shadow-lift:0 1px 2px rgba(0,0,0,.5),0 18px 50px rgba(0,0,0,.45);
  --tap:52px;

  /* Legacy names, still read by the older pages and by the shared widgets.
     They keep their original MEANING: --ink is a dark colour, --paper is a
     light one. The old pages use them as backgrounds, so inverting them turned
     dark headers into light ones with light text. */
  --ink:#141416;
  --ink-dim:#6E6A63;
  --paper:#F2EFE9;
  --card:#1C1C1F;
  --steel:#9C978F;
  --line:rgba(255,255,255,.14);
  --orange:var(--brand);
  --orange-deep:var(--brand-text);
  --mono:var(--font-mono);
  --display:var(--font-display);
}

/* Paper bands. Used behind photo and project sections only. Scoped tokens, so
   anything inside flips to dark-on-light without its own rules. */
.band-light,.section--light{
  --bg:#F2EFE9;
  --bg-2:#FFFFFF;
  --bg-3:#EBE7DF;
  --text:#1A1A1A;
  --text-2:#3F3C38;
  --text-3:#6E6A63;
  --hair:#E0DAD0;
  --brand-text:#A9480A;
  --on-brand:#141416;
  --ok:#1E7B3C;
  --err:#B3261E;
  --ink:#1A1A1A;
  --paper:#FFFFFF;
  --card:#FFFFFF;
  --steel:#6E6A63;
  --line:#E0DAD0;
  --orange-deep:var(--brand-text);
  background:var(--bg);
  color:var(--text);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{font-family:var(--font-body);font-size:var(--fs-body);line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
::selection{background:var(--brand);color:var(--on-brand)}

/* layout */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.section,.block,.sec{padding:var(--section-y) 0}
.section--alt{background:var(--bg-2)}
.measure{max-width:var(--measure)}

/* type */
h1,h2,h3,.disp{font-family:var(--font-display);color:var(--text);font-weight:700;text-transform:none;letter-spacing:var(--track-tight)}
h1{font-size:var(--fs-hero);line-height:1.02}
h2{font-size:var(--fs-h2);line-height:1.06}
h3{font-size:var(--fs-h3);line-height:1.2;letter-spacing:var(--track-snug);font-weight:600}
h1 em,h2 em{font-style:normal;color:var(--text-3)}
/* the old pages use h3.disp, which outranks a bare h3 */
h1.disp,h2.disp,h3.disp{text-transform:none;letter-spacing:var(--track-snug);font-family:var(--font-display)}
p{color:inherit}
.eyebrow{display:block;font-family:var(--font-body);font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-text);margin-bottom:14px}
.lead,.sub{font-size:var(--fs-lead);line-height:1.45;color:var(--text-2);max-width:46ch;margin-top:20px}
.muted{color:var(--text-3)}
.small{font-size:var(--fs-small)}
.head,.sec-head{max-width:760px;margin-bottom:var(--gap-l)}
.head p,.sec-head p{color:var(--text-2);margin-top:16px;max-width:var(--measure)}
.chalk{display:none}                     /* the old orange underline, retired */

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 26px;border-radius:var(--radius-pill);font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:-0.01em;text-transform:none;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,transform .2s;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-primary,.btn-orange{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.btn-primary:hover,.btn-orange:hover{background:var(--brand-press);border-color:var(--brand-press)}
.btn-outline,.btn-ghost{background:transparent;color:var(--text);border-color:rgba(255,255,255,.34)}
.band-light .btn-outline,.band-light .btn-ghost,.section--light .btn-outline,.section--light .btn-ghost{border-color:#C9C2B6}
.btn-outline:hover,.btn-ghost:hover{border-color:var(--text)}
.btn-ink{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn-ink:hover{opacity:.88}
.btn-row,.ctas,.btnrow{display:flex;flex-wrap:wrap;gap:var(--gap-s)}
.cta-stack{display:grid;gap:var(--gap-s);margin-top:32px;max-width:520px}
.cta-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--gap-s)}
.close .cta-stack{margin-left:auto;margin-right:auto}
.link,.more{color:var(--brand-text);font-weight:600;text-decoration:none}
.link:hover,.more:hover{text-decoration:underline}

/* surfaces */
.card,.panel{background:var(--bg-2);border:1px solid var(--hair);border-radius:var(--radius-l);padding:clamp(20px,3vw,32px);color:var(--text)}
.card{box-shadow:var(--shadow-lift)}
.photo{border-radius:var(--radius-m);overflow:hidden;background:var(--bg-2)}
.photo img{width:100%;height:100%;object-fit:cover}
.cards,.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gap-m)}
.cards .card ul{list-style:none;margin-top:14px;display:grid;gap:10px}
.cards .card li{color:var(--text-2);font-size:16px;padding-left:18px;position:relative}
.cards .card li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.cards .card .more{display:inline-block;margin-top:16px}

/* top bar and nav */
.topbar{background:var(--bg-3);color:var(--text-3);font-size:var(--fs-small);border-bottom:1px solid var(--hair)}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.topbar b{color:var(--text-2);font-weight:600}
.topbar a{color:var(--brand-text);text-decoration:none}
@media(max-width:700px){.topbar .wrap>div:first-child{display:none}.topbar .wrap{justify-content:center}}
header.nav,.nav{position:sticky;top:0;z-index:50;background:rgba(20,20,22,.86);-webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px);border-bottom:1px solid var(--hair)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:24px}
.logo{display:inline-flex;align-items:center}
.logo svg,.logoimg{height:34px;width:auto}
.navlinks{display:flex;align-items:center;gap:26px}
.navlinks a{font-size:15px;color:var(--text-2);text-decoration:none;font-weight:500}
.navlinks a:hover{color:var(--text)}
.navlinks .btn{min-height:40px;padding:0 18px;font-size:15px}
/* .navlinks a outranks .btn-primary, so restate the label colour here */
.navlinks a.btn-primary,.navlinks a.btn-orange{color:var(--on-brand)}
.navlinks a.btn-outline,.navlinks a.btn-ghost{color:var(--text)}
@media(max-width:1000px){.navlinks a:not(.btn){display:none}}
/* Phone menu. Below 1000px the links above are hidden, so this native
   <details> takes over. No script: it opens with JavaScript off. */
.navmenu{display:none}
@media(max-width:1000px){
  .nav .wrap{gap:var(--gap-s)}
  .navlinks{margin-left:auto}
  .navlinks .btn{min-height:44px}
  .navmenu{display:block}
  .navmenu summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1px solid var(--hair);border-radius:var(--radius-pill);color:var(--text);font-size:15px;font-weight:600;cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}
  .navmenu summary::-webkit-details-marker{display:none}
  .navmenu-ic{display:block;width:18px;height:12px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}
  .navmenu-ic::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:2px solid currentColor}
  .navmenu[open] summary{background:var(--bg-2)}
  .navmenu-panel{position:absolute;left:0;right:0;top:100%;background:var(--bg-3);border-bottom:1px solid var(--hair);padding:0 var(--gutter) var(--gap-s);max-height:calc(100vh - 64px);overflow-y:auto}
  .navmenu-panel a{display:flex;align-items:center;min-height:var(--tap);font-size:var(--fs-body);font-weight:500;color:var(--text);text-decoration:none;border-bottom:1px solid var(--hair)}
  .navmenu-panel a:last-child{border-bottom:0}
}
/* the older pages set a 48px logo in their own <style>; it does not fit beside two buttons on a phone */
@media(max-width:520px){.navmenu summary{padding:0 12px}.navlinks .btn{padding:0 14px}.nav .logo .logoimg{height:32px}}
.foot-updated{color:var(--text-3)}

/* Reference pages: long reading at the 65ch measure. Tables scroll inside
   their own box on a phone, so the page itself never scrolls sideways. */
.article{max-width:var(--measure)}
.article-lead{max-width:var(--measure)}
.article-lead b,.article b{color:var(--text);font-weight:600}
.article-sec{padding-top:0}
.article h2{font-size:calc(var(--fs-h3)*1.3);line-height:1.15;letter-spacing:var(--track-snug);margin-top:var(--gap-l)}
.article h2:first-child{margin-top:0}
.article h3{margin-top:var(--gap-m)}
.article p{color:var(--text-2);margin-top:16px}
.article a,.article-lead a{color:var(--brand-text);text-underline-offset:3px}
.article .points{gap:14px;margin-top:20px}
.article-ol{margin:20px 0 0 1.3em;display:grid;gap:12px;color:var(--text-2)}
.article-ol li::marker{color:var(--brand-text);font-weight:600}
.table-scroll{overflow-x:auto;margin-top:20px;border:1px solid var(--hair);border-radius:var(--radius-s)}
.table-scroll table.spec{min-width:460px;font-size:16px}
.table-scroll table.spec tr:last-child td{border-bottom:0}
.ref-links{list-style:none;display:grid;gap:0;margin-top:var(--gap-s);max-width:var(--measure)}
.ref-links a{display:flex;align-items:center;min-height:var(--tap);border-bottom:1px solid var(--hair);color:var(--text);text-decoration:none;font-weight:500}
.ref-links a:hover{color:var(--brand-text)}

/* page hero on inner pages */
.phero{padding:clamp(48px,9vw,120px) 0 clamp(32px,6vw,72px);background:var(--bg)}
.phero h1{max-width:18ch}
.phero .sub{max-width:52ch}

/* forms */
.field{margin-top:14px}
.field label,.lbl{display:block;font-size:var(--fs-small);font-weight:600;color:var(--text-2);margin-bottom:6px}
.field input,.field select,.field textarea,input[type=text],input[type=tel],input[type=email],input[type=number],select,textarea{width:100%;min-height:var(--tap);padding:0 16px;font:inherit;font-size:17px;color:var(--text);background:var(--bg-2);border:1.5px solid var(--hair);border-radius:var(--radius-s)}
textarea{padding:12px 16px;min-height:120px}
.field input:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand)}
.consent,.disc,.hint{font-size:var(--fs-small);line-height:1.5;color:var(--text-3);margin-top:8px}
.success{display:none;margin-top:14px;padding:12px 16px;border-radius:var(--radius-s);background:rgba(74,222,128,.12);color:var(--ok);font-size:15px;font-weight:600;border:1px solid rgba(74,222,128,.3)}
.inline-form{display:flex;gap:var(--gap-s);max-width:520px;margin-top:20px}
@media(max-width:520px){.inline-form{flex-direction:column}.inline-form .btn{width:100%}}
.area-out{margin-top:14px;font-weight:600;min-height:1.6em}
.area-out.yes{color:var(--ok)}
.area-out.maybe{color:var(--brand-text)}
.drop{border:1.5px dashed var(--hair);border-radius:var(--radius-m);padding:28px 20px;text-align:center;cursor:pointer;background:var(--bg-2);transition:border-color .2s,background-color .2s}
.drop:hover,.drop.over{border-color:var(--brand);background:rgba(245,130,51,.08)}
.drop b,.drop .disp{display:block;font-family:var(--font-display);font-size:18px;font-weight:600;text-transform:none}
.drop span,.drop p{display:block;font-size:var(--fs-small);color:var(--text-3);margin-top:4px}
.drop input[type=file]{display:none}

/* badges, steps, faq */
.badges{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:28px}
.badge{font-size:var(--fs-small);color:var(--text-3);background:none;border:0;padding:0;letter-spacing:0;text-transform:none;display:flex;align-items:center;gap:8px}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand)}
.trust-line{list-style:none;display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:28px;font-size:var(--fs-small);color:var(--text-3)}
.trust-line li{display:flex;align-items:center;gap:8px}
.trust-line li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand)}
.steps{list-style:none;counter-reset:s;display:grid;gap:14px;margin:18px 0 20px}
.steps li{counter-increment:s;display:flex;gap:12px;color:var(--text-2);font-size:16px;align-items:flex-start}
.steps li .dot{display:none}
.steps li::before{content:counter(s);flex:none;width:26px;height:26px;border-radius:50%;background:var(--bg-2);border:1px solid var(--hair);color:var(--text);font:600 14px/24px var(--font-display);text-align:center}
.steps b{color:var(--text);font-weight:600}
.points{list-style:none;margin-top:28px;display:grid;gap:20px}
.points li{padding-left:22px;position:relative;color:var(--text-2)}
.points li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--brand)}
.points b{color:var(--text);font-weight:600}
.faq details{border-bottom:1px solid var(--hair);padding:18px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:18px;color:var(--text);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;margin-left:12px;color:var(--brand-text);font-family:var(--font-mono)}
.faq details[open] summary::after{content:"\2212"}
.faq p{color:var(--text-2);margin-top:12px}

/* the closing band */
.final,.close{background:var(--bg);text-align:center;padding:var(--section-y) 0}
.final h2,.close h2{color:var(--text)}
.final p,.close p{color:var(--text-2);margin:16px auto 0;max-width:46ch;font-weight:400}
.final .btn,.close .btn{margin-top:0}
.final .wrap>.btn{margin-top:26px}
.final .btn+.btn{margin-left:10px}

/* footer */
footer,.footer{background:var(--bg-3);padding:64px 0 calc(40px + env(safe-area-inset-bottom));font-size:var(--fs-small);color:var(--text-3);border-top:1px solid var(--hair)}
footer .wrap,.footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1.3fr;gap:var(--gap-l)}
footer .wrap.legal,.footer .legal{display:block;border-top:1px solid var(--hair);margin-top:40px;padding-top:20px}
@media(max-width:760px){footer .wrap,.footer .cols{grid-template-columns:1fr}}
footer h4,.footer h3,.footer h4{font-size:var(--fs-small);color:var(--text);font-weight:600;margin-bottom:12px;letter-spacing:0}
footer ul,.footer ul{list-style:none;display:grid;gap:8px}
footer a,.footer a{color:var(--text-2);text-decoration:none}
footer a:hover,.footer a:hover{color:var(--text);text-decoration:underline}
footer p{color:var(--text-3)}
.footer .legal a,footer .legal a{margin-left:14px}

/* sticky contact bar, phones only */
.stickybar{display:none}
@media(max-width:860px){
  .stickybar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(15,15,17,.94);-webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px);border-top:1px solid var(--hair)}
  .stickybar a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;border-radius:var(--radius-pill);font:600 16px var(--font-display);text-transform:none;letter-spacing:0;text-decoration:none;color:var(--text);background:rgba(255,255,255,.08);border:0}
  .stickybar a:last-child{background:var(--brand);color:var(--on-brand)}
  .stickybar a+a{border-left:0}
  .stickybar .ic{display:none}
  body{padding-bottom:78px}
}

/* ---------------------------------------------------------------- homepage */
.hero{padding:clamp(40px,8vw,112px) 0 var(--section-y)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:var(--gap-l);align-items:start}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr}}
/* Desktop: estimator on the right spanning both rows, photo under the copy.
   Phones: headline, work strip, estimator, then the photo, so the lead engine
   is reachable without scrolling past a full height picture. */
@media(min-width:961px){
  .hero-grid > .est{grid-column:2;grid-row:1 / span 2}
  .hero-grid > .hero-photo{grid-column:1;grid-row:2}
}
.hero-photo{margin-top:clamp(28px,4vw,40px);aspect-ratio:4/3;position:relative}
@media(max-width:960px){.hero-photo{margin-left:calc(var(--gutter)*-1);margin-right:calc(var(--gutter)*-1);border-radius:0}}

/* Hero: a slow crossfade of the best whole-building photo from each job, one
   per job, at every width. Pure CSS. The first slide starts already faded in
   (its delay puts it one second into its turn), so the largest paint is never
   an invisible image. Each slide is on screen 6s of a 36s cycle. */
.hero-jobs .hs{position:absolute;inset:0;opacity:0;animation:heroJobs 36s infinite ease-in-out}
.hero-jobs .hs img{width:100%;height:100%;object-fit:cover;display:block}
.hero-jobs .hs:nth-child(1){animation-delay:-1s}
.hero-jobs .hs:nth-child(2){animation-delay:-31s}
.hero-jobs .hs:nth-child(3){animation-delay:-25s}
.hero-jobs .hs:nth-child(4){animation-delay:-19s}
.hero-jobs .hs:nth-child(5){animation-delay:-13s}
.hero-jobs .hs:nth-child(6){animation-delay:-7s}
@keyframes heroJobs{
  0%{opacity:0;transform:scale(1.02)}
  2.78%{opacity:1}
  16.67%{opacity:1}
  19.44%{opacity:0;transform:scale(1.06)}
  100%{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .hero-jobs .hs{animation:none;opacity:0;transform:none}
  .hero-jobs .hs:first-child{opacity:1}
}
.seg{display:inline-flex;margin-top:28px;padding:4px;background:rgba(255,255,255,.08);border-radius:var(--radius-pill)}
.seg button{border:0;background:transparent;font:600 15px var(--font-display);color:var(--text-2);min-height:44px;padding:0 18px;border-radius:var(--radius-pill);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--brand);color:var(--on-brand)}
.est h2{font-size:clamp(26px,2.6vw,32px);letter-spacing:var(--track-snug)}
.est .tag{display:block;font-size:var(--fs-small);color:var(--text-3);margin:6px 0 18px}
.est .note{font-size:var(--fs-small);color:var(--text-3);margin-top:14px;line-height:1.5}
.est .btn{width:100%;margin-top:16px}
.est small{display:block;margin-top:10px;color:var(--text-3);font-size:var(--fs-small)}

.proof-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px;margin-bottom:var(--gap-m)}
.rating{display:flex;align-items:center;gap:12px;font-size:var(--fs-lead);font-weight:600;font-family:var(--font-display);letter-spacing:var(--track-snug)}
.stars{color:var(--brand);letter-spacing:2px;font-size:22px}
.reviews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-m)}
@media(max-width:760px){.reviews{grid-template-columns:1fr}}
.review{display:flex;flex-direction:column;justify-content:space-between;gap:20px;text-decoration:none;color:inherit}
.review blockquote{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--text);font-family:var(--font-display);letter-spacing:-0.01em}
.review figcaption{font-size:var(--fs-small);color:var(--text-3)}
.review figcaption b{color:var(--text);font-weight:600}

.services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-m)}
@media(max-width:760px){.services{grid-template-columns:1fr}}
.service{display:block;text-decoration:none;color:inherit}
.service .photo{aspect-ratio:4/3}
.service .photo img{transition:transform .6s ease}
.service:hover .photo img{transform:scale(1.03)}
.service h3{margin-top:18px}
.service p{color:var(--text-2);margin-top:6px;max-width:48ch}
.service .link{display:inline-block;margin-top:10px}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap-l);align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}

.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-m)}
@media(max-width:860px){.projects{grid-template-columns:1fr}}
.project{display:block;text-decoration:none;color:inherit}
.project .photo{aspect-ratio:4/3}
.project .photo img{transition:transform .6s ease}
.project:hover .photo img{transform:scale(1.03)}
.project .meta{margin-top:16px;font-size:var(--fs-eyebrow);letter-spacing:.06em;text-transform:uppercase;color:var(--brand-text);font-weight:600}
.project h3{margin-top:6px}
.project .line{color:var(--text-2);margin-top:6px;font-size:16px}
.work-links{margin-top:var(--gap-m);display:flex;gap:24px;flex-wrap:wrap;align-items:baseline}
.muted-link{color:var(--text-3);text-decoration:none;font-size:var(--fs-small)}
.muted-link:hover{color:var(--text);text-decoration:underline}

.how{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-m);counter-reset:h}
@media(max-width:860px){.how{grid-template-columns:1fr}}
.how li{counter-increment:h}
.how li::before{content:"0" counter(h);display:block;font:700 15px var(--font-display);color:var(--brand-text);letter-spacing:.04em;margin-bottom:14px}
.how p{color:var(--text-2);margin-top:8px}

/* phones only: scrollable strip of real work above the estimator */
.workstrip{display:none}
@media(max-width:767px){
  .workstrip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:28px calc(var(--gutter)*-1) 20px;padding:0 var(--gutter) 4px;scrollbar-width:none}
  .workstrip::-webkit-scrollbar{display:none}
  .workstrip figure{flex:0 0 62%;scroll-snap-align:start}
  .workstrip .photo{aspect-ratio:4/3;border-radius:var(--radius-s)}
  .workstrip figcaption{margin-top:8px;font-size:var(--fs-small);color:var(--text-3)}
}

/* reveal on scroll, below the fold only; visible without JS */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .45s ease,transform .45s ease}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .service .photo img,.project .photo img,.btn{transition:none}
}

/* A light card on the dark ground. The ballpark widget paints its own controls
   white, so the card it sits in has to be light or its text disappears. */
.card.band-light,.panel.band-light{background:#fff;border-color:#E0DAD0}
.card.band-light .tag,.card.band-light .note,.card.band-light small{color:var(--text-3)}

/* legacy tool tables and tags */
table.spec{width:100%;border-collapse:collapse}
table.spec thead th{background:var(--bg-2);color:var(--text);text-align:left}
table.spec td,table.spec th{border-bottom:1px solid var(--hair);padding:10px 12px;color:var(--text-2)}
.tools-tag{color:var(--brand-text)}
.kv,.rangeval{color:var(--text-2)}

/* Footer, four even columns. The old three-column footer packed areas, tools
   and socials into comma runs that wrapped badly and left the right side empty. */
.footer.foot4{border-top:3px solid var(--brand);padding-top:56px}
.footer.foot4 .wrap{display:block}
.foot4 .foot-grid{display:grid;grid-template-columns:1.35fr 1.35fr .9fr 1.1fr;gap:var(--gap-l) var(--gap-m)}
@media(max-width:900px){.foot4 .foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot4 .foot-grid{grid-template-columns:1fr}}
.foot4 .foot-brand .logo{display:inline-block;margin-bottom:14px}
.foot4 .foot-brand p{max-width:34ch;line-height:1.6}
.foot4 h3{font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--text);margin:0 0 var(--gap-s)}
.foot4 h3.foot-gap{margin-top:var(--gap-m)}
/* Link rows are 44px tall so a thumb can hit them; the gap comes from the rows. */
.foot4 ul{gap:0}
.foot4 ul a,.foot4 .foot-legal a{display:inline-flex;align-items:center;min-height:44px}
.foot4 .foot-contact{gap:var(--gap-s)}
.foot4 .foot-contact li>a{min-height:0}
.foot4 .foot-contact b{display:block;color:var(--text);font-weight:600}
.foot4 .foot-contact span{display:block}
.foot4 .foot-contact li>a{text-decoration:none}
.foot4 .foot-tags{display:flex;flex-wrap:wrap;gap:8px}
.foot4 .foot-tags a{display:inline-flex;align-items:center;min-height:44px;border:1px solid var(--hair);border-radius:var(--radius-s);padding:0 14px}
.foot4 .foot-tags a:hover{border-color:var(--brand);text-decoration:none}
.foot4 .foot-legal{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0 var(--gap-m);border-top:1px solid var(--hair);margin-top:var(--gap-l);padding-top:var(--gap-s)}
.foot4 .foot-legal a{margin-left:0;margin-right:var(--gap-m)}
.foot4 .foot-legal span:last-child a:last-child{margin-right:0}

/* Project cards. api/project-cards.mjs writes the photo-story ones; the older
   hand-written cards use the same classes without a thumbnail strip. */
.pcard{background:var(--bg-2);border:1px solid var(--hair);border-radius:var(--radius-l);overflow:hidden;display:flex;flex-direction:column;scroll-margin-top:90px}
.pcard .pc-main{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-3)}
.pcard .pc-main.pc-wide{aspect-ratio:16/9}
.pcard .pc-main img{width:100%;height:100%;object-fit:cover;display:block}
.pcard .pc-stage{position:absolute;left:12px;bottom:12px;background:var(--scrim);color:var(--on-photo);font-size:var(--fs-small);font-weight:600;padding:5px 12px;border-radius:var(--radius-pill)}
.pcard .pc-thumbs{display:flex;gap:6px;padding:6px;overflow-x:auto;background:var(--bg-3);scrollbar-width:none}
.pcard .pc-thumbs::-webkit-scrollbar{display:none}
.pcard .pc-thumb{flex:0 0 70px;height:var(--tap);border-radius:var(--radius-s);overflow:hidden;opacity:.62;border:2px solid transparent;transition:opacity .2s,border-color .2s}
.pcard .pc-thumb.on,.pcard .pc-thumb:hover{opacity:1;border-color:var(--brand)}
.pcard .pc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pcard .pc-body{padding:var(--gap-m) 20px}
.pcard .pc-meta{font-family:var(--font-mono);font-size:var(--fs-eyebrow);color:var(--brand-text);letter-spacing:.06em;text-transform:uppercase}
.pcard .pc-tag{display:inline-block;background:var(--text);color:var(--bg);border-radius:var(--radius-pill);padding:2px 10px;margin-right:8px;letter-spacing:.08em}
.pcard h3{font-size:var(--fs-h3);line-height:1.2;letter-spacing:var(--track-snug);margin-top:8px;color:var(--text)}
.pcard .pc-body>p{font-size:var(--fs-small);color:var(--text-2);margin-top:8px;line-height:1.6}
.pcard .pc-review{margin-top:var(--gap-s);padding-top:var(--gap-s);border-top:1px solid var(--hair)}
.pcard .pc-quote{margin:0 0 8px;font-size:var(--fs-body);line-height:1.6;color:var(--text);font-style:italic}
.pcard .pc-by{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:var(--fs-small);color:var(--text-3)}
.pcard .pc-stars{color:var(--star);letter-spacing:2px;font-size:var(--fs-body)}
.pcard .pc-by a{color:var(--brand-text);font-weight:600;margin-left:auto;display:inline-flex;align-items:center;min-height:44px}
.pcard-flag{grid-column:1/-1}
@media(min-width:900px){
  .pcard-flag{flex-direction:row}
  .pcard-flag .pc-media{flex:0 0 60%;display:flex;flex-direction:column;background:var(--bg-3)}
  .pcard-flag .pc-main{aspect-ratio:16/10;flex:1}
  .pcard-flag .pc-body{padding:var(--gap-l) 28px;align-self:center}
  .pcard-flag h3{font-size:var(--fs-h3)}
  .pcard-flag .pc-body>p{font-size:var(--fs-body)}
  .pcard-flag .pc-quote{font-size:var(--fs-lead)}
  .pcard-flag .pc-thumb{flex-basis:88px;height:64px}
}

/* Project film: play button over the main photo, player in place of it. It is
   the card's one orange action. */
.pcard .pc-play{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:10px;min-height:var(--tap);background:var(--brand);color:var(--on-brand);font-weight:700;font-size:var(--fs-small);padding:0 18px 0 12px;border-radius:var(--radius-pill);text-decoration:none;transition:background .2s}
.pcard .pc-play:hover{background:var(--brand-press)}
.pcard .pc-play-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--on-brand);color:var(--on-photo);font-size:var(--fs-small);line-height:1;padding-left:2px}
.pcard .pc-main video{position:absolute;inset:0;width:100%;height:100%;background:var(--bg-3);object-fit:contain}
.pcard .pc-main.pc-film .pc-play,.pcard .pc-main.pc-film .pc-stage{display:none}
/* On a small card the stage label would sit under the button. */
.pcard:not(.pcard-flag) .pc-main:has(.pc-play) .pc-stage{top:12px;bottom:auto}

/* Homepage Recent work mosaic: one tall tile and four small ones. */
.rw-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:4px;height:560px;border-radius:var(--radius-m);overflow:hidden}
.rw-tile{position:relative;overflow:hidden;display:block;background:var(--bg-3);text-decoration:none}
.rw-big{grid-row:1/3}
.rw-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.rw-tile:hover img{transform:scale(1.04)}
.rw-loc{position:absolute;left:0;right:0;bottom:0;padding:32px 16px 14px;background:linear-gradient(0deg,var(--scrim),transparent);color:var(--on-photo);font-weight:700;font-size:var(--fs-body);line-height:1.25}
.rw-loc small{display:block;font-weight:500;font-size:var(--fs-small);color:var(--on-photo-2);margin-top:2px}
.rw-big .rw-loc{font-size:var(--fs-h3);padding:48px 20px 18px}
@media(max-width:860px){
  .rw-grid{grid-template-columns:1fr 1fr;grid-template-rows:300px 190px 190px;height:auto}
  .rw-big{grid-column:1/3;grid-row:auto}
}
.service .photo img[style*="object-position"]{object-fit:cover}

@media(prefers-reduced-motion:reduce){
  .rw-tile img,.pcard .pc-thumb,.pcard .pc-play{transition:none}
  .rw-tile:hover img{transform:none}
}