/* ============================================================
   E&E Restoration — v9 design layer
   Loaded LAST on every page. Carries the homepage hero look
   (Inter Tight display type, pill buttons, full-bleed photos with
   a left-side shade, slow Ken Burns drift) across the whole site.
   Base layout still lives in site.css (inner pages) / lp.css
   (homepage + ad landing pages); this file only refines it.
   ============================================================ */
:root{
  --disp:'Inter Tight',Inter,system-ui,-apple-system,sans-serif;
  --shade:6,26,34;
  --r-lg:24px;
  --ease-out:cubic-bezier(.2,.8,.2,1);
}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--disp);letter-spacing:-.03em}
h1,h2{font-weight:700}
h3,h4{font-weight:700;letter-spacing:-.02em}
.brand .nm,.nav-call a,.lpnav .ph a,.bar .nm{font-family:var(--disp);font-weight:700;letter-spacing:-.02em}
.kick{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:600;
  font-size:.74rem;letter-spacing:.16em}
.kick::before{content:"";width:22px;height:1.5px;background:currentColor;opacity:.7}
.head .kick,.final .kick{justify-content:center}
.head h2,.split h2,.final h2{letter-spacing:-.028em;line-height:1.05}
.head h2 .o,.split h2 .o,.final h2 .o{color:var(--orange)}
.trule{display:none}

