/* ============================================================
   TNTimperi Oy — shared stylesheet for interior pages
   (Toteutetut kohteet / Meistä / Yhteystiedot)
   Mirrors the design tokens, components and layout patterns
   defined inline in index.html so every page reads as one site.
   ============================================================ */

/* ============ TOKENS ============ */
:root{
  --bg:        #0c0b09;
  --bg-alt:    #17140f;
  --bg-card:   #1d1912;
  --ink:       #f4efe4;
  --ink-dim:   #a89d8b;
  --ink-faint: #6b6255;
  --orange:    #f2b705;
  --orange-deep:#c99000;
  --concrete:  #322d24;
  --concrete-l:#463f31;
  --yellow:    #f2b705;
  --safe:      #2c2721;

  --display: 'Anton', 'Arial Narrow', Arial, sans-serif;
  --body:    'Work Sans', sans-serif;
  --mono:    'Space Mono', monospace;
  --btn-font:'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;

  --container: 1240px;
  --edge: clamp(24px, 5vw, 72px);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(10,9,7,.72), rgba(10,9,7,.72)),
    url("../assets/hardwood-bg.jpg");
  background-repeat:no-repeat, no-repeat;
  background-size:cover, cover;
  background-position:center top, center top;
  background-attachment:fixed, fixed;
  color:var(--ink);
  font-family:var(--body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* mobile stand-in for body's fixed background — see .bg-fixed rule below */
.bg-fixed{ display:none; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }

::selection{ background:var(--orange); color:#0c0b09; }

/* subtle grain texture over whole page */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:999;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--orange);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background:var(--orange);
  display:inline-block;
}

h1,h2,h3{
  font-family:var(--display);
  text-transform:uppercase;
  line-height:1.08;
  letter-spacing:.01em;
  font-weight:400;
}

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--edge);
  padding-right:var(--edge);
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--orange);
  color:#0c0b09;
  font-family:var(--btn-font);
  font-weight:700;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:16px 26px;
  border:none;
  position:relative;
  overflow:hidden;
  transition:color .35s ease;
}
.btn::before{
  content:"";
  position:absolute; inset:0;
  background:var(--ink);
  transform:translateX(-101%);
  transition:transform .35s cubic-bezier(.65,0,.35,1);
  z-index:0;
}
.btn span, .btn svg{ position:relative; z-index:1; }
.btn:hover::before{ transform:translateX(0); }
.btn svg{ transition:transform .35s ease; }
.btn:hover svg{ transform:translate(3px,-3px); }

.btn-outline{
  background:transparent;
  border:1px solid var(--concrete-l);
  color:var(--ink);
}
.btn-outline::before{ background:var(--orange); }
.btn-outline:hover{ border-color:var(--orange); color:#0c0b09; }

/* ============ STAMP (signature element) ============ */
.stamp{
  width:120px; height:120px;
  border-radius:50%;
  border:1.5px dashed var(--ink-dim);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  flex-shrink:0;
}
.stamp .stamp-spin{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.stamp .core{
  font-family:var(--display);
  font-size:22px;
  color:var(--orange);
  letter-spacing:.02em;
}
.stamp textPath{
  font-family:var(--mono);
  font-size:8.4px;
  letter-spacing:4.87px;
  fill:var(--ink-dim);
  text-transform:uppercase;
}

/* ============ NAV ============ */
header{
  position:fixed; top:0; left:0; right:0;
  z-index:200;
  padding:22px 0;
  transition:padding .35s ease;
  background:rgba(12,11,9,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--concrete);
}
header.scrolled{
  padding:14px 0;
}
/* backdrop-filter creates a containing block for position:fixed descendants —
   drop it while the mobile menu is open so the full-screen panel isn't
   trapped inside header's own (tiny) box instead of the real viewport. */
header.nav-open{ backdrop-filter:none; }
nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
}
.logo{ display:flex; align-items:center; }
.logo .logo-mark{
  display:block;
  height:60px;
  width:auto;
}
.nav-links{
  display:flex; gap:38px;
}
.nav-links a{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-dim);
  position:relative;
  padding-bottom:6px;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:2px;
  background:var(--orange);
  transition:width .3s ease;
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ width:100%; }
.nav-links a.active{ color:var(--orange); }
.nav-links a.active::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:24px; }
.nav-phone{
  font-family:var(--mono); font-size:12.5px; color:var(--ink-dim);
  display:flex; align-items:center; gap:8px;
}
.burger{ display:none; }
.mobile-nav-brand{ display:none; }
.mobile-nav-belt{ display:none; }
body.nav-open{ overflow:hidden; }

