/* ============================================================
   XCALIBUR V3 — INTERIOR PAGES
   Ports the 27 service / city / guide / policy pages and 404 onto the
   homepage system. Replaces css/main.css (dark ground, Barlow Condensed,
   red glow washes, 6–14px radii).
   Same type and colour as css/xcalibur.css. CSS-only: no markup edits.
   ============================================================ */

@font-face{font-family:'Akira Expanded';src:url('../fonts/akira_bold-webfont.woff2') format('woff2'),url('../fonts/akira_bold-webfont.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}


:root{
  /* ---- palette (literal brand colours, names describe the colour) ---- */
  --paper:#F6F1E8;--paper-deep:#EAE4D8;--paper-line:#D8D0C0;
  --ink:#191512;--ink-soft:#675F52;--ink-faint:#8C8374;
  --red:#C1121F;--red-deep:#8E0E17;--red-on-dark:#F2333C;--white:#FFFDF9;--gold:#C9962B;--accent-soft:#E8A0A6;

  /* ---- roles (names describe the job) — INK GROUND ---- */
  --ground:#191512;      /* page background */
  --ground-2:#1F1A16;    /* banded sections */
  --surface:#221D19;     /* raised cards, inputs, nav */
  --line:#37302A;        /* borders and hairlines */
  --text:#F6F1E8;        /* headlines, primary type */
  --text-soft:#C9C0B2;   /* body copy */
  --text-faint:#A99F8F;  /* captions, meta */

  --sans:'Archivo','Helvetica Neue',Helvetica,sans-serif;
  --display:'Akira Expanded','Archivo',sans-serif;
  --label:'Michroma','Archivo',sans-serif;
  --radius-ctl:2px;
  --gutter:clamp(20px,5vw,48px);
  --dur:180ms;--ease:cubic-bezier(.22,.9,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}}
body{font-family:var(--sans);font-size:19px;line-height:1.62;color:var(--text);background:var(--ground);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-variant-numeric:tabular-nums}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--text);text-decoration:none}
a:hover{color:var(--red-on-dark)}
button{font:inherit;cursor:pointer}
.container{width:min(1120px,100%);margin-inline:auto;padding-inline:var(--gutter)}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ---------- header — the inline Barlow/white styles are overridden here ---------- */
.header{position:sticky;top:0;z-index:60;background:rgba(25,21,18,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
/* padding-block, not padding. The shorthand was wiping .container's
   padding-inline, so the logo and the CTA sat hard against the screen edges
   on every interior page at phone width. */
.header .nav{display:flex;align-items:center;gap:14px;padding-block:14px}
.logo{font-family:var(--sans) !important;font-stretch:118%;font-weight:700 !important;font-size:19px !important;letter-spacing:-.01em !important;text-transform:none !important;color:var(--text) !important;display:inline-flex;align-items:center;padding:8px 0;white-space:nowrap}
.logo:hover{color:var(--text) !important}
.logo span{color:var(--red-on-dark) !important}
@media (max-width:560px){.logo{font-size:16px !important}}
.nav-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.nav-links a{font-size:15px;font-weight:500;color:var(--text-soft);padding:12px 10px;min-height:44px;display:inline-flex;align-items:center;transition:color var(--dur) var(--ease)}
.nav-links a:hover{color:var(--text)}
.nav-phone{font-weight:600 !important;color:var(--text) !important}
.nav-cta{background:var(--red);color:var(--white) !important;border-radius:var(--radius-ctl);padding:12px 20px !important;font-weight:600 !important;transition:background var(--dur) var(--ease)}
.nav-cta:hover{background:var(--red-deep);color:var(--white) !important}
@media (max-width:760px){.nav-links a:not(.nav-cta):not(.nav-phone){display:none}}
@media (max-width:560px){
  .header .nav{gap:10px}
  .nav-links{gap:4px;flex-wrap:nowrap}
  .nav-links a{white-space:nowrap}
  .nav-phone{font-size:13.5px !important;padding:12px 2px}
  .nav-cta{padding:11px 13px !important;font-size:13.5px}
}

/* ---------- page body ---------- */
.area-main{padding:clamp(48px,8vw,88px) 0 clamp(64px,10vw,120px)}

/* eyebrow carries the 3px red section rule */
/* eyebrow is a printed slab, not a hairline caption */
.eyebrow{display:inline-block;font-family:var(--label);font-size:10px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--white);background:var(--red);padding:9px 14px 8px;margin-bottom:26px}
.eyebrow::before{content:none}

h1{font-family:var(--sans);font-stretch:118%;font-weight:800;font-size:clamp(42px,8.4vw,96px);line-height:.94;letter-spacing:-.038em;margin-bottom:28px;max-width:15ch;text-wrap:balance}
h1 .red,.red{color:var(--red-on-dark)}
h2{font-family:var(--sans);font-stretch:114%;font-weight:700;font-size:clamp(25px,3.4vw,34px);line-height:1.08;letter-spacing:-.02em;margin-bottom:14px;text-wrap:balance}
h3{font-family:var(--sans);font-stretch:110%;font-weight:700;font-size:clamp(19px,2.2vw,22px);line-height:1.2;letter-spacing:-.015em;margin-bottom:8px}
h2 a{color:var(--text)}
h2 a:hover{color:var(--red-on-dark)}

.area-lede{font-size:clamp(20px,2.6vw,26px);line-height:1.44;color:var(--text);max-width:30em;margin-bottom:36px;padding-left:22px;border-left:3px solid var(--red)}
.area-body{font-size:18px;color:var(--text-soft);max-width:68ch;margin-bottom:28px}
.area-main p{max-width:68ch}
.area-main p a,.policy-main a{color:var(--text);border-bottom:1px solid var(--line);transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.area-main p a:hover,.policy-main a:hover{color:var(--red-on-dark);border-color:var(--red-on-dark)}

/* points list — ink checks, not red */
.area-points{list-style:none;margin:0 0 32px;display:grid;gap:2px;max-width:60ch}
.area-points li{position:relative;padding:13px 0 13px 30px;font-size:17.5px;border-bottom:1px solid var(--line)}
.area-points li:last-child{border-bottom:none}
.area-points li::before{content:"";position:absolute;left:0;top:16px;width:14px;height:14px;background:var(--red-on-dark);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='4'/%3E%3C/svg%3E") center/contain no-repeat}

/* content blocks — hairline rhythm, no cards */
/* section head: a short red bar sits above the rule, so a stack of these reads
   as a run of printed sections rather than a grid of identical cards */
.area-packages{border-top:1px solid var(--line);padding-top:30px;margin-top:clamp(40px,5.5vw,58px);position:relative}
.area-packages::before{content:"";position:absolute;top:-3px;left:0;width:64px;height:6px;background:var(--red)}
.area-packages h2{font-size:clamp(27px,3.8vw,40px)}
.area-packages p{color:var(--text-soft);font-size:17.5px}
.area-packages h2 a::after{content:"";display:none}

.area-faq{border-top:2px solid var(--text);padding-top:34px;margin-top:clamp(52px,7vw,72px);counter-reset:faq}
.area-faq h2{margin-bottom:28px;font-size:clamp(27px,3.8vw,40px)}
.area-faq h3{margin-top:30px;padding-top:26px;border-top:1px solid var(--line);counter-increment:faq}
.area-faq h3::before{content:counter(faq,decimal-leading-zero);display:block;font-family:var(--label);font-size:10px;font-weight:400;letter-spacing:.2em;color:var(--gold);margin-bottom:10px}
.area-faq h3:first-of-type{border-top:none;padding-top:0;margin-top:0}
.area-faq p{color:var(--text-soft);font-size:17.5px}

/* ---------- cta ---------- */
/* the page closes on one full-bleed red block. The horizontal padding keeps the
   buttons on the same line as the container above it. */
.area-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  margin:clamp(56px,8vw,88px) calc(50% - 50vw) 0;
  padding:clamp(26px,3.4vw,38px) max(var(--gutter),calc(50vw - 560px));
  background:var(--red)}
.area-cta .btn-primary{background:var(--white);color:var(--ink)}
.area-cta .btn-primary:hover{background:var(--paper-deep);color:var(--ink)}
.area-cta .btn-ghost{border-color:rgba(255,253,249,.5);color:var(--white)}
.area-cta .btn-ghost:hover{border-color:var(--white);background:rgba(255,253,249,.12);color:var(--white)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:16px 30px;border:none;border-radius:var(--radius-ctl);font-family:var(--sans);font-size:17px;font-weight:600;font-stretch:105%;letter-spacing:.01em;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--red);color:var(--white)}
.btn-primary:hover{background:var(--red-deep);color:var(--white)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--text);color:var(--text)}
@media (max-width:560px){.area-cta .btn{width:100%}}
/* standalone offer block (headlight restoration) */
.area-offer{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--red);padding:clamp(24px,3.4vw,32px);margin:0 0 34px}
.area-offer .ao-eyebrow{font-family:var(--label);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-soft);margin-bottom:14px}
.area-offer h2{margin-bottom:12px}
.area-offer p{color:var(--text-soft);font-size:17.5px;margin-bottom:22px}
.area-offer .btn{text-decoration:none}
@media (max-width:560px){.area-offer .btn{width:100%}}
/* scope one-liner above a page CTA */
.area-scope{font-style:italic;color:var(--text-soft);font-size:16.5px;border-left:2px solid var(--line);padding-left:16px;margin-top:44px}

