/* Skep — site stylesheet, v2.
   Two rules define the look (build spec v2 §1):
   1. No boxes. Structure comes from hairlines, alignment and whitespace only.
   2. One structural rule everywhere: a 220px index gutter, 72px gap, content right.
   Every colour and size below traces to §2/§3 of that spec. */

:root{
  /* colour — v2 §3 */
  --wax:#FAF5E9;
  --tint:#F4EDDA;
  --ink:#241D0E;
  --prose:#4A4331;
  --prose-2:#5A5138;
  --label:#8A7C5C;
  --marker:#B0A283;
  --rule:#E2D8C0;
  --honey:#C77E10;

  /* type — v2 §2 */
  --disp:'Schibsted Grotesk',system-ui,sans-serif;
  --serif:'Source Serif 4',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  /* layout — v2 §7 */
  --max:1360px;
  --pad:56px;
  --gutter:220px;
  --gap:72px;
  --sec-y:104px;
  /* section padding on deck pages only — buys scroll dwell, see "Dwell" below */
  --deck-y:152px;
  --header-h:75px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* clip, not hidden: keeps side-entrance animations from causing a horizontal
   scrollbar without creating a scroll container (which would break sticky) */
html,body{overflow-x:clip}

body{
  margin:0;
  background:var(--wax);
  font:400 18px/1.75 var(--serif);
  color:var(--prose);
  -webkit-font-smoothing:antialiased;
}

a{color:var(--honey)}
a:hover{color:var(--ink)}

*:focus-visible{outline:2px solid var(--honey);outline-offset:3px}

svg{display:block}

/* ---------- structure ---------- */

.inner{
  max-width:var(--max);
  margin:0 auto;
  padding:var(--sec-y) var(--pad);
  display:grid;
  grid-template-columns:var(--gutter) 1fr;
  gap:var(--gap);
  align-items:start;
}

/* Sections are opaque and sit above the hero so they scroll over it. */
.sec{border-top:1px solid var(--rule);background:var(--wax);position:relative;z-index:1}
.sec--tint{background:var(--tint)}
.sec--plain > .inner{display:block}

/* the numbered index label in the left gutter */
.idx{
  font:400 10.5px var(--mono);
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--label);
  padding-top:.55em;
}

.col{min-width:0}

.skip{
  position:absolute;left:-9999px;top:0;
  font:500 10.5px var(--mono);letter-spacing:.17em;text-transform:uppercase;
  background:var(--wax);color:var(--ink);padding:10px 14px;z-index:40;
  border-bottom:1px solid var(--rule);
}
.skip:focus{left:var(--pad);top:0}

/* ---------- header ---------- */

