/* ========================================================================
   Stahl-Form — desktop-first stylesheet
   Palette inherited from legacy site:
     ink        #222220   warm near-black
     ink-soft   #494944   body
     accent     #F39200   signature orange
     paper      #f6f6f4   light bg
     paper-2    #e8e8e2   alt light bg
     fog        #dfdfd8   borders
     white      #ffffff
   Typography: Lato 400 / 700 / 900 (self-hosted, GDPR-safe)
   ====================================================================== */

@font-face{font-family:'Lato';font-weight:400;font-style:normal;font-display:swap;
  src:url('/assets/fonts/lato-400.woff2') format('woff2')}
@font-face{font-family:'Lato';font-weight:400;font-style:italic;font-display:swap;
  src:url('/assets/fonts/lato-400-italic.woff2') format('woff2')}
@font-face{font-family:'Lato';font-weight:700;font-style:normal;font-display:swap;
  src:url('/assets/fonts/lato-700.woff2') format('woff2')}
@font-face{font-family:'Lato';font-weight:900;font-style:normal;font-display:swap;
  src:url('/assets/fonts/lato-900.woff2') format('woff2')}

:root{
  --ink:#222220;
  --ink-soft:#494944;
  --accent:#F39200;
  --accent-hover:#FC8801;
  --paper:#f6f6f4;
  --paper-2:#e8e8e2;
  --fog:#dfdfd8;
  --white:#ffffff;
  --shadow-sm: 0 1px 2px rgba(34,34,32,.06), 0 2px 6px rgba(34,34,32,.04);
  --shadow-md: 0 4px 12px rgba(34,34,32,.08), 0 12px 32px rgba(34,34,32,.10);
  --shadow-lg: 0 12px 28px rgba(34,34,32,.14), 0 24px 64px rgba(34,34,32,.18);
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --wrap: 1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font:400 17px/1.55 'Lato',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink-soft);
  background:var(--white);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--accent-hover)}
h1,h2,h3,h4{font-weight:900;color:var(--ink);line-height:1.08;letter-spacing:-.01em;margin:0 0 .4em}
h1{font-size:clamp(2.4rem,5.2vw,4.5rem)}
h2{font-size:clamp(1.9rem,3.6vw,3rem);margin-bottom:.5em}
h3{font-size:1.35rem;letter-spacing:-.005em}
p{margin:0 0 1em}
ul{padding-left:1.2em}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.75em 1.4em;border-radius:999px;
  font-weight:700;font-size:.95rem;letter-spacing:.01em;
  border:2px solid transparent;cursor:pointer;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:var(--accent);color:#fff;
  box-shadow:0 4px 12px rgba(243,146,0,.25), inset 0 -2px 0 rgba(0,0,0,.18);
}
.btn-primary:hover{
  background:var(--accent-hover);color:#fff;
  box-shadow:0 8px 20px rgba(243,146,0,.45), 0 0 32px rgba(243,146,0,.35), inset 0 -2px 0 rgba(0,0,0,.18);
}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}
.btn-lg{padding:.95em 1.7em;font-size:1.02rem}
.icon-phone{
  display:inline-block;width:14px;height:14px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24 11.36 11.36 0 0 0 3.57.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.49a1 1 0 0 1 1 1 11.36 11.36 0 0 0 .57 3.57 1 1 0 0 1-.24 1.02l-2.2 2.2z'/></svg>") no-repeat center / contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24 11.36 11.36 0 0 0 3.57.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.49a1 1 0 0 1 1 1 11.36 11.36 0 0 0 .57 3.57 1 1 0 0 1-.24 1.02l-2.2 2.2z'/></svg>") no-repeat center / contain;
}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:18px 0;
  background:linear-gradient(180deg,rgba(34,34,32,.55),rgba(34,34,32,0));
  transition:background .25s ease, padding .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled{
  background:rgba(255,255,255,.96);
  padding:10px 0;
  box-shadow:var(--shadow-sm);
}
/* backdrop-filter creates a containing block for position:fixed descendants,
   which traps the mobile .site-nav drawer inside the (tiny) header box.
   Apply the blur only when the drawer is NOT open, so opening the burger
   tears down the filter and lets the drawer slide across the full viewport. */
