/* ============================================================
   back of house. — confirmed design system
   Char / Ash / Ember / Paper · Familjen Grotesk wordmark + Newsreader + IBM Plex Sans + Space Mono
   Deliberately single-theme: the brand is "a kitchen at night, one warm light".
   ============================================================ */
:root{
  --char:#14110d; --ash:#201b15; --ember:#d78a42; --paper:#ece4d3;
  --muted:#a89c88; --line:#332c22; --oxblood:#6f2e38;
  --display:"Newsreader",Georgia,serif;
  --wordmark:"Familjen Grotesk","IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --sans:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --radius:6px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--char);color:var(--paper);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--display);font-style:normal;font-weight:400;line-height:1.05;
  letter-spacing:-.01em;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
::selection{background:var(--ember);color:var(--char)}
body.locked{overflow:hidden}

/* ---------- the living ember: one warm light behind everything, following
   the cursor. A tight warm core with a long, edgeless falloff, plus a very
   faint wide wash so a room is never fully unlit. ---------- */
#ember-field{position:fixed;left:0;top:0;width:64vmin;height:64vmin;z-index:0;
  pointer-events:none;opacity:0;will-change:transform,opacity;filter:blur(4vmin);
  background:radial-gradient(circle closest-side,
    color-mix(in oklab,var(--ember) 80%,#fff 6%) 0%,
    color-mix(in oklab,var(--ember) 46%,transparent) 15%,
    color-mix(in oklab,var(--ember) 22%,transparent) 36%,
    color-mix(in oklab,var(--ember) 8%,transparent) 62%,
    transparent 100%)}
#ember-field::after{content:"";position:absolute;left:50%;top:50%;
  width:230%;height:230%;transform:translate(-50%,-50%);border-radius:999px;
  background:radial-gradient(circle closest-side,
    color-mix(in oklab,var(--ember) 12%,transparent) 0%,
    color-mix(in oklab,var(--ember) 4%,transparent) 45%, transparent 78%)}

/* ---------- nav ---------- */
header{position:sticky;top:0;z-index:100;height:64px;display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;padding:0 clamp(16px,4vw,48px);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .5s var(--ease),border-color .5s var(--ease)}
/* a soft top-down scrim so section text never reads through the bar as it
   scrolls under it — no hard edge, just enough to keep the nav legible */
header::before{content:"";position:absolute;left:0;right:0;top:0;height:150%;
  pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,
    color-mix(in oklab,var(--char) 88%,transparent) 0%,
    color-mix(in oklab,var(--char) 60%,transparent) 45%, transparent 100%)}
header.solid{background:color-mix(in oklab,var(--char) 92%,transparent);
  border-bottom-color:var(--line);backdrop-filter:blur(7px)}
.navgroup{display:flex;align-items:center;gap:24px}
.navgroup.right{justify-self:end}
.mark{display:inline-flex;align-items:baseline;white-space:nowrap;user-select:none;
  font-family:var(--wordmark);font-style:normal;font-weight:700;text-transform:uppercase;
  letter-spacing:-.005em}
/* the sticky-header logo: BOH in Familjen Grotesk, tracked. The middle O is the
   mark — the hero's light travels up and lights it. */
.mark.mark--boh{font-family:var(--wordmark);font-style:normal;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase}
.mark.mark--boh .o{font-style:normal;position:relative;display:inline-block;
  transition:color .55s var(--ease),text-shadow .55s var(--ease)}
.mark.mark--boh.lit .o{color:var(--ember);
  text-shadow:0 0 5px color-mix(in oklab,var(--ember) 85%,transparent),
    0 0 15px color-mix(in oklab,var(--ember) 42%,transparent);
  animation:bohflick 5s ease-in-out infinite}
@keyframes bohflick{0%,100%{opacity:1}42%{opacity:.86}68%{opacity:1}}
.mark .dot{display:inline-block;border-radius:999px;
  width:.28em;height:.28em;margin-left:.12em;transform:translateY(-.02em);
  background:var(--ember);
  box-shadow:0 0 8px 2px color-mix(in oklab,var(--ember) 60%,transparent)}
.navlink,.btn{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.25em;
  text-transform:uppercase}
/* small screens: the text links crowd the centred logo — keep just the mark
   and the Contact action */