.masthead{
  position:sticky;top:0;z-index:20;
  background:var(--wax);
  border-bottom:1px solid var(--rule);
}
.masthead__inner{
  max-width:var(--max);margin:0 auto;
  padding:22px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:32px;
}
.masthead__left{display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.brand__word{
  font:600 17px var(--disp);
  letter-spacing:.26em;
  color:var(--ink);
}
/* The honey rule is a divider between wordmark and slogan, not a left margin on
   both — the same lockup used to sign off a quote. It is a rule, not accent text,
   so it does not spend the one-accent-word-per-headline budget. */
.slogan{
  font:600 15px/1 var(--disp);
  letter-spacing:-.01em;
  color:var(--ink);
  padding-left:20px;
  border-left:2px solid var(--honey);
  white-space:nowrap;
}
.nav{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.nav__link{
  font:500 14px/1 var(--disp);
  color:var(--prose-2);
  text-decoration:none;
  transition:color .18s ease;
}
.nav__link:hover{color:var(--ink)}
.nav__link[aria-current="page"]{color:var(--ink)}

.nav__cta{
  display:flex;align-items:center;gap:12px;
  font:500 11px var(--mono);
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  transition:color .18s ease;
}
.nav__cta::before{content:"";width:26px;height:1px;background:var(--honey);flex:none}
.nav__cta:hover{color:var(--honey)}

/* ---------- type ---------- */

.h1{
  margin:0;
  font:600 78px/1.03 var(--disp);
  letter-spacing:-.035em;
  color:var(--ink);
  max-width:1040px;
  text-wrap:balance;
}
.h1--page{font-size:48px;line-height:1.06;letter-spacing:-.03em;max-width:920px}

.h2{
  margin:0;
  font:600 38px/1.12 var(--disp);
  letter-spacing:-.026em;
  color:var(--ink);
  max-width:920px;
  text-wrap:pretty;
}
.h2--contact{font-size:48px;line-height:1.05;letter-spacing:-.03em}

.accent{color:var(--honey)}

.standfirst{
  margin:0;
  font:400 22px/1.6 var(--serif);
  color:var(--prose-2);
  max-width:780px;
  text-wrap:pretty;
}
.standfirst--sm{font-size:20px;line-height:1.6}

.prose p{
  margin:0 0 20px;
  font:400 18px/1.75 var(--serif);
  color:var(--prose);
  max-width:790px;
  text-wrap:pretty;
}
.prose p:last-child{margin-bottom:0}
.prose h3{
  margin:38px 0 12px;
  font:600 23px/1.2 var(--disp);
  letter-spacing:-.02em;
  color:var(--ink);
}
.prose a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose ul{margin:0 0 20px;padding:0;list-style:none;max-width:790px}
.prose li{
  padding:12px 0;
  border-bottom:1px solid var(--rule);
  font:400 18px/1.75 var(--serif);
  color:var(--prose);
}
.prose li:first-child{border-top:1px solid var(--rule)}

.rule{border:0;border-top:1px solid var(--rule);margin:40px 0 0;height:0}
.rule--tight{margin-top:28px}

/* unresolved facts — v2 §5.7, marker colour, no chrome */
.confirm{
  font:400 10.5px var(--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--marker);
  white-space:nowrap;
}

/* ---------- first section of a page ----------
   Drops the top rule (the header already provides one) and opens with more air.
   Keeps the index-gutter grid intact — every section on every page uses it. */

.sec--first{border-top:0}
.sec--first > .inner{padding-top:124px}

/* ---------- home hero ----------
   Centred in the first screenful rather than sitting near the top.
   The rule under the h1 is a direct child of the section, not of .inner, so it
   runs the full width of the viewport like every other rule on the site. */

/* The hero pins below the header and the next section rises over it.
   Note: v2 §7 bans scroll effects — requested directly, recorded in BUILD-NOTES. */
.hero{
  border-top:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:72px 0;
  min-height:max(560px, calc(100vh - var(--header-h)));
  min-height:max(560px, calc(100svh - var(--header-h)));
  position:sticky;
  top:var(--header-h);
  z-index:0;
}
/* Hero containers deliberately do NOT use .inner, so the section grid can never
   reach them and no specificity contest exists. Identical width, margin and
   padding on both containers pins the standfirst's left edge to the h1's left
   edge by construction. */
.hero__top,.hero__bottom{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
}
.hero__top{padding-bottom:36px}
.hero__rule{border-top:1px solid var(--rule)}
.hero__bottom{padding-top:24px}

/* ---------- deck scroll ----------
   On deck pages (bodyClass deck-page: home, process, work, about) every
   section pins below the header and the next one rises over it. The .deck
   class is added by the small script (partials/deck.njk) at the end of each
   deck page, which also sets each section's sticky top: min(header,
   viewport − height), so sections taller than the viewport scroll fully into
   view before pinning instead of having their lower content cut off.
   No script → normal scrolling. */

.deck main > .sec{position:sticky;top:var(--header-h)}

/* Dwell — pacing of the handover. Morgan, 2026-08-24.
   A pinned section is covered the moment the next one's top climbs to the same
   line, so a section's dwell equals its own height: the short sections were
   handing over almost as soon as they arrived. Two changes, both whitespace:

   1. Extra vertical air on every deck section (--deck-y in place of --sec-y),
      which lengthens the scroll each one holds for.
   2. A floor of one screenful, so no section can be covered in less than a
      full screen of scroll however little content it carries.

   The air is weighted towards the bottom. For sections taller than the
   viewport the script bottom-aligns them (top: viewport − height), so trailing
   space keeps the content itself in view rather than pinned above the header.
   Both are scoped to deck pages: FAQ, privacy and terms keep the spec's
   104px rhythm exactly.

   .sec--first keeps its own opening padding (124/88/68px): this selector
   outranks `.sec--first > .inner` on specificity, so it must exclude it
   explicitly or it silently kills the opening air on every sub-page. */
.deck-page main > .sec:not(.sec--first) > .inner{padding-top:var(--deck-y)}
.deck-page main > .sec > .inner{padding-bottom:calc(var(--deck-y) + 40px)}
.deck main > .sec{min-height:calc(100svh - var(--header-h))}

/* The last section (the contact block) has nothing following it to rise over it,
   so it needs neither the trailing air nor the dwell floor — both just opened a
   gap above the footer. :last-of-type, not :last-child: the deck script is the
   real last child of <main> on deck pages. Morgan, 2026-08-24. */
.deck-page main > .sec:last-of-type > .inner{padding-bottom:var(--sec-y)}
.deck main > .sec:last-of-type{min-height:0}

/* Content slides in from alternating sides as each section enters view.
   Pure CSS scroll-driven animation; browsers without support show the page
   static, which is the correct fallback. The hero has no .inner, so it is
   excluded automatically — it is visible on load and gets no entrance. */

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .deck-page main > .sec > .inner{
      animation:sec-in-r both;
      animation-timeline:view();
      /* Absolute offsets, not percentages. A percentage of `entry` is a
         percentage of the subject's own height once the subject is taller than
         the viewport, so a tall section's fade finished later and later as the
         section grew — and a pinned section stops moving, which freezes its view
         progress wherever it had reached. Governance (the tallest section) froze
         part-faded and stayed there once --deck-y was added. 320px of scroll is
         height-independent and always completes long before anything pins.
         Morgan, 2026-08-24. */
      animation-range:entry 0px entry 320px;
    }
    .deck-page main > .sec:nth-of-type(even) > .inner{animation-name:sec-in-l}
  }
}
@keyframes sec-in-l{from{opacity:0;transform:translateX(-56px)}to{opacity:1;transform:none}}
@keyframes sec-in-r{from{opacity:0;transform:translateX(56px)}to{opacity:1;transform:none}}

