/* ============================================================
   NORTHSIDE AUTO
   Thesis: "Shop-Floor Precision" — numbered bays, gauges,
   measurement ticks, spec-sheet type, steel + ignition orange.
   ============================================================ */

:root{
  --asphalt:   #131519;   /* base dark — engine bay, tarmac */
  --asphalt-2: #1b1e24;
  --steel-900: #23272e;
  --steel-700: #363c45;
  --steel-500: #5b626d;
  --steel-400: #8a929c;
  --steel-200: #c6ccd4;
  --paper:     #f1eee7;   /* warm spec-paper (light sections) */
  --paper-2:   #e6e2d8;
  --ink:       #16181c;
  --white:     #fbfaf7;

  --ignition:  #ee4a22;   /* THE accent — brake glow / taillight / heat */
  --ignition-d:#c93a16;
  --signal:    #4f93bb;   /* cold diagnostic signal — used sparingly only */

  --disp: "Anton", Impact, sans-serif;
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;

  --mx: clamp(1.15rem, 5vw, 6rem);
  --maxw: 1480px;
  --edge: 2px;            /* machined corner radius philosophy */
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--sans); background:var(--asphalt); color:var(--white);
  line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--ignition); color:var(--white); }

/* Grain over everything for material tooth */
.grain{ position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Type ---------- */
.mono{ font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; }
.tag{ font-family:var(--mono); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ignition); }
h1,h2,h3{ font-family:var(--disp); font-weight:400; line-height:.92; letter-spacing:.005em; text-transform:uppercase; }
.h-xl{ font-size:clamp(3.6rem, 13vw, 12rem); }
.h-lg{ font-size:clamp(2.6rem, 7vw, 6rem); }
.h-md{ font-size:clamp(1.9rem, 4vw, 3.4rem); }
p{ font-size:clamp(1rem,1.1vw,1.1rem); color:var(--steel-200); }

/* Ruler-tick divider — the signature divider language */
.ticks{ height:16px; width:100%; display:block;
  background:
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 14px);
  opacity:.35; }
.ticks.tall{ height:22px; background:
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 22px); }

/* Machined buttons */
.btn{ position:relative; display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--sans); font-weight:700; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase;
  padding:1.05rem 1.9rem; border-radius:var(--edge); cursor:pointer; border:0;
  background:var(--ignition); color:var(--white); transition:transform .18s cubic-bezier(.3,.9,.3,1); }
.btn::after{ content:""; position:absolute; inset:0; border-radius:var(--edge);
  box-shadow:6px 6px 0 var(--ignition-d); z-index:-1; transition:box-shadow .18s, transform .18s; }
.btn:hover, .btn:focus-visible{ transform:translate(2px,2px); }
.btn:hover::after, .btn:focus-visible::after{ box-shadow:3px 3px 0 var(--ignition-d); }
.btn.ghost{ background:transparent; color:var(--white); border:1.5px solid var(--steel-500); }
.btn.ghost::after{ box-shadow:none; }
.btn.ghost:hover{ border-color:var(--ignition); color:var(--ignition); transform:none; }
.btn.dark{ background:var(--ink); color:var(--white); }
.btn.dark::after{ box-shadow:6px 6px 0 var(--ignition); }

/* ============================================================
   UTILITY BAR + NAV
   ============================================================ */
.util{ background:var(--ink); border-bottom:1px solid var(--steel-700);
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.5rem var(--mx); font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; color:var(--steel-400);
  position:relative; z-index:50; flex-wrap:wrap; }
.util .lit{ color:var(--white); }
.util .dot{ color:var(--ignition); }
.util a:hover{ color:var(--ignition); }

.nav{ position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--asphalt) 92%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--steel-700);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem var(--mx); transition:padding .3s ease; }
.nav.shrink{ padding:.55rem var(--mx); }
.logo{ display:flex; align-items:center; gap:.7rem; }
.logo .mark{ width:38px; height:38px; flex:none; }
.logo .name{ font-family:var(--disp); font-size:1.5rem; letter-spacing:.02em; line-height:.85; }
.logo .name b{ color:var(--ignition); font-weight:400; }
.logo .name small{ display:block; font-family:var(--mono); font-size:.52rem; letter-spacing:.28em; color:var(--steel-400); margin-top:2px; }