.area-hours{margin-top:clamp(30px,4vw,44px);font-family:var(--label);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft);line-height:2;max-width:60ch}

/* ---------- footer ---------- */
.area-footer{background:var(--ground-2);color:var(--text-faint);border-top:1px solid var(--dark-line);padding:52px 0 64px;font-size:15px}
.area-footer p{margin-bottom:16px;max-width:none;line-height:2}
.area-footer strong{font-family:var(--label);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text);font-weight:400;display:block;margin-bottom:6px}
.area-footer a{color:var(--text-soft);display:inline-block;padding:4px 0}
.area-footer a:hover{color:var(--text)}

/* ---------- policy pages ---------- */
.policy-main{max-width:760px;margin:0 auto;padding:clamp(48px,8vw,80px) var(--gutter) clamp(72px,10vw,110px)}
.policy-back{display:inline-block;font-family:var(--label);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft);margin-bottom:40px;padding:8px 0}
.policy-back:hover{color:var(--red-on-dark)}
.policy-main .policy-logo{display:flex;width:-moz-fit-content;width:fit-content;margin-bottom:26px;border-bottom:none}
.policy-main h1{font-size:clamp(30px,4.6vw,46px);max-width:26ch;margin-bottom:10px}
.policy-updated{font-family:var(--label);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin-bottom:44px}
.policy-main h2{font-size:clamp(20px,2.6vw,25px);margin:40px 0 12px;padding-top:22px;border-top:1px solid var(--line)}
.policy-main p,.policy-main li{color:var(--text-soft);font-size:17px;line-height:1.68}
.policy-main p{margin-bottom:14px}
.policy-main ul{margin:0 0 16px 22px}
.policy-main li{margin-bottom:8px}
.policy-links{margin-top:56px;padding-top:24px;border-top:2px solid var(--text);display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--label);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.policy-links a{color:var(--text-soft);border-bottom:none}
.policy-links a:hover{color:var(--red-on-dark)}

