/* ==========================================================================
   Monolith Marble — design system
   Concept: monumental geology. Dark, quiet, editorial. The signature is
   "the vein" — a fine bronze hairline that runs through the page.
   Palette: quarry-shadow ink · calacatta bone · travertine sand · antique brass
   Type: Cormorant Garamond (display serif) · Archivo (labels, body, wordmark)
   ========================================================================== */

/* ----- tokens ------------------------------------------------------------- */
:root {
  --ink:    #14110D;   /* quarry shadow */
  --ink-1:  #1C1812;
  --ink-2:  #272019;
  --bone:   #F4F0E8;   /* calacatta */
  --bone-2: #E8E0D2;   /* warm putty */
  --sand:   #B7A78E;   /* travertine */
  --sand-d: #8C7E66;
  --bronze: #9A7B4C;   /* antique brass */
  --bronze-2:#C6AB7C;  /* lit brass */

  --txt:    #16120C;
  --muted:  #6E6452;
  --line:   rgba(20,17,13,.14);
  --line-d: rgba(244,240,232,.16);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Archivo', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --wrap: 1280px;
  --gut: clamp(1.25rem, 4vw, 4rem);
  --sp: clamp(4.5rem, 9vw, 9rem);     /* section vertical rhythm */
  --r: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ----- reset -------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box }
* { margin:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:6rem }
body{
  font-family:var(--sans);
  background:var(--bone);
  color:var(--txt);
  line-height:1.65;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
input,select,textarea{ font:inherit; color:inherit }
::selection{ background:var(--bronze); color:var(--bone) }

/* ----- layout primitives -------------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }
.section{ padding-block:var(--sp); position:relative }
.section--dark{ background:var(--ink); color:var(--bone) }
.on-dark{ color:var(--bone) }
.anchor{ position:absolute; top:-6rem }

/* ----- type --------------------------------------------------------------- */
.dis{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.01em;
  font-size:clamp(2.1rem,1.5rem + 3.1vw,4rem);
}
.lead{
  font-size:clamp(1.1rem,1.02rem + .5vw,1.4rem);
  line-height:1.55;
  color:var(--muted);
  font-weight:400;
  max-width:54ch;
}
.on-dark .lead{ color:rgba(244,240,232,.74) }
em{ font-style:italic; font-family:var(--serif); font-size:1.06em }

.eyebrow{
  display:inline-flex; align-items:center; gap:.7em;
  font-size:.72rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--bronze);
}
.on-dark .eyebrow{ color:var(--bronze-2) }
.eyebrow-n{
  font-family:var(--serif); font-style:italic; font-size:1.15rem; font-weight:500;
  letter-spacing:0; color:var(--sand-d); line-height:1;
}
.on-dark .eyebrow-n{ color:var(--sand) }

.s-head{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); margin-bottom:clamp(2.5rem,5vw,4rem) }
.s-head .dis{ margin-top:1rem; max-width:18ch }
.s-head .lead{ margin-top:1.3rem }
.s-head.is-center{ text-align:center }
.s-head.is-center .dis,.s-head.is-center .lead{ margin-inline:auto }
.s-head.is-center .eyebrow{ justify-content:center }

/* ----- buttons + links ---------------------------------------------------- */
.btn{
  --bc:var(--ink);
  display:inline-flex; align-items:center; gap:.85em;
  font-size:.74rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  padding:1.05em 1.6em; border:1px solid var(--bc); border-radius:var(--r);
  position:relative; overflow:hidden; transition:color .4s var(--ease), border-color .4s;
}
.btn span{ position:relative; z-index:1 }
.btn .arr{ width:1.7em; position:relative; z-index:1; transition:transform .45s var(--ease) }
.btn::before{ content:""; position:absolute; inset:0; background:var(--bc); transform:translateY(101%); transition:transform .45s var(--ease); z-index:0 }
.btn:hover::before{ transform:translateY(0) }
.btn:hover .arr{ transform:translateX(5px) }
.btn--solid{ --bc:var(--ink); background:var(--ink); color:var(--bone) }
.btn--solid::before{ background:var(--bronze) }
.btn--solid:hover{ color:var(--bone); border-color:var(--bronze) }
.btn--line{ --bc:currentColor; color:inherit; opacity:.92 }
.on-dark .btn--solid{ background:var(--bone); color:var(--ink); border-color:var(--bone) }
.on-dark .btn--solid::before{ background:var(--bronze-2) }
.on-dark .btn--solid:hover{ color:var(--ink); border-color:var(--bronze-2) }
.btn--line:hover::before{ transform:translateY(0) }
.btn--line:hover{ color:var(--bone) }
.on-dark .btn--line:hover{ color:var(--ink) }
.on-dark .btn--line::before{ background:var(--bone) }
.btn-row{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.2rem }

