/* ═══════════════════════════════════════════════════════════
   ON CALL EVENTS — MIDDLE CSS (3D cloth hero, marquee, about, Core Collection, Linen Library, How It Works, contact)
   WordPress (WPCode): paste this whole file into a CSS snippet.
   Do NOT add <style> tags — WPCode adds them for you.
   ═══════════════════════════════════════════════════════════ */

/* base tokens (duplicated per part on purpose — harmless in WP) */
.oce {
  --oce-ivory: #faf7f0; --oce-ivory2: #f1ecdf; --oce-ink: #131110; --oce-ink2: #221e19;
  --oce-soft: #57503f; --oce-gold: #b98a2e; --oce-gold2: #dcb96e; --oce-champagne: #f2dcae;
  --oce-line: rgba(19,17,16,0.1);
  --oce-gold-ink: #8a6519; --oce-gold-head: #a1761f;
  --oce-serif: "Cormorant Garamond", Georgia, serif;
  --oce-sans: "Outfit", -apple-system, "Segoe UI", sans-serif;
  --oce-ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--oce-sans); font-weight: 300; color: var(--oce-ink);
  line-height: 1.65; font-size: 16px; -webkit-font-smoothing: antialiased;
}
.oce-m *, .oce-m *::before, .oce-m *::after { margin: 0; padding: 0; box-sizing: border-box; }
.oce h1, .oce h2, .oce h3 { font-family: var(--oce-serif); font-weight: 600; line-height: 1.06; letter-spacing: -0.01em; }
.oce h1 em, .oce h2 em { font-style: italic; color: var(--oce-gold-head); }
.oce a { color: inherit; text-decoration: none; }
.oce button { font-family: inherit; cursor: pointer; }
.oce ::selection { background: var(--oce-gold2); color: var(--oce-ink); }
.oce .oce-kicker {
  font-size: 0.7rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--oce-gold-ink); font-weight: 600; display: inline-flex; align-items: center; gap: 0.9rem;
}
.oce .oce-kicker::before { content: ""; width: 2.2rem; height: 1px; background: currentColor; opacity: 0.5; }
.oce .oce-btn {
  position: relative; display: inline-block; padding: 1rem 2.6rem; border-radius: 100px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid transparent; overflow: hidden; will-change: transform;
  transition: transform 0.5s var(--oce-ease), box-shadow 0.5s var(--oce-ease), background 0.3s, color 0.3s;
}
.oce .oce-btn--gold {
  background: linear-gradient(120deg, var(--oce-gold) 0%, var(--oce-gold2) 55%, var(--oce-gold) 100%);
  background-size: 200% 100%; color: #fff; box-shadow: 0 14px 34px -12px rgba(185,138,46,0.6);
}
.oce .oce-btn--gold:hover { background-position: 100% 0; box-shadow: 0 20px 44px -12px rgba(185,138,46,0.72); }
.oce .oce-reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--oce-ease), transform 1s var(--oce-ease); }
.oce .oce-reveal.oce-in { opacity: 1; transform: none; }

.oce .oce-btn--ghost { border-color: rgba(250,247,240,0.4); color: var(--oce-ivory); }
.oce .oce-btn--ghost:hover { background: var(--oce-ivory); color: var(--oce-ink); border-color: var(--oce-ivory); }

.oce .oce-kicker--light { color: var(--oce-gold2); }
.oce .oce-btn--full { width: 100%; border: 0; }

/* ── Hero with 3D cloth canvas ────────────────────────────── */
.oce-hero {
  position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--oce-ivory); overflow: hidden;
  touch-action: pan-y; /* touch: vertical swipes scroll, horizontal drags play with the cloth */
  -webkit-user-select: none; user-select: none; /* dragging the silk shouldn't select the headline */
  background:
    radial-gradient(1100px 520px at 72% -6%, rgba(185, 138, 46, 0.16), transparent 60%),
    linear-gradient(165deg, #1a1712 0%, #262019 48%, #131110 100%);
}
/* the canvas is fixed to the viewport so the gold silk can follow you
   down the page; it ignores the pointer entirely (content stays clickable) */
