/* =========================================================
   COOLDRINK — PREMIUM EDITORIAL UI
   NO CARDS / NO GLASS PANELS / NO TEMPLATE UI
========================================================= */

:root{

    --black:#080808;
    --black-2:#0d0d0d;
    --black-3:#121212;

    --white:#f7f4ee;
    --muted:#aaa59c;
    --line:rgba(247,244,238,.16);

    --orange:#ff7800;
    --orange-light:#ff9b32;

    --max:1380px;

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

}


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


html{
    scroll-behavior:smooth;
    background:var(--black);
}


body{
    background:var(--black);
    color:var(--white);
    font-family:"DM Sans",sans-serif;
    overflow-x:hidden;
}


body.page-ready{
    overflow-x:hidden;
}


::selection{
    background:var(--orange);
    color:#000;
}


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


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


button,
input,
textarea{
    font:inherit;
}


/* =========================================================
   PROGRESS
========================================================= */

.cd-progress{
    position:fixed;
    left:0;
    top:0;
    width:0;
    height:3px;
    background:var(--orange);
    z-index:99999;
}


/* =========================================================
   LOADER
========================================================= */

.cd-loader{
    position:fixed;
    inset:0;
    background:#080808;
    z-index:100000;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    transition:
        opacity .7s ease,
        visibility .7s ease;
}


.cd-loader.loaded{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}


.cd-loader-word{
    font-family:Manrope,sans-serif;
    font-size:clamp(32px,6vw,76px);
    font-weight:800;
    letter-spacing:-.07em;
}


.cd-loader-word span{
    color:var(--orange);
}


.cd-loader-line{
    width:min(280px,60vw);
    height:1px;
    background:rgba(255,255,255,.18);
    margin-top:28px;
    overflow:hidden;
}


.cd-loader-line span{
    display:block;
    width:0;
    height:100%;
    background:var(--orange);
}


.cd-loader-count{
    margin-top:13px;
    font-size:11px;
    letter-spacing:.2em;
    color:#777;
}


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

.cd-header{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:88px;
    padding:0 5vw;
    display:flex;
    align-items:center;
    justify-content:space-between;
    z-index:1000;

    border-bottom:1px solid transparent;

    transition:
        background .4s ease,
        border-color .4s ease,
        height .4s ease;
}


.cd-header.scrolled{
    height:72px;
    background:rgba(8,8,8,.94);
    border-color:var(--line);
    backdrop-filter:blur(15px);
}


.cd-logo{
    font-family:Manrope,sans-serif;
    font-weight:800;
    font-size:25px;
    letter-spacing:-.07em;
    white-space:nowrap;
}


.cd-logo b{
    color:var(--orange);
}


.cd-nav{
    display:flex;
    align-items:center;
    gap:36px;
}


.cd-nav a{
    position:relative;
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:#8f8c86;
    transition:color .3s ease;
}


.cd-nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:1px;
    background:var(--orange);
    transition:width .3s var(--ease);
}


.cd-nav a:hover,
.cd-nav a.active{
    color:#fff;
}


.cd-nav a:hover::after,
.cd-nav a.active::after{
    width:100%;
}


.cd-header-cta{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.14em;
}


.cd-header-cta i{
    color:var(--orange);
}


.cd-menu{
    display:none;
    width:40px;
    height:40px;
    border:0;
    background:transparent;
    cursor:pointer;
}


.cd-menu span{
    display:block;
    width:25px;
    height:1px;
    background:#fff;
    margin:6px auto;
    transition:.3s ease;
}


.cd-menu.open span:first-child{
    transform:translateY(3.5px) rotate(45deg);
}


.cd-menu.open span:last-child{
    transform:translateY(-3.5px) rotate(-45deg);
}


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

.cd-hero{
    position:relative;
    min-height:100svh;
    padding:130px 5vw 45px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-bottom:1px solid var(--line);
}


.cd-hero-grid{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.22;
    background:
        linear-gradient(
            90deg,
            transparent 0,
            transparent calc(50% - 1px),
            rgba(255,255,255,.09) 50%,
            transparent calc(50% + 1px)
        );
}


.cd-hero-grid::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:45%;
    height:1px;
    background:rgba(255,255,255,.07);
}


.cd-hero-top{
    display:flex;
    justify-content:space-between;
    position:relative;
    z-index:2;
    color:#77736d;
    font-size:10px;
    letter-spacing:.2em;
}


.cd-hero-content{
    flex:1;
    width:min(var(--max),100%);
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    position:relative;
    z-index:2;
}


.cd-hero-copy{
    padding-top:20px;
}


.cd-eyebrow{
    display:flex;
    align-items:center;
    gap:11px;
    font-size:10px;
    letter-spacing:.2em;
    color:#aaa59e;
    margin-bottom:27px;
}


.cd-eyebrow span{
    width:28px;
    height:1px;
    background:var(--orange);
}


.cd-hero h1{
    font-family:Manrope,sans-serif;
    font-size:clamp(64px,8.8vw,150px);
    line-height:.82;
    letter-spacing:-.09em;
    font-weight:800;
    max-width:850px;
}


.cd-hero h1 span{
    display:block;
    margin-left:8vw;
    color:transparent;
    -webkit-text-stroke:1px rgba(247,244,238,.65);
}


.cd-hero h1 em{
    display:block;
    color:var(--orange);
    font-style:normal;
    margin-left:2vw;
}


.cd-hero-copy > p{
    width:min(420px,80%);
    color:#99958e;
    line-height:1.8;
    font-size:14px;
    margin:38px 0 30px;
}


.cd-hero-actions{
    display:flex;
    align-items:center;
    gap:30px;
}


.cd-main-btn{
    display:inline-flex;
    align-items:center;
    gap:24px;
    padding:0 0 11px;
    border-bottom:1px solid var(--orange);
    font-size:11px;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
}


.cd-main-btn span{
    width:33px;
    height:33px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    border-radius:50%;
    transition:.35s var(--ease);
}


.cd-main-btn:hover span{
    background:var(--orange);
    border-color:var(--orange);
    color:#000;
    transform:rotate(-45deg);
}


.cd-text-btn{
    display:flex;
    align-items:center;
    gap:10px;
    color:#8b8781;
    font-size:11px;
    letter-spacing:.13em;
    text-transform:uppercase;
}


.cd-text-btn i{
    color:var(--orange);
    transition:.3s ease;
}


.cd-text-btn:hover i{
    transform:translateX(5px);
}


.cd-hero-product{
    height:650px;
    position:relative;
    display:grid;
    place-items:center;
    perspective:1000px;
}


.cd-main-bottle{
    width:min(410px,65%);
    max-height:620px;
    object-fit:contain;
    position:relative;
    z-index:5;
    filter:
        drop-shadow(0 40px 45px rgba(0,0,0,.8))
        drop-shadow(0 0 45px rgba(255,120,0,.12));
    transition:transform .15s linear;
}


.cd-product-glow{
    position:absolute;
    width:390px;
    height:390px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(255,120,0,.22),
        rgba(255,120,0,.04) 40%,
        transparent 70%
    );
}


.cd-orbit{
    position:absolute;
    width:510px;
    height:510px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    transform:rotate(-24deg);
}


.cd-orbit::after{
    content:"";
    position:absolute;
    width:8px;
    height:8px;
    background:var(--orange);
    border-radius:50%;
    top:12%;
    right:9%;
    box-shadow:0 0 25px var(--orange);
}


.cd-orbit-two{
    width:590px;
    height:300px;
    transform:rotate(57deg);
    border-color:rgba(255,120,0,.22);
}


.cd-floating-word{
    position:absolute;
    font-family:Manrope,sans-serif;
    font-weight:800;
    font-size:12px;
    letter-spacing:.4em;
    color:#484641;
}


