/* ============================================================
   ICHIRO — static site
   Deep matte black #141414 · polished gold #CDAE80
   Headings: Astoria → Playfair Display · Body: Jost
   ============================================================ */

:root{
  --ink:#141414; --ink-2:#181818; --ink-3:#0e0e0e;
  --gold:#cdae80; --gold-soft:#e8d3ad; --gold-deep:#9d7c46;
  --cream:#f4efe7; --muted:#9d968b;
  --line:rgba(205,174,128,.26); --line-soft:rgba(205,174,128,.11);
  --serif:'Astoria','Playfair Display','Cormorant Garamond',Georgia,serif;
  --sans:'Jost','Segoe UI',system-ui,-apple-system,sans-serif;
  --wrap:1240px; --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--cream);
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.8;
  letter-spacing:.012em; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--serif); font-weight:600; line-height:1.04; }
p{ margin:0 0 1.15em; }
::selection{ background:var(--gold); color:var(--ink); }

.wrap{ width:min(var(--wrap), calc(100% - 2.8rem)); margin-inline:auto; }
.vignette{ position:fixed; inset:0; z-index:60; pointer-events:none;
  background:radial-gradient(130% 100% at 50% 50%, rgba(0,0,0,0) 58%, rgba(0,0,0,.5) 100%); }

/* ============================ header ======================= */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; gap:1.5rem; padding:1.3rem clamp(1.3rem,4vw,3.2rem);
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
}
.topbar.stuck{
  background:rgba(12,12,12,.9); backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line-soft); padding-block:.75rem;
}
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand-mark{ width:26px; height:26px; }
.brand-word{ font-family:var(--serif); font-size:1.34rem; color:var(--gold-soft); letter-spacing:.02em; }
.nav{ display:flex; align-items:center; gap:clamp(1rem,2.5vw,2.2rem); }
.nav a{ position:relative; font-size:.71rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(244,239,231,.72); padding:.35rem 0; transition:color .35s var(--ease); }
.nav a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width .45s var(--ease); }
.nav a:hover{ color:var(--gold-soft); }
.nav a:hover::after,.nav a.active::after{ width:100%; }
.nav a.active{ color:var(--gold); }
.nav .nav-cta{ border:1px solid var(--line); padding:.55rem 1.15rem; color:var(--gold-soft);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.nav .nav-cta::after{ display:none; }
.nav .nav-cta:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.burger{ display:none; width:38px; height:34px; background:none; border:0; padding:0; position:relative; cursor:pointer; }
.burger span{ position:absolute; left:7px; right:7px; height:1px; background:var(--gold-soft);
  transition:transform .4s var(--ease); }
.burger span:first-child{ top:13px; } .burger span:last-child{ bottom:13px; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); }

