/* =========================================================
   Cathy Events v3 — tokens, sheets, hero video, photo wall
   Spec: cathyevents-website.md v3.0 (§3 colour, §4 type, §5 layout,
   §6 shape, §7 motion, §8 components, §17 starter kit)
   ========================================================= */
:root {
  /* Colour */
  --c-ivory: #FBF7F1;  --c-sand: #F3EADC;  --c-white: #FFFFFF;  --c-line: #E6DED2;
  --c-ink: #24191C;    --c-ink-soft: #5F5254;
  --c-wine: #4A1020;   --c-wine-deep: #360A17; --c-wine-2: #5C1A2E; --c-ivory-muted: #E3D3CC;
  --c-marigold: #E3BC6A; --c-marigold-hi: #EDCB85; --c-marigold-deep: #835E1F; --c-maroon: #7A1E34;
  --c-gold: #B8893B;   --c-gold-deep: #835E1F; --c-sage: #5E6E58; --c-night: #1D1416; --c-error: #A3282E;
  --c-tint: rgba(227, 188, 106, 0.16);
  --gold-foil: linear-gradient(135deg, #B08236 0%, #E2BF77 26%, #F6E2A6 46%, #D6A95A 66%, #B08236 100%);
  --gold-text-dark: linear-gradient(100deg, #E2BD72 0%, #F8E6B0 38%, #D9AB5B 68%, #F0D292 100%);
  --gold-text-light: linear-gradient(100deg, #6E4510 0%, #A87A2E 45%, #7A4E12 75%, #8C5A1E 100%);

  /* Type (fluid 360 → 1440 px) */
  --f: "Montserrat", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --f-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --t-hero: clamp(3rem, 2.167rem + 3.704vw, 5.5rem);         /* 48 → 88 (serif) */
  --t-h1:   clamp(2.75rem, 2.083rem + 2.963vw, 4.75rem);      /* 44 → 76 */
  --t-h2:   clamp(2.25rem, 1.75rem + 2.222vw, 3.75rem);       /* 36 → 60 */
  --t-h3:   clamp(1.375rem, 1.292rem + 0.37vw, 1.625rem);     /* 22 → 26 */
  --t-stat: clamp(2.5rem, 2.167rem + 1.481vw, 3.5rem);        /* 40 → 56 */
  --t-lead: clamp(1.0625rem, 1.021rem + 0.185vw, 1.1875rem);  /* 17 → 19 */
  --t-body: clamp(0.9375rem, 0.917rem + 0.093vw, 1rem);       /* 15 → 16 */

  /* Space & shape */
  --pad: 20px;
  --inset: clamp(8px, 0.333rem + 0.741vw, 16px);
  --r-sheet: clamp(1.5rem, 1.083rem + 1.852vw, 2.75rem);      /* 24 → 44 */
  --section-y: clamp(4rem, 2.667rem + 5.926vw, 8rem);
  --sheet-y: clamp(3.5rem, 2.333rem + 5.185vw, 7rem);
  --hh: 60px; --htop: 8px;                                     /* header height / offset */
  --shadow-card: 0 24px 60px -18px rgba(36, 25, 28, 0.32);
  --shadow-soft: 0 18px 40px -26px rgba(74, 16, 32, 0.45);

  /* Motion */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-silk: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms; --dur-base: 360ms; --dur-slow: 800ms; --dur-reveal: 1100ms;
}
@media (min-width: 768px)  { :root { --pad: 32px; } }
@media (min-width: 1025px) { :root { --pad: 48px; --hh: 68px; --htop: 10px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--htop) + var(--hh) + 24px); }
body {
  margin: 0; padding-top: calc(var(--htop) + var(--hh) + 16px);
  background: var(--c-ivory); color: var(--c-ink-soft);
  font: 400 var(--t-body)/1.7 var(--f); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--c-marigold); color: var(--c-wine); }
:focus-visible { outline: 2px solid var(--c-maroon); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--f-display); color: var(--c-ink); text-wrap: balance; }
h1 { font-size: var(--t-h1); font-weight: 600; line-height: 1.02; letter-spacing: -0.01em; }
h2 { font-size: var(--t-h2); font-weight: 600; line-height: 1.04; letter-spacing: -0.01em; }
h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.2; letter-spacing: 0; }
p { text-wrap: pretty; }
b, strong { font-weight: 600; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 18px; border-radius: 999px; background: var(--c-wine); color: var(--c-ivory); font-weight: 700; text-decoration: none; transition: top var(--dur-base) var(--ease-silk); }
.skip-link:focus { top: 16px; }

.ce-icon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ce-icon * { vector-effect: non-scaling-stroke; }
.mt-s { margin-top: 16px; } .mt-m { margin-top: 24px; } .mt-l { margin-top: 40px; }

/* ---------- Layout ---------- */
.ce-wrap { width: 100%; max-width: calc(1240px + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.ce-wrap--read { max-width: calc(720px + 2 * var(--pad)); }
.ce-section { padding-block: var(--section-y); }
.ce-section--tight { padding-block: calc(var(--section-y) * 0.55); }
.bg-sand { background: var(--c-sand); }

/* Wine sheet */
.ce-sheet {
  position: relative; isolation: isolate; overflow: hidden;
  margin-inline: var(--inset); border-radius: var(--r-sheet); padding-block: var(--sheet-y);
  background: var(--c-wine); color: var(--c-ivory-muted);
}
.ce-sheet::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.55; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1.4px); background-size: 26px 26px;
  -webkit-mask: radial-gradient(70% 80% at 72% 45%, #000, transparent 72%); mask: radial-gradient(70% 80% at 72% 45%, #000, transparent 72%);
}
.ce-sheet h1, .ce-sheet h2, .ce-sheet h3 { color: var(--c-ivory); }
.ce-sheet .ce-eyebrow, .ce-sheet .ce-accent { color: var(--c-marigold); }
.ce-sheet .ce-lead, .ce-sheet .ce-body { color: var(--c-ivory-muted); }
.ce-sheet :focus-visible { outline-color: var(--c-marigold); }
.ce-sheet + .ce-sheet { margin-top: 16px; }

/* Heads */
.ce-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 0.75rem/1.4 var(--f); letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-marigold-deep); }
.ce-eyebrow::before { content: ""; flex: none; width: 12px; height: 8px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 12px 12px 0 0; }
.ce-accent { color: var(--c-maroon); }
.ce-lead { font-size: var(--t-lead); line-height: 1.6; max-width: 58ch; }
.ce-body { max-width: 68ch; }
.ce-body + .ce-body { margin-top: 1em; }
.ce-head { margin-bottom: 48px; }
.ce-head h2, .ce-head h1 { margin-top: 14px; }
.ce-head .ce-lead { margin-top: 20px; }
.ce-head--center { text-align: center; }
.ce-head--center .ce-lead { margin-inline: auto; }
.ce-head--split { display: grid; gap: 20px 64px; align-items: end; }
@media (min-width: 1025px) { .ce-head--split { grid-template-columns: 7fr 5fr; } .ce-head--split .ce-lead { margin-top: 0; } }
.ce-center { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 22px; margin-top: 48px; }

/* ---------- Buttons ---------- */
.ce-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 56px; padding: 8px 8px 8px 26px;
  border: 0; border-radius: 999px; background: var(--c-marigold); color: var(--c-wine);
  font: 700 0.9375rem/1.1 var(--f); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-silk), box-shadow var(--dur-base), transform var(--dur-fast), opacity var(--dur-base);
}
.ce-btn__ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--c-white); color: var(--c-wine); transition: transform var(--dur-base) var(--ease-silk); }
.ce-btn__ic .ce-icon { width: 18px; height: 18px; stroke-width: 2.2; }
.ce-btn:hover { background: var(--c-marigold-hi); }
.ce-btn:hover .ce-btn__ic { transform: translateX(3px); }
.ce-btn:active { transform: scale(0.98); }
.ce-btn[disabled] { opacity: 0.55; pointer-events: none; }
.ce-btn--ghost { padding: 8px 26px; background: rgba(255, 255, 255, 0.06); color: var(--c-ivory); box-shadow: inset 0 0 0 1px rgba(251, 247, 241, 0.4); }
.ce-btn--ghost:hover { background: rgba(255, 255, 255, 0.14); }
.ce-btn--outline { padding: 8px 26px; background: transparent; color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-line); }
.ce-btn--outline:hover { background: var(--c-white); box-shadow: inset 0 0 0 1px var(--c-ink); }
.ce-btn--sm { min-height: 48px; padding: 6px 6px 6px 20px; font-size: 0.875rem; }
.ce-btn--sm .ce-btn__ic { width: 36px; height: 36px; }
.ce-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }

.ce-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--c-maroon); font-weight: 700; text-decoration: none; background: linear-gradient(currentColor, currentColor) left calc(50% + 0.8em) / 0% 1.5px no-repeat; transition: background-size var(--dur-base) var(--ease-silk); }
.ce-link:hover, .ce-link:focus-visible { background-size: 100% 1.5px; }
.ce-sheet .ce-link { color: var(--c-ivory); }

.ce-iconbtn { width: 44px; height: 44px; flex: none; display: inline-grid; place-items: center; padding: 0; border-radius: 50%; background: transparent; color: var(--c-ink); border: 1px solid var(--c-line); text-decoration: none; transition: border-color var(--dur-fast), color var(--dur-fast), background-color var(--dur-fast); }
.ce-iconbtn:hover { border-color: var(--c-maroon); color: var(--c-maroon); }
.ce-iconbtn .ce-icon { width: 18px; height: 18px; }
.ce-sheet .ce-iconbtn, .ce-iconbtn--dark { color: var(--c-ivory); border-color: rgba(251, 247, 241, 0.45); background: rgba(54, 10, 23, 0.35); }
.ce-sheet .ce-iconbtn:hover, .ce-iconbtn--dark:hover { border-color: var(--c-marigold); color: var(--c-marigold); }

/* Chips */
.ce-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ce-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-white); font-size: 0.8125rem; font-weight: 600; color: var(--c-ink); }
.ce-chip small { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-soft); }
.ce-chip b { color: var(--c-marigold-deep); font-weight: 800; }
.ce-sheet .ce-chip { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.18); color: var(--c-ivory); }
.ce-sheet .ce-chip small, .ce-sheet .ce-chip b { color: var(--c-marigold); }

.ce-stars { display: inline-flex; flex-wrap: nowrap; gap: 2px; color: var(--c-marigold); }
.ce-stars .ce-icon { width: 14px; height: 14px; max-width: none; flex: none; fill: currentColor; stroke: none; }

/* ---------- Logo (supplied artwork: CE monogram + "Cathy Events" wordmark) ---------- */
.ce-logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; flex: none; text-decoration: none; }
.ce-logo img { width: auto; max-width: none; }
.ce-logo__mark { height: 42px; }
.ce-logo__word { height: 24px; margin-top: 2px; }
@media (min-width: 1025px) { .ce-logo__mark { height: 50px; } .ce-logo__word { height: 28px; } }
@media (max-width: 359px) { .ce-logo__word { height: 20px; } }
.ce-logo--stack img { width: 150px; height: auto; }
.ce-intro .ce-header .ce-logo img { animation: ce-rise 900ms var(--ease-expo) both; }
.ce-intro .ce-header .ce-logo__word { animation-delay: 120ms; }

/* ---------- Floating pill header (M11) ---------- */
.ce-header { position: fixed; inset: var(--htop) 0 auto; z-index: 50; padding-inline: var(--inset); pointer-events: none; }
.ce-header__bar {
  pointer-events: auto; max-width: 1240px; height: var(--hh); margin: 0 auto; padding: 0 8px 0 18px;
  display: flex; align-items: center; gap: 12px;
  background: var(--c-white); border: 1px solid var(--c-line); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(74, 16, 32, 0.04), 0 10px 30px -22px rgba(74, 16, 32, 0.35);
  transition: box-shadow var(--dur-base) var(--ease-silk);
}
.ce-header.is-scrolled .ce-header__bar { box-shadow: 0 1px 2px rgba(74, 16, 32, 0.06), 0 18px 40px -20px rgba(74, 16, 32, 0.45); }
.ce-nav { display: none; margin-inline: auto; }
.ce-nav ul { display: flex; gap: clamp(18px, 2vw, 30px); margin: 0; padding: 0; list-style: none; }
.ce-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 0.9375rem; color: var(--c-ink); text-decoration: none; transition: color var(--dur-fast); }
.ce-nav a:hover { color: var(--c-maroon); }
.ce-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--c-marigold); transform: translateX(-50%); }
.ce-header__end { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ce-hphone { display: none; align-items: center; gap: 10px; text-decoration: none; color: var(--c-ink); }
.ce-hphone__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-sand); color: var(--c-maroon); }
.ce-hphone__ic .ce-icon { width: 18px; height: 18px; }
.ce-hphone small { display: block; font: 700 0.5625rem/1.2 var(--f); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-ink-soft); }
.ce-hphone b { display: block; font-size: 0.875rem; font-weight: 700; }
.ce-header__cta { display: none; }
.ce-header__call { display: inline-grid; }
.ce-menu-btn { background: var(--c-wine); color: var(--c-ivory); border-color: var(--c-wine); }
.ce-menu-btn:hover { background: var(--c-maroon); color: var(--c-ivory); border-color: var(--c-maroon); }
@media (min-width: 560px) { .ce-header__cta { display: inline-flex; } }
@media (min-width: 1025px) {
  .ce-nav { display: block; }
  .ce-header__end { margin-left: 0; }
  .ce-menu-btn, .ce-header__call { display: none; }
  .ce-header__bar { padding-left: 22px; gap: 24px; }
}
@media (min-width: 1240px) { .ce-hphone { display: inline-flex; } }

/* Drawer */
.ce-drawer {
  position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; overflow-y: auto;
  padding: 0 var(--pad) calc(28px + env(safe-area-inset-bottom)); background: var(--c-wine); color: var(--c-ivory);
  visibility: hidden; opacity: 0; transition: opacity var(--dur-base) var(--ease-silk), visibility 0s linear var(--dur-base);
}
.ce-drawer.is-open { visibility: visible; opacity: 1; transition: opacity var(--dur-base) var(--ease-silk); }
.ce-drawer__top { display: flex; align-items: center; justify-content: space-between; min-height: calc(var(--hh) + 2 * var(--htop) + 8px); }
.ce-drawer nav ul { margin: 16px 0 0; padding: 0; list-style: none; }
.ce-drawer nav li { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease-expo), transform 600ms var(--ease-expo); transition-delay: calc(80ms + var(--i, 0) * 60ms); }
.ce-drawer.is-open nav li { opacity: 1; transform: none; }
.ce-drawer nav a { display: block; padding: 8px 0; font: 700 2rem/1.15 var(--f); letter-spacing: -0.02em; color: var(--c-ivory); text-decoration: none; }
.ce-drawer nav a[aria-current="page"] { color: var(--c-marigold); }
.ce-drawer__cta { margin-top: 28px; }
.ce-drawer__foot { margin-top: auto; padding-top: 36px; display: grid; gap: 4px; }
.ce-drawer__foot a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--c-ivory); text-decoration: none; font-weight: 600; }
.ce-drawer__foot .ce-icon { color: var(--c-marigold); }
body.menu-open { overflow: hidden; }

/* ---------- Home hero: video (M1, M2, M3) ---------- */
.ce-hero { min-height: min(calc(100svh - 110px), 820px); display: flex; flex-direction: column; justify-content: flex-end; padding-block: clamp(48px, 7vw, 96px) clamp(20px, 3vw, 32px); }
.ce-hero::before { display: none; }
.ce-hero__media { position: absolute; inset: 0; z-index: -2; background: var(--c-wine-deep); }
.ce-hero__media img, .ce-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ce-hero__media video { opacity: 0; transition: opacity 900ms var(--ease-silk); }
.ce-hero__media video.is-playing { opacity: 1; }
.ce-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(54, 10, 23, 0.92) 0%, rgba(54, 10, 23, 0.74) 36%, rgba(54, 10, 23, 0.24) 70%, rgba(54, 10, 23, 0.12) 100%),
    linear-gradient(180deg, rgba(54, 10, 23, 0.38) 0%, rgba(54, 10, 23, 0) 28%, rgba(54, 10, 23, 0) 60%, rgba(54, 10, 23, 0.86) 100%);
}
@media (max-width: 767px) {
  .ce-hero::after { background: linear-gradient(180deg, rgba(54, 10, 23, 0.45) 0%, rgba(54, 10, 23, 0.55) 30%, rgba(54, 10, 23, 0.94) 100%); }
}
.ce-hero__text { max-width: 720px; }
.ce-hero h1 { margin-top: 26px; font-size: var(--t-hero); line-height: 0.98; letter-spacing: -0.01em; }
.ce-hero .ce-lead { margin-top: 22px; }
.ce-hero__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 32px; }
.ce-tag {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px;
  border: 1px solid rgba(251, 247, 241, 0.3); background: rgba(54, 10, 23, 0.35);
  font: 700 0.6875rem/1.2 var(--f); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-ivory);
}
.ce-tag::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c-marigold); box-shadow: 0 0 0 4px rgba(233, 169, 58, 0.25); }
.ce-rating-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.8125rem; font-weight: 500; color: var(--c-ivory-muted); }
.ce-rating-line b { color: var(--c-ivory); font-weight: 700; }
.ce-hero__pause { position: absolute; top: 18px; right: 18px; z-index: 2; }
@media (max-width: 1024px) { .ce-hero { padding-top: 80px; } }
@media (min-width: 1025px) { .ce-hero__pause { top: auto; bottom: 24px; right: 24px; } }

.ce-rise { animation: ce-rise var(--dur-reveal) var(--ease-expo) both; animation-delay: var(--d, 0s); }
@keyframes ce-rise { from { opacity: 0; transform: translateY(24px); } }

.ce-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); margin: clamp(36px, 6vw, 64px) 0 0; padding: 0; list-style: none;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 26px;
  background: rgba(54, 10, 23, 0.5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
@media (min-width: 768px) { .ce-stats { grid-template-columns: repeat(4, 1fr); } }
.ce-stats li { padding: 20px 12px; text-align: center; }
.ce-stats li + li { border-left: 1px solid rgba(255, 255, 255, 0.12); }
@media (max-width: 767px) { .ce-stats li:nth-child(3) { border-left: 0; } .ce-stats li:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.12); } }
.ce-stats b { display: block; font: 800 var(--t-stat)/1 var(--f); letter-spacing: -0.02em; color: var(--c-ivory); font-variant-numeric: tabular-nums; }
.ce-stats b i { font-style: normal; color: var(--c-marigold); }
.ce-stats li > span { display: block; margin-top: 10px; font: 700 0.6875rem/1.4 var(--f); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-ivory-muted); }

/* ---------- Inner-page hero (9.3) ---------- */
.ce-phero__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1025px) { .ce-phero__grid { grid-template-columns: 7fr 5fr; gap: 64px; } }
.ce-phero h1 { margin-top: 22px; }
.ce-phero .ce-lead { margin-top: 20px; }
.ce-phero .ce-hero__row { margin-top: 28px; }
.ce-phero__media { position: relative; width: 100%; max-width: 400px; margin: 14px auto 0; }
.ce-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; font-size: 0.8125rem; font-weight: 600; color: var(--c-ivory-muted); }
.ce-crumbs li + li::before { content: "/"; margin-right: 8px; opacity: 0.55; }
.ce-crumbs a { color: inherit; text-decoration: none; }
.ce-crumbs a:hover { color: var(--c-ivory); text-decoration: underline; text-underline-offset: 3px; }
.ce-crumbs--light ol { color: var(--c-ink-soft); }
.ce-crumbs--light a:hover { color: var(--c-maroon); }
@media (max-width: 1024px) { .ce-phero__media { max-width: 560px; margin-top: 0; } .ce-phero__media .ce-arch { aspect-ratio: 4 / 3; border-radius: 24px; } .ce-phero__media.ce-archframe::before { display: none; } }

/* Arch frame with gold outline */
.ce-archframe { position: relative; isolation: isolate; }
.ce-archframe::before { content: ""; position: absolute; inset: -14px -14px 14px 14px; z-index: -1; border: 1px solid var(--c-gold); border-radius: 999px 999px 22px 22px; opacity: 0.7; }
.ce-arch { position: relative; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 999px 999px 18px 18px; background: var(--c-wine-2); }
.ce-arch img { width: 100%; height: 100%; object-fit: cover; }
.ce-settle img { animation: ce-settle 2.4s var(--ease-silk) both; }
@keyframes ce-settle { from { transform: scale(1.08); } to { transform: scale(1); } }

/* Page head (light pages without a hero sheet) */
.ce-pagehead { padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(28px, 4vw, 48px); }
.ce-pagehead__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
.ce-pagehead h1 { margin-top: 14px; }
.ce-pagehead .ce-lead { margin-top: 18px; }

