/* Montserrat, self-hosted: one variable file covers 300 to 700, served from this site with no
   third-party request in the way of first paint. Licensed under the SIL Open Font License. */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:300 700;font-display:swap;
  src:url(fonts/montserrat-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Layout concept: a fabricated-plate system. Sharp edges, one chamfered corner on anything
   "manufactured" (buttons, image plates), charcoal steel bands alternating with a cool paper ground,
   left-anchored type on a 12-column grid. Lime is a signal colour, used only on fills and rules.
   Deliberately single-theme: this is a brand site with its own charcoal and paper bands. */
:root{
  color-scheme: light;
  --steel-900:#1c1d1f;      /* deepest charcoal: footer, hero scrim */
  --steel-800:#2e2f31;      /* brand charcoal */
  --steel-700:#3a3b3e;      /* raised surface on charcoal */
  --steel-line:#4a4c50;     /* hairline on charcoal */
  --paper:#f3f4f1;          /* cool paper ground, biased toward the lime */
  --paper-2:#e8eae5;        /* tinted band */
  --white:#fdfdfc;
  --ink:#232426;            /* text on paper */
  --ink-2:#55585c;          /* secondary text on paper */
  --mist:#c9ccc6;           /* secondary text on charcoal */
  --line:#d3d6cf;           /* hairline on paper */
  --lime:#a9cf46;           /* brand signal */
  --lime-deep:#93b836;      /* pressed state */
  --fail:#c8553d;           /* stakes: failure mark only */
  --display:"Montserrat","Avenir Next","Segoe UI",system-ui,sans-serif;
  --mono:var(--display); /* one family only: Montserrat. Kept as a name so the label styles still read as labels. */
  --ease:cubic-bezier(.16,1,.3,1);
  --cut:14px;               /* chamfer size */
  --mark:url(img/mark.png); /* the three-chevron mark, used as a mask so it can take any colour */
  --wrap:1320px;
  --band:clamp(72px,10vw,148px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--display);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--steel-900)}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p{margin:0}
h1,h2{text-wrap:balance;letter-spacing:-.025em;line-height:1.06;font-weight:600}
h2{font-size:clamp(30px,4.1vw,56px)}
h3{font-size:clamp(19px,1.6vw,23px);font-weight:600;letter-spacing:-.01em;line-height:1.25}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.on-paper :focus-visible{outline-color:var(--ink)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
@media(min-width:900px){.wrap{padding-left:max(48px,env(safe-area-inset-left,0px));padding-right:max(48px,env(safe-area-inset-right,0px))}}
.band{padding-block:var(--band)}
.steel{background:var(--steel-800);color:var(--white)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px)}

.eyebrow{font-size:12px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:15px;height:16px;flex:none;background:var(--lime);-webkit-mask:var(--mark) no-repeat center/contain;mask:var(--mark) no-repeat center/contain}
.steel .eyebrow,.hero .eyebrow{color:var(--lime)}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.6}

/* Buttons: chamfered plate */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;font:600 15px/1 var(--display);letter-spacing:.01em;text-decoration:none;white-space:nowrap;border:0;cursor:pointer;background:var(--lime);color:var(--steel-800);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);
  transition:background .2s var(--ease),transform .2s var(--ease)}
