/* COPY → assets/css/style.css */

:root{
  --bg:#0c0f12;
  --panel:#11161b;
  --panel-2:#0f1419;
  --ink:#e9ecef;
  --muted:rgba(233,236,239,.74);

  --bone:#f2efe6;
  --orange:#1aff1a;
  --orange-2:#08ac2c;
  --spectral:#42f5b2;
  --spectral-dim:rgba(66,245,178,.22);

  --line:rgba(255,255,255,.10);
  --shadow:0 18px 55px rgba(0,0,0,.55);

  --radius:18px;
  --radius-sm:12px;
  --container:1140px;

  --hfont:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans","Liberation Sans",sans-serif;
  --bfont:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans","Liberation Sans",sans-serif;

  --ease:cubic-bezier(.2,.8,.2,1);
  --ease2:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html,body{height:100%}

/* --- MOBILE OVERFLOW KILL SWITCH (prevents sideways sliding) --- */
html, body{
  width:100%;
  max-width:100%;
  overflow-x: clip;
}

@supports not (overflow: clip){
  html, body{ overflow-x: hidden; }
}

/* Helps isolate wide positioned layers */
.site-header, .site-footer, .site-main{
  max-width:100%;
  overflow-x: clip;
}

@supports not (overflow: clip){
  .site-header, .site-footer, .site-main{ overflow-x: hidden; }
}

/* Long text (service area, emails, etc.) must wrap */
*{
  overflow-wrap: break-word;
  word-break: break-word;
}


body{
  margin:0;
  font-family:var(--bfont);
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  overflow-x:hidden;
}

/* Ambient grit + smoke overlays */
body::before,body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
}
body::before{
  background:
    radial-gradient(1200px 650px at 18% 10%, rgba(66,245,178,0.10), transparent 60%),
    radial-gradient(900px 520px at 82% 18%, rgba(255,106,26,0.10), transparent 60%),
    radial-gradient(700px 500px at 60% 75%, rgba(255,255,255,0.06), transparent 65%),
    linear-gradient(180deg, #0b0e11, #0c0f12 55%, #0a0d10);
  opacity:.95;
}
body::after{
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.020) 0px, rgba(255,255,255,0.020) 1px, transparent 2px, transparent 6px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 2px, transparent 7px);
  mix-blend-mode:overlay;
  opacity:.22;
  filter:blur(.2px);
}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
p{margin:0 0 1rem}
img{max-width:100%;height:auto;display:block}

.container{
  width:min(var(--container),calc(100% - 2rem));
  margin-inline:auto;
  position:relative;
  z-index:1;
}

.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;
  left:1rem;top:.8rem;
  transform:translateY(-200%);
  background:var(--panel);
  border:1px solid var(--line);
  padding:.65rem .9rem;
  border-radius:999px;
  z-index:999;
  transition:transform 180ms var(--ease);
}
.skip-link:focus{transform:translateY(0)}

/* Smooth overall */
*{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto}
}

/* ------------------------
   Reveal animation system
------------------------- */
.reveal{
  opacity:0;
  transform:translateY(12px) scale(.995);
  filter:blur(2px);
  transition:
    opacity 520ms var(--ease2),
    transform 520ms var(--ease2),
    filter 520ms var(--ease2);
  will-change:opacity,transform,filter;
}
.reveal.is-inview{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}

/* ------------------------
   Header
------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(12,15,18,.72);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:1rem;
  align-items:center;
  padding:.85rem 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  text-decoration:none!important;
}
.brand-mark{
  width:44px;height:44px;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.55));
  transform:translateZ(0);
}
.brand-name{
  font-family:var(--hfont);
  letter-spacing:.4px;
  font-weight:1000;
  font-size:1.05rem;
  text-transform:uppercase;
}
.brand-tag{
  display:block;
  font-size:.86rem;
  color:var(--muted);
}

.nav{position:relative}
.nav-toggle{
  display:none;
  border:1px solid var(--line);
  background:rgba(17,22,27,.6);
  color:var(--ink);
  border-radius:14px;
  padding:.55rem .7rem;
  cursor:pointer;
}
.nav-toggle-bars{
  width:18px;height:12px;
  display:inline-block;
  background:
    linear-gradient(var(--ink),var(--ink)) 0 0/100% 2px,
    linear-gradient(var(--ink),var(--ink)) 0 50%/100% 2px,
    linear-gradient(var(--ink),var(--ink)) 0 100%/100% 2px;
  background-repeat:no-repeat;
  opacity:.85;
}

.nav-menu{
  list-style:none;
  display:flex;
  gap:.2rem;
  padding:0;margin:0;
  align-items:center;
}
.nav-link{
  display:inline-flex;
  padding:.55rem .85rem;
  border-radius:999px;
  border:1px solid transparent;
  color:rgba(233,236,239,.88);
  font-weight:800;
  letter-spacing:.2px;
  transition:background 160ms var(--ease), transform 160ms var(--ease);
}
.nav-link:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.06);
  text-decoration:none;
  transform:translateY(-1px);
}
.nav-link.is-active{
  background:rgba(66,245,178,.08);
  border-color:rgba(66,245,178,.22);
  box-shadow:0 0 0 1px rgba(66,245,178,.05) inset;
}

.header-cta{
  display:flex;
  gap:.6rem;
  justify-content:flex-end;
}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.55rem .85rem;
  border-radius:999px;
  border:1px solid var(--line);
  font-weight:900;
  letter-spacing:.2px;
  text-decoration:none!important;
  transition:transform 160ms var(--ease), background 160ms var(--ease), box-shadow 160ms var(--ease);
}
.pill:hover{transform:translateY(-1px); box-shadow:0 14px 40px rgba(0,0,0,.35)}
.pill-ghost{
  background:linear-gradient(180deg, rgba(255,106,26,.96), rgba(255,106,26,.72));
  border-color:rgba(255,106,26,.45);
  color:#140a05;
}
.pill-outline{
  background:rgba(17,22,27,.45);
}

.header-glow{
  position:absolute;
  left:10%; right:10%;
  bottom:-1px;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(66,245,178,.35), rgba(255,106,26,.35), transparent);
  opacity:.6;
}

.ambient-mist{
  position:absolute;
  inset:0;                /* IMPORTANT: no negative inset */
  pointer-events:none;
  background:
    radial-gradient(520px 240px at 20% 20%, rgba(66,245,178,.12), transparent 70%),
    radial-gradient(620px 260px at 80% 30%, rgba(255,106,26,.10), transparent 72%),
    radial-gradient(700px 320px at 55% 70%, rgba(255,255,255,.06), transparent 75%);
  filter:blur(18px);
  opacity:.55;

  /* Instead of negative inset, scale it visually */
  transform:scale(1.18);
  transform-origin:center;

  animation:mistFloat 12s var(--ease2) infinite alternate;
}