body:not(.nav-open) .site-header.is-scrolled{
  -webkit-backdrop-filter:saturate(180%) blur(8px);
          backdrop-filter:saturate(180%) blur(8px);
}
.header-inner{display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{
  filter:brightness(0) invert(1);
  transition:filter .25s ease;
}
.site-header.is-scrolled .brand img{filter:none}
.site-nav{flex:1 1 auto}
.site-nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;justify-content:flex-end}
.site-nav a{
  color:rgba(255,255,255,.92);font-weight:700;font-size:.95rem;
  padding:8px 2px;border-bottom:2px solid transparent;
}
.site-nav a:hover{color:#fff;border-bottom-color:var(--accent)}
.site-header.is-scrolled .site-nav a{color:var(--ink)}
.site-header.is-scrolled .site-nav a:hover{color:var(--accent)}
.header-cta{flex:0 0 auto}
.nav-toggle{
  display:none;background:none;border:0;width:44px;height:44px;
  cursor:pointer;padding:0;flex:0 0 auto;
  position:relative;z-index:120;
}
.nav-toggle span{
  display:block;position:absolute;left:10px;right:10px;height:2px;
  background:#fff;border-radius:2px;
  transition:transform .25s ease, top .25s ease, opacity .15s ease, background .2s ease;
}
.nav-toggle span:nth-child(1){top:14px}
.nav-toggle span:nth-child(2){top:21px}
.nav-toggle span:nth-child(3){top:28px}
.site-header.is-scrolled .nav-toggle span{background:var(--ink)}
body.nav-open .nav-toggle span{background:#fff}
body.nav-open .nav-toggle span:nth-child(1){top:21px;transform:rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){top:21px;transform:rotate(-45deg)}
.nav-backdrop{
  position:fixed;inset:0;
  background:rgba(10,10,10,.55);
  /* Must sit BELOW .site-header (z:100) so the drawer (which lives inside
     the header's stacking context as z:110) renders above this backdrop. */
  z-index:95;opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
body.nav-open .nav-backdrop{opacity:1;pointer-events:auto}

/* ---------- Hero (interactive lattice + bento + text split) ---------- */
.hero{
  position:relative;color:#fff;overflow:hidden;
  padding:160px 0 124px;
  background:
    radial-gradient(1200px 800px at 80% 30%, #2a2a26 0%, #1a1a18 55%, #131312 100%);
}
/* Subtle film-grain over the hero (paper-cone steel matte feel). */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:
    /* faint brushed metal striations */
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px),
    /* diagonal noise streaks */
    repeating-linear-gradient(108deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 5px);
  mix-blend-mode:overlay;opacity:.6;
}
.hero-grid-bg{
  position:absolute;inset:0;pointer-events:auto;
  overflow:hidden;
  -webkit-mask-image:radial-gradient(95% 75% at 50% 40%, #000 35%, #0000 92%);
          mask-image:radial-gradient(95% 75% at 50% 40%, #000 35%, #0000 92%);
}
.hero-grid-canvas{
  position:absolute;inset:0;display:block;
  width:100%;height:100%;
}
.hero-grid-bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 500px at 20% 80%, rgba(243,146,0,.10) 0%, transparent 70%);
}

/* Corner rivets — bolts pinning the hero onto the page. */
.hero-corners{position:absolute;inset:0;pointer-events:none;z-index:3}
.rivet{
  position:absolute;width:14px;height:14px;border-radius:50%;
  background:
    radial-gradient(circle at 30% 28%, #f4f1e8 0%, #b8b3a5 35%, #6a665b 65%, #2a2823 100%);
  box-shadow:
    inset 0 -1px 1px rgba(0,0,0,.55),
    inset 0 1px 1px rgba(255,255,255,.4),
    0 1px 2px rgba(0,0,0,.55);
}
.rivet::after{
  content:"";position:absolute;inset:4px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #d8d4c8 0%, #6e6a5f 70%, #2a2823 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
}
.rivet-tl{top:22px;left:22px}
.rivet-tr{top:22px;right:22px}
.rivet-bl{bottom:34px;left:22px}
.rivet-br{bottom:34px;right:22px}

/* I-beam strip pinned to hero bottom. */
.hero-ibeam{
  position:absolute;left:0;right:0;bottom:0;height:14px;width:100%;
  display:block;z-index:3;pointer-events:none;
  filter:drop-shadow(0 -1px 2px rgba(0,0,0,.6));
}

/* Eyebrow tick — small accent dash before the eyebrow text. */
.eyebrow-tick{
  display:inline-block;width:18px;height:2px;background:var(--accent);
  vertical-align:middle;margin-right:10px;
  box-shadow:0 0 12px rgba(243,146,0,.7);
}
.hero-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:center;
}
.hero-inner > *{position:relative}
.hero-text{max-width:640px}
.eyebrow{
  display:inline-block;
  font-weight:700;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);
  margin:0 0 18px;
}
.eyebrow-dark{color:var(--accent)}
.eyebrow-light{color:var(--accent)}
.hero h1{color:#fff;margin-bottom:.35em}
.hero .lead{
  font-size:clamp(1.05rem,1.4vw,1.25rem);
  max-width:560px;color:rgba(255,255,255,.86);font-weight:400;
}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0 42px}
.btn-outline{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.35);
}
.btn-outline:hover{background:rgba(255,255,255,.08);border-color:#fff;color:#fff}
.hero-usp{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px 32px;
  border-top:1px solid rgba(255,255,255,.14);padding-top:24px;
}
.hero-usp li{display:flex;flex-direction:column}
.hero-usp strong{color:var(--accent);font-weight:900;font-size:1.02rem;letter-spacing:.005em}
.hero-usp span{color:rgba(255,255,255,.72);font-size:.9rem;line-height:1.35}

/* Bento — asymmetric 2x2 collage that visually echoes stacked steel struts */
.hero-bento{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  grid-template-rows:1.2fr .8fr;
  gap:14px;
  height:540px;
  position:relative;
}
.bento-tile{
  margin:0;position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  background-size:cover;background-position:center;
  box-shadow:var(--shadow-lg);
  outline:1px solid rgba(255,255,255,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}
.bento-tile::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.62) 100%);
}
.bento-tile::after{
  content:"";position:absolute;left:14px;top:14px;width:28px;height:2px;
  background:var(--accent);transform-origin:left;transform:scaleX(.6);
  transition:transform .25s ease;
  box-shadow:0 0 14px rgba(243,146,0,.55);
}
.bento-tile:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(243,146,0,.35), 0 20px 40px rgba(243,146,0,.18);
}
.bento-tile:hover::after{transform:scaleX(1)}

