/* AMNION · V1 (desktop)
   Hero, bar and wordmark journey: Paper A · Scale (17 Oct), retained.
   Grid: 12 columns, one left edge (column 1) and one reading rail (column 8). Every section hangs
   from the left margin; supporting copy sits on the rail or on the one-third line (column 5).
   Round 2 grounds, one sheet per module: white hero turning grey · grey Perspective · white
   Conditions · black Focus · grey Approach · white statement · grey Contact · black footer.
   Each sheet rises over the one before it, which holds still beneath it (CSS sticky). */

@font-face{font-family:"Suisse Intl";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/SuisseIntl-Regular.woff2") format("woff2")}
@font-face{font-family:"Suisse Intl";font-weight:450;font-style:normal;font-display:swap;src:url("fonts/SuisseIntl-Book.woff2") format("woff2")}
@font-face{font-family:"Suisse Intl";font-weight:500;font-style:normal;font-display:swap;src:url("fonts/SuisseIntl-Medium.woff2") format("woff2")}

:root{
  --paper:#FFFFFF; --ground:#EEEEEB; --ink:#0E0E0D; --ink2:#3C3C39; --grey:#6B6B67; --tone:#C9C9C5;
  --c-l:#E3E3E0; --c-r:#CBCBC8;
  --on-k:#F2F2F0; --on-k2:#A8A8A3; --on-k3:#7E7E7A;
  --m:clamp(20px,3.9vw,56px);
  --g:clamp(16px,1.67vw,24px);
  --cw:calc(100vw - 2 * var(--m));
  --col:calc((var(--cw) - 11 * var(--g)) / 12);
  --bar:72px;
  /* type scale: L1 section headlines · L2 statement · L3 row titles · reading */
  --l1:min(4vw,7.8vh,76px);
  --font:"Suisse Intl",-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
@media (max-width:899px){:root{--bar:60px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-weight:450;font-size:18px;line-height:1.45;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:normal;font-feature-settings:"kern" 1}
h1,h2,h3,p,ul,ol,li{margin:0;padding:0;font-weight:inherit;font-size:inherit}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
svg{display:block}
[hidden]{display:none!important}
::selection{background:var(--ink);color:var(--paper)}
:focus{outline:none}
:focus-visible{outline:2px solid currentColor;outline-offset:5px;border-radius:1px}
main{display:block;overflow-x:clip;position:relative;z-index:1}

/* composed line breaks (hero, from Paper A): .w wide (>=700) · .p phones (<700) */
br.p{display:none}
@media (max-width:699px){br.w{display:none}br.p{display:inline}}

.skip{position:fixed;z-index:100;left:var(--m);top:14px;transform:translateY(-300%);background:var(--ink);color:var(--paper);font-weight:500;font-size:14px;line-height:1;padding:12px 14px}
.skip:focus-visible{transform:none;outline-offset:3px;outline-color:var(--ink)}

/* ---------- grid ---------- */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);padding-left:var(--m);padding-right:var(--m)}
@media (max-width:699px){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.rd{font-weight:450;font-size:clamp(17px,1.39vw,21px);line-height:1.46;letter-spacing:-.004em;text-wrap:pretty}

/* ---------- bar (Paper A), five links, no visible motion control ---------- */
.bar{position:fixed;inset:0 0 auto 0;height:var(--bar);z-index:40;background:var(--paper);color:var(--ink);--nav-dim:var(--grey);transition:background-color .35s ease,color .35s ease}
.bar.t-g{background:var(--ground)}
.bar.t-k{background:var(--ink);color:var(--on-k);--nav-dim:var(--on-k2)}
.motion .bar{transition:background-color .35s ease,color .35s ease,transform .55s var(--ease)}
.motion .bar.off{transform:translateY(-101%)}
.motion .bar.off:focus-within{transform:none}
.nav{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:center;height:100%;padding:0 var(--m)}
.nav-mark{grid-column:1 / span 3;justify-self:start;display:block;height:15px;width:calc(15px * 4139 / 725)}
.nav-mark svg{width:100%;height:100%;fill:currentColor;overflow:hidden}
.nav-links{grid-column:8 / span 5;display:flex;gap:28px}
.nav-links a{display:block;position:relative;font-weight:500;font-size:13px;line-height:1;letter-spacing:.004em;padding:9px 0;color:var(--nav-dim);transition:color .35s ease}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .6s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current="true"]{color:inherit}
.nav-links a[aria-current="true"]::after{transform:scaleX(1);transform-origin:0 50%}
.brand{display:none}
@media (max-width:1023px){.nav-links{grid-column:5 / span 8;justify-content:flex-end}}
@media (max-width:899px){.nav-links{gap:20px}}
@media (max-width:699px){.nav{display:flex;justify-content:space-between}.nav-mark{height:12px;width:calc(12px * 4139 / 725)}.nav-links{gap:12px}.nav-links a{font-size:11.5px}}

/* ---------- 01 opening (Paper A): statement high, wordmark at the foot ---------- */
/* (3O) the statement's cap height sits the side margin (--m) below the nav's baseline: the nav text is
   centred in the bar, so its baseline is bar/2 + .3375 of its size; the first line's cap top is .1625 of
   the statement's size below its box (line-height 1.1, Suisse Intl ascent .986, cap height .725) */
.hero{--hfs:min(3.25vw,5.6vh,58px);--nfs:13px;position:relative;height:100vh;height:100svh;min-height:560px;display:flex;flex-direction:column;justify-content:space-between;
  padding-top:calc(var(--bar) / 2 + .3375 * var(--nfs) + var(--m) - .1625 * var(--hfs));padding-bottom:var(--m)}
.h-ident{grid-column:1 / span 11;font-weight:400;font-size:var(--hfs);line-height:1.1;letter-spacing:-.021em;margin-left:-.035em}
.hero-mark{padding:0 var(--m)}
.hero-mark svg{width:100%;height:auto;fill:var(--ink)}
/* 700-1099: the type is sized from the column width so the longest composed line (about 23 em) always fits
   on one line; it never wraps a second time (3I fix) */
@media (max-width:1099px){.hero{--hfs:calc(var(--cw) / 24)}.h-ident{grid-column:1 / -1}}
@media (max-width:699px){.hero{--hfs:min(calc(var(--cw) / 12.5),4.6vh);--nfs:11.5px}.h-ident{line-height:1.1;letter-spacing:-.02em}}

/* ---------- sheets: each module is a full-bleed ground; with motion on, each holds (sticky) while
   the next rises over it. JS sets each sheet's top to min(0, viewport - height). ---------- */
.sheet{position:relative}
.motion .sheet{position:sticky;top:0}
.measuring .sheet,.measuring .stk{position:relative!important;top:0!important}
.open{background:var(--paper)}
.motion .open{background:var(--open-bg,var(--paper))}
.hold{display:none}
.motion .hold{display:block;height:40vh;height:40svh}
.motion .hold-p{height:0}   /* (3V) Conditions follows directly after Perspective's lower space */
.motion .hold-a{height:80vh;height:80svh}   /* (3O) a little longer with the diagram complete */

/* section labels: the nav's own words, on the left edge, so each new ground announces itself */
.lab{grid-column:1 / -1;font-weight:500;font-size:13px;line-height:1;letter-spacing:.004em;color:var(--grey);margin-bottom:clamp(32px,5vh,56px)}

/* ---------- 02 Perspective: headline held on the left while the long paragraph reads on the rail ---------- */
.persp{background:var(--ground);padding:clamp(96px,14vh,168px) 0 clamp(104px,15vh,176px)}
/* motion: Perspective is one screen, its ground the opening's (fully grey by the time it locks);
   the composition sits in the optical centre below the bar */
.motion .persp{background:var(--open-bg,var(--ground));min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--bar) + clamp(28px,5vh,64px)) 0 clamp(40px,7vh,88px)}
.motion .persp .grid{width:100%}
.persp .grid{align-items:start}
/* (3O) the statement across ten columns; beneath it the two paragraphs side by side as two equal halves
   of the measure (each ends two gutters short, so the pair reads as columns), tops aligned, starting on
   the statement's left edge; the whole composition centred in the held screen */
