@font-face{
  font-family:'Circular Std';
  src:local('Circular Std'),local('CircularStd'),local('Circular Std Book'),local('CircularStd-Book');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Circular Std';
  src:local('Circular Std Medium'),local('CircularStd-Medium'),local('Circular Std Bold'),local('CircularStd-Bold');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
/* Tokens below are the Figma kit "01 — Foundations". Gold (#B99A5B) is only
   2.3:1 on Ivory, so light-background accents use Bronze (--gold-deep). */
:root{
  --om-display:'Circular Std',sans-serif;
  --om-text:'Tenor Sans','Circular Std',sans-serif;
  /* Om Opticals — Design System, 01 Foundations / A — Color System.
     The thirteen semantic tokens, under Figma's own names, with the working
     aliases the stylesheet already uses kept pointing at them. */
  --brand:#10261F;              /* Background/Brand          Deep Emerald */
  --brand-hover:#1C4636;        /* Background/Brand Hover    Emerald Hover */
  --page:#F3EFE6;               /* Background/Page           Ivory */
  --text-primary:#0A0A0A;       /* Text/Primary              Ink Black */
  --text-muted:#736E66;         /* Text/Muted                Warm Grey */
  /* Warm Grey at full strength is 4.4:1 on Ivory and 3.6:1 on the sand band,
     i.e. under WCAG AA for body copy. Kept as the token for surfaces and
     rules; text uses this darkened step of the same hue, which clears AA on
     all three light grounds (6.2 / 5.6 / 5.0). */
  --text-muted-strong:#5C5852;
  --accent:#B99A5B;             /* Accent/Gold */
  --accent-hover:#8C6F3E;       /* Accent/Gold Hover         Bronze */
  --accent-light:#E3C689;       /* Accent/Gold Light */
  --border-subtle:#E2DDD1;      /* Border/Subtle             Hairline Light */
  --border-subtle-inv:#2A2A2A;  /* Border/Subtle Inverse     Hairline Dark */

  /* Surfaces built from the palette rather than invented: ivory carrying 8%
     and 18% Warm Grey, so light sections can be segmented into three tones. */
  --surface-page:var(--page);
  --surface-warm:#EAE5DC;
  --surface-sand:#DCD8CF;

  --emerald:var(--brand); --emerald-deep:var(--brand); --emerald-hover:var(--brand-hover);
  --gold:var(--accent); --gold-deep:var(--accent-hover); --gold-light:var(--accent-light);
  --ivory:var(--page); --ivory-alt:var(--surface-warm);
  --ink:var(--text-primary); --muted:var(--text-muted-strong);
  --rule:var(--border-subtle); --rule-strong:#C6BFB0; --rule-dark:var(--border-subtle-inv);
  --rule-light:rgba(243,239,230,.18);
  --track-tight:.16em; --track-mid:.23em; --track-wide:.27em;
  --wrap:1440px; --pad:80px;
  /* Side padding for full-bleed sections. At or below --wrap it is just
     --pad; past it, it grows so the content box lands on the same
     1440-2*pad measure a .om-wrap section gets. */
  --gutter:max(var(--pad),calc((100vw - var(--wrap)) / 2 + var(--pad)));
  --r-sm:4px; --r-md:8px; --r-lg:16px; --r-full:999px;
}
*{box-sizing:border-box;font-synthesis:none}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--om-text);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--om-display);font-weight:600;font-synthesis-weight:none;margin:0}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--gold);color:var(--emerald-deep)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.om-wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.om-page{padding-top:70px;padding-bottom:92px}
.om-page--tight{padding-top:44px;padding-bottom:60px}
.om-sec{padding-block:76px}
/* Section tones. Ivory stays the page ground; warm and sand are the same
   ivory carrying Warm Grey, so bands separate without introducing a new hue. */
.om-sec--rule{background:var(--surface-warm);border-bottom:1px solid var(--border-subtle);padding-block:70px 62px}
.om-sec--alt{background:var(--surface-warm);border-block:1px solid var(--border-subtle)}
.om-sec--sand{background:var(--surface-sand);border-block:1px solid var(--border-subtle)}
/* Warm Grey, used as a drawn line rather than only as text colour. */
.om-sec--sand .om-sechead{border-bottom:1px solid rgba(115,110,102,.34);padding-bottom:22px}
.om-tone-note{margin:0;font-size:12px;line-height:1.6;letter-spacing:.04em;color:var(--text-muted)}
.om-sec--dark{background:var(--brand);color:var(--page)}
.om-stack{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.om-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:46px;align-items:start}
.om-two--end{align-items:end}

/* ---- type: Circular Std headings, Tenor Sans body & labels (Figma 01B) ---- */
.om-h1{font-size:clamp(32px,4.4vw,48px);line-height:1.15;letter-spacing:.5px;margin:14px 0 0;text-wrap:balance}
.om-h2{font-size:clamp(26px,3.2vw,36px);line-height:1.2;letter-spacing:.5px;text-wrap:balance}
.om-h3{font-size:clamp(21px,2.4vw,28px);line-height:1.25;letter-spacing:0}
.om-h1--onDark,.om-h2--onDark{color:var(--ivory)}
.om-lede{margin:20px 0 46px;max-width:56ch;font-size:18px;line-height:1.6;color:var(--muted)}
.om-lede--onDark{color:rgba(243,239,230,.74);margin-bottom:0}
.om-body{margin:0;max-width:50ch;font-size:16px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.om-body--onDark{color:rgba(243,239,230,.74)}
.om-eyebrow{display:block;font-size:13px;line-height:1.3;letter-spacing:3px;text-transform:uppercase}
.om-eyebrow--gold{color:var(--gold-deep)}
.om-eyebrow--goldOnDark{color:var(--accent-light)}
.om-eyebrow--muted{color:var(--muted);font-size:11px;letter-spacing:3px}
.om-caption{display:block;font-family:var(--om-text);font-size:11px;line-height:1.3;letter-spacing:3px;text-transform:uppercase}
.om-caption--gold{color:var(--gold)}
/* Over film the caption can land on a bright frame, where Gold is about
   2:1. On the two hero grounds it takes the lighter step and a soft
   shadow so the line stays readable whatever frame is showing. */
.om-hero .om-caption--gold{color:var(--gold-light);
  text-shadow:0 1px 16px rgba(4,12,9,.62),0 0 2px rgba(4,12,9,.45)}
.om-caption--muted{color:var(--muted)}
.om-caption--onDark{color:rgba(243,239,230,.55)}
.om-meta{font-family:var(--om-text);font-size:12px;line-height:1.4;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.om-meta--gold{color:var(--gold-deep)}
.om-meta--onDark{color:rgba(243,239,230,.55)}
.om-footnote{margin:26px 0 0;font-size:14px;line-height:1.5;color:var(--muted);max-width:66ch}
.om-phone{font-family:var(--om-display);font-size:clamp(24px,3vw,34px);line-height:1.2;color:var(--emerald);transition:color .3s}
.om-phone:hover{color:var(--gold-deep)}
.om-phone--gold{color:var(--gold);font-size:clamp(26px,3.4vw,40px)}
.om-phone--gold:hover{color:var(--ivory)}

/* ---- one filled button per view; everything else is a rule-underlined link ---- */
.om-cta{display:inline-block;padding:18px 32px;background:var(--gold);color:var(--ink);
  font-size:13px;line-height:1.3;letter-spacing:3px;text-transform:uppercase;
  border:1px solid var(--gold);transition:background .35s,color .35s,border-color .35s}
.om-cta:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--ivory)}
.om-cta--block{display:block;width:100%;text-align:center;margin-top:6px}
.om-link{display:inline-block;font-size:12px;line-height:1.3;letter-spacing:1px;
  text-transform:uppercase;border-bottom:1px solid var(--rule-strong);padding-bottom:5px;transition:color .3s,border-color .3s}
.om-link:hover{color:var(--gold-deep);border-color:var(--gold-deep)}
.om-link--start{align-self:flex-start}
.om-link--onDark{color:rgba(243,239,230,.86);border-bottom-color:rgba(185,154,91,.5)}
.om-link--onDark:hover{color:var(--gold);border-color:var(--gold)}
.om-home-mobile-link{display:none}

/* ---- chrome ---- */
.om-topbar{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;padding:10px 20px;
  background:var(--emerald);color:rgba(243,239,230,.72);font-size:11px;line-height:1.3;
  letter-spacing:var(--track-mid);text-transform:uppercase}
.om-topbar b{font-weight:400;color:var(--gold)}
.om-header{position:sticky;top:0;z-index:40;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:14px 28px;padding:16px var(--gutter);
  background:rgba(243,239,230,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(10,10,10,.1)}
/* Header and footer use the supplied full logo artwork. */
.om-mark{display:inline-flex;align-items:center;line-height:1}
.om-mark-img{display:block;width:clamp(190px,17vw,260px);height:auto;max-height:74px;object-fit:contain}
.om-mark-img--mobile{display:none}
.om-reg{font-size:.58em;letter-spacing:0;vertical-align:.52em;line-height:0;margin-inline-start:.1em}
.om-mark-name>.om-reg,.om-cover-name>.om-reg{font-size:.42em;vertical-align:1.25em;margin-inline-start:.12em}
.om-mark--light .om-mark-img{width:clamp(260px,27vw,420px);max-height:112px}
.om-nav{flex:1 1 460px;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 22px;
  font-size:11px;letter-spacing:var(--track-tight);text-transform:uppercase}
.om-nav a{padding-bottom:3px;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.om-nav-num,.om-nav-desc,.om-nav-arrow{display:none}
.om-nav-main,.om-nav-label{display:inline}
.om-nav a:hover{color:var(--gold-deep)}
.om-nav a.is-on{color:var(--emerald);border-bottom-color:var(--gold)}
.om-menu-toggle{display:none}
.om-headphone{font-size:13px;letter-spacing:1px;color:var(--emerald);
  border-bottom:1px solid rgba(16,38,31,.35);padding-bottom:5px;transition:color .3s,border-color .3s}
.om-headphone:hover{color:var(--gold-deep);border-color:var(--gold-deep)}
.om-mobile-call{display:none}
/* Hairline keeps the footer legible when it follows an emerald section. */
.om-footer{background:var(--emerald-deep);color:rgba(243,239,230,.62);
  padding:78px var(--gutter) 0;border-top:1px solid rgba(243,239,230,.12)}
.om-footer-in{max-width:var(--wrap);margin:0 auto;display:grid;
  grid-template-columns:1fr .9fr 1.1fr;gap:56px 80px;align-items:start}
.om-footer-brand{max-width:420px}
.om-footer-brand .om-mark{margin-bottom:22px}
.om-footer-col{display:flex;flex-direction:column;align-items:flex-start}
.om-footer-head{display:block;font-family:var(--om-display);font-size:11px;font-weight:600;
  letter-spacing:var(--track-mid);text-transform:uppercase;color:var(--accent-light);
  padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--rule-light);align-self:stretch}
.om-footer-nav{display:flex;flex-direction:column;gap:13px;font-size:13px;letter-spacing:.04em}
.om-footer a{transition:color .3s}
.om-footer a:hover{color:var(--gold)}
.om-footer-addr{font-style:normal;font-size:13px;line-height:1.85;margin-bottom:14px}
.om-footer-contact{display:block;font-size:13px;line-height:1.9;word-break:break-word}
/* The phone footer carries a tagline, hours, directions and WhatsApp that the
   three-column desktop footer has no room for. They are declared here and only
   turned on under 767px, so the wide footer stays exactly what it was. */
.om-footer-note,.om-footer-icon,.om-footer-hours,.om-footer-dir,
.om-footer-contact--wa,.om-footer-head--mob{display:none}
.om-social-row{display:flex;gap:14px;margin-top:26px}
.om-social{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-full);
  border:1px solid var(--rule-light);transition:border-color .3s,background .3s}
.om-social svg{width:16px;height:16px;fill:currentColor}
.om-social:hover{border-color:var(--gold);background:rgba(185,154,91,.12)}
.om-footer-base{max-width:var(--wrap);margin:64px auto 0;padding:26px 0 30px;
  border-top:1px solid var(--rule-light);display:flex;flex-wrap:wrap;gap:16px 32px;
  justify-content:space-between;align-items:center}
.om-footer-copy{margin:0;font-size:12px;letter-spacing:.04em;color:rgba(243,239,230,.5)}
.om-footer-legal{display:flex;flex-wrap:wrap;gap:28px;font-size:12px;
  letter-spacing:var(--track-tight);text-transform:uppercase}

/* ---- essilor expert stamp ---- */
.om-stamp{display:grid;place-items:center;color:var(--gold)}
.om-stamp svg{width:100%;height:auto;display:block;overflow:visible}
.om-stamp--lg{width:min(268px,74%)}
.om-stamp--sm{width:132px}
/* The official badge is dark slate, so it is mounted on an ivory medallion to
   hold contrast on the emerald sections as well as the light ones. */
.om-stamp--art{background:var(--ivory);border-radius:50%;padding:7%;
  box-shadow:0 0 0 1px rgba(185,154,91,.38)}
.om-stamp--art img{width:100%;height:auto;display:block;border-radius:50%}
.om-stamp-edge{fill:none;stroke:currentColor;stroke-width:2}
.om-stamp-edge--thin{stroke-width:1;opacity:.55}
.om-stamp-ring{font-family:var(--om-text);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;fill:currentColor}
.om-stamp-word{font-family:var(--om-display);font-weight:600;font-size:26px;
  letter-spacing:.07em;text-anchor:middle;fill:currentColor}

/* ---- essilor page ---- */
.om-sec--accred{background:var(--emerald-deep);color:var(--ivory);padding:96px var(--pad)}
.om-sec--accred .om-h2{color:var(--ivory)}
.om-sec--accred .om-body{color:rgba(243,239,230,.72)}
.om-sec--accred .om-eyebrow--gold{color:var(--accent-light)}
.om-accred{display:grid;grid-template-columns:minmax(min(220px,100%),320px) 1fr;gap:72px;align-items:center}
.om-accred-seal{display:grid;place-items:center}
.om-lensgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:1px;
  margin-top:44px;background:var(--rule-strong);border:1px solid var(--rule-strong)}
.om-lenscard{background:var(--ivory);padding:44px 40px;display:grid;gap:12px;align-content:start}
.om-lensname{font-family:var(--om-display);font-size:clamp(26px,3vw,38px);font-weight:600;
  line-height:1.1;color:var(--ink)}
.om-footnote--wide{margin-top:30px;max-width:62ch}
@media (max-width:900px){
  .om-accred{grid-template-columns:1fr;gap:44px;justify-items:start}
  .om-accred-seal{justify-self:center}
  .om-sec--accred{padding:68px var(--pad)}
  .om-lenscard{padding:34px 28px}
}