.word-one{
    left:7%;
    top:30%;
    transform:rotate(-90deg);
}


.word-two{
    right:3%;
    bottom:28%;
    transform:rotate(90deg);
}


.cd-product-tag{
    position:absolute;
    z-index:7;
    border-top:1px solid var(--line);
    padding-top:8px;
    min-width:110px;
}


.cd-product-tag small,
.cd-product-tag strong{
    display:block;
}


.cd-product-tag small{
    font-size:8px;
    color:#696660;
    letter-spacing:.16em;
}


.cd-product-tag strong{
    font-size:10px;
    letter-spacing:.12em;
    margin-top:3px;
}


.tag-top{
    right:8%;
    top:25%;
}


.tag-bottom{
    left:7%;
    bottom:23%;
}


.cd-hero-bottom{
    position:relative;
    z-index:3;
    width:min(var(--max),100%);
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr) 1.5fr;
    border-top:1px solid var(--line);
    padding-top:20px;
}


.cd-stat{
    display:flex;
    align-items:flex-start;
    gap:12px;
}


.cd-stat strong{
    font-family:Manrope,sans-serif;
    font-size:34px;
    line-height:.9;
    color:var(--orange);
    letter-spacing:-.06em;
}


.cd-stat span{
    color:#77736c;
    font-size:9px;
    line-height:1.5;
    text-transform:uppercase;
    letter-spacing:.1em;
}


.cd-scroll{
    justify-self:end;
    display:flex;
    align-items:center;
    gap:15px;
    color:#77736c;
    font-size:9px;
    letter-spacing:.16em;
}


.cd-scroll i{
    color:var(--orange);
}


/* =========================================================
   MARQUEE
========================================================= */

.cd-marquee{
    overflow:hidden;
    border-bottom:1px solid var(--line);
    padding:21px 0;
}


.cd-marquee-track{
    width:max-content;
    display:flex;
    align-items:center;
    gap:25px;
    animation:marquee 24s linear infinite;
}


.cd-marquee-track span{
    font-family:Manrope,sans-serif;
    font-size:clamp(22px,3vw,42px);
    font-weight:800;
    letter-spacing:-.05em;
}


.cd-marquee-track i{
    color:var(--orange);
    font-size:18px;
    font-style:normal;
}


@keyframes marquee{
    to{
        transform:translateX(-50%);
    }
}


/* =========================================================
   COMMON
========================================================= */

.cd-section{
    width:min(var(--max),100%);
    margin:auto;
    padding:140px 5vw;
}


.cd-section-label{
    display:flex;
    align-items:center;
    gap:15px;
    color:#67635d;
    font-size:9px;
    letter-spacing:.2em;
    text-transform:uppercase;
}


.cd-section-label span{
    color:var(--orange);
}


.cd-small-label{
    color:#77736c;
    font-size:9px;
    letter-spacing:.2em;
    text-transform:uppercase;
}


.cd-line{
    width:100%;
    height:1px;
    background:var(--line);
}


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

.cd-about-layout{
    margin-top:70px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    grid-template-rows:auto auto;
    gap:80px 9vw;
}


.cd-about-heading h2{
    margin-top:20px;
    font-family:Manrope,sans-serif;
    font-size:clamp(50px,6vw,90px);
    line-height:.92;
    letter-spacing:-.075em;
    max-width:720px;
}


.cd-about-heading h2 span{
    color:var(--orange);
}


.cd-about-image{
    grid-column:2;
    grid-row:1 / 3;
    position:relative;
}


.cd-about-image::before{
    content:"";
    position:absolute;
    inset:20px -20px -20px 20px;
    border:1px solid var(--line);
    z-index:-1;
}


.cd-about-image img{
    width:100%;
    height:650px;
    object-fit:cover;
    filter:saturate(.8);
}


.cd-image-caption{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    padding:15px;
    display:flex;
    justify-content:space-between;
    background:linear-gradient(transparent,rgba(0,0,0,.85));
    padding-top:70px;
    font-size:8px;
    letter-spacing:.15em;
    color:#aaa;
}


.cd-about-copy{
    align-self:end;
    max-width:500px;
}


.large-copy{
    font-family:Manrope,sans-serif;
    font-size:27px;
    line-height:1.25;
    letter-spacing:-.04em;
    margin-bottom:22px;
}


.cd-about-copy > p:not(.large-copy){
    color:#85817a;
    font-size:14px;
    line-height:1.9;
}


.cd-about-copy .cd-line{
    margin:32px 0 20px;
}


.cd-about-points div{
    display:flex;
    gap:20px;
    padding:11px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
}


.cd-about-points span{
    color:var(--orange);
    font-size:9px;
}


.cd-about-points strong{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.12em;
}


/* =========================================================
   DRINKS
========================================================= */

.cd-drinks{
    max-width:none;
    padding-left:5vw;
    padding-right:5vw;
    border-top:1px solid var(--line);
}


.cd-section-head{
    width:min(var(--max),100%);
    margin:auto;
    display:grid;
    grid-template-columns:.6fr 1fr .7fr;
    gap:50px;
    align-items:end;
}


.cd-section-head h2{
    margin-top:20px;
    font-family:Manrope,sans-serif;
    font-size:clamp(55px,7vw,105px);
    line-height:.82;
    letter-spacing:-.08em;
}


.cd-section-head h2 em{
    color:var(--orange);
    font-style:normal;
}


.cd-section-intro{
    color:#77736d;
    font-size:13px;
    line-height:1.8;
    max-width:260px;
}


.cd-drink-showcase{
    width:min(1200px,100%);
    margin:100px auto 0;
}


.cd-drink-row{
    position:relative;
    min-height:570px;
    display:grid;
    grid-template-columns:90px 1.1fr .9fr;
    align-items:center;
    border-top:1px solid var(--line);
}


.cd-drink-row.reverse{
    grid-template-columns:90px .9fr 1.1fr;
}


.cd-drink-row.reverse .cd-drink-image{
    grid-column:3;
}


.cd-drink-row.reverse .cd-drink-info{
    grid-column:2;
    grid-row:1;
}


.cd-drink-number{
    align-self:start;
    padding-top:35px;
    color:#55514c;
    font-family:Manrope,sans-serif;
    font-size:12px;
}


.cd-drink-image{
    height:570px;
    display:grid;
    place-items:center;
    position:relative;
}


.cd-drink-image::before{
    content:"";
    position:absolute;
    width:370px;
    height:370px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;
}


.cd-drink-image::after{
    content:"";
    position:absolute;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--orange);
    box-shadow:0 0 30px var(--orange);
}


.cd-drink-image img{
    position:relative;
    z-index:2;
    width:min(290px,70%);
    max-height:510px;
    object-fit:contain;
    filter:drop-shadow(0 35px 30px rgba(0,0,0,.7));
    transition:transform .7s var(--ease);
}


.cd-drink-row:hover .cd-drink-image img{
    transform:translateY(-15px) rotate(2deg) scale(1.04);
}


.cd-drink-info{
    padding:40px;
}


.cd-drink-info > span{
    color:#77736d;
    font-size:9px;
    letter-spacing:.2em;
}


.cd-drink-info h3{
    font-family:Manrope,sans-serif;
    font-size:clamp(55px,6vw,88px);
    line-height:.84;
    letter-spacing:-.08em;
    margin:20px 0 25px;
}


.cd-drink-info p{
    max-width:330px;
    color:#77736d;
    line-height:1.8;
    font-size:13px;
}


.cd-drink-info a{
    display:inline-flex;
    gap:15px;
    align-items:center;
    margin-top:35px;
    padding-bottom:10px;
    border-bottom:1px solid var(--orange);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.15em;
}


