/* ==========================================================================
   Lavington Residence — project showcase
   Editorial grid layout on a navy palette:
   navy #092E4B · powder blue #A1BFD9 · off-white #F9FDFF
   Manrope + DM Mono
   ========================================================================== */

:root {
    --paper: #092E4B;
    --surface: #0E3A5D;
    --deep: #062438;
    --ink: #F9FDFF;
    --muted: rgba(161, 191, 217, .75);
    --line: rgba(161, 191, 217, .16);
    --line-2: rgba(161, 191, 217, .32);
    --accent: #A1BFD9;
    --accent-ink: #092E4B;

    --sans: "Manrope", Arial, sans-serif;
    --display: "Manrope", Arial, sans-serif;
    --mono: "DM Mono", monospace;

    --ease: cubic-bezier(.77, 0, .18, 1);
    --ease-soft: cubic-bezier(.25, .8, .25, 1);
    --container: 1500px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background:
        radial-gradient(1100px 620px at 82% -8%, rgba(161, 191, 217, .10), transparent 60%),
        radial-gradient(900px 520px at -12% 14%, rgba(161, 191, 217, .09), transparent 55%),
        var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 400;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img {
    width: 100%;
    display: block;
}

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

button {
    font: inherit;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

::selection {
    background: var(--accent);
    color: var(--accent-ink);
}

/* Anchors clear the fixed header. */
section[id] {
    scroll-margin-top: 88px;
}

.skip {
    position: absolute;
    top: 0;
    left: -9999px;
    z-index: 1200;

    padding: 12px 18px;

    background: var(--accent);
    color: var(--accent-ink);

    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
}

.skip:focus {
    left: 16px;
    top: 16px;
}

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

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

.section-label {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
}

.small-text {
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
}

/* =========================================================
   HEADER
   ========================================================= */

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

    padding: 26px 24px;

    color: var(--ink);
    background: transparent;
    border-bottom: 1px solid transparent;

    transition:
        padding .4s var(--ease),
        background .4s ease,
        border-color .4s ease,
        color .3s ease;
}

/* Solidifies once the hero has scrolled away. */
header.is-solid {
    padding: 16px 24px;
    background: rgba(9, 46, 75, .74);
    border-bottom-color: var(--line);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Over the light overlay menu. */
body.menu-open header {
    color: var(--paper);
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    font-family: var(--display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.035em;
}

.menu-btn {
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;

    display: flex;
    align-items: center;
    gap: 12px;
}

.menu-label {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
}

.menu-icon {
    width: 22px;
    height: 12px;
    position: relative;
}

.menu-icon span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transition: transform .35s var(--ease), top .35s var(--ease), bottom .35s var(--ease);
}

.menu-icon span:first-child {
    top: 2px;
}

.menu-icon span:last-child {
    bottom: 2px;
}

body.menu-open .menu-icon span:first-child {
    top: 5px;
    transform: rotate(45deg);
}

body.menu-open .menu-icon span:last-child {
    bottom: 6px;
    transform: rotate(-45deg);
}

/* =========================================================
   MENU
   ========================================================= */

.overlay-menu {
    position: fixed;
    inset: 0;
    z-index: 900;

    background: var(--ink);
    color: var(--paper);

    display: flex;
    align-items: center;

    transform: translateY(-100%);
    visibility: hidden;
    transition: transform .7s var(--ease), visibility .7s;
}

.overlay-menu.active {
    transform: translateY(0);
    visibility: visible;
}

.overlay-inner {
    width: min(calc(100% - 48px), var(--container));
    margin: auto;
}

.overlay-links {
    display: grid;
    gap: 8px;
}

.overlay-links a {
    font-family: var(--display);
    font-size: clamp(40px, 8vw, 120px);
    line-height: .9;
    letter-spacing: -.07em;

    opacity: 0;
    transform: translateY(34px);

    transition: opacity .6s ease, transform .7s var(--ease);
}

.overlay-menu:not(.active) .overlay-links a {
    transition-delay: 0ms;
}

/* Links step in one after another when the menu lands. */
.overlay-menu.active .overlay-links a {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--i, 0) * 55ms + 120ms);
}