.btn:hover{background:#b9dc5c}
.btn:active{background:var(--lime-deep);transform:translateY(1px)}
.btn svg{transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--sm{min-height:44px;padding:0 20px;font-size:14px;--cut:10px}
.link{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;text-decoration:none;padding-block:10px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .35s var(--ease)}
.link:hover{background-size:0 1px;background-position:100% 100%}
.link svg{transition:transform .3s var(--ease)}
.link:hover svg{transform:translateX(4px)}

/* Navigation */
.nav{position:fixed;inset:env(safe-area-inset-top,0px) 0 auto;z-index:50;color:var(--white);transition:background .3s var(--ease),border-color .3s var(--ease);border-bottom:1px solid transparent;animation:fade .3s both}
.nav.is-solid{background:rgba(28,29,31,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom-color:var(--steel-line)}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px;transition:height .3s var(--ease)}
.nav.is-solid .nav__in{height:62px}
.logo{font-weight:700;font-size:18px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;display:flex;align-items:center;gap:10px;white-space:nowrap}
.logo img{height:30px;width:auto;transition:height .3s var(--ease)}
.nav.is-solid .logo img{height:26px}
.foot .logo img{height:34px}
.nav__links{display:none;gap:36px;list-style:none;margin:0;padding:0}
.nav__links a{font-size:14px;font-weight:500;text-decoration:none;padding-block:12px;opacity:.86;transition:opacity .2s}
.nav__links a:hover{opacity:1}
.nav__right{display:flex;align-items:center;gap:12px}
.burger{width:44px;height:44px;background:none;border:0;color:inherit;display:grid;place-items:center;cursor:pointer}
.burger span,.burger span::before{display:block;width:22px;height:2px;background:currentColor;transition:transform .3s var(--ease)}
.burger span::before{content:"";transform:translateY(7px)}
.burger[aria-expanded="true"] span{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span::before{transform:rotate(-90deg)}
.drawer{background:var(--steel-900);border-top:1px solid var(--steel-line)}
.drawer ul{list-style:none;margin:0;padding:8px 0 24px}
.drawer a{display:block;padding:16px 0;font-size:20px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--steel-line)}
@media(min-width:900px){.nav__links{display:flex}.burger,.drawer{display:none!important}}
@media(max-width:420px){.nav .btn--sm{display:none}}

/* Hero */
.hero{position:relative;color:var(--white);background:var(--steel-900);min-height:min(820px,92svh);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 46%;z-index:-2;animation:settle 1.8s var(--ease) both}
.hero__mark{display:none}
@media(min-width:900px){.hero__mark{display:block;position:absolute;right:max(48px,calc((100vw - var(--wrap))/2 + 48px));bottom:clamp(48px,7vw,88px);width:62px;aspect-ratio:219/239;background:var(--lime);pointer-events:none;-webkit-mask:var(--mark) no-repeat center/contain;mask:var(--mark) no-repeat center/contain;animation:rise .8s var(--ease) .5s both}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(28,29,31,.93) 0%,rgba(28,29,31,.74) 42%,rgba(28,29,31,.34) 100%),linear-gradient(0deg,rgba(28,29,31,.88) 0%,rgba(28,29,31,0) 52%),rgba(28,29,31,.18)}
.hero__in{width:100%;padding-block:132px clamp(48px,7vw,88px)}
.hero h1{font-size:clamp(36px,5.3vw,76px);margin-top:26px;max-width:21ch}
.hero h1 em{font-style:normal;font-weight:300;display:block}
.hero .lede{max-width:54ch;margin-top:28px;color:#e6e8e3}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px;margin-top:40px}
.hero__in>*{animation:rise .7s var(--ease) both}
.hero__in>:nth-child(2){animation-delay:.1s}
.hero__in>:nth-child(3){animation-delay:.2s}
.hero__in>:nth-child(4){animation-delay:.3s}

/* Authority */
.auth{background:var(--white);padding-block:clamp(56px,6vw,88px)}
.auth__label{font-size:12px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-2)}
.marks{display:flex;flex-wrap:wrap;gap:14px clamp(24px,3.4vw,52px);align-items:baseline;margin:26px 0 0;padding:0;list-style:none}
.marks li{font-weight:700;font-size:clamp(17px,1.7vw,24px);letter-spacing:.04em;text-transform:uppercase;color:#8d9189;transition:color .25s}
.marks li:hover{color:var(--ink)}
.stats{display:grid;grid-template-columns:1fr;margin-top:clamp(48px,5vw,72px);border-top:1px solid var(--ink)}
.stat{padding-block:26px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.stat b{font-weight:300;font-size:clamp(44px,6vw,88px);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stat b sup{font-size:.5em;color:var(--lime-deep);font-weight:500;vertical-align:top;position:relative;top:.12em}
.stat>span{font-size:14px;font-weight:500;color:var(--ink-2);text-align:right}
@media(min-width:760px){.stats{grid-template-columns:repeat(3,1fr)}.stat{flex-direction:column;justify-content:flex-start;gap:14px;border-bottom:0;padding:32px 32px 0 0}.stat+.stat{border-left:1px solid var(--line);padding-left:32px}.stat>span{text-align:left}}

/* Problem */
.problem h2{grid-column:1/-1;max-width:24ch}
.problem h2 em{font-style:normal;font-weight:300;color:var(--ink-2)}
.problem__body{grid-column:1/-1;margin-top:clamp(32px,4vw,56px);display:grid;gap:22px;max-width:62ch}
.problem__turn{font-weight:600;font-size:clamp(20px,1.9vw,26px);letter-spacing:-.015em;padding-top:22px;border-top:2px solid var(--lime);justify-self:start}
@media(min-width:900px){.problem__body{grid-column:6/12}}

/* Guide */
.guide{position:relative;overflow:hidden}
.guide__left{grid-column:1/-1}
.guide__left h2{margin-top:24px}
.guide__left p{margin-top:22px;color:var(--mist);max-width:50ch}
.guide__left p.strong{color:var(--white);font-weight:600}
.guide__plate{margin-top:40px;aspect-ratio:4/3;max-width:100%;clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%)}
.guide__plate img{width:100%;height:100%;object-fit:cover}
.guide__right{grid-column:1/-1;margin-top:56px;display:grid;align-content:start}
.proof{padding:30px 0;border-top:1px solid var(--steel-line);display:grid;gap:10px}
.proof:last-child{border-bottom:1px solid var(--steel-line)}
.proof p{color:var(--mist);font-size:16px;max-width:48ch}
.proof h3{display:flex;align-items:center;gap:14px}
.proof h3::before{content:"";width:14px;height:15px;flex:none;background:var(--lime);-webkit-mask:var(--mark) no-repeat center/contain;mask:var(--mark) no-repeat center/contain}
@media(min-width:900px){.guide__left{grid-column:1/7}.guide__right{grid-column:8/13;margin-top:0;align-content:center}.proof{padding:38px 0}}

/* Services: list drives the plate */
.svc__head{grid-column:1/-1;max-width:20ch}
.svc__list{grid-column:1/-1;margin-top:clamp(36px,4vw,60px);border-top:1px solid var(--ink)}
.svc{border-bottom:1px solid var(--line)}
.svc__btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:0;padding:24px 0;font:600 clamp(20px,2vw,28px)/1.2 var(--display);letter-spacing:-.02em;color:var(--ink-2);text-align:left;cursor:pointer;transition:color .25s,padding .35s var(--ease)}
.svc__btn i{width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);flex:none;margin-right:6px;transition:transform .35s var(--ease)}
.svc.is-on .svc__btn{color:var(--ink)}
.svc.is-on .svc__btn i{transform:rotate(-135deg)}
.svc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.svc.is-on .svc__panel{grid-template-rows:1fr}
.svc__panel>div{overflow:hidden;min-height:0}
.svc__panel p{color:var(--ink-2);max-width:46ch}
.svc__panel .link{margin:14px 0 26px}
.svc__panel img{margin-bottom:22px;aspect-ratio:16/10;object-fit:cover;width:100%}
.svc__plate{display:none}
.svc__all{grid-column:1/-1;margin-top:32px}
@media(min-width:900px){
  .svc__list{grid-column:1/6}
  .svc__panel img{display:none}
  .svc__plate{display:block;grid-column:7/13;grid-row:2/4;margin-top:clamp(36px,4vw,60px);position:relative;aspect-ratio:4/3.3;align-self:start;background:var(--paper-2);clip-path:polygon(0 0,calc(100% - 32px) 0,100% 32px,100% 100%,0 100%)}
  .svc__plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
  .svc__plate img.is-on{opacity:1;transform:none}
  .svc__all{grid-column:1/6}
}

/* Process */
.process{background:var(--paper-2)}
.process h2{max-width:18ch}
.steps{list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0;display:grid;gap:0;counter-reset:s}
.step{counter-increment:s;position:relative;padding:28px 0 28px 64px;border-top:1px solid var(--ink)}
.step::before{content:"0" counter(s);position:absolute;left:0;top:30px;font:500 14px/1 var(--mono);color:var(--ink)}
.step h3{margin-bottom:12px}
.step p{font-size:15.5px;color:var(--ink-2)}
@media(min-width:900px){
  .steps{grid-template-columns:repeat(4,1fr);column-gap:clamp(16px,2vw,32px)}
  .step{padding:26px 12px 0 0;border-top:0}
  .step::before{position:static;display:block;margin-bottom:44px}
  .step::after{content:"";position:absolute;left:0;top:52px;height:1px;width:calc(100% + clamp(16px,2vw,32px));background:var(--ink);transform-origin:left}
  .step:last-child::after{width:100%}
  .step h3::before{content:"";position:absolute;left:0;top:44px;width:15px;height:16px;background:var(--lime);z-index:1;-webkit-mask:var(--mark) no-repeat center/contain;mask:var(--mark) no-repeat center/contain}
  .step::after{left:19px;width:calc(100% + clamp(16px,2vw,32px) - 19px)}
  .step:last-child::after{width:calc(100% - 19px)}
}

/* Projects: the one horizontal disruption */
.work{padding-bottom:clamp(64px,8vw,112px)}
.work__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.work__head h2{margin-top:24px;max-width:16ch}
.work__ctl{display:flex;gap:8px}
.arrow{width:52px;height:52px;display:grid;place-items:center;background:none;border:1px solid var(--steel-line);color:var(--white);cursor:pointer;transition:background .2s,border-color .2s,opacity .2s}
.arrow:hover{background:var(--steel-700);border-color:var(--mist)}
.arrow:disabled{opacity:.3;cursor:default}
.rail{display:flex;gap:clamp(16px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;margin-top:clamp(36px,4vw,56px);padding-bottom:8px;scrollbar-width:none;scroll-padding-left:max(20px,calc((100vw - var(--wrap))/2 + 48px));padding-left:max(20px,calc((100vw - var(--wrap))/2 + 48px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.rail::-webkit-scrollbar{display:none}
.proj{flex:0 0 min(82vw,720px);scroll-snap-align:start;margin:0}
.proj__img{overflow:hidden;aspect-ratio:16/10;background:var(--steel-700)}
.proj__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.proj:hover .proj__img img{transform:scale(1.03)}
.proj figcaption{display:grid;grid-template-columns:1fr auto;gap:6px 24px;padding-top:18px;border-top:1px solid var(--steel-line);margin-top:18px}
.proj figcaption b{font-weight:600;font-size:18px}
.proj figcaption span{color:var(--mist);font-size:14.5px}
.proj figcaption small{grid-column:1/-1;font:400 12.5px/1.5 var(--mono);color:#9da19a}
.work__foot{margin-top:40px}

/* Stakes */
.stakes h2{max-width:20ch}
.stakes__grid{display:grid;gap:0;margin-top:clamp(40px,5vw,72px)}
.side{padding:clamp(28px,3.4vw,52px)}
.side--bad{background:var(--steel-800);color:var(--white)}
.side--good{background:var(--white);box-shadow:inset 0 0 0 1px var(--line)}
.side h3{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.side--bad h3{color:var(--mist)}
.side ul{list-style:none;margin:28px 0 0;padding:0;display:grid}
.side li{display:grid;grid-template-columns:28px 1fr;gap:14px;padding:18px 0;font-weight:500;font-size:clamp(16px,1.3vw,18.5px);line-height:1.45;border-top:1px solid var(--line)}
.side--bad li{border-top-color:var(--steel-line)}
.mk{width:20px;height:20px;margin-top:3px;position:relative}
.mk--x::before,.mk--x::after{content:"";position:absolute;left:9px;top:1px;width:2px;height:18px;background:var(--fail);transform:rotate(45deg)}
.mk--x::after{transform:rotate(-45deg)}
.mk--ok::before{content:"";position:absolute;left:6px;top:0;width:8px;height:15px;border-right:2.5px solid var(--lime-deep);border-bottom:2.5px solid var(--lime-deep);transform:rotate(42deg)}
@media(min-width:900px){.stakes__grid{grid-template-columns:1fr 1fr}.side--good{margin-block:-28px;box-shadow:inset 0 0 0 1px var(--line),0 30px 60px -30px rgba(35,36,38,.28)}}

/* Final CTA */
.final{background:var(--steel-800);color:var(--white);position:relative;overflow:hidden;isolation:isolate}
.final::before{content:"";position:absolute;z-index:-1;right:max(20px,calc((100vw - var(--wrap))/2 + 48px));top:var(--band);width:min(30vw,290px);aspect-ratio:219/239;background:var(--white);opacity:.075;-webkit-mask:var(--mark) no-repeat center/contain;mask:var(--mark) no-repeat center/contain}
.final h2{font-size:clamp(36px,6vw,88px);max-width:14ch}
.final h2 em{font-style:normal;font-weight:300;color:var(--lime)}
.final__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:36px;margin-top:clamp(36px,5vw,64px);padding-top:36px;border-top:1px solid var(--steel-line)}
.final__row p{color:var(--mist);max-width:38ch}
.final__act{display:grid;gap:16px;justify-items:start}
.final__act small{font-size:14.5px;color:var(--mist)}
.ph{font:400 13px/1.5 var(--mono);border:1px dashed currentColor;padding:1px 7px;opacity:.85;white-space:nowrap}

/* Footer */
.foot{background:var(--steel-900);color:var(--mist);padding-block:72px 36px;font-size:15px}
.foot__top{display:grid;gap:44px}
.foot .logo{color:var(--white)}
.foot__tag{margin-top:18px;max-width:28ch;color:var(--mist)}
.foot h4{margin:0 0 16px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--white)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot a{text-decoration:none;transition:color .2s}
.foot a:hover{color:var(--white)}
.foot__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}
.foot__legal{margin-top:64px;padding-top:24px;border-top:1px solid var(--steel-line);display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;font-size:13.5px}
.sel{user-select:all}
@media(min-width:900px){.foot__top{grid-template-columns:4fr 8fr}.foot__cols{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Motion */
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
@keyframes fade{from{opacity:0}}
@keyframes settle{from{transform:scale(1.06)}}
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*150ms)}
.js .rv--r{transform:translateX(-28px)}
.js .rv.in{opacity:1;transform:none}
@media(min-width:900px){.js .steps .step::after{transform:scaleX(0);transition:transform .9s var(--ease);transition-delay:calc(var(--i,0)*200ms)}.js .steps .step.in::after{transform:none}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
  .js .steps .step::after{transform:none}
}

/* ===== Shared page chrome additions ===== */
.nav__links a.is-here{opacity:1;position:relative}
.nav__links a.is-here::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--lime)}
.drawer a.is-here{color:var(--lime)}

/* Sub-page hero: shorter than the homepage, still sized to its content */
.hero--sub{min-height:min(700px,80svh);margin-top:62px}
.hero--sub .hero__img{animation:none}
/* Two gradients, not one. The vertical ramp grounds the type at the foot of the frame;
   the horizontal one darkens only the column the type sits in, so the right-hand side of
   the photograph stays open and the picture is never dimmed as a whole. */
.hero--sub::after{background:
  linear-gradient(90deg,rgba(28,29,31,.72) 0%,rgba(28,29,31,.6) 30%,rgba(28,29,31,.22) 62%,rgba(28,29,31,0) 88%),
  linear-gradient(180deg,rgba(28,29,31,0) 0%,rgba(28,29,31,.12) 28%,rgba(28,29,31,.5) 56%,rgba(28,29,31,.86) 86%,rgba(28,29,31,.95) 100%)}
.hero--sub .hero__in{padding-block:clamp(130px,19vw,220px) clamp(40px,5vw,62px)}
.hero--sub .eyebrow,.hero--v2 .eyebrow{text-shadow:0 1px 3px rgba(28,29,31,.9),0 0 18px rgba(28,29,31,.85),0 0 34px rgba(28,29,31,.6)}
.hero--sub h1{font-size:clamp(30px,4.1vw,56px);font-weight:500;letter-spacing:-.02em;line-height:1.12;max-width:26ch;text-shadow:0 1px 2px rgba(28,29,31,.55),0 2px 34px rgba(28,29,31,.6)}
.hero--sub h1 em{font-weight:300}
.hero--sub .lede{font-size:clamp(16px,1.15vw,18px);max-width:52ch;text-shadow:0 1px 2px rgba(28,29,31,.5),0 2px 26px rgba(28,29,31,.6)}
.hero--sub .hero__mark{display:none}
@media(max-width:620px){.hero--sub{min-height:min(600px,74svh)}}

/* Centred intro band, used once on Contact */
.intro{text-align:center}
.intro h1{font-size:clamp(34px,4.6vw,64px);margin-inline:auto;max-width:18ch}
.intro .lede{margin:24px auto 0;max-width:46ch;color:var(--ink-2)}
.intro__reach{display:flex;flex-wrap:wrap;gap:12px 40px;justify-content:center;margin-top:36px;padding-top:28px;border-top:1px solid var(--line);font-weight:600;font-size:17px}

/* Alternating image + text rows */
.alt{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
.alt + .alt{margin-top:clamp(56px,7vw,104px)}
.alt__fig{margin:0;aspect-ratio:4/3;clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%);background:var(--paper-2)}
.alt__fig img{width:100%;height:100%;object-fit:cover}
.alt h3{margin-bottom:18px}
.alt p{color:var(--ink-2);max-width:52ch}
.steel .alt p{color:var(--mist)}
@media(min-width:900px){
  .alt{grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px)}
  .alt:nth-of-type(even) .alt__fig{order:2}
}

/* "What this covers" */
.covers{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.steel .covers{border-top-color:var(--steel-line)}
.covers li{padding:13px 0 13px 26px;position:relative;font-size:15.5px;border-bottom:1px solid var(--line)}
.steel .covers li{border-bottom-color:var(--steel-line)}
.covers li::before{content:"";position:absolute;left:0;top:19px;width:11px;height:12px;background:var(--lime);-webkit-mask:var(--mark) no-repeat center/contain;mask:var(--mark) no-repeat center/contain}
@media(min-width:720px){.covers{grid-template-columns:1fr 1fr;column-gap:32px}}

/* Service block (Services page) */
.svcb{display:grid;gap:clamp(28px,4vw,56px);align-items:start}
.svcb__fig{margin:0;aspect-ratio:16/11;clip-path:polygon(0 0,calc(100% - 32px) 0,100% 32px,100% 100%,0 100%);background:var(--paper-2)}
.svcb__fig img{width:100%;height:100%;object-fit:cover}
.svcb h2{max-width:16ch}
.svcb p{color:var(--ink-2);max-width:54ch;margin-top:20px}
.steel .svcb p{color:var(--mist)}
@media(min-width:900px){
  .svcb{grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px)}
  .svcb--flip .svcb__fig{order:2}
}

/* Lean text-only service, used once at the end of Services */
.lean{display:grid;gap:clamp(24px,3vw,48px)}
.lean p{color:var(--ink-2);max-width:56ch}
@media(min-width:900px){.lean{grid-template-columns:5fr 7fr}}

/* OEM logo grid */
.oem{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:clamp(36px,4vw,56px);background:var(--line);border:1px solid var(--line)}
@media(min-width:620px){.oem{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1000px){.oem{grid-template-columns:repeat(6,1fr)}}
.oem span{background:var(--white);display:grid;place-items:center;padding:26px 12px;font-weight:700;font-size:clamp(14px,1.3vw,18px);letter-spacing:.04em;text-transform:uppercase;color:#8d9189;transition:color .25s,background .25s}
.oem span:hover{color:var(--ink);background:var(--paper)}

/* Project card grid */
.projgrid{display:grid;gap:clamp(20px,2.4vw,32px);margin-top:clamp(36px,4vw,56px)}
@media(min-width:720px){.projgrid{grid-template-columns:repeat(3,1fr)}}
.projgrid .proj{flex:none}

/* Values / promise columns */
.cols{display:grid;gap:0;margin-top:clamp(36px,4vw,60px);border-top:1px solid var(--ink)}
.col{padding:28px 0;border-bottom:1px solid var(--line)}
.col h3{margin-bottom:12px;display:flex;align-items:center;gap:13px}
.col h3::before{content:"";width:14px;height:15px;flex:none;background:var(--lime);-webkit-mask:var(--mark) no-repeat center/contain;mask:var(--mark) no-repeat center/contain}
.col p{color:var(--ink-2);font-size:15.5px;max-width:42ch}
@media(min-width:800px){
  .cols{grid-template-columns:repeat(3,1fr);column-gap:clamp(24px,3vw,48px)}
  .col{border-bottom:0;padding:32px 0 0}
}

/* Credentials strip */
.creds{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink-2)}

/* Contact form */
.contact{display:grid;gap:clamp(36px,5vw,72px)}
@media(min-width:900px){.contact{grid-template-columns:7fr 5fr}}
.field{display:grid;gap:8px;margin-bottom:20px}
.field label{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--ink)}
.field label i{font-style:normal;color:var(--lime-deep)}
.field input,.field select,.field textarea{font:400 16px/1.5 var(--display);color:var(--ink);background:var(--white);border:1px solid var(--ink-2);padding:13px 14px;width:100%;border-radius:0}
.field textarea{min-height:132px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#767a7f}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.field .hint{font-size:13px;color:var(--ink-2)}
.field.row2{display:grid}
@media(min-width:620px){.pair{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}}
.form__note{font-size:13px;color:var(--ink-2);margin-top:16px;max-width:46ch}
.form__ok{display:none;margin-top:20px;padding:16px 18px;background:var(--white);border-left:3px solid var(--lime);font-weight:600;font-size:15.5px}
.form__ok.is-on{display:block}
.err{color:#9c3d2a;font-size:13px;font-weight:600}
.details{display:grid;gap:10px;align-content:start}
.details h3{margin-bottom:6px}
.details .ph{display:inline-block;justify-self:start}
.details__fig{margin:22px 0 0;aspect-ratio:4/3;clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%)}
.details__fig img{width:100%;height:100%;object-fit:cover}

/* 404 */
.nf{min-height:62svh;display:grid;align-content:center}
.nf h1{font-size:clamp(36px,5.4vw,76px);max-width:16ch}
.nf p{margin-top:24px;color:var(--mist);max-width:46ch;font-size:clamp(17px,1.35vw,20px)}
.nf .hero__cta{margin-top:36px}

.field [aria-invalid]{border-color:#9c3d2a;border-width:1.5px}

/* Two-part headline, light second clause, in whichever band it sits */
.on-paper h2 em{font-style:normal;font-weight:300;color:var(--ink-2)}
.steel h2 em{font-style:normal;font-weight:300;color:var(--mist)}
/* A plain statement block: headline, then one measure of text under it */
.stack{display:grid;gap:22px;max-width:68ch;margin-top:clamp(32px,4vw,56px)}

/* a grid section would otherwise shrink-wrap the wrapper instead of filling it */
.nf > .wrap{width:100%}

/* ===== Homepage v2: let the photograph carry the page =====
   The header becomes its own charcoal band instead of an overlay, so the picture is
   never dimmed for the sake of the navigation. The only brightness change on the image
   is a gradient at its foot, which reaches full strength at the very bottom edge and
   leaves the installers in clear air. Type is set smaller and lighter, below the work. */
.nav--onband{background:var(--steel-900);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:var(--steel-line)}
.hero--v2{margin-top:62px;min-height:min(740px,82svh)}
.hero--v2 .hero__img{object-position:56% 38%;animation:none}
/* A diagonal, so the weight falls in the bottom-left corner where the type is and lifts
   away towards the top right, which is where the installers and the ladder are. */
.hero--v2::after{background:
  linear-gradient(to top right,rgba(28,29,31,.94) 0%,rgba(28,29,31,.82) 24%,rgba(28,29,31,.46) 44%,rgba(28,29,31,.14) 64%,rgba(28,29,31,0) 80%),
  linear-gradient(180deg,rgba(28,29,31,0) 0%,rgba(28,29,31,.04) 38%,rgba(28,29,31,.28) 66%,rgba(28,29,31,.76) 90%,rgba(28,29,31,.9) 100%)}
.hero--v2 .hero__in{padding-block:clamp(180px,26vw,300px) clamp(40px,5vw,66px)}
.hero--v2 h1{font-size:clamp(29px,4vw,54px);font-weight:500;letter-spacing:-.02em;line-height:1.12;max-width:21ch;margin-top:0;text-shadow:0 1px 2px rgba(28,29,31,.5),0 2px 34px rgba(28,29,31,.55)}
.hero--v2 h1 em{font-weight:300;display:block}
.hero--v2 .lede{font-size:clamp(16px,1.15vw,18px);max-width:48ch;margin-top:18px;color:#eceee9;text-shadow:0 1px 2px rgba(28,29,31,.5),0 2px 26px rgba(28,29,31,.55)}
.hero--v2 .hero__cta{margin-top:30px}
@media(max-width:620px){
  .hero--v2{min-height:min(640px,78svh)}
  .hero--v2 .hero__img{object-position:62% 34%}
  .hero--v2::after{background:linear-gradient(180deg,rgba(28,29,31,0) 0%,rgba(28,29,31,.1) 30%,rgba(28,29,31,.58) 56%,rgba(28,29,31,.9) 82%,rgba(28,29,31,.96) 100%)}
}

/* Real contact details, written as links that still show the number and address in full */
.foot__cols a[href^="tel"],.foot__cols a[href^="mailto"]{text-decoration:none}
.final__act small a{color:var(--white);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px}
.final__act small a:hover{background-size:0 1px;background-position:100% 100%}
.intro__reach a{text-decoration:none;color:var(--ink);background:linear-gradient(var(--lime),var(--lime)) 0 100%/100% 2px no-repeat;padding-bottom:3px}
.intro__reach a:hover{background-size:100% 100%;background-position:0 100%}
.details a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--lime);padding-bottom:1px}

/* Client logo wall. Text wordmarks until real logo files land in img/logos/;
   swap a brand's text for <img src="img/logos/<slug>.svg" alt="Brand"> and it styles itself. */
.marks li img{height:clamp(20px,2.2vw,30px);width:auto;display:block;
  filter:grayscale(1) opacity(.55);transition:filter .25s var(--ease-entrance)}
.marks li:hover img{filter:grayscale(0) opacity(1)}

/* Commercial signage: a quiet white band. Secondary to the dealership story by design,
   so it is short, light, and sits between the stakes and the close. */
.commercial{background:var(--white);padding-block:clamp(56px,7vw,96px)}
.commercial__in{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
.commercial h2{font-size:clamp(26px,3vw,40px);max-width:15ch}
.commercial p{margin-top:20px;color:var(--ink-2);max-width:48ch}
.commercial .link{margin-top:18px}
.commercial__row{display:grid;gap:clamp(12px,1.4vw,20px);grid-auto-flow:column;
  grid-auto-columns:minmax(190px,1fr);overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;padding-bottom:2px}
.commercial__row::-webkit-scrollbar{display:none}
.commercial__row figure{scroll-snap-align:start}
.commercial__row figure{margin:0;aspect-ratio:4/3;background:var(--paper-2);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.commercial__row img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-entrance)}
.commercial__row figure:hover img{transform:scale(1.03)}
@media(min-width:900px){.commercial__in{grid-template-columns:5fr 7fr;gap:clamp(40px,5vw,80px)}}
@media(max-width:620px){.commercial__row figure:only-child{aspect-ratio:16/10}}

/* Replaces the counted stat tiles: one checkable line rather than figures nobody can stand behind. */
.auth__line{margin-top:clamp(32px,4vw,48px);padding-top:24px;border-top:1px solid var(--ink);
  font-size:clamp(16px,1.3vw,19px);font-weight:500;color:var(--ink)}

/* Spam trap: present for a bot reading the markup, gone for everyone else. */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* The failure counterpart to .form__ok */
.form__bad{display:none;margin-top:20px;padding:16px 18px;background:var(--white);
  border-left:3px solid #9c3d2a;font-weight:600;font-size:15.5px}
.form__bad.is-on{display:block}
.form__bad a{color:inherit}

/* ===== Heroes on a phone =====
   A narrow crop leaves no clear air to set type in: the headline and the eyebrow land
   on whatever the picture happens to be showing, which on these jobs is usually a lit
   OEM sign in white or red. So on small screens the scrim starts its climb where the
   text starts rather than halfway down the frame, and every line carries a tight
   shadow as well. The top of the picture stays open, which is where the sign reads. */
@media(max-width:620px){
  .hero--sub::after,.hero--v2::after{
    background:
      linear-gradient(90deg,rgba(28,29,31,.5) 0%,rgba(28,29,31,.4) 50%,rgba(28,29,31,.26) 100%),
      linear-gradient(180deg,
      rgba(28,29,31,0) 0%,
      rgba(28,29,31,.12) 13%,
      rgba(28,29,31,.5) 29%,
      rgba(28,29,31,.74) 52%,
      rgba(28,29,31,.9) 78%,
      rgba(28,29,31,.95) 100%)}
  .hero--sub .eyebrow,.hero--v2 .eyebrow{
    text-shadow:0 1px 3px rgba(28,29,31,.95),0 0 14px rgba(28,29,31,.9),0 0 30px rgba(28,29,31,.7)}
  .hero--sub h1,.hero--v2 h1{
    font-size:28px;line-height:1.14;max-width:none;
    text-shadow:0 1px 2px rgba(28,29,31,.8),0 2px 26px rgba(28,29,31,.7)}
  .hero--sub .lede,.hero--v2 .lede{
    font-size:15.5px;margin-top:16px;
    text-shadow:0 1px 2px rgba(28,29,31,.75),0 2px 20px rgba(28,29,31,.6)}
  .hero--sub .hero__in,.hero--v2 .hero__in{padding-block:118px 40px}
  .hero__cta{gap:12px 20px;margin-top:28px}
}
/* About's hero puts a lit Toyota sign exactly where the headline lands on a phone.
   Dropping the crop lifts the sign into the open band above the type. */
@media(max-width:620px){
  .hero--sub .hero__img[src$="toyota-dusk.jpg"]{object-position:46% 68%}
}
/* VOLKSWAGEN set in uppercase does not fit a third of a 320px screen. */
@media(max-width:420px){
  .oem{grid-template-columns:repeat(2,minmax(0,1fr))}
  .oem span{padding:22px 8px;font-size:13px;letter-spacing:.03em}
}

/* Credit line under a hero, for a photograph whose site is worth naming. */
.hero__credit{margin-top:clamp(24px,3vw,38px);font:400 11.5px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.52)}

/* ===== Projects on a desktop =====
   The sideways rail works with a thumb and badly with a mouse: people simply do not
   see the cards past the right-hand edge. From 900px up the same markup lays out as a
   grid, every project visible at once, and the arrows disappear with the scrolling. */
@media(min-width:900px){
  .work__ctl{display:none}
  .rail{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px);
    overflow:visible;scroll-snap-type:none;padding-bottom:0;
    padding-right:max(20px,calc((100vw - var(--wrap))/2 + 48px))}
  .rail .proj{flex:none}
  .rail .proj__img{aspect-ratio:4/3}
}

/* ===== Commercial teaser =====
   The three photographs were sharing the band with the copy, which left them too small
   to read. The copy now sits above them and the row has the full width to itself. */
@media(min-width:900px){
  .commercial__in{grid-template-columns:1fr;gap:clamp(32px,4vw,52px);align-items:start}
  .commercial__in > :first-child{max-width:64ch}
  .commercial p{max-width:62ch}
}
@media(min-width:700px){
  .commercial__row{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);
    overflow:visible;scroll-snap-type:none;gap:clamp(16px,1.8vw,26px)}
  .commercial__row figure{aspect-ratio:4/3}
}
/* With the arrows gone the heading has the row to itself and reads better on two lines. */
@media(min-width:900px){.work__head h2{max-width:24ch}}
/* Photo credit under a body paragraph, the dark-on-paper twin of .hero__credit. */
.credit{margin-top:20px;font:400 11.5px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:#8d9189}

/* Some photographs are pale right across the frame, with no dark quarter anywhere for the
   type to sit in. The Lexus mark on its timber wall is one. Those heroes get a deeper,
   wider scrim on the left so white type has something to sit on. */
.hero--deep::after{background:
  linear-gradient(90deg,rgba(28,29,31,.84) 0%,rgba(28,29,31,.76) 30%,rgba(28,29,31,.54) 56%,rgba(28,29,31,.22) 78%,rgba(28,29,31,0) 96%),
  linear-gradient(180deg,rgba(28,29,31,0) 0%,rgba(28,29,31,.14) 28%,rgba(28,29,31,.5) 56%,rgba(28,29,31,.86) 86%,rgba(28,29,31,.95) 100%)}

/* =====================================================================================
   NOVEMBER 2026 POLISH PASS
   Same system, turned up: larger display type, a moving client strip, photographs that
   settle into their plates, a project gallery you can filter and open, and the small
   things a careful site has (skip link, selection colour, a phone contact dock).
   ===================================================================================== */
.skip{position:fixed;left:16px;top:-90px;z-index:100;background:var(--lime);color:var(--steel-900);padding:13px 18px;font-weight:600;font-size:15px;text-decoration:none;transition:top .2s var(--ease)}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}
::selection{background:var(--lime);color:var(--steel-900)}
main{display:block}

/* Display type: the bands are generous, so the headings can carry more weight on a desktop. */
@media(min-width:1100px){
  h2{font-size:clamp(44px,4.5vw,70px);letter-spacing:-.034em;line-height:1.01}
  .commercial h2{font-size:clamp(34px,3.4vw,50px)}
  .final h2{font-size:clamp(64px,7.2vw,112px);letter-spacing:-.04em;line-height:.98}
}

/* Navigation: an underline that draws on hover, and a reading-progress rule where the browser supports it. */
.nav__links a{position:relative}
.nav__links a:not(.is-here)::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav__links a:not(.is-here):hover::after{transform:scaleX(1)}
@supports (animation-timeline: scroll()){
  @media(prefers-reduced-motion:no-preference){
    .nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--lime);transform-origin:left;scale:0 1;animation:prog linear both;animation-timeline:scroll(root)}
    @keyframes prog{to{scale:1 1}}
  }
}