@media(max-width:720px){
  header .navgroup .navlink:not(.btn){display:none}
  header .navgroup{gap:0}
}

/* back to home — at the head of every inner page */
.back{display:inline-flex;align-items:center;gap:9px;margin-bottom:32px;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.25em;
  text-transform:uppercase;color:var(--muted);transition:color .4s var(--ease)}
.back i{font-style:normal;display:inline-block;color:var(--ember);
  transition:transform .4s var(--ease)}
.back:hover{color:var(--paper)}
.back:hover i{transform:translateX(-5px)}

/* links answer hover: a hairline draws in, then leaves the other way */
.link{position:relative;display:inline-block;padding-bottom:2px;transition:color .5s var(--ease)}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.link:hover::after,.link:focus-visible::after{transform:scaleX(1);transform-origin:left}
.link:hover,.link:focus-visible{color:var(--ember)}

/* buttons: the fill rises from the baseline */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  overflow:hidden;isolation:isolate;border:1px solid var(--ember);background:var(--ember);
  border-radius:var(--radius);
  color:var(--char);padding:.5rem .9rem;cursor:pointer;transition:color .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--char);
  transform:translateY(101%);transition:transform .55s var(--ease)}
.btn:hover{color:var(--ember)}
.btn:hover::before{transform:translateY(0)}
.btn.lg{padding:.7rem 1.2rem;font-size:12px}
/* one filled ember control per view — the page's own action. The bar's
   Contact is an outline so it stops competing on every screen. */
.btn-quiet{background:transparent;color:var(--ember)}
.btn-quiet::before{background:var(--ember)}
.btn-quiet:hover{color:var(--char)}

/* ---------- hero ---------- */
/* tall so the scroll-scrubbed push-in progresses gradually — more scroll
   distance per frame = a slower, more cinematic move to the front of house */
#hero{position:relative;height:280vh}
#stage{position:sticky;top:0;height:100vh;overflow:hidden}
#plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  will-change:transform,opacity;transform:scale(1.06);background:var(--char)}
/* the wordmark sits at the centre of the screen as it loads, present and
   large; scroll walks the light through and drops it to the foot of the frame.
   #herotext holds the centred rest position — the drop is a JS transform. */
#herotext{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:22px;text-align:center;pointer-events:none;will-change:transform,opacity}
.slot{overflow:hidden;padding-bottom:.12em;transition:opacity .45s ease-out}
/* held hidden while the preloader mark grows into place, then crossfaded in */
body.entering .slot{opacity:0}
#herotext h1{display:flex;align-items:baseline;justify-content:center;
  font-family:var(--wordmark);font-style:normal;font-weight:700;text-transform:uppercase;
  font-size:clamp(34px,5.2vw,76px);letter-spacing:-.005em;line-height:.98;
  text-shadow:0 1px 3px rgba(0,0,0,.55), 0 0 12px rgba(0,0,0,.4)}
/* flat amber, matched to the loading-screen mark — no gradient / 3D orb */
#herotext h1 .dot{display:inline-block;border-radius:999px;
  width:.3em;height:.3em;margin-left:.12em;transform:translateY(-.02em);
  background:var(--ember);
  box-shadow:0 0 24px 7px color-mix(in oklab,var(--ember) 55%,transparent)}
/* legibility comes from a tight glyph-hugging shadow only — no background,
   no box, nothing but the text */
#herotext p{max-width:34rem;font-size:14px;line-height:1.65;color:var(--paper);
  text-shadow:0 1px 2px rgba(0,0,0,.92), 0 0 4px rgba(0,0,0,.85), 0 0 9px rgba(0,0,0,.55)}
#cue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;
  flex-direction:column;align-items:center;gap:8px;pointer-events:none;transition:opacity .5s}
#cue span.t{font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:color-mix(in oklab,var(--paper) 60%,transparent)}
#cue span.l{display:block;width:1px;height:32px;transform-origin:top;
  background:color-mix(in oklab,var(--paper) 50%,transparent);animation:cue 4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(1);opacity:.5}50%{transform:scaleY(.35);opacity:1}}
/* Depth. The frame is one flat photograph, so the layers that give it air
   are drawn: a bloom on the bulb pulling back at its own rate, a vignette
   closing as the camera retreats, and a grain plate that never scales — so
   the picture has a surface the zoom moves behind. */