/* ============================ buttons ====================== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  padding:1rem 2.2rem; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  border:1px solid var(--gold); position:relative; overflow:hidden; isolation:isolate;
  transition:color .45s var(--ease); }
.btn::before{ content:""; position:absolute; inset:0; background:var(--gold); z-index:-1;
  transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease); }
.btn:hover::before{ transform:scaleX(1); transform-origin:left; }
.btn-gold{ background:var(--gold); color:var(--ink); }
.btn-gold::before{ background:var(--gold-soft); }
.btn-ghost{ color:var(--gold-soft); }
.btn-ghost:hover{ color:var(--ink); }

/* ======================= cinematic hero ==================== */
.hero{
  position:relative; min-height:100svh; display:grid; place-items:center; text-align:center;
  padding:9rem 1.5rem 7rem; overflow:hidden; isolation:isolate;
}
.hero-bg{
  position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center;
  transform:scale(1.06); animation:driftIn 14s var(--ease) forwards;
}
@keyframes driftIn{ to{ transform:scale(1); } }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(85% 70% at 50% 45%, rgba(10,10,10,.42) 0%, rgba(10,10,10,.82) 62%, #0b0b0b 100%),
    linear-gradient(180deg, rgba(10,10,10,.9) 0%, rgba(10,10,10,.2) 30%, rgba(10,10,10,.95) 100%);
}
.hero-pattern{
  position:absolute; width:min(52vw,600px); aspect-ratio:1; pointer-events:none; z-index:-1;
  background:url("../img/guilloche.svg") center/contain no-repeat; opacity:.42;
}
.hero-pattern.tl{ top:-15%; left:-13%; } .hero-pattern.br{ bottom:-17%; right:-12%; }
.hero-inner{ position:relative; max-width:940px; }
.hero-mark{ width:clamp(52px,8vw,84px); margin:0 auto 1.6rem; }
.hero-title{
  font-size:clamp(3.2rem,13vw,9rem); letter-spacing:.07em; line-height:.94;
  background:linear-gradient(165deg,#faf0d8 0%,var(--gold) 45%,#8a6c33 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-tagline{ margin:1.5rem 0 0; font-size:clamp(.74rem,1.7vw,1rem); letter-spacing:.44em;
  text-transform:uppercase; color:var(--gold-soft); }
.hero-sub{ margin:2rem auto 0; max-width:600px; color:rgba(244,239,231,.78);
  font-size:clamp(1rem,1.5vw,1.13rem); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:2.8rem; }
.scroll-hint{ position:absolute; bottom:2.4rem; left:50%; translate:-50% 0; width:1px; height:64px; overflow:hidden; }
.scroll-line{ display:block; width:1px; height:100%;
  background:linear-gradient(to bottom,transparent,var(--gold)); animation:drop 2.8s var(--ease) infinite; }
@keyframes drop{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }

/* page hero (inner pages) — same cinema, shorter */
.page-hero{ position:relative; min-height:62svh; display:grid; place-items:center; text-align:center;
  padding:11rem 1.5rem 5rem; overflow:hidden; isolation:isolate; }
.page-hero .hero-bg{ animation:none; transform:none; }
.page-hero::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.62) 45%, rgba(20,20,20,.98) 100%); }
.page-hero h1{ font-size:clamp(2.6rem,7vw,5rem); }
.page-hero .lede{ margin-inline:auto; }

/* ============================ sections ===================== */
.section{ position:relative; padding:clamp(4.5rem,9vw,8rem) 0; }
.section.tight{ padding-block:clamp(3rem,6vw,5rem); }
.section.alt{ background:var(--ink-3); }
.section-head{ text-align:center; margin-bottom:clamp(2.6rem,5vw,4rem); }
.eyebrow{ display:flex; align-items:center; gap:.75rem; margin:0 0 1.15rem;
  font-size:.65rem; letter-spacing:.36em; text-transform:uppercase; color:var(--gold-deep); }
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--gold-deep); }
.section-head .eyebrow, .eyebrow.center{ justify-content:center; }
.display{ font-size:clamp(2.2rem,5.6vw,4.2rem); }
.display.center{ text-align:center; }
.lede{ color:rgba(244,239,231,.76); font-size:clamp(1rem,1.4vw,1.14rem); max-width:54ch; }
.statement{ font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,2.5vw,1.9rem);
  line-height:1.5; color:var(--gold-soft); max-width:40ch; margin-top:1.6rem; }
.rule{ width:72px; height:1px; background:var(--gold); margin:1.7rem auto; }
.rule.left{ margin-inline:0; }

/* ===================== split (image + text) ================= */
.split{ display:grid; grid-template-columns:1.02fr .98fr; align-items:stretch; }
.split__media{ position:relative; min-height:clamp(400px,64vh,760px);
  background-size:cover; background-position:center; }
.split__media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(20,20,20,.55) 0%, rgba(20,20,20,0) 45%); }
.split.flip .split__media::after{ background:linear-gradient(270deg, rgba(20,20,20,.55) 0%, rgba(20,20,20,0) 45%); }
.split__body{ display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2.6rem,6vw,6rem) clamp(1.6rem,5vw,5rem); background:var(--ink); }
.split.flip .split__media{ order:2; }
.split.on-dark .split__body{ background:var(--ink-3); }

