/* ==========================================
   FLIPGNOME V4.2 CLEAN
   PART 1
   Base / Header / Hero
========================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');


:root {

    --black:#050505;
    --black-soft:#0b0b0d;
    --card:#111114;

    --white:#f5f5f2;
    --grey:#929299;

    --red:#ff003c;
    --warm:#ffe6a6;

    --border:rgba(255,255,255,.09);

    --radius:28px;

    --ease:cubic-bezier(.16,1,.3,1);

}


/* RESET */

*,
*::before,
*::after {

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html {

    scroll-behavior:smooth;

}


body {

    background:var(--black);
    color:var(--white);

    font-family:'Montserrat',Arial,sans-serif;

    overflow-x:hidden;

}


img {

    max-width:100%;
    display:block;

}


a {

    color:inherit;
    text-decoration:none;

}


.container {

    width:min(1200px,90%);
    margin:auto;

}



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


.site-header {

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:90px;

    padding:0 5%;

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

    z-index:1000;

    background:
        linear-gradient(
            to bottom,
            rgba(5,5,5,.9),
            transparent
        );

    backdrop-filter:blur(15px);

}


.site-header.scrolled {

    background:rgba(5,5,5,.85);

}



/* LOGO */


.logo {

    font-size:22px;

    font-weight:900;

    letter-spacing:5px;

    white-space:nowrap;

}


.logo span {

    color:var(--red);

}



/* NAVIGATION */


.main-nav {

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:35px;

}


.main-nav a {

    position:relative;

    font-size:12px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#777;

    transition:.3s;

}


.main-nav a:hover,
.main-nav a.active {

    color:white;

}


.main-nav a.active::after {

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:100%;

    height:2px;

    background:var(--red);

}


.main-nav a:last-child {

    color:var(--red);

}


.main-nav a:last-child:hover {

    color:white;

}



/* LANGUAGE */


.header-actions {

    display:flex;

    align-items:center;

}


.lang-switch {

    display:flex;

    gap:10px;

    font-size:12px;

    letter-spacing:2px;

}


.lang-switch a {

    color:#777;

}


.lang-switch .active {

    color:white;

}



/* MOBILE MENU BUTTON */


.menu-toggle {

    display:none;

}



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


.hero {

    position:relative;

    height:100vh;

    min-height:820px;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}



/* BACKGROUND */


.hero-bg {

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at 50% 45%,
            #202020 0%,
            #080808 55%,
            #050505 100%
        );

}



/* LIGHT */


.hero-glow {

    position:absolute;

    width:800px;

    height:800px;

    left:50%;

    top:55%;

    transform:translate(-50%,-50%);

    background:

        radial-gradient(
            circle,
            rgba(255,230,166,.35),
            rgba(255,170,50,.12) 35%,
            transparent 70%
        );

    filter:blur(100px);

    opacity:.8;

}


.hero::after {

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    right:-150px;

    bottom:100px;

    background:

        radial-gradient(
            circle,
            rgba(255,0,60,.22),
            transparent 70%
        );

    filter:blur(80px);

}



/* NOISE */


.noise {

    position:absolute;

    inset:0;

    opacity:.035;

    pointer-events:none;

    background-image:url(
    "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
    );

}



/* GNOME */


.gnome {

    position:absolute;

    bottom:-120px;

    left:50%;

    transform:translateX(-50%);

    width:min(650px,80vw);

    height:780px;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    z-index:2;

    filter:
        drop-shadow(
            0 60px 120px rgba(0,0,0,.9)
        );

}


.gnome img {

    height:100%;

    width:auto;

    object-fit:contain;

}



/* HERO CONTENT */


.hero-content {

    position:relative;

    z-index:5;

    width:min(900px,90%);

    text-align:center;

}


.eyebrow {

    font-size:12px;

    letter-spacing:5px;

    color:#888;

    margin-bottom:30px;

}


.hero-title {

    font-size:clamp(50px,7vw,95px);

    font-weight:900;

    letter-spacing:-4px;

    line-height:.95;

}


.hero-title span {

    display:block;

}


.flip-line {

    color:var(--red);

    margin-top:10px;

}


.hero-sub {

    margin-top:35px;

    font-size:18px;

    line-height:1.7;

    color:var(--white);

}