/* ---------- buttons: pills everywhere ---------- */
.btn,.btn-submit,.nav-book{border-radius:999px;font-family:var(--disp);font-weight:700;letter-spacing:-.005em}
.btn{height:52px;padding:0 26px}
.nav-book{height:46px;padding:0 22px}
.btn-glass{background:rgba(var(--shade),.18);border:1.5px solid rgba(255,255,255,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn-glass:hover{background:rgba(var(--shade),.35);border-color:#fff}
.btn-line{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-line:hover{border-color:var(--ink)}

/* ---------- page hero: full-bleed photo, copy on the left ---------- */
.pagehero{display:flex;align-items:center;min-height:clamp(440px,62vh,640px);padding:96px 24px 88px;
  background:#061a22;isolation:isolate}
.pagehero .bg{overflow:hidden;z-index:-1}
.pagehero .bg img{opacity:1;object-position:var(--ph-focus,62% 40%);
  animation:ph-kb 22s ease-in-out infinite alternate;transform-origin:62% 40%}
.pagehero .bg::after{background:linear-gradient(100deg,
  rgba(var(--shade),.92) 0%,rgba(var(--shade),.8) 28%,rgba(var(--shade),.5) 50%,
  rgba(var(--shade),.12) 70%,rgba(var(--shade),0) 84%)}
.pagehero .in{width:100%;max-width:1180px}
.pagehero .kick{color:#7fe3e0;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.pagehero h1{font-size:clamp(2.3rem,3.6vw + .9rem,4rem);font-weight:700;line-height:1.03;letter-spacing:-.028em;
  max-width:17ch;margin-top:16px;text-shadow:0 2px 18px rgba(0,0,0,.4)}
.pagehero h1 .o{color:#ff7a2e;font-weight:800}
.pagehero p.sub{color:rgba(255,255,255,.9);font-size:1.08rem;line-height:1.6;max-width:34em;margin-top:18px;
  text-shadow:0 1px 10px rgba(0,0,0,.45)}
.ph-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ph-trust{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:22px;padding:0;
  font-family:var(--disp);font-size:.8rem;font-weight:600;color:rgba(255,255,255,.88);text-shadow:0 1px 8px rgba(0,0,0,.45)}
.ph-trust li{display:inline-flex;align-items:center;gap:8px}
.ph-trust li::before{content:"";width:6px;height:6px;border-radius:50%;background:#ffb27d}
.pagehero.slim{min-height:clamp(320px,42vh,420px);padding:80px 24px 64px}
.pagehero.slim h1{font-size:clamp(2rem,2.8vw + .9rem,3.1rem);max-width:18ch}
@keyframes ph-kb{from{transform:scale(1.03) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-1.8%,-1%,0)}}
@media(max-width:760px){
  .pagehero{min-height:0;padding:120px 20px 44px;align-items:flex-end}
  .pagehero .bg::after{background:linear-gradient(180deg,rgba(var(--shade),.15) 0%,rgba(var(--shade),.55) 38%,rgba(var(--shade),.92) 78%)}
  .pagehero h1{max-width:none}
  .ph-cta .btn{flex:1 1 auto}
}

/* ---------- photo blocks ---------- */
.simg{border-radius:var(--r-lg);box-shadow:0 30px 60px -24px rgba(10,32,48,.35)}
.simg img{aspect-ratio:4/3;object-fit:cover;height:auto;transition:transform 1.2s var(--ease-out)}
.simg:hover img{transform:scale(1.035)}
.simg .cap{left:16px;bottom:16px;background:rgba(var(--shade),.62);color:#fff;border-radius:999px;
  padding:9px 15px;font-family:var(--disp);font-weight:600;letter-spacing:.1em;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.split{gap:48px}
@media(min-width:900px){.split{gap:72px}}
.split .clist li{align-items:flex-start}

/* numbered step list (fire section) */
.steps4{list-style:none;padding:0;margin:6px 0 26px;display:grid;gap:14px;counter-reset:s}
.steps4 li{position:relative;padding:16px 18px 16px 62px;background:#fff;border:1px solid var(--line);border-radius:16px}
.steps4 li::before{counter-increment:s;content:counter(s);position:absolute;left:16px;top:15px;width:32px;height:32px;
  border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;
  font-family:var(--disp);font-weight:700;font-size:.9rem}
.steps4 b{display:block;font-family:var(--disp);font-size:1rem;color:var(--ink);letter-spacing:-.01em}
.steps4 span{display:block;font-size:.92rem;color:var(--body);margin-top:2px}

/* ---------- cards ---------- */
.res{border-radius:var(--r-lg);transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.res:hover{transform:translateY(-4px);box-shadow:0 26px 50px -22px rgba(10,32,48,.3)}
.res .ph img{aspect-ratio:16/10;object-fit:cover;width:100%}
.res h3{font-family:var(--disp)}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:18px;padding:0;transition:box-shadow .25s,border-color .25s}
.faq details[open]{border-color:transparent;box-shadow:0 18px 40px -20px rgba(10,32,48,.28)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 22px;font-family:var(--disp);font-weight:700;font-size:1.04rem;letter-spacing:-.01em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--mist);color:var(--teal-d);font-size:1.2rem;font-weight:500;transition:transform .25s,background .25s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--orange);color:#fff}
.faq details p{padding:0 22px 20px;color:var(--body);font-size:.95rem;line-height:1.7}

/* ---------- closing CTA band: photo instead of flat teal ---------- */
.final{background:#061a22;isolation:isolate}
.final::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url("../assets/ee-band-van-road.jpg") 62% 58%/cover no-repeat;
  animation:ph-kb 26s ease-in-out infinite alternate}
.final::after{z-index:-1;top:0;right:0;bottom:0;left:0;width:auto;height:auto;border-radius:0;filter:none;
  background:linear-gradient(100deg,rgba(var(--shade),.94) 0%,rgba(var(--shade),.82) 40%,rgba(var(--shade),.45) 75%,rgba(var(--shade),.25) 100%)}
.final-in{text-align:left;max-width:1180px;padding:110px 24px}
.final h2{max-width:16ch}
.final p{margin:0 0 30px;color:rgba(255,255,255,.88)}
.final .fc{justify-content:flex-start}
.final .alt{color:rgba(255,255,255,.75)}
@media(max-width:760px){.final-in{padding:84px 20px}}

/* ---------- small polish ---------- */
section.sec:not(.tight){padding-top:100px;padding-bottom:100px}
@media(max-width:760px){section.sec:not(.tight){padding-top:68px;padding-bottom:68px}}
.disclaim p{font-size:.78rem;line-height:1.6}

@media(prefers-reduced-motion:reduce){
  .pagehero .bg img,.final::before{animation:none}
  .simg:hover img{transform:none}
}

/* booking page: keep the hero short so the two booking cards stay near the top */
.book-hero{min-height:clamp(300px,36vh,380px)}
@media(max-width:760px){
  .book-hero{padding:72px 20px 26px}
  .book-hero p.sub{display:none}
  .book-hero h1{font-size:clamp(1.55rem,7vw,2rem)}
}