/* ============ HAZARD BELT (section divider) ============ */
.section-belt{
  height:9px;
  width:100%;
  overflow:hidden;
  background-image:repeating-linear-gradient(135deg,
    var(--orange) 0px, var(--orange) 16px,
    #0c0b09 16px, #0c0b09 32px);
  background-size:200% 100%;
  animation:hazardScroll 2.6s linear infinite;
}
@keyframes hazardScroll{
  from{ background-position:0 0; }
  to{ background-position:-45.25px 0; }
}

/* ============ IMAGE PLACEHOLDER SLOTS ============ */
.img-slot{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  background:
    linear-gradient(160deg, var(--concrete) 0%, var(--bg-card) 65%),
    repeating-linear-gradient(45deg, rgba(242,183,5,.06) 0px, rgba(242,183,5,.06) 2px, transparent 2px, transparent 14px);
  border:1.5px dashed var(--concrete-l);
  color:var(--ink-faint);
  overflow:hidden;
}
/* slots/cards filled with a real photo — same box, real image on top */
.img-slot.has-photo, .ph-card.has-photo{ border-style:solid; }
.img-slot.has-photo img, .ph-card.has-photo img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}

/* ============ PAGE HERO (interior page banner) ============ */
.page-hero{
  position:relative;
  min-height:52vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  padding-top:140px;
}
.page-hero-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(180deg, rgba(12,11,9,.6) 0%, rgba(12,11,9,.4) 40%, rgba(12,11,9,.95) 100%),
    url("../assets/hardwood-bg.jpg"),
    repeating-linear-gradient(115deg, #201b12 0px, #201b12 2px, #17130d 2px, #17130d 4px);
  background-size:auto, cover, auto;
  background-position:center, center, center;
  background-repeat:repeat, no-repeat, repeat;
  z-index:0;
}
.page-hero-bg .grid-lines{
  position:absolute; inset:0;
  background-image:
    linear-gradient(90deg, rgba(244,239,228,.035) 1px, transparent 1px),
    linear-gradient(rgba(244,239,228,.035) 1px, transparent 1px);
  background-size:64px 64px;
}
.page-hero .wrap{
  position:relative; z-index:2; width:100%; padding-bottom:60px;
}
.page-hero h1{ font-size:clamp(42px,6.2vw,80px); color:var(--ink); max-width:820px; margin-top:20px; }
.page-hero h1 .accent{ color:var(--orange); }
.page-hero p{ margin-top:22px; max-width:480px; color:var(--ink-dim); font-size:16px; line-height:1.55; }

/* ============ SECTION SHELL ============ */
section{ position:relative; padding:120px 0; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:56px; gap:40px; flex-wrap:wrap;
}
.section-head h2{ font-size:clamp(32px,4vw,52px); margin-top:14px; max-width:600px; }
.section-head p{ max-width:340px; color:var(--ink-dim); font-size:15px; line-height:1.6; padding-bottom:6px; }

/* ============ SERVICES (accordion list) ============ */
.services{ background:var(--bg-alt); }
/* On Meistä, #palvelut-lyhyesti (services) is immediately followed by
   .why — same background, no section-belt between them, so the two
   default 120px section paddings stack into one flat 240px gap with
   nothing to break it up. Tighten just this pairing (scoped by id so
   index.html's #palvelut, which isn't adjacent to .why, is unaffected). */