.hero-button {

    display:inline-flex;

    margin-top:45px;

    padding:18px 45px;

    border-radius:50px;

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

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:.35s var(--ease);

}


.scroll {

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

    font-size:11px;

    letter-spacing:4px;

    color:#777;

    z-index:5;

}

}
.hero-subtitle {
    color: #c8c8c8;
    text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
/* ==========================================
   FLIPGNOME V4.2 CLEAN
   PART 2
   Story / Attitude / Reveal / Features
========================================== */


/* ==========================================
STORY
========================================== */


.story {

    padding:180px 0;

    background:
        linear-gradient(
            180deg,
            var(--black),
            var(--black-soft)
        );

}


.story-label {

    color:var(--red);

    font-size:12px;

    letter-spacing:5px;

    margin-bottom:30px;

}


.story-title {

    max-width:900px;

    font-size:clamp(45px,6vw,75px);

    font-weight:900;

    letter-spacing:-4px;

    line-height:1;

}


.story-title span {

    color:var(--red);

}


.story-text {

    margin-top:45px;

    max-width:760px;

    color:var(--grey);

    font-size:21px;

    line-height:1.8;

}



/* ==========================================
ATTITUDE SHOWCASE
========================================== */


.attitude-section {

    padding:160px 0;

    background:
        linear-gradient(
            180deg,
            #090909,
            #060606
        );

}


.attitude-grid {

    width:min(1400px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:1fr .8fr 1fr;

    gap:50px;

    align-items:center;

}


.attitude-image {

    position:relative;

    background:
        radial-gradient(
            circle,
            #252525,
            #080808
        );

    border-radius:35px;

    padding:40px;

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

    box-shadow:
        0 50px 120px rgba(0,0,0,.7);

    overflow:hidden;

}


.attitude-image img {

    width:100%;

    height:auto;

    object-fit:contain;

    filter:
        drop-shadow(
            0 40px 70px rgba(0,0,0,.9)
        );

    transition:1s var(--ease);

}


.attitude-image:hover img {

    transform:scale(1.04);

}


.attitude-image.lit {

    background:
        radial-gradient(
            circle,
            rgba(255,220,150,.25),
            #080808 65%
        );

}


.attitude-image.lit::after {

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle,
            rgba(255,0,60,.15),
            transparent 65%
        );

    pointer-events:none;

}


.attitude-copy {

    text-align:center;

}


.attitude-copy h2 {

    font-size:clamp(40px,5vw,65px);

    font-weight:900;

    letter-spacing:-3px;

    line-height:1;

}


.attitude-copy h2 span {

    color:var(--red);

}


.attitude-copy p {

    margin-top:30px;

    font-size:18px;

    line-height:1.8;

    color:var(--grey);

}



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


.reveal {

    padding:180px 0;

    text-align:center;

    background:
        radial-gradient(
            circle at center,
            #180006,
            #070707 70%
        );

}


.big-quote {

    position:relative;

    z-index:2;

    font-size:clamp(55px,8vw,110px);

    font-weight:900;

    letter-spacing:-5px;

    line-height:.95;

}


.big-quote span {

    color:var(--red);

}


.reveal-image {

    margin-top:70px;

}


.reveal-image img {

    width:min(900px,90vw);

    height:auto;

    margin:auto;

    filter:
        drop-shadow(
            0 0 60px rgba(255,0,60,.35)
        );

}



/* ==========================================
USE CASES
========================================== */


.usecases {

    padding:160px 0;

    background:#090909;

}


.section-head {

    margin-bottom:70px;

}


.section-head h2 {

    font-size:clamp(40px,5vw,65px);

    font-weight:900;

    letter-spacing:-3px;

}


.section-head p {

    margin-top:20px;

    max-width:600px;

    color:var(--grey);

    line-height:1.7;

}


.use-grid {

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}


.use-card {

    position:relative;

    overflow:hidden;

    padding:45px;

    min-height:260px;

    border-radius:30px;

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

    background:
        linear-gradient(
            145deg,
            #171719,
            #09090a
        );

}


.use-card h3 {

    position:relative;

    z-index:2;

    font-size:26px;

    margin-bottom:20px;

}


.use-card p {

    position:relative;

    z-index:2;

    color:var(--grey);

    line-height:1.7;

}



/* ==========================================
FEATURES
========================================== */


.features {

    padding:160px 0;

}


.feature-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}


