/* =============================================================================
   Oakira Group - Home page only
   Loaded from welcome.blade.php, so nothing here affects the other pages.
   Shared tokens, buttons, titles, menu and footer live in layout.css.
============================================================================= */


/* The theme rotates/oversizes some elements; clip them without creating a scroll container */
.oak-home {
    overflow-x: clip;
}

/* ----------------------------  Theme accent overrides  ---------------------------- */

.main-color {
    color: var(--oak-green) !important;
}

.main-colorbg,
.swiper-pagination-bullet-active {
    background-color: var(--oak-green);
}

.loader-wrap svg {
    fill: var(--oak-navy-deep);
}

.loader-wrap .loader-wrap-heading .load-text {
    color: #fff;
}

/* ====================================  Hero  ==================================== */

.oak-hero .parallax-slider .swiper-slide {
    min-height: 100vh;
}

.oak-hero .parallax-slider .swiper-slide .bg-img {
    background-color: var(--oak-navy-deep);
    background-position: center;
}

/* left-to-right shade so the caption always reads */
.oak-hero .parallax-slider .bg-img:after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
45deg, rgb(0 0 0 / 75%) 0%, rgb(0 0 0 / 48%) 45%, rgba(20, 32, 43, 0.15) 100%), linear-gradient(0deg, rgb(0 0 0 / 60%) 0%, rgba(20, 32, 43, 0) 35%);
}

.oak-hero .parallax-slider .container {
    padding-top: 90px;
    padding-bottom: 0px;
}

.oak-hero .oak-hero-title {
    font-size: 66px;
    line-height: 1.08;
    color: #fff;
    margin-bottom: 25px;
}

.oak-hero.arch-slider .parallax-slider .caption p {
    max-width: 520px;
    padding-left: 0;
    margin: 0;
    font-size: 17px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.82);
}

.oak-hero.arch-slider .parallax-slider .caption p:after {
    display: none;
}

.oak-hero-btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 25px;
}

.oak-hero-btns .oak-btn,
.oak-hero-btns .oak-btn span {
    color: #fff;
}

.oak-hero-btns .oak-btn-ghost:hover {
    color: var(--oak-navy);
}

/* Counter + arrows */
.oak-hero-nav {
    position: absolute;
    left: 50%;
    bottom: 50px;
    z-index: 5;
    width: 100%;
    max-width: 1320px;
    padding: 0 12px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    gap: 12px;
    pointer-events: none;
}

.oak-hero-nav > * {
    pointer-events: auto;
}

.oak-hero-nav .swiper-pagination {
    position: static;
    width: auto;
    margin-right: 14px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.6);
}

.oak-hero-nav .swiper-pagination-current {
    font-size: 26px;
    color: #fff;
}

/* "1 / 3": Swiper's fraction leaves only a space between the numbers, so add the slash */
.oak-hero-nav .swiper-pagination-total:before {
    content: '/';
    margin: 0 4px 0 2px;
}

.oak-hero-nav .swiper-button-prev,
.oak-hero-nav .swiper-button-next {
    position: static;
    width: 52px;
    height: 52px;
    margin: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-size: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    -webkit-transition: all .3s;
    transition: all .3s;
}

.oak-hero-nav .swiper-button-prev:after,
.oak-hero-nav .swiper-button-next:after {
    display: none;
}

.oak-hero-nav .swiper-button-prev:hover,
.oak-hero-nav .swiper-button-next:hover {
    background: var(--oak-green);
    border-color: var(--oak-green);
}

.oak-scroll-down {
    position: absolute;
    left: 50%;
    margin-left: -14px;
    bottom: 50px;
    z-index: 5;
    width: 28px;
    height: 46px;
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.6);
}

.oak-scroll-down span {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 4px;
    height: 8px;
    margin-left: -2px;
    border-radius: 4px;
    background: #fff;
    -webkit-animation: oakScroll 1.8s infinite;
    animation: oakScroll 1.8s infinite;
}

@-webkit-keyframes oakScroll {
    0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
    100% { opacity: 0; -webkit-transform: translateY(16px); transform: translateY(16px); }
}

@keyframes oakScroll {
    0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
    100% { opacity: 0; -webkit-transform: translateY(16px); transform: translateY(16px); }
}

/* ===================================  Ticker  =================================== */

.oak-ticker {
    position: relative;
    overflow: hidden;
    background: var(--oak-navy-deep);
    padding: 26px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.oak-ticker-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    -webkit-animation: oakTicker 45s linear infinite;
    animation: oakTicker 45s linear infinite;
}

