/* =========================================================
   PROSCOPE HOME PAINTING — "PROOF FIRST" CONCEPT
   Design thesis: the work sells the job. Photos lead,
   type gets out of the way, and gold means one thing only:
   call us.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* surfaces — white, so the photographs carry the colour */
  --paper:     #FFFFFF;
  --surface:   #F7F5F1;
  --surface-2: #EFEBE3;
  --line:      #E4DFD6;

  /* ink — navy pulled from the logo */
  --ink:       #131347;
  --ink-2:     #33335F;
  --muted:     #6E6E88;

  /* gold is reserved for ONE job: calling. Nothing else uses it. */
  --gold:      #E8A93D;
  --gold-dk:   #B87F17;

  --f-head: 'Fraunces', Georgia, serif;
  --f-body: 'Inter', system-ui, -apple-system, sans-serif;

  --r: 10px;
  --shadow-s: 0 2px 8px rgba(19,19,71,.06);
  --shadow-m: 0 18px 44px -22px rgba(19,19,71,.34);
  --shadow-l: 0 32px 70px -30px rgba(19,19,71,.42);

  --wrap: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  margin:0; background: var(--paper); color: var(--ink);
  font-family: var(--f-body); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }

h1,h2,h3{
  font-family: var(--f-head); font-weight: 600;
  line-height: 1.06; letter-spacing: -0.018em; margin: 0;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
}
h1{ font-size: clamp(2.5rem, 5.6vw, 4.3rem); }
h2{ font-size: clamp(1.95rem, 3.6vw, 2.9rem); }
h3{ font-size: 1.22rem; letter-spacing: -0.01em; }
p{ margin: 0 0 1em; }
p:last-child{ margin-bottom: 0; }

.wrap{ width: min(100% - 44px, var(--wrap)); margin-inline: auto; }
@media (max-width: 700px){ .wrap{ width: calc(100% - 32px); } }