.bento-tile figcaption{
  position:absolute;left:18px;right:18px;bottom:14px;
  color:#fff;font-weight:900;font-size:1.02rem;letter-spacing:-.005em;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.bento-1{grid-row:1 / span 2}
.bento-2{grid-column:2;grid-row:1}
.bento-3{grid-column:2;grid-row:2}
/* bento-4 hidden in 3-tile layout to give bento-1 its tall column */
.bento-4{display:none}

/* ---------- Section frames ---------- */
section{padding:96px 0;position:relative}
.section-light{background:var(--paper)}
.section-paper{background:var(--paper-2)}
.section-dark{
  background:var(--ink);color:rgba(255,255,255,.85);
  background-image:
    /* extremely subtle brushed-metal horizontal grain on dark sections */
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px);
}
.section-dark h2,.section-dark h3{color:#fff}
.h2-light{color:#fff}
.lead-dark{font-size:1.18rem;color:var(--ink-soft);max-width:780px}
.lead-light{font-size:1.18rem;color:rgba(255,255,255,.82);max-width:780px}

/* Welded H2 — small orange seam underneath every h2 inside content sections. */
section h2{position:relative;padding-bottom:.1em}
section h2::after{
  content:"";display:block;margin-top:18px;
  width:88px;height:3px;
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent) 60%, transparent 100%);
  box-shadow:0 0 8px rgba(243,146,0,.45);
  border-radius:2px;
}
/* "Weld bead" texture — repeating circles to evoke a stitched seam. */
section h2::before{
  content:"";position:absolute;left:0;bottom:-3px;width:88px;height:3px;
  background-image:radial-gradient(circle at 4px 50%, rgba(255,255,255,.35) 0 1px, transparent 1.5px);
  background-size:8px 100%;
  pointer-events:none;
}
.section-dark h2::after{
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent) 60%, transparent 100%);
  box-shadow:0 0 14px rgba(243,146,0,.65);
}