.tlink{
  display:inline-flex; align-items:center; gap:.7em;
  font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bronze); padding-bottom:.35em; border-bottom:1px solid var(--line);
  transition:gap .35s var(--ease), border-color .35s;
}
.on-dark .tlink{ color:var(--bronze-2); border-color:var(--line-d) }
.tlink .arr{ width:1.6em }
.tlink:hover{ gap:1.1em; border-color:currentColor }

/* ----- the vein (signature) ----------------------------------------------- */
.on-bronze{ color:var(--bronze) }
.section--dark .on-bronze,.on-dark .on-bronze{ color:var(--bronze-2) }
.vein{ display:block; width:100%; opacity:.55 }
.vein--h{ height:18px }
.vein path{ stroke-dasharray:2200; stroke-dashoffset:2200; transition:stroke-dashoffset 2.2s var(--ease) }
[data-reveal].in .vein path,.in .vein path,.idx-vein.in path,.foot .vein path{ stroke-dashoffset:0 }
.idx-vein,.foot-vein,.quote-vein,.phero-vein{ opacity:.5 }
.idx-vein{ margin-block:clamp(3rem,6vw,5.5rem) }

/* ----- masthead ----------------------------------------------------------- */
.skip{ position:absolute; left:-999px; top:.5rem; z-index:200; background:var(--ink); color:var(--bone); padding:.6rem 1rem; border-radius:var(--r) }
.skip:focus{ left:1rem }
.mast{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .5s var(--ease), box-shadow .5s, color .5s;
  color:var(--bone);
}
.mast-inner{ display:flex; align-items:center; justify-content:space-between; height:5.4rem }
.mast.is-solid{ background:rgba(244,240,232,.92); backdrop-filter:saturate(1.4) blur(14px); color:var(--ink); box-shadow:0 1px 0 var(--line) }
body[data-header="solid"] .mast{ background:rgba(244,240,232,.95); backdrop-filter:saturate(1.4) blur(14px); color:var(--ink); box-shadow:0 1px 0 var(--line); position:fixed }
body[data-header="solid"]{ padding-top:5.4rem }

.brand{ display:inline-flex; align-items:center; gap:.7rem }
.brand-mark .mark{ width:1.45rem; height:auto; color:currentColor }
.mark-vein{ stroke:var(--bronze-2) }
.is-solid .mark-vein,body[data-header="solid"] .mark-vein{ stroke:var(--bronze) }
.brand-words{ display:flex; flex-direction:column; line-height:.98 }
.brand-1{ font-weight:600; font-size:.86rem; letter-spacing:.22em; text-transform:uppercase }
.brand-2{ font-weight:500; font-size:.86rem; letter-spacing:.34em; text-transform:uppercase; color:var(--bronze-2) }
.is-solid .brand-2,body[data-header="solid"] .brand-2{ color:var(--bronze) }

.nav{ display:flex; gap:clamp(1.2rem,2.6vw,2.4rem) }
.nav-link{ font-size:.78rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; position:relative; padding-block:.4rem; opacity:.85; transition:opacity .3s }
.nav-link::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease) }
.nav-link:hover{ opacity:1 }
.nav-link:hover::after,.nav-link[aria-current]::after{ transform:scaleX(1) }
.nav-link[aria-current]{ opacity:1; color:var(--bronze-2) }
.is-solid .nav-link[aria-current],body[data-header="solid"] .nav-link[aria-current]{ color:var(--bronze) }