.oak-ticker:hover .oak-ticker-track {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

.oak-ticker-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.oak-ticker-group span {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 40px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    padding: 0 34px;
}

.oak-ticker-group span.outline {
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.7);
}

.oak-ticker-group i {
    font-size: 18px;
    color: var(--oak-green);
}

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

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

/* ===============================  Company profile  =============================== */

.oak-about .imgs .img1 img,
.oak-about .imgs .img2 img {
    width: 100%;
    display: block;
    -o-object-fit: cover;
    object-fit: cover;
}

.oak-about .imgs .img1 img {
    aspect-ratio: 4 / 5;
    border-radius: var(--oak-radius);
}

.oak-about .imgs .img2 img {
    aspect-ratio: 1 / 1;
    border: 8px solid #fff;
    border-radius: var(--oak-radius);
}

.oak-about .imgs .img1:after {
    background: var(--oak-green);
    border-radius: 8px;
}

/* =================================  Why choose  ================================= */

.oak-why {
    background: radial-gradient(circle at 12% 70%, rgb(250 249 245) 0%, rgba(133, 177, 57, 0) 40%), linear-gradient(180deg, #FBFAF6 0%, #e9e7df 100%);
}

.oak-stack {
    display: -ms-grid;
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 70px;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
}

.oak-stack-side {
    position: -webkit-sticky;
    position: sticky;
    top: 130px;
}

.oak-stack-side .oak-lead {
    margin-top: 22px;
}

.oak-stack-cup {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin-top: 40px;
}

.oak-stack-cup .halo {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 82%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #a3a3a3 0%, rgb(221 221 221 / 0%) 70%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.oak-stack-cup svg {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.oak-stack-cup .cup {
    -webkit-animation: oakFloat 5s ease-in-out infinite;
    animation: oakFloat 5s ease-in-out infinite;
}

.oak-stack-cup .shadow {
    -webkit-transform-origin: 160px 268px;
    transform-origin: 160px 268px;
    -webkit-animation: oakShadow 5s ease-in-out infinite;
    animation: oakShadow 5s ease-in-out infinite;
}

.oak-stack-cup .steam path {
    stroke: #8C9AA6;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
    opacity: 0;
    -webkit-animation: oakSteam 3.6s ease-in-out infinite;
    animation: oakSteam 3.6s ease-in-out infinite;
}

.oak-stack-cup .steam .s2 {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}

.oak-stack-cup .steam .s3 {
    -webkit-animation-delay: 2.4s;
    animation-delay: 2.4s;
}

@-webkit-keyframes oakFloat {
    50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); }
}

@keyframes oakFloat {
    50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); }
}

@-webkit-keyframes oakShadow {
    50% { -webkit-transform: scale(.9); transform: scale(.9); opacity: .09; }
}

@keyframes oakShadow {
    50% { -webkit-transform: scale(.9); transform: scale(.9); opacity: .09; }
}

@-webkit-keyframes oakSteam {
    0% { stroke-dashoffset: 160; opacity: 0; -webkit-transform: translateY(14px); transform: translateY(14px); }
    25% { opacity: .75; }
    70% { stroke-dashoffset: 0; opacity: .5; }
    100% { stroke-dashoffset: -160; opacity: 0; -webkit-transform: translateY(-22px); transform: translateY(-22px); }
}

@keyframes oakSteam {
    0% { stroke-dashoffset: 160; opacity: 0; -webkit-transform: translateY(14px); transform: translateY(14px); }
    25% { opacity: .75; }
    70% { stroke-dashoffset: 0; opacity: .5; }
    100% { stroke-dashoffset: -160; opacity: 0; -webkit-transform: translateY(-22px); transform: translateY(-22px); }
}

/* cards stack and slide over each other; warm ceramic tints (matching the cup), navy text, logo-green icons */
.oak-stack-card {
    position: -webkit-sticky;
    position: sticky;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 26px;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-bottom: 28px;
    padding: 36px;
    border-radius: var(--oak-radius);
    border: 1px solid rgba(42, 62, 81, 0.07);
    -webkit-box-shadow: 0 -10px 40px rgba(28, 43, 57, 0.08);
    box-shadow: 0 -10px 40px rgba(28, 43, 57, 0.08);
    color: var(--oak-navy);
}

