/* ══════════════════════════════════════════════════════
   MEKCON — v2 (portfolio option)
   Minimal architectural: near-black ground, single orange
   accent, condensed display caps. Kurt's own copy and marks.
   ══════════════════════════════════════════════════════ */
:root{
  --bg:#080808; --bg-2:#101011; --line:rgba(242,240,236,.13);
  --ink:#F2F0EC; --mute:#8E8E92; --mute-2:#6A6A6E;
  --orange:#FF8B36; --orange-lt:#FFA35C;
  --disp:'Big Shoulders Display','Oswald',Impact,'Arial Narrow',sans-serif;
  --body:'Archivo',-apple-system,Helvetica,sans-serif;
  --e:cubic-bezier(.19,1,.22,1);
  --pad:clamp(20px,4.2vw,64px);
  --nav-h:92px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  /* fixed header is --nav-h tall: anchor targets must clear it */
  scroll-padding-top:calc(var(--nav-h) + 18px)}
body{background:var(--bg);color:var(--ink);font-family:var(--body);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.6}
body.lock{overflow:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--orange);color:#000}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ── header ───────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:1060;height:var(--nav-h);
  /* 3-col grid with equal side tracks: the centre item is truly centred,
     regardless of how wide the logo or the icon are. space-between is not. */
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 var(--pad);transition:background .4s var(--e),backdrop-filter .4s var(--e)}
.nav .logo{justify-self:start}
.nav .burger{justify-self:center}
.nav .ig-link{justify-self:end;display:inline-flex}
.nav.solid{background:rgba(8,8,8,.82)}
.nav .logo{height:46px;width:auto;display:flex;align-items:center}
.nav .logo img{height:46px;width:auto;object-fit:contain}
.burger{width:34px;height:18px;position:relative;cursor:pointer;background:none;border:none;padding:0}
.burger i{position:absolute;left:0;right:0;height:2px;background:var(--ink);transition:transform .4s var(--e),opacity .3s}
.burger i:nth-child(1){top:0}
.burger i:nth-child(2){top:50%;transform:translateY(-50%)}
.burger i:nth-child(3){bottom:0}
.nav.open-menu .burger i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav.open-menu .burger i:nth-child(2){opacity:0}
.nav.open-menu .burger i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.ig{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.6;transition:stroke .3s}
a.ig-link:hover .ig{stroke:var(--orange)}

/* ── menu overlay ─────────────────────────────────── */
#menu{position:fixed;inset:0;z-index:1050;background:var(--bg-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  clip-path:circle(0% at calc(100% - 50%) 42px);
  transition:clip-path .8s var(--e);pointer-events:none}
#menu.open{clip-path:circle(150% at 50% 42px);pointer-events:auto}
#menu a{color:var(--orange);font-family:var(--disp);font-size:clamp(2.2rem,7vw,4.4rem);font-weight:600;
  letter-spacing:.02em;text-transform:uppercase;line-height:1.12;
  opacity:0;transform:translateY(18px);transition:opacity .5s var(--e),transform .5s var(--e),color .3s}
#menu.open a{opacity:1;transform:none}
#menu.open a:nth-child(1){transition-delay:.16s}
#menu.open a:nth-child(2){transition-delay:.22s}
#menu.open a:nth-child(3){transition-delay:.28s}
#menu.open a:nth-child(4){transition-delay:.34s}
#menu a:hover{color:var(--ink)}
#menu .mfoot{position:absolute;bottom:34px;font-family:var(--body);font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--mute-2)}

/* ── hero ─────────────────────────────────────────── */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:calc(var(--nav-h) + 6vh) var(--pad) 7vh;position:relative}
.hero h1{font-family:var(--disp);font-weight:600;text-transform:uppercase;
  font-size:clamp(2.9rem,10.5vw,8.6rem);line-height:.94;letter-spacing:.005em;
  color:var(--orange)}
.hero h1 span{display:block}
.hero h1 .w2{color:var(--ink)}
.hero p{max-width:62ch;margin:clamp(22px,3.4vh,38px) auto 0;
  font-size:clamp(.95rem,1.28vw,1.16rem);line-height:2;color:var(--mute);font-weight:400}
.hero .scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute-2)}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--e),transform .9s var(--e)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ── filters ──────────────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,3vw,44px);
  margin-top:clamp(30px,5vh,58px)}
.filters button{background:none;border:none;cursor:pointer;padding:4px 0;
  font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mute-2);position:relative;transition:color .3s}
.filters button::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--e)}
.filters button:hover{color:var(--ink)}
.filters button.on{color:var(--orange)}
.filters button.on::after{transform:scaleX(1)}

/* ── project grid ─────────────────────────────────── */
.work{padding:0 var(--pad) clamp(60px,10vh,130px);scroll-margin-top:calc(var(--nav-h) + 18px)}
/* Portrait lead card beside a stack of landscape ones. Each card takes its
   own image's aspect ratio (--ar), so the photo is never cropped. */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,30px);
  max-width:1620px;margin:0 auto;align-items:start}
.card{position:relative;display:block;overflow:hidden;background:var(--bg-2)}
.card.tall{grid-row:span 2}
/* height must come FROM the ratio, never the other way round — forcing
   height:100% made the box wider than its column and overflow clipped it */
.card .im{position:relative;overflow:hidden;aspect-ratio:var(--ar,1.3333);width:100%}
.card .im img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.01);transition:transform 1.5s var(--e),filter .6s var(--e);filter:saturate(.94)}
.card:hover .im img{transform:scale(1.06);filter:saturate(1.04)}
.card .im::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,8,0) 38%,rgba(8,8,8,.86) 100%)}
.card .meta{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(18px,2.4vw,34px);display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.card h3{font-family:var(--disp);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.05rem,2.1vw,1.85rem);line-height:1.06;letter-spacing:.01em;
  color:var(--orange)}
