/* Supplied Sea Ray artwork stays intact; the layout turns each kit across the card. */
.card__scan-media,.card__plan-media,.card__build-media{display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden;position:relative;container-type:size}
.card__scan-media{background:#12202d;padding:22px}
.card__scan-media>img{width:100%;height:100%;object-fit:contain}
.card__plan-media{background:#fff}
.card__build-media{background:#12202d;grid-column:2;grid-row:1}
.card__plan-media>img,.card__build-media>img{position:absolute;left:50%;top:50%;width:100cqh;height:100cqw;max-width:none;min-height:0;object-fit:contain;transform:translate(-50%,-50%) rotate(-90deg)}
.card__build-media>img{position:static;transform:none;width:100%;height:100%;object-fit:contain}
@media(max-width:860px){.card__scan-media{padding:12px}}
.stack.is-flow .card__scan-media,.stack.is-flow .card__plan-media,.stack.is-flow .card__build-media{height:clamp(220px,50svh,540px)}
@media(max-height:550px) and (max-width:860px){.card__scan-media,.card__plan-media,.card__build-media{height:300px}}

@media(max-width:860px){.card__build-media{grid-column:1;grid-row:1}}

@media(max-width:860px){
 .card.card--scan,.card.card--searay-design{height:auto;min-height:0;grid-template-rows:auto auto}
 .card--scan .card__scan-media{height:auto;aspect-ratio:4906/2862}
 .card--searay-design .card__plan-media{height:auto;aspect-ratio:4096/2160}
}

.palette-card .palette-card__name{display:none!important}
.palette-card .palette-card__hint{visibility:visible!important}
.palette-card__grid button[aria-pressed="true"]{outline:2px solid var(--navy);outline-offset:2px}

/* September 14: HydroTrax identity and wider material selection. */
.act-material>.sc-wrap{max-width:104rem}
.material{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.material__pic img{aspect-ratio:5/4;object-position:center 48%;max-height:620px}
.material__copy>.sc-lede{max-width:40ch}
.thickness{margin-top:48px;padding-top:32px;border-top:1px solid #cad0cc}
.thickness__options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:24px 0 32px}
.thickness__option{margin:0;padding:16px 18px 24px;background:var(--paper);border:1px solid #dddcd3;border-radius:8px}
.thickness__option svg{display:block;width:100%;height:auto}
.thickness__option figcaption{font-size:32px;font-weight:600;line-height:1;display:flex;gap:7px;align-items:baseline}
.thickness__option figcaption span{font-size:15px;color:var(--muted);font-weight:400}
.thickness__detail{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center}
.thickness__detail h5{font-size:22px;font-weight:600;margin:0 0 12px}
.thickness__detail p{max-width:51ch;margin:0 0 12px;line-height:1.6}
.thickness__note{font-size:13px;color:var(--muted)}
.thickness__detail .layers{margin:0}
.foot{align-items:center}
.foot__partner{display:flex;align-items:center;gap:18px;max-width:100%;font-size:11px}
.foot__seadek{width:116px;height:auto}
.foot__tcm{width:154px;height:auto}
@media(max-width:860px){
 .material{grid-template-columns:1fr;gap:32px}.material__pic{max-width:none}.material__pic img{aspect-ratio:5/4;max-height:65svh}
 .thickness__options{gap:10px}.thickness__option{padding:12px 8px 18px}.thickness__option figcaption{font-size:28px}
 .thickness__detail{grid-template-columns:1fr;gap:20px}.foot__partner{gap:12px}.foot__seadek{width:96px}.foot__tcm{width:130px}
}
@media(max-width:374px){.foot__partner{flex-wrap:wrap}.thickness__options{gap:6px}}

/* Round two: the brand belongs to the hero; material options replace the photo. */
.bar{justify-content:flex-end}
.bar__menu{margin-left:auto}
.drop__label{isolation:isolate}
.label__title.label__title--brand{display:block;width:100%;max-width:470px;line-height:0;white-space:normal;background:var(--navy)}
.hero__logo{display:block;width:100%;height:auto;mix-blend-mode:screen;clip-path:inset(1px)}
.material{align-items:center}
.material-guide{background:var(--paper);border:1px solid #d8d9d0;border-radius:8px;padding:clamp(24px,3vw,42px);display:grid;gap:24px;min-width:0}
.material-guide h3{font-size:18px;line-height:1.25;font-weight:600;margin:0 0 10px;letter-spacing:-.02em}
.material-guide p{font-size:15px;line-height:1.55;margin:0;color:var(--muted);max-width:54ch}
.material-guide .layers{border:0;background:transparent;padding:0;border-radius:0}
.material-guide .layers figcaption{padding:10px 0 0;font-size:11px}
.material-guide__patterns,.material-guide__budget{border-top:1px solid #dddcd3;padding-top:24px}
.pattern-examples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}
.pattern-examples figure{margin:0;min-width:0}
.pattern-examples svg{width:100%;height:auto;display:block}
.pattern-examples figcaption{font-size:16px;font-weight:600;line-height:1.35;margin-top:12px;color:var(--navy)}
.foot__seadek{filter:brightness(0) invert(1);width:122px;height:auto}
@media(max-width:860px){
 .label__title.label__title--brand{max-width:290px}
 .material__copy{grid-row:1}.material-guide{grid-row:2;padding:24px;gap:20px}
 .material-guide h3{font-size:17px}.material-guide p{font-size:14px}
 .material-guide__patterns,.material-guide__budget{padding-top:20px}
 .pattern-examples{gap:8px}.pattern-examples figcaption{font-size:14px}
 .foot__seadek{width:106px}
}
@media(max-width:860px) and (max-height:720px){
 .label__title.label__title--brand{max-width:230px}
 .drop__frame--phone{width:min(calc(100vw - 40px),calc((100svh - var(--bar) - var(--dock) - 230px)*.8))}
}
@media(max-width:860px) and (max-height:550px){
 .label__title.label__title--brand{max-width:260px}
 .drop__frame--phone{width:calc((100svh - var(--bar) - var(--dock) - 24px)*.8)}
}

.material-guide__patterns h3{font-size:20px;font-weight:600}

/* Keep the phone footer balanced when its content moves onto separate rows. */
@media(max-width:860px){
 .foot{flex-direction:column;justify-content:center;text-align:center;gap:24px}
 .foot>p{max-width:34ch}
 .foot>p>a{display:block;width:fit-content;margin:4px auto 0;white-space:nowrap}
 .foot__partner{justify-content:center;align-self:center}
}
@media(max-width:374px){
 .foot__partner{flex-direction:column;gap:12px}
}

/* A centered wordmark over a full-width mobile masthead. */
@media(max-width:860px){
 .label__title.label__title--brand{align-self:center;margin-inline:auto;padding:8px 12px;border-radius:0;background:transparent}
}

@media(max-width:860px){
 :root{--mobile-masthead:linear-gradient(90deg,#10232c 0%,#203a46 50%,#10232c 100%)}
 .bar{background:var(--navy);border-bottom-color:transparent}
 .drop::before{content:"";position:absolute;inset:0 0 auto;height:calc(var(--bar) + 180px);background:var(--mobile-masthead);mask-image:linear-gradient(#000 0%,#000 62%,transparent 100%);pointer-events:none}
}

@media(max-width:860px){
 .drop__label{isolation:auto;mix-blend-mode:screen}
}
.thickness__option figcaption{flex-wrap:wrap;row-gap:10px}
.thickness__option figcaption small{flex-basis:100%;font-size:12px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;line-height:1.4;color:var(--muted)}
@media(max-width:600px){
 .thickness__options{grid-template-columns:1fr;gap:12px}
 .thickness__option{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(76px,1fr);align-items:center;gap:12px;padding:16px}
 .thickness__option figcaption{row-gap:8px}
}

.bar__location{display:inline-flex;align-items:center;gap:9px;margin-right:auto;min-width:0;color:var(--ivory);font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap}
.bar__location svg{flex:none;color:#70c4c8;width:17px;height:21px}
@media(max-width:860px){
 .bar__location{font-size:11px;gap:7px}
 .bar__location svg{width:15px;height:19px}
}

@media(max-width:860px){
 .label__title.label__title--brand{max-width:360px;padding:8px 0}
}
@media(max-width:860px) and (max-height:720px){
 .label__title.label__title--brand{max-width:280px}
}
@media(max-width:860px) and (max-height:550px){
 .label__title.label__title--brand{max-width:260px}
}

@media(max-width:860px){
 .bar{transition:opacity 240ms ease}
 .bar.is-scrolled-away:not(:focus-within){opacity:0;pointer-events:none}
}
@media(prefers-reduced-motion:reduce){.bar{transition:none}}

/* Keep the menu clear against the solid navy navigation strip. */
.bar__menu{color:var(--ivory)}

/* Short portrait phones still need copy above the photograph. */
@media(max-width:860px) and (max-height:550px) and (orientation:portrait){
 .drop__label{max-width:none}
 .label__title.label__title--brand{max-width:280px}
 .drop__frame--phone{left:50%;right:auto;bottom:calc(var(--dock) + 12px);transform:translateX(-50%);width:min(calc(100vw - 40px),calc((100svh - var(--bar) - var(--dock) - 230px)*.8))}
}
@media(min-width:861px){
 .drop__label{max-width:40rem;align-items:center;text-align:center}
 .label__act{align-items:center}
 .label__title.label__title--brand{max-width:640px}
}

/* Give the copy its natural height and the photograph the space that remains.
   Container height follows the grid row, so neither logo nor caption can overlap it. */
@media(max-width:860px) and (min-height:551px),(max-width:860px) and (orientation:portrait){
 .drop{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:24px;padding:calc(var(--bar) + 24px) 20px calc(var(--dock) + 18px)}
 .drop>picture{display:none}
 .drop__label{position:relative;grid-area:1 / 1;inset:auto;transform:none;width:100%;max-width:none;min-width:0}
 .drop__box--phone{position:relative;grid-area:2 / 1;inset:auto;min-height:0;min-width:0;container-type:size;overflow:hidden}
 .drop__frame--phone{inset:auto auto 0 50%;transform:translateX(-50%);width:min(100%,calc(100cqh * 1814 / 2268));height:auto;aspect-ratio:1814 / 2268}
}
@media(max-width:860px) and (max-height:720px) and (min-height:551px),(max-width:860px) and (max-height:720px) and (orientation:portrait){
 .drop{padding-top:calc(var(--bar) + 16px);padding-bottom:calc(var(--dock) + 12px)}
}