@font-face {
    font-family:Nunito;
    src:url('fonts/nunito-variable.ttf') format('truetype');
    font-style:normal;
    font-weight:200 1000;
    font-display:swap
}

:root {
    color-scheme:light;
    --bg:#fcf9f5;
    --surface:#fffdfb;
    --ink:#30223d;
    --muted:#6b6073;
    --line:#e9e1e8;
    --lilac:#eee5f5;
    --peach:#fae9df;
    --accent:#a95b3f;
    --display-accent:#c76d47;
    --button:#ffb28e;
    --lavender:#dccded;
    --card-shadow:0 12px 36px #4d315306;
    --hero-glow:#f1e7f38a
}

:root[data-theme=dark] {
    color-scheme:dark;
    --bg:#211c29;
    --surface:#2a2433;
    --ink:#f6edf9;
    --muted:#c0b2c9;
    --line:#44384e;
    --lilac:#392e47;
    --peach:#443136;
    --accent:#ffb28e;
    --display-accent:#ffb28e;
    --button:#ffb28e;
    --lavender:#bba1d6;
    --card-shadow:0 12px 36px #00000010;
    --hero-glow:#6e4b7626
}

@media(prefers-color-scheme:dark) {
    :root:not([data-theme=light]) {
        color-scheme:dark;
        --bg:#211c29;
        --surface:#2a2433;
        --ink:#f6edf9;
        --muted:#c0b2c9;
        --line:#44384e;
        --lilac:#392e47;
        --peach:#443136;
        --accent:#ffb28e;
        --display-accent:#ffb28e;
        --button:#ffb28e;
        --lavender:#bba1d6;
        --card-shadow:0 12px 36px #00000010;
        --hero-glow:#6e4b7626
    }
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:118px
}

body {
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font:500 17px/1.65 Nunito,system-ui,sans-serif;
    -webkit-font-smoothing:antialiased
}

button,a,summary {
    -webkit-tap-highlight-color:transparent
}

a {
    color:inherit;
    text-decoration:none
}

button {
    font:inherit;
    color:inherit;
    cursor:pointer
}

img {
    max-width:100%;
    height:auto;
    display:block
}

svg {
    display:block
}

button,summary {
    touch-action:manipulation
}

button:disabled {
    cursor:default
}

button[hidden],[hidden] {
    display:none!important
}

h1,h2,h3,h4,p {
    margin:0
}

h1,h2,h3,h4 {
    font-weight:850;
    line-height:1.15;
    letter-spacing:-.035em
}

p {
    color:var(--muted)
}

h1 {
    font-size:clamp(42px,6vw,76px)
}

h2 {
    font-size:clamp(32px,3.8vw,49px)
}

h3 {
    font-size:25px
}

h4 {
    font-size:21px
}

.wrap {
    width:min(1200px,calc(100% - 80px));
    margin-inline:auto
}

.section-space {
    padding-block:100px
}

.eyebrow {
    display:block;
    font-size:11px;
    font-weight:850;
    letter-spacing:.15em;
    color:var(--muted);
    margin-bottom:18px;
    line-height:1.5
}

a:focus-visible,button:focus-visible,summary:focus-visible {
    outline:3px solid var(--accent);
    outline-offset:5px;
    border-radius:10px
}

::selection {
    background:#dccded;
    color:#30223d
}

.skip-link {
    position:fixed;
    left:20px;
    top:-80px;
    background:var(--ink);
    color:var(--bg);
    padding:12px 20px;
    border-radius:20px;
    z-index:100
}

.skip-link:focus {
    top:15px
}

.button {
    display:inline-flex;
    gap:30px;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:14px 27px;
    border:1px solid transparent;
    border-radius:50px;
    font-size:15px;
    font-weight:800;
    line-height:1.3;
    transition:transform .25s,box-shadow .25s
}

.button svg,.text-link svg,.nav-contact svg {
    width:19px;
    height:19px;
    flex-shrink:0
}

.button-peach {
    background:var(--button);
    color:#30223d
}

.button-plum,.button-dark {
    background:var(--ink);
    color:var(--bg)
}

.button:hover {
    transform:translateY(-3px);
    box-shadow:0 8px 20px #8f5c4718
}

.text-link {
    display:inline-flex;
    align-items:center;
    gap:15px;
    font-size:15px;
    font-weight:800;
    border-bottom:1px solid var(--line);
    padding-bottom:5px
}

.text-link:hover {
    color:var(--accent)
}

/* A compact floating header keeps navigation within reach. */
.site-header {
    height:72px;
    display:flex;
    align-items:center;
    gap:22px;
    position:sticky;
    top:16px;
    z-index:20;
    margin-block:16px 0;
    padding:0 22px;
    border:1px solid var(--line);
    border-radius:100px;
    background:color-mix(in srgb,var(--bg),transparent 8%);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 5px 24px #30223d06
}
.header-tools {
    display:flex;
    align-items:center;
    gap:14px;
    margin-left:12px
}

.wordmark {
    display:block;
    flex-shrink:0
}

.brand-lockup {
    width:166px;
    height:auto
}

.desktop-nav {
    display:flex;
    align-items:center;
    gap:30px;
    margin-left:auto;
    font-size:14px;
    font-weight:750
}

.desktop-nav a,.footer-bottom a {
    transition:color .2s
}

.desktop-nav a:hover,.footer-bottom a:hover {
    color:var(--accent)
}

.language-switch {
    display:flex;
    align-items:center;
    flex-shrink:0;
    gap:2px;
    padding:3px;
    border:1px solid var(--line);
    border-radius:30px;
    background:var(--surface);
    font-size:11px;
    font-weight:850
}
.language-option {
    display:grid;
    place-items:center;
    width:34px;
    min-height:30px;
    border-radius:24px;
    color:var(--muted);
    transition:background .2s,color .2s
}
.language-option.is-active {
    background:var(--ink);
    color:var(--bg)
}
.language-option:hover {
    background:var(--lilac);
    color:var(--ink)
}
.language-option.is-active:hover {
    background:var(--ink);
    color:var(--bg)
}
.store-links {
    display:flex;
    align-items:center;
    gap:7px;
    flex-shrink:0
}
.store-links--desktop {
    padding-right:12px;
    border-right:1px solid var(--line)
}
.store-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    padding:7px;
    border:1px solid var(--line);
    border-radius:50%;
    background:transparent;
    color:var(--ink);
    transition:background .2s,border-color .2s
}
.store-button svg {
    width:20px;
    height:20px;
    flex-shrink:0
}
a.store-button:hover {
    background:var(--lilac);
    border-color:var(--lavender)
}
.store-button:disabled {
    opacity:.48
}
.store-label,.store-links--menu {
    display:none
}

.theme-toggle {
    width:35px;
    height:35px;
    border:1px solid var(--line);
    border-radius:50%;
    background:transparent;
    display:grid;
    place-items:center
}

.theme-toggle svg {
    width:16px;
    height:16px;
    stroke:currentColor;
    stroke-width:1.6;
    fill:none
}

.theme-sun {
    display:none
}

.nav-contact {
    display:flex;
    align-items:center;
    gap:22px;
    border:1px solid var(--line);
    padding:10px 20px;
    border-radius:40px;
    font-size:13px;
    font-weight:800
}

.nav-contact:hover {
    background:var(--lilac)
}

.mobile-menu {
    display:none
}

.site-header .wordmark {
    margin-right:12px
}

:root[data-theme=dark] .brand-lockup {
    filter:brightness(0) invert(1)
}

:root[data-theme=dark] .theme-sun {
    display:block
}

:root[data-theme=dark] .theme-moon {
    display:none
}

@media(prefers-color-scheme:dark) {
    :root:not([data-theme=light]) .brand-lockup {
        filter:brightness(0) invert(1)
    }
}

/* Each image is an independent layer, not a flattened hero screenshot. */
.hero {
    position:relative;
    padding-top:40px
}

.hero-copy {
    text-align:center;
    position:relative;
    z-index:2
}

.hello-note {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:30px;
    padding:7px 14px;
    font-size:12px;
    font-weight:750;
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-bottom:14px;
    color:var(--muted)
}

