/* Supplied title artwork, using the exact original letterforms. */
.hero-img{transform:scaleX(-1) scale(1.02);filter:grayscale(1) brightness(.75);object-position:50% 54%}
.hero-shade{background:linear-gradient(180deg,#10101038,transparent 30%,#10101018 55%,#0a100ef0)}
.hero-title{top:27%;left:6.2vw;right:auto;width:56vw;max-width:880px}
.hero-title>.eyebrow{margin-bottom:30px}
.hero h1.art-title{width:100%;line-height:1;font-size:0;mix-blend-mode:screen}
.art-title img{height:auto;object-fit:contain;filter:none;opacity:.94}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero-credits{margin-top:38px}.roark-layout h2{font-size:clamp(58px,6.3vw,110px)}
@media(max-width:800px){.hero-title{top:30%;width:87.6vw;max-width:none}.hero-title>.eyebrow{margin-bottom:30px}.hero-img{object-position:48% 50%}.hero-credits{margin-top:30px}.roark-layout h2{font-size:10.5vw}}

.portrait img{object-position:31% center}.beneath-copy figure{height:410px}.moods figure img{object-position:50% 55%}@media(max-width:800px){.portrait img{object-position:27% center}.beneath-copy figure{width:68%;height:350px}}

.portrait img{object-position:center 30%}.film-strip img:first-child{object-position:30% center}.beneath-copy figure{height:350px}.hero-shade{background:linear-gradient(180deg,#10101038,transparent 30%,#10101018 55%,#0a100ef0)}

.motion-frame{position:relative;width:100%;height:100%;overflow:hidden;background:#14221f}
.treatment-video{display:block;width:100%;height:100%;object-fit:cover;}
.clip-toggle{position:absolute;right:16px;bottom:14px;background:#0b1717bb;border:1px solid #e9e5d94d;color:#e9e5d9;font:8px Mono,monospace;letter-spacing:.08em;padding:9px 11px;cursor:pointer}
.clip-toggle:hover{background:#0b1717}.clip-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.quiet-image .treatment-video{object-position:center}.moods .treatment-video{}
@media(max-width:800px){.clip-toggle{font-size:7px;right:10px;bottom:10px;padding:9px}.diptych .treatment-video{object-position:center}}

/* Cover refinement: warmer ivory, more scale, tighter supplied title lockup. */
:root{--paper:#eee5d2}
.hero-img{filter:grayscale(1) brightness(.65)}
.hero-title{top:25%;width:64vw;max-width:1000px}
.hero-title>.eyebrow{color:var(--paper);margin-bottom:28px;letter-spacing:.12em}
.art-title img{opacity:1}
.hero-credits{margin-top:30px}
@media(max-width:800px){.hero-title{top:29%;width:87.6vw;max-width:none}.hero-title>.eyebrow{max-width:290px;line-height:1.7;margin-bottom:27px}.hero-credits{margin-top:28px}}

.art-title img{filter:sepia(.4) saturate(.65) brightness(.94);display:block;width:100%;height:auto}.hero h1.art-title{display:flex;flex-direction:column;gap:0}

/* Keep the full surf composition visible on every screen. */
.wave-wide{height:auto;aspect-ratio:16/9}.wave-wide .treatment-video{object-fit:contain;}

/* Give the title more presence and raise the cover composition. */
.hero-title{top:17%;width:72vw;max-width:1120px}
.hero-title>.eyebrow{margin-bottom:23px}
@media(max-width:800px){.hero-title{top:21%;width:87.6vw;max-width:none}.mast-middle{display:block;font-size:7px;letter-spacing:.04em}.hero-title>.eyebrow{margin-bottom:25px}}
/* Warm charcoal with a restrained maroon undertone. */
:root{--dark:#211e20;--ink:#292426;--line:rgba(41,36,38,.25)}
.masthead.scrolled{background:#211e20f2}
#index{background:#211e20fa}
.motion-frame{background:#211e20}
.clip-toggle{background:#211e20c9}.clip-toggle:hover{background:#30282c}
.hero-shade{background:linear-gradient(180deg,#211e2038,transparent 30%,#211e2018 55%,#211e20ed)}
.beneath-overlay{background:linear-gradient(0deg,var(--dark),transparent 70%)}
.closing-shade{background:linear-gradient(0deg,#211e20b3,transparent 75%)}

/* Monochrome reef, with the smaller underwater frame remaining in color. */
.beneath-image>img{filter:grayscale(1)}
.quiet-image .treatment-video{}

/* Clean supplied lettering, warmed gently from pure white. */
.art-title img{filter:brightness(.96) sepia(.12) saturate(.5)}

/* Lift the complete title composition clear of the surfer silhouette. */
.hero-title{top:9.6%}
@media(max-width:800px){.hero-title{top:16.6%}}

/* Full-frame Koa sequence, with the lineup photograph moved to belonging. */
.stakes-motion>figure{width:100%;margin:0}
.stakes-motion .motion-frame{height:auto;aspect-ratio:16/9}
.stakes-motion .treatment-video{object-fit:contain}
.stakes-motion figcaption{margin-top:12px}
.belonging-media{display:grid;grid-template-columns:1fr 1.15fr;gap:30px;margin-top:75px;align-items:start}
.belonging-still>img{height:auto;aspect-ratio:2047/1271;object-fit:contain}
.belonging-still figcaption{margin-top:12px;color:#a5aea2;font-size:9px}
.belonging-media .shore-image{height:auto;width:100%;margin:65px 0 0}
.belonging-media .motion-frame{height:auto;aspect-ratio:16/9}
.belonging-media .treatment-video{object-fit:contain}
.belonging-media .shore-image figcaption{margin-top:12px}
@media(max-width:800px){.belonging-media{grid-template-columns:1fr;gap:35px;margin-top:45px}.belonging-media .shore-image{margin:0}.belonging-still figcaption{font-size:7px}.stakes-motion figcaption{font-size:7px}}

/* Preserve the supplied color and monochrome of every motion reference. */
.treatment-video{filter:none}
/* Supplied Roark artwork, inverted and warmed to match the masthead. */
.mast-brand{display:block;line-height:0}
.mast-brand img{display:block;width:112px;height:auto;filter:none}
@media(max-width:800px){.mast-brand{display:block}.mast-brand img{width:90px}}

/* Treatment credit and supplied brand mark form one masthead line. */
.mast-brand{display:flex;align-items:center;gap:14px;position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
.mast-label{font:9px/1.4 Mono,monospace;letter-spacing:.1em}
.mast-brand img{width:94px}
.underwater-motion{margin:0 6.2vw 90px}
.underwater-motion .motion-frame{height:auto;aspect-ratio:16/9}
.underwater-motion .treatment-video{object-fit:contain}
.underwater-motion figcaption{margin-top:14px;color:var(--paper);font-size:9px}
.closing>.closing-motion{position:absolute;inset:0;width:100%;height:100%}
.closing-motion .treatment-video{object-fit:cover;filter:none}
.closing-motion .clip-toggle{z-index:4;right:6.2vw;bottom:95px}
.closing-shade{pointer-events:none}
.closing-copy,.closing-bottom{z-index:2}
@media(max-width:800px){.mast-brand{display:flex;gap:8px}.mast-label{font-size:6px;letter-spacing:.04em}.mast-brand img{width:65px}.underwater-motion{margin:0 6vw 55px}.underwater-motion figcaption{font-size:7px}.closing-motion .clip-toggle{right:6vw;bottom:85px}}

/* Quiet masthead and motion: controls remain available on keyboard focus. */
.mast-text{position:absolute;left:50%;transform:translateX(-50%);font:9px/1.4 Mono,monospace;letter-spacing:.1em;white-space:nowrap}
.index-toggle{margin-left:auto}
.clip-toggle{opacity:0;pointer-events:none}
.clip-toggle:focus-visible{opacity:1;pointer-events:auto}
@media(max-width:800px){.mast-text{display:block;font-size:7px;letter-spacing:.04em}}

/* A quiet underwater image below the opening statement. */
.premise-still{margin:42px 0 0}.premise-still img{height:auto;filter:none}
@media(max-width:800px){.premise-still{margin-top:30px}}

/* A quieter, gently wider underwater frame at the foot of the reef section. */
.underwater-motion{width:76%;max-width:1120px;margin:0 auto 80px}
.underwater-motion .motion-frame{aspect-ratio:2/1}
.underwater-motion .treatment-video{object-fit:cover;object-position:center}
@media(max-width:800px){.underwater-motion{width:88%;margin-bottom:55px}}

/* Keep closing typography beneath the bright horizon. */
.closing-copy{top:35%}
/* Desktop presentation gate. */
.desktop-notice{display:none}
html.phone-view body{min-height:100svh}
html.phone-view body> :not(.desktop-notice){display:none!important}
html.phone-view .desktop-notice{display:flex}
.desktop-notice{min-height:100svh;padding:50px 8vw;flex-direction:column;justify-content:center;background:var(--dark);color:var(--paper)}
.desktop-notice h2{font-size:clamp(42px,10vw,85px);line-height:1.05;letter-spacing:-.03em;margin:14px 0 32px}
.desktop-notice>p:not(.eyebrow){max-width:340px;font-size:16px;line-height:1.6}
.desktop-notice>span{margin-top:35px;font-size:8px}
@media(max-width:899px){body{min-height:100svh}body> :not(.desktop-notice){display:none!important}.desktop-notice{display:flex}}

/* Exact paper ivory in the supplied title letterforms. */
.hero h1.art-title{mix-blend-mode:normal}.art-title img{filter:none;opacity:1}