/* AI Business Systems Architect
   Built from Brand Book v1.0 (September 2026).
   Palette: Violet Ink, Amethyst, Pearl, Silver, Slate.
   Colors v2 (2026-10-05, Yulia): headlines violet-charcoal #282338 (--ink), body cool gray #625F6C (--slate),
   buttons #4022A5 with white text (--button). Colors v3 (same day, Yulia): every amethyst colour moves to the new palette,
   proportionally: the accent is #4022A5 (--accent, was amethyst #4A2468) and each tint, shade, overlay and shadow keeps
   its old relation to the accent (deep #321B81, night #1D0F4A, lavender #D9D3ED).
   Type: Cormorant Garamond (headlines) and Manrope (text). */

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:600;font-display:swap;src:url("../fonts/cormorant-garamond-latin-600-italic.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/manrope-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/manrope-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/manrope-latin-600-normal.woff2") format("woff2")}

:root{
  --ink:#282338;
  --accent:#4022A5;
  --accent-deep:#321B81;
  --button:var(--accent);
  --button-deep:#381E91;
  --pearl:#F7F8FA;
  --white:#FFFFFF;
  --silver:#C4C7CE;
  --slate:#625F6C;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Manrope",Arial,sans-serif;
  --side:24px;
  --gap:56px;
  --ease:200ms ease;
}
@media (min-width:900px){:root{--side:64px;--gap:112px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--pearl);color:var(--slate);font-family:var(--sans);font-weight:400;font-size:16px;line-height:26px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (min-width:900px){body{font-size:18px;line-height:30px}}
img{display:block;max-width:100%;height:auto}
a{color:var(--accent);text-underline-offset:3px;transition:color var(--ease)}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
strong{color:var(--ink);font-weight:600}
ul,ol{margin:0;padding:0}

.skip{position:absolute;left:-9999px;top:0;background:var(--white);color:var(--accent);padding:12px 20px;z-index:20}
.skip:focus{left:var(--side);top:12px}

.wrap{max-width:calc(1200px + 2 * var(--side));margin:0 auto;padding:0 var(--side)}
.section{padding:var(--gap) 0}
.section + .section{border-top:1px solid var(--silver)}
.section.white{background:var(--white)}
.narrow{max-width:760px}

/* Type */
h1,h2,h3{font-family:var(--serif);font-weight:500;color:var(--ink);margin:0;letter-spacing:-0.02em}
h1{font-size:44px;line-height:48px}
h2{font-size:36px;line-height:40px}
h3{font-size:28px;line-height:34px;letter-spacing:-0.01em}
h1 em,h2 em{font-style:italic;font-weight:500}
@media (min-width:900px){
  h1{font-size:clamp(56px,5.6vw,80px);line-height:1.05}
  h2{font-size:clamp(42px,4.2vw,56px);line-height:1.1}
  h3{font-size:32px;line-height:38px}
}
.eyebrow{font-family:var(--sans);font-size:12px;line-height:17px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin:0 0 20px}
.lead{font-size:20px;line-height:30px;color:var(--slate)}
@media (min-width:900px){.lead{font-size:22px;line-height:33px}}
.ink{color:var(--ink)}
.rule{width:170px;height:1px;background:var(--accent);border:0;margin:32px 0}
.small{font-size:15px;line-height:24px}
h2 + p,h2 + .lead,h2 + ul,h2 + ol,h2 + div{margin-top:28px}
h3 + p{margin-top:12px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 28px;border:1.5px solid var(--button);border-radius:2px;background:var(--button);color:var(--white);font-family:var(--sans);font-size:15px;line-height:22px;font-weight:600;text-decoration:none;cursor:pointer;transition:background var(--ease),color var(--ease),border-color var(--ease)}
.btn:hover{background:var(--button-deep);border-color:var(--button-deep);color:var(--white)}
.btn.secondary{background:var(--white);color:var(--button)}
.btn.secondary:hover{background:var(--pearl);color:var(--ink);border-color:var(--ink)}
.btn.on-dark{background:var(--white);color:var(--button);border-color:var(--white)}
.btn.on-dark:hover{background:var(--pearl);color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-top:32px}
.textlink{font-size:15px;font-weight:600;color:var(--accent)}
.note{font-size:15px;line-height:24px;margin-top:16px;max-width:460px}

/* Header */
.site-header{background:var(--pearl);border-bottom:1px solid var(--silver)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:88px}
.logo{display:inline-flex;align-items:center;gap:18px;color:var(--ink);text-decoration:none}
.logo:hover{color:var(--ink)}
.logo svg{width:52px;height:41px;flex:none}
.logo-words{display:flex;flex-direction:column}
.logo-top{font-family:var(--sans);font-weight:400;font-size:10.5px;line-height:14px;letter-spacing:0.14em;text-transform:uppercase;padding-left:3px}
.logo-name{font-family:var(--serif);font-style:italic;font-weight:600;font-size:36px;line-height:34px;letter-spacing:-0.01em}
@media (max-width:519px){.logo svg{display:none}}
.nav{display:flex;align-items:center;gap:36px}
.nav a:not(.btn){font-size:15px;line-height:22px;font-weight:500;color:var(--ink);text-decoration:none;padding:8px 0;border-bottom:1px solid transparent}
.nav a:not(.btn):hover,.nav a[aria-current="page"]{border-bottom-color:var(--accent);color:var(--accent)}
.nav .btn{min-height:48px;padding:10px 22px}
.menu-btn{display:none;width:48px;height:48px;border:0;background:none;padding:0;cursor:pointer;position:relative}
.menu-btn span{position:absolute;left:12px;right:12px;height:1.5px;background:var(--ink);transition:transform var(--ease),top var(--ease)}
.menu-btn span:nth-child(1){top:19px}.menu-btn span:nth-child(2){top:28px}
.menu-btn[aria-expanded="true"] span:nth-child(1){top:23.5px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){top:23.5px;transform:rotate(-45deg)}
@media (max-width:1239px){
  .menu-btn{display:block}
  .site-header .wrap{flex-wrap:wrap}
  .nav{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 0 28px;border-top:1px solid var(--silver)}
  .nav.open{display:flex}
  .nav a:not(.btn){padding:14px 0;border-bottom:1px solid var(--silver);font-size:16px}
  .nav .btn{margin-top:24px}
}

/* Hero */
.hero{padding:56px 0 var(--gap)}
.hero-grid{display:grid;gap:40px}
.hero .lead{margin-top:28px;max-width:560px}
.hero-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (min-width:900px){
  .hero{padding:88px 0 var(--gap)}
  .hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}
  .hero-img img{aspect-ratio:4/5}
}
.page-hero{padding:56px 0 64px}
.page-hero .lead{margin-top:28px;max-width:720px}
@media (min-width:900px){.page-hero{padding:96px 0 96px}}
.page-hero h1{max-width:980px}

