/* ==========================================================================
   AMA Group — main stylesheet
   --------------------------------------------------------------------------
   1. Tokens            8. CTA band / footer        15. Contact / inquiry
   2. Base              9. Page heroes              16. Project detail
   3. Layout helpers   10. Project grid             17. Scopes page
   4. Typography       11. Home: hero + stats       18. Legal / 404
   5. Links & rules    12. Home: showcase           19. Animations
   6. Lists            13. Home: build + process    20. Responsive
   7. Header / nav     14. Systems + about
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
    /* Colors (sampled from the client references) */
    --bg:          #010c1c;   /* page background (deep navy) */
    --bg-soft:     #03122a;   /* bands: stats, contact strip, about columns */
    --panel:       #0a1d36;   /* active tab, hover panels */
    --line:        rgba(150, 172, 205, .18);
    --line-strong: rgba(150, 172, 205, .32);
    --text:        #ffffff;
    --text-2:      #cfd6e0;   /* body copy */
    --muted:       #8d99aa;   /* secondary text */
    --accent:      #1e9bef;   /* single accent — change here to switch (teal alt: #17c3d1) */
    --accent-2:    #5cb9f7;   /* accent hover */

    /* Type */
    --font: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
    --fs-body: 1rem;

    /* Spacing */
    --gutter: 48px;                  /* container side padding */
    --container: 1600px;
    --section: clamp(64px, 8vw, 120px);
    --header-h: 84px;

    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* 2. BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text-2);
    font-family: var(--font);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
h1, h2, h3, h4 { margin: 0; color: var(--text); font-weight: 400; line-height: 1.1; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
hr { border: 0; border-top: 1px solid var(--line-strong); margin: 32px 0; max-width: 320px; }
button { font: inherit; color: inherit; cursor: pointer; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--accent); color: #fff; padding: 8px 14px; }
.skip-link:focus { left: 8px; }

/* 3. LAYOUT HELPERS -------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; position: relative; }
.section--tight { padding: clamp(40px, 5vw, 72px) 0; }
.hide-sm { display: inline; }

/* 4. TYPOGRAPHY ------------------------------------------------------------ */
.display {
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: -.005em;
    line-height: 1.02;
    font-size: clamp(2.2rem, 3.6vw, 3.6rem);
}
.display--lg { font-size: clamp(2.5rem, 4.6vw, 4.6rem); }
.display--xl { font-size: clamp(2.6rem, 5.2vw, 5.4rem); }
.section-title { font-size: clamp(1.6rem, 2.2vw, 2.1rem); font-weight: 300; text-transform: uppercase; line-height: 1.15; }
.accent { color: var(--accent); }
.muted { color: var(--muted); }
.small-text { font-size: .9rem; }
.lead { font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.75; color: var(--text-2); max-width: 470px; }
.lead--sm { font-size: 1rem; }

.eyebrow {
    display: block;
    color: var(--accent);
    font-size: .92rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin: 0 0 18px;
}
.eyebrow--white { color: var(--text); }
.eyebrow--rule::after { content: ''; display: block; width: 32px; height: 1px; background: var(--accent); margin-top: 16px; }
.eyebrow--trail::after { content: ''; display: inline-block; vertical-align: middle; width: 20px; height: 1px; background: var(--accent); margin-left: 12px; }
.kicker { font-size: .82rem; letter-spacing: .28em; text-transform: uppercase; color: var(--text-2); margin-bottom: 18px; }
.label { display: block; color: var(--text); text-transform: uppercase; font-weight: 400; letter-spacing: .02em; }
.num-label { display: inline-flex; align-items: center; gap: 12px; color: var(--accent); font-size: .95rem; margin-bottom: 14px; }
.num-label::after { content: ''; width: 28px; height: 1px; background: var(--accent); }

/* 5. LINKS & RULES --------------------------------------------------------- */
.rule { display: block; width: 56px; height: 2px; background: var(--accent); margin: 26px 0; }
.rule--white { width: 44px; height: 1px; background: rgba(255, 255, 255, .7); margin: 18px 0; }

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: var(--accent);
    font-size: .98rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.text-link i { font-size: .95em; transition: transform .3s var(--ease); }
.text-link:hover { color: var(--accent-2); }
.text-link:hover i { transform: translateX(5px); }
.text-link:hover i.arrow-out { transform: rotate(45deg) translate(2px, -2px); }
.text-link--light { color: var(--text); }
.text-link--light i { color: var(--accent); }
.text-link--light:hover { color: var(--accent); }
.text-link--lg { font-size: 1.12rem; }
.text-link--xl { font-size: 1.35rem; }
.text-link--line::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); min-width: 120px; margin-left: 16px; }
.text-link--topline { position: relative; }
.text-link--topline::before { content: ''; position: absolute; left: 0; top: -14px; width: 26px; height: 2px; background: var(--accent); }
.arrow-out { transform: rotate(45deg); }
.btn-reset { background: none; border: 0; padding: 0; }

.round-btn {
    width: 58px; height: 58px; border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .85);
    background: rgba(1, 12, 28, .25);
    color: #fff; font-size: 1.1rem;
    display: grid; place-items: center;
    transition: background .25s, border-color .25s;
}
.round-btn:hover { background: var(--accent); border-color: var(--accent); }

/* 6. LISTS ----------------------------------------------------------------- */
.dash-list li { position: relative; padding-left: 32px; margin-bottom: 10px; color: var(--text); font-size: .98rem; line-height: 1.4; }
.dash-list li::before { content: ''; position: absolute; left: 0; top: .7em; width: 16px; height: 1px; background: var(--accent); }
.dash-list--cols { columns: 2; column-gap: 32px; }
.dash-list--cols li { break-inside: avoid; }

.tag-row { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .8rem; letter-spacing: .26em; text-transform: uppercase; color: var(--text-2); }
.tag-row li { display: inline-flex; align-items: center; gap: 22px; }
.tag-row li + li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }

