/* York Heritage Roofing — v4 craft system.
   Fonts: Fraunces (display) + Inter (text), SIL OFL 1.1. Palette: paper / charcoal / brass.
   Spacing on an 8px grid. No italic/script accents in headings. */
@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
:root{
  --paper:#f4efe6;--paper-2:#fbf8f3;--stone:#e9e1d3;--ink:#16191b;--charcoal:#1b2023;--night:#121517;
  --brass:#a98a52;--brass-light:#cfb17a;--brass-dark:#6b5020;
  --text:#2a2e31;--muted:#6b6560;--light:#f6f1e8;--light-muted:#b9b1a3;
  --rule:rgba(22,25,27,.12);--rule-light:rgba(246,241,232,.14);
  --serif:"Fraunces","Fraunces Fallback",Georgia,"Times New Roman",serif;
  --sans:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --gutter:clamp(20px,4vw,48px);--wrap:1360px;--u:8px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --course:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='12' viewBox='0 0 28 12' fill='none'><path d='M0 8c3.5-6 7-6 10.5 0S17.5 14 21 8 28 2 28 2' stroke='%23a98a52' stroke-width='1.2' opacity='.55'/></svg>");
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--sans);font-size:1.0625rem;line-height:1.72;color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--brass-dark);text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(107,80,32,.45);transition:color .25s var(--ease),text-decoration-color .25s var(--ease)}
a:hover{text-decoration-color:var(--brass-dark)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;color:var(--ink);margin:0 0 .5em;letter-spacing:-.015em;font-style:normal}
h2{font-size:clamp(1.8rem,3.2vw,2.5rem)}
h3{font-size:1.35rem;font-weight:500;letter-spacing:-.005em}
em{font-style:italic}
p,ul,ol{margin:0 0 1.15em}
.wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:auto}.skip:focus{left:var(--gutter);top:var(--gutter);z-index:100;background:var(--ink);color:var(--light);padding:12px 16px}
.narrow{max-width:40em}
.small{font-size:.86rem}.muted{color:var(--muted)}
.hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.course{height:12px;background:var(--course) repeat-x 0 50%/28px 12px;margin:calc(var(--u)*4) 0}

/* Type scale */
.display-1{font-size:clamp(2.7rem,6.6vw,6.2rem);line-height:.98;letter-spacing:-.028em;margin:0}
.display-2{font-size:clamp(2.2rem,5vw,4.6rem);line-height:1.02;letter-spacing:-.026em}
.display-3{font-size:clamp(2rem,3.8vw,3.4rem);line-height:1.04;letter-spacing:-.022em}
.h-sm{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.h-xs{font-size:1.2rem;margin:0 0 .3em;font-weight:500}
.lead-serif{font-family:var(--serif);font-size:clamp(1.2rem,1.8vw,1.45rem);line-height:1.5;color:var(--ink)}
.eyebrow{font-family:var(--sans);font-size:.6875rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-dark);margin:0 0 calc(var(--u)*2);line-height:1.5}
.eyebrow-light{color:var(--brass-light)}