.card .sub{display:block;font-family:var(--body);font-size:10px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink);margin-bottom:9px}
.card .go{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);
  white-space:nowrap;opacity:0;transform:translateX(-6px);transition:opacity .4s var(--e),transform .4s var(--e)}
.card:hover .go{opacity:1;transform:none;color:var(--orange)}
.card.hide{display:none}

/* ── generic section furniture ────────────────────── */
.sec{padding:clamp(64px,11vh,140px) var(--pad);scroll-margin-top:calc(var(--nav-h) + 18px)}
.sec.alt{background:var(--bg-2)}
.inner{max-width:1620px;margin:0 auto}
.head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding-bottom:clamp(24px,3vw,42px);margin-bottom:clamp(34px,4.6vw,60px);border-bottom:1px solid var(--line)}
.head h2{font-family:var(--disp);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.6rem,4.4vw,3.4rem);line-height:1;letter-spacing:.01em;
  color:var(--orange)}
.head .ix{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--orange)}

/* ── services: expandable rows ─────────────────────
   Each service opens to its process and handover pack.
   Panel height animates via grid-template-rows 0fr→1fr,
   which is cheap and needs no measured pixel height.   */
.svcs{border-top:1px solid var(--line)}
.svc-row{border-bottom:1px solid var(--line)}

.svc-head{width:100%;background:none;border:none;cursor:pointer;text-align:left;
  display:grid;grid-template-columns:74px minmax(0,1fr) minmax(0,1.1fr) 34px;
  gap:clamp(12px,2.4vw,40px);align-items:center;
  padding:clamp(20px,2.8vw,34px) 0;color:inherit;font-family:inherit;
  transition:padding-left .45s var(--e)}
.svc-head:hover{padding-left:10px}
.svc-head .n{font-family:var(--body);font-size:10px;letter-spacing:.2em;color:var(--orange)}
.svc-head h3{font-family:var(--disp);font-weight:500;text-transform:uppercase;
  font-size:clamp(1.1rem,2.4vw,1.95rem);line-height:1.05;transition:color .4s var(--e)}
.svc-head .tag{font-size:.9rem;color:var(--mute)}
.svc-head:hover h3,.svc-row.open .svc-head h3{color:var(--orange)}

.chev{position:relative;width:16px;height:16px;justify-self:end}
.chev::before,.chev::after{content:"";position:absolute;top:7px;left:0;width:16px;height:1.6px;
  background:var(--mute);transition:transform .45s var(--e),background .3s}
.chev::after{transform:rotate(90deg)}
.svc-head:hover .chev::before,.svc-head:hover .chev::after{background:var(--ink)}
.svc-row.open .chev::after{transform:rotate(0)}
.svc-row.open .chev::before,.svc-row.open .chev::after{background:var(--orange)}

.svc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--e)}
.svc-row.open .svc-panel{grid-template-rows:1fr}
.svc-inner{overflow:hidden;min-height:0}
.svc-panel[hidden]{display:grid}          /* keep it animatable while collapsed */

.svc-intro{max-width:74ch;font-size:clamp(.98rem,1.25vw,1.12rem);line-height:1.8;
  color:var(--ink);padding:0 0 clamp(20px,2.6vw,32px)}
.svc-cols{display:grid;grid-template-columns:1.25fr .95fr;gap:clamp(24px,4vw,64px);
  padding-bottom:clamp(28px,3.6vw,48px)}
.svc-cols .k{display:block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--orange);margin-bottom:clamp(14px,1.8vw,22px)}

.svc-steps{list-style:none}
.svc-steps li{display:grid;grid-template-columns:38px 1fr;gap:14px;
  padding:0 0 clamp(14px,1.8vw,20px)}
.svc-steps .sn{font-family:var(--body);font-size:10px;letter-spacing:.16em;color:var(--mute-2);padding-top:4px}
.svc-steps b{display:block;font-weight:600;font-size:.96rem;margin-bottom:5px}
.svc-steps p{font-size:.9rem;line-height:1.72;color:var(--mute)}

.svc-pack{list-style:none;border-top:1px solid var(--line)}
.svc-pack li{position:relative;padding:11px 0 11px 22px;border-bottom:1px solid var(--line);
  font-size:.9rem;color:var(--mute)}
.svc-pack li::before{content:"";position:absolute;left:2px;top:19px;width:7px;height:1.5px;background:var(--orange)}

.svc-legal{margin-top:clamp(30px,4vw,52px);border-left:2px solid var(--orange);
  padding:2px 0 2px clamp(16px,1.8vw,26px);max-width:80ch}
.svc-legal .k{display:block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--orange);margin-bottom:10px}
.svc-legal p{font-size:.92rem;line-height:1.78;color:var(--mute)}
.svc-legal b{color:var(--ink);font-weight:600}
.svc-legal em{font-style:italic}

@media(max-width:860px){
  .svc-head{grid-template-columns:44px 1fr 28px;gap:12px 14px}
  .svc-head .tag{grid-column:2/-1;font-size:.85rem;margin-top:2px}
  .svc-cols{grid-template-columns:1fr;gap:26px}
}

/* ── about ────────────────────────────────────────── */
.about{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,80px);align-items:center}
.about .lead{font-family:var(--disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.35rem,3.4vw,2.7rem);line-height:1.16;letter-spacing:.01em}
.about .lead em{font-style:normal;color:var(--orange)}
.about .body p{color:var(--mute);font-size:.98rem;line-height:1.86;margin-bottom:1.1em;max-width:56ch}
.about .shot img{width:100%;aspect-ratio:4/5;object-fit:cover}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(28px,4vw,48px);
  border-top:1px solid var(--line);padding-top:clamp(20px,2.6vw,32px)}