/* ---- our story: chaptered narrative ---- */
.om-chapters{padding:104px var(--pad) 96px;background:var(--ivory)}
.om-chapter{position:relative;display:grid;grid-template-columns:230px 1fr;gap:60px;
  padding:54px 0;align-items:start}
/* Hairline draws left to right as each chapter arrives. */
.om-chapter::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--rule-strong);transform:scaleX(0);transform-origin:left;
  transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.om-chapter.is-in::before{transform:scaleX(1)}
.om-chapter--open{padding-top:0}
.om-chapter--open::before{display:none}
.om-chapter-mark{display:grid;gap:10px;position:sticky;top:132px}
.om-chapter-num{font-family:var(--om-display);font-weight:600;line-height:1;
  font-size:clamp(36px,3.8vw,54px);color:var(--gold)}
.om-chapter-title{font-size:11px;letter-spacing:var(--track-mid);text-transform:uppercase;
  color:var(--muted)}
.om-chapter-body{margin:0;font-size:16px;line-height:1.95;color:rgba(10,10,10,.76);max-width:62ch}
.om-chapter-body--lead{font-size:18px;line-height:1.9;color:rgba(10,10,10,.84)}

/* The creed: the one line the whole shop runs on. */
.om-creed{display:grid;justify-items:center;gap:30px;padding:86px 0;text-align:center}
.om-creed p{margin:0;font-family:var(--om-display);font-weight:600;
  font-size:clamp(25px,3.5vw,44px);line-height:1.35;color:var(--emerald-deep);
  max-width:22ch;text-wrap:balance}
.om-creed-rule{display:block;width:96px;height:1px;background:var(--gold);
  transform:scaleX(0);transition:transform 1.1s .25s cubic-bezier(.2,.8,.2,1)}
.om-creed.is-in .om-creed-rule{transform:scaleX(1)}
@media (max-width:900px){
  .om-chapters{padding:72px var(--pad) 64px}
  .om-chapter{grid-template-columns:1fr;gap:20px;padding:40px 0}
  .om-chapter-mark{position:static;grid-auto-flow:column;justify-content:start;
    align-items:baseline;gap:16px}
  .om-chapter-num{font-size:32px}
  .om-creed{padding:60px 0;gap:24px}
}

/* ---- our story: heritage treatment ---- */
.om-est{display:inline-flex;align-items:center;gap:14px;margin-top:26px;
  font-size:11px;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--gold-light)}
.om-est i{display:block;width:46px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));
  transform-origin:left;animation:omRule 1.4s cubic-bezier(.2,.8,.2,1) .9s both}
.om-est i:last-child{background:linear-gradient(90deg,var(--gold),transparent);transform-origin:right}
@keyframes omRule{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}

.om-statband{background:var(--emerald-hover);color:var(--ivory);padding:64px var(--pad)}
.om-statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.om-stat{display:grid;gap:10px;justify-items:center;text-align:center;position:relative}
.om-stat+.om-stat::before{content:"";position:absolute;left:-17px;top:50%;transform:translateY(-50%);
  width:1px;height:54px;background:rgba(227,198,137,.28)}
.om-stat-num{font-family:var(--om-display);font-weight:600;font-size:clamp(38px,4.6vw,60px);
  line-height:1;color:var(--gold-light);font-variant-numeric:tabular-nums}
.om-stat-label{font-size:11px;letter-spacing:var(--track-mid);text-transform:uppercase;
  color:rgba(243,239,230,.72)}


/* Crizal coating panel: the plate sits behind, copy reads over the dark side. */
.om-cz{position:relative;overflow:hidden;background:var(--emerald);color:var(--ivory);
  min-height:min(78vh,720px);min-height:min(78svh,720px);display:grid;align-items:center;isolation:isolate}
.om-cz-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);transition:transform 2.1s cubic-bezier(.2,.7,.2,1);
  object-position:72% 50%;z-index:-2}
/* Darken the left so the heading always has something to sit on. */
.om-cz::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(8,23,19,.93) 0%,rgba(8,23,19,.78) 34%,
    rgba(8,23,19,.30) 62%,rgba(8,23,19,.12) 100%)}
.om-cz.is-in .om-cz-bg{transform:scale(1)}
/* Crizal only: the still is gold on near-black, so the shared emerald wash
   was greening it. Black ground, and a gold cast pulled from the image. */
.om-cz--crizal{background:#0B0B0A}
.om-cz--crizal::before{
  background:linear-gradient(100deg,rgba(10,9,7,.94) 0%,rgba(12,10,7,.82) 34%,
    rgba(14,11,7,.34) 62%,rgba(16,12,6,.10) 100%)}
.om-cz--crizal::after{content:"";position:absolute;inset:0;z-index:-1;
  pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(72% 90% at 78% 50%,rgba(227,198,137,.42),transparent 70%)}
.om-cz--crizal .om-cz-lede{color:rgba(243,239,230,.82)}
.om-cz--crizal .om-cz-note{border-top-color:rgba(227,198,137,.30)}
.om-cz--crizal .om-cz-note-h{color:var(--gold-light)}
.om-cz-in{position:relative;width:min(1240px,100%);min-width:0;margin-inline:auto;
  padding:clamp(52px,7vw,96px) var(--pad);display:grid;gap:clamp(30px,4vw,54px)}
.om-cz-head{max-width:46ch}
.om-cz-h{margin:14px 0 0;font-family:var(--om-display);font-weight:600;
  font-size:clamp(28px,4vw,52px);line-height:1.06;text-wrap:balance}
.om-cz-lede{margin:16px 0 0;font-size:clamp(14px,1.3vw,17px);line-height:1.75;
  color:rgba(243,239,230,.78);max-width:52ch}
.om-cz-notes{list-style:none;margin:0;padding:0;display:grid;min-width:0;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:clamp(22px,3vw,44px);max-width:760px}
.om-cz-note{position:relative;padding-top:20px;border-top:1px solid rgba(243,239,230,.24)}
.om-cz-mark{position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px rgba(185,154,91,.22)}
.om-cz-note-h{margin:0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-light)}
.om-cz-note-p{margin:10px 0 0;font-size:14px;line-height:1.7;color:rgba(243,239,230,.76)}
@media (max-width:1023px){
  .om-cz{min-height:0}
  .om-cz-bg{object-position:64% 50%}
  .om-cz::before{background:linear-gradient(180deg,rgba(8,23,19,.90),rgba(8,23,19,.72))}
}

/* Timeline: a gold rail that draws down with the scroll. */
.om-tlsec{background:var(--ivory-alt);padding:96px var(--pad)}
.om-tlsec-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start}
.om-tlsec-head{position:sticky;top:128px}
.om-tlsec-head .om-h2{margin-top:12px}
.om-tlx{position:relative;padding-left:112px}
.om-tlx-rail{position:absolute;left:47px;top:10px;bottom:10px;width:1px;
  background:var(--rule-strong)}
.om-tlx-rail i{position:absolute;inset:0;display:block;background:var(--gold);
  transform:scaleY(var(--tl-progress,0));transform-origin:top;transition:transform .18s linear}
.om-tlx-row{position:relative;display:grid;gap:8px;padding:0 0 40px}
.om-tlx-row:last-child{padding-bottom:0}
.om-tlx-dot{position:absolute;left:-70px;top:6px;width:11px;height:11px;border-radius:50%;
  border:1px solid var(--gold);background:var(--ivory-alt);transition:background .4s,box-shadow .4s}
.om-tlx-row.is-past .om-tlx-dot{background:var(--gold);box-shadow:0 0 0 5px rgba(185,154,91,.18)}
.om-tlx-year{font-family:var(--om-display);font-weight:600;font-size:20px;color:var(--gold-deep)}
.om-tlx-text{margin:0;font-size:15px;line-height:1.85;color:rgba(10,10,10,.72);max-width:56ch}
@media (max-width:767px){
  .om-statgrid{grid-template-columns:1fr 1fr;gap:30px 20px}
  .om-stat:nth-child(3)::before{display:none}
  .om-tlsec{padding:68px var(--pad)}
  .om-tlsec-grid{grid-template-columns:1fr;gap:40px}
  .om-tlsec-head{position:static}
  .om-tlx{padding-left:38px}
  .om-tlx-rail{left:5px}
  .om-tlx-dot{left:-38px}
  .om-prose-lead::first-letter{font-size:60px}
}

/* ---- founder block (our story) ---- */
.om-founder{background:var(--emerald-deep);color:var(--ivory);padding:96px var(--pad)}
.om-founder-grid{display:grid;grid-template-columns:1fr .82fr;gap:68px;align-items:center}
.om-founder-fig{margin:0;position:relative;overflow:visible}
.om-founder-fig img{width:100%;height:auto;display:block;border:1px solid var(--rule-light);
  clip-path:inset(0 0 100% 0);transition:clip-path 1.3s cubic-bezier(.2,.8,.2,1)}
.om-founder-fig.is-in img{clip-path:inset(0 0 0 0)}
/* Gold bracket that settles around the portrait as it reveals. */
.om-frame{position:absolute;inset:18px -18px -18px 18px;border:1px solid rgba(185,154,91,.55);
  opacity:0;transform:translate(-10px,-10px);
  transition:opacity .9s .45s cubic-bezier(.2,.8,.2,1),transform .9s .45s cubic-bezier(.2,.8,.2,1)}
.om-founder-fig.is-in .om-frame{opacity:1;transform:none}
.om-founder-copy{position:relative;padding-top:46px}
.om-founder-copy::before{content:"“";position:absolute;left:-8px;top:-30px;
  font-family:var(--om-display);font-weight:600;font-size:112px;line-height:1;
  color:var(--gold);opacity:.18;pointer-events:none}
.om-quote{margin:22px 0 0;padding:0;font-family:var(--om-text);font-weight:400;
  font-size:clamp(20px,2vw,28px);line-height:1.65;letter-spacing:.01em;color:var(--ivory);text-wrap:pretty}
.om-quote::before{content:"“"}
.om-quote::after{content:"”"}
.om-founder-by{display:grid;gap:5px;margin-top:32px;padding-top:24px;
  border-top:1px solid var(--rule-light)}
.om-founder-name{font-family:var(--om-display);font-size:16px;font-weight:600;color:var(--gold)}
.om-founder-role{font-size:12px;letter-spacing:var(--track-tight);text-transform:uppercase;
  color:rgba(243,239,230,.6)}
.om-founder-note{margin:22px 0 0;font-size:12px;line-height:1.8;color:rgba(243,239,230,.45)}
@media (max-width:900px){
  .om-founder{padding:68px var(--pad)}
  .om-founder-grid{grid-template-columns:1fr;gap:36px}
}

/* ---- essilor experts: minimal ---- */
.om-ex{background:var(--ivory)}
.om-ex-kicker{display:block;font-size:11px;letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--gold-deep)}
/* The headline is set as an acuity chart: each line smaller than the last,
   with the notation a clinic would print beside it. */