.cd-drink-info a i{
    color:var(--orange);
    transition:.3s ease;
}


.cd-drink-info a:hover i{
    transform:translateX(5px);
}


.cd-view-all{
    width:min(1200px,100%);
    margin:60px auto 0;
    border-top:1px solid var(--line);
    padding-top:22px;
}


.cd-view-all a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:10px;
    letter-spacing:.18em;
    color:#8b8780;
}


.cd-view-all i{
    color:var(--orange);
}


/* =========================================================
   OFFERS
========================================================= */

.cd-offers{
    border-top:1px solid var(--line);
}


.cd-offer-layout{
    margin-top:80px;
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:10vw;
}


.cd-offer-title h2{
    font-family:Manrope,sans-serif;
    font-size:clamp(60px,7vw,105px);
    line-height:.82;
    letter-spacing:-.08em;
    margin:20px 0 30px;
}


.cd-offer-title h2 em{
    color:var(--orange);
    font-style:normal;
}


.cd-offer-title > p:last-child{
    color:#77736d;
    max-width:280px;
    line-height:1.8;
    font-size:13px;
}


.cd-offer-line{
    min-height:150px;
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:70px 1fr 40px;
    align-items:center;
    gap:25px;
    transition:padding .4s var(--ease);
}


.cd-offer-line:last-child{
    border-bottom:1px solid var(--line);
}


.cd-offer-line:hover{
    padding-left:18px;
}


.offer-no{
    color:var(--orange);
    font-size:10px;
}


.cd-offer-line small{
    color:#6d6963;
    font-size:8px;
    letter-spacing:.2em;
}


.cd-offer-line h3{
    font-family:Manrope,sans-serif;
    font-size:clamp(25px,3vw,42px);
    letter-spacing:-.05em;
    margin:8px 0;
}


.cd-offer-line p{
    color:#77736d;
    font-size:12px;
}


.cd-offer-line > i{
    color:#77736d;
    transition:.3s ease;
}


.cd-offer-line:hover > i{
    color:var(--orange);
    transform:rotate(45deg);
}


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

.cd-story{
    max-width:none;
    min-height:760px;
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 75% 50%,
            rgba(255,120,0,.08),
            transparent 30%
        );
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}


.cd-story-bg-text{
    position:absolute;
    right:-5vw;
    top:15%;
    font-family:Manrope,sans-serif;
    font-size:clamp(180px,30vw,500px);
    line-height:.7;
    font-weight:800;
    color:rgba(255,255,255,.025);
    letter-spacing:-.12em;
}


.cd-story-content{
    width:min(1100px,100%);
    margin:130px auto 0;
    position:relative;
    z-index:2;
}


.cd-story-content h2{
    margin-top:35px;
    max-width:1000px;
    font-family:Manrope,sans-serif;
    font-size:clamp(55px,7vw,110px);
    line-height:.9;
    letter-spacing:-.08em;
}


.cd-story-content h2 span{
    color:var(--orange);
}


.cd-story-bottom{
    margin-top:100px;
    display:flex;
    justify-content:space-between;
    align-items:end;
}


.cd-story-bottom > p{
    color:#77736d;
    max-width:350px;
    line-height:1.9;
    font-size:13px;
}


.cd-story-sign{
    text-align:right;
}


.cd-story-sign span{
    display:block;
    font-family:Manrope,sans-serif;
    font-weight:800;
    font-size:28px;
    letter-spacing:-.08em;
}


.cd-story-sign small{
    color:#77736d;
    font-size:8px;
    letter-spacing:.2em;
}


/* =========================================================
   EXPERIENCE
========================================================= */

.cd-experience{
    max-width:none;
}


.cd-experience .cd-section-head{
    grid-template-columns:.6fr 1fr;
}


.cd-experience-list{
    width:min(1200px,100%);
    margin:100px auto 0;
}


.cd-experience-item{
    display:grid;
    grid-template-columns:80px 1fr 1fr;
    align-items:center;
    min-height:190px;
    border-top:1px solid var(--line);
    gap:30px;
    transition:padding .4s var(--ease);
}


.cd-experience-item:last-child{
    border-bottom:1px solid var(--line);
}


.cd-experience-item:hover{
    padding-left:25px;
}


.cd-experience-item > span{
    color:var(--orange);
    font-size:10px;
}


.cd-experience-item small{
    font-size:8px;
    color:#68645f;
    letter-spacing:.2em;
}


.cd-experience-item h3{
    margin-top:10px;
    font-family:Manrope,sans-serif;
    font-size:clamp(28px,3.2vw,48px);
    letter-spacing:-.06em;
}


.cd-experience-item > p{
    color:#77736d;
    font-size:13px;
    line-height:1.8;
    max-width:350px;
}


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

.cd-order{
    position:relative;
    min-height:650px;
    display:grid;
    place-items:center;
    text-align:center;
    overflow:hidden;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:
        radial-gradient(
            circle at center,
            rgba(255,120,0,.13),
            transparent 35%
        );
}


.cd-order-line{
    position:absolute;
    left:5%;
    right:5%;
    top:50%;
    height:1px;
    background:var(--line);
}


.cd-order-content{
    position:relative;
    z-index:2;
}


.cd-order-content > span{
    font-size:9px;
    letter-spacing:.2em;
    color:#77736d;
}


.cd-order-content h2{
    font-family:Manrope,sans-serif;
    font-size:clamp(65px,9vw,145px);
    line-height:.78;
    letter-spacing:-.1em;
    margin:30px 0 50px;
}


.cd-order-content h2 em{
    display:block;
    color:var(--orange);
    font-style:normal;
}


.cd-order-content a{
    display:inline-flex;
    align-items:center;
    gap:20px;
    padding-bottom:12px;
    border-bottom:1px solid var(--orange);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.18em;
}


.cd-order-content a i{
    color:var(--orange);
}


.cd-order-mark{
    position:absolute;
    bottom:-100px;
    left:50%;
    transform:translateX(-50%);
    font-family:Manrope,sans-serif;
    font-size:300px;
    font-weight:800;
    letter-spacing:-.15em;
    color:rgba(255,255,255,.025);
}


/* =========================================================
   CONTACT
========================================================= */

.cd-contact{
    border-bottom:1px solid var(--line);
}


.cd-contact-layout{
    margin-top:90px;
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:12vw;
}


.cd-contact-heading h2{
    font-family:Manrope,sans-serif;
    font-size:clamp(55px,6vw,90px);
    line-height:.85;
    letter-spacing:-.08em;
    margin:20px 0 30px;
}


.cd-contact-heading h2 em{
    color:var(--orange);
    font-style:normal;
}


.cd-contact-heading > p:not(.cd-small-label){
    color:#77736d;
    max-width:390px;
    font-size:13px;
    line-height:1.8;
}


.cd-contact-details{
    margin-top:70px;
}


.cd-contact-details > *,
.cd-contact-details a{
    display:block;
    width:max-content;
    margin-bottom:20px;
    font-size:13px;
}


.cd-contact-details span{
    display:block;
    color:#5f5b56;
    font-size:8px;
    letter-spacing:.2em;
    margin-bottom:5px;
}


.cd-contact-details a:hover{
    color:var(--orange);
}


.cd-input-line{
    border-bottom:1px solid var(--line);
    padding:20px 0;
}


.cd-input-line:first-child{
    border-top:1px solid var(--line);
}


.cd-input-line label{
    display:block;
    color:#68645e;
    font-size:8px;
    letter-spacing:.18em;
    margin-bottom:10px;
}


.cd-input-line input,
.cd-input-line textarea{
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    color:#fff;
    font-size:16px;
}