.stats .v{font-family:var(--disp);font-weight:600;font-size:clamp(1.5rem,3.4vw,2.6rem);color:var(--orange);line-height:1}
.stats .k{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute-2);margin-top:8px}
@media(max-width:860px){.about{grid-template-columns:1fr}}

/* ── reviews: continuous rotating belt ──────────────
   The track is cloned once in JS, so translating -50%
   lands on an identical card and the loop is seamless.
   Pauses on hover and focus; static under reduced motion. */
.belt{position:relative;overflow:hidden;margin-top:clamp(6px,1vw,14px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.belt-track{display:flex;gap:clamp(16px,2vw,28px);width:max-content;
  animation:beltRun 14.4s linear infinite;will-change:transform}
.belt:hover .belt-track,.belt:focus-within .belt-track{animation-play-state:paused}
@keyframes beltRun{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.rcard{flex:0 0 auto;width:clamp(280px,26vw,380px);margin:0;
  border-left:2px solid var(--orange);padding:2px 0 2px clamp(16px,1.5vw,22px);
  display:flex;flex-direction:column}
.rcard .st{color:var(--orange);letter-spacing:2.5px;font-size:10px;margin-bottom:11px}
.rcard blockquote{font-size:.9rem;line-height:1.72;color:var(--mute);flex:1;
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.rcard figcaption{margin-top:13px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase}
.rcard figcaption b{color:var(--ink);font-weight:600}
.rcard figcaption span{display:block;color:var(--mute-2);font-weight:400;margin-top:5px;letter-spacing:.14em}

.belt-note{margin-top:clamp(24px,3vw,38px);font-size:.9rem;color:var(--mute)}
.belt-note a{color:var(--orange)}
.belt-note a:hover{text-decoration:underline}

@media(prefers-reduced-motion:reduce){
  .belt-track{animation:none}
  .belt{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}
@media(max-width:700px){
  .rcard{width:78vw}
  .belt-track{animation-duration:10.4s}
}

/* ── contact + map ────────────────────────────────── */
.ct{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,74px)}
.ct .rows{border-top:1px solid var(--line)}
.ct .row{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.ct .row .k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute-2);padding-top:3px}
.ct .row a:hover{color:var(--orange)}
.map{position:relative;min-height:480px;background:var(--bg-2);overflow:hidden;border:1px solid var(--line)}
#svcmap{position:absolute;inset:0;background:var(--bg-2)}

/* Leaflet chrome, restyled for the dark ground */
.leaflet-container{background:var(--bg-2);font-family:var(--body)}
.leaflet-control-zoom a{background:rgba(8,8,8,.88)!important;color:var(--ink)!important;
  border:1px solid var(--line)!important;width:32px!important;height:32px!important;
  line-height:30px!important;font-size:17px!important}
.leaflet-control-zoom a:hover{background:var(--orange)!important;color:#000!important}
.leaflet-control-attribution{background:rgba(8,8,8,.78)!important;color:var(--mute-2)!important;
  font-size:9px!important;letter-spacing:.06em}
.leaflet-control-attribution a{color:var(--mute)!important}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#0d0d0e;color:var(--ink);
  border:1px solid var(--line);border-radius:0;box-shadow:0 16px 44px rgba(0,0,0,.6)}
.leaflet-popup-content{margin:11px 14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.leaflet-popup-content b{color:var(--orange);font-weight:600}
.leaflet-popup-close-button{color:var(--mute)!important}

.map-legend{position:absolute;left:14px;bottom:14px;z-index:500;pointer-events:none;
  background:rgba(8,8,8,.86);border:1px solid var(--line);padding:8px 12px;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
  display:flex;align-items:center;gap:9px}
.ring-key{width:16px;height:16px;border-radius:50%;flex:none;
  background:rgba(255,139,54,.16);border:1.5px dashed var(--orange)}
.map-lock{position:absolute;right:14px;bottom:14px;z-index:500;cursor:pointer;
  background:rgba(8,8,8,.86);border:1px solid var(--line);color:var(--mute);
  padding:8px 12px;font-family:var(--body);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  transition:opacity .3s,color .3s}
.map-lock:hover{color:var(--ink)}
.map-lock.gone{opacity:0;pointer-events:none}

@media(max-width:860px){.ct{grid-template-columns:1fr}.map{min-height:320px}}

/* ── footer ───────────────────────────────────────── */
footer{padding:clamp(30px,4vw,52px) var(--pad);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute-2)}
footer a:hover{color:var(--orange)}

/* ── project detail page ──────────────────────────── */
.phero{position:relative;height:76svh;min-height:440px;display:flex;align-items:flex-end;overflow:hidden}
.phero .bg{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1);animation:pz 22s ease-out forwards}
@keyframes pz{to{transform:scale(1.09)}}
@media(prefers-reduced-motion:reduce){.phero .bg{animation:none}}
.phero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,8,.55) 0%,rgba(8,8,8,.15) 42%,rgba(8,8,8,.94) 100%)}
.phero .t{position:relative;z-index:2;padding:0 var(--pad) clamp(34px,6vh,68px);width:100%;max-width:1620px;margin:0 auto}
.phero .sub{display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.phero h1{font-family:var(--disp);font-weight:600;text-transform:uppercase;
  font-size:clamp(2rem,6.4vw,5rem);line-height:.98;color:var(--orange)}
.phero h1 em{font-style:normal;color:var(--orange)}
.pj{display:grid;grid-template-columns:1.45fr .8fr;gap:clamp(28px,4.4vw,72px);align-items:start}
.pj .lead{font-size:clamp(.98rem,1.3vw,1.14rem);line-height:1.82;color:var(--mute);max-width:60ch}
.facts{margin-top:clamp(24px,3vw,38px);border-top:1px solid var(--line)}
.facts div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.facts .k{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute-2)}
.facts .v{font-size:.92rem;text-align:right}
/* superseded by the framed gallery block below */

