/* ============================================================
   Overflow Group
   Brand sampled from the Overflow Roofing mark: cyan #30a8e4, navy #0d1a72
   ============================================================ */

@font-face{
  font-family:"Manrope";font-style:normal;font-weight:300 800;font-display:swap;
  src:url("../fonts/manrope-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;
}
@font-face{
  font-family:"Manrope";font-style:normal;font-weight:300 800;font-display:swap;
  src:url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --cyan:#30a8e4;
  --cyan-lt:#7dd0f8;
  --cyan-dk:#1786c2;
  --navy:#12235e;

  --bg:#101a29;
  --bg-2:#16212f;
  --panel:#1d2a3b;
  --panel-2:#243347;
  --line:#2e3f56;
  --line-2:#3d5270;

  --tx:#f0f5fa;
  --tx-2:#bccadb;
  --tx-3:#8fa1b6;

  --r:16px;
  --r-lg:24px;
  --r-xl:30px;
  --wrap:1220px;
  --ease:cubic-bezier(.22,.68,.35,1);
  --shadow:0 26px 60px -30px rgba(0,0,0,.7);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}

body{
  margin:0;background:var(--bg);color:var(--tx);
  font:400 16.5px/1.68 "Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.026em;line-height:1.12}
h2{font-size:clamp(29px,3.7vw,45px)}
h3{font-size:20px;letter-spacing:-.014em;line-height:1.28}
p{margin:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 26px}
.ic{width:1em;height:1em;flex:0 0 auto;fill:none}
svg.ic{display:block}
.car-flip{transform:scaleX(-1)}

.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--cyan);
  color:#00121e;padding:12px 20px;border-radius:0 0 10px 0;font-weight:700}
.skip-link:focus{left:0}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px}

/* ── buttons ─────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:700 15px/1 "Manrope",sans-serif;letter-spacing:-.008em;
  padding:15px 27px;border-radius:100px;border:1px solid transparent;cursor:pointer;
  transition:transform .24s var(--ease),box-shadow .24s,background .24s,border-color .24s;
  white-space:nowrap}
.btn .ic{font-size:17px}
.btn-c{background:linear-gradient(135deg,var(--cyan),var(--cyan-dk));color:#00131f;
  box-shadow:0 12px 30px -12px rgba(48,168,228,.6)}
.btn-c:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(48,168,228,.78)}
.btn-o{border-color:var(--line-2);color:var(--tx);background:rgba(255,255,255,.05)}
.btn-o:hover{border-color:var(--cyan);color:var(--cyan-lt);transform:translateY(-2px)}
.btn-lg{padding:17px 32px;font-size:16px}
.btn-sm{padding:11px 21px;font-size:14px}
.btn-full{width:100%}

/* ── logo ────────────────────────────────────────────── */
.logo{display:inline-flex;align-items:center;gap:11px}
.logo-mark{width:38px;height:35px;color:#fff;flex:0 0 auto}
.logo-type{display:flex;flex-direction:column;line-height:1}
.logo-type b{font-size:19px;font-weight:800;letter-spacing:.055em;color:var(--cyan)}
.logo-type i{font-size:11.5px;font-weight:600;letter-spacing:.38em;color:var(--tx-2);
  font-style:normal;margin-top:3px}

.soc{display:flex;gap:8px}
.soc a{display:grid;place-items:center;width:31px;height:31px;border-radius:9px;
  color:var(--tx-2);border:1px solid var(--line);transition:.22s var(--ease)}
.soc a:hover{color:var(--cyan);border-color:var(--cyan);
  background:rgba(48,168,228,.12);transform:translateY(-2px)}
.soc .ic{font-size:16px}
.soc-lg{margin-top:30px}
.soc-lg a{width:46px;height:46px;border-radius:13px}
.soc-lg .ic{font-size:21px}

/* ── header ──────────────────────────────────────────── */
.head{position:sticky;top:0;z-index:900;background:rgba(16,26,41,.86);
  backdrop-filter:blur(14px) saturate(150%);border-bottom:1px solid var(--line);
  transition:box-shadow .3s,background .3s}
.head.stuck{background:rgba(16,26,41,.96);box-shadow:0 12px 34px -20px rgba(0,0,0,.8)}
.head-in{display:flex;align-items:center;gap:26px;min-height:76px}
.nav{display:flex;gap:27px;margin-left:auto}
.nav a{position:relative;font-size:14.8px;font-weight:600;color:var(--tx-2);
  padding:5px 0;transition:color .2s}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--cyan);border-radius:2px;transition:right .3s var(--ease)}
.nav a:hover{color:var(--tx)}
.nav a:hover::after{right:0}
.head-r{display:flex;align-items:center;gap:20px}
.head-ph{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;
  color:var(--tx);white-space:nowrap;transition:color .2s}
.head-ph .ic{font-size:16px;color:var(--cyan)}
.head-ph:hover{color:var(--cyan-lt)}
.burger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;
  align-items:center;justify-content:center;background:none;
  border:1px solid var(--line-2);border-radius:12px;cursor:pointer}
.burger span{display:block;width:18px;height:2px;background:var(--tx);border-radius:2px;
  transition:.25s var(--ease)}
.head.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.head.open .burger span:nth-child(2){opacity:0}
.head.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── hero: full bleed photo with a trust bar footing it ─ */
.hero{position:relative;isolation:isolate;overflow:hidden;
  min-height:min(86vh,780px);display:flex;flex-direction:column;justify-content:flex-end}