.hello-mark {
    font-size:20px;
    line-height:1;
    color:var(--accent)
}

.hero h1 {
    font-size:clamp(60px,7vw,96px);
    font-weight:950;
    line-height:.99;
    letter-spacing:-.05em
}

.future-word {
    color:var(--display-accent);
    position:relative;
    white-space:nowrap
}
.future-word::after {
    content:"";
    position:absolute;
    left:2%;
    right:8%;
    bottom:-9px;
    height:13px;
    border-bottom:4px solid var(--button);
    border-radius:0 0 60% 45%;
    transform:rotate(-2deg);
    opacity:.65;
    pointer-events:none
}
.hero-actions {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:25px
}
.hero-secondary {
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 0;
    font-size:14px;
    font-weight:800;
    border-bottom:1px solid var(--line);
    transition:color .2s
}
.hero-secondary:hover {
    color:var(--accent)
}
.hero-secondary span {
    font-size:20px
}

.hero-period {
    display:inline-block;
    transform-origin:50% 75%
}

.hero-copy p {
    font-size:17px;
    line-height:1.6;
    margin:22px auto 23px;
    max-width:560px
}

.atelier-scene {
    height:355px;
    position:relative;
    max-width:1140px;
    margin:-4px auto 0;
    isolation:isolate
}

.atelier-scene::before {
    content:"";
    position:absolute;
    inset:0 0 -2%;
    background:radial-gradient(ellipse at 50% 60%,var(--hero-glow),transparent 65%);
    z-index:-2
}

.scene-platform {
    position:absolute;
    bottom:14px;
    left:2%;
    right:0;
    height:72px;
    border-radius:50%;
    background:var(--lilac);
    box-shadow:0 12px 0 color-mix(in srgb,var(--lilac),var(--ink) 7%),0 20px 24px #7f5c7f09;
    transform:rotate(-1deg);
    z-index:-1
}

.scene-layer {
    position:absolute;
    will-change:transform;
    transition:transform .45s cubic-bezier(.2,.65,.3,1)
}

.scene-layer img {
    width:100%;
    animation:soft-float 7s ease-in-out infinite;
    user-select:none;
    pointer-events:none
}

.scene-corner {
    width:36%;
    left:0;
    bottom:29px;
    z-index:1
}

.scene-corner img {
    animation-duration:8.3s;
    animation-delay:-2s
}

.scene-laptop {
    width:51%;
    left:25%;
    bottom:-4px;
    z-index:3
}

.scene-phone {
    width:23%;
    right:0;
    bottom:38px;
    z-index:2
}

.scene-phone img {
    animation-duration:6.5s;
    animation-delay:-3s
}

.floating-chip {
    position:absolute;
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--lilac);
    border:1px solid color-mix(in srgb,var(--surface),transparent 40%);
    border-radius:22px;
    padding:13px 20px;
    font-size:13px;
    font-weight:750;
    box-shadow:0 10px 20px #61426a06;
    animation:chip-float 6s ease-in-out infinite;
    z-index:4
}

.floating-chip>span {
    color:var(--accent);
    font-size:19px;
    font-weight:850;
    line-height:1
}

.chip-design {
    top:42px;
    left:13%;
    transform:rotate(-9deg)
}

.chip-build {
    top:72px;
    right:24%;
    background:var(--peach);
    animation-delay:-2s;
    transform:rotate(7deg)
}

.chip-grow {
    top:2px;
    right:1%;
    animation-delay:-4s;
    transform:rotate(-9deg)
}

.scene-orbit {
    position:absolute;
    border:2px solid var(--lavender);
    opacity:.45;
    border-radius:50%;
    z-index:-1
}

.orbit-one {
    width:135px;
    height:125px;
    left:13%;
    top:31px;
    transform:rotate(20deg)
}

.orbit-two {
    width:104px;
    height:104px;
    right:27%;
    top:98px
}

.scene-cursor {
    position:absolute;
    width:58px;
    right:21%;
    bottom:20px;
    z-index:5;
    fill:#bda2d9;
    filter:drop-shadow(3px 4px 1px #846a9c35);
    animation:cursor-drift 8s ease-in-out infinite
}

.scene-mark {
    position:absolute;
    color:var(--button);
    font-size:32px;
    animation:chip-float 8s ease-in-out infinite
}

.scene-mark-one {
    left:36%;
    top:103px
}

.scene-mark-two {
    right:1%;
    top:174px;
    font-size:29px;
    animation-delay:-4s
}

.hero-foot {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:15px;
    padding-inline:15px;
    color:var(--muted);
    font-size:11px
}

.motion-toggle {
    background:none;
    border:0;
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--muted);
    font-size:11px;
    padding:8px 0
}

.motion-symbol {
    font-size:14px;
    width:16px
}

.motion-toggle:hover {
    color:var(--ink)
}

/* Services and solution examples. */
.section-heading {
    margin-bottom:42px
}

.section-heading h2 span {
    color:var(--display-accent)
}

.section-heading p {
    margin-top:15px;
    font-size:16px
}

.section-heading.centered {
    text-align:center
}

.service-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:repeat(2,minmax(270px,auto));
    gap:20px
}
.service-card {
    position:relative;
    min-width:0;
    background:var(--peach);
    border:1px solid color-mix(in srgb,var(--ink),transparent 94%);
    border-radius:32px;
    overflow:hidden;
    isolation:isolate;
    display:flex;
    flex-direction:column;
    box-shadow:var(--card-shadow);
    transition:transform .3s,box-shadow .3s
}
.service-mobile {
    grid-row:span 2
}
.service-web {
    background:var(--lilac)
}
.service-software {
    background:color-mix(in srgb,var(--peach),var(--bg) 45%)
}
.service-card:hover {
    box-shadow:0 20px 45px #30223d12
}
.service-card-copy {
    position:relative;
    z-index:2;
    padding:30px;
    max-width:62%
}
.service-mobile .service-card-copy {
    max-width:100%
}
.service-index {
    display:block;
    font-size:10px;
    letter-spacing:.13em;
    font-weight:850;
    color:var(--muted);
    margin-bottom:16px
}
.service-card h3 {
    font-size:29px;
    line-height:1.12;
    margin-bottom:12px
}
.service-mobile h3 {
    font-size:37px
}
.service-card p {
    font-size:14px;
    line-height:1.6;
    max-width:260px
}
.service-card img {
    position:absolute;
    width:53%;
    height:205px;
    object-fit:contain;
    right:-2%;
    bottom:35px;
    z-index:1;
    transition:transform .6s cubic-bezier(.2,.65,.3,1)
}
.service-mobile img {
    width:74%;
    height:350px;
    right:10%;
    bottom:45px;
    transform:rotate(-8deg)
}
.service-card:hover img {
    transform:translateY(-7px) rotate(-3deg)
}
.service-card-foot {
    position:relative;
    z-index:2;
    margin-top:auto;
    padding:0 28px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px
}
.service-tag {
    font-size:10px;
    font-weight:800;
    color:var(--muted);
    line-height:1.5;
    max-width:65%
}
.round-arrow {
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    flex-shrink:0;
    border:1px solid color-mix(in srgb,var(--ink),transparent 91%);
    border-radius:50%;
    background:var(--surface);
    transition:background .25s,color .25s
}
.round-arrow svg {
    width:18px;
    height:18px;
    transition:transform .25s
}
.service-card:hover .round-arrow {
    background:var(--ink);
    color:var(--bg)
}
.service-card:hover .round-arrow svg {
    transform:rotate(45deg)
}
.service-orbit {
    position:absolute;
    width:360px;
    height:360px;
    border:1px solid color-mix(in srgb,var(--accent),transparent 78%);
    border-radius:50%;
    left:50%;
    top:59%;
    transform:translate(-50%,-50%)
}
.service-orbit::before {
    content:"";
    position:absolute;
    inset:24px;
    border:1px dashed color-mix(in srgb,var(--accent),transparent 82%);
    border-radius:inherit
}
.service-caption {
    position:absolute;
    right:22px;
    top:39%;
    padding:10px 15px;
    border-radius:14px 14px 14px 3px;
    background:var(--surface);
    color:var(--ink);
    font-size:11px;
    font-weight:800;
    transform:rotate(7deg);
    z-index:2;
    box-shadow:0 6px 18px #30223d08
}
.service-footnote {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-align:center;
    font-size:12px;
    margin:25px auto 0
}
.service-footnote>span {
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    border-radius:50%;
    background:var(--lilac);
    color:var(--ink);
    flex-shrink:0
}

