/* =========================================================
   Cellar Door Architecture — site styles
   Cool Architectural palette · Reason + Span typography
   ========================================================= */

:root{
  --maxw: 1440px;
  --pad: clamp(28px, 4.6vw, 72px);
  /* ── Page edge gutter — MUST match the side gutter used by content
     (images, heroes, project rows: clamp(20px,3vw,56px)). The header
     and footer bars use this so their left/right edges line up exactly
     with the image edges at every screen size, with no max-width cap. */
  --edge: clamp(20px, 3vw, 56px);
  --pad-y: clamp(64px, 8vw, 128px);
  --pad-y-tight: clamp(40px, 5vw, 80px);
  /* ── Header inset — ONE value, used three times: above the logo,
     above the nav text, and below the logo before page content.
     Change it here and all three stay equal. (Desktop only; the
     ≤800px header keeps its own fixed 64px bar.) */
  --hdr-pad: 28px;

  /* ── Image grid gap — STANDARDISED across the whole site ──
     One value used for both row gaps (between rows) and
     cell gaps (within a row) and the Selected Works tile
     grid. Locked at 28px desktop / 16px small viewports so
     individual page edits don't drift. */
  --grid-gap: 28px;
}
@media (max-width: 640px){
  :root{--grid-gap: 16px;}
}
/* Match the content gutter's small-screen value so header/footer edges
   keep tracking the images below 900px too. */
@media (max-width: 900px){
  :root{--edge: clamp(16px, 4vw, 32px);}
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--cd-bg); color:var(--cd-ink); min-height:100vh; display:flex; flex-direction:column;}

/* Skip link */
.skip{position:absolute; left:-9999px; top:0; padding:12px 18px; background:var(--cd-ink); color:var(--cd-bg); font-family:var(--font-sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase; z-index:1000;}
.skip:focus{left:16px; top:16px; outline:2px solid var(--cd-sage); outline-offset:2px;}

main{flex:1;}
.container{margin:0 auto; padding-left:var(--edge); padding-right:var(--edge); width:100%;}

/* =====================  HEADER  ===================== */
.hdr{position:sticky; top:0; z-index:50; background:var(--cd-bg); border-bottom:1px solid transparent; transition:border-color .32s var(--ease-out);}
.hdr.scrolled{border-bottom-color:var(--cd-rule);}
/* Logo and nav text share one top inset (--hdr-pad), repeated below the logo. */
/* NB: padding-top/-bottom longhands only — the `padding` shorthand would zero
   the left/right --edge gutter that .container sets, and the header would stop
   lining up with the image edges below. */
.hdr-inner{display:flex; align-items:flex-start; justify-content:space-between; padding-top:var(--hdr-pad); padding-bottom:var(--hdr-pad);}
.hdr .brand{display:flex; align-items:center; color:var(--cd-ink); text-decoration:none; border:0;}
.hdr .brand svg,
.hdr .brand img{height:62px; width:auto; display:block;}
.hdr .nav{display:flex; gap:36px; align-items:center; margin-top:-8px;} /* -8px cancels the links' own padding-top so their text tops sit level with the logo */
.hdr .nav a{font-family:var(--font-display); font-size:14px; font-weight:300; letter-spacing:.14em; text-transform:uppercase; color:var(--cd-ink); border:0; padding:8px 0; border-bottom:1px solid transparent; transition:color .18s var(--ease-out), border-color .18s var(--ease-out);}
.hdr .nav a:hover{color:var(--cd-sage); border-bottom-color:var(--cd-sage);}
.hdr .nav a[aria-current="page"]{border-bottom-color:var(--cd-ink);}
.hdr .menu{display:none; background:transparent; border:0; cursor:pointer; padding:8px;}
.hdr .menu svg{width:24px; height:24px; stroke:var(--cd-ink); stroke-width:1.5; fill:none;}

/* Mobile nav */
@media (max-width: 800px){
  .hdr-inner{height:64px; align-items:center; padding-top:0; padding-bottom:0;}
  .hdr .brand svg,
  .hdr .brand img{height:44px;}
  .hdr .nav{display:none; margin-top:0; position:absolute; top:64px; left:0; right:0; flex-direction:column; gap:0; background:var(--cd-bg); border-top:1px solid var(--cd-rule); padding:8px 0;}
  .hdr.open .nav{display:flex;}
  .hdr .nav a{padding:18px var(--edge); border-bottom:1px solid var(--cd-rule); width:100%;}
  .hdr .menu{display:inline-flex; padding:12px;}   /* 24px icon + 24 = 48², a comfortable thumb target */
}

/* =====================  FOOTER  ===================== */
.ftr{margin-top:var(--pad-y); border-top:1px solid var(--cd-rule); padding:var(--pad-y-tight) 0 32px;}
/* Homepage: services section padding-bottom already matches its top; drop the
   footer's large top margin so the gap below the service blocks matches too. */
body[data-page="home"] .ftr{margin-top:0;}
.ftr-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:48px;}
.ftr h4{font-family:var(--font-display); font-size:12px; font-weight:300; letter-spacing:.18em; text-transform:uppercase; color:var(--cd-ink-soft); margin:0 0 16px;}
.ftr a{display:block; padding:6px 0; color:var(--cd-ink); text-decoration:none; border:0; font-size:14px; transition:color .18s var(--ease-out);}
/* ── Contact links with a small grey icon ──
   Two placements, one appearance. In the footer the icon sits INSIDE the <a>
   (.with-icon), which is fine there because footer links aren't underlined.
   Elsewhere — the contact page, where links carry an underline — .icon-line
   wraps the icon and the link as siblings, so the underline stays under the
   text and doesn't run beneath the icon. The icons are decorative: the link
   text names each one, so they are aria-hidden. */
.ftr a.with-icon, .icon-line{align-items:center; gap:10px;}
.ftr a.with-icon{display:flex;}
.icon-line{display:inline-flex;}
.ftr a.with-icon svg, .icon-line svg{width:14px; height:14px; flex:0 0 14px; stroke:var(--cd-ink-soft); stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; transition:stroke .18s var(--ease-out);}
.ftr a.with-icon:hover svg, .icon-line:hover svg{stroke:var(--cd-sage);}
.ftr a:hover{color:var(--cd-sage);}
.ftr .brand{display:block; line-height:0; margin-bottom:18px; color:var(--cd-ink);}
.ftr .brand svg,
.ftr .brand img{height:70px; width:auto; display:block;}
.ftr .addr{color:var(--cd-ink-soft); font-size:14px; line-height:1.7;}
.ftr .arb{display:inline-flex; align-items:center; gap:10px; margin-top:12px; font-family:var(--font-display); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--cd-ink-soft); font-weight:300;}
.ftr .arb-mark{width:18px; height:18px; border:1px solid var(--cd-ink-soft); display:inline-flex; align-items:center; justify-content:center; font-size:9px; font-weight:700;}
/* ARB registration logo, sitting beneath the text. Its background has
   been recoloured to the page background (#FAFAF9) so it blends flat. */
.ftr .arb-logo{width:218px; max-width:100%; height:auto; display:block; margin-top:16px;}
.ftr-bot{display:flex; justify-content:space-between; align-items:center; padding-top:32px; margin-top:var(--pad-y-tight); border-top:1px solid var(--cd-rule); font-family:var(--font-display); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--cd-ink-soft); font-weight:300;}

@media (max-width: 800px){
  .ftr-grid{grid-template-columns:1fr 1fr; gap:40px 24px;}
  .ftr-bot{flex-direction:column; gap:14px; text-align:center;}
}

/* =====================  TYPE SHORTCUTS  ===================== */
.eyebrow{font-family:var(--font-display); font-size:12px; font-weight:300; letter-spacing:.18em; text-transform:uppercase; color:var(--cd-ink-soft);}
.section-index{display:flex; align-items:baseline; gap:14px; margin-bottom:48px;}
.section-index .num{font-family:var(--font-display); font-size:13px; font-weight:300; letter-spacing:.18em; text-transform:uppercase; color:var(--cd-ink-soft);}
.section-index .em{color:var(--cd-rule); margin:0 4px;}
.section-index .ttl{font-family:var(--font-display); font-size:13px; font-weight:300; letter-spacing:.18em; text-transform:uppercase; color:var(--cd-ink);}