@media(max-width:900px){.pj{grid-template-columns:1fr}.gal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gal{grid-template-columns:1fr}}

/* lightbox
   z-index must beat the fixed header (1060). At 200 the nav sat ON TOP of the
   overlay and swallowed every click on the close button, which made the
   lightbox impossible to dismiss by mouse. */
#lb{position:fixed;inset:0;z-index:1200;background:rgba(4,4,5,.95);display:flex;align-items:center;
  justify-content:center;padding:clamp(14px,4vw,58px);opacity:0;visibility:hidden;transition:opacity .34s var(--e)}
#lb.open{opacity:1;visibility:visible}
#lb img{max-width:100%;max-height:100%;object-fit:contain}
/* solid, high-contrast and comfortably above the 44px tap-target minimum */
#lb button{position:absolute;top:16px;right:16px;z-index:2;
  width:52px;height:52px;border:1px solid rgba(242,240,236,.35);border-radius:50%;
  background:rgba(8,8,8,.72);color:var(--ink);font-size:26px;cursor:pointer;line-height:1;
  display:grid;place-items:center;padding:0;
  transition:background .2s var(--e),color .2s var(--e),transform .2s var(--e)}
#lb button:hover{background:var(--orange);color:#000;border-color:var(--orange);transform:scale(1.06)}
#lb button:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
#lb .cnt{position:absolute;bottom:20px;left:0;right:0;text-align:center;font-size:10px;
  letter-spacing:.2em;color:var(--mute)}

@media(max-width:700px){
  .nav .logo,.nav .logo img{height:34px}
  .grid{grid-template-columns:1fr}
  .card.tall{grid-row:span 1}
  .card.tall .im{height:auto}
  :root{--nav-h:68px}
}

/* ══════════════════════════════════════════════
   GALLERY — framed plates with captions
   Each photo sits inside a bordered plate with a
   caption below, so nothing is cropped and every
   frame explains what was built.
   ══════════════════════════════════════════════ */
/* align-items:start so a short image doesn't stretch its frame to match a
   tall neighbour now that thumbnails keep their own height */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,42px);
  align-items:start}
.gal figure{margin:0;background:var(--bg-2);border:1px solid var(--line);
  transition:border-color .5s var(--e),transform .6s var(--e)}
.gal figure:hover{border-color:rgba(255,139,54,.45);transform:translateY(-3px)}
.gal .plate{position:relative;padding:clamp(10px,1.1vw,16px);cursor:zoom-in;display:block}
/* Show the whole photo. A forced 3/4 box with object-fit:cover was slicing
   ~30% off the sides of every landscape shot, so the grid thumbnail no longer
   matched the image the lightbox opened. */
.gal .plate img{width:100%;height:auto;display:block}
.gal .plate::after{content:"";position:absolute;inset:clamp(10px,1.1vw,16px);
  border:1px solid rgba(242,240,236,.10);pointer-events:none;transition:border-color .5s var(--e)}
.gal figure:hover .plate::after{border-color:rgba(255,139,54,.32)}
.gal figcaption{padding:0 clamp(14px,1.5vw,22px) clamp(16px,1.7vw,24px);
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.gal .num{font-family:var(--body);font-size:9.5px;font-weight:600;letter-spacing:.2em;
  color:var(--orange);padding-top:3px}
.gal .txt{font-size:.9rem;line-height:1.7;color:var(--mute)}
.gal figure:hover .txt{color:#A9A9AD}

/* zoom affordance */
.gal .plate .mag{position:absolute;right:clamp(18px,1.9vw,26px);bottom:clamp(18px,1.9vw,26px);
  width:34px;height:34px;border-radius:50%;background:rgba(8,8,8,.72);
  display:grid;place-items:center;opacity:0;transition:opacity .4s var(--e);pointer-events:none}
.gal .plate .mag::before{content:"";width:11px;height:11px;border:1.5px solid var(--ink);border-radius:50%}
.gal .plate .mag::after{content:"";position:absolute;width:6px;height:1.5px;background:var(--ink);
  transform:rotate(45deg);right:9px;bottom:10px}
.gal figure:hover .plate .mag{opacity:1}

@media(max-width:900px){.gal{grid-template-columns:1fr;gap:22px}}

/* first section on an interior page must clear the fixed header */
.sec.pagetop{padding-top:calc(var(--nav-h) + clamp(40px,7vh,90px))}

/* ══════════════════════════════════════════════
   MOTION — restrained. Transform/opacity only, so
   every animation runs on the compositor. Each plays
   once on entry, never loops, and stops entirely
   under prefers-reduced-motion.
   ══════════════════════════════════════════════ */

/* ── page line: slides in from the left, settles centred ──
   Replaces the hammer scene. Transform + opacity only, plays
   once on entry; the block then lifts so content below rises. */
.bigline{text-align:center;overflow:hidden;
  margin:0 auto clamp(26px,4.5vh,60px);
  transition:margin-bottom .9s var(--e)}
.bigline span{display:inline-block;
  font-family:var(--disp);font-weight:600;text-transform:uppercase;
  font-size:clamp(2rem,6.6vw,5.2rem);line-height:1;letter-spacing:.012em;
  color:var(--orange);opacity:0;transform:translateX(-42%);
  will-change:transform,opacity}
.bigline.go span{animation:blIn 1.15s cubic-bezier(.16,.84,.28,1) forwards}
.bigline.go span::after{content:"";display:block;height:2px;margin-top:.34em;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  animation:blRule .8s var(--e) .62s forwards}

@keyframes blIn{
  0%  {opacity:0;transform:translateX(-42%)}
  55% {opacity:1}
  100%{opacity:1;transform:translateX(0)}
}
@keyframes blRule{to{transform:scaleX(1)}}

.sec.pagetop{transition:padding-top .9s var(--e)}
.sec.pagetop.lifted{padding-top:calc(var(--nav-h) + clamp(14px,2vh,26px))}
.bigline.lifted{margin-bottom:clamp(14px,2.4vh,30px)}

@media(max-width:700px){
  .bigline{margin-bottom:clamp(18px,3vh,34px)}
  .bigline span{font-size:clamp(1.7rem,9vw,2.6rem)}
}

/* ── low-level motion elsewhere ── */
.head{position:relative}
.head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--e)}
.head.in::after{transform:scaleX(1)}

