/* Occasi site theme: THE GARDEN PAVILION (release v212, 23 Oct 2026; drafted 18 Oct). Replaces v204/v205's theme file for file.
   The owner's choice from the options sheet: natural, elegant, romantic. Warm ivory and cream, a deep forest green for
   primary buttons and accents, champagne gold hairlines and icons, blush roses; Cormorant display with an EB Garamond
   italic line, DM Sans for practical text (usability brief, 24 Oct 2026; was Montserrat). Light theme only (owner, 7 Oct). No blur anywhere (house rule): legibility over pictures
   comes from solid or gradient veils, never backdrop-filter.
   Shape rule: buttons 8px, the Sign in chip a pill, cards 14px, pictures 12px, phone frames 30px. Everything is
   prefixed ot- (the v204 contract), so the same file sits beside the v204 bridge or the v205-pack page CSS. */

@font-face{font-family:'Occasi Cormorant';src:url('../assets/fonts/cormorant-latin.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Occasi Garamond Italic';src:url('../assets/fonts/eb-garamond-italic-latin.woff2') format('woff2');font-weight:400 600;font-style:italic;font-display:swap}
@font-face{font-family:'Occasi DM Sans';src:url('../assets/fonts/dm-sans-latin.woff2') format('woff2');font-weight:100 1000;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Fallback';src:local('Georgia');size-adjust:88.7%;ascent-override:92%;descent-override:29%}
@font-face{font-family:'DM Sans Fallback';src:local('Arial');size-adjust:104.4%;ascent-override:94.9%;descent-override:29.7%;line-gap-override:0%}

:root{
  --ot-ivory:#fbf7f1; --ot-cream:#f4ece0; --ot-cream-2:#efe4d4; --ot-card:#fffdf9;
  --ot-forest:#1f3a2c; --ot-forest-hi:#2a4b3a; --ot-forest-deep:#18301f; --ot-sage:#dfe5d6;
  --ot-gold:#b8955a; --ot-gold-soft:#d9c39a; --ot-gold-ink:#7f6230;
  --ot-blush:#f3dfd8; --ot-blush-2:#ecccc3; --ot-rose-ink:#93545a;
  --ot-ink:#2a2521; --ot-text:#4a423b; --ot-muted:#6b6056; --ot-on-forest:#f6f1e7;
  --ot-line:rgba(160,128,74,.34); --ot-line-strong:rgba(127,98,48,.5);
  --ot-serif:'Occasi Cormorant','Cormorant Fallback',Georgia,serif;
  --ot-italic:'Occasi Garamond Italic','Cormorant Fallback',Georgia,serif;
  --ot-sans:'Occasi DM Sans','DM Sans Fallback',Arial,sans-serif;
  --ot-gutter:16px; --ot-top:64px; --ot-max:1240px;
  --ot-ease:cubic-bezier(.16,1,.3,1);
  --ot-shadow:0 1px 2px rgba(74,54,30,.06),0 22px 44px -24px rgba(74,54,30,.34);
  --ot-r-btn:8px; --ot-r-card:14px; --ot-r-img:12px; --ot-r-phone:30px;
  /* v204/v205 token names, kept for the bridge and older page CSS */
  --ot-ivory-2:var(--ot-cream); --ot-champagne:#cdb07a; --ot-gold-hi:#d8b977; --ot-gold-edge:#a9874e;
  --ot-line-soft:rgba(205,176,122,.45); --ot-radius:14px;
}
@media (min-width:768px){:root{--ot-gutter:40px}}
@media (min-width:1000px){:root{--ot-top:76px}}
@media (min-width:1280px){:root{--ot-gutter:56px}}

/* ---------- base ---------- */
html:has(body.ot-site){background:var(--ot-ivory);color-scheme:light;scroll-padding-top:calc(var(--ot-top) + 16px)}
body.ot-site{margin:0;background:var(--ot-ivory);color:var(--ot-text);font:400 16px/1.65 var(--ot-sans);
  padding-top:calc(var(--ot-top) + env(safe-area-inset-top));overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.ot-site.ot-has-hero{padding-top:0}
body.ot-site *,body.ot-site *::before,body.ot-site *::after{box-sizing:border-box}
:where(body.ot-site) img,:where(body.ot-site) video{display:block;max-width:100%;height:auto}
body.ot-site a{color:var(--ot-forest)}
body.ot-site :focus-visible{outline:2px solid var(--ot-forest);outline-offset:3px}
body.ot-site ::selection{background:var(--ot-blush-2);color:var(--ot-ink)}
.ot-skip{position:absolute;left:12px;top:-60px;z-index:1100;background:var(--ot-forest);color:var(--ot-on-forest);padding:12px 16px;border-radius:var(--ot-r-btn)}
.ot-skip:focus{top:12px}
body.ot-site a.ot-skip{color:var(--ot-on-forest)}
.ot-wrap{width:100%;max-width:var(--ot-max);margin:0 auto;padding:0 var(--ot-gutter)}
.ot-section{padding:72px 0}
.ot-section--cream{background:var(--ot-cream)}
.ot-section--tight{padding:48px 0}
@media (min-width:1000px){.ot-section{padding:112px 0}.ot-section--tight{padding:64px 0}}

/* ---------- type ---------- */
.ot-h1,.ot-h2,.ot-h3{font-family:var(--ot-serif);font-weight:500;color:var(--ot-ink);margin:0;text-wrap:balance;letter-spacing:-.005em}
.ot-h1{font-size:clamp(42px,10.5vw,54px);line-height:1.06}
.ot-h2{font-size:clamp(34px,8.4vw,42px);line-height:1.08}
.ot-h3{font-size:26px;line-height:1.15}
.ot-it{display:block;font-family:var(--ot-italic);font-style:italic;font-weight:400;letter-spacing:-.01em;padding-bottom:.06em}
.ot-it-inline{font-family:var(--ot-italic);font-style:italic;font-weight:400}
.ot-lede{margin:18px 0 0;max-width:52ch;font-size:16px;line-height:1.7;color:var(--ot-text);text-wrap:pretty}
.ot-center{text-align:center}.ot-center .ot-lede{margin-left:auto;margin-right:auto}
.ot-eyebrow{display:block;margin:0 0 14px;font:500 12px/1.4 var(--ot-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ot-gold-ink)}
.ot-small{font-size:13.5px;color:var(--ot-muted);line-height:1.6}
.ot-hair{display:block;width:56px;height:1px;background:var(--ot-gold);margin:22px 0}
.ot-center .ot-hair{margin-left:auto;margin-right:auto}
@media (min-width:1000px){
  .ot-h1{font-size:clamp(56px,5vw,74px);line-height:1.03}
  .ot-h2{font-size:clamp(44px,3.6vw,54px);line-height:1.06}
  .ot-h3{font-size:30px}
  .ot-lede{font-size:17px}
}

/* ---------- buttons ---------- */
.ot-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border-radius:var(--ot-r-btn);
  font:500 14px/1 var(--ot-sans);letter-spacing:.04em;text-decoration:none;white-space:nowrap;cursor:pointer;border:1px solid transparent;
  transition:background-color .25s var(--ot-ease),color .25s var(--ot-ease),border-color .25s var(--ot-ease),transform .2s var(--ot-ease)}
.ot-btn:active{transform:translateY(1px) scale(.99)}
body.ot-site .ot-btn-primary{background:var(--ot-forest);color:var(--ot-on-forest);border-color:var(--ot-forest)}
body.ot-site .ot-btn-primary:hover{background:var(--ot-forest-hi);color:#fff}
body.ot-site .ot-btn-ghost{background:rgba(255,253,249,.88);color:var(--ot-ink);border-color:var(--ot-line-strong)}
body.ot-site .ot-btn-ghost:hover{background:#fffdf9;border-color:var(--ot-forest)}
body.ot-site .ot-btn-gold{background:var(--ot-gold-soft);color:var(--ot-ink);border-color:var(--ot-gold)}
body.ot-site .ot-btn-light{background:var(--ot-ivory);color:var(--ot-forest);border-color:var(--ot-ivory)}
.ot-btn-sm{min-height:44px;padding:0 18px;font-size:13px}
.ot-btn .ph-light,.ot-btn .ot-play{font-size:20px}
.ot-play{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid currentColor;font-size:12px !important}
.ot-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ot-center .ot-actions{justify-content:center}
.ot-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:500 14px/1 var(--ot-sans);color:var(--ot-forest);text-decoration:none;
  background:linear-gradient(var(--ot-gold),var(--ot-gold)) 0 calc(50% + 11px)/100% 1px no-repeat}
.ot-link:hover{color:var(--ot-rose-ink)}

/* ---------- header (transparent over a hero, solid elsewhere) ---------- */
.ot-top{position:fixed;inset:0 0 auto 0;z-index:1000;display:flex;align-items:center;gap:16px;height:calc(var(--ot-top) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) var(--ot-gutter) 0;color:var(--ot-ink);background:rgba(251,247,241,.97);box-shadow:0 1px 0 var(--ot-line);font-family:var(--ot-sans);
  transition:background-color .35s var(--ot-ease),box-shadow .35s var(--ot-ease)}
.ot-top.is-over{background:linear-gradient(180deg,rgba(251,247,241,.95) 0%,rgba(251,247,241,.8) 55%,rgba(251,247,241,0) 100%);box-shadow:none}
.ot-brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:var(--ot-ink) !important}
.ot-mark{width:34px;height:22px;background:currentColor;-webkit-mask:url('../assets/logo@2x.png') center/contain no-repeat;mask:url('../assets/logo@2x.png') center/contain no-repeat}
.ot-word{font:500 21px/1 var(--ot-serif);letter-spacing:.26em;text-transform:uppercase}
.ot-nav{display:none;margin-left:auto;align-items:center;gap:2px}
.ot-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font:500 14px/1 var(--ot-sans);letter-spacing:.01em;text-decoration:none;color:var(--ot-ink);white-space:nowrap}
.ot-nav a:hover{color:var(--ot-forest);text-decoration:underline;text-decoration-color:var(--ot-gold);text-underline-offset:8px}
.ot-nav a[aria-current="page"]{color:var(--ot-forest);background:linear-gradient(var(--ot-gold),var(--ot-gold)) 14px calc(50% + 12px)/calc(100% - 28px) 1px no-repeat}
.ot-nav .ot-signin{margin-left:6px;padding:0 14px}
/* the one start action: the same forest button in the header, the menu and on the home page (usability brief, 24 Oct 2026) */
body.ot-site .ot-nav .ot-start{margin-left:10px;min-height:46px;padding:0 22px;border-radius:999px;font:600 13.5px/1 var(--ot-sans);letter-spacing:.02em;color:var(--ot-on-forest);text-decoration:none}
body.ot-site .ot-nav .ot-start:hover{color:#fff;background:var(--ot-forest-hi)}
.ot-menu-btn{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 18px;border:1px solid var(--ot-line-strong);border-radius:999px;background:rgba(255,253,249,.9);
  font:500 14px/1 var(--ot-sans);color:var(--ot-ink);cursor:pointer}
@media (min-width:1000px){.ot-nav{display:flex}.ot-menu-btn{display:none}}
@media (min-width:1000px) and (max-width:1139px){.ot-nav a{padding:0 10px}body.ot-site .ot-nav .ot-start{padding:0 18px}}
.ot-menu{border:0;padding:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:none;background:var(--ot-ivory);color:var(--ot-ink);overscroll-behavior:contain;font-family:var(--ot-sans)}
.ot-menu::backdrop{background:rgba(42,37,33,.35)}
.ot-menu-in{display:flex;flex-direction:column;min-height:100%;padding:env(safe-area-inset-top) var(--ot-gutter) calc(32px + env(safe-area-inset-bottom))}
/* the head matches the page header exactly, so Close sits where Menu was */
.ot-menu-head{display:flex;align-items:center;justify-content:space-between;min-height:var(--ot-top)}
.ot-menu-close{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;border:1px solid var(--ot-line-strong);border-radius:999px;background:var(--ot-card);cursor:pointer;font:500 14px/1 var(--ot-sans);padding:0 18px;color:var(--ot-ink)}
.ot-menu nav{display:flex;flex-direction:column;margin-top:12px;border-top:1px solid var(--ot-line)}
.ot-menu nav a{display:flex;align-items:center;min-height:60px;border-bottom:1px solid var(--ot-line);font:500 28px/1.1 var(--ot-serif);text-decoration:none;color:var(--ot-ink)}
.ot-menu nav a[aria-current="page"]{color:var(--ot-forest)}
.ot-menu .ot-btn{margin-top:28px;align-self:stretch;min-height:54px;border-radius:999px;font-size:15px}
.ot-menu-more{display:flex;flex-wrap:wrap;gap:0 22px;margin:20px 0 0}
.ot-menu-more a{display:inline-flex;align-items:center;min-height:44px;font:500 15px/1 var(--ot-sans);color:var(--ot-forest)}

/* ---------- home hero ---------- */
.ot-hero{position:relative;min-height:max(620px,100svh);display:grid;align-items:center;isolation:isolate;overflow:hidden;background:var(--ot-cream)}
.ot-hero-media,.ot-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.ot-hero-media img{object-position:50% 40%}
.ot-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 58% 46% at 50% 44%,rgba(251,247,241,.84) 0%,rgba(251,247,241,.62) 45%,rgba(251,247,241,0) 78%),
             linear-gradient(180deg,rgba(251,247,241,.35) 0%,rgba(251,247,241,0) 22%)}