/* ---------- Occasion strip (M4) ---------- */
.ce-occ { padding-top: clamp(48px, 6vw, 72px); text-align: center; }
.ce-occ__h { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); font-weight: 700; color: var(--c-ink); letter-spacing: -0.01em; }
.ce-occ__h b { color: var(--c-maroon); font-weight: 800; }
.ce-strip {
  max-width: 1080px; margin: 28px auto 0; overflow: hidden;
  background: var(--c-white); border: 1px solid var(--c-line); border-radius: 999px; box-shadow: var(--shadow-soft);
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ce-strip__t { display: flex; width: max-content; animation: ce-slide 54s linear infinite; }
.ce-strip__t span { padding: 22px 0 22px 28px; font-weight: 600; font-size: 1rem; line-height: 1; color: var(--c-ink-soft); white-space: nowrap; }
.ce-strip__t span::after { content: "✦"; margin-left: 28px; color: var(--c-gold); font-size: 0.7em; }
.ce-strip:hover .ce-strip__t { animation-play-state: paused; }
@keyframes ce-slide { to { transform: translateX(-50%); } }

/* ---------- Celebration cards (M5) ---------- */
.ce-cel { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .ce-cel { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) {
  .ce-cel { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 250px; }
  .ce-cel > :first-child { grid-row: span 2; }
  .ce-cel > :nth-child(6):last-child { grid-column: 1 / -1; }   /* the sixth card becomes a wide banner */
  .ce-cel > :nth-child(6):last-child .ce-ccard { min-height: 0; }
}
.ce-cel > li { display: grid; }
.ce-ccard {
  position: relative; isolation: isolate; min-height: 250px; padding: 22px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: 24px; background: var(--c-wine-deep); color: var(--c-ivory); text-decoration: none;
}
@media (max-width: 1024px) { .ce-cel > :first-child .ce-ccard { min-height: 360px; } }
.ce-ccard__ph { position: absolute; inset: 0; z-index: -2; }
.ce-ccard__ph img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  animation: ce-fx 15s linear infinite; animation-delay: var(--d, -0.6s);
  transition: transform var(--dur-slow) var(--ease-silk);
}
.ce-ccard__ph img:nth-child(2) { animation-delay: calc(var(--d, -0.6s) + 5s); }
.ce-ccard__ph img:nth-child(3) { animation-delay: calc(var(--d, -0.6s) + 10s); }
.ce-ccard__ph img:only-child { animation: none; opacity: 1; }
@keyframes ce-fx { 0% { opacity: 0; } 2% { opacity: 1; } 33% { opacity: 1; } 35% { opacity: 0; } 100% { opacity: 0; } }
.ce-ccard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(54, 10, 23, 0) 30%, rgba(54, 10, 23, 0.9) 100%); }
.ce-ccard h3 { color: var(--c-ivory); font-size: 1.125rem; }
.ce-cel > :first-child .ce-ccard h3 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); }
.ce-ccard p { margin-top: 6px; font-size: 0.875rem; line-height: 1.5; color: var(--c-ivory-muted); }
.ce-ccard__go { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color var(--dur-base), color var(--dur-base), border-color var(--dur-base); }
.ce-ccard__go .ce-icon { width: 16px; height: 16px; stroke-width: 2.2; }
.ce-ccard:hover .ce-ccard__go, .ce-ccard:focus-visible .ce-ccard__go { background: var(--c-marigold); color: var(--c-wine); border-color: var(--c-marigold); }
.ce-ccard:hover .ce-ccard__ph img { transform: scale(1.06); }
.ce-ccard:focus-visible { outline: 2px solid var(--c-maroon); outline-offset: 3px; }
.ce-cel > :nth-child(2) .ce-ccard { --d: -1.7s; } .ce-cel > :nth-child(3) .ce-ccard { --d: -2.8s; }
.ce-cel > :nth-child(4) .ce-ccard { --d: -3.9s; } .ce-cel > :nth-child(5) .ce-ccard { --d: -5s; } .ce-cel > :nth-child(6) .ce-ccard { --d: -6.1s; }
/* Card still waiting for its photos */
.ce-ccard--soon { background: radial-gradient(120% 90% at 85% 0%, var(--c-wine-2) 0%, var(--c-wine-deep) 60%); }
.ce-ccard--soon::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5; background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1.4px); background-size: 22px 22px; }
.ce-ccard__big { position: absolute; right: 22px; bottom: 70px; z-index: -1; width: 76px; height: 76px; color: var(--c-marigold); opacity: 0.3; }
.ce-ccard__big .ce-icon { width: 100%; height: 100%; stroke-width: 1.2; }
.ce-soon { align-self: flex-start; display: inline-block; margin-top: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ivory-muted); }

/* ---------- Why section ---------- */
.ce-why { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1025px) { .ce-why { grid-template-columns: 7fr 5fr; gap: 80px; } }
.ce-why .ce-lead { margin-top: 20px; }
.ce-why .ce-chips { margin-top: 28px; }
.ce-why__media { position: relative; width: 100%; max-width: 380px; margin: 14px auto 0; }
.ce-ratecard { position: absolute; top: 14%; right: -22px; z-index: 2; width: max-content; padding: 12px 16px; border-radius: 18px; background: var(--c-white); box-shadow: var(--shadow-card); color: var(--c-ink); }
.ce-ratecard b { display: flex; align-items: center; gap: 8px; font-size: 1.375rem; font-weight: 800; line-height: 1; }
.ce-ratecard > span { display: block; margin-top: 6px; font-size: 0.75rem; font-weight: 500; color: var(--c-ink-soft); }
.ce-badge { position: absolute; left: -30px; bottom: 44px; z-index: 2; width: 120px; height: 120px; display: grid; place-items: center; border-radius: 50%; background: var(--c-marigold); color: var(--c-wine); box-shadow: var(--shadow-card); }
.ce-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: ce-spin 20s linear infinite; }
.ce-badge text { font: 700 9.5px var(--f); letter-spacing: 0.2em; fill: currentColor; }
.ce-badge b { font: 800 1.75rem/1 var(--f); text-align: center; }
.ce-badge b small { display: block; margin-top: 3px; font-size: 0.625rem; letter-spacing: 0.14em; }
@keyframes ce-spin { to { transform: rotate(360deg); } }
@media (max-width: 480px) { .ce-badge { width: 96px; height: 96px; left: -6px; } .ce-badge b { font-size: 1.375rem; } .ce-ratecard { right: -4px; } }

.ce-feats { display: grid; gap: 16px; margin: clamp(56px, 7vw, 88px) 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .ce-feats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .ce-feats { grid-template-columns: repeat(4, 1fr); } }
.ce-feat { height: 100%; padding: 28px 24px; border-radius: 24px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.ce-feat h3 { margin-top: 18px; font-size: 1.0625rem; }
.ce-feat p { margin-top: 10px; font-size: 0.875rem; line-height: 1.6; }
.ce-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--c-tint); color: var(--c-marigold); }
.ce-ic--light { background: var(--c-sand); color: var(--c-maroon); }

/* ---------- Steps with dotted path (M8) ---------- */
.ce-steps { position: relative; }
.ce-steps__list { display: grid; gap: 44px; margin: 0; padding: 0; list-style: none; text-align: center; }
@media (min-width: 1025px) { .ce-steps__list { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.ce-steps__path { position: absolute; left: 17%; top: 8px; width: 66%; height: 80px; color: var(--c-gold); pointer-events: none; }
.js .ce-steps__path { clip-path: inset(0 100% 0 0); transition: clip-path 1200ms var(--ease-inout) 200ms; }
.js .ce-steps.is-in .ce-steps__path { clip-path: inset(0); }
@media (max-width: 1024px) { .ce-steps__path { display: none; } }
.ce-step { position: relative; }
.ce-step__num { position: relative; width: 96px; height: 96px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 50%; background: var(--c-white); box-shadow: var(--shadow-soft); font: 800 1.875rem/1 var(--f); color: var(--c-wine); }
.ce-step__num::before { content: ""; position: absolute; inset: 7px; border: 1px dashed var(--c-gold); border-radius: 50%; }
.ce-step h3 { font-size: 1.1875rem; }
.ce-step p { max-width: 32ch; margin: 10px auto 0; font-size: 0.9375rem; }

/* ---------- Photo wall & review wall (M9, M10) ---------- */
.ce-wallsec { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1025px) { .ce-wallsec { grid-template-columns: 1fr 1fr; gap: 64px; } }
.ce-wallsec .ce-lead { margin-top: 20px; }
.ce-wallsec .ce-chips { margin-top: 24px; }
.ce-wallsec .ce-actions { margin-top: 28px; }
.ce-wall {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  height: clamp(420px, 46vw, 640px); overflow: hidden;
  -webkit-mask: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
.ce-wall__col { position: relative; overflow: hidden; }
.ce-wall__track { display: grid; gap: 12px; padding-bottom: 12px; animation: ce-up 46s linear infinite; }
.ce-wall__col:nth-child(2) .ce-wall__track { animation-name: ce-down; animation-duration: 54s; }
.ce-wall__col:nth-child(3) .ce-wall__track { animation-duration: 40s; }
.ce-wall__col:focus-within .ce-wall__track, .ce-wall__col.is-held .ce-wall__track,
.ce-wall.is-paused .ce-wall__track, .ce-wall.is-off .ce-wall__track { animation-play-state: paused; }
.ce-wall figure { position: relative; margin: 0; overflow: hidden; border-radius: 18px; aspect-ratio: 3 / 4; background: var(--c-wine-2); }
.ce-wall__col:nth-child(2) figure:nth-child(odd) { aspect-ratio: 1 / 1; }
.ce-wall img { width: 100%; height: 100%; object-fit: cover; }
.ce-wall figcaption { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 6px 9px; border-radius: 10px; background: rgba(54, 10, 23, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 700 0.6875rem/1.3 var(--f); color: var(--c-ivory); }
.ce-wall__pause { position: absolute; right: 12px; bottom: 12px; z-index: 2; }
@keyframes ce-up   { from { transform: translate3d(0, 0, 0); }    to { transform: translate3d(0, -50%, 0); } }
@keyframes ce-down { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } }
@media (max-width: 1024px) {
  .ce-wall:not(.ce-wall--quotes) { height: 340px; margin-inline: calc(-1 * var(--pad)); padding-inline: 12px; }
  .ce-wall:not(.ce-wall--quotes) figure, .ce-wall:not(.ce-wall--quotes) .ce-wall__col:nth-child(2) figure:nth-child(odd) { aspect-ratio: 4 / 5; }
}
@media (max-width: 480px) {
  .ce-wall:not(.ce-wall--quotes) { grid-template-columns: repeat(2, 1fr); }
  .ce-wall:not(.ce-wall--quotes) .ce-wall__col:nth-child(3) { display: none; }
}
/* Review wall */
.ce-wall--quotes { height: clamp(520px, 50vw, 680px); }
.ce-wall--quotes .ce-wall__track { animation-duration: 70s; }
.ce-wall--quotes .ce-wall__col:nth-child(2) .ce-wall__track { animation-duration: 80s; }
.ce-wall--quotes .ce-wall__col:nth-child(3) .ce-wall__track { animation-duration: 64s; }
.ce-wall--quotes figure, .ce-wall--quotes .ce-wall__col:nth-child(2) figure:nth-child(odd) { aspect-ratio: auto; padding: 26px 24px; border-radius: 24px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); overflow: visible; }
.ce-q__mark { display: block; height: 30px; font: 800 3.5rem/1 var(--f); color: var(--c-marigold); }
.ce-wall--quotes blockquote { margin-top: 12px; padding-left: 14px; border-left: 2px solid rgba(233, 169, 58, 0.35); font-size: 0.9375rem; line-height: 1.65; color: var(--c-ivory); }
.ce-wall--quotes figcaption { position: static; margin-top: 20px; padding: 16px 0 0; border-radius: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); background: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 0.875rem; }
.ce-wall--quotes figcaption small { display: block; margin-top: 4px; font-weight: 500; font-size: 0.75rem; color: var(--c-ivory-muted); }
.ce-wall--quotes .ce-stars { margin-top: 8px; }
@media (max-width: 767px) { .ce-wall--quotes { grid-template-columns: 1fr; height: 560px; } .ce-wall--quotes .ce-wall__col:nth-child(n + 2) { display: none; } }
.ce-gpill { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; padding: 14px 24px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.04); color: var(--c-ivory); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: background-color var(--dur-base); }
.ce-gpill:hover { background: rgba(255, 255, 255, 0.1); }
.ce-gpill b { font-weight: 800; }

/* ---------- Service tiles (Home #8) ---------- */
.ce-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .ce-tiles { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1025px) { .ce-tiles { grid-template-columns: repeat(4, 1fr); } }
.ce-tile { height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 22px 20px; border-radius: 20px; background: var(--c-white); border: 1px solid var(--c-line); color: var(--c-ink); text-decoration: none; transition: transform var(--dur-base) var(--ease-silk), box-shadow var(--dur-base) var(--ease-silk), border-color var(--dur-base); }
.ce-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: transparent; }
.ce-tile:hover .ce-ic--light { background: var(--c-tint); }
.ce-tile b { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.ce-tile span { font-size: 0.8125rem; line-height: 1.5; color: var(--c-ink-soft); }

/* ---------- Brands ---------- */
.ce-brands { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .ce-brands { grid-template-columns: 1fr 1fr; } }
.ce-brand { height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: var(--c-white); border: 1px solid var(--c-line); }
.ce-brand__media { aspect-ratio: 16 / 10; overflow: hidden; }
.ce-brand__media img { width: 100%; height: 100%; object-fit: cover; }
.ce-brand__body { padding: clamp(22px, 3vw, 32px); }
.ce-brand__body h3 { margin-top: 10px; font-size: 1.375rem; }
.ce-brand__body p { margin-top: 10px; }

/* Placeholder for a photo slot the owner hasn't supplied yet (§11) */
.ce-ph { position: relative; width: 100%; height: 100%; min-height: 160px; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; border-radius: inherit; background: radial-gradient(120% 80% at 50% 0%, #F7E4DB 0%, rgba(247, 228, 219, 0) 62%), var(--c-sand); color: var(--c-maroon); }
.ce-ph::before { content: ""; position: absolute; inset: 12px; border: 1px dashed rgba(184, 137, 59, 0.55); border-radius: 14px; pointer-events: none; }
.ce-ph .ce-icon { width: 36px; height: 36px; stroke-width: 1.4; }
.ce-ph__label { font-weight: 700; font-size: 0.9375rem; color: var(--c-ink); }
.ce-ph__slot { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-marigold-deep); }
.ce-arch .ce-ph::before { border-radius: 999px 999px 10px 10px; }

/* ---------- FAQ ---------- */
.ce-faqsec { display: grid; gap: 40px; }
@media (min-width: 1025px) { .ce-faqsec { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; } .ce-faqsec > :first-child { position: sticky; top: calc(var(--htop) + var(--hh) + 32px); } }
.ce-faqsec .ce-lead { margin-top: 20px; }
.ce-faqsec .ce-lead a { color: var(--c-maroon); font-weight: 700; text-underline-offset: 3px; }
.ce-faq { display: grid; gap: 12px; }
.ce-faq details { border-radius: 20px; background: var(--c-white); border: 1px solid var(--c-line); transition: box-shadow var(--dur-base); }
.ce-faq details[open] { box-shadow: var(--shadow-soft); }
.ce-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 16px 18px 16px 24px; list-style: none; cursor: pointer; font-weight: 700; font-size: 1rem; line-height: 1.4; color: var(--c-ink); }
.ce-faq summary::-webkit-details-marker { display: none; }
.ce-faq summary:hover { color: var(--c-maroon); }
.ce-faq__i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-sand); color: var(--c-maroon); transition: transform var(--dur-base) var(--ease-silk), background-color var(--dur-base); }
.ce-faq__i .ce-icon { width: 16px; height: 16px; stroke-width: 2.2; }
.ce-faq details[open] .ce-faq__i { transform: rotate(45deg); background: var(--c-marigold); color: var(--c-wine); }
.ce-faq__a { padding: 0 24px 22px; max-width: 64ch; }
.ce-faq details[open] .ce-faq__a { animation: ce-rise 320ms var(--ease-silk); }

/* ---------- Enquiry sheet ---------- */
.ce-enq { display: grid; gap: 44px; }
@media (min-width: 1025px) { .ce-enq { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; } }
.ce-enq .ce-lead { margin-top: 20px; }
.ce-direct { display: grid; gap: 4px; margin: 32px 0 0; padding: 0; list-style: none; }
.ce-direct a, .ce-direct__row { display: inline-flex; align-items: center; gap: 14px; min-height: 52px; color: var(--c-ivory); text-decoration: none; font-weight: 600; }
.ce-direct a:hover { color: var(--c-marigold); }
.ce-direct .ce-ic { width: 40px; height: 40px; }
.ce-direct .ce-ic .ce-icon { width: 18px; height: 18px; }
.ce-enq__photo { display: none; margin-top: 36px; max-width: 360px; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; }
.ce-enq__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1025px) { .ce-enq__photo { display: block; } }
.ce-formcard { background: var(--c-white); border-radius: 28px; padding: clamp(22px, 4vw, 44px); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.5); color: var(--c-ink-soft); }

/* Compact CTA sheet */
.ce-ctasheet { text-align: center; }
.ce-ctasheet h2 { max-width: 18ch; margin: 14px auto 0; }
.ce-ctasheet .ce-lead { margin: 18px auto 0; }
.ce-ctasheet .ce-actions { justify-content: center; margin-top: 32px; }

/* ---------- Form fields (§8.2, §10) ---------- */
.ce-form { display: grid; gap: 24px; }
.ce-form__note { font-size: 0.8125rem; color: var(--c-ink-soft); }
.ce-form__row { display: grid; gap: 24px; }
@media (min-width: 640px) { .ce-form__row--2 { grid-template-columns: 1fr 1fr; } }
.ce-field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.ce-label, .ce-fieldset legend { padding: 0; font-weight: 600; font-size: 0.875rem; line-height: 1.4; color: var(--c-ink); }
.ce-label .req, .ce-fieldset legend .req { color: var(--c-maroon); }
.ce-label .opt, .ce-fieldset legend .opt { font-weight: 400; color: var(--c-ink-soft); }
.ce-form input:not([type="radio"]):not([type="checkbox"]), .ce-form select, .ce-form textarea {
  width: 100%; min-height: 54px; padding: 0.875rem 1.125rem;
  font: 400 1rem/1.4 var(--f); color: var(--c-ink);
  background: var(--c-ivory); border: 1px solid var(--c-line); border-radius: 14px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background-color var(--dur-fast);
  -webkit-appearance: none; appearance: none;
}
.ce-form textarea { min-height: 128px; resize: vertical; }
.ce-form input::placeholder, .ce-form textarea::placeholder { color: #8E8183; }
.ce-form input:focus, .ce-form select:focus, .ce-form textarea:focus { outline: none; background: var(--c-white); border-color: var(--c-marigold-deep); box-shadow: 0 0 0 4px rgba(233, 169, 58, 0.22); }
.ce-form [aria-invalid="true"] { border-color: var(--c-error) !important; }
.ce-form input[type="date"] { min-width: 0; }
.ce-form input[type="date"]:disabled { opacity: 0.45; }
.ce-tel { display: flex; }
.ce-tel__prefix { display: grid; place-items: center; padding: 0 14px; border: 1px solid var(--c-line); border-right: 0; border-radius: 14px 0 0 14px; background: var(--c-sand); color: var(--c-ink-soft); font-weight: 600; }
.ce-form .ce-tel input { border-radius: 0 14px 14px 0; }
.ce-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.ce-chipset { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ce-choice { position: relative; display: inline-flex; }
.ce-choice input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ce-choice span { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 16px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-white); font-size: 0.875rem; font-weight: 500; line-height: 1.2; color: var(--c-ink); transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.ce-choice span .ce-icon { width: 15px; height: 15px; display: none; stroke-width: 2.2; }
.ce-choice:hover span { border-color: var(--c-gold); }
.ce-choice input:checked + span { background: var(--c-tint); border-color: var(--c-maroon); color: var(--c-maroon); font-weight: 600; }
.ce-choice input:checked + span .ce-icon { display: block; }
.ce-choice input:focus-visible + span { outline: 2px solid var(--c-maroon); outline-offset: 3px; }
.ce-fieldset[aria-invalid="true"] .ce-choice span { border-color: rgba(163, 40, 46, 0.55); }
.ce-check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 0.9375rem; cursor: pointer; justify-self: start; color: var(--c-ink); }
.ce-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--c-maroon); cursor: pointer; }
.ce-error { display: flex; align-items: flex-start; gap: 6px; font-size: 0.875rem; line-height: 1.45; color: var(--c-error); }
.ce-error:empty { display: none; }
.ce-error .ce-icon { width: 16px; height: 16px; margin-top: 2px; }
.ce-more { justify-self: start; display: inline-flex; align-items: center; gap: 10px; text-align: left; min-height: 44px; padding: 0; border: 0; background: none; color: var(--c-maroon); font-weight: 700; font-size: 0.9375rem; }
.ce-more .ce-icon { width: 18px; height: 18px; stroke-width: 2.2; transition: transform var(--dur-base) var(--ease-silk); }
.ce-more[aria-expanded="true"] .ce-icon { transform: rotate(45deg); }
.ce-form__more { display: grid; gap: 24px; }
.ce-form__more:not([hidden]) { animation: ce-rise 450ms var(--ease-silk); }
.ce-form__submit { display: grid; gap: 14px; }
.ce-form__submit .ce-btn { justify-self: start; }
@media (max-width: 639px) { .ce-form__submit .ce-btn { justify-self: stretch; justify-content: space-between; } }
.ce-form__alt { font-size: 0.9375rem; }
.ce-form__alt a { color: var(--c-maroon); font-weight: 700; text-underline-offset: 3px; }
.ce-form__privacy { font-size: 0.8125rem; }
.ce-form__privacy a { color: inherit; text-underline-offset: 3px; }
.ce-form__status { font-size: 0.9375rem; color: var(--c-error); }
.ce-form__status a { color: inherit; }
.ce-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ce-spinner { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ce-spin 0.8s linear infinite; }
.is-loading .ce-spinner { display: block; }
.is-loading .ce-btn__arrow { display: none; }
.ce-sendpanel { display: grid; justify-items: center; gap: 16px; padding: 12px 0; text-align: center; }
.ce-sendpanel h3 { color: var(--c-ink); font-size: 1.375rem; }
.ce-sendpanel p { max-width: 44ch; }
.ce-sendpanel .ce-actions { justify-content: center; margin-top: 6px; }
.ce-sendpanel .ce-btn--outline { padding-right: 8px; }
.ce-sendpanel .ce-more { justify-self: center; }
.ce-checkmark { width: 72px; height: 72px; color: var(--c-sage); }
.ce-checkmark circle, .ce-checkmark path { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-drawn .ce-checkmark circle { animation: ce-draw 700ms var(--ease-silk) forwards; }
.is-drawn .ce-checkmark path { animation: ce-draw 600ms var(--ease-silk) 450ms forwards; }

/* ---------- Footer ---------- */
.ce-footer { margin: 16px var(--inset) 0; padding: clamp(56px, 7vw, 96px) 0 calc(28px + env(safe-area-inset-bottom)); border-radius: var(--r-sheet) var(--r-sheet) 0 0; background: var(--c-wine); color: var(--c-ivory-muted); font-size: 0.9375rem; }
.ce-footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 24px; }
.ce-footer__brand, .ce-footer__contact { grid-column: 1 / -1; }
@media (min-width: 768px) { .ce-footer__grid { grid-template-columns: repeat(3, 1fr); } .ce-footer__contact { grid-column: auto; } }
@media (min-width: 1025px) { .ce-footer__grid { grid-template-columns: 1.5fr 1fr 0.8fr 1.2fr; } .ce-footer__brand { grid-column: auto; } }
.ce-footer__brand p { margin-top: 18px; max-width: 30ch; }
.ce-footer h2 { margin-bottom: 16px; font: 700 0.75rem/1.4 var(--f); letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-marigold); }
.ce-footer ul { margin: 0; padding: 0; list-style: none; }
.ce-footer li + li { margin-top: 2px; }
.ce-footer a { display: inline-flex; align-items: center; min-height: 36px; color: inherit; text-decoration: none; transition: color var(--dur-fast); }
.ce-footer a:hover { color: var(--c-ivory); }
.ce-social { display: flex; gap: 10px; margin-top: 22px; }
.ce-social a { width: 44px; height: 44px; justify-content: center; border: 1px solid rgba(205, 191, 180, 0.3); border-radius: 50%; }
.ce-social a:hover { border-color: var(--c-marigold); color: var(--c-marigold); }
.ce-social .ce-icon { width: 18px; height: 18px; }
.ce-footer__rule { height: 1px; margin: clamp(44px, 6vw, 64px) 0 22px; background: rgba(255, 255, 255, 0.12); }
.ce-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; font-size: 0.8125rem; }
.ce-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 0 22px; }

