/* ---------- 1. FONTS ---------------------------------------------
   Newsreader (text and display cuts) and IBM Plex Mono, both SIL
   Open Font Licence, subset to the characters this site uses and
   embedded so the page never depends on a font CDN.
   ----------------------------------------------------------------- */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 420;font-display:swap;src:url(/assets/fonts/newsreader-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:200 420;font-display:swap;src:url(/assets/fonts/newsreader-italic.woff2) format("woff2")}
@font-face{font-family:"Newsreader Display";font-style:normal;font-weight:200;font-display:swap;src:url(/assets/fonts/newsreader-display-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader Display";font-style:italic;font-weight:200;font-display:swap;src:url(/assets/fonts/newsreader-display-italic.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-normal.woff2) format("woff2")}

/* ---------- 2. TOKENS -------------------------------------------- */
:root{
  --paper:#ffffff;
  --cream:#f8f6f1;
  --ink:#3a3a3a;
  --ink-deep:#2a2a2a;
  --ink-muted:#636363;        /* 6:1 on white. Labels and secondary text */
  --ink-recede:#7c7c7c;       /* large display type only */
  --rule:rgba(58,58,58,.16);
  --gold:#b8964a;             /* shapes and fills */
  --gold-text:#856a2a;        /* gold for text: 5:1 on white */
  --gold-light:#d4ae6a;       /* gold on charcoal */

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --display:"Newsreader Display","Newsreader",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-hero:clamp(2rem,6vw,4.75rem);
  --t-title:clamp(2.25rem,6vw,4.5rem);
  --t-statement:clamp(1.5rem,3.3vw,2.6rem);
  --t-h2:clamp(1.35rem,2.4vw,1.9rem);
  --t-lede:clamp(1.1875rem,1.7vw,1.4375rem);
  --t-body:clamp(1.0625rem,1.15vw,1.1875rem);
  --t-label:.75rem;

  --gutter:clamp(1.375rem,6vw,7.5rem);
  --measure:35rem;
  --space:clamp(4rem,9vw,8.5rem);
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- BASE ------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:var(--t-body);font-weight:340;
  line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-weight:200;line-height:1.08;letter-spacing:-.022em;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold-text);outline-offset:4px}
h1:focus{outline:none}
.skip{position:absolute;left:-9999px;background:var(--ink-deep);color:#fff;padding:.8rem 1.25rem;z-index:10;font-family:var(--mono);font-size:var(--t-label)}
.skip:focus{left:.5rem;top:.5rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:78rem;margin-inline:auto;padding-inline:var(--gutter)}
.prose p{max-width:var(--measure)}
.prose p+p{margin-top:1.2em}

/* Mono label. The only uppercase on the site: it marks structure,
   never content. Often applied to the section's real h2. */
.label{
  display:block;font-family:var(--mono);font-size:var(--t-label);font-weight:400;
  line-height:1.6;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted);
}
.label--gold{color:var(--gold-text)}

/* Stage diamond. Five in a row, always in the same order:
   Audit, Architecture, Discovery, Flow, Sustainability.
   Filled means that stage led the project. */
.dias{display:inline-flex;gap:.55rem;align-items:center;padding:3px}
.dia{width:8px;height:8px;flex:none;border:1px solid var(--ink-muted);transform:rotate(45deg)}
.dia.on{background:var(--gold);border-color:var(--gold)}

/* ---------- VIEWS ------------------------------------------------
   One file, five views. With JavaScript only the current view is
   shown and the address hash drives which, so the browser Back
   button works. Without it, all five read in order.
   ----------------------------------------------------------------- */
.js .view{display:none}
.js .view.is-on{display:block}
.view+.view{border-top:1px solid var(--rule)}
.js .view+.view{border-top:0}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-out .22s ease both}
  ::view-transition-new(root){animation:vt-in .5s var(--ease) both}
}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

/* ---------- 3. HEADER -------------------------------------------- */
/* The bar stays with you while you read upward and steps out of the
   way while you read down. It never hides while something inside it
   has keyboard focus, and without JavaScript it simply stays put. */
