:root{
  --ink:#0F0D0B; --ink-soft:#1A1714;
  --bone:#ECE7DE; --bone-soft:#E2DCD1;
  --stone:#8E8A80; --teal:#547887; --gilt:#547887;
  --serif:'Marcellus', serif; --sans:'Jost', sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--ink);color:var(--bone);font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--teal);color:var(--bone)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05}

/* Nav (mirrored from index) */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;display:flex;justify-content:space-between;align-items:center;padding:22px clamp(20px,4vw,56px);mix-blend-mode:difference}
.nav .brand{display:inline-flex;align-items:center;transition:opacity .3s}
.nav .brand:hover{opacity:.75}
.nav .brand-logo{height:clamp(100px,5.5vw,72px);width:auto;display:block;transition:height .5s}
.nav.scrolled .brand-logo{height:clamp(38px,4vw,56px)}
.nav .back{font-size:11px;letter-spacing:3px;color:var(--bone);border:1px solid rgba(236,231,222,.4);padding:12px 24px;border-radius:40px;transition:background .3s,color .3s}
.nav .back:hover{background:var(--bone);color:var(--ink)}

/* Service hero */
.svc-hero{position:relative;height:100vh;height:100svh;overflow:hidden}
.svc-hero-media{position:absolute;inset:-6%;background-size:cover;background-position:center;will-change:transform}
.svc-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,13,11,.3) 0%,rgba(15,13,11,.05) 45%,rgba(15,13,11,.78) 100%);z-index:1}

/* Entrance cover — visible immediately on load, hides the white flash between pages.
   Sits BELOW the hero text (z-index 2) and nav so the headline reveals over the same
   fullscreen image the transition ended on, then the cover melts into the live hero. */
.svc-entrance{position:fixed;inset:0;z-index:1;background-size:cover;background-position:center;pointer-events:none}
.svc-entrance::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,13,11,.3) 0%,rgba(15,13,11,.05) 45%,rgba(15,13,11,.78) 100%)}

/* Masked hero line reveal — hidden from first paint, revealed by service.js */
.svc-hero h1 .reveal-line{display:block;overflow:hidden;padding-top:.15em;margin-top:-.15em;padding-bottom:.15em;margin-bottom:-.15em}
.svc-hero h1 .reveal-line > span{display:inline-block;will-change:transform}
.svc-hero h1,.svc-hero .eyebrow,.svc-hero .lede,.svc-hero-scroll{opacity:0}
.svc-hero-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:0 clamp(20px,4vw,56px) 10vh;color:var(--bone)}
.svc-hero .eyebrow{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:4px;color:var(--gilt);margin-bottom:22px;text-transform:uppercase}
.svc-hero .eyebrow::before{content:'';width:44px;height:1px;background:var(--gilt)}
.svc-hero h1{font-size:clamp(3rem,9vw,8rem);letter-spacing:.5px;max-width:14ch}
.svc-hero h1 em{font-style:italic;color:var(--bone);opacity:.7}
.svc-hero .lede{max-width:52ch;margin-top:28px;color:rgba(236,231,222,.86);font-size:16px}
.svc-hero-scroll{position:absolute;right:clamp(20px,4vw,56px);bottom:10vh;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;font-size:10px;letter-spacing:3px;color:var(--bone)}
.svc-hero-scroll .scroll-line{width:1px;height:64px;background:rgba(236,231,222,.4);position:relative;overflow:hidden}
.svc-hero-scroll .scroll-line::after{content:'';position:absolute;top:-40%;left:0;width:100%;height:40%;background:var(--bone);animation:scrollDrop 2.2s cubic-bezier(.77,0,.18,1) infinite}
@keyframes scrollDrop{0%{top:-40%}100%{top:110%}}

/* Intro */
.svc-intro{padding:clamp(80px,10vw,140px) clamp(20px,4vw,56px);background:var(--bone);color:var(--ink)}
.svc-intro-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(40px,6vw,100px);align-items:start}
.svc-intro h2{font-family:var(--serif);font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.15;max-width:16ch}
.svc-intro h2 em{color:var(--teal);font-style:italic}
.svc-intro p{color:#4b473f;font-size:16px;max-width:56ch}
.svc-intro p + p{margin-top:22px}
.svc-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:1px;background:rgba(15,13,11,.15);margin-top:8vh;border:1px solid rgba(15,13,11,.15)}
.svc-meta .stat{background:var(--bone);padding:clamp(20px,2.5vw,36px)}
.svc-meta .num{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.6rem);color:var(--ink)}
.svc-meta .num i{color:var(--gilt);font-style:normal}
.svc-meta .label{font-size:10.5px;letter-spacing:3px;color:var(--stone);margin-top:8px;text-transform:uppercase}