.ot-hero-copy{position:relative;text-align:center;padding:calc(var(--ot-top) + 24px) var(--ot-gutter) 64px;max-width:820px;margin:0 auto}
.ot-hero .ot-h1{font-size:clamp(44px,11.6vw,60px);line-height:1.04}
.ot-hero .ot-lede{margin:20px auto 0;max-width:36ch;color:var(--ot-ink);font-size:16.5px}
.ot-hero .ot-actions{justify-content:center;margin-top:30px}
@media (max-width:767px){
  .ot-hero{align-items:start}
  .ot-hero-media img{object-position:50% 50%}
  .ot-hero::after{background:linear-gradient(180deg,rgba(251,247,241,.82) 0%,rgba(251,247,241,.62) 34%,rgba(251,247,241,.2) 52%,rgba(251,247,241,0) 62%)}
  .ot-hero-copy{padding-top:calc(var(--ot-top) + 34px)}
  .ot-hero .ot-actions .ot-btn{flex:1 1 100%}
}
@media (min-width:1000px){.ot-hero{min-height:max(600px,calc(100svh - 124px))}.ot-hero .ot-h1{font-size:clamp(60px,5.4vw,80px)}.ot-hero .ot-lede{font-size:18px;max-width:40ch}.ot-hero-copy{padding-bottom:72px}}

