/* tokens.css */
/* Typed stops let native CSS animate the same gradient in either theme. */
@property --surface-fill { syntax: "<color>"; inherits: true; initial-value: oklch(0.95485951 0.00132926 106.42431); }
@property --surface-fill-end { syntax: "<color>"; inherits: true; initial-value: oklch(0.95485951 0.00132926 106.42431); }
/* Shared visual, layout, shape and type tokens. Components consume these
   defaults; theme and studio controls override the same custom properties. */
:root {
  color-scheme: light;

  /* Semantic colour */
  --page: oklch(0.97885053 0.00132105 106.42353);
  --page-rgb: 248, 248, 247;
  --card-surface: oklch(0.95485951 0.00132926 106.42431);
  --card-surface-rgb: 240, 240, 239;
  /* Quiet vertical wash: colour pools above, then recedes into the base. */
  --card-gradient-angle: 180deg;
  --card-surface-end: oklch(.968 .0013 106.4);
  --card-hover-lightness: .925;
  --card-hover-chroma: .048;
  --card-hover-lightness-end: .968;
  --card-hover-chroma-end: .009;
  --card-label-rest-strength: 42%;
  --card-summary-rest-strength: 80%;
  --surface-hover-in-duration: 240ms;
  --surface-hover-out-duration: 1000ms;
  --card-content-in-duration: 220ms;
  --card-content-out-duration: 180ms;
  --card-reflection-scale: .7;
  --card-glow-rgb: 230, 208, 252;
  --card-glow-scale: 1;
  --ink: oklch(0.25543328 0.01903326 298.77205);
  --muted: oklch(0.48511463 0.03270015 301.15180);
  --body-ink: oklch(.55 .00786971 304.15263);
  --eyebrow-ink: oklch(.58 .007 304);
  --eyebrow-weight: var(--font-weight-body);
  --eyebrow-tracking: calc(var(--letter-spacing-label) * .625);
  --panel: oklch(0.99999999 0.00000004 0.00000 / 0.95);
  --chrome: oklch(0.99999999 0.00000004 0.00000 / 0.78);
  --image-edge: oklch(0.25543328 0.01903326 298.77205 / 0.06);
  --nav-glass-rgb: 255, 255, 255;
  --nav-glass-alpha: .48;
  --dock-glass-alpha: .30;
  --dock-glass-blur: 22px;
  --dock-backdrop-brightness: 1;
  --nav-rim: oklch(0.99999999 0.00000004 0.00000 / 0.65);
  --dock-outline: oklch(0.25543328 0.01903326 298.77205 / 0.06);
  --nav-highlight: oklch(0.99999999 0.00000004 0.00000 / 0.18);
  --nav-shadow: oklch(0.22773614 0.03305204 297.22251 / 0.09);
  /* Navigation follows the eyebrow hierarchy: quiet at rest, a small
     tonal lift on hover, and a slightly denser selected surface. */
  --nav-item-ink: var(--eyebrow-ink);
  --nav-active: oklch(0.25543328 0.01903326 298.77205 / 0.065);
  --nav-item-hover: oklch(0.25543328 0.01903326 298.77205 / 0.025);
  --nav-hover-in-duration: 70ms;
  --nav-hover-out-duration: 420ms;
  --nav-rounding: 24px;
  --nav-item-padding: 9px;
  --nav-item-font-size: 12px;
  --nav-container-padding: 0px;
  --nav-height: 48px;
  --nav-main-width: 252px;
  --nav-context-width: 120px;
  --nav-section-gap: 12px;

  /* Glass material */
  --glass-rgb: 247, 245, 253;
  --glass-alpha: .45;
  --glass-contrast: 0;
  --card-rim: oklch(0.99999999 0.00000004 0.00000 / 0.08);
  --card-highlight: oklch(0.99999999 0.00000004 0.00000 / 0.18);
  --card-shade: oklch(0.24036760 0.04137380 305.37990 / 0.06);
  --glass-edge: inset 0 1px 0 var(--card-highlight), inset 0 -1px 0 var(--card-shade);
  --room-blur: 12px;
  --room-shade: .18;
  --text-shadow: none;

  /* Type */
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --type-scale: 1;
  --space-density: 1;
  --font-weight-body: 400;
  --font-weight-heading: 400;
  --font-weight-label: 500;
  --font-weight-strong: 600;
  --letter-spacing-heading: -.025em;
  --letter-spacing-card: -.02em;
  --letter-spacing-body: 0em;
  --letter-spacing-label: .08em;
  --line-height-heading: 1.15;
  --line-height-card: 1.2;
  --line-height-label: 1.4;
  --card-title-scale: 1;
  --font-size-caption: max(10px, calc(11px * var(--type-scale)));
  --font-size-note: max(11px, calc(12px * var(--type-scale)));
  --font-size-small: max(12px, calc(13px * var(--type-scale)));
  --font-size-project-summary: clamp(14px, calc(15px * var(--type-scale)), 16px);
  --font-size-body: max(14px, calc(16px * var(--type-scale)));
  --font-size-reading: var(--font-size-body);
  --font-size-home-heading: clamp(calc(31px * var(--type-scale)), calc(2.86vw * var(--type-scale)), calc(44px * var(--type-scale)));
  --font-size-card-heading: clamp(calc(22px * var(--type-scale)), calc(2vw * var(--type-scale)), calc(30px * var(--type-scale)));
  --font-size-section-heading: clamp(calc(20px * var(--type-scale)), calc(1.6vw * var(--type-scale)), calc(26px * var(--type-scale)));
  --font-size-footer-heading: var(--font-size-home-heading);
  --font-size-hero-support: var(--font-size-body);
  --measure-body: 66ch;
  --measure-heading: 32ch;
  --space-detail-heading: var(--space-2);
  --space-detail-context: var(--space-4);
  --space-detail-sections: var(--space-8);
  --line-height-body: 1.6;
  --line-height-reading: var(--line-height-body);

  /* Spacing scale */
  --space-unit: calc(4px * var(--space-density));
  --space-1: var(--space-unit);
  --space-2: calc(var(--space-unit) * 2);
  --space-3: calc(var(--space-unit) * 3);
  --space-4: calc(var(--space-unit) * 4);
  --space-5: calc(var(--space-unit) * 5);
  --space-6: calc(var(--space-unit) * 6);
  --space-7: calc(var(--space-unit) * 7);
  --space-8: calc(var(--space-unit) * 8);
  --space-10: calc(var(--space-unit) * 10);
  --space-12: calc(var(--space-unit) * 12);
  --space-card-inset: var(--space-10);
  --space-card-inset-compact-y: 30px;
  --space-card-inset-compact-x: var(--space-6);
  --card-padding-top: 56px;
  --card-padding-bottom: 60px;
  --space-story-inset: var(--space-8);
  --space-title-eyebrow: calc(var(--space-2) * var(--card-title-scale));
  --space-hero-heading-content: var(--space-6);
  --space-text-media: var(--space-8);
  --space-paragraph: var(--space-5);
  --space-detail-columns: clamp(var(--space-8), 4vw, calc(var(--space-unit) * 20));
  --space-hero-top: clamp(calc(var(--space-unit) * 24), 17vh, calc(var(--space-unit) * 48));
  --space-hero-bottom: clamp(var(--space-12), 11vh, calc(var(--space-unit) * 32));
  --space-footer-inset: clamp(calc(var(--space-unit) * 20), 12vh, calc(var(--space-unit) * 40));
  --space-footer-heading-content: var(--space-hero-heading-content);
  /* Major page gaps: 10 / 20 / 40 spacing units. */
  --space-page-rhythm-sm: calc(var(--space-unit) * 10);
  --space-page-rhythm-md: calc(var(--space-unit) * 20);
  --space-page-rhythm-lg: calc(var(--space-unit) * 40);
  --space-page-rhythm: var(--space-page-rhythm-sm);
  --image-max-width-landscape: 1000px;
  --image-max-width-portrait: 600px;
  --image-max-height-portrait: 700px;
  --image-frame-regular-aspect: 8 / 5;
  --image-rounding: 6px;
  --image-frame-masonry-portrait-aspect: 3 / 4;
  --full-bleed-padding-top: 0px;
  --full-bleed-padding-side: 0px;
  --full-bleed-padding-bottom: 0px;
  --image-shade-rgb: 10, 9, 17;
  --card-gap-desktop: 28px;
  --card-gap-mobile: 18px;
  --card-gap: var(--card-gap-desktop);

  /* Card geometry; studio controls scale these related values together. */
  --radius-card: 64px;
  --radius-card-compact: 44px;
  --radius-card-flip: 44px;
  --radius-card-flip-compact: 36px;
  --radius-card-wide-min: 48px;
  --radius-card-wide-fluid: 7vw;
  --radius-card-wide-max: 140px;
  --radius-card-simple: 42px;
  --radius-visual: 24px;
  --radius-visual-portrait: 29px;
  --radius-visual-flip: 26px;
  --radius-header-control: 18px;

  /* Page layout and edge fade */
  --header-height: 112px;
  --page-top: 18px;
  --flat-text-column: .88fr;
  --flat-card-column: 1.12fr;
  --portrait-detail-viewport-inset: clamp(96px, 14svh, 160px);
  --detail-image-top-inset: 160px;
  --detail-image-bottom-inset: max(80px, calc(env(safe-area-inset-bottom) + 56px));
  --edge-shade-top-depth: 23vh;
  --edge-shade-bottom-depth: 31vh;
  --edge-shade-side-depth: 18vw;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: oklch(.185 .003 285.9);
  --page-rgb: 19, 19, 21;
  --card-surface: oklch(.205 .004 285.9);
  --card-surface-end: oklch(.135 .002 285.9);
  --card-surface-rgb: 23, 23, 25;
  --card-hover-lightness: .27;
  --card-hover-chroma: .031;
  --card-hover-lightness-end: .145;
  --card-hover-chroma-end: .006;
  --card-label-rest-strength: 48%;
  --card-summary-rest-strength: 72%;
  --card-reflection-scale: .25;
  --card-glow-rgb: 13, 13, 15;
  --card-glow-scale: .3;
  --ink: oklch(0.97184305 0.01472839 294.47299);
  --muted: oklch(0.80000842 0.02860611 299.43531);
  --body-ink: var(--muted);
  --eyebrow-ink: oklch(.68 .012 300);
  --panel: oklch(0.24590671 0.02266461 288.42877 / 0.96);
  --chrome: oklch(0.30272328 0.03049884 289.83659 / 0.82);
  --image-edge: oklch(0.99999999 0.00000004 0.00000 / 0.06);
  --nav-glass-rgb: 28, 27, 37;
  --nav-glass-alpha: .58;
  --dock-glass-alpha: .34;
  --dock-backdrop-brightness: .65;
  --nav-rim: oklch(0.99999999 0.00000004 0.00000 / 0.04);
  --dock-outline: oklch(0.97184305 0.01472839 294.47299 / 0.03);
  --nav-highlight: oklch(0.99999999 0.00000004 0.00000 / 0.035);
  --nav-shadow: oklch(0.00000000 0.00000000 0.00000 / 0.18);
  --nav-item-ink: var(--eyebrow-ink);
  --nav-active: oklch(0.99999999 0.00000004 0.00000 / 0.08);
  --nav-item-hover: oklch(0.99999999 0.00000004 0.00000 / 0.025);
  --glass-rgb: 13, 13, 15;
  --glass-contrast: .15;
  --card-rim: oklch(0.99999999 0.00000004 0.00000 / 0.02);
  --card-highlight: oklch(0.99999999 0.00000004 0.00000 / 0.04);
  --card-shade: oklch(0.00000000 0.00000000 0.00000 / 0.16);
  --text-shadow: 0 1px 4px oklch(0 0 0 / .25);
}

@media (max-width: 1000px) {
  :root { --font-size-home-heading: clamp(calc(24.5px * var(--type-scale)), calc(3.1vw * var(--type-scale)), calc(34.5px * var(--type-scale))); }
}

@media (max-width: 600px) {
  :root { --font-size-home-heading: clamp(calc(22px * var(--type-scale)), calc(5.5vw * var(--type-scale)), calc(30px * var(--type-scale))); }
  :root { --card-gap: var(--card-gap-mobile); }
}

/* Neutral cards keep their separation from the page in either theme. */
:root.card-color-hidden {
  --page: #f4f4ef;
  --page-rgb: 244, 244, 239;
  --card-surface: #fefef9;
  --card-surface-end: #fdfdf8;
  --card-surface-rgb: 254, 254, 249;
}

:root[data-theme="dark"].card-color-hidden {
  --page: #050506;
  --page-rgb: 19, 19, 21;
  --card-surface: #131314;
  --card-surface-end: #101011;
  --card-surface-rgb: 19, 19, 20;
}

:root{--composer-max-width:520px;--composer-font-size:clamp(13px,1.3vw,15px);--composer-text-ink:var(--muted)}

