/* ============================================================
   DM PATTERSON CONSTRUCTION — shared stylesheet for interior pages
   ============================================================
   The homepage keeps its own inline <style>. This file is the
   shared shell for every page built after it: service pages,
   gallery, blog index and blog posts.

   The token block, base type, nav, buttons and footer below are
   carried from the approved homepage rule for rule. They are not
   a reinterpretation. If a shared rule changes on the homepage it
   changes here in the same edit, and QA compares the computed
   header and footer styles between index and an interior page at
   390 / 768 / 1440 to prove the two have not drifted.
   ============================================================ */

:root{
  --gold:#C9A227;          /* brand gold, straight off the logo files */
  --gold-deep:#A8871F;     /* pressed / hover state of a gold surface */
  --gold-lite:#DFC15C;     /* gold that needs extra lift on near-black */
  --gold-text:#8A6D14;     /* gold AS TEXT on white — #C9A227 only hits 2.4:1 */
  --black:#101010;         /* the one dark ground */
  --black-2:#1A1A1A;
  --white:#FFFFFF;         /* the white of black/white/gold */
  --err:#9E3B2E;           /* form error state, functional, not a brand accent */
  --bone:#F6F6F4;
  --bone-2:#EAEAE7;
  --paper:#FFFFFF;
  --ink:#141414;
  --ink-2:#3A3A3A;
  --gray:#6E6E6E;
  --line:rgba(20,20,20,.12);
  --shadow-lg:0 32px 80px -24px rgba(8,8,8,.22);
  --shadow-md:0 18px 44px -18px rgba(8,8,8,.18);
  --e:cubic-bezier(.22,1,.36,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --nav-h:76px;
}
*,*::before,*::after{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(--sans);font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* height:auto is the one deliberate addition to the carried base rules.
   The homepage rule is `img{max-width:100%;display:block}`, which works there
   only because every image on it is given an explicit height or object-fit by
   a later rule. Interior pages carry width/height attributes for CLS, and
   without height:auto the browser honours height="1200" literally while
   max-width shrinks the width, so a 4:3 photo renders as a stretched column.
   Every rule that needs a fixed height (.brand img, .phero-media img, .strip
   img) is more specific and still wins. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--gold);color:var(--black)}

/* ---------- grain overlay ---------- */
.grain{
  position:fixed;inset:-50%;z-index:9000;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 8s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}17%{transform:translate(-3%,-2%)}33%{transform:translate(2%,-3%)}
  50%{transform:translate(-2%,3%)}67%{transform:translate(3%,2%)}83%{transform:translate(-3%,1%)}100%{transform:translate(0,0)}
}

/* ---------- custom cursor: dot + ring target ---------- */
.cur-dot,.cur-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;mix-blend-mode:normal}
.cur-dot{width:6px;height:6px;background:var(--gold);margin:-3px 0 0 -3px;transition:opacity .3s,transform .18s var(--e),background .3s}
.cur-ring{
  width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(201,162,39,.55);
  transition:width .35s var(--e),height .35s var(--e),margin .35s var(--e),border-color .35s,opacity .3s,background .35s;
}
body.cur-hover .cur-ring{width:58px;height:58px;margin:-29px 0 0 -29px;border-color:rgba(201,162,39,.85);background:rgba(201,162,39,.06)}
body.cur-hover .cur-dot{transform:scale(.4)}
body.cur-dark .cur-dot{background:var(--bone)}
body.cur-dark .cur-ring{border-color:rgba(255,255,255,.6)}
@media (hover:none),(max-width:900px){.cur-dot,.cur-ring{display:none}}

/* ---------- scroll progress ---------- */
.scroll-prog{position:fixed;top:0;left:0;height:2px;background:var(--gold);z-index:8000;width:0;transition:width .1s linear}

/* ---------- layout ---------- */
.wrap{width:min(1280px,92vw);margin:0 auto}
.wrap-narrow{width:min(1060px,92vw);margin:0 auto}
section{position:relative}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--gold-text);
}
.eyebrow::before{content:'';width:26px;height:1px;background:var(--gold)}
.eyebrow.on-dark{color:var(--gold)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.1;letter-spacing:-.012em;margin:0;text-wrap:balance}
h2{font-size:clamp(34px,5vw,62px)}
h3{font-size:clamp(22px,2.4vw,30px);line-height:1.2;font-weight:700;letter-spacing:-.006em}
h4{font-weight:700}
/* Georgia ships oldstyle figures: 3, 4, 7 and 9 drop below the baseline, which
   reads as broken in a stat row or a step number. Every numeral stays on Inter. */