.svc{will-change:auto}
.svc .n{display:inline-block;transition:transform .5s var(--e)}
.svc:hover .n{transform:translateX(4px)}

@media(prefers-reduced-motion:reduce){
  .bigline span{animation:none!important;opacity:1;transform:none}
  .bigline.go span::after{animation:none;transform:scaleX(1)}
  .head::after{transition:none;transform:scaleX(1)}
}

/* ══════════════════════════════════════════════
   ENQUIRY FORM
   Netlify Forms handles the POST and the file
   uploads — no backend code, no API key. Wire the
   email recipients in the Netlify dashboard.
   ══════════════════════════════════════════════ */
.ct{align-items:start}
.ct-side{display:flex;flex-direction:column;gap:clamp(22px,3vw,36px)}

.enq{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,20px)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.f2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,18px)}
.fld{display:flex;flex-direction:column;gap:8px}
.fld>span{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute-2)}
.fld>span em{font-style:normal;color:var(--mute-2);opacity:.7;text-transform:none;letter-spacing:.06em}
.fld input,.fld select,.fld textarea{
  background:transparent;border:none;border-bottom:1px solid var(--line);
  color:var(--ink);font-family:var(--body);font-size:.98rem;padding:11px 2px;
  transition:border-color .35s var(--e)}
.fld textarea{resize:vertical;min-height:110px;line-height:1.65}
.fld select{cursor:pointer}
.fld select option{background:var(--bg-2);color:var(--ink)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-bottom-color:var(--orange)}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-bottom-color:rgba(242,240,236,.32)}

/* file input: replace the browser control with the same rule-line treatment */
.fld.file input[type=file]{border:none;padding:10px 0 0;font-size:.86rem;color:var(--mute)}
.fld.file input[type=file]::file-selector-button{
  background:transparent;border:1px solid var(--line);color:var(--ink);
  font-family:var(--body);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  padding:10px 16px;margin-right:14px;cursor:pointer;transition:border-color .3s,color .3s,background .3s}
.fld.file input[type=file]::file-selector-button:hover{
  border-color:var(--orange);color:var(--orange)}
.filehint{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2)}
.filehint.over{color:#E4713C}

.send{margin-top:clamp(8px,1.2vw,14px);align-self:flex-start;cursor:pointer;
  background:var(--orange);color:#0A0A0B;border:none;
  font-family:var(--body);font-weight:600;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;padding:16px 34px;
  transition:background .3s var(--e),transform .3s var(--e)}
.send:hover{background:var(--orange-lt);transform:translateY(-2px)}
.send:active{transform:none}
.fnote{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2)}

@media(max-width:860px){ .f2{grid-template-columns:1fr} }

/* ── ABOUT page: headshot + paragraph hero ──── */
.ab-hero{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(30px,5vw,70px);
  align-items:center;margin-top:clamp(30px,5vh,60px)}
.ab-shot{position:relative;aspect-ratio:4/5;background:var(--bg-2);
  border:1px solid var(--line);overflow:hidden}
.ab-shot img{width:100%;height:100%;object-fit:cover;display:block}
.ab-shot.missing .ab-placeholder{display:flex}
.ab-placeholder{display:none;position:absolute;inset:0;
  flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:var(--mute-2);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  background:repeating-linear-gradient(45deg,#0d0d0e 0 12px,#101011 12px 24px)}
.ab-placeholder .k{color:var(--orange)}
.ab-placeholder .t{font-family:var(--body);text-transform:none;letter-spacing:.06em;font-size:11px;opacity:.6}
.ab-copy .lead{font-family:var(--disp);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.4rem,3vw,2.4rem);line-height:1.1;color:var(--orange);
  margin-bottom:clamp(20px,3vw,32px)}
.ab-para p{font-size:clamp(.98rem,1.3vw,1.08rem);line-height:1.85;color:var(--mute);
  margin-bottom:clamp(14px,2vw,20px)}
.ab-para p:last-child{margin-bottom:0}
@media(max-width:900px){.ab-hero{grid-template-columns:1fr}}

/* ── ABOUT page: two-column services (IDB style) ── */
.svc-split{display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(30px,5vw,80px);
  margin-top:clamp(30px,4vw,50px);align-items:start}
.svc-list{display:flex;flex-direction:column}
.svc-item{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.4vw,28px);
  padding:clamp(22px,3vw,32px) 0;border-bottom:1px solid var(--line);align-items:start}