/* ===================== lookbook grid ======================== */
.look{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2px; background:#000; }
.look__tile{ position:relative; overflow:hidden; aspect-ratio:3/4; display:block; }
.look__tile img{ width:100%; height:100%; object-fit:cover; object-position:center top;
  transition:transform 1.3s var(--ease), filter .8s var(--ease); filter:brightness(.82) saturate(.92); }
.look__tile:hover img{ transform:scale(1.07); filter:brightness(1) saturate(1); }
.look__cap{ position:absolute; inset:auto 0 0 0; padding:1.4rem 1.3rem;
  background:linear-gradient(to top, rgba(8,8,8,.92) 12%, rgba(8,8,8,0) 100%); }
.look__cap h3{ font-size:1.22rem; color:var(--gold-soft); margin-bottom:.35rem; }
.look__cap p{ margin:0; font-size:.83rem; color:rgba(244,239,231,.72); line-height:1.6; }
.look__num{ position:absolute; top:1.1rem; left:1.2rem; font-family:var(--serif);
  font-size:.85rem; letter-spacing:.28em; color:var(--gold); opacity:.85; }
.look__tile::after{ content:""; position:absolute; inset:0; border:1px solid transparent;
  transition:border-color .5s var(--ease); }
.look__tile:hover::after{ border-color:var(--line); }

/* ===================== photo band (parallax) ================ */
.band{ position:relative; padding:clamp(5rem,11vw,9rem) 0; text-align:center; isolation:isolate; overflow:hidden; }
.band-bg{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center;
  background-attachment:fixed; }
.band::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(9,9,9,.92), rgba(9,9,9,.72) 50%, rgba(9,9,9,.94)); }
.band blockquote{ margin:0 auto; max-width:920px; }
.band q{ font-family:var(--serif); font-style:italic; font-size:clamp(1.4rem,3.4vw,2.5rem);
  line-height:1.5; color:var(--cream); quotes:none; }
.band cite{ display:block; margin-top:1.9rem; font-style:normal; font-size:.66rem;
  letter-spacing:.36em; text-transform:uppercase; color:var(--gold); }

/* ===================== stats strip ========================== */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft);
  border-block:1px solid var(--line-soft); }
.stats li{ background:var(--ink); padding:clamp(1.8rem,3.4vw,2.8rem) 1.2rem; text-align:center; }
.stat-num{ display:block; font-family:var(--serif); font-size:clamp(2rem,4.6vw,3.1rem);
  color:var(--gold); line-height:1; }
.stat-num i{ font-style:normal; font-size:.5em; vertical-align:top; }
.stat-label{ display:block; margin-top:.7rem; font-size:.63rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--muted); }

/* ===================== pillars ============================== */
.pillars{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1px; background:var(--line-soft); }
.pillar{ background:var(--ink); padding:clamp(2rem,3.4vw,2.9rem); transition:background .55s var(--ease); }
.pillar:hover{ background:#1c1a17; }
.pillar__num{ font-family:var(--serif); font-size:.8rem; letter-spacing:.3em; color:var(--gold-deep); }
.pillar h3{ font-size:1.3rem; color:var(--gold-soft); margin:1.5rem 0 .7rem; }
.pillar p{ margin:0; color:rgba(244,239,231,.7); font-size:.95rem; }

/* ===================== service block ======================== */
.svc-title{ font-size:clamp(2rem,4.4vw,3.2rem); margin-bottom:.7rem; }
.svc-tag{ font-family:var(--serif); font-style:italic; font-size:1.2rem; color:var(--gold); margin-bottom:1.7rem; }
.list-gold{ margin-top:1.6rem; border-top:1px solid var(--line-soft); }
.list-gold li{ padding:.95rem 0; border-bottom:1px solid var(--line-soft); display:flex; gap:1rem; align-items:baseline; }
.list-gold b{ font-weight:400; color:var(--gold-soft); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; flex:0 0 auto; min-width:9.5rem; }
.list-gold span{ color:rgba(244,239,231,.74); font-size:.95rem; }
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.7rem; }
.chips li{ border:1px solid var(--line); padding:.45rem 1.05rem; font-size:.66rem;
  letter-spacing:.17em; text-transform:uppercase; color:var(--gold-soft); }
.more{ display:inline-flex; align-items:center; gap:.6rem; margin-top:1.4rem;
  font-size:.67rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.more::after{ content:""; width:26px; height:1px; background:var(--gold); transition:width .45s var(--ease); }
.more:hover::after{ width:46px; }

/* ===================== mission cards ======================== */
.cards-2{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line-soft); }
.card{ background:var(--ink); padding:clamp(2.2rem,4vw,3.4rem); transition:background .5s var(--ease); }
.card:hover{ background:#1c1a17; }
.card-glyph{ width:24px; height:24px; color:var(--gold); margin-bottom:1.2rem; }
.card-title{ font-size:1.5rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:.9rem; }
.card p{ margin:0; color:rgba(244,239,231,.74); }

/* ===================== contact ============================== */
.contact-inner{ text-align:center; }
.contact-mark{ width:60px; margin:0 auto 2rem; }
.contact-list{ margin:2.6rem 0 2.8rem; display:grid; gap:1.15rem; }
.contact-list a,.contact-list span{ font-size:clamp(.85rem,1.9vw,1.05rem); letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold-soft); transition:color .35s var(--ease); }
.contact-list a:hover{ color:var(--gold); }
.contact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px;
  background:var(--line-soft); margin-top:3.4rem; text-align:left; }