/* ---------- the five-icon strip ---------- */
.ot-icons{background:var(--ot-ivory);border-bottom:1px solid var(--ot-line)}
.ot-icons ul{list-style:none;margin:0 auto;padding:22px var(--ot-gutter);max-width:var(--ot-max);display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.ot-icons ul::-webkit-scrollbar{display:none}
.ot-icons li{flex:0 0 auto;scroll-snap-align:start;display:flex;align-items:center;gap:12px;font:500 13.5px/1.3 var(--ot-sans);color:var(--ot-ink);white-space:nowrap}
.ot-icons .ot-icon{font-size:30px;color:var(--ot-gold-ink)}
@media (min-width:900px){.ot-icons ul{justify-content:space-between;overflow:visible;padding:30px var(--ot-gutter)}.ot-icons li{flex-direction:column;gap:10px;text-align:center}.ot-icons .ot-icon{font-size:36px}}

/* ---------- inner page head ---------- */
.ot-pagehead{padding:44px 0 36px;text-align:center}
.ot-pagehead .ot-lede{margin-left:auto;margin-right:auto}
.ot-pagehead--split{text-align:left}
.ot-pagehead--split .ot-wrap{display:grid;gap:36px;align-items:center}
.ot-pagehead--split .ot-lede{margin-left:0}
.ot-pagehead--split .ot-actions{justify-content:flex-start}
.ot-pagehead-art{border-radius:var(--ot-r-img);overflow:hidden;aspect-ratio:4/3;background:var(--ot-cream)}
.ot-pagehead-art img{width:100%;height:100%;object-fit:cover}
@media (min-width:1000px){.ot-pagehead{padding:84px 0 56px}.ot-pagehead--split .ot-wrap{grid-template-columns:1.05fr 1fr;gap:72px}.ot-pagehead-art{aspect-ratio:5/4}}

/* ---------- frames for real screens ---------- */
.ot-phone{position:relative;width:min(100%,250px);aspect-ratio:9/19.5;border-radius:var(--ot-r-phone);padding:9px;background:#1c1a18;box-shadow:var(--ot-shadow),inset 0 0 0 1px #3a3631}
.ot-phone::before{content:"";position:absolute;top:15px;left:50%;width:30%;height:16px;border-radius:999px;background:#1c1a18;transform:translateX(-50%);z-index:2}
.ot-phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:calc(var(--ot-r-phone) - 9px);background:var(--ot-ivory)}
.ot-screen{border-radius:var(--ot-r-img);overflow:hidden;background:var(--ot-card);box-shadow:var(--ot-shadow);outline:1px solid var(--ot-line);outline-offset:-1px}
.ot-screen-bar{display:flex;gap:6px;padding:11px 14px;background:var(--ot-cream);border-bottom:1px solid var(--ot-line)}
.ot-screen-bar span{width:9px;height:9px;border-radius:50%;background:var(--ot-gold-soft)}
.ot-screen img{width:100%}
.ot-caption{margin-top:12px;font-size:13.5px;color:var(--ot-muted);text-align:center}
.ot-note{margin-top:18px;font-size:13px;color:var(--ot-muted)}

/* ---------- home: the meaningful-way trio of phones ---------- */
.ot-trio{display:flex;gap:16px;justify-content:center;align-items:flex-start;margin-top:44px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 24px;scrollbar-width:none}
.ot-trio::-webkit-scrollbar{display:none}
.ot-trio figure{margin:0;flex:0 0 62%;max-width:250px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center}
.ot-trio figcaption{margin-top:16px;text-align:center}
.ot-trio figcaption b{display:block;font:500 22px/1.2 var(--ot-serif);color:var(--ot-ink)}
.ot-trio figcaption span{font-size:14px;color:var(--ot-muted)}
@media (min-width:900px){.ot-trio{gap:56px;overflow:visible}.ot-trio figure{flex:0 0 250px}.ot-trio figure:nth-child(2){margin-top:-40px}}

/* ---------- design tiles (home) and design cards (designs page) ---------- */
.ot-tiles{display:grid;grid-auto-flow:column;grid-auto-columns:70%;gap:16px;margin-top:40px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:none}
.ot-tiles::-webkit-scrollbar{display:none}
.ot-tile{scroll-snap-align:start;text-decoration:none;color:inherit}
.ot-tile-img{aspect-ratio:3/4;border-radius:var(--ot-r-img);overflow:hidden;background:var(--ot-cream)}
.ot-tile-img img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .9s var(--ot-ease)}
.ot-tile:hover .ot-tile-img img{transform:scale(1.035)}
.ot-tile b{display:block;margin-top:14px;font:500 23px/1.2 var(--ot-serif);color:var(--ot-ink)}
.ot-tile span{font-size:13.5px;color:var(--ot-muted)}
@media (min-width:900px){.ot-tiles{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);gap:28px;overflow:visible}}
.ot-more{display:flex;justify-content:center;margin-top:36px}

.ot-catalog{display:grid;gap:28px;padding-bottom:96px}
.ot-filters{border-top:1px solid var(--ot-line);padding-top:6px}
.ot-filters details{border-bottom:1px solid var(--ot-line)}
.ot-filters summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;cursor:pointer;list-style:none;font:500 14px/1 var(--ot-sans);letter-spacing:.02em;color:var(--ot-ink)}
.ot-filters summary::-webkit-details-marker{display:none}
.ot-filters summary::after{content:"+";font:400 22px/1 var(--ot-sans);color:var(--ot-gold-ink)}
.ot-filters details[open] summary::after{content:"\2013"}
.ot-filters fieldset{border:0;margin:0;padding:0 0 16px}
.ot-filters legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ot-check{display:flex;align-items:center;gap:12px;min-height:44px;font-size:14.5px;color:var(--ot-text);cursor:pointer}
.ot-check input{appearance:none;width:20px;height:20px;margin:0;border:1px solid var(--ot-line-strong);border-radius:5px;background:var(--ot-card);display:grid;place-items:center;cursor:pointer}
.ot-check input:checked{background:var(--ot-forest);border-color:var(--ot-forest)}
.ot-check input:checked::after{content:"";width:10px;height:5px;border:2px solid var(--ot-on-forest);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.ot-check small{margin-left:auto;color:var(--ot-muted);font-size:12.5px}
.ot-swatches{display:flex;flex-wrap:wrap;gap:6px}
.ot-swatch{position:relative;width:44px;height:44px;display:grid;place-items:center;cursor:pointer}
.ot-swatch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.ot-swatch span{width:28px;height:28px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(42,37,33,.18)}
.ot-swatch input:checked+span{box-shadow:0 0 0 2px var(--ot-ivory),0 0 0 4px var(--ot-forest)}
.ot-swatch input:focus-visible+span{outline:2px solid var(--ot-forest);outline-offset:5px}
.ot-catalog-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;font-size:14px;color:var(--ot-muted)}
.ot-clear{min-height:44px;padding:0 4px;border:0;background:none;color:var(--ot-forest);font:500 14px/1 var(--ot-sans);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.ot-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 14px}
.ot-card{display:flex;flex-direction:column}
.ot-card[hidden]{display:none}
.ot-card .ot-tile-img{aspect-ratio:3/4}
.ot-card h3{margin:14px 0 0;font:500 21px/1.2 var(--ot-serif);color:var(--ot-ink)}
.ot-card .ot-pkg-label{margin-top:4px;font:500 11.5px/1.4 var(--ot-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ot-gold-ink)}
.ot-card p{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:var(--ot-text);display:none}
.ot-card .ot-card-links{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px}
.ot-card .ot-card-links a{display:inline-flex;align-items:center;min-height:44px;font:500 13.5px/1 var(--ot-sans);color:var(--ot-forest)}
.ot-empty{grid-column:1/-1;padding:48px 20px;text-align:center;border:1px dashed var(--ot-line-strong);border-radius:var(--ot-r-card)}
@media (min-width:700px){.ot-cards{grid-template-columns:repeat(3,1fr);gap:40px 24px}.ot-card p{display:block}}
@media (min-width:1000px){.ot-catalog{grid-template-columns:256px 1fr;gap:52px}.ot-filters{position:sticky;top:calc(var(--ot-top) + 24px);align-self:start}}
@media (max-width:999px){.ot-filters-toggle{display:inline-flex}.ot-filters:not(.is-open){display:none}}
@media (min-width:1000px){.ot-filters-toggle{display:none}}

