/* =========================================================
   PERFORMANCE WELDING MOBILE
   Industrial fabrication aesthetic. Cut steel, molten amber, arc light.
   ========================================================= */

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg, canvas { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ---------- TOKENS ---------- */
:root {
  --bg-0:#0D0D0D; --bg-1:#111111; --bg-2:#1A1A1A; --panel:#141414;
  --steel-700:#2A2A2A; --steel-600:#3A3A3A; --steel-500:#5C5C5C;
  --amber:#FF6B00; --amber-2:#FF8C00; --arc:#C8E6FF;
  --paper:#E8E4DC; --paper-dim:#9A958C; --paper-faint:#8F8A80;

  --f-display:'Bebas Neue','Arial Narrow',sans-serif;
  --f-cond:'Barlow Condensed','Arial Narrow',sans-serif;
  --f-body:'Inter',system-ui,-apple-system,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'Courier New',monospace;

  --maxw:1280px;
  --gutter:clamp(20px,5vw,64px);
  --nav-h:74px;

  --brushed: repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
}

/* ---------- BASE ---------- */
body {
  background:var(--bg-0);
  color:var(--paper);
  font-family:var(--f-body);
  font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section { padding-block:clamp(72px,10vw,140px); position:relative; scroll-margin-top:calc(var(--nav-h) + 12px); }

::selection { background:var(--amber); color:#0D0D0D; }
:focus-visible { outline:2px solid var(--amber); outline-offset:3px; }

/* ---------- GRAIN ---------- */
.grain {
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.12; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- TYPE HELPERS ---------- */
.eyebrow {
  font-family:var(--f-mono); font-size:clamp(11px,1.1vw,13px); font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; color:var(--paper-dim); margin-bottom:18px;
}
.eyebrow--arc { color:var(--arc); }
.section__head { max-width:760px; margin-bottom:clamp(40px,5vw,68px); }
.section__title {
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.6rem,7vw,5.6rem); line-height:.92; letter-spacing:.02em;
  text-transform:uppercase; color:var(--paper);
}
.section__lead { margin-top:20px; max-width:620px; color:var(--paper-dim); font-size:1.08rem; }

/* ---------- LINK UNDERLINE ---------- */
.link-underline {
  font-family:var(--f-mono); font-size:.9rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper); position:relative; padding-bottom:6px; align-self:center;
}
.link-underline::after {
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--amber);
  transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.link-underline:hover::after, .link-underline:focus-visible::after { transform:scaleX(1); }

/* =========================================================
   CHAMFERED BUTTONS
   ========================================================= */
.btn {
  --ch:12px;
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  font-family:var(--f-cond); font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  font-size:1.02rem; line-height:1; padding:17px 30px; cursor:pointer; border:none; background:none;
  color:#0D0D0D; white-space:nowrap;
  clip-path:polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
  transition:filter .25s ease;
}
.btn--lg { font-size:1.12rem; padding:20px 34px; --ch:14px; }
.btn--block { width:100%; }

.btn--primary::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(135deg,var(--amber-2),var(--amber));
  clip-path:inherit;
}
.btn--primary:hover { filter:brightness(1.08); }

/* ghost / outline variant (dark fill, steel border, amber on heat) */
.btn--ghost { color:var(--paper); }
.btn--ghost::before { content:""; position:absolute; inset:0; z-index:-2; background:var(--steel-500); clip-path:inherit; }
.btn--ghost::after  { content:""; position:absolute; inset:1.6px; z-index:-1; background:var(--bg-0); clip-path:inherit; }
.btn--ghost:hover { color:var(--amber); }
.btn--ghost .btn__trace path { stroke:var(--amber); filter:drop-shadow(0 0 3px rgba(255,107,0,.5)); }
.btn__arrow { width:1.1em; height:1.1em; transition:transform .25s ease; }
.btn--ghost:hover .btn__arrow { transform:translateX(4px); }

/* SVG perimeter trace (built in JS) */
.btn__trace { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:visible; }
.btn__trace path {
  fill:none; stroke:var(--arc); stroke-width:1.6; vector-effect:non-scaling-stroke;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
  filter:drop-shadow(0 0 3px rgba(200,230,255,.55));
  transition:stroke-dashoffset .3s linear;
}
.btn--primary .btn__trace path { stroke:#FFF3E2; }
.btn:hover .btn__trace path, .btn:focus-visible .btn__trace path { stroke-dashoffset:0; }

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(13,13,13,.82); backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.nav.scrolled { background:rgba(11,11,11,.96); border-bottom-color:var(--amber); }
.nav__inner {
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.logo { display:flex; flex-direction:column; line-height:1; }
.logo__main {
  font-family:var(--f-display); font-size:1.5rem; letter-spacing:.04em; color:var(--paper);
}
.logo__tag {
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.3em; color:var(--amber); margin-top:4px;
}
.nav__links { display:flex; gap:34px; }
.navlink {
  font-family:var(--f-cond); font-weight:600; font-size:1.02rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--paper); position:relative; padding:6px 0;
}
.navlink::after {
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--amber);
  transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.navlink:hover::after, .navlink:focus-visible::after { transform:scaleX(1); }
.nav__actions { display:flex; align-items:center; gap:22px; }
.nav__phone { font-family:var(--f-mono); font-size:.92rem; letter-spacing:.08em; color:var(--paper); }
.nav__phone:hover { color:var(--amber); }

.nav__toggle { display:none; flex-direction:column; gap:5px; width:42px; height:42px; align-items:center; justify-content:center; background:none; border:1px solid var(--steel-600); }
.nav__toggle span { width:20px; height:2px; background:var(--paper); transition:transform .25s ease, opacity .2s ease; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* mobile menu */
.mobile-menu {
  position:fixed; top:var(--nav-h); left:0; right:0; z-index:999;
  background:var(--bg-1); border-bottom:1px solid var(--amber);
  display:flex; flex-direction:column; padding:24px var(--gutter) 34px; gap:6px;
  transform:translateY(-120%); transition:transform .35s cubic-bezier(.4,0,.2,1); visibility:hidden;
}
.mobile-menu.open { transform:translateY(0); visibility:visible; }
.mobile-menu__link {
  font-family:var(--f-cond); font-weight:700; font-size:1.5rem; text-transform:uppercase; letter-spacing:.04em;
  padding:14px 0; border-bottom:1px solid var(--steel-700);
}
.mobile-menu__phone { font-family:var(--f-mono); color:var(--amber); padding:18px 0 6px; letter-spacing:.08em; }
.mobile-menu__cta { margin-top:12px; }

/* =========================================================
   HERO
   ========================================================= */
.hero { position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; padding-top:var(--nav-h); padding-bottom:clamp(120px,18vh,230px); }
.hero__media { position:absolute; inset:0; z-index:0; }
.hero__img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  filter:grayscale(.06) brightness(.6) contrast(1.04);
}
/* desktop: show the whole helicopter contained on the right, not stretched full-bleed */
@media (min-width:861px) {
  .hero__img {
    inset:auto 0 24% auto; width:min(54%, 960px); height:66%;
    object-fit:contain; object-position:right bottom;
    filter:grayscale(.03) brightness(.92) contrast(1.03);
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 30%);
    mask-image:linear-gradient(to right, transparent 0, #000 30%);
  }
}
.hero__brushed { position:absolute; inset:-10% -10% -10% -10%; background:var(--brushed); opacity:.6; will-change:transform; }
.hero__scrim {
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(13,13,13,.94) 0%, rgba(13,13,13,.6) 42%, rgba(13,13,13,.25) 100%),
    linear-gradient(0deg, rgba(13,13,13,.96) 0%, rgba(13,13,13,.1) 46%, rgba(13,13,13,.55) 100%);
}
.hero__heat {
  position:absolute; left:6%; bottom:2%; width:66vw; height:46vw; max-width:840px; max-height:560px;
  background:radial-gradient(ellipse 62% 50% at 42% 64%, rgba(255,107,0,.52) 0%, rgba(255,107,0,0) 64%);
  transform:rotate(-3deg); opacity:.2; pointer-events:none; animation:breathe 2s ease-in-out infinite alternate; will-change:opacity;
}
@keyframes breathe { from{opacity:.14;} to{opacity:.26;} }
.hero__weld { position:absolute; left:0; right:0; bottom:0; width:100%; height:42%; z-index:1; pointer-events:none; }
.hero__line { position:absolute; left:0; right:0; bottom:10%; height:2px; background:var(--amber); z-index:1; pointer-events:none; }

.hero__content { position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); padding-block:clamp(40px,8vh,90px); }
.hero__content .gbadge { margin:0 0 30px; }
.hero__title { margin:6px 0 22px; }
.stamp {
  display:block; font-family:var(--f-display); font-weight:400; line-height:.88; letter-spacing:.02em;
  font-size:clamp(3.4rem,12vw,11rem); color:var(--paper); text-transform:uppercase;
}
.stamp--amber { color:transparent; background:linear-gradient(180deg,var(--amber-2),var(--amber)); -webkit-background-clip:text; background-clip:text; }
html.js .stamp { opacity:0; transform:scale(.95); animation:stampIn .55s cubic-bezier(.2,.85,.25,1) both; }
html.js .stamp:nth-of-type(1){ animation-delay:.28s; }
html.js .stamp:nth-of-type(2){ animation-delay:.46s; }
@keyframes stampIn {
  0% { opacity:0; transform:scale(.95); filter:brightness(1); }
  68% { opacity:1; transform:scale(1); filter:brightness(1); }
  80% { filter:brightness(1.85); }
  100% { opacity:1; transform:scale(1); filter:brightness(1); }
}
.hero__sub { max-width:560px; font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--paper); opacity:.92; }
.hero__cta { display:flex; align-items:center; gap:28px; margin-top:34px; margin-bottom:50px; flex-wrap:wrap; }

