:root {
    --ds-brand: #7656ff;
    --ds-brand-strong: #5b3ee8;
    --ds-accent: #0891b2;
    --ds-ink: #121212;
    --ds-paper: #f6f3ec;
    --ds-surface: #ffffff;
    --ds-muted: #5f5c57;
    --ds-border: rgba(18, 18, 18, .18);
    --ds-focus: #0891b2;
    --ds-space-1: .25rem;
    --ds-space-2: .5rem;
    --ds-space-3: 1rem;
    --ds-space-4: 1.5rem;
    --ds-space-5: 2rem;
    --ds-space-6: 3rem;
    --ds-space-7: 4rem;
    --ds-duration: 220ms;
    --ds-ease: cubic-bezier(.2, .8, .2, 1);
    --ds-header-height: 88px;
}

html { scroll-padding-top: calc(var(--ds-header-height) + 1rem); }
body { background: var(--ds-paper); color: var(--ds-ink); }
a, button, input, textarea, select { -webkit-tap-highlight-color: transparent; }
a, button, [role="button"] { cursor: pointer; }
:where(a, button, input, textarea, select):focus-visible {
    outline: 3px solid var(--ds-focus);
    outline-offset: 4px;
}
.skip-link {
    position: fixed;
    z-index: 1000;
    top: 10px;
    right: 12px;
    padding: 12px 18px;
    color: #fff;
    background: var(--ds-ink);
    border: 2px solid #fff;
    transform: translateY(-150%);
    transition: transform var(--ds-duration) var(--ds-ease);
}
.skip-link:focus { transform: translateY(0); }