h1.display{font-family:var(--font-display); font-weight:300; font-size:clamp(40px,5.6vw,88px); line-height:1.0; letter-spacing:0.02em; text-transform:uppercase; color:var(--cd-ink); margin:0;}
h1.display em, h2.display em, h3.display em{font-style:normal; font-family:inherit; letter-spacing:inherit; text-transform:inherit;}
h2.display{font-family:var(--font-display); font-weight:300; font-size:clamp(32px,4.2vw,64px); line-height:1.02; letter-spacing:0.02em; text-transform:uppercase; color:var(--cd-ink); margin:0;}
h3.display{font-family:var(--font-display); font-weight:300; font-size:clamp(22px,2.4vw,32px); line-height:1.08; letter-spacing:0.025em; text-transform:uppercase; color:var(--cd-ink); margin:0;}
.subtitle{font-family:var(--font-sans); font-weight:700; font-size:13px; letter-spacing:.04em; color:var(--cd-ink); margin:0;}
.minicaps{font-family:var(--font-display); font-size:12px; font-weight:300; letter-spacing:.18em; text-transform:uppercase; color:var(--cd-ink-soft);}

p.lead{font-family:var(--font-sans); font-weight:300; font-size:clamp(17px,1.4vw,20px); line-height:1.6; color:var(--cd-ink); margin:0;}
p.lead em{font-style:italic;}
p.body{font-family:var(--font-sans); font-weight:300; font-size:17px; line-height:1.65; color:var(--cd-ink); margin:0;}
p.body em{font-style:italic;}
p.body + p.body{margin-top:1.2em;}

a.text-link{color:var(--cd-ink); border-bottom:1px solid var(--cd-rule); padding-bottom:2px; text-decoration:none; transition:color .18s var(--ease-out), border-color .18s var(--ease-out);}
a.text-link:hover{color:var(--cd-sage); border-bottom-color:var(--cd-sage);}
a.cta{display:inline-flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:300; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--cd-ink); border:0; border-bottom:1px solid var(--cd-ink); padding-bottom:6px; text-decoration:none; transition:color .18s var(--ease-out), border-color .18s var(--ease-out);}
a.cta:hover{color:var(--cd-sage); border-bottom-color:var(--cd-sage);}
a.cta svg{width:14px; height:14px; stroke-width:1.5; stroke:currentColor; fill:none; transition:transform .22s var(--ease-out);}
a.cta:hover svg{transform:translateX(4px);}

button.btn, .btn{font-family:var(--font-display); font-weight:300; font-size:13px; letter-spacing:.2em; text-transform:uppercase; padding:18px 28px; background:var(--cd-ink); color:var(--cd-bg); border:1px solid var(--cd-ink); cursor:pointer; transition:background .18s var(--ease-out), border-color .18s var(--ease-out); display:inline-flex; align-items:center; gap:12px; text-decoration:none;}
.btn:hover{background:var(--cd-sage); border-color:var(--cd-sage);}

.dot{display:inline-block; width:5px; height:5px; border-radius:999px; background:var(--cd-sage); margin:0 10px; transform:translateY(-2px); vertical-align:middle;}

hr.rule{border:0; border-top:1px solid var(--cd-rule); margin:0;}

/* =====================  PLACEHOLDERS  ===================== */
.ph{position:relative; background:linear-gradient(135deg,#E0DFDC 0%,#C5C4C0 100%); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.ph::before{content:""; position:absolute; inset:0; background-image:linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.04) 75%, transparent 75%); background-size:24px 24px;}
.ph-label{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:6px; color:rgba(28,27,25,.55); text-align:center; padding:18px;}
.ph-label .lbl-type{font-family:var(--font-display); font-size:11px; font-weight:300; letter-spacing:.18em; text-transform:uppercase;}
.ph-label .lbl-subj{font-family:var(--font-sans); font-size:12px; font-weight:300; letter-spacing:.02em;}
.ph-label .lbl-dim{font-family:ui-monospace,monospace; font-size:10px; color:rgba(28,27,25,.4); letter-spacing:.04em;}

.ph.dark{background:linear-gradient(135deg,#3A3A39 0%,#1C1B19 100%);}
.ph.dark .ph-label{color:rgba(250,250,249,.55);}
.ph.dark .ph-label .lbl-dim{color:rgba(250,250,249,.4);}

/* =====================  PROJECT CARD (tile)  ===================== */
.tile{display:flex; flex-direction:column; gap:14px; text-decoration:none; color:inherit; border:0; cursor:pointer;}
.tile .img{aspect-ratio:4/3; width:100%; overflow:hidden; transition:opacity .35s var(--ease-out); background-position:center; background-size:cover; background-repeat:no-repeat;}
/* Inner zoom-on-hover: the .img is the masked viewport, the image itself sits inside via background-image and scales */
.tile .has-image{transform:scale(1); transition:transform 1.2s var(--ease-out);}
.tile:hover .has-image{transform:scale(1.03);}
@media (prefers-reduced-motion: reduce){
  .tile .has-image, .tile:hover .has-image{transform:none;}
}
.tile.tall .img{aspect-ratio:3/4;}
.tile.wide .img{aspect-ratio:16/10;}
.tile:hover .img{opacity:.92;}
.tile .eye{font-family:var(--font-display); font-size:12px; font-weight:300; letter-spacing:.18em; text-transform:uppercase; color:var(--cd-ink-soft);}
.tile h3{font-family:var(--font-display); font-weight:300; font-size:clamp(20px,1.8vw,26px); line-height:1.08; letter-spacing:0.025em; text-transform:uppercase; color:var(--cd-ink); margin:0; transition:color .18s var(--ease-out);}
.tile h3 em{font-style:normal; font-family:inherit; letter-spacing:inherit;}
.tile:hover h3{color:var(--cd-sage);}
.tile .meta{font-family:var(--font-sans); font-size:13px; color:var(--cd-ink-soft);}
.tile.draft .img::after{content:"DRAFT"; position:absolute; top:14px; left:14px; padding:5px 10px; background:var(--cd-bg); color:var(--cd-ink); font-family:var(--font-display); font-size:11px; font-weight:300; letter-spacing:.18em; z-index:2; border:1px solid var(--cd-ink);}
.tile.draft .img{position:relative;}

/* Selected works grid (12 col) */
.work-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:64px 40px;}
.span-4{grid-column:span 4;}
.span-5{grid-column:span 5;}
.span-6{grid-column:span 6;}
.span-7{grid-column:span 7;}
.span-8{grid-column:span 8;}
.span-12{grid-column:span 12;}
.offset-1{grid-column-start:2;}
.offset-2{grid-column-start:3;}

@media (max-width: 900px){
  .work-grid{grid-template-columns:repeat(6,1fr); gap:40px 24px;}
  .span-4, .span-5, .span-6, .span-7, .span-8{grid-column:span 6;}
  .offset-1, .offset-2{grid-column-start:1;}
}

/* =====================  ANIMATIONS  ===================== */
.fade-up{opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);}
.fade-up.in{opacity:1; transform:translateY(0);}
.img-reveal{overflow:hidden;}
.img-reveal > *{transform:scale(1.02); transition:transform 1.2s var(--ease-out);}
.img-reveal.in > *{transform:scale(1);}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  .fade-up{opacity:1; transform:none;}
  .img-reveal > *{transform:none;}
}


/* =====================  HOMEPAGE HERO  ===================== */
.home-hero{position:relative; height:min(92vh, 880px); min-height:560px; margin:0 clamp(20px, 3vw, 56px); overflow:hidden; background:#0A0A0A;}
@media (max-width: 900px){
  .home-hero{margin:0 clamp(16px, 4vw, 32px);}
}
.home-hero .img{position:absolute; inset:0; background-position:center; background-size:cover; transform:scale(1.04); transition:transform 1.6s var(--ease-out), opacity 1.2s var(--ease-out); opacity:0;}
.home-hero.in .img{transform:scale(1); opacity:1;}
/* subtle scrims for legibility — top for the nav, bottom for the strapline */
.home-hero::before{content:""; position:absolute; inset:0 0 auto 0; height:240px; background:linear-gradient(180deg, rgba(10,10,10,0.34) 0%, rgba(10,10,10,0.17) 40%, rgba(10,10,10,0) 100%); pointer-events:none; z-index:1;}
.home-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,10,0) 55%, rgba(10,10,10,0.45) 100%); pointer-events:none; z-index:1;}
.home-hero .copy{position:absolute; left:var(--pad); right:var(--pad); bottom:clamp(28px,3vw,40px); z-index:2; max-width:var(--maxw); margin:0 auto; color:var(--cd-bg);}
.home-hero .copy .strapline{font-family:var(--font-display); font-weight:300; font-size:clamp(20px,3vw,42px); line-height:1.05; letter-spacing:0.025em; text-transform:uppercase; color:var(--cd-bg); margin:0; max-width:none; white-space:nowrap; opacity:0; transform:translateY(16px); transition:opacity 1s var(--ease-out) 0.35s, transform 1s var(--ease-out) 0.35s;}
.home-hero.in .copy .strapline{opacity:1; transform:translateY(0);}
.home-hero .copy .eyebrow{display:block; margin-bottom:18px; color:rgba(250,250,249,.7); opacity:0; transition:opacity 1s var(--ease-out) 0.2s;}
.home-hero.in .copy .eyebrow{opacity:1;}
/* (The hero scroll hint was removed 2026-07-28 — decorative, and too faint to
   read at 11px/60% white over the imagery. Its CSS went with it.) */