.services {
    padding-top:84px
}

.solutions-section {
    background:var(--surface);
    border-radius:70px 70px 0 0;
    margin-top:5px
}

.solutions-layout {
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:80px
}

.solutions-intro {
    align-self:start;
    position:sticky;
    top:128px
}

.solutions-intro h2 {
    font-size:52px
}

.solutions-intro h2 span {
    color:var(--display-accent)
}

.solutions-intro>p {
    margin-top:23px;
    font-size:16px;
    max-width:365px
}

.idea-note {
    display:flex;
    align-items:center;
    gap:16px;
    font-size:14px;
    font-weight:750;
    margin-top:35px;
    max-width:300px
}

.idea-note>span {
    color:var(--accent);
    font-size:38px
}

.solutions-intro .concept-note {
    font-size:11px;
    margin-top:25px
}

.solution-detail {
    border:1px solid var(--line);
    border-radius:24px;
    padding:24px;
    margin-bottom:12px;
    background:var(--bg);
    transition:border-color .3s,box-shadow .3s
}
.solution-detail[open] {
    border-color:color-mix(in srgb,var(--lavender),var(--line) 40%);
    box-shadow:0 8px 25px #30223d04
}
.solution-detail:target {
    border-color:var(--accent)
}

.solution-detail summary {
    display:flex;
    align-items:center;
    gap:16px;
    cursor:pointer;
    list-style:none
}

.solution-detail summary::-webkit-details-marker,.faq-list summary::-webkit-details-marker {
    display:none
}

.solution-number {
    font-size:12px;
    color:var(--accent);
    font-weight:850
}

.solution-detail summary h3 {
    font-size:23px;
    line-height:1.3;
    flex:1;
    letter-spacing:-.025em
}

.detail-plus {
    font-size:21px;
    font-weight:500;
    transition:transform .3s
}

.solution-detail[open] .detail-plus {
    transform:rotate(45deg)
}

.solution-content {
    padding:24px 0 0
}

.solution-content h4 {
    font-size:18px;
    font-weight:800;
    letter-spacing:-.015em;
    margin-bottom:11px
}

.solution-content>p {
    font-size:14px;
    line-height:1.7
}

.tag-list {
    list-style:none;
    padding:0;
    margin:20px 0;
    display:flex;
    gap:7px;
    flex-wrap:wrap
}

.tag-list li {
    border-radius:30px;
    background:var(--bg);
    border:1px solid var(--line);
    font-size:10px;
    padding:5px 10px;
    color:var(--muted)
}

.solution-content .text-link {
    font-size:13px
}

/* Small interface sketches illustrate possibilities, without portfolio claims. */
.solution-preview {
    margin-bottom:25px;
    border-radius:17px;
    background:var(--lilac);
    padding:20px;
    color:var(--ink);
    overflow:hidden
}
.preview-label {
    display:block;
    font-size:10px;
    font-weight:850;
    letter-spacing:.02em;
    margin-bottom:15px
}
.booking-flow {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px
}
.booking-flow>span {
    display:flex;
    flex:1;
    min-width:0;
    flex-direction:column;
    align-items:center;
    gap:8px;
    font-size:10px;
    font-weight:800;
    line-height:1.4;
    text-align:center
}
.booking-flow b {
    display:grid;
    place-items:center;
    width:39px;
    height:39px;
    border-radius:13px;
    background:var(--surface);
    font-size:12px
}
.booking-flow>span:last-child b {
    background:var(--ink);
    color:var(--bg)
}
.booking-flow>i {
    font-style:normal;
    color:var(--muted);
    padding-bottom:24px
}
.preview-workspace {
    padding:0;
    background:var(--peach);
    border:1px solid var(--line)
}
.preview-window-bar {
    display:flex;
    align-items:center;
    gap:4px;
    padding:12px 15px;
    border-bottom:1px solid color-mix(in srgb,var(--ink),transparent 93%)
}
.preview-window-bar>span {
    width:5px;
    height:5px;
    background:var(--accent);
    opacity:.45;
    border-radius:50%
}
.preview-window-bar small {
    margin-left:auto;
    font-size:8px;
    font-weight:800;
    color:var(--muted)
}
.workspace-grid {
    display:grid;
    grid-template-columns:1.6fr .65fr;
    gap:8px;
    padding:16px
}
.workspace-grid>span {
    background:var(--surface);
    border-radius:10px;
    padding:11px;
    font-size:10px;
    font-weight:800;
    display:flex;
    flex-direction:column;
    gap:6px
}
.workspace-grid>span:nth-child(2) {
    grid-row:span 2;
    background:var(--lilac);
    justify-content:center;
    align-items:center
}
.workspace-grid i {
    display:block;
    width:75%;
    height:4px;
    background:var(--line);
    border-radius:5px
}
.workspace-grid i:last-child {
    width:48%
}
.workspace-grid .brand-symbol {
    width:36px;
    height:36px;
    color:var(--ink)
}
.preview-connected {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0;
    min-height:125px
}
.preview-connected>span {
    font-size:10px;
    font-weight:800;
    line-height:1.5;
    text-align:center;
    max-width:85px
}
.preview-connected>i {
    flex:1;
    border-top:1px dashed var(--muted);
    margin-inline:12px
}
.preview-connected .connection-mark {
    flex-shrink:0;
    width:56px;
    height:56px;
    border-radius:17px;
    background:var(--ink);
    color:var(--bg);
    display:grid;
    place-items:center
}
.connection-mark .brand-symbol {
    width:32px;
    height:32px
}
.studio-values li {
    border:1px solid var(--line);
    border-radius:30px;
    padding:8px 12px;
    background:var(--surface)
}
.faq-list details[open] {
    background:var(--surface);
    border-radius:20px;
    padding:22px;
    margin-inline:-22px;
    border-bottom-color:transparent
}

/* Studio and process. */
.studio-section {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:75px;
    padding-block:110px
}

.studio-illustration {
    position:relative;
    isolation:isolate;
    padding:60px 0 20px
}

.studio-illustration img {
    position:relative;
    width:100%;
    z-index:2
}

.studio-blob {
    position:absolute;
    inset:10% 0 0 5%;
    background:var(--lilac);
    border-radius:48% 52% 44% 56%/60% 41% 59% 40%;
    transform:rotate(-6deg);
    opacity:.65
}

.studio-sticker {
    position:absolute;
    right:0;
    top:15px;
    background:var(--peach);
    border:3px solid var(--surface);
    font-size:14px;
    font-weight:850;
    padding:18px 22px;
    line-height:1.2;
    transform:rotate(9deg);
    border-radius:20px;
    z-index:3
}

.studio-sticker span {
    font-size:22px;
    margin-left:5px;
    color:var(--accent)
}

.studio-copy h2 {
    font-size:41px;
    line-height:1.18;
    margin-bottom:25px
}

.studio-copy h2 span {
    color:var(--display-accent)
}

.studio-copy>p {
    font-size:15px;
    margin-top:15px;
    line-height:1.8
}

.studio-values {
    list-style:none;
    padding:0;
    margin:27px 0 0;
    display:flex;
    gap:12px;
    flex-wrap:wrap
}

.studio-values li {
    font-size:11px;
    display:flex;
    align-items:center;
    gap:7px;
    font-weight:750
}

.studio-values li>span {
    color:var(--accent);
    font-size:18px
}

.process-section {
    background:var(--surface);
    border-block:1px solid var(--line)
}

