/* ============================================================
   AW GENERAL CONTRACTING & EXCAVATION
   "From dirt to dreams come true."
   Dark, warm, industrial - heavy machinery meets fine craft.
   Oxford, CT & the Naugatuck Valley.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:wght@500;600;700;800&family=Barlow:wght@400;500;600;700&display=swap');

:root{
  /* warm near-black with a faint ember undertone */
  --ink:        #100b08;
  --ink-1:      #16100c;
  --ink-2:      #1d1510;
  --ink-3:      #271c15;
  --line:       #352720;
  --line-soft:  #2a1f18;

  /* the punch */
  --red:        #e4231a;
  --red-bright: #ff3b2f;
  --red-deep:   #b5160f;

  /* warm light text */
  --paper:      #f4ede4;
  --paper-2:    #d8cdc1;
  --muted:      #9d9087;
  --muted-2:    #756a62;

  /* ember accents (used in photography glow only, sparingly) */
  --ember:      #f08a3c;
  --ember-soft: rgba(240,138,60,.16);

  --display: 'Anton', 'Barlow Condensed', sans-serif;
  --head:    'Barlow Condensed', sans-serif;
  --body:    'Barlow', system-ui, sans-serif;

  --maxw: 1280px;
  --gut: clamp(20px, 5vw, 72px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:18px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.01em;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

::selection{ background:var(--red); color:#fff; }

/* warm grain / vignette over the whole page for tactile depth */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(240,138,60,.06), transparent 60%),
    radial-gradient(100% 60% at 0% 110%, rgba(228,35,26,.05), transparent 60%);
}

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
section{ position:relative; z-index:2; }

/* ---------- type helpers ---------- */
.eyebrow{
  font-family:var(--head); font-weight:700;
  text-transform:uppercase; letter-spacing:.34em;
  font-size:13px; color:var(--red);
  display:inline-flex; align-items:center; gap:14px;
}
.eyebrow::before{ content:""; width:30px; height:2px; background:var(--red); display:inline-block; }
.eyebrow.muted{ color:var(--muted); }
.eyebrow.muted::before{ background:var(--muted-2); }

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

.sec-title{ font-size:clamp(38px, 6vw, 92px); line-height:.9; }
.red{ color:var(--red); }
.outline-word{
  color:transparent;
  -webkit-text-stroke:1.5px var(--muted-2);
}