/* Gallery — masonry-esque grid with varied sizes */
.gallery{padding:clamp(60px,8vw,120px) clamp(20px,4vw,56px) clamp(80px,10vw,140px);background:#547887}
.gallery-head{display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:20px;margin-bottom:clamp(40px,5vw,70px)}
.gallery-head .eyebrow{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:4px;color:var(--gilt);text-transform:uppercase}
.gallery-head .eyebrow::before{content:'';width:44px;height:1px;background:var(--gilt)}
.gallery-head h2{font-size:clamp(2rem,5vw,4rem);color:var(--bone);margin-top:16px;max-width:22ch}
.gallery-head .count{font-size:11px;letter-spacing:3px;color:var(--stone)}

/* CSS-only asymmetric grid */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.4vw,22px)}
.g-item{position:relative;overflow:hidden;background:var(--ink-soft);cursor:pointer}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.22,1,.36,1);will-change:transform}
.g-item:hover img{transform:scale(1.06)}
.g-item::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(15,13,11,.65) 100%);opacity:0;transition:opacity .4s}
.g-item:hover::after{opacity:1}
.g-caption{position:absolute;left:0;right:0;bottom:0;padding:20px 24px;color:var(--bone);z-index:2;transform:translateY(15px);opacity:0;transition:transform .5s,opacity .5s}
.g-item:hover .g-caption{transform:translateY(0);opacity:1}
.g-caption .cap-name{font-family:var(--serif);font-size:1.25rem;margin-bottom:4px}
.g-caption .cap-tag{font-size:10.5px;letter-spacing:2.5px;color:rgba(236,231,222,.7);text-transform:uppercase}
.g-num{position:absolute;top:16px;left:20px;z-index:2;font-size:10.5px;letter-spacing:2.5px;color:var(--bone);opacity:.85;background:rgba(15,13,11,.4);padding:6px 12px;border-radius:20px;backdrop-filter:blur(6px)}
.g-item.placeholder{background:linear-gradient(135deg,#D9D3C4 0%,#BFB8A6 100%)}
.g-item.placeholder .ph-note{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10px;letter-spacing:3px;color:rgba(15,13,11,.4);text-transform:uppercase;text-align:center;z-index:1}
.g-item.placeholder .g-caption{opacity:1;transform:none;color:var(--ink)}
.g-item.placeholder .g-caption .cap-tag{color:rgba(15,13,11,.55)}
.g-item.placeholder::after{background:linear-gradient(180deg,transparent 55%,rgba(15,13,11,.35) 100%)}

/* Size variants */
.g-item.wide{grid-column:span 8;aspect-ratio:16/10}
.g-item.tall{grid-column:span 4;aspect-ratio:3/4;grid-row:span 2}
.g-item.med{grid-column:span 6;aspect-ratio:4/3}
.g-item.sml{grid-column:span 4;aspect-ratio:1/1}
.g-item.full{grid-column:span 12;aspect-ratio:21/9}
.g-item.half{grid-column:span 6;aspect-ratio:5/4}

/* Related services strip */
.related{padding:clamp(60px,8vw,120px) clamp(20px,4vw,56px);background:var(--bone);color:var(--ink);border-top:1px solid rgba(15,13,11,.1)}
.related .eyebrow{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:4px;color:var(--gilt);margin-bottom:26px;text-transform:uppercase}
.related .eyebrow::before{content:'';width:44px;height:1px;background:var(--gilt)}
.related h2{font-size:clamp(2rem,4.5vw,3.6rem);margin-bottom:6vh;max-width:16ch}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.rel-card{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink)}
.rel-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,1,.36,1);opacity:.85}
.rel-card:hover img{transform:scale(1.05);opacity:1}
.rel-card .rel-label{position:absolute;inset:0;padding:26px;display:flex;flex-direction:column;justify-content:space-between;z-index:2;color:var(--bone)}
.rel-card .rel-label::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,13,11,.15) 0%,rgba(15,13,11,.7) 100%);z-index:-1}
.rel-card .r-num{font-size:11px;letter-spacing:3px;color:var(--gilt)}
.rel-card .r-name{font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.7rem)}
.rel-card .r-arrow{font-size:14px;letter-spacing:2px;display:flex;align-items:center;gap:10px}

/* CTA */
.svc-cta{background:var(--bone);color:var(--ink);padding:clamp(80px,10vw,140px) clamp(20px,4vw,56px);text-align:center}
.svc-cta h2{font-size:clamp(2.2rem,6vw,5rem);max-width:18ch;margin:0 auto 28px;color:var(--ink)}
.svc-cta h2 em{color:#547887;font-style:italic}
.svc-cta p{max-width:44ch;margin:0 auto;color:#4b473f}
.svc-cta .btns{display:flex;justify-content:center;gap:16px;margin-top:44px;flex-wrap:wrap}
.svc-cta .btn{padding:18px 42px;border-radius:60px;font-size:12px;letter-spacing:3px;text-transform:uppercase;transition:background .35s,color .35s}
.svc-cta .btn-dark{background:#547887;color:#fff}
.svc-cta .btn-dark:hover{background:#25D366;color:#fff}
.svc-cta .btn-ghost{border:1px solid rgba(15,13,11,.3);color:var(--ink)}
.svc-cta .btn-ghost:hover{background:var(--ink);color:var(--bone)}

/* Footer */
footer{background:#547887;padding:60px clamp(20px,4vw,56px) 30px;border-top:1px solid rgba(236,231,222,.1)}
.foot-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;font-size:11.5px;letter-spacing:1.5px;color:var(--bone)}

/* Reveals */
.reveal{overflow:hidden}
.reveal span{display:inline-block;transform:translateY(115%)}

@media(max-width:900px){
  .svc-intro-grid{grid-template-columns:1fr}
  .svc-meta{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(6,1fr);gap:12px}
  .g-item.wide,.g-item.full,.g-item.med,.g-item.half{grid-column:span 6;aspect-ratio:4/3}
  .g-item.tall{grid-column:span 6;aspect-ratio:3/4;grid-row:span 1}
  .g-item.sml{grid-column:span 3;aspect-ratio:1/1}
  .related-grid{grid-template-columns:1fr}
  .g-caption{transform:none;opacity:1}
  .g-item::after{opacity:.75}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal span,.svc-hero h1 .reveal-line > span{transform:none!important}
  .svc-hero h1,.svc-hero .eyebrow,.svc-hero .lede,.svc-hero-scroll{opacity:1!important}
  .svc-entrance{display:none}
}