.icon-list li { display: flex; gap: 22px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.icon-list li:last-child { border-bottom: 0; }
.icon-list i { width: 32px; font-size: 1.55rem; color: var(--accent); text-align: center; flex: none; }
.icon-list a:not(.label) { color: var(--text-2); font-size: .95rem; word-spacing: .15em; }
.icon-list a:hover { color: var(--accent); }

.icon-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 26px; }
.icon-steps li { text-align: center; padding: 0 10px; border-left: 1px solid var(--line); font-size: .9rem; color: var(--text-2); line-height: 1.4; }
.icon-steps li:first-child { border-left: 0; }
.icon-steps i { display: block; font-size: 1.9rem; color: var(--text); opacity: .85; margin-bottom: 14px; }
.icon-steps--sm { grid-template-columns: repeat(3, 1fr); max-width: 420px; }
.icon-steps--sm li { font-size: .74rem; text-transform: uppercase; letter-spacing: .02em; }
.icon-steps--sm i { font-size: 1.4rem; color: var(--accent); }

/* 7. HEADER / NAV ---------------------------------------------------------- */
.site-header { position: relative; z-index: 50; border-bottom: 1px solid var(--line); background: var(--bg); }
.page-home .site-header { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom: 0; }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 32px; }
.logo img { height: 46px; width: auto; }
.main-nav { display: flex; align-items: center; gap: clamp(28px, 5vw, 96px); }
.main-nav ul { display: flex; gap: clamp(24px, 3.4vw, 64px); }
.main-nav ul a {
    position: relative; display: block; padding: 8px 0;
    color: var(--text); font-size: .95rem; font-weight: 400; text-transform: uppercase; letter-spacing: .03em;
}
.main-nav ul a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    background: var(--accent); transform: scaleX(0); transition: transform .3s var(--ease);
}
.main-nav ul a:hover::after, .main-nav ul a.is-active::after { transform: scaleX(1); }
.nav-inquiry { display: inline-flex; align-items: center; gap: 12px; color: var(--accent); font-size: .95rem; font-weight: 400; text-transform: uppercase; letter-spacing: .03em; }
.nav-inquiry:hover { color: var(--accent-2); }

.nav-toggle { display: none; width: 44px; height: 44px; background: none; border: 0; position: relative; z-index: 60; }
.nav-toggle span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: #fff; transition: transform .3s, opacity .3s; }
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* 8. CTA BAND / FOOTER ----------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-strong); }
.cta-band__art { position: absolute; right: 2%; bottom: 0; height: 100%; width: auto; max-width: 48%; object-fit: cover; object-position: left bottom; opacity: .9; pointer-events: none; }
.cta-band__inner { position: relative; padding-top: clamp(56px, 7vw, 120px); padding-bottom: clamp(44px, 4vw, 48px); }
.cta-band__title { font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight: 400; text-transform: uppercase; }
.cta-band__sub { font-size: clamp(1.05rem, 1.4vw, 1.4rem); text-transform: uppercase; color: var(--text); margin: 10px 0 44px; }
.cta-band .text-link { width: min(820px, 100%); }

.site-footer { position: relative; overflow: hidden; }
.footer-main { display: grid; grid-template-columns: 250px 1fr 420px; position: relative; padding-top: 56px; padding-bottom: 40px; }
.footer-main::before {
    content: ''; position: absolute; left: var(--gutter); right: 440px; bottom: 0; height: 230px;
    background: url('../img/common/footer-profiles.jpg') left bottom / contain no-repeat; opacity: .75; pointer-events: none;
    z-index: 0;
}
/* Footer content always sits above the decorative drawing */
.footer-brand, .footer-nav, .footer-contact { position: relative; z-index: 1; }
.footer-brand { padding: 60px 40px 0 0; border-right: 1px solid var(--line-strong); position: relative; }
.footer-brand .logo img { height: 74px; }
.footer-nav { padding: 70px 48px 200px; border-right: 1px solid var(--line-strong); position: relative; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding: 0 24px 22px; position: relative; border-bottom: 1px solid var(--line-strong); margin-bottom: 26px; }
.footer-links::before { content: ''; position: absolute; left: -2px; bottom: -3px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.footer-links a { color: var(--text); text-transform: uppercase; font-size: 1.02rem; font-weight: 400; }
.footer-links a:hover { color: var(--accent); }
.footer-nav .tag-row { justify-content: space-between; padding-left: 8px; }
.footer-contact { padding: 10px 0 0 60px; }
.footer-contact .eyebrow { font-size: 1rem; }
.footer-bottom { border-top: 1px solid var(--line-strong); }
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; padding-top: 30px; padding-bottom: 30px; color: var(--text); text-transform: uppercase; font-size: .98rem; }
.footer-bottom-inner p { margin: 0; }

/* 9. PAGE HEROES (inner pages) --------------------------------------------- */
.page-hero { position: relative; overflow: hidden; }
.page-hero__inner { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(36px, 4vw, 56px); }
.page-hero__inner > div:first-child { max-width: 680px; }
.page-hero--media { min-height: clamp(460px, 44vw, 600px); display: flex; align-items: center; }
.page-hero--media .page-hero__inner { align-items: center; }
.page-hero--media .page-hero__inner > div:first-child { max-width: 800px; }
.page-hero--media .display--lg { font-size: clamp(2.3rem, 3.8vw, 3.9rem); }
.page-hero--tall { min-height: clamp(520px, 50vw, 680px); }
.page-hero__media { position: absolute; inset: 0 0 0 38%; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, rgba(1, 12, 28, .75) 22%, rgba(1, 12, 28, .15) 60%, rgba(1, 12, 28, 0) 100%), linear-gradient(0deg, var(--bg) 0%, rgba(1, 12, 28, 0) 22%); }
.page-hero__wire { position: absolute; left: 40%; top: 10px; width: min(620px, 42%); opacity: .95; pointer-events: none; }
.side-note { border-left: 1.5px solid var(--accent); padding-left: 22px; font-size: .82rem; line-height: 1.9; text-transform: uppercase; color: var(--text); margin-bottom: 70px; }
.stat-row { display: flex; margin-top: 44px; }
.stat-row > div { padding: 0 46px; border-left: 1px solid var(--line-strong); }
.stat-row > div:first-child { padding-left: 0; border-left: 0; }
.stat-row strong { display: block; font-size: clamp(2rem, 2.6vw, 2.5rem); font-weight: 300; color: var(--text); line-height: 1; margin-bottom: 14px; }
.stat-row span { text-transform: uppercase; font-size: .82rem; line-height: 1.6; color: var(--text); display: block; }