/* ---------- 404 ---------- */
.nf-wrap{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(56px,10vw,96px) var(--gutter)}
.nf-code{font-family:var(--sans);font-stretch:118%;font-weight:800;font-size:clamp(88px,17vw,190px);line-height:.9;letter-spacing:-.045em;color:var(--text)}
.nf-code::after{content:"";display:block;width:56px;height:3px;background:var(--red);margin:24px auto 0}
.nf-title{font-size:clamp(24px,4vw,38px);margin:26px 0 14px;max-width:22ch}
.nf-copy{max-width:52ch;color:var(--text-soft);font-size:18px;margin-bottom:14px}
.nf-note{max-width:56ch;font-size:15px;color:var(--text-faint);margin-bottom:32px}
.nf-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
@media (max-width:560px){.nf-actions .btn{width:100%}}

/* ---------- bone texture on the ink ground (matches css/xcalibur.css) ---------- */
.area-footer{background-image:repeating-linear-gradient(90deg,rgba(246,241,232,.07) 0 1px,transparent 1px 10px)}

/* ---------- real vector wordmark in the header (replaces the text imitation) ---------- */
.container.nav{justify-content:space-between}
.logo img.wm{display:block;height:26px;width:auto}
@media (max-width:560px){.logo img.wm{height:21px}}

