/* Sie: editorial page kit for inner pages. Built only from the homepage's tokens, type and rules. */
:root{--logo:url(../img/logo.png);--logo-ratio:681 / 424}
body.inner{background:var(--charcoal)}
.grain{z-index:50}
main{overflow:clip}

/* reveal, same easing and distance as the homepage hero */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity 1.1s var(--ease), transform 1.1s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.12s}.js .rv.d2{transition-delay:.24s}.js .rv.d3{transition-delay:.36s}
.draw{transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--ease)}
.draw.in,.no-js .draw{transform:scaleX(1)}

/* hero */
.page-hero{min-height:88svh;display:flex;align-items:flex-end;padding-top:150px;padding-bottom:clamp(56px,10vh,110px);position:relative}
.page-hero.short{min-height:72svh}
.eyebrow{font-family:var(--serif);font-style:italic;color:var(--champagne);font-size:18px;margin:0 0 22px;letter-spacing:.01em}
.light .eyebrow{color:var(--ink-soft)}
.page-hero .display{font-size:clamp(2.9rem,7vw,6.6rem);max-width:12.5em}
.page-hero .lede{margin-top:30px}
.page-hero .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

/* the gold line, as in the intro */
.goldline{height:1px;background:linear-gradient(90deg,rgba(232,207,158,0),#E8CF9E 12%,#F3E2BF 50%,#E8CF9E 88%,rgba(232,207,158,0));box-shadow:0 0 14px rgba(232,207,158,.35)}
.stage-index{position:relative;margin-top:clamp(56px,9vh,96px)}
.stage-index ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
.stage-index li{padding-top:22px;position:relative}
.stage-index li::before{content:"";position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--charcoal);border:1px solid var(--champagne)}
.stage-index a{text-decoration:none;display:grid;gap:2px}
.stage-index .n{font-family:var(--serif);font-style:italic;color:var(--stone);font-size:15px}
.stage-index .w{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.05;transition:color .4s var(--ease)}
.stage-index a:hover .w{color:var(--champagne)}

/* sections */
.sec{padding:clamp(90px,14vh,160px) 0;position:relative;z-index:2;border-top:1px solid var(--rule-dark)}
.sec.light{border-top-color:var(--rule-light)}
.sec.tight{padding:clamp(70px,10vh,120px) 0}
.sec-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end;margin-bottom:clamp(48px,8vh,96px)}
.sec-head .display{font-size:clamp(2.5rem,5.2vw,4.8rem)}
.sec-head .lede + .lede{margin-top:16px}
.prose{max-width:34em}
.prose p{margin:0 0 18px;color:rgba(236,228,213,.82)}
.light .prose p{color:var(--ink-soft)}
.prose p:last-child{margin-bottom:0}
.prose .lead{font-family:var(--serif);font-style:italic;font-size:clamp(1.35rem,2vw,1.65rem);line-height:1.3;color:var(--cream)}
.light .prose .lead{color:var(--ink)}
@media (max-width:860px){.sec-head{grid-template-columns:1fr;align-items:start}}

/* stage chapters (How we work) */
.stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(32px,6vw,96px);align-items:end;margin-bottom:clamp(56px,9vh,110px)}
.stage .n{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--champagne)}
.light .stage .n{color:var(--ink-soft)}
.stage .big{font-family:var(--serif);font-weight:300;font-size:clamp(5rem,15vw,13rem);line-height:.82;letter-spacing:-.02em;margin:6px 0 0}
.gate{display:flex;gap:18px;align-items:baseline;border-top:1px solid var(--rule-dark);padding-top:18px;margin-top:clamp(48px,8vh,88px)}
.light .gate{border-top-color:var(--rule-light)}
.gate dt{font-family:var(--serif);font-style:italic;color:var(--stone);font-size:17px;white-space:nowrap}
.gate dd{margin:0;font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.25}
@media (max-width:860px){.stage{grid-template-columns:1fr;align-items:start}.gate{flex-direction:column;gap:4px}}

/* ruled index list */
.index{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,56px)}
.index li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:baseline;border-top:1px solid var(--rule-dark);padding:12px 0 14px}
.light .index li{border-top-color:var(--rule-light)}
.index i{font-family:var(--serif);color:var(--stone);font-size:15px}
.index b{font-weight:400;display:block}
.index span{display:block;font-size:15px;color:rgba(236,228,213,.66);margin-top:2px;line-height:1.5}
.light .index span{color:var(--ink-soft)}
.index.one{grid-template-columns:1fr}
@media (max-width:600px){.index{grid-template-columns:1fr}}

/* Read composition */
.read-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start;margin-top:clamp(56px,9vh,100px)}
.plan-fig{margin:0}
.plan-fig svg{width:100%;height:auto;display:block;overflow:visible}
.plan-fig figcaption{font-size:14px;color:var(--ink-soft);margin-top:14px;border-top:1px solid var(--rule-light);padding-top:10px}
.questions{list-style:none;margin:0;padding:0}
.questions li{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.18;padding:16px 0;border-top:1px solid var(--rule-light);color:var(--ink)}
.questions li:last-child{border-bottom:1px solid var(--rule-light)}
@media (max-width:900px){.read-grid{grid-template-columns:1fr}}