/* 10. PROJECT GRID --------------------------------------------------------- */
.project-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(220px, 20vw, 310px); gap: 10px; }
.project-grid .project-tile:first-child { grid-column: span 2; }
.project-grid .project-tile:nth-child(8), .project-grid .project-tile:nth-child(9) { grid-column: span 2; }
.project-tile a { position: relative; display: block; height: 100%; overflow: hidden; background: var(--panel); }
.project-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.project-tile a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(1, 12, 28, .88) 0%, rgba(1, 12, 28, .15) 45%, rgba(1, 12, 28, 0) 70%); }
.project-tile a:hover img { transform: scale(1.05); }
.project-tile__caption { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2; }
.project-tile__title { display: block; color: var(--text); text-transform: uppercase; font-size: clamp(1rem, 1.3vw, 1.3rem); font-weight: 400; line-height: 1.2; }
.project-tile__loc { display: block; color: var(--text-2); text-transform: uppercase; font-size: .78rem; letter-spacing: .04em; margin-top: 8px; }
.project-tile a:hover .project-tile__title { color: var(--accent); }

/* 11. HOME: HERO + STATS --------------------------------------------------- */
.hero--home { position: relative; min-height: clamp(600px, 78vh, 820px); display: flex; align-items: center; overflow: hidden; }
.hero__media { position: absolute; inset: 0 0 0 36%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, rgba(1, 12, 28, .6) 25%, rgba(1, 12, 28, 0) 60%); }
.hero__content { position: relative; z-index: 2; padding-top: calc(var(--header-h) + 40px); padding-bottom: 60px; }
.hero__content .rule { width: 84px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 20px 64px; margin-top: 52px; }

.stats-bar { background: var(--bg-soft); border-top: 1px solid var(--line-strong); }
.stats-bar__inner { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 64px; padding-bottom: 64px; max-width: 1280px; }
.stat { display: flex; align-items: center; justify-content: center; gap: 30px; border-left: 1px solid var(--line-strong); }
.stat:first-child { border-left: 0; }
.stat i { font-size: 2.2rem; color: var(--accent); }
.stat strong { display: block; text-transform: uppercase; color: var(--text); font-size: clamp(1.6rem, 2.2vw, 2.1rem); font-weight: 400; line-height: 1.1; }
.stat span { display: block; color: var(--text); text-transform: uppercase; font-size: 1rem; margin-top: 6px; }

/* 12. HOME: SHOWCASE (selected projects slider) ---------------------------- */
.showcase { position: relative; overflow: hidden; min-height: clamp(620px, 52vw, 820px); display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.showcase__media { position: absolute; inset: 0 0 0 16%; }
.showcase__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s var(--ease), transform 6s linear; transform: scale(1.04); }
.showcase__img.is-active { opacity: 1; transform: scale(1); }
.showcase__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, rgba(1, 12, 28, .88) 22%, rgba(1, 12, 28, .45) 48%, rgba(1, 12, 28, .08) 75%), linear-gradient(0deg, rgba(1, 12, 28, .8) 0%, rgba(1, 12, 28, 0) 25%); }
.showcase__inner { position: relative; z-index: 2; flex: 1; display: grid; grid-template-columns: 300px 1fr auto; gap: 60px; align-items: center; padding-top: 56px; padding-bottom: 40px; }
.showcase__list { align-self: start; }
.showcase__list .rule { width: 40px; margin: 22px 0 44px; }
.showcase__list button { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; padding: 0; margin-bottom: 30px; color: var(--text); text-transform: uppercase; font-size: 1rem; text-align: left; transition: color .25s; }
.showcase__list button::after { content: ''; width: 30px; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease); }
.showcase__list button:hover, .showcase__list button.is-active { color: var(--accent); }
.showcase__list button.is-active::after { transform: scaleX(1); }
.showcase__panels { position: relative; min-height: 340px; }
.showcase__panel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease), visibility .6s; }
.showcase__panel.is-active { opacity: 1; visibility: visible; transform: none; }
.showcase__panel .display { font-size: clamp(2rem, 3vw, 3rem); }
.showcase__loc { color: var(--text); text-transform: uppercase; font-size: 1.25rem; margin: 10px 0 0; }
.showcase__panel .rule { width: 54px; }
.showcase__text { color: var(--text); font-size: 1.2rem; max-width: 300px; line-height: 1.6; margin-bottom: 40px; }
.showcase__panel .text-link { font-size: 1.1rem; }
.showcase__arrows { display: flex; flex-direction: column; gap: 20px; }
.showcase__foot { position: relative; z-index: 2; display: flex; justify-content: flex-end; padding-bottom: 36px; }
.showcase__foot::before { content: ''; position: absolute; left: var(--gutter); right: 260px; top: -10px; height: 1px; background: var(--line-strong); }

/* 13. HOME: BUILD + PROCESS ------------------------------------------------ */
.build { border-top: 1px solid var(--line-strong); }
.build__grid { display: grid; grid-template-columns: minmax(280px, 1fr) 3.2fr; }
.build__intro { padding-right: 40px; }
.build__intro .display { line-height: .98; }
.build__intro .lead { margin-bottom: 44px; }
.build__scopes { display: grid; grid-template-columns: 1.3fr 1fr 1fr; border-left: 1px solid var(--line-strong); }
.scope-card { display: block; padding: 34px 32px 40px; }
.scope-card:nth-child(n + 4) { border-top: 1px solid var(--line-strong); }
.scope-card h3 { font-size: clamp(1.4rem, 2vw, 1.95rem); font-weight: 500; text-transform: uppercase; line-height: 1.12; transition: color .25s; display: flex; align-items: center; gap: 24px; }
.scope-card p { color: var(--text-2); font-size: 1.05rem; line-height: 1.6; margin: 0; max-width: 320px; }
.scope-card:hover h3, .scope-card.is-open h3 { color: var(--accent); }
.scope-card.is-open .rule--white { display: none; }
.scope-card.is-open p { margin-top: 18px; }
.scope-card__arrow { display: inline-block; width: 140px; height: 1.5px; background: var(--accent); position: relative; }
.scope-card__arrow::after { content: ''; position: absolute; right: 0; top: -5px; width: 10px; height: 10px; border-top: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent); transform: rotate(45deg); }
.scope-card .dash-list { margin-top: 32px; }
.scope-card .dash-list li { font-size: .9rem; margin-bottom: 14px; color: var(--text-2); }
.scope-card--bespoke { grid-column: span 2; }
.scope-card--cta { border-left: 1px solid var(--accent); margin: 28px 0 0; padding: 12px 0 12px 54px; }
.scope-card--cta h3 { font-size: 1.45rem; }
.scope-card--cta p { margin: 18px 0 32px; }

