/* ===========================================================
   FRESH★SAM — "THE ISSUE" (dark fashion-magazine direction)
   Warm near-black + bone type + two editorial inks (gold &
   oxblood). Fraunces display, mono folios/captions. The page
   is a magazine: cover → contents → spreads. Restraint is the
   rule; the photography carries the color.
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,400;1,500&display=swap');
:root {
  --ink:  #0b0b0c;
  --ink2: #141214;
  --bone: #ece7dd;
  --bone-dim: rgba(236,231,221,0.58);
  --gold: #c9a24b;
  --oxblood: #9a3f2b;
  --line: rgba(236,231,221,0.16);
  --disp: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --script: 'Great Vibes', 'Snell Roundhand', cursive;
  --voice: 'DM Sans', system-ui, sans-serif;
  --sans: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--ink); color: var(--bone); font-family: var(--sans); font-weight: 300; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.folio { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-dim); }
.rule { height: 1px; background: var(--line); border: 0; }

/* ---------- COVER ---------- */
.cover { position: relative; height: 100svh; min-height: 640px; overflow: hidden; }
.cover-img { position: absolute; inset: 0; }
.cover-img img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.cover-img::after { content: ''; position: absolute; inset: 0; background:
  linear-gradient(to bottom, rgba(11,11,12,0.72) 0%, rgba(11,11,12,0.15) 30%, rgba(11,11,12,0.25) 60%, rgba(11,11,12,0.85) 100%); }
.cover-inner { position: relative; z-index: 2; height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(1rem,3vw,2rem) clamp(1.1rem,4vw,3rem) clamp(1.4rem,3vw,2.2rem); }
/* masthead */
.masthead { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.masthead .brand { font-family: var(--script); font-weight: 400; font-size: clamp(1.4rem, 3vw, 2.1rem); letter-spacing: 0.02em; }
.masthead .m-right { display: flex; gap: 1.6rem; align-items: center; }
.masthead .m-right a { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone); opacity: 0.8; transition: opacity 0.2s; }
.masthead .m-right a:hover { opacity: 1; }
.masthead .m-book { border-bottom: 1px solid var(--gold); padding-bottom: 3px; opacity: 1 !important; }
.m-menu { display: none; background: none; border: 0; color: var(--bone); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
/* the big cover wordmark */
.cover-title { align-self: center; text-align: center; }
.cover-title h1 { font-family: var(--script); font-weight: 400; font-size: clamp(4rem, 15vw, 11rem); line-height: 0.92; letter-spacing: 0; }
.cover-title .star { font-family: var(--disp); font-weight: 500; color: var(--gold); font-size: 0.5em; vertical-align: 0.18em; margin: 0 0.06em; }
.cover-title .tagline { font-family: var(--voice); font-style: italic; font-weight: 300; font-size: clamp(0.95rem, 1.9vw, 1.45rem); color: var(--bone); margin: 1.4rem auto 0; max-width: none; white-space: nowrap; }
@media (max-width: 720px) { .cover-title .tagline { white-space: normal; max-width: 30ch; font-size: clamp(1rem, 4.4vw, 1.3rem); } }
.cover-logo { display: block; width: min(94%, 1250px); height: auto; margin: 0 auto; }
/* coverlines + folio at the base */
.cover-base { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1rem; }
.coverlines { display: flex; flex-direction: column; gap: 0.4rem; }
.coverlines span { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-dim); }
.coverlines .hot { color: var(--gold); }
.cover-cta { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 999px; padding: 0.8rem 1.4rem; white-space: nowrap; transition: border-color 0.2s, color 0.2s; }
.cover-cta:hover { border-color: var(--gold); color: var(--gold); }
/* folio strip runs across just under the masthead */
.cover-folio { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.7rem; }