.cd-input-line input::placeholder,
.cd-input-line textarea::placeholder{
    color:#46433f;
}


.cd-input-line textarea{
    resize:vertical;
    min-height:120px;
}


.cd-input-line input:focus,
.cd-input-line textarea:focus{
    color:var(--orange-light);
}


.cd-send-btn{
    margin-top:35px;
    border:0;
    border-bottom:1px solid var(--orange);
    background:transparent;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    padding:15px 0;
    cursor:pointer;
    font-size:10px;
    letter-spacing:.18em;
}


.cd-send-btn i{
    color:var(--orange);
    transition:.3s ease;
}


.cd-send-btn:hover i{
    transform:translate(5px,-5px);
}


.cd-contact-form.sending{
    opacity:.5;
    pointer-events:none;
}


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

.cd-footer{
    padding:90px 5vw 25px;
}


.cd-footer-top{
    width:min(var(--max),100%);
    margin:auto;
    display:grid;
    grid-template-columns:1.2fr 1fr .6fr;
    gap:60px;
    padding-bottom:90px;
}


.footer-logo{
    font-size:40px;
}


.cd-footer-brand p{
    margin-top:25px;
    color:#67635e;
    font-size:12px;
    line-height:1.8;
}


.cd-footer-nav{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
}


.cd-footer-nav div{
    display:flex;
    flex-direction:column;
    gap:12px;
}


.cd-footer-nav small,
.cd-social small{
    color:#55514c;
    font-size:8px;
    letter-spacing:.2em;
    margin-bottom:5px;
}


.cd-footer-nav a{
    color:#aaa59d;
    font-size:11px;
}


.cd-footer-nav a:hover{
    color:var(--orange);
}


.cd-social{
    display:flex;
    align-items:center;
    align-content:flex-start;
    flex-wrap:wrap;
    gap:10px;
}


.cd-social small{
    width:100%;
}


.cd-social a{
    width:38px;
    height:38px;
    border:1px solid var(--line);
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#aaa59d;
    transition:.3s ease;
}


.cd-social a:hover{
    border-color:var(--orange);
    color:var(--orange);
    transform:translateY(-4px);
}


.cd-footer-bottom{
    width:min(var(--max),100%);
    margin:auto;
    border-top:1px solid var(--line);
    padding-top:20px;
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:20px;
    color:#4f4c48;
    font-size:8px;
    letter-spacing:.14em;
}


.cd-footer-bottom a{
    color:#77736d;
}


.cd-footer-bottom a i{
    color:var(--orange);
    margin-left:8px;
}


/* =========================================================
   TOAST
========================================================= */

#coolDrinkToast{
    position:fixed;
    left:50%;
    bottom:30px;
    transform:translate(-50%,30px);
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 20px;
    background:#111;
    border:1px solid rgba(255,120,0,.4);
    border-radius:50px;
    color:#fff;
    font-size:13px;
    opacity:0;
    visibility:hidden;
    z-index:99999;
    box-shadow:0 15px 50px rgba(0,0,0,.6);
    transition:
        opacity .4s ease,
        transform .4s ease,
        visibility .4s ease;
}


#coolDrinkToast.show{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,0);
}


.cool-toast-icon{
    width:27px;
    height:27px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--orange);
    color:#111;
    font-size:11px;
}


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

.reveal{
    opacity:0;
    transform:translateY(45px);
    transition:
        opacity .9s var(--ease),
        transform .9s var(--ease);
}


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


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

@media(max-width:1050px){

    .cd-nav{
        gap:20px;
    }

    .cd-header-cta{
        display:none;
    }

    .cd-hero-content{
        grid-template-columns:1fr .9fr;
    }

    .cd-main-bottle{
        width:75%;
    }

    .cd-orbit{
        width:400px;
        height:400px;
    }

    .cd-orbit-two{
        width:450px;
        height:250px;
    }

    .cd-about-layout{
        gap:50px;
    }

    .cd-about-image img{
        height:550px;
    }

}


@media(max-width:800px){

    .cd-header{
        height:72px;
        padding:0 6vw;
    }


    .cd-menu{
        display:block;
    }


    .cd-nav{
        position:fixed;
        inset:72px 0 0;
        background:#080808;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:flex-start;
        padding:10vw;
        gap:28px;
        transform:translateX(100%);
        transition:transform .5s var(--ease);
        border-top:1px solid var(--line);
    }


    .cd-nav.open{
        transform:translateX(0);
    }


    .cd-nav a{
        font-family:Manrope,sans-serif;
        font-size:35px;
        letter-spacing:-.05em;
        text-transform:none;
    }


    .cd-nav a::after{
        bottom:-3px;
    }


    .cd-hero{
        padding:105px 6vw 35px;
    }


    .cd-hero-top{
        font-size:8px;
    }


    .cd-hero-content{
        grid-template-columns:1fr;
        padding-top:60px;
    }


    .cd-hero h1{
        font-size:clamp(63px,17vw,120px);
    }


    .cd-hero h1 span{
        margin-left:7vw;
    }


    .cd-hero-product{
        height:440px;
        margin-top:10px;
    }


    .cd-main-bottle{
        width:260px;
        max-height:420px;
    }


    .cd-product-glow{
        width:270px;
        height:270px;
    }


    .cd-orbit{
        width:350px;
        height:350px;
    }


    .cd-orbit-two{
        width:400px;
        height:210px;
    }


    .cd-floating-word{
        display:none;
    }


    .tag-top{
        right:0;
        top:20%;
    }


    .tag-bottom{
        left:0;
        bottom:18%;
    }


    .cd-hero-bottom{
        grid-template-columns:repeat(3,1fr);
        gap:15px;
    }


    .cd-scroll{
        display:none;
    }


    .cd-stat strong{
        font-size:25px;
    }


    .cd-stat span{
        font-size:7px;
    }


    .cd-section{
        padding:100px 6vw;
    }


    .cd-about-layout{
        grid-template-columns:1fr;
        gap:55px;
    }


    .cd-about-image{
        grid-column:auto;
        grid-row:auto;
    }


    .cd-about-image img{
        height:500px;
    }


    .cd-about-heading h2{
        font-size:55px;
    }


    .cd-section-head{
        grid-template-columns:1fr;
        gap:30px;
    }


    .cd-section-head h2{
        font-size:70px;
    }


    .cd-section-intro{
        max-width:400px;
    }


    .cd-drink-row,
    .cd-drink-row.reverse{
        grid-template-columns:45px 1fr;
        min-height:520px;
    }


    .cd-drink-number{
        padding-top:25px;
    }


    .cd-drink-image,
    .cd-drink-row.reverse .cd-drink-image{
        grid-column:2;
        grid-row:1;
        height:520px;
    }


    .cd-drink-info,
    .cd-drink-row.reverse .cd-drink-info{
        grid-column:2;
        grid-row:1;
        align-self:end;
        position:relative;
        z-index:5;
        padding:30px 0 30px 20px;
        background:linear-gradient(
            transparent,
            rgba(8,8,8,.95) 25%
        );
    }


    .cd-drink-info h3{
        font-size:65px;
    }


    .cd-drink-info p{
        max-width:300px;
    }


    .cd-offer-layout{
        grid-template-columns:1fr;
        gap:60px;
    }


    .cd-story{
        min-height:650px;
    }


    .cd-story-content{
        margin-top:80px;
    }


    .cd-story-bottom{
        margin-top:70px;
        gap:40px;
        flex-direction:column;
        align-items:flex-start;
    }


    .cd-experience .cd-section-head{
        grid-template-columns:1fr;
    }


    .cd-experience-item{
        grid-template-columns:50px 1fr;
        padding:30px 0;
    }


    .cd-experience-item > p{
        grid-column:2;
    }


    .cd-contact-layout{
        grid-template-columns:1fr;
        gap:70px;
    }


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


    .cd-social{
        grid-column:1 / -1;
    }


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

}