.stat b,.svc-n,.step b,.faq-n{font-family:var(--sans)}
p{margin:0 0 1.1em;text-wrap:pretty;color:var(--ink-2)}
.lead{font-size:clamp(17px,1.6vw,20px);line-height:1.72;max-width:62ch}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity .95s var(--e),transform .95s var(--e)}
.rv.in{opacity:1;transform:none}
/* clip the IMG, never the observed container — a container clipped to zero
   area is invisible to IntersectionObserver and would never reveal itself */
.rv-img{overflow:hidden}
.rv-img img{
  clip-path:inset(0 0 100% 0);transform:scale(1.16);filter:saturate(.85);
  transition:clip-path 1.25s var(--e),transform 1.6s var(--e),filter 1.4s var(--e);
}
.rv-img.in img{clip-path:inset(0 0 0 0);transform:scale(1);filter:saturate(1)}
[data-d="1"]{transition-delay:.09s}[data-d="2"]{transition-delay:.18s}
[data-d="3"]{transition-delay:.27s}[data-d="4"]{transition-delay:.36s}
[data-d="5"]{transition-delay:.45s}[data-d="6"]{transition-delay:.54s}
.line-mask{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em}
.line-mask>span{display:block;transform:translateY(125%);transition:transform 1.05s var(--e)}
.in .line-mask>span,.line-mask.in>span{transform:none}

/* ---------- nav (carried from the homepage rule for rule) ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:10002;background:var(--black);color:var(--white);padding:12px 20px}
.skip:focus{left:12px;top:12px}
nav{
  position:fixed;top:0;left:0;right:0;z-index:7000;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .5s var(--e),box-shadow .5s var(--e),height .4s var(--e),border-color .5s;
  border-bottom:1px solid transparent;
}
nav.stuck{background:rgba(251,250,247,.9);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom-color:var(--line);height:66px}
.nav-in{width:min(1280px,92vw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:13px}
.brand picture{display:flex}
@media(max-width:920px){
  .brand img{height:40px;aspect-ratio:420/296}
}
.brand img{
  height:44px;width:auto;object-fit:contain;flex:none;
  transition:height .4s var(--e),filter .5s;
}
nav.stuck .brand img{height:38px}
/* The reversed-out header only applies while the nav is actually sitting on a
   dark photo. On the homepage that is always true, so its inline CSS scopes
   these to nav:not(.stuck) alone. Interior pages are not all the same: the
   blog posts open on white, and unscoped white links there are invisible
   until the first scroll. `body.has-phero` is the gate, and it is set only on
   pages whose first screen is the dark .phero band. */
body.has-phero nav:not(.stuck) .nav-links>a{color:var(--white)}
body.has-phero nav:not(.stuck) .brand img{filter:drop-shadow(0 2px 10px rgba(8,8,8,.55))}
body.has-phero nav:not(.stuck) .nav-links>a::after{background:var(--gold)}
body.has-phero nav:not(.stuck) .burger span{background:var(--white)}
body.has-phero nav:not(.stuck) .nav-tel{color:var(--white)}
body.has-phero nav:not(.stuck) .nav-links>a:not(.nav-cta),
body.has-phero nav:not(.stuck) .nav-tel{text-shadow:0 1px 3px rgba(8,8,8,.35),0 6px 24px rgba(8,8,8,.45)}
@media(max-width:920px){
  body.has-phero nav:not(.stuck) .nav-links>a{color:var(--ink)}
  nav.menu-open:not(.stuck) .burger span{background:var(--ink)}
  body.has-phero nav:not(.stuck) .nav-links>a:not(.nav-cta){text-shadow:none}
}
.nav-tel{
  display:none;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ink);
  margin-left:auto;padding:6px 2px;white-space:nowrap;transition:color .5s;
}
.nav-tel svg{flex:none}
@media(max-width:920px){
  .nav-tel{display:inline-flex}
  .nav-in{gap:12px}
}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{
  position:relative;font-size:13.5px;font-weight:500;letter-spacing:.01em;color:var(--ink);
  padding:6px 0;transition:color .3s;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--e);
}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);transform-origin:left}
.nav-links a.active{color:var(--gold-text)}
.nav-links a.nav-cta{
  display:inline-flex;align-items:center;gap:13px;background:var(--gold);color:var(--black);
  padding:14px 26px;font-size:13px;font-weight:600;letter-spacing:.02em;border-radius:3px;
  line-height:1;white-space:nowrap;
  transition:transform .35s var(--e-spring),background .35s,box-shadow .35s;
  box-shadow:0 8px 22px -10px rgba(8,8,8,.42);
}
.nav-links a.nav-cta::after{display:none}
/* Services dropdown. The hover target is the .has-drop wrapper, never the link,
   and the panel is offset with padding on a transparent bridge rather than a
   margin gap. A margin gap drops the pointer out of the hitbox on the way down
   to the panel, which reads as the menu flickering shut. */