/* ---------- INTERIOR NAV (masthead bar on inside pages) ---------- */
.mag-nav { position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.05rem clamp(1.1rem,4vw,3rem); background: color-mix(in srgb, var(--ink) 90%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.mag-nav .brand { font-family: var(--script); font-weight: 400; font-size: 1.2rem; letter-spacing: 0.01em; display: flex; align-items: center; }
.mag-nav .brand .star { color: var(--gold); }
.nav-logo-img { height: 22px; width: auto; display: block; }
.mag-nav .mnav { display: flex; gap: 1.5rem; align-items: center; }
.mag-nav .mnav a { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone); opacity: 0.78; transition: opacity 0.2s, color 0.2s; }
.mag-nav .mnav a:hover, .mag-nav .mnav a.active { opacity: 1; color: var(--gold); }
.mag-nav .mnav a.book { border-bottom: 1px solid var(--gold); padding-bottom: 3px; opacity: 1; color: var(--bone); }

/* ---------- FEATURE OPENER (inside-page header) ---------- */
.opener { padding: clamp(3.5rem,9vw,8rem) clamp(1.1rem,4vw,3rem) clamp(1.5rem,4vw,3rem); }
.opener .folio-row { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: 1rem; margin-bottom: clamp(2rem,5vw,3.5rem); }
.opener h1 { font-family: var(--disp); font-weight: 500; font-size: clamp(2.8rem,9vw,7rem); line-height: 0.92; letter-spacing: -0.02em; }
.opener h1 em { color: var(--gold); }
.opener .standfirst { font-family: var(--sans); font-style: normal; font-weight: 300; font-size: clamp(0.95rem,1.9vw,1.25rem); line-height: 1.65; letter-spacing: 0; color: rgba(236,231,221,0.82); max-width: 60ch; margin-top: 1.7rem; }
.mag-feature { padding: 0 clamp(1.1rem,4vw,3rem); }
.mag-feature img { width: 100%; height: clamp(50vh,68vh,80vh); object-fit: cover; }
.mag-feature figcaption { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-dim); margin-top: 0.7rem; display: flex; justify-content: space-between; }
.mag-prose { max-width: 760px; }
.mag-prose p { font-size: 1.05rem; line-height: 1.85; color: rgba(236,231,221,0.8); margin-bottom: 1.4rem; }
.mag-prose p em { color: var(--gold); }
.mag-standquote { border-left: 2px solid var(--gold); padding-left: 1.5rem; font-family: var(--voice); font-style: italic; font-weight: 300; font-size: clamp(1.4rem,3vw,2.1rem); line-height: 1.3; color: var(--bone); max-width: 20ch; }
.credits { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; }
.credits span { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-dim); }
.credits span:hover { color: var(--gold); }

/* ---------- SECTION SHELL ---------- */
.mag-section { padding: clamp(3.5rem, 9vw, 8rem) clamp(1.1rem, 4vw, 3rem); }
.mag-kicker { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 1rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.mag-kicker .k { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.mag-kicker .k2 { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-dim); }
.mag-h { font-family: var(--disp); font-weight: 500; font-size: clamp(2rem, 5.5vw, 4.5rem); line-height: 0.98; letter-spacing: -0.015em; }
.mag-h em { color: var(--gold); }

/* ---------- CONTENTS ---------- */
.contents a { display: grid; grid-template-columns: auto 1fr auto; gap: 1.4rem; align-items: baseline; padding: 1.5rem 0; border-bottom: 1px solid var(--line); transition: padding-left 0.3s ease, color 0.2s; }
.contents a:first-child { border-top: 1px solid var(--line); }
.contents a:hover { padding-left: 0.7rem; }
.contents .rn { font-family: var(--mono); font-size: 0.72rem; color: var(--gold); width: 2.5rem; }
.contents .ct { font-family: var(--disp); font-weight: 500; font-size: clamp(1.5rem, 3.4vw, 2.6rem); }
.contents .ct em { font-style: italic; color: var(--bone-dim); }
.contents .cd { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-dim); text-align: right; max-width: 22ch; }