.strip{display:grid;gap:0;margin-top:56px;border-top:1px solid var(--silver)}
.strip div{padding:20px 0;border-bottom:1px solid var(--silver);font-size:15px;line-height:24px;color:var(--ink)}
@media (min-width:900px){
  .strip{grid-template-columns:repeat(3,1fr);gap:24px;margin-top:88px;border-top:0}
  .strip div{border-top:1px solid var(--silver);border-bottom:0;padding:20px 24px 0 0}
}

/* Layout helpers */
.split{display:grid;gap:40px}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 96px;align-items:start}
  .split.even{grid-template-columns:1fr 1fr}
  .split.img-right{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .split.center{align-items:center}
}
.cols-2,.cols-3{display:grid;gap:40px;margin-top:48px}
@media (min-width:760px){.cols-2{grid-template-columns:1fr 1fr;gap:48px 64px}}
@media (min-width:900px){.cols-3{grid-template-columns:repeat(3,1fr);gap:24px 48px}}
.cell{border-top:1px solid var(--silver);padding-top:24px}
.figure img{width:100%;object-fit:cover}
.figure.tall img{aspect-ratio:3/4}
.figure.wide img{aspect-ratio:21/9}
.figure.land img{aspect-ratio:3/2}

/* Lists */
.list{list-style:none}
.list li{position:relative;padding:14px 0 14px 28px;border-top:1px solid var(--silver)}
.list li:last-child{border-bottom:1px solid var(--silver)}
.list li::before{content:"";position:absolute;left:0;top:27px;width:12px;height:1px;background:var(--accent)}
@media (min-width:900px){.list li::before{top:29px}}
.list.bare li{color:var(--ink)}

.quotes{list-style:none;display:grid;gap:0;margin-top:40px}
.quotes li{border-top:1px solid var(--silver);padding:22px 0}
.quotes q{display:block;quotes:none;font-family:var(--serif);font-style:italic;font-weight:500;font-size:26px;line-height:32px;color:var(--ink)}
.quotes span{display:block;margin-top:6px;font-size:15px;line-height:24px}
@media (min-width:760px){.quotes{grid-template-columns:1fr 1fr;column-gap:64px}}
@media (min-width:900px){.quotes q{font-size:30px;line-height:36px}}

/* Stages */
.stage{display:grid;gap:28px;padding:48px 0;border-top:1px solid var(--silver)}
.stage:first-of-type{margin-top:48px}
.stage-art{background:var(--white);border:1px solid var(--silver);aspect-ratio:3/2;overflow:hidden}
.stage-art img{width:100%;height:100%;object-fit:cover}
.stage h3{margin-bottom:12px}
.stage dl{margin:20px 0 0}
.stage dt{font-size:12px;line-height:17px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-top:20px}
.stage dd{margin:6px 0 0}
@media (min-width:900px){
  .stage{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:80px;align-items:center;padding:64px 0}
  .stage:nth-of-type(even) .stage-art{order:2}
}
.steps{list-style:none;counter-reset:s;margin-top:40px}
.steps li{counter-increment:s;position:relative;padding:24px 0 24px 64px;border-top:1px solid var(--silver)}
.steps li:last-child{border-bottom:1px solid var(--silver)}
.steps li::before{content:"0" counter(s);position:absolute;left:0;top:26px;font-size:12px;font-weight:500;letter-spacing:0.14em;color:var(--accent)}

/* Offer panel */
.panel{background:var(--white);border:1px solid var(--silver);padding:32px 24px}
@media (min-width:900px){.panel{padding:56px 64px}}

/* CTA band */
.band{background:var(--accent);color:var(--white);position:relative;overflow:hidden;padding:72px 0}
.band h2{color:var(--white);max-width:820px}
.band p{color:var(--white);max-width:640px;margin-top:24px}
.band a:not(.btn){color:var(--white)}
.band .frames{position:absolute;right:-40px;bottom:-1px;width:520px;max-width:60%;opacity:.28;pointer-events:none}
.band .wrap{position:relative}
@media (min-width:900px){.band{padding:120px 0}}
@media (max-width:759px){.band .frames{display:none}}

/* FAQ */
.faq-group{padding-top:56px}
.faq-group > h2{margin-bottom:8px}
.qa{border-top:1px solid var(--silver);padding:32px 0}
.qa h3{max-width:820px}
.qa p{max-width:760px;margin-top:14px}

/* Form */
.form{display:grid;gap:24px;max-width:640px}
.field label{display:block;font-size:15px;line-height:22px;font-weight:600;color:var(--ink);margin-bottom:8px}
.field .hint{font-weight:400;color:var(--slate)}
.field input,.field textarea{width:100%;min-height:52px;padding:12px 16px;border:1px solid var(--slate);border-radius:2px;background:var(--white);color:var(--ink);font:inherit;font-size:16px;line-height:26px}
.field textarea{min-height:168px;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.hp{position:absolute;left:-9999px}

/* Footer */
.site-footer{border-top:1px solid var(--silver);padding:64px 0 48px;background:var(--pearl)}
.footer-grid{display:grid;gap:40px}
.site-footer p{font-size:15px;line-height:24px;max-width:460px}
.site-footer .logo{margin-bottom:24px}
.footer-nav{list-style:none;display:grid;gap:12px}
.footer-nav a{font-size:15px;font-weight:500;color:var(--ink);text-decoration:none}
.footer-nav a:hover{color:var(--accent);text-decoration:underline}
.legal{margin-top:56px;padding-top:24px;border-top:1px solid var(--silver);display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between;font-size:12px;line-height:17px;letter-spacing:0.14em;text-transform:uppercase;color:var(--slate)}
@media (min-width:900px){.footer-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:96px}}