.overlay-menu.active .overlay-links:hover a,
.overlay-menu.active .overlay-links a:hover {
    transition-delay: 0ms;
    transition-duration: .3s;
}

.overlay-menu.active .overlay-links:hover a {
    opacity: .32;
}

.overlay-menu.active .overlay-links a:hover {
    opacity: 1;
}

.menu-meta {
    margin-top: 80px;

    display: flex;
    justify-content: space-between;
    gap: 20px;

    opacity: 0;
    transition: opacity .6s ease .45s;

    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
}

.overlay-menu.active .menu-meta {
    opacity: 1;
}

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

.hero {
    min-height: 100vh;
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 130px 24px 32px;

    overflow: hidden;
}

/* Taller than the hero so the parallax never exposes an edge. */
.hero-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: -12%;
    height: 112%;
    z-index: -2;

    overflow: hidden;
    will-change: transform;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transform: scale(1.12);
    transition: transform 1.8s var(--ease);
}

body.is-loaded .hero-bg img {
    transform: scale(1);
}

.hero-bg:after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(to bottom, rgba(9, 46, 75, .40), rgba(9, 46, 75, .94));
}

.hero-grid {
    position: absolute;
    inset: 0;
    z-index: -1;

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    pointer-events: none;
}

.hero-grid span {
    border-right: 1px solid rgba(161, 191, 217, .14);
}

.hero-top {
    position: absolute;
    top: 100px;
    left: 24px;
    right: 24px;

    display: flex;
    justify-content: space-between;
    gap: 20px;

    color: var(--ink);

    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
}

.hero-title {
    color: var(--ink);
    font-family: var(--display);

    font-size: clamp(52px, 11.5vw, 190px);
    font-weight: 500;

    line-height: .82;
    letter-spacing: -.09em;

    max-width: 1400px;
}

/* Each line rises out of its own mask on load. */
.hero-title .line {
    display: block;
    overflow: hidden;

    padding-bottom: .08em;
    margin-bottom: -.08em;
}

.hero-title .line > span {
    display: block;
    transform: translateY(115%);
    transition: transform 1.2s var(--ease);
}

body.is-loaded .hero-title .line > span {
    transform: none;
}

body.is-loaded .hero-title .line:nth-child(1) > span {
    transition-delay: .12s;
}

body.is-loaded .hero-title .line:nth-child(2) > span {
    transition-delay: .24s;
}

.hero-bottom {
    margin-top: 45px;

    color: var(--ink);

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
}

.hero-tagline {
    grid-column: 1 / span 6;

    font-family: var(--display);
    font-size: clamp(20px, 2.1vw, 32px);
    line-height: 1.05;
    letter-spacing: -.045em;
}

.hero-meta {
    grid-column: 9 / -1;

    display: flex;
    justify-content: space-between;
    align-items: end;

    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
}

.hero-top,
.hero-bottom {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s var(--ease);
}

body.is-loaded .hero-top {
    opacity: 1;
    transform: none;
    transition-delay: .85s;
}

body.is-loaded .hero-bottom {
    opacity: 1;
    transform: none;
    transition-delay: .5s;
}

/* =========================================================
   01 / THE PROJECT
   ========================================================= */

.studio {
    padding: 150px 0 170px;
}

.studio-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
}

.studio-heading {
    font-family: var(--display);
    font-size: clamp(44px, 6vw, 90px);
    line-height: .9;
    letter-spacing: -.07em;
}

.studio-copy {
    max-width: 850px;
}

.studio-copy p {
    font-family: var(--display);
    font-size: clamp(26px, 3.4vw, 54px);
    line-height: 1.06;
    letter-spacing: -.055em;
}

.studio-foot {
    margin-top: 100px;

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
}

.studio-foot > div:first-child {
    grid-column: 1 / span 4;
}

.studio-foot > div:last-child {
    grid-column: 9 / -1;
}

/* =========================================================
   SECTION HEADER
   ========================================================= */

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: end;

    margin-bottom: 60px;
}

