:root{
  --walnut:#4B352A;--smoke:#6F6861;--stone:#B6ACA3;--espresso:#2B201A;--black:#000;--ivory:#F4F0EA;--ink:#1A130F;
  --serif:'Cormorant Garamond','Cormorant',Garamond,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --pad:clamp(20px,2.4vw,34px);
  --band-h:clamp(300px,49vh,440px);
  --tile-h:calc(var(--band-h) * .682);   /* 300 / 440 – same proportions as the reference */
  --gap:10px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ink)}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;color:var(--ivory);font-family:var(--sans);font-size:13px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;background:transparent}
a{color:inherit}
img{display:block;max-width:100%}
p{margin:0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ---------- Background (brand photography, heavily veiled) ---------- */
.ob-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--ink)}
.ob-bg__img{position:absolute;inset:-4%;background:var(--ink) url(../img/bg-yacht.webp) center 40%/cover no-repeat;animation:ob-drift 40s ease-in-out infinite alternate;will-change:transform;filter:saturate(.8)}
.ob-bg__shade{position:absolute;inset:0;background:
  radial-gradient(90% 60% at 50% 45%,rgba(26,19,15,.62) 0%,rgba(26,19,15,.8) 60%,rgba(18,13,10,.95) 100%),
  linear-gradient(180deg,rgba(26,19,15,.5) 0%,rgba(26,19,15,0) 25%,rgba(26,19,15,.2) 60%,rgba(18,13,10,.9) 100%)}
.ob-bg__grain{position:absolute;inset:0;opacity:.12;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes ob-drift{from{transform:scale(1)}to{transform:scale(1.07) translate3d(-1.5%,1%,0)}}

/* ---------- Top bar ---------- */
.ob-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:22px var(--pad) 0;font-size:12px;color:rgba(244,240,234,.6)}
.ob-top__r{justify-self:end;text-align:right}
.ob-top__icon{display:block;line-height:0}
.ob-top__icon img{width:40px;height:auto;opacity:.9}
.ob-sep{opacity:.6}

/* ---------- Band: hidden scrolling images + dot wordmark ---------- */
.ob-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(12px,3vh,40px) 0}
.ob-band{position:relative;width:calc(100% - var(--pad) * 2);max-width:1372px;height:var(--band-h)}
/* Ticker – horizontally faded mask exactly like the reference (0→8%→92%→100%),
   plus a vertical fade so the images dissolve into the background ("hidden"). */
.ob-ticker{position:absolute;inset:0;overflow:hidden;display:flex;align-items:center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%),linear-gradient(180deg,transparent 12%,rgba(0,0,0,.7) 28%,rgba(0,0,0,.8) 50%,rgba(0,0,0,.7) 72%,transparent 88%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%),linear-gradient(180deg,transparent 12%,rgba(0,0,0,.7) 28%,rgba(0,0,0,.8) 50%,rgba(0,0,0,.7) 72%,transparent 88%);
  mask-composite:intersect}
.ob-ticker__track{display:flex;gap:var(--gap);margin:0;padding:0;list-style:none;width:max-content;will-change:transform;
  animation:ob-tick var(--dur,60s) linear infinite}
.ob-ticker__track li{flex:none;height:var(--tile-h);aspect-ratio:300/502;overflow:hidden;background:var(--walnut)}
.ob-ticker__track img{width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(.85) contrast(1.05)}
/* translate by exactly one copy (half the track incl. the trailing gap) */
@keyframes ob-tick{to{transform:translate3d(calc(-50% - var(--gap) / 2),0,0)}}
.ob-band__veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(26,19,15,.0) 0%,rgba(26,19,15,.12) 30%,rgba(26,19,15,.12) 70%,rgba(26,19,15,0) 100%)}
.ob-dots{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2}
/* Fallback wordmark (shown until/unless the dot canvas is drawn) */
.ob-word{position:absolute;inset:0;z-index:3;display:grid;place-items:center;margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(52px,13vw,200px);letter-spacing:.12em;padding-left:.12em;line-height:1;color:var(--ivory);pointer-events:none}
.ob-band.has-dots .ob-word{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;padding:0}

