/* ---- POP Workshop self-hosted display faces (match popworkshops.com) ---- */
@font-face{ font-family:"Les Flos Chaos"; src:url("../assets/fonts/Les-Flos-Chaos.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"The Foregen"; src:url("../assets/fonts/The-Foregen-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }

/* ============================================================
   TALISMAN ZINE — SPREAD LAYOUTS  (01 – 08)
   ============================================================ */

/* ---------- SECTION VIDEO (purple duotone, every page) ------- */
.s-vid video{ filter:grayscale(1) contrast(0.98) brightness(0.56); }
.v-tint{ position:absolute; inset:0; background:var(--purple-700); mix-blend-mode:multiply; }
.v-scrim{ position:absolute; inset:0;
  background:radial-gradient(135% 105% at 50% 40%, rgba(24,0,38,.28), rgba(10,0,18,.76) 100%); }

/* ---------- 01 · COVER (looping video + wordmark lockup) ----- */
.s-cover{ justify-content:space-between; }
.s-cover video{ filter:grayscale(1) contrast(0.95) brightness(0.62) blur(1px); }
.cover-lock{ align-self:stretch; flex:1; text-align:center; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.7rem; margin:0; }
.wordmark{ font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(3rem,11vw,9rem); line-height:.9; letter-spacing:-.005em; display:flex; }
.wm-talis{ color:var(--bone); font-weight:700; }
.wm-man{ color:var(--yellow-500); font-weight:400; }
.wm-tag{ display:flex; align-items:center; justify-content:center; gap:clamp(.6rem,1.6vw,1.4rem); }
.wm-tag .est{ font-family:var(--font-body); font-style:italic; font-weight:500;
  font-size:clamp(.72rem,1.4vw,1.05rem); color:var(--bone); }
.wm-tag .wm-rule{ height:1.5px; width:clamp(56px,14vw,240px); background:var(--bone); opacity:.5; }
.wm-tag .tag{ font-family:var(--font-body); font-weight:500; letter-spacing:.01em;
  font-size:clamp(.86rem,1.7vw,1.35rem); color:var(--bone); }
.cover__scroll{ display:flex; align-items:center; gap:var(--s3); color:var(--fg-soft); }
.cover__scroll .code{ color:var(--fg-soft); }
.scroll-ind{ width:1px; height:42px; background:var(--line-2); position:relative; overflow:hidden; }
.scroll-ind::after{ content:""; position:absolute; inset:0; background:var(--accent-2); transform:translateY(-100%); animation:scrolldrop 1.8s var(--e-inout) infinite; }
@keyframes scrolldrop{ 0%{transform:translateY(-100%)} 55%,100%{transform:translateY(100%)} }

/* ---------- 02 · THE BRIEF ----------------------------------- */
.s-brief .spread__main{ display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,5vw,88px); align-items:center; }
.brief__label{ writing-mode:vertical-rl; transform:rotate(180deg); align-self:stretch;
  font-family:var(--font-display); font-size:var(--fs-label); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:var(--s5); }
.brief__label::before{ content:""; width:1px; height:64px; background:var(--line-2); }
.brief__body{ max-width:none; }
.brief__head{ font-family:var(--font-body); font-weight:500; font-size:clamp(1.6rem,3.6vw,3.4rem);
  line-height:1.04; letter-spacing:-.015em; max-width:20ch; }
.brief__head b{ font-weight:700; color:var(--accent); }
.brief__head .sub{ display:block; margin-top:.28em; color:var(--fg); }
.brief__head .sub b{ color:var(--fg); }
.brief__services{ margin-top:var(--s7); font-family:var(--font-display); font-size:clamp(.8rem,1.3vw,1rem);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--fg-soft); }

/* ---------- 03 · THE SPRINT MODEL ---------------------------- */
.s-sprint .spread__main{ justify-content:flex-start; gap:var(--s8); }
.sprint__track{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s4); margin-top:var(--s8); }
.sprint__line{ position:absolute; top:0; left:0; height:2px; width:100%; background:var(--line-2); transform:scaleX(0); transform-origin:0 50%; }
.phase{ position:relative; padding:var(--s6) var(--s5) var(--s7); border-top:2px solid transparent;
  background:transparent; transition:background var(--d3) var(--e-out), transform var(--d3) var(--e-out); }
