.about-page {
    background: #1F4150;
}

/* ==========================================================
   INTERACTIVE HERO — cursor-reactive starfield, canvas driven
   (see assets/js/about-hero-stars.js). Static gradient here is
   the fallback if JS hasn't run yet. Full-screen, matching the
   Services hero treatment.
========================================================== */
.about-hero{
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:10rem 0 4rem;
    background:
        radial-gradient(circle at 50% 32%, #14313d, #081820 72%);
}

.about-hero-canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
    pointer-events:none;
}

.about-hero-inner{
    position:relative;
    z-index:1;
    max-width:900px;
    margin:0 auto;
    text-align:center;
}

.about-hero-tag{
    display:inline-flex;
    align-items:center;
    gap:.65rem;
    padding:.65rem 1.3rem;
    margin-bottom:2.25rem;
    border-radius:999px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(8px);
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,.78);
}

.about-hero-live-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--color-teal);
    box-shadow:0 0 10px var(--color-teal);
}

.about-hero-title{
    font-size:clamp(2.6rem, 6vw, 5.2rem);
    line-height:1.12;
    margin-bottom:1.75rem;
    color:#fff;
}

.about-hero-title span{
    color:var(--color-teal);
}

.about-hero-sub{
    color:rgba(255,255,255,.55);
    font-size:1.1rem;
}

.about-hero .scroll-indicator{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    margin-top:4rem;
    z-index:1;
}

@media (max-width:700px){
    .about-hero{
        min-height:100vh;
        padding:7rem 0 3.5rem;
    }
    .about-hero .scroll-indicator{
        margin-top:2.5rem;
    }
}

.about-page .eyebrow {
    color: rgba(255, 255, 255, 0.62);
}

.about-opening{

    background: #173542;

}

/* Section-level full-bleed layout — replaces the old .container +
   negative-margin bleed approach. That approach only ever compensated
   for the container's own inner padding, not the extra gutter created
   by the container being centered and capped below the viewport width
   (min(1800px, 92vw)), so the "bleed" barely moved. Putting the grid
   directly on the section (which has no width cap) means the image
   column is naturally flush with the true viewport edge — same
   pattern already proven on the home page's full-bleed sections. */
.about-opening-layout{

    display:grid;

    grid-template-columns: 1.35fr .65fr;

    align-items:stretch;

    min-height:78vh;

}