/* Buttons & links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;font:600 .74rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;border-radius:0;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.btn-solid{background:var(--ink);color:var(--light);border-color:var(--ink)}
.btn-solid:hover{background:transparent;color:var(--ink)}
.btn-brass{background:var(--brass-light);color:var(--ink);border-color:var(--brass-light)}
.btn-brass:hover{background:transparent;color:var(--brass-light)}
.btn-ghost{background:transparent;color:var(--light);border-color:rgba(246,241,232,.45)}
.btn-ghost:hover{background:var(--light);color:var(--ink);border-color:var(--light)}
.btn-block{width:100%}
.link-line{font:600 .74rem/1.6 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-position:0 100%;background-repeat:no-repeat;background-size:100% 1px;padding-bottom:2px;transition:background-size .35s var(--ease),color .25s}
.link-line:hover{background-size:40% 1px}
.link-line::after{content:"→";display:inline-block;margin-left:10px;transition:transform .3s var(--ease)}
.link-line:hover::after{transform:translateX(4px)}
.link-line-light{color:var(--light);background-image:linear-gradient(currentColor,currentColor)}

/* Header */
.site-header{position:sticky;top:0;z-index:40;transition:background .35s var(--ease),box-shadow .35s,color .35s}
.site-header.is-scrolled{background:rgba(244,239,230,.92);box-shadow:0 1px 0 var(--rule)}
@supports (backdrop-filter:blur(8px)){.site-header.is-scrolled{background:rgba(244,239,230,.82);backdrop-filter:saturate(1.2) blur(12px)}}
.header-inner{display:flex;align-items:center;gap:24px;height:84px;transition:height .35s var(--ease)}
.is-scrolled .header-inner{height:68px}
.brand{display:flex;align-items:center;gap:14px;color:var(--ink);text-decoration:none;position:relative;z-index:2;margin-right:auto}
.mark{width:36px;height:30px;flex:none;--mark-accent:var(--brass-dark)}
.wordmark{display:flex;flex-direction:column;line-height:1}
.wm-a{font-family:var(--serif);font-weight:500;font-size:.98rem;letter-spacing:.17em;text-transform:uppercase}
.wm-b{display:flex;align-items:center;gap:8px;margin-top:6px;font:500 .6rem/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;color:var(--muted)}
.wm-b i{display:block;width:16px;height:1px;background:var(--brass)}
.nav-toggle{position:relative;z-index:2;display:flex;align-items:center;gap:12px;background:none;border:0;padding:12px 0 12px 12px;min-height:48px;font:600 .72rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:inherit;cursor:pointer}
.nav-toggle-bars{display:grid;gap:6px;width:26px}
.nav-toggle-bars i{display:block;height:1px;background:currentColor;transition:transform .35s var(--ease)}
.nav-open .nav-toggle-bars i:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav-open .nav-toggle-bars i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.header-cta{display:none}
.site-nav{position:fixed;inset:0;z-index:1;background:var(--charcoal);color:var(--light);display:flex;flex-direction:column;padding:110px var(--gutter) 40px;overflow-y:auto;visibility:hidden;opacity:0;transition:opacity .4s var(--ease),visibility 0s .4s}
.nav-open .site-nav{visibility:visible;opacity:1;transition:opacity .4s var(--ease)}
.nav-open{background:transparent!important;box-shadow:none!important;backdrop-filter:none!important}
.nav-open .brand,.nav-open .nav-toggle{color:var(--light)}
.nav-open .mark{--mark-accent:var(--brass-light);color:var(--light)}
.nav-list{list-style:none;padding:0;margin:0}
.nav-list a{display:flex;align-items:baseline;gap:18px;padding:12px 0;border-bottom:1px solid var(--rule-light);color:var(--light);text-decoration:none;font-family:var(--serif);font-size:clamp(1.7rem,6.4vw,2.6rem);line-height:1.15;letter-spacing:-.015em}
.nav-list a:hover,.nav-list a[aria-current]{color:var(--brass-light)}
.nav-n{display:none}
.nav-extra{margin-top:auto;padding-top:40px;display:flex;flex-direction:column;gap:6px}
.nav-extra a{color:var(--light);font-family:var(--serif);font-size:1.3rem;text-decoration:none}
.nav-extra p:last-child{margin:8px 0 0;color:var(--light-muted);font-size:.85rem}
@media (min-width:1100px){
  .nav-toggle{display:none}
  .site-nav{position:static;inset:auto;background:transparent;color:inherit;flex-direction:row;align-items:center;padding:0;overflow:visible;visibility:visible;opacity:1;width:auto}
  .nav-list{display:flex;gap:2px}
  .nav-list li{margin:0}
  .nav-list a{font:500 .78rem/1 var(--sans);letter-spacing:.04em;color:inherit;border:0;padding:12px 10px;position:relative;opacity:.78}
  .nav-list a::after{content:"";position:absolute;left:10px;right:10px;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
  .nav-list a:hover,.nav-list a[aria-current]{color:inherit;opacity:1}
  .nav-list a:hover::after,.nav-list a[aria-current]::after{transform:scaleX(1)}
  .nav-only-overlay,.nav-extra{display:none}
  .header-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;margin-left:12px;border:1px solid currentColor;color:inherit;text-decoration:none;font:600 .7rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;transition:background .3s,color .3s}
  .header-cta:hover{background:var(--ink);color:var(--light);border-color:var(--ink)}
}
/* Home hero: light header on a dark scrim until scrolled (keeps contrast for sticky bar) */
.page-home .site-header:not(.is-scrolled):not(.nav-open){color:var(--light);background:linear-gradient(180deg,rgba(18,21,23,.72) 0%,rgba(18,21,23,.35) 70%,rgba(18,21,23,0) 100%)}
.page-home .site-header:not(.is-scrolled):not(.nav-open) .brand{color:var(--light)}
.page-home .site-header:not(.is-scrolled):not(.nav-open) .mark{--mark-accent:var(--brass-light);color:var(--light)}
.page-home .site-header:not(.is-scrolled):not(.nav-open) .wm-b{color:#d9d2c6}
.page-home .site-header:not(.is-scrolled):not(.nav-open) .wm-b i{background:var(--brass-light)}
.page-home .site-header:not(.is-scrolled):not(.nav-open) .header-cta:hover{background:var(--light);color:var(--ink);border-color:var(--light)}

/* Plates / figures */
.frame{overflow:hidden;background:var(--stone)}
.frame img{width:100%;height:100%;object-fit:cover}
figcaption{font-size:.76rem;line-height:1.55;color:var(--muted);margin-top:14px}
.plate-no{font:600 .64rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--brass-dark);margin-right:10px}
.cap-place{font-family:var(--serif);font-style:normal;font-size:.92rem;color:var(--ink);margin-right:6px}
.cap-credit{display:inline}
.cap-credit a{color:inherit}