p.lede{ font-size:clamp(18px,2vw,22px); color:var(--paper-2); max-width:56ch; }
.small{ font-size:14px; color:var(--muted); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--head); font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; font-size:15px;
  padding:16px 26px; border-radius:3px;
  transition:transform .25s var(--ease), background .25s, color .25s, box-shadow .25s;
  position:relative; white-space:nowrap;
}
.btn .ar{ transition:transform .3s var(--ease); }
.btn:hover .ar{ transform:translateX(4px); }
.btn-primary{ background:var(--red); color:#fff; box-shadow:0 10px 30px -10px rgba(228,35,26,.7); }
.btn-primary:hover{ background:var(--red-bright); transform:translateY(-2px); box-shadow:0 16px 40px -12px rgba(255,59,47,.8); }
.btn-ghost{ background:transparent; color:var(--paper); border:1.5px solid var(--line); }
.btn-ghost:hover{ border-color:var(--paper); transform:translateY(-2px); }
.btn-dark{ background:var(--ink-2); color:var(--paper); border:1px solid var(--line); }
.btn-dark:hover{ background:var(--ink-3); }

/* ============================================================
   TREAD MOTIF - the ownable device (excavator track cleats)
   ============================================================ */
.tread{
  height:22px; width:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='22' viewBox='0 0 46 22'%3E%3Cpath d='M8 0 L38 0 L46 22 L0 22 Z' fill='%23e4231a'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-size:auto 22px;
  background-position:0 0;
}
.tread.muted{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='22' viewBox='0 0 46 22'%3E%3Cpath d='M8 0 L38 0 L46 22 L0 22 Z' fill='%23271c15'/%3E%3C/svg%3E");
}
.tread.thin{ height:14px; background-size:auto 14px; }
/* the rolling belt: two parallel rails with cleats, animates on scroll via --roll */
.tread-belt{
  --roll:0px;
  position:relative; height:34px; width:100%;
  display:flex; flex-direction:column; gap:6px; justify-content:center;
  overflow:hidden;
}
.tread-belt .rail{
  height:11px; width:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='11' viewBox='0 0 40 11'%3E%3Crect x='2' y='1' width='22' height='9' rx='2' fill='%23e4231a'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-size:auto 11px;
  background-position:var(--roll) 0;
}
.tread-belt .rail.b{ background-position:calc(var(--roll) * -1) 0; opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='11' viewBox='0 0 40 11'%3E%3Crect x='2' y='1' width='22' height='9' rx='2' fill='%23756a62'/%3E%3C/svg%3E");
}

/* ============================================================
   HEADER
   ============================================================ */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; gap:24px;
  padding:14px var(--gut);
  transition:background .35s var(--ease), padding .35s var(--ease), border-color .35s;
  border-bottom:1px solid transparent;
}
.site-head.scrolled{
  background:rgba(16,11,8,.86);
  backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid var(--line-soft);
  padding-top:10px; padding-bottom:10px;
}
.brand{ display:flex; align-items:center; gap:13px; flex:0 0 auto; }
.brand svg{ width:54px; height:auto; display:block; }
.brand .bname{ font-family:var(--head); font-weight:800; text-transform:uppercase; line-height:.86; font-size:18px; letter-spacing:.01em; }
.brand .bname small{ display:block; font-size:10px; letter-spacing:.26em; color:var(--muted); font-weight:600; }
.nav{ display:flex; gap:30px; margin-inline:auto; }
.nav a{
  font-family:var(--head); font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; font-size:15px; color:var(--paper-2); white-space:nowrap;
  position:relative; padding:6px 0; transition:color .2s;
}
.nav a::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--red); transition:width .28s var(--ease); }
.nav a:hover{ color:var(--paper); }
.nav a:hover::after{ width:100%; }
.head-cta{ display:flex; align-items:center; gap:18px; flex:0 0 auto; }
.phone{ display:flex; align-items:center; gap:9px; font-family:var(--head); font-weight:700; font-size:17px; letter-spacing:.02em; white-space:nowrap; }
.phone span{ white-space:nowrap; }
.phone small{ display:block; font-family:var(--body); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.phone svg{ width:18px; color:var(--red); }
.burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; }
.burger span{ display:block; width:24px; height:2px; background:var(--paper); position:relative; transition:.3s; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:24px; height:2px; background:var(--paper); transition:.3s; }
.burger span::before{ top:-7px; } .burger span::after{ top:7px; }
.burger.open span{ background:transparent; }
.burger.open span::before{ top:0; transform:rotate(45deg); }
.burger.open span::after{ top:0; transform:rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero-bg{ position:absolute; inset:-8% 0 0 0; z-index:0; }
.hero-bg img{ width:100%; height:116%; object-fit:cover; will-change:transform; filter:saturate(1.02) contrast(1.04); }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(16,11,8,.62) 0%, rgba(16,11,8,.18) 30%, rgba(16,11,8,.72) 72%, var(--ink) 100%),
    linear-gradient(90deg, rgba(16,11,8,.86) 0%, rgba(16,11,8,.35) 48%, transparent 75%);
}
.hero-bg::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(70% 50% at 78% 30%, rgba(240,138,60,.16), transparent 60%);
  mix-blend-mode:screen;
}
.hero-inner{ position:relative; z-index:3; width:100%; max-width:var(--maxw); margin-inline:auto; padding:0 var(--gut) clamp(48px,8vh,96px); }
.hero-tag{ margin-bottom:26px; }
.hero h1{ font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(46px, 8.6vw, 132px); line-height:.92; letter-spacing:.07em; max-width:15ch; }
/* hero eyebrow: cream over the photo for legibility, red tick kept */
.hero .eyebrow{ color:var(--paper); text-shadow:0 1px 16px rgba(8,5,3,.7); }
.hero .eyebrow::before{ background:var(--red); }
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line > span{ display:block; }
.hero-underline{ width:min(420px,60vw); margin:22px 0 26px; }
.hero p{ font-size:clamp(17px,1.7vw,21px); color:var(--paper-2); max-width:48ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:34px; }
.scroll-cue{ position:absolute; right:var(--gut); bottom:40px; z-index:3; display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--muted); }
.scroll-cue .bar{ width:1px; height:54px; background:linear-gradient(var(--red), transparent); position:relative; overflow:hidden; }
.scroll-cue .bar::after{ content:""; position:absolute; top:-30%; left:0; width:100%; height:30%; background:var(--red); animation:cue 2.2s var(--ease) infinite; }
@keyframes cue{ to{ top:100%; } }
.scroll-cue span{ writing-mode:vertical-rl; font-family:var(--head); font-size:11px; letter-spacing:.32em; text-transform:uppercase; }

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust{ background:var(--ink-1); border-block:1px solid var(--line-soft); }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.trust-grid > div{ padding:30px var(--gut); display:flex; align-items:center; gap:18px; border-left:1px solid var(--line-soft); }
.trust-grid > div:first-child{ border-left:none; }
.trust .ico{ width:40px; height:40px; color:var(--red); flex:0 0 auto; }
.trust .t-num{ font-family:var(--head); font-weight:800; font-size:32px; line-height:1; }
.trust .t-lab{ font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-family:var(--head); font-weight:600; }
.stars{ display:inline-flex; gap:3px; color:var(--ember); }
.stars svg{ width:15px; }