.process { overflow: hidden; border-top: 1px solid var(--line-strong); min-height: 860px; }
.process__bg { position: absolute; right: 0; bottom: 0; width: 76%; height: 44%; object-fit: cover; object-position: left top; opacity: .9; -webkit-mask-image: linear-gradient(0deg, #000 60%, transparent), linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(180deg, transparent 0%, #000 40%); pointer-events: none; }
.process__inner { position: relative; display: grid; grid-template-columns: minmax(300px, 1fr) 3fr; column-gap: 40px; }
.process__intro .rule { width: 56px; margin: 34px 0; }
.process__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; counter-reset: step; }
.process__step:nth-child(1) { padding-top: 290px; }
.process__step:nth-child(2) { padding-top: 236px; }
.process__step:nth-child(3) { padding-top: 132px; }
.process__step:nth-child(4) { padding-top: 26px; }
.process__step .num { display: inline-flex; align-items: center; gap: 14px; color: var(--accent); font-size: .95rem; margin-bottom: 16px; }
.process__step .num::after { content: ''; width: 36px; height: 1.5px; background: var(--accent); }
.process__step h3 { font-size: clamp(1.25rem, 1.8vw, 1.8rem); font-weight: 500; text-transform: uppercase; line-height: 1.18; margin-bottom: 22px; }
.process__step p { color: var(--text-2); font-size: 1.05rem; line-height: 1.6; max-width: 240px; }
.process__quote { grid-column: 1; margin: 60px 0 0 46px; padding: 18px 0 18px 26px; border-left: 1.5px solid var(--accent); }
.process__quote p { color: var(--text); text-transform: uppercase; font-size: 1.25rem; margin-bottom: 8px; }
.process__quote small { color: var(--text-2); font-size: .98rem; }

/* 14. SYSTEMS + ABOUT ------------------------------------------------------ */
.systems { padding-top: 10px; }
.tabs { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line-strong); }
.tab { position: relative; height: 84px; display: grid; place-items: center; background: transparent; border: 0; border-left: 1px solid var(--line); transition: background .25s; }
.tab:first-child { border-left: 0; }
.tab img { max-height: 48px; max-width: 72%; opacity: .88; transition: opacity .25s; }
.tab:hover { background: rgba(10, 29, 54, .55); }
.tab:hover img, .tab.is-active img { opacity: 1; }
.tab.is-active { background: var(--panel); }
.tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--accent); }
.tab-panel { display: none; grid-template-columns: 1fr 1fr 1.55fr 1fr; border: 1px solid var(--line-strong); border-top: 0; padding: 36px 0; }
.tab-panel.is-active { display: grid; animation: fadeUp .5s var(--ease); }
.system-col { padding: 0 36px; border-left: 1px solid var(--line-strong); }
.system-col:first-child { border-left: 0; }
.system-col h2 { font-size: 2rem; font-weight: 300; text-transform: uppercase; margin-bottom: 24px; }
.system-col p { font-size: .95rem; color: var(--text); line-height: 1.75; }
.system-col .dash-list li { font-size: .92rem; margin-bottom: 16px; }
.system-col--current .current-title { font-size: 1.25rem; color: var(--text); margin-bottom: 8px; }
.system-col--current .text-link { margin-bottom: 20px; font-size: .9rem; }


.about-cols { background: var(--bg-soft); border-top: 1px solid var(--line-strong); }
.about-cols__grid { display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 40px; padding-bottom: 36px; }
.about-col { padding: 0 44px; border-left: 1px solid var(--line-strong); display: flex; flex-direction: column; }
.about-col:first-child { padding-left: 0; border-left: 0; }
.about-col h2 { font-size: 1.45rem; font-weight: 400; text-transform: uppercase; line-height: 1.25; padding-top: 22px; position: relative; }
.about-col h2::before { content: ''; position: absolute; top: 0; left: 0; width: 22px; height: 1.5px; background: var(--accent); }
.about-col h2::after { content: ''; display: block; width: 22px; height: 1px; background: rgba(255, 255, 255, .7); margin: 14px 0 18px; }
.about-col p { color: var(--text); font-size: .98rem; line-height: 1.7; }
.about-col .text-link { margin-top: auto; padding-top: 16px; }

.cta-split { border-top: 1px solid var(--line-strong); }
.cta-split__grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; align-items: center; gap: 40px; padding-top: 34px; padding-bottom: 34px; }
.cta-split__title { font-size: clamp(1.5rem, 2vw, 1.9rem); font-weight: 300; text-transform: uppercase; line-height: 1.3; }
.cta-split p { color: var(--text); margin: 0; max-width: 300px; }
.cta-split .text-link { justify-self: stretch; padding: 22px 0 22px 56px; border-left: 1px solid var(--line-strong); }

.process-table { border-top: 0; margin-bottom: 36px; }
.process-table__row { display: grid; grid-template-columns: 126px 380px 1fr; align-items: center; padding: 30px 0; position: relative; }
.process-table__row + .process-table__row::before { content: ''; position: absolute; left: 126px; right: 0; top: 0; height: 1px; background: var(--line-strong); }
.process-table__num { font-size: 1.4rem; color: var(--text); font-weight: 300; }
.process-table__row.is-first .process-table__num { color: var(--accent); }
.process-table__title { font-size: 1.35rem; font-weight: 300; text-transform: uppercase; letter-spacing: .03em; line-height: 1.3; }
.process-table__items { display: grid; grid-template-columns: repeat(4, 1fr); }
.process-table__items li { padding: 2px 26px; border-left: 1px solid var(--line-strong); color: var(--text); font-size: .98rem; }
.process-table__items li:first-child { border-left: 0; padding-left: 0; }