.hero__vlabel {
  position:absolute; right:30px; top:50%; transform:translateY(-50%) rotate(90deg); transform-origin:right center;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.4em; color:var(--paper-dim); white-space:nowrap; z-index:2;
  text-shadow:0 0 10px rgba(13,13,13,.95), 0 0 4px rgba(13,13,13,.9);
}
.hero__scroll {
  position:absolute; left:var(--gutter); bottom:24px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.3em; color:var(--paper-dim);
}
.hero__scroll svg { color:var(--amber); animation:nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);} }

/* =========================================================
   SHEARED DIVIDER
   ========================================================= */
.shear { position:absolute; top:0; left:0; width:100%; height:clamp(50px,7vw,110px); z-index:3; pointer-events:none; transform:translateY(-99%); }
.shear svg { width:100%; height:100%; display:block; }
.shear svg polygon { fill:var(--shear-fill,#111); }
.shear svg line { stroke:var(--amber); stroke-width:2; vector-effect:non-scaling-stroke; }

/* =========================================================
   SERVICES
   ========================================================= */
.services { background:var(--bg-1); --shear-fill:var(--bg-1); padding-top:clamp(18px,2.5vw,38px); }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.cards > :nth-child(4) { grid-column:span 1; }
.card {
  --ch:16px;
  position:relative; isolation:isolate; padding:34px 30px 40px; min-height:240px;
  display:flex; flex-direction:column;
  clip-path:polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
  background:none; overflow:hidden;
}
.card::before { content:""; position:absolute; inset:0; z-index:-2; background:var(--steel-600); clip-path:inherit; }
.card::after  { content:""; position:absolute; inset:1.4px; z-index:-1; background:linear-gradient(165deg,#171717,#0F0F0F); clip-path:inherit; background-image:var(--brushed),linear-gradient(165deg,#171717,#0F0F0F); }
.card__edge {
  position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--amber); z-index:1;
  transform:scaleX(0); transform-origin:left; transition:transform .28s ease;
}
.card:hover .card__edge { transform:scaleX(1); }
.card:hover .card__icon { color:var(--amber); }
.card__icon { width:52px; height:52px; color:var(--steel-500); margin-bottom:26px; transition:color .3s ease; }
.card__icon svg { width:100%; height:100%; }
.card__title { font-family:var(--f-cond); font-weight:800; font-size:1.5rem; letter-spacing:.03em; text-transform:uppercase; color:var(--paper); margin-bottom:12px; }
.card__desc { color:var(--paper-dim); font-size:.98rem; line-height:1.6; flex:1; }
.card__tag { margin-top:22px; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.18em; color:var(--paper-faint); }

/* =========================================================
   STATS
   ========================================================= */
.stats { background:var(--bg-2); border-block:1px solid var(--steel-700); }
.stats__grid { display:grid; grid-template-columns:repeat(4,1fr); }
.stat { padding:clamp(44px,6vw,72px) 28px; text-align:center; position:relative; }
.stat + .stat::before { content:""; position:absolute; left:0; top:18%; height:64%; width:1px; background:var(--steel-600); }
.stat__num {
  display:block; font-family:var(--f-mono); font-weight:700; font-size:clamp(2.6rem,5.5vw,4.2rem);
  line-height:1; color:var(--paper); letter-spacing:-.01em;
}
.stat__num.pulse { animation:numPulse .7s ease; }
@keyframes numPulse { 0%{text-shadow:0 0 0 rgba(255,107,0,0); color:var(--amber-2);} 40%{text-shadow:0 0 22px rgba(255,140,0,.7); color:#FFB860;} 100%{text-shadow:0 0 0 rgba(255,107,0,0); color:var(--paper);} }
.stat__label { display:block; margin-top:16px; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.22em; color:var(--paper-dim); }

/* =========================================================
   ABOUT
   ========================================================= */
.about { background:var(--bg-0); }
.about__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,84px); align-items:center; }
.about__body { color:var(--paper); opacity:.88; margin-top:22px; max-width:520px; }
.certs { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.cert {
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.12em; color:var(--arc);
  border:1px solid var(--steel-600); padding:9px 14px; background:var(--bg-1);
}
.about__figure { position:relative; }
.about__figure img {
  width:100%; height:clamp(360px,52vw,560px); object-fit:cover;
  clip-path:polygon(7% 0, 100% 0, 100% 90%, 94% 100%, 0 100%);
}
.about__cap {
  position:absolute; left:9%; bottom:18px; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em;
  color:var(--paper); background:rgba(13,13,13,.78); padding:8px 12px; border-left:2px solid var(--amber);
}

/* =========================================================
   WORK
   ========================================================= */
.work { background:var(--bg-1); }
.marquee { overflow:hidden; border-block:1px solid var(--steel-700); padding-block:20px; margin-block:clamp(34px,5vw,56px); background:var(--bg-0); }
.marquee__track { display:flex; align-items:center; gap:26px; width:max-content; animation:scrollx 36s linear infinite; }
.marquee__track span { font-family:var(--f-display); font-size:1.7rem; letter-spacing:.05em; color:var(--paper); white-space:nowrap; }
.marquee__track i { color:var(--amber); font-style:normal; font-size:.9rem; }
@keyframes scrollx { to { transform:translateX(-50%); } }

.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.shot { position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--steel-700); }
.shot img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease, filter .4s ease; filter:grayscale(.1); }
.shot__overlay {
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:4px; padding:20px;
  background:linear-gradient(0deg, rgba(13,13,13,.92) 0%, rgba(13,13,13,.1) 60%, transparent 100%);
  opacity:0; transition:opacity .3s ease;
}
.shot:hover img { transform:scale(1.04); filter:grayscale(0); }
.shot:hover .shot__overlay { opacity:1; }
.shot__type { font-family:var(--f-cond); font-weight:800; font-size:1.15rem; letter-spacing:.04em; text-transform:uppercase; color:var(--paper); }
.shot__mat { font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; color:var(--amber); }

/* =========================================================
   SERVICE AREA
   ========================================================= */
.area { background:var(--bg-0); --shear-fill:var(--bg-0); }
.area__grid { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(34px,5vw,80px); align-items:center; }
.area__body { color:var(--paper); opacity:.88; margin-top:22px; max-width:520px; }
.region-list { display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:30px; }
.region-list li {
  font-family:var(--f-mono); font-size:.82rem; letter-spacing:.08em; color:var(--paper-dim);
  border-left:2px solid var(--amber); padding-left:12px;
}
.area__radius { display:flex; justify-content:center; align-items:center; }
.radius { position:relative; width:min(380px,80vw); aspect-ratio:1; display:grid; place-items:center; }
.radius__ring { position:absolute; border:1px solid var(--steel-600); border-radius:50%; }
.radius__ring--1 { width:38%; height:38%; }
.radius__ring--2 { width:68%; height:68%; border-style:dashed; border-color:var(--steel-500); }
.radius__ring--3 { width:100%; height:100%; border-color:var(--amber); opacity:.55; }
.radius__core { width:14px; height:14px; background:var(--amber); border-radius:50%; box-shadow:0 0 0 6px rgba(255,107,0,.18); }
.radius__label { position:absolute; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.2em; color:var(--paper-dim); }
.radius__label--center { transform:translateY(34px); color:var(--paper); }
.radius__label--edge { top:6px; right:8%; color:var(--amber); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact { background:var(--bg-1); overflow:hidden; }
.contact__heat {
  position:absolute; right:-10%; top:10%; width:60vw; height:60vw; max-width:680px; max-height:680px;
  background:radial-gradient(circle, rgba(255,107,0,.4) 0%, rgba(255,107,0,0) 60%);
  opacity:.16; pointer-events:none; animation:breathe 2.4s ease-in-out infinite alternate;
}
.contact__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:start; position:relative; z-index:1; }
.contact__head { font-family:var(--f-display); font-weight:400; font-size:clamp(2.4rem,5.5vw,4.4rem); line-height:.94; letter-spacing:.02em; text-transform:uppercase; color:var(--paper); }
.contact__sub { color:var(--paper-dim); margin-top:20px; max-width:440px; }
.contact__phone {
  display:inline-block; font-family:var(--f-display); font-weight:400; font-size:clamp(3rem,7vw,5.4rem); line-height:1;
  letter-spacing:.02em; color:var(--amber); margin-top:30px;
}
.contact__phone:hover { color:var(--amber-2); }
.contact__note { font-family:var(--f-mono); font-size:.78rem; letter-spacing:.08em; color:var(--paper-faint); margin-top:22px; max-width:420px; line-height:1.7; }

.contact__form { display:flex; flex-direction:column; gap:30px; padding-top:8px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.field { position:relative; }
.field input, .field textarea {
  width:100%; background:transparent; border:none; border-bottom:2px solid var(--steel-600);
  padding:14px 2px 12px; color:var(--paper); font-family:var(--f-body); font-size:1.05rem; resize:vertical;
  transition:border-color .25s ease;
}
.field textarea { min-height:96px; }
.field label {
  position:absolute; left:2px; top:14px; font-family:var(--f-mono); font-size:.86rem; letter-spacing:.06em;
  color:var(--paper-dim); pointer-events:none; transition:transform .2s ease, color .2s ease, font-size .2s ease;
}
.field input:focus, .field textarea:focus { outline:none; border-bottom-color:var(--amber); }
.field input:focus + label, .field textarea:focus + label,
.field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label {
  transform:translateY(-26px); font-size:.68rem; color:var(--amber); letter-spacing:.18em;
}
.form-status { font-family:var(--f-mono); font-size:.84rem; letter-spacing:.06em; color:var(--arc); min-height:1.2em; }
.form-status.err { color:#FF7A55; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background:var(--bg-0); border-top:1px solid var(--amber); padding-block:clamp(44px,6vw,68px); }
.footer__inner { display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:34px; align-items:start; }
.footer__tagline { color:var(--paper-dim); margin-top:14px; font-size:.95rem; }
.footer__nav { display:flex; flex-direction:column; gap:12px; }
.footer__nav a { font-family:var(--f-cond); font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--paper); width:fit-content; }
.footer__nav a:hover { color:var(--amber); }
.footer__meta { text-align:right; }
.footer__phone { font-family:var(--f-mono); font-size:1.1rem; color:var(--amber); letter-spacing:.06em; }
.footer__license, .footer__copy { font-family:var(--f-mono); font-size:.74rem; letter-spacing:.06em; color:var(--paper-faint); margin-top:12px; }

/* =========================================================
   SCROLL REVEALS (only active when JS is on)
   ========================================================= */
html.js [data-reveal] { opacity:0; }
html.js .reveal-title { clip-path:inset(0 100% 0 0); opacity:1; transition:clip-path .65s cubic-bezier(.2,.7,.2,1); }
html.js .reveal-card { opacity:0; transform:translateY(42px) rotate(.5deg); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i,0)*90ms); }
html.js .reveal-img { opacity:1; clip-path:inset(0 0 0 100%); transition:clip-path .7s cubic-bezier(.4,0,.1,1); }

html.js .reveal-title.in { clip-path:inset(0 0 0 0); }
html.js .reveal-card.in { opacity:1; transform:translateY(0) rotate(0); }
html.js .reveal-img.in { clip-path:inset(0 0 0 0); }
html.js [data-reveal].in { opacity:1; }

/* =========================================================
   REVIEWS BADGE + SHOP / FIND US + SOCIAL (home)
   ========================================================= */
/* Google reviews badge */
.gbadge { display:inline-flex; align-items:center; gap:16px; margin-top:30px; padding:15px 22px; width:fit-content; position:relative;
  background-image:var(--brushed), linear-gradient(165deg,#181818,#0f0f0f); border:1px solid var(--steel-600);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px); transition:border-color .25s ease; }
.gbadge::after { content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform .28s ease; }
.gbadge:hover { border-color:var(--steel-500); }
.gbadge:hover::after { transform:scaleX(1); }
.gbadge__g { flex:0 0 auto; width:30px; height:30px; }
.gbadge__g svg { display:block; width:100%; height:100%; }
.gbadge__divide { align-self:stretch; width:1px; background:var(--steel-600); margin:3px 0; }
.gbadge__main { display:flex; flex-direction:column; gap:7px; }
.gbadge__top { display:flex; align-items:center; gap:12px; }
.gbadge__score { font-family:var(--f-display); font-size:2.1rem; line-height:.72; color:var(--paper); letter-spacing:.03em; }
.gbadge__stars { display:inline-flex; gap:2px; }
.gbadge__stars svg { display:block; width:17px; height:17px; }
.gbadge__sub { display:flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--paper-dim); }
.gbadge:hover .gbadge__sub { color:var(--paper); }
.gbadge__sub svg { width:12px; height:12px; transition:transform .25s ease; }
.gbadge:hover .gbadge__sub svg { transform:translateX(3px); }

.shop { background:var(--bg-2); }
.shop__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,72px); align-items:center; }
.shop__lead { color:var(--paper); opacity:.88; margin-top:20px; max-width:480px; }
.nap { margin-top:32px; display:flex; flex-direction:column; gap:20px; }
.nap__row { display:grid; grid-template-columns:90px 1fr; gap:18px; align-items:start; }
.nap dt { font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em; color:var(--amber); padding-top:4px; }
.nap dd { color:var(--paper); line-height:1.5; }
.nap dd a:hover { color:var(--amber); }
.hours { border-collapse:collapse; }
.hours th { text-align:left; font-weight:500; color:var(--paper); padding:3px 30px 3px 0; font-family:var(--f-body); }
.hours td { color:var(--paper-dim); font-family:var(--f-mono); font-size:.84rem; padding:3px 0; }
.shop__actions { display:flex; flex-wrap:wrap; gap:16px; margin-top:32px; }
.shop__map { border:1px solid var(--steel-600); overflow:hidden; min-height:380px; height:100%;
  clip-path:polygon(0 0, 100% 0, 100% 92%, 95% 100%, 0 100%); }