.svc-item:first-child{padding-top:0}
.svc-item:last-child{border-bottom:none}
.svc-ico{display:inline-flex;align-items:center;justify-content:center;
  width:clamp(44px,4vw,54px);height:clamp(44px,4vw,54px);color:var(--orange);
  border:1px solid var(--line);border-radius:2px;flex-shrink:0;
  transition:border-color .4s var(--e),background .4s var(--e)}
.svc-ico svg{width:60%;height:60%}
.svc-item:hover .svc-ico{border-color:var(--orange);background:rgba(255,139,54,.08)}
.svc-item h3{font-family:var(--disp);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.1;color:var(--ink);
  margin-bottom:10px}
.svc-item p{font-size:clamp(.92rem,1.2vw,1rem);line-height:1.75;color:var(--mute);margin:0}
.svc-shot{position:sticky;top:calc(var(--nav-h) + 30px);aspect-ratio:4/5;
  overflow:hidden;background:var(--bg-2);border:1px solid var(--line)}
.svc-shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--e)}
.svc-shot:hover img{transform:scale(1.04)}
@media(max-width:900px){
  .svc-split{grid-template-columns:1fr}
  .svc-shot{position:static;aspect-ratio:16/10;order:-1}
}

/* ── latest posts (orange band, clean poster cards) ── */
.posts{background:var(--orange);padding:clamp(56px,9vh,120px) var(--pad)}
.posts .head{border-bottom-color:rgba(10,10,10,.22)}
.posts .head h2,.posts .head .ix{color:#0A0A0B}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.6vw,40px);margin-top:clamp(26px,4vw,52px)}
.pcard{display:flex;flex-direction:column;background:transparent;
  transition:transform .5s var(--e)}
.pcard:hover{transform:translateY(-4px)}
.ptile{position:relative;aspect-ratio:9/13;overflow:hidden;
  background:#0A0A0B;border-radius:2px;box-shadow:0 12px 32px rgba(0,0,0,.25)}
.ptile img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s var(--e),filter .5s var(--e);filter:brightness(.92)}
.pcard:hover .ptile img{transform:scale(1.04);filter:brightness(1)}
.ptile .play{position:absolute;top:50%;left:50%;width:clamp(56px,7vw,80px);
  height:clamp(56px,7vw,80px);transform:translate(-50%,-50%);
  transition:transform .4s var(--e);pointer-events:none}
.pcard:hover .ptile .play{transform:translate(-50%,-50%) scale(1.08)}
.ptile .play svg{width:100%;height:100%;display:block}
.pmeta{padding:16px 4px 0}
.pmeta h3{font-family:var(--disp);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.05rem,1.6vw,1.35rem);color:#0A0A0B;line-height:1.1}
.pmeta .view{display:inline-block;margin-top:10px;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:#0A0A0B;padding-bottom:5px;
  border-bottom:1.5px solid #0A0A0B}
.pfoot{margin-top:clamp(28px,3.4vw,42px);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;text-align:center}
.pfoot a{color:#0A0A0B;border-bottom:1.5px solid #0A0A0B;padding-bottom:4px}

/* ── contact form: orange accent panel (stands out, keeps dark theme) ── */
.enq{background:linear-gradient(180deg,rgba(255,139,54,.06),rgba(255,139,54,.02));
  border:1px solid rgba(255,139,54,.28);border-top:3px solid var(--orange);
  padding:clamp(24px,3vw,42px);
  box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,139,54,.08) inset}
.enq .fld>span{color:var(--orange);opacity:.85}
.enq .fld input,.enq .fld select,.enq .fld textarea{
  background:rgba(255,139,54,.04);border-bottom-color:rgba(255,139,54,.25);
  padding:12px 4px}
.enq .fld input:hover,.enq .fld select:hover,.enq .fld textarea:hover{
  border-bottom-color:rgba(255,139,54,.5)}
.enq .fld input:focus,.enq .fld select:focus,.enq .fld textarea:focus{
  border-bottom-color:var(--orange);background:rgba(255,139,54,.08)}
.enq .send{background:var(--orange);color:#0A0A0B;font-weight:600;
  padding:18px 42px;font-size:11px;letter-spacing:.26em;
  box-shadow:0 8px 24px rgba(255,139,54,.22)}
.enq .send:hover{background:var(--orange-lt);box-shadow:0 12px 32px rgba(255,139,54,.32)}

/* ── mobile: latest posts (vertical stack, keeps desktop intact) ── */
@media(max-width:900px){
  .pgrid{grid-template-columns:1fr;gap:26px}
  .ptile{aspect-ratio:9/12}
  .pmeta{padding:14px 2px 0;text-align:center}
  .posts{padding:clamp(46px,7vh,80px) var(--pad)}
  .posts .head{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ══════════════════════════════════════════════
   LOADER — the mark fills from the bottom up
   The fill is a solid block clipped to the logo's
   own alpha via mask-image, so it fills the letter
   shapes rather than a rectangle behind them.
   ══════════════════════════════════════════════ */
#pre{position:fixed;inset:0;z-index:900;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;
  transition:opacity .7s var(--e),visibility .7s var(--e)}
#pre.done{opacity:0;visibility:hidden}
body.loading{overflow:hidden}

.pre-mark{position:relative;width:clamp(180px,26vw,300px);aspect-ratio:800/402}
.pre-ghost{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:.13;filter:grayscale(1)}
.pre-fill{position:absolute;inset:0;
  -webkit-mask-image:url("logo-800.png"); mask-image:url("logo-800.png");
  -webkit-mask-size:contain;            mask-size:contain;
  -webkit-mask-repeat:no-repeat;        mask-repeat:no-repeat;
  -webkit-mask-position:center;         mask-position:center}
.pre-fill i{position:absolute;left:0;right:0;bottom:0;display:block;
  height:var(--p,0%);
  background:linear-gradient(180deg,var(--orange-lt),var(--orange));
  transition:height .55s cubic-bezier(.22,.85,.3,1)}

.pre-meta{display:flex;align-items:baseline;gap:2px;
  font-family:var(--body);font-size:11px;font-weight:600;
  letter-spacing:.3em;color:var(--mute-2)}
.pre-meta em{font-style:normal;opacity:.6}

@media(prefers-reduced-motion:reduce){
  .pre-fill i{transition:none}
  #pre{transition:opacity .2s}
}

/* ── 404 ──────────────────────────────────────────── */
.nf{max-width:800px}
.nf-code{display:block;font-family:var(--body);font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--orange);margin-bottom:clamp(18px,2.4vw,28px)}
.nf h1{font-family:var(--disp);font-weight:600;text-transform:uppercase;
  font-size:clamp(2.2rem,7vw,5rem);line-height:.98;color:var(--orange)}
.nf p{margin-top:clamp(18px,2.4vw,28px);font-size:clamp(.98rem,1.3vw,1.12rem);
  line-height:1.8;color:var(--mute);max-width:52ch}
.nf-links{display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,34px);margin-top:clamp(28px,4vw,48px)}
.nf-links a{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);
  padding-bottom:6px;border-bottom:1px solid var(--line);transition:color .3s,border-color .3s}