/* --- Hero carousel: layered slides that cross-fade with a slow ken-burns drift --- */
.home-hero .hero-carousel{position:absolute; inset:0; z-index:0; overflow:hidden; background:#0A0A0A;}
.home-hero .hero-slide{
  position:absolute; inset:0;
  background-position:center center; background-size:cover; background-repeat:no-repeat;
  opacity:0;
  transition:opacity 1.1s ease-in-out;
  /* cover = image always fills the full-width band (no side bars). Center is
     prioritised; the tall band keeps upscaling/zoom to a minimum. Some
     top/bottom crop on wide screens is accepted to keep it edge-to-edge. */
  transform:none;
  will-change:opacity;
}
.home-hero .hero-slide.is-active{opacity:1;}
@keyframes heroKen{from{transform:scale(1);} to{transform:scale(1.06);}}

@media (prefers-reduced-motion: reduce){
  .home-hero .hero-slide{animation:none; transform:none; transition:opacity .5s linear;}
}

@media (prefers-reduced-motion: reduce){
  .home-hero .img{transform:none; opacity:1;}
  .home-hero .copy .strapline, .home-hero .copy .eyebrow{opacity:1; transform:none;}
}

/* Header is always solid cream with black text — no on-hero inversion */
.hdr.on-hero{background:var(--cd-bg); border-bottom-color:transparent; backdrop-filter:none;}
.hdr.on-hero .brand,
.hdr.on-hero .nav a{color:var(--cd-ink);}
.hdr.on-hero .nav a[aria-current="page"]{border-bottom-color:var(--cd-ink);}
.hdr.on-hero .menu svg{stroke:var(--cd-ink);}
.hdr.on-hero .brand svg,
.hdr.on-hero .brand img{filter:none;}

/* =====================  HOME  ===================== */
.home-intro{padding:clamp(96px,12vw,180px) 0 clamp(64px,8vw,128px);}
.home-intro .eyebrow{display:block; margin-bottom:32px;}
.home-intro p{font-family:var(--font-sans); font-weight:300; font-size:clamp(17px,1.4vw,22px); line-height:1.65; color:var(--cd-ink); max-width:none; margin:0; font-feature-settings:"kern";}
.home-intro p em{font-style:italic; font-weight:300;}

/* Uniform 2-up project grid (hyde-architects rhythm: alternating landscape/portrait, never busy) */
.home-works{padding:0 0 var(--pad-y);}
.uniform-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:clamp(48px,6vw,96px) clamp(32px,4vw,64px);}
.uniform-grid .tile .img{aspect-ratio:4/3;}
.uniform-grid .tile.alt .img{aspect-ratio:3/4;}
/* Staggered reveal of project tiles on scroll-in */
.uniform-grid .tile{transition-delay:0ms;}
.uniform-grid .tile:nth-child(2n){transition-delay:120ms;}
.uniform-grid .tile:nth-child(odd){transition-delay:0ms;}
.uniform-grid .tile.fade-up{opacity:0; transform:translateY(28px);}
.uniform-grid .tile.fade-up.in{opacity:1; transform:translateY(0); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out);}
.uniform-grid .tile.fade-up.in .img{animation:tileImgReveal 1.2s var(--ease-out) both;}
@keyframes tileImgReveal{from{opacity:0; transform:scale(1.04);} to{opacity:1; transform:scale(1);}}
@media (prefers-reduced-motion: reduce){
  .uniform-grid .tile.fade-up{opacity:1; transform:none;}
  .uniform-grid .tile.fade-up.in .img{animation:none;}
}

/* Tiles aligned at the top; alt tiles use a taller portrait ratio so heights vary naturally. */
.uniform-grid .tile{align-self:start;}
.uniform-grid .tile.alt .img{aspect-ratio:3/4;}

@media (max-width: 900px){
  .uniform-grid{grid-template-columns:1fr; gap:48px;}
  .uniform-grid .tile .img, .uniform-grid .tile.alt .img{aspect-ratio:4/3;}
}

.home-works{padding:0 0 var(--pad-y);}
.home-services{padding:var(--pad-y-tight) 0 var(--pad-y-tight); border-top:1px solid var(--cd-rule);}
.home-services-grid{display:grid; grid-template-columns:1fr 1.6fr; gap:96px;}
.home-services h2{margin-bottom:28px;}
.svc-list{display:flex; flex-direction:column; gap:0;}
.svc-list a{display:flex; align-items:baseline; justify-content:space-between; padding:22px 0; border-bottom:1px solid var(--cd-rule); text-decoration:none; color:var(--cd-ink); border-top:0; transition:padding-left .22s var(--ease-out), color .22s var(--ease-out);}
.svc-list a:first-child{border-top:1px solid var(--cd-rule);}
.svc-list a:hover{color:var(--cd-sage); padding-left:8px;}
.svc-list .svc-name{font-family:var(--font-display); font-weight:300; font-size:clamp(20px,2.2vw,30px); letter-spacing:0.025em; text-transform:uppercase;}
.svc-list .svc-arrow{font-family:var(--font-display); font-size:12px; font-weight:300; letter-spacing:.18em; text-transform:uppercase; color:var(--cd-ink-soft);}

@media (max-width: 900px){
  .home-services-grid{grid-template-columns:1fr; gap:36px;}
}

/* =====================  PROJECT DETAIL  ===================== */
.pd-hero{width:100%; height:78vh; min-height:560px;}
.pd-title{padding:var(--pad-y) 0 var(--pad-y-tight); border-bottom:1px solid var(--cd-rule);}
.pd-title-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:end;}
.pd-title h1{margin-bottom:18px;}
.pd-title .location{font-family:var(--font-sans); font-size:14px; color:var(--cd-ink-soft); letter-spacing:.04em;}

.pd-meta{padding:var(--pad-y-tight) 0; border-bottom:1px solid var(--cd-rule); display:grid; grid-template-columns:repeat(4,1fr); gap:48px;}
.pd-meta .cell .lbl{font-family:var(--font-display); font-size:11px; font-weight:300; letter-spacing:.18em; text-transform:uppercase; color:var(--cd-ink-soft); margin-bottom:8px;}
.pd-meta .cell .val{font-family:var(--font-display); font-weight:300; font-size:18px; letter-spacing:.025em; color:var(--cd-ink); line-height:1.4; text-transform:uppercase;}

/* =====================================================
   Editorial project page — Hyde-style (minimal):
   one narrow column of text, then a stack of full-width
   landscape images. No eyebrow, no side panel, no meta grid.
   ===================================================== */