/* ---------- SPREADS / GALLERY ---------- */
.spreads { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
.plate { position: relative; overflow: hidden; }
.plate img { width: 100%; height: auto; object-fit: cover; transition: transform 0.9s cubic-bezier(0.2,0,0.1,1); }
.plate:hover img { transform: scale(1.04); }
.plate figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.7rem; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-dim); }
.plate figcaption .t { color: var(--bone); }
.c7 { grid-column: span 7; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; } .c8 { grid-column: span 8; } .c4 { grid-column: span 4; } .c12 { grid-column: span 12; }
.ar34 img { aspect-ratio: 3/4; } .ar43 img { aspect-ratio: 4/3; } .ar1610 img { aspect-ratio: 16/10; }
/* social-repost card — show the whole screenshot, don't crop the handle/caption */
.plate.ig { background: #0f0d0e; border-radius: 8px; overflow: hidden; }
.plate.ig img { aspect-ratio: 4/5; object-fit: contain; background: #0f0d0e; }
.plate.ig:hover img { transform: none; }
/* mobile: even 2-up gallery so nothing is a tiny sliver; reposts go full width */
@media (max-width: 700px) {
  .spreads { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .spreads .plate { grid-column: auto; }
  .spreads .plate.ig, .spreads .plate.c12 { grid-column: 1 / -1; }
}
.drop { margin-top: clamp(2rem, 6vw, 5rem); }

/* ---------- PORTFOLIO MOSAIC (tight, gapless, equal tiles) ---------- */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: clamp(1.5rem,4vw,2.5rem); }
.mosaic figure { position: relative; overflow: hidden; margin: 0; }
.mosaic img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform 0.7s cubic-bezier(0.2,0,0.1,1); }
.mosaic figure:hover img { transform: scale(1.05); }
.mosaic figure::after { content: ''; position: absolute; inset: 0; background: rgba(11,11,12,0.32); z-index: 1; transition: opacity 0.35s; pointer-events: none; }
.mosaic figure:hover::after { opacity: 0; }
.mosaic figcaption { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0.6rem; font-family: var(--mono); font-weight: 500; font-size: clamp(0.7rem, 1.15vw, 0.98rem); letter-spacing: 0.14em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,0.55); transition: opacity 0.35s; pointer-events: none; }
.mosaic figure:hover figcaption { opacity: 0; }
@media (max-width: 900px) { .mosaic { grid-template-columns: repeat(2, 1fr); } }

/* ---------- PULL QUOTE SPREAD ---------- */
.pull { background: var(--ink2); padding: clamp(4rem, 11vw, 9rem) clamp(1.1rem, 4vw, 3rem); text-align: center; }
.pull blockquote { font-family: var(--voice); font-style: italic; font-weight: 300; font-size: clamp(1.6rem, 4.5vw, 3.4rem); line-height: 1.2; letter-spacing: -0.01em; max-width: 20ch; margin: 0 auto 1.5rem; }
.pull .attr { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.pull .attr span { color: var(--bone-dim); display: block; margin-top: 0.3rem; }

/* ---------- RATE CARD (services) ---------- */
.ratecard a { display: grid; grid-template-columns: auto 1fr auto auto; gap: 1.2rem; align-items: baseline; padding: 1.3rem 0; border-bottom: 1px solid var(--line); transition: padding-left 0.3s ease; }
.ratecard a:first-child { border-top: 1px solid var(--line); }
.ratecard a:hover { padding-left: 0.7rem; }
.ratecard .rn { font-family: var(--mono); font-size: 0.7rem; color: var(--bone-dim); }
.ratecard .rt { font-family: var(--disp); font-weight: 500; font-size: clamp(1.3rem, 2.8vw, 2rem); }
.ratecard .rmeta { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-dim); text-align: right; }
.ratecard .rp { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }

/* ---------- DISCIPLINES SHOWCASE (homepage — three equal pillars) ---------- */
.disciplines { margin-top: clamp(1rem,3vw,2.5rem); }
.disc { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem,4.5vw,4rem); align-items: center; }
.disc:not(:first-child) { margin-top: clamp(3.5rem,8vw,7rem); }
.disc.flip .disc-media { order: 2; }
.disc-media { position: relative; overflow: hidden; }
.disc-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform 0.9s cubic-bezier(0.2,0,0.1,1), filter 0.5s; }
.disc:hover .disc-media img { transform: scale(1.045); }
.disc-media .frame-no { position: absolute; top: 0.9rem; left: 1rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.82); mix-blend-mode: difference; }
.disc-body .num { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.disc-body h3 { font-family: var(--disp); font-weight: 500; font-size: clamp(2.4rem,6vw,4.6rem); line-height: 0.98; letter-spacing: -0.02em; margin: 0.6rem 0 0.2rem; }
.disc-body h3 em { color: var(--gold); }
.disc-body .lede { font-family: var(--voice); font-style: italic; font-weight: 300; font-size: clamp(1.15rem,2.2vw,1.55rem); color: var(--bone); line-height: 1.35; margin: 0.4rem 0 1.1rem; max-width: 26ch; }
.disc-body p { color: rgba(236,231,221,0.78); line-height: 1.7; max-width: 46ch; margin-bottom: 1.3rem; }
.disc-body .disc-tags { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0; margin-bottom: 1.6rem; }
.disc-body .disc-tags span { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-dim); }
.disc-body .disc-tags span:not(:last-child)::after { content: '·'; color: var(--gold); margin: 0 0.6rem; }
.disc-body .disc-cta { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 1px solid var(--gold); padding-bottom: 4px; color: var(--bone); transition: color 0.2s, gap 0.2s; }
.disc-body .disc-cta:hover { color: var(--gold); gap: 0.85rem; }
@media (max-width: 820px) { .disc { grid-template-columns: 1fr; gap: 1.5rem; } .disc.flip .disc-media { order: 0; } .disc-media img { aspect-ratio: 4/3; } }