.om-ex-hero{padding:clamp(66px,9vw,120px) var(--pad) clamp(58px,7vw,96px);text-align:center}
.om-ex-chart{display:grid;justify-items:center}
.om-ex-kicker--top{margin-bottom:clamp(38px,5vw,64px)}
.om-ex-title{margin:0;display:grid;justify-items:center;gap:clamp(6px,1vw,14px);
  font-family:var(--om-display);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.om-ex-row{position:relative;display:block;line-height:.98;text-transform:uppercase}
.om-ex-row i,.om-ex-lede i{position:absolute;left:-116px;top:50%;transform:translateY(-50%);
  font-style:normal;font-family:var(--om-text);font-size:11px;letter-spacing:.14em;
  color:var(--gold);white-space:nowrap}
.om-ex-row--1{font-size:clamp(46px,9.4vw,132px)}
.om-ex-row--2{font-size:clamp(32px,6.2vw,88px);color:rgba(10,10,10,.82)}
.om-ex-row--3{font-size:clamp(24px,4.4vw,62px);color:var(--gold-deep)}
.om-ex-lede{position:relative;margin:clamp(34px,4vw,54px) auto 0;max-width:52ch;
  font-size:15px;line-height:1.9;color:rgba(10,10,10,.6)}
.om-ex-hero-link{display:inline-block;margin-top:40px;font-size:12px;
  letter-spacing:var(--track-mid);text-transform:uppercase;color:var(--gold-deep);
  padding-bottom:7px;border-bottom:1px solid rgba(140,111,62,.4);
  transition:color .35s,border-color .35s}
.om-ex-hero-link:hover{color:var(--ink);border-color:var(--ink)}
@media (max-width:1180px){
  .om-ex-row i,.om-ex-lede i{display:none}
}

.om-ex-say{padding:clamp(80px,10vw,152px) var(--pad);background:var(--emerald-deep);
  color:var(--ivory)}
.om-ex-say p{margin:0;font-family:var(--om-display);font-weight:600;
  font-size:clamp(28px,4.6vw,66px);line-height:1.14;letter-spacing:-.02em;color:var(--ivory)}
.om-ex-say em{font-style:normal;color:var(--gold)}

.om-ex-sec{padding:clamp(66px,8vw,116px) var(--pad);background:var(--ivory)}
.om-ex-sec--warm{background:var(--ivory-alt)}
/* Emerald band: everything inside flips to the light palette. */
.om-ex-sec--dark{background:var(--emerald-hover);color:var(--ivory)}
.om-ex-sec--dark .om-ex-h2{color:var(--ivory)}
.om-ex-sec--dark .om-ex-note,.om-ex-sec--dark .om-ex-item-p{color:rgba(243,239,230,.74)}
.om-ex-sec--dark .om-ex-num{color:var(--gold-light)}
.om-ex-sec--dark .om-ex-kicker{color:var(--gold-light)}
.om-ex-sec--dark .om-ex-job{border-top-color:rgba(243,239,230,.28)}
.om-ex-sec--dark .om-ex-job-n{color:var(--ivory)}
.om-ex-sec--dark .om-ex-job-lead{color:var(--gold-light)}
.om-ex-sec--dark .om-ex-fine{color:rgba(243,239,230,.5)}
.om-ex-sec + .om-ex-sec{border-top:1px solid var(--rule)}
.om-ex-sec--warm + .om-ex-sec,.om-ex-sec + .om-ex-sec--warm,
.om-ex-sec--dark + .om-ex-sec,.om-ex-sec + .om-ex-sec--dark{border-top:0}
.om-ex-head{position:relative;display:grid;grid-template-columns:auto 1fr;gap:6px 22px;
  padding-top:26px;margin-bottom:54px}
.om-ex-rule{position:absolute;top:0;left:0;right:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
[data-reveal].is-in .om-ex-rule{transform:scaleX(1)}
.om-ex-num{font-family:var(--om-display);font-weight:600;font-size:12px;letter-spacing:.1em;
  color:var(--gold-deep);grid-row:1}
.om-ex-num--light{color:var(--gold-light)}
.om-ex-head .om-ex-kicker{grid-row:1}
.om-ex-h2{grid-column:2;margin:14px 0 0;font-family:var(--om-display);font-weight:600;
  font-size:clamp(26px,3.6vw,50px);line-height:1.1;letter-spacing:-.018em;color:var(--ink)}
.om-ex-note{grid-column:2;margin:20px 0 0;max-width:52ch;font-size:15px;line-height:1.9;
  color:rgba(10,10,10,.6)}

.om-ex-grid,.om-ex-jobs,.om-ex-ranges,.om-ex-steps{list-style:none;margin:0;padding:0;display:grid}
.om-ex-grid{grid-template-columns:repeat(4,1fr);gap:44px}
.om-ex-item{padding:0;display:grid;gap:11px;align-content:start}
.om-ex-item-n{font-family:var(--om-display);font-weight:600;font-size:11px;letter-spacing:.12em;
  color:var(--gold)}
.om-ex-item-h{margin:0;font-family:var(--om-display);font-weight:600;font-size:18px;
  line-height:1.3;color:var(--ink)}
.om-ex-item-p{margin:0;font-size:14px;line-height:1.85;color:rgba(10,10,10,.62)}

.om-ex-jobs{grid-template-columns:repeat(3,1fr);gap:44px}
.om-ex-job{display:grid;gap:12px;align-content:start;padding-top:22px;
  border-top:1px solid var(--rule-strong)}
.om-ex-job-n{font-family:var(--om-display);font-weight:600;
  font-size:clamp(26px,3vw,40px);line-height:1;color:var(--ink)}
.om-ex-job-lead{font-size:12px;letter-spacing:var(--track-tight);text-transform:uppercase;
  color:var(--gold-deep)}

.om-ex-ranges{grid-template-columns:repeat(2,1fr);gap:44px}
.om-ex-range{display:grid;gap:12px;align-content:start;padding-top:24px;
  border-top:1px solid var(--rule-strong)}
.om-ex-range-n{font-family:var(--om-display);font-weight:600;
  font-size:clamp(28px,3.4vw,46px);line-height:1;color:var(--ink)}
.om-ex-range-k{font-size:11px;letter-spacing:var(--track-mid);text-transform:uppercase;
  color:var(--gold-deep)}

.om-ex-steps{grid-template-columns:repeat(4,1fr);gap:36px}
.om-ex-step{display:grid;gap:10px;align-content:start;padding-top:20px;
  border-top:1px solid var(--rule-strong)}
.om-ex-step-n{font-size:11px;letter-spacing:var(--track-mid);text-transform:uppercase;
  color:var(--gold-deep)}
.om-ex-step-h{font-family:var(--om-display);font-weight:600;font-size:17px;color:var(--ink)}
.om-ex-fine{margin:40px 0 0;max-width:62ch;font-size:13px;line-height:1.85;color:var(--muted)}

/* The film runs clean: no tint, no overlay, just the frame. */
.om-ex-film{position:relative;background:var(--ink);padding:0 0 clamp(34px,4vw,54px)}
.om-ex-film-media{position:relative;width:100%;aspect-ratio:21/9;overflow:hidden;
  background:var(--ink)}
.om-ex-film-media video,.om-ex-film-media img{width:100%;height:100%;object-fit:cover;
  object-position:50% 46%;display:block}
.om-ex-film-cap{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:baseline;
  padding-top:clamp(26px,3vw,40px)}
.om-ex-film-cap p{margin:0;font-family:var(--om-display);font-weight:600;
  font-size:clamp(18px,2.2vw,30px);line-height:1.35;color:var(--ivory);max-width:30ch}

.om-ex-cta{background:var(--emerald-deep);color:var(--ivory);
  padding:clamp(72px,8vw,118px) var(--pad);text-align:center}
.om-ex-cta-text{margin:0 0 34px;font-family:var(--om-display);font-weight:600;
  font-size:clamp(24px,3.4vw,46px);line-height:1.26;color:var(--ivory)}
.om-ex-cta-link{display:inline-block;font-size:12px;letter-spacing:var(--track-mid);
  text-transform:uppercase;color:var(--gold);padding-bottom:8px;
  border-bottom:1px solid rgba(185,154,91,.5);transition:color .35s,border-color .35s}
.om-ex-cta-link:hover{color:var(--ivory);border-color:var(--ivory)}

@media (max-width:1100px){
  .om-ex-hero-in{grid-template-columns:1fr;gap:28px}
  .om-ex-grid{grid-template-columns:repeat(2,1fr)}
  .om-ex-steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .om-ex-grid,.om-ex-jobs,.om-ex-ranges,.om-ex-steps{grid-template-columns:1fr}
  .om-ex-jobs,.om-ex-ranges,.om-ex-steps{gap:30px}
  .om-ex-grid{gap:30px}
  /* The numeral and the kicker both sit on row one. Declaring that second
     column rather than letting auto-placement open an implicit one is what
     makes 1 / -1 reach the far edge -- against an implicit track it stops at
     the numeral's width and the title wraps a word at a time. */
  .om-ex-head{grid-template-columns:auto 1fr;gap:4px 18px}
  .om-ex-h2,.om-ex-note{grid-column:1 / -1}
  /* Sections 02 and 06 as a card pair rather than a stack of ruled rows. */
  .om-ex-grid--cards,.om-ex-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .om-ex-grid--cards .om-ex-item,.om-ex-step{gap:8px;padding:18px 16px 20px;
    background:#FBF9F4;border:1px solid var(--rule);border-radius:12px}
  .om-ex-step{padding-top:18px;border-top:1px solid var(--rule)}
  .om-ex-grid--cards .om-ex-item-n,.om-ex-step-n{font-size:10px;letter-spacing:.2em}
  .om-ex-grid--cards .om-ex-item-h,.om-ex-step-h{font-size:16px;line-height:1.25}
  .om-ex-grid--cards .om-ex-item-p,.om-ex-steps .om-ex-item-p{font-size:13px;line-height:1.55}
  /* Section 04 as a snapped row of cards, the same scroller the home brand
     strip uses, so the three read as siblings rather than a long stack. */
  .om-ex-jobs{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    overscroll-behavior-inline:contain;scrollbar-width:none;
    margin-inline:calc(-1 * var(--pad));padding:0 var(--pad) 6px}
  .om-ex-jobs::-webkit-scrollbar{display:none}
  .om-ex-job{flex:0 0 min(74vw,300px);scroll-snap-align:start;gap:9px;
    padding:20px 18px 22px;border-top:0;border:1px solid var(--rule-light);
    border-radius:12px;background:rgba(243,239,230,.06)}
  .om-ex-job-n{font-size:22px}
  .om-ex-job-lead{font-size:11px}
  .om-ex-sec--dark .om-ex-item-p{font-size:13px;line-height:1.6}
  .om-ex-film-media{aspect-ratio:4/3}
  .om-ex-film-cap{grid-template-columns:1fr;gap:12px}
}

/* ---- vision check ---- */
/* Brand emerald, lifted behind the panel so the card reads as raised rather
   than dropped onto a flat slab. Gold carries every accent on it. */
.om-vc{background:var(--brand);
  background-image:radial-gradient(112% 86% at 84% -12%,var(--brand-hover) 0%,var(--brand) 55%);
  color:var(--ivory);padding:clamp(64px,7.4vw,104px) var(--pad)}
.om-vc-in{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(40px,5vw,78px);
  align-items:start}
.om-vc-kick{display:inline-flex;align-items:center;gap:14px;margin-top:10px;font-size:11px;
  letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--gold-light)}
.om-vc-kick::before{content:"";width:28px;height:1px;background:var(--gold);flex:none}
.om-vc-h{margin:20px 0 0;font-family:var(--om-display);font-weight:600;
  font-size:clamp(40px,5.6vw,84px);line-height:.98;letter-spacing:-.025em;color:var(--ivory)}
.om-vc-claim{margin:26px 0 0;font-family:var(--om-display);font-weight:600;
  font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--gold-light)}
.om-vc-chips{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.om-vc-chip{font-size:11px;letter-spacing:var(--track-tight);text-transform:uppercase;
  color:var(--gold-light);background:none;
  border:1px solid rgba(227,198,137,.34);padding:9px 16px}

.om-vc-shell{background:var(--gold-light);
  background-image:linear-gradient(166deg,#EBD6A6 0%,var(--gold-light) 54%,#DEC389 100%);
  color:var(--ink);padding:clamp(28px,3.4vw,50px);
  max-width:600px;justify-self:end;width:100%;border-top:3px solid var(--gold-deep);
  box-shadow:0 26px 60px rgba(4,12,9,.40);
  /* Panel-scoped neutrals. Warm Grey is only 4.2:1 on Gold Light and the
     Hairline Light token vanishes on it, so inside the card the same roles are
     carried by Ink at alpha. Deep Emerald replaces Bronze for every accent:
     Bronze on Gold Light is 2.8:1, Emerald is 9.5:1. */
  --muted:rgba(10,10,10,.66);
  --rule:rgba(10,10,10,.16);
  --rule-strong:rgba(10,10,10,.30);
  --ivory-alt:rgba(255,255,255,.38)}
.om-vc-open{margin:0 0 28px;font-size:16px;line-height:1.8;color:rgba(10,10,10,.72);
  max-width:46ch}
.om-vc-agree{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;
  padding:20px 0 24px;border-top:1px solid var(--rule);font-size:13px;line-height:1.7;
  color:var(--muted);cursor:pointer}
.om-vc-agree input{margin-top:2px;width:17px;height:17px;accent-color:var(--emerald)}
.om-vc-btn{display:inline-block;appearance:none;border:0;cursor:pointer;
  background:var(--emerald-deep);color:var(--ivory);font-family:var(--om-text);
  font-size:12px;letter-spacing:var(--track-mid);text-transform:uppercase;
  padding:18px 46px;transition:background .35s,opacity .35s}
.om-vc-btn:hover{background:var(--emerald-hover)}
.om-vc-btn:disabled{opacity:1;background:none;color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--rule-strong);cursor:not-allowed}
.om-vc-bar{height:2px;background:var(--rule);margin-bottom:24px}
.om-vc-bar i{display:block;height:100%;background:var(--emerald);transform:scaleX(0);
  transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.om-vc-step{margin:0 0 14px;font-size:11px;letter-spacing:var(--track-mid);
  text-transform:uppercase;color:var(--muted)}
.om-vc-step-name{color:var(--emerald);margin-left:12px}
.om-vc-q{margin:0 0 8px;font-family:var(--om-display);font-weight:600;
  font-size:clamp(22px,2.6vw,32px);line-height:1.2;color:var(--ink)}
.om-vc-hint{margin:0 0 26px;max-width:52ch;font-size:14px;line-height:1.75;color:var(--muted)}
.om-vc-field{display:grid;place-items:center;min-height:clamp(180px,24vw,260px);
  margin:0 0 24px;padding:26px 20px;background:var(--ivory);
  box-shadow:inset 0 0 0 1px rgba(10,10,10,.08)}
.om-vc-optotype{font-family:var(--om-display);font-weight:600;line-height:1;color:var(--ink);
  user-select:none}
.om-vc-dial{width:min(250px,62vw);height:auto}
.om-vc-duo{display:grid;grid-template-columns:1fr 1fr;width:min(340px,78vw);aspect-ratio:2/1}
.om-vc-duo-half{display:grid;place-items:center;font-family:var(--om-display);
  font-weight:600;color:#fff;line-height:1}
.om-vc-duo-half--red{background:#c8102e}
.om-vc-duo-half--green{background:#00843d}
.om-vc-cal{display:grid;justify-items:center;gap:20px;width:100%}
.om-vc-card{border:1px dashed var(--gold-deep);border-radius:9px;
  background:rgba(185,154,91,.07);max-width:100%}
.om-vc-range{width:min(330px,80%);accent-color:var(--gold-deep)}
.om-vc-answers{display:flex;flex-wrap:wrap;gap:11px}
.om-vc-opt{appearance:none;cursor:pointer;background:none;border:1px solid var(--rule-strong);
  font-family:var(--om-display);font-weight:600;font-size:18px;color:var(--ink);
  min-width:70px;padding:16px 22px;transition:border-color .3s,background .3s,color .3s}
.om-vc-opt:hover{border-color:var(--emerald);background:var(--ivory-alt)}
.om-vc-opt--go{font-family:var(--om-text);font-size:12px;letter-spacing:var(--track-mid);
  text-transform:uppercase;background:var(--emerald-deep);color:var(--ivory);
  border-color:var(--emerald-deep)}
.om-vc-opt--go:hover{background:var(--emerald-hover);color:var(--ivory)}
.om-vc-skip{display:inline-block;margin-top:22px;appearance:none;background:none;border:0;
  cursor:pointer;font-size:12px;letter-spacing:.06em;color:var(--muted);
  text-decoration:underline;text-underline-offset:4px}
.om-vc-skip:hover{color:var(--ink)}
.om-vc-result{margin:0 0 14px;font-family:var(--om-display);font-weight:600;
  font-size:clamp(24px,3vw,38px);line-height:1.18;color:var(--ink)}
.om-vc-summary{margin:0 0 26px;max-width:58ch;font-size:15px;line-height:1.85;
  color:rgba(10,10,10,.68)}
.om-vc-lines{list-style:none;margin:0 0 32px;padding:0;display:grid;gap:10px}
.om-vc-lines li{position:relative;padding-left:24px;font-size:14px;line-height:1.75;
  color:rgba(10,10,10,.68)}
.om-vc-lines li::before{content:"";position:absolute;left:0;top:.8em;width:11px;height:1px;
  background:rgba(16,38,31,.55)}
.om-vc-actions{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center}
.om-vc-again{appearance:none;background:none;border:0;cursor:pointer;font-size:12px;
  letter-spacing:var(--track-mid);text-transform:uppercase;color:var(--emerald);
  padding-bottom:6px;border-bottom:1px solid rgba(16,38,31,.34)}
.om-vc-again:hover{color:var(--ink);border-color:var(--ink)}
.om-vc-fine{margin:30px 0 0;max-width:62ch;font-size:12px;line-height:1.8;color:var(--muted)}
@media (max-width:900px){
  .om-vc-in{grid-template-columns:1fr;gap:36px}
}

/* ---- embedded film ---- */
.om-ex-vid{margin:56px 0 0;display:grid;gap:18px}
/* Opening film: sits directly under the hero, so no stacked top margin. */
.om-ex-open{padding:clamp(34px,4.5vw,64px) 0 clamp(8px,1.5vw,20px);background:var(--ivory)}
.om-ex-open .om-ex-vid{margin:0}
.om-ex-vid-btn{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  background:var(--ink);overflow:hidden;aspect-ratio:16/9}
.om-ex-vid-btn img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .5s}
.om-ex-vid-btn:hover img{transform:scale(1.03);opacity:.9}
.om-ex-vid-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.om-ex-vid-ico{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;border-radius:50%;border:1px solid rgba(243,239,230,.7);
  background:rgba(10,10,10,.34);backdrop-filter:blur(2px);
  transition:background .35s,border-color .35s,transform .35s}
.om-ex-vid-ico::after{content:"";position:absolute;left:53%;top:50%;
  transform:translate(-50%,-50%);border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent var(--ivory)}
.om-ex-vid-btn:hover .om-ex-vid-ico{background:rgba(185,154,91,.9);border-color:var(--gold);
  transform:translate(-50%,-50%) scale(1.06)}
.om-ex-vid-btn:hover .om-ex-vid-ico::after{border-left-color:var(--emerald-deep)}
.om-ex-vid-frame{width:100%;aspect-ratio:16/9;display:block;border:0;background:var(--ink)}
.om-ex-vid-cap{display:grid;gap:5px}
.om-ex-vid-t{font-family:var(--om-display);font-weight:600;font-size:16px;color:var(--ink)}
.om-ex-vid-m{font-size:12px;letter-spacing:.04em;color:var(--muted)}

/* ---- visioffice section ---- */
.om-vo{background:var(--emerald-deep);color:var(--ivory);padding:104px var(--pad) 0}
.om-vo-head{max-width:58ch;margin-bottom:clamp(34px,4vw,52px)}
/* The film runs to both edges of the window. It sits outside the wrap and
   cancels the band's own side padding, rather than stretching to 100vw, which
   counts the scrollbar and opens a horizontal scroll. 16:9 is the shape the
   film arrives in: an iframe cannot be cropped the way a video element can,
   so any other ratio would only letterbox it in black. */
/* Section 03 reads as one connected sequence: text, still, proof points, then
   the moving demonstration after the source note. */
.om-vo-hero{position:relative;margin-inline:calc(-1 * var(--pad));
  margin-bottom:0;background:linear-gradient(180deg,var(--emerald-deep),var(--brand));
  border-bottom:1px solid rgba(244,241,234,.12)}
.om-vo-hero-copy{position:relative;z-index:2;width:100%;max-width:var(--wrap);
  margin:0 auto;padding:clamp(14px,2vw,24px) var(--pad) clamp(38px,4.5vw,64px);
  display:grid;grid-template-columns:auto 1fr;gap:6px 22px}
.om-vo-hero-rule{grid-column:1/-1;height:1px;background:rgba(244,241,234,.28);
  margin-bottom:22px}
.om-vo-hero-num{font-family:var(--om-display);font-weight:600;font-size:12px;
  letter-spacing:.1em;color:var(--gold-light);grid-row:2}
.om-vo-hero-kicker{grid-row:2;justify-self:start;font-size:11px;
  letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--gold-light)}
.om-vo-hero-h2{grid-column:2;margin:12px 0 0;font-family:var(--om-display);
  font-weight:600;font-size:clamp(28px,3.6vw,46px);line-height:1.14;
  letter-spacing:.4px;color:var(--ivory);max-width:20ch}
.om-vo-hero-lede{grid-column:2;margin:16px 0 0;font-family:var(--om-display);
  font-weight:600;font-size:clamp(15px,1.5vw,21px);line-height:1.5;
  color:var(--gold-light);max-width:34ch}
@media (max-width:767px){
  .om-vo-hero-copy{grid-template-columns:1fr}
  .om-vo-hero-num,.om-vo-hero-kicker{grid-row:auto;justify-self:start}
  .om-vo-hero-h2,.om-vo-hero-lede{grid-column:1}
}
.om-vo-film{position:relative;margin-inline:calc(-1 * var(--pad));
  margin-block:clamp(36px,4.5vw,66px) 0;background:var(--ink);
  aspect-ratio:16/9;overflow:hidden}
.om-vo-film iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.om-vo-photo{position:relative;max-width:min(980px,100%);margin:clamp(30px,3.5vw,46px) auto;
  background:var(--ink);overflow:hidden}
.om-vo-photo img{width:100%;height:auto;display:block}
.om-vo-photo figcaption{position:absolute;right:clamp(14px,2vw,24px);bottom:clamp(14px,1.6vw,22px);
  font-size:11px;letter-spacing:var(--track-tight);text-transform:uppercase;
  color:rgba(244,241,234,.72);text-shadow:0 1px 12px rgba(0,0,0,.5)}
.om-vo-lede{margin:18px 0 0;font-family:var(--om-display);font-weight:600;
  font-size:clamp(17px,1.7vw,23px);line-height:1.5;color:var(--gold-light)}
/* The column is the point of the section, so it is shown large and eases in
   rather than being described in running copy. */
.om-vo-stage{position:relative;margin:0;overflow:hidden;background:var(--ink);
  border:1px solid var(--rule-light)}
.om-vo-stage img{width:100%;height:auto;display:block;transform:scale(1.07);
  transition:transform 1.9s cubic-bezier(.2,.7,.2,1)}
.om-vo-stage.is-in img{transform:scale(1)}
.om-vo-exp{list-style:none;margin:clamp(34px,4vw,54px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-light)}
.om-vo-exp-item{background:var(--emerald-deep);padding:30px 26px 28px;display:grid;
  gap:12px;align-content:start}
.om-vo-exp-h{margin:0;font-family:var(--om-display);font-weight:600;
  font-size:clamp(17px,1.6vw,21px);line-height:1.3;color:var(--gold-light)}
.om-vo-exp-t{display:block;width:100%;padding:0;text-align:left;cursor:default;
  font:inherit;color:inherit;letter-spacing:inherit}
.om-vo-exp-ico{display:none}
.om-vo-exp-panel{display:contents}
.om-vo-exp-p{margin:0;font-size:14px;line-height:1.75;color:rgba(243,239,230,.74)}
.om-vo-close{margin:clamp(32px,3.8vw,48px) 0 0;max-width:60ch;
  font-family:var(--om-display);font-weight:600;
  font-size:clamp(16px,1.5vw,20px);line-height:1.6;color:var(--ivory)}
.om-vo-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 22px 15px;
  font-size:11px;letter-spacing:var(--track-tight);text-transform:uppercase;
  color:rgba(243,239,230,.72);
  background:linear-gradient(to top,rgba(4,12,9,.82),transparent)}
/* The press shot is nearly square, so it sits beside the intro rather than
   running full width, where it would swamp the section. */
.om-h2--onDark{color:var(--ivory)}
/* Gold underline grows out from the left on the selected tab. */
/* An author display rule outranks the UA's [hidden], so restate it. */
/* Panels animate in each time they are shown. */
.om-vo-note{margin:46px 0 0;font-size:12px;line-height:1.8;color:rgba(243,239,230,.45);max-width:70ch}
@media (max-width:900px){
  .om-vo{padding:72px var(--pad) 0}
  .om-vo-exp{grid-template-columns:1fr}
}
/* On a phone the three become an accordion, one panel open at a time. The
   panel is shown and hidden here rather than by script, so crossing the
   breakpoint restores the full list with nothing to undo. */
@media (max-width:767px){
  .om-vo-exp-item{padding:0;gap:0}
  .om-vo-exp-t{display:flex;align-items:center;justify-content:space-between;
    gap:16px;min-height:60px;padding:6px 0;cursor:pointer}
  .om-vo-exp-ico{display:block;flex:0 0 auto;width:11px;height:11px;margin-right:3px;
    border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
    transform:translateY(-3px) rotate(45deg);transition:transform .3s}
  .om-vo-exp-item[data-open] .om-vo-exp-ico{transform:translateY(2px) rotate(-135deg)}
  .om-vo-exp-panel{display:none;padding-bottom:22px}
  .om-vo-exp-item[data-open] .om-vo-exp-panel{display:block}
}
@media (max-width:520px){
}

/* ---- legal pages: privacy policy, terms ---- */
.om-pagehead--legal{padding-bottom:74px}
.om-legal-updated{display:inline-block;margin-top:26px;font-size:11px;
  letter-spacing:var(--track-mid);text-transform:uppercase;color:var(--gold)}
.om-legal-body{display:grid;grid-template-columns:260px 1fr;gap:80px;
  padding:86px var(--pad) 110px;align-items:start}
.om-legal-idx{position:sticky;top:122px}
.om-legal-idx-nav{display:flex;flex-direction:column;margin-top:20px;
  border-top:1px solid var(--rule)}
.om-legal-idx-link{display:flex;gap:14px;align-items:baseline;padding:13px 0;
  border-bottom:1px solid var(--rule);font-size:13px;line-height:1.5;
  color:var(--muted);transition:color .3s}
.om-legal-idx-link:hover{color:var(--ink)}
.om-legal-idx-num{font-family:var(--om-display);font-size:11px;font-weight:600;
  letter-spacing:.06em;color:var(--gold);flex:0 0 auto}
.om-legal-col{max-width:74ch}
.om-legal-intro{padding-bottom:52px;border-bottom:1px solid var(--rule)}
.om-legal-lead{margin:0 0 20px;font-family:var(--om-display);font-size:19px;
  line-height:1.75;color:rgba(10,10,10,.82)}
.om-legal-lead:last-child{margin-bottom:0}
.om-legal-sec{padding-top:56px;scroll-margin-top:130px}
.om-legal-num{display:block;font-family:var(--om-display);font-size:11px;font-weight:600;
  letter-spacing:var(--track-mid);color:var(--gold)}
.om-legal-h{font-family:var(--om-display);font-size:clamp(22px,2.4vw,30px);font-weight:600;
  line-height:1.25;margin:14px 0 22px;color:var(--ink);text-wrap:balance}
.om-legal-p{margin:0 0 18px;font-size:15px;line-height:1.95;color:rgba(10,10,10,.72)}
.om-legal-p:last-child{margin-bottom:0}
.om-legal-quote{margin:0 0 22px;padding:20px 24px;border-left:2px solid var(--gold-deep);
  background:var(--surface-warm);font-size:15px;line-height:1.85;color:var(--ink)}
.om-legal-list{margin:0 0 20px;padding:0;list-style:none;display:grid;gap:11px}
.om-legal-list li{position:relative;padding-left:26px;font-size:15px;line-height:1.85;
  color:rgba(10,10,10,.72)}
.om-legal-list li::before{content:"";position:absolute;left:2px;top:.75em;width:10px;height:1px;
  background:var(--gold)}
.om-legal-contact{margin-top:26px;padding:32px 34px;background:var(--ivory-alt);
  border-left:2px solid var(--gold);display:grid;gap:20px}
.om-legal-contact-row{display:grid;gap:7px}
.om-legal-contact-val{font-size:15px;line-height:1.75;color:var(--ink)}
.om-legal-contact-link{color:var(--gold-deep);border-bottom:1px solid rgba(140,111,62,.35);
  justify-self:start;transition:color .3s,border-color .3s}
.om-legal-contact-link:hover{color:var(--ink);border-color:var(--ink)}
@media (max-width:1100px){
  /* Brand takes the full row so the two link columns pair off cleanly below. */
  .om-footer-in{grid-template-columns:1fr 1fr;gap:44px 48px}
  .om-footer-brand{grid-column:1 / -1}
  .om-legal-body{grid-template-columns:1fr;gap:48px;padding-top:60px}
  .om-legal-idx{position:static;max-width:520px}
}
@media (max-width:767px){
  /* One column, and the Explore list gives way to the two things a phone is
     for: getting to the counter, and calling it. Each block is headed by a
     rule above the label rather than under it. */
  .om-footer{padding-top:56px}
  .om-footer-in{grid-template-columns:1fr;gap:0}
  .om-footer-brand{max-width:none}
  .om-footer-brand .om-mark{margin-bottom:0}
  /* the header swaps in a small mark on mobile and hides this one; the
     footer wants the full artwork back */
  .om-footer-brand .om-mark-img{display:block;width:min(206px,58%);max-height:none}
  .om-footer-note{display:block;margin:20px 0 0;font-size:16px;line-height:1.5;
    color:rgba(243,239,230,.78)}
  .om-footer-col--explore{display:none}
  .om-footer-col--contact{margin-top:32px;align-items:stretch}
  .om-footer-head--desk{display:none}
  .om-footer-head--mob{display:block;margin:0 0 26px;padding:30px 0 0;
    border-top:1px solid rgba(243,239,230,.14);border-bottom:0;
    font-size:12px;letter-spacing:.3em;color:var(--gold)}
  .om-footer-head--touch{margin-top:44px}
  /* icon rail + copy: the same two-column row the mobile contact block uses */
  .om-footer-addr,.om-footer-hours,.om-footer-contact,.om-footer-contact--wa{
    display:grid;grid-template-columns:22px 1fr;gap:0 16px;align-items:start;
    margin:0;font-size:16px;line-height:1.55;color:rgba(243,239,230,.84)}
  .om-footer-icon{display:block;width:22px;height:22px;margin-top:4px;color:var(--gold-light)}
  /* the line breaks are for the desktop column; here the address just wraps */
  .om-footer-addr br,.om-footer-addr-country{display:none}
  .om-footer-hours{margin-top:22px}
  .om-footer-contact{margin-top:26px}
  /* the heading already sets the gap below itself */
  .om-footer-head--mob+.om-footer-contact{margin-top:0}
  .om-footer-dir{display:flex;align-items:center;gap:16px;margin-top:34px;
    font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
  .om-footer-dir-label{border-bottom:1px solid currentColor;padding-bottom:5px}
  .om-footer-base{margin-top:46px;padding:32px 0 34px;gap:22px;
    flex-direction:column-reverse;align-items:flex-start}
  .om-footer-legal{gap:26px;font-size:14px;letter-spacing:.05em;text-transform:none}
  .om-footer-legal a{padding-bottom:4px;border-bottom:1px solid rgba(243,239,230,.45)}
  /* keeps the last line clear of the floating call button, which is fixed
     over the bottom-right corner once the page is scrolled out */
  .om-footer-copy{font-size:13px;letter-spacing:.12em;color:rgba(243,239,230,.45);
    padding-right:76px}
  .om-legal-body{padding-bottom:76px}
  .om-legal-contact{padding:26px 22px}
}

/* ---- hero: min-height, never a fixed height; only the image clips ---- */
.om-hero{position:relative;background:var(--emerald-deep);overflow:visible}
/* Pinned hero: holds at the top of the window while the page slides over it.
   The overlay carries its own ground, or the hero would show through. */
.om-hero--pin{position:sticky;top:0;z-index:0}
.om-hero-over{position:relative;z-index:1;background:var(--page)}
/* Any band can pin the same way: it holds at the top while the block after it
   rides over on its own ground. Only where the band is shorter than the
   window -- stacked on a phone it is taller, and its foot would never show. */
.om-pin-over{position:relative;z-index:1;background:var(--page)}
@media (min-width:768px){
  .om-sec--pin{position:sticky;top:0;z-index:0}
}
.om-hero-media{position:absolute;inset:0;overflow:hidden}
.om-hero-zoom{position:absolute;inset:0}
.om-hero-zoom,.om-hero-media>.om-hero-img{animation:omZoom 64s cubic-bezier(.16,.8,.2,1) forwards;
  transform-origin:50% 50%}
.om-hero-video,.om-hero-img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;
  display:block;background:var(--emerald-deep)}
/* Near-neutral rather than emerald, so the film keeps its own colour and only
   the foot of the frame is darkened enough to carry the copy. */
.om-hero-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(9,12,11,.88),rgba(9,12,11,.40) 56%,rgba(9,12,11,.10))}
.om-hero-inner{position:relative;z-index:3;min-height:min(92vh,820px);display:flex;flex-direction:column;
  justify-content:flex-end;gap:22px;padding:150px var(--pad) 78px;max-width:var(--wrap);margin:0 auto;pointer-events:none}
.om-hero-inner>*{pointer-events:auto}
.om-hero--short .om-hero-inner{min-height:min(62vh,540px);padding-top:120px;padding-bottom:46px}
.om-storypage .om-hero--short .om-hero-inner{min-height:min(70vh,620px);padding-bottom:64px}
/* svh is the viewport with the mobile URL bar showing; vh is the taller one,
   which pushes the copy at the foot of the hero below the fold. */
.om-hero-inner{min-height:min(92svh,820px)}
.om-hero--short .om-hero-inner{min-height:min(62svh,540px)}
.om-storypage .om-hero--short .om-hero-inner{min-height:min(70svh,620px)}
/* the global 32% is framed for the home hero's portrait; the short hero
   is a landscape still, so bias the crop down onto the frames */
.om-hero--short .om-hero-img{object-position:50% 56%}
/* The visit wall is lit in pools against near-black joinery: already dark
   enough to carry type, so the shared scrim would only muddy it. Weight the
   foot alone, and hold the crop on the lit shelves rather than the dark head
   of the frame. */
.om-hero--wall .om-hero-scrim{
  background:linear-gradient(to top,rgba(9,12,11,.78),rgba(9,12,11,.48) 46%,rgba(9,12,11,.12) 82%)}
.om-hero--wall .om-hero-img{object-position:50% 46%}
.om-hero--wall .om-hero-sub{max-width:52ch;color:var(--ivory);opacity:.9;
  font-size:clamp(14px,1.15vw,17px);line-height:1.7}
.om-hero--wall .om-caption{align-self:start}
/* The visit hero is a bright daylight portrait, the opposite problem to the
   shelves: the weight has to come from the left and the foot so the copy has a
   ground of its own without flattening the palace behind her. */
.om-hero--venice .om-hero-scrim{
  background:linear-gradient(to top,rgba(9,12,11,.68),rgba(9,12,11,.34) 46%,rgba(9,12,11,.06) 84%),
             linear-gradient(to right,rgba(9,12,11,.58),rgba(9,12,11,.16) 52%,rgba(9,12,11,0) 78%)}
.om-hero--venice .om-hero-img{object-position:50% 38%}
.om-hero--venice .om-hero-sub{max-width:46ch;color:var(--ivory);opacity:.92;
  font-size:clamp(14px,1.15vw,17px);line-height:1.7}
.om-hero--venice .om-caption{align-self:start}
/* Stacked, the copy wraps to twice the depth and rides up into the lit
   shelves, where gold on a white niche falls under 3:1. Carry the weight all
   the way up rather than only along the foot. */
@media (max-width:767px){
  .om-hero--wall .om-hero-scrim{
    background:linear-gradient(to top,rgba(9,12,11,.82),rgba(9,12,11,.62) 55%,rgba(9,12,11,.38))}
}

/* The story hero carries more weight at the head of the frame than the shared
   scrim does: its copy block is the tallest of the three, so it reaches
   further up into the lit shelves. */
.om-storypage .om-hero-scrim{
  background:linear-gradient(to top,rgba(9,12,11,.78),rgba(9,12,11,.46) 46%,rgba(9,12,11,.22))}
.om-hero-title{color:var(--ivory);font-size:clamp(46px,6.6vw,88px);line-height:1.04;letter-spacing:.5px;
  overflow:visible;text-shadow:0 2px 28px rgba(0,0,0,.34)}
.om-hero-title--sm{font-size:clamp(32px,4.4vw,48px);line-height:1.15;letter-spacing:.5px;margin-top:12px}
.om-hero-line{display:block;overflow:visible}
.om-hero-line>span{display:inline-block;padding:.04em 0 .18em}
.om-gold{color:var(--gold)}
.om-hero-sub{margin:0;max-width:44ch;font-size:clamp(17px,1.45vw,22px);line-height:1.66;
  color:rgba(243,239,230,.92);text-shadow:0 1px 18px rgba(0,0,0,.36)}
.om-hero-inner .om-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px}
.om-scrollcue{position:absolute;left:50%;bottom:16px;z-index:3;transform:translateX(-50%);color:var(--ivory);
  font-size:11px;letter-spacing:3px;text-transform:uppercase;animation:omCue 2.4s ease-in-out 1.8s infinite}