.links{ display:flex; align-items:center; gap:2.1rem; list-style:none; }
.links a{ font-family:var(--sans); font-weight:600; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-200); position:relative; padding:.3rem 0; }
.links a::before{ content:""; position:absolute; left:0; top:-2px; width:0; height:2px; background:var(--ignition); transition:width .3s cubic-bezier(.3,.9,.3,1); }
.links a:hover, .links a:focus-visible, .links a.active{ color:var(--white); }
.links a:hover::before, .links a.active::before{ width:100%; }
.nav .btn{ padding:.75rem 1.35rem; font-size:.74rem; }

.burger{ display:none; background:none; border:0; cursor:pointer; width:34px; height:24px; position:relative; }
.burger span{ position:absolute; left:0; height:2px; width:100%; background:var(--white); transition:.3s; }
.burger span:nth-child(1){ top:2px;} .burger span:nth-child(2){ top:11px;} .burger span:nth-child(3){ top:20px;}

/* ============================================================
   HERO — Memorable moment #1: the ignition / tach sweep
   ============================================================ */
.hero{ position:relative; overflow:hidden; padding:clamp(3rem,7vw,6rem) var(--mx) 0;
  background:
    radial-gradient(120% 90% at 88% 12%, #2a1a14 0%, transparent 45%),
    linear-gradient(180deg, var(--asphalt) 0%, var(--asphalt-2) 100%); }
.hero-blueprint{ position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none; }
.hero-blueprint svg{ position:absolute; right:-6%; top:8%; width:min(62vw,1000px); height:auto; }
.hero-grid{ position:relative; z-index:3; max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(1.5rem,4vw,4rem); align-items:center;
  min-height:clamp(560px,74vh,820px); }
.hero-eyebrow{ display:flex; align-items:center; gap:1rem; margin-bottom:1.6rem; }
.hero-eyebrow .ln{ width:44px; height:2px; background:var(--ignition); }
.hero h1{ font-size:clamp(3.4rem, 11vw, 10.5rem); }
.hero h1 .l1{ display:block; }
.hero h1 .l2{ display:block; color:var(--ignition); }
.hero h1 .l3{ display:block; -webkit-text-stroke:2px var(--steel-500); color:transparent; }
.hero-sub{ max-width:46ch; margin-top:1.8rem; font-size:clamp(1.05rem,1.35vw,1.28rem); color:var(--steel-200); line-height:1.55; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem; }

.hero-gauge{ position:relative; display:grid; place-items:center; }
.hero-gauge svg{ width:100%; max-width:380px; height:auto; overflow:visible; }
.gauge-readout{ position:absolute; text-align:center; }
.gauge-readout b{ font-family:var(--disp); font-size:2.8rem; color:var(--white); line-height:.8; display:block; }
.gauge-readout span{ font-family:var(--mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ignition); }

/* hero footer data strip */
.hero-strip{ position:relative; z-index:3; max-width:var(--maxw); margin:clamp(2rem,4vw,3rem) auto 0;
  border-top:1px solid var(--steel-700); display:grid; grid-template-columns:repeat(4,1fr); }
.hero-strip .cell{ padding:1.3rem 1.3rem 1.5rem 0; border-right:1px solid var(--steel-700); }
.hero-strip .cell:last-child{ border-right:0; }
.hero-strip .cell .k{ font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--steel-400); }
.hero-strip .cell .v{ font-family:var(--sans); font-weight:700; font-size:1.02rem; margin-top:.45rem; color:var(--white); }
.hero-strip .cell .v .o{ color:var(--ignition); }

/* reveal */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.d1{ transition-delay:.08s;} .d2{ transition-delay:.16s;} .d3{ transition-delay:.26s;} .d4{ transition-delay:.36s;}

/* ============================================================
   SECTIONS — shared
   ============================================================ */
.sec{ position:relative; z-index:3; padding:clamp(4.5rem,9vw,8rem) var(--mx); }
.wrap{ max-width:var(--maxw); margin:0 auto; }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:clamp(2.5rem,5vw,4rem); }
.sec-head .lead{ min-width:0; }
.sec-head .lead h2{ margin-top:.7rem; }
.sec-head .idx{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--steel-400); }
h1,h2,h3{ overflow-wrap:break-word; }

