/* Typefaces, self-hosted. Previously loaded from Google Fonts, which transmitted every
visitor's IP address to Google LLC in the United States on each page view. Same files,
same unicode-ranges and same weights as the Google build; served from this site's own
CDN, so no visitor data leaves the site. latin and latin-ext only: the site uses no
other scripts. Cormorant Garamond ships one variable file per style, so its three
weights point at a single URL and are fetched once. */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url(https://cdn.prod.website-files.com/6aa2f01db4428565d18e0d69/6aa9543371fe64d443598c6e_cg-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url(https://cdn.prod.website-files.com/6aa2f01db4428565d18e0d69/6aa954334ba132c45768a7ce_cg-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(https://cdn.prod.website-files.com/6aa2f01db4428565d18e0d69/6aa9543371fe64d443598c6e_cg-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(https://cdn.prod.website-files.com/6aa2f01db4428565d18e0d69/6aa954334ba132c45768a7ce_cg-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url(https://cdn.prod.website-files.com/6aa2f01db4428565d18e0d69/6aa954331f13a76bb8c66521_cg-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url(https://cdn.prod.website-files.com/6aa2f01db4428565d18e0d69/6aa954336f7dc1db9c6afb38_cg-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(https://cdn.prod.website-files.com/6aa2f01db4428565d18e0d69/6aa954331f13a76bb8c66521_cg-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(https://cdn.prod.website-files.com/6aa2f01db4428565d18e0d69/6aa954336f7dc1db9c6afb38_cg-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(https://cdn.prod.website-files.com/6aa2f01db4428565d18e0d69/6aa954331f13a76bb8c66521_cg-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(https://cdn.prod.website-files.com/6aa2f01db4428565d18e0d69/6aa954336f7dc1db9c6afb38_cg-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant SC';font-style:normal;font-weight:400;font-display:swap;src:url(https://cdn.prod.website-files.com/6aa2f01db4428565d18e0d69/6aa95470c319e3b94afbdaa4_csc-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant SC';font-style:normal;font-weight:400;font-display:swap;src:url(https://cdn.prod.website-files.com/6aa2f01db4428565d18e0d69/6aa954334ba132c45768a7f0_csc-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant SC';font-style:normal;font-weight:500;font-display:swap;src:url(https://cdn.prod.website-files.com/6aa2f01db4428565d18e0d69/6aa95470be2b3fa8bc7df8b6_csc-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant SC';font-style:normal;font-weight:500;font-display:swap;src:url(https://cdn.prod.website-files.com/6aa2f01db4428565d18e0d69/6aa95470adea701adc460efa_csc-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url(https://cdn.prod.website-files.com/6aa2f01db4428565d18e0d69/6aa954715e99cfd8223ce512_jost-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url(https://cdn.prod.website-files.com/6aa2f01db4428565d18e0d69/6aa954059740ae2b8dfad89c_jost-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
--green:#0D3328;--green-deep:#092A21;--green-rule:#2A5445;
--ivory:#F4EFE6;--ivory-deep:#EAE3D4;--paper-line:#D9D0BE;
--gold:#A98B55;--gold-text:#7A6134;--gold-soft:#C9B27E;--gold-line:rgba(169,139,85,.55);
--ink:#101B17;--ink-soft:#4B5750;
--serif:"Cormorant Garamond","Adobe Garamond Pro",Garamond,"Times New Roman",serif;
--sc:"Cormorant SC","Cormorant Garamond",Garamond,serif;
--sans:"Jost","Futura","Avenir Next",Arial,sans-serif;
--gutter:clamp(1.4rem,5vw,5.5rem);
--ease:cubic-bezier(.19,.72,.22,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--green);color:var(--ivory)}
a{color:inherit}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
p{margin:0 0 1.2rem}
p:last-child{margin-bottom:0}
img{max-width:100%}
/* paper grain */
.grain{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.055;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,")}
/* ---------- type roles ---------- */
.sc{font-family:var(--sc);font-weight:500;font-size:0.78rem;letter-spacing:0.32em;text-transform:lowercase;color:var(--gold);line-height:1.6}
/* the ornamental gold is 2.8:1 on ivory — below AA for text this small. Small caps on light
grounds use a darker gold (5.1:1 on ivory, 4.6:1 on the deeper paper); the ornament,
the rules and the mark keep the house gold unchanged. */
.sc:not(.light):not(.dim){color:var(--gold-text)}
.sc.dim{color:var(--ink-soft)}
.sc.light{color:var(--gold-soft)}
.display{font-family:var(--serif);font-weight:300;line-height:1.02;letter-spacing:-0.005em;margin:0;text-wrap:balance}
.display i{font-style:italic;font-weight:300}
.xl{font-size:clamp(2.9rem,7vw,7.2rem)}
.lg{font-size:clamp(2.2rem,4.6vw,4.8rem)}
.md{font-size:clamp(1.7rem,2.9vw,2.7rem)}
.lede{font-family:var(--serif);font-size:1.5rem;line-height:1.36;font-weight:400;margin:0 0 1.4rem;text-wrap:balance}
.txt{color:var(--ink-soft);font-size:1.03rem;line-height:1.7}
.txt.dc::first-letter{font-family:var(--serif);font-weight:400;font-size:4.2rem;line-height:.8;float:left;color:var(--gold);padding:0.45rem 0.7rem 0 0}
.statement{font-family:var(--serif);font-weight:300;font-style:italic;font-size:1.6rem;line-height:1.38;text-wrap:balance;margin:0}
.more{display:inline-flex;align-items:center;gap:0.9rem;font-family:var(--sc);font-weight:500;font-size:0.8rem;letter-spacing:0.3em;text-transform:lowercase;text-decoration:none;color:var(--green);margin-top:1.8rem}
.more::after{content:"";width:2.4rem;height:1px;background:var(--gold);transition:width .6s var(--ease)}
.more:hover::after{width:4rem}
.more.light{color:var(--ivory)}
.rule{border:0;border-top:1px solid var(--paper-line);margin:0}
.rule.double{height:4px;border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line)}
.orn{display:flex;align-items:center;gap:1rem;justify-content:center;color:var(--gold)}
.orn::before,.orn::after{content:"";flex:0 0 5rem;height:1px;background:var(--gold-line)}
.orn svg{width:16px;height:16px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.5rem;padding:0 var(--gutter)}
.frame{position:absolute;inset:1.2rem;border:1px solid rgba(201,178,126,.45);pointer-events:none;z-index:2}
/* ---------- preloader ---------- */
#veil{animation:veil-failsafe 0s linear 8s forwards;position:fixed;inset:0;z-index:100;background:var(--ivory);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1.6rem;transition:opacity .9s var(--ease),visibility .9s}
#veil.gone{opacity:0;visibility:hidden}
@keyframes veil-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
/* the entry screen carries the same lockup as the foot of the site: the wordmark
with the mark seated in the O of DOHA, held still */
#veil .wmwrap{width:min(72vw,420px);animation:fadein 1.1s .1s var(--ease) both}
#veil .wmk{fill:var(--ink)}
#veil .vo{position:absolute;left:10.381%;top:67.790%;width:10.788%;aspect-ratio:1;height:auto;transform:translateY(-50%);display:block;color:var(--gold)}
#veil .vo .mark{width:100%;height:100%;display:block;overflow:visible}
#veil .vo .ring{animation:none}
#veil .vo path{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
@keyframes draw{to{stroke-dashoffset:0}}
#veil .name{font-family:var(--serif);font-size:1rem;letter-spacing:0.5em;text-transform:uppercase;color:var(--green);opacity:0;animation:fadein 1.2s .9s var(--ease) forwards;padding-left:.5em}
@keyframes fadein{to{opacity:1}}
#curtain{position:fixed;inset:0;z-index:90;background:var(--green-deep);transform:translateY(100%);pointer-events:none;visibility:hidden}
#curtain.run{visibility:visible}
#curtain.run{animation:wipe 1.25s var(--ease) forwards}
@keyframes wipe{0%{transform:translateY(100%)}45%{transform:translateY(0)}55%{transform:translateY(0)}100%{transform:translateY(-100%)}}
/* ---------- cursor ---------- */
#cur{position:fixed;left:0;top:0;width:34px;height:34px;border:1px solid var(--gold);border-radius:50%;pointer-events:none;z-index:120;transform:translate(-50%,-50%);transition:width .35s var(--ease),height .35s var(--ease),opacity .3s,background .3s;opacity:0;mix-blend-mode:multiply}
#cur.on{opacity:.9}#cur.big{width:64px;height:64px;background:rgba(169,139,85,.12)}
@media (pointer:coarse){#cur{display:none}}
/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:20;transition:background .5s,border-color .5s,transform .6s var(--ease);border-bottom:1px solid transparent}
header.solid{background:rgba(244,239,230,.92);backdrop-filter:blur(8px);border-bottom-color:var(--paper-line)}
header.solid .bar{color:var(--ink)}
header.solid nav a{color:var(--ink-soft)}
header.solid nav a:hover,header.solid nav a[aria-current="page"]{color:var(--green)}
header.solid .brand svg use{stroke:var(--gold)}
header .bar{display:flex;align-items:center;justify-content:space-between;padding:1.35rem var(--gutter);color:var(--ivory)}
.brand{display:flex;align-items:center;gap:1rem;text-decoration:none}
.brand svg{width:32px;height:32px}
.brand span{font-family:var(--serif);font-size:0.95rem;letter-spacing:0.42em;text-transform:uppercase}
nav{display:flex;gap:2.4rem}
nav a{font-family:var(--sc);font-weight:500;font-size:0.94rem;letter-spacing:0.24em;text-transform:lowercase;text-decoration:none;color:#E4E9E4;position:relative;padding:4px 0;transition:color .3s}
@media (max-width:1320px){nav{gap:1.6rem}nav a{font-size:.82rem;letter-spacing:.18em}}
nav a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:1px;background:var(--gold);transition:left .45s var(--ease),right .45s var(--ease)}
nav a:hover::after,nav a[aria-current="page"]::after{left:0;right:0}
.menubtn{display:none}
/* ---------- pages ---------- */
.page{display:none}
.page.active{display:block}
/* ---------- motion ---------- */
:where(html.dc-js) .rv{transform:translateY(30px);transition:transform 1.3s var(--ease)}
.rv.in{transform:none}
.lines{overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.lines .ln{display:block;transition:transform 1.75s var(--ease)}
:where(html.dc-js) .lines .ln{transform:translateY(112%)}
.lines.in .ln{transform:none}
.lines .ln:nth-child(2){transition-delay:.62s}.lines .ln:nth-child(3){transition-delay:1.1s}.lines .ln:nth-child(4){transition-delay:1.4s}.lines .ln:nth-child(5){transition-delay:1.7s}
.hrule{height:1px;background:var(--gold);width:0;margin:1.8rem 0 0;transition:width 2.1s var(--ease);transition-delay:1.3s}
.lines.in + .hrule,.in .hrule{width:min(26rem,42%)}
.mask{overflow:hidden;position:relative;background:var(--green-deep)}
.mask img,.mask .bg{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.12);transition:transform 2.2s var(--ease)}
.mask{transition:clip-path 1.6s var(--ease)}
:where(html.dc-js) .mask{clip-path:inset(0 0 100% 0)}
.mask.in{clip-path:inset(0 0 0 0)}
.mask.in img,.mask.in .bg{transform:scale(1)}
.mask:hover img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.rv,.lines .ln,.mask,.mask img{transform:none !important;clip-path:none !important;transition:none !important}#veil,#curtain{display:none}.hero-img.kb{animation:none !important}}
/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;display:grid;grid-template-rows:1fr auto;overflow:hidden;background:var(--green-deep);color:var(--ivory)}
.hero.short{min-height:72vh}
.hero-img{position:absolute;inset:-10% 0 -10% 0;background-size:cover;background-position:center;will-change:transform}
.hero-img.kb{animation:kenburns 17s cubic-bezier(.16,.68,.28,1) forwards}
/* Home hero motion field: the video covers the still beneath it, so if autoplay is refused,
the file fails, or motion is not wanted, the poster/still remains and nothing is lost. */
#p-home .hero > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
@media (prefers-reduced-motion:reduce){#p-home .hero > video{display:none}}
@keyframes kenburns{from{scale:1.075;translate:0 -0.9%}to{scale:1;translate:0 0.9%}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,42,33,.5) 0%,rgba(9,42,33,.08) 40%,rgba(9,42,33,.62) 100%)}
.hero .top,.hero .bottom{position:relative;z-index:3}
.hero .top{display:flex;justify-content:space-between;padding:6.6rem var(--gutter) 0}
.hero .bottom{display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.5rem;align-items:end;padding:3rem var(--gutter) 3.6rem}
.hero h1{grid-column:1 / span 9}
.hero .hrule{grid-column:1 / span 9;margin:1.4rem 0 .2rem}
.hero .aside{grid-column:10 / span 3;font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.1rem;line-height:1.55;color:#DDE4DE;margin:0 0 .4rem}
.hero .chapter{position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;gap:.6rem}
.hero .chapter b{font-family:var(--serif);font-weight:300;font-size:clamp(3.4rem,8vw,8rem);color:var(--gold-soft);line-height:1}
.hero.short h1{grid-column:2 / span 10}
.scrollcue{position:absolute;right:var(--gutter);bottom:2.2rem;z-index:3;width:1px;height:4rem;background:linear-gradient(var(--gold-soft),transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.35;transform:scaleY(.6);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}
/* ---------- home ---------- */
.intro{padding:8rem var(--gutter) 7rem;position:relative}
.intro .orn{grid-column:1 / -1;margin-bottom:4rem}
.intro .display{grid-column:2 / span 10;text-align:center}
.intro .cols{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.5rem;margin-top:4.5rem}
.intro .c1{grid-column:2 / span 4}
.intro .c2{grid-column:7 / span 4}
.intro .c2 .more{margin-top:1.2rem}
.figures{padding:2rem var(--gutter) 8rem}
.figures .fhead{grid-column:1 / span 6;margin-bottom:3.5rem}
.figures .figs{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--gold-line);border-left:1px solid var(--paper-line)}
.figures .fig{padding:2.6rem 2rem 2.4rem 0;border-bottom:1px solid var(--paper-line);border-right:1px solid var(--paper-line);padding-left:2rem;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.1rem;min-height:14rem}
.figures .fig b{font-family:var(--serif);font-weight:300;font-size:clamp(2.8rem,5.2vw,5rem);line-height:.95;color:var(--green);letter-spacing:-0.01em;font-variant-numeric:lining-nums}
.figures .fig b small{font-size:.42em;color:var(--gold);margin-left:.15em;letter-spacing:.02em}
.figures .fig .sc{text-transform:none;letter-spacing:.06em;font-size:.95rem;line-height:1.5;max-width:22ch;margin-left:auto;margin-right:auto;font-family:var(--serif);font-weight:400}
.figures .fsrc{grid-column:1 / -1;font-family:var(--sans);font-size:.6rem;letter-spacing:.06em;color:var(--ink-soft);margin-top:1.4rem;text-align:right}
@media (max-width:1100px){.figures .figs{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.figures .fhead{grid-column:1 / -1}.figures .figs{grid-template-columns:1fr 1fr}.figures .fig{min-height:0;padding:1.6rem 1rem 1.6rem 1rem}}
@media (max-width:560px){.figures .figs{grid-template-columns:1fr}}
/* ---------- vision 2030 ---------- */
.vision{background:var(--green);color:var(--ivory);padding:8rem 0 7.5rem;position:relative;overflow:hidden}
.vision::before{content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:0;height:1px;background:linear-gradient(90deg,var(--gold),rgba(169,139,85,0))}
.vwm{position:absolute;right:-34%;top:-60%;width:min(62vw,900px);height:auto;color:var(--gold-soft);opacity:.6;pointer-events:none}
.vision .grid{position:relative;z-index:1;align-items:start}
.vhead{grid-column:1 / span 4;position:relative;padding-top:.4rem;padding-bottom:1rem}
.vhead .display{font-size:clamp(2rem,3.4vw,3.1rem)}
.vbody{grid-column:5 / span 5;max-width:33rem}
.vbody .lede{color:var(--ivory);font-style:italic;font-weight:300;font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.3;padding-bottom:1.6rem;border-bottom:1px solid rgba(201,178,126,.28);margin-bottom:1.8rem}
.vbody .txt{color:#C2CDC5;font-size:1.06rem;line-height:1.75}
.vbody .txt + .txt{margin-bottom:0}
.vfig{font-family:var(--serif);font-weight:400;font-style:normal;font-size:1.32em;color:var(--gold-soft);letter-spacing:-0.005em;white-space:nowrap;font-variant-numeric:lining-nums}
@media (max-width:900px){.vision{padding:5rem 0}.vhead,.vbody{grid-column:1 / -1}.vbody{margin-top:2.2rem;max-width:none}.vwm{width:120vw;right:-46%;top:-30%;opacity:.3}}
/* ---------- the record ---------- */
.record{background:var(--ivory-deep);padding:5.5rem var(--gutter) 5rem;row-gap:0}
.rhead{grid-column:1 / span 5;margin-bottom:3rem}
.rhead .display{font-size:clamp(1.9rem,3vw,2.7rem)}
.rfigs{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--gold-line)}
.rfig{padding:2rem 2rem 2rem 0;display:flex;flex-direction:column;gap:1rem;border-bottom:1px solid var(--paper-line)}
.rfig + .rfig{border-left:1px solid var(--paper-line);padding-left:2rem}
.rfig b{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,4vw,3.6rem);line-height:.95;color:var(--green);letter-spacing:-0.01em;font-variant-numeric:lining-nums}
.rfig b small{font-size:.42em;color:var(--gold);margin-left:.12em;letter-spacing:.02em}
.rlab{font-family:var(--serif);font-weight:400;font-size:.98rem;line-height:1.5;color:var(--ink-soft);max-width:28ch}
.rnote{grid-column:1 / span 8;margin:3rem 0 0;font-family:var(--serif);font-weight:300;font-style:italic;font-size:1.2rem;line-height:1.5;color:var(--green);text-wrap:pretty}
@media (max-width:900px){.record{padding:4rem var(--gutter)}.rhead{grid-column:1 / -1}.rfigs{grid-template-columns:1fr 1fr}.rfig{padding:1.6rem 1rem 1.4rem 0}.rfig:nth-child(3){border-left:none;padding-left:0;border-top:1px solid var(--paper-line);padding-top:1.6rem}.rfig:nth-child(4){border-top:1px solid var(--paper-line);padding-top:1.6rem}.rnote{grid-column:1 / -1;font-size:1.05rem}}
@media (max-width:560px){.rfigs{grid-template-columns:1fr}.rfig + .rfig{border-left:none;padding-left:0;border-top:1px solid var(--paper-line);padding-top:1.6rem}}
.strip{background:var(--green-deep);color:var(--ivory);padding:6rem 0 5rem;overflow:hidden}
.strip .head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.5rem;padding:0 var(--gutter);align-items:end;margin-bottom:3rem}
.strip .head .display{grid-column:1 / span 8;color:var(--ivory)}
.strip .head .more{grid-column:10 / span 3;justify-self:end;margin:0}
.rail{display:flex;gap:1.5rem;padding:0 var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab}
.rail::-webkit-scrollbar{display:none}
.rail .item{flex:0 0 min(62vw,560px);scroll-snap-align:start}
.rail .mask{aspect-ratio:4/5}
.rail .cap{display:flex;justify-content:space-between;align-items:baseline;margin-top:1rem}
.rail .cap .display{font-size:1.9rem;color:var(--ivory)}
.rail .cap .sc{color:var(--gold-soft)}
.strip .note{padding:3rem var(--gutter) 0;color:#C2CDC5;max-width:40rem;font-size:1rem}
.three{padding:8rem var(--gutter) 7rem;position:relative}
.three .display{grid-column:1 / span 7;position:relative;z-index:1}
.three .ringbig{position:absolute;right:calc(var(--gutter) - 3vw);top:3rem;width:min(28vw,360px);opacity:.8}
.three .row{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.5rem;margin-top:4.5rem;border-top:1px solid var(--paper-line)}
.three .row{grid-template-columns:repeat(5,1fr)}
.three .st{grid-column:span 1;padding:2rem 1.2rem 0 0}
.three .st + .st{border-left:1px solid var(--paper-line);padding-left:1.6rem}
.three .st h3{font-family:var(--serif);font-weight:400;font-size:1.55rem;margin:.6rem 0 .7rem;line-height:1.1}
.three .st p{font-size:.92rem;line-height:1.62;color:var(--ink-soft);margin:0}
@media (max-width:1100px){.three .row{grid-template-columns:repeat(3,1fr)}.three .st:nth-child(4),.three .st:nth-child(5){border-top:1px solid var(--paper-line);padding-top:1.6rem}.three .st:nth-child(4){border-left:0;padding-left:0}}
.three .lk{grid-column:1 / -1}
.maj{padding:2rem var(--gutter) 8rem}
.maj{align-items:center}
.maj .mask{grid-column:1 / span 5;aspect-ratio:4/5}
.maj .card{grid-column:7 / span 6;background:var(--ivory);padding:0;margin-top:0;position:relative;z-index:1;align-self:center}
.maj .card .lede{font-size:clamp(1.6rem,2.3vw,2.1rem);line-height:1.3;max-width:86%;margin-bottom:1.7rem}
.maj .card .txt{font-size:1.06rem;line-height:1.75}
.maj .card .rule.double{margin-bottom:2rem}
.lead{padding:6rem var(--gutter) 8rem}
.lead .orn{grid-column:1 / -1;margin-bottom:5rem}
.lead .pp{display:grid;gap:1rem;align-self:start;align-content:start}
.lead .pa{grid-column:2 / span 4}
.lead .pb{grid-column:8 / span 4;margin-top:6rem}
.portrait{aspect-ratio:4/5;background:var(--ivory-deep);border:1px solid var(--paper-line);display:flex;align-items:center;justify-content:center;position:relative}
.portrait::after{content:"";position:absolute;inset:.7rem;border:1px solid var(--gold-line)}
.portrait span{font-family:var(--sc);font-size:.7rem;letter-spacing:.3em;color:var(--ink-soft)}
.portrait .pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.lead h3{font-family:var(--serif);font-weight:400;font-size:1.7rem;margin:0;line-height:1.15}
/* the two names link through to Leadership; a hairline that draws in on hover */
.lead h3 .nlk{color:inherit;text-decoration:none;background-image:linear-gradient(var(--gold),var(--gold));background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .55s var(--ease)}
.lead h3 .nlk:hover,.lead h3 .nlk:focus-visible{background-size:100% 1px}
.lead h3 .nlk:focus-visible{outline:1px solid var(--gold-line);outline-offset:.3rem}
.lead .lk{grid-column:2 / -1;margin-top:3rem}
.amb{position:relative;min-height:78vh;display:flex;align-items:center;overflow:hidden;background:var(--green-deep);color:var(--ivory)}
.amb .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.amb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,42,33,.4),rgba(9,42,33,.8))}
.amb .grid{position:relative;z-index:3;width:100%;padding-top:7rem;padding-bottom:7rem}
.amb .display{grid-column:2 / span 8;color:var(--ivory)}
.amb .tail{grid-column:10 / span 3;align-self:end;font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.3rem;color:var(--gold-soft);margin:0}
/* ---------- inner ---------- */
.block{padding:6.5rem var(--gutter)}
.block.green{background:var(--green);color:var(--ivory)}
.block.green .txt{color:#C2CDC5}
.block.green .lede{color:var(--ivory)}
.block.deep{background:var(--ivory-deep)}
.gov{list-style:none;margin:2.2rem 0 0;padding:0;border-top:1px solid var(--gold-line)}
.gov li{display:grid;grid-template-columns:12rem 1fr;column-gap:2rem;padding:1.35rem 0;border-bottom:1px solid var(--paper-line);align-items:baseline}
.gk{font-family:var(--sc);font-weight:500;font-size:.74rem;letter-spacing:.24em;text-transform:lowercase;color:var(--gold);line-height:1.6}
.gv{font-size:1rem;line-height:1.62;color:var(--ink-soft)}
@media (max-width:767px){.gov li{grid-template-columns:1fr;row-gap:.5rem}}
.span3{grid-column-end:span 3}.span4{grid-column-end:span 4}.span5{grid-column-end:span 5}.span6{grid-column-end:span 6}.span7{grid-column-end:span 7}.span8{grid-column-end:span 8}
.s1{grid-column-start:1}.s2{grid-column-start:2}.s3{grid-column-start:3}.s6{grid-column-start:6}.s7{grid-column-start:7}.s8{grid-column-start:8}.s9{grid-column-start:9}
.band{grid-column:1 / -1;display:flex;flex-wrap:wrap;border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line)}
.band span{flex:1 1 10rem;text-align:center;padding:2rem 1rem;font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1.05}
.band span + span{border-left:1px solid var(--paper-line)}
.ledger{list-style:none;margin:0;padding:0}
.ledger li{display:grid;grid-template-columns:8rem 1fr;gap:1.5rem;padding:1.2rem 0;border-top:1px solid var(--paper-line);font-size:1rem;line-height:1.55}
.ledger li:last-child{border-bottom:1px solid var(--paper-line)}
.ledger .k{font-family:var(--serif);font-size:1.35rem;line-height:1.25}
.ledger .v{color:var(--ink-soft)}
.stairs{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.5rem;row-gap:4rem}
.step{grid-column:span 6;border-top:1px solid var(--gold-line);padding-top:1.4rem}
.step:nth-child(2){grid-column:4 / span 6}.step:nth-child(3){grid-column:7 / span 6}
.step h3{font-family:var(--serif);font-weight:400;font-size:2rem;margin:.5rem 0 .8rem;line-height:1.1}
.step p{font-size:1rem;line-height:1.65;color:var(--ink-soft);margin:0}
.disc{list-style:none;margin:0;padding:0;grid-column:1 / -1}
.disc li{display:grid;grid-template-columns:4rem 10rem 1fr;gap:1.6rem;padding:1.7rem 0;border-top:1px solid var(--green-rule);align-items:baseline}
.disc li:last-child{border-bottom:1px solid var(--green-rule)}
.disc .num{font-family:var(--serif);font-weight:300;font-size:1.9rem;color:var(--gold-soft);line-height:1}
.disc .v{font-size:1.05rem;line-height:1.62;color:#D3DBD5;max-width:40rem}
.block.deep .disc li{border-color:var(--paper-line)}.block.deep .disc .num{color:var(--gold)}.block.deep .disc .v{color:var(--ink-soft)}.block.deep .disc .sc.light{color:var(--gold)}
.card{border-top:1px solid var(--gold-line);padding-top:1.4rem}
/* h2 on /corridors (the page's subdivisions under its h1), h3 elsewhere. Identical rendering either way. */
.card :is(h2,h3){font-family:var(--serif);font-weight:400;font-size:2rem;margin:.5rem 0 .8rem;line-height:1.05}
.card p{font-size:1rem;line-height:1.62;color:var(--ink-soft);margin:0}
.box{border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line);padding:2.2rem 0}
.overlap{grid-column:6 / span 7;margin-top:-8rem;position:relative;z-index:1;background:var(--ivory);padding:3rem 0 0 3rem}
.contact{background:var(--green);color:var(--ivory);padding:3rem;position:relative}
.contact::after{content:"";position:absolute;inset:.8rem;border:1px solid rgba(201,178,126,.4);pointer-events:none}
.contact p{color:#D3DBD5;font-size:1.05rem;line-height:1.7}
.contact a{font-family:var(--sc);font-size:.9rem;letter-spacing:.14em;color:var(--ivory);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:3px}
.next{padding:3.4rem var(--gutter) 6.5rem;margin-top:2rem;align-items:baseline;row-gap:1rem;position:relative}
.next::before{content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:0;height:1px;background:var(--paper-line)}
.next .tl{grid-column:1 / span 3;align-self:baseline}
.nlink{grid-column:4 / -1;display:flex;align-items:baseline;gap:1.6rem;text-decoration:none;color:var(--ink);font-family:var(--serif);font-weight:300;font-size:clamp(2rem,4vw,3.4rem);line-height:1.05}
.nlink i{font-style:italic}
.nlink::after{content:"";flex:1;height:1px;background:var(--gold-line);transform-origin:left;transition:transform .9s var(--ease)}
.nlink:hover::after{transform:scaleX(.96)}
.nlink .arr{flex:0 0 auto;font-family:var(--sans);font-weight:300;font-size:.55em;letter-spacing:.2em;color:var(--gold);transition:transform .7s var(--ease)}
.nlink:hover .arr{transform:translateX(.5rem)}
@media (max-width:767px){.next .tl,.nlink{grid-column:1 / -1}}
.siderail{position:fixed;left:1.4rem;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;font-family:var(--sc);font-size:.7rem;letter-spacing:.4em;color:var(--gold);opacity:0;transition:opacity .6s;z-index:15;pointer-events:none}
.siderail.on{opacity:.9}
footer{background:var(--green-deep);color:var(--ivory);padding:4rem 0 2.5rem;border-top:1px solid var(--gold-line)}
footer .grid{row-gap:1.5rem;align-items:end}
footer .colophon{grid-column:1 / span 5}
footer .colophon .name{font-family:var(--serif);letter-spacing:.42em;text-transform:uppercase;font-size:.9rem;margin:0 0 .8rem}
footer .colophon p{font-family:var(--sc);font-size:.78rem;letter-spacing:.22em;color:#9DB0A6;margin:0;line-height:1.9}
footer .legal{grid-column:7 / span 6;font-family:var(--sans);font-size:.8rem;font-weight:300;line-height:1.75;letter-spacing:.03em;color:#7D9188;margin:0;text-align:right;text-wrap:balance}
@media (max-width:900px){
body{font-size:18px}
nav{display:none}
/* If dc.js never runs, the menu button cannot open the nav and a phone visitor is left
with no way through the site. html.dc-js is set by the head script and removed by the
6s failsafe, so :not(.dc-js) covers both "JavaScript off" and "the script failed". */
html:not(.dc-js) header{position:static;background:var(--green-deep)}
html:not(.dc-js) header .bar{flex-wrap:wrap;row-gap:.9rem}
html:not(.dc-js) nav{display:flex;flex-wrap:wrap;gap:.7rem 1.3rem;width:100%;justify-content:flex-start}
html:not(.dc-js) nav a{font-size:.74rem;letter-spacing:.14em}
html:not(.dc-js) .menubtn{display:none}
html:not(.dc-js) .hero .top,html:not(.dc-js) .hero .chapter{padding-top:2rem}
html.navopen,html.navopen body{overflow:hidden}
nav.open{display:flex;position:fixed;inset:0;background:var(--green-deep);flex-direction:column;align-items:center;justify-content:center;gap:1.8rem}
nav.open a{font-size:1rem;color:var(--ivory) !important}
.menubtn{display:block;background:none;border:0;color:inherit;font-family:var(--sc);font-size:.8rem;letter-spacing:.3em;position:relative;z-index:30;cursor:pointer;padding:1px 6px;text-align:center;line-height:normal}
.frame{inset:.8rem}
.hero{min-height:86vh}
.hero .top{padding-top:5.4rem}
.hero .bottom{grid-template-columns:1fr;padding-bottom:3rem}
.hero h1,.hero .aside,.hero .hrule,.hero.short h1{grid-column:1}
.hero .aside{margin-top:1.2rem}
/* the chapter marker joins the flow at the top of the hero here, so it must clear the
fixed header — 6.6rem covers even the narrow widths where the wordmark wraps to two lines */
.hero .chapter{position:static;transform:none;padding:6.6rem var(--gutter) 0;flex-direction:row;align-items:baseline;gap:1rem}
.hero .chapter + .top{padding-top:1.4rem}
/* when the grid collapses, a block following a ledger sits right under its closing rule */
.ledger + div{margin-top:2.4rem}
/* a label introducing a ledger needs room before the table starts */
.sc + .ledger{margin-top:2.6rem !important}
/* Leadership: portrait and biography stack here, so they need the same separation
the home page uses for the same arrangement */
#p-leadership .block.grid > div + div{margin-top:2.5rem}
/* The Circle stacks a heading column above its body column here; without this the
heading runs straight into the first line of text */
#p-circle .block.grid > div + div{margin-top:2.2rem}
.hero .chapter b{font-size:3rem}
.scrollcue{display:none}
.intro .display,.intro .c1,.intro .c2{grid-column:1 / -1}
.intro .cols{row-gap:1.5rem}
.strip .head{grid-template-columns:1fr;row-gap:1.5rem}
.strip .head .display,.strip .head .more{grid-column:1;justify-self:start}
.rail .item{flex-basis:78vw}
.three .display{grid-column:1 / -1}.three .ringbig{display:none}
.three .row{grid-template-columns:1fr !important}/* stacked here, so the space below the text should match the space above the number */.three .st{grid-column:1;padding:1.6rem 0 !important}
.three .st + .st{border-left:0;border-top:1px solid var(--paper-line)}
.maj .mask,.maj .card{grid-column:1 / -1}.maj .card{margin-top:0;padding:2rem 0 0}
.lead .pa,.lead .pb{grid-column:1 / -1;margin-top:0}.lead .pb{margin-top:2.5rem}.lead .lk{grid-column:1 / -1}
.amb .display,.amb .tail{grid-column:1 / -1}.amb .tail{margin-top:1.4rem}
.span3,.span4,.span5,.span6,.span7,.span8{grid-column:1 / -1 !important}
.step,.step:nth-child(2),.step:nth-child(3){grid-column:1 / -1}
.disc li{grid-template-columns:3rem 1fr}.disc .v{grid-column:1 / -1}
.overlap{grid-column:1 / -1;margin-top:0;padding:2rem 0 0}
.band span{flex:1 1 100%}.band span + span{border-left:0;border-top:1px solid var(--paper-line)}
.siderail{display:none}
footer .colophon,footer .legal{grid-column:1 / -1;text-align:left}
}
/* ================= v7 : movement ================= */
/* technical label — sans, for precision registers */
.tl{font-family:var(--sans);font-weight:400;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);line-height:1.6;display:block}
.tl:not(.light){color:var(--gold-text)}
.tl.light{color:var(--gold-soft)}
.tl.dim{color:var(--ink-soft)}
/* the living circle */
.dcring{display:block;width:100%;height:auto;overflow:visible}
.dcring circle{fill:none;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
.dct{stroke:var(--gold-line);stroke-width:.45;opacity:.22}
.dcp{stroke:var(--gold);stroke-width:1.5;stroke-dasharray:276.46;stroke-dashoffset:276.46;transition:stroke-dashoffset 1.1s var(--ease)}
.dcring .tick{stroke:var(--gold-line);stroke-width:.5}
.dcring.on-light .dct{stroke:rgba(201,178,126,.28)}
.dcring.on-light .dcp{stroke:var(--gold-soft)}
.dcring.on-light .tick{stroke:rgba(201,178,126,.3)}
/* method — scroll-driven sequence */
.mseq{padding:7rem var(--gutter) 3rem;align-items:start}
.mstick{grid-column:1 / span 4;position:sticky;top:20vh;align-self:start}
.mstick .display{margin-top:.9rem}
.mring{width:min(13rem,60%);margin:3rem 0 2.4rem}
.mnav{list-style:none;margin:0;padding:0;border-top:1px solid var(--paper-line)}
.mnav li{display:flex;align-items:baseline;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--paper-line);cursor:pointer;opacity:.35;transition:opacity .6s var(--ease)}
.mnav li.on{opacity:1}
.mnav .n{font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;color:var(--gold);width:2rem;flex:0 0 2rem}
.mnav .t{font-family:var(--serif);font-size:1.24rem;line-height:1.2}
.msteps{grid-column:6 / span 7}
.mstep{min-height:62vh;display:flex;flex-direction:column;justify-content:center;opacity:.22;transition:opacity .8s var(--ease)}
.mstep.on{opacity:1}
/* h2 on /method (the five stages are that page's subdivisions), h3 on the home page where an h2 already sits above them. */
.mstep :is(h2,h3){font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.4vw,3rem);margin:.8rem 0 1.2rem;line-height:1.06}
.mstep p{font-family:var(--sans);font-weight:300;font-size:1.02rem;line-height:1.78;color:var(--ink-soft);margin:0;max-width:38rem;letter-spacing:.002em}
.mstep .bar{width:0;height:1px;background:var(--gold);margin-bottom:1.6rem;transition:width 1.3s var(--ease)}
.mstep.on .bar{width:5.5rem}
.mfinal{background:var(--green-deep);color:var(--ivory);padding:9rem var(--gutter);position:relative;overflow:hidden}
.mfinal p{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1.9rem,4.2vw,3.6rem);line-height:1.16;margin:0;max-width:22ch;text-wrap:balance}
.mfinal .tl{margin-bottom:2rem}
@media (max-width:900px){.mseq{padding-top:4rem}.mstick{grid-column:1 / -1;position:static}.mring{width:8rem;margin:2rem 0 1.6rem}.msteps{grid-column:1 / -1;margin-top:2.5rem}.mstep{min-height:0;padding:2.6rem 0;opacity:1}.mfinal{padding:5rem var(--gutter)}}
/* corridors — interactive state */
.cstage{position:relative;min-height:86vh;display:flex;flex-direction:column;justify-content:flex-end;background:var(--green-deep);color:var(--ivory);overflow:hidden}
.cimgs{position:absolute;inset:0}
.cimg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s var(--ease),scale 9s var(--ease);scale:1.06}
.cimg.on{opacity:1;scale:1}
.cshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,42,33,.55) 0%,rgba(9,42,33,.25) 34%,rgba(9,42,33,.92) 88%)}
.cbody{position:relative;z-index:2;padding:0 var(--gutter) 2.6rem;min-height:19rem;display:flex;align-items:flex-end}
.cpanel[aria-hidden="true"]{visibility:hidden}
.cpanel{position:absolute;left:var(--gutter);right:var(--gutter);bottom:2.6rem;opacity:0;transform:translateY(14px);transition:opacity .75s var(--ease),transform .75s var(--ease),visibility .75s;pointer-events:none}
.cpanel.on{opacity:1;transform:none}
.cpanel .cl{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.24;margin:1rem 0 1.4rem;max-width:30ch;color:var(--ivory)}
.csec{list-style:none;display:flex;flex-wrap:wrap;gap:2.2rem;margin:0;padding:0}
.csec li{font-family:var(--sans);font-weight:300;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft)}
.cnames{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(201,178,126,.32)}
.cname{appearance:none;background:none;border:0;border-left:1px solid rgba(201,178,126,.16);padding:1.5rem 1rem;font-family:var(--serif);font-weight:300;font-size:clamp(1rem,1.5vw,1.35rem);color:rgba(244,239,230,.5);cursor:pointer;text-align:left;padding-left:var(--gutter);position:relative;transition:color .5s var(--ease);line-height:1.15}
.cname:first-child{border-left:0}
.cname::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--gold);transition:width .7s var(--ease)}
.cname.on{color:var(--ivory)}
.cname.on::after{width:100%}
@media (max-width:767px){.cstage{min-height:74vh}.cnames{grid-template-columns:1fr 1fr}.cname{padding:1.1rem .9rem;border-top:1px solid rgba(201,178,126,.16)}.cbody{min-height:22rem}}
/* the reach — corridor diagram */
.reach{background:var(--green);color:var(--ivory);padding:7rem var(--gutter) 6.5rem;overflow:hidden}
.rhd{grid-column:1 / span 4}
.rmap{grid-column:6 / span 7;margin-top:1rem}
.rmap svg{width:100%;height:auto;overflow:visible}
.gl{fill:none;stroke:rgba(201,178,126,.16);stroke-width:.22}
.disc circle{fill:none;stroke:rgba(201,178,126,.5);stroke-width:.3}
.disc circle + circle{stroke:rgba(201,178,126,.18);stroke-width:.2}
.pf{fill:none;stroke:rgba(201,178,126,.28);stroke-width:.25}
.pf rect{stroke:rgba(201,178,126,.16)}
.pt{font-family:var(--sc);font-size:3px;letter-spacing:.6px;text-transform:lowercase;fill:rgba(201,178,126,.75)}
.cmp{fill:none;stroke:rgba(201,178,126,.45);stroke-width:.25}
.cmp path + path{fill:rgba(201,178,126,.12)}
.arc{fill:none;stroke:var(--gold-soft);stroke-width:.45;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:var(--L,400);transition:stroke-dashoffset 2.6s var(--ease)}
.arc2{fill:none;stroke:rgba(201,178,126,.6);stroke-width:.35;stroke-dasharray:.5 1.5;opacity:0;transition:opacity 1.4s var(--ease) 2s}
.in .arc{stroke-dashoffset:0}
.in .arc2{opacity:1}
.in .arc.a2{transition-delay:.5s}.in .arc.a3{transition-delay:1s}
.nd{opacity:0;transition:opacity 1s var(--ease)}
.nd .nr{fill:none;stroke:var(--gold-soft);stroke-width:.3}
.nd .nc{fill:var(--gold-soft)}
.nd.doha .nr{stroke:var(--gold)}
.nd.doha .nc{fill:var(--gold)}
.in .nd{opacity:1}
.in .nd.n2{transition-delay:1.6s}.in .nd.n3{transition-delay:2.1s}.in .nd.n4{transition-delay:2.6s}
.nl{font-family:var(--sc);font-size:3.1px;letter-spacing:.7px;text-transform:lowercase;fill:var(--ivory);opacity:0;transition:opacity 1s var(--ease)}
.ns{font-family:var(--sans);font-weight:300;font-size:1.7px;letter-spacing:.45px;text-transform:uppercase;fill:rgba(201,178,126,.8);opacity:0;transition:opacity 1s var(--ease)}
.in .nl,.in .ns{opacity:1}
.in .nl.n2,.in .ns.n2{transition-delay:1.8s}.in .nl.n3,.in .ns.n3{transition-delay:2.3s}.in .nl.n4,.in .ns.n4{transition-delay:2.8s}
.nl.doha{fill:var(--gold-soft);font-size:3.8px;letter-spacing:.9px}
.rlegend{margin-top:2.4rem;max-width:34rem}
.rleg2{margin-top:1.1rem}
@media (max-width:900px){.reach{padding:4.5rem var(--gutter)}.rhd,.rmap{grid-column:1 / -1}.rmap{margin-top:2.5rem}}
/* ================= the living circle ================= */
#living{position:fixed;left:0;top:0;z-index:18;pointer-events:none;opacity:0;transition:opacity .9s var(--ease);color:var(--gold);will-change:transform,width,height}
#living.vis{opacity:1}
#living.light{color:var(--gold-soft)}
#living .mark{width:100%;height:100%;display:block;overflow:visible}
.mark .ring{transform-box:view-box;transform-origin:603px 598px;animation:spin 52s linear infinite}
#living:not(.vis) .ring{animation-play-state:paused}
.mark .r2{animation-duration:67s;animation-direction:reverse}
.mark .r3{animation-duration:44s}
.mark .r4{animation-duration:78s;animation-direction:reverse}
.mark .r5{animation-duration:59s}
.mark path{fill:none;stroke:currentColor;stroke-linecap:round;transition:opacity 1.3s var(--ease)}
@keyframes spin{to{transform:rotate(360deg)}}
#living[data-p="0"] .ring path{opacity:.14}
#living[data-p="1"] .r2 path,#living[data-p="1"] .r3 path,#living[data-p="1"] .r4 path,#living[data-p="1"] .r5 path{opacity:.14}
#living[data-p="2"] .r3 path,#living[data-p="2"] .r4 path,#living[data-p="2"] .r5 path{opacity:.14}
#living[data-p="3"] .r4 path,#living[data-p="3"] .r5 path{opacity:.14}
#living[data-p="4"] .r5 path{opacity:.14}
#living.still .ring{animation-play-state:paused}
.brand svg{transition:opacity 1.2s var(--ease)}
body.landed .brand svg{opacity:0}
.cslot{width:var(--s,120px);height:var(--s,120px);pointer-events:none;display:block}
@media (max-width:767px){.cslot{width:var(--m,var(--s,120px));height:var(--m,var(--s,120px))}}
.hero .cslot{position:absolute;left:68%;top:35%;transform:translate(-50%,-50%);z-index:3}
.intro .cslot{grid-column:1 / -1;justify-self:center;margin-bottom:3.4rem}
.figures .cslot{grid-column:10 / span 2;justify-self:end;align-self:start;margin-bottom:3rem}
.vhead .cslot{margin-top:2.8rem}
.beyond{display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.5rem;align-items:center;margin:4rem var(--gutter) 0;padding-top:2.4rem;border-top:1px solid rgba(201,178,126,.28)}
.beyond .tl{grid-column:1 / span 3}
.beyond p{grid-column:4 / span 6;margin:0;font-size:1rem;line-height:1.7;color:#C2CDC5}
.beyond .cslot{grid-column:11 / span 2;justify-self:end}
@media (max-width:900px){.beyond{grid-template-columns:1fr;row-gap:1rem}.beyond .tl,.beyond p,.beyond .cslot{grid-column:1}.beyond .cslot{justify-self:start}}
.strip{position:relative}
.three .cslot{position:absolute;right:calc(var(--gutter) - 1vw);top:3rem}
.maj .card{position:relative}
.maj .card .cslot{position:absolute;right:0;top:1.4rem}
.mring .cslot{--s:200px;--m:120px}
.cname .cslot{position:absolute;left:calc(var(--gutter) - 2.2rem);top:50%;transform:translateY(-50%);--s:1.5rem;--m:1.2rem}
@media (max-width:900px){.figures .cslot{grid-column:1 / -1;justify-self:start;margin-bottom:2rem}.three .cslot{position:static;grid-column:1 / -1;margin-bottom:2rem}}
/* the card gains 2rem of top padding once it stacks, so the mark must come down with it
to stay centred on the label rather than sitting across the rule */
@media (max-width:900px){.maj .card .cslot{top:3.4rem}}
@media (max-width:767px){.cname .cslot{display:none}.maj .card .cslot{right:0;top:3.95rem}}
/* closing wordmark */
.close{padding:9rem var(--gutter) 8rem;text-align:center;background:var(--ivory);overflow:hidden}
.close .cst{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.35;color:var(--green);max-width:30ch;margin:0 auto 3.4rem;text-wrap:balance}
.close .cru{width:3.5rem;height:1px;background:var(--gold);margin:0 auto 3.2rem}
.close .tl{margin-bottom:3rem}
.wm{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,8.6vw,8rem);letter-spacing:.16em;line-height:1;margin:0;color:var(--ink);white-space:nowrap}
.wm .the{display:block;font-family:var(--sc);font-size:.34em;letter-spacing:.5em;margin-bottom:.5em;color:var(--ink-soft)}
.cslot.o{display:inline-block;width:.76em;height:.76em;vertical-align:-0.04em;margin:0 .05em 0 .02em}
@media (max-width:767px){.close{padding:6rem var(--gutter) 5rem;overflow:hidden}.wmwrap{width:min(80vw,420px)}}
@media (prefers-reduced-motion:reduce){.mark .ring{animation:none}}
/* ================= the case ================= */
.kase{padding:6.5rem var(--gutter);align-items:start}
.kase .kn{grid-column:1 / span 2;font-family:var(--serif);font-weight:300;font-size:clamp(3rem,6vw,5.4rem);line-height:.9;color:var(--gold);margin-top:-.4rem}
.kase .kh{grid-column:3 / span 5}
.kase .kh .display{margin-top:.9rem}
.kase .kb{grid-column:3 / span 6;margin-top:2.4rem}
.kase .kf{grid-column:9 / span 4;border-left:1px solid var(--gold-line);padding-left:2rem;align-self:start;display:grid;row-gap:2.2rem}
.kf b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,4.6vw,4.2rem);line-height:.95;letter-spacing:-.01em;font-variant-numeric:lining-nums}
.kf b small{font-size:.42em;color:var(--gold);margin-left:.1em}
.kf > div > span{display:block;font-family:var(--sans);font-weight:300;font-size:.86rem;line-height:1.55;color:var(--ink-soft);margin-top:.5rem;max-width:22ch}
.kase.green{background:var(--green);color:var(--ivory)}
.kase.green .kn{color:var(--gold-soft)}
.kase.green .kf{border-left-color:rgba(201,178,126,.35)}
.kase.green .kf b{color:var(--ivory)}
.kase.green .kf span{color:#C2CDC5}
.kase.green .txt{color:#C2CDC5}
.kase.green .lede{color:var(--ivory)}
.kase.deep{background:var(--ivory-deep)}
.kase .kq{grid-column:3 / span 8;margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--paper-line);font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.25rem;line-height:1.5;color:var(--green)}
.cfg{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--gold-line);margin-top:3rem}
.cfg > div{padding:2.4rem 2rem 2.2rem 0;border-bottom:1px solid var(--paper-line);display:flex;flex-direction:column;gap:.9rem;min-height:15rem}
.cfg > div:nth-child(3n+2),.cfg > div:nth-child(3n+3){border-left:1px solid var(--paper-line);padding-left:2rem}
.cfg b{font-family:var(--serif);font-weight:300;font-size:clamp(3rem,5.4vw,5rem);line-height:.92;color:var(--green);letter-spacing:-.01em;font-variant-numeric:lining-nums}
.cfg b small{font-size:.42em;color:var(--gold);margin-left:.12em}
.cfg p{margin:0;font-family:var(--serif);font-size:1rem;line-height:1.5;color:var(--ink);max-width:24ch}
.cfg .src{font-family:var(--sans);font-weight:300;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:auto}
.kgap{background:var(--green-deep);color:var(--ivory);padding:9rem var(--gutter);text-align:center;position:relative}
.kgap .cslot{margin:0 auto 3rem}
.kgap .display{color:var(--ivory);max-width:20ch;margin:0 auto}
.kgap .txt{color:#C2CDC5;max-width:34rem;margin:2rem auto 0}
.srcs{padding:2.5rem var(--gutter) 0;font-family:var(--sans);font-weight:300;font-size:.66rem;letter-spacing:.06em;line-height:1.8;color:var(--ink-soft);max-width:70rem}
@media (max-width:900px){.kase{padding:4.5rem var(--gutter)}.kase .kn,.kase .kh,.kase .kb,.kase .kf,.kase .kq{grid-column:1 / -1}.kase .kn{font-size:2.6rem;margin-bottom:.6rem}.kase .kf{border-left:0;border-top:1px solid var(--gold-line);padding:2rem 0 0;margin-top:2.4rem;grid-template-columns:1fr 1fr;column-gap:1.5rem}.cfg{grid-template-columns:1fr 1fr}.cfg > div{min-height:0;padding:1.6rem 1rem 1.6rem 0}.cfg > div:nth-child(n){border-left:0;padding-left:0}.cfg > div:nth-child(2n){border-left:1px solid var(--paper-line);padding-left:1rem}/* the figure table already closes with a rule here; a second full-width rule above the
closing line read as a duplicate, so the closing line takes the short gold mark instead */
.kase .kq{border-top:0;padding-top:0;margin-top:2.2rem}.kase .kq::before{content:"";display:block;width:4rem;height:1px;background:var(--gold);margin-bottom:1.5rem}.kgap{padding:5rem var(--gutter)}}
@media (max-width:560px){.cfg{grid-template-columns:1fr}.cfg > div:nth-child(2n){border-left:0;padding-left:0}.kase .kf{grid-template-columns:1fr}}
/* single column here, so each figure reads better centred in its own band */
@media (max-width:560px){
.cfg > div{align-items:center;text-align:center;padding-left:0;padding-right:0}
.cfg p{margin-left:auto;margin-right:auto}
}
/* the other two figure blocks collapse to one column at this width too */
@media (max-width:560px){
.kase .kf > div{text-align:center}
.kase .kf p,.kase .kf span{margin-left:auto;margin-right:auto}
.rfigs .rfig{text-align:center}
.rfigs .rfig .rlab{margin-left:auto;margin-right:auto}
}
.mtr{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);column-gap:2.5rem;margin-top:3.5rem;border-top:1px solid rgba(201,178,126,.3)}
.mtr > div{padding-top:1.8rem}
.mtr > div + div{border-left:1px solid rgba(201,178,126,.18);padding-left:2.5rem}
.mtr p{margin:.9rem 0 0;font-size:1rem;line-height:1.7;color:#C2CDC5}
.mtr p i{color:var(--ivory)}
@media (max-width:900px){.mtr{grid-template-columns:1fr;row-gap:2rem}.mtr > div + div{border-left:0;padding-left:0;border-top:1px solid rgba(201,178,126,.18);padding-top:2rem}}
.ctri{display:grid;grid-template-columns:repeat(3,1fr);column-gap:1.5rem;padding:0 var(--gutter)}
.ct{display:block;text-decoration:none;color:inherit}
.ct .mask{aspect-ratio:4/3;margin-bottom:1.3rem}
.ct .cn{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.1;color:var(--ivory);margin:.5rem 0 .4rem}
.ct .cd{display:block;font-family:var(--sans);font-weight:300;font-size:.8rem;letter-spacing:.04em;line-height:1.55;color:#C2CDC5}
.ct .mask img{transition:transform 1.6s var(--ease)}
.ct:hover .mask img{transform:scale(1.03)}
@media (max-width:767px){.ctri{grid-template-columns:1fr;row-gap:2.4rem}}
.wmwrap{position:relative;width:min(46vw,520px);margin:0 auto}
.wmk{display:block;width:100%;height:auto;fill:var(--ink)}
.wmwrap .cslot.o{position:absolute;aspect-ratio:1;height:auto;transform:translateY(-50%);margin:0;display:block}
/* webflow */
.page{display:block}
body{margin:0}
/* ---- Moved out of the site-wide head