.hero-bg,.hero-bg img{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.hero-bg img{object-fit:cover;object-position:50% 42%;
  animation:heroIn 1.5s var(--ease) both}
.hero-scrim{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(96deg,rgba(9,15,25,.93) 0%,rgba(9,15,25,.8) 40%,rgba(9,15,25,.34) 70%,rgba(9,15,25,.5) 100%),
    linear-gradient(0deg,var(--bg) 0%,rgba(13,21,34,.42) 30%,rgba(13,21,34,.2) 68%,rgba(13,21,34,.55) 100%)}

.hero-in{position:relative;padding:clamp(96px,11vw,150px) 26px clamp(40px,4.6vw,62px)}
.hero h1{font-size:clamp(34px,5.2vw,64px);letter-spacing:-.032em;max-width:17ch;
  animation:heroUp .8s var(--ease) both;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.hero h1 span{color:var(--cyan-lt);text-shadow:0 2px 40px rgba(48,168,228,.35)}
.hero-copy>p{max-width:52ch;margin-top:24px;font-size:clamp(16px,1.25vw,18.5px);
  color:var(--tx-2);animation:heroUp .95s var(--ease) both}
.hero-btns{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px;
  animation:heroUp 1.1s var(--ease) both}

.hero-bar{position:relative;border-top:1px solid rgba(255,255,255,.14);
  background:rgba(13,21,34,.6);backdrop-filter:blur(10px)}
.hero-bar-in{display:flex;align-items:center;justify-content:space-between;
  gap:22px;flex-wrap:wrap;padding-block:18px}
.hero-ticks{display:flex;flex-wrap:wrap;gap:12px 30px}
.hero-ticks li{display:flex;align-items:center;gap:10px;font-size:14.6px;font-weight:600}
.hero-ticks .ic{font-size:19px;color:var(--cyan)}
.hero-rating{display:flex;align-items:center;gap:10px;transition:opacity .2s}
.hero-rating:hover{opacity:.82}
.hero-rating:hover span{text-decoration:underline}
.hero-rating-stars{display:flex;gap:2px;color:var(--cyan)}
.hero-rating-stars .ic{font-size:15px}
.hero-rating span{font-size:14px;color:var(--tx-2);white-space:nowrap}
.hero-rating b{color:var(--tx);font-weight:800}
svg.g-ic{display:inline-block;width:14px;height:14px;flex:none;margin:0 3px 0 5px;vertical-align:-2px}

@keyframes heroIn{from{opacity:0;transform:scale(1.07)}to{opacity:1;transform:none}}
@keyframes heroUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ── stats ───────────────────────────────────────────── */
.stats{background:var(--bg-2);border-block:1px solid var(--line)}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:42px 26px}
.stat{text-align:center;padding:0 12px;position:relative}
.stat+.stat::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;
  background:var(--line)}
.stat b{display:block;font-size:clamp(32px,4vw,50px);font-weight:800;letter-spacing:-.04em;
  line-height:1;color:var(--cyan);font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:9px;font-size:13.6px;font-weight:600;color:var(--tx-3)}

/* ── section shell ───────────────────────────────────── */
.sec{padding:clamp(70px,8.5vw,116px) 0}
.sec-head{max-width:64ch;margin-bottom:clamp(36px,4.4vw,56px)}
.sec-head p{margin-top:17px;font-size:17.4px;color:var(--tx-2)}
.sec-head-c{max-width:none;text-align:center;margin-inline:auto}
.sec-head-row{max-width:none;display:flex;justify-content:space-between;
  align-items:flex-end;gap:26px;flex-wrap:wrap}
.sec-head-row p{max-width:52ch}

/* ── services: uniform equal cards ──────────────────── */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc{display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.svc:hover{transform:translateY(-6px);border-color:rgba(48,168,228,.55);box-shadow:var(--shadow)}
.svc-img{overflow:hidden;background:var(--panel-2);aspect-ratio:8/5}
.svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.svc:hover .svc-img img{transform:scale(1.06)}
.svc-body{padding:26px;display:flex;flex-direction:column;flex:1}
.svc-body h3 a{color:inherit;transition:color .2s}
.svc-body h3 a:hover{color:var(--cyan-lt)}
.svc-body>p{margin-top:11px;font-size:15px;color:var(--tx-2)}
.svc-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-top:auto;padding-top:20px}
.svc-list li{position:relative;padding-left:16px;font-size:13.6px;font-weight:600;color:var(--tx-3)}
.svc-list li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--cyan)}

/* ── carousel core ───────────────────────────────────── */
.car{position:relative}
.car-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;
  padding:4px 0 6px}
.car-track::-webkit-scrollbar{display:none}
.car-track>*{scroll-snap-align:start;flex:0 0 100%}

.car-nav{display:flex;gap:10px;flex:0 0 auto}
.car-btn{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--panel);border:1px solid var(--line-2);color:var(--tx);cursor:pointer;
  transition:.22s var(--ease)}