@keyframes mistFloat{
  from{transform:translate3d(-10px,0,0)}
  to{transform:translate3d(10px,-6px,0)}
}

/* ------------------------
   HUD (Haunt Score)
------------------------- */
.hud{
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(12,15,18,.55);
}
.hud-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:.55rem 0;
}
.hud-chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem .65rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(17,22,27,.45);
}
.hud-dot{
  width:10px;height:10px;border-radius:50%;
  background:rgba(66,245,178,.22);
  border:1px solid rgba(66,245,178,.40);
  box-shadow:0 0 18px rgba(66,245,178,.18);
}
.hud-label{font-weight:900; letter-spacing:.3px; text-transform:uppercase; font-size:.78rem; color:rgba(233,236,239,.76)}
.hud-score{font-weight:1000; letter-spacing:.3px}
.hud-sub{margin-left:.6rem; color:rgba(233,236,239,.62); font-size:.9rem}
.hud-btn{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(17,22,27,.45);
  color:rgba(233,236,239,.9);
  border-radius:14px;
  padding:.35rem .65rem;
  font-weight:900;
  cursor:pointer;
  transition:transform 160ms var(--ease), background 160ms var(--ease);
}
.hud-btn:hover{transform:translateY(-1px); background:rgba(17,22,27,.60)}
.hud-chevron{opacity:.7; margin-left:.25rem}

.badge-tray{
  margin:.25rem 0 1rem;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(17,22,27,.45);
  padding:1rem;
  box-shadow:0 18px 55px rgba(0,0,0,.35);
}
.badge-tray-title{
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.6px;
  margin-bottom:.75rem;
}
.badge-tray-grid{
  display:grid;
  gap:.75rem;
  grid-template-columns:repeat(3, 1fr);
}
.badge-empty{
  color:rgba(233,236,239,.68);
  border:1px dashed rgba(255,255,255,.14);
  border-radius:var(--radius);
  padding:1rem;
  grid-column:1/-1;
}
.badge-card{
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(17,22,27,.60), rgba(15,20,25,.45));
  padding:.85rem;
  position:relative;
  overflow:hidden;
}
.badge-card::before{
  content:"";
  position:absolute;
  inset:-60px;
  background:radial-gradient(260px 180px at 20% 20%, rgba(66,245,178,.14), transparent 70%);
  filter:blur(14px);
  opacity:.75;
}
.badge-card-title{position:relative; font-weight:1000; letter-spacing:.35px}
.badge-card-sub{position:relative; color:rgba(233,236,239,.62); font-size:.9rem; margin-top:.25rem}
.badge-tray-note{color:rgba(233,236,239,.55); margin-top:.75rem; font-size:.9rem}

/* ------------------------
   Main spacing / Buttons
------------------------- */
.site-main{padding-bottom:2rem}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.85rem 1.1rem;
  border-radius:16px;
  font-weight:950;
  letter-spacing:.3px;
  border:1px solid transparent;
  text-decoration:none!important;
  cursor:pointer;
  transition:transform 180ms var(--ease2), box-shadow 180ms var(--ease2), background 180ms var(--ease2);
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(180deg, var(--orange), rgba(26, 255, 129, 0.78));
  color:#150b05;
  box-shadow:0 12px 30px rgba(255,106,26,.18);
  border-color:rgba(17, 209, 27, 0.76);
}
.btn-secondary{
  background:rgba(17,22,27,.55);
  border-color:rgba(255,255,255,.10);
}
.btn-secondary:hover{box-shadow:0 16px 40px rgba(0,0,0,.40)}

/* ------------------------
   Sections
------------------------- */
.section-head{display:grid; gap:.35rem; margin-bottom:1.2rem}
.section-head h2{
  font-family:var(--hfont);
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.6px;
  margin:0;
  font-size:clamp(1.25rem, 1.2rem + 1.1vw, 1.85rem);
}
.section-head p{color:var(--muted); margin:0; max-width:70ch}
.kicker{
  display:inline-block;
  color:rgba(233,236,239,.75);
  font-weight:900;
  letter-spacing:.45px;
  text-transform:uppercase;
  margin:0 0 .55rem;
  font-size:.88rem;
}