/* style.css */
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--page);color:var(--ink);font-family:var(--font-family-sans);-webkit-font-smoothing:antialiased}button,a,input{-webkit-tap-highlight-color:transparent}button,a{color:inherit}button{font:inherit;border:0;cursor:pointer}a{text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #755fd1;outline-offset:5px}header{height:112px;max-width:1512px;padding:0 64px;margin:auto;display:flex;align-items:center;gap:24px}.brand{font-size:31px;letter-spacing:-2px;font-weight:600}.brand span{font-size:13px;vertical-align:top;letter-spacing:0;margin-left:4px}.discipline{font-size:13px;color:#79777e;letter-spacing:.02em}#settingsToggle{margin-left:auto;background:none;font-size:23px;color:#6f6c77;padding:12px}main{max-width:1512px;margin:auto;padding:18px 64px 150px}.intro{display:flex;align-items:end;justify-content:space-between;margin:10px 4px 35px;gap:20px}.intro h1{font-size:clamp(26px,3vw,42px);font-weight:400;letter-spacing:-1.5px;margin:0 0 12px}.intro p{font-size:14px;color:#85818a;margin:0}.layout-control{display:flex;gap:4px;background:#edebee;padding:4px;border-radius:24px}.layout-control button{padding:10px 15px;border-radius:20px;background:none;color:#78747e;font-size:13px}.layout-control button.active{background:white;color:#28252d;box-shadow:0 1px 4px #00000008}.grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--card-gap);align-items:start}.column{display:flex;flex-direction:column;gap:var(--card-gap)}.surface{position:relative;border-radius:var(--radius-card);background:var(--bg);isolation:isolate;transform-origin:0 0;will-change:transform;box-shadow:none}.project-card{display:block;width:100%;text-align:left;padding:var(--card-padding-top) var(--card-padding-right,var(--space-card-inset)) var(--card-padding-bottom) var(--card-padding-left,var(--space-card-inset));min-height:435px;background:var(--bg)}.project-card.portrait{min-height:650px}.project-card h2{max-width:370px;margin:0;font-weight:400;font-size:clamp(calc(21px * var(--card-title-scale)),calc(2.2vw * var(--card-title-scale)),calc(31px * var(--card-title-scale)));line-height:1.13;letter-spacing:-.9px}.eyebrow{font-size:var(--font-size-caption);text-transform:uppercase;letter-spacing:1.3px;color:#777180;margin:18px 0 0;line-height:1.5}.visual{position:relative;margin:30px 0 0;border-radius:var(--radius-visual);overflow:hidden;height:250px;background:#25212c}.visual img,.visual canvas{width:100%;height:100%;object-fit:cover;display:block}.visual canvas{position:absolute;inset:0}.project-card:where([data-card-layout="portrait"]) .visual{width:68%;height:390px;margin:36px auto 12px;border-radius:var(--radius-visual-portrait)}.card-bottom{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-note);color:#706877;margin-top:24px}.card-bottom .open-symbol{display:grid;place-items:center;border:1px solid #ffffffb0;border-radius:50%;width:28px;height:28px;font-size:19px}.detail{padding:52px;min-height:620px}.detail h1{font-size:clamp(30px,3.6vw,49px);font-weight:400;line-height:1.09;letter-spacing:-1.8px;max-width:750px;margin:0}.detail-layout{display:grid;grid-template-columns:1fr 1.6fr;gap:52px;align-items:center;margin-top:36px}.detail .visual{margin:0;height:380px}.description dl{margin:0}.description dt{font-size:var(--font-size-caption);text-transform:uppercase;letter-spacing:1.4px;color:#817888;margin:24px 0 9px}.description dd{font-size:var(--font-size-reading);line-height:var(--line-height-reading);margin:0;max-width:300px}.detail-footer{display:flex;justify-content:space-between;margin:28px 3px;font-size:var(--font-size-small);color:#89838e}.detail-footer button{background:none;padding:4px}.story{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:var(--card-gap)}.story .surface{padding:var(--space-story-inset)}.story h2{font-weight:400;font-size:24px;letter-spacing:-.5px}.story p{font-size:var(--font-size-body);line-height:var(--line-height-body);color:#686370}.story .visual{height:310px}.dock{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);width:302px;height:60px;z-index:30;transition:width 1s cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 8px 22px #55505b18)}.dock-shapes{position:absolute;inset:0;filter:url(#goo);pointer-events:none}.dock-shapes i{position:absolute;top:0;height:60px;border-radius:22px;background:#ffffffeb;box-shadow:inset 0 1px 0 #fff;backdrop-filter:blur(18px)}.main-shape{right:0;width:302px}.context-shape{left:140px;width:140px;transition:left 1.15s cubic-bezier(.22,1,.36,1),width 1.1s}.dock.split{width:462px}.dock.split .context-shape{left:0}.dock nav{height:60px;position:absolute;right:0;width:302px;display:flex;align-items:center;justify-content:space-evenly}.dock nav a{padding:12px 17px;font-size:var(--font-size-small);color:#817b89;border-radius:16px;transition:background .4s,color .4s}.dock nav a.active{background:#eae5f283;color:#403448}.context-nav{position:absolute;left:0;width:140px;height:60px;display:flex;align-items:center;justify-content:space-evenly;opacity:0;visibility:hidden;transform:translateX(110px);transition:opacity .4s,transform 1s,visibility .4s}.split .context-nav{opacity:1;visibility:visible;transform:translateX(0);transition-delay:.15s}.context-nav button{background:none;padding:10px;font-size:18px}.context-nav span{font-size:var(--font-size-caption);color:#827a8c;white-space:nowrap}.simple{padding:65px;min-height:550px;background:linear-gradient(145deg,#f5e5e9,#e6dff6)}.simple h1{font-size:clamp(36px,5vw,70px);line-height:1.05;font-weight:400;letter-spacing:-2px;max-width:780px}.simple p{font-size:20px;line-height:1.6;max-width:620px;color:#716678}.simple a{display:inline-block;border-bottom:1px solid;padding:10px 0}.filters{position:absolute;width:0;height:0;overflow:hidden}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#settings{position:fixed;right:28px;top:85px;z-index:50;width:300px;border:1px solid #fff;background:#fffffff2;backdrop-filter:blur(22px);padding:24px;border-radius:26px;box-shadow:0 15px 60px #35303e20}.panel-heading{display:flex;justify-content:space-between;font-size:16px;margin-bottom:22px}.panel-heading button{background:none;font-size:22px}#settings label{display:block;font-size:var(--font-size-small);margin:20px 0;color:#645b70}output{float:right}input[type=range]{width:100%;margin:14px 0 0;accent-color:#8a70ba}#settings p{font-size:13px;line-height:1.6;color:#8b8293}#replay{padding:12px 18px;border-radius:14px;background:#ece6f4;width:100%}.footer-note{text-align:center;color:#97909c;font-size:var(--font-size-note);margin-top:50px}.transition-clone{position:fixed;z-index:20;pointer-events:none;margin:0!important;transform-origin:0 0}.project-card[data-card-layout="landscape"]{min-height:400px}.project-card[data-card-layout="landscape"] .visual{width:100%;height:240px;margin:28px 0 0;border-radius:var(--radius-visual)}@media(min-width:1600px){main{padding-top:28px}}@media(max-width:850px){header{height:90px;padding:0 28px}main{padding:12px 24px 140px}.project-card{padding:var(--card-padding-top) var(--card-padding-right,26px) var(--card-padding-bottom) var(--card-padding-left,26px);border-radius:var(--radius-card-compact)}.project-card.portrait{min-height:550px}.project-card:where([data-card-layout="portrait"]) .visual{width:80%;height:310px}.project-card .visual{height:210px}.detail{padding:36px;border-radius:var(--radius-card-compact)}.detail-layout{gap:28px}.detail .visual{height:330px}}@media(max-width:600px){header{padding:0 23px;height:80px}.discipline{font-size:12px}.intro{align-items:start;flex-direction:column;margin-bottom:25px}.intro h1{font-size:31px}.grid{gap:var(--card-gap);grid-template-columns:1fr}.column{gap:var(--card-gap)}.project-card{min-height:390px}.project-card.portrait{min-height:490px}.project-card h2{font-size:calc(26px * var(--card-title-scale))}.project-card:where([data-card-layout="portrait"]) .visual{height:310px;width:67%}.detail{padding:30px 26px}.detail h1{font-size:34px}.detail-layout{grid-template-columns:1fr;margin-top:28px;gap:10px}.detail .visual{height:300px}.description dl{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.description dt{grid-column:1/-1}.description dd{grid-column:1/-1}.story{grid-template-columns:1fr}.dock{bottom:20px;width:264px}.main-shape,.dock nav{width:264px}.dock.split{width:358px}.context-shape,.context-nav{width:82px}.context-nav span{display:none}.context-nav button{padding:8px}.dock nav a{padding:12px 14px}.simple{padding:32px;min-height:500px;border-radius:var(--radius-card-simple)}.simple p{font-size:18px}.detail-footer{font-size:12px}#settings{right:18px;top:72px}.story .surface{border-radius:var(--radius-card-compact)}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* The moving surface and its contents have independent geometry. */
.flow-shell{position:fixed;z-index:25;pointer-events:none;overflow:visible;isolation:isolate;background:none!important;box-shadow:none;will-change:width,height,left,top}
.flow-content{position:absolute!important;left:0;top:0;pointer-events:none;clip-path:none!important;transform-origin:0 0;min-height:0!important}
.motion-viewport{position:fixed;inset:0;overflow:hidden;contain:paint;isolation:isolate;pointer-events:none}
html,body{overflow-x:hidden}
@supports(overflow:clip){html,body{overflow-x:clip}}
html.route-transition #main{overflow:clip}
@media(hover:none) and (pointer:coarse){html.route-transition{scrollbar-width:none}html.route-transition::-webkit-scrollbar{display:none}}
.detail-layout>*{min-width:0}
.flow-picture{position:absolute;display:block;object-fit:cover;max-width:none;z-index:2}
.flow-shared{pointer-events:none;white-space:normal;transform:none!important}.flow-content .description{position:relative}main{transform-origin:center top}
/* Broad glass reflections: soft white fields across the whole material. */
.surface>*{position:relative;z-index:1}.surface .visual canvas{position:absolute}
@media(prefers-reduced-motion:reduce){.motion-afterglow{display:none}}
.detail{cursor:auto;touch-action:auto;user-select:auto}@media(max-width:750px){.detail{touch-action:pan-y}}.detail img{-webkit-user-drag:none;user-select:none}.is-grabbing,.is-grabbing *{cursor:grabbing!important;user-select:none!important}
.drag-stage{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden}.drag-layer{max-width:none!important;transform-origin:center top}.drag-layer .detail{visibility:visible}
main{position:relative;z-index:1}.material-wake{z-index:0}
/* The glass skin moves on its own compositing layer; images and typography keep their proportions. */
.has-liquid-skin{background:transparent!important;box-shadow:none!important;will-change:auto}
.has-liquid-skin::before,.has-liquid-skin::after{display:none!important}
.surface>.liquid-skin{position:absolute!important;inset:0;z-index:0!important;pointer-events:none;background:var(--bg);border-radius:inherit;transform-origin:center;will-change:transform;overflow:hidden}
.material-reflection{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 18% 6%,#ffffffa0,transparent 55%),radial-gradient(ellipse at 90% 75%,#ffffff66,transparent 52%),linear-gradient(118deg,transparent 32%,#ffffff44 44%,transparent 67%);opacity:calc(var(--reflection-strength,.1) * var(--card-reflection-scale));will-change:transform}
.liquid-skin::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at 22% 40%,rgba(var(--card-glow-rgb),calc(.53 * var(--card-glow-scale))),transparent 70%);opacity:var(--skin-glow,0)}
.flow-content>.liquid-skin{display:none!important}
.motion-afterglow{position:fixed;z-index:19;pointer-events:none;will-change:left,top,width,height;filter:none;box-shadow:none;mix-blend-mode:normal;background:radial-gradient(ellipse,rgba(var(--card-glow-rgb),calc(.27 * var(--card-glow-scale))),transparent 70%);opacity:var(--glow-strength,.25)}
#settings{max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain;backdrop-filter:none;background:#fffffff5}
.drag-layer .liquid-skin{will-change:transform}.flow-content{will-change:opacity}
.flow-material{position:absolute;inset:0;z-index:0;transform-origin:center;will-change:transform;background-size:100% 100%;pointer-events:none;overflow:hidden}
body{background:var(--page);color:var(--ink)}header{position:relative;z-index:2}.room-backdrop{position:fixed;inset:0;z-index:0;background-size:cover;background-position:center;pointer-events:none}.room-shade{position:fixed;inset:0;z-index:0;background:rgba(0,0,0,var(--room-shade));pointer-events:none;display:none}.has-room .room-shade{display:block}
header .theme-toggle{margin-left:auto;padding:10px 16px;border-radius:18px;background:var(--chrome);font-size:13px}#settingsToggle{margin-left:0;color:var(--ink)}
.has-room .liquid-skin,.has-room .flow-material{backdrop-filter:blur(var(--room-blur)) saturate(1.12);-webkit-backdrop-filter:blur(var(--room-blur)) saturate(1.12)}
.has-room .surface h1,.has-room .surface h2,.has-room .surface p,.has-room .description{color:var(--ink);text-shadow:var(--text-shadow)}
[data-theme=dark] .discipline,[data-theme=dark] .eyebrow,[data-theme=dark] .card-bottom,[data-theme=dark] .intro p,[data-theme=dark] .description dt,[data-theme=dark] .detail-footer,[data-theme=dark] .story p,[data-theme=dark] .simple p,[data-theme=dark] .footer-note{color:var(--muted)}
.has-room .discipline,.has-room .intro p,.has-room .footer-note,.has-room .detail-footer{color:var(--ink);text-shadow:var(--text-shadow)}
.has-room header .brand,.has-room .intro h1{padding:6px 10px;border-radius:14px;background:rgba(var(--glass-rgb),.6);text-shadow:var(--text-shadow)}
.layout-control{background:var(--chrome)}.layout-control button{color:var(--muted)}.layout-control button.active{background:rgba(var(--glass-rgb),.8);color:var(--ink)}
.dock-shapes i{background:var(--chrome);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.dock nav a,.context-nav span{color:var(--muted)}.dock nav a.active{color:var(--ink);background:rgba(var(--glass-rgb),.5)}
#settings{background:var(--panel);color:var(--ink);border-color:#ffffff29}#settings label,#settings p{color:var(--muted)}#replay{background:var(--chrome);color:var(--ink)}.setting-section{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;margin:22px 0 14px;color:var(--muted)}.theme-choices{display:flex;padding:4px;border-radius:16px;background:var(--chrome);gap:4px}.theme-choices button{width:50%;padding:10px;border-radius:12px;background:none;color:var(--muted)}.theme-choices button.active{background:rgba(var(--glass-rgb),.8);color:var(--ink)}
.room-upload{border:1px dashed #938aab88;border-radius:18px;padding:8px;margin-top:18px}.room-upload #chooseRoom{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;width:100%;padding:18px 8px;font-size:14px;color:var(--ink)}.room-upload small{font-size:var(--font-size-note);color:var(--muted)}#roomName{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#removeRoom{background:var(--chrome);padding:9px;border-radius:11px;width:100%;font-size:12px;color:var(--ink)}#roomStatus:empty{display:none}
.room-drop-overlay{position:fixed;inset:18px;z-index:90;border:2px dashed #c1a3ff;border-radius:30px;background:#171322a6;pointer-events:none;align-items:center;justify-content:center;color:white;font-size:30px}.room-drop-overlay:not([hidden]){display:flex}.room-drop-overlay span{padding:22px 30px;background:#ffffff14;border-radius:24px}
@media(max-width:600px){header{gap:12px}.discipline{display:none}.room-drop-overlay{font-size:22px}.has-room .intro h1{font-size:28px}}

.visual img{-webkit-user-drag:none}
/* One edge treatment at rest, during movement and across the morph handoff. */
.surface>.liquid-skin,.flow-material,[data-theme=dark] .liquid-skin{box-shadow:var(--glass-edge)!important;border:0}
.dock-shapes i{box-shadow:var(--glass-edge)}
.card-bottom .open-symbol{border-color:var(--card-rim);box-shadow:var(--glass-edge)}
#settings{border-color:var(--card-rim)}
/* Reflections have identical lighting at rest and during the morph. */
.liquid-skin,.flow-material{transition:none!important}
.flow-material>.material-reflection{z-index:1}
.visual,.flow-picture{filter:none}
.flow-picture.visual{margin:0;position:absolute;background:#25212c}
.flow-picture img,.flow-picture canvas{width:100%;height:100%;object-fit:cover}
.visual canvas{object-fit:fill}

/* The project opens on a coloured hero; 1920px is the card width limit. */
.wide-project-hero-page{--hero-gutter:clamp(24px,4vw,96px);--hero-top:clamp(32px,3.5vw,80px)}
main.wide-project-hero{width:100%;max-width:calc(1920px + 2 * var(--hero-gutter));padding:var(--hero-top) var(--hero-gutter) 150px}
.wide-project-hero-page header{max-width:calc(1920px + 2 * var(--hero-gutter));padding-inline:var(--hero-gutter)}
.wide-hero-card{padding:clamp(36px,5.5vw,112px);border-radius:clamp(var(--radius-card-wide-min),var(--radius-card-wide-fluid),var(--radius-card-wide-max));min-height:min(1000px,calc(100svh - 192px))}
.wide-hero-card h1{max-width:1120px;font-size:clamp(36px,3vw,60px);line-height:1.12;letter-spacing:-1.8px}
.wide-hero-card>.eyebrow{margin-top:26px;font-size:13px;line-height:1.6}
.wide-hero-card .detail-layout{grid-template-columns:minmax(260px,1fr) minmax(0,1.8fr);gap:clamp(40px,7vw,160px);margin-top:clamp(44px,4.5vw,96px)}
.wide-hero-card .visual{width:100%;height:clamp(340px,29vw,570px);border-radius:clamp(28px,2.3vw,46px)}
.wide-hero-card .description{align-self:end;padding-bottom:4px}
.wide-hero-card .description dt{font-size:13px;letter-spacing:1px;margin:26px 0 10px}
.wide-hero-card .description dt:first-child{margin-top:0}
.wide-hero-card .description dd{max-width:400px;font-size:16px;line-height:1.75}
.wide-project-hero>.detail-footer,.wide-project-hero>.story{width:100%;max-width:1384px;margin-inline:auto}
.hero-layout-setting{display:flex!important;align-items:center;gap:10px}.hero-layout-setting input{accent-color:#8a70ba;width:17px;height:17px;margin:0}
@media(max-width:1000px){.wide-hero-card{padding:44px;border-radius:var(--radius-card);min-height:0}.wide-hero-card .detail-layout{gap:36px;grid-template-columns:minmax(230px,1fr) minmax(0,1.3fr)}.wide-hero-card .visual{height:360px}}
@media(max-width:750px){.wide-project-hero-page{--hero-gutter:24px;--hero-top:32px}.wide-hero-card{padding:32px 28px;border-radius:var(--radius-card-compact)}.wide-hero-card h1{font-size:clamp(32px,5.5vw,40px);letter-spacing:-1px}.wide-hero-card .detail-layout{grid-template-columns:minmax(0,1fr);gap:30px;margin-top:36px}.wide-hero-card .visual{height:clamp(260px,65vw,400px);border-radius:28px}.wide-hero-card .description dt{font-size:13px}.wide-hero-card .description dd{max-width:none}.wide-hero-card>.eyebrow{margin-top:22px;font-size:12px}}
@media(max-width:400px){.wide-project-hero-page{--hero-gutter:18px;--hero-top:26px}.wide-hero-card{padding:28px 24px;border-radius:var(--radius-card-flip-compact)}.wide-hero-card h1{font-size:30px}}
/* Pinned chrome floats above the canvas without reserving a header row. */
header{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;height:var(--header-height);margin:0;z-index:40;pointer-events:none}
header>*{pointer-events:auto}
/* Header chrome is fixed; page sections own their top rhythm. */
main:not(.wide-project-hero){/* padding-top:calc(var(--header-height) + var(--page-top)); */padding-top:0}
@media(min-width:1600px){:root{--page-top:28px}}
@media(max-width:1000px){.wide-project-hero-page{--hero-top:48px}}
@media(max-width:850px){:root{--header-height:90px;--page-top:12px}}
@media(max-width:600px){:root{--header-height:80px}}
@media(max-width:400px){.wide-project-hero-page{--hero-top:44px}}

/* About and Contact continue the same canvas beneath the project masonry. */
.info-grid{margin-top:var(--card-gap);align-items:stretch}
.info-card{min-height:360px;display:flex;flex-direction:column}
.info-card .info-summary{font-size:18px;line-height:1.65;max-width:420px;margin:32px 0 36px}
.info-card .card-bottom{margin-top:auto}
.info-body{max-width:800px;margin-top:clamp(40px,4vw,80px)}
.info-body p{font-size:clamp(18px,1.6vw,24px);line-height:1.65;margin:0 0 28px}
.info-body a{display:inline-block;font-size:18px;line-height:1.5;padding:12px 0;border-bottom:1px solid currentColor}
@media(max-width:600px){.info-grid{margin-top:var(--card-gap)}.info-card{min-height:320px}.info-card .info-summary{font-size:17px}.info-body{margin-top:36px}}

/* Keep the returning card's compositor topology intact after its slide ends. */
.docked-card{transform:translate3d(0px,0px,0px);will-change:transform}
.docked-card .visual canvas{transform:translateZ(0)}
.surface>.liquid-skin,.material-reflection{transform:translate3d(0px,0px,0px)}

/* An open introduction above the work: space, rather than another glass card. */
main.home-canvas{max-width:1920px;padding-inline:clamp(24px,5.4vw,110px)}
.home-hero{display:block;padding:var(--space-page-rhythm) clamp(0px,1.75vw,36px) var(--space-page-rhythm)}
.hero-about{max-width:900px}
.hero-about h1{margin:0 0 24px;font-size:var(--font-size-home-heading);line-height:1.08;font-weight:400;letter-spacing:-.04em;color:var(--ink)}
.hero-copy{font-size:var(--font-size-hero-support);line-height:1.65;font-weight:400;letter-spacing:-.025em;color:#7d7b80}
.hero-copy p{margin:0;text-wrap:pretty}.hero-copy p+p{margin-top:8px}
.hero-copy p span{color:var(--ink)}
.hero-news h2{font-size:.875rem;line-height:1.4;font-weight:400;text-transform:uppercase;letter-spacing:.025em;margin:0 0 14px;color:#68646c}
.hero-news ol{list-style:none;margin:0;padding:0}
.hero-news li{padding:32px 0;border-bottom:1px solid rgba(70,60,83,.08)}
.hero-news li:last-child{border-bottom:0;padding-bottom:0}
.hero-news h3{margin:0;font-size:1.125rem;font-weight:400;line-height:1.5;letter-spacing:-.015em;color:#555258;overflow-wrap:anywhere}
.home-news{max-width:900px;margin:var(--space-page-rhythm) 0 36px}
.home-view-split [data-home-news]{display:none!important}
.gallery-toolbar{display:flex;justify-content:flex-end;margin:0 0 24px}
.gallery-toolbar .layout-control button{font-size:.875rem}
[data-theme=dark] .hero-copy,[data-theme=dark] .hero-news h2{color:var(--muted)}
[data-theme=dark] .hero-copy p span,[data-theme=dark] .hero-news h3{color:var(--ink)}
[data-theme=dark] .hero-news li{border-color:rgba(255,255,255,.10)}
.has-room .home-hero{background:linear-gradient(145deg,rgba(var(--glass-rgb),.72),rgba(var(--glass-rgb),.42));border-radius:44px;margin-top:32px;margin-bottom:40px;padding-block:clamp(80px,14vh,160px);backdrop-filter:blur(var(--room-blur));-webkit-backdrop-filter:blur(var(--room-blur))}
.has-room .hero-about h1,.has-room .hero-copy,.has-room .hero-copy p span,.has-room .hero-news h2,.has-room .hero-news h3{color:var(--ink);text-shadow:var(--text-shadow)}
@media(max-width:1000px){.home-hero{grid-template-columns:1fr;gap:60px;padding:100px 12px 100px}.hero-copy{max-width:740px;font-size:var(--font-size-hero-support)}.hero-news{max-width:740px;width:100%}.hero-news li{padding:24px 0}}
@media(max-width:600px){.home-hero{padding:64px 4px 72px;gap:48px}.hero-about h1{margin-bottom:24px}.hero-copy{font-size:var(--font-size-hero-support);line-height:1.65}.hero-copy p+p{margin-top:8px}.hero-news h3{font-size:1rem}.hero-news li{padding:22px 0}.gallery-toolbar{margin-bottom:20px}.has-room .home-hero{padding:36px 24px;border-radius:32px}}

/* Placement adapters share a flat collection of persistent card slots. */
.gallery-grid{display:grid;grid-template-columns:repeat(var(--effective-columns,2),minmax(0,1fr));grid-auto-rows:8px;column-gap:var(--card-gap);align-items:start}
.gallery-grid[data-layout="masonry"]{grid-auto-flow:row dense}
.gallery-grid[data-columns="1"]{max-width:900px;margin-inline:auto}
.card-slot,.card-placement{min-width:0;width:100%}
.gallery-grid .card-slot{align-self:start}
.info-grid[hidden],.home-view-control[hidden]{display:none!important}
.flip-index{display:none}
.home-view-control{display:flex;gap:3px;padding:4px;border-radius:20px;background:var(--chrome);margin-left:auto}
.home-view-control button{font-size:.875rem;border-radius:16px;padding:9px 14px;background:none;color:var(--muted)}
.home-view-control button.active{background:rgba(var(--glass-rgb),.8);color:var(--ink)}
header .theme-toggle{margin-left:0}
#gridColumns,#homeViewSelect,#homeLayoutSelect{display:block;width:100%;font:inherit;color:var(--ink);background:var(--chrome);border:1px solid var(--card-rim);padding:10px;border-radius:12px;margin-top:12px}
.home-view-split .homepage-layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(64px,8vw,160px);position:relative}
.home-view-split .home-hero{display:block;grid-column:1;position:sticky;top:calc(var(--header-height) + 40px);align-self:start;max-height:calc(100svh - var(--header-height) - 80px);overflow-y:auto;overscroll-behavior:contain;padding:0 24px;margin-top:clamp(120px,18vh,230px);margin-bottom:0}
.home-view-split .hero-about h1{margin-bottom:22px}
.home-view-split .hero-copy{font-size:var(--font-size-hero-support);line-height:1.6}
.home-view-flip .hero-news{margin-top:34px}
.home-view-flip .hero-news li{padding:17px 0}
.home-view-flip .hero-news li:last-child{padding-bottom:0}
.home-view-flip .hero-news h3{font-size:1rem}
.home-view-split .home-work{grid-column:2;padding-top:clamp(48px,8vh,100px);min-width:0}
.home-view-flip .gallery-toolbar{display:none}
.home-view-flip .gallery-grid{display:block;max-width:none;margin:0;perspective:1500px}
.home-view-flip .card-slot{display:grid;place-items:center;height:clamp(480px,65svh,760px);position:relative;grid-row:auto!important}
.home-view-flip .card-placement{width:min(100%,580px);transform-origin:center;backface-visibility:hidden;will-change:transform,opacity}
.project-card[data-card-presentation="flip"]{padding:32px 32px 26px;min-height:0;height:clamp(460px,60svh,620px);border-radius:var(--radius-card-flip)}
.project-card[data-card-presentation="flip"] h2{font-size:clamp(calc(23px * var(--card-title-scale)),calc(1.75vw * var(--card-title-scale)),calc(30px * var(--card-title-scale)));max-width:440px;line-height:1.15}
.project-card[data-card-presentation="flip"] .visual{width:100%;height:clamp(210px,29svh,330px);margin:28px 0 0;border-radius:var(--radius-visual-flip)}
.project-card[data-card-presentation="flip"] .eyebrow{font-size:.75rem;margin-top:16px}
.project-card[data-card-presentation="flip"] .card-bottom{margin-top:22px}
.info-card[data-card-presentation="flip"]{justify-content:center}
.info-card[data-card-presentation="flip"] .card-bottom{margin-top:auto}
.home-view-split .flip-index{display:flex;position:fixed;right:clamp(10px,2vw,44px);top:50%;transform:translateY(-50%);z-index:35;flex-direction:column;gap:0}
.flip-index button{display:grid;place-items:center;width:32px;height:28px;background:none;border-radius:12px}
.flip-index span{display:block;width:4px;height:4px;border-radius:50%;background:var(--ink);opacity:.18;transition:opacity .25s,transform .25s}
.flip-index button.active span{opacity:.8;transform:scale(1.5)}
.home-view-split .footer-note{margin-top:30px}
.has-room .home-view-split .home-hero{padding:28px;border-radius:32px}
@media(max-width:1000px){.home-view-split .homepage-layout{grid-template-columns:1fr;gap:40px}.home-view-split .home-hero{position:relative;top:auto;max-height:none;overflow:visible;margin:64px 0 0;padding:0 12px}.home-view-split .hero-copy{max-width:720px;font-size:var(--font-size-hero-support)}.home-view-flip .hero-news{max-width:720px}.home-view-split .home-work{grid-column:1;padding-top:0}.home-view-flip .card-placement{width:min(80%,580px)}.home-view-flip .card-slot{height:clamp(520px,75svh,700px)}}
@media(max-width:600px){.gallery-grid{column-gap:var(--card-gap)}.home-view-control button{padding:8px 10px}.home-view-split .home-hero{margin-top:48px;padding:0 4px}.home-view-split .hero-copy{font-size:var(--font-size-hero-support)}.home-view-flip .card-placement{width:calc(100% - 16px)}.project-card[data-card-presentation="flip"]{height:520px;padding:30px 26px;border-radius:var(--radius-card-flip-compact)}.project-card[data-card-presentation="flip"] .visual{height:250px}.home-view-flip .card-slot{height:600px}.home-view-split .flip-index{right:0}.brand{font-size:27px}}
.content-grid{grid-template-columns:repeat(var(--content-columns,2),minmax(0,1fr))}
.content-grid>.surface{grid-column:span var(--block-span,1);min-width:0}
@media(max-width:850px){.content-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.content-grid>.surface{grid-column:auto}}
@media(max-width:600px){.content-grid{grid-template-columns:minmax(0,1fr)}.content-grid>.surface{grid-column:1/-1}}

/* The same image/canvas becomes the whole card; typography stays above it. */
.visual::after{--image-shade-tone:var(--card-tone-rgb,var(--image-shade-rgb));content:'';position:absolute;top:0;left:0;right:0;height:var(--image-shade-height,180px);max-height:100%;z-index:1;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,rgba(var(--image-shade-tone),.92) 0%,rgba(var(--image-shade-tone),.78) 55%,rgba(var(--image-shade-tone),0) 100%);opacity:var(--image-overlay,0)}
[data-theme=dark] .visual::after{--image-shade-tone:var(--glass-rgb)}
.image-card[data-image-mode="bleed"]{display:flex;flex-direction:column;min-height:470px}
.image-card[data-image-mode="bleed"][data-card-layout="portrait"]{min-height:650px}
.image-card[data-image-mode="bleed"]>.visual{--image-overlay:1;position:absolute;inset:0;width:100%;height:100%;margin:0;border-radius:inherit;z-index:1;pointer-events:none}
.image-card[data-image-mode="bleed"]>.card-copy{position:relative;z-index:2;color:var(--card-title-ink,#fff);text-shadow:0 1px 5px #00000024}.image-card[data-image-mode="bleed"]>.card-copy>.eyebrow{opacity:.82}.image-card[data-image-mode="bleed"]>.card-bottom{position:relative;z-index:2;color:var(--card-title-ink,#fff);text-shadow:0 1px 5px #00000024}
[data-theme=dark] .image-card[data-image-mode="bleed"]>.card-copy,[data-theme=dark] .image-card[data-image-mode="bleed"]>.card-bottom{color:var(--ink)}
.image-card[data-image-mode="bleed"]>.card-bottom{margin-top:auto;padding-top:32px}
.image-card[data-image-mode="bleed"] .open-symbol{border-color:#ffffff24;background:#ffffff0a}
.image-card[data-image-mode="bleed"][data-card-presentation="flip"]{min-height:0}
.branding-hidden header .brand,.branding-hidden header .discipline{display:none}
header .theme-toggle{margin-left:auto}
@media(max-width:600px){.image-card[data-image-mode="bleed"]{min-height:390px}.image-card[data-image-mode="bleed"][data-card-layout="portrait"]{min-height:520px}.image-card[data-image-mode="bleed"][data-card-presentation="flip"]{min-height:0}}

/* A page-coloured resting fill lets the glass interpolate into hover. */
body.card-background-hidden .surface.project-card,body.card-background-hidden .surface.detail{background:transparent!important}
body.card-background-hidden .surface.detail>.liquid-skin,body.card-background-hidden .flow-material{background:transparent!important}
/* The morph shell must obey the same card-styling switch as its endpoints.
   Otherwise its rim and reflection draw a temporary rounded rectangle. */
body.card-background-hidden .flow-material{visibility:hidden!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.card-background-hidden.card-hover-hidden .surface.project-card>.liquid-skin{background:transparent!important}

/* Edge shades let the canvas pass beneath the viewport chrome. */
.page-edge-shades{position:fixed;inset:0;z-index:26;pointer-events:none;opacity:1}
.page-edge-shades[data-retreated="true"]{opacity:0}
.page-edge-shades[data-retreated="true"] .top{transform:translate3d(0,-100%,0)}
.page-edge-shades[data-retreated="true"] .bottom{transform:translate3d(0,100%,0)}
.page-edge-shades[data-retreated="true"] .left{transform:translate3d(-100%,0,0)}
.page-edge-shades[data-retreated="true"] .right{transform:translate3d(100%,0,0)}
.page-edge-shades i{position:absolute;display:block;opacity:0;transition:opacity .3s ease}
.page-edge-shades .top{top:0;left:0;right:0;height:var(--edge-shade-top-depth);background:linear-gradient(to bottom,rgba(var(--page-rgb),1) 0%,rgba(var(--page-rgb),.94) 24%,rgba(var(--page-rgb),.68) 55%,rgba(var(--page-rgb),0) 100%)}
.page-edge-shades .bottom{bottom:0;left:0;right:0;height:var(--edge-shade-bottom-depth);background:linear-gradient(to top,rgba(var(--page-rgb),1) 0%,rgba(var(--page-rgb),.96) 27%,rgba(var(--page-rgb),.72) 57%,rgba(var(--page-rgb),0) 100%)}
.page-edge-shades .left{top:0;bottom:0;left:0;width:var(--edge-shade-side-depth);background:linear-gradient(to right,rgba(var(--page-rgb),1) 0%,rgba(var(--page-rgb),.94) 24%,rgba(var(--page-rgb),.68) 55%,rgba(var(--page-rgb),0) 100%)}
.page-edge-shades .right{top:0;bottom:0;right:0;width:var(--edge-shade-side-depth);background:linear-gradient(to left,rgba(var(--page-rgb),1) 0%,rgba(var(--page-rgb),.94) 24%,rgba(var(--page-rgb),.68) 55%,rgba(var(--page-rgb),0) 100%)}
body.edge-shade-top .page-edge-shades .top,body.edge-shade-bottom .page-edge-shades .bottom,body.edge-shade-left .page-edge-shades .left,body.edge-shade-right .page-edge-shades .right{opacity:1}
@media(prefers-reduced-motion:reduce){.page-edge-shades i{transition:none}}

#settings{max-height:calc(100svh - 110px);overflow-y:auto;overscroll-behavior:contain}

/* Regular gives every card in a row the same holding frame; masonry follows
   each card's own landscape or portrait image orientation. */
.gallery-grid[data-layout="regular"]{grid-auto-rows:auto;row-gap:var(--card-gap);align-items:stretch}
.gallery-grid[data-layout="regular"] .card-slot{display:flex;align-self:stretch}
.gallery-grid[data-layout="regular"] .card-placement{display:flex;flex:1}
.gallery-grid[data-layout="regular"] .card-placement>.project-card{width:100%;height:100%;min-height:clamp(440px,43vw,650px)}
.gallery-grid[data-layout="regular"] .card-placement>.project-card:not([data-image-mode="bleed"]){min-height:0}
.gallery-grid[data-layout="regular"] .card-slot{grid-row:auto!important;grid-column:auto!important}
.image-card[data-image-mode="bleed"][data-card-orientation="portrait"]{min-height:650px}
@media(max-width:600px){.image-card[data-image-mode="bleed"][data-card-orientation="portrait"]{min-height:520px}}
@media(max-width:1000px){.home-view-flip .gallery-grid[data-layout="regular"] .card-slot{display:grid}.home-view-flip .gallery-grid[data-layout="regular"] .card-placement{display:block;flex:initial}.home-view-flip .gallery-grid[data-layout="regular"] .card-placement>.project-card{height:auto}}

/* Fit source imagery inside its visual frame without cropping or changing its ratio. */
.visual{background:transparent}
.visual img,.flow-picture img{object-fit:contain;object-position:center}
.flow-picture.visual{background:transparent}
.visual canvas,.flow-picture canvas{object-fit:fill}

/* Spotlight cards grow with their copy, keeping titles and card footers visible. */
.home-view-flip .card-slot{height:auto;min-height:clamp(480px,65svh,760px)}
.project-card[data-card-presentation="flip"]{height:auto;min-height:clamp(460px,60svh,620px)}
.image-card[data-image-mode="bleed"][data-card-presentation="flip"]{min-height:clamp(460px,60svh,620px)}
@media(max-width:1000px){.home-view-flip .card-slot{height:auto;min-height:clamp(520px,75svh,700px)}}
@media(max-width:600px){.home-view-flip .card-slot{height:auto;min-height:600px}.project-card[data-card-presentation="flip"]{height:auto;min-height:520px}.image-card[data-image-mode="bleed"][data-card-presentation="flip"]{min-height:520px}}

/* Width drives the holding frame, rather than a fixed pixel height. Regular
   uses one frame for both orientations; masonry gives mobile screens more room. */
.project-card[data-card-presentation="current"]:not([data-image-mode="bleed"]){min-height:0}
.project-card[data-card-presentation="current"]:not([data-image-mode="bleed"]) h2{min-height:0}
.project-card[data-card-presentation="current"]:not([data-image-mode="bleed"])>.visual{width:100%;height:auto;aspect-ratio:var(--image-frame-regular-aspect);margin:28px 0 0;border-radius:var(--radius-visual)}
.project-card[data-card-presentation="current"][data-card-layout="masonry"][data-card-orientation="portrait"]:not([data-image-mode="bleed"])>.visual{aspect-ratio:var(--image-frame-masonry-portrait-aspect)}
.project-card[data-card-presentation="current"][data-card-orientation="landscape"]:not([data-image-mode="bleed"])>.visual{width:min(100%,var(--image-max-width-landscape,1000px));aspect-ratio:var(--image-source-ratio,var(--image-frame-regular-aspect));margin-top:28px}
.project-card[data-card-presentation="current"][data-card-orientation="portrait"]:not([data-image-mode="bleed"])>.visual{width:var(--card-image-frame-width,100%);height:var(--card-image-frame-height,auto);aspect-ratio:var(--image-source-ratio,.468);margin:28px auto 0;flex:none}
.project-card[data-card-presentation="current"]:not([data-image-mode="bleed"])>.visual>img{position:absolute;inset:0}
.visual.liquid-image-ready:has(>canvas)>img{visibility:hidden}
/* Portrait detail media follows viewport height in either layout. The shared
   image fit keeps the complete screenshot centred within the available width. */
.detail[data-card-orientation="portrait"] .visual{width:100%;height:auto;max-height:min(var(--image-max-height-portrait,700px),calc(100svh - var(--portrait-detail-viewport-inset)));aspect-ratio:var(--image-source-ratio,.468);border-radius:var(--radius-visual-portrait)}
.detail[data-card-orientation="portrait"] .description{align-self:center}

/* The image backing belongs to the media, independently of the glass shell. */
.image-card>.visual{--image-size-limit:1;--image-padding-top:var(--image-inset-top,0px);--image-padding-bottom:var(--image-inset-bottom,0px);--image-padding-left:var(--image-inset-side,0px);--image-padding-right:var(--image-inset-side,0px)}
.image-card[data-card-orientation="landscape"]>.visual{--image-max-width:var(--image-max-width-landscape,1000px)}
.image-card[data-card-orientation="portrait"]>.visual{--image-max-width:var(--image-max-width-portrait,600px);--image-max-height:var(--image-max-height-portrait,700px)}
.detail[data-card-orientation="landscape"] .visual{--image-size-limit:1;--image-max-width:var(--image-max-width-landscape,1000px);width:min(100%,var(--image-max-width-landscape,1000px));height:auto;aspect-ratio:var(--image-source-ratio,var(--image-frame-regular-aspect));margin:0;--image-padding-top:0px;--image-padding-bottom:0px;--image-padding-left:var(--image-inset-side,0px);--image-padding-right:var(--image-inset-side,0px)}
.detail[data-card-orientation="portrait"] .visual{--image-size-limit:1;--image-max-width:var(--image-max-width-portrait,600px);--image-max-height:var(--image-max-height-portrait,700px);width:min(100%,var(--image-max-width-portrait,600px));margin-inline:auto;--image-padding-top:0px;--image-padding-bottom:0px;--image-padding-left:var(--image-inset-side,0px);--image-padding-right:var(--image-inset-side,0px)}
.image-card[data-image-mode="bleed"]>.visual{background:var(--bg)}
#bleedSettings{padding:2px 14px 12px;border-radius:16px;background:var(--chrome);margin:12px 0 20px}
#bleedSettings[hidden]{display:none}
#cardPaddingAllSettings[hidden],#cardPaddingSidesSettings[hidden]{display:none}
#bleedSettings label{margin:16px 0}
.image-backing-disabled .image-card[data-image-mode="bleed"]>.visual{background:transparent!important}
#bleedSettings p{margin:10px 0 0;font-size:12px}

.project-card h2{overflow-wrap:anywhere}

/* Card titles and metadata close up together as the title size is reduced. */
.project-card[data-card-presentation="current"]:not([data-image-mode="bleed"])>.card-copy>.eyebrow{margin-top:calc(18px * var(--card-title-scale))}

/* The title group leaves layout flow but keeps its original box for transitions. */
.image-card{--card-copy-inset-y:var(--card-padding-top);--card-copy-inset-x:var(--space-card-inset);--card-copy-inset-left:var(--card-padding-left,var(--card-copy-inset-x));--card-copy-inset-right:var(--card-padding-right,var(--card-copy-inset-x))}
@media(max-width:850px){.image-card{--card-copy-inset-y:var(--card-padding-top);--card-copy-inset-x:var(--space-card-inset-compact-x)}}
#settings label.setting-disabled{opacity:.45}#settings label.setting-disabled input{cursor:not-allowed}

/* A stable hairline follows the contained screenshot, including native/canvas handoff. */
.visual>.image-edge{position:absolute;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 1px var(--image-edge)}

/* Floating chrome uses small, independent backdrop surfaces. Filtered
   ancestors would isolate the backdrop and prevent the page showing through. */
.dock,.dock-shapes{filter:none}
header .home-view-control,header .theme-toggle,:is(header,.corner-controls) #settingsToggle,.dock-shapes i,.dock-glass{background:linear-gradient(145deg,rgba(var(--nav-glass-rgb),calc(var(--nav-glass-alpha) + .14)),rgba(var(--nav-glass-rgb),var(--nav-glass-alpha)));backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);border:1px solid var(--nav-rim);box-shadow:inset 0 1px 0 var(--nav-highlight),inset 0 -1px 0 #00000008,0 6px 22px var(--nav-shadow)}
header .home-view-control{border-radius:var(--radius-header-control)}
header .theme-toggle{height:40px;padding:0 14px;border-radius:var(--radius-header-control)}
:is(header,.corner-controls) #settingsToggle{width:40px;height:40px;padding:0;font-size:20px;border-radius:var(--radius-header-control)}
.home-view-control button.active,.dock nav a.active{background:var(--nav-active);color:var(--ink)}
.dock{width:var(--nav-main-width);height:var(--nav-height);--dock-bottom:max(24px,env(safe-area-inset-bottom));bottom:var(--dock-bottom)}
.dock.split{width:calc(var(--nav-main-width) + var(--nav-context-width) + var(--nav-section-gap))}
.dock-shapes i{height:var(--nav-height);border-radius:var(--nav-rounding)}
.main-shape,.dock nav{width:var(--nav-main-width)}
.context-shape,.context-nav{width:var(--nav-context-width)}
.context-shape{left:calc(var(--nav-main-width) - var(--nav-context-width));opacity:0;transition:left 1.15s cubic-bezier(.22,1,.36,1),opacity .4s}
.dock.split .context-shape{left:0;opacity:1}
.dock nav,.context-nav{height:var(--nav-height)}
.dock nav a{font-size:12px;line-height:16px;padding:9px 14px;border-radius:max(0px,calc(var(--nav-rounding) - 6px))}
.context-nav{transform:translateX(88px)}
.split .context-nav{transform:translateX(0)}
.context-nav button{width:38px;height:40px;padding:0;font-size:17px;border-radius:max(0px,calc(var(--nav-rounding) - 6px))}
.context-nav button:hover{background:var(--nav-active)}
@media(max-width:600px){:root{--nav-main-width:228px;--nav-context-width:92px;--nav-section-gap:10px}.dock{--dock-bottom:max(18px,env(safe-area-inset-bottom));bottom:var(--dock-bottom)}.context-nav button{width:42px}.dock nav a{padding-inline:12px}}
@media(max-width:380px){:root{--nav-main-width:210px;--nav-context-width:82px;--nav-section-gap:8px}.context-nav button{width:38px}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){header .home-view-control,header .theme-toggle,:is(header,.corner-controls) #settingsToggle,.dock-shapes i,.dock-glass{background:rgba(var(--nav-glass-rgb),.94)}}

/* One clipped glass silhouette buds and pinches apart; labels remain DOM controls. */
.dock.dock-morph{transition:none;filter:none}
.dock-morph .dock-shapes{display:none}
.dock-glass,.dock-content,.dock-outline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.dock-glass{z-index:0;border:0;box-shadow:none;will-change:clip-path;background:linear-gradient(145deg,rgba(var(--nav-glass-rgb),calc(var(--dock-glass-alpha) + .07)),rgba(var(--nav-glass-rgb),var(--dock-glass-alpha)));backdrop-filter:blur(var(--dock-glass-blur)) saturate(1.25) brightness(var(--dock-backdrop-brightness));-webkit-backdrop-filter:blur(var(--dock-glass-blur)) saturate(1.25) brightness(var(--dock-backdrop-brightness))}
.dock-content{z-index:1;will-change:clip-path}
.dock-outline{z-index:2;overflow:visible;fill:none;stroke:var(--dock-outline);stroke-width:1}
.dock-content nav,.dock-content .context-nav{pointer-events:auto;background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.dock-morph .context-nav{transform:none;transition:none}

/* Desktop details place text left and media right; mobile keeps media first. */
.detail-layout>.description{order:-1}
@media(max-width:750px){.detail-layout{grid-template-columns:minmax(0,1fr)}.detail-layout>.description{order:0}}

/* The same heading nodes join the description column. The transparent
   media pane starts at the card's top and contains either image orientation. */
.detail.heading-beside-image{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.8fr);grid-template-rows:minmax(0,1fr) max-content max-content max-content max-content minmax(0,1fr);column-gap:clamp(36px,5vw,100px);align-items:start;min-height:0}
.detail.heading-beside-image>.detail-layout{display:contents}
.detail.heading-beside-image>.project-client{grid-column:1;grid-row:2}
.detail.heading-beside-image>h1{grid-column:1;grid-row:3;max-width:100%;overflow-wrap:anywhere}
.detail.heading-beside-image>.project-summary{grid-column:1;grid-row:4}
.detail.heading-beside-image>.detail-layout>.description{grid-column:1;grid-row:5;align-self:start;padding-bottom:0}
.detail.heading-beside-image>.detail-layout>.description .detail-fact:first-child dt{margin-top:0}
.detail.heading-beside-image>.detail-layout>.detail-media-column{grid-column:2;grid-row:1 / span 6;align-self:start;width:100%}.detail.heading-beside-image[data-card-orientation="portrait"]>.detail-layout>.detail-media-column>.visual{height:max(1px,calc(100svh - var(--detail-image-top-inset) - var(--detail-image-bottom-inset)));aspect-ratio:auto;margin:0 auto}
@media(max-width:1000px){.detail.heading-beside-image{grid-template-columns:minmax(230px,1fr) minmax(0,1.3fr);column-gap:32px}}
@media(max-width:750px){.detail.heading-beside-image{grid-template-columns:minmax(0,1fr);grid-template-rows:max-content max-content max-content auto auto auto;column-gap:0}.detail.heading-beside-image>.project-client{grid-column:1;grid-row:1}.detail.heading-beside-image>h1{grid-column:1;grid-row:2}.detail.heading-beside-image>.project-summary{grid-column:1;grid-row:3}.detail.heading-beside-image>.detail-layout>.detail-media-column{grid-column:1;grid-row:4}.detail.heading-beside-image>.detail-layout>.description{grid-column:1;grid-row:6;margin-top:32px}}

/* Home surfaces rest neutral; detail heroes retain their project gradient.
   The existing skin, full-bleed backing and heading shade share the same fill. */
.surface{--surface-fill:var(--card-surface);--surface-fill-end:var(--card-surface-end);--surface-gradient:linear-gradient(var(--card-gradient-angle) in oklab,var(--surface-fill),var(--surface-fill-end));--bg:var(--surface-gradient)}
.surface>.liquid-skin{background:var(--surface-gradient)!important}
.surface.detail{--surface-fill:oklch(var(--card-hover-lightness) calc(var(--card-hover-chroma) * var(--project-chroma-scale,1)) var(--project-hue-start,0));--surface-fill-end:oklch(var(--card-hover-lightness-end) calc(var(--card-hover-chroma-end) * var(--project-chroma-scale,1)) var(--project-hue-end,0))}
.has-room .surface>.liquid-skin{background:linear-gradient(var(--card-gradient-angle) in oklab,color-mix(in oklab,var(--surface-fill) calc((var(--glass-alpha) + var(--glass-contrast)) * 100%),transparent),color-mix(in oklab,var(--surface-fill-end) calc((var(--glass-alpha) + var(--glass-contrast)) * 100%),transparent))!important}
.visual::after{--image-shade-tone:var(--card-surface-rgb)}
.image-card[data-image-mode="bleed"]>.visual{background:var(--surface-gradient)}
.image-card[data-image-mode="bleed"]>.card-copy{color:var(--ink);text-shadow:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.has-room .surface>.liquid-skin{background:linear-gradient(var(--card-gradient-angle) in oklab,color-mix(in oklab,var(--surface-fill) 84%,transparent),color-mix(in oklab,var(--surface-fill-end) 84%,transparent))!important}}

/* display:contents removes the layout wrapper's stacking box. Both panes
   therefore own their content layer above the independent liquid skin. */
.detail-layout>.description,.detail-layout>.detail-media-column{position:relative;z-index:1}
/* Detail titles share the size of the three-line homepage introduction. */
.surface.detail h1{font-size:var(--font-size-home-heading);font-weight:400;line-height:1.3;letter-spacing:-.025em}

/* A flat split view uses the same Current cards in one natural column. */
@media(min-width:1001px){.home-view-flat .homepage-layout{grid-template-columns:minmax(0,var(--flat-text-column)) minmax(0,var(--flat-card-column))}}
.home-view-flat .gallery-grid{display:flex;flex-direction:column;gap:var(--card-gap);perspective:none;max-width:none;margin:0}
.home-view-flat .card-slot,.home-view-flat .gallery-grid[data-layout="regular"] .card-slot{display:block;height:auto;min-height:0;grid-row:auto!important;grid-column:auto!important}
.home-view-flat .card-placement,.home-view-flat .gallery-grid[data-layout="regular"] .card-placement{display:block;width:100%;flex:initial;transform:none;opacity:1}
.home-view-flat .gallery-grid[data-layout="regular"] .card-placement>.project-card{height:auto}
.home-view-split .hero-about h1{text-wrap:balance}

/* Short landscape / tall portrait rhythm. Featured cards share the tall
   height and span two columns on wide grids. Media remains fitted, not scaled. */
.gallery-grid[data-masonry-rhythm="true"] .card-placement>.project-card{display:flex;flex-direction:column;height:var(--masonry-card-height);min-height:0}
.gallery-grid[data-masonry-rhythm="true"] .project-card>.card-copy{flex-shrink:0}
.gallery-grid[data-masonry-rhythm="true"] .project-card[data-card-presentation="current"][data-card-layout="masonry"]:not([data-image-mode="bleed"])>.visual{flex:1;min-height:0;height:auto;aspect-ratio:auto}
.gallery-grid[data-masonry-rhythm="true"] .project-card[data-card-presentation="current"][data-card-orientation="portrait"]:not([data-image-mode="bleed"])>.visual{flex:none;height:var(--card-image-frame-height,auto);aspect-ratio:var(--image-source-ratio,.468)}

/* Give landscape media more horizontal room inside the card. Its existing
   aspect ratio determines height; image top/bottom insets stay untouched. */
@media(min-width:851px){
 .gallery-grid[data-masonry-rhythm="true"] .project-card[data-card-presentation="current"][data-card-layout="masonry"][data-card-orientation="landscape"]:not([data-image-mode="bleed"])>.visual{flex:0 0 auto;height:auto;aspect-ratio:var(--image-frame-regular-aspect)}
}

/* Desktop card labels brighten with the whole card. Using resolved colours
   preserves shared-title colour interpolation when opening or returning. */
@media(min-width:751px) and (hover:hover) and (pointer:fine){
 .project-card:not(.flow-content) h2,.project-card:not(.flow-content) .eyebrow{color:color-mix(in oklab,var(--ink) var(--card-label-rest-strength),var(--surface-fill));transition:color var(--card-content-out-duration) ease-out}
 .project-card:not(.flow-content) .project-summary{color:color-mix(in oklab,var(--body-ink) var(--card-summary-rest-strength),var(--surface-fill));transition:color var(--card-content-out-duration) ease-out}
 .project-card:not(.flow-content):is(:hover,:focus-visible,.gesture-hover) h2,.project-card:not(.flow-content):is(:hover,:focus-visible,.gesture-hover) .eyebrow{color:var(--ink);transition-duration:var(--card-content-in-duration);transition-timing-function:ease-out}
 .project-card:not(.flow-content):is(:hover,:focus-visible,.gesture-hover) .project-summary{color:var(--body-ink);transition-duration:var(--card-content-in-duration);transition-timing-function:ease-out}
 .image-card[data-image-mode="bleed"]>.card-copy>.eyebrow{opacity:1}
}
/* Design icon navigation and its liquid project picker. */
.dock-morph .context-nav button{display:grid;place-items:center;text-align:center;color:var(--muted);background:transparent;transition:background-color var(--nav-hover-out-duration) ease-out}
.dock-morph .context-nav button:is(:hover,:focus-visible,.hover-trail){background:var(--nav-item-hover);transition-duration:var(--nav-hover-in-duration)}
.context-nav button svg{width:18px;height:18px;display:block;margin:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.project-menu{position:absolute;opacity:0;pointer-events:none}
.project-menu-group+.project-menu-group{margin-top:12px}
.project-menu-group h2{margin:0;padding:8px 12px 6px;font-size:10px;font-weight:500;line-height:1.5;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.project-menu button{display:block;width:100%;padding:10px 12px;border-radius:14px;background:transparent;text-align:left;color:var(--ink);font-size:12px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color var(--nav-hover-out-duration) ease-out}
.project-menu button.active{background:var(--nav-item-hover)}
.project-menu button:is(:hover,:focus-visible,.hover-trail){background:var(--nav-item-hover);transition-duration:var(--nav-hover-in-duration)}
.dock-morph nav a{transition:background-color var(--nav-hover-out-duration) ease-out,color .2s ease}
.dock-morph nav a:not(.active):is(:hover,:focus-visible,.hover-trail){background:var(--nav-item-hover);transition-duration:var(--nav-hover-in-duration)}
.dock-morph .project-menu{bottom:auto;z-index:3;padding:8px;border:0;border-radius:24px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;transform:none;transform-origin:initial;transition:none;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;pointer-events:auto}
.dock-morph .project-menu::after{display:none}
.dock-morph .project-menu[hidden]{display:none}
.dock-morph .context-nav button{flex-shrink:0}
@media(max-width:600px){:root{--nav-context-width:112px}.dock-morph .context-nav button{width:34px}}
@media(max-width:380px){:root{--nav-main-width:180px;--nav-context-width:106px}.dock-morph .context-nav button{width:32px}}
.theme-changing *, .theme-changing *::before, .theme-changing *::after{transition:none!important}

/* Hover previews use the image holder's fit and corner geometry. */
.visual>.project-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;pointer-events:none;opacity:0;transition:opacity 140ms ease}
.visual.video-preview-playing>.project-video{opacity:1}
@media(prefers-reduced-motion:reduce){.visual>.project-video{transition:none}}

/* Visitor preferences share the dock's liquid surface and quiet palette. */
:root{--nav-main-width:284px}
.dock-morph nav .site-settings-toggle{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;padding:8px;margin-right:4px;border-radius:max(0px,calc(var(--nav-rounding) - 6px));background:transparent;color:var(--muted);transition:background-color var(--nav-hover-out-duration) ease-out}
.site-settings-toggle svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dock-morph nav .site-settings-toggle:is(:hover,:focus-visible,.hover-trail,[aria-expanded="true"]){background:var(--nav-item-hover);transition-duration:var(--nav-hover-in-duration)}
.dock-morph .site-settings-menu{padding:12px 18px}
.site-setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;font-size:var(--font-size-small);font-weight:var(--font-weight-body);line-height:var(--line-height-label);letter-spacing:var(--letter-spacing-body)}
.setting-label{display:flex;align-items:center;gap:6px}
.site-settings-menu .setting-info{display:grid;place-items:center;width:22px;height:22px;min-height:22px;padding:0;border-radius:50%;font-size:11px;color:var(--muted)}
.site-settings-menu .preference-switch{display:flex;align-items:center;width:36px;height:22px;min-height:22px;padding:3px;border-radius:99px;background:var(--nav-item-hover);overflow:visible;flex-shrink:0;transition:background-color .15s ease}
.site-settings-menu .preference-switch>span:first-child{display:block;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:transform .15s ease,background-color .15s ease}
.site-settings-menu .preference-switch[aria-checked="true"]{background:color-mix(in oklab,var(--ink) 15%,transparent)}
.site-settings-menu .preference-switch[aria-checked="true"]>span:first-child{transform:translateX(14px);background:var(--ink)}
.site-settings-menu .preference-switch:disabled{opacity:.35;cursor:default}
.theme-options{display:flex;gap:2px;padding:3px;border-radius:12px;background:var(--nav-item-hover)}
.site-settings-menu .theme-options button{width:auto;padding:5px 8px;min-height:30px;border-radius:9px;font-size:11px;color:var(--muted)}
.site-settings-menu .theme-options button.active{color:var(--ink);background:var(--nav-active)}
.site-tooltip{position:fixed;z-index:100;max-width:min(280px,calc(100vw - 24px));padding:8px 11px;border-radius:10px;background:var(--chrome);color:var(--ink);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 4px 24px #00000012;font-size:12px;line-height:1.5;pointer-events:none}
.site-tooltip[hidden]{display:none}
@keyframes site-tooltip-arrive{0%{opacity:0;transform:translateY(2px) scale(.96)}64%{opacity:1;transform:translateY(-1px) scale(1.025)}83%{opacity:1;transform:translateY(0) scale(.99)}100%{opacity:1;transform:translateY(0) scale(1)}}
.site-tooltip:not([hidden]){animation:site-tooltip-arrive 340ms cubic-bezier(.22,1,.36,1) both}
:root[data-animation="off"] .site-tooltip:not([hidden]){animation:none!important}
@media(prefers-reduced-motion:reduce){.site-tooltip:not([hidden]){animation:none!important}}
:root[data-animation="off"]{scroll-behavior:auto}
:root[data-animation="off"] :is(.dock,.dock *,.page-edge-shades,.page-edge-shades *,.site-tooltip){transition:none!important;animation:none!important}
@media(max-width:600px){:root{--nav-main-width:250px}}
@media(max-width:380px){:root{--nav-main-width:200px;--nav-context-width:100px}.dock-morph nav .site-settings-toggle{flex-basis:30px;width:30px;height:32px;padding:6px;margin-right:2px}.dock-morph nav a{padding-inline:6px}}

/* Lab status sits above image and video without adding a badge surface. */
:root{--card-lab-icon-size:16px;--card-lab-icon-opacity:.58;--card-lab-icon-inset:max(22px,calc(var(--radius-card) * .32 + 6px))}
.project-card>.card-lab-mark{position:absolute;top:var(--card-lab-icon-inset);right:var(--card-lab-icon-inset);z-index:3;display:block;width:var(--card-lab-icon-size);height:var(--card-lab-icon-size);color:var(--muted);opacity:var(--card-lab-icon-opacity);pointer-events:none}
.card-lab-mark svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}

/* A shared closing invitation, outside the moving card canvas. */
.site-footer{min-height:90svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-page-rhythm) clamp(24px,6vw,96px);text-align:center;color:var(--ink)}.site-footer[hidden]{display:none!important}
.site-footer h2{max-width:1200px;margin:0;font-size:var(--font-size-footer-heading);font-weight:var(--font-weight-heading);line-height:1.04;letter-spacing:var(--letter-spacing-heading);text-wrap:balance}
.footer-invitation{margin:var(--space-footer-heading-content) 0 0;font-size:var(--font-size-section-heading);font-weight:var(--font-weight-body);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body);color:var(--body-ink)}
.footer-links{display:flex;align-items:center;justify-content:center;gap:var(--space-5);margin-top:var(--space-6)}
.footer-links[hidden]{display:none}
.footer-links a{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;color:var(--muted);background:var(--nav-item-hover);box-shadow:inset 0 0 0 1px var(--nav-rim);transition:color 180ms ease,background-color var(--nav-hover-out-duration) ease-out}
.footer-links a:is(:hover,:focus-visible){color:var(--ink);background:var(--nav-active);transition-duration:var(--nav-hover-in-duration)}
.footer-links svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.footer-credit{max-width:var(--measure-body);margin:calc(var(--space-unit) * 18) 0 0;font-size:var(--font-size-caption);font-weight:var(--font-weight-body);line-height:var(--line-height-label);letter-spacing:var(--eyebrow-tracking);color:var(--eyebrow-ink);text-wrap:pretty}
@media(max-width:600px){.site-footer{min-height:80svh}.footer-links a{width:52px;height:52px}.footer-links svg{width:22px;height:22px}.footer-credit{margin-top:var(--space-12)}}
:root[data-animation="off"] .footer-links a{transition:none}

/* Typed content blocks use the same spacing and typography tokens. */
.content-carousel{display:flex;gap:var(--card-gap);overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:var(--space-card-inset)}
.content-carousel>.content-block{flex:0 0 min(85%,480px);min-width:0;scroll-snap-align:start}
.content-block{min-width:0}.content-block+.content-block{margin-top:var(--space-card-inset)}
.content-carousel>.content-block+.content-block{margin-top:0}
.content-video{display:block;max-width:100%;width:100%;border-radius:var(--radius-visual)}
.content-quote{margin:0}.content-quote blockquote{margin:0}.content-quote figcaption,.block-caption{color:var(--muted);font-size:var(--font-size-small)}
.content-link{text-decoration:underline;text-underline-offset:.2em}

/* Case-study pane controls are authored on each block. One column is the
   default span; two columns use the full content width. */
.content-grid>.surface[data-block-columns="1"]{grid-column:span 1}
.content-grid>.surface[data-block-columns="2"]{grid-column:span 2}
.story .content-block-eyebrow{display:block;margin:0 0 var(--space-2);font-size:var(--font-size-caption);font-weight:var(--eyebrow-weight);line-height:var(--line-height-label);letter-spacing:var(--eyebrow-tracking);color:var(--eyebrow-ink)}
.story .content-media-frame{display:flex;align-items:center;justify-content:center;width:100%;height:310px;margin-top:var(--space-text-media);background:transparent;border-radius:var(--radius-visual)}
.story .content-media-frame>img,.story .content-media-frame>.content-video{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;border-radius:inherit}
.story [data-media-fit="max-side"] .content-media-frame{height:auto;max-height:min(78svh,900px);overflow:visible}
.story [data-media-fit="max-side"] .content-media-frame>img{width:auto;height:auto;max-width:100%;max-height:min(78svh,900px);object-fit:contain}
.story [data-media-fit="max-side"] .content-media-frame>.content-video{width:100%;height:auto;max-width:100%;max-height:min(78svh,900px);object-fit:contain}
.story [data-media-fit="full-bleed"] .content-media-frame{width:calc(100% + var(--space-story-inset) + var(--space-story-inset));height:clamp(240px,36vw,560px);max-height:78svh;margin-inline:calc(0px - var(--space-story-inset));overflow:hidden;border-radius:0}
.story [data-media-fit="full-bleed"] .content-media-frame>img,.story [data-media-fit="full-bleed"] .content-media-frame>.content-video{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;border-radius:0}
@media(max-width:600px){.content-grid>.surface[data-block-columns="1"],.content-grid>.surface[data-block-columns="2"]{grid-column:1/-1}.story [data-media-fit="full-bleed"] .content-media-frame{width:calc(100% + var(--space-story-inset) + var(--space-story-inset));height:clamp(220px,70vw,420px)}}

/* The dock can keep the same smoked glass in light or dark site themes. */
#dock.always-dark-glass{color:var(--ink);--ink:oklch(.94 .008 285);--muted:oklch(.76 .012 285);--body-ink:var(--muted);--eyebrow-ink:oklch(.70 .012 285);--chrome:oklch(.19 .006 285 / .88);--panel:oklch(.21 .006 285 / .94);--nav-glass-rgb:23,23,28;--nav-glass-alpha:.32;--dock-glass-alpha:.32;--dock-backdrop-brightness:.65;--nav-rim:oklch(.98 .004 285 / .08);--dock-outline:oklch(.98 .004 285 / .10);--nav-highlight:oklch(.98 .004 285 / .10);--nav-shadow:oklch(0 0 0 / .24);--nav-item-ink:oklch(.76 .012 285);--nav-active:oklch(.98 .004 285 / .12);--nav-item-hover:oklch(.98 .004 285 / .055)}
#dock.always-dark-glass .dock-glass{background:linear-gradient(145deg,rgba(var(--nav-glass-rgb),calc(var(--dock-glass-alpha) + .07)),rgba(var(--nav-glass-rgb),var(--dock-glass-alpha)));backdrop-filter:blur(var(--dock-glass-blur)) saturate(1.25) brightness(var(--dock-backdrop-brightness));-webkit-backdrop-filter:blur(var(--dock-glass-blur)) saturate(1.25) brightness(var(--dock-backdrop-brightness))}
#dock.always-dark-glass .dock-outline{stroke:var(--dock-outline)}
#dock.always-dark-glass .composer-suggestions button{background:color-mix(in oklab,var(--chrome) 82%,transparent)}
/* Site settings has its own glass surface beside the navigation/composer. */
#dock.dock-morph{left:calc(50% + var(--dock-center-offset,0px))}
#dock>.site-settings-dock{position:absolute;left:calc(100% + 10px);bottom:0;transform:none;--nav-main-width:var(--nav-height);--nav-context-width:0px;--nav-section-gap:0px;z-index:5}
#dock .site-settings-dock .dock-content>nav{display:grid;place-items:center}
#dock .site-settings-dock .site-settings-toggle{position:static;width:36px;height:36px;margin:0;padding:9px;opacity:1;visibility:visible;pointer-events:auto;transform:none}
#dock{--nav-back-width:78px}
#dock .dock-content nav>.project-menu-toggle{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;padding:8px;border-radius:max(0px,calc(var(--nav-rounding) - 6px));background:transparent;color:var(--muted);transition:background-color var(--nav-hover-out-duration) ease-out,color .2s ease}
#dock .dock-content nav>.project-menu-toggle:is(:hover,:focus-visible,.hover-trail,[aria-expanded="true"]){background:var(--nav-item-hover);color:var(--ink);transition-duration:var(--nav-hover-in-duration)}
#dock .dock-content nav>.project-menu-toggle svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#dock.is-composer .dock-content nav>.project-menu-toggle{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:600px){#dock{--nav-back-width:74px}#dock .dock-content nav>.project-menu-toggle{flex-basis:32px;width:32px;height:32px;padding:7px}}

/* Developer controls are grouped by the feature they change. */
#settings .developer-settings-group{margin:0;border-top:1px solid color-mix(in oklab,var(--ink) 9%,transparent)}#settings .developer-settings-group[hidden]{display:none!important}
#settings .developer-settings-group:first-of-type{border-top:0}
#settings .developer-settings-group>summary{display:flex;align-items:center;justify-content:space-between;min-height:46px;padding:10px 2px;list-style:none;cursor:pointer;color:var(--ink);font-size:var(--font-size-small);font-weight:var(--font-weight-label);line-height:var(--line-height-label)}
#settings .developer-settings-group>summary::-webkit-details-marker{display:none}
#settings .developer-settings-group>summary::after{content:"+";color:var(--muted);font-size:17px;font-weight:400;line-height:1}
#settings .developer-settings-group[open]>summary::after{content:"−"}
#settings .developer-settings-content{padding:0 0 14px}
#settings .setting-subsection{margin:15px 0 8px;color:var(--muted);font-size:var(--font-size-caption);font-weight:var(--font-weight-label);line-height:var(--line-height-label);letter-spacing:var(--letter-spacing-label);text-transform:uppercase}
#settings .developer-settings-content>.setting-subsection:first-child{margin-top:2px}
#settings .dev-setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;color:var(--muted);font-size:var(--font-size-small);line-height:var(--line-height-label)}
#settings .preference-switch{display:flex;align-items:center;width:36px;height:22px;min-height:22px;padding:3px;border-radius:99px;background:var(--nav-item-hover);overflow:visible;flex-shrink:0;transition:background-color .15s ease}
#settings .preference-switch>span:first-child{display:block;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:transform .15s ease,background-color .15s ease}
#settings .preference-switch[aria-checked="true"]{background:color-mix(in oklab,var(--ink) 15%,transparent)}
#settings .preference-switch[aria-checked="true"]>span:first-child{transform:translateX(14px);background:var(--ink)}
#settings .preference-switch:focus-visible{outline:2px solid var(--muted);outline-offset:3px}

#settings .settings-transfer{padding:0 0 16px}
#settings .settings-transfer-actions{display:flex;gap:8px}
#settings .settings-transfer-actions button{flex:1;min-height:38px;padding:9px 10px;border-radius:12px;background:color-mix(in oklab,var(--ink) 6%,transparent);color:var(--ink);font-size:var(--font-size-small);transition:background .15s ease}
#settings .settings-transfer-actions button:hover{background:color-mix(in oklab,var(--ink) 10%,transparent)}
#settings .settings-transfer p{margin:10px 0 0;font-size:var(--font-size-note);line-height:var(--line-height-body);color:var(--muted)}
#settings #settingsTransferStatus:empty{display:none}
#settings #settingsTransferStatus{color:var(--ink)}

.flow-shared-words{position:absolute;inset:0;z-index:3;pointer-events:none}
.flow-shared-words>span{display:block;max-width:none;border:0;text-shadow:none;transform:none}

/* Keep deferred images and their edge quiet until native decoding completes. */
.visual>img[data-media-pending]{opacity:0}.visual:has(>img[data-media-pending])>.image-edge{opacity:0}

/* surface-hover.css */
/* Surface hover is opt-in and independent of card layout/content. An effect
   name can be combined with others (e.g. "tint blur scale"). The liquid skin
   is the visual plane; the host keeps its geometry and pointer semantics. */
[data-hover-effect]{--surface-hover-duration:var(--surface-hover-out-duration);transition:--surface-fill var(--surface-hover-duration) ease,--surface-fill-end var(--surface-hover-duration) ease}
[data-hover-effect][data-hover-rest="page"]:not(:hover,:focus-visible,.gesture-hover){--surface-fill:var(--page);--surface-fill-end:var(--page)}

/* The existing chromatic gradient is the default recipe. */
@media(hover:hover) and (pointer:fine){
 [data-hover-effect~="tint"]:not([data-hover-disabled]):hover{--surface-hover-duration:var(--surface-hover-in-duration);--surface-fill:oklch(var(--card-hover-lightness) calc(var(--card-hover-chroma) * var(--project-chroma-scale,1)) var(--project-hue-start,0));--surface-fill-end:oklch(var(--card-hover-lightness-end) calc(var(--card-hover-chroma-end) * var(--project-chroma-scale,1)) var(--project-hue-end,0))}
}
[data-hover-effect~="tint"]:not([data-hover-disabled]):is(:focus-visible,.gesture-hover){--surface-hover-duration:var(--surface-hover-in-duration);--surface-fill:oklch(var(--card-hover-lightness) calc(var(--card-hover-chroma) * var(--project-chroma-scale,1)) var(--project-hue-start,0));--surface-fill-end:oklch(var(--card-hover-lightness-end) calc(var(--card-hover-chroma-end) * var(--project-chroma-scale,1)) var(--project-hue-end,0))}
[data-hover-effect][data-hover-disabled]:is(:hover,:focus-visible,.gesture-hover){--surface-fill:var(--card-surface);--surface-fill-end:var(--card-surface-end)}

/* Reveal the same project gradient through a soft, three-lobed alpha mask.
   The underlying surface remains neutral; media and text stay untouched. */
[data-hover-effect~="reveal"],[data-hover-effect~="reveal-soft"],[data-hover-effect~="glow"]{--liquid-hover-a:oklch(var(--card-hover-lightness) calc(var(--card-hover-chroma) * var(--project-chroma-scale,1)) var(--project-hue-start,0));--liquid-hover-b:oklch(var(--card-hover-lightness-end) calc(var(--card-hover-chroma-end) * var(--project-chroma-scale,1)) var(--project-hue-end,0))}
[data-hover-effect~="reveal"][data-hover-rest="page"],[data-hover-effect~="reveal-soft"][data-hover-rest="page"],[data-hover-effect~="glow"][data-hover-rest="page"]{--surface-fill:var(--page);--surface-fill-end:var(--page)}
[data-hover-effect~="reveal"]>.liquid-skin>.surface-effect-layer{
 z-index:1;opacity:0;
 background:linear-gradient(var(--card-gradient-angle) in oklab,var(--liquid-hover-a),var(--liquid-hover-b));
 --liquid-mask:
  radial-gradient(ellipse var(--liquid-rx,170px) var(--liquid-ry,170px) at var(--liquid-x,50%) var(--liquid-y,45%),#000 7%,#000d 34%,#0005 66%,transparent 96%),
  radial-gradient(ellipse var(--liquid-tail-rx,140px) var(--liquid-tail-ry,140px) at var(--liquid-tail-x,46%) var(--liquid-tail-y,50%),#000b 8%,#0007 43%,transparent 94%),
  radial-gradient(ellipse var(--liquid-side-rx,100px) var(--liquid-side-ry,105px) at var(--liquid-side-x,50%) var(--liquid-side-y,45%),#000a 5%,#0006 42%,transparent 92%);
 -webkit-mask-image:var(--liquid-mask);mask-image:var(--liquid-mask);
 transition:opacity var(--surface-hover-out-duration) ease;
}
[data-hover-effect~="reveal-soft"]>.liquid-skin>.surface-effect-layer{
 z-index:1;opacity:0;
 background:linear-gradient(var(--card-gradient-angle) in oklab,var(--liquid-hover-a),var(--liquid-hover-b));
 --liquid-soft-mask:
  radial-gradient(ellipse var(--liquid-rx,360px) var(--liquid-ry,300px) at var(--liquid-x,50%) var(--liquid-y,45%),#000 4%,#000b 38%,transparent 100%),
  radial-gradient(ellipse var(--liquid-tail-rx,250px) var(--liquid-tail-ry,220px) at var(--liquid-tail-x,46%) var(--liquid-tail-y,50%),#0007 5%,transparent 94%);
 -webkit-mask-image:var(--liquid-soft-mask);mask-image:var(--liquid-soft-mask);
 transition:opacity var(--surface-hover-out-duration) ease;
}
[data-hover-effect~="reveal"]>.liquid-skin>.material-reflection,[data-hover-effect~="reveal-soft"]>.liquid-skin>.material-reflection{z-index:2}
[data-hover-effect~="reveal"]:not([data-hover-disabled])>.liquid-skin>.surface-effect-layer.is-active,[data-hover-effect~="reveal-soft"]:not([data-hover-disabled])>.liquid-skin>.surface-effect-layer.is-active{opacity:.9;transition-duration:var(--surface-hover-in-duration)}
.has-room [data-hover-effect~="reveal"]>.liquid-skin>.surface-effect-layer,.has-room [data-hover-effect~="reveal-soft"]>.liquid-skin>.surface-effect-layer{background:linear-gradient(var(--card-gradient-angle) in oklab,color-mix(in oklab,var(--liquid-hover-a) calc((var(--glass-alpha) + var(--glass-contrast)) * 100%),transparent),color-mix(in oklab,var(--liquid-hover-b) calc((var(--glass-alpha) + var(--glass-contrast)) * 100%),transparent))}

/* Broad, overlapping light fields bloom from the image. Each gradient fades
   fully inside its plane, so the animation has no discernible blob boundary. */
[data-hover-effect~="glow"]{--ambient-lightness:.82;--ambient-chroma:.055;--liquid-glow-a:oklch(var(--ambient-lightness) var(--ambient-chroma) var(--project-hue-start,0));--liquid-glow-b:oklch(var(--ambient-lightness) var(--ambient-chroma) var(--project-hue-end,0))}
[data-theme="dark"] [data-hover-effect~="glow"]{--ambient-lightness:.48;--ambient-chroma:.032}
#ambientDetailGlowSetting[hidden],#ambientLightMovementSetting[hidden],#ambientHoverSpeedSetting[hidden]{display:none}
/* The image field supplies the light for this recipe. MotionMaterial's
   card-wide skin glow would stack a brief bright spot over it. */
.surface[data-hover-effect~="glow"]>.liquid-skin::after{opacity:0!important}
/* With card background off, its page-coloured skin and rim would still make
   an opaque card-shaped block over a neighbouring image's ambient field. */
body.card-background-hidden [data-hover-effect~="glow"]>.liquid-skin{
 opacity:0!important;box-shadow:none!important;
 backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
body.card-background-hidden [data-hover-effect~="glow"][data-image-mode="bleed"]>.visual{background:transparent!important}
[data-hover-effect~="glow"]>.surface-effect-layer{
 --ambient-spread:clamp(120px,17vw,230px);
 position:absolute;inset:auto;
 left:calc(var(--ambient-left,0px) - var(--ambient-spread));
 top:calc(var(--ambient-top,0px) - var(--ambient-spread));
 width:calc(var(--ambient-width,100%) + var(--ambient-spread) + var(--ambient-spread));
 height:calc(var(--ambient-height,100%) + var(--ambient-spread) + var(--ambient-spread));
 z-index:0;pointer-events:none;
 border-radius:0;overflow:visible;opacity:0;-webkit-mask:none;mask:none;
 background:radial-gradient(ellipse 70% 72% at 50% 52%,color-mix(in oklab,var(--liquid-glow-b) 11%,transparent) 0%,color-mix(in oklab,var(--liquid-glow-b) 6.5%,transparent) 42%,transparent 84%);
 transition:opacity var(--surface-hover-out-duration) ease;
}
[data-hover-effect~="glow"]>.surface-effect-layer::before,
[data-hover-effect~="glow"]>.surface-effect-layer::after{
 content:"";position:absolute;pointer-events:none;
 opacity:.2;
 transition:transform 1100ms cubic-bezier(.16,1,.3,1),opacity 800ms ease;
}
[data-hover-effect~="glow"]>.surface-effect-layer::before{
 left:1%;top:2%;width:91%;height:96%;
 background:radial-gradient(ellipse 68% 70% at 51% 52%,color-mix(in oklab,var(--liquid-glow-a) 24%,transparent) 0%,color-mix(in oklab,var(--liquid-glow-a) 10.5%,transparent) 42%,transparent 82%);
 transform:translate(10%,7%) scale(.76,.82) rotate(-4deg);
}
[data-hover-effect~="glow"]>.surface-effect-layer::after{
 right:0;bottom:0;width:94%;height:98%;
 background:radial-gradient(ellipse 66% 72% at 49% 50%,color-mix(in oklab,var(--liquid-glow-b) 21%,transparent) 0%,color-mix(in oklab,var(--liquid-glow-b) 9%,transparent) 44%,transparent 83%);
 transform:translate(-9%,-7%) scale(.78,.84) rotate(4deg);
}
[data-hover-effect~="glow"]:not([data-hover-disabled])>.surface-effect-layer.is-active{opacity:1;transition-duration:var(--surface-hover-in-duration)}
[data-hover-effect~="glow"]>.surface-effect-layer.is-active::before{
 opacity:.78;
 transform:translate(-14%,-9%) scale(1.16,1.04) rotate(5deg);
}
[data-hover-effect~="glow"]>.surface-effect-layer.is-active::after{
 opacity:.76;
 transform:translate(14%,10%) scale(1.14,1.02) rotate(-5deg);
}
/* The shared light owns its opacity and spring motion. Reparenting this same
   field between image hosts preserves its colour and physical momentum. */
.ambient-light-stage{position:fixed;inset:0;z-index:24;pointer-events:none;overflow:clip;isolation:isolate}
.ambient-light-stage[hidden]{display:none}
[data-hover-effect~="glow"]>.ambient-light-field,
[data-hover-effect~="glow"]>.ambient-light-field::before,
[data-hover-effect~="glow"]>.ambient-light-field::after{transition:none!important}
[data-hover-effect~="glow"]>.ambient-light-field.is-active::before{
 transform:translate(calc(-14% + var(--ambient-drift-x,0%)),calc(-9% + var(--ambient-drift-y,0%))) scale(var(--ambient-stretch-x,1.16),var(--ambient-stretch-y,1.04)) rotate(5deg);
}
[data-hover-effect~="glow"]>.ambient-light-field.is-active::after{
 transform:translate(calc(14% - var(--ambient-drift-x,0%)),calc(10% - var(--ambient-drift-y,0%))) scale(var(--ambient-stretch-x,1.14),var(--ambient-stretch-y,1.02)) rotate(-5deg);
}
@media(prefers-reduced-motion:reduce){[data-hover-effect~="reveal"]>.liquid-skin>.surface-effect-layer,[data-hover-effect~="reveal-soft"]>.liquid-skin>.surface-effect-layer,[data-hover-effect~="glow"]>.surface-effect-layer{transition:none!important}}
@media(prefers-reduced-motion:reduce){[data-hover-effect~="glow"]>.surface-effect-layer::before,[data-hover-effect~="glow"]>.surface-effect-layer::after{transition:none!important}}

/* Optional effects use the skin's overlay, never transform the host or text.
   They can be combined with tint or used alone on any .surface. */
[data-hover-effect~="scale"]>.liquid-skin::before,[data-hover-effect~="blur"]>.liquid-skin::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--surface-effect-layer-fill,color-mix(in oklab,var(--surface-fill) 22%,transparent));opacity:0;transform:scale(1);filter:blur(0);transition:opacity var(--surface-hover-out-duration) ease,transform var(--surface-hover-out-duration) ease,filter var(--surface-hover-out-duration) ease}
[data-hover-effect~="scale"]:is(:focus-visible,.gesture-hover):not([data-hover-disabled])>.liquid-skin::before,[data-hover-effect~="blur"]:is(:focus-visible,.gesture-hover):not([data-hover-disabled])>.liquid-skin::before{opacity:1;transition-duration:var(--surface-hover-in-duration)}
[data-hover-effect~="scale"]:is(:focus-visible,.gesture-hover):not([data-hover-disabled])>.liquid-skin::before{transform:scale(var(--surface-effect-scale,1.06))}
[data-hover-effect~="blur"]:is(:focus-visible,.gesture-hover):not([data-hover-disabled])>.liquid-skin::before{filter:blur(var(--surface-effect-blur,12px))}
@media(hover:hover) and (pointer:fine){
 [data-hover-effect~="scale"]:hover:not([data-hover-disabled])>.liquid-skin::before,[data-hover-effect~="blur"]:hover:not([data-hover-disabled])>.liquid-skin::before{opacity:1;transition-duration:var(--surface-hover-in-duration)}
 [data-hover-effect~="scale"]:hover:not([data-hover-disabled])>.liquid-skin::before{transform:scale(var(--surface-effect-scale,1.06))}
 [data-hover-effect~="blur"]:hover:not([data-hover-disabled])>.liquid-skin::before{filter:blur(var(--surface-effect-blur,12px))}
}
.liquid-skin>.surface-effect-layer{position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden}
.liquid-skin>.surface-effect-layer>canvas{display:block;width:100%;height:100%}
@media(prefers-reduced-motion:reduce){[data-hover-effect],[data-hover-effect]>.liquid-skin::before{transition:none!important}}

/* Keep liquid colour quiet against the dark canvas, including the shared field. */
[data-theme="dark"] [data-hover-effect~="glow"]>.surface-effect-layer{background:radial-gradient(ellipse 70% 72% at 50% 52%,color-mix(in oklab,var(--liquid-glow-b) 7%,transparent) 0%,color-mix(in oklab,var(--liquid-glow-b) 4%,transparent) 42%,transparent 84%)}
[data-theme="dark"] [data-hover-effect~="glow"]>.surface-effect-layer.is-active::before{opacity:.36}
[data-theme="dark"] [data-hover-effect~="glow"]>.surface-effect-layer.is-active::after{opacity:.34}

/* design-system.css */
/* Five independent three-step presets. Tokens remain the source of truth;
   the existing image/card geometry controls are separate fine adjustments. */
:root[data-type-size="small"]{--type-scale:.9}
:root[data-type-size="large"]{--type-scale:1.125}
:root[data-space-size="small"]{--space-density:.8}
:root[data-space-size="large"]{--space-density:1.2}
:root[data-heading-weight="thin"]{--font-weight-heading:300}
:root[data-heading-weight="regular"]{--font-weight-heading:400}
:root[data-heading-weight="bold"]{--font-weight-heading:500}
:root[data-body-weight="thin"]{--font-weight-body:300}
:root[data-body-weight="regular"]{--font-weight-body:400}
:root[data-body-weight="bold"]{--font-weight-body:500}
:root[data-type-tracking="small"]{--letter-spacing-heading:-.035em;--letter-spacing-card:-.03em;--letter-spacing-body:-.01em;--letter-spacing-label:.055em}
:root[data-type-tracking="large"]{--letter-spacing-heading:-.01em;--letter-spacing-card:-.005em;--letter-spacing-body:.005em;--letter-spacing-label:.11em}
:root[data-type-leading="small"]{--line-height-heading:1.08;--line-height-card:1.14;--line-height-body:1.45;--line-height-label:1.25}
:root[data-type-leading="large"]{--line-height-heading:1.25;--line-height-card:1.32;--line-height-body:1.8;--line-height-label:1.55}

body{font-size:var(--font-size-body);font-weight:var(--font-weight-body);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body)}
button,input,select,textarea{font-family:var(--font-family-sans)}
.hero-about h1,.surface.detail h1{font-size:var(--font-size-home-heading);font-weight:var(--font-weight-heading);line-height:var(--line-height-heading);letter-spacing:var(--letter-spacing-heading);max-width:var(--measure-heading);text-wrap:balance}
.hero-about h1,.home-view-split .hero-about h1{margin:0 0 var(--space-hero-heading-content)}
.hero-copy,.home-view-split .hero-copy{font-size:var(--font-size-hero-support);font-weight:var(--font-weight-body);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body);max-width:var(--measure-body)}
.hero-copy p+p{margin-top:var(--space-paragraph)}
.home-hero{padding-block:var(--space-page-rhythm)}
.home-view-split .home-hero{padding-block:0;top:calc(var(--header-height) + var(--space-10));margin-top:var(--space-hero-top)}
.home-view-split .homepage-layout{gap:var(--space-detail-columns)}
.gallery-toolbar{margin-bottom:var(--space-6)}
.home-news{margin-top:calc(var(--space-unit) * 24)}
.hero-news h2,.eyebrow,.description dt,.wide-hero-card .description dt,.project-menu-group h2{font-size:var(--font-size-caption);font-weight:var(--font-weight-label);line-height:var(--line-height-label);letter-spacing:var(--letter-spacing-label)}
.hero-news h2{margin-bottom:var(--space-4)}
.hero-news li{padding-block:var(--space-6)}
.hero-news h3{font-size:var(--font-size-body);font-weight:var(--font-weight-heading);line-height:var(--line-height-reading);letter-spacing:var(--letter-spacing-body)}

.project-card h2,.project-card[data-card-presentation="flip"] h2{font-size:calc(var(--font-size-card-heading) * var(--card-title-scale));font-weight:var(--font-weight-heading);line-height:var(--line-height-card);letter-spacing:var(--letter-spacing-card)}
.project-card .eyebrow,.project-card[data-card-presentation="flip"] .eyebrow,.project-card[data-card-presentation="current"]:not([data-image-mode="bleed"])>.card-copy>.eyebrow{font-size:var(--font-size-caption);margin-top:var(--space-title-eyebrow)}
.surface.detail>.eyebrow,.wide-hero-card>.eyebrow{margin-top:var(--space-detail-heading);font-size:var(--font-size-caption)}
.detail.heading-beside-image>.eyebrow{margin:var(--space-detail-heading) 0 var(--space-detail-context)}
.detail-layout,.wide-hero-card .detail-layout{gap:var(--space-detail-columns);margin-top:var(--space-text-media)}
.detail.heading-beside-image{column-gap:var(--space-detail-columns)}
.description dt,.wide-hero-card .description dt{margin:var(--space-6) 0 var(--space-2)}
.description dt:first-child,.wide-hero-card .description dt:first-child,.description .detail-fact:first-child dt,.wide-hero-card .description .detail-fact:first-child dt{margin-top:0}
.description .detail-fact{grid-column:1/-1}
.description dd,.wide-hero-card .description dd{font-size:var(--font-size-reading);font-weight:var(--font-weight-body);line-height:var(--line-height-reading);letter-spacing:var(--letter-spacing-body);max-width:48ch}
.story h2{font-size:var(--font-size-section-heading);font-weight:var(--font-weight-heading);line-height:var(--line-height-card);letter-spacing:var(--letter-spacing-card);margin:0 0 var(--space-4)}
.story p,.info-body p,.info-card .info-summary{font-size:var(--font-size-body);font-weight:var(--font-weight-body);line-height:var(--line-height-reading);letter-spacing:var(--letter-spacing-body);max-width:var(--measure-body)}
.story p,.info-body p{margin:0 0 var(--space-paragraph)}
.info-card .info-summary{margin:var(--space-6) 0 0}
.info-body{margin-top:var(--space-text-media)}
.detail-footer,.footer-note{font-size:var(--font-size-note);line-height:var(--line-height-label);letter-spacing:var(--letter-spacing-body)}
.project-card[data-card-presentation="current"]:not([data-image-mode="bleed"])>.visual{margin-top:var(--space-text-media)}
@media(min-width:601px){body.card-labels-hidden-desktop .image-card[data-image-mode="inset"]>.visual{margin-top:0}}

.dock nav a{font-size:var(--font-size-note);font-weight:var(--font-weight-body);line-height:var(--line-height-label);letter-spacing:var(--letter-spacing-body);padding-inline:var(--space-3)}
.project-menu button{font-size:var(--font-size-small);font-weight:var(--font-weight-body);line-height:var(--line-height-label);letter-spacing:var(--letter-spacing-body);padding:calc(var(--space-unit) * 2.5) var(--space-3)}
.project-menu-group h2{padding:var(--space-2) var(--space-3)}
.project-menu-group+.project-menu-group{margin-top:var(--space-3)}
.layout-control button,.gallery-toolbar .layout-control button,header .theme-toggle{font-size:var(--font-size-small);font-weight:var(--font-weight-body);line-height:var(--line-height-label);letter-spacing:var(--letter-spacing-body)}
.brand{font-weight:var(--font-weight-strong);letter-spacing:var(--letter-spacing-heading)}
.discipline{font-size:var(--font-size-small);font-weight:var(--font-weight-body);letter-spacing:var(--letter-spacing-body)}
.design-system-controls{border:0;padding:0;margin:0 0 24px;min-width:0}
.design-system-controls legend{padding:0;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
#settings .design-system-controls select{display:block;width:100%;margin-top:8px;padding:10px 12px;border:1px solid var(--nav-rim);border-radius:12px;background:var(--chrome);color:var(--ink);font:inherit}
#settings #cardHoverEffect{display:block;width:100%;margin-top:8px;padding:10px 12px;border:1px solid var(--nav-rim);border-radius:12px;background:var(--chrome);color:var(--ink);font:inherit}
#settings .design-system-controls label{font-size:13px;font-weight:400;line-height:1.5;letter-spacing:0;margin:16px 0}
#settings .design-system-controls p{font-size:12px;line-height:1.5;letter-spacing:0}
@media(max-width:1000px){.home-hero{padding-block:calc(var(--space-unit) * 20)}.home-view-split .home-hero{padding-block:0;margin-top:calc(var(--space-unit) * 16)}}
@media(max-width:850px){.project-card{padding-inline:var(--space-card-inset-compact-x)}}
@media(max-width:750px){.detail.heading-beside-image{column-gap:0}.detail.heading-beside-image>.detail-layout>.description{margin-top:var(--space-text-media)}}
@media(max-width:600px){.home-hero{padding-block:calc(var(--space-unit) * 14) calc(var(--space-unit) * 18)}.home-view-split .home-hero{padding-block:0;margin-top:var(--space-12)}.hero-news li{padding-block:var(--space-5)}}
@media(max-width:380px){.dock nav a{padding-inline:6px}}
@media(hover:none){.project-menu button{min-height:44px}}

/* Page rhythm is shared by the opening hero, the work canvas and the closing footer. */
main{padding-bottom:var(--space-page-rhythm)}
main:not(.wide-project-hero){/* padding-top:calc(var(--header-height) + var(--page-top)); */padding-top:0}
main.wide-project-hero{padding-top:var(--space-page-rhythm-sm)}
main.home-canvas{padding-top:0}
main:not(.wide-project-hero):not(.home-canvas)>.detail{margin-top:var(--space-page-rhythm-sm)}
.home-hero{padding-block:var(--space-page-rhythm-lg)}
.home-news{margin-top:var(--space-page-rhythm)}
.home-view-split .home-hero{margin-top:var(--space-page-rhythm-lg)}
.home-view-split .home-work{padding-top:var(--space-page-rhythm)}
.site-footer{padding-block:var(--space-page-rhythm-lg)}

/* Footer follows the same type ladder as the header and page heroes. */
.site-footer h2{font-size:var(--font-size-home-heading);max-width:var(--measure-heading);font-weight:var(--font-weight-heading);line-height:var(--line-height-heading);letter-spacing:var(--letter-spacing-heading)}
.footer-invitation{margin-top:var(--space-hero-heading-content);font-size:var(--font-size-body);font-weight:var(--font-weight-body);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body)}
.footer-credit{font-size:var(--font-size-caption);font-weight:var(--font-weight-body);line-height:var(--line-height-label);letter-spacing:var(--eyebrow-tracking);color:var(--eyebrow-ink)}

/* Project statements use sentence-case supporting text. Outcomes live in detail highlights. */
.project-card .project-summary,.surface.detail>.project-summary{max-width:58ch;margin:var(--space-title-eyebrow) 0 0;color:var(--muted);font-size:var(--font-size-project-summary);font-weight:var(--font-weight-body);line-height:var(--line-height-reading);letter-spacing:var(--letter-spacing-body);text-transform:none}
.surface.detail>.project-summary{margin-top:var(--space-hero-heading-content)}
/* Hero statements share the body scale rather than separate support sizes. */
.hero-copy,.home-view-split .hero-copy,.surface.detail>.project-summary{font-size:var(--font-size-body);line-height:var(--line-height-body);max-width:var(--measure-body)}

.detail.heading-beside-image>.detail-layout>.description{margin-top:var(--space-detail-context)}

/* One-column project compositions keep the shared card and media nodes. */
#singleColumnCardPositionSetting[hidden]{display:none}
#singleColumnCardPosition{display:block;width:100%;font:inherit;color:var(--ink);background:var(--chrome);border:1px solid var(--card-rim);padding:10px;border-radius:12px;margin-top:12px}
.homepage-layout:not(.home-view-split) .gallery-grid[data-columns="1"] .image-card[data-card-copy-position="bottom"]{display:flex;flex-direction:column;height:auto;min-height:0}
.homepage-layout:not(.home-view-split) .gallery-grid[data-columns="1"] .image-card[data-card-copy-position="bottom"]>.visual{position:relative;inset:auto;order:0;flex:none;margin:0 auto 0 0;height:var(--card-image-frame-height,auto);max-width:100%;border-radius:var(--radius-visual)}
.homepage-layout:not(.home-view-split) .gallery-grid[data-columns="1"] .image-card[data-card-copy-position="bottom"]>.card-copy{position:relative;order:1;margin-top:var(--space-text-media);color:var(--ink);text-shadow:none}
.homepage-layout:not(.home-view-split) .gallery-grid[data-columns="1"] .image-card[data-card-copy-position="bottom"]>.visual::after{display:none}
.homepage-layout:not(.home-view-split) .gallery-grid[data-columns="1"][data-layout="regular"] .image-card[data-card-copy-position="bottom"]{height:auto;min-height:0}
@media(min-width:701px){
 .homepage-layout:not(.home-view-split) .gallery-grid[data-columns="1"] .image-card:is([data-card-copy-position="left"],[data-card-copy-position="right"]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-detail-columns);align-items:center;height:auto;min-height:0}
 .homepage-layout:not(.home-view-split) .gallery-grid[data-columns="1"] .image-card:is([data-card-copy-position="left"],[data-card-copy-position="right"])>.card-copy{position:relative;grid-row:1;grid-column:1;align-self:center;min-width:0;color:var(--ink);text-shadow:none}
 .homepage-layout:not(.home-view-split) .gallery-grid[data-columns="1"] .image-card:is([data-card-copy-position="left"],[data-card-copy-position="right"])>.visual{position:relative;inset:auto;grid-row:1;grid-column:2;align-self:center;width:100%!important;height:var(--card-image-frame-height,auto);min-width:0;max-width:none;margin:0;border-radius:var(--radius-visual)}
 .homepage-layout:not(.home-view-split) .gallery-grid[data-columns="1"] .image-card[data-card-copy-position="right"]>.card-copy{grid-column:2}
 .homepage-layout:not(.home-view-split) .gallery-grid[data-columns="1"] .image-card[data-card-copy-position="right"]>.visual{grid-column:1}
 .homepage-layout:not(.home-view-split) .gallery-grid[data-columns="1"] .image-card:is([data-card-copy-position="left"],[data-card-copy-position="right"])>.visual::after{display:none}
 .homepage-layout:not(.home-view-split) .gallery-grid[data-columns="1"][data-layout="regular"] .image-card:is([data-card-copy-position="left"],[data-card-copy-position="right"]){height:auto;min-height:0}
}

/* Multi-column cards can move their text block above or below the image while
   keeping the image frame and copy dimensions stable. */
#multiColumnCardPositionSetting[hidden],#cardCopyHoverSetting[hidden]{display:none}
#multiColumnCardPosition{display:block;width:100%;font:inherit;color:var(--ink);background:var(--chrome);border:1px solid var(--card-rim);padding:10px;border-radius:12px;margin-top:12px}
.homepage-layout:not(.home-view-split) .gallery-grid[data-copy-layout="multiple"] .image-card[data-card-copy-position="bottom"]:not([data-image-mode="bleed"]){display:flex;flex-direction:column}
.homepage-layout:not(.home-view-split) .gallery-grid[data-copy-layout="multiple"] .image-card[data-card-copy-position="bottom"]:not([data-image-mode="bleed"])>.visual{position:relative;inset:auto;order:0;flex:none;margin:0 auto var(--space-text-media);height:var(--card-image-frame-height,auto);max-width:100%}
.homepage-layout:not(.home-view-split) .gallery-grid[data-copy-layout="multiple"] .image-card[data-card-copy-position="bottom"]:not([data-image-mode="bleed"])>.card-copy{position:relative;order:1;margin:0;color:var(--ink);text-shadow:none}
.homepage-layout:not(.home-view-split) .gallery-grid[data-copy-layout="multiple"] .image-card[data-image-mode="bleed"][data-card-copy-position="bottom"]>.card-copy{margin-top:auto}

/* Hover-only titles remains in the card's layout and streams in word by word. */
@media(min-width:751px) and (hover:hover) and (pointer:fine){
 .homepage-layout:not(.home-view-split) .gallery-grid[data-copy-layout="multiple"] .image-card[data-copy-hover="true"]>.card-copy>h2{opacity:0;pointer-events:none;transition:opacity 180ms cubic-bezier(.22,1,.36,1)}
 .homepage-layout:not(.home-view-split) .gallery-grid[data-copy-layout="multiple"] .image-card[data-copy-hover="true"]>.card-copy>h2 [data-card-copy-word]{opacity:0;transition:opacity 150ms ease-out}
 .homepage-layout:not(.home-view-split) .gallery-grid[data-copy-layout="multiple"] .image-card[data-copy-hover="true"]:is(:hover,:focus-visible,.gesture-hover)>.card-copy>h2{opacity:1;pointer-events:auto;transition-duration:90ms}
 .homepage-layout:not(.home-view-split) .gallery-grid[data-copy-layout="multiple"] .image-card[data-copy-hover="true"]:is(:hover,:focus-visible,.gesture-hover)>.card-copy>h2 [data-card-copy-word]{animation:card-copy-stream 190ms cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--card-copy-word-index,0) * 14ms)}
}
@keyframes card-copy-stream{from{opacity:0}to{opacity:1}}
html[data-animation="off"] .image-card[data-copy-hover="true"]>.card-copy{transition:none!important}
html[data-animation="off"] .image-card[data-copy-hover="true"]:is(:hover,:focus-visible,.gesture-hover)>.card-copy [data-card-copy-word]{opacity:1;animation:none!important}
@media(prefers-reduced-motion:reduce){.image-card[data-copy-hover="true"]>.card-copy{transition:none!important}.image-card[data-copy-hover="true"]:is(:hover,:focus-visible,.gesture-hover)>.card-copy [data-card-copy-word]{opacity:1;animation:none!important}}

/* Keep each eyebrow/value pair distinct while bringing the first one closer
   to the summary. Explicit grid spacing avoids margin collapse between facts. */
.surface.detail .description dl{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--space-detail-sections)}
.surface.detail .description .detail-fact{grid-column:1/-1}
.surface.detail .description .detail-fact dt,.wide-hero-card .description .detail-fact dt{margin:0 0 var(--space-2)}

/* Hero support and detail prose share one theme-responsive reading colour. */
.hero-copy,.surface.detail>.project-summary,.surface.detail .description dd,.surface.detail .info-body p,.story p{color:var(--body-ink)}
.has-room{--body-ink:var(--ink)}

/* Quiet metadata supports the reading hierarchy without competing with prose. */
.surface.detail .eyebrow,.surface.detail .description dt,.story .eyebrow{color:var(--eyebrow-ink);font-weight:var(--eyebrow-weight);letter-spacing:var(--eyebrow-tracking)}

/* Navigation shares the eyebrow scale and colour hierarchy. Resting labels
   are quiet; hover adds a very small wash, while selected/open states use the
   slightly denser semantic surface from the active token. */
.dock-morph nav a,.dock-morph .context-nav button,.dock-morph nav .site-settings-toggle,#settingsToggle{color:var(--nav-item-ink)}
.dock-morph nav a{font-size:var(--font-size-caption);font-weight:var(--eyebrow-weight);line-height:var(--line-height-label);letter-spacing:var(--eyebrow-tracking)}
.dock-morph nav a.active{background:var(--nav-active);color:var(--ink)}
.dock-morph .context-nav button:is(:hover,:focus-visible,.hover-trail){background:var(--nav-item-hover);color:var(--ink)}
.dock-morph nav a:not(.active):is(:hover,:focus-visible,.hover-trail){background:var(--nav-item-hover);color:var(--ink)}
.dock-morph nav .site-settings-toggle{font-size:var(--font-size-caption);font-weight:var(--eyebrow-weight);line-height:1;letter-spacing:var(--eyebrow-tracking)}
.dock-morph nav .site-settings-toggle[aria-expanded="true"]{background:var(--nav-active);color:var(--ink)}
.dock-morph nav .site-settings-toggle svg,.context-nav button svg{width:16px;height:16px;stroke-width:1.5}
.dock-morph .project-menu button{font-size:var(--font-size-caption);font-weight:var(--eyebrow-weight);line-height:var(--line-height-label);letter-spacing:var(--eyebrow-tracking);color:var(--nav-item-ink)}
.dock-morph .project-menu button.active{background:var(--nav-active);color:var(--ink)}
.dock-morph .project-menu button:not(.active):is(:hover,:focus-visible,.hover-trail){background:var(--nav-item-hover);color:var(--ink)}
.dock-morph .project-menu-group h2{color:var(--eyebrow-ink)}
.dock-morph .project-menu{isolation:isolate}
.dock-morph .project-menu::before{content:"";position:absolute;z-index:0;left:8px;right:8px;top:0;height:var(--project-menu-hover-height,36px);border-radius:14px;background:var(--nav-item-hover);opacity:0;pointer-events:none;transform:translate3d(0,var(--project-menu-hover-y,0px),0);transition:transform 110ms cubic-bezier(.2,.8,.2,1),height 130ms cubic-bezier(.2,.8,.2,1),opacity 180ms ease;will-change:transform,height}
.dock-morph .project-menu[data-cursor-tracking="true"]::before{opacity:1}
.dock-morph .project-menu[data-cursor-motion="snap"]::before{transition-duration:210ms,160ms,160ms;transition-timing-function:cubic-bezier(.16,1,.3,1)}
.dock-morph .project-menu[data-cursor-motion="none"]::before{transition-duration:0ms}
.dock-morph .project-menu-group{position:relative;z-index:1}
.dock-morph .project-menu[data-cursor-tracking="true"] button:not(.active):is(:hover,:focus-visible,.hover-trail){background:transparent}
#settingsToggle{font-size:18px}

/* Nav settings live on the final, high-specificity selectors so the control
   tokens win over the structural and mobile nav rules above. */
#dock nav a{font-size:var(--nav-item-font-size);line-height:var(--line-height-label);padding:var(--nav-item-padding) min(calc(var(--nav-item-padding) + 5px),16px)}
#dock .dock-content>nav{padding:var(--nav-container-padding)}
@media(max-width:600px){#dock nav a{padding-inline:min(calc(var(--nav-item-padding) + 5px),12px)}}
@media(max-width:380px){#dock nav a{font-size:min(var(--nav-item-font-size),14px);padding-inline:min(calc(var(--nav-item-padding) + 5px),6px)}}

/* Reserve a glimpse of work as the window becomes shorter, using measured hero content. */
main.home-canvas:not(.home-view-split) .home-hero{--hero-padding:min(var(--space-page-rhythm-lg),var(--hero-viewport-space,var(--space-page-rhythm-lg)));--hero-top-bias:min(32px,var(--hero-padding));padding-top:108px;padding-bottom:0}
.home-view-split .home-hero{margin-top:calc(var(--space-page-rhythm-lg) + 32px)}

/* Client, project title and summary are independently visible card fields. */
.project-card.image-card>.card-copy{--card-client-gap:24px;position:relative;display:grid;grid-template-columns:fit-content(35%) minmax(0,1fr);column-gap:var(--card-client-gap);align-items:baseline}
.project-card.image-card>.card-copy>.card-client{grid-column:1;grid-row:1;margin:0;font-size:var(--font-size-body);font-weight:var(--font-weight-body);line-height:var(--line-height-heading);letter-spacing:var(--letter-spacing-body);color:var(--eyebrow-ink);text-wrap:pretty;overflow-wrap:anywhere}
.project-card.image-card>.card-copy>h2{grid-column:2;grid-row:1;min-width:0}
.project-card.image-card>.card-copy>.project-summary{grid-column:2;grid-row:2;min-width:0}
.project-card.image-card>.card-copy:not(:has(.card-client)){grid-template-columns:minmax(0,1fr)}
.project-card.image-card>.card-copy:not(:has(.card-client))>h2,.project-card.image-card>.card-copy:not(:has(.card-client))>.project-summary{grid-column:1}
@media(max-width:600px){.project-card.image-card>.card-copy>.card-client{font-size:var(--font-size-small);line-height:var(--line-height-body)}}

body.card-client-hidden .project-card.image-card>.card-copy{grid-template-columns:minmax(0,1fr)}
body.card-client-hidden .project-card.image-card>.card-copy>h2,body.card-client-hidden .project-card.image-card>.card-copy>.project-summary{grid-column:1}
body.card-client-hidden.card-title-hidden .project-card.image-card>.card-copy>.project-summary,body.card-client-hidden .project-card.image-card>.card-copy:not(:has(.card-client))>.project-summary{grid-row:1}
body.card-client-hidden .project-card.image-card>.card-copy>.card-client,body.card-title-hidden .project-card.image-card>.card-copy>h2,body.card-description-hidden .project-card.image-card>.card-copy>.project-summary{display:none}

/* Align customer and the first visible line on one shared baseline. */
.project-card.image-card>.card-copy>h2{margin-top:0}
#projectMenuToggle{display:none}
#dock .project-menu:not(.site-settings-menu) button{font-size:var(--composer-font-size);color:var(--composer-text-ink);letter-spacing:var(--letter-spacing-body);font-weight:var(--font-weight-body)}

/* Match each arrow's square hit area and inset to the separate settings button. */
#dock{--nav-context-width:calc(88px + 2 * var(--nav-container-padding));--composer-text-ink:var(--muted)}
#dock .context-nav{padding:var(--nav-container-padding) calc(6px + var(--nav-container-padding));justify-content:center;gap:4px}
#dock .context-nav button{flex:0 0 36px;width:36px;height:36px}
#dock .project-menu:not(.site-settings-menu) button:is(:hover,:focus-visible,.hover-trail,.active){color:var(--ink)}

/* Client metadata joins the shared title morph; project names stay client-free. */
.surface.detail>.project-client{margin:0 0 var(--space-2);font-size:var(--font-size-body);font-weight:var(--font-weight-body);line-height:var(--line-height-label);letter-spacing:var(--letter-spacing-body);color:var(--eyebrow-ink)}

/* Content-page hero follows the same heading/body rhythm as project details. */
.surface.detail.about-detail{min-height:0}
.about-detail>.info-body{margin-top:var(--space-hero-heading-content)}
.about-detail>.info-body p{margin:0;line-height:var(--line-height-body)}
.about-detail>.story{margin:var(--space-hero-heading-content) 0 0;width:100%;max-width:none}
.about-detail .card-gallery-block{margin:0}
body.card-background-hidden .info-detail>.liquid-skin{display:none!important}

/* spatial-navigation.css */
/* Local input feedback lives outside the moving canvas and uses the site's
   existing type, spacing and theme roles. */
.interaction-capture{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none;left:-10px;top:-10px}
.interaction-hud{position:fixed;z-index:55;top:22px;left:50%;transform:translateX(-50%);display:flex;gap:8px;max-width:calc(100vw - 140px)}
.input-status{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 12px;border-radius:20px;min-width:0;background:var(--chrome);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 3px 18px var(--nav-shadow);font-size:var(--font-size-caption);line-height:var(--line-height-label);color:var(--eyebrow-ink)}
.input-status>[data-input-status]{max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.input-status>svg{width:14px;height:14px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.input-status button{display:grid;place-items:center;width:24px;height:24px;flex-shrink:0;padding:0;border-radius:50%;background:transparent;color:var(--eyebrow-ink)}
.input-status button:hover,.input-status button.gesture-hover{background:var(--nav-item-hover);color:var(--ink)}
.input-status button svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.input-status[data-phase="hearing"],.input-status[data-phase="acting"]{color:var(--ink)}
.interaction-feedback{position:fixed;z-index:60;top:76px;left:50%;transform:translateX(-50%);max-width:min(500px,calc(100vw - 40px));padding:10px 16px;border-radius:16px;background:var(--chrome);color:var(--body-ink);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);font-size:var(--font-size-small);line-height:var(--line-height-label);text-align:center;box-shadow:0 4px 24px var(--nav-shadow)}
.gesture-cursor{position:fixed;z-index:100;top:0;left:0;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;pointer-events:none;background:color-mix(in oklab,var(--page) 64%,transparent);box-shadow:0 0 0 1.5px color-mix(in oklab,var(--ink) 48%,transparent),0 3px 14px var(--nav-shadow);backdrop-filter:blur(4px);transition:transform 65ms linear,background-color 120ms ease;will-change:transform}
.gesture-cursor::after{content:'';position:absolute;inset:8px;border-radius:50%;background:var(--ink);opacity:.6;transition:inset 120ms ease}
.gesture-cursor.over-control{background:color-mix(in oklab,var(--page) 86%,transparent);box-shadow:0 0 0 1.5px var(--ink),0 3px 14px var(--nav-shadow)}
.gesture-cursor.over-control::after{inset:6px}
.gesture-cursor.clicked::after{animation:gesture-click 260ms ease}
@keyframes gesture-click{50%{inset:3px;opacity:.9}100%{inset:6px;opacity:.6}}
.interaction-hud[hidden],.input-status[hidden],.interaction-feedback[hidden],.gesture-cursor[hidden]{display:none}
.gesture-scroll-control{position:fixed;z-index:56;right:24px;top:50%;transform:translateY(-50%);width:28px;height:144px;border-radius:18px;background:var(--chrome);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 3px 18px var(--nav-shadow);color:var(--eyebrow-ink);pointer-events:none}
.gesture-scroll-control[hidden]{display:none}
.gesture-scroll-control svg{position:absolute;left:8px;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.4}
.gesture-scroll-control .scroll-up{top:9px}.gesture-scroll-control .scroll-down{bottom:9px}
.gesture-scroll-control[data-direction="up"] .scroll-up,.gesture-scroll-control[data-direction="down"] .scroll-down{color:var(--ink);opacity:1}
.scroll-neutral{position:absolute;left:5px;right:5px;top:calc(50% - 12px);height:24px;border-radius:8px;background:var(--nav-item-hover)}
.scroll-marker{position:absolute;left:10px;top:calc(50% - 4px);width:8px;height:8px;border-radius:50%;background:var(--ink);opacity:.65;transform:translateY(var(--scroll-offset,0px));transition:transform 70ms linear;will-change:transform}
@media(prefers-reduced-motion:reduce){.scroll-marker{transition:none}}
:root[data-animation="off"] .scroll-marker{transition:none}

.interaction-guide{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;padding:clamp(20px,5vw,80px);background:transparent;color:var(--ink);overflow:auto;overscroll-behavior:contain}
.interaction-guide[open]{display:grid;place-items:center}
.interaction-guide::backdrop{background:color-mix(in oklab,var(--page) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.interaction-guide-content{width:min(100%,800px);margin:auto;min-width:0}
.interaction-guide .interaction-eyebrow{font-size:var(--font-size-caption);font-weight:var(--eyebrow-weight);line-height:var(--line-height-label);letter-spacing:var(--eyebrow-tracking);text-transform:uppercase;color:var(--eyebrow-ink);margin:0 0 var(--space-4)}
.interaction-guide h2{margin:0 0 var(--space-hero-heading-content);font-size:var(--font-size-home-heading);font-weight:var(--font-weight-heading);line-height:var(--line-height-heading);letter-spacing:var(--letter-spacing-heading);text-wrap:balance}
.interaction-privacy{margin:0;max-width:60ch;font-size:var(--font-size-body);line-height:var(--line-height-body);color:var(--body-ink)}
.interaction-guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,70px);margin-top:var(--space-10)}
.interaction-guide-grid section{min-width:0}
.interaction-guide h3{font-size:var(--font-size-caption);font-weight:var(--eyebrow-weight);line-height:var(--line-height-label);letter-spacing:var(--eyebrow-tracking);text-transform:uppercase;color:var(--eyebrow-ink);margin:0 0 var(--space-4)}
.voice-command-example{font-size:var(--font-size-section-heading);font-weight:var(--font-weight-heading);line-height:var(--line-height-card);letter-spacing:var(--letter-spacing-heading);margin:0 0 var(--space-3)}
.interaction-guide p.guide-body{margin:0 0 var(--space-4);font-size:var(--font-size-small);line-height:var(--line-height-body);color:var(--body-ink);max-width:45ch}
.voice-command-list{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--space-4)}
.voice-command-list span{padding:6px 9px;border-radius:9px;font-size:var(--font-size-caption);line-height:var(--line-height-label);color:var(--body-ink);background:var(--nav-item-hover)}
.gesture-guide-list{padding:0;margin:0;list-style:none;display:grid;gap:var(--space-4)}
.gesture-guide-list li{display:flex;align-items:start;gap:var(--space-3);font-size:var(--font-size-small);line-height:var(--line-height-label);color:var(--body-ink)}
.gesture-guide-list li>svg{flex:0 0 22px;width:22px;height:22px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;color:var(--eyebrow-ink)}
.gesture-guide-list strong{display:block;margin-bottom:3px;font-weight:var(--font-weight-body);color:var(--ink)}
.interaction-guide-hint{font-size:var(--font-size-caption);line-height:var(--line-height-label);color:var(--eyebrow-ink);margin:var(--space-8) 0 var(--space-4)}
.interaction-guide-actions{display:flex;gap:10px;align-items:center}
.interaction-guide-actions button{padding:11px 22px;border-radius:14px;font-size:var(--font-size-small);line-height:var(--line-height-label);color:var(--body-ink);background:var(--nav-item-hover);min-height:44px}
.interaction-guide-actions button.primary{color:var(--ink);background:var(--nav-active)}
.interaction-guide-actions button:is(:hover,.gesture-hover){background:color-mix(in oklab,var(--ink) 12%,transparent);color:var(--ink)}
.interaction-guide-actions button:disabled{opacity:.5;cursor:wait}
.interaction-setup-status{min-height:1.5em;font-size:var(--font-size-small);line-height:var(--line-height-body);color:var(--body-ink);margin:var(--space-4) 0 0;max-width:60ch}
.interaction-setup-status.is-error{color:var(--ink)}
.dock-morph nav a:not(.active).gesture-hover,.dock-morph .context-nav button.gesture-hover,.dock-morph nav .site-settings-toggle.gesture-hover,.dock-morph .project-menu button:not(.active).gesture-hover{background:var(--nav-item-hover);color:var(--ink);transition-duration:var(--nav-hover-in-duration)}
@media(max-width:700px){.interaction-guide-grid{grid-template-columns:1fr;gap:var(--space-6);margin-top:var(--space-6)}.interaction-guide h2{margin-bottom:var(--space-4)}.gesture-guide-list{grid-template-columns:1fr 1fr;gap:var(--space-4)}.interaction-guide-hint{margin-top:var(--space-6)}.interaction-hud{top:14px;max-width:calc(100vw - 130px);left:16px;transform:none;flex-direction:column;align-items:start}.input-status>[data-input-status]{max-width:min(210px,calc(100vw - 210px))}.interaction-feedback{top:96px}}
@media(max-width:420px){.gesture-guide-list{grid-template-columns:1fr}.interaction-guide-grid{gap:var(--space-5)}}
@media(prefers-reduced-motion:reduce){.gesture-cursor{transition:none}.gesture-cursor.clicked::after{animation:none}}
:root[data-animation="off"] .gesture-cursor{transition:none}
:root[data-animation="off"] .gesture-cursor.clicked::after{animation:none}

/* hero-timeline.css */
.hero-about:has(.hero-timeline),.hero-copy:has(.hero-timeline){max-width:none}
.timeline-block{grid-column:1/-1;padding:0;margin:0;background:transparent;border:0;--timeline-text-gap:var(--space-hero-heading-content)}
.timeline-block>.hero-timeline{margin-top:0}
.hero-about h1 .hero-greeting{color:var(--body-ink)}
.hero-about:has(.hero-timeline){--timeline-text-gap:clamp(24px,3vw,48px)}
.hero-about:has(.hero-timeline) h1{margin-bottom:0}
/* Keep the heading-to-description rhythm when both hero content toggles are on. */
.hero-about[data-hero-combined-content="true"] h1{margin:0px 0px 24px}
.hero-timeline{--timeline-position:0;position:relative;left:50%;transform:translateX(-50%);margin-top:var(--timeline-text-gap);width:100vw;color:var(--body-ink)}
.timeline-viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;outline-offset:8px;touch-action:pan-x pan-y}
.timeline-viewport::-webkit-scrollbar{display:none}
.timeline-track{position:relative;width:max-content;min-width:100%;padding-top:calc(20px + var(--timeline-text-gap))}
.timeline-rule{position:absolute;top:0;left:0;width:100%;height:20px;background:linear-gradient(color-mix(in oklch,var(--ink) 22%,transparent),color-mix(in oklch,var(--ink) 22%,transparent)) 0 10px/100% 1px no-repeat,repeating-linear-gradient(90deg,color-mix(in oklch,var(--ink) 15%,transparent) 0 1px,transparent 1px 24px) 0 7px/100% 7px no-repeat,repeating-linear-gradient(90deg,color-mix(in oklch,var(--ink) 20%,transparent) 0 1px,transparent 1px 96px) 0 1px/100% 19px no-repeat}
.timeline-track ol{display:flex;gap:clamp(40px,5vw,100px);list-style:none;padding:0 clamp(64px,calc((100vw - 1512px)/2 + 64px),190px);margin:0}
.timeline-track li{flex:0 0 clamp(230px,22vw,320px);font-size:var(--font-size-body);font-weight:var(--font-weight-body);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body);padding-bottom:4px}
.timeline-track p{margin:0}.timeline-track a{color:inherit;text-decoration-thickness:1px;text-underline-offset:4px}
.timeline-scrubber{position:absolute;left:16px;right:16px;top:10px;height:0;pointer-events:none}
.timeline-handle{position:absolute;left:calc(var(--timeline-position) * 100%);top:0;transform:translate(-50%,-50%);width:32px;height:32px;padding:0;border:0;background:transparent;border-radius:50%;pointer-events:auto;cursor:grab;touch-action:none;color:var(--body-ink)}
.timeline-handle::before{content:'';position:absolute;inset:12px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px var(--page);opacity:.65;transition:opacity 180ms ease}
.timeline-handle:hover::before,.timeline-handle:focus-visible::before{opacity:1}.hero-timeline[data-dragging] .timeline-handle,.hero-timeline[data-dragging] .timeline-viewport{cursor:grabbing}.hero-timeline[data-timeline-mode=drag] .timeline-viewport{cursor:grab}
.home-view-split .timeline-track li{flex-basis:260px}
@media(max-width:850px){.timeline-track ol{padding-inline:24px}}
@media(max-width:600px){.timeline-track li{flex-basis:min(72vw,300px)}.timeline-track ol{gap:36px;padding-inline:24px}}

/* home-about.css */
.home-about{margin-top:var(--space-page-rhythm-lg);width:100%;min-width:0;grid-column:1 / -1}
.home-about h2{max-width:27ch;margin:0;font-size:var(--font-size-home-heading);font-weight:var(--font-weight-heading);line-height:var(--line-height-heading);letter-spacing:var(--letter-spacing-heading);color:var(--ink);text-wrap:pretty}
.home-about-copy,.home-about-lists{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--space-6)}
.home-about-copy{margin-top:var(--space-page-rhythm-sm)}
.home-about-copy p{grid-column:2;margin:0;max-width:38ch;font-size:var(--font-size-body);font-weight:var(--font-weight-body);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body);color:var(--body-ink)}
.home-about-copy p+p{grid-column:3}
.home-about-path{grid-column:1/-1;margin-top:var(--space-page-rhythm-md);padding-block:clamp(20px,2.5vw,36px)}
.home-about-path .hero-timeline{--timeline-text-gap:clamp(36px,4vw,56px);margin-top:0}
.home-about-path .timeline-track ol{padding-inline:clamp(48px,6vw,120px)}
.home-about-lists{align-items:start;margin-top:var(--space-page-rhythm-md);padding:0;background:transparent}
.home-about-list-content{grid-column:2 / span 2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-6);row-gap:var(--space-page-rhythm-md)}
.home-about-list{min-width:0;grid-column:1}
.home-about-list h3{margin:0 0 var(--space-4);font-size:var(--font-size-caption);font-weight:var(--eyebrow-weight);line-height:var(--line-height-label);letter-spacing:var(--eyebrow-tracking);color:var(--eyebrow-ink)}
.home-about-list ul{position:relative;isolation:isolate;list-style:none;padding:0;margin:0;display:grid;gap:var(--space-6)}
.home-about-list li{position:relative}
.home-about-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:var(--space-6);padding:0;font-size:var(--font-size-body);font-weight:var(--font-weight-body);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body);color:var(--body-ink)}
.home-about-item{transition:color 180ms var(--ease-standard)}
.home-about-years{font-variant-numeric:tabular-nums;color:var(--eyebrow-ink);white-space:nowrap}
@media(hover:hover){.home-about-list li:hover .home-about-item{color:var(--ink)}}
.home-view-split .home-about{margin-top:var(--space-page-rhythm-md)}
.info-grid[hidden]{display:none!important}
@media(max-width:600px){.home-about-copy,.home-about-lists{grid-template-columns:1fr}.home-about-copy{row-gap:var(--space-6)}.home-about-copy p,.home-about-copy p+p{grid-column:1;max-width:none}.home-about-list-content{grid-column:1;grid-template-columns:1fr}.home-about{margin-top:var(--space-page-rhythm-md)}.home-about-path{margin-top:var(--space-page-rhythm-md);padding-block:20px}.home-about-path .hero-timeline{--timeline-text-gap:32px}.home-about-path .timeline-track ol{padding-inline:28px}}

/* card-gallery.css */
.card-gallery-block{grid-column:1 / -1;min-width:0;margin:var(--space-page-rhythm-sm) 0;background:transparent;border:0;padding:0}
.home-product-carousel>.story{margin-top:0}
.homepage-layout[data-product-display="carousel"] .flip-index{display:none}
.card-gallery-block>h2{font-size:var(--font-size-home-heading);font-weight:var(--font-weight-heading);line-height:var(--line-height-heading);letter-spacing:var(--letter-spacing-heading);margin:0 0 var(--space-6);color:var(--ink)}
.card-gallery-block>p{font-size:var(--font-size-body);line-height:var(--line-height-body);color:var(--body-ink);margin:0 0 var(--space-8)}
.spatial-card-gallery{--gallery-landscape-width:clamp(340px,46vw,700px);--gallery-portrait-width:clamp(210px,26vw,360px);--gallery-card-width:var(--gallery-landscape-width);--gallery-card-height:clamp(340px,40vw,500px);min-width:0}
.spatial-gallery-viewport{position:relative;display:flex;align-items:center;gap:var(--space-6);height:calc(var(--gallery-card-height) + 64px);width:var(--app-canvas-width);margin-inline:calc((100% - var(--app-canvas-width))/2);padding:32px calc((var(--app-canvas-width) - var(--gallery-last-width,var(--gallery-card-width)))/2) 32px calc((var(--app-canvas-width) - var(--gallery-first-width,var(--gallery-card-width)))/2);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.spatial-gallery-viewport::-webkit-scrollbar{display:none}
.spatial-gallery-viewport{cursor:grab;user-select:none}.spatial-card-gallery[data-gallery-dragging="true"] .spatial-gallery-viewport{scroll-snap-type:none;cursor:grabbing}
.spatial-gallery-item{position:relative;flex:0 0 var(--gallery-card-width);width:var(--gallery-card-width);height:var(--gallery-card-height);scroll-snap-align:center;scroll-snap-stop:always}
.spatial-gallery-item[data-gallery-orientation="portrait"]{--gallery-card-width:var(--gallery-portrait-width)}
.spatial-gallery-pose{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform-origin:center;transition:transform 120ms ease-out,opacity 120ms ease-out}
.spatial-gallery-pose>.content-block{position:relative;z-index:1;height:100%;padding:0;background:transparent;border:0}
.spatial-gallery-pose :is(.project-card,.content-media-frame){height:100%;width:100%;min-height:0;max-width:none;margin:0;border-radius:var(--radius-home-content-card)}
.spatial-gallery-pose .project-card{padding:var(--space-4)!important}
.spatial-gallery-item[data-gallery-media="true"] .card-copy,.spatial-gallery-item[data-gallery-media="true"] .content-block>:is(h2,p){display:none}
.spatial-gallery-pose .visual{--image-padding-top:0px!important;--image-padding-right:0px!important;--image-padding-bottom:0px!important;--image-padding-left:0px!important;width:100%!important;height:100%!important;min-height:0;margin:0!important;aspect-ratio:auto!important}
.spatial-gallery-pose .visual img{object-fit:contain;max-width:100%;max-height:100%}
.spatial-gallery-caption{display:flex;justify-content:space-between;align-items:start;gap:var(--space-6);width:100%;max-width:none;margin:0}
.home-product-carousel .spatial-gallery-caption{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--space-6)}
.home-product-carousel .spatial-gallery-copy{grid-column:2 / span 2;width:100%}
.spatial-gallery-copy{display:grid;grid-template-columns:fit-content(35%) minmax(0,1fr);column-gap:24px;row-gap:var(--space-title-eyebrow);flex:1;min-width:0;cursor:default;user-select:none}.spatial-gallery-copy[href]{cursor:pointer}
.spatial-gallery-copy h3{grid-column:2;grid-row:1;min-width:0;margin:0;color:var(--ink);font-size:calc(var(--font-size-card-heading) * var(--card-title-scale));font-weight:var(--font-weight-heading);line-height:var(--line-height-card);letter-spacing:var(--letter-spacing-card)}
.spatial-gallery-copy .spatial-gallery-description{grid-column:2;grid-row:2;margin:0;max-width:none;color:var(--muted);font-size:var(--font-size-project-summary);line-height:var(--line-height-reading);letter-spacing:var(--letter-spacing-body)}
.spatial-gallery-copy .spatial-gallery-client{grid-column:1;grid-row:1;align-self:baseline;margin:0;color:var(--eyebrow-ink);font-size:var(--font-size-body);font-weight:var(--font-weight-body);line-height:var(--line-height-heading);letter-spacing:var(--letter-spacing-body);text-wrap:pretty;overflow-wrap:anywhere}
.spatial-gallery-copy:not(:has(.spatial-gallery-client:not([hidden]))){grid-template-columns:minmax(0,1fr)}
.spatial-gallery-copy:not(:has(.spatial-gallery-client:not([hidden]))) h3,.spatial-gallery-copy:not(:has(.spatial-gallery-client:not([hidden]))) .spatial-gallery-description{grid-column:1}
body.card-client-hidden .spatial-gallery-copy{grid-template-columns:minmax(0,1fr)}
body.card-client-hidden .spatial-gallery-copy h3,body.card-client-hidden .spatial-gallery-copy .spatial-gallery-description{grid-column:1}
body.card-client-hidden.card-title-hidden .spatial-gallery-copy .spatial-gallery-description{grid-row:1}
body.card-client-hidden .spatial-gallery-copy .spatial-gallery-client,body.card-title-hidden .spatial-gallery-copy h3,body.card-description-hidden .spatial-gallery-copy .spatial-gallery-description{display:none}
.spatial-gallery-controls{display:flex;gap:var(--space-2);flex-shrink:0}
.spatial-gallery-controls button{width:40px;height:40px;padding:0;font-size:20px}
.spatial-gallery-controls button:hover{color:var(--ink)}.spatial-gallery-controls button:disabled{opacity:.3;cursor:default}
.spatial-gallery-viewport:focus-visible,.spatial-gallery-controls button:focus-visible{outline:2px solid var(--body-ink);outline-offset:4px}
[data-gallery-axis="vertical"] .spatial-gallery-viewport{flex-direction:column;width:100%;height:760px;margin-inline:0;padding:calc((760px - var(--gallery-card-height))/2) 0;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior-y:contain}
[data-gallery-axis="vertical"] .spatial-gallery-item{flex-basis:var(--gallery-card-height)}
[data-gallery-reduced="true"] .spatial-gallery-pose{transition:none}
.spatial-card-gallery[data-gallery-variant="circular"][data-gallery-reduced="false"] .spatial-gallery-viewport{display:block;padding:0;overflow:hidden;scroll-snap-type:none;perspective:1800px;touch-action:pan-y pinch-zoom}
.spatial-card-gallery[data-gallery-variant="circular"][data-gallery-reduced="false"] .spatial-gallery-item{position:absolute;left:50%;top:50%;scroll-snap-align:none;transform-origin:center;transform-style:preserve-3d}
.spatial-card-gallery[data-gallery-variant="circular"][data-gallery-reduced="false"] .spatial-gallery-pose{transition:none}
.spatial-card-gallery[data-gallery-variant="circular"][data-gallery-reduced="false"][data-gallery-axis="vertical"] .spatial-gallery-viewport{touch-action:pan-x pinch-zoom}
@media(max-width:600px){.spatial-card-gallery{--gallery-landscape-width:calc(var(--app-canvas-width) - 48px);--gallery-portrait-width:calc(var(--app-canvas-width) - 64px);--gallery-card-height:360px}.spatial-gallery-viewport{gap:48px}.home-product-carousel .spatial-gallery-caption{display:block}.home-product-carousel .spatial-gallery-copy{width:100%}[data-gallery-axis="vertical"] .spatial-gallery-viewport{height:640px;padding-block:calc((640px - var(--gallery-card-height))/2)}}
@media(prefers-reduced-motion:reduce){.spatial-gallery-pose{transition:none}}

/* Titanium side wall. Cached material surfaces move with the card's turn;
   no image texture sampling or additional perpetual shader loop. */
.spatial-card-gallery{--gallery-metal-shadow:oklch(.36 .008 260);--gallery-metal-mid:oklch(.63 .008 260);--gallery-metal-light:oklch(.86 .005 260);--gallery-metal-shine:oklch(.96 .003 260)}
:root[data-theme="dark"] .spatial-card-gallery{--gallery-metal-shadow:oklch(.26 .008 260);--gallery-metal-mid:oklch(.49 .008 260);--gallery-metal-light:oklch(.70 .005 260);--gallery-metal-shine:oklch(.82 .003 260)}
.spatial-gallery-extrusion{position:absolute;z-index:2;pointer-events:none;transform-style:preserve-3d}
.spatial-gallery-extrusion[hidden]{display:none}
.spatial-gallery-extrusion>i{position:absolute;transform-origin:0 0;backface-visibility:hidden;background:linear-gradient(128deg,var(--gallery-metal-light) 0%,var(--gallery-metal-mid) 20%,var(--gallery-metal-shadow) 42%,var(--gallery-metal-shine) 54%,var(--gallery-metal-mid) 64%,var(--gallery-metal-shadow) 100%);box-shadow:inset 0 1px 0 color-mix(in oklch,var(--gallery-metal-shine) 65%,transparent),inset 0 -1px 0 var(--gallery-metal-shadow)}
.spatial-gallery-extrusion>i:nth-child(2n){background:linear-gradient(128deg,var(--gallery-metal-mid),var(--gallery-metal-shadow) 42%,var(--gallery-metal-light) 54%,var(--gallery-metal-mid) 67%,var(--gallery-metal-shadow))}

@media(max-width:600px){.spatial-gallery-controls{display:none}.spatial-gallery-copy{width:100%}}

.spatial-gallery-stage{position:relative}
.spatial-gallery-primary-action{position:absolute;left:0;right:0;bottom:-8px;z-index:8;display:flex;justify-content:center;align-items:center;gap:var(--space-2);pointer-events:none}
.spatial-gallery-primary-action>.spatial-gallery-details{pointer-events:auto}
.spatial-gallery-primary-action>.spatial-gallery-controls{pointer-events:auto}

/* home-sections.css */
:root{--radius-home-content-card:20px;--home-content-card-padding:clamp(24px,2.6vw,40px);--font-size-testimonial:clamp(calc(22px * var(--type-scale)),calc(2.1vw * var(--type-scale)),calc(32px * var(--type-scale)))}
[data-home-section][hidden],.home-about[hidden]{display:none!important}
.home-content-section{grid-column:1 / -1;min-width:0;width:100%;margin-top:var(--space-page-rhythm-lg)}
.home-content-section>h2{margin:0 0 var(--space-page-rhythm-sm);font-size:var(--font-size-home-heading);font-weight:var(--font-weight-heading);line-height:var(--line-height-heading);letter-spacing:var(--letter-spacing-heading);color:var(--ink)}
.home-services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.home-approach{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--space-6);align-items:start}
.home-approach-intro{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--space-6);min-width:0}
.home-approach-principles{grid-column:2 / span 2;min-width:0}
.home-approach-intro h2{grid-column:1 / -1;margin:0 0 var(--space-6);font-size:var(--font-size-home-heading);font-weight:var(--font-weight-heading);line-height:var(--line-height-heading);letter-spacing:var(--letter-spacing-heading);color:var(--ink);text-wrap:balance}
.home-approach p{margin:0;font-size:var(--font-size-body);font-weight:var(--font-weight-body);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body);color:var(--body-ink);text-wrap:pretty}
.home-approach-intro>p{grid-column:2;min-width:0;max-width:38ch}
.home-approach-intro>p+p{grid-column:3}
.home-approach-principles{display:grid;gap:var(--space-6);margin-top:var(--space-page-rhythm-sm)}
.home-approach-principles h3{margin:0 0 var(--space-1);font-size:var(--font-size-body);font-weight:var(--font-weight-body);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body);color:var(--body-ink)}
.home-approach-principles p{font-size:var(--font-size-body);font-weight:var(--font-weight-body);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body);color:var(--eyebrow-ink)}
@media(max-width:600px){.home-approach,.home-approach-intro{grid-template-columns:1fr}.home-approach-intro{row-gap:var(--space-6)}.home-approach-intro h2{margin-bottom:0}.home-approach-intro,.home-approach-intro>p,.home-approach-intro>p+p,.home-approach-principles{grid-column:1}.home-approach-intro>p{max-width:none}}
@media(max-width:700px){.home-approach-principles{gap:var(--space-7)}}
.home-service-card,.home-testimonial{min-width:0;margin:0;padding:var(--home-content-card-padding);border:1px solid color-mix(in oklch,var(--ink) 5%,transparent);border-radius:var(--radius-home-content-card);background:var(--card-surface)}
.service-illustration{display:block;width:100%;height:auto;aspect-ratio:330 / 230;margin:0 0 var(--space-6);color:color-mix(in oklch,var(--ink) 48%,var(--card-surface))}
.service-face{fill:color-mix(in oklch,var(--ink) 7%,var(--card-surface))}.service-side{fill:color-mix(in oklch,var(--ink) 12%,var(--card-surface))}.service-top{fill:var(--card-surface)}.service-accent{fill:var(--ink);stroke:var(--ink)}.service-dashed{stroke-dasharray:3 4}
.home-service-card h3{margin:0 0 var(--space-3);font-size:var(--font-size-section-heading);font-weight:var(--font-weight-heading);line-height:var(--line-height-heading);letter-spacing:var(--letter-spacing-heading);color:var(--ink)}
.home-service-card p{max-width:34ch;margin:0;font-size:var(--font-size-body);font-weight:var(--font-weight-body);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body);color:var(--body-ink)}
.home-service-card p+p{margin-top:var(--space-3)}
.home-about:has(.home-about-introduction[hidden]) .home-about-lists{margin-top:0}
.home-testimonials-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));--testimonial-gap:var(--space-6);column-gap:0;row-gap:var(--testimonial-gap);min-width:0;width:auto;max-width:100%}
.home-testimonials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--space-6);min-width:0}
.home-testimonials>h2{grid-column:1/-1}
.home-testimonials-grid{grid-column:2 / span 2}
.home-testimonial{grid-column:span 5;display:flex;flex-direction:column;min-height:0}
.home-testimonial:nth-child(odd){margin-right:calc(var(--testimonial-gap) / 2)}
.home-testimonial:nth-child(even){margin-left:calc(var(--testimonial-gap) / 2)}
.home-testimonial:nth-child(4n+1),.home-testimonial:nth-child(4n){grid-column:span 7}
.home-testimonial blockquote{margin:0 0 var(--space-3)}
.home-testimonial blockquote p{margin:0;font-size:var(--font-size-body);font-weight:var(--font-weight-body);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body);color:var(--body-ink);text-wrap:pretty}
.home-testimonial figcaption{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--font-size-body);font-weight:var(--font-weight-body);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body)}
.testimonial-author{color:var(--eyebrow-ink)}.testimonial-role{font-size:var(--font-size-body);color:var(--eyebrow-ink)}
.home-testimonial.is-featured{background:var(--ink);border-color:transparent}.home-testimonial.is-featured blockquote p{color:color-mix(in oklch,var(--card-surface) 82%,var(--ink))}.home-testimonial.is-featured .testimonial-author{color:color-mix(in oklch,var(--card-surface) 68%,var(--ink))}.home-testimonial.is-featured .testimonial-role{color:color-mix(in oklch,var(--card-surface) 56%,var(--ink))}
@media(max-width:900px){.home-services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-testimonials{grid-template-columns:1fr}.home-testimonials>h2,.home-testimonials-grid{grid-column:1}.home-testimonial,.home-testimonial:nth-child(n){grid-column:span 6}}
@media(max-width:600px){.home-content-section{margin-top:var(--space-page-rhythm-md)}.home-services-grid,.home-testimonials-grid{grid-template-columns:1fr}.home-testimonial,.home-testimonial:nth-child(n){grid-column:1;min-height:0}.service-illustration{max-height:200px}.home-service-card{padding:var(--space-6)}}