/* ============================================================
   PLEDGE BAND — straight talk slab
   ============================================================ */
.pledge{ background:var(--ignition); color:var(--white); position:relative; z-index:3; overflow:hidden; }
.pledge .inner{ max-width:var(--maxw); margin:0 auto; padding:clamp(3.5rem,7vw,6rem) var(--mx);
  display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.pledge h2{ font-size:clamp(2.4rem,6vw,5.2rem); color:var(--white); }
.pledge h2 em{ font-style:normal; -webkit-text-stroke:2px var(--white); color:transparent; }
.pledge .side p{ color:color-mix(in srgb,var(--white) 90%, transparent); font-size:1.05rem; }
.pledge .side .mono{ display:block; margin-top:1.2rem; color:var(--white); letter-spacing:.12em; }
.pledge-ghost{ position:absolute; right:-2%; bottom:-30%; font-family:var(--disp); font-size:34rem; line-height:.7; color:rgba(0,0,0,.07); pointer-events:none; user-select:none; }

/* ============================================================
   SERVICE BAYS — Memorable moment #2
   numbered bays, editorial asymmetric list
   ============================================================ */
.bays{ background:var(--paper); color:var(--ink); }
.bays .sec-head .idx, .bays .sec-head .tag{ }
.bays h2{ color:var(--ink); }
.bays .sub{ max-width:52ch; color:var(--steel-500); font-family:var(--sans); }
.bay-list{ border-top:1px solid var(--ink); }
.bay{ display:grid; grid-template-columns:auto 1fr auto; gap:clamp(1rem,4vw,3.5rem); align-items:center;
  padding:clamp(1.6rem,3vw,2.4rem) 0; border-bottom:1px solid #cfcabd; position:relative; cursor:pointer;
  transition:background .3s, padding-left .35s; }
.bay:hover, .bay:focus-within{ background:var(--ink); padding-left:1.4rem; }
.bay .num{ font-family:var(--mono); font-weight:700; font-size:clamp(1rem,1.4vw,1.15rem); color:var(--ignition); min-width:3.4ch; }
.bay .body{ }
.bay .name{ font-family:var(--disp); font-size:clamp(1.7rem,3.4vw,3rem); line-height:.95; color:var(--ink); transition:color .3s; }
.bay .spec{ font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; color:var(--steel-500); margin-top:.6rem; transition:color .3s; }
.bay .detail{ font-family:var(--sans); color:var(--steel-500); max-width:56ch; margin-top:.8rem; font-size:.98rem;
  max-height:0; overflow:hidden; opacity:0; transition:max-height .45s ease, opacity .35s ease, margin .35s; }
.bay .arrow{ font-family:var(--disp); font-size:1.6rem; color:#cfcabd; transition:color .3s, transform .3s; }
.bay:hover .name, .bay:focus-within .name{ color:var(--white); }
.bay:hover .spec, .bay:focus-within .spec{ color:var(--ignition); }
.bay:hover .detail, .bay:focus-within .detail{ max-height:120px; opacity:1; margin-top:1rem; color:var(--steel-200); }
.bay:hover .arrow, .bay:focus-within .arrow{ color:var(--ignition); transform:translateX(8px); }

/* ============================================================
   WINTER READOUT — Memorable moment #3: instrument cluster
   ============================================================ */
.winter{ background:var(--asphalt); color:var(--white); position:relative; overflow:hidden; }
.winter::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(90% 70% at 20% 0%, rgba(79,147,187,.16), transparent 55%); pointer-events:none; }
.winter .sec-head .tag{ color:var(--signal); }
.winter h2 em{ color:var(--signal); font-style:normal; }
.cluster{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--steel-700); border:1px solid var(--steel-700); }
.dial{ background:var(--asphalt-2); padding:clamp(1.6rem,3vw,2.4rem); position:relative; }
.dial svg{ width:100%; max-width:150px; height:auto; margin:0 auto .9rem; display:block; overflow:visible; }
.dial .warn{ font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--signal); }
.dial h3{ font-family:var(--disp); font-size:1.5rem; margin:.5rem 0 .5rem; color:var(--white); }
.dial p{ font-size:.9rem; color:var(--steel-400); line-height:1.5; }
.dial .fix{ font-family:var(--mono); font-size:.68rem; color:var(--ignition); margin-top:1rem; letter-spacing:.05em; }
.winter-cta{ margin-top:clamp(2.5rem,5vw,3.5rem); display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.winter-cta .big{ font-family:var(--disp); font-size:clamp(1.6rem,3vw,2.6rem); max-width:20ch; line-height:.98; }
.winter-cta .big span{ color:var(--signal); }

/* ============================================================
   ON THE LIFT — process timeline w/ ruler ticks
   ============================================================ */
.lift{ background:var(--paper); color:var(--ink); }
.lift h2{ color:var(--ink); }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:clamp(2rem,4vw,3rem); }
.step{ padding:0 1.6rem 0 0; position:relative; }
.step .rule{ height:3px; background:var(--ink); position:relative; margin-bottom:1.4rem; }
.step .rule::after{ content:""; position:absolute; left:0; top:-5px; width:13px; height:13px; background:var(--ignition); border-radius:50%; }
.step .rule::before{ content:""; position:absolute; left:0; right:14px; top:-9px; height:20px;
  background:repeating-linear-gradient(90deg,#c9c4b7 0 1px, transparent 1px 26px); }
.step .n{ font-family:var(--mono); font-weight:700; font-size:.72rem; color:var(--ignition); letter-spacing:.12em; }
.step h3{ font-family:var(--disp); font-size:1.5rem; color:var(--ink); margin:.5rem 0 .7rem; }
.step p{ font-size:.94rem; color:var(--steel-500); }

/* ============================================================
   PROOF — reviews as work-order tickets
   ============================================================ */
.proof{ background:var(--asphalt); color:var(--white); }
.proof h2 em{ color:var(--ignition); font-style:normal; }
.tickets{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem); }
.ticket{ background:var(--paper); color:var(--ink); border-radius:var(--edge); position:relative; padding:1.8rem 1.6rem 1.6rem;
  box-shadow:0 20px 40px -24px rgba(0,0,0,.6); }
.ticket::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:8px;
  background:repeating-linear-gradient(90deg, var(--ignition) 0 10px, transparent 10px 20px); }