.mast-end{ display:flex; align-items:center; gap:1rem }
.mast-cta{ padding:.8em 1.3em }
.burger{ display:none; width:2.4rem; height:2.4rem; position:relative }
.burger span{ position:absolute; left:.45rem; right:.45rem; height:1.5px; background:currentColor; transition:transform .35s var(--ease), opacity .25s }
.burger span:first-child{ top:.9rem } .burger span:last-child{ bottom:.9rem }
.is-open .burger span:first-child{ transform:translateY(.35rem) rotate(45deg) }
.is-open .burger span:last-child{ transform:translateY(-.35rem) rotate(-45deg) }

/* drawer */
.drawer{ position:fixed; inset:0; z-index:90; background:var(--ink); color:var(--bone);
  clip-path:inset(0 0 100% 0); transition:clip-path .6s var(--ease); display:grid; place-items:center }
.drawer.is-open{ clip-path:inset(0 0 0 0) }
.drawer-nav{ display:flex; flex-direction:column; gap:.4rem; text-align:center }
.drawer-nav a{ font-family:var(--serif); font-size:clamp(2rem,9vw,3rem); line-height:1.15;
  opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), opacity .3s, transform .5s var(--ease); transition-delay:calc(.06s * var(--i,0) + .15s) }
.drawer.is-open .drawer-nav a{ opacity:1; transform:none }
.drawer-cta{ margin-top:1.4rem; font-family:var(--sans)!important; font-size:.85rem!important; letter-spacing:.16em; text-transform:uppercase; color:var(--bronze-2); display:inline-flex; align-items:center; gap:.6em; justify-content:center }
.drawer-cta .arr{ width:1.7em }

/* ----- home hero ---------------------------------------------------------- */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:7rem; padding-bottom:clamp(2rem,4vw,3.5rem); overflow:hidden; isolation:isolate }
.hero-bg{ position:absolute; inset:0; z-index:-2 }
.hero-bg img{ width:100%; height:100%; object-fit:cover; animation:slowzoom 22s var(--ease) forwards }
.hero::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(20,17,13,.5) 0%,rgba(20,17,13,.15) 32%,rgba(20,17,13,.55) 74%,rgba(20,17,13,.92) 100%) }
@keyframes slowzoom{ from{ transform:scale(1.08) } to{ transform:scale(1) } }
.hero-vein{ position:absolute; top:0; bottom:0; left:clamp(1.5rem,12vw,14rem); width:24px; z-index:-1; opacity:.4 }
.hero-vein .vein--drop{ height:100% }
.hero-inner{ width:100%; max-width:var(--wrap) }
.hero-eb{ margin-bottom:1.4rem }
.hero-title{ font-family:var(--serif); font-weight:300; line-height:.96; letter-spacing:-.015em;
  font-size:clamp(3rem,2rem + 9vw,8.5rem); text-wrap:balance }
.hero-title .line{ display:block; overflow:hidden }
.hero-title .line--em{ font-style:italic; font-weight:400; color:var(--bone) }
.hero-foot{ display:grid; grid-template-columns:1.1fr 1fr; gap:2rem 3rem; align-items:end; margin-top:clamp(1.8rem,4vw,3rem) }
.hero-lead{ font-size:clamp(1.02rem,.95rem + .4vw,1.2rem); color:rgba(244,240,232,.82); max-width:46ch }
.hero-foot .btn-row{ margin-top:0; justify-content:flex-end }

/* marquee */
.hero-marquee{ position:relative; margin-top:clamp(2rem,5vw,3.5rem); border-top:1px solid var(--line-d); border-bottom:1px solid var(--line-d); padding-block:.9rem; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) }
.marquee-track{ display:inline-flex; align-items:center; gap:1.4rem; white-space:nowrap; animation:marquee 38s linear infinite; will-change:transform }
.marquee-track span{ font-family:var(--serif); font-style:italic; font-size:1.25rem; color:rgba(244,240,232,.62) }
.marquee-track .m-dot{ color:var(--bronze-2); font-style:normal }
@keyframes marquee{ to{ transform:translateX(-50%) } }