/* ============================================================
   SECTION SHELL
   ============================================================ */
.sec{ padding:clamp(76px,10vh,140px) 0; }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:54px; flex-wrap:wrap; }
.sec-head .lhs{ max-width:60ch; }
.sec-head .eyebrow{ margin-bottom:18px; }

/* ---------- Services ---------- */
.services{ background:var(--ink); }
.svc-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.svc{
  position:relative; overflow:hidden; border-radius:4px;
  background:var(--ink-2); border:1px solid var(--line-soft);
  min-height:300px; display:flex; align-items:flex-end;
}
.svc img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), filter .5s; filter:saturate(.9) brightness(.62); }
.svc::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(16,11,8,.4) 55%, rgba(13,9,6,.94) 100%); transition:background .4s; }
.svc:hover img{ transform:scale(1.07); filter:saturate(1.05) brightness(.74); }
.svc-body{ position:relative; z-index:2; padding:28px; width:100%; }
.svc .num{ font-family:var(--head); font-weight:700; font-size:13px; letter-spacing:.2em; color:var(--red); }
.svc h3{ font-size:30px; margin:8px 0 0; }
.svc p{ font-size:15px; color:var(--paper-2); max-width:40ch; margin-top:12px; opacity:0; max-height:0; transition:opacity .4s var(--ease), max-height .5s var(--ease), margin .4s; overflow:hidden; }
.svc .arrow{ position:absolute; top:24px; right:24px; z-index:2; width:46px; height:46px; border:1.5px solid rgba(244,237,228,.25); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--paper); transition:.35s var(--ease); }
.svc .arrow svg{ width:18px; transition:.35s var(--ease); }
.svc:hover .arrow{ background:var(--red); border-color:var(--red); transform:rotate(-45deg); }
.svc:hover p{ opacity:1; max-height:120px; }
.svc::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); z-index:3; }
.svc:hover::before{ transform:scaleX(1); }
/* asymmetric spans */
.svc.s-wide{ grid-column:span 7; min-height:360px; }
.svc.s-tall{ grid-column:span 5; min-height:360px; }
.svc.s-third{ grid-column:span 4; }
.svc.s-half{ grid-column:span 6; }

/* ---------- About + stats ---------- */
.about{ background:var(--ink-1); border-top:1px solid var(--line-soft); overflow:hidden; }
.about-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,90px); align-items:center; }
.about-copy h2{ font-size:clamp(34px,4.4vw,66px); margin:18px 0 22px; }
.about-copy p{ color:var(--paper-2); margin-bottom:18px; max-width:52ch; }
.about-sign{ display:flex; align-items:center; gap:18px; margin-top:30px; padding-top:26px; border-top:1px solid var(--line); }
.about-sign .sg{ font-family:var(--display); font-size:26px; color:var(--paper); line-height:1; }
.about-sign .sg small{ display:block; font-family:var(--body); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:8px; }
.about-visual{ position:relative; }
.about-visual .main-img{ border-radius:5px; overflow:hidden; aspect-ratio:4/5; box-shadow:0 40px 80px -30px rgba(0,0,0,.8); }
.about-visual .main-img img{ width:100%; height:100%; object-fit:cover; }
.about-visual .badge{
  position:absolute; left:-34px; bottom:38px; background:var(--red); color:#fff;
  padding:22px 26px; border-radius:4px; box-shadow:0 24px 50px -18px rgba(228,35,26,.7);
}
.about-visual .badge .n{ font-family:var(--head); font-weight:800; font-size:48px; line-height:.9; }
.about-visual .badge .l{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; }

