:root {
    color-scheme: dark;
    --font-display: "Bricolage Grotesque", "Instrument Sans", sans-serif;
    --font-body: "Instrument Sans", "Arial", sans-serif;
    --font-mono: "DM Mono", monospace;
    font-family: var(--font-body);
    background: var(--ink);
    color: var(--paper);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 0; }
body, button, input, select, textarea { font-family: var(--font-body); }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }

.container { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.hero {
    min-height: 100svh;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.navbar {
    position: fixed;
    z-index: 20;
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease, background .25s ease;
}
.nav-container {
    display: flex;
    align-items: center;
}
.logo { display: inline-flex; flex: 0 0 auto; align-items: center; min-width: 0; padding: 0; }
.nav-wordmark {
    display: block;
    padding-right: .14em;
    font: 600 19px/1 var(--font-body);
    white-space: nowrap;
}
.footer-wordmark {
    padding-right: .14em;
    font: 600 24px/1.2 var(--font-body);
    white-space: nowrap;
}
.nav-menu, .footer-nav ul {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav-menu a, .footer-nav a {
    transition: color .2s ease;
}
.nav-toggle {
    display: none;
    border: 0;
    padding: 10px 0 10px 12px;
    background: none;
    cursor: pointer;
}
.bar { display: block; width: 24px; height: 1px; margin: 6px 0; background: var(--paper); transition: transform .2s ease; }

section:not(.hero) { scroll-margin-top: 74px; }
.introduction { border-bottom: 1px solid var(--line); }
.introduction h1 {
    margin: 0 0 30px;
    font: 400 clamp(46px, 7vw, 88px)/1.12 var(--font-display);
    letter-spacing: -.045em;
}
.introduction p {
    margin: 0;
    color: var(--muted);
    font-size: clamp(15px, 1.35vw, 18px);
    line-height: 1.8;
}
.introduction .container { position: relative; }
.section-title { margin: 0; font: 400 clamp(38px, 4.8vw, 62px)/1.12 var(--font-display); }
.projects, .services, .team, .contact { padding: clamp(90px, 12vw, 155px) 0; }
.projects { border-bottom: 1px solid var(--line); }
.project-tech { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.project-tech span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 4px; color: #b4b4b8; font: 10px var(--font-mono); }
.project-link { margin-top: 27px; font-size: 12px; }

.team { border-bottom: 1px solid var(--line); }
.team-role { color: var(--gold); font: 10px var(--font-mono); letter-spacing: .15em; text-transform: uppercase; }
.team-bio { margin: 30px 0; max-width: 540px; color: var(--muted); line-height: 1.8; }
.team-portfolio {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-top: 30px;
    padding: 0 20px;
    border: 1px solid var(--gold);
    font: 600 12px var(--font-body);
    transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.team-portfolio:not(:disabled):hover { background: transparent; color: var(--gold); }
.team-portfolio:disabled { opacity: .58; cursor: not-allowed; }
.team-portfolio .arrow-icon { display: inline-block; width: 16px; height: 16px; margin-left: 16px; vertical-align: middle; }
.contact-methods { display: flex; flex-wrap: wrap; gap: 25px; align-items: center; margin-top: 32px; }
.whatsapp-btn, .email-btn { font-size: 13px; }
.whatsapp-btn .arrow-icon, .email-btn .arrow-icon { display: inline-block; margin-left: 7px; color: var(--gold); vertical-align: middle; }
.copy-email { border: 0; background: none; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; font-size: 11px; cursor: pointer; }
.copy-email[hidden] { display: none; }
.copy-feedback { min-height: 18px; margin: 12px 0 0; color: var(--gold); font-size: 12px; }
.project-inquiry { max-width: 820px; margin-top: 95px; padding-top: 38px; border-top: 1px solid var(--line); }
.project-inquiry h3 { margin: 0 0 34px; font: 500 28px var(--font-display); }
#inquiryForm { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 18px; }
.form-group { display: flex; flex-direction: column; gap: 9px; }
.form-group-wide, .submit-btn, .form-message { grid-column: 1 / -1; }
.form-group label { color: #c3c3c6; font-size: 11px; }
.form-group label span { color: var(--gold); }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; border: 0; border-bottom: 1px solid #36373c; border-radius: 0;
    outline: 0; padding: 12px 0; background: transparent; color: var(--paper); font-size: 14px;
}
.form-group select { appearance: none; }
.form-group select option { background: var(--surface); }
.form-group textarea { resize: vertical; min-height: 125px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--gold); }
.form-group input::placeholder, .form-group textarea::placeholder { color: #6f7076; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.submit-btn {
    justify-self: start; min-width: 210px; padding: 16px 20px; border: 1px solid var(--gold); font-size: 12px; font-weight: 600; cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.submit-btn:disabled { opacity: .65; cursor: wait; }
.submit-btn .arrow-icon { display: inline-block; margin-left: 16px; vertical-align: middle; }
.form-message { min-height: 20px; margin: -4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.form-message.success { color: #c7b17f; }
.form-message.error { color: #e6a19a; }

.footer { padding: 55px 0 25px; border-top: 1px solid var(--line); }
.footer-content { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 40px; }
.footer-logo svg { display: block; }
.footer-logo p { margin: 5px 0; color: var(--muted); font: 10px var(--font-mono); }
.footer-nav ul { gap: 20px; }
.footer-nav a, .footer-contact a { font-size: 11px; }
.footer-contact { display: flex; justify-content: flex-end; gap: 18px; align-items: center; color: var(--muted); }
.social-links { display: flex; gap: 12px; }
.social-links a { color: var(--gold); }
.footer-bottom { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--line); color: #6f7076; font: 10px var(--font-mono); }
.footer-bottom p { margin: 0; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
[hidden] { display: none !important; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 800px) {
    .container, .nav-container { width: min(100% - 40px, 620px); }
    .nav-menu {
        position: absolute; display: none;
        flex-direction: column; align-items: stretch; border-bottom: 1px solid var(--line);
    }
    .nav-menu.open { display: flex; }
    .nav-menu li { border-bottom: 1px solid var(--line); }
    .nav-menu a { display: block; }
    .footer-content { grid-template-columns: 1fr 1fr; }
    .footer-nav { grid-column: 1 / -1; grid-row: 2; }
    .footer-nav ul { flex-wrap: wrap; }
    .footer-contact { flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 560px) {
    .container, .nav-container { width: calc(100% - 36px); }
    .navbar, .nav-container { min-height: 66px; height: 66px; }
    .nav-menu { top: 65px; }
    .projects, .services, .team, .contact { padding: 82px 0; }
    .contact-methods { align-items: flex-start; flex-direction: column; gap: 18px; }
    .project-inquiry { margin-top: 68px; }
    #inquiryForm { grid-template-columns: 1fr; gap: 21px; }
    .form-group-wide, .submit-btn, .form-message { grid-column: auto; }
    .footer-content { grid-template-columns: 1fr; gap: 29px; }
    .footer-nav { grid-column: auto; grid-row: auto; }
    .footer-nav ul { gap: 17px; }
    .footer-contact { justify-content: flex-start; }
    .footer-bottom { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
}

/* Landscape-led identity */

.hero {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: max(720px, 100svh);
    align-items: stretch;
    background: #222820;
    isolation: isolate;
}
.eyebrow {
    font: 10px var(--font-mono);
    text-transform: uppercase;
}
.arrow-icon { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.nav-container { margin: 0; gap: 0; }
.nav-menu { gap: clamp(18px, 2.4vw, 34px); }
.nav-menu a { font-size: 10px; }
/* Kept in the bottom-left corner, and the robot's patrol starts to the right
   of wherever this line ends (script.js measures it), so neither covers the
   other at any window width. */
.introduction { padding: clamp(110px, 15vw, 190px) 0; border-color: var(--line); }
.introduction .container { max-width: 1120px; }
.introduction .eyebrow { display: block; margin-bottom: 24px; }
.introduction h1 { max-width: 940px; font-size: clamp(48px, 7.5vw, 94px); }
.introduction p { max-width: 560px; }
.brand-values { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 75px; border-top: 1px solid var(--line); }
.brand-values article { display: flex; flex-direction: column; gap: 34px; min-height: 174px; padding: 23px 18px 0 0; }
.brand-values article > span { color: var(--gold); font: 20px var(--font-display); }
.brand-values h2 { margin: 0 0 8px; color: var(--paper); font: 500 15px var(--font-body); }
.brand-values p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.brand-values-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-top: 56px; }
.brand-values-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.projects, .services, .team, .contact { border-color: var(--line); }
.section-title { letter-spacing: -.045em; }
.footer { border-color: var(--line); }
@media (max-width: 800px) {
    .nav-container {
        min-height: 46px;
        margin: 0;
    }
    .nav-toggle {
        display: flex;
        width: 46px;
        height: 46px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 8px;
        border: 1px solid rgba(235,234,220,.2);
        border-radius: 2px;
        background: rgba(16,17,18,.72);
        backdrop-filter: blur(12px);
    }
    .nav-toggle .bar {
        width: 22px;
        margin: 2.5px 0;
        transform-origin: center;
        transition: transform .25s ease, opacity .2s ease;
    }
    .nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
    .nav-menu {
        right: 0;
        left: 0;
        width: auto;
        padding: 8px 18px;
        box-shadow: 0 18px 48px rgba(0,0,0,.24);
    }
    .nav-menu.open { animation: nav-menu-enter .22s ease both; }
    .nav-menu li:last-child { border-bottom: 0; }
    .nav-menu a { padding: 15px 2px; }
    .brand-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .brand-values article { min-height: 145px; }
}
@media (max-width: 560px) {
    .hero { min-height: 760px; min-height: 100svh; }
    .introduction { padding: 100px 0; }
    .brand-values { margin-top: 50px; }
    .brand-values-heading { align-items: flex-start; flex-direction: column; gap: 10px; margin-top: 42px; }
    .brand-values article { min-height: 138px; gap: 24px; padding-right: 12px; }
    .brand-values h2 { font-size: 13px; }
    .brand-values p { font-size: 10px; }
}
.project-track-viewport {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 56px -32px 0;
    padding: 0 max(32px, calc((100vw - 1180px) / 2)) 24px;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scrollbar-width: none;
    touch-action: pan-x;
}
.project-track-viewport::-webkit-scrollbar { display: none; }
.project-track { display: flex; width: max-content; }
.project-track-group { display: flex; flex: 0 0 auto; align-items: stretch; gap: 20px; padding-right: 20px; }
.project-card {
    flex: 0 0 clamp(340px, 36vw, 450px);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface);
    animation: project-card-arrive .8s cubic-bezier(.2,.7,.2,1) both;
}
.project-card:nth-child(2) { animation-delay: .12s; }
.project-card:nth-child(3) { animation-delay: .24s; }
.project-card-number { position: absolute; z-index: 1; bottom: 17px; left: 20px; color: #f2efe5; font: 9px var(--font-mono); letter-spacing: .12em; }
.project-card-copy { display: flex; min-height: 245px; flex-direction: column; align-items: flex-start; padding: 24px; }
.project-card-copy h3 { margin: 15px 0 10px; font: 500 clamp(23px, 2.8vw, 32px)/1.1 var(--font-display); letter-spacing: -.035em; }
.project-card-copy > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.project-card-copy .project-tech { margin-top: 18px; }
.project-card-copy .project-link { margin-top: auto; padding-top: 18px; }
.project-track-viewport:focus-visible { outline: 1px solid var(--gold); outline-offset: -5px; }
.project-controls { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.project-control {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(235,234,220,.25);
    color: var(--paper);
    cursor: pointer;
    transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}
.project-control svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.project-control:hover:not(:disabled) { transform: translateY(-2px); }
.project-control:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.project-control:disabled { opacity: .35; cursor: default; }
.project-controls[hidden] { display: none; }
.content-empty { margin: 56px 0 0; padding: 24px; border: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.7; }
.team > .container > .eyebrow { display: block; margin-bottom: 17px; }
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 58px; }
.member-card { padding: 17px 17px 24px; border: 1px solid var(--line); animation: fade-up .65s ease both; }
.member-card:nth-child(2) { animation-delay: .1s; }
.member-card:nth-child(3) { animation-delay: .2s; }
.member-photo-frame { display: grid; aspect-ratio: 1.1; place-items: center; overflow: hidden; margin-bottom: 23px; }
.member-photo { width: 100%; height: 100%; object-fit: cover; }
.member-initials { color: rgba(235,232,218,.72); font: 400 clamp(58px, 8vw, 104px)/1 var(--font-display); letter-spacing: -.08em; }
.member-card h3 { font: 500 clamp(24px, 3vw, 36px)/1.12 var(--font-display); }
.member-card .team-bio { margin: 0; font-size: 12px; line-height: 1.8; }
.member-card .team-portfolio { min-height: 42px; margin-top: 22px; border-radius: 0; background: transparent; color: var(--paper); }
.member-card .team-portfolio:hover { background: var(--gold); color: var(--ink); }
.team-empty { grid-column: 1 / -1; margin-top: 0; }
.social-links { flex-wrap: wrap; }
.social-links span[aria-disabled="true"] { color: #71756d; font-size: 11px; }
.social-links span[aria-disabled="true"][title] { cursor: help; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; }
@keyframes nav-menu-enter { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes project-card-arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 800px) {
    .project-track-viewport { margin-right: -20px; margin-left: -20px; padding-right: 20px; padding-left: 20px; }
    .project-card { flex-basis: min(76vw, 390px); }
    .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .project-track-viewport { margin-top: 38px; margin-right: -18px; margin-left: -18px; padding-right: 18px; padding-left: 18px; }
    .project-track-group { gap: 12px; padding-right: 12px; }
    .project-card { flex-basis: min(82vw, 350px); }
    .project-card-copy { min-height: 235px; padding: 21px; }
    .team-grid { grid-template-columns: 1fr; margin-top: 38px; }
    .member-photo-frame { aspect-ratio: 1.25; }
    .footer-bottom { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 340px) {
    .project-track-viewport { margin-inline: 0; padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
    :root { scroll-behavior: auto; }
    .project-track-viewport { scroll-behavior: auto; }
    .project-card { animation: none; opacity: 1; transform: none; }
}
.navbar .nav-menu, .navbar .nav-toggle {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.services {
    position: relative;
    overflow: hidden;
    padding-block: clamp(88px, 11vw, 144px);
    background:
        radial-gradient(ellipse at 18% 44%, rgba(193,189,139,.055), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.012), transparent 55%);
}
.services::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(193,189,139,.42), transparent);
    content: "";
}
.services-heading {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(18px, 4vw, 60px);
}
.services-heading .eyebrow { display: block; margin-bottom: 19px; }
.services-heading .section-title { font-size: clamp(42px, 5.3vw, 70px); }
.services-note { display: flex; max-width: 330px; flex-direction: column; gap: 10px; margin: 0 0 6px; font-size: 11px; line-height: 1.6; }
.services-link { text-underline-offset: 3px; }
.services-link:hover { color: #f0f5e2; }

/* Services deck: six disciplines as index cards. One card lifts and brightens
   at a time and writes its outcome to the signal line beneath, so the section
   reads as a working index instead of a drifting row of tiles. */
.service-deck {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: clamp(26px, 4vw, 44px);
}
/* Short laptop screens would otherwise push the deck past the fold. */
@media (min-width: 1180px) and (max-height: 700px) {
    .services.journey-panel .service-deck { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .services.journey-panel .service-card-copy { display: none; }
    .services.journey-panel .service-card-title { margin-top: 0; }
}
.service-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: clamp(150px, 17vw, 196px);
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    overflow: hidden;
    padding: 18px 20px 20px;
    border: 1px solid rgba(235,234,220,.14);
    border-radius: 4px;
    background:
        linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,0) 46%),
        rgba(12,20,16,.42);
    color: var(--paper);
    cursor: pointer;
    text-align: left;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s ease, background .3s ease, box-shadow .35s ease;
}
.service-card::after {
    position: absolute;
    right: -18px;
    bottom: -30px;
    width: 120px;
    height: 120px;
    border: 1px solid rgba(193,189,139,.14);
    border-radius: 50%;
    content: "";
    transition: transform .5s ease, border-color .3s ease;
}
.service-card:hover, .service-card.is-active {
    transform: translateY(-5px);
    background:
        linear-gradient(160deg, rgba(214,226,186,.1), rgba(255,255,255,0) 52%),
        rgba(20,34,25,.78);
    box-shadow: 0 22px 44px rgba(0,0,0,.34);
}
.service-card.is-active { box-shadow: 0 24px 50px rgba(0,0,0,.4), inset 0 0 0 1px rgba(211,226,176,.18); }
.service-card.is-active::after { transform: scale(1.35); border-color: rgba(211,226,176,.32); }
.service-card:focus-visible { outline: 2px solid #d5e5ad; outline-offset: 3px; }
.service-card-meta { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.service-card-index { font: 10px var(--font-mono); letter-spacing: .16em; }
.service-card-tag { color: rgba(240,238,222,.46); font: 8px var(--font-mono); letter-spacing: .16em; }
.service-card-title {
    margin-top: auto;
    color: inherit;
    font: 500 clamp(15px, 1.45vw, 19px)/1.16 var(--font-display);
    letter-spacing: -.02em;
}
.service-card-copy {
    max-width: 100%;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 900px) {
    .service-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .services-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
    .services-note { max-width: none; }
}
@media (max-width: 560px) {
    .services { padding-block: 78px; }
    .services-heading .section-title { font-size: clamp(40px, 12vw, 56px); }
    /* One column on phones: two cramped cards pushed the second one off-screen. */
    .service-deck { grid-template-columns: minmax(0, 1fr); gap: 7px; margin-top: 16px; }
    .service-card { min-height: 0; gap: 5px; padding: 11px 13px 12px; }
    .service-card-tag { display: none; }
    .service-card-title { margin-top: 0; font-size: 14px; }
    .service-card-copy { font-size: 9.5px; -webkit-line-clamp: 2; line-clamp: 2; }
    .services-note { gap: 7px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .service-card, .service-card::after { transition: none; }
}

.brand-values-heading + .brand-values {
    gap: 12px;
    margin-top: 20px;
    border: 0;
}
.brand-values article.scratch-value {
    position: relative;
    isolation: isolate;
    min-height: 238px;
    gap: 22px;
    overflow: hidden;
    padding: 23px 20px;
    border: 1px solid rgba(235,234,220,.15);
    transition: border-color .3s ease, transform .3s ease, background .3s ease;
}
.brand-values article.scratch-value:hover { transform: translateY(-4px); }
.brand-values article.scratch-value > .brand-value-letter {
    font: 700 38px/1 "UnifrakturCook", "Old English Text MT", serif;
    text-shadow: 0 0 25px rgba(193,189,139,.15);
}
.brand-values article.scratch-value > div { position: relative; z-index: 0; }
.brand-values article.scratch-value h2 { margin: 0 0 9px; font: 500 17px var(--font-display); }
.brand-values article.scratch-value p { font-size: 10px; }
.brand-values article.scratch-value.is-revealed > .brand-value-letter { animation: value-mark-reveal .8s cubic-bezier(.16,1,.3,1) both; }
.scratch-overlay {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    touch-action: none;
    transition: opacity .65s ease;
}
.scratch-overlay:focus-visible { outline: 2px solid var(--gold); outline-offset: -5px; }
.scratch-value.is-revealed .scratch-overlay { opacity: 0; pointer-events: none; }
.brand-values article.scratch-value.is-revealed { background-color: rgba(193,189,139,.035); }

@keyframes value-mark-reveal {
    0% { opacity: 0; transform: translateY(10px) scale(.8); }
    70% { opacity: 1; transform: translateY(-2px) scale(1.08); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 800px) {
    .brand-values article.scratch-value { min-height: 210px; padding: 20px 16px; }
}
@media (max-width: 560px) {
    .brand-values article.scratch-value { min-height: 190px; padding: 19px 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .brand-values article.scratch-value:hover { transform: none; }
}
.site-shell { position: relative; z-index: 1; }
.horizontal-journey {
    width: 100%;
    height: 100svh;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
}
.horizontal-journey::-webkit-scrollbar { display: none; }
.journey-track {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 100%;
    height: 100%;
}
.journey-panel {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    min-height: 100svh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
}
.hero.journey-panel {
    position: relative;
    height: 100%;
    min-height: 100svh;
}
.story-panel { overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; }
.story-panel::-webkit-scrollbar { width: 5px; }
.story-panel::-webkit-scrollbar-thumb { background: rgba(193,189,139,.32); }
.story-panel > section { background: transparent; }
.story-panel .introduction {
    border: 0;
}
.story-panel .introduction .container { max-width: 1120px; }
.story-panel .introduction .eyebrow { margin-bottom: 12px; }
.story-panel .introduction h1 {
    max-width: 720px;
    margin-bottom: 14px;
    font-size: clamp(40px, 5.2vw, 64px);
    line-height: 1;
}
.story-panel .introduction p { max-width: 690px; font-size: 13px; line-height: 1.65; }
.story-panel .brand-values-heading { margin-top: 25px; }
.story-panel .brand-values-heading p { font-size: 10px; }
.story-panel .brand-values-heading + .brand-values { gap: 8px; margin-top: 12px; }
.story-panel .brand-values article.scratch-value {
    min-height: 110px;
    gap: 10px;
    padding: 12px 10px;
}
.story-panel .brand-values article.scratch-value > .brand-value-letter { font-size: 27px; }
.story-panel .brand-values article.scratch-value h2 { font-size: 13px; }
.story-panel .brand-values article.scratch-value p { font-size: 9px; }
.story-panel .brand-values article.scratch-value .scratch-overlay { opacity: .96; }
.story-panel .services {
    padding: 12px 0 26px;
    background: transparent;
}
.story-panel .services::before { display: none; }
.story-panel .services-heading .eyebrow { margin-bottom: 6px; }
.story-panel .services-heading .section-title { font-size: clamp(30px, 3.6vw, 42px); }
.story-panel .team > .container > .eyebrow { margin-bottom: 7px; }
.projects.journey-panel > .container > .eyebrow { display: block; margin-bottom: 10px; }
.projects.journey-panel .project-track-viewport {
    margin: 16px 0 0;
    padding: 6px 0 10px;
    scroll-snap-type: x mandatory;
}
.projects.journey-panel .project-track-group { align-items: center; gap: clamp(22px, 3vw, 44px); padding-right: 12px; }
.projects.journey-panel .project-card {
    display: flex;
    flex: 0 0 clamp(245px, 28vw, 330px);
    flex-direction: column;
    align-items: center;
    overflow: visible;
    border: 0;
    background: transparent;
    animation: none;
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.projects.journey-panel .project-card:hover { transform: perspective(1000px) rotateY(-3deg) translateY(-5px); }
.project-disc {
    position: relative;
    width: min(100%, 300px);
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid rgba(240,238,222,.38);
    border-radius: 50%;
    animation: project-disc-spin 72s linear var(--disc-delay, 0s) infinite;
}
.project-disc::before, .project-disc::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: inherit;
    content: "";
    pointer-events: none;
}
.project-disc::before {
    mix-blend-mode: screen;
}
.project-disc::after {
    background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.2), transparent 38%, rgba(5,8,6,.42) 100%);
}
.project-disc-image { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; filter: saturate(.72) brightness(.77); }
.project-disc-grooves {
    position: absolute;
    z-index: 2;
    inset: 7%;
    border: 1px solid rgba(240,238,222,.22);
    border-radius: 50%;
    box-shadow: 0 0 0 15px rgba(240,238,222,.035), 0 0 0 31px rgba(240,238,222,.045), 0 0 0 47px rgba(240,238,222,.035);
    pointer-events: none;
}
.project-disc-core {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    display: grid;
    width: 25%;
    aspect-ratio: 1;
    place-items: center;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(245,242,230,.7);
    border-radius: 50%;
    box-shadow: 0 0 0 7px rgba(17,21,15,.42), 0 0 22px rgba(0,0,0,.46);
    font: 400 clamp(26px, 3vw, 38px)/1 var(--font-wordmark);
    animation: project-disc-counter-spin 72s linear var(--disc-delay, 0s) infinite;
}
.projects.journey-panel .project-card-number {
    bottom: 11%;
    left: 50%;
    z-index: 3;
    transform: translateX(-50%);
    font-size: 8px;
    text-shadow: 0 1px 5px #000;
    animation: project-disc-number-counter-spin 72s linear var(--disc-delay, 0s) infinite;
}
.projects.journey-panel .project-card-copy {
    width: 100%;
    min-height: 170px;
    align-items: center;
    padding: 18px 10px 8px;
    text-align: center;
}
.projects.journey-panel .project-card-copy .eyebrow { font-size: 8px; }
.projects.journey-panel .project-card-copy h3 { margin: 8px 0; font-size: clamp(21px, 2.2vw, 28px); }
.projects.journey-panel .project-card-copy > p { max-width: 290px; font-size: 10px; line-height: 1.6; }
.projects.journey-panel .project-card-copy .project-tech { justify-content: center; margin-top: 10px; }
.projects.journey-panel .project-card-copy .project-link { margin-top: 7px; padding-top: 4px; }
.projects.journey-panel .project-controls { margin-top: 0; }
@keyframes project-disc-spin { to { transform: rotate(1turn); } }
@keyframes project-disc-counter-spin { to { transform: translate(-50%, -50%) rotate(-1turn); } }
@keyframes project-disc-number-counter-spin { to { transform: translateX(-50%) rotate(-1turn); } }

@media (max-width: 800px) {
    .story-panel .brand-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .story-panel .brand-values article.scratch-value { min-height: 94px; }
    .projects.journey-panel .project-card { flex-basis: min(76vw, 310px); }
    .project-disc { width: min(100%, 280px); }
}
@media (max-width: 560px) {
    .hero.journey-panel { min-height: 100svh; }
    .story-panel .introduction h1 { font-size: clamp(36px, 10vw, 48px); }
    .story-panel .services { padding-top: 8px; }
    .projects.journey-panel .project-track-group { gap: 18px; }
    .projects.journey-panel .project-card { flex-basis: min(76vw, 295px); }
    .project-disc { width: min(100%, 250px); }
    .projects.journey-panel .project-card-copy { min-height: 150px; padding-top: 14px; }
    .projects.journey-panel .project-card-copy > p { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
    .project-disc {
        animation: none !important;
        transform: none !important;
    }
    .horizontal-journey { scroll-behavior: auto; scroll-snap-type: none; }
}

:root {
    --surface: #0a0f0c;
    --paper: #eef3ec;
    --muted: #9fae9f;
    --gold: #8fe39e;
    --line: rgba(143, 227, 158, .14);
    --font-wordmark: "Manrope", "Instrument Sans", sans-serif;
}
.navbar, .navbar.scrolled {
    top: 16px;
    right: max(24px, calc((100% - 1340px) / 2));
    left: max(24px, calc((100% - 1340px) / 2));
    width: auto;
    min-height: 54px;
}
.nav-container {
    width: 100%;
    height: 54px;
    padding-inline: 18px;
}
.nav-wordmark, .footer-wordmark {
    color: var(--paper);
    font-family: var(--font-wordmark);
    font-weight: 800;
    letter-spacing: -.055em;
}
.nav-wordmark { font-size: 21px; }
.footer-wordmark { font-size: 28px; }
.nav-menu a, .footer-nav a {
    color: rgba(237,241,232,.74);
    font: 500 10px var(--font-mono);
    letter-spacing: .045em;
    text-transform: uppercase;
}
.nav-menu a:hover, .footer-nav a:hover { color: #d3e6a1; }
.eyebrow {
    color: #d2dfa7;
    letter-spacing: .14em;
}
.story-panel .introduction { position: relative; }
.story-panel .introduction::after {
    position: absolute;
    top: 76px;
    right: max(32px, calc((100% - 1180px) / 2));
    width: min(27vw, 300px);
    aspect-ratio: 1;
    border: 1px solid rgba(192,214,178,.15);
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle, transparent 0 19px, rgba(192,214,178,.12) 20px, transparent 21px 38px),
        radial-gradient(circle, rgba(119,163,137,.12), transparent 67%);
    content: "";
    pointer-events: none;
    animation: topo-drift 32s ease-in-out infinite alternate;
}
.story-panel .introduction .container { z-index: 1; }
.story-panel .introduction h1, .section-title {
    color: #edf1e8;
    text-shadow: 0 0 38px rgba(167,196,157,.08);
}
.story-panel .introduction p { color: #aab8ad; }
.brand-values article.scratch-value {
    border-color: rgba(199,218,191,.17);
    border-radius: 4px;
    background:
        linear-gradient(135deg, rgba(173,205,172,.055), transparent 55%),
        rgba(16,28,22,.58);
    box-shadow: inset 0 1px 0 rgba(230,239,221,.035);
}
.brand-values article.scratch-value:hover {
    border-color: rgba(197,218,159,.5);
    background-color: rgba(28,43,32,.75);
}
.brand-values article.scratch-value > .brand-value-letter { color: #d3dfa8; }
.brand-values article.scratch-value h2 { color: #e4ecdf; }
.brand-values article.scratch-value p { color: #a3b1a4; }
.scratch-overlay { opacity: .97; }
.services-heading .eyebrow, .service-card-index { color: #d2dfa7; }
.services-heading .section-title { color: var(--paper); }
.service-card { border-color: rgba(199,218,191,.2); }
.service-card:hover, .service-card.is-active { border-color: rgba(211,226,176,.5); }
.service-card.is-active { border-color: #cfe0a8; }
.team-grid { gap: 14px; }
.member-card {
    border-color: rgba(199,218,191,.17);
    border-radius: 4px;
    background: linear-gradient(145deg, rgba(28,43,34,.74), rgba(15,26,20,.82));
    box-shadow: inset 0 1px 0 rgba(230,239,221,.04);
}
.member-photo-frame {
    border: 1px solid rgba(199,218,191,.12);
    background:
        repeating-radial-gradient(circle at 50% 50%, transparent 0 16px, rgba(199,218,191,.06) 17px, transparent 18px 34px),
        linear-gradient(145deg, #26382c, #131e17);
}
.project-inquiry {
    background: rgba(16,28,22,.78);
}
.project-disc {
    border-color: rgba(201,224,184,.52);
    background: #18251d;
    box-shadow: 0 20px 60px rgba(0,0,0,.44), 0 0 0 1px rgba(197,218,159,.16), 0 0 36px rgba(117,166,129,.12);
}
.project-disc::before {
    background:
        repeating-radial-gradient(circle, transparent 0 13px, rgba(222,239,209,.17) 14px, transparent 15px 21px),
        linear-gradient(135deg, rgba(239,247,226,.28), transparent 24% 54%, rgba(197,218,159,.2) 68%, transparent 76%);
}
.project-disc-core {
    border-color: rgba(231,241,217,.68);
    color: #f0f3e8;
}
.projects.journey-panel .project-card-copy h3 { color: #edf1e8; }
.projects.journey-panel .project-card-copy > p { color: #a9b5aa; }
.project-control {
    border-radius: 3px;
    border-color: rgba(199,218,191,.28);
    background: rgba(13,23,17,.52);
}
.project-control:hover:not(:disabled) { border-color: #cadb9c; background: #cadb9c; color: #111a14; }
.contact { background: linear-gradient(145deg, rgba(19,35,26,.94), rgba(11,20,15,.97)); }
.project-inquiry, .contact-methods { border-color: rgba(199,218,191,.17); }
#inquiryForm input, #inquiryForm select, #inquiryForm textarea {
    border-color: rgba(199,218,191,.2);
    background: rgba(8,16,12,.55);
    color: var(--paper);
}
.submit-btn, .whatsapp-btn, .email-btn, .team-portfolio {
    border-radius: 3px;
    background: #cadb9c;
    color: #142017;
}
.submit-btn:hover, .whatsapp-btn:hover, .email-btn:hover, .team-portfolio:hover {
    background: #dce8b8;
    color: #101a13;
}
.footer-bottom { border-top-color: rgba(199,218,191,.14); }

@keyframes topo-drift {
    0% { transform: translate3d(0,0,0) rotate(-8deg); }
    100% { transform: translate3d(10px,8px,0) rotate(8deg); }
}
@media (max-width: 800px) {
    .navbar, .navbar.scrolled {
        top: 10px;
        right: 12px;
        left: 12px;
        min-height: 48px;
    }
    .nav-container { height: 48px; padding-inline: 12px; }
    .nav-menu {
        top: 48px;
        border: 1px solid rgba(226,236,215,.12);
        border-top: 0;
        background: rgba(12,20,17,.92);
        backdrop-filter: blur(12px);
    }
    .story-panel .introduction::after { right: 28px; width: 170px; opacity: .65; }
}
@media (max-width: 560px) {
    .story-panel .introduction::after { top: 55px; right: 18px; width: 125px; }
    .story-panel .brand-values article.scratch-value { border-radius: 3px; }
}
/* The copy sits a little higher on the tall desktop slide, which leaves the
   bottom band free for the robot to walk through without crossing the link. */
/* ---- The speech bubble ----
   Fixed to the viewport and placed from script.js with the robot's real
   on-screen position (centre, head top, and which way it faces), so it stays
   over the robot's head even while the robot is walking under it. */
.robot-hello {
    position: fixed;
    z-index: 26;
    top: 0;
    left: 0;
    width: max-content;
    max-width: min(232px, calc(100vw - 24px));
    padding: 10px 14px;
    /* Position follows the robot instantly; only the pop (--hello-pop) eases. */
    transform: translate3d(var(--hello-x, 20px), var(--hello-y, 200px), 0) translate(-50%, calc((1 - var(--hello-pop, 0)) * 8px)) scale(calc(.88 + var(--hello-pop, 0) * .12));
    transform-origin: 50% 100%;
    border: 1px solid rgba(211,226,176,.38);
    border-radius: 16px 16px 16px 4px;
    background: rgba(14,25,19,.97);
    box-shadow: 0 14px 34px rgba(0,0,0,.38);
    color: #e7eddc;
    font-size: 11px;
    line-height: 1.45;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, --hello-pop .45s cubic-bezier(.34, 1.56, .64, 1);
    will-change: transform;
}
@property --hello-pop { syntax: "<number>"; inherits: false; initial-value: 0; }
/* Tail pointing down at the robot's head. */
.robot-hello::after {
    position: absolute;
    top: 100%;
    left: var(--hello-tail, 50%);
    width: 10px;
    height: 10px;
    transform: translate(-50%, -55%) rotate(45deg);
    border-right: 1px solid rgba(211,226,176,.38);
    border-bottom: 1px solid rgba(211,226,176,.38);
    background: rgba(14,25,19,.97);
    content: "";
}
.robot-hello.is-visible { opacity: 1; --hello-pop: 1; }
.assistant-panel[hidden] { display: none !important; }
.assistant-panel {
    position: fixed;
    z-index: 35;
    right: 24px;
    bottom: 24px;
    display: flex;
    width: min(420px, calc(100vw - 32px));
    max-height: min(680px, calc(100svh - 48px));
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
    padding: 22px;
    color: var(--paper);
}
.assistant-panel:focus { outline: 2px solid rgba(202,219,156,.65); outline-offset: 3px; }
.assistant-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.assistant-panel-header .eyebrow { font-size: 8px; }
.assistant-panel-header h2 { margin: 8px 0 0; font: 500 24px/1.15 var(--font-display); }
.assistant-close, .assistant-form button {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(199,218,191,.23);
    background: rgba(8,16,12,.48);
    color: var(--paper);
    cursor: pointer;
}
.assistant-close svg, .assistant-form button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.assistant-close:hover { border-color: #cadb9c; color: #cadb9c; }
.assistant-intro, .assistant-footnote { margin: 0; color: #aeb9aa; font-size: 11px; line-height: 1.6; }
.assistant-messages {
    display: flex;
    min-height: 120px;
    max-height: 260px;
    flex-direction: column;
    gap: 9px;
    overflow-y: auto;
    padding: 13px;
    border: 1px solid rgba(199,218,191,.12);
    scrollbar-width: thin;
}
.assistant-message { max-width: 88%; margin: 0; padding: 10px 12px; font-size: 11px; line-height: 1.55; }
.assistant-message-guide { align-self: flex-start; border: 1px solid rgba(199,218,191,.16); color: #e4ecdf; }
.assistant-message-user { align-self: flex-end; }
.assistant-reply-link { display: block; margin-top: 8px; color: #d7e8ad; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.assistant-message-user .assistant-reply-link { color: #263d2d; }
.assistant-suggestions { display: flex; flex-wrap: wrap; gap: 7px; }
.assistant-suggestions button {
    padding: 7px 10px;
    border: 1px solid rgba(199,218,191,.2);
    border-radius: 20px;
    color: #d3ddc8;
    font-size: 10px;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}
.assistant-form { display: flex; align-items: center; gap: 8px; }
.assistant-form input {
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(199,218,191,.2);
    outline: none;
    color: var(--paper);
    font-size: 11px;
}
.assistant-form input::placeholder { color: #929e91; }
.assistant-form button { border-color: #cadb9c; }
.assistant-footnote a { color: #d5e5ad; text-underline-offset: 3px; }
.assistant-footnote a:hover { color: #f0f3e8; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    clip-path: inset(50%);
}

.projects.journey-panel, .services.journey-panel, .contact.journey-panel {
    display: grid;
    align-items: center;
    padding: 82px 0 44px;
}
.projects.journey-panel > .container { width: min(1320px, calc(100% - 72px)); }
.projects.journey-panel .project-track-viewport { margin-top: 20px; }
.services.journey-panel > .container { width: min(1160px, calc(100% - 72px)); }
.services.journey-panel .services-heading .eyebrow { margin-bottom: 10px; }

/* On the wide slides the section scale is compact; the deck gets a little of
   that back so titles and the signal line read comfortably. */
/* The slide scrolls vertically rather than squeezing the deck: nothing is ever
   cut off in order to fit a short window, and the bottom padding keeps the CTA
   clear of the robot's patrol lane. */
.services.journey-panel {
    display: flex;
    align-items: flex-start;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: 92px 0 24px;
    scrollbar-width: thin;
    scrollbar-color: rgba(193,189,139,.3) transparent;
}
/* Bottom clearance keeps the CTA in its own strip above the robot's lane. */
.services.journey-panel > .container { padding-bottom: 26px; }
.services.journey-panel .service-deck { gap: 10px; margin-top: 16px; }
.services.journey-panel .service-card { min-height: 134px; gap: 7px; padding: 14px 17px 15px; }
.services.journey-panel .service-card-title { font-size: 16px; }
.services.journey-panel .service-card-copy { font-size: 10.5px; line-height: 1.5; }

@media (max-height: 780px) and (min-width: 901px) {
    .services.journey-panel { padding-top: 78px; }
    .services.journey-panel .service-deck { margin-top: 12px; }
    .services.journey-panel .service-card { min-height: 120px; padding: 11px 15px 12px; }
    .services.journey-panel .service-card-title { font-size: 15px; }
    .services.journey-panel .service-card-copy { font-size: 10px; -webkit-line-clamp: 2; line-clamp: 2; }
}
.story-panel .introduction { padding: 84px 0 20px; }
.story-panel .introduction h2 {
    margin: 0 0 14px;
    color: #edf1e8;
    line-height: 1;
    letter-spacing: -.045em;
}
.story-panel .team { padding: 30px 0 55px; border-bottom: 0; }
.story-panel .team .section-title { margin-top: 10px; }
.story-panel .team-grid { margin-top: 26px; }
.story-panel .brand-values article.scratch-value h2 { color: #e4ecdf; }
.contact.journey-panel { overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; }
.contact.journey-panel > .container { width: min(900px, calc(100% - 72px)); padding-bottom: 24px; }
.contact.journey-panel .section-title { max-width: 800px; }
.contact.journey-panel .contact-methods { margin-top: 20px; }
.contact.journey-panel .project-inquiry { margin-top: 28px; padding-top: 24px; }
.contact.journey-panel .project-inquiry h3 { margin-bottom: 22px; }
.contact.journey-panel #inquiryForm { gap: 16px 18px; }
.contact.journey-panel .form-group textarea { min-height: 90px; }
.contact.journey-panel .form-group input, .contact.journey-panel .form-group select,
.contact.journey-panel .form-group textarea { padding-block: 9px; font-size: 13px; }

@media (max-width: 800px) {
    .projects.journey-panel > .container, .services.journey-panel > .container,
    .contact.journey-panel > .container { width: calc(100% - 48px); }

    .story-panel .introduction { padding-top: 82px; }
}
@media (max-width: 560px) {

    .robot-hello { max-width: calc(100vw - 20px); font-size: 10.5px; padding: 9px 12px; }
    .assistant-panel { right: 12px; bottom: 12px; width: calc(100vw - 24px); max-height: min(620px, calc(100svh - 24px)); gap: 11px; padding: 17px; }
    .assistant-panel-header h2 { font-size: 21px; }
    .assistant-messages { min-height: 100px; max-height: 220px; }
    .assistant-suggestions { gap: 6px; }
    .assistant-suggestions button { padding: 7px 9px; font-size: 9px; }
    .projects.journey-panel, .services.journey-panel, .contact.journey-panel { padding: 74px 0 28px; }
    .projects.journey-panel > .container, .services.journey-panel > .container,
    .contact.journey-panel > .container { width: calc(100% - 36px); }
    .projects.journey-panel .project-track-viewport { margin-top: 12px; }
    .services.journey-panel { padding-top: 74px; }

    .services.journey-panel .service-deck { gap: 7px; margin-top: 12px; }
    .services.journey-panel .service-card { min-width: 0; min-height: 0; gap: 4px; padding: 9px 11px 10px; }
    .services.journey-panel .service-card-title { margin-top: 0; font-size: 13px; }
    .services.journey-panel .service-card-copy { font-size: 8.5px; -webkit-line-clamp: 2; line-clamp: 2; }
    .services.journey-panel .services-note { font-size: 9px; }
    .services.journey-panel > .container { padding-bottom: 66px; }
    .story-panel .introduction { padding-top: 74px; }
    .story-panel .introduction p { font-size: 11px; }
    .story-panel .brand-values-heading { align-items: flex-start; flex-direction: column; gap: 6px; margin-top: 18px; }
    .story-panel .brand-values-heading .eyebrow { font-size: 8px; }
    .story-panel .brand-values article.scratch-value { min-height: 86px; gap: 8px; padding: 9px; }
    .story-panel .brand-values article.scratch-value > .brand-value-letter { font-size: 24px; }
    .story-panel .brand-values article.scratch-value h2 { font-size: 12px; }
    .story-panel .brand-values article.scratch-value p { font-size: 8px; line-height: 1.45; }
    .story-panel .team { padding-top: 18px; }
    .contact.journey-panel .project-inquiry { margin-top: 22px; }
    .contact.journey-panel #inquiryForm { grid-template-columns: 1fr; gap: 14px; }
    .contact.journey-panel .form-group-wide, .contact.journey-panel .submit-btn,
    .contact.journey-panel .form-message { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .story-panel .introduction::after { animation: none; }
}

/* ==========================================================================
   Backdrop
   The slides are see-through: every one shows the same world, drawn in
   script.js. The slide transition itself lives in "Slide journey" below.
   ========================================================================== */
/* Each slide's words and cards sit above its decorations. */
.journey-panel > .container { position: relative; z-index: 1; }
/* No solid fills under the slides, so the world shows through. */
.team, .projects.journey-panel, .story-panel, .contact.journey-panel { background: transparent; }

/* ==========================================================================
   Slide journey
   One slide fills the screen at a time. script.js changes slides (wheel,
   trackpad, keys, swipes, links) with a turn: the old slide turns away in
   3D while the next one turns in, both blurred sideways as they move.
   ========================================================================== */
:root {
    --slide-ms: 1100ms;
    --slide-ease: cubic-bezier(.77, 0, .175, 1);
}
.horizontal-journey.is-slider {
    overflow: clip;
    scroll-snap-type: none;
    scroll-behavior: auto;
    touch-action: pan-y;
}
/* The slides lie on top of each other; only the current one, and the one
   being wiped away, are shown. */
#journey.is-slider .journey-panel { position: absolute; inset: 0; scroll-snap-align: none; }
#journey.is-slider .journey-panel:not(.is-current):not(.is-leaving) { display: none; }
#journey.is-slider .journey-panel.is-current { z-index: 2; }
#journey.is-slider .journey-panel.is-leaving { z-index: 1; pointer-events: none; }
.is-slider .journey-panel:focus, .is-slider .journey-panel:focus-visible { outline: none; }

/* ---- Navbar: slide counter, active pill, progress line ---- */
.nav-brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.nav-counter {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding-left: 16px;
    border-left: 1px solid rgba(226, 236, 215, .16);
    font: 500 9px var(--font-mono);
    letter-spacing: .14em;
}
.nav-counter-num {
    --roll: 1;
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 1.4em;
    font-size: 12px;
    line-height: 1.4;
}
.nav-counter-num > span { display: block; }
.nav-counter-num > .is-leaving { position: absolute; inset: 0; animation: counter-out .7s var(--slide-ease) both; }
.nav-counter-num > .is-entering { animation: counter-in .7s var(--slide-ease) both; }
@keyframes counter-out { to { opacity: 0; translate: 0 calc(-110% * var(--roll)); } }
@keyframes counter-in { from { opacity: 0; translate: 0 calc(110% * var(--roll)); } }

.nav-container { position: relative; }
.nav-menu a { position: relative; z-index: 1; transition: color .35s ease; }
.nav-indicator {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 0;
    width: var(--ind-w, 0px);
    height: 30px;
    margin-top: -15px;
    translate: var(--ind-x, 0px) 0;
    border: 1px solid rgba(210, 232, 164, .3);
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transition: translate .7s cubic-bezier(.34, 1.4, .5, 1), width .7s cubic-bezier(.34, 1.4, .5, 1), opacity .3s ease;
}
.nav-indicator.is-ready { opacity: 1; }
.navbar::after {
    position: absolute;
    bottom: -1px;
    height: 1px;
    content: "";
    transform-origin: 0 50%;
    scale: var(--journey-progress, .2) 1;
    transition: scale var(--slide-ms) var(--slide-ease);
    pointer-events: none;
}

/* ---- Reveal animations ----
   Hidden only once script.js has set things up (.js-reveal), so the page is
   never left blank if scripts fail. Animations fill backwards only, so after
   playing they hand control back to each element's normal styles. */
.js-reveal [data-reveal="up"]:not(.is-in),
.js-reveal [data-reveal="scale"]:not(.is-in),
.js-reveal [data-reveal="fade"]:not(.is-in),
.js-reveal [data-reveal="words"]:not(.is-in) .rw { opacity: 0; animation: none; }
.js-reveal [data-reveal].is-in { opacity: 1; }
.js-reveal [data-reveal="up"].is-in { animation: rv-up 1s cubic-bezier(.16, 1, .3, 1) var(--rd, 0ms) backwards; }
.js-reveal [data-reveal="scale"].is-in { animation: rv-scale 1.15s cubic-bezier(.16, 1, .3, 1) var(--rd, 0ms) backwards; }
.js-reveal [data-reveal="fade"].is-in { animation: rv-fade 1.3s ease var(--rd, 0ms) backwards; }
.rw { display: inline-block; transform-origin: 0 100%; }
.js-reveal [data-reveal="words"].is-in .rw {
    opacity: 1;
    animation: rv-word 1s cubic-bezier(.16, 1, .3, 1) calc(var(--rd, 0ms) + var(--wi, 0) * 65ms) backwards;
}
@keyframes rv-up {
    from { opacity: 0; translate: 0 34px; filter: blur(10px); }
    to { opacity: 1; translate: 0 0; filter: none; }
}
@keyframes rv-scale {
    from { opacity: 0; translate: 0 42px; scale: .9; filter: blur(8px); }
    to { opacity: 1; translate: 0 0; scale: 1; filter: none; }
}
@keyframes rv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rv-word {
    from { opacity: 0; translate: 0 .55em; rotate: 5deg; filter: blur(12px); }
    to { opacity: 1; translate: 0 0; rotate: 0deg; filter: none; }
}

/* ---- Pointer effects ---- */
.pointer-glow {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    width: 560px;
    height: 560px;
    margin: -280px 0 0 -280px;
    border-radius: 50%;
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease;
    will-change: transform;
}
.pointer-glow.is-on { opacity: 1; }
[data-magnetic] { transition: translate .45s cubic-bezier(.2, .9, .25, 1); }

/* ==========================================================================
   VAYNO guide robot, in Kurdish dress
   A pearl-white robot with a screen face, wearing a red-and-white jamana, an
   olive shal u shapik suit, a striped pshtwen sash and white klash shoes.
   The stage slides along the bottom of the screen (script.js); the walker
   mirrors the figure to face its direction; the figure hops; the SVG parts
   carry the walk, breath, wave and hand-on-heart greeting.
   ========================================================================== */
.hero-robot-stage {
    position: fixed;
    z-index: 25;
    right: 0;
    bottom: 6px;
    left: 0;
    width: 100%;
    pointer-events: none;
    transform: translate3d(var(--walker-x, 6vw), 0, 0);
    transition: transform var(--walk-time, 1s) cubic-bezier(.4, .1, .5, .95);
    will-change: transform;
}
.robot-walker {
    width: clamp(104px, 9.4vw, 126px);
    scale: var(--robot-facing, 1) 1;
    transition: scale .42s cubic-bezier(.5, -.35, .35, 1.35);
}
.robot-companion-trigger {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 42% 42% 30% 30%;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}
.robot-companion-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.hero-robot {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    transform-origin: 50% 96%;
    filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .42));
    transition: filter .3s ease;
}
.robot-companion-trigger:hover .hero-robot,
.robot-companion-trigger:focus-visible .hero-robot {
    filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .42)) drop-shadow(0 0 14px rgba(210, 232, 164, .34));
}

/* Paint */
.hero-robot { --rb-line: #2b2820; --rb-glow: #d2f7a4; }
.rb-shadow { fill: rgba(4, 9, 6, .55); filter: blur(3px); }
.rb-trouser { fill: url(#rb-suit); stroke: var(--rb-line); stroke-width: 2.2; stroke-linejoin: round; }
.rb-pleat { fill: none; stroke: rgba(43, 40, 32, .45); stroke-width: 1.4; stroke-linecap: round; }
.rb-ankle { fill: #4e4d29; stroke: var(--rb-line); stroke-width: 1.8; }
.rb-klash { fill: #f2ebd9; stroke: var(--rb-line); stroke-width: 2; stroke-linejoin: round; }
.rb-klash-stitch { fill: none; stroke: #b7a684; stroke-width: 1.3; stroke-dasharray: 1.6 1.8; stroke-linecap: round; }
.rb-neck { fill: #3b4038; stroke: var(--rb-line); stroke-width: 2; }
.rb-jacket { fill: url(#rb-suit); stroke: var(--rb-line); stroke-width: 2.2; stroke-linejoin: round; }
.rb-shirt { fill: #f2e9d2; }
.rb-trim { fill: none; stroke: #dcb85c; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.rb-button { fill: #c9b88f; }
.rb-collar { fill: #f2e9d2; stroke: var(--rb-line); stroke-width: 1.8; stroke-linejoin: round; }
.rb-sun-glow { fill: url(#rb-sun-glow); }
.rb-sun-rays { fill: none; stroke: #f5c13b; stroke-width: 3.4; stroke-dasharray: 1.12 1.124; }
.rb-sun-core { fill: #f7c43d; stroke: #b9821c; stroke-width: .8; }
.rb-sash { fill: url(#rb-sash); stroke: var(--rb-line); stroke-width: 2; stroke-linejoin: round; }
.rb-sash-fold { fill: none; stroke: rgba(40, 20, 10, .22); stroke-width: 1.2; }
.rb-sash-end { fill: url(#rb-sash-end); stroke: var(--rb-line); stroke-width: 1.8; stroke-linejoin: round; }
.rb-sash-fringe { fill: none; stroke: #f3b531; stroke-width: 1.4; stroke-linecap: round; }
.rb-sash-knot { fill: #d23f2d; stroke: var(--rb-line); stroke-width: 1.8; }
.rb-sleeve-edge { fill: none; stroke: var(--rb-line); stroke-width: 17; stroke-linecap: round; }
.rb-sleeve { fill: none; stroke: #7f7d44; stroke-width: 12.6; stroke-linecap: round; }
.rb-cuff { fill: none; stroke: #f2e9d2; stroke-width: 12.6; stroke-linecap: round; }
.rb-hand { fill: url(#rb-shell); stroke: var(--rb-line); stroke-width: 2; }
.rb-hand-line { fill: none; stroke: rgba(43, 40, 32, .5); stroke-width: 1.2; stroke-linecap: round; }
.rb-ear { fill: #d9d4c4; stroke: var(--rb-line); stroke-width: 2.2; }
.rb-ear-light { fill: var(--rb-glow); filter: drop-shadow(0 0 3px rgba(191, 240, 143, .9)); }
.rb-shell { fill: url(#rb-shell); stroke: var(--rb-line); stroke-width: 2.4; }
.rb-screen { fill: url(#rb-screen); stroke: var(--rb-line); stroke-width: 2.2; }
.rb-screen-glare { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 2.4; stroke-linecap: round; }
.rb-eyes-open { filter: drop-shadow(0 0 4px rgba(200, 245, 150, .85)); }
.rb-eye rect { fill: var(--rb-glow); }
.rb-eye-spark { fill: #fff; opacity: .9; }
.rb-eyes-happy {
    fill: none;
    stroke: var(--rb-glow);
    stroke-width: 3.6;
    stroke-linecap: round;
    opacity: 0;
    filter: drop-shadow(0 0 4px rgba(200, 245, 150, .85));
}
.rb-cheek { fill: #ff8c7a; opacity: .5; transition: opacity .3s ease; }
.rb-mouth { fill: none; stroke: var(--rb-glow); stroke-width: 2.6; stroke-linecap: round; }
.rb-mouth-talk { fill: var(--rb-glow); opacity: 0; }
.rb-jm-cloth { fill: url(#rb-check); stroke: #5c1a12; stroke-width: 2.2; stroke-linejoin: round; }
.rb-jm-shade { fill: url(#rb-cloth-shade); }
.rb-jm-fold, .rb-jm-brim, .rb-jm-knot { fill: url(#rb-check-fold); stroke: #5c1a12; stroke-width: 1.8; stroke-linejoin: round; }
.rb-jm-brim { stroke-width: 2.2; }
.rb-jm-crease { fill: none; stroke: rgba(70, 12, 6, .55); stroke-width: 1.6; stroke-linecap: round; }
.rb-jm-crease-soft { stroke: rgba(255, 240, 230, .35); stroke-width: 1.1; }
.rb-jm-fringe { fill: none; stroke: #c93a2b; stroke-width: 2; stroke-linecap: round; }
.rb-antenna { fill: none; stroke: #3b4038; stroke-width: 2.6; stroke-linecap: round; }
.rb-antenna-bulb { fill: var(--rb-glow); stroke: var(--rb-line); stroke-width: 1.6; filter: drop-shadow(0 0 5px rgba(200, 245, 150, .9)); }

/* Pivots, in the units of the SVG viewBox */
.rb-body, .rb-upper, .rb-head, .rb-arm, .rb-fore, .rb-leg, .rb-jamana-tail, .rb-sash-tail, .rb-shadow, .rb-face { transform-box: view-box; }
.rb-eye, .rb-mouth-talk, .rb-sun-glow { transform-box: fill-box; transform-origin: center; }
.rb-body { transform-origin: 102px 266px; transition: rotate .4s ease; }
.rb-shadow { transform-origin: 102px 269px; }
.rb-upper { transform-origin: 100px 205px; }
.rb-head { transform-origin: 100px 142px; transition: rotate .4s ease; }
.rb-arm-l { transform-origin: 70px 152px; }
.rb-fore-l { transform-origin: 60px 176px; }
.rb-arm-r { transform-origin: 130px 152px; }
.rb-fore-r { transform-origin: 140px 176px; }
.rb-leg-l { transform-origin: 85px 222px; }
.rb-leg-r { transform-origin: 115px 222px; }
.rb-jamana-tail { transform-origin: 54px 78px; }
.rb-sash-tail { transform-origin: 70px 197px; }

/* Standing: breathing, glancing, blinking, and every so often a hand on the
   heart with a small bow and smiling eyes, a Kurdish greeting. */
.rb-upper { animation: rb-breathe 3.8s ease-in-out infinite; }
.rb-head { animation: rb-head-idle 12s ease-in-out infinite; }
.rb-arm-l { animation: rb-heart-arm 12s ease-in-out infinite; }
.rb-fore-l { animation: rb-heart-fore 12s ease-in-out infinite; }
.rb-arm-r { animation: rb-arm-rest 4.6s ease-in-out infinite; }
.rb-eyes-open { animation: rb-eyes-open 12s linear infinite; }
.rb-eyes-happy { animation: rb-eyes-happy 12s linear infinite; }
.rb-eye { animation: rb-blink 4.8s ease-in-out infinite; }
.rb-face { animation: rb-glance 9s ease-in-out infinite; }
.rb-jamana-tail { animation: rb-sway 3.6s ease-in-out infinite; }
.rb-sash-tail { animation: rb-sway 3.1s ease-in-out -1.2s infinite; }
.rb-ear-light { animation: rb-pulse 2.6s ease-in-out infinite; }
.rb-antenna-bulb { animation: rb-pulse 2.2s ease-in-out infinite; }
.rb-sun-glow { animation: rb-sun-pulse 3s ease-in-out infinite; }

/* Walking: lean into the step, stride, swing the arms, and let the jamana
   tail and the sash ends trail behind. One full stride = two --walk-step. */
.is-walking .rb-body {
    rotate: 4deg;
    animation: rb-bob var(--walk-step, .34s) ease-in-out infinite;
}
.is-walking .rb-shadow { animation: rb-shadow-bob var(--walk-step, .34s) ease-in-out infinite; }
.is-walking .rb-leg-l { animation: rb-leg calc(var(--walk-step, .34s) * 2) linear infinite; }
.is-walking .rb-leg-r { animation: rb-leg calc(var(--walk-step, .34s) * 2) linear calc(var(--walk-step, .34s) * -1) infinite; }
.is-walking .rb-arm-l { animation: rb-arm-swing calc(var(--walk-step, .34s) * 2) ease-in-out infinite; }
.is-walking .rb-arm-r { animation: rb-arm-swing calc(var(--walk-step, .34s) * 2) ease-in-out calc(var(--walk-step, .34s) * -1) infinite; }
.is-walking .rb-fore,
.is-walking .rb-upper { animation: none; }
.is-walking .rb-head { animation: rb-head-walk calc(var(--walk-step, .34s) * 2) ease-in-out infinite; }
.is-walking .rb-eyes-open { animation: none; opacity: 1; }
.is-walking .rb-eyes-happy { animation: none; opacity: 0; }
.is-walking .rb-jamana-tail { animation: rb-flutter calc(var(--walk-step, .34s) * .9) ease-in-out infinite alternate; }
.is-walking .rb-sash-tail { animation: rb-flutter var(--walk-step, .34s) ease-in-out infinite alternate; }
.is-turning .rb-body { rotate: 0deg; }

/* Greeting: stops, waves with the far arm and smiles. */
.is-greeting:not(.is-walking) .rb-arm-r { animation: rb-wave-arm 2.8s ease-in-out both; }
.is-greeting:not(.is-walking) .rb-fore-r { animation: rb-wave-fore 2.8s ease-in-out both; }
.is-greeting:not(.is-walking) .rb-arm-l,
.is-greeting:not(.is-walking) .rb-fore-l { animation: none; }
.is-greeting:not(.is-walking) .rb-head { animation: none; rotate: -4deg; }

/* Happy face: on hover, while greeting, and when the slide changes. */
.robot-companion-trigger:hover .rb-eyes-open,
.robot-companion-trigger:focus-visible .rb-eyes-open,
.is-greeting .rb-eyes-open,
.is-cheer .rb-eyes-open { animation: none; opacity: 0; }
.robot-companion-trigger:hover .rb-eyes-happy,
.robot-companion-trigger:focus-visible .rb-eyes-happy,
.is-greeting .rb-eyes-happy,
.is-cheer .rb-eyes-happy { animation: none; opacity: 1; }
.robot-companion-trigger:hover .rb-cheek,
.is-greeting .rb-cheek,
.is-cheer .rb-cheek { opacity: .9; }
.hero-robot-stage:not(.is-walking) .robot-companion-trigger:hover .hero-robot,
.is-cheer .hero-robot { animation: rb-hop .8s cubic-bezier(.3, .7, .4, 1) both; }

/* Guide open: listening with a curious tilt; talking while it answers. */
.is-assistant-open .rb-head { animation: none; rotate: -6deg; }
.is-assistant-open .rb-arm-l, .is-assistant-open .rb-fore-l { animation: none; }
.is-assistant-open .rb-eyes-open { animation: none; opacity: 1; }
.is-assistant-open .rb-eyes-happy { animation: none; opacity: 0; }
.is-assistant-open .rb-antenna-bulb { animation-duration: .9s; }
.is-talking .rb-mouth { opacity: 0; }
.is-talking .rb-mouth-talk { opacity: 1; animation: rb-talk .2s ease-in-out infinite alternate; }

@keyframes rb-breathe { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.6px; } }
@keyframes rb-head-idle {
    0%, 40%, 58%, 92%, 100% { rotate: 0deg; translate: 0 0; }
    12% { rotate: -3deg; }
    26% { rotate: 2.5deg; }
    66%, 84% { rotate: 4deg; translate: 0 3px; }
}
@keyframes rb-heart-arm { 0%, 58%, 92%, 100% { rotate: 0deg; } 66%, 84% { rotate: -58deg; } }
@keyframes rb-heart-fore { 0%, 58%, 92%, 100% { rotate: 0deg; } 66%, 84% { rotate: -50deg; } }
@keyframes rb-eyes-open { 0%, 65%, 86%, 100% { opacity: 1; } 67%, 84% { opacity: 0; } }
@keyframes rb-eyes-happy { 0%, 65%, 86%, 100% { opacity: 0; } 67%, 84% { opacity: 1; } }
@keyframes rb-arm-rest { 0%, 100% { rotate: 0deg; } 50% { rotate: -3deg; } }
@keyframes rb-blink { 0%, 44%, 50%, 100% { scale: 1 1; } 47% { scale: 1 .1; } }
@keyframes rb-glance {
    0%, 30%, 80%, 100% { translate: 0 0; }
    36%, 52% { translate: 2.4px 0; }
    58%, 74% { translate: -2px .6px; }
}
@keyframes rb-sway { 0%, 100% { rotate: -2.5deg; } 50% { rotate: 3deg; } }
@keyframes rb-flutter { from { rotate: 6deg; } to { rotate: 15deg; } }
@keyframes rb-pulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes rb-sun-pulse { 0%, 100% { opacity: .35; scale: .8; } 50% { opacity: .8; scale: 1.15; } }
@keyframes rb-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes rb-shadow-bob { 0%, 100% { scale: 1; } 50% { scale: .86; } }
@keyframes rb-leg {
    0%, 100% { rotate: 13deg; translate: 0 0; }
    25% { rotate: 0deg; translate: 0 -5px; }
    50% { rotate: -13deg; translate: 0 0; }
    75% { rotate: 0deg; translate: 0 0; }
}
@keyframes rb-arm-swing { 0%, 100% { rotate: -15deg; } 50% { rotate: 15deg; } }
@keyframes rb-head-walk { 0%, 100% { rotate: 2deg; } 50% { rotate: 4.5deg; } }
@keyframes rb-wave-arm { 0%, 100% { rotate: 0deg; } 14%, 86% { rotate: -84deg; } }
@keyframes rb-wave-fore {
    0%, 100% { rotate: 0deg; }
    14%, 34%, 54%, 74% { rotate: -60deg; }
    24%, 44%, 64% { rotate: -94deg; }
    86% { rotate: -70deg; }
}
@keyframes rb-hop {
    0%, 100% { translate: 0 0; scale: 1 1; }
    18% { translate: 0 0; scale: 1.06 .92; }
    42% { translate: 0 -14px; scale: .96 1.05; }
    64% { translate: 0 0; scale: 1.05 .94; }
    80% { scale: .99 1.01; }
}
@keyframes rb-talk { from { scale: 1 .3; } to { scale: 1 1.1; } }

@media (max-width: 560px) {
    .robot-walker { width: clamp(86px, 24vw, 100px); }
    /* Above the robot's walking lane. */
    /* There is no room beside the text on a phone, so the hint steps aside
       while the robot's speech bubble is showing (visibility as well, since
       the hint's fade-in animation would override opacity). */
    .nav-counter { display: none; }
}
@media (max-width: 800px) {
    .nav-indicator { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-robot-stage { transition: none; }
    .robot-walker { transition: none; }
    .hero-robot *, .hero-robot { animation: none !important; }
}

/* ==========================================================================
   Luxury layer
   Deep blacks, a 4K Kurdistan photograph behind every slide, rounded glass
   cards with a pointer light and a travelling edge, pill buttons, and the
   VAYNO mark with its loading animation. Rules under #journey outrank the
   older per-section styles above without touching them.
   ========================================================================== */
:root {
    --lux-ink: #030504;
    --lux-ivory: #eef3ec;
    --lux-mute: rgba(214, 226, 216, .62);
    --lux-emerald: #4caf5e;
    --lux-mint: #8fe39e;
    --lux-shadow: 0 30px 70px -28px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(143, 227, 158, .08);
    --lux-pill: linear-gradient(135deg, #8fe39e, #4caf5e 55%, #2a8a42);
    --accent: #8fe39e;
}
html.is-loading, html.is-loading body { overflow: hidden; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- Loading screen ---- */
@property --hole { syntax: "<length>"; inherits: false; initial-value: 0px; }
.loader {
    --hole: 0px;
    --mark-w: clamp(120px, 15vw, 186px);
    position: fixed;
    z-index: 200;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(ellipse 70% 60% at 50% 46%, #0c1510 0%, #050806 55%, #020302 100%);
    color: var(--lux-ivory);
    -webkit-mask-image: radial-gradient(circle at 50% 46%, transparent calc(var(--hole) - 80px), #000 var(--hole));
    mask-image: radial-gradient(circle at 50% 46%, transparent calc(var(--hole) - 80px), #000 var(--hole));
    transition: --hole 1.3s cubic-bezier(.76, 0, .24, 1) .2s, opacity .5s ease 1.05s;
    /* If scripts never run, the screen still gets out of the way. */
    animation: loader-failsafe .6s ease 11s forwards;
}
.loader.is-done { --hole: 170vmax; opacity: 0; pointer-events: none; animation: none; }
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; } }
.loader-glow {
    position: absolute;
    top: 46%;
    left: 50%;
    width: 70vmin;
    height: 70vmin;
    margin: -35vmin 0 0 -35vmin;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(76, 175, 94, .2), rgba(76, 175, 94, .05) 40%, transparent 66%);
    opacity: 0;
    animation: loader-glow 2.6s ease 1.1s both;
}
@keyframes loader-glow {
    0% { opacity: 0; scale: .5; }
    45% { opacity: 1; }
    100% { opacity: .6; scale: 1; }
}
.loader-stage {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 16px;
    transition: opacity .45s ease, scale .7s cubic-bezier(.7, 0, .3, 1), filter .45s ease;
}
.loader.is-done .loader-stage { opacity: 0; scale: 1.1; filter: blur(8px); }
.loader-mark { width: var(--mark-w); height: auto; overflow: visible; animation: lm-lock .8s cubic-bezier(.3, 1.6, .5, 1) 1.4s both; }
.lm-half { transform-box: fill-box; transform-origin: center; }
/* Each half travels along its own stroke, from opposite sides, into the V. */
.lm-silver { animation: lm-silver 1.15s cubic-bezier(.16, 1, .3, 1) .25s both; }
.lm-green { animation: lm-green 1.15s cubic-bezier(.16, 1, .3, 1) .42s both; }
.lm-shine { transform-box: fill-box; transform-origin: center; transform: skewX(-24deg); animation: lm-shine 1.15s cubic-bezier(.6, 0, .3, 1) 1.55s both; }
@keyframes lm-silver {
    0% { opacity: 0; translate: -300px -300px; filter: blur(4px); }
    55% { opacity: 1; filter: blur(0); }
    100% { opacity: 1; translate: 0 0; filter: none; }
}
@keyframes lm-green {
    0% { opacity: 0; translate: 300px -300px; filter: blur(4px); }
    55% { opacity: 1; filter: blur(0); }
    100% { opacity: 1; translate: 0 0; filter: none; }
}
@keyframes lm-lock { 0%, 100% { scale: 1; } 40% { scale: 1.07; } }
@keyframes lm-shine { from { translate: 0 0; opacity: 1; } to { translate: 170px 0; opacity: 1; } }
/* A ring breaks out from the point of the V the moment the halves meet. */
.loader-ring {
    position: absolute;
    top: calc(var(--mark-w) * .456);
    left: calc(50% - var(--mark-w) * .024);
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 1px solid rgba(166, 224, 178, .75);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: lm-ring 1.3s cubic-bezier(.2, .7, .3, 1) 1.4s both;
}
@keyframes lm-ring {
    0% { opacity: 0; scale: .2; }
    15% { opacity: 1; }
    100% { opacity: 0; scale: 9; }
}
.loader-word {
    display: flex;
    margin: 6px 0 0;
    padding-left: .34em;
    color: var(--lux-ivory);
    font: 800 clamp(20px, 2.4vw, 28px)/1 "Manrope", sans-serif;
    letter-spacing: .34em;
}
.loader-word span { opacity: 0; animation: lw-in .9s cubic-bezier(.16, 1, .3, 1) 1.25s both; }
.loader-word span:nth-child(2) { animation-delay: 1.32s; }
.loader-word span:nth-child(3) { animation-delay: 1.39s; }
.loader-word span:nth-child(4) { animation-delay: 1.46s; }
.loader-word span:nth-child(5) { animation-delay: 1.53s; }
.loader-tag {
    margin: 0;
    padding-left: .42em;
    color: rgba(201, 205, 198, .62);
    font: 500 9px var(--font-mono);
    letter-spacing: .42em;
    text-transform: uppercase;
    animation: lw-in 1s ease 1.8s both;
}
@keyframes lw-in {
    from { opacity: 0; translate: 0 14px; filter: blur(8px); }
    to { opacity: 1; translate: 0 0; filter: none; }
}
.loader-bar {
    position: relative;
    width: 132px;
    height: 1px;
    margin-top: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, .1);
    animation: lw-in .6s ease .9s both;
}
.loader-bar span {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #8b8b88, #f4f4f1 45%, #4caf5e);
    transform-origin: 0 50%;
    scale: 0 1;
    animation: lb-fill 3.4s cubic-bezier(.4, 0, .2, 1) .7s forwards;
}
@keyframes lb-fill { to { scale: 1 1; } }

/* ---- The mark in the navbar and footer ---- */
.vayno-mark { display: block; height: auto; overflow: visible; }
.navbar .logo { display: inline-flex; align-items: center; gap: 10px; }
.nav-mark { width: 30px; }
.nav-mark polygon { transition: translate .55s cubic-bezier(.34, 1.56, .64, 1); }
.logo:hover .mark-silver, .logo:focus-visible .mark-silver { translate: -4px -4px; }
.logo:hover .mark-green, .logo:focus-visible .mark-green { translate: 4px -4px; }
html.is-loaded .nav-mark .mark-silver { animation: nm-silver 1s cubic-bezier(.16, 1, .3, 1) .55s backwards; }
html.is-loaded .nav-mark .mark-green { animation: nm-green 1s cubic-bezier(.16, 1, .3, 1) .68s backwards; }
@keyframes nm-silver { from { opacity: 0; translate: -36px -36px; } }
@keyframes nm-green { from { opacity: 0; translate: 36px -36px; } }
.footer-wordmark { display: inline-flex; align-items: center; gap: 12px; }
.footer-wordmark .vayno-mark { width: 36px; }

/* The logo now leads the navbar, so the small second wordmark on the hero goes. */

/* ---- Atmosphere: deep background, film grain ---- */
.grain {
    position: fixed;
    z-index: 3;
    inset: -120px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none;
    animation: grain 1.4s steps(5) infinite;
}
@keyframes grain {
    0%, 100% { translate: 0 0; }
    20% { translate: -46px 22px; }
    40% { translate: 34px -30px; }
    60% { translate: -22px -44px; }
    80% { translate: 42px 34px; }
}

/* ---- Slide photographs ----
   Slightly larger than the slide so they can trail behind it (parallax)
   without showing an edge; held down to a dark, warm-black grade. */
/* Long slides scroll past the bottom of their photo; the photo fades into
   this same black, so there is no edge. */

/* Location and photographer, set vertically along the right edge. */

/* ---- Navbar ---- */
.navbar, .navbar.scrolled {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
}
.navbar::after { right: 26px; left: 26px; }

/* ---- Type ---- */
#journey .projects > .container > .eyebrow,
#journey .services-heading .eyebrow,
#journey .introduction .eyebrow,
#journey .team > .container > .eyebrow,
#journey .contact > .container > .eyebrow { display: inline-flex; align-items: center; gap: 12px; }
#journey .projects > .container > .eyebrow::before,
#journey .services-heading .eyebrow::before,
#journey .introduction .eyebrow::before,
#journey .team > .container > .eyebrow::before,
#journey .contact > .container > .eyebrow::before {
    width: 28px;
    height: 1px;
    content: "";
}
#journey .introduction p { color: var(--lux-mute); }

/* ---- Glass cards ---- */
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
#journey .lux-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--lux-line);
    border-radius: 24px;
    background: var(--lux-glass);
    box-shadow: var(--lux-shadow);
}
#journey .lux-card > :not(.lux-glow):not(.lux-border):not(.scratch-overlay) { position: relative; z-index: 1; }
/* Soft light that follows the pointer. */
.lux-glow {
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s ease;
}
/* A thin glowing edge that travels round the card. */
.lux-border {
    position: absolute;
    z-index: 3;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease;
    animation: lux-spin 3.6s linear infinite paused;
}
#journey .lux-card.is-pointer .lux-glow,
#journey .service-card.is-active .lux-glow { opacity: 1; }
#journey .lux-card:hover .lux-border,
#journey .lux-card:focus-within .lux-border,
#journey .service-card.is-active .lux-border { opacity: 1; animation-play-state: running; }
@keyframes lux-spin { to { --spin: 360deg; } }
#journey .lux-card:hover {
    border-color: rgba(160, 230, 180, .2);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .88), 0 0 70px -24px rgba(76, 175, 94, .38), inset 0 1px 0 rgba(255, 255, 255, .08);
}
/* Small cards lean toward the pointer and lift. */
#journey .lux-tilt {
    transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0px));
    transition: transform .7s cubic-bezier(.2, .8, .2, 1), border-color .4s ease, box-shadow .5s ease, background .4s ease;
}
#journey .lux-tilt.is-pointer { transition: transform .14s linear, border-color .4s ease, box-shadow .5s ease, background .4s ease; }
#journey .lux-tilt:hover, #journey .service-card.lux-tilt.is-active { --lift: -6px; }

/* Services */
#journey .service-card { border-radius: 22px; }
#journey .service-card::after {
    right: -50px;
    bottom: -70px;
    z-index: 0;
    width: 170px;
    height: 170px;
    border: 0;
    background: radial-gradient(circle, rgba(76, 175, 94, .26), transparent 66%);
    opacity: .45;
    transition: transform .7s ease, opacity .6s ease;
}
#journey .service-card:hover::after, #journey .service-card.is-active::after { transform: scale(1.45); opacity: 1; }
#journey .service-card.is-active {
    border-color: rgba(140, 224, 160, .28);
    background:
        linear-gradient(160deg, rgba(120, 210, 140, .14), rgba(255, 255, 255, .02) 55%),
        rgba(9, 16, 12, .72);
}
#journey .service-card-index { color: var(--lux-mint); }
#journey .services-link { color: var(--lux-mint); }

/* Projects */
#journey .projects .project-card {
    padding: 20px 18px 18px;
    border-radius: 32px;
}
#journey .project-disc { transition: scale .7s cubic-bezier(.2, .8, .2, 1); }
#journey .project-card:hover .project-disc { scale: 1.05; }
#journey .projects .project-card-copy { min-height: 0; padding: 16px 4px 4px; }
#journey .project-tech span {
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .035);
    color: rgba(230, 236, 226, .78);
}
#journey .project-control {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
#journey .project-control:hover:not(:disabled) { border-color: transparent; background: var(--lux-pill); color: #04140a; }

/* About: value seals and team */
#journey .brand-values article.scratch-value { border-radius: 22px; }
#journey .brand-values article.scratch-value > .brand-value-letter { color: var(--lux-mint); }
#journey .member-card { padding: 16px 16px 22px; border-radius: 26px; }
#journey .member-photo-frame { border-radius: 18px; }

/* Contact */
#journey .project-inquiry {
    margin-top: 26px;
    padding: 30px 34px 34px;
    border-radius: 30px;
}
#inquiryForm input, #inquiryForm select, #inquiryForm textarea {
    padding: 13px 16px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    outline: none;
    background-color: rgba(255, 255, 255, .035);
    transition: border-color .3s ease, box-shadow .35s ease, background-color .3s ease;
}
#inquiryForm input:hover, #inquiryForm select:hover, #inquiryForm textarea:hover { border-color: rgba(255, 255, 255, .18); }
#inquiryForm input:focus, #inquiryForm select:focus, #inquiryForm textarea:focus {
    border-color: rgba(140, 224, 160, .55);
    background-color: rgba(255, 255, 255, .055);
    box-shadow: 0 0 0 4px rgba(76, 175, 94, .14), 0 12px 30px -14px rgba(76, 175, 94, .45);
}
#inquiryForm select {
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23a6e0b2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 16px center;
    background-repeat: no-repeat;
    background-size: 14px;
}
#journey .contact-methods { border: 0; }

/* Buttons: emerald pills with a light that sweeps across on hover. */
#journey .submit-btn, #journey .whatsapp-btn, #journey .email-btn, #journey .team-portfolio {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 999px;
    box-shadow: 0 14px 34px -14px rgba(76, 175, 94, .7), inset 0 1px 0 rgba(255, 255, 255, .4);
    font-weight: 600;
    transition: translate .45s cubic-bezier(.2, .9, .25, 1), box-shadow .4s ease, filter .3s ease;
}
#journey .submit-btn::after, #journey .whatsapp-btn::after, #journey .email-btn::after, #journey .team-portfolio::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%);
    content: "";
    translate: -120% 0;
    pointer-events: none;
    transition: translate .9s cubic-bezier(.2, .8, .2, 1);
}
#journey .submit-btn:hover, #journey .whatsapp-btn:hover, #journey .email-btn:hover, #journey .team-portfolio:hover {
    box-shadow: 0 20px 46px -14px rgba(76, 175, 94, .9), inset 0 1px 0 rgba(255, 255, 255, .5);
    filter: brightness(1.06);
}
#journey .submit-btn:hover::after, #journey .whatsapp-btn:hover::after, #journey .email-btn:hover::after, #journey .team-portfolio:hover::after { translate: 120% 0; }
#journey .copy-email { color: var(--lux-mute); }

/* Hero call to action: a glass pill with the arrow in an emerald disc. */

/* ---- Guide panel ---- */
.assistant-panel {
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 26px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015) 50%), rgba(7, 11, 9, .9);
    box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .07);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
}
.assistant-messages { border-color: rgba(255, 255, 255, .07); border-radius: 18px; background: rgba(0, 0, 0, .25); }
.assistant-message { border-radius: 16px; }
.assistant-message-guide { border-color: rgba(255, 255, 255, .08); border-bottom-left-radius: 6px; background: rgba(255, 255, 255, .06); }
.assistant-message-user { border-bottom-right-radius: 6px; background: var(--lux-pill); color: #04140a; }
.assistant-close, .assistant-form button { border-radius: 50%; }
.assistant-form input { height: 46px; padding: 0 18px; border-color: rgba(255, 255, 255, .1); border-radius: 999px; background: rgba(255, 255, 255, .04); }
.assistant-form input:focus { border-color: rgba(140, 224, 160, .55); box-shadow: 0 0 0 4px rgba(76, 175, 94, .14); }
.assistant-form button { width: 46px; height: 46px; border: 0; background: var(--lux-pill); color: #04140a; }
.assistant-form button:hover { background: var(--lux-pill); filter: brightness(1.08); }
.assistant-suggestions button { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03); }
.assistant-suggestions button:hover { border-color: rgba(140, 224, 160, .5); background: rgba(76, 175, 94, .12); }

/* ---- Footer ---- */
.footer { border-top-color: rgba(255, 255, 255, .07); background: #040605; }

/* ---- The robot steps in once the curtain opens ---- */
html.is-loaded .robot-figure { animation: rb-enter 1.1s cubic-bezier(.3, 1.45, .5, 1) .8s backwards; }
@keyframes rb-enter { from { opacity: 0; translate: 0 70px; } }

@media (max-width: 800px) {
    .nav-menu { border-radius: 0 0 18px 18px; }
    #journey .project-inquiry { padding: 24px 20px 26px; border-radius: 24px; }
}
@media (max-width: 560px) {
    .navbar, .navbar.scrolled { border-radius: 16px; }
    .nav-mark { width: 26px; }
    #journey .lux-card { border-radius: 20px; }
    #journey .service-card { border-radius: 16px; }
    #journey .brand-values article.scratch-value { border-radius: 16px; }
    #journey .projects .project-card { padding: 16px 14px 14px; border-radius: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .loader, .loader *, .loader-word span { animation: none !important; }
    .loader-word span, .loader-tag, .loader-bar, .lm-half { opacity: 1; }
    .loader-ring, .lm-shine { display: none; }
    .grain, .lux-border { animation: none; }
    html.is-loaded .robot-figure, html.is-loaded .nav-mark polygon { animation: none; }
    #journey .lux-tilt { transform: none; }
}

/* ==========================================================================
   Dark-green photography
   The slide photos are colour-graded in the files themselves (deep emerald
   shadows, muted sage highlights), so the page only adds a light hold-down
   and a green-black veil for the type.
   ========================================================================== */

/* ==========================================================================
   Languages: English, Arabic (العربية) and Kurdish Sorani (کوردی)
   Arabic and Kurdish read right to left: the layout mirrors, the slides run
   the other way, and VAYNO stays in Latin letters.
   ========================================================================== */
.nav-container { justify-content: flex-start; }
.nav-menu { margin-inline-start: auto; }
.lang-switch {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
    margin-inline-start: 18px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
}
.lang-switch button {
    min-width: 38px;
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    font: 600 10px/1 var(--font-mono);
    letter-spacing: .08em;
    transition: background .35s ease, color .35s ease, box-shadow .35s ease;
}
.lang-switch button:not([lang="en"]) { font: 600 12px/1 "Noto Sans Arabic", sans-serif; letter-spacing: 0; }
.lang-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 800px) {
    .nav-toggle { order: 3; margin-inline-start: 10px; }
    .lang-switch { order: 2; margin-inline-start: auto; }
    .lang-switch button { min-width: 34px; height: 26px; padding: 0 8px; }
}

/* The button label now sits in its own span; an older rule sized every span
   inside .hero-link for a since-removed arrow glyph. */

/* Switching language: the page fades out, changes, and fades back in. */
.site-shell { transition: opacity .28s ease; }
html.is-switching-lang .site-shell { opacity: 0; }

/* Arabic-script faces; Latin text (and VAYNO) keeps the brand fonts. */
html[lang="ar"], html[lang="ckb"] {
    --font-display: "Bricolage Grotesque", "Noto Kufi Arabic", sans-serif;
    --font-body: "Instrument Sans", "Noto Sans Arabic", sans-serif;
    /* Arabic script first: a monospace font would also set the spaces, and
       its wide spaces leave big gaps between Arabic and Kurdish words. */
    --font-mono: "Noto Sans Arabic", "DM Mono", monospace;
}
/* Arabic letters join, so spacing them apart breaks the words. */
html[dir="rtl"] body *:not([lang="en"], [lang="en"] *) { letter-spacing: 0 !important; }
html[dir="rtl"] #journey .introduction p,
html[dir="rtl"] .assistant-intro,
html[dir="rtl"] .assistant-message { line-height: 1.9; }
/* The small mono labels are set larger: Arabic script needs the room. */
html[dir="rtl"] #journey .eyebrow,
html[dir="rtl"] .assistant-panel .eyebrow { font-size: 12px; }
html[dir="rtl"] .nav-menu a,
html[dir="rtl"] .footer-nav a { font-size: 13px; }
html[dir="rtl"] #journey .service-card-tag,
html[dir="rtl"] .loader-tag { font-size: 11px; }
html[dir="rtl"] #journey .service-card-copy,
html[dir="rtl"] #journey .project-card-copy > p { font-size: 12px; line-height: 1.8; }
html[dir="rtl"] .brand-values article.scratch-value p { font-size: 11px; line-height: 1.8; }

/* Things that always read left to right. */
.nav-counter, .hero-robot-stage { direction: ltr; }
html[dir="rtl"] .project-track-viewport { direction: ltr; }
html[dir="rtl"] .project-card { direction: rtl; }

/* Mirrored layout. */
html[dir="rtl"] .story-panel .introduction::after { right: auto; left: max(32px, calc((100% - 1180px) / 2)); }
html[dir="rtl"] #journey .service-card { text-align: right; }
html[dir="rtl"] #inquiryForm select { padding-right: 16px; padding-left: 42px; background-position: left 16px center; }
html[dir="rtl"] .arrow-icon,
html[dir="rtl"] .assistant-form button svg { scale: -1 1; }
html[dir="rtl"] .assistant-message-guide { border-bottom-right-radius: 6px; border-bottom-left-radius: 16px; }
html[dir="rtl"] .assistant-message-user { border-bottom-right-radius: 16px; border-bottom-left-radius: 6px; }
html[dir="rtl"] #journey .projects > .container > .eyebrow::before,
html[dir="rtl"] #journey .services-heading .eyebrow::before,
html[dir="rtl"] #journey .introduction .eyebrow::before,
html[dir="rtl"] #journey .team > .container > .eyebrow::before,
html[dir="rtl"] #journey .contact > .container > .eyebrow::before {
    background: linear-gradient(270deg, var(--lux-emerald), transparent);
}
/* In right-to-left the slides sit to the left of each other. */
html[dir="rtl"] .is-slider .journey-track { transform: translate3d(calc(var(--slide, 0) * 100%), 0, 0); }

@media (max-width: 560px) {
    /* The pill button is taller than the old text link; keep it above the swipe hint. */
    /* Arabic-script lines run taller, so the phone hero is set a little
       tighter to keep the button clear of the swipe hint below it. */
}

/* ---- Team cards: a small round portrait beside the role and name ----
   Keeps the card about the person's work rather than a large photo. The grid
   mirrors on its own in Arabic and Kurdish. */
.member-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; align-content: start; align-items: center; }
.member-card .member-photo-frame,
#journey .member-card .member-photo-frame { grid-row: 1 / span 2; width: 72px; aspect-ratio: 1; margin: 0; border-radius: 50%; }
.member-card .member-photo { object-position: 50% 18%; }
.member-card .member-initials { color: var(--g-light); font-size: 24px; font-weight: 800; letter-spacing: -.04em; }
.member-card .team-role { grid-column: 2; align-self: end; }
.member-card h3 { grid-column: 2; align-self: start; margin: 6px 0 0; font-size: clamp(20px, 2.2vw, 26px); }
.member-card .team-bio { grid-column: 1 / -1; min-height: 0; margin-top: 18px; }
.member-card .team-portfolio { grid-column: 1 / -1; justify-self: start; }

/* ---- Project cards: the VAYNO mark in each disc, and the card buttons ---- */
.project-disc-core { background: radial-gradient(circle at 35% 30%, #22302a, #070a08 72%); }
.project-disc-mark { display: block; width: 66%; height: auto; }
.project-disc.is-openable { cursor: pointer; }
.project-card-copy .project-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: auto; padding-top: 14px; }
.projects.journey-panel .project-card-copy .project-actions { justify-content: center; margin-top: 12px; padding-top: 0; }
.projects.journey-panel .project-card-copy .project-actions .project-link { margin: 0; padding: 0; }
.project-open {
    min-height: 34px;
    padding: 0 16px;
    border-radius: 999px;
    font: 600 11px var(--font-body);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
.project-open:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(76,175,94,.32); }
.project-open:focus-visible { outline: 2px solid var(--lux-mint); outline-offset: 3px; }

/* ---- "See how it works" window ----
   Opens over the page; the page behind stays still. Screenshots sit beside
   their explanation, stacked on narrow screens; RTL mirrors on its own. */
html.is-case-open, html.is-case-open body { overflow: hidden; }
.case-study {
    width: min(1120px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 26px;
    background: #0b110d;
    color: var(--lux-ivory);
    box-shadow: 0 40px 120px rgba(0,0,0,.6);
}
.case-study::backdrop { background: rgba(3,6,4,.74); backdrop-filter: blur(6px); }
.case-study[open] { animation: case-study-in .35s cubic-bezier(.2,.8,.2,1); }
@keyframes case-study-in { from { opacity: 0; transform: translateY(18px) scale(.985); } }
.case-study-inner { position: relative; padding: clamp(24px, 4vw, 56px); }
.case-study-close {
    position: sticky;
    z-index: 2;
    top: 0;
    float: right;
    display: grid;
    width: 44px;
    height: 44px;
    margin: -6px -6px 12px 16px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    background: rgba(11,17,13,.9);
    color: var(--lux-ivory);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
html[dir="rtl"] .case-study-close { float: left; margin: -6px 16px 12px -6px; }
.case-study-close:hover { background: var(--lux-pill); color: #04140a; }
.case-study-close:focus-visible { outline: 2px solid var(--lux-mint); outline-offset: 3px; }
.case-study-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.case-study-header { max-width: 780px; margin-bottom: clamp(30px, 4vw, 50px); }
.case-study-header .eyebrow { color: var(--lux-mint); }
.case-study-header h2 { margin: 10px 0 14px; font: 500 clamp(34px, 5vw, 56px)/1.05 var(--font-display); }
.case-study-summary { margin: 0; color: rgba(226,232,222,.8); font-size: 15px; line-height: 1.75; }
.case-study-visit { display: inline-block; margin-top: 18px; color: var(--lux-mint); font-size: 13px; font-weight: 600; }
.case-study-visit::after { content: " \2197"; }
.case-study-group + .case-study-group { margin-top: clamp(40px, 6vw, 72px); }
.case-study-group-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 14px;
    color: var(--lux-mint);
    font: 500 11px var(--font-mono);
    letter-spacing: .22em;
    text-transform: uppercase;
}
.case-study-group-title::after { flex: 1; height: 1px; background: rgba(255,255,255,.1); content: ""; }
.case-study-section {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: clamp(18px, 3vw, 40px);
    align-items: center;
    padding: 22px 0;
}
.case-study-section + .case-study-section { border-top: 1px solid rgba(255,255,255,.06); }
.case-study-shot {
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    background: #141a16;
    box-shadow: 0 18px 50px rgba(0,0,0,.42);
}
.case-study-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.case-study-number { color: var(--lux-mint); font: 500 11px var(--font-mono); letter-spacing: .18em; }
.case-study-copy h4 { margin: 8px 0 10px; font: 500 clamp(22px, 2.4vw, 30px)/1.15 var(--font-display); }
.case-study-copy p { margin: 0; color: rgba(226,232,222,.76); font-size: 14px; line-height: 1.75; }
.case-study-note { margin: 34px 0 0; color: rgba(226,232,222,.5); font-size: 12px; }
@media (max-width: 760px) {
    .case-study { width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); border-radius: 20px; }
    .case-study-section { grid-template-columns: 1fr; gap: 14px; }
    .case-study-summary { font-size: 14px; }
}

/* ==========================================================================
   VAYNO Bold
   The two greens of the logo, heavy type and motion throughout: a hero that
   types, a line of light between slides and icons that draw themselves.
   This layer comes last and outranks the older styles above.
   ========================================================================== */
:root {
    --g-light: #8fe39e;
    --g-mid: #4caf5e;
    --g-deep: #2a8a42;
    --gutter: max(5vw, calc((100vw - 1320px) / 2));
}
::selection { background: var(--g-mid); color: #020403; }

/* ---- Background stage: light, grid, particles ---- */
.bg-stage {
    position: fixed;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* ---- Slides: see-through to the world behind ---- */
#journey .journey-panel { background-color: transparent; }
.hero.journey-panel, .services.journey-panel { background: transparent; }
/* Each slide's number, huge and outlined, behind its content. Its box is
   clipped to the digits, so it never makes the slide scroll. */
#journey .journey-panel:not(.hero)::after {
    position: absolute;
    z-index: 0;
    right: 2.5vw;
    bottom: 0;
    overflow: hidden;
    color: transparent;
    content: attr(data-progress);
    font: 800 clamp(150px, 23vw, 360px)/.76 var(--font-wordmark);
    letter-spacing: -.07em;
    -webkit-text-stroke: 1px rgba(143, 227, 158, .09);
    pointer-events: none;
}
html[dir="rtl"] #journey .journey-panel:not(.hero)::after { right: auto; left: 2.5vw; }
.story-panel > section { position: relative; z-index: 1; }

/* ---- Hero ---- */
#journey .hero {
    display: grid;
    gap: clamp(28px, 4vw, 72px);
    height: 100%;
    min-height: 100svh;
    padding: 92px var(--gutter) 158px;
    overflow: hidden;
}
.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.hero-kicker {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font: 500 10px var(--font-mono);
    text-transform: uppercase;
}
.hero-kicker [data-i18n-html] > span {
    display: inline-block;
    width: 20px;
    height: 1px;
    margin: 0 6px;
    background: currentColor;
    opacity: .55;
    vertical-align: middle;
}
.status-dot {
    position: relative;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.status-dot::after {
    position: absolute;
    inset: -5px;
    border: 1px solid var(--g-light);
    border-radius: 50%;
    content: "";
    animation: status-ping 2s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes status-ping {
    from { opacity: .9; transform: scale(.4); }
    to { opacity: 0; transform: scale(1.7); }
}
.hero-title {
    margin: 0;
    font: 800 clamp(46px, 6.2vw, 94px)/.96 var(--font-display);
    letter-spacing: -.055em;
}
.hero-type, .hero-type-part, .hero-rotator { display: block; }
.hero-type-part[hidden] { display: none; }
.hero-rotator { min-height: 1em; white-space: nowrap; }
.hero-word {
    padding-bottom: .1em;
    background: var(--g-text);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: text-sheen 7s linear infinite;
}
@keyframes text-sheen { to { background-position: -220% 0; } }
.hero-caret {
    display: inline-block;
    width: .09em;
    height: .8em;
    margin-inline-start: .07em;
    vertical-align: -.02em;
}
.hero.is-typed .hero-caret { animation: caret-blink 1s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-start, .hero-link {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    overflow: hidden;
    border-radius: 999px;
    transition: translate .45s cubic-bezier(.2, .9, .25, 1), box-shadow .4s ease, border-color .3s ease, background .3s ease;
}
.hero-start::after {
    position: absolute;
    inset: 0;
    content: "";
    translate: -120% 0;
    pointer-events: none;
    animation: button-shine 4.5s cubic-bezier(.2, .8, .2, 1) 2s infinite;
}
@keyframes button-shine {
    0% { translate: -120% 0; }
    28%, 100% { translate: 120% 0; }
}
.hero-link:hover { border-color: var(--g-light); }
.hero-start .arrow-icon, .hero-link .arrow-icon { width: 18px; height: 18px; stroke-width: 1.8; }
.hero-start:hover .arrow-icon, .hero-link:hover .arrow-icon { transform: translateX(4px); }
html[dir="rtl"] .hero-start:hover .arrow-icon, html[dir="rtl"] .hero-link:hover .arrow-icon { transform: translateX(-4px); }

/* ---- Section headings: heavy, tight, the last word lit green ---- */
#journey .eyebrow { font: 500 10px var(--font-mono); letter-spacing: .26em; text-transform: uppercase; }
#journey .section-title, #journey .introduction h2 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.05em;
    text-shadow: none;
}
#journey .section-title .rw:last-child, #journey .introduction h2 .rw:last-child {
    background: var(--g-text);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* Once revealed, the lit word keeps a slow shimmer running after its entrance. */
.js-reveal #journey [data-reveal="words"].is-in .rw:last-child {
    animation: rv-word 1s cubic-bezier(.16, 1, .3, 1) calc(var(--rd, 0ms) + var(--wi, 0) * 65ms) backwards, text-sheen 7s linear 1s infinite;
}
.projects.journey-panel .section-title { font-size: clamp(46px, 6.2vw, 96px); }
.services.journey-panel .services-heading .section-title { font-size: clamp(40px, 5vw, 78px); }
.story-panel .introduction h2 { max-width: 900px; font-size: clamp(40px, 5.4vw, 84px); }
.story-panel .team .section-title { font-size: clamp(34px, 4vw, 58px); }
.contact.journey-panel .section-title { font-size: clamp(40px, 5.4vw, 84px); }
html[dir="rtl"] #journey .section-title, html[dir="rtl"] #journey .introduction h2, html[dir="rtl"] .hero-title { line-height: 1.3; }
html[dir="rtl"] .hero-title { font-size: clamp(40px, 5.2vw, 80px); }

/* ---- Projects: discs glow and breathe ---- */
#journey .project-disc {
    box-shadow: 0 0 0 1px rgba(143, 227, 158, .26), 0 0 0 12px rgba(143, 227, 158, .03), 0 30px 80px -24px rgba(0, 0, 0, .9), 0 0 70px -22px rgba(76, 175, 94, .55);
}
#journey .project-card-copy h3 { font-weight: 800; letter-spacing: -.045em; }
/* Every display heading in the same heavy weight. */
.project-inquiry h3, .member-card h3, .brand-values article.scratch-value h2,
.assistant-panel-header h2, .case-study-header h2, .case-study-copy h4 { font-weight: 800; letter-spacing: -.04em; }
/* Few projects sit centred; more than fit scroll sideways as before. */
.projects.journey-panel .project-track { min-width: 100%; justify-content: center; }
#journey .projects .project-card { flex-basis: clamp(270px, 27vw, 370px); }
#journey .project-disc { width: min(100%, 250px); }
.project-controls.is-idle { visibility: hidden; }

/* ---- Services: icons that draw themselves; details on the chosen card ---- */
#journey .service-card { gap: 12px; }
.service-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.service-icon * { stroke-dasharray: 1; stroke-dashoffset: 0; }
#journey .service-card.is-in .service-icon * { animation: icon-draw 1.4s cubic-bezier(.6, 0, .2, 1) calc(var(--rd, 0ms) + 160ms) both; }
#journey .service-card.is-active .service-icon * { animation: icon-redraw 1.2s cubic-bezier(.6, 0, .2, 1) both; }
#journey .service-card.is-active .service-icon { transform: scale(1.12) rotate(-4deg); }
@keyframes icon-draw { from { stroke-dashoffset: 1; } }
@keyframes icon-redraw { from { stroke-dashoffset: 1; } }
.services.journey-panel .service-card-title { font-weight: 800; letter-spacing: -.03em; }
#journey .service-card-copy { opacity: .0; translate: 0 6px; transition: opacity .4s ease, translate .5s cubic-bezier(.2, .8, .2, 1); }
#journey .service-card.is-active .service-card-copy, #journey .service-card:focus-visible .service-card-copy { opacity: 1; translate: 0 0; }
.services-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; }
.services-link .arrow-icon { stroke-width: 1.8; }
.services-link:hover .arrow-icon { transform: translateX(4px); }
html[dir="rtl"] .services-link:hover .arrow-icon { transform: translateX(-4px); }

/* ---- Contact: rings orbit the mark beside the form ---- */
.contact-orbit {
    position: absolute;
    z-index: 0;
    top: 50%;
    right: var(--gutter);
    width: clamp(240px, 26vw, 400px);
    aspect-ratio: 1;
    transform: translateY(-50%);
    pointer-events: none;
}
html[dir="rtl"] .contact-orbit { right: auto; left: var(--gutter); }
.orbit-ring {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(143, 227, 158, .16);
    border-radius: 50%;
    animation: orbit-spin 18s linear infinite;
}
.orbit-ring-2 { inset: 15%; border-style: dashed; border-color: rgba(143, 227, 158, .24); animation-duration: 12s; animation-direction: reverse; }
.orbit-ring-3 { inset: 31%; border-color: rgba(143, 227, 158, .32); animation-duration: 8s; }
.orbit-ring i {
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: var(--g-light);
    box-shadow: 0 0 16px var(--g-light), 0 0 40px var(--g-mid);
}
.orbit-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30%;
    filter: drop-shadow(0 0 26px rgba(76, 175, 94, .7));
    transform: translate(-50%, -50%);
    animation: mark-breathe 4s ease-in-out infinite alternate;
}
@keyframes orbit-spin { to { rotate: 1turn; } }
@keyframes mark-breathe { to { scale: 1.12; filter: drop-shadow(0 0 40px rgba(76, 175, 94, .95)); } }
@media (min-width: 1181px) {
    .contact.journey-panel > .container { width: min(780px, calc(100% - 72px)); margin-inline: var(--gutter) auto; }
}
@media (max-width: 1180px) {
    .contact-orbit { display: none; }
}

/* ---- Hero on smaller screens ---- */
@media (max-width: 1100px) {
    #journey .hero { align-content: center; gap: 34px; padding: 96px 6vw 170px; }
    .hero-content { align-items: center; text-align: center; }
    .hero-actions { justify-content: center; }
}
/* Short tablets in landscape: the words alone. */
/* Phones: the browser alone, small; the code window and chips step aside. */
@media (max-width: 560px) {
    #journey .hero { gap: 22px; }
}

/* ---- Reduced motion: everything holds still ---- */
@media (prefers-reduced-motion: reduce) {
    .orbit-ring, .orbit-mark, .status-dot::after, .hero-word, .hero-caret, .hero-start::after, #journey .project-disc { animation: none !important; }
}

/* ==========================================================================
   VAYNO Sky
   A bright, dreamlike world in the greens of the logo: an emerald sky over
   white architecture and still water (drawn in script.js), a white navbar,
   a glossy dark orb with liquid green light on the first slide, and quick
   links on the edge of the screen. Buttons keep moving: a light circles each
   one, a white fill sweeps in from one side and leaves to the other, the
   label rolls and the arrow travels. This layer comes last and outranks the
   ones above.
   ========================================================================== */
:root {
    /* Waterlines, as shares of the screen height, on the first slide and
       after it. The canvas reads them too. */
    --horizon: 68;
    --horizon-inner: 86;
    --mint: #c8f5d6;
    --ink: #0b2a1d;
    --btn-green: linear-gradient(135deg, #2ba862, #1a8247 52%, #10612f);
    --sweep: linear-gradient(100deg, #ffffff, #effcf3 55%, #d2f7de);
    --g-text: linear-gradient(100deg, #ffffff 0%, #d6fbe2 26%, #8fe39e 58%, #4caf5e 78%, #ffffff 100%);
    --lux-line: rgba(255, 255, 255, .12);
    --lux-glass:
        linear-gradient(160deg, rgba(143, 227, 158, .09), rgba(255, 255, 255, .015) 46%, rgba(143, 227, 158, .04)),
        rgba(4, 24, 16, .84);
    --edge: rgba(255, 255, 255, .16);
    --edge-strong: rgba(255, 255, 255, .34);
    --dir: 1;
}
html[dir="rtl"] { --dir: -1; }
body { background: #0b4431; }

/* ---- The world behind every slide ---- */
.bg-stage { background: linear-gradient(180deg, #0b4431 0%, #33916b 60%, #0a3a29 100%); }
.bg-world { position: absolute; inset: 0; width: 100%; height: 100%; }
.grain { opacity: .03; }
.pointer-glow { background: radial-gradient(circle, rgba(255, 255, 255, .1), rgba(200, 245, 214, .04) 40%, transparent 66%); }
#journey .journey-panel:not(.hero)::after { -webkit-text-stroke-color: rgba(255, 255, 255, .1); }

/* ---- White navbar ---- */
.navbar, .navbar.scrolled {
    border-color: rgba(255, 255, 255, .75);
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 18px 50px -22px rgba(2, 40, 26, .5), inset 0 1px 0 #ffffff;
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
}
.navbar::after { background: linear-gradient(90deg, rgba(26, 130, 71, 0), #1a8247 35%, #2ba862); }
.nav-wordmark { color: var(--ink); }
.nav-mark .mark-silver { fill: #1d3b2d; }
.nav-counter { border-color: rgba(11, 42, 29, .14); color: rgba(11, 42, 29, .45); }
.nav-counter-num { color: #1a8247; }
.nav-menu a { color: rgba(11, 42, 29, .72); }
.nav-menu a:hover { color: var(--ink); }
.nav-menu a[aria-current="true"] { color: #ffffff; }
.nav-indicator {
    border-color: transparent;
    background: var(--btn-green);
    box-shadow: 0 8px 20px -8px rgba(26, 130, 71, .85);
}
.lang-switch { border-color: rgba(11, 42, 29, .1); background: rgba(11, 42, 29, .045); }
.lang-switch button { color: rgba(11, 42, 29, .7); }
.lang-switch button:hover { background: rgba(11, 42, 29, .07); color: var(--ink); }
.lang-switch button[aria-pressed="true"] { background: var(--btn-green); box-shadow: 0 6px 16px -8px rgba(26, 130, 71, .9); color: #ffffff; }
.lang-switch button:focus-visible { outline-color: #1a8247; }
.nav-toggle .bar { background: var(--ink); }
@media (max-width: 800px) {
    .navbar .nav-menu {
        border: 1px solid rgba(11, 42, 29, .08);
        border-top: 0;
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 24px 48px -20px rgba(2, 40, 26, .45);
    }
    .navbar .nav-menu li { border-color: rgba(11, 42, 29, .08); }
    .navbar .nav-menu a[aria-current="true"] { color: #1a8247; }
}

/* ---- Hero: words on the left, the orb on the right ---- */
#journey .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    place-items: center start;
    padding: 96px var(--gutter) calc(96px + 12svh);
}
.hero-content { max-width: 620px; }
.hero-kicker {
    gap: 12px;
    margin: 0 0 26px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--mint);
    font-size: 10.5px;
    letter-spacing: .26em;
    text-shadow: 0 1px 12px rgba(2, 36, 24, .5);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.status-dot { background: #ffffff; box-shadow: 0 0 12px var(--mint); }
.status-dot::after { border-color: var(--mint); }
.hero-title { color: #ffffff; text-shadow: 0 2px 34px rgba(2, 36, 24, .28); }
.hero-word { text-shadow: none; filter: drop-shadow(0 2px 18px rgba(2, 36, 24, .3)); }
.hero-caret { background: var(--mint); box-shadow: 0 0 18px rgba(200, 245, 214, .9), 0 0 42px rgba(143, 227, 158, .7); }
.hero-lede {
    max-width: 460px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, .9);
    font: 500 clamp(15px, 1.2vw, 17.5px)/1.65 var(--font-body);
    text-shadow: 0 1px 14px rgba(2, 36, 24, .55);
}
.hero-actions { margin-top: clamp(26px, 3.2vw, 38px); }
.hero-start, .hero-link {
    min-height: 56px;
    padding: 0 26px;
    font: 700 12px var(--font-body);
    letter-spacing: .14em;
    text-transform: uppercase;
}
.hero-start { box-shadow: 0 18px 40px -14px rgba(2, 50, 28, .7), inset 0 1px 0 rgba(255, 255, 255, .35); }
.hero-start:hover { box-shadow: 0 22px 50px -14px rgba(2, 50, 28, .85), inset 0 1px 0 rgba(255, 255, 255, .45); }
.hero-start::after { background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 48%, transparent 66%); }
.hero-link { color: #ffffff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* ---- The orb ---- */
/* It floats a little above the water; its reflection hangs the same
   distance below the waterline, upside down. */
.hero-stage {
    --orb: clamp(200px, min(30vw, 46svh), 470px);
    --float: 3svh;
    position: absolute;
    z-index: 1;
    top: calc(var(--horizon) * 1svh - var(--orb) - var(--float));
    left: 68%;
    width: var(--orb);
    height: var(--orb);
    translate: -50% 0;
}
html[dir="rtl"] .hero-stage { left: 32%; }
/* Green light that the orb throws on the water. */
.hero-stage::after {
    position: absolute;
    top: calc(100% + var(--float) - 9px);
    right: -24%;
    left: -24%;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(200, 255, 220, .75), rgba(143, 227, 158, .3) 55%, transparent);
    content: "";
    filter: blur(5px);
    pointer-events: none;
    animation: orb-pool 7s ease-in-out infinite;
}
@keyframes orb-pool { 50% { opacity: .65; scale: .86 1; } }
.hero-orb {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    text-decoration: none;
    transform: translate(calc(var(--px, 0) * 18px), calc(var(--py, 0) * 12px));
    transition: transform .9s cubic-bezier(.2, .8, .2, 1), scale .8s cubic-bezier(.2, .9, .25, 1);
    -webkit-tap-highlight-color: transparent;
    animation: orb-float 7s ease-in-out infinite;
}
.hero-orb:hover { scale: 1.035; }
.hero-orb:active { scale: .985; }
.hero-orb:focus-visible { outline: none; }
.hero-orb:focus-visible .orb-ball { box-shadow: 0 0 0 3px #ffffff, 0 0 0 7px rgba(26, 130, 71, .8), 0 50px 90px -40px rgba(1, 30, 18, .75); }
@keyframes orb-float { 50% { translate: 0 -12px; } }
/* A slow halo that breathes behind the ball. */
.hero-orb::before {
    position: absolute;
    z-index: -1;
    inset: -14%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(143, 227, 158, .42), rgba(143, 227, 158, .12) 55%, transparent);
    content: "";
    animation: orb-halo 5s ease-in-out infinite alternate;
}
@keyframes orb-halo { to { opacity: .45; scale: 1.08; } }
.orb-ball {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 50%;
    background: #020604;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .08),
        inset -22px -30px 70px rgba(0, 0, 0, .6),
        0 50px 90px -40px rgba(1, 30, 18, .75);
    isolation: isolate;
}
/* Liquid light: green currents turning slowly inside the glass. */
.orb-art { position: absolute; inset: 0; width: 100%; height: 100%; transition: filter .6s ease; }
.orb-flow { transform-box: view-box; transform-origin: 50% 50%; }
.orb-flow-a { animation: orb-turn 24s linear infinite; }
.orb-flow-b { animation: orb-turn 15s linear infinite reverse; }
@keyframes orb-turn { to { rotate: 1turn; } }
/* Gloss: a soft window of light up top, a sharp glint and the bright
   water below caught on the underside. */
.orb-shine {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 19% 8% at 38% 14%, rgba(255, 255, 255, .62), rgba(255, 255, 255, .34) 52%, rgba(255, 255, 255, 0) 74%),
        radial-gradient(circle at 27% 24%, rgba(255, 255, 255, .95) 0 1.2%, transparent 2.3%);
    translate: calc(var(--px, 0) * -10px) calc(var(--py, 0) * -10px);
    transition: translate .9s cubic-bezier(.2, .8, .2, 1);
}
.orb-label {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 70%;
    font: 600 11px/1.5 var(--font-mono);
    letter-spacing: .26em;
    text-align: center;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
    text-transform: uppercase;
}
/* A switch that flips on when the orb is hovered or focused. */
.orb-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    border: 1.5px solid rgba(255, 255, 255, .9);
    border-radius: 999px;
    transition: background .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.orb-toggle::after {
    position: absolute;
    top: 3.5px;
    left: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    content: "";
    transition: translate .55s cubic-bezier(.5, -.4, .3, 1.5), background .5s ease, box-shadow .5s ease;
}
html[dir="rtl"] .orb-toggle::after { right: 4px; left: auto; }
.hero-orb:is(:hover, :focus-visible) .orb-toggle { border-color: var(--mint); background: rgba(143, 227, 158, .28); box-shadow: 0 0 18px rgba(143, 227, 158, .6); }
.hero-orb:is(:hover, :focus-visible) .orb-toggle::after { translate: calc(var(--dir) * 19px) 0; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
.hero-orb:is(:hover, :focus-visible) .orb-art { filter: brightness(1.35) saturate(1.15); }
/* The reflection: the same ball upside down, fading into the water. */
.orb-reflection {
    position: absolute;
    top: calc(100% + var(--float) * 2);
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    filter: blur(1.5px);
    transform: scaleY(-1);
    -webkit-mask: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .45) 34%, transparent 72%);
    mask: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .45) 34%, transparent 72%);
    pointer-events: none;
}
.orb-reflection .orb-ball {
    transform: translate(calc(var(--px, 0) * 18px), calc(var(--py, 0) * 12px));
    transition: transform .9s cubic-bezier(.2, .8, .2, 1);
    animation: orb-float 7s ease-in-out infinite;
}
/* The orb rises out of the water once the curtain opens. */
html.is-loaded .hero-stage { animation: orb-arrive 1.6s cubic-bezier(.16, 1, .3, 1) .35s backwards; }
@keyframes orb-arrive { from { opacity: 0; scale: .7; } }

/* ---- Quick links on the edge of the screen ---- */
.side-dock {
    position: fixed;
    z-index: 19;
    top: 50%;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    translate: 0 -50%;
}
html[dir="rtl"] .side-dock { right: auto; left: 0; }
html.is-loaded .side-dock { animation: dock-arrive 1s cubic-bezier(.16, 1, .3, 1) 1s backwards; }
@keyframes dock-arrive { from { opacity: 0; translate: calc(var(--dir) * 100%) -50%; } }
.dock-btn {
    position: relative;
    display: inline-flex;
    height: 54px;
    align-items: center;
    overflow: hidden;
    padding-inline: 18px 17px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-inline-end: 0;
    border-radius: 14px 0 0 14px;
    background: var(--btn-green);
    box-shadow: 0 16px 34px -14px rgba(2, 40, 24, .65), inset 0 1px 0 rgba(255, 255, 255, .3);
    color: #ffffff;
    font: 700 11px var(--font-body);
    letter-spacing: .14em;
    text-decoration: none;
    text-transform: uppercase;
    transition: translate .5s cubic-bezier(.2, .9, .25, 1), opacity .4s ease, box-shadow .4s ease;
}
html[dir="rtl"] .dock-btn { border-radius: 0 14px 14px 0; }
.dock-btn:hover { translate: calc(var(--dir) * -5px) 0; box-shadow: 0 20px 40px -14px rgba(2, 40, 24, .8), inset 0 1px 0 rgba(255, 255, 255, .4); }
.dock-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
.dock-btn.is-here { opacity: 0; translate: calc(var(--dir) * 100%) 0; pointer-events: none; }
/* A light runs across each button now and then. */
.dock-btn::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .4) 48%, transparent 66%);
    content: "";
    translate: -120% 0;
    pointer-events: none;
    animation: button-shine 5s cubic-bezier(.2, .8, .2, 1) 3s infinite;
}
.dock-btn + .dock-btn::after { animation-delay: 3.4s; }
.dock-icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dock-label {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    transition: max-width .6s cubic-bezier(.7, 0, .2, 1), margin .6s cubic-bezier(.7, 0, .2, 1), opacity .4s ease;
}
.side-dock.is-open .dock-label, .dock-btn:is(:hover, :focus-visible) .dock-label { max-width: 220px; margin-inline-start: 12px; opacity: 1; }
@media (max-width: 760px), (max-height: 520px) {
    .side-dock { display: none; }
}

/* ---- Accents on the other slides ---- */
#journey .eyebrow { color: var(--mint); }
#journey .projects > .container > .eyebrow::before,
#journey .services-heading .eyebrow::before,
#journey .introduction .eyebrow::before,
#journey .team > .container > .eyebrow::before,
#journey .contact > .container > .eyebrow::before { background: linear-gradient(90deg, var(--mint), transparent); }
#journey .section-title, #journey .introduction h2 { color: #ffffff; }
.service-icon { stroke: var(--mint); filter: drop-shadow(0 0 8px rgba(143, 227, 158, .55)); }
.lux-glow { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(143, 227, 158, .14), transparent 55%); }
.lux-border {
    background: conic-gradient(from var(--spin), transparent 0deg 200deg, rgba(143, 227, 158, 0) 212deg, rgba(143, 227, 158, .9) 286deg, rgba(255, 255, 255, .95) 306deg, rgba(143, 227, 158, 0) 338deg, transparent 360deg);
}
.project-link { color: var(--mint); }
.services-link { color: var(--mint); }
/* Discs: a white rim that breathes, and a slow float. */
#journey .project-disc {
    animation: project-disc-spin 72s linear var(--disc-delay, 0s) infinite, disc-breathe 4s ease-in-out infinite alternate, disc-float 6s ease-in-out var(--disc-delay, 0s) infinite;
}
@keyframes disc-breathe {
    from { box-shadow: 0 0 0 1px rgba(255, 255, 255, .26), 0 0 0 12px rgba(255, 255, 255, .03), 0 30px 80px -24px rgba(0, 0, 0, .8), 0 0 70px -22px rgba(143, 227, 158, .5); }
    to { box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 16px rgba(255, 255, 255, .05), 0 30px 80px -24px rgba(0, 0, 0, .8), 0 0 100px -16px rgba(143, 227, 158, .8); }
}
@keyframes disc-float { 50% { translate: 0 -10px; } }

/* ---- Buttons that move ---- */
/* A light circles every main button. */
@keyframes ring-spin { to { --spin: 360deg; } }
.hero-start, .hero-start:hover, .project-open, .project-open:hover,
#journey .submit-btn, #journey .submit-btn:hover, #journey .whatsapp-btn, #journey .whatsapp-btn:hover,
#journey .email-btn, #journey .email-btn:hover, #journey .team-portfolio, #journey .team-portfolio:hover {
    border: 1.5px solid transparent;
    background:
        var(--btn-green) padding-box,
        conic-gradient(from var(--spin), rgba(255, 255, 255, .22) 0deg 190deg, var(--mint) 250deg, #ffffff 278deg, var(--mint) 306deg, rgba(255, 255, 255, .22) 360deg) border-box;
    color: #ffffff;
    animation: ring-spin 4s linear infinite;
}
.hero-link, .hero-link:hover {
    border: 1.5px solid transparent;
    background:
        linear-gradient(rgba(4, 40, 27, .42), rgba(4, 40, 27, .42)) padding-box,
        conic-gradient(from var(--spin), rgba(255, 255, 255, .4) 0deg 190deg, var(--mint) 250deg, #ffffff 278deg, var(--mint) 306deg, rgba(255, 255, 255, .4) 360deg) border-box;
    animation: ring-spin 5s linear -1.2s infinite;
}
.project-open { position: relative; isolation: isolate; overflow: hidden; }
/* On hover a white fill sweeps in from one side and, on leaving, out the other. */
.hero-start::before, .hero-link::before, .project-open::before,
#journey .submit-btn::before, #journey .whatsapp-btn::before, #journey .email-btn::before, #journey .team-portfolio::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: var(--sweep);
    content: "";
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .65s cubic-bezier(.7, 0, .2, 1);
}
.hero-start:hover::before, .hero-link:hover::before, .project-open:hover::before,
#journey .submit-btn:hover::before, #journey .whatsapp-btn:hover::before, #journey .email-btn:hover::before, #journey .team-portfolio:hover::before {
    transform: scaleX(1);
    transform-origin: left center;
}
html[dir="rtl"] .hero-start::before, html[dir="rtl"] .hero-link::before, html[dir="rtl"] .project-open::before,
html[dir="rtl"] #journey .submit-btn::before, html[dir="rtl"] #journey .whatsapp-btn::before, html[dir="rtl"] #journey .email-btn::before, html[dir="rtl"] #journey .team-portfolio::before { transform-origin: left center; }
html[dir="rtl"] .hero-start:hover::before, html[dir="rtl"] .hero-link:hover::before, html[dir="rtl"] .project-open:hover::before,
html[dir="rtl"] #journey .submit-btn:hover::before, html[dir="rtl"] #journey .whatsapp-btn:hover::before, html[dir="rtl"] #journey .email-btn:hover::before, html[dir="rtl"] #journey .team-portfolio:hover::before { transform-origin: right center; }
:is(.hero-start, .hero-link, .project-open, .submit-btn, .whatsapp-btn, .email-btn, .team-portfolio) { transition: translate .45s cubic-bezier(.2, .9, .25, 1), box-shadow .4s ease, color .45s ease; }
:is(.hero-start, .hero-link, .project-open, .submit-btn, .whatsapp-btn, .email-btn, .team-portfolio):hover { color: #0b3a24; }
.hero-link:hover { box-shadow: 0 0 34px -8px rgba(255, 255, 255, .6); }
/* Labels roll up and are replaced by their copy. */
.btn-roll { display: inline-block; height: 1.3em; overflow: hidden; line-height: 1.3em; vertical-align: middle; }
.btn-roll > span { display: block; text-shadow: 0 1.7em 0 currentColor; transition: transform .6s cubic-bezier(.7, 0, .2, 1); }
:is(.hero-start, .hero-link, .project-open, .submit-btn, .whatsapp-btn, .email-btn, .team-portfolio):hover .btn-roll > span { transform: translateY(-1.7em); }
/* Arrows shoot off to the side and come back from the other. */
:is(.hero-start, .hero-link, .submit-btn):hover .arrow-icon,
html[dir="rtl"] :is(.hero-start, .hero-link, .submit-btn):hover .arrow-icon { transform: none; animation: arrow-travel .8s cubic-bezier(.6, 0, .2, 1); }
:is(.whatsapp-btn, .email-btn, .team-portfolio):hover .arrow-icon { transform: none; animation: arrow-travel-up .8s cubic-bezier(.6, 0, .2, 1); }
@keyframes arrow-travel {
    0% { translate: 0 0; opacity: 1; }
    42% { translate: calc(var(--dir) * 140%) 0; opacity: 0; }
    43% { translate: calc(var(--dir) * -140%) 0; opacity: 0; }
    100% { translate: 0 0; opacity: 1; }
}
@keyframes arrow-travel-up {
    0% { translate: 0 0; opacity: 1; }
    42% { translate: calc(var(--dir) * 140%) -140%; opacity: 0; }
    43% { translate: calc(var(--dir) * -140%) 140%; opacity: 0; }
    100% { translate: 0 0; opacity: 1; }
}
:is(.hero-start, .hero-link, .project-open, .submit-btn, .whatsapp-btn, .email-btn, .team-portfolio):active { scale: .97; }
/* Text links: an underline draws in from the side. */
.services-link > span, .project-link, .case-study-visit {
    background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
    text-decoration: none;
    transition: background-size .5s cubic-bezier(.7, 0, .2, 1);
}
.services-link:hover > span, .project-link:hover, .case-study-visit:hover { background-size: 100% 1px; text-decoration: none; }
html[dir="rtl"] :is(.services-link > span, .project-link, .case-study-visit) { background-position: 100% 100%; }

/* ---- Hero on smaller screens ---- */
/* Upright tablets and phones: the words on top, the orb below them and
   the water lower down. */
@media (max-width: 1100px) and (orientation: portrait) {
    :root { --horizon: 80; --horizon-inner: 92; }
    #journey .hero { grid-template-columns: minmax(0, 1fr); place-items: start center; align-content: start; padding: 120px 6vw 0; }
    .hero-content { align-items: center; text-align: center; }
    .hero-actions { justify-content: center; }
    .hero-lede { margin-inline: auto; }
    .hero-stage { --orb: clamp(170px, min(52vw, 28svh), 360px); --float: 2.4svh; left: 50%; }
    html[dir="rtl"] .hero-stage { left: 50%; }
}
@media (max-width: 1100px) and (orientation: landscape) {
    #journey .hero { padding: 88px var(--gutter) calc(64px + 10svh); }
    .hero-stage { --orb: clamp(150px, min(30vw, 44svh), 380px); left: 72%; }
    html[dir="rtl"] .hero-stage { left: 28%; }
}
/* Phones: everything smaller, so the orb fits under the words. */
@media (max-width: 560px) {
    :root { --horizon: 76; }
    #journey .hero { padding: 92px 20px 0; }
    .hero-kicker { margin-bottom: 16px; font-size: 8.5px; letter-spacing: .16em; }
    .hero-kicker .status-dot { display: none; }
    .hero-title { font-size: clamp(36px, 11.5vw, 50px); }
    .hero-lede { margin-top: 14px; font-size: 14px; }
    .hero-actions { gap: 8px; margin-top: 20px; }
    .hero-start, .hero-link { min-height: 46px; gap: 8px; padding: 0 14px; font-size: 10px; letter-spacing: .08em; }
    .hero-stage { --orb: clamp(140px, min(44vw, 22svh), 220px); --float: 2svh; }
    .orb-label { gap: 8px; font-size: 8px; letter-spacing: .18em; }
    .orb-toggle { width: 32px; height: 18px; }
    .orb-toggle::after { top: 2.5px; width: 10px; height: 10px; }
    .hero-orb:is(:hover, :focus-visible) .orb-toggle::after { translate: calc(var(--dir) * 13px) 0; }
}
@media (max-width: 560px) and (max-height: 700px) {
    .hero-stage { display: none; }
}
/* Short landscape screens (phones on their side): just the headline and buttons. */
@media (orientation: landscape) and (max-height: 520px) {
    #journey .hero { padding: 72px var(--gutter) 24px; }
    .hero-kicker, .hero-lede { display: none; }
    .hero-title { font-size: clamp(30px, 10svh, 46px); }
    .hero-actions { margin-top: 16px; }
    .hero-start, .hero-link { min-height: 42px; padding: 0 16px; font-size: 10px; }
    .hero-stage { --orb: clamp(110px, 36svh, 200px); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-start, .hero-link, .project-open, #journey .submit-btn, #journey .whatsapp-btn, #journey .email-btn, #journey .team-portfolio,
    :is(.hero-start, .hero-link, .submit-btn, .whatsapp-btn, .email-btn, .team-portfolio):hover .arrow-icon,
    .hero-orb, .hero-orb::before, .orb-flow, .orb-reflection .orb-ball, .hero-stage, .hero-stage::after,
    .side-dock, .dock-btn::after { animation: none !important; }
    .btn-roll > span, .hero-start::before, .hero-link::before, .project-open::before, .dock-label, .orb-toggle::after { transition: none; }
}

/* ---- On computers every slide fits the window ----
   The wheel changes slides at once, so on wide screens type, gaps and cards
   follow the window height instead of making a slide scroll. */
@media (min-width: 1024px) and (orientation: landscape) {
    /* Projects */
    .projects.journey-panel { padding: clamp(70px, 9svh, 82px) 0 clamp(14px, 3svh, 44px); }
    .projects.journey-panel .section-title { font-size: clamp(38px, min(6.2vw, 8.5svh), 96px); }
    .projects.journey-panel .project-track-viewport { margin-top: clamp(4px, 1.6svh, 16px); }
    #journey .project-disc { width: min(100%, clamp(150px, 27svh, 250px)); }
    #journey .projects .project-card-copy { padding-top: clamp(8px, 1.6svh, 16px); }
    /* About */
    .story-panel .introduction { padding: clamp(70px, 9.4svh, 84px) 0 clamp(4px, 1.2svh, 20px); }
    .story-panel .introduction h2 { font-size: clamp(30px, min(5.4vw, 7.2svh), 84px); }
    .story-panel .brand-values-heading { margin-top: clamp(8px, 2.2svh, 28px); }
    .story-panel .brand-values-heading + .brand-values { margin-top: clamp(6px, 1.2svh, 12px); }
    .story-panel .brand-values article.scratch-value { min-height: clamp(70px, 11svh, 108px); }
    .story-panel .team { padding: clamp(8px, 2.2svh, 30px) 0 clamp(8px, 2svh, 40px); }
    .story-panel .team .section-title { margin-top: 4px; font-size: clamp(26px, min(4vw, 5.4svh), 58px); }
    .story-panel .team-grid { margin-top: clamp(8px, 1.8svh, 26px); }
    #journey .member-card { padding: clamp(10px, 1.7svh, 16px) 16px clamp(12px, 2svh, 22px); }
    .member-card { grid-template-columns: clamp(50px, 7svh, 72px) minmax(0, 1fr); }
    #journey .member-card .member-photo-frame { width: clamp(50px, 7svh, 72px); }
    .member-card .team-bio { margin-top: clamp(6px, 1.4svh, 18px); line-height: 1.6; }
    #journey .member-card .team-portfolio { min-height: clamp(36px, 5svh, 42px); margin-top: clamp(8px, 1.6svh, 22px); }
}
/* Contact on wide screens: the words on one side, the form on the other. */
@media (min-width: 1100px) and (orientation: landscape) {
    .contact.journey-panel { padding: clamp(72px, 9.4svh, 86px) 0 clamp(12px, 2.4svh, 30px); }
    #journey .contact > .container {
        display: grid;
        width: min(1320px, calc(100% - 2 * var(--gutter)));
        margin-inline: auto;
        padding-bottom: 0;
        grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
        grid-template-rows: auto auto 1fr;
        column-gap: clamp(32px, 4vw, 72px);
        align-items: start;
    }
    #journey .contact > .container > .eyebrow { grid-area: 1 / 1; align-self: end; }
    #journey .contact .section-title { grid-area: 2 / 1; font-size: clamp(36px, min(4.4vw, 8svh), 76px); }
    #journey .contact .contact-methods { grid-area: 3 / 1; }
    #journey .contact .project-inquiry { grid-area: 1 / 2 / span 3; margin-top: 0; padding: clamp(16px, 2.6svh, 30px) clamp(20px, 2.2vw, 32px); }
    #journey .contact .project-inquiry h3 { margin-bottom: clamp(8px, 1.6svh, 20px); font-size: clamp(20px, 3.2svh, 28px); }
    #journey .contact #inquiryForm { gap: clamp(7px, 1.3svh, 16px) 16px; }
    #journey .contact .form-group { gap: 5px; }
    #journey .contact #inquiryForm :is(input, select, textarea) { padding-block: clamp(6px, 1.05svh, 11px); }
    #journey .contact .form-group textarea { height: clamp(52px, 9svh, 96px); min-height: 52px; }
    /* The orbiting mark sits under the heading. */
    .contact-orbit { top: auto; right: auto; bottom: clamp(16px, 5svh, 64px); left: var(--gutter); width: clamp(150px, min(18vw, 30svh), 300px); transform: none; }
    html[dir="rtl"] .contact-orbit { right: var(--gutter); left: auto; }
}

/* Words that sit straight on the bright world get a soft shadow to read by. */
#journey .section-title, #journey .introduction h2 { text-shadow: 0 2px 30px rgba(2, 36, 24, .45); }
#journey .eyebrow, #journey .services-link { text-shadow: 0 1px 10px rgba(2, 36, 24, .7); }

/* ---- Phones and tablets: the same look with lighter effects ----
   Blur filters, frosted glass and film grain cost a lot on a phone, so
   touch screens skip them; the orb's light still turns and floats. */
@media (hover: none), (pointer: coarse) {
    .grain { display: none; }
    .orb-flow { filter: none; }
    .orb-reflection { filter: none; }
    .navbar, .navbar.scrolled { background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .hero-link, .hero-kicker { -webkit-backdrop-filter: none; backdrop-filter: none; }
    .hero-link, .hero-link:hover { background: linear-gradient(rgba(4, 40, 27, .62), rgba(4, 40, 27, .62)) padding-box, conic-gradient(from var(--spin), rgba(255, 255, 255, .4) 0deg 190deg, var(--mint) 250deg, #ffffff 278deg, var(--mint) 306deg, rgba(255, 255, 255, .4) 360deg) border-box; }
    .dock-btn::after, .hero-orb::before { animation: none; }
}

/* ---- Projects on phones: the discs stack and the slide scrolls down ----
   On computers they stay in a row that scrolls sideways. */
@media (max-width: 760px) {
    #journey .projects.journey-panel { display: block; overflow-y: auto; overscroll-behavior-y: contain; padding-bottom: 150px; scrollbar-width: none; }
    #journey .projects .project-track-viewport { overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none; }
    #journey .projects .project-track { width: 100%; min-width: 0; }
    #journey .projects .project-track-group { width: 100%; flex-direction: column; align-items: center; gap: 22px; padding-right: 0; }
    #journey .projects .project-card { flex: 0 0 auto; width: min(100%, 360px); }
    #journey .projects .project-controls { display: none; }
}

/* ---- Button words stay readable ----
   On hover the white fill comes in, so the words turn dark green with it,
   whatever older rule set them white. Touch screens have no real hover (a
   tap would leave the button white), so there buttons keep their colours
   and only press in. */
#journey :is(.hero-start, .hero-link, .project-open, .submit-btn, .whatsapp-btn, .email-btn, .team-portfolio):hover { color: #0b3a24; }
@media (hover: none) {
    #journey :is(.hero-start, .hero-link, .project-open, .submit-btn, .whatsapp-btn, .email-btn, .team-portfolio):hover { color: #ffffff; }
    #journey :is(.hero-start, .hero-link, .project-open, .submit-btn, .whatsapp-btn, .email-btn, .team-portfolio):hover::before { transform: scaleX(0); }
    #journey :is(.hero-start, .hero-link, .project-open, .submit-btn, .whatsapp-btn, .email-btn, .team-portfolio):hover .btn-roll > span { transform: none; }
    #journey :is(.hero-start, .hero-link, .project-open, .submit-btn, .whatsapp-btn, .email-btn, .team-portfolio):hover .arrow-icon { animation: none; }
}

/* ---- The guide types before it answers ---- */
.assistant-typing { display: inline-flex; align-items: center; gap: 5px; height: 1.2em; }
.assistant-typing i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .3; animation: typing-dot 1.1s ease-in-out infinite; }
.assistant-typing i:nth-child(2) { animation-delay: .16s; }
.assistant-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes typing-dot { 30% { opacity: 1; translate: 0 -4px; } }
.assistant-message.is-writing .assistant-words::after {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-inline-start: 2px;
    background: currentColor;
    content: "";
    vertical-align: -.15em;
    animation: caret-blink 1s steps(1) infinite;
}
.assistant-suggestions.is-busy button { opacity: .45; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
    .assistant-typing i, .assistant-message.is-writing .assistant-words::after { animation: none; }
}

/* ---- Slide hint: a hand that swipes toward the next slide ----
   It sits under the hero's buttons, pops in, swipes twice and pops out. */
.slide-hint {
    position: absolute;
    top: calc(100% + clamp(14px, 2.4svh, 26px));
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 7px 18px 7px 10px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: rgba(4, 30, 20, .66);
    box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .6);
    color: #ffffff;
    font: 600 10.5px/1 var(--font-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform-origin: 26px 50%;
}
html[dir="rtl"] .slide-hint { right: 0; left: auto; padding: 7px 10px 7px 18px; font-size: 13px; transform-origin: calc(100% - 26px) 50%; }
.slide-hint.is-showing { animation: hint-pop 2.6s cubic-bezier(.2, .9, .25, 1) both; }
@keyframes hint-pop {
    0% { opacity: 0; scale: .6; }
    10% { opacity: 1; scale: 1.06; }
    16%, 86% { opacity: 1; scale: 1; }
    100% { opacity: 0; scale: .85; }
}
.slide-hand { position: relative; width: 30px; height: 30px; flex: 0 0 auto; }
.slide-hand svg { width: 100%; height: 100%; fill: rgba(255, 255, 255, .14); stroke: #ffffff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* The finger presses, swipes toward the next slide and lifts, twice. */
.slide-hint.is-showing .slide-hand svg { animation: hand-swipe 1.1s cubic-bezier(.6, 0, .3, 1) .3s 2 both; }
@keyframes hand-swipe {
    0% { translate: calc(var(--dir) * 8px) 0; rotate: calc(var(--dir) * 8deg); scale: 1; }
    20% { translate: calc(var(--dir) * 8px) 2px; rotate: calc(var(--dir) * 8deg); scale: .88; }
    62% { translate: calc(var(--dir) * -9px) 2px; rotate: calc(var(--dir) * -6deg); scale: .88; }
    78% { translate: calc(var(--dir) * -9px) -1px; rotate: calc(var(--dir) * -6deg); scale: 1; }
    100% { translate: calc(var(--dir) * 8px) 0; rotate: calc(var(--dir) * 8deg); scale: 1; }
}
/* A short streak of light follows the fingertip. */
.slide-hand::before {
    position: absolute;
    top: 3px;
    left: 50%;
    width: 20px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--mint), rgba(200, 245, 214, 0));
    content: "";
    opacity: 0;
    transform-origin: 0 50%;
}
html[dir="rtl"] .slide-hand::before { right: 50%; left: auto; background: linear-gradient(270deg, var(--mint), rgba(200, 245, 214, 0)); transform-origin: 100% 50%; }
.slide-hint.is-showing .slide-hand::before { animation: hand-trail 1.1s cubic-bezier(.6, 0, .3, 1) .3s 2 both; }
@keyframes hand-trail {
    0%, 22% { opacity: 0; scale: .2 1; }
    55% { opacity: .95; scale: 1 1; }
    74%, 100% { opacity: 0; scale: .4 1; }
}
/* Upright screens: centred under the buttons, where the words are centred too. */
@media (max-width: 1100px) and (orientation: portrait) {
    .slide-hint, html[dir="rtl"] .slide-hint { right: auto; left: 50%; translate: -50% 0; transform-origin: 50% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .slide-hint.is-showing { animation: none; opacity: 1; }
    .slide-hint.is-showing .slide-hand svg, .slide-hint.is-showing .slide-hand::before { animation: none; }
}
/* Short laptop windows: the About slide tightens a little more to fit. */
@media (min-width: 1024px) and (orientation: landscape) and (max-height: 700px) {
    .story-panel .introduction h2 { font-size: clamp(28px, min(5.4vw, 6.3svh), 84px); }
    .story-panel .brand-values article.scratch-value { min-height: clamp(64px, 10svh, 108px); }
    .member-card .team-bio { font-size: 11.5px; line-height: 1.5; }
}
/* Phones: both discs fit on one screen, so the projects slide does not scroll. */
@media (max-width: 760px) {
    #journey .projects.journey-panel { padding-bottom: 16px; }
    .projects.journey-panel .section-title { font-size: clamp(30px, 9vw, 42px); }
    .projects.journey-panel .project-track-viewport { margin-top: 10px; }
    #journey .projects .project-track-group { gap: 12px; }
    #journey .projects .project-card { padding: 12px 14px 14px; }
    #journey .project-disc { width: min(100%, clamp(120px, 21svh, 210px)); }
    #journey .projects .project-card-copy { min-height: 0; padding-top: 8px; }
    .projects.journey-panel .project-card-copy .project-tech { display: none; }
    .projects.journey-panel .project-card-copy h3 { margin: 4px 0 2px; font-size: 22px; }
    .project-card-copy .project-actions { padding-top: 8px; }
}
@media (max-width: 760px) and (max-height: 700px) {
    #journey .project-disc { width: min(100%, clamp(100px, 16svh, 210px)); }
    .projects.journey-panel .section-title { font-size: 28px; }
}

/* ---- English type: Bricolage Grotesque for headings, Instrument Sans for text ----
   Bricolage is wider than the old face, so the big headings are set a
   little looser and one step lighter. */
.hero-title, #journey .section-title, #journey .introduction h2 { font-weight: 700; letter-spacing: -.03em; }
#journey .project-card-copy h3, .member-card h3, .project-inquiry h3, .services.journey-panel .service-card-title,
.assistant-panel-header h2, .case-study-header h2, .case-study-copy h4 { letter-spacing: -.015em; }