.ticket .thead{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; color:var(--steel-500); text-transform:uppercase; border-bottom:1px dashed #bdb8ab; padding-bottom:.9rem; margin-bottom:1.1rem; }
.ticket .stars{ color:var(--ignition); letter-spacing:.15em; font-size:.85rem; }
.ticket p{ color:var(--ink); font-size:1rem; line-height:1.55; }
.ticket .who{ font-family:var(--mono); font-size:.7rem; color:var(--steel-500); margin-top:1.2rem; letter-spacing:.05em; }
.ticket .who b{ color:var(--ink); }

/* ============================================================
   BOOK / LOCATION
   ============================================================ */
.book{ background:var(--ink); color:var(--white); }
.book-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2.5rem,6vw,5rem); align-items:stretch; }
.book h2{ font-size:clamp(2.6rem,6vw,5rem); }
.book h2 em{ color:var(--ignition); font-style:normal; }
.book .lede{ max-width:44ch; margin-top:1.4rem; color:var(--steel-200); font-size:1.08rem; }
.book-cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem; }
.info{ border:1px solid var(--steel-700); border-radius:var(--edge); }
.info .row{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:1.15rem 1.4rem; border-bottom:1px solid var(--steel-700); }
.info .row:last-child{ border-bottom:0; }
.info .row .k{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--steel-400); }
.info .row .val{ font-family:var(--sans); font-weight:600; text-align:right; }
.info .row .val small{ display:block; font-family:var(--mono); font-size:.66rem; color:var(--steel-400); font-weight:400; }
.info .hoursnote{ padding:1.15rem 1.4rem; font-family:var(--mono); font-size:.66rem; color:var(--ignition); letter-spacing:.06em; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--asphalt); color:var(--steel-200); border-top:1px solid var(--steel-700); padding:clamp(3.5rem,6vw,5rem) var(--mx) 2rem; }
.foot-grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(1.5rem,4vw,3rem); }
.foot .logo .name{ color:var(--white); }
.foot-tag{ font-family:var(--mono); font-size:.72rem; color:var(--steel-400); margin-top:1.2rem; max-width:30ch; line-height:1.7; letter-spacing:.04em; }
.foot h4{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ignition); margin-bottom:1.1rem; }
.foot ul{ list-style:none; display:flex; flex-direction:column; gap:.7rem; }
.foot ul a{ font-size:.9rem; color:var(--steel-200); transition:color .25s, padding-left .25s; }
.foot ul a:hover{ color:var(--ignition); padding-left:.35rem; }
.foot-base{ max-width:var(--maxw); margin:clamp(2.5rem,5vw,3.5rem) auto 0; padding-top:1.4rem; border-top:1px solid var(--steel-700);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-family:var(--mono); font-size:.66rem; color:var(--steel-500); letter-spacing:.06em; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hero-grid{ grid-template-columns:1fr; min-height:auto; padding-top:2rem; }
  .hero-gauge{ order:-1; max-width:320px; margin:0 auto; }
  .cluster{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); gap:2.5rem 1.5rem; }
  .tickets{ grid-template-columns:1fr 1fr; }
  .pledge .inner, .book-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:940px){
  .links, .nav .btn{ display:none; }
  .burger{ display:block; z-index:80; }
  .nav.open .links{ display:flex; position:fixed; inset:0; background:var(--asphalt); flex-direction:column; align-items:center; justify-content:center; gap:2rem; z-index:70; }
  .nav.open .links a{ font-size:1.25rem; }
  .nav.open .burger span:nth-child(1){ top:11px; transform:rotate(45deg); }
  .nav.open .burger span:nth-child(2){ opacity:0; }
  .nav.open .burger span:nth-child(3){ top:11px; transform:rotate(-45deg); }
}
@media (max-width:680px){
  .hero-strip{ grid-template-columns:1fr 1fr; }
  .hero-strip .cell:nth-child(2n){ border-right:0; }
  .cluster, .steps, .tickets{ grid-template-columns:1fr; }
  .bay{ grid-template-columns:auto 1fr; }
  .bay .arrow{ display:none; }
  .foot-grid{ grid-template-columns:1fr; }
  .hero h1 .l3{ -webkit-text-stroke:1.5px var(--steel-500); }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}
