:root{
  --navy:#02263a;
  --deep:#011c2c;
  --sea:#087fa8;
  --sky:#58b8d2;
  --orange:#f58a24;
  --paper:#f4f3ef;
  --white:#fff;
  --ink:#06283b;
  --muted:#667984;
  --line:#d4dcde;
  /* Unified site boundary / gutter */
  --pad:clamp(18px,3vw,48px);
  --page-padding:var(--pad);

  /* Aliases already referenced elsewhere in this stylesheet */
  --satomen-orange:var(--orange);
  --ocean-deep:var(--deep);
}

*,*::before,*::after{box-sizing:border-box}

.sat-home{overflow:clip;background:var(--paper);color:var(--ink)}
.wrap{
  width:100%;
  max-width:none;
  margin:0;
  padding-left:var(--pad);
  padding-right:var(--pad);
  box-sizing:border-box;
}
.sat-home a{text-decoration:none;color:inherit}
.label{font:700 10px/1 sans-serif;letter-spacing:.18em;color:var(--orange)}
.label.light{color:#ffad66}

.primary-btn{
  display:inline-flex;align-items:center;gap:28px;
  padding:17px 21px;background:var(--orange);color:#071f2b!important;
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase
}
.under-link{
  display:inline-block;padding-bottom:5px;border-bottom:1px solid currentColor;
  color:#fff;font-size:10px;text-transform:uppercase
}
.under-link.dark{color:var(--ink)}


/* HERO */

/* HERO */

.hero{
    position:relative;
    height:100svh;
    min-height:720px;
    overflow:hidden;
    background:var(--deep);
    color:#fff;
}

.hero-video,
.hero-overlay{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.hero-video{
    object-fit:cover;
}

.hero-overlay{
    background:
        linear-gradient(
            90deg,
            rgba(1,28,44,.92) 0%,
            rgba(1,28,44,.65) 48%,
            rgba(1,28,44,.3) 100%
        ),
        linear-gradient(
            0deg,
            rgba(1,28,44,.94) 0%,
            transparent 58%
        );
}

.hero-content{
    position:relative;
    z-index:2;
    width:100%;
    height:100%;
    padding:120px var(--page-padding) 28px;
    display:flex;
    flex-direction:column;
}


/* MAIN */

.hero-main{
    flex:1;
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(300px,.55fr);
    gap:clamp(60px,7vw,120px);
    align-items:center;
}

.hero h1{
    margin:0;
    max-width:950px;
    font-size:clamp(66px,7.2vw,116px);
    font-weight:400;
    line-height:.84;
    letter-spacing:-.06em;
    text-transform:uppercase;
}

.hero h1 span{
    display:block;
}

.hero h1 .hero-accent{
    color:var(--orange);
}


/* INTRO */

.hero-intro{
    width:100%;
    max-width:400px;
    justify-self:end;
}

.hero-intro > p{
    margin:0;
    max-width:380px;
    color:rgba(255,255,255,.76);
    font-size:clamp(15px,1.15vw,18px);
    line-height:1.7;
}


/* ACTIONS */

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

.hero-primary,
.hero-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:26px;
    min-height:52px;
    font-size:9px;
    font-weight:700;
    line-height:1.3;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.hero-primary{
    min-width:190px;
    padding:0 18px;
    background:var(--orange);
    color:var(--deep);
    transition:
        background .3s ease,
        transform .3s ease;
}

.hero-primary:hover{
    background:#fff;
    transform:translateY(-2px);
}

.hero-secondary{
    position:relative;
    padding:0 2px;
    color:#fff;
}

.hero-secondary::after{
    content:"";
    position:absolute;
    right:0;
    bottom:4px;
    left:0;
    height:1px;
    background:rgba(255,255,255,.5);
    transform-origin:left;
    transition:transform .3s ease;
}

.hero-secondary:hover::after{
    transform:scaleX(.65);
}

.hero-arrow{
    font-size:13px;
    font-weight:400;
    transition:transform .3s ease;
}

.hero-primary:hover .hero-arrow,
.hero-secondary:hover .hero-arrow{
    transform:translate(3px,-3px);
}


/* BOTTOM CAPABILITIES */

.hero-capabilities{
    width:100%;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    border-top:1px solid rgba(255,255,255,.25);
}

.hero-capabilities a{
    position:relative;

    min-height:58px;

    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;

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

    transition:color .3s ease;
}

/* Evenly position each label across the full width */

.hero-capabilities a:nth-child(1){
    justify-self:start;
}

.hero-capabilities a:nth-child(2){
    justify-self:center;
}

.hero-capabilities a:nth-child(3){
    justify-self:center;
}

.hero-capabilities a:nth-child(4){
    justify-self:end;
}

.hero-capabilities a::before{
    content:"";
    position:absolute;
    top:-1px;
    left:0;
    width:0;
    height:1px;
    background:var(--orange);
    transition:width .35s ease;
}

.hero-capabilities a:hover{
    color:#fff;
}

.hero-capabilities a:hover::before{
    width:42px;
}

.hero-capabilities span{
    color:var(--orange);
    font-size:9px;
    font-weight:600;
}

.hero-capabilities strong{
    font-size:9px;
    font-weight:500;
    letter-spacing:.1em;
    text-transform:uppercase;
}


/* TABLET */

@media(max-width:1000px){

    .hero{
        height:auto;
        min-height:100svh;
    }

    .hero-content{
        min-height:100svh;
        padding-top:125px;
    }

    .hero-main{
        grid-template-columns:1fr;
        align-content:center;
        gap:38px;
        padding:50px 0;
    }

    .hero h1{
        max-width:800px;
        font-size:clamp(60px,10vw,94px);
    }

    .hero-intro{
        max-width:520px;
        justify-self:start;
    }

    .hero-intro > p{
        max-width:480px;
    }

    .hero-capabilities a:nth-child(n){
        justify-content:flex-start;
    }

}


/* MOBILE */

@media (max-width:650px){

    .hero{
        min-height:780px;
    }

    .hero-content{
        min-height:780px;
        padding-top:105px;
        padding-bottom:18px;
    }

    .hero-main{
        gap:28px;
        padding:35px 0;
    }

    .hero h1{
        font-size:clamp(48px,15vw,72px);
        line-height:.88;
        letter-spacing:-.055em;
    }

    .hero-intro > p{
        max-width:340px;
        font-size:15px;
        line-height:1.6;
    }

    .hero-actions{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
        margin-top:24px;
    }

    .hero-primary{
        min-width:190px;
    }

    .hero-secondary{
        min-height:40px;
    }

    /* MOBILE CAPABILITIES */
    .hero-capabilities{
        display:grid;
        grid-template-columns:1fr;
        border-top:1px solid rgba(255,255,255,.22);
    }

    .hero-capabilities a{
        width:100%;
        min-height:42px;
        display:grid;
        grid-template-columns:28px 1fr;
        align-items:center;
        padding:0;
        border-bottom:1px solid rgba(255,255,255,.12);
        justify-self:stretch !important;
    }

    .hero-capabilities a:last-child{
        border-bottom:0;
    }

    .hero-capabilities span{
        font-size:7px;
    }

    .hero-capabilities strong{
        font-size:7px;
        letter-spacing:.1em;
    }

} 




/* INTRO */

.intro{padding:150px 0;background:#fff}
.intro-grid{display:grid;grid-template-columns:1.2fr .62fr;gap:11vw}
.intro h2,.section-head h2,.product-intro h2,.how h2,.why h2,.future h2{
  margin:25px 0 0;font-size:clamp(54px,6vw,92px);font-weight:500;
  line-height:.89;letter-spacing:-.055em
}
.intro h2 span,.section-head h2 span,.product-intro h2 span,.how h2 span,.why h2 span,.future h2 span{color:var(--sea)}
.intro-copy{padding-top:55px}
.intro-copy>p{color:var(--muted);font-size:17px;line-height:1.75}
.intro-copy .intro-lead{font-size:25px;color:var(--ink);line-height:1.4}
.intro-lines{margin-top:38px;border-top:1px solid var(--line)}
.intro-lines span{display:block;padding:13px 0;border-bottom:1px solid var(--line);font-size:12px}




/* ABOUT INTRO */

.about-intro{
    padding:110px var(--page-padding) 130px;
    background:#f5f6f3;
    color:var(--ocean-deep);
}

.about-intro-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-bottom:20px;
    border-bottom:1px solid rgba(1,28,44,.15);
    font-size:9px;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.about-intro-top > span{
    color:var(--satomen-orange);
}

.about-intro-top a{
    display:flex;
    gap:12px;
    align-items:center;
}

.about-intro-heading{
    padding:70px 0 90px;
}

.about-intro-heading h2{
    margin:0;
    max-width:1100px;
    font-size:clamp(70px,8.2vw,132px);
    font-weight:400;
    line-height:.82;
    letter-spacing:-.065em;
    text-transform:uppercase;
}

.about-intro-heading h2 span{
    color:#1689b3;
}

.about-intro-layout{
    display:grid;
    grid-template-columns:.7fr 1.3fr;
    gap:clamp(60px,8vw,130px);
    align-items:end;
}

.about-intro-copy{
    padding-bottom:10px;
}

.about-intro-copy > p{
    max-width:430px;
    margin:0 0 65px;
    color:#526b78;
    font-size:clamp(18px,1.5vw,22px);
    line-height:1.6;
}

.about-intro-points{
    border-top:1px solid rgba(1,28,44,.15);
}

.about-intro-points > div{
    display:grid;
    grid-template-columns:45px 1fr;
    padding:25px 0;
    border-bottom:1px solid rgba(1,28,44,.15);
}

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

.about-intro-points h3{
    margin:0 0 9px;
    font-size:18px;
    font-weight:500;
    letter-spacing:-.02em;
}

.about-intro-points p{
    grid-column:2;
    max-width:330px;
    margin:0;
    color:#71818a;
    font-size:16px;
    line-height:1.6;
}


/* IMAGE */

.about-intro-image{
    position:relative;
    min-height:570px;
    overflow:hidden;
}

.about-intro-image img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s var(--ease);
}

.about-intro-image:hover img{
    transform:scale(1.025);
}

.about-image-label{
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    padding:18px 22px;
    display:flex;
    justify-content:space-between;
    background:rgba(1,28,44,.88);
    color:#fff;
    font-size:8px;
    letter-spacing:.14em;
    text-transform:uppercase;
}


/* TABLET */

@media(max-width:900px){

    .about-intro{
        padding-top:85px;
        padding-bottom:90px;
    }

    .about-intro-heading{
        padding:60px 0 70px;
    }

    .about-intro-heading h2{
        font-size:clamp(60px,11vw,100px);
    }

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

    .about-intro-copy > p{
        margin-bottom:45px;
    }

    .about-intro-image{
        min-height:500px;
    }
}


/* MOBILE */

@media(max-width:600px){

    .about-intro{
        padding:70px var(--pad) 75px;
    }

    .about-intro-top{
        font-size:7px;
    }

    .about-intro-heading{
        padding:50px 0 55px;
    }

    .about-intro-heading h2{
        font-size:clamp(48px,15vw,72px);
        line-height:.86;
    }

    .about-intro-copy > p{
        font-size:17px;
    }

    .about-intro-image{
        min-height:380px;
    }
}



/* CAPABILITIES */

/* =========================================================
   CAPABILITIES
========================================================= */

.capabilities{
    padding:140px 0 160px;
    background:var(--deep);
    color:#fff;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.section-head{
    margin-bottom:80px;
}

/* WHAT WE DO */

.section-head .label{
    margin:0 0 22px;

    color:var(--orange);

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

    letter-spacing:.2em;
    text-transform:uppercase;
}


/* CONNECTED CAPABILITY */

.section-head h2{
    margin:0;

    max-width:850px;

    font-size:clamp(64px,7vw,108px);
    font-weight:400;

    line-height:.84;
    letter-spacing:-.06em;
}

.section-head h2 span{
    color:var(--sky);
}


/* =========================================================
   CAPABILITY STAGE
========================================================= */

.capability-stage{
    display:grid;

    grid-template-columns:
        minmax(0,1.08fr)
        minmax(400px,.72fr);

    gap:6vw;

    align-items:start;
}


/* =========================================================
   CAPABILITY LIST
========================================================= */

.cap-list{
    border-top:1px solid rgba(255,255,255,.15);
}


.cap-row{
    position:relative;

    display:grid;

    /* NUMBER | CONTENT | ARROW */
    grid-template-columns:42px minmax(0,1fr) 42px;

    gap:18px;
    align-items:center;

    padding:28px 0;

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

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

    transition:
        color .35s ease,
        padding .4s cubic-bezier(.2,.8,.2,1);
}

/* number */

.cap-no{
    padding-top:3px;

    font-size:9px;
    font-weight:600;

    color:var(--orange);
}


/* category */

.cap-row small{
    display:block;

    margin-bottom:12px;

    font-size:8px;
    font-weight:600;

    letter-spacing:.16em;

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

    transition:color .3s ease;
}


/* title */

.cap-row h3{
    margin:0;

    font-size:clamp(27px,2.4vw,38px);
    font-weight:400;

    line-height:1.05;
    letter-spacing:-.035em;

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        color .3s ease;
}

.cap-arrow{
    justify-self:end;
    align-self:start;

    font-size:19px;
    font-weight:300;

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

    transition:
        color .3s ease,
        transform .35s cubic-bezier(.2,.8,.2,1);
}

.cap-row:hover .cap-arrow,
.cap-row.active .cap-arrow{
    color:#fff;
    transform:translate(3px,-3px);
}



/* description */

.cap-row p{
    max-width:560px;

    margin:12px 0 0;

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

    font-size:13px;
    line-height:1.6;

    transition:color .3s ease;
}


/* =========================================================
   LEARN MORE
========================================================= */

.cap-learn{
    display:block;
    width:max-content;

    max-height:0;
    margin-top:0;

    overflow:hidden;
    opacity:0;

    transform:translateY(7px);

    color:var(--orange);

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

    letter-spacing:.15em;

    transition:
        opacity .3s ease,
        transform .35s ease,
        max-height .35s ease,
        margin .35s ease;
}

.cap-row:hover .cap-learn{
    max-height:25px;
    margin-top:18px;

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

/* =========================================================
   ROW HOVER
========================================================= */

.cap-row:hover,
.cap-row.active{
    color:#fff;

    padding-left:12px;
}


.cap-row:hover h3,
.cap-row.active h3{
    color:#fff;

    transform:translateX(4px);
}


.cap-row:hover small,
.cap-row.active small{
    color:rgba(255,255,255,.85);
}


.cap-row:hover p,
.cap-row.active p{
    color:rgba(255,255,255,.68);
}


/* show Learn More */

.cap-row:hover .cap-learn{
    max-height:30px;

    margin-top:18px;

    opacity:1;

    transform:translateY(0);
}


.cap-row:hover .cap-learn i{
    transform:translate(3px,-3px);
}


/* subtle orange indicator */

.cap-row::before{
    content:"";

    position:absolute;

    left:0;
    top:-1px;

    width:0;
    height:1px;

    background:var(--orange);

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


.cap-row:hover::before{
    width:72px;
}


/* =========================================================
   IMAGE
========================================================= */

.cap-image{
    position:sticky;

    top:110px;

    height:650px;

    overflow:hidden;

    background:#0c3142;
}


.cap-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

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


/* slight image movement when capability changes */

.cap-image:hover img{
    transform:scale(1.025);
}


.cap-image::after{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(1,28,44,.15),
            transparent 40%,
            rgba(1,28,44,.8)
        );

    pointer-events:none;
}


/* IMAGE META */

.cap-image-top,
.cap-image-bottom{
    position:absolute;

    z-index:2;

    left:20px;
    right:20px;

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

    font-size:8px;
    font-weight:600;

    letter-spacing:.14em;

    color:rgba(255,255,255,.85);
}


.cap-image-top{
    top:20px;
}


.cap-image-bottom{
    bottom:20px;
}


.cap-image-top b{
    color:var(--orange);
}


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

@media(max-width:1000px){

    .capabilities{
        padding:110px 0;
    }

    .section-head{
        margin-bottom:60px;
    }

    .capability-stage{
        grid-template-columns:1fr;

        gap:50px;
    }

    .cap-image{
        position:relative;

        top:auto;

        height:600px;

        order:-1;
    }
}


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

@media(max-width:700px){

    .capabilities{
        padding:90px 0;
    }

    .section-head{
        margin-bottom:50px;
    }

    .section-head .label{
        margin-bottom:18px;
    }

    .section-head h2{
        font-size:clamp(52px,16vw,76px);

        line-height:.87;
    }

    .capability-stage{
        gap:40px;
    }

    .cap-image{
        height:440px;
    }

    .cap-row{
        grid-template-columns:30px minmax(0,1fr);

        gap:10px;

        padding:24px 0;
    }

    .cap-row:hover,
    .cap-row.active{
        padding-left:0;
    }

    .cap-row h3{
        font-size:27px;
    }

    .cap-row p{
        font-size:12px;
    }

    /*
       Mobile devices do not have hover,
       so Learn More remains visible.
    */

    .cap-learn{
        max-height:30px;

        margin-top:16px;

        opacity:1;

        transform:none;
    }

}

@media(max-width:700px){

    .cap-row{
        grid-template-columns:30px minmax(0,1fr) 24px;
    }

}

/* =========================================================
   PRODUCTS / DOWNSTREAM OPERATIONS
========================================================= */

.products{
    background:var(--paper);
    color:var(--ink);

    padding:90px 0 140px;
}


/*
IMPORTANT:
Do NOT give products-inner another width.

The .wrap class already controls the exact same
left/right boundary used by your Satomen Investment section.
*/

.products-inner{
    position:relative;
}


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

.product-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding-bottom:20px;

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


.product-meta .label{
    margin:0;

    color:var(--orange);

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

    line-height:1;

    letter-spacing:.2em;
    text-transform:uppercase;
}


.product-supply-link{
    display:inline-flex;
    align-items:center;
    gap:16px;

    color:var(--ink);

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

    line-height:1;

    letter-spacing:.13em;
    text-transform:uppercase;

    transition:
        color .3s ease,
        gap .3s ease;
}


.product-supply-link span{
    color:var(--orange);

    font-size:15px;
    font-weight:400;

    transition:transform .3s ease;
}


.product-supply-link:hover{
    color:var(--orange);
    gap:20px;
}


.product-supply-link:hover span{
    transform:translate(3px,-3px);
}


/* =========================================================
   HEADING
========================================================= */

.product-heading{
    padding:54px 0 76px;
}


.product-heading h2{
    margin:0;

    max-width:1050px;

    color:var(--ink);

    font-size:clamp(70px,7vw,112px);
    font-weight:400;

    line-height:.82;

    letter-spacing:-.065em;
}


.product-heading h2 span{
    color:var(--sky);
}


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

.product-marquee{
    width:100%;

    overflow:hidden;

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


.product-marquee-track{
    width:max-content;
    min-width:100%;

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

    gap:24px;

    padding:19px 0;

    white-space:nowrap;
}


.product-marquee-track span{
    color:var(--ink);

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

    line-height:1;

    letter-spacing:.09em;
}


.product-marquee-track i{
    display:block;

    flex:0 0 4px;

    width:4px;
    height:4px;

    background:var(--orange);

    border-radius:50%;
}


/* =========================================================
   PRODUCT GRID
========================================================= */

/* =========================================================
   PRODUCT GRID
========================================================= */

.product-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));

    width:100%;

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

    overflow:hidden;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.product-card{
    position:relative;

    min-width:0;
    height:260px;

    padding:28px 28px 24px;

    overflow:hidden;

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

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

    transition:
        background .35s ease,
        color .35s ease;
}


/* =========================================================
   CARD COPY
========================================================= */

.product-card-copy{
    position:relative;
    z-index:3;

    height:100%;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
}


/* NUMBER */

.product-card small{
    display:block;

    margin:0 0 25px;

    color:var(--orange);

    font-size:10px;
    font-weight:700;
    line-height:1;

    letter-spacing:.03em;
}


/* TITLE */

.product-card h3{
    margin:0 0 7px;

    color:var(--ink);

    font-size:clamp(31px,2.3vw,39px);
    font-weight:500;

    line-height:1;
    letter-spacing:-.045em;

    transition:
        color .3s ease,
        transform .35s ease;
}


/* DESCRIPTION */

.product-card p{
    margin:0;

    color:var(--muted);

    font-size:13px;
    line-height:1.5;

    transition:color .3s ease;
}


/* =========================================================
   SMALL DIVIDER
========================================================= */

.product-divider{
    display:block;

    width:16px;
    height:1px;

    margin-top:19px;

    background:var(--line);

    transition:
        width .35s ease,
        background .35s ease;
}


/* =========================================================
   VIEW DETAILS
========================================================= */

.product-view{
    display:inline-flex;
    align-items:center;
    gap:14px;

    margin-top:auto;

    color:var(--ink);

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

    line-height:1;

    letter-spacing:.08em;
    text-transform:uppercase;

    transition:
        color .3s ease,
        gap .3s ease;
}


.product-view b{
    color:var(--orange);

    font-size:14px;
    font-weight:400;

    transition:transform .3s ease;
}


/* =========================================================
   LINE ART IMAGE
========================================================= */

.product-art{
    position:absolute;

    z-index:1;

    right:10px;
    bottom:0;

    width:46%;
    height:78%;

    object-fit:contain;
    object-position:right bottom;

    opacity:.16;

    filter:
        grayscale(1)
        contrast(.65);

    pointer-events:none;

    transition:
        opacity .4s ease,
        transform .55s cubic-bezier(.2,.8,.2,1);
}


/*
Individual positioning so the illustrations
sit naturally like your reference.
*/

.product-card:nth-child(1) .product-art{
    width:38%;
    right:14px;
}

.product-card:nth-child(2) .product-art{
    width:48%;
}

.product-card:nth-child(3) .product-art{
    width:34%;
    right:18px;
    bottom:14px;
}

.product-card:nth-child(4) .product-art{
    width:47%;
}

.product-card:nth-child(5) .product-art{
    width:48%;
}

.product-card:nth-child(6) .product-art{
    width:45%;
}


/* =========================================================
   HOVER
========================================================= */

.product-card:hover{
    background:rgba(2,38,58,.025);
}


.product-card:hover h3{
    transform:translateY(-2px);
}


.product-card:hover .product-divider{
    width:32px;
    background:var(--orange);
}


.product-card:hover .product-view{
    color:var(--orange);
    gap:18px;
}


.product-card:hover .product-view b{
    transform:translate(3px,-3px);
}


.product-card:hover .product-art{
    opacity:.25;

    transform:
        translateX(-5px)
        scale(1.025);
}


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

@media(max-width:1000px){

    .product-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .product-card{
        height:245px;
        padding:25px;
    }

    .product-art{
        width:42%;
        height:72%;
    }

}


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

@media(max-width:700px){

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

    .product-card{
        height:220px;
        padding:23px 20px;
    }

    .product-card small{
        margin-bottom:20px;
    }

    .product-card h3{
        font-size:31px;
    }

    .product-card p{
        font-size:12px;
    }

    .product-art,
    .product-card:nth-child(n) .product-art{
        right:12px;
        bottom:5px;

        width:42%;
        height:72%;
    }

    .product-view{
        font-size:8px;
    }

}


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

@media(max-width:420px){

    .product-card{
        height:205px;
    }

    .product-art,
    .product-card:nth-child(n) .product-art{
        width:39%;
        opacity:.13;
    }

}

/* =========================================================
   DISTRIBUTION
========================================================= */

.distribution{
    position:relative;

    min-height:100vh;

    overflow:hidden;

    background:var(--deep);
    color:#fff;
}


/* IMAGE */

.distribution-bg{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;
}


/* OVERLAY */

.distribution-shade{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(1,28,44,.90) 0%,
            rgba(1,28,44,.62) 42%,
            rgba(1,28,44,.18) 100%
        ),
        linear-gradient(
            0deg,
            rgba(1,28,44,.86) 0%,
            transparent 55%
        );
}


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

   IMPORTANT:
   This section intentionally does NOT use .wrap.
   The image stays full bleed while the content gets
   its own consistent gutter.
========================================================= */

.distribution-content{
    position:relative;
    z-index:2;

    width:100%;
    min-height:100vh;

    padding:
        55px
        var(--pad)
        40px;

    display:flex;
    flex-direction:column;
}


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

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


.distribution-top .label{
    margin:0;

    color:var(--orange);

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

    letter-spacing:.2em;
    text-transform:uppercase;
}


.distribution-index{
    color:rgba(255,255,255,.58);

    font-size:8px;
    font-weight:600;

    letter-spacing:.15em;
    text-transform:uppercase;
}


/* =========================================================
   MAIN
========================================================= */

/* =========================================================
   MAIN MESSAGE
========================================================= */

.distribution-main{
    flex:1;

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

    padding:70px 0;
}


.distribution-heading{
    max-width:1050px;
}


/* small descriptor above heading */

.distribution-kicker{
    margin:0 0 22px;

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

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

    letter-spacing:.18em;
    text-transform:uppercase;
}


/* MAIN HEADING */

.distribution h2{
    margin:0;

    max-width:1000px;

    color:#fff;

    font-size:clamp(68px,7vw,112px);
    font-weight:400;

    line-height:.84;
    letter-spacing:-.06em;

    text-transform:uppercase;
}


.distribution h2 span{
    color:var(--sky);
}


/* EXPLANATION */

.distribution-lead{
    max-width:560px;

    margin:32px 0 0;

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

    font-size:clamp(15px,1.2vw,18px);
    line-height:1.65;
}


/* LINK */

.distribution-link{
    display:inline-flex;
    align-items:center;

    gap:16px;

    margin-top:34px;
    padding-bottom:7px;

    color:#fff;

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

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

    letter-spacing:.13em;
    text-transform:uppercase;
}


.distribution-link span{
    color:var(--orange);

    font-size:14px;

    transition:transform .3s ease;
}


.distribution-link:hover span{
    transform:translate(3px,-3px);
}


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

.distribution-bottom{
    display:grid;

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

    align-items:center;

    gap:20px;

    padding-top:24px;

    border-top:1px solid rgba(255,255,255,.28);
}


.distribution-bottom span{
    display:flex;
    align-items:center;

    gap:10px;

    color:#fff;

    font-size:9px;
    font-weight:600;

    letter-spacing:.13em;
    text-transform:uppercase;
}


.distribution-bottom span b{
    color:var(--orange);

    font-size:8px;
    font-weight:600;
}


.distribution-bottom i{
    width:100%;
    height:1px;

    background:rgba(255,255,255,.32);
}


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

@media(max-width:1000px){

    .distribution{
        min-height:850px;
    }


    .distribution-content{
        min-height:850px;
    }


    .distribution-main{
        grid-template-columns:1fr;

        align-content:center;

        gap:45px;
    }


    .distribution h2{
        max-width:850px;

        font-size:clamp(62px,10vw,96px);
    }


    .distribution-copy{
        max-width:450px;
    }

}


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

@media(max-width:700px){

    .distribution{
        min-height:760px;
    }


    .distribution-content{
        min-height:760px;

        padding:
            35px
            var(--pad)
            28px;
    }


    .distribution-index{
        display:none;
    }


    .distribution-main{
        gap:35px;
    }


    .distribution h2{
        font-size:clamp(48px,14vw,70px);

        line-height:.85;
    }


    .distribution-copy p{
        max-width:320px;

        font-size:13px;
    }


    .distribution-bottom{
        grid-template-columns:1fr 1fr;

        gap:15px;
    }


    .distribution-bottom i{
        display:none;
    }

}



/* LAND TO SEA */

/* =========================================================
   LAND → SEA TRANSITION
========================================================= */

.sea-transition{
    position:relative;

    padding:120px 0 70px;

    overflow:hidden;

    background:#eaf3f5;
    color:var(--ink);
}


.sea-inner{
    position:relative;
}


/* =========================================================
   LAND → SEA LINE
========================================================= */

.sea-line{
    display:grid;

    grid-template-columns:
        auto minmax(40px,1fr)
        auto
        minmax(40px,1fr) auto;

    align-items:center;

    gap:16px;

    color:var(--sea);
}


.sea-line span{
    font-size:9px;
    font-weight:600;

    letter-spacing:.18em;
    text-transform:uppercase;
}


.sea-line i{
    display:block;

    width:100%;
    height:1px;

    background:#9cbec9;
}


.sea-line b{
    display:block;

    width:10px;
    height:10px;

    background:var(--orange);

    border-radius:50%;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.sea-heading{
    display:grid;

    grid-template-columns:minmax(0,1.3fr) minmax(280px,.55fr);

    gap:clamp(70px,10vw,160px);

    align-items:end;

    margin-top:105px;
}


/* =========================================================
   LEFT / HEADING
========================================================= */

.sea-title .label{
    margin:0 0 28px;

    color:var(--orange);

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

    letter-spacing:.2em;
    text-transform:uppercase;
}


.sea-title h2{
    margin:0;

    max-width:1000px;

    color:var(--ink);

    font-size:clamp(70px,7.2vw,114px);
    font-weight:400;

    line-height:.83;
    letter-spacing:-.065em;

    text-transform:uppercase;
}


.sea-title h2 span{
    color:var(--sea);
}


/* =========================================================
   RIGHT COPY
========================================================= */

.sea-copy{
    max-width:390px;

    padding-bottom:7px;
}


.sea-no{
    display:block;

    margin-bottom:25px;

    color:var(--sea);

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

    letter-spacing:.15em;
    text-transform:uppercase;
}


.sea-copy p{
    margin:0;

    color:var(--muted);

    font-size:16px;
    line-height:1.7;
}


.sea-link{
    display:inline-flex;
    align-items:center;

    gap:15px;

    margin-top:30px;
    padding-bottom:7px;

    color:var(--ink);

    border-bottom:1px solid rgba(6,40,59,.45);

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

    letter-spacing:.13em;
    text-transform:uppercase;

    transition:
        color .3s ease,
        gap .3s ease;
}


.sea-link > span{
    color:var(--orange);

    font-size:14px;
    font-weight:400;

    transition:transform .3s ease;
}


.sea-link:hover{
    gap:19px;

    color:var(--sea);
}


.sea-link:hover > span{
    transform:translate(3px,-3px);
}


/* =========================================================
   CAPABILITY STRIP
========================================================= */

.sea-services{
    display:grid;

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

    margin-top:100px;

    border-top:1px solid #b8cdd3;
    border-bottom:1px solid #b8cdd3;
}


.sea-services > div{
    min-height:90px;

    display:flex;
    align-items:center;

    gap:18px;

    padding:0 24px;

    border-right:1px solid #b8cdd3;
}


.sea-services > div:first-child{
    padding-left:0;
}


.sea-services > div:last-child{
    border-right:0;
}


.sea-services small{
    color:var(--orange);

    font-size:8px;
    font-weight:700;
}


.sea-services span{
    color:var(--ink);

    font-size:9px;
    font-weight:600;

    letter-spacing:.12em;
    text-transform:uppercase;
}


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

@media(max-width:1000px){

    .sea-transition{
        padding:100px 0 60px;
    }


    .sea-heading{
        grid-template-columns:1fr;

        gap:50px;

        margin-top:85px;
    }


    .sea-title h2{
        max-width:900px;

        font-size:clamp(64px,10vw,96px);
    }


    .sea-copy{
        max-width:520px;
    }


    .sea-services{
        margin-top:75px;
    }

}


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

@media(max-width:700px){

    .sea-transition{
        padding:75px 0 45px;
    }


    .sea-line{
        gap:10px;
    }


    .sea-line span{
        font-size:7px;
    }


    .sea-line b{
        width:8px;
        height:8px;
    }


    .sea-heading{
        gap:35px;

        margin-top:65px;
    }


    .sea-title .label{
        margin-bottom:20px;

        font-size:8px;
    }


    .sea-title h2{
        font-size:clamp(48px,14vw,70px);

        line-height:.85;
    }


    .sea-copy p{
        max-width:340px;

        font-size:14px;
    }


    .sea-services{
        grid-template-columns:1fr;

        margin-top:55px;
    }


    .sea-services > div{
        min-height:65px;

        padding:0;

        border-right:0;
        border-bottom:1px solid #b8cdd3;
    }


    .sea-services > div:last-child{
        border-bottom:0;
    }

}

/* DOCTOR PINTADO */

/* =========================================================
   DOCTOR PINTADO
   ONE IMAGE / TWO SCROLL STATES
========================================================= */

.pintado-section{
    position:relative;

    width:100%;
    height:400vh;

    margin:0;
    padding:0;

    background:var(--deep);
}


/* =========================================================
   STICKY VIEWPORT
========================================================= */

.pintado-sticky{
    position:sticky;

    top:0;
    left:0;

    width:100%;
    height:100vh;

    margin:0;
    padding:0;

    overflow:hidden;

    background:var(--deep);

    color:#fff;
}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.pintado-bg{
    position:absolute;

    z-index:0;

    top:0;
    left:0;

    display:block;

    width:100%;
    height:100%;

    min-width:100%;
    max-width:none;

    margin:0;
    padding:0;

    object-fit:cover;
    object-position:center center;

    transform:scale(1);

    transform-origin:68% 52%;

    will-change:transform;

    pointer-events:none;
}


.pintado-picture{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.pintado-bg{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

/* =========================================================
   IMAGE OVERLAY
========================================================= */

.pintado-overlay{
    position:absolute;

    z-index:1;

    inset:0;

    width:100%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            rgba(1,28,44,.72) 0%,
            rgba(1,28,44,.48) 28%,
            rgba(1,28,44,.15) 70%,
            rgba(1,28,44,.04) 100%
        ),
        linear-gradient(
            0deg,
            rgba(1,28,44,.80) 0%,
            rgba(1,28,44,.20) 45%,
            rgba(1,28,44,.12) 100%
        );

    pointer-events:none;
}


/* =========================================================
   BOTH CONTENT SCREENS
========================================================= */

.pintado-intro,
.pintado-profile{
    position:absolute;

    z-index:2;

    inset:0;

    width:100%;
    height:100%;

    padding:
        clamp(34px,4vw,64px)
        var(--pad)
        clamp(30px,4vw,60px);

    box-sizing:border-box;
}


/* =========================================================
   SCREEN 01
========================================================= */

.pintado-intro{
    display:block;

    opacity:1;
    visibility:visible;
}


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

.pintado-top{
    position:absolute;

    top:32px;
    left:var(--pad);
    right:var(--pad);

    display:flex;

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

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

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

    line-height:1;

    letter-spacing:.22em;

    text-transform:uppercase;
}


/* =========================================================
   MAIN INTRO CONTENT
========================================================= */

.pintado-intro-main{
    position:absolute;

    left:var(--pad);

    top:50%;

    width:min(700px,48vw);

    transform:translateY(-45%);
}


.pintado-eyebrow{
    margin:0 0 28px;

    color:var(--orange);

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

    line-height:1;

    letter-spacing:.25em;

    text-transform:uppercase;
}


.pintado-intro h2{
    margin:0;

    color:#fff;

    font-size:clamp(90px,10.2vw,158px);

    font-weight:400;

    line-height:.75;

    letter-spacing:-.075em;

    text-transform:uppercase;
}


.pintado-intro h2 span{
    display:block;

    color:var(--sky);
}


.pintado-description{
    max-width:640px;

    margin:45px 0 0;

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

    font-size:clamp(15px,1.2vw,19px);

    line-height:1.7;
}


/* =========================================================
   QUICK SPECIFICATIONS
========================================================= */

.pintado-quick-specs{
    position:absolute;

    right:var(--pad);
    bottom:45px;

    width:min(500px,36vw);

    display:grid;

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

    gap:38px;
}


.pintado-quick-spec{
    padding-top:18px;

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


.pintado-quick-spec span{
    display:block;

    margin-bottom:20px;

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

    font-size:8px;
    font-weight:500;

    line-height:1;

    letter-spacing:.2em;

    text-transform:uppercase;
}


.pintado-quick-spec strong{
    display:block;

    color:#fff;

    font-size:clamp(20px,1.7vw,28px);

    font-weight:400;

    line-height:1;
}


/* =========================================================
   SCREEN 02 — PROFILE
========================================================= */

.pintado-profile{
    opacity:0;
    visibility:hidden;

    pointer-events:none;
}


/* =========================================================
   PROFILE HEADING
========================================================= */

.pintado-profile-heading{
    position:absolute;

    top:55px;
    left:var(--pad);
}


.pintado-profile-heading > p{
    margin:0 0 25px;

    color:var(--orange);

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

    line-height:1;

    letter-spacing:.2em;

    text-transform:uppercase;
}


.pintado-profile-heading h3{
    margin:0;

    color:#fff;

    font-size:clamp(54px,5vw,82px);

    font-weight:400;

    line-height:.88;

    letter-spacing:-.055em;
}


/* =========================================================
   MAIN SPEC GRID
========================================================= */

.pintado-spec-grid{
    position:absolute;

    left:var(--pad);
    right:var(--pad);

    top:48%;

    display:grid;

    grid-template-columns:repeat(6,minmax(0,1fr));

    border-top:1px solid rgba(255,255,255,.30);

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


.pintado-spec{
    min-width:0;

    padding:22px 18px 25px 0;

    border-right:1px solid rgba(255,255,255,.18);
}


.pintado-spec:not(:first-child){
    padding-left:18px;
}


.pintado-spec:last-child{
    border-right:0;
}


.pintado-spec > span{
    display:block;

    min-height:25px;

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

    font-size:9px;

    line-height:1.4;

    letter-spacing:.16em;
}


.pintado-spec strong{
    display:block;

    margin-top:22px;

    color:#fff;

    font-size:clamp(32px,3.3vw,54px);

    font-weight:300;

    line-height:1;

    letter-spacing:-.035em;
}


.pintado-spec strong small{
    margin-left:5px;

    color:var(--orange);

    font-size:10px;

    font-weight:700;

    letter-spacing:.03em;
}


/* =========================================================
   SECONDARY DETAILS
========================================================= */

.pintado-details{
    position:absolute;

    top:68%;

    left:var(--pad);
    right:var(--pad);

    display:grid;

    grid-template-columns:repeat(6,minmax(0,1fr));
}


.pintado-details > div{
    min-width:0;

    padding-right:20px;
}


.pintado-details span{
    display:block;

    margin-bottom:16px;

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

    font-size:8px;

    line-height:1;

    letter-spacing:.18em;

    text-transform:uppercase;
}


.pintado-details strong{
    display:block;

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

    font-size:14px;

    font-weight:400;

    line-height:1.55;
}


/* =========================================================
   BOTTOM PROFILE CONTENT
========================================================= */

.pintado-profile-bottom{
    position:absolute;

    left:var(--pad);
    right:var(--pad);
    bottom:25px;

    display:grid;

    grid-template-columns:
        minmax(180px,.8fr)
        minmax(300px,1.35fr)
        auto;

    gap:50px;

    align-items:center;

    padding-top:22px;

    border-top:1px solid rgba(255,255,255,.25);
}


.pintado-bottom-label{
    margin:0;

    color:var(--orange);

    font-size:9px;

    font-weight:700;

    line-height:1.3;

    letter-spacing:.17em;

    text-transform:uppercase;
}


.pintado-bottom-copy{
    margin:0;

    max-width:570px;

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

    font-size:15px;

    line-height:1.55;
}


.pintado-bottom-link{
    display:inline-flex;

    align-items:center;

    gap:28px;

    color:#fff;

    font-size:9px;

    font-weight:700;

    line-height:1;

    letter-spacing:.08em;

    text-transform:uppercase;
}


.pintado-bottom-link span{
    color:var(--orange);

    font-size:16px;

    transition:transform .3s ease;
}


.pintado-bottom-link:hover span{
    transform:translate(4px,-4px);
}


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

@media(max-width:1000px){

    .pintado-section{
        height:360vh;
    }


    .pintado-intro-main{
        width:70vw;
    }


    .pintado-intro h2{
        font-size:clamp(80px,13vw,125px);
    }


    .pintado-description{
        max-width:520px;
    }


    .pintado-quick-specs{
        width:50vw;
    }


    .pintado-profile-heading{
        top:70px;
    }


    .pintado-spec-grid{
        grid-template-columns:repeat(3,1fr);

        top:40%;
    }


    .pintado-spec{
        border-bottom:1px solid rgba(255,255,255,.18);
    }


    .pintado-details{
        top:68%;

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

        gap:25px 20px;
    }


    .pintado-profile-bottom{
        grid-template-columns:1fr auto;
    }


    .pintado-bottom-copy{
        display:none;
    }

}


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

@media(max-width:700px){

    /* =========================================
       PINTADO — MOBILE
    ========================================= */

    .pintado-section{
        height:340vh;
    }

    .pintado-sticky{
        height:100svh;
        min-height:620px;
    }


    /* BACKGROUND IMAGE */

    .pintado-bg{
        width:100%;
        height:100%;
        min-width:0;
        object-fit:cover;
        object-position:68% center;
        transform:scale(1);
        transform-origin:center;
    }

    .pintado-picture{
        width:100%;
        height:100%;
    }

    .pintado-bg{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center;
    }


    /* =========================================
       INTRO SCREEN
    ========================================= */

    .pintado-intro{
        padding:32px 22px 24px;
    }

    .pintado-intro-top{
        top:24px;
        left:22px;
        right:22px;
    }

    .pintado-intro-main{
        left:22px;
        right:22px;
        bottom:115px;
    }

    .pintado-intro-main > p:first-child{
        margin-bottom:10px;
        font-size:7px;
        letter-spacing:.18em;
    }

    .pintado-intro h2{
        margin:0;
        font-size:clamp(52px,17vw,72px);
        line-height:.76;
        letter-spacing:-.065em;
    }

    .pintado-intro h2 span{
        color:var(--sky);
    }

    .pintado-intro-copy{
        max-width:310px;
        margin-top:24px;
        font-size:12px;
        line-height:1.55;
    }

    .pintado-intro-specs{
        left:22px;
        right:22px;
        bottom:24px;
        grid-template-columns:repeat(3,1fr);
        gap:12px;
    }

    .pintado-intro-specs div{
        padding-top:9px;
    }

    .pintado-intro-specs span{
        font-size:5px;
        letter-spacing:.15em;
    }

    .pintado-intro-specs strong{
        margin-top:5px;
        font-size:16px;
    }


    /* =========================================
       PROFILE SCREEN
    ========================================= */

    .pintado-profile{
        padding:0;
    }


    /* PROFILE HEADING */

    .pintado-profile-heading{
        position:absolute;
        top:28px;
        left:22px;
        right:22px;
    }

    .pintado-profile-heading > p{
        margin:0 0 12px;
        font-size:6px;
        letter-spacing:.18em;
    }

    .pintado-profile-heading h3{
        margin:0;
        max-width:300px;
        font-size:38px;
        line-height:.9;
        letter-spacing:-.05em;
        font-weight:400;
    }


    /* =========================================
       MAIN SPECIFICATIONS
    ========================================= */

    .pintado-spec-grid{
        position:absolute;
        top:27%;
        left:22px;
        right:22px;

        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:0;
    }

    .pintado-spec{
        min-height:74px;
        padding:10px 8px;

        border-top:1px solid rgba(255,255,255,.25);
        border-right:1px solid rgba(255,255,255,.16);
    }

    .pintado-spec:nth-child(even){
        border-right:0;
    }

    .pintado-spec:not(:first-child){
        padding-left:8px;
    }

    .pintado-spec > span{
        display:block;
        min-height:0;

        font-size:5px;
        line-height:1.2;
        letter-spacing:.14em;
    }

    .pintado-spec strong{
        display:block;
        margin-top:7px;

        font-size:22px;
        line-height:1;
        font-weight:400;
    }

    .pintado-spec strong span{
        font-size:7px;
    }


    /* =========================================
       SECONDARY VESSEL DETAILS
    ========================================= */

    .pintado-details{
        position:absolute;

        top:58%;
        left:22px;
        right:22px;

        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:11px 18px;
    }

    .pintado-details > div{
        min-width:0;
    }

    .pintado-details span{
        display:block;
        margin-bottom:4px;

        font-size:5px;
        line-height:1.2;
        letter-spacing:.15em;
    }

    .pintado-details strong{
        display:block;

        font-size:9px;
        line-height:1.3;
        font-weight:400;

        overflow-wrap:anywhere;
    }


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

    .pintado-profile-bottom{
        position:absolute;

        left:22px;
        right:22px;
        bottom:14px;

        display:grid;
        grid-template-columns:1fr auto;
        align-items:center;
        gap:10px;

        padding-top:11px;

        border-top:1px solid rgba(255,255,255,.22);
    }

    .pintado-bottom-label{
        margin:0;

        font-size:5px;
        line-height:1.3;
        letter-spacing:.15em;
    }

    .pintado-bottom-copy{
        display:none;
    }

    .pintado-bottom-link{
        display:flex;
        align-items:center;
        gap:6px;

        white-space:nowrap;

        font-size:5px;
        letter-spacing:.08em;
    }


    /* =========================================
       SMALL / SHORT MOBILE SCREENS
    ========================================= */

    @media(max-height:680px){

        .pintado-profile-heading{
            top:20px;
        }

        .pintado-profile-heading h3{
            font-size:32px;
        }

        .pintado-spec-grid{
            top:25%;
        }

        .pintado-spec{
            min-height:64px;
            padding-top:8px;
            padding-bottom:8px;
        }

        .pintado-spec strong{
            font-size:19px;
        }

        .pintado-details{
            top:57%;
            gap:8px 16px;
        }

        .pintado-details strong{
            font-size:8px;
        }

        .pintado-profile-bottom{
            bottom:10px;
        }
    }
}

/* PROCESS */


.how{
    position:relative;
    width:100%;
    padding:95px 0 125px;
    background:#fff;
    color:var(--ink);
    overflow:hidden;
}

.how-inner{
    position:relative;
}


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

.how-meta{
    width:100%;

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

    padding-bottom:22px;

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


/* LEFT LABEL */

.how-meta .label{
    margin:0;

    font-size:8px;
    font-weight:600;
    line-height:1;

    letter-spacing:.15em;

    color:var(--orange);
}


/* RIGHT LINK */

.how-meta-link{
    display:inline-flex;
    align-items:center;
    gap:14px;

    color:var(--ink);

    font-size:8px;
    font-weight:600;
    line-height:1;

    letter-spacing:.12em;

    text-decoration:none;
    text-transform:uppercase;
}

.how-meta-link span{
    display:inline-block;

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

    transition:transform .25s ease;
}

.how-meta-link:hover span{
    transform:translate(3px,-3px);
}


/* =========================================================
   MAIN HEADING
========================================================= */

.how-heading{
    padding-top:58px;
}

.how-heading h2{
    margin:0;
    max-width:1100px;

    color:var(--ink);

    font-size:clamp(64px,7vw,110px);
    font-weight:400;

    line-height:.86;
    letter-spacing:-.065em;
}

.how-heading h2 span{
    color:var(--sea);
}

/* =========================================================
   INTRODUCTION
========================================================= */

.how-process-intro{
    display:grid;

    grid-template-columns:
        minmax(0,1.2fr)
        minmax(280px,.55fr);

    margin-top:90px;
}



.how-process-intro p{
    grid-column:2;

    max-width:470px;

    margin:0;

    color:var(--muted);

    font-size:17px;
    font-weight:400;

    line-height:1.7;
}


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

.how-grid{
    display:grid;

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

    margin-top:55px;

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


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

.how-grid article{
    position:relative;

    min-height:300px;

    padding:22px 20px 26px;

    display:flex;
    flex-direction:column;

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

.how-grid article:first-child{
    border-left:1px solid var(--line);
}


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

.how-step-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    color:var(--orange);

    font-size:8px;
    font-weight:600;

    letter-spacing:.1em;
    text-transform:uppercase;
}

.how-step-top small{
    color:inherit;

    font-size:8px;
    font-weight:600;
}

.how-step-top span{
    font-size:8px;
}


/* =========================================================
   STEP CONTENT
========================================================= */

.how-step-content{
    flex:1;

    display:flex;
    flex-direction:column;

    justify-content:flex-end;
}


/* TITLE */

.how-step-content h3{
    max-width:360px;

    margin:0 0 17px;

    color:var(--ink);

    font-size:clamp(25px,2vw,32px);
    font-weight:400;

    line-height:1.04;

    letter-spacing:-.04em;
}


/* DESCRIPTION */

.how-step-content p{
    max-width:410px;

    margin:0;

    color:var(--muted);

    font-size:14px;
    font-weight:400;

    line-height:1.7;
}


/* =========================================================
   SUBTLE HOVER
========================================================= */

.how-grid article{
    transition:
        background-color .3s ease,
        color .3s ease;
}

.how-grid article:hover{
    background:#f5f8f9;
}


/* Orange line appears at bottom */

.how-grid article::after{
    content:"";

    position:absolute;

    left:0;
    right:100%;
    bottom:-1px;

    height:2px;

    background:var(--orange);

    transition:right .4s ease;
}

.how-grid article:hover::after{
    right:0;
}


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

@media(max-width:1000px){

    .how{
        padding:85px 0 100px;
    }


    .how-heading{
        padding-top:50px;
    }


    .how-heading h2{
        font-size:clamp(58px,8vw,90px);
    }


    .how-process-intro{
        margin-top:70px;

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


    .how-grid{
        margin-top:45px;
    }


    .how-grid article{
        min-height:280px;
    }

}


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

@media(max-width:700px){

    .how{
        padding:70px 0 80px;
    }


    /* META */

    .how-meta{
        padding-bottom:18px;
    }


    .how-meta .label,
    .how-meta-link{
        font-size:7px;
    }


    .how-meta-link{
        gap:8px;
    }


    /* HEADING */

    .how-heading{
        padding-top:40px;
    }


    .how-heading h2{
        max-width:100%;

        font-size:clamp(46px,13vw,66px);

        line-height:.87;

        letter-spacing:-.055em;
    }


    /* INTRO */

    .how-process-intro{
        display:block;

        margin-top:55px;
    }


    .how-process-intro p{
        max-width:480px;

        font-size:15px;
        line-height:1.7;
    }


    /* PROCESS */

    .how-grid{
        grid-template-columns:1fr;

        margin-top:40px;

        border-bottom:0;
    }


    .how-grid article{
        min-height:235px;

        padding:20px;

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


    .how-step-content h3{
        font-size:28px;
    }


    .how-step-content p{
        font-size:14px;
    }

}


/* HSEQ */

/* =========================================================
   HSEQ
========================================================= */

.hseq{
    min-height:100vh;
    display:grid;
    grid-template-columns:.75fr 1.25fr;
    background:#f5f6f3;
}

/* IMAGE */

.hseq-photo{
    position:relative;
    min-height:100vh;
    overflow:hidden;
}

.hseq-photo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}


/* CONTENT SIDE */

.hseq-copy{
    min-height:100vh;
    padding:42px var(--pad) 42px clamp(55px,5vw,90px);

    display:flex;
    flex-direction:column;

    color:var(--ink);
}


/* TOP */

.hseq-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

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

.hseq-top .label{
    margin:0;
    color:var(--orange);
}

.hseq-top>span{
    font-size:8px;
    letter-spacing:.14em;
    color:var(--muted);
}


/* MAIN CONTENT */

.hseq-content{
    margin:auto 0;
}

.hseq-content h2{
    margin:0;

    font-size:clamp(54px,5vw,82px);
    font-weight:400;

    line-height:.92;
    letter-spacing:-.055em;

    color:var(--ink);
}

.hseq-content h2 span{
    color:var(--sky);
}


.hseq-content>p{
    max-width:520px;

    margin:38px 0 0;

    font-size:17px;
    line-height:1.75;

    color:var(--muted);
}


/* TAGS */

.hseq-tags{
    display:flex;
    flex-wrap:wrap;
    gap:7px;

    margin-top:32px;
}

.hseq-tags span{
    padding:9px 12px;

    border:1px solid #aebbc0;

    font-size:8px;
    letter-spacing:.12em;

    color:var(--ink);
}


/* BOTTOM LINK */

.hseq-link{
    padding-top:20px;

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

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

    color:var(--ink);
    text-decoration:none;
}

.hseq-link span:first-child{
    font-size:9px;
    font-weight:600;
    letter-spacing:.13em;
}

.hseq-link span:last-child{
    font-size:20px;
    transition:transform .25s ease;
}

.hseq-link:hover span:last-child{
    transform:translate(4px,-4px);
}


/* RESPONSIVE */

@media(max-width:800px){

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

    .hseq-photo{
        min-height:65vh;
    }

    .hseq-copy{
        min-height:auto;
        padding:45px var(--pad);
    }

    .hseq-content{
        margin:100px 0;
    }

    .hseq-content h2{
        font-size:clamp(48px,12vw,70px);
    }

}
/* WHY */
/* =========================================================
   WHY SATOMEN
========================================================= */

.why{
    padding:130px 0 90px;
    background:#fff;
    color:var(--ink);
}


/* META */

.why-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;

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

.why-meta .label{
    margin:0;
    color:var(--orange);
}

.why-meta>span{
    font-size:8px;
    letter-spacing:.14em;
    color:var(--muted);
}


/* =========================================================
   HEADING
========================================================= */

.why-head{
    display:grid;
    grid-template-columns:1.35fr .45fr;
    gap:9vw;
    align-items:end;

    padding:75px 0 90px;
}

.why-head h2{
    margin:0;

    font-size:clamp(65px,7.2vw,112px);
    font-weight:400;

    line-height:.87;
    letter-spacing:-.06em;

    color:var(--ink);
}

.why-head h2 span{
    color:var(--sky);
}

.why-head p{
    max-width:390px;
    margin:0 0 5px;

    font-size:15px;
    line-height:1.75;

    color:var(--muted);
}


/* =========================================================
   REASONS
========================================================= */

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

.why-list article{
    display:grid;

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

    gap:35px;
    align-items:center;

    min-height:145px;

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


/* NUMBER */

.why-list small{
    align-self:start;

    padding-top:28px;

    font-size:8px;
    letter-spacing:.1em;

    color:var(--orange);
}


/* TITLE */

.why-list h3{
    margin:0;

    font-size:clamp(24px,2vw,32px);
    font-weight:400;

    letter-spacing:-.035em;

    color:var(--ink);
}


/* COPY */

.why-list p{
    max-width:500px;
    margin:0;

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

    color:var(--muted);
}


/* =========================================================
   SERVICE PILLARS
========================================================= */

.why-values{
    display:grid;
    grid-template-columns:.8fr repeat(3,1fr);

    gap:30px;

    margin-top:55px;
    padding-top:22px;

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

.why-values span{
    font-size:16px;
    font-weight:600;
    letter-spacing:.12em;
    color:var(--ink);
}

.why-values strong{
    font-size:11px;
    font-weight:500;
    letter-spacing:.07em;

    color:var(--ink);
}


/* =========================================================
   ROW HOVER
========================================================= */

.why-list article{
    transition:padding .3s ease;
}

.why-list article:hover{
    padding-left:12px;
}

.why-list article:hover h3{
    color:var(--sky);
}


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

@media(max-width:900px){

    .why{
        padding:90px 0 70px;
    }

    .why-head{
        grid-template-columns:1fr;
        gap:35px;

        padding:60px 0;
    }

    .why-head p{
        max-width:500px;
    }

    .why-list article{
        grid-template-columns:50px 1fr;
        gap:20px;

        padding:30px 0;
    }

    .why-list small{
        padding-top:5px;
    }

    .why-list p{
        grid-column:2;
    }

    .why-values{
        grid-template-columns:1fr;
        gap:20px;
    }

}


@media(max-width:600px){

    .why{
        padding:70px 0 55px;
    }

    .why-meta>span{
        display:none;
    }

    .why-head h2{
        font-size:clamp(52px,15vw,72px);
    }

    .why-list h3{
        font-size:25px;
    }

}


/* FUTURE */

.future{min-height:100vh;position:relative;background:var(--deep);color:#fff}
.future>img,.future-shade{position:absolute;inset:0;width:100%;height:100%}
.future>img{object-fit:cover}
.future-shade{background:#011c2ce8}
.future-content{min-height:100vh;position:relative;z-index:2;padding:130px 0;display:flex;flex-direction:column;justify-content:center}
.future-grid{display:grid;grid-template-columns:1.1fr .65fr;gap:10vw;align-items:end;margin-top:45px}
.future h2 span{color:var(--sky)}
.future-grid>div>p{font-size:17px;line-height:1.75;color:#ffffffad}
.future-list{margin-top:35px}
.future-list span{display:block;padding:13px 0;border-bottom:1px solid #ffffff30;font-size:9px;letter-spacing:.1em}


/* CTA */

.final-cta{height:90vh;min-height:680px;position:relative;background:var(--sea);color:#fff}
.water{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 20%,#ffffff18,transparent 30%),
    linear-gradient(135deg,#087fa8,#013b5a 70%)
}
.final-content{height:100%;position:relative;padding:120px 0;display:flex;flex-direction:column;justify-content:center}
.final-cta h2{margin:30px 0}.final-cta h2 span{color:var(--orange)}
.final-content>p:not(.label){max-width:500px;font-size:18px;line-height:1.65;color:#ffffffbd}
.final-content>div{display:flex;gap:25px;align-items:center;margin-top:25px}


@media(max-width:900px){
  .hero-grid,.intro-grid,.section-head,.section-head>div,.capability-stage,
  .product-intro,.distribution-grid,.sea-heading,.sea-heading>div,.how-head,
  .hseq,.why-head,.why-head>div,.future-grid{grid-template-columns:1fr}

  .hero-grid{gap:40px}
  .hero-copy{max-width:520px}
  .hero-foot{grid-template-columns:repeat(3,1fr);gap:8px}

  .cap-image{position:relative;top:0;height:65vh}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .how-grid,.why-grid{grid-template-columns:1fr}
  .how-grid article{border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
  .hseq-photo{height:70vh}
  .values{grid-template-columns:1fr 1fr}
}

@media(max-width:560px){
  .hero-content{padding-top:115px}
  .hero h1{font-size:17vw}
  .hero-actions,.final-content>div{align-items:flex-start;flex-direction:column}
  .hero-foot{grid-template-columns:repeat(2,1fr)}

  .intro,.capabilities,.products,.sea-transition,.how,.why{padding:95px 0}

  .cap-row{
    position:relative;

    display:grid;
    grid-template-columns:42px minmax(0,1fr) 30px;
    gap:18px;

    padding:28px 0;

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

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

    transition:
        color .35s ease,
        padding .4s cubic-bezier(.2,.8,.2,1);
}
  .product-grid{grid-template-columns:1fr}

  .vessel-ui,.vessel-end{padding-inline:var(--pad)}
  .vessel-name{left:var(--pad)}
  .vessel-name h2{font-size:18vw}
  .spec{right:var(--pad)}
  .spec strong{font-size:27px}
  .vessel-use{left:var(--pad);gap:12px;flex-wrap:wrap}

  .big-link{grid-template-columns:1fr auto;gap:8px}
  .big-link small{grid-column:1/-1}
  .values{grid-template-columns:1fr}
}
/* =========================================================
   RESPONSIVE OVERRIDES ONLY
   ========================================================= */

@media (max-width: 1200px){
  :root{--pad:clamp(24px,3vw,40px)}
  .hero-main{gap:clamp(36px,5vw,70px)}
  .about-intro-layout,.capability-stage{gap:clamp(40px,5vw,70px)}
}

@media (max-width: 1000px){
  .hero{height:auto;min-height:100svh}
  .hero-content{height:auto;min-height:100svh}
  .hero-main{grid-template-columns:1fr;align-content:center}
  .hero-intro{justify-self:start;max-width:540px}
  .hero-capabilities{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-capabilities a:nth-child(n){justify-self:stretch;justify-content:flex-start}

  .about-intro-layout,.capability-stage{grid-template-columns:1fr}
  .about-intro-image{min-height:clamp(420px,65vw,620px)}
  .cap-image{position:relative;top:auto;order:-1;height:clamp(460px,65vw,650px)}

  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hseq{grid-template-columns:1fr}
  .hseq-photo{min-height:520px}
  .why-head{grid-template-columns:1fr;gap:30px}
}

@media (max-width: 768px){
  :root{--pad:24px}

  .hero-content{padding-top:105px;padding-bottom:20px}
  .hero-main{padding:30px 0;gap:28px}
  .hero h1{font-size:clamp(48px,13vw,78px);line-height:.88}
  .hero-actions{flex-wrap:wrap;gap:14px 22px}
  .hero-capabilities{grid-template-columns:1fr}
  .hero-capabilities a{min-height:46px;border-bottom:1px solid rgba(255,255,255,.12)}

  .about-intro{padding-top:75px;padding-bottom:80px}
  .about-intro-heading{padding:50px 0 60px}
  .about-intro-heading h2{font-size:clamp(48px,13vw,76px);line-height:.87}
  .about-intro-copy>p{margin-bottom:40px}
  .about-intro-image{min-height:430px}

  .capabilities{padding:85px 0}
  .section-head{margin-bottom:45px}
  .section-head h2{font-size:clamp(48px,13vw,76px);line-height:.87}
  .cap-image{height:460px}
  .cap-row{grid-template-columns:30px minmax(0,1fr) 24px;gap:10px;padding:22px 0}
  .cap-row h3{font-size:clamp(24px,7vw,31px)}
  .cap-row:hover,.cap-row.active{padding-left:0}
  .cap-learn{max-height:30px;margin-top:14px;opacity:1;transform:none}

  .products{padding:75px 0 90px}
  .product-heading{padding:45px 0 55px}
  .product-heading h2{font-size:clamp(48px,13vw,76px);line-height:.87}
  .product-grid{grid-template-columns:1fr}

  .distribution-content{padding-left:var(--pad);padding-right:var(--pad)}
  .distribution-main{grid-template-columns:1fr;gap:32px}
  .distribution-heading h2{font-size:clamp(48px,13vw,76px)}
  .distribution-bottom{overflow-x:auto;justify-content:flex-start;gap:18px}

  .sea-heading{grid-template-columns:1fr;gap:32px}
  .sea-title h2{font-size:clamp(48px,13vw,76px)}
  .sea-services{grid-template-columns:1fr}

  .pintado-section{height:auto!important;min-height:0!important}
  .pintado-sticky{position:relative!important;top:auto!important;height:auto!important;min-height:100svh}
  .pintado-intro,.pintado-profile{position:relative!important;inset:auto!important;min-height:100svh;height:auto!important;padding-left:var(--pad)!important;padding-right:var(--pad)!important}
  .pintado-intro h2{font-size:clamp(54px,15vw,82px)}
  .pintado-quick-specs,.pintado-spec-grid,.pintado-details{grid-template-columns:repeat(2,minmax(0,1fr))}

  .how{padding-top:80px;padding-bottom:90px}
  .how-heading h2{font-size:clamp(48px,13vw,76px)}
  .how-grid{grid-template-columns:1fr}

  .hseq-photo{min-height:420px}
  .hseq-copy{padding:65px var(--pad)}
  .hseq-content h2{font-size:clamp(48px,13vw,72px)}

  .why{padding-top:80px;padding-bottom:90px}
  .why-head h2{font-size:clamp(48px,13vw,76px)}
  .why-list{grid-template-columns:1fr}
  .why-values{flex-wrap:wrap;gap:16px 28px}
}

@media (max-width: 520px){
  :root{--pad:18px}

  .hero{min-height:760px}
  .hero-content{padding-top:95px}
  .hero h1{font-size:clamp(43px,14vw,64px)}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-primary,.hero-secondary{width:100%}

  .about-intro-top,.product-meta,.how-meta,.distribution-top,.hseq-top{gap:16px;align-items:flex-start}
  .about-intro-top{flex-direction:column}
  .about-intro-heading h2,.section-head h2,.product-heading h2,.distribution-heading h2,.sea-title h2,.how-heading h2,.hseq-content h2,.why-head h2{font-size:clamp(42px,13vw,62px)}
  .about-intro-image{min-height:340px}

  .cap-image{height:360px}
  .cap-row p{font-size:12px}

  .product-meta,.how-meta{flex-direction:column}
  .product-card{min-height:330px}

  .distribution-bottom{font-size:8px}
  .sea-line{gap:12px}

  .pintado-intro h2{font-size:clamp(48px,16vw,70px)}
  .pintado-quick-specs,.pintado-spec-grid,.pintado-details{grid-template-columns:1fr}

  .hseq-photo{min-height:340px}
  .hseq-tags{flex-wrap:wrap}
  .why-values{align-items:flex-start;flex-direction:column}
}

@media (max-width: 360px){
  :root{--pad:15px}
  .hero h1,.about-intro-heading h2,.section-head h2,.product-heading h2,.distribution-heading h2,.sea-title h2,.how-heading h2,.hseq-content h2,.why-head h2{font-size:40px}
  .cap-row{grid-template-columns:24px minmax(0,1fr) 18px}
}


/* =========================================================
   RESPONSIVE FIX — HERO LEGIBILITY + PINTADO STICKY BEHAVIOUR
   No redesign / no content changes
========================================================= */

/* Hero capability labels: readable on tablet/mobile */
@media (max-width: 768px){
  .hero-capabilities a{
    min-height:58px;
    gap:14px;
    padding:0 2px;
  }

  .hero-capabilities span{
    font-size:10px;
    line-height:1;
  }

  .hero-capabilities strong{
    font-size:11px;
    line-height:1.35;
    letter-spacing:.09em;
  }
}

@media (max-width: 520px){
  .hero-capabilities a{
    min-height:60px;
    grid-template-columns:32px minmax(0,1fr);
  }

  .hero-capabilities span{
    font-size:9px;
  }

  .hero-capabilities strong{
    font-size:11px;
  }
}

/* Keep Doctor Pintado's desktop sticky/two-state scroll model on ALL screens.
   These rules specifically undo the earlier responsive override that changed
   the section to normal document flow. */
@media (max-width: 768px){
  .pintado-section{
    position:relative !important;
    height:340vh !important;
    min-height:0 !important;
  }

  .pintado-sticky{
    position:sticky !important;
    top:0 !important;
    left:0 !important;
    width:100% !important;
    height:100svh !important;
    min-height:620px !important;
    overflow:hidden !important;
  }

  .pintado-picture,
  .pintado-bg,
  .pintado-overlay{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
  }

  .pintado-bg{
    object-fit:cover !important;
    object-position:center !important;
  }

  .pintado-intro,
  .pintado-profile{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    padding-left:var(--pad) !important;
    padding-right:var(--pad) !important;
  }

  /* Intro state */
  .pintado-intro-main{
    position:absolute !important;
    top:50% !important;
    bottom:auto !important;
    left:var(--pad) !important;
    right:var(--pad) !important;
    width:auto !important;
    transform:translateY(-50%) !important;
  }

  .pintado-intro h2{
    font-size:clamp(50px,15vw,72px) !important;
    line-height:.8 !important;
  }

  .pintado-description{
    max-width:340px !important;
    margin-top:22px !important;
    font-size:13px !important;
    line-height:1.55 !important;
  }

  .pintado-quick-specs{
    right:var(--pad) !important;
    left:var(--pad) !important;
    bottom:24px !important;
    width:auto !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:14px !important;
  }

  .pintado-quick-spec span{
    margin-bottom:9px !important;
    font-size:7px !important;
  }

  .pintado-quick-spec strong{
    font-size:17px !important;
  }

  /* Profile state remains over the same sticky viewport */
  .pintado-profile{
    padding:0 !important;
  }

  .pintado-profile-heading{
    top:26px !important;
    left:var(--pad) !important;
    right:var(--pad) !important;
  }

  .pintado-profile-heading > p{
    margin-bottom:10px !important;
    font-size:7px !important;
  }

  .pintado-profile-heading h3{
    max-width:320px !important;
    font-size:clamp(34px,10vw,44px) !important;
    line-height:.9 !important;
  }

  .pintado-spec-grid{
    position:absolute !important;
    top:26% !important;
    left:var(--pad) !important;
    right:var(--pad) !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .pintado-spec{
    min-height:70px !important;
    padding:9px 8px !important;
  }

  .pintado-spec > span{
    min-height:0 !important;
    font-size:7px !important;
    line-height:1.2 !important;
  }

  .pintado-spec strong{
    margin-top:7px !important;
    font-size:clamp(19px,6vw,24px) !important;
  }

  .pintado-spec strong small{
    font-size:7px !important;
  }

  .pintado-details{
    position:absolute !important;
    top:58% !important;
    left:var(--pad) !important;
    right:var(--pad) !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px 16px !important;
  }

  .pintado-details span{
    margin-bottom:4px !important;
    font-size:6px !important;
  }

  .pintado-details strong{
    font-size:9px !important;
    line-height:1.3 !important;
  }

  .pintado-profile-bottom{
    position:absolute !important;
    left:var(--pad) !important;
    right:var(--pad) !important;
    bottom:12px !important;
    grid-template-columns:1fr auto !important;
    gap:10px !important;
    padding-top:10px !important;
  }

  .pintado-bottom-label,
  .pintado-bottom-link{
    font-size:6px !important;
  }
}

/* Short phones such as iPhone SE */
@media (max-width: 768px) and (max-height: 700px){
  .pintado-sticky{
    min-height:100svh !important;
  }

  .pintado-profile-heading{
    top:18px !important;
  }

  .pintado-profile-heading h3{
    font-size:32px !important;
  }

  .pintado-spec-grid{
    top:24% !important;
  }

  .pintado-spec{
    min-height:62px !important;
    padding-top:7px !important;
    padding-bottom:7px !important;
  }

  .pintado-spec strong{
    font-size:19px !important;
  }

  .pintado-details{
    top:57% !important;
    gap:7px 14px !important;
  }

  .pintado-details strong{
    font-size:8px !important;
  }

  .pintado-profile-bottom{
    bottom:8px !important;
  }
}


/* =========================================================
   FINAL RESPONSIVE TYPOGRAPHY + PINTADO PARITY PATCH
   Responsive changes only.
========================================================= */

/* Prevent micro-copy from becoming unreadable on touch screens */
@media (max-width: 768px){

  .sat-home .label,
  .about-intro-top,
  .about-image-label,
  .section-head .label,
  .product-meta .label,
  .product-supply-link,
  .distribution-kicker,
  .distribution-index,
  .sea-line,
  .sea-services small,
  .sea-services span,
  .how-meta .label,
  .how-meta-link,
  .how-step-top small,
  .how-step-top span,
  .hseq-top,
  .why-meta .label,
  .why-list small,
  .why-values,
  .cap-row small,
  .cap-no,
  .cap-learn{
    font-size:11px !important;
    line-height:1.35 !important;
  }

  .hero-capabilities span{
    font-size:10px !important;
  }

  .hero-capabilities strong{
    font-size:12px !important;
    line-height:1.35 !important;
  }

  .cap-row p,
  .about-intro-points p,
  .distribution-lead,
  .sea-copy p,
  .how-step-content p,
  .hseq-content > p,
  .why-head > p,
  .why-list article p{
    font-size:15px !important;
    line-height:1.6 !important;
  }

  /* PINTADO — preserve desktop two-state pinned interaction */
  .pintado-section{
    position:relative !important;
    height:340vh !important;
  }

  .pintado-sticky{
    position:sticky !important;
    top:0 !important;
    height:100svh !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .pintado-picture,
  .pintado-bg{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
  }

  .pintado-bg{
    object-fit:cover !important;
  }

  .pintado-intro,
  .pintado-profile{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    overflow:hidden !important;
  }

  /* State 1 */
  .pintado-top{
    top:22px !important;
    left:var(--pad) !important;
    right:var(--pad) !important;
    font-size:10px !important;
  }

  .pintado-intro-main{
    top:43% !important;
    left:var(--pad) !important;
    right:var(--pad) !important;
    transform:translateY(-50%) !important;
  }

  .pintado-eyebrow{
    font-size:11px !important;
    letter-spacing:.2em !important;
  }

  .pintado-intro h2{
    font-size:clamp(54px,16vw,82px) !important;
    line-height:.82 !important;
  }

  .pintado-description{
    max-width:430px !important;
    font-size:15px !important;
    line-height:1.55 !important;
  }

  .pintado-quick-specs{
    left:var(--pad) !important;
    right:var(--pad) !important;
    bottom:26px !important;
    width:auto !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .pintado-quick-spec span{
    font-size:9px !important;
    line-height:1.25 !important;
  }

  .pintado-quick-spec strong{
    font-size:20px !important;
    line-height:1.15 !important;
  }

  /* State 2 */
  .pintado-profile-heading{
    top:22px !important;
    left:var(--pad) !important;
    right:var(--pad) !important;
  }

  .pintado-profile-heading > p{
    font-size:10px !important;
    line-height:1.2 !important;
  }

  .pintado-profile-heading h3{
    font-size:clamp(36px,11vw,52px) !important;
    line-height:.9 !important;
  }

  .pintado-spec-grid{
    top:25% !important;
    left:var(--pad) !important;
    right:var(--pad) !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .pintado-spec{
    min-height:78px !important;
    padding:10px !important;
  }

  .pintado-spec > span{
    font-size:9px !important;
    line-height:1.25 !important;
  }

  .pintado-spec strong{
    font-size:clamp(22px,6.5vw,30px) !important;
    line-height:1 !important;
  }

  .pintado-spec strong small{
    font-size:9px !important;
  }

  .pintado-details{
    top:60% !important;
    left:var(--pad) !important;
    right:var(--pad) !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px 18px !important;
  }

  .pintado-details span{
    font-size:8px !important;
    line-height:1.2 !important;
  }

  .pintado-details strong{
    font-size:11px !important;
    line-height:1.35 !important;
  }

  .pintado-profile-bottom{
    left:var(--pad) !important;
    right:var(--pad) !important;
    bottom:14px !important;
  }

  .pintado-bottom-label,
  .pintado-bottom-copy,
  .pintado-bottom-link{
    font-size:9px !important;
    line-height:1.3 !important;
  }
}

/* iPhone SE / short mobile viewport:
   keep the same interaction but compact the second state vertically. */
@media (max-width: 480px) and (max-height: 720px){
  .pintado-profile-heading{
    top:14px !important;
  }

  .pintado-profile-heading h3{
    font-size:34px !important;
  }

  .pintado-spec-grid{
    top:23% !important;
  }

  .pintado-spec{
    min-height:67px !important;
    padding:7px 8px !important;
  }

  .pintado-spec strong{
    font-size:21px !important;
  }

  .pintado-details{
    top:58% !important;
    gap:8px 14px !important;
  }

  .pintado-details strong{
    font-size:10px !important;
  }

  .pintado-profile-bottom{
    bottom:7px !important;
  }

  .pintado-bottom-copy{
    display:none !important;
  }
}


/* =========================================================
   MOBILE READABILITY — PINTADO ONLY
========================================================= */
@media (max-width: 768px){
  .pintado-profile-heading > p{
    font-size:11px !important;
    letter-spacing:.16em !important;
  }

  .pintado-spec > span{
    font-size:11px !important;
    line-height:1.3 !important;
    letter-spacing:.08em !important;
    color:rgba(255,255,255,.78) !important;
  }

  .pintado-spec strong{
    font-size:clamp(24px,7vw,32px) !important;
  }

  .pintado-spec strong small{
    font-size:10px !important;
  }

  .pintado-details span{
    font-size:10px !important;
    line-height:1.25 !important;
    letter-spacing:.08em !important;
    color:rgba(255,255,255,.68) !important;
  }

  .pintado-details strong{
    font-size:12px !important;
    line-height:1.35 !important;
  }

  .pintado-bottom-label,
  .pintado-bottom-link{
    font-size:10px !important;
    line-height:1.3 !important;
  }

  .pintado-bottom-copy{
    font-size:12px !important;
    line-height:1.4 !important;
  }
}

@media (max-width: 480px) and (max-height: 720px){
  .pintado-spec > span{font-size:10px !important}
  .pintado-spec strong{font-size:23px !important}
  .pintado-details span{font-size:9px !important}
  .pintado-details strong{font-size:11px !important}
  .pintado-bottom-label,
  .pintado-bottom-link{font-size:9px !important}
}


/* =========================================================
   DOCTOR PINTADO — FINAL RESPONSIVE CORRECTION
   Uses the EXISTING home.js GSAP timeline on every screen.
   Scroll down: intro -> profile
   Scroll up:   profile -> intro
========================================================= */

@media (max-width: 1000px) {
  .pintado-section {
    position: relative !important;
    height: 400vh !important;
    min-height: 0 !important;
  }

  .pintado-sticky {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    height: 100svh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .pintado-picture,
  .pintado-bg,
  .pintado-overlay {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .pintado-picture {
    display: block !important;
  }

  .pintado-bg {
    object-fit: cover !important;
  }

  /* Critical: both states must occupy the SAME pinned viewport.
     GSAP controls their visibility; CSS must not stack them. */
  .pintado-intro,
  .pintado-profile {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }
}

/* ---------------- TABLET ---------------- */
@media (min-width: 769px) and (max-width: 1000px) {
  .pintado-intro,
  .pintado-profile {
    padding-left: var(--pad) !important;
    padding-right: var(--pad) !important;
  }

  .pintado-intro-main {
    left: var(--pad) !important;
    right: auto !important;
    width: min(70vw, 680px) !important;
  }

  .pintado-intro h2 {
    font-size: clamp(72px, 11vw, 110px) !important;
  }

  .pintado-description {
    max-width: 560px !important;
    font-size: 16px !important;
  }

  .pintado-profile-heading h3 {
    font-size: clamp(48px, 7vw, 72px) !important;
  }

  .pintado-spec > span,
  .pintado-details span {
    font-size: 10px !important;
  }

  .pintado-details strong {
    font-size: 13px !important;
  }
}

/* ---------------- MOBILE ---------------- */
@media (max-width: 768px) {
  .pintado-intro,
  .pintado-profile {
    padding: 0 var(--pad) !important;
  }

  /* FIRST STATE */
  .pintado-top {
    position: absolute !important;
    top: 22px !important;
    left: var(--pad) !important;
    right: var(--pad) !important;
    font-size: 10px !important;
  }

  .pintado-intro-main {
    position: absolute !important;
    top: 43% !important;
    left: var(--pad) !important;
    right: var(--pad) !important;
    width: auto !important;
    transform: translateY(-50%);
  }

  .pintado-eyebrow {
    font-size: 11px !important;
  }

  .pintado-intro h2 {
    font-size: clamp(52px, 16vw, 78px) !important;
    line-height: .82 !important;
  }

  .pintado-description {
    max-width: 390px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .pintado-quick-specs {
    position: absolute !important;
    left: var(--pad) !important;
    right: var(--pad) !important;
    bottom: 24px !important;
    width: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 12px !important;
  }

  .pintado-quick-spec span {
    font-size: 9px !important;
    line-height: 1.25 !important;
  }

  .pintado-quick-spec strong {
    font-size: 19px !important;
    line-height: 1.1 !important;
  }

  /* SECOND STATE */
  .pintado-profile-heading {
    position: absolute !important;
    top: 22px !important;
    left: var(--pad) !important;
    right: var(--pad) !important;
  }

  .pintado-profile-heading > p {
    margin: 0 0 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: .14em !important;
  }

  .pintado-profile-heading h3 {
    margin: 0 !important;
    max-width: 340px !important;
    font-size: clamp(36px, 11vw, 50px) !important;
    line-height: .9 !important;
  }

  .pintado-spec-grid {
    position: absolute !important;
    top: 24% !important;
    left: var(--pad) !important;
    right: var(--pad) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  .pintado-spec {
    min-width: 0 !important;
    min-height: 76px !important;
    padding: 9px 8px !important;
  }

  .pintado-spec > span {
    font-size: 10px !important;
    line-height: 1.25 !important;
    letter-spacing: .05em !important;
    color: rgba(255,255,255,.8) !important;
  }

  .pintado-spec strong {
    margin-top: 7px !important;
    font-size: clamp(23px, 7vw, 29px) !important;
    line-height: 1 !important;
  }

  .pintado-spec strong small {
    font-size: 9px !important;
  }

  .pintado-details {
    position: absolute !important;
    top: 59% !important;
    left: var(--pad) !important;
    right: var(--pad) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 11px 16px !important;
  }

  .pintado-details > div {
    min-width: 0 !important;
  }

  .pintado-details span {
    display: block !important;
    margin-bottom: 4px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    letter-spacing: .06em !important;
    color: rgba(255,255,255,.72) !important;
  }

  .pintado-details strong {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere !important;
  }

  .pintado-profile-bottom {
    position: absolute !important;
    left: var(--pad) !important;
    right: var(--pad) !important;
    bottom: 10px !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: end !important;
    gap: 12px !important;
    padding-top: 10px !important;
  }

  .pintado-bottom-label,
  .pintado-bottom-link {
    font-size: 9px !important;
    line-height: 1.3 !important;
  }

  .pintado-bottom-copy {
    display: none !important;
  }
}

/* iPhone SE / other short screens */
@media (max-width: 480px) and (max-height: 720px) {
  .pintado-profile-heading {
    top: 10px !important;
  }

  .pintado-profile-heading > p {
    font-size: 9px !important;
    margin-bottom: 5px !important;
  }

  .pintado-profile-heading h3 {
    font-size: 32px !important;
  }

  .pintado-spec-grid {
    top: 21% !important;
  }

  .pintado-spec {
    min-height: 65px !important;
    padding: 6px 7px !important;
  }

  .pintado-spec > span {
    font-size: 9px !important;
  }

  .pintado-spec strong {
    font-size: 21px !important;
  }

  .pintado-details {
    top: 56% !important;
    gap: 7px 12px !important;
  }

  .pintado-details span {
    font-size: 8px !important;
  }

  .pintado-details strong {
    font-size: 10px !important;
  }

  .pintado-profile-bottom {
    bottom: 6px !important;
  }
}