#bloom{position:absolute;width:62vmin;height:62vmin;pointer-events:none;
  mix-blend-mode:screen;will-change:transform,opacity;
  background:radial-gradient(circle closest-side,
    color-mix(in oklab,var(--ember) 34%,transparent) 0%,
    color-mix(in oklab,var(--ember) 13%,transparent) 30%,
    color-mix(in oklab,var(--ember) 4%,transparent) 55%, transparent 76%)}
#vignette{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 78% 68% at 50% 50%, transparent 42%, rgba(8,6,4,.62) 100%),
    linear-gradient(to bottom, rgba(8,6,4,.42) 0%, transparent 22%,
      transparent 62%, rgba(8,6,4,.72) 100%)}
#grain{position:absolute;inset:-50%;width:200%;height:200%;pointer-events:none;
  opacity:.32;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  background-size:220px 220px;animation:grain 900ms steps(3) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-4px,3px)}
  66%{transform:translate(3px,-4px)}100%{transform:translate(0,0)}}

/* the travelling light — formless and soft, not a solid disc. It peels off
   the bulb and rises to the O. Blur removes any hard edge. */
#hero-ember{position:fixed;left:0;top:0;border-radius:999px;z-index:40;
  pointer-events:none;opacity:0;will-change:transform,width,height,opacity;
  filter:blur(5px);
  background:radial-gradient(circle,
    color-mix(in oklab,var(--ember) 72%,#fff 14%) 0%,
    color-mix(in oklab,var(--ember) 40%,transparent) 38%,
    color-mix(in oklab,var(--ember) 12%,transparent) 68%, transparent 100%)}
/* a faint wake pointing back toward the bulb, only while it's in flight */
#hero-ember::after{content:"";position:absolute;top:50%;right:50%;
  height:34%;width:var(--trail,0px);transform-origin:right center;
  transform:translateY(-50%) rotate(var(--ang,180deg));border-radius:999px;
  background:linear-gradient(to left,
    color-mix(in oklab,var(--ember) 42%,transparent) 0%, transparent 92%)}

/* the kitchen is under-exposed until the preloader's light arrives. This
   char layer sits over the video at full opacity on load, then the light
   "develops" the room as it clears. After the intro it stays at 0 and the
   scroll douse is handled on #plate itself. */
#expose{position:absolute;inset:0;pointer-events:none;background:var(--char);
  opacity:1;will-change:opacity}

/* ---------- page shell ---------- */
main{position:relative;z-index:10}
/* THE SYSTEM — one grid, four type steps, one accent.
   The review found four section rules at four different lengths, one
   section on a different origin, six type sizes where the reference runs
   two, and ember six times in a single viewport. Same fault each time:
   rules applied per component instead of once. This is that centre. */
section{position:relative;padding:clamp(72px,9vw,112px) clamp(20px,5vw,48px)}
.wrap{max-width:1180px;margin:0 auto}

/* 1 display — the three statements, italic and nothing else is
   2 title   — section headings AND item titles, roman
   3 body    — running text
   4 label   — mono, tracked, uppercase */
.t-display{font-family:var(--display);font-style:italic;font-weight:400;line-height:1.1;
  letter-spacing:-.015em;text-wrap:balance}
.t-title{font-family:var(--display);font-style:normal;font-weight:400;
  font-size:clamp(25px,2.9vw,33px);line-height:1.15;letter-spacing:-.012em;text-wrap:balance}
.body{font-family:var(--sans);font-size:15px;line-height:1.7;color:var(--muted)}
.eyebrow,.small,.t-label{font-family:var(--mono);font-size:11px;letter-spacing:.25em;
  text-transform:uppercase}
.eyebrow{color:var(--ember)}
h2{font-size:clamp(25px,2.9vw,33px)}

/* the section eyebrow: numbered, and it sticks — orientation on a very
   tall page, and a second element travelling at a rate other than 1:1 */
/* the section label sits at the head of its section and scrolls away with it —
   it used to stick under the nav and cross over the body text. Orientation on
   a long page is the lower-left readout's job now. */
.boh-eyebrow{display:flex;align-items:baseline;gap:14px;
  margin-bottom:26px;color:var(--ember);pointer-events:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.25em;text-transform:uppercase}