/* svg drawing defaults */
.dw{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.dw .wall{stroke-width:3.2}
.dw .thin{stroke-width:1}
.dw .hair{stroke-width:.7;opacity:.6}
.dw .route{stroke:var(--champagne);stroke-width:1.6;stroke-dasharray:2 6}
.light .dw .route{stroke:#A98B57}
.dw text{stroke:none;fill:currentColor;font-family:var(--serif);font-style:italic;font-size:15px}
.dw .dot{fill:var(--champagne);stroke:none}
.light .dw .dot{fill:#A98B57}
.dw .route-draw{stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 3s var(--ease)}
.dw.in .route-draw,.no-js .dw .route-draw{stroke-dashoffset:0}

/* Resolve sequence */
.sequence{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);position:relative}
.sequence li{display:grid;gap:14px;align-content:start}
.sequence .frame{aspect-ratio:4/5;border:1px solid var(--rule-dark);position:relative;overflow:hidden;color:rgba(236,228,213,.85);display:grid;place-items:center;background:rgba(255,255,255,.012)}
.sequence .frame svg{width:82%;height:auto}
.sequence .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sequence .frame .stamp{position:absolute;left:10px;bottom:10px;font-family:var(--serif);font-style:italic;font-size:14px;color:var(--charcoal);background:var(--champagne);padding:3px 10px;border-radius:999px}
.sequence .cap{position:relative;padding-top:18px}
.sequence .cap::before{content:"";position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--charcoal);border:1px solid var(--champagne);z-index:1}
.sequence .cap b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(1.35rem,1.9vw,1.75rem);line-height:1.1}
.sequence .cap span{display:block;font-size:14px;color:rgba(236,228,213,.62);margin-top:4px;line-height:1.45}
.sequence li:not(:last-child) .cap::after{content:"";position:absolute;left:9px;right:calc(-1 * clamp(12px,1.6vw,24px));top:0;height:1px;background:rgba(232,207,158,.6);transform-origin:left;transition:transform 1.4s var(--ease) .3s}
.js .sequence li.rv .cap::after{transform:scaleX(0)}.js .sequence li.rv.in .cap::after{transform:scaleX(1)}
@media (max-width:1000px){.sequence{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px}.sequence li .cap::after{display:none}}
@media (max-width:560px){.sequence{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* struck list (pre-construction) */
.struck{list-style:none;margin:0;padding:0}
.struck li{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,4.4vw,3.8rem);line-height:1.12;padding:8px 0;color:var(--ink)}
/* the strike is drawn on the text itself, so it follows every line when a phrase wraps */
.struck li span{background:linear-gradient(currentColor,currentColor) no-repeat 0 58%/0% 1px;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em;transition:background-size 1.2s var(--ease)}
.struck li.in span,.no-js .struck li span{background-size:100% 1px}
.struck li:nth-child(2) span{transition-delay:.15s}.struck li:nth-child(3) span{transition-delay:.3s}.struck li:nth-child(4) span{transition-delay:.45s}.struck li:nth-child(5) span{transition-delay:.6s}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.two.mid{align-items:center}
@media (max-width:860px){.two{grid-template-columns:1fr}}

/* pull quote */
.pull{font-family:var(--serif);font-weight:300;font-size:clamp(2.1rem,4.6vw,4.2rem);line-height:1.08;margin:0;max-width:18em}
.pull em{font-style:italic}
.pull-wrap{padding:clamp(90px,16vh,180px) 0;border-top:1px solid var(--rule-dark);position:relative;z-index:2}
.pull-wrap .rule{width:min(240px,40vw);margin-bottom:34px}

/* photography */
.ph{position:relative;overflow:hidden;margin:0;background:#1a1816}
.ph img{width:100%;height:100%;object-fit:cover}
.ph.tall{aspect-ratio:4/5}.ph.wide{aspect-ratio:16/10}.ph.pano{aspect-ratio:21/9}
.ph.par img{height:118%;transform:translateY(var(--py,0));will-change:transform}
.ph figcaption,.cap-under{font-size:14px;color:var(--stone);margin-top:12px}
figure.ph + figcaption{margin-top:12px}
.zoom{cursor:zoom-in}
.bleed{position:relative;z-index:2}
.bleed .ph{aspect-ratio:21/9;max-height:86svh;width:100%}
@media (max-width:720px){.bleed .ph{aspect-ratio:4/3}}

/* Deliver */
.deliver-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
@media (max-width:900px){.deliver-grid{grid-template-columns:1fr}}

/* Visibility ledger */
.ledger{border-top:1px solid var(--ink);margin:0}
.ledger div{display:grid;grid-template-columns:minmax(150px,.7fr) minmax(0,2fr);gap:24px;border-bottom:1px solid var(--rule-light);padding:18px 0 20px;align-items:baseline}
.ledger dt{font-family:var(--serif);font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.1}
.ledger dd{margin:0;color:var(--ink-soft);max-width:34em}
@media (max-width:600px){.ledger div{grid-template-columns:1fr;gap:4px}}

/* Sustain timeline */
.sustain{background:#1B1A17}
.tl{position:relative;margin-top:clamp(40px,8vh,90px)}
.tl-row{display:grid;grid-template-columns:1fr 2fr 2fr;position:relative}
.tl-pt{position:relative}
.tl-pt .top{height:clamp(5.6rem,14.5vw,12.8rem);display:flex;align-items:flex-end}
.tl-pt .num{font-family:var(--serif);font-weight:300;font-size:clamp(6.5rem,17vw,15rem);line-height:.85;letter-spacing:-.03em;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;color:var(--cream)}
.tl-pt .num.sm{font-size:clamp(1.6rem,2.6vw,2.2rem);font-style:italic;color:var(--champagne);letter-spacing:0;line-height:1}
.tl-pt .rail{position:relative;height:9px;margin-top:22px}
.tl-pt .rail::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:linear-gradient(90deg,#E8CF9E,#F3E2BF);box-shadow:0 0 12px rgba(232,207,158,.35);transform-origin:left;transition:transform 1.6s var(--ease) .2s}
.tl-pt:last-child .rail::before{background:linear-gradient(90deg,#E8CF9E,rgba(232,207,158,0))}
.js .tl-pt.rv .rail::before{transform:scaleX(0)}
.js .tl-pt.rv.in .rail::before{transform:scaleX(1)}
.tl-pt .rail i{position:absolute;left:0;top:0;width:9px;height:9px;border-radius:50%;background:var(--champagne);z-index:1}
.tl-pt .lbl{display:block;font-family:var(--serif);font-style:italic;color:var(--champagne);font-size:17px;margin-top:20px}
.tl-pt ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px;font-size:16px;color:rgba(236,228,213,.85)}
.tl-pt ul li::before{content:"";display:inline-block;width:14px;height:1px;background:var(--champagne);vertical-align:middle;margin-right:10px}
.tl-pt p{margin:10px 0 0;font-size:16px;color:rgba(236,228,213,.75);max-width:16em;padding-right:20px}
@media (max-width:760px){
  .tl-row{grid-template-columns:1fr;gap:44px;border-left:1px solid rgba(232,207,158,.55);padding-left:26px;margin-left:4px}
  .tl-pt .top{height:auto}
  .tl-pt .rail{position:absolute;left:-31px;top:auto;bottom:auto;margin:0;height:9px}
  .tl-pt .rail::before{display:none}
  .tl-pt .rail i{top:0}
  .tl-pt:first-child .rail{top:8px}
  .tl-pt:not(:first-child) .rail{top:calc(clamp(6.5rem,17vw,15rem) * .5)}
}

/* comparison (About) */
.compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);margin-top:clamp(48px,8vh,90px)}
.compare h3{font-family:var(--serif);font-style:italic;font-weight:300;font-size:18px;color:var(--stone);margin:0 0 26px;padding-bottom:12px;border-bottom:1px solid var(--rule-dark)}
.compare .sie h3{color:var(--champagne)}
.frag{position:relative}
.frag svg{width:100%;height:auto;display:block;color:rgba(236,228,213,.5)}
.frag svg text{font-family:var(--serif);font-weight:300;font-style:normal;font-size:26px;fill:rgba(236,228,213,.62)}
.frag svg text.you{font-style:italic;fill:var(--cream)}
.frag svg .x{stroke:rgba(236,228,213,.28);stroke-width:1;stroke-dasharray:3 5;fill:none}
.frag svg .down{stroke:rgba(236,228,213,.35);stroke-width:1;fill:none}
.one-line{position:relative;padding-left:34px}
.one-line::before{content:"";position:absolute;left:4px;top:14px;bottom:14px;width:1px;background:linear-gradient(#E8CF9E,#F3E2BF 50%,#E8CF9E);box-shadow:0 0 12px rgba(232,207,158,.35)}
.one-line .who{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,3.6vw,3.2rem);line-height:1;margin:0 0 6px}
.one-line ol{list-style:none;margin:0;padding:0}
.one-line li{font-family:var(--serif);font-weight:300;font-size:26px;line-height:1.2;padding:9px 0;position:relative}
.one-line li::before{content:"";position:absolute;left:-34px;top:20px;width:9px;height:9px;border-radius:50%;background:var(--champagne)}
.one-line .you{font-style:italic;color:var(--cream);margin-top:18px;padding-top:16px;border-top:1px solid var(--rule-dark)}
.one-line .you::before{background:var(--charcoal);border:1px solid var(--champagne)}
.compare p.note{font-size:15px;color:rgba(236,228,213,.62);margin:26px 0 0;max-width:30em}
@media (max-width:860px){.compare{grid-template-columns:1fr}}

/* System (What we do) */
.system{list-style:none;margin:0;padding:0 0 0 44px;position:relative}
.system::before{content:"";position:absolute;left:6px;top:14px;bottom:14px;width:1px;background:var(--rule-light)}
.system .fill{position:absolute;left:6px;top:14px;width:1px;height:calc((100% - 28px) * var(--fill,0));background:var(--ink)}
.system li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(20px,4vw,64px);padding:0 0 clamp(36px,6vh,60px)}
.system li:last-child{padding-bottom:0}
.system li::before{content:"";position:absolute;left:-42px;top:14px;width:9px;height:9px;border-radius:50%;background:var(--linen);border:1px solid var(--ink);transition:background-color .4s}
.system li.on::before{background:var(--ink)}
.system .num{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink-soft)}
.system h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,2.8vw,2.5rem);line-height:1.08;margin:2px 0 0}
.system p{margin:0;color:var(--ink-soft)}
.system .pass{display:block;margin-top:12px;font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--ink);line-height:1.35}
.system .pass::before{content:"Passes on  ";font-style:normal;font-family:var(--sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--stone);margin-right:8px}
@media (max-width:760px){.system li{grid-template-columns:1fr;gap:8px}}
.chain{display:flex;flex-wrap:wrap;gap:6px 0;margin:clamp(40px,7vh,72px) 0 0;padding:18px 0 0;border-top:1px solid var(--rule-dark);list-style:none;font-family:var(--serif);font-size:clamp(1.15rem,1.7vw,1.5rem);color:rgba(236,228,213,.8)}
.chain li:not(:last-child)::after{content:"";display:inline-block;width:28px;height:1px;background:var(--champagne);vertical-align:middle;margin:0 14px}
.trio{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.trio li{border-top:1px solid var(--rule-dark);padding-top:20px}
.trio b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(1.7rem,2.5vw,2.2rem);line-height:1.12;margin-bottom:10px}
.trio span{color:rgba(236,228,213,.72);font-size:16px}
@media (max-width:860px){.trio{grid-template-columns:1fr}}