/* Section components keep their content and DOM when presentation changes. */
.home-services[data-services-layout="carousel"] .home-services-grid{width:var(--app-canvas-width);max-width:none;margin-inline:calc((100% - var(--app-canvas-width))/2);padding-inline:var(--services-carousel-inset,var(--content-gutter));scroll-padding-inline:var(--services-carousel-inset,var(--content-gutter));grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:clamp(260px,28vw,400px);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;align-items:stretch;padding-bottom:var(--space-3)}
.home-services[data-services-layout="carousel"] .home-service-card{scroll-snap-align:start}
.home-services[data-services-layout="carousel"] .home-services-grid::-webkit-scrollbar{display:none}
.card-rail-controls{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-6)}
.home-services[data-services-layout="grid"] .card-rail-controls{display:none}
.card-rail-controls button{width:40px;height:40px;padding:0;border:1px solid color-mix(in oklch,var(--ink) 8%,transparent);border-radius:50%;background:var(--card-surface);color:var(--body-ink);font-size:20px}
.card-rail-controls button:hover{color:var(--ink)}.card-rail-controls button:disabled{opacity:.3;cursor:default}
[data-card-rail-viewport]:focus-visible{outline:2px solid var(--body-ink);outline-offset:4px}
.home-testimonials[data-card-background="false"] .home-testimonial{padding:0;min-height:0;background:transparent;border:0;border-radius:0}
.home-testimonials[data-card-background="false"] .home-testimonials-grid{--testimonial-gap:var(--space-page-rhythm-md)}
.home-testimonials[data-card-background="false"] .home-testimonial blockquote p{color:var(--body-ink)}
.home-testimonials[data-card-background="false"] :is(.testimonial-author,.testimonial-role){color:var(--eyebrow-ink)}