.has-drop{position:relative}
.has-drop>a{display:inline-flex;align-items:center;gap:7px}
.drop-caret{transition:transform .35s var(--e);flex:none}
.has-drop.open .drop-caret{transform:rotate(180deg)}
.drop{
  position:absolute;top:100%;left:50%;transform:translate(-50%,8px);
  padding-top:16px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--e),transform .35s var(--e),visibility .3s;z-index:20;
}
.has-drop:focus-within .drop{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
/* Hover opening is gated on a device that actually hovers. On a touch screen the
   first tap on an element whose :hover rules change what gets painted is consumed
   as the hover, and the click only lands on the SECOND tap. That was the
   "tap Services twice before the dropdown opens" bug: tap 1 rotated the caret and
   lit the hover state, tap 2 finally reached the JS accordion handler. Behind
   (hover:hover) a phone never matches these, so the first tap is a real click. */
@media (hover:hover){
  .has-drop:hover .drop-caret{transform:rotate(180deg)}
  .has-drop:hover .drop{
    opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
  }
}
.drop-in{background:var(--paper);border:1px solid var(--line);border-radius:3px;
  box-shadow:var(--shadow-lg);padding:9px;min-width:290px}
.drop-in a{display:block;width:100%;padding:12px 15px;border-radius:2px;font-size:14px;
  font-weight:500;color:var(--ink);line-height:1.35;
  transition:background .28s,color .28s,padding-left .3s var(--e)}
.drop-in a::after{display:none}
.drop-in a small{display:block;font-size:11.5px;color:var(--gray);margin-top:3px;font-weight:400}
.drop-in a:hover,.drop-in a:focus-visible{background:var(--bone);color:var(--gold-text);padding-left:20px}
.drop-in a[aria-current="page"]{color:var(--gold-text);background:var(--bone)}
/* same has-phero gate as the nav links above: the Services trigger is a
   .has-drop>a, not a .nav-links>a, so it needs its own scoped pair */
body.has-phero nav:not(.stuck) .has-drop>a{color:var(--white)}
body.has-phero nav:not(.stuck) .has-drop>a::after{background:var(--gold)}
.nav-cta svg{flex:none}
.nav-cta:hover{background:var(--gold-deep);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(8,8,8,.5)}
.nav-cta:active{transform:translateY(0) scale(.98)}
.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;width:22px;height:1.5px;background:var(--ink);transition:transform .4s var(--e),opacity .3s}
.burger span:nth-child(1){top:18px}.burger span:nth-child(2){top:25px}
.burger.open span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger.open span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
@media(max-width:920px){
  /* Right-hand sheet. The old drawer dropped from under the header, which left
     the transparent header bar sitting on top of a white panel and read as two
     unrelated layers. This runs the full height of the viewport and covers the
     header, so the panel is the only thing on screen. */
  .nav-links{
    position:fixed;top:0;right:0;bottom:0;left:auto;
    width:min(88vw,400px);
    background:var(--paper);flex-direction:column;
    /* align-items:center is inherited from the desktop row, where it means
       vertical centring. Once flex-direction is column it flips axis and
       centres every label horizontally. */
    align-items:stretch;justify-content:flex-start;
    gap:0;
    /* top padding clears the burger, which stays above this panel */
    padding:calc(var(--nav-h) + 10px) 26px 40px;
    border-bottom:0;border-left:1px solid var(--line);
    box-shadow:-20px 0 60px -24px rgba(8,8,8,.5);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    clip-path:none;
    /* transform hides the panel and blocks taps, but leaves all ten links in
       the tab order and the accessibility tree while the menu is closed.
       visibility takes them out; it is delayed on close so the slide still
       plays, and applied instantly on open. */
    /* Sits just under nav (7000) so the burger stays reachable above it, and
       well above everything else on the page. */
    transform:translateX(100%);visibility:hidden;z-index:6990;
    transition:transform .45s var(--e),visibility 0s linear .45s;
  }
  .nav-links.open{
    transform:translateX(0);visibility:visible;
    transition:transform .45s var(--e),visibility 0s;
  }
  /* The burger is the only close control, in the same spot it was opened from,
     so it has to paint above the sheet that now covers the header. */
  .burger{position:relative;z-index:3}

  /* nav.stuck carries backdrop-filter, and backdrop-filter on an ancestor makes
     that ancestor the containing block for position:fixed descendants. The
     sheet then anchored to the 66px header box instead of the viewport and was
     clipped to a white stub with only the first link showing. It only appeared
     once the page had been scrolled, which is why the home page looked fine at
     the top and every other page looked broken. Same for any filter or
     transform that might land on the header later. */
  nav.menu-open{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    filter:none !important;
    transform:none !important;
    /* The sheet now covers the header, so the bar behind it must not paint a
       strip of its own across the top of the panel. */
    background:transparent !important;
    border-bottom-color:transparent !important;
    box-shadow:none !important;
  }
  /* Rule 11: while the sheet is open the header shows the burger and nothing
     else, so the logo and phone do not sit on top of the menu. */
  nav.menu-open .brand,
  nav.menu-open .nav-tel{opacity:0;pointer-events:none;transition:opacity .25s}

  /* Top-level rows are body text, not headings. font-weight:500 on the shared
     .nav-links a rule reads as bold at 16px on a phone. */
  .nav-links>a,.has-drop>a{font-weight:400}

  /* Current page indicator: gold label plus a gold rule under that one row. */
  .nav-links>a[aria-current="page"],
  .has-drop>a[aria-current="page"]{color:var(--gold-text);font-weight:600;border-bottom-color:var(--gold)}
  /* A service page is a child of Services, so the parent row marks itself too. */
  .has-drop:has([aria-current="page"])>a{color:var(--gold-text);font-weight:600}

  /* The whole row opens the accordion, not just the word or the caret. */
  .has-drop>a{display:flex;width:100%;justify-content:space-between;align-items:center}
  .nav-links a{width:100%;padding:15px 0;border-bottom:1px solid var(--line);font-size:16px}
  .burger{display:block}
  .nav-cta{display:none}
  /* 16px padding computed to a 42px row, under the 44px tap-target floor.
     Selector must carry the `a` for the same reason the base rule above does:
     .nav-links a.nav-cta (0,2,1) outranks a bare .nav-links .nav-cta (0,2,0). */
  .nav-links a.nav-cta{display:inline-flex;margin-top:20px;width:100%;justify-content:center;padding:18px;border-bottom:0}
  /* Build-Standards: the mobile menu keeps the Services grouping as a
     collapsible sub-list. The three pages never flatten into top-level items. */
  .has-drop{width:100%}
  .has-drop>a{width:100%;justify-content:space-between}
  .drop{
    position:static;transform:none;padding-top:0;opacity:1;visibility:hidden;
    pointer-events:auto;max-height:0;overflow:hidden;transition:max-height .45s var(--e);
  }
  /* .has-drop:hover .drop (0,2,0) outranks the .drop rule above (0,1,0), and on
     touch a tap leaves :hover stuck on. That reapplied the desktop
     translate(-50%,0), shunting the submenu half its own width off the left
     edge so the service names were cut in half. Neutralised at equal
     specificity, in the mobile block only. */
  .has-drop:hover .drop,
  .has-drop:focus-within .drop,
  .has-drop.open .drop{transform:none;opacity:1;pointer-events:auto}
  /* visibility:visible on a child beats an ancestor's hidden, so this has to be
     gated on the drawer being open as well as the accordion. Ungated, the three
     Services links stay tab-reachable behind a closed menu. */
  .nav-links.open .has-drop.open .drop{visibility:visible}
  .has-drop.open .drop{max-height:360px}
  .drop-in{border:0;box-shadow:none;background:transparent;padding:0 0 10px;min-width:0}
  .drop-in a{padding:12px 0 12px 16px;font-size:14.5px}
  .drop-in a:hover{padding-left:20px}
  body.has-phero nav:not(.stuck) .has-drop>a{color:var(--ink)}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:11px;padding:17px 30px;border-radius:2px;border:0;cursor:pointer;
  font-size:14px;font-weight:600;letter-spacing:.015em;position:relative;overflow:hidden;
  transition:transform .35s var(--e-spring),box-shadow .35s var(--e),color .35s;
}
.btn-primary{background:var(--bone);color:var(--black);box-shadow:0 14px 34px -14px rgba(0,0,0,.5)}
.btn-primary::before{
  content:'';position:absolute;inset:0;background:var(--gold);transform:translateY(101%);
  transition:transform .5s var(--e);z-index:0;
}
.btn-primary:hover::before{transform:translateY(0)}
.btn-primary span,.btn-primary svg{position:relative;z-index:1}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 22px 44px -16px rgba(0,0,0,.6)}
.btn-ghost{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.32)}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6);transform:translateY(-3px)}
.btn-gold{background:var(--gold);color:var(--black);box-shadow:0 14px 32px -14px rgba(8,8,8,.42)}
.btn-gold:hover{background:var(--gold-deep);transform:translateY(-3px);box-shadow:0 22px 44px -16px rgba(8,8,8,.5)}
.btn:active{transform:translateY(0) scale(.98)}
.btn svg{transition:transform .4s var(--e)}
.btn:hover svg{transform:translateX(4px)}