/* Sections */
.sec{padding:clamp(88px,12vw,168px) 0}
.sec-tight{padding:clamp(64px,8vw,112px) 0}
.sec-stone{background:var(--stone)}
.sec-dark{background:var(--charcoal);color:var(--light)}
.sec-dark h2,.sec-dark h3{color:#f6f1e8}
.sec-intro{max-width:34em;color:var(--muted)}

/* ——— HERO BLEED ——— */
.hero-bleed{position:relative;min-height:100svh;display:grid;align-items:end;color:var(--light);background:var(--night);overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-shade{position:absolute;inset:0;background:
  radial-gradient(ellipse 140% 120% at 5% 95%,rgba(18,21,23,.66) 0%,rgba(18,21,23,.34) 30%,rgba(18,21,23,.12) 52%,transparent 78%),
  radial-gradient(ellipse 110% 95% at 22% 58%,rgba(18,21,23,.4) 0%,rgba(18,21,23,.18) 38%,rgba(18,21,23,.05) 62%,transparent 80%),
  linear-gradient(180deg,rgba(18,21,23,.16) 0%,transparent 20%,transparent 70%,rgba(18,21,23,.4) 100%);
  pointer-events:none}
.hero-shade::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.1;mix-blend-mode:overlay}
.hero-content{position:relative;z-index:2;padding:calc(var(--u)*14) 0 calc(var(--u)*10);max-width:min(920px,100%)}
.hero-tag{font:600 .7rem/1.4 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:#faf6ee;margin:0 0 calc(var(--u)*3);text-shadow:0 0 1px rgba(0,0,0,.8),0 1px 3px rgba(0,0,0,.65),0 4px 22px rgba(0,0,0,.45)}
.h-display{display:block;font-family:var(--serif);font-style:normal;font-weight:400;font-size:clamp(3rem,8vw,7.4rem);line-height:.94;letter-spacing:-.032em;color:#fff;margin:0;text-shadow:0 1px 2px rgba(0,0,0,.45),0 4px 32px rgba(0,0,0,.35)}
.hero-kicker{margin-top:calc(var(--u)*3);font:500 .78rem/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#faf6ee;text-shadow:0 0 1px rgba(0,0,0,.75),0 1px 3px rgba(0,0,0,.55),0 3px 18px rgba(0,0,0,.4)}
.hero-lead{max-width:28em;font-size:1.08rem;line-height:1.65;margin:calc(var(--u)*3.5) 0 calc(var(--u)*4);color:#faf6ee;text-shadow:0 0 1px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.5),0 3px 16px rgba(0,0,0,.35)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.hero-credit{position:absolute;right:var(--gutter);bottom:calc(var(--u)*3);z-index:2;font:500 .68rem/1.4 var(--sans);letter-spacing:.04em;color:rgba(246,241,232,.62);max-width:22em;text-align:right;margin:0}
.hero-credit a{color:inherit}
/* page-load reveal */
.js .hero-content > *{opacity:0;transform:translateY(18px)}
.js .is-ready .hero-content > *{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .is-ready .hero-content > *:nth-child(1){transition-delay:.08s}
.js .is-ready .hero-content > *:nth-child(2){transition-delay:.2s}
.js .is-ready .hero-content > *:nth-child(3){transition-delay:.32s}
.js .is-ready .hero-content > *:nth-child(4){transition-delay:.42s}
.js .is-ready .hero-content > *:nth-child(5){transition-delay:.52s}
.js .hero-media img{transform:scale(1.06);transition:transform 1.4s var(--ease)}
.js .is-ready .hero-media img{transform:scale(1)}
@media (prefers-reduced-motion:reduce){
  .js .hero-content > *,.js .is-ready .hero-content > *{opacity:1;transform:none;transition:none}
  .js .hero-media img,.js .is-ready .hero-media img{transform:none;transition:none}
}
@media (max-width:699px){
  .hero-content{padding-bottom:calc(var(--u)*14);max-width:none}
  .hero-credit{left:var(--gutter);right:var(--gutter);text-align:left;bottom:calc(var(--u)*2)}
}

/* Manifesto */
.manifesto{padding-top:clamp(96px,14vw,180px)}
.manifesto .display-2{max-width:16em;margin-bottom:calc(var(--u)*6)}
.m-cols{display:grid;gap:calc(var(--u)*3);max-width:52em}
@media (min-width:800px){.m-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:calc(var(--u)*5)}}

/* Services index (hover photo reveal) */
.services-index{padding:0;border-top:1px solid var(--rule)}
.svc-grid{display:grid;gap:0}
.svc-head{padding:clamp(64px,8vw,112px) 0 calc(var(--u)*4)}
.svc-head h2{margin:0}
.svc-body{display:grid;gap:calc(var(--u)*4);padding-bottom:clamp(72px,10vw,140px)}
.svc-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.svc-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:16px;padding:calc(var(--u)*2.75) 0;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none;font-family:var(--serif);font-size:clamp(1.7rem,3.6vw,3.2rem);line-height:1.12;letter-spacing:-.02em;transition:color .3s var(--ease),padding .3s var(--ease)}
.svc-list a:hover,.svc-list a:focus-visible,.svc-list a[aria-current="true"]{color:var(--brass-dark);padding-left:12px}
.svc-list .svc-d{font:500 .72rem/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);align-self:center}
.svc-stage{position:relative;aspect-ratio:4/5;background:var(--stone);overflow:hidden}
.svc-stage figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
/* relative active figure keeps the panel sized even if sticky/absolute is flattened (e.g. screenshots) */
.svc-stage figure.is-active,.svc-stage figure:first-child{opacity:1;position:relative;inset:auto;width:100%;height:100%;z-index:1}
.svc-stage.is-switched figure:first-child:not(.is-active){opacity:0;position:absolute;inset:0;z-index:0}
.svc-stage .frame{height:100%;aspect-ratio:4/5}
.svc-stage .frame img{width:100%;height:100%;object-fit:cover}
.svc-stage figcaption{position:absolute;left:16px;right:16px;bottom:14px;margin:0;color:var(--light);text-shadow:0 1px 8px rgba(0,0,0,.45);font-size:.72rem}
.svc-stage .cap-place{color:var(--light)}
.svc-stage .plate-no{color:var(--brass-light)}
@media (min-width:960px){
  .svc-body{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:stretch;column-gap:calc(var(--u)*6)}
  .svc-stage{position:sticky;top:100px;aspect-ratio:4/5;max-height:calc(100vh - 140px)}
}

/* Full-bleed band */
.bleed-band{position:relative;min-height:min(88vh,920px);display:grid;align-items:end;color:var(--light);overflow:hidden;background:var(--night)}
.bleed-band .bleed-media{position:absolute;inset:0}
.bleed-band .bleed-media img{width:100%;height:100%;object-fit:cover}
.bleed-band .bleed-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,21,23,.78) 0%,rgba(18,21,23,.25) 55%,rgba(18,21,23,.4) 100%);pointer-events:none}
.bleed-band .bleed-shade::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.14;mix-blend-mode:overlay}
.bleed-copy{position:relative;z-index:2;padding:clamp(64px,10vw,140px) 0;max-width:min(16em,100%)}
.bleed-copy p{font-family:var(--serif);font-size:clamp(2rem,4.4vw,3.8rem);line-height:1.08;letter-spacing:-.022em;color:var(--light);margin:0 0 calc(var(--u)*4)}
.bleed-credit{position:absolute;right:var(--gutter);bottom:calc(var(--u)*3);z-index:2;font:500 .68rem/1.4 var(--sans);color:rgba(246,241,232,.62);margin:0;max-width:20em;text-align:right}
.bleed-credit a{color:inherit}