.head{
  position:-webkit-sticky;position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid transparent;
  transition:transform .38s var(--ease),border-color .3s ease;
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .head{background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
}
.head.is-stuck{border-bottom-color:var(--rule)}
.head.is-away{transform:translateY(-102%)}
.head:has(:focus-visible){transform:none}   /* keyboard focus only, so a tap does not pin it open */
.head__in{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem 1.5rem;flex-wrap:wrap;padding-block:clamp(.9rem,2vw,1.4rem)}
/* Targets clear the bar when it is showing */
[id]{scroll-margin-top:5.5rem}
.wordmark{font-family:var(--serif);font-size:1.125rem;font-weight:340;text-decoration:none;white-space:nowrap}
.wordmark i{color:var(--gold-text)}
.nav{display:flex;gap:clamp(1.25rem,2.6vw,2.25rem)}
.nav a{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-muted);padding-block:.5rem;transition:color .3s ease;
}
.nav a:hover,.nav a[aria-current]{color:var(--ink-deep)}
.nav a[aria-current]{box-shadow:0 1px 0 var(--gold)}

/* ---------- 4. HOME ---------------------------------------------- */

/* The drawing board. The construction drawing from the original site's
   opening, kept as line-work only: it draws itself once behind the
   headline, then stays as the standing graphic. No library; the lines
   are animated by CSS alone and are fully drawn without it. */