@media(max-width:520px){

    .cd-logo{
        font-size:21px;
    }


    .cd-hero{
        min-height:auto;
        padding-bottom:30px;
    }


    .cd-hero-copy > p{
        width:95%;
        font-size:13px;
    }


    .cd-hero-actions{
        gap:20px;
        flex-wrap:wrap;
    }


    .cd-hero-product{
        height:400px;
    }


    .cd-main-bottle{
        width:225px;
    }


    .cd-orbit{
        width:290px;
        height:290px;
    }


    .cd-orbit-two{
        width:330px;
        height:180px;
    }


    .cd-product-tag{
        min-width:90px;
    }


    .cd-hero-bottom{
        gap:7px;
    }


    .cd-stat{
        gap:5px;
    }


    .cd-stat strong{
        font-size:21px;
    }


    .cd-section{
        padding-top:80px;
        padding-bottom:80px;
    }


    .cd-about-heading h2,
    .cd-section-head h2{
        font-size:51px;
    }


    .cd-about-image img{
        height:400px;
    }


    .large-copy{
        font-size:23px;
    }


    .cd-drink-showcase{
        margin-top:65px;
    }


    .cd-drink-row,
    .cd-drink-row.reverse{
        grid-template-columns:32px 1fr;
    }


    .cd-drink-image::before{
        width:260px;
        height:260px;
    }


    .cd-drink-image img{
        width:190px;
        max-height:400px;
    }


    .cd-drink-info h3{
        font-size:53px;
    }


    .cd-drink-info{
        padding-left:10px;
    }


    .cd-offer-line{
        grid-template-columns:35px 1fr 20px;
        gap:10px;
        min-height:145px;
    }


    .cd-offer-line h3{
        font-size:25px;
    }


    .cd-offer-line p{
        font-size:11px;
    }


    .cd-story-content h2{
        font-size:52px;
    }


    .cd-story-bg-text{
        font-size:150px;
        top:30%;
    }


    .cd-order{
        min-height:500px;
    }


    .cd-order-content h2{
        font-size:67px;
    }


    .cd-order-mark{
        font-size:200px;
        bottom:-60px;
    }


    .cd-contact-heading h2{
        font-size:53px;
    }


    .cd-footer{
        padding-left:6vw;
        padding-right:6vw;
    }


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


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


    .cd-social{
        grid-column:auto;
    }


    #coolDrinkToast{
        bottom:20px;
        max-width:90%;
        width:max-content;
        font-size:12px;
        padding:11px 16px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }

}
.cd-main-bottle{
    width:min(410px,65%);
    max-height:620px;
    object-fit:contain;
    position:relative;
    z-index:5;

    filter:
        drop-shadow(0 40px 45px rgba(0,0,0,.8))
        drop-shadow(0 0 45px rgba(255,120,0,.12));

    transition:transform .15s linear;

    /* UP-DOWN FLOATING */
    animation: cdBottleFloat 3.8s ease-in-out infinite;
}


@keyframes cdBottleFloat{

    0%{
        margin-top:0;
    }

    50%{
        margin-top:-24px;
    }

    100%{
        margin-top:0;
    }

}
/* ================================
   PREMIUM SLIM MARQUEE
================================ */

.cd-marquee{
    width:100%;
    overflow:hidden;
    padding:14px 0;
    background:#f4a400;
    border-top:1px solid rgba(0,0,0,.12);
    border-bottom:1px solid rgba(0,0,0,.12);
}

.cd-marquee-track{
    display:flex;
    align-items:center;
    width:max-content;
    gap:28px;
    white-space:nowrap;
    animation:cdMarqueeMove 22s linear infinite;
    will-change:transform;
}

.cd-marquee-track span{
    font-family:"Manrope",sans-serif;
    font-size:clamp(12px,1vw,15px);
    font-weight:800;
    letter-spacing:.16em;
    line-height:1;
    color:#17130b;
}

.cd-marquee-track i{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    font-style:normal;
    color:#17130b;
    opacity:.65;
}

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

/* Mobile */
@media(max-width:600px){

    .cd-marquee{
        padding:11px 0;
    }

    .cd-marquee-track{
        gap:20px;
        animation-duration:18s;
    }

    .cd-marquee-track span{
        font-size:10px;
        letter-spacing:.13em;
    }

    .cd-marquee-track i{
        font-size:8px;
    }
}

/* Accessibility */
@media(prefers-reduced-motion:reduce){
    .cd-marquee-track{
        animation:none;
    }
}

/* =================================
   DRINK BOTTLE — OLD + NEW MOTION
================================= */

.cd-drink-image img{
    animation:cdDrinkFullMotion 4s ease-in-out infinite;
    transform-origin:center center;
    will-change:transform, filter;
}


/* Old up/down floating
   +
   New realistic movement */

@keyframes cdDrinkFullMotion{

    0%,100%{
        transform:
            translate3d(0,0,0)
            rotateZ(0deg)
            rotateY(-5deg);
    }

    20%{
        transform:
            translate3d(-6px,-9px,0)
            rotateZ(-1.5deg)
            rotateY(5deg);
    }

    40%{
        transform:
            translate3d(5px,-18px,0)
            rotateZ(1deg)
            rotateY(9deg);
    }

    60%{
        transform:
            translate3d(7px,-11px,0)
            rotateZ(2deg)
            rotateY(-5deg);
    }

    80%{
        transform:
            translate3d(-5px,-16px,0)
            rotateZ(-1.5deg)
            rotateY(-9deg);
    }

}


/* Natural product shadow */

.cd-drink-image img{
    filter:
        drop-shadow(0 18px 22px rgba(0,0,0,.22));
}


/* Hover interaction */

.cd-drink-image:hover img{
    animation-play-state:paused;
    transform:
        translateY(-12px)
        rotateZ(-3deg)
        rotateY(12deg)
        scale(1.04);

    filter:
        drop-shadow(0 25px 30px rgba(0,0,0,.28));

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        filter .45s ease;
}


/* Mobile */

@media(max-width:767px){

    .cd-drink-image img{
        animation-duration:4.5s;
    }

}


/* Reduced motion */

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

    .cd-drink-image img{
        animation:none;
    }

}
/* =========================================
   BOTTLE SCROLL REVEAL
   ========================================= */

.cd-drink-image img{
    animation:
        cdBottleScrollReveal linear both,
        cdDrinkFullMotion 4s ease-in-out infinite;

    animation-timeline:
        view(),
        auto;

    animation-range:
        entry 0% cover 35%,
        normal;

    will-change:transform, opacity, filter;
}


/* Bottle enters from below */

@keyframes cdBottleScrollReveal{

    0%{
        opacity:0;
        transform:
            translateY(90px)
            scale(.78)
            rotateZ(-8deg);
        filter:
            blur(8px)
            drop-shadow(0 0 0 rgba(0,0,0,0));
    }

    45%{
        opacity:1;
        transform:
            translateY(15px)
            scale(.96)
            rotateZ(2deg);
        filter:
            blur(1px)
            drop-shadow(0 18px 22px rgba(0,0,0,.18));
    }

    100%{
        opacity:1;
        transform:
            translateY(0)
            scale(1)
            rotateZ(0deg);
        filter:
            blur(0)
            drop-shadow(0 20px 25px rgba(0,0,0,.22));
    }

}


/* =========================================
   FALLBACK
   ========================================= */