.about-opening-text{

    padding: 8rem clamp(2rem, 4vw, 4rem) 8rem clamp(3rem, 6vw, 7rem);

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.chapter-heading{

    margin-bottom:5rem;

}

.chapter-rule{

    width:54px;

    height:2px;

    background:var(--color-red);

    margin-bottom:1rem;

}

.chapter-text{

    display:flex;

    gap:1rem;

    align-items:center;

    font-size:.78rem;

    letter-spacing:.32em;

    text-transform:uppercase;

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

}

.chapter-number{

    color:#fff;

    opacity:.45;

}

/* .about-opening-grid replaced by .about-opening-layout (section-level
   full-bleed grid) above. */

.about-copy{

    max-width:760px;

}

/* Semantically this is an h2 now (the page only has one h1, in the
   hero) — renamed from ".about-copy h1" to keep the exact same large
   treatment without a stray second h1 hurting the page's SEO
   heading structure. */
.about-copy .about-letter-heading{

    font-size: 5.25rem;

    line-height: .92;

    margin-bottom: .5rem;

}

.about-copy h2{

    font-size: 2.7rem;

    line-height: 1.15;

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

    font-weight: 500;

    margin-bottom: 2rem;

}

.founder-meta{

    margin-bottom:4rem;

}

.founder-meta strong{

    display:block;

    /* A real signoff treatment for the one place on the site written
       in first person as Mieke — not just a bold caption line. */
    font-family:'Instrument Serif', Georgia, serif;

    font-style:italic;

    font-weight:400;

    font-size:1.8rem;

    color:#fff;

    margin-bottom:.35rem;

}

.founder-meta span{

    color:var(--text-secondary);

}

.about-letter{

    max-width: 620px;

    padding-bottom: 2rem;

}

.about-letter p{

    font-size: 1.15rem;

    line-height: 2.05;

    margin-bottom: 3rem;

}

.about-editorial-image{

    /* No negative-margin math needed — it's a direct child of the
       section-level grid (.about-opening-layout), which spans the
       full viewport width, so this column is naturally flush against
       the true right edge at every screen size. */
    width:100%;

    height:100%;

    min-height: 480px;

    border-radius: 0;

    /* Fixing a real regression from the last pass: dropping the
       border and using a near-invisible 3% background tint meant an
       empty placeholder now spanning half the section just looked
       like blank space — worse than the boxed version, not better. */
    background:rgba(255,255,255,.05);

    border:1px dashed rgba(255,255,255,.14);

    display:flex;

    align-items:center;

    justify-content:center;

    padding: 3rem;

    color: rgba(255,255,255,0.4);

    font-size:1.05rem;

    text-align:center;

}

/* ==========================================================
CHAPTER TWO
========================================================== */

.about-manifesto{

    position:relative;

    overflow:hidden;

    background:#274B59;

    padding: 10rem 0 140px 0;

}

.manifesto-quote{

    position:relative;

    margin-bottom: 9rem;

    max-width:900px;

}

/* Oversized translucent echo of the headline sitting behind it —
   gives this text-only section a background moment without needing
   a photo. */
.manifesto-quote h2{

    position:relative;

    z-index:1;

}

.manifesto-quote h2[data-echo]::before{

    content:attr(data-echo);

    position:absolute;

    top:-1.2rem;

    left:-.25rem;

    z-index:0;

    font-size:clamp(6rem, 15vw, 15rem);

    font-weight:800;

    line-height:1;

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

    white-space:nowrap;

    pointer-events:none;

    /* Was getting hard-clipped by the section's overflow:hidden right
       at the edge, which read as a layout mistake rather than an
       intentional bleed. Fading it out before it reaches the edge
       makes it look deliberate instead of broken. */
    -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 92%);
    mask-image: linear-gradient(90deg, #000 55%, transparent 92%);

}

.quote-mark{

    display:block;

    color:var(--color-red);

    font-size:4rem;

    line-height:1;

    margin-bottom:1rem;

}

.manifesto-quote h2{

    font-size:5.8rem;

    line-height:.95;

    max-width:820px;

}

.manifesto-grid{

    display:grid;

    grid-template-columns: 1.45fr .75fr;

    gap: 9rem;

    align-items:start;

}

.manifesto-right{

    padding-top:5.5rem;

}

.manifesto-grid p{

    max-width: 620px;

    font-size:1.15rem;

    line-height:2;

    color:var(--text-secondary);

    margin-bottom:2.5rem;

}

/* Stamp/seal treatment instead of a small dash-prefixed line — this
   is meant to read as a confident assertion, not a footnote. */
.manifesto-highlight{

    display:inline-block;

    margin-top: 2.5rem;

    font-size:1.4rem;

    font-weight:700;

    letter-spacing:.04em;

    text-transform:uppercase;

    color:#fff;

    padding:1.1rem 1.9rem;

    border:2px solid var(--color-red);

    border-radius:10px;

    transform:rotate(-2.5deg);

    transition:transform .35s ease;

}

.manifesto-highlight:hover{

    transform:rotate(0deg);

}

/* ==========================================================
CHAPTER THREE
========================================================== */

.about-care{

    background:#315664;

}

/* Same section-level full-bleed pattern as .about-opening-layout,
   mirrored — image bleeds to the true left edge this time, giving the
   page a left-right rhythm between the two portrait sections. */
.about-care-layout{

    display:grid;

    grid-template-columns:.95fr 1.05fr;

    align-items:stretch;

    min-height:78vh;

}

.care-image{

    width:100%;

    height:100%;

    min-height:480px;

    border-radius:0;

    background:rgba(255,255,255,.05);

    border:1px dashed rgba(255,255,255,.14);

    display:flex;

    align-items:center;

    justify-content:center;

    padding:3rem;

    text-align:center;

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

}

.care-content-wrap{

    padding: 8rem clamp(3rem, 6vw, 7rem) 8rem clamp(2rem, 4vw, 4rem);

    display:flex;

    align-items:center;

}

.care-content{

    max-width: 700px;

}

.care-content h2{

    margin:1rem 0 3rem;

    font-size:4.5rem;

    line-height:.98;

}

.care-content p{

    max-width: 660px;

    font-size:1.15rem;

    line-height: 2.05;

    margin-bottom: 3rem;

    color:var(--text-secondary);

}

@media(max-width: 1024px) {
    .about-opening-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .about-opening-text {
        padding: 4rem clamp(1.5rem, 5vw, 3rem);
    }

    .about-editorial-image {
        height: 420px;
        min-height: 0;
        order: -1;
    }

    .about-copy .about-letter-heading {
        font-size: 3.5rem;
    }

    .about-copy h2 {
        font-size: 1.8rem;
    }

    .manifesto-grid{

        grid-template-columns:1fr;

        gap:3rem;

    }

    .manifesto-right{

        padding-top:0;

    }

    .manifesto-quote h2{

        font-size:3.5rem;

    }

    .manifesto-quote h2[data-echo]::before{

        display:none;

    }

    .about-care-layout{

        grid-template-columns:1fr;

        min-height:0;

    }

    .care-content-wrap{

        padding: 4rem clamp(1.5rem, 5vw, 3rem);

    }

    .care-image{

        height:420px;

        min-height:0;

        order:-1;

    }

    .care-content h2{

        font-size:3rem;

    }
}

/* ==========================================================
CHAPTER FOUR - SIGNATURE STUDIO EXPERIENCE
========================================================== */

.about-studio-wall {
    background: #3A6070;
    padding: 10rem 0 20rem;
    position: relative;
    transition: background 0.9s ease;
}

body.studio-step-2 .about-studio-wall { background: #40687a; }
body.studio-step-3 .about-studio-wall { background: #467084; }
body.studio-step-4 .about-studio-wall { background: #355968; }

.studio-decor {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.floating-circle {
    position: absolute;
    width: 700px;
    height: 700px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50%;
    top: 20%;
    right: -100px;
    opacity: 0.03;
}

.studio-wall-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 10rem;
    align-items: start;
    position: relative;
    z-index: 1;
}

.studio-left {
    position: sticky;
    top: 140px;
    height: fit-content;
    max-width: 420px;
}

.studio-left h2 {
    font-size: 4.8rem;
    line-height: .95;
    margin: 1.5rem 0 2rem;
}

.studio-left p {
    font-size: 1.25rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 3rem;
}

.studio-progress {
    width: 100%;
    height: 2px;
    background: rgba(255,255,255,0.1);
    position: relative;
}

.studio-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: var(--color-red);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.studio-cards {
    display: flex;
    flex-direction: column;
    padding-top: 5vh;
}

.studio-card {
    width: 100%;
    max-width: 600px;
    min-height: 380px;
    padding: clamp(2.5rem, 4vw, 4.5rem);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 40px;
    margin-bottom: -120px; /* Vertical overlap */
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0.45;
    transform: scale(0.94);
    filter: blur(0.5px);
    position: relative;
    overflow: hidden;
    cursor: none;
}

.studio-card.active {
    opacity: 1;
    transform: translateX(-28px) scale(1);
    filter: none;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 40px 90px rgba(0,0,0,.25);
    z-index: 10;
}

.studio-card:hover {
    transform: translateX(-28px) translateY(-8px) scale(1) rotate(0.25deg);
}

.card-red-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    background: var(--color-red);
    width: 0;
}

.studio-card.active .card-red-bar {
    width: 100%;
    transition: width 0.9s ease;
}

.card-bg-number {
    position: absolute;
    top: 10%;
    left: 5%;
    font-size: 120px;
    font-weight: 800;
    /* Slightly stronger + red-tinted so it matches the same ghost-
       numeral language now used on the home page's Process section,
       instead of two near-invisible, uncoordinated treatments. */
    color: var(--color-red);
    opacity: 0.07;
    line-height: 1;
    pointer-events: none;
    transition: opacity .35s ease;
}

.studio-card.active .card-bg-number {
    opacity: 0.14;
}

.card-number {
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    color: var(--color-red);
    margin-bottom: 2rem;
    display: block;
}

.studio-card h3 {
    font-size: 3.5rem;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.studio-card.active h3 {
    opacity: 1;
    transform: none;
}

.card-content p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
}

.studio-card.active .card-content p:nth-child(1) { opacity: 1; transform: none; transition: all 0.6s ease 0.15s; }
.studio-card.active .card-content p:nth-child(2) { opacity: 1; transform: none; transition: all 0.6s ease 0.3s; }
.studio-card.active .card-content p:nth-child(3) { opacity: 1; transform: none; transition: all 0.6s ease 0.45s; }

.editorial-label {
    position: absolute;
    bottom: 2.5rem;
    right: 3rem;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    opacity: 0.15;
    text-transform: uppercase;
}

@media (max-width: 1100px) {
    .studio-wall-layout { grid-template-columns: 1fr; gap: 4rem; }
    .studio-left { position: relative; top: 0; max-width: 100%; margin-bottom: 4rem; }
    .studio-card { width: 100%; min-height: auto; margin-bottom: 2rem; transform: none !important; filter: none !important; opacity: 1 !important; cursor: default; }
    .custom-cursor { display: none; }
}

/* ==========================================================
TEAM - EDITORIAL STRIP
========================================================== */

.about-team {
    background: #456978;
    padding: 10rem 0;
    overflow: hidden;
}

.team-header {
    max-width: 760px;
    margin-bottom: 6rem;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(260px, 1fr));
    gap: 3rem;
    width: 100%;
}

.team-card {
    width: 100%;
    cursor: none;
    position: relative;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-photo {
    width: 100%;
    height: 440px;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.04);
    margin-bottom: 2rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.1);
}

.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Uploaded team photos are applied as a CSS background-image (not an
   <img> tag) by site-images.js, so they need their own sizing rule —
   without this the photo renders at native pixel size and only a
   sliver shows through the frame. */
.team-photo.has-uploaded-image {
    background-size: cover;
    background-position: center;
    transition: background-position 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.team-card:hover .team-photo.has-uploaded-image {
    background-size: 108%;
}

.team-info {
    position: relative;
}

.team-info h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #fff;
}

.team-role {
    display: block;
    color: #ffffff;
    opacity: 0.65;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.view-profile-cta {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.35s ease;
}

/* Team Hover States */
.team-card:hover {
    transform: translateY(-8px);
}

.team-card:hover .team-photo img {
    transform: scale(1.04);
}

.team-card:hover .view-profile-cta {
    opacity: 1;
}

/* ==========================================================
TEAM MODAL - FULL SCREEN SPREAD
========================================================== */

.team-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.45s ease;
}

.team-modal.active {
    display: flex;
    opacity: 1;
}

.team-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 12, 18, 0.82);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.team-modal-window {
    position: relative;
    width: min(1300px, 92vw);
    height: min(84vh, 780px);
    background: #1B3541;
    border-radius: 40px;
    display: grid;
    grid-template-columns: 40% 60%;
    overflow: hidden;
    box-shadow: 0 50px 100px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.08);
    transform: translateY(40px) scale(0.96);
    transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-modal.active .team-modal-window {
    transform: none;
}

