/* Bijak Home — drafting-sheet design (from Claude Design mockup, ecolinear-style)
   Tokens: day theme on :root, night on [data-theme=dark].
   Sections marked data-theme=light stay day-palette in both themes. */

/* ── Tokens ─────────────────────────────────────────────────────── */
:root{
  /* DAY — sunlit plaster, terracotta, midday amber */
  --paper:#f8f4e9;
  --paper-2:#efe8d8;
  --paper-3:#fffdf6;
  --ink:#3f3526;
  --ink-2:#9a6f4e;
  --ink-3:#ab9878;
  --terracotta:#c0653a;
  --amber:#f5a201;
  --line:#e3d9c3;
  --line-strong:#c0653a;

  /* one family, ecolinear-style: annotation layer is Montserrat too,
     distinguished by caps + wide tracking (--font-mono kept as an alias) */
  --font-sans:'Montserrat',ui-sans-serif,'Helvetica Neue',sans-serif;
  --font-mono:'Montserrat',ui-sans-serif,sans-serif;
  --text-display:clamp(48px,8vw,120px);
  --text-h1:clamp(36px,5vw,64px);
  --text-h2:clamp(28px,3.5vw,44px);
  --text-h3:24px;
  --text-lead:20px;
  --text-body-size:16px;
  --text-small:14px;
  --text-label:12px;
  --leading-tight:1.05;
  --leading-body:1.5;
  --tracking-display:-0.03em;
  --tracking-label:0.06em;
  --weight-display:600;
  --weight-heading:500;

  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
  --space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:160px;
  --page-margin:clamp(16px,3vw,40px);

  --ease:cubic-bezier(.7,0,.3,1);
  --figw:min(32.4vw,398px); /* hero figure width — clip formula shares this */
}
/* NIGHT — cold deep blue, moonlit accents (mockup overrides warm accents to cold) */
[data-theme="dark"]{
  --paper:#131824;
  --paper-2:#1a2130;
  --paper-3:#0e131d;
  --ink:#dfe4ec;
  --ink-2:#8fa0b8;
  --ink-3:#66748a;
  --terracotta:#f4f7fc;
  --amber:#dfe4ec;
  --line:#2a3242;
  --line-strong:#8fa0b8;
}

/* ── Base ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
/* no scroll-behavior:smooth here — it double-smooths Lenis's per-frame writes */
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-sans);font-size:var(--text-body-size);
  line-height:var(--leading-body);-webkit-font-smoothing:antialiased;
  transition:background .5s var(--ease),color .5s var(--ease);
}
a{color:var(--ink);text-decoration:none;transition:opacity .2s}
a:hover{opacity:.55}
::selection{background:var(--ink);color:var(--paper)}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}

.mono{
  font-family:var(--font-mono);font-size:var(--text-label);
  letter-spacing:var(--tracking-label);color:var(--ink-3);
}
.shell{max-width:1240px;margin:0 auto}
.section{padding:var(--space-10) var(--page-margin);border-top:1px solid var(--line)}
.eyebrow{
  font-family:var(--font-mono);font-size:var(--text-label);
  letter-spacing:var(--tracking-label);color:var(--ink-3);
  margin-bottom:var(--space-6);
}
.h1{
  font-size:var(--text-h1);font-weight:var(--weight-heading);
  letter-spacing:var(--tracking-display);line-height:var(--leading-tight);
  text-wrap:pretty;
}
.accent{color:var(--terracotta)}