/* ----- intro -------------------------------------------------------------- */
.intro-grid{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,3.5rem) }
.intro-lead{ font-family:var(--serif); font-weight:300; font-size:clamp(1.6rem,1.1rem + 2.4vw,3rem); line-height:1.22; letter-spacing:-.01em; max-width:24ch; color:var(--txt) }
.intro-lead em{ color:var(--bronze) }
.intro-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; border-top:1px solid var(--line); padding-top:clamp(1.8rem,4vw,2.6rem) }
.stat{ display:flex; flex-direction:column; gap:.5rem }
.stat-big{ font-family:var(--serif); font-weight:400; font-size:clamp(2.6rem,2rem + 3vw,4.4rem); line-height:.9; display:inline-flex; align-items:baseline }
.stat-sub{ font-size:.4em; color:var(--bronze); margin-left:.15em; letter-spacing:0 }
.on-dark .stat-sub{ color:var(--bronze-2) }
.stat-label{ font-size:.78rem; letter-spacing:.06em; color:var(--muted); max-width:22ch }
.on-dark .stat-label{ color:rgba(244,240,232,.6) }

/* ----- collections grid (home) ------------------------------------------- */
.coll-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.6rem,1.4vw,1.1rem) }
.coll-card{ position:relative; overflow:hidden; border-radius:var(--r); aspect-ratio:4/5; display:flex; align-items:flex-end }
.coll-img{ position:absolute; inset:0 }
.coll-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease), filter 1s; filter:grayscale(.15) }
.coll-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(20,17,13,.82)) }
.coll-card:hover .coll-img img{ transform:scale(1.06); filter:grayscale(0) }
.coll-meta{ position:relative; z-index:1; display:flex; align-items:center; gap:.7rem; padding:1.3rem; width:100%; color:var(--bone) }
.coll-n{ font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--bronze-2) }
.coll-name{ font-family:var(--serif); font-size:1.7rem; line-height:1; flex:1 }
.coll-meta .plus{ width:1.3rem; opacity:.7; transition:transform .4s var(--ease) }
.coll-card:hover .plus{ transform:rotate(90deg); opacity:1 }
.coll-foot{ margin-top:clamp(2rem,4vw,3rem); display:flex; justify-content:center }

/* ----- feature ------------------------------------------------------------ */
.feature-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center }
.feature-media{ overflow:hidden; border-radius:var(--r) }
.feature-media img{ width:100%; aspect-ratio:4/3.4; object-fit:cover; transition:transform 1.2s var(--ease) }
.feature-media:hover img{ transform:scale(1.04) }
.feature-text .dis{ margin:1rem 0 1.3rem }
.feature-text .tlink{ margin-top:1.8rem }

/* ----- work grid (home) --------------------------------------------------- */
.work-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(.8rem,1.6vw,1.4rem) }
.proj{ position:relative; overflow:hidden; border-radius:var(--r); background:var(--ink-1) }
.proj.sp-2{ grid-column:span 2 }
.proj-img{ overflow:hidden }
.proj-img img{ width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform 1.1s var(--ease); filter:grayscale(.1) }
.proj.is-tall .proj-img img{ aspect-ratio:16/13 }
.proj:hover .proj-img img{ transform:scale(1.045); filter:grayscale(0) }
.proj-cap{ position:absolute; left:0; right:0; bottom:0; padding:clamp(1.1rem,2.4vw,1.8rem); color:var(--bone);
  display:flex; flex-direction:column; gap:.25rem; background:linear-gradient(180deg,transparent,rgba(20,17,13,.85)) }