/* Hero: the photograph eases in a touch large, then drifts as the page scrolls away. */
@media(prefers-reduced-motion:no-preference){
  .hero--v2 .hero__img,.hero--sub .hero__img{animation:heroin 1.8s var(--ease) both}
  @keyframes heroin{from{scale:1.08}to{scale:1}}
  @supports (animation-timeline: scroll()){
    .hero--v2 .hero__img,.hero--sub .hero__img{animation:heroin 1.8s var(--ease) both,drift linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100vh}
    @keyframes drift{to{translate:0 9%}}
  }
}

/* Client strip: one slow line of names. It pauses under the pointer and sits still for anyone who asks. */
.mq{display:flex;overflow:hidden;margin-top:clamp(24px,3vw,40px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq__track{--g:clamp(30px,4vw,64px);flex:none;display:flex;align-items:center;gap:var(--g);margin:0;padding:0 var(--g) 0 0;list-style:none;animation:mq 52s linear infinite}
.mq:hover .mq__track{animation-play-state:paused}
.mq li{display:flex;align-items:center;gap:var(--g);white-space:nowrap;font-weight:600;font-size:clamp(28px,4vw,60px);letter-spacing:-.03em;line-height:1.15;color:var(--ink)}
.mq li:nth-child(even){color:transparent;-webkit-text-stroke:1.2px #7d8179}
.mq li::after{content:"";flex:none;width:.4em;height:.44em;background:var(--lime);-webkit-mask:var(--mark) no-repeat center/contain;mask:var(--mark) no-repeat center/contain}
.mq li img{height:.9em;width:auto}
@keyframes mq{to{transform:translateX(-100%)}}
.auth .auth__line{margin-top:clamp(28px,3.4vw,44px)}
@media(prefers-reduced-motion:reduce){
  .mq{-webkit-mask-image:none;mask-image:none;padding-inline:20px}
  .mq__track{animation:none;flex-wrap:wrap;flex:1;row-gap:10px}
  .mq__track[aria-hidden]{display:none}
  .mq li{font-size:clamp(20px,2.4vw,30px)}
}

/* Photographs settle into their plates as they arrive. */
.alt__fig,.svcb__fig,.guide__plate,.details__fig,.commercial__row figure,.svc__plate{overflow:hidden}
.alt__fig img,.svcb__fig img,.guide__plate img,.details__fig img{transition:transform 1.5s var(--ease)}
@media(prefers-reduced-motion:no-preference){
  .js .rv:not(.in) .alt__fig img,.js .rv:not(.in) .svcb__fig img,.js .rv:not(.in) .guide__plate img,.js .rv:not(.in) .details__fig img,
  .js .alt__fig.rv:not(.in) img,.js .svcb__fig.rv:not(.in) img{transform:scale(1.14)}
}

/* Project cards open. The lime plate in the corner is the invitation. */
button.proj__img{display:block;width:100%;padding:0;border:0;margin:0;font:inherit;color:inherit;cursor:zoom-in;position:relative;text-align:left}
button.proj__img img{display:block}
button.proj__img::after{content:"";position:absolute;right:0;bottom:0;width:54px;height:54px;
  background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%231c1d1f' stroke-width='1.8'%3E%3Cpath d='M10.5 2H16v5.5M7.5 16H2v-5.5M16 2l-5.5 5.5M2 16l5.5-5.5'/%3E%3C/svg%3E") center/18px no-repeat;
  clip-path:polygon(14px 0,100% 0,100% 100%,0 100%,0 14px);transform:translate(101%,101%);transition:transform .4s var(--ease)}
.proj:hover button.proj__img::after,button.proj__img:focus-visible::after{transform:none}
button.proj__img:focus-visible{outline-offset:-2px}
@media(hover:none){button.proj__img::after{transform:none;width:42px;height:42px;background-size:15px}}
.proj figcaption b{transition:color .25s}
.proj:hover figcaption b{color:var(--lime)}

/* Dealership gallery: filter chips, two wide plates in the full set, even rows. */
.gal__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 40px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:46px;padding:0 20px;font:600 14px/1 var(--display);letter-spacing:.01em;background:none;color:var(--white);border:1px solid var(--steel-line);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.chip:hover{border-color:var(--mist)}
.chip.is-on{background:var(--lime);border-color:var(--lime);color:var(--steel-900)}
.chip:active{transform:translateY(1px)}
.gal{--g:clamp(20px,2.4vw,32px);container-type:inline-size;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-flow:dense;gap:clamp(32px,3.4vw,48px) var(--g);margin-top:clamp(36px,4vw,56px)}
.gal .proj{flex:none;min-width:0}
.gal .proj__img{aspect-ratio:4/3}
@media(min-width:620px){
  .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gal .proj__img{aspect-ratio:auto;height:calc((100cqw - var(--g)) / 2 * .7)}
  .gal:not(.is-filtered) .proj--wide{grid-column:span 2}
}
@media(min-width:1000px){
  .gal{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gal .proj__img{height:calc((100cqw - 2 * var(--g)) / 3 * .7)}
}
.gal__count{margin-top:28px;font:400 12.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#9da19a}
::view-transition-group(*){animation-duration:.45s;animation-timing-function:cubic-bezier(.16,1,.3,1)}

/* Lightbox */
.lb{border:0;padding:0;margin:0;background:transparent;color:var(--white);width:100vw;height:100dvh;max-width:none;max-height:none;overflow:hidden}
.lb::backdrop{background:rgba(20,21,23,.96)}
.lb__in{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:18px;height:100%;padding:clamp(16px,3vw,44px);padding-top:calc(clamp(16px,3vw,44px) + env(safe-area-inset-top,0px))}
.lb__img{min-height:0;display:grid;place-items:center;cursor:zoom-out}
.lb__img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;animation:lbin .45s var(--ease)}
@keyframes lbin{from{opacity:0;transform:scale(.985)}}
.lb__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px}
.lb__cap{margin:0;max-width:70ch}
.lb__cap b{display:block;font-weight:600;font-size:clamp(17px,1.5vw,21px)}
.lb__cap span{display:block;margin-top:4px;color:var(--mist);font-size:14.5px;line-height:1.5}
.lb__ctl{display:flex;gap:8px}
@media(prefers-reduced-motion:reduce){.lb__img img{animation:none}}

/* OEM grid: the thirteenth brand left five dead cells. The closing cell says something instead. */
.oem .oem__more{grid-column:span 1;background:var(--lime);color:var(--steel-900);text-transform:none;letter-spacing:0;font-weight:600;font-size:14.5px;line-height:1.4;justify-items:start;text-align:left;padding-inline:clamp(14px,1.6vw,24px)}
.oem .oem__more:hover{background:var(--lime);color:var(--steel-900)}
@media(min-width:421px){.oem .oem__more{grid-column:span 2;font-size:15.5px}}
@media(min-width:620px){.oem .oem__more{grid-column:span 3}}
@media(min-width:1000px){.oem .oem__more{grid-column:span 5;font-size:17px}}

/* Questions */
.faq__in{display:grid;gap:clamp(32px,4vw,56px)}
.faq h2{max-width:13ch}
@media(min-width:1000px){.faq__in{grid-template-columns:5fr 7fr;align-items:start}.faq h2{position:sticky;top:112px}}
.qa{border-top:1px solid var(--ink)}
.qa:last-child{border-bottom:1px solid var(--ink)}
.steel .qa,.steel .qa:last-child{border-color:var(--steel-line)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;min-height:44px}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{font-size:clamp(18px,1.5vw,22px);transition:color .2s}
.qa summary i{flex:none;position:relative;width:40px;height:40px;border:1px solid var(--line);transition:background .25s var(--ease),border-color .25s var(--ease)}
.steel .qa summary i{border-color:var(--steel-line)}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:currentColor;transition:transform .35s var(--ease)}
.qa summary i::after{transform:rotate(90deg)}
.qa[open] summary i{background:var(--lime);border-color:var(--lime);color:var(--steel-900)}
.qa[open] summary i::after{transform:rotate(0)}
.qa summary:hover i{border-color:currentColor}
.qa__a{padding:0 64px 26px 0;max-width:64ch;color:var(--ink-2)}
.steel .qa__a{color:var(--mist)}
@media(prefers-reduced-motion:no-preference){.qa[open] .qa__a{animation:rise .45s var(--ease)}}

/* Where we work */
.where__in{display:grid;gap:clamp(28px,4vw,56px)}
@media(min-width:900px){.where__in{grid-template-columns:5fr 7fr;align-items:start}}
.places{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.places li{display:flex;align-items:center;gap:10px;padding:11px 16px;border:1px solid var(--line);background:var(--white);font:500 12.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.places li::before{content:"";width:10px;height:11px;background:var(--lime-deep);-webkit-mask:var(--mark) no-repeat center/contain;mask:var(--mark) no-repeat center/contain}

/* Phone contact dock: the two things a dealer principal on a forecourt wants, always in reach. */
.dock{display:none}
@media(max-width:899px){
  .dock{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:1fr 1fr;background:var(--steel-900);border-top:1px solid var(--steel-line);padding-bottom:env(safe-area-inset-bottom,0px);transform:translateY(110%);transition:transform .4s var(--ease)}
  .dock.is-on{transform:none}
  .dock a{display:grid;place-items:center;min-height:54px;font-weight:600;font-size:14.5px;color:var(--white);text-decoration:none}
  .dock .dock__go{background:var(--lime);color:var(--steel-900)}
  .foot{padding-bottom:calc(36px + 58px + env(safe-area-inset-bottom,0px))}
}
/* The lightbox photograph is sized to its cell, not to itself, so a tall picture can never
   run over the caption and the controls beneath it. */
.lb__img{position:relative}
.lb__img img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}

/* ===== Client logos =====
   The client's own vectors, set in ink at a shared visual weight: --k scales each mark so a long
   wordmark (Volvo) and a stacked one (Halfway) carry the same presence. Held back to 72% so the
   row reads as a credential, and brought to full ink under the pointer. */
.mq__track--logos{--g:clamp(44px,5.4vw,88px);gap:var(--g);padding-right:var(--g)}
.mq__track--logos li{gap:0;height:clamp(64px,7vw,96px)}
.mq__track--logos li::after{content:none}
.mq__track--logos li img,.marks--logos li img{display:block;width:auto;max-width:none;
  height:calc(var(--k,1) * clamp(30px,3.1vw,44px));opacity:.74;filter:none;transition:opacity .3s var(--ease)}
.mq__track--logos li:hover img,.marks--logos li:hover img{opacity:1}
.marks--logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;align-items:stretch;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.marks--logos li{display:grid;place-items:center;min-height:clamp(112px,11vw,150px);padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white);font-size:0}
.marks--logos li img{height:calc(var(--k,1) * clamp(24px,2.6vw,36px));max-width:100%}
@media(min-width:620px){.marks--logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1000px){.marks--logos{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Thirteen marks: the closing cell carries the line rather than leaving dead squares. */
.marks--logos li.marks__note{font-size:15px;font-weight:600;line-height:1.4;place-items:center start;text-align:left;background:var(--lime);color:var(--steel-900);padding:20px clamp(20px,2vw,28px)}
@media(prefers-reduced-motion:reduce){
  .mq__track--logos{flex-wrap:wrap;justify-content:flex-start;row-gap:8px}
  .mq__track--logos li img{height:calc(var(--k,1) * 28px)}
}
@media(min-width:620px){.marks--logos li.marks__note{grid-column:span 2}}
@media(min-width:1000px){.marks--logos li.marks__note{grid-column:span 3}}
.marks--logos li.marks__note{text-transform:none;letter-spacing:0;font-size:clamp(15px,1.3vw,18px)}

/* ===== Brand roll call (Dealerships) =====
   The thirteen brands set as one typeset block rather than a table of grey cells: display weight,
   alternating solid and outlined, joined by the mark. It reads as a statement, which is the point
   of the section, and it ends where the last name ends, so there is no grid to leave half-filled. */
.roll{list-style:none;margin:clamp(44px,5vw,72px) 0 0;padding:clamp(30px,3.4vw,48px) 0 0;border-top:1px solid var(--steel-line);
  display:flex;flex-wrap:wrap;align-items:center;gap:.16em .42em;font-weight:600;font-size:clamp(30px,4.7vw,72px);letter-spacing:-.035em;line-height:1.1}
.roll li{display:flex;align-items:center;gap:.42em;color:var(--white);transition:color .3s var(--ease),-webkit-text-stroke-color .3s var(--ease)}
.roll li:nth-child(even){color:transparent;-webkit-text-stroke:1.3px var(--mist)}
.roll li:nth-child(even):hover{color:var(--white);-webkit-text-stroke-color:transparent}
.roll li:not(:last-child)::after{content:"";flex:none;width:.32em;height:.35em;background:var(--lime);-webkit-mask:var(--mark) no-repeat center/contain;mask:var(--mark) no-repeat center/contain}
.roll__note{margin-top:clamp(32px,3.6vw,52px);display:flex;align-items:center;gap:14px;font-weight:600;font-size:clamp(17px,1.4vw,21px);color:var(--white)}
.roll__note::before{content:"";flex:none;width:16px;height:17px;background:var(--lime);-webkit-mask:var(--mark) no-repeat center/contain;mask:var(--mark) no-repeat center/contain}
/* The alternation does the separating: no marks to dangle at a line end, and balanced lines so no
   brand is left on its own at the bottom. */
.roll{display:block;text-wrap:balance;max-width:20ch;line-height:1.08}
.roll li{display:inline;margin-right:.32em}
.roll li:not(:last-child)::after{content:none}
@media(min-width:900px){.roll{max-width:none}}
.roll li{margin-right:.1em}
.roll__note{align-items:flex-start}
.roll__note::before{margin-top:.3em}

/* Featured-only note under the gallery heading */
.gal__sub{margin-top:16px;color:var(--mist);max-width:46ch}

/* ===== Commercial: what we install =====
   Grouped, not gridded. Three plain groups of four on the paper ground, the heading held beside
   them on a wide screen. One rule per group, never one per line. */
.kit__in{display:grid;gap:clamp(36px,5vw,64px)}
.kit__head .lede{margin-top:24px;color:var(--ink-2);max-width:46ch}
@media(min-width:1000px){.kit__in{grid-template-columns:5fr 7fr;align-items:start}.kit__head{position:sticky;top:112px}}
.kit__grp{display:grid;gap:14px 32px;padding-block:clamp(22px,2.6vw,34px);border-top:1px solid var(--ink)}
.kit__grp:last-child{border-bottom:1px solid var(--ink)}
@media(min-width:620px){.kit__grp{grid-template-columns:minmax(140px,1fr) 2.3fr}}
.kit__grp h3{font:500 12px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding-top:.55em}
.kit__grp ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.kit__grp li{display:flex;align-items:center;gap:14px;font-size:clamp(20px,1.9vw,27px);font-weight:500;letter-spacing:-.018em;line-height:1.2}
.kit__grp li::before{content:"";flex:none;width:12px;height:13px;background:var(--lime-deep);-webkit-mask:var(--mark) no-repeat center/contain;mask:var(--mark) no-repeat center/contain}
/* The kit follows another paper band, so it takes the tinted ground to read as its own section. */
.kit{background:var(--paper-2)}
.kit__grp li{font-size:clamp(19px,1.65vw,24px)}
@media(min-width:620px){.kit__grp{grid-template-columns:minmax(120px,.8fr) 2.4fr}}

/* Opening hours: a small two-column list, days left, times right in tabular figures. */
.hours{margin:22px 0 0;display:grid;gap:8px;border-top:1px solid var(--line);padding-top:18px}
.hours div{display:flex;justify-content:space-between;gap:20px}
.hours dt{color:var(--ink-2)}
.hours dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.field .opt{font-weight:400;color:var(--ink-2)}

/* Montserrat throughout. Project scope lines were set in a mono face; they now use the brand
   face at a readable size, a step quieter than the body. */
.proj figcaption small{font:400 14px/1.55 var(--display);color:#a7aba3}
.on-paper .proj figcaption small{color:var(--ink-2)}
.lb__cap span{font-family:var(--display)}

/* ===== Vehicle brands (Dealerships), third pass =====
   Plain and even: the thirteen names in brand-face text, all solid, flowing down balanced columns
   under one rule. No display sizes, no outlines, no boxes. The list supports the heading; it does
   not try to be the heading. */
.brands{list-style:none;margin:clamp(40px,4.6vw,64px) 0 0;padding:clamp(24px,2.6vw,34px) 0 0;border-top:1px solid var(--steel-line);
  columns:2;column-gap:clamp(24px,3vw,48px)}
@media(min-width:700px){.brands{columns:3}}
@media(min-width:1000px){.brands{columns:4}}
.brands li{break-inside:avoid;display:flex;align-items:center;gap:12px;padding:9px 0;font-size:clamp(17px,1.5vw,21px);font-weight:500;letter-spacing:-.01em;color:var(--white)}
.brands li::before{content:"";flex:none;width:11px;height:12px;background:var(--lime);-webkit-mask:var(--mark) no-repeat center/contain;mask:var(--mark) no-repeat center/contain}
.brands + .roll__note{margin-top:clamp(28px,3vw,40px);padding-top:clamp(22px,2.4vw,30px);border-top:1px solid var(--steel-line);font-weight:500;color:var(--mist)}
/* Thirteen names: three columns land 5, 4, 4. Four left Volvo alone in the last column. */
@media(min-width:1000px){.brands{columns:3;max-width:900px}}
/* On a wide screen the list sits beside the heading in two columns (7 and 6), so it fills the
   right of the band instead of trailing off under the copy. The note runs across beneath both. */
.std{display:grid;gap:0}
@media(min-width:1000px){
  .std{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(48px,6vw,96px);align-items:start}
  .std .brands{columns:2;max-width:none;margin-top:0;padding-top:clamp(24px,2.6vw,34px)}
  .std .roll__note{grid-column:1 / -1}
}
@media(min-width:1000px){.std .brands{border-top:0;padding-top:6px}}
/* <picture> wraps every photograph for AVIF and WebP. It takes no box of its own, so every rule
   written for the <img> (object-fit, absolute heroes, plate sizing) still applies unchanged. */
picture{display:contents}

/* Heading order: footer labels and the contact details title are h2s now, styled as before. */
.foot__h{margin:0 0 16px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--white);line-height:1.4}
.details__h{margin:0 0 6px;font-size:clamp(19px,1.6vw,23px);font-weight:600;letter-spacing:-.01em;line-height:1.25}

/* Touch targets: every link a thumb might aim for is at least 44px tall, without moving anything. */
.logo{display:inline-flex;align-items:center;min-height:44px;margin-block:-9px;padding-block:9px}
.foot .logo{margin-block:0}
.intro__reach a{display:inline-flex;align-items:center;min-height:44px}
.hero__credit,.credit{font-size:12.5px}