.phase::before{ content:""; position:absolute; top:-5px; left:0; width:9px; height:9px; border-radius:50%; background:var(--accent); }
.phase:hover{ background:var(--bg-sunken); transform:translateY(-8px); }
.phase__code{ font-family:var(--font-display); font-size:var(--fs-label); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--fg-soft); }
.phase__name{ font-family:var(--font-body); font-weight:700; font-size:clamp(1.3rem,2.3vw,2rem); line-height:1;
  letter-spacing:var(--track-tight); margin:var(--s4) 0 var(--s3); }
.phase__desc{ color:var(--fg-soft); font-size:var(--fs-small); line-height:1.45; max-width:22ch; }
.phase__day{ margin-top:var(--s6); font-family:var(--font-display); font-size:var(--fs-label);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--accent); }

/* ---------- 04 · CONVICTION ---------------------------------- */
.s-conviction .spread__main{ position:relative; }
.conv__display{ font-family:var(--font-mark); font-weight:400; text-transform:uppercase;
  font-size:clamp(3.6rem,14vw,13rem); line-height:.82; letter-spacing:-.01em; }
.conv__display .a{ display:block; }
.conv__display .b{ display:block; color:var(--accent-2); }
.conv__quote{ margin-top:var(--s7); font-family:var(--font-body); font-weight:400; font-size:var(--fs-h3);
  line-height:1.25; max-width:26ch; color:var(--fg); }
.annotation{ position:absolute; top:2%; right:0; width:min(300px,74vw); transform:rotate(3.5deg);
  background:var(--bone); color:var(--ink); padding:var(--s5) var(--s5) var(--s6);
  box-shadow:0 24px 48px rgba(0,0,0,.34); }
.annotation h4{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-h3); letter-spacing:var(--track-tight); }
.annotation .role{ font-family:var(--font-display); font-size:var(--fs-label); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--graphite); margin:var(--s2) 0 var(--s4); }
.annotation .fam{ font-size:var(--fs-small); line-height:1.5; color:var(--ink); }
.annotation::before{ content:""; position:absolute; top:-11px; left:50%; width:78px; height:22px;
  transform:translateX(-50%) rotate(-2deg); background:rgba(255,199,0,.72); }

/* ---------- 05 · WORK 01 ------------------------------------- */
.s-work .spread__main{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,80px); align-items:center; }
.work__client{ font-family:var(--font-body); font-weight:700; font-size:var(--fs-display); line-height:.9;
  letter-spacing:var(--track-display); }
.work__client .thin{ font-weight:400; color:var(--fg-soft); }
.work__right{ display:flex; flex-direction:column; gap:var(--s4); }
.work__meta{ display:flex; align-items:baseline; gap:var(--s4); flex-wrap:wrap; }
.work__title{ font-family:var(--font-body); font-weight:700; font-size:var(--fs-h2); letter-spacing:var(--track-tight); }
.work__result{ font-size:var(--fs-lead); line-height:1.2; color:var(--fg); max-width:24ch; }
.work__thumb{ position:relative; aspect-ratio:16/10; background:var(--bg-sunken); overflow:hidden;
  border:1px solid var(--line); cursor:none; }
.work__thumb .ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:var(--fs-label); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--fg-soft); }
.work__thumb::after{ content:"EXPLORE →"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--bone); font-family:var(--font-display); font-size:var(--fs-label);
  letter-spacing:var(--track-label); opacity:0; transition:opacity var(--d3) var(--e-out); }
.work__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform var(--d4) var(--e-out); }
.work__thumb:hover img{ transform:scale(1.05); }
.work__thumb:hover::after{ opacity:1; }
.work__foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  border-top:1px solid var(--line); padding-top:var(--s4); }
.work__tags{ font-family:var(--font-display); font-size:var(--fs-label); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--fg-soft); }
.work__view{ font-family:var(--font-display); font-size:var(--fs-label); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--accent); }

/* ---------- 06 · CASE STUDIES REEL (horizontal → Medium) ----- */
.s-index .spread__main{ justify-content:flex-start; }
.reel{ display:flex; gap:var(--s5); overflow-x:auto; overflow-y:hidden; margin-top:var(--s7);
  padding-bottom:var(--s4); scroll-snap-type:x proximity; cursor:grab; scrollbar-width:none; -ms-overflow-style:none; }