/* Projects list */
.cat{display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-top:1px solid var(--rule-dark);padding-top:16px;margin-bottom:clamp(40px,7vh,72px)}
.cat h2{font-family:var(--serif);font-weight:300;font-size:clamp(1.8rem,3vw,2.6rem);margin:0}
.cat p{margin:0;font-family:var(--serif);font-style:italic;color:var(--stone);font-size:17px}
.entry{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start;padding-bottom:clamp(72px,12vh,140px)}
.entry:nth-of-type(even){grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.entry:nth-of-type(even) .entry-img{order:2}
.entry-img{display:block;text-decoration:none}
.entry-img .ph{aspect-ratio:4/3}
.entry-img .ph img{transition:transform 1.6s var(--ease)}
.entry-img:hover .ph img{transform:scale(1.03)}
.entry-strip{display:flex;gap:8px;margin-top:10px}
.entry-strip img{width:72px;height:50px;object-fit:cover;opacity:.7}
.entry .idx{font-family:var(--serif);font-style:italic;color:var(--champagne);font-size:17px}
.entry h3{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,4vw,3.6rem);line-height:1;margin:6px 0 14px}
.entry h3 a{text-decoration:none}
.entry .line{color:rgba(236,228,213,.82);margin:0 0 24px}
.facts{margin:0;display:grid;gap:0}
.facts div{display:grid;grid-template-columns:130px 1fr;gap:16px;border-top:1px solid var(--rule-dark);padding:10px 0}
.light .facts div{border-top-color:var(--rule-light)}
.facts dt{font-family:var(--serif);font-style:italic;color:var(--stone);font-size:16px}
.facts dd{margin:0;font-size:15px}
.entry .more{margin-top:26px;color:var(--champagne)}
@media (max-width:900px){.entry,.entry:nth-of-type(even){grid-template-columns:1fr}.entry:nth-of-type(even) .entry-img{order:0}}