.boh-eyebrow .n{font-variant-numeric:tabular-nums;opacity:.55}
.rule{height:1px;width:100%;background:color-mix(in oklab,var(--ember) 55%,transparent);
  transform:scaleX(0);transform-origin:left center;margin-bottom:28px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
@media(max-width:820px){.grid3,.grid2{grid-template-columns:1fr}}

/* cards answer hover: lift + an ember hairline across the top */
.card{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:12px;
  border:1px solid color-mix(in oklab,var(--ember) 12%,var(--line));
  border-radius:var(--radius);padding:26px;
  background-image:linear-gradient(180deg,
    color-mix(in oklab,var(--ember) 3.5%,transparent) 0%, transparent 62%);
  transition:transform .55s var(--ease),border-color .55s var(--ease),
    background-color .55s var(--ease),box-shadow .55s var(--ease)}
.card::before{content:"";position:absolute;left:0;top:0;height:1px;width:100%;background:var(--ember);
  border-radius:var(--radius) var(--radius) 0 0;
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.card:hover{transform:translateY(-4px);border-color:color-mix(in oklab,var(--ember) 55%,transparent);
  background-color:color-mix(in oklab,var(--ember) 4%,transparent);
  box-shadow:0 18px 40px -24px rgba(0,0,0,.9),
    0 0 0 1px color-mix(in oklab,var(--ember) 22%,transparent)}
.card:hover::before{transform:scaleX(1)}
.card h3{font-size:20px}

/* work entries: no box at all — a hairline above each, and room around it,
   the way a menu lists dishes. The ember rule draws across on hover. */
.item{position:relative;display:flex;flex-direction:column;gap:10px;
  padding:26px 0 30px;border-top:1px solid var(--line);
  transition:padding-left .55s var(--ease)}
.item::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;
  background:var(--ember);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease)}
.item:hover::before{transform:scaleX(1)}
.item:hover{padding-left:14px}
.item .t{transition:color .55s var(--ease);font-family:var(--display);
  font-style:normal;font-size:clamp(25px,2.9vw,33px);line-height:1.15}
.item:hover .t{color:var(--ember)}

/* pricing tiers: a filled Ash surface with no outline — the surface
   separates them, not line-work, so the recommended tier can simply be
   the heavier object */
.panel{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:12px;min-height:100%;
  border:0;border-radius:var(--radius);padding:30px;background:var(--ash);
  transition:transform .55s var(--ease),background-color .55s var(--ease),
    box-shadow .55s var(--ease)}
.panel:hover{transform:translateY(-4px);
  background-color:color-mix(in oklab,var(--ember) 7%,var(--ash));
  box-shadow:0 22px 46px -26px rgba(0,0,0,.95)}
.panel.lead{background:color-mix(in oklab,var(--ember) 13%,var(--ash))}
.panel.lead:hover{background:color-mix(in oklab,var(--ember) 17%,var(--ash))}
/* only the lead tier's price carries the accent — three ember prices in one
   view broke the "accent at most twice per screen" rule */
.tier .price{font-family:var(--mono);font-size:26px;color:var(--paper)}
.panel.lead .price{color:var(--ember)}
.tier ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.glance{margin:auto 0 0;padding-top:16px;border-top:1px solid color-mix(in oklab,var(--line) 70%,transparent);
  display:flex;flex-direction:column;gap:8px}
.glance div{display:flex;gap:12px}
.glance dt{flex:0 0 4.6em;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted)}
.glance dd{margin:0;font-size:13px;line-height:1.35;color:var(--paper)}
.tier li{font-size:13px;line-height:1.55;color:var(--muted)}

/* the closing bookend */
#closing{min-height:56vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:26px;text-align:center;padding-block:96px}
#closing h2{font-family:var(--wordmark);font-style:normal;font-weight:700;text-transform:uppercase;
  letter-spacing:-.005em;font-size:clamp(32px,4.6vw,68px);line-height:.98;display:flex;align-items:baseline}
#closing .dot{--lit:0;position:relative;display:inline-block;border-radius:999px;
  width:.24em;height:.24em;margin-left:.07em;transform:translateY(.05em);
  background:var(--ember);
  /* completely absent until the light arrives — no disc, no outline, no
     placeholder. The wordmark simply has no full stop until the ember
     brings one, which is what makes it the bookend to the opening. */
  opacity:var(--lit);
  box-shadow:0 0 calc(30px * var(--lit)) calc(10px * var(--lit))
    color-mix(in oklab,var(--ember) calc(65% * var(--lit)),transparent)}