/* ------------------------
   Hero
------------------------- */
.hero{position:relative; padding:3.2rem 0 2.2rem}
.hero-inner{display:grid; gap:1.5rem; grid-template-columns:1.1fr .9fr; align-items:start}
.hero-title{
  font-family:var(--hfont);
  font-weight:1100;
  text-transform:uppercase;
  letter-spacing:.9px;
  margin:0 0 .65rem;
  font-size:clamp(2.0rem, 1.4rem + 2.7vw, 3.35rem);
  line-height:1.05;
}
.hero-title .accent{
  color:var(--bone);
  text-shadow:0 0 28px rgba(66,245,178,.14);
}
.hero-subtitle{
  color:rgba(233,236,239,.82);
  font-weight:700;
  font-size:1.15rem;
  margin:0 0 1.2rem;
}
.hero-actions{display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:1.3rem}
.hero-trust{display:grid; gap:.75rem; margin-top:1rem}

.trust-item{
  display:grid;
  grid-template-columns:40px 1fr;
  gap:.75rem;
  padding:.85rem .9rem;
  border-radius:var(--radius-sm);
  background:rgba(17,22,27,.52);
  border:1px solid rgba(255,255,255,.08);
  transition:transform 180ms var(--ease2), box-shadow 180ms var(--ease2);
}
.trust-item:hover{transform:translateY(-2px); box-shadow:0 16px 44px rgba(0,0,0,.32)}
.trust-icon{
  width:40px;height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(66,245,178,.10);
  border:1px solid rgba(66,245,178,.20);
}
.trust-title{font-weight:1000; letter-spacing:.3px}
.trust-text{color:var(--muted); font-size:.95rem}

.hero-visual{
  position:relative;
  border-radius:var(--radius);
  background:
    radial-gradient(900px 450px at 30% 0%, rgba(66,245,178,.12), transparent 60%),
    radial-gradient(700px 420px at 80% 40%, rgba(255,106,26,.12), transparent 60%),
    linear-gradient(180deg, rgba(17,22,27,.65), rgba(15,20,25,.45));
  border:1px solid rgba(255,255,255,.08);
  padding:1.1rem;
  overflow:hidden;
  box-shadow:var(--shadow);
  min-height:420px;
  transform:translateZ(0);
}
.ghost-mist{
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(420px 220px at 22% 30%, rgba(66,245,178,.16), transparent 70%),
    radial-gradient(520px 240px at 75% 42%, rgba(255,255,255,.10), transparent 70%),
    radial-gradient(600px 260px at 60% 72%, rgba(66,245,178,.10), transparent 70%);
  filter:blur(18px);
  opacity:.65;
  transition:transform 240ms var(--ease2);
}
.sigil{
  position:relative;
  width:160px;height:160px;
  margin:.25rem 0 1rem;
  display:grid; place-items:center;
}
.sigil-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid rgba(66,245,178,.25);
  box-shadow:0 0 0 10px rgba(66,245,178,.04) inset, 0 0 28px rgba(66,245,178,.12);
  animation:ringPulse 3.4s var(--ease2) infinite;
}
@keyframes ringPulse{
  0%{transform:scale(1); opacity:.95}
  100%{transform:scale(1.02); opacity:.78}
}
.sigil-ring::after{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:50%;
  border:1px dashed rgba(255,255,255,.18);
  opacity:.8;
}
.sigil-mark{
  position:relative;
  z-index:2;
  font-weight:1100;
  letter-spacing:1px;
  font-family:var(--hfont);
  color:var(--bone);
  font-size:2.25rem;
  text-shadow:0 0 24px rgba(66,245,178,.14);
}
.industrial-card{
  position:relative;
  z-index:2;
  padding:1rem 1rem 1.1rem;
  border-radius:var(--radius);
  background:rgba(12,15,18,.55);
  border:1px solid rgba(255,255,255,.10);
  transition:transform 180ms var(--ease2);
}
.industrial-card:hover{transform:translateY(-2px)}
.industrial-title{
  font-weight:1050;
  letter-spacing:.35px;
  text-transform:uppercase;
  margin-bottom:.45rem;
}
.industrial-body{color:var(--muted); margin-bottom:.85rem}
.industrial-meta{display:flex; gap:.5rem; flex-wrap:wrap}
.meta-chip{
  font-size:.85rem;
  padding:.32rem .55rem;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

/* ------------------------
   Grids / Cards
------------------------- */
.grid{display:grid; gap:1rem}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

.card{
  background:rgba(17,22,27,.55);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:1rem;
  box-shadow:0 16px 44px rgba(0,0,0,.32);
  transition:transform 180ms var(--ease2), box-shadow 180ms var(--ease2);
}
.card:hover{transform:translateY(-2px); box-shadow:0 22px 60px rgba(0,0,0,.42)}
.card h3{
  margin:0 0 .45rem;
  font-family:var(--hfont);
  font-weight:1050;
  text-transform:uppercase;
  letter-spacing:.55px;
}
.card p{color:var(--muted)}
.list{margin:.75rem 0 0; padding-left:1.1rem; color:rgba(233,236,239,.78)}
.list li{margin:.35rem 0}

.value{padding:1.6rem 0 1rem}
.sizes{padding:1.2rem 0 1.8rem}
.local-seo{padding:1.6rem 0 2.2rem}

/* ------------------------
   Sizes
------------------------- */
.size-card{
  border-radius:var(--radius);
  padding:1rem;
  background:linear-gradient(180deg, rgba(17,22,27,.60), rgba(15,20,25,.45));
  border:1px solid rgba(255,255,255,.08);
  position:relative;
  overflow:hidden;
}
.size-card::before{
  content:"";
  position:absolute;
  inset:-60px;
  background:radial-gradient(300px 180px at 20% 20%, rgba(66,245,178,.10), transparent 70%);
  filter:blur(12px);
  opacity:.8;
}
.size-top{
  position:relative;
  display:grid;
  grid-template-columns:56px 1fr;
  gap:.75rem;
  align-items:center;
}
.size-yard{
  width:56px;height:56px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-weight:1100;
  font-family:var(--hfont);
  background:rgba(255,106,26,.14);
  border:1px solid rgba(255,106,26,.30);
  color:var(--bone);
}
.size-title{font-weight:1050; text-transform:uppercase; letter-spacing:.55px}
.size-sub{color:var(--muted); font-size:.95rem}
.size-rule{position:relative;height:1px;background:rgba(255,255,255,.10);margin:.85rem 0}
.size-copy{position:relative;color:rgba(233,236,239,.78);margin:0}

/* CTA strip */
.cta-strip{
  margin-top:1.2rem;
  border-radius:var(--radius);
  padding:1rem;
  background:linear-gradient(90deg, rgba(66,245,178,.10), rgba(255,106,26,.08));
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}
.cta-strip-title{font-weight:1100; text-transform:uppercase; letter-spacing:.65px}
.cta-strip-sub{color:var(--muted)}
.cta-strip-actions{display:flex; gap:.7rem; flex-wrap:wrap}

/* ------------------------
   Gamified meter / Quest panel
------------------------- */
.quest{
  margin-top:1rem;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(17,22,27,.60), rgba(15,20,25,.45));
  box-shadow:0 18px 55px rgba(0,0,0,.34);
  padding:1rem;
  overflow:hidden;
  position:relative;
}
.quest::before{
  content:"";
  position:absolute;
  inset:-80px;
  background:
    radial-gradient(520px 240px at 20% 20%, rgba(66,245,178,.14), transparent 70%),
    radial-gradient(520px 240px at 85% 40%, rgba(255,106,26,.12), transparent 72%);
  filter:blur(18px);
  opacity:.75;
}
.quest-head{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
}
.quest-kicker{
  color:rgba(233,236,239,.72);
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.55px;
  font-size:.85rem;
}
.quest-title{
  margin:.25rem 0 .25rem;
  font-family:var(--hfont);
  font-weight:1100;
  text-transform:uppercase;
  letter-spacing:.6px;
}
.quest-sub{color:var(--muted); margin:0}
.quest-score{position:relative}
.quest-chip{
  display:inline-flex;
  padding:.35rem .6rem;
  border-radius:999px;
  border:1px solid rgba(66,245,178,.25);
  background:rgba(66,245,178,.08);
  font-weight:1000;
  letter-spacing:.3px;
}