/* one colour family, light to dark: every card is navy, each one a step deeper than the card it covers */
.oak-stack-card.s1 { top: 130px; background: #445D73; }
.oak-stack-card.s2 { top: 158px; background: #3B5368; }
.oak-stack-card.s3 { top: 186px; background: #33495C; }
.oak-stack-card.s4 { top: 214px; background: #2A3E51; }
.oak-stack-card.s5 { top: 242px; background: #223344; }
.oak-stack-card.s6 { top: 270px; background: #1A2836; margin-bottom: 0; }

.oak-why .oak-stack-card {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.oak-why .oak-stack-card h3 {
    color: #fff;
}

.oak-why .oak-stack-card p {
    color: rgba(255, 255, 255, 0.74);
}

.oak-why .oak-stack-card small {
    color: #B5D67A;
}

.oak-stack-card .ico {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 64px;
    flex: 0 0 64px;
    height: 64px;
    width: 64px;
    border-radius: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    background: var(--oak-green);
}

.oak-stack-card small {
    display: block;
    margin-bottom: 8px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 20px;
    color: var(--oak-green-dark);
}

.oak-stack-card h3 {
    font-family: 'Sora', sans-serif;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--oak-navy);
    margin-bottom: 10px;
}

.oak-stack-card p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--oak-muted);
    margin: 0;
}

@media screen and (max-width: 991px) {
    .oak-stack {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .oak-stack-side,
    .oak-stack-card {
        position: static;
    }

    .oak-stack-cup {
        max-width: 260px;
        margin: 30px auto 0;
    }

    .oak-stack-card {
        padding: 26px 22px;
        margin-bottom: 18px;
    }
}

/* =================================  Collection  ================================= */

.oak-collection {
    position: relative;
    overflow: hidden;
    background: #fff;
}

.oak-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 40px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    height: 100vh;
    padding: 80px 6vw 40px;
    will-change: transform;
}

.oak-col-intro {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 30vw;
    max-width: 480px;
    padding-right: 2vw;
}

.oak-col-hint {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 14px;
    margin-top: 50px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--oak-muted);
}

.oak-col-hint span {
    position: relative;
    width: 60px;
    height: 2px;
    background: rgba(42, 62, 81, 0.15);
    overflow: hidden;
}

.oak-col-hint span:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 100%;
    background: var(--oak-green);
    -webkit-animation: oakHint 1.6s ease-in-out infinite;
    animation: oakHint 1.6s ease-in-out infinite;
}

@-webkit-keyframes oakHint {
    from { -webkit-transform: translateX(-30px); transform: translateX(-30px); }
    to { -webkit-transform: translateX(60px); transform: translateX(60px); }
}

@keyframes oakHint {
    from { -webkit-transform: translateX(-30px); transform: translateX(-30px); }
    to { -webkit-transform: translateX(60px); transform: translateX(60px); }
}

/* two cards in view at a time */
.oak-prod {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: min(41vw, calc((100vh - 300px) * 1.6));
}

.oak-prod-img {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: var(--oak-radius);
    overflow: hidden;
    background: #f3f1ec;
}

.oak-prod-img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transition: -webkit-transform 1s var(--oak-ease);
    transition: transform 1s var(--oak-ease);
}

.oak-prod:hover .oak-prod-img img {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

/* pouches shot on white get a soft tint so every card has a colour */
.oak-tint-navy img,
.oak-tint-green img {
    mix-blend-mode: multiply;
}

.oak-tint-navy {
    background: #DCE3EA;
}

.oak-tint-green {
    background: #E1EAD6;
}

.oak-prod-no {
    position: absolute;
    top: 22px;
    left: 24px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 44px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.oak-tint-navy .oak-prod-no,
.oak-tint-green .oak-prod-no {
    color: rgba(28, 43, 57, 0.35);
    text-shadow: none;
}

.oak-prod-weight {
    position: absolute;
    top: 22px;
    right: 22px;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    color: var(--oak-navy);
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.oak-prod-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 24px;
    padding: 24px 6px 0;
}

.oak-prod-info .name {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
}

.oak-prod-info .cat {
    display: block;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--oak-green-dark);
    margin-bottom: 6px;
}

.oak-prod-info h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--oak-navy);
    text-transform: uppercase;
    margin: 0;
}
@media only screen and (max-width: 1399px) {
    .oak-prod-info h3 {
        font-size: 20px;
    }
}
.oak-prod-info {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.oak-prod-info .meta {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin: 0;
    padding: 16px 0 0;
    border-top: 1px solid rgba(42, 62, 81, 0.1);
}

.oak-prod-info .meta li {
    font-size: 14px;
    line-height: 1.6;
    color: var(--oak-muted);
}
@media only screen and (max-width: 1399px) {
    .oak-prod-info .meta li {
        font-weight: 300;
        font-size: 13px;
    }
}

.oak-prod-info .meta i {
    width: 18px;
    margin-right: 6px;
    color: var(--oak-green);
}

.oak-prod-link {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 54px;
    flex: 0 0 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid rgba(42, 62, 81, 0.2);
    color: var(--oak-navy);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: all .35s var(--oak-ease);
    transition: all .35s var(--oak-ease);
}

.oak-prod-link:hover,
.oak-prod:hover .oak-prod-link {
    background: var(--oak-green);
    border-color: var(--oak-green);
    color: #fff;
    -webkit-transform: rotate(0);
    transform: rotate(0);
}

.oak-col-progress {
    position: absolute;
    left: 6vw;
    right: 6vw;
    bottom: 40px;
    height: 2px;
    background: rgba(42, 62, 81, 0.1);
}

.oak-col-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--oak-green);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
}