/* Materials — photographic textures */
.materials .mat-grid{display:grid;gap:calc(var(--u)*3);margin-top:calc(var(--u)*6)}
.mat-card{display:block;color:inherit;text-decoration:none}
.mat-card .frame{aspect-ratio:1;margin-bottom:calc(var(--u)*2)}
.mat-card .frame img{transition:transform .7s var(--ease)}
.mat-card:hover .frame img{transform:scale(1.04)}
.mat-card h3{font-family:var(--serif);font-size:clamp(1.35rem,2vw,1.7rem);margin:0 0 6px;letter-spacing:-.015em}
.mat-card p{margin:0;font-size:.92rem;color:var(--muted)}
.mat-card .mat-link{display:inline-block;margin-top:12px;font:600 .68rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background-image:linear-gradient(currentColor,currentColor);background-position:0 100%;background-repeat:no-repeat;background-size:100% 1px;padding-bottom:3px}
@media (min-width:700px){.materials .mat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u)*4)}}
@media (min-width:1100px){
  .materials .mat-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u)*3)}
  .mat-card:nth-child(2){margin-top:calc(var(--u)*6)}
  .mat-card:nth-child(4){margin-top:calc(var(--u)*6)}
}

/* Principle */
.principle .pull{margin:0}
.pull{max-width:920px}
.pull::before{content:"";display:block;width:56px;height:1px;background:var(--brass);margin-bottom:28px}
.pull p{font-family:var(--serif);font-style:normal;font-weight:400;font-size:clamp(2rem,4.6vw,3.8rem);line-height:1.12;letter-spacing:-.022em;color:var(--ink);margin:0 0 20px}
.pull-label{font:600 .66rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.principle-grid{display:grid;gap:calc(var(--u)*6)}
@media (min-width:900px){
  .principle-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:end}
  .principle-side{padding-bottom:calc(var(--u)*2)}
}