.feature {

    padding:40px;

    min-height:250px;

    background:#111113;

    border-radius:28px;

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

}


.feature strong {

    display:block;

    color:var(--red);

    font-size:12px;

    letter-spacing:4px;

    margin-bottom:20px;

}


.feature h3 {

    font-size:26px;

    margin-bottom:15px;

}


.feature p {

    color:var(--grey);

    line-height:1.7;

}



/* ==========================================
SPECS
========================================== */


.specs {

    width:min(1200px,90%);

    margin:120px auto;

    display:grid;

    grid-template-columns:repeat(5,1fr);

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

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

}


.spec {

    padding:45px 20px;

    text-align:center;

    border-right:1px solid var(--border);

}


.spec:last-child {

    border-right:none;

}


.spec strong {

    display:block;

    font-size:32px;

    font-weight:900;

}


.spec span {

    margin-top:12px;

    display:block;

    font-size:11px;

    letter-spacing:3px;

    color:var(--grey);

    text-transform:uppercase;

}
/* ==========================================
   FLIPGNOME V4.2 CLEAN
   PART 3
   Reviews / Drop / Footer / Effects
========================================== */


/* ==========================================
REVIEWS
========================================== */


.testimonials {

    padding:160px 0;

    background:#090909;

}


.testimonials h2 {

    font-size:clamp(40px,5vw,65px);

    font-weight:900;

    letter-spacing:-3px;

    margin-bottom:70px;

}


.testimonial-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}


.testimonial {

    min-height:280px;

    padding:40px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    background:
        linear-gradient(
            145deg,
            #171719,
            #090909
        );

    border-radius:30px;

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

}


.testimonial .quote {

    font-size:21px;

    line-height:1.6;

    color:#ddd;

}


.testimonial .name {

    color:var(--red);

    font-size:12px;

    letter-spacing:3px;

    text-transform:uppercase;

}



/* ==========================================
DROP / ORDER
========================================== */


.drop {

    padding:200px 0;

    text-align:center;

    background:
        radial-gradient(
            circle at top,
            #300009,
            #050505 65%
        );

}


.drop-badge {

    display:inline-block;

    padding:10px 25px;

    border-radius:50px;

    border:1px solid rgba(255,0,60,.5);

    color:var(--red);

    font-size:12px;

    letter-spacing:4px;

    margin-bottom:40px;

}


.drop h2 {

    font-size:clamp(55px,8vw,100px);

    font-weight:900;

    letter-spacing:-5px;

    line-height:.95;

}


.drop h2 span {

    color:var(--red);

}


.drop-text {

    max-width:650px;

    margin:40px auto;

    color:var(--grey);

    font-size:20px;

    line-height:1.8;

}



/* EMAIL FORM */


.notify {

    max-width:560px;

    margin:55px auto 0;

    padding:8px;

    display:flex;

    gap:10px;

    background:#111;

    border-radius:60px;

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

}


.notify input {

    flex:1;

    background:none;

    border:none;

    outline:none;

    color:white;

    padding:16px 25px;

    font-family:inherit;

}


.notify button {

    border:none;

    background:white;

    color:black;

    padding:16px 35px;

    border-radius:50px;

    font-weight:800;

    cursor:pointer;

    transition:.3s;

}


.notify button:hover {

    background:var(--red);

    color:white;

}



/* FORM MESSAGE
   samengevoegd
*/


.form-message {

    display:block;

    margin-top:25px;

    min-height:20px;

    text-align:center;

    font-size:14px;

    letter-spacing:1px;

    opacity:0;

    transition:.4s ease;

}


.form-message.success {

    color:#00ff66;

    opacity:1;

}


.form-message.error {

    color:var(--red);

    opacity:1;

}



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


.site-footer {

    padding:90px 0 40px;

    background:#050505;

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

}


.footer-grid {

    display:grid;

    grid-template-columns:1.5fr 1fr 1fr 1fr;

    gap:40px;

}


.footer-brand {

    font-size:32px;

    font-weight:900;

    letter-spacing:5px;

}


.footer-brand span {

    color:var(--red);

}