/* The pulse owns the cue's opacity, so it leaves by class rather than inline style. */
.om-scrollcue.is-gone{animation:none;opacity:0;transition:opacity .45s ease}

/* ---- placeholders ---- */
.om-slot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;padding:18px;text-align:center;background:
  repeating-linear-gradient(135deg,rgba(10,10,10,.028) 0 10px,transparent 10px 20px),var(--ivory-alt);
  border:1px dashed rgba(10,10,10,.26)}
.om-slot-mark{width:26px;height:14px;border:1px solid rgba(10,10,10,.32);border-radius:50% 50% 46% 46%/60% 60% 40% 40%;opacity:.5}
.om-slot-label{font-size:12px;line-height:1.5;letter-spacing:var(--track-tight);text-transform:uppercase;color:rgba(10,10,10,.6);max-width:26ch}
.om-slot-spec{font-size:11px;letter-spacing:var(--track-tight);text-transform:uppercase;color:rgba(10,10,10,.38)}

/* ---- brand tiles ---- */
.om-brandgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));margin-top:18px}
.om-brandgrid--home{grid-template-columns:repeat(auto-fill,minmax(min(168px,100%),1fr));margin-top:34px}
/* every rule line is drawn by the tile itself and overlapped 1px, so a short
   final row leaves bare page rather than an outlined empty box */