.pd-article{
  padding:clamp(80px, 10vw, 160px) clamp(20px, 3vw, 56px) clamp(28px, 3vw, 48px);
  display:flex; flex-direction:column;
  gap:clamp(19.6px, 2.1vw, 33.6px);
  max-width:760px;
  margin:0;
}
.pd-article h1{
  margin:0 0 0;
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(18px, 2.2vw, 32px); line-height:1.1;
  letter-spacing:0.005em;
  color:var(--cd-ink);
  text-wrap:balance;
}
.pd-article p{
  margin:0;
  font-family:var(--font-sans);
  font-size:clamp(15px, 1.05vw, 17px);
  line-height:1.7;
  color:var(--cd-ink);
}
.pd-article p em{font-style:italic;}
.pd-article .pd-spacer{height:clamp(8px, 1vw, 16px);}
.pd-article blockquote{
  margin:0;
  font-family:var(--font-sans);
  font-style:italic;
  font-size:clamp(15px, 1.05vw, 17px);
  line-height:1.7;
  color:var(--cd-ink);
}
.pd-article .pd-readmore{
  display:inline-block;
  font-family:var(--font-sans);
  font-size:clamp(15px, 1.05vw, 17px);
  line-height:1.7;
  color:var(--cd-ink);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.pd-article .pd-readmore:hover{color:var(--cd-sage);}

@media (max-width: 900px){
  .pd-article{
    padding:clamp(56px, 12vw, 88px) clamp(20px, 5vw, 32px) clamp(32px, 6vw, 56px);
  }
}

/* =====================================================
   .pd-rows / .pd-row — top-aligned image rows for project
   pages. Each row has 1, 2 or 3 images that share the same
   aspect-ratio so heights line up exactly — no staggering.
   Side gutter matches the home page hero (clamp 20–56px).
   ===================================================== */
/* When .cv-row appears inside a cream practice-panel, give the dividers a darker rule */
.practice-panel.block .cv-list .cv-row{border-top-color:rgba(10,10,10,.18);}
.practice-panel.block .cv-list .cv-row:last-child{border-bottom-color:rgba(10,10,10,.18);}
.practice-panel.block .cv-list .cv-row .year{color:rgba(10,10,10,.55);}
.practice-panel.block .cv-list .cv-row .org{color:var(--cd-ink);}
.practice-panel.block .cv-list .cv-row .place{color:rgba(10,10,10,.55);}
.pd-rows{
  display:flex; flex-direction:column;
  gap:var(--grid-gap);
  margin:0 clamp(20px, 3vw, 56px);
  padding:0;
}
.pd-row{
  display:grid;
  gap:var(--grid-gap);
  align-items:stretch;
}
/* Gallery cells hold a real <img> (lazy, srcset-ready). The cell keeps its
   aspect-ratio, reveal animation and hover; the image fills it and crops like
   the background-size:cover it replaced. .fit-contain is for the plans and
   drawings that must be seen whole — they were background-size:contain, and
   cropping a site plan would lose the point of it. Their mat colour stays on
   the cell as an inline background-color. */
.pd-row .g img{display:block; width:100%; height:100%; object-fit:cover;}
.pd-row .g.fit-contain img{object-fit:contain;}
.pd-row .g{
  width:100%;
  background-color:#1C1B19;
  position:relative;
  overflow:hidden;
  opacity:0;
  transform:translateY(18px) scale(1.015);
  transition:opacity 1s var(--ease-out), transform 1.2s var(--ease-out);
}
.pd-row .g.in,
.pd-row.in .g{opacity:1; transform:translateY(0) scale(1);}
.pd-row .g:hover{transform:translateY(0) scale(1.012);}
@media (prefers-reduced-motion: reduce){
  .pd-row .g{opacity:1; transform:none; transition:none;}
}
.pd-row.cols-1{grid-template-columns:1fr;}
.pd-row.cols-2{grid-template-columns:1fr 1fr;}
.pd-row.cols-3{grid-template-columns:1fr 1fr 1fr;}
.pd-row.cols-2-wide{grid-template-columns:1.7fr 1fr;}
.pd-row.cols-1-2{grid-template-columns:1fr 1.7fr;}
/* Shared aspect-ratio per row so all cells in that row align top + bottom */
.pd-row.cols-1 .g{aspect-ratio:21/9;}
.pd-row.cols-1.tall .g{aspect-ratio:16/9;}
/* Full-bleed: cancel the .pd-rows side gutters and run edge-to-edge */
.pd-row.full-bleed{margin-left:calc(-1 * clamp(20px, 3vw, 56px)); margin-right:calc(-1 * clamp(20px, 3vw, 56px));}
.pd-row.full-bleed.cols-1 .g{aspect-ratio:21/9;}
.pd-row.full-bleed.cols-1.tall .g{aspect-ratio:16/9;}
.pd-row.cols-2 .g,
.pd-row.cols-2-wide .g,
.pd-row.cols-1-2 .g{aspect-ratio:4/3;}
.pd-row.cols-3 .g{aspect-ratio:3/2;}

/* =========================================================
   Image-row HEIGHT SYSTEM — three named heights for galleries.
   Use these in addition to cols-1/2/3. The row gets a fixed
   height; cells fill it. Heights are tuned to match:
     • Tall     ≈ Kip & Nook hero (cols-1 16/9 historical)
     • Standard ≈ Kip & Nook footer (cols-1 21/9 historical)
     • Short    ≈ Westpark footer pair (cols-2 1.9/1 each)
   ========================================================= */
.pd-row.h-tall,
.pd-row.h-standard,
.pd-row.h-short{align-items:stretch;}
.pd-row.h-tall    .g,
.pd-row.h-standard .g,
.pd-row.h-short    .g{height:100%; aspect-ratio:auto;}

/* Heights scale with viewport, clamped at sensible min/max.
   Reference: at 1200px container, tall≈675, standard≈515, short≈316. */
.pd-row.h-tall    {height:clamp(360px, 56vw, 880px);}
.pd-row.h-standard{height:clamp(280px, 43vw, 700px);}
.pd-row.h-short   {height:clamp(200px, 26vw, 460px);}

@media (max-width: 800px){
  /* Mobile: rows still stack via existing rule; let height auto */
  .pd-row.h-tall, .pd-row.h-standard, .pd-row.h-short{height:auto !important;}
  .pd-row.h-tall    .g{aspect-ratio:16/9 !important; height:auto;}
  .pd-row.h-standard .g{aspect-ratio:16/9 !important; height:auto;}
  .pd-row.h-short    .g{aspect-ratio:16/9 !important; height:auto;}
}

/* Captioned image inside a gallery row — title + tagline overlay, bottom-left.
   Pairs with cols-2-wide / cols-1-2 to recreate the "Portal / Flow" treatment. */
.pd-row .g.captioned{position:relative; overflow:hidden;}
.pd-row .g.captioned::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:55%;
  background:linear-gradient(to top, rgba(10,10,10,.55) 0%, rgba(10,10,10,0) 100%);
  pointer-events:none;
}
.pd-row .g.captioned .cap{
  position:absolute; left:clamp(16px, 1.8vw, 28px); bottom:clamp(16px, 1.8vw, 28px);
  display:flex; flex-direction:column; gap:6px;
  color:#fff; z-index:2;
}
.pd-row .g.captioned .cap .cap-ttl{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(22px, 2.2vw, 34px); letter-spacing:0.02em;
  line-height:1; margin:0;
}
.pd-row .g.captioned .cap .cap-sub{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(11px, .85vw, 13px); letter-spacing:.04em;
  line-height:1.2; opacity:.92;
}
.pd-row .g.captioned .cap .cap-sub::before{
  content:"— "; opacity:.9;
}
@media (max-width: 800px){
  .pd-rows{margin:0 clamp(16px, 4vw, 32px); gap:var(--grid-gap);}
  .pd-row{grid-template-columns:1fr !important; gap:var(--grid-gap);}
  .pd-row .g{aspect-ratio:16/10 !important;}
}

@media (max-width: 900px){
  .pd-meta{grid-template-columns:repeat(2,1fr); gap:32px 24px;}
}

.pd-body{padding:var(--pad-y) 0; display:grid; grid-template-columns:1fr 1.8fr; gap:96px;}
.pd-body-left h2{font-size:clamp(28px,3vw,44px); line-height:1.05;}
.pd-body-right p.body{font-size:clamp(16px,1.3vw,19px); line-height:1.7;}
.pd-body-right p.body + p.body{margin-top:1.4em;}

/* Falsterbo-style single-column prose used on project pages */
.pd-prose{padding:var(--pad-y-tight) 0; display:flex; flex-direction:column; gap:1.4em; max-width:78ch;}
.pd-prose .eyebrow{margin-bottom:8px;}
.pd-prose h2{font-size:clamp(28px,3vw,44px); line-height:1.05; margin:0 0 .4em;}
.pd-prose h3{font-size:clamp(22px,2.2vw,32px); line-height:1.1; margin:1.2em 0 .3em; font-family:var(--font-display); font-weight:300; letter-spacing:0.025em; text-transform:uppercase;}
.pd-prose p.body{font-size:clamp(16px,1.15vw,18px); line-height:1.7; margin:0;}
.pd-prose p.body em{font-style:italic;}

@media (max-width: 900px){
  .pd-body{grid-template-columns:1fr; gap:32px;}
}

.pd-section{padding:0 0 var(--pad-y);}
.pd-section-header{margin-bottom:48px;}
.pd-section-header h3{margin-bottom:18px;}
.pd-gallery{display:grid; grid-template-columns:repeat(12,1fr); gap:24px;}
.pd-gallery .g{overflow:hidden;}

.pd-pullquote{padding:var(--pad-y-tight) 0;}
.pd-pullquote blockquote{font-family:var(--font-display); font-weight:300; font-size:clamp(28px,3.2vw,44px); line-height:1.15; letter-spacing:0.02em; text-transform:uppercase; max-width:24ch; margin:0; color:var(--cd-ink);}
.pd-pullquote blockquote em{font-style:normal; font-family:inherit; letter-spacing:inherit; text-transform:inherit;}
.pd-pullquote cite{display:block; margin-top:24px; font-family:var(--font-display); font-size:13px; font-weight:300; letter-spacing:.18em; text-transform:uppercase; color:var(--cd-ink-soft); font-style:normal;}

.pd-nav{
  padding:var(--pad-y-tight) clamp(20px, 3vw, 56px);
  margin:0;
  max-width:none;
  border-top:1px solid var(--cd-rule);
  display:flex; justify-content:space-between; align-items:center;
}
.pd-nav a{display:flex; flex-direction:column; gap:6px; text-decoration:none; color:var(--cd-ink); border:0;}
.pd-nav a .lbl{font-family:var(--font-display); font-size:12px; font-weight:300; letter-spacing:.18em; text-transform:uppercase; color:var(--cd-ink-soft);}
.pd-nav a .name{font-family:var(--font-display); font-weight:300; font-size:clamp(22px,2vw,30px); letter-spacing:0.025em; text-transform:uppercase; transition:color .18s var(--ease-out);}
.pd-nav a:hover .name{color:var(--cd-sage);}
.pd-nav .center{font-family:var(--font-display); font-size:12px; font-weight:300; letter-spacing:.18em; text-transform:uppercase; color:var(--cd-ink-soft);}