.contact-grid > div{ background:var(--ink); padding:2.2rem 1.7rem; }
.contact-grid h3{ font-family:var(--sans); font-weight:400; font-size:.66rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold-deep); margin-bottom:.8rem; }
.contact-grid p{ margin:0; color:rgba(244,239,231,.8); font-size:.95rem; }

/* ===================== footer =============================== */
.footer{ border-top:1px solid var(--line-soft); background:var(--ink-3); padding:3.2rem 0 2.6rem; }
.footer-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem; }
.footer-word{ font-family:var(--serif); font-size:1.5rem; color:var(--gold-soft); }
.footer-nav{ display:flex; gap:1.5rem; flex-wrap:wrap; }
.footer-nav a,.footer-note{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.footer-nav a{ transition:color .35s var(--ease); }
.footer-nav a:hover{ color:var(--gold); }

/* ===================== reveal =============================== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.delay{ transition-delay:.14s; } .reveal.delay-2{ transition-delay:.28s; }
.reveal.delay-3{ transition-delay:.42s; } .reveal.delay-4{ transition-delay:.56s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .scroll-line{ animation:none; } .hero-bg{ animation:none; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ===================== responsive =========================== */
@media (hover:none){ .band-bg{ background-attachment:scroll; } }
@media (max-width:980px){
  .split{ grid-template-columns:1fr; }
  .split.flip .split__media{ order:0; }
  .split__media{ min-height:52vh; }
  .cards-2{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .burger{ display:block; }
  .nav{ position:fixed; inset:0 0 auto 0; flex-direction:column; gap:0;
    padding:5.6rem 2rem 2.4rem; background:rgba(10,10,10,.98);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line-soft);
    clip-path:inset(0 0 100% 0); transition:clip-path .55s var(--ease); }
  .nav.open{ clip-path:inset(0 0 0 0); }
  .nav a{ width:100%; padding:1.05rem 0; border-bottom:1px solid var(--line-soft); font-size:.82rem; }
  .nav .nav-cta{ margin-top:1.4rem; text-align:center; }
  .list-gold li{ flex-direction:column; gap:.15rem; }
}
@media (max-width:560px){
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .footer-inner{ flex-direction:column; text-align:center; }
  .look{ grid-template-columns:1fr 1fr; }
}

/* ============================================================
   MOTION — restrained. Nothing bounces, nothing spins.
   Everything is opacity, a few pixels of travel, or a mask.
   ============================================================ */

/* thin gold reading line at the very top of the page */
.progress{ position:fixed; top:0; left:0; height:2px; width:100%; z-index:70;
  transform:scaleX(0); transform-origin:left; pointer-events:none;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-soft)); }

/* headings arrive from behind a mask, line by line */
.mask{ display:block; overflow:hidden; }
.mask > span{ display:block; transform:translateY(105%);
  transition:transform 1.15s var(--ease); }
.mask.in > span{ transform:none; }
.mask.d1 > span{ transition-delay:.09s; }
.mask.d2 > span{ transition-delay:.18s; }
.mask.d3 > span{ transition-delay:.27s; }

/* every gold hairline draws itself */
.rule{ transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease) .25s; }
.rule.in{ transform:scaleX(1); }
.rule:not(.left){ transform-origin:center; }

/* hero: one staggered entrance, then it settles */
.hero-mark,.hero-title,.hero-tagline,.hero-sub,.hero-actions{
  opacity:0; transform:translateY(18px); animation:rise 1.5s var(--ease) forwards; }
.hero-mark{ animation-delay:.25s; }
.hero-title{ animation-delay:.4s; }
.hero-tagline{ animation-delay:.68s; }
.hero-sub{ animation-delay:.86s; }
.hero-actions{ animation-delay:1.02s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* a single slow shine crossing the wordmark, once */
.hero-title{ position:relative; }
.hero-title::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 42%, rgba(255,244,220,.55) 50%, transparent 58%);
  background-size:260% 100%; background-position:180% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shine 3.4s var(--ease) 1.5s 1 forwards;
}
@keyframes shine{ to{ background-position:-80% 0; } }