/* Collection on dark navy with a green shade (same background as the business head section) */
.oak-collection {
    background: radial-gradient(circle at 70% 40%, rgba(133, 177, 57, 0.18) 0%, rgba(133, 177, 57, 0) 45%), radial-gradient(circle at 8% 90%, rgba(133, 177, 57, 0.10) 0%, rgba(133, 177, 57, 0) 35%), var(--oak-navy-deep);
}

.oak-collection .oak-kicker {
    color: #d7e8b6;
}

.oak-collection .oak-title {
    color: #fff;
}

.oak-collection .oak-lead {
    color: rgba(255, 255, 255, 0.72);
}

.oak-collection .oak-btn-dark {
    background: var(--oak-green);
    border-color: var(--oak-green);
}

.oak-collection .oak-btn-dark:hover {
    background: #fff;
    border-color: #fff;
    color: var(--oak-navy);
}

.oak-collection .oak-col-hint {
    color: rgba(255, 255, 255, 0.6);
}

.oak-collection .oak-col-hint span,
.oak-collection .oak-col-progress {
    background: rgba(255, 255, 255, 0.14);
}

.oak-collection .oak-prod-img {
    -webkit-box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55);
}

.oak-collection .oak-prod-info .cat {
    color: #B5D67A;
}

.oak-collection .oak-prod-info h3 {
    color: #fff;
}

/* tea name links to its details page */
.oak-prod-info h3 a {
    color: inherit;
    -webkit-transition: color .3s;
    transition: color .3s;
}

.oak-prod-info h3 a:hover {
    color: var(--oak-green);
}

.oak-collection .oak-prod-info .meta {
    border-top-color: rgba(255, 255, 255, 0.12);
}

.oak-collection .oak-prod-info .meta li {
    color: rgba(255, 255, 255, 0.72);
}