/* ---------- FEATURED BUILD (video showcase) ---------- */
.build { display: grid; grid-template-columns: 0.82fr 1fr; gap: clamp(1.5rem,5vw,4.5rem); align-items: center; padding: clamp(3.5rem,9vw,8rem) clamp(1.1rem,4vw,3rem); border-top: 1px solid var(--line); }
.build-media { justify-self: center; width: 100%; max-width: 440px; border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 30px 70px rgba(0,0,0,0.5); }
.build-media video { width: 100%; display: block; }
/* inline build — sits directly under a discipline block */
.build.build-inline { border-top: 0; padding-top: clamp(1rem,3vw,2rem); padding-bottom: 0; }
/* flipped build — media on the right, text on the left */
.build.flip { grid-template-columns: 1fr 0.82fr; }
.build.flip .build-media { order: 2; }
@media (max-width: 820px) { .build.flip .build-media { order: 0; } }
.build-body .k { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.build-body h2 { font-family: var(--disp); font-weight: 500; font-size: clamp(2.2rem,5.5vw,4rem); line-height: 1; letter-spacing: -0.02em; margin: 0.6rem 0 0.2rem; }
.build-body h2 em { color: var(--gold); }
.build-body .lede { font-family: var(--voice); font-style: italic; font-weight: 300; font-size: clamp(1.15rem,2.2vw,1.6rem); color: var(--bone); margin: 0.4rem 0 1.1rem; }
.build-body p { color: rgba(236,231,221,0.78); line-height: 1.7; max-width: 46ch; margin-bottom: 1.4rem; }
.build-meta { display: grid; gap: 0.5rem; margin-bottom: 1.6rem; max-width: 420px; }
.build-meta div { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); padding-top: 0.6rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-dim); }
.build-meta div span:last-child { color: var(--bone); }
.build-cta { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 1px solid var(--gold); padding-bottom: 4px; color: var(--bone); transition: color 0.2s, gap 0.2s; }
.build-cta:hover { color: var(--gold); gap: 0.85rem; }
@media (max-width: 820px) { .build, .build.flip { grid-template-columns: 1fr; gap: 1.6rem; } .build-media { max-width: 460px; } .build.flip .build-media { order: 0; } .build-body p, .build-meta { max-width: none; } }

/* ---------- ON-SET PROJECT (Stranger Things etc.) ---------- */
.st-head { max-width: 780px; margin-bottom: clamp(2rem,5vw,3rem); }
.st-brand { display: block; font-family: var(--disp); font-weight: 600; font-size: clamp(1.7rem,4.5vw,2.8rem); letter-spacing: 0.04em; text-transform: uppercase; color: #e10600; margin-bottom: 0.7rem; line-height: 1; }
.st-head .k { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.st-head h3 { font-family: var(--disp); font-weight: 500; font-size: clamp(2rem,5vw,3.6rem); line-height: 1; letter-spacing: -0.02em; margin: 0.5rem 0 0.9rem; }
.st-head h3 em { color: var(--gold); }
.st-head p { color: rgba(236,231,221,0.8); line-height: 1.7; max-width: 52ch; margin-bottom: 1.3rem; }
.st-head p em { font-style: italic; color: var(--bone); }
.st-head .build-meta { max-width: 460px; }
/* compact project gallery — smaller images so more projects fit */
.st-project .spreads .plate img { aspect-ratio: auto; height: clamp(200px, 26vw, 340px); width: 100%; object-fit: cover; }
@media (max-width: 820px) { .st-project .spreads .plate img { height: clamp(180px, 46vw, 300px); } }

/* ---------- TRUST WALL (clean centered logo lockup) ---------- */
.trustwall { padding: clamp(3rem,7vw,6rem) clamp(1.1rem,4vw,3rem); border-top: 1px solid var(--line); text-align: center; }
.tw-group + .tw-group { margin-top: clamp(2.4rem,5vw,3.8rem); }
.tw-cap { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-dim); margin-bottom: clamp(1.5rem,3.5vw,2.4rem); }
.tw-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.8rem,5vw,4.2rem); }
.tw-row img { height: clamp(24px,3vw,38px); width: auto; object-fit: contain; filter: grayscale(1) brightness(2.4); opacity: 0.6; transition: opacity 0.3s, filter 0.3s; }
.tw-row img:hover { opacity: 1; filter: none; }
.tw-name { font-family: var(--mono); font-weight: 400; font-size: clamp(0.92rem,1.5vw,1.2rem); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(236,231,221,0.5); transition: color 0.3s; white-space: nowrap; }
.tw-name:hover { color: var(--bone); }
.tw-logos { width: min(100%, 980px); height: auto; margin: 0 auto; display: block; opacity: 0.82; transition: opacity 0.35s; }
.tw-logos:hover { opacity: 1; }