/* 15. CONTACT / INQUIRY ---------------------------------------------------- */
.inquiry { position: relative; overflow: hidden; }
.inquiry__media { position: absolute; top: 0; bottom: 0; right: 0; width: 33%; }
.inquiry__media img { width: 100%; height: 100%; object-fit: cover; }
.inquiry__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, rgba(1, 12, 28, .35) 30%, rgba(1, 12, 28, 0) 60%); }
.inquiry__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, .9fr); gap: 56px; padding-top: 40px; padding-bottom: 72px; }
.inquiry__intro { padding-top: 38px; }
.inquiry__intro .lead { font-size: 1.1rem; }
.inquiry__intro .display { font-size: clamp(2.2rem, 3.3vw, 3.4rem); }
.field input { padding: 6px 0 10px; }
.field { margin-bottom: 22px; }
.inquiry-form { max-width: 560px; }
.form-legend { display: block; padding: 0; margin: 0 0 32px; color: var(--text); text-transform: uppercase; font-size: .95rem; font-weight: 400; position: relative; }
.form-legend::after { content: ''; position: absolute; left: 0; bottom: -12px; width: 34px; height: 1.5px; background: var(--accent); }
.form-legend--plain::after { display: none; }
.form-legend--plain { margin-bottom: 18px; }
.inquiry-form fieldset { margin-bottom: 40px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.field { display: block; margin-bottom: 26px; }
.field > span { display: block; color: var(--text); font-size: .95rem; font-weight: 400; margin-bottom: 4px; }
.field > span i { color: var(--accent); font-style: normal; }
.field input, .field textarea {
    width: 100%; background: transparent; color: var(--text); font: inherit; font-size: 1rem;
    border: 0; border-bottom: 1px solid var(--line-strong); padding: 10px 0; border-radius: 0; outline: 0; transition: border-color .25s;
}
.field textarea { border: 1px solid var(--line-strong); padding: 12px 14px; margin-top: 14px; min-height: 96px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--accent); }
.field.has-error input, .field.has-error textarea, .dropzone.has-error { border-color: #ff6b6b; }
.field-error { display: block; color: #ff8a8a; font-size: .85rem; margin-top: 6px; }
.dropzone { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 24px; align-items: center; padding: 22px 28px; border: 1px dashed rgba(200, 212, 230, .55); cursor: pointer; transition: border-color .25s, background .25s; }
.dropzone:hover, .dropzone.is-drag { border-color: var(--accent); background: rgba(30, 155, 239, .05); }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone__icon { width: 48px; height: 50px; border: 1px solid var(--accent); display: grid; place-items: center; color: var(--accent); font-size: 1.2rem; }
.dropzone__text strong { display: block; font-weight: 400; color: var(--text); font-size: 1.2rem; }
.dropzone__text span { color: var(--text-2); font-size: 1.05rem; }
.dropzone__types { grid-column: 1 / -1; margin-top: 22px; font-size: .8rem; letter-spacing: .03em; text-transform: uppercase; color: var(--text); }
.dropzone__types b { color: var(--muted); margin: 0 10px; font-weight: 400; }
.dropzone__files { grid-column: 1 / -1; font-size: .85rem; color: var(--accent); }
.dropzone__files:not(:empty) { margin-top: 12px; }
.form-note { color: var(--text); margin-top: 22px; }
.form-note--small { font-size: .85rem; color: var(--muted); margin-top: 10px; }
.form-note b { margin: 0 6px; font-weight: 400; }
.form-alert { display: flex; gap: 16px; align-items: flex-start; padding: 18px 22px; margin-bottom: 36px; border: 1px solid; }
.form-alert--ok { border-color: var(--accent); color: var(--text); background: rgba(30, 155, 239, .08); }
.form-alert--ok i { color: var(--accent); font-size: 1.4rem; }
.form-alert--error { border-color: #ff6b6b; color: #ffb3b3; background: rgba(255, 107, 107, .07); }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* 16. PROJECT DETAIL ------------------------------------------------------- */
.project-hero { padding-bottom: 10px; }
.project-hero__grid { display: grid; grid-template-columns: minmax(300px, 27%) 1fr; gap: 24px; }
.page-project .project-hero .container { padding-right: 0; }
.project-aside { padding: 60px 30px 30px 0; }
.project-aside hr { margin: 30px 0; }
.project-aside .eyebrow { font-size: .85rem; }
.project-aside .eyebrow--rule::after { width: 26px; }
.project-aside > .eyebrow:not(.eyebrow--rule) { margin: 28px 0 18px; }
.project-title { font-size: clamp(2.1rem, 3.4vw, 3.3rem); font-weight: 300; text-transform: uppercase; line-height: 1.08; margin: 8px 0 18px; }
.project-meta { color: var(--text); text-transform: uppercase; font-size: 1.05rem; line-height: 1.75; margin: 0; }
.project-partner { text-transform: uppercase; font-size: 1.05rem; margin: 26px 0 16px; }
.project-partner-sub { color: var(--text); text-transform: uppercase; font-size: 1.15rem; line-height: 1.35; }
.project-field { margin-bottom: 26px; }
.project-field .label { font-size: .75rem; color: var(--text-2); margin-bottom: 4px; }
.project-field .value { display: inline-block; color: var(--text); font-size: 1.1rem; text-transform: uppercase; }
.project-field .value.accent { color: var(--accent); }
.project-field a.value:hover { color: var(--accent); }
.project-field::after { content: ''; display: block; width: 26px; height: 1.5px; background: var(--accent); margin-top: 12px; }
.project-aside .dash-list li { font-size: .95rem; margin-bottom: 14px; }
.project-hero__media { margin: 0; height: 100%; min-height: 420px; max-height: 780px; overflow: hidden; background: var(--panel); }
.project-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.project-hero__stack { display: flex; flex-direction: column; gap: 10px; }
.project-hero__stack .project-hero__media { flex: 1; height: auto; }

.gallery-row { display: grid; gap: 10px; margin-top: 10px; }
.gallery-row img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; background: var(--panel); }
.gallery-row--3 { grid-template-columns: 0.75fr 1fr 1.05fr; }
.gallery-row--3 img { aspect-ratio: auto; height: clamp(200px, 20vw, 340px); }
.gallery-row--4 { grid-template-columns: repeat(4, 1fr); }
.gallery-row--offset { margin-left: 18%; }
.gallery-row--captions { grid-template-columns: 1.55fr 1fr 1fr; }
.gallery-row--captions figure { margin: 0; }
.gallery-row--captions img { aspect-ratio: auto; height: clamp(220px, 22vw, 340px); }
.gallery-row--captions figcaption { color: var(--text); text-transform: uppercase; font-size: 1rem; margin-top: 12px; }
.gallery-row--captions figcaption::after { content: ''; display: block; width: 26px; height: 1.5px; background: var(--accent); margin-top: 10px; }

.feature-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.feature-block { display: grid; grid-template-columns: 190px 1fr; gap: 30px; align-items: start; }
.feature-block--wide { grid-template-columns: minmax(240px, 22%) 1fr; }
.feature-block--wide .gallery-row { margin-top: 0; }
.feature-block__text { padding-top: 30px; }
.feature-block__text h2 { font-size: 1.2rem; font-weight: 400; text-transform: uppercase; line-height: 1.3; }
.feature-block--wide .feature-block__text h2 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); font-weight: 300; }
.feature-block__text .rule { width: 28px; height: 1.5px; margin: 20px 0; }
.feature-block__text p { font-size: .9rem; color: var(--text-2); line-height: 1.7; }
.img-cluster { display: grid; gap: 10px; }
.img-cluster img { width: 100%; height: 100%; object-fit: cover; }
.img-cluster--1-2 { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, clamp(150px, 11vw, 190px)); }
.img-cluster--1-2 img:first-child { grid-row: span 2; }

