/* ============================================================
   BNCL — HOMEPAGE PROOF OF CONCEPT — V2
   Typography is architected so the placeholders below can be
   swapped for the licensed fonts with a one-line change once
   confirmed — no component rebuild required:
     --serif : Athelas (placeholder: Fraunces)      — licence open
     --sans  : Acumin Variable Concept Light         — ready via Adobe Fonts
     --cond  : Acumin Variable Concept Condensed Bold — ready via Adobe Fonts
   ============================================================ */

:root{
  --serif: 'athelas', 'Fraunces', Georgia, serif;
  --sans: 'acumin-variable-concept', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --cond: 'acumin-variable-concept', 'Barlow Condensed', 'Inter', sans-serif;

  --fs-hero: clamp(2.1rem, 1.1rem + 4.4vw, 4.4rem);
  --fs-h2: clamp(1.8rem, 1rem + 3vw, 3.2rem);
  --fs-stat: clamp(1.7rem, 1rem + 2.6vw, 2.7rem);
  --fs-num: clamp(2.6rem, 1.4rem + 5vw, 5.4rem);
  --fs-body: clamp(0.95rem, 0.88rem + 0.2vw, 1.05rem);
  --fs-label: 0.72rem;

  --maxw: 1760px;
  --pad: clamp(20px, 4vw, 56px);
  --line: 1px solid var(--rule);
  --dur: 0.6s;
  --ease: cubic-bezier(.22,.61,.36,1);
  /* Header logo height — single source of truth, reused wherever other
     header elements (e.g. the project-page "All work" link) need to
     position themselves relative to the logo's actual rendered size. */
  --logo-h: clamp(67.5px, 11.8125vw, 97.5px); /* -25% vs previous size; single source of truth reused by .nav-logo and .fullnav-logo */
}

/* ---------- Day (default palette values) ---------- */
[data-theme="day"]{
  --bg: #F7EED4;
  --bg-elevated: #FFFFFF;
  --panel-human: #F4DBDE;
  --panel-statement: #F8F2A6;
  --statement-text: #100D08;
  --authority: #100D08;
  --authority-text: #F7EED4;
  --ink: #100D08;
  --ink-soft: rgba(16,13,8,.64);
  --ink-faint: rgba(16,13,8,.4);
  --rule: rgba(16,13,8,.18);
  --accent-a: #9FBCD8;
  --cursor-ring: rgba(16,13,8,.85);
  --scrim: rgba(10,8,4,.45);
}

/* ---------- Night (new art-direction proposal — not in source docs) ---------- */
[data-theme="night"]{
  --bg: #0B0A08;
  --bg-elevated: #131210;
  --panel-human: #3B2A2D;
  --panel-statement: #10151C;
  --statement-text: #F3E6A8;
  --authority: #10151C;
  --authority-text: #F2ECD9;
  --ink: #F2ECD9;
  --ink-soft: rgba(242,236,217,.66);
  --ink-faint: rgba(242,236,217,.42);
  --rule: rgba(242,236,217,.18);
  --accent-a: #6E90AF;
  --cursor-ring: rgba(242,236,217,.9);
  --scrim: rgba(0,0,0,.55);
}