.hero-img.portrait img{aspect-ratio:4/5;object-position:center top}

/* Curves: soft, flowing edges taken from the curved buildings in the stage illustrations */
:root{--r-soft:24px;--r-field:14px}
.btn{border-radius:999px;padding-inline:32px}
.nav .btn{padding-inline:26px}
.field input,.field textarea{border-radius:var(--r-field)}
.field textarea{border-radius:18px}
.hero-img img{border-radius:50% 50% var(--r-soft) var(--r-soft) / 26% 26% var(--r-soft) var(--r-soft)}
.figure img,.stage-art,.panel{border-radius:var(--r-soft)}
.section.white:has(> .figure.wide){padding:0 var(--side) var(--gap);background:transparent;border-top:0}
.figure.wide img{border-radius:var(--r-soft);max-width:calc(1200px + 2 * var(--side));margin:0 auto}
.rule{width:180px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 14'%3E%3Cpath d='M1 7 C 31 -1, 59 -1, 90 7 S 149 15, 179 7' fill='none' stroke='%234022A5' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.band{margin:var(--gap) 12px;border-radius:32px}
@media (min-width:900px){.band{margin:var(--gap) 24px;border-radius:48px}}
.band .frames{right:0;bottom:0;width:640px;opacity:.32}
.list li::before{height:1.5px;border-radius:2px}
.pv-tag{border-radius:999px}

/* Founder presence: founder block, pull quotes, small portrait byline */
.founder{display:grid;gap:40px;align-items:center}
.founder-img img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;border-radius:50% 50% var(--r-soft) var(--r-soft) / 26% 26% var(--r-soft) var(--r-soft)}
@media (min-width:900px){.founder{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:96px}}
.founder .lead{margin-top:24px}
.pullquote{margin:36px 0 0;padding:0 0 0 28px;border-left:1.5px solid var(--accent)}
.pullquote p{font-family:var(--serif);font-style:italic;font-weight:500;font-size:28px;line-height:36px;color:var(--ink);letter-spacing:-0.01em}
@media (min-width:900px){.pullquote p{font-size:32px;line-height:40px}}
.pullquote cite{display:block;margin-top:14px;font-style:normal;font-size:12px;line-height:17px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent)}
.byline-quote{display:flex;align-items:center;gap:20px;margin:32px 0 0}
.mini-portrait{width:76px;height:76px;flex:none;border-radius:50%;object-fit:cover;object-position:center 22%}
.byline-quote blockquote{margin:0}
.byline-quote p{font-family:var(--serif);font-style:italic;font-weight:500;font-size:24px;line-height:30px;color:var(--ink)}
.byline-quote cite{display:block;margin-top:6px;font-style:normal;font-size:12px;line-height:17px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent)}
.logo-top,.nav a{white-space:nowrap}