.process-track {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    padding-top:10px
}
.process-track article {
    position:relative;
    display:flex;
    flex-direction:column;
    padding:27px 23px 23px;
    border:1px solid var(--line);
    background:var(--bg);
    border-radius:26px;
    transition:transform .3s,border-color .3s
}
.process-track article:hover {
    transform:translateY(-5px);
    border-color:color-mix(in srgb,var(--accent),var(--line) 65%)
}
.process-track h3 {
    font-size:21px;
    line-height:1.3;
    margin-bottom:12px
}
.process-track p {
    font-size:13px;
    line-height:1.75;
    max-width:230px;
    margin-bottom:24px
}
.process-track .step-number {
    position:absolute;
    top:27px;
    right:23px;
    font-size:13px;
    color:var(--muted)
}
.process-track .step-icon {
    width:64px;
    height:64px;
    border-radius:21px;
    font-size:30px;
    margin-bottom:26px
}
.step-outcome {
    display:block;
    border-top:1px solid var(--line);
    padding-top:15px;
    margin-top:auto;
    font-size:11px;
    line-height:1.5;
    font-weight:800;
    color:var(--ink)
}

.step-icon {
    width:78px;
    height:78px;
    border-radius:25px;
    display:grid;
    place-items:center;
    background:var(--lilac);
    color:var(--ink);
    font-size:37px;
    font-weight:700;
    margin-bottom:27px;
    transition:transform .5s
}

.step-02,.step-04 {
    background:var(--peach);
    color:var(--accent)
}

.process-track article:hover .step-icon {
    transform:rotate(-8deg) translateY(-5px)
}

.step-number {
    font-size:11px;
    font-weight:850;
    color:var(--accent);
    display:block;
    margin-bottom:7px
}

.faq-section {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:100px;
    padding-block:110px
}

.faq-heading h2 {
    font-size:42px;
    line-height:1.2
}

.faq-heading h2 span {
    color:var(--display-accent)
}

.faq-heading>p {
    margin-top:21px;
    font-size:15px
}

.faq-heading .text-link {
    margin-top:27px
}

.faq-list details {
    border-bottom:1px solid var(--line);
    padding:21px 0
}

.faq-list details:first-child {
    padding-top:0
}

.faq-list summary {
    font-weight:800;
    font-size:16px;
    line-height:1.5;
    display:flex;
    gap:25px;
    justify-content:space-between;
    list-style:none;
    cursor:pointer
}

.faq-list summary span {
    font-size:22px;
    flex-shrink:0;
    font-weight:500;
    transition:transform .3s
}

.faq-list details[open] summary span {
    transform:rotate(45deg)
}

.faq-list details p {
    font-size:14px;
    line-height:1.8;
    padding-top:15px;
    padding-right:30px
}

.cta-section {
    padding-bottom:95px
}

.cta-box {
    position:relative;
    background:var(--lilac);
    text-align:center;
    border-radius:45px;
    padding:65px 30px 55px;
    isolation:isolate;
    overflow:hidden
}

.cta-box h2 {
    font-size:clamp(40px,5vw,60px);
    line-height:1.07
}

.cta-box p {
    margin:20px auto 25px;
    font-size:15px
}

.cta-box .button {
    margin-bottom:14px
}

.cta-email {
    display:block;
    font-size:12px;
    font-weight:750;
    color:var(--muted);
    width:fit-content;
    margin:auto
}

.cta-mark {
    position:absolute;
    left:7%;
    top:23%;
    font-size:90px;
    color:var(--accent);
    animation:chip-float 10s ease-in-out infinite
}

.cta-watermark {
    position:absolute;
    right:6%;
    bottom:-40px;
    font-size:220px;
    color:color-mix(in srgb,var(--lavender),var(--ink) 12%);
    line-height:1;
    z-index:-1
}

.site-footer {
    padding-bottom:28px
}

.footer-top {
    display:flex;
    align-items:center;
    gap:35px;
    padding-bottom:40px
}

.footer-top .brand-lockup {
    width:143px
}

.footer-slogan {
    font-size:13px
}

.footer-top .text-link {
    margin-left:auto;
    font-size:13px
}

.footer-bottom {
    display:flex;
    gap:30px;
    justify-content:space-between;
    border-top:1px solid var(--line);
    padding-top:25px;
    font-size:10px;
    color:var(--muted)
}

.footer-bottom>div {
    display:flex;
    gap:25px
}

.footer-location {
    margin-right:auto
}

/* Contact, legal and the downloadable identity use the same visual language. */
.back-link {
    display:block;
    font-size:12px;
    color:var(--muted);
    margin-bottom:40px
}

.contact-page {
    padding-block:65px 85px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:95px;
    align-items:start
}

.contact-intro h1 {
    font-size:clamp(42px,4.8vw,64px);
    line-height:1.12
}

.contact-intro .eyebrow {
    margin-top:25px
}

.muted {
    color:var(--display-accent)
}

.contact-intro>p {
    font-size:15px;
    margin-top:27px
}

.contact-signature {
    display:flex;
    gap:15px;
    align-items:center;
    margin-top:37px
}

.brand-symbol {
    width:50px;
    height:50px
}

.brand-decoration {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    line-height:1;
}

.brand-decoration>.brand-symbol {
    display:block;
    width:1em;
    height:1em;
}

.process-track article:hover .step-01 {
    transform:translateY(-5px);
}

.contact-signature>span {
    font-size:9px;
    line-height:1.8;
    letter-spacing:.08em;
    font-weight:800
}

.contact-card {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:30px;
    padding:35px;
    margin-top:40px;
    box-shadow:var(--card-shadow)
}

.project-choices {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px
}

.project-choices button {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:70px;
    text-align:left;
    border:1px solid var(--line);
    background:var(--bg);
    border-radius:14px;
    font-size:12px;
    font-weight:750;
    padding:13px 15px;
    line-height:1.5
}

.project-choices button[aria-pressed=true] {
    background:var(--lilac);
    border-color:var(--lavender)
}

.project-choices button:hover {
    border-color:var(--accent)
}

.contact-email {
    margin:32px 0 20px
}

.contact-email>span:first-child {
    display:block;
    color:var(--muted);
    font-size:10px;
    letter-spacing:.1em;
    font-weight:850;
    margin-bottom:6px
}

.contact-email>a {
    font-size:clamp(20px,2.8vw,31px);
    font-weight:850;
    letter-spacing:-.025em
}

.copy-email {
    display:block;
    border:0;
    background:transparent;
    padding:10px 0;
    font-size:11px;
    color:var(--muted)
}

.copy-status {
    font-size:12px;
    display:block;
    min-height:18px;
    color:var(--accent)
}

.email-action {
    width:100%;
    font-size:13px
}

.contact-note {
    font-size:11px;
    line-height:1.6;
    margin-top:18px
}

.contact-prompts {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:95px;
    padding-bottom:100px
}

.contact-prompts>div p {
    font-size:14px;
    margin-bottom:14px
}

.contact-prompts>div p span {
    font-size:11px;
    color:var(--accent);
    margin-right:15px
}

.document-page {
    max-width:840px;
    padding-block:65px 110px
}

.document-page h1 {
    font-size:clamp(42px,5vw,66px);
    line-height:1.15
}

.prose {
    margin-top:55px
}

.prose h2 {
    font-size:25px;
    margin:35px 0 12px
}

.prose p {
    font-size:15px;
    margin-top:15px;
    line-height:1.9
}

.prose .intro {
    font-size:19px
}

.prose a {
    color:var(--ink);
    text-decoration:underline;
    text-underline-offset:4px
}

.prose .document-date {
    font-size:11px;
    margin-top:35px
}

.error-page {
    padding-block:100px 160px
}

.error-page h1 {
    font-size:clamp(40px,5vw,65px)
}

.error-page p {
    margin:25px 0
}

.brand-page {
    padding-top:55px
}

.brand-page h1 {
    font-size:65px
}

.full-stop {
    color:var(--display-accent)
}

.brand-hero {
    padding:80px 50px;
    background:var(--lilac);
    border-radius:32px;
    text-align:center;
    margin:40px 0 22px
}

.brand-hero img {
    width:min(610px,85%);
    margin:auto
}

.brand-hero p {
    margin-top:30px;
    font-size:15px;
    color:var(--ink)
}

:root[data-theme=dark] .brand-hero img {
    filter:brightness(0) invert(1)
}