/* theme switch: scan wipe */
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:bh-scan .9s var(--ease) forwards}
@keyframes bh-scan{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* night -> day scans the other way */
:root.scan-rtl::view-transition-new(root){animation-name:bh-scan-rtl}
@keyframes bh-scan-rtl{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}

/* ── Intro loader (ecolinear page-transition port) ──────────────── */
/* staged entrance: wordmark scans in left to right on .intro.
   clipped per layer (never on the wrap) so base stays behind the photo */
/* .3em bleed on non-animated sides so descenders (the j) never crop */
.js .hero__wm:not(.hero__wm--front){clip-path:inset(-.3em 100% -.3em -.3em);transition:clip-path 1.1s var(--ease) .3s}
body.intro .hero__wm:not(.hero__wm--front){clip-path:inset(-.3em -.3em -.3em -.3em)}
.js .hero__wm--front .wm-scan{display:block;clip-path:inset(-.3em 100% -.3em -.3em);transition:clip-path 1.1s var(--ease) .3s}
body.intro .hero__wm--front .wm-scan{clip-path:inset(-.3em -.3em -.3em -.3em)}
.js .hero__plan,.js .header,.js .hero__meta,.js .hero__cue{opacity:0;transition:opacity .9s var(--ease)}
.js .hero__meta,.js .hero__cue{transition-delay:.8s}
body.intro .hero__plan,body.intro .header,body.intro .hero__meta,body.intro .hero__cue{opacity:1}
.js body:not(.fig-in) .hero__fig img{clip-path:inset(100% 0 0 0) !important;transition:none !important}
@media (prefers-reduced-motion:reduce){
  .js .hero__plan,.js .header,.js .hero__meta,.js .hero__cue{opacity:1;transform:none;transition:none}
  .js .hero__wm:not(.hero__wm--front),.js .hero__wm--front .wm-scan{clip-path:none;transition:none}
}

/* ── Header ─────────────────────────────────────────────────────── */
.header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  padding:16px var(--page-margin);
  background:var(--paper);border-bottom:1px solid var(--line);
  transition:transform .5s var(--ease),background .5s,border-color .5s;
}
.header.is-hidden{transform:translateY(-101%)}
.logo{font-weight:600;font-size:18px;letter-spacing:-0.02em}
.logo span{color:var(--terracotta)}
.nav{display:flex;gap:var(--space-6)}
.nav a{display:inline-flex;align-items:baseline;gap:6px;font-size:var(--text-small)}
.nav a .n{font-family:var(--font-mono);font-size:10px;color:var(--ink-3)}
.theme-toggle{
  font-family:var(--font-mono);font-size:var(--text-label);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  background:none;border:1px solid var(--line-strong);color:var(--ink);
  padding:8px 14px;cursor:pointer;border-radius:0;white-space:nowrap;
  transition:opacity .2s;
}
.theme-toggle:hover{opacity:.55}

