/* ═══════════════════════════════════════════════════════════
   ON CALL EVENTS — HEADER CSS (sticky navigation bar — logo + menu)
   WordPress (WP Coder): paste this whole file into a CSS snippet.
   Do NOT add <style> tags — WP Coder adds them for you.
   ═══════════════════════════════════════════════════════════ */

/* ── OCE base tokens (safe to duplicate across parts) ─────── */
.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-h *, .oce-h *::before, .oce-h *::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-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-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; }

/* ── Nav ──────────────────────────────────────────────────── */
.oce-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem clamp(1.25rem, 5vw, 4.5rem);
  /* viewport-fit=cover (set by oce-deploy.php on wp_head) lets the page run
     under the status bar and notch, so this bar has to hold itself clear of
     them. The insets are 0 on every device that has none. */
  padding-top: calc(1.15rem + env(safe-area-inset-top, 0px));
  padding-left: calc(clamp(1.25rem, 5vw, 4.5rem) + env(safe-area-inset-left, 0px));
  padding-right: calc(clamp(1.25rem, 5vw, 4.5rem) + env(safe-area-inset-right, 0px));
  color: var(--oce-ivory);
  transition: background 0.45s, box-shadow 0.45s, padding 0.45s, color 0.45s;
}
.oce-nav.oce-scrolled {
  background: rgba(250, 247, 240, 0.86);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 var(--oce-line); color: var(--oce-ink);
  padding-top: calc(0.7rem + env(safe-area-inset-top, 0px)); padding-bottom: 0.7rem;
}
.oce-nav__brand { display: flex; align-items: center; gap: 0.75rem; }
.oce-nav__mark {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--oce-gold), var(--oce-gold2));
  color: #fff; font-weight: 700; font-size: 0.76rem; letter-spacing: 0.06em;
  box-shadow: 0 6px 16px -6px rgba(185,138,46,0.7);
}
.oce-nav__name { font-family: var(--oce-serif); font-size: 1.35rem; font-weight: 600; white-space: nowrap; }
.oce-nav__name em { color: var(--oce-gold2); }
.oce-nav.oce-scrolled .oce-nav__name em { color: var(--oce-gold); }
.oce-nav__links { display: flex; align-items: center; gap: 2.4rem; font-size: 0.84rem; font-weight: 400; letter-spacing: 0.07em; }
.oce-nav__links a:not(.oce-nav__cta) { position: relative; padding: 0.3rem 0; }
.oce-nav__links a:not(.oce-nav__cta)::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--oce-ease);
}
.oce-nav__links a:not(.oce-nav__cta):hover::after { transform: scaleX(1); transform-origin: left; }

/* ── The running thread ──
   One gold segment under the menu that slides across to whichever part of
   the page you are looking at. Deliberately a single element rather than an
   underline on each link: one thread that travels says "you are here", where
   four that blink on and off would just say "these are pressable", which the
   hover line above already says.

   Its position and width are written in from JavaScript, in pixels measured
   off the link itself. Nothing here has to know the labels, so it survives a
   language switch, a font arriving late, or the window changing size. */
.oce-nav__links { position: relative; }
.oce-nav__thread {
  position: absolute; left: 0; top: 0; width: 0; height: 2px;
  border-radius: 2px; pointer-events: none; opacity: 0;
  /* faded at both ends so it reads as a thread laid down, not a bar drawn */
  background: linear-gradient(90deg,
    rgba(220, 185, 110, 0) 0%, var(--oce-gold2) 20%,
    var(--oce-champagne) 50%, var(--oce-gold2) 80%,
    rgba(220, 185, 110, 0) 100%);
  transition: transform 0.55s var(--oce-ease), width 0.55s var(--oce-ease),
              opacity 0.35s, background 0.45s;
}
.oce-nav__thread.oce-on { opacity: 1; }
/* darker gold once the bar turns solid ivory, same swap the brand mark makes */
.oce-nav.oce-scrolled .oce-nav__thread {
  background: linear-gradient(90deg,
    rgba(185, 138, 46, 0) 0%, var(--oce-gold) 20%,
    var(--oce-gold-head) 50%, var(--oce-gold) 80%,
    rgba(185, 138, 46, 0) 100%);
}
.oce-nav__links a.oce-here { color: var(--oce-gold2); }
.oce-nav.oce-scrolled .oce-nav__links a.oce-here { color: var(--oce-gold-ink); }
/* Language toggle. Quieter than the CTA beside it — it is a way out for the
   people who need it, not a thing to press. Kept to the 44px tap height. */