.nf-links a:hover{color:var(--orange);border-color:var(--orange)}

/* ── credibility strip ────────────────────────────── */
.sec.cred{padding-top:0}
.credrow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,34px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(24px,3.4vw,44px) 0}
.cr .v{display:block;font-family:var(--disp);font-weight:600;
  font-size:clamp(1.6rem,3.6vw,2.8rem);line-height:1;color:var(--orange)}
.cr .k{display:block;margin-top:9px;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute-2);line-height:1.6}
.credline{margin-top:clamp(16px,2vw,24px);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute-2)}
.credline [data-needs]{color:#7A6650;border-bottom:1px dotted #7A6650}
@media(max-width:760px){ .credrow{grid-template-columns:repeat(2,1fr)} }

/* ══════════════════════════════════════════════
   MOBILE POLISH PASS — Aug 2026
   Tighter tap targets, better filter spacing,
   full-width send button, project cards taller
   on phone so photos still command attention.
   Desktop layout is completely untouched.
   ══════════════════════════════════════════════ */
@media(max-width:640px){
  /* filter buttons: tighter gap, bigger tap area */
  .filters{gap:22px;flex-wrap:wrap;justify-content:center;padding:0 8px}
  .filters button{font-size:12px;padding:8px 4px;letter-spacing:.14em;min-height:44px}

  /* hero copy: tighten padding so it fits without stretch */
  .hero{padding:calc(var(--nav-h) + 40px) 20px 100px}
  .hero p{font-size:.95rem;line-height:1.75}

  /* projects: give phone-user real thumbnails, not stubs */
  .work{padding:0 20px 60px}
  .grid{grid-template-columns:1fr;gap:14px}
  .card.tall{grid-row:auto}
  /* keep each card's own --ar so phone photos match desktop framing */
  .card .im{aspect-ratio:var(--ar,1.3333)}
  .card .meta{padding:20px 18px}
  .card h3{font-size:1.35rem}
  /* phone has no hover — show the arrow by default */
  .card .go{opacity:1;transform:none;color:var(--orange)}
  .card .sub{font-size:9.5px}

  /* contact: full-width send button (much easier to tap) */
  .enq{padding:22px 20px}
  .enq .send{width:100%;padding:20px 24px;font-size:11px}

  /* about page: bigger heading impact even on phone */
  .ab-copy .lead{font-size:1.5rem;margin-bottom:18px}
  .ab-para p{font-size:.98rem;line-height:1.75}

  /* services (about page): icon + text stack neatly */
  .svc-item{gap:16px;padding:22px 0}
  .svc-item h3{font-size:1.2rem}
  .svc-item p{font-size:.92rem}

  /* posts (index): title + label wrap on their own */
  .posts .head{flex-direction:column;align-items:flex-start;gap:6px;padding-bottom:14px}
  .pcard{margin:0 auto;max-width:340px;width:100%}
  .pmeta h3{font-size:1.2rem}

  /* reviews belt: readable on narrow */
  .rcard{width:78vw;max-width:320px}

  /* project gallery: no double padding */
  .gal{gap:14px}

  /* sections: tighten vertical rhythm */
  .sec{padding:60px 20px}
  .sec.pagetop{padding-top:calc(var(--nav-h) + 30px)}

  /* footer stacks on very small screens already; make sure text wraps */
  footer{flex-direction:column;gap:6px;text-align:center;padding:26px 20px}

  /* credibility row: 2x2 on phone, not squashed 1x4 */
  .credrow{grid-template-columns:repeat(2,1fr);gap:18px}
  .cr .v{font-size:2rem}
}

/* very small phones (≤380px, older iPhone SE etc) */
@media(max-width:380px){
  .hero h1{font-size:clamp(2.6rem,14vw,3.4rem)}
  .filters{gap:14px}
  .filters button{font-size:11px}
}

/* ── empty-filter placeholder + coming-soon strip on home ── */
.nores{text-align:center;max-width:520px;margin:clamp(50px,10vh,110px) auto;
  padding:clamp(28px,4vw,42px) clamp(22px,3vw,32px);
  border:1px solid var(--line);color:var(--mute);
  font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.nores a{color:var(--orange);border-bottom:1px solid var(--orange);padding-bottom:2px}
.nores[hidden]{display:none}

/* ══════════════════════════════════════════════
   CONTACT PAGE — WHITE PANELS
   Kurt asked for the form / map / info panels to
   stand out from the dark page. All three panels
   flip to white while the rest of the page stays
   the black luxury ground.
   ══════════════════════════════════════════════ */
#contact .enq{background:#fff;border:1px solid #E5E1D9;border-top:3px solid var(--orange);
  padding:clamp(26px,3.4vw,44px);box-shadow:0 24px 60px rgba(0,0,0,.55)}
#contact .enq .fld>span{color:#0A0A0B;opacity:.78;font-weight:600}
#contact .enq .fld input,
#contact .enq .fld select,
#contact .enq .fld textarea{
  background:#fff;border:1.5px solid #B8B4AC;color:#0A0A0B;
  padding:14px 14px;border-radius:2px;font-size:16px}