/* ── Hero ───────────────────────────────────────────────────────── */
.hero{
  position:sticky;top:0;z-index:0; /* pinned: the .after sheet slides up over it */
  min-height:100vh;display:flex;align-items:center;
  justify-content:center;overflow:hidden;
  padding:120px var(--page-margin) 80px;
}
.after{position:relative;z-index:1;background:var(--paper);transition:background .5s var(--ease)}
.after > *{position:relative;z-index:1} /* content rides above the site-wide plan grid */
.site-plan{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
/* opaque-band sections re-draw the plan grid on top of their own background */
.section-plan{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.section--alt .shell{position:relative;z-index:1}
.hero__plan{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* wordmark overlay: base layer paints under the figure (no z-index, no transform
   on the wrap so it creates no stacking context), front outline layer above it */
.hero__wm-wrap{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.hero__wm{
  font-size:clamp(60px,11.5vw,204px);font-weight:600;letter-spacing:.05em;
  line-height:.92;color:var(--terracotta);white-space:nowrap;
}
.hero__wm--front{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:transparent;-webkit-text-stroke:2px #fff;
  z-index:3;
  clip-path:inset(-.3em calc(50% - var(--figw)/2)); /* vertical bleed for descenders */
}
.hero__fig-wrap{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:var(--figw);aspect-ratio:1/1;z-index:2;
}
.hero__fig{position:relative;width:100%;height:100%;outline:1px solid var(--amber)}
.hero__fig img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  clip-path:inset(100% 0 0 0);transition:clip-path .9s var(--ease);
}
.hero__fig img.is-active{clip-path:inset(0 0 0 0)}
.corner{position:absolute;width:14px;height:14px;pointer-events:none}
.corner--tl{top:-6px;left:-6px;border-top:1.5px solid var(--amber);border-left:1.5px solid var(--amber)}
.corner--tr{top:-6px;right:-6px;border-top:1.5px solid var(--amber);border-right:1.5px solid var(--amber)}
.corner--bl{bottom:-6px;left:-6px;border-bottom:1.5px solid var(--amber);border-left:1.5px solid var(--amber)}
.corner--br{bottom:-6px;right:-6px;border-bottom:1.5px solid var(--amber);border-right:1.5px solid var(--amber)}
.hero__figcap{
  position:absolute;top:0;right:-26px;writing-mode:vertical-rl;
  font-family:var(--font-mono);font-size:var(--text-label);
  letter-spacing:var(--tracking-label);color:var(--ink-3);pointer-events:none;
}
.hero__meta{
  position:absolute;left:var(--page-margin);right:var(--page-margin);bottom:64px;
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;
}
.hero__sub{font-family:var(--font-mono);font-size:clamp(18px,2vw,26px);color:var(--amber)}
.hero__coords{
  font-family:var(--font-mono);font-size:var(--text-label);
  letter-spacing:var(--tracking-label);color:var(--ink-3);margin-top:12px;
}
.hero__tag{
  font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);text-align:right;max-width:340px;
}
.hero__cue{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:var(--text-label);
  letter-spacing:var(--tracking-label);color:var(--ink-3);
  animation:bh-scrollcue 2s var(--ease) infinite;
}
@keyframes bh-scrollcue{0%,100%{transform:translate(-50%,0);opacity:.9}50%{transform:translate(-50%,8px);opacity:.4}}

/* ── Work gallery (rises over the hero) ─────────────────────────── */
.gallery{
  position:relative;min-height:100vh;
  padding:14vh var(--page-margin) var(--space-9);
}
.gallery__cols{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2.5vw,40px);align-items:start;
  max-width:1500px;margin:0 auto;
}
.gallery__col{display:flex;flex-direction:column;gap:clamp(16px,2.5vw,40px);will-change:transform}
.gallery__col:nth-child(2){margin-top:18vh}
.gallery__col:nth-child(3){margin-top:6vh}
.gallery__col:nth-child(4){margin-top:26vh}
.ph{
  background:var(--paper-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.ph img,.ph video{width:100%;height:100%;object-fit:cover;display:block}
.ph--43{aspect-ratio:4/3}
.ph--34{aspect-ratio:3/4}
.ph--11{aspect-ratio:1/1}
@media (max-width:760px){
  .gallery__cols{grid-template-columns:repeat(2,1fr)}
  .gallery__col:nth-child(3),.gallery__col:nth-child(4){margin-top:0}
}

/* ── A day at home (scroll-scrubbed flight, split layout) ───────── */
.journey{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.journey__media{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-6)}
.journey__frame{width:100%;max-width:min(44vw,820px)}
.journey__stack{position:relative;aspect-ratio:4/3;outline:1px solid var(--amber)}
.journey__stack video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.journey__figcap{
  position:absolute;top:0;right:-26px;writing-mode:vertical-rl;pointer-events:none;
}
.jstep{position:relative}
.jstep .ghost-num{font-size:clamp(64px,7vw,110px)}
.journey__frame figcaption{margin-top:12px}
.journey__steps{display:flex;flex-direction:column}
.jstep{min-height:90vh;display:flex;flex-direction:column;justify-content:center;gap:var(--space-4);padding:0 var(--space-8) 0 var(--space-6)}
.jstep:last-child{min-height:130vh;justify-content:flex-start;padding-top:30vh} /* the closing line stays readable longer */
.jstep .eyebrow{margin-bottom:var(--space-5)}
.jstep h3{font-size:var(--text-h2);font-weight:var(--weight-heading);letter-spacing:var(--tracking-display)}
.jstep p{color:var(--ink-2);max-width:44ch;text-wrap:pretty}
@media (max-width:760px){
  .journey{grid-template-columns:1fr}
  .journey__media{height:52vh;padding:var(--space-4)}
  .jstep{min-height:70vh;padding:0 var(--page-margin)}
}

/* ── Two-column section head ────────────────────────────────────── */
.split{display:grid;grid-template-columns:minmax(280px,5fr) minmax(280px,4fr);gap:var(--space-8);align-items:start}
.split--even{grid-template-columns:minmax(280px,1fr) minmax(300px,1fr)}
.stack{display:flex;flex-direction:column;gap:var(--space-5)}
.lead{font-size:var(--text-lead);line-height:var(--leading-body);text-wrap:pretty}
.body-2{color:var(--ink-2);text-wrap:pretty}
.arrow-link{font-size:var(--text-small)}

/* the process: sticky sheet left, steps scroll right */
.process{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.process__media{order:1;position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center}
.process__steps{order:2;padding-right:clamp(32px,7vw,120px);padding-left:0}
/* media plate group: photo plate + animation plate, arranged per pv1/pv2/pv3 */
.pmedia{position:relative;display:flex;flex-direction:column;gap:20px;align-items:center}
.pphoto{
  position:relative;width:min(38vw,520px);aspect-ratio:4/3;
  background:var(--paper-3);overflow:hidden;
}
.pphoto img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.78) contrast(1.04);
  clip-path:inset(0 100% 0 0);transition:clip-path .8s var(--ease);
}
.pphoto img.is-on{clip-path:inset(0 0 0 0)}
.psheet{
  position:relative;background:var(--paper-3);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.psheet svg{position:relative;height:82%;width:auto;overflow:visible;transition:opacity .32s var(--ease)}
.psheet__num{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-weight:200;line-height:1;letter-spacing:-0.03em;color:var(--ink);
  opacity:.07;pointer-events:none;transition:opacity .32s var(--ease);
}
.psheet__cap{position:absolute;left:16px;bottom:12px;z-index:2}

/* pv4 — photo alone on the left, animation ghosted behind the scrolling steps.
   svg box matches the photo plate (38vw x 4:3) and hugs the text's left edge */
.pv4 .pmedia{position:static}
.pv4 .psheet{
  position:absolute;left:100%;top:0;width:100%;height:100%;
  background:transparent;pointer-events:none;justify-content:flex-start;
}
.pv4 .psheet svg{opacity:.14;width:min(38vw,520px);height:min(28.5vw,390px)}
.pv4 .psheet__num{display:none}
.process__steps{display:flex;flex-direction:column}
.process__steps .eyebrow{padding-top:clamp(120px,16vh,180px)}
.pstep{position:relative;min-height:78vh;display:flex;flex-direction:column;justify-content:center;gap:var(--space-4)}
.pstep:last-child{min-height:125vh;justify-content:flex-start;padding-top:26vh} /* hold step 05 longer before the next section */
/* same treatment as the day-at-home steps: solid numeral above, ink heading */
.pstep__num{
  font-size:clamp(64px,7vw,110px);font-weight:300;letter-spacing:-0.02em;
  line-height:1;color:var(--ink);margin-bottom:var(--space-5);
}
.pstep h3{
  font-size:var(--text-h2);font-weight:var(--weight-heading);
  letter-spacing:var(--tracking-display);color:var(--ink);max-width:18ch;
}
.pstep p{color:var(--ink-2);max-width:44ch;text-wrap:pretty}
@media (max-width:760px){
  .process{grid-template-columns:1fr}
  .process__media{display:none}
  .process__steps{padding:0 var(--page-margin)}
  .pstep{min-height:0;padding:48px 0}
}

/* footer giant outline wordmark */
.footer__wm{
  border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);
  padding:var(--space-6) 0;text-align:center;overflow:hidden;
}
.footer__wm span{
  font-size:clamp(48px,10.5vw,185px);font-weight:600;letter-spacing:.05em;
  line-height:1;white-space:nowrap;color:transparent;
  -webkit-text-stroke:2px var(--terracotta);
}

/* about: ecolinear-style word reveal */
.about-para{
  font-size:clamp(28px,4.3vw,58px);font-weight:300;line-height:1.25;
  letter-spacing:-0.01em;max-width:76%;margin-left:8%;text-wrap:pretty;
}
.about-para .w{opacity:.14;transition:opacity .45s var(--ease)}
.about-para .w.is-lit{opacity:1}
.about-para .w-strong{font-weight:700}
@media (max-width:760px){.about-para{max-width:100%;margin-left:0}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-6);margin-top:var(--space-9)}
.stat{border-top:1px solid var(--line-strong);padding-top:var(--space-4)}
.stat__num{
  font-size:var(--text-h1);font-weight:var(--weight-display);
  letter-spacing:var(--tracking-display);color:var(--terracotta);
}
.stat__label{font-size:var(--text-small);color:var(--ink-2);margin-top:8px}

/* architecture */
.sticky-title{position:sticky;top:120px}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{
  font-family:var(--font-mono);font-size:var(--text-label);
  letter-spacing:var(--tracking-label);border:1px solid var(--line);
  padding:6px 12px;color:var(--ink-2);
}
.figure{border:1px solid var(--line);padding:var(--space-5)}
.figure svg{width:100%;height:auto;display:block}
.figure figcaption{
  font-family:var(--font-mono);font-size:var(--text-label);
  letter-spacing:var(--tracking-label);color:var(--ink-3);
  margin-top:var(--space-4);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}

/* notice */
.notice{
  border-left:3px solid var(--amber);background:var(--paper-3);
  padding:var(--space-5) var(--space-6);margin-top:var(--space-8);max-width:880px;
  margin-left:8%;   /* box edge (the amber rule) sits on the paragraph's left edge */
}
@media (max-width:760px){.notice{margin-left:0}}
.notice__label{
  font-family:var(--font-mono);font-size:var(--text-label);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--ink-3);margin-bottom:8px;
}
.notice p{font-size:var(--text-small);text-wrap:pretty}