/* placeholders: visible while drafting, hidden when html.publish is set in site.js */
.ph-text{font-family:var(--serif);font-style:italic;color:var(--stone);border-bottom:1px dashed rgba(140,132,118,.6)}
.ph-text::before{content:"To confirm";font-family:var(--sans);font-style:normal;font-size:10px;letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(140,132,118,.6);border-radius:999px;padding:1px 7px;margin-right:8px;vertical-align:2px}
.publish [data-ph]{display:none!important}

/* Case study */
.cs-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:150px 0 clamp(48px,9vh,96px);z-index:2}
.cs-hero .bg{position:absolute;inset:0;overflow:hidden}
.cs-hero .bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.cs-hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(34,32,29,.6) 0%,rgba(34,32,29,.08) 26%,rgba(34,32,29,.55) 52%,rgba(34,32,29,.94) 82%,#22201D 100%)}
.cs-hero .eyebrow,.cs-hero .lede{text-shadow:0 1px 16px rgba(0,0,0,.6)}
.cs-hero .wrap{position:relative;width:100%}
.cs-hero .display{font-size:clamp(3.2rem,9vw,8rem);text-shadow:0 2px 40px rgba(0,0,0,.35)}
.cs-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:clamp(32px,6vh,56px) 0 0;border-top:1px solid var(--rule-dark);padding-top:16px}
.cs-facts dt{font-family:var(--serif);font-style:italic;color:var(--stone);font-size:15px}
.cs-facts dd{margin:4px 0 0;font-size:15px}
@media (max-width:760px){.cs-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.chap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:clamp(28px,5vw,80px);align-items:start}
.chap .no{position:sticky;top:110px}
.chap .no b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(3.6rem,7vw,6rem);line-height:.9;color:var(--champagne)}
.light .chap .no b{color:var(--ink)}
.chap .no span{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2vw,1.8rem);margin-top:8px}
.chap .q{font-family:var(--serif);font-style:italic;color:var(--stone);font-size:17px;margin:0 0 18px}
.chap .body .display{font-size:clamp(2rem,3.6vw,3.2rem);line-height:1.08;margin-bottom:24px}
@media (max-width:860px){.chap{grid-template-columns:1fr}.chap .no{position:static}}
.pair{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(12px,1.6vw,24px);margin-top:clamp(40px,7vh,72px);align-items:end}
.pair .ph{aspect-ratio:4/3}
.pair .ph:last-child{aspect-ratio:4/5}
@media (max-width:700px){.pair{grid-template-columns:1fr}.pair .ph:last-child{aspect-ratio:4/3}}
.swatch-row{display:flex;height:clamp(90px,14vh,140px);margin:clamp(32px,5vh,48px) 0 0}
.swatch-row i{flex:1}
.mat-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
.mat-list li{border-top:1px solid var(--rule-light);padding:12px 0;font-family:var(--serif);font-size:1.35rem}
@media (max-width:600px){.mat-list{grid-template-columns:1fr}}
.crop{aspect-ratio:1/1;overflow:hidden;position:relative}
.crop img{position:absolute;width:260%;max-width:none;height:auto;left:var(--cx,-60%);top:var(--cy,-40%)}
.seqgal{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.seqgal figure{margin:0;min-width:0}
.seqgal .g-full{grid-column:1/-1}.seqgal .g-full .ph{aspect-ratio:21/9}
.seqgal .g-half{grid-column:span 3}.seqgal .g-half .ph{aspect-ratio:4/3}
.seqgal .g-wide{grid-column:span 4}.seqgal .g-wide .ph{aspect-ratio:4/3}
.seqgal .g-narrow{grid-column:span 2}.seqgal .g-narrow .ph{aspect-ratio:2/3.05}
.seqgal figcaption{font-size:14px;color:var(--stone);margin-top:10px}
@media (max-width:700px){.seqgal{grid-template-columns:1fr}.seqgal figure{grid-column:1/-1!important}.seqgal .ph{aspect-ratio:4/3!important}}
.after{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.after > div{border-top:1px solid var(--rule-dark);padding-top:16px}
.after b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(4rem,9vw,7rem);line-height:.9;color:var(--cream)}
.after b small{font-size:.24em;font-style:italic;color:var(--champagne);margin-left:10px;letter-spacing:.02em}
.after p{margin:14px 0 0}
@media (max-width:700px){.after{grid-template-columns:1fr}}
.next-pj{display:flex;justify-content:space-between;align-items:end;gap:24px;text-decoration:none;padding:clamp(70px,12vh,130px) 0;border-top:1px solid var(--rule-dark)}
.next-pj .display{font-size:clamp(2.6rem,6vw,5.4rem);transition:color .4s var(--ease)}
.next-pj:hover .display{color:var(--champagne)}

/* CTA band */
.cta-band{padding:clamp(100px,16vh,180px) 0;border-top:1px solid var(--rule-dark);position:relative;z-index:2}
.cta-band .display{font-size:clamp(2.8rem,5.6vw,5rem)}
.cta-band .lede{margin-top:24px}
.cta-band .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.cta-band .fine{font-size:14px;color:var(--stone);margin:28px 0 0;max-width:30em}
.light .btn{border-color:var(--ink);background:var(--ink);color:var(--linen)}
.light .btn:hover{background:var(--charcoal-2)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}

/* ---------- Projects page: index, feature, mosaic, material board ---------- */
@property --tint{syntax:'<color>';inherits:true;initial-value:#22201D}
.pj-index{margin-top:clamp(48px,8vh,88px)}
.pj-index ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));border-top:1px solid var(--rule-dark)}
.pj-index a{display:grid;gap:3px;padding:16px 18px 6px 0;text-decoration:none;position:relative}
.pj-index a::before{content:"";position:absolute;left:0;right:18px;top:-1px;height:1px;background:var(--champagne);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.pj-index a:hover::before{transform:scaleX(1)}
.pj-index .n{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--champagne)}
.pj-index .nm{font-family:var(--serif);font-size:clamp(1.25rem,1.7vw,1.6rem);line-height:1.1}
.pj-index .st{font-size:13px;color:var(--stone)}
.pj-index .pal{display:flex;height:6px;margin-top:10px;max-width:140px}
.pj-index .pal i{flex:1}
@media (max-width:900px){.pj-index ol{display:flex;overflow-x:auto;gap:24px;scrollbar-width:none}.pj-index ol::-webkit-scrollbar{display:none}.pj-index li{flex:0 0 auto;min-width:150px}}