/* Rebar Divider — three orange bars stacked, separates sections with steel grit. */
.rebar-divider{
  position:absolute;left:0;right:0;height:14px;pointer-events:none;
  z-index:2;
}
.rebar-divider.top{top:0;transform:translateY(-50%)}
.rebar-divider.bottom{bottom:0;transform:translateY(50%)}
.rebar-divider::before,
.rebar-divider::after,
.rebar-divider > span{
  content:"";display:block;height:2px;background:var(--accent);
  margin:2px 0;opacity:.85;
  box-shadow:0 0 6px rgba(243,146,0,.35);
}
.rebar-divider > span{height:3px;opacity:1}
.rebar-divider::before{margin-left:0;margin-right:38%}
.rebar-divider::after{margin-left:22%;margin-right:0}

/* ---------- Two-column blocks ---------- */
.two-col{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start}
.col-text .bullets{list-style:none;padding:0;margin:1.2em 0 0}
.col-text .bullets li{
  position:relative;padding-left:30px;margin-bottom:.65em;
}
.col-text .bullets li::before{
  content:"";position:absolute;left:0;top:.55em;width:14px;height:2px;background:var(--accent);
}
.col-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stat-card{
  position:relative;
  background:#fff;border:1px solid var(--fog);border-radius:var(--r-md);
  padding:24px;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:6px;
  overflow:hidden;
}
/* Subtle brushed-metal grain on every stat card. */
.stat-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,
    rgba(34,34,32,0) 0 2px,
    rgba(34,34,32,0.022) 2px 3px);
  mix-blend-mode:multiply;
}
.stat-card.stat-accent{
  background:
    linear-gradient(135deg, #FA9A11 0%, #F39200 50%, #D88008 100%);
  border-color:var(--accent);color:#fff;
}
.stat-card.stat-accent::before{
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.06) 0 1px,
      transparent 1px 4px),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.05) 0 1px,
      transparent 1px 7px);
  mix-blend-mode:normal;opacity:.7;
}
/* Tiny rivets in two opposite corners — pure CSS, no DOM changes. */
.stat-card::after{
  content:"";position:absolute;width:8px;height:8px;border-radius:50%;
  top:8px;right:8px;
  background:radial-gradient(circle at 30% 28%, #f4f1e8 0%, #b8b3a5 35%, #6a665b 65%, #2a2823 100%);
  box-shadow:inset 0 -1px 1px rgba(0,0,0,.5), 0 1px 1px rgba(0,0,0,.45);
}
.stat-card.stat-accent::after{
  background:radial-gradient(circle at 30% 28%, #fff 0%, #ffe2ad 30%, #c97a04 70%, #5b3500 100%);
}
.stat-card.stat-accent .stat-num,.stat-card.stat-accent .stat-label{color:#fff}
.stat-card.stat-accent .stat-num{text-shadow:0 1px 2px rgba(0,0,0,.18)}
.stat-card > *{position:relative;z-index:1}
.stat-num{font-weight:900;font-size:2rem;color:var(--ink);line-height:1.05;letter-spacing:-.02em}
.stat-label{font-size:.86rem;color:var(--ink-soft);line-height:1.35}

/* ---------- Product cards ---------- */
.product-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  margin-top:48px;
}
.card{
  position:relative;
  background:#1a1a18;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-md);
  transition:transform .2s ease, box-shadow .2s ease;
  display:flex;flex-direction:column;
  border:1px solid rgba(255,255,255,.05);
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(243,146,0,.4), 0 18px 36px rgba(243,146,0,.16);
}
/* Card top-left corner "tag" — small diagonal weld flag in accent orange. */
.card::before{
  content:"";position:absolute;top:0;left:0;width:36px;height:36px;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent) 50%, transparent 50%);
  z-index:2;pointer-events:none;
  opacity:0;transform:translate(-4px,-4px);
  transition:opacity .25s ease, transform .25s ease;
}
.card:hover::before{opacity:1;transform:translate(0,0)}
/* Corner rivet (top-right) — dark steel pin. */
.card::after{
  content:"";position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 30% 28%, #f4f1e8 0%, #b8b3a5 35%, #6a665b 65%, #2a2823 100%);
  box-shadow:inset 0 -1px 1px rgba(0,0,0,.55), 0 1px 1px rgba(0,0,0,.55);
  z-index:3;pointer-events:none;
}
.card-img{
  aspect-ratio:4/3;background-size:cover;background-position:center;
  filter:saturate(.9);
  transition:transform .35s ease;
}
.card:hover .card-img{transform:scale(1.04)}
.card-body{padding:22px 24px 28px;color:rgba(255,255,255,.78)}
.card-body h3{color:#fff;margin-bottom:.35em}

/* ---------- Project grid ---------- */
.proj-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;
}
.proj{margin:0;background:#fff;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;}
.proj:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.proj img{aspect-ratio:4/3;object-fit:cover;width:100%}
.proj figcaption{padding:14px 18px 18px;display:flex;flex-direction:column;gap:4px}
.proj figcaption strong{color:var(--ink);font-size:1.02rem}
.proj figcaption span{color:var(--ink-soft);font-size:.84rem}

/* ---------- Partners ---------- */
.partner-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:36px;
  margin-top:48px;
}
.partner{
  flex:1 1 140px;display:flex;align-items:center;justify-content:center;
  min-height:80px;
  filter:grayscale(1);opacity:.7;transition:filter .2s ease, opacity .2s ease;
}
.partner:hover{filter:none;opacity:1}
.partner img{max-height:60px;width:auto}
.partner-text{
  font-weight:900;font-size:1.4rem;letter-spacing:-.01em;
  color:var(--ink);filter:none;opacity:.85;
}
.partner-text:hover{color:var(--accent);opacity:1}