/* the bloom — a light in a dark room, like the bulb we opened on */
#closing .dot::after{content:"";position:absolute;left:50%;top:50%;
  width:calc(560% * var(--lit));height:calc(560% * var(--lit));
  transform:translate(-50%,-50%);border-radius:999px;pointer-events:none;
  opacity:var(--lit);
  background:radial-gradient(circle closest-side,
    color-mix(in oklab,var(--ember) 42%,transparent) 0%,
    color-mix(in oklab,var(--ember) 12%,transparent) 45%, transparent 72%)}

footer{position:relative;z-index:10;border-top:1px solid var(--line);
  padding:40px clamp(20px,5vw,48px);display:flex;flex-wrap:wrap;gap:24px;
  align-items:center;justify-content:space-between}
footer .small{color:var(--muted)}

/* reveals — resting state is VISIBLE; JS opts in to the hidden state, so the
   page still reads if scripting is off */
.js .reveal-line{display:block;will-change:transform}
.js .reveal-mask{overflow:hidden;display:block}
.js .pending{opacity:0}

/* ---------- preloader ---------- */
#pre{position:fixed;inset:0;z-index:300;background:var(--char);display:flex;
  align-items:center;justify-content:center;flex-direction:column}
#preMark{position:relative;display:flex;align-items:baseline;
  font-family:var(--wordmark);font-style:normal;font-weight:700;text-transform:uppercase;
  letter-spacing:-.005em;font-size:clamp(24px,3.4vw,44px);line-height:1}
#preDim{color:color-mix(in oklab,var(--paper) 25%,transparent)}
#preLit{position:absolute;left:0;top:0;color:var(--paper);clip-path:inset(100% 0 0 0)}
/* em-based so it scales 1:1 with the mark when it grows into the hero title */
#preDot{width:.3em;height:.3em;border-radius:999px;background:var(--ember);margin-left:.12em;
  transform:scale(0);
  box-shadow:0 0 24px 7px color-mix(in oklab,var(--ember) 55%,transparent)}
#preBar{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
  width:min(280px,50vw);height:1px;background:color-mix(in oklab,var(--paper) 20%,transparent)}
#preBar i{display:block;height:100%;width:100%;background:color-mix(in oklab,var(--paper) 55%,transparent);
  transform:scaleX(0);transform-origin:left}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .js .pending{opacity:1}
  #plate{transform:none}
}

/* ---------- home-only extras ---------- */
.about-duo{display:grid;grid-template-columns:1fr;gap:32px;align-items:start}
@media(min-width:760px){.about-duo{grid-template-columns:auto 1fr;gap:clamp(32px,6vw,72px)}}
.about-duo img{width:min(220px,50vw);aspect-ratio:1;object-fit:cover;border-radius:var(--radius);
  filter:grayscale(70%) contrast(1.12) brightness(.72) sepia(12%);
  border:1px solid color-mix(in oklab,var(--ember) 20%,var(--line))}

/* ---------- contact page ---------- */
#view-contact .field{display:flex;flex-direction:column;gap:8px}
#view-contact label{font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted)}
#view-contact input,#view-contact select,#view-contact textarea{
  font:15px/1.5 var(--sans);color:var(--paper);background:color-mix(in oklab,var(--paper) 4%,transparent);
  border:1px solid var(--line);border-radius:var(--radius);padding:11px 13px;
  transition:border-color .3s var(--ease);width:100%;box-sizing:border-box}
#view-contact select{appearance:none}
#view-contact input:focus,#view-contact select:focus,#view-contact textarea:focus{
  outline:none;border-color:color-mix(in oklab,var(--ember) 55%,transparent)}
#view-contact textarea{resize:vertical;min-height:88px}
#view-contact .row2{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:640px){#view-contact .row2{grid-template-columns:1fr 1fr}}
#view-contact .formnote{font-size:13px;color:var(--muted);margin-top:4px}
#view-contact .formnote.err{color:color-mix(in oklab,var(--oxblood) 65%,var(--paper) 35%)}
#view-contact #contactDone{display:flex;flex-direction:column;gap:10px}