.section-title {
    font-family: var(--display);
    font-size: clamp(55px, 8vw, 125px);
    line-height: .85;
    letter-spacing: -.08em;
}

.section-count {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;

    border-bottom: 1px solid var(--line-2);
    padding-bottom: 5px;
}

/* =========================================================
   02 / GALLERY
   ========================================================= */

.gallery {
    padding-bottom: 150px;
}

/* Coverflow. Card sizes are fixed so the track height never jumps. */
.showcase {
    --card-w: clamp(230px, 40vw, 620px);
    --card-h: clamp(150px, 25vw, 390px);
    --offset: clamp(100px, 22vw, 340px);

    position: relative;
    overflow: hidden;

    padding: 0 clamp(50px, 6vw, 84px);
}

/* Without scripting the frames sit in a plain scrollable row. */
.showcase-track {
    display: flex;
    gap: 14px;

    overflow-x: auto;
    padding-bottom: 4px;
}

.card {
    position: relative;
    flex: none;

    width: var(--card-w);
    height: var(--card-h);

    overflow: hidden;
    border-radius: 4px;

    background: var(--surface);
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Covers the frame, so the whole card is one target. */
.card-hit {
    position: absolute;
    inset: 0;
    z-index: 3;

    border: 0;
    background: none;
    cursor: pointer;
}

.card-info {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;

    padding: 44px 22px 20px;

    background: linear-gradient(to top, rgba(4, 26, 42, .92), transparent);
}

.card-step {
    display: block;

    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
}

.card-title {
    display: block;
    margin-top: 6px;

    font-family: var(--display);
    font-size: clamp(18px, 1.7vw, 26px);
    font-weight: 500;
    letter-spacing: -.03em;
}

/* --- coverflow, once the script is running --- */

.showcase.is-live .showcase-track {
    position: relative;
    display: block;

    height: calc(var(--card-h) + 44px);

    overflow: visible;
}

.showcase.is-live .card {
    position: absolute;
    top: 50%;
    left: 50%;

    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.62);

    transition:
        transform .9s var(--ease-soft),
        opacity .7s ease,
        filter .9s ease;
}

/* Frames either side of the centre sit back a step. */
.showcase.is-live .card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background: rgba(6, 36, 56, .45);
    opacity: 0;
    transition: opacity .9s ease;
}

.showcase.is-live .card.is-prev,
.showcase.is-live .card.is-next {
    z-index: 2;

    opacity: .55;
    filter: brightness(.7) saturate(.85);
    pointer-events: auto;
    cursor: pointer;
}

.showcase.is-live .card.is-prev::after,
.showcase.is-live .card.is-next::after {
    opacity: 1;
}

.showcase.is-live .card.is-prev {
    transform: translate(calc(-50% - var(--offset)), -50%) scale(.8);
}

.showcase.is-live .card.is-next {
    transform: translate(calc(-50% + var(--offset)), -50%) scale(.8);
}

.showcase.is-live .card.is-active {
    z-index: 3;

    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

/* The caption rises once the frame has settled into place. */
.showcase.is-live .card-info {
    opacity: 0;
    transform: translateY(12px);

    transition: opacity .5s ease, transform .6s var(--ease-soft);
}

.showcase.is-live .card.is-active .card-info {
    opacity: 1;
    transform: none;
    transition-delay: .3s;
}

.showcase-arrow {
    position: absolute;
    top: 50%;
    z-index: 10;

    width: 48px;
    height: 48px;

    transform: translateY(-50%);

    border: 1px solid var(--line-2);
    border-radius: 50%;
    background: rgba(9, 46, 75, .5);

    color: var(--ink);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    transition:
        background .35s ease,
        border-color .35s ease,
        color .35s ease,
        transform .5s var(--ease-soft);
}

.showcase-arrow:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);

    transform: translateY(-50%) scale(1.08);
}

.showcase-prev {
    left: 0;
}

.showcase-next {
    right: 0;
}

.showcase-dots {
    margin-top: 34px;

    display: flex;
    justify-content: center;
    gap: 9px;
}