.feature-cards { display: grid; }
.feature-cards--3 { grid-template-columns: repeat(3, 1fr); }
.feature-card { padding: 4px 32px 10px; border-left: 1px solid var(--line-strong); position: relative; }
.feature-card h3 { font-size: 1.15rem; font-weight: 400; text-transform: uppercase; line-height: 1.3; margin-bottom: 18px; }
.feature-card p { font-size: .88rem; color: var(--text-2); line-height: 1.75; }
.feature-card__icon { display: block; margin-top: 26px; font-size: 2.6rem; color: var(--accent); opacity: .6; }
.feature-cards--drawings .feature-card { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.feature-cards--drawings .feature-card > *:not(img) { grid-column: 1; }
.feature-cards--drawings .feature-card img { grid-column: 2; grid-row: 1 / span 3; width: 100%; max-width: 170px; align-self: start; }

.villa-grid { display: grid; grid-template-columns: minmax(260px, 1fr) 3fr; row-gap: 56px; }
.villa-grid__intro { padding-right: 32px; }
.villa-grid__intro p { font-size: .98rem; }
.bespoke-feature { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; border-top: 1px solid var(--line-strong); padding-top: 48px; }
.bespoke-feature h3 { font-size: 1.5rem; font-weight: 400; text-transform: uppercase; line-height: 1.25; margin-bottom: 20px; }
.bespoke-feature p { font-size: .95rem; max-width: 420px; }
.bespoke-feature img { width: 100%; max-height: 380px; object-fit: cover; }

.story-grid { display: grid; grid-template-columns: minmax(280px, 1fr) 2.6fr; gap: 20px; }
.story-grid__intro { padding-right: 40px; }
.story-grid__intro .section-title { font-size: 1.45rem; font-weight: 400; }
.story-grid__intro .rule { width: 32px; height: 1.5px; margin: 20px 0; }
.story-grid__intro p { color: var(--text); font-size: .95rem; line-height: 1.75; }
.statement { font-size: 1.25rem !important; text-transform: uppercase; letter-spacing: .06em; line-height: 1.5 !important; }

.project-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-top: 30px; padding-bottom: 30px; margin-top: 30px; position: relative; }
.project-pager::before { content: ''; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--line-strong); }
.project-pager a { display: inline-flex; align-items: center; gap: 18px; color: var(--text); text-transform: uppercase; font-size: .95rem; }
.project-pager a i { color: var(--accent); font-size: 1.1rem; transition: transform .3s var(--ease); }
.project-pager .pager-all { color: var(--accent); }
.project-pager .pager-all i { font-size: 1.3rem; }
.project-pager .pager-next { justify-self: end; text-align: right; }
.project-pager .pager-prev:hover i { transform: translateX(-5px); }
.project-pager .pager-next:hover i { transform: translateX(5px); }
.project-pager a:hover { color: var(--accent); }
.pager-credit { font-size: .85rem !important; line-height: 1.6; }

.coming-soon { border: 1px dashed var(--line-strong); padding: 40px; text-align: center; }
.coming-soon .eyebrow { margin-bottom: 10px; }
.coming-soon p { color: var(--text-2); margin: 0; }