.meter{position:relative; margin-top:1rem}
.meter-row{display:flex; justify-content:space-between; align-items:center; gap:1rem}
.meter-label{font-weight:1000; letter-spacing:.3px}
.meter-output{
  padding:.25rem .55rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(12,15,18,.45);
  font-weight:950;
}
.meter-range{width:100%; margin:.85rem 0}
.meter-scale{display:flex; justify-content:space-between; color:rgba(233,236,239,.62); font-size:.92rem}
.meter-result{
  margin-top:.85rem;
  padding:.85rem;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(12,15,18,.45);
}
.meter-note{display:block; color:rgba(233,236,239,.62); margin-top:.25rem}
.meter-actions{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.85rem}

/* ------------------------
   Page head
------------------------- */
.page-head{padding:2.4rem 0 1rem}
.page-head h1{
  margin:0 0 .45rem;
  font-family:var(--hfont);
  font-weight:1100;
  text-transform:uppercase;
  letter-spacing:.9px;
  font-size:clamp(2.0rem, 1.35rem + 2.3vw, 3.0rem);
}
.lead{color:var(--muted); max-width:75ch; margin:0}

/* ------------------------
   Portfolio
------------------------- */
.filter-row{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem}
.chip{
  display:inline-flex;
  padding:.45rem .75rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(17,22,27,.50);
  font-weight:950;
  color:rgba(233,236,239,.86);
  text-decoration:none!important;
  transition:transform 160ms var(--ease2), background 160ms var(--ease2);
}
.chip:hover{transform:translateY(-1px)}
.chip.is-active{
  border-color:rgba(66,245,178,.25);
  background:rgba(66,245,178,.08);
}

.portfolio{padding:1rem 0 1.6rem}
.portfolio-grid{display:grid; gap:1rem; grid-template-columns:repeat(3,1fr)}
.project{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(17,22,27,.55);
  box-shadow:0 18px 55px rgba(0,0,0,.42);
  display:grid;
  transition:transform 180ms var(--ease2), box-shadow 180ms var(--ease2);
}
.project:hover{transform:translateY(-3px); box-shadow:0 26px 75px rgba(0,0,0,.55)}
.project-media{
  position:relative;
  aspect-ratio:3/2;
  overflow:hidden;
  background:rgba(0,0,0,.2);
}
.project-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.02);
  filter:contrast(1.05) saturate(1.02);
  transition:transform 800ms var(--ease2), filter 800ms var(--ease2);
}
.project:hover .project-media img{transform:scale(1.06); filter:contrast(1.10) saturate(1.05)}
.project-glow{
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(360px 180px at 30% 20%, rgba(66,245,178,.14), transparent 65%),
    radial-gradient(420px 220px at 80% 40%, rgba(255,106,26,.10), transparent 70%);
  filter:blur(16px);
  opacity:.6;
  pointer-events:none;
}
.project-body{padding:1rem}
.project-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.45rem;
}
.project-title{
  margin:0;
  font-family:var(--hfont);
  font-weight:1050;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-size:1.05rem;
}
.project-badge{
  font-weight:1050;
  letter-spacing:.35px;
  text-transform:uppercase;
  font-size:.78rem;
  padding:.25rem .55rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  white-space:nowrap;
}
.project-desc{color:var(--muted); margin:0 0 .75rem}
.project-meta{display:flex; gap:.65rem; flex-wrap:wrap; color:rgba(233,236,239,.72); font-size:.92rem}
.meta{display:inline-flex; align-items:center; gap:.45rem}
.meta-dot{
  width:10px;height:10px;border-radius:50%;
  background:rgba(66,245,178,.20);
  border:1px solid rgba(66,245,178,.35);
}