.sec{ padding: clamp(58px, 8vw, 104px) 0; }
.sec--tight{ padding: clamp(40px, 5vw, 64px) 0; }
.sec--surface{ background: var(--surface); }
.sec--ink{ background: var(--ink); color: #fff; }
.sec--ink h2{ color:#fff; }

.eyebrow{
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-dk); margin: 0 0 0.85em;
}
.sec--ink .eyebrow{ color: var(--gold); }
.lede{ font-size: 1.1rem; color: var(--muted); max-width: 58ch; }
.sec--ink .lede{ color: #C8C6E4; }

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding: 16px 26px; border-radius: var(--r); border: 1.5px solid transparent;
  font-family: var(--f-body); font-weight: 600; font-size: 0.97rem;
  text-decoration:none; cursor:pointer; white-space: nowrap;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.btn:active{ transform: translateY(1px); }

/* GOLD = CALL. This is the only place gold appears as a fill. */
.btn--call{
  background: var(--gold); color: var(--ink);
  border-color: var(--gold-dk); box-shadow: var(--shadow-m);
  font-weight: 700;
}
.btn--call:hover{ background: #F3B854; }

.btn--solid{ background: var(--ink); color:#fff; }
.btn--solid:hover{ background: #1E1E63; }

.btn--ghost{ background: transparent; color: var(--ink); border-color: #C9C4B8; }
.btn--ghost:hover{ background: var(--surface-2); }

.sec--ink .btn--ghost, .hero .btn--ghost{ color:#fff; border-color: rgba(255,255,255,.5); }
.sec--ink .btn--ghost:hover, .hero .btn--ghost:hover{ background: rgba(255,255,255,.12); }

.btns{ display:flex; gap: 13px; flex-wrap: wrap; }

/* ---------------- header ---------------- */
.hdr{
  position: sticky; top:0; z-index: 90;
  background: rgba(255,255,255,.93);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.hdr__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; height: 74px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand img{ width:42px; height:42px; object-fit:contain; }
.brand b{ font-family: var(--f-head); font-size: 1.24rem; font-weight:700; letter-spacing:-0.02em; display:block; line-height:1; }
.brand b + span{ font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display:block; }

.nav ul{ display:flex; gap: 28px; list-style:none; margin:0; padding:0; }
.nav a{
  text-decoration:none; font-size: 0.93rem; font-weight: 500; color: var(--ink-2);
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"]{ color: var(--ink); border-color: var(--gold); }

.hdr__cta{ display:flex; align-items:center; gap: 14px; }
.hdr__tel{
  text-decoration:none; font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em;
  white-space:nowrap;
}
.hdr__tel small{ display:block; font-size:0.6rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
.burger{ display:none; background:none; border:none; padding:8px; cursor:pointer; flex-direction:column; gap:5px; }
.burger span{ width:23px; height:2px; background: var(--ink); display:block; border-radius:2px; }

@media (max-width: 1000px){
  .nav{
    position:absolute; top:74px; left:0; right:0; background: var(--paper);
    border-bottom:1px solid var(--line); display:none; padding: 6px 22px 20px;
    box-shadow: var(--shadow-m);
  }
  .nav.open{ display:block; }
  .nav ul{ flex-direction:column; gap:0; }
  .nav li{ border-top: 1px solid var(--line); }
  .nav a{ display:block; padding: 15px 0; }
  .burger{ display:flex; }
}
@media (max-width: 560px){
  .hdr__in{ height: 66px; }
  .nav{ top:66px; }
  .brand img{ width:36px; height:36px; }
  .brand b{ font-size:1.08rem; }
  .brand b + span{ display:none; }
  .hdr__tel{ font-size:0.92rem; }
}

/* ---------------- hero: full-bleed photograph ---------------- */
.hero{
  position: relative; isolation: isolate;
  min-height: min(84vh, 760px);
  display: flex; align-items: flex-end;
  padding: 120px 0 clamp(44px, 6vw, 76px);
  color: #fff;
}
.hero__img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit: cover; object-position: center 58%;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, rgba(9,9,38,.88) 0%, rgba(9,9,38,.55) 38%, rgba(9,9,38,.12) 68%, rgba(9,9,38,.30) 100%);
}
.hero h1{ max-width: 15ch; text-wrap: balance; }
.hero h1 em{ font-style: italic; color: var(--gold); }
.hero .lede{ color: rgba(255,255,255,.9); margin-top: .7em; max-width: 46ch; font-size: 1.12rem; }
.hero .btns{ margin-top: 1.9em; }

.hero__badge{
  display:inline-flex; align-items:center; gap:9px;
  background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 7px 14px; border-radius: 100px; margin-bottom: 1.5em;
  font-size: 0.79rem; font-weight: 600; letter-spacing: .02em;
}
.hero__badge .stars{ color: var(--gold); letter-spacing: .06em; }

.hero__tag{
  position:absolute; right: 0; bottom: clamp(44px,6vw,76px); z-index: 1;
  font-size: 0.68rem; letter-spacing:.13em; text-transform:uppercase;
  color: rgba(255,255,255,.62); writing-mode: vertical-rl;
}

@media (max-width: 860px){
  .hero{ min-height: 0; padding: 62px 0 40px; align-items:flex-start; }
  .hero__img{ object-position: center 60%; }
  .hero .lede{ font-size: 1rem; }
  .hero .btns{ margin-top: 1.5em; display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
  .hero .btn{ padding: 15px 8px; font-size: 0.88rem; }
  .hero__tag{ display:none; }
}

/* ---------------- credentials rail ---------------- */
.creds{ background: var(--ink); color:#fff; padding: 15px 0; }
.creds__in{
  display:flex; flex-wrap:wrap; gap: 12px 40px; justify-content:center;
  font-size: 0.85rem;
}
.creds__i{ display:flex; align-items:center; gap:9px; color: rgba(255,255,255,.78); text-decoration:none; }
.creds__i b{ color:#fff; font-weight:600; }
.creds__i .stars{ color: var(--gold); letter-spacing:.05em; }
a.creds__i:hover b{ text-decoration: underline; }
@media (max-width: 860px){
  .creds__in{ justify-content:flex-start; gap: 9px 22px; font-size: 0.76rem; }
}

/* ---------------- before / after ---------------- */
.rail{
  display:grid; grid-auto-flow: column;
  grid-auto-columns: minmax(min(84vw, 430px), 1fr);
  gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 12px; margin-top: 2.4em;
  scrollbar-width: thin;
}
.rail::-webkit-scrollbar{ height:6px; }
.rail::-webkit-scrollbar-thumb{ background: var(--line); border-radius:99px; }
@media (min-width: 940px){
  .rail{ grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; }
}

.ba{ scroll-snap-align:start; min-width:0; }
.ba__pair{
  display:grid; grid-template-columns: 1fr 1fr; gap:3px;
  border-radius: var(--r); overflow:hidden; background: var(--line);
  box-shadow: var(--shadow-m);
}
.ba figure{ position:relative; margin:0; }
.ba img{ width:100%; aspect-ratio: 3/4; object-fit: cover; background: var(--surface-2); }
.ba figcaption{
  position:absolute; left:9px; bottom:9px;
  font-size: 0.62rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  padding: 5px 10px; border-radius: 100px; color:#fff;
}
.ba .b figcaption{ background: rgba(9,9,38,.82); }
.ba .a figcaption{ background: var(--gold-dk); }
.ba__cap{ margin-top: 13px; }
.ba__cap b{ display:block; font-family: var(--f-head); font-size: 1.06rem; font-weight:600; }
.ba__cap span{ color: var(--muted); font-size: 0.92rem; }

/* drag-to-compare */
.cmp{ position:relative; border-radius: var(--r); overflow:hidden; box-shadow: var(--shadow-l); max-width: 920px; }
.cmp__f{ position:relative; aspect-ratio: 16/10; cursor: ew-resize; }
.cmp img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; }
.cmp img.is-b{ clip-path: inset(0 calc(100% - var(--p,50%)) 0 0); }
.cmp__d{ position:absolute; top:0; bottom:0; left: var(--p,50%); width:3px; background:#fff; transform:translateX(-50%); pointer-events:none; box-shadow: 0 0 0 1px rgba(0,0,0,.22); }
.cmp__d::after{
  content:"⟷"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; background:#fff; color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
  box-shadow: var(--shadow-m);
}
.cmp__t{
  position:absolute; top:14px; z-index:2; font-size:0.66rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; padding:6px 13px; border-radius:100px;
  pointer-events:none;
}
.cmp__t--b{ left:14px; background: rgba(9,9,38,.82); color:#fff; }
.cmp__t--a{ right:14px; background: var(--gold); color: var(--ink); }
.cmp__r{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; }

/* ---------------- the owner ---------------- */
.owner{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 5vw, 68px); align-items:center; }
@media (max-width: 860px){ .owner{ grid-template-columns: 1fr; } }
.owner__ph{ border-radius: var(--r); overflow:hidden; box-shadow: var(--shadow-l); }
.owner__ph img{ width:100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 28%; }
@media (max-width: 860px){ .owner__ph{ max-width: 300px; } .owner__ph img{ aspect-ratio: 1/1; } }
.owner blockquote{
  margin: 0 0 1.3em; padding-left: 20px; border-left: 3px solid var(--gold);
  font-family: var(--f-head); font-size: clamp(1.25rem,2.3vw,1.6rem);
  line-height: 1.32; font-weight: 500; letter-spacing:-0.012em;
}
.owner__sig{ font-size:0.87rem; color: var(--muted); }
.owner__sig b{ color: var(--ink); display:block; font-size:0.98rem; }

/* ---------------- service cards ---------------- */
.svc{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 2.6em; }
@media (max-width: 900px){ .svc{ grid-template-columns: repeat(2,1fr); gap:14px; } }
@media (max-width: 560px){ .svc{ grid-template-columns: 1fr; } }

.card{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--r);
  overflow:hidden; text-decoration:none; color: inherit; display:flex; flex-direction:column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-m); border-color: #D5CEC0; }
.card img{ width:100%; aspect-ratio: 3/2; object-fit: cover; }
.card__b{ padding: 18px 19px 20px; flex:1; display:flex; flex-direction:column; }
.card h3{ margin-bottom: .35em; }
.card p{ color: var(--muted); font-size: 0.93rem; margin:0; }
.card__go{
  margin-top: auto; padding-top: 14px; font-size: 0.83rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color: var(--gold-dk);
}

.svc--minor{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 18px; }
.chip{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  border:1px solid var(--line); background: var(--paper); border-radius: 100px;
  padding: 9px 17px; font-size:0.9rem; font-weight:500; color: var(--ink-2);
}
.chip:hover{ border-color: var(--ink); color: var(--ink); }

/* ---------------- steps ---------------- */
.steps{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,3vw,42px); margin-top: 2.8em; }
@media (max-width: 780px){ .steps{ grid-template-columns: 1fr; gap: 26px; } }
.step__n{
  font-family: var(--f-head); font-size: 2.6rem; font-weight:600; line-height:1;
  color: var(--gold); margin-bottom: .22em;
}
.step h3{ margin-bottom:.4em; }
.step p{ color: var(--muted); font-size: 0.96rem; }
.sec--ink .step p{ color: #B8B6D8; }

/* ---------------- reviews ---------------- */
.rev{ display:grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin-top: 2.4em; }
@media (max-width: 780px){ .rev{ grid-template-columns:1fr; } }
.rev__card{
  border:1px solid var(--line); border-radius: var(--r); padding: 26px 26px 24px;
  background: var(--paper); display:flex; flex-direction:column; gap: 14px;
}
.rev__card .stars{ color: var(--gold); letter-spacing:.1em; font-size:1.05rem; }
.rev__card p{ font-family: var(--f-head); font-size:1.1rem; line-height:1.4; font-weight:500; }

/* ---------------- final CTA ---------------- */
.close{ background: var(--ink); color:#fff; text-align:center; padding: clamp(60px,8vw,104px) 0; }
.close h2{ color:#fff; max-width: 18ch; margin-inline:auto; text-wrap: balance; }
.close p{ color:#C8C6E4; max-width: 48ch; margin: 1em auto 0; }
.close .btns{ justify-content:center; margin-top: 2em; }

/* ---------------- footer ---------------- */
.ft{ background: #0C0C34; color:#B7B5D6; padding: 58px 0 34px; font-size:0.9rem; }
.ft a{ color:#B7B5D6; text-decoration:none; }
.ft a:hover{ color:#fff; }
.ft__g{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; }
@media (max-width: 860px){ .ft__g{ grid-template-columns: 1fr 1fr; gap:28px; } }
@media (max-width: 520px){ .ft__g{ grid-template-columns: 1fr; } }
.ft h4{ color:#fff; font-family:var(--f-body); font-size:0.75rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 1em; }
.ft ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.ft__bot{ border-top:1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 22px; font-size:0.78rem; color:#7C7AA0; }

/* ---------------- sticky call bar ---------------- */
.callbar{ display:none; }
@media (max-width: 860px){
  .callbar{
    display:grid; grid-template-columns: 1.6fr 1fr; gap:9px;
    position:fixed; left:0; right:0; bottom:0; z-index:200;
    padding: 10px 13px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top:1px solid var(--line);
    box-shadow: 0 -10px 30px -16px rgba(19,19,71,.45);
  }
  .callbar a{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:1px; padding:10px 6px; border-radius: 9px; text-decoration:none;
    border:1.5px solid transparent; line-height:1.15;
  }
  .callbar .c{ background: var(--gold); color: var(--ink); border-color: var(--gold-dk); }
  .callbar .t{ background: var(--paper); color: var(--ink); border-color: #C9C4B8; }
  .callbar small{ font-size:0.58rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; opacity:.7; }
  .callbar b{ font-size:0.95rem; font-weight:700; white-space:nowrap; }
  body{ padding-bottom: 78px; }
}

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:12px; top:12px; z-index:999; background:#fff; padding:10px 16px; border-radius:6px; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* =========================================================
   SUB-PAGE COMPONENTS
   ========================================================= */

/* breadcrumbs */
.crumbs{ padding: 14px 0; border-bottom: 1px solid var(--line); background: var(--paper); }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; font-size:0.79rem; color: var(--muted); }
.crumbs a{ text-decoration:none; color: var(--muted); }
.crumbs a:hover{ color: var(--ink); text-decoration: underline; }
.crumbs li+li::before{ content:"/"; margin-right:8px; opacity:.5; }
.crumbs [aria-current]{ color: var(--ink); font-weight:500; }

/* sub-page hero: photo band, shorter than the home hero */
.phero{
  position:relative; isolation:isolate; color:#fff;
  display:flex; align-items:flex-end;
  min-height: min(58vh, 480px);
  padding: 96px 0 clamp(34px,4.4vw,54px);
}
.phero__img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center 55%; }
.phero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(to top, rgba(9,9,38,.90) 0%, rgba(9,9,38,.60) 42%, rgba(9,9,38,.22) 78%, rgba(9,9,38,.36) 100%);
}
.phero .eyebrow{ color: var(--gold); }
.phero h1{ max-width: 17ch; text-wrap: balance; }
.phero h1 em{ font-style:italic; color: var(--gold); }
.phero .lede{ color: rgba(255,255,255,.9); margin-top:.7em; max-width: 52ch; }
.phero .btns{ margin-top: 1.7em; }
.phero__pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:1.3em; }
.phero__pills span{
  border:1px solid rgba(255,255,255,.34); background: rgba(255,255,255,.11);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius:100px; padding:6px 13px; font-size:0.76rem; font-weight:500;
}
@media (max-width: 860px){
  .phero{ min-height:0; padding: 46px 0 34px; align-items:flex-start; }
  .phero .btns{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .phero .btn{ padding:15px 8px; font-size:0.86rem; }
}

/* plain (no photo) page head, for contact / thank-you */
.phead{ background: var(--ink); color:#fff; padding: clamp(46px,6vw,78px) 0 clamp(40px,5vw,62px); }
.phead .eyebrow{ color: var(--gold); }
.phead h1{ color:#fff; max-width: 16ch; text-wrap:balance; }
.phead h1 em{ font-style:italic; color: var(--gold); }
.phead .lede{ color:#C8C6E4; margin-top:.7em; }
.phead .btns{ margin-top:1.7em; }
.phead .btn--ghost{ color:#fff; border-color: rgba(255,255,255,.5); }
.phead .btn--ghost:hover{ background: rgba(255,255,255,.12); }
@media (max-width: 860px){
  .phead .btns{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .phead .btn{ padding:15px 8px; font-size:0.86rem; }
  .phead .btns .btn:nth-child(3){ grid-column: 1 / -1; }
}

/* two-column text + photo */
.split{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,4.4vw,64px); align-items:center; }
.split--flip > *:first-child{ order: 2; }
@media (max-width: 900px){
  .split{ grid-template-columns:1fr; gap:30px; }
  .split--flip > *:first-child{ order: 0; }
}

.figure{ margin:0; }
.figure img{ width:100%; border-radius: var(--r); box-shadow: var(--shadow-l); }
.figure figcaption{ margin-top:12px; font-size:0.88rem; color: var(--muted); }
.figure figcaption b{ display:block; color: var(--ink); font-weight:600; }
.sec--ink .figure figcaption{ color:#B8B6D8; }
.sec--ink .figure figcaption b{ color:#fff; }

/* checkmark spec list */
.specs{ list-style:none; margin: 1.5em 0 0; padding:0; display:grid; gap: 13px; }
.specs li{ position:relative; padding-left: 30px; font-size:0.98rem; color: var(--ink-2); }
.specs li::before{
  content:""; position:absolute; left:0; top:.42em; width: 17px; height: 9px;
  border-left: 2.5px solid var(--gold-dk); border-bottom: 2.5px solid var(--gold-dk);
  transform: rotate(-45deg);
}
.specs li b{ color: var(--ink); font-weight:600; }
.sec--ink .specs li{ color:#C8C6E4; }
.sec--ink .specs li b{ color:#fff; }
.sec--ink .specs li::before{ border-color: var(--gold); }

/* pull quote / callout */
.callout{
  margin-top: 1.8em; padding: 20px 24px; border-left: 3px solid var(--gold);
  background: var(--surface); border-radius: 0 var(--r) var(--r) 0;
}
.callout p{ font-family: var(--f-head); font-size: 1.08rem; font-weight:500; line-height:1.4; margin:0; }
.callout span{ display:block; margin-top:.7em; font-size:0.76rem; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); }
.sec--ink .callout{ background: rgba(255,255,255,.07); }
.sec--ink .callout p{ color:#fff; }

/* stat row */
.stats{ display:flex; flex-wrap:wrap; gap: clamp(24px,4vw,54px); margin-top: 2em; }
.stat b{ display:block; font-family: var(--f-head); font-size: clamp(1.9rem,3.4vw,2.5rem); font-weight:600; line-height:1; color: var(--ink); }
.stat span{ font-size:0.8rem; letter-spacing:.05em; color: var(--muted); display:block; margin-top:.5em; }
.sec--ink .stat b{ color: var(--gold); }
.sec--ink .stat span{ color:#B8B6D8; }

/* FAQ accordion */
.faq{ margin-top: 2.2em; border-top: 1px solid var(--line); max-width: 860px; }
.faq details{ border-bottom: 1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding: 21px 44px 21px 0; position:relative;
  font-family: var(--f-head); font-size: 1.1rem; font-weight:600; letter-spacing:-0.01em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--f-body); font-size:1.5rem; font-weight:400; color: var(--gold-dk); line-height:1;
}
.faq details[open] summary::after{ content:"−"; }
.faq details > div{ padding: 0 44px 24px 0; color: var(--muted); }
.faq details > div p{ margin-bottom:.8em; }

/* job block (before/after pairs on service pages) */
.job{ margin-top: 3em; }
.job:first-of-type{ margin-top: 2.4em; }
.job h3{ font-size:1.35rem; margin-bottom:.3em; }
.job__sub{ font-size:0.82rem; letter-spacing:.05em; text-transform:uppercase; color: var(--muted); margin-bottom:1.3em; }
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width: 700px){ .pair{ gap:10px; } }
.pair .figure img{ aspect-ratio: 1/1; object-fit: cover; }
.grid3{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; margin-top:1.3em; }
@media (max-width: 700px){ .grid3{ grid-template-columns: repeat(2,1fr); } }
.grid3 img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius: var(--r); }

/* price factor list */
.factors{ display:grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin-top:2.2em; }
@media (max-width: 760px){ .factors{ grid-template-columns:1fr; } }
.factor{ border:1px solid var(--line); border-radius: var(--r); padding: 22px 23px; background: var(--paper); }
.factor h3{ font-size:1.08rem; margin-bottom:.4em; }
.factor p{ color: var(--muted); font-size:0.93rem; margin:0; }

/* next-services links */
.next{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:2.2em; }
@media (max-width: 760px){ .next{ grid-template-columns:1fr; } }
.next a{
  display:block; text-decoration:none; border:1px solid var(--line); border-radius:var(--r);
  padding: 22px 23px; background: var(--paper); transition: border-color .16s ease, transform .16s ease;
}
.next a:hover{ border-color: var(--ink); transform: translateY(-2px); }
.next h3{ font-size:1.06rem; margin-bottom:.3em; }
.next p{ color: var(--muted); font-size:0.9rem; margin:0; }

/* contact form */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form .full{ grid-column: 1 / -1; }
@media (max-width: 620px){ .form{ grid-template-columns:1fr; } }
.form label{ display:block; font-size:0.82rem; font-weight:600; margin-bottom:7px; letter-spacing:.01em; }
.form label .opt{ font-weight:400; color: var(--muted); text-transform:none; letter-spacing:0; margin-left:5px; font-size:0.78rem; }
.form input, .form select, .form textarea{
  width:100%; padding: 14px 15px; border:1px solid #D7D1C5; border-radius: 8px;
  font-family: var(--f-body); font-size:1rem; background: var(--paper); color: var(--ink);
}
.form textarea{ min-height: 128px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus{
  outline:none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(19,19,71,.10);
}
.form-note{ margin-top: 1em; font-size:0.86rem; color: var(--muted); }

.contact-lines{ list-style:none; margin: 1.4em 0 0; padding:0; display:grid; gap: 15px; }
.contact-lines li{ display:flex; flex-direction:column; gap:2px; }
.contact-lines .k{ font-size:0.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); }
.contact-lines .v{ font-size:1.06rem; font-weight:600; text-decoration:none; }
.contact-lines .v:hover{ text-decoration:underline; }

/* video */
.video{ border-radius: var(--r); overflow:hidden; box-shadow: var(--shadow-l); background:#000; max-width: 380px; }
.video video{ width:100%; display:block; }

/* Narrow phones: let button labels wrap instead of forcing the page wider */
@media (max-width: 430px){
  .btn{
    white-space: normal; line-height: 1.25;
    padding-left: 10px; padding-right: 10px; font-size: 0.85rem;
  }
  .phero .btns .btn, .phead .btns .btn, .hero .btns .btn{ min-height: 50px; }
}

/* FIX: ghost buttons sitting on a photo hero must be white, not ink */
.phero .btn--ghost{ color:#fff; border-color: rgba(255,255,255,.55); background: rgba(0,0,0,.18); }
.phero .btn--ghost:hover{ background: rgba(255,255,255,.16); }

/* stronger scrim on sub-page heroes — some source photos are very bright */
.phero::after{
  background:
    linear-gradient(to top, rgba(9,9,38,.93) 0%, rgba(9,9,38,.70) 45%, rgba(9,9,38,.38) 80%, rgba(9,9,38,.48) 100%);
}
.phero .eyebrow{ text-shadow: 0 1px 12px rgba(9,9,38,.6); }