/* ---- Sisters case study — Perky Bros treatment: 2 media sizes only
       (full-bleed band / half pair), natural aspect, big vertical rhythm,
       captions only where they carry a fact ---- */
#view-sisters > main{min-height:calc(100svh - 172px);overflow-x:hidden}
#view-sisters section{padding-block:clamp(38px,6vw,68px)}

/* prose — bigger, editorial */
#view-sisters .prose{max-width:34rem;display:flex;flex-direction:column;gap:20px}
#view-sisters .prose p{margin:0;font-family:var(--sans);font-size:17px;line-height:1.72;color:var(--muted)}
#view-sisters .prose.lead p{font-size:clamp(19px,2.3vw,24px);line-height:1.5;color:var(--paper)}
#view-sisters .cs-foot{margin-top:28px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  line-height:1.6;opacity:.5;max-width:34rem}

/* the fact card */
#view-sisters .cs-card{margin:32px 0 0;max-width:660px;
  border-top:1px solid color-mix(in oklab,var(--paper) 14%,transparent)}
#view-sisters .cs-card > div{display:grid;grid-template-columns:1fr;gap:2px;padding:13px 0;
  border-bottom:1px solid color-mix(in oklab,var(--paper) 9%,transparent)}
#view-sisters .cs-card dt{font-family:var(--mono);font-size:11px;letter-spacing:.25em;
  text-transform:uppercase;color:var(--muted)}
#view-sisters .cs-card dd{margin:0;font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--paper)}
@media(min-width:620px){#view-sisters .cs-card > div{grid-template-columns:132px 1fr;gap:20px;align-items:baseline}}

/* media band — breaks out of the text column, near full width */
#view-sisters .band{width:min(1500px,94vw);margin:clamp(64px,13vh,148px) auto;
  padding-inline:clamp(10px,2vw,28px)}
#view-sisters .band:first-of-type{margin-top:clamp(28px,6vh,64px)}
#view-sisters .band.narrow{width:min(760px,92vw)}
#view-sisters .band img,#view-sisters .band video{display:block;width:100%;height:auto;border-radius:2px}
#view-sisters .band.pair{display:grid;grid-template-columns:1fr;gap:clamp(10px,1.6vw,20px)}
@media(min-width:760px){#view-sisters .band.pair{grid-template-columns:1fr 1fr;align-items:start}}
#view-sisters .cap{margin-top:13px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  line-height:1.6;color:color-mix(in oklab,var(--paper) 82%,transparent);max-width:44rem}
#view-sisters .band.pair .cap{grid-column:1/-1}

/* hero: the fact card beside a faint outline of the crest, so a wide
   screen doesn't leave the right half empty */
#view-sisters .hero-duo{display:grid;grid-template-columns:1fr;align-items:center}
@media(min-width:900px){#view-sisters .hero-duo{grid-template-columns:1fr auto;gap:clamp(24px,5vw,72px)}}
#view-sisters .ghost-mark{display:none;width:min(230px,32vw);opacity:.16}
@media(min-width:900px){#view-sisters .ghost-mark{display:block}}

/* text beside a poster image — lives inside the normal .wrap so its left
   edge lines up with every other text block. Centred against the media
   since both are short: a lead paragraph beside one tall image. */
#view-sisters .textpair{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:760px){#view-sisters .textpair{grid-template-columns:1.3fr 1fr;
  align-items:center;gap:clamp(28px,5vw,64px)}}
#view-sisters .textpair .prose{max-width:30rem}
#view-sisters .textpair > img{width:min(320px,80vw);border-radius:2px;justify-self:center}
@media(min-width:760px){#view-sisters .textpair > img{justify-self:end}}

/* editorial grid — a real 12-column track, for long-form text beside a
   media block. The text's own column is exactly as wide as its reading
   measure, and the media sits in its own column right next to it, so
   there's no leftover gap between where the text stops and the media
   starts. Media keeps its own natural height and simply sits at the top
   of the row — it never stretches to match a long paragraph. */
#view-sisters .egrid{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:860px){#view-sisters .egrid{grid-template-columns:7fr 1fr 4fr;
  align-items:start;column-gap:0;row-gap:0}}