*{box-sizing:border-box;}
html{scroll-behavior:auto;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:var(--fs-body);
  line-height:1.5;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{margin:0;font-weight:400;}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.label{
  font-family:var(--cond);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:var(--fs-label);
}
.serif{font-family:var(--serif);}
.rule{border:none;border-top:var(--line);}
button{font-family:inherit;cursor:pointer;}
section{position:relative;}

/* ---------- Prototype chrome (not part of production site) ---------- */
.proto-badge{
  position:fixed;left:16px;bottom:16px;z-index:900;
  background:var(--authority);color:var(--authority-text);
  font-family:var(--cond);font-weight:700;letter-spacing:.08em;
  font-size:11px;text-transform:uppercase;
  padding:10px 14px;border-radius:100px;
  display:flex;align-items:center;gap:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.proto-badge button{
  background:transparent;border:1px solid currentColor;color:inherit;
  border-radius:100px;padding:4px 10px;font-size:10px;font-family:var(--sans);font-weight:500;
  text-transform:none;letter-spacing:0;
}
.proto-badge button.on{background:var(--authority-text);color:var(--authority);}
/* Note: placeholder photography is flagged in code comments and in the
   SLIDES[] config (placeholder:true / placeholderNote), not with an
   on-canvas label — see component notes accompanying this file. */

/* ---------- Custom cursor ---------- */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;pointer-events:none;z-index:999;
  border-radius:50%;
  transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor-dot{width:6px;height:6px;background:var(--cursor-ring);opacity:0;transition:opacity .3s;}
.cursor-ring{
  width:40px;height:40px;border:1px solid var(--cursor-ring);opacity:0;
  transition:opacity .3s, width .35s var(--ease), height .35s var(--ease), background .35s var(--ease);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--cond);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--cursor-ring);
}
body.cursor-ready .cursor-dot,body.cursor-ready .cursor-ring{opacity:1;}
.cursor-ring.is-project{width:88px;height:88px;background:var(--cursor-ring);color:var(--bg);}
.cursor-ring.is-project span{opacity:1;}
.cursor-ring span{opacity:0;transition:opacity .2s;}
.cursor-ring.is-project .cursor-dot{opacity:0;}
@media (hover:none), (pointer:coarse){
  .cursor-dot,.cursor-ring{display:none;}
}

/* ================= STICKY NAV ================= */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  padding:22px var(--pad);
  display:flex;align-items:center;justify-content:space-between;
  transition:padding var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-nav::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom, rgba(0,0,0,.35), transparent);
  opacity:1;transition:opacity var(--dur) var(--ease);
}
.site-nav.is-scrolled{
  padding:12px var(--pad);
  background:var(--bg);
  box-shadow:0 1px 0 var(--rule);
}
.site-nav.is-scrolled::before{opacity:0;}
.nav-logo{display:flex;align-items:center;}
.nav-logo img{height:var(--logo-h);width:auto;display:block;} /* header logo — see --logo-h in :root */
/* Logo source of truth: original vector artwork (BNCL logo staand / liggend),
   pre-rendered here as two fixed-colour PNGs (ink-black / ink-white) so no
   runtime filter distorts the vector shapes. Production build should swap
   these raster exports for the native SVG/EPS in both colourways.
   Header nav now uses the "staand" (vertical/stacked) mark; the "liggend"
   (horizontal) mark remains the footer's fixed lockup — see footer-logo. */