.oce-hero__canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 5; pointer-events: none; }
.oce-hero__veil {
  position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background: radial-gradient(60% 55% at 50% 46%, rgba(19,17,16,0.55), rgba(19,17,16,0.05) 62%, rgba(19,17,16,0.35) 100%);
}
.oce-hero__grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 7; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.oce-hero__inner { position: relative; z-index: 10; max-width: 62rem; padding: 7.5rem 1.5rem 4.5rem; }
.oce-hero__eyebrow {
  font-size: 0.7rem; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--oce-gold2); font-weight: 500; margin-bottom: 1.8rem;
  opacity: 0; animation: oceFade 1.4s var(--oce-ease) 0.35s forwards;
}
.oce-hero__title { font-size: clamp(3.1rem, 9vw, 6.9rem); font-weight: 500; }
.oce-hero__line { display: block; overflow: hidden; padding-bottom: 0.22em; margin-bottom: -0.22em; }
.oce-hero__line > span { display: inline-block; transform: translateY(112%); animation: oceRise 1.2s var(--oce-ease) forwards; }
.oce-hero__line:nth-child(2) > span { animation-delay: 0.16s; }
.oce-hero__accent {
  font-style: italic;
  background: linear-gradient(115deg, var(--oce-gold2) 10%, var(--oce-champagne) 45%, var(--oce-gold2) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.oce-hero__sub {
  max-width: 37rem; margin: 1.9rem auto 2.8rem; color: rgba(250, 247, 240, 0.72);
  font-size: 1.06rem; font-weight: 300;
  opacity: 0; animation: oceFade 1.4s var(--oce-ease) 0.6s forwards;
}
.oce-hero__actions {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
  opacity: 0; animation: oceFade 1.4s var(--oce-ease) 0.8s forwards;
}
.oce-hero__scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 10;
  width: 1.4rem; height: 2.4rem; border: 1px solid rgba(250,247,240,0.35); border-radius: 100px;
}
.oce-hero__scroll span {
  position: absolute; top: 0.45rem; left: 50%; width: 3px; height: 6px; margin-left: -1.5px;
  border-radius: 3px; background: var(--oce-gold2); animation: oceScrollDot 1.9s ease-in-out infinite;
}
@keyframes oceRise { to { transform: translateY(0); } }
@keyframes oceFade { to { opacity: 1; } }
@keyframes oceScrollDot { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(0.85rem); opacity: 0; } 100% { opacity: 0; } }

/* ── Marquee divider ─────────────────────────────────────── */
.oce-marquee {
  background: var(--oce-ink); color: rgba(250,247,240,0.82); overflow: hidden;
  padding: 0.95rem 0; font-family: var(--oce-serif); font-style: italic;
  font-size: 1.08rem; letter-spacing: 0.08em;
  border-top: 1px solid rgba(220,185,110,0.25); border-bottom: 1px solid rgba(220,185,110,0.25);
}
.oce-marquee__track { display: flex; width: max-content; animation: oceMarquee 38s linear infinite; }
.oce-marquee__track span { white-space: nowrap; }
@keyframes oceMarquee { to { transform: translateX(-50%); } }

/* ── Statement / about ───────────────────────────────────── */
.oce-statement { background: var(--oce-ivory); padding: clamp(5.5rem, 11vw, 9rem) clamp(1.25rem, 6vw, 6rem); }
.oce-statement__grid { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.oce-statement h2 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); margin-top: 1.4rem; }
.oce-statement__copy { padding-top: 1rem; }
.oce-statement__copy p { color: var(--oce-soft); margin-bottom: 1.2rem; max-width: 30rem; }
.oce-statement__copy strong { font-weight: 500; color: var(--oce-ink); }
.oce-stats { max-width: 1360px; margin: clamp(3rem, 7vw, 5.5rem) auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; border-top: 1px solid var(--oce-line); padding-top: 2.6rem; text-align: left; }
.oce-stat__num { font-family: var(--oce-serif); font-size: clamp(2.6rem, 5vw, 3.8rem); font-weight: 600; color: var(--oce-gold); display: block; line-height: 1; }
.oce-stat__label { font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--oce-soft); }