#palvelut-lyhyesti{ padding-bottom:64px; }
#palvelut-lyhyesti + .why{ padding-top:64px; }
.service-row{
  border-top:1px solid var(--concrete);
  display:grid;
  grid-template-columns:70px 56px 1.1fr 1.4fr auto;
  align-items:center;
  gap:32px;
  padding:30px 0;
  cursor:pointer;
  position:relative;
  transition:padding .4s ease;
}
.service-thumb{ width:56px; height:56px; border-radius:4px; }
.service-row:last-child{ border-bottom:1px solid var(--concrete); }
.service-idx{
  font-family:var(--mono); font-size:13px; color:var(--ink-faint);
}
.service-name{
  font-family:var(--display); font-size:clamp(24px,2.6vw,36px);
  display:flex; align-items:center; gap:16px;
  transition:color .3s ease, transform .4s ease;
}
.service-desc{
  color:var(--ink-dim); font-size:14.5px; line-height:1.6;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .45s ease, opacity .4s ease, margin .4s ease;
}
.service-stats{
  display:flex; gap:28px;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .45s ease, opacity .4s ease;
}
.service-stats .st{ display:flex; flex-direction:column; }
.service-stats .st b{ font-family:var(--display); font-size:20px; color:var(--orange); }
.service-stats .st small{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; color:var(--ink-faint); text-transform:uppercase; }
.service-arrow{
  width:44px; height:44px; border:1px solid var(--concrete-l); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s ease, border-color .3s ease, transform .4s ease;
  flex-shrink:0;
}
.service-row.open .service-arrow{ background:var(--orange); border-color:var(--orange); transform:rotate(135deg); }
.service-row.open .service-desc, .service-row.open .service-stats{ max-height:120px; opacity:1; margin-top:10px; }
.service-row.open{ padding-bottom:34px; }
.service-row:hover .service-name{ color:var(--orange); transform:translateX(8px); }
.service-row.open .service-name{ color:var(--orange); }

.flex-note{
  margin-top:44px;
  display:flex; align-items:center; gap:28px;
  padding:34px 38px;
  background:var(--bg);
  border:1px solid var(--concrete);
  border-left:4px solid var(--orange);
  border-radius:2px;
}
.flex-note-icon{
  width:52px; height:52px; flex-shrink:0;
  border-radius:50%;
  background:var(--orange);
  display:flex; align-items:center; justify-content:center;
}
.flex-note-icon svg{ width:24px; height:24px; stroke:#0c0b09; }
.flex-note h3{
  font-family:var(--display); font-size:clamp(20px,2.2vw,28px);
  color:var(--ink); margin-bottom:6px; letter-spacing:.01em;
}
.flex-note p{
  color:var(--ink-dim); font-size:14.5px; line-height:1.6; max-width:640px;
}
.flex-note p b{ color:var(--orange); font-weight:600; }
@media (max-width:640px){
  .flex-note{ flex-direction:column; align-items:flex-start; gap:16px; padding:28px; }
}

/* ============ STATS BAND ============ */
.statsband{
  padding:90px 0;
  border-top:1px solid var(--concrete);
  border-bottom:1px solid var(--concrete);
}
.statsband .wrap{
  display:grid; grid-template-columns:repeat(3,1fr); gap:40px;
}
.statitem{ text-align:left; border-left:1px solid var(--concrete); padding-left:28px; }
.statitem .num{
  font-family:var(--display);
  font-size:clamp(48px,5.2vw,72px);
  color:var(--ink);
  display:flex; align-items:baseline; gap:4px;
}
.statitem .num .accent{ color:var(--orange); }
.statitem .lbl{
  margin-top:10px; font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-dim);
}

/* ============ WHY / STAMP SECTION ============ */
.why{ background:var(--bg-alt); }
.why .wrap{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center;
}
.why-heading{ font-size:clamp(34px,4.4vw,58px); }
.why-heading .thin{ color:var(--ink-dim); font-family:var(--body); text-transform:none; font-weight:500; font-size:.4em; display:block; margin-top:10px; letter-spacing:0; }
.why-list{ display:flex; flex-direction:column; }
.why-list li{
  display:flex; align-items:center; gap:18px;
  padding:26px 0; border-top:1px solid var(--concrete);
}
.why-list li:last-child{ border-bottom:1px solid var(--concrete); }
.why-check{
  width:30px; height:30px; border:1px solid var(--orange); border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  color:var(--orange);
}
.why-list p{ font-size:16px; color:var(--ink); }
.why-card{
  background:var(--bg-card);
  border:1px solid var(--concrete-l);
  padding:44px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px;
}
.why-card .stamp{ width:150px; height:150px; }
.why-card .stamp .core{ font-size:26px; }
.why-card p{ color:var(--ink-dim); font-size:14px; line-height:1.6; max-width:260px; }