#contact .enq .fld input::placeholder,
#contact .enq .fld textarea::placeholder{color:#8E8E92}
#contact .enq .fld input:hover,
#contact .enq .fld select:hover,
#contact .enq .fld textarea:hover{border-color:#0A0A0B}
#contact .enq .fld input:focus,
#contact .enq .fld select:focus,
#contact .enq .fld textarea:focus{
  border-color:var(--orange);background:#fff;
  box-shadow:0 0 0 3px rgba(255,139,54,.18)}
#contact .enq .fld select option{background:#fff;color:#0A0A0B}
#contact .enq .fld.file input[type=file]{background:transparent;border:none;color:#0A0A0B;padding:10px 0 0}
#contact .enq .fld.file input[type=file]::file-selector-button{
  background:transparent;border:1px solid #0A0A0B;color:#0A0A0B}
#contact .enq .fld.file input[type=file]::file-selector-button:hover{
  border-color:var(--orange);color:var(--orange)}
#contact .enq .filehint{color:#6A6A6E}
#contact .enq .send{background:var(--orange);color:#0A0A0B;
  padding:18px 42px;font-size:11px;letter-spacing:.26em;
  box-shadow:0 8px 22px rgba(255,139,54,.28);width:100%}
#contact .enq .send:hover{background:var(--orange-lt);box-shadow:0 12px 32px rgba(255,139,54,.36)}
#contact .enq .fnote{color:#6A6A6E}

/* Contact side panel (phone/email/etc) — white */
#contact .ct-side .rows{background:#fff;border:1px solid #E5E1D9;
  padding:clamp(20px,2.4vw,30px);box-shadow:0 20px 50px rgba(0,0,0,.45);border-top:none}
#contact .ct-side .row{color:#0A0A0B;border-bottom-color:#E5E1D9;padding:14px 0}
#contact .ct-side .row:last-child{border-bottom:none}
#contact .ct-side .row .k{color:#6A6A6E}
#contact .ct-side .row a{color:#0A0A0B}
#contact .ct-side .row a:hover{color:var(--orange)}

/* Map panel — flip the leaflet tiles from dark to light */
#contact .map{background:#fff;border:1px solid #E5E1D9;padding:0;
  box-shadow:0 20px 50px rgba(0,0,0,.45);overflow:hidden}
#contact #svcmap{filter:none}
#contact .map-legend{background:#fff;color:#0A0A0B;border-top:1px solid #E5E1D9}
#contact .map-legend .ring-key{background:var(--orange)}
#contact .map-lock{background:#0A0A0B;color:#fff}
#contact .leaflet-container{background:#fff}
#contact .leaflet-control-zoom a{background:rgba(255,255,255,.94)!important;color:#0A0A0B!important;border:1px solid #D9D6D0!important}
#contact .leaflet-control-zoom a:hover{background:var(--orange)!important;color:#fff!important}
#contact .leaflet-control-attribution{background:rgba(255,255,255,.9)!important;color:#6A6A6E!important}
#contact .leaflet-control-attribution a{color:#0A0A0B!important}
#contact .leaflet-popup-content-wrapper,#contact .leaflet-popup-tip{background:#fff;color:#0A0A0B;border:1px solid #D9D6D0}
#contact .leaflet-popup-content b{color:var(--orange)}

/* ── Contact mobile polish (phones only) ── */
@media(max-width:640px){
  /* Head: stack label under heading so it doesn't crowd */
  #contact .head{flex-direction:column;align-items:flex-start;gap:6px;border-bottom:1px solid rgba(242,240,236,.14);padding-bottom:20px}

  /* Form panel breathing room */
  #contact .enq{padding:22px 18px}
  #contact .enq .fld>span{font-size:10.5px;letter-spacing:.16em}
  #contact .enq .fld input,
  #contact .enq .fld select,
  #contact .enq .fld textarea{padding:14px 12px;font-size:16px}

  /* File input row — keep the button and text on one clear line */
  #contact .enq .fld.file input[type=file]{font-size:12px;padding:8px 0 0}
  #contact .enq .fld.file input[type=file]::file-selector-button{
    padding:10px 14px;margin-right:10px;font-size:9.5px}
  #contact .enq .filehint{font-size:9.5px;letter-spacing:.12em;line-height:1.6;margin-top:4px}

  /* Send: bigger tap target + no oversized glow that reads as overflow */
  #contact .enq .send{padding:20px 20px;font-size:12px;letter-spacing:.2em;
    box-shadow:0 6px 18px rgba(255,139,54,.22)}

  /* Side panels: less padding, better line spacing */
  #contact .ct-side{gap:18px}
  #contact .ct-side .rows{padding:16px 18px}
  #contact .ct-side .row{padding:12px 0;font-size:.9rem}
  #contact .ct-side .row .k{font-size:9.5px;letter-spacing:.16em}
  #contact .map{min-height:280px}
}