.pjf{position:relative;z-index:2;padding:clamp(90px,14vh,150px) 0;border-top:1px solid var(--rule-dark);background:linear-gradient(180deg,var(--charcoal) 0%,var(--tint) 48%,var(--charcoal) 100%)}
.pjf-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:end;margin-bottom:clamp(32px,5vh,56px)}
.pjf .count{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--champagne)}
.pjf-head .display{font-size:clamp(3.2rem,7.4vw,7rem);margin-top:6px}
.pjf-head .display a{text-decoration:none;transition:color .4s var(--ease)}
.pjf-head .display a:hover{color:var(--champagne)}
.pjf .style{margin:0 0 10px;font-family:var(--serif);font-style:italic;font-size:19px;color:var(--champagne)}
.pjf .meta{margin:16px 0 0;font-size:14px;letter-spacing:.03em;color:var(--stone)}
@media (max-width:860px){.pjf-head{grid-template-columns:1fr;align-items:start}}

.mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(8px,1vw,14px);height:clamp(420px,62vw,820px)}
.mosaic figure{margin:0;position:relative;overflow:hidden;background:#141210;min-width:0;min-height:0}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.mosaic figure:hover img{transform:scale(1.035)}
.mosaic figcaption{position:absolute;left:0;right:0;bottom:0;padding:36px 16px 12px;font-size:14px;color:var(--cream);background:linear-gradient(transparent,rgba(16,14,12,.72));opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.mosaic figure:hover figcaption,.mosaic figure:focus-visible figcaption{opacity:1;transform:none}
.m-main{grid-column:1/9;grid-row:1/3}
.m-a{grid-column:9/13;grid-row:1/2}
.m-b{grid-column:9/13;grid-row:2/3}
.flip .m-main{grid-column:5/13}
.flip .m-a,.flip .m-b{grid-column:1/5}
@media (max-width:760px){
  .mosaic{height:auto;grid-template-rows:auto auto}
  .m-main,.flip .m-main{grid-column:1/13;grid-row:1;aspect-ratio:4/3}
  .m-a,.flip .m-a{grid-column:1/7;grid-row:2;aspect-ratio:1/1}
  .m-b,.flip .m-b{grid-column:7/13;grid-row:2;aspect-ratio:1/1}
  .mosaic figcaption{display:none}
}

.board{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);margin-top:clamp(18px,3vh,28px);padding:clamp(24px,3vw,40px);border:1px solid var(--rule-dark);background:rgba(236,228,213,.025)}
.b-lbl{margin:0 0 16px;font-family:var(--serif);font-style:italic;font-size:16px;color:var(--stone);padding-bottom:10px;border-bottom:1px solid var(--rule-dark)}
.chips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.chips li{aspect-ratio:3/5;position:relative;box-shadow:inset 0 0 0 1px rgba(236,228,213,.08);transition:transform .5s var(--ease)}
.chips li:hover{transform:translateY(-6px)}
.chips span{position:absolute;left:8px;bottom:8px;font-size:11px;letter-spacing:.08em;opacity:.85}
.mats{list-style:none;margin:0;padding:0}
.mats li{display:grid;grid-template-columns:30px 1fr;align-items:baseline;font-family:var(--serif);font-size:clamp(1.25rem,1.6vw,1.45rem);line-height:1.2;padding:9px 0;border-bottom:1px solid var(--rule-dark)}
.mats i{font-size:13px;color:var(--stone)}
.spaces{margin:16px 0 0;font-size:14px;color:rgba(236,228,213,.72)}
.spaces span{display:block;font-family:var(--serif);font-style:italic;color:var(--stone);font-size:15px;margin-bottom:2px}
.b-need{display:flex;flex-direction:column}
.need{margin:0 0 28px;font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,1.7vw,1.55rem);line-height:1.35;color:var(--cream)}
.b-need .btn{align-self:flex-start;margin-top:auto}
@media (max-width:1000px){.board{grid-template-columns:1fr 1fr}.b-need{grid-column:1/-1}}
@media (max-width:640px){.board{grid-template-columns:1fr}.chips li{aspect-ratio:3/4}}