.car-btn:hover:not(:disabled){background:var(--cyan);border-color:var(--cyan);
  color:#00131f;transform:translateY(-2px)}
.car-btn:disabled{opacity:.32;cursor:default}
.car-btn .ic{font-size:20px}

.car-dots{display:flex;justify-content:center;gap:8px;margin-top:22px}
.car-dots button{width:8px;height:8px;padding:0;border-radius:50%;border:0;cursor:pointer;
  background:var(--line-2);transition:.25s var(--ease)}
.car-dots button[aria-current="true"]{background:var(--cyan);width:26px;border-radius:100px}
.car-dots-lg{margin-top:26px}

/* inner (per project) image carousel */
.car-in .car-track{gap:0;padding:0}
.car-in .shot{margin:0;flex:0 0 100%;aspect-ratio:4/3;overflow:hidden;background:var(--panel-2)}
.car-in .shot img{width:100%;height:100%;object-fit:cover}
.car-btn-fl{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;background:rgba(16,26,41,.82);backdrop-filter:blur(6px)}
.car-btn-fl:hover:not(:disabled){transform:translateY(-50%) scale(1.06)}
.car-prev{left:12px}
.car-next{right:12px}
.car-in .car-dots{position:absolute;left:0;right:0;bottom:12px;margin:0;z-index:3}
.car-in .car-dots button{background:rgba(255,255,255,.45)}
.car-in .car-dots button[aria-current="true"]{background:var(--cyan)}

/* ── projects ───────────────────────────────────────── */
.pjs{padding:clamp(70px,8.5vw,116px) 0;background:var(--bg-2);border-block:1px solid var(--line)}
.pj{display:grid;grid-template-columns:1.08fr .92fr;gap:0;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden}
/* the media column stretches to the info column's height, so the slider and the
   inner carousels are absolutely filled rather than left with dead space below */
.pj-visual{position:relative;background:var(--panel-2);min-height:380px;overflow:hidden}
.pj-visual>.ba,.pj-visual>.car-in{position:absolute;inset:0}
.pj-visual>.car-in,.pj-visual>.car-in .car-track{height:100%}
.pj-visual>.car-in .shot{aspect-ratio:auto;height:100%}
.pj-visual>.ba{aspect-ratio:auto}
.pj-info{padding:clamp(24px,2.6vw,38px);display:flex;flex-direction:column}
.pj-info h3{font-size:clamp(21px,2.2vw,28px)}
.pj-loc{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:13.8px;
  font-weight:600;color:var(--tx-3)}
.pj-loc .ic{font-size:16px;color:var(--cyan)}
.pj-info>p{margin-top:16px;font-size:15.6px;color:var(--tx-2)}

.pj-spec{margin:20px 0 0;border-top:1px solid var(--line)}
.pj-spec>div{display:grid;grid-template-columns:.6fr 1fr;gap:14px;padding:10px 0;
  border-bottom:1px solid var(--line)}
.pj-spec dt{margin:0;font-size:12.4px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tx-3)}
.pj-spec dd{margin:0;font-size:14.2px;font-weight:600}
.pj-note{margin-top:16px;font-size:13.4px;color:var(--tx-3);
  border-left:2px solid var(--cyan);padding-left:14px}

.pj-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.pj-figs li{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:13px}
.pj-figs b{display:block;font-size:19px;font-weight:800;letter-spacing:-.03em;color:var(--cyan)}
.pj-figs span{display:block;margin-top:3px;font-size:11.5px;font-weight:600;
  color:var(--tx-3);line-height:1.35}
.pj-info .btn{margin-top:auto;align-self:flex-start}
.pj-figs+.btn,.pj-note+.btn{margin-top:24px}

/* ── before / after slider ──────────────────────────── */
.ba{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:var(--panel-2);touch-action:pan-y;user-select:none}
.ba-base,.ba-top img{width:100%;height:100%;object-fit:cover;display:block}
.ba-base{position:absolute;inset:0}
.ba-top{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos,50%));
  will-change:clip-path}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;
  background:#fff;box-shadow:0 0 14px rgba(0,0,0,.5);z-index:3;pointer-events:none;
  will-change:left}
.ba-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:50%;background:#fff;color:#0d1522;
  display:flex;align-items:center;justify-content:center;gap:1px;
  box-shadow:0 6px 20px rgba(0,0,0,.45)}
.ba-grip .ic{font-size:15px}
.ba-lbl{position:absolute;top:14px;z-index:4;font-size:11.4px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;padding:6px 13px;border-radius:100px;
  pointer-events:none}
.ba-lbl-b{left:14px;background:rgba(10,16,26,.8);color:#fff;
  border:1px solid rgba(255,255,255,.26)}
.ba-lbl-a{right:14px;background:linear-gradient(135deg,var(--cyan),var(--cyan-dk));color:#00131f}
.ba-range{position:absolute;inset:0;z-index:5;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:none}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:56px;height:100%;cursor:ew-resize}
.ba-range::-moz-range-thumb{width:56px;height:100%;border:0;background:transparent;cursor:ew-resize}

/* ── commercial ─────────────────────────────────────── */
.comm{padding:clamp(70px,8.5vw,116px) 0}
.comm-in{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(38px,4.6vw,70px);
  align-items:center}
.comm-copy p{margin-top:18px;font-size:16.8px;color:var(--tx-2)}
.comm-list{margin-top:24px;display:grid;gap:13px}
.comm-list li{display:flex;gap:12px;align-items:flex-start;font-size:15.3px;font-weight:600}
.comm-list .ic{font-size:20px;color:var(--cyan);margin-top:1px}
.comm-note{font-size:14px;color:var(--tx-3);border-left:2px solid var(--cyan);
  padding-left:15px;margin-top:26px}
