/* Modeve Group production stylesheet.
   Externalised from concept-preview.html so the deployed CSP needs no
   style-src 'unsafe-inline'. Font URLs are relative to this file. */
/* The bundled faces are Arabic-only: 1161 glyphs, no Latin letters, no em
   dash, en dash, middle dot, parentheses or curly quotes (verified against the
   shipped cmap by tests/test_dist.py::ArabicTypography). Declaring that range
   makes the fallback deliberate — the browser never requests a 200 KB Arabic
   face to set an English acronym, and never tries to synthesise a glyph the
   file does not contain. The Arabic text itself is unaffected. */
@font-face{font-family:"ModeveAR";src:url("arabic-regular.ttf") format("truetype");font-weight:400;font-display:swap;unicode-range:U+0030-0039,U+003A,U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"ModeveAR";src:url("arabic-bold.ttf") format("truetype");font-weight:700;font-display:swap;unicode-range:U+0030-0039,U+003A,U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}
*,*::before,*::after{box-sizing:border-box}
:root{
--bg:#060708;--ink:#f4f1ec;--mute:#9aa0a6;--line:#1d2124;--char:#0f1113;--ice:#9ed8ff;--ice-dim:#4e7f9e;--warm:#ffcf96;
/* The dimmest text on the page. Was #6e757a, which is 4.31:1 on --bg at 13px
   and fails WCAG AA (4.5). #7d858a is 5.37:1 — compliant with headroom, and
   still clearly quieter than --mute at 7.64:1, so the hierarchy is kept.
   tests/test_dist.py::Accessibility recomputes this from the shipped CSS. */
--mute-dim:#7d858a;
--max:1440px;--pad:clamp(20px,5vw,80px);
}
html,body{margin:0;max-width:100%;overflow-x:hidden}
body{background:var(--bg);color:var(--ink);font-family:"ModeveAR",system-ui,"Segoe UI",sans-serif;font-weight:400;font-size:17px;line-height:1.85;-webkit-font-smoothing:antialiased}
html[lang=en] body{font-family:system-ui,"Segoe UI",Roboto,sans-serif}
img,svg{max-width:100%}
/* <picture> only exists to offer the lossless WebP before the PNG; it must
   never become a layout box of its own. It fills its container and the
   rules below keep targeting the <img> inside it. */
picture{display:block}
h1,h2,h3{font-weight:700;line-height:1.15;margin:0;letter-spacing:-.01em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad);min-width:0}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px;border-radius:2px}
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:50;background:#0a141b;color:var(--ice);border:1px solid var(--ice-dim);padding:12px 20px;text-decoration:none}
.skip:focus{inset-inline-start:12px;top:12px}