/* Horizontal gallery */
.gallery-sec{padding:clamp(72px,10vw,128px) 0;overflow:hidden}
.gallery-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px;margin-bottom:calc(var(--u)*4)}
.gallery-hint{font:500 .72rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0}
.gallery{display:flex;gap:calc(var(--u)*2);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:0 var(--gutter) calc(var(--u)*2);scrollbar-width:thin;scrollbar-color:var(--brass) transparent}
.gallery:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
.gallery figure{flex:0 0 min(78vw,520px);scroll-snap-align:start;margin:0}
.gallery .frame{aspect-ratio:4/3}
.gallery figcaption{margin-top:12px;max-width:36em}
@media (min-width:900px){.gallery figure{flex-basis:min(42vw,560px)}}

/* Process — three calm steps */
.process{list-style:none;padding:0;margin:calc(var(--u)*6) 0 0;display:grid;gap:0;border-top:1px solid var(--rule)}
.process li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:calc(var(--u)*3);padding:calc(var(--u)*4) 0;border-bottom:1px solid var(--rule)}
.process-n{font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.6rem);line-height:1;color:var(--ink);letter-spacing:-.03em}
.process h3{margin:0 0 8px}
.process p{margin:0;max-width:36em;color:var(--muted)}
@media (min-width:900px){.process{grid-template-columns:repeat(3,minmax(0,1fr));border:0;gap:calc(var(--u)*4)}.process li{grid-template-columns:1fr;border:0;border-top:1px solid var(--rule);padding-top:calc(var(--u)*4)}}

/* Areas */
.a-grid{display:grid;gap:calc(var(--u)*5)}
.place-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:0;font-family:var(--serif);font-size:clamp(1.35rem,2.4vw,2rem);line-height:1.55;color:var(--ink)}
.place-list li{margin:0}
.place-list li::after{content:"·";color:var(--brass);margin:0 .4em}
.place-list li:last-child::after{content:none}
.place-list-sm{font-size:clamp(1.1rem,1.6vw,1.35rem)}
@media (min-width:900px){.a-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}