.proj-cat{ font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze-2) }
.proj-title{ font-family:var(--serif); font-size:clamp(1.3rem,1.1rem + .8vw,2rem); line-height:1.05 }
.proj-place{ font-size:.78rem; color:rgba(244,240,232,.66) }

/* ----- process-lite (home) ----------------------------------------------- */
.pl-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.4rem,3vw,2.6rem) }
.pl-item{ position:relative; padding-top:1.6rem; border-top:1px solid var(--line) }
.pl-n{ font-family:var(--serif); font-style:italic; font-size:1.2rem; color:var(--bronze) }
.pl-item h3{ font-family:var(--serif); font-weight:500; font-size:1.55rem; margin:.5rem 0 .6rem }
.pl-item p{ font-size:.92rem; color:var(--muted) }

/* ----- cta band ----------------------------------------------------------- */
.cta{ position:relative; overflow:hidden; isolation:isolate; padding-block:clamp(5rem,10vw,9rem); color:var(--bone); text-align:center }
.cta-bg{ position:absolute; inset:0; z-index:-2 }
.cta-bg img{ width:100%; height:100%; object-fit:cover }
.cta::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(20,17,13,.86),rgba(20,17,13,.78)) }
.cta-inner{ display:flex; flex-direction:column; align-items:center }
.cta-title{ margin:1.2rem 0 0; max-width:16ch }
.cta .lead{ margin-top:1.4rem; text-align:center; color:rgba(244,240,232,.78) }
.cta .btn-row{ justify-content:center }

/* ----- page hero ---------------------------------------------------------- */
.phero{ position:relative; min-height:clamp(60vh,78svh,82vh); display:flex; align-items:flex-end;
  padding-top:8rem; padding-bottom:clamp(3rem,7vw,5.5rem); overflow:hidden; isolation:isolate }
.phero-bg{ position:absolute; inset:0; z-index:-2 }
.phero-bg img{ width:100%; height:100%; object-fit:cover; animation:slowzoom 20s var(--ease) forwards }
.phero::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(20,17,13,.42),rgba(20,17,13,.4) 45%,rgba(20,17,13,.88)) }
.ph-title{ font-family:var(--serif); font-weight:300; line-height:.98; letter-spacing:-.015em;
  font-size:clamp(2.6rem,1.8rem + 6vw,6rem); margin-top:1.1rem; text-wrap:balance }
.phero .lead{ margin-top:1.5rem; color:rgba(244,240,232,.82); max-width:50ch }
.phero-vein{ position:absolute; left:0; right:0; bottom:0; opacity:.45 }

/* ----- collection index --------------------------------------------------- */
.idx{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center }
.idx.is-flip .idx-media{ order:2 }
.idx-media{ position:relative }
.idx-img{ overflow:hidden; border-radius:var(--r) }
.idx-img img{ width:100%; aspect-ratio:4/3.2; object-fit:cover; transition:transform 1.3s var(--ease) }
.idx:hover .idx-img img{ transform:scale(1.05) }
.idx-num{ position:absolute; top:-.35em; left:-.1em; font-family:var(--serif); font-weight:300; font-size:clamp(4rem,9vw,9rem); line-height:1; color:var(--bone); -webkit-text-stroke:1px var(--bronze); text-stroke:1px var(--bronze); mix-blend-mode:normal; pointer-events:none; opacity:.95 }
.idx.is-flip .idx-num{ left:auto; right:-.1em }
.idx-name{ font-family:var(--serif); font-weight:400; font-size:clamp(2.4rem,1.8rem + 3vw,4.2rem); line-height:1; letter-spacing:-.01em }
.idx-origin{ display:flex; align-items:center; gap:.6rem; margin-top:.9rem; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bronze) }
.idx-origin .dot{ width:.4rem; height:.4rem; border-radius:50%; background:var(--bronze) }
.idx-blurb{ margin-top:1.3rem; font-size:1.06rem; color:var(--muted); max-width:46ch; line-height:1.6 }
.spec{ display:flex; flex-wrap:wrap; gap:2rem; margin-top:1.6rem; border-top:1px solid var(--line); padding-top:1.3rem }
.spec dt{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sand-d) }
.spec dd{ font-family:var(--serif); font-size:1.15rem; margin-top:.15rem }