.comm-copy .btn{margin-top:28px}
.comm-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.comm-grid figure{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.comm-grid img{width:100%;height:208px;object-fit:cover;transition:transform .55s var(--ease)}
.comm-grid figure:hover img{transform:scale(1.06)}

/* ── gallery ────────────────────────────────────────── */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.g{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line)}
.g img{width:100%;height:300px;object-fit:cover;transition:transform .6s var(--ease)}
.g:hover img{transform:scale(1.06)}
.g figcaption{position:absolute;inset:auto 0 0 0;padding:48px 20px 18px;
  display:flex;flex-direction:column;gap:2px;
  background:linear-gradient(180deg,transparent,rgba(6,11,19,.92) 62%)}
.g figcaption b{font-size:16.4px;font-weight:700}
.g figcaption span{font-size:12.8px;font-weight:600;color:var(--cyan)}

/* ── problems ───────────────────────────────────────── */
.fix{padding:clamp(70px,8.5vw,112px) 0;background:var(--bg-2);border-block:1px solid var(--line)}
.fix-in{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(38px,4.6vw,66px);
  align-items:center}
.fix-copy p{margin-top:18px;font-size:16.8px;color:var(--tx-2);max-width:50ch}
.fix-copy .btn{margin-top:28px}
.fix-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fix-shots figure{margin:0}
.fix-shots img{width:100%;height:290px;object-fit:cover;border-radius:var(--r);
  border:1px solid var(--line)}
.fix-shots figcaption{margin-top:10px;font-size:12.8px;font-weight:600;color:var(--tx-3);
  text-align:center}

/* ── reviews ────────────────────────────────────────── */
.revs{padding:clamp(70px,8.5vw,116px) 0}
.rev-sum{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap;transition:opacity .2s}
.rev-sum:hover{opacity:.82}
.rev-sum:hover span{text-decoration:underline}
.rev-sum>b{font-size:36px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--cyan)}
.rev-sum>span{font-size:14.6px;color:var(--tx-3);font-weight:600}
.rev-stars{display:flex;gap:3px;color:var(--cyan)}
.rev-stars .ic{font-size:17px}
.rev-track>*{flex:0 0 calc(33.333% - 14.7px)}
.rev{margin:0;padding:28px;border-radius:var(--r-lg);background:var(--panel);
  border:1px solid var(--line);display:flex;flex-direction:column;
  transition:border-color .25s,transform .25s var(--ease)}
.rev:hover{border-color:rgba(48,168,228,.45);transform:translateY(-3px)}
.rev .rev-stars{margin-bottom:14px}
.rev p{font-size:15px;line-height:1.7;color:var(--tx-2)}
.rev cite{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:18px;
  font-style:normal;font-weight:800;font-size:14.8px}
.rev cite{border-top:1px solid var(--line)}
.rev cite span{font-weight:600;font-size:12.8px;color:var(--tx-3)}
.rev-more{margin-top:20px;text-align:center;font-size:14px;color:var(--tx-3)}

/* ── trusted by ─────────────────────────────────────── */
.trust{background:var(--bg-2);border-block:1px solid var(--line)}
.wall{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.wall li{flex:0 1 calc(16.666% - 14px);min-width:152px;background:#fff;border-radius:14px;
  display:grid;place-items:center;padding:16px 18px;min-height:84px;
  filter:saturate(.95);transition:transform .25s var(--ease),box-shadow .25s,filter .25s}
.wall li:hover{transform:translateY(-4px);filter:none;
  box-shadow:0 16px 34px -16px rgba(0,0,0,.6)}
.wall img{max-height:44px;width:auto;object-fit:contain}

.sup-title{margin:54px 0 22px;text-align:center;font-size:14.6px;font-weight:700;
  color:var(--tx-3)}
.marq{position:relative;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq-row{display:flex;width:max-content;animation:marq 34s linear infinite}
.marq:hover .marq-row{animation-play-state:paused}
.marq-set{display:flex;gap:12px;padding-right:12px}
.marq-set li{background:#fff;border-radius:11px;padding:12px 20px;display:grid;
  place-items:center;filter:grayscale(.4);transition:filter .25s}
.marq-set li:hover{filter:none}
.marq-set img{max-height:28px;width:auto;object-fit:contain}
@keyframes marq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ── process: animated timeline ─────────────────────── */
.proc{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
  padding-top:8px}

/* the rail runs behind the nodes and fills as the section reveals */
.proc-rail{position:absolute;left:0;right:0;top:38px;height:3px;border-radius:3px;
  background:var(--line);overflow:hidden}
.proc-fill{display:block;height:100%;width:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--cyan),var(--cyan-lt));
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.5s var(--ease)}
.proc.in .proc-fill{transform:scaleX(1)}

.proc li{position:relative;padding-top:0}
.proc-node{position:relative;z-index:1;display:grid;place-items:center;
  width:76px;height:76px;border-radius:50%;margin-bottom:20px;
  color:var(--cyan);background:var(--panel);
  border:3px solid var(--line);
  transition:transform .55s var(--ease),border-color .55s,color .55s,box-shadow .55s}