.oce-nav__lang {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.2rem;
  font-size: 0.8rem; letter-spacing: 0.08em; opacity: 0.85; transition: opacity 0.3s, color 0.3s;
}
.oce-nav__lang:hover { opacity: 1; color: var(--oce-gold2); }
.oce-nav.oce-scrolled .oce-nav__lang:hover { color: var(--oce-gold); }

.oce-nav__cta {
  padding: 0.62rem 1.6rem; border-radius: 100px; font-weight: 600; color: #fff;
  background: linear-gradient(120deg, var(--oce-gold), var(--oce-gold2));
  transition: transform 0.4s var(--oce-ease), box-shadow 0.4s var(--oce-ease);
  will-change: transform;
}
.oce-nav__cta:hover { box-shadow: 0 12px 26px -8px rgba(185,138,46,0.65); }
.oce-nav__burger { display: none; background: none; border: 0; width: 2.1rem; height: 1.4rem; position: relative; z-index: 950; color: inherit; }
.oce-nav__burger span {
  position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
  transition: transform 0.35s var(--oce-ease), opacity 0.25s, top 0.35s var(--oce-ease);
}
.oce-nav__burger span:nth-child(1) { top: 0; }
.oce-nav__burger span:nth-child(2) { top: 50%; }
.oce-nav__burger span:nth-child(3) { top: 100%; }
.oce-nav__burger.oce-open span:nth-child(1) { top: 50%; transform: rotate(45deg); }
.oce-nav__burger.oce-open span:nth-child(2) { opacity: 0; }
.oce-nav__burger.oce-open span:nth-child(3) { top: 50%; transform: rotate(-45deg); }

/* ── Phone-only action bar ──
   Hidden on desktop entirely. `visibility` (not opacity) is what keeps the
   two links out of the keyboard tab order while the bar is down. */
.oce-callbar { display: none; }

/* iOS decides for itself whether a page may draw behind its URL bar, and it
   stops doing so once something is pinned to the bottom of the screen — the
   action bar below. It then reserves a strip there, and once its toolbar is
   fully expanded (scroll up hard, or tap the top) it keeps that strip for the
   rest of the session. A page cannot override that; viewport-fit=cover
   already asks for everything it is allowed to ask for.

   What the page CAN decide is the colour, because what shows through is the
   canvas underneath. Left at the default it is white and reads as a broken
   gap under a dark footer. Painted the site's ink it reads as the page
   continuing, and it fixes the white flash when over-scrolling too.
   Literal hex, not var(--oce-ink): the token lives on .oce, and html is
   outside it. */
@media (max-width: 860px) {
  html { background-color: #131110; }
}

@media (max-width: 860px) {
  .oce-callbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 880;
    display: flex; gap: 0.6rem;
    padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
    padding-left: calc(0.9rem + env(safe-area-inset-left, 0px));
    padding-right: calc(0.9rem + env(safe-area-inset-right, 0px));
    background: rgba(19, 17, 16, 0.92);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid rgba(220, 185, 110, 0.28);
    /* The bar sets its own text colour because ".oce a" resolves to
       "color: inherit" — so whatever this element holds is what the two
       links become. Setting it here is simpler than out-specifying that. */
    color: var(--oce-ivory);
    transform: translateY(120%); opacity: 0; visibility: hidden;
    will-change: transform;
    /* visibility is switched with a delay rather than interpolated: instantly
       on the way in, and only after the slide has finished on the way out.
       Transitioning visibility itself is unreliable. */
    transition: transform 0.55s var(--oce-ease), opacity 0.35s linear,
                visibility 0s linear 0.55s;
  }
  .oce-callbar.oce-on {
    transform: none; opacity: 1; visibility: visible;
    transition: transform 0.55s var(--oce-ease), opacity 0.35s linear,
                visibility 0s linear 0s;
  }
  .oce-callbar__btn {
    flex: 1; min-height: 48px; display: inline-flex; align-items: center; justify-content: center;
    gap: 0.55rem; border-radius: 100px; font-size: 0.82rem; font-weight: 600;
    line-height: 1; letter-spacing: 0.12em; text-transform: uppercase;
  }
  .oce-callbar__btn span { display: block; }
  /* stroked, like every other icon on the site — not a solid glyph.
     `display: block` drops the inline baseline, which is what lets
     align-items actually centre it in Safari as well as Chrome. */
  .oce-callbar__btn svg {
    width: 1.02rem; height: 1.02rem; flex: none; display: block;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  /* two classes, to beat ".oce a { color: inherit }" (0,1,1) */
  .oce .oce-callbar__btn--call {
    border: 1px solid rgba(250, 247, 240, 0.5); color: var(--oce-ivory);
    background: rgba(250, 247, 240, 0.06);
  }
  .oce .oce-callbar__btn--quote {
    background: linear-gradient(120deg, var(--oce-gold), var(--oce-gold2)); color: #fff;
  }

  /* Once the bar has landed, each button breathes a glow out from behind
     itself and settles. Three cycles, staggered, then it stops for good —
     a permanent pulse on a fixed bar would be exhausting. */
  .oce-callbar.oce-on .oce-callbar__btn--call {
    animation: oceGlowPale 2.3s var(--oce-ease) 0.6s 3 both;
  }
  .oce-callbar.oce-on .oce-callbar__btn--quote {
    animation: oceGlowGold 2.3s var(--oce-ease) 0.78s 3 both;
  }
}

@keyframes oceGlowGold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 185, 110, 0); }
  45%      { box-shadow: 0 0 26px 5px rgba(220, 185, 110, 0.5); }
}
@keyframes oceGlowPale {
  0%, 100% { box-shadow: 0 0 0 0 rgba(250, 247, 240, 0); }
  45%      { box-shadow: 0 0 22px 4px rgba(250, 247, 240, 0.26); }
}