/* Before/After */
.before-after{position:relative;width:100%;height:100%}
.before-after.is-after img{filter:contrast(1.08) saturate(1.06)}
.before-after .ba-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.25));
  pointer-events:none;
}
.ba-toggle{
  position:absolute;
  left:.75rem;
  bottom:.75rem;
  padding:.45rem .65rem;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(12,15,18,.55);
  color:rgba(233,236,239,.90);
  font-weight:1000;
  cursor:pointer;
  transition:transform 160ms var(--ease2), background 160ms var(--ease2);
}
.ba-toggle:hover{background:rgba(12,15,18,.72); transform:translateY(-1px)}

.empty-state{
  padding:2rem;
  border-radius:var(--radius);
  border:1px dashed rgba(255,255,255,.15);
  background:rgba(17,22,27,.35);
}
.empty-state h2{
  margin:0 0 .35rem;
  font-family:var(--hfont);
  font-weight:1100;
  text-transform:uppercase;
  letter-spacing:.6px;
}

.cta-band{padding:1.1rem 0 2rem}
.cta-band-inner{
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(17,22,27,.60), rgba(15,20,25,.45));
  padding:1.2rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}
.cta-band h2{
  margin:0 0 .35rem;
  font-family:var(--hfont);
  font-weight:1100;
  text-transform:uppercase;
  letter-spacing:.6px;
}
.cta-band p{margin:0;color:var(--muted)}
.cta-band-actions{display:flex; gap:.75rem; flex-wrap:wrap}

/* ------------------------
   Contact
------------------------- */
.contact{padding:1rem 0 2.2rem}
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:1rem; align-items:start}

.form{margin-top:1rem}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:.85rem; margin-bottom:.85rem}
.form-field label{display:block; font-weight:950; letter-spacing:.25px; margin-bottom:.35rem}
.field-hint{color:rgba(233,236,239,.62); margin:.45rem 0 0; font-size:.92rem}

input,select,textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(12,15,18,.55);
  color:var(--ink);
  padding:.75rem .8rem;
  outline:none;
  transition:border-color 160ms var(--ease2), box-shadow 160ms var(--ease2), transform 160ms var(--ease2);
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(66,245,178,.35);
  box-shadow:0 0 0 3px rgba(66,245,178,.10);
  transform:translateY(-1px);
}
textarea{resize:vertical}
.is-invalid{border-color:rgba(255,106,26,.40)!important; box-shadow:0 0 0 3px rgba(255,106,26,.10)!important}

.form-actions{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.35rem}
.form-note{color:var(--muted); margin-top:.85rem; font-size:.95rem}

.alert{
  border-radius:var(--radius);
  padding:.85rem 1rem;
  border:1px solid rgba(255,255,255,.10);
  margin-top:1rem;
}
.alert-success{background:rgba(66,245,178,.08); border-color:rgba(66,245,178,.20)}
.alert-error{background:rgba(255,106,26,.08); border-color:rgba(255,106,26,.22)}
.alert ul{margin:.5rem 0 0; padding-left:1.1rem}

.hp-field{display:none}

.contact-aside .contact-strong{color:rgba(233,236,239,.86); font-weight:800}
.contact-box{
  border-radius:var(--radius-sm);
  padding:.85rem;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(17,22,27,.45);
  margin-top:.75rem;
}
.contact-label{color:var(--muted); font-weight:950; text-transform:uppercase; letter-spacing:.5px; font-size:.85rem}
.contact-link{
  display:inline-block;
  margin-top:.25rem;
  font-size:1.2rem;
  font-weight:1100;
  text-decoration:none!important;
}
.divider{height:1px;background:rgba(255,255,255,.10);margin:1rem 0}
.aside-sigil{
  margin-top:1.1rem;
  border-radius:var(--radius);
  padding:1rem;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(12,15,18,.50);
  position:relative;
  overflow:hidden;
}
.aside-glow{
  position:absolute;
  inset:-60px;
  background:radial-gradient(420px 220px at 30% 20%, rgba(66,245,178,.14), transparent 70%);
  filter:blur(18px);
  opacity:.8;
}
.aside-text{
  position:relative;
  font-weight:1100;
  text-transform:uppercase;
  letter-spacing:.6px;
}