/* ----- finishes ----------------------------------------------------------- */
.fin-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.2rem,2.5vw,2.2rem) }
.fin{ padding-top:1.5rem; border-top:1px solid var(--line-d) }
.fin-n{ font-family:var(--serif); font-style:italic; color:var(--bronze-2); font-size:1.1rem }
.fin h3{ font-family:var(--serif); font-weight:500; font-size:1.5rem; margin:.4rem 0 .6rem }
.fin p{ font-size:.9rem; color:rgba(244,240,232,.66) }

/* ----- gallery (projects) ------------------------------------------------- */
.gal-filters{ display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; margin-bottom:clamp(2rem,4vw,3rem) }
.gal-label{ margin-right:.4rem }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem }
.chip{ font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:.6em 1.1em; border:1px solid var(--line); border-radius:100px; color:var(--muted); transition:all .35s var(--ease) }
.chip:hover{ border-color:var(--bronze); color:var(--bronze) }
.chip.is-on{ background:var(--ink); color:var(--bone); border-color:var(--ink) }
.gal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.8rem,1.6vw,1.3rem); grid-auto-flow:dense }
.gal-item.sp-2{ grid-column:span 2 }
.gal-item.is-tall .proj-img img{ aspect-ratio:3/4 }
.gal-item{ transition:opacity .5s var(--ease), transform .5s var(--ease) }
.gal-item.is-hidden{ display:none }

/* ----- pull quote --------------------------------------------------------- */
.quote-sec{ text-align:center }
.quote-wrap{ max-width:60rem; margin-inline:auto; position:relative; padding-top:2.5rem }
.quote-vein{ position:absolute; top:0; left:50%; width:140px; transform:translateX(-50%); opacity:.6 }
.pull{ font-family:var(--serif); font-weight:300; font-style:italic; font-size:clamp(1.6rem,1.1rem + 2.4vw,3rem); line-height:1.28; letter-spacing:-.01em }
.quote-by{ margin-top:1.6rem; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sand) }

/* ----- capabilities steps ------------------------------------------------- */
.steps{ display:block }
.step{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center;
  padding-block:clamp(2.5rem,5vw,4.5rem); border-top:1px solid var(--line) }
.step:first-child{ border-top:0; padding-top:0 }
.step:nth-child(even) .step-media{ order:2 }
.step-media{ position:relative; overflow:hidden; border-radius:var(--r) }
.step-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform 1.3s var(--ease) }
.step:hover .step-media img{ transform:scale(1.045) }
.step-n{ position:absolute; top:1rem; left:1.1rem; font-family:var(--serif); font-style:italic; font-size:2.2rem; color:var(--bone); text-shadow:0 2px 20px rgba(20,17,13,.5) }
.step-title{ font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem,1.4rem + 2vw,3rem); line-height:1.04 }
.step-text p{ margin-top:1.1rem; color:var(--muted); max-width:46ch }
.ticks{ list-style:none; margin-top:1.6rem; display:flex; flex-direction:column; gap:.7rem }
.ticks li{ position:relative; padding-left:1.6rem; font-size:.95rem }
.ticks li::before{ content:""; position:absolute; left:0; top:.55em; width:.7rem; height:1px; background:var(--bronze) }

/* ----- trade -------------------------------------------------------------- */
.trade-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,5rem); align-items:center }
.trade-text .dis{ margin:1rem 0 1.3rem }
.trade-list{ list-style:none; display:flex; flex-direction:column }
.trade-list li{ display:flex; gap:1.2rem; padding-block:1.4rem; border-top:1px solid var(--line-d) }
.trade-list li:first-child{ border-top:0; padding-top:0 }
.td-mark .mark{ width:1.2rem; color:rgba(244,240,232,.5) }
.td-mark .mark-vein{ stroke:var(--bronze-2) }
.trade-list h4{ font-family:var(--serif); font-weight:500; font-size:1.4rem }
.trade-list p{ font-size:.92rem; color:rgba(244,240,232,.66); margin-top:.25rem }