.brand-story {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    padding:48px 0 60px;
}

.brand-story h2 {
    max-width:400px;
    margin-top:18px;
    font-size:clamp(30px,3.7vw,48px);
    line-height:1.15;
    letter-spacing:-.045em;
}

.brand-story p {
    color:var(--muted);
    line-height:1.75;
}

.brand-story p+p {
    margin-top:18px;
}

@media (max-width:700px) {
    .brand-story {
        grid-template-columns:1fr;
        gap:24px;
        padding:32px 0 42px;
    }
}

.brand-downloads {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}

.brand-tile {
    background:#fcf9f5;
    border:1px solid var(--line);
    color:#30223d;
    border-radius:25px;
    min-width:0;
    display:flex;
    flex-direction:column;
    padding:30px
}

.brand-tile>img {
    height:120px;
    object-fit:contain;
    margin-bottom:30px;
    width:100%
}

.brand-tile.ink {
    background:#30223d;
    color:#fcf9f5
}

.brand-tile.peach {
    background:#ffb28e
}

.brand-tile a {
    font-size:13px;
    display:flex;
    justify-content:space-between;
    gap:8px
}

.brand-tile .brand-icon {
    width:100px;
    margin-inline:auto
}

.palette {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-block:35px 70px;
    border-radius:20px;
    overflow:hidden
}

.palette>div {
    padding:25px;
    display:flex;
    flex-direction:column;
    gap:40px;
    font-size:13px;
    color:#30223d
}

.palette code {
    font-size:11px
}

.palette-milk {
    background:#fcf9f5;
    border:1px solid #e9e1e8
}

.palette-plum {
    background:#30223d;
    color:#fcf9f5!important
}

.palette-lavender {
    background:#dccded
}

.palette-apricot {
    background:#ffb28e
}

.social-assets {
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr;
    gap:35px;
    align-items:center
}

.social-assets h2 {
    font-size:38px
}

.social-assets p {
    font-size:14px;
    margin-top:18px
}

.social-assets img {
    border-radius:50%;
    width:100%;
    max-width:270px
}

.social-assets a>span {
    display:block;
    font-size:11px;
    text-align:center;
    margin-top:15px
}

.favicon-downloads {
    display:flex;
    gap:25px;
    align-items:center;
    margin-top:55px;
    padding:25px 0;
    border-block:1px solid var(--line);
    font-size:13px;
    flex-wrap:wrap
}

.brand-guidance {
    font-size:13px;
    max-width:680px;
    margin-top:25px
}

/* Motion keeps its place in the layout and can always be switched off. */
@keyframes soft-float {
    0%,100% {
        transform:translateY(0) rotate(0)
    }
    50% {
        transform:translateY(-11px) rotate(.7deg)
    }
}

@keyframes chip-float {
    0%,100% {
        translate:0 0
    }
    50% {
        translate:0 -13px
    }
}

@keyframes cursor-drift {
    0%,100% {
        transform:translate(0,0) rotate(-7deg)
    }
    40% {
        transform:translate(-17px,-18px) rotate(4deg)
    }
    70% {
        transform:translate(5px,-8px) rotate(-4deg)
    }
}

.motion-ready .reveal-pending {
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s,transform .7s
}

.motion-ready .reveal-pending.is-visible {
    opacity:1;
    transform:translateY(0)
}

.service-card:nth-child(2),.process-track article:nth-child(2) {
    transition-delay:.08s
}

.service-card:nth-child(3),.process-track article:nth-child(3) {
    transition-delay:.16s
}

.process-track article:nth-child(4) {
    transition-delay:.24s
}

.motion-paused *,.motion-offscreen * {
    animation-play-state:paused!important
}

.motion-paused .scene-layer {
    transform:none!important
}

.motion-paused [data-tilt] {
    transform:none!important
}

.motion-paused .reveal-pending {
    opacity:1;
    transform:none;
    transition:none
}

@media(min-width:1600px) {
    .wrap {
        width:min(1260px,calc(100% - 100px))
    }
    .hero {
        padding-top:50px
    }
    .atelier-scene {
        height:460px
    }
    .hero h1 {
        font-size:96px
    }
}

@media(max-width:1100px) {
    .wrap {
        width:calc(100% - 56px)
    }
    .desktop-nav {
        gap:20px
    }
    .brand-lockup {
        width:148px
    }
    .site-header .wordmark {
        margin-right:0
    }
    .nav-contact {
        gap:14px;
        padding-inline:16px
    }
    .solutions-layout,.faq-section {
        gap:55px
    }
    .studio-section {
        gap:40px
    }
    .studio-copy h2 {
        font-size:35px
    }
    .contact-page,.contact-prompts {
        gap:55px
    }
    .atelier-scene {
        height:380px
    }
    .chip-build {
        top:50px
    }
    .chip-design {
        top:42px
    }
    .chip-grow {
        top:20px
    }
    .floating-chip {
        padding:10px 15px
    }
}

@media(max-width:900px) {
    .desktop-nav {
        gap:17px;
        font-size:12px
    }
    .brand-lockup {
        width:135px
    }
    .nav-contact {
        display:none
    }
    .desktop-nav {
        margin-left:auto
    }
    .hero {
        padding-top:30px
    }
    .hero h1 {
        font-size:78px
    }
    .atelier-scene {
        height:330px;
        margin-top:15px
    }
    .scene-platform {
        height:55px
    }
    .chip-design {
        top:30px;
        left:7%
    }
    .chip-build {
        top:38px
    }
    .chip-grow {
        top:0;
        right:0
    }
    .floating-chip {
        font-size:11px
    }
    .floating-chip>span {
        font-size:15px
    }
    .scene-laptop {
        bottom:0
    }
    .scene-corner {
        bottom:30px
    }
    .scene-phone {
        bottom:25px
    }
    .scene-cursor {
        width:40px
    }
    .section-space {
        padding-block:75px
    }
    .solutions-intro h2 {
        font-size:43px
    }
    .solution-detail summary h3 {
        font-size:20px
    }
    .solutions-layout {
        gap:40px
    }
    .studio-section {
        gap:35px
    }
    .studio-copy h2 {
        font-size:30px
    }
    .studio-copy>p {
        font-size:13px
    }
    .studio-sticker {
        font-size:12px;
        top:0;
        padding:14px
    }
    .studio-values {
        gap:9px
    }
    .faq-section {
        gap:45px;
        padding-block:80px
    }
    .faq-heading h2 {
        font-size:35px
    }
    .faq-list summary {
        font-size:14px
    }
    .faq-heading>p {
        font-size:13px
    }
    .cta-mark {
        font-size:60px;
        left:5%
    }
    .cta-watermark {
        font-size:170px;
        right:1%
    }
    .footer-location {
        display:none
    }
    .contact-page {
        gap:35px;
        padding-top:40px
    }
    .contact-card {
        padding:24px
    }
    .contact-intro h1 {
        font-size:43px
    }
    .contact-intro>p {
        font-size:13px
    }
    .contact-email>a {
        font-size:24px
    }
    .brand-downloads {
        gap:14px
    }
    .brand-tile {
        padding:22px
    }
    .palette>div {
        padding:20px
    }
    .social-assets {
        gap:25px
    }
    .social-assets h2 {
        font-size:31px
    }
}