/* the scroll cue fades away once the reader has started */
.scroll-hint{ transition:opacity .6s var(--ease); }
.scrolled .scroll-hint{ opacity:0; }

/* split imagery drifts a little slower than the page */
.split__media{ will-change:transform; }
.split__media > .par{ position:absolute; inset:-8% 0; background-size:cover; background-position:center; }

/* lookbook tiles settle in place */
.look__tile{ opacity:0; transform:translateY(24px) scale(.985);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.look__tile.in{ opacity:1; transform:none; }
.look__cap h3, .look__cap p{ transition:transform .7s var(--ease); }
.look__tile:hover .look__cap h3{ transform:translateY(-3px); }

/* stat figures lift as the strip arrives */
.stats li .stat-num{ display:block; transition:transform .9s var(--ease), opacity .9s var(--ease); }
.stats li.reveal .stat-num{ opacity:0; transform:translateY(12px); }
.stats li.reveal.in .stat-num{ opacity:1; transform:none; }

/* nav links and buttons: gold that arrives rather than blinks */
.btn, .nav a, .more, .look__tile img{ backface-visibility:hidden; }

@media (prefers-reduced-motion:reduce){
  .mask > span{ transform:none; }
  .rule{ transform:scaleX(1); }
  .hero-mark,.hero-title,.hero-tagline,.hero-sub,.hero-actions{ opacity:1; transform:none; animation:none; }
  .hero-title::after{ animation:none; }
  .look__tile{ opacity:1; transform:none; }
  .progress{ display:none; }
}

/* ============================================================
   BACKGROUNDS — the black is never flat.
   Grain over everything, gold light pooling at the corners,
   a slow guilloche watermark, leather under the dark bands.
   ============================================================ */

/* fine matte grain across the whole page */
body::before{
  content:""; position:fixed; inset:0; z-index:65; pointer-events:none; opacity:.055;
  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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* every section sits in a pool of gold light rather than on flat black */
.section, .split, .stats, .look, .footer{ position:relative; isolation:isolate; }
.section > *, .footer > *{ position:relative; z-index:2; }
.section::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(62% 58% at 10% -6%,  rgba(205,174,128,.075), transparent 68%),
    radial-gradient(54% 62% at 96% 104%, rgba(205,174,128,.055), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.34), transparent 22%, transparent 78%, rgba(0,0,0,.34));
}
.section.alt::before{
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(205,174,128,.085), transparent 62%),
    linear-gradient(180deg, #0a0a0a, #151311 45%, #0a0a0a);
}

/* leather grain under the dark sections — felt, not seen */
.section.alt::after, .stats::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:image-set(url("../img/photos/leather.webp") type("image/webp"),
              url("../img/photos/leather.jpg") type("image/jpeg")) center/cover;
  opacity:.13; mix-blend-mode:luminosity; filter:contrast(1.15) brightness(.7);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);
}
.stats li{ position:relative; z-index:2; background:rgba(20,20,20,.92); }

/* a guilloche watermark, turning once every two minutes */
.section--pattern::before{
  background:
    radial-gradient(62% 58% at 10% -6%, rgba(205,174,128,.075), transparent 68%),
    radial-gradient(54% 62% at 96% 104%, rgba(205,174,128,.05), transparent 70%);
}
.section--pattern .watermark{
  position:absolute; z-index:1; width:min(78vw,860px); aspect-ratio:1; right:-16%; top:50%;
  translate:0 -50%; pointer-events:none; opacity:.14;
  background:url("../img/guilloche.svg") center/contain no-repeat;
  animation:turn 150s linear infinite;
}
.section--pattern.left .watermark{ right:auto; left:-18%; }
@keyframes turn{ to{ rotate:360deg; } }