/* ----- about -------------------------------------------------------------- */
.ethos-grid{ display:grid; grid-template-columns:.5fr 1fr; gap:clamp(2rem,5vw,4rem) }
.ethos-body p + p{ margin-top:1.3rem }
.ethos-body .lead{ color:var(--txt) }
.fig-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem }
.split-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center }
.split--rev .split-media{ order:2 }
.split-media{ overflow:hidden; border-radius:var(--r) }
.split-media img{ width:100%; aspect-ratio:4/4.4; object-fit:cover; transition:transform 1.3s var(--ease) }
.split:hover .split-media img{ transform:scale(1.04) }
.split-text .dis{ margin:1rem 0 1.2rem }
.split-text p + p{ margin-top:1.1rem; color:var(--muted) }
.split-text .tlink{ margin-top:1.7rem }

/* ----- contact ------------------------------------------------------------ */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2.5rem,5vw,5rem); align-items:start }
.form-eb{ margin-bottom:1.8rem }
.field{ margin-bottom:1.4rem }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem }
.field label{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.6rem }
.field .opt{ text-transform:none; letter-spacing:0; color:var(--sand-d); font-size:.85em }
.field input,.field select,.field textarea{ width:100%; background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:.7rem 0; font-size:1.02rem; transition:border-color .35s; border-radius:0 }
.field textarea{ resize:vertical }
.field input::placeholder,.field textarea::placeholder{ color:#a99f8d }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--bronze) }
.select-wrap{ position:relative }
.select-wrap::after{ content:""; position:absolute; right:.2rem; top:50%; width:.5rem; height:.5rem; border-right:1px solid var(--muted); border-bottom:1px solid var(--muted); transform:translateY(-70%) rotate(45deg); pointer-events:none }
.field select{ appearance:none }
.form-submit{ margin-top:.6rem }
.form-note{ margin-top:1.2rem; font-size:.9rem; color:var(--bronze) }
.form-note.is-err{ color:#a8412f }

.contact-aside{ display:flex; flex-direction:column; gap:1.2rem }
.card-info{ position:relative; border:1px solid var(--line); border-radius:var(--r); padding:clamp(1.6rem,3vw,2.2rem) }
.card-info h3{ font-family:var(--serif); font-weight:500; font-size:1.7rem; margin-bottom:.7rem }
.card-info > p{ color:var(--muted); font-size:.95rem }
.info{ margin-top:1.5rem; display:flex; flex-direction:column; gap:1rem }
.info > div{ display:grid; grid-template-columns:5.5rem 1fr; gap:1rem; align-items:baseline; padding-top:1rem; border-top:1px solid var(--line) }
.info dt{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sand-d) }
.info dd{ font-size:.98rem }
.info a:hover{ color:var(--bronze) }
.card-info--trade{ background:var(--ink); color:var(--bone); border-color:var(--ink) }
.card-info--trade > p{ color:rgba(244,240,232,.7) }
.card-info--trade .ci-mark .mark{ width:1.6rem; color:rgba(244,240,232,.55); margin-bottom:1rem }
.card-info--trade .ci-mark .mark-vein{ stroke:var(--bronze-2) }
.card-info--trade .tlink{ margin-top:1.3rem }

/* ----- legal -------------------------------------------------------------- */
.legal-wrap{ display:grid; grid-template-columns:.7fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:start }
.legal-head .dis{ margin:1rem 0 1.2rem }
.legal-date{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sand-d); margin-top:1.2rem }
.legal-block + .legal-block{ margin-top:2rem }
.legal-block h2{ font-family:var(--serif); font-weight:500; font-size:1.5rem; margin-bottom:.6rem }
.legal-block p{ color:var(--muted) }
.legal-foot{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line); color:var(--muted); font-size:.92rem }
.legal-foot a{ color:var(--bronze) }