.nav-logo .logo-black{display:none;}
.nav-logo .logo-white{display:block;}
html[data-theme="day"] .site-nav.is-scrolled .nav-logo .logo-black{display:block;}
html[data-theme="day"] .site-nav.is-scrolled .nav-logo .logo-white{display:none;}
.nav-right{display:flex;align-items:center;gap:22px;}
.nav-phone{font-size:13px;color:var(--nav-text,#fff);opacity:.9;}
.site-nav:not(.is-scrolled) .nav-phone,.site-nav:not(.is-scrolled) .daynight,.site-nav:not(.is-scrolled) .nav-contact,.site-nav:not(.is-scrolled) .nav-burger{color:#fff;}
.site-nav.is-scrolled .nav-phone,.site-nav.is-scrolled .daynight,.site-nav.is-scrolled .nav-contact,.site-nav.is-scrolled .nav-burger{color:var(--ink);}
.nav-contact{
  border:1px solid currentColor;border-radius:100px;padding:9px 20px;
  font-family:var(--sans);font-weight:500;font-size:13px;
}
.site-nav.is-scrolled .nav-contact{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.daynight{
  display:flex;align-items:center;gap:2px;border:1px solid currentColor;border-radius:100px;padding:4px;
}
.daynight button{
  background:transparent;border:none;color:inherit;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:13px;opacity:.55;
  transition:background .3s,opacity .3s,color .3s;
}
.daynight button.active{opacity:1;background:currentColor;}
.daynight button.active svg{stroke:var(--bg);}
.daynight svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;}
.nav-burger{
  width:40px;height:40px;border-radius:50%;border:1px solid currentColor;background:transparent;color:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.nav-burger span{width:14px;height:1px;background:currentColor;}

/* ================= FULLSCREEN MENU ================= */
.fullnav{
  position:fixed;inset:0;background:#070604;color:#fff;z-index:800;
  padding:var(--pad);
  display:flex;flex-direction:column;justify-content:space-between;
  transform:translateY(-100%);transition:transform .7s var(--ease);
}
.fullnav.is-open{transform:translateY(0);}
.fullnav-top{display:flex;justify-content:space-between;align-items:flex-start;}
.fullnav-close{
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.fullnav-list{list-style:none;margin:0;padding:0;}
.fullnav-list li{
  border-top:1px solid rgba(255,255,255,.15);
  display:flex;align-items:baseline;gap:18px;padding:10px 0;
}
.fullnav-list li:last-child{border-bottom:1px solid rgba(255,255,255,.15);}
.fullnav-list .num{font-family:var(--sans);font-size:12px;color:rgba(255,255,255,.5);}
.fullnav-list a{
  font-family:var(--serif);font-size:clamp(2.4rem,3vw + 1.6rem,4.8rem);
  font-weight:400;display:inline-block;transition:transform .35s var(--ease),color .35s;
}
.fullnav-list a:hover{transform:translateX(14px);color:#F3E6A8;}
.fullnav-bottom{display:flex;flex-wrap:wrap;gap:60px;font-size:13px;color:rgba(255,255,255,.75);}
.fullnav-bottom b{display:block;color:#fff;font-family:var(--cond);letter-spacing:.08em;text-transform:uppercase;font-size:11px;margin-bottom:8px;}

/* ================= HERO ================= */
.hero{
  padding-top:0;display:grid;grid-template-columns:1.15fr 1fr;min-height:100svh;
}

/* ============================================================
   HERO SLIDER — data-driven, swipeable, accessible component.
   Each .hero-slide carries data-focal (object-position) and
   data-overlay (scrim strength) so per-image art direction is
   configurable without touching markup structure. See SLIDES[]
   in the script block for desktop/mobile src, alt and overlay
   per slide — swap sources there, nothing else needs to change.
   ============================================================ */
.hero-slider{position:relative;overflow:hidden;background:#000;touch-action:pan-y;outline:none;}
.hero-slide{
  position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease);
}
.hero-slide.is-active{opacity:1;z-index:2;}
.hero-slide img{
  width:100%;height:100%;object-fit:cover;object-position:var(--focal, 50% 50%);
  transform:scale(1.02);transition:transform 9s linear;
}
.hero-slide.is-active img{transform:scale(1.12);}
/* Bij Belle branding graphic in the hero slider: a static logo shouldn't Ken-Burns-zoom like a photo, and the extra scale was cropping the circle mark and the stripe band below it. */
.hero-slide.hero-slide-zoom-out img,
.hero-slide.hero-slide-zoom-out.is-active img{transform:scale(1);}
.reduced-motion .hero-slide{transition:opacity .4s linear;}
.reduced-motion .hero-slide img,.reduced-motion .hero-slide.is-active img{transition:none;transform:scale(1);}
/* Ken Burns (the slow img scale) is a desktop-only refinement — disabled below 700px
   to protect mobile performance/battery and because the effect reads as noise at
   phone viewing distance. Mirrors the isMobile breakpoint used in heroSlider() JS. */
@media (max-width:700px){
  .hero-slide img,.hero-slide.is-active img{transform:scale(1);transition:none;}
}
.hero-slide-scrim{position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,var(--overlay,.35)), transparent 45%);}
.hero-arrows{position:absolute;bottom:26px;left:26px;display:flex;gap:10px;z-index:5;}
.hero-arrows button{
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:rgba(0,0,0,.28);
  color:#fff;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);
  font-size:16px;transition:background .25s, transform .25s;
}
.hero-arrows button:hover{background:rgba(0,0,0,.5);}
.hero-arrows button:focus-visible,.hero-dots button:focus-visible,.hero-rail button:focus-visible{
  outline:2px solid #fff;outline-offset:2px;
}
.hero-dots{position:absolute;bottom:38px;right:26px;display:flex;gap:10px;z-index:5;}
.hero-dots button{
  width:22px;height:22px;padding:0;border:none;background:transparent;display:flex;align-items:center;justify-content:center;
}
.hero-dots button::before{
  content:"";width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .25s,transform .25s;
}
.hero-dots button[aria-current="true"]::before{background:#fff;transform:scale(1.3);}
.hero-rail{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:14px;color:#fff;
}
.hero-rail .vlabel{writing-mode:vertical-rl;font-size:11px;letter-spacing:.08em;}
.hero-rail .vline{width:1px;height:60px;background:rgba(255,255,255,.5);}
.hero-rail button{background:transparent;border:none;color:#fff;font-size:13px;opacity:.8;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.hero-copy{
  background:var(--panel-human);color:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:32px;
  padding:calc(var(--pad) + 70px) var(--pad) var(--pad);
  transition:background var(--dur) var(--ease);
}
.hero-copy h1{
  font-family:var(--serif);font-size:var(--fs-hero);line-height:1.05;letter-spacing:-.01em;
}
.hero-copy h1 .caret{display:inline-block;animation:blink 1s steps(1) infinite;font-weight:300;}
.reduced-motion .hero-copy h1 .caret{animation:none;opacity:1;}
@keyframes blink{50%{opacity:0;}}
.hero-blocks{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.hero-block b{display:block;font-family:var(--cond);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:12px;margin-bottom:10px;padding-top:14px;border-top:2px solid var(--ink);}
.hero-block p{margin:0 0 10px;font-size:14px;color:var(--ink-soft);}
.readmore{font-family:var(--cond);font-weight:600;font-size:12px;letter-spacing:.05em;text-transform:uppercase;position:relative;}
.readmore::after{content:"———";margin-left:6px;transition:margin .3s var(--ease);}
.readmore:hover::after{margin-left:12px;}

/* ================= POSITIONING ================= */
.positioning{padding:120px var(--pad);background:var(--bg);}
.positioning .grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.3fr .9fr;gap:60px;align-items:center;}
.positioning h2{font-family:var(--serif);font-size:var(--fs-h2);line-height:1.08;}
.positioning .sub{margin-top:22px;color:var(--ink-soft);max-width:34ch;font-size:14px;}
.positioning-media{position:relative;border-radius:2px;overflow:hidden;aspect-ratio:4/3;}
.positioning-media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 0%;
}
/* ================= PLAN OF 3 ================= */
.plan3{background:var(--authority);color:var(--authority-text);padding:110px var(--pad);transition:background var(--dur), color var(--dur);}
.plan3-head{max-width:var(--maxw);margin:0 auto 64px;}
.plan3-head .label{color:var(--accent-a);}
.plan3-head h2{font-family:var(--serif);font-size:var(--fs-h2);margin-top:14px;}
.plan3-steps{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);}
.plan3-step{
  background:var(--authority);padding:36px 30px 40px;cursor:pointer;
  opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.plan3-step.in-view{opacity:1;transform:translateY(0);}
.plan3-step:nth-child(2){transition-delay:.12s;}
.plan3-step:nth-child(3){transition-delay:.24s;}
.plan3-num{font-family:var(--serif);font-size:var(--fs-num);line-height:1;color:var(--accent-a);}
.plan3-step h3{font-family:var(--serif);font-size:var(--fs-stat);margin-top:18px;line-height:1.12;}
.plan3-more{
  margin-top:18px;font-size:13.5px;color:rgba(255,255,255,.7);max-height:0;overflow:hidden;
  transition:max-height .5s var(--ease);
}
[data-theme="day"] .plan3-more{color:rgba(16,13,8,.68);}
.plan3-step.expanded .plan3-more{max-height:220px;}
.plan3-toggle{margin-top:20px;font-family:var(--cond);font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.75;}

/* ================= SELECTED WORK ================= */
.work{padding:110px var(--pad) 40px;