/* ============================================================
   INTERIOR PAGE HEADER
   A compact dark band, not a second 100dvh hero. It keeps the
   nav on a dark ground so the transparent header reads exactly
   as it does over the homepage hero photo.
   ============================================================ */
.phero{position:relative;background:var(--black);overflow:hidden;isolation:isolate}
.phero-media{position:absolute;inset:0;z-index:0}
.phero-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.86)}
.phero-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,8,.72) 0%,rgba(8,8,8,.5) 45%,rgba(8,8,8,.82) 100%);
}
.phero-in{
  position:relative;z-index:2;width:min(1280px,92vw);margin:0 auto;
  padding:calc(var(--nav-h) + clamp(52px,8vh,86px)) 0 clamp(52px,8vh,86px);
}
.phero h1{
  color:var(--white);font-size:clamp(36px,5.4vw,72px);font-weight:400;line-height:1.06;
  letter-spacing:-.018em;margin:20px 0 0;max-width:18ch;
  text-shadow:0 1px 3px rgba(8,8,8,.26),0 10px 44px rgba(8,8,8,.30);
}
.phero .lead{color:rgba(255,255,255,.82);margin:24px 0 0;max-width:56ch;
  text-shadow:0 1px 3px rgba(8,8,8,.32),0 8px 34px rgba(8,8,8,.42)}