/* Quote Quest bar */
.questbar{
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(12,15,18,.40);
  padding:.85rem;
  margin-bottom:1rem;
  position:relative;
  overflow:hidden;
}
.questbar::before{
  content:"";
  position:absolute;
  inset:-60px;
  background:radial-gradient(520px 240px at 20% 30%, rgba(66,245,178,.12), transparent 70%);
  filter:blur(18px);
  opacity:.8;
}
.questbar-left,.questbar-right{position:relative}
.questbar-title{font-weight:1100; text-transform:uppercase; letter-spacing:.6px}
.questbar-sub{color:rgba(233,236,239,.62); font-size:.92rem; margin-top:.25rem}
.questbar-points{
  font-weight:1100;
  padding:.35rem .6rem;
  border-radius:999px;
  border:1px solid rgba(66,245,178,.22);
  background:rgba(66,245,178,.08);
  display:inline-flex;
}
.questbar-track{
  position:relative;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  margin-top:.75rem;
  overflow:hidden;
}
.questbar-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(66,245,178,.75), rgba(255,106,26,.65));
  transition:width 420ms var(--ease2);
}

/* Steps */
.quest-step{border:0; padding:0; margin:0 0 1rem}
.quest-legend{
  font-weight:1050;
  text-transform:uppercase;
  letter-spacing:.55px;
  margin-bottom:.65rem;
  color:rgba(233,236,239,.86);
}
.confirm-card{
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(12,15,18,.45);
  padding:1rem;
}
.confirm-row{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.35rem 0;
  color:rgba(233,236,239,.78);
}
.confirm-row strong{color:rgba(233,236,239,.92)}

.quest-controls{
  display:none; /* turned on by JS */
  justify-content:space-between;
  gap:.75rem;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:1rem;
}

/* ------------------------
   Footer
------------------------- */
.site-footer{
  position:fixed;          /* always sticky */
  left:0;
  right:0;
  bottom:0;
  z-index:60;

  background:rgba(12,15,18,.86);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);

  /* iOS safe area */
  padding-bottom: env(safe-area-inset-bottom);
}

.footer-mist{
  position:absolute;
  left:0;right:0;top:-80px;
  height:120px;
  background:radial-gradient(900px 180px at 50% 60%, rgba(66,245,178,.10), transparent 65%);
  filter:blur(18px);
  opacity:.8;
  pointer-events:none;
}
.footer-inner{
  display:grid;
  grid-template-columns:1.2fr .9fr .9fr;
  gap:1rem;
  padding:1.2rem 0;
}
.footer-brand{display:flex; gap:.75rem; align-items:center}
.footer-name{
  font-weight:1100;
  font-family:var(--hfont);
  text-transform:uppercase;
  letter-spacing:.6px;
}
.footer-sub{color:var(--muted)}
.nap{margin-top:.75rem; display:grid; gap:.35rem}
.nap-label{color:rgba(233,236,239,.70); font-weight:950; margin-right:.25rem}
.nap-row a{text-decoration:none}
.nap-row a:hover{text-decoration:underline}

.footer-title{font-weight:1100; text-transform:uppercase; letter-spacing:.55px; margin-bottom:.55rem}
.footer-links{margin:0; padding-left:1rem; color:rgba(233,236,239,.85)}
.footer-links li{margin:.35rem 0}
.footer-seo{margin:.6rem 0 0; color:rgba(233,236,239,.70)}

.footer-body{color:var(--muted)}
.footer-badges{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem}
.badge{
  padding:.32rem .55rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  font-weight:950;
  font-size:.84rem;
  color:rgba(233,236,239,.84);
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:.75rem 0;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  color:rgba(233,236,239,.72);
  font-size:.92rem;
}
.footer-note{color:rgba(233,236,239,.60)}

/* ------------------------
   Toasts
------------------------- */
.toast-host{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:9999;
  display:grid;
  gap:.55rem;
  pointer-events:none;
}
.toast{
  pointer-events:none;
  min-width:260px;
  max-width:360px;
  padding:.75rem .85rem;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(12,15,18,.85);
  box-shadow:0 22px 70px rgba(0,0,0,.55);
  transform:translateY(10px);
  opacity:0;
  transition:transform 220ms var(--ease2), opacity 220ms var(--ease2);
}
.toast.is-on{transform:translateY(0); opacity:1}
.toast.is-off{transform:translateY(10px); opacity:0}