.reel::-webkit-scrollbar{ display:none; }
.reel.dragging{ cursor:grabbing; }
.reel.dragging .case{ pointer-events:none; }
.case{ flex:0 0 min(500px,84vw); scroll-snap-align:center; text-decoration:none; color:inherit;
  border:1px solid var(--line-2); background:var(--bg); padding:var(--s6);
  display:flex; flex-direction:column; position:relative;
  transition:background var(--d3) var(--e-out), transform var(--d3) var(--e-out), box-shadow var(--d3) var(--e-out); }
.case:hover{ background:var(--bg-sunken); transform:translateY(-8px); box-shadow:0 22px 50px rgba(0,0,0,.4); }
.case__media{ aspect-ratio:16/9; background:var(--sand); overflow:hidden; margin-bottom:var(--s5); position:relative; }
.case__media video,.case__media img{ width:100%; height:100%; object-fit:cover; }
.case__media .ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:var(--fs-label); letter-spacing:var(--track-label); text-transform:uppercase; }
.case__code{ font-family:var(--font-display); font-size:var(--fs-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--fg-soft); }
.case__name{ font-family:var(--font-body); font-weight:700; font-size:clamp(2rem,3.4vw,3rem); line-height:.96; letter-spacing:-.025em; margin:var(--s2) 0 var(--s3); color:var(--fg); }
.case__meta{ font-family:var(--font-display); font-size:var(--fs-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--fg-soft); }
.case__desc{ font-size:var(--fs-small); line-height:1.5; color:var(--fg-soft); margin-top:var(--s4); max-width:34ch; }
.case__link{ margin-top:auto; padding-top:var(--s5); font-family:var(--font-display); font-size:var(--fs-label);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--accent); }
.reel-hint{ margin-top:var(--s5); font-family:var(--font-display); font-size:var(--fs-label);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--fg-soft); }
.index__grid{ display:grid; grid-template-columns:1fr 1fr; margin-top:var(--s7); border-top:1px solid var(--line); }
.client{ position:relative; padding:var(--s7) var(--s6); border-bottom:1px solid var(--line); overflow:hidden;
  transition:background var(--d3) var(--e-out); }
.client:nth-child(odd){ border-right:1px solid var(--line); }
.client::before{ content:""; position:absolute; top:0; left:0; width:4px; height:100%; background:var(--accent-2);
  transform:scaleY(0); transform-origin:0 0; transition:transform var(--d3) var(--e-out); }
.client:hover{ background:var(--bg-sunken); }
.client:hover::before{ transform:scaleY(1); }
.client__code{ font-family:var(--font-display); font-size:var(--fs-label); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--fg-soft); }
.client__name{ font-family:var(--font-body); font-weight:700; font-size:var(--fs-h1); line-height:1;
  letter-spacing:var(--track-tight); margin:var(--s3) 0; }
.client__meta{ display:flex; gap:var(--s4); font-family:var(--font-display); font-size:var(--fs-label);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--fg-soft); }
.client__desc{ max-height:0; opacity:0; overflow:hidden; color:var(--fg-soft); font-size:var(--fs-small);
  line-height:1.45; transition:max-height var(--d3) var(--e-out), opacity var(--d3) var(--e-out), margin var(--d3) var(--e-out); }
.client:hover .client__desc{ max-height:80px; opacity:1; margin-top:var(--s4); }

/* ---------- 07 · PROOF --------------------------------------- */
.s-proof .spread__main{ justify-content:space-between; gap:var(--s9); padding-top:var(--s7); }
.ticker{ position:relative; width:100vw; margin-left:calc(var(--gutter) * -1); overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:var(--s5) 0; }
.ticker__track{ display:inline-flex; gap:var(--s6); white-space:nowrap; will-change:transform;
  animation:ticker 34s linear infinite; }
.ticker__track span{ font-family:var(--font-body); font-weight:700; font-size:clamp(1.6rem,4.4vw,3.4rem);
  letter-spacing:var(--track-tight); color:var(--fg); text-transform:uppercase; }
.ticker__track span::after{ content:"·"; color:var(--accent-2); margin-left:var(--s6); }
@keyframes ticker{ to{ transform:translateX(-50%); } }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s6); }
.stat__num{ font-family:var(--font-body); font-weight:700; font-size:clamp(4rem,13vw,11rem); line-height:.82;
  letter-spacing:-.05em; color:var(--accent); font-variant-numeric:tabular-nums; }