/* ---------- BACK PAGES (image cards — About / Course / Speaking / Shop) ---------- */
.backpages { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.6rem); margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.bp-card { display: block; }
.bp-media { position: relative; border-radius: 0; overflow: hidden; }
.bp-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform 0.9s cubic-bezier(0.2,0,0.1,1), filter 0.5s; filter: grayscale(0.1) contrast(1.02); }
.bp-card:hover .bp-media img { transform: scale(1.06); filter: none; }
.bp-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,11,12,0.72) 0%, rgba(11,11,12,0) 52%); }
.bp-media .bp-kick { position: absolute; z-index: 2; top: 0.9rem; left: 1rem; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.bp-media .bp-name { position: absolute; z-index: 2; bottom: 0.85rem; left: 1rem; right: 1rem; font-family: var(--disp); font-weight: 500; font-size: clamp(1.25rem, 1.7vw, 1.6rem); line-height: 1.06; color: var(--bone); }
.bp-body { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; padding: 0.9rem 0.2rem 0; }
.bp-body .bp-sub { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-dim); }
.bp-body .bp-arw { font-family: var(--mono); font-size: 0.72rem; color: var(--gold); transition: transform 0.25s ease; }
.bp-card:hover .bp-body .bp-arw { transform: translateX(0.3rem); }
@media (max-width: 820px) { .backpages { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .backpages { grid-template-columns: 1fr; } .bp-media img { aspect-ratio: 16/10; } }

/* ---------- CONTACT ICON BUTTONS ---------- */
.touch-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 2.5rem; }
.touch-cell { background: var(--ink); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.85rem; padding: 2.6rem 1rem 2.2rem; text-decoration: none; transition: background 0.25s; }
.touch-cell:hover { background: var(--ink2); }
.touch-n { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em; color: var(--gold); }
.touch-ico { width: 62px; height: 62px; border: 1px solid rgba(201,162,75,0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: border-color 0.25s, background 0.25s, transform 0.25s; }
.touch-cell:hover .touch-ico { border-color: var(--gold); background: rgba(201,162,75,0.08); transform: translateY(-3px); }
.touch-ico svg { width: 24px; height: 24px; stroke: var(--gold); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.touch-label { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone); }
.touch-sub { font-family: var(--sans); font-weight: 300; font-size: 0.74rem; color: var(--bone-dim); }
@media (max-width: 900px) { .touch-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .touch-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- OFFERINGS (what I make — standout) ---------- */
.offerings { border-top: 1px solid var(--line); margin-top: 2.5rem; }
.offerings-row { display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: baseline; padding: clamp(1.3rem,3.5vw,2.3rem) 0; border-bottom: 1px solid var(--line); transition: padding-left 0.3s ease; text-decoration: none; }
.offerings-row:hover { padding-left: 0.9rem; }
.offerings-row .on { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--gold); }
.offerings-row .ot { font-family: var(--disp); font-weight: 500; font-size: clamp(2rem,5.6vw,4.3rem); line-height: 1; letter-spacing: -0.015em; color: var(--bone); }
.offerings-row:hover .ot { color: var(--gold); }
.offerings-row .od { font-family: var(--sans); font-weight: 300; font-size: 1.05rem; line-height: 1.6; color: rgba(236,231,221,0.72); text-align: right; max-width: 46ch; justify-self: end; }
@media (max-width: 760px) { .offerings-row { grid-template-columns: auto 1fr; } .offerings-row .od { grid-column: 1 / -1; text-align: left; max-width: none; margin-top: 0.5rem; font-size: 1rem; } }

/* ---------- PROCESS FLOW (icons) ---------- */
.flow { display: flex; margin-top: 3rem; }
.flow-step { flex: 1; text-align: center; position: relative; padding: 0 0.4rem; }
.flow-step:not(:last-child)::after { content: ''; position: absolute; top: 33px; left: 50%; width: 100%; height: 1px; background: var(--line); z-index: 0; }
.flow-icon { width: 66px; height: 66px; border: 1px solid rgba(201,162,75,0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.1rem; background: var(--ink); position: relative; z-index: 1; transition: border-color 0.25s, background 0.25s; }
.flow-step:hover .flow-icon { border-color: var(--gold); background: var(--ink2); }
.flow-icon svg { width: 28px; height: 28px; stroke: var(--gold); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.flow-step .n { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em; color: var(--gold); }
.flow-step h4 { font-family: var(--disp); font-weight: 500; font-size: 1.05rem; color: var(--bone); margin: 0.3rem 0 0.4rem; }
.flow-step p { font-size: 0.72rem; line-height: 1.5; color: var(--bone-dim); max-width: 18ch; margin: 0 auto; }
@media (max-width: 820px) {
  .flow { flex-direction: column; }
  .flow-step { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; text-align: left; padding: 0.6rem 0; align-items: center; }
  .flow-step:not(:last-child)::after { top: 66px; left: 33px; width: 1px; height: 100%; }
  .flow-icon { margin: 0; }
  .flow-step p { max-width: none; }
}

/* ---------- DESIGN OPENER (atelier split) ---------- */
.design-opener { display: grid; grid-template-columns: 1fr 1fr; min-height: 90vh; }
.design-opener .do-img { position: relative; overflow: hidden; }
.design-opener .do-img img { width: 100%; height: 100%; object-fit: cover; }
.design-opener .do-img .frame-no { position: absolute; top: 1rem; left: 1rem; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.8); mix-blend-mode: difference; }
.design-opener .do-text { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem,6vw,5rem); }
.design-opener .do-label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; }
.design-opener h1 { font-family: var(--disp); font-weight: 500; font-size: clamp(2.8rem,6vw,5.5rem); line-height: 0.95; letter-spacing: -0.02em; }
.design-opener h1 em { color: var(--gold); }
.design-opener .do-intro { color: rgba(236,231,221,0.78); line-height: 1.75; margin: 1.5rem 0; max-width: 46ch; }
.design-opener .caps { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.design-opener .caps span { border: 1px solid var(--line); border-radius: 2px; padding: 0.42rem 0.9rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-dim); }
.design-opener .do-caps { font-size: 0.95rem; line-height: 1.8; color: var(--bone-dim); max-width: 46ch; margin-bottom: 2rem; }
.design-opener .do-caps b { color: var(--bone); font-weight: 400; }
.design-opener .do-cta { align-self: flex-start; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 999px; padding: 0.85rem 1.5rem; transition: border-color 0.2s, color 0.2s; }
.design-opener .do-cta:hover { border-color: var(--gold); color: var(--gold); }
@media (max-width: 820px) { .design-opener { grid-template-columns: 1fr; min-height: 0; } .design-opener .do-img { height: 62vh; } .design-opener .do-text { padding-top: 3rem; padding-bottom: 3rem; } }