.proc-node .ic{font-size:28px}
.proc-node b{position:absolute;right:-4px;bottom:-4px;
  min-width:26px;height:26px;padding:0 6px;border-radius:100px;
  display:grid;place-items:center;font-size:12px;font-weight:800;
  background:var(--bg-2);border:2px solid var(--line);color:var(--tx-3);
  transition:background .45s,border-color .45s,color .45s}

/* nodes light up in sequence behind the advancing rail */
.proc li:nth-child(2) .proc-node{transition-delay:.05s}
.proc li:nth-child(3) .proc-node{transition-delay:.35s}
.proc li:nth-child(4) .proc-node{transition-delay:.65s}
.proc li:nth-child(5) .proc-node{transition-delay:.95s}
.proc.in .proc-node{
  border-color:var(--cyan);transform:scale(1.04);
  box-shadow:0 0 0 8px rgba(48,168,228,.09),0 14px 34px -16px rgba(48,168,228,.5)}
.proc.in .proc-node b{background:var(--cyan);border-color:var(--cyan);color:#00131f}

.proc li h3,.proc li p{opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.proc.in li h3,.proc.in li p{opacity:1;transform:none}
.proc li:nth-child(2) h3{transition-delay:.15s} .proc li:nth-child(2) p{transition-delay:.22s}
.proc li:nth-child(3) h3{transition-delay:.45s} .proc li:nth-child(3) p{transition-delay:.52s}
.proc li:nth-child(4) h3{transition-delay:.75s} .proc li:nth-child(4) p{transition-delay:.82s}
.proc li:nth-child(5) h3{transition-delay:1.05s} .proc li:nth-child(5) p{transition-delay:1.12s}

.proc li p{margin-top:9px;font-size:14.8px;color:var(--tx-2)}
.proc li:hover .proc-node{transform:scale(1.1) translateY(-3px)}

/* ── about ──────────────────────────────────────────── */
.about{padding:clamp(70px,8.5vw,116px) 0}
.about-in{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(38px,4.6vw,70px);
  align-items:center}
/* when the media side is the video panel, give it more of the row so it
   reads bigger, and let it run taller than the plain image case below.
   min-width scoped: .about-in:has(.about-vid) has higher specificity than
   the plain .about-in single column rule in the mobile media query below,
   so left unscoped it would win there too and squeeze both columns onto
   one small phone screen instead of stacking. */
@media (min-width:941px){
  .about-in:has(.about-vid){grid-template-columns:1.14fr .86fr}
}
.about-img{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow)}

/* video panel: displayed under the clip's native 636px so it stays sharp */
.about-vid{position:relative;background:#000}
.about-vid video{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  object-position:56% 46%}
.vid-btn{position:absolute;left:16px;bottom:16px;z-index:2;
  width:52px;height:52px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:#00131f;
  background:linear-gradient(135deg,var(--cyan),var(--cyan-dk));
  border:0;box-shadow:0 10px 26px -10px rgba(0,0,0,.7);
  transition:transform .22s var(--ease)}
.vid-btn:hover{transform:scale(1.07)}
.vid-btn .ic{font-size:23px}
.vid-btn .vid-pause{display:none}
.about-vid[data-playing] .vid-btn .vid-play{display:none}
.about-vid[data-playing] .vid-btn .vid-pause{display:block}
.about-vid figcaption{position:absolute;right:16px;bottom:24px;z-index:2;
  font-size:12.6px;font-weight:600;color:#fff;
  background:rgba(9,15,25,.7);backdrop-filter:blur(6px);
  padding:6px 13px;border-radius:100px}
.about-copy p{margin-top:18px;font-size:16.8px;color:var(--tx-2)}
.about-pts{margin-top:28px;display:grid;gap:14px}
.about-pts li{display:flex;gap:13px;align-items:flex-start;font-size:15.2px;font-weight:600;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.about-pts li:last-child{border-bottom:0;padding-bottom:0}
.about-pts .ic{font-size:20px;color:var(--cyan);margin-top:1px}

/* ── areas ──────────────────────────────────────────── */
.areas-sec{background:var(--bg-2);border-block:1px solid var(--line)}
.areas{display:flex;flex-wrap:wrap;gap:11px}
.areas li{padding:11px 20px;border-radius:100px;border:1px solid var(--line);
  background:var(--panel);font-size:14.5px;font-weight:600;color:var(--tx-2);
  transition:.22s var(--ease)}
.areas li:hover{border-color:var(--cyan);color:var(--cyan-lt);transform:translateY(-2px)}
.areas-note{display:flex;gap:12px;align-items:flex-start;margin-top:30px;font-size:14.6px;
  color:var(--tx-2);max-width:66ch}
.areas-note .ic{font-size:20px;color:var(--cyan);margin-top:2px}

/* ── contact ────────────────────────────────────────── */
.cta{padding:clamp(70px,8.5vw,116px) 0;
  background:radial-gradient(110% 80% at 10% 0%,rgba(18,35,94,.55),transparent 62%),var(--bg)}
.cta-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(38px,4.6vw,68px);align-items:start}
.cta-copy>p{margin-top:18px;font-size:17.2px;color:var(--tx-2);max-width:44ch}
.cta-details{margin-top:34px;display:grid;gap:12px}
.cta-details li>*{display:flex;align-items:center;gap:16px;padding:17px 20px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  transition:.22s var(--ease)}
.cta-details a:hover{border-color:var(--cyan);background:var(--panel-2);transform:translateX(4px)}
.cta-details .ic{font-size:22px;color:var(--cyan)}
.cta-details span{display:flex;flex-direction:column;gap:2px;min-width:0}
.cta-details b{font-size:16px;font-weight:700;overflow-wrap:anywhere}
.cta-details i{font-style:normal;font-size:13px;color:var(--tx-3);font-weight:600}

.form{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,36px);display:grid;gap:16px;box-shadow:var(--shadow)}
.f-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f-row{display:grid;gap:7px}
.f-row label{font-size:13.2px;font-weight:700;color:var(--tx-2)}
.f-row label span{color:var(--cyan)}
.f-row input,.f-row select,.f-row textarea{background:var(--bg-2);
  border:1px solid var(--line-2);border-radius:12px;padding:14px 15px;color:var(--tx);
  font:500 15.4px/1.5 "Manrope",sans-serif;resize:vertical;width:100%;
  transition:border-color .2s,background .2s}
.f-row textarea::placeholder{color:#68798f}
.f-row input:focus,.f-row select:focus,.f-row textarea:focus{outline:none;
  border-color:var(--cyan);background:var(--bg)}
.f-row input:user-invalid{border-color:#e0655f}
/* spam honeypot, hidden from people and assistive tech but present in the DOM */
.f-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap;border:0;padding:0;margin:-1px}
.f-note{margin:0;font-size:14.2px;font-weight:600;line-height:1.55}
.f-note.ok{color:var(--cyan-lt)}
.f-note.err{color:#ff9a94}
.btn[aria-busy="true"]{opacity:.72;pointer-events:none}

/* ── footer ─────────────────────────────────────────── */
.foot{background:var(--bg-2);border-top:1px solid var(--line);padding-top:clamp(50px,6vw,72px)}
.foot-in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:40px;padding-bottom:46px}
.foot-brand p{margin-top:16px;font-size:14.6px;color:var(--tx-3);line-height:1.7}
.foot-brand .soc{margin-top:22px}
.foot-col{display:flex;flex-direction:column;gap:11px}
.foot-col h3{font-size:15px;font-weight:800;color:var(--tx);margin-bottom:6px}
.foot-col a,.foot-col span{font-size:14.4px;color:var(--tx-3);transition:color .2s;line-height:1.6}
.foot-col a:hover{color:var(--cyan)}
.foot-btm{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  padding-block:20px;border-top:1px solid var(--line);font-size:13px;color:var(--tx-3)}

/* ── sticky mobile bar ──────────────────────────────── */
.mbar{display:none;position:fixed;inset:auto 0 0 0;z-index:950;gap:1px;
  background:var(--line);border-top:1px solid var(--line-2);
  padding-bottom:env(safe-area-inset-bottom)}
.mbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 8px;font-weight:800;font-size:15px}
.mbar-call{background:var(--panel);color:var(--tx)}
.mbar-call .ic{font-size:17px;color:var(--cyan)}
.mbar-quote{background:linear-gradient(135deg,var(--cyan),var(--cyan-dk));color:#00131f}

/* desktop persistent CTA: hidden until the hero scrolls out, hidden again
   once the real contact form is in view so it never competes with itself */
.dcta{display:none;position:fixed;right:26px;bottom:26px;z-index:940;
  align-items:center;gap:10px;padding:16px 26px;border-radius:100px;
  font-weight:800;font-size:15px;color:#00131f;
  background:linear-gradient(135deg,var(--cyan),var(--cyan-dk));
  box-shadow:0 16px 40px -14px rgba(48,168,228,.65);
  opacity:0;transform:translateY(14px) scale(.96);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.dcta .ic{font-size:18px}
.dcta:hover{transform:translateY(-3px) scale(1.03)}
@media (min-width:941px){
  .dcta{display:flex}
  .dcta.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
}

/* ── clickable photos ───────────────────────────────── */
[data-lb]{cursor:zoom-in}
[data-lb]::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,rgba(48,168,228,.2),transparent 60%);
  opacity:0;transition:opacity .28s var(--ease)}
[data-lb]:hover::after,[data-lb]:focus-visible::after{opacity:1}
.svc-img[data-lb],.shot[data-lb]{position:relative}

/* logo chips are links now */
.wall li a,.marq-set li a{display:grid;place-items:center;width:100%;height:100%}
.wall li a:focus-visible,.marq-set li a:focus-visible{outline-offset:-2px}

/* ── lightbox ───────────────────────────────────────── */
.lb{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:5vmin}
.lb[hidden]{display:none}
.lb-back{position:absolute;inset:0;background:rgba(5,9,16,.93);
  backdrop-filter:blur(6px);animation:lbFade .22s var(--ease) both}
.lb-fig{position:relative;z-index:1;margin:0;max-width:min(1500px,92vw);
  display:flex;flex-direction:column;gap:12px;animation:lbPop .26s var(--ease) both}
.lb-fig img{max-width:100%;max-height:82vh;width:auto;height:auto;
  border-radius:var(--r);box-shadow:0 40px 90px -40px rgba(0,0,0,.9);background:var(--panel)}
.lb-fig figcaption{display:flex;justify-content:space-between;align-items:baseline;
  gap:20px;font-size:14.4px;color:var(--tx-2)}
.lb-fig figcaption b{color:var(--tx-3);font-weight:600;font-size:13px;white-space:nowrap}
.lb-btn{position:absolute;z-index:2;display:grid;place-items:center;
  width:50px;height:50px;border-radius:50%;cursor:pointer;color:var(--tx);
  background:rgba(29,42,59,.86);border:1px solid var(--line-2);
  backdrop-filter:blur(8px);transition:.2s var(--ease)}
.lb-btn:hover{background:var(--cyan);border-color:var(--cyan);color:#00131f;transform:scale(1.06)}
.lb-btn svg{width:24px;height:24px}
.lb-close{top:3vmin;right:3vmin}
.lb-prev{left:3vmin;top:50%;margin-top:-25px}
.lb-next{right:3vmin;top:50%;margin-top:-25px}
.lb-solo .lb-prev,.lb-solo .lb-next{display:none}
body.lb-open{overflow:hidden}

@keyframes lbFade{from{opacity:0}to{opacity:1}}
@keyframes lbPop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

@media (max-width:680px){
  .lb{padding:0}
  .lb-fig{max-width:100vw;padding:0 12px}
  .lb-fig img{max-height:70vh}
  .lb-btn{width:44px;height:44px}
  .lb-close{top:14px;right:14px}
  .lb-prev{left:8px}
  .lb-next{right:8px}
  .lb-fig figcaption{padding:0 4px}
}

/* ══════════════════════════════════════════════════════
   Service pages (assets referenced root-relative from /services/*)
   ══════════════════════════════════════════════════════ */
.crumb{background:var(--bg-2);border-bottom:1px solid var(--line)}
.crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:16px 0;
  font-size:13.4px;color:var(--tx-3)}
.crumb a{color:var(--tx-2);transition:color .2s}
.crumb a:hover{color:var(--cyan)}
.crumb li[aria-current]{color:var(--tx);font-weight:600}
.crumb li:not(:last-child)::after{content:"/";margin-left:8px;color:var(--line-2)}

/* contained banner rather than full bleed: the service card photos are
   880px native, so stretching them edge to edge on a wide viewport would
   upscale far past every other image on the site. Capping the frame to the
   content width keeps the upscale mild (about 1.3x at most) and consistent
   with the rest of the site's photography standard. */
.phero{padding:40px 0 20px}
.phero-card{position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(300px,38vw,440px);display:flex;align-items:flex-end;
  border-radius:var(--r-xl);border:1px solid var(--line);box-shadow:var(--shadow)}
.phero-bg,.phero-bg img{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.phero-bg img{object-fit:cover;object-position:50% 42%}
.phero-scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(96deg,rgba(9,15,25,.94) 0%,rgba(9,15,25,.82) 45%,rgba(9,15,25,.4) 78%,rgba(9,15,25,.6) 100%),
    linear-gradient(0deg,rgba(13,21,34,.55) 0%,rgba(13,21,34,.15) 45%,rgba(13,21,34,.1) 100%)}
.phero-in{position:relative;padding:40px 44px}
.phero h1{font-size:clamp(28px,4vw,46px);letter-spacing:-.03em;max-width:20ch}
.phero .hero-btns{margin-top:26px}

.svc-page-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,4.6vw,64px);
  align-items:start}