.stat__num .plus{ color:var(--accent-2); }
.stat__label{ margin-top:var(--s4); font-family:var(--font-display); font-size:var(--fs-h3); letter-spacing:var(--track-tight);
  text-transform:uppercase; color:var(--fg); }
.stat__sub{ font-family:var(--font-display); font-size:var(--fs-label); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--fg-soft); }

/* ---------- 08 · START A SPRINT ------------------------------ */
.s-cta{ overflow:hidden; background:var(--bone); }
.s-cta .wash{ position:absolute; inset:0; z-index:-1; background:var(--yellow-500); transform:scaleX(1); transform-origin:0 50%; }
html.js .s-cta .wash{ transform:scaleX(0); }
.s-cta .spread__main{ gap:var(--s6); }
.cta__head{ font-family:var(--font-body); font-weight:700; font-size:var(--fs-mega); line-height:.86;
  letter-spacing:var(--track-display); text-transform:uppercase; color:var(--fg); }
.cta__sub{ font-size:var(--fs-lead); line-height:1.3; max-width:28ch; color:var(--fg); }
.cta__contact{ display:flex; flex-wrap:wrap; gap:var(--s4) var(--s7); margin-top:var(--s4);
  font-family:var(--font-display); font-size:clamp(1rem,1.7vw,1.4rem); letter-spacing:var(--track-tight); }
.cta__contact a{ border-bottom:2px solid transparent; transition:border-color var(--d2) var(--e-out); }
.cta__contact a:hover{ border-color:var(--accent); }
.s-cta .spread__foot .code{ color:var(--fg); }

/* ---------- monogram mark ------------------------------------ */
.mono{ width:44px; height:44px; }
.mono img{ width:100%; height:100%; }

/* ---------- media slots (fill per section as assets arrive) --- */
.media-fill{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.media-fill img,.media-fill video{ width:100%; height:100%; object-fit:cover; display:block; }
.media-fill::after{ content:""; position:absolute; inset:0; background:var(--media-scrim,transparent); }
.media-frame{ position:relative; overflow:hidden; background:var(--bg-sunken); border:1px solid var(--line); }
.media-frame img,.media-frame video{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- 03 · SERVICES (big list, high importance) ------- */
/* Static capabilities grid — informational, not links (no fill/arrow/cursor) */
.svc-list{ margin-top:var(--s6); display:grid; grid-template-columns:repeat(2,1fr);
  gap:var(--s6) clamp(28px,5vw,72px); }
.svc{ display:grid; grid-template-columns:auto 1fr; column-gap:var(--s4);
  align-content:start; padding-top:var(--s4); border-top:2px solid var(--line-2); }
.svc__n{ grid-column:1; grid-row:1 / span 3; align-self:start;
  font-family:var(--font-display); font-weight:700; font-size:clamp(1.5rem,2.4vw,2.3rem);
  line-height:1; letter-spacing:-.01em; color:var(--accent-2); font-variant-numeric:tabular-nums; }
.svc__name{ grid-column:2; font-family:var(--font-body); font-weight:700;
  font-size:clamp(1.5rem,2.7vw,2.3rem); line-height:1; letter-spacing:-.02em; color:var(--fg); }
.svc__desc{ grid-column:2; margin-top:var(--s3); font-family:var(--font-body);
  font-size:var(--fs-small); line-height:1.45; color:var(--fg-soft); max-width:42ch; }
.svc__cat{ grid-column:2; margin-top:var(--s3); font-family:var(--font-display);
  font-size:var(--fs-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--fg-soft); }

/* ---------- 04 · HOW WE WORK (process) ---------------------- */
.how{ margin-top:var(--s6); }
.how__step{ display:grid; grid-template-columns:auto 1fr auto; gap:clamp(18px,4vw,56px); align-items:center;
  padding:clamp(13px,2.3vw,28px) var(--s3); border-top:1px solid var(--line); position:relative;
  transition:background var(--d3) var(--e-out), padding-left var(--d3) var(--e-out); }
.how__step:first-child{ border-top:0; }
.how__step:hover{ background:rgba(255,255,255,.055); padding-left:var(--s5); }
.how__n{ font-family:var(--font-body); font-weight:700; font-size:clamp(2.6rem,6.5vw,5.6rem); line-height:.82;
  color:var(--accent-2); letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.how__body{ display:flex; flex-direction:column; gap:.3em; }
.how__word{ font-family:var(--font-body); font-weight:700; font-size:clamp(2rem,4.4vw,3.6rem); line-height:1;
  letter-spacing:-.03em; color:var(--fg); }
.how__desc{ font-family:var(--font-body); font-size:var(--fs-small); line-height:1.4; color:var(--fg-soft); max-width:44ch; }
.how__tag{ font-family:var(--font-display); font-size:var(--fs-label); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--accent-2); white-space:nowrap; align-self:center; }
.how__repeat{ display:inline-flex; align-items:center; gap:.6em; margin-top:var(--s6);
  font-family:var(--font-display); font-size:var(--fs-label); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--fg-soft); }
.how__repeat b{ color:var(--accent-2); font-size:1.5em; }
.step__n{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.1rem,1.9vw,1.7rem); letter-spacing:.03em; color:var(--accent-2); }
.step__name{ font-family:var(--font-body); font-weight:700; font-size:clamp(2.2rem,4.7vw,4.2rem); line-height:.96; letter-spacing:-.03em; margin:var(--s2) 0 var(--s3); color:var(--fg); }
.step__desc{ font-size:var(--fs-small); line-height:1.5; color:var(--fg-soft); max-width:22ch; }