/* ── Core collection (dark band) ─────────────────────────── */
.oce-core {
  background:
    radial-gradient(900px 460px at 85% 0%, rgba(185,138,46,0.14), transparent 60%),
    linear-gradient(170deg, #191612, #24201a 55%, #131110);
  color: var(--oce-ivory);
  padding: clamp(5.5rem, 11vw, 9rem) clamp(1.25rem, 6vw, 6rem);
}
.oce-core__head { max-width: 1360px; margin: 0 auto clamp(2.8rem, 6vw, 4.5rem); display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.oce-core__head h2 { color: var(--oce-ivory); font-size: clamp(2.6rem, 5.4vw, 4.4rem); margin-top: 1.4rem; }
.oce-core__head h2 em { color: var(--oce-gold2); }
.oce-core__lede { color: rgba(250,247,240,0.65); max-width: 24rem; padding-bottom: 0.6rem; }
/* desktop: 4 columns — four singles on top, two double-wide tents below (4×2);
   tablet / half screen: 2 columns, every card single (3 rows of 2);
   mobile: 1 column */
.oce-core__grid { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.oce-piece--wide { grid-column: span 2; }
@media (max-width: 1160px) {
  .oce-core__grid { grid-template-columns: repeat(2, 1fr); }
  .oce-piece--wide { grid-column: auto; }
}
@media (max-width: 640px) {
  .oce-core__grid { grid-template-columns: 1fr; }
}
/* wide tent cards get an editorial side-by-side layout on desktop */
@media (min-width: 1161px) {
  .oce-piece--wide { display: grid; grid-template-columns: 250px 1fr; column-gap: 2.4rem; align-items: start; }
  .oce-piece--wide .oce-piece__art { grid-row: 1 / span 4; height: 140px; margin: 0; align-self: center; justify-self: center; }
}
.oce-piece {
  position: relative; border: 1px solid rgba(250,247,240,0.12); border-radius: 22px;
  padding: 2.2rem 2rem 2rem; background: rgba(255,255,255,0.03); overflow: hidden;
  transition: transform 0.15s ease-out, border-color 0.4s, background 0.4s, box-shadow 0.5s var(--oce-ease);
  transform-style: preserve-3d; will-change: transform;
}
.oce-piece:hover { border-color: rgba(220,185,110,0.5); background: rgba(255,255,255,0.05); box-shadow: 0 30px 70px -30px rgba(0,0,0,0.7); }
.oce-piece__index {
  position: absolute; top: 1.5rem; right: 1.7rem;
  font-family: var(--oce-serif); font-style: italic; font-size: 1rem; color: rgba(220,185,110,0.55);
}
.oce-piece__art { height: 96px; margin-bottom: 1.4rem; display: flex; align-items: flex-end; }
.oce-piece__art svg { height: 100%; width: auto; overflow: visible; }
.oce-piece__art path, .oce-piece__art ellipse, .oce-piece__art line, .oce-piece__art rect {
  fill: none; stroke: var(--oce-gold2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 400; stroke-dashoffset: 400;
}
.oce-piece.oce-in path, .oce-piece.oce-in ellipse, .oce-piece.oce-in line, .oce-piece.oce-in rect {
  animation: oceDraw 2.2s var(--oce-ease) forwards;
}
@keyframes oceDraw { to { stroke-dashoffset: 0; } }
.oce-piece h3 { font-size: 1.65rem; color: var(--oce-ivory); margin-bottom: 0.35rem; }
.oce-piece__spec { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oce-gold2); font-weight: 600; margin-bottom: 0.8rem; }
.oce-piece p { font-size: 0.92rem; color: rgba(250,247,240,0.62); }
.oce-piece__pair {
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid rgba(250,247,240,0.1);
  font-size: 0.78rem; color: rgba(250,247,240,0.66); display: flex; align-items: center; gap: 0.5rem;
}
.oce-piece__pair::before { content: "✦"; color: var(--oce-gold2); font-size: 0.65rem; }
.oce-core__cta { max-width: 1360px; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; text-align: center; }

/* ── Linen library ───────────────────────────────────────── */
.oce-linens { background: var(--oce-ivory); padding: clamp(5.5rem, 11vw, 9rem) clamp(1.25rem, 6vw, 6rem); }
.oce-linens__head { max-width: 1360px; margin: 0 auto clamp(2.4rem, 5vw, 3.6rem); text-align: center; }
.oce-linens__head h2 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); margin-top: 1.4rem; }
.oce-linens__sub { color: var(--oce-soft); max-width: 36rem; margin: 1.1rem auto 0; }
.oce-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin: 0 auto 2.6rem; max-width: 1360px; }
.oce-filter {
  padding: 0.62rem 1.45rem; border-radius: 100px; border: 1px solid var(--oce-line);
  background: transparent; color: var(--oce-soft); font-size: 0.79rem; font-weight: 500; letter-spacing: 0.06em;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s var(--oce-ease);
}
.oce-filter:hover { border-color: var(--oce-gold); color: var(--oce-gold); transform: translateY(-2px); }
.oce-filter.oce-active { background: var(--oce-ink); color: var(--oce-ivory); border-color: var(--oce-ink); }
.oce-linens__grid { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.3rem; }
.oce-linen {
  background: #fff; border: 1px solid var(--oce-line); border-radius: 20px; overflow: hidden;
  transition: transform 0.5s var(--oce-ease), box-shadow 0.5s var(--oce-ease);
}
.oce-linen:hover { transform: translateY(-6px); box-shadow: 0 26px 60px -26px rgba(19,17,16,0.28); }
.oce-linen.oce-hidden { display: none; }
.oce-linen__head { padding: 1.5rem 1.6rem 0.85rem; display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.oce-linen__head h3 { font-size: 1.35rem; }
.oce-linen__tag {
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  color: var(--oce-gold); background: rgba(185,138,46,0.1); padding: 0.32rem 0.72rem; border-radius: 100px; white-space: nowrap;
}
.oce-linen__body { padding: 0 1.6rem 1.6rem; }
.oce-linen__desc { font-size: 0.88rem; color: var(--oce-soft); margin-bottom: 1rem; }
.oce-swatches { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.oce-swatch { position: relative; display: grid; place-items: center; }
.oce-swatch__dot {
  width: 2.15rem; height: 2.15rem; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--oce-line), 0 3px 8px rgba(19,17,16,0.15);
  transition: transform 0.3s var(--oce-ease);
}
.oce-swatch:hover .oce-swatch__dot { transform: scale(1.3); }
.oce-swatch__tip {
  position: absolute; bottom: calc(100% + 0.55rem); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--oce-ink); color: var(--oce-ivory); font-size: 0.67rem; font-weight: 500;
  letter-spacing: 0.04em; padding: 0.35rem 0.7rem; border-radius: 8px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s var(--oce-ease); z-index: 5;
}
.oce-swatch__tip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -4px; border: 4px solid transparent; border-top-color: var(--oce-ink); }
.oce-swatch:hover .oce-swatch__tip, .oce-swatch:focus-within .oce-swatch__tip { opacity: 1; transform: translateX(-50%) translateY(0); }
.oce-list { list-style: none; display: grid; gap: 0.45rem; }
.oce-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 0.89rem; padding: 0.55rem 0.9rem; border-radius: 10px; background: var(--oce-ivory); }
.oce-list .oce-qty { font-size: 0.67rem; font-weight: 600; letter-spacing: 0.08em; color: var(--oce-gold); white-space: nowrap; }