/* =====================  SERVICES  ===================== */
.svc-hero{padding:var(--pad-y) 0 var(--pad-y-tight);}
.svc-hero-grid{display:grid; grid-template-columns:1fr 1.4fr; gap:96px; align-items:end;}
.svc-hero h1{margin-bottom:0;}
.svc{padding:var(--pad-y-tight) 0; border-top:1px solid var(--cd-rule);}
.svc:first-of-type{border-top:1px solid var(--cd-ink);}
.svc-grid{display:grid; grid-template-columns:1fr 1.8fr; gap:96px;}
.svc h2{margin-bottom:0;}
.svc .body{display:flex; flex-direction:column; gap:1.2em;}

@media (max-width: 900px){
  .svc-hero-grid, .svc-grid{grid-template-columns:1fr; gap:32px;}
}

/* =====================  ABOUT  ===================== */
.about-hero{padding:var(--pad-y) 0 var(--pad-y-tight); border-bottom:1px solid var(--cd-rule);}
.about-hero-grid{display:grid; grid-template-columns:1fr 1.4fr; gap:96px; align-items:end;}

.approach{padding:var(--pad-y-tight) 0;}
.approach-section{padding:48px 0; border-top:1px solid var(--cd-rule); display:grid; grid-template-columns:1fr 1.8fr; gap:96px;}
.approach-section:last-of-type{border-bottom:1px solid var(--cd-rule);}
.approach-section .label{font-family:var(--font-display); font-size:12px; font-weight:300; letter-spacing:.18em; text-transform:uppercase; color:var(--cd-ink-soft);}
.approach-section h2{margin-top:6px; font-size:clamp(24px,2.6vw,38px); line-height:1.05;}
.approach-section .body{display:flex; flex-direction:column; gap:1.2em;}

.team{padding:var(--pad-y) 0;}
.team-lead{display:grid; grid-template-columns:1.4fr 1fr; gap:96px; align-items:end; margin-bottom:64px;}
.team-card{display:grid; grid-template-columns:1fr 1.6fr; gap:64px; align-items:start;}
.team-card .portrait{aspect-ratio:3/4;}
.team-card .info h3{margin-bottom:8px;}
.team-card .info .creds{font-family:var(--font-display); font-size:13px; font-weight:300; letter-spacing:.18em; text-transform:uppercase; color:var(--cd-ink-soft); margin-bottom:24px;}
.team-card .info .body{display:flex; flex-direction:column; gap:1.2em;}

.cv{margin-top:48px;}
.cv-row{display:grid; grid-template-columns:80px 1fr 1fr; gap:24px; align-items:baseline; padding:18px 0; border-top:1px solid var(--cd-rule);}
.cv-row:last-child{border-bottom:1px solid var(--cd-rule);}
.cv-row .year{font-family:ui-monospace,monospace; font-size:14px; color:var(--cd-ink-soft);}
.cv-row .org{font-family:var(--font-display); font-weight:300; font-size:clamp(18px,1.6vw,22px); letter-spacing:0.025em; text-transform:uppercase; color:var(--cd-ink);}
.cv-row .place{font-family:var(--font-sans); font-size:13px; color:var(--cd-ink-soft); text-align:right;}

@media (max-width: 900px){
  .about-hero-grid, .team-lead, .team-card, .approach-section{grid-template-columns:1fr; gap:32px;}
  .cv-row{grid-template-columns:60px 1fr; gap:16px;}
  .cv-row .place{grid-column:1/-1; text-align:left;}
}

/* =====================  CONTACT  ===================== */
.contact{padding:var(--pad-y) 0;}
.contact-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:96px;}
.contact h1{margin-bottom:24px;}
.contact .lead{margin-bottom:48px; max-width:50ch;}
.contact-details{display:flex; flex-direction:column; gap:32px;}
.contact-details .cell .lbl{font-family:var(--font-display); font-size:12px; font-weight:300; letter-spacing:.18em; text-transform:uppercase; color:var(--cd-ink-soft); margin-bottom:8px;}
.contact-details .cell .val{font-family:var(--font-sans); font-weight:300; font-size:17px; line-height:1.55; color:var(--cd-ink);}
.contact-details .cell .val a{color:var(--cd-ink); text-decoration:none; border-bottom:1px solid var(--cd-rule); padding-bottom:2px; transition:color .18s var(--ease-out), border-color .18s var(--ease-out);}
.contact-details .cell .val a:hover{color:var(--cd-sage); border-bottom-color:var(--cd-sage);}

/* (The form-field styles that lived here went with the contact form on
   2026-07-29 — the site has no forms now. Restore from git if one returns.) */

@media (max-width: 900px){
  .contact-grid{grid-template-columns:1fr; gap:48px;}
}

/* =====================  WORKS INDEX  ===================== */
.works-hero{padding:var(--pad-y) 0 var(--pad-y-tight); border-bottom:1px solid var(--cd-rule);}
.works-hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:96px; align-items:end;}
.works-count{font-family:ui-monospace,monospace; font-size:12px; color:var(--cd-ink-soft); margin-top:18px;}
.works-list{padding:var(--pad-y-tight) 0 var(--pad-y);}

/* Filter chips */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:var(--pad-y-tight);}
.chip{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border:1px solid var(--cd-rule); border-radius:999px; font-family:var(--font-display); font-size:12px; font-weight:300; letter-spacing:.14em; text-transform:uppercase; color:var(--cd-ink-soft); background:transparent; cursor:pointer; transition:all .18s var(--ease-out);}
.chip:hover{color:var(--cd-ink); border-color:var(--cd-ink);}
.chip.active{color:var(--cd-ink); border-color:var(--cd-ink);}
.chip.active .chip-dot{width:6px; height:6px; border-radius:999px; background:var(--cd-sage); display:inline-block;}

/* Draft template card flag */
.template-flag{display:inline-flex; align-items:center; gap:8px; padding:5px 10px; border:1px solid var(--cd-sage); color:var(--cd-sage); font-family:var(--font-display); font-size:11px; font-weight:300; letter-spacing:.18em; text-transform:uppercase; background:var(--cd-bg);}

/* When a tile has been given a real image (via inline background-image), suppress the placeholder treatment */
.tile .img.has-image{background-image:var(--bg-img); background-color:#0A0A0A;}
.tile .img.has-image::before{content:none;}
.tile .img.has-image .ph-label{display:none;}
.tile .img.has-image{background:#0A0A0A var(--bg-img) center/cover no-repeat;}


/* Services teaser — icon card grid */
.home-services{padding:clamp(32px, 3.5vw, 56px) 0 clamp(51px, 5.6vw, 90px); border-top:1px solid var(--cd-rule);}
.home-services .svc-header{display:flex; align-items:flex-end; justify-content:space-between; gap:48px; margin-bottom:clamp(48px,5vw,80px); flex-wrap:wrap;}
.home-services .svc-header h2{max-width:18ch; margin:0;}
.home-services .svc-header .lead{font-family:var(--font-sans); font-weight:300; font-size:clamp(15px,1.1vw,17px); line-height:1.6; color:var(--cd-ink-soft); max-width:42ch; margin:0;}
.svc-cards{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--cd-rule); border:1px solid var(--cd-rule);}
.svc-card{background:var(--cd-bg); padding:clamp(32px,3vw,48px); text-decoration:none; color:var(--cd-ink); display:flex; flex-direction:column; gap:18px; min-height:280px; position:relative; overflow:hidden; transition:background .3s var(--ease-out);}
.svc-card::after{content:""; position:absolute; left:0; bottom:0; right:0; height:1px; background:var(--cd-sage); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-out);}
.svc-card:hover{background:var(--cd-bg-deep);}
.svc-card:hover::after{transform:scaleX(1);}
.svc-card .icon{width:48px; height:48px; color:var(--cd-ink); transition:color .3s var(--ease-out), transform .5s var(--ease-out);}
.svc-card .icon svg{width:100%; height:100%; display:block; stroke:currentColor; stroke-width:1; fill:none; stroke-linecap:square; stroke-linejoin:miter;}
.svc-card:hover .icon{color:var(--cd-sage); transform:translateY(-2px);}
.svc-card h3{font-family:var(--font-display); font-weight:300; font-size:clamp(20px,2vw,26px); line-height:1.1; letter-spacing:0.025em; text-transform:uppercase; color:var(--cd-ink); margin:0;}
.svc-card p{font-family:var(--font-sans); font-weight:300; font-size:14px; line-height:1.55; color:var(--cd-ink-soft); margin:0;}
.svc-card .arrow{margin-top:auto; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:12px; font-weight:300; letter-spacing:.18em; text-transform:uppercase; color:var(--cd-ink-soft); transition:color .3s var(--ease-out), gap .3s var(--ease-out);}
.svc-card:hover .arrow{color:var(--cd-sage); gap:16px;}
.svc-card .arrow svg{width:14px; height:14px; stroke:currentColor; stroke-width:1.5; fill:none;}