/* ---------- CREATIVE DIRECTION HERO (contact sheet) ---------- */
.cd-hero { padding-top: clamp(4.5rem,9vw,7rem); }
.cd-hero-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding: 0 clamp(1.1rem,4vw,3rem) 1.1rem; }
.cd-hero-bar .lab { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.cd-hero-bar .yr { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-dim); }
.cd-hero-intro { font-family: var(--voice); font-style: italic; font-weight: 300; font-size: clamp(1.15rem,2.4vw,1.9rem); line-height: 1.35; color: var(--bone); max-width: 44ch; padding: 0 clamp(1.1rem,4vw,3rem) clamp(1.5rem,4vw,2.5rem); }
.contact-sheet { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.contact-sheet .cs { aspect-ratio: 1 / 1; overflow: hidden; position: relative; }
.contact-sheet .cs img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.2,0,0.1,1), filter 0.4s; filter: grayscale(0.15) contrast(1.02); }
.contact-sheet .cs:hover img { transform: scale(1.07); filter: none; }
.contact-sheet .cs .frame-no { position: absolute; top: 0.5rem; left: 0.6rem; font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.75); mix-blend-mode: difference; }
@media (max-width: 700px) { .contact-sheet { grid-template-columns: repeat(2, 1fr); } }

/* ---------- CLIENT LOGO WALL ---------- */
.m-logowall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); margin-top: 2.5rem; }
.m-logo-cell { background: var(--ink); aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; padding: 1.2rem; transition: background 0.25s; }
.m-logo-cell:hover { background: var(--ink2); }
.m-logo-cell img { max-width: 78%; max-height: 46px; object-fit: contain; filter: grayscale(1) brightness(2.6); opacity: 0.55; transition: filter 0.25s, opacity 0.25s; }
.m-logo-cell:hover img { filter: none; opacity: 1; }
.m-logo-fallback { font-family: var(--voice); font-style: italic; font-weight: 300; font-size: 1.05rem; color: var(--bone-dim); text-align: center; line-height: 1.15; transition: color 0.25s; }
.m-logo-cell:hover .m-logo-fallback { color: var(--gold); }
@media (max-width: 820px) { .m-logowall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .m-logowall { grid-template-columns: repeat(2, 1fr); } }