#view-sisters .egrid .prose{max-width:40rem}
@media(min-width:860px){#view-sisters .egrid > *:last-child{grid-column:3}}
#view-sisters .media-duo{display:flex;gap:10px}
#view-sisters .media-duo img{width:50%;border-radius:2px}
#view-sisters .media-stack .sys-duo{width:100%}

/* system duo — wordmark stacked on the palette, same width and height,
   a gap between. Bigger this way: each gets the full column instead of
   sharing it side by side, so together they fill the space beside the
   text instead of sitting small in the top corner. */
#view-sisters .sys-duo{display:grid;grid-template-columns:1fr;gap:22px}
#view-sisters .sys-duo img{border-radius:2px;width:100%;aspect-ratio:1600/900;object-fit:cover}
#view-sisters .palette{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;
  aspect-ratio:1600/900;border-radius:2px;overflow:hidden}
#view-sisters .palette i{display:block}

/* the positioning beat: a tall section whose type holds still while the
   reading light walks it — trimmed so the sentence finishes as the section
   does, no held-still dead stretch */
@media(min-width:768px){
  #positioning{min-height:180vh!important;align-items:flex-start!important}
  #positioning .wrap{position:sticky;top:0;height:100vh;display:flex;align-items:center}
}

/* the pin — declared here so it sits next to the JS that reads it */
.pinwrap{position:relative}
@media(min-width:821px){
  /* padding, not a percentage height: the parent is auto-height, so a
     percentage would resolve to auto and leave sticky nowhere to travel */
  .pinwrap{padding-bottom:44vh}
  .pinner{position:sticky;top:120px}
}

/* inner views: keep the footer at the foot of the screen when the page's
   content is short, so there's no black void under it */
#view-work > main, #view-process > main,
#view-pricing > main, #view-contact > main{
  min-height:calc(100svh - 172px)}

/* ============================================================
   motion layer — the oryzo-grade landing + navigation:
   a scene that is "acquired" then handed over, momentum scrolling,
   and labels that decode into place instead of just fading.
   ============================================================ */

/* ---------- preloader: a light coming up ---------- */
/* the orb is the kitchen's bulb, arriving early. It sits where the bulb
   will be, brightens with the countdown, then floods to expose the room. */
#preGlow{position:absolute;left:50%;top:50%;width:120vmax;height:120vmax;
  transform:translate(-50%,-50%) scale(.12);pointer-events:none;opacity:.5;
  will-change:transform,opacity;
  background:radial-gradient(circle closest-side,
    color-mix(in oklab,var(--ember) 60%,transparent) 0%,
    color-mix(in oklab,var(--ember) 22%,transparent) 22%,
    color-mix(in oklab,var(--ember) 6%,transparent) 42%, transparent 68%)}

/* ---------- decode: mono labels resolve from noise ---------- */
.decode{font-variant-numeric:tabular-nums}
.navlink .lbl{display:inline-block}

/* ---------- persistent instrument readout, lower-left ---------- */
#hud{position:fixed;left:clamp(16px,4vw,48px);bottom:20px;z-index:90;
  display:flex;gap:12px;align-items:baseline;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.3em;text-transform:uppercase;pointer-events:none;
  color:color-mix(in oklab,var(--paper) 46%,transparent);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
#hud .ix{color:color-mix(in oklab,var(--ember) 82%,var(--paper));font-variant-numeric:tabular-nums}
body.locked #hud{opacity:0;transform:translateY(6px)}
@media(max-width:640px){#hud{display:none}}

/* ---------- Lenis ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- /start — Prep Brief (enquiry + discovery intake) ---------- */
#view-start .choice-grid{display:flex;flex-direction:column;gap:14px;margin-top:8px}
#view-start .choice-card{background:color-mix(in oklab,var(--paper) 4%,transparent);
  border:1px solid var(--line);border-radius:var(--radius);padding:22px;text-align:left;
  cursor:pointer;color:var(--paper);font:inherit;width:100%;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
#view-start .choice-card:hover,#view-start .choice-card:focus-visible{
  border-color:color-mix(in oklab,var(--ember) 55%,transparent);transform:translateX(2px)}
#view-start .choice-card:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
#view-start .choice-card h2{font-family:var(--display);font-style:italic;font-weight:400;
  font-size:21px;margin:0 0 6px}
#view-start .choice-card p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5}
#view-start .choice-card .arrow{color:var(--ember);font-family:var(--mono)}