/* header */
header{border-bottom:1px solid var(--line);position:relative;z-index:5;background:var(--bg)}
.hbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:18px;min-width:0}
.brand{display:flex;align-items:center;gap:16px;min-width:0;text-decoration:none}
.brand img{width:clamp(132px,15vw,196px);height:auto;display:block}
.sub{border-inline-start:1px solid var(--line);padding-inline-start:16px;font-size:11.5px;line-height:1.5;color:var(--mute);letter-spacing:.14em;text-transform:uppercase;direction:ltr;text-align:left}
.sub b{display:block;color:#cfd3d6;font-weight:700;letter-spacing:.22em}
.hnav{display:flex;align-items:center;gap:clamp(14px,2.2vw,28px);min-width:0}
.hnav ul{display:flex;gap:clamp(14px,2.2vw,30px);font-size:14.5px;color:#c6cacd}
.hnav a{text-decoration:none;padding:6px 2px;display:inline-block}
.hnav a:hover{color:var(--ice)}
.hnav a[aria-current=page]{color:var(--ice)}
.lang{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line);padding:7px 14px;text-decoration:none;color:#c6cacd;white-space:nowrap}
.lang:hover{border-color:var(--ice-dim);color:var(--ice)}
.navbtn{display:none;font:inherit;font-size:14px;color:#c6cacd;background:#0c0e10;border:1px solid var(--line);padding:11px 18px;cursor:pointer}
.navbtn:hover{border-color:#39454c;color:#fff}
/* Mobile navigation is a plain stacked list without JavaScript; the toggle
   button and collapsed panel only appear once site.js adds html.js. */
@media(max-width:900px){
.sub{display:none}
.hbar{flex-wrap:wrap}
.hnav{flex-direction:column;align-items:stretch;gap:0;width:100%;padding-bottom:14px}
.hnav ul{flex-direction:column;gap:0;width:100%}
.hnav ul a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
.lang{align-self:flex-start;margin-top:16px}
html.js .navbtn{display:inline-block}
html.js .hnav{position:absolute;inset-inline:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);padding:8px var(--pad) 22px;display:none}
html.js header.nav-open .hnav{display:flex}
}

/* hero */
.hero{border-bottom:1px solid var(--line);padding-block:0}
.hgrid{display:grid;grid-template-columns:40fr 60fr;min-width:0}
.hgrid .hcopy{order:1}
.hgrid .scene{order:2}
.hcopy{padding:clamp(40px,6vw,96px) var(--pad);display:flex;flex-direction:column;justify-content:center;gap:28px;min-width:0}
.eyebrow{font-size:12.5px;letter-spacing:.3em;color:var(--ice-dim)}
h1{font-size:clamp(38px,8.4vw,64px)}
.lead{color:#b9bfc4;font-size:clamp(16px,2vw,19px);max-width:46ch}
.cta{align-self:start;display:inline-block;text-decoration:none;font-weight:700;font-size:16px;padding:16px 34px;border:1px solid var(--ice-dim);color:var(--ice);background:#0a1218;transition:background .25s,color .25s}
.cta:hover{background:var(--ice);color:#04161f;border-color:var(--ice)}
.scene{position:relative;min-height:clamp(420px,62vh,760px);background:#08090a;overflow:hidden;min-width:0}
.scene>picture{position:absolute;inset:0;width:100%;height:100%}
.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:35% 50%}
.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(to left,rgba(6,7,8,.92),rgba(6,7,8,.15) 45%,transparent)}
html[dir=ltr] .scene::after{background:linear-gradient(to right,rgba(6,7,8,.92),rgba(6,7,8,.15) 45%,transparent)}
.ov{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.ov g{opacity:0;transition:opacity .5s ease}
.ov g.on{opacity:1}
.ov [stroke]{vector-effect:non-scaling-stroke}
.tag{position:absolute;inset-block-end:16px;inset-inline-start:16px;z-index:3;font-size:11.5px;letter-spacing:.16em;color:#cdd2d6;background:rgba(6,7,8,.72);border:1px solid var(--line);padding:7px 14px}
.hctl{border-top:1px solid var(--line);padding:26px var(--pad) 34px;max-width:var(--max);margin:0 auto}
.tabs{display:flex;flex-wrap:wrap;gap:10px}
.tab{font:inherit;font-size:14.5px;color:#c6cacd;background:#0c0e10;border:1px solid var(--line);padding:13px 22px;cursor:pointer;transition:border-color .25s,color .25s,background .25s}
.tab:hover{border-color:#39454c;color:#fff}
.tab[aria-pressed=true]{border-color:var(--ice);color:var(--ice);background:#0a141b}
.cap{margin-top:22px;max-width:70ch;color:#b4babf;font-size:16px;border-inline-start:2px solid var(--ice-dim);padding-inline-start:18px}
.cap b{color:var(--ink);display:block;font-size:17px}
@media(max-width:900px){
.hgrid{grid-template-columns:1fr}
.hcopy{padding-block:44px 32px}
.scene{min-height:min(58vh,350px)}
.scene img{object-position:40% 46%}
.scene::after,html[dir=ltr] .scene::after{background:linear-gradient(to top,rgba(6,7,8,.9),transparent 55%)}
}

/* sections */
section{padding-block:clamp(72px,10vw,132px);border-bottom:1px solid var(--line)}
.sechead{max-width:58ch;margin-bottom:clamp(40px,6vw,72px)}
h2{font-size:clamp(34px,6.2vw,52px);margin-bottom:20px}
.sechead p{color:#aab0b5}
.schem{border:1px solid var(--line);background:linear-gradient(180deg,#0a0c0e,#070809);padding:clamp(18px,3vw,40px)}
.schem svg{width:100%;height:auto;display:block}
.schem text{font-family:"ModeveAR",sans-serif}
.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:28px;margin-top:44px;border-top:1px solid var(--line);padding-top:34px}
.legend h3{font-size:16px;margin-bottom:8px}
.legend p{color:#9ba1a6;font-size:15px}
.legend span{color:var(--ice-dim);font-size:12px;letter-spacing:.2em;display:block;margin-bottom:10px}
.chap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center;min-width:0}
.chap+.chap{margin-top:clamp(72px,9vw,120px)}
.chap .media{min-width:0}
.chap.flip .text{order:2}
.frame{border:1px solid var(--line);overflow:hidden;background:#0a0c0e;aspect-ratio:4/3}
.frame picture{width:100%;height:100%}
.frame img{width:100%;height:100%;object-fit:cover;object-position:22% 60%;display:block;filter:saturate(.92)}
.frame svg{width:100%;height:100%;display:block}
.chap h3{font-size:clamp(26px,4vw,34px);margin-bottom:18px}
.chap .text p{color:#aab0b5;margin-bottom:24px}
.ticks li{position:relative;padding-inline-start:22px;padding-block:7px;border-bottom:1px solid #15181a;font-size:15.5px;color:#cbd0d4}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:17px;width:9px;height:1px;background:var(--ice)}
@media(max-width:880px){.chap{grid-template-columns:1fr}.chap.flip .text{order:0}}
.exp{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:clamp(24px,4vw,64px)}
.exp .picks{display:flex;flex-direction:column;gap:10px}
.exp .picks .tab{text-align:start}
.panel{border-inline-start:1px solid var(--line);padding-inline-start:clamp(20px,3vw,44px);min-width:0}
.panel h3{font-size:clamp(22px,3.4vw,30px);margin-bottom:14px}
.panel p{color:#aab0b5;margin-bottom:22px;max-width:62ch}
@media(max-width:760px){.exp{grid-template-columns:1fr}.exp .picks{flex-direction:row;flex-wrap:wrap}.panel{border-inline-start:0;border-top:1px solid var(--line);padding:28px 0 0}}

/* contact */
.contact{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.contact .body{color:#aab0b5;max-width:56ch;margin-top:16px}
.contact .local{color:#8f979c;font-size:14px;margin-top:12px}
.contact .alt{color:#8f979c;max-width:56ch;margin-top:18px}
.contact .alt strong{color:#b9bfc4}
.ways{display:flex;flex-wrap:wrap;gap:14px}
.way{text-decoration:none;border:1px solid var(--line);padding:16px 26px;font-size:16px;background:#0b0d0f;transition:border-color .25s}
.way:hover{border-color:var(--ice-dim)}
.way b{color:var(--ice)}
.tel{direction:ltr;unicode-bidi:isolate;font-weight:700}
@media(max-width:760px){.contact{grid-template-columns:1fr}}

/* document pages (privacy, 404, contact detail) */
.page-head{padding-block:clamp(56px,8vw,104px) clamp(32px,4vw,52px);border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(32px,6vw,52px);margin-bottom:18px}
.page-head p{color:#aab0b5;max-width:62ch}
.doc{padding-block:clamp(48px,7vw,88px)}
.doc .inner{max-width:72ch}
.doc h2{font-size:clamp(22px,3.4vw,28px);margin:44px 0 14px}
.doc h2:first-child{margin-top:0}
.doc p,.doc li{color:#aab0b5;font-size:16px}
.doc p+p{margin-top:14px}
.doc ul{margin-top:12px}
.doc li{position:relative;padding-inline-start:22px;padding-block:6px}
.doc li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:16px;width:9px;height:1px;background:var(--ice-dim)}
.doc .updated{color:var(--mute-dim);font-size:13px;margin-top:36px;border-top:1px solid var(--line);padding-top:18px}
/* The 404's second-language block. `dir` is set on the element, so the rule
   only needs to separate it and let logical properties mirror themselves. */
.nf-alt{margin-top:40px;border-top:1px solid var(--line);padding-top:28px}
.nf-alt h2{margin-top:0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px;margin-top:36px}
.card{border:1px solid var(--line);background:#0a0c0e;padding:28px}
.card h3{font-size:18px;margin-bottom:10px}
.card p{color:#9ba1a6;font-size:15px}
.card .tel{display:inline-block;margin-top:14px;color:var(--ice);font-size:17px;text-decoration:none}

/* breadcrumbs, shown only on pages that sit below something */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;color:var(--mute-dim);margin-bottom:22px}
.crumbs a{text-decoration:none;color:var(--mute)}
.crumbs a:hover{color:var(--ice)}
/* The separator is decorative but still painted text, so it takes the dimmest
   AA-compliant token rather than a quieter literal. */
.crumbs span[aria-hidden]{color:var(--mute-dim)}
.crumbs span[aria-current]{color:#b9bfc4}

/* ---------------------------------------------------------------- crops
   One cached illustration, reframed per page. Each .c-* rule is the crop box
   from media/asset-map.md 2.4 expressed as a ratio plus a scaled, offset
   image: width = source/crop width, inset = -origin/crop. No re-export, no
   second download, and the same arithmetic a lossless export would use. */
.crop{position:relative;overflow:hidden;background:#08090a;margin:0;border:1px solid var(--line)}
.crop picture{position:absolute;inset:0}
.crop img{position:absolute;display:block;max-width:none}
.crop.bg{position:absolute;inset:0;border:0;z-index:0;opacity:.14}
.c-living-detail{aspect-ratio:4/3}
.c-living-detail img{width:209%;height:156.83%;inset-inline-start:-31.25%;top:-20%}
html[dir=rtl] .c-living-detail img{inset-inline-start:auto;right:-31.25%}
.c-entrance-portrait{aspect-ratio:520/693}
.c-entrance-portrait img{width:321.54%;height:135.79%;inset-inline-start:0;top:0}
.c-roofline-band{aspect-ratio:1112/476}
.c-roofline-band img{width:150.36%;height:197.69%;inset-inline-start:-50.36%;top:0}
html[dir=rtl] .c-roofline-band img{inset-inline-start:auto;right:-50.36%}
.c-pool-band{aspect-ratio:1032/321}
.c-pool-band img{width:162.02%;height:293.15%;inset-inline-start:-62.02%;top:-193.15%}
html[dir=rtl] .c-pool-band img{inset-inline-start:auto;right:-62.02%}
.c-sky-quiet{aspect-ratio:2/1}
.c-sky-quiet img{width:248.81%;height:280.06%;inset-inline-start:-148.81%;top:0}
html[dir=rtl] .c-sky-quiet img{inset-inline-start:auto;right:-148.81%}
.crop .tag{position:absolute;inset-block-end:12px;inset-inline-start:12px;z-index:3}
/* static overlay callouts: the hero's own label strings, without the tabs */
.callouts{position:absolute;inset:0;z-index:2;margin:0}
.callouts li{position:absolute;inset-inline-start:7%}
.callouts li:first-child{top:22%}
.callouts li:last-child{top:52%}
.callouts span{display:inline-block;background:rgba(6,7,8,.74);border-inline-start:2px solid var(--warm);color:#f0e6da;font-size:12.5px;letter-spacing:.06em;padding:6px 12px}
.c-entrance-portrait .callouts span{border-inline-start-color:var(--ice)}
.band{padding-block:0;border-bottom:1px solid var(--line)}
.band .crop{border:0}

/* ------------------------------------------------------- shared furniture */
.related{display:flex;flex-wrap:wrap;gap:12px}
.related a{border:1px solid var(--line);background:#0b0d0f;padding:14px 22px;text-decoration:none;font-size:15px;color:#c6cacd;transition:border-color .25s,color .25s}
.related a:hover{border-color:var(--ice-dim);color:var(--ice)}
.morelinks{margin:clamp(56px,7vw,88px) 0 24px}
.morelinks h3{font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.imgnote{color:var(--mute-dim);font-size:13px;margin-top:26px}
.standfirst{color:#b9bfc4;font-size:clamp(17px,2.1vw,20px);max-width:64ch}
.cta-band{border-top:1px solid var(--line)}

/* term / description list: a spec sheet, not a card wall */
.deflist{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:0 48px;margin:0}
.deflist>div{border-top:1px solid var(--line);padding-block:20px}
.deflist dt{font-weight:700;font-size:16.5px;color:var(--ink);margin-bottom:8px}
.deflist dd{margin:0;color:#9ba1a6;font-size:15.5px}
.deflist.spec{grid-template-columns:1fr}
.deflist.spec>div{display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr);gap:8px 32px;align-items:baseline}
.deflist.spec dt{margin-bottom:0}
@media(max-width:760px){.deflist.spec>div{grid-template-columns:1fr}}

/* numbered process lists */
.steps{counter-reset:s;display:grid;gap:4px}
.steps li{position:relative;border-top:1px solid var(--line);padding:20px 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 22px;align-items:baseline}
.steps .n{color:var(--ice-dim);font-size:12.5px;letter-spacing:.2em;grid-row:span 2}
.steps b{font-size:16.5px}
.steps p{color:#9ba1a6;font-size:15.5px;grid-column:2}
.steps-wide li{grid-template-columns:auto minmax(0,1fr)}
.steps-big .n{font-size:clamp(22px,3.4vw,30px);letter-spacing:0;color:var(--ice-dim)}

/* about: editorial two-column with a slim index aside */
.about-head .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,5vw,72px);align-items:center}
.ah-mark{width:clamp(140px,18vw,240px);height:auto;opacity:.85}
.editorial{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);max-width:var(--max)}
.ed-main h2:first-child{margin-top:0}
.ed-main p{color:#aab0b5;font-size:16.5px;margin-top:14px}
.ed-aside{border-inline-start:1px solid var(--line);padding-inline-start:clamp(20px,3vw,40px)}
.ed-aside h2{font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 18px}
.index{counter-reset:i}
.index li{counter-increment:i;border-top:1px solid var(--line);padding-block:16px}
.index li::before{content:counter(i,decimal-leading-zero);color:var(--ice-dim);font-size:12px;letter-spacing:.2em;display:block;margin-bottom:6px}
.index a{text-decoration:none;font-weight:700;font-size:16px;display:block}
.index a:hover{color:var(--ice)}
.index span{display:block;color:#9ba1a6;font-size:14.5px;margin-top:6px}
.schem-slim svg{max-height:300px}
@media(max-width:900px){
.about-head .wrap{grid-template-columns:1fr}
.ah-mark{order:-1;width:140px}
.editorial{grid-template-columns:1fr}
.ed-aside{border-inline-start:0;border-top:1px solid var(--line);padding:28px 0 0}
}

/* services: editorial index rows, alternating sides */
.banner{position:relative;overflow:hidden}
.banner .wrap{position:relative;z-index:1}
.idx{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:center;border-top:1px solid var(--line);padding-block:clamp(36px,5vw,64px)}
.idx:first-child{border-top:0;padding-top:0}
.idx.flip .idx-text{order:-1}
.idx-n{color:var(--ice-dim);font-size:12.5px;letter-spacing:.24em;display:block;margin-bottom:12px}
.idx h2{font-size:clamp(24px,3.6vw,34px);margin-bottom:14px}
.idx h2 a{text-decoration:none}
.idx h2 a:hover{color:var(--ice)}
.idx-text>p{color:#aab0b5;max-width:56ch}
.idx .ticks{margin-top:18px}
.more{display:inline-block;margin-top:20px;font-size:14.5px;color:var(--ice);text-decoration:none;border-bottom:1px solid var(--ice-dim);padding-bottom:3px}
.frame-pad{padding:clamp(14px,2vw,28px);aspect-ratio:auto}
.verbs{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:clamp(20px,3vw,44px);aspect-ratio:4/3}
.verbs span{font-size:clamp(22px,3.6vw,38px);font-weight:700;line-height:1.2;color:var(--mute-dim)}
.verbs span:first-child{color:var(--ice)}
@media(max-width:880px){.idx{grid-template-columns:1fr}.idx.flip .idx-text{order:0}}

/* solution pages: split hero, aside figure, timeline, typographic rail */
.split .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:center}
.split .sp-text{order:-1}
.split.diagram .frame{aspect-ratio:4/3;padding:clamp(10px,1.6vw,22px)}
.asidefig{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:start}
.af-text>div+div{margin-top:32px}
.af-text h3{font-size:19px;margin-bottom:10px}
.af-text p{color:#9ba1a6;font-size:15.5px}
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(24px,4vw,56px)}
.pair h3{font-size:clamp(20px,2.8vw,26px);margin-bottom:12px}
.pair p{color:#aab0b5;font-size:16px}
@media(max-width:880px){.split .wrap,.asidefig{grid-template-columns:1fr}}

.bandhead{padding-bottom:clamp(28px,4vw,44px)}
.bandfig{position:relative;overflow:hidden;margin-block:clamp(22px,3vw,40px);border-block:1px solid var(--line)}
.bf-svg{position:relative;z-index:1;padding:clamp(14px,2.4vw,34px) var(--pad)}
.bf-svg svg{width:100%;height:auto;display:block;max-width:var(--max);margin:0 auto}
.bandhead>.wrap:last-child p{color:#aab0b5;max-width:66ch}

.timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:0 32px}
.timeline li{border-top:1px solid var(--ice-dim);padding-top:18px}
.timeline .n{color:var(--ice-dim);font-size:12px;letter-spacing:.2em;display:block}
.timeline .stage{display:block;color:var(--ice);font-size:13px;letter-spacing:.14em;margin:8px 0 10px}
.timeline b{display:block;font-size:16.5px;margin-bottom:8px}
.timeline p{color:#9ba1a6;font-size:15px}
.timeline .cap{display:block;margin-top:14px;color:var(--mute-dim);font-size:12.5px;border-top:1px solid var(--line);padding-top:10px}

.typo .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,5vw,72px);align-items:start}
.typo h1{font-size:clamp(34px,7vw,64px);max-width:16ch}
.rail{display:flex;flex-direction:column;gap:14px;text-align:end;padding-top:12px}
.rail span{color:var(--ice-dim);font-size:12.5px;letter-spacing:.2em}
.pull{margin:clamp(36px,5vw,56px) 0 0;padding-inline-start:24px;border-inline-start:2px solid var(--ice);max-width:46ch}
.pull p{font-size:clamp(20px,3vw,28px);font-weight:700;line-height:1.35;color:var(--ink)}
@media(max-width:760px){.typo .wrap{grid-template-columns:1fr}.rail{flex-direction:row;flex-wrap:wrap;text-align:start}}

footer{padding-block:48px;color:#7f868c;font-size:14px}
footer .fin{display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between;align-items:center}
footer .fin img{width:150px;height:auto}
footer .flinks{display:flex;flex-wrap:wrap;gap:8px 22px}
footer .flinks a{text-decoration:none}
footer .flinks a:hover{color:var(--ice)}
footer .note{max-width:62ch;font-size:13px;color:var(--mute-dim);margin-top:26px;border-top:1px solid var(--line);padding-top:22px}
@media(max-width:760px){
.ticks li{font-size:16px}
.cap{font-size:16px}
.legend p{font-size:16px}
.legend h3{font-size:17px}
.schem{display:none}
.legend{margin-top:0;border-top:0;padding-top:0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ------------------------------------------------- diagram legibility (B-5)
   MOD-7 pass 3 found the SVG labels unreadable at 390px: a label set at 18
   user units in a 600-wide viewBox renders at about 10px once the figure is
   350px wide, and the 1200-wide schematic is worse. SVG font-size is in user
   units, so the fix is per-diagram and depends on its viewBox.

   Narrow diagrams (600 units) get larger labels. The wide schematic cannot be
   enlarged without its long Arabic labels colliding, so at phone width it
   steps aside for text that says the same thing — the pattern the accepted
   home page already uses, where .schem is hidden and the 01-04 legend carries
   the content. */
.diagram-key{display:grid;gap:8px;margin-top:16px}
.diagram-key li{position:relative;padding-inline-start:20px;color:#9ba1a6;font-size:14.5px}
.diagram-key li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:11px;width:10px;height:1px;background:var(--ice)}
.stage-words{display:none}
.bf-note{display:none}
@media(max-width:760px){
  /* 600-unit diagrams: 30 units over a ~350px figure is about 17px rendered */
  .frame svg text{font-size:30px}
  .frame svg text[font-size="16"]{font-size:26px}
  /* 1200-unit schematic: swap for words rather than scale it down */
  .frame-pad .svgwrap,.bf-svg{display:none}
  .frame-pad{aspect-ratio:auto}
  .stage-words{display:flex;flex-direction:column;gap:6px}
  .stage-words span{font-size:clamp(20px,6vw,30px);font-weight:700;line-height:1.25;color:var(--mute-dim)}
  .stage-words span:first-child{color:var(--ice)}
  .bf-note{display:block;padding:20px var(--pad) 0;color:#9ba1a6;font-size:15px}
  .diagram-key li{font-size:15.5px}
}