/* ---------- PROJECT (creative direction, gallery-rich) ---------- */
.cd-index { display: grid; gap: 0; margin-top: clamp(2rem,5vw,3.5rem); }
.cd-index a { display: grid; grid-template-columns: auto 1fr auto; gap: 1.4rem; align-items: baseline; padding: 1.1rem 0; border-top: 1px solid var(--line); transition: padding-left 0.3s ease, color 0.2s; }
.cd-index a:last-child { border-bottom: 1px solid var(--line); }
.cd-index a:hover { padding-left: 0.7rem; color: var(--gold); }
.cd-index .n { font-family: var(--mono); font-size: 0.72rem; color: var(--gold); }
.cd-index .t { font-family: var(--disp); font-weight: 500; font-size: clamp(1.4rem,3vw,2.2rem); }
.cd-index .m { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-dim); }

.project { padding: clamp(3.5rem,8vw,7rem) clamp(1.1rem,4vw,3rem); border-top: 1px solid var(--line); }
.project-head { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem,3vw,2.5rem); align-items: start; margin-bottom: clamp(1.5rem,4vw,2.5rem); }
.project-no { font-family: var(--voice); font-style: italic; font-weight: 300; font-size: clamp(3rem,8vw,6.5rem); color: var(--gold); line-height: 0.8; }
.project-info h3 { font-family: var(--disp); font-weight: 500; font-size: clamp(2rem,5vw,3.6rem); line-height: 1; letter-spacing: -0.015em; }
.project-info p { color: rgba(236,231,221,0.78); line-height: 1.7; max-width: 56ch; margin-top: 1rem; }
.project-meta { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-top: 1.4rem; }
.project-meta div span:first-child { display: block; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-dim); margin-bottom: 0.2rem; }
.project-meta div span:last-child { font-family: var(--disp); font-weight: 500; font-size: 1.1rem; color: var(--bone); }
@media (max-width: 700px) { .project-head { grid-template-columns: 1fr; } }

/* ---------- CASE STUDY (creative direction) ---------- */
.mcase { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(1.5rem,4vw,3.5rem); align-items: center; }
.mcase:not(:first-child) { margin-top: clamp(3rem,7vw,6rem); }
.mcase.flip .mcase-media { order: 2; }
.mcase-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.mcase-media figcaption { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-dim); margin-top: 0.7rem; }
.mcase .num { font-family: var(--voice); font-style: italic; font-weight: 300; font-size: 1.4rem; color: var(--gold); }
.mcase h3 { font-family: var(--disp); font-weight: 500; font-size: clamp(1.8rem,3.6vw,2.8rem); line-height: 1.05; letter-spacing: -0.01em; margin: 0.6rem 0 1rem; }
.mcase p { color: rgba(236,231,221,0.78); line-height: 1.7; margin-bottom: 1.4rem; max-width: 42ch; }
.mcase .meta-rows { display: grid; gap: 0.5rem; }
.mcase .meta-rows div { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); padding-top: 0.6rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-dim); }
.mcase .meta-rows div span:last-child { color: var(--bone); }
@media (max-width: 820px) { .mcase { grid-template-columns: 1fr; } .mcase.flip .mcase-media { order: 0; } }