/* ---------- packages ---------- */
.ot-pkgs{display:grid;gap:20px;margin-top:44px}
.ot-pkg{position:relative;display:flex;flex-direction:column;padding:30px 26px;background:var(--ot-card);border-radius:var(--ot-r-card);box-shadow:var(--ot-shadow);outline:1px solid var(--ot-line);outline-offset:-1px}
.ot-pkg--feature{outline:1.5px solid var(--ot-gold);background:linear-gradient(180deg,#fffaf2,var(--ot-card) 40%)}
.ot-pkg-name{font:500 12.5px/1.4 var(--ot-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ot-gold-ink)}
.ot-pkg h3{margin:10px 0 0;font:500 30px/1.15 var(--ot-serif);color:var(--ot-ink)}
.ot-price{display:flex;align-items:baseline;gap:10px;margin-top:18px}
.ot-price b{font:500 52px/1 var(--ot-serif);color:var(--ot-ink)}
.ot-price span{font-size:14px;color:var(--ot-muted)}
/* v205 (8606995): the rights line under each home price */
.ot-pkg .pkg-rights{margin:8px 0 4px;font-size:13px;line-height:1.5;color:var(--ot-muted)}
.ot-pkg .pkg-rights a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.ot-pkg p{margin:14px 0 0;font-size:14.5px}
.ot-ticks{list-style:none;margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--ot-line);display:grid;gap:10px}
.ot-ticks li{position:relative;padding-left:30px;font-size:14.5px;line-height:1.5}
.ot-ticks li::before{content:"";position:absolute;left:2px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--ot-sage)}
.ot-ticks li::after{content:"";position:absolute;left:7px;top:8.5px;width:7px;height:3.5px;border:1.6px solid var(--ot-forest);border-top:0;border-right:0;transform:rotate(-45deg)}
.ot-pkg .ot-btn{margin-top:auto}
.ot-pkg .ot-ticks{margin-bottom:28px}
.ot-pkg-foot{margin-top:12px;text-align:center;font-size:13px;color:var(--ot-muted)}
.ot-pkgs-note{margin:28px auto 0;max-width:62ch;text-align:center;font-size:14.5px;color:var(--ot-muted)}
@media (min-width:860px){.ot-pkgs{grid-template-columns:1fr 1fr;gap:28px;max-width:940px;margin-left:auto;margin-right:auto}.ot-pkg{padding:40px 38px}}

/* ---------- comparison table ---------- */
.ot-compare{margin:44px auto 0;max-width:940px;background:var(--ot-card);border-radius:var(--ot-r-card);outline:1px solid var(--ot-line);outline-offset:-1px;overflow:hidden}
.ot-compare table{width:100%;border-collapse:collapse;font-size:14.5px}
.ot-compare th,.ot-compare td{padding:15px 14px;text-align:left;vertical-align:middle}
.ot-compare thead th{background:var(--ot-cream);font:500 12px/1.3 var(--ot-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ot-gold-ink)}
.ot-compare thead th:not(:first-child),.ot-compare td{text-align:center;width:24%}
.ot-compare tbody tr+tr th,.ot-compare tbody tr+tr td{border-top:1px solid rgba(160,128,74,.18)}
.ot-compare tbody th{font-weight:400;color:var(--ot-ink)}
.ot-compare tbody tr.ot-group th{padding-top:22px;font:500 20px/1.2 var(--ot-serif);color:var(--ot-ink)}
.ot-yes{display:inline-block;width:22px;height:22px;border-radius:50%;background:var(--ot-sage);position:relative;vertical-align:middle}
.ot-yes::after{content:"";position:absolute;left:6.5px;top:6.5px;width:8px;height:4px;border:1.7px solid var(--ot-forest);border-top:0;border-right:0;transform:rotate(-45deg)}
.ot-no{color:var(--ot-muted)}
@media (min-width:700px){.ot-compare th,.ot-compare td{padding:16px 24px}}

/* ---------- steps ---------- */
.ot-steps{list-style:none;margin:44px 0 0;padding:0;display:grid;gap:30px;counter-reset:step}
.ot-steps li{counter-increment:step;display:grid;grid-template-columns:52px 1fr;gap:4px 16px;align-items:start}
.ot-steps li::before{content:counter(step,decimal-leading-zero);grid-row:span 2;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--ot-gold);font:500 18px/1 var(--ot-serif);color:var(--ot-gold-ink);background:var(--ot-card)}
.ot-steps b{font:500 23px/1.2 var(--ot-serif);color:var(--ot-ink)}
.ot-steps p{margin:6px 0 0;font-size:14.5px;line-height:1.6}
@media (min-width:900px){.ot-steps{grid-template-columns:repeat(4,1fr);gap:36px}.ot-steps li{grid-template-columns:1fr}.ot-steps li::before{grid-row:auto;margin-bottom:14px}}

.ot-walk{display:grid;gap:56px;margin-top:56px}
.ot-walk-step{display:grid;gap:28px;align-items:center}
.ot-walk-step .ot-num{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--ot-gold);font:500 18px/1 var(--ot-serif);color:var(--ot-gold-ink);background:var(--ot-card);margin-bottom:16px}
.ot-walk-step .ot-phones{display:flex;gap:14px;justify-content:center}
.ot-walk-step .ot-phones .ot-phone{width:min(46%,230px)}
@media (min-width:900px){.ot-walk{gap:96px}.ot-walk-step{grid-template-columns:1fr 1fr;gap:72px}.ot-walk-step:nth-child(even) .ot-walk-art{order:-1}}

/* ---------- feature rows (features page) ---------- */
.ot-frows{display:grid;gap:12px;margin-top:40px}
.ot-frow{display:grid;grid-template-columns:44px 1fr;gap:4px 16px;padding:20px 0;border-top:1px solid var(--ot-line)}
.ot-frow i{grid-row:span 2;font-size:30px;color:var(--ot-gold-ink)}
.ot-frow b{font:500 22px/1.2 var(--ot-serif);color:var(--ot-ink)}
.ot-frow p{margin:4px 0 0;font-size:14.5px}
.ot-showcase{display:grid;gap:40px;align-items:start}
.ot-showcase-art{position:relative}
.ot-showcase-art .ot-phone{position:absolute;right:-6px;bottom:-30px;width:34%;max-width:200px}
@media (min-width:1000px){.ot-showcase{grid-template-columns:1.25fr 1fr;gap:72px}.ot-showcase--rev{grid-template-columns:1fr 1.25fr}.ot-showcase--rev .ot-showcase-art{order:2}}