/* ============ FEATURED PHOTO BENTO ============ */
.bento{ display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:130px; gap:18px; }
.bento .img-slot{ border-radius:2px; }
.bento .b-lg{ grid-column:span 2; grid-row:span 3; }
.bento .b-wide{ grid-column:span 2; grid-row:span 1; }
.bento .b-sm{ grid-column:span 1; grid-row:span 1; }
.bento .b-tall{ grid-column:span 1; grid-row:span 2; }

/* ============ MARQUEE PHOTO CARDS ============ */
.gallery{ padding-top:100px; padding-bottom:0; overflow:hidden; }
.gallery .wrap{ margin-bottom:56px; }
.marquee-track{
  display:flex; gap:20px;
  width:max-content;
}
.ph-card{
  width:340px; height:230px;
  flex-shrink:0;
  position:relative;
  background:
    linear-gradient(160deg, var(--concrete) 0%, var(--bg-card) 60%),
    repeating-linear-gradient(45deg, rgba(242,183,5,.06) 0px, rgba(242,183,5,.06) 2px, transparent 2px, transparent 14px);
  border:1px solid var(--concrete-l);
  overflow:hidden;
  display:flex; align-items:flex-end; padding:20px;
}
.ph-card .ph-tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim);
  background:rgba(12,11,9,.7); padding:6px 12px; backdrop-filter:blur(4px);
}
.marquee-row{ padding-bottom:40px; }
.marquee-row.reverse{ padding-top:0; }

/* static (non-scrolling) wrap of ph-cards, used to summarise services */
.ph-card-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.ph-card-grid .ph-card{ width:100%; height:auto; aspect-ratio:27/17; }
@media (max-width:900px){ .ph-card-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .ph-card-grid{ grid-template-columns:1fr; } }

/* ============ PROCESS / TIMELINE ============ */
.process{ background:var(--bg-alt); }
.process-list{ display:flex; flex-direction:column; }
.process-row{
  display:grid; grid-template-columns:100px 1fr 1fr; gap:32px;
  padding:34px 0; border-top:1px solid var(--concrete); align-items:start;
}
.process-row:last-child{ border-bottom:1px solid var(--concrete); }
.process-row .pnum{ font-family:var(--display); font-size:40px; color:var(--concrete-l); }
.process-row h3{ font-size:22px; }
.process-row p{ color:var(--ink-dim); font-size:14.5px; line-height:1.65; max-width:420px; }

/* ============ PROJECT GRID (toteutetut kohteet) ============ */
.project-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.project-card{
  background:var(--bg-card); border:1px solid var(--concrete-l);
  display:flex; flex-direction:column; overflow:hidden;
  transition:border-color .3s ease, transform .3s ease;
}
.project-card:hover{ border-color:var(--orange); transform:translateY(-4px); }
.project-card .img-slot{ aspect-ratio:4/3; border:none; border-bottom:1px solid var(--concrete-l); border-radius:0; }
.project-card-body{ padding:24px 26px 28px; display:flex; flex-direction:column; gap:10px; flex:1; }
.project-tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); }
.project-card h3{ font-size:19px; letter-spacing:.005em; }
.project-card p{ color:var(--ink-dim); font-size:14px; line-height:1.55; }
@media (max-width:900px){ .project-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .project-grid{ grid-template-columns:1fr; } }