/* ---------- COMPARISON TABLE ---------- */
.m-compare-wrap { overflow-x: auto; margin-top: 2.5rem; }
.m-compare { width: 100%; min-width: 620px; border-collapse: collapse; }
.m-compare th, .m-compare td { padding: 0.95rem 1.1rem; text-align: center; border-bottom: 1px solid var(--line); font-size: 0.85rem; color: var(--bone-dim); }
.m-compare thead th { font-family: var(--disp); font-weight: 500; font-size: 1.3rem; color: var(--bone); vertical-align: bottom; border-bottom: 1px solid rgba(201,162,75,0.4); }
.m-compare thead th .price { display: block; font-family: var(--mono); font-size: 0.7rem; color: var(--gold); margin-top: 0.3rem; letter-spacing: 0.06em; }
.m-compare thead th small { display: block; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-dim); margin-top: 0.3rem; }
.m-compare tbody th { text-align: left; font-family: var(--sans); font-weight: 300; color: var(--bone-dim); font-size: 0.85rem; }
.m-compare .yes { color: var(--gold); } .m-compare .no { color: rgba(236,231,221,0.24); }
.m-compare .col-f { background: rgba(201,162,75,0.06); }

/* ---------- FAQ ---------- */
.m-faq { max-width: 820px; }
.m-faq-item { border-top: 1px solid var(--line); }
.m-faq-item:last-child { border-bottom: 1px solid var(--line); }
.m-faq-q { width: 100%; text-align: left; background: none; border: 0; color: var(--bone); font-family: var(--disp); font-weight: 500; font-size: clamp(1.1rem,2.4vw,1.5rem); padding: 1.4rem 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.m-faq-q::after { content: '+'; color: var(--gold); font-size: 1.5rem; line-height: 1; transition: transform 0.3s ease; }
.m-faq-item.open .m-faq-q::after { transform: rotate(45deg); }
.m-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.m-faq-a p { padding: 0 0 1.4rem; color: var(--bone-dim); line-height: 1.7; font-size: 0.95rem; max-width: 660px; }
.m-faq-a p a { color: var(--gold); }
.m-faq-item.open .m-faq-a { max-height: 460px; }

/* ---------- BEFORE / AFTER ---------- */
.m-shift { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2.5vw,2rem); }
.m-shift .imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: 0.9rem; }
.m-shift .ph { aspect-ratio: 3/4; background: var(--ink2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--bone-dim); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; position: relative; }
.m-shift .ph::before { content: attr(data-label); position: absolute; top: 0.6rem; left: 0.6rem; color: var(--gold); font-size: 0.55rem; letter-spacing: 0.14em; }
.m-shift h3 { font-family: var(--disp); font-weight: 500; font-size: 1.2rem; color: var(--bone); margin-bottom: 0.3rem; }
.m-shift p { font-size: 0.85rem; line-height: 1.6; color: var(--bone-dim); }
@media (max-width: 800px) { .m-shift { grid-template-columns: 1fr; } }

/* ---------- CLOSING / MASTHEAD FOOTER ---------- */
.closer { text-align: center; padding: clamp(5rem, 15vw, 13rem) clamp(1.1rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.closer .k { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 3rem; }
.closer a.big { font-family: var(--disp); font-weight: 500; font-size: clamp(3rem, 10vw, 8.5rem); line-height: 1.04; letter-spacing: -0.02em; display: inline-block; }
.closer a.big em { color: var(--gold); }
.closer a.big .arw { display: inline-block; transition: transform 0.3s ease; }
.closer a.big:hover .arw { transform: translateX(0.4rem); }
.mag-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 2rem clamp(1.1rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.mag-foot a, .mag-foot span { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-dim); }
.mag-foot a:hover { color: var(--gold); }
.mag-foot .fl { display: flex; gap: 1.3rem; flex-wrap: wrap; }

/* reveal */
.rise { opacity: 0; transform: translateY(26px); transition: opacity 0.9s ease, transform 0.9s ease; }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .rise{opacity:1;transform:none;transition:none} .plate img{transition:none} }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px) {
  .masthead .m-right { display: none; }
  .mag-nav .mnav { display: none; }
  .m-menu { display: inline-block; }
  .mag-nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--ink); }
  .m-right.open { display: flex !important; position: fixed; inset: 0; flex-direction: column; justify-content: flex-start; align-items: center; gap: 1.7rem; background: var(--ink); z-index: 90; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 5.5rem 1.5rem 3rem; }
  .m-right.open a { font-size: 1.15rem; }
  .m-menu { position: relative; z-index: 100; }
  .c7,.c5,.c6,.c8,.c4 { grid-column: span 12; }
  .drop { margin-top: 0; }
  .cover-base { grid-template-columns: 1fr; gap: 1.2rem; }
  .contents .cd { display: none; }
  .ratecard a { grid-template-columns: auto 1fr auto; }
  .ratecard .rmeta { display: none; }
}

/* 3-column mosaic variant (design page selected pieces) */
.mosaic.cols3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .mosaic.cols3 { grid-template-columns: repeat(2, 1fr); } }