/* ---------- Copy ---------- */
.ob-copy{text-align:center;padding:clamp(20px,4vh,44px) var(--pad) 0;max-width:640px}
.ob-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px}
.ob-dot{width:5px;height:5px;border-radius:50%;background:var(--ivory);animation:ob-pulse 2.4s ease-in-out infinite}
@keyframes ob-pulse{50%{opacity:.25}}
.ob-head{margin:0;text-wrap:balance;font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,28px);line-height:1.2;letter-spacing:.01em}
.ob-line{min-height:1.5em;margin-top:2px;font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.6vw,22px);color:var(--stone);transition:opacity .6s,filter .6s}
.ob-line.is-out{opacity:0;filter:blur(4px)}

/* ---------- Footer: 3 columns like the reference ---------- */
.ob-foot{display:grid;grid-template-columns:1fr minmax(0,320px) 1fr;align-items:end;gap:24px;padding:0 var(--pad) 26px;font-size:12px;color:rgba(244,240,234,.6)}
.ob-foot__h{color:var(--ivory);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.ob-foot__col--r{text-align:right}
.ob-foot a{text-decoration:none;border-bottom:1px solid rgba(244,240,234,.3)}
.ob-foot a:hover{border-color:var(--ivory)}

.ob-form{position:relative;width:100%}
.ob-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ob-form__row{display:flex;align-items:center;border-bottom:1px solid rgba(244,240,234,.32);transition:border-color .3s}
.ob-form__row:focus-within{border-color:var(--ivory)}
.ob-form input[type=email]{flex:1;min-width:0;border:0;background:transparent;color:var(--ivory);font:inherit;font-size:16px;padding:10px 0;outline:none}
.ob-form input::placeholder{color:rgba(244,240,234,.45)}
.ob-form button{border:0;background:none;color:var(--ivory);font:600 12px/1 var(--sans);letter-spacing:.04em;padding:12px 0 12px 16px;cursor:pointer;transition:opacity .2s}
.ob-form button:hover{opacity:.7}
.ob-form button:focus-visible,.ob-form input:focus-visible{outline:1px solid var(--stone);outline-offset:4px}
.ob-form.is-busy button{opacity:.4;pointer-events:none}
.ob-form__msg{position:absolute;left:0;right:0;top:100%;margin-top:6px;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ivory);text-align:center;min-height:1.2em}
.ob-form__msg:empty{display:none}
.ob-form__msg.is-error{color:#E9B8A6}

/* ---------- Mobile ---------- */
@media (max-width:809.98px){
  :root{--band-h:clamp(200px,30svh,260px);--tile-h:calc(var(--band-h) * .66);--gap:6px}
  .ob-bg__img{background-image:url(../img/bg-boat-m.webp);background-position:center top}
  .ob-top{grid-template-columns:1fr auto;row-gap:0;padding-top:18px;font-size:11.5px;line-height:1.5}
  .ob-top__l{grid-column:1;grid-row:1}
  .ob-top__r{grid-column:1;grid-row:2;justify-self:start;text-align:left}
  .ob-top__icon{grid-column:2;grid-row:1 / span 2}
  .ob-top__icon img{width:34px}
  .ob-main{padding:8px 0}
  .ob-band{width:calc(100% - 40px)}
  .ob-copy{padding-top:22px}
  .ob-head{font-size:22px}
  .ob-line{font-size:18px}
  .ob-foot{grid-template-columns:1fr;gap:18px;padding-bottom:max(22px,env(safe-area-inset-bottom))}
  .ob-foot__col--r{text-align:left}
  .ob-foot__col:first-child{order:1}
  .ob-form{order:2}
  .ob-foot__col--r{order:3}
  .ob-form__msg{position:static;text-align:left}
}
@media (max-width:809.98px) and (max-height:700px){.ob-foot__col:first-child{display:none}}

/* ---------- Reduced motion: still images, static dots ---------- */
@media (prefers-reduced-motion:reduce){
  .ob-ticker__track,.ob-bg__img,.ob-dot{animation:none}
  .ob-ticker__track{transform:translate3d(-12%,0,0)}
  .ob-line{transition:none}
}