/* One shared motion language; ordinary document flow is the fallback. */
.hero-composition { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,1fr); gap:clamp(2rem,3vw,3rem); padding-block:3rem; }
.hero-visual { position:relative; min-width:0; }
.hero-visual img { width:100%; height:100%; object-fit:cover; }
.hero-visual h1 { position:absolute; top:2%; left:2%; right:2%; color:var(--paper); text-shadow:0 1px 16px #0003; }
.hero-visual h1 .last-line { margin-left:0; }
.hero-composition .hero-intro { display:flex; flex-direction:column; justify-content:space-between; padding:0; }
.hero-composition .hero-intro .text-link { align-self:flex-end; }
.scroll-scene { position:relative; isolation:isolate; }
.flow-field { position:absolute; inset:0; overflow:hidden; z-index:-1; pointer-events:none; }
.flow-field i { position:absolute; width:95%; height:60%; border:1px solid #2458ad12; border-radius:50%; left:30%; top:20%; transform:translateY(var(--flow-shift,0px)) rotate(-18deg); }
.flow-field i:nth-child(2) { left:25%; top:26%; }
.flow-field i:nth-child(3) { left:20%; top:32%; }
@media(min-width:1100px) and (min-height:700px) and (prefers-reduced-motion:no-preference) {
 .scroll-enabled .focus, .scroll-enabled .process { height:190vh; padding-block:0; }
 .scroll-enabled .scroll-scene { position:sticky; top:0; min-height:100vh; padding-block:clamp(2rem,5vh,4rem); display:flex; flex-direction:column; justify-content:center; }
 .scroll-enabled .scroll-scene > .eyebrow { margin-bottom:2.5rem; }
 .scroll-enabled .focus-content, .scroll-enabled .process-layout { row-gap:clamp(2rem,5vh,4rem); }
 .scroll-enabled .focus-intro { grid-column:1/-1; }
 .scroll-enabled .workflow-scan { grid-column:7/12; grid-row:2; }
 .scroll-enabled .focus-copy { grid-column:2/8; grid-row:3; }
 .scroll-enabled .process-heading h2 { grid-column:1/-1; }
 .scroll-enabled .process-heading p { grid-column:6/12; }
 .scroll-enabled .process-content { grid-column:1/-1; }
 .scroll-enabled [data-beat] { opacity:var(--beat-opacity,1); transform:translateY(var(--beat-y,0px)); }
}
@media(max-width:1099px) {
 .hero-composition { grid-template-columns:1fr; }
 .hero-visual h1 { position:static; color:var(--ink); text-shadow:none; margin-bottom:2rem; }
 .hero-visual { display:flex; flex-direction:column-reverse; }
 .hero-visual img { height:auto; object-fit:contain; }
 .hero-composition .hero-intro { display:grid; grid-template-columns:2fr 1fr; gap:2rem; }
 .flow-field { opacity:.4; }
}
@media(max-width:700px) {
 .hero-composition .hero-intro { display:flex; }
 .hero-composition { padding-top:2rem; }
}
@media(prefers-reduced-motion:reduce) { .flow-field i { transform:rotate(-18deg); } }
@media(prefers-reduced-motion:no-preference) {
 .arrival { transition:opacity .65s ease, transform .65s ease; }
 .arrival.waiting { opacity:0; transform:translateY(18px); }
}
@media print {
 .scroll-enabled .focus, .scroll-enabled .process { height:auto; }
 .scroll-enabled .scroll-scene { position:static; min-height:0; }
 .scroll-enabled [data-beat], .arrival.waiting { opacity:1!important; transform:none!important; }
 .flow-field { display:none; }
}

/* Photographic treatment, kept independent of the content animations. */
.ocean-story { position:relative; isolation:isolate; }
.ocean-surface { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:clip; }
.water-light { position:sticky; top:0; height:100vh; width:100%;
 background:url('assets/foyla-yacht-dark-unbranded.webp') center bottom / auto 700vh no-repeat;
 opacity:.075; }
/* Only the lower sea portion is shown, without procedural effects or filters. */
.contact.frame { width:100%; max-width:none; min-height:720px; aspect-ratio:3/2;
 margin-top:clamp(6rem,10vw,10rem); padding:clamp(3rem,5vw,5rem) var(--gutter);
 background:linear-gradient(110deg,rgba(7,12,17,.88),rgba(7,12,17,.35) 65%,rgba(7,12,17,.64)),url('assets/foyla-yacht-dark-unbranded.webp') center / cover no-repeat;
 display:flex; flex-direction:column; border:0; color:#f7f7f4;
}
.contact h2 { max-width:20em; }
.contact-details { display:flex; flex:1; flex-direction:column; align-items:flex-start; margin-top:2rem; }
.contact-details p { max-width:30rem; color:#f7f7f4; }
.contact .contact-link { align-self:flex-end; margin-top:auto; padding-top:5rem; color:#fff; border-bottom-color:#fff; }
.footer { background:var(--closing-bg); }
@media(max-width:700px) {
 .water-light { opacity:.055; }
 .contact.frame { aspect-ratio:auto; min-height:760px; background-position:center,62% center; }
 .contact-details p { max-width:25rem; }
}
@media print { .ocean-surface {display:none;} }
.footer { border-top:0; }

/* Dark editorial variant: remove the decorative water layer. */
.ocean-story { background:var(--closing-bg); color:var(--closing-text); }
.ocean-story .accent { color:#a7bde5; }
.ocean-story .focus, .ocean-story .process { --ink:#f5f5f1; --rule:#4b5356; border-color:#4b5356; }
.ocean-story .workflow-scan li, .ocean-story .steps h3,
.ocean-story .step-number, .ocean-story .steps li:hover h3,
.ocean-story .steps li:hover .step-number { color:#f5f5f1; }
.ocean-story .steps li, .ocean-story .workflow-scan li { border-top-color:#4b5356; }
.ocean-story .focus { margin-top:0; }
.focus-content, .process-layout { row-gap:clamp(4rem,8vw,8rem); }
@media(min-width:1100px) and (min-height:700px) and (prefers-reduced-motion:no-preference) {
 .scroll-enabled .scroll-scene { min-height:100vh; padding-block:5vh; justify-content:flex-start; }
 .scroll-enabled .focus-content, .scroll-enabled .process-layout { row-gap:clamp(3.5rem,8vh,7rem); }
 .scroll-enabled .scroll-scene > .eyebrow { margin-bottom:clamp(2rem,5vh,4rem); }
 .scroll-enabled .process-heading p { grid-column:5/12; }
 .scroll-enabled .focus, .scroll-enabled .process { height:220vh; }
}
.contact.frame { min-height:0; aspect-ratio:auto; background:var(--closing-bg);
 width:calc(100% - var(--gutter)*2); max-width:1680px;
 margin-top:clamp(6rem,10vw,10rem); padding:clamp(3rem,5vw,5rem) 0 clamp(6rem,12vh,10rem); }
.contact-details { display:grid; grid-template-columns:2fr 1fr; gap:3rem; margin-top:3rem; align-items:end; }
.contact .contact-link { margin-top:0; padding-top:0; justify-self:end; align-self:end; }
@media(max-width:700px) {
 .contact-details { display:flex; gap:2.5rem; }
 .contact .contact-link { align-self:flex-start; }
 .contact.frame { min-height:0; }
}
/* Finish the white hero with the same inset below and beside the image. */
.hero.frame { padding-bottom: max(var(--gutter), calc((100vw - 1680px) / 2)); }
/* Consistent separators before sections 02, 03 and 04. */
.ocean-story .process { border-bottom: 0; }
.why.frame, .contact.frame { border-top: 1px solid #4b5356; }
/* Spacious photographic contact close, with CTA inside the same viewport. */
.contact.frame {
 width:100%; max-width:none; min-height:640px; height:85svh; max-height:960px;
 padding:clamp(2.5rem,5vh,4rem) var(--gutter); margin-top:clamp(6rem,10vw,10rem);
 background:linear-gradient(110deg,rgba(7,12,17,.87),rgba(7,12,17,.45) 65%,rgba(7,12,17,.7)),url('assets/foyla-yacht-dark-unbranded.webp') center 62% / cover no-repeat;
 display:flex; flex-direction:column;
}
.contact-details { display:flex; flex:1; flex-direction:column; align-items:flex-start; gap:2rem; margin-top:2.5rem; }
.contact-details p { max-width:30rem; }
.contact .contact-link { align-self:flex-end; margin-top:auto; padding-top:2rem; }
@media(max-width:700px) {
 .contact.frame { height:auto; min-height:720px; max-height:none; background-position:center,60% center; }
 .contact .contact-link { align-self:flex-end; }
}

/* Founder story follows the same scroll-controlled sequence as 01–02. */
@media(min-width:1100px) and (min-height:700px) and (prefers-reduced-motion:no-preference) {
 .scroll-enabled .why { min-height:220vh; padding-top:0; }
 .scroll-enabled .why .scroll-scene { min-height:100vh; }
}
@media print { .scroll-enabled .why { min-height:0; } }

/* Refined approved version: stronger copy and a gradual photographic close. */
.focus-copy p, .process-heading p, .why-copy p, .contact-details p { font-weight:700; }
.contact.frame {
 border-top:0;
 background-image:linear-gradient(to bottom,#15191b 0%,rgba(21,25,27,.96) 8%,rgba(21,25,27,.65) 35%,rgba(21,25,27,.38) 68%,rgba(21,25,27,.6) 100%),url('assets/foyla-yacht-dark-unbranded.webp');
}
/* A title is a single colour; proposed accent hierarchy. */
.focus-intro h2, .process-heading h2, .why-heading h2 { color:#a7bde5; }
.focus-intro h2 .accent, .process-heading h2 .accent, .why-heading h2 .accent { color:inherit; }
@media(prefers-reduced-motion:no-preference) {
 .arrival { transition:opacity .8s cubic-bezier(.2,.65,.3,1),transform .8s cubic-bezier(.2,.65,.3,1); }
 .arrival.waiting { transform:translateY(12px); }
}

/* Keep the photographic close focused on the hull, foils and spray. */
.contact.frame { background-position:center,center bottom; }
.contact-details p { max-width:40rem; text-wrap:balance; }
.process-content { margin-top:clamp(3rem,7vh,5rem); }
@media(max-width:700px) {
 .contact.frame { background-position:center,60% bottom; }
 .contact-details p { max-width:100%; }
 .process-content { margin-top:2rem; }
}

/* Quiet, wrapping legal navigation in the footer. */
.footer{flex-wrap:wrap;gap:2rem}.footer .legal-links{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;flex:1 1 600px;font-size:.875rem;line-height:1.5;justify-content:center}.footer .legal-links a{color:inherit;text-decoration:none}.footer .legal-links a:hover{text-decoration:underline;text-underline-offset:4px}@media(max-width:700px){.footer .legal-links{flex-basis:100%;justify-content:flex-start;order:3}}

.foil-logo{display:block;width:48px;height:48px}.brand{display:inline-flex;align-items:center;flex-shrink:0}

.footer{display:grid;grid-template-columns:100px minmax(0,1fr) 100px;align-items:center}.footer .legal-links{justify-content:center}.footer>span{text-align:right;white-space:nowrap}.footer .brand{color:#f7f7f4}
.contact.frame{background-image:linear-gradient(to bottom,#15191b 0%,rgba(21,25,27,.96) 8%,rgba(21,25,27,.65) 35%,rgba(21,25,27,.38) 65%,rgba(21,25,27,.65) 83%,#15191b 100%),url('assets/foyla-yacht-dark-unbranded.webp')}
@media(max-width:700px){.footer{grid-template-columns:1fr 1fr}.footer .legal-links{grid-column:1/-1;grid-row:2;justify-content:center}.footer>span{grid-column:2;grid-row:1}.foil-logo{width:40px;height:40px}}

header .brand{gap:10px}header .brand-name{font-size:42px;line-height:1;font-weight:700;letter-spacing:-.065em}@media(max-width:700px){header .brand-name{font-size:34px}}
/* Quiet silver masthead, leaving the hero statement in the foreground. */
.masthead .brand,.masthead nav a{color:#707779}
.masthead .career{color:#858b8d}
.masthead .brand:hover,.masthead nav a:hover,.masthead nav a:focus-visible{color:#191c1d}
.masthead .brand,.masthead nav a{transition:color .2s ease}
/* Neutral silver section titles in place of blue accents. */
.focus-intro h2,.process-heading h2,.why-heading h2,.contact h2{color:#858b8e}
.focus-intro h2 .accent,.process-heading h2 .accent,.why-heading h2 .accent{color:inherit}

/* A single restrained silver reflection follows scroll progress. */
@media(prefers-reduced-motion:no-preference){
 @supports (background-clip:text){
 .scroll-enabled .focus-intro h2,.scroll-enabled .process-heading h2,.scroll-enabled .why-heading h2,.scroll-enabled .contact h2{
  background-image:linear-gradient(110deg,#858b8e 0%,#858b8e 40%,#a8adaf 46%,#e0e2e2 50%,#a8adaf 54%,#858b8e 60%,#858b8e 100%);
  background-size:300% 100%;background-position:var(--shine-position,110%) center;
  background-clip:text;-webkit-background-clip:text;color:transparent;
 }
 .scroll-enabled .focus-intro h2 .accent,.scroll-enabled .process-heading h2 .accent,.scroll-enabled .why-heading h2 .accent{color:inherit}
 }
}

/* Foil / centered navigation / uppercase wordmark. */
.header-wordmark{justify-self:end;color:#707779;font-size:1.5rem;font-weight:700;letter-spacing:.08em;text-decoration:none;line-height:1}
.header-wordmark:hover{color:#191c1d}
@media(max-width:700px){
 .masthead .brand{order:0}.masthead .header-wordmark{order:1;margin-left:auto}.masthead .menu-toggle{order:2}.masthead nav{order:3}
 .masthead.menu-open nav .career-link{width:auto;padding:0;grid-column:auto;grid-row:auto}
 .header-wordmark{font-size:1.25rem}
}
@media(prefers-reduced-motion:no-preference){
 .contact-arrival{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.65,.3,1)}
 .contact-arrival.waiting{opacity:0!important;transform:translateY(12px)}
}

.header-wordmark{font-size:42px;letter-spacing:-.065em;font-weight:700}@media(max-width:700px){.header-wordmark{font-size:34px}}
/* A restrained graphite reflection across the original hero typography. */
@media(prefers-reduced-motion:no-preference){
 @supports(background-clip:text){
  #hero-title{
   background-image:linear-gradient(110deg,#191c1d 0%,#191c1d 40%,#424748 46%,#72797b 50%,#424748 54%,#191c1d 60%,#191c1d 100%);
   background-size:300% 100%;background-position:var(--hero-shine,110%) center;
   background-clip:text;-webkit-background-clip:text;color:transparent;
  }
  #hero-title span{color:inherit}
 }
}

.contact.frame{position:relative;isolation:isolate;overflow:hidden}
.contact-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;z-index:-2}
.contact.frame::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,#15191b 0%,rgba(21,25,27,.96) 8%,rgba(21,25,27,.65) 35%,rgba(21,25,27,.38) 65%,rgba(21,25,27,.65) 83%,#15191b 100%)}
@media(prefers-reduced-motion:reduce){.contact-video{display:none}}

.hero-video{display:block;width:100%;height:auto;object-fit:contain;background:#15191b}
.hero-image #yacht-image{display:none}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}.hero-image #yacht-image{display:block}}
/* Leave room for descenders inside the text-clipped reflection surface. */
#hero-title{padding-bottom:.16em;margin-bottom:-.16em}

/* Full-width film connects the light opening to the dark editorial sections. */
.hero.frame{padding-bottom:0}
.hero-image{position:relative;width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-bottom:0}
.hero-image::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,var(--paper,#f7f7f4) 0%,transparent 22%,transparent 76%,#15191b 100%)}
.contact-default{display:flex;flex-direction:column;flex:1;min-height:0}
.contact [hidden]{display:none!important}
button.contact-link{background:none;color:inherit;font-family:inherit;border:0;border-bottom:1px solid currentColor;cursor:pointer;border-radius:0}
.contact-open.frame{height:auto;min-height:85svh;max-height:none}
.contact-open.frame::before{background:linear-gradient(to bottom,#15191b,rgba(21,25,27,.89) 25%,rgba(21,25,27,.83) 75%,#15191b)}
#contact-panel{width:min(100%,800px);margin:0 auto;padding-bottom:3rem;font-size:1rem;line-height:1.5}
.contact-back{padding:0;background:none;border:0;color:#c0c4c5;font:inherit;cursor:pointer}
#contact-panel h3{font-size:clamp(2rem,3.35vw,3.8rem);font-weight:400;letter-spacing:-.05em;line-height:1.1;margin:2rem 0 1.5rem}
.contact-panel-intro{max-width:38rem;font-weight:700;font-size:1.125rem}
.demo-note{font-size:.875rem;color:#b1b7b9;margin:1rem 0}
.contact-options{display:flex;align-items:center;gap:1.25rem;margin:2rem 0}
.contact-options button,.contact-submit{font:inherit;color:inherit;background:transparent;border:0;border-bottom:1px solid #778083;padding:.65rem 0;cursor:pointer}
.contact-options button[aria-pressed=true]{border-bottom:2px solid #fff;font-weight:700}
.contact-options button[aria-pressed=false],.contact-options>span{color:#aeb4b6}
#contact-form fieldset{border:0;padding:0;margin:0 0 1.5rem;min-width:0}
#contact-form legend{padding:0;font-weight:700}
.contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}
#contact-form label{display:flex;flex-direction:column;gap:.5rem}
#contact-form input,#contact-form select,#contact-form textarea{width:100%;box-sizing:border-box;font:inherit;color:#f7f7f4;background:#15191ba6;border:1px solid #657073;border-radius:0;padding:.7rem;min-width:0;color-scheme:dark}
#contact-form textarea{resize:vertical}
#message-optional{display:contents;color:#b1b7b9}
.contact-submit{margin-top:1.5rem}
.contact button:focus-visible,.contact input:focus-visible,.contact select:focus-visible,.contact textarea:focus-visible{outline:2px solid #e2e5e5;outline-offset:5px}
#contact-result{padding:2rem 0;border-top:1px solid #657073}
@media(max-width:700px){.contact-fields{grid-template-columns:1fr;gap:1rem}.contact-options{gap:1rem}.contact-open.frame{min-height:0}#contact-panel{padding-bottom:1rem}}

/* Let the film fade directly into the first section. */
.focus.frame{border-top:0}

/* Keep the inline contact flow inside the existing film frame. */
.contact-open.frame{height:85svh;min-height:0;max-height:960px;padding-block:clamp(1.25rem,3vh,2rem)}
#contact-panel{width:min(100%,960px);height:100%;min-height:0;overflow-y:auto;overscroll-behavior:auto;box-sizing:border-box;padding:0 .5rem .5rem;scrollbar-width:thin;font-size:.9375rem}
#contact-panel h3{font-size:clamp(1.8rem,3vw,2.6rem);margin:1rem 0 .65rem}
.contact-panel-intro{font-size:.9375rem;line-height:1.5;max-width:42rem;margin:0}
.contact-options{margin:1rem 0;gap:1rem}
.contact-options button{padding:.4rem 0}
#contact-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2rem;align-items:start}
#contact-form fieldset{grid-column:1;margin:0}
#contact-form legend{margin-bottom:.65rem;font-size:.9375rem}
#contact-form>.contact-fields{grid-column:2;grid-row:1;grid-template-columns:1fr;margin:0;gap:.65rem}
#contact-form fieldset .contact-fields{grid-template-columns:1fr;margin:0;gap:.65rem}
#contact-form label{gap:.25rem}
#contact-form input,#contact-form select,#contact-form textarea{padding:.5rem .65rem;font-size:.9375rem}
#contact-form .message-label{grid-column:1/-1}
#contact-form textarea{height:64px;min-height:44px;max-height:100px;resize:vertical}
#contact-form .contact-submit{grid-column:1/-1;justify-self:end;margin:0;padding:.35rem 0}
#contact-form:has(#booking-fields[hidden])>.contact-fields{grid-column:1/-1;grid-template-columns:1fr 1fr}
#contact-result{padding:1rem 0}
@media(max-width:700px){
 .contact-open.frame{height:90svh;min-height:0;max-height:960px;padding-block:1.25rem}
 #contact-panel h3{margin-top:.75rem}
 #contact-form{gap:.75rem 1rem}
 #contact-form>.contact-fields,#contact-form fieldset .contact-fields{gap:.5rem}
 .contact-options{margin:.75rem 0}
}
/* One heading and an aligned, row-by-row booking form. */
#contact-form{display:block}
#contact-form fieldset{margin:0 0 1rem}
#contact-form fieldset .contact-fields,#contact-form>.contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin:0 0 1rem}
#contact-form input,#contact-form select{height:42px}
#contact-form .contact-submit{display:block;margin:.75rem 0 0 auto}
#contact-form select:disabled{opacity:.45;cursor:not-allowed}
#contact-panel{width:min(100%,800px)}
#contact-panel h3{margin-bottom:1.25rem}
@media(max-width:700px){#contact-form fieldset .contact-fields,#contact-form>.contact-fields{gap:.75rem}}
/* Shared restrained tile treatment, preserving the existing step copy. */
.ocean-story .steps li{padding:1.5rem;background:rgba(255,255,255,.025);border-top:1px solid #4b5356;transition:background .25s ease,border-color .25s ease}
.ocean-story .steps li:hover{background:rgba(255,255,255,.075);border-top-color:#d6d9da}
.workflow-scan{position:relative;isolation:isolate;padding:1.5rem}
.workflow-scan::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.025);border-top:1px solid #4b5356;opacity:0;transition:opacity .45s ease,background .25s ease,border-color .25s ease}
.workflow-scan.tile-ready::before{opacity:1}
.workflow-scan.tile-ready:hover::before{background:rgba(255,255,255,.075);border-top-color:#d6d9da}
.ocean-story .workflow-scan li:first-child{border-top:0}
@media(prefers-reduced-motion:reduce){.workflow-scan::before,.ocean-story .steps li{transition:none}}

/* Simple category and explanation hierarchy within the existing hero. */
.hero-intro.hero-category-block{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0}
.hero-category-block .hero-category{font-size:clamp(1.125rem,1.5vw,1.5rem);font-weight:400;line-height:1.3;letter-spacing:normal;color:#191c1d;margin:0 0 1rem}
.hero-category-block p{margin:0}
.masthead .brand,.masthead .header-wordmark{color:#191c1d}
/* Keep the first viewport charcoal rather than introducing a silver highlight. */
#hero-title{background-image:none;color:#191c1d}

/* Two-line brand statement and a single editorial definition strip. */
.hero-heading{grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,4rem)}
#hero-title{font-size:clamp(3rem,8.2vw,9rem);text-align:center;width:100%;line-height:1.015}
#hero-title>span{white-space:nowrap}
#hero-title .last-line{margin-left:0}
.hero-intro.hero-category-block{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;gap:clamp(1rem,3vw,3rem);padding:0}
.hero-category-block .hero-category{font-size:clamp(.6875rem,1.12vw,1.125rem);font-weight:500;letter-spacing:normal;white-space:nowrap;margin:0;flex-shrink:0}
.hero-category-block p{font-size:clamp(.6875rem,1.08vw,1.0625rem);line-height:1.5;max-width:none;white-space:nowrap;text-align:left;text-align-last:left;text-wrap:nowrap}
@media(max-width:700px){
 #hero-title{font-size:clamp(1.65rem,7.8vw,3.4rem)}
 .hero-intro.hero-category-block{flex-direction:column;align-items:stretch;gap:.75rem}
 .hero-category-block .hero-category{font-size:1.125rem;white-space:normal}
 .hero-category-block p{font-size:1rem;white-space:normal;text-wrap:pretty}
}

/* Offset statement, generous definition, and quiet full-screen navigation. */
#hero-title>span:first-child{transform:translateX(2%)}
#hero-title .last-line{transform:translateX(-2%)}
.hero-heading{gap:clamp(3rem,6vw,6rem);padding-bottom:clamp(3rem,5vw,5rem)}
.hero-intro.hero-category-block{display:grid;grid-template-columns:1fr 1.65fr;align-items:start;gap:clamp(2rem,7vw,8rem)}
.hero-category-block .hero-category{font-size:clamp(1.125rem,1.7vw,1.75rem);font-weight:400;white-space:normal}
.hero-category-block p{font-size:clamp(1.125rem,1.55vw,1.5rem);white-space:normal;text-wrap:balance;max-width:48rem;justify-self:end}
.ocean-story .eyebrow,.closing .eyebrow{color:#858b8e}
.overlay-masthead{display:flex;position:relative;justify-content:flex-end;gap:1.25rem}
.overlay-masthead .header-wordmark{order:0;margin-right:auto;margin-left:0;position:relative;z-index:102}
.overlay-masthead .brand{order:1;position:relative;z-index:102}
.overlay-masthead .menu-toggle{order:2;display:flex;position:relative;z-index:102;align-items:center;justify-content:center;gap:8px;width:44px;height:48px;padding:8px;background:none;border:0;color:#191c1d;cursor:pointer}
.overlay-masthead .menu-toggle span{display:block;width:2px;height:27px;background:currentColor;margin:0;transform:none;transition:transform .25s ease}
.overlay-masthead.menu-open .menu-toggle span:first-child{transform:translateX(5px) rotate(45deg)}
.overlay-masthead.menu-open .menu-toggle span:last-child{transform:translateX(-5px) rotate(-45deg)}
.overlay-masthead #main-navigation{display:none}
.overlay-masthead.menu-open #main-navigation{display:flex;position:fixed;inset:0;z-index:100;width:100%;height:100dvh;background:#f7f7f4;flex-direction:column;align-items:flex-start;justify-content:center;gap:clamp(.75rem,2vh,1.5rem);padding:100px var(--gutter) 40px;overflow-y:auto}
.overlay-masthead.menu-open #main-navigation a{display:block;width:auto;padding:0;color:#191c1d;font-size:clamp(2.5rem,6vw,6rem);font-weight:600;letter-spacing:-.055em;line-height:1.08;text-decoration:none;cursor:pointer}
.overlay-masthead.menu-open #main-navigation a:hover{color:#707779}
body.navigation-open{overflow:hidden}
@media(prefers-reduced-motion:no-preference){.overlay-masthead.menu-open #main-navigation{animation:menu-arrive .25s ease}@keyframes menu-arrive{from{opacity:0}to{opacity:1}}}
@media(max-width:700px){
 .hero-intro.hero-category-block{display:flex;gap:1rem}
 .hero-category-block p{font-size:1.125rem}
 .overlay-masthead .header-wordmark{order:0;margin-right:auto;margin-left:0}
 .overlay-masthead .brand{order:1}
 .overlay-masthead .menu-toggle{order:2}
 #hero-title>span:first-child{transform:translateX(1%)}
 #hero-title .last-line{transform:translateX(-1%)}
}

/* Compact definition and two comparable menu triggers. */
#hero-title .last-line{transform:translateX(-3.5%)}
.hero-intro.hero-category-block{display:flex;flex-direction:row;justify-content:center;align-items:baseline;gap:1.75em;width:max-content;max-width:100%;margin:1rem auto 2rem;font-size:clamp(.75rem,1.27vw,1.375rem)}
.hero-category-block .hero-category{font-size:inherit;font-weight:600;white-space:nowrap}
.hero-category-block p{font-size:inherit;white-space:nowrap;max-width:none;text-wrap:nowrap;color:#191c1d}
.overlay-masthead .menu-toggle{width:auto;gap:14px;padding:4px 0 4px 12px;transition:opacity .2s}
.overlay-masthead .menu-toggle:hover{opacity:.65}
.overlay-masthead .menu-toggle:focus-visible{outline:2px solid #191c1d;outline-offset:6px}
.overlay-masthead .menu-toggle .menu-bars{display:flex;align-items:center;gap:8px;width:24px;height:40px;background:none;transform:none}
.overlay-masthead .menu-toggle .menu-bars i{display:block;width:2px;height:27px;background:currentColor;transition:transform .25s}
.overlay-masthead.menu-open .menu-toggle .menu-bars i:first-child{transform:translateX(5px) rotate(45deg)}
.overlay-masthead.menu-open .menu-toggle .menu-bars i:last-child{transform:translateX(-5px) rotate(-45deg)}
.overlay-masthead .menu-toggle .menu-word{display:none;width:auto;height:auto;background:none;transform:none;font:400 1rem Arial,Helvetica,sans-serif}
.menu-label-variant .overlay-masthead .menu-toggle .menu-word{display:block}
.menu-label-variant .overlay-masthead .menu-toggle .menu-bars{display:none}
@media(max-width:700px){
 .hero-intro.hero-category-block{width:100%;flex-direction:column;gap:.75rem;font-size:1.125rem;margin:.5rem 0 1rem}
 .hero-category-block .hero-category,.hero-category-block p{white-space:normal;text-wrap:pretty}
 #hero-title .last-line{transform:translateX(-1.5%)}
}

/* One foil control, persistent section orientation, and balanced editorial copy. */
.overlay-masthead.frame{position:sticky;top:0;z-index:200;width:100%;max-width:none;padding:0 max(var(--gutter),calc((100vw - 1680px)/2));min-height:80px;background:#f7f7f4;border-bottom:0;flex-wrap:nowrap}
.overlay-masthead::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px;background:linear-gradient(#f7f7f4,transparent);pointer-events:none}
.overlay-masthead .header-wordmark{display:grid;align-items:center;min-width:0}
.masthead-name,.masthead-section{grid-area:1/1;transition:opacity .2s ease}
.masthead-section{font-size:clamp(.875rem,1.2vw,1.125rem);font-weight:400;letter-spacing:normal;opacity:0;color:#707779}
.in-section .masthead-name{opacity:0}
.in-section .masthead-section{opacity:1}
.menu-open .masthead-name{opacity:1}
.menu-open .masthead-section{opacity:0}
.overlay-masthead .menu-toggle{width:56px;height:56px;padding:4px;display:grid;place-items:center;flex-shrink:0}
.overlay-masthead .menu-toggle svg{grid-area:1/1;width:48px;height:48px;transition:opacity .2s ease,transform .25s ease}
.overlay-masthead .menu-close{opacity:0;transform:rotate(-35deg)}
.overlay-masthead.menu-open .menu-close{opacity:1;transform:rotate(0)}
.overlay-masthead.menu-open .menu-toggle .foil-logo{opacity:0;transform:rotate(35deg)}
#hero-title>span:first-child{transform:translateX(-3%)}
#hero-title .last-line{transform:translateX(4%)}
.hero-intro.hero-category-block{display:grid;grid-template-columns:auto minmax(3rem,1fr) minmax(0,46%);gap:2rem;width:100%;align-items:center;margin:1rem 0 2rem;font-size:clamp(1.0625rem,1.5vw,1.5rem)}
.hero-category-block::after{content:"";height:1px;background:var(--rule);grid-column:2;grid-row:1}
.hero-category-block .hero-category{grid-column:1;white-space:normal}
.hero-category-block p{grid-column:3;white-space:normal;text-wrap:balance;text-align:right;text-align-last:right}
.workflow-scan li{font-weight:700}
.focus-copy p,.process-heading p,.why-copy p,.contact-details p,.steps p{text-wrap:balance;text-align:left;text-align-last:left}
body:has(.overlay-masthead) .ocean-story .eyebrow,body:has(.overlay-masthead) .closing .eyebrow{visibility:hidden}
body:has(.overlay-masthead) main section{scroll-margin-top:80px}
@media(min-width:1100px) and (min-height:700px){.scroll-enabled .scroll-scene{top:80px;min-height:calc(100vh - 80px)}}
@media(max-width:700px){
 .overlay-masthead.frame{min-height:72px;padding-block:0}
 #hero-title>span:first-child{transform:translateX(-1%)}
 #hero-title .last-line{transform:translateX(2%)}
 .hero-intro.hero-category-block{display:flex;align-items:stretch;gap:1rem;font-size:1.125rem}
 .hero-category-block::after{display:none}
 .hero-category-block p{text-align:left;text-align-last:left}
}
@media(prefers-reduced-motion:reduce){.masthead-name,.masthead-section,.overlay-masthead .menu-toggle svg{transition:none}}

/* Stretch the opening vertically, anchoring its definition beside the film. */
.hero-heading{min-height:calc(85svh - 80px);grid-template-rows:1fr auto;align-items:center;gap:clamp(2rem,4vh,4rem);padding-top:clamp(2rem,4vh,4rem);padding-bottom:.75rem}
.hero-intro.hero-category-block{grid-template-columns:max-content minmax(1rem,1fr) max-content;gap:1rem;margin:0;align-items:center;font-size:clamp(.75rem,1.25vw,1.375rem)}
.hero-category-block .hero-category,.hero-category-block p{white-space:nowrap;text-wrap:nowrap}
.hero-category-block p{max-width:none}
.overlay-masthead.frame{transition:background-color .25s ease}
.overlay-masthead.in-section:not(.menu-open){background:#15191b}
.overlay-masthead.in-section:not(.menu-open)::after{background:linear-gradient(#15191b,transparent)}
.overlay-masthead.in-section:not(.menu-open) .menu-toggle,.overlay-masthead.in-section:not(.menu-open) .masthead-section{color:#858b8e}
/* One silver-grey text palette across the dark homepage sections. */
.ocean-story,.closing{color:#858b8e;--closing-text:#858b8e;--ink:#858b8e}
.ocean-story :is(h2,h3,p,li,a,button,span),.closing :is(h2,h3,p,li,a,button,label,legend,input,select,textarea,span){color:#858b8e}
.scroll-enabled .focus-intro h2,.scroll-enabled .process-heading h2,.scroll-enabled .why-heading h2,.scroll-enabled .contact h2{background-image:none;color:#858b8e}
.ocean-story .steps li:hover h3,.ocean-story .steps li:hover .step-number,.footer .brand{color:#858b8e}
@media(max-width:700px){
 .hero-heading{min-height:calc(75svh - 72px);padding-top:2rem;padding-bottom:1rem;gap:2rem}
 .hero-intro.hero-category-block{display:flex;gap:.75rem;font-size:1.0625rem}
 .hero-category-block .hero-category,.hero-category-block p{white-space:normal;text-wrap:balance}
}
@media(prefers-reduced-motion:reduce){.overlay-masthead.frame{transition:none}}
.ocean-story .workflow-scan li,.ocean-story .steps h3,.ocean-story .step-number,.contact .contact-link{color:#858b8e}

/* One continuous secondary statement, aligned to the headline's visual extent. */
.hero-intro.hero-definition-row{display:block;padding:clamp(1.5rem,3vh,3rem) 0;margin:0;min-width:0}
.hero-definition-row .hero-definition{font-family:inherit;font-size:clamp(22px,1.55vw,26px);font-weight:400;letter-spacing:normal;line-height:1.4;color:#191c1d;white-space:nowrap;text-wrap:nowrap;text-align:left;text-align-last:left;max-width:none;width:max-content;margin:0 auto}
.hero-definition strong{font-weight:600}
.hero-definition span{font-weight:400}
@media(max-width:700px){
 .hero-definition-row .hero-definition{width:auto;font-size:18px;white-space:normal;text-wrap:pretty;margin:0}
 .hero-definition strong,.hero-definition span{display:block}
 .hero-definition span{margin-top:.5rem}
}