.shop__map iframe { display:block; width:100%; height:100%; min-height:380px; border:0;
  filter:invert(.92) hue-rotate(180deg) grayscale(.2) contrast(.9) brightness(.95); }

.footer__addr { font-family:var(--f-mono); font-size:.76rem; letter-spacing:.04em; color:var(--paper-faint); margin-top:10px; }
.footer__social { display:flex; align-items:center; gap:18px; margin-top:16px; justify-content:flex-end; }
.social { display:inline-flex; align-items:center; gap:7px; color:var(--paper-dim); font-family:var(--f-mono); font-size:.78rem; letter-spacing:.06em; }
.social svg { width:22px; height:22px; }
.social:hover { color:var(--amber); }
.social--rev span { color:var(--amber); font-size:.95rem; }

/* =========================================================
   BLOG INDEX
   ========================================================= */
.blog-hero { padding-top:calc(var(--nav-h) + clamp(50px,9vw,108px)); padding-bottom:clamp(28px,5vw,56px); background:var(--bg-0); border-bottom:1px solid var(--steel-700); position:relative; }
.blog-hero__title { font-family:var(--f-display); font-weight:400; font-size:clamp(3rem,9vw,7rem); line-height:.9; letter-spacing:.02em; text-transform:uppercase; color:var(--paper); }
.blog-hero__sub { margin-top:18px; max-width:640px; color:var(--paper-dim); font-size:1.1rem; }