.phero .eyebrow{color:var(--gold-lite);text-shadow:0 1px 3px rgba(8,8,8,.4)}
.phero .eyebrow::before{background:var(--gold-lite);opacity:.9}
.phero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* Breadcrumb.
   The header rules above use the bare `nav` selector, carried from the
   homepage inline CSS. The breadcrumb is also a <nav> landmark, so it
   inherits position:fixed, inset:0 and height:76px from that block and
   lands on top of the header. Every one of those declarations has to be
   handed back explicitly, not just the position. */
.crumbs{
  position:static;top:auto;left:auto;right:auto;height:auto;
  display:block;border-bottom:0;z-index:auto;transition:none;
  font-size:12.5px;color:rgba(255,255,255,.62);margin-bottom:4px;
}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.crumbs a{color:rgba(255,255,255,.72);transition:color .3s}
.crumbs a:hover{color:var(--gold-lite)}
.crumbs li+li::before{content:'/';margin-right:9px;color:rgba(255,255,255,.34)}
.crumbs [aria-current="page"]{color:rgba(255,255,255,.9)}
/* breadcrumbs on a light ground (blog post header) */
.crumbs-light{color:var(--gray)}
.crumbs-light a{color:var(--gray)}
.crumbs-light a:hover{color:var(--gold-text)}
.crumbs-light li+li::before{color:var(--line)}
.crumbs-light [aria-current="page"]{color:var(--ink-2)}

/* ============================================================
   SERVICE PAGE
   ============================================================ */
.sec{padding:clamp(72px,10vh,120px) 0}
.sec-bone{background:var(--bone)}
.sec-dark{background:var(--black);color:var(--bone)}
.sec-dark h2,.sec-dark h3{color:var(--white)}
.sec-dark p{color:rgba(255,255,255,.68)}
.sec-head{max-width:62ch;margin-bottom:clamp(34px,5vw,52px)}
.sec-head h2{margin-top:18px}
.sec-head .lead{margin-top:22px}

/* intro: copy left, sticky contact card right */
.svc-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(38px,5.5vw,76px);align-items:start}
@media(max-width:940px){.svc-layout{grid-template-columns:1fr;gap:48px}}
.svc-copy h2{margin-bottom:20px}
.svc-copy h3{margin:38px 0 14px}
.svc-copy p{font-size:16.5px;line-height:1.75}

/* the client's own bullet list, set as a two-column checklist */
.tick{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:13px 26px}
@media(max-width:620px){.tick{grid-template-columns:1fr}}
.tick li{position:relative;padding-left:31px;font-size:15.5px;line-height:1.55;color:var(--ink)}
.tick li::before{
  content:'';position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;
  background:rgba(201,162,39,.12);
}
.tick li::after{
  content:'';position:absolute;left:6.5px;top:8px;width:7px;height:4px;
  border-left:1.6px solid var(--gold-text);border-bottom:1.6px solid var(--gold-text);
  transform:rotate(-45deg);
}

