@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  color-scheme: dark;
  --bg: #0b0c0e;
  --surface: #141619;
  --text: #eeeef0;
  --muted: #a1a4ab;
  --line: #303236;
  --accent: #a4b4ff;
  --font: 'Manrope', Arial, sans-serif;
  --ease: cubic-bezier(.22,.7,.2,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 112px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent); color: #111318; }
button, input, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
a, button, input, textarea { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { border: 0; cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 500; }
p { font-size: 16px; line-height: 1.8; }
.wrap { width: calc(100% - 112px); max-width: 1440px; margin-inline: auto; }
.skip { position: absolute; top: -100px; left: 20px; background: var(--text); color: var(--bg); padding: 18px; z-index: 50; }
.skip:focus { top: 20px; }
.header { height: 96px; position: sticky; top: 0; z-index: 20; background: var(--bg); display: flex; justify-content: space-between; align-items: center; gap: 28px; border-bottom: 1px solid var(--line); }
.header::before { content: ''; position: absolute; inset: 0 -56px; background: var(--bg); z-index: -1; }
.brand { font-size: 27px; font-weight: 700; letter-spacing: -.075em; display: inline-flex; align-items: center; min-height: 44px; }
.brand-dot { color: var(--accent); }
.desktop-nav { display: flex; gap: 34px; color: #b0b2b8; font-size: 14px; }
.desktop-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; }
.desktop-nav a::after { content: ''; position: absolute; bottom: 4px; left: 0; right: 0; height: 1px; background: var(--text); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.desktop-nav a:hover::after, .desktop-nav a[aria-current='location']::after { transform: scaleX(1); }
.desktop-nav a[aria-current='location'] { color: var(--text); }
.header-actions { display: flex; gap: 14px; align-items: center; }
.header-cta { border: 1px solid #64666b; padding: 12px 22px; min-height: 44px; font-size: 14px; position: relative; }
.header-cta:hover { color: var(--accent); border-color: var(--accent); }
.menu-button { display: none; }
.hero { padding-top: 38px; }
.hero-topline { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .105em; color: #b1b3b9; line-height: 1.6; }
.hero-platforms { color: #8e929c; }
h1 { font-size: clamp(72px,10.7vw,164px); line-height: 1.075; letter-spacing: -.085em; margin-block: 54px 48px; }
.hero-line { display: block; }
.hero-line-offset { margin-left: 11%; }
.hero-accent { color: var(--accent); position: relative; }
.hero-accent::after { content: ''; position: absolute; left: .025em; right: -.035em; bottom: -.03em; height: 2px; background: currentColor; transform-origin: left; transform: scaleX(0); transition: transform .65s var(--ease); }
h1:hover .hero-accent::after { transform: scaleX(1); }
.hero-bottom { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 32px; align-items: start; margin: 56px 0 70px; }
.hero-aside { font-size: 12px; line-height: 1.7; letter-spacing: .08em; color: #8f929b; padding-top: 4px; }
.hero-description { font-size: 16px; color: #bcbec5; line-height: 1.85; }
.hero-bottom .button { justify-self: end; margin-top: 4px; }
.button { position: relative; display: inline-flex; min-height: 56px; align-items: center; justify-content: center; padding: 16px 25px; font-size: 14px; font-weight: 600; border-radius: 2px; isolation: isolate; overflow: hidden; }
.button::before { content: ''; position: absolute; inset: 0; background: var(--accent); transform: translateY(101%); transition: transform .35s var(--ease); z-index: -1; }
.button-primary { background: var(--text); color: #15171c; }
.button:hover::before, .button:focus-visible::before { transform: translateY(0); }
.hero-baseline { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 17px 0; }
.explore-link { font-size: 13px; min-height: 44px; display: flex; align-items: center; gap: 22px; }
.scroll-track { width: 1px; height: 24px; background: #373a43; display: block; position: relative; overflow: hidden; }
.scroll-track i { position: absolute; width: 1px; height: 12px; top: 0; background: var(--accent); transition: transform .4s var(--ease); }
.explore-link:hover .scroll-track i { transform: translateY(12px); }
.baseline-note { color: #8f929b; font-size: 12px; letter-spacing: .06em; }
.motion-button { display: flex; align-items: center; justify-content: center; gap: 9px; background: transparent; color: #a6a9b2; font-size: 12px; padding: 10px 0 10px 10px; min-height: 44px; min-width: 44px; }
.motion-icon { width: 17px; font-size: 16px; }
.section { padding-block: 120px; }
.section-heading { display: grid; grid-template-columns: 1fr 2fr; gap: 42px; margin-bottom: 58px; }
.section-heading > .eyebrow { padding-top: 9px; }
.section-heading h2 { font-size: clamp(36px,4.1vw,60px); line-height: 1.18; letter-spacing: -.06em; }
.subtle { color: #90939c; }
.section-heading > div > p { color: var(--muted); margin-top: 24px; }
.capabilities { border-top: 1px solid var(--line); }
.capability { position: relative; display: grid; grid-template-columns: 1fr 1.25fr .65fr; gap: 42px; align-items: start; border-bottom: 1px solid var(--line); padding: 46px 0; }
.capability::before { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.capability:hover::before, .capability:focus-within::before { transform: scaleX(1); }
.capability-title { transition: transform .35s var(--ease); }
.capability:hover .capability-title { transform: translateX(5px); }
.capability-number { font-size: 12px; letter-spacing: .08em; color: #9197a6; display: block; margin-bottom: 24px; }
.capability h3 { font-size: clamp(32px,3vw,44px); line-height: 1.16; letter-spacing: -.055em; }
.capability-detail { padding-top: 2px; }
.capability-detail p { color: #babdc6; font-size: 16px; max-width: 400px; }
.capability ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; color: #949aa7; font-size: 14px; line-height: 1.6; }
.service-link { align-self: end; justify-self: end; font-size: 13px; line-height: 1.5; border-bottom: 1px solid #5a606e; min-height: 44px; display: flex; align-items: center; color: #cdd2df; }
.service-link:hover { color: var(--accent); border-color: var(--accent); }
.studio { background: #d7dbe4; color: #202229; }
.studio-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 42px; }
.studio-label { display: flex; flex-direction: column; justify-content: space-between; }
.studio .eyebrow { color: #5b606b; }
.studio-caption { font-size: 12px; line-height: 1.7; letter-spacing: .08em; color: #5b606b; }
.studio h2 { font-size: clamp(40px,4.65vw,70px); line-height: 1.18; letter-spacing: -.062em; }
.studio-emphasis { color: #485eab; }
.studio-detail { display: grid; grid-template-columns: 1fr 2.2fr; gap: 32px; margin-top: 48px; }
.studio-detail-label { font-size: 12px; letter-spacing: .07em; color: #626874; line-height: 1.7; padding-top: 7px; }
.studio-detail p { color: #454b58; font-size: 16px; line-height: 1.85; }
.studio-detail p + p { margin-top: 20px; }
.studio-signature { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #a9aeba; margin-top: 45px; padding-top: 23px; color: #555d6c; font-size: 12px; }
.journey { display: grid; grid-template-columns: 1fr 1.15fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.journey-tabs { display: flex; flex-direction: column; justify-content: center; padding: 25px 54px 25px 0; }
.journey-tabs button { text-align: left; position: relative; display: flex; align-items: center; gap: 22px; background: transparent; color: #969ca9; font-size: clamp(18px,1.7vw,25px); letter-spacing: -.035em; line-height: 1.4; padding: 26px 0; border-bottom: 1px solid var(--line); transition: color .2s ease; }
.journey-tabs button:last-child { border-bottom: 0; }
.journey-tabs button > span { font-size: 12px; letter-spacing: 0; color: #7f8799; }
.journey-tabs button::before { content: ''; position: absolute; left: -17px; width: 2px; top: 25px; bottom: 25px; background: var(--accent); transform: scaleY(0); transform-origin: center; transition: transform .25s var(--ease); }
.journey-tabs button[aria-selected='true'] { color: var(--text); }
.journey-tabs button[aria-selected='true'] > span { color: var(--accent); }
.journey-tabs button[aria-selected='true']::before { transform: scaleY(1); }
.journey-panels { display: grid; border-left: 1px solid var(--line); background: #14161b; }
.journey-panel { grid-area: 1 / 1; padding: 45px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .35s var(--ease), visibility 0s .2s; }
.journey-panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.panel-kicker { font-size: 12px; color: var(--accent); letter-spacing: .055em; }
.journey-panel h3 { font-size: clamp(27px,2.6vw,36px); line-height: 1.3; letter-spacing: -.04em; margin: 25px 0 23px; }
.journey-panel p { color: #a8aebb; font-size: 16px; }
.journey-tags { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 26px 0 18px; font-size: 12px; color: #929aac; }
.journey-tags > span:not(:last-child)::after { content: '/'; margin-left: 18px; color: #545d70; }
.text-link { font-size: 14px; color: #d4d9e3; text-decoration: underline; text-underline-offset: 8px; text-decoration-color: #545d70; display: inline-flex; align-items: center; min-height: 44px; }
.text-link:hover { text-decoration-color: var(--accent); }
.contact { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12%; padding-top: 10px; }
.contact h2 { font-size: clamp(62px,6.9vw,104px); letter-spacing: -.07em; line-height: 1.1; margin: 29px 0 35px; }
.contact h2 > span { color: var(--accent); }
.contact-intro > p:not(.eyebrow) { max-width: 370px; color: var(--muted); }
.contact-intro > .contact-invite { margin-top: 20px; color: var(--text) !important; }
form { padding-top: 6px; }
fieldset { padding: 0; margin: 0 0 28px; border: 0; }
legend, .field { font-size: 14px; color: #b7bdc9; }
.project-types { display: flex; gap: 10px; margin-top: 16px; }
.project-types label { flex: 1; position: relative; }
.project-types input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.project-types span { display: block; padding: 14px; text-align: center; border: 1px solid #414752; font-size: 14px; cursor: pointer; transition: background-color .15s ease; }
.project-types input:checked + span { background: #d7deef; color: #202532; border-color: #d7deef; }
.project-types input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 4px; }
.field { display: block; margin-bottom: 25px; }
.field input, .field textarea { display: block; width: 100%; border: 0; border-bottom: 1px solid #3f4550; border-radius: 0; background: transparent; padding: 14px 0; font-size: 16px; color: var(--text); line-height: 1.6; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #888f9c; }
.form-note { font-size: 12px; line-height: 1.65; color: #929aaa; margin-top: 17px; }
#form-result { border-top: 1px solid var(--line); font-size: 14px; line-height: 1.7; margin-top: 20px; padding-top: 16px; color: #b8c7ee; overflow-wrap: anywhere; }
.footer { border-top: 1px solid var(--line); padding-top: 38px; }
.footer-top { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.footer-top p { font-size: 14px; color: #9cA2af; line-height: 1.7; }
.back-top { display: inline-flex; min-height: 44px; align-items: center; font-size: 13px; color: #b7bfce; text-decoration: underline; text-underline-offset: 7px; text-decoration-color: #545d70; }
.footer-wordmark { font-size: clamp(72px,16vw,242px); letter-spacing: -.09em; font-weight: 500; line-height: 1.25; text-align: center; color: #b9bec8; margin: 42px 0 30px; }
.footer-wordmark > span { color: var(--accent); }
.footer-bottom { border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 24px; font-size: 12px; color: #969daa; padding: 25px 0 32px; line-height: 1.6; }
html.motion-paused { scroll-behavior: auto; }
html.motion-paused *, html.motion-paused *::before, html.motion-paused *::after { animation: none !important; transition: none !important; }
@media (min-width: 1700px) { .hero { padding-top: 48px; } h1 { margin-block: 68px 55px; } }
@media (max-width: 1100px) {
  .wrap { width: calc(100% - 72px); }
  .header { height: 84px; }
  .header::before { inset-inline: -36px; }
  .desktop-nav { gap: 23px; }
  .hero-bottom { grid-template-columns: 1.35fr 1fr; }
  .hero-aside { display: none; }
  .hero-platforms { font-size: 12px; }
  h1 { font-size: 10.8vw; }
  .hero-line-offset { margin-left: 7%; }
  .section { padding-block: 92px; }
  .section-heading, .studio-grid { grid-template-columns: .85fr 2fr; gap: 30px; }
  .capability { grid-template-columns: 1fr 1.1fr; gap: 30px; }
  .service-link { grid-column: 2; justify-self: start; }
  .capability h3 { font-size: 38px; }
  .capability-detail p { max-width: none; }
  .journey-tabs { padding-right: 34px; }
  .journey-panel { padding: 33px; }
  .contact { gap: 8%; padding-top: 0; }
  .baseline-note { display: none; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 104px; }
  .wrap { width: calc(100% - 40px); }
  .header { min-height: 78px; height: auto; padding-block: 17px; flex-wrap: wrap; gap: 0; }
  .header::before { inset-inline: -20px; }
  .brand { font-size: 25px; }
  .desktop-nav { display: none; }
  .header-cta { font-size: 13px; padding: 11px 16px; }
  .header-actions { gap: 5px; }
  .menu-button { background: transparent; color: #b7bfce; font-size: 13px; display: block; min-height: 44px; min-width: 52px; padding: 10px 0 10px 13px; }
  #mobile-nav:not([hidden]) { width: 100%; display: grid; padding-top: 17px; }
  #mobile-nav a { padding: 16px 0; border-top: 1px solid var(--line); font-size: 16px; }
  .hero { padding-top: 30px; }
  .hero-platforms { display: none; }
  .eyebrow { font-size: 12px; letter-spacing: .055em; }
  h1 { font-size: clamp(42px,10.7vw,81px); line-height: 1.12; letter-spacing: -.075em; margin-block: 46px 37px; }
  .hero-line-offset { margin-left: 0; }
  .hero-bottom { grid-template-columns: 1fr; gap: 26px; margin: 35px 0 40px; }
  .hero-description { font-size: 16px; max-width: 440px; }
  .desktop-break { display: none; }
  .hero-bottom .button { justify-self: start; margin: 0; }
  .hero-baseline { padding-block: 10px; gap: 14px; }
  .explore-link { gap: 13px; font-size: 12px; }
  .motion-button { font-size: 12px; gap: 6px; }
  .section { padding-block: 68px; }
  .section-heading { grid-template-columns: 1fr; gap: 24px; margin-bottom: 38px; }
  .section-heading > .eyebrow { padding: 0; }
  .section-heading h2 { font-size: clamp(33px,6vw,43px); line-height: 1.2; }
  .section-heading > div > p { margin-top: 20px; }
  .capability { grid-template-columns: 1fr; gap: 25px; padding-block: 34px; }
  .capability-number { margin-bottom: 17px; }
  .capability h3 { font-size: 38px; }
  .capability h3 br { display: none; }
  .capability-detail p { max-width: 520px; }
  .capability ul { margin-top: 20px; }
  .service-link { grid-column: 1; }
  .studio-grid { grid-template-columns: 1fr; gap: 30px; }
  .studio-caption { display: none; }
  .studio h2 { font-size: clamp(34px,6.8vw,50px); }
  .studio-detail { grid-template-columns: 1fr; margin-top: 29px; }
  .studio-detail-label { display: none; }
  .studio-signature { margin-top: 30px; gap: 15px; }
  .journey { grid-template-columns: 1fr; }
  .journey-tabs { padding: 0 0 12px; }
  .journey-tabs button { padding: 22px 0 22px 14px; gap: 20px; font-size: 20px; }
  .journey-tabs button::before { left: 0; }
  .journey-panels { border-left: 0; }
  .journey-panel { padding: 30px 20px; }
  .journey-panel h3 { font-size: 28px; }
  .journey-tags { gap: 8px 12px; }
  .journey-tags > span:not(:last-child)::after { margin-left: 12px; }
  .contact { grid-template-columns: 1fr; gap: 40px; padding-top: 0; }
  .contact h2 { font-size: clamp(56px,12vw,82px); margin: 24px 0 28px; }
  .contact-intro > p:not(.eyebrow) { max-width: 460px; }
  .footer-top { flex-wrap: wrap; }
  .footer-top p { font-size: 12px; }
  .back-top { width: 100%; }
  .footer-wordmark { font-size: 16vw; letter-spacing: -.08em; margin: 20px 0; }
  .footer-bottom { flex-wrap: wrap; gap: 15px; }
  .footer-bottom > span:nth-child(2) { display: none; }
}
@media (max-width: 360px) {
  .wrap { width: calc(100% - 32px); }
  .header::before { inset-inline: -16px; }
  .brand { font-size: 23px; }
  .header-cta { padding-inline: 12px; }
  h1 { font-size: 39px; }
  .capability h3 { font-size: 33px; }
  .motion-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Visual direction: graphite, architectural photography, interactive product studies. */
:root { --bg: #111110; --surface: #1a1a18; --text: #f3f0e9; --muted: #aaa9a1; --line: #343431; --accent: #f59172; --ease: cubic-bezier(.22,.7,.2,1); }
body { background: var(--bg); }
.header { height: 88px; border-color: #32322e; }
.brand { letter-spacing: -.065em; }
.desktop-nav { gap: 26px; font-size: 13px; color: #c0beb6; }
.header-cta { border-radius: 40px; border-color: #5b5a54; padding: 11px 23px; }
.button { border-radius: 40px; min-height: 54px; padding-inline: 27px; }
.button-primary { background: var(--accent); color: #1d1714; }
.button::before { background: var(--text); }
.hero { padding: 0; }
.hero-stage { min-height: 674px; position: relative; overflow: hidden; isolation: isolate; }
.hero-image, .hero-shade { position: absolute; inset: 0; z-index: -2; }
.hero-image { overflow: hidden; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: 76% 53%; opacity: .77; animation: settle-in 1800ms var(--ease) both; }
.hero-shade { z-index: -1; background: linear-gradient(90deg,#111110 2%,rgba(17,17,16,.86) 25%,rgba(17,17,16,.22) 65%,rgba(17,17,16,.12)),linear-gradient(0deg,#111110 0%,transparent 30%,rgba(17,17,16,.24) 100%); }
.hero-inner { padding-block: 35px 44px; }
.hero-topline { margin-bottom: 59px; }
.hero-topline .eyebrow { color: #cccac3; font-size: 11px; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin: 0 8px 2px 0; }
h1 { font-size: clamp(64px,8.15vw,132px); line-height: 1.015; letter-spacing: -.072em; font-weight: 500; margin: 0; }
h1 em { font-family: Georgia,'Times New Roman',serif; font-weight: 400; letter-spacing: -.065em; color: var(--accent); }
.hero-bottom { display: flex; justify-content: space-between; gap: 44px; align-items: end; margin: 39px 0 0; }
.hero-description { font-size: 16px; line-height: 1.75; color: #c9c7c1; text-wrap: pretty; }
.hero-bottom .button { margin-top: 25px; }
.hero-side-note { text-align: right; padding-bottom: 8px; }
.hero-side-note > span { font-size: 12px; line-height: 1.75; letter-spacing: .12em; }
.hero-side-note p { font-size: 11px; color: #b1aea6; margin-top: 16px; }
.hero-baseline { border-top: 0; padding-block: 12px; }
.baseline-note { font-size: 10px; letter-spacing: .11em; color: #aaa89f; }
.motion-button { color: #b8b6ae; }
@keyframes settle-in { from { transform: scale(1.04); } to { transform: scale(1); } }
.section { padding-block: 115px; }
.eyebrow { color: #aaa89f; font-size: 11px; letter-spacing: .11em; }
.explorations { padding-bottom: 44px; }
.exploration-heading { display: flex; justify-content: space-between; align-items: end; gap: 50px; margin-bottom: 46px; }
.exploration-heading h2 { font-size: clamp(36px,4.35vw,65px); line-height: 1.09; letter-spacing: -.055em; margin-top: 27px; }
.exploration-heading em { font-family: Georgia,'Times New Roman',serif; font-weight: 400; color: #c4c1b7; }
.exploration-heading > p { font-size: 13px; line-height: 1.85; color: #bcbab2; padding-bottom: 5px; }
.exploration-heading > p > span { color: #99978e; font-size: 11px; }
.study-grid { display: grid; grid-template-columns: 1fr 1.38fr 1fr; align-items: start; gap: 19px; }
.study { min-width: 0; }
.study-stage { position: relative; height: 650px; overflow: hidden; border-radius: 3px; isolation: isolate; }
.canvas-label { position: absolute; top: 25px; left: 23px; z-index: 2; font-size: 9px; letter-spacing: .13em; font-weight: 600; }
.canvas-note { position: absolute; bottom: 23px; right: 22px; font-size: 11px; line-height: 1.5; font-weight: 500; }
.mobile-stage { background: #c6c2b3; color: #3b4032; }
.phone-interface { position: absolute; width: 257px; left: 50%; top: 83px; margin-left: -128.5px; border: 6px solid #f7f5ec; border-radius: 31px; padding: 10px 17px 12px; background: #f0efdf; color: #39452e; box-shadow: 4px 25px 38px #40402a38; transform: rotate(-7deg); transition: transform .65s var(--ease); }
.phone-status { display: flex; justify-content: space-between; font-size: 8px; font-weight: 700; padding: 0 3px; margin-bottom: 19px; }
.phone-top { display: flex; justify-content: space-between; align-items: center; }
.phone-wordmark { font-size: 19px; line-height: .91; font-weight: 700; letter-spacing: -.08em; }
.phone-wordmark em { font-family: Georgia,serif; font-weight: 400; font-size: 23px; }
.day-label { text-align: right; font-size: 8px; line-height: 1.65; }
.habit-heading { margin-top: 25px; }
.habit-heading > p { font-size: 7px; font-weight: 600; letter-spacing: .11em; }
.habit-heading h3 { font-size: 31px; line-height: 1.05; letter-spacing: -.06em; margin-top: 8px; }
.habit-heading em { font-family: Georgia,serif; font-weight: 400; }
.habit-progress { display: flex; justify-content: space-between; gap: 6px; font-size: 7px; margin-top: 21px; }
.habit-track { height: 3px; background: #d7d9c6; margin: 9px 0 9px; border-radius: 5px; overflow: hidden; }
.habit-track > span { display: block; height: 100%; width: 100%; background: #788657; transform: scaleX(.333333); transform-origin: left; transition: transform .35s var(--ease); }
.habit-item { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 52px; text-align: left; padding: 8px 0; color: #36432c; background: transparent; border-bottom: 1px solid #d5d9c3; }
.habit-item > span:nth-child(2) { font-size: 11px; font-weight: 600; }
.habit-item small { display: block; font-size: 8px; font-weight: 400; color: #69725a; margin-top: 3px; }
.habit-check { flex: 0 0 19px; height: 19px; border: 1px solid #9aa17d; border-radius: 50%; display: grid; place-items: center; }
.habit-item[aria-pressed='true'] .habit-check { background: #657548; border-color: #657548; color: white; }
.habit-item[aria-pressed='true'] .habit-check::after { content: '✓'; font-size: 11px; }
.habit-duration { margin-left: auto; white-space: nowrap; font-size: 6px; }
.phone-bottom { display: flex; flex-direction: column; align-items: center; padding-top: 13px; gap: 13px; font-size: 7px; color: #778165; }
.home-indicator { height: 3px; width: 68px; background: #46503e; border-radius: 5px; }
.phone-interface :focus-visible { outline-color: #485733; outline-offset: 2px; }
.mobile-stage .canvas-note { right: 18px; bottom: 17px; font-size: 9px; text-align: right; }
.saas-study { padding-top: 56px; }
.saas-stage { background: #292d40; color: #b9bfd8; height: 650px; }
.workspace-interface { position: absolute; top: 67px; left: 26px; width: calc(100% - 52px); min-width: 348px; padding: 20px; background: #171924; border: 1px solid #434759; border-radius: 9px; color: #eaedf6; transform: perspective(1200px) rotateY(-4deg) rotateZ(3deg); box-shadow: 0 25px 35px #0a0b1b55; transition: transform .65s var(--ease); }
.workspace-header { display: flex; align-items: center; justify-content: space-between; }
.workspace-brand { font-size: 11px; font-weight: 600; letter-spacing: -.05em; }
.workspace-brand > span { color: #929cde; }
.workspace-avatar { width: 23px; height: 23px; display: grid; place-items: center; background: #3c435b; border-radius: 50%; font-size: 9px; }
.workspace-path { font-size: 8px; color: #acb0c6; margin-top: 24px; }
.workspace-path > span { padding-inline: 5px; color: #6a7087; }
.workspace-title { display: flex; justify-content: space-between; align-items: end; gap: 15px; margin-block: 12px 25px; }
.workspace-title h3 { font-size: 27px; line-height: 1.13; letter-spacing: -.055em; }
.live-pill { font-size: 7px; white-space: nowrap; border: 1px solid #444b4d; background: #252f2c; color: #c0d1c1; padding: 5px 7px; border-radius: 15px; margin-bottom: 2px; }
.live-pill i, .workspace-footer i { display: inline-block; background: #a8b797; width: 4px; height: 4px; border-radius: 50%; margin-right: 3px; vertical-align: middle; }
.workspace-view-switch { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid #35384a; padding-bottom: 10px; }
.workspace-view-switch button { background: transparent; color: #aeb3ca; font-size: 9px; min-width: 46px; min-height: 34px; border-radius: 4px; padding: 6px 12px; }
.workspace-view-switch button[aria-pressed='true'] { background: #363950; color: #eef0ff; }
.workspace-view-switch > span { margin-left: auto; font-size: 7px; letter-spacing: .08em; color: #999eb4; }
.task-board { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 17px; min-height: 159px; }
.column-label { display: flex; gap: 3px; justify-content: space-between; font-size: 6px; color: #b3b7cd; margin-bottom: 10px; }
.column-label > span:last-child { color: #80879f; }
.task-card { border: 1px solid #393d50; border-radius: 5px; padding: 11px 8px 9px; min-height: 132px; background: #1e2130; }
.task-category { font-size: 5.5px; letter-spacing: .03em; color: #bbc1de; }
.task-card h4 { font-size: 11px; line-height: 1.32; letter-spacing: -.035em; margin: 12px 0 7px; font-weight: 500; }
.task-card p { font-size: 6px; line-height: 1.5; color: #a3a9c1; min-height: 18px; }
.task-foot { display: flex; gap: 2px; justify-content: space-between; border-top: 1px solid #383d50; margin-top: 14px; padding-top: 8px; font-size: 5px; color: #b9bfd5; }
.active-task { background: #363b59; border-color: #737eae; }
.active-task .task-category { color: #d1d5fa; }
.task-board[data-view='list'] { grid-template-columns: 1fr; gap: 6px; }
.task-board[data-view='list'] .task-column { display: contents; }
.task-board[data-view='list'] .column-label { display: none; }
.task-board[data-view='list'] .task-card { display: grid; grid-template-columns: 61px 1fr 66px; align-items: center; min-height: 47px; gap: 12px; padding: 8px 10px; }
.task-board[data-view='list'] .task-card h4 { margin: 0; font-size: 9px; }
.task-board[data-view='list'] .task-card h4 br { display: none; }
.task-board[data-view='list'] .task-card p { display: none; }
.task-board[data-view='list'] .task-foot { padding: 0; margin: 0; border: 0; }
.workspace-footer { display: flex; justify-content: space-between; font-size: 6px; color: #acb2c7; margin-top: 16px; }
.workspace-interface :focus-visible { outline-color: #b9c2ff; outline-offset: 2px; }
.saas-stage .canvas-note { left: 24px; bottom: 19px; font-size: 10px; }
.campaign-stage { background: #f18c6c; color: #2b2420; transition: background-color .4s ease,color .4s ease; }
.campaign-composition { padding: 66px 28px 24px; }
.campaign-brand { font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: -.06em; display: block; }
.campaign-headlines { display: grid; margin-top: 22px; }
.campaign-headline { grid-area: 1/1; font-size: clamp(64px,5.7vw,88px); line-height: .94; letter-spacing: -.07em; font-weight: 600; }
.campaign-headline em { font-family: Georgia,serif; font-weight: 400; }
.campaign-headline > span { color: #f6d7c9; }
.campaign-bottom { display: flex; justify-content: space-between; gap: 8px; align-items: end; margin-top: 26px; }
.campaign-bottom > span { font-size: 7px; line-height: 1.5; font-weight: 600; letter-spacing: .045em; }
.creative-switch { position: absolute; bottom: 20px; left: 23px; right: 23px; display: flex; align-items: center; gap: 5px; border-top: 1px solid #a7574155; padding-top: 12px; }
.creative-switch > span { font-size: 7px; letter-spacing: .1em; margin-right: auto; }
.creative-switch button { width: 35px; height: 35px; background: transparent; border: 1px solid #714a3c88; color: inherit; border-radius: 50%; font-size: 10px; }
.creative-switch button[aria-pressed='true'] { background: #2b2420; color: #f8d8c7; border-color: #2b2420; }
.campaign-stage :focus-visible { outline-color: #2b2420; outline-offset: 3px; }
.campaign-stage[data-campaign='b'] { background: #d6de8a; color: #303819; }
.campaign-stage[data-campaign='b'] .campaign-headline > span { color: #7d8b35; }
.campaign-stage[data-campaign='b'] .creative-switch button[aria-pressed='true'] { background: #303819; color: #eff2d0; }
.study-caption { display: flex; justify-content: space-between; align-items: start; gap: 14px; padding-top: 19px; }
.study-caption > div { display: flex; gap: 9px; align-items: baseline; }
.study-number { color: #8f8d85; font-size: 9px; }
.study-caption h3 { font-size: 12px; line-height: 1.6; letter-spacing: -.01em; }
.study-caption > span { color: #99978e; font-size: 9px; white-space: nowrap; padding-top: 3px; }
.exploration-footnote { display: flex; gap: 30px; justify-content: space-between; padding-top: 38px; font-size: 9px; line-height: 1.7; color: #95938a; letter-spacing: .055em; }
.section-heading h2 { letter-spacing: -.05em; }
.subtle { color: #939188; }
.capability { padding-block: 42px; }
.capability-number { color: var(--accent); font-size: 10px; }
.capability-detail p { color: #c4c1b8; }
.capability ul { color: #aaa89f; }
.capability h3 { font-size: clamp(32px,3.25vw,48px); }
.service-link { color: #d4d0c7; border-color: #777369; }
.studio { color: var(--text); background: #1c1d19; border-top: 1px solid #383a32; border-bottom: 1px solid #383a32; }
.studio-grid { grid-template-columns: 1fr 1.5fr; gap: 12%; }
.studio .eyebrow { color: #a5a99a; }
.studio-manifesto { display: flex; flex-direction: column; font-size: clamp(30px,4.2vw,68px); line-height: 1.14; font-weight: 600; letter-spacing: -.065em; margin-block: 50px; }
.studio-manifesto > span:nth-child(1) { color: #d5d9c6; }
.studio-manifesto > span:nth-child(2) { color: #899276; }
.studio-manifesto > span:nth-child(3) { color: #555e45; }
.studio-caption { color: #9da290; font-size: 10px; }
.studio h2 { font-size: clamp(40px,4.1vw,62px); }
.studio-emphasis { color: #c9d5a6; font-family: Georgia,serif; font-style: italic; }
.studio-detail { grid-template-columns: 1fr; margin-top: 32px; }
.studio-detail-label { display: none; }
.studio-detail p { color: #b3b7a7; }
.studio-signature { color: #adb39d; border-color: #424738; font-size: 11px; }
.journey-panels { background: #1c1c19; }
.journey-tabs button { color: #aaa89f; }
.journey-tabs button > span { color: #97948b; }
.journey-panel p { color: #b1aea4; }
.journey-tags { color: #a39f93; }
.text-link { color: #dfdacd; text-decoration-color: #726a5c; }
.panel-kicker { font-size: 10px; }
.contact { padding-top: 20px; }
.contact h2 > span { color: var(--accent); font-family: Georgia,serif; font-style: italic; letter-spacing: -.06em; }
legend, .field { color: #c4bfb3; }
.project-types span { border-color: #4e4b41; border-radius: 4px; }
.project-types input:checked + span { background: #e9e2cf; border-color: #e9e2cf; color: #302c23; }
.field input, .field textarea { border-color: #4d493f; }
.field input::placeholder, .field textarea::placeholder, .form-note { color: #a19b8f; }
#form-result { color: #e9d4ba; }
.footer-wordmark { color: #e3ded1; letter-spacing: -.077em; }
.footer-top p, .back-top, .footer-bottom { color: #b4ae9f; }
.photo-credit { font-size: 10px; line-height: 1.6; color: #9b9587; padding: 0 0 25px; }
.photo-credit a { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .mobile-stage:hover .phone-interface, .mobile-stage:focus-within .phone-interface { transform: rotate(-3deg) translateY(-6px); }
  .saas-stage:hover .workspace-interface, .saas-stage:focus-within .workspace-interface { transform: perspective(1200px) rotateY(0deg) rotateZ(0deg) translateY(-5px); }
}
@media (min-width: 1700px) {
  .hero-inner { padding-block: 45px 62px; }
  .hero-stage { min-height: 770px; }
  .hero-topline { margin-bottom: 72px; }
  .hero-bottom { margin-top: 51px; }
  .study-stage { height: 670px; }
  .phone-interface { top: 93px; }
  .workspace-interface { top: 107px; }
  .campaign-headlines { margin-top: 39px; }
}
@media (max-width: 1200px) {
  .study-grid { grid-template-columns: 1fr 1.15fr; gap: 26px; }
  .campaign-study { grid-column: 1 / -1; }
  .campaign-stage { height: 340px; }
  .campaign-composition { display: grid; grid-template-columns: .6fr 2fr .6fr; align-items: start; gap: 28px; padding: 67px 35px; }
  .campaign-headlines { margin: 0; }
  .campaign-headline { font-size: 58px; max-width: 360px; }
  .campaign-headline br:nth-of-type(odd) { display: none; }
  .campaign-headline br:nth-of-type(odd)::after { content: ' '; }
  .campaign-bottom { flex-direction: column; margin-top: 5px; gap: 25px; align-items: start; }
  .creative-switch { left: auto; width: 180px; right: 30px; bottom: 26px; }
  .saas-study { padding-top: 48px; }
  .study-caption h3 { font-size: 13px; }
  .study-caption > span { font-size: 10px; }
}
@media (max-width: 1000px) {
  .desktop-nav { gap: 17px; font-size: 12px; }
  .header { gap: 20px; }
  .hero-stage { min-height: 625px; }
  .hero-platforms { display: none; }
  h1 { font-size: 9.1vw; }
  .hero-topline { margin-bottom: 75px; }
  .hero-bottom { margin-top: 45px; }
  .hero-side-note { max-width: 150px; }
  .hero-side-note > span { font-size: 10px; }
  .hero-side-note p { font-size: 9px; }
  .exploration-heading { align-items: start; flex-direction: column; gap: 23px; }
  .exploration-heading h2 { font-size: 49px; }
  .study-grid { gap: 18px; }
  .workspace-interface { left: 17px; width: calc(100% - 34px); min-width: 285px; padding: 15px; }
  .workspace-title h3 { font-size: 24px; }
  .workspace-title { gap: 7px; }
  .workspace-title .live-pill { display: none; }
  .task-card { padding-inline: 5px; }
  .task-card h4 { font-size: 10px; }
  .study-caption { flex-direction: column; gap: 4px; }
  .study-caption > span { padding-left: 21px; }
  .studio-grid { gap: 8%; }
  .studio h2 { font-size: 40px; }
}
@media (max-width: 760px) {
  .header { height: auto; min-height: 78px; gap: 0; }
  .header-cta { padding-inline: 17px; }
  .hero-inner { padding-block: 27px 31px; }
  .hero-stage { min-height: 650px; }
  .hero-image img { object-position: 64% 50%; opacity: .59; }
  .hero-shade { background: linear-gradient(90deg,rgba(17,17,16,.82),rgba(17,17,16,.14)),linear-gradient(0deg,#111110 0%,rgba(17,17,16,.32) 50%,rgba(17,17,16,.2) 100%); }
  .hero-topline { margin-bottom: 93px; }
  .hero-topline .eyebrow { font-size: 9px; letter-spacing: .065em; }
  h1 { font-size: clamp(48px,10.1vw,77px); line-height: 1.075; letter-spacing: -.067em; }
  .hero-bottom { display: block; margin-top: 32px; }
  .hero-description { font-size: 14px; max-width: 360px; }
  .hero-description br { display: none; }
  .hero-bottom .button { margin-top: 23px; font-size: 13px; }
  .hero-side-note { display: none; }
  .hero-baseline { padding-block: 9px; }
  .section { padding-block: 77px; }
  .explorations { padding-bottom: 18px; }
  .exploration-heading { gap: 20px; margin-bottom: 30px; }
  .exploration-heading h2 { font-size: clamp(34px,6.5vw,49px); margin-top: 23px; }
  .exploration-heading > p { font-size: 12px; }
  .exploration-heading > p > span { font-size: 10px; }
  .study-grid { grid-template-columns: 1fr; gap: 31px; }
  .study-stage { height: 650px; }
  .study-caption { flex-direction: row; gap: 10px; padding-top: 16px; }
  .study-caption h3 { font-size: 12px; }
  .study-caption > span { padding-left: 0; font-size: 9px; }
  .saas-study { padding: 0; }
  .phone-interface { top: 69px; transform: rotate(-4deg); }
  .canvas-label { font-size: 9px; }
  .canvas-note { display: none; }
  .workspace-interface { top: 82px; min-width: 0; width: calc(100% - 38px); left: 19px; transform: none; padding: 20px; }
  .workspace-brand { font-size: 13px; }
  .workspace-title h3 { font-size: 29px; }
  .workspace-title .live-pill { display: inline-block; }
  .workspace-path { font-size: 9px; }
  .workspace-view-switch button { font-size: 10px; min-height: 44px; }
  .task-card h4 { font-size: 13px; }
  .task-card p { font-size: 8px; }
  .task-card { min-height: 142px; padding: 11px 9px; }
  .task-category { font-size: 7px; }
  .column-label { font-size: 8px; }
  .task-foot { font-size: 6px; }
  .workspace-footer { font-size: 7px; }
  .campaign-composition { display: block; padding: 65px 32px 28px; }
  .campaign-headlines { margin-top: 21px; }
  .campaign-headline { font-size: 72px; max-width: none; }
  .campaign-headline br:nth-of-type(odd) { display: initial; }
  .campaign-bottom { flex-direction: row; margin-top: 25px; gap: 15px; }
  .campaign-bottom > span { font-size: 8px; }
  .creative-switch { left: 30px; right: 30px; width: auto; bottom: 21px; }
  .creative-switch button { width: 44px; height: 44px; }
  .creative-switch > span { font-size: 9px; }
  .exploration-footnote { flex-direction: column; gap: 7px; font-size: 8px; padding-top: 25px; }
  .studio-grid { grid-template-columns: 1fr; gap: 30px; }
  .studio-manifesto { display: none; }
  .studio h2 { font-size: clamp(32px,6.8vw,49px); }
  .studio-detail { margin-top: 26px; }
  .contact { padding-top: 0; }
}
@media (max-width: 480px) {
  .hero-stage { min-height: 610px; }
  .hero-topline { margin-bottom: 99px; }
  h1 { font-size: 10.4vw; }
  .hero-description { max-width: 285px; }
  .saas-stage { height: 650px; }
  .workspace-interface { top: 68px; padding: 17px; }
  .workspace-title h3 { font-size: 27px; }
  .workspace-title { margin-bottom: 18px; }
  .workspace-title .live-pill { display: none; }
  .task-board { grid-template-columns: 1fr; gap: 10px; min-height: 267px; }
  .task-column { display: block; }
  .column-label { font-size: 8px; margin-bottom: 5px; }
  .task-card { display: grid; grid-template-columns: 65px 1fr; column-gap: 8px; align-items: center; min-height: 61px; padding: 10px; }
  .task-card h4 { margin: 0; font-size: 12px; }
  .task-card h4 br { display: none; }
  .task-card p, .task-foot { display: none; }
  .task-board[data-view='list'] { gap: 10px; }
  .task-board[data-view='list'] .task-card { grid-template-columns: 65px 1fr; min-height: 81px; }
  .task-board[data-view='list'] .task-card h4 { font-size: 12px; }
  .task-board[data-view='list'] .task-foot { display: none; }
  .workspace-footer { font-size: 6px; }
  .study-caption { flex-direction: column; gap: 2px; }
  .study-caption > span { padding-left: 21px; }
  .campaign-headline { font-size: 67px; }
  .campaign-bottom { margin-top: 23px; }
}
@media (max-width: 360px) {
  .hero-topline .eyebrow { font-size: 8px; }
  .hero-stage { min-height: 577px; }
  .hero-topline { margin-bottom: 83px; }
  .hero-description { font-size: 13px; }
  .hero-bottom .button { min-height: 49px; }
  .phone-interface { transform: none; width: 243px; margin-left: -121.5px; }
  .workspace-interface { padding: 14px; left: 13px; width: calc(100% - 26px); }
  .workspace-brand { font-size: 11px; }
  .workspace-title h3 { font-size: 25px; }
  .exploration-heading h2 { font-size: 31px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-image img { animation: none; }
  .phone-interface, .workspace-interface { transform: none !important; }
}
html.motion-paused .phone-interface, html.motion-paused .workspace-interface { transform: none !important; }

/* Keep every demo control inside its visual panel, including narrow phones. */
@media (max-width: 760px) {
  .phone-interface { top: 65px; }
  .campaign-stage { height: 560px; }
  .campaign-composition { padding-top: 66px; }
  .campaign-headline { font-size: 76px; }
  .campaign-bottom { margin-top: 22px; }
}
@media (max-width: 480px) {
  .campaign-headline { font-size: 72px; }
  .workspace-interface { top: 61px; }
}

.habit-track[data-completed="0"] > span { transform: scaleX(0); }
.habit-track[data-completed="1"] > span { transform: scaleX(.333333); }
.habit-track[data-completed="2"] > span { transform: scaleX(.666667); }
.habit-track[data-completed="3"] > span { transform: scaleX(1); }

.legal-links { display:flex; flex-wrap:wrap; gap:12px 26px; margin-bottom:18px; font-size:12px; color:#b4ae9f; }
.legal-links a { display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; text-underline-offset:4px; }

.contact-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}#contact-security{margin:18px 0;min-height:65px}#project-form button:disabled{opacity:.6;cursor:wait}