:root{
--bg:#080a09;--bg2:#0d110f;--card:#111614;--text:#f4f6f5;--muted:#9ca8a1;
--line:#263029;--accent:#728f58;--accent2:#95b676;--radius:22px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text);line-height:1.65}
a{color:inherit;text-decoration:none}.container{width:min(1180px,calc(100% - 40px));margin:auto}
.site-header{position:sticky;top:0;z-index:10;background:rgba(8,10,9,.95);border-bottom:1px solid var(--line)}
.nav-wrap{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{font-weight:800;font-size:20px}.logo span{color:var(--accent2)}
.main-nav{display:flex;gap:22px;align-items:center}.main-nav a{color:#cbd3cf;font-size:14px}.main-nav a:hover,.main-nav a.active{color:#fff}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:25px}
.section{padding:90px 0}.alt{background:var(--bg2)}
.hero{min-height:78vh;display:flex;align-items:center;background:radial-gradient(circle at 80% 20%,rgba(114,143,88,.14),transparent 30%)}
.hero-grid,.split-grid,.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.eyebrow{color:var(--accent2);font-size:12px;font-weight:800;letter-spacing:.2em}
h1{font-size:clamp(50px,7vw,88px);line-height:.95;letter-spacing:-.05em;margin:15px 0 25px}
h2{font-size:clamp(34px,4vw,56px);line-height:1.05;margin:0 0 22px}
h3{font-size:24px;margin:10px 0}.muted,p{color:var(--muted)}h1 span{color:var(--accent2)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 20px;border-radius:12px;border:1px solid var(--line);font-weight:700}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-secondary{background:transparent}
.studio-card,.project-card,.service-card,.timeline-item,.contact-form,.feature-card{
background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.project-grid,.service-grid,.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.project-card iframe{border-radius:12px;margin-top:12px}.project-meta{display:flex;justify-content:space-between;gap:12px}
.project-meta span{color:var(--accent2);font-size:12px;font-weight:800}.project-meta small{color:var(--muted)}
.timeline{display:grid;gap:14px;max-width:850px;margin:auto}.timeline-item{display:flex;gap:18px}.timeline-item>span{
width:42px;height:42px;border-radius:50%;background:var(--accent);display:grid;place-items:center;font-weight:800;flex:0 0 42px}
.page-hero{padding:100px 0 60px;background:radial-gradient(circle at 80% 10%,rgba(114,143,88,.12),transparent 28%)}
.page-hero .copy{max-width:800px}.contact-form{display:grid;gap:16px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:grid;gap:7px;font-weight:700;font-size:13px}input,select,textarea{
width:100%;background:#0c100e;color:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;font:inherit}
.socials{display:flex;gap:14px;margin-top:25px}.social-icon{
width:58px;height:58px;border:1px solid var(--line);border-radius:18px;display:grid;place-items:center;background:#111614}
.social-icon svg{width:28px;height:28px;fill:currentColor}.whatsapp{color:#25D366}.instagram{color:#fff}
.site-footer{padding:55px 0 24px;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.5fr .8fr .8fr;gap:40px}.footer-grid>div{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.footer-bottom{margin-top:35px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
@media(max-width:820px){
.menu-toggle{display:block}.main-nav{display:none;position:absolute;top:76px;left:0;right:0;background:#0b0e0c;padding:20px;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line)}
.main-nav.open{display:flex}.hero-grid,.split-grid,.contact-grid{grid-template-columns:1fr}.project-grid,.service-grid,.feature-grid{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}}
@media(max-width:560px){.field-row{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}.container{width:min(100% - 28px,1180px)}}


/* =========================================================
   RESPONSIVE NAVIGATION
   Desktop en mobiel gebruiken dezelfde centrale CSS/JS.
   De daadwerkelijke drawer-styling staat verderop in dit bestand.
========================================================= */

/* =========================================================
   FREQUENCY HERO
========================================================= */

.hero-frequency {
    position: relative;
    min-height: 72vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #080a09;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.frequency-bg {
    position: absolute;
    width: 650px;
    height: 650px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(
            circle,
            rgba(149,182,118,.12) 0%,
            rgba(114,143,88,.05) 35%,
            transparent 70%
        );
    filter: blur(20px);
    pointer-events: none;
}

.frequency-wrap {
    position: relative;
    width: min(1200px, 94%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.frequency-line {
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(3px, .55vw, 8px);
}

.frequency-line span {
    width: clamp(3px, .35vw, 5px);
    height: 20px;
    border-radius: 20px;
    background:
        linear-gradient(
            to top,
            #526a43,
            #95b676,
            #d4e5c4
        );
    box-shadow:
        0 0 8px rgba(149,182,118,.25),
        0 0 20px rgba(149,182,118,.08);
    transform-origin: center;
    animation: frequency-wave 1.15s ease-in-out infinite;
    animation-delay: calc(var(--i) * -.055s);
}

.frequency-line span:nth-child(3n) {
    animation-duration: .9s;
}

.frequency-line span:nth-child(4n) {
    animation-duration: 1.35s;
}

.frequency-line span:nth-child(5n) {
    animation-duration: .75s;
}

.frequency-line span:nth-child(7n) {
    animation-duration: 1.6s;
}

@keyframes frequency-wave {
    0%,
    100% {
        height: 18px;
        opacity: .45;
    }

    25% {
        height: 90px;
        opacity: .75;
    }

    50% {
        height: 220px;
        opacity: 1;
    }

    75% {
        height: 65px;
        opacity: .65;
    }
}

.frequency-line span:nth-child(n+14):nth-child(-n+27) {
    animation-name: frequency-wave-center;
}

@keyframes frequency-wave-center {
    0%,
    100% {
        height: 35px;
    }

    25% {
        height: 130px;
    }

    50% {
        height: 280px;
    }

    75% {
        height: 95px;
    }
}

.frequency-scroll {
    position: absolute;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    width: 32px;
    height: 50px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 30px;
    z-index: 3;
}

.frequency-scroll span {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 4px;
    height: 4px;
    transform: translateX(-50%);
    background: #95b676;
    border-radius: 50%;
    animation: scroll-dot 1.8s ease-in-out infinite;
}

@keyframes scroll-dot {
    0% {
        transform: translate(-50%, 0);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, 20px);
        opacity: 0;
    }
}

.tracks-section {
    scroll-margin-top: 120px;
}

@media (max-width: 768px) {
    .hero-frequency {
        min-height: 60vh;
    }

    .frequency-line {
        height: 220px;
        gap: 4px;
    }

    .frequency-line span {
        width: 3px;
    }

    @keyframes frequency-wave-center {
        0%,
        100% {
            height: 25px;
        }

        25% {
            height: 90px;
        }

        50% {
            height: 190px;
        }

        75% {
            height: 70px;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .frequency-line span,
    .frequency-scroll span {
        animation: none;
    }

    .frequency-line span {
        height: 80px;
    }
}


/* =========================================================
   HAMBURGER / SLIDE-OUT MENU
========================================================= */

.desktop-nav {
    display: flex;
}

.menu-toggle {
    width: 48px;
    height: 48px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
    background: #111614;
    border: 1px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
    position: relative;
    z-index: 1202;
    transition: .25s ease;
}

.menu-toggle:hover {
    border-color: var(--accent-2);
    background: #151b18;
}

.menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 999px;
    transition: transform .3s ease, opacity .3s ease;
}

.menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1198;
    transition: opacity .35s ease, visibility .35s ease;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: min(430px, 92vw);
    height: 100vh;
    height: 100dvh;
    padding: 28px;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(114,143,88,.20),
            transparent 31%
        ),
        #0b0e0c;
    border-left: 1px solid var(--line);
    box-shadow: -25px 0 70px rgba(0,0,0,.38);
    transform: translateX(102%);
    visibility: hidden;
    z-index: 1200;
    transition:
        transform .45s cubic-bezier(.77,0,.18,1),
        visibility .45s ease;
}

.mobile-menu.active {
    transform: translateX(0);
    visibility: visible;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--line);
}

.menu-close {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    transition: .25s ease;
}

.menu-close:hover {
    color: var(--accent-2);
    border-color: var(--accent-2);
    transform: rotate(90deg);
}

.mobile-menu-links {
    display: flex;
    flex-direction: column;
    margin-top: 34px;
}

.mobile-menu-links a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 17px 4px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: #d5dbd7;
    font-size: clamp(22px,5vw,32px);
    font-weight: 800;
    letter-spacing: -.035em;
    transition: .25s ease;
}

.mobile-menu-links a span {
    width: 31px;
    flex: 0 0 31px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

.mobile-menu-links a::after {
    content: "→";
    position: absolute;
    right: 6px;
    color: var(--accent-2);
    opacity: 0;
    transform: translateX(-10px);
    transition: .25s ease;
}

.mobile-menu-links a:hover,
.mobile-menu-links a.active {
    color: #fff;
    padding-left: 10px;
}

.mobile-menu-links a:hover::after,
.mobile-menu-links a.active::after {
    opacity: 1;
    transform: translateX(0);
}

.mobile-menu-footer {
    margin-top: auto;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.mobile-menu-footer p {
    margin: 0 0 12px;
    color: #7f8b84;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.mobile-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.mobile-socials a {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.mobile-socials a:hover {
    color: var(--accent-2);
}

body.menu-open {
    overflow: hidden;
}

@media (min-width: 901px) {
    .mobile-menu,
    .menu-overlay {
        display: none !important;
    }
}

@media (max-width: 900px) {
    .desktop-nav {
        display: none !important;
    }

    .menu-toggle {
        display: flex !important;
    }

    .site-header .nav-wrap {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    .site-header .main-nav.desktop-nav {
        position: static !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }
}

@media (max-width: 480px) {
    .mobile-menu {
        width: 100%;
        padding: 22px;
    }

    .mobile-menu-links a {
        font-size: 24px;
    }
}


/* =========================================================
   RESPONSIVE GLOBAL
========================================================= */

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

img,
svg,
iframe {
    max-width: 100%;
}

.container {
    width: min(1180px, calc(100% - 40px));
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1500;
}

.nav-wrap {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.main-nav,
.desktop-nav {
    display: none !important;
}

/* =========================================================
   TOGGLE BUTTON - ALWAYS VISIBLE
========================================================= */

.menu-toggle {
    width: 48px;
    height: 48px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 0;
    background: #111614;
    border: 1px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
    z-index: 1602;
    transition: border-color .25s ease, background .25s ease, transform .25s ease;
}

.menu-toggle:hover {
    border-color: var(--accent-2);
    background: #151b18;
}

.menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: #fff;
    transition: transform .3s ease, opacity .3s ease;
}

.menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* =========================================================
   OVERLAY + DRAWER
========================================================= */

.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1598;
    transition: opacity .35s ease, visibility .35s ease;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: min(430px, 92vw);
    height: 100vh;
    height: 100dvh;
    padding: 28px;
    display: flex !important;
    flex-direction: column;
    background:
        radial-gradient(circle at 100% 0%, rgba(114,143,88,.20), transparent 31%),
        #0b0e0c;
    border-left: 1px solid var(--line);
    box-shadow: -25px 0 70px rgba(0,0,0,.42);
    transform: translateX(105%);
    visibility: hidden;
    z-index: 1600;
    transition:
        transform .45s cubic-bezier(.77,0,.18,1),
        visibility .45s ease;
}

.mobile-menu.active {
    transform: translateX(0);
    visibility: visible;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--line);
}

.menu-close {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    padding: 0;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.mobile-menu-links {
    display: flex;
    flex-direction: column;
    margin-top: 34px;
}

.mobile-menu-links a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 64px;
    padding: 15px 4px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: #d5dbd7;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    letter-spacing: -.035em;
    transition: .25s ease;
}

.mobile-menu-links a span {
    width: 31px;
    flex: 0 0 31px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

.mobile-menu-links a::after {
    content: "→";
    position: absolute;
    right: 6px;
    color: var(--accent-2);
    opacity: 0;
    transform: translateX(-10px);
    transition: .25s ease;
}

.mobile-menu-links a:hover,
.mobile-menu-links a.active {
    color: #fff;
    padding-left: 10px;
}

.mobile-menu-links a:hover::after,
.mobile-menu-links a.active::after {
    opacity: 1;
    transform: translateX(0);
}

.mobile-menu-footer {
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.mobile-menu-footer p {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .15em;
}

.mobile-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.mobile-socials a {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

body.menu-open {
    overflow: hidden;
}

/* =========================================================
   LAPTOP / DESKTOP
========================================================= */

@media (min-width: 1100px) {
    .container {
        width: min(1180px, calc(100% - 64px));
    }

    .section {
        padding: 100px 0;
    }

    .hero-frequency {
        min-height: 70vh;
    }

    .project-grid,
    .service-grid,
    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   IPAD / TABLET
========================================================= */

@media (min-width: 700px) and (max-width: 1099px) {
    .container {
        width: min(100% - 48px, 960px);
    }

    .section {
        padding: 78px 0;
    }

    .hero-grid,
    .split-grid,
    .contact-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }

    .project-grid,
    .service-grid,
    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .project-card,
    .service-card,
    .feature-card,
    .contact-form {
        padding: 22px;
    }

    .hero-frequency {
        min-height: 58vh;
    }

    .frequency-line {
        height: 240px;
    }

    .mobile-menu {
        width: min(420px, 70vw);
    }
}

/* =========================================================
   PHONE
========================================================= */

@media (max-width: 699px) {
    .container {
        width: min(100% - 28px, 1180px);
    }

    .nav-wrap {
        min-height: 68px;
    }

    .logo {
        font-size: 17px;
    }

    .menu-toggle {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .section {
        padding: 62px 0;
    }

    .page-hero {
        padding: 76px 0 46px;
    }

    .hero-grid,
    .split-grid,
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }

    .project-grid,
    .service-grid,
    .feature-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .project-card,
    .service-card,
    .feature-card,
    .timeline-item,
    .contact-form,
    .studio-card {
        padding: 20px;
        border-radius: 18px;
    }

    .field-row {
        grid-template-columns: 1fr;
    }

    .hero-frequency {
        min-height: 52vh;
    }

    .frequency-wrap {
        width: 96%;
    }

    .frequency-line {
        height: 190px;
        gap: 3px;
    }

    .frequency-line span {
        width: 3px;
    }

    .frequency-scroll {
        bottom: 22px;
    }

    .mobile-menu {
        width: 100%;
        padding: 20px;
    }

    .mobile-menu-links {
        margin-top: 26px;
    }

    .mobile-menu-links a {
        min-height: 58px;
        font-size: 24px;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 28px;
    }

    h1 {
        font-size: clamp(42px, 12vw, 58px);
    }

    h2 {
        font-size: clamp(30px, 9vw, 42px);
    }

    .btn {
        width: 100%;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 390px) {
    .container {
        width: calc(100% - 22px);
    }

    .mobile-menu {
        padding: 16px;
    }

    .mobile-menu-links a {
        font-size: 22px;
        gap: 14px;
    }

    .mobile-menu-links a span {
        width: 26px;
        flex-basis: 26px;
    }

    .project-card iframe {
        height: 152px;
    }
}


/* =========================================================
   LIVE MOTION UPGRADE
   Keeps current dark / green identity, adds motion and depth.
========================================================= */

:root {
    --bg:#070908;
    --bg-2:#0b0f0d;
    --card:#101512;
    --card-2:#141b17;
    --text:#f5f7f6;
    --muted:#96a49c;
    --line:#263229;
    --accent:#6f8f5d;
    --accent-2:#a0c885;
    --accent-soft:rgba(160,200,133,.12);
    --glow:rgba(111,143,93,.20);
    --radius:24px;
}

body {
    background:
        radial-gradient(circle at 15% 10%, rgba(111,143,93,.05), transparent 26%),
        radial-gradient(circle at 85% 35%, rgba(160,200,133,.04), transparent 24%),
        var(--bg);
}

.section,
.page-hero {
    position: relative;
    isolation: isolate;
}

.section::before,
.page-hero::before {
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(111,143,93,.10), transparent 70%);
    filter:blur(25px);
    pointer-events:none;
    z-index:-1;
    animation: driftGlow 11s ease-in-out infinite alternate;
}

.section:nth-of-type(even)::before {
    right:5%;
    top:15%;
}

.section:nth-of-type(odd)::before {
    left:3%;
    bottom:8%;
}

@keyframes driftGlow {
    0% { transform:translate3d(0,0,0) scale(.9); opacity:.45; }
    100% { transform:translate3d(35px,-20px,0) scale(1.15); opacity:.8; }
}

/* Reveal animations */
.motion-reveal {
    opacity:0;
    transform:translateY(34px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.7,.2,1);
    will-change:opacity,transform;
}

.motion-reveal.is-visible {
    opacity:1;
    transform:none;
}

.motion-left {
    opacity:0;
    transform:translateX(-42px);
    transition:.85s cubic-bezier(.2,.7,.2,1);
}

.motion-right {
    opacity:0;
    transform:translateX(42px);
    transition:.85s cubic-bezier(.2,.7,.2,1);
}

.motion-left.is-visible,
.motion-right.is-visible {
    opacity:1;
    transform:none;
}

/* Cards */
.project-card,
.service-card,
.feature-card,
.timeline-item,
.studio-card,
.contact-form {
    position:relative;
    overflow:hidden;
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.project-card::after,
.service-card::after,
.feature-card::after,
.studio-card::after {
    content:"";
    position:absolute;
    inset:auto -30% -60% auto;
    width:180px;
    height:180px;
    background:radial-gradient(circle, rgba(160,200,133,.16), transparent 70%);
    opacity:0;
    transition:.4s ease;
    pointer-events:none;
}

.project-card:hover,
.service-card:hover,
.feature-card:hover,
.studio-card:hover {
    transform:translateY(-8px);
    border-color:rgba(160,200,133,.45);
    box-shadow:0 22px 50px rgba(0,0,0,.28);
}

.project-card:hover::after,
.service-card:hover::after,
.feature-card:hover::after,
.studio-card:hover::after {
    opacity:1;
}

/* Magnetic / animated buttons */
.btn {
    position:relative;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.btn::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(110deg, transparent 20%, rgba(255,255,255,.18), transparent 80%);
    transform:translateX(-130%);
    transition:transform .55s ease;
}

.btn:hover::after {
    transform:translateX(130%);
}

.btn:hover {
    transform:translateY(-2px);
}

/* Marquee */
.motion-marquee {
    overflow:hidden;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:#0a0d0b;
}

.motion-marquee-track {
    width:max-content;
    display:flex;
    align-items:center;
    gap:28px;
    padding:18px 0;
    animation:marqueeMove 26s linear infinite;
}

.motion-marquee-track span {
    white-space:nowrap;
    font-size:13px;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#cbd4ce;
}

.motion-marquee-track b {
    color:var(--accent-2);
}

@keyframes marqueeMove {
    from { transform:translateX(0); }
    to { transform:translateX(-50%); }
}

/* Project slider */
.project-slider-wrap {
    position:relative;
}

.project-slider {
    display:flex;
    gap:20px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding:8px 2px 18px;
    scrollbar-width:none;
}

.project-slider::-webkit-scrollbar {
    display:none;
}

.project-slider .project-card {
    flex:0 0 min(440px, 86vw);
    scroll-snap-align:start;
}

.slider-controls {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:18px;
}

.slider-btn {
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    border-radius:50%;
    background:#111614;
    color:#fff;
    cursor:pointer;
    font-size:20px;
    transition:.25s ease;
}

.slider-btn:hover {
    border-color:var(--accent-2);
    color:var(--accent-2);
    transform:translateY(-2px);
}

/* Horizontal services slider */
.service-slider {
    display:flex;
    gap:18px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    padding-bottom:16px;
}

.service-slider::-webkit-scrollbar {
    display:none;
}

.service-slider .service-card {
    min-width:min(360px, 84vw);
    scroll-snap-align:start;
}

/* Animated statement */
.big-statement {
    padding:120px 0;
    overflow:hidden;
}

.big-statement h2 {
    font-size:clamp(46px,8vw,110px);
    line-height:.9;
    letter-spacing:-.07em;
    max-width:1100px;
    margin:0;
}

.big-statement h2 span {
    color:var(--accent-2);
    display:inline-block;
    animation:statementPulse 3.6s ease-in-out infinite;
}

@keyframes statementPulse {
    0%,100% { opacity:.75; transform:translateY(0); }
    50% { opacity:1; transform:translateY(-4px); }
}

/* Animated timeline */
.timeline-item {
    transition-delay:calc(var(--step, 0) * 90ms);
}

.timeline-item > span {
    box-shadow:0 0 0 0 rgba(111,143,93,.35);
    animation:timelinePulse 2.8s ease-in-out infinite;
}

@keyframes timelinePulse {
    0%,100% { box-shadow:0 0 0 0 rgba(111,143,93,.28); }
    50% { box-shadow:0 0 0 10px rgba(111,143,93,0); }
}

/* Contact glow */
.contact-form:focus-within {
    border-color:rgba(160,200,133,.45);
    box-shadow:0 20px 60px rgba(0,0,0,.22), 0 0 0 1px rgba(160,200,133,.08);
}

/* Frequency hero richer motion */
.frequency-bg {
    animation:frequencyGlow 7s ease-in-out infinite alternate;
}

@keyframes frequencyGlow {
    from { transform:translate(-50%,-50%) scale(.9); opacity:.65; }
    to { transform:translate(-50%,-50%) scale(1.1); opacity:1; }
}

/* Subtle cursor-follow glow target */
.cursor-glow {
    position:fixed;
    width:220px;
    height:220px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(160,200,133,.08), transparent 70%);
    pointer-events:none;
    z-index:0;
    transform:translate(-50%,-50%);
    transition:opacity .2s ease;
    opacity:0;
    mix-blend-mode:screen;
}

/* Responsive motion */
@media (max-width: 900px) {
    .big-statement {
        padding:90px 0;
    }

    .project-slider .project-card {
        flex-basis:min(400px, 88vw);
    }

    .cursor-glow {
        display:none;
    }
}

@media (max-width: 699px) {
    .big-statement {
        padding:72px 0;
    }

    .big-statement h2 {
        font-size:clamp(42px,13vw,66px);
    }

    .motion-marquee-track {
        gap:20px;
        padding:14px 0;
    }

    .motion-marquee-track span {
        font-size:11px;
    }

    .project-slider .project-card,
    .service-slider .service-card {
        flex-basis:88vw;
        min-width:88vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }
}


/* =========================================================
   PREMIUM REFINEMENT
   Cleaner, tighter, more commercial.
========================================================= */

:root {
    --bg:#070908;
    --bg-2:#0a0d0b;
    --card:#101412;
    --card-2:#141916;
    --text:#f6f7f6;
    --muted:#8f9a94;
    --line:#202923;
    --accent:#6d8b5b;
    --accent-2:#a7cb8c;
    --accent-soft:rgba(167,203,140,.10);
    --radius:20px;
    --shadow-soft:0 18px 50px rgba(0,0,0,.22);
    --shadow-card:0 14px 36px rgba(0,0,0,.18);
}

/* Global rhythm */
body {
    letter-spacing:-.01em;
}

.container {
    width:min(1160px, calc(100% - 48px));
}

.section {
    padding:96px 0;
}

.page-hero {
    padding:92px 0 58px;
}

h1,
h2,
h3 {
    text-wrap:balance;
}

h2 {
    max-width:880px;
}

p {
    line-height:1.72;
}

.eyebrow {
    letter-spacing:.18em;
    font-size:11px;
}

/* Header refinement */
.site-header {
    background:rgba(7,9,8,.84);
    border-bottom:1px solid rgba(255,255,255,.045);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.nav-wrap {
    min-height:72px;
}

.logo {
    font-size:18px;
    letter-spacing:-.045em;
}

.menu-toggle {
    width:44px;
    height:44px;
    border-radius:12px;
    background:rgba(17,22,19,.88);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

/* Drawer refinement */
.mobile-menu {
    width:min(410px, 92vw);
    padding:24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(109,139,91,.14), transparent 34%),
        rgba(10,13,11,.985);
}

.mobile-menu-links {
    margin-top:28px;
}

.mobile-menu-links a {
    min-height:60px;
    padding:14px 2px;
    font-size:clamp(21px, 3vw, 30px);
    border-bottom:1px solid rgba(255,255,255,.055);
}

.mobile-menu-links a span {
    color:#7f9c6d;
}

/* Frequency hero */
.hero-frequency {
    min-height:64vh;
    border-bottom:1px solid rgba(255,255,255,.045);
}

.frequency-wrap {
    width:min(1050px, 92%);
}

.frequency-line {
    height:260px;
}

.frequency-line span {
    box-shadow:
        0 0 6px rgba(167,203,140,.18),
        0 0 14px rgba(167,203,140,.05);
}

.frequency-bg {
    opacity:.75;
}

/* Section headers */
.section-heading {
    margin-bottom:44px;
}

.section-heading.centered {
    max-width:700px;
}

.section-heading.centered h2 {
    margin-left:auto;
    margin-right:auto;
}

.section-heading p {
    max-width:620px;
    margin-left:auto;
    margin-right:auto;
}

/* Cards */
.project-card,
.service-card,
.feature-card,
.timeline-item,
.contact-form,
.studio-card {
    border-radius:18px;
    border-color:rgba(255,255,255,.075);
    box-shadow:var(--shadow-card);
}

.project-card,
.service-card,
.feature-card {
    padding:22px;
}

.project-card:hover,
.service-card:hover,
.feature-card:hover,
.studio-card:hover {
    transform:translateY(-5px);
    box-shadow:0 18px 42px rgba(0,0,0,.23);
}

/* Project slider */
.project-slider {
    gap:16px;
}

.project-slider .project-card {
    flex-basis:min(420px, 82vw);
}

.project-card h3 {
    font-size:23px;
}

.project-meta {
    margin-bottom:2px;
}

.project-card iframe {
    margin-top:10px;
}

/* Service slider */
.service-slider {
    gap:16px;
}

.service-slider .service-card {
    min-width:min(330px, 80vw);
}

/* Slider buttons */
.slider-controls {
    margin-top:14px;
}

.slider-btn {
    width:44px;
    height:44px;
    background:#0f1311;
    border-color:rgba(255,255,255,.09);
}

/* Marquee refinement */
.motion-marquee {
    background:#090c0a;
    border-color:rgba(255,255,255,.05);
}

.motion-marquee-track {
    padding:14px 0;
    gap:22px;
    animation-duration:32s;
}

.motion-marquee-track span {
    font-size:11px;
    color:#aeb8b2;
}

/* Big statements */
.big-statement {
    padding:96px 0;
}

.big-statement h2 {
    font-size:clamp(44px, 7vw, 94px);
    line-height:.92;
    letter-spacing:-.065em;
}

/* CTA */
.studio-card {
    padding:40px;
    background:
        linear-gradient(145deg, rgba(20,25,22,.98), rgba(11,14,12,.98));
}

.studio-card p {
    max-width:700px;
}

/* Timeline */
.timeline {
    gap:12px;
}

.timeline-item {
    padding:22px;
}

.timeline-item > span {
    width:38px;
    height:38px;
    flex-basis:38px;
    font-size:13px;
}

/* Contact */
.contact-form {
    padding:24px;
}

input,
select,
textarea {
    padding:13px 14px;
    border-radius:10px;
    background:#0b0f0d;
}

input:focus,
select:focus,
textarea:focus {
    box-shadow:0 0 0 3px rgba(167,203,140,.06);
}

/* Footer */
.site-footer {
    padding:48px 0 22px;
}

.footer-grid {
    gap:36px;
}

/* Motion refinement */
.motion-reveal {
    transform:translateY(24px);
    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.2,.7,.2,1);
}

.motion-left {
    transform:translateX(-28px);
}

.motion-right {
    transform:translateX(28px);
}

/* Remove excessive glow intensity */
.section::before,
.page-hero::before {
    opacity:.55;
    filter:blur(35px);
}

/* Better laptop spacing */
@media (min-width: 1100px) {
    .container {
        width:min(1160px, calc(100% - 72px));
    }

    .section {
        padding:104px 0;
    }
}

/* Better iPad layout */
@media (min-width: 700px) and (max-width: 1099px) {
    .container {
        width:min(100% - 44px, 940px);
    }

    .section {
        padding:76px 0;
    }

    .project-slider .project-card {
        flex-basis:min(390px, 72vw);
    }

    .service-slider .service-card {
        min-width:min(310px, 58vw);
    }

    .big-statement h2 {
        font-size:clamp(46px, 8vw, 76px);
    }
}

/* Better mobile rhythm */
@media (max-width: 699px) {
    .container {
        width:min(100% - 24px, 1180px);
    }

    .section {
        padding:58px 0;
    }

    .page-hero {
        padding:68px 0 40px;
    }

    .hero-frequency {
        min-height:46vh;
    }

    .frequency-line {
        height:165px;
    }

    .project-slider .project-card,
    .service-slider .service-card {
        min-width:86vw;
        flex-basis:86vw;
    }

    .project-card,
    .service-card,
    .feature-card,
    .timeline-item,
    .contact-form,
    .studio-card {
        padding:18px;
    }

    .big-statement {
        padding:64px 0;
    }

    .big-statement h2 {
        font-size:clamp(40px, 12.5vw, 58px);
    }

    .studio-card {
        padding:24px;
    }

    .motion-marquee-track {
        animation-duration:26s;
    }

    .slider-controls {
        justify-content:flex-start;
    }
}


/* =========================================================
   LUXURY LIVE UPGRADE
   Geen marquee-balken. Meer luxe via diepte, licht en motion.
========================================================= */

.motion-marquee,
.motion-marquee-track {
    display:none !important;
}

/* Luxury background */
body {
    background:
        radial-gradient(circle at 12% 12%, rgba(113,148,95,.07), transparent 28%),
        radial-gradient(circle at 88% 24%, rgba(150,190,130,.05), transparent 24%),
        linear-gradient(180deg, #070908 0%, #090c0a 48%, #070908 100%);
    background-attachment: fixed;
}

/* Animated ambient layer */
body::before {
    content:"";
    position:fixed;
    inset:-20%;
    pointer-events:none;
    z-index:-2;
    background:
        radial-gradient(circle at 30% 40%, rgba(103,143,85,.06), transparent 24%),
        radial-gradient(circle at 70% 60%, rgba(160,200,133,.05), transparent 22%);
    animation: luxuryAmbient 18s ease-in-out infinite alternate;
}

@keyframes luxuryAmbient {
    0% {
        transform:translate3d(-1%, 1%, 0) scale(1);
        opacity:.65;
    }
    100% {
        transform:translate3d(2%, -2%, 0) scale(1.06);
        opacity:1;
    }
}

/* Header more premium */
.site-header {
    background:rgba(7,9,8,.76);
    border-bottom:1px solid rgba(255,255,255,.04);
    box-shadow:0 8px 30px rgba(0,0,0,.10);
}

.logo {
    position:relative;
}

.logo::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-7px;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(167,203,140,.65), transparent);
    transform:scaleX(.45);
    opacity:0;
    transition:.3s ease;
}

.logo:hover::after {
    transform:scaleX(1);
    opacity:1;
}

/* Toggle luxury */
.menu-toggle {
    background:
        linear-gradient(180deg, rgba(20,26,22,.96), rgba(13,17,15,.96));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:
        0 10px 28px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.menu-toggle:hover {
    transform:translateY(-1px);
    box-shadow:
        0 14px 30px rgba(0,0,0,.24),
        0 0 0 1px rgba(167,203,140,.10);
}

/* Drawer luxury */
.mobile-menu {
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    background:
        radial-gradient(circle at 100% 0%, rgba(109,139,91,.18), transparent 32%),
        linear-gradient(180deg, rgba(13,17,15,.995), rgba(8,11,9,.995));
}

.mobile-menu-links a {
    transition:
        color .25s ease,
        padding-left .25s ease,
        background .25s ease;
}

.mobile-menu-links a:hover,
.mobile-menu-links a.active {
    background:linear-gradient(90deg, rgba(167,203,140,.05), transparent);
}

/* Frequency hero - luxury visual */
.hero-frequency {
    min-height:66vh;
    background:
        radial-gradient(circle at 50% 50%, rgba(97,132,80,.07), transparent 36%),
        linear-gradient(180deg, #070908, #080b09);
}

.hero-frequency::before,
.hero-frequency::after {
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:min(1100px, 90%);
    height:1px;
    pointer-events:none;
}

.hero-frequency::before {
    top:16%;
    background:linear-gradient(90deg, transparent, rgba(167,203,140,.10), transparent);
}

.hero-frequency::after {
    bottom:16%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent);
}

.frequency-line span {
    background:
        linear-gradient(
            to top,
            #405836 0%,
            #789b64 42%,
            #b8d99f 76%,
            #eef7e8 100%
        );
    box-shadow:
        0 0 8px rgba(167,203,140,.18),
        0 0 28px rgba(167,203,140,.06);
}

.frequency-scroll {
    border-color:rgba(255,255,255,.16);
    backdrop-filter:blur(8px);
}

/* Sections get premium separators */
.section {
    position:relative;
}

.section + .section::after {
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:min(1160px, calc(100% - 48px));
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.045), transparent);
}

/* Section titles */
.section-heading h2,
.page-hero h1,
.big-statement h2 {
    text-shadow:0 12px 35px rgba(0,0,0,.18);
}

/* Luxury cards */
.project-card,
.service-card,
.feature-card,
.timeline-item,
.contact-form,
.studio-card {
    background:
        linear-gradient(180deg, rgba(18,24,20,.94), rgba(13,18,15,.96));
    border:1px solid rgba(255,255,255,.07);
    box-shadow:
        0 22px 60px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.025);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.project-card::before,
.service-card::before,
.feature-card::before,
.studio-card::before {
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:
        linear-gradient(120deg, rgba(255,255,255,.035), transparent 32%, transparent 68%, rgba(167,203,140,.03));
    opacity:.8;
}

.project-card:hover,
.service-card:hover,
.feature-card:hover,
.studio-card:hover {
    transform:translateY(-7px) scale(1.006);
    border-color:rgba(167,203,140,.26);
    box-shadow:
        0 28px 70px rgba(0,0,0,.28),
        0 0 0 1px rgba(167,203,140,.035);
}

/* Animated card shine */
.project-card::after,
.service-card::after,
.feature-card::after,
.studio-card::after {
    width:220px;
    height:220px;
    right:-110px;
    bottom:-120px;
    background:radial-gradient(circle, rgba(167,203,140,.10), transparent 68%);
    opacity:.35;
    transform:scale(.9);
    transition:.45s ease;
}

.project-card:hover::after,
.service-card:hover::after,
.feature-card:hover::after,
.studio-card:hover::after {
    opacity:.75;
    transform:scale(1.15);
}

/* Spotify cards */
.project-card iframe {
    filter:saturate(.88) brightness(.96);
    transition:filter .3s ease, transform .3s ease;
}

.project-card:hover iframe {
    filter:saturate(1) brightness(1);
    transform:translateY(-2px);
}

/* Slider edge fades */
.project-slider-wrap,
.service-slider {
    position:relative;
}

.project-slider-wrap::before,
.project-slider-wrap::after {
    content:"";
    position:absolute;
    top:0;
    bottom:64px;
    width:42px;
    z-index:3;
    pointer-events:none;
}

.project-slider-wrap::before {
    left:-1px;
    background:linear-gradient(90deg, var(--bg), transparent);
}

.project-slider-wrap::after {
    right:-1px;
    background:linear-gradient(270deg, var(--bg), transparent);
}

.slider-btn {
    box-shadow:0 12px 26px rgba(0,0,0,.18);
}

.slider-btn:hover {
    background:#151b17;
    box-shadow:
        0 16px 30px rgba(0,0,0,.22),
        0 0 0 1px rgba(167,203,140,.08);
}

/* Big statement luxury */
.big-statement {
    position:relative;
    overflow:hidden;
}

.big-statement::after {
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    right:-180px;
    top:50%;
    transform:translateY(-50%);
    border-radius:50%;
    background:radial-gradient(circle, rgba(167,203,140,.07), transparent 70%);
    filter:blur(28px);
    pointer-events:none;
    animation:luxuryFloat 8s ease-in-out infinite alternate;
}

@keyframes luxuryFloat {
    from { transform:translateY(-50%) translateX(-15px) scale(.95); }
    to { transform:translateY(-50%) translateX(20px) scale(1.08); }
}

.big-statement h2 span {
    background:linear-gradient(90deg, #8fb577, #c6e5ae);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

/* Service cards numbered more premium */
.service-card > span {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    height:28px;
    padding:0 10px;
    border:1px solid rgba(167,203,140,.15);
    border-radius:999px;
    background:rgba(167,203,140,.045);
}

/* Timeline */
.timeline-item {
    position:relative;
}

.timeline-item::before {
    content:"";
    position:absolute;
    left:41px;
    top:100%;
    width:1px;
    height:12px;
    background:linear-gradient(180deg, rgba(167,203,140,.18), transparent);
}

.timeline-item:last-child::before {
    display:none;
}

/* Contact premium */
.contact-form {
    background:
        radial-gradient(circle at 100% 0%, rgba(167,203,140,.05), transparent 32%),
        linear-gradient(180deg, rgba(18,24,20,.96), rgba(12,16,14,.98));
}

input,
select,
textarea {
    background:rgba(7,10,8,.82);
    border-color:rgba(255,255,255,.075);
    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

input:hover,
select:hover,
textarea:hover {
    background:rgba(9,13,10,.94);
}

input:focus,
select:focus,
textarea:focus {
    border-color:rgba(167,203,140,.40);
    box-shadow:0 0 0 4px rgba(167,203,140,.05);
}

/* Social icons */
.social-icon {
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.social-icon:hover {
    transform:translateY(-4px) scale(1.03);
    box-shadow:0 14px 30px rgba(0,0,0,.20);
}

/* Footer */
.site-footer {
    background:linear-gradient(180deg, rgba(9,12,10,.85), #070908);
}

/* Refined scroll motion */
.motion-reveal {
    transform:translateY(22px) scale(.992);
    transition:
        opacity .75s ease,
        transform .75s cubic-bezier(.2,.7,.2,1);
}

.motion-reveal.is-visible {
    transform:none;
}

/* Tablet */
@media (min-width:700px) and (max-width:1099px) {
    .hero-frequency {
        min-height:56vh;
    }

    .project-slider-wrap::before,
    .project-slider-wrap::after {
        width:24px;
    }
}

/* Mobile */
@media (max-width:699px) {
    .hero-frequency {
        min-height:44vh;
    }

    .section + .section::after {
        width:calc(100% - 24px);
    }

    .project-slider-wrap::before,
    .project-slider-wrap::after {
        display:none;
    }

    .project-card:hover,
    .service-card:hover,
    .feature-card:hover,
    .studio-card:hover {
        transform:none;
    }

    .big-statement::after {
        width:340px;
        height:340px;
        right:-180px;
    }
}

.brand-hero,.web-hero{position:relative;min-height:78vh;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.06);background:radial-gradient(circle at 76% 34%,rgba(167,203,140,.11),transparent 28%),#080b09}.brand-hero-grid{position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:72px 72px}.brand-hero-content,.web-hero .container{position:relative;z-index:1;padding-top:70px;padding-bottom:70px}.brand-hero h1,.web-hero h1{max-width:1050px;margin:16px 0 24px;font-size:clamp(3.6rem,9vw,8.6rem);line-height:.88;letter-spacing:-.065em}.web-hero h1{font-size:clamp(3rem,7vw,6.7rem)}.brand-hero h1 span,.web-hero h1 span{color:#a7cb8c}.brand-lead{max-width:720px;font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.7;color:rgba(255,255,255,.67)}.division-grid,.case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:42px}.division-card,.case-card{position:relative;min-height:430px;padding:44px;border:1px solid rgba(255,255,255,.075);border-radius:24px;background:linear-gradient(145deg,rgba(18,24,20,.98),rgba(10,13,11,.98));overflow:hidden}.division-number{font-size:.8rem;color:rgba(255,255,255,.35);margin-bottom:80px}.division-card h2{font-size:clamp(2.4rem,5vw,4.5rem);margin:8px 0 18px}.division-card p:not(.eyebrow),.case-card p:not(.eyebrow){color:rgba(255,255,255,.62);line-height:1.7}.division-tags{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 34px}.division-tags span,.status-pill{display:inline-flex;padding:8px 12px;border:1px solid rgba(167,203,140,.18);border-radius:999px;color:#b9d7a2;font-size:.78rem;background:rgba(167,203,140,.035)}.text-link{color:#fff;text-decoration:none;font-weight:700}.text-link:hover{color:#a7cb8c}.web-service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:36px}.case-card{justify-content:space-between;display:flex;flex-direction:column}.case-card h3{font-size:2rem}.process-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;margin-top:38px;border:1px solid rgba(255,255,255,.07);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.07)}.process-strip>div{min-height:150px;padding:24px 18px;display:flex;flex-direction:column;justify-content:space-between;background:#0d110e}.process-strip strong{color:#a7cb8c;font-size:.78rem}.process-strip span{font-weight:700}@media(max-width:999px){.division-grid,.case-grid{grid-template-columns:1fr}.web-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.process-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:699px){.brand-hero,.web-hero{min-height:70vh}.division-card,.case-card{min-height:auto;padding:28px}.web-service-grid,.process-strip{grid-template-columns:1fr}.process-strip>div{min-height:105px}}


/* Websolutions V2 */
.web-subhero .copy{max-width:980px}.web-offer-list{display:grid;gap:1px;border:1px solid rgba(255,255,255,.07);border-radius:24px;overflow:hidden;background:rgba(255,255,255,.07)}
.web-offer{display:grid;grid-template-columns:120px 1fr;gap:40px;padding:52px;background:#0c100d}.web-offer h2{font-size:clamp(2rem,4vw,3.6rem);margin:4px 0 16px}.web-offer>div:last-child{max-width:800px}.offer-no{font-size:clamp(2rem,4vw,4rem);color:rgba(167,203,140,.32);font-weight:800}.clean-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 30px;padding:0;margin:24px 0 30px;list-style:none}.clean-list li{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.68)}
.template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:36px}.template-card{padding:18px;border:1px solid rgba(255,255,255,.07);border-radius:24px;background:#0d110e}.template-card>div:last-child{padding:24px 14px 18px}.template-card h3{font-size:2rem;margin:6px 0 10px}.template-preview{aspect-ratio:16/10;border-radius:16px;padding:22px;display:flex;align-items:flex-end;justify-content:space-between;background:radial-gradient(circle at 70% 30%,rgba(167,203,140,.18),transparent 30%),linear-gradient(145deg,#171e19,#080b09);border:1px solid rgba(255,255,255,.06)}.template-preview span{align-self:flex-start;color:rgba(255,255,255,.38)}.template-preview strong{font-size:clamp(2rem,5vw,4.5rem);letter-spacing:-.05em;color:rgba(255,255,255,.92)}
.case-hero{min-height:65vh;display:flex;align-items:flex-end;padding:120px 0 70px;background:radial-gradient(circle at 80% 20%,rgba(167,203,140,.12),transparent 28%),#080b09}.case-hero h1{font-size:clamp(3rem,8vw,7.5rem);line-height:.92;letter-spacing:-.06em;max-width:1000px;margin:14px 0 24px}.back-link{display:inline-block;margin-bottom:70px;color:rgba(255,255,255,.55);text-decoration:none}.case-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}.case-meta span{padding:8px 12px;border:1px solid rgba(255,255,255,.08);border-radius:999px;color:rgba(255,255,255,.62)}.case-story{display:grid;gap:1px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.07);border-radius:22px;overflow:hidden}.case-story>div{padding:46px;background:#0c100d}.case-story h2{font-size:clamp(2rem,4vw,3.5rem);margin:6px 0 16px}.case-story p:last-child{max-width:760px;color:rgba(255,255,255,.62)}
.web-contact-grid{align-items:start}.contact-intro{position:sticky;top:120px}.contact-points{display:grid;gap:10px;margin-top:28px}.contact-points span{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.62)}.web-project-fields{display:none}.web-project-fields.is-active{display:block}.form-note{font-size:.78rem;color:rgba(255,255,255,.38);line-height:1.5;margin-top:14px}.web-proof{padding-top:0}.web-proof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid rgba(255,255,255,.07);border-radius:20px;overflow:hidden}.web-proof-grid>div{padding:26px;border-right:1px solid rgba(255,255,255,.07);background:#0b0f0c}.web-proof-grid>div:last-child{border-right:0}.web-proof-grid strong{display:block;color:#a7cb8c;margin-bottom:6px}.web-proof-grid span{color:rgba(255,255,255,.55);font-size:.92rem}
@media(max-width:799px){.web-offer{grid-template-columns:1fr;gap:12px;padding:30px}.clean-list,.template-grid,.web-proof-grid{grid-template-columns:1fr}.contact-intro{position:static}.web-proof-grid>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}.web-proof-grid>div:last-child{border-bottom:0}.case-hero{padding-top:100px}.back-link{margin-bottom:45px}}


/* =========================================================
   FIXED AGUS NAVBAR + LOGO + FOOTER
   ========================================================= */
.agus-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(4, 6, 5, .94);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
}

.agus-nav {
  min-height: 86px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.agus-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}

.agus-logo {
  display: block;
  width: auto;
  object-fit: contain;
}

.agus-logo-header {
  height: 44px;
  max-width: 180px;
}

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 30px);
  margin-left: auto;
}

.desktop-nav a {
  position: relative;
  color: rgba(255,255,255,.78);
  text-decoration: none;
  text-transform: uppercase;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 34px 0 31px;
  white-space: nowrap;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 18px;
  height: 2px;
  background: #8ee56e;
  transition: right .25s ease;
}

.desktop-nav a:hover,
.desktop-nav a.active {
  color: #fff;
}

.desktop-nav a:hover::after,
.desktop-nav a.active::after {
  right: 0;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 17px;
  border: 1px solid rgba(142,229,110,.65);
  border-radius: 7px;
  color: #8ee56e;
  text-decoration: none;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .07em;
  white-space: nowrap;
}

.nav-cta:hover {
  background: #8ee56e;
  color: #071006;
}

.agus-header .menu-toggle {
  display: none;
  margin-left: auto;
}

.agus-footer {
  border-top: 1px solid rgba(255,255,255,.08);
  background: #050706;
  padding-top: 66px;
}

.agus-footer-grid {
  grid-template-columns: 1.35fr .8fr 1fr .8fr;
  gap: 54px;
}

.footer-brand-column p {
  max-width: 360px;
  color: rgba(255,255,255,.58);
  line-height: 1.75;
}

.footer-brand-link {
  margin-bottom: 24px;
}

.agus-logo-footer {
  height: 62px;
  max-width: 250px;
}

.agus-footer-grid > div:not(.footer-brand-column) {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.agus-footer-grid strong {
  color: #8ee56e;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  margin-bottom: 8px;
}

.agus-footer-grid a,
.agus-footer-grid span {
  color: rgba(255,255,255,.67);
  text-decoration: none;
}

.agus-footer-grid a:hover {
  color: #fff;
}

.agus-footer .socials {
  margin-top: 22px;
  display: flex;
  gap: 10px;
}

.agus-footer .social-icon {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 800;
}

.footer-bottom {
  margin-top: 52px;
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.44);
  font-size: .8rem;
}

.agus-logo-mobile {
  height: 40px;
  max-width: 165px;
}

@media (max-width: 1180px) {
  .desktop-nav { gap: 15px; }
  .desktop-nav a { font-size: .68rem; }
  .nav-cta { display: none; }
}

@media (max-width: 900px) {
  .agus-nav { min-height: 72px; }
  .desktop-nav { display: none; }
  .agus-header .menu-toggle { display: inline-flex; }
  .agus-logo-header { height: 37px; max-width: 155px; }
  .agus-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .agus-logo-header { height: 32px; max-width: 135px; }
  .agus-footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .agus-logo-footer { height: 50px; max-width: 205px; }
}


/* =========================================================
   AGUS — SUPER RESPONSIVE PASS
   ========================================================= */

/* Global resilience */
html {
  width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

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

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

img,
video {
  height: auto;
}

iframe {
  display: block;
}

a,
button,
input,
select,
textarea {
  min-width: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

pre,
code {
  max-width: 100%;
  overflow-x: auto;
}

.container {
  width: min(100% - 40px, 1240px);
  margin-inline: auto;
}

section,
.section {
  min-width: 0;
}

h1,
h2,
h3,
h4,
p {
  overflow-wrap: anywhere;
}

.hero-actions,
.cta-row,
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn,
.nav-cta {
  max-width: 100%;
  text-align: center;
  justify-content: center;
}

/* Fluid spacing */
.section {
  padding-top: clamp(72px, 8vw, 130px);
  padding-bottom: clamp(72px, 8vw, 130px);
}

.section-heading {
  margin-bottom: clamp(28px, 4vw, 50px);
}

.section-heading h2,
.big-statement h2 {
  font-size: clamp(2rem, 5.4vw, 5rem);
  line-height: .98;
  letter-spacing: -0.045em;
}

.section-heading p,
.brand-lead,
.split-grid p,
.studio-card p {
  font-size: clamp(.98rem, 1.8vw, 1.16rem);
}

/* Header / navbar */
.agus-nav {
  width: min(100% - 32px, 1320px);
}

.desktop-nav {
  min-width: 0;
}

.desktop-nav a {
  min-width: 0;
}

.menu-toggle {
  width: 46px;
  height: 46px;
  min-width: 46px;
  align-items: center;
  justify-content: center;
}

.menu-toggle span {
  max-width: 22px;
}

/* Mobile drawer safety */
.mobile-menu {
  width: min(88vw, 420px);
  max-width: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-menu-links a {
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.mobile-menu-header {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Main heroes */
.brand-hero,
.web-hero,
.page-hero,
.hero {
  min-height: auto;
}

.brand-hero-content,
.web-hero .container,
.page-hero .container,
.hero .container {
  width: min(100% - 40px, 1240px);
}

.brand-hero h1,
.web-hero h1,
.page-hero h1,
.hero h1 {
  max-width: 1100px;
  font-size: clamp(3.1rem, 8.8vw, 8.4rem);
  line-height: .88;
  letter-spacing: -0.06em;
}

.web-hero h1 {
  font-size: clamp(2.8rem, 7.1vw, 6.6rem);
}

.brand-lead {
  max-width: 760px;
}

/* Grid defaults that adapt earlier */
.division-grid,
.case-grid,
.split-grid,
.project-grid,
.projects-grid,
.cards-grid,
.services-grid,
.contact-grid {
  min-width: 0;
}

.division-card,
.case-card,
.service-card,
.studio-card,
.project-card,
.contact-card {
  min-width: 0;
}

/* Long text / embeds */
.spotify-embed,
.spotify-embed iframe,
iframe[src*="spotify"] {
  width: 100% !important;
  max-width: 100%;
}

form {
  width: 100%;
  min-width: 0;
}

input,
select,
textarea {
  width: 100%;
  max-width: 100%;
}

textarea {
  resize: vertical;
}

/* Desktop -> laptop */
@media (max-width: 1180px) {
  .container {
    width: min(100% - 36px, 1120px);
  }

  .agus-nav {
    width: min(100% - 28px, 1160px);
    gap: 18px;
  }

  .desktop-nav {
    gap: 13px;
  }

  .desktop-nav a {
    font-size: .66rem;
    letter-spacing: .055em;
  }

  .division-card {
    padding: 36px;
  }

  .web-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tablet landscape / small laptop */
@media (max-width: 1024px) {
  .section {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .brand-hero-content,
  .web-hero .container {
    padding-top: 84px;
    padding-bottom: 84px;
  }

  .division-grid,
  .case-grid,
  .split-grid,
  .contact-grid {
    grid-template-columns: 1fr !important;
  }

  .division-card,
  .case-card {
    min-height: auto;
  }

  .division-number {
    margin-bottom: 54px;
  }

  .process-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-grid,
  .agus-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 42px 28px;
  }

  .studio-card {
    padding: clamp(28px, 5vw, 52px);
  }
}

/* Tablet portrait */
@media (max-width: 900px) {
  .container,
  .brand-hero-content,
  .web-hero .container,
  .page-hero .container,
  .hero .container {
    width: min(100% - 32px, 820px);
  }

  .agus-nav {
    width: min(100% - 24px, 860px);
  }

  .desktop-nav,
  .nav-cta {
    display: none !important;
  }

  .agus-header .menu-toggle {
    display: inline-flex !important;
  }

  .brand-hero,
  .web-hero {
    min-height: 66svh;
  }

  .brand-hero h1,
  .web-hero h1,
  .page-hero h1,
  .hero h1 {
    font-size: clamp(3.1rem, 11vw, 6.2rem);
  }

  .web-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-actions .btn,
  .cta-row .btn {
    min-height: 48px;
  }

  .footer-brand-column p {
    max-width: 100%;
  }
}

/* Large phones */
@media (max-width: 700px) {
  .container,
  .brand-hero-content,
  .web-hero .container,
  .page-hero .container,
  .hero .container {
    width: min(100% - 28px, 650px);
  }

  .section {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .brand-hero,
  .web-hero {
    min-height: auto;
  }

  .brand-hero-content,
  .web-hero .container {
    padding-top: 82px;
    padding-bottom: 72px;
  }

  .brand-hero h1,
  .web-hero h1,
  .page-hero h1,
  .hero h1 {
    font-size: clamp(2.75rem, 14vw, 5rem);
    line-height: .92;
    letter-spacing: -0.05em;
  }

  .section-heading h2,
  .big-statement h2 {
    font-size: clamp(2.1rem, 11vw, 4rem);
  }

  .brand-lead {
    line-height: 1.6;
  }

  .hero-actions,
  .cta-row,
  .button-row {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn,
  .cta-row .btn,
  .button-row .btn {
    width: 100%;
  }

  .division-grid,
  .case-grid,
  .web-service-grid,
  .services-grid,
  .cards-grid,
  .projects-grid {
    grid-template-columns: 1fr !important;
  }

  .division-card,
  .case-card,
  .service-card,
  .project-card {
    padding: 26px;
    border-radius: 18px;
  }

  .division-card h2 {
    font-size: clamp(2.2rem, 12vw, 3.5rem);
  }

  .division-number {
    margin-bottom: 42px;
  }

  .division-tags {
    gap: 7px;
  }

  .division-tags span,
  .status-pill {
    font-size: .72rem;
    padding: 7px 10px;
  }

  .process-strip {
    grid-template-columns: 1fr 1fr;
  }

  .process-strip > div {
    min-height: 112px;
  }

  .footer-grid,
  .agus-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 34px;
  }

  .agus-footer {
    padding-top: 52px;
  }

  .footer-bottom {
    margin-top: 38px;
  }

  .footer-bottom,
  .footer-bottom * {
    text-align: left;
  }

  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Normal phones */
@media (max-width: 560px) {
  .container,
  .brand-hero-content,
  .web-hero .container,
  .page-hero .container,
  .hero .container {
    width: min(100% - 22px, 520px);
  }

  .agus-nav {
    width: calc(100% - 20px);
    min-height: 66px;
  }

  .agus-logo-header {
    height: 29px;
    max-width: 126px;
  }

  .agus-logo-mobile {
    height: 32px;
    max-width: 138px;
  }

  .mobile-menu {
    width: min(92vw, 380px);
  }

  .mobile-menu-links a {
    font-size: .98rem;
  }

  .brand-hero-content,
  .web-hero .container {
    padding-top: 66px;
    padding-bottom: 62px;
  }

  .eyebrow {
    font-size: .68rem;
    letter-spacing: .22em;
  }

  .brand-hero h1,
  .web-hero h1,
  .page-hero h1,
  .hero h1 {
    font-size: clamp(2.55rem, 15.5vw, 4.3rem);
  }

  .brand-lead,
  .section-heading p,
  .split-grid p,
  .studio-card p {
    font-size: .98rem;
  }

  .division-card,
  .case-card,
  .service-card,
  .project-card,
  .studio-card {
    padding: 22px;
  }

  .process-strip {
    grid-template-columns: 1fr !important;
  }

  .process-strip > div {
    min-height: 92px;
  }

  .btn {
    min-height: 50px;
    padding-inline: 18px;
  }

  .form-row,
  .form-grid,
  .contact-form-grid {
    grid-template-columns: 1fr !important;
  }

  input,
  select,
  textarea {
    font-size: 16px !important; /* prevents iOS zoom */
  }

  .agus-logo-footer {
    height: 44px;
    max-width: 185px;
  }
}

/* Small phones */
@media (max-width: 390px) {
  .container,
  .brand-hero-content,
  .web-hero .container,
  .page-hero .container,
  .hero .container {
    width: calc(100% - 18px);
  }

  .section {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .agus-logo-header {
    height: 26px;
    max-width: 112px;
  }

  .menu-toggle {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }

  .brand-hero h1,
  .web-hero h1,
  .page-hero h1,
  .hero h1 {
    font-size: clamp(2.25rem, 15vw, 3.25rem);
  }

  .section-heading h2,
  .big-statement h2 {
    font-size: clamp(1.9rem, 11vw, 2.8rem);
  }

  .division-card,
  .case-card,
  .service-card,
  .project-card,
  .studio-card {
    padding: 19px;
    border-radius: 16px;
  }

  .division-tags span,
  .status-pill {
    font-size: .68rem;
  }

  .footer-bottom {
    font-size: .72rem;
  }
}

/* Very short viewport / landscape phones */
@media (max-height: 560px) and (orientation: landscape) {
  .brand-hero,
  .web-hero,
  .page-hero,
  .hero {
    min-height: auto;
  }

  .brand-hero-content,
  .web-hero .container,
  .page-hero .container,
  .hero .container {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .mobile-menu {
    width: min(70vw, 420px);
  }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .nav-cta,
  .desktop-nav a,
  .mobile-menu-links a,
  .text-link,
  .social-icon {
    -webkit-tap-highlight-color: transparent;
  }

  .btn,
  .nav-cta,
  .social-icon {
    min-height: 44px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =========================================================
   AGUS — CONSISTENT LEFT-ALIGNED CONTENT
   Titles and supporting content always align to the left.
   ========================================================= */
.section-heading,
.section-heading.centered,
.centered,
.page-hero,
.page-hero .container,
.hero,
.hero .container,
.brand-hero-content,
.web-hero .container,
.big-statement,
.big-statement .container,
.studio-card {
  text-align: left !important;
}

.section-heading.centered {
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-items: flex-start !important;
}

.section-heading h1,
.section-heading h2,
.section-heading h3,
.section-heading p,
.page-hero h1,
.page-hero h2,
.page-hero p,
.hero h1,
.hero h2,
.hero p,
.brand-hero h1,
.brand-hero p,
.web-hero h1,
.web-hero p,
.big-statement h2,
.big-statement p,
.studio-card h2,
.studio-card p {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.hero-actions,
.cta-row,
.button-row {
  justify-content: flex-start !important;
  align-items: flex-start;
}

@media (max-width: 700px) {
  .section-heading,
  .section-heading.centered,
  .page-hero,
  .hero,
  .brand-hero-content,
  .web-hero .container,
  .big-statement,
  .studio-card {
    text-align: left !important;
  }

  .hero-actions,
  .cta-row,
  .button-row {
    align-items: stretch;
  }
}

/* Homepage Spotify releases */
.home-music-section{border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);background:radial-gradient(circle at 82% 18%,rgba(142,229,110,.055),transparent 28%),#080b09}
.home-releases-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.home-release-card{min-width:0;padding:24px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:rgba(12,16,14,.9)}
.release-meta{margin-bottom:18px;text-align:left}.release-meta span{display:block;margin-bottom:5px;color:#8ee56e;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.release-meta h3{margin:0;text-align:left;font-size:clamp(1.25rem,2.2vw,1.8rem)}
.home-release-card iframe{display:block;width:100%!important;max-width:100%;border:0;border-radius:12px}
.home-music-cta{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:12px;margin-top:30px}
@media(max-width:800px){.home-releases-grid{grid-template-columns:1fr}}
@media(max-width:560px){.home-release-card{padding:16px;border-radius:16px}.home-music-cta{flex-direction:column;align-items:stretch}.home-music-cta .btn{width:100%}}

/* AGUS BLACK / TURQUOISE / WHITE THEME */
:root{
  --agus-bg:#050708;
  --agus-bg-soft:#0a0f10;
  --agus-panel:#0d1315;
  --agus-text:#f7fbfb;
  --agus-muted:rgba(247,251,251,.64);
  --agus-line:rgba(255,255,255,.08);
  --agus-accent:#26e6d2;
  --agus-accent-strong:#12cdbd;
  --agus-accent-soft:rgba(38,230,210,.10);
  --agus-accent-line:rgba(38,230,210,.28);
}
html,body,.luxury-main{background:var(--agus-bg)!important;color:var(--agus-text)!important}
.section,.agus-footer,.site-footer{background-color:var(--agus-bg)!important}
.section.alt,.home-music-section{background:radial-gradient(circle at 82% 18%,rgba(38,230,210,.06),transparent 30%),var(--agus-bg-soft)!important}
.brand-hero,.web-hero,.page-hero,.hero{background:radial-gradient(circle at 78% 28%,rgba(38,230,210,.12),transparent 30%),radial-gradient(circle at 16% 82%,rgba(255,255,255,.03),transparent 25%),var(--agus-bg)!important}
.brand-lead,.section-heading p,.split-grid p,.studio-card p,.division-card p:not(.eyebrow),.case-card p:not(.eyebrow),.service-card p,.footer-brand-column p{color:var(--agus-muted)!important}
.eyebrow,.release-meta span,.process-strip strong,.agus-footer-grid strong,.brand-hero h1 span,.web-hero h1 span,.big-statement h2 span{color:var(--agus-accent)!important}
.division-card,.case-card,.service-card,.project-card,.home-release-card,.studio-card,.contact-card{background:linear-gradient(145deg,rgba(38,230,210,.035),transparent 42%),var(--agus-panel)!important;border-color:var(--agus-line)!important}
.division-card:hover,.case-card:hover,.service-card:hover,.project-card:hover,.home-release-card:hover{border-color:var(--agus-accent-line)!important}
.division-tags span,.status-pill,.badge,.tag{color:var(--agus-accent)!important;border-color:var(--agus-accent-line)!important;background:var(--agus-accent-soft)!important}
.btn-primary{background:var(--agus-accent)!important;color:#03100f!important;border-color:var(--agus-accent)!important}
.btn-primary:hover{background:var(--agus-accent-strong)!important;border-color:var(--agus-accent-strong)!important}
.btn-secondary{background:transparent!important;color:var(--agus-text)!important;border-color:rgba(255,255,255,.18)!important}
.btn-secondary:hover{color:var(--agus-accent)!important;border-color:var(--agus-accent)!important;background:rgba(38,230,210,.045)!important}
.text-link{color:var(--agus-text)!important}.text-link:hover{color:var(--agus-accent)!important}
.agus-header,.site-header{background:rgba(3,7,8,.94)!important;border-bottom-color:rgba(255,255,255,.08)!important}
.desktop-nav a{color:rgba(255,255,255,.72)!important}.desktop-nav a:hover,.desktop-nav a.active{color:#fff!important}.desktop-nav a::after{background:var(--agus-accent)!important}
.nav-cta{border-color:var(--agus-accent)!important;color:var(--agus-accent)!important}.nav-cta:hover{background:var(--agus-accent)!important;color:#03100f!important}
.menu-toggle span{background:var(--agus-text)!important}.mobile-menu{background:#071012!important}.mobile-menu-links a.active,.mobile-menu-links a:hover{color:var(--agus-accent)!important}
.agus-footer{background:#030607!important}.agus-footer-grid a:hover{color:var(--agus-accent)!important}.agus-footer .social-icon:hover{color:var(--agus-accent)!important;border-color:var(--agus-accent-line)!important}
.process-strip>div{background:var(--agus-panel)!important}
input,select,textarea{background:var(--agus-panel)!important;color:var(--agus-text)!important;border-color:rgba(255,255,255,.11)!important}
input:focus,select:focus,textarea:focus{border-color:var(--agus-accent)!important;outline:none!important;box-shadow:0 0 0 3px rgba(38,230,210,.08)!important}
.brand-hero-grid{background-image:linear-gradient(rgba(38,230,210,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(38,230,210,.04) 1px,transparent 1px)!important}
::selection{background:var(--agus-accent);color:#02100e}


/* =========================================================
   AGUS — FLAT / MINIMAL / NO 3D
   ========================================================= */
:root {
  --flat-accent: #26e6d2;
  --flat-bg: #050708;
  --flat-bg-alt: #080d0e;
  --flat-line: rgba(255,255,255,.11);
  --flat-muted: rgba(255,255,255,.62);
}

/* Remove visual depth / 3D treatment */
.division-card,
.case-card,
.service-card,
.project-card,
.home-release-card,
.studio-card,
.contact-card,
.flat-service-row,
.flat-release-item,
.flat-feature,
.flat-final-cta {
  box-shadow: none !important;
  transform: none !important;
  perspective: none !important;
  filter: none !important;
}

.division-card:hover,
.case-card:hover,
.service-card:hover,
.project-card:hover,
.home-release-card:hover,
.studio-card:hover,
.contact-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* No decorative grid / fake depth */
.brand-hero-grid {
  display: none !important;
}

.flat-hero {
  min-height: min(780px, 78vh);
  background: var(--flat-bg) !important;
  border-bottom: 1px solid var(--flat-line);
}

.flat-hero .brand-hero-content {
  padding-top: clamp(90px, 11vw, 160px);
  padding-bottom: clamp(90px, 11vw, 160px);
}

.flat-hero h1 {
  max-width: 1050px;
}

.expertise-section {
  background: var(--flat-bg) !important;
}

.flat-service-list {
  border-top: 1px solid var(--flat-line);
}

.flat-service-row {
  display: grid;
  grid-template-columns: 70px minmax(230px, .9fr) minmax(300px, 1.1fr);
  gap: clamp(24px, 5vw, 70px);
  align-items: start;
  padding: clamp(34px, 5vw, 62px) 0;
  border-bottom: 1px solid var(--flat-line);
  background: transparent !important;
}

.flat-service-index {
  color: var(--flat-accent);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.flat-service-title h3 {
  margin: 8px 0 0;
  font-size: clamp(2rem, 4vw, 4.1rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.flat-service-copy {
  max-width: 620px;
}

.flat-service-copy p,
.flat-feature-copy p,
.flat-final-cta p {
  color: var(--flat-muted);
  line-height: 1.75;
}

.flat-music {
  background: var(--flat-bg-alt) !important;
}

.flat-release-list {
  border-top: 1px solid var(--flat-line);
}

.flat-release-item {
  display: grid;
  grid-template-columns: minmax(180px, .42fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 70px);
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--flat-line);
  background: transparent !important;
}

.flat-release-meta span {
  display: block;
  margin-bottom: 5px;
  color: var(--flat-accent);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.flat-release-meta h3 {
  margin: 0;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
}

.flat-release-item iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
  border-radius: 10px;
}

.web-promo-section {
  background: var(--flat-bg) !important;
}

.flat-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .75fr);
  gap: clamp(45px, 9vw, 130px);
  padding-top: clamp(30px, 4vw, 55px);
  padding-bottom: clamp(30px, 4vw, 55px);
  border-top: 1px solid var(--flat-line);
  border-bottom: 1px solid var(--flat-line);
  background: transparent !important;
}

.flat-feature h2 {
  margin: 8px 0 0;
  max-width: 760px;
  font-size: clamp(2.2rem, 5.2vw, 5rem);
  line-height: .98;
  letter-spacing: -.05em;
}

.flat-inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 28px;
}

.final-cta-section {
  background: var(--flat-bg-alt) !important;
}

.flat-final-cta {
  max-width: 900px;
  margin-left: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.flat-final-cta h2 {
  margin: 12px 0 24px;
  font-size: clamp(2.6rem, 6.5vw, 6.2rem);
  line-height: .94;
  letter-spacing: -.055em;
}

.flat-final-cta p {
  max-width: 650px;
  margin-bottom: 30px;
}

/* Keep turquoise clean, not glowy */
.btn-primary,
.nav-cta {
  box-shadow: none !important;
}

.btn,
.nav-cta,
.division-tags span,
.status-pill {
  border-radius: 5px !important;
}

@media (max-width: 900px) {
  .flat-service-row {
    grid-template-columns: 48px 1fr;
  }

  .flat-service-copy {
    grid-column: 2;
  }

  .flat-release-item,
  .flat-feature {
    grid-template-columns: 1fr;
  }

  .flat-release-item {
    gap: 18px;
  }
}

@media (max-width: 600px) {
  .flat-hero {
    min-height: auto;
  }

  .flat-service-row {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 34px 0;
  }

  .flat-service-copy {
    grid-column: 1;
  }

  .flat-release-item {
    padding: 26px 0;
  }

  .flat-feature {
    gap: 25px;
  }

  .flat-inline-links {
    flex-direction: column;
    gap: 14px;
  }
}


/* =========================================================
   AGUS — EDITORIAL STUDIO TEMPLATE
   New visual system: asymmetrical, flat, typography-led.
   ========================================================= */
body.editorial-template {
  --ed-bg: #050707;
  --ed-bg-2: #090d0e;
  --ed-text: #f7fbfb;
  --ed-muted: rgba(247,251,251,.58);
  --ed-line: rgba(255,255,255,.12);
  --ed-accent: #28e5d3;
  background: var(--ed-bg) !important;
  color: var(--ed-text) !important;
}

body.editorial-template .editorial-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 80px;
  background: rgba(5,7,7,.95);
  border-bottom: 1px solid var(--ed-line);
  backdrop-filter: blur(14px);
}

body.editorial-template .editorial-header-inner {
  width: min(100% - 36px, 1440px);
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px 1fr auto;
  align-items: center;
  gap: 28px;
}

body.editorial-template .editorial-logo {
  display: block;
  width: 145px;
  height: auto;
}

body.editorial-template .editorial-nav {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 42px);
}

body.editorial-template .editorial-nav a,
body.editorial-template .editorial-contact {
  color: rgba(255,255,255,.68);
  text-decoration: none;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.editorial-template .editorial-nav a:hover,
body.editorial-template .editorial-nav a.active,
body.editorial-template .editorial-contact:hover {
  color: var(--ed-accent);
}

body.editorial-template .editorial-contact {
  color: var(--ed-accent);
}

body.editorial-template .editorial-menu-toggle {
  display: none;
  margin-left: auto;
}

body.editorial-template .editorial-main {
  background: var(--ed-bg);
}

body.editorial-template .editorial-hero {
  width: min(100% - 36px, 1440px);
  margin: 0 auto;
  min-height: calc(100svh - 80px);
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr);
  border-left: 1px solid var(--ed-line);
  border-right: 1px solid var(--ed-line);
}

body.editorial-template .editorial-hero-left {
  padding: clamp(72px, 9vw, 140px) clamp(28px, 5vw, 76px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-right: 1px solid var(--ed-line);
}

body.editorial-template .editorial-kicker {
  margin: 0 0 18px;
  color: var(--ed-accent) !important;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.editorial-template .editorial-hero h1 {
  margin: 0;
  color: var(--ed-text);
  font-size: clamp(5rem, 13vw, 13rem);
  line-height: .72;
  letter-spacing: -.075em;
  font-weight: 800;
}

body.editorial-template .editorial-hero h1 span {
  color: var(--ed-accent);
}

body.editorial-template .editorial-hero-right {
  display: grid;
  grid-template-rows: 1fr auto;
}

body.editorial-template .editorial-intro {
  align-self: end;
  padding: clamp(34px, 5vw, 64px);
  border-bottom: 1px solid var(--ed-line);
}

body.editorial-template .editorial-intro p {
  margin: 0 0 34px;
  max-width: 480px;
  color: var(--ed-muted) !important;
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  line-height: 1.65;
}

body.editorial-template .editorial-intro a,
body.editorial-template .editorial-service a,
body.editorial-template .editorial-inline-link,
body.editorial-template .editorial-web-links a,
body.editorial-template .editorial-closing a {
  color: var(--ed-text);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.editorial-template .editorial-intro a:hover,
body.editorial-template .editorial-service a:hover,
body.editorial-template .editorial-inline-link:hover,
body.editorial-template .editorial-web-links a:hover,
body.editorial-template .editorial-closing a:hover {
  color: var(--ed-accent);
}

body.editorial-template .editorial-meta {
  padding: 28px clamp(34px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  gap: 9px 22px;
}

body.editorial-template .editorial-meta span {
  color: rgba(255,255,255,.48);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.editorial-template .editorial-ticker {
  overflow: hidden;
  border-top: 1px solid var(--ed-line);
  border-bottom: 1px solid var(--ed-line);
  background: var(--ed-accent);
}

body.editorial-template .editorial-ticker > div {
  width: max-content;
  padding: 16px 0;
  display: flex;
  gap: 20px;
  align-items: center;
  white-space: nowrap;
  animation: editorialTicker 24s linear infinite;
}

body.editorial-template .editorial-ticker span,
body.editorial-template .editorial-ticker b {
  color: #03100f;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@keyframes editorialTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-25%); }
}

body.editorial-template .editorial-services,
body.editorial-template .editorial-releases,
body.editorial-template .editorial-web {
  width: min(100% - 36px, 1440px);
  margin: 0 auto;
  border-left: 1px solid var(--ed-line);
  border-right: 1px solid var(--ed-line);
}

body.editorial-template .editorial-section-label {
  display: grid;
  grid-template-columns: 90px 1fr;
  border-bottom: 1px solid var(--ed-line);
}

body.editorial-template .editorial-section-label span,
body.editorial-template .editorial-section-label p {
  margin: 0;
  padding: 20px 24px;
  color: var(--ed-muted) !important;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.editorial-template .editorial-section-label span {
  border-right: 1px solid var(--ed-line);
  color: var(--ed-accent) !important;
}

body.editorial-template .editorial-service {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(320px,.8fr);
  gap: clamp(45px, 8vw, 120px);
  padding: clamp(58px, 8vw, 110px) clamp(28px, 5vw, 76px);
  border-bottom: 1px solid var(--ed-line);
}

body.editorial-template .editorial-service h2 {
  margin: 0;
  font-size: clamp(3rem, 7vw, 7.4rem);
  line-height: .9;
  letter-spacing: -.065em;
}

body.editorial-template .editorial-service > div:last-child {
  align-self: end;
}

body.editorial-template .editorial-service p:not(.editorial-kicker) {
  max-width: 560px;
  margin: 0 0 28px;
  color: var(--ed-muted) !important;
  line-height: 1.75;
  font-size: 1.05rem;
}

body.editorial-template .editorial-release-list {
  border-bottom: 1px solid var(--ed-line);
}

body.editorial-template .editorial-release {
  display: grid;
  grid-template-columns: 90px minmax(200px,.45fr) minmax(0,1fr);
  min-height: 200px;
  border-bottom: 1px solid var(--ed-line);
}

body.editorial-template .editorial-release:last-child {
  border-bottom: 0;
}

body.editorial-template .editorial-release-number {
  padding: 28px 24px;
  border-right: 1px solid var(--ed-line);
  color: var(--ed-accent);
  font-size: .72rem;
  font-weight: 800;
}

body.editorial-template .editorial-release-title {
  padding: 28px 32px;
  align-self: center;
}

body.editorial-template .editorial-release-title span {
  display: block;
  margin-bottom: 7px;
  color: var(--ed-accent);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.editorial-template .editorial-release-title h3 {
  margin: 0;
  font-size: clamp(1.8rem, 3.4vw, 3.3rem);
  letter-spacing: -.035em;
}

body.editorial-template .editorial-release-player {
  display: flex;
  align-items: center;
  padding: 24px 34px;
  border-left: 1px solid var(--ed-line);
}

body.editorial-template .editorial-release-player iframe {
  width: 100%;
  border-radius: 8px;
}

body.editorial-template .editorial-inline-link {
  display: inline-block;
  margin: 34px clamp(28px, 5vw, 76px) 70px;
}

body.editorial-template .editorial-web {
  background: var(--ed-bg-2);
}

body.editorial-template .editorial-web-grid {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(320px,.8fr);
}

body.editorial-template .editorial-web-statement {
  padding: clamp(70px, 9vw, 130px) clamp(28px, 5vw, 76px);
  border-right: 1px solid var(--ed-line);
}

body.editorial-template .editorial-web-statement h2 {
  margin: 0;
  max-width: 850px;
  font-size: clamp(3.2rem, 7.2vw, 7.6rem);
  line-height: .9;
  letter-spacing: -.065em;
}

body.editorial-template .editorial-web-statement h2 span {
  color: var(--ed-accent);
}

body.editorial-template .editorial-web-copy {
  align-self: end;
  padding: clamp(50px, 6vw, 84px);
}

body.editorial-template .editorial-web-copy > p {
  color: var(--ed-muted) !important;
  line-height: 1.75;
  font-size: 1.05rem;
}

body.editorial-template .editorial-web-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 32px;
}

body.editorial-template .editorial-closing {
  min-height: 68svh;
  padding: clamp(80px, 10vw, 150px) max(18px, calc((100vw - 1440px)/2 + 76px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid var(--ed-line);
  background: var(--ed-bg);
}

body.editorial-template .editorial-closing h2 {
  margin: 0 0 34px;
  font-size: clamp(4rem, 10vw, 10.5rem);
  line-height: .82;
  letter-spacing: -.075em;
}

body.editorial-template .editorial-closing h2 span {
  color: var(--ed-accent);
}

/* Footer */
body.editorial-template .editorial-footer {
  width: min(100% - 36px, 1440px);
  margin: 0 auto;
  border: 1px solid var(--ed-line);
  border-bottom: 0;
  background: var(--ed-bg-2);
}

body.editorial-template .editorial-footer-top {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  min-height: 330px;
}

body.editorial-template .editorial-footer-brand {
  padding: 54px;
  border-right: 1px solid var(--ed-line);
}

body.editorial-template .editorial-footer-logo {
  width: 190px;
}

body.editorial-template .editorial-footer-brand p {
  margin: 24px 0 0;
  color: var(--ed-muted) !important;
}

body.editorial-template .editorial-footer-links {
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

body.editorial-template .editorial-footer-links > div {
  padding: 54px 34px;
  border-right: 1px solid var(--ed-line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.editorial-template .editorial-footer-links > div:last-child {
  border-right: 0;
}

body.editorial-template .editorial-footer-links span {
  margin-bottom: 12px;
  color: var(--ed-accent);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.editorial-template .editorial-footer-links a {
  color: rgba(255,255,255,.68);
  text-decoration: none;
}

body.editorial-template .editorial-footer-links a:hover {
  color: var(--ed-accent);
}

body.editorial-template .editorial-footer-bottom {
  min-height: 64px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--ed-line);
  color: rgba(255,255,255,.4);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  body.editorial-template .editorial-header-inner {
    grid-template-columns: 190px 1fr auto;
  }
  body.editorial-template .editorial-contact { display:none; }
  body.editorial-template .editorial-nav { justify-content:flex-end; }
  body.editorial-template .editorial-hero {
    grid-template-columns: 1fr;
  }
  body.editorial-template .editorial-hero-left {
    min-height: 68svh;
    border-right: 0;
    border-bottom: 1px solid var(--ed-line);
  }
  body.editorial-template .editorial-service,
  body.editorial-template .editorial-web-grid {
    grid-template-columns: 1fr;
  }
  body.editorial-template .editorial-web-statement {
    border-right: 0;
    border-bottom: 1px solid var(--ed-line);
  }
  body.editorial-template .editorial-footer-top {
    grid-template-columns: 1fr;
  }
  body.editorial-template .editorial-footer-brand {
    border-right: 0;
    border-bottom: 1px solid var(--ed-line);
  }
}

@media (max-width: 900px) {
  body.editorial-template .editorial-header {
    height: 70px;
  }
  body.editorial-template .editorial-header-inner {
    width: calc(100% - 24px);
    grid-template-columns: 1fr auto;
  }
  body.editorial-template .editorial-logo {
    width: 124px;
  }
  body.editorial-template .editorial-nav {
    display: none;
  }
  body.editorial-template .editorial-menu-toggle {
    display: inline-flex;
  }
  body.editorial-template .editorial-hero,
  body.editorial-template .editorial-services,
  body.editorial-template .editorial-releases,
  body.editorial-template .editorial-web,
  body.editorial-template .editorial-footer {
    width: calc(100% - 24px);
  }
  body.editorial-template .editorial-release {
    grid-template-columns: 64px 1fr;
  }
  body.editorial-template .editorial-release-player {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--ed-line);
  }
  body.editorial-template .editorial-section-label {
    grid-template-columns: 64px 1fr;
  }
  body.editorial-template .editorial-footer-links {
    grid-template-columns: 1fr 1fr;
  }
  body.editorial-template .editorial-footer-links > div {
    border-bottom: 1px solid var(--ed-line);
  }
}

@media (max-width: 600px) {
  body.editorial-template .editorial-hero-left {
    min-height: 58svh;
    padding: 60px 22px 34px;
  }
  body.editorial-template .editorial-hero h1 {
    font-size: clamp(4rem, 24vw, 7.4rem);
  }
  body.editorial-template .editorial-intro,
  body.editorial-template .editorial-meta {
    padding: 28px 22px;
  }
  body.editorial-template .editorial-service {
    gap: 28px;
    padding: 54px 22px;
  }
  body.editorial-template .editorial-release-title {
    padding: 24px 18px;
  }
  body.editorial-template .editorial-release-player {
    padding: 18px;
  }
  body.editorial-template .editorial-web-statement,
  body.editorial-template .editorial-web-copy {
    padding: 54px 22px;
  }
  body.editorial-template .editorial-closing {
    min-height: 56svh;
    padding: 74px 22px;
  }
  body.editorial-template .editorial-footer-links {
    grid-template-columns: 1fr;
  }
  body.editorial-template .editorial-footer-links > div {
    border-right: 0;
  }
  body.editorial-template .editorial-footer-brand,
  body.editorial-template .editorial-footer-links > div {
    padding: 34px 24px;
  }
  body.editorial-template .editorial-footer-bottom {
    min-height: 84px;
    padding: 18px 24px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.editorial-template .editorial-ticker > div {
    animation: none;
  }
}


/* =========================================================
   AGUS — PROFESSIONAL BUSINESS TEMPLATE
   Flat, commercial, clean, black / turquoise / white.
   ========================================================= */
body.professional-template {
  --pro-bg: #06090a;
  --pro-bg-soft: #0b1012;
  --pro-surface: #101719;
  --pro-white: #f6fbfb;
  --pro-muted: rgba(246,251,251,.63);
  --pro-line: rgba(255,255,255,.1);
  --pro-accent: #25d8ca;
  --pro-accent-dark: #0fb9ad;
  background: var(--pro-bg) !important;
  color: var(--pro-white) !important;
}

body.professional-template .pro-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 78px;
  background: rgba(6,9,10,.96);
  border-bottom: 1px solid var(--pro-line);
  backdrop-filter: blur(14px);
}

body.professional-template .pro-header-inner {
  width: min(100% - 36px, 1280px);
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
}

body.professional-template .pro-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

body.professional-template .pro-logo {
  width: 145px;
  height: auto;
}

body.professional-template .pro-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.1vw, 34px);
}

body.professional-template .pro-nav a {
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-size: .77rem;
  font-weight: 700;
  letter-spacing: .045em;
}

body.professional-template .pro-nav a:hover,
body.professional-template .pro-nav a.active {
  color: var(--pro-accent);
}

body.professional-template .pro-header-cta {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 4px;
  background: var(--pro-accent);
  color: #05100f;
  text-decoration: none;
  font-size: .76rem;
  font-weight: 800;
}

body.professional-template .pro-header-cta:hover {
  background: var(--pro-accent-dark);
}

body.professional-template .pro-menu-toggle {
  display: none;
  margin-left: auto;
}

body.professional-template .pro-main {
  background: var(--pro-bg);
}

body.professional-template .pro-container {
  width: min(100% - 40px, 1280px);
  margin: 0 auto;
}

body.professional-template .pro-hero {
  padding: clamp(95px, 10vw, 155px) 0;
  border-bottom: 1px solid var(--pro-line);
  background: var(--pro-bg);
}

body.professional-template .pro-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(310px,.65fr);
  gap: clamp(60px, 9vw, 130px);
  align-items: end;
}

body.professional-template .pro-eyebrow {
  margin: 0 0 16px;
  color: var(--pro-accent) !important;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.professional-template .pro-hero h1 {
  margin: 0;
  max-width: 900px;
  font-size: clamp(3.8rem, 7.5vw, 7.8rem);
  line-height: .92;
  letter-spacing: -.06em;
}

body.professional-template .pro-hero h1 span {
  color: var(--pro-accent);
}

body.professional-template .pro-lead {
  max-width: 690px;
  margin: 28px 0 0;
  color: var(--pro-muted) !important;
  font-size: clamp(1.06rem, 1.7vw, 1.25rem);
  line-height: 1.72;
}

body.professional-template .pro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

body.professional-template .pro-btn {
  min-height: 48px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 4px;
  text-decoration: none;
  font-size: .8rem;
  font-weight: 800;
}

body.professional-template .pro-btn-primary {
  background: var(--pro-accent);
  border-color: var(--pro-accent);
  color: #05100f;
}

body.professional-template .pro-btn-primary:hover {
  background: var(--pro-accent-dark);
  border-color: var(--pro-accent-dark);
}

body.professional-template .pro-btn-secondary {
  background: transparent;
  border-color: rgba(255,255,255,.2);
  color: var(--pro-white);
}

body.professional-template .pro-btn-secondary:hover {
  border-color: var(--pro-accent);
  color: var(--pro-accent);
}

body.professional-template .pro-hero-side {
  border-top: 1px solid var(--pro-line);
}

body.professional-template .pro-stat {
  padding: 25px 0;
  border-bottom: 1px solid var(--pro-line);
}

body.professional-template .pro-stat span {
  display: block;
  margin-bottom: 9px;
  color: var(--pro-accent);
  font-size: .68rem;
  font-weight: 800;
}

body.professional-template .pro-stat strong {
  display: block;
  margin-bottom: 8px;
  font-size: 1.1rem;
}

body.professional-template .pro-stat p {
  margin: 0;
  color: var(--pro-muted) !important;
  line-height: 1.6;
}

body.professional-template .pro-section {
  padding: clamp(80px, 8vw, 120px) 0;
  border-bottom: 1px solid var(--pro-line);
}

body.professional-template .pro-section-light {
  background: var(--pro-bg-soft);
}

body.professional-template .pro-heading {
  max-width: 760px;
  margin-bottom: 55px;
}

body.professional-template .pro-heading h2,
body.professional-template .pro-about-grid h2,
body.professional-template .pro-web-grid h2,
body.professional-template .pro-contact-grid h2 {
  margin: 0;
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: .98;
  letter-spacing: -.05em;
}

body.professional-template .pro-heading > p:last-child,
body.professional-template .pro-about-grid p,
body.professional-template .pro-web-grid p,
body.professional-template .pro-contact-grid p {
  color: var(--pro-muted) !important;
  line-height: 1.75;
}

body.professional-template .pro-service-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--pro-line);
}

body.professional-template .pro-service-block {
  padding: clamp(42px, 5vw, 70px) clamp(25px, 4vw, 58px) clamp(42px, 5vw, 70px) 0;
}

body.professional-template .pro-service-block + .pro-service-block {
  padding-left: clamp(25px, 4vw, 58px);
  border-left: 1px solid var(--pro-line);
}

body.professional-template .pro-service-number {
  display: block;
  margin-bottom: 55px;
  color: rgba(255,255,255,.35);
  font-size: .72rem;
}

body.professional-template .pro-service-block h3 {
  margin: 0 0 22px;
  font-size: clamp(2rem, 3.6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.04em;
}

body.professional-template .pro-service-block > p:not(.pro-eyebrow) {
  max-width: 540px;
  color: var(--pro-muted) !important;
  line-height: 1.7;
}

body.professional-template .pro-service-block ul {
  margin: 28px 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--pro-line);
}

body.professional-template .pro-service-block li {
  padding: 11px 0;
  border-bottom: 1px solid var(--pro-line);
  color: rgba(255,255,255,.78);
}

body.professional-template .pro-text-link {
  color: var(--pro-white);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 800;
}

body.professional-template .pro-text-link:hover {
  color: var(--pro-accent);
}

body.professional-template .pro-about-strip {
  background: var(--pro-bg);
}

body.professional-template .pro-about-grid {
  display: grid;
  grid-template-columns: 1fr .85fr;
  gap: clamp(50px, 9vw, 130px);
}

body.professional-template .pro-about-grid > div:last-child {
  align-self: end;
}

body.professional-template .pro-releases {
  background: var(--pro-bg-soft);
}

body.professional-template .pro-release-list {
  border-top: 1px solid var(--pro-line);
}

body.professional-template .pro-release-row {
  display: grid;
  grid-template-columns: 70px minmax(180px,.42fr) minmax(0,1fr);
  align-items: center;
  min-height: 195px;
  border-bottom: 1px solid var(--pro-line);
}

body.professional-template .pro-release-index {
  color: var(--pro-accent);
  font-size: .7rem;
  font-weight: 800;
}

body.professional-template .pro-release-title span {
  display: block;
  margin-bottom: 6px;
  color: var(--pro-accent);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.professional-template .pro-release-title h3 {
  margin: 0;
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
}

body.professional-template .pro-release-player {
  padding-left: 38px;
}

body.professional-template .pro-release-player iframe {
  display: block;
  width: 100%;
  border-radius: 8px;
}

body.professional-template .pro-section-action {
  margin-top: 30px;
}

body.professional-template .pro-web-highlight {
  background: var(--pro-bg);
}

body.professional-template .pro-web-grid {
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: clamp(50px, 9vw, 130px);
}

body.professional-template .pro-web-grid > div:last-child {
  align-self: end;
}

body.professional-template .pro-feature-list {
  margin: 30px 0;
  border-top: 1px solid var(--pro-line);
}

body.professional-template .pro-feature-list > div {
  padding: 13px 0;
  display: flex;
  gap: 18px;
  border-bottom: 1px solid var(--pro-line);
}

body.professional-template .pro-feature-list span {
  color: var(--pro-accent);
  font-size: .7rem;
}

body.professional-template .pro-contact-banner {
  background: var(--pro-bg-soft);
}

body.professional-template .pro-contact-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 50px;
  align-items: end;
}

body.professional-template .pro-contact-grid > div:first-child {
  max-width: 760px;
}

body.professional-template .pro-contact-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 17px;
}

body.professional-template .pro-contact-action span {
  color: var(--pro-muted);
  font-size: .78rem;
}

/* Footer */
body.professional-template .pro-footer {
  background: #040707;
  border-top: 1px solid var(--pro-line);
}

body.professional-template .pro-footer-main {
  width: min(100% - 40px, 1280px);
  margin: 0 auto;
  padding: 70px 0;
  display: grid;
  grid-template-columns: 1.4fr .75fr .75fr .75fr;
  gap: 52px;
}

body.professional-template .pro-footer-logo {
  width: 180px;
}

body.professional-template .pro-footer-brand p {
  max-width: 390px;
  color: var(--pro-muted) !important;
  line-height: 1.7;
}

body.professional-template .pro-company-data {
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: rgba(255,255,255,.48);
  font-size: .76rem;
}

body.professional-template .pro-footer-column {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

body.professional-template .pro-footer-column h4 {
  margin: 0 0 10px;
  color: var(--pro-accent);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.professional-template .pro-footer-column a {
  color: rgba(255,255,255,.68);
  text-decoration: none;
}

body.professional-template .pro-footer-column a:hover {
  color: var(--pro-white);
}

body.professional-template .pro-footer-bottom {
  width: min(100% - 40px, 1280px);
  min-height: 62px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--pro-line);
  color: rgba(255,255,255,.4);
  font-size: .76rem;
}

/* Contact company info */
body.professional-template .pro-contact-business {
  background: var(--pro-bg-soft);
}
body.professional-template .pro-business-info {
  padding: 40px 0;
  border-top: 1px solid var(--pro-line);
  border-bottom: 1px solid var(--pro-line);
}
body.professional-template .pro-business-info h2 {
  margin: 0 0 15px;
}
body.professional-template .pro-business-info p {
  margin: 6px 0;
  color: var(--pro-muted) !important;
}

/* Remove legacy decorative / 3d styling */
body.professional-template .division-card,
body.professional-template .case-card,
body.professional-template .service-card,
body.professional-template .project-card,
body.professional-template .home-release-card,
body.professional-template .studio-card {
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

@media (max-width: 1080px) {
  body.professional-template .pro-nav {
    gap: 16px;
  }
  body.professional-template .pro-header-cta {
    display: none;
  }
  body.professional-template .pro-hero-grid,
  body.professional-template .pro-about-grid,
  body.professional-template .pro-web-grid {
    grid-template-columns: 1fr;
  }
  body.professional-template .pro-hero-side {
    max-width: 700px;
  }
  body.professional-template .pro-footer-main {
    grid-template-columns: 1.3fr 1fr 1fr;
  }
}

@media (max-width: 900px) {
  body.professional-template .pro-header {
    height: 70px;
  }
  body.professional-template .pro-header-inner {
    width: calc(100% - 24px);
  }
  body.professional-template .pro-logo {
    width: 125px;
  }
  body.professional-template .pro-nav {
    display: none;
  }
  body.professional-template .pro-menu-toggle {
    display: inline-flex;
  }
  body.professional-template .pro-service-split {
    grid-template-columns: 1fr;
  }
  body.professional-template .pro-service-block,
  body.professional-template .pro-service-block + .pro-service-block {
    padding-left: 0;
    padding-right: 0;
  }
  body.professional-template .pro-service-block + .pro-service-block {
    border-left: 0;
    border-top: 1px solid var(--pro-line);
  }
  body.professional-template .pro-release-row {
    grid-template-columns: 55px 1fr;
    padding: 22px 0;
  }
  body.professional-template .pro-release-player {
    grid-column: 1 / -1;
    padding: 22px 0 0;
  }
  body.professional-template .pro-contact-grid {
    grid-template-columns: 1fr;
  }
  body.professional-template .pro-footer-main {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  body.professional-template .pro-container,
  body.professional-template .pro-footer-main,
  body.professional-template .pro-footer-bottom {
    width: calc(100% - 24px);
  }
  body.professional-template .pro-hero {
    padding: 75px 0;
  }
  body.professional-template .pro-hero h1 {
    font-size: clamp(3.15rem, 15vw, 5rem);
  }
  body.professional-template .pro-actions {
    flex-direction: column;
  }
  body.professional-template .pro-btn {
    width: 100%;
  }
  body.professional-template .pro-section {
    padding: 68px 0;
  }
  body.professional-template .pro-footer-main {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 55px 0;
  }
  body.professional-template .pro-footer-bottom {
    min-height: 88px;
    padding: 18px 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 7px;
  }
}

/* =========================================================
   AGUS — GLOBAL PAGE TITLE ALIGNMENT
   All page titles and intro copy are anchored to the left.
   ========================================================= */
.page-hero .container,
.page-hero .copy,
.web-hero .container,
.brand-hero-content,
.case-hero .container,
.pro-hero-copy,
.section-heading,
.section-heading.centered {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  align-items: flex-start !important;
}

.page-hero h1,
.page-hero h2,
.web-hero h1,
.brand-hero h1,
.case-hero h1,
.pro-hero-copy h1,
.section-heading h1,
.section-heading h2,
.section-heading h3,
.page-hero p,
.web-hero p,
.brand-hero p,
.case-hero p,
.pro-hero-copy p,
.section-heading p {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.section-heading.centered {
  max-width: none !important;
}


/* AGUS — minimal header: logo + hamburger only */
body.professional-template .pro-header-inner {
  justify-content: space-between;
}
body.professional-template .pro-menu-toggle {
  display: inline-flex !important;
  margin-left: auto;
}
body.professional-template .pro-nav,
body.professional-template .pro-header-cta {
  display: none !important;
}


/* =========================================================
   HAMBURGER MENU FIX — REMOVE RIGHT-SIDE ARROWS / ICON ARTIFACTS
   ========================================================= */
.mobile-menu-links a::after,
.mobile-menu-links a::before,
.pro-mobile-nav a::after,
.pro-mobile-nav a::before,
.mobile-menu-links .menu-arrow,
.mobile-menu-links .menu-icon,
.mobile-menu-links .chevron,
.pro-mobile-nav .menu-arrow,
.pro-mobile-nav .menu-icon,
.pro-mobile-nav .chevron {
  content: none !important;
  display: none !important;
}

.mobile-menu-links a,
.pro-mobile-nav a {
  position: relative;
  padding-right: 0 !important;
}

.mobile-menu-links a > span:first-child,
.pro-mobile-nav a > span:first-child {
  display: inline-block !important;
}

/* =========================================================
   AGUS — SHARED MOBILE CSS
   Zelfde design-systeem als desktop, alleen responsive layout.
   ========================================================= */
@media (max-width: 900px) {
  body.professional-template .pro-menu-toggle {
    display: inline-flex !important;
    border-color: var(--pro-line);
    background: var(--pro-surface);
    border-radius: 4px;
  }

  body.professional-template .pro-menu-toggle span {
    background: var(--pro-white) !important;
  }

  body.professional-template .menu-overlay {
    display: block !important;
    background: rgba(0,0,0,.7);
  }

  body.professional-template .pro-mobile-menu {
    display: flex !important;
    width: min(420px, 92vw);
    background: var(--pro-bg-soft) !important;
    border-left: 1px solid var(--pro-line);
    padding: 24px;
  }

  body.professional-template .pro-mobile-menu .mobile-menu-header {
    border-bottom-color: var(--pro-line);
  }

  body.professional-template .pro-mobile-menu .agus-logo-mobile {
    width: 132px;
    height: auto;
  }

  body.professional-template .pro-mobile-menu .menu-close {
    border-color: var(--pro-line);
    color: var(--pro-white);
    border-radius: 4px;
  }

  body.professional-template .pro-mobile-menu .mobile-menu-links {
    margin-top: 22px;
  }

  body.professional-template .pro-mobile-menu .mobile-menu-links a {
    min-height: 58px;
    padding: 14px 4px;
    border-bottom-color: var(--pro-line);
    color: rgba(255,255,255,.78);
    font-size: clamp(1.15rem, 5vw, 1.6rem);
    letter-spacing: -.025em;
  }

  body.professional-template .pro-mobile-menu .mobile-menu-links a span,
  body.professional-template .pro-mobile-menu .mobile-menu-links a::after,
  body.professional-template .pro-mobile-menu .mobile-menu-links a:hover,
  body.professional-template .pro-mobile-menu .mobile-menu-links a.active {
    color: var(--pro-accent) !important;
  }

  body.professional-template .pro-mobile-menu .mobile-menu-links a:hover,
  body.professional-template .pro-mobile-menu .mobile-menu-links a.active {
    background: rgba(37,216,202,.04);
  }
}

@media (max-width: 600px) {
  body.professional-template .pro-mobile-menu {
    width: 100%;
    max-width: none;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  }

  body.professional-template .pro-mobile-menu .mobile-menu-links a {
    font-size: 1.12rem;
  }
}

/* =========================================================
   AGUS — UNIFIED RESPONSIVE TYPOGRAPHY
   index.php is the visual reference for every page.
   Desktop/laptop, tablet/iPad and mobile share one scale.
   ========================================================= */
body.professional-template {
  font-size: 16px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Hero titles: same scale as the index hero. */
body.professional-template .page-hero h1,
body.professional-template .web-hero h1,
body.professional-template .brand-hero h1,
body.professional-template .case-hero h1 {
  font-size: clamp(3.8rem, 7.5vw, 7.8rem) !important;
  line-height: .92 !important;
  letter-spacing: -.06em !important;
}

/* Main section titles: same scale as index .pro-heading h2. */
body.professional-template .section-heading h2,
body.professional-template .big-statement h2,
body.professional-template .case-story h2,
body.professional-template .web-offer h2,
body.professional-template .division-card h2 {
  font-size: clamp(2.5rem, 5vw, 5rem) !important;
  line-height: .98 !important;
  letter-spacing: -.05em !important;
}

/* Content/card headings follow the index service-heading hierarchy. */
body.professional-template .service-card h3,
body.professional-template .project-card h3,
body.professional-template .case-card h3,
body.professional-template .template-card h3,
body.professional-template .timeline-item h2,
body.professional-template .timeline-item h3 {
  font-size: clamp(1.55rem, 2.35vw, 2.25rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
}

/* Intro copy equals the index lead; normal copy stays consistent everywhere. */
body.professional-template .page-hero .copy > p:not(.eyebrow),
body.professional-template .web-hero .brand-lead,
body.professional-template .brand-lead,
body.professional-template .case-hero .brand-lead {
  font-size: clamp(1.06rem, 1.7vw, 1.25rem) !important;
  line-height: 1.72 !important;
}

body.professional-template .section p,
body.professional-template .service-card p,
body.professional-template .project-card p,
body.professional-template .case-card p,
body.professional-template .template-card p,
body.professional-template .timeline-item p,
body.professional-template .web-offer p,
body.professional-template .case-story p,
body.professional-template .contact-points,
body.professional-template .clean-list {
  font-size: 1rem;
  line-height: 1.7;
}

/* Small UI type uses one shared scale. */
body.professional-template .eyebrow,
body.professional-template .pro-eyebrow,
body.professional-template .project-meta span,
body.professional-template .release-meta span,
body.professional-template .status-pill,
body.professional-template .division-tags span,
body.professional-template .process-strip strong {
  font-size: .68rem !important;
}

body.professional-template .btn,
body.professional-template .pro-btn,
body.professional-template .text-link,
body.professional-template input,
body.professional-template select,
body.professional-template textarea {
  font-size: .9rem;
}

/* Prevent long titles/words from causing horizontal overflow. */
body.professional-template h1,
body.professional-template h2,
body.professional-template h3,
body.professional-template p,
body.professional-template a {
  overflow-wrap: break-word;
}

/* Laptop / smaller desktop */
@media (max-width: 1200px) {
  body.professional-template .page-hero h1,
  body.professional-template .web-hero h1,
  body.professional-template .brand-hero h1,
  body.professional-template .case-hero h1 {
    font-size: clamp(3.6rem, 7.2vw, 6.6rem) !important;
  }

  body.professional-template .section-heading h2,
  body.professional-template .big-statement h2,
  body.professional-template .case-story h2,
  body.professional-template .web-offer h2,
  body.professional-template .division-card h2 {
    font-size: clamp(2.35rem, 4.8vw, 4.4rem) !important;
  }
}

/* iPad / tablet */
@media (max-width: 1024px) {
  body.professional-template .page-hero h1,
  body.professional-template .web-hero h1,
  body.professional-template .brand-hero h1,
  body.professional-template .case-hero h1,
  body.professional-template .pro-hero h1 {
    font-size: clamp(3.25rem, 8.5vw, 5.4rem) !important;
  }

  body.professional-template .section-heading h2,
  body.professional-template .big-statement h2,
  body.professional-template .case-story h2,
  body.professional-template .web-offer h2,
  body.professional-template .division-card h2,
  body.professional-template .pro-heading h2,
  body.professional-template .pro-about-grid h2,
  body.professional-template .pro-web-grid h2,
  body.professional-template .pro-contact-grid h2 {
    font-size: clamp(2.25rem, 6.2vw, 3.8rem) !important;
  }

  body.professional-template .page-hero .copy > p:not(.eyebrow),
  body.professional-template .web-hero .brand-lead,
  body.professional-template .brand-lead,
  body.professional-template .case-hero .brand-lead,
  body.professional-template .pro-lead {
    font-size: 1.05rem !important;
  }
}

/* Mobile */
@media (max-width: 600px) {
  body.professional-template {
    font-size: 16px;
  }

  body.professional-template .page-hero h1,
  body.professional-template .web-hero h1,
  body.professional-template .brand-hero h1,
  body.professional-template .case-hero h1,
  body.professional-template .pro-hero h1 {
    font-size: clamp(3rem, 14vw, 4.25rem) !important;
    line-height: .94 !important;
  }

  body.professional-template .section-heading h2,
  body.professional-template .big-statement h2,
  body.professional-template .case-story h2,
  body.professional-template .web-offer h2,
  body.professional-template .division-card h2,
  body.professional-template .pro-heading h2,
  body.professional-template .pro-about-grid h2,
  body.professional-template .pro-web-grid h2,
  body.professional-template .pro-contact-grid h2 {
    font-size: clamp(2.05rem, 10vw, 3rem) !important;
    line-height: 1 !important;
  }

  body.professional-template .service-card h3,
  body.professional-template .project-card h3,
  body.professional-template .case-card h3,
  body.professional-template .template-card h3,
  body.professional-template .timeline-item h2,
  body.professional-template .timeline-item h3,
  body.professional-template .pro-service-block h3 {
    font-size: clamp(1.45rem, 7vw, 2rem) !important;
  }

  body.professional-template .page-hero .copy > p:not(.eyebrow),
  body.professional-template .web-hero .brand-lead,
  body.professional-template .brand-lead,
  body.professional-template .case-hero .brand-lead,
  body.professional-template .pro-lead,
  body.professional-template .section p,
  body.professional-template .service-card p,
  body.professional-template .project-card p,
  body.professional-template .case-card p,
  body.professional-template .template-card p,
  body.professional-template .timeline-item p,
  body.professional-template .web-offer p,
  body.professional-template .case-story p {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  body.professional-template .btn,
  body.professional-template .pro-btn,
  body.professional-template input,
  body.professional-template select,
  body.professional-template textarea {
    font-size: 16px !important;
  }
}


/* =========================================================
   AGUS — MUZIEK OF WEBSITES REBUILD
   Shared responsive components for desktop, laptop, iPad and mobile.
   ========================================================= */
body.professional-template .agus-desktop-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
body.professional-template .agus-desktop-nav a{font-size:.78rem;font-weight:800;letter-spacing:.035em;color:rgba(255,255,255,.7)}
body.professional-template .agus-desktop-nav a:hover,body.professional-template .agus-desktop-nav a.active{color:var(--pro-accent)}
body.professional-template .agus-header-cta{min-height:42px;padding:0 18px;display:inline-flex;align-items:center;border:1px solid var(--pro-accent);background:var(--pro-accent);color:#04100f;font-size:.78rem;font-weight:800;border-radius:4px}
body.professional-template .agus-choice-hero h1{max-width:none;font-size:clamp(4.3rem,9vw,9.5rem);white-space:normal}
body.professional-template .agus-choice-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(55px,7vw,90px);border-top:1px solid var(--pro-line);border-bottom:1px solid var(--pro-line)}
body.professional-template .agus-choice-card{min-height:430px;padding:clamp(34px,4.5vw,64px);display:flex;flex-direction:column;justify-content:space-between;gap:36px;transition:background .2s ease}
body.professional-template .agus-choice-card+ .agus-choice-card{border-left:1px solid var(--pro-line)}
body.professional-template .agus-choice-card:hover{background:rgba(37,216,202,.035)}
body.professional-template .agus-choice-card>span,.agus-steps span,.agus-service-grid article>span,.agus-contact-choices>a>span{color:var(--pro-accent);font-size:.7rem;font-weight:800}
body.professional-template .agus-choice-card h2{margin:0;font-size:clamp(3.2rem,6vw,6.5rem);line-height:.92;letter-spacing:-.06em}
body.professional-template .agus-choice-card p:not(.pro-eyebrow){max-width:430px;color:var(--pro-muted)!important;font-size:1rem}
body.professional-template .agus-choice-card strong{font-size:.85rem}
body.professional-template .agus-dual-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--pro-line)}
body.professional-template .agus-dual-grid>div{padding:60px 55px 60px 0}
body.professional-template .agus-dual-grid>div+div{padding-left:55px;border-left:1px solid var(--pro-line)}
body.professional-template .agus-dual-grid h2{margin:0 0 18px;font-size:clamp(2.3rem,4vw,4rem);line-height:1;letter-spacing:-.045em}
body.professional-template .agus-dual-grid p{color:var(--pro-muted)!important}
body.professional-template .agus-steps,body.professional-template .agus-service-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--pro-line)}
body.professional-template .agus-steps>div,body.professional-template .agus-service-grid article{padding:38px 28px 38px 0}
body.professional-template .agus-steps>div+div,body.professional-template .agus-service-grid article+article{padding-left:28px;border-left:1px solid var(--pro-line)}
body.professional-template .agus-steps h3,body.professional-template .agus-service-grid h3{margin:40px 0 10px;font-size:clamp(1.4rem,2vw,2rem)}
body.professional-template .agus-steps p,body.professional-template .agus-service-grid p{margin:0;color:var(--pro-muted)!important}
body.professional-template .agus-form-hero{padding-bottom:75px}
body.professional-template .agus-form-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(50px,8vw,120px);align-items:start}
body.professional-template .agus-form-layout h2{margin:0 0 20px;font-size:clamp(2.4rem,4.5vw,4.8rem);line-height:.98;letter-spacing:-.05em}
body.professional-template .agus-form-layout>div>p:last-child{color:var(--pro-muted)!important}
body.professional-template .agus-request-form{display:grid;gap:20px;padding:clamp(28px,4vw,48px);background:var(--pro-surface);border:1px solid var(--pro-line)}
body.professional-template .agus-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
body.professional-template .agus-request-form label{display:grid;gap:8px;color:var(--pro-white);font-size:.78rem;font-weight:800}
body.professional-template .agus-request-form input,body.professional-template .agus-request-form select,body.professional-template .agus-request-form textarea{width:100%;border:1px solid var(--pro-line);border-radius:4px;background:#080d0e;color:var(--pro-white);padding:14px 15px;outline:none}
body.professional-template .agus-request-form input:focus,body.professional-template .agus-request-form select:focus,body.professional-template .agus-request-form textarea:focus{border-color:var(--pro-accent)}
body.professional-template .agus-request-form textarea{resize:vertical;min-height:140px}
body.professional-template .agus-request-form .pro-btn{border:0;cursor:pointer;margin-top:4px}
body.professional-template .agus-form-note{margin:0;color:rgba(255,255,255,.42)!important;font-size:.76rem!important}
body.professional-template .agus-project-split,body.professional-template .agus-contact-choices{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--pro-line);border-bottom:1px solid var(--pro-line)}
body.professional-template .agus-project-split article,body.professional-template .agus-contact-choices>a{padding:clamp(40px,5vw,70px) clamp(20px,4vw,55px) clamp(40px,5vw,70px) 0}
body.professional-template .agus-project-split article+article,body.professional-template .agus-contact-choices>a+ a{padding-left:clamp(20px,4vw,55px);border-left:1px solid var(--pro-line)}
body.professional-template .agus-project-split h2,body.professional-template .agus-contact-choices h2{margin:20px 0 12px;font-size:clamp(2.5rem,5vw,5rem);line-height:.95;letter-spacing:-.055em}
body.professional-template .agus-project-split p,body.professional-template .agus-contact-choices p{color:var(--pro-muted)!important}
body.professional-template .agus-contact-choices{margin-top:60px}
body.professional-template .agus-contact-choices>a{min-height:300px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
body.professional-template .agus-contact-choices strong{margin-top:25px}
@media(max-width:1080px){body.professional-template .agus-desktop-nav{display:none}body.professional-template .agus-header-cta{margin-left:auto}body.professional-template .agus-steps,body.professional-template .agus-service-grid{grid-template-columns:1fr 1fr}body.professional-template .agus-steps>div:nth-child(3),body.professional-template .agus-service-grid article:nth-child(3){border-left:0;padding-left:0;border-top:1px solid var(--pro-line)}body.professional-template .agus-steps>div:nth-child(4),body.professional-template .agus-service-grid article:nth-child(4){border-top:1px solid var(--pro-line)}body.professional-template .agus-form-layout{grid-template-columns:1fr}}
@media(max-width:900px){body.professional-template .agus-header-cta{display:none}body.professional-template .agus-choice-grid,body.professional-template .agus-dual-grid,body.professional-template .agus-project-split,body.professional-template .agus-contact-choices{grid-template-columns:1fr}body.professional-template .agus-choice-card{min-height:330px}body.professional-template .agus-choice-card+ .agus-choice-card,body.professional-template .agus-dual-grid>div+div,body.professional-template .agus-project-split article+article,body.professional-template .agus-contact-choices>a+a{border-left:0;border-top:1px solid var(--pro-line);padding-left:0}body.professional-template .agus-dual-grid>div{padding:45px 0}body.professional-template .agus-project-split article,body.professional-template .agus-contact-choices>a{padding-left:0;padding-right:0}}
@media(max-width:600px){body.professional-template .agus-choice-hero h1{font-size:clamp(3.15rem,15vw,4.7rem)!important}body.professional-template .agus-choice-card{padding:32px 0;min-height:285px}body.professional-template .agus-choice-card h2{font-size:clamp(2.8rem,14vw,4.2rem)}body.professional-template .agus-steps,body.professional-template .agus-service-grid{grid-template-columns:1fr}body.professional-template .agus-steps>div,body.professional-template .agus-service-grid article,body.professional-template .agus-steps>div+div,body.professional-template .agus-service-grid article+article{padding:28px 0;border-left:0;border-top:1px solid var(--pro-line)}body.professional-template .agus-steps h3,body.professional-template .agus-service-grid h3{margin-top:18px}body.professional-template .agus-field-grid{grid-template-columns:1fr}body.professional-template .agus-request-form{padding:22px 16px}body.professional-template .agus-contact-choices{margin-top:40px}}


/* AGUS header: logo + hamburger only on every viewport */
.site-header .desktop-nav, .pro-header .desktop-nav, .desktop-nav,
.site-header > nav:not(.mobile-nav):not(.mobile-menu),
.pro-header > nav:not(.mobile-nav):not(.mobile-menu) { display:none !important; }

/* Keep the existing hamburger visible on laptop/desktop too */
.menu-toggle, .hamburger, .nav-toggle, .mobile-menu-toggle {
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
}

@media (min-width: 901px) {
  .site-header .container, .pro-header .container, header .container {
    display:flex; align-items:center; justify-content:space-between;
  }
  .site-nav:not(.mobile-nav):not(.mobile-menu),
  .pro-nav:not(.mobile-nav):not(.mobile-menu),
  .main-nav:not(.mobile-nav):not(.mobile-menu) { display:none !important; }
}


/* FINAL NAVBAR OVERRIDE — only AGUS logo + hamburger */
body.professional-template .agus-desktop-nav,
body.professional-template .agus-header-cta {
  display: none !important;
}
body.professional-template .pro-header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
body.professional-template .pro-brand { margin-right: auto !important; }
body.professional-template .pro-menu-toggle {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-left: auto !important;
}

/* =========================================
   AGUS INTERACTIVE CHOICE CARDS
========================================= */

.agus-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;

  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);

  overflow: hidden;
}

.agus-choice-card {
  position: relative;
  min-height: 360px;

  padding: clamp(28px, 4vw, 55px);

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  background: #080c0d;
  color: #fff;

  text-decoration: none;
  overflow: hidden;

  isolation: isolate;

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    background .45s ease;
}


/* Turquoise achtergrond glow */

.agus-choice-card::before {
  content: "";

  position: absolute;
  width: 420px;
  height: 420px;

  right: -220px;
  bottom: -260px;

  border-radius: 50%;

  background: #26e6d2;

  filter: blur(100px);

  opacity: 0;

  transform: scale(.7);

  transition:
    opacity .5s ease,
    transform .7s cubic-bezier(.2,.8,.2,1);

  z-index: -1;
}


/* Bewegende turquoise lijn */

.agus-choice-card::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 0;
  height: 3px;

  background: #26e6d2;

  transition: width .55s cubic-bezier(.2,.8,.2,1);
}


/* Nummer */

.choice-number {
  font-size: 12px;
  font-weight: 800;

  letter-spacing: .15em;

  color: #26e6d2;

  transition: transform .4s ease;
}


/* Titel */

.choice-content h2 {
  margin: 0;

  font-size: clamp(42px, 5vw, 76px);
  line-height: .9;

  letter-spacing: -.05em;

  transition:
    transform .5s cubic-bezier(.2,.8,.2,1),
    color .35s ease;
}


/* Beschrijving */

.choice-content p {
  margin: 18px 0 0;

  font-size: clamp(15px, 1.4vw, 18px);

  color: rgba(255,255,255,.55);

  transition:
    transform .5s cubic-bezier(.2,.8,.2,1),
    color .35s ease;
}


/* Ontdek */

.choice-link {
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    color .3s ease;
}


.choice-link span {
  font-size: 22px;

  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}


/* =========================================
   HOVER
========================================= */

@media (hover: hover) {

  .agus-choice-card:hover {
    background: #0b1112;
  }

  .agus-choice-card:hover::before {
    opacity: .16;
    transform: scale(1);
  }

  .agus-choice-card:hover::after {
    width: 100%;
  }

  .agus-choice-card:hover .choice-number {
    transform: translateX(8px);
  }

  .agus-choice-card:hover .choice-content h2 {
    color: #26e6d2;
    transform: translateY(-8px);
  }

  .agus-choice-card:hover .choice-content p {
    color: rgba(255,255,255,.85);
    transform: translateY(-4px);
  }

  .agus-choice-card:hover .choice-link {
    transform: translateX(8px);
  }

  .agus-choice-card:hover .choice-link span {
    transform: translateX(8px);
  }
}


/* =========================================
   MOBILE / IPAD
========================================= */

@media (max-width: 900px) {

  .agus-choice-grid {
    grid-template-columns: 1fr;
  }

  .agus-choice-card {
    min-height: 280px;
  }

}


@media (max-width: 600px) {

  .agus-choice-card {
    min-height: 240px;
    padding: 26px 22px;
  }

  .choice-content h2 {
    font-size: clamp(42px, 14vw, 62px);
  }

  .choice-content p {
    margin-top: 12px;
  }

}


/* Toegankelijkheid */

@media (prefers-reduced-motion: reduce) {

  .agus-choice-card,
  .agus-choice-card *,
  .agus-choice-card::before,
  .agus-choice-card::after {
    transition: none !important;
  }

}

/* =========================================================
   AGUS — SITE-WIDE INTERACTIVE MOTION SYSTEM
   Eén motion-taal voor home, muziek, websites, projecten,
   aanvragen, contact en footer. Responsive + touch-safe.
   ========================================================= */
body.professional-template{
  --agus-ease:cubic-bezier(.2,.8,.2,1);
  --agus-glow:rgba(37,216,202,.14);
}

/* In de geopende drawer is alleen de echte sluitknop een X. */
body.professional-template .pro-menu-toggle.active span:nth-child(1),
body.professional-template .pro-menu-toggle.active span:nth-child(3){transform:none!important}
body.professional-template .pro-menu-toggle.active span:nth-child(2){opacity:1!important}

/* Scroll reveal wordt door script.js automatisch toegevoegd. */
body.professional-template .agus-motion-item{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity .72s ease,transform .72s var(--agus-ease);
  transition-delay:var(--agus-delay,0ms);
}
body.professional-template .agus-motion-item.agus-in-view{opacity:1;transform:none}

/* Universele interactieve panelen */
body.professional-template .agus-steps>div,
body.professional-template .agus-service-grid>article,
body.professional-template .agus-project-split>article,
body.professional-template .agus-contact-choices>a,
body.professional-template .pro-stat,
body.professional-template .pro-release-row,
body.professional-template .pro-feature-list li,
body.professional-template .agus-request-form{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .42s var(--agus-ease),border-color .35s ease,background .35s ease,box-shadow .35s ease,color .35s ease;
}
body.professional-template .agus-steps>div::after,
body.professional-template .agus-service-grid>article::after,
body.professional-template .agus-project-split>article::after,
body.professional-template .agus-contact-choices>a::after,
body.professional-template .pro-stat::after,
body.professional-template .pro-release-row::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--pro-accent);
  transition:width .55s var(--agus-ease);z-index:2
}
body.professional-template .agus-steps>div::before,
body.professional-template .agus-service-grid>article::before,
body.professional-template .agus-project-split>article::before,
body.professional-template .agus-contact-choices>a::before,
body.professional-template .pro-stat::before,
body.professional-template .pro-release-row::before{
  content:"";position:absolute;width:300px;height:300px;right:-190px;bottom:-210px;border-radius:50%;
  background:var(--pro-accent);filter:blur(90px);opacity:0;transform:scale(.72);z-index:-1;
  transition:opacity .45s ease,transform .65s var(--agus-ease);pointer-events:none
}

/* Headings krijgen een subtiele turquoise accentlijn */
body.professional-template .pro-heading,
body.professional-template .pro-about-grid>div:first-child,
body.professional-template .pro-contact-grid>div:first-child,
body.professional-template .agus-form-layout>div:first-child{
  position:relative
}
body.professional-template .pro-heading::after,
body.professional-template .pro-about-grid>div:first-child::after,
body.professional-template .pro-contact-grid>div:first-child::after,
body.professional-template .agus-form-layout>div:first-child::after{
  content:"";display:block;width:42px;height:2px;margin-top:24px;background:var(--pro-accent);
  transform-origin:left;transform:scaleX(.35);opacity:.55;transition:transform .55s var(--agus-ease),opacity .35s ease
}
body.professional-template .agus-in-view.pro-heading::after,
body.professional-template .agus-in-view.pro-about-grid>div:first-child::after,
body.professional-template .agus-in-view.pro-contact-grid>div:first-child::after,
body.professional-template .agus-in-view.agus-form-layout>div:first-child::after{transform:scaleX(1);opacity:1}

/* Buttons: glijdende highlight + arrow-feel */
body.professional-template .pro-btn,
body.professional-template .pro-text-link{
  position:relative;overflow:hidden;transition:transform .3s var(--agus-ease),border-color .3s ease,background .3s ease,color .3s ease,box-shadow .3s ease
}
body.professional-template .pro-btn::after{
  content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.18) 50%,transparent 72%);
  transform:translateX(-145%);transition:transform .65s var(--agus-ease);pointer-events:none
}

/* Form fields voelen ook onderdeel van hetzelfde systeem */
body.professional-template .agus-request-form input,
body.professional-template .agus-request-form select,
body.professional-template .agus-request-form textarea{
  transition:border-color .25s ease,box-shadow .25s ease,background .25s ease,transform .25s ease
}
body.professional-template .agus-request-form input:focus,
body.professional-template .agus-request-form select:focus,
body.professional-template .agus-request-form textarea:focus{
  box-shadow:0 0 0 3px rgba(37,216,202,.08),0 12px 30px rgba(0,0,0,.12);
  background:#0a1112
}
body.professional-template .agus-request-form:focus-within{border-color:rgba(37,216,202,.42);box-shadow:0 24px 70px rgba(0,0,0,.2)}

/* Footer krijgt dezelfde levende lijn zonder onrust. */
body.professional-template .pro-footer-column a{position:relative;width:max-content;max-width:100%;transition:color .25s ease,transform .25s var(--agus-ease)}
body.professional-template .pro-footer-column a::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:var(--pro-accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--agus-ease)}

@media (hover:hover) and (pointer:fine){
  body.professional-template .agus-steps>div:hover,
  body.professional-template .agus-service-grid>article:hover,
  body.professional-template .agus-project-split>article:hover,
  body.professional-template .agus-contact-choices>a:hover,
  body.professional-template .pro-stat:hover,
  body.professional-template .pro-release-row:hover{transform:translateY(-6px);background:rgba(37,216,202,.035);box-shadow:0 20px 55px rgba(0,0,0,.18)}
  body.professional-template .agus-steps>div:hover::after,
  body.professional-template .agus-service-grid>article:hover::after,
  body.professional-template .agus-project-split>article:hover::after,
  body.professional-template .agus-contact-choices>a:hover::after,
  body.professional-template .pro-stat:hover::after,
  body.professional-template .pro-release-row:hover::after{width:100%}
  body.professional-template .agus-steps>div:hover::before,
  body.professional-template .agus-service-grid>article:hover::before,
  body.professional-template .agus-project-split>article:hover::before,
  body.professional-template .agus-contact-choices>a:hover::before,
  body.professional-template .pro-stat:hover::before,
  body.professional-template .pro-release-row:hover::before{opacity:.11;transform:scale(1)}
  body.professional-template .pro-btn:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.2)}
  body.professional-template .pro-btn:hover::after{transform:translateX(145%)}
  body.professional-template .pro-text-link:hover{transform:translateX(7px);color:var(--pro-accent)}
  body.professional-template .pro-footer-column a:hover{color:var(--pro-accent);transform:translateX(4px)}
  body.professional-template .pro-footer-column a:hover::after{transform:scaleX(1)}
}

/* Tablet / mobiel: zelfde uitstraling, minder beweging en nette spacing. */
@media(max-width:900px){
  body.professional-template .agus-motion-item{transform:translate3d(0,18px,0)}
  body.professional-template .agus-steps>div,
  body.professional-template .agus-service-grid>article,
  body.professional-template .agus-project-split>article,
  body.professional-template .agus-contact-choices>a{transform:none!important}
}
@media(max-width:600px){
  body.professional-template .agus-motion-item{transform:translate3d(0,14px,0)}
  body.professional-template .pro-release-row{transition-duration:.3s}
}
@media(prefers-reduced-motion:reduce){
  body.professional-template .agus-motion-item{opacity:1!important;transform:none!important;transition:none!important}
  body.professional-template .agus-steps>div::before,
  body.professional-template .agus-service-grid>article::before,
  body.professional-template .agus-project-split>article::before,
  body.professional-template .agus-contact-choices>a::before{display:none!important}
}

/* =========================================================
   AGUS — SAMENWERKINGEN
   ========================================================= */
body.professional-template .collaborations-heading{max-width:760px;margin-bottom:52px}
body.professional-template .collaborations-heading>p:last-child{max-width:680px;color:var(--pro-muted);font-size:1.02rem;line-height:1.75}
body.professional-template .collaborations-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--pro-line);border:1px solid var(--pro-line)}
body.professional-template .collaboration-card{min-height:360px;padding:38px;background:var(--pro-bg);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;isolation:isolate;transition:transform .42s var(--agus-ease),background .35s ease}
body.professional-template .collaboration-card::before{content:"";position:absolute;width:360px;height:360px;right:-230px;bottom:-250px;border-radius:50%;background:var(--pro-accent);filter:blur(100px);opacity:.02;transition:opacity .4s ease,transform .6s var(--agus-ease);z-index:-1}
body.professional-template .collaboration-card-top{display:flex;align-items:center;justify-content:space-between;gap:20px}
body.professional-template .collaboration-number{font-size:.74rem;font-weight:900;letter-spacing:.14em;color:var(--pro-accent)}
body.professional-template .collaboration-type{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--pro-muted)}
body.professional-template .collaboration-card-copy{max-width:520px;padding:58px 0 36px}
body.professional-template .collaboration-card h3,body.professional-template .collaborations-empty h3{margin:0 0 16px;font-size:clamp(1.65rem,3vw,2.45rem);line-height:1.08}
body.professional-template .collaboration-card p,body.professional-template .collaborations-empty>p{color:var(--pro-muted);line-height:1.7}
body.professional-template .collaborations-empty{border:1px solid var(--pro-line);padding:42px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:70px;align-items:end;background:linear-gradient(135deg,rgba(37,216,202,.035),transparent 52%)}
body.professional-template .collaborations-empty .pro-eyebrow{margin-top:58px}
body.professional-template .collaborations-process{border-top:1px solid var(--pro-line)}
@media(hover:hover) and (pointer:fine){body.professional-template .collaboration-card:hover{background:rgba(37,216,202,.03);transform:translateY(-5px)}body.professional-template .collaboration-card:hover::before{opacity:.12;transform:scale(1.08)}}
@media(max-width:900px){body.professional-template .collaborations-grid{grid-template-columns:1fr}body.professional-template .collaborations-empty{grid-template-columns:1fr;gap:24px}body.professional-template .collaborations-empty .pro-eyebrow{margin-top:34px}}
@media(max-width:600px){body.professional-template .collaboration-card,body.professional-template .collaborations-empty{padding:26px 22px}body.professional-template .collaboration-card{min-height:310px}body.professional-template .collaboration-card-copy{padding:44px 0 30px}}

/* Collaboration project logos */
.collaboration-logo-wrap {
  min-height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  margin: 8px 0 24px;
  background: #050505;
  border: 1px solid rgba(255,255,255,.09);
  overflow: hidden;
}
.collaboration-logo {
  display: block;
  width: 100%;
  max-width: 430px;
  max-height: 190px;
  object-fit: contain;
}
@media (max-width: 700px) {
  .collaboration-logo-wrap { min-height: 160px; padding: 18px; }
  .collaboration-logo { max-height: 140px; }
}