/* ============================================================
   TREASURE IN THE DETAIL
   Boutique Interior Design Studio, Mesa, Arizona
   Premium design system, hand-built. No frameworks.
   ============================================================ */

@import url('../fonts/fonts.css');

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand neutrals (sampled from the original brand palette) */
  --canvas:      #fdfcf9;   /* warm white page */
  --paper:       #f3f0e9;   /* eggshell sections */
  --paper-2:     #ece7dc;   /* deeper sand */
  --greige:      #bdb8ab;   /* taupe accent */
  --greige-deep: #9c9483;   /* deep greige */
  --ink:         #2b2a26;   /* primary text */
  --ink-soft:    #54514a;   /* secondary text */
  --charcoal:    #16140f;   /* footer / dark sections */
  --charcoal-2:  #211e18;
  /* Premium accent introduced with restraint: antique brass */
  --brass:       #a3895d;
  --brass-deep:  #846c43;
  --brass-soft:  #c4ac82;

  --line:        rgba(43,42,38,.16);
  --line-soft:   rgba(43,42,38,.09);
  --line-light:  rgba(255,255,255,.18);

  /* Type */
  --display: 'Tobias', 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Metric', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Rhythm */
  --pad-x: clamp(1.4rem, 5vw, 7rem);
  --sec-y: clamp(5rem, 11vw, 11rem);
  --maxw: 1480px;
  --maxw-text: 760px;

  /* Motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1.02rem, .55rem + .55vw, 1.18rem);
  line-height: 1.78;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
::selection { background: var(--brass); color: #fff; }

/* ---------- 3. Typographic primitives ---------- */
.display {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: .005em;
  color: var(--ink);
}
h1.display, .h1 { font-size: clamp(2.6rem, 1.2rem + 5.4vw, 6.6rem); }
h2.display, .h2 { font-size: clamp(2.1rem, 1.1rem + 3.6vw, 4.3rem); line-height: 1.06; }
h3.display, .h3 { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.9rem); line-height: 1.12; }

.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--brass-deep);
  display: inline-flex;
  align-items: center;
  gap: .9rem;
}
.eyebrow::before {
  content: "";
  width: clamp(22px, 4vw, 46px);
  height: 1px;
  background: var(--brass);
  display: inline-block;
}
.eyebrow.center::after {
  content: "";
  width: clamp(22px, 4vw, 46px);
  height: 1px;
  background: var(--brass);
  display: inline-block;
}
.eyebrow.no-rule::before { display: none; }

.lede {
  font-size: clamp(1.18rem, .8rem + 1vw, 1.5rem);
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 300;
}
.muted { color: var(--ink-soft); }
.serif-quote {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  line-height: 1.2;
}

/* index numerals for editorial feel */
.index-num {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1rem,.9rem + .4vw,1.25rem);
  color: var(--brass);
  letter-spacing: .04em;
}