.dot {
    width: 8px;
    height: 8px;

    padding: 0;

    border: 1px solid var(--line-2);
    border-radius: 50%;
    background: none;

    cursor: pointer;

    transition:
        background .4s ease,
        border-color .4s ease,
        transform .45s var(--ease-soft);
}

.dot:hover {
    border-color: var(--muted);
}

.dot.is-active {
    background: var(--accent);
    border-color: var(--accent);

    transform: scale(1.3);
}

.showcase-caption {
    max-width: 640px;
    margin: 36px auto 0;

    text-align: center;
}

.showcase-caption p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted);
}

/* --- inline enlargement, in the page flow --- */

.expand {
    display: grid;
    grid-template-rows: 0fr;

    opacity: 0;
    transition: grid-template-rows .8s var(--ease-soft), opacity .5s ease;
}

.expand.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
}

.expand-clip {
    overflow: hidden;
}

.expand-body {
    padding-top: 46px;
}

.expand-head {
    display: flex;
    align-items: baseline;
    gap: 12px;

    margin-bottom: 16px;
}

.expand-step {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
}

.expand-name {
    font-family: var(--display);
    font-size: clamp(18px, 1.7vw, 24px);
    font-weight: 500;
    letter-spacing: -.03em;
}

.expand-close {
    margin-left: auto;

    border: 0;
    background: none;
    cursor: pointer;

    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);

    transition: color .3s ease;
}

.expand-close:hover {
    color: var(--ink);
}

.expand-frame {
    position: relative;
    overflow: hidden;

    aspect-ratio: 16 / 9;
    max-height: 74vh;

    border-radius: 4px;
    background: var(--surface);
}

.expand-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================================
   03 / SCOPE
   ========================================================= */

.services {
    padding: 150px 0;
}

.services-header {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;

    margin-bottom: 80px;
}

.services-title {
    font-family: var(--display);
    font-size: clamp(55px, 8vw, 120px);
    line-height: .85;
    letter-spacing: -.08em;
}

.services-intro {
    font-size: 15px;
    line-height: 1.5;
    max-width: 500px;
    color: var(--muted);
}

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

.service {
    display: grid;
    grid-template-columns: 100px 1fr 1fr;

    gap: 40px;

    padding: 32px 0;

    border-bottom: 1px solid var(--line);
}

/* The row nudges on hover; kept off the row itself so the scroll reveal
   keeps ownership of its own transform. */
.service-code,
.service-name {
    transition: transform .5s var(--ease), color .4s ease;
}

.service:hover .service-code,
.service:hover .service-name {
    transform: translateX(16px);
}

.service-code {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
}

.service:hover .service-code {
    color: var(--accent);
}

.service-name {
    font-family: var(--display);
    font-size: clamp(25px, 3vw, 48px);
    font-weight: 400;
    line-height: .95;
    letter-spacing: -.055em;
}

.service-items {
    list-style: none;
    max-width: 400px;
}

.service-items li {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;

    padding: 4px 0;
    border-bottom: 1px solid var(--line);
}

.service-items li:last-child {
    border-bottom: 0;
}

.service-items i {
    font-family: var(--mono);
    font-size: 10px;
    font-style: normal;
    color: var(--line-2);
}

/* =========================================================
   04 / APPROACH
   ========================================================= */

.beliefs {
    background: var(--surface);
    padding: 180px 0;
}

.belief-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
}

.belief-label {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    color: var(--muted);
}

.belief-main {
    font-family: var(--display);
    font-size: clamp(42px, 7vw, 110px);
    line-height: .9;
    letter-spacing: -.085em;
}

.belief-main em {
    font-family: Georgia, serif;
    font-style: italic;
    color: var(--accent);
}

.belief-main strong {
    font-weight: 600;
}

.belief-bottom {
    margin-top: 90px;

    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;

    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
}

.belief-bottom a {
    border-bottom: 1px solid var(--line-2);
    padding-bottom: 4px;
    transition: color .3s ease, border-color .3s ease;
}