@supports not (animation-timeline:view()){

    .cd-drink-image img{
        animation:cdDrinkFullMotion 4s ease-in-out infinite;
        opacity:1;
    }

}


/* Mobile */

@media(max-width:767px){

    .cd-drink-image img{
        animation-range:
            entry 0% cover 30%,
            normal;
    }

}


/* Reduced motion */

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

    .cd-drink-image img{
        animation:none;
        opacity:1;
        transform:none;
        filter:none;
    }

}
/* notice */
/* =========================================
   COOLDRINK — PRACTICE PROJECT NOTICE
========================================= */

#cdPracticeNotice{
    position:fixed;
    inset:0;
    z-index:99999;

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

    padding:30px;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(255,176,0,.16),
            transparent 34%
        ),
        #f5ead5;

    opacity:1;
    visibility:visible;

    transition:
        opacity .9s cubic-bezier(.22,.61,.36,1),
        visibility .9s;
}


/* Notice disappearing */

#cdPracticeNotice.cd-notice-hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}


/* Main content */

.cd-notice-content{
    position:relative;

    width:min(760px,100%);

    padding:42px 48px;

    border-top:2px solid #15120d;
    border-bottom:2px solid #15120d;

    transform:translateY(30px) scale(.96);
    opacity:0;

    animation:
        cdNoticeEnter 1.1s
        cubic-bezier(.16,1,.3,1)
        .35s forwards;
}


@keyframes cdNoticeEnter{

    to{
        transform:translateY(0) scale(1);
        opacity:1;
    }

}


/* Top line */

.cd-notice-top{
    display:flex;
    align-items:center;
    gap:14px;

    margin-bottom:30px;
}

.cd-notice-label{
    font-family:"Manrope",sans-serif;

    font-size:11px;
    font-weight:900;

    letter-spacing:.2em;

    color:#17130b;
}

.cd-notice-line{
    flex:1;
    height:1px;

    background:rgba(23,19,11,.25);
}

.cd-notice-number{
    font-family:"Manrope",sans-serif;

    font-size:11px;
    font-weight:800;

    opacity:.5;
}


/* Icon */

.cd-notice-icon{
    width:52px;
    height:52px;

    display:grid;
    place-items:center;

    margin-bottom:22px;

    border:1px solid rgba(23,19,11,.25);
    border-radius:50%;

    color:#17130b;

    animation:cdNoticeIcon 3s ease-in-out infinite;
}

.cd-notice-icon i{
    font-size:18px;
}


@keyframes cdNoticeIcon{

    0%,100%{
        transform:rotate(0deg) translateY(0);
    }

    50%{
        transform:rotate(8deg) translateY(-4px);
    }

}


/* Kicker */

.cd-notice-kicker{
    margin:0 0 12px;

    font-family:"Manrope",sans-serif;

    font-size:10px;
    font-weight:900;

    letter-spacing:.22em;

    color:#d87900;
}


/* Heading */

.cd-notice-content h1{
    margin:0;

    font-family:"Cormorant Garamond","Playfair Display",serif;

    font-size:clamp(42px,6vw,76px);

    line-height:.9;
    letter-spacing:-.04em;

    font-weight:700;

    color:#17130b;
}

.cd-notice-content h1 span{
    color:#e18700;
}


/* Description */

.cd-notice-text{
    max-width:620px;

    margin:28px 0 26px;

    font-family:"Manrope",sans-serif;

    font-size:14px;
    line-height:1.8;

    color:#62594c;
}


/* Points */

.cd-notice-points{
    display:flex;
    flex-wrap:wrap;

    gap:24px;

    padding:20px 0;

    border-top:1px solid rgba(23,19,11,.14);
    border-bottom:1px solid rgba(23,19,11,.14);
}

.cd-notice-points div{
    display:flex;
    align-items:center;
    gap:9px;

    font-family:"Manrope",sans-serif;

    font-size:11px;
    font-weight:800;

    color:#29241c;
}

.cd-notice-points i{
    color:#e18700;
    font-size:12px;
}


/* Bottom */

.cd-notice-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:25px;

    padding-top:24px;
}

.cd-notice-bottom > span{
    display:flex;
    align-items:center;
    gap:8px;

    font-family:"Manrope",sans-serif;

    font-size:10px;
    font-weight:700;

    color:#756c5e;
}

.cd-notice-bottom > span i{
    color:#e18700;
}


/* Continue button */

#cdEnterProject{
    display:inline-flex;
    align-items:center;
    gap:14px;

    border:0;
    outline:0;

    padding:14px 20px;

    background:#17130b;
    color:#fff;

    font-family:"Manrope",sans-serif;

    font-size:11px;
    font-weight:900;

    letter-spacing:.04em;

    cursor:pointer;

    transition:
        transform .3s ease,
        background .3s ease;
}

#cdEnterProject i{
    transition:transform .3s ease;
}

#cdEnterProject:hover{
    background:#e18700;
    transform:translateY(-3px);
}

#cdEnterProject:hover i{
    transform:translateX(5px);
}


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

body.cd-project-opening > *:not(#cdPracticeNotice){
    animation:cdWebsiteReveal 1.2s
        cubic-bezier(.16,1,.3,1)
        both;
}


@keyframes cdWebsiteReveal{

    from{
        opacity:0;
        transform:translateY(25px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


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

@media(max-width:700px){

    #cdPracticeNotice{
        padding:20px;
    }

    .cd-notice-content{
        padding:30px 22px;
    }

    .cd-notice-content h1{
        font-size:clamp(42px,13vw,62px);
    }

    .cd-notice-text{
        font-size:12px;
        line-height:1.7;
        margin-top:22px;
    }

    .cd-notice-points{
        gap:13px;
    }

    .cd-notice-points div{
        width:100%;
    }

    .cd-notice-bottom{
        align-items:flex-start;
        flex-direction:column;
    }

    #cdEnterProject{
        width:100%;
        justify-content:center;
    }

}


/* Reduced motion */

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

    .cd-notice-content,
    .cd-notice-icon,
    body.cd-project-opening > *:not(#cdPracticeNotice){
        animation:none;
    }

    .cd-notice-content{
        opacity:1;
        transform:none;
    }

}
/* =========================================
   COOLDRINK PRACTICE NOTICE
   FULL RESPONSIVE VERSION
========================================= */

#cdPracticeNotice{
    position:fixed;
    inset:0;
    z-index:99999;

    width:100%;
    height:100dvh;

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

    padding:clamp(16px,4vw,40px);

    overflow-y:auto;
    overflow-x:hidden;

    box-sizing:border-box;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(255,176,0,.16),
            transparent 38%
        ),
        #f5ead5;

    opacity:1;
    visibility:visible;

    transition:
        opacity .9s ease,
        visibility .9s ease;
}


#cdPracticeNotice.cd-notice-hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}


/* =========================================
   NOTICE CONTENT
========================================= */

.cd-notice-content{
    position:relative;

    width:min(760px,100%);

    max-height:calc(100dvh - 32px);

    padding:
        clamp(24px,4vw,44px)
        clamp(20px,5vw,50px);

    box-sizing:border-box;

    border-top:2px solid #17130b;
    border-bottom:2px solid #17130b;

    transform:translateY(30px) scale(.96);
    opacity:0;

    animation:
        cdNoticeEnter 1s
        cubic-bezier(.16,1,.3,1)
        .25s forwards;
}


@keyframes cdNoticeEnter{

    to{
        transform:translateY(0) scale(1);
        opacity:1;
    }

}


/* =========================================
   TOP
========================================= */

.cd-notice-top{
    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:clamp(18px,3vw,30px);
}

.cd-notice-label{
    font-family:"Manrope",sans-serif;
    font-size:clamp(8px,1vw,11px);
    font-weight:900;
    letter-spacing:.18em;
    white-space:nowrap;
}