/* ---------- included grid (home, in place of testimonials) ---------- */
.ot-included{display:grid;gap:44px;align-items:center}
.ot-inc-list{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:4px 28px}
.ot-inc-list li{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid rgba(160,128,74,.2);font-size:15px;color:var(--ot-ink)}
.ot-inc-list .ot-icon{font-size:24px;color:var(--ot-gold-ink);margin-top:-1px}
@media (min-width:700px){.ot-inc-list{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.ot-included{grid-template-columns:1fr 1.1fr;gap:72px}}

/* ---------- story ---------- */
.ot-story{max-width:680px;margin:0 auto}
.ot-story p{margin:0 0 18px;font-size:17px;line-height:1.8}
.ot-story p:first-of-type::first-letter{float:left;font:500 64px/.8 var(--ot-serif);color:var(--ot-gold-ink);margin:8px 10px 0 0}
.ot-wide-img{border-radius:var(--ot-r-img);overflow:hidden;aspect-ratio:16/10;background:var(--ot-cream)}
.ot-wide-img img{width:100%;height:100%;object-fit:cover}
.ot-pull{margin:48px auto;max-width:760px;text-align:center;font:400 italic clamp(26px,6vw,36px)/1.3 var(--ot-italic);color:var(--ot-ink)}
.ot-values{display:grid;gap:28px;margin-top:40px}
.ot-values div{padding:28px 24px;background:var(--ot-card);border-radius:var(--ot-r-card);outline:1px solid var(--ot-line);outline-offset:-1px}
.ot-values div:nth-child(2){background:var(--ot-blush)}
.ot-values b{display:block;font:500 25px/1.2 var(--ot-serif);color:var(--ot-ink);margin-bottom:8px}
.ot-values p{margin:0;font-size:15px}
@media (min-width:900px){.ot-values{grid-template-columns:1.2fr 1fr 1fr}}

/* ---------- Occasi Pro: the one dark-green block (allowed accent) ---------- */
.ot-pro-block{background:var(--ot-forest-deep);color:var(--ot-on-forest);border-radius:var(--ot-r-card);padding:36px 22px;display:grid;gap:36px;overflow:hidden}
.ot-pro-block .ot-h2,.ot-pro-block .ot-h3{color:var(--ot-on-forest)}
.ot-pro-block .ot-lede,.ot-pro-block p{color:rgba(246,241,231,.86)}
.ot-pro-block .ot-eyebrow{color:var(--ot-gold-soft)}
.ot-pro-grid{display:grid;gap:22px 28px;list-style:none;margin:0;padding:0}
.ot-pro-grid li{display:grid;grid-template-columns:40px 1fr;gap:2px 14px}
.ot-pro-grid i{grid-row:span 2;font-size:28px;color:var(--ot-gold-soft)}
.ot-pro-grid b{font:500 21px/1.2 var(--ot-serif);color:var(--ot-on-forest)}
.ot-pro-grid p{margin:2px 0 0;font-size:14px}
.ot-pro-block .ot-screen{outline-color:rgba(217,195,154,.35)}
@media (min-width:1000px){.ot-pro-block{padding:64px;grid-template-columns:1fr 1fr;gap:56px;align-items:center}.ot-pro-grid{grid-template-columns:1fr 1fr}}

/* ---------- affiliates figures ---------- */
.ot-figs{display:grid;gap:16px;margin-top:40px}
.ot-fig{padding:26px 24px;background:var(--ot-card);border-radius:var(--ot-r-card);outline:1px solid var(--ot-line);outline-offset:-1px}
.ot-fig .ot-num-big{display:block;font:500 54px/1 var(--ot-serif);color:var(--ot-forest)}
.ot-fig b{display:block;margin-top:12px;font:500 21px/1.2 var(--ot-serif);color:var(--ot-ink)}
.ot-fig p{margin:6px 0 0;font-size:14.5px}
@media (min-width:860px){.ot-figs{grid-template-columns:1.3fr 1fr 1fr}}
.ot-points{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.ot-points li{display:flex;gap:14px;align-items:center;font-size:15px;color:var(--ot-ink)}
.ot-points i{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ot-blush);color:var(--ot-rose-ink);font-size:18px}

/* ---------- FAQ ---------- */
.ot-faq{max-width:820px;margin:40px auto 0;border-top:1px solid var(--ot-line)}
.ot-faq details{border-bottom:1px solid var(--ot-line)}
.ot-faq summary{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:64px;padding:12px 0;cursor:pointer;list-style:none;font:500 21px/1.3 var(--ot-serif);color:var(--ot-ink)}
.ot-faq summary::-webkit-details-marker{display:none}
.ot-faq summary::after{content:"+";flex:0 0 auto;font:300 26px/1 var(--ot-sans);color:var(--ot-gold-ink)}
.ot-faq details[open] summary::after{content:"\2013"}
.ot-faq details p{margin:0 0 22px;max-width:68ch;font-size:15.5px}

/* ---------- picture call-to-action band ---------- */
.ot-band{position:relative;isolation:isolate;overflow:hidden;min-height:440px;display:grid;align-items:center;background:var(--ot-cream)}
.ot-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.ot-band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(251,247,241,.95) 0%,rgba(251,247,241,.82) 42%,rgba(251,247,241,0) 74%)}
.ot-band .ot-wrap{padding-top:64px;padding-bottom:64px}
.ot-band .ot-lede{max-width:40ch}
@media (max-width:767px){.ot-band::after{background:linear-gradient(180deg,rgba(251,247,241,.95) 0%,rgba(251,247,241,.85) 55%,rgba(251,247,241,.2) 100%)}.ot-band{align-items:start;min-height:560px}}

/* ---------- forms (sign in / sign up / help) ---------- */
.ot-auth{display:grid;min-height:calc(100svh - var(--ot-top))}
.ot-auth-art{display:none;position:relative;background:var(--ot-cream)}
.ot-auth-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ot-auth-main{display:grid;place-items:center;padding:40px var(--ot-gutter) 72px}
.ot-auth-box{width:100%;max-width:420px}
.ot-field{display:grid;gap:8px;margin-top:20px}
.ot-field label{font:500 14px/1.3 var(--ot-sans);color:var(--ot-ink)}
.ot-field input,.ot-field textarea,.ot-field select{width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--ot-line-strong);border-radius:var(--ot-r-btn);background:var(--ot-card);font:400 16px/1.4 var(--ot-sans);color:var(--ot-ink)}
.ot-field input:focus,.ot-field textarea:focus{outline:2px solid var(--ot-forest);outline-offset:1px;border-color:var(--ot-forest)}
.ot-field .ot-help{font-size:13px;color:var(--ot-muted)}
.ot-or{display:flex;align-items:center;gap:14px;margin:24px 0;font-size:13px;color:var(--ot-muted)}
.ot-or::before,.ot-or::after{content:"";flex:1;height:1px;background:var(--ot-line)}
.ot-auth-box .ot-btn{width:100%;margin-top:24px}
.ot-auth-switch{margin-top:22px;font-size:14.5px;text-align:center}
@media (min-width:1000px){.ot-auth{grid-template-columns:1fr 1fr}.ot-auth-art{display:block}}

/* ---------- legal reading layout ---------- */
.ot-legal{display:grid;gap:40px;padding-bottom:96px}
.ot-legal nav{font-size:14px}
.ot-legal nav a{display:flex;align-items:center;min-height:44px;color:var(--ot-text);text-decoration:none;border-bottom:1px solid rgba(160,128,74,.18)}
.ot-legal article{max-width:72ch;font-size:16px;line-height:1.75}
.ot-legal article h2{font:500 30px/1.2 var(--ot-serif);color:var(--ot-ink);margin:44px 0 12px}
.ot-legal article h3{font:500 22px/1.25 var(--ot-serif);color:var(--ot-ink);margin:28px 0 8px}
@media (min-width:1000px){.ot-legal{grid-template-columns:240px 1fr;gap:72px}.ot-legal nav{position:sticky;top:calc(var(--ot-top) + 24px);align-self:start}}