.board{position:relative;overflow:hidden}
.board::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(33,31,28,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(33,31,28,.07) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(110% 95% at 78% 30%,#000 15%,transparent 78%);
          mask-image:radial-gradient(110% 95% at 78% 30%,#000 15%,transparent 78%);
}
.plan{display:block;width:100%;height:auto;pointer-events:none}
.plan line{stroke:rgba(42,38,32,.5);stroke-width:1.1;stroke-dasharray:1;stroke-dashoffset:0}
.plan line.accent{stroke:var(--gold);stroke-width:1.5}
.plan text{font-family:var(--mono);font-size:17px;letter-spacing:.14em;text-transform:uppercase;fill:var(--ink-muted)}
.plan text.accent{fill:var(--gold-text)}
.board .mast{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
/* Phone: the drawing sits above the headline like a letterhead plate.
   Desktop: it sits beside the classifying line, under the headline. */
.plan{order:-1;margin-bottom:clamp(1.75rem,6vw,2.5rem);max-width:30rem}
.seq>.plan{animation:none}
@media (min-width:56rem){
  .board .mast{grid-template-columns:minmax(0,33rem) minmax(0,1fr);column-gap:clamp(2.5rem,7vw,7rem);align-items:start}
  .mast h1{grid-column:1 / -1}
  .plan{order:0;grid-column:2;margin:clamp(1.25rem,3vw,2.25rem) 0 0;max-width:none;justify-self:end}
}
@media (prefers-reduced-motion:no-preference){
  .plan line{animation:draw .6s cubic-bezier(.65,0,.35,1) both;animation-delay:var(--t,0s)}
  .plan text{animation:ink .6s ease both 2.1s}
  .seen .plan line,.seen .plan text{animation:none}
}
@keyframes draw{from{stroke-dashoffset:1}}
@keyframes ink{from{opacity:0}}

/* Masthead. The H1 is an argument in two sentences, so the type
   makes the argument: the industry habit recedes in grey, the
   claim stands in ink. No colour accent, no italics, no effect. */
.mast{padding-block:clamp(3rem,9vw,8rem) var(--space)}
.mast h1{font-family:var(--display);font-size:var(--t-hero);line-height:1.06;letter-spacing:-.03em;max-width:15em}
.mast h1 span{display:block}
.mast h1 .recede{color:var(--ink-recede)}
.mast h1 .stand{color:var(--ink-deep);margin-top:.18em}
.mast__text{margin-top:clamp(2rem,4.5vw,3.25rem)}
.mast__class{font-size:var(--t-lede);line-height:1.45;max-width:33rem}
.mast__class b{font-weight:inherit;color:var(--gold-text)}
.mast .label{margin-top:1.75rem}

/* The one composed entrance on the site: three beats, once. */
@media (prefers-reduced-motion:no-preference){
  .seq>*{animation:rise 1s var(--ease) both}
  .seq>:nth-child(2){animation-delay:.22s}
  .seq>:nth-child(3){animation-delay:.5s}
  .seen .seq>*{animation:none}
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}

/* Diagnosis */
.diag{padding-bottom:var(--space)}
.diag p{max-width:var(--measure);font-size:var(--t-lede);line-height:1.6}
.diag p+p{margin-top:1.3em}
.diag p:first-child{font-family:var(--display);font-size:var(--t-statement);font-weight:200;line-height:1.22;letter-spacing:-.025em;max-width:18em;color:var(--ink-deep);margin-bottom:clamp(2rem,4vw,3rem)}
.diag p:last-child{color:var(--ink-deep);font-weight:420}

/* Ledger. A record, not a gallery: each row is one link. */
.ledger{padding-bottom:var(--space)}
.ledger__head{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-bottom:1rem}
.row{
  display:grid;gap:.9rem 2.5rem;grid-template-columns:1fr;
  padding-block:clamp(1.75rem,3.2vw,2.6rem);border-top:1px solid var(--rule);
  text-decoration:none;transition:border-color .3s ease;
}
.rows li:last-child .row{border-bottom:1px solid var(--rule)}
.row__id{display:flex;align-items:center;gap:1.1rem}
.row__name{font-family:var(--display);font-size:clamp(1.6rem,3.2vw,2.5rem);letter-spacing:-.03em;transition:color .3s ease}
.row__cap{display:block;font-style:italic;font-size:var(--t-lede);line-height:1.4;margin-top:.45rem;max-width:26rem}
.row__meta{font-size:.9375rem;line-height:1.55;color:var(--ink-muted)}
.row__meta .label{margin-bottom:.3rem}
.row:hover{border-top-color:var(--ink)}
.row:hover .row__name{color:var(--gold-text)}
@media (min-width:56rem){
  .row{grid-template-columns:9.5rem minmax(0,1.5fr) minmax(0,1fr);align-items:start}
  .row__id{flex-direction:column;align-items:flex-start;gap:.85rem;padding-top:.7rem}
  .row__meta{padding-top:.7rem}
}
.key{margin-top:1.25rem;font-family:var(--mono);font-size:var(--t-label);line-height:1.8;letter-spacing:.04em;color:var(--ink-muted);max-width:44rem}

/* The pattern. The centre of the page, and the quietest part of it:
   cream, not charcoal. */
.pattern{background:var(--cream);padding-block:var(--space)}
/* gold small text on cream needs the deeper tone to hold 4.5:1 */
.pattern li .label{color:#7a6126}
.pattern li{max-width:var(--measure);margin-top:clamp(2rem,4vw,3rem)}
.pattern li p{font-size:var(--t-lede);line-height:1.5;margin-top:.5rem;color:var(--ink-deep)}
.pattern__line{
  font-family:var(--display);font-size:var(--t-statement);font-weight:200;line-height:1.2;letter-spacing:-.025em;
  color:#7a6126;max-width:15em;margin-top:clamp(4rem,9vw,7.5rem);
}

/* The reveal used in the pattern section only. Hidden state applies
   only when script and IntersectionObserver are both present. */
@media (prefers-reduced-motion:no-preference){
  .io .rise{opacity:0;transform:translateY(16px);transition:opacity 1s ease,transform 1s var(--ease);transition-delay:var(--d,0s)}
  .io .rise.in{opacity:1;transform:none}
}

/* Method */
.method{padding-block:var(--space)}
.method ol{margin-top:1.5rem;border-bottom:1px solid var(--rule)}
.method li{display:grid;gap:.5rem 2.5rem;grid-template-columns:1fr;padding-block:1.5rem;border-top:1px solid var(--rule)}
.method h3{font-family:var(--serif);font-size:var(--t-h2);font-weight:300;letter-spacing:-.02em}
.method p{max-width:30rem}
@media (min-width:56rem){
  .method li{grid-template-columns:9.5rem minmax(0,1fr) minmax(0,1.6fr);align-items:baseline}
}

/* Fit */
.fit{padding-bottom:var(--space)}
.fit .prose{margin-top:1.5rem}
.fit .prose p{font-size:var(--t-lede);line-height:1.6}

/* ---------- 5. CASE STUDIES --------------------------------------
   Deliberately quieter than the home view. The home view makes the
   argument; a case study is read.
   ----------------------------------------------------------------- */
.case__mast{padding-block:clamp(2rem,5vw,4rem) 0}
.back{display:inline-block;margin-bottom:clamp(2.5rem,6vw,4.5rem);padding-block:.5rem;text-decoration:none}
.back:hover{color:var(--gold-text)}
.case__mast h1,.about__mast h1{font-family:var(--display);font-size:var(--t-title);letter-spacing:-.04em;margin-top:1.25rem}
.case__cap{font-family:var(--display);font-style:italic;font-weight:200;font-size:var(--t-statement);line-height:1.25;letter-spacing:-.015em;color:var(--gold-text);max-width:17em;margin-top:clamp(1.25rem,3vw,2rem)}

.meta{
  display:grid;gap:1.5rem 3rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  padding-block:1.75rem;margin-top:clamp(2.5rem,6vw,4rem);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.meta dt{margin-bottom:.35rem}
.meta dd{font-size:1rem;line-height:1.5}

.stages{display:flex;flex-wrap:wrap;gap:.75rem clamp(1.25rem,3vw,2.5rem);margin-block:clamp(2rem,4.5vw,3rem) clamp(3rem,7vw,5rem)}
.stages li{display:flex;align-items:center;gap:.65rem;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.stages li.lead{color:var(--gold-text)}

.sec{display:grid;gap:1rem clamp(2rem,5vw,5rem);grid-template-columns:1fr;padding-block:clamp(2.5rem,6vw,4.75rem);border-top:1px solid var(--rule)}
.sec h2{font-family:var(--serif);font-size:var(--t-h2);font-weight:300}
@media (min-width:56rem){.sec{grid-template-columns:minmax(0,14rem) minmax(0,1fr)}}
.pull{font-family:var(--display);font-size:var(--t-statement);font-weight:200;line-height:1.22;letter-spacing:-.025em;color:var(--ink-deep);max-width:16em !important;margin-block:.25em .9em}

/* Outcome band, charcoal. One per case study at most. */
.band{background:var(--ink-deep);color:#fff;padding-block:var(--space)}
.band .label{color:rgba(255,255,255,.62)}
.band__line{font-family:var(--display);font-size:var(--t-statement);font-weight:200;line-height:1.2;letter-spacing:-.025em;max-width:16em;margin-top:1.25rem}
.band__line a{color:var(--gold-light);text-underline-offset:.18em;text-decoration-thickness:1px}
.band p.note{color:rgba(255,255,255,.72);max-width:var(--measure);margin-top:2rem}

.next{display:block;padding-block:clamp(2.5rem,6vw,4.5rem);text-decoration:none}
.next b{display:block;font-family:var(--display);font-weight:200;font-size:clamp(1.75rem,4vw,3rem);letter-spacing:-.03em;line-height:1.1;margin-top:.75rem;transition:color .3s ease}
.next:hover b{color:var(--gold-text)}

/* ---------- 6. ABOUT --------------------------------------------- */
.about__mast{padding-block:clamp(2.5rem,7vw,6rem) clamp(2.5rem,6vw,4.5rem)}
.about__state{font-family:var(--display);font-size:var(--t-statement);font-weight:200;line-height:1.2;letter-spacing:-.025em;max-width:16em;margin-top:clamp(1.5rem,3.5vw,2.5rem);color:var(--ink-deep)}
.about__cap{font-style:italic;font-size:var(--t-lede);color:var(--gold-text);margin-top:1rem}
.about__intro{padding-bottom:var(--space)}
.about__intro p{font-size:var(--t-lede);line-height:1.6}
.figures{display:grid;gap:2.5rem 3rem;grid-template-columns:1fr;margin-top:2.5rem}
@media (min-width:48rem){.figures{grid-template-columns:repeat(3,1fr)}}
.figures b{display:block;font-family:var(--display);font-weight:200;font-size:clamp(3rem,6.5vw,4.75rem);line-height:1;letter-spacing:-.03em;color:var(--gold-light)}
.figures span{display:block;margin-top:.85rem;color:rgba(255,255,255,.78);font-size:1rem;line-height:1.5;max-width:19rem}
.sec--first{border-top:0}

/* ---------- 7. CONTACT + FOOTER (shared by every view) ----------- */
.contact{background:var(--ink-deep);color:#fff;padding-block:var(--space)}
.contact .label{color:rgba(255,255,255,.62)}
.contact h2{font-family:var(--display);font-size:var(--t-title);letter-spacing:-.04em;margin-top:1.25rem}
.contact p{color:rgba(255,255,255,.78);max-width:var(--measure);margin-top:1.75rem;font-size:var(--t-lede);line-height:1.6}
.contact__mail{
  display:inline-block;margin-top:clamp(2rem,4.5vw,3rem);
  font-family:var(--display);font-weight:200;font-size:clamp(1.3rem,4.6vw,3rem);letter-spacing:-.02em;line-height:1.3;
  color:var(--gold-light);text-decoration:none;border-bottom:1px solid rgba(212,174,106,.45);
  overflow-wrap:anywhere;transition:border-color .3s ease;
}
.contact__mail:hover{border-bottom-color:var(--gold-light)}
.contact .contact__small{font-size:1rem;color:rgba(255,255,255,.66);margin-top:1.5rem}

/* Contact form. Same Formspree endpoint as the previous site, so
   enquiries keep arriving in the same inbox. Inputs are 16px so iOS
   does not zoom the page on focus. */
.contact__grid{display:grid;gap:clamp(2.5rem,6vw,5rem);grid-template-columns:minmax(0,1fr)}
@media (min-width:56rem){.contact__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.contact .contact__or{margin-top:clamp(2rem,4.5vw,3rem);font-size:var(--t-label);line-height:1.6;color:rgba(255,255,255,.62)}
.contact .contact__or+.contact__mail{margin-top:.6rem;font-size:clamp(1.2rem,2.6vw,1.75rem)}
.brief{display:grid;gap:1.5rem}
.brief label{display:block;margin-bottom:.45rem}
.brief input,.brief textarea{
  width:100%;font:inherit;font-size:1rem;line-height:1.5;color:#fff;
  background:rgba(255,255,255,.05);border:0;border-bottom:1px solid rgba(255,255,255,.4);
  border-radius:0;padding:.7rem .6rem;transition:border-color .2s ease,background .2s ease;
}
.brief textarea{min-height:8.5rem;resize:vertical}
.brief input:focus,.brief textarea:focus{outline:2px solid var(--gold-light);outline-offset:2px;border-bottom-color:var(--gold-light);background:rgba(255,255,255,.08)}
.brief__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.brief button{
  justify-self:start;font-family:var(--mono);font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-deep);background:var(--gold-light);border:1px solid var(--gold-light);
  padding:.95rem 1.6rem;cursor:pointer;transition:background .2s ease,color .2s ease;
}
.brief button:hover{background:#fff;border-color:#fff}
.brief button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.brief button[disabled]{opacity:.6;cursor:default}
.contact .brief__note{margin:0;font-size:.9375rem;line-height:1.55;color:rgba(255,255,255,.72);min-height:1.5em}

/* Privacy and accessibility views */
.legal ul{margin:.4em 0 0;padding-left:1.1em;list-style:disc;max-width:var(--measure)}
.legal li+li{margin-top:.45em}
.legal .prose a{text-underline-offset:.18em}
.foot{background:var(--ink-deep);border-top:1px solid rgba(255,255,255,.14);padding-block:2rem calc(2rem + env(safe-area-inset-bottom,0px))}
.foot__row{display:flex;flex-wrap:wrap;gap:.5rem 2.25rem;justify-content:space-between}
.foot__row>*{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.66);line-height:2}
.foot__row a{text-decoration:none;margin-right:1.5rem}
.foot__row a:last-child{margin-right:0}
.foot__row a:hover{color:#fff}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important}
}