/* services */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-7)}
.svc{display:flex;flex-direction:column;gap:16px;border-top:1px solid var(--line-strong);padding-top:20px}
.svc__head{display:flex;justify-content:space-between;align-items:baseline}
.svc__num{
  font-size:var(--text-h1);font-weight:var(--weight-display);
  letter-spacing:var(--tracking-display);line-height:1;
}
.svc h3{font-size:var(--text-h3);font-weight:var(--weight-heading);letter-spacing:-0.01em}
.svc p{color:var(--ink-2);text-wrap:pretty}

/* process */
.step{
  display:grid;grid-template-columns:minmax(60px,1fr) minmax(160px,2fr) minmax(260px,4fr);
  gap:var(--space-6);border-top:1px solid var(--line-strong);
  padding:var(--space-6) 0;align-items:start;
}
.step__num{
  font-size:var(--text-h1);font-weight:var(--weight-display);
  letter-spacing:var(--tracking-display);line-height:1;color:var(--terracotta);
}
.step h3{font-size:var(--text-h3);font-weight:var(--weight-heading)}
.step p{color:var(--ink-2);text-wrap:pretty}

/* packages */
.section--alt{background:var(--paper-2)}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-6);align-items:stretch}
.tier{
  display:flex;flex-direction:column;gap:var(--space-5);
  background:var(--paper-3);border:1px solid var(--line);padding:var(--space-6);
}
.tier--featured{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tier__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.tier__head span{
  font-family:var(--font-mono);font-size:var(--text-label);
  letter-spacing:var(--tracking-label);color:var(--ink-3);
}
.tier--featured .tier__head span{color:var(--amber)}
.tier h3{font-size:var(--text-h2);font-weight:var(--weight-heading);letter-spacing:var(--tracking-display)}
.tier__price{display:flex;align-items:baseline;gap:12px}
.tier__price strong{font-size:var(--text-h3);font-weight:var(--weight-display)}
.tier__price s{font-family:var(--font-mono);font-size:var(--text-small);color:var(--ink-3)}
.tier ul{display:flex;flex-direction:column;gap:var(--space-3);flex:1}
.tier li{display:flex;gap:10px;font-size:var(--text-small)}
.tier li::before{content:"→";color:var(--amber)}
.tier__cta{
  font-family:var(--font-mono);font-size:var(--text-label);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  display:inline-flex;justify-content:center;padding:14px 24px;
  background:transparent;color:inherit;border:1px solid currentColor;
}
.tier--featured .tier__cta{background:var(--amber);color:#3f3526;border-color:var(--amber)}
/* night: amber matches the inverted card bg, so outline the button instead */
[data-theme="dark"] .tier--featured .tier__cta{background:transparent;color:inherit;border:1px solid currentColor}
/* engagements: spec ledger (compact, one screen) */
.lg{border:1px solid var(--line-strong);background:var(--paper-3)}
.lg__row{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;align-items:center;border-top:1px solid var(--line)}
.lg__row:first-child{border-top:none}
.lg__row > span{padding:9px 16px;text-align:center;font-size:var(--text-small)}
.lg__feat{text-align:left !important;color:var(--ink-2)}
.lg__head > span{padding:16px}
.lg__head em{display:block;font-style:normal;font-size:clamp(20px,2vw,30px);font-weight:400;letter-spacing:-0.02em}
.lg__head i{font-style:normal;display:block;margin-top:4px;font-size:11px}
.lg__price span{font-weight:500}
.lg__price s{font-family:var(--font-mono);font-size:12px;color:var(--ink-3)}
.lg__row:not(.lg__head):not(.lg__price):not(.lg__cta) > span:not(.lg__feat){color:var(--amber);font-size:15px}
/* the Integrate column is highlighted top to bottom */
.lg__row > span:nth-child(3){
  background:color-mix(in srgb, var(--amber) 8%, transparent);
  border-left:1px solid var(--line);border-right:1px solid var(--line);
}
.lg__cta > span{padding:14px 16px}
.lg__cta .btn-outline{padding:9px 16px}
@media (max-width:760px){.lg{overflow-x:auto}.lg__row{min-width:640px}}

.tiers-note{
  font-family:var(--font-mono);font-size:var(--text-label);
  letter-spacing:var(--tracking-label);color:var(--ink-3);margin-top:var(--space-6);
}

/* footer */
.footer{padding:clamp(56px,8vh,100px) var(--page-margin) var(--space-6);border-top:1px solid var(--line)}
.footer .shell{display:flex;flex-direction:column;gap:var(--space-9)}
.footer__cta{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-8);flex-wrap:wrap}
.btn-primary{
  font-family:var(--font-mono);font-size:var(--text-label);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;padding:14px 32px;
  background:var(--ink);color:var(--paper);
}
.footer__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--space-6);margin-top:var(--space-6);
}
.footer__col-title{
  font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;
}
.footer__col div{font-size:var(--text-small);line-height:1.6;color:var(--ink-2)}
/* enquiry form (footer) */
.enquiry{display:flex;flex-direction:column;gap:var(--space-5);width:min(100%,420px)}
.enquiry label{display:block}
.micro-label{
  display:block;font-family:var(--font-mono);font-size:var(--text-label);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--ink-3);margin-bottom:8px;
}
.enquiry input,.enquiry textarea{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);
  border-radius:0;padding:8px 0 12px;font-family:var(--font-sans);
  font-size:var(--text-body-size);color:var(--ink);outline:none;resize:vertical;
  transition:border-color .2s;
}
.enquiry input:focus,.enquiry textarea:focus{border-bottom-color:var(--ink)}
.enquiry__actions{display:flex;gap:var(--space-4);flex-wrap:wrap}
.btn-outline{
  font-family:var(--font-mono);font-size:var(--text-label);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  display:inline-flex;justify-content:center;padding:14px 24px;
  background:transparent;color:var(--ink);border:1px solid var(--ink);
  cursor:pointer;transition:opacity .2s;
}
.btn-outline:hover{opacity:.55}
.btn-cal{border-color:var(--line-strong)}