.footer-column h4 {

    color:#666;

    font-size:12px;

    letter-spacing:3px;

    margin-bottom:20px;

}


.footer-column a {

    display:block;

    color:#aaa;

    margin-bottom:12px;

}


.footer-column a:hover {

    color:white;

}


.social-icons {

    display:flex;

    align-items:center;

    gap:16px;

}


.social-icons img {

    width:45px;

    height:45px;

    max-width:45px;

    max-height:45px;

    object-fit:contain;

    display:block;

}


.footer-bottom {

    margin-top:70px;

    padding-top:30px;

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

    text-align:center;

    color:#555;

    font-size:12px;

    letter-spacing:2px;

}



/* ==========================================
CARD EFFECTS
========================================== */


.use-card {

    transition:
        transform .45s var(--ease),
        border-color .45s var(--ease),
        box-shadow .45s var(--ease);

}


.use-card::before {

    content:"";

    position:absolute;

    inset:-2px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(255,0,60,.35),
            transparent 45%
        );

    opacity:0;

    transition:.45s var(--ease);

    pointer-events:none;

}


.use-card:hover {

    transform:translateY(-12px);

    border-color:rgba(255,0,60,.55);

    box-shadow:
        0 30px 80px rgba(255,0,60,.15);

}


.use-card:hover::before {

    opacity:1;

}



.feature {

    transition:

        transform .4s var(--ease),
        border-color .4s var(--ease),
        box-shadow .4s var(--ease);

}


.feature:hover {

    transform:translateY(-8px);

    border-color:rgba(255,0,60,.45);

    box-shadow:

        0 25px 70px rgba(255,0,60,.12);

}
/* ==========================================
   FLIPGNOME V4.2 CLEAN
   PART 4
   Mobile / Legal / FAQ
========================================== */


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


@media(max-width:900px){


.site-header {

    height:75px;

    padding:0 20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}


.logo {

    order:1;

    font-size:16px;

    letter-spacing:3px;

}


.header-actions {

    order:2;

    margin-left:auto;

    margin-right:0;

}


.lang-switch {

    font-size:11px;

}


.menu-toggle {

    order:3;

    display:block;

    margin-left:20px;

    background:none;

    border:none;

    color:white;

    font-size:28px;

    cursor:pointer;

}



/* MOBILE NAV */


.main-nav {

    position:fixed;

    top:75px;

    left:0;

    width:100%;

    padding:35px 25px;

    display:flex;

    flex-direction:column;

    gap:25px;

    background:#090909;

    transform:translateY(-130%);

    transition:.4s var(--ease);

}


.main-nav.open {

    transform:translateY(0);

}


.main-nav a {

    font-size:14px;

}



/* HERO */


.hero {

    min-height:750px;

}


.hero-glow {

    width:500px;

    height:500px;

}


.gnome {

    width:100vw;

    height:650px;

    bottom:-120px;

}


.hero-title {

    font-size:48px;

    letter-spacing:-2px;

}


.hero-sub {

    font-size:16px;

}



/* SECTIONS */


.attitude-grid {

    grid-template-columns:1fr;

}


.attitude-section {

    padding:100px 0;

}


.attitude-image {

    padding:25px;

}


.reveal {

    padding:100px 0;

}


.use-grid {

    grid-template-columns:1fr;

}


.feature-grid {

    grid-template-columns:1fr;

}


.specs {

    grid-template-columns:1fr;

}


.spec {

    border-right:none;

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

}


.testimonial-grid {

    grid-template-columns:1fr;

}


/* FORM */


.notify {

    flex-direction:column;

    border-radius:30px;

}


.notify button {

    width:100%;

}


/* FOOTER */


.footer-grid {

    grid-template-columns:1fr;

    gap:30px;

}


}
/* ==========================================
LEGAL PAGES
========================================== */


.legal-page {

    padding:140px 0 100px;

    background:#050505;

    color:white;

}


.legal-page .container {

    max-width:900px;

}


.legal-page h1 {

    font-size:clamp(36px,5vw,64px);

    margin-bottom:20px;

    letter-spacing:-1px;

}


.legal-page h2 {

    margin-top:50px;

    margin-bottom:15px;

    font-size:26px;

}