.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:46px; border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.stat{ padding:28px 26px; border-left:1px solid var(--line); }
.stat:first-child{ border-left:none; }
.stat .n{ font-family:var(--head); font-weight:800; font-size:clamp(44px,5vw,68px); line-height:.9; color:var(--paper); }
.stat .n .u{ color:var(--red); }
.stat .l{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:8px; font-family:var(--head); font-weight:600; }

/* ---------- Why choose us ---------- */
.why{ background:var(--ink); }
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); }
.why-cell{ padding:40px 30px 44px; border-left:1px solid var(--line); position:relative; transition:background .4s; }
.why-cell:first-child{ border-left:none; }
.why-cell:hover{ background:var(--ink-1); }
.why-cell .ico{ width:42px; height:42px; color:var(--red); margin-bottom:26px; }
.why-cell h3{ font-size:24px; margin-bottom:12px; }
.why-cell p{ font-size:15px; color:var(--muted); }
.why-cell .idx{ position:absolute; top:26px; right:30px; font-family:var(--head); font-weight:800; font-size:14px; color:var(--line); }
.why-cell::after{ content:""; position:absolute; left:0; top:-1px; height:3px; width:0; background:var(--red); transition:width .45s var(--ease); }
.why-cell:hover::after{ width:100%; }

/* ---------- Process ---------- */
.process{ background:var(--ink-1); border-block:1px solid var(--line-soft); }
.proc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.proc{ position:relative; padding-top:30px; }
.proc .pn{ font-family:var(--display); font-size:clamp(60px,7vw,104px); line-height:.8; color:transparent; -webkit-text-stroke:1.5px var(--line); transition:.5s var(--ease); }
.proc:hover .pn{ -webkit-text-stroke-color:var(--red); color:rgba(228,35,26,.06); }
.proc h3{ font-size:26px; margin:14px 0 12px; }
.proc p{ font-size:15px; color:var(--muted); max-width:34ch; }
.proc .pbar{ height:2px; background:var(--line); margin-top:24px; position:relative; }
.proc .pbar::after{ content:""; position:absolute; left:0; top:0; height:100%; width:0; background:var(--red); transition:width .6s var(--ease); }
.proc:hover .pbar::after{ width:100%; }

/* ---------- Featured projects (masonry) ---------- */
.work{ background:var(--ink); }
.gal{ display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:140px; gap:16px; }
.shot{ position:relative; overflow:hidden; border-radius:4px; cursor:pointer; background:var(--ink-2); }
.shot img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease), filter .5s; filter:saturate(.92) brightness(.78); }
.shot::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(13,9,6,.92)); opacity:.85; transition:opacity .4s; }
.shot .meta{ position:absolute; left:0; bottom:0; padding:22px 24px; z-index:2; transform:translateY(8px); opacity:0; transition:.45s var(--ease); }
.shot .meta .k{ font-family:var(--head); font-weight:700; font-size:12px; letter-spacing:.2em; color:var(--red); text-transform:uppercase; }
.shot .meta h3{ font-size:26px; margin-top:6px; }
.shot .sweep{ position:absolute; left:0; bottom:0; height:4px; width:100%; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); z-index:3; }
.shot:hover img{ transform:scale(1.08); filter:saturate(1.08) brightness(.92); }
.shot:hover::after{ opacity:1; }
.shot:hover .meta{ transform:translateY(0); opacity:1; }
.shot:hover .sweep{ transform:scaleX(1); }
.shot .corner{ position:absolute; top:18px; right:18px; z-index:2; width:42px; height:42px; border-radius:50%; background:rgba(16,11,8,.5); border:1px solid rgba(244,237,228,.2); display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.8); transition:.4s var(--ease); }
.shot:hover .corner{ opacity:1; transform:scale(1); }
.shot .corner svg{ width:16px; }
.g1{ grid-column:span 5; grid-row:span 3; }
.g2{ grid-column:span 4; grid-row:span 2; }
.g3{ grid-column:span 3; grid-row:span 2; }
.g4{ grid-column:span 4; grid-row:span 2; }
.g5{ grid-column:span 3; grid-row:span 2; }
.g6{ grid-column:span 5; grid-row:span 2; }