/* the text half of a split gets its own light, so it never reads as a slab */
.split__body{
  background:
    radial-gradient(70% 60% at 88% 0%, rgba(205,174,128,.085), transparent 62%),
    linear-gradient(180deg,#151515,#101010);
}
.split.on-dark .split__body{
  background:
    radial-gradient(70% 60% at 10% 100%, rgba(205,174,128,.075), transparent 62%),
    linear-gradient(180deg,#0e0e0e,#141312);
}

/* photographs breathe into the black instead of stopping at a hard edge */
.split__media::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(12,12,12,.55) 0%, transparent 26%, transparent 72%, rgba(12,12,12,.6) 100%);
}
.look__tile::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,10,10,.5), transparent 38%);
}
.look__cap, .look__num{ z-index:2; }

/* bands: photograph, then gold haze, then black */
.band::before{
  background:
    radial-gradient(65% 70% at 50% 45%, rgba(205,174,128,.14), transparent 65%),
    linear-gradient(180deg, rgba(8,8,8,.94), rgba(8,8,8,.72) 50%, rgba(8,8,8,.95));
}

/* footer closes the page with the same light */
.footer{ background:linear-gradient(180deg,#0b0b0b,#0e0d0c); }
.footer::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(50% 120% at 50% 0%, rgba(205,174,128,.07), transparent 70%);
}

/* ============================================================
   THE MARK — official lockup, gold on black (from the brand sheet)
   ============================================================ */
.brand-logo{ height:30px; width:auto; }
.topbar.stuck .brand-logo{ height:26px; transition:height .5s var(--ease); }

.hero-logo{ position:relative; width:min(80vw,640px); margin:0 auto; line-height:0; }
.hero-logo img{ width:100%; height:auto; }
.contact-logo{ width:min(62vw,340px); margin:0 auto 2.4rem; }
.card-glyph{ width:34px; height:auto; margin-bottom:1.3rem; opacity:.92; }

/* one slow gleam travelling across the lockup, shaped by the logo itself */
.gleam{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(112deg, transparent 40%, rgba(255,246,224,.85) 50%, transparent 60%);
  background-size:320% 100%; background-position:150% 0;
  -webkit-mask:url("../img/logo.png") center/contain no-repeat;
  mask:url("../img/logo.png") center/contain no-repeat;
  animation:gleam 7.5s var(--ease) 1.6s infinite;
}
@keyframes gleam{ 0%{background-position:150% 0} 42%,100%{background-position:-60% 0} }

/* ============================================================
   THE GEOMETRY MOVES — the guilloche turns, breathes, and catches
   the light. Slow enough to read as atmosphere, not animation.
   ============================================================ */
.hero-pattern{
  animation:turn 240s linear infinite, breathe 11s ease-in-out infinite alternate;
}
.hero-pattern.br{ animation-duration:300s, 13s; animation-direction:reverse, alternate; }
@keyframes breathe{ from{ opacity:.3 } to{ opacity:.62 } }

.hero-pattern .glint, .watermark .glint{
  position:absolute; inset:0; display:block; pointer-events:none;
  background:linear-gradient(115deg, transparent 41%, rgba(246,228,190,.95) 50%, transparent 59%);
  background-size:300% 100%; background-position:140% 0;
  -webkit-mask:url("../img/guilloche.svg") center/contain no-repeat;
  mask:url("../img/guilloche.svg") center/contain no-repeat;
  animation:glint 9s ease-in-out infinite;
}
.hero-pattern.br .glint{ animation-duration:12s; animation-delay:3.5s; }
@keyframes glint{ 0%{ background-position:140% 0 } 55%,100%{ background-position:-50% 0 } }

/* the same light crosses the section watermarks */
.section--pattern .watermark{ animation:turn 190s linear infinite, breathe 14s ease-in-out infinite alternate; }

/* a hairline of gold travels the seam between sections */
.seam{ position:relative; height:1px; background:var(--line-soft); overflow:hidden; }
.seam::after{
  content:""; position:absolute; top:0; left:-30%; width:30%; height:100%;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  animation:travel 7s linear infinite;
}
@keyframes travel{ to{ left:110%; } }

@media (prefers-reduced-motion:reduce){
  .gleam,.hero-pattern,.hero-pattern .glint,.watermark,.watermark .glint,.seam::after{ animation:none; }
  .hero-pattern{ opacity:.45; }
}

/* ============================================================
   CORRECTIONS measured off the rendered page, not guessed
   ============================================================ */

/* a mask must not clip the letterform it reveals */
.mask{ padding-bottom:.14em; margin-bottom:-.14em; }
.display, .svc-title{ line-height:1.1; }

/* portrait photography inside a landscape frame: frame from the top,
   and give the frame enough height that the crop stays a photograph */
.split__media{ min-height:clamp(520px,82vh,880px); background-position:center 12%; }
.split__media > .par{ inset:-9% 0; background-position:center 12%; }

/* the lookbook reads better a little taller */
.look__tile{ aspect-ratio:4/5; }

/* section watermark needs a stacking home */
.section--pattern .watermark{ z-index:1; }
.look__h{ display:block; font-family:var(--serif); font-size:1.24rem; color:var(--gold-soft); margin-bottom:.4rem; }
.look__p{ display:block; font-size:.83rem; color:rgba(244,239,231,.72); line-height:1.6; }

/* a photograph behind words is a texture, not a picture — hold it back */
.band-bg{ filter:brightness(.72) contrast(1.06) saturate(.95); }
.band::before{
  background:
    radial-gradient(62% 68% at 50% 45%, rgba(205,174,128,.12), transparent 66%),
    linear-gradient(180deg, rgba(8,8,8,.95), rgba(8,8,8,.85) 50%, rgba(8,8,8,.96));
}
/* the industrial face sits slightly low in frame */
.look__tile img{ object-position:center 22%; }

/* ============================================================
   LIGHTBOX — the photograph, full size, on black
   ============================================================ */
.look__tile{ border:0; padding:0; background:none; cursor:pointer; font:inherit; text-align:left; width:100%; }
.look__zoom{
  position:absolute; top:1.1rem; right:1.2rem; z-index:3; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); opacity:0; transform:scale(.9);
  transition:opacity .45s var(--ease), transform .45s var(--ease), background .45s var(--ease);
}
.look__zoom::before,.look__zoom::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--gold-soft);
}
.look__zoom::before{ width:11px; height:1px; translate:-50% -50%; }
.look__zoom::after{ width:1px; height:11px; translate:-50% -50%; }
.look__tile:hover .look__zoom,.look__tile:focus-visible .look__zoom{ opacity:1; transform:scale(1); }
.look__tile:hover .look__zoom{ background:rgba(205,174,128,.14); }