.svc-page-copy p{font-size:16.8px;color:var(--tx-2)}
.svc-page-copy p+p{margin-top:16px}
.incl{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* no gallery photo good enough to publish for this service, so the copy
   runs solo rather than leaving an empty second column */
.svc-page-copy-solo{max-width:64ch}
.incl-wide{grid-template-columns:repeat(3,1fr);max-width:840px}
.incl li{display:flex;gap:12px;align-items:flex-start;font-size:14.6px;font-weight:600;
  padding:13px 15px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.incl .ic{font-size:19px;color:var(--cyan);margin-top:1px;flex:0 0 auto}

.svc-page-gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.svc-page-gallery a{grid-column:1/-1;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);position:relative;cursor:zoom-in}
.svc-page-gallery figure{margin:0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);cursor:zoom-in;position:relative}
.svc-page-gallery img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease)}
.svc-page-gallery .g-big{grid-column:1/-1}
.svc-page-gallery .g-big img{height:260px}
.svc-page-gallery .g-sm img{height:150px}
.svc-page-gallery [data-lb]:hover img{transform:scale(1.05)}

.faq{margin-top:16px;display:grid;gap:12px;max-width:76ch}
.faq-c{margin-inline:auto}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:6px 22px;transition:border-color .25s}
.faq details[open]{border-color:rgba(48,168,228,.4)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding:17px 0;font-size:15.6px;font-weight:700;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--cyan);
  flex:0 0 auto;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq-a{margin:0 0 18px;font-size:14.8px;color:var(--tx-2);line-height:1.68}