/* ── Process ─────────────────────────────────────────────── */
.oce-process { background: var(--oce-ivory2); padding: clamp(5.5rem, 11vw, 9rem) clamp(1.25rem, 6vw, 6rem); }
.oce-process__head { max-width: 1360px; margin: 0 auto clamp(2.6rem, 5vw, 4rem); text-align: center; }
.oce-process__head h2 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); margin-top: 1.4rem; }
.oce-steps { list-style: none; max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.3rem; }
.oce-step {
  position: relative; background: #fff; border: 1px solid var(--oce-line); border-radius: 22px;
  padding: 2.8rem 2.1rem 2.3rem; overflow: hidden;
  transition: transform 0.5s var(--oce-ease), box-shadow 0.5s var(--oce-ease);
}
.oce-step:hover { transform: translateY(-8px); box-shadow: 0 26px 60px -26px rgba(19,17,16,0.28); }
.oce-step__num {
  font-family: var(--oce-serif); font-style: italic; font-size: 5rem; line-height: 1;
  position: absolute; top: 0.5rem; right: 1.2rem; color: rgba(185,138,46,0.14); font-weight: 600;
}
.oce-step h3 { font-size: 1.55rem; margin-bottom: 0.6rem; }
.oce-step p { color: var(--oce-soft); font-size: 0.94rem; }