/* ---------- Mobile action bar ---------- */
.ce-actionbar { position: fixed; inset: auto 0 0; z-index: 60; display: none; grid-template-columns: repeat(3, 1fr); background: var(--c-white); border-top: 1px solid var(--c-line); padding-bottom: env(safe-area-inset-bottom); transition: transform var(--dur-base) var(--ease-silk); }
.ce-actionbar.is-hidden { transform: translateY(100%); }
.ce-actionbar a { min-height: 60px; display: grid; place-content: center; justify-items: center; gap: 4px; font: 700 0.6875rem/1 var(--f); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink); text-decoration: none; }
.ce-actionbar a + a { border-left: 1px solid var(--c-line); }
.ce-actionbar .ce-icon { width: 20px; height: 20px; color: var(--c-maroon); }
.ce-actionbar a:last-child { background: var(--c-marigold); color: var(--c-wine); border-left: 0; }
.ce-actionbar a:last-child .ce-icon { color: var(--c-wine); }
@media (max-width: 767px) { .ce-actionbar { display: grid; } body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); } }

/* ---------- About ---------- */
.ce-split { display: grid; gap: 44px; align-items: center; }
@media (min-width: 1025px) { .ce-split { grid-template-columns: 5fr 7fr; gap: 80px; } .ce-split--rev { grid-template-columns: 7fr 5fr; } .ce-split--rev > :first-child { order: 2; } }
.ce-split h2 { margin-top: 14px; }
.ce-photo { overflow: hidden; border-radius: 24px; background: var(--c-sand); }
.ce-photo img { width: 100%; height: 100%; object-fit: cover; }
.ce-statcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .ce-statcards { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.ce-statcards li { padding: 26px 18px; border-radius: 22px; background: var(--c-white); border: 1px solid var(--c-line); text-align: center; }
.ce-statcards b { display: block; font: 800 var(--t-stat)/1 var(--f); letter-spacing: -0.02em; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.ce-statcards b i { font-style: normal; color: var(--c-marigold-deep); }
.ce-statcards li > span { display: block; margin-top: 10px; font: 700 0.6875rem/1.4 var(--f); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-ink-soft); }
.ce-vm { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 1025px) { .ce-vm { grid-template-columns: 1fr 1fr; gap: 24px; } }
.ce-vm li { padding: clamp(28px, 4vw, 44px); border-radius: 24px; background: var(--c-white); border: 1px solid var(--c-line); }
.ce-vm .ce-q__mark { margin-top: 18px; color: var(--c-marigold); }
.ce-vm p { margin-top: 12px; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.6; font-weight: 500; color: var(--c-ink); }
.ce-values > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.ce-values::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(54, 10, 23, 0.86), rgba(54, 10, 23, 0.93)); }
.ce-values .ce-feats { margin-top: 0; }
@media (min-width: 1025px) { .ce-values .ce-feats { grid-template-columns: repeat(3, 1fr); } }
.ce-bts { margin: 0; }
.ce-bts .ce-photo { aspect-ratio: 16 / 9; }
@media (max-width: 767px) { .ce-bts .ce-photo { aspect-ratio: 4 / 3; } }
.ce-bts figcaption { margin-top: 14px; font-size: 0.9375rem; font-weight: 500; }
.ce-brandrow + .ce-brandrow { margin-top: clamp(56px, 7vw, 96px); }
.ce-brandrow .ce-photo { aspect-ratio: 4 / 3; }
.ce-brandrow h3 { margin-top: 12px; font-size: clamp(1.5rem, 1.3rem + 1vw, 2.125rem); font-weight: 800; letter-spacing: -0.02em; }
.ce-brandrow .ce-body { margin-top: 16px; }
.ce-ticks { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.ce-ticks li { display: flex; align-items: flex-start; gap: 12px; color: var(--c-ink); font-weight: 500; }
.ce-ticks li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--c-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A1E34' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ce-quotes { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 1025px) { .ce-quotes { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.ce-quotecard { height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 24px; background: var(--c-white); border: 1px solid var(--c-line); }
.ce-quotecard blockquote { color: var(--c-ink); font-weight: 500; line-height: 1.6; }
.ce-quotecard figcaption { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--c-line); font-weight: 700; font-size: 0.875rem; color: var(--c-ink); }
.ce-quotecard figcaption small { display: block; margin-top: 2px; font-weight: 500; color: var(--c-ink-soft); }

/* ---------- Décor ---------- */
.ce-subnav, .ce-filters { position: sticky; top: calc(var(--htop) + var(--hh) + 10px); z-index: 20; padding-inline: var(--inset); margin-top: 20px; }
.ce-subnav ul, .ce-filters ul { max-width: max-content; margin: 0 auto; padding: 6px; display: flex; gap: 4px; list-style: none; overflow-x: auto; scrollbar-width: none; background: var(--c-white); border: 1px solid var(--c-line); border-radius: 999px; box-shadow: var(--shadow-soft); }
.ce-subnav ul::-webkit-scrollbar, .ce-filters ul::-webkit-scrollbar { display: none; }
@media (max-width: 767px) { .ce-subnav ul, .ce-filters ul { max-width: 100%; } }
.ce-subnav a, .ce-filter { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; white-space: nowrap; text-decoration: none; font-weight: 600; font-size: 0.875rem; color: var(--c-ink-soft); transition: background-color var(--dur-fast), color var(--dur-fast); }
.ce-subnav a:hover, .ce-filter:hover { color: var(--c-ink); }
.ce-subnav a.is-active, .ce-filter[aria-pressed="true"] { background: var(--c-marigold); color: var(--c-wine); }
.ce-filter .n { font-size: 0.75rem; opacity: 0.75; }
.ce-cat { padding-top: var(--section-y); scroll-margin-top: calc(var(--htop) + var(--hh) + 80px); }
.ce-cat__grid { display: grid; gap: 44px; align-items: center; }
.ce-cat__media { width: 100%; max-width: 380px; margin: 14px auto 0; }
@media (min-width: 1025px) {
  .ce-cat__grid { grid-template-columns: 5fr 7fr; gap: 88px; }
  .ce-cat--mirror .ce-cat__grid { grid-template-columns: 7fr 5fr; }
  .ce-cat--mirror .ce-cat__media { order: 2; }
}
.ce-cat h2 { margin-top: 14px; }
.ce-cat .ce-body { margin-top: 20px; }
.ce-cat .ce-actions { margin-top: 30px; }
.ce-strip4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .ce-strip4 { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.ce-tilephoto { position: relative; display: block; overflow: hidden; aspect-ratio: 1; border-radius: 18px; background: var(--c-sand); }
.ce-tilephoto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-silk); }
.ce-tilephoto:hover img { transform: scale(1.05); }
.ce-cap { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(54, 10, 23, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 700 0.6875rem/1.3 var(--f); color: var(--c-ivory); }

/* ---------- Services page ---------- */
.ce-group + .ce-group { margin-top: clamp(56px, 7vw, 96px); }
.ce-group__head { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; }
.ce-group__head .ce-eyebrow { white-space: nowrap; }
.ce-group__head::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.ce-svcgrid { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .ce-svcgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .ce-svcgrid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.ce-svccard { height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--c-white); border: 1px solid var(--c-line); scroll-margin-top: calc(var(--htop) + var(--hh) + 24px); transition: transform var(--dur-base) var(--ease-silk), box-shadow var(--dur-base) var(--ease-silk); }
.ce-svccard:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.ce-svccard__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 22px 22px 0 0; }
.ce-svccard__media img { width: 100%; height: 100%; object-fit: cover; }
.ce-svccard__media .ce-ph { padding-bottom: 40px; }
.ce-svccard__body { position: relative; padding: 0 22px 26px; }
.ce-svccard__body .ce-ic { position: relative; margin: -26px 0 14px; box-sizing: content-box; border: 4px solid var(--c-white); }
.ce-svccard h3 { font-size: 1.125rem; }
.ce-svccard p { margin-top: 8px; font-size: 0.875rem; line-height: 1.6; }

/* ---------- Gallery ---------- */
.ce-gallery { padding-top: clamp(28px, 3vw, 40px); }
.ce-masonry { columns: 2; column-gap: 10px; margin: 0; padding: 0; list-style: none; }
.ce-masonry > li { break-inside: avoid; margin-bottom: 10px; }
@media (min-width: 1025px) { .ce-masonry { columns: 3; column-gap: 16px; } .ce-masonry > li { margin-bottom: 16px; } }
.ce-work { position: relative; display: block; overflow: hidden; border-radius: 18px; background: var(--c-sand); cursor: zoom-in; }
.ce-work img { width: 100%; height: auto; transition: transform var(--dur-slow) var(--ease-silk); }
.ce-work:hover img { transform: scale(1.04); }
.ce-empty { display: grid; justify-items: center; gap: 16px; padding: 64px 0; text-align: center; }
.ce-empty p { max-width: 46ch; }
.ce-lightbox { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: rgba(29, 20, 22, 0.96); color: var(--c-ivory); visibility: hidden; opacity: 0; transition: opacity 350ms var(--ease-silk), visibility 0s linear 350ms; }
.ce-lightbox.is-open { visibility: visible; opacity: 1; transition: opacity 350ms var(--ease-silk); }
.ce-lightbox__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--pad); }
.ce-lightbox__count { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.1em; color: var(--c-ivory-muted); font-variant-numeric: tabular-nums; }
.ce-lightbox__stage { position: relative; min-height: 0; touch-action: pan-y; }
.ce-lightbox__stage img { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: calc(100% - 2 * var(--pad)); max-height: 100%; object-fit: contain; border-radius: 14px; transform: scale(0.92); transition: transform 350ms var(--ease-silk), opacity 200ms; }
.ce-lightbox.is-open .ce-lightbox__stage img { transform: none; }
.ce-lightbox__stage img.is-swapping { opacity: 0; }
.ce-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.ce-lightbox__nav--prev { left: max(12px, calc(var(--pad) - 32px)); }
.ce-lightbox__nav--next { right: max(12px, calc(var(--pad) - 32px)); }
.ce-lightbox__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 16px var(--pad) calc(20px + env(safe-area-inset-bottom)); }
.ce-lightbox__cap { font-weight: 700; font-size: 1rem; }
@media (max-width: 767px) { .ce-lightbox__nav { display: none; } .ce-lightbox__bottom .ce-btn { width: 100%; justify-content: space-between; } }

/* ---------- Contact ---------- */
.ce-status { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-white); font-size: 0.875rem; font-weight: 600; color: var(--c-ink-soft); }
.ce-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-ink-soft); }
.ce-status[data-open-status="open"]::before { background: var(--c-sage); box-shadow: 0 0 0 4px rgba(94, 110, 88, 0.18); }
.ce-ccards { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .ce-ccards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .ce-ccards { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.ce-contact { height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 26px 22px; border-radius: 24px; background: var(--c-white); border: 1px solid var(--c-line); color: var(--c-ink); text-decoration: none; transition: transform var(--dur-base) var(--ease-silk), box-shadow var(--dur-base) var(--ease-silk), border-color var(--dur-base); }
.ce-contact:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: transparent; }
.ce-contact .ce-ic { margin-bottom: 12px; }
.ce-contact__label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-marigold-deep); }
.ce-contact__value { font-weight: 800; font-size: 1.125rem; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ce-contact__hint { margin-top: auto; padding-top: 4px; font-size: 0.8125rem; color: var(--c-ink-soft); }
.ce-cform { display: grid; gap: 44px; }
@media (min-width: 1025px) { .ce-cform { grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; } .ce-cform__photo { position: sticky; top: calc(var(--htop) + var(--hh) + 32px); } }
.ce-cform .ce-lead { margin-top: 18px; margin-bottom: 32px; }
.ce-cform__photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 24px; }
.ce-cform__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1024px) { .ce-cform__photo { display: none; } }
.ce-tablist { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 6px; margin-bottom: 28px; border-radius: 999px; background: var(--c-white); border: 1px solid var(--c-line); }
.ce-offices { display: grid; gap: 32px; }
@media (min-width: 1025px) { .ce-offices { grid-template-columns: 5fr 7fr; gap: 56px; align-items: stretch; } }
.ce-office h3 { margin-top: 12px; font-size: 1.5rem; font-weight: 800; }
.ce-office address { margin-top: 12px; font-style: normal; max-width: 36ch; }
.ce-office .ce-actions { margin-top: 22px; }
.ce-map { position: relative; min-height: 360px; overflow: hidden; border-radius: 24px; background: var(--c-white); border: 1px solid var(--c-line); }
.ce-map::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 39px, rgba(184, 137, 59, 0.14) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, rgba(184, 137, 59, 0.14) 39px 40px), linear-gradient(115deg, transparent 0 46%, var(--c-sand) 46% 49%, transparent 49%), linear-gradient(25deg, transparent 0 62%, var(--c-sand) 62% 64%, transparent 64%); }
.ce-map__ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; }
.ce-map__pin { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c-wine); color: var(--c-marigold); box-shadow: var(--shadow-card); }
.ce-map__pin .ce-icon { width: 24px; height: 24px; }
.ce-map__ph p { font-weight: 800; font-size: 1.125rem; color: var(--c-ink); }
.ce-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Thank you ---------- */
.ce-thanks { display: grid; gap: 44px; align-items: center; }
@media (min-width: 1025px) { .ce-thanks { grid-template-columns: 7fr 5fr; gap: 88px; } }
.ce-thanks h1 { margin-top: 22px; }
.ce-next { display: grid; gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; counter-reset: step; }
.ce-next li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; color: var(--c-ink); font-weight: 500; }
.ce-next li::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-white); box-shadow: var(--shadow-soft); font-weight: 800; font-size: 0.875rem; color: var(--c-wine); }
.ce-thanks .ce-actions { margin-top: 36px; }
.ce-thanks__photo { aspect-ratio: 4 / 5; max-width: 420px; width: 100%; margin-inline: auto; }

/* ---------- Journal & article ---------- */
.ce-jcard { display: grid; overflow: hidden; border-radius: 28px; background: var(--c-white); border: 1px solid var(--c-line); color: var(--c-ink); text-decoration: none; transition: box-shadow var(--dur-base) var(--ease-silk), transform var(--dur-base) var(--ease-silk); }
.ce-jcard:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); }
@media (min-width: 1025px) { .ce-jcard { grid-template-columns: 7fr 5fr; } }
.ce-jcard__media { aspect-ratio: 16 / 9; overflow: hidden; }
@media (min-width: 1025px) { .ce-jcard__media { aspect-ratio: auto; min-height: 100%; } }
.ce-jcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-silk); }
.ce-jcard:hover .ce-jcard__media img { transform: scale(1.04); }
.ce-jcard__body { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(24px, 4vw, 48px); }
.ce-jcard__body h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem); }
.ce-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 0.8125rem; font-weight: 600; color: var(--c-ink-soft); }
.ce-meta .ce-chip { padding: 5px 12px; background: var(--c-tint); border-color: transparent; color: var(--c-maroon); }
.ce-article__head h1 { margin-top: 16px; font-size: clamp(2rem, 1.6rem + 2vw, 3.25rem); }
.ce-article__head .ce-lead { margin-top: 20px; }
.ce-article__cover { margin-top: 36px; aspect-ratio: 16 / 9; }
.ce-prose { font-size: 1.0625rem; line-height: 1.8; }
.ce-prose > * + * { margin-top: 1.2em; }
.ce-prose > :first-child { margin-top: 0; }
.ce-prose h2 { margin-top: 1.8em; font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); }
.ce-prose h3 { margin-top: 1.6em; font-size: 1.1875rem; }
.ce-prose ul { padding-left: 1.2em; }
.ce-prose li + li { margin-top: 0.5em; }
.ce-prose li::marker { color: var(--c-marigold-deep); }
.ce-prose strong { color: var(--c-ink); }
.ce-prose a:not(.ce-btn) { color: var(--c-maroon); font-weight: 600; text-underline-offset: 3px; }
.ce-pull { margin-block: 2em; padding: 28px 30px; border-radius: 24px; background: var(--c-wine); color: var(--c-ivory); font-weight: 700; font-size: 1.25rem; line-height: 1.45; letter-spacing: -0.01em; }
.ce-pull::before { content: "\201C"; display: block; height: 28px; font-size: 3.5rem; line-height: 1; color: var(--c-marigold); }
.ce-inline-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-block: 2.2em; padding: 24px 28px; border-radius: 24px; background: var(--c-sand); }
.ce-inline-cta p { margin: 0; font-weight: 800; font-size: 1.125rem; color: var(--c-ink); }
.ce-related { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .ce-related { grid-template-columns: repeat(3, 1fr); } }
.ce-related a { height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 22px; background: var(--c-white); border: 1px solid var(--c-line); color: var(--c-ink); text-decoration: none; transition: transform var(--dur-base) var(--ease-silk), box-shadow var(--dur-base); }
.ce-related a:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.ce-related strong { font-weight: 800; font-size: 1.0625rem; }
.ce-related span { font-size: 0.875rem; color: var(--c-ink-soft); }
.ce-updated { margin-top: 14px; font-size: 0.8125rem; font-weight: 600; }

/* ---------- 404 ---------- */
.ce-404 { min-height: calc(100svh - 160px); display: grid; place-items: center; text-align: center; }
.ce-404__arch { width: 140px; aspect-ratio: 3 / 4; margin: 0 auto 28px; display: grid; place-items: center; border: 1px solid var(--c-gold); border-radius: 999px 999px 18px 18px; font-weight: 800; font-size: 2.25rem; color: var(--c-marigold); }
.ce-404 h1 { max-width: 16ch; margin-inline: auto; }
.ce-404 .ce-lead { margin: 20px auto 0; }
.ce-404 .ce-actions { justify-content: center; margin-top: 32px; }

/* ---------- Scroll reveals (M6) — only when JS is running ---------- */
.js .ce-reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-reveal) var(--ease-expo), transform var(--dur-reveal) var(--ease-expo); transition-delay: calc(var(--i, 0) * 80ms); }
.js .ce-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Reduced motion (§7.4) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .ce-wall__track, .ce-strip__t, .ce-badge svg, .ce-ccard__ph img { animation: none !important; }
  .ce-ccard__ph img:first-child { opacity: 1; }
  .ce-wall__track > [aria-hidden="true"], .ce-strip__t > [aria-hidden="true"], .ce-wall__pause, .ce-hero__pause { display: none; }
  .ce-strip__t { flex-wrap: wrap; width: auto; justify-content: center; padding: 6px 20px; }
  .js .ce-reveal { opacity: 1; transform: none; }
  .js .ce-steps__path { clip-path: none; }
  .ce-checkmark circle, .ce-checkmark path { stroke-dashoffset: 0; }
}