.oak-collection .oak-prod-link {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* ====================================  Film  ==================================== */

.oak-film {
    position: relative;
    overflow: hidden;
    min-height: 100%;
    padding: 120px 0 60px;
    background: var(--oak-ink) center / cover no-repeat;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.oak-film-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.oak-film-shade {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgb(16 16 16 / 35%) 0%, rgb(18 18 18 / 75%) 70%), linear-gradient(10deg, rgb(0 0 0 / 90%) 0%, rgba(20, 32, 43, 0) 45%);
}

.oak-film-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.oak-film-content .oak-kicker {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.oak-film-content .oak-title {
    font-size: 64px;
}

.oak-play {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 110px;
    height: 110px;
    margin-top: 50px;
    border-radius: 50%;
    background: var(--oak-green);
    color: #fff;
    font-size: 26px;
    -webkit-transition: -webkit-transform .35s var(--oak-ease);
    transition: transform .35s var(--oak-ease);
}

.oak-play i {
    position: relative;
    z-index: 2;
    margin-left: 6px;
}

.oak-play:hover {
    color: #fff;
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
}

.oak-play .ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    -webkit-animation: oakRing 2.4s ease-out infinite;
    animation: oakRing 2.4s ease-out infinite;
}

.oak-play .ring.r2 {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}

@-webkit-keyframes oakRing {
    from { opacity: .9; -webkit-transform: scale(1); transform: scale(1); }
    to { opacity: 0; -webkit-transform: scale(1.9); transform: scale(1.9); }
}

@keyframes oakRing {
    from { opacity: .9; -webkit-transform: scale(1); transform: scale(1); }
    to { opacity: 0; -webkit-transform: scale(1.9); transform: scale(1.9); }
}

.oak-play-label {
    display: block;
    margin-top: 22px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.oak-steps {
    position: relative;
    z-index: 2;
    margin-top: 60px;
}

.oak-step {
    height: 100%;
    padding: 28px 26px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    -webkit-transition: background .35s;
    transition: background .35s;
}

.oak-step:hover {
    background: rgba(133, 177, 57, 0.25);
}

.oak-step .num {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 26px;
    line-height: 1;
    color: var(--oak-green);
    margin-bottom: 14px;
    margin-right: 5px;
}

.oak-step h4 {
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 6px;
}

.oak-step p {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}

/* video popup */
.oak-film-popup {
    position: relative;
    width: auto;
    max-width: 420px;
    margin: 0 auto;
}

.oak-film-popup video {
    display: block;
    width: 100%;
    max-height: 85vh;
    border-radius: 20px;
    background: #000;
}

.oak-mfp.mfp-bg {
    background: var(--oak-ink);
    opacity: .92;
}

.oak-mfp .mfp-close {
    color: #fff;
    opacity: 1;
    top: -44px;
    right: -6px;
    font-size: 36px;
}

/* =================================  Certificates  ================================= */

.oak-certs {
    background: #fff;
}

.oak-cert-grid {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.oak-cert {
    position: relative;
    padding: 30px 28px;
    border-radius: var(--oak-radius);
    background: #fff;
    border: 1px solid rgba(42, 62, 81, 0.08);
    -webkit-box-shadow: 0 20px 50px rgba(28, 43, 57, 0.07);
    box-shadow: 0 20px 50px rgba(28, 43, 57, 0.07);
    -webkit-transition: all .4s var(--oak-ease);
    transition: all .4s var(--oak-ease);
}

/* staggered second column for depth */
.oak-cert:nth-child(even) {
    -webkit-transform: translateY(48px);
    transform: translateY(48px);
}

.oak-cert:hover {
    border-color: var(--oak-green);
    -webkit-box-shadow: 0 30px 60px rgba(28, 43, 57, 0.12);
    box-shadow: 0 30px 60px rgba(28, 43, 57, 0.12);
}

.oak-cert .logo {
    height: 96px;
    border-radius: 16px;
    background: var(--oak-cream);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 22px;
}

.oak-cert .logo img {
    max-width: 120px;
    max-height: 80px;
}

.oak-cert h4 {
    font-family: 'Sora', sans-serif;
    font-size: 19px;
    font-weight: 600;
    color: var(--oak-navy);
    margin-bottom: 8px;
}

.oak-cert p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--oak-muted);
    margin-bottom: 18px;
}

.oak-cert .ok {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    color: var(--oak-green-dark);
    background: var(--oak-green-soft);
}

/* ==========================  Certificates (seal row)  ========================== */

.oak-seals {
    background: #729734;
    overflow: hidden;
}

.oak-seals:before {
    content: '';
    position: absolute;
    top: -220px;
    right: -160px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    border: 90px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.oak-seals .oak-kicker,
.oak-seals .oak-kicker i {
    color: #d4edab;
}

.oak-seals .oak-title {
    color: #d4edab;
}

.oak-seals .oak-title em {
    color: #d4edab;
}

.oak-seals .oak-lead {
    color: #d4edab
}

.oak-seal-row {
    position: relative;
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* dashed line joining the seals */
.oak-seal-row:before {
    content: '';
    position: absolute;
    top: 95px;
    left: 12%;
    right: 12%;
    border-top: 2px dashed rgb(141 179 78);
}

.oak-seal {
    position: relative;
    text-align: center;
}

.oak-seal .ring {
    position: relative;
    width: 190px;
    height: 190px;
    margin: 0 auto 24px;
    border-radius: 50%;
    padding: 12px;
    background: rgba(255, 255, 255, 0.25);
}

.oak-seal .ring:before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px dashed rgb(181 223 112);
    -webkit-animation: oakSpin 30s linear infinite;
    animation: oakSpin 30s linear infinite;
}

.oak-seal .ring span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #b8d18f;
    -webkit-box-shadow: 0 20px 40px rgba(28, 43, 57, 0.18);
    box-shadow: 0 20px 40px rgba(28, 43, 57, 0.18);
    -webkit-transition: -webkit-transform .5s var(--oak-ease);
    transition: transform .5s var(--oak-ease);
}

.oak-seal:hover .ring span {
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
}

.oak-seal .ring img {
    max-width: 136px;
    /* max-height: 84px; */
}

.oak-seal h4 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}

/* same light green as the rest of the section text */
.oak-seal p {
    font-size: 14px;
    color: #d4edab;
    margin: 0;
}