/* ---------- 06 · POP WORKSHOP (match popworkshops.com — white, numbered) --- */
.s-pop{ --bg:#fff; --fg:#000; --fg-soft:rgba(0,0,0,.6); --accent:#000; --accent-2:#000;
  --line:rgba(0,0,0,.26); --line-2:#000; background:#fff; color:#000; }
/* THE POP WALL — full-bleed stack of kinetic marquee bands */
.s-pop .spread__main{ justify-content:stretch; align-items:stretch; gap:0;
  margin:0 calc(-1 * var(--gutter)); position:relative; }
.pop-wall{ position:relative; display:flex; flex-direction:column; width:100%; flex:1; min-height:0;
  border-top:2px solid #000; border-bottom:2px solid #000; overflow:hidden; background:#fff; }
.pop-band{ flex:1; min-height:0; display:flex; align-items:center; overflow:hidden; position:relative;
  border-bottom:2px solid #000; }
.pop-band:last-child{ border-bottom:0; }
.pop-band--ink{ background:#000; }

.pop-track{ display:flex; align-items:center; flex:none; white-space:nowrap; will-change:transform;
  animation:pop-marq 32s linear infinite; }
.pop-band--rev .pop-track{ animation-direction:reverse; }
.pop-band--sprints:hover .pop-track{ animation-play-state:paused; }
@keyframes pop-marq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.pop-word{ font-family:"Les Flos Chaos","Arial Black",sans-serif; text-transform:uppercase;
  font-size:clamp(2rem,13vh,6.5rem); line-height:1; letter-spacing:.006em; color:#000; padding:0 .18em; }
.pop-band--stroke .pop-word{ -webkit-text-fill-color:transparent; -webkit-text-stroke:2px #000; }

.pop-sprint{ font-family:"Les Flos Chaos","Arial Black",sans-serif; text-transform:uppercase;
  font-size:clamp(1.5rem,9vh,4.2rem); line-height:1; letter-spacing:.01em; color:#fff; text-decoration:none;
  padding:0 .32em; white-space:nowrap; display:inline-flex; align-items:baseline;
  transition:color var(--d2) var(--e-out); }
.pop-sprint em{ font-family:"Unbounded",var(--font-display); font-style:normal; font-weight:700;
  font-size:.38em; opacity:.5; margin-right:.4em; }
.pop-sprint:hover{ color:var(--yellow-500); }

/* the JOIN stamp — focal point slammed over the wall */
.pop-stamp{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-4deg);
  z-index:6; background:var(--yellow-500); color:#000; border:3px solid #000;
  font-family:"Unbounded",var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(.9rem,1.6vw,1.2rem); letter-spacing:.03em; line-height:1.12; text-align:center;
  padding:.85em 1.25em; box-shadow:9px 9px 0 #000; text-decoration:none; white-space:nowrap;
  transition:transform var(--d3) var(--e-out); }
.pop-stamp .ar{ display:inline-block; transition:transform var(--d2) var(--e-out); }
.pop-stamp:hover{ transform:translate(-50%,-50%) rotate(0deg) scale(1.05); }
.pop-stamp:hover .ar{ transform:translateX(5px); }

@media (prefers-reduced-motion:reduce){ .pop-track{ animation:none; } }
.s-pop .spread__foot .code{ color:#000; }

/* ---------- 07 · CONTACT form + whatsapp -------------------- */
.contact-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px,5vw,72px); align-items:start; margin-top:var(--s6); }
.cform{ display:flex; flex-direction:column; gap:var(--s4); }
.cform input,.cform textarea{ font-family:var(--font-body); font-size:var(--fs-body); color:var(--fg); width:100%;
  background:transparent; border:0; border-bottom:1px solid var(--line-2); padding:var(--s3) 0; }
.cform input::placeholder,.cform textarea::placeholder{ color:var(--fg-soft); }
.cform input:focus,.cform textarea:focus{ outline:none; border-color:var(--accent-2); }
.cform textarea{ resize:vertical; min-height:4.5em; }
.cform .row{ display:flex; gap:var(--s5); }
.cbtns{ display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s3); }
.btn{ font-family:var(--font-display); font-size:var(--fs-label); letter-spacing:var(--track-label); text-transform:uppercase;
  padding:.9em 1.4em; border:1px solid var(--line-2); color:var(--fg); background:transparent; cursor:pointer;
  transition:background var(--d2) var(--e-out), color var(--d2) var(--e-out); }
.btn--go,.btn:hover{ background:var(--accent-2); color:var(--purple-900); border-color:var(--accent-2); }
.btn--wa{ display:inline-flex; align-items:center; gap:.55em; }

/* ---------- 08 · MEET THE HOUSE (Ideas by Leo — strict monochrome) --- */
.s-house{ --bg:#fff; --fg:#000; --fg-soft:rgba(0,0,0,.55); --accent:#000; --accent-2:#000;
  --line:rgba(0,0,0,.28); --line-2:#000; background:#fff; color:#000; }
.s-house .spread__top .code{ color:#000; }
.house-est{ font-family:"Staatliches",var(--font-display); letter-spacing:.14em; color:#000; }
.house-eyebrow{ font-family:"Manrope",var(--font-body); font-weight:600; text-transform:uppercase; letter-spacing:.24em; font-size:var(--fs-label); color:#000; }
.house-head{ font-family:"Staatliches",var(--font-display); text-transform:uppercase; font-size:clamp(2.6rem,8.5vw,7rem); line-height:.86; color:#000; margin:var(--s3) 0 var(--s4); letter-spacing:.01em; }
.house-script{ font-family:"Yellowtail",cursive; text-transform:none; font-size:1.05em; font-weight:400; letter-spacing:0; }
.house-sub{ font-family:"Manrope",var(--font-body); font-weight:400; font-size:clamp(1rem,1.5vw,1.3rem); color:rgba(0,0,0,.72); max-width:40ch; }
.house-sub em{ font-style:italic; color:#000; }
.house-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); margin-top:var(--s8); }

/* ---- the domino block ---- */
.house-block{ position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:var(--s5);
  min-height:clamp(170px,24vh,280px); padding:var(--s5); background:#fff; color:#000;
  border:2px solid #000; box-shadow:8px 8px 0 #000; text-decoration:none; overflow:hidden;
  transition:background var(--d3) var(--e-out), color var(--d3) var(--e-out), transform var(--d3) var(--e-out), box-shadow var(--d3) var(--e-out); }
.house-block::before{ content:""; position:absolute; left:var(--s5); right:var(--s5);
  top:calc(var(--s5) + 56px + var(--s4)); height:2px; background:#000; opacity:.14;
  transition:background var(--d3) var(--e-out), opacity var(--d3) var(--e-out); }
.house-block:hover{ background:var(--flood); color:var(--htext); transform:translate(-3px,-3px); box-shadow:11px 11px 0 #000; }
.house-block:hover::before{ background:var(--htext); opacity:.32; }

/* ---- normalized mark stage: equal optical size + guaranteed visibility ---- */
.hb__logo-box{ display:grid; place-items:center; overflow:hidden;
  width:clamp(48px,4.8vw,60px); height:clamp(48px,4.8vw,60px); }
.hb__logo{ display:block; max-width:100%; max-height:100%; width:auto; height:auto;
  transform:scale(var(--mark-scale,1)); transform-origin:center;
  filter:brightness(0); transition:filter var(--d3) var(--e-out); }
.house-block:hover .hb__logo{ filter:brightness(0) invert(1); }
/* POP mark rendered whole by height (edge-to-edge portrait 'p' — no scale, no clip) */
.hb__logo-box--pop{ overflow:visible; }
.hb__logo-box--pop .hb__logo{ transform:none; height:clamp(38px,3.8vw,46px); width:auto; }

.hb__meta{ display:flex; flex-direction:column; gap:var(--s2); }
.hb__name{ font-family:"Staatliches",var(--font-display); text-transform:uppercase; font-size:clamp(1.4rem,2.4vw,2.1rem); line-height:1; }
.hb__line{ font-family:"Manrope",var(--font-body); font-weight:400; font-size:var(--fs-small); color:rgba(0,0,0,.6); }
.house-block:hover .hb__line{ color:var(--htext); opacity:.9; }

.s-house .spread__foot .code{ color:#000; }
.house-out{ font-family:"Staatliches",var(--font-display); letter-spacing:.06em; border-bottom:2px solid #000; padding-bottom:2px; }
@media (max-width:720px){ .house-row{ grid-template-columns:1fr; } }

/* ---------- 05 · CASE STUDIES (HORIZONTAL accordion) --------- */
.acc{ margin-top:var(--s6); display:flex; width:100%; height:clamp(320px,50vh,540px);
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); overflow:hidden; }
.acc__item{ position:relative; flex:1 1 0; min-width:72px; min-height:0; display:block;
  text-decoration:none; color:inherit; overflow:hidden; border-left:1px solid var(--line);
  transition:flex-grow var(--d4) var(--e-out); }
.acc__item:first-child{ border-left:0; }

/* persistent Posterama figure-number, top-left of every column */
.acc__n{ position:absolute; top:var(--s4); left:var(--s4); z-index:3;
  font-family:var(--font-display); font-weight:700; font-size:clamp(1.4rem,2.4vw,2.4rem); line-height:1;
  color:var(--accent-2); font-variant-numeric:tabular-nums; letter-spacing:-.01em;
  text-shadow:0 2px 16px rgba(0,0,0,.55); }

/* collapsed spine: vertical name + plus */
.acc__rail{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:var(--s8) var(--s2) var(--s6);
  transition:opacity var(--d3) var(--e-out); }
.acc__name--v{ writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap;
  font-family:var(--font-body); font-weight:700; font-size:clamp(1.05rem,1.5vw,1.5rem); line-height:1;
  letter-spacing:-.01em; color:var(--fg); }
.acc__plus{ position:absolute; bottom:var(--s4); left:0; right:0; text-align:center;
  font-family:var(--font-display); font-size:1.3rem; color:var(--fg-soft);
  transition:transform var(--d3) var(--e-out), color var(--d2) var(--e-out); }

/* expanded panel: image + detail, hidden until the column is wide */
.acc__panel{ position:absolute; inset:0; display:flex; flex-direction:column;
  padding:calc(var(--s7) + var(--s4)) var(--s4) var(--s5); gap:var(--s3);
  opacity:0; visibility:hidden; transition:opacity var(--d3) var(--e-out), visibility 0s linear var(--d3); }
.acc__img{ position:relative; flex:1 1 auto; min-height:0; overflow:hidden;
  border:1px solid var(--line-2); background:var(--bg-sunken); }
.acc__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.acc__img--contain{ background:#fff; }
.acc__img--contain img{ object-fit:contain; padding:clamp(12px,2.2vw,26px); box-sizing:border-box; }
.acc__img .ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:var(--fs-label); letter-spacing:var(--track-label);
  text-transform:uppercase; text-align:center; padding:var(--s3); }
.acc__detail{ display:flex; flex-direction:column; flex:0 0 auto; }
.acc__cat{ font-family:var(--font-display); font-size:var(--fs-label); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--fg-soft); white-space:nowrap; }
.acc__title{ margin-top:var(--s2); font-family:var(--font-body); font-weight:700;
  font-size:clamp(1.3rem,1.9vw,2rem); line-height:1; letter-spacing:-.02em; color:var(--fg); }
.acc__desc{ margin-top:var(--s3); font-family:var(--font-body); font-size:var(--fs-body); line-height:1.45;
  color:var(--fg-soft); max-width:48ch;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.acc__link{ margin-top:var(--s4); font-family:var(--font-display); font-size:var(--fs-label);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--accent-2); }

/* OPEN — resting default (first column) + hover */
.acc:not(:hover) .acc__item:first-child{ flex-grow:6.5; }
.acc:not(:hover) .acc__item:first-child .acc__rail{ opacity:0; }
.acc:not(:hover) .acc__item:first-child .acc__plus{ transform:rotate(45deg); color:var(--accent-2); }
.acc:not(:hover) .acc__item:first-child .acc__panel{ opacity:1; visibility:visible;
  transition:opacity var(--d4) var(--e-out) 160ms, visibility 0s; }
.acc__item:hover{ flex-grow:6.5; }
.acc__item:hover .acc__rail{ opacity:0; }
.acc__item:hover .acc__plus{ transform:rotate(45deg); color:var(--accent-2); }
.acc__item:hover .acc__panel{ opacity:1; visibility:visible;
  transition:opacity var(--d4) var(--e-out) 160ms, visibility 0s; }

@media (prefers-reduced-motion:reduce){
  .acc__item,.acc__panel,.acc__rail,.acc__plus{ transition:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  /* --- section-by-section paging (JS drops the 3D flip below 900px) --- */
  html{ scroll-snap-type:y mandatory; }
  .spread{ scroll-snap-align:start; scroll-snap-stop:always; gap:var(--s5); }
  .counter{ display:none; }          /* page-flip counter is meaningless in scroll mode */
  .restart{ display:none; }          /* flip-era control; overlaps foot links on mobile */

  /* --- page 2 · brief --- */
  .s-brief .spread__main{ grid-template-columns:1fr; }
  .brief__label{ writing-mode:horizontal-tb; transform:none; flex-direction:row; }
  .brief__label::before{ height:1px; width:48px; }
  .sprint__track{ grid-template-columns:1fr; gap:0; }
  .sprint__line{ display:none; }
  .phase{ border-top:1px solid var(--line); }
  .s-work .spread__main{ grid-template-columns:1fr; }
  .index__grid{ grid-template-columns:1fr; }
  .client:nth-child(odd){ border-right:0; }
  .stats{ grid-template-columns:1fr; gap:var(--s6); }
  .annotation{ position:relative; margin-top:var(--s7); right:auto; }

  /* --- page 3 · services: single column, compact to one screen --- */
  .s-sprint .spread__main{ gap:var(--s3); }
  .svc-list{ grid-template-columns:1fr; gap:var(--s2); }
  .svc{ padding-top:var(--s2); }
  .svc__name{ font-size:clamp(1.3rem,4.8vw,1.8rem); }
  .svc__desc{ margin-top:var(--s2); }
  .svc__cat{ margin-top:var(--s2); }

  /* --- page 5 · case studies: horizontal swipe carousel (mirrors desktop) --- */
  .acc{ flex-direction:row; height:auto; gap:var(--s4);
    overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; border:0; }
  .acc::-webkit-scrollbar{ display:none; }
  .acc__item{ flex:0 0 82%; scroll-snap-align:start; min-width:0; border-left:0; overflow:hidden; }
  .acc__rail{ display:none; }
  .acc__n{ font-size:clamp(1.3rem,5vw,1.8rem); top:var(--s3); left:var(--s3); }
  .acc__panel{ position:static; opacity:1; visibility:visible; padding:0 0 var(--s4); gap:var(--s3); }
  .acc__img{ aspect-ratio:4/3; flex:0 0 auto; }

  /* --- page 7 · contact: stack + compact --- */
  .contact-grid{ grid-template-columns:1fr; margin-top:var(--s4); gap:var(--s4); }
  .cform{ gap:var(--s2); }
  .cform .row{ flex-direction:column; gap:var(--s2); }

  /* --- page 8 · house: kill the mid-block divider slicing the name --- */
  .house-block{ justify-content:flex-start; gap:var(--s3); min-height:auto; }
  .house-block::before{ display:none; }
  .house-row{ margin-top:var(--s5); gap:var(--s4); }
}

@media (max-width:560px){
  .acc__desc{ -webkit-line-clamp:5; }
  .cbtns{ width:100%; }
  .btn{ width:100%; justify-content:center; }
}