@media (max-width: 860px) {
  .oce-nav__burger { display: block; }
  .oce-nav__links {
    position: fixed; inset: 0; flex-direction: column; justify-content: center;
    background: rgba(19, 17, 16, 0.97);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    font-size: 1.35rem; gap: 2.5rem; color: var(--oce-ivory);
    opacity: 0; pointer-events: none; transition: opacity 0.4s;
  }
  .oce-nav__links.oce-open { opacity: 1; pointer-events: auto; }
  /* The menu is a full-screen column here, so a sliding underline has
     nowhere sensible to slide. The gold word is enough on its own. */
  .oce-nav__thread { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .oce *, .oce *::before, .oce *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .oce .oce-reveal { opacity: 1; transform: none; }
}


/* 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 {
  /* #a1761f, not the base gold. #b98a2e measures 2.91:1 against ivory and
     WCAG 1.4.11 asks 3:1 of a focus indicator, so it missed by 0.09. This one
     is 3.8:1 on ivory and 3.95:1 on the dark bands, so it holds up on both
     grounds the site alternates between. */
  outline: 3px solid #a1761f; outline-offset: 2px; border-radius: 4px;
}

/* skip-to-content link (visible on keyboard focus) */
.oce-skip {
  position: fixed; top: -100px; left: 1rem; z-index: 2000;
  background: var(--oce-ink); color: var(--oce-ivory) !important;
  padding: 0.8rem 1.4rem; border-radius: 10px; font-weight: 600; font-size: 0.9rem;
  transition: top 0.2s;
}
.oce-skip:focus { top: 1rem; }

/* iOS paints a translucent block over whatever you tap. Over a gold gradient
   that reads as a white box around the button, which is what it looked like on
   a phone. Turned off here; the controls carry their own hover and pressed
   states, so nothing is lost. */
.oce a, .oce button, .oce [tabindex], .oce summary, .oce label {
  -webkit-tap-highlight-color: transparent;
}

/* A pointer should not leave a ring behind either. Tapping sets :focus, and the
   browser draws its own box for that - dark on a light ground, light on a dark
   one, which is the black square seen around a colour swatch and the white one
   around a gold button. The keyboard ring above is untouched.

   Written as :focus:not(:focus-visible) deliberately: a browser too old to know
   :focus-visible treats the whole selector as invalid and drops the rule, so
   the default ring stays rather than vanishing for everyone. */
.oce :focus:not(:focus-visible) { outline: none; }

/* iOS press-and-hold on a link opens a preview menu, and while it is open the
   system draws a white card behind the link and highlights the text inside it.
   Over a gold gradient that reads as a white box around the button. Nothing can
   restyle that card - the only control is whether the menu appears.

   These three are actions, not addresses: "open in new tab" means nothing for
   Get a Quote or a tel: link you already tap to dial. So the menu is turned off
   for them, which takes the white card with it. Plain text links - the nav
   items, the footer links, the footer phone and email - deliberately keep it,
   because copying a link or a number there is genuinely useful.

   user-select goes too: long-press was also selecting the button's label. */
.oce .oce-btn, .oce .oce-nav__cta, .oce .oce-callbar__btn {
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
}