/* sticky aside */
.aside-card{
  background:var(--bone);border:1px solid var(--line);border-radius:3px;
  padding:clamp(26px,3vw,34px);position:sticky;top:calc(var(--nav-h) + 22px);
}
@media(max-width:940px){.aside-card{position:static}}
.aside-card h3{font-size:21px;margin-bottom:12px}
.aside-card p{font-size:15px;margin-bottom:20px}
.aside-card .btn{width:100%;justify-content:center}
.aside-row{display:flex;gap:13px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line)}
.aside-row:last-of-type{border-bottom:0}
.aside-ico{flex:none;width:34px;height:34px;border-radius:2px;background:rgba(201,162,39,.09);
  display:grid;place-items:center;color:var(--gold-text)}
.aside-row b{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);margin-bottom:4px;font-weight:600}
.aside-row a,.aside-row span{font-size:14.5px;color:var(--ink);line-height:1.5}
.aside-row a{transition:color .3s}
.aside-row a:hover{color:var(--gold-text)}

/* what we deliver — numbered editorial rows, same shape as the homepage pillars */
.pillars{margin-top:44px;border-top:1px solid var(--line)}
.pillar{
  display:grid;grid-template-columns:52px 1fr;gap:22px;padding:26px 0;
  border-bottom:1px solid var(--line);position:relative;cursor:default;
}
/* The hover plate bleeds past the text column. On the homepage the section
   clips it with overflow:hidden, which is not available here because the
   sticky aside would stop sticking inside a clipped ancestor. The bleed is
   tied to the .wrap gutter (4vw) instead, so it can never reach past the
   page edge and open an 8px sideways scroll at 390. */
.pillar::before{
  content:'';position:absolute;top:0;bottom:0;background:var(--bone);
  left:calc(-1 * min(24px, 3.5vw));right:calc(-1 * min(24px, 3.5vw));
  opacity:0;transition:opacity .45s var(--e);z-index:0;border-radius:2px;
}
.pillar:hover::before{opacity:1}
.pillar>*{position:relative;z-index:1}
.pillar-n{
  font-size:13px;font-weight:700;color:var(--gold-text);
  letter-spacing:.06em;padding-top:5px;font-variant-numeric:tabular-nums;font-family:var(--sans);
}
.pillar h3{font-size:20px;margin:0 0 8px;letter-spacing:-.012em}
.pillar p{margin:0;font-size:15.5px;line-height:1.66}
.sec-bone .pillar::before{background:var(--paper)}

/* service area chips */
.areas{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;padding:0;list-style:none}
.areas li{
  font-size:13.5px;padding:9px 16px;border-radius:100px;background:var(--paper);
  border:1px solid var(--line);color:var(--ink-2);
}
.sec-bone .areas li{background:var(--paper)}
.sec-dark .areas li{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.78)}

/* process strip, carried from the homepage steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;border-top:1px solid rgba(255,255,255,.18)}
.step{padding:32px 26px 34px 26px;border-right:1px solid rgba(255,255,255,.14);position:relative}
.step:first-child{padding-left:0}
.step:last-child{border-right:0}
.step::before{
  content:'';position:absolute;top:-1px;left:0;height:1px;width:0;background:var(--gold);
  transition:width .9s var(--e);
}
.step.in::before{width:100%}
.step b{
  display:block;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--gold);
  margin-bottom:16px;font-variant-numeric:tabular-nums;
}
.step h3{color:var(--white);font-size:20px;margin-bottom:10px}
.step p{color:rgba(255,255,255,.62);font-size:14.5px;line-height:1.66;margin:0}
@media(max-width:900px){
  .steps{grid-template-columns:1fr 1fr}
  .step{border-bottom:1px solid rgba(255,255,255,.14);padding-right:22px;padding-left:22px}
  .step:nth-child(2n){border-right:0}
  .step:nth-child(2n+1){padding-left:0}
}
@media(max-width:560px){.steps{grid-template-columns:1fr}.step{border-right:0;padding-left:0;padding-right:0}}

/* related work strip */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.strip{grid-template-columns:repeat(2,1fr)}}
.strip a,.strip figure{margin:0;display:block;overflow:hidden;border-radius:2px;background:var(--bone-2);aspect-ratio:4/3}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e)}
.strip a:hover img{transform:scale(1.06)}