.team-modal-image {
    height: 100%;
    background: rgba(255, 255, 255, 0.02);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-portrait-wrap {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.modal-portrait-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.1s ease-out;
}

/* Alternate profile-modal portrait, applied as a CSS background-image
   by main.js (same pattern as .team-photo on the card grid). */
.modal-portrait-wrap.has-uploaded-image {
    background-size: cover;
    background-position: center;
    color: transparent;
}

.modal-image-caption {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.75rem 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.modal-caption-text h2 {
    font-size: 2rem;
    line-height: 1.1;
    margin-bottom: 0.4rem;
    color: #fff;
}

.modal-caption-text h4 {
    font-size: 0.85rem;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 500;
    opacity: 0.6;
}

.modal-nav-arrows {
    display: flex;
    gap: 0.75rem;
    flex: 0 0 auto;
}

.team-modal-content {
    height: 100%;
    padding: 3rem 3.5rem;
    position: relative;
    overflow: hidden;
}

.modal-scroll-container {
    height: 100%;
    overflow-y: auto;
    padding-right: 1rem;
    scrollbar-width: none;
}

.modal-scroll-container::-webkit-scrollbar {
    display: none;
}

.modal-label {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(255,255,255,0.3);
    margin-bottom: 0.85rem;
}

.modal-section {
    margin-bottom: 1.85rem;
}

.modal-section p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

#modal-bio {
    line-height: 1.7;
}

.modal-grid-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

#modal-skills {
    list-style: none;
    padding: 0;
}