.om-brandtile{display:flex;flex-direction:column;background:var(--ivory);
  border:1px solid var(--rule);margin:0 -1px -1px 0}
.om-brandwell{position:relative;height:108px;padding:20px 26px;display:flex;align-items:center;justify-content:center}
.om-brandwell--sm{height:88px;padding:16px 20px}
.om-brandlogo{display:block;width:100%;height:100%;max-height:62px;object-fit:contain;
  filter:grayscale(1) contrast(.98);opacity:.78;transition:filter .5s ease,opacity .5s ease,transform .5s ease}
.om-brandwell--sm .om-brandlogo{max-height:50px}
.om-brandtile:hover .om-brandlogo{filter:none;opacity:1;transform:translateY(-1px)}
.om-brandslot-fallback{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.om-brandslot{display:flex;align-items:center;justify-content:center;padding:8px 12px;
  transition:opacity .4s;opacity:.82}
.om-brandtile:hover .om-brandslot{opacity:1}
.om-brandslot-name{font-family:var(--om-display);font-weight:600;font-size:17px;line-height:1.1;color:rgba(10,10,10,.72)}
.om-brandcap{display:flex;align-items:center;justify-content:center;min-height:58px;padding:10px 12px;
  border-top:2px solid var(--emerald-hover);background:#fff;font-size:12px;line-height:1.4;
  letter-spacing:1px;text-transform:uppercase;color:var(--emerald);text-align:center;transition:background .4s,color .4s}
.om-brandtile:hover .om-brandcap{background:rgba(28,70,54,.07);color:var(--emerald-hover)}
.om-brand-arrowlink{display:grid;place-items:center;min-height:147px;color:var(--emerald)}
.om-brand-circle{display:grid;place-items:center;width:58px;height:58px;border:1px solid rgba(16,38,31,.34);
  border-radius:50%;background:rgba(255,255,255,.34);transition:border-color .35s,background .35s,transform .35s}
.om-brand-circle-arrow{position:relative;display:block;width:28px;height:1px;background:var(--emerald);
  transition:background .35s,transform .35s}
.om-brand-circle-arrow::before,.om-brand-circle-arrow::after{content:"";position:absolute;right:0;top:0;width:10px;height:1px;
  background:currentColor;color:var(--emerald);transform-origin:right center;transition:color .35s}
.om-brand-circle-arrow::before{transform:rotate(40deg)}
.om-brand-circle-arrow::after{transform:rotate(-40deg)}
.om-brand-arrowlink:hover .om-brand-circle{border-color:var(--gold-deep);background:rgba(227,198,137,.18);transform:translateX(2px)}
.om-brand-arrowlink:hover .om-brand-circle-arrow{background:var(--gold-deep);transform:translateX(2px)}
.om-brand-arrowlink:hover .om-brand-circle-arrow::before,
.om-brand-arrowlink:hover .om-brand-circle-arrow::after{color:var(--gold-deep)}

/* ---- cards / grids ---- */
.om-grid{display:grid;gap:28px}
.om-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.om-grid--4{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:24px}
.om-sechead{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;justify-content:space-between;margin-bottom:34px}
.om-sechead--tall{align-items:flex-end}
.om-sechead h2{margin-top:12px}
.om-sechead-note{max-width:46ch}
.om-card{display:flex;flex-direction:column;gap:14px}
.om-card-media{position:relative;aspect-ratio:4/5;background:#EBE6DA;overflow:hidden}
.om-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease}
.om-card:hover .om-card-media img{transform:scale(1.03)}
.om-card-media--sq{aspect-ratio:1/1}
.om-card-body{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.om-card-title{font-size:21px;line-height:1.25}
.om-card-spec{font-size:14px;line-height:1.3;color:var(--muted)}
.om-card-note{margin:0;font-size:13px;line-height:1.7;color:rgba(10,10,10,.62)}
/* Stocked, listed, no detail page behind it yet. No hover lift and no pointer,
   so it does not read as a link that fails. */
.om-frametools{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;
  justify-content:space-between}
.om-frametools .om-chips{margin:0}
.om-search{position:relative;flex:0 1 300px;min-width:210px}
.om-search-icon{display:none}
.om-search-in{width:100%;appearance:none;background:var(--ivory);color:var(--ink);
  font:inherit;font-size:13px;padding:12px 14px;border:1px solid var(--rule-strong);
  transition:border-color .3s}
.om-search-in::placeholder{color:rgba(10,10,10,.42)}
.om-search-in:focus{outline:none;border-color:var(--gold-deep)}
.om-frame-count{flex:1 0 100%;margin:0;font-size:11px;line-height:1.4;
  letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.om-frame-cta{background:var(--emerald);color:var(--ivory);padding:42px var(--gutter)}
.om-frame-cta h2{font-size:clamp(22px,3vw,34px);line-height:1.22;margin:0;color:var(--ivory)}
.om-frame-cta p{max-width:44ch;margin:10px 0 22px;font-size:15px;line-height:1.7;
  color:rgba(243,239,230,.74)}
.om-frame-cta .om-cta{border-radius:var(--r-full)}
.om-card--listed{cursor:default}
.om-card-media--bare{display:grid;place-items:center;background:var(--surface-warm)}
.om-card-bare{font-family:var(--om-display);font-weight:600;font-size:19px;
  letter-spacing:.02em;text-transform:uppercase;color:rgba(10,10,10,.28)}
.om-card-ask{margin-top:2px;font-size:11px;letter-spacing:var(--track-tight);
  text-transform:uppercase;color:var(--gold-deep)}
.om-tag{position:absolute;right:12px;top:12px;padding:6px 10px;background:var(--emerald);color:var(--ivory);
  font-size:9px;letter-spacing:var(--track-tight);text-transform:uppercase}
.om-credcard{display:flex;flex-direction:column;gap:11px;align-items:flex-start;padding:26px;
  border:1px solid rgba(10,10,10,.14);background:var(--ivory-alt)}

/* ---- split / list / timeline ---- */
.om-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));background:var(--emerald-deep);color:var(--ivory)}
.om-split-media{position:relative;min-height:480px;overflow:hidden}
.om-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* The wear shots are square, so this half sizes to them instead of being
   cropped to a fixed 480px plate. */
.om-split--fit .om-split-media{min-height:0;display:flex}
.om-split--fit .om-fader{flex:1}
@media (min-width:1024px){
  .om-split--fit .om-fader{aspect-ratio:auto;height:100%}
  .om-split--fit .om-fader img{object-position:50% 22%}
}
/* Copy sits beside a full-height square plate, so it carries more weight than
   the default section type. */
.om-split--fit .om-split-body{gap:clamp(20px,2.2vw,30px);justify-content:center}
.om-split--fit .om-h2{font-size:clamp(30px,3.5vw,48px);line-height:1.12}
.om-split--fit .om-body{max-width:44ch;font-size:clamp(15px,1.25vw,18px);line-height:1.78}
.om-split--fit .om-listrow{font-size:clamp(14px,1.1vw,17px);padding:18px 0}
.om-split--fit .om-eyebrow{font-size:11px}
.om-fader{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  background:var(--emerald-deep);text-decoration:none}
.om-fader img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s ease}
.om-fader img.is-on{opacity:1}
.om-fader-cue{position:absolute;left:0;bottom:0;z-index:2;margin:18px;padding:9px 15px;
  background:rgba(8,23,19,.62);backdrop-filter:blur(6px);color:var(--ivory);
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.om-fader:hover .om-fader-cue,.om-fader:focus-visible .om-fader-cue{opacity:1;transform:none}
.om-fader:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.om-listrow--link{text-decoration:none;color:inherit;transition:color .3s}
.om-listrow--link:hover{color:var(--gold-light)}
@media (prefers-reduced-motion:reduce){
  .om-fader img{transition:none}
}
.om-split-body{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:clamp(40px,6vw,88px)}
.om-list{display:grid;width:100%}
.om-listrow{display:flex;justify-content:space-between;gap:18px;padding:15px 0;
  border-top:1px solid var(--rule-light);font-size:14px;line-height:1.5}
.om-tl{display:grid;width:100%}
.om-tl-row{display:grid;grid-template-columns:84px 1fr;gap:22px;padding:20px 0;border-top:1px solid rgba(10,10,10,.14)}
.om-tl-year{font-family:var(--om-display);font-weight:600;font-size:17px;line-height:1.3;color:var(--gold-deep)}
.om-tl-text{font-size:14px;line-height:1.75;color:rgba(10,10,10,.7)}
.om-sealbox{position:relative;min-height:240px;display:grid;place-items:center}
.om-info{display:flex;flex-direction:column;gap:7px;width:100%;padding-top:18px;border-top:1px solid rgba(10,10,10,.16)}
.om-info-icon{display:none}
.om-info--onDark{border-top-color:var(--rule-light)}
.om-info-val{font-size:15px;line-height:1.75;color:rgba(10,10,10,.75)}
.om-info-val--onDark{color:rgba(243,239,230,.9)}

/* ---- new frames / essilor / story / visit ---- */
.om-pagehead{background:var(--emerald-deep);color:var(--ivory);padding:74px var(--pad) 66px}
/* Shorter head: the film above it already carries the weight. */
.om-pagehead--tight{padding-block:44px 38px}
/* Pinned film: it holds at the top while the page slides over it. Sized to the
   footage's own 16:9 so nothing is cropped. */
.om-nf-film{position:sticky;top:0;z-index:0;aspect-ratio:16/9;
  overflow:hidden;background:var(--brand);line-height:0}
.om-nf-video{display:block;width:100%;height:100%;object-fit:contain;
  will-change:opacity,transform}
.om-nf-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(9,12,11,.34) 0%,rgba(9,12,11,0) 32%,
    rgba(9,12,11,0) 62%,rgba(9,12,11,.52) 100%)}