:focus-visible{ outline:2px solid var(--ignition); outline-offset:3px; }

/* ============================================================
   MULTI-PAGE COMPONENTS (added for page split)
   ============================================================ */

/* Inner-page header — lighter than the home hero, same grammar */
.page-head{ position:relative; overflow:hidden; padding:clamp(3rem,7vw,6rem) var(--mx) 0;
  background:radial-gradient(120% 90% at 88% 0%, #2a1a14 0%, transparent 46%), linear-gradient(180deg,var(--asphalt),var(--asphalt-2)); }
.page-head .wrap{ position:relative; z-index:3; padding-bottom:clamp(2.5rem,5vw,4rem); }
.ph-crumb{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--steel-400); margin-bottom:1.4rem; }
.ph-crumb a{ color:var(--steel-400); } .ph-crumb a:hover{ color:var(--ignition); }
.ph-crumb .sep{ color:var(--ignition); padding:0 .5rem; }
.ph-eyebrow{ display:flex; align-items:center; gap:1rem; margin-bottom:1.3rem; }
.ph-eyebrow .ln{ width:44px; height:2px; background:var(--ignition); }
.ph-title{ font-family:var(--disp); font-weight:400; text-transform:uppercase; line-height:.9;
  font-size:clamp(3rem,9vw,7.5rem); }
.ph-title em{ font-style:normal; color:var(--ignition); }
.ph-title .out{ -webkit-text-stroke:2px var(--steel-500); color:transparent; }
.ph-sub{ max-width:52ch; margin-top:1.5rem; font-size:clamp(1.05rem,1.3vw,1.28rem); color:var(--steel-200); line-height:1.55; }
.page-head .strip{ position:relative; z-index:3; max-width:var(--maxw); margin:0 auto; color:var(--steel-700); }

/* Home: compact services teaser grid (distinct from the full bay list) */
.svc-teaser{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#cfcabd; border:1px solid #cfcabd; margin-top:2.5rem; }
.svc-cell{ background:var(--paper); padding:1.7rem 1.5rem; position:relative; transition:background .3s; display:block; }
.svc-cell:hover{ background:var(--ink); }
.svc-cell .num{ font-family:var(--mono); font-weight:700; font-size:.72rem; color:var(--ignition); }
.svc-cell .nm{ font-family:var(--disp); font-size:1.5rem; color:var(--ink); margin:.7rem 0 .4rem; transition:color .3s; line-height:.98; }
.svc-cell .sp{ font-family:var(--mono); font-size:.66rem; letter-spacing:.05em; color:var(--steel-500); transition:color .3s; }
.svc-cell:hover .nm{ color:var(--white); } .svc-cell:hover .sp{ color:var(--ignition); }

/* Home: winter teaser band */
.winter-band{ background:var(--asphalt); color:var(--white); position:relative; overflow:hidden; }
.winter-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(80% 90% at 15% 0%, rgba(79,147,187,.16), transparent 55%); pointer-events:none; }
.winter-band .inner{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:clamp(3.5rem,7vw,6rem) var(--mx);
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.winter-band h2 em{ color:var(--signal); font-style:normal; }
.winter-band .lede{ margin-top:1.2rem; color:var(--steel-200); max-width:44ch; }
.warn-list{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.8rem; }
.warn-chip{ font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--signal);
  border:1px solid var(--steel-700); padding:.5rem .8rem; border-radius:var(--edge); }
.warn-chip.hot{ color:var(--ignition); border-color:color-mix(in srgb,var(--ignition) 45%, transparent); }

/* Shared bottom CTA band */
.cta-band{ background:var(--ignition); color:var(--white); position:relative; overflow:hidden; }
.cta-band .inner{ max-width:var(--maxw); margin:0 auto; padding:clamp(3.5rem,7vw,5.5rem) var(--mx);
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.cta-band h2{ color:var(--white); font-size:clamp(2.2rem,5vw,4.2rem); max-width:16ch; }
.cta-band h2 em{ font-style:normal; -webkit-text-stroke:2px var(--white); color:transparent; }
.cta-band .actions{ display:flex; flex-wrap:wrap; gap:1rem; }
.cta-band .btn{ background:var(--ink); color:var(--white); }
.cta-band .btn::after{ box-shadow:6px 6px 0 rgba(0,0,0,.35); }
.cta-band .btn.ghost{ background:transparent; border-color:rgba(255,255,255,.6); color:var(--white); }
.cta-band .btn.ghost:hover{ border-color:var(--white); color:var(--ink); background:var(--white); }
.cta-ghost{ position:absolute; right:-1%; bottom:-34%; font-family:var(--disp); font-size:30rem; line-height:.7; color:rgba(0,0,0,.06); pointer-events:none; user-select:none; }

/* Generic content prose blocks for inner pages */
.prose-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
.prose-grid h2{ color:var(--ink); }
.checklist{ list-style:none; margin-top:1.6rem; }
.checklist li{ padding:1rem 0 1rem 2.2rem; border-bottom:1px solid #cfcabd; position:relative; font-size:1rem; color:var(--steel-500); }
.checklist li::before{ content:"→"; position:absolute; left:0; top:1rem; color:var(--ignition); font-family:var(--disp); }
.checklist li b{ color:var(--ink); font-weight:700; }
.on-dark .checklist li{ border-color:var(--steel-700); color:var(--steel-200); }
.on-dark .checklist li b{ color:var(--white); }

/* Map placeholder — schematic, on-brand (not a stock map) */
.map-schematic{ aspect-ratio:16/10; border:1px solid var(--steel-700); border-radius:var(--edge); background:var(--asphalt-2); position:relative; overflow:hidden; }
.map-schematic svg{ width:100%; height:100%; display:block; }
.map-pin{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); text-align:center; }
.map-pin .dot{ width:16px; height:16px; background:var(--ignition); border-radius:50%; margin:0 auto .6rem; box-shadow:0 0 0 6px rgba(238,74,34,.2); }
.map-pin .lbl{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; color:var(--white); text-transform:uppercase; }

@media (max-width:1080px){
  .svc-teaser{ grid-template-columns:1fr 1fr; }
  .winter-band .inner, .prose-grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .svc-teaser{ grid-template-columns:1fr; }
}

/* ============================================================
   IMAGE SLOTS (photo areas — swap src for real photos)
   ============================================================ */
.shot{ position:relative; overflow:hidden; border-radius:var(--edge); background:var(--asphalt-2); display:block; line-height:0; }
.shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.shot .cap{ position:absolute; inset:auto 0 0 0; line-height:1.4;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--white);
  background:linear-gradient(transparent, rgba(10,11,13,.72)); padding:2rem .9rem .75rem; }
.shot .cap b{ color:var(--ignition); font-weight:400; }
.shot .corner{ position:absolute; top:9px; right:9px; width:16px; height:16px; border-top:2px solid var(--ignition); border-right:2px solid var(--ignition); z-index:2; }

/* Home: "inside the shop" photo band */
.photo-band{ background:var(--paper); }
.photo-grid{ display:grid; grid-template-columns:1.55fr 1fr; grid-template-rows:1fr 1fr; gap:12px; margin-top:2.5rem; }
.photo-grid .big{ grid-row:1 / span 2; }
.photo-grid .shot{ min-height:210px; }
.photo-grid .big{ min-height:432px; }

/* Services / winter: wide banner shot */
.shot-wide{ aspect-ratio:20 / 8; width:100%; }
.shot-wide.tall{ aspect-ratio:20 / 9; }

/* About: two-up */
.about-shots{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:clamp(2rem,4vw,3rem); }
.about-shots .shot{ aspect-ratio:4 / 5; }

/* Contact: storefront above the schematic map */
.shot-store{ aspect-ratio:4 / 3; width:100%; margin-bottom:2.5rem; }

@media (max-width:1080px){
  .photo-grid{ grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .photo-grid .big{ grid-row:auto; grid-column:1 / -1; min-height:300px; }
}
@media (max-width:680px){
  .photo-grid{ grid-template-columns:1fr; }
  .about-shots{ grid-template-columns:1fr; }
  .shot-wide, .shot-wide.tall{ aspect-ratio:16 / 10; }
}

/* ============================================================
   CONCEPT / AGENCY LAYER (portfolio demo overlay)
   Uses agency gold (#c9a24a) to read as The Wright Agency,
   distinct from Northside's ignition orange.
   ============================================================ */
.concept-ribbon{ background:#141013; color:#f3ede6; border-bottom:1px solid #2a2530;
  font-family:var(--sans); font-size:.75rem; line-height:1.4; letter-spacing:.01em;
  display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap;
  padding:.6rem var(--mx); text-align:center; }
.concept-ribbon .dot{ color:#c9a24a; }
.concept-ribbon b{ font-weight:700; color:#fff; }
.concept-ribbon a{ color:#fff; font-weight:700; white-space:nowrap;
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:#c9a24a; }
.concept-ribbon a:hover{ color:#c9a24a; }

.wa-badge{ position:fixed; left:16px; bottom:16px; z-index:90;
  display:inline-flex; align-items:center; gap:.5rem;
  background:#141013; color:#fff; border:1px solid #2a2530; border-radius:999px;
  padding:.5rem .9rem .5rem .5rem; font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.01em;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.65); transition:transform .2s ease, border-color .2s ease; }
.wa-badge b{ font-weight:700; }
.wa-badge:hover{ transform:translateY(-2px); border-color:#c9a24a; }
.wa-badge .m{ width:22px; height:22px; flex:none; display:grid; place-items:center;
  background:#c9a24a; color:#141013; border-radius:50%; font-family:var(--disp); font-size:.72rem; }
.wa-badge .arr{ color:#c9a24a; }
@media (max-width:680px){
  .concept-ribbon{ font-size:.68rem; gap:.5rem; }
  .wa-badge{ font-size:.66rem; left:10px; bottom:10px; }
}