.titleblock{display:flex;border:1px solid var(--line-strong);background:var(--paper)}
.titleblock__cell{
  display:flex;flex-direction:column;gap:2px;padding:10px 16px;
  border-left:1px solid var(--line-strong);flex:1;
}
.titleblock__cell:first-child{border-left:none}
.titleblock__cell .k{
  font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--ink-3);
}
.titleblock__cell .v{font-family:var(--font-mono);font-size:var(--text-label)}
.footer__base{
  font-family:var(--font-mono);font-size:var(--text-label);
  letter-spacing:var(--tracking-label);color:var(--ink-3);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}

/* reveal */
.js [data-reveal]{opacity:0;transform:translateY(26px)}
.js [data-reveal].is-in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none}
  .hero__cue{animation:none}
}

/* mobile */
@media (max-width:760px){
  .nav{display:none}
  .split,.split--even{grid-template-columns:1fr}
  .sticky-title{position:static}
  .step{grid-template-columns:56px 1fr;grid-template-rows:auto auto}
  .step p{grid-column:2}
  .hero__figcap{right:auto;left:-26px}
}

/* variant A: dimension line along the steps */
.journey__steps{position:relative;padding-left:48px}
.jline{position:absolute;left:16px;top:8vh;bottom:8vh;width:1px;background:var(--line)}
.jline span{position:absolute;left:0;top:0;width:1px;height:100%;background:var(--amber);transform:scaleY(0);transform-origin:top}
.jstep::before{content:"";position:absolute;left:-32px;top:50%;width:14px;border-top:1px solid var(--amber)}
@media (max-width:760px){.journey__frame{max-width:100%}}