.om-nf-cue{position:absolute;left:50%;bottom:clamp(46px,7.5%,92px);z-index:2;transform:translateX(-50%);
  display:grid;justify-items:center;gap:9px;text-decoration:none;
  color:var(--page);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  transition:opacity .4s ease}
.om-nf-arrow{display:block;width:1px;height:26px;background:currentColor;opacity:.75;
  animation:omNfCue 2.2s ease-in-out infinite}
.om-nf-cue:hover .om-nf-arrow{opacity:1}
@keyframes omNfCue{0%,100%{transform:scaleY(.45);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}}
/* The page rides over the pinned film, so it needs its own ground. */
.om-nf-over{position:relative;z-index:1;background:var(--page)}
@media (prefers-reduced-motion:reduce){
  .om-nf-arrow{animation:none}
  .om-nf-film{position:relative}
}
@media (max-width:767px){
  .om-pagehead--tight{padding-block:34px 30px}
  .om-frames-page{--pad:20px;background:var(--page)}
  .om-frames-page>.om-nf-film{display:none}
  .om-frames-page .om-pagehead--tight{background:var(--page);color:var(--ink);
    padding:32px 0 20px}
  .om-frames-page .om-eyebrow--goldOnDark{color:var(--gold-deep)}
  .om-frames-page .om-h1--onDark{color:var(--ink);font-size:32px;line-height:1.12;
    letter-spacing:.3px}
  .om-frames-page .om-lede--onDark{margin-top:12px;color:var(--muted);
    font-size:14px;line-height:1.6}
  .om-frames-page .om-page--tight{padding-top:0;padding-bottom:32px}
  .om-frames-page .om-frametools{display:flex;flex-direction:column;align-items:stretch;
    gap:0;margin-inline:calc(-1 * var(--pad))}
  .om-frames-page .om-search{flex:none;min-width:0;margin:0 var(--pad)}
  .om-frames-page .om-search-icon{display:block;position:absolute;left:16px;top:50%;
    transform:translateY(-50%);color:var(--muted);pointer-events:none}
  .om-frames-page .om-search-in{height:50px;border-radius:0;
    background:#FBF9F4;padding:0 16px 0 44px;font-size:14px;border-color:var(--rule-strong)}
  .om-frames-page .om-chips{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;
    margin:16px 0 0;padding:0 var(--pad) 18px;border-bottom:1px solid var(--rule);
    scrollbar-width:none}
  .om-frames-page .om-chips::-webkit-scrollbar{display:none}
  .om-frames-page .om-chip{flex:0 0 auto;min-height:40px;padding:0 16px;border-radius:var(--r-full);
    background:var(--page);font-size:12px;letter-spacing:0;text-transform:none}
  .om-frames-page .om-chip.is-on{background:var(--emerald);border-color:var(--emerald);
    color:var(--ivory)}
  .om-frames-page .om-frame-count{padding:14px var(--pad) 0;font-size:11px;
    letter-spacing:2px}
  .om-frames-page #om-newgrid{grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:14px;row-gap:26px;margin-top:18px}
  .om-frames-page .om-card{gap:0}
  .om-frames-page .om-card-media{height:124px;aspect-ratio:auto;border-radius:8px;
    background:#EBEAE5}
  .om-frames-page .om-card-media--pack img{padding:6%}
  .om-frames-page .om-card-body{gap:0;margin-top:10px}
  .om-frames-page .om-card .om-eyebrow{font-size:10px;line-height:1.3;
    letter-spacing:2px;color:var(--gold-deep)}
  .om-frames-page .om-card-title{margin-top:4px;font-size:15px;line-height:1.3}
  .om-frames-page .om-meta{margin-top:3px;font-size:11px;line-height:1.4;
    letter-spacing:0;text-transform:none;color:var(--muted)}
  .om-frames-page .om-card-ask{font-size:10px;letter-spacing:1.2px}
  .om-frames-page .om-frame-cta{padding:36px var(--pad);background:var(--emerald)}
  .om-frames-page .om-frame-cta h2{font-size:20px;line-height:1.25}
  .om-frames-page .om-frame-cta p{font-size:14px;line-height:1.6}
  .om-frames-page .om-frame-cta .om-cta{display:flex;min-height:52px;
    align-items:center;justify-content:center;width:100%;padding:0 22px}
}
.om-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.om-chip{padding:12px 18px;border:1px solid var(--rule-strong);font-size:12px;letter-spacing:1px;
  text-transform:uppercase;color:rgba(10,10,10,.7);transition:border-color .3s,color .3s,background .3s}
.om-chip:hover{border-color:var(--gold-deep);color:var(--gold-deep)}
.om-chip.is-on{background:var(--emerald);border-color:var(--emerald);color:var(--ivory)}
.om-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));border-top:1px solid rgba(10,10,10,.16)}
.om-steps-wrap{padding:30px var(--pad) 40px}
.om-step{display:flex;flex-direction:column;gap:8px;padding:26px 22px 26px 0}
.om-step-title{font-family:var(--om-display);font-weight:600;font-size:19px;line-height:1.3}
.om-banner{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;
  padding:36px;background:var(--emerald);color:var(--ivory)}
.om-banner-text{font-family:var(--om-display);font-weight:600;font-size:clamp(21px,2.6vw,30px);line-height:1.35;max-width:34ch}
.om-prose{max-width:820px;margin:0 auto;padding:70px var(--pad) 36px;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.om-prose-lead{margin:0;font-family:var(--om-display);font-weight:600;font-size:clamp(20px,2.3vw,27px);line-height:1.55;text-wrap:pretty}
.om-prose-p{margin:0;font-size:16px;line-height:1.9;color:rgba(10,10,10,.72);text-wrap:pretty}
/* Visit: details beside the form, then the map full width under both. */
.om-visitgrid{display:grid;grid-template-columns:minmax(min(280px,100%),.85fr) minmax(min(320px,100%),1fr);
  gap:clamp(30px,4vw,64px);align-items:start;padding-block:clamp(40px,5vw,72px)}
.om-visit-details{display:flex;flex-direction:column;gap:22px}
.om-visit-map{padding:0 var(--pad) clamp(56px,7vw,96px)}
.om-map{margin:0;max-width:var(--wrap);margin-inline:auto}
.om-map-frame{display:block;width:100%;aspect-ratio:21/9;min-height:320px;border:0;
  background:var(--ivory-alt);border:1px solid rgba(10,10,10,.16)}
.om-map-cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 26px;
  padding-top:14px;font-size:13px;line-height:1.6;color:var(--muted)}
.om-map-cap span{max-width:62ch}
/* Home enquiry block */
.om-contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:clamp(32px,4.5vw,68px);align-items:start}
.om-contact-actions{display:none}
.om-ui-icon{width:18px;height:18px;flex:none}
.om-wa-link{display:inline-flex;align-items:center;justify-content:center;text-align:center;
  min-height:52px;padding:0 28px;border:1px solid rgba(243,239,230,.5);
  border-radius:var(--r-full);font-size:12px;letter-spacing:var(--track-mid);
  text-transform:uppercase;color:var(--ivory);transition:border-color .3s,color .3s}