/* FAQ */
.faq-grid{display:grid;gap:calc(var(--u)*5)}
@media (min-width:900px){.faq-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{margin:0;font-size:1.15rem;font-weight:500;transition:color .25s}
.faq summary:hover h3{color:var(--brass-dark)}
.faq-icon{flex:none;width:22px;height:22px;position:relative}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;background:var(--ink);transition:transform .35s var(--ease)}
.faq-icon::before{left:0;right:0;top:50%;height:1px}
.faq-icon::after{top:0;bottom:0;left:50%;width:1px}
.faq details[open] .faq-icon::after,.faq details.is-closing .faq-icon::after{transform:scaleY(0)}
.faq-body{padding:0 0 24px;max-width:40em;color:var(--text)}
.faq details.is-closing .faq-body{overflow:hidden}

/* Closing CTA */
.closing{background:var(--charcoal);color:var(--light);padding:clamp(88px,12vw,160px) 0}
.closing h2{color:#f6f1e8;margin:0}
.closing-grid{display:grid;gap:calc(var(--u)*6)}
.closing-mark{width:72px;height:60px;margin-top:calc(var(--u)*4);color:var(--light);--mark-accent:var(--brass-light)}
.closing-side p{max-width:34em;color:var(--light-muted)}
.closing-phone{display:block;font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.4rem);color:var(--light);text-decoration:none;margin:calc(var(--u)*3) 0 0;line-height:1.15}
.closing-phone .eyebrow{display:block;margin-bottom:8px}
.closing-phone:hover{color:var(--brass-light)}
.closing-email{font-size:clamp(1.2rem,2vw,1.6rem)!important}
.closing .btn{margin-top:calc(var(--u)*4)}
@media (min-width:900px){.closing-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end}}

/* Feature heads (inner pages) */
.feature-head{padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,72px)}
.fh-grid{display:grid;gap:calc(var(--u)*3)}
.breadcrumbs ol{list-style:none;padding:0;margin:0 0 calc(var(--u)*2);display:flex;flex-wrap:wrap;gap:8px;font-size:.78rem;color:var(--muted)}
.breadcrumbs li:not(:last-child)::after{content:"/";margin-left:8px;opacity:.5}
.breadcrumbs a{color:inherit;text-decoration:none}
.breadcrumbs a:hover{color:var(--ink)}
.standfirst{font-size:1.12rem;max-width:34em;color:var(--text);margin:0}
.fh-meta{list-style:none;padding:0;margin:calc(var(--u)*3) 0 0;display:flex;flex-wrap:wrap;gap:8px 20px;font:500 .68rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.feature-plate{margin:calc(var(--u)*5) 0 0}
.feature-plate .frame{aspect-ratio:2/1}
.fh-concierge .display-1{max-width:12em}
@media (min-width:900px){
  .fh-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
  .fh-top{grid-column:1/-1}
  .fh-grid .display-1{grid-column:1/8;margin:0}
  .fh-side{grid-column:8/-1}
}

/* Article layout */
.sec-article{padding:clamp(48px,6vw,88px) 0 clamp(72px,9vw,120px)}
.article-grid{display:grid;gap:calc(var(--u)*5)}
.article-rail{order:2}
.toc{margin-bottom:calc(var(--u)*4)}
.toc ol{list-style:none;padding:0;margin:0;counter-reset:t}
.toc li{counter-increment:t;border-top:1px solid var(--rule)}
.toc a{display:block;padding:12px 0;color:var(--ink);text-decoration:none;font-size:.95rem}
.toc a::before{content:counter(t,decimal-leading-zero);font:500 .66rem/1.9 var(--sans);color:var(--brass-dark);margin-right:12px;letter-spacing:.08em}
.toc a:hover{color:var(--brass-dark)}
.enquiry-card{margin-top:40px;background:var(--charcoal);color:var(--light);padding:28px}
.enquiry-card .eyebrow{color:var(--brass-light)}
.enquiry-title{font-family:var(--serif);font-size:1.35rem;line-height:1.25;margin:0 0 20px;color:var(--light)}
.enquiry-card .btn-solid{background:var(--brass-light);border-color:var(--brass-light);color:var(--ink)}
.enquiry-card .btn-solid:hover{background:transparent;color:var(--brass-light)}
.enquiry-phone{display:block;margin-top:16px;text-align:center;font-family:var(--serif);font-size:1.2rem;color:var(--light);text-decoration:none}
.enquiry-card-plain{background:var(--stone);color:var(--ink)}
.enquiry-card-plain .eyebrow{color:var(--brass-dark)}
.prose{max-width:40em;order:1}
.prose>h2{margin-top:2.4em}
.prose>h2::before{content:"";display:block;width:36px;height:1px;background:var(--brass);margin-bottom:22px}
.prose>h2:first-child{margin-top:0}
.prose h3{margin-top:1.6em}
.prose li{margin-bottom:.4em}
.dropcap>p:first-of-type::first-letter{float:left;font-family:var(--serif);font-size:4.5em;line-height:.82;padding:.06em .12em 0 0;color:var(--ink)}
.checklist{list-style:none;padding:0;margin:0 0 1.4em}
.checklist li{position:relative;padding:12px 0 12px 30px;margin:0;border-top:1px solid var(--rule)}
.checklist li:last-child{border-bottom:1px solid var(--rule)}
.checklist li::before{content:"";position:absolute;left:0;top:1.45em;width:14px;height:1px;background:var(--brass-dark)}
.steps{list-style:none;padding:0;margin:0 0 1.4em;counter-reset:s}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;padding:18px 0;border-top:1px solid var(--rule);counter-increment:s}
.steps li::before{content:counter(s,decimal-leading-zero);grid-row:1/3;font-family:var(--serif);font-style:normal;font-size:1.6rem;line-height:1.1;color:var(--brass-dark)}
.note{border-left:2px solid var(--brass);padding:4px 0 4px 20px;font-size:.96rem;color:var(--muted)}
.prose .pull{margin:72px 0}
.prose .pull p{font-size:clamp(1.7rem,3vw,2.5rem)}
.plate{margin:calc(var(--u)*5) 0}
.plate .frame{aspect-ratio:4/3}
@media (min-width:1100px){
  .article-grid{grid-template-columns:minmax(0,280px) minmax(0,1fr);column-gap:calc(var(--u)*7);align-items:start}
  .article-rail{order:0;position:sticky;top:100px}
  .prose{order:0;max-width:38em}
  .prose .pull{margin-left:calc(-1 * min(6vw,90px))}
}