/* ---------- Testimonials ---------- */
.testi{ background:var(--ink-1); border-block:1px solid var(--line-soft); overflow:hidden; }
.testi-rail{ display:flex; gap:22px; transition:transform .6s var(--ease); }
.tcard{ flex:0 0 calc((100% - 44px)/3); background:var(--ink-2); border:1px solid var(--line-soft); border-radius:5px; padding:34px; position:relative; }
.tcard .mark{ font-family:var(--display); font-size:90px; line-height:.5; color:var(--line); position:absolute; top:30px; right:26px; }
.tcard .stars{ margin-bottom:18px; }
.tcard p{ font-size:17px; color:var(--paper); line-height:1.55; margin-bottom:26px; }
.tcard .who{ display:flex; align-items:center; gap:14px; border-top:1px solid var(--line); padding-top:20px; }
.tcard .av{ width:48px; height:48px; border-radius:50%; object-fit:cover; flex:0 0 auto; border:2px solid var(--line); }
.tcard .who .nm{ font-family:var(--head); font-weight:700; font-size:17px; text-transform:uppercase; letter-spacing:.03em; }
.tcard .who .rl{ font-size:13px; color:var(--muted); }
.testi-ctrl{ display:flex; gap:10px; margin-top:34px; }
.testi-ctrl button{ width:50px; height:50px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--paper); transition:.3s; }
.testi-ctrl button:hover{ background:var(--red); border-color:var(--red); }
.testi-ctrl button svg{ width:18px; }

/* ---------- Service area ---------- */
.area{ background:var(--ink); }
.area-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,72px); align-items:center; }
.map{ position:relative; aspect-ratio:1/.82; border-radius:6px; overflow:hidden; border:1px solid var(--line); background:
   radial-gradient(120% 120% at 30% 20%, #1c140f, #0e0a07);
}
.map svg{ position:absolute; inset:0; width:100%; height:100%; }
.area-list{ columns:2; column-gap:30px; margin-top:30px; }
.area-list li{ list-style:none; display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--line-soft); font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:17px; break-inside:avoid; }
.area-list li svg{ width:14px; color:var(--red); flex:0 0 auto; }
.area .note{ margin-top:26px; color:var(--muted); font-size:15px; }

/* ---------- Closing CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; background:var(--ink); }
.cta-inner{ position:relative; z-index:3; text-align:center; padding:clamp(80px,12vh,150px) var(--gut); }
.cta-inner h2{ font-family:var(--display); font-weight:400; font-size:clamp(46px,8vw,130px); line-height:.86; }
.cta-inner p{ color:var(--paper-2); max-width:50ch; margin:24px auto 0; font-size:clamp(17px,1.8vw,21px); }
.cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:38px; }
.cta-bg{ position:absolute; inset:0; z-index:0; }
.cta-bg img{ width:100%; height:100%; object-fit:cover; filter:saturate(.7) brightness(.4); }
.cta-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(13,9,6,.7), rgba(13,9,6,.86)), radial-gradient(60% 70% at 50% 40%, rgba(228,35,26,.22), transparent 60%); }

/* ============================================================
   CREST - full tread-badge brand lockup (the real logo)
   The brand badge presented as a placard against the dark band.
   ============================================================ */
.crest{ display:flex; justify-content:center; }
.crest-img{ width:min(560px, 88vw); height:auto; border-radius:14px; box-shadow:0 34px 70px -26px rgba(0,0,0,.85); }

/* ---------- header / footer logo chip (real mark on a clean tile) ---------- */
.brand-chip{ display:inline-flex; flex:0 0 auto; border-radius:7px; overflow:hidden; box-shadow:0 5px 18px -7px rgba(0,0,0,.6); }
.brand-chip img{ height:38px; width:auto; display:block; }
.foot .brand-f .brand-chip img{ height:40px; }