.legal-date {

    opacity:.6;

    margin-bottom:40px;

}


.legal-intro {

    font-size:18px;

    line-height:1.8;

    max-width:750px;

}


.legal-page p,
.legal-page li {

    font-size:16px;

    line-height:1.8;

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

}


.legal-page ul {

    margin:20px 0 30px;

    padding-left:25px;

}


.legal-page a {

    color:white;

    text-decoration:underline;

}


.legal-divider {

    height:1px;

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

    margin:50px 0;

}


.legal-outro {

    margin-top:40px;

    opacity:.7;

}
/* ==========================================
FAQ
========================================== */


.faq-list {

    margin-top:50px;

}


.faq-item {

    padding:30px 0;

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

}


.faq-question {

    font-size:20px;

    font-weight:700;

    cursor:pointer;

}


.faq-answer {

    margin-top:15px;

    max-width:750px;

    color:var(--grey);

    line-height:1.8;

}
/* ==========================================
   ABOUT PAGE
========================================== */

.about-page {
    padding-top: 120px;
    overflow:hidden;
}


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

.about-hero {
    padding:80px 0 110px;
}

.about-hero .container {
    max-width:1000px;
}

.about-hero h1 {
    font-size:clamp(42px,7vw,82px);
    line-height:.95;
    letter-spacing:-3px;
    margin:0 0 25px;
}

.about-hero h1 span {
    display:block;
}

.about-hero h2 {
    max-width:800px;
    margin:45px 0 25px;
    font-size:clamp(28px,4vw,48px);
    line-height:1.05;
}

.about-intro {
    max-width:720px;
    font-size:19px !important;
    line-height:1.8 !important;
}


/* =========================
   LABELS
========================= */

.about-label {
    margin:0 0 18px;
    color:var(--accent) !important;
    font-size:12px !important;
    line-height:1.2 !important;
    letter-spacing:3px;
    text-transform:uppercase;
    font-weight:600;
}


/* =========================
   GENERAL ABOUT SECTIONS
========================= */

.about-origin,
.about-question,
.about-evolution,
.about-flip,
.about-process,
.about-today {
    padding:110px 0;
}

.about-page .container {
    max-width:1100px;
}


/* =========================
   ORIGIN
========================= */

.about-origin {
    border-top:1px solid var(--border);
}

.about-origin-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    align-items:center;
}

.about-origin .about-image {
    min-height:400px;
}

.about-copy {
    max-width:700px;
}

.about-copy h2,
.about-evolution h2,
.about-process h2,
.about-today h2 {
    margin:0 0 28px;
    font-size:clamp(28px,4vw,46px);
    line-height:1.05;
    letter-spacing:-1.5px;
}


.about-copy p {
    margin-bottom:25px;
}

.about-emphasis {
    border:1px solid var(--border);
    transition:
        border-color .35s ease,
        box-shadow .35s ease,
        transform .35s ease;
}

.about-emphasis:hover {
    border-color:rgba(255,0,0,.35);

    box-shadow:
        0 0 12px rgba(255,0,0,.08),
        0 0 35px rgba(255,0,0,.05);

    transform:translateY(-3px);
}


/* =========================
   QUESTION
========================= */

.about-question {
    padding:130px 0;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}

.about-question .container {
    max-width:1100px;
}

.about-question .story-title {
    margin:0;
    max-width:900px;
    font-size:clamp(36px,5vw,64px);
    line-height:1.02;
}


.about-emphasis {
    position:relative;
    overflow:hidden;

    margin-top:40px;
    padding:32px 38px;

    border:1px solid var(--border);
    border-radius:30px;

    background:
        linear-gradient(
            145deg,
            #171719,
            #09090a
        );

    font-size:20px !important;
    line-height:1.5 !important;

    transition:
        border-color .35s ease,
        box-shadow .35s ease,
        transform .35s ease;
}

.about-emphasis:hover {
    border-color:rgba(255,0,0,.35);

    box-shadow:
        0 0 12px rgba(255,0,0,.10),
        0 0 35px rgba(255,0,0,.06);

    transform:translateY(-3px);
}

.about-emphasis span {
    color:var(--red);
    font-weight:800;
}

/* =========================
   EVOLUTION
========================= */

.about-evolution-grid {
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:90px;
    align-items:center;
}