/* ---------- the problem: three columns, roman numerals ---------- */

/* small in-content label, same format as .idx — carries the hairline so it sits under the rule */
.sublabel{
  font:400 10.5px var(--mono);
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--label);
  margin-top:40px;
  padding-top:36px;
  border-top:1px solid var(--rule);
}
.sublabel + .threes{margin-top:18px;padding-top:0;border-top:none}

.threes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:60px;
  margin-top:40px;
  padding-top:36px;
  border-top:1px solid var(--rule);
}
.three__num{
  font:600 19px var(--disp);
  letter-spacing:-.01em;
  color:var(--honey);
  margin-bottom:14px;
}
.three__lead{
  font:600 19px/1.25 var(--disp);
  letter-spacing:-.02em;
  color:var(--ink);
  margin-bottom:10px;
}
.three p{margin:0;font:400 16px/1.7 var(--serif);color:var(--prose-2)}

/* ---------- ruled rows: what we build, work ---------- */

/* ---------- work page: one measure ----------
   The /work/ entry was reading as four different column widths stacked on top of
   each other: the standfirst above it ran 780px, the 300px sector column squeezed
   the entry prose to ~584px, the emphasis line to ~556px, and the "what changed"
   pairs — a two-column grid designed for the ~948px governance column — down to
   ~262px each.

   rows--stack drops the sector out of its own column and sets it above the entry
   as a mono eyebrow, which is the same label language as .idx and .sublabel. Every
   text block below it then shares the standfirst's 780px measure, so the whole
   page reads as one column of type.

   The emphasis line is capped 28px short (780 − 26px padding − 2px rule) so its
   right edge lands on the same line as everything else while the honey rule hangs
   in the margin. Morgan, 2026-08-24. */
.rows--stack .row{grid-template-columns:1fr;gap:16px}
.rows--stack .pairs{grid-template-columns:1fr;gap:34px}
.rows--stack .prose p,
.rows--stack .prose ul,
.rows--stack .pair p{max-width:780px}
.rows--stack .emphasis p{max-width:752px}