@media (max-width: 900px){
  .svc-cards{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width: 600px){
  .svc-cards{grid-template-columns:1fr;}
}

/* Animate icon strokes drawing in on scroll-into-view */
.svc-card.in .icon svg path,
.svc-card.in .icon svg line,
.svc-card.in .icon svg polyline,
.svc-card.in .icon svg circle,
.svc-card.in .icon svg rect{stroke-dasharray:1000; stroke-dashoffset:1000; animation:drawStroke 1.4s var(--ease-out) forwards;}
@keyframes drawStroke{to{stroke-dashoffset:0;}}
@media (prefers-reduced-motion: reduce){
  .svc-card.in .icon svg *{animation:none; stroke-dasharray:none; stroke-dashoffset:0;}
}

/* Remove old svc-list teaser styles — replaced by cards */
.home-services-grid, .svc-list{display:none !important;}

/* =====================================================
   HOME v2 — Hyde-style hero (bottom-right tagline)
   + near full-bleed landscape works
   + embedded practice-intro panel
   ===================================================== */

/* --- Hero v2: tagline bottom-LEFT, Reason caps, single line; scroll bottom-RIGHT --- */
.home-hero.v2{height:min(68vh, 739px); min-height:360px;}
.home-hero.v2 .img{background-position:center top;}
.home-hero.v2 .copy{
  left:var(--pad);
  right:auto;
  bottom:clamp(16px, 2vw, 32px);
  max-width:none;
  margin:0;
  text-align:left;
  width:auto;
}
.home-hero.v2 .copy .strapline{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(26px, 2.6vw, 42px);
  line-height:1.05;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--cd-bg);
  white-space:nowrap;
  max-width:none;
  margin:0;
  font-style:normal;
}
/* Strengthen the bottom scrim a touch since copy sits over the image */
.home-hero.v2::after{
  background:
    linear-gradient(180deg, rgba(10,10,10,0) 50%, rgba(10,10,10,0.29) 100%),
    radial-gradient(ellipse at 15% 95%, rgba(10,10,10,0.27) 0%, rgba(10,10,10,0) 55%);
}

@media (max-width: 700px){
  .home-hero.v2 .copy .strapline{font-size:clamp(18px, 5.6vw, 24px); letter-spacing:0.1em; white-space:normal;}
}

/* --- Works section (v2): near-bleed landscape rhythm --- */
.home-works-v2{
  padding:clamp(72px, 9vw, 140px) 0 clamp(72px, 9vw, 140px);
  display:flex;
  flex-direction:column;
  gap:clamp(51px, 5.6vw, 90px);
}
.home-works-v2 .works-v2-head{
  max-width:none;
  margin:0;
  padding-left:clamp(20px, 3vw, 56px);
  padding-right:clamp(20px, 3vw, 56px);
  width:100%;
}
.home-works-v2 .works-v2-head .section-index{margin-bottom:0;}
/* Home page: match the hero → first-row gap to the inter-row gap, and
   tighten the gap below the last row so it matches that rhythm too */
#works.home-works-v2{padding-top:clamp(51px, 5.6vw, 90px); padding-bottom:clamp(32px, 3.5vw, 56px);}

.home-works-v2 .works-v2-foot{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad);
  width:100%;
  text-align:center;
  /* Cancel the section's flex gap above the foot, then match the space below
     the text (the section padding-bottom) so above = below. */
  margin-top:calc(-1 * clamp(51px, 5.6vw, 90px));
  padding-top:clamp(32px, 3.5vw, 56px);
}

/* A bleed-row sits inside ~3vw side gutters by default (the "almost full-bleed" feel).
   Variants control how wide / how offset each project is. */
.bleed-row{
  display:block;
  text-decoration:none;
  color:var(--cd-ink);
  border:0;
  margin:0 clamp(20px, 3vw, 56px);
}

/* Width variants — varied so the rhythm isn't uniform */
.bleed-row.r-full{margin-left:clamp(20px, 3vw, 56px); margin-right:clamp(20px, 3vw, 56px);}
.bleed-row.r-wide{margin-left:clamp(20px, 3vw, 56px); margin-right:clamp(60px, 10vw, 180px);}
.bleed-row.r-mid {margin-left:clamp(20px, 3vw, 56px); margin-right:clamp(120px, 18vw, 360px);}
.bleed-row.r-short{margin-left:clamp(120px, 16vw, 320px); margin-right:clamp(60px, 8vw, 160px);}

/* Offset variants — push left or right for editorial asymmetry */
.bleed-row.offset-l{margin-left:clamp(20px, 3vw, 56px);}
.bleed-row.offset-r{margin-left:auto; margin-right:clamp(20px, 3vw, 56px); max-width:none;}

/* Shared image treatment */
.bleed-img{
  display:block;
  width:100%;
  margin:0;
  background:#0A0A0A center/cover no-repeat;
  overflow:hidden;
  transform:scale(1);
  transition:opacity .35s var(--ease-out), transform 1.1s var(--ease-out);
}
/* Tiles hold a real <img> (native lazy-loading + srcset-ready) and let the
   figure keep its layout role — the img just fills it, cropping like the
   background-image `cover` it replaced. */
.bleed-img img{display:block; width:100%; height:100%; object-fit:cover;}
.bleed-row:hover .bleed-img{opacity:.94;}
/* Subtle zoom on the specific image card being hovered */
.overlay-card:hover .bleed-img{transform:scale(1.035);}
@media (prefers-reduced-motion: reduce){
  .overlay-card:hover .bleed-img{transform:none;}
}

/* Caption sits under each image — eyebrow / title / meta */
.bleed-cap{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:18px;
  max-width:min(640px, 90%);
}
.bleed-cap .eye{
  font-family:var(--font-display);
  font-size:12px;
  font-weight:300;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cd-ink-soft);
}
.bleed-cap h3{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(22px, 2.2vw, 32px);
  line-height:1.05;
  letter-spacing:0.025em;
  text-transform:uppercase;
  color:var(--cd-ink);
  margin:0;
  transition:color .18s var(--ease-out);
}
.bleed-row:hover .bleed-cap h3{color:var(--cd-sage);}
.bleed-cap .meta{
  font-family:var(--font-sans);
  font-size:13px;
  color:var(--cd-ink-soft);
  margin-top:2px;
}

/* --- Paired row: image + practice-intro panel, same height --- */
.bleed-row.paired{
  display:grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap:clamp(20px, 2.4vw, 36px);
  align-items:stretch;
  margin-left:clamp(20px, 3vw, 56px);
  margin-right:clamp(20px, 3vw, 56px);
}
.bleed-row.paired .paired-image{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:var(--cd-ink);
  border:0;
  min-width:0;
  position:relative;
}
.bleed-row.paired .paired-image .bleed-img{
  aspect-ratio: 4 / 3;
  flex:1 1 auto;
  min-height:0;
  height:100%;
}
.bleed-row.paired .paired-image:hover .bleed-img{opacity:.94;}

/* --- Pair row: two images, same height, different widths --- */
.bleed-row.pair{
  display:grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap:clamp(20px, 2.4vw, 36px);
  align-items:stretch;
  margin-left:clamp(20px, 3vw, 56px);
  margin-right:clamp(20px, 3vw, 56px);
}
/* Reverse pair: narrow LEFT + wide RIGHT */
.bleed-row.pair.t-1-2{grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);}
.bleed-row.pair .pair-image{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:var(--cd-ink);
  border:0;
  min-width:0;
  position:relative;
}
.bleed-row.pair .pair-image .bleed-img{
  width:100%;
  height:100%;
  flex:1 1 auto;
}
/* The wider column drives row height via aspect-ratio; the narrower one stretches to match */
.bleed-row.pair .pair-image:first-child .bleed-img{aspect-ratio: 16 / 9;}
.bleed-row.pair .pair-image + .pair-image .bleed-img{aspect-ratio:auto;}
.bleed-row.pair.t-1-2 .pair-image:first-child .bleed-img{aspect-ratio:auto;}
.bleed-row.pair.t-1-2 .pair-image + .pair-image .bleed-img{aspect-ratio: 16 / 9;}
/* Legacy explicit width classes still work if used */
.bleed-row.pair .pair-image.w-wide .bleed-img{aspect-ratio: 16 / 9;}
.bleed-row.pair .pair-image.w-narrow .bleed-img{aspect-ratio:auto;}
.bleed-row.pair .pair-image:hover .bleed-img{opacity:.94;}