/* ---------- trailer lightbox ---------- */
.ot-lightbox{border:0;padding:0;margin:auto;width:min(96vw,1100px);max-width:none;max-height:92dvh;background:transparent;overflow:visible}
.ot-lightbox::backdrop{background:rgba(31,28,24,.88)}
.ot-lightbox video{width:100%;height:auto;max-height:84dvh;border-radius:var(--ot-r-img);background:#1c1a18}
.ot-lightbox-close{position:absolute;right:0;top:-56px;min-height:44px;padding:0 18px;border:1px solid rgba(246,241,231,.5);border-radius:999px;background:transparent;color:var(--ot-on-forest);font:500 13px/1 var(--ot-sans);cursor:pointer}
.ot-lightbox p{margin:12px 0 0;color:rgba(246,241,231,.8);font-size:13px;text-align:center}
@media (max-width:767px){.ot-lightbox{width:min(92vw,440px)}}

/* ---------- footer ---------- */
.ot-foot{background:var(--ot-cream);border-top:1px solid var(--ot-line);padding:64px var(--ot-gutter) 28px;color:var(--ot-text);font:400 15px/1.6 var(--ot-sans)}
.ot-foot-top{display:grid;gap:30px;max-width:var(--ot-max);margin:0 auto}
.ot-foot-brand p{margin:12px 0 0;font:italic 400 20px/1.4 var(--ot-italic);color:var(--ot-rose-ink)}
.ot-foot h3{margin:0 0 8px;font:500 12px/1 var(--ot-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ot-gold-ink)}
.ot-foot nav{display:flex;flex-direction:column}
.ot-foot nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:15px;color:var(--ot-text)}
.ot-foot nav a:hover,.ot-foot-bottom a:hover{color:var(--ot-forest)}
.ot-foot-bottom{max-width:var(--ot-max);margin:36px auto 0;padding-top:18px;border-top:1px solid var(--ot-line);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center;font-size:13px;color:var(--ot-muted)}
.ot-foot-bottom div{display:flex;gap:4px 18px;flex-wrap:wrap}
.ot-foot-bottom a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;text-decoration:none;color:var(--ot-muted)}
/* v280: Occasi on social media (plain links, no embeds or scripts), under the brand line */
.ot-foot nav.ot-social{flex-direction:row;flex-wrap:wrap;gap:2px;margin:14px 0 0 -12px}
.ot-foot nav.ot-social a{justify-content:center;min-width:44px;min-height:44px;border-radius:50%;color:var(--ot-muted)}
.ot-foot nav.ot-social a:hover,.ot-foot nav.ot-social a:focus-visible{color:var(--ot-forest)}
/* v205 (8606995): "Forget my preferences" sits with the footer links */
.ot-forget{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font:inherit;font-size:13px;color:var(--ot-muted);cursor:pointer;text-decoration:none}
.ot-forget:hover{color:var(--ot-forest)}
/* v280 cookie consent (js/occasi-consent.js): a paper card at the foot of the screen. Accept and Reject look the same;
   the page gains room at its foot so nothing stays hidden behind the card. */
.oc-consent{position:fixed;z-index:70;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));max-height:calc(100dvh - 20px);overflow:auto;padding:12px 14px;background:var(--ot-card);color:var(--ot-text);border:1px solid var(--ot-line);border-radius:var(--ot-r-card);box-shadow:var(--ot-shadow);font:14px/1.5 var(--ot-sans)}
.oc-consent[hidden]{display:none}
body.oc-consent-open{padding-bottom:var(--oc-consent-h,0)}
.oc-consent-text{margin:0}
.oc-consent-text>b:first-child{font:600 18px/1.2 var(--ot-serif);color:var(--ot-ink)}
.oc-consent a{color:var(--ot-forest);text-decoration:underline;text-underline-offset:2px}
.oc-consent-title{margin:0 0 6px;font:600 22px/1.2 var(--ot-serif);color:var(--ot-ink)}
.oc-consent-title:focus{outline:none}
.oc-consent-actions{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-top:10px}
.oc-consent-actions:has(> :nth-child(2):last-child){grid-template-columns:1fr auto}
.oc-consent-actions:has(> :only-child){grid-template-columns:auto;justify-content:start}
.oc-btn{min-height:44px;padding:0 18px;border:1px solid var(--ot-forest);border-radius:999px;background:var(--ot-forest);color:var(--ot-on-forest);font:600 15px/1 var(--ot-sans);cursor:pointer}
.oc-btn:hover{background:var(--ot-forest-hi)}
.oc-btn-quiet{background:transparent;color:var(--ot-forest);border-color:var(--ot-line-strong)}
.oc-btn-quiet:hover{background:var(--ot-cream)}
.oc-btn:focus-visible,.oc-consent input:focus-visible,.oc-consent a:focus-visible{outline:2px solid var(--ot-gold-ink);outline-offset:2px}
.oc-consent-row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:44px;padding:10px 0;border-top:1px solid var(--ot-line);cursor:pointer}
.oc-consent-row:first-of-type{margin-top:10px}
.oc-consent-row b{display:block;color:var(--ot-ink)}
.oc-consent-row small{display:block;font-size:13px;color:var(--ot-muted)}
.oc-consent input[role=switch]{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:46px;height:28px;margin:0;border:1px solid var(--ot-line-strong);border-radius:14px;background:var(--ot-cream-2);cursor:pointer;transition:background .2s var(--ot-ease)}
.oc-consent input[role=switch]::before{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--ot-card);box-shadow:0 1px 2px rgba(74,54,30,.3);transition:transform .2s var(--ot-ease)}
.oc-consent input[role=switch]:checked{background:var(--ot-forest);border-color:var(--ot-forest)}
.oc-consent input[role=switch]:checked::before{transform:translateX(18px)}
.oc-consent-more{margin:10px 0 0;font-size:13px}
@media (min-width:768px){.oc-consent{left:24px;right:auto;bottom:24px;width:440px}}
@media (prefers-reduced-motion:reduce){.oc-consent input[role=switch],.oc-consent input[role=switch]::before{transition:none}}
@media (min-width:900px){.ot-foot-top{grid-template-columns:1.3fr 1fr 1fr 1fr}}

/* ---------- reveal on scroll (motion is for hierarchy only; none with reduced motion) ---------- */
@media (prefers-reduced-motion:no-preference){
  .ot-js .ot-reveal{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ot-ease),transform .9s var(--ot-ease)}
  .ot-js .ot-reveal.is-in{opacity:1;transform:none}
  .ot-hero-copy>:not(h1){animation:ot-rise 1.1s var(--ot-ease) both}
  .ot-hero-copy>:nth-child(2){animation-delay:.08s}.ot-hero-copy>:nth-child(3){animation-delay:.16s}
  @keyframes ot-rise{from{opacity:0;transform:translateY(14px)}}
}
.ot-shot .ot-reveal{opacity:1 !important;transform:none !important}

/* ---------- utilities added after the first pass ---------- */
body.ot-site [hidden]{display:none !important}
.ot-film{position:relative;display:block;width:100%;max-width:980px;margin:36px auto 0;padding:0;border:0;border-radius:var(--ot-r-img);overflow:hidden;cursor:pointer;background:var(--ot-cream);box-shadow:var(--ot-shadow)}
.ot-film img{width:100%;aspect-ratio:16/9;object-fit:cover}
.ot-film-play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:rgba(255,253,249,.92);color:var(--ot-forest);font-size:34px;box-shadow:var(--ot-shadow);transition:transform .3s var(--ot-ease)}
.ot-film:hover .ot-film-play{transform:scale(1.06)}
.ot-help{font-size:13.5px;color:var(--ot-forest);justify-self:start;min-height:44px;display:inline-flex;align-items:center}
.ot-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px}
.ot-chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--ot-line-strong);border-radius:999px;background:var(--ot-card);color:var(--ot-ink);text-decoration:none;font-size:14px}
.ot-chips a:hover{border-color:var(--ot-forest)}
.ot-contact{padding:32px 28px;border-radius:var(--ot-r-card);background:var(--ot-blush)}
.ot-contact p{margin:12px 0 0}