.home-services[data-services-carousel-alignment="content"]{--services-carousel-inset:max(var(--content-gutter),calc((var(--app-canvas-width) - var(--content-rail-width,var(--content-width)))/2))}

@media(max-width:600px){.home-testimonials[data-card-background="false"] .home-testimonials-grid{--testimonial-gap:var(--space-page-rhythm-sm)}.home-testimonial:nth-child(n){margin-inline:0}}

/* project-media-focus.css */
.detail-layout{row-gap:0}
.detail-media-actions button[hidden]{display:none}
.detail-layout>.detail-media-column{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:stretch;gap:24px;min-width:0;align-self:start;position:relative;z-index:1}
.detail[data-card-orientation="landscape"] .detail-media-column{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content;align-content:start;align-self:start;height:max-content;row-gap:24px}
.detail-media-column>.visual{width:100%;margin:0}
.detail[data-card-orientation="portrait"] .detail-media-column>.visual{margin-inline:auto}
.detail-layout>.description{grid-column:1;grid-row:1 / span 2}
.detail-media-actions{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;align-self:center}
.detail-media-actions button,.project-media-focus-close{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:10px 16px;border:1px solid color-mix(in oklch,var(--ink) 8%,transparent);border-radius:999px;background:color-mix(in oklch,var(--page) 78%,transparent);color:var(--body-ink);font:inherit;font-size:var(--font-size-small);line-height:1;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);cursor:pointer;transition:background 180ms ease,color 180ms ease}
.detail-media-actions button:hover,.project-media-focus-close:hover{background:color-mix(in oklch,var(--ink) 8%,var(--page));color:var(--ink)}
.detail-media-actions button:focus-visible,.project-media-focus-close:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.detail-media-actions button svg,.project-media-focus-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.detail-media-actions [data-media-focus=fullscreen]{width:40px;padding:10px}
.detail.heading-beside-image>.detail-layout>.detail-media-column{grid-column:2;grid-row:1 / span 6}
.project-media-focus{position:fixed;inset:0;z-index:120;isolation:isolate}
.project-media-focus-image,.project-media-focus-prototype{position:absolute;object-fit:contain;max-width:none;max-height:none;margin:0;border:0}
.project-media-focus-image{will-change:transform}
.project-media-focus-close{position:absolute;right:24px;top:24px;width:40px;padding:10px;z-index:2}
@media(max-width:750px){.detail-layout>.detail-media-column{grid-column:1;grid-row:1}.detail-layout>.description{grid-column:1;grid-row:2}.detail.heading-beside-image>.detail-layout>.detail-media-column{grid-column:1;grid-row:4}.detail.heading-beside-image>.detail-layout>.description{grid-row:6}.project-media-focus-close{right:16px;top:16px}}