/* --- Triple row: three blocks, same height, mixed widths --- */
.bleed-row.triple{
  display:grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap:clamp(16px, 2vw, 28px);
  align-items:stretch;
  margin-left:clamp(20px, 3vw, 56px);
  margin-right:clamp(20px, 3vw, 56px);
}
.bleed-row.triple > *{min-width:0;}
/* Reversed triple: narrow LEFT + medium MIDDLE + WIDE RIGHT */
.bleed-row.triple.t-end{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 2fr);
}
.bleed-row.triple .pair-image{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:var(--cd-ink);
  border:0;
  position:relative;
}
.bleed-row.triple .pair-image .bleed-img{
  width:100%;
  height:100%;
  flex:1 1 auto;
}
/* Default triple: first child is widest and drives height */
.bleed-row.triple > :first-child .bleed-img{aspect-ratio: 4 / 3;}
.bleed-row.triple > :not(:first-child) .bleed-img{aspect-ratio:auto;}
/* Reversed triple: last child is widest and drives height */
.bleed-row.triple.t-end > :first-child .bleed-img{aspect-ratio:auto;}
.bleed-row.triple.t-end > :last-child .bleed-img{aspect-ratio: 4 / 3;}
.bleed-row.triple .pair-image:hover .bleed-img{opacity:.94;}

/* --- Overlay label: superimposed category text, bottom-left, Reason caps, contrasting --- */
.overlay-card{position:relative; overflow:hidden;}
.overlay-card .overlay-label{
  position:absolute;
  left:clamp(16px, 1.8vw, 28px);
  bottom:clamp(14px, 1.6vw, 22px);
  z-index:2;
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(14px, 1.55vw, 24px);
  line-height:1;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--cd-bg);
  text-shadow:0 1px 24px rgba(10,10,10,0.4);
  pointer-events:none;
  transition:transform .35s var(--ease-out), letter-spacing .35s var(--ease-out);
}
/* Cards without an overlay-label suppress the bottom scrim so the photo reads clean */
.overlay-card.no-label::after{display:none;}
/* Subtle bottom scrim for contrast against varied imagery */
.overlay-card::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:46%;
  background:linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.55) 100%);
  pointer-events:none;
  z-index:1;
  transition:opacity .35s var(--ease-out);
}
.overlay-card:hover .overlay-label{letter-spacing:0.06em;}
.overlay-card:hover::after{opacity:.9;}

/* The practice panel — flat neutral cream, mid-grey type
   (matches the reference: #F9F9F9 surface with #5E5E5E type) */
.practice-panel{
  --pp-surface:  #E8E8E6;   /* light neutral panel (brand --cd-rule tone) */
  --pp-ink:      #0A0A0A;   /* true black for high contrast */
  --pp-ink-soft: #5A5A5A;   /* neutral mid-grey for eyebrow / cite */
  background: var(--pp-surface);
  color:var(--pp-ink);
  padding:clamp(28px, 3vw, 52px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:clamp(24px, 3vw, 40px);
  min-height:100%;
  position:relative;
  overflow:hidden;
}
.practice-panel::after{
  /* grey corner dot removed per request */
  content:none;
}
.practice-panel .practice-eye{
  font-family:var(--font-display);
  font-size:12px;
  font-weight:300;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--pp-ink-soft);
}
.practice-panel .practice-body{
  font-family:var(--font-sans);
  font-weight:300;
  font-size:clamp(15px, 1.15vw, 18px);
  line-height:1.55;
  letter-spacing:0;
  color:var(--pp-ink);
  margin:0;
  text-wrap:pretty;
  max-width:34ch;
  font-style:normal;
}
.practice-panel.block .practice-body{
  font-size:clamp(13px, 0.95vw, 15px);
  line-height:1.55;
  max-width:none;
}
.practice-panel.block{
  padding:clamp(20px, 1.8vw, 30px);
  gap:clamp(14px, 1.6vw, 24px);
}
.practice-panel.block .practice-eye{font-size:12px; letter-spacing:.18em;}
.practice-panel .practice-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-display);
  font-size:12px;
  font-weight:300;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--pp-ink);
  text-decoration:none;
  border:0;
  border-bottom:1px solid rgba(10,10,10,.35);
  padding-bottom:8px;
  align-self:flex-start;
  transition:border-color .22s var(--ease-out), gap .22s var(--ease-out);
}
.practice-panel .practice-link:hover{border-bottom-color:var(--pp-ink); gap:18px;}
.practice-panel .practice-link svg{stroke:currentColor; transition:transform .22s var(--ease-out);}
.practice-panel .practice-link:hover svg{transform:translateX(4px);}

/* Responsive collapse for paired/pair/triple rows.
   !important because the width variants (.pair.t-1-2, .triple.t-end, .w-wide
   …) carry three classes and so out-specify this two-class rule — and a media
   query adds no specificity. Without it those rows kept their desktop columns
   at every width: a triple stayed 3-up on a phone, about 100px per tile.
   Verified 2026-07-29 at 483px; the plain rows collapsed, the variants did not. */
@media (max-width: 900px){
  .bleed-row.paired,
  .bleed-row.pair,
  .bleed-row.triple{
    grid-template-columns:1fr !important;
    gap:clamp(16px, 4vw, 28px);
  }
  .bleed-row.paired .paired-image .bleed-img,
  .bleed-row.pair .pair-image .bleed-img,
  .bleed-row.triple .pair-image .bleed-img{aspect-ratio:16/10 !important; height:auto;}
  .practice-panel{min-height:auto; padding:clamp(28px, 6vw, 44px);}
  .practice-panel.block{padding:clamp(24px, 5vw, 36px);}
  .overlay-card .overlay-label{font-size:clamp(14px, 4vw, 20px);}
}

/* On smaller screens, collapse all offset/width variants to a uniform near-bleed */
@media (max-width: 900px){
  .bleed-row.r-full,
  .bleed-row.r-wide,
  .bleed-row.r-mid,
  .bleed-row.r-short,
  .bleed-row.offset-l,
  .bleed-row.offset-r{
    margin-left:clamp(16px, 4vw, 32px);
    margin-right:clamp(16px, 4vw, 32px);
  }
  .bleed-row .bleed-img{aspect-ratio:16/10 !important;}
}

/* Subtle image reveal for v2 rows */
.bleed-row.fade-up{opacity:0; transform:translateY(20px);}
.bleed-row.fade-up.in{opacity:1; transform:translateY(0); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out);}
@media (prefers-reduced-motion: reduce){
  .bleed-row.fade-up{opacity:1; transform:none;}
}

/* =====================================================
   Placeholder ("holding") images — same chrome as photos,
   subtle warm-grey gradient + diagonal stripe + small tag.
   ===================================================== */