/* ---------- 4. Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
.section { padding-block: var(--sec-y); }
.center { text-align: center; }
.measure { max-width: var(--maxw-text); }
.mx-auto { margin-inline: auto; }
.divider { height: 1px; background: var(--line); border: 0; }
.spacer-s { height: clamp(1rem,3vw,2rem); }
.spacer { height: clamp(1.6rem,4vw,3rem); }
.grid { display: grid; gap: clamp(1.4rem, 3vw, 3rem); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.items-center { align-items: center; }

/* ---------- 5. Buttons ---------- */
.btn {
  --bg: var(--ink); --fg: var(--canvas);
  position: relative;
  display: inline-flex; align-items: center; gap: .8em;
  padding: 1.05em 2.1em;
  font-family: var(--sans);
  font-size: .76rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--fg);
  background: var(--bg);
  border-radius: 2px;
  overflow: hidden;
  isolation: isolate;
  transition: color .5s var(--ease), transform .5s var(--ease);
  border: 1px solid var(--bg);
}
.btn::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background: var(--brass);
  transform: translateY(101%);
  transition: transform .55s var(--ease);
}
.btn:hover { color:#fff; }
.btn:hover::before { transform: translateY(0); }
.btn .arr { transition: transform .5s var(--ease); }
.btn:hover .arr { transform: translateX(5px); }

.btn-ghost {
  --bg: transparent; --fg: var(--ink);
  background: transparent; color: var(--fg);
  border: 1px solid var(--line);
}
.btn-ghost::before { background: var(--ink); }
.btn-ghost:hover { color: var(--canvas); border-color: var(--ink); }

.btn-light { --bg: var(--canvas); --fg: var(--ink); }
.btn-light::before { background: var(--brass); }
.btn-light:hover { color:#fff; }

.btn-outline-light {
  background: transparent; color: #fff; border: 1px solid var(--line-light);
}
.btn-outline-light::before { background: var(--canvas); }
.btn-outline-light:hover { color: var(--ink); border-color: var(--canvas); }

/* text link with animated underline */
.link-u {
  position: relative;
  font-weight: 500; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); padding-bottom: .35em; display: inline-flex; gap: .6em; align-items:center;
}
.link-u::after {
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background: currentColor; transform: scaleX(1); transform-origin: right;
  transition: transform .55s var(--ease);
}
.link-u:hover::after { transform: scaleX(0); transform-origin: left; }
.link-u .arr { transition: transform .5s var(--ease); }
.link-u:hover .arr { transform: translateX(5px); }
.link-u.brass { color: var(--brass-deep); }

/* ---------- 6. Header / Nav ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: clamp(1rem,2.2vw,1.7rem) var(--pad-x);
  transition: background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header.solid {
  background: rgba(253,252,249,.9);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 1px 0 var(--line-soft);
  padding-block: clamp(.7rem,1.4vw,1rem);
}
.nav-left, .nav-right { display: flex; align-items: center; gap: clamp(1.2rem,2vw,2.4rem); }
.nav-right { justify-content: flex-end; }
.nav-link {
  font-size: .82rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); position: relative; padding-block: .3em;
  transition: color .4s var(--ease);
}
.nav-link::after {
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background: var(--brass);
  transition: width .45s var(--ease);
}
.nav-link:hover { color: var(--brass-deep); }
.nav-link:hover::after { width:100%; }
.nav-link.active::after { width:100%; }

.brand {
  justify-self: center;
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  font-family: var(--display); font-weight: 300; line-height: 1;
  text-align:center;
}
.brand .brand-name { font-size: clamp(1.1rem,1.4vw,1.5rem); letter-spacing: .04em; }
.brand .brand-sub { font-family: var(--sans); font-size: .56rem; letter-spacing: .42em; text-transform: uppercase; color: var(--brass-deep); }

/* header over dark hero (top of page) */
.site-header.on-hero:not(.solid) .nav-link,
.site-header.on-hero:not(.solid) .brand { color: #fff; }
.site-header.on-hero:not(.solid) .brand .brand-sub { color: var(--brass-soft); }
.site-header.on-hero:not(.solid) .nav-link::after { background: var(--brass-soft); }
.site-header.on-hero:not(.solid) .burger span { background:#fff; }
.site-header.on-hero:not(.solid) .nav-cta { color:#fff; border-color: rgba(255,255,255,.5); }

.nav-cta {
  font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid var(--line); padding: .75em 1.4em; border-radius: 2px; color: var(--ink);
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.nav-cta:hover { background: var(--ink); color: var(--canvas); border-color: var(--ink); }

/* hamburger (mobile) */
.burger { display:none; flex-direction: column; gap: 5px; width: 30px; padding: 6px 0; }
.burger span { width: 26px; height: 1.5px; background: var(--ink); transition: transform .4s var(--ease), opacity .3s; }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 200;
  background: var(--charcoal); color: #fff;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.6rem;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}
.drawer.open { opacity: 1; visibility: visible; transform: none; }
.drawer a { font-family: var(--display); font-weight: 300; font-size: clamp(1.8rem,7vw,2.6rem); color:#fff; }
.drawer a .num { font-family: var(--sans); font-size: .8rem; color: var(--brass-soft); letter-spacing:.2em; margin-right:.8rem; vertical-align: middle; }
.drawer .close { position: absolute; top: 1.6rem; right: var(--pad-x); font-size: 2rem; color:#fff; line-height:1; }
.drawer .drawer-foot { position:absolute; bottom: 2.2rem; display:flex; gap:1.6rem; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: var(--greige); }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  color: #fff; overflow: hidden;
  padding-bottom: clamp(3.5rem, 8vh, 7rem);
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 18s var(--ease-soft) forwards; }
.hero::after {
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(to top, rgba(8,7,5,.72) 0%, rgba(8,7,5,.28) 38%, rgba(8,7,5,.18) 70%, rgba(8,7,5,.42) 100%);
}
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
.hero-inner { width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--pad-x); }
.hero h1 { color:#fff; max-width: 16ch; }
.hero .hero-sub { max-width: 46ch; margin-top: 1.6rem; color: rgba(255,255,255,.9); font-weight:300; }
.hero .eyebrow { color: var(--brass-soft); }
.hero .eyebrow::before { background: var(--brass-soft); }
.hero-cta { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 1rem; }

.scroll-cue {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.75);
}
.scroll-cue .bar { width:1px; height: 46px; background: rgba(255,255,255,.5); position: relative; overflow:hidden; }
.scroll-cue .bar::after { content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:#fff; animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0%{transform:translateY(-100%);} 60%,100%{transform:translateY(300%);} }

/* page hero (interior pages) */
.page-hero {
  position: relative; min-height: 72svh; display:flex; align-items:flex-end; color:#fff; overflow:hidden;
  padding-bottom: clamp(3rem,7vh,6rem); padding-top: 8rem;
}
.page-hero .hero-media img { animation: kenburns 20s var(--ease-soft) forwards; }
.page-hero::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(to top, rgba(8,7,5,.7), rgba(8,7,5,.2) 55%, rgba(8,7,5,.45)); }
.page-hero h1 { color:#fff; max-width: 18ch; }
.page-hero .eyebrow { color: var(--brass-soft); }
.page-hero .eyebrow::before { background: var(--brass-soft); }
.page-hero .hero-sub { color: rgba(255,255,255,.9); max-width: 52ch; margin-top: 1.3rem; font-weight: 300; }

/* ---------- 8. Image treatments ---------- */
.fig { position: relative; overflow: hidden; background: var(--paper-2); }
.fig img { width:100%; height:100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.fig.zoom:hover img { transform: scale(1.05); }
.ratio-4-5 { aspect-ratio: 4/5; }
.ratio-3-4 { aspect-ratio: 3/4; }
.ratio-1-1 { aspect-ratio: 1/1; }
.ratio-3-2 { aspect-ratio: 3/2; }
.ratio-16-9 { aspect-ratio: 16/9; }
.ratio-5-7 { aspect-ratio: 5/7; }

/* reveal mask for images */
.reveal-img { position: relative; overflow: hidden; }
.reveal-img::after {
  content:""; position:absolute; inset:0; background: var(--canvas); transform-origin: right;
  transform: scaleX(0); transition: transform 1.05s var(--ease);
}
.reveal-img.in img { transform: scale(1); }
.reveal-img img { transform: scale(1.12); transition: transform 1.4s var(--ease); }

/* ---------- 9. Reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-img img,.reveal-img::after,.hero-media img { transition:none!important; animation:none!important; opacity:1!important; transform:none!important; }
}

/* ---------- 10. Editorial split rows ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,6rem); align-items: center; }
.split.wide-img { grid-template-columns: 1.15fr .85fr; }
.split .col-text { max-width: 52ch; }
.split-stack { display:grid; gap: 1rem; }

/* overlap composition */
.compo { position: relative; }
.compo .c-main { width: 82%; }
.compo .c-sub { position: absolute; width: 46%; bottom: -12%; right: 0; box-shadow: 0 30px 60px -30px rgba(0,0,0,.4); border: 6px solid var(--canvas); }

/* ---------- 11. Marquee (press) ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marquee-track { display: flex; align-items: center; gap: clamp(2.6rem,6vw,6rem); width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee img { height: clamp(26px,3.4vw,42px); width:auto; opacity: .62; filter: grayscale(1) brightness(.35); transition: opacity .4s, filter .4s; }
.marquee img:hover { opacity: 1; filter: grayscale(0) brightness(1); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 12. Cards / grids ---------- */
.card-img-cap { display: block; }
.card-img-cap .cap { margin-top: 1.1rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.card-img-cap .cap .t { font-family: var(--display); font-weight: 300; font-size: clamp(1.3rem,1rem+.8vw,1.7rem); line-height: 1.1; }
.card-img-cap .cap .m { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.card-img-cap .fig { transition: box-shadow .6s var(--ease); }
.card-img-cap:hover .fig { box-shadow: 0 36px 60px -34px rgba(20,18,12,.5); }

/* portfolio grid (masonry-ish via varying spans) */
.pf-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem,2.2vw,2.4rem) clamp(1rem,2vw,2rem); }
.pf-item { position: relative; overflow: hidden; }
.pf-item .fig { width:100%; height:100%; }
.pf-item .pf-cap {
  position: absolute; inset: auto 0 0 0; padding: clamp(1.1rem,2vw,1.8rem);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
  color: #fff; z-index: 2;
  background: linear-gradient(to top, rgba(10,8,5,.7), rgba(10,8,5,0));
  transform: translateY(8px); opacity: 0; transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.pf-item:hover .pf-cap { opacity: 1; transform: none; }
.pf-item .pf-cap .t { font-family: var(--display); font-weight: 300; font-size: clamp(1.3rem,1rem+1vw,2rem); line-height: 1.05; }
.pf-item .pf-cap .v { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; padding-bottom:.3em; }
.pf-item .fig img { transition: transform 1.2s var(--ease); }
.pf-item:hover .fig img { transform: scale(1.06); }
.pf-item .pf-num { position:absolute; top: 1rem; left: 1.1rem; z-index:2; color:#fff; font-family: var(--display); font-size: .9rem; opacity:.85; mix-blend-mode: difference; }
.span-6 { grid-column: span 6; } .span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; } .span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
.tall { aspect-ratio: 4/5; } .wide { aspect-ratio: 3/2; } .reg { aspect-ratio: 1/1; } .portr { aspect-ratio: 3/4; }

/* ---------- 13. Stats / list ---------- */
.stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.stat .n { font-family: var(--display); font-weight: 300; font-size: clamp(2.6rem,1.5rem+3vw,4.6rem); line-height: 1; color: var(--ink); }
.stat .l { font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin-top: .7rem; }
.tick-list { display: grid; gap: .85rem; }
.tick-list li { position: relative; padding-left: 1.9rem; line-height: 1.5; }
.tick-list li::before { content:""; position:absolute; left:0; top:.62em; width: 8px; height: 8px; border:1px solid var(--brass); transform: rotate(45deg); }

/* ---------- 14. Service blocks ---------- */
.svc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: center; padding-block: clamp(2.5rem,6vw,5rem); border-top: 1px solid var(--line); }
.svc:last-child { border-bottom: 1px solid var(--line); }
.svc .svc-index { display:flex; align-items: baseline; gap: 1rem; margin-bottom: 1.2rem; }
.svc h3 { margin-bottom: 1rem; }
.svc .price { font-family: var(--display); font-style: italic; font-size: 1.3rem; color: var(--brass-deep); margin-top: 1.2rem; }
.svc .svc-media { aspect-ratio: 4/3; }

/* ---------- 15. Testimonials ---------- */
.quote-slider { position: relative; }
.quote-slide { display: none; }
.quote-slide.active { display: block; animation: fadeUp .8s var(--ease); }
@keyframes fadeUp { from { opacity:0; transform: translateY(14px);} to { opacity:1; transform:none; } }
.quote-slide blockquote { font-family: var(--display); font-weight: 300; font-size: clamp(1.5rem,1rem+1.9vw,2.7rem); line-height: 1.28; color: var(--ink); }
.quote-slide .who { margin-top: 1.8rem; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-deep); }
.quote-slide .who span { color: var(--ink-soft); }
.q-nav { display:flex; gap: 1rem; margin-top: 2.4rem; align-items:center; }
.q-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--greige); transition: background .4s, transform .4s; }
.q-dot.active { background: var(--brass); transform: scale(1.4); }
.q-arrows { display:flex; gap:.5rem; margin-left:auto; }
.q-arrows button { width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; display:grid; place-items:center; transition: background .4s, color .4s, border-color .4s; }
.q-arrows button:hover { background: var(--ink); color: var(--canvas); border-color: var(--ink); }

/* big mark watermark */
.mark-wm { font-family: var(--display); font-weight:300; font-style: italic; color: var(--brass); opacity: .5; }

/* ---------- 16. Dark feature band ---------- */
.band-dark { background: var(--charcoal); color: #fff; }
.band-dark .eyebrow { color: var(--brass-soft); }
.band-dark .eyebrow::before { background: var(--brass-soft); }
.band-dark .display { color: #fff; }
.band-dark .muted { color: rgba(255,255,255,.72); }
.band-paper { background: var(--paper); }
.band-sand { background: var(--paper-2); }

/* ---------- 17. Newsletter ---------- */
.news { display: grid; gap: 1rem; max-width: 520px; }
.field { display: flex; border-bottom: 1px solid var(--line-light); }
.band-dark .field { border-color: rgba(255,255,255,.28); }
.field input {
  flex: 1; background: transparent; border: 0; padding: .9em 0; color: inherit;
  font-family: var(--sans); font-size: 1rem; letter-spacing: .01em;
}
.field input::placeholder { color: rgba(255,255,255,.5); }
.field button { padding: 0 .4em; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-soft); }
.field input:focus { outline: none; }

/* ---------- 18. Footer ---------- */
.site-footer { background: var(--charcoal); color: rgba(255,255,255,.8); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: clamp(2rem,4vw,4rem); padding-block: clamp(4rem,8vw,7rem); }
.footer-brand .display { color:#fff; font-size: clamp(1.8rem,1.2rem+1.6vw,2.6rem); }
.footer-tag { color: var(--greige); margin-top: 1rem; max-width: 30ch; font-size: .98rem; }
.foot-col h4 { font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--brass-soft); margin-bottom: 1.4rem; font-weight: 500; }
.foot-col ul { display: grid; gap: .8rem; }
.foot-col a { color: rgba(255,255,255,.78); font-size: .96rem; transition: color .35s, padding-left .35s; }
.foot-col a:hover { color:#fff; padding-left: .35rem; }
.foot-contact { display:grid; gap:.9rem; font-size: .96rem; color: rgba(255,255,255,.78); }
.foot-contact a:hover { color: var(--brass-soft); }
.social { display:flex; gap: 1rem; margin-top: 1.6rem; }
.social a { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; display:grid; place-items:center; transition: background .4s, border-color .4s, color .4s; }
.social a:hover { background: var(--brass); border-color: var(--brass); color: var(--charcoal); }
.social svg { width: 17px; height: 17px; }
.footer-bottom { display:flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items:center; padding-block: 1.8rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .8rem; letter-spacing: .04em; color: var(--greige); }
.footer-bottom a:hover { color:#fff; }

/* ---------- 19. CTA strip ---------- */
.cta-strip { position: relative; overflow: hidden; color:#fff; text-align:center; }
.cta-strip .hero-media img { animation: none; }
.cta-strip::after { content:""; position:absolute; inset:0; z-index:-1; background: rgba(12,10,7,.6); }
.cta-strip .display { color:#fff; }

/* ---------- 20. Misc ---------- */
.kicker-row { display:flex; align-items:center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; margin-bottom: clamp(2rem,4vw,3.4rem); }
.pill { display:inline-block; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color: var(--brass-deep); border:1px solid var(--line); padding:.5em 1em; border-radius: 100px; }
.note { font-size: .82rem; color: var(--ink-soft); font-style: italic; }
.text-brass { color: var(--brass-deep); }
.bg-canvas { background: var(--canvas); }
.to-top { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 90; width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: var(--canvas); display:grid; place-items:center; opacity:0; visibility:hidden; transform: translateY(10px); transition: all .4s var(--ease); }
.to-top.show { opacity:1; visibility:visible; transform:none; }

/* ---------- 21. Responsive ---------- */
@media (max-width: 1024px){
  .footer-top { grid-template-columns: 1fr 1fr; }
  .compo .c-sub { position: static; width: 60%; margin-top: -18%; margin-left: auto; }
}
@media (max-width: 860px){
  .nav-left, .nav-right .nav-link { display: none; }
  .nav-right { gap: 1rem; }
  .burger { display: flex; }
  .site-header { grid-template-columns: auto 1fr auto; }
  .brand { justify-self: start; }
  .split, .svc, .stat-row.to-stack { grid-template-columns: 1fr; }
  .svc.flip .svc-media { order: -1; }
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr 1fr; }
  .pf-item.span-6,.pf-item.span-4,.pf-item.span-5,.pf-item.span-7,.pf-item.span-8 { grid-column: span 6; }
  .stat-row { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 560px){
  .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .pf-item.span-6,.pf-item.span-4,.pf-item.span-5,.pf-item.span-7,.pf-item.span-8 { grid-column: span 12; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; }
  .q-arrows { display:none; }
  .pf-item .pf-cap { opacity:1; transform:none; }
}

/* ============================================================
   22. Page-specific components
   ============================================================ */

/* --- Team --- */
.founder { display:grid; grid-template-columns: .82fr 1.18fr; gap: clamp(2rem,5vw,5.5rem); align-items:center; }
.founder .f-media { aspect-ratio: 4/5; }
.founder .f-role { margin-bottom: 1rem; }
.team-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.6rem,3vw,3rem) clamp(1.4rem,2.4vw,2.6rem); }
.member .m-media { aspect-ratio: 3/4; margin-bottom: 1.3rem; }
.member .m-name { font-family: var(--display); font-weight:300; font-size: clamp(1.4rem,1rem+1vw,1.9rem); line-height:1.05; }
.member .m-role { font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color: var(--brass-deep); margin:.55rem 0 1rem; }
.member .m-bio { font-size: .98rem; line-height:1.66; color: var(--ink-soft); }
.member.lead { grid-column: span 1; }

/* --- Press grid (static) --- */
.press-grid { display:grid; grid-template-columns: repeat(8,1fr); gap: clamp(1.4rem,3vw,3rem); align-items:center; }
.press-grid img { height: clamp(30px,3.6vw,52px); width:100%; object-fit:contain; opacity:.6; filter: grayscale(1) brightness(.3); transition: opacity .4s, filter .4s; }
.press-grid img:hover { opacity:1; filter:none; }

/* --- Services detail --- */
.svc .includes { margin-top: 1.6rem; }
.svc .includes h4 { font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color: var(--ink-soft); margin-bottom: 1rem; }
.svc .inc-cols { columns: 2; column-gap: 2rem; }
.svc .inc-cols li { break-inside: avoid; }
@media (max-width:560px){ .svc .inc-cols { columns:1; } }

/* --- FAQ --- */
.faq { max-width: 880px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { list-style:none; cursor:pointer; padding: 1.5rem 3rem 1.5rem 0; position: relative;
  font-family: var(--display); font-weight:300; font-size: clamp(1.25rem,1rem+.8vw,1.7rem); line-height:1.2; color: var(--ink); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:.2rem; top:50%; transform: translateY(-50%); font-family: var(--sans); font-weight:300; font-size:1.6rem; color: var(--brass); transition: transform .4s var(--ease); }
.faq details[open] summary::after { content:"–"; }
.faq .faq-a { padding: 0 3rem 1.7rem 0; color: var(--ink-soft); max-width: 70ch; }
.faq details[open] .faq-a { animation: fadeUp .6s var(--ease); }

/* --- Journal --- */
.journal-lead { display:grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem,5vw,5rem); align-items:center; }
.journal-lead .jl-media { aspect-ratio: 16/11; }
.post-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(2rem,4vw,3.4rem) clamp(1.6rem,3vw,2.6rem); }
.post .p-media { aspect-ratio: 4/3; margin-bottom: 1.3rem; }
.post .p-meta { font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color: var(--brass-deep); margin-bottom:.8rem; }
.post .p-title { font-family: var(--display); font-weight:300; font-size: clamp(1.4rem,1rem+1vw,1.95rem); line-height:1.12; margin-bottom:.9rem; }
.post .p-ex { font-size:.98rem; color: var(--ink-soft); line-height:1.65; margin-bottom:1.1rem; }
.post a.p-link { font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: var(--ink); border-bottom:1px solid var(--brass); padding-bottom:.25em; transition: color .35s; }
.post:hover a.p-link { color: var(--brass-deep); }

/* --- Contact --- */
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2.4rem,5vw,6rem); align-items:start; }
.info-block { margin-bottom: 2.6rem; }
.info-block h3 { font-family: var(--display); font-weight:300; font-size: clamp(1.4rem,1rem+1vw,2rem); margin-bottom:.7rem; }
.info-block .label { font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color: var(--brass-deep); margin-bottom:.9rem; }
.info-block address { font-style: normal; line-height: 1.8; color: var(--ink-soft); }
.form-card { background: var(--canvas); border: 1px solid var(--line); padding: clamp(1.8rem,4vw,3rem); border-radius: 3px; }
.band-paper .form-card { background:#fff; }
.f-row { display:grid; grid-template-columns:1fr 1fr; gap: 1.2rem; }
.f-field { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.3rem; }
.f-field label { font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color: var(--ink-soft); }
.f-field input, .f-field textarea, .f-field select {
  font-family: var(--sans); font-size:1rem; color: var(--ink); background: var(--canvas);
  border: 1px solid var(--line); border-radius: 2px; padding: .85em 1em; transition: border-color .35s;
}
.band-paper .f-field input, .band-paper .f-field textarea, .band-paper .f-field select { background:#fdfcfa; }
.f-field input:focus, .f-field textarea:focus, .f-field select:focus { outline:none; border-color: var(--brass); }
.f-field textarea { resize: vertical; min-height: 130px; }
.form-note { background: var(--paper); border-left: 3px solid var(--brass); padding: 1rem 1.2rem; font-size:.95rem; color: var(--ink); margin-top:1rem; }
@media (max-width:860px){
  .contact-grid, .journal-lead, .founder { grid-template-columns:1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .post-grid { grid-template-columns: 1fr 1fr; }
  .press-grid { grid-template-columns: repeat(4,1fr); }
  .f-row { grid-template-columns:1fr; }
}
@media (max-width:560px){
  .team-grid, .post-grid { grid-template-columns: 1fr; }
  .press-grid { grid-template-columns: repeat(3,1fr); }
}

/* --- Lightbox --- */
.lightbox { position: fixed; inset:0; z-index:300; background: rgba(15,13,9,.94); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1.4rem; padding: 4vw; opacity:0; visibility:hidden; transition: opacity .5s var(--ease), visibility .5s; }
.lightbox.open { opacity:1; visibility:visible; }
.lightbox img { max-width: min(1100px,92vw); max-height: 78vh; width:auto; object-fit: contain; box-shadow: 0 40px 90px -40px rgba(0,0,0,.7); transform: scale(.98); transition: transform .6s var(--ease); }
.lightbox.open img { transform: scale(1); }
.lightbox .lb-cap { color:#fff; font-family: var(--display); font-weight:300; font-size: clamp(1.3rem,1rem+1vw,2rem); letter-spacing:.02em; }
.lightbox .lb-close { position:absolute; top: 1.6rem; right: 2rem; color:#fff; font-size:2rem; line-height:1; opacity:.8; transition:opacity .3s; }
.lightbox .lb-close:hover { opacity:1; }
.lightbox .lb-nav { position:absolute; top:50%; transform:translateY(-50%); color:#fff; font-size:2.4rem; opacity:.6; padding:1rem; transition:opacity .3s; user-select:none; }
.lightbox .lb-nav:hover { opacity:1; }
.lightbox .lb-prev { left: 1rem; } .lightbox .lb-next { right: 1rem; }
@media (max-width:560px){ .lightbox .lb-nav{ font-size:1.8rem; } }

/* --- Header legibility over bright hero tops --- */
.site-header.on-hero:not(.solid)::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: linear-gradient(to bottom, rgba(10,8,5,.45), rgba(10,8,5,.12) 60%, rgba(10,8,5,0));
}
.site-header.on-hero:not(.solid) .nav-link,
.site-header.on-hero:not(.solid) .brand-name,
.site-header.on-hero:not(.solid) .brand-sub,
.site-header.on-hero:not(.solid) .nav-cta { text-shadow: 0 1px 16px rgba(0,0,0,.5); }

/* ============================================================
   PREMIUM ELEVATION LAYER  (applied as cascade overrides)
   Goal: AD100-tier craft within the brand system.
   ============================================================ */

/* ---- A. Correctness + accessibility ---- */
.reveal-img::after { background: var(--canvas); transform-origin: left; transform: scaleX(1); transition: transform 1.05s var(--ease); }
.reveal-img.in::after { transform: scaleX(0); transform-origin: right; }

:where(a,button,summary,input,textarea,select,[tabindex]):focus-visible {
  outline: 2px solid var(--brass-deep); outline-offset: 3px; border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }
.band-dark :focus-visible, .hero :focus-visible, .page-hero :focus-visible,
.site-footer :focus-visible, .drawer :focus-visible, .lightbox :focus-visible { outline-color: var(--brass-soft); }
.f-field input:focus-visible, .f-field textarea:focus-visible, .f-field select:focus-visible { outline: 2px solid var(--brass-deep); outline-offset: 2px; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 300; background: var(--ink); color: var(--canvas);
  padding: .8em 1.3em; border-radius: 2px; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  transition: top .25s var(--ease); }
.skip:focus { top: 1rem; }

@media (prefers-reduced-motion: reduce){
  .marquee-track, .quote-slide.active, .lightbox img,
  .hero h1 .ln>span, .page-hero h1 .ln>span, .reveal.rise,
  .founder .f-media::after, .rule-draw::after, .pf-cap::after {
    transition: none !important; animation: none !important; transform: none !important; opacity: 1 !important;
  }
}

/* ---- B. Material depth + detailing ---- */
body { position: relative; }
body::before { content:""; position: fixed; inset:0; z-index:-5; pointer-events:none; opacity:.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.17 0 0 0 0 0.16 0 0 0 0 0.13 0 0 0 0.022 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px; mix-blend-mode: multiply; }
@media print { body::before { display:none; } }

::selection { background: rgba(163,137,93,.26); color: var(--ink); }
.band-dark ::selection, .hero ::selection, .page-hero ::selection, .site-footer ::selection { background: rgba(196,172,130,.4); color:#fff; }

.band-paper { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 var(--line-soft); }
.band-sand { background: linear-gradient(180deg, var(--paper-2), #e7e1d4); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.band-dark { position: relative; background: radial-gradient(130% 150% at 50% 0%, var(--charcoal-2), var(--charcoal) 64%); }
.band-dark::after { content:""; position:absolute; top:0; left:var(--pad-x); right:var(--pad-x); height:1px;
  background: linear-gradient(90deg, transparent, var(--brass-deep), transparent); opacity:.5; }

.site-footer { border-top: 1px solid rgba(163,137,93,.32); box-shadow: inset 0 1px 0 rgba(196,172,130,.16); }
.site-header.solid { box-shadow: 0 1px 0 var(--line-soft), 0 14px 30px -24px rgba(33,26,16,.5); }
.nav-link.active { color: var(--brass-deep); }
.to-top { border: 1px solid rgba(196,172,130,.4); box-shadow: 0 12px 26px -14px rgba(33,26,16,.6); }

.fig { box-shadow: inset 0 0 0 1px rgba(43,42,38,.06); }
.pf-item .fig { box-shadow: 0 1px 2px rgba(43,42,38,.05), 0 24px 44px -32px rgba(33,26,16,.34); }
.card-img-cap:hover .fig { box-shadow: 0 2px 4px rgba(43,42,38,.06), 0 32px 62px -30px rgba(33,26,16,.44); }
.compo .c-sub .fig, .lightbox .fig, .hero-media .fig, .page-hero .fig { box-shadow: none; }

.eyebrow::before, .eyebrow.center::after { background: linear-gradient(90deg, var(--brass-deep), var(--brass-soft) 55%, var(--brass-deep)); }
.tick-list li::before { border: 0; background: linear-gradient(135deg, var(--brass-soft), var(--brass-deep)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.divider { height: 0; background: none; border: 0; border-top: 1px solid var(--line); box-shadow: 0 2px 0 -1px var(--line-soft); }

/* ---- C. Cinematic hero scrim ---- */
.hero::after { background: linear-gradient(to top, rgba(8,7,5,.82) 0%, rgba(8,7,5,.5) 24%, rgba(8,7,5,.16) 56%, rgba(8,7,5,.34) 100%); }
.hero::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(120% 95% at 12% 100%, rgba(8,7,5,.6), rgba(8,7,5,.28) 38%, rgba(8,7,5,0) 70%); }
.page-hero::after { background: linear-gradient(to top, rgba(8,7,5,.8) 0%, rgba(8,7,5,.42) 28%, rgba(8,7,5,.14) 60%, rgba(8,7,5,.3) 100%); }
.page-hero::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(120% 95% at 12% 100%, rgba(8,7,5,.55), rgba(8,7,5,.24) 40%, rgba(8,7,5,0) 70%); }
.hero-media::after { content:""; position:absolute; left:0; right:0; bottom:0; height:15vh; pointer-events:none;
  background: linear-gradient(to bottom, transparent, var(--canvas)); }
.hero h1 { text-shadow: 0 2px 26px rgba(8,7,5,.38); }
.hero .hero-sub, .page-hero .hero-sub { color:#fff; text-shadow: 0 1px 18px rgba(0,0,0,.45); }
.hero .hero-sub { max-width: 42ch; } .page-hero .hero-sub { max-width: 46ch; }
.hero .eyebrow, .page-hero .eyebrow { text-shadow: 0 1px 10px rgba(8,7,5,.55); }
.hero .eyebrow::before, .page-hero .eyebrow::before { width: clamp(34px,5vw,64px); background: var(--brass-soft); }
.scroll-cue { left: var(--pad-x); right:auto; transform:none; align-items:flex-start; bottom: clamp(3rem,7vh,6rem); color: rgba(255,255,255,.92); }
.scroll-cue .bar { height: 58px; }
@media (max-width:560px){ .scroll-cue { display:none; } }
.btn-outline-light { background: transparent; border: 0; position: relative; padding-inline: .3em; }
.btn-outline-light::before { display:none; }
.btn-outline-light::after { content:""; position:absolute; left:.3em; right:.3em; bottom:.55em; height:1px; background: var(--brass-soft); opacity:.6; transition: opacity .5s var(--ease); }
.btn-outline-light:hover { color:#fff; }
.btn-outline-light:hover::after { opacity:1; }

/* ---- D. Signature motion + micro-interactions ---- */
.reveal.rise { transform: translateY(40px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.reveal.rise.in { transform: none; }

.hero h1 .ln, .page-hero h1 .ln { display:block; overflow:hidden; padding-bottom:.04em; }
.hero h1 .ln > span, .page-hero h1 .ln > span { display:block; transform: translateY(112%); transition: transform 1.1s var(--ease); }
.hero-inner.mask-go h1 .ln > span { transform: none; }

.faq details[open] summary::after { content:"+"; transform: translateY(-50%) rotate(45deg); }
.brand .brand-name { transition: font-size .5s var(--ease); }
.site-header.solid .brand-name { font-size: clamp(1rem,1.15vw,1.2rem); }
.compo .c-main .reveal-img img { transition-duration: 1.6s; }

.svc { transition: background .6s var(--ease); }
.svc:hover { background: linear-gradient(90deg, rgba(243,240,233,.7), transparent 62%); }
.svc h3 { transition: transform .5s var(--ease); }
.svc:hover h3 { transform: translateX(.4rem); }

.founder .f-media { position: relative; }
.founder .f-media::after { content:""; position:absolute; inset:14px; border:1px solid var(--brass-soft); opacity:0; transition: opacity 1s var(--ease) .3s; pointer-events:none; }
.founder.in .f-media::after { opacity:.7; }

.rule-draw { position: relative; }
.rule-draw::after { content:""; display:block; height:1px; width:100%; margin-top:1.4rem; background: var(--brass); transform: scaleX(0); transform-origin:left; transition: transform 1.1s var(--ease); }
.rule-draw.in::after { transform: scaleX(1); }

/* squared, architectural buttons + inputs */
.btn, .nav-cta, .form-card, .f-field input, .f-field textarea, .f-field select { border-radius: 0; }
.btn { transition: color .5s var(--ease), letter-spacing .5s var(--ease); }
.btn:hover { letter-spacing: .24em; }

/* portfolio cursor */
.cursor-dot { position: fixed; top:0; left:0; width: 86px; height: 86px; border-radius:50%; background: var(--brass); color:#fff;
  display:grid; place-items:center; font: 500 .62rem/1 var(--sans); letter-spacing:.22em; text-transform:uppercase;
  transform: translate(-50%,-50%) scale(0); transition: transform .35s var(--ease); pointer-events:none; z-index:400; }
.cursor-dot.show { transform: translate(-50%,-50%) scale(1); }
@media (hover:none),(pointer:coarse){ .cursor-dot{ display:none; } }

/* ---- E. Couture typography ---- */
.display { text-wrap: balance; font-kerning: normal; font-variant-ligatures: common-ligatures contextual; }
h1.display, .h1 { letter-spacing: 0; }
h2.display, .h2 { line-height: 1.04; }
h3.display, .h3 { line-height: 1.08; }
.quote-slide blockquote { text-wrap: balance; line-height: 1.24; hanging-punctuation: first last; }
.faq summary { text-wrap: balance; }
.lede, .post .p-ex, .member .m-bio, .faq .faq-a, .split .col-text p { text-wrap: pretty; }
.stat .n, .index-num, .svc .price, .pf-num { font-variant-numeric: lining-nums tabular-nums; }
body { line-height: 1.72; }
.lede { font-weight: 400; line-height: 1.55; }
.eyebrow { font-size: clamp(.76rem,.7rem + .12vw,.82rem); letter-spacing: .26em; color: #6f5a35; }
.footer-tag, .foot-col a, .foot-contact, .member .m-bio, .post .p-ex, .form-note { font-size: 1rem; }
.footer-bottom { font-size: .85rem; }

/* ---- F. Layout pacing + composition ---- */
:root { --sec-y-tight: clamp(3.4rem,7vw,6.5rem); --sec-y-loose: clamp(4.5rem,8vw,8rem); --maxw-mid: 1080px; }
.band-dark.section, .cta-strip.section { padding-block: var(--sec-y-loose); }
/* marquee safety: never allow a second row to stack */
.marquee { display: flex; flex-wrap: nowrap; }
.marquee-track { flex: 0 0 auto; }
.section.tight { padding-block: var(--sec-y-tight); }
.container.narrow { max-width: var(--maxw-mid); }

.split { grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem,6vw,7rem); align-items: start; }
.split.wide-img { grid-template-columns: 1.2fr .8fr; }
.split .col-text { max-width: 48ch; padding-top: clamp(.5rem,3vw,2.2rem); }
.sticky-aside .col-text { position: sticky; top: clamp(6rem,12vh,9rem); align-self: start; }

.compo { padding-bottom: 10%; }
.compo .c-main { width: 78%; }
.compo .c-sub { width: 50%; bottom: -10%; right: 0; border: 5px solid var(--canvas); box-shadow: 0 50px 80px -42px rgba(20,18,12,.45); }

.founder { grid-template-columns: .9fr 1.1fr; align-items: start; }
.founder > div:last-child { padding-top: clamp(.5rem,3vw,2rem); }
.journal-lead { align-items: start; border-top: 1px solid var(--brass-deep); padding-top: clamp(1.4rem,3vw,2.2rem); }
.journal-lead > div:last-child { padding-top: clamp(.5rem,4vw,3rem); }
.kicker-row { align-items: end; }
.kicker-row > div:first-child .display { max-width: 20ch; }

.post-grid { align-items: start; counter-reset: post; }
.post { counter-increment: post; }
.post-grid > .post:nth-child(3n+2) { margin-top: clamp(1.5rem,4vw,3.5rem); }
.post .p-meta::before { content: "No. " counter(post, decimal-leading-zero) "  /  "; color: var(--brass-deep); font-family: var(--display); }
@media (max-width:860px){ .post-grid > .post:nth-child(3n+2){ margin-top: 0; } }

/* portfolio: editorial always-on captions, refined */
.pf-item .pf-cap { flex-direction: column; align-items: flex-start; gap: .35rem; opacity: 1; transform: none;
  padding-top: 3rem; background: linear-gradient(to top, rgba(10,8,5,.82), rgba(10,8,5,.32) 40%, rgba(10,8,5,0) 72%); }
.pf-item .pf-cap .m { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.pf-item .pf-cap .v { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); padding-bottom:0; }
.pf-item:hover .pf-cap .v, .pf-item:focus-visible .pf-cap .v { opacity: 1; transform: none; }
.pf-item .pf-num { color:#fff; mix-blend-mode: normal; font-weight:300; font-size:.85rem; letter-spacing:.08em; opacity:.92; text-shadow: 0 1px 12px rgba(10,8,5,.6); }
.pf-cap { position: relative; }
.pf-cap::after { content:""; position:absolute; left: clamp(1.1rem,2vw,1.8rem); bottom: .85rem; height:1px; width:0; background: var(--brass-soft); transition: width .6s var(--ease) .1s; }
.pf-item:hover .pf-cap::after { width: 30%; }
@media (max-width:560px){ .pf-item .pf-cap .v{ opacity:1; transform:none; } .pf-item .pf-cap::after{ width:30%; } }

/* signature monogram + form + lightbox details */
.monogram { font-family: var(--display); font-weight:300; font-size:1.05rem; width:46px; height:46px; border:1px solid rgba(196,172,130,.6);
  border-radius:50%; display:grid; place-items:center; color: var(--brass-soft); margin-bottom:1.2rem; }
.form-card { border-top: 2px solid var(--brass); box-shadow: 0 40px 80px -50px rgba(20,18,12,.4); }
.q-dot { position: relative; } .q-dot::after { content:""; position:absolute; inset:-16px; }
.social a { width: 44px; height: 44px; }
.drawer .close { width:46px; height:46px; display:grid; place-items:center; }
.lightbox .lb-nav { width:48px; height:48px; display:grid; place-items:center; padding:0; }
.lightbox .lb-count { position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.72); font-size:.72rem; letter-spacing:.22em; }
.foot-contact a { text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; }
.faq-a a, .post .p-ex a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }

/* mark-wm restored to full presence for legibility */
.cta-strip .display .mark-wm, .band-dark .mark-wm { opacity: 1; }
/* keep explicitly-centered splits centered (band-dark sections) */
.split.items-center { align-items: center; }
@media (max-width:860px){ .sticky-aside .col-text { position: static; } }

/* WebP <picture> wrappers stay transparent to layout */
picture { display: contents; }

/* ---- Brand refinement: larger, more present header lockup ---- */
.brand .brand-name { font-size: clamp(1.3rem, 1.05rem + .9vw, 1.85rem); letter-spacing: .03em; }
.site-header.solid .brand-name { font-size: clamp(1.15rem, 1rem + .55vw, 1.5rem); }
.brand .brand-sub { font-size: .58rem; letter-spacing: .46em; margin-top: .3rem; }
.brand { gap: .25rem; }
/* footer monogram dot in brass */
.monogram .mono-dot { color: var(--brass); opacity: .9; padding: 0 .04em; }