/* variant A: hover accordion */
.acc{display:flex;gap:14px;height:74vh}
.acc__panel{position:relative;overflow:hidden;flex:1;min-width:0;cursor:pointer;outline:1px solid var(--line);transition:flex .8s var(--ease)}
.acc__panel.is-open{flex:3.4}
.acc__bg{position:absolute;inset:0}
.acc__bg img{width:100%;height:100%;object-fit:cover;display:block}
.acc__bg::after{content:"";position:absolute;inset:0;background:var(--paper);opacity:.72;transition:opacity .8s var(--ease)}
.acc__panel.is-open .acc__bg::after{opacity:.06}
.acc__rail{position:absolute;top:20px;left:20px;display:flex;flex-direction:column;gap:16px;z-index:2}
.acc__num{font-size:clamp(40px,4vw,64px);font-weight:300;line-height:1;color:var(--terracotta);opacity:.8}
.acc__vtitle{writing-mode:vertical-rl;font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);transition:opacity .5s var(--ease)}
.acc__panel.is-open .acc__vtitle{opacity:0}
.acc__body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:96px 24px 24px;
  background:linear-gradient(to top, rgba(12,10,8,.78) 0%, rgba(12,10,8,.45) 55%, rgba(12,10,8,0) 100%);
  opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease) .25s,transform .55s var(--ease) .25s;
}
.acc__panel.is-open .acc__body{opacity:1;transform:none}
.acc__body h3{font-size:var(--text-h3);font-weight:var(--weight-heading);color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.acc__body p{margin-top:8px;font-size:var(--text-small);line-height:1.6;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.5);max-width:52ch}
@media (max-width:760px){.acc{flex-direction:column;height:auto}.acc__panel{min-height:16vh}.acc__panel.is-open{min-height:52vh}}

/* footer F1: split with figure */
.footer .shell{gap:var(--space-7)}
.fmerge{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(40px,6vw,110px);align-items:center}
.fmerge__left{display:flex;flex-direction:column;gap:var(--space-4)}
.fmerge .enquiry{gap:var(--space-4)}
.fmerge .enquiry input,.fmerge .enquiry textarea{padding:6px 0 9px}
.fmerge__fig{position:relative;aspect-ratio:4/3;max-width:520px;justify-self:end;width:100%;align-self:start;margin-top:12px}
.fmerge__fig img{width:100%;height:100%;object-fit:cover;display:block;outline:1px solid var(--amber)}
.fmerge__cap{position:absolute;left:0;bottom:-26px}
.finfo{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:baseline;font-size:var(--text-small);color:var(--ink-2)}
.finfo a{color:var(--ink)}
.finfo__soc{display:inline-flex;gap:18px;margin-left:auto}
@media (max-width:900px){.fmerge{grid-template-columns:1fr}.fmerge__fig{justify-self:start}}