.rows{margin-top:40px}
.row{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:var(--gap);
  padding:30px 0;
  border-top:1px solid var(--rule);
  align-items:start;
}
.row:first-child{border-top:0;padding-top:0}
.row:last-child{padding-bottom:0}
.row__name{
  font:600 23px/1.2 var(--disp);
  letter-spacing:-.02em;
  color:var(--ink);
}
.row p{margin:0;font:400 18px/1.75 var(--serif);color:var(--prose);max-width:680px;text-wrap:pretty}
.row p + p{margin-top:16px}

/* work rows: mono sector over region, marker beneath */
.row__sector{
  font:400 10.5px/1.9 var(--mono);
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--label);
}
.row__sector .confirm{display:block;margin-top:10px;white-space:normal}

/* ---------- emphasis line (replaces the v1 callout block) ---------- */

.emphasis{
  margin-top:44px;
  border-left:2px solid var(--honey);
  padding-left:26px;
}
.emphasis p{
  margin:0;
  font:400 21px/1.55 var(--serif);
  color:var(--ink);
  max-width:720px;
  text-wrap:pretty;
}
.emphasis p + p{margin-top:10px}

/* ---------- governance 2x2 text grid — no cells, no borders ---------- */

.pairs{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:44px 60px;
  margin-top:40px;
  padding-top:36px;
  border-top:1px solid var(--rule);
}
.pair__lead{
  font:600 19px/1.25 var(--disp);
  letter-spacing:-.02em;
  color:var(--ink);
  margin-bottom:10px;
}
.pair p{margin:0;font:400 16px/1.7 var(--serif);color:var(--prose-2);max-width:520px}

/* ---------- process: four columns, honey top rules ---------- */

.stages{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:36px;
  margin-top:44px;
}
.stage{border-top:2px solid var(--honey);padding-top:20px}
.stage__label{
  font:500 10.5px var(--mono);
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--label);
  margin-bottom:14px;
}
.stage__name{
  font:600 22px/1.2 var(--disp);
  letter-spacing:-.02em;
  color:var(--ink);
  margin-bottom:12px;
}
.stage p{margin:0;font:400 16px/1.7 var(--serif);color:var(--prose-2)}
.stage p + p{margin-top:14px}

/* stacked variant for the full /process/ page */
.stages--stacked{grid-template-columns:1fr;gap:0}
.stages--stacked .stage{padding:26px 0 34px;border-top:2px solid var(--honey);margin-top:26px}
.stages--stacked .stage:first-child{margin-top:0}
.stages--stacked .stage p{max-width:790px;font-size:18px;line-height:1.75;color:var(--prose)}

/* ---------- expandables — hairlines only ---------- */

.faqs{margin-top:40px;border-top:1px solid var(--rule)}
.faq{border-bottom:1px solid var(--rule)}
.faq > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;gap:20px;
  padding:22px 0;
}
.faq > summary::-webkit-details-marker{display:none}
.faq__q{
  flex:1;
  font:600 19px/1.3 var(--disp);
  letter-spacing:-.02em;
  color:var(--ink);
}
.faq--mono .faq__q{
  font:500 10.5px/1.9 var(--mono);
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ink);
}

/* Process page only (faq--mono is used on those four stage expandables and
   nowhere else). The label read "What you see and sign off" on all four stages,
   which is repetition rather than information after the first one, so the plus
   carries it alone. Morgan, 2026-08-24.

   The text stays in the DOM rather than being deleted: the plus is aria-hidden,
   so a summary containing only the plus would have no accessible name and a
   screen reader would announce four unlabelled toggles. This hides it from view
   while leaving it available to assistive technology — do not replace this with
   display:none, which would hide it from both. */