@media (max-width: 900px) {
  .oce-statement__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .oce .oce-reveal, .oce-hero__eyebrow, .oce-hero__sub, .oce-hero__actions { opacity: 1; transform: none; }
  .oce-hero__line > span { transform: none; }
  .oce-marquee__track { animation: none; }
  .oce-piece__art path, .oce-piece__art ellipse, .oce-piece__art line, .oce-piece__art rect { stroke-dashoffset: 0; animation: none; }
}

/* ── Contact ─────────────────────────────────────────────── */
.oce-contact { background: var(--oce-ivory); padding: clamp(4.5rem, 9vw, 7.5rem) clamp(1.25rem, 6vw, 6rem); }
.oce-contact__panel {
  max-width: 1360px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem);
  background:
    radial-gradient(800px 400px at 90% 0%, rgba(220,185,110,0.16), transparent 60%),
    linear-gradient(160deg, #1a1712, #262019);
  color: var(--oce-ivory); border-radius: 30px; padding: clamp(2.2rem, 5vw, 4.5rem);
  box-shadow: 0 40px 90px -40px rgba(19,17,16,0.5);
}
.oce-contact__copy h2 { color: var(--oce-ivory); font-size: clamp(2.4rem, 4.6vw, 3.8rem); margin: 1.2rem 0 1rem; }
.oce-contact__copy h2 em { color: var(--oce-gold2); }
.oce-contact__copy p { color: rgba(250,247,240,0.7); max-width: 26rem; }
.oce-contact__form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-content: start; }
.oce-field { position: relative; grid-column: span 2; }
.oce-field--half { grid-column: span 1; }
.oce-field input, .oce-field textarea {
  width: 100%; padding: 1.05rem 1.2rem; border-radius: 14px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  color: var(--oce-ivory); font-family: inherit; font-size: 0.95rem; font-weight: 300;
  transition: border-color 0.3s, background 0.3s; resize: vertical;
}
.oce-field input:focus, .oce-field textarea:focus { outline: none; border-color: var(--oce-gold2); background: rgba(255,255,255,0.1); }
.oce-field label {
  position: absolute; left: 1.2rem; top: 1.05rem; font-size: 0.9rem;
  color: rgba(250,247,240,0.72); pointer-events: none; transition: all 0.25s var(--oce-ease);
}
.oce-field input:focus + label, .oce-field input:not(:placeholder-shown) + label,
.oce-field textarea:focus + label, .oce-field textarea:not(:placeholder-shown) + label,
.oce-field .oce-label--static {
  top: -0.55rem; left: 0.9rem; font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--oce-gold2); background: #221e17; padding: 0 0.5rem; border-radius: 4px;
}
.oce-field input[type="date"] { color-scheme: dark; }
.oce-contact__form .oce-btn { grid-column: span 2; margin-top: 0.4rem; }
.oce-form__note { grid-column: span 2; font-size: 0.8rem; color: var(--oce-gold2); min-height: 1.2em; text-align: center; }

@media (max-width: 860px) {
  .oce-contact__panel { grid-template-columns: 1fr; }
}