@media(max-width:720px) {
    .wrap {
        width:calc(100% - 40px)
    }
    .brand-lockup {
        width:139px
    }
    .desktop-nav {
        display:none
    }
    .theme-toggle {
        width:31px;
        height:31px
    }
    .language-switch {
        font-size:10px
    }

    .hero {
        padding-top:34px
    }
    .hello-note {
        font-size:10px;
        gap:7px;
        margin-bottom:21px
    }
    .hello-mark {
        font-size:17px
    }
    .hero h1 {
        font-size:clamp(60px,11vw,80px);
        line-height:1.02
    }
    .hero-copy p {
        font-size:14px;
        margin-top:19px;
        max-width:340px
    }
    .button {
        font-size:13px;
        min-height:48px;
        padding:12px 23px;
        gap:20px
    }
    .atelier-scene {
        height:clamp(260px,49vw,340px);
        margin-top:15px
    }
    .scene-laptop {
        width:62%;
        left:19%;
        bottom:7px
    }
    .scene-corner {
        width:43%;
        left:-5%;
        bottom:30px
    }
    .scene-phone {
        width:27%;
        right:-1%;
        bottom:36px
    }
    .scene-platform {
        left:0;
        bottom:13px;
        height:42px
    }
    .floating-chip {
        padding:8px 12px;
        border-radius:14px;
        font-size:9px;
        gap:7px
    }
    .floating-chip>span {
        font-size:13px
    }
    .chip-design {
        top:20px;
        left:5%;
        transform:rotate(-8deg)
    }
    .chip-build {
        top:32px;
        right:25%;
        transform:rotate(7deg)
    }
    .chip-grow {
        top:0;
        right:0
    }
    .scene-orbit {
        border-width:1.5px
    }
    .orbit-one {
        width:90px;
        height:85px;
        top:15px;
        left:7%
    }
    .orbit-two {
        width:65px;
        height:65px;
        top:40px
    }
    .scene-mark {
        font-size:20px
    }
    .scene-mark-one {
        top:70px;
        left:34%
    }
    .scene-mark-two {
        top:110px;
        right:1%
    }
    .scene-cursor {
        width:33px;
        right:20%;
        bottom:8px
    }
    .hero-foot {
        font-size:9px;
        margin-top:10px;
        padding-inline:0;
        gap:12px
    }
    .motion-toggle {
        font-size:9px;
        gap:4px;
        flex-shrink:0
    }
    .section-space {
        padding-block:65px
    }
    .section-heading {
        margin-bottom:30px
    }
    .section-heading h2 {
        font-size:35px
    }
    .section-heading h2 span {
        display:block
    }
    .section-heading p {
        font-size:13px;
        max-width:310px;
        margin-inline:auto
    }
    .eyebrow {
        font-size:9px;
        margin-bottom:13px;
        letter-spacing:.12em
    }
    .solutions-section {
        border-radius:38px 38px 0 0
    }
    .solutions-layout {
        grid-template-columns:1fr;
        gap:35px
    }
    .solutions-intro h2 {
        font-size:42px
    }
    .solutions-intro h2 br {
        display:none
    }
    .solutions-intro h2 span {
        margin-left:8px
    }
    .solutions-intro>p {
        max-width:520px;
        font-size:14px;
        margin-top:18px
    }
    .idea-note {
        font-size:12px;
        margin-top:20px;
        max-width:none
    }
    .idea-note>span {
        font-size:28px
    }
    .solutions-intro .concept-note {
        font-size:10px;
        margin-top:15px
    }
    .solution-detail summary h3 {
        font-size:21px
    }
    .solution-content>p {
        font-size:13px
    }
    .solution-content h4 {
        font-size:17px
    }
    .solution-content {
        padding-left:0
    }
    .studio-section {
        grid-template-columns:1fr;
        gap:35px
    }
    .studio-illustration {
        max-width:430px;
        width:100%;
        margin:auto;
        padding-top:40px
    }
    .studio-copy h2 {
        font-size:36px;
        line-height:1.18
    }
    .studio-copy>p {
        font-size:14px
    }
    .studio-values {
        gap:16px
    }
    .studio-values li {
        font-size:10px
    }
    .studio-sticker {
        right:10px
    }
    .step-icon {
        width:70px;
        height:70px;
        font-size:32px;
        border-radius:22px;
        margin-bottom:19px
    }
    .faq-section {
        grid-template-columns:1fr;
        gap:35px;
        padding-block:65px
    }
    .faq-heading h2 {
        font-size:36px
    }
    .faq-heading>p {
        font-size:14px
    }
    .faq-heading .text-link {
        margin-top:20px;
        font-size:13px
    }
    .faq-list summary {
        font-size:15px
    }
    .faq-list details p {
        font-size:13px
    }
    .cta-section {
        padding-bottom:60px
    }
    .cta-box {
        padding:50px 22px 42px;
        border-radius:30px
    }
    .cta-box h2 {
        font-size:43px
    }
    .cta-box p {
        font-size:13px;
        max-width:275px
    }
    .cta-mark {
        font-size:35px;
        left:5%;
        top:11%
    }
    .cta-watermark {
        font-size:130px;
        bottom:-22px;
        right:-20px
    }
    .footer-top {
        flex-wrap:wrap;
        gap:18px;
        padding-bottom:25px
    }
    .footer-top .brand-lockup {
        width:132px
    }
    .footer-slogan {
        font-size:11px
    }
    .footer-top .text-link {
        margin-left:auto;
        font-size:11px
    }
    .footer-bottom {
        flex-wrap:wrap;
        gap:15px;
        font-size:9px
    }
    .footer-bottom>div {
        gap:20px
    }
    .contact-page {
        grid-template-columns:1fr;
        gap:25px;
        padding-block:35px 45px
    }
    .back-link {
        margin-bottom:30px
    }
    .contact-intro h1 {
        font-size:49px;
        line-height:1.1
    }
    .contact-intro>p {
        font-size:14px
    }
    .contact-intro .eyebrow {
        margin-top:0
    }
    .contact-signature {
        margin-top:25px
    }
    .contact-card {
        margin-top:0;
        padding:26px
    }
    .contact-email>a {
        font-size:29px
    }
    .project-choices button {
        font-size:13px
    }
    .contact-prompts {
        grid-template-columns:1fr;
        gap:10px;
        padding-bottom:65px
    }
    .document-page {
        padding-block:35px 65px
    }
    .document-page h1 {
        font-size:45px
    }
    .prose {
        margin-top:35px
    }
    .prose p {
        font-size:14px
    }
    .prose .intro {
        font-size:17px
    }
    .prose h2 {
        font-size:24px
    }
    .error-page {
        padding-block:65px 120px
    }
    .error-page h1 {
        font-size:43px
    }
    .brand-page h1 {
        font-size:50px
    }
    .brand-hero {
        padding:45px 25px
    }
    .brand-hero img {
        width:95%
    }
    .brand-hero p {
        font-size:12px;
        margin-top:20px
    }
    .brand-downloads {
        grid-template-columns:1fr
    }
    .brand-tile {
        padding:25px
    }
    .brand-tile>img {
        height:85px;
        margin-bottom:25px
    }
    .palette {
        grid-template-columns:1fr 1fr;
        margin-bottom:45px
    }
    .palette>div {
        gap:25px
    }
    .social-assets {
        grid-template-columns:1fr 1fr;
        gap:25px
    }
    .social-assets>div {
        grid-column:1/-1
    }
    .social-assets h2 {
        font-size:34px
    }
    .social-assets h2 br {
        display:none
    }
    .social-assets p {
        font-size:13px
    }
    .favicon-downloads {
        font-size:11px;
        gap:18px;
        margin-top:35px
    }
    .brand-guidance {
        font-size:12px
    }
}

@media(max-width:560px) {
    .service-web img {
        width:96%;
        height:230px
    }
    .hero-foot>span {
        max-width:190px
    }
    .hero-foot {
        align-items:center
    }
    .services {
        padding-top:55px
    }
    .hero-copy p {
        max-width:315px
    }
    .atelier-scene {
        height:260px;
        max-width:430px;
        margin-inline:-10px;
        width:calc(100% + 20px)
    }
    .scene-laptop {
        bottom:8px;
        left:18%;
        width:65%
    }
    .scene-phone {
        bottom:42px
    }
    .scene-corner {
        bottom:37px;
        width:47%;
        left:-3%
    }
    .chip-design {
        top:33px;
        left:5%
    }
    .chip-build {
        top:55px;
        right:23%
    }
    .chip-grow {
        top:20px;
        right:0
    }
    .orbit-one {
        top:33px
    }
    .orbit-two {
        top:72px
    }
    .scene-cursor {
        bottom:13px
    }
    .hero h1 {
        font-size:64px
    }
    .footer-top {
        gap:16px
    }
    .footer-top .text-link {
        margin-left:0
    }
    .footer-slogan {
        margin-left:auto
    }
}