.cd-notice-line{
    flex:1;
    height:1px;
    background:rgba(23,19,11,.22);
}

.cd-notice-number{
    font-family:"Manrope",sans-serif;
    font-size:10px;
    font-weight:800;
    opacity:.5;
}


/* =========================================
   ICON
========================================= */

.cd-notice-icon{
    width:clamp(42px,6vw,52px);
    height:clamp(42px,6vw,52px);

    display:grid;
    place-items:center;

    margin-bottom:clamp(15px,2.5vw,22px);

    border:1px solid rgba(23,19,11,.25);
    border-radius:50%;

    animation:cdNoticeIcon 3s ease-in-out infinite;
}

.cd-notice-icon i{
    font-size:clamp(14px,2vw,18px);
}


@keyframes cdNoticeIcon{

    0%,100%{
        transform:translateY(0) rotate(0);
    }

    50%{
        transform:translateY(-4px) rotate(8deg);
    }

}


/* =========================================
   TEXT
========================================= */

.cd-notice-kicker{
    margin:0 0 10px;

    font-family:"Manrope",sans-serif;

    font-size:clamp(8px,1vw,10px);
    font-weight:900;

    letter-spacing:.18em;

    color:#d87900;
}

.cd-notice-content h1{
    margin:0;

    font-family:
        "Cormorant Garamond",
        "Playfair Display",
        serif;

    font-size:clamp(40px,7vw,76px);

    line-height:.88;
    letter-spacing:-.04em;

    font-weight:700;

    color:#17130b;
}

.cd-notice-content h1 span{
    color:#e18700;
}


/* =========================================
   DESCRIPTION
========================================= */

.cd-notice-text{
    width:min(620px,100%);

    margin:
        clamp(18px,3vw,28px)
        0
        clamp(18px,3vw,26px);

    font-family:"Manrope",sans-serif;

    font-size:clamp(11px,1.3vw,14px);

    line-height:1.75;

    color:#62594c;
}


/* =========================================
   FEATURE POINTS
========================================= */

.cd-notice-points{
    display:flex;
    flex-wrap:wrap;
    align-items:center;

    gap:
        clamp(12px,3vw,24px);

    padding:
        clamp(14px,2.5vw,20px)
        0;

    border-top:1px solid rgba(23,19,11,.14);
    border-bottom:1px solid rgba(23,19,11,.14);
}

.cd-notice-points div{
    display:flex;
    align-items:center;
    gap:8px;

    font-family:"Manrope",sans-serif;

    font-size:clamp(9px,1vw,11px);
    font-weight:800;

    color:#29241c;

    white-space:nowrap;
}

.cd-notice-points i{
    color:#e18700;
    font-size:11px;
}


/* =========================================
   BOTTOM
========================================= */

.cd-notice-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    padding-top:clamp(18px,3vw,24px);
}

.cd-notice-bottom > span{
    display:flex;
    align-items:center;
    gap:7px;

    font-family:"Manrope",sans-serif;

    font-size:clamp(8px,1vw,10px);
    font-weight:700;

    color:#756c5e;
}

.cd-notice-bottom > span i{
    color:#e18700;
}


/* =========================================
   BUTTON
========================================= */

#cdEnterProject{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:12px;

    min-height:46px;

    padding:
        12px
        clamp(16px,2vw,20px);

    border:0;
    outline:0;

    background:#17130b;
    color:#fff;

    font-family:"Manrope",sans-serif;

    font-size:clamp(9px,1vw,11px);
    font-weight:900;

    cursor:pointer;

    white-space:nowrap;

    transition:
        transform .3s ease,
        background .3s ease;
}

#cdEnterProject i{
    transition:transform .3s ease;
}

#cdEnterProject:hover{
    background:#e18700;
    transform:translateY(-3px);
}

#cdEnterProject:hover i{
    transform:translateX(5px);
}


/* =========================================
   TABLET
========================================= */

@media(max-width:800px){

    #cdPracticeNotice{
        padding:24px;
    }

    .cd-notice-content{
        width:min(650px,100%);
    }

    .cd-notice-points{
        gap:15px;
    }

}


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

@media(max-width:600px){

    #cdPracticeNotice{
        align-items:center;
        padding:16px;
    }

    .cd-notice-content{
        width:100%;
        padding:24px 18px;

        max-height:calc(100dvh - 32px);
    }

    .cd-notice-top{
        margin-bottom:20px;
    }

    .cd-notice-icon{
        margin-bottom:16px;
    }

    .cd-notice-content h1{
        font-size:clamp(38px,12vw,58px);
        line-height:.9;
    }

    .cd-notice-text{
        font-size:11px;
        line-height:1.7;
        margin:20px 0;
    }

    .cd-notice-points{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:12px 8px;
    }

    .cd-notice-points div{
        font-size:9px;
    }

    .cd-notice-bottom{
        flex-direction:column;
        align-items:stretch;
        gap:16px;
    }

    .cd-notice-bottom > span{
        justify-content:center;
        text-align:center;
    }

    #cdEnterProject{
        width:100%;
    }

}


/* =========================================
   VERY SMALL PHONES
========================================= */

@media(max-width:380px){

    #cdPracticeNotice{
        padding:10px;
    }

    .cd-notice-content{
        padding:20px 15px;
    }

    .cd-notice-content h1{
        font-size:36px;
    }

    .cd-notice-text{
        font-size:10px;
        line-height:1.6;
    }

    .cd-notice-points{
        grid-template-columns:1fr;
        gap:9px;
    }

    .cd-notice-points div{
        font-size:9px;
    }

    #cdEnterProject{
        min-height:42px;
    }

}


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

@media(max-height:520px) and (orientation:landscape){

    #cdPracticeNotice{
        align-items:flex-start;
        padding:15px;
    }

    .cd-notice-content{
        margin:auto 0;
        padding:20px 25px;
    }

    .cd-notice-icon{
        display:none;
    }

    .cd-notice-content h1{
        font-size:42px;
    }

    .cd-notice-text{
        margin:12px 0;
    }

    .cd-notice-points{
        padding:10px 0;
    }

    .cd-notice-bottom{
        padding-top:12px;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

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

    .cd-notice-content,
    .cd-notice-icon{
        animation:none;
    }

    .cd-notice-content{
        opacity:1;
        transform:none;
    }

}

/* =========================================
   COOLDRINK — FINAL MOBILE MENU ONLY
========================================= */