/* ── Setup Studio (3D builder) ───────────────────────────── */
.oce-builder {
  background:
    radial-gradient(900px 460px at 12% 0%, rgba(185,138,46,0.12), transparent 60%),
    linear-gradient(170deg, #191612, #24201a 55%, #131110);
  color: var(--oce-ivory);
  padding: clamp(5.5rem, 11vw, 9rem) clamp(1.25rem, 6vw, 6rem);
}
.oce-builder__head { max-width: 1360px; margin: 0 auto clamp(2.4rem, 5vw, 3.5rem); text-align: center; }
.oce-builder__head h2 { color: var(--oce-ivory); font-size: clamp(2.6rem, 5.4vw, 4.4rem); margin-top: 1.4rem; }
.oce-builder__head h2 em { color: var(--oce-gold2); }
.oce-builder__sub { color: rgba(250,247,240,0.65); max-width: 37rem; margin: 1rem auto 0; }
.oce-builder__frame { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: 1.7fr 1fr; gap: 1.3rem; align-items: stretch; }
.oce-builder__stage {
  position: relative; border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(250,247,240,0.14); background: #f3eee2;
  height: clamp(420px, 58vh, 640px);
}
.oce-builder__stage canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; }
.oce-builder__hint {
  position: absolute; left: 1.1rem; bottom: 0.9rem; pointer-events: none;
  font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(19,17,16,0.66);
}
.oce-builder__zoom { position: absolute; right: 1rem; bottom: 0.8rem; display: flex; gap: 0.4rem; }
.oce-builder__zoom button {
  width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid rgba(19,17,16,0.22);
  background: rgba(255,255,255,0.78); color: #131110; font-size: 1.15rem; line-height: 1;
  transition: background 0.3s, transform 0.3s var(--oce-ease);
}
.oce-builder__zoom button:hover { background: #fff; transform: scale(1.08); }
.oce-builder__loading {
  position: absolute; inset: 0; display: grid; place-items: center; background: #f3eee2;
  color: #57503f; font-family: var(--oce-serif); font-style: italic; font-size: 1.3rem; text-align: center; padding: 1rem;
}
.oce-builder__panel {
  border: 1px solid rgba(250,247,240,0.14); border-radius: 22px; padding: 1.7rem 1.5rem;
  background: rgba(255,255,255,0.03); display: flex; flex-direction: column; gap: 1.15rem;
}
.oce-bgroup h3 {
  font-family: var(--oce-sans); font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--oce-gold2); font-weight: 600; margin-bottom: 0.55rem;
}
.oce-brow { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.oce-bchip {
  padding: 0.42rem 0.95rem; border-radius: 100px; border: 1px solid rgba(250,247,240,0.22);
  background: transparent; color: rgba(250,247,240,0.75); font-size: 0.78rem; font-weight: 500;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.oce-bchip:hover { border-color: var(--oce-gold2); color: var(--oce-gold2); }
.oce-bchip.oce-on { background: var(--oce-gold2); border-color: var(--oce-gold2); color: #131110; font-weight: 600; }
.oce-bdot {
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4); box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
  transition: transform 0.25s var(--oce-ease), box-shadow 0.25s;
}
.oce-bdot:hover { transform: scale(1.2); }
.oce-bdot.oce-on { box-shadow: 0 0 0 2px var(--oce-gold2); transform: scale(1.12); }
.oce-bstep {
  width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid rgba(250,247,240,0.25);
  background: transparent; color: rgba(250,247,240,0.85); font-size: 1.05rem; line-height: 1;
  transition: border-color 0.25s, color 0.25s, transform 0.25s var(--oce-ease);
}
.oce-bstep:hover:not(:disabled) { border-color: var(--oce-gold2); color: var(--oce-gold2); transform: scale(1.1); }
.oce-bstep:disabled { opacity: 0.3; cursor: default; }
.oce-bstep__val {
  min-width: 7.5rem; text-align: center; align-self: center;
  font-size: 0.85rem; color: rgba(250,247,240,0.85); letter-spacing: 0.02em;
}
.oce-bdot--none { background: transparent; position: relative; }
.oce-bdot--none::after {
  content: ""; position: absolute; left: 14%; top: 45%; width: 72%; height: 2px;
  background: rgba(250,247,240,0.6); transform: rotate(-45deg);
}
.oce-builder__summary {
  font-size: 0.85rem; color: rgba(250,247,240,0.68); line-height: 1.5;
  border-top: 1px solid rgba(250,247,240,0.12); padding-top: 1rem; min-height: 2.6em; margin-top: auto;
}
@media (max-width: 1020px) {
  .oce-builder__frame { grid-template-columns: 1fr; }
  .oce-builder__stage { height: clamp(340px, 52vh, 520px); }
}

/* content rides above the fixed cloth canvas (z-index 5): the gold
   silk weaves BEHIND cards and copy, never over them */
.oce-statement__grid, .oce-stats,
.oce-core__head, .oce-core__grid, .oce-core__cta,
.oce-linens__head, .oce-filters, .oce-linens__grid,
.oce-process__head, .oce-steps,
.oce-builder__head, .oce-builder__frame,
.oce-contact__panel { position: relative; z-index: 6; }

/* keyboard focus is always visible (WCAG 2.4.7) */
.oce a:focus-visible, .oce button:focus-visible, .oce input:focus-visible,
.oce textarea:focus-visible, .oce [tabindex]:focus-visible {
  outline: 3px solid #b98a2e; outline-offset: 2px; border-radius: 4px;
}