/* ------------------------
   Spectral Mode (Easter egg)
------------------------- */
html.spectral-mode{
  filter:saturate(1.05) contrast(1.04);
}
html.spectral-mode body::before{
  opacity:1;
  background:
    radial-gradient(1200px 650px at 18% 10%, rgba(66,245,178,0.18), transparent 60%),
    radial-gradient(900px 520px at 82% 18%, rgba(255,106,26,0.08), transparent 60%),
    radial-gradient(700px 500px at 60% 75%, rgba(255,255,255,0.07), transparent 65%),
    linear-gradient(180deg, #0a0d10, #0c0f12 55%, #080b0e);
}
html.spectral-mode .hud-dot{
  box-shadow:0 0 28px rgba(66,245,178,.35);
}
html.spectral-mode .sigil-ring{
  border-color:rgba(66,245,178,.38);
}

/* ------------------------
   Responsive
------------------------- */
@media (max-width: 980px){
  .header-inner{grid-template-columns:1fr auto; grid-auto-rows:auto}
  .header-cta{display:none}
  .hero-inner{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .portfolio-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
  .badge-tray-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 640px){
  .nav-toggle{display:inline-flex}
  .nav-menu{
    position:absolute;
    right:0;
    top:calc(100% + .55rem);
    background:rgba(12,15,18,.95);
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    padding:.55rem;
    box-shadow:var(--shadow);
    display:none;
    flex-direction:column;
    align-items:stretch;
    min-width:200px;
  }
  .nav-menu.is-open{display:flex}
  .nav-link{width:100%; justify-content:center}

  .grid-4{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .portfolio-grid{grid-template-columns:1fr}

  .form-row{grid-template-columns:1fr}
  .cta-strip{flex-direction:column; align-items:flex-start}
  .cta-band-inner{flex-direction:column; align-items:flex-start}
  .footer-bottom{flex-direction:column}
  .badge-tray-grid{grid-template-columns:1fr}
}
/* ------------------------
   Footer (compact + spread)
------------------------- */
.site-footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;

  background:rgba(12,15,18,.86);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);

  padding-bottom: env(safe-area-inset-bottom);
}

.site-footer--compact{
  font-size:.95rem;
}

.footer-mist{
  position:absolute;
  left:0;right:0;top:-70px;
  height:95px;
  background:radial-gradient(900px 180px at 50% 60%, rgba(66,245,178,.10), transparent 65%);
  filter:blur(16px);
  opacity:.75;
  pointer-events:none;
}

.footer-inner{
  display:grid;
  grid-template-columns:1.2fr .85fr .85fr .8fr;
  gap:1rem;
  padding:.75rem 0; /* reduced */
  align-items:start;
}

.footer-inner--spread{
  gap:1.15rem; /* spread out horizontally */
}

.footer-col--brand{min-width:0;}
.footer-col--cta{justify-self:end; min-width:0;}

.footer-brand{
  display:flex;
  gap:.6rem;
  align-items:center;
  margin-bottom:.55rem;
}

.footer-name{
  font-weight:1100;
  font-family:var(--hfont);
  text-transform:uppercase;
  letter-spacing:.6px;
  line-height:1.05;
}

.footer-sub{
  color:var(--muted);
  font-size:.9rem;
  line-height:1.2;
  margin-top:.15rem;
}

/* NAP compact: less vertical stacking */
.nap{
  display:grid;
  gap:.35rem;
}

.nap--compact{
  gap:.28rem;
}

.nap-row{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:.55rem;
  align-items:baseline;
}

.nap-row--wide{
  grid-template-columns:54px 1fr;
}

.nap-label{
  color:rgba(233,236,239,.62);
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.45px;
  font-size:.78rem;
}

.nap-text{
  color:rgba(233,236,239,.72);
  line-height:1.25;
}

/* Titles tighter */
.footer-title{
  font-weight:1100;
  text-transform:uppercase;
  letter-spacing:.55px;
  margin-bottom:.45rem;
  font-size:.92rem;
}

.footer-title--tight{
  margin-top:.6rem;
}

/* Links compact */
.footer-links{
  margin:0;
  padding-left:1rem;
  color:rgba(233,236,239,.85);
}

.footer-links--compact li{
  margin:.22rem 0;
}

.footer-seo{
  margin:.4rem 0 0;
  color:rgba(233,236,239,.68);
  line-height:1.25;
}

.footer-seo--compact{
  font-size:.9rem;
}

/* Body compact */
.footer-body{
  color:var(--muted);
}

.footer-body--compact{
  margin:0;
  line-height:1.35;
  font-size:.95rem;
}

.footer-mini{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-top:.55rem;
}

.mini-chip{
  padding:.28rem .5rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  font-weight:950;
  font-size:.78rem;
  color:rgba(233,236,239,.82);
}

/* CTA row small */
.footer-cta-row{
  display:flex;
  gap:.55rem;
  margin-top:.6rem;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.footer-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.55rem .75rem;
  border-radius:14px;
  font-weight:1000;
  letter-spacing:.25px;
  text-decoration:none!important;
  border:1px solid rgba(255,255,255,.12);
  transition:transform 160ms var(--ease2), background 160ms var(--ease2), box-shadow 160ms var(--ease2);
}

.footer-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 40px rgba(0,0,0,.35);
}

.footer-cta--primary{
  background:linear-gradient(180deg, var(--orange), rgba(26, 255, 129, 0.78));
  color:#150b05;
  border-color:rgba(255,106,26,.45);
}

.footer-cta--outline{
  background:rgba(17,22,27,.45);
}

/* Bottom row slimmer */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:.55rem 0; /* reduced */
  display:flex;
  justify-content:space-between;
  gap:1rem;
  color:rgba(233,236,239,.70);
  font-size:.9rem;
}

.footer-bottom--compact{
  padding:.5rem 0;
}

.footer-note{
  color:rgba(233,236,239,.58);
}

/* Responsive footer */
@media (max-width: 980px){
  .footer-inner{
    grid-template-columns:1fr 1fr;
  }
  .footer-col--cta{justify-self:stretch;}
}

@media (max-width: 640px){
  .footer-inner{
    grid-template-columns:1fr;
    gap:.85rem;
  }
  .footer-cta-row{justify-content:flex-start;}
  .footer-bottom{flex-direction:column;}
}
/* ------------------------
   Ghost Flurry (micro-interaction)
------------------------- */
.ghost-flurry{
  position:fixed;
  width:0;
  height:0;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%, -50%);
}

.ghost-particle{
  position:absolute;
  left:0; top:0;
  width:10px; height:10px;
  border-radius:999px;
  opacity:0;
  transform:translate3d(0,0,0) scale(var(--s, 1));
  filter:blur(var(--b, 0px));
  will-change:transform, opacity, filter;
  animation:ghostFlurry 620ms cubic-bezier(.16, 1, .3, 1) forwards;
  background:
    radial-gradient(circle at 40% 35%, rgba(242,239,230,.95), rgba(242,239,230,.30) 55%, rgba(66,245,178,.12) 75%, transparent 78%);
  box-shadow:
    0 0 18px rgba(66,245,178,.10),
    0 0 28px rgba(255,106,26,.05);
}