@-webkit-keyframes oakSpin {
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes oakSpin {
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/* ===============================  Testimonials (WhatsApp)  =============================== */

.oak-wa {
    background: var(--oak-cream);
    overflow: hidden;
}

.oak-wa-controls {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
}

.oak-wa-controls button {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid rgba(42, 62, 81, 0.2);
    background: #fff;
    color: var(--oak-navy);
    -webkit-transition: all .3s;
    transition: all .3s;
    cursor: pointer;
}

.oak-wa-controls button:hover {
    background: var(--oak-green);
    border-color: var(--oak-green);
    color: #fff;
}

.oak-wa-count {
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--oak-muted);
}

.oak-wa-count b {
    font-size: 22px;
    color: var(--oak-navy);
}

.oak-wa-stage {
    position: relative;
    padding: 0;
}

.oak-wa-stage:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(133, 177, 57, 0.35) 0%, rgba(133, 177, 57, 0) 70%);
}

/* three phones: the active chat in front, the previous and next chats behind it on each side.
   On a change only the phone coming forward moves: it slides in from its side and comes
   over the front phone, which steps back to the other side. Phones leaving or joining fade
   in place. */
.oak-wa-stack {
    position: relative;
    width: 330px;
    max-width: 100%;
    aspect-ratio: 9 / 18.4;
    margin: 0 auto;
    --oak-wa-shift: 71%;
}

.oak-wa-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    -webkit-transform: scale(.7);
    transform: scale(.7);
    -webkit-transition: opacity .6s ease, -webkit-transform .9s cubic-bezier(.2, .8, .2, 1);
    transition: opacity .6s ease, transform .9s cubic-bezier(.2, .8, .2, 1);
}

/* hidden, but parked on one side so it can fade in (or out) without sliding */
.oak-wa-slide.at-left {
    -webkit-transform: translateX(calc(var(--oak-wa-shift) * -1)) scale(.86);
    transform: translateX(calc(var(--oak-wa-shift) * -1)) scale(.86);
}

.oak-wa-slide.at-right {
    -webkit-transform: translateX(var(--oak-wa-shift)) scale(.86);
    transform: translateX(var(--oak-wa-shift)) scale(.86);
}

.oak-wa-slide.is-prev,
.oak-wa-slide.is-next {
    z-index: 1;
    opacity: .5;
    pointer-events: auto;
    cursor: pointer;
}

.oak-wa-slide.is-prev {
    -webkit-transform: translateX(calc(var(--oak-wa-shift) * -1)) scale(.86);
    transform: translateX(calc(var(--oak-wa-shift) * -1)) scale(.86);
}

.oak-wa-slide.is-next {
    -webkit-transform: translateX(var(--oak-wa-shift)) scale(.86);
    transform: translateX(var(--oak-wa-shift)) scale(.86);
}

.oak-wa-slide.is-active {
    z-index: 3;
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: none;
    transform: none;
}

.oak-wa-slide.no-anim {
    -webkit-transition: none !important;
    transition: none !important;
}

.oak-phone {
    display: block;
    aspect-ratio: 9 / 18.4;
    border-radius: 42px;
    border: 10px solid #111;
    overflow: hidden;
    background: #ece5dd;
    -webkit-box-shadow: 0 40px 80px rgba(28, 43, 57, 0.28);
    box-shadow: 0 40px 80px rgba(28, 43, 57, 0.28);
}

.oak-phone img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top;
    object-position: top;
}

/* =====================================  Blog  ===================================== */

.oak-blog {
    background: #fff;
}

.oak-post {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--oak-radius);
}

.oak-post img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transition: -webkit-transform 1s var(--oak-ease);
    transition: transform 1s var(--oak-ease);
}

.oak-post:hover img {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

.oak-post .tag {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--oak-green);
    color: #fff;
}

.oak-post .title {
    display: block;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    line-height: 1.35;
}

.oak-post .more {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
}

.oak-post .more i {
    -webkit-transition: -webkit-transform .3s;
    transition: transform .3s;
}

.oak-post:hover .more i {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
}

.oak-post-lg {
    height: 560px;
}

.oak-post-lg:before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(0deg, rgba(20, 32, 43, 0.9) 0%, rgba(20, 32, 43, 0.1) 60%);
}

.oak-post-lg .body {
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 40px;
    z-index: 2;
}

.oak-post-lg .title {
    margin: 18px 0 16px;
    font-size: 30px;
    color: #fff;
}

.oak-post-lg .more {
    color: #fff;
}

.oak-post-sm {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 24px;
    height: 268px;
    padding: 14px;
    background: var(--oak-cream);
    -webkit-transition: background .3s;
    transition: background .3s;
}