/* FAQ — the accordion is a details/summary pair so it works without JS */
.faq{margin-top:8px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-family:var(--serif);font-size:clamp(17px,1.8vw,21px);font-weight:700;
  letter-spacing:-.006em;line-height:1.35;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';position:absolute;right:6px;top:32px;width:11px;height:11px;
  border-right:1.7px solid var(--gold-text);border-bottom:1.7px solid var(--gold-text);
  transform:rotate(45deg);transition:transform .4s var(--e);
}
.faq details[open] summary::after{transform:rotate(-135deg);top:36px}
.faq summary:hover{color:var(--gold-text)}
.faq summary:focus-visible{outline:2px solid var(--gold-text);outline-offset:3px}
.faq-a{padding:0 clamp(0px,4vw,60px) 26px 0}
.faq-a p{margin:0 0 .9em;font-size:16px;line-height:1.72}
.faq-a p:last-child{margin-bottom:0}

/* closing CTA band */
.cta{background:var(--black);color:var(--bone);padding:clamp(72px,10vh,116px) 0;position:relative;overflow:hidden}
.cta::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 55% at 76% 14%,rgba(201,162,39,.13),transparent 62%);
}
.cta .wrap{position:relative;z-index:1;text-align:center}
.cta h2{color:var(--white);max-width:20ch;margin:18px auto 0}
.cta .lead{color:rgba(255,255,255,.72);margin:22px auto 0}
.cta .eyebrow{color:var(--gold)}
.cta .eyebrow::before{background:var(--gold)}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:36px}

/* ============================================================
   GALLERY PAGE
   ============================================================ */
.gal-sec{padding:clamp(56px,8vh,92px) 0}
.gal-group+.gal-group{margin-top:clamp(56px,8vh,92px);padding-top:clamp(48px,7vh,80px);border-top:1px solid var(--line)}
.gal-group-head{margin-bottom:30px}
.gal-group-head h2{font-size:clamp(28px,3.4vw,42px);margin-top:14px}
.gal-group-head p{margin:14px 0 0;max-width:60ch;font-size:16px}
.gal-grid{columns:4;column-gap:16px}
@media(max-width:1200px){.gal-grid{columns:3}}
@media(max-width:820px){.gal-grid{columns:2}}
@media(max-width:520px){.gal-grid{columns:1}}
.gal-item{
  break-inside:avoid;margin:0 0 16px;position:relative;overflow:hidden;border-radius:2px;
  background:var(--bone-2);cursor:pointer;display:block;width:100%;border:0;padding:0;text-align:left;
  transition:box-shadow .55s var(--e);
}
.gal-item img{width:100%;height:auto;transition:transform 1.1s var(--e),filter .7s var(--e);filter:saturate(.94)}
.gal-item:hover img{transform:scale(1.05);filter:saturate(1.04)}
.gal-item:hover{box-shadow:var(--shadow-lg)}
.gal-item:focus-visible{outline:2px solid var(--gold-text);outline-offset:3px}
.gal-count{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);font-family:var(--sans)}

/* lightbox, carried from the homepage */
.lb{
  position:fixed;inset:0;z-index:9500;background:rgba(8,8,8,.96);
  display:grid;place-items:center;padding:5vh 5vw;
  opacity:0;visibility:hidden;transition:opacity .5s var(--e),visibility .5s;
  backdrop-filter:blur(8px);
}
.lb.open{opacity:1;visibility:visible}
.lb img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:2px;box-shadow:0 40px 90px -20px rgba(0,0,0,.7);transform:scale(.94);transition:transform .55s var(--e)}
.lb.open img{transform:scale(1)}
.lb-cap{color:rgba(255,255,255,.7);font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-top:20px;text-align:center}
.lb-close{
  position:absolute;top:24px;right:28px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:transparent;color:var(--white);cursor:pointer;font-size:20px;line-height:1;
  transition:background .3s,transform .35s var(--e-spring);
}
.lb-close:hover{background:rgba(255,255,255,.14);transform:rotate(90deg)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:transparent;color:var(--white);cursor:pointer;font-size:18px;
  transition:background .3s,border-color .3s}
.lb-nav:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6)}
.lb-prev{left:max(2vw,14px)}.lb-next{right:max(2vw,14px)}

/* ============================================================
   BLOG
   ============================================================ */