.belief-bottom a:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* =========================================================
   THE CLIENT
   ========================================================= */

.voice {
    background: var(--deep);
    padding: 170px 0;
}

.voice-quote {
    margin-top: 56px;
    max-width: 1200px;

    font-family: var(--display);
    font-size: clamp(28px, 4.4vw, 68px);
    line-height: 1.04;
    letter-spacing: -.055em;
}

.voice-meta {
    margin-top: 80px;
    padding-top: 20px;

    border-top: 1px solid var(--line);

    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;

    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.6;
    text-transform: uppercase;
    color: var(--muted);
}

/* =========================================================
   FOOTER
   ========================================================= */

footer {
    background: var(--deep);
    color: var(--ink);

    padding: 100px 0 25px;
}

.footer-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;

    padding-bottom: 120px;
}

.footer-brand {
    font-family: var(--display);
    font-size: clamp(50px, 9vw, 150px);
    line-height: .8;
    letter-spacing: -.09em;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.footer-column-title {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;

    color: var(--muted);
    margin-bottom: 20px;
}

.footer-links {
    display: grid;
    gap: 8px;

    font-family: var(--display);
    font-size: 22px;
}

.footer-links a {
    transition: opacity .2s ease;
}

.footer-links a:hover {
    opacity: .55;
}

.footer-bottom {
    border-top: 1px solid var(--line);

    padding-top: 20px;

    display: flex;
    justify-content: space-between;
    gap: 20px;

    font-family: var(--mono);
    font-size: 9px;
    text-transform: uppercase;

    color: var(--muted);
}

/* =========================================================
   REVEAL
   ========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(38px);

    transition: opacity .9s ease, transform .9s var(--ease);
    transition-delay: var(--d, 0ms);
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

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

    html {
        scroll-behavior: auto;
    }

    .reveal,
    .hero-title .line > span,
    .hero-top,
    .hero-bottom,
    .hero-bg img,
    .overlay-links a,
    .menu-meta {
        opacity: 1;
        transform: none;
        transition: none;
        clip-path: none;
    }

    /* Frames keep their positions; only the movement is dropped. */
    .card,
    .card-info,
    .expand,
    .showcase-arrow,
    .dot {
        transition: none;
    }
}

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

@media (max-width: 900px) {

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

    header,
    header.is-solid {
        padding-left: 15px;
        padding-right: 15px;
    }

    .hero {
        padding-left: 15px;
        padding-right: 15px;
    }

    .hero-top {
        left: 15px;
        right: 15px;
        top: 92px;
    }

    .hero-title {
        font-size: clamp(48px, 15vw, 110px);
    }

    .hero-bottom {
        display: block;
    }

    .hero-meta {
        margin-top: 30px;
    }

    .studio-grid,
    .services-header,
    .belief-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .studio-copy p {
        font-size: clamp(26px, 7vw, 48px);
    }

    .studio-foot {
        display: block;
    }

    .studio-foot > div:last-child {
        margin-top: 30px;
    }

    .showcase {
        padding: 0 50px;
    }

    .showcase-arrow {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }

    .service {
        grid-template-columns: 60px 1fr;
        gap: 20px;
    }

    .service-items {
        grid-column: 2;
        max-width: none;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 60px;
    }
}

@media (max-width: 550px) {

    .hero {
        min-height: 90vh;
    }

    .hero-top {
        top: 84px;
    }

    .hero-title {
        font-size: 17vw;
    }

    .hero-tagline {
        font-size: 25px;
    }

    .section-header {
        display: block;
    }

    .section-count {
        display: inline-block;
        margin-top: 25px;
    }

    .showcase {
        padding: 0 44px;
    }

    .showcase-arrow {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }

    .showcase-caption {
        margin-top: 28px;
    }

    .services-title,
    .section-title {
        font-size: 15vw;
    }

    .belief-main {
        font-size: 13vw;
    }

    .menu-meta {
        flex-direction: column;
        gap: 8px;
        margin-top: 50px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-brand {
        font-size: 19vw;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 8px;
    }
}