.oak-post-sm + .oak-post-sm {
    margin-top: 24px;
}

.oak-post-sm:hover {
    background: var(--oak-green-soft);
}

.oak-post-sm .img {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 46%;
    flex: 0 0 46%;
    height: 100%;
    overflow: hidden;
    border-radius: 18px;
}

.oak-post-sm .body {
    padding-right: 10px;
}

.oak-post-sm .title {
    margin: 14px 0 14px;
    font-size: 19px;
    color: var(--oak-navy);
    /* long blog titles: three lines, then "..." */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.oak-post-sm .more {
    color: var(--oak-green-dark);
}

/* ==================================  Responsive  ================================== */

@media screen and (max-width: 1199px) {
    .oak-title {
        font-size: 44px;
    }

    .oak-hero .oak-hero-title {
        font-size: 58px;
    }

    .oak-film-content .oak-title {
        font-size: 52px;
    }

    .oak-bento {
        grid-template-rows: 230px 230px 230px;
    }
}

@media screen and (max-width: 991px) {
    .oak-head .oak-lead {
        margin-top: 20px;
    }

    /* hero */
    .oak-hero .parallax-slider .swiper-slide {
        min-height: 54vh;
    }
    .oak-hero-btns {
        display: none;
    }
    .oak-hero .oak-hero-title {
        font-size: 46px;
    }

    .oak-hero .parallax-slider .container {
        padding-bottom: 0px;
        padding-top: 60px;
    }

    .oak-scroll-down {
        display: none;
    }

    .oak-hero-nav {
        bottom: 34px;
        padding: 0 24px;
    }

    .oak-ticker-group span {
        font-size: 30px;
        padding: 0 24px;
    }

    /* about */
    .oak-about .row.lg-marg {
        margin-left: calc(var(--bs-gutter-x) * -.5);
        margin-right: calc(var(--bs-gutter-x) * -.5);
    }

    .oak-about .row.lg-marg > * {
        padding-left: calc(var(--bs-gutter-x) * .5);
        padding-right: calc(var(--bs-gutter-x) * .5);
    }

    .oak-about .imgs {
        margin-bottom: 60px !important;
    }

    .oak-why .oak-stack-card {
        display: block;
    }
    .oak-stack-card .ico {
        margin-bottom: 10px;
    }
    .oak-why .oak-stack-card small {
        display: none;
    }
    /* bento */
    .oak-bento {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: none;
        grid-auto-rows: minmax(240px, auto);
    }

    .t-quality { grid-column: 1 / 3; grid-row: auto; min-height: 360px; }
    .t-samples { grid-column: 1 / 3; grid-row: auto; }
    .t-dispatch,
    .t-support,
    .t-licensed { grid-column: auto; grid-row: auto; }
    .t-rooted { grid-column: 2 / 3; grid-row: auto; }

    /* collection becomes a vertical list */
    .oak-track {
        display: block;
        width: 100%;
        height: auto;
        padding: 70px 15px 10px;
    }

    .oak-col-intro {
        width: 100%;
        max-width: none;
        padding: 0;
        margin-bottom: 50px;
    }

    .oak-col-hint,
    .oak-col-progress {
        display: none;
    }

    .oak-prod {
        width: 100%;
        margin-bottom: 50px;
    }

    /* film */
    .oak-film {
        min-height: 0;
        padding: 70px 0 60px;
    }

    .oak-film-content .oak-title {
        font-size: 42px;
    }

    .oak-steps {
        margin-top: 60px;
    }

    .oak-steps .col-6 {
        margin-bottom: 20px;
    }

    /* certificates */
    .oak-cert-grid {
        margin-top: 50px;
    }

    /* testimonials */
    .oak-wa-stage {
        margin-top: 60px;
    }

    /* blog */
    .oak-post-lg {
        height: 460px;
        margin-bottom: 24px;
    }

    /* inquiry */
}

@media screen and (max-width: 767px) {
    .oak-title {
        font-size: 34px;
    }

    .oak-hero .oak-hero-title {
        font-size: 38px;
    }

    .oak-hero.arch-slider .parallax-slider .caption p {
        font-size: 15px;
    }

    .oak-ticker {
        padding: 18px 0;
    }

    .oak-ticker-group span {
        font-size: 24px;
        padding: 0 18px;
    }

    .oak-bento {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(230px, auto);
        gap: 16px;
    }

    .t-quality,
    .t-samples,
    .t-dispatch,
    .t-support,
    .t-licensed,
    .t-rooted {
        grid-column: 1 / -1;
    }

    .t-quality {
        min-height: 340px;
    }

    .t-quality h3 {
        font-size: 24px;
    }

    .oak-tile {
        padding: 24px;
    }

    .oak-prod-info {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 14px;
    }

    .oak-prod-info h3 {
        font-size: 20px;
    }

    .oak-prod-link {
        -ms-flex-preferred-size: 46px;
        flex-basis: 46px;
        height: 46px;
    }

    .oak-prod-no {
        font-size: 32px;
    }

    .oak-film-content .oak-title {
        font-size: 32px;
    }

    .oak-play {
        width: 88px;
        height: 88px;
        font-size: 22px;
    }

    .oak-cert-grid {
        gap: 14px;
    }

    .oak-cert {
        padding: 18px 16px;
    }

    .oak-cert:nth-child(even) {
        -webkit-transform: translateY(24px);
        transform: translateY(24px);
    }

    .oak-cert .logo {
        height: 70px;
        margin-bottom: 14px;
    }

    .oak-cert .logo img {
        max-width: 90px;
        max-height: 56px;
    }

    .oak-cert h4 {
        font-size: 16px;
    }

    .oak-cert p {
        display: none;
    }

    .oak-steps .col-6 {
        padding-left: 7px;
        padding-right: 7px;
        margin-bottom: 14px;
    }

    .oak-step {
        padding: 20px 16px;
        height: auto;
        margin-bottom: 20px;
    }

    .oak-step h4 {
        font-size: 16px;
    }

    .oak-step p {
        font-size: 13px;
    }

    .oak-wa-stack {
        width: 260px;
    }

    .oak-post-lg {
        height: 380px;
    }

    .oak-post-lg .body {
        left: 24px;
        right: 24px;
        bottom: 24px;
    }

    .oak-post-lg .title {
        font-size: 22px;
    }

    .oak-post-sm {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        height: auto;
    }

    .oak-post-sm .img {
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
        height: 200px;
    }

    .oak-post-sm .body {
        padding: 0 8px 10px;
    }
}

/* ---------------------  Responsive: why / seals / testimonials / inquiry  --------------------- */

@media screen and (max-width: 991px) {
    .t-samples .body,
    .t-rooted .body {
        max-width: 100%;
    }

    .oak-cups {
        position: static;
        -webkit-transform: none;
        transform: none;
        margin-top: 20px;
    }

    .t-samples {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

    .oak-hills {
        width: 70%;
        opacity: .25;
    }

    .oak-seal-row {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 50px;
    }

    .oak-seal-row:before {
        display: none;
    }

    .oak-wa-stage {
        margin-top: 50px;
    }
}

@media screen and (max-width: 767px) {
    .t-quality {
        padding: 30px 24px;
    }

    .t-quality .oak-tile-mark {
        font-size: 300px;
    }

    .oak-seal .ring {
        width: 140px;
        height: 140px;
        padding: 9px;
    }

    .oak-seal .ring img {
        max-width: 84px;
        max-height: 60px;
    }

    .oak-seal h4 {
        font-size: 16px;
    }
}

/* testimonials: keep the side phones clear of the text column on smaller laptops */
@media screen and (max-width: 1199px) {
    .oak-wa-stack {
        --oak-wa-shift: 58%;
    }
}

/* ==================================  Laptops (992px – 1399px)  ================================== */

/* hero title: the theme's ".arch-slider .parallax-slider .caption h1" (75px) is more specific than
   ".oak-hero .oak-hero-title", so laptop sizes need the same specificity to apply */
@media screen and (min-width: 1200px) and (max-width: 1599px) {
    .oak-hero.arch-slider .parallax-slider .caption .oak-hero-title {
        font-size: 50px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .oak-hero.arch-slider .parallax-slider .caption .oak-hero-title {
        font-size: 46px;
    }

    /* the collection intro column is narrow here (30vw) */
    .oak-collection .oak-col-intro .oak-title {
        font-size: 38px;
    }
}

/* short laptop screens (up to 900px tall): keep the sticky "why" column and the
   testimonial phones inside the screen */
@media screen and (min-width: 992px) and (max-height: 900px) {
    .oak-stack-side {
        top: 110px;
    }

    .oak-stack-cup {
        max-width: 260px;
        margin-top: 24px;
    }

    .oak-wa-stack {
        width: 280px;
    }
}

@media screen and (min-width: 992px) and (max-height: 740px) {
    .oak-stack-cup {
        max-width: 210px;
    }

    .oak-wa-stack {
        width: 250px;
    }
}