.p-h{grid-column:1 / span 10;font-weight:400;font-size:var(--l1);line-height:1.02;letter-spacing:-.032em;margin-left:-.03em;text-wrap:balance}
.p-r{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:start;margin-top:clamp(44px,8vh,104px)}
.p-r p{grid-column:1 / span 6;max-width:none;padding-right:calc(var(--g) * 2)}
.p-r p+p{grid-column:7 / span 6}
@media (max-width:1099px){.p-h{grid-column:1 / -1}.p-r p{padding-right:var(--g)}}
@media (max-width:899px){.p-r p,.p-r p+p{grid-column:1 / -1;max-width:34em;padding-right:0}.p-r p+p{margin-top:1em}}
@media (max-width:699px){.p-h{font-size:calc(var(--cw) / 9.5)}}

/* ---------- 03 Conditions: the schematic (a deliberate centred composition) ---------- */
.cond{height:100vh;height:100svh;min-height:600px;background:var(--paper)}
.c-lab{position:absolute;left:0;right:0;top:0;padding-top:calc(var(--bar) + clamp(24px,4vh,44px));z-index:1}
.cond:focus{outline:none}
/* (3K) the two circles are centred on the screen: their row is exactly 2r tall and the row below it is
   50% - r, so the circles' middle is the screen's middle at every size. The headline sits between the
   foot of the "Conditions" label (row 1 ends there: bar + label padding + its 13 px line) and the top of
   the circles, in two equal flexible rows, so the space above and below it is the same. */