.lb{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:clamp(1rem,4vw,3rem);
  background:rgba(6,6,6,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
.lb.open{ opacity:1; visibility:visible; }
.lb__stage{ margin:0; max-width:min(1100px,92vw); text-align:center; }
.lb__stage img{
  max-height:76vh; max-width:100%; width:auto; margin:0 auto; border:1px solid var(--line);
  opacity:0; transform:scale(.985); transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.lb__stage img.ready{ opacity:1; transform:none; }
.lb figcaption{ margin-top:1.5rem; display:grid; gap:.45rem; }
.lb__count{ font-size:.64rem; letter-spacing:.34em; color:var(--gold-deep); }
.lb__title{ font-family:var(--serif); font-size:1.5rem; color:var(--gold-soft); }
.lb__text{ font-size:.9rem; color:rgba(244,239,231,.7); }
.lb__close,.lb__nav{
  position:absolute; background:none; border:1px solid var(--line); color:var(--gold-soft);
  cursor:pointer; display:grid; place-items:center; transition:background .4s var(--ease), color .4s var(--ease);
}
.lb__close:hover,.lb__nav:hover{ background:var(--gold); color:var(--ink); }
.lb__close{ top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); width:44px; height:44px; font-size:1.4rem; line-height:1; }
.lb__nav{ top:50%; translate:0 -50%; width:48px; height:64px; font-size:1.7rem; line-height:1; }
.lb__prev{ left:clamp(.6rem,3vw,2.4rem); } .lb__next{ right:clamp(.6rem,3vw,2.4rem); }
@media (max-width:620px){
  .lb__nav{ top:auto; bottom:1.2rem; translate:0 0; width:44px; height:44px; }
  .lb__stage img{ max-height:62vh; }
}

/* pillars: three across, two on a tablet, one on a phone */
.pillars{ grid-template-columns:repeat(3,1fr); }
@media (max-width:980px){ .pillars{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px){
  .pillars{ grid-template-columns:1fr; }
  .look{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:620px){ .look{ grid-template-columns:1fr !important; } }

/* the mark carries the header — give it room */
.brand-logo{ height:46px; }
.topbar.stuck .brand-logo{ height:38px; }
@media (max-width:620px){ .brand-logo{ height:38px; } .topbar.stuck .brand-logo{ height:32px; } }

/* the parallax layer is inset beyond its frame — the frame must clip it */
.split__media{ overflow:hidden; }

/* the decorative geometry must be clipped by its section, or the page
   grows 300px wider than the window */
html{ overflow-x:clip; }
.section{ overflow:hidden; }

/* ============================================================
   ONE FIELD OF GEOMETRY — fixed behind the whole page, so the
   pattern reads as a single continuous thing and no section edge
   ever cuts it in half.
   ============================================================ */
.field{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.field .ring{
  position:absolute; display:block; aspect-ratio:1;
  background:url("../img/guilloche.svg") center/contain no-repeat;
}
.field .ring--a{ width:min(58vw,760px); top:-16vh;  left:-14vw;  opacity:.34;
  animation:turn 260s linear infinite, breathe 17s ease-in-out infinite alternate; }
.field .ring--b{ width:min(64vw,880px); bottom:-22vh; right:-16vw; opacity:.30;
  animation:turn 320s linear infinite reverse, breathe 21s ease-in-out infinite alternate; }
.field .ring--c{ width:min(46vw,620px); top:38vh; right:26vw; opacity:.12;
  animation:turn 400s linear infinite; }
.field .glint{
  position:absolute; inset:0; display:block;
  background:linear-gradient(115deg, transparent 42%, rgba(246,228,190,.9) 50%, transparent 58%);
  background-size:300% 100%; background-position:140% 0;
  -webkit-mask:url("../img/guilloche.svg") center/contain no-repeat;
  mask:url("../img/guilloche.svg") center/contain no-repeat;
  animation:glint 11s ease-in-out infinite;
}
.field .ring--b .glint{ animation-duration:14s; animation-delay:4s; }

/* the page rides above the field */
.topbar, main, .footer{ position:relative; z-index:2; }

/* sections stop being opaque slabs — the field shows through, and their
   edges fade instead of drawing a line across the geometry */
.section::before{
  background:
    radial-gradient(62% 58% at 10% -6%,  rgba(205,174,128,.06), transparent 68%),
    radial-gradient(54% 62% at 96% 104%, rgba(205,174,128,.045), transparent 70%),
    linear-gradient(180deg, rgba(10,10,10,.72), rgba(14,14,14,.5) 30%, rgba(14,14,14,.5) 70%, rgba(10,10,10,.72));
}
.section.alt::before{
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(205,174,128,.07), transparent 62%),
    linear-gradient(180deg, rgba(8,8,8,.9), rgba(16,15,13,.62) 38%, rgba(16,15,13,.62) 62%, rgba(8,8,8,.9));
}
.section.alt::after{ opacity:.09; }
.hero, .page-hero{ z-index:2; }

/* the field is decoration — a phone should not spend its battery on it */
@media (max-width:700px){
  .field .ring{ animation:none; opacity:.22; }
  .field .glint{ display:none; }
  .field .ring--c{ display:none; }
}
/* <picture> wrapping must not break the tile's fill */
.look__tile picture{ display:block; width:100%; height:100%; }

/* ============================================================
   THE OFFICE — the address is the most functional thing on the
   site, so it gets room and hierarchy rather than a small line
   ============================================================ */
.office{ display:grid; grid-template-columns:1.15fr .85fr; gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft); margin-bottom:clamp(2rem,4vw,3.2rem); }
.office__card{ background:rgba(20,20,20,.94); padding:clamp(2.2rem,4vw,3.4rem); }
.office__name{ font-size:clamp(1.5rem,2.8vw,2.1rem); color:var(--gold-soft); margin-bottom:1.4rem; }
.office__addr{ font-style:normal; color:rgba(244,239,231,.82); line-height:2.05; font-size:1.02rem; }
.office__lines{ display:grid; gap:1px; background:var(--line-soft); border-block:1px solid var(--line-soft); }
.office__lines li{ background:rgba(20,20,20,.94); display:flex; align-items:baseline; gap:1rem;
  padding:.95rem .2rem; }
.office__k{ flex:0 0 6.5rem; font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep); }
.office__lines a{ color:var(--gold-soft); transition:color .35s var(--ease); }
.office__lines a:hover{ color:var(--gold); }
.office .more{ margin-top:1.8rem; }
@media (max-width:860px){ .office{ grid-template-columns:1fr; } }