.ghost-particle[data-ghost="shard"]{
  width:7px; height:12px;
  border-radius:6px;
  background:
    linear-gradient(180deg, rgba(242,239,230,.65), rgba(66,245,178,.20));
  opacity:.0;
}

.ghost-particle[data-ghost="mist"]{
  width:14px; height:14px;
  background:
    radial-gradient(circle at 45% 45%, rgba(242,239,230,.70), rgba(66,245,178,.18) 55%, transparent 72%);
}

@keyframes ghostFlurry{
  0%{
    opacity:0;
    transform:translate3d(0,0,0) scale(calc(var(--s, 1) * .8));
  }
  12%{
    opacity:.85;
  }
  100%{
    opacity:0;
    transform:translate3d(var(--dx, 18px), var(--dy, -28px), 0) scale(calc(var(--s, 1) * 1.15));
    filter:blur(calc(var(--b, 0px) + 1.5px));
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .ghost-flurry{display:none!important;}
}
.site-main{
  padding-bottom: calc(var(--footer-h, 92px) + 1.25rem);
}
/* ------------------------
   Mobile-first interaction tuning
------------------------- */
a, button, input, select, textarea{
  touch-action: manipulation;
}

.btn, .pill, .chip, .footer-cta{
  min-height:44px; /* iOS tap target */
}

/* Reduce heavy hover transforms on touch devices */
@media (pointer: coarse){
  .card:hover,
  .project:hover,
  .trust-item:hover,
  .btn:hover,
  .pill:hover,
  .chip:hover{
    transform:none;
    box-shadow:inherit;
  }
}

/* ------------------------
   Footer: mobile bar + expand panel
------------------------- */
.footer-mobilebar{
  display:none; /* shown on small screens */
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(12,15,18,.86);
}

.footer-mobilebar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.6rem 0;
}

.footer-mobilebar-left{
  display:flex;
  align-items:center;
  gap:.55rem;
  min-width:0;
}

.footer-mobilebar-brand{min-width:0}
.footer-mobilebar-name{
  font-weight:1100;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-size:.92rem;
  line-height:1.05;
}
.footer-mobilebar-sub{
  color:rgba(233,236,239,.62);
  font-size:.84rem;
  line-height:1.1;
  margin-top:.15rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:44vw;
}

.footer-mobilebar-actions{
  display:flex;
  align-items:center;
  gap:.45rem;
}

.footer-expand-btn{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(17,22,27,.45);
  color:rgba(233,236,239,.9);
  font-weight:1000;
  cursor:pointer;
  display:grid;
  place-items:center;
}

.footer-expand-icon{
  display:inline-block;
  transition:transform 200ms var(--ease2);
  opacity:.85;
}

.footer-expand{
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(12,15,18,.92);
}

.footer-expand-inner{
  padding:.9rem 0 .75rem;
}

/* When expanded */
.site-footer.is-expanded .footer-expand-icon{
  transform:rotate(180deg);
}

/* Keep desktop footer layout, but inside expand on mobile it becomes single column nicely */
@media (max-width: 640px){
  /* Show mobile bar always on small screens */
  .footer-mobilebar{display:block;}

  /* Spread footer content becomes an expanded panel */
  .footer-inner{
    grid-template-columns:1fr;
    gap:.85rem;
    padding:0; /* handled by expand inner */
  }

  .footer-col--cta{justify-self:stretch;}
  .footer-cta-row{justify-content:flex-start;}
  .footer-bottom{
    padding:.6rem 0 0;
    flex-direction:column;
    gap:.35rem;
  }

  /* Tighten overall page spacing on mobile */
  .hero{padding:2.2rem 0 1.4rem}
  .hero-title{letter-spacing:.6px}
  .hero-subtitle{font-size:1.05rem}
  .card{padding:.9rem}
  .project-body{padding:.9rem}
  .cta-strip{padding:.9rem}
  .page-head{padding:2rem 0 .75rem}

  /* Nav menu fits better */
  .nav-menu{
    max-height:70vh;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* Tablet refinements */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr}
  .portfolio-grid{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
}

/* ------------------------
   Ghost flurry: lighter on mobile
------------------------- */
@media (max-width: 640px){
  .ghost-particle{animation-duration:520ms;}
}
.nap-text{
  overflow-wrap:anywhere;
  word-break:break-word;
}
.footer-seo{
  overflow-wrap:anywhere;
}
/* ============================
   CTA COLOR PREVIEW: GREEN
   (Style-only. Remove to revert.)
   ============================ */

:root{
  --cta-green: #26d07c;       /* spectral green */
  --cta-green-dark: #1fb66c;
  --cta-green-ink: #06140d;   /* readable on green */
}

/* Primary buttons */
.btn-primary{
  background: linear-gradient(180deg, var(--cta-green), rgba(31,182,108,.82));
  border-color: rgba(38,208,124,.55);
  color: var(--cta-green-ink);
  box-shadow: 0 12px 30px rgba(38,208,124,.18);
}

/* Header “Get a Quote” pill */
.pill-ghost{
  background: linear-gradient(180deg, var(--cta-green), rgba(31,182,108,.82));
  border-color: rgba(38,208,124,.55);
  color: var(--cta-green-ink);
  box-shadow: 0 12px 30px rgba(38,208,124,.16);
}