.related{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.related a{display:flex;flex-direction:column;gap:4px;padding:18px 20px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  transition:.22s var(--ease)}
.related a:hover{border-color:var(--cyan);transform:translateY(-3px);background:var(--panel-2)}
.related a b{font-size:14.8px;font-weight:700}
.related a span{font-size:12.8px;color:var(--tx-3)}

.pcta{background:var(--bg-2);border-block:1px solid var(--line);padding:52px 0}
.pcta-in{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.pcta h2{font-size:clamp(22px,2.6vw,30px)}
.pcta p{margin-top:8px;color:var(--tx-2);font-size:15.5px}
.pcta-btns{display:flex;gap:12px;flex-wrap:wrap}

@media (max-width:900px){
  .svc-page-grid{grid-template-columns:1fr}
  .related{grid-template-columns:1fr 1fr}
  .incl-wide{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .incl{grid-template-columns:1fr}
  .related{grid-template-columns:1fr}
  .phero{padding:24px 0 12px}
  .phero-card{min-height:280px;border-radius:var(--r-lg)}
  .phero-in{padding:26px 22px}
  .pcta-in{flex-direction:column;align-items:flex-start}
}

/* ── reveal ─────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .car-track{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
  .reveal{opacity:1;transform:none}
  .marq-row{animation:none!important}
}

/* ══ responsive ══════════════════════════════════════ */
@media (max-width:1100px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .wall li{flex:0 1 calc(25% - 14px)}
  .proc{grid-template-columns:repeat(2,1fr);gap:36px 28px}
  .proc-rail{display:none}
  .foot-in{grid-template-columns:1fr 1fr;gap:34px}
  .rev-track>*{flex:0 0 calc(50% - 11px)}
  .gal{grid-template-columns:repeat(2,1fr)}
  .fix-shots{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:940px){
  .nav,.head-r{display:none}
  .burger{display:flex;margin-left:auto}
  .head.open .nav{display:flex;flex-direction:column;gap:0;position:absolute;
    left:0;right:0;top:100%;background:var(--bg-2);border-bottom:1px solid var(--line);
    padding:8px 26px 18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.85)}
  .head.open .nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
  .head.open .nav a:last-child{border-bottom:0}
  .head.open .nav a::after{display:none}

  .pj{grid-template-columns:1fr}
  .pj-visual{position:static;min-height:0;overflow:visible}
  .pj-visual>.ba,.pj-visual>.car-in{position:relative;inset:auto}
  .pj-visual>.ba{aspect-ratio:16/9}
  .pj-visual>.car-in,.pj-visual>.car-in .car-track{height:auto}
  .pj-visual>.car-in .shot{aspect-ratio:4/3;height:auto}
  .pj-visual .car-btn-fl{display:none}
  .comm-in,.fix-in,.about-in,.cta-in{grid-template-columns:1fr}
  .about-img{order:2}
  .mbar{display:flex}
  body{padding-bottom:60px}
}

@media (max-width:680px){
  .wrap{padding:0 19px}
  .hero{min-height:auto}
  /* the two-tone horizontal wash exists to darken only the text side of a
     wide desktop photo; on mobile the text spans full width, so that same
     wash was darkening the whole image and hiding it almost entirely.
     Vertical-only, and much lighter, lets the photo actually read. */
  .hero-scrim{background:linear-gradient(180deg,
    rgba(9,15,25,.42) 0%, rgba(9,15,25,.52) 38%,
    rgba(9,15,25,.72) 68%, rgba(9,15,25,.88) 100%)}
  .hero-in{padding:52px 19px 32px}
  .hero-copy>p{margin-top:16px}
  .hero-btns{margin-top:22px}
  .hero-btns .btn{width:100%}
  .hero-bg img{object-position:56% 42%}
  .hero-bar-in{flex-direction:column;align-items:flex-start;gap:10px;padding-block:14px}
  .hero-ticks{flex-direction:row;flex-wrap:wrap;gap:8px 18px}

  .svc-grid{grid-template-columns:1fr;gap:18px}
  .svc-list{grid-template-columns:1fr 1fr}
  .stats-in{grid-template-columns:1fr 1fr;gap:28px 8px}
  .stat:nth-child(3)::before{display:none}
  .rev-track>*{flex:0 0 100%}
  .car-track{gap:16px}
  .gal{grid-template-columns:1fr}
  .comm-grid{grid-template-columns:1fr 1fr}
  .comm-grid img{height:150px}
  .fix-shots{grid-template-columns:1fr}
  .fix-shots img{height:280px}
  /* vertical timeline with a rail down the left */
  .proc{grid-template-columns:1fr;gap:0;padding-left:38px}
  .proc-rail{display:block;left:37px;right:auto;top:10px;bottom:10px;
    width:3px;height:auto}
  .proc-fill{width:100%;height:100%;transform:scaleY(0);transform-origin:top center;
    background:linear-gradient(180deg,var(--cyan),var(--cyan-lt))}
  .proc.in .proc-fill{transform:scaleY(1)}
  .proc li{padding:0 0 30px 34px}
  .proc li:last-child{padding-bottom:0}
  .proc-node{position:absolute;left:-38px;top:0;width:56px;height:56px;margin:0}
  .proc-node .ic{font-size:21px}
  .proc-node b{min-width:22px;height:22px;font-size:11px}
  .wall{gap:10px}
  .wall li{flex:0 1 calc(50% - 10px);min-width:0;min-height:68px;padding:12px}
  .wall img{max-height:32px}
  .proc{grid-template-columns:1fr}
  .f-two{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr;gap:30px}
  .foot-btm{flex-direction:column;gap:7px}
  .pj-figs{grid-template-columns:1fr}
  .pj-spec>div{grid-template-columns:1fr;gap:3px}
  .sec-head-row{align-items:flex-start}
  .car-btn{width:42px;height:42px}
}