/* Related index */
.index-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.index-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;padding:22px 0;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none;align-items:baseline}
.index-list a:hover{color:var(--brass-dark)}
.idx-t{font-family:var(--serif);font-size:clamp(1.35rem,2.2vw,1.85rem);letter-spacing:-.015em}
.idx-d{grid-column:1;font-size:.9rem;color:var(--muted)}
.idx-arrow{font-size:1.2rem;transition:transform .3s var(--ease)}
.index-list a:hover .idx-arrow{transform:translateX(6px)}

/* Contact concierge */
.concierge-grid{display:grid;gap:calc(var(--u)*6)}
.concierge-line{display:block;font-family:var(--serif);font-size:clamp(1.5rem,2.8vw,2.2rem);color:var(--ink);text-decoration:none;margin:0 0 calc(var(--u)*3);line-height:1.15}
.concierge-line .eyebrow{display:block;margin-bottom:8px}
.concierge-line:hover{color:var(--brass-dark)}
.concierge-email{font-size:clamp(1.15rem,2vw,1.5rem)!important}
.concierge-addr{margin:0 0 calc(var(--u)*4)}
.concierge-addr .eyebrow{display:block}
.next-steps{list-style:none;padding:0;margin:0 0 calc(var(--u)*4)}
.next-steps li{display:grid;gap:6px;padding:18px 0;border-top:1px solid var(--rule)}
.next-steps h2{margin:0}
.next-steps p{margin:0;color:var(--muted);font-size:.95rem}
.concierge-note{font-size:.92rem;color:var(--muted)}
.enquiry-head{margin-bottom:calc(var(--u)*4)}
.form-step{font-family:var(--serif);font-style:normal;font-size:1.35rem;color:var(--ink);border-bottom:1px solid var(--rule);padding-bottom:10px;margin:44px 0 26px}
.chips{border:0;padding:0;margin:0 0 22px}
.chips legend{font:600 .68rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;padding:0}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.opt{cursor:pointer}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{display:inline-block;padding:10px 14px;border:1px solid var(--rule);font-size:.9rem;transition:border-color .2s,background .2s,color .2s}
.opt input:checked+span{background:var(--ink);color:var(--light);border-color:var(--ink)}
.opt input:focus-visible+span{outline:2px solid var(--brass);outline-offset:2px}
.field{margin-bottom:18px}
.field label{display:block;font:600 .68rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.hint{display:block;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);margin-top:4px;font-size:.85rem;font-family:var(--sans)}
.form input[type=text],.form input[type=email],.form input[type=tel],.form textarea{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:12px 0;font:inherit;color:var(--ink);border-radius:0}
.form input:focus-visible,.form textarea:focus-visible{outline:0;box-shadow:0 2px 0 var(--brass)}
.form textarea{resize:vertical;min-height:120px}
.row{display:grid;gap:16px}
@media (min-width:700px){.row{grid-template-columns:1fr 1fr;gap:24px}}
.consent{display:flex;gap:12px;align-items:flex-start;font:400 .92rem/1.5 var(--sans);letter-spacing:0;text-transform:none;color:var(--text)!important}
.consent input{margin-top:4px;flex:none}
.form-submit{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:28px}
.form-status{margin:0;font-size:.92rem}
@media (min-width:960px){.concierge-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}}