@media(max-width:360px) {
    .wrap {
        width:calc(100% - 32px)
    }
    .brand-lockup {
        width:119px
    }
    .hero h1 {
        font-size:56px
    }
    .hello-note {
        font-size:9px
    }
    .hero-copy p {
        font-size:13px
    }
    .atelier-scene {
        height:235px
    }
    .floating-chip {
        padding:7px 10px;
        font-size:8px
    }
    .hero-foot {
        font-size:8px
    }
    .hero-foot>span {
        max-width:155px
    }
    .section-heading h2 {
        font-size:31px
    }
    .solutions-intro h2 {
        font-size:36px
    }
    .solution-detail summary h3 {
        font-size:18px
    }
    .studio-copy h2 {
        font-size:31px
    }
    .studio-values {
        gap:10px
    }
    .cta-box h2 {
        font-size:37px
    }
    .contact-intro h1 {
        font-size:42px
    }
    .contact-card {
        padding:21px
    }
    .contact-email>a {
        font-size:25px
    }
    .project-choices button {
        font-size:12px;
        padding:10px
    }
    .footer-slogan {
        font-size:10px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*::before,*::after {
        animation:none!important;
        transition:none!important
    }
    .reveal-pending {
        opacity:1!important;
        transform:none!important
    }
    .scene-layer,[data-tilt] {
        transform:none!important
    }
}

.motion-paused .service-card:hover img {
    transform:none
}

@media(prefers-color-scheme:dark) {
    :root:not([data-theme=light]) .brand-hero img {
        filter:brightness(0) invert(1);
    }
}

/* Responsive rules for the service showcase and floating navigation. */
@media(max-width:1100px) {
    .site-header {
        gap:18px;
        padding-inline:20px
    }
    .header-tools {
        margin-left:0;
        gap:12px
    }
    .service-card-copy {
        padding:25px;
        max-width:65%
    }
    .service-card h3 {
        font-size:26px
    }
    .service-mobile h3 {
        font-size:34px
    }
    .service-card p {
        font-size:13px
    }
    .service-mobile .service-card-copy {
        max-width:100%
    }
    .service-card-foot {
        padding:0 25px 23px
    }
    .service-caption {
        right:15px;
        font-size:10px
    }
    .process-track {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:16px
    }
    .process-track p {
        max-width:100%
    }
}
@media(max-width:900px) {
    .site-header {
        height:68px;
        gap:15px
    }
    .header-tools {
        margin-left:auto
    }
    .service-grid {
        grid-template-rows:repeat(2,minmax(265px,auto));
        gap:16px
    }
    .service-card-copy {
        padding:24px 21px;
        max-width:74%
    }
    .service-card h3 {
        font-size:25px
    }
    .service-mobile h3 {
        font-size:32px
    }
    .service-card p {
        font-size:12px;
        max-width:190px
    }
    .service-card img {
        height:150px;
        width:55%;
        right:-3%;
        bottom:44px
    }
    .service-mobile img {
        width:100%;
        height:300px;
        right:-2%;
        bottom:50px
    }
    .service-card-foot {
        padding:0 21px 20px
    }
    .service-tag {
        max-width:67%;
        font-size:9px
    }
    .service-caption {
        top:38%;
        font-size:9px;
        padding:9px 11px
    }
    .service-orbit {
        width:260px;
        height:310px;
        top:64%
    }
    .round-arrow {
        width:35px;
        height:35px
    }
    .solutions-intro {
        position:static
    }
    .solution-detail {
        padding:20px
    }
}
@media(max-width:720px) {
    html {
        scroll-padding-top:100px
    }
    .site-header {
        width:calc(100% - 24px);
        height:64px;
        top:10px;
        margin-top:10px;
        padding:0 14px;
        gap:10px
    }
    .site-header .wordmark {
        margin-right:0
    }
    .site-header .brand-lockup {
        width:125px
    }
    .header-tools {
        margin-left:auto;
        gap:10px
    }
    .theme-toggle {
        width:38px;
        height:38px
    }
    .mobile-menu>summary {
        width:34px;
        height:40px
    }
    .mobile-menu nav {
        right:-5px;
        top:52px;
        width:min(320px,calc(100vw - 40px))
    }
    .hero {
        padding-top:35px
    }
    .hello-note {
        font-size:9px;
        padding:7px 10px;
        gap:6px
    }
    .hero-actions {
        gap:18px;
        flex-wrap:wrap
    }
    .hero-secondary {
        font-size:12px;
        padding:10px 0
    }
    .hero .button {
        padding:13px 20px;
        gap:15px
    }
    .future-word::after {
        bottom:-7px;
        height:10px;
        border-width:3px
    }
    .hero-copy p {
        margin-top:25px
    }
    .service-grid {
        grid-template-columns:1fr;
        grid-template-rows:auto;
        gap:16px
    }
    .service-card {
        min-height:275px;
        border-radius:27px
    }
    .service-mobile {
        grid-row:auto;
        min-height:460px
    }
    .service-card-copy {
        max-width:62%;
        padding:25px
    }
    .service-card h3 {
        font-size:28px
    }
    .service-mobile h3 {
        font-size:33px
    }
    .service-card p {
        font-size:13px;
        max-width:230px
    }
    .service-index {
        font-size:9px;
        margin-bottom:12px
    }
    .service-card img {
        height:190px;
        width:52%;
        right:-2%;
        bottom:38px
    }
    .service-mobile img {
        height:275px;
        width:77%;
        right:4%;
        bottom:35px
    }
    .service-caption {
        top:39%;
        right:15px;
        font-size:10px
    }
    .service-orbit {
        top:62%;
        width:265px;
        height:265px
    }
    .service-card-foot {
        padding:0 25px 22px
    }
    .service-tag {
        font-size:10px
    }
    .round-arrow {
        width:38px;
        height:38px
    }
    .service-footnote {
        max-width:310px;
        font-size:11px;
        align-items:flex-start
    }
    .solution-detail {
        border-radius:20px;
        padding:20px
    }
    .solution-detail summary h3 {
        font-size:19px
    }
    .solution-detail summary {
        gap:11px
    }
    .solution-content {
        padding-left:0
    }
    .solution-preview {
        padding:16px
    }
    .preview-workspace {
        padding:0
    }
    .process-track {
        gap:14px;
        padding-top:0
    }
    .process-track article {
        padding:22px 18px 18px;
        border-radius:23px
    }
    .process-track h3 {
        font-size:19px
    }
    .process-track p {
        font-size:13px
    }
    .process-track .step-number {
        right:18px;
        top:22px;
        font-size:11px
    }
    .process-track .step-icon {
        width:53px;
        height:53px;
        font-size:27px;
        border-radius:18px;
        margin-bottom:20px
    }
    .step-outcome {
        font-size:10px
    }
    .faq-list details[open] {
        margin-inline:-12px;
        padding:20px 12px
    }
}
@media(max-width:380px) {
    .site-header .brand-lockup {
        width:111px
    }
    .site-header {
        gap:7px;
        padding-inline:11px
    }
    .header-tools {
        gap:7px
    }
    .hero-actions {
        gap:10px
    }
    .hero-secondary {
        font-size:11px
    }
    .hero .button {
        font-size:12px;
        padding-inline:17px
    }
    .service-card-copy {
        max-width:68%;
        padding:23px
    }
    .service-card h3 {
        font-size:25px
    }
    .service-mobile h3 {
        font-size:31px
    }
    .service-card p {
        font-size:12px
    }
    .service-caption {
        font-size:9px
    }
    .process-track {
        grid-template-columns:1fr
    }
    .process-track article {
        padding:24px
    }
    .process-track .step-number {
        right:24px;
        top:24px
    }
    .process-track p {
        font-size:14px;
        margin-bottom:18px
    }
    .step-outcome {
        font-size:11px
    }
    .booking-flow>span {
        font-size:9px
    }
}

@media(max-width:1200px) {
    .nav-contact {
        display:none
    }
}
@media(max-width:1024px) {
    .desktop-nav {
        display:none
    }
    .header-tools {
        margin-left:auto
    }
    .mobile-menu {
        display:block;
        position:relative
    }
    .mobile-menu>summary {
        width:30px;
        height:36px;
        display:flex;
        flex-direction:column;
        gap:6px;
        justify-content:center;
        align-items:center;
        cursor:pointer;
        list-style:none
    }
    .mobile-menu>summary::-webkit-details-marker {
        display:none
    }
    .mobile-menu>summary span {
        width:20px;
        height:1.5px;
        background:var(--ink);
        border-radius:2px;
        transition:transform .2s
    }
    .mobile-menu[open]>summary span:first-child {
        transform:translateY(3.75px) rotate(45deg)
    }
    .mobile-menu[open]>summary span:last-child {
        transform:translateY(-3.75px) rotate(-45deg)
    }
    .mobile-menu nav {
        position:absolute;
        right:0;
        top:50px;
        width:min(300px,calc(100vw - 40px));
        display:flex;
        flex-direction:column;
        background:var(--surface);
        border:1px solid var(--line);
        box-shadow:0 15px 40px #37263f16;
        border-radius:22px;
        padding:16px;
        z-index:30
    }
    .mobile-menu nav a {
        padding:11px 13px;
        font-size:14px;
        font-weight:800;
        border-radius:12px;
        display:flex;
        align-items:center;
        justify-content:space-between
    }
    .mobile-menu nav a:hover {
        background:var(--lilac)
    }
    .mobile-menu nav svg {
        width:17px;
        height:17px
    }
}
@media(max-width:720px) {
    .store-links--desktop {
        display:none
    }
    .store-links--menu {
        display:flex;
        gap:10px;
        padding:14px 0 0;
        margin-top:8px;
        border-top:1px solid var(--line)
    }
    .store-links--menu .store-label {
        display:inline
    }
    .mobile-menu nav .store-button {
        width:auto;
        min-height:44px;
        height:auto;
        flex:1;
        gap:8px;
        padding:10px 8px;
        justify-content:center;
        border:1px solid var(--line);
        border-radius:14px;
        font-size:11px;
        font-weight:800
    }
    .mobile-menu nav .store-button svg {
        width:20px;
        height:20px
    }
    .language-switch {
        padding:2px;
        gap:1px
    }
    .language-option {
        width:32px;
        min-height:30px
    }
}

/* Published app support: same quiet studio palette, readable long-form pages. */
.app-centre{padding-block:52px 100px}.app-centre>.back-link{display:inline-block;margin-bottom:54px}.app-centre-heading{display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:end;margin-bottom:56px}.app-centre h1{font-size:clamp(40px,5vw,70px);line-height:1.12;letter-spacing:-.045em;margin:16px 0 22px}.app-centre-heading>p,.app-product-hero>div>p{font-size:19px;line-height:1.7;color:var(--muted);max-width:560px}.app-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.app-tile{position:relative;display:block;padding:30px;border:1px solid var(--line);border-radius:26px;background:var(--surface);transition:transform .25s,border-color .25s;min-width:0}.app-tile:hover{transform:translateY(-5px);border-color:var(--lavender)}.app-icon{width:68px;height:68px;object-fit:contain;border-radius:19px;margin-bottom:22px}.app-icon-letter{display:inline-grid;place-items:center;background:var(--lilac);color:var(--ink);font-weight:900;font-size:24px;letter-spacing:-.06em}.app-tile:nth-child(3n+2) .app-icon-letter{background:var(--peach)}.app-tile-platforms{font-size:12px;letter-spacing:.06em;color:var(--muted);margin-bottom:12px}.app-tile h2{font-size:23px;line-height:1.25;letter-spacing:-.04em;margin:0 0 12px}.app-tile>p{line-height:1.65;color:var(--muted);min-height:54px;margin-bottom:30px}.app-tile-link{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;font-weight:800}.app-tile-link svg{width:18px}.app-help-strip{display:flex;align-items:center;justify-content:space-between;gap:28px;border-top:1px solid var(--line);padding-top:36px;margin-top:64px}.app-help-strip>svg{width:48px;flex:none}.app-help-strip h2{font-size:25px;letter-spacing:-.035em;margin:0 0 8px}.app-help-strip p{font-size:15px;line-height:1.6;color:var(--muted);max-width:560px}.app-help-strip .button{white-space:nowrap}.app-product-hero{display:grid;grid-template-columns:1.25fr 1fr;gap:80px;align-items:center}.app-product-hero .app-icon{display:block}.app-product-hero h1{max-width:600px}.app-store-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.app-product-note{border:1px solid var(--line);border-radius:32px;padding:40px;background:var(--lilac)}.app-product-note>svg{display:block;width:52px;height:52px;margin-bottom:32px}.app-product-note h2{font-size:34px;letter-spacing:-.04em;line-height:1.15;margin:18px 0}.app-product-note p{line-height:1.7;color:var(--muted)}.app-document-nav{display:flex;gap:8px;flex-wrap:wrap;padding-block:22px;border-block:1px solid var(--line)}.app-document-nav a{padding:10px 16px;border-radius:999px;font-size:14px;font-weight:750;border:1px solid var(--line);background:var(--surface)}.app-document-nav a[aria-current=page]{background:var(--ink);color:var(--bg)}.app-document-nav a:hover{border-color:var(--muted)}.app-product-note .app-document-nav{margin-top:26px;border:0;padding:0}.app-document-heading{max-width:780px;margin-bottom:30px}.app-document-heading h1{font-size:clamp(38px,5vw,62px)}.app-document-heading>p{font-size:19px;line-height:1.7;color:var(--muted)}.app-document-date{display:block;font-size:13px;color:var(--muted);margin-top:22px}.app-document-grid{display:grid;grid-template-columns:245px minmax(0,760px);gap:70px;justify-content:space-between;padding-top:48px}.app-toc{align-self:start;position:sticky;top:110px}.app-toc ol{list-style:none;padding:0;margin:24px 0 32px}.app-toc li{margin:0 0 15px;font-size:14px;color:var(--muted);line-height:1.45}.app-toc a:hover{color:var(--ink)}.app-document-body>section{scroll-margin-top:110px;border-bottom:1px solid var(--line);padding:0 0 32px;margin:0 0 32px}.app-section-number{font-size:12px;color:var(--muted);font-weight:800}.app-document-body h2{font-size:25px;line-height:1.3;letter-spacing:-.025em;margin:12px 0 18px}.app-document-body p,.app-document-body li{font-size:16px;line-height:1.85;color:var(--muted);overflow-wrap:anywhere}.app-document-body p{margin:0 0 16px}.app-document-body ul{padding-left:22px}.app-document-body li+li{margin-top:10px}.app-document-body a{overflow-wrap:anywhere}.app-document-contact{background:var(--lilac);padding:28px;border-radius:22px;margin-top:32px}.app-document-contact>a{font-weight:850;text-decoration:underline;text-underline-offset:5px}.app-document-contact p:last-child{font-size:13px;margin-top:20px}.app-centre a:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
@media(max-width:900px){.app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.app-centre-heading,.app-product-hero{gap:36px}.app-document-grid{grid-template-columns:190px minmax(0,1fr);gap:34px}.app-help-strip{flex-wrap:wrap}.app-product-note{padding:28px}}
@media(max-width:620px){.app-centre{padding-block:28px 64px}.app-centre>.back-link{margin-bottom:34px}.app-centre-heading,.app-product-hero,.app-document-grid{grid-template-columns:1fr;gap:24px}.app-centre-heading{margin-bottom:32px}.app-centre h1{font-size:43px}.app-grid{grid-template-columns:1fr;gap:14px}.app-tile{padding:26px}.app-tile>p{min-height:0}.app-toc{position:static;border-bottom:1px solid var(--line);padding-bottom:20px}.app-toc ol{columns:2;gap:22px}.app-toc li{break-inside:avoid}.app-document-nav{gap:6px}.app-document-nav a{padding:9px 12px;font-size:12px}.app-document-grid{padding-top:26px}.app-product-note h2{font-size:29px}.app-help-strip .button{font-size:13px}.app-document-body h2{font-size:23px}}
@media(prefers-reduced-motion:reduce){.app-tile{transition:none}.app-tile:hover{transform:none}}