#view-start .skip-email{margin-top:28px;font-size:13px;color:var(--muted);line-height:1.6}
#view-start .skip-email a{color:var(--ember)}

#view-start .tier-grid{display:flex;flex-direction:column;gap:12px;margin-top:8px}
#view-start .tier-card{background:color-mix(in oklab,var(--paper) 4%,transparent);
  border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;text-align:left;
  cursor:pointer;color:var(--paper);font:inherit;display:flex;justify-content:space-between;
  align-items:center;gap:16px;width:100%;transition:border-color .3s var(--ease)}
#view-start .tier-card:hover,#view-start .tier-card:focus-visible{
  border-color:color-mix(in oklab,var(--ember) 55%,transparent)}
#view-start .tier-card:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
#view-start .tier-name{font-family:var(--display);font-style:italic;font-size:18px}
#view-start .tier-scope{font-size:12.5px;color:var(--muted);margin-top:4px;max-width:32ch}
#view-start .tier-price{font-family:var(--mono);font-size:15px;color:var(--ember);white-space:nowrap}

#view-start .pb-progress{display:flex;align-items:center;gap:14px;margin-bottom:34px}
#view-start .pb-track{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
#view-start .pb-fill{height:100%;background:var(--ember);transition:width .32s var(--ease)}
#view-start .pb-count{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}

#view-start .field{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
#view-start label{font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted)}
#view-start input,#view-start textarea{font:15px/1.5 var(--sans);color:var(--paper);
  background:color-mix(in oklab,var(--paper) 4%,transparent);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 14px;transition:border-color .3s var(--ease);
  width:100%;box-sizing:border-box}
#view-start textarea{resize:vertical;min-height:110px}
#view-start input:focus,#view-start textarea:focus{outline:none;
  border-color:color-mix(in oklab,var(--ember) 55%,transparent)}

#view-start .pill-group{display:flex;flex-wrap:wrap;gap:10px}
#view-start .pill{background:color-mix(in oklab,var(--paper) 4%,transparent);
  border:1px solid var(--line);border-radius:100px;color:var(--paper);font:14.5px var(--sans);
  padding:11px 18px;cursor:pointer;transition:all .25s var(--ease)}
#view-start .pill:hover{border-color:color-mix(in oklab,var(--ember) 55%,transparent)}
#view-start .pill:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
#view-start .pill.active{background:color-mix(in oklab,var(--ember) 14%,transparent);
  border-color:var(--ember);color:var(--ember)}

#view-start .req-warn{font-size:12.5px;color:color-mix(in oklab,var(--oxblood) 65%,var(--paper) 35%);
  margin-top:8px;font-style:italic}
#view-start .optional-tag{font-family:var(--mono);font-size:10px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em}

#view-start .pb-nav-row{display:flex;justify-content:space-between;align-items:center;
  margin-top:40px;gap:16px}

#view-start .review-module{margin-bottom:28px}
#view-start .review-module-head{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:14px}
#view-start .review-module-head span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
#view-start .edit-link{background:none;border:none;color:var(--ember);font-family:var(--mono);
  font-size:11px;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;padding:0}
#view-start .review-item{margin-bottom:14px}
#view-start .review-q{font-size:12.5px;color:var(--muted);margin-bottom:3px}
#view-start .review-a{font-size:15px;color:var(--paper);white-space:pre-wrap;line-height:1.5}
#view-start .review-a.empty{color:var(--muted);font-style:italic}

#view-start .pb-actions{display:flex;flex-direction:column;gap:10px;margin-top:20px;align-items:flex-start}
#view-start .pb-error{font-size:13px;color:color-mix(in oklab,var(--oxblood) 65%,var(--paper) 35%);
  margin-top:14px;line-height:1.6}
#view-start .pb-fine{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:22px}

#view-start .pb-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);
  background:var(--ember);color:var(--char);font-family:var(--mono);font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;padding:12px 22px;border-radius:var(--radius);
  opacity:0;pointer-events:none;transition:all .28s var(--ease);z-index:10}
#view-start .pb-toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}

#view-start .pb-done-mark{font-family:var(--display);font-style:italic;font-size:44px;
  color:var(--ember);margin-bottom:6px}

@media(prefers-reduced-motion:reduce){
  #view-start [class*="pb-"],#view-start .choice-card,#view-start .tier-card{transition:none}
}