.about-page span {
    color:var(--red);
}

.about-product-image {
    display:flex;
    justify-content:center;
    align-items:center;
}

.about-product-image img {
    width:100%;
    max-width:500px;
    height:auto;
    display:block;
}

.about-cards {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-top:40px;
}

.about-card {
    padding:25px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.025);
}

.about-card h3 {
    margin:0 0 10px;
    font-size:16px;
}

.about-card p {
    margin:0;
    font-size:14px !important;
    line-height:1.6 !important;
}


/* =========================
   THE FLIP
========================= */

.about-flip {
    text-align:center;
    border-top:1px solid var(--border);
}

.about-flip .container {
    max-width:1000px;
}

.about-flip h2 {
    margin:0 0 30px;
    font-size:clamp(42px,6vw,72px);
    line-height:.95;
    letter-spacing:-2px;
}


.about-flip > .container > p:not(.about-label) {
    max-width:650px;
    margin:0 auto 55px;
}

.about-flip-image {
    max-width:650px;
    margin:0 auto;
}

.about-flip-image img {
    width:100%;
    height:auto;
    display:block;
}


/* =========================
   PROCESS
========================= */

.about-process {
    border-top:1px solid var(--border);
}

.about-process .container {
    max-width:900px;
}

.about-process > .container > h2 {
    max-width:800px;
}

.about-process .about-intro {
    margin-bottom:45px;
}

.about-process ul {
    margin:35px 0;
    padding-left:25px;
}

.about-process li {
    margin-bottom:22px;
    padding-left:8px;
    line-height:1.75;
    color:rgba(255,255,255,.8);
}

.about-process li strong {
    color:#fff;
}

.about-process .about-today-text > p {
    margin-bottom:28px;
}

.about-quote {
    margin:55px 0 0;
    padding:35px 40px;
    border-left:2px solid var(--accent);
    background:rgba(255,255,255,.025);
    font-size:20px;
    line-height:1.6;
    color:rgba(255,255,255,.85);
}

/* =========================
   redesign
========================= */

.redesign-layout {
    display:grid;
    grid-template-columns:minmax(0, 1fr) 30%;
    gap:70px;
    align-items:center;
}

.redesign-copy {
    max-width:700px;
}

.redesign-image {
    margin:0;
    width:100%;
    max-width:300px;
    justify-self:end;
}

.redesign-image img {
    display:block;
    width:100%;
    height:auto;
}

.redesign-image figcaption {
    margin-top:12px;
    font-size:11px;
    line-height:1.5;
    color:var(--muted);
}


/* =========================
   REDESIGN MOBILE
========================= */

@media (max-width:700px) {

    .redesign-layout {
        grid-template-columns:1fr;
        gap:35px;
    }

    .redesign-image {
        max-width:30%;
        justify-self:start;
    }

}
/* =========================
   TODAY
========================= */

.about-today {
    border-top:1px solid var(--border);
}

.about-today h2 {
    max-width:700px;
}

.about-today-text {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    max-width:900px;
}

.about-today-text p {
    margin:0;
}


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

.about-closing {
    padding:150px 0;
    text-align:center;
    border-top:1px solid var(--border);
}

.about-closing-small {
    margin:0 0 15px;
    font-size:12px !important;
    letter-spacing:4px;
    color:var(--accent) !important;
}

.about-closing h2 {
    margin:0 0 40px;
    font-size:clamp(48px,7vw,90px);
    line-height:.9;
    letter-spacing:-3px;
}


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

@media (max-width:800px){

    .about-page {
        padding-top:90px;
    }

    .about-hero,
    .about-origin,
    .about-question,
    .about-evolution,
    .about-flip,
    .about-process,
    .about-today {
        padding:80px 0;
    }

    .about-origin-grid,
    .about-evolution-grid,
    .about-today-text {
        grid-template-columns:1fr;
        gap:45px;
    }

    .about-origin .about-image {
        min-height:220px;
    }

    .about-cards {
        grid-template-columns:1fr;
    }

    .about-hero h1 {
        letter-spacing:-2px;
    }

    .about-question .story-title {
        font-size:clamp(34px,9vw,52px);
    }

    .about-quote {
        padding:25px;
        font-size:17px;
    }

}