.faq--mono > summary{position:relative;justify-content:flex-end}
.faq--mono > summary .faq__q{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.plus{flex:none;width:13px;height:13px;position:relative;margin-top:6px;transition:transform .3s ease}
.plus::before,.plus::after{content:"";position:absolute;background:var(--honey)}
.plus::before{left:0;top:6px;width:13px;height:1px}
.plus::after{left:6px;top:0;width:1px;height:13px}
.faq[open] .plus{transform:rotate(45deg)}
.faq__a{padding:0 0 24px;max-width:790px}
.faq__a p{margin:0 0 14px;font:400 18px/1.75 var(--serif);color:var(--prose-2)}
.faq__a p:last-child{margin-bottom:0}

/* ---------- mono link ---------- */

.monolink{
  display:inline-flex;align-items:center;gap:12px;
  margin-top:36px;
  font:500 10.5px var(--mono);
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
}
.monolink:hover{color:var(--honey)}
.monolink span{color:var(--honey)}

/* ---------- contact ---------- */

.cta{
  display:flex;align-items:center;gap:24px;
  max-width:920px;
  margin-top:40px;
  padding:16px 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  font:500 13px var(--mono);
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
}
.cta:hover{color:var(--honey)}
.cta__rule{flex:1;height:1px;background:var(--honey)}
.cta__label{flex:none}
.cta__arrow{flex:none;color:var(--honey);font-size:16px}

.metastack{
  margin-top:30px;
  font:400 10.5px/2.1 var(--mono);
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--label);
}

/* ---------- footer ---------- */

.foot{border-top:1px solid var(--rule);background:var(--wax);position:relative;z-index:1}
.foot__inner{
  max-width:var(--max);margin:0 auto;
  padding:30px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.foot__brand{display:flex;align-items:center;gap:12px}
.foot__word{font:600 12px var(--disp);letter-spacing:.26em;color:var(--ink)}
.foot__right{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  font:400 10.5px var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--label);
}
.foot__right a{color:var(--label);text-decoration:none}
.foot__right a:hover{color:var(--honey)}
.foot__legal{
  max-width:var(--max);margin:0 auto;
  padding:0 var(--pad) 30px;
  font:400 10.5px/2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--marker);
}

/* ---------- 404 ---------- */

.gone > .inner{padding-top:160px;padding-bottom:160px;display:block}

/* ---------- responsive — v2 §7 ---------- */

@media (max-width:1200px){
  .stages{grid-template-columns:repeat(2,1fr);gap:36px 40px}
}

@media (max-width:1000px){
  :root{--pad:36px;--gap:0px;--sec-y:76px;--deck-y:112px}
  .inner{grid-template-columns:1fr;gap:0}
  .sec--first > .inner{padding-top:88px}
  .idx{padding-top:0;margin-bottom:22px}
  .threes,.pairs{grid-template-columns:1fr;gap:34px}
  .row{grid-template-columns:1fr;gap:14px}
  .h1{font-size:56px}
  .h1--page,.h2--contact{font-size:38px}
  /* Between 640 and 1000 the masthead is still one row and the nav plus CTA needs
     all of it. The slogan comes back below 640, where the masthead stacks and the
     brand row has the width to itself. */
  .slogan{display:none}
}

@media (max-width:640px){
  /* the header stacks below 640, so the hero's viewport calculation changes with it */
  :root{--pad:24px;--sec-y:60px;--deck-y:84px;--header-h:104px}
  .h1{font-size:44px;letter-spacing:-.03em}
  .h1--page,.h2--contact{font-size:32px;letter-spacing:-.026em}
  .h2{font-size:29px;letter-spacing:-.022em}
  .hero{padding:56px 0;min-height:max(460px, calc(100svh - var(--header-h)))}
  .hero__top{padding-bottom:26px}
  .hero__bottom{padding-top:18px}
  .sec--first > .inner{padding-top:68px}
  .stages{grid-template-columns:1fr;gap:0}
  .stages .stage{margin-top:26px}
  .stages .stage:first-child{margin-top:0}
  .standfirst{font-size:19px}
  .masthead__inner{flex-direction:column;align-items:flex-start;gap:16px;padding:18px var(--pad)}
  .masthead__left{gap:14px}
  .slogan{display:block;font-size:13px;padding-left:14px}
  .nav{gap:20px}
  .cta{gap:14px;font-size:11px}
  .foot__inner{flex-direction:column;align-items:flex-start;gap:18px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  /* everything scrolls normally rather than pinning and overlapping */
  .hero{position:static}
  /* nothing pins, so the one-screenful dwell floor would just be dead space */
  .deck main > .sec{position:static;min-height:0}
}