/* ---------- About: contents, lexicon, commitment, cause, sustainability, letters ---------- */
.about-toc{margin-top:clamp(44px,7vh,80px);border-top:1px solid var(--rule-dark);padding-top:18px}
.about-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px}
.about-toc a{text-decoration:none;font-size:14px;color:rgba(236,228,213,.78);display:inline-flex;gap:8px;align-items:baseline;padding:4px 0;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.about-toc a:hover,.about-toc a:focus-visible{color:var(--champagne);border-bottom-color:currentColor}
.about-toc i{font-family:var(--serif);color:var(--stone);font-size:13px}
.sec[id]{scroll-margin-top:70px}
.lexicon{margin:0;align-self:center;border-top:1px solid var(--rule-dark)}
.lexicon div{padding:26px 0 28px;border-bottom:1px solid var(--rule-dark)}
.lexicon dt{display:flex;align-items:baseline;gap:18px}
.lexicon .word{font-family:var(--serif);font-weight:300;font-size:clamp(4.4rem,9vw,7.5rem);line-height:.9}
.lexicon .word.lc{color:rgba(236,228,213,.55)}
.lexicon .pron{font-family:var(--serif);font-style:italic;color:var(--champagne);font-size:18px}
.lexicon dd{margin:10px 0 0;font-size:16px;color:rgba(236,228,213,.8)}
.lexicon dd i{display:block;font-family:var(--serif);color:var(--stone);font-size:15px;margin-bottom:2px}
.promise{margin:0;border-left:1px solid var(--champagne);padding-left:24px}
.promise p{margin:0;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.3;color:var(--cream)}
.promise cite{display:block;margin-top:14px;font-style:normal;font-size:13px;letter-spacing:.06em;color:var(--stone)}
.ledger.dark{border-top-color:var(--cream)}
.ledger.dark div{border-bottom-color:var(--rule-dark)}
.ledger.dark dd{color:rgba(236,228,213,.75)}
.cause-title{margin:22px 0 0;font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,2.4vw,2rem);color:var(--ink-soft)}
.trio.five{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:clamp(28px,5vh,48px)}
@media (max-width:860px){.trio.five{grid-template-columns:1fr}}
.sdg{margin:clamp(40px,7vh,64px) 0 0;padding-top:18px;border-top:1px solid var(--rule-dark);font-size:15px;color:rgba(236,228,213,.7);max-width:46em}
.letter-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(36px,6vw,110px);align-items:center}
.letter.light .letter-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr)}
.letter.light .portrait{order:2}
.portrait{margin:0}
.portrait .frame{aspect-ratio:4/5;border:1px solid var(--rule-dark);display:grid;place-items:center;position:relative;background:linear-gradient(160deg,rgba(236,228,213,.05),rgba(236,228,213,0))}
.letter.light .portrait .frame{border-color:var(--rule-light);background:linear-gradient(160deg,rgba(46,43,39,.05),rgba(46,43,39,0))}
.portrait .mono{font-family:var(--serif);font-weight:300;font-size:clamp(4rem,9vw,7rem);color:var(--champagne);opacity:.75;letter-spacing:.04em}
.letter.light .portrait .mono{color:var(--ink-soft)}
.portrait .note{position:absolute;left:16px;bottom:14px;font-family:var(--serif);font-style:italic;font-size:14px;color:var(--stone)}
.letter-body .display{font-size:clamp(2.5rem,5.2vw,4.8rem)}
.message{margin-top:28px;max-width:32em}
.message p{font-family:var(--serif);font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.45}
.sign{margin-top:36px;display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap;border-top:1px solid var(--rule-dark);padding-top:22px}
.letter.light .sign{border-top-color:var(--rule-light)}
.sig{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(2rem,3.4vw,2.8rem);line-height:1;color:var(--champagne);transform:rotate(-3deg);transform-origin:left bottom;letter-spacing:-.01em}
.letter.light .sig{color:#9C7F4E}
.sign .who{display:grid;gap:2px}
.sign .who b{font-weight:400;font-size:16px}
.sign .who span{font-size:14px;color:var(--stone)}
@media (max-width:860px){.letter-grid,.letter.light .letter-grid{grid-template-columns:1fr}.letter.light .portrait{order:0}.portrait .frame{aspect-ratio:1/1;max-width:420px}}

/* ---------- Services ---------- */
.sv-index{margin-top:clamp(48px,8vh,88px)}
.sv-index ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule-dark)}
.sv-index a{display:grid;gap:3px;padding:16px 18px 6px 0;text-decoration:none;position:relative}
.sv-index a::before{content:"";position:absolute;left:0;right:18px;top:-1px;height:1px;background:var(--champagne);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.sv-index a:hover::before,.sv-index a:focus-visible::before{transform:scaleX(1)}
.sv-index i{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--champagne)}
.sv-index b{font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,1.7vw,1.6rem);line-height:1.1}
.sv-index span{font-size:13px;color:var(--stone)}
@media (max-width:760px){.sv-index ol{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:8px}}
.sv-head{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(36px,6vh,64px)}
.sv-head .no{font-family:var(--serif);font-weight:300;font-size:clamp(3rem,6vw,5rem);line-height:.9;color:var(--champagne)}
.light .sv-head .no{color:var(--ink-soft)}
.sv-head .display{font-size:clamp(2.4rem,4.8vw,4.4rem)}
@media (max-width:900px){.sv-head{grid-template-columns:1fr;align-items:start;gap:14px}}
.sv-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule-dark);border-left:1px solid var(--rule-dark)}
.light .sv-grid{border-color:var(--rule-light)}
.sv-card{padding:clamp(24px,2.6vw,36px);border-right:1px solid var(--rule-dark);border-bottom:1px solid var(--rule-dark);display:flex;flex-direction:column;gap:12px;transition:background-color .5s var(--ease)}
.light .sv-card{border-color:var(--rule-light)}
.sv-card:hover{background:rgba(236,228,213,.035)}
.light .sv-card:hover{background:rgba(46,43,39,.035)}
.sv-ic{width:34px;height:34px;flex:none;fill:none;stroke:var(--champagne);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.light .sv-ic{stroke:#9C7F4E}
.sv-card h3{margin:18px 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(1.45rem,1.9vw,1.75rem);line-height:1.12}
.sv-card p{margin:0;font-size:15px;line-height:1.55;color:rgba(236,228,213,.72)}
.light .sv-card p{color:var(--ink-soft)}
@media (max-width:1000px){.sv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.sv-grid{grid-template-columns:1fr}.sv-card{min-height:0}}
.sv-more{justify-content:center;background:rgba(210,185,140,.05)}
.sv-more .q{font-family:var(--serif);font-style:italic;font-size:clamp(1.35rem,1.8vw,1.6rem);line-height:1.25;color:var(--cream)!important}
.light .sv-more .q{color:var(--ink)!important}
.sv-more .more{color:var(--champagne);align-self:flex-start;margin-top:6px}
.light .sv-more .more{color:#7A6238}
@media (max-width:1000px){.sv-more{grid-column:1/-1}}
.trio .sdg-li b{color:var(--champagne)}

/* founders: photo, quote, signature */
.portrait .frame.has-photo{background:#1a1816;overflow:hidden}
.portrait .frame.has-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:grayscale(1) contrast(1.02)}
blockquote.message{margin:28px 0 0;padding:0;max-width:32em;position:relative}
blockquote.message::before{content:"“";position:absolute;left:-.55em;top:-.32em;font-family:var(--serif);font-size:clamp(4rem,7vw,6rem);line-height:1;color:var(--champagne);opacity:.55}
.letter.light blockquote.message::before{color:#9C7F4E}
blockquote.message p{margin:0 0 16px;font-family:var(--serif);font-weight:300;font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.45}
blockquote.message p:last-child{margin-bottom:0}
.sig-img{display:block;width:clamp(200px,24vw,300px);aspect-ratio:1200/310;background:var(--champagne);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:left center;mask-position:left center}
.letter.light .sig-img{background:var(--ink)}
@media (max-width:860px){.portrait .frame.has-photo{aspect-ratio:4/5}blockquote.message::before{position:static;display:block;line-height:.7;height:.42em;margin-bottom:10px}}

/* large single photos, and a centred tall photo */
.seqgal .g-big{grid-column:1/-1}.seqgal .g-big .ph{aspect-ratio:3/2}
.seqgal .g-tallc{grid-column:2/6}.seqgal .g-tallc .ph{aspect-ratio:auto}.seqgal .g-tallc .ph img{height:auto}
@media (max-width:700px){.seqgal .g-tallc .ph{aspect-ratio:auto!important}}

/* gallery: section labels and portrait tiles */
.seqgal .gsec{grid-column:1/-1;margin:clamp(26px,4vw,52px) 0 0;padding-top:14px;border-top:1px solid var(--rule-dark);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--stone)}
.seqgal .gsec:first-child{margin-top:0}
.seqgal .g-third{grid-column:span 2}.seqgal .g-third .ph{aspect-ratio:4/5}
.seqgal .g-halfp{grid-column:span 3}.seqgal .g-halfp .ph{aspect-ratio:4/5}
/* founders: one section, Hisham left, photo centre, Nihal right */
.founders .display{font-size:clamp(2.5rem,5.2vw,4.8rem)}
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,3.6vw,56px);align-items:center;margin-top:clamp(36px,5vw,64px)}
.duo .duo-photo .frame{aspect-ratio:1122/1402}
.duo .duo-photo .frame img{object-position:50% 50%}
.duo blockquote.message{margin-top:0}
.duo blockquote.message p{font-size:clamp(1.15rem,1.55vw,1.45rem)}
.duo .sig-img{width:clamp(170px,17vw,240px)}
.anchor-alias{position:relative;top:-90px;display:block;height:0}
@media (max-width:980px){.duo{grid-template-columns:1fr 1fr;align-items:start}.duo .duo-photo{grid-column:1/-1;grid-row:1;max-width:520px;width:100%;justify-self:center}}
@media (max-width:640px){.duo{grid-template-columns:1fr}.duo .duo-photo{max-width:none}}

.duo .duo-side.left{align-self:start;padding-top:clamp(0px,2vw,24px)}
.duo .duo-side.right{align-self:end;padding-bottom:clamp(0px,2vw,24px)}
.founders .duo .left .sig-img{background:#9C7F4E}
.founders .duo .right .sig-img{background:#111}
@media (max-width:980px){.duo .duo-side.left,.duo .duo-side.right{align-self:start;padding:0}}
.founders.letter .duo .duo-photo{order:0}
.sec:not(.light) .proof{border-top-color:var(--rule-dark)}
.sec:not(.light) .proof strong{color:var(--linen)}
.sec:not(.light) .proof span{color:var(--stone)}
.duo blockquote.message p:last-child::after{content:"\201D";font-family:var(--serif);font-size:3.6em;line-height:0;vertical-align:-.52em;margin-left:.04em;color:#9C7F4E;opacity:.55}
@media (min-width:981px){.duo .duo-side.right{padding-left:clamp(16px,2.4vw,36px)}}
@media (min-width:981px){.duo .duo-side.right{padding-bottom:0;transform:translateY(clamp(24px,4vw,64px))}}