.section-shell, .inner-shell, .site-header { width: min(1320px, calc(100% - 64px)); }
.site-header {
    min-height: var(--ds-header-height);
    border-bottom: 1px solid var(--ds-border);
    background: rgba(246, 243, 236, .92);
    backdrop-filter: blur(14px);
}
.brand { min-height: 48px; padding-inline: 4px; }
.brand-name { font-size: 22px; letter-spacing: .13em; }
.desktop-nav { gap: clamp(18px, 2.4vw, 38px); font-weight: 650; }
.desktop-nav a { min-height: 44px; display: grid; place-items: center; }
.desktop-nav a::after { height: 3px; bottom: 3px; }
.header-cta, .button { min-height: 48px; border-radius: 0; transition: color var(--ds-duration) var(--ds-ease), background var(--ds-duration) var(--ds-ease), border-color var(--ds-duration) var(--ds-ease), transform var(--ds-duration) var(--ds-ease); }
.header-cta { border: 2px solid var(--ds-ink); }
.header-cta:hover { color: var(--ds-ink); background: var(--ds-accent); transform: translateY(-2px); }
.button-primary { color: #fff; background: var(--ds-brand); border: 2px solid var(--ds-brand); }
.button-primary:hover { color: var(--ds-ink); background: var(--ds-accent); border-color: var(--ds-accent); }
.button-dark { border: 2px solid var(--ds-ink); border-radius: 0; }
.text-link { min-height: 44px; }

.hero { min-height: min(830px, calc(100vh - var(--ds-header-height))); padding-block: clamp(64px, 9vw, 116px); gap: clamp(48px, 7vw, 100px); }
.hero::before {
    content: "01 / LANSA";
    position: absolute;
    top: 30px;
    left: 0;
    color: var(--ds-muted);
    font: 700 11px/1 Manrope, sans-serif;
    letter-spacing: .16em;
}
.hero h1 { max-width: 760px; font-size: clamp(52px, 6vw, 92px); line-height: 1.14; text-wrap: balance; }
.hero-description { max-width: 650px; color: var(--ds-muted); font-size: 17px; }
.visual-card { border-radius: 0; border: 2px solid #292929; box-shadow: 20px 20px 0 var(--ds-brand); transform: none; }
.visual-card:hover { transform: translate(-5px, -5px); box-shadow: 25px 25px 0 var(--ds-accent); }
.floating-tag { border-radius: 0; }
.trusted { border-block: 1px solid var(--ds-border); background: var(--ds-surface); }

.services, .process, .about { padding-block: clamp(92px, 11vw, 160px); }
.section-heading { align-items: end; border-top: 1px solid var(--ds-border); padding-top: 28px; }
.section-heading h2, .proposal-section-heading h2, .plan-heading h2 { text-wrap: balance; }
.service-grid { border-top: 1px solid var(--ds-border); border-right: 1px solid var(--ds-border); gap: 0; }
.service-card { min-height: 440px; border: 0; border-left: 1px solid var(--ds-border); border-bottom: 1px solid var(--ds-border); border-radius: 0; background: transparent; }
.service-card:hover, .service-featured { color: #fff; background: var(--ds-ink); transform: none; }
.service-card > a { min-width: 48px; min-height: 48px; border-radius: 0; }

.work { border-radius: 0; }
.project-art, .project-large .project-art { border-radius: 0; border: 1px solid rgba(255,255,255,.2); }
.project { transition: transform var(--ds-duration) var(--ds-ease); }
.project:hover { transform: translateY(-6px); }
.project-info { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.2); }
.about-statement { text-wrap: balance; }
.stat { border-radius: 0; border-color: var(--ds-border); }
.process-list { border-top: 1px solid var(--ds-border); }
.process-item { min-height: 150px; transition: background var(--ds-duration) var(--ds-ease), padding var(--ds-duration) var(--ds-ease); }
.process-item:hover { padding-inline: 24px; background: #fff; }
.contact { border-radius: 0; }
.footer { border-radius: 0; }
.footer-links a { min-height: 44px; display: inline-grid; place-items: center; }
.back-to-top { min-height: 44px; }

.proposal-hero, .contact-hero { min-height: min(780px, calc(100vh - var(--ds-header-height))); }
.proposal-poster, .contact-badge { border-radius: 0; box-shadow: 20px 20px 0 var(--ds-ink); }
.proposal-service-list { border-color: var(--ds-border); }
.proposal-service { transition: color var(--ds-duration) var(--ds-ease), background var(--ds-duration) var(--ds-ease), padding var(--ds-duration) var(--ds-ease); }
.proposal-service-icon, .poster-bottom span, .contact-tags span, .service-options span { border-radius: 0; }
.timeline { gap: 0; border-top: 1px solid rgba(255,255,255,.25); border-right: 1px solid rgba(255,255,255,.25); }
.timeline-phase { border: 0; border-left: 1px solid rgba(255,255,255,.25); border-bottom: 1px solid rgba(255,255,255,.25); border-radius: 0; }
.result-grid { gap: 0; border-top: 1px solid var(--ds-border); border-right: 1px solid var(--ds-border); }
.result-card { border: 0; border-left: 1px solid var(--ds-border); border-bottom: 1px solid var(--ds-border); border-radius: 0; }
.contact-content { align-items: start; }
.contact-detail, .contact-form-wrap, .contact-steps article { border-radius: 0; border: 1px solid var(--ds-border); }
.contact-form-wrap { box-shadow: 16px 16px 0 var(--ds-brand); }
.contact-form input, .contact-form textarea { min-height: 48px; border-radius: 0; border: 1px solid #aaa39a; background: #fff; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--ds-focus); box-shadow: 0 0 0 3px rgba(8,145,178,.18); }
.service-options span { min-height: 44px; display: grid; place-items: center; }
.messenger-dialog { border-radius: 0; border: 2px solid var(--ds-ink); box-shadow: 18px 18px 0 var(--ds-brand); }

.reveal { transform: translateY(20px); transition: opacity 420ms var(--ds-ease), transform 420ms var(--ds-ease); }
.reveal.is-visible { transform: translateY(0); }

@media (max-width: 1100px) {
    .section-shell, .inner-shell, .site-header { width: min(100% - 40px, 1320px); }
    .desktop-nav { gap: 18px; }
}
@media (max-width: 800px) {
    :root { --ds-header-height: 76px; }
    .section-shell, .inner-shell, .site-header { width: min(100% - 28px, 1320px); }
    .site-header { min-height: var(--ds-header-height); }
    .mobile-menu { background: var(--ds-ink); }
    .mobile-menu nav a { min-height: 54px; display: flex; align-items: center; }
    .hero::before { display: none; }
    .hero { padding-block: 62px 88px; }
    .visual-card { box-shadow: 10px 10px 0 var(--ds-brand); }
    .service-grid, .result-grid, .timeline { border-right: 0; }
    .service-card, .result-card, .timeline-phase { border-right: 1px solid var(--ds-border); }
    .contact-form-wrap { box-shadow: 9px 9px 0 var(--ds-brand); }
}
@media (max-width: 480px) {
    .hero h1 { font-size: clamp(42px, 12vw, 56px); }
    .button, .header-cta { min-height: 50px; }
    .services, .process, .about { padding-block: 80px; }
}
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; }
    .visual-card:hover, .project:hover, .header-cta:hover { transform: none; }
}