/* 17. SCOPES PAGE ---------------------------------------------------------- */
.scope-index { display: grid; grid-template-columns: repeat(2, auto); gap: 8px 48px; margin-bottom: 8px; }
.scope-index a { color: var(--text); text-transform: uppercase; font-size: .9rem; display: flex; gap: 14px; }
.scope-index a span { color: var(--accent); }
.scope-index a:hover { color: var(--accent); }
.scope-row { display: grid; grid-template-columns: 90px 1.1fr 1.2fr .9fr; gap: 32px; padding: 48px 0; border-top: 1px solid var(--line-strong); scroll-margin-top: 20px; }
.scope-row__num { color: var(--accent); font-size: 1.3rem; }
.scope-row__head h2 { font-size: clamp(1.5rem, 2.2vw, 2.1rem); font-weight: 500; text-transform: uppercase; }
.scope-row__head p { font-size: 1.02rem; max-width: 420px; }
.scope-row__items { padding-top: 8px; }
.scope-row__projects { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.scope-row__projects .label { font-size: .8rem; color: var(--muted); letter-spacing: .1em; margin-bottom: 6px; }
.scope-row__projects a:not(.text-link) { color: var(--text); font-size: .95rem; display: inline-flex; gap: 12px; align-items: center; }
.scope-row__projects a:not(.text-link) i { color: var(--accent); font-size: .85em; }
.scope-row__projects a:not(.text-link):hover { color: var(--accent); }
.scope-row--cta .scope-row__num { font-size: 1.8rem; line-height: 1; }
.scope-row--cta .scope-row__projects { grid-column: 3 / -1; justify-content: center; }
.scope-row:target .scope-row__head h2 { color: var(--accent); }

/* 18. LEGAL / 404 ---------------------------------------------------------- */
.prose { max-width: 860px; }
.prose h2 { font-size: 1.25rem; font-weight: 400; text-transform: uppercase; margin: 44px 0 16px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--text-2); }
.prose .dash-list li { color: var(--text-2); }
.prose a { color: var(--accent); }
.page-hero--404 { min-height: 70vh; display: flex; align-items: center; }
.page-hero--404 .page-hero__wire { top: 50%; transform: translateY(-50%); }

/* 19. ANIMATIONS ----------------------------------------------------------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .js .reveal { opacity: 1; transform: none; }
}

/* 20. RESPONSIVE ----------------------------------------------------------- */
@media (max-width: 1400px) {
    .footer-main { grid-template-columns: 210px 1fr 360px; }
    .footer-main::before { right: 380px; }
    .footer-contact { padding-left: 40px; }
    .footer-nav { padding-left: 32px; padding-right: 32px; }
    .tab-panel { grid-template-columns: 1fr 1fr 1.5fr; row-gap: 36px; }
    .system-col--current { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line-strong); padding-top: 30px; }
    .process-table__row { grid-template-columns: 90px 300px 1fr; }
    .process-table__row + .process-table__row::before { left: 90px; }
    .feature-pair { grid-template-columns: 1fr; }
}

@media (max-width: 1200px) {
    :root { --gutter: 32px; }
    .main-nav ul { gap: 28px; }
    .build__grid { grid-template-columns: 1fr; row-gap: 48px; }
    .build__scopes { border-left: 0; }
    .scope-card:nth-child(3n + 1) { padding-left: 0; }
    .scope-card--cta { padding-left: 40px !important; }
    .process__inner { grid-template-columns: 1fr; }
    .process__steps { margin-top: 56px; }
    .process__step:nth-child(n) { padding-top: 0; }
    .process__quote { margin-left: 0; }
    .process { min-height: 0; }
    .about-cols__grid { grid-template-columns: 1fr 1fr; row-gap: 44px; }
    .about-col:nth-child(3) { padding-left: 0; border-left: 0; }
    .cta-split__grid { grid-template-columns: 1fr 1fr; }
    .cta-split .text-link { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line-strong); padding: 26px 0 0; }
    .villa-grid, .story-grid { grid-template-columns: 1fr; row-gap: 44px; }
    .villa-grid__intro, .story-grid__intro { padding-right: 0; max-width: 640px; }
    .feature-card:first-child { border-left: 0; padding-left: 0; }
    .scope-row { grid-template-columns: 60px 1fr 1fr; }
    .scope-row__projects { grid-column: 2 / -1; flex-direction: row; flex-wrap: wrap; gap: 10px 28px; align-items: center; }
    .scope-row__projects .label { width: 100%; margin: 0; }
    .scope-row--cta .scope-row__projects { grid-column: 2 / -1; }
}

@media (max-width: 1024px) {
    :root { --header-h: 72px; }
    .logo img { height: 40px; }
    .nav-toggle { display: block; }
    .main-nav {
        position: fixed; inset: 0; z-index: 55; background: rgba(1, 12, 28, .98);
        flex-direction: column; justify-content: center; align-items: flex-start; gap: 40px;
        padding: 100px var(--gutter) 40px;
        opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s;
    }
    .nav-open .main-nav { opacity: 1; visibility: visible; }
    .nav-open { overflow: hidden; }
    .main-nav ul { flex-direction: column; gap: 20px; }
    .main-nav ul a { font-size: 1.7rem; font-weight: 300; }
    .nav-inquiry { font-size: 1.1rem; }

    .hero__media, .page-hero__media { inset: 0 0 0 20%; }
    .stats-bar__inner { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; padding-bottom: 40px; }
    .stat { justify-content: flex-start; border-left: 0; }

    .showcase__inner { grid-template-columns: 1fr; row-gap: 30px; }
    .showcase__text { max-width: 520px; }
    .showcase__list { grid-column: 1 / -1; }
    .showcase__list ul { display: flex; flex-wrap: wrap; gap: 12px 26px; }
    .showcase__list button { margin: 0; width: auto; gap: 10px; font-size: .88rem; }
    .showcase__list .rule { margin-bottom: 26px; }
    .showcase__arrows { flex-direction: row; justify-self: start; }
    .showcase__media { inset: 0; }
    .showcase__foot::before { right: 230px; }

    .process__steps { grid-template-columns: 1fr 1fr; row-gap: 44px; }

    .project-grid { grid-template-columns: repeat(2, 1fr); }
    .project-grid .project-tile:first-child, .project-grid .project-tile:nth-child(8), .project-grid .project-tile:nth-child(9) { grid-column: span 2; }
    .page-hero__inner { flex-direction: column; align-items: flex-start; }
    .page-hero__wire { left: 45%; width: 55%; }
    .side-note { margin: 0; }

    .footer-main { grid-template-columns: 1fr 1fr; row-gap: 40px; }
    /* Tablet/mobile: drawing lives only inside the nav block (never behind the contact list) */
    .footer-main::before { display: none; }
    .footer-nav::after {
        content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: -1;
        background: url('../img/common/footer-profiles.jpg') left bottom / contain no-repeat; opacity: .75; pointer-events: none;
    }
    .footer-brand { border-right: 0; padding: 0; }
    .footer-nav { grid-column: 1 / -1; grid-row: 2; border-right: 0; padding: 0 0 180px; }
    .footer-contact { grid-column: 2; grid-row: 1; padding: 0; }

    .tabs { grid-template-columns: repeat(5, minmax(120px, 1fr)); overflow-x: auto; scrollbar-width: none; }
    .tab-panel { grid-template-columns: 1fr 1fr; }
    .system-col--how { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line-strong); padding-top: 30px; }

    .inquiry__grid { grid-template-columns: 1fr 1.3fr; }
    .inquiry__media { width: 100%; opacity: .18; }
    .inquiry__media::after { background: none; }

    .project-hero__grid { grid-template-columns: 1fr; }
    .page-project .project-hero .container { padding-right: var(--gutter); }
    .project-aside { padding: 44px 0 10px; }
    .project-hero__media { min-height: 0; max-height: none; aspect-ratio: 16 / 10; height: auto; }
    .gallery-row--offset { margin-left: 0; }
    .gallery-row--4 { grid-template-columns: repeat(2, 1fr); }
    .feature-block, .feature-block--wide { grid-template-columns: 1fr; gap: 20px; }
    .feature-block__text { padding-top: 0; }
    .bespoke-feature { grid-template-columns: 1fr; }
    .process-table__row { grid-template-columns: 70px 1fr; row-gap: 18px; }
    .process-table__row + .process-table__row::before { left: 0; }
    .process-table__items { grid-column: 2; }
}

