/* latin-ext */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/dm-sans-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;
}

/* cyrillic-ext */
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/manrope-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek */
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/manrope-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/manrope-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/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 {
  --ink: #07152f;
  --navy: #0c1930;
  --footer-background: #020814;
  --blue: #0868f7;
  --cyan: #02cce8;
  --paper: #f5f6f3;
  --white: #fff;
  --muted: #657083;
  --line: rgb(7 21 47 / 14%);
  --max: 1240px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section: clamp(5.5rem, 11vw, 10rem);
  --header-height: 104px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Continue the footer surface into browser chrome and the bottom overscroll area. */
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); scroll-padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px)); background: var(--footer-background); }
body { margin: 0; color: var(--ink); background: var(--footer-background); font-family: "DM Sans", Arial, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 100; padding: .65rem 1rem; color: white; background: var(--ink); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.shell { width: min(100%, calc(var(--max) + 2 * var(--gutter))); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow { margin: 0 0 1.5rem; color: var(--blue); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow--light { color: #6be5f6; }
.eyebrow-dot { --dot-halo: rgb(107 229 246 / 14%); display: inline-block; width: 4px; height: 4px; margin-inline: .35em; border-radius: 50%; background: currentcolor; vertical-align: .18em; }
.display { margin: 0; font-family: Manrope, Arial, sans-serif; font-size: clamp(3.4rem, 8.4vw, 8.3rem); font-weight: 400; letter-spacing: -.065em; line-height: .95; }
.section-title { max-width: 850px; margin: 0; font-family: Manrope, Arial, sans-serif; font-size: clamp(2.3rem, 5vw, 5rem); font-weight: 400; letter-spacing: -.05em; line-height: 1.05; }

.site-header { position: fixed; z-index: 20; inset: 0 0 auto; color: white; background: var(--navy); }
.home-page .site-header { box-shadow: inset 0 -1px rgb(255 255 255 / 18%); }
.home-page .site-header::after { --header-glint-width: clamp(90px, 22vw, 240px); position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #087eff 45%, #48ddff 72%, #edfcff 82%, transparent) 25% 0 / var(--header-glint-width) 100% no-repeat; filter: drop-shadow(0 0 3px rgb(72 221 255 / 45%)); content: ""; pointer-events: none; }
.nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); border-bottom: 1px solid rgb(255 255 255 / 18%); }
.home-page .nav { border-bottom-color: transparent; }
.brand img { width: 173px; height: auto; }
.nav-links { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); font-size: .92rem; }
.nav-links a { text-decoration: none; }
.nav-links a:not(.nav-cta) { position: relative; }
.nav-links a:not(.nav-cta)::after { position: absolute; right: 0; bottom: -.35rem; left: 0; height: 1px; background: white; content: ""; transform: scaleX(0); transform-origin: right; transition: transform .3s; }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.menu-button { position: relative; display: none; width: 48px; height: 48px; padding: 0; border: 1px solid rgb(255 255 255 / 35%); border-radius: 50%; color: white; background: transparent; cursor: pointer; }
.menu-button span, .menu-button::after { position: absolute; top: 50%; left: 50%; display: block; width: 18px; height: 1px; background: currentcolor; content: ""; transform: translate(-50%, -50%) translateY(-3px); transition: transform .25s ease; }
.menu-button::after { transform: translate(-50%, -50%) translateY(3px); }
.menu-button[aria-expanded="true"] span { transform: translate(-50%, -50%) rotate(45deg); }
.menu-button[aria-expanded="true"]::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* Fill the opening viewport, including desktop screens taller than 920px. */
.hero { position: relative; isolation: isolate; min-height: 100vh; min-height: 100dvh; overflow: hidden; color: white; background: var(--navy); }
.ambient { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.ambient-light { position: absolute; display: block; width: 70%; aspect-ratio: 1; border-radius: 50%; }
.ambient-light--blue { top: -35%; right: -12%; background: radial-gradient(ellipse, rgb(8 104 247 / 32%), rgb(8 104 247 / 9%) 40%, transparent 70%); }
.ambient-light--cyan { right: -20%; bottom: -45%; background: radial-gradient(ellipse, rgb(2 204 232 / 18%), rgb(2 204 232 / 4%) 45%, transparent 70%); }
.orbital-field { position: absolute; top: 50%; right: -12%; width: min(72vw, 1050px); aspect-ratio: 1; transform: translateY(-50%) rotate(-25deg); }
.orbit-track { --orbit-start: 20deg; position: absolute; display: block; inset: 0; border: 1px solid rgb(80 189 255 / 15%); border-top-color: rgb(91 206 255 / 38%); border-radius: 50%; transform: rotate(var(--orbit-start)); }
.orbit-track::before { position: absolute; top: -4px; left: calc(50% - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: #8cebf6; box-shadow: 0 0 18px 5px rgb(2 204 232 / 35%); content: ""; }
.orbit-track--inner { --orbit-start: 210deg; inset: 19%; border-color: rgb(82 124 255 / 15%); border-bottom-color: rgb(83 151 255 / 35%); }
.orbit-track--inner::before { background: #699dff; box-shadow: 0 0 18px 5px rgb(8 104 247 / 40%); }
.ambient--hero .orbit-track { --orbit-start: 250deg; border-width: 1.5px; border-color: rgb(90 196 255 / 34%); border-top-color: rgb(119 220 255 / 66%); }
.ambient--hero .orbit-track--inner { --orbit-start: 275deg; border-color: rgb(104 157 255 / 38%); border-bottom-color: rgb(133 184 255 / 68%); }
.orbit-core { position: absolute; top: 50%; left: 50%; display: none; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(25deg); }
.orbit-core::before { position: absolute; inset: -35%; border-radius: 50%; background: radial-gradient(circle, rgb(8 104 247 / 18%), rgb(2 204 232 / 6%) 38%, transparent 68%); content: ""; }
.orbit-core img { position: relative; width: 100%; height: auto; opacity: .52; filter: drop-shadow(0 0 30px rgb(8 104 247 / 22%)) drop-shadow(0 0 70px rgb(2 204 232 / 8%)); }
.motion-toggle { position: absolute; z-index: 3; right: max(var(--gutter), calc((100% - var(--max)) / 2)); bottom: 1rem; display: inline-flex; gap: .45rem; align-items: center; min-height: 44px; padding: .5rem 0; border: 0; border-radius: 0; color: #b8c4d5; background: transparent; font-size: .75rem; cursor: pointer; }
.motion-toggle:hover { color: white; }
.motion-toggle:hover [data-motion-label] { text-decoration: underline; text-underline-offset: .25em; }
.motion-toggle[hidden], .motion-play-icon, .motion-toggle[data-paused] .motion-pause-icon { display: none; }
.motion-toggle[data-paused] .motion-play-icon { display: block; }
.hero-inner { position: relative; z-index: 2; display: grid; align-content: end; min-height: 100vh; min-height: 100dvh; padding-top: 10rem; padding-bottom: clamp(4rem, 8vh, 7rem); }
.hero .display { max-width: 1000px; }
.hero-bottom { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; margin-top: clamp(3rem, 8vh, 6rem); }
.hero-copy { max-width: 520px; margin: 0; color: #bcc7d8; font-size: clamp(1.08rem, 1.6vw, 1.35rem); }
.project-cta { position: relative; isolation: isolate; display: inline-flex; flex: 0 0 auto; gap: 1rem; align-items: center; justify-content: space-between; width: 248px; max-width: 100%; min-height: 68px; overflow: hidden; padding: .5rem .5rem .5rem 1.5rem; border: 1px solid rgb(90 178 255 / 35%); border-radius: 100px; color: white; background: #1354b4; box-shadow: 0 8px 22px rgb(3 58 149 / 20%), 0 0 14px rgb(2 204 232 / 6%); font-family: Manrope, Arial, sans-serif; font-size: 1rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; text-decoration: none; }
.project-cta::before { position: absolute; z-index: -2; top: 50%; left: 50%; width: var(--cta-orbit-size, 300px); height: var(--cta-orbit-size, 300px); background: conic-gradient(from 35deg, transparent 0% 52%, #087eff 72%, #48ddff 88%, #edfcff 93%, transparent 96%); content: ""; pointer-events: none; transform: translate(-50%, -50%); }
.project-cta::after { position: absolute; z-index: -1; inset: 1px; border-radius: inherit; background: radial-gradient(ellipse at 95% 0%, rgb(2 204 232 / 20%), transparent 52%), linear-gradient(115deg, #052664, #0849aa 64%, #0860d3); content: ""; pointer-events: none; }
.project-cta__label { white-space: nowrap; }
.project-cta__arrow { position: relative; display: grid; flex: 0 0 48px; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: 50%; color: #063e86; background: linear-gradient(145deg, white, #d1f6fc); box-shadow: 0 2px 8px rgb(3 38 82 / 12%); }
.project-cta__arrow svg { display: block; width: 20px; height: 20px; overflow: visible; }
.project-cta__arrow-next { transform: translate(-32px, 32px); }
.project-cta:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; box-shadow: 0 0 0 3px white, 0 8px 26px rgb(3 58 149 / 30%); }
.hero-project { justify-self: start; }
.floating-project { position: fixed; z-index: 15; right: max(var(--gutter), calc((100vw - var(--max)) / 2), env(safe-area-inset-right, 0px)); bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); display: none; max-width: calc(100% - 2 * var(--gutter)); }
.floating-project[hidden] { display: none; }

.intro { padding-block: var(--section); background: var(--paper); }
.intro-grid { display: grid; grid-template-columns: .65fr 1.6fr; gap: 3rem; }
.intro-copy { max-width: 850px; margin: 0; font-family: Manrope, Arial, sans-serif; font-size: clamp(2rem, 4.2vw, 4.4rem); letter-spacing: -.045em; line-height: 1.12; }
.intro-copy em { color: var(--blue); font-style: normal; }

.services { padding-block: var(--section); background: white; }
.services-head { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-bottom: clamp(4rem, 8vw, 7rem); }
.services-summary { align-self: end; max-width: 500px; margin: 0; color: var(--muted); font-size: 1.08rem; }
.service-list { border-top: 1px solid var(--line); }
.service { display: grid; grid-template-columns: 80px 1fr 1fr; gap: 2rem; padding-block: 2.5rem; border-bottom: 1px solid var(--line); }
.service-icon { display: grid; place-items: center; align-self: start; width: 56px; height: 56px; border: 1px solid rgb(8 104 247 / 12%); border-radius: 16px; background: rgb(8 104 247 / 5%); }
.service-icon img { width: 28px; height: 28px; }
.service h3 { margin: 0; font-family: Manrope, Arial, sans-serif; font-size: clamp(1.6rem, 2.8vw, 2.65rem); font-weight: 400; letter-spacing: -.035em; line-height: 1.15; }
.service p { max-width: 510px; margin: 0; color: var(--muted); }

.work { padding-block: var(--section); color: white; background: var(--navy); }
.work-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.availability { display: flex; gap: .7rem; align-items: center; margin-bottom: .7rem; color: #b8c4d5; font-size: .82rem; }
.availability::before { --dot-halo: rgb(2 204 232 / 12%); background: var(--cyan); box-shadow: 0 0 0 5px var(--dot-halo); }
.work-stage { --work-stage-height: clamp(310px, 48vw, 580px); position: relative; isolation: isolate; display: grid; place-items: center; min-height: var(--work-stage-height); margin-top: 4rem; overflow: hidden; border-top: 1px solid rgb(255 255 255 / 18%); border-bottom: 1px solid rgb(255 255 255 / 18%); text-align: center; }

/* Keep the complete orbit and travelling glow inside both panel dividers. */
.ambient--work .orbital-field { top: 50%; right: 50%; width: min(calc(100% - 4rem), calc(var(--work-stage-height) - 4rem), 620px); transform: translate(50%, -50%) rotate(-25deg); }
.ambient--work .orbit-track--inner { inset: 13%; }
.ambient--work .ambient-light--cyan { right: 20%; bottom: -55%; width: 65%; opacity: .65; }
.work-note { position: relative; max-width: 520px; }
.work-note p:first-child { margin: 0 0 .8rem; color: #758397; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }
.work-note p:last-child { margin: 0; font-family: Manrope, Arial, sans-serif; font-size: clamp(1.4rem, 2.6vw, 2.5rem); line-height: 1.25; }

.philosophy { padding-block: var(--section); background: var(--paper); }
.philosophy-grid { display: grid; grid-template-columns: 1.5fr .8fr; gap: 7vw; }
.philosophy-copy { align-self: end; }
.philosophy-copy p { max-width: 470px; margin: 0 0 1.5rem; color: var(--muted); font-size: 1.06rem; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--line); }
.principle { padding: 2rem 2rem 0 0; }
.principle + .principle { padding-left: 2rem; border-left: 1px solid var(--line); }
.principle-label { display: inline-flex; gap: .75rem; align-items: center; color: var(--blue); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; }
.principle-label::before { --dot-halo: rgb(8 104 247 / 12%); background: currentcolor; }
.availability::before, .principle-label::before { flex: none; width: 7px; height: 7px; border-radius: 50%; content: ""; }
.principle h3 { margin: 3rem 0 .5rem; font-family: Manrope, Arial, sans-serif; font-size: 1.4rem; font-weight: 500; }
.principle p { margin: 0; color: var(--muted); font-size: .95rem; }

.contact { position: relative; isolation: isolate; padding-block: var(--section); color: white; background: #061125; }
.ambient--contact .ambient-light--blue { top: -70%; right: -20%; width: 75%; opacity: .7; }
.contact-head { display: grid; grid-template-columns: 1.2fr .8fr; gap: 5vw; margin-bottom: clamp(4rem, 7vw, 6rem); }
.contact-head p { align-self: end; max-width: 430px; margin: 0; color: #aeb9ca; font-size: 1.08rem; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 2.5rem; }
.contact-fallback { display: flex; gap: 2rem; align-items: center; justify-content: space-between; padding-top: 2rem; border-top: 1px solid rgb(255 255 255 / 18%); }
.contact-fallback p { max-width: 28rem; margin: 0; color: #aeb9ca; }
.contact-fallback strong { color: white; font-weight: 500; }
.contact-form[hidden], .contact-fallback[hidden] { display: none; }
.field { position: relative; }
.field--wide { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: .5rem; color: #9faabd; font-size: .78rem; }
.field input, .field select, .field textarea { width: 100%; min-height: 54px; padding: .6rem 0; border: 0; border-bottom: 1px solid #445066; border-radius: 0; color: white; background: transparent; outline: none; transition: border-color .2s; }
.field textarea { min-height: 115px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--cyan); }
.field select { color-scheme: dark; }
.custom-select { position: relative; }
.custom-select[data-open] { z-index: 5; }
.custom-select__trigger { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 54px; padding: .6rem 0; border: 0; border-bottom: 1px solid #445066; border-radius: 0; color: white; background: transparent; text-align: left; cursor: pointer; }
.custom-select__trigger:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.custom-select__trigger[aria-expanded="true"] { border-bottom-color: var(--cyan); }
.custom-select__trigger:disabled { opacity: .55; cursor: wait; }
.custom-select__chevron { flex: 0 0 8px; width: 8px; height: 8px; margin-right: 4px; border-right: 1.5px solid #aeb9ca; border-bottom: 1.5px solid #aeb9ca; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.custom-select__trigger[aria-expanded="true"] .custom-select__chevron { border-color: var(--cyan); transform: translateY(2px) rotate(225deg); }
.custom-select__list { position: absolute; top: calc(100% + 8px); right: 0; left: 0; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; padding: .4rem; border: 1px solid rgb(107 229 246 / 35%); border-radius: 12px; color: white; background: #0c1c35; box-shadow: 0 16px 36px rgb(0 0 0 / 35%); scrollbar-color: #445d7e #0c1c35; scrollbar-width: thin; }
.custom-select[data-above] .custom-select__list { top: auto; bottom: calc(100% + 8px); }
.custom-select__option { position: relative; display: flex; align-items: center; min-height: 48px; padding: .65rem 2.5rem .65rem .85rem; border: 1px solid transparent; border-radius: 7px; font-size: 1rem; line-height: 1.4; cursor: pointer; }
.custom-select__option[data-active] { border-color: rgb(107 229 246 / 45%); background: #183458; }
.custom-select__option[aria-selected="true"] { color: #8cebf6; }
.custom-select__option[aria-selected="true"]::after { position: absolute; top: 50%; right: 1rem; width: 6px; height: 11px; border-right: 2px solid currentcolor; border-bottom: 2px solid currentcolor; content: ""; transform: translateY(-65%) rotate(45deg); }

@media (hover: hover) {
  .custom-select__option:hover { background: #183458; }
}
.field [aria-invalid="true"] { border-color: #ff8a80; }
.field-hint, .field-error { margin: .6rem 0 0; font-size: .8rem; }
.field-hint { color: #9faabd; }
.field-error { color: #ffaaa2; }
.form-foot { display: flex; grid-column: 1 / -1; gap: 2rem; align-items: center; justify-content: space-between; margin-top: 1.2rem; }
.form-note { max-width: 500px; margin: 0; color: #7f8b9f; font-size: .8rem; }
.form-note a { color: white; }
.submit { width: 280px; cursor: pointer; }
.submit:disabled, .submit:disabled:hover { opacity: .55; cursor: not-allowed; transform: none; }
.contact-instagram { --cta-orbit-size: 560px; gap: .75rem; width: max-content; }
.contact-instagram .project-cta__label { display: flex; gap: .75rem; align-items: center; min-width: 0; white-space: normal; }
.contact-instagram .project-cta__label > span { text-wrap: balance; }
.contact-instagram img { flex: 0 0 22px; }
.contact-instagram:focus-visible { outline-color: var(--cyan); }
.form-verification { grid-column: 1 / -1; max-width: 100%; }
.form-status[data-state="success"] { padding: 1rem; border-left: 2px solid var(--cyan); color: #dbe5f2; background: rgb(255 255 255 / 5%); }
.form-status { overflow-wrap: anywhere; grid-column: 1 / -1; min-height: 1.5rem; margin: 0; font-size: .9rem; }
.form-status[data-state="error"] { color: #ffaaa2; }
.form-status[data-state="notice"] { padding: 1rem; border-left: 2px solid var(--cyan); color: #dbe5f2; background: rgb(255 255 255 / 5%); }
.honeypot { position: absolute !important; left: -9999px !important; }

.site-footer { padding-top: 3rem; padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); color: #c4ccda; background: var(--footer-background); border-top: 1px solid rgb(255 255 255 / 12%); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; align-items: start; }
.footer-brand img { width: 155px; height: auto; }
.footer-brand p { max-width: 27rem; margin: 1rem 0 0; color: #9faabd; font-size: .92rem; }
.footer-aside { display: grid; gap: 1.25rem; justify-items: end; }
.footer-links { display: flex; flex-wrap: wrap; gap: .5rem 2rem; font-size: .9rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; }
.footer-links a:hover { color: white; }
.footer-social { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.footer-social-title { margin: 0; color: #9faabd; font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.social-links { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid #657083; border-radius: 50%; color: white; transition: border-color .2s, background .2s; }
.social-link img { width: 22px; height: 22px; }
.social-link:hover { border-color: var(--cyan); background: rgb(255 255 255 / 6%); }
.social-link:focus-visible { outline-color: var(--cyan); }
.legal-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / 12%); color: #9faabd; font-size: .72rem; }
.legal-line p { margin: 0; }

.legal-page { min-height: 100vh; }
.legal-page .site-header { position: sticky; color: var(--ink); background: var(--paper); }
.legal-page .nav { border-bottom-color: var(--line); }
.legal-page .menu-button { color: var(--ink); border-color: var(--line); }
.legal-page .nav-links a:not(.nav-cta)::after { background: var(--ink); }
.legal-main { width: 100%; padding-block: clamp(4rem, 9vw, 8rem); padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2)); background: var(--paper); }
.legal-hero { display: grid; grid-template-columns: 1.3fr .7fr; gap: 3rem; padding-bottom: 4rem; border-bottom: 1px solid var(--line); }
.legal-hero h1 { margin: 0; font-family: Manrope, Arial, sans-serif; font-size: clamp(3.4rem, 7vw, 7rem); font-weight: 400; letter-spacing: -.06em; line-height: .95; }
.legal-hero p { align-self: end; margin: 0; color: var(--muted); }
.legal-content { max-width: 780px; margin: 4rem auto 0; }
.legal-content h2 { margin: 3rem 0 .7rem; font-family: Manrope, Arial, sans-serif; font-size: 1.55rem; font-weight: 500; letter-spacing: -.025em; }
.legal-content p, .legal-content li { color: #4f5a6c; }
.legal-content a { color: var(--blue); }

.reveal-sequence > [data-reveal]:nth-child(2) { --reveal-delay: .12s; }
.reveal-sequence > [data-reveal]:nth-child(3) { --reveal-delay: .24s; }
.has-motion [data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--reveal-delay, 0s); }
.has-motion [data-reveal][data-visible], .has-motion [data-reveal]:focus-within { opacity: 1; transform: none; }
html[data-motion="paused"] [data-reveal] { opacity: 1; transform: none; transition: none; }

@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--dot-halo); transform: scale(1); }
  50% { box-shadow: 0 0 0 5px var(--dot-halo); transform: scale(1.1); }
}

@keyframes ambient-drift {
  from { transform: translate3d(-5%, 3%, 0) scale(1); }

  to { transform: translate3d(7%, -6%, 0) scale(1.12); }
}

@keyframes orbit-turn { to { transform: rotate(calc(var(--orbit-start) + 360deg)); } }

@keyframes orbit-return { to { transform: rotate(calc(var(--orbit-start) - 360deg)); } }

@keyframes symbol-drift {
  from { transform: translate3d(0, 6px, 0) rotate(-1deg); }

  to { transform: translate3d(0, -6px, 0) rotate(1deg); }
}

@keyframes cta-orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }

@keyframes header-glint {
  from { background-position: calc(0px - var(--header-glint-width)) 0; }

  to { background-position: calc(100% + var(--header-glint-width)) 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .home-page .site-header::after { animation: header-glint 8s linear -2s infinite paused; }
  html[data-motion="running"] .site-header::after { animation-play-state: running; }
  .project-cta { transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease; }
  .project-cta__arrow { transition: box-shadow .4s ease; }
  .project-cta__arrow path { transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
  .project-cta::before { animation: cta-orbit 8s linear infinite paused; }
  html[data-motion="running"] .project-cta::before { animation-play-state: running; }
  .project-cta:is(:focus-visible, :active) .project-cta__arrow-main { transform: translate(32px, -32px); }
  .project-cta:is(:focus-visible, :active) .project-cta__arrow-next { transform: translate(0); }
  .project-cta:active { transform: scale(.97); }
  .availability::before, .principle-label::before, .eyebrow-dot { animation: dot-pulse 3s ease-in-out infinite paused; }
  .ambient-light { animation: ambient-drift 16s ease-in-out infinite alternate paused; }
  .ambient-light--cyan { animation-duration: 22s; animation-delay: -8s; animation-direction: alternate-reverse; }
  .orbit-track { animation: orbit-turn 55s linear infinite paused; }
  .orbit-track--inner { animation: orbit-return 42s linear infinite paused; }
  .orbit-core img { animation: symbol-drift 12s ease-in-out infinite alternate paused; }

  html[data-motion="running"] .ambient[data-in-view] .ambient-light,
  html[data-motion="running"] .ambient[data-in-view] .orbit-track,
  html[data-motion="running"] .ambient[data-in-view] .orbit-core img,
  html[data-motion="running"] .availability::before,
  html[data-motion="running"] .principle-label::before,
  html[data-motion="running"] .eyebrow-dot { animation-play-state: running; }
  .service-icon { transition: transform .35s ease, background .35s ease, border-color .35s ease; }
  html[data-motion="running"] .hero-inner { opacity: calc(1 - var(--hero-progress, 0) * .7); transform: translate3d(0, calc(var(--hero-progress, 0) * 48px), 0); }
  html[data-motion="running"] .ambient--hero { transform: translate3d(0, calc(var(--hero-progress, 0) * 70px), 0); }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .project-cta:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgb(3 58 149 / 28%), 0 0 18px rgb(2 204 232 / 12%); }
  .project-cta:hover .project-cta__arrow { box-shadow: 0 3px 10px rgb(3 38 82 / 18%); }
  .project-cta:hover .project-cta__arrow-main { transform: translate(32px, -32px); }
  .project-cta:hover .project-cta__arrow-next { transform: translate(0); }
  .project-cta:active { transform: translateY(0) scale(.97); }
  html[data-motion="running"] .service:hover .service-icon { transform: translateY(-4px) rotate(-4deg); background: rgb(8 104 247 / 10%); border-color: rgb(8 104 247 / 30%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; }
  .availability::before, .principle-label::before, .eyebrow-dot, .ambient-light, .orbit-track, .orbit-core img, .project-cta::before, .home-page .site-header::after { animation: none; }
  .has-motion [data-reveal] { opacity: 1; transform: none; }
}

/* Pull the symbol toward the copy and frame it with tighter, readable orbits. */
@media (min-width: 1360px) {
  .ambient--hero .orbital-field { right: calc(-16% + clamp(32px, 3vw, 48px)); width: 58vw; }
  .ambient--hero .orbit-track { inset: 8%; }
  .ambient--hero .orbit-track--inner { inset: 25%; }
  .orbit-core { display: block; }
}

/* Let large displays use more of the canvas without pushing the hero to the bottom. */
@media (min-width: 1700px) {
  :root { --max: clamp(1240px, 72vw, 1840px); }
  .hero-inner { align-content: center; }
  .hero .display { max-width: 7.55em; font-size: clamp(5.5rem, min(7vw, 13vh), 11.5rem); }
  .ambient--hero .orbital-field { right: calc(-6% + clamp(80px, 5vw, 120px)); width: min(58vw, 1480px); }
}

@media (max-width: 760px) {
  :root { --section: 4.5rem; --header-height: 82px; }
  .brand img { width: 145px; }
  .menu-button { display: block; }
  .floating-project:not([hidden]) { display: inline-flex; }
  .nav-links { position: absolute; top: var(--header-height); right: var(--gutter); left: var(--gutter); display: none; flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100vh - var(--header-height)); max-height: calc(100dvh - var(--header-height)); overflow-y: auto; overscroll-behavior: contain; padding: .75rem; color: var(--ink); background: white; box-shadow: 0 16px 40px rgb(0 0 0 / 18%); }
  .nav-links[data-open] { display: flex; }
  .nav-links a:not(.project-cta) { min-height: 48px; padding: .75rem; }
  .nav-links .project-cta { align-self: flex-start; margin: .5rem 0; }

  /* Keep the next section below translucent mobile browser controls at first load. */
  .hero { min-height: calc(100vh + 4rem); min-height: calc(100lvh + 4rem + env(safe-area-inset-bottom, 0px)); }
  .ambient--hero .orbital-field { top: 42%; right: -24rem; width: 42rem; opacity: .75; }
  .ambient--hero .orbit-track:not(.orbit-track--inner) { --orbit-start: 223deg; }
  .ambient--hero .ambient-light { width: 125%; }
  .ambient--hero .ambient-light--blue { top: -10%; right: -60%; }
  .ambient--hero .ambient-light--cyan { right: -65%; bottom: -5%; }
  .ambient--work .ambient-light--cyan { right: -10%; bottom: -35%; width: 120%; }
  .ambient--contact .ambient-light--blue { top: -20%; right: -65%; width: 140%; }
  .hero-inner { align-content: start; min-height: 0; padding-top: calc(var(--header-height) + 3.5rem); }
  .intro-grid, .services-head, .philosophy-grid, .contact-head, .legal-hero { grid-template-columns: 1fr; }
  .intro-grid { gap: 0; }
  .services-head, .philosophy-grid, .contact-head { gap: 2rem; }
  .services-head, .contact-head { margin-bottom: 3rem; }
  .service { grid-template-columns: 48px minmax(0, 1fr); gap: 1.25rem; padding-block: 2rem; }
  .service-icon { align-self: center; width: 48px; height: 48px; border-radius: 14px; }
  .service p { grid-column: 1 / -1; }
  .work-heading { display: block; }
  .availability { margin: 1.5rem 0 0; }
  .work-stage { margin-top: 3rem; }
  .philosophy-copy p:last-child { margin-bottom: 0; }
  .principles { grid-template-columns: 1fr; margin-top: 3rem; }
  .principles > [data-reveal] { --reveal-delay: 0s; }
  .principle, .principle + .principle { padding: 2rem 0; border-bottom: 1px solid var(--line); border-left: 0; }
  .principle h3 { margin-top: 1.5rem; }
  .contact-head .eyebrow { margin-bottom: 1.5rem; color: #6be5f6; font-size: .72rem; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-fallback { flex-direction: column; align-items: flex-start; }
  .field--wide, .form-foot, .form-status { overflow-wrap: anywhere; grid-column: auto; }
  .form-foot { flex-direction: column; align-items: flex-start; }

  /* Legal pages keep the floating project button visible beside the footer. */
  .legal-page .site-footer { padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px)); }
  .footer-top, .legal-line { grid-template-columns: 1fr; }
  .footer-top { gap: 2rem; }
  .footer-aside { justify-items: start; }
  .footer-links { gap: .5rem 1.5rem; }
  .legal-line { gap: 1rem; margin-top: 2rem; }
}

/* Keep both starting points above the fold when browser controls reduce the height. */
@media (max-width: 760px) and (max-height: 650px), (min-width: 761px) and (max-height: 800px) {
  .ambient--hero .orbit-track:not(.orbit-track--inner) { --orbit-start: 295deg; }
  .ambient--hero .orbit-track--inner { --orbit-start: 320deg; }
}