@media (max-width: 800px){

    .cd-header{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 72px;
        z-index: 9990;
    }

    /* HAMBURGER BUTTON */
    .cd-menu{
        display: flex;
        position: relative;
        width: 44px;
        height: 44px;
        padding: 0;
        margin-left: auto;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 7px;

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

        color: #fff !important;
        z-index: 10005;
    }

    /* WHITE MENU LINES */
    .cd-menu span{
        display: block;
        width: 25px;
        height: 2px;

        background: #fff !important;
        border-radius: 10px;

        transition:
            transform .35s ease,
            opacity .25s ease,
            background .25s ease;
    }

    /* HAMBURGER → WHITE X */
    .cd-menu.open span:first-child{
        transform: translateY(4.5px) rotate(45deg);
        background: #fff !important;
    }

    .cd-menu.open span:last-child{
        transform: translateY(-4.5px) rotate(-45deg);
        background: #fff !important;
    }

    /* MOBILE NAVIGATION */
    .cd-nav{
        position: fixed !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100dvh !important;

        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 0;

        background: #f5ead5 !important;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        z-index: 10000;

        transition:
            opacity .35s ease,
            visibility .35s ease;
    }

    /* MENU OPEN */
    .cd-nav.open{
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* MENU LINKS */
    .cd-nav a{
        width: min(88%, 420px);

        padding: 17px 0;

        font-size: clamp(25px, 7vw, 38px);
        line-height: 1;
        text-align: center;

        border-bottom: 1px solid rgba(0,0,0,.12);

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

        transition:
            opacity .35s ease,
            transform .35s ease,
            color .25s ease;
    }

    /* LINK REVEAL */
    .cd-nav.open a{
        opacity: 1;
        transform: translateY(0);
    }

    .cd-nav.open a:nth-child(1){
        transition-delay: .04s;
    }

    .cd-nav.open a:nth-child(2){
        transition-delay: .08s;
    }

    .cd-nav.open a:nth-child(3){
        transition-delay: .12s;
    }

    .cd-nav.open a:nth-child(4){
        transition-delay: .16s;
    }

    .cd-nav.open a:nth-child(5){
        transition-delay: .20s;
    }

    .cd-nav.open a:nth-child(6){
        transition-delay: .24s;
    }

    /* ACTIVE LINK */
    .cd-nav a.active{
        font-weight: 700;
    }

    /* HIDE DESKTOP CTA */
    .cd-header-cta{
        display: none;
    }

    /* STOP BACKGROUND SCROLL */
    body:has(.cd-nav.open){
        overflow: hidden;
    }
}


/* =========================================
   SMALL PHONES
========================================= */

@media (max-width: 480px){

    .cd-header{
        height: 66px;
    }

    .cd-menu{
        width: 42px;
        height: 42px;
    }

    .cd-menu span{
        width: 23px;
        height: 2px;
        background: #fff !important;
    }

    .cd-nav a{
        padding: 15px 0;
        font-size: 27px;
    }
}


/* =========================================
   VERY SMALL PHONES
========================================= */

@media (max-width: 360px){

    .cd-nav a{
        padding: 13px 0;
        font-size: 25px;
    }

    .cd-menu{
        width: 40px;
        height: 40px;
    }

    .cd-menu span{
        width: 22px;
        background: #fff !important;
    }
}


/* =========================================
   REDUCED MOTION
========================================= */

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

    .cd-nav,
    .cd-nav a,
    .cd-menu span{
        transition: none !important;
    }
}
/* =========================
   ABOUT IMAGE — CLEAN LOOK
========================= */

.cd-about-image{
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.cd-about-image::before,
.cd-about-image::after{
    display: none !important;
    content: none !important;
}

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

    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    background: transparent !important;

    object-fit: contain;
    mix-blend-mode: normal;

    image-rendering: auto;
    filter: none !important;
}
.cd-floating-order{
    right:22px;
    bottom:22px;
    min-height:46px;
    padding:5px 7px 5px 13px;
    gap:8px;
}

.cd-order-dot{
    width:6px;
    height:6px;
    flex-basis:6px;
}

.cd-order-text{
    font-size:10px;
    letter-spacing:.12em;
}

.cd-order-arrow{
    width:32px;
    height:32px;
}

.cd-order-arrow i{
    font-size:10px;
}

@media (max-width:800px){
    .cd-floating-order{
        right:13px;
        bottom:15px;
        min-height:42px;
        padding:5px 6px 5px 11px;
        gap:7px;
    }

    .cd-order-text{
        font-size:9px;
        letter-spacing:.10em;
    }

    .cd-order-dot{
        width:5px;
        height:5px;
        flex-basis:5px;
    }

    .cd-order-arrow{
        width:29px;
        height:29px;
    }

    .cd-order-arrow i{
        font-size:9px;
    }
}

@media (max-width:380px){
    .cd-floating-order{
        right:10px;
        bottom:12px;
        min-height:40px;
        padding-left:10px;
    }

    .cd-order-text{
        font-size:8px;
    }

    .cd-order-arrow{
        width:27px;
        height:27px;
    }
}

.cd-floating-order{
    position:fixed !important;
    right:22px !important;
    bottom:22px !important;
    z-index:9995 !important;

    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:8px;

    min-height:46px;
    padding:5px 7px 5px 13px;

    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;

    background:#f5ead5;
    color:#111;
    border:1px solid rgba(0,0,0,.16);
    border-radius:999px;
    text-decoration:none;

    box-shadow:0 12px 30px rgba(0,0,0,.18);
    transition:transform .3s ease, box-shadow .3s ease;
}

.cd-order-dot{
    width:6px;
    height:6px;
    flex:0 0 6px;
    border-radius:50%;
}

.cd-order-text{
    font-size:10px;
    font-weight:800;
    letter-spacing:.12em;
    white-space:nowrap;
}

.cd-order-arrow{
    width:32px;
    height:32px;
    flex:0 0 32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#111;
    color:#fff;
}

.cd-order-arrow i{
    font-size:10px;
}

.cd-floating-order:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 34px rgba(0,0,0,.22);
}

.cd-floating-order:active{
    transform:scale(.96);
}


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

@media (max-width:800px){

    .cd-floating-order{
        right:14px !important;
        bottom:16px !important;

        min-height:43px;
        padding:5px 6px 5px 11px;
        gap:7px;

        max-width:calc(100vw - 28px);
    }

    .cd-order-dot{
        width:5px;
        height:5px;
        flex-basis:5px;
    }

    .cd-order-text{
        font-size:9px;
        letter-spacing:.10em;
    }

    .cd-order-arrow{
        width:30px;
        height:30px;
        flex-basis:30px;
    }

    .cd-order-arrow i{
        font-size:9px;
    }
}


/* SMALL PHONES */

@media (max-width:380px){

    .cd-floating-order{
        right:11px !important;
        bottom:13px !important;

        min-height:40px;
        padding:4px 5px 4px 10px;
        gap:6px;
    }

    .cd-order-text{
        font-size:8px;
        letter-spacing:.09em;
    }

    .cd-order-arrow{
        width:28px;
        height:28px;
        flex-basis:28px;
    }

    .cd-order-arrow i{
        font-size:8px;
    }
}


/* REDUCED MOTION */

@media (prefers-reduced-motion:reduce){
    .cd-floating-order{
        transition:none !important;
    }
}

/* ===== ORDER NOW HOVER ANIMATION ===== */

.cd-floating-order{
    overflow:hidden;
    isolation:isolate;
}

.cd-floating-order::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:70%;
    height:100%;
    background:linear-gradient(
        100deg,
        transparent,
        rgba(255,255,255,.55),
        transparent
    );
    transform:skewX(-20deg);
    transition:left .6s ease;
    pointer-events:none;
    z-index:-1;
}

.cd-floating-order:hover{
    transform:translateY(-5px) scale(1.02);
    box-shadow:
        0 16px 35px rgba(0,0,0,.20),
        0 0 0 5px rgba(232,117,34,.08);
}

.cd-floating-order:hover::before{
    left:140%;
}

.cd-floating-order:hover .cd-order-arrow{
    transform:rotate(45deg) scale(1.05);
    color:orange;
}

.cd-floating-order:hover .cd-order-dot{
    transform:scale(1.35);
}

.cd-order-arrow{
    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        background .3s ease;
}

.cd-order-dot{
    transition:transform .3s ease;
}


/* Mobile tap feedback */
@media (max-width:800px){

    .cd-floating-order:active{
        transform:scale(.94);
        box-shadow:0 8px 20px rgba(0,0,0,.18);
    }

    .cd-floating-order:active .cd-order-arrow{
        transform:rotate(45deg) scale(.95);
    }
}


/* Reduced motion */
@media (prefers-reduced-motion:reduce){

    .cd-floating-order,
    .cd-floating-order::before,
    .cd-order-arrow,
    .cd-order-dot{
        transition:none !important;
    }
}