/* Credits */
.credits-intro{max-width:42em;margin-bottom:calc(var(--u)*6)}
.credit-list{list-style:none;padding:0;margin:0}
.credit-plate{display:grid;gap:calc(var(--u)*2);padding:calc(var(--u)*4) 0;border-top:1px solid var(--rule)}
.credit-plate .frame{aspect-ratio:4/3}
.spec{margin:12px 0 0}
.spec-sm{display:grid;gap:6px;font-size:.88rem}
.spec-sm div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:8px}
.spec-sm dt{color:var(--muted);font-weight:500}
.spec-sm dd{margin:0}
@media (min-width:800px){.credit-plate{grid-template-columns:280px minmax(0,1fr);column-gap:calc(var(--u)*4);align-items:start}}

/* Footer — oversized wordmark */
.site-footer{background:var(--night);color:var(--light);padding:clamp(72px,10vw,128px) 0 120px}
.site-footer a{color:var(--light);text-decoration:none}
.site-footer a:hover{color:var(--brass-light)}
.footer-mega{display:block;color:var(--light)!important;text-decoration:none;margin-bottom:calc(var(--u)*5)}
.footer-mega-wm{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(2.8rem,10vw,9.5rem);line-height:.9;letter-spacing:-.04em;color:var(--light)}
.footer-mega-sub{display:flex;align-items:center;gap:14px;margin-top:calc(var(--u)*2);font:500 .72rem/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--brass-light)}
.footer-mega-sub i{display:block;width:28px;height:1px;background:var(--brass)}
.footer-statement{font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.35;color:var(--light);margin:0 0 calc(var(--u)*5);max-width:22em}
.footer-cols{display:grid;gap:calc(var(--u)*4);padding-top:calc(var(--u)*5);border-top:1px solid var(--rule-light)}
.footer-cols h2{font:600 .66rem/1.5 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--brass-light);margin:0 0 16px}
.footer-cols ul{list-style:none;padding:0;margin:0}
.footer-cols li{margin:0 0 8px}
.footer-contact a{display:block;font-family:var(--serif);font-size:1.2rem;margin-bottom:6px}
.footer-bottom{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;margin-top:calc(var(--u)*6);padding-top:calc(var(--u)*3);border-top:1px solid var(--rule-light);font-size:.78rem;color:var(--light-muted)}
.footer-bottom a{text-decoration:underline;text-underline-offset:3px}
@media (min-width:800px){.footer-cols{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1fr;background:var(--charcoal)}
.mobile-cta a{display:flex;align-items:center;justify-content:center;min-height:56px;font:600 .7rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--light);text-decoration:none}
.mobile-cta .mobile-cta-main{background:var(--brass-light);color:var(--ink)}
@media (min-width:800px){.mobile-cta{display:none}.site-footer{padding-bottom:clamp(72px,10vw,128px)}}
body{padding-bottom:56px}
@media (min-width:800px){body{padding-bottom:0}}

/* Reveals */
.reveal,.reveal-img{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .js .reveal.is-visible{opacity:1;transform:none}
  .js .reveal-img{clip-path:inset(8% 8% 8% 8%);transition:clip-path 1s var(--ease)}
  .js .reveal-img.is-visible{clip-path:inset(0)}
}

/* Pitch remnant (unused) */
.pitch-top{clip-path:polygon(0 28px,100% 0,100% 100%,0 100%);margin-top:-28px;padding-top:calc(clamp(88px,12vw,160px) + 28px)}