/* ----- footer ------------------------------------------------------------- */
.foot{ background:var(--ink); color:var(--bone); padding-block:clamp(3.5rem,7vw,5.5rem) 2.5rem }
.foot-top{ display:grid; grid-template-columns:1.2fr 2fr; gap:clamp(2.5rem,5vw,5rem) }
.brand--foot{ margin-bottom:1.4rem }
.brand--foot .brand-2{ color:var(--bronze-2) }
.foot-brand p{ color:rgba(244,240,232,.66); max-width:34ch; font-size:.96rem }
.foot-social{ display:flex; gap:.8rem; margin-top:1.6rem }
.foot-social a{ width:2.4rem; height:2.4rem; border:1px solid var(--line-d); border-radius:50%; display:grid; place-items:center; transition:all .35s var(--ease) }
.foot-social svg{ width:1.05rem; height:1.05rem }
.foot-social a:hover{ background:var(--bronze); border-color:var(--bronze); color:var(--ink) }
.foot-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem }
.foot-col h4{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sand); margin-bottom:1.2rem; font-weight:600 }
.foot-col ul{ list-style:none; display:flex; flex-direction:column; gap:.7rem }
.foot-col a{ color:rgba(244,240,232,.74); font-size:.94rem; transition:color .3s }
.foot-col a:hover{ color:var(--bronze-2) }
.foot-vein{ margin-block:clamp(2.5rem,5vw,3.5rem) 1.6rem; opacity:.4 }
.foot-bot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; font-size:.8rem; color:rgba(244,240,232,.55) }
.foot-legal{ display:flex; gap:1.4rem }
.foot-legal a:hover,.foot-by a{ color:var(--bronze-2) }
.foot-by a{ font-weight:600 }

/* ----- reveal (no-JS safe: hidden only when .js is present) --------------- */
.js [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease) }
.js [data-reveal].in{ opacity:1; transform:none }

/* ----- responsive --------------------------------------------------------- */
@media (max-width:1080px){
  .pl-grid,.fin-grid,.fig-grid{ grid-template-columns:repeat(2,1fr); gap:2rem 1.6rem }
  .ethos-grid{ grid-template-columns:1fr }
  .gal-grid{ grid-template-columns:repeat(2,1fr) }
  .gal-item.sp-2{ grid-column:span 2 }
}
@media (max-width:860px){
  .nav,.mast-cta{ display:none }
  .burger{ display:block }
  .hero-foot{ grid-template-columns:1fr; gap:1.6rem }
  .hero-foot .btn-row{ justify-content:flex-start }
  .feature-grid,.trade-grid,.split-grid,.contact-grid,.legal-wrap{ grid-template-columns:1fr }
  .split--rev .split-media,.trade-grid > .trade-list{ order:0 }
  .idx,.step{ grid-template-columns:1fr; gap:1.6rem }
  .idx.is-flip .idx-media,.step:nth-child(even) .step-media{ order:0 }
  .idx-num{ font-size:5rem }
  .feature-media,.split-media{ order:-1 }
  .intro-stats{ grid-template-columns:1fr; gap:1.6rem }
  .intro-stats .stat{ flex-direction:row; align-items:baseline; gap:1.2rem; border-top:1px solid var(--line); padding-top:1.2rem }
}
@media (max-width:620px){
  .coll-grid{ grid-template-columns:1fr 1fr; gap:.6rem }
  .work-grid{ grid-template-columns:1fr }
  .proj.sp-2,.gal-item.sp-2{ grid-column:span 1 }
  .gal-grid{ grid-template-columns:1fr }
  .pl-grid,.fin-grid,.fig-grid,.foot-cols{ grid-template-columns:1fr }
  .foot-top{ grid-template-columns:1fr }
  .field-row{ grid-template-columns:1fr }
  .legal-wrap{ gap:2rem }
}

/* ----- reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important }
  [data-reveal]{ opacity:1; transform:none }
  .vein path{ stroke-dashoffset:0 }
  .marquee-track{ animation:none }
  .hero-bg img,.phero-bg img{ animation:none }
}