/* =========================================================
   Premium pass — serif display, champagne gold foil, velvet sheets,
   lotus ornament, refined UI type (layered over the v3 base above)
   ========================================================= */
body { letter-spacing: 0.005em; }

/* Gold-foil accent phrase: serif italic in a gold gradient */
.ce-accent {
  font-family: var(--f-display); font-style: italic; font-weight: 600;
  background: var(--gold-text-light); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-right: 0.04em;
}
.ce-sheet .ce-accent { background-image: var(--gold-text-dark); color: transparent; }
@media (forced-colors: active) { .ce-accent, .ce-sheet .ce-accent, .ce-stats b, .ce-statcards b, .ce-q__mark { background: none; color: CanvasText; } }

/* Eyebrows: finer, wider tracking */
.ce-eyebrow { font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.32em; }

/* Centred section heads get a small gold ornament: line, diamond, line */
.ce-head--center::after { content: ""; display: block; width: 132px; height: 12px; margin: 22px auto 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='12'%3E%3Cpath d='M0 6h54M78 6h54' stroke='%23B8893B' stroke-width='1'/%3E%3Cpath d='M66 1l5 5-5 5-5-5z' fill='none' stroke='%23B8893B'/%3E%3Ccircle cx='66' cy='6' r='1.4' fill='%23B8893B'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Buttons: uppercase, gold foil with a soft sheen on hover */
.ce-btn {
  position: relative; overflow: hidden; isolation: isolate;
  font-weight: 600; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--gold-foil); background-size: 160% 100%; background-position: 0% 50%; color: var(--c-wine-deep);
  box-shadow: 0 12px 30px -14px rgba(176, 130, 54, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: background-position 600ms var(--ease-silk), box-shadow var(--dur-base), transform var(--dur-fast), opacity var(--dur-base);
}
.ce-btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, transparent 66%);
  transform: translateX(-120%); transition: transform 900ms var(--ease-silk);
}
.ce-btn:hover { background: var(--gold-foil); background-size: 160% 100%; background-position: 100% 50%; box-shadow: 0 16px 36px -14px rgba(176, 130, 54, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.ce-btn:hover::after { transform: translateX(120%); }
.ce-btn__ic { background: var(--c-wine-deep); color: var(--c-marigold); }
.ce-btn--ghost, .ce-btn--outline { box-shadow: none; }
.ce-btn--ghost { background: rgba(255, 255, 255, 0.04); color: var(--c-ivory); border: 1px solid rgba(227, 188, 106, 0.55); }
.ce-btn--ghost:hover { background: rgba(227, 188, 106, 0.14); box-shadow: none; }
.ce-btn--outline { background: transparent; color: var(--c-ink); border: 1px solid rgba(131, 94, 31, 0.45); }
.ce-btn--outline:hover { background: var(--c-white); border-color: var(--c-gold-deep); box-shadow: none; }
.ce-btn--ghost::after, .ce-btn--outline::after { display: none; }
.ce-link { font-weight: 600; letter-spacing: 0.02em; }

/* Header: frosted glass with a gold hairline; small-caps navigation */
.ce-header__bar { background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-color: rgba(184, 137, 59, 0.3); }
.ce-nav a { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.ce-nav a[aria-current="page"]::after { background: var(--c-gold); }
.ce-hphone b { font-weight: 600; }

/* Velvet wine sheets: deep radial glow, fine grain, gold inner hairline */
.ce-sheet, .ce-footer {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(110% 80% at 88% 0%, #64203A 0%, rgba(100, 32, 58, 0) 58%),
    radial-gradient(90% 70% at 0% 100%, #3A0B19 0%, rgba(58, 11, 25, 0) 60%),
    var(--c-wine);
  box-shadow: inset 0 0 0 1px rgba(227, 188, 106, 0.16);
}
.ce-sheet::before { opacity: 0.35; }
.ce-footer { position: relative; isolation: isolate; overflow: hidden; }
.ce-lotus { position: absolute; right: -60px; bottom: -40px; z-index: -1; width: min(52vw, 520px); height: auto; color: var(--c-marigold); opacity: 0.09; pointer-events: none; fill: none; stroke: currentColor; stroke-width: 1.1; }
.ce-lotus * { vector-effect: non-scaling-stroke; }

/* Hero */
.ce-tag { border-color: rgba(227, 188, 106, 0.45); font-weight: 600; letter-spacing: 0.24em; font-size: 0.625rem; }
.ce-hero__media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 160px rgba(20, 4, 9, 0.55); }
.ce-stats { border-color: rgba(227, 188, 106, 0.22); }
.ce-stats b, .ce-statcards b { font-family: var(--f-display); font-weight: 600; letter-spacing: 0; }
.ce-stats b { background: var(--gold-text-dark); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ce-statcards b { background: var(--gold-text-light); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ce-stats b i, .ce-statcards b i { color: inherit; }
.ce-stats li > span, .ce-statcards li > span { font-weight: 600; letter-spacing: 0.24em; font-size: 0.625rem; }

/* Occasion strip in serif italic */
.ce-occ__h { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem); letter-spacing: 0; }
.ce-occ__h b { font-weight: 700; color: var(--c-maroon); }
.ce-strip { border-color: rgba(184, 137, 59, 0.3); }
.ce-strip__t span { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 1.375rem; color: var(--c-ink); }

/* Cards and tiles: serif titles, gold hairlines */
.ce-ccard { box-shadow: inset 0 0 0 1px rgba(227, 188, 106, 0.18); }
.ce-ccard h3 { font-size: 1.625rem; }
.ce-cel > :first-child .ce-ccard h3 { font-size: clamp(1.875rem, 1.5rem + 1.2vw, 2.5rem); }
.ce-ccard__go { border-color: rgba(227, 188, 106, 0.5); }
.ce-ccard--soon .ce-lotus { right: -40px; bottom: auto; top: -20px; width: 280px; opacity: 0.13; }
.ce-ccard__big { opacity: 0.6; width: 52px; height: 52px; top: 24px; right: auto; bottom: auto; left: 22px; }
.ce-feat, .ce-wall--quotes figure, .ce-wall--quotes .ce-wall__col:nth-child(2) figure:nth-child(odd) { background: rgba(255, 255, 255, 0.035); border-color: rgba(227, 188, 106, 0.18); }
.ce-feat h3 { font-size: 1.5rem; }
.ce-step h3 { font-size: 1.625rem; }
.ce-step__num { font-family: var(--f-display); font-weight: 600; font-size: 2.25rem; color: var(--c-gold-deep); }
.ce-tile { border-color: rgba(184, 137, 59, 0.22); }
.ce-tile b { font-family: var(--f-display); font-weight: 600; font-size: 1.375rem; line-height: 1.15; }
.ce-svccard, .ce-brand, .ce-contact, .ce-quotecard, .ce-vm li, .ce-faq details, .ce-jcard, .ce-related a, .ce-statcards li { border-color: rgba(184, 137, 59, 0.22); }
.ce-svccard h3 { font-size: 1.5rem; }
.ce-brand__body h3, .ce-office h3 { font-size: 1.875rem; font-weight: 600; }
.ce-brandrow h3 { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: 600; letter-spacing: 0; }
.ce-contact__value { font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; letter-spacing: 0; }
.ce-related strong { font-family: var(--f-display); font-weight: 600; font-size: 1.375rem; }

/* Reviews and quotes in serif italic */
.ce-q__mark { font-family: var(--f-display); font-weight: 600; font-size: 4.5rem; height: 34px; background: var(--gold-text-dark); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ce-vm .ce-q__mark { background-image: var(--gold-text-light); }
.ce-wall--quotes blockquote { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 1.25rem; line-height: 1.5; border-left-color: rgba(227, 188, 106, 0.35); }
.ce-quotecard blockquote { font-family: var(--f-display); font-style: italic; font-size: 1.3125rem; line-height: 1.5; }
.ce-vm p { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.45; }
.ce-pull { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 1.625rem; }
.ce-inline-cta p { font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; }

/* FAQ in serif */
.ce-faq summary { font-family: var(--f-display); font-weight: 600; font-size: 1.3125rem; line-height: 1.3; }

/* Captions: small caps */
.ce-wall figcaption, .ce-cap { font-weight: 600; font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* Photo frames: a fine gold inner edge on rounded photos */
.ce-photo, .ce-tilephoto, .ce-work, .ce-enq__photo, .ce-cform__photo { position: relative; }
.ce-photo::after, .ce-tilephoto::after, .ce-work::after, .ce-enq__photo::after, .ce-cform__photo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(227, 188, 106, 0.3);
}

/* A designed tile where a photo is still to come: velvet wine with a gold icon */
.ce-ph {
  overflow: hidden; isolation: isolate; color: var(--c-marigold); gap: 14px;
  background: radial-gradient(90% 70% at 50% 0%, #64203A 0%, rgba(100, 32, 58, 0) 70%), linear-gradient(180deg, var(--c-wine) 0%, var(--c-wine-deep) 100%);
}
.ce-ph::before { inset: 10px; border: 1px solid rgba(227, 188, 106, 0.3); border-radius: 12px; }
.ce-ph .ce-icon { width: 44px; height: 44px; stroke-width: 1.2; }
.ce-ph__label { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 1.5rem; color: var(--c-ivory); }
.ce-ph .ce-lotus { right: 50%; bottom: -24%; transform: translateX(50%); width: 130%; opacity: 0.1; }

/* Footer headings and action bar */
.ce-footer h2 { letter-spacing: 0.28em; font-weight: 600; font-size: 0.6875rem; }
.ce-actionbar a:last-child { background: var(--gold-foil); color: var(--c-wine-deep); }

/* Full-height numerals where numbers carry information */
.ce-stats b, .ce-statcards b, .ce-occ__h, .ce-contact__value, .ce-step__num, .ce-ratecard b { font-variant-numeric: lining-nums; }
.ce-wall--quotes figcaption small { text-transform: none; letter-spacing: 0.02em; font-weight: 500; font-size: 0.75rem; }

/* Celebration cards with exactly two photos: 10 s crossfade instead of the three-photo 15 s cycle */
.ce-ccard__ph img:first-child:nth-last-child(2), .ce-ccard__ph img:first-child:nth-last-child(2) ~ img { animation-name: ce-fx2; animation-duration: 10s; }
.ce-ccard__ph img:first-child:nth-last-child(2) ~ img { animation-delay: calc(var(--d, -0.6s) + 5s); }
@keyframes ce-fx2 { 0% { opacity: 0; } 3% { opacity: 1; } 50% { opacity: 1; } 53% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ce-ccard__ph img { animation: none !important; } }

/* Journal index: smaller cards under the featured article */
.ce-jgrid { display: grid; gap: 20px; margin: 24px 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .ce-jgrid { grid-template-columns: 1fr 1fr; } }
.ce-jcard--small { height: 100%; grid-template-columns: 1fr !important; }
.ce-jcard--small .ce-jcard__media { aspect-ratio: 16 / 9 !important; min-height: 0 !important; }
.ce-jcard--small .ce-jcard__body { justify-content: flex-start; padding: 26px 28px 30px; }
.ce-jcard--small h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); }

/* Lighthouse fixes: legible caption size, filter-count contrast, selected office tab */
.ce-wall figcaption, .ce-cap { font-size: 0.75rem; letter-spacing: 0.08em; }
.ce-filter .n { opacity: 1; color: var(--c-ink-soft); }
.ce-filter[aria-pressed="true"] .n, .ce-filter[aria-selected="true"] .n { color: inherit; }
.ce-filter[aria-selected="true"] { background: var(--c-marigold); color: var(--c-wine); }
/* Lightbox: soften the page behind so captions don't show through */
.ce-lightbox.is-open { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
/* Hero overlay lightened (11 Oct 2026): the video shows in full colour; only the area behind the text is softly shaded */
.ce-hero__media::after { display: none; }
.ce-hero::after { background: linear-gradient(90deg, rgba(36, 7, 15, 0.66) 0%, rgba(36, 7, 15, 0.5) 30%, rgba(36, 7, 15, 0.16) 52%, rgba(36, 7, 15, 0) 66%); }
@media (max-width: 767px) {
  .ce-hero::after { background: linear-gradient(180deg, rgba(36, 7, 15, 0.22) 0%, rgba(36, 7, 15, 0.46) 22%, rgba(36, 7, 15, 0.5) 70%, rgba(36, 7, 15, 0.3) 100%); }
}
.ce-hero h1, .ce-hero .ce-lead, .ce-hero .ce-rating-line { text-shadow: 0 1px 2px rgba(20, 4, 9, 0.6), 0 2px 22px rgba(20, 4, 9, 0.7); }
.ce-hero .ce-lead, .ce-hero .ce-rating-line { color: var(--c-ivory); }
.ce-hero h1 .ce-accent { text-shadow: none; filter: drop-shadow(0 1px 2px rgba(20, 4, 9, 0.65)) drop-shadow(0 2px 16px rgba(20, 4, 9, 0.6)); }
.ce-hero .ce-btn--ghost { background: rgba(36, 7, 15, 0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* =========================================================
   Luxury pass (v3.3, 11 Oct 2026): flat colour instead of foil gradients, fewer badges,
   quieter surfaces, lighter display weights, editorial lists
   ========================================================= */

/* Headlines a touch lighter; the italic accent is plain colour, not a gradient */
.ce-section h2, .ce-sheet h2 { font-weight: 500; letter-spacing: -0.005em; }
.ce-accent { background: none; color: var(--c-maroon); font-weight: 500; }
.ce-sheet .ce-accent { background-image: none; color: var(--c-marigold); }
.ce-stats b, .ce-statcards b, .ce-q__mark, .ce-vm .ce-q__mark { background: none; }
.ce-stats b { color: var(--c-ivory); }
.ce-stats b i { color: var(--c-marigold); }
.ce-statcards b { color: var(--c-wine); }
.ce-q__mark { color: var(--c-marigold); }
.ce-vm .ce-q__mark { color: var(--c-gold-deep); }

/* Eyebrows: a fine rule instead of the arch; no ornament under centred titles */
.ce-eyebrow::before { width: 28px; height: 1px; border: 0; border-radius: 0; background: currentColor; opacity: 0.8; }
.ce-head--center .ce-eyebrow::before { display: none; }
.ce-head--center::after { display: none; }

/* Buttons: solid wine on light, solid champagne on wine; no sheen */
.ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline) { background: var(--c-wine); color: var(--c-ivory); box-shadow: none; transition: background-color 500ms var(--ease-silk), transform var(--dur-fast), opacity var(--dur-base); }
.ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline):hover { background: var(--c-wine-2); box-shadow: none; }
.ce-btn::after { display: none; }
.ce-btn__ic { background: rgba(251, 247, 241, 0.14); color: var(--c-ivory); }
.ce-sheet .ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline), .ce-hero .ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline) { background: var(--c-marigold); color: var(--c-wine-deep); }
.ce-sheet .ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline):hover { background: var(--c-marigold-hi); }
.ce-sheet .ce-btn__ic { background: var(--c-wine-deep); color: var(--c-marigold); }
.ce-formcard .ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline) { background: var(--c-wine); color: var(--c-ivory); }
.ce-formcard .ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline):hover { background: var(--c-wine-2); }
.ce-formcard .ce-btn__ic { background: rgba(251, 247, 241, 0.14); color: var(--c-ivory); }
.ce-btn--outline { border-color: rgba(36, 25, 28, 0.28); transition: background-color 400ms var(--ease-silk), color 400ms var(--ease-silk), border-color 400ms; }
.ce-btn--outline:hover { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-ivory); }
.ce-actionbar a:last-child { background: var(--c-wine); color: var(--c-ivory); }

/* Quieter wine panels: no grain or dot grid; the lotus only on closing call-to-action panels */
.ce-sheet, .ce-footer { background: radial-gradient(110% 80% at 88% 0%, #5E1C33 0%, rgba(94, 28, 51, 0) 58%), var(--c-wine); }
.ce-sheet::before { display: none; }
.ce-sheet > .ce-lotus { display: none; }
.ce-ctasheet > .ce-lotus, #enquiry > .ce-lotus { display: block; }

/* Hero: an editorial line instead of the pill tag, an understated text link */
.ce-hero .ce-tag, .ce-phero .ce-tag { padding: 0; border: 0; background: none; font-size: 0.6875rem; letter-spacing: 0.32em; text-shadow: 0 1px 10px rgba(20, 4, 9, 0.6); }
.ce-hero .ce-tag::before, .ce-phero .ce-tag::before { width: 28px; height: 1px; border-radius: 0; box-shadow: none; background: var(--c-marigold); }
.ce-link--light { color: var(--c-ivory); }
.ce-hero .ce-link, .ce-phero .ce-link { font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; background-size: 100% 1px; text-shadow: 0 1px 2px rgba(20, 4, 9, 0.6), 0 2px 18px rgba(20, 4, 9, 0.7); }
.ce-hero .ce-link:hover, .ce-phero .ce-link:hover { background-size: 0% 1px; background-position: right calc(50% + 0.8em); }

/* Occasion strip: a ruled band rather than a pill */
.ce-strip { max-width: none; border-radius: 0; border-inline: 0; background: none; box-shadow: none; border-color: rgba(184, 137, 59, 0.35); }
@media (prefers-reduced-motion: reduce) {
  .ce-strip { -webkit-mask: none; mask: none; }
  .ce-strip__t { gap: 0; padding: 14px 8px; }
  .ce-strip__t span { padding: 8px 0 8px 18px; font-size: 1.125rem; }
  .ce-strip__t span::after { margin-left: 18px; }
}

/* Why us: facts as label/value pairs; open, hairline-ruled points instead of boxed cards */
.ce-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin: 32px 0 0; }
.ce-facts > div { padding: 16px 0; border-top: 1px solid rgba(227, 188, 106, 0.28); }
.ce-facts dt { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-marigold); }
.ce-facts dd { margin-top: 6px; font-family: var(--f-display); font-size: 1.25rem; font-weight: 500; line-height: 1.25; color: var(--c-ivory); }
.ce-feat { padding: 28px 0 0; border: 0; border-top: 1px solid rgba(227, 188, 106, 0.28); border-radius: 0; background: none; }
.ce-feat h3 { margin-top: 16px; font-weight: 500; }
.ce-feats { gap: 8px 40px; }

/* Services: a numbered editorial list */
.ce-svclist { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(184, 137, 59, 0.3); }
@media (min-width: 900px) { .ce-svclist { grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 5vw, 80px); } }
.ce-svclist a { display: grid; grid-template-columns: 44px 1fr auto; grid-template-areas: "n t go" "n d go"; gap: 6px 16px; align-items: baseline; height: 100%; padding: 24px 0; border-bottom: 1px solid rgba(184, 137, 59, 0.3); color: inherit; text-decoration: none; }
.ce-svclist__n { grid-area: n; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; color: var(--c-gold-deep); font-variant-numeric: lining-nums tabular-nums; }
.ce-svclist__t { grid-area: t; font-family: var(--f-display); font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem); font-weight: 500; line-height: 1.1; color: var(--c-ink); transition: color 400ms var(--ease-silk), transform 600ms var(--ease-expo); }
.ce-svclist__d { grid-area: d; font-size: 0.875rem; line-height: 1.55; color: var(--c-ink-soft); }
.ce-svclist__go { grid-area: go; align-self: center; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(36, 25, 28, 0.18); color: var(--c-maroon); transition: background-color 400ms var(--ease-silk), color 400ms, border-color 400ms; }
.ce-svclist__go .ce-icon { width: 16px; height: 16px; }
.ce-svclist a:hover .ce-svclist__t, .ce-svclist a:focus-visible .ce-svclist__t { color: var(--c-maroon); transform: translateX(6px); }
.ce-svclist a:hover .ce-svclist__go, .ce-svclist a:focus-visible .ce-svclist__go { background: var(--c-wine); border-color: var(--c-wine); color: var(--c-ivory); }

/* Reviews: open cards with a hairline, no tinted fill */
.ce-wall--quotes figure, .ce-wall--quotes .ce-wall__col:nth-child(2) figure:nth-child(odd) { background: transparent; border-color: rgba(227, 188, 106, 0.22); }
.ce-facts dd, .ce-ratecard b, .ce-svclist__n { font-variant-numeric: lining-nums; }
/* Enquiry (desktop): the photo fills the space beside the form and ends level with it, so there is no empty band under the form */
@media (min-width: 1025px) {
  .ce-enq { align-items: stretch; }
  .ce-enq > :first-child { display: flex; flex-direction: column; }
  .ce-enq__photo { flex: 1 1 0; min-height: 220px; aspect-ratio: auto; }
  .ce-enq__photo img { position: absolute; inset: 0; }
}

/* Header (v3.3): deep wine glass with the gold logo, ivory small-caps navigation, a gold underline on hover
   and a champagne call to action */