.posts{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,40px)}
@media(max-width:820px){.posts{grid-template-columns:1fr}}
.post-card{
  display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:3px;overflow:hidden;position:relative;
  transition:transform .5s var(--e),box-shadow .5s var(--e),border-color .5s;
}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.post-media{aspect-ratio:16/10;overflow:hidden;background:var(--bone-2)}
.post-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e)}
.post-card:hover .post-media img{transform:scale(1.05)}
.post-body{padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;flex:1}
.post-meta{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);font-weight:600;margin-bottom:14px}
.post-card h2{font-size:clamp(22px,2.2vw,28px);line-height:1.24;font-weight:700;letter-spacing:-.006em;margin-bottom:12px}
.post-card p{font-size:15.5px;line-height:1.68;margin:0 0 22px;flex:1}
.post-more{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--gold-text);margin-top:auto}
.post-more svg{transition:transform .4s var(--e)}
.post-card:hover .post-more svg{transform:translateX(5px)}
.post-card a.post-cover{position:absolute;inset:0;z-index:3}
.post-card a.post-cover:focus-visible{outline:2px solid var(--gold-text);outline-offset:3px}

/* article body */
.article{padding:clamp(48px,7vh,84px) 0 clamp(64px,9vh,104px)}
.article-head{width:min(760px,92vw);margin:0 auto clamp(34px,5vh,52px)}
.article-head h1{
  font-size:clamp(32px,4.6vw,58px);line-height:1.08;margin:18px 0 0;letter-spacing:-.018em;
}
.article-date{margin-top:20px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);font-weight:600;font-family:var(--sans)}
/* The lead photo sits in the text column, not wider than it, and keeps its
   own aspect ratio rather than being cropped to 16/10. Same treatment as an
   in-body .prose figure, so the two read as one column down the page. */
.article-fig{width:min(720px,92vw);margin:0 auto clamp(36px,5vh,56px)}
.article-fig .rv-img{border-radius:2px;box-shadow:var(--shadow-md);background:var(--bone-2)}
.article-fig img{width:100%;height:auto}
.article-fig figcaption{margin-top:14px;font-size:13px;color:var(--gray);text-align:center}
.prose{width:min(720px,92vw);margin:0 auto}
.prose p{font-size:17.5px;line-height:1.78;margin:0 0 1.35em;color:var(--ink-2)}
.prose p.lead-para{font-size:clamp(19px,2vw,22px);line-height:1.62;color:var(--ink)}
.prose h2{font-size:clamp(26px,3vw,36px);margin:1.6em 0 .55em}
.prose figure{margin:2.2em 0}
.prose figure img{border-radius:2px;box-shadow:var(--shadow-md)}
.prose figcaption{margin-top:13px;font-size:13px;color:var(--gray);text-align:center}
.article-end{
  width:min(720px,92vw);margin:clamp(40px,6vh,64px) auto 0;padding-top:30px;
  border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:16px;
  align-items:center;justify-content:space-between;
}
.back-link{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--gold-text)}
.back-link svg{transition:transform .4s var(--e)}
.back-link:hover svg{transform:translateX(-4px)}

/* ---------- FOOTER (carried from the homepage) ---------- */
footer{background:var(--black);color:rgba(255,255,255,.62);padding:clamp(64px,9vh,96px) 0 34px;overflow:hidden}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.14)}
@media(max-width:820px){.foot-top{grid-template-columns:1fr;gap:36px}}
.foot-brand img{height:52px;width:auto;object-fit:contain;margin-bottom:18px}
.foot-brand p{color:rgba(255,255,255,.55);font-size:14.5px;max-width:36ch;margin:0}
footer h4{color:var(--white);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-family:var(--sans);font-weight:600;margin-bottom:18px}
.foot-links{display:flex;flex-direction:column;gap:11px}
.foot-links a{font-size:14.5px;color:rgba(255,255,255,.62);transition:color .3s,transform .35s var(--e);display:inline-block}
.foot-links a:hover{color:var(--gold);transform:translateX(4px)}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;font-size:12.5px;color:rgba(255,255,255,.4)}
.socials{display:flex;gap:11px}
.socials a{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  display:grid;place-items:center;color:rgba(255,255,255,.7);
  transition:background .35s,color .35s,border-color .35s,transform .4s var(--e-spring);
}
.socials a:hover{background:var(--gold);color:var(--black);border-color:var(--gold);transform:translateY(-3px)}

/* floating call button (mobile) */
.fab{
  position:fixed;right:18px;bottom:18px;z-index:6000;display:none;align-items:center;gap:10px;
  background:var(--gold);color:var(--black);padding:15px 22px;border-radius:100px;font-size:14px;font-weight:600;
  box-shadow:0 14px 34px -10px rgba(8,8,8,.6);
}
@media(max-width:920px){.fab{display:inline-flex}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}.rv-img{clip-path:none}.rv-img img{transform:none}
  .line-mask>span{transform:none}
  html{scroll-behavior:auto}
}