.bleed-img.placeholder{
  background:linear-gradient(135deg, #6B6864 0%, #4A4845 100%);
  position:relative;
  overflow:hidden;
}
.bleed-img.placeholder::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(45deg,
    rgba(255,255,255,0.04) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,0.04) 50%,
    rgba(255,255,255,0.04) 75%, transparent 75%);
  background-size:28px 28px;
  pointer-events:none;
}
/* Tonal variants so a row of placeholders isn't visually flat */
.bleed-img.ph-tone-a{background:linear-gradient(135deg, #6F6B66 0%, #45423E 100%);}
.bleed-img.ph-tone-b{background:linear-gradient(135deg, #5C5A57 0%, #3B3937 100%);}
.bleed-img.ph-tone-c{background:linear-gradient(135deg, #7A7672 0%, #504D49 100%);}

.bleed-img.placeholder .ph-tag{
  position:absolute;
  top:clamp(14px, 1.4vw, 22px);
  right:clamp(14px, 1.4vw, 22px);
  z-index:1;
  font-family:ui-monospace, "JetBrains Mono", monospace;
  font-size:11px;
  letter-spacing:0.04em;
  color:rgba(250,250,249,.7);
  text-transform:none;
  background:rgba(10,10,10,0.22);
  padding:5px 9px;
  border:1px solid rgba(250,250,249,.18);
  pointer-events:none;
}

/* =====================================================
   Quote panel — same gradient as practice panel, used for pull-quote
   ===================================================== */
.practice-panel.quote{
  justify-content:space-between;
}
.practice-panel .quote-body{
  font-family:var(--font-sans);
  font-weight:300;
  font-style:italic;
  font-size:clamp(15px, 1.15vw, 19px);
  line-height:1.5;
  letter-spacing:0;
  color:var(--pp-ink);
  margin:0;
  max-width:none;
  text-wrap:pretty;
}
.practice-panel.block .quote-body{
  font-size:clamp(14px, 1.05vw, 17px);
  line-height:1.55;
}
.practice-panel .practice-cite{
  font-family:var(--font-display);
  font-size:12px;
  font-weight:300;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--pp-ink-soft);
  margin-top:auto;
}

/* =====================================================
   Services section — reduce the "Six services" heading by ~1/3
   ===================================================== */
.home-services .svc-header h2.display{
  font-size:clamp(22px, 2.8vw, 42px);
  line-height:1.06;
  letter-spacing:0.025em;
}

/* Single-column variant of the hero-grids on inner pages */
.svc-hero-single, .about-hero-single, .works-hero-single{
  display:block;
  max-width:78ch;
}

/* =====================================================
   Shared .page-hero — image-led page header on inner pages
   Same side gutters as the r-full image on home; title and
   eyebrow overlay bottom-left like the home strapline.
   ===================================================== */
.page-hero{
  position:relative;
  margin:0 clamp(20px, 3vw, 56px);
  height:min(62vh, 560px);
  min-height:340px;
  overflow:hidden;
  background:#0A0A0A;
}
.page-hero .img{
  position:absolute; inset:0;
  background-position:center; background-size:cover;
  transform:scale(1.04); opacity:0;
  transition:transform 1.6s var(--ease-out), opacity 1.2s var(--ease-out);
}
.page-hero.in .img{transform:scale(1); opacity:1;}
.page-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,0) 50%, rgba(10,10,10,0.55) 100%),
             radial-gradient(ellipse at 15% 95%, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0) 55%);
  pointer-events:none;
}
.page-hero .copy{
  position:absolute; left:clamp(24px, 3vw, 48px); right:clamp(24px, 3vw, 48px);
  bottom:clamp(20px, 2.4vw, 36px); z-index:2; color:var(--cd-bg);
}
.page-hero .copy .eyebrow{
  display:block; margin-bottom:14px;
  font-family:var(--font-display); font-weight:300;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(250,250,249,.82);
  opacity:0; transition:opacity 1s var(--ease-out) .2s;
}
.page-hero.in .copy .eyebrow{opacity:1;}
.page-hero .copy h1{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(26px, 2.6vw, 42px);
  line-height:1.05; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--cd-bg); margin:0;
  white-space:nowrap;
  opacity:0; transform:translateY(8px);
  transition:opacity 1s var(--ease-out) .3s, transform 1s var(--ease-out) .3s;
}
.page-hero.in .copy h1{opacity:1; transform:translateY(0);}
@media (max-width: 900px){
  .page-hero{margin:0 clamp(16px, 4vw, 32px); height:min(56vh, 460px); min-height:280px;}
  .page-hero .copy h1{font-size:clamp(18px, 5.6vw, 24px); letter-spacing:0.1em; white-space:normal;}
}
@media (prefers-reduced-motion: reduce){
  .page-hero .img, .page-hero .copy h1, .page-hero .copy .eyebrow{transition:none; opacity:1; transform:none;}
}

/* =====================================================
   Shared .surface-panel — the cream block treatment used
   on Selected Works text panels: #E8E8E6 with black type.
   Use anywhere a calm text panel sits in a layout.
   ===================================================== */
.surface-panel{
  background:#E8E8E6;
  color:var(--cd-ink);
  padding:clamp(28px, 3.5vw, 56px);
  display:flex; flex-direction:column;
  gap:clamp(16px, 1.6vw, 24px);
  position:relative;
}
.surface-panel .panel-eye{
  font-family:var(--font-display); font-weight:300;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cd-ink-soft);
}
.surface-panel .panel-body{
  font-family:var(--font-sans); font-weight:300;
  font-size:clamp(15px, 1.05vw, 17px);
  line-height:1.55; color:var(--cd-ink);
  margin:0; max-width:46ch; text-wrap:pretty;
}
.surface-panel .panel-link{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-display); font-size:12px; font-weight:300;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--cd-ink); text-decoration:none; border:0;
  border-bottom:1px solid rgba(10,10,10,.35);
  padding-bottom:8px; align-self:flex-start; margin-top:8px;
  transition:border-color .22s var(--ease-out), gap .22s var(--ease-out);
}
.surface-panel .panel-link:hover{border-bottom-color:var(--cd-ink); gap:18px;}
.surface-panel .panel-link svg{stroke:currentColor; transition:transform .22s var(--ease-out);}
.surface-panel .panel-link:hover svg{transform:translateX(4px);}

/* When a panel pairs with body content in a 2-up layout */
.panel-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:clamp(24px, 3vw, 56px);
  align-items:stretch;
  margin:0 clamp(20px, 3vw, 56px);
}
.panel-row .panel-image{
  background:#0A0A0A; overflow:hidden;
  background-position:center; background-size:cover;
  min-height:320px;
}
@media (max-width: 900px){
  .panel-row{grid-template-columns:1fr; margin:0 clamp(16px, 4vw, 32px);}
  .panel-row .panel-image{min-height:240px; aspect-ratio:16/10;}
}

/* =====================================================
   Project-detail (pd-) hero — give it the same gutter as
   page-hero so it doesn't run all the way to the page edge
   ===================================================== */
.pd-hero{
  margin:0 clamp(20px, 3vw, 56px) !important;
  height:min(72vh, 720px) !important;
  background-position:center !important; background-size:cover !important;
}
@media (max-width: 900px){
  .pd-hero{margin:0 clamp(16px, 4vw, 32px) !important; height:min(54vh, 460px) !important;}
}



/* ── Touch targets (≤800px) ──
   On a phone these are tapped, not clicked. The links below sat at 27-34px
   high; 44px is the practical minimum for a thumb. The extra height goes on
   as padding-TOP so the underline stays where the design puts it, directly
   under the text, and only the invisible hit area grows. Kept at the END of
   the stylesheet deliberately: `.ftr a` further up has equal specificity, so
   an earlier copy of this block loses on source order.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 800px){
  a.cta, .practice-link{padding-top:17px;}
  .ftr a{padding:12px 0;}
}

/* The hero strapline is nowrap by design so it reads as one line. Measured at
   780px it fitted its container with 0px to spare — one longer word and it
   clips. Below 900px (where the layout is already narrowing) let it wrap
   instead. Below 700px an earlier rule also drops the type size. */
@media (max-width: 900px){
  .home-hero .copy .strapline{white-space:normal;}
}

/* ═══════════════════ MOBILE STRUCTURE (≤800px) ═══════════════════
   The phone is not a narrow desktop. Two places where collapsing the desktop
   composition produced something worse than a different arrangement would.
   ───────────────────────────────────────────────────────────────── */

/* 1. Home page reading order: hero → the practice → see our work → services.
   Collapsed to one column, the works grid became seven near-identical 209px
   bands — it read as a nav menu of images and duplicated Selected Works
   clumsily. The desktop composition comes from the varied row widths, which a
   single column throws away. So on a phone the images step aside and the
   panels carry the section, ending on the link to the full portfolio. The
   hidden tiles are lazy, so a phone does not download them either. */
@media (max-width: 800px){
  body[data-page="home"] .home-works-v2 > a.bleed-row.r-full,
  body[data-page="home"] .home-works-v2 > .bleed-row.pair{display:none;}
  body[data-page="home"] .home-works-v2 .bleed-row.triple .pair-image{display:none;}
  body[data-page="home"] .home-works-v2{gap:clamp(28px, 6vw, 44px);}
}

/* 2. Footer. Two columns at phone width left the contact column about 180px
   wide, which clips the email address (the string alone is 235px at 14px).
   One column per block instead, and the address may break mid-string as a
   last resort so it can never be cut off again. */
@media (max-width: 640px){
  .ftr-grid{grid-template-columns:1fr; gap:clamp(28px, 7vw, 40px);}
  .ftr a[href^="mailto"]{overflow-wrap:anywhere;}
  .ftr .arb-logo{width:180px;}
}

/* ── Hero slide 1: the LCP image, sized by viewport ──
   srcset only works on <img>, and the slides are cross-fading background
   layers. image-set() is the CSS analogue but its usable descriptors are
   RESOLUTION (1x/2x), which selects on pixel density — backwards here, since a
   phone has a small viewport and often a 3x screen. So the choice is made by
   width with media queries instead. Slide 1's URL lives here rather than inline
   on the element so these rules can override it; the <head> preload carries
   matching `media` attributes. Keep the 800px boundary in step with them.
   Slides 2-5 are picked by the carousel script from data-bg. */
.home-hero .hero-slide.slide-1{background-image:url('assets/img/hero/kiplin-hall.jpg');}
@media (max-width: 800px){
  .home-hero .hero-slide.slide-1{background-image:url('assets/img/hero/kiplin-hall-1200.jpg');}
}

/* Visually hidden but read by screen readers and counted by search engines.
   Used for the Selected Works h1: the page is a bare tile grid by design and
   had no heading at all, which is an accessibility defect as much as an SEO
   one — a page should announce what it is. */
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;}