/* the words printed on the hero's easel card: live text fitted to the card's corners (js), never baked in */
.ot-cardprint{position:absolute;left:0;top:0;z-index:0;margin:0;box-sizing:border-box;transform-origin:0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:calc(var(--cw,100px)*.06);padding:calc(var(--cw,100px)*.1) calc(var(--cw,100px)*.07);text-align:center;color:#4a3a28;pointer-events:none;visibility:hidden;mix-blend-mode:multiply}
.ot-cardprint.is-on{visibility:visible}
.ot-cp-k{font:500 max(11px,calc(var(--cw)*.08))/1 var(--ot-sans);letter-spacing:.24em;padding-left:.24em}
.ot-cp-l{font:italic 400 max(13px,calc(var(--cw)*.135))/1.12 var(--ot-italic);overflow-wrap:normal;color:#3d3022}
.ot-cp-s{font:500 max(11px,calc(var(--cw)*.07))/1.3 var(--ot-sans);letter-spacing:0;color:#6b5a44}
.ot-cp-rule{display:block;width:32%;height:1px;background:#b8955a;flex:0 0 auto}

/* ---------- v204/v205 compatibility: older markup keeps working in the new look ---------- */
.ot-btn-gold{background:var(--ot-forest);color:var(--ot-on-forest);border-color:var(--ot-forest)}
.ot-btn-gold:hover{background:var(--ot-forest-hi);color:#fff}
.ot-btn-line{background:rgba(255,253,249,.88);color:var(--ot-ink);border-color:var(--ot-line-strong)}
.ot-btn-line:hover{border-color:var(--ot-forest)}
.ot-top-cta{display:none}
.ot-foot-legal{max-width:var(--ot-max);margin:14px auto 0;font-size:12px;line-height:1.6;color:var(--ot-muted)}
.ot-icon{width:1em;height:1em;display:inline-block;vertical-align:-.15em;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ot-steps--3{max-width:980px}
@media (min-width:900px){.ot-steps--3{grid-template-columns:repeat(3,1fr)}}

/* the Designs page filters (v212), over the real catalogue built by scripts/build-collection-page.cjs */
.ot-dfilter{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:22px 0 0;padding:14px 0 0;border-top:1px solid var(--ot-line)}
.ot-dfilter fieldset{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border:0;margin:0;padding:0}
.ot-dfilter legend{float:left;margin-right:6px;font:500 12px/44px var(--ot-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ot-gold-ink)}
.ot-chip{position:relative;display:inline-flex}
.ot-chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.ot-chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--ot-line-strong);border-radius:999px;background:var(--ot-card);font:500 13.5px/1 var(--ot-sans);color:var(--ot-ink)}
.ot-chip input:checked+span{background:var(--ot-forest);border-color:var(--ot-forest);color:var(--ot-on-forest)}
.ot-chip input:focus-visible+span{outline:2px solid var(--ot-forest);outline-offset:3px}
.ot-dfilter-bar{display:flex;align-items:center;gap:14px;margin:0 0 0 auto;font-size:14px;color:var(--ot-muted)}
.ot-dfilter-empty{margin:20px 0 0;padding:20px;border:1px dashed var(--ot-line-strong);border-radius:var(--ot-r-card);text-align:center}
body.ot-site .sx-look-sec[hidden]{display:none!important}

/* web-design-guidelines pass (v212): touch handling, tabular prices, contained overlays, full-size caption links */
body.ot-site{-webkit-tap-highlight-color:rgba(31,58,44,.12)}
body.ot-site :is(a,button,summary,label,input){touch-action:manipulation}
body.ot-site :is(.ot-price b,.sx-look-price,.ot-num-big){font-variant-numeric:tabular-nums lining-nums}
.ot-lightbox,.ot-menu{overscroll-behavior:contain}
.ot-caption .ot-link{display:inline-flex;min-height:44px;align-items:center}

/* motion-design pass (v212): one "Premium" personality. Signature ease-out (0.16,1,0.3,1) for entrances; three durations:
   quick 150ms (hover/press), standard 600ms (reveals), slow 1200ms (the hero settle). Transform and opacity only.
   Stagger stays under 400ms. Nothing moves with reduced motion. No loops on the page, so no pause controls are needed. */
.ot-btn{transition-duration:.15s}
@media (prefers-reduced-motion:no-preference){
  .ot-js .ot-reveal{transition:opacity .6s var(--ot-ease),transform .6s var(--ot-ease);transform:translateY(14px)}
  .ot-js .ot-reveal :is(.ot-trio figure,.ot-tiles .ot-tile,.ot-steps li,.ot-pkg,.ot-inc-list li){opacity:0;transform:translateY(10px);transition:opacity .6s var(--ot-ease),transform .6s var(--ot-ease)}
  .ot-js .ot-reveal.is-in :is(.ot-trio figure,.ot-tiles .ot-tile,.ot-steps li,.ot-pkg,.ot-inc-list li){opacity:1;transform:none}
  .ot-js .ot-reveal.is-in :is(.ot-trio figure,.ot-tiles .ot-tile,.ot-steps li,.ot-pkg):nth-child(2){transition-delay:.08s}
  .ot-js .ot-reveal.is-in :is(.ot-trio figure,.ot-tiles .ot-tile,.ot-steps li):nth-child(3){transition-delay:.16s}
  .ot-js .ot-reveal.is-in .ot-tiles .ot-tile:nth-child(4){transition-delay:.24s}
  .ot-js .ot-reveal.is-in .ot-inc-list li:nth-child(n+3){transition-delay:.12s}
  .ot-js .ot-reveal.is-in .ot-inc-list li:nth-child(n+5){transition-delay:.2s}
  .ot-js .ot-reveal.is-in .ot-inc-list li:nth-child(n+7){transition-delay:.28s}
  .ot-hero-copy>:not(h1){animation:ot-rise .7s var(--ot-ease) both}
  .ot-hero-copy>:nth-child(2){animation-delay:.12s}.ot-hero-copy>:nth-child(3){animation-delay:.22s}
  /* the hero settle was removed after the speed gate: an animated LCP picture is only counted when it stops (LCP 2.6 s) */
  @keyframes ot-settle{from{transform:scale(1.03)}}
  .ot-cardprint{transition:opacity .5s var(--ot-ease) .3s;opacity:0}
  .ot-cardprint.is-on{opacity:1}
}
.ot-shot .ot-reveal :is(.ot-trio figure,.ot-tiles .ot-tile,.ot-steps li,.ot-pkg,.ot-inc-list li){opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){.ot-hero-media img,.ot-hero-copy>*{animation:none!important}}

/* impeccable polish (v212): the browser surfaces carry the palette, and the hero words keep their contrast over the picture */
html:has(body.ot-site){scrollbar-color:var(--ot-gold-soft) var(--ot-ivory);accent-color:var(--ot-forest)}
body.ot-site{caret-color:var(--ot-forest)}
body.ot-site main p a:not([class]),body.ot-site .ot-pkgs-note a{text-underline-offset:.22em;text-decoration-thickness:1px;text-decoration-color:var(--ot-gold)}
@media (min-width:768px){
  .ot-hero::after{background:radial-gradient(ellipse 52% 50% at 50% 46%,rgba(251,247,241,.9) 0%,rgba(251,247,241,.72) 48%,rgba(251,247,241,0) 80%),
    linear-gradient(180deg,rgba(251,247,241,.4) 0%,rgba(251,247,241,0) 22%)}
}

/* emil-design-eng pass (v212): firmer press feedback, hover motion only on real pointers, gentle opacity under reduced motion */
.ot-btn:active,.ot-chip:active span{transform:scale(.97)}
.ot-chip span{transition:transform .16s var(--ot-ease),background-color .15s ease,border-color .15s ease,color .15s ease}
@media not all and (hover:hover) and (pointer:fine){.ot-tile:hover .ot-tile-img img{transform:none}}
@media (prefers-reduced-motion:reduce){
  .ot-js .ot-reveal{opacity:0;transition:opacity .4s ease}
  .ot-js .ot-reveal.is-in{opacity:1}
}

/* ---------- round 2 (v212): the owner's sheet, page by page ---------- */
/* two phones side by side in a showcase (features): in the flow, not the single overlapping phone above */
.ot-showcase-art.ot-phones{display:flex;gap:18px;justify-content:center;align-items:flex-start}
.ot-showcase-art.ot-phones .ot-phone{position:relative;right:auto;bottom:auto;width:min(46%,230px);max-width:none}
.ot-phone--low{margin-top:48px}
.ot-steps--2{max-width:860px;margin-left:auto;margin-right:auto}
@media (min-width:900px){.ot-steps--2{grid-template-columns:1fr 1fr}}
.ot-values--2{max-width:960px;margin-left:auto;margin-right:auto}
@media (min-width:900px){.ot-values--2{grid-template-columns:1fr 1fr}}
ul.ot-frows{list-style:none;padding:0}
.ot-frow{align-items:start}
.ot-frow .ot-icon{grid-row:span 2;font-size:28px;color:var(--ot-gold-ink);margin-top:2px}
.ot-frow b{font:500 19px/1.35 var(--ot-serif);color:var(--ot-ink)}
.ot-ribbon{list-style:none;margin:40px 0 0;padding:4px 4px 18px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.ot-ribbon li{scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.ot-ribbon .when{font-size:12.5px;color:var(--ot-muted)}
.ot-ribbon b{font:500 19px/1.2 var(--ot-serif);color:var(--ot-ink);margin-bottom:10px}
.ot-ribbon .ot-phone{width:100%;max-width:180px}
.ot-ribbon li.pass b{color:var(--ot-gold-ink)}
.ot-ribbon li.pass .ot-phone{box-shadow:0 0 0 2px var(--ot-gold-soft),var(--ot-shadow)}
.ot-key{display:inline-flex;align-items:center;gap:6px;margin-right:14px}
.ot-key i{width:12px;height:12px;border-radius:50%;background:var(--ot-sage)}.ot-key i.p{background:var(--ot-gold-soft)}
.ot-plain{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:22px 40px}
.ot-plain li{padding-top:18px;border-top:1px solid var(--ot-line)}
.ot-plain b{display:block;font:500 21px/1.25 var(--ot-serif);color:var(--ot-ink)}
.ot-plain p{margin:6px 0 0;font-size:15px}
@media (min-width:760px){.ot-plain{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.ot-plain{grid-template-columns:1fr 1fr 1fr}}
.ot-pkg h2.ot-pkg-name,.ot-pkg h3.ot-pkg-name{margin:0}
.ot-status{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;margin-bottom:16px;border-radius:999px;background:var(--ot-blush);color:var(--ot-rose-ink);font:500 13px/1 var(--ot-sans)}
.ot-aff-stage{position:relative}
.ot-aff-card{position:absolute;left:-18px;bottom:28px;max-width:260px;padding:18px 20px;background:var(--ot-card);border-radius:var(--ot-r-card);box-shadow:var(--ot-shadow)}
.ot-aff-card p{margin:6px 0 10px}
.ot-aff-code{display:inline-flex;padding:6px 10px;border:1px dashed var(--ot-gold);border-radius:6px;font:500 12px/1 var(--ot-sans);letter-spacing:.08em;color:var(--ot-gold-ink)}
.ot-aff-slip{position:absolute;right:-12px;top:24px;display:grid;gap:2px;padding:14px 16px;background:var(--ot-forest-deep);color:var(--ot-on-forest);border-radius:12px;box-shadow:var(--ot-shadow)}
.ot-aff-slip strong{font:500 30px/1 var(--ot-serif)}
.ot-aff-slip small{font-size:11.5px;opacity:.85}
@media (max-width:999px){.ot-aff-card{position:static;margin-top:-40px;margin-left:14px}.ot-aff-slip{right:10px}}
.ot-calc{margin-top:36px;display:grid;gap:24px;padding:28px;background:var(--ot-card);border-radius:var(--ot-r-card);outline:1px solid var(--ot-line);outline-offset:-1px}
.ot-calc .fields{display:grid;gap:4px 16px}
.ot-calc output{display:block;font:500 46px/1.1 var(--ot-serif);color:var(--ot-forest);margin:6px 0}
@media (min-width:860px){.ot-calc{grid-template-columns:1.4fr 1fr;align-items:end}.ot-calc .fields{grid-template-columns:1fr 1fr 1fr}}
.ot-field select{min-height:50px;padding:10px 12px;border:1px solid var(--ot-line-strong);border-radius:var(--ot-r-btn);background:var(--ot-card);color:var(--ot-ink);font:400 16px/1.3 var(--ot-sans)}
/* the Designs grid */
.ot-catalog-main .sx-look-sec{padding:0;margin:0 0 44px;background:none}
.ot-dgroup-head{display:grid;gap:6px;margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--ot-line)}
.ot-dgroup-head p{margin:0}
.ot-catalog-main ul.ot-cards{list-style:none;margin:0;padding:0}
.ot-card figure{margin:0;display:flex;flex-direction:column;height:100%}
.ot-card figcaption h3{margin:14px 0 0;font:500 22px/1.2 var(--ot-serif);color:var(--ot-ink)}
.ot-card figcaption p{margin:8px 0 0;font-size:13.5px;line-height:1.55}
.ot-card .ot-card-links{display:flex;flex-wrap:wrap;gap:0 16px;margin-top:6px}
.ot-card .ot-card-links a{display:inline-flex;align-items:center;min-height:44px;font:500 13.5px/1 var(--ot-sans);color:var(--ot-forest)}
.ot-card .ot-tile-img img{object-position:50% 0}
.ot-openings{list-style:none;margin:36px auto 0;padding:0;max-width:980px;display:grid;gap:10px}
.ot-openings a{display:flex;min-height:44px;padding:14px 18px;border-radius:var(--ot-r-card);background:var(--ot-card);outline:1px solid var(--ot-line);outline-offset:-1px;text-decoration:none;color:var(--ot-text)}
.ot-openings a b{font:500 19px/1.2 var(--ot-serif);color:var(--ot-ink);margin-right:10px}
.ot-openings a span span{display:block;font-size:14px}
@media (min-width:860px){.ot-openings{grid-template-columns:1fr 1fr}}
/* v200's page stylesheet still loads on these pages: keep its body rules from fighting the Garden sections */
body.ot-site.sx main .ot-section h2,body.ot-site.sx main .ot-pagehead h1{font-family:var(--ot-serif)}
/* the Designs grid wins over v200's lookbook spread (round 2) */
body.ot-site .ot-catalog-main ul.sx-look.ot-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 16px}
body.ot-site .ot-catalog-main ul.sx-look.ot-cards>li{grid-column:auto;margin:0;transform:none}
@media (min-width:700px){body.ot-site .ot-catalog-main ul.sx-look.ot-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 22px}}
body.ot-site .ot-pro-block :is(p,li p){color:rgba(246,241,231,.86)}
body.ot-site .ot-pro-block :is(h2,h3,b){color:var(--ot-on-forest)}
.ot-pro-grid .ot-icon{grid-row:span 2;font-size:28px;color:var(--ot-gold-soft);margin-top:2px}
.ot-pro-grid li>p{grid-column:2}
.ot-frow>p{grid-column:2}
/* usability brief (24 Oct 2026): practical text is at least 14px on every themed page (footer, small notes, the start button) */
.ot-foot h3{font-size:13px}
.ot-foot-bottom{font-size:14px}
.ot-foot-legal{font-size:13.5px}
.ot-small{font-size:14px}
.ot-btn-sm{font-size:14px}
.ot-check small{font-size:14px}
body.ot-site .ot-nav .ot-start{font-size:14px}
/* "Prices in" (js/occasi-currency.js, v285 decision C): a quiet pill in the footer, 44px touch target. */
.ot-foot-bottom .oc-currency{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;color:var(--ot-muted)}
.ot-foot-bottom .oc-currency select{min-height:36px;border:1px solid var(--ot-line);border-radius:999px;background:var(--ot-card);color:var(--ot-ink);padding:0 12px;font:inherit}
/* The currency line under the prices (js/occasi-currency.js): "Prices in £ · Show in US$, C$, A$, NZ$ or €". */
.oc-currency-line{margin:18px auto 0;max-width:var(--ot-max);text-align:center;font-size:14px;line-height:1.5;color:var(--ot-muted)}
.oc-currency-line button{position:relative;display:inline;margin:0;padding:0 1px;border:0;background:none;font:inherit;color:var(--ot-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* a 44px tap area around each sign, without spacing the words apart */
.oc-currency-line button::before{content:"";position:absolute;top:50%;left:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}