@media (max-width: 768px) {
    :root { --gutter: 20px; }
    .hide-sm { display: none; }
    .hero__media, .page-hero__media { inset: 0; opacity: .45; }
    .page-hero__media::after { background: linear-gradient(0deg, var(--bg) 0%, rgba(1, 12, 28, .4) 60%); }
    .hero__actions { gap: 20px 40px; }
    .build__scopes { grid-template-columns: 1fr; }
    .scope-card { padding-left: 0; padding-right: 0; }
    .scope-card:nth-child(n + 2) { border-top: 1px solid var(--line-strong); }
    .scope-card--bespoke { grid-column: auto; }
    .scope-card--cta { border-top: 0 !important; padding-left: 24px !important; }
    .scope-card__arrow { width: 60px; }
    .process__steps { grid-template-columns: 1fr; }
    .process__bg { width: 100%; height: 30%; opacity: .5; }
    .project-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
    .project-grid .project-tile:nth-child(n) { grid-column: auto; }
    .page-hero__wire { opacity: .4; }
    .stat-row > div { padding: 0 18px; }
    .about-cols__grid { grid-template-columns: 1fr; }
    .about-col { padding: 0 !important; border-left: 0; }
    .cta-split__grid { grid-template-columns: 1fr; }
    .tab-panel { grid-template-columns: 1fr; row-gap: 30px; }
    .system-col { border-left: 0; padding: 0 22px; }
    .system-col + .system-col { border-top: 1px solid var(--line-strong); padding-top: 28px; }
    .icon-steps { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
    .icon-steps li:nth-child(3) { border-left: 0; }
    .icon-steps--sm { grid-template-columns: repeat(3, 1fr); }
    .icon-steps--sm li:nth-child(3) { border-left: 1px solid var(--line); }
    .inquiry__grid { grid-template-columns: 1fr; gap: 24px; }
    .field-row { grid-template-columns: 1fr; gap: 0; }
    .dropzone { padding: 18px; }
    .dropzone__types b { margin: 0 4px; }
    .footer-main { grid-template-columns: 1fr; }
    .footer-contact { grid-column: 1; grid-row: auto; }
    .footer-nav { grid-row: auto; padding-bottom: 140px; }
    .footer-links { justify-content: flex-start; padding: 0 0 18px; }
    .footer-nav .tag-row { justify-content: flex-start; padding: 0; letter-spacing: .16em; }
    .footer-bottom-inner { flex-direction: column; gap: 14px; align-items: flex-start; }
    .gallery-row--3, .gallery-row--captions { grid-template-columns: 1fr; }
    .gallery-row--3 img, .gallery-row--captions img { height: auto; aspect-ratio: 4 / 3; }
    .gallery-row--4 { grid-template-columns: 1fr 1fr; }
    .img-cluster--1-2 { grid-template-rows: repeat(2, 120px); }
    .feature-cards--3 { grid-template-columns: 1fr; row-gap: 30px; }
    .feature-card { border-left: 0; padding: 0; border-top: 1px solid var(--line-strong); padding-top: 24px; }
    .feature-card:first-child { border-top: 0; padding-top: 0; }
    .project-pager { grid-template-columns: 1fr 1fr; row-gap: 20px; }
    .project-pager .pager-all { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
    .process-table__row { grid-template-columns: 1fr; }
    .process-table__items { grid-column: 1; grid-template-columns: 1fr 1fr; row-gap: 10px; }
    .process-table__items li:nth-child(3) { border-left: 0; padding-left: 0; }
    .scope-row { grid-template-columns: 1fr; gap: 16px; padding: 36px 0; }
    .scope-row__projects, .scope-row--cta .scope-row__projects { grid-column: auto; }
    .scope-index { grid-template-columns: 1fr; }
    .round-btn { width: 48px; height: 48px; }
    .showcase__panels { min-height: 380px; }
    .cta-band__art { opacity: .35; max-width: 90%; }
}

/* Privacy hero: narrower image column so the lock detail stays sharp */
.page-hero--privacy .page-hero__media { inset: 0 0 0 52%; }
.page-hero--privacy .page-hero__media img { object-position: center 40%; }
@media (max-width: 1024px) { .page-hero--privacy .page-hero__media { inset: 0 0 0 30%; } }
@media (max-width: 768px)  { .page-hero--privacy .page-hero__media { inset: 0; } }

/* Systems tabs — original brand logos (transparent PNGs, originals kept in assets/img/systems/originals/) */
.tab--asistal img { max-height: 36px; }
.tab--technal img { max-height: 22px; }
.tab--gutmann img { max-height: 68px; }
.tab--aluarc img  { max-height: 52px; }
.tab--eeliz img   { max-height: 50px; }