.ce-header__bar {
  background: linear-gradient(180deg, rgba(84, 20, 38, 0.95) 0%, rgba(54, 10, 23, 0.95) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(227, 188, 106, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 14px 34px -18px rgba(54, 10, 23, 0.65);
}
.ce-header.is-scrolled .ce-header__bar { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 44px -16px rgba(36, 7, 15, 0.8); }
.ce-header :focus-visible { outline-color: var(--c-marigold); }
.ce-nav a { color: rgba(251, 247, 241, 0.9); }
.ce-nav a::before { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: var(--c-marigold); transform: scaleX(0); transform-origin: right; transition: transform 450ms var(--ease-expo); }
.ce-nav a:hover, .ce-nav a:focus-visible, .ce-nav a[aria-current="page"] { color: var(--c-marigold); }
.ce-nav a:hover::before, .ce-nav a:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.ce-nav a[aria-current="page"]::after { background: var(--c-marigold); }
.ce-hphone { color: var(--c-ivory); }
.ce-hphone small { color: var(--c-marigold); opacity: 0.9; }
.ce-hphone__ic { background: rgba(227, 188, 106, 0.12); color: var(--c-marigold); box-shadow: inset 0 0 0 1px rgba(227, 188, 106, 0.4); transition: background-color 400ms var(--ease-silk), color 400ms; }
.ce-hphone:hover .ce-hphone__ic { background: var(--c-marigold); color: var(--c-wine-deep); }
.ce-header .ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline) { background: var(--c-marigold); color: var(--c-wine-deep); }
.ce-header .ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline):hover { background: var(--c-marigold-hi); }
.ce-header .ce-btn__ic { background: var(--c-wine-deep); color: var(--c-marigold); }
.ce-header .ce-header__call { color: var(--c-marigold); background: transparent; border-color: rgba(227, 188, 106, 0.45); }
.ce-header .ce-header__call:hover { background: rgba(227, 188, 106, 0.14); }
.ce-header .ce-menu-btn { background: var(--c-marigold); color: var(--c-wine-deep); border-color: var(--c-marigold); }
.ce-header .ce-menu-btn:hover { background: var(--c-marigold-hi); color: var(--c-wine-deep); border-color: var(--c-marigold-hi); }

/* =========================================================
   v3.4 motion: opening animation (home, first page of a visit), word-by-word headlines,
   photo unveils, gentle parallax, a slow zoom on the hero and a gold shine on its accent
   ========================================================= */

/* ---- Opening: four slanted photo panels, the logo, then the panels part to reveal the hero ---- */
.ce-opening { display: none; }
html.ce-opening-run .ce-opening { position: fixed; inset: 0; z-index: 95; display: block; overflow: hidden; background: rgb(54, 10, 23); }
.ce-opening { --s: min(20svh, 14vw); --g: clamp(6px, 0.7vw, 10px); }
/* four upright panels cut into slanted parallelograms (clip-path), overlapping by the slant so the gaps line up */
.ce-opening__panels { position: absolute; top: 0; bottom: 0; left: calc(var(--s) * -0.5); right: calc(var(--s) * -0.5); display: grid; grid-template-columns: repeat(4, 1fr); }
.ce-opening__panel {
  position: relative; min-width: 0; margin: 0 calc(var(--s) * -0.5); overflow: hidden; background: var(--c-wine);
  clip-path: polygon(calc(var(--s) + var(--g) / 2) 0, calc(100% - var(--g) / 2) 0, calc(100% - var(--s) - var(--g) / 2) 100%, calc(var(--g) / 2) 100%);
}
.ce-opening__panel:nth-child(odd) { translate: 0 -105%; }
.ce-opening__panel:nth-child(even) { translate: 0 105%; }
.ce-opening__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; scale: 1.18; }
.ce-opening__panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36, 7, 15, 0) 55%, rgba(36, 7, 15, 0.65) 100%); }
.ce-opening__panel figcaption {
  position: absolute; left: calc(50% - var(--s) * 0.34); bottom: 16%; z-index: 1; translate: -50% 0; opacity: 0;
  white-space: nowrap; font: 600 clamp(0.5625rem, 0.48rem + 0.35vw, 0.8125rem)/1 var(--f); letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--c-ivory); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.ce-opening__panel:first-child figcaption { left: calc(50% + var(--s) * 0.2); }
@media (max-width: 599px) { .ce-opening__panel figcaption { display: none; } }
.ce-opening__brand {
  position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(36, 7, 15, 0.55) 0, rgba(36, 7, 15, 0) min(40vw, 420px));
}
.ce-opening__brand img { width: clamp(118px, 12vw, 180px); height: auto; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.45)); }
.ce-opening__tag { margin-top: 8px; font-family: var(--f-display); font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.5rem); font-weight: 500; line-height: 1.1; color: var(--c-ivory); }
.ce-opening__tag em { font-style: italic; color: var(--c-marigold); }
.ce-opening__sub { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-marigold); }
.ce-opening__tag, .ce-opening__sub { opacity: 0; }
/* while the opening plays, the hero and header wait; they make their entrance as the panels part */
html.ce-opening-run:not(.ce-opened) .ce-hero .ce-rise,
html.ce-opening-run:not(.ce-opened) .ce-hero .ce-words .w > span { animation-play-state: paused; }
html.ce-opening-run:not(.ce-opened) .ce-header__bar { opacity: 0; translate: 0 -28px; }
html.ce-opening-run .ce-header__bar { transition: opacity 0.8s var(--ease-silk) 0.45s, translate 1s var(--ease-expo) 0.45s, box-shadow var(--dur-base) var(--ease-silk); }

/* ---- Headlines rise word by word (page titles on load, section titles as they scroll into view) ---- */
.ce-words .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.07em 0.16em; margin: 0 -0.07em -0.16em; }
.ce-words .w > span { display: inline-block; }
@keyframes ce-word { from { translate: 0 112%; } }
h1.ce-words .w > span { animation: ce-word 1.15s var(--ease-expo) both; animation-delay: calc(0.18s + var(--wi) * 70ms); }
.js .ce-reveal h2.ce-words .w > span { transition: translate 1.1s var(--ease-expo); transition-delay: calc(0.1s + var(--wi) * 55ms); }
.js .ce-reveal:not(.is-in) h2.ce-words .w > span { translate: 0 112%; }

/* the hero headline: soft shadow on the whole line (not per word), and a slow gold shine across the accent */
.ce-hero h1 { text-shadow: none; filter: drop-shadow(0 1px 2px rgba(20, 4, 9, 0.55)) drop-shadow(0 4px 22px rgba(20, 4, 9, 0.5)); }
.ce-hero h1 .ce-accent { filter: none; }
.ce-hero h1 .ce-accent .w > span {
  background: linear-gradient(100deg, var(--c-marigold) 0 42%, #FFF4D6 50%, var(--c-marigold) 58% 100%) 100% 0 / 260% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ce-word 1.15s var(--ease-expo) both, ce-shine 7s ease-in-out infinite;
  animation-delay: calc(0.18s + var(--wi) * 70ms), calc(2.4s + var(--wi) * 110ms);
}
@keyframes ce-shine { 0%, 58% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (forced-colors: active) { .ce-hero h1 .ce-accent .w > span { background: none; color: CanvasText; } }

/* ---- Photos unveil from the bottom and settle as they scroll into view ---- */
.js :is(.ce-ccard__ph, .ce-brand__media, .ce-arch, .ce-jcard__media, .ce-svccard__media, .ce-tilephoto, .ce-enq__photo, .ce-photo) img {
  transition: clip-path 1.4s var(--ease-expo) calc(var(--i, 0) * 90ms), scale 1.9s var(--ease-expo) calc(var(--i, 0) * 90ms);
}
.js :is(.ce-reveal:not(.is-in) :is(.ce-ccard__ph, .ce-brand__media, .ce-arch, .ce-jcard__media, .ce-svccard__media, .ce-tilephoto, .ce-enq__photo), .ce-photo.ce-reveal:not(.is-in)) img {
  clip-path: inset(100% 0 0 0); scale: 1.2;
}

/* ---- Gentle parallax on the large feature photos (browsers with scroll-driven animations) ---- */
.ce-why__media .ce-arch img, .ce-brand__media img, .ce-split .ce-photo img { scale: 1.14; }
@keyframes ce-par { from { translate: 0 -6%; } to { translate: 0 6%; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ce-why__media .ce-arch img, .ce-brand__media img, .ce-split .ce-photo img { animation: ce-par linear both; animation-timeline: view(); animation-range: cover; }
  }
}

/* ---- The hero video drifts in very slowly ---- */
@keyframes ce-kb { from { scale: 1; } to { scale: 1.07; } }
@media (prefers-reduced-motion: no-preference) {
  .ce-hero__media img, .ce-hero__media video { animation: ce-kb 26s ease-in-out infinite alternate; }
}

@media (prefers-reduced-motion: reduce) {
  .ce-words .w > span { animation: none !important; translate: none !important; }
  .js :is(.ce-ccard__ph, .ce-brand__media, .ce-arch, .ce-jcard__media, .ce-svccard__media, .ce-tilephoto, .ce-enq__photo, .ce-photo) img { clip-path: none !important; }
}

/* Service cards without photos (11 Oct 2026): a gold-ringed icon, serif title and description on a clean card */
.ce-svccard { padding: clamp(26px, 2.4vw, 34px) clamp(22px, 2vw, 28px) clamp(24px, 2.2vw, 30px); transition: transform 500ms var(--ease-expo), box-shadow 500ms var(--ease-silk), border-color 400ms; }
.ce-svccard:hover { border-color: rgba(184, 137, 59, 0.55); }
.ce-svccard__body { padding: 0; }
.ce-svccard__body .ce-ic { width: 54px; height: 54px; margin: 0 0 24px; border: 0; background: var(--c-ivory); color: var(--c-maroon); box-shadow: inset 0 0 0 1px rgba(184, 137, 59, 0.45); transition: background-color 400ms var(--ease-silk), color 400ms; }
.ce-svccard__body .ce-ic .ce-icon { width: 22px; height: 22px; }
.ce-svccard:hover .ce-ic { background: var(--c-wine); color: var(--c-marigold); box-shadow: none; }
.ce-svccard h3 { font-weight: 500; line-height: 1.15; }
.ce-svccard p { margin-top: 10px; }
@media (max-width: 599px) {
  .ce-svccard { padding: 22px 20px; }
  .ce-svccard__body { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: start; }
  .ce-svccard__body .ce-ic { grid-row: span 2; width: 48px; height: 48px; margin: 2px 0 0; }
  .ce-svccard h3 { font-size: 1.375rem; }
  .ce-svccard p { margin-top: 6px; }
}

/* Service cards are links to the enquiry form (with the service ticked) */
a.ce-svccard { color: inherit; text-decoration: none; }
.ce-svccard__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 22px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-gold-deep); }
.ce-svccard__go span { transition: transform 400ms var(--ease-expo); }
.ce-svccard:hover .ce-svccard__go, .ce-svccard:focus-visible .ce-svccard__go { color: var(--c-maroon); }
.ce-svccard:hover .ce-svccard__go span, .ce-svccard:focus-visible .ce-svccard__go span { transform: translateX(5px); }
@media (max-width: 599px) { .ce-svccard__go { padding: 14px 0 0 66px; } }

/* Wine panels clip their contents without becoming a scroll container, so sticky elements inside them
   (the contact-page photo beside the long form) stay pinned while the page scrolls */
.ce-sheet { overflow: clip; }
/* the photo-frame rule above set position: relative on .ce-cform__photo, which cancelled its sticky position */
@media (min-width: 1025px) { .ce-cform__photo { position: sticky; } }

/* Hero pause button: out of sight (owner's request, 11 Oct 2026) but still reachable from the keyboard and by
   screen readers, so the moving video keeps a pause control (WCAG 2.2.2); it appears only when tabbed to */
.ce-hero__pause:not(:focus-visible) { opacity: 0; pointer-events: none; }

/* Opening: the photos dim behind the logo with a shade layer (captions stay crisp above it) */
.ce-opening__dim { position: absolute; inset: 0; background: rgba(28, 5, 12, 0.62); opacity: 0; }

/* Brighter gold logo on wine, with a faint glow */
.ce-header .ce-logo img, .ce-drawer .ce-logo img { filter: drop-shadow(0 0 10px rgba(240, 205, 127, 0.18)); }

/* Footer credit: designed & managed by Usher Media */
.ce-credit { display: grid; justify-items: center; gap: 18px; margin-top: clamp(36px, 5vw, 56px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid rgba(255, 255, 255, 0.08); text-align: center; }
.ce-credit__label { display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(251, 247, 241, 0.62); }
.ce-credit__label em { font-family: var(--f-display); font-style: italic; font-size: 1.5rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--c-marigold); vertical-align: -0.12em; }
.ce-credit__line { position: relative; flex: none; width: clamp(36px, 7vw, 72px); height: 1px; background: linear-gradient(90deg, rgba(227, 188, 106, 0), rgba(227, 188, 106, 0.85)); }
.ce-credit__line::after { content: ""; position: absolute; right: -3px; top: 50%; width: 6px; height: 6px; background: var(--c-marigold); transform: translateY(-50%) rotate(45deg); }
.ce-credit__line--r { transform: scaleX(-1); }
.ce-credit__pill { display: inline-flex; align-items: center; gap: 14px; padding: 8px 26px 8px 8px; border-radius: 999px; border: 1px solid rgba(227, 188, 106, 0.32); background: rgba(255, 255, 255, 0.035); font-family: var(--f-display); font-size: 1.375rem; font-weight: 600; letter-spacing: 0.06em; color: var(--c-marigold); }
.ce-credit__mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #12050A; box-shadow: inset 0 0 0 1px rgba(227, 188, 106, 0.4); font-family: var(--f-display); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.02em; color: var(--c-ivory); }
@media (max-width: 420px) { .ce-credit__label { gap: 10px; letter-spacing: 0.24em; } }

/* hover pauses a photo-wall column only where there is a real mouse (touch screens keep a "hover" after a tap,
   which would leave the column stuck; there a tap toggles .is-held instead) */
@media (hover: hover) { .ce-wall__col:hover .ce-wall__track { animation-play-state: paused; } }

/* =========================================================
   Client form (12 Oct 2026): "no lag and clumsy look". Fewer things moving and no blur on moving parts.
   ========================================================= */