/* ---------- Team ---------- */
.team-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px;
}
.team-card{
  background:#fff;border:1px solid var(--fog);border-radius:var(--r-md);
  padding:24px;display:flex;flex-direction:column;gap:4px;
  box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease;
}
.team-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.team-card.team-lead{border-color:var(--accent);border-width:2px}
.team-role{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:6px}
.team-name{font-weight:900;color:var(--ink);font-size:1.08rem;margin-bottom:8px;line-height:1.25}
.team-card a{font-size:.93rem;color:var(--ink-soft);font-weight:400}
.team-card a:hover{color:var(--accent)}

/* ---------- Contact ---------- */
.contact-block .col-text .btn{margin-top:8px}
.contact-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:22px 32px;
  margin:32px 0 28px;
}
.contact-grid > div{color:rgba(255,255,255,.85);line-height:1.55}
.contact-label{
  display:block;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin-bottom:6px;
}
.contact-sub{color:rgba(255,255,255,.55);font-size:.9rem}
.contact-grid a{color:#fff;font-weight:700}
.contact-grid a:hover{color:var(--accent)}
.col-map{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);background:#000;height:480px;display:flex;flex-direction:column}
.col-map iframe{flex:1;width:100%;border:0}
.map-link{
  display:block;padding:12px 18px;text-align:center;
  background:#0f0f0e;color:rgba(255,255,255,.78);font-size:.88rem;font-weight:700;
}
.map-link:hover{color:var(--accent)}

/* ---------- Footer ---------- */
.site-footer{background:#16161a;color:rgba(255,255,255,.65);padding:56px 0 28px;font-size:.93rem}
.footer-inner{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px;align-items:start}
.footer-brand img{filter:brightness(0) invert(1);margin-bottom:14px}
.footer-nav ul,.footer-legal ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.footer-nav a,.footer-legal a{color:rgba(255,255,255,.65)}
.footer-nav a:hover,.footer-legal a:hover{color:var(--accent)}
.footer-tiny{margin-top:18px;font-size:.78rem;color:rgba(255,255,255,.4)}

/* ---------- Mobile adaptations ---------- */
@media (max-width: 980px){
  .wrap{padding:0 22px}
  section{padding:72px 0}
  .two-col{grid-template-columns:1fr;gap:40px}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .proj-grid{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .footer-inner{grid-template-columns:1fr}
  .col-map{height:380px}
  .hero-inner{grid-template-columns:1fr;gap:48px}
  .hero-bento{height:380px}
  .hero-usp{grid-template-columns:repeat(2,1fr);gap:20px}
}
@media (max-width: 720px){
  body{font-size:16px}
  section{padding:60px 0}
  h1{font-size:2.1rem}
  h2{font-size:1.7rem}
  .hero{padding:120px 0 84px}
  .rivet{width:10px;height:10px}
  .rivet::after{inset:3px}
  .rivet-tl{top:14px;left:14px}
  .rivet-tr{top:14px;right:14px}
  .rivet-bl{bottom:24px;left:14px}
  .rivet-br{bottom:24px;right:14px}
  .hero-ibeam{height:10px}
  .hero-bento{
    height:auto;
    grid-template-columns:1.2fr 1fr;
    grid-template-rows:160px 160px;
    gap:10px;
  }
  .bento-1{grid-row:1 / span 2}
  .bento-tile figcaption{font-size:.9rem;bottom:10px;left:12px;right:12px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{justify-content:center}
  .col-stats{grid-template-columns:1fr 1fr;gap:12px}
  .stat-card{padding:18px}
  .stat-num{font-size:1.6rem}
  .product-grid,.proj-grid,.team-grid{grid-template-columns:1fr;gap:16px}
  .contact-grid{grid-template-columns:1fr}
  .partner-row{gap:24px}
  .partner{flex-basis:40%}

  /* mobile nav */
  .header-cta{display:none}
  .nav-toggle{display:block;margin-left:auto}
  .site-nav{
    position:fixed;top:0;right:0;bottom:0;left:auto;
    width:min(84vw,340px);
    background:var(--ink);padding:88px 28px 28px;
    transform:translateX(100%);
    /* Visibility must transition too, otherwise the slide-out runs on an
       already-invisible element and the transform gets stuck mid-flight in
       webkit — second open then refuses to slide in. Delay visibility until
       the transform finishes when closing; keep it instant on open. */
    transition:transform .25s ease, visibility 0s linear .25s;
    box-shadow:var(--shadow-lg);
    z-index:110;
    overflow-y:auto;
    visibility:hidden;
  }
  body.nav-open .site-nav{
    transform:translateX(0);
    visibility:visible;
    transition:transform .25s ease, visibility 0s linear 0s;
  }
  .site-nav ul{flex-direction:column;gap:6px;justify-content:flex-start;align-items:stretch}
  .site-header .site-nav a,
  .site-header.is-scrolled .site-nav a{
    color:#fff;font-size:1.15rem;display:block;
    padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.08);
  }
  .site-header .site-nav a:hover,
  .site-header.is-scrolled .site-nav a:hover,
  .site-header .site-nav a:focus,
  .site-header.is-scrolled .site-nav a:focus{
    color:var(--accent);border-bottom-color:rgba(255,255,255,.08);
  }
  body.nav-open{overflow:hidden}
  .site-header{background:rgba(34,34,32,.82)}
}
@media (max-width: 480px){
  .col-stats{grid-template-columns:1fr}
  .hero-usp{grid-template-columns:1fr;gap:16px}
  .hero-usp{border-top:1px solid rgba(255,255,255,.18);padding-top:18px}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}