.blog-cats { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(30px,4vw,48px); }
.cat-chip { font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--paper-dim);
  border:1px solid var(--steel-600); background:transparent; padding:9px 16px; cursor:pointer;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); transition:color .2s, border-color .2s, background .2s; }
.cat-chip:hover { color:var(--paper); border-color:var(--steel-500); }
.cat-chip.is-active { color:#0D0D0D; background:var(--amber); border-color:var(--amber); }

.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.post-card { position:relative; border:1px solid var(--steel-600); background:linear-gradient(165deg,#161616,#0F0F0F); overflow:hidden; transition:border-color .25s;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px); }
.post-card:hover { border-color:var(--steel-500); }
.post-card__link { display:flex; flex-direction:column; height:100%; }
.post-card__fig { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--steel-700); }
.post-card__fig img { width:100%; height:100%; object-fit:cover; filter:grayscale(.15); transition:transform .5s ease, filter .4s ease; }
.post-card:hover .post-card__fig img { transform:scale(1.05); filter:grayscale(0); }
.post-card__cat { position:absolute; left:0; bottom:0; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--paper); background:rgba(13,13,13,.85); border-top:2px solid var(--amber); padding:6px 12px; }
.post-card__body { padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.post-card__title { font-family:var(--f-cond); font-weight:800; font-size:1.38rem; line-height:1.08; text-transform:uppercase; letter-spacing:.01em; color:var(--paper); transition:color .2s; }
.post-card:hover .post-card__title { color:var(--amber); }
.post-card__dek { margin-top:12px; color:var(--paper-dim); font-size:.94rem; line-height:1.55; flex:1; }
.post-card__meta { margin-top:18px; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; color:var(--paper-faint); text-transform:uppercase; }
.post-card__edge { position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform .28s ease; }
.post-card:hover .post-card__edge { transform:scaleX(1); }
.post-card--feat { grid-column:span 2; }
.post-card--feat .post-card__fig { aspect-ratio:2/1; }
.post-card--feat .post-card__title { font-size:2rem; }
.post-card.is-hidden { display:none; }

/* =========================================================
   ARTICLE
   ========================================================= */
.article { padding-top:var(--nav-h); }
.article__wrap { max-width:768px; margin-inline:auto; padding:clamp(34px,5vw,60px) var(--gutter); }
.crumbs { font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; color:var(--paper-faint); margin-bottom:28px; text-transform:uppercase; }
.crumbs a:hover { color:var(--amber); }
.crumbs span { color:var(--paper-dim); }
.article__cat { font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em; color:var(--amber); text-transform:uppercase; }
.article__head h1 { font-family:var(--f-display); font-weight:400; font-size:clamp(2.3rem,5.6vw,4.2rem); line-height:.98; letter-spacing:.02em; text-transform:uppercase; color:var(--paper); margin:14px 0 0; }
.article__dek { margin-top:18px; font-size:1.22rem; line-height:1.5; color:var(--paper); opacity:.92; }
.article__meta { margin-top:18px; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; color:var(--paper-faint); text-transform:uppercase; }
.article__hero { margin:clamp(28px,4vw,44px) 0; border:1px solid var(--steel-600); overflow:hidden; clip-path:polygon(0 0,100% 0,100% 92%,96% 100%,0 100%); }
.article__hero img { display:block; width:100%; height:clamp(240px,42vw,440px); object-fit:cover; }
.article__body { font-size:1.08rem; line-height:1.75; color:var(--paper); }
.article__body > p { margin-bottom:1.3em; opacity:.92; }
.article__body h2 { font-family:var(--f-cond); font-weight:800; font-size:clamp(1.6rem,3vw,2.1rem); text-transform:uppercase; letter-spacing:.01em; color:var(--paper); margin:1.9em 0 .7em; padding-top:.5em; border-top:1px solid var(--steel-700); }
.article__body ul { margin:0 0 1.4em; padding-left:0; list-style:none; }
.article__body li { position:relative; padding-left:24px; margin-bottom:.6em; color:var(--paper); opacity:.92; }
.article__body li::before { content:"\25C6"; position:absolute; left:0; top:.4em; color:var(--amber); font-size:.66em; }
.article__body a { color:var(--amber); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.article__body a:hover { color:var(--amber-2); }
.takeaways { border:1px solid var(--steel-600); border-left:3px solid var(--amber); background:var(--bg-1); padding:24px 26px; margin:0 0 2em; }
.takeaways h2 { border:0; padding:0; margin:0 0 14px; font-size:.95rem; letter-spacing:.18em; color:var(--amber); font-family:var(--f-mono); font-weight:500; }
.takeaways ul { margin:0; }
.faq { margin-top:2.4em; }
.faq h2 { font-family:var(--f-cond); font-weight:800; font-size:clamp(1.6rem,3vw,2.1rem); text-transform:uppercase; color:var(--paper); padding-top:.5em; border-top:1px solid var(--steel-700); }
.faq dt { font-family:var(--f-cond); font-weight:700; font-size:1.22rem; color:var(--paper); margin-top:1.3em; }
.faq dd { margin:.5em 0 0; color:var(--paper-dim); }
.article__closing { font-size:1.16rem; color:var(--paper); margin-top:2em; }
.article__cta { margin-top:2.6em; padding:30px; border:1px solid var(--steel-600); background:linear-gradient(135deg,#1b1b1b,#0f0f0f);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px); }
.article__cta-text { font-family:var(--f-cond); font-weight:800; font-size:1.5rem; text-transform:uppercase; color:var(--paper); line-height:1; }
.article__cta-phone { font-family:var(--f-mono); color:var(--amber); font-size:.86rem; margin-top:8px; letter-spacing:.06em; }
.related { max-width:1120px; margin:clamp(40px,6vw,80px) auto 0; padding-inline:var(--gutter); }
.related > h2 { font-family:var(--f-display); font-size:2.2rem; letter-spacing:.02em; color:var(--paper); text-transform:uppercase; margin-bottom:24px; }
.related__grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px) {
  .footer__meta .footer__social { justify-content:flex-start; }
}
@media (max-width:860px) {
  .shop__grid { grid-template-columns:1fr; }
  .shop__map { order:-1; min-height:300px; }
  .shop__map, .shop__map iframe { min-height:300px; }
  .post-grid { grid-template-columns:repeat(2,1fr); }
  .post-card--feat { grid-column:span 2; }
  .related__grid { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .field-row { grid-template-columns:1fr; gap:30px; }
  .post-grid { grid-template-columns:1fr; }
  .post-card--feat { grid-column:span 1; }
  .post-card--feat .post-card__title { font-size:1.5rem; }
  .article__cta { flex-direction:column; align-items:flex-start; }
}
@media (max-width:1024px) {
  .cards { grid-template-columns:repeat(2,1fr); }
  .footer__inner { grid-template-columns:1fr 1fr; }
  .footer__meta { grid-column:1 / -1; text-align:left; }
}
@media (max-width:860px) {
  .nav__links, .nav__phone, .nav__cta { display:none; }
  .nav__toggle { display:flex; }
  .about__grid, .contact__grid, .area__grid { grid-template-columns:1fr; }
  .about__grid { gap:40px; }
  .area__radius { order:-1; }
  .stats__grid { grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(3)::before, .stat:nth-child(odd)::before { display:none; }
  .gallery { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px) {
  .cards { grid-template-columns:1fr; }
  .gallery { grid-template-columns:1fr; }
  .hero__vlabel { display:none; }
  .hero__cta { gap:18px; }
  .btn--lg { font-size:1rem; padding:18px 22px; white-space:normal; text-align:center; }
  .stat + .stat::before { display:none; }
  .stats__grid { grid-template-columns:1fr 1fr; gap:1px; background:var(--steel-600); }
  .stat { background:var(--bg-2); padding-block:44px; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  html.js [data-reveal] { opacity:1 !important; clip-path:none !important; transform:none !important; }
  .hero__heat, .contact__heat { animation:none; opacity:.18; }
  .marquee__track { animation:none; }
  .hero__scroll svg { animation:none; }
}
