:root {
  color-scheme: dark;
  --bg: #090a0c;
  --text: #eeeeed;
  --muted: #77797e;
  --accent: #c7c7cd;
  --orb-front: 205, 205, 214;
  --orb-back: 145, 147, 158;
  --orb-glow: rgba(206, 207, 222, .10);
  --ring: rgba(206, 207, 222, .16);
  --line: rgba(255,255,255,.12);
  --ease: cubic-bezier(.2,.75,.2,1);
}
* { box-sizing: border-box; }
button, a, [role="button"], [role="tab"] { -webkit-tap-highlight-color: transparent; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
body { overflow: hidden; background: var(--bg); color: var(--text); font-family: 'Manrope', sans-serif; -webkit-font-smoothing: antialiased; transition: background-color .9s ease, color .9s ease; }
body::before { position: fixed; inset: 0; content: ''; pointer-events: none; opacity: .1; z-index: 4; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E"); }
button { color: inherit; font: inherit; }
.stage { --bg: #090a0c; position: relative; width: 100%; min-height: 100svh; overflow: hidden; background: var(--bg); transition: background-color 1s ease; }
.stage[data-section="about"] { --bg: #0c1519; --accent: #9bc9c5; --orb-front: 148, 199, 195; --orb-back: 65, 118, 126; --orb-glow: rgba(49, 130, 128, .23); --ring: rgba(145, 199, 195, .22); }
.stage[data-section="projects"] { --bg: #190d10; --accent: #ff9a92; --orb-front: 255, 139, 128; --orb-back: 173, 72, 73; --orb-glow: rgba(200, 64, 70, .2); --ring: rgba(255, 136, 125, .2); }
.stage[data-section="contact"] { --bg: #0b111b; --accent: #92c8ff; --orb-front: 143, 196, 255; --orb-back: 72, 113, 174; --orb-glow: rgba(68, 128, 206, .22); --ring: rgba(126, 181, 255, .2); }
.hero { position: relative; width: 100%; height: 100svh; min-height: 500px; overflow: hidden; }
.sites-universe { position: absolute; z-index: 1; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 1.1s ease, visibility 0s linear 1.1s; }
.sites-universe canvas { display: block; width: 100%; height: 100%; }
.stage.sites-entering .sites-universe, .stage.content-open[data-section="sites"] .sites-universe { opacity: .92; visibility: visible; transition-delay: .12s, 0s; }
.orb-wrap { position: absolute; z-index: 2; left: 50%; top: 50%; width: min(78vh, 78vw, 940px); aspect-ratio: 1; display: grid; place-items: center; transform: translate(-50%, -50%); cursor: pointer; border-radius: 50%; outline: none; transition: left 1.2s var(--ease), top 1.2s var(--ease), width 1.2s var(--ease), transform 1s var(--ease), opacity .7s ease, filter 1s ease; }
.orb-wrap:focus-visible { outline: 1px solid var(--accent); outline-offset: 8px; }
#orb { position: absolute; z-index: 1; width: 100%; height: 100%; }
.orb-halo { position: absolute; width: 79%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--orb-glow), transparent 70%); filter: blur(20px); transition: background 1s ease; }
.orb-halo::after { position: absolute; inset: 14%; content: ''; border-radius: inherit; background: radial-gradient(circle, rgba(255,255,255,.1), transparent 66%); opacity: 0; transform: scale(.86); transition: opacity .8s ease, transform 1.4s ease; }
.orb-wrap:hover .orb-halo::after { opacity: .85; transform: scale(1.13); }
.stage.menu-open .orb-halo::after { opacity: .9; transform: scale(1.08); animation: soft-heartbeat 2.4s ease-in-out infinite; }
@keyframes soft-heartbeat { 0%, 100% { opacity: .58; transform: scale(.98); } 48% { opacity: .95; transform: scale(1.1); } }
.orb-ring { position: absolute; width: 79%; aspect-ratio: 1; border: 1px solid var(--ring); border-radius: 50%; transition: border-color 1s ease; }
.orb-ring-one { transform: scaleY(.31) rotate(-23deg); }
.orb-ring-two { width: 88%; transform: scaleY(.28) rotate(28deg); opacity: .65; }
.stage.menu-open .orb-wrap { left: 35%; width: min(64vh, 64vw, 760px); }
.stage.content-open .orb-wrap { left: -1%; width: min(138vh, 138vw, 1600px); }
.stage.content-open[data-section="contact"] .orb-wrap { left: 50%; top: calc(100% + 61svh); width: min(240vw, 210svh, 5000px); cursor: pointer; }
.stage.sites-entering .menu { opacity: 0; visibility: hidden; pointer-events: none; }
.stage.sites-entering .orb-wrap { left: 50%; top: 50%; width: min(64vh, 64vw, 760px); animation: sites-enter-orb 1.15s cubic-bezier(.16,1,.3,1) forwards; }
.stage.sites-entering .content { opacity: 0; visibility: hidden; transition: none; }
@keyframes sites-enter-orb {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: brightness(1); }
  68% { transform: translate(-50%, -50%) scale(3.5); opacity: 1; filter: brightness(1.65); }
  100% { transform: translate(-50%, -50%) scale(5.2); opacity: 0; filter: brightness(2.2); }
}
.stage.sites-landing .orb-wrap { left: 50%; top: 50%; width: min(64vh, 64vw, 760px); transform: translate(-50%, -50%) scale(5.2); opacity: 0; filter: brightness(2.2); pointer-events: none; }
.stage.sites-landing .content { opacity: 0; visibility: hidden; transition: none; }
.stage.content-open[data-section="sites"] .orb-wrap { opacity: 0; visibility: hidden; pointer-events: none; }
.about-map { position: absolute; z-index: 2; top: 50%; left: calc(38% - clamp(310px, 46vh, 550px)); width: clamp(620px, 92vh, 1200px); aspect-ratio: 1; opacity: 0; visibility: hidden; filter: drop-shadow(0 0 24px color-mix(in srgb, var(--accent) 18%, transparent)); -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 34%, rgba(0,0,0,.12) 52%, rgba(0,0,0,.48) 72%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, transparent 34%, rgba(0,0,0,.24) 52%, rgba(0,0,0,1) 72%, #000 100%); pointer-events: none; transform: translate(-24px, -50%); transition: opacity 650ms ease, transform 650ms ease, visibility 0s linear 650ms; }
.about-map img { display: block; width: 100%; height: 100%; object-fit: contain; }
.about-map::after { position: absolute; inset: 0; content: ''; background: radial-gradient(circle at 0% 50%, rgba(12,21,25,.38) 0%, rgba(12,21,25,.2) 48%, transparent 78%); opacity: 0; transform: scale(.78); transform-origin: 0% 50%; transition: opacity 700ms ease, transform 700ms var(--ease); }
.stage.content-open[data-section="about"] .about-map { opacity: .88; visibility: visible; transform: translate(0, -50%); transition-delay: .38s, .38s, .38s; }
.stage.menu-open[data-section="about"] .about-map { opacity: 0; visibility: hidden; transform: translate(-118px, -50%); transition: opacity 180ms ease, transform 210ms var(--ease), visibility 0s linear 210ms; transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) {
  .stage.content-open[data-section="about"]:has(.orb-wrap:hover) .about-map::after { opacity: 1; transform: scale(1); }
}
.menu { position: absolute; z-index: 1; left: 63%; top: 50%; width: min(300px, 25vw); display: grid; gap: 5px; transform: translate(20px,-50%); opacity: 0; visibility: hidden; transition: opacity .55s ease, transform .7s var(--ease), visibility .55s; }
.menu-intro { margin: 0 0 21px; color: var(--text); font-family: 'Instrument Serif', serif; line-height: 1.12; letter-spacing: -.025em; }
.menu-intro p { margin: 0; }
.menu-intro .greeting { color: var(--accent); font-size: clamp(34px, 4vw, 52px); font-style:}
.menu-intro .menu-intro-subtitle { margin-top: 5px; color: var(--text); font-size: clamp(20px, 2.25vw, 29px); }
.menu-item { display: grid; grid-template-columns: 36px 1fr 24px; align-items: center; width: 100%; padding: 17px 4px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; font-size: clamp(18px, 2vw, 25px); letter-spacing: -.045em; cursor: pointer; transition: color .3s, padding .3s; }
.menu-item[data-target="sites"] { border-bottom-color: rgba(255,255,255,.86); }
.menu-item:hover, .menu-item:focus-visible { padding-left: 10px; color: var(--accent); outline: none; }
.menu-item .menu-icon, .menu-item i { color: var(--accent); font-family: 'DM Mono', monospace; font-size: 9px; font-style: normal; letter-spacing: .08em; }
.menu-item .menu-icon { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; }
.menu-item .menu-label { color: inherit; font: inherit; text-decoration: none; }
.menu-label-group { display: flex; min-width: 0; align-items: baseline; flex-wrap: wrap; gap: 0 10px; }
.menu-item .menu-status { color: rgba(238,240,239,.43); font: 8px 'DM Mono', monospace; letter-spacing: .035em; }
.menu-item.is-disabled, .menu-item.is-disabled:hover, .menu-item.is-disabled:focus-visible { padding-left: 4px; color: rgba(238,240,239,.48); outline: none; cursor: not-allowed; }
.menu-item.is-disabled .menu-icon, .menu-item.is-disabled i { color: rgba(238,240,239,.36); }
.menu-item .menu-icon svg, .site-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.menu-item i { justify-self: end; font-size: 14px; }
.stage.menu-open .menu { opacity: 1; visibility: visible; transform: translate(0,-50%); transition-delay: .38s; }
.stage.content-open .menu { opacity: 0; visibility: hidden; transform: translate(20px,-50%); transition-delay: 0s; }
.content { position: absolute; z-index: 3; left: 55%; top: 50%; width: min(470px, 39vw); max-height: 80svh; overflow: auto; padding: 22px 8px 22px 0; opacity: 0; visibility: hidden; transform: translate(25px,-46%); transition: opacity .65s ease, transform .8s var(--ease), visibility .65s; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
.stage.content-open .content { opacity: 1; visibility: visible; transform: translate(0,-50%); transition-delay: .38s; }
.stage.content-open[data-section="sites"] .content { top: 3.5svh; left: 4vw; width: 92vw; max-height: 93svh; overflow-x: hidden; overflow-y: auto; padding: 0 8px 14px 0; transform: none; overscroll-behavior: contain; }
.back-button { padding: 0; margin: 0 0 47px; border: 0; background: none; color: var(--accent); font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .12em; cursor: pointer; }
.back-button span { padding-right: 8px; font-size: 15px; vertical-align: -1px; }
.content-kicker { margin: 0 0 20px; color: var(--accent); font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .16em; }
.about-section .content-kicker { margin-bottom: 0; }
.about-portrait { position: relative; width: clamp(88px, 9vw, 120px); height: clamp(88px, 9vw, 120px); aspect-ratio: 1; margin: 26px 0 26px; overflow: hidden; border: 1px solid rgba(155,201,197,.35); border-radius: 50%; background: var(--bg); box-shadow: none; }
.about-portrait::after { display: none; }
.about-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 37%; transform: scale(1.18); }
.about-title { margin-top: 0 !important; }
.about-lead { text-wrap: balance; }
.about-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 27px; }
.about-links .text-action { flex: 0 0 auto; margin-top: 0; transition: none; }
.about-links .text-action:hover { gap: 20px; }
.about-links .text-action.is-disabled, .about-links .text-action.is-disabled:hover { gap: 20px; border-bottom-color: color-mix(in srgb, var(--accent) 35%, transparent); color: rgba(238,240,239,.42); cursor: not-allowed; }
.about-link { padding: 0 0 7px; border-bottom: 1px solid currentColor; color: var(--accent); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .12em; text-decoration: none; }
.about-links :focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 1px; }
.about-status { display: grid; justify-items: end; gap: 8px; margin: 34px 8px 12px 0; color: #b5b1bb; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .045em; text-align: right; }
.hero > .about-status { position: absolute; z-index: 3; right: 6vw; bottom: 5vh; margin: 0; }
.stage.content-open[data-section="about"] .content { top: 4vh; bottom: calc(5vh + 42px); max-height: none; transform: none; }
.availability { display: inline-flex; align-items: center; gap: 9px; }
.availability i { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 5px rgba(155,201,197,.32); animation: availability-pulse 2.5s ease-in-out infinite; }
@keyframes availability-pulse { 0%, 100% { opacity: .56; box-shadow: 0 0 3px rgba(155,201,197,.2); } 50% { opacity: 1; box-shadow: 0 0 9px rgba(155,201,197,.56); } }
@keyframes about-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.stage[data-section="about"] .about-portrait,
.stage[data-section="about"] .about-title,
.stage[data-section="about"] .about-lead,
.stage[data-section="about"] .about-detail,
.stage[data-section="about"] .about-links { animation: about-enter 560ms var(--ease) both; }
.stage[data-section="about"] .about-portrait { animation-delay: 0ms; }
.stage[data-section="about"] .about-title { animation-delay: 90ms; }
.stage[data-section="about"] .about-lead { animation-delay: 180ms; }
.stage[data-section="about"] .about-detail { animation-delay: 270ms; }
.stage[data-section="about"] .about-links { animation-delay: 360ms; }
.content h1 { margin: 0 0 24px; color: var(--accent); font-family: 'Instrument Serif', serif; font-size: clamp(66px, 8vw, 104px); line-height: 1.05; letter-spacing: -.045em; font-weight: 400; transition: color 1s ease; }
.content-lead { max-width: 400px; margin: 0; color: #e5e2e8; font-size: 16px; line-height: 1.8; letter-spacing: -.02em; }
.content-detail { max-width: 400px; margin: 17px 0 0; color: #b5b1bb; font-size: 14px; line-height: 1.9; }
.text-action { display: inline-flex; align-items: center; gap: 20px; margin-top: 27px; padding: 0 0 8px; border: 0; border-bottom: 1px solid var(--accent); background: none; color: var(--accent); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .12em; cursor: pointer; transition: gap .25s ease; }
.text-action:hover { gap: 27px; }.text-action span { font-size: 14px; }
.projects-section .content-kicker { text-transform: none; }
.project-list { display: grid; margin-top: 27px; border-top: 1px solid var(--line); }
.project-row { display: grid; grid-template-columns: 72px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); color: #e5e2e8; text-decoration: none; }
.project-thumb { position: relative; display: block; width: 72px; height: 48px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent); border-radius: 8px; }
.project-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.6); transition: filter 260ms ease; }
.project-thumb::after { position: absolute; inset: 0; content: ''; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 19%, transparent), transparent 72%); mix-blend-mode: screen; opacity: .8; transition: opacity 260ms ease; }
.project-copy { display: grid; min-width: 0; gap: 4px; }
.project-title { display: inline-flex; align-items: center; min-width: 0; gap: 7px; color: #e5e2e8; font-size: 15px; line-height: 1.35; }
.project-title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: transform 260ms var(--ease); }
.project-arrow { color: var(--accent); opacity: 0; transform: translateX(-4px); transition: opacity 240ms ease, transform 240ms var(--ease); }
.project-description { display: block; overflow: hidden; color: #b5b1bb; font-size: 12px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.project-technologies { overflow: hidden; color: #99949f; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.project-meta { justify-self: end; color: var(--accent); font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .04em; white-space: nowrap; }
.project-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 3px; }
.project-row:hover .project-title-text, .project-row:focus-visible .project-title-text { transform: translateX(4px); }
.project-row:hover .project-arrow, .project-row:focus-visible .project-arrow { opacity: 1; transform: translateX(0); }
.project-row:hover .project-thumb img, .project-row:focus-visible .project-thumb img { filter: saturate(1); }
.project-row:hover .project-thumb::after, .project-row:focus-visible .project-thumb::after { opacity: .3; }
.project-preview { display: none; }
.project-preview-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; filter: saturate(.6); opacity: 0; transform: translateY(8px); transition: opacity 280ms ease, transform 280ms var(--ease), filter 280ms ease; }
.project-preview-image.is-active { filter: saturate(1); opacity: 1; transform: translateY(0); }
.stage[data-section="projects"] .project-row { animation: project-row-enter 560ms var(--ease) both; animation-delay: var(--row-delay, 0ms); }
@keyframes project-row-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1800px) and (min-height: 1000px) and (hover: hover) and (pointer: fine) {
  .stage.content-open[data-section="projects"] .project-preview { position: absolute; z-index: 1; top: 50%; left: calc(55% - clamp(320px, 20vw, 440px) - 24px); display: block; width: clamp(320px, 20vw, 440px); aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent); border-radius: 12px; transform: translateY(calc(-50% + 8px)); box-shadow: 0 24px 70px rgba(0,0,0,.24); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 300ms ease, transform 300ms var(--ease), visibility 300ms ease; }
  .stage.content-open[data-section="projects"] .project-preview.is-visible { transform: translateY(-50%); opacity: 1; visibility: visible; }
  .stage.content-open[data-section="projects"] .project-preview::after { position: absolute; inset: 0; content: ''; border-radius: inherit; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 19%, transparent), transparent 72%); mix-blend-mode: screen; opacity: .8; pointer-events: none; }
  .stage.content-open[data-section="projects"] .project-row { grid-template-columns: minmax(0,1fr) auto; }
  .stage.content-open[data-section="projects"] .project-thumb { display: none; }
}
.contact-section { max-width: 620px; margin: 0 auto; text-align: center; }
.stage.content-open[data-section="contact"] .content { top: 40svh; left: 50%; width: min(660px, 88vw); max-height: 68svh; overflow: visible; padding: 10px; transform: translate(-50%,-50%); }
.stage.content-open[data-section="contact"] .back-button { margin-bottom: 28px; }
.contact-section .content-kicker { margin-bottom: 15px; }
.contact-section h1 { margin-bottom: 12px; font-size: clamp(76px, 8vw, 112px); }
.contact-section .content-lead { margin-inline: auto; font-size: 18px; }
.contact-section .content-detail { max-width: 420px; margin: 10px auto 0; font-size: 14px; }
.contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 25px; }
.contact-action { display: inline-flex; min-height: 46px; align-items: center; gap: 10px; padding: 0 18px; border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--accent) 6%, transparent); color: var(--text); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .08em; text-decoration: none; transition: border-color .25s ease, background-color .25s ease, transform .25s var(--ease); }
.contact-action svg { width: 17px; height: 17px; fill: none; stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.contact-action:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 72%, transparent); background: color-mix(in srgb, var(--accent) 11%, transparent); }
.contact-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.stage.content-open[data-section="contact"] .orb-halo { width: 90%; filter: blur(36px); background: radial-gradient(circle, rgba(74,153,255,.42) 0%, rgba(58,132,245,.22) 38%, rgba(48,112,220,.08) 66%, transparent 80%); opacity: .82; }
.stage.content-open[data-section="contact"] .orb-ring { opacity: .3; }
.sites-section { --site-ink: #202323; --site-paper: #eeeae3; --site-muted: #777a75; --site-highlight: #b6c1ad; color: var(--text); }
.stage.content-open[data-section="sites"] .back-button { margin: 0 0 clamp(12px, 2vh, 22px); }
.sites-topbar { display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,.65fr); align-items: center; gap: 24px; margin-bottom: clamp(16px, 2.5vh, 26px); }
.site-tabs { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.site-type { display: inline-flex; min-height: 44px; align-items: center; gap: 10px; padding: 0 15px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.025); color: #b5b7b8; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .025em; white-space: nowrap; cursor: pointer; transition: color 240ms ease, background-color 240ms ease, border-color 240ms ease, transform 240ms var(--ease); }
.site-type span { color: var(--accent); font-size: 8px; }
.site-type .site-icon { display: inline-flex; width: 16px; height: 16px; flex: 0 0 16px; align-items: center; justify-content: center; }
.site-type:hover { transform: translateY(-2px); color: var(--text); }
.site-type.is-active { border-color: #f7f7f5; background: #f7f7f5; color: #141719; }
.site-type.is-active .site-icon { color: #141719; }
.site-type:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sites-heading { text-align: right; }
.sites-heading .content-kicker { margin-bottom: 4px; font-size: 9px; }
.sites-heading h1 { margin: 0; color: var(--accent); font-family: 'Instrument Serif', serif; font-size: clamp(38px, 4.6vw, 62px); font-weight: 400; line-height: 1; letter-spacing: -.04em; }
.sites-heading h1 span { color: var(--text); }
.sites-contact { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 7px 11px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--text); font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .07em; cursor: pointer; transition: border-color 220ms ease, background-color 220ms ease, transform 220ms var(--ease); }
.sites-contact svg { width: 13px; height: 13px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sites-contact i { color: var(--accent); font-size: 12px; font-style: normal; }
.sites-contact:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 72%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sites-contact:focus-visible, .site-social a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.site-guide { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,1fr) minmax(155px,.62fr); align-items: center; gap: clamp(18px,3vw,38px); margin: 0 0 16px; padding: clamp(16px,2vw,24px); border: 1px solid rgba(255,255,255,.1); border-left: 2px solid color-mix(in srgb, var(--accent) 72%, transparent); background: linear-gradient(105deg, color-mix(in srgb, var(--accent) 8%, rgba(255,255,255,.025)), rgba(255,255,255,.018) 48%, transparent); transition: opacity 180ms ease, transform 180ms ease; }
.site-guide.is-changing { opacity: 0; transform: translateY(6px); }
.site-guide-main { min-width: 0; }
.site-guide-kicker { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 10px; color: var(--accent); font: 8px 'DM Mono',monospace; letter-spacing: .13em; }
.site-guide-kicker span:last-child { color: rgba(255,255,255,.42); }
.site-guide-main h2 { margin: 0 0 8px; color: var(--text); font: 400 clamp(23px,2.4vw,34px)/1.04 'Instrument Serif',Georgia,serif; letter-spacing: -.025em; }
.site-guide-summary { max-width: 440px; margin: 0; color: rgba(238,240,239,.76); font-size: 12px; line-height: 1.65; }
.site-guide-facts { display: grid; gap: 13px; }
.site-guide-facts article { min-width: 0; }
.site-guide-facts article > span, .site-guide-level > span { color: rgba(255,255,255,.5); font: 8px 'DM Mono',monospace; letter-spacing: .11em; }
.site-guide-facts p { margin: 5px 0 0; color: rgba(238,240,239,.8); font-size: 11px; line-height: 1.55; }
.site-guide-complexity { align-self: stretch; display: grid; align-content: center; gap: 10px; padding-left: clamp(14px,2vw,24px); border-left: 1px solid rgba(255,255,255,.12); }
.site-guide-level { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.site-guide-level strong { color: var(--text); font: 400 18px 'Instrument Serif',Georgia,serif; }
.site-guide-meter { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
.site-guide-meter i { height: 3px; border-radius: 3px; background: rgba(255,255,255,.14); transition: background-color 180ms ease; }
.site-guide-meter i.is-filled { background: var(--accent); }
.site-guide-complexity > p { margin: 0; color: rgba(238,240,239,.66); font-size: 10px; line-height: 1.55; }
.site-preview { height: min(65svh, 760px); min-height: 360px; overflow: hidden; padding: 8px; border: 1px solid rgba(255,255,255,.13); border-radius: 17px; background: rgba(5,7,8,.72); box-shadow: 0 28px 90px rgba(0,0,0,.3); }
.site-browser-bar { height: 32px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 0 12px; color: #787b7d; font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: .05em; }
.browser-dots { display: flex; gap: 5px; }
.browser-dots i { width: 6px; height: 6px; border-radius: 50%; background: #54595a; }
.browser-dots i:first-child { background: #b17b75; }.browser-dots i:nth-child(2) { background: #bca87c; }
.browser-address { justify-self: center; padding: 5px 18px; border: 1px solid rgba(255,255,255,.07); border-radius: 999px; }
.browser-mark { justify-self: end; color: var(--accent); font-size: 13px; }
.site-mockup { position: relative; height: calc(100% - 32px); overflow: hidden; background: #e9e6df; color: #222523; transition: opacity 150ms ease, transform 150ms ease; }
.site-mockup[data-light="1"] { --demo-light: .08; }
.site-mockup[data-light="2"] { --demo-light: .16; }
.site-mockup[data-light="3"] { --demo-light: .24; }
.site-mockup::after { position: absolute; z-index: 4; inset: 0; content: ''; background: radial-gradient(ellipse at 76% 23%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.2) 38%, transparent 72%); mix-blend-mode: screen; opacity: var(--demo-light, .08); pointer-events: none; transition: opacity 600ms ease; }
.site-mockup.is-changing { opacity: 0; transform: translateY(7px); }
.mock-nav { position: relative; z-index: 1; height: 65px; display: flex; align-items: center; justify-content: space-between; padding: 0 5.5%; border-bottom: 1px solid rgba(30,35,32,.1); color: #252a27; }
.mock-brand { font-size: 14px; font-weight: 700; letter-spacing: .12em; }
.mock-links { color: #555954; font-size: 10px; }
.mock-menu { display: none; }
.mock-eyebrow { margin: 0 0 18px; color: #7a8275; font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: .16em; }
.mock-landing { position: relative; min-height: calc(100% - 65px); display: flex; align-items: center; padding: 4% 8%; overflow: hidden; background: radial-gradient(ellipse at 78% 48%, rgba(191,197,165,.34), transparent 38%), #eeece5; }
.site-mockup[data-site-kind="landing"] { font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; background: #eee9df; color: #28251f; }
.site-mockup[data-site-kind="landing"] .mock-nav { height: 72px; border-bottom: 0; color: #28251f; }
.site-mockup[data-site-kind="landing"] .mock-brand { font-family: Georgia, serif; font-size: 20px; font-weight: 400; letter-spacing: .2em; }
.site-mockup[data-site-kind="landing"] .mock-links { color: #625a4f; font-size: 9px; letter-spacing: .08em; }
.site-mockup[data-site-kind="landing"] .mock-eyebrow { color: #a26344; }
.site-mockup[data-site-kind="landing"] .mock-copy h2 { color: #28251f; font-family: 'Arial Narrow', 'Trebuchet MS', sans-serif; font-size: clamp(42px, 5.5vw, 82px); font-weight: 500; line-height: .9; letter-spacing: -.07em; }
.site-mockup[data-site-kind="landing"] .mock-copy > p:not(.mock-eyebrow) { color: #625a4f; font-size: 13px; }
.site-mockup[data-site-kind="landing"] .mock-copy button { border-color: #b96644; color: #45352a; }
.site-mockup[data-site-kind="landing"] .mock-copy button span { color: #b96644; }
.site-mockup[data-site-kind="landing"] .mock-art-landing { background: linear-gradient(155deg,#edbd91,#d47752 54%,#754e44); }
.site-mockup[data-site-kind="landing"] .art-sun { background: radial-gradient(circle at 35% 30%, #f7d9a8, #e68c55 72%); }
.mock-copy { position: relative; z-index: 1; width: min(53%, 540px); }
.mock-copy h2, .mock-corporate h2, .mock-shop h2 { margin: 0; font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(38px, 5vw, 76px); font-weight: 400; line-height: .98; letter-spacing: -.04em; }
.mock-copy > p:not(.mock-eyebrow), .mock-shop-copy > p:not(.mock-eyebrow) { max-width: 330px; margin: 18px 0 0; color: #666a64; font-size: 12px; line-height: 1.7; }
.mock-copy button, .mock-corporate button, .mock-shop-copy button { display: inline-flex; align-items: center; gap: 28px; margin-top: 24px; padding: 12px 0; border: 0; border-bottom: 1px solid #737b69; background: transparent; color: #29302b; font-size: 10px; }
.mock-copy button span, .mock-corporate button span, .mock-shop-copy button span { color: #737b69; font-size: 15px; }
.mock-copy small { display: block; margin-top: 34px; color: #90938c; font-family: 'DM Mono', monospace; font-size: 7px; letter-spacing: .12em; }
.mock-art { position: absolute; top: 8%; right: 9%; width: 34%; height: 82%; overflow: hidden; background: linear-gradient(145deg,#bfc6b4,#8d9985 56%,#d0c9b8); }
.mock-art::before { position: absolute; inset: 8% 11%; content: ''; border: 1px solid rgba(255,255,255,.36); }
.mock-art-landing { border-radius: 48% 48% 4px 4px; }
.art-orbit { position: absolute; left: 8%; top: 32%; width: 85%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.56); border-radius: 50%; transform: scaleY(.38) rotate(-24deg); }
.art-sun { position: absolute; left: 29%; top: 22%; width: 43%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e4d9bc, #b17d62 72%); box-shadow: 0 25px 60px rgba(74,59,47,.25); }
.mock-art > span { position: absolute; right: 12%; bottom: 12%; color: rgba(255,255,255,.75); font-family: 'DM Mono', monospace; font-size: 9px; line-height: 1.6; }
.mock-corporate { min-height: calc(100% - 65px); padding: 5% 8%; background: #e5e3dd; }
.site-mockup[data-site-kind="corporate"] { font-family: Arial, Helvetica, sans-serif; background: #e7edf0; color: #1f3038; }
.site-mockup[data-site-kind="corporate"] .mock-nav { height: 74px; border-bottom-color: #c7d2d7; color: #1f3038; }
.site-mockup[data-site-kind="corporate"] .mock-brand { font-size: 11px; font-weight: 600; letter-spacing: .19em; }
.site-mockup[data-site-kind="corporate"] .mock-links { color: #53636b; font-size: 9px; }
.site-mockup[data-site-kind="corporate"] .mock-eyebrow { color: #3c7180; }
.site-mockup[data-site-kind="corporate"] .mock-corporate { background: #e7edf0; }
.site-mockup[data-site-kind="corporate"] .mock-corporate h2 { max-width: 610px; color: #1f3038; font-family: Arial, Helvetica, sans-serif; font-size: clamp(40px, 4.8vw, 70px); font-weight: 400; line-height: 1.04; letter-spacing: -.055em; }
.site-mockup[data-site-kind="corporate"] .mock-corporate-bottom > p { color: #52636a; font-size: 12px; }
.site-mockup[data-site-kind="corporate"] .mock-corporate button { border-color: #367183; color: #1f3038; }
.site-mockup[data-site-kind="corporate"] .mock-corporate button span { color: #367183; }
.site-mockup[data-site-kind="corporate"] .mock-building { background: linear-gradient(180deg,transparent,#cbd9dc); }
.site-mockup[data-site-kind="corporate"] .mock-building i { border-color: rgba(47,91,103,.58); background-color: rgba(111,157,167,.3); }
.site-mockup[data-site-kind="corporate"] .mock-building b { background: #4d7d88; }
.mock-corporate h2 { max-width: 600px; font-size: clamp(40px, 5.1vw, 78px); }
.mock-corporate-bottom { position: relative; min-height: 185px; display: flex; align-items: start; justify-content: space-between; margin-top: 22px; }
.mock-corporate-bottom > p { max-width: 215px; margin: 0; color: #666a64; font-size: 11px; line-height: 1.7; }
.mock-corporate-bottom button { position: absolute; left: 0; top: 45px; }
.mock-building { position: absolute; right: 0; bottom: -10px; width: 43%; height: 245px; overflow: hidden; display: flex; align-items: end; justify-content: center; gap: 5px; background: linear-gradient(180deg,transparent,#cbc9c0); }
.mock-building i { width: 18%; height: 72%; border: 1px solid rgba(86,96,86,.45); background: repeating-linear-gradient(180deg,transparent 0 18px,rgba(95,108,94,.27) 19px 20px),rgba(171,178,161,.48); }
.mock-building i:nth-child(2) { height: 92%; }.mock-building i:nth-child(3) { height: 62%; }.mock-building i:nth-child(4) { height: 82%; }
.mock-building b { position: absolute; right: 0; bottom: 0; width: 100%; height: 1px; background: #7e8679; }
.mock-corporate > small { display: block; margin-top: 18px; color: #85877f; font-family: 'DM Mono', monospace; font-size: 7px; letter-spacing: .12em; }
.mock-corporate > small span { padding: 0 8px; color: #89927e; }
.mock-shop { min-height: calc(100% - 65px); padding: 4% 6%; background: #f1eee7; }
.site-mockup[data-site-kind="commerce"] { font-family: Georgia, 'Times New Roman', serif; background: #f3e4d4; color: #3b2925; }
.site-mockup[data-site-kind="commerce"] .mock-nav { height: 70px; border-bottom-color: #ddc7b2; color: #3b2925; }
.site-mockup[data-site-kind="commerce"] .mock-brand { font-family: Georgia, serif; font-size: 15px; font-weight: 400; letter-spacing: .14em; }
.site-mockup[data-site-kind="commerce"] .mock-links { color: #755547; font-family: 'Trebuchet MS', sans-serif; font-size: 9px; }
.site-mockup[data-site-kind="commerce"] .mock-eyebrow { color: #a14f40; }
.site-mockup[data-site-kind="commerce"] .mock-shop { background: #f3e4d4; }
.site-mockup[data-site-kind="commerce"] .mock-shop h2 { color: #3b2925; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(38px, 4.7vw, 68px); font-style: italic; font-weight: 400; line-height: .98; letter-spacing: -.055em; }
.site-mockup[data-site-kind="commerce"] .mock-shop-copy > p:not(.mock-eyebrow) { color: #755d50; font-family: 'Trebuchet MS', sans-serif; }
.site-mockup[data-site-kind="commerce"] .mock-shop-copy button { border-color: #a14f40; color: #3b2925; }
.site-mockup[data-site-kind="commerce"] .mock-shop-copy button span { color: #a14f40; }
.site-mockup[data-site-kind="commerce"] .mock-product > i { background-color: #dfc5ad; }
.site-mockup[data-site-kind="commerce"] .product-one > i::before { background: linear-gradient(110deg,#b77855,#ecc69c 42%,#985f43); }
.site-mockup[data-site-kind="commerce"] .product-two > i { background-color: #e3c8b2; }
.site-mockup[data-site-kind="commerce"] .product-two > i::before { background: linear-gradient(90deg,#695b52,#c9a890 48%,#766052); }
.site-mockup[data-site-kind="commerce"] .product-three > i { background-color: #e5cbb7; }
.site-mockup[data-site-kind="commerce"] .product-three > i::before { background: linear-gradient(90deg,#a3604c,#e6af87 50%,#9b5544); }
.site-mockup[data-site-kind="commerce"] .mock-product { font-family: 'Trebuchet MS', sans-serif; }
.site-mockup[data-site-kind="commerce"] .mock-product > i { border-radius: 2px; }
.mock-shop-copy { position: relative; z-index: 1; max-width: 420px; }
.mock-shop-copy .mock-eyebrow { margin-bottom: 10px; }
.mock-shop h2 { font-size: clamp(34px, 4vw, 58px); }
.mock-shop-copy > p:not(.mock-eyebrow) { margin-top: 10px; }
.mock-shop-copy button { margin-top: 13px; }
.mock-products { position: absolute; right: 6%; bottom: 5%; width: 56%; height: 57%; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: end; gap: 10px; }
.mock-product { display: grid; gap: 5px; color: #464b44; font-size: 8px; }
.mock-product > i { position: relative; display: block; height: clamp(85px, 15vh, 180px); overflow: hidden; background: #d8d5ca; }
.mock-product > i::before { position: absolute; left: 24%; bottom: 10%; width: 52%; height: 68%; content: ''; border-radius: 42% 42% 18% 18%; background: linear-gradient(110deg,#b5a58a,#e1d7c4 42%,#94836a); box-shadow: 8px 10px 18px rgba(56,51,39,.15); }
.product-two > i { background: #d4d8d0; }.product-two > i::before { left: 34%; width: 32%; height: 84%; border-radius: 48% 48% 14% 14%; background: linear-gradient(90deg,#6c7569,#c0c6b9 48%,#737b6b); }
.product-three > i { background: #dfd6cb; }.product-three > i::before { left: 18%; width: 64%; height: 42%; border-radius: 8% 8% 50% 50%; background: linear-gradient(90deg,#9e765d,#d4b49a 50%,#9b755b); }
.mock-product small { color: #84857e; font-size: 7px; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.site-footer-copy { min-width: 0; }
.site-note { margin: 12px 2px 0; color: #9899a1; font-size: 10px; line-height: 1.6; }
.site-infrastructure { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 5px 2px 0; color: #858b8e; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .025em; line-height: 1.6; }
.site-infrastructure span { color: #b6bdbe; }
.site-infrastructure i { margin: 0 3px; color: var(--accent); font-style: normal; }
.site-social { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; margin-top: 8px; }
.site-social a { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; color: #aeb0b7; transition: color 220ms ease, border-color 220ms ease, background-color 220ms ease, transform 220ms var(--ease); }
.site-social a:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 56%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); }
.site-social svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hint { position: absolute; z-index: 3; left: 50%; bottom: 8.5%; margin: 0; color: #777982; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .14em; white-space: nowrap; transform: translateX(-50%); transition: opacity .35s; }
.hint span { padding: 0 8px; color: var(--accent); }
.stage.menu-open .hint, .stage.content-open .hint { opacity: 0; }
@media (max-width: 700px) {
  .about-map { display: none !important; }
  .orb-wrap { width: min(88vw, 67vh); }
  .stage.menu-open .orb-wrap { left: 0%; width: min(112vh, 82vw, 900px); }
  .stage.sites-entering .orb-wrap, .stage.sites-landing .orb-wrap { width: min(58vh, 63vw); }
  .menu { left: 52%; width: 42vw; }
  .menu-intro { margin-bottom: 14px; }
  .menu-intro .greeting { font-size: clamp(38px, 9.5vw, 54px); line-height: 1.02; }
  .menu-intro .menu-intro-subtitle { margin-top: 8px; font-size: clamp(22px, 5.8vw, 29px); line-height: 1.08; }
  .menu-item { grid-template-columns: 25px 1fr 17px; padding: 14px 1px; font-size: clamp(16px, 4.3vw, 22px); }
  .stage.content-open .orb-wrap { left: -47%; width: min(138vw, 110vh); }
  .stage.content-open[data-section="contact"] .orb-wrap { left: 50%; top: calc(100% + 32svh); width: min(240vw, 170svh, 1100px); }
  .content { left: 47%; width: 49%; max-height: 78svh; padding-right: 5px; }
  .stage.content-open[data-section="contact"] .content { top: 38svh; left: 50%; width: 88%; max-height: 68svh; padding: 8px 0; transform: translate(-50%,-50%); }
  .stage.content-open[data-section="about"] .content { top: 50%; bottom: auto; max-height: calc(100svh - 32px); transform: translate(0,-50%); }
  .back-button { margin-bottom: 32px; font-size: 10px; }
  .content h1 { font-size: clamp(54px, 12vw, 78px); }
  .contact-section h1 { font-size: clamp(62px, 15vw, 86px); }
  .contact-section .content-lead { font-size: 15px; }
  .contact-section .content-detail { max-width: 330px; font-size: 14px; }
  .contact-section .content-kicker { margin-bottom: 13px; }
  .contact-actions { gap: 9px; margin-top: 20px; }
  .contact-action { min-height: 43px; padding: 0 14px; font-size: 10px; }
  .stage.content-open[data-section="contact"] .back-button { margin-bottom: 20px; }
  .content-lead { font-size: 15px; line-height: 1.6; }
  .content-detail { font-size: 14px; line-height: 1.65; }
  .project-row { grid-template-columns: 72px minmax(0,1fr); grid-template-rows: auto auto; gap: 7px 10px; padding: 14px 0; }
  .project-thumb { grid-column: 1; grid-row: 1 / 3; }
  .project-copy { grid-column: 2; grid-row: 1; }
  .project-meta { grid-column: 2; grid-row: 2; justify-self: start; font-size: 10px; }
  .project-description { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .project-technologies { font-size: 9px; }
  .project-soon { font-size: 9px; }
  .about-portrait { margin-top: 24px; margin-bottom: 24px; }
  .about-links { gap: 14px 18px; }
  .about-status { justify-items: start; margin: 25px 0 10px; text-align: left; }
  .hero > .about-status { position: static; }
  .project-row { gap: 8px; font-size: 13px; }.project-row span:last-child { font-size: 10px; }
  .hint { bottom: 6%; font-size: 8px; }
  .stage.content-open[data-section="sites"] .content { top: 2.5svh; left: 4vw; width: 92vw; max-height: 95svh; overflow-x: hidden; overflow-y: auto; padding: 0 7px 22px; transform: none; }
  .stage.content-open[data-section="sites"] .back-button { margin: 0 0 17px 2px; }
  .sites-topbar { grid-template-columns: 1fr; grid-template-areas: "heading" "tabs"; gap: 16px; margin-bottom: 18px; }
  .site-tabs { grid-area: tabs; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .sites-heading { grid-area: heading; }
  .site-type { min-width: 0; min-height: 48px; justify-content: center; gap: 4px; padding: 6px 4px; font-size: 9px; white-space: normal; text-align: center; }
  .site-type span { display: none; }
  .site-type .site-icon { display: inline-flex; width: 15px; height: 15px; flex-basis: 15px; }
  .site-guide { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 16px; margin-bottom: 17px; padding: 16px; }
  .site-guide-main h2 { font-size: clamp(22px,5vw,30px); }
  .site-guide-summary { font-size: 12px; }
  .site-guide-facts { gap: 11px; }
  .site-guide-facts p { font-size: 11px; }
  .site-guide-complexity { grid-column: 1 / -1; grid-template-columns: minmax(112px,.65fr) minmax(70px,.4fr) minmax(0,1fr); align-items: center; gap: 12px; padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,.12); border-left: 0; }
  .site-guide-level { align-items: center; }
  .site-guide-level strong { font-size: 16px; }
  .site-guide-complexity > p { font-size: 10px; }
  .sites-heading { text-align: left; }
  .sites-heading .content-kicker { margin-bottom: 3px; font-size: 10px; }
  .sites-heading h1 { font-size: clamp(36px, 10vw, 52px); }
  .site-preview { height: clamp(330px, 57svh, 580px); min-height: 330px; padding: 8px; border-radius: 14px; }
  .site-browser-bar { height: 38px; grid-template-columns: 1fr auto; gap: 9px; padding: 0 12px; font-size: 8px; }
  .site-expand { height: 28px; min-height: 28px; margin-right: 2px; padding-inline: 12px; }
  .browser-address { max-width: 100%; overflow: hidden; padding: 5px 9px; text-overflow: ellipsis; white-space: nowrap; }
  .site-mockup { height: calc(100% - 38px); }
  .mock-nav { height: 48px; padding: 0 5%; }
  .mock-brand { font-size: 11px; }
  .mock-links { display: none; }
  .mock-menu { display: block; font-size: 13px; }
  .mock-landing, .mock-corporate { min-height: calc(100% - 48px); }
  .mock-landing { padding: 7% 6%; }
  .mock-copy { width: 58%; }
  .mock-copy h2 { font-size: clamp(31px, 8vw, 46px); }
  .site-mockup[data-site-kind="landing"] .mock-copy h2 { font-size: clamp(29px, 7.4vw, 40px); }
  .mock-copy > p:not(.mock-eyebrow), .mock-shop-copy > p:not(.mock-eyebrow) { margin-top: 10px; font-size: 11px; }
  .mock-copy button, .mock-corporate button, .mock-shop-copy button { gap: 12px; margin-top: 13px; padding: 8px 0; font-size: 9px; }
  .mock-copy small { margin-top: 18px; font-size: 6px; }
  .mock-art { right: 4%; width: 31%; height: 72%; }
  .mock-corporate { padding: 7% 6%; }
  .mock-corporate h2 { max-width: 90%; font-size: clamp(34px, 8vw, 48px); }
  .site-mockup[data-site-kind="corporate"] .mock-corporate h2 { font-size: clamp(28px, 7.5vw, 40px); }
  .mock-corporate-bottom { min-height: 145px; margin-top: 13px; }
  .mock-corporate-bottom > p { max-width: 48%; font-size: 11px; }
  .mock-corporate-bottom button { top: 38px; }
  .mock-building { width: 48%; height: 180px; }
  .mock-corporate > small { font-size: 6px; }
  .mock-shop { min-height: calc(100% - 48px); padding: 6%; }
  .mock-shop-copy { max-width: 100%; }
  .mock-shop h2 { max-width: 80%; font-size: clamp(30px, 7vw, 42px); }
  .site-mockup[data-site-kind="commerce"] .mock-shop h2 { font-size: clamp(28px, 7.2vw, 38px); }
  .mock-shop-copy > p:not(.mock-eyebrow) { max-width: 70%; }
  .mock-products { right: 5%; bottom: 4%; width: 72%; height: 43%; gap: 6px; }
  .mock-product { font-size: 7px; }
  .mock-product > i { height: clamp(65px, 12vh, 105px); }
  .mock-product small { font-size: 6px; }
  .site-note { margin-top: 9px; font-size: 11px; }
  .site-infrastructure { font-size: 9px; }
  .sites-contact { margin-top: 8px; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 0; margin-top: 18px; padding-inline: 3px; }
  .site-social { margin-top: 10px; }
}
@media (min-width: 701px) and (max-height: 700px) {
  .content { top: 50%; max-height: 88svh; padding-top: 12px; padding-bottom: 12px; }
  .back-button { margin-bottom: 24px; }
  .content h1 { margin-bottom: 14px; font-size: clamp(50px, 7vw, 78px); }
  .content-lead { font-size: 14px; line-height: 1.6; }
  .project-list { margin-top: 18px; }
  .project-row { padding: 10px 0; }
}
@media (min-width: 701px) and (max-width: 1250px) {
  .content { left: 52%; width: min(430px, 44vw); }
  .stage.content-open .orb-wrap { left: -7%; width: min(112vh, 112vw, 1200px); }
  .about-map { left: calc(35% - clamp(300px, 41vh, 475px)); width: clamp(600px, 82vh, 950px); }
}
@media (max-width: 390px) {
  .stage.menu-open .orb-wrap { left: 0%; width: min(112vh, 82vw, 900px); }
  .menu { left: 49%; width: 46vw; }
  .stage.content-open .orb-wrap { left: -54%; width: 145vw; }
  .content { left: 43%; width: 53%; }
  .content h1 { font-size: 42px; }
}
@media (max-width: 700px) and (orientation: portrait) {
  /* Keep the home and menu compositions intact; only section views anchor the orb below. */
  .stage.content-open[data-section="about"] .orb-wrap,
  .stage.content-open[data-section="projects"] .orb-wrap,
  .stage.content-open[data-section="contact"] .orb-wrap { left: 50%; top: calc(100% + 32svh); width: min(240vw, 170svh, 1100px); }
  .stage.sites-entering .orb-wrap,
  .stage.sites-landing .orb-wrap { left: 50%; top: 50%; width: min(58vh, 63vw); }

  .about-map { top: 5svh; left: 19vw; width: 100vw; transform: translateY(-18px); -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 24%, #000 52%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 24%, #000 52%); }
  .stage.content-open[data-section="about"] .about-map { display: block !important; top: 5svh; left: 19vw; width: 100vw; opacity: .58; transform: translateY(0); transition-delay: .38s, .38s, .38s; }

  /* Use a centered, readable column and let long sections scroll on small screens. */
  .stage.content-open[data-section="about"] .content,
  .stage.content-open[data-section="projects"] .content,
  .stage.content-open[data-section="contact"] .content {
    top: 5svh;
    bottom: auto;
    left: 50%;
    width: min(88vw, 520px);
    max-height: 90svh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px 4px 28px;
    transform: translateX(-50%);
    scrollbar-width: thin;
  }
  .stage.content-open[data-section="about"] .content,
  .stage.content-open[data-section="projects"] .content { text-align: left; }
  .stage.content-open[data-section="about"] .about-status { justify-items: start; margin: 25px 0 10px; text-align: left; }
  .stage.content-open[data-section="contact"] .content { text-align: center; }
  .stage.content-open[data-section="contact"] .contact-section { width: 100%; }
  .stage.content-open[data-section="contact"] .back-button { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; scroll-behavior: auto !important; }
  .stage.content-open[data-section="about"] .about-map { transition-delay: 0s; }
}

/* Expandable, full-length website demonstrations */
.site-preview { position: relative; }
.site-preview-fade { position: absolute; z-index: 5; right: 8px; bottom: 8px; left: 8px; height: clamp(92px, 19%, 148px); border-radius: 0 0 10px 10px; background: linear-gradient(to bottom, transparent 0%, rgba(8,10,11,.46) 38%, rgba(8,10,11,.9) 100%); pointer-events: none; transition: opacity 220ms ease; }
.site-more { position: absolute; z-index: 6; bottom: 23px; left: 50%; display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 10px; padding: 0 17px; transform: translateX(-50%); border: 1px solid color-mix(in srgb, var(--accent) 72%, white); border-radius: 999px; background: color-mix(in srgb, var(--accent) 35%, #101315); box-shadow: 0 4px 22px rgba(0,0,0,.35), 0 0 22px color-mix(in srgb, var(--accent) 22%, transparent); color: #fff; font: 600 10px 'DM Mono', monospace; letter-spacing: .04em; cursor: pointer; transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, opacity 180ms ease, transform 200ms ease; }
.site-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.site-more:hover { transform: translate(-50%, -2px); border-color: #fff; background: color-mix(in srgb, var(--accent) 52%, #101315); box-shadow: 0 6px 28px rgba(0,0,0,.42), 0 0 28px color-mix(in srgb, var(--accent) 38%, transparent); }
.site-more:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.site-preview.is-expanded .site-preview-fade, .site-preview.is-expanded .site-more { visibility: hidden; opacity: 0; pointer-events: none; }
.site-preview.is-expanded .site-more { display: none; }
.site-expand { justify-self: end; display: inline-flex; height: 28px; min-height: 28px; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--accent) 66%, white); border-radius: 999px; background: color-mix(in srgb, var(--accent) 20%, #17191b); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 20%, transparent); color: #fff; font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: .025em; line-height: 1; cursor: pointer; transition: border-color .2s ease, color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.site-expand:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 76%, white); background: color-mix(in srgb, var(--accent) 38%, #17191b); box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 40%, transparent); color: #fff; }
.site-expand:focus-visible, .site-collapse:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.site-expand svg { width: 13px; height: 13px; flex: 0 0 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.site-collapse { display: none; }
.site-preview.is-expanded { position: fixed !important; z-index: 10000; inset: 0; width: 100vw; height: 100svh; min-height: 100svh; overflow-x: hidden; overflow-y: auto; padding: 0; border: 0; border-radius: 0; background: #090b0d; box-shadow: none; opacity: 1; visibility: visible; animation: site-demo-open 260ms ease-out both; }
@keyframes site-demo-open { from { opacity: 0; } to { opacity: 1; } }
.site-preview.is-expanded .site-browser-bar { position: sticky; z-index: 30; top: 0; height: 48px; grid-template-columns: 1fr auto; padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,.09); background: rgba(9,11,13,.88); backdrop-filter: blur(18px); font-size: 9px; }
.site-preview.is-expanded .browser-address { border-color: rgba(255,255,255,.1); }
.site-preview.is-expanded .site-mockup { height: auto; min-height: calc(100svh - 48px); overflow: visible; }
.site-preview.is-expanded .site-mockup::after { height: min(100svh, 760px); }
.site-preview.is-expanded .site-expand { display: none; }
.site-preview.is-expanded .site-collapse { position: fixed; z-index: 40; top: max(14px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); display: inline-flex; min-height: 38px; align-items: center; gap: 9px; padding: 0 14px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: rgba(13,16,18,.88); box-shadow: 0 8px 28px rgba(0,0,0,.2); color: #f1f0ed; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .035em; cursor: pointer; backdrop-filter: blur(14px); }
.site-collapse svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.has-expanded-site { overflow: hidden !important; }
.has-expanded-site .stage.content-open[data-section="sites"] .content { overflow: visible; }
.demo-page { min-height: 100%; overflow: hidden; }
.demo-wrap { width: min(1240px, 86%); margin-inline: auto; }
.mock-nav { height: 68px; }
.mock-nav-action { display: inline-flex; align-items: center; gap: 9px; color: currentColor; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .08em; }
.mock-nav-action b { font-size: 14px; font-weight: 400; }
.demo-footer { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 7%; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .05em; }
.demo-footer .mock-brand { font-family: inherit !important; font-size: 11px !important; letter-spacing: .14em !important; }
.demo-page .demo-button { position: relative; display: inline-flex; min-width: 208px; min-height: 46px; align-items: center; justify-content: center; gap: 0; padding: 0 38px; border: 0; border-radius: 2px; background: #a45e43; color: #fffaf2; font: 600 10px 'DM Mono', monospace; letter-spacing: .04em; text-align: center; }
.demo-page .demo-button span { position: absolute; right: 15px; font-size: 15px; }
.demo-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 26px; }
.demo-caption { color: #81796f; font-size: 10px; }
.demo-proof { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 44px; color: #8b8378; font: 9px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.demo-section-copy { max-width: 520px; color: #666a64; font-size: 14px; line-height: 1.85; }
.demo-landing .mock-nav { border: 0; background: #f6f3ec; color: #30291f; }
.demo-landing .mock-brand { font-family: Georgia,serif; font-size: 20px; font-weight: 400; letter-spacing: .2em; }
.demo-landing .mock-links { color: #675d52; font-size: 10px; letter-spacing: .04em; }
.demo-landing .mock-nav-action { color: #8d503c; }
.demo-landing .demo-hero { position: relative; min-height: clamp(570px, 78svh, 820px); display: flex; align-items: center; overflow: hidden; background: radial-gradient(ellipse at 76% 45%,rgba(208,177,135,.34),transparent 33%),#f1eee6; color: #28251f; }
.demo-landing .demo-hero-grid { min-height: inherit; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 5%; padding-block: 54px; }
.demo-landing .mock-copy { width: auto; }
.demo-landing .mock-eyebrow { margin-bottom: 22px; color: #a26344; }
.demo-landing .mock-copy h1 { max-width: 650px; margin: 0; color: #28251f; font-family: 'Arial Narrow','Trebuchet MS',sans-serif; font-size: clamp(54px,7.5vw,104px); font-weight: 500; line-height: .94; letter-spacing: -.075em; }
.demo-landing .mock-copy > p:not(.mock-eyebrow) { max-width: 430px; margin-top: 20px; color: #625a4f; font-size: 15px; line-height: 1.75; }
.demo-landing .demo-button { background: #a45e43; }
.demo-landing .mock-art-landing { position: relative; top: auto; right: auto; width: min(100%,440px); height: clamp(330px,44vw,510px); justify-self: end; overflow: hidden; border-radius: 48% 48% 3px 3px; background: linear-gradient(155deg,#edbd91,#d47752 54%,#754e44); box-shadow: 0 28px 70px rgba(103,70,48,.17); }
.demo-landing .mock-art-landing::before { inset: 7%; border-color: rgba(255,255,255,.48); }
.demo-landing .art-orbit { top: 30%; border-color: rgba(255,255,255,.7); }
.demo-landing .art-sun { left: 28%; top: 18%; width: 46%; background: radial-gradient(circle at 35% 30%,#f7d9a8,#e68c55 72%); }
.demo-landing .art-object { position: absolute; left: 34%; bottom: 8%; width: 32%; height: 42%; border-radius: 48% 48% 14% 14%; background: linear-gradient(90deg,#8e6552,#e4c9a5 48%,#8b5c49); box-shadow: 18px 24px 45px rgba(76,47,36,.28); }
.demo-landing .mock-art-landing > small { position: absolute; left: 9%; bottom: 10%; color: rgba(255,255,255,.88); font: 8px/1.6 'DM Mono',monospace; letter-spacing: .14em; }
.demo-landing .demo-scroll-hint { position: absolute; bottom: 22px; left: 50%; color: #887e71; font: 8px 'DM Mono',monospace; letter-spacing: .16em; transform: translateX(-50%); }
.demo-scroll-hint span { padding-left: 8px; color: #a45e43; font-size: 13px; }
.demo-intro { padding-block: clamp(76px,10vw,132px); color: #30291f; }
.demo-intro > .mock-eyebrow { color: #a26344; }
.demo-intro > h2,.demo-story h2,.demo-cta h2 { max-width: 760px; margin: 14px 0 18px; font: 400 clamp(36px,5.3vw,68px)/1.02 Georgia,serif; letter-spacing: -.04em; }
.demo-intro > .demo-section-copy { max-width: 650px; }
.demo-feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 58px; }
.demo-feature-grid article { min-height: 150px; padding: 20px 0; border-top: 1px solid rgba(45,40,33,.2); }
.demo-feature-grid article > span { color: #aa6a4d; font: 10px 'DM Mono',monospace; }
.demo-feature-grid h3 { margin: 22px 0 8px; font: 400 20px Georgia,serif; }
.demo-feature-grid p { max-width: 270px; margin: 0; color: #777167; font-size: 12px; line-height: 1.7; }
.demo-story { padding-block: clamp(64px,9vw,118px); background: #dfd4c2; color: #30291f; }
.demo-story-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 10%; }
.demo-story-grid > div:last-child > .mock-eyebrow { color: #a26344; }
.demo-story-art { position: relative; min-height: 390px; overflow: hidden; background: linear-gradient(155deg,#c2956e,#775747); }
.story-sun { position: absolute; top: 9%; right: 12%; width: 58%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 32%,#f4d8a8,#bc7651 70%); }
.story-card { position: absolute; left: 10%; bottom: 10%; width: 65%; min-height: 205px; display: grid; align-content: space-between; padding: 20px; border: 1px solid rgba(255,255,255,.52); background: rgba(246,237,219,.78); color: #49382d; backdrop-filter: blur(10px); }
.story-card span { font: 8px 'DM Mono',monospace; letter-spacing: .14em; }
.story-card b { font: 400 29px/1.05 Georgia,serif; }
.story-card i { position: absolute; right: 18px; bottom: 18px; color: #a45e43; font-size: 25px; font-style: normal; }
.demo-story .demo-button { margin-top: 12px; }
.demo-quote { padding-block: clamp(78px,12vw,154px); text-align: center; color: #342c23; }
.demo-quote-mark { color: #b97554; font: 100px/.7 Georgia,serif; }
.demo-quote p { max-width: 760px; margin: 24px auto; font: 400 clamp(30px,4.7vw,58px)/1.08 Georgia,serif; }
.demo-quote small { color: #867a6b; font: 8px 'DM Mono',monospace; letter-spacing: .14em; }
.demo-cta { padding-block: clamp(70px,10vw,120px); background: #d9b18c; color: #30261f; }
.demo-cta-inner { display: grid; justify-items: start; }
.demo-cta .mock-eyebrow { color: #805038; }
.demo-cta .demo-button { margin-top: 18px; background: #594438; }
.demo-landing .demo-footer { background: #eee9df; color: #746b5e; }

.demo-corporate .mock-nav { border-bottom-color: #c8d2d5; background: #f3f5f3; color: #1f3038; }
.demo-corporate .mock-brand { font-size: 11px; letter-spacing: .19em; }
.demo-corporate .mock-links { color: #53636b; font-size: 10px; }
.demo-corporate .mock-nav-action { color: #2e6571; }
.demo-corp-hero { position: relative; min-height: clamp(560px,76svh,790px); overflow: hidden; padding: 7% 0 5%; background: #dbe4e4; color: #1f3038; }
.demo-corp-hero-inner { position: relative; min-height: inherit; }
.demo-corp-hero .mock-eyebrow,.demo-corp-about .mock-eyebrow,.demo-corp-services .mock-eyebrow,.demo-corp-project .mock-eyebrow,.demo-corp-contact .mock-eyebrow { color: #3c7180; }
.demo-corp-hero h1 { position: relative; z-index: 2; max-width: 860px; margin: 26px 0 0; color: #1f3038; font: 400 clamp(62px,9vw,124px)/.96 Arial,Helvetica,sans-serif; letter-spacing: -.075em; }
.demo-corp-intro { position: relative; z-index: 2; width: 45%; display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-top: 30px; }
.demo-corp-intro p { max-width: 285px; margin: 0; color: #52636a; font-size: 14px; line-height: 1.8; }
.demo-corporate .demo-button { flex: 0 0 auto; background: #2e6571; }
.demo-corp-hero .mock-building { right: 0; bottom: -32px; width: 48%; height: 48%; min-height: 300px; background: linear-gradient(180deg,transparent,#b5c8c9); }
.demo-corp-hero .mock-building i { border-color: rgba(47,91,103,.58); background: repeating-linear-gradient(180deg,transparent 0 18px,rgba(95,127,131,.27) 19px 20px),rgba(171,190,190,.48); }
.demo-corp-hero .mock-building b { background: #4d7d88; }
.demo-corp-hero .mock-building span { position: absolute; right: 0; bottom: 0; color: rgba(31,48,56,.64); font: 8px/1.5 'DM Mono',monospace; letter-spacing: .15em; }
.demo-location { position: absolute; left: 0; bottom: 4px; color: #6c7e80; font: 8px 'DM Mono',monospace; letter-spacing: .12em; }
.demo-location span { padding: 0 6px; color: #3c7180; }
.demo-corp-about { padding-block: clamp(75px,10vw,132px); background: #eff1ed; color: #1f3038; }
.demo-corp-about-grid { display: grid; grid-template-columns: .55fr 1fr 1fr; column-gap: 6%; row-gap: 32px; }
.demo-corp-about-grid > .mock-eyebrow { grid-row: span 2; }
.demo-corp-about h2,.demo-corp-services h2,.demo-corp-project h2,.demo-corp-contact h2 { margin: 0; font: 400 clamp(34px,5vw,62px)/1.04 Arial,Helvetica,sans-serif; letter-spacing: -.06em; }
.demo-corp-about .demo-section-copy { margin: 0; color: #586a70; }
.demo-corp-stats { grid-column: 2 / 4; display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; padding-top: 28px; border-top: 1px solid #c8d2d5; }
.demo-corp-stats div { display: grid; gap: 8px; }
.demo-corp-stats b { font: 400 40px Arial,sans-serif; letter-spacing: -.06em; }
.demo-corp-stats span { color: #698084; font: 8px 'DM Mono',monospace; letter-spacing: .11em; }
.demo-corp-services { padding-block: clamp(76px,10vw,130px); background: #e3e9e7; color: #1f3038; }
.demo-corp-section-heading { display: flex; align-items: start; justify-content: space-between; gap: 10%; margin-bottom: 60px; }
.demo-corp-section-heading .mock-eyebrow { flex: 0 0 22%; }
.demo-service-list { border-top: 1px solid #b9c8c8; }
.demo-service-list article { display: grid; grid-template-columns: 12% 1fr 30px; align-items: center; gap: 18px; padding: 24px 0; border-bottom: 1px solid #b9c8c8; }
.demo-service-list article > span { color: #3c7180; font: 10px 'DM Mono',monospace; }
.demo-service-list h3 { margin: 0 0 6px; font: 400 26px Arial,sans-serif; letter-spacing: -.04em; }
.demo-service-list p { margin: 0; color: #647579; font-size: 12px; }
.demo-service-list b { color: #3c7180; font-size: 19px; font-weight: 400; }
.demo-corp-project { padding-block: clamp(75px,10vw,128px); background: #f3f5f3; color: #1f3038; }
.demo-project-grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 9%; }
.demo-project-image { position: relative; min-height: 440px; overflow: hidden; background: linear-gradient(145deg,#c2d0cc,#718c8c); }
.demo-project-image::before { position: absolute; inset: 10%; content: ''; border: 1px solid rgba(255,255,255,.48); }
.project-building { position: absolute; left: 18%; right: 12%; bottom: 0; height: 78%; display: flex; align-items: end; gap: 4%; }
.project-building i { width: 27%; height: 75%; border: 1px solid rgba(31,58,61,.5); background: repeating-linear-gradient(180deg,transparent 0 25px,rgba(46,82,87,.28) 26px 27px),rgba(202,216,208,.45); }
.project-building i:nth-child(2) { height: 94%; }
.project-building b { position: absolute; bottom: 0; left: -12%; width: 120%; height: 1px; background: rgba(31,58,61,.55); }
.demo-project-image > span { position: absolute; left: 7%; bottom: 6%; color: #fff; font: 8px 'DM Mono',monospace; letter-spacing: .12em; }
.demo-corp-project .demo-section-copy { color: #586a70; }
.demo-corp-project .demo-button { margin-top: 12px; }
.demo-corp-contact { padding-block: clamp(80px,11vw,140px); background: #294e57; color: #eef2ec; }
.demo-corp-contact .demo-wrap { display: grid; justify-items: start; }
.demo-corp-contact .mock-eyebrow { color: #a6c6c3; }
.demo-corp-contact h2 { margin-top: 12px; }
.demo-corp-contact p:not(.mock-eyebrow) { color: #c6d2ce; font-size: 13px; }
.demo-corp-contact .demo-button { margin-top: 12px; background: #dce6df; color: #294e57; }
.demo-corporate .demo-footer { background: #1e3b42; color: #c4d0cb; }

.demo-commerce .mock-nav { border-bottom-color: #ddc7b2; background: #fbf5ec; color: #3b2925; }
.demo-commerce .mock-brand { font: 400 16px Georgia,serif; letter-spacing: .14em; }
.demo-commerce .mock-links { color: #755547; font: 10px 'Trebuchet MS',sans-serif; }
.demo-commerce .mock-nav-action { color: #a14f40; }
.demo-shop-hero { position: relative; min-height: clamp(570px,78svh,810px); overflow: hidden; padding: 5% 0 0; background: #f3e4d4; color: #3b2925; }
.demo-shop-grid { min-height: 500px; display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 6%; padding-bottom: 50px; }
.mock-shop-copy { max-width: 480px; }
.demo-commerce .mock-eyebrow { color: #a14f40; }
.mock-shop-copy h1 { max-width: 520px; margin: 0; color: #3b2925; font: italic 400 clamp(52px,7vw,94px)/.96 Georgia,'Times New Roman',serif; letter-spacing: -.065em; }
.mock-shop-copy > p:not(.mock-eyebrow) { max-width: 390px; margin-top: 20px; color: #755d50; font: 14px/1.8 'Trebuchet MS',sans-serif; }
.demo-commerce .demo-button { margin-top: 20px; background: #a14f40; }
.mock-shop-copy > small { display: block; max-width: 100%; margin-top: 15px; color: #8c7566; font: 11px/1.5 'Trebuchet MS',Arial,sans-serif; letter-spacing: .01em; }
.shop-hero-art { position: relative; min-height: 420px; overflow: hidden; background: linear-gradient(145deg,#ddbea1,#b87e61); }
.shop-hero-art::before { position: absolute; inset: 6%; content: ''; border: 1px solid rgba(255,255,255,.45); }
.shop-sun { position: absolute; top: -10%; right: 4%; width: 68%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 36% 34%,#f7d1a6,#c57a58 70%); }
.shop-vase { position: absolute; bottom: 7%; z-index: 1; width: 24%; height: 55%; border-radius: 46% 46% 16% 16%; background: linear-gradient(90deg,#844f40,#d29a76 48%,#8e5341); box-shadow: 17px 20px 34px rgba(71,42,31,.24); }
.vase-large { left: 29%; height: 68%; }
.vase-small { left: 57%; width: 20%; height: 45%; background: linear-gradient(90deg,#596359,#a3a08b 48%,#63675b); }
.shop-hero-art > span { position: absolute; z-index: 2; right: 6%; bottom: 7%; color: #fffaf0; font: 8px/1.6 'DM Mono',monospace; letter-spacing: .13em; text-align: right; }
.demo-marquee { position: relative; width: 100%; display: flex; justify-content: center; gap: 24px; padding: 17px 5%; background: #a14f40; color: #fff4e8; font: 8px 'DM Mono',monospace; letter-spacing: .12em; white-space: nowrap; }
.demo-marquee i { color: #edcba8; font-style: normal; }
.demo-shop-categories,.demo-shop-products { padding-block: clamp(66px,8vw,104px); color: #3b2925; }
.demo-shop-heading { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 30px; }
.demo-shop-heading h2 { margin: 8px 0 0; font: italic 400 clamp(30px,4vw,48px)/1.05 Georgia,serif; letter-spacing: -.045em; }
.demo-shop-heading > span { padding-bottom: 4px; color: #926a54; font: 8px 'DM Mono',monospace; letter-spacing: .08em; white-space: nowrap; }
.demo-category-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.category > div { position: relative; height: clamp(180px,28vw,330px); overflow: hidden; background: #dbc5af; }
.category > span { display: block; margin-top: 12px; color: #59483d; font: 9px 'DM Mono',monospace; letter-spacing: .1em; }
.category-ceramics > div { background: linear-gradient(145deg,#d7bda4,#a9785c); }
.category-ceramics i { position: absolute; left: 34%; bottom: 9%; width: 32%; height: 68%; border-radius: 44% 44% 18% 18%; background: linear-gradient(90deg,#94664e,#e4c7a6 48%,#95644c); box-shadow: 12px 18px 28px rgba(75,49,37,.2); }
.category-light > div { background: linear-gradient(145deg,#d9d9c9,#8f9880); }
.category-light i { position: absolute; left: 39%; top: 17%; width: 22%; height: 56%; border-radius: 50% 50% 12% 12%; background: linear-gradient(90deg,#7e846d,#e7d9a9 52%,#85876e); }
.category-light b { position: absolute; left: 49%; top: 70%; width: 2px; height: 19%; background: #656a5c; }
.category-textile > div { background: linear-gradient(145deg,#dbc5b8,#aa7770); }
.category-textile i { position: absolute; inset: 16% 23%; border: 1px solid rgba(255,255,255,.42); background: repeating-linear-gradient(45deg,rgba(245,221,199,.45) 0 8px,rgba(153,104,88,.28) 8px 16px); transform: rotate(-8deg); }
.demo-shop-products { background: #ece1d4; }
.demo-product-grid { position: static; width: 100%; height: auto; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.demo-product-grid .mock-product { gap: 8px; color: #4d3930; font: 11px 'Trebuchet MS',sans-serif; }
.demo-product-grid .mock-product > i { height: clamp(170px,24vw,280px); border-radius: 2px; background-color: #dac7b7; }
.demo-product-grid .mock-product > span { padding-top: 4px; }
.demo-product-grid .mock-product small { color: #846c5d; font-size: 10px; }
.product-four > i { background: #d7c8b9; }
.product-four > i::before { position: absolute; left: 12%; bottom: 12%; width: 76%; height: 65%; content: ''; background: repeating-linear-gradient(0deg,#c69c80 0 4px,#dec5ad 5px 11px); transform: rotate(-9deg); }
.demo-shop-editorial { padding-block: clamp(72px,9vw,118px); background: #f7f0e7; color: #3b2925; }
.demo-editorial-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 10%; }
.demo-editorial-grid h2,.demo-shop-newsletter h2 { margin: 10px 0 16px; font: italic 400 clamp(36px,5.5vw,68px)/1 Georgia,serif; letter-spacing: -.05em; }
.demo-editorial-grid .demo-section-copy { color: #755d50; font-family: 'Trebuchet MS',sans-serif; }
.demo-editorial-art { position: relative; min-height: 390px; overflow: hidden; background: #c9ac91; }
.editorial-object { position: absolute; left: 31%; top: 17%; width: 39%; height: 66%; border: 16px solid #705746; border-radius: 48% 48% 18% 18%; background: linear-gradient(90deg,#9b755b,#e1c5a1 50%,#997357); box-shadow: 16px 20px 32px rgba(71,42,31,.2); }
.demo-editorial-art > span { position: absolute; left: 7%; bottom: 7%; color: #fff7eb; font: 8px/1.7 'DM Mono',monospace; letter-spacing: .12em; }
.demo-shop-newsletter { padding-block: clamp(70px,9vw,112px); background: #7a5146; color: #fbf1e6; text-align: center; }
.demo-shop-newsletter .mock-eyebrow { color: #e6c4a6; }
.demo-shop-newsletter .demo-wrap { display: grid; justify-items: center; }
.demo-shop-newsletter h2 { margin: 12px 0; }
.demo-shop-newsletter > .demo-wrap > p:not(.mock-eyebrow) { max-width: 420px; color: #ead7c5; font: 12px/1.7 'Trebuchet MS',sans-serif; }
.demo-newsletter-field { width: min(440px,100%); display: flex; justify-content: space-between; gap: 16px; margin-top: 22px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.55); color: rgba(255,255,255,.72); font: 9px 'DM Mono',monospace; text-align: left; }
.demo-newsletter-field b { color: #fff4e8; font-weight: 400; white-space: nowrap; }
.demo-commerce .demo-footer { background: #e7d8c8; color: #725948; }

@media (max-width: 700px) {
  .site-preview.is-expanded .site-browser-bar { height: 44px; grid-template-columns: 52px 1fr 40px; padding: 0 10px; }
  .site-preview.is-expanded .browser-address { max-width: 60vw; overflow: hidden; padding: 4px 8px; text-overflow: ellipsis; white-space: nowrap; }
  .site-preview.is-expanded .site-collapse { top: auto; right: max(14px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); min-height: 44px; box-shadow: 0 10px 32px rgba(0,0,0,.28); }
  .demo-wrap { width: 88%; }
  .mock-nav { height: 54px; padding-inline: 6%; }
  .mock-links,.mock-nav-action { display: none; }
  .mock-menu { display: block; color: currentColor; font-size: 17px; }
  .demo-footer { min-height: 82px; flex-wrap: wrap; gap: 9px 20px; padding: 20px 6%; font-size: 8px; }
  .demo-footer > span:nth-child(2) { order: 3; flex-basis: 100%; }
  .demo-button { min-height: 44px; gap: 16px; padding-inline: 14px; font-size: 9px; }
  .demo-section-copy { font-size: 13px; }
  .demo-landing .mock-nav { height: 58px; }
  .demo-landing .mock-brand { font-size: 18px; }
  .demo-landing .demo-hero { min-height: 740px; align-items: start; }
  .demo-landing .demo-hero-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 64px; padding-bottom: 62px; }
  .demo-landing .mock-copy h1 { max-width: 520px; font-size: clamp(48px,13vw,76px); }
  .demo-landing .mock-copy > p:not(.mock-eyebrow) { max-width: 440px; font-size: 14px; }
  .demo-landing .demo-proof { gap: 12px 18px; margin-top: 26px; font-size: 8px; }
  .demo-landing .mock-art-landing { width: min(82%,330px); height: 300px; justify-self: center; }
  .demo-landing .demo-scroll-hint { bottom: 16px; width: 100%; text-align: center; font-size: 7px; }
  .demo-intro { padding-block: 64px; }
  .demo-intro > h2,.demo-story h2,.demo-cta h2 { font-size: clamp(35px,10vw,52px); }
  .demo-feature-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 34px; }
  .demo-feature-grid article { min-height: 0; padding: 15px 0; }
  .demo-feature-grid h3 { margin: 10px 0 5px; }
  .demo-story { padding-block: 54px; }
  .demo-story-grid,.demo-project-grid,.demo-editorial-grid { grid-template-columns: 1fr; gap: 34px; }
  .demo-story-art { min-height: 300px; }
  .story-card { min-height: 165px; }
  .demo-quote { padding-block: 68px; }
  .demo-quote-mark { font-size: 76px; }
  .demo-quote p { font-size: 34px; }
  .demo-cta { padding-block: 64px; }
  .demo-corp-hero { min-height: 730px; padding-top: 58px; }
  .demo-corp-hero h1 { max-width: 560px; margin-top: 22px; font-size: clamp(55px,14vw,84px); }
  .demo-corp-intro { width: 100%; align-items: start; flex-direction: column; gap: 15px; margin-top: 20px; }
  .demo-corp-intro p { max-width: 330px; font-size: 13px; }
  .demo-corp-hero .mock-building { right: -5%; bottom: 18px; width: 72%; height: 36%; min-height: 250px; }
  .demo-location { bottom: 0; font-size: 7px; }
  .demo-corp-about,.demo-corp-services,.demo-corp-project,.demo-corp-contact { padding-block: 64px; }
  .demo-corp-about-grid { grid-template-columns: 1fr; row-gap: 22px; }
  .demo-corp-about-grid > .mock-eyebrow { grid-row: auto; }
  .demo-corp-about h2,.demo-corp-services h2,.demo-corp-project h2,.demo-corp-contact h2 { font-size: clamp(36px,10vw,52px); }
  .demo-corp-stats { grid-column: 1; gap: 10px; padding-top: 20px; }
  .demo-corp-stats b { font-size: 31px; }
  .demo-corp-stats span { font-size: 7px; }
  .demo-corp-section-heading { flex-direction: column; gap: 16px; margin-bottom: 32px; }
  .demo-corp-section-heading .mock-eyebrow { flex-basis: auto; }
  .demo-service-list article { grid-template-columns: 34px 1fr 22px; gap: 8px; padding: 20px 0; }
  .demo-service-list h3 { font-size: 21px; }
  .demo-service-list p { max-width: 260px; font-size: 11px; line-height: 1.6; }
  .demo-project-image { min-height: 300px; }
  .demo-corp-project .demo-section-copy { font-size: 13px; }
  .demo-shop-hero { min-height: 800px; padding-top: 28px; }
  .demo-shop-grid { min-height: 700px; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 28px; padding-bottom: 0; }
  .mock-shop-copy h1 { max-width: 470px; font-size: clamp(48px,13vw,75px); }
  .mock-shop-copy > p:not(.mock-eyebrow) { font-size: 13px; }
  .mock-shop-copy > small { max-width: 32ch; font-size: 11px; }
  .shop-hero-art { width: 100%; min-height: 320px; }
  .demo-marquee { gap: 12px; padding-block: 14px; overflow: hidden; font-size: 7px; }
  .demo-shop-categories,.demo-shop-products { padding-block: 58px; }
  .demo-shop-heading { align-items: start; flex-direction: column; gap: 12px; margin-bottom: 22px; }
  .demo-shop-heading h2 { font-size: 34px; }
  .demo-shop-heading > span { font-size: 7px; }
  .demo-category-grid { gap: 10px; }
  .category > div { height: clamp(135px,44vw,220px); }
  .category > span { font-size: 7px; letter-spacing: .04em; }
  .demo-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 12px; }
  .demo-product-grid .mock-product > i { height: clamp(165px,55vw,250px); }
  .demo-product-grid .mock-product { font-size: 10px; }
  .demo-editorial-art { min-height: 300px; }
  .demo-editorial-grid h2,.demo-shop-newsletter h2 { font-size: 42px; }
  .demo-newsletter-field { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-expand,.site-more,.site-preview.is-expanded { transition: none !important; animation: none !important; }
}
@media (max-width: 390px) {
  .site-tabs { gap: 6px; }
  .site-guide { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .site-guide-facts { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .site-guide-complexity { grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; }
  .site-guide-meter { width: 76px; }
  .site-guide-complexity > p { grid-column: 1 / -1; }
  .site-preview { padding: 7px; }
  .site-browser-bar { gap: 7px; padding-inline: 10px; }
  .site-expand { gap: 6px; padding-inline: 10px; font-size: 8px; }
}