body:has(.project-media-focus) .site-tooltip{z-index:121}

/* project-menu-preview.css */
.project-menu-preview{position:fixed;z-index:61;pointer-events:none;opacity:0;transform:scale(.92);transform-origin:center;transition:opacity 180ms cubic-bezier(.4,0,.2,1),transform 260ms cubic-bezier(.22,1,.36,1),top 240ms cubic-bezier(.22,1,.36,1),left 240ms cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
.project-menu-preview.is-visible{opacity:1;transform:scale(1)}
.project-menu-preview.is-visible:not(.no-motion){animation:project-preview-arrive 340ms cubic-bezier(.22,1,.36,1) both}
@keyframes project-preview-arrive{0%{opacity:0;transform:scale(.94)}64%{opacity:1;transform:scale(1.025)}83%{opacity:1;transform:scale(.99)}100%{opacity:1;transform:scale(1)}}
.project-menu-preview-image{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 5px 20px #00000010}
.project-menu-preview.is-positioning,.project-menu-preview.no-motion{transition:none}
@media(prefers-reduced-motion:reduce){.project-menu-preview{transition:none;animation:none!important}}
:root[data-animation="off"] .project-menu-preview{transition:none!important;animation:none!important}

/* hero-carousel.css */
/* Only the optional lower hero strip changes; the introduction keeps its layout. */
.hero-carousel-stage[hidden]{display:none}
.hero-carousel-stage{position:relative;height:clamp(220px,32svh,340px);margin-bottom:clamp(80px,12vh,140px);touch-action:pan-y}
.hero-carousel-controls{position:absolute;inset:auto 0 -48px;display:flex;align-items:center;justify-content:center;gap:14px;color:var(--muted);font-size:12px;z-index:2}
.hero-carousel-controls span{margin-inline:6px}
.hero-carousel-controls button{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--chrome);color:var(--ink);font-size:17px}
.home-carousel-active .card-placement{position:relative;transform-origin:0 0;touch-action:pan-y}
.home-carousel-active .card-slot{position:relative}
body:has(.home-carousel-active){overflow-x:clip}
@media(max-width:600px){.hero-carousel-stage{height:clamp(220px,34svh,300px);margin-bottom:80px}.hero-carousel-controls{font-size:11px;gap:8px}}

/* portfolio-assistant.css */
#askToggle{width:40px;height:40px;display:grid;place-items:center;padding:0;color:var(--muted);border-radius:var(--radius-header-control);background:linear-gradient(145deg,rgba(var(--nav-glass-rgb),calc(var(--nav-glass-alpha) + .14)),rgba(var(--nav-glass-rgb),var(--nav-glass-alpha)));backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);box-shadow:inset 0 1px 0 var(--nav-highlight),0 6px 22px var(--nav-shadow);border:1px solid var(--nav-rim)}
#askToggle:hover,#askToggle[aria-pressed=true]{color:var(--ink)}#askToggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#askPage[hidden],#main[hidden]{display:none}.assistant-route .site-footer{display:none}
.assistant-page{--assistant-scroll-clearance:calc(160px + var(--composer-keyboard-inset,0px));max-width:none;width:100%;min-height:calc(100svh - var(--header-height));padding:var(--space-page-rhythm-md) clamp(24px,6vw,96px) calc(var(--assistant-scroll-clearance) + 48px + env(safe-area-inset-bottom,0px))}
/* Card auras can spill out of their cards, but never enlarge the conversation's
   scroll extent. Otherwise their scroll-following springs fight bottom clamping. */
#askPage.assistant-page{overflow:clip;contain:paint}
.assistant-thread{width:min(100%,900px);margin:0 auto}.assistant-welcome{width:100%;max-width:none;margin:0 0 48px;text-align:left}.assistant-eyebrow{display:block;color:var(--eyebrow-ink);font-size:var(--font-size-caption);font-weight:var(--eyebrow-weight);letter-spacing:var(--eyebrow-tracking);text-transform:uppercase}.assistant-welcome h1{max-width:var(--measure-heading);margin:0 0 var(--space-hero-heading-content);font-size:var(--font-size-home-heading);font-weight:var(--font-weight-heading);line-height:var(--line-height-heading);letter-spacing:var(--letter-spacing-heading);text-wrap:balance}.assistant-welcome p{margin:0;max-width:var(--measure-body);color:var(--body-ink);font-size:var(--font-size-body);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body)}
.ask-messages{display:flex;flex-direction:column;gap:36px;width:100%;min-height:20vh}.ask-messages>*{scroll-margin-bottom:var(--assistant-scroll-clearance)}.ask-message,.ask-response{margin:0;font-size:var(--font-size-body);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body)}.ask-user{align-self:flex-end;max-width:min(80%,580px);padding:15px 20px;border-radius:22px;background:var(--nav-active);color:var(--ink)}.ask-response{align-self:flex-start;width:100%;color:var(--body-ink)}.ask-response>p{max-width:690px;margin:0 0 22px}.ask-status{align-self:flex-start;color:var(--eyebrow-ink);font-size:var(--font-size-small)}.ask-sources{margin-top:12px;color:var(--muted);font-size:var(--font-size-caption)}.ask-sources a{text-decoration:underline;text-underline-offset:3px}
.ask-response-lead{display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:750px;width:100%}.ask-response-lead p{width:100%;margin:0 0 22px}.ask-speech-button{flex:0 0 auto;display:flex;align-items:center;gap:7px;min-height:24px;margin:0;padding:0;border:0;background:transparent;color:var(--muted);font-size:var(--font-size-caption);white-space:nowrap;transition:opacity 180ms cubic-bezier(.22,1,.36,1),background-color .18s,color .18s}.ask-speech-button:is(:hover,:focus-visible),.ask-speech-button[data-speech-state=playing],.ask-speech-button[data-speech-state=blocked],.ask-speech-button[data-speech-state=error]{background:transparent;color:var(--ink)}.ask-speech-button[data-speech-state=loading]{opacity:.7}.ask-speech-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ask-speech-hint{align-self:center;white-space:nowrap;color:var(--muted);font-size:var(--font-size-caption)}
.ask-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ask-cards .project-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(80px,30%);align-items:center;gap:20px;width:100%;min-height:138px;height:auto;padding:20px;border-radius:var(--radius-card-compact,24px);background:var(--surface-gradient);box-shadow:none;text-decoration:none;isolation:isolate}.ask-cards .project-card .card-lab-mark{display:none}.ask-cards .project-card .card-copy,.ask-cards .project-card .visual{z-index:1}.ask-cards .project-card .card-copy{position:relative;min-width:0;visibility:visible;opacity:1}.ask-cards .project-card h2{max-width:none;font-size:clamp(15px,calc(var(--font-size-card-heading) * var(--card-title-scale) * .68),19px);line-height:1.25;letter-spacing:var(--letter-spacing-card)}.ask-cards .project-card .project-summary{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:8px 0 0;font-size:var(--font-size-caption);line-height:1.45}.ask-cards .project-card .visual{grid-column:2;grid-row:1;width:100%!important;height:94px!important;margin:0!important;border-radius:var(--image-rounding,8px);overflow:hidden;background:transparent}.ask-cards .project-card .visual img{width:100%;height:100%;object-fit:contain}.ask-cards .project-card .visual video{display:none}
@keyframes ask-card-arrive{0%{opacity:0;transform:translate3d(0,14px,0) scale(.975)}68%{opacity:1;transform:translate3d(0,-2px,0) scale(1.008)}100%{opacity:1;transform:translate3d(0,0,0) scale(1)}}
.ask-cards .project-card.ask-card-enter{animation:ask-card-arrive 460ms cubic-bezier(.2,1,.3,1) both;animation-delay:calc(var(--ask-card-index,0)*70ms);will-change:transform,opacity}
.ask-response-lead p{white-space:pre-wrap}
.ask-suggestions{display:flex;flex-wrap:wrap;gap:9px;margin-top:-10px}.ask-suggestions button{border:1px solid color-mix(in oklab,var(--body-ink) 18%,transparent);border-radius:999px;background:color-mix(in oklab,var(--card-surface) 75%,transparent);color:var(--body-ink);padding:9px 14px;font-size:var(--font-size-caption);line-height:1.35;text-align:left;transition:background-color .2s ease,border-color .2s ease}.ask-suggestions button:hover,.ask-suggestions button:focus-visible{background:var(--nav-active);border-color:color-mix(in oklab,var(--body-ink) 35%,transparent)}
@keyframes suggestion-chip-appear{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.ask-suggestions button.suggestion-chip{animation:suggestion-chip-appear 300ms cubic-bezier(.2,1,.3,1) both;animation-delay:calc(var(--suggestion-index,0)*65ms)}
#dock .composer-suggestions{position:absolute;z-index:4;left:50%;bottom:calc(100% + 16px);width:max-content;max-width:min(var(--composer-max-width),calc(100vw - 28px));justify-content:center;gap:8px;margin:0;transform:translateX(-50%);pointer-events:auto}
#dock .composer-suggestions[hidden]{display:none}
#dock .composer-suggestions button{flex:0 1 auto;max-width:100%;background:color-mix(in oklab,var(--card-surface) 82%,transparent);backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15)}
/* The dock's existing outline widens into the composer. Its aura lives outside
   the clipped glass, so the light remains atmospheric rather than a new card. */
#dock.is-composer{z-index:60;--assistant-glow-a:oklch(.78 .105 235);--assistant-glow-b:oklch(.82 .09 315)}
:root[data-theme="dark"] #dock.is-composer{--assistant-glow-a:oklch(.58 .06 235);--assistant-glow-b:oklch(.57 .048 315)}
/* The viewport wrapper has a fixed extent. Moving light cannot change document overflow. */
#dock .composer-aura-viewport{display:none;position:absolute;left:calc(50% - var(--dock-center-offset,0px));bottom:calc(-1 * var(--dock-bottom));width:100vw;height:100dvh;transform:translateX(-50%);overflow:clip;contain:paint;z-index:-1;pointer-events:none}
#dock.is-composer .composer-aura-viewport{display:block}
#dock.composer-glow-hidden .composer-aura-viewport{display:none}
#dock .composer-aura-light{position:absolute;left:calc(50% + var(--dock-center-offset,0px));bottom:calc(var(--dock-bottom) - 58px);width:calc(3 * (var(--dock-painted-width,var(--nav-main-width)) + 300px));height:calc(var(--nav-height) + 142px);transform:translateX(-50%)}
#dock.is-composer .composer-aura-light::before,#dock.is-composer .composer-aura-light::after{content:"";position:absolute;z-index:-1;pointer-events:none;inset:0;border-radius:48% 52% 46% 54% / 55% 44% 56% 45%;filter:blur(30px);opacity:.19;will-change:transform,border-radius,opacity}
#dock.is-composer .composer-aura-light::before{background:radial-gradient(ellipse 58% 72% at 38% 49%,color-mix(in oklab,var(--assistant-glow-a) 72%,transparent),transparent 94%);animation:assistant-presence-a 11s ease-in-out infinite alternate}
#dock.is-composer .composer-aura-light::after{background:radial-gradient(ellipse 57% 73% at 62% 51%,color-mix(in oklab,var(--assistant-glow-b) 68%,transparent),transparent 94%);animation:assistant-presence-b 13s ease-in-out infinite alternate}
#dock.is-composer.assistant-working .composer-aura-light::before{opacity:.26;animation-duration:3.5s}#dock.is-composer.assistant-working .composer-aura-light::after{opacity:.25;animation-duration:4.1s}
@keyframes assistant-presence-a{from{transform:translate3d(-6%,3%,0) scale(.94,1);border-radius:48% 52% 46% 54% / 55% 44% 56% 45%}to{transform:translate3d(8%,-3%,0) scale(1.09,.92);border-radius:62% 38% 56% 44% / 42% 58% 43% 57%}}
@keyframes assistant-presence-b{from{transform:translate3d(6%,-3%,0) scale(.96,1.04);border-radius:54% 46% 60% 40% / 42% 57% 43% 58%}to{transform:translate3d(-8%,4%,0) scale(1.07,.91);border-radius:40% 60% 47% 53% / 59% 41% 57% 43%}}
#dock .dock-content>nav>a{transition:opacity .18s ease,background-color var(--nav-hover-out-duration) ease-out}
#dock.is-composer .dock-content>nav>a{opacity:0;visibility:hidden;pointer-events:none}
#dock .assistant-composer{position:absolute;inset:0;display:flex;align-items:center;gap:4px;width:100%;padding:var(--nav-container-padding) calc(var(--nav-container-padding) + 7px);margin:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s ease,visibility .24s}
#dock.is-composer .assistant-composer{opacity:1;visibility:visible;pointer-events:auto;transition-delay:.1s}
#dock .assistant-composer button{flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center;border-radius:max(10px,calc(var(--nav-rounding) - 6px));padding:0;background:transparent;color:var(--nav-item-ink);transition:background-color .2s,color .2s}
#dock .assistant-composer button:hover,#dock .assistant-composer button:focus-visible{background:var(--nav-item-hover);color:var(--ink)}
#dock .assistant-composer button[aria-pressed=true]{color:var(--ink);background:var(--nav-active)}
#dock .assistant-composer button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#dock .assistant-composer input{flex:1 1 auto;min-width:0;width:100%;height:100%;padding:0 2px;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:var(--composer-font-size)}#dock .assistant-composer input::placeholder{color:var(--muted)}#dock .assistant-composer input:focus-visible{outline:0}#dock .assistant-composer button:disabled{opacity:.3;cursor:default}
@media(max-width:650px){.assistant-page{padding:24px 22px calc(var(--assistant-scroll-clearance) + 48px + env(safe-area-inset-bottom,0px))}.assistant-welcome{margin-bottom:45px}.ask-messages{gap:26px}.ask-cards{grid-template-columns:1fr}.ask-cards .project-card{min-height:112px;padding:15px}.ask-cards .project-card .visual{height:76px!important}#dock .assistant-composer{gap:2px;padding-inline:6px}#dock .assistant-composer button{flex-basis:34px;width:34px}#dock .composer-suggestions{max-width:calc(100vw - 20px);gap:6px}#dock .composer-suggestions button{padding:8px 11px;font-size:var(--composer-font-size)}}
@media(prefers-reduced-motion:reduce){#dock.is-composer .composer-aura-light::before,#dock.is-composer .composer-aura-light::after{animation:none;opacity:.16}#dock .assistant-composer{transition:none}.ask-suggestions button.suggestion-chip{animation:none;opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ask-cards .project-card.ask-card-enter{animation:none}}
:root[data-animation="off"] #dock.is-composer .composer-aura-light::before,:root[data-animation="off"] #dock.is-composer .composer-aura-light::after{animation:none;opacity:.16}
:root[data-animation="off"] .ask-suggestions button.suggestion-chip{animation:none;opacity:1;transform:none}

/* One transparent glass material for dock surfaces and suggested prompts. */
.glass-surface,.ask-suggestions button.glass-surface,#dock .composer-suggestions button.glass-surface{background:linear-gradient(145deg,rgba(var(--nav-glass-rgb),calc(var(--dock-glass-alpha) + .07)),rgba(var(--nav-glass-rgb),var(--dock-glass-alpha)));backdrop-filter:blur(var(--dock-glass-blur)) saturate(1.25) brightness(var(--dock-backdrop-brightness));-webkit-backdrop-filter:blur(var(--dock-glass-blur)) saturate(1.25) brightness(var(--dock-backdrop-brightness))}
.ask-suggestions button.glass-surface{border:1px solid var(--dock-outline);box-shadow:inset 0 1px 0 var(--nav-highlight);color:var(--composer-text-ink);font-size:var(--composer-font-size);font-weight:var(--font-weight-body);letter-spacing:var(--letter-spacing-body);line-height:var(--line-height-label)}
.ask-suggestions button.glass-surface:is(:hover,:focus-visible),#dock .composer-suggestions button.glass-surface:is(:hover,:focus-visible){background:linear-gradient(var(--nav-item-hover),var(--nav-item-hover)),linear-gradient(145deg,rgba(var(--nav-glass-rgb),calc(var(--dock-glass-alpha) + .07)),rgba(var(--nav-glass-rgb),var(--dock-glass-alpha)));color:var(--ink)}

#dock .project-menu button:has(.project-menu-client){display:flex;align-items:baseline;gap:24px}
.project-menu-client{flex:0 0 auto;color:inherit}
.project-menu-title{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* A tall field dips below the viewport, leaving a soft semicircular presence. */
#dock .composer-aura-light{height:clamp(400px,65vw,660px);bottom:calc(var(--dock-bottom) - clamp(250px,42vw,440px))}
#dock .project-menu button:has(.project-menu-client){justify-content:space-between}
.project-menu-client{text-align:right;margin-left:auto}
#dock .project-menu-group+.project-menu-group{margin-top:0}
#dock .project-menu-actions{position:relative;left:auto;top:auto;width:100%;height:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 12px 12px;margin-top:12px;background:transparent;transform:none;clip-path:none}
#dock .project-menu-actions>div{display:flex;gap:8px}
#dock .project-menu-actions button,#dock .project-menu-actions a{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;padding:8px;border-radius:50%;background:transparent;color:var(--composer-text-ink);border:1px solid var(--dock-outline);box-shadow:none}
#dock .project-menu-actions :is(button,a):is(:hover,:focus-visible){background:var(--nav-item-hover);color:var(--ink)}
#dock .project-menu-actions button:disabled{opacity:.4;cursor:default}
#dock .project-menu-actions svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:380px){#dock .project-menu-actions{padding-inline:8px;gap:8px}#dock .project-menu-actions>div{gap:4px}}

/* Suggestions start at the full dock's left edge, including contextual controls. */
#dock .composer-suggestions{left:calc(-1 * var(--dock-back-space,0px));transform:none;width:calc(var(--dock-painted-width,var(--nav-main-width)) + var(--dock-back-space,0px));max-width:calc(100vw - 32px);justify-content:flex-start}
#dock .assistant-back{position:absolute;left:calc(-1 * (var(--nav-back-width) + 10px));bottom:0;width:var(--nav-back-width);height:var(--nav-height);display:grid;place-items:center;padding:6px 12px;border:1px solid var(--dock-outline);border-radius:var(--nav-rounding);color:var(--composer-text-ink);font-size:var(--nav-item-font-size);line-height:var(--line-height-label);white-space:nowrap;pointer-events:auto;z-index:5}
#dock .assistant-back[hidden]{display:none}
#dock .assistant-back:is(:hover,:focus-visible){color:var(--ink);background:var(--nav-item-hover)}
#dock .project-menu-actions{justify-content:center;gap:14px;padding-top:20px;padding-bottom:24px}
#dock .project-menu-actions>div{display:contents}


@media(max-width:380px){#dock .project-menu-actions{gap:8px}}

@media(max-width:650px){#dock .composer-aura-light{width:calc(1.5 * (var(--dock-painted-width,var(--nav-main-width)) + 220px));height:360px;bottom:calc(var(--dock-bottom) - 230px)}}

/* Back uses the dock’s morphing glass and rim; the icon has no second skin. */
#dock .assistant-back{background:transparent;border:0;border-radius:var(--nav-rounding)}

.ask-speech-button:focus-visible{outline:1px solid var(--muted);outline-offset:4px}

/* Reserve the control slot so revealing Listen never moves the response. */
@media(hover:hover) and (pointer:fine){.ask-speech-button[data-speech-state="idle"]{opacity:0;pointer-events:none;transition:opacity 180ms cubic-bezier(.22,1,.36,1),color 180ms ease}.ask-response-lead:is(:hover,:focus-within) .ask-speech-button[data-speech-state="idle"]{opacity:1;pointer-events:auto}}

/* Compact cards project the shared card entity into a readable vertical label stack. */
#askPage .ask-cards .project-card{border-radius:calc(var(--radius-card) * .25)}
#askPage .ask-cards .project-card>.card-copy{display:flex;flex-direction:column;align-items:stretch;gap:6px;position:relative;width:auto;inset:auto}
#askPage .ask-cards .project-card>.card-copy>.card-client{margin:0;font-size:var(--font-size-small);font-weight:var(--font-weight-body);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body);color:var(--eyebrow-ink)}
#askPage .ask-cards .project-card>.card-copy>h2{position:static;visibility:visible;opacity:1;margin:0;width:auto;font-size:var(--font-size-body);font-weight:var(--font-weight-heading);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body)}
#askPage .ask-cards .project-card>.card-copy>.project-summary{margin:0;font-size:var(--font-size-small);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body);color:var(--body-ink)}
#askPage .ask-cards .project-card>.visual{--image-padding-top:0px;--image-padding-right:0px;--image-padding-bottom:0px;--image-padding-left:0px;border-radius:0;background:transparent;overflow:visible}

#dock{bottom:calc(var(--dock-bottom) + var(--composer-keyboard-inset,0px))}
@media(max-width:750px) and (pointer:coarse){#dock .assistant-composer input{font-size:max(16px,var(--composer-font-size))}}

.corner-controls{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));z-index:44;display:flex;align-items:center;gap:8px}.corner-controls[hidden]{display:none!important}

/* glass-utility.css */
/* Shared transparent glass for utility icons and carousel actions. */
.glass-utility-button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:10px 16px;border-radius:var(--radius-header-control);border:1px solid var(--nav-rim);background:linear-gradient(145deg,rgba(var(--nav-glass-rgb),calc(var(--nav-glass-alpha) + .14)),rgba(var(--nav-glass-rgb),var(--nav-glass-alpha)));backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);box-shadow:inset 0 1px 0 var(--nav-highlight),0 6px 22px var(--nav-shadow);color:var(--muted);font:inherit;font-size:var(--font-size-small);line-height:1;cursor:pointer;user-select:none;transform:scale(1);transition:transform 160ms cubic-bezier(.22,1,.36,1),color 180ms ease}
.glass-utility-button:hover{color:var(--ink);transform:scale(.96)}
.glass-utility-button:active{transform:scale(.93)}
.glass-utility-button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.glass-utility-button[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.glass-utility-button{transition:none}.glass-utility-button:hover,.glass-utility-button:active{transform:none}}
:root[data-animation="off"] .glass-utility-button:hover,:root[data-animation="off"] .glass-utility-button:active{transform:none}

/* iconiq-chat-effects.css */
/* Adapted from Iconiq, MIT © Edwin Vakayil. */
.iconiq-send-wave{position:absolute;inset:0;z-index:10;overflow:hidden;pointer-events:none;border-radius:var(--nav-rounding)}
.iconiq-send-wash{position:absolute;inset:0 0 auto;height:150%;filter:blur(20px);background:linear-gradient(180deg,transparent,rgba(34,211,238,.07),rgba(59,130,246,.09),rgba(217,70,239,.1),rgba(244,63,94,.09),rgba(249,115,22,.08),transparent);will-change:transform}
.iconiq-thinking{display:flex;align-items:center;gap:.6em;color:var(--eyebrow-ink);width:max-content}
.iconiq-thinking svg{width:1lh;height:1lh;flex-shrink:0}
.iconiq-thinking-glyph{transform-box:view-box;transform-origin:center;animation:iconiq-thinking-morph 4s ease-in-out infinite}
.iconiq-thinking-twinkle{transform-box:fill-box;transform-origin:center;animation:iconiq-thinking-twinkle 4s ease-in-out infinite}
.iconiq-thinking-label{--ti-spread:16px;background-image:linear-gradient(90deg,transparent calc(50% - var(--ti-spread)),var(--ink),transparent calc(50% + var(--ti-spread))),linear-gradient(var(--eyebrow-ink),var(--eyebrow-ink));background-size:250% 100%,auto;background-repeat:no-repeat;background-clip:text;-webkit-background-clip:text;color:transparent;animation:iconiq-thinking-shimmer 2s linear infinite}
@keyframes iconiq-thinking-shimmer{from{background-position:100% center}to{background-position:0% center}}
@keyframes iconiq-thinking-morph{
 0%,100%{d:path('M 12 3 C 12.9 7.4 16.6 11.1 21 12 C 16.6 12.9 12.9 16.6 12 21 C 11.1 16.6 7.4 12.9 3 12 C 7.4 11.1 11.1 7.4 12 3 Z')}
 0%{transform:rotate(0deg) scale(1)}
 30%{d:path('M 12 4.2 C 16.8 3.4 20.6 7.2 19.8 12 C 20.6 16.4 16.4 20.6 12 19.8 C 7.8 20.6 3.4 16.8 4.2 12 C 3.4 7.6 7.2 3.4 12 4.2 Z');transform:rotate(108deg) scale(.9)}
 50%{d:path('M 12 5 C 15.87 5 19 8.13 19 12 C 19 15.87 15.87 19 12 19 C 8.13 19 5 15.87 5 12 C 5 8.13 8.13 5 12 5 Z');transform:rotate(180deg) scale(.78)}
 70%{d:path('M 12 3.6 C 16.4 4.6 18.6 8 19.2 12 C 18.6 16.2 16.2 19.4 12 20.4 C 8 19.4 5.2 16.4 4.8 12 C 5.4 7.8 7.6 4.4 12 3.6 Z');transform:rotate(252deg) scale(.9)}
 100%{transform:rotate(360deg) scale(1)}
}
@keyframes iconiq-thinking-twinkle{0%,100%{opacity:0;transform:rotate(0deg) scale(.2)}30%,70%{opacity:0;transform:rotate(45deg) scale(.5)}50%{opacity:1;transform:rotate(90deg) scale(1)}}
.iconiq-stream{white-space:pre-wrap}
.iconiq-stream-word{display:inline-grid;vertical-align:baseline;animation:iconiq-word-enter 500ms cubic-bezier(.25,.46,.45,.94) both}
.iconiq-stream-base,.iconiq-stream-tint{grid-column:1;grid-row:1}
.iconiq-stream-base{color:inherit;animation:iconiq-word-enter 450ms var(--stream-settle-delay,300ms) cubic-bezier(.4,0,.2,1) both}
.iconiq-stream-tint{background:linear-gradient(90deg,#0ea5e9,#2563eb,#6366f1);background-size:300% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:iconiq-word-settle 450ms var(--stream-settle-delay,300ms) cubic-bezier(.4,0,.2,1) both}
:root[data-theme=dark] .iconiq-stream-tint{background-image:linear-gradient(90deg,#38bdf8,#60a5fa,#a5b4fc)}
.iconiq-stream-cursor{display:inline-block;width:.55em;height:.55em;border-radius:50%;background:linear-gradient(135deg,#38bdf8,#6366f1);box-shadow:0 0 .7em rgba(56,189,248,.55);animation:iconiq-stream-cursor 1.2s ease-in-out infinite}
@keyframes iconiq-word-enter{from{opacity:0}to{opacity:1}}
@keyframes iconiq-word-settle{from{opacity:1}to{opacity:0}}
@keyframes iconiq-stream-cursor{0%,100%{opacity:.4}50%{opacity:1}}
.iconiq-thinking.no-motion *{animation:none!important}.iconiq-thinking.no-motion .iconiq-thinking-label{background:none;color:var(--eyebrow-ink)}.iconiq-thinking.no-motion .iconiq-thinking-twinkle{opacity:.5}
:root[data-animation=off] :is(.iconiq-thinking *,.iconiq-stream *){animation:none!important}
:root[data-animation=off] .iconiq-thinking-label{background:none;color:var(--eyebrow-ink)}
:root[data-animation=off] .iconiq-stream-base{opacity:1}:root[data-animation=off] .iconiq-stream-tint,:root[data-animation=off] .iconiq-stream-cursor{display:none}
@media(prefers-reduced-motion:reduce){.iconiq-thinking *,.iconiq-stream *{animation:none!important}.iconiq-thinking-label{background:none;color:var(--eyebrow-ink)}.iconiq-stream-base{opacity:1}.iconiq-stream-tint,.iconiq-stream-cursor{display:none}}

/* content-widths.css */
:root{--app-max-width:1920px;--content-width-sm:1200px;--content-width-md:1440px;--content-width-lg:1760px;--content-width:var(--content-width-md);--content-gutter:clamp(24px,4vw,64px);--app-canvas-width:min(100vw,var(--app-max-width));--content-shell-width:min(var(--app-max-width),calc(var(--content-width) + 2 * var(--content-gutter)))}
html{background:var(--page)}
body{width:100%;max-width:var(--app-max-width);margin-inline:auto}
:is(#main,.retained-home),body>header,body.wide-project-hero-page>header,.site-footer{width:100%;max-width:var(--content-shell-width);padding-inline:var(--content-gutter)}
:is(#main,.retained-home),.site-footer{margin-inline:auto}
:is(#main,.retained-home) .home-hero{padding-inline:0}
:is(#main,.retained-home)>.story,:is(#main,.retained-home)>.detail-footer{width:100%;max-width:100%}
:is(#main,.retained-home):not(.home-view-split) .gallery-grid{max-width:none}
/* Section breakouts share the app cap. App preserves gutters; edge reaches the canvas edges. */
:is(#main,.retained-home) :is([data-content-span="app"],.content-bleed){width:calc(var(--app-canvas-width) - 2 * var(--content-gutter));max-width:none;margin-inline:calc((100% - var(--app-canvas-width) + 2 * var(--content-gutter)) / 2)}
:is(#main,.retained-home) :is([data-content-span="edge"],.content-bleed-edge){width:var(--app-canvas-width);max-width:none;margin-inline:calc((100% - var(--app-canvas-width)) / 2)}
.hero-timeline{width:var(--app-canvas-width)}
.timeline-track ol{padding-inline:var(--content-gutter)}

:is(#main,.retained-home) .home-testimonials[data-content-span]{width:100%;max-width:100%;margin-inline:0}
.home-hero .hero-about{max-width:100%;min-width:0}
.home-hero .hero-about h1{max-width:none;text-wrap:wrap}
.home-canvas:not(.home-view-split) .hero-about h1{max-width:calc((100% * 2 - var(--space-6)) / 3)}
.home-canvas:not(.home-view-split) .hero-copy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--space-6);max-width:none}
.home-canvas:not(.home-view-split) .hero-copy>[data-hero-description]{grid-column:2;min-width:0;max-width:none}
.home-canvas:not(.home-view-split) .hero-copy>[data-hero-timeline]{grid-column:1 / -1}
@media(max-width:1000px){.home-canvas:not(.home-view-split) .hero-about h1{max-width:none}.home-canvas:not(.home-view-split) .hero-copy{grid-template-columns:1fr}.home-canvas:not(.home-view-split) .hero-copy>[data-hero-description]{grid-column:1}}
.home-product-text{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--space-6);row-gap:var(--space-page-rhythm-sm);margin-top:var(--space-6);width:100%;min-width:0;position:relative;isolation:isolate}
.home-product-text[hidden]{display:none}
.home-product-text-group{grid-column:2 / span 2;min-width:0}
.home-product-text h2{margin:0 0 var(--space-4);font-size:var(--font-size-caption);font-weight:var(--eyebrow-weight);line-height:var(--line-height-label);color:var(--eyebrow-ink);letter-spacing:var(--eyebrow-tracking);text-transform:uppercase}
.home-product-text ul{position:relative;isolation:isolate;list-style:none;margin:0;padding:0;display:grid;gap:var(--space-6)}
.home-product-text a{position:relative;display:block;color:var(--body-ink);transition:color 180ms ease}
.home-product-text a:hover{color:var(--ink)}
.home-product-text a>span{font-size:var(--font-size-body);font-weight:var(--font-weight-heading)}
.home-product-text a>p{margin:var(--space-1) 0 0;font-size:var(--font-size-small);line-height:var(--line-height-body);color:var(--eyebrow-ink)}
@media(max-width:600px){.home-product-text{grid-template-columns:1fr;row-gap:var(--space-page-rhythm-sm)}.home-product-text-group{grid-column:1}}

/* The text view shares the menu's magnetic hover field and thumbnail portal. */
 :is(.home-product-text,.home-about-list) ul::before{content:"";position:absolute;z-index:-1;left:-20px;right:-20px;top:-12px;height:calc(var(--project-menu-hover-height,36px) + 24px);border-radius:18px;background:var(--nav-item-hover);opacity:0;pointer-events:none;transform:translate3d(0,var(--project-menu-hover-y,0px),0);transition:transform 110ms cubic-bezier(.2,.8,.2,1),height 130ms cubic-bezier(.2,.8,.2,1),opacity 180ms ease}
:is(.home-product-text,.home-about-list) ul[data-cursor-tracking="true"]::before{opacity:1}
:is(.home-product-text a,.home-about-row)::before{content:"";position:absolute;inset:-12px -20px;border-radius:18px;pointer-events:auto}
:is(.home-product-text a,.home-about-row):focus-visible{border-radius:14px;background:var(--nav-item-hover)}
.home-product-text a:is(:hover,:focus-visible)>p,.home-about-row:is(:hover,:focus-visible) .home-about-years{color:var(--ink)}
.home-product-text a>p,.home-about-years{transition:color 180ms ease}
@media(prefers-reduced-motion:reduce){:is(.home-product-text,.home-about-list) ul::before,.home-product-text a,.home-product-text a>p,.home-about-years{transition:none}}
:root[data-animation="off"] :is(.home-product-text,.home-about-list) ul::before{transition:none}
.detail.text-only-detail .detail-layout{grid-template-columns:minmax(0,1fr)}
.detail.text-only-detail .detail-layout>.description{grid-column:1;grid-row:1 / span 1;max-width:76ch}
.detail.text-only-detail .description dd{max-width:72ch}
.ask-cards .text-only-card{grid-template-columns:minmax(0,1fr)}
.ask-cards .text-only-card .visual{display:none}
/* Generated hit areas and nested text use the same link cursor. */
:is(.home-product-text a,.home-about-row[href],.spatial-gallery-copy[href]),:is(.home-product-text a,.home-about-row[href],.spatial-gallery-copy[href]) *,:is(.home-product-text a,.home-about-row[href],.spatial-gallery-copy[href])::before{cursor:pointer;user-select:none;-webkit-user-select:none}

/* menu-controls.css */
/* Two persistent groups share the same icon switch and glass colour tokens. */
#dock .project-menu{--menu-inset:24px;--menu-section-gap:24px;padding:0}
#dock .project-menu-projects{padding:var(--menu-inset) calc(var(--menu-inset) / 2) 0}
#dock .project-menu-projects [data-project-menu-item]{padding-inline:calc(var(--menu-inset) / 2)}
#dock .project-menu-actions{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 16px;padding:var(--menu-section-gap) var(--menu-inset) var(--menu-inset);margin-top:0}
#dock .project-menu::before{left:calc(var(--menu-inset) / 2);right:calc(var(--menu-inset) / 2)}
#dock .project-menu-actions>div{display:flex;align-items:center;gap:10px}
#dock .project-menu-actions>div:last-child{margin-left:auto;justify-content:flex-end}
#dock .project-menu-actions :is(button,a){flex:0 0 36px;width:36px;height:36px;min-height:36px;border:0;border-radius:50%;padding:9px}
#dock .project-menu-actions .icon-switch[aria-checked="true"]{background:var(--nav-active);color:var(--ink)}
#dock .project-menu-actions .icon-switch[aria-checked="false"]{background:transparent;color:var(--composer-text-ink)}
#dock .project-menu-actions .icon-switch:is(:hover,:focus-visible){background:var(--nav-item-hover);color:var(--ink)}
.icon-switch{display:inline-grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--eyebrow-ink);cursor:pointer}.project-menu-actions [hidden]{display:none!important}
.icon-switch svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.guide-voice-toggle{display:block;margin:0 0 16px;padding:8px 12px;border-radius:12px;background:var(--nav-item-hover);color:var(--body-ink);font-size:var(--font-size-small)}
.guide-voice-toggle[aria-checked="true"]{background:var(--nav-active);color:var(--ink)}
/* One quiet status portal, never part of page flow or a focus destination. */
#interactionFeedback{position:fixed;inset:auto 24px 24px auto;transform:none;z-index:150;max-width:min(320px,calc(100vw - 32px));padding:12px 16px;border-radius:16px;border:1px solid color-mix(in oklch,var(--ink) 7%,transparent);background:color-mix(in oklch,var(--page) 75%,transparent);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 8px 32px #0000000a;font-size:var(--font-size-small);line-height:var(--line-height-label);color:var(--body-ink);pointer-events:none}
#interactionFeedback[hidden]{display:none}
@media(max-width:600px){#interactionFeedback{right:16px;bottom:calc(var(--nav-height) + var(--dock-bottom,20px) + 16px)}}

/* composer-controls.css */
#dock .composer-draft{position:relative;display:block;flex:1 1 auto;min-width:0;height:100%}
#dock .composer-draft input{width:100%;height:100%}
#dock .assistant-action{position:relative}
#dock .assistant-action svg{position:absolute;transition:opacity 140ms ease,transform 180ms cubic-bezier(.22,1,.36,1)}
#dock .assistant-action[data-mode="voice"] .composer-send-icon,#dock .assistant-action[data-mode="send"] .composer-voice-icon{opacity:0;transform:scale(.65);pointer-events:none}
#dock .assistant-action[data-mode="voice"] .composer-voice-icon,#dock .assistant-action[data-mode="send"] .composer-send-icon{opacity:1;transform:scale(1)}
.dictation-waveform{position:absolute;inset:0 2px;display:flex;align-items:center;justify-content:space-between;gap:2px;pointer-events:none;overflow:hidden}
.dictation-waveform i{flex:0 0 2px;min-width:2px;border-radius:999px;height:var(--voice-bar-height,2px);background:currentColor;opacity:var(--voice-bar-opacity,.35);transition:height 70ms linear,opacity 70ms linear}
.dictation-waveform[hidden]{display:none}
#dock .assistant-composer.is-dictating input{opacity:0}
#dock .assistant-composer.is-dictating .dictation-waveform{color:var(--ink)}
#dock .assistant-composer.is-dictating .assistant-mic{color:var(--ink);background:var(--nav-active)}
@media(prefers-reduced-motion:reduce){.dictation-waveform i,#dock .assistant-action svg{transition:none}}
:root[data-animation="off"] .dictation-waveform i,:root[data-animation="off"] #dock .assistant-action svg{transition:none}

#dock .assistant-action .composer-stop-icon{opacity:0;transform:scale(.65);pointer-events:none}
#dock .assistant-action[data-mode="stop"] .composer-stop-icon{opacity:1;transform:scale(1)}
#dock .assistant-action[data-mode="stop"] :is(.composer-voice-icon,.composer-send-icon){opacity:0;transform:scale(.65);pointer-events:none}

/* The two identical histories meet without a reset, even at zero input level. */
.dictation-waveform{display:block}
.dictation-wave-track{display:flex;align-items:center;width:200%;height:100%;animation:dictation-wave-scroll 5s linear infinite}
.dictation-wave-track i{display:grid;justify-items:center;flex:1 1 0;min-width:0;background:none;border-radius:0;height:var(--voice-bar-height,2px)}
.dictation-wave-track i::before{content:'';display:block;width:2px;height:100%;border-radius:999px;background:currentColor}
@keyframes dictation-wave-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.dictation-wave-track{animation:none}}
:root[data-animation="off"] .dictation-wave-track{animation:none}
#dock .voice-composer{position:absolute;inset:0;display:flex;align-items:center;gap:4px;padding:6px 7px;pointer-events:auto}
#dock .voice-composer[hidden]{display:none}
#dock.voice-mode .assistant-composer{opacity:0;visibility:hidden;pointer-events:none}
#dock .voice-composer button{flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;padding:0;background:transparent;color:var(--composer-text-ink);cursor:pointer;transition:background 160ms ease,color 160ms ease}
#dock .voice-composer button:is(:hover,:focus-visible){background:var(--nav-item-hover);color:var(--ink)}
#dock .voice-composer button[aria-pressed="true"]{color:var(--ink)}
#dock .voice-composer button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.voice-wave-field{flex:1;min-width:0;height:100%;position:relative;pointer-events:none}
.voice-wave-field canvas{display:block;width:100%;height:100%}
.voice-composer:not(.wave-ready) .voice-wave-field::before{content:"";position:absolute;inset:25% 8%;border-radius:50%;background:linear-gradient(90deg,#577bfb,#b060eb,#ee67af,#54c8cd);filter:blur(8px);opacity:.5;animation:voice-wave-fallback 2s ease-in-out infinite alternate}
@keyframes voice-wave-fallback{to{transform:scaleY(.4);opacity:.3}}
@media(prefers-reduced-motion:reduce){.voice-composer .voice-wave-field::before{animation:none!important}#dock .voice-composer button{transition:none}}
:root[data-animation="off"] .voice-composer .voice-wave-field::before{animation:none}

#dock .voice-composer button[aria-pressed="false"]{background:oklch(.65 .16 25 / .26);color:color-mix(in oklch,var(--ink) 78%,var(--status-error-accent))}
#dock .voice-composer button[aria-pressed="false"]:is(:hover,:focus-visible){background:oklch(.65 .16 25 / .36);color:var(--ink)}

/* composer-context.css */
:root[data-contextual-buttons="composer"] .spatial-gallery-primary-action{display:none}
:root[data-contextual-buttons="composer"] .detail-media-actions [data-media-focus="fullscreen"]{display:none}
:root[data-contextual-buttons="inline"] .detail-media-actions [data-media-focus="fullscreen"]{display:none}
#dock .composer-context-actions{position:absolute;z-index:3;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;width:max-content;max-width:calc(100vw - 32px);padding:5px;pointer-events:auto;perspective:600px}
#dock .composer-context-slot{display:flex;flex:0 0 auto;height:38px;transform-style:preserve-3d}
#dock .composer-context-presence{display:flex;transform-origin:center;transform-style:preserve-3d}
#dock .composer-context-slot[data-exiting="true"]{pointer-events:none}
#dock .composer-context-actions[hidden]{display:none}
#dock .composer-context-actions :is(button,a){display:flex;align-items:center;justify-content:center;height:38px;min-width:38px;max-width:100%;padding:8px 12px;border:0;border-radius:var(--radius-header-control);background:transparent;color:var(--composer-text-ink,var(--muted));font:inherit;font-size:var(--composer-font-size);line-height:var(--line-height-label);white-space:nowrap;cursor:pointer;transition:background var(--nav-hover-out-duration) ease-out,color 160ms ease,transform 160ms cubic-bezier(.22,1,.36,1)}
#dock .composer-context-actions :is(button,a):is(:hover,:focus-visible):not(:disabled){background:var(--nav-item-hover);color:var(--ink);transform:scale(.96);transition-duration:var(--nav-hover-in-duration)}
#dock .composer-context-actions :is(button,a):disabled{opacity:.35;cursor:default}
#dock .composer-context-actions :is(button,a):focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
#dock .composer-context-actions .composer-context-icon{width:38px;padding:8px;flex:0 0 38px}
#dock .composer-context-actions svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#dock .composer-suggestions button.suggestion-chip{animation:none}
:root[data-contextual-buttons="composer"] #dock .composer-suggestions{left:0;width:var(--dock-painted-width,var(--composer-max-width));max-width:calc(100vw - 32px)}
@media(prefers-reduced-motion:reduce){#dock .composer-context-actions :is(button,a){transition:none}#dock .composer-context-actions :is(button,a):hover{transform:none}}
:root[data-animation="off"] #dock .composer-context-actions :is(button,a){transition:none;transform:none}

@media(max-width:600px){
 #dock .composer-context-actions{gap:2px}
 #dock .composer-context-slot[data-group-end="true"]{margin-right:8px!important}
 #dock .composer-context-actions :is(button,a){padding-inline:8px;font-size:min(14px,var(--composer-font-size))}
 #dock .composer-context-actions .composer-context-icon{width:38px;min-width:38px;flex-basis:38px;padding:6px}
 #dock .composer-context-actions [data-compact-label]{font-size:0}
 #dock .composer-context-actions [data-compact-label]::after{content:attr(data-compact-label);font-size:min(14px,var(--composer-font-size))}
}

/* status-stack.css */
#composerStatusStack{position:fixed;z-index:180;left:50%;bottom:calc(var(--dock-bottom,32px) + var(--nav-height) + 12px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:calc(100vw - 32px);pointer-events:none}
#composerStatusStack:has(#interactionHud[hidden]):has(#interactionFeedback[hidden]){display:none}
#composerStatusStack #interactionHud{position:static;inset:auto;transform:none;display:flex;flex-direction:column;align-items:center;gap:8px;width:auto;max-width:100%;pointer-events:auto}
#composerStatusStack #interactionHud[hidden]{display:none}
#composerStatusStack #interactionFeedback{position:static;inset:auto;transform:none;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:100%;padding:0;border:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
#composerStatusStack #interactionFeedback[hidden]{display:none}
#composerStatusStack .site-status-message,#composerStatusStack .input-status{padding:9px 14px;border-radius:var(--nav-rounding);border:1px solid var(--dock-outline);box-shadow:inset 0 1px 0 var(--nav-highlight),0 4px 24px var(--nav-shadow);color:var(--composer-text-ink);font-size:var(--composer-font-size);font-weight:var(--font-weight-body);letter-spacing:var(--letter-spacing-body);line-height:var(--line-height-label);text-align:center;max-width:100%}
#composerStatusStack .input-status button{color:inherit}
#composerStatusStack .input-status>[data-input-status]{max-width:min(360px,calc(100vw - 132px))}
#askPage.assistant-page{--chat-top:clamp(48px,8svh,96px);padding-top:var(--chat-top)}
#askPage.assistant-empty .assistant-thread{min-height:max(220px,calc(100svh - var(--chat-top) - var(--assistant-scroll-clearance) - 48px - env(safe-area-inset-bottom,0px)));display:flex;flex-direction:column;justify-content:center}
#askPage.assistant-empty .ask-messages{min-height:0}
#askPage.assistant-empty .assistant-welcome{margin-bottom:var(--space-hero-heading-content)}
#askPage[data-voice-mode="false"] .ask-speech-button{display:none}

#composerStatusStack #interactionHud:not(:has(.input-status:not([hidden]))){display:none}
/* Semantic feedback overlays the existing glass, retaining its blur and text. */
:root{--status-error-accent:oklch(.65 .16 25);--status-success-accent:oklch(.69 .12 155);--status-error-tint:oklch(.65 .16 25 / .32);--status-success-tint:oklch(.69 .14 155 / .29)}
#composerStatusStack :is([data-status-tone="error"],.input-status[data-phase="error"]){--status-tint:var(--status-error-tint);--status-accent:var(--status-error-accent)}
#composerStatusStack :is([data-status-tone="success"],.input-status[data-phase="acting"]){--status-tint:var(--status-success-tint);--status-accent:var(--status-success-accent)}
#composerStatusStack :is([data-status-tone="error"],[data-status-tone="success"],.input-status[data-phase="error"],.input-status[data-phase="acting"]){background:linear-gradient(var(--status-tint),var(--status-tint)),linear-gradient(145deg,rgba(var(--nav-glass-rgb),calc(var(--dock-glass-alpha) + .07)),rgba(var(--nav-glass-rgb),var(--dock-glass-alpha)));border-color:color-mix(in oklch,var(--status-accent) 24%,var(--dock-outline))}

/* contextual-popovers.css */
.context-marker{display:inline;margin:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;line-height:inherit;letter-spacing:inherit;text-align:inherit;white-space:normal;cursor:pointer}
.context-marker-text{display:inline;padding:0 .12em;border-radius:.24em;background:oklch(.76 .025 295 / .10);box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:background-color 180ms ease}
.context-marker:is(:hover,:focus-visible)>.context-marker-text{background:oklch(.76 .035 295 / .18)}
.context-marker:focus-visible{outline:1px solid var(--muted);outline-offset:3px;border-radius:.24em}
.context-marker-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.contextual-popover{position:fixed;z-index:165;max-width:calc(100vw - 32px);overflow:auto;overscroll-behavior:contain;padding:24px;border:1px solid var(--dock-outline);border-radius:24px;box-shadow:inset 0 1px 0 var(--nav-highlight),0 8px 32px var(--nav-shadow);color:var(--muted);font-size:var(--composer-font-size);font-weight:var(--font-weight-body);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body)}
.contextual-popover[hidden]{display:none}
.contextual-popover-copy p{margin:0}
.contextual-popover-copy p+p{margin-top:16px}
.contextual-popover a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.contextual-popover a:hover{opacity:.75}
@media(prefers-reduced-motion:reduce){.context-marker-text{transition:none}}

/* mobile.css */
/* Keep editable text large enough to avoid Safari's automatic input zoom.
   This is independent of iframe width and primary-pointer classification. */
#dock #askInput{font-size:max(16px,var(--composer-font-size));line-height:1.4}
@supports(-webkit-touch-callout:none){html{-webkit-text-size-adjust:100%;text-size-adjust:100%}input:not([type="range"]):not([type="checkbox"]),textarea,select{font-size:max(16px,var(--font-size-body))}}
@media(max-width:1024px){
 .detail-layout,.description,.info-body,.content-grid>.surface{min-width:0}
 .detail h1,.description dd,.info-body p{overflow-wrap:anywhere}
 #settings{max-width:calc(100vw - 32px);right:16px;max-height:calc(100dvh - 96px)}
 .detail-media-actions button,.project-media-focus-close{min-height:44px}
 .detail-media-actions [data-media-focus="fullscreen"],.project-media-focus-close{width:44px;height:44px}
}
@media(max-width:750px){.detail,.home-carousel-active .card-placement{touch-action:pan-y pinch-zoom}.timeline-viewport{touch-action:pan-x pan-y pinch-zoom}}

@media(max-width:750px){.corner-controls{right:max(16px,env(safe-area-inset-right));bottom:calc(92px + env(safe-area-inset-bottom))}}