:root {
      --bg: #f7f6f2;
      --surface: #ffffff;
      --soft: #eeeee9;
      --ink: #171d28;
      --muted: #5f6672;
      --line: #d9d9d2;
      --blue: #214de7;
      --blue-soft: #dfe6ff;
      --dark: #121c30;
      --green: #0f6b58;
      --label: #3152ce;
      --shadow: 0 24px 55px rgba(30,37,52,.08);
    }
    html[data-theme="dark"] {
      --bg: #0b111e;
      --surface: #111b2b;
      --soft: #182337;
      --ink: #f4f4ed;
      --muted: #abb5c4;
      --line: #303c51;
      --blue: #a8c0ff;
      --blue-soft: #182c59;
      --dark: #d3e5ff;
      --green: #a8e8cc;
      --label: #a8c0ff;
      --shadow: 0 24px 60px rgba(0,0,0,.25);
    }
    *, *:before, *:after { box-sizing: border-box; }
    html { scroll-behavior:smooth; scroll-padding-top: 100px; }
    body { background:var(--bg); color:var(--ink); margin:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; transition:background-color .25s,color .25s; }
    a { color:inherit; text-decoration:none; }
    button { font:inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    button:focus-visible, a:focus-visible { outline: 3px solid var(--blue); outline-offset:4px; }
    .page { max-width: 1470px; margin:0 auto; padding: 0 clamp(24px,5.4vw,80px); }
    .header { position:sticky; z-index:100; top:0; background:color-mix(in srgb, var(--bg) 93%, transparent); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
    .header__inner { min-height:84px; border-bottom: 1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:20px; }
    .brand { display:flex; align-items:baseline; gap:13px; flex-shrink:0; }
    .brand-name { font-size:20px; font-weight:850; letter-spacing:.13em; line-height:1; }
    .brand-descriptor { font-size:10px; font-weight:750; letter-spacing:.09em; color:var(--muted); text-transform:uppercase; }
    .header__right { display:flex; align-items:center; gap:34px; }
    .nav { display:flex; align-items:center; gap:31px; }
    .nav a { font-size:14px; font-weight:600; transition:color .2s; }
    .nav a:hover { color:var(--blue); }
    .theme-toggle { background:none; color:var(--ink); border:1px solid var(--line); height:34px; width:34px; border-radius:50%; display:grid; place-items:center; cursor:pointer; flex-shrink:0; }
    .theme-toggle svg { width:17px; height:17px; }
    .header .button { min-height:40px; padding:11px 17px; font-size:13px; }
    .menu-toggle { display:none; background:transparent; border:1px solid var(--line); border-radius:7px; color:var(--ink); padding:10px; cursor:pointer; }
    .menu-toggle svg { width:20px; height:20px; display:block; }
    .eyebrow { color:var(--label); font-size:12px; font-weight:800; letter-spacing:.19em; text-transform:uppercase; line-height:1.5; }
    .button { display:inline-flex; align-items:center; justify-content:center; gap:12px; border-radius:3px; padding:16px 20px; min-height:54px; background:var(--blue); color:var(--bg); border:1px solid var(--blue); font-size:14px; font-weight:700; cursor:pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
    html[data-theme="dark"] .button { color:#0b1428; }
    .button:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(36,78,220,.17); }
    .button--outline { color:var(--ink)!important; background:transparent; border:1px solid var(--ink); }
    .button--outline:hover { background:var(--soft); box-shadow:none; }
    .button--text { border:none; padding:0; min-height:unset; background:none; color:var(--blue)!important; }
    .button svg { width:17px; height:17px; flex-shrink:0; }
    .hero { display:grid; grid-template-columns:minmax(0, 1.18fr) minmax(340px, .82fr); min-height:654px; padding-top:95px; padding-bottom:76px; gap:25px; align-items:center; }
    .hero h1 { font-size:clamp(58px,5.25vw,88px); letter-spacing:-.073em; font-weight:750; line-height:1.045; margin:26px 0 24px; max-width:820px; }
    .hero h1 em { color:var(--blue); font:italic 500 1.08em/0.95 Georgia, 'Times New Roman', serif; letter-spacing:-.067em; }
    .hero__intro { font-size:clamp(18px,1.45vw,21px); line-height:1.58; max-width:610px; font-weight:425; letter-spacing:-.018em; color:var(--muted); margin:0 0 29px; }
    .hero__buttons { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px; }
    .location { font-size:13px; display:flex; align-items:center; gap:10px; color:var(--muted); font-weight:550; }
    .location svg { color:var(--blue); width:15px;height:15px; }
    .systems { position:relative; isolation:isolate; min-height:420px; width:100%; overflow:hidden; }
    .systems::before { content:""; position:absolute; inset:20px 4px 8px; background-image: linear-gradient(to right,var(--line) 1px,transparent 1px),linear-gradient(to bottom,var(--line) 1px,transparent 1px); background-size:58px 58px; opacity:.36; mask-image: radial-gradient(ellipse,black, transparent 73%); }
    .systems__curve { position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:1; }
    .systems__curve path.main { stroke:var(--blue); stroke-width:3.7; fill:none; stroke-linecap:round; }
    .systems__curve path.faint { stroke:var(--blue); stroke-width:1; fill:none; opacity:.28; stroke-dasharray:4 8; }
    .system-node { position:absolute; z-index:2; min-width:124px; border:1px solid var(--line); border-radius:5px; padding:17px 17px 18px; background:var(--surface); box-shadow:0 15px 35px rgba(40,50,75,.07); }
    .system-node .number { font-size:11px; font-weight:800; color:var(--blue); letter-spacing:.07em; display:block; margin-bottom:25px; }
    .system-node strong { display:block; font-size:19px; letter-spacing:-.045em; }
    .system-node small { display:block; color:var(--muted); font-size:11px; margin-top:5px; }
    .system-node--one { left:4%; top:46%; transform:rotate(-5deg); }
    .system-node--two { left:31%; top:28%; transform:rotate(3deg); }
    .system-node--three { left:60%; top:12%; transform:rotate(-4deg); }
    .system-node--four { right:0; top:51%; transform:rotate(4deg); }
    .system-side-note { position:absolute; bottom:8%; left:27%; font-size:11px; font-weight:700; letter-spacing:.18em; color:var(--muted); }
    .proof { border-block:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); padding:30px 0; }
    .proof__item { display:flex; align-items:center; gap:24px; padding:2px clamp(17px,2.7vw,45px); border-right:1px solid var(--line); }
    .proof__item:first-child { padding-left:0; }
    .proof__item:last-child { border:none; }
    .proof__num { font-size:clamp(43px,4.2vw,65px); font-family:Georgia,serif; letter-spacing:-.075em; line-height:1; color:var(--ink); }
    .proof__desc { text-transform:uppercase; font-weight:750; letter-spacing:.12em; font-size:11px; line-height:1.65; max-width:150px; }
    .proof__desc span { display:block; color:var(--muted); text-transform:none; letter-spacing:0; font-weight:450; font-size:11px; line-height:1.4; margin-top:5px; }
    .section { padding-block:112px; }
    .section-head { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:35px; }
    .section-head h2 { font-size:clamp(40px,4.25vw,64px); font-weight:725; letter-spacing:-.067em; line-height:1.1; margin:15px 0 0; max-width:780px; }
    .section-head p { color:var(--muted); max-width:345px; margin:0 0 4px; font-size:15px; line-height:1.65; }
    .section-head em, .statement em { font:italic 500 1.04em Georgia,serif; color:var(--blue); }
    .work-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
    .work-card { min-height:428px; border:1px solid var(--line); display:flex; flex-direction:column; padding:32px 34px 29px; background:var(--surface); overflow:hidden; position:relative; transition:transform .2s ease,box-shadow .2s ease,border .2s; }
    .work-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--blue) 25%,var(--line)); }
    .work-card__top { display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative; z-index:1; }
    .work-card__num { font-size:12px; font-weight:800; letter-spacing:.12em; color:var(--blue); }
    .work-card__client { font-size:11px; font-weight:750; letter-spacing:.14em; color:var(--muted); }
    .work-card h3 { font-size:clamp(29px,2.45vw,38px); letter-spacing:-.059em; line-height:1.14; max-width:470px; font-weight:710; margin:39px 0 15px; position:relative; z-index:1; }
    .work-card p { font-size:15px; color:var(--muted); line-height:1.65; max-width:445px; margin:0 0 23px; z-index:1; }
    .work-card__bottom { display:flex; gap:14px; align-items:end; justify-content:space-between; margin-top:auto; position:relative; z-index:1; }
    .work-card .read { display:inline-flex; align-items:center; gap:9px; border:0; padding:4px 0; cursor:pointer; background:none; color:var(--blue); font-weight:750; white-space:nowrap; font-size:13px; }
    .work-card .read:hover { gap:13px; }
    .work-card .read svg { width:16px; height:16px; }
    .metrics { display:flex; gap:22px; align-items:baseline; }
    .metric strong { display:block; font-size:25px; font-weight:750; letter-spacing:-.055em; }
    .metric small { display:block; color:var(--muted); font-size:10px; font-weight:600; max-width:118px; line-height:1.3; margin-top:3px; }
    .work-card__art { position:absolute; width:210px; height:210px; bottom:50px; right:-28px; z-index:0; opacity:.38; pointer-events:none; }
    .art-arc { width:270px; height:270px; border-radius:50%; border:34px solid var(--blue-soft); position:absolute; right:-88px; bottom:-74px; }
    .art-arc::before, .art-arc::after { content:""; position:absolute; border-radius:50%; border:2px solid var(--blue); inset:20px; }
    .art-arc::after { inset:56px; opacity:.3; }
    .art-bars { position:absolute; height:120px; width:170px; right:28px; bottom:7px; display:flex; gap:7px; align-items:end; }
    .art-bars i { width:23px; background:var(--blue-soft); border-top:2px solid var(--blue); height:var(--h); }
    .art-grid { position:absolute; width:210px; height:140px; right:0; bottom:15px; background:repeating-linear-gradient(90deg,transparent 0 34px,var(--line) 35px 36px),repeating-linear-gradient(0deg,transparent 0 34px,var(--line) 35px 36px); transform:rotate(-12deg); }
    .art-grid::after { content:""; display:block; height:3px; background:var(--blue); transform:rotate(-30deg) translateY(82px); }
    .work-card__flag { display:inline-block; color:var(--label); font-size:10px; letter-spacing:.12em; font-weight:750; text-transform:uppercase; margin-bottom:12px; }
    .work-footer { padding-top:17px; color:var(--muted); font-size:12px; line-height:1.5; }
    .help { background:var(--soft); border-block:1px solid var(--line); }
    .help__inner { padding-block:105px 116px; }
    .service-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:38px; gap:16px; }
    .service { background:var(--surface); padding:32px 29px 36px; min-height:319px; border-top:3px solid var(--ink); }
    .service__icon { width:43px; height:43px; display:grid; place-items:center; border:1px solid var(--line); color:var(--blue); border-radius:50%; }
    .service__icon svg { width:20px; height:20px; }
    .service h3 { font-size:23px; margin:28px 0 12px; letter-spacing:-.04em; line-height:1.2; }
    .service p { color:var(--muted); font-size:14px; line-height:1.68; margin:0; }
    .service .service-foot { font-size:11px; color:var(--label); font-weight:750; text-transform:uppercase; letter-spacing:.1em; margin-top:20px; }
    .approach { display:grid; grid-template-columns:.84fr 1.16fr; gap:75px; align-items:start; }
    .approach__left h2 { font-size:clamp(39px,3.7vw,56px); margin:17px 0 18px; line-height:1.13; letter-spacing:-.07em; }
    .approach__left p { color:var(--muted); line-height:1.75; font-size:17px; max-width:450px; }
    .steps { border-top:1px solid var(--line); }
    .step { display:grid; grid-template-columns:45px 1fr; gap:17px; border-bottom:1px solid var(--line); padding:23px 0; }
    .step .step-num { font-family:Georgia,serif; font-size:23px; color:var(--blue); }
    .step h3 { font-size:19px; margin:2px 0 6px; letter-spacing:-.03em; }
    .step p { font-size:14px; margin:0; color:var(--muted); line-height:1.6; }
    .quote { background:var(--blue); color:#fff; padding:55px clamp(25px,5vw,65px); margin-top:5px; }
    .quote__text { font-size:clamp(28px,2.75vw,42px); line-height:1.32; letter-spacing:-.045em; font-weight:560; max-width:1000px; margin:0; }
    .quote__mark { display:block; font: 60px/1 Georgia,serif; opacity:.55; margin-bottom:5px; }
    .about { display:grid; grid-template-columns:.8fr 1.2fr; align-items:start; gap:75px; }
    .about__title { font-size:clamp(39px,3.85vw,59px); letter-spacing:-.068em; line-height:1.12; margin:18px 0 30px; }
    .about__monogram { width:min(100%,350px); aspect-ratio:1.12; display:flex; align-items:center; justify-content:center; font-size:clamp(80px,10vw,160px); font-weight:800; letter-spacing:-.12em; padding-right:22px; color:var(--blue); background:var(--blue-soft); position:relative; overflow:hidden; }
    .about__monogram::before { content:""; position:absolute; inset:16px; border:1px solid color-mix(in srgb,var(--blue) 32%,transparent); }
    .about__copy p { font-size:17px; color:var(--muted); line-height:1.85; margin:0 0 18px; max-width:690px; }
    .about__copy p.lead { font-size:clamp(23px,2.05vw,29px); line-height:1.45; letter-spacing:-.038em; color:var(--ink); font-weight:540; }
    .about__details { display:flex; gap:34px; flex-wrap:wrap; border-top:1px solid var(--line); margin-top:32px; padding-top:25px; }
    .about__details div { min-width:150px; }
    .about__details b { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.11em; margin-bottom:8px; }
    .about__details small { display:block; font-size:13px; color:var(--muted); line-height:1.6; }
    .contact { background:var(--dark); color:var(--bg); padding-block:82px; margin-bottom:0; }
    html[data-theme="dark"] .contact { background:#e4edff; color:#101729; }
    .contact__inner { display:grid; grid-template-columns:1.25fr .75fr; gap:55px; align-items:end; }
    .contact .eyebrow { color:#abbcff; }
    html[data-theme="dark"] .contact .eyebrow { color:#284dce; }
    .contact h2 { font-size:clamp(47px,4.55vw,70px); line-height:1.07; letter-spacing:-.072em; margin:16px 0 22px; }
    .contact p { max-width:635px; font-size:18px; line-height:1.62; color:#bac4d3; margin:0; }
    html[data-theme="dark"] .contact p { color:#4d5b70; }
    .contact__action { justify-self:end; text-align:right; }
    .contact .button { color:#182039; background:#fff; border-color:#fff; }
    html[data-theme="dark"] .contact .button { color:#fff;background:#214de7;border-color:#214de7; }
    .contact__email { display:block; font-size:13px; color:#bac4d3; margin-top:15px; }
    html[data-theme="dark"] .contact__email { color:#4d5b70; }
    .footer { display:flex; align-items:center; justify-content:space-between; gap:25px; padding-block:28px 40px; font-size:12px; color:var(--muted); }
    .footer strong { color:var(--ink); letter-spacing:.13em; }
    .footer div { display:flex; align-items:center; gap:22px; }
    .footer a:hover { color:var(--blue); }
    dialog { width:min(810px,calc(100vw - 26px)); max-height:min(86vh,1100px); border:1px solid var(--line); border-radius:5px; padding:0; background:var(--surface);color:var(--ink); box-shadow: 0 40px 150px rgba(0,0,0,.3); overflow:auto; }
    dialog::backdrop { background:rgba(12,20,36,.62); backdrop-filter:blur(5px); }
    .dialog__inner { padding:clamp(26px,4vw,52px); }
    .dialog__top { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:33px; }
    .dialog__close { width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;font-size:21px; }
    .dialog h2 { font-size:clamp(35px,4vw,55px); letter-spacing:-.06em;line-height:1.14;margin:0 0 17px; }
    .dialog__subtitle { font-size:18px;color:var(--muted);line-height:1.6;margin:0 0 30px; }
    .dialog__metrics { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0 34px;padding-block:20px;border-block:1px solid var(--line); }
    .dialog__metrics strong { display:block;font-size:27px;letter-spacing:-.05em; }
    .dialog__metrics span { display:block;font-size:11px;color:var(--muted);margin-top:6px;line-height:1.35; }
    .dialog__body h3 { margin:25px 0 9px; font-size:18px; letter-spacing:-.025em; }
    .dialog__body p { color:var(--muted);font-size:15px;line-height:1.8;margin:0 0 15px; }
    .dialog__body .final { padding:19px 22px; background:var(--soft);border-left:3px solid var(--blue);color:var(--ink);margin-top:25px; }
    .dialog__next { border-top:1px solid var(--line); margin-top:31px;padding-top:25px;display:flex;gap:16px;justify-content:space-between;align-items:center; }
    .dialog__next span { font-size:12px;color:var(--muted); }
    @media (max-width: 1100px) {
      .brand-descriptor { display:none; }
      .header__right { gap:18px; }
      .nav { gap:20px; }
      .hero { grid-template-columns: 1.1fr .9fr; }
      .hero h1 { font-size:clamp(57px,6.1vw,70px); }
      .system-node { min-width:112px;padding:14px; }
      .system-node strong { font-size:16px; }
      .systems { min-height:360px; }
      .work-card { padding:28px; }
      .metrics { gap:12px; }
    }
    @media (max-width: 830px) {
      .header__inner { min-height:71px; }
      .brand-name { font-size:18px; }
      .header__right .button { display:none; }
      .menu-toggle { display:block; }
      .nav { display:none; position:absolute;top:71px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);padding:10px 25px 20px;border-bottom:1px solid var(--line);box-shadow:0 20px 35px rgba(0,0,0,.06); }
      .nav[data-open="true"] { display:flex; }
      .nav a { padding:14px 0;border-bottom:1px solid var(--line); }
      .hero { grid-template-columns:1fr; padding-top:65px;padding-bottom:42px;gap:0; }
      .hero h1 { max-width:690px; font-size:clamp(50px,8.2vw,71px); }
      .systems { max-width:590px; min-height:350px; margin:auto; }
      .proof__item { flex-direction:column;align-items:flex-start;gap:8px;padding:0 15px; }
      .proof__desc { font-size:10px; }
      .proof__num { font-size:45px; }
      .section { padding-block:80px; }
      .section-head { display:block; }
      .section-head p { margin-top:19px;max-width:620px; }
      .work-card { min-height:416px; }
      .work-card h3 { font-size:clamp(26px,4vw,34px); }
      .work-card__bottom { display:block; }
      .read { margin-top:25px; }
      .service-grid { grid-template-columns:1fr; }
      .service { min-height:unset; }
      .approach, .about { grid-template-columns:1fr;gap:35px; }
      .approach__left p { max-width:650px; }
      .about__monogram { width:260px;aspect-ratio:1.7;font-size:95px; }
      .contact__inner { display:block; }
      .contact__action { text-align:left;margin-top:30px; }
    }
    @media (max-width: 600px) {
      .page { padding-inline:21px; }
      .hero { padding-top:46px; }
      .hero h1 { font-size:clamp(46px,12.5vw,60px); margin:24px 0 25px; letter-spacing:-.067em; }
      .hero__intro { font-size:17px; }
      .hero__buttons { gap:10px; }
      .hero__buttons .button { flex:1;white-space:nowrap;padding:14px 9px;min-height:50px;font-size:12px;gap:6px; }
      .location { font-size:11px; }
      .systems { min-height:265px;margin-top:22px; }
      .system-node { min-width:94px;padding:9px; }
      .system-node .number { font-size:8px;margin-bottom:14px; }
      .system-node strong { font-size:14px; }
      .system-node small { font-size:9px; }
      .system-node--one { left:2%;top:47%; }
      .system-node--two { left:28%;top:28%; }
      .system-node--three { left:58%;top:10%; }
      .system-node--four { right:1%;top:56%; }
      .system-side-note { display:none; }
      .proof { grid-template-columns:1fr; padding:0; }
      .proof__item { flex-direction:row;align-items:center;gap:22px;padding:19px 0;border-right:none;border-bottom:1px solid var(--line); }
      .proof__item:last-child { border-bottom:none; }
      .proof__desc { font-size:11px;max-width:210px; }
      .section { padding-block:72px; }
      .section-head h2 { font-size:42px; }
      .work-grid { grid-template-columns:1fr;gap:13px; }
      .work-card { min-height:390px;padding:25px; }
      .work-card h3 { font-size:32px;margin-top:34px; }
      .work-card__bottom { display:flex;align-items:end; }
      .read { margin-top:0; }
      .metric strong { font-size:23px; }
      .metric small { font-size:9px;max-width:90px; }
      .service-grid { gap:10px; }
      .service { padding:27px 24px; }
      .help__inner { padding-block:70px; }
      .quote { padding:35px 26px; }
      .quote__text { font-size:29px; }
      .contact { padding-block:70px; }
      .contact h2 { font-size:46px; }
      .footer { flex-direction:column;align-items:flex-start; }
      .dialog__metrics { grid-template-columns:1fr 1fr; }
      .dialog__metrics div:nth-child(3) { grid-column:span 2; }
      .dialog__next { display:block; }
      .dialog__next .button { margin-top:14px; }
    }
    @media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;}}
  
/* v0.2 — portrait-led home, shareable case studies and small editorial details */
:root { --maxtext: 720px; }
.header__inner { position:relative; }
.hero { grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr); }
.hero-photo { width:min(100%,510px); margin:0 0 0 auto; position:relative; aspect-ratio:.91; border:1px solid var(--line); background:#dcdcd4; overflow:visible; }
.hero-photo::after { content:"";position:absolute;inset:14px -14px -14px 14px;z-index:-1;border:1px solid var(--line); }
.hero-photo > img { display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%; }
.hero-photo__panel { position:absolute;left:-28px;bottom:28px;width:255px; background:var(--surface);padding:19px 21px;border:1px solid var(--line);box-shadow:var(--shadow); }
.hero-photo__panel span { display:block;color:var(--blue);font-weight:800;letter-spacing:.15em;font-size:10px;margin-bottom:14px;text-transform:uppercase; }
.hero-photo__panel strong { display:block;letter-spacing:-.036em;font-size:20px;line-height:1.2; }
.hero-photo__panel small {display:block;color:var(--muted);font-size:11px;margin-top:9px;}
.hero-photo__tag {position:absolute;right:14px;bottom:-17px;background:var(--blue);color:var(--bg);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:12px 16px;box-shadow:var(--shadow);}
html[data-theme="dark"] .hero-photo__tag {color:#0b1428;}
.about__portrait { margin:0;max-width:320px; }
.about__portrait img { display:block;width:100%;height:300px;aspect-ratio:auto;object-fit:cover;object-position:50% 28%;border:1px solid var(--line);filter:saturate(.90); }
.about__portrait figcaption {color:var(--muted);font-size:11px;margin-top:10px;letter-spacing:.02em;}
.work-card .read { border-bottom:1px solid currentColor; padding-bottom:5px;align-self:flex-end; }
.work-card--featured {border-top:3px solid var(--blue);}
.work-card--featured .work-card__top {margin-top:-2px;}
.work-footer {max-width:700px;}
.footer a:focus-visible {outline-offset:4px;}
.project-hero { padding-top:70px; padding-bottom:74px; }
.project-breadcrumb {font-size:12px;font-weight:650;color:var(--muted);display:flex;align-items:center;gap:10px;margin-bottom:63px;}
.project-breadcrumb a {color:var(--blue);border-bottom:1px solid transparent;}
.project-breadcrumb a:hover {border-color:var(--blue);}
.project-title {font-size:clamp(50px,6vw,88px);line-height:1.04;letter-spacing:-.075em;font-weight:740;margin:19px 0 26px;max-width:1000px;}
.project-title em {color:var(--blue);font:italic 500 1.07em/.95 Georgia,serif;}
.project-deck {color:var(--muted);font-size:clamp(19px,1.85vw,25px);line-height:1.55;max-width:820px;margin:0 0 30px;}
.project-labels {display:flex;gap:8px;flex-wrap:wrap;}
.project-labels span {border:1px solid var(--line);padding:9px 11px;font-size:11px;font-weight:720;letter-spacing:.04em;color:var(--muted);}
.project-stats {display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line);padding:30px 0;margin-bottom:30px;}
.project-stat {padding:0 28px;border-right:1px solid var(--line);}
.project-stat:first-child {padding-left:0;}
.project-stat:last-child {border-right:0;}
.project-stat strong {display:block;font-family:Georgia,serif;font-size:clamp(36px,4vw,54px);font-weight:500;letter-spacing:-.07em;line-height:1.1;}
.project-stat span {font-size:12px;line-height:1.5;color:var(--muted);display:block;margin-top:8px;max-width:245px;}
.project-body-shell {display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(55px,7vw,120px);align-items:start;padding-bottom:130px;}
.project-toc {position:sticky;top:116px;display:flex;flex-direction:column;gap:16px;padding-top:12px;}
.project-toc strong {font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:var(--blue);margin-bottom:6px;}
.project-toc a {font-size:13px;color:var(--muted);line-height:1.4;display:block;}
.project-toc a:hover {color:var(--blue);}
.project-article {min-width:0;max-width:820px;}
.project-article section {padding:0 0 54px;margin-bottom:50px;border-bottom:1px solid var(--line);scroll-margin-top:115px;}
.project-article section:last-of-type {border-bottom:0;margin-bottom:10px;}
.project-section-number {display:block;color:var(--label);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px;}
.project-article h2 {font-size:clamp(32px,3.5vw,47px);line-height:1.15;letter-spacing:-.055em;margin:0 0 23px;font-weight:715;}
.project-article h3 {font-size:21px;letter-spacing:-.035em;margin:36px 0 12px;line-height:1.25;}
.project-article p {font-size:17px;line-height:1.8;color:var(--muted);margin:0 0 21px;}
.project-article p.lead {font-size:21px;line-height:1.6;color:var(--ink);letter-spacing:-.025em;}
.project-article ul {padding-left:22px;margin:15px 0 30px;}
.project-article li {color:var(--muted);font-size:16px;line-height:1.75;margin:0 0 11px;}
.project-article li strong {color:var(--ink);}
.case-aside {padding:28px 33px;margin:27px 0 33px;background:var(--soft);border-left:3px solid var(--blue);}
.case-aside .aside-label {font-size:10px;letter-spacing:.18em;font-weight:800;text-transform:uppercase;color:var(--blue);margin-bottom:12px;display:block;}
.case-aside p {color:var(--ink);margin:0;font-size:19px;line-height:1.55;letter-spacing:-.024em;}
.case-detail {display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:28px 0 32px;}
.case-detail > div {border:1px solid var(--line);padding:24px;background:var(--surface);}
.case-detail span {display:block;font-size:11px;color:var(--label);letter-spacing:.11em;font-weight:800;text-transform:uppercase;margin-bottom:12px;}
.case-detail strong {display:block;font-size:19px;letter-spacing:-.035em;line-height:1.3;margin-bottom:10px;}
.case-detail p {font-size:14px;line-height:1.6;margin:0;}
.timeline {margin:28px 0 36px;}
.timeline-item {display:grid;grid-template-columns:58px 1fr;gap:15px;position:relative;padding:10px 0 25px;}
.timeline-item:not(:last-child)::before {content:"";position:absolute;top:38px;bottom:-3px;left:18px;border-left:1px solid var(--line);}
.timeline-num {color:var(--blue);background:var(--surface);border:1px solid var(--line);height:38px;width:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:12px;font-weight:750;z-index:1;}
.timeline-item strong {display:block;font-size:18px;letter-spacing:-.02em;margin-bottom:5px;}
.timeline-item p {font-size:15px;line-height:1.7;margin:0;}
.chart-pair {display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:27px 0 13px;}
.comparison {padding:26px;border:1px solid var(--line);background:var(--surface);}
.comparison .comparison__name {display:block;color:var(--label);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:24px;}
.bar-row {display:grid;grid-template-columns:54px 1fr 65px;gap:10px;align-items:center;margin-bottom:15px;}
.bar-row label {font-size:11px;color:var(--muted);font-weight:650;}
.bar-row b {font-size:13px;text-align:right;}
.bar-track {height:13px;background:var(--soft);position:relative;}
.bar-fill {height:100%;background:#9ca5bc;}
.bar-fill.new {background:var(--blue);}
.comparison__foot {font-size:11px;color:var(--muted);line-height:1.6;margin-top:6px;}
.case-footnote {font-size:12px!important;line-height:1.65!important;color:var(--muted)!important;margin-top:17px!important;}
.case-footer-nav {padding:45px 0 95px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;align-items:center;}
.case-footer-nav span {font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--label);display:block;margin-bottom:9px;}
.case-footer-nav a {font-size:22px;font-weight:730;letter-spacing:-.04em;}
.case-footer-nav a:hover {color:var(--blue);}
.case-cta {background:var(--dark);color:var(--bg);padding:48px clamp(25px,5vw,60px);margin:0 0 30px;display:flex;align-items:center;justify-content:space-between;gap:30px;}
html[data-theme="dark"] .case-cta {background:#e4edff;color:#101729;}
.case-cta h3 {font-size:clamp(26px,2.5vw,39px);letter-spacing:-.055em;margin:5px 0 10px;}
.case-cta p {color:#bac4d3;font-size:15px;margin:0;}
html[data-theme="dark"] .case-cta p {color:#4d5b70;}
.case-cta .button {background:white;color:#182039;border-color:#fff;white-space:nowrap;}
html[data-theme="dark"] .case-cta .button {background:#214de7;color:white;border-color:#214de7;}
.case-provenance {display:block;color:var(--muted);font-size:11px;line-height:1.5;margin-top:10px;}
@media (max-width:1100px) {
  .hero-photo__panel {left:-7px;}
  .project-body-shell {grid-template-columns:175px 1fr;gap:45px;}
}
@media (max-width:830px) {
  .hero {grid-template-columns:1fr;}
  .hero-photo {width:min(100%,560px);margin:30px auto 0;aspect-ratio:1.14;}
  .hero-photo > img {object-position:50% 27%;}
  .hero-photo__panel {left:14px;bottom:22px;}
  .project-hero {padding-top:40px;}
  .project-breadcrumb {margin-bottom:45px;}
  .project-body-shell {display:block;padding-bottom:50px;}
  .project-toc {display:none;}
  .case-footer-nav {padding-bottom:65px;}
}
@media (max-width:600px) {
  .hero-photo {aspect-ratio:.82;}
  .hero-photo__panel {padding:14px 15px;width:205px;}
  .hero-photo__panel strong {font-size:17px;}
  .hero-photo__panel small {font-size:10px;}
  .hero-photo__tag {right:7px;font-size:9px;}
  .project-hero {padding-bottom:45px;}
  .project-title {font-size:clamp(43px,11.2vw,62px);}
  .project-deck {font-size:18px;}
  .project-breadcrumb {font-size:11px;margin-bottom:35px;}
  .project-stats {grid-template-columns:1fr;padding:0;margin-bottom:12px;}
  .project-stat {padding:18px 0;border-right:0;border-bottom:1px solid var(--line);}
  .project-stat:last-child {border-bottom:0;}
  .project-stat strong {font-size:42px;}
  .project-body-shell {padding-bottom:40px;}
  .project-article section {padding-bottom:35px;margin-bottom:35px;}
  .project-article h2 {font-size:35px;}
  .project-article p {font-size:16px;}
  .project-article p.lead {font-size:19px;}
  .case-detail,.chart-pair {grid-template-columns:1fr;}
  .case-aside {padding:22px;}
  .case-aside p {font-size:17px;}
  .case-cta {display:block;}
  .case-cta .button {margin-top:23px;}
  .case-footer-nav {flex-direction:column;align-items:flex-start;}
  .about__portrait {max-width:270px;}
}

/* v0.2.1: compact About portrait on narrow screens. */
@media (max-width:600px) {
  .about__portrait { max-width:270px; }
  .about__portrait img { height:240px; object-position:50% 26%; }
}