/* enquiry buttons: side by side, equal boxes */
.enquiry{width:min(100%,520px)}
.enquiry__actions{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.enquiry__actions .btn-outline{width:100%;padding:14px 8px;text-align:center;justify-content:center}
@media (max-width:520px){.enquiry__actions{grid-template-columns:1fr}}

/* pricing: photo layer drifting behind a glass ledger */
#packages{overflow:hidden;background:transparent}
.packages-bg{position:absolute;inset:0;z-index:0}
.packages-bg img{position:absolute;left:0;top:-14%;width:100%;height:128%;object-fit:cover;will-change:transform}
.packages-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, var(--paper) 0%, color-mix(in srgb, var(--paper) 42%, transparent) 28%, color-mix(in srgb, var(--paper) 42%, transparent) 72%, var(--paper) 100%)}
.lg{background:color-mix(in srgb, var(--paper-3) 80%, transparent);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}

/* header: nav pill — transparent at top, translucent glass once scrolled, never hides */
.hd2{background:transparent;border-bottom:none;padding:22px var(--page-margin)}
.hd2__pill{position:relative;display:flex;align-items:center;gap:22px;padding:12px 22px;background:transparent;transition:background .4s var(--ease),backdrop-filter .4s}
.hd2.is-scrolled .hd2__pill{
  background:color-mix(in srgb, var(--paper) 68%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.hd2 .nav{gap:26px}
.hd2 .nav a{font-size:13px}
.hd2__div{width:1px;height:18px;background:var(--line-strong)}
.hd2 .theme-toggle{border:none;padding:0}

/* theme toggle reads as a light switch: label + sliding knob, hover lifts it */
.theme-toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.tt__label{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
.tt__switch{
  position:relative;width:38px;height:20px;flex:none;
  border:1px solid var(--line-strong);background:transparent;
  transition:border-color .3s var(--ease);
}
.tt__switch i{
  position:absolute;top:2px;left:2px;width:15px;height:14px;
  background:var(--amber);display:block;
  transition:transform .4s var(--ease),background .3s var(--ease);
}
[data-theme="dark"] .tt__switch i{transform:translateX(17px)}
.theme-toggle:hover{opacity:1}
.theme-toggle:hover .tt__switch{border-color:var(--amber)}
.theme-toggle:hover .tt__label{opacity:.6}
.theme-toggle:focus-visible{outline:1px solid var(--amber);outline-offset:3px}

/* ── Mobile fixes ───────────────────────────────────────────────── */
@media (max-width:760px){
  /* SS1 hero: taller portrait figure, wordmark tucked under it */
  :root{--figw:min(74vw,420px)}
  .hero__fig-wrap{aspect-ratio:3/4;top:50%}
  .hero__wm{font-size:15vw}
  .hero__wm--front{clip-path:inset(-.3em calc(50% - var(--figw)/2))}
  .hero__figcap{right:-22px;font-size:10px}

  /* SS2 day-at-home: media pinned on top, steps below it, never overlapping */
  .journey{grid-template-columns:1fr}
  .journey__media{
    position:sticky;top:56px;height:46vh;z-index:2;
    background:var(--paper);padding:8px 0 12px;
  }
  .journey__frame{max-width:100%}
  .journey__steps{position:relative;z-index:1;padding:0 var(--page-margin)}
  .jstep{min-height:auto;padding:40px 0}
  .jstep:last-child{min-height:auto;padding-top:40px}

  /* SS3 accordion: horizontal titles, stacked panels */
  .acc{flex-direction:column;height:auto;gap:12px}
  .acc__panel{min-height:150px}
  .acc__panel.is-open{min-height:56vh}
  .acc__rail{flex-direction:row;align-items:baseline;gap:14px}
  .acc__num{font-size:34px}
  .acc__vtitle{
    writing-mode:horizontal-tb;font-size:13px;letter-spacing:.16em;
  }

  /* SS4 footer: contact + socials as a clean stacked list */
  .finfo{flex-direction:column;align-items:flex-start;gap:10px}
  .finfo__soc{margin-left:0;flex-direction:column;gap:10px}
  .footer__base{flex-direction:column;gap:6px}
}

/* ── Mobile pass 2 ──────────────────────────────────────────────── */
/* no horizontal scroll anywhere.
   MUST be clip, never hidden: overflow:hidden makes html/body a scroll
   container and silently kills every position:sticky on the page (hero pin,
   process sheet, journey video). clip trims the overflow without that. */
html,body{overflow-x:clip}
.header{max-width:100vw}

@media (max-width:760px){
  /* hero: figure centres on the wordmark. never put a transform on the wrap —
     it makes a stacking context and buries the white outline under the photo */
  .hero__fig-wrap{top:50%}

  /* gallery: no drift offsets, natural image height so nothing is cropped */
  /* one sequential flow, zigzagged: 1 left, 2 right lower, 3 left, 4 right... */
  .gallery__cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  .gallery__col{display:contents}          /* tiles become the grid items, in order */
  .ph{margin:0}
  /* shift by transform, not margin: rows keep their natural spacing and the
     right tile starts exactly halfway down its left partner */
  .ph--b{transform:translateY(50%)}
  .gallery{padding-top:6vh;padding-bottom:calc(6vh + 120px)}
  .gallery__cols{align-items:start}
  .ph,.ph--43,.ph--34,.ph--11{aspect-ratio:3/4}
  .ph img,.ph video{width:100%;height:100%;object-fit:cover;object-position:center}
}

/* ── Mobile pass 3: journey without the video scrub, tighter process ── */
.jstep__fig{display:none}

@media (max-width:760px){
  /* no scroll-scrubbed video on phones: stills per step, normal scrolling */
  .journey__media{display:none}
  .journey{grid-template-columns:1fr}
  .journey__steps{padding:0 var(--page-margin)}
  .jstep,.jstep:last-child{min-height:auto;padding:34px 0 8px;gap:14px;justify-content:flex-start}
  .jstep__fig{
    display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
    outline:1px solid var(--amber);margin-bottom:6px;
  }

  /* process steps: no viewport-height blocks, so 04 and 05 sit close together */
  .pstep,.pstep:last-child{min-height:auto;padding:38px 0;justify-content:flex-start}
  .pstep:last-child{padding-top:38px}
  .process__steps .eyebrow{padding-top:var(--space-7)}
  .process__steps{padding-right:var(--page-margin);padding-left:var(--page-margin)}
}

/* ── Packages picker (phones): tap a package, see what it covers ── */
.pk{display:none}
@media (max-width:760px){
  .lg{display:none}
  /* one grid cell for every panel: height stays at the tallest, so the
     section never resizes and the parallax photo never jumps */
  .pk{display:grid;grid-template-columns:1fr}
  .pk__tabs{grid-area:1/1}
  .pk__tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}
  .pk__tab{
    font-family:var(--font-sans);      /* buttons do not inherit type by default */
    background:color-mix(in srgb, var(--paper-3) 55%, transparent);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    border:1px solid var(--line);color:var(--ink);
    padding:12px 6px;cursor:pointer;display:flex;flex-direction:column;
    align-items:center;justify-content:center;text-align:center;gap:4px;
    transition:border-color .3s var(--ease),background .3s var(--ease);
  }
  .pk__tab em{font-style:normal;font-size:15px;font-weight:500}
  .pk__tab i{font-style:normal;font-family:var(--font-sans);font-size:11px;letter-spacing:.06em;color:var(--ink-2)}
  .pk__tab.is-on{border-color:var(--amber);background:color-mix(in srgb, var(--amber) 14%, var(--paper-3) 45%)}
  .pk__tab.is-on i{color:var(--ink-2)}
  .pk__panel{grid-area:2/1;border:1px solid var(--line-strong);padding:22px 20px;
    background:color-mix(in srgb, var(--paper-3) 78%, transparent);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    visibility:hidden;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
  .pk__panel.is-on{visibility:visible;opacity:1;pointer-events:auto}
  .pk__fee{font-size:22px;font-weight:500;margin:6px 0 18px}
  .pk__fee s{font-family:var(--font-mono);font-size:13px;color:var(--ink-3);margin-left:8px}
  .pk__list{display:flex;flex-direction:column;gap:12px}
  .pk__list li{position:relative;padding-left:26px;font-size:var(--text-small);line-height:1.5}
  .pk__list li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--amber);font-size:15px}
  .pk__not{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;line-height:1.5;color:var(--ink-3)}
  .pk .btn-outline{margin-top:20px;width:100%}
}

/* ── Mobile pass 4: hero balance ────────────────────────────────── */
/* outline letters need to survive bright day photos too */
.hero__wm--front{filter:drop-shadow(0 0 2px rgba(0,0,0,.5))}

@media (max-width:760px){
  /* figure no longer swallows the wordmark: letters read on both sides */
  :root{--figw:min(56vw,320px)}
  .hero__wm{font-size:14vw}          /* keep both end letters inside the margins */
  .hero__figcap{right:-20px}
  /* tighten the empty band above the figure and lift the whole block */
  .hero{min-height:88vh;padding:78px var(--page-margin) 42px}
  .hero__fig-wrap{top:46%}
  .hero__wm-wrap{inset:0 0 8% 0}     /* centres at 46% too, no transform */
}

/* journey eyebrow sits at the top of the section, above the first step */
.journey__eyebrow{padding-top:var(--space-9)}
@media (max-width:760px){
  .journey__eyebrow{padding-top:var(--space-7);margin-bottom:var(--space-4)}
}