.stage{--lb:calc(var(--bar) + clamp(24px,4vh,44px) + 13px);--hf:min(3.2vw,5.2vh,52px);
  /* the circles keep their 3J size where there is room; on shorter screens they give way so the
     headline (two lines, 2.12 x its size) keeps at least 28 px above and below */
  --r:min(15vw,21vh,280px,calc(50vh - var(--lb) - 2.12 * var(--hf) - 56px));
  position:absolute;inset:0;display:grid;grid-template-columns:100%;
  grid-template-rows:var(--lb) 1fr auto 1fr calc(2 * var(--r)) calc(50% - var(--r));justify-items:center;padding:0 var(--m)}
.c-head{grid-row:3;width:100%;padding:0}
.cond-h{grid-column:1 / -1;justify-self:center;max-width:21em;text-align:center;font-weight:400;font-size:var(--hf);line-height:1.06;letter-spacing:-.028em;text-wrap:balance}
.schem{--d:calc(var(--r) * 1.3);--gap:clamp(32px,3.35vw,56px);grid-row:5;height:calc(2 * var(--r));
  display:flex;align-items:center;justify-content:center;gap:var(--gap);font-size:13px}
.venn{position:relative;flex:none;width:calc(2 * var(--r) + var(--d));height:calc(2 * var(--r))}
.vsvg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.v-l{fill:var(--c-l)}.v-r{fill:var(--c-r)}.v-lens{fill:var(--ink)}
.v-st{display:none}   /* (3L) no outline on the circles */
/* AMNION in the lens: centred on the meeting point */
.vmark{position:absolute;left:calc(var(--r) + var(--d) / 2);top:var(--r);width:calc(var(--r) * .44);transform:translate(-50%,-50%)}
.vmark svg{width:100%;height:auto;fill:var(--on-k)}
/* lists: uppercase, tracked; the trailing tracking is pulled back so the optical edge sits on the gap */
.sl{flex:none;display:grid;row-gap:0;font-weight:450;font-size:13px;line-height:2;letter-spacing:.085em;text-transform:uppercase;color:var(--grey);white-space:nowrap}
.sl-l{text-align:right}
.sl-l li{margin-right:-.085em}
.sl li>span{display:inline-block}
/* captions: two lines, centred on each circle's vertical axis; the gap from the circle's bottom to the
   caption's cap height equals the side gap (.cap top is set in site.js from the font's metrics) */
.cap{position:absolute;top:calc(2 * var(--r) + var(--gap));width:max-content;transform:translateX(-50%);text-align:center;font-weight:450;font-size:13px;line-height:1.5;letter-spacing:.085em;text-transform:uppercase;color:var(--grey)}
.cap .cl{display:block;padding-left:.085em;overflow:hidden}
.cap .cl>span{display:inline-block}
.cap-l{left:var(--r)}
.cap-r{left:calc(var(--r) + var(--d))}
@media (max-width:899px){.stage{--r:min(13.5vw,19vh,calc(50vh - var(--lb) - 2.12 * var(--hf) - 56px))}.schem{--gap:20px;font-size:11px}.sl,.cap{font-size:11px}}
@media (max-width:699px){.sl{display:none}}