.om-wa-link:hover{border-color:var(--gold);color:var(--gold)}
/* ---- two-step form ---- */
.om-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.om-form--steps{gap:20px}
.om-form-head{display:grid;gap:8px}
.om-step{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;min-inline-size:0}
.om-step[hidden]{display:none}
.om-caption i{font-style:normal;opacity:.55;text-transform:none;letter-spacing:0}
.om-input--area{resize:vertical;min-height:88px;font:inherit}
.om-check{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  font-size:13px;line-height:1.6;color:rgba(10,10,10,.76);cursor:pointer}
.om-check input{margin-top:3px;width:16px;height:16px;accent-color:var(--gold-deep);flex:none}
.om-check a{border-bottom:1px solid var(--gold);white-space:nowrap}
.om-form-err{margin:0;font-size:13px;line-height:1.5;color:#8C2F2F}
.om-form-err[hidden]{display:none}
.om-form-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* Spam trap: a field only something automated will tick. */
.om-hp{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.om-form-actions .om-cta{flex:1 1 180px}
.om-btn-ghost{padding:14px 20px;background:none;border:1px solid rgba(10,10,10,.28);
  font:inherit;font-size:11px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  transition:border-color .3s,background .3s}
.om-btn-ghost:hover{border-color:var(--ink);background:rgba(10,10,10,.04)}
.om-btn-ghost[hidden],.om-cta[hidden]{display:none}
.om-form-ok{margin:0;font-size:13px;line-height:1.5;color:var(--gold-deep)}
.om-form-ok[hidden]{display:none}
@media (max-width:1023px){
  .om-visitgrid{grid-template-columns:1fr}
  .om-map-frame{aspect-ratio:4/3}
}

.om-form{display:flex;flex-direction:column;gap:16px;padding:30px;background:var(--surface-warm);
  border:1px solid rgba(10,10,10,.14);color:var(--ink)}
.om-form .om-h3{color:var(--ink)}
.om-field{display:flex;flex-direction:column;gap:7px}
.om-input{padding:13px 14px;background:var(--ivory);border:1px solid rgba(10,10,10,.18);
  font-family:var(--om-text);font-size:14px;color:var(--ink);border-radius:0}
.om-input::placeholder{color:rgba(10,10,10,.4)}
.om-input:focus{outline:none;border-color:var(--gold-deep)}
.om-mapbox{position:relative;min-height:360px;border:1px solid rgba(10,10,10,.16)}
/* Figma "00 — Cover" rebuilt in type rather than shipped as a flat image, so it
   stays sharp and tracks the tokens. */
.om-cover{background:var(--emerald);color:var(--ivory);text-align:center;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(22px,3vw,30px);padding:clamp(58px,9vw,110px) var(--pad)}
.om-cover-rule{display:block;width:min(210px,42vw);height:1px;background:var(--gold)}
.om-cover-name{font-family:var(--om-display);font-weight:600;color:var(--gold);
  font-size:clamp(32px,6.4vw,64px);line-height:1.1;text-transform:uppercase;
  letter-spacing:clamp(2px,1.1vw,9px);margin-inline-start:clamp(2px,1.1vw,9px)}
/* the kit's Bronze→Gold→Bronze wordmark fill, as on the header and footer */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .om-cover-name{
    background-image:linear-gradient(90deg,var(--gold-deep) 0%,var(--gold) 50%,var(--gold-deep) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
}
.om-cover-sub{font-size:clamp(10px,1.3vw,13px);line-height:1.3;text-transform:uppercase;
  color:rgba(243,239,230,.72);letter-spacing:clamp(3px,.8vw,7px);margin-inline-start:clamp(3px,.8vw,7px)}
.om-tier{margin-bottom:54px}
.om-tierhead{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;justify-content:space-between;
  padding-bottom:14px;border-bottom:1px solid rgba(10,10,10,.18)}

/* ---- best sellers concept ---- */
.bs-page{background:#E9E4D8;color:#0A0A0A}
.bs-hero{position:relative;min-height:calc(100vh - 112px);min-height:calc(100svh - 112px);overflow:hidden;background:#0A0A0A;color:#fff}
.bs-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bs-hero-shade{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(10,10,10,.82),rgba(10,10,10,.14) 54%,rgba(10,10,10,.6))}
.bs-hero-copy{position:relative;z-index:2;min-height:calc(100vh - 112px);min-height:calc(100svh - 112px);display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start;gap:22px;max-width:var(--wrap);margin:0 auto;padding:90px var(--pad);text-shadow:0 12px 42px rgba(0,0,0,.36)}
.bs-kicker{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.78)}
.bs-kicker--dark{color:rgba(10,10,10,.48)}
.bs-hero h1{max-width:8.4ch;font-size:clamp(56px,10vw,132px);line-height:.92;letter-spacing:0;text-wrap:balance}
.bs-hero p{max-width:42ch;margin:0;color:rgba(255,255,255,.78);font-size:15px;line-height:1.85}
.bs-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(min(280px,100%),.9fr);gap:42px;align-items:end;
  padding:78px var(--gutter);border-bottom:1px solid rgba(10,10,10,.12)}
.bs-intro h2,.bs-feature-copy h2,.bs-products-head h2{font-family:var(--om-display);font-size:clamp(32px,5.4vw,72px);font-weight:600;line-height:1.02;margin:14px 0 0;text-wrap:balance}
.bs-intro p,.bs-feature-copy p{margin:0;color:rgba(10,10,10,.64);font-size:15px;line-height:1.85}
.bs-scroll-stage{position:relative;display:grid;grid-template-columns:minmax(min(280px,100%),.75fr) minmax(min(320px,100%),1fr);gap:44px;align-items:center;
  min-height:130vh;padding:74px var(--gutter);overflow:clip;background:#0A0A0A;color:#F3EFE6}
.bs-scroll-stage::before{content:"";position:absolute;inset:0;background:
  linear-gradient(115deg,rgba(185,154,91,.18),transparent 36%),
  repeating-linear-gradient(90deg,transparent 0 76px,rgba(243,239,230,.055) 77px 78px);pointer-events:none}
.bs-scroll-copy{position:relative;z-index:1;max-width:520px}
.bs-scroll-copy h2{font-family:var(--om-display);font-size:clamp(32px,5vw,68px);font-weight:600;line-height:1.02;margin:14px 0 18px;text-wrap:balance}
.bs-scroll-copy p{margin:0;color:rgba(243,239,230,.68);font-size:15px;line-height:1.85}
.bs-scroll-visual{position:sticky;top:118px;z-index:1;min-height:min(68vh,640px);min-height:min(68svh,640px);display:grid;align-items:center;border-left:1px solid rgba(243,239,230,.18)}
.bs-scroll-visual canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Transparent canvas, so the stage itself is the model's background. */
.om-model{position:absolute;inset:0;width:100%;height:100%;display:block;
  background:none;--poster-color:transparent;
  opacity:0;transition:opacity .7s ease}
.om-model.is-ready{opacity:1}
/* Sits over the canvas, so it must not take the drag. */
.om-model-hint{position:absolute;left:clamp(16px,3vw,34px);bottom:5%;z-index:2;
  font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:var(--accent-light);pointer-events:none}
.bs-seq{position:absolute;inset:0}
.bs-seq img{position:absolute;inset:0;margin:auto;display:block;
  width:auto;height:auto;max-width:84%;max-height:78%;object-fit:contain;
  opacity:0;transform:scale(.985);transition:opacity .55s ease,transform .55s ease}
.bs-seq img.is-on{opacity:1;transform:none}
.bs-seq-cap{position:absolute;left:0;bottom:6%;z-index:2;padding-inline-start:clamp(14px,2vw,28px);
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(243,239,230,.55)}
@media (prefers-reduced-motion:reduce){
  .bs-seq img{transition:none;transform:none}
}
.bs-scroll-visual::after{content:"";position:absolute;inset:12% 4%;border:1px solid rgba(185,154,91,.26);pointer-events:none}
.bs-scroll-rail{position:relative;z-index:1;display:grid;gap:18px;padding:32px 0;mix-blend-mode:screen}
.bs-scroll-rail span{display:block;height:1px;background:linear-gradient(90deg,transparent,rgba(185,154,91,.92),transparent);transform-origin:left;animation:bsRail 3.4s ease-in-out infinite}
.bs-scroll-rail span:nth-child(2){animation-delay:.35s}.bs-scroll-rail span:nth-child(3){animation-delay:.7s}
.bs-feature{display:grid;grid-template-columns:minmax(min(300px,100%),1fr) minmax(min(320px,100%),.92fr);border-bottom:1px solid rgba(10,10,10,.12);background:#fff}
.bs-feature-img{position:relative;min-height:620px;overflow:hidden;background:var(--surface-sand)}
.bs-feature-img img{width:100%;height:100%;object-fit:cover}
.bs-feature-copy{display:flex;flex-direction:column;justify-content:center;gap:22px;padding:clamp(42px,6vw,86px)}
/* The counter test: one frame, one photograph per check. The stage holds every
   shot at once and cross-fades between them, so nothing reflows on a step. */
.bs-check-stage{position:absolute;inset:0}
.bs-check-stage img{position:absolute;inset:0;opacity:0;transform:scale(1.045);
  transition:opacity 1.05s cubic-bezier(.2,.8,.2,1),transform 7s linear}
.bs-check-stage img.is-on{opacity:1;transform:scale(1)}
/* Carries the rail, not the picture. Kept short and dark rather than tall and
   grey: on the pale packshots a long wash reads as dirt on the studio ground. */
.bs-check::after{content:"";position:absolute;inset:auto 0 0;height:44%;pointer-events:none;
  background:linear-gradient(to top,rgba(10,10,10,.72),rgba(10,10,10,.3) 46%,transparent)}
.bs-check-rail{position:absolute;z-index:1;left:0;bottom:0;display:grid;justify-items:start;
  gap:clamp(7px,1vw,11px);padding:clamp(24px,3.4vw,44px)}
.bs-check-step{display:grid;grid-template-columns:clamp(26px,3.6vw,52px) auto;align-items:center;
  gap:clamp(10px,1.4vw,16px);padding:0;border:0;background:none;font:inherit;color:#fff;cursor:pointer}
.bs-check-track{position:relative;display:block;height:1px;background:rgba(255,255,255,.3)}
.bs-check-track i{position:absolute;inset:0;display:block;background:var(--gold-light);
  transform:scaleX(0);transform-origin:left}
.bs-check-step.is-on .bs-check-track i{animation:bsFill var(--every,3400ms) linear forwards}
.bs-check.is-held .bs-check-step.is-on .bs-check-track i{animation-play-state:paused}
.bs-check-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  color:rgba(255,255,255,.58);text-shadow:0 1px 10px rgba(10,10,10,.5);transition:color .45s ease}
.bs-check-step:hover .bs-check-label,.bs-check-step.is-on .bs-check-label{color:#fff}
.bs-check-step:focus-visible{outline:2px solid var(--gold-light);outline-offset:5px}
@keyframes bsFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .bs-check-stage img{transition:none;transform:none}
  .bs-check-step.is-on .bs-check-track i{animation:none;transform:scaleX(1)}
}
.bs-products{padding:74px var(--gutter)}
.bs-products-head{display:flex;flex-direction:column;margin-bottom:34px}
.bs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(245px,100%),1fr))}
.bs-card{background:#F3EFE6;display:flex;flex-direction:column;min-height:100%;
  border:1px solid rgba(10,10,10,.16);margin:0 -1px -1px 0}
.bs-card-media{aspect-ratio:4/5;background:#E2DDD1;overflow:hidden}
.bs-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease,filter .7s ease}
.bs-card:hover .bs-card-media img{transform:scale(1.035);filter:saturate(1.05)}
.bs-card-copy{display:grid;grid-template-columns:46px 1fr;gap:8px 14px;min-height:176px;padding:22px;border-top:1px solid rgba(10,10,10,.1)}
.bs-count{grid-row:1/5;font-family:var(--om-display);font-weight:600;font-size:34px;line-height:1;color:var(--gold-deep)}
.bs-brand,.bs-spec{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(10,10,10,.5)}
.bs-card-media .om-slot,.pd-stage .om-slot{position:absolute;inset:0}
.pd-stage:has(.om-slot){position:relative;aspect-ratio:16/9}
.bs-card-media:has(.om-slot){position:relative}
/* Ivory rather than transparent: while a card is still fading in, the reveal's
   opacity isolates the blend group, and multiply needs its backdrop inside
   that group or the packshot's white flashes through. */
.om-card-media--pack,.bs-card-media--pack{background:var(--page)}
.om-card-media--pack img,.bs-card-media--pack img{object-fit:contain;padding:4% 3%;
  mix-blend-mode:multiply}
.bs-card:hover .bs-card-media--pack img{transform:scale(1.02);filter:none}
/* Name-only cards: the grid reads as an index, detail lives on the page. */
.bs-card--link,.om-card--link{text-decoration:none;color:inherit;display:flex;flex-direction:column}
/* An author display rule outranks the UA's [hidden], so restate it here too. */
.bs-card--link[hidden],.om-card--link[hidden],.om-card--listed[hidden]{display:none}
.bs-card--link:hover .bs-card-media img,.om-card--link:hover .om-card-media img{transform:scale(1.03)}
.bs-card--link:focus-visible,.om-card--link:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.om-card-more{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
.om-card--link:hover .om-card-more{text-decoration:underline;text-underline-offset:4px}
/* ------------------------------------------------ product detail */
.pd-page{padding:clamp(20px,3vw,34px) var(--gutter) clamp(64px,8vw,112px)}
.pd-crumb{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:clamp(22px,3vw,38px);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(10,10,10,.45)}
.pd-crumb a{color:rgba(10,10,10,.72);border-bottom:1px solid transparent;transition:border-color .3s}
.pd-crumb a:hover{border-bottom-color:var(--gold)}
.pd-shell{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,4.5vw,76px);align-items:start}
.pd-gallery{position:sticky;top:96px;display:flex;flex-direction:column;gap:12px;min-width:0}
.pd-stage{margin:0;background:#FBF9F4;border:1px solid var(--rule-light);overflow:hidden}
.pd-stage img{display:block;width:100%;height:auto}
.pd-angles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pd-angles:has(.pd-angle:not([hidden]):only-of-type){display:none}
.pd-angle{padding:0;border:1px solid var(--rule-light);background:#FBF9F4;cursor:pointer;
  overflow:hidden;transition:border-color .3s,opacity .3s;opacity:.62}
.pd-angle img{display:block;width:100%;height:auto}
.pd-angle:hover{opacity:1}
.pd-angle.is-on{opacity:1;border-color:var(--gold)}
.pd-info{min-width:0;display:flex;flex-direction:column}
.pd-house{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(10,10,10,.5)}
/* The house mark sits where its name used to. Held to one optical height
   rather than one pixel height, so a wordmark and a round mark read as the
   same size, and desaturated so a coloured logo does not fight the page. */
.pd-houselogo{display:block;max-height:30px;max-width:180px;width:auto;
  object-fit:contain;object-position:left center;margin-bottom:2px;
  filter:grayscale(1);opacity:.82}
.pd-title{margin:14px 0 clamp(22px,3vw,34px);font-family:var(--om-display);font-weight:400;
  text-transform:uppercase;line-height:1.08;font-size:clamp(28px,4.2vw,56px);
  letter-spacing:clamp(4px,1.1vw,14px)}
.pd-acc{border-top:1px solid rgba(10,10,10,.18)}
.pd-acc:last-of-type{border-bottom:1px solid rgba(10,10,10,.18)}
.pd-acc summary{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 0;cursor:pointer;list-style:none;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.pd-acc summary::-webkit-details-marker{display:none}
.pd-acc summary::after{content:"+";font-size:19px;line-height:1;color:rgba(10,10,10,.5)}
.pd-acc[open] summary::after{content:"−"}
.pd-acc-body{padding-bottom:26px;display:flex;flex-direction:column;gap:20px}
.pd-swatches{display:flex;flex-wrap:wrap;gap:10px}
.pd-swatch{width:78px;padding:0;background:#FBF9F4;border:1px solid var(--rule-light);
  cursor:pointer;overflow:hidden;opacity:.6;transition:opacity .3s,border-color .3s}
.pd-swatch img{display:block;width:100%;height:auto}
.pd-swatch:hover{opacity:1}
.pd-swatch.is-on{opacity:1;border-color:var(--ink)}
.pd-specs{display:grid;grid-template-columns:auto 1fr;gap:0 clamp(16px,2.2vw,32px);margin:0}
.pd-specs dt{padding:10px 0;font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(10,10,10,.45);border-top:1px solid var(--rule-light);white-space:nowrap}
.pd-specs dd{margin:0;padding:10px 0;font-size:13px;line-height:1.55;
  border-top:1px solid var(--rule-light)}
.pd-copy{margin:0;font-size:13px;line-height:1.75;color:rgba(10,10,10,.68)}
.pd-quote{margin:0;padding-inline-start:16px;border-inline-start:1px solid var(--gold);
  font-size:13px;line-height:1.7;color:rgba(10,10,10,.72)}
.pd-quote cite{display:block;margin-top:9px;font-style:normal;font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(10,10,10,.45)}
.pd-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:clamp(24px,3vw,36px)}
@media (max-width:1023px){
  .pd-shell{grid-template-columns:1fr}
  .pd-gallery{position:static}
  .pd-swatch{width:78px}
}
.bs-card-copy h3{font-size:24px;line-height:1.12}
.bs-card-copy p{margin:0;font-size:13px;line-height:1.65;color:rgba(10,10,10,.62)}
@keyframes bsRail{0%,100%{transform:scaleX(.28);opacity:.22}45%{transform:scaleX(1);opacity:1}}
/* Figma 01C web grid — tablet 768-1023 (32px margin), mobile <=767 (16px) */
@media (max-width:1023px){
  :root{--pad:32px}
  .bs-intro,.bs-feature,.bs-scroll-stage{grid-template-columns:1fr}
  .bs-feature-img{min-height:380px}
  /* The frame needs room to read once the column is the full width. */
  .bs-feature-img.bs-check{min-height:clamp(440px,96vw,560px)}
  .bs-scroll-stage{min-height:980px;gap:28px;align-content:start}
  .bs-scroll-visual{top:92px;min-height:480px;border-left:0;border-top:1px solid rgba(243,239,230,.18)}
  .bs-hero-copy{min-height:calc(100vh - 150px);min-height:calc(100svh - 150px);padding-top:58px;padding-bottom:70px}
  .bs-hero h1{font-size:clamp(48px,17vw,88px)}
  .bs-card-copy{grid-template-columns:38px 1fr}
  .bs-count{font-size:28px}
}

/* ---- motion ---- */
@keyframes omZoom{from{transform:scale(1.07)}to{transform:scale(1)}}
@keyframes omLine{from{opacity:0;transform:translateY(1.1em)}to{opacity:1;transform:translateY(0)}}
@keyframes omCue{0%,100%{transform:translateX(-50%) translateY(0);opacity:.4}50%{transform:translateX(-50%) translateY(7px);opacity:1}}
.om-line{display:inline-block;animation:omLine 1.25s cubic-bezier(.2,.8,.2,1) both}
.om-line--1{animation-delay:.25s}.om-line--2{animation-delay:.45s}.om-line--3{animation-delay:.62s}
.om-line--4{animation-delay:.82s}.om-line--5{animation-delay:1s}
/* .js is set by an inline script in <head>; without JS nothing is ever hidden. */
.js [data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .95s cubic-bezier(.2,.7,.2,1),transform .95s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-stagger]>*{opacity:0;transform:translateY(18px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js [data-stagger].is-in>*{opacity:1;transform:none}
.js [data-stagger].is-in>*:nth-child(1){transition-delay:0ms}
.js [data-stagger].is-in>*:nth-child(2){transition-delay:60ms}
.js [data-stagger].is-in>*:nth-child(3){transition-delay:120ms}
.js [data-stagger].is-in>*:nth-child(4){transition-delay:180ms}
.js [data-stagger].is-in>*:nth-child(5){transition-delay:240ms}
.js [data-stagger].is-in>*:nth-child(6){transition-delay:300ms}
.js [data-stagger].is-in>*:nth-child(7){transition-delay:360ms}
.js [data-stagger].is-in>*:nth-child(8){transition-delay:420ms}
.js [data-stagger].is-in>*:nth-child(n+9){transition-delay:480ms}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .om-hero-zoom{transform:none !important}
  .om-hero--pin,.om-sec--pin{position:relative}
  [data-reveal],[data-stagger]>*{opacity:1 !important;transform:none !important;transition-delay:0ms !important}
  /* the image eases sit on the <img>, not the revealed element, so they need
     naming here too */
  .om-cz-bg,.om-vo-stage img{transform:none !important;transition:none !important}
}
/* ---- chrome density ----
   The header is sticky, so its height is a tax on every screen behind it.
   Below 900px the nav takes a row of its own rather than orphaning the phone
   number under the logo, and the logo is allowed to come down with the
   viewport instead of holding a 190px floor. */
@media (max-width:900px){
  .om-nav{order:3;flex-basis:100%;justify-content:flex-start;gap:10px 18px}
  .om-mark-img{width:clamp(150px,20vw,190px)}
}
@media (max-width:767px){
  :root{--pad:16px}
  .om-topbar{display:none}
  .om-header{justify-content:space-between;gap:0 12px;padding:10px 20px;flex-wrap:wrap;
    min-height:64px;background:var(--emerald-deep);border-bottom:1px solid rgba(243,239,230,.16);
    backdrop-filter:none}
  .om-header>a{position:relative;z-index:2}
  .om-mark-img{display:none}
  .om-mark-img--mobile{display:block;width:clamp(150px,42vw,190px);max-height:42px}
  .om-header.is-menu-open{position:fixed;inset:0;z-index:120;display:flex;align-content:flex-start;
    align-items:center;overflow:auto;background:var(--emerald-deep)}
  .om-menu-toggle{display:grid;place-items:center;width:44px;height:44px;margin-inline-start:auto;
    border:0;color:var(--ivory);position:relative;z-index:2}
  .om-menu-toggle span{position:relative;display:block;width:20px;height:1px;background:currentColor;
    transition:background .25s}
  .om-menu-toggle span::before,.om-menu-toggle span::after{content:"";position:absolute;left:0;width:20px;height:1px;
    background:currentColor;transition:transform .25s,top .25s}
  .om-menu-toggle span::before{top:-6px}
  .om-menu-toggle span::after{top:6px}
  .om-menu-toggle[aria-expanded="true"] span{background:transparent}
  .om-menu-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
  .om-menu-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
  .om-nav{order:3;flex:0 0 100%;display:none;flex-direction:column;gap:0;margin-top:24px;
    padding:4px 0 118px;border-top:1px solid rgba(243,239,230,.1);
    font-size:12px;letter-spacing:0;text-transform:none}
  .om-header.is-menu-open .om-nav{display:flex}
  .om-nav a{display:flex}
  .om-nav a{align-items:center;justify-content:space-between;min-height:66px;padding:0;
    color:var(--ivory);border-bottom:1px solid rgba(243,239,230,.14)}
  .om-nav a.is-on{color:var(--ivory);border-bottom-color:rgba(243,239,230,.22)}
  .om-nav-num{display:inline-block;min-width:24px;margin-right:18px;font-family:var(--om-text);
    font-size:12px;line-height:1;letter-spacing:.08em;color:var(--gold)}
  .om-nav-main{display:flex;flex:1;flex-direction:column}
  .om-nav-label{display:block;font-family:var(--om-text);font-weight:400;font-size:16px;
    line-height:1.2;letter-spacing:.22em;text-transform:uppercase}
  .om-nav-desc{display:block;margin-top:7px;font-size:12px;line-height:1.35;
    letter-spacing:.04em;color:rgba(243,239,230,.56)}
  .om-nav-arrow{display:block;margin-left:18px;color:var(--gold);font-size:18px;line-height:1;
    font-weight:400;transform:translateY(-1px)}
  .om-headphone{display:none}
  .om-mobile-call{position:fixed;right:16px;bottom:16px;z-index:70;display:grid;place-items:center;
    width:52px;height:52px;border-radius:50%;background:var(--emerald-deep);color:var(--gold);
    border:1px solid var(--gold);box-shadow:0 10px 26px rgba(4,12,9,.28);
    line-height:1;text-decoration:none}
  .om-mobile-call-icon{display:block;width:22px;height:22px}
  .om-h1,.om-h2,.pd-title,.bs-intro h1,.om-ex-hero-title,.om-vo-hero-h2{
    font-size:clamp(28px,8vw,34px);line-height:1.18}
  .om-h2{letter-spacing:.2px}
  .om-body,.om-lede,.pd-copy,.om-tl-text,.om-vo-exp-p,.om-vo-close,.om-ex-p,.om-ex-step-p,
  .om-quote,.om-founder-note,.om-legal-intro p,.om-legal-sec p{
    font-size:clamp(16px,4.25vw,18px);line-height:1.62}
  .om-eyebrow,.om-caption,.om-meta,.om-footnote,.om-link,.om-nav-desc,.om-brandcap,
  .om-founder-role,.om-vo-note,.om-ex-fine,.om-legal-updated{
    font-size:clamp(12px,3.2vw,14px);line-height:1.45}
  .om-split-media{min-height:320px}
  .om-hero:not(.om-hero--short) .om-hero-inner{min-height:min(68svh,540px);padding-top:94px;padding-bottom:44px}
  .om-hero:not(.om-hero--short) .om-hero-video{object-position:82% 32%}
  /* the break is measured for the desktop line; here it only makes a ladder,
     so it goes and the lines are evened out instead */
  .om-hero-title br{display:none}
  .om-hero-title{text-wrap:balance}
  /* tall enough that the copy sits under the subject rather than across her */
  .om-hero--short .om-hero-inner{min-height:min(76svh,620px);padding-top:96px}
  .om-storypage .om-hero--short .om-hero-inner{min-height:min(60svh,470px)}
  .om-eyebrow,.om-cta{letter-spacing:2px}
  .om-brandgrid,.om-brandgrid--home{grid-template-columns:repeat(auto-fill,minmax(min(132px,100%),1fr))}
  .om-brandgrid--home{display:flex;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;
    gap:18px;margin-inline:calc(-1 * var(--pad));padding-inline:max(var(--pad),calc((100vw - min(82vw,320px)) / 2));
    padding-bottom:10px;scroll-padding-inline:max(var(--pad),calc((100vw - min(82vw,320px)) / 2));
    scrollbar-width:none}
  .om-brandgrid--home::-webkit-scrollbar{display:none}
  .om-brandgrid--home .om-brandtile{flex:0 0 min(82vw,320px);scroll-snap-align:center;margin:0;background:var(--ivory);
    border:1px solid var(--rule)}
  .om-brandgrid--home .om-brandwell{height:132px;background:var(--ivory);border:0;border-bottom:2px solid var(--emerald-hover)}
  .om-brandgrid--home .om-brandcap{min-height:58px;border:0;background:#fff;
    color:var(--emerald);font-size:11px;letter-spacing:1.4px}
  .om-brandgrid--home .om-brandtile:hover .om-brandcap{background:rgba(28,70,54,.07);color:var(--emerald-hover)}
  .om-brandgrid--home .om-brandlogo,.om-brandgrid--home .om-brandwell--sm .om-brandlogo{max-height:72px}
  .om-brandgrid--home .om-brand-arrowlink{flex:0 0 92px;scroll-snap-align:center;min-height:190px}
  .om-brandgrid--home + .om-footnote{display:none}
  .om-home-brands{padding:48px 0 44px;background:var(--page)}
  .om-home-brands .om-sechead{display:block;margin-bottom:22px}
  .om-home-brands .om-sechead .om-link{display:none}
  .om-home-brands .om-brandgrid--home{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;margin:0;overflow:visible;padding:0;scroll-snap-type:none;scrollbar-width:auto}
  .om-home-brands .om-brandgrid--home .om-brandtile{display:flex;flex:initial;margin:0;
    min-width:0;background:transparent;border:0}
  .om-home-brands .om-brandgrid--home .om-brandtile:nth-child(n+7){display:none}
  .om-home-brands .om-brandgrid--home .om-brandwell{height:112px;width:100%;padding:20px;
    border:1px solid var(--rule);border-radius:8px;background:rgba(255,255,255,.36)}
  .om-home-brands .om-brandgrid--home .om-brandlogo,
  .om-home-brands .om-brandgrid--home .om-brandwell--sm .om-brandlogo{max-height:58px}
  .om-home-brands .om-brandgrid--home .om-brandcap{display:none}
  .om-home-brands .om-brandgrid--home .om-brand-arrowlink{display:none}
  .om-home-brands .om-footnote{display:block;margin-top:30px;font-size:16px;line-height:1.55}
  .om-home-brands .om-home-mobile-link{display:inline-block;margin-top:22px;color:var(--gold-deep);
    border-bottom-color:var(--gold-deep)}
  .om-home-sellers{padding-top:52px;padding-bottom:50px;overflow:hidden}
  .om-home-sellers .om-sechead{display:block;margin-bottom:26px}
  .om-home-sellers .om-sechead .om-link{display:none}
  .om-home-sellers .om-h2{font-size:clamp(31px,9vw,40px);line-height:1.14;color:var(--ink)}
  .om-home-sellers .om-grid{display:flex;gap:18px;overflow-x:auto;margin-inline:calc(-1 * var(--pad));
    padding:0 max(var(--pad),calc((100vw - min(78vw,360px)) / 2)) 4px;
    scroll-padding-inline:max(var(--pad),calc((100vw - min(78vw,360px)) / 2));
    scroll-snap-type:x mandatory;scrollbar-width:none}
  .om-home-sellers .om-grid::-webkit-scrollbar{display:none}
  .om-home-sellers .om-card{flex:0 0 min(78vw,360px);scroll-snap-align:center;gap:14px}
  .om-home-sellers .om-card-media{height:270px;aspect-ratio:auto;border-radius:8px;background:#fff}
  .om-home-sellers .om-card-media--pack img{padding:8% 5%}
  .om-home-sellers .om-tag{left:22px;right:auto;top:22px;border-radius:0;padding:10px 18px;
    background:var(--emerald);color:var(--ivory);font-size:11px;letter-spacing:.24em}
  .om-home-sellers .om-card .om-eyebrow{font-size:12px;letter-spacing:.24em;color:var(--gold-deep)}
  .om-home-sellers .om-card-title{font-size:22px;line-height:1.18}
  .om-home-sellers .om-card-spec{display:block;font-size:18px;color:var(--muted)}
  .om-home-sellers .om-card-more{display:none}
  .om-home-seller-dots{display:flex;justify-content:center;gap:8px;margin:22px 0 2px}
  .om-home-seller-dots span{width:8px;height:5px;border-radius:999px;background:var(--rule-strong)}
  .om-home-seller-dots span:first-child{width:24px;background:var(--emerald)}
  .om-home-sellers .om-home-mobile-link{display:inline-block;margin-top:26px;color:var(--gold-deep);
    border-bottom-color:var(--gold-deep)}
  .om-split--fit .om-split-body{padding:42px var(--pad);gap:22px}
  .om-split--fit .om-listrow{font-size:18px;padding:18px 0}
  .om-split--fit .om-listrow:nth-child(n+2),.om-split--fit .om-link{display:none}
  .om-vc,.om-ex-hero-link[href$="#vision-check"]{display:none}
  .om-brandwell,.om-brandwell--sm{height:88px;padding:15px 16px}
  .om-brandlogo,.om-brandwell--sm .om-brandlogo{max-height:40px}
  .om-brandcap{padding:9px 8px;font-size:10px;letter-spacing:.5px}
  .om-contact{padding:46px 0 0}
  .om-contact .om-wrap{padding-inline:24px}
  .om-contact-grid{display:block}
  .om-contact .om-h2{font-size:26px;line-height:1.15}
  .om-contact .om-phone--gold{font-size:26px;font-weight:600;color:var(--gold-light)}
  .om-contact .om-info{display:grid;grid-template-columns:22px 1fr;gap:0 16px;padding-top:0;
    border-top:0;margin-top:18px}
  .om-contact .om-info-icon{display:block;grid-row:1 / span 2;width:22px;height:22px;margin-top:4px;
    color:var(--gold-light)}
  .om-contact .om-info:nth-child(n+4){display:none}
  .om-contact .om-info .om-caption{display:none}
  .om-contact .om-info-val{font-size:16px;line-height:1.55;color:rgba(243,239,230,.82)}
  /* The enquiry form itself, rather than a button that only points at it. */
  .om-contact-actions{display:none}
  .om-contact-form{display:block;margin-top:34px}
  .om-contact-form .om-form{padding:26px 22px;gap:15px}
  .om-contact-form .om-cta{min-height:54px;border-radius:0}
}
/* Under ~400px the logo and the phone number stop sharing a row unless the
   mark gives way further. */
@media (max-width:400px){
  .om-mark-img{width:clamp(118px,34vw,140px)}
  .om-headphone{font-size:11px;letter-spacing:.5px}
}

/* ---- touch ----
   Hit areas, not type sizes: the padding grows to the 44px Apple/WCAG target
   while the rule and the baseline stay where the design put them. */
@media (pointer:coarse){
  .om-nav a{padding-block:13px 10px}
  @media (max-width:767px){.om-nav a{padding:0}}
  .om-footer-nav{gap:4px}
  .om-footer-nav a{padding-block:11px}
  .om-footer-legal a{padding-block:13px}
  .om-headphone{padding-block:8px}
  /* 26px row + 18px padding clears 44px; the margin carries the gap, so the
     rows land where the design put them. The directions link trades margin
     for padding instead, which grows the target without opening a gap. */
  .om-footer-contact{padding-block:9px}
  .om-footer-dir{margin-top:22px;padding-block:12px}
  .om-link{padding-block:10px 8px}
  .om-ex-hero-link,.om-ex-cta-link,.pd-crumb a{padding-block:11px}
  /* A 16px checkbox is a 16px target; the label beside it stays the same. */
  .om-check input,.om-vc-agree input{width:24px;height:24px;margin-top:0}
  .om-check,.om-vc-agree{align-items:center}
  /* Links set inside a sentence keep the line's rhythm — WCAG 2.5.8 exempts
     them, and padding them would break the paragraph. */
  .om-check a,.om-body a,.om-footnote a{padding-block:0}
}

/* ---- short viewports (landscape phones, split-screen) ----
   A sticky bar plus a 92vh hero leaves nothing to read, so the chrome
   releases and the hero is measured against the short edge. */
@media (max-height:520px) and (orientation:landscape){
  .om-header{position:static;padding-block:8px}
  .om-topbar{padding-block:5px;font-size:10px;gap:2px 16px}
  .om-mark-img{width:clamp(126px,15vw,160px)}
  .om-nav{order:0;flex-basis:auto;font-size:10px;gap:8px 14px}
  .om-hero-inner{min-height:0;gap:14px;padding-top:52px;padding-bottom:40px}
  .om-hero--short .om-hero-inner,
  .om-storypage .om-hero--short .om-hero-inner{min-height:0;padding-top:46px}
  .bs-hero,.bs-hero-copy{min-height:0}
  .bs-hero-copy{padding-top:46px;padding-bottom:48px}
  .bs-scroll-stage{min-height:0}
  .om-hero-title{font-size:clamp(34px,7.4vh,52px)}
  .om-hero-title--sm{font-size:clamp(26px,5.6vh,38px)}
  .om-hero-sub{font-size:15px;line-height:1.55}
  .om-scrollcue{display:none}
}