/* ---------- city page photograph ----------
   These pages shipped with zero images. One real photo, framed like the rest
   of the system: hairline border, Michroma caption on the raised surface. */
.area-shot{margin:clamp(38px,6vw,60px) 0 clamp(46px,7vw,72px);border:1px solid var(--line);max-width:840px;background:var(--surface);overflow:hidden;
  transform:rotate(-1.5deg);box-shadow:16px 16px 0 var(--red);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.area-shot:hover{transform:rotate(0deg);box-shadow:8px 8px 0 var(--red)}
.area-shot img{width:100%;height:auto;display:block}
.area-shot figcaption{font-family:var(--label);font-size:9.5px;letter-spacing:.14em;line-height:1.7;text-transform:uppercase;color:var(--text-faint);padding:14px 16px;background:var(--surface);border-top:1px solid var(--line);border-left:3px solid var(--gold)}
@media (max-width:560px){.area-shot{transform:none;box-shadow:8px 8px 0 var(--red)}.area-shot:hover{transform:none}}


/* ============================================================
   MOTION — scroll driven, CSS only. These pages load no JS, so this
   uses view() timelines and is wrapped in @supports: browsers without
   it simply render everything in place.
   ============================================================ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .area-packages, .area-faq, .area-offer {
      animation: area-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}
/* transform only, deliberately. Fading on a scroll timeline can strand a block
   part-faded when the page is shorter than the window, and half-lit copy on a
   client site is worse than no motion at all. */
@keyframes area-rise{from{transform:translateY(22px)}to{transform:none}}


/* ---------- before / after photo pair (13 service and guide pages) ----------
   These shipped unstyled: the images stretched and the captions ran loose under
   them. Same pinned frame as .area-shot, alternating tilt so a pair reads as two
   prints laid down rather than a two-up card grid. */
.area-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(22px,3.4vw,38px);margin:clamp(38px,6vw,58px) 0 clamp(44px,7vw,66px);max-width:900px}
.area-photos figure{border:1px solid var(--line);background:var(--surface);overflow:hidden;box-shadow:11px 11px 0 var(--red);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.area-photos figure:nth-child(odd){transform:rotate(-1.3deg)}
.area-photos figure:nth-child(even){transform:rotate(1.1deg)}
.area-photos figure:hover{transform:rotate(0deg);box-shadow:5px 5px 0 var(--red)}
.area-photos img{width:100%;height:auto;display:block}
.area-photos figcaption{font-family:var(--label);font-size:9.5px;letter-spacing:.14em;line-height:1.7;text-transform:uppercase;color:var(--text-faint);padding:13px 15px;background:var(--surface);border-top:1px solid var(--line);border-left:3px solid var(--gold)}
@media (max-width:560px){
  .area-photos figure,.area-photos figure:nth-child(odd),.area-photos figure:nth-child(even){transform:none;box-shadow:7px 7px 0 var(--red)}
}