/* Image placeholders (website-image-brief.md). Each shows its ID, size, subject and file name. */
.ph{position:relative;margin:0;width:100%;max-width:100%;display:flex;align-items:flex-end;background:#EFEDF1;border:1.5px dashed #A9AAB0;border-radius:var(--r-soft);overflow:hidden;color:var(--slate)}
.ph-in{display:flex;flex-direction:column;gap:6px;padding:20px 22px;max-width:560px;min-width:0}
.ph-id{align-self:flex-start;padding:4px 10px;border-radius:999px;background:var(--accent);color:#fff;font:600 12px/1.3 var(--sans);letter-spacing:.06em}
.ph-spec{font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.ph-title{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.2;color:var(--ink)}
.ph-desc{font-size:14px;line-height:21px}
.ph-file{font-size:12px;line-height:18px;color:var(--slate);opacity:.85}
.ph.arch{border-radius:50% 50% var(--r-soft) var(--r-soft) / 26% 26% var(--r-soft) var(--r-soft);align-items:flex-end}
.ph.card .ph-in{padding:14px}
.ph.card .ph-title{font-size:19px}
.ph.card .ph-desc,.ph.card .ph-file{font-size:12px;line-height:17px}
.ph.round{width:120px;height:120px;flex:none;border-radius:50%;align-items:center;justify-content:center;text-align:center}
.ph.round .ph-in{padding:8px;align-items:center;gap:2px}
.ph.round .ph-spec,.ph.round .ph-desc,.ph.round .ph-file{display:none}
.ph.round .ph-title{font-size:14px}
.ph.round .ph-id{align-self:center}
.cell .ph{margin-bottom:24px}
.ph-band{padding-inline:12px;margin-block:var(--gap)}
.ph-band .ph{min-height:300px}
@media (min-width:900px){.ph-band{padding-inline:24px}.ph-band .ph{border-radius:48px}.ph-band .ph-in{padding:40px 48px}}
.section.white:has(> .ph.wide){padding:0 12px var(--gap);background:transparent;border-top:0}
@media (min-width:900px){.section.white:has(> .ph.wide){padding:0 24px var(--gap)}.section.white > .ph.wide{border-radius:48px}.section.white > .ph.wide .ph-in{padding:40px 48px}}
.ph.dark{background:#1D0F4A;border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.82)}
.ph.dark .ph-title{color:#fff}.ph.dark .ph-spec{color:#D9D3ED}.ph.dark .ph-file{color:rgba(255,255,255,.7)}.ph.dark .ph-id{background:#fff;color:var(--accent)}

/* Full-width hero (H-1A): text over the image on desktop, image above the text on phones */
.hero-full{position:relative;margin:12px 12px 0}
.hero-full .ph.fill{aspect-ratio:4/5;border-radius:var(--r-soft)}
.hero-full-in{padding-block:40px 8px}
.strip-only{padding:0 0 var(--gap)}
.strip-only .strip{margin-top:40px}
@media (min-width:900px){
  .hero-full{margin:24px 24px 0;min-height:min(80vh,780px);display:flex;align-items:center}
  .hero-full .ph.fill{position:absolute;inset:0;aspect-ratio:auto;border-radius:48px;justify-content:flex-end}
  .hero-full .ph.fill .ph-in{max-width:400px;padding:40px 48px}
  .hero-full-in{position:relative;width:100%;padding-block:96px}
  .hero-copy{max-width:min(640px,55%)}
  .hero-copy h1,.hero-copy .eyebrow{color:#fff}
  .hero-copy .lead,.hero-copy .note{color:rgba(255,255,255,.86)}
  .hero-copy .textlink{color:#fff}
  .hero-copy .btn{background:#fff;color:var(--button);border-color:#fff}
  .hero-copy .btn:hover{background:var(--pearl);color:var(--ink)}
}

/* CTA band over a background image (H-10) */
.band.photo{background:#1D0F4A}
.band.photo .ph.fill{margin-top:40px}
@media (min-width:900px){
  .band.photo .ph.fill{position:absolute;inset:0;margin:0;border:0;border-radius:inherit;background:transparent;justify-content:flex-end;align-items:flex-end}
  .band.photo .ph.fill .ph-in{max-width:360px;padding:32px 40px;border-left:1.5px dashed rgba(255,255,255,.35)}
  .band.photo .wrap{z-index:1}
}
@media (max-width:899px){.band.photo{display:flex;flex-direction:column}.band.photo .ph.fill{order:2;width:auto;margin:32px var(--side) 0}}
@media (min-width:900px){.band.photo{min-height:600px}.band.photo .ph.fill .ph-in{max-width:420px}}
.hero-copy .lead{margin-top:28px;max-width:560px}

/* 2026-10-01 (Yulia): no arch tops; full-width sections and images run edge to edge, square corners */
.ph.arch,.hero-img img,.founder-img img{border-radius:var(--r-soft)}
.band,.band.photo{margin:0;border-radius:0}
@media (min-width:900px){.band,.band.photo{margin:0;border-radius:0}}
.ph-band{padding-inline:0;margin-block:0}
.ph-band .ph,.ph.wide{border-radius:0;border-left:0;border-right:0}
@media (min-width:900px){.ph-band .ph{border-radius:0}.section.white > .ph.wide{border-radius:0}}
.section.white:has(> .ph.wide),.section.white:has(> .figure.wide){padding:0}
@media (min-width:900px){.section.white:has(> .ph.wide),.section.white:has(> .figure.wide){padding:0}}
.figure.wide img{border-radius:0;max-width:none}
.hero-full{margin:0}
.hero-full .ph.fill{border-radius:0;border-left:0;border-right:0}
@media (min-width:900px){.hero-full{margin:0}.hero-full .ph.fill{border-radius:0}.band.photo .ph.fill{border-radius:0}}
.ph-band .ph-in,.ph.wide .ph-in{padding-inline:max(var(--side),calc((100% - 1200px) / 2))}
@media (min-width:900px){.ph-band .ph-in,.ph.wide .ph-in{padding-block:40px}.hero-full .ph.fill .ph-in{padding-right:max(var(--side),calc((100% - 1200px) / 2))}}
/* Method: every stage image the same size, whichever side it sits on */
@media (min-width:900px){.stage:nth-of-type(even){grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}

/* Home hero photo (H-1A): full width, Yulia on the right, quiet bright space on the left for the headline */
.hero-photo{display:block}
.hero-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;border-radius:0}
@media (min-width:900px){
  .hero-photo{position:absolute;inset:0}
  .hero-photo img{height:100%;aspect-ratio:auto;object-position:72% center}
  .hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,248,250,.94) 0%,rgba(247,248,250,.82) 38%,rgba(247,248,250,0) 62%)}
  .hero-full{min-height:min(76vh,720px)}
  .hero-copy h1{color:var(--ink)}
  .hero-copy .eyebrow{color:var(--accent)}
  .hero-copy .lead,.hero-copy .note{color:var(--slate)}
  .hero-copy .textlink{color:var(--accent)}
  .hero-copy .btn{background:var(--button);color:#fff;border-color:var(--button)}
  .hero-copy .btn:hover{background:var(--button-deep);border-color:var(--button-deep);color:#fff}
  .hero-copy{max-width:min(620px,52%)}
}

/* Full-width image band (H-5 transformation): edge to edge, square corners */
.full-image img{width:100%;height:auto;display:block;border-radius:0}
.stage dl dt:first-child{margin-top:4px}

/* Hero balance (2026-10-01): lighter wash on the left so the architecture shows, a soft fade at the right edge
   to quiet the purple sofa, and a fade at the bottom so the image dissolves into the page instead of ending abruptly */
@media (min-width:900px){
  .hero-photo::after{background:
    linear-gradient(90deg,rgba(247,248,250,.9) 0%,rgba(247,248,250,.72) 34%,rgba(247,248,250,0) 58%)}
  .strip-only{padding-top:8px}
}


/* Hero composition (2026-10-01): text and photo sit together inside the 1200 px content column, centred on every
   screen. The photo is anchored so the edge of the dress meets the column's right edge; the photo's own edges fade
   into the page colour, so wide screens have no seam. --hero-r is the column's right edge. */
@media (min-width:1024px){
  .hero-full{--hero-r:min(50% + 600px, 100% + 80px);min-height:0;height:640px;background:var(--pearl)}
  .hero-photo{position:absolute;inset:0;overflow:hidden}
  .hero-photo img{position:absolute;top:0;left:calc(var(--hero-r) - 1596px);height:100%;width:auto;max-width:none;aspect-ratio:auto;object-fit:fill}
  .hero-photo::after{background:linear-gradient(90deg,rgba(247,248,250,.9) 0,rgba(247,248,250,.72) calc(var(--hero-r) - 900px),rgba(247,248,250,0) calc(var(--hero-r) - 560px))}
  .hero-copy{max-width:600px}
}
/* Tablets: photo above the text, cropped around Yulia */
@media (min-width:600px) and (max-width:1023px){
  .hero-full{display:block;min-height:0}
  .hero-photo{position:relative;inset:auto}
  .hero-photo img{height:auto;aspect-ratio:16/9;object-fit:cover;object-position:74% center}
  .hero-photo::after{display:none}
  .hero-full-in{padding-block:48px 8px}
  .hero-copy{max-width:640px}
}
@media (max-width:599px){.hero-photo::after{display:none}}
@media (min-width:1024px){.hero-copy{max-width:640px}.hero-copy h1 em{display:block}}
@media (min-width:1024px) and (max-width:1279px){.hero-copy .lead,.hero-copy .note{max-width:460px}}
/* Problem section: show curly quotation marks around each founder quote */
.quotes q{quotes:"\201C" "\201D" "\2018" "\2019"}
.quotes q::before{content:open-quote}
.quotes q::after{content:close-quote}

/* Consistency pass (2026-10-01) */
/* One list style everywhere: body font and size, slate text, hairlines, 24px below the heading */
.list{margin-top:24px}
.list.bare li{color:var(--slate)}
h2 + .list,.lead + .list,p + .list{margin-top:24px}
/* Problem quotes: same font, size and line rhythm as every other list; italic with quotation marks because they are the founder's own words */
.quotes{margin-top:40px}
.quotes li{padding:14px 0;border-top:1px solid var(--silver)}
.quotes q{font-family:var(--sans);font-style:italic;font-weight:400;font-size:inherit;line-height:inherit;color:var(--slate)}
@media (min-width:900px){.quotes q{font-size:inherit;line-height:inherit}}
@media (min-width:760px){.quotes{border-bottom:1px solid var(--silver)}}
@media (max-width:759px){.quotes li:last-child{border-bottom:1px solid var(--silver)}}
/* Side-by-side lists (outcomes, fit): the rows of both columns line up */
@media (min-width:760px){
  .cols-2.paired{grid-template-rows:auto repeat(7,auto);row-gap:0}
  .cols-2.paired > div{display:grid;grid-row:1 / -1;grid-template-rows:subgrid}
  .cols-2.paired > div > .list{display:grid;grid-row:2 / -1;grid-template-rows:subgrid}
  .cols-2.paired > div > .list li:last-child{border-bottom:1px solid var(--silver)}
}
/* Stage labels (The work / The deliverable): bold, body size, ink, sentence case */
.stage dt{font-size:inherit;line-height:inherit;font-weight:600;letter-spacing:0;text-transform:none;color:var(--accent);margin-top:20px}
.stage dd{margin-top:4px}

/* Buttons: pearl glow (2026-10-01, Yulia chose option 2; recoloured from #4022A5 on 2026-10-05, same proportions). No border, no highlight line, no dark edge:
   a soft halo of light from the upper centre, and a soft shadow beneath. */
.btn,.hero-copy .btn,.btn.secondary,.btn.on-dark{border-color:transparent;background-origin:border-box;
  transition:background 200ms ease,box-shadow 200ms ease,transform 200ms ease,color 200ms ease}
.btn,.hero-copy .btn{color:#fff;
  background:radial-gradient(120% 140% at 50% 0%,#7059BC 0%,#4D31AB 45%,#381E91 100%);
  box-shadow:0 10px 24px -10px rgba(64,34,165,.6)}
.btn:hover,.hero-copy .btn:hover{color:#fff;border-color:transparent;transform:translateY(-1px);
  background:radial-gradient(120% 140% at 50% 0%,#7D69C2 0%,#573DB0 45%,#3C209C 100%);
  box-shadow:0 14px 28px -12px rgba(64,34,165,.7)}
.btn.secondary,.btn.on-dark{color:var(--button);
  background:radial-gradient(120% 140% at 50% 0%,#FFFFFF 0%,#F6F5FB 50%,#E6E2F3 100%);
  box-shadow:0 10px 22px -12px rgba(64,34,165,.45)}
.btn.on-dark{box-shadow:0 12px 26px -12px rgba(0,0,0,.7)}
.btn.secondary:hover,.btn.on-dark:hover{color:var(--ink);border-color:transparent;transform:translateY(-1px);
  background:radial-gradient(120% 140% at 50% 0%,#FFFFFF 0%,#F9F8FC 50%,#ECE9F6 100%)}
.btn:active{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.btn,.btn:hover{transform:none}}
/* Hero (2026-10-01): Yulia moved closer to the text; stronger pearl wash behind the text so it reads cleanly over the staircase */
@media (min-width:1024px){
  .hero-photo img{left:calc(var(--hero-r) - 1670px)}
  .hero-photo::after{background:linear-gradient(90deg,rgba(247,248,250,.95) 0,rgba(247,248,250,.9) calc(var(--hero-r) - 760px),rgba(247,248,250,.6) calc(var(--hero-r) - 610px),rgba(247,248,250,0) calc(var(--hero-r) - 530px))}
}

/* Track-record carousel (right after the hero) */
.proof-carousel{padding:40px 0 var(--gap)}
.pc-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:none}
.pc-viewport::-webkit-scrollbar{display:none}
.pc-viewport:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:4px}
.pc-track{list-style:none;margin:0;padding:0;display:flex}
.pc-item{flex:0 0 100%;scroll-snap-align:start;padding:24px 28px 8px 0;border-top:1px solid var(--silver);min-width:0}
@media (min-width:600px){.pc-item{flex-basis:50%}}
@media (min-width:900px){.pc-item{flex-basis:33.333%}}
@media (min-width:1200px){.pc-item{flex-basis:25%}}
.pc-item + .pc-item{padding-left:28px;border-left:0}
.pc-item + .pc-item::before{content:"";position:absolute}
.pc-num{font-family:var(--serif);font-weight:500;font-size:40px;line-height:44px;letter-spacing:-.01em;color:var(--accent);margin:0}
@media (min-width:900px){.pc-num{font-size:46px;line-height:50px}}
.pc-text{margin:10px 0 0;font-size:16px;line-height:25px;color:var(--slate)}
.pc-item{position:relative}
.pc-item + .pc-item{box-shadow:inset 1px 0 0 0 transparent}
.pc-item:not(:first-child)::after{content:"";position:absolute;left:0;top:28px;bottom:12px;width:1px;background:var(--silver)}
.pc-controls{display:none}
.proof-carousel.js .pc-controls{display:flex;align-items:center;gap:20px;margin-top:28px}
.pc-btn{width:48px;height:48px;flex:none;border-radius:50%;border:1px solid var(--silver);background:var(--white);color:var(--accent);display:grid;place-items:center;cursor:pointer;transition:border-color 200ms ease,background 200ms ease}
.pc-btn svg{width:20px;height:20px}
.pc-btn:hover{border-color:var(--accent);background:var(--pearl)}
.pc-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pc-progress{flex:1;height:2px;background:var(--silver);border-radius:2px;overflow:hidden;order:-1}
.pc-progress span{display:block;height:100%;background:var(--accent);border-radius:2px;transition:margin-left 300ms ease}
/* carousel refinements: every card aligned to its own left edge, divider on the right, number on one line */
.pc-item,.pc-item + .pc-item{padding:24px 32px 8px 0}
.pc-item:not(:first-child)::after{display:none}
.pc-item:not(:last-child)::after{content:"";display:block;position:absolute;right:16px;left:auto;top:28px;bottom:12px;width:1px;background:var(--silver)}
@media (max-width:599px){.pc-item:not(:last-child)::after{display:none}}
.pc-num{white-space:nowrap;font-size:38px;line-height:44px}
@media (min-width:900px){.pc-num{font-size:42px;line-height:48px}}
/* carousel, round 2 (IR hierarchy: headline first, subheadline second, proof items smaller):
   each statement centred between the dividers, smaller figure and text */
.pc-item,.pc-item + .pc-item{padding:22px 20px 6px;text-align:center}
.pc-item:not(:last-child)::after{right:0;top:26px;bottom:10px}
.pc-num{font-size:30px;line-height:36px}
@media (min-width:900px){.pc-num{font-size:32px;line-height:38px}}
.pc-text{margin-top:8px;font-size:14px;line-height:22px}
@media (min-width:900px){.pc-text{font-size:15px;line-height:23px}}
/* every visible statement sits between two dividers: a line at the start of the row, then one after each statement */
@media (min-width:600px){
  .pc-viewport{position:relative}
  .pc-viewport::before{content:"";position:absolute;left:0;top:26px;bottom:10px;width:1px;background:var(--silver);z-index:1}
  .pc-item:last-child::after{content:"";display:block;position:absolute;right:0;top:26px;bottom:10px;width:1px;background:var(--silver)}
}

/* Proof ribbon (2026-10-01, Yulia chose "Pearl ribbon"): a white band directly under the hero, edge to edge,
   moving continuously in one direction. The list is written twice and slides left by exactly one copy, so it never rewinds. */
.proof-ribbon{position:relative;background:#fff;padding-block:30px;margin:0;box-shadow:0 18px 40px -30px rgba(64,34,165,.35);z-index:1}
.proof-ribbon::before,.proof-ribbon::after{content:"";position:absolute;top:0;bottom:0;width:9%;z-index:2;pointer-events:none}
.proof-ribbon::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.proof-ribbon::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
.pr-viewport{overflow:hidden}
.pr-row{list-style:none;margin:0;padding:0;display:flex;width:max-content;animation:pr-slide 60s linear infinite}
.proof-ribbon:hover .pr-row{animation-play-state:paused}
@keyframes pr-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.pr-row{animation:none}.pr-viewport{overflow-x:auto}.pr-row .pr-item[aria-hidden]{display:none}}
/* The strip loops only once the script has added its hidden second copy; without the script it stays still and scrolls sideways */
:root:not(.pr-loop) .pr-row{animation:none}
:root:not(.pr-loop) .pr-viewport{overflow-x:auto}
.pr-item{flex:none;width:280px;padding:4px 24px;text-align:center;position:relative}
.pr-item::after{content:"";position:absolute;right:0;top:10px;bottom:6px;width:1px;background:#E3E1E8}
@media (max-width:600px){.pr-item{width:240px}}
.pr-item .pc-num{margin:0}
/* the ribbon touches the hero image directly */
.hero-full{margin-bottom:0}
@media (max-width:600px){.pr-item{width:272px;padding-inline:18px}}
@media (max-width:1023px){.hero-full-in{padding-bottom:40px}}

/* Hero + ribbon proportions (2026-10-01): the ribbon is thinner, the hero image fills the rest of the screen,
   so the hero and the whole ribbon sit above the fold. --rh is the ribbon height; the header is 88px. */
:root{--rh:96px}
.proof-ribbon{padding-block:16px}
.pr-item{padding:2px 22px}
.pr-item .pc-num{font-size:24px;line-height:30px}
.pr-item .pc-text{margin-top:4px;font-size:13px;line-height:19px}
.pr-item::after{top:8px;bottom:6px}
.pr-row{animation-duration:95s}
@media (min-width:1024px){
  .hero-full{--hh:clamp(500px, calc(100svh - 88px - var(--rh)), 900px);height:var(--hh)}
  /* the photo scales with the hero; Yulia keeps her place relative to the text (1670px at 640px tall) */
  .hero-photo img{left:calc(var(--hero-r) - var(--hh) * 2.609)}
  .hero-full-in{padding-block:40px}
}
/* short laptop screens: slightly tighter hero type so headline, text and button fit with the ribbon */
@media (min-width:1024px) and (max-height:820px){
  .hero-copy h1{font-size:52px;line-height:56px}
  .hero-copy .lead{margin-top:20px;font-size:19px;line-height:29px}
  .hero-copy .actions{margin-top:24px}
  .hero-copy .note{margin-top:12px}
}
@media (min-width:1024px) and (max-height:700px){
  .hero-copy h1{font-size:46px;line-height:50px}
  .hero-copy .lead{font-size:17px;line-height:26px}
}
/* tablets: a wider, shorter photo so photo, text and ribbon fit on one screen */
@media (min-width:600px) and (max-width:1023px){
  .hero-photo img{aspect-ratio:21/9;object-position:72% 30%}
  .hero-full-in{padding-block:32px 28px}
}
:root{--rh:104px}
.proof-ribbon{padding-block:14px}
@media (min-width:1024px){
  .hero-full{--hh:clamp(420px, calc(100svh - 89px - var(--rh)), 900px)}
}
@media (min-width:1024px) and (max-height:700px){
  .hero-full-in{padding-block:24px}
  .hero-copy h1{font-size:44px;line-height:48px}
  .hero-copy .lead{margin-top:14px;font-size:16px;line-height:25px}
  .hero-copy .actions{margin-top:18px}
  .hero-copy .note{font-size:14px;line-height:21px;margin-top:10px}
}
@media (min-width:600px) and (max-width:1023px){
  .hero-full-in{padding-block:24px 20px}
  .hero-copy h1{font-size:46px;line-height:50px}
  .hero-copy .lead{margin-top:16px;font-size:18px;line-height:28px}
  .hero-copy .actions{margin-top:20px}
}
/* Phones (2026-10-01): a wide head-and-shoulders photo, compact type and the short note, so the headline,
   button and the whole ribbon fit on the first screen of a typical phone. */
@media (max-width:599px){
  .hero-photo img{aspect-ratio:2/1;height:auto;width:100%;object-fit:cover;object-position:50% 12%}
  .hero-full-in{padding-block:20px 22px}
  .hero-copy h1{font-size:34px;line-height:38px}
  .hero-copy .lead{margin-top:12px;font-size:16px;line-height:24px}
  .hero-copy .actions{margin-top:18px}
  .hero-copy .note{margin-top:10px;font-size:14px;line-height:20px}
  .note-long{display:none}
  .pr-item{padding-block:0}
}
@media (max-width:599px){.site-header .wrap{min-height:68px}}
/* Home copy v5 (2026-10-01): the fit as eight short tiles, the CTA note, the four evidence stories */
.fit-grid{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:0 32px;grid-template-columns:1fr}
.fit-grid li{border-top:1px solid var(--silver);padding:18px 0 18px 28px;position:relative;font:500 24px/30px var(--serif);color:var(--ink)}
.fit-grid li::before{content:"";position:absolute;left:2px;top:30px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
@media (min-width:480px){.fit-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.fit-grid{grid-template-columns:repeat(4,1fr);gap:0 40px}.fit-grid li{padding-block:22px 26px}.fit-grid li::before{top:34px}}
.band .band-note{margin-top:16px;font-size:15px;line-height:22px;opacity:.85}
.cols-2.evidence{gap:56px 64px}
@media (min-width:900px){.cols-3.principles{gap:40px 48px}}
/* Pull quotes (2026-10-01): smaller, in quotation marks, signed with a dash */
.pullquote p{font-size:22px;line-height:31px}
@media (min-width:900px){.pullquote p{font-size:24px;line-height:34px}}
.pullquote p::before{content:"\201C"}
.pullquote p::after{content:"\201D"}
.pullquote cite::before{content:"\2013\00a0"}
/* Founder block (2026-10-01): photo and story side by side, then the quote, signature and button centred beneath */
@media (min-width:900px){.founder{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:80px}}
.founder-close{max-width:780px;margin:72px auto 0;text-align:center}
.founder-close::before{content:"";display:block;width:56px;height:1px;margin:0 auto 40px;background:var(--accent)}
.pullquote.centered{margin:0;padding:0;border:0}
.pullquote.centered p{font-size:24px;line-height:34px}
@media (min-width:900px){.pullquote.centered p{font-size:26px;line-height:38px}}
.pullquote.centered cite{margin-top:20px}
.pullquote.centered cite::before{content:none}
.cite-name{display:block}
.cite-name::before{content:"\2013\00a0"}
.cite-role{display:block;margin-top:6px;color:var(--slate);letter-spacing:.12em}
.founder-close .actions{justify-content:center;margin-top:36px}
@media (max-width:899px){.founder-close{margin-top:48px}}
/* Hero spacing (2026-10-01): on tall screens the photo grows, so her hair could reach the text.
   The photo now never sits closer than 56px to the right edge of the text column (left edge + 640px),
   whatever the screen height. 1205/645 is where her hair starts in the photo. */
@media (min-width:1024px){
  .hero-full{--hh:clamp(420px, min(100svh - 89px - var(--rh), 70vw), 900px);--copy-l:max(var(--side), (100% - 1200px) / 2)}
  .hero-photo img{left:max(calc(var(--hero-r) - var(--hh) * 2.609), calc(var(--copy-l) + 696px - var(--hh) * 1.868))}
}
.cols-2.evidence + .lead{margin-top:56px}
/* Footer (2026-10-01): a classic low footer. Logo and links on one line, a slim legal line beneath. */
.site-footer{padding:28px 0 20px}
.footer-grid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px}
.site-footer .logo{margin-bottom:0}
.footer-nav{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0;padding:0}
.footer-nav a{font-size:14px;line-height:20px}
.legal{margin-top:20px;padding-top:16px}
@media (min-width:900px){.footer-grid{display:flex;gap:16px 40px}}
@media (max-width:759px){.footer-nav{gap:10px 20px}}
.pullquote.centered cite{margin-top:40px}
.cite-role{margin-top:12px}
.founder-close .actions{margin-top:56px}
/* Proof ribbon, more breathing room (2026-10-01): taller and each statement wider, to match the spacious rhythm of the
   rest of the site. Type size unchanged. The row is longer now, so the loop time grows in proportion to keep the same
   visible speed (about 32 px a second). --rh is the ribbon height the hero subtracts to keep the ribbon above the fold. */
:root{--rh:128px}
.proof-ribbon{padding-block:26px}
.pr-item{width:320px;padding-inline:28px}
.pr-row{animation-duration:108.6s}
@media (max-width:600px){
  .proof-ribbon{padding-block:24px}
  .pr-item{width:300px;padding-inline:22px}
  .pr-row{animation-duration:104.8s}
}

/* =====================================================================================
   MOTION AND INTERACTION, v3 (2026-10-01). Research-led: one signature moment (the pinned stages, in home-v2.css),
   calm everywhere else. Full-width pictures always stay full width (Yulia rejected framing them).
   ===================================================================================== */
:root{--ease-out:cubic-bezier(.2,.65,.25,1)}
html{scroll-padding-top:104px}

/* Frosted header: sticks to the top; once the page moves it turns translucent with the page softly blurred behind it */
.site-header{position:sticky;top:0;z-index:40;transition:background-color .45s ease,box-shadow .45s ease,border-color .45s ease}
.scrolled .site-header{background:rgba(247,248,250,.74);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);
  border-bottom-color:rgba(196,199,206,.55);box-shadow:0 14px 34px -28px rgba(40,35,56,.4)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.scrolled .site-header{background:rgba(247,248,250,.97)}}

/* Depth (motion only): the photo inside each full-width band drifts a little slower than the page. It is enlarged
   slightly so no edge ever shows; the band itself never changes size or shape. */
.full-image{overflow:hidden}
.motion .full-image img,.motion .band-bg img{scale:1.1;will-change:transform}

/* Headline entrances (motion only): section headlines rise into place line by line, once */
.motion main h2[data-h]{opacity:0}
.motion main h2[data-h].h-split,.motion main h2[data-h].h-done{opacity:1}
main h2 .ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
main h2 .ln-in{display:inline-block;translate:0 108%;transition:translate 1.15s var(--ease-out)}
main h2.h-in .ln-in{translate:0 0}

/* Considered hover details */
main p a:not(.btn),main dd a,main li a:not(.btn){text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(rgba(64,34,165,.28),rgba(64,34,165,.28));
  background-size:0 1px,100% 1px;background-position:0 100%,0 100%;background-repeat:no-repeat;
  transition:background-size .5s var(--ease-out),color .2s ease}
main p a:not(.btn):hover,main dd a:hover,main li a:not(.btn):hover{background-size:100% 1px,100% 1px}
.footer-nav a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease-out),color .2s ease}
.footer-nav a:hover{text-decoration:none;background-size:100% 1px}
.btn:hover,.hero-copy .btn:hover{box-shadow:0 18px 40px -14px rgba(64,34,165,.75),0 0 0 6px rgba(64,34,165,.06)}
.btn.secondary:hover{box-shadow:0 16px 34px -14px rgba(64,34,165,.5),0 0 0 6px rgba(64,34,165,.05)}
.btn.on-dark:hover{box-shadow:0 18px 40px -14px rgba(0,0,0,.75),0 0 0 6px rgba(255,255,255,.1)}
.ev-img{overflow:hidden}
.ev-img img{transition:scale 1.4s var(--ease-out)}
.cell:hover .ev-img img{scale:1.03}

@media (prefers-reduced-motion:reduce){
  main h2 .ln-in{translate:none;transition:none}
  .ev-img img,.footer-nav a,main p a{transition:none}
}

/* =====================================================================================
   TYPE SCALE, ONE STEP UP (2026-10-01, Yulia: "the smallest text needs to be slightly larger, and everything else
   needs to adjust"). Every small size moves up by one point; neighbours move with it so the proportions hold.
   ===================================================================================== */
body{font-size:17px;line-height:27px}
@media (min-width:900px){body{font-size:18px;line-height:30px}}
.eyebrow{font-size:13px;line-height:19px}
.small,.note{font-size:16px;line-height:25px}
.band .band-note{font-size:16px;line-height:24px}
.field label{font-size:16px;line-height:24px}
.nav a:not(.btn){font-size:16px}
.btn{font-size:16px}
.footer-nav a{font-size:15px;line-height:22px}
.legal{font-size:13px;line-height:19px}
.pullquote cite,.byline-quote cite,.cite-role{font-size:13px;line-height:19px}
.pr-item .pc-text{font-size:14px;line-height:20px}
@media (min-width:1024px) and (max-height:820px){.hero-copy .note{font-size:15px;line-height:23px}}
@media (min-width:1024px) and (max-height:700px){.hero-copy .note{font-size:15px;line-height:22px}}
@media (max-width:599px){.hero-copy .note{font-size:15px;line-height:21px}}
/* the ribbon captions grew by 1px, so the ribbon is 130px tall; the hero subtracts it to keep the ribbon above the fold */
:root{--rh:130px}
/* balanced line breaks: avoid a single word alone on the last line of paragraphs, list rows and quotes */
p,li,dd,blockquote{text-wrap:pretty}

/* Official logo (2026-10-01): staircase mark and wordmark as one transparent image */
.logo-img{display:block;height:68px;width:auto}
.site-footer .logo-img{height:56px}
@media (max-width:599px){.logo-img{height:50px}.site-footer .logo-img{height:48px}}

/* Footer, one line (2026-10-01, Yulia): logo, links and copyright in a single row. The tagline line was removed. */
.site-footer{padding:18px 0}
.footer-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 40px}
.site-footer .logo-img{height:44px}
.footer-row .footer-nav{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0;padding:0}
.footer-row .legal{margin:0;padding:0;border:0;display:block;font-size:13px;line-height:19px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
@media (max-width:1023px){.footer-row{justify-content:flex-start}}
@media (max-width:599px){.site-footer .logo-img{height:40px}.footer-row{gap:12px 24px}}
/* Footer logo in the header's proportion (2026-10-01): header 68px logo to 16px menu text (about 4.25 to 1);
   footer links are 15px, so the footer logo is 64px (48px on phones) */
.site-footer .logo-img{height:64px}
@media (max-width:599px){.site-footer .logo-img{height:48px}}

/* Phones, version 76 (2026-10-03, Yulia: the 2:1 strip cut her off at the neck). A new 3:2 photo cut from the wide
   hero shows her from head to crossed arms with the staircase behind; nothing is cropped away. */
@media (max-width:599px){
  .hero-photo img{aspect-ratio:3/2;object-position:50% 0}
}

/* Headlines and short lines (version 79, 2026-10-03, Yulia): the emphasised second half of a headline always starts
   its own line, on every screen ("Your company grew. / The way it runs didn't."); lines are balanced so no word is
   left alone on the last line. build.py adds the sentence breaks in codas, quotes and Scale Signals questions. */
main h1 > em,main h2 > em{display:block}
main h1.em-inline > em{display:inline}
main h1,main h2,main h3,main figcaption{text-wrap:balance}
/* blocks with sentence breaks: "pretty" avoids a lone last word in each sentence */
main .coda > p,main blockquote p{text-wrap:pretty}
main .qa h3 .sl{display:block}