/* ---------- Footer ---------- */
.foot{ background:var(--ink-1); border-top:1px solid var(--line); padding-top:64px; }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:44px; padding-bottom:54px; border-bottom:1px solid var(--line-soft); }
.foot h4{ font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:14px; color:var(--muted); margin-bottom:22px; }
.foot .brand-f{ display:flex; align-items:center; gap:13px; margin-bottom:20px; }
.foot .brand-f svg{ width:56px; }
.foot .brand-f .bname{ font-family:var(--head); font-weight:800; text-transform:uppercase; line-height:.86; font-size:19px; }
.foot .brand-f .bname small{ display:block; font-size:10px; letter-spacing:.24em; color:var(--muted); }
.foot-col ul{ list-style:none; display:flex; flex-direction:column; gap:13px; }
.foot-col a, .foot-col li{ color:var(--paper-2); font-size:15px; transition:color .2s; }
.foot-col a:hover{ color:var(--red); }
.foot-contact .row{ display:flex; gap:12px; margin-bottom:16px; align-items:flex-start; }
.foot-contact .row svg{ width:18px; color:var(--red); margin-top:3px; flex:0 0 auto; }
.foot-contact .row b{ font-family:var(--head); font-weight:700; font-size:18px; letter-spacing:.02em; }
.foot-contact .row span{ display:block; font-size:14px; color:var(--muted); }
.socials{ display:flex; gap:10px; margin-top:8px; }
.socials a{ width:42px; height:42px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--paper-2); transition:.3s; }
.socials a:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.socials svg{ width:18px; }
.foot-bot{ display:flex; justify-content:space-between; align-items:center; padding:24px 0 30px; gap:20px; flex-wrap:wrap; }
.foot-bot p{ font-size:13px; color:var(--muted-2); }
.foot-license{ font-family:var(--head); font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:12px; color:var(--muted); }

/* ============================================================
   MOTION - reveal on scroll
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
.reveal.d5{ transition-delay:.40s; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .hero-bg img{ transform:none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .nav{ display:none; }
  .burger{ display:flex; }
  .trust-grid{ grid-template-columns:repeat(2,1fr); }
  .trust-grid > div:nth-child(3){ border-left:none; }
  .trust-grid > div{ border-top:1px solid var(--line-soft); }
  .trust-grid > div:nth-child(-n+2){ border-top:none; }
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .why-cell:nth-child(3){ border-left:none; }
  .proc-grid{ grid-template-columns:repeat(2,1fr); }
  .about-grid{ grid-template-columns:1fr; }
  .about-visual{ order:-1; max-width:480px; }
  .area-grid{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr 1fr; gap:36px; }
  .tcard{ flex-basis:calc((100% - 22px)/2); }
}
@media (max-width:680px){
  body{ font-size:17px; }
  :root{ --gut:20px; }
  .head-cta .phone small{ display:none; }
  .svc.s-wide,.svc.s-tall,.svc.s-third,.svc.s-half{ grid-column:span 12; min-height:300px; }
  .svc p{ opacity:1; max-height:120px; }
  .why-grid{ grid-template-columns:1fr; }
  .why-cell{ border-left:none; border-top:1px solid var(--line); }
  .why-cell:first-child{ border-top:none; }
  .proc-grid{ grid-template-columns:1fr; }
  .trust-grid{ grid-template-columns:1fr; }
  .trust-grid > div{ border-left:none; }
  .gal{ grid-auto-rows:120px; }
  .g1,.g2,.g3,.g4,.g5,.g6{ grid-column:span 12; grid-row:span 2; }
  .tcard{ flex-basis:100%; }
  .stats{ grid-template-columns:1fr; }
  .stat{ border-left:none; border-top:1px solid var(--line); }
  .stat:first-child{ border-top:none; }
  .about-visual .badge{ left:0; }
  .foot-top{ grid-template-columns:1fr; }
  .phone{ display:none; }
  .hero h1{ font-size:clamp(40px,11.5vw,80px); letter-spacing:.045em; }
}

/* mobile nav drawer */
.m-nav{ position:fixed; inset:0; z-index:55; background:rgba(16,11,8,.97); backdrop-filter:blur(8px); display:flex; flex-direction:column; justify-content:center; padding:0 var(--gut); transform:translateX(100%); transition:transform .45s var(--ease); }
.m-nav.open{ transform:none; }
.m-nav a{ font-family:var(--display); font-size:clamp(34px,9vw,60px); text-transform:uppercase; padding:10px 0; color:var(--paper); border-bottom:1px solid var(--line-soft); }
.m-nav a:hover{ color:var(--red); }
.m-nav .m-foot{ margin-top:40px; display:flex; flex-direction:column; gap:16px; }