#modal-skills li {
    font-size: 1rem;
    color: #fff;
    margin-bottom: 0.6rem;
    padding-left: 1.4rem;
    position: relative;
}

#modal-skills li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    background: var(--color-red);
    border-radius: 50%;
    transform: translateY(-50%);
}

.quote-section blockquote {
    font-size: 1.3rem;
    line-height: 1.4;
    color: #fff;
    font-style: italic;
    border-left: 3px solid var(--color-red);
    padding-left: 1.75rem;
}

/* Modal Navigation */
.team-close {
    /* Was top:3rem, which sat level with the "Biography" heading and
       crowded the paragraph text right under it. Moved up and given
       its own click target so it reads as a corner control, not
       something wedged into the content column. */
    position: absolute;
    top: 1.5rem;
    right: 1.75rem;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 100;
    opacity: 0.6;
    transition: opacity 0.3s ease, background 0.3s ease;
}

.team-close:hover {
    opacity: 1;
    background: rgba(255,255,255,.12);
}

.modal-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.modal-nav-btn:hover {
    background: var(--color-red);
    border-color: var(--color-red);
    transform: scale(1.1);
}

@media (max-width: 1200px) {
    .team-grid {
        gap: 1.5rem;
    }
    .team-modal-window {
        grid-template-columns: 1fr;
        height: 90vh;
    }
    .team-modal-image {
        height: 40vh;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .team-modal-content {
        padding: 2.5rem 2rem;
    }
}

@media (max-width: 800px) {
    .team-grid {
        grid-template-columns: 1fr;
    }
    .team-card {
        width: 100%;
        margin-bottom: 4rem;
    }
    .modal-caption-text h2 {
        font-size: 1.5rem;
    }
    .modal-image-caption {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

/* ==========================================================
CLOSING CHAPTER
========================================================== */

.about-closing{

    background:#517988;

    padding:10rem 0 12rem;

}

.closing-grid{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:8rem;

    align-items:center;

}

.closing-copy{

    max-width:720px;

}

.closing-copy h2{

    margin:1rem 0 3rem;

    font-size:4.8rem;

    line-height:.95;

}

.closing-copy p{

    font-size:1.15rem;

    line-height:2;

    margin-bottom:3rem;

    color:var(--text-secondary);

}

.closing-panel{

    padding:3.5rem;

    border-radius:32px;

    background:rgba(255,255,255,.05);

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

}

.closing-quote{

    margin-bottom:3rem;

}

.closing-quote span{

    display:block;

    font-size:1.6rem;

    line-height:1.5;

    color:var(--text-secondary);

}

.closing-quote strong{

    display:block;

    margin-top:1rem;

    font-size:2.1rem;

    color:#fff;

}

.closing-divider{

    width:70px;

    height:2px;

    background:var(--color-red);

    margin:3rem 0;

}

.closing-values{

    list-style:none;

    padding:0;

    margin:0;

}

.closing-values li{

    padding:1rem 0;

    border-bottom:1px solid rgba(255,255,255,.08);

    color:#fff;

}

@media (max-width:1000px){

    .closing-grid{

        grid-template-columns:1fr;

        gap:4rem;

    }

    .closing-copy h2{

        font-size:3.2rem;

    }

}