/* ---------- 04 Focus: black, a ledger of four ---------- */
.focus{background:var(--ink);color:var(--on-k);padding:calc(var(--bar) + clamp(48px,9vh,112px)) 0 clamp(150px,22vh,250px)}
.focus ::selection{background:var(--on-k);color:var(--ink)}
.focus .lab,.foot .lab{color:var(--on-k3)}
.f-h{grid-column:1 / span 9;font-weight:400;font-size:var(--l1);line-height:1.02;letter-spacing:-.032em;margin-left:-.03em;text-wrap:balance}
.rows{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;margin-top:clamp(64px,10vh,120px)}
.row{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;position:relative;padding:clamp(24px,3.2vh,34px) 0 clamp(44px,6.4vh,72px);align-items:start}
.focus .rule{background:rgba(242,242,240,.22)}
.rule{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(14,14,13,.18);transform-origin:0 50%}
.r-t{grid-column:1 / span 6;font-weight:400;font-size:min(2.9vw,46px);line-height:1.04;letter-spacing:-.024em;margin-left:-.02em}
.r-d{grid-column:8 / span 4;max-width:27em;color:var(--ink2);padding-top:.32em;text-wrap:pretty}
.focus .r-d{color:var(--on-k2)}
.m{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.m>span{display:block}
@media (max-width:1099px){.r-t{grid-column:1 / span 6}.r-d{grid-column:7 / span 6}}
@media (max-width:699px){.f-h{font-size:calc(var(--cw) / 10.5);grid-column:1 / -1}.r-t,.r-d{grid-column:1 / -1}.r-t{font-size:30px}.r-d{padding-top:14px}}

/* ---------- 05 Approach: grey ---------- */
.approach{min-height:100vh;min-height:100svh;background:var(--ground);color:var(--ink);padding:calc(var(--bar) + clamp(48px,9vh,112px)) 0 clamp(170px,26vh,300px)}
.ap-in{position:relative;row-gap:0}
.a-h{grid-column:1 / span 7;grid-row:2;font-weight:400;font-size:var(--l1);line-height:1.02;letter-spacing:-.032em;margin-left:-.03em;text-wrap:balance}
/* the body hangs from the one-third line (column 5), the edge the middle item also shares */
.a-b{grid-column:1 / span 6;grid-row:3;margin-top:clamp(56px,9vh,112px);font-weight:450;font-size:clamp(19px,1.6vw,24px);line-height:1.42;letter-spacing:-.008em;max-width:30em;text-wrap:pretty}
.items{grid-column:1 / -1;grid-row:4;display:grid;grid-template-columns:subgrid;position:relative;margin-top:clamp(72px,12vh,140px)}
/* the diagram: right of the statement and the reasoning, centred on them; a fixed 344-unit viewBox
   (r = 100, offset 72), so the whole figure scales with its box */
.adiag{--ar:min(9.4vw,17.5vh,200px);grid-column:8 / span 5;grid-row:2 / span 2;align-self:center;justify-self:center;position:relative;width:calc(var(--ar) * 3.44);aspect-ratio:1}
.ad-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ad-c{fill:#0E0E0D;stroke:none}   /* (3L) no outline */
.ad-v{fill-opacity:.07}.ad-h{fill-opacity:.13}
.ad-l{fill:var(--ink)}
.ad-t{position:absolute;transform:translate(-50%,-50%);font-weight:450;font-size:13px;line-height:1;letter-spacing:.1em;padding-left:.1em;text-transform:uppercase;color:var(--ink2);white-space:nowrap}
.ad-mark{position:absolute;left:50%;top:50%;width:12.2%;transform:translate(-50%,-50%)}
.ad-mark svg{width:100%;height:auto;fill:var(--on-k)}
/* one hairline across all three: it draws left to right and each item rises as the line reaches it */
.items-rule{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(14,14,13,.22);transform-origin:0 50%;list-style:none}
.item{grid-column:span 4;position:relative;padding-top:clamp(22px,3vh,30px);padding-right:clamp(8px,1.4vw,28px)}
.i-t{font-weight:400;font-size:min(1.95vw,30px);line-height:1.12;letter-spacing:-.016em}
.i-d{margin-top:clamp(16px,2.2vh,22px);font-weight:450;font-size:clamp(16px,1.18vw,18px);line-height:1.5;color:var(--ink2);max-width:25em;text-wrap:pretty}
@media (max-width:1099px){.a-h{grid-column:1 / -1}.a-b{grid-column:1 / span 8}.adiag{grid-column:1 / -1;grid-row:4;margin-top:64px}.items{grid-row:5}}
@media (max-width:899px){.items{grid-template-columns:1fr;row-gap:48px}.item{grid-column:1 / -1}.i-t{font-size:26px}}
@media (max-width:699px){.a-h{font-size:calc(var(--cw) / 10.5)}.a-2{margin-left:0}.a-b{grid-column:1 / -1}}

/* ---------- 06 the large statement ---------- */
.belief{background:var(--ink);color:var(--on-k);padding:clamp(120px,19vh,220px) 0 clamp(150px,25vh,270px)}
.b-s{grid-column:1 / -1;justify-self:center;max-width:19em;text-align:center;font-weight:400;font-size:min(3.7vw,6.4vh,60px);line-height:1.14;letter-spacing:-.024em;text-wrap:balance}
@media (max-width:699px){.b-s{grid-column:1 / -1;font-size:calc(var(--cw) / 13)}}

/* ---------- 07 Contact: grey, sized to its content; heading and invitation side by side, the
   destination closing the reading column; the footer follows directly ---------- */
.end{position:relative}
.contact{position:relative;background:var(--ground);padding:clamp(56px,10vh,136px) 0 clamp(56px,9vh,128px)}
.c-in{align-items:start}
.c-h{grid-column:1 / span 7;text-wrap:balance;font-weight:400;font-size:var(--l1);line-height:1.02;letter-spacing:-.032em;margin-left:-.03em;max-width:11.5em}
.c-r{grid-column:8 / span 5;padding-top:.15em}
.c-p{max-width:26em}
.c-act{position:relative;margin-top:clamp(28px,4.4vh,48px);padding-top:clamp(16px,2.2vh,22px);max-width:26em}
.c-rule{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(14,14,13,.24);transform-origin:0 50%}
.c-note{font-weight:450;font-size:15px;line-height:1.4;color:var(--grey)}
.c-mail{display:inline-block;font-weight:400;font-size:clamp(22px,1.9vw,30px);line-height:1.2;letter-spacing:-.012em;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px;padding-bottom:3px;transition:background-size .6s var(--ease)}
.c-mail:hover{background-size:0 1px;background-position:100% 100%}
.c-mail::after{content:" \2192"}
/* (3P) 900-1099: the invitation stays beside the statement (shorter, so the rising footer never covers it);
   700-899: beneath it */
@media (max-width:1099px){.c-h{grid-column:1 / span 6}.c-r{grid-column:7 / span 6}}
@media (max-width:899px){.c-h{grid-column:1 / -1}.c-r{grid-column:1 / span 9;margin-top:36px}}
@media (max-width:699px){.c-h{font-size:calc(var(--cw) / 6.4)}.c-r{grid-column:1 / -1}}

.foot{position:relative;z-index:2;background:var(--ink);color:var(--on-k);padding:clamp(52px,7vh,96px) 0 clamp(24px,3.5vh,36px)}
.foot ::selection{background:var(--on-k);color:var(--ink)}
.f-top{align-items:start}
.f-id{grid-column:1 / span 5}
.f-mark{height:21px;width:auto;fill:var(--on-k)}
.f-desc{margin-top:20px;max-width:21em;font-weight:450;font-size:15px;line-height:1.45;color:var(--on-k2)}
.f-col{font-weight:450;font-size:16px;line-height:1.5}
.f-sec{grid-column:8 / span 2}
.f-con{grid-column:10 / span 3}
.f-lab{font-weight:450;font-size:13px;line-height:1.4;color:var(--on-k3);margin-bottom:14px}
.f-col li+li{margin-top:4px}
.f-bot{position:relative;margin-top:clamp(28px,4vh,88px);padding-top:22px;align-items:baseline;font-weight:450;font-size:13px;line-height:1.4}
.f-rule{position:absolute;left:var(--m);right:var(--m);top:0;height:1px;background:rgba(242,242,240,.2);transform-origin:0 50%}
.f-bot{align-items:start}
.f-copy{grid-column:1 / span 4;color:var(--on-k3)}
.f-legal{grid-column:5 / span 6;max-width:46em;font-size:12px;line-height:1.55;color:var(--on-k3);text-wrap:pretty}
.f-top-l{grid-column:11 / span 2;justify-self:end}
@media (max-width:899px){.f-copy{grid-column:1 / -1}.f-legal{grid-column:1 / -1;margin-top:12px}.f-top-l{grid-column:1 / -1;justify-self:start;margin-top:12px}}
.ln-u{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .5s var(--ease);padding-bottom:2px}
.ln-u:hover{background-size:100% 1px}
/* (3P) 700-899: the link columns sit beside the brand (a shorter footer); phones stack them */
@media (max-width:899px){.f-id{grid-column:1 / span 6}.f-sec{grid-column:7 / span 3}.f-con{grid-column:10 / span 3}}
@media (max-width:699px){.f-id{grid-column:1 / -1}.f-sec{grid-column:1 / span 3;margin-top:48px}.f-con{grid-column:4 / span 3;margin-top:48px}}


/* ---------- the closing stage (motion on): a held full screen with stacked layers ---------- */
.cl-black{display:none}
.motion .closing{position:relative;height:300vh;height:calc(100svh + 200vh);margin-top:-100vh;margin-top:-100svh}
.motion .cstage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;pointer-events:none;z-index:3}
.motion .cl-black{display:block;position:absolute;inset:0;background:var(--ink);clip-path:circle(0px at 50% 50%)}
.motion .belief{color:var(--on-k)}
.motion .belief{position:absolute;inset:0;background:none;padding:0;display:flex;flex-direction:column;justify-content:center}
.motion .belief .grid{width:100%;padding-top:0}
.motion .contact{position:absolute;inset:0;padding:calc(var(--bar) + clamp(28px,5vh,104px)) 0 0;pointer-events:auto}
.motion .foot{position:absolute;left:0;right:0;bottom:0;pointer-events:auto}
.measuring .cstage{position:relative!important}

/* ---------- motion states (JS on and motion allowed) ---------- */
.motion .brand{display:block;position:fixed;z-index:41;left:0;top:0;transform-origin:0 0;pointer-events:none;visibility:hidden}
.motion .brand svg{width:100%;height:auto;fill:var(--ink);overflow:visible}
.motion.ready:not(.docked) .brand{visibility:visible}
.motion .hero-mark svg{visibility:hidden}
.motion:not(.docked) .nav-mark svg{visibility:hidden}
.motion:not(.ready) .h-ident,.motion:not(.ready) .nav-links{visibility:hidden}
.ln{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.lo,.lx{display:block}
.motion .lx{will-change:transform}
.motion .bar.t-o{transition:transform .55s var(--ease)}
.motion .bar.cz{transition:transform .55s var(--ease)}


/* =====================================================================================================
   (3U) Phones (under 700 px). Static layout first (also what reduced motion gets), then the phone
   choreography under .lite. Nothing here reaches desktop: every rule sits inside the phone query or
   under .lite, which only exists below 700 px.
   ===================================================================================================== */
.nav-menu{display:none}
/* the wordmark's O overshoots the cap height and baseline (as round letters do); the SVG box is the
   cap height, so the overshoot must be allowed to show or the O is cut flat */
.hero-mark svg{overflow:visible}
@media (max-width:699px){
  :root{--d1:clamp(28px,calc(var(--cw) / 11),40px);--l1:var(--d1)}
  .lab{font-size:12px;margin-bottom:28px}
  .rd,.p-r p,.a-b,.c-p{font-size:17px;line-height:1.5;letter-spacing:-.004em}
  .rd,.p-r p,.a-b,.c-p,.i-d{max-width:30em}

  /* bar: the wordmark at full size on the left, one control on the right; the chapters open beneath */
  .nav{display:flex;justify-content:space-between;align-items:center;background:inherit}
  .nav-mark{flex:none;height:12px;width:calc(12px * 4139 / 725)}
  .nav-menu{display:block;flex:none;appearance:none;-webkit-appearance:none;background:none;border:0;margin:0 -12px 0 0;padding:18px 12px;
    font:inherit;font-weight:500;font-size:12px;line-height:12px;letter-spacing:.004em;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .nav-menu .nm-c,.menu-open .nav-menu .nm-o{display:none}
  .menu-open .nav-menu .nm-c{display:inline}
  .nav-links{position:fixed;left:0;right:0;top:var(--bar);display:block;background:inherit;padding:4px var(--m) 30px;
    visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .5s var(--ease),visibility 0s linear .5s}
  .menu-open .nav-links{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .55s var(--ease)}
  .nav-links li{position:relative;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease}
  .menu-open .nav-links li{opacity:1;transform:none;transition:opacity .5s ease,transform .7s var(--ease)}
  .menu-open .nav-links li:nth-child(2){transition-delay:.04s}.menu-open .nav-links li:nth-child(3){transition-delay:.08s}
  .menu-open .nav-links li:nth-child(4){transition-delay:.12s}.menu-open .nav-links li:nth-child(5){transition-delay:.16s}
  .nav-links li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:currentColor;opacity:.16}
  .nav-links li:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.16}
  /* the page beneath an open menu is veiled in the bar's own ground */
  .bar::before{content:"";position:fixed;left:0;right:0;top:var(--bar);bottom:0;background:inherit;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility 0s linear .4s}
  .menu-open .bar::before{opacity:.86;visibility:visible;transition:opacity .45s ease}
  .menu-open .brand{z-index:39}
  .nav-links a{font-weight:400;font-size:26px;line-height:1.1;letter-spacing:-.024em;padding:14px 0 15px;color:inherit}
  .nav-links a::after{bottom:11px;right:auto;width:100%}
  .nav-links a[aria-current="true"]::after{transform:scaleX(1)}

  /* opening: the statement a step smaller than the section headlines, its two sentences set apart */
  .hero{--hfs:min(clamp(23px,calc(var(--cw) / 12.6),34px),4.2vh);padding-top:calc(var(--bar) + var(--m) - .1625 * var(--hfs))}
  .h-ident{line-height:1.12;letter-spacing:-.02em}
  .cln{white-space:nowrap}

  /* section rhythm */
  .persp,.focus,.approach,.contact{padding:88px 0 96px}
  .p-h,.f-h,.a-h,.c-h{font-size:var(--d1);line-height:1.06;letter-spacing:-.03em;grid-column:1 / -1;max-width:none}
  .p-r{margin-top:36px}

  /* Conditions: label, statement, the two circles across the measure; the two lists beneath, set
     either side of the lens's axis (the left list ends on it, the right list begins from it) */
  .cond{height:auto;min-height:0;padding:88px 0 104px}
  .c-lab{position:relative;padding-top:0}
  .stage{position:relative;inset:auto;display:block;padding:0;--r:min(calc(var(--cw) / 3.3),140px)}
  .c-head{padding:0 var(--m)}
  .cond-h{grid-column:1 / -1;justify-self:start;text-align:left;font-size:var(--d1);line-height:1.06;letter-spacing:-.03em;max-width:none}
  /* (3V) each list centred beneath its own circle, under that circle's caption (as on desktop); an item
     wider than the space between the two circles' axes wraps onto a second line rather than meeting
     its neighbour */
  .schem{display:grid;grid-template-columns:100%;column-gap:24px;row-gap:74px;height:auto;margin:56px var(--m) 0}
  .venn{grid-column:1;grid-row:1;justify-self:center}
  .cap{display:block;font-size:10.5px;letter-spacing:.07em;color:var(--ink)}
  .cap .cl{padding-left:.07em}
  .sl{display:block;grid-row:2;grid-column:1;justify-self:start;width:calc(2 * var(--r));text-align:center;font-size:10.5px;line-height:1.4;letter-spacing:.07em;white-space:normal}
  .sl-l{margin-left:calc((100% - 3.3 * var(--r)) / 2)}
  .sl-r{margin-left:calc((100% - 3.3 * var(--r)) / 2 + 1.3 * var(--r))}
  .sl li{max-width:calc(1.3 * var(--r) - 16px);margin:0 auto 8px;padding-left:.07em;text-wrap:balance}
  .sl-l li{margin-right:auto}

  /* Focus: the four areas as an editorial accordion (see .acc below) */
  .r-t{font-size:24px}

  /* Approach */
  .a-b{margin-top:32px}
  .adiag{--ar:min(calc(var(--cw) / 3.44),140px);grid-column:1 / -1;grid-row:4;justify-self:center;margin-top:56px}
  .ad-t{font-size:10.5px;letter-spacing:.09em}
  .items{margin-top:72px}
  .i-t{font-size:24px}

  /* the closing statement */
  .belief{padding:128px 0 136px}
  .b-s{font-size:clamp(24px,calc(var(--cw) / 12),34px);line-height:1.18}

  /* Contact */
  .c-r{margin-top:32px}
  .c-mail{font-size:22px}

  /* footer: the description on three balanced lines */
  .f-desc{max-width:none;font-size:15px}
}
@media (max-width:359px){.sl,.cap{font-size:10px;letter-spacing:.05em}}

/* ---------- (3U) Focus accordion (phones; built by site.js below 700 px, any motion setting) ---------- */
@media (max-width:699px){
  .rows.acc{margin-top:56px;row-gap:0}
  .acc .row{display:block;padding:0}
  .acc .row:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(242,242,240,.22)}
  .acc .r-t{margin:0;font-size:24px}
  .r-b{appearance:none;-webkit-appearance:none;display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:72px;margin:0;padding:22px 0;
    background:none;border:0;border-radius:0;font:inherit;color:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .r-b:focus-visible{outline-offset:-2px}
  .r-b .m{flex:1 1 auto}
  .r-i{position:relative;flex:none;width:15px;height:15px;color:var(--on-k2)}
  .r-i::before,.r-i::after{content:"";position:absolute;left:0;top:7px;width:15px;height:1px;background:currentColor}
  .r-i::after{transform:rotate(90deg);transition:transform .5s var(--ease)}
  .r-b[aria-expanded="true"] .r-i::after{transform:rotate(0deg)}
  .r-p{overflow:hidden}
  .acc .r-d{padding:0 36px 32px 0;font-size:17px;line-height:1.5;max-width:none}
}

/* ---------- (3U) the phone choreography (.lite: under 700 px, motion allowed) ---------- */
.lite .bar,.lite .nav-links a{transition:none}
.lite:not(.lite-on) .h-ident,.lite:not(.lite-on) .nav-menu,.lite:not(.lite-on) .hero-mark svg,
.lite:not(.lite-on) main [data-lines],.lite:not(.lite-on) main .lab{visibility:hidden}
/* opening: the wordmark travels as one piece (a fixed layer) from the foot of the screen into the bar */
.lite .brand{display:block;position:fixed;z-index:41;left:0;top:0;transform-origin:0 0;pointer-events:none;visibility:hidden}
.lite .brand svg{width:100%;height:auto;fill:var(--ink);overflow:visible}
.lite.lite-on:not(.docked) .brand{visibility:visible}
.lite.lite-on .hero-mark svg{visibility:hidden}
.lite:not(.docked) .nav-mark svg{visibility:hidden}
.lite .open{background:var(--open-bg,var(--paper))}
.lite .persp{background:var(--open-bg,var(--ground))}
.lite .lx,.lite .pw{will-change:transform}
/* Approach holds while the black rises over it (its top is set by script so its foot rests on the
   screen's foot) */
.lite .approach{position:sticky}
/* the closing: the black is a full-screen panel rising from the foot of the screen; the statement
   rests in it; Contact rises over it as a grey panel; the footer follows in the page's own flow */
.lite .belief{position:relative;z-index:1;height:275vh;height:275svh;padding:0}
.lite .belief .grid{position:sticky;top:0;height:100vh;height:100svh;align-content:center}
.lite .contact{position:relative;z-index:2;margin-top:-100vh;margin-top:-100svh;min-height:100vh;min-height:100svh;padding:calc(var(--bar) + 64px) 0 80px}
.lite.measuring .belief .grid{position:relative!important}
@media (prefers-reduced-motion:reduce){.nav-links,.nav-links li,.r-i::after{transition:none!important}}

/* ---------- (3V) Perspective: "Read more" (desktop and phones) ----------
   Closed, the statement and its control sit exactly centred on Perspective's page: the space from the
   page's top to the statement equals the space from the control to the page's foot (the label sits in
   the upper space, its usual distance above the statement). Open, the paragraphs expand beneath without
   moving the statement. Without script the paragraphs simply show. */
.p-more{display:none}
.js .p-more{grid-column:1 / -1;justify-self:start;display:inline-flex;align-items:center;gap:12px;margin:clamp(28px,4.6vh,48px) 0 0;padding:15px 0;
  appearance:none;-webkit-appearance:none;background:none;border:0;border-radius:0;font:inherit;font-weight:500;font-size:13px;line-height:1;letter-spacing:.004em;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.p-more .pm-o,.p-more .pm-c{position:relative;padding-bottom:3px}
.p-more .pm-o::after,.p-more .pm-c::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:0 50%;transition:transform .6s var(--ease)}
.p-more:hover .pm-o::after,.p-more:hover .pm-c::after{transform:scaleX(0);transform-origin:100% 50%}
.p-more .pm-c,.p-more[aria-expanded="true"] .pm-o{display:none}
.p-more[aria-expanded="true"] .pm-c{display:inline}
.pm-i{position:relative;width:11px;height:11px;flex:none}
.pm-i::before,.pm-i::after{content:"";position:absolute;left:0;top:5px;width:11px;height:1px;background:currentColor}
.pm-i::after{transform:rotate(90deg);transition:transform .5s var(--ease)}
.p-more[aria-expanded="true"] .pm-i::after{transform:rotate(0deg)}
.js .persp{--plh:calc(13px + clamp(32px,5vh,56px))}
.js .persp:not(.is-open){min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:0;padding-bottom:0}
.js .persp:not(.is-open)>.grid{width:100%;margin-top:calc(-1 * var(--plh))}
.js .persp:not(.is-open) .p-r{height:0;margin-top:0;overflow:hidden;visibility:hidden}
.js .persp .p-r{overflow:hidden}
@media (max-width:699px){.js .persp{--plh:calc(12px + 28px)}.js .p-more{margin-top:30px;padding:16px 0}}
@media (prefers-reduced-motion:reduce){.pm-i::after,.p-more .pm-o::after{transition:none}}

/* ---------- (3V) Horizon: the closing statement's title, centred across the page and centred in the
   space between the page's top and the statement ---------- */
.belief .lab{color:var(--on-k3)}
.b-lab{justify-self:center;text-align:center;padding-left:.004em}
.motion .belief .grid{flex:1 1 auto;height:100%;grid-template-rows:1fr auto 1fr}
.motion .b-lab,.lite .b-lab{grid-row:1;align-self:center;margin:0}
.motion .b-s,.lite .b-s{grid-row:2}
.lite .belief .grid{grid-template-rows:1fr auto 1fr;align-content:stretch}

/* (3R) Perspective's statement, word by word */
.p-h .pw{display:inline-block;will-change:transform}