/* ============ CONTACT ============ */
.contact-wrap{ display:flex; justify-content:center; }
.contact-info{ display:grid; grid-template-columns:repeat(2, 1fr); gap:28px; max-width:820px; width:100%; }
.contact-info-card{
  background:var(--bg-card); border:1px solid var(--concrete-l);
  padding:28px 30px; display:flex; align-items:flex-start; gap:18px;
  min-height:128px;
}
.contact-info-icon{
  width:46px; height:46px; border-radius:50%; background:var(--orange);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-info-icon svg{ stroke:#0c0b09; width:20px; height:20px; }
.contact-info-card h4{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:8px;
}
.contact-info-card a, .contact-info-card p{ color:var(--ink); font-size:16px; line-height:1.5; }
.contact-info-card a:hover{ color:var(--orange); }
@media (max-width:900px){ .contact-info{ grid-template-columns:1fr; } }

/* ============ STEPS (Yhteystiedot — what happens after you get in touch) ============ */
.steps{ background:var(--bg-alt); }
.steps-list{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
.step-card{
  background:var(--bg-card); border:1px solid var(--concrete-l);
  padding:32px 30px; display:flex; flex-direction:column; gap:6px;
}
.step-card .contact-info-icon{ margin-bottom:10px; }
.step-card h4{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--orange);
}
.step-card h3{ font-size:20px; }
.step-card p{ color:var(--ink-dim); font-size:14.5px; line-height:1.6; margin-top:4px; }
@media (max-width:900px){ .steps-list{ grid-template-columns:1fr; } }

/* ============ CTA BANNER ============ */
.cta-banner{
  background:var(--orange);
  color:#0c0b09;
  padding:100px 0;
  position:relative;
  overflow:hidden;
}
.cta-banner .wrap{
  display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap;
  position:relative; z-index:1;
}
.cta-banner h2{ font-size:clamp(34px,5vw,64px); color:#0c0b09; max-width:600px; }
.cta-banner .btn{ background:#0c0b09; color:var(--ink); }
.cta-banner .btn::before{ background:var(--ink); }
.cta-banner .btn:hover{ color:#0c0b09; }
.cta-marquee{
  position:absolute; top:50%; left:0; transform:translateY(-50%); white-space:nowrap;
  font-family:var(--display); font-size:180px; color:rgba(12,11,9,.06);
  line-height:1; user-select:none; pointer-events:none;
}

/* ============ FOOTER ============ */
footer{ padding:80px 0 30px; }
.footer-top{
  display:grid; grid-template-columns:1.4fr .8fr .8fr .8fr; gap:40px;
  padding-bottom:60px; border-bottom:1px solid var(--concrete);
}
.footer-brand .logo{ margin-bottom:18px; }
.footer-brand .logo .logo-mark{ height:72px; }
.footer-brand p{ color:var(--ink-dim); font-size:14px; max-width:280px; line-height:1.6; }
.footer-col h4{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:18px;
}
.footer-col a, .footer-col p{
  display:block; color:var(--ink-dim); font-size:14.5px; margin-bottom:12px;
  transition:color .25s ease;
}
.footer-col a:hover{ color:var(--orange); }
.footer-bottom{
  padding-top:26px; display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); letter-spacing:.05em;
  flex-wrap:wrap; gap:12px;
}

/* ============ REVEAL UTILS ============ */
.reveal{ opacity:0; transform:translateY(36px); }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  /* background-attachment:fixed is unreliable on mobile browsers (most
     notably iOS Safari) — it can crop/rescale/reposition the image
     inconsistently as the page scrolls. Swap it for a plain
     position:fixed layer instead, which mobile browsers handle
     reliably, giving the exact same pinned-texture look everywhere
     on the page (matching how the hero/page-hero sections, which use
     their own non-fixed per-element background, already render
     correctly). Desktop is untouched — body keeps its native
     background-attachment:fixed there. */
  body{ background-image:none; }
  .bg-fixed{
    display:block;
    position:fixed; inset:0; z-index:-1;
    background-color:var(--bg);
    background-image:
      linear-gradient(rgba(10,9,7,.72), rgba(10,9,7,.72)),
      url("../assets/hardwood-bg.jpg");
    background-repeat:no-repeat, no-repeat;
    background-size:cover, cover;
    background-position:center top, center top;
  }

  .nav-links, .nav-cta{ display:none; }
  .burger{
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    gap:5px; width:44px; height:44px; padding:0; border:none; background:none;
    position:relative; z-index:210; flex-shrink:0;
  }
  .burger span{
    display:block; width:22px; height:2px; background:var(--ink);
    transition:transform .3s ease, opacity .25s ease;
  }
  header.nav-open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  header.nav-open .burger span:nth-child(2){ opacity:0; }
  header.nav-open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  header.nav-open .mobile-nav-brand{
    display:flex; flex-direction:column; align-items:center; gap:7px;
    position:fixed; left:0; right:0; top:34px;
    z-index:152;
    pointer-events:none;
  }
  .mobile-nav-brand .logo-mark{
    display:block; height:64px; width:auto;
  }
  .mobile-nav-brand .tagline{
    font-family:var(--mono); font-size:9px; letter-spacing:.28em; color:var(--ink-dim); text-transform:uppercase;
  }

  header.nav-open .nav-links{
    display:flex; flex-direction:column; align-items:stretch; justify-content:center;
    position:fixed; inset:0;
    padding:106px 30px 168px;
    background:var(--bg);
    overflow-y:auto;
    z-index:150;
    counter-reset:navitem;
  }
  header.nav-open .nav-links li{ border-top:1px solid var(--concrete); }
  header.nav-open .nav-links li:last-child{ border-bottom:1px solid var(--concrete); }
  header.nav-open .nav-links a{
    counter-increment:navitem;
    display:flex; align-items:baseline; gap:16px;
    font-family:var(--display); font-size:25px; text-transform:uppercase;
    letter-spacing:.01em; padding:19px 2px 19px 14px;
    color:var(--ink);
    border-left:4px solid transparent;
    transition:color .25s ease, border-color .25s ease;
  }
  header.nav-open .nav-links a::before{
    content:counter(navitem, decimal-leading-zero);
    font-family:var(--mono); font-size:12px; letter-spacing:0; color:var(--ink-faint);
  }
  header.nav-open .nav-links a::after{ display:none; }
  header.nav-open .nav-links a.active{ color:var(--orange); border-left-color:var(--orange); }

  /* hazard-stripe divider — pinned to the viewport on its own, independent of
     nav-cta's box, so it can never drift with content/containing-block changes */
  header.nav-open .mobile-nav-belt{
    display:block;
    position:fixed; left:0; right:0; bottom:148px;
    height:6px;
    background-image:repeating-linear-gradient(135deg, var(--orange) 0px, var(--orange) 12px, #0c0b09 12px, #0c0b09 24px);
    z-index:151;
  }
  header.nav-open .nav-cta{
    display:flex; flex-direction:column; align-items:center; gap:18px;
    position:fixed; left:0; right:0; bottom:40px;
    z-index:151;
  }
  header.nav-open .nav-phone{ font-size:14px; letter-spacing:.1em; }

  .service-row{
    grid-template-columns:40px 1fr 44px;
    column-gap:14px;
  }
  .service-idx{ grid-column:1; grid-row:1; }
  .service-name{ grid-column:2; grid-row:1; }
  .service-arrow{ grid-column:3; grid-row:1; }
  .service-row > div{ grid-column:1 / -1; grid-row:2; min-width:0; }
  .service-thumb{ display:none; }
  .service-stats{ display:none; }
  .statsband .wrap{ grid-template-columns:1fr; gap:36px; }
  .why .wrap{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .process-row{ grid-template-columns:1fr; gap:10px; }
  .bento{ grid-template-columns:1fr 1fr; grid-auto-rows:110px; }
  .contact-info-card{ padding:22px; }
}

/* ---- phone-specific polish ---- */
@media (max-width:640px){
  section{ padding:64px 0; }
  .page-hero{ min-height:auto; padding-top:110px; }
  .page-hero .wrap{ padding-bottom:40px; }
  .page-hero h1{ font-size:clamp(34px,10vw,52px); }
  .page-hero p{ font-size:15px; }
  .section-head{ margin-bottom:32px; }
  .section-head h2{ font-size:clamp(28px,8vw,40px); }
  .statsband{ padding:48px 0; }
  .why-card{ padding:28px 22px; }
  .gallery{ padding-top:48px; }
  .process-row{ padding:24px 0; }
  .cta-banner{ padding:64px 0; }
  .cta-banner h2{ font-size:clamp(28px,9vw,44px); }
  .footer-top{ grid-template-columns:1fr; gap:32px; }
  footer{ padding:56px 0 24px; }
  .project-grid{ gap:20px; }
  .why-card .stamp{ width:120px; height:120px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}