/* photo captions: solid backing instead of a live blur (32 moving photos each re-blurred every frame) */
.ce-wall figcaption, .ce-cap { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(36, 7, 15, 0.84); }
/* review cards keep their open, transparent name line (the solid backing is only for captions on photos) */
.ce-wall--quotes figcaption { background: none; }
/* the header and the hero stats bar sit over moving content: solid, not blurred */
.ce-header__bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(180deg, #541426 0%, #360A17 100%); }
.ce-stats { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(36, 7, 15, 0.74); }
/* no constant background motion: the hero video plays as filmed, the accent shine and photo parallax are gone */
.ce-hero__media img, .ce-hero__media video { animation: none !important; }
.ce-hero h1 .ce-accent .w > span { animation: ce-word 1.15s var(--ease-expo) both; animation-delay: calc(0.18s + var(--wi) * 70ms); background: none; color: var(--c-marigold); }
.ce-why__media .ce-arch img, .ce-brand__media img, .ce-split .ce-photo img { animation: none !important; scale: 1; }
/* footer tagline */
.ce-footer__tagline { margin-top: 18px; font-family: var(--f-display); font-size: 1.375rem; font-weight: 500; line-height: 1.3; color: var(--c-ivory); }
.ce-footer__tagline em { font-style: italic; color: var(--c-marigold); }
.ce-footer__brand .ce-footer__tagline + p { margin-top: 8px; }
/* Usher Media logo in the footer credit (white mark on black, shown round) */
img.ce-credit__mark { display: block; flex: none; object-fit: cover; border-radius: 50%; }

/* Pricing page (12 Oct 2026) */
.ce-factors { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .ce-factors { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.ce-factor { height: 100%; padding: clamp(26px, 2.4vw, 34px) clamp(22px, 2vw, 28px); border-radius: 22px; background: var(--c-white); border: 1px solid rgba(184, 137, 59, 0.22); }
.ce-factor .ce-ic { width: 54px; height: 54px; background: var(--c-ivory); color: var(--c-maroon); box-shadow: inset 0 0 0 1px rgba(184, 137, 59, 0.45); }
.ce-factor .ce-ic .ce-icon { width: 22px; height: 22px; }
.ce-factor h3 { margin-top: 22px; font-size: 1.5rem; font-weight: 500; }
.ce-factor p { margin-top: 10px; font-size: 0.9375rem; line-height: 1.6; color: var(--c-ink-soft); }
.ce-payglance { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(227, 188, 106, 0.28); }
@media (min-width: 768px) { .ce-payglance { grid-template-columns: repeat(3, 1fr); border-top: 0; } .ce-payglance li + li { border-left: 1px solid rgba(227, 188, 106, 0.28); } }
.ce-payglance li { padding: 28px 24px; text-align: center; border-bottom: 1px solid rgba(227, 188, 106, 0.28); }
@media (min-width: 768px) { .ce-payglance li { border-bottom: 0; } }
.ce-payglance b { display: block; font-family: var(--f-display); font-size: clamp(3rem, 2.4rem + 2.4vw, 4.5rem); font-weight: 500; line-height: 1; color: var(--c-marigold); font-variant-numeric: lining-nums; }
.ce-payglance span { display: block; margin-top: 12px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-ivory); }
.ce-payglance p { max-width: 26ch; margin: 10px auto 0; font-size: 0.9375rem; line-height: 1.6; }
.ce-terms { display: grid; gap: 0 clamp(40px, 5vw, 80px); margin: 0; border-top: 1px solid rgba(184, 137, 59, 0.3); }
@media (min-width: 900px) { .ce-terms { grid-template-columns: 1fr 1fr; } }
.ce-terms > div { padding: 22px 0; border-bottom: 1px solid rgba(184, 137, 59, 0.3); }
.ce-terms dt { font-family: var(--f-display); font-size: 1.375rem; font-weight: 500; line-height: 1.2; color: var(--c-ink); }
.ce-terms dd { margin: 8px 0 0; font-size: 0.9375rem; line-height: 1.65; color: var(--c-ink-soft); }
/* legal pages: sub-headings for the payment terms */
.ce-prose h3 { margin-top: 22px; font-size: 1.25rem; }
.ce-prose h3 + p { margin-top: 6px; }
/* the Usher Media credit links to their website */
a.ce-credit__pill { text-decoration: none; transition: border-color 400ms var(--ease-silk), background-color 400ms var(--ease-silk); }
a.ce-credit__pill:hover, a.ce-credit__pill:focus-visible { border-color: var(--c-marigold); background: rgba(227, 188, 106, 0.1); }

/* =========================================================
   Pastel theme (14 Oct 2026, client): soft blush, peach, sage and lavender sections on ivory,
   dark ink text, deep-rose and gold accents. The hero keeps its video with light text.
   ========================================================= */
:root {
  /* Lavender & pearl white (client reference, 14 Oct 2026). The five earlier pastels now all
     resolve to lavender or pearl, so every section alternates between the two. */
  --p-lav: #E9E2F5; --p-lav-deep: #DCD2EE; --p-pearl: #FBF8F3;
  /* The page sits on white so the pearl bands read as their own surface rather than
     disappearing into the background. */
  --p-page: #FFFFFF;
  --p-blush: var(--p-pearl); --p-peach: var(--p-lav); --p-sage: var(--p-pearl); --p-mauve: var(--p-lav-deep);
  --p-ink: #271F33; --p-ink-soft: #4D4360;
  --p-rose: #5B4484; --p-rose-hi: #6D5399; --p-gold: #7A5718;
  --p-line: rgba(91, 68, 132, 0.18);
}
body { background: var(--p-page); }

/* The pastel pass repainted sections and headings but left the shared accent tokens on the
   old maroon/gold, so links, chips, icons and form controls still clashed. Repointing the
   tokens themselves covers every one of them; the dark hero, values band and footer set
   their own colours below and are unaffected. */
body {
  --c-maroon: var(--p-rose);
  --c-gold: var(--p-gold);
  --c-gold-deep: var(--p-gold);
  --c-marigold: var(--p-rose);
  --c-marigold-hi: var(--p-rose-hi);
  --c-marigold-deep: var(--p-gold);
  --c-tint: rgba(91, 68, 132, 0.10);
  --c-line: var(--p-line);
  --c-ink: var(--p-ink);
}
.ce-hero, .ce-values, .ce-footer, .ce-opening {
  --c-maroon: #7A1E34; --c-gold: #B8893B; --c-gold-deep: #835E1F;
  --c-marigold: #E3BC6A; --c-marigold-hi: #EDCB85; --c-marigold-deep: #835E1F;
  --c-tint: rgba(227, 188, 106, 0.16); --c-line: #E6DED2; --c-ink: #24191C;
}

/* sections: each its own pastel */
.ce-sheet:not(.ce-hero), .ce-footer { background: var(--p-blush); color: var(--p-ink-soft); box-shadow: inset 0 0 0 1px var(--p-line); }
.ce-sheet[aria-labelledby="why-title"], .ce-sheet[aria-labelledby="pay-title"] { background: var(--p-sage); }
.ce-sheet[aria-labelledby="wall-title"], .ce-404 { background: var(--p-lav); }
.ce-sheet[aria-labelledby="reviews-title"], .ce-ctasheet { background: var(--p-peach); }
.ce-footer { background: var(--p-mauve); }
.ce-sheet:not(.ce-hero) > .ce-lotus, .ce-footer > .ce-lotus { color: var(--p-rose); opacity: 0.08; }

/* text inside the pastel sections */
.ce-sheet:not(.ce-hero) :is(h1, h2, h3), .ce-footer h3 { color: var(--p-ink); }
.ce-sheet:not(.ce-hero) .ce-accent, .ce-sheet:not(.ce-hero) .ce-accent .w > span { color: var(--p-rose); background: none; }
.ce-sheet:not(.ce-hero) .ce-eyebrow, .ce-sheet:not(.ce-hero) .ce-tag, .ce-footer h2 { color: var(--p-gold); }
.ce-sheet:not(.ce-hero) .ce-tag { text-shadow: none; }
.ce-sheet:not(.ce-hero) .ce-tag::before { background: var(--p-gold); }
.ce-sheet:not(.ce-hero) :is(.ce-lead, .ce-body, p) { color: var(--p-ink-soft); }
.ce-sheet:not(.ce-hero) .ce-link, .ce-sheet:not(.ce-hero) .ce-link--light { color: var(--p-rose); text-shadow: none; }
.ce-sheet:not(.ce-hero) .ce-crumbs ol { color: var(--p-ink-soft); }
.ce-sheet:not(.ce-hero) .ce-crumbs a:hover { color: var(--p-rose); }
.ce-sheet:not(.ce-hero) :focus-visible, .ce-footer :focus-visible { outline-color: var(--p-rose); }
.ce-sheet:not(.ce-hero) .ce-iconbtn { color: var(--p-ink); border-color: var(--p-line); background: rgba(255, 255, 255, 0.6); }
.ce-sheet:not(.ce-hero) .ce-iconbtn:hover { color: var(--p-rose); border-color: var(--p-rose); }

/* buttons: deep rose with white text everywhere outside the hero; the hero keeps gold over the video */
.ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline),
.ce-sheet:not(.ce-hero) .ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline),
.ce-formcard .ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline),
.ce-header .ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline) { background: var(--p-rose); color: #fff; }
.ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline):hover,
.ce-sheet:not(.ce-hero) .ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline):hover,
.ce-header .ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline):hover { background: var(--p-rose-hi); }
.ce-btn__ic, .ce-sheet:not(.ce-hero) .ce-btn__ic, .ce-header .ce-btn__ic, .ce-formcard .ce-btn__ic { background: rgba(255, 255, 255, 0.2); color: #fff; }
.ce-hero .ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline) { background: var(--c-marigold); color: var(--c-wine-deep); }
.ce-hero .ce-btn__ic { background: var(--c-wine-deep); color: var(--c-marigold); }
.ce-btn--outline:hover { background: var(--p-rose); border-color: var(--p-rose); color: #fff; }
.ce-actionbar a:last-child { background: var(--p-rose); color: #fff; }

/* header: light glass with a blush hairline */
.ce-header__bar { background: rgba(251, 248, 243, 0.94); border-color: var(--p-line); box-shadow: 0 10px 30px -18px rgba(91, 68, 132, 0.35); }
.ce-header.is-scrolled .ce-header__bar { box-shadow: 0 14px 36px -16px rgba(91, 68, 132, 0.4); }
.ce-header .ce-logo img { filter: none; }
.ce-nav a { color: var(--p-ink); }
.ce-nav a:hover, .ce-nav a:focus-visible, .ce-nav a[aria-current="page"] { color: var(--p-rose); }
.ce-nav a::before, .ce-nav a[aria-current="page"]::after { background: var(--p-rose); }
.ce-hphone { color: var(--p-ink); }
.ce-hphone small { color: var(--p-gold); opacity: 1; }
.ce-hphone__ic { background: var(--p-blush); color: var(--p-rose); box-shadow: inset 0 0 0 1px var(--p-line); }
.ce-hphone:hover .ce-hphone__ic { background: var(--p-rose); color: #fff; }
.ce-header :focus-visible { outline-color: var(--p-rose); }
.ce-header .ce-header__call { color: var(--p-rose); border-color: var(--p-line); background: #fff; }
.ce-header .ce-menu-btn { background: var(--p-rose); color: #fff; border-color: var(--p-rose); }
.ce-header .ce-menu-btn:hover { background: var(--p-rose-hi); border-color: var(--p-rose-hi); color: #fff; }

/* phone menu */
.ce-drawer { background: var(--p-blush); color: var(--p-ink); }
.ce-drawer nav a, .ce-drawer__foot a { color: var(--p-ink); }
.ce-drawer nav a[aria-current="page"], .ce-drawer__foot .ce-icon { color: var(--p-rose); }
.ce-drawer .ce-logo img { filter: none; }
.ce-drawer .ce-iconbtn--dark { color: var(--p-ink); border-color: var(--p-line); background: #fff; }

/* footer */
.ce-footer { color: var(--p-ink-soft); }
.ce-footer a { color: var(--p-ink); }
.ce-footer a:hover { color: var(--p-rose); }
.ce-footer__rule, .ce-credit { border-color: var(--p-line); }
.ce-footer__rule { background: var(--p-line); }
.ce-footer__tagline { color: var(--p-ink); }
.ce-footer__tagline em { color: var(--p-rose); }
.ce-footer .ce-iconbtn { color: var(--p-ink); border-color: var(--p-line); background: rgba(255, 255, 255, 0.6); }
.ce-credit__label { color: var(--p-ink-soft); }
.ce-credit__label em { color: var(--p-rose); }
.ce-credit__line { background: linear-gradient(90deg, rgba(91, 68, 132, 0), rgba(91, 68, 132, 0.6)); }
.ce-credit__line::after { background: var(--p-rose); }
.ce-credit__pill { color: var(--p-ink); border-color: var(--p-line); background: rgba(255, 255, 255, 0.7); }
a.ce-credit__pill:hover, a.ce-credit__pill:focus-visible { border-color: var(--p-rose); background: #fff; }

/* components that sit in the pastel sections */
.ce-sheet:not(.ce-hero) .ce-chip { background: rgba(255, 255, 255, 0.6); border-color: var(--p-line); color: var(--p-ink); }
.ce-sheet:not(.ce-hero) .ce-chip small, .ce-sheet:not(.ce-hero) .ce-chip b { color: var(--p-gold); }
.ce-facts > div, .ce-feat { border-color: rgba(122, 87, 24, 0.25); }
.ce-facts dt { color: var(--p-gold); }
.ce-facts dd { color: var(--p-ink); }
.ce-sheet:not(.ce-hero) .ce-ic { background: rgba(255, 255, 255, 0.7); color: var(--p-rose); }
.ce-wall--quotes figure, .ce-wall--quotes .ce-wall__col:nth-child(2) figure:nth-child(odd) { background: rgba(255, 255, 255, 0.55); border-color: var(--p-line); }
.ce-wall--quotes blockquote { color: var(--p-ink); border-left-color: rgba(91, 68, 132, 0.3); }
.ce-wall--quotes figcaption { color: var(--p-ink); border-top-color: var(--p-line); }
.ce-wall--quotes figcaption small { color: var(--p-ink-soft); }
.ce-sheet:not(.ce-hero) .ce-q__mark { color: var(--p-rose); }
.ce-gpill { color: var(--p-ink); border-color: var(--p-line); background: rgba(255, 255, 255, 0.6); }
.ce-gpill:hover { background: #fff; }
.ce-direct a, .ce-direct__row { color: var(--p-ink); }
.ce-direct a:hover { color: var(--p-rose); }
.ce-sheet:not(.ce-hero) .ce-direct .ce-ic { background: #fff; color: var(--p-rose); }
.ce-payglance, .ce-payglance li, .ce-payglance li + li { border-color: rgba(122, 87, 24, 0.25); }
.ce-payglance b { color: var(--p-rose); }
.ce-payglance span { color: var(--p-gold); }
.ce-404__arch { color: var(--p-rose); border-color: rgba(91, 68, 132, 0.35); }
.ce-sheet:not(.ce-hero) .ce-ph { background: var(--p-mauve); color: var(--p-rose); }
.ce-sheet:not(.ce-hero) .ce-ph__label { color: var(--p-ink); }
.ce-sheet:not(.ce-hero) .ce-wall__pause { color: var(--p-ink); background: rgba(255, 255, 255, 0.8); border-color: var(--p-line); }
/* pastel: section colours that need the extra weight, and the outline-style button on pastel */
.ce-sheet.ce-404 { background: var(--p-lav); }
.ce-sheet.ce-ctasheet { background: var(--p-peach); }
.ce-sheet:not(.ce-hero) .ce-btn--ghost { color: var(--p-ink); border-color: rgba(91, 68, 132, 0.45); background: rgba(255, 255, 255, 0.6); }
.ce-sheet:not(.ce-hero) .ce-btn--ghost:hover { background: #fff; border-color: var(--p-rose); color: var(--p-rose); }
/* pastel: photo-slot tiles (no photo yet) in soft mauve instead of wine */
.ce-ph { background: radial-gradient(90% 70% at 50% 0%, #F2ECFA 0%, rgba(242, 236, 250, 0) 70%), var(--p-mauve); color: var(--p-rose); }
.ce-ph::before { border-color: rgba(91, 68, 132, 0.25); }
.ce-ph .ce-lotus { color: var(--p-rose); opacity: 0.1; }
.ce-ph__label { color: var(--p-ink); }
.ce-ccard--soon { background: var(--p-mauve); box-shadow: inset 0 0 0 1px var(--p-line); }
.ce-ccard--soon::after { background: linear-gradient(180deg, rgba(244, 232, 238, 0) 40%, rgba(244, 232, 238, 0.95) 100%); }
.ce-ccard--soon h3 { color: var(--p-ink); }
.ce-ccard--soon p { color: var(--p-ink-soft); }
.ce-ccard--soon .ce-ccard__big { color: var(--p-rose); opacity: 0.75; }
.ce-ccard--soon .ce-ccard__go { color: var(--p-rose); background: #fff; border-color: var(--p-line); }
.ce-ccard--soon:hover .ce-ccard__go, .ce-ccard--soon:focus-visible .ce-ccard__go { background: var(--p-rose); color: #fff; border-color: var(--p-rose); }
/* pastel opening: blush background, photos fade to a blush wash behind the logo, ink and rose text */
html.ce-opening-run .ce-opening { background: #F9E4E8; }
.ce-opening__panel { background: #F4E8EE; }
.ce-opening__panel::after { background: linear-gradient(180deg, rgba(233, 226, 245, 0) 55%, rgba(233, 226, 245, 0.9) 100%); }
.ce-opening__panel figcaption { color: #2E2326; text-shadow: 0 1px 10px rgba(255, 255, 255, 0.8); }
.ce-opening__dim { background: rgba(252, 238, 241, 0.8); }
.ce-opening__brand { background: radial-gradient(circle at 50% 50%, rgba(251, 248, 243, 0.7) 0, rgba(251, 248, 243, 0) min(40vw, 420px)); }
.ce-opening__brand img { filter: drop-shadow(0 6px 22px rgba(91, 68, 132, 0.18)); }
.ce-opening__tag { color: #2E2326; }
.ce-opening__tag em { color: #8E3F58; }
.ce-opening__sub { color: #7A5718; }

/* =========================================================
   Floating photos (14 Oct 2026): a slow, gentle rise and fall, staggered so nothing moves in step.
   Feature photos drift 10 px over 7-9 s; photos in grids drift 5 px. Uses `translate`, which the GPU
   animates without repainting, and is switched off for visitors who ask for reduced motion.
   The photo wall, hero video, opening and photo viewer keep their own motion.
   ========================================================= */
@keyframes ce-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 var(--fy, -10px); } }
@media (prefers-reduced-motion: no-preference) {
  /* feature photos */
  .ce-archframe, .ce-photo, .ce-enq__photo, .ce-cform__photo, .ce-brand {
    animation: ce-float var(--ft, 8s) ease-in-out var(--fd, 0s) infinite;
  }
  /* the arch at the top of each page: float starts once its entrance has played */
  .ce-phero__media.ce-rise {
    animation: ce-rise var(--dur-reveal) var(--ease-expo) both, ce-float 8s ease-in-out infinite;
    animation-delay: var(--d, 0s), 1.4s;
  }
  .ce-brands > li:nth-child(2) .ce-brand { --fd: -3.5s; --ft: 9s; }
  .ce-split .ce-photo { --ft: 9s; }
  .ce-why__media .ce-archframe { --ft: 7.5s; }

  /* photos in grids: smaller drift, each one offset so the grid moves like a slow wave */
  .ce-ccard, .ce-tilephoto, .ce-work, .ce-jcard { --fy: -5px; animation: ce-float var(--ft, 7s) ease-in-out var(--fd, 0s) infinite; }
  /* the gallery grid (61 photos) stays still: floating them all costs about 3 fps on a slow phone,
     and the photos there are already the focus. Cards, tiles and journal covers still float. */
  .ce-masonry .ce-work { animation: none; }
  :is(.ce-cel, .ce-strip4, .ce-jgrid, .ce-masonry) > :nth-child(3n + 2) :is(.ce-ccard, .ce-tilephoto, .ce-work, .ce-jcard) { --fd: -2.4s; --ft: 7.8s; }
  :is(.ce-cel, .ce-strip4, .ce-jgrid, .ce-masonry) > :nth-child(3n + 3) :is(.ce-ccard, .ce-tilephoto, .ce-work, .ce-jcard) { --fd: -4.6s; --ft: 8.6s; }
  :is(.ce-cel, .ce-strip4, .ce-jgrid, .ce-masonry) > :nth-child(4n) :is(.ce-ccard, .ce-tilephoto, .ce-work, .ce-jcard) { --fd: -1.2s; }
}
/* the floating photos wait until the opening animation has finished, so it stays smooth */
html.ce-opening-run:not(.ce-opened) :is(.ce-archframe, .ce-photo, .ce-enq__photo, .ce-cform__photo, .ce-brand, .ce-ccard, .ce-tilephoto, .ce-work, .ce-jcard) { animation-play-state: paused; }

/* Contact page: both phone numbers shown the same size under "Call us" (client request, 14 Oct) */
.ce-contact__value--pair { display: flex; flex-direction: column; gap: 2px; }

/* "Our values" keeps its dark photo, so the pastel sheet colours would hide the text on it */
.ce-sheet.ce-values { background: var(--c-wine-deep); box-shadow: none; }
.ce-sheet.ce-values::after { background: linear-gradient(180deg, rgba(62, 26, 40, 0.86), rgba(46, 35, 38, 0.92)); }
.ce-sheet.ce-values :is(h1, h2, h3) { color: var(--c-ivory); }
.ce-sheet.ce-values .ce-accent, .ce-sheet.ce-values .ce-accent .w > span { color: var(--p-blush); }
.ce-sheet.ce-values .ce-eyebrow { color: #E7C9A8; }
.ce-sheet.ce-values :is(.ce-lead, .ce-body, p) { color: rgba(251, 247, 241, 0.84); }
.ce-sheet.ce-values .ce-ic { background: rgba(251, 247, 241, 0.14); color: var(--p-blush); }

/* Card hairlines were hardcoded rgba gold, so they could not follow the pastel tokens above. */
.ce-svccard, .ce-brand, .ce-contact, .ce-quotecard, .ce-vm li, .ce-faq details, .ce-jcard,
.ce-related a, .ce-statcards li, .ce-tile, .ce-strip, .ce-factor, .ce-terms, .ce-svclist {
  border-color: var(--p-line);
}
.ce-ccard { box-shadow: inset 0 0 0 1px var(--p-line); }
.ce-ccard__go { border-color: rgba(201, 162, 78, 0.5); }
.ce-header__bar { border-color: var(--p-line); }

/* Active pill is now deep rose, so its label needs white rather than the old dark wine. */
.ce-subnav a.is-active, .ce-filter[aria-pressed="true"], .ce-filter[aria-selected="true"] { color: #fff; }

/* Form fields kept the old warm ivory/sand fills and a marigold focus ring, which read as
   cream against the lavender palette. */
.ce-form input:not([type="radio"]):not([type="checkbox"]), .ce-form select, .ce-form textarea { background: #F6F3FB; }
.ce-form input:focus, .ce-form select:focus, .ce-form textarea:focus { border-color: var(--p-rose); box-shadow: 0 0 0 4px rgba(91, 68, 132, 0.18); }
.ce-form input::placeholder, .ce-form textarea::placeholder { color: #857C94; }
.ce-tel__prefix { background: var(--p-lav-deep); color: var(--p-ink-soft); }
.bg-sand { background: var(--p-pearl); }

/* Dark surfaces were still wine red from the original theme, which fought the violet.
   A deep aubergine keeps them dark without leaving the lavender family. */
body {
  --c-wine: #2E2142; --c-wine-deep: #241A34; --c-wine-2: #3B2B55;
}
.ce-sheet.ce-values { background: #2E2142; }
.ce-sheet.ce-values::after { background: linear-gradient(180deg, rgba(46, 33, 66, 0.86), rgba(36, 26, 52, 0.92)); }
.ce-sheet.ce-values .ce-accent, .ce-sheet.ce-values .ce-accent .w > span,
.ce-sheet.ce-values .ce-ic { color: var(--p-lav); }

/* ---- Gold accent (client request) ----------------------------------------
   Gold carries the small ceremonial details: eyebrow labels, their rules, the
   review stars and the logo mark. No single gold is legible on both the light
   bands and the aubergine, so the dark surfaces take a lighter one. */
body { --p-gold: #6F4E12; --p-gold-lit: #D9B470; }
.ce-sheet:not(.ce-hero) .ce-eyebrow, .ce-section .ce-eyebrow,
.ce-sheet:not(.ce-hero) .ce-tag, .ce-footer h2 { color: var(--p-gold); }
.ce-eyebrow::before, .ce-sheet:not(.ce-hero) .ce-tag::before { background: var(--p-gold); }
.ce-stars { color: #B8893B; }
.ce-hero .ce-tag, .ce-hero .ce-tag::before,
.ce-sheet.ce-values .ce-eyebrow, .ce-footer .ce-stars { color: var(--p-gold-lit); }
.ce-hero .ce-tag::before, .ce-sheet.ce-values .ce-eyebrow::before { background: var(--p-gold-lit); }

/* ---- More gold: numerals, quote marks, step rings, arch frames, ticks ---- */
.ce-statcards b i, .ce-stats b i { color: var(--p-gold); }
.ce-q__mark, .ce-vm .ce-q__mark { color: #B8893B; }
.ce-step__num { color: var(--p-rose); }
.ce-step__num::before { border-color: #C9A24E; }
.ce-archframe::before { border-color: rgba(201, 162, 78, 0.55); }
.ce-ticks li::before {
  background: rgba(201, 162, 78, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F4E12' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.ce-sheet:not(.ce-hero) .ce-lotus, .ce-footer .ce-lotus { color: #B8893B; opacity: 0.1; }
.ce-credit__line { background: linear-gradient(90deg, rgba(201, 162, 78, 0), rgba(201, 162, 78, 0.7)); }
.ce-facts dt, .ce-payglance span, .ce-hphone small { color: var(--p-gold); }
.ce-sheet.ce-values .ce-ic { background: rgba(217, 180, 112, 0.16); color: var(--p-gold-lit); }

/* ---- Gold buttons (client request) -------------------------------------
   Marigold with deep aubergine text: 8.26:1, and white on gold would fail, so
   the label stays dark. The arrow pill inverts to keep it visible on the gold. */
.ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline),
.ce-sheet:not(.ce-hero) .ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline),
.ce-formcard .ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline),
.ce-header .ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline),
.ce-hero .ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline) { background: #E3BC6A; color: #2E2142; }
.ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline):hover,
.ce-sheet:not(.ce-hero) .ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline):hover,
.ce-formcard .ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline):hover,
.ce-header .ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline):hover { background: #EDCB85; }
.ce-btn__ic, .ce-sheet:not(.ce-hero) .ce-btn__ic,
.ce-header .ce-btn__ic, .ce-formcard .ce-btn__ic { background: #2E2142; color: #E3BC6A; }
.ce-actionbar a:last-child { background: #E3BC6A; color: #2E2142; }
.ce-btn--outline:hover { background: #E3BC6A; border-color: #E3BC6A; color: #2E2142; }

/* The secondary (outline) buttons were still a plain grey hairline, so they read as
   un-themed next to the gold solids. Gold border and label, filling in on hover. */
.ce-btn--outline { border: 1px solid #C9A24E; color: var(--p-gold); box-shadow: none; background: transparent; }
.ce-btn--outline:hover { background: #E3BC6A; border-color: #E3BC6A; color: #2E2142; box-shadow: none; }

/* ---- Gold as the accent colour (client request) -------------------------
   Gold takes every role the old theme gave it: links, icons, accent words,
   card hairlines and the filter pills. Lavender and pearl stay the surfaces.
   #6F4E12 is the text-weight gold (7.1:1 on pearl, 6.0:1 on lavender);
   #C9A24E is for borders and large fills where contrast is not a concern. */
body {
  --c-maroon: #6F4E12; --c-marigold: #C9A24E; --c-marigold-hi: #E3BC6A;
  --c-tint: rgba(201, 162, 78, 0.16); --c-line: rgba(201, 162, 78, 0.34);
  --p-line: rgba(201, 162, 78, 0.34);
}
.ce-sheet:not(.ce-hero) .ce-accent, .ce-sheet:not(.ce-hero) .ce-accent .w > span,
.ce-section .ce-accent, .ce-accent .w > span { color: var(--p-gold); }
.ce-sheet:not(.ce-hero) .ce-link, .ce-sheet:not(.ce-hero) .ce-link--light,
.ce-link, .ce-more, .ce-svclist__go, .ce-ccard__go, .ce-ccard__big,
.ce-faq__i, .ce-q__mark, .ce-step__num, .req { color: var(--p-gold); }
.ce-ic, .ce-ic--light, .ce-hphone__ic { background: var(--c-tint); color: var(--p-gold); }
.ce-filter[aria-pressed="true"], .ce-filter[aria-selected="true"],
.ce-subnav a.is-active { background: #E3BC6A; color: #2E2142; }
.ce-chip { background: var(--c-tint); color: var(--p-gold); }
.ce-tel__prefix { background: var(--c-tint); color: var(--p-gold); }
.ce-svccard, .ce-brand, .ce-contact, .ce-quotecard, .ce-vm li, .ce-faq details,
.ce-jcard, .ce-related a, .ce-statcards li, .ce-tile, .ce-strip, .ce-factor,
.ce-terms, .ce-svclist, .ce-header__bar, .ce-map, .ce-tablist { border-color: var(--p-line); }
.ce-footer__rule, .ce-credit { border-color: var(--p-line); }
.ce-sheet.ce-values .ce-accent, .ce-sheet.ce-values .ce-accent .w > span { color: var(--p-gold-lit); }

/* Anything still reaching for --p-rose (icons, placeholder arches, emphasis, the
   mobile menu button) should be gold too, so the token itself becomes gold.
   Buttons and the dark bands set their own colours above and are unaffected. */
body { --p-rose: #6F4E12; --p-rose-hi: #8A6516; }

/* ---- Pearl pages, lavender features (client request) --------------------
   Pearl white is the page background everywhere. Lavender is kept for the
   feature panels that should stand out: the "why trust us" band, the photo
   wall, the reviews and the closing call to action. */
body { background: var(--p-pearl); }
.bg-sand, .ce-section { background: transparent; }
.ce-sheet:not(.ce-hero) { background: var(--p-pearl); }
.ce-sheet[aria-labelledby="why-title"],
.ce-sheet[aria-labelledby="wall-title"],
.ce-sheet[aria-labelledby="reviews-title"],
.ce-sheet[aria-labelledby="pay-title"],
.ce-ctasheet, .ce-404 { background: var(--p-lav); }
.ce-sheet.ce-ctasheet, .ce-sheet.ce-404 { background: var(--p-lav); }
.ce-sheet.ce-values { background: #2E2142; }

/* Flat surfaces: the static fold gradients are gone, the moving sweep below stays. */
body { background: var(--p-pearl); }
.ce-sheet[aria-labelledby="why-title"], .ce-sheet[aria-labelledby="wall-title"],
.ce-sheet[aria-labelledby="reviews-title"], .ce-sheet[aria-labelledby="pay-title"],
.ce-sheet.ce-ctasheet, .ce-sheet.ce-404 { background: var(--p-lav); }
.ce-sheet:not(.ce-hero):not(.ce-values):not(.ce-ctasheet):not(.ce-404):not([aria-labelledby="why-title"]):not([aria-labelledby="wall-title"]):not([aria-labelledby="reviews-title"]):not([aria-labelledby="pay-title"]) { background: var(--p-pearl); }
.ce-footer { background: var(--p-mauve); }
.ce-sheet:not(.ce-hero) .ce-ph, .ce-ph { background: var(--p-lav); }


/* ---- Light sweep across the lavender panels -----------------------------
   A soft highlight travels top-left to bottom-right, like light moving over
   satin. It sits above the fills but below the content, and it never
   intercepts clicks. Honours reduced-motion. */
.ce-sheet[aria-labelledby="why-title"], .ce-sheet[aria-labelledby="wall-title"],
.ce-sheet[aria-labelledby="reviews-title"], .ce-sheet[aria-labelledby="pay-title"],
.ce-sheet.ce-ctasheet, .ce-sheet.ce-404 { position: relative; overflow: hidden; }

.ce-sheet[aria-labelledby="why-title"]::after, .ce-sheet[aria-labelledby="wall-title"]::after,
.ce-sheet[aria-labelledby="reviews-title"]::after, .ce-sheet[aria-labelledby="pay-title"]::after,
.ce-sheet.ce-ctasheet::after, .ce-sheet.ce-404::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -60%; left: -60%; width: 220%; height: 220%;
  background: linear-gradient(118deg,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,0.38) 46%,
    rgba(255,255,255,0.75) 50%,
    rgba(255,255,255,0.38) 54%,
    rgba(255,255,255,0) 62%);
  transform: translate3d(-55%, -55%, 0);
  animation: ce-satin-sweep 7s cubic-bezier(0.45, 0, 0.3, 1) infinite;
  will-change: transform;
}
/* content sits above the sweep */
.ce-sheet[aria-labelledby="why-title"] > .ce-wrap, .ce-sheet[aria-labelledby="wall-title"] > .ce-wrap,
.ce-sheet[aria-labelledby="reviews-title"] > .ce-wrap, .ce-sheet[aria-labelledby="pay-title"] > .ce-wrap,
.ce-sheet.ce-ctasheet > .ce-wrap, .ce-sheet.ce-404 > .ce-wrap { position: relative; z-index: 1; }

@keyframes ce-satin-sweep {
  0%   { transform: translate3d(-55%, -55%, 0); }
  55%  { transform: translate3d(55%, 55%, 0); }
  100% { transform: translate3d(55%, 55%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ce-sheet[aria-labelledby="why-title"]::after, .ce-sheet[aria-labelledby="wall-title"]::after,
  .ce-sheet[aria-labelledby="reviews-title"]::after, .ce-sheet[aria-labelledby="pay-title"]::after,
  .ce-sheet.ce-ctasheet::after, .ce-sheet.ce-404::after { animation: none; opacity: 0.5; }
}

/* ---- Interaction polish --------------------------------------------------
   Small, targeted feedback rather than more large animation: the page already
   has scroll reveals, floating photos and the panel sweep. All of it is
   transform/opacity only, and all of it stops under reduced-motion. */

/* chips: a slight spring when picked, and the tick grows in rather than popping */
.ce-choice span { transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.ce-choice input:checked + span { transform: scale(1.04); }
.ce-choice:active span { transform: scale(0.97); }
.ce-choice span .ce-icon { transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 180ms; }
.ce-choice input:not(:checked) + span .ce-icon { transform: scale(0.4); opacity: 0; }
.ce-choice input:checked + span .ce-icon { transform: scale(1); opacity: 1; }

/* gallery photos: lift and brighten slightly under the cursor */
.ce-work { transition: transform var(--dur-base) var(--ease-silk), box-shadow var(--dur-base) var(--ease-silk); }
.ce-work img { transition: transform var(--dur-slow) var(--ease-silk), filter var(--dur-base); }
.ce-work:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.ce-work:hover img { transform: scale(1.06); filter: saturate(1.06) brightness(1.03); }

/* the arch photos on décor and about pick up the same zoom */
.ce-archframe .ce-arch img { transition: transform 900ms var(--ease-silk); }
.ce-archframe:hover .ce-arch img { transform: scale(1.05); }

/* feature and service cards: the icon turns gold-filled on hover */
.ce-svccard .ce-ic, .ce-tile .ce-ic, .ce-feat .ce-ic { transition: background-color var(--dur-base), color var(--dur-base), transform var(--dur-base) var(--ease-silk); }
.ce-svccard:hover .ce-ic, .ce-tile:hover .ce-ic { background: #E3BC6A; color: #2E2142; transform: scale(1.08); }

/* links: the underline grows from the left instead of appearing */
.ce-link { background-size: 0% 1px; transition: background-size 420ms var(--ease-silk), color var(--dur-fast); }
.ce-link:hover { background-size: 100% 1px; }

/* shadows were mixed warm maroon; match them to the lavender palette */
:root { --shadow-card: 0 24px 60px -18px rgba(60, 44, 92, 0.30); --shadow-soft: 0 18px 40px -26px rgba(60, 44, 92, 0.40); }

@media (prefers-reduced-motion: reduce) {
  .ce-choice span, .ce-choice input:checked + span, .ce-work, .ce-work img,
  .ce-archframe .ce-arch img, .ce-svccard .ce-ic, .ce-tile .ce-ic { transition: none; transform: none; }
  .ce-choice span .ce-icon { transition: none; }
}

/* ---- Client PDF, 15 Oct 2026 --------------------------------------------
   1: header in purple. 2: the "1000+ Celebrations" stat strip in purple.
   23: Instagram, Facebook and YouTube highlighted rather than plain outlines. */
.ce-header__bar { background: var(--p-lav); border-color: rgba(91, 68, 132, 0.28); }
.ce-header .ce-nav__link { color: #3B2B55; }
.ce-header .ce-nav__link:hover, .ce-header .ce-nav__link[aria-current] { color: #5B4484; }
.ce-header__call, .ce-hphone small { color: #5B4484; }
.ce-hphone__ic { background: rgba(91, 68, 132, 0.12); color: #5B4484; }

/* 2: the stats strip under the hero */
.ce-stats { background: #3B2B55; border-color: rgba(227, 188, 106, 0.3); }
.ce-stats b { color: #FBF8F3; }
.ce-stats b i { color: #E3BC6A; }
.ce-stats li > span:last-child { color: rgba(251, 248, 243, 0.78); }

/* 23: highlighted social buttons */
.ce-social a { border-color: rgba(227, 188, 106, 0.55); background: rgba(227, 188, 106, 0.12); color: #6F4E12; }
.ce-social a:hover { background: #E3BC6A; border-color: #E3BC6A; color: #2E2142; transform: translateY(-2px); }
.ce-social a { transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-silk); }

/* 42: the reception cover is a square photo in a 16:9 card, so a centre crop cut the
   stage in half. Anchor it high, where the arches and backdrop are. */
.ce-jcard__media img { object-position: 50% 32%; }

/* ---- Steps connector, stats strip and extra motion (client, 15 Oct) -----
   The connector was drawn for a single row of three. With six steps it spans
   two rows, so each row gets its own curve and the second one mirrors the
   first for a continuous, hand-drawn feel. */
.ce-steps__path--1 { top: 8px; }
.ce-steps__path--2 { top: auto; bottom: calc(50% - 104px); }
@media (max-width: 1024px) { .ce-steps__path--1, .ce-steps__path--2 { display: none; } }
.js .ce-steps__path--2 { transition-delay: 900ms; }

/* the step rings draw themselves in, then settle */
.ce-step__num { transition: transform 600ms var(--ease-silk), box-shadow 600ms var(--ease-silk); }
.ce-step:hover .ce-step__num { transform: translateY(-4px) scale(1.06); box-shadow: 0 18px 36px -14px rgba(91, 68, 132, 0.5); }
.ce-step__num::before { transition: transform 700ms var(--ease-silk), border-color 400ms; }
.ce-step:hover .ce-step__num::before { transform: rotate(120deg); border-color: #E3BC6A; }

/* 1 + 2: the stats strip picks up the header's light lavender instead of deep purple */
.ce-stats { background: var(--p-lav); border-color: rgba(91, 68, 132, 0.28); box-shadow: var(--shadow-soft); }
.ce-stats b { color: var(--p-ink); }
.ce-stats b i { color: #6F4E12; }
.ce-stats li > span:last-child { color: var(--p-ink-soft); }
.ce-stats .ce-stars { color: #B8893B; }

/* stat numerals lift gently as they come into view */
.ce-stats li { transition: transform 500ms var(--ease-silk); }
.ce-stats li:hover { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .ce-step__num, .ce-step__num::before, .ce-stats li { transition: none; transform: none; }
}

/* ---- More motion (client, 15 Oct) --------------------------------------
   Transform/opacity only, so none of it costs a repaint, and all of it stops
   under reduced-motion. */

/* Accent words are a solid gold. A gradient shimmer was tried here and removed:
   the gradient spans the whole heading block, so a phrase that wraps onto two
   lines gets a different shade per line and reads as patchy rather than shining.
   The moving light lives on the panels instead, where it has room to travel. */
.ce-accent,
.ce-sheet:not(.ce-hero) .ce-accent, .ce-sheet:not(.ce-hero) .ce-accent .w > span,
.ce-section .ce-accent {
  background-image: none; -webkit-text-fill-color: currentColor; color: var(--p-gold); animation: none;
}
.ce-sheet.ce-values .ce-accent, .ce-sheet.ce-values .ce-accent .w > span,
.ce-hero .ce-accent, .ce-hero .ce-accent .w > span {
  background-image: none; -webkit-text-fill-color: currentColor; color: var(--p-gold-lit); animation: none;
}
@media (forced-colors: active) {
  .ce-accent, .ce-sheet:not(.ce-hero) .ce-accent, .ce-section .ce-accent { color: CanvasText; }
}

/* photos: a slow drift on the arch frames, so the page never feels entirely still */
.ce-cat__media .ce-arch img { transform: scale(1.03); transition: transform 1200ms var(--ease-silk); }
.ce-cat:hover .ce-arch img { transform: scale(1.08); }

/* service and tile cards lift a little further, with a gold edge */
.ce-svccard, .ce-tile, .ce-jcard { transition: transform var(--dur-base) var(--ease-silk), box-shadow var(--dur-base) var(--ease-silk), border-color var(--dur-base); }
.ce-svccard:hover, .ce-tile:hover, .ce-jcard:hover { border-color: rgba(201, 162, 78, 0.65); }


/* buttons: the gold fill sweeps on hover */
.ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline) { background-image: linear-gradient(100deg, #E3BC6A 0%, #F0D293 50%, #E3BC6A 100%); background-size: 220% 100%; background-position: 0% 50%; transition: background-position 600ms var(--ease-silk), transform var(--dur-fast); }
.ce-btn:not(.ce-btn--ghost):not(.ce-btn--outline):hover { background-position: 100% 50%; }

/* FAQ rows nudge open */
.ce-faq details { transition: border-color var(--dur-base), background-color var(--dur-base); }
.ce-faq details[open] { border-color: rgba(201, 162, 78, 0.6); background: rgba(201, 162, 78, 0.05); }

@media (prefers-reduced-motion: reduce) {
  .ce-accent { animation: none; }
  .ce-cat__media .ce-arch img, .ce-svccard, .ce-tile, .ce-jcard { transition: none; }
}

/* ---- Celebration cards: no dark gap while the photos arrive --------------
   The cross-fade starts every photo at opacity 0 and only brings the first one
   up at 2% of a 15s cycle, so a card could sit as a dark rectangle for seconds
   even after its image had loaded. The first photo now holds full opacity until
   the cycle takes over, and the card carries a soft tint rather than near-black
   so any remaining gap reads as part of the design. */
.ce-ccard { background: linear-gradient(160deg, #3B2B55 0%, #2E2142 60%, #241A34 100%); }
.ce-ccard__ph img:first-child { opacity: 1; animation-name: ce-fx-first; }
@keyframes ce-fx-first {
  0% { opacity: 1; } 33% { opacity: 1; } 35% { opacity: 0; }
  98% { opacity: 0; } 100% { opacity: 1; }
}
.ce-ccard__ph img:only-child { opacity: 1; animation: none; }
/* fade each photo in as it decodes, so nothing snaps into place */
.ce-ccard__ph img { transition: opacity 400ms var(--ease-silk), transform var(--dur-slow) var(--ease-silk); }
@media (prefers-reduced-motion: reduce) {
  .ce-ccard__ph img { animation: none; opacity: 0; }
  .ce-ccard__ph img:first-child { opacity: 1; }
}

/* ---- Snappier reveals ----------------------------------------------------
   Reveals ran 1100ms with an 80ms step, so a 14-item list took 2.1s to finish
   and the page felt like it was catching up with the scroll. Shorter travel,
   faster curve, and the stagger caps out so long lists do not drag. */
:root { --dur-reveal: 620ms; }
.js .ce-reveal {
  transform: translateY(16px);
  transition: opacity var(--dur-reveal) var(--ease-silk), transform var(--dur-reveal) var(--ease-silk);
  transition-delay: calc(min(var(--i, 0), 6) * 45ms);
}
.js .ce-reveal h2.ce-words .w > span { transition: translate 720ms var(--ease-silk); transition-delay: calc(0.05s + var(--wi) * 38ms); }
/* the steps path draws in step with the cards rather than trailing them */
.js .ce-steps__path { transition: clip-path 760ms var(--ease-silk) 120ms; }
.js .ce-steps__path--2 { transition-delay: 420ms; }

/* ---- Service cards: photo and icon spacing ------------------------------
   The card was restyled for a photo-less layout (padding all round, icon at
   the top of the body). Photos came back, but the media kept a flush-to-edge
   radius and no gap, so the icon circle collided with the photo's corner.
   Inside a padded card the photo is fully rounded and the icon sits clear. */
.ce-svccard__media { border-radius: 16px; margin-bottom: 18px; }
.ce-svccard__body .ce-ic { margin: 0 0 16px; }

/* Item 4: no marker under the current page in the nav. The link's own colour
   already shows which page you are on. */
.ce-nav a[aria-current="page"]::after { display: none; }

/* The Usher Media credit sat larger than the footer links it sits beneath. */
.ce-credit { gap: 12px; }
.ce-credit__pill { gap: 10px; padding: 5px 18px 5px 5px; font-size: 1rem; }
.ce-credit__mark { width: 30px; height: 30px; font-size: 0.75rem; }
.ce-credit__label { font-size: 0.625rem; letter-spacing: 0.3em; }
.ce-credit__label em { font-size: 1.125rem; }
.ce-credit__line { width: clamp(28px, 5vw, 52px); }

/* ---- Social icons in their brand colours --------------------------------
   Facebook blue, Instagram's gradient, YouTube red. The resting state keeps
   the gold ring so the footer still reads as one set; the brand colour fills
   in on hover and focus. */
.ce-social a[href*="facebook"]:hover, .ce-social a[href*="facebook"]:focus-visible {
  background: #1877F2; border-color: #1877F2; color: #fff;
}
.ce-social a[href*="instagram"]:hover, .ce-social a[href*="instagram"]:focus-visible {
  background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
  border-color: #D6249F; color: #fff;
}
.ce-social a[href*="youtube"]:hover, .ce-social a[href*="youtube"]:focus-visible {
  background: #FF0000; border-color: #FF0000; color: #fff;
}

/* Brand colours at rest, not just on hover, so the platforms are recognisable. */
.ce-social a[href*="facebook"] { background: #1877F2; border-color: #1877F2; color: #fff; }
.ce-social a[href*="instagram"] {
  background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
  border-color: #D6249F; color: #fff;
}
.ce-social a[href*="youtube"] { background: #FF0000; border-color: #FF0000; color: #fff; }
.ce-social a[href*="facebook"]:hover, .ce-social a[href*="facebook"]:focus-visible { background: #0C63D4; border-color: #0C63D4; }
.ce-social a[href*="youtube"]:hover, .ce-social a[href*="youtube"]:focus-visible { background: #D90000; border-color: #D90000; }
.ce-social a[href*="instagram"]:hover, .ce-social a[href*="instagram"]:focus-visible { filter: brightness(1.08); }

/* No outline tracing the arch photos. */
.ce-archframe::before { display: none; }

/* =========================================================
   Google Ads landing pages (/campaigns/*)
   Mobile first, no popups or sliders, call and WhatsApp on
   the first screen (dev plan §3 rules 8 and 9).
   ========================================================= */

/* Slim header: logo on the left, call and WhatsApp on the right. Static, not fixed,
   so the hero form is reachable on a short phone screen without fighting an overlay. */
.ce-lp-header { position: relative; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--inset); background: var(--c-white); border-bottom: 1px solid var(--c-line); }
.ce-lp-header .ce-logo { display: flex; align-items: center; gap: 10px; }
.ce-lp-header .ce-logo__mark { height: 34px; width: auto; }
.ce-lp-header .ce-logo__word { height: 15px; width: auto; }
.ce-lp-header__end { display: flex; align-items: center; gap: 10px; }
/* 44 px minimum tap target, 16 px text (§3 rule 8) */
.ce-lp-header__call { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; font: 700 1rem/1 var(--f); color: var(--c-ink); text-decoration: none; white-space: nowrap; }
.ce-lp-header__call .ce-icon { width: 20px; height: 20px; color: var(--c-maroon); }
/* The call button keeps its number on a phone — "call and WhatsApp on the first
   screen" (§3 rule 9) means a visible number, not a bare icon. The wordmark goes
   instead, since the monogram already identifies the brand. */
@media (max-width: 560px) {
  .ce-lp-header .ce-logo__word { display: none; }
  .ce-lp-header { gap: 8px; padding-inline: 10px; }
  .ce-lp-header__call { padding: 0 4px; font-size: 0.9375rem; }
  .ce-lp-header__end { gap: 6px; }
  .ce-lp-header .ce-btn--sm { padding-inline: 12px; }
}
/* Very narrow phones: the WhatsApp button keeps its icon and drops its label from
   view. The label stays in the accessibility tree, so the link is still announced. */
@media (max-width: 400px) {
  .ce-lp-header__wa .ce-lp-header__walabel {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .ce-lp-header__wa { padding-inline: 14px; }
  .ce-lp-header__wa .ce-icon { width: 20px; height: 20px; }
}

/* Hero: text and photo on the left, the enquiry form on the right. On a phone the
   form sits directly under the headline, so it is on the first screen. */
.ce-lp-hero { padding-block: clamp(22px, 4vw, 48px); }
.ce-lp-hero__grid { display: grid; gap: 26px; align-items: start; }
.ce-lp-hero__text h1 { margin: 10px 0 0; font-size: var(--t-h1); }
.ce-lp-hero__text .ce-lead { margin-top: 14px; }
.ce-lp-hero__media { margin-top: 22px; border-radius: 18px; overflow: hidden; }
.ce-lp-hero__media img { display: block; width: 100%; height: auto; }
@media (min-width: 1025px) {
  .ce-lp-hero__grid { grid-template-columns: 6fr 5fr; gap: 48px; }
  /* The photo only appears beside the text on a wide screen; on a phone the form
     matters more than the picture, so it stays below the fold. */
  .ce-lp-hero__media { margin-top: 28px; }
}
@media (max-width: 1024px) { .ce-lp-hero__media { order: 3; } }

/* Trust line: three short proofs, never a price or a years-in-business figure
   (§3 rule 10 — both are unconfirmed, so neither is shown). */
.ce-lp-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; padding: 0; list-style: none; }
/* The hero panel resolves to a light surface under the current theme, so the trust
   line takes the normal body ink rather than the pale on-dark colour. */
.ce-lp-trust li { display: inline-flex; align-items: center; gap: 7px; font: 600 0.9375rem/1.3 var(--f); color: var(--c-ink-soft); }
.ce-lp-trust .ce-icon { width: 17px; height: 17px; color: var(--c-maroon); flex: none; }

/* The form card sits on the hero panel, so it reads as the point of the page. */
.ce-lp-hero__form { background: var(--c-white); border-radius: 20px; padding: 20px clamp(16px, 3vw, 26px) 24px; scroll-margin-top: 16px; }
.ce-lp-formtitle { margin: 0; font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); color: var(--c-ink); }
.ce-lp-formsub { margin: 6px 0 16px; font: 500 var(--t-body)/1.5 var(--f); color: var(--c-ink-soft); }
.ce-lp-hero__form .ce-formcard { background: none; border: 0; padding: 0; box-shadow: none; }

/* Services and linked occasions */
.ce-feats { display: grid; gap: 20px; margin: 28px 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .ce-feats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .ce-feats { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.ce-feat h3 { margin: 10px 0 6px; font-size: var(--t-h3); }
.ce-feat p { margin: 0; color: var(--c-ink-soft); }
.ce-feat .ce-ic { display: inline-grid; place-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-tint); }
.ce-feat .ce-ic .ce-icon { width: 21px; height: 21px; color: var(--c-maroon); }

/* Gallery: a plain grid. No slider and no lightbox on these pages — every photo is
   just an image, which keeps the mobile PageSpeed score up (§3 rule 8). */
.ce-lp-gallery { display: grid; gap: 12px; margin-top: 26px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .ce-lp-gallery { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1025px) { .ce-lp-gallery { grid-template-columns: repeat(4, 1fr); } }
.ce-lp-gallery figure { margin: 0; border-radius: 14px; overflow: hidden; background: var(--c-sand); }
.ce-lp-gallery img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* How it works */
.ce-lp-steps { display: grid; gap: 22px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: none; }
@media (min-width: 768px) { .ce-lp-steps { grid-template-columns: repeat(3, 1fr); gap: 30px; } }
.ce-lp-steps li { padding-top: 14px; border-top: 2px solid var(--c-marigold); }
.ce-lp-steps b { display: block; font: 700 0.8125rem/1 var(--f); letter-spacing: 0.14em; color: var(--c-marigold-deep); }
.ce-lp-steps h3 { margin: 10px 0 6px; font-size: var(--t-h3); }
.ce-lp-steps p { margin: 0; color: var(--c-ink-soft); }

/* The rating line is shown only as it appears on the Google profile (§3 rule 10). */
.ce-rating-line { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 600 var(--t-body)/1.4 var(--f); color: var(--c-ink-soft); }
.ce-rating-line .ce-icon { width: 18px; height: 18px; color: var(--c-marigold); }
.ce-rating-line b { font-size: 1.125rem; color: var(--c-ink); }

/* The landing pages have no top nav, so nothing needs to clear a fixed header. */
.ce-lp main { padding-top: 0; }
/* The site-wide body padding reserves room for the fixed header on the rest of the
   site. The landing-page header is static, so that space is dead and pushes the
   enquiry form down the first screen. */
.ce-lp { padding-top: 0; }

/* Tighter hero on a phone, so the form title is visible without scrolling. */
@media (max-width: 1024px) {
  .ce-lp-hero { padding-block: 16px 24px; }
  .ce-lp-hero__text h1 { font-size: clamp(1.75rem, 1.35rem + 2vw, 2.5rem); line-height: 1.15; }
  .ce-lp-hero__text .ce-tag { margin-bottom: 2px; }
  .ce-lp-hero__text .ce-lead { margin-top: 10px; font-size: 1rem; }
  .ce-lp-hero__form { margin-top: 16px; padding-top: 16px; }
  .ce-lp-formtitle { font-size: 1.375rem; }
  .ce-lp-formsub { margin-bottom: 12px; }
}

/* --- Landing pages: mobile tuning (dev plan §3 rules 8 and 9) ----------
   These override the site-wide form styles on /campaigns/ only, so the rest of
   the site is untouched. */

/* 16 px minimum on anything the visitor reads or types (§3 rule 8). Below 16 px
   iOS Safari also zooms the page when a field is focused, which loses the form. */
.ce-lp .ce-choice span,
.ce-lp .ce-check,
.ce-lp .ce-form__alt,
.ce-lp .ce-form__privacy { font-size: 1rem; }
.ce-lp .ce-form input,
.ce-lp .ce-form textarea { font-size: 1rem; }
/* "Date not fixed yet" is a real tap target, so give it the full 44 px. */
.ce-lp .ce-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }

/* The occasion links on the brand page are navigation, not prose: make the whole
   heading line a comfortable target. */
.ce-lp .ce-feat h3 a { display: inline-block; min-height: 44px; padding-block: 8px; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* On a phone the form must be on the first screen, so the hero photo and the
   trust line move below it. On a tablet and up the two-column hero keeps them
   in their natural order. */
@media (max-width: 1024px) {
  .ce-lp-hero__grid { display: flex; flex-direction: column; }
  .ce-lp-hero__text { display: contents; }
  .ce-lp-hero__text .ce-tag { order: 1; }
  .ce-lp-hero__text h1 { order: 2; }
  .ce-lp-hero__text .ce-lead { order: 3; }
  .ce-lp-hero__form { order: 4; margin-top: 18px; }
  .ce-lp-trust { order: 5; }
  .ce-lp-hero__media { order: 6; }
}

/* --- Landing pages: bigger logo, and the form assembles like the rest of the site --- */

/* The monogram and wordmark were sized for the slim bar and read as an afterthought.
   The header is the first thing on an ad landing page, so the brand carries it. */
.ce-lp-header { padding-block: 12px; }
.ce-lp-logo { gap: 14px; }
.ce-lp-logo .ce-logo__mark { height: 58px; }
.ce-lp-logo .ce-logo__word { height: 26px; }
@media (max-width: 560px) {
  .ce-lp-logo .ce-logo__mark { height: 46px; }
  .ce-lp-logo { gap: 10px; }
}

/* The form's fields rise in sequence, the same reveal the rest of the site uses for
   a group. The whole card is one .ce-rise, so this runs inside it rather than
   waiting on a second scroll trigger. */
.js .ce-lp-hero__form .ce-form > *,
.js .ce-lp-hero__form .ce-lp-formtitle,
.js .ce-lp-hero__form .ce-lp-formsub {
  animation: ce-field-in 700ms var(--ease-expo) both;
  animation-delay: calc(0.22s + var(--fi, 0) * 55ms);
}
@keyframes ce-field-in { from { opacity: 0; transform: translateY(14px); } }

/* The chips inside a fieldset come in together with their legend, not one by one —
   fourteen separate entrances would read as noise. */
.js .ce-lp-hero__form .ce-chipset { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .js .ce-lp-hero__form .ce-form > *,
  .js .ce-lp-hero__form .ce-lp-formtitle,
  .js .ce-lp-hero__form .ce-lp-formsub { animation: none; }
}

/* --- Landing pages: the closing enquiry form ---------------------------
   A second copy of the form at the foot of the page, so a visitor who has read
   the whole thing can enquire without scrolling back to the hero. */
.ce-lp-close { display: grid; gap: 26px; align-items: start; }
@media (min-width: 1025px) { .ce-lp-close { grid-template-columns: 5fr 6fr; gap: 48px; } }
.ce-lp-close h2 { margin: 0; }
.ce-lp-close .ce-lead { margin-top: 12px; }
.ce-lp-close .ce-actions { margin-top: 20px; }
/* text-align: left — the closing section sits inside a centred panel, and the form
   must not inherit that or every label and chipset centres. */
.ce-lp-close__form { background: var(--c-white); border-radius: 20px; padding: 22px clamp(16px, 3vw, 26px) 26px; text-align: left; }
.ce-lp-close__form .ce-formcard { background: none; border: 0; padding: 0; box-shadow: none; }

/* The closing form is revealed by scrolling, so its rows rise as a transition on
   .is-in rather than the hero form's run-on-load animation. */
.js .ce-lp-close__form .ce-form > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity 620ms var(--ease-expo), transform 620ms var(--ease-expo);
  transition-delay: calc(var(--fi, 0) * 45ms);
}
.js .ce-lp-close__form.is-in .ce-form > * { opacity: 1; transform: none; }

/* Same 16px/44px minimums as the hero form (§3 rule 8). */
.ce-lp-close__form .ce-choice span,
.ce-lp-close__form .ce-check,
.ce-lp-close__form .ce-form__alt,
.ce-lp-close__form .ce-form__privacy,
.ce-lp-close__form .ce-form input,
.ce-lp-close__form .ce-form textarea { font-size: 1rem; }
.ce-lp-close__form .ce-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  .js .ce-lp-close__form .ce-form > * { transition: none; opacity: 1; transform: none; }
}

/* --- Landing pages: reviews, what's included, and the slim footer ------- */

/* Google rating pill above the reviews */
.ce-lp .ce-gpill { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin-bottom: 10px; padding: 0 18px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-white); font: 600 1rem/1 var(--f); color: var(--c-ink); text-decoration: none; }
.ce-lp .ce-gpill b { font-size: 1.0625rem; }
.ce-lp .ce-gpill .ce-stars { display: inline-flex; gap: 2px; }
.ce-lp .ce-gpill .ce-icon { width: 16px; height: 16px; color: var(--c-marigold); fill: currentColor; }

/* Reviews: a plain grid. No marquee and no slider — the page has to stay fast
   and the dev plan rules sliders out (§3 rule 8). */
.ce-lp-reviews { display: grid; gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .ce-lp-reviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .ce-lp-reviews { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.ce-lp-review figure { margin: 0; height: 100%; padding: 22px; border: 1px solid var(--c-line); border-radius: 16px; background: var(--c-white); }
.ce-lp-review .ce-stars { display: inline-flex; gap: 2px; margin-bottom: 10px; }
.ce-lp-review .ce-icon { width: 15px; height: 15px; color: var(--c-marigold); fill: currentColor; }
.ce-lp-review blockquote { margin: 0; }
.ce-lp-review blockquote p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--c-ink); }
.ce-lp-review figcaption { margin-top: 14px; font: 600 0.9375rem/1.4 var(--f); color: var(--c-ink); }
.ce-lp-review figcaption small { display: block; margin-top: 2px; font-weight: 500; font-size: 0.8125rem; color: var(--c-ink-soft); }
.ce-lp-reviews__more { margin-top: 22px; }

/* What every booking includes */
.ce-lp-inc { display: grid; gap: 26px; align-items: center; }
@media (min-width: 1025px) { .ce-lp-inc { grid-template-columns: 6fr 5fr; gap: 52px; } }
.ce-lp-inc h2 { margin: 0 0 18px; }
.ce-lp-ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ce-lp-ticks li { display: flex; align-items: flex-start; gap: 11px; font-size: 1rem; line-height: 1.5; color: var(--c-ink); }
.ce-lp-ticks .ce-icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--c-maroon); }
.ce-lp-inc__note { margin-top: 20px; font-size: 0.9375rem; color: var(--c-ink-soft); }
.ce-lp-inc__media { border-radius: 18px; overflow: hidden; }
.ce-lp-inc__media img { display: block; width: 100%; height: auto; }

/* Slim footer: contact and the legal links only. The site footer is a sitemap, and
   every link in it is a way off a page the click was paid for. */
.ce-lp-footer { background: var(--c-wine); color: var(--c-ivory); padding: 40px 0 28px; margin-top: 8px; }
.ce-lp-footer__row { display: grid; gap: 22px; align-items: center; }
@media (min-width: 768px) { .ce-lp-footer__row { grid-template-columns: auto 1fr; gap: 40px; } }
.ce-lp-footer__logo img { display: block; width: auto; height: 86px; }
.ce-lp-footer__contact { display: grid; gap: 6px; }
/* 44px: these are phone numbers and an address people tap on a phone (§3 rule 8). */
.ce-lp-footer__contact a { min-height: 44px; display: inline-flex; align-items: center; font: 600 1.0625rem/1.4 var(--f); color: var(--c-ivory); text-decoration: none; }
.ce-lp-footer__contact a:hover, .ce-lp-footer__contact a:focus-visible { color: var(--c-marigold); }
.ce-lp-footer__contact p { margin: 6px 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--c-ivory-muted); }
.ce-lp-footer__legal { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(251, 247, 241, 0.18); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; }
.ce-lp-footer__legal p { margin: 0; font-size: 0.8125rem; color: var(--c-ivory-muted); }
.ce-lp-footer__legal ul { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
.ce-lp-footer__legal a { min-height: 44px; display: inline-flex; align-items: center; font-size: 0.875rem; color: var(--c-ivory); text-decoration: underline; text-underline-offset: 3px; }
.ce-lp-footer__legal a:hover, .ce-lp-footer__legal a:focus-visible { color: var(--c-marigold); }

/* --- Landing pages: stats, process, assurance -------------------------- */

/* Numbers band: a quiet strip under the hero. */
.ce-section--band { padding: 26px 0; background: var(--c-sand); border-block: 1px solid var(--c-line); }
.ce-lp-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 12px; margin: 0; padding: 0; list-style: none; text-align: center; }
@media (min-width: 768px) { .ce-lp-stats { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.ce-lp-stats b { display: block; font: 400 var(--t-stat)/1 var(--f-display); color: var(--c-ink); font-variant-numeric: lining-nums; }
.ce-lp-stats i { font-style: normal; font-size: 0.56em; color: var(--c-maroon); margin-left: 2px; }
.ce-lp-stats > li > span { display: block; margin-top: 6px; font: 600 0.8125rem/1.4 var(--f); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-soft); }

/* Assurance: three points on the wine panel. */
.ce-lp-assure { padding-block: clamp(44px, 6vw, 76px); }
.ce-lp-assure__list { display: grid; gap: 26px; margin: 30px 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .ce-lp-assure__list { grid-template-columns: repeat(3, 1fr); gap: 34px; } }
/* The theme resolves .ce-sheet to a light surface, so this panel takes the normal
   ink colours rather than the on-dark ones, and the icon uses the deep maroon —
   the pale gold measured 2.26:1 against this background. */
.ce-lp-assure__list h3 { margin: 12px 0 6px; font-size: var(--t-h3); color: var(--c-ink); }
.ce-lp-assure__list p { margin: 0; color: var(--c-ink-soft); }
.ce-ic--light { display: inline-grid; place-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--c-tint); }
.ce-ic--light .ce-icon { width: 22px; height: 22px; color: var(--c-maroon); }

/* --- Landing pages: motion polish -------------------------------------
   Transform and opacity only, so nothing forces a repaint, and every piece
   stops under reduced-motion (§3 rule 8 keeps the page fast). */

/* Cards lift slightly under the cursor, so the page feels responsive. */
.ce-lp .ce-feat, .ce-lp-review figure {
  transition: transform var(--dur-base) var(--ease-silk);
}
@media (hover: hover) {
  .ce-lp .ce-feat:hover, .ce-lp-review figure:hover { transform: translateY(-4px); }
}

/* Gallery photos: a slow zoom on hover, matching the site's gallery cards. */
.ce-lp-gallery figure { position: relative; }
.ce-lp-gallery img { transition: transform 900ms var(--ease-silk), filter var(--dur-base); }
@media (hover: hover) {
  .ce-lp-gallery figure:hover img { transform: scale(1.06); filter: saturate(1.05) brightness(1.02); }
}

/* The submit button's arrow nudges forward on hover. */
.ce-lp .ce-btn .ce-btn__arrow { transition: transform var(--dur-base) var(--ease-silk); }
@media (hover: hover) { .ce-lp .ce-btn:hover .ce-btn__arrow { transform: translateX(3px); } }

/* Trust line ticks arrive one after another with the hero. */
.js .ce-lp-trust li { animation: ce-field-in 620ms var(--ease-expo) both; }
.js .ce-lp-trust li:nth-child(1) { animation-delay: .34s; }
.js .ce-lp-trust li:nth-child(2) { animation-delay: .42s; }
.js .ce-lp-trust li:nth-child(3) { animation-delay: .50s; }

/* The sticky bar slides up once the hero is behind you, rather than sitting
   there from the first paint. */
.ce-lp .ce-actionbar { transform: translateY(100%); transition: transform 420ms var(--ease-expo); }
.ce-lp .ce-actionbar.is-up { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ce-lp .ce-feat, .ce-lp-review figure,
  .ce-lp-gallery img, .ce-lp .ce-btn .ce-btn__arrow { transition: none; transform: none; }
  .js .ce-lp-trust li { animation: none; }
  .ce-lp .ce-actionbar { transform: none; }
}

/* --- Landing pages: panel rhythm, as on the home page ------------------
   The home page alternates pearl and lavender bands so sections read as
   separate chapters rather than one long scroll. */
.ce-lp .ce-section--band { background: var(--p-lav); border-block-color: var(--p-lav-deep); }
.ce-lp-assure { background: var(--p-lav); }
.ce-lp-assure .ce-ic--light { background: var(--c-white); }

/* The reviews sit on the pearl surface, with each card white so the grid reads. */
.ce-lp-reviews-band { background: var(--p-pearl); }

/* Eyebrow spacing above the big serif headings, matching the site. */
.ce-lp .ce-eyebrow { margin-bottom: 10px; }
.ce-lp .ce-gpill { margin-top: 14px; margin-bottom: 0; }

/* The site's steps grid is 3 wide for its six steps (two neat rows). The landing
   pages have four, so 3 across would leave a lone step on a second row. */
@media (min-width: 1025px) {
  .ce-lp .ce-steps__list { grid-template-columns: repeat(4, 1fr); gap: 26px; }
}
/* Two by two on a tablet, rather than one long column. */
@media (min-width: 640px) and (max-width: 1024px) {
  .ce-lp .ce-steps__list { grid-template-columns: repeat(2, 1fr); gap: 34px; }
}

/* --- Floating call and WhatsApp (whole site) ---------------------------
   Bottom right, above everything. Shown from 768px up only: below that the
   sticky .ce-actionbar already carries Call, WhatsApp and the form, and two
   sets of the same controls would cover the page on a phone. */
.ce-float { display: none; position: fixed; right: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); z-index: 65; flex-direction: column; gap: 12px; }
@media (min-width: 768px) { .ce-float { display: flex; } }

.ce-float__btn {
  position: relative; display: grid; place-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  color: #fff; text-decoration: none;
  box-shadow: 0 10px 26px -8px rgba(29, 20, 22, 0.45);
  transition: transform var(--dur-base) var(--ease-silk), box-shadow var(--dur-base) var(--ease-silk);
}
.ce-float__btn .ce-icon { width: 27px; height: 27px; color: #fff; }
/* WhatsApp's own green, and the brand gold for the call — so the two read as
   different actions at a glance rather than one repeated button. */
.ce-float__btn--wa { background: #25D366; }
.ce-float__btn--call { background: var(--c-maroon); }
@media (hover: hover) {
  .ce-float__btn:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 32px -8px rgba(29, 20, 22, 0.5); }
}
.ce-float__btn:focus-visible { outline: 3px solid var(--c-marigold); outline-offset: 3px; }

/* The label slides out of the button on hover, and is never read aloud — each
   button already carries its own aria-label. */
.ce-float__tip {
  position: absolute; right: calc(100% + 10px); top: 50%; translate: 0 -50%;
  padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  background: var(--c-night); color: var(--c-ivory);
  font: 600 0.875rem/1 var(--f);
  opacity: 0; pointer-events: none; transform: translateX(8px);
  transition: opacity 220ms var(--ease-silk), transform 220ms var(--ease-silk);
}
@media (hover: hover) {
  .ce-float__btn:hover .ce-float__tip,
  .ce-float__btn:focus-visible .ce-float__tip { opacity: 1; transform: none; }
}

/* On a landing page they arrive once the hero form is behind you, rather than
   sitting over the thing the click is paying for. Everywhere else they are there
   from the start, so .is-up is only required inside .ce-lp. */
.js .ce-lp .ce-float { opacity: 0; translate: 0 14px; transition: opacity 380ms var(--ease-silk), translate 380ms var(--ease-expo); }
.js .ce-lp .ce-float.is-up { opacity: 1; translate: none; }

/* Hidden while a form is on screen or the keyboard is open (app.js). */
.ce-float.is-hidden { opacity: 0; pointer-events: none; translate: 0 14px; }
.js .ce-float { transition: opacity 320ms var(--ease-silk), translate 320ms var(--ease-expo); }

@media (prefers-reduced-motion: reduce) {
  .ce-float__btn, .ce-float__tip { transition: none; }
  .js .ce-float, .js .ce-lp .ce-float { transition: none; }
}