/* ==========================================================================
   Belmont Business Solutions — Website 3
   Lead skill: premium-frontend-ui ("Cinematic Pacing"). Motion: GSAP core/timeline/ScrollTrigger.
   Data + UX rules: ui-ux-pro-max. Type discipline: frontend-design.
   See design-system/MASTER.md
   ========================================================================== */

:root {
  --navy: #2f445e;
  --navy-2: #3a5170;
  --midnight: #233447;
  --gold: #c9a055;
  --gold-soft: #dcc08a;
  --gold-deep: #7e5f25;
  --linen: #eee8dc;
  --linen-2: #e4dccb;
  --ink: #2f445e;
  --slate: #4b5672;
  --mist: #aeb6c8;
  --cream: #f3eee4;
  --line: rgba(47, 68, 94, .18);
  --line-gold: rgba(201, 160, 85, .42);
  --error: #9f1d1d;

  --display: "Zodiak", "Century Schoolbook", Georgia, serif;
  --fine: "Boska", "Didot", "Bodoni 72", Georgia, serif;
  --book: "Old Standard TT", "Times New Roman", serif;
  --sans: "Switzer", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1280px;
  --gutter: clamp(20px, 4.5vw, 60px);
  --section: clamp(96px, 12vw, 168px);
  --ease: cubic-bezier(.22, .8, .24, 1);
  --z-header: 100; --z-menu: 90; --z-loader: 200; --z-grain: 300;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
html:not(.lenis) { scroll-behavior: smooth; }
body { margin: 0; background: var(--midnight); color: var(--cream); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--gold); color: var(--midnight); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.paper :focus-visible { outline-color: var(--navy); }
.skip-link { position: absolute; left: 16px; top: -64px; z-index: 400; padding: 12px 20px; background: var(--gold); color: var(--midnight); font-weight: 600; text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Film grain — removes digital sterility (premium-frontend-ui §4) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Lenis smooth scroll (required styles) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Surfaces */
.navy { background: var(--navy); color: var(--cream); }
.midnight { background: var(--midnight); color: var(--cream); }
.paper { background: var(--linen); color: var(--ink); }
.paper-2 { background: var(--linen-2); color: var(--ink); }

/* ---------- Type ---------- */
.h1, .h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.h1 { font-size: clamp(2.6rem, 5.4vw, 4.8rem); line-height: 1.04; }
.h2 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); line-height: 1.08; }
.h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.35rem, 1.9vw, 1.7rem); line-height: 1.2; letter-spacing: -0.01em; }

.book { font-family: var(--book); font-style: italic; font-weight: 400; }
.cap { display: block; margin-bottom: 18px; font-family: var(--book); font-style: italic; font-size: 1.15rem; color: var(--gold); }
.paper .cap, .paper-2 .cap { color: var(--gold-deep); }
.lead { font-size: clamp(1.08rem, 1.3vw, 1.2rem); line-height: 1.75; color: var(--mist); max-width: 36em; }
.paper .lead, .paper-2 .lead { color: var(--slate); }
.muted { color: var(--mist); }
.paper .muted, .paper-2 .muted { color: var(--slate); }

/* Victorian rule: line — diamond — line */
.rule { display: flex; align-items: center; gap: 12px; width: min(220px, 60%); color: var(--gold); }
.rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.rule i { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid currentColor; }
.rule--c { margin-left: auto; margin-right: auto; }
.paper .rule, .paper-2 .rule { color: var(--gold-deep); }

/* ---------- Buttons & links ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 30px;
  background: var(--gold); color: var(--midnight);
  border: 1px solid var(--gold); border-radius: 2px;
  font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  will-change: transform;
}
.btn:hover { background: var(--cream); border-color: var(--cream); }
.btn--line { background: transparent; color: var(--cream); border-color: var(--line-gold); }
.btn--line:hover { background: var(--cream); color: var(--navy); border-color: var(--cream); }
.paper .btn:hover, .paper-2 .btn:hover { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.paper .btn--line, .paper-2 .btn--line { color: var(--navy); border-color: var(--navy); }
.btn--sm { min-height: 46px; padding: 0 22px; font-size: .95rem; }
.btn:active { transform: scale(.98); }

.link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600; color: var(--gold); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 100% 1px no-repeat;
  transition: background-size .45s var(--ease);
}
.link:hover { background-size: 0 1px; background-position: 100% calc(100% - 10px); }
.paper .link, .paper-2 .link { color: var(--gold-deep); }

/* ---------- Rotating CTA seal ---------- */
.seal {
  position: relative; display: grid; place-items: center;
  width: 164px; height: 164px; border-radius: 50%;
  background: var(--navy-2); color: var(--gold);
  border: 1px solid var(--gold);
  box-shadow: inset 0 0 0 6px var(--navy-2), inset 0 0 0 7px var(--line-gold), 0 20px 50px -20px rgba(0,0,0,.6);
  text-decoration: none;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.seal:hover, .seal:focus-visible { background: var(--gold); color: var(--midnight); box-shadow: inset 0 0 0 6px var(--gold), inset 0 0 0 7px rgba(47,68,94,.35), 0 20px 50px -20px rgba(0,0,0,.6); }
.seal svg.seal__text { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 26s linear infinite; }
.seal:hover svg.seal__text, .seal:focus-visible svg.seal__text { animation-play-state: paused; }
.seal text { font-family: var(--sans); font-size: 9.8px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; fill: currentColor; }
.seal > .icon { font-size: 1.6rem; stroke-width: 1.3; transition: transform .5s var(--ease); }
.seal:hover > .icon { transform: rotate(45deg); }
.seal--lg { width: 200px; height: 200px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Preloader: split-door reveal (premium-frontend-ui §2.1) ---------- */
.loader { display: none; }
.preload .loader { position: fixed; inset: 0; z-index: var(--z-loader); display: grid; place-items: center; pointer-events: none; }
.loader__door { position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--midnight); }
.loader__door--l { left: 0; border-right: 1px solid var(--line-gold); }
.loader__door--r { right: 0; }
.loader__mark { position: relative; width: 88px; }
.preload body { overflow: hidden; }

/* ---------- Header: turns solid once scrolling starts and stays in view ---------- */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header); color: var(--cream); transition: background .4s var(--ease), box-shadow .4s var(--ease); }
.header.is-solid { background: rgba(35, 52, 71, .96); box-shadow: 0 1px 0 var(--line-gold); }
.header__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 88px; transition: height .4s var(--ease); }
.is-solid .header__in { height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; text-decoration: none; }
.brand img { display: block; width: auto; transform-origin: 0 0; }
.brand__bs { height: 52px; }
.brand__word { height: 40px; }
.nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 44px); }
.nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: .98rem; font-weight: 500; text-decoration: none; color: var(--cream); opacity: .85; transition: opacity .3s; }
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.menu-btn { display: none; min-height: 44px; padding: 0 6px; background: none; border: 0; font-weight: 600; color: var(--gold); cursor: pointer; }
.menu { position: fixed; inset: 0; z-index: var(--z-menu); display: none; flex-direction: column; justify-content: center; gap: 4px; padding: 110px var(--gutter) 48px; background: var(--midnight); }
.menu.is-open { display: flex; animation: fade .35s var(--ease); }
.menu a:not(.btn) { display: block; padding: 6px 0; font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 11vw, 3.4rem); line-height: 1.1; text-decoration: none; color: var(--cream); }
.menu a[aria-current="page"] { color: var(--gold); }
.menu .btn { margin-top: 36px; align-self: flex-start; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Victorian corner ornaments ---------- */
.corners { position: absolute; inset: clamp(14px, 2vw, 26px); pointer-events: none; color: var(--gold); }
.corners svg { position: absolute; width: clamp(34px, 4vw, 56px); height: clamp(34px, 4vw, 56px); }
.corners svg:nth-child(1) { top: 0; left: 0; }
.corners svg:nth-child(2) { top: 0; right: 0; transform: scaleX(-1); }
.corners svg:nth-child(3) { bottom: 0; left: 0; transform: scaleY(-1); }
.corners svg:nth-child(4) { bottom: 0; right: 0; transform: scale(-1); }

/* ---------- Hero: playbill + cameo ---------- */
.hero { position: relative; isolation: isolate; min-height: clamp(720px, 100svh, 1040px); display: flex; align-items: center; padding: 120px 0 90px; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 60% at 72% 50%, rgba(201,160,85,.10), transparent 60%), radial-gradient(ellipse at 20% 100%, rgba(35, 52, 71,.9), transparent 60%); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }

.bill { text-align: center; }
.bill__line { display: block; }
.bill__small { font-family: var(--book); font-style: italic; font-size: clamp(1.4rem, 2.4vw, 2.1rem); line-height: 1.3; color: var(--mist); }
.bill__big { font-family: var(--fine); font-weight: 400; font-size: clamp(2.3rem, 4vw, 3.7rem); line-height: 1.1; letter-spacing: -0.015em; color: var(--cream); }
@media (min-width: 641px) { .bill__big { white-space: nowrap; } }
.bill__big--gold { color: var(--gold); font-style: italic; font-weight: 300; }
.bill .rule { margin: clamp(14px, 2vw, 22px) auto; }
.bill__logo { display: flex; flex-direction: column; align-items: center; width: clamp(220px, 21vw, 300px); margin: 0 auto 6px; }
.bill__logo-bs { width: 45.2%; }
.bill__logo-word { width: 100%; margin-top: 2.9%; }
/* Home: the bar starts without a logo; main.js flies the hero logo up into it on scroll */
.js[data-intro] .header .brand img { visibility: hidden; }
.bill .rule + h1 { margin-top: 4px; }
.bill__word { display: inline-block; }
.bill__sub { max-width: 32em; margin: clamp(28px, 3vw, 40px) auto 32px; color: var(--mist); font-size: 1.1rem; line-height: 1.7; }
.bill__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.cameo { position: relative; justify-self: center; width: min(100%, 400px); }
.cameo__oval { position: relative; aspect-ratio: 400 / 500; border-radius: 50%; overflow: hidden; background: var(--navy-2); }
.cameo__oval img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(.85) contrast(1.02); }
.cameo::before, .cameo::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.cameo::before { inset: -14px; border: 1px solid var(--gold); }
.cameo::after { inset: -26px; border: 1px solid var(--line-gold); }
.cameo figcaption { margin-top: 44px; text-align: center; font-family: var(--book); font-style: italic; font-size: 1.05rem; color: var(--mist); }
.cameo .seal { position: absolute; left: -70px; bottom: 60px; }

/* ---------- Page hero (inner pages) ---------- */
.phero { position: relative; isolation: isolate; min-height: clamp(360px, 48svh, 500px); display: flex; align-items: flex-end; padding: 128px 0 clamp(40px, 5vw, 66px); overflow: hidden; }
.phero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 60% at 80% 30%, rgba(201,160,85,.09), transparent 60%); }
.phero__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 48px; align-items: end; width: 100%; }
.phero .bill { text-align: left; }
.phero .bill__big { font-size: clamp(2.4rem, 4.8vw, 4.6rem); }
.phero .rule { margin: 20px 0; }
.phero__side { color: var(--mist); max-width: 26em; justify-self: end; }
.phero__side p + p { margin-top: 14px; }

/* ---------- Sections ---------- */
.section { position: relative; padding: var(--section) 0; }
.head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: end; margin-bottom: clamp(48px, 6vw, 80px); }
.head .lead { justify-self: end; }
.head--c { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.head--c .lead { justify-self: center; margin-top: 18px; }

/* Framed photo (rectangular, double gold line) */
.frame { position: relative; margin: 0; }
.frame__img { position: relative; overflow: hidden; background: var(--linen-2); }
.frame__img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: transform 1.3s var(--ease); }
.frame:hover .frame__img img { transform: scale(1.05); }
.frame__img::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(243, 238, 228, .7); pointer-events: none; }
.frame::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--line-gold); pointer-events: none; }
.paper .frame::before, .paper-2 .frame::before { border-color: rgba(126, 95, 37, .5); }
.frame figcaption { margin-top: 34px; font-family: var(--book); font-style: italic; color: var(--slate); }

/* Image tone for uploaded adverts / photos — blends any picture into navy & gold */
.tone { position: relative; overflow: hidden; }
.tone img { filter: grayscale(1) contrast(1.08) brightness(.95); }
.tone::after { content: ""; position: absolute; inset: 0; background: #1d3a7a; mix-blend-mode: color; pointer-events: none; }
.tone::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(35, 52, 71,.35), rgba(35, 52, 71,.6)); pointer-events: none; }

/* Intro */
.intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(48px, 7vw, 110px); align-items: center; }
.intro__statement { font-family: var(--display); font-weight: 500; font-size: clamp(1.7rem, 2.9vw, 2.55rem); line-height: 1.3; letter-spacing: -0.01em; }
.intro__body { margin-top: 28px; max-width: 34em; color: var(--slate); font-size: 1.1rem; }
.intro .frame__img { aspect-ratio: 595 / 361; }
.intro .frame__img.intro__photo { aspect-ratio: 4 / 5; }
.intro .frame__img.web-photo { aspect-ratio: 4 / 3; }

/* ---------- Services: horizontal journey (premium-frontend-ui §3.1) ---------- */
.journey { overflow: hidden; }
.journey__track { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(40px, 4vw, 56px) clamp(28px, 3vw, 44px); max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.panel--intro { grid-column: 1 / -1; max-width: 640px; justify-content: center; }
.panel { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.panel__img { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--navy-2); }
.panel__img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.02); transition: transform 1.3s var(--ease), filter .6s var(--ease); }
.panel__img::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(243, 238, 228, .55); pointer-events: none; }
.panel:hover .panel__img img, .panel:focus-visible .panel__img img { transform: scale(1.05); filter: saturate(1) contrast(1.02); }
.panel .h3 { margin: 22px 0 8px; }
.panel p { color: var(--mist); font-size: 1rem; }
.panel__more { margin-top: 14px; font-weight: 600; color: var(--gold); }
.panel--end { justify-content: center; align-items: flex-start; padding: 40px 36px; border: 1px solid var(--line-gold); min-height: 320px; }
.panel--end .h3 { margin-top: 0; }
.panel--end .btn { margin-top: 26px; }
.journey__bar { position: relative; height: 1px; margin-top: 48px; background: var(--line-gold); display: none; }
.journey__bar span { position: absolute; inset: 0; background: var(--gold); transform-origin: left; transform: scaleX(0); }

/* JS-enabled desktop: horizontal track pinned to vertical scroll */
.journey.is-horizontal { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 100px 0 56px; }
.journey.is-horizontal .journey__track { display: flex; align-items: flex-start; gap: clamp(32px, 3.4vw, 56px); width: max-content; max-width: none; margin: 0; padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); padding-right: calc(var(--gutter) * 2); will-change: transform; }
.journey.is-horizontal .panel { width: clamp(280px, 24vw, 360px); flex: none; }
.journey.is-horizontal .panel__img { aspect-ratio: 1 / 1; }
.journey.is-horizontal .panel--intro { width: clamp(320px, 30vw, 440px); align-self: center; }
.journey.is-horizontal .panel--end { width: clamp(300px, 26vw, 380px); align-self: stretch; }
.journey.is-horizontal .journey__bar { display: block; }

/* Monthly: parallax band with linen card */
.band { position: relative; isolation: isolate; padding: clamp(110px, 14vw, 200px) 0; overflow: hidden; }
.band__bg { position: absolute; inset: -14% 0; z-index: -1; }
.band__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 40% center; }
.band__card { position: relative; max-width: 560px; margin-left: auto; padding: clamp(32px, 4vw, 56px); background: var(--linen); color: var(--ink); }
.band__card::after { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(126, 95, 37, .45); pointer-events: none; }
.band__card > * { position: relative; z-index: 1; }
.band__card .h2 { font-size: clamp(2rem, 3.4vw, 2.9rem); margin-bottom: 18px; }
.diamonds { margin: 26px 0 30px; }
.diamonds li { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.diamonds li:first-child { border-top: 1px solid var(--line); }
.diamonds li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .7em; transform: rotate(45deg); background: var(--gold-deep); }
.navy .diamonds li, .midnight .diamonds li { border-color: var(--line-gold); }
.navy .diamonds li::before, .midnight .diamonds li::before { background: var(--gold); }

/* Quote band */
.band--quote { text-align: center; color: var(--cream); }
.band__quote { font-family: var(--fine); font-weight: 300; font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1.12; letter-spacing: -0.015em; }
.band__quote span { display: block; }
.band__quote span + span { color: var(--gold); font-style: italic; }
.band--quote .rule { margin: 0 auto 30px; }

/* Steps (a real sequence, so numbered) */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 64px); counter-reset: s; }
.step { padding-top: 28px; border-top: 1px solid var(--line); }
.step__n { display: block; font-family: var(--fine); font-weight: 300; font-size: clamp(3.6rem, 5.4vw, 5rem); line-height: 1; color: var(--gold-deep); margin-bottom: 18px; }
.step .h3 { margin-bottom: 10px; }
.step p { color: var(--slate); }

/* Why: 2x2 points */
.why { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(48px, 7vw, 110px); align-items: start; }
.points { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 44px; }
.point { padding-top: 22px; border-top: 1px solid var(--line-gold); }
.point .h3 { margin-bottom: 8px; }
.point p { color: var(--mist); }

/* Who we work with */
.who { text-align: center; }
.who__list { display: flex; flex-wrap: wrap; justify-content: center; max-width: 1100px; margin: 0 auto; }
.who__list li { font-family: var(--display); font-weight: 500; font-size: clamp(1.35rem, 2.6vw, 2.25rem); line-height: 1.6; transition: color .3s var(--ease); }
.who__list li:hover { color: var(--gold-deep); }
.who__list li:not(:last-child)::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 .65em; transform: rotate(45deg) translateY(-.2em); border: 1px solid var(--gold-deep); }
.who__foot { margin-top: 36px; font-family: var(--book); font-style: italic; font-size: 1.15rem; color: var(--slate); }

/* CTA */
.cta__in { display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; }
.cta .bill { text-align: left; }
.cta .bill__big { font-size: clamp(2.6rem, 5vw, 4.6rem); }
.cta .lead { margin: 22px 0 30px; }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }

/* ---------- Services page ---------- */
.svc-rows { display: grid; gap: clamp(72px, 9vw, 128px); }
.svc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.svc-row:nth-child(even) .frame { order: 2; }
.svc-row .frame__img { aspect-ratio: 5 / 4; }
.svc-row .h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin-bottom: 18px; }
.svc-row p { color: var(--slate); max-width: 32em; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 40px 34px; border: 1px solid var(--line-gold); }
.plan--main { background: var(--navy-2); border-color: var(--gold); }
.plan--main::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--line-gold); pointer-events: none; }
.plan > * { position: relative; z-index: 1; }
.plan__price { font-family: var(--fine); font-size: clamp(2.6rem, 3.6vw, 3.2rem); line-height: 1; color: var(--gold); margin: 6px 0 16px; }
.plan .h3 { margin-bottom: 10px; }
.plan > p { color: var(--mist); }
.plan .diamonds { margin: 22px 0 30px; font-size: .98rem; }
.plan__act { margin-top: auto; }

.faq-wrap { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 44px; padding: 24px 0; cursor: pointer; list-style: none; font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 1.5vw, 1.3rem); transition: color .3s var(--ease); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold-deep); }
.pm { position: relative; flex: none; width: 16px; height: 16px; }
.pm::before, .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--gold-deep); transition: transform .4s var(--ease); }
.pm::after { transform: rotate(90deg); }
details[open] > summary .pm::after { transform: rotate(0); }
.faq__a { padding: 0 48px 26px 0; color: var(--slate); max-width: 40em; }

/* ---------- About page ---------- */
.story { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(48px, 7vw, 110px); align-items: start; }
.story .frame { position: sticky; top: 120px; }
.story .frame__img { aspect-ratio: 4 / 5; }
.story__body .h2 { margin-bottom: 26px; }
.story__body p { color: var(--slate); margin-bottom: 1.1em; max-width: 38em; }
.story__body p.first { font-family: var(--display); font-weight: 500; font-size: 1.4rem; line-height: 1.5; color: var(--ink); }
.sign { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); }
.sign b { display: block; font-family: var(--book); font-style: italic; font-weight: 400; font-size: 1.7rem; color: var(--ink); }
.sign span { font-size: .95rem; color: var(--slate); }

/* ---------- Contact ---------- */
.contact__grid { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.contact__aside { position: sticky; top: 110px; }
.details { margin: 26px 0 40px; }
.details div { padding: 16px 0; border-bottom: 1px solid var(--line); }
.details div:first-child { border-top: 1px solid var(--line); }
.details dt { font-family: var(--book); font-style: italic; color: var(--gold-deep); }
.details dd { margin: 2px 0 0; font-family: var(--display); font-weight: 700; font-size: 1.25rem; }
.details dd a { text-decoration: none; }
.details dd a:hover { color: var(--gold-deep); }
.next li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 12px 0; color: var(--slate); }
.next li b { font-family: var(--fine); font-weight: 400; font-style: italic; font-size: 1.6rem; line-height: 1.2; color: var(--gold-deep); }

.form-panel { position: relative; padding: clamp(28px, 4vw, 56px); background: #f8f4ec; border: 1px solid var(--line); color: var(--ink); }
.form-panel::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(126, 95, 37, .35); pointer-events: none; }
.form-panel > * { position: relative; z-index: 1; }
.form-panel .h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 8px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; margin-top: 30px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field > label, .field > legend, .q > legend, .q > label { padding: 0; font-weight: 600; font-size: 1rem; line-height: 1.45; color: var(--ink); }
.opt { font-weight: 400; color: var(--slate); }
.input, .textarea { width: 100%; min-height: 50px; padding: 12px 14px; background: #fff; border: 1px solid #8e93a6; border-radius: 2px; font-size: 1rem; color: var(--ink); transition: border-color .25s, box-shadow .25s; }
.textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.input:focus, .textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(201, 160, 85, .45); }
.field.has-error .input, .field.has-error .textarea { border-color: var(--error); }
.field__error { display: none; font-size: .9rem; color: var(--error); }
.field.has-error .field__error { display: block; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.qn { grid-column: 1 / -1; border: 1px solid var(--line); background: var(--linen); margin-top: 6px; }
.qn > summary { display: flex; align-items: center; gap: 20px; padding: 22px 24px; cursor: pointer; list-style: none; }
.qn > summary::-webkit-details-marker { display: none; }
.qn > summary .qn__t { flex: 1; }
.qn > summary strong { display: block; font-family: var(--display); font-weight: 700; font-size: 1.3rem; }
.qn > summary small { display: block; margin-top: 2px; font-size: .95rem; color: var(--slate); }
.qn > summary .qn__badge { flex: none; font-family: var(--book); font-style: italic; color: var(--gold-deep); }
.qn[open] > summary { border-bottom: 1px solid var(--line); }
.qn__body { padding: 8px 24px 24px; }
.qn__intro { padding: 14px 0 18px; color: var(--slate); font-size: .98rem; }
.qn__tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding-top: 18px; font-size: .92rem; color: var(--slate); }
.qn__tools button { background: none; border: 0; padding: 0; min-height: 44px; color: var(--gold-deep); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.qs { border-bottom: 1px solid var(--line); }
.qs > summary { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 14px 0; cursor: pointer; list-style: none; }
.qs > summary::-webkit-details-marker { display: none; }
.qs__n { flex: none; width: 38px; font-family: var(--book); font-style: italic; color: var(--gold-deep); }
.qs__t { flex: 1; font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.qs__count { font-size: .85rem; color: var(--slate); }
.qs__body { display: grid; gap: 26px; padding: 6px 0 30px 54px; }
.q { display: grid; gap: 10px; }
.q .textarea { min-height: 96px; }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 18px; }
.opts label { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: .98rem; line-height: 1.35; cursor: pointer; }
.opts input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--navy); cursor: pointer; }
.opts .other { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.opts .other .input { flex: 1; min-width: 180px; min-height: 42px; padding: 8px 12px; }
.top3 { display: grid; gap: 10px; }
.top3 label { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 8px; font-family: var(--book); font-style: italic; color: var(--gold-deep); }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 4px; }
.form__foot p { font-size: .9rem; color: var(--slate); max-width: 26em; }
.form-panel .btn:hover { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.form__status { grid-column: 1 / -1; display: none; padding: 18px 20px; border-left: 3px solid var(--gold); background: var(--linen); }
.form__status.is-visible { display: block; }
.form__status h3 { font-family: var(--display); font-weight: 700; font-size: 1.2rem; margin-bottom: 4px; }
.form__status p { color: var(--slate); }

/* ---------- Footer ---------- */
.footer { position: relative; padding: clamp(80px, 9vw, 120px) 0 30px; background: #061127; color: var(--cream); overflow: hidden; }
.footer__top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 36px; padding-bottom: 56px; }
.footer__logo { width: 180px; }
.footer h2 { margin-bottom: 12px; font-family: var(--book); font-style: italic; font-weight: 400; font-size: 1.15rem; color: var(--gold); }
.footer p { color: var(--mist); font-size: .98rem; max-width: 22em; }
.footer a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; color: var(--cream); transition: color .25s; }
.footer a:hover { color: var(--gold); }
.footer__word { display: block; text-align: center; font-family: var(--fine); font-style: italic; font-weight: 300; font-size: clamp(4rem, 15vw, 14rem); line-height: .9; color: #1a2a4f; margin: 8px 0 34px; user-select: none; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 22px; border-top: 1px solid var(--line-gold); font-size: .88rem; color: var(--mist); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html:not(.lenis) { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .frame:hover .frame__img img, .panel:hover .panel__img img { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .story, .faq-wrap, .contact__grid { grid-template-columns: 1fr; }
  .story .frame, .contact__aside { position: relative; top: auto; }
  .story .frame { max-width: 480px; }
  .plans { grid-template-columns: 1fr; max-width: 620px; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .why { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .nav, .header .btn { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
  .brand { gap: 10px; }
  .brand__bs { height: 42px; }
  .brand__word { height: 32px; }
  .hero { padding: 110px 0 80px; }
  .hero__grid, .intro, .phero__grid, .svc-row, .cta__in, .head { grid-template-columns: 1fr; }
  .phero__side, .head .lead { justify-self: start; }
  .svc-row:nth-child(even) .frame { order: 0; }
  .cameo { width: min(78%, 340px); margin-top: 26px; }
  .cameo .seal { left: auto; right: -46px; bottom: 34px; width: 122px; height: 122px; }
  .steps { grid-template-columns: 1fr; }
  .band__card { margin: 0 auto; }
  .seal--lg { width: 164px; height: 164px; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .points { grid-template-columns: 1fr; gap: 28px; }
  .form { grid-template-columns: 1fr; }
  .qn > summary { padding: 18px 16px; flex-wrap: wrap; }
  .qn__body { padding: 4px 16px 20px; }
  .qs__body { padding-left: 0; }
  .opts { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: 28px; }
  .faq__a { padding-right: 0; }
  .bill__actions .btn { width: 100%; }
  .cameo .seal { right: -18px; bottom: 20px; width: 110px; height: 110px; }
  .frame::before { inset: 12px -12px -12px 12px; }
  .cameo::after { inset: -20px; }
}

/* ---------- Website 4: copy-led additions (no visual redesign) ---------- */
.bill__eyebrow { margin: 6px 0 12px; text-align: center; }
.bill__more { max-width: 34em; margin: -14px auto 30px; color: var(--mist); font-size: .98rem; line-height: 1.65; opacity: .9; }
.intro__body ~ .intro__body { margin-top: 14px; }
.intro__kicker { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--fine); font-style: italic; font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.3; color: var(--gold-deep); }
.note { margin: -10px 0 22px; font-family: var(--book); font-style: italic; color: var(--slate); }
.who__line { max-width: 40em; margin: 12px auto 0; font-weight: 600; color: var(--ink); }
.footer__tag { margin-top: 16px; font-family: var(--book); font-style: italic; font-size: 1.1rem; color: var(--gold); }
.disclaimer { margin-top: 18px; padding: 14px 18px; border-left: 2px solid var(--gold-deep); background: rgba(126, 95, 37, .06); font-size: .92rem; color: var(--slate); }
.svc-row .diamonds { margin: 20px 0 0; }
.svc-row .diamonds li { font-size: .98rem; padding: 8px 0; }
.svc-row p + p { margin-top: 12px; }
.plan > .plan__note { margin: -14px 0 26px; font-family: var(--book); font-style: italic; color: var(--gold-soft); }
.plan > .plan__price { color: var(--gold); }
.phero__side .phero__strong { color: var(--cream); font-family: var(--fine); font-style: italic; font-size: 1.3rem; line-height: 1.35; }
.story__close { margin-top: 26px; font-family: var(--fine); font-style: italic; font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.35; color: var(--gold-deep); }
@media (max-width: 1100px) and (min-width: 641px) { .bill__big { white-space: normal; } }
/* ---------- Website 5: new brand blue (#2f445e) ----------
   The blue is lighter than before, so small gold text sitting on blue uses the palette's soft gold
   to stay easy to read. Large gold headings, prices, lines and buttons keep the main gold. */
.navy .cap, .navy .link, .navy .plan__note, .navy .panel__more,
.plan--main .cap, .plan--main .plan__note { color: var(--gold-soft); }
.navy .link { text-decoration-color: var(--gold-soft); }
/* ---------- Website 5: prices, service area and legal links (existing fonts and colours only) ---------- */
.plan__price { margin-bottom: 4px; }
.plan > .plan__per { margin: 0 0 16px; font-family: var(--book); font-style: italic; color: var(--gold-soft); }
.plan:not(.plan--main) > .plan__price + .h3, .plan > .plan__price + .h3 { margin-top: 12px; }
.plan > .plan__value { margin: -12px 0 26px; font-size: .92rem; color: var(--cream); }
.diamonds--priced li { justify-content: flex-start; }
.diamonds--priced b { margin-left: auto; padding-left: 12px; font-weight: 600; color: var(--gold-soft); white-space: nowrap; }
.band__price { margin: -6px 0 16px; font-family: var(--fine); font-size: clamp(1.8rem, 2.6vw, 2.3rem); line-height: 1.1; color: var(--gold-deep); }
.svc-price { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--book); font-style: italic; color: var(--slate); }
.svc-price b { font-family: var(--display); font-style: normal; font-weight: 700; color: var(--ink); }
.svc-sub { margin-top: 30px; }
.area-note { margin: -16px 0 34px; font-family: var(--book); font-style: italic; color: var(--slate); }
.footer__legal a { color: inherit; }
.footer__legal a:hover { color: var(--gold); }
.form__foot a { color: var(--gold-deep); font-weight: 600; }
.legal { display: grid; gap: clamp(56px, 7vw, 96px); max-width: 820px; }
.legal p { margin-top: 14px; color: var(--slate); }
.legal p b { color: var(--ink); }
.legal .h2 { margin-bottom: 8px; }

/* ---------- Website 6: back link + build-your-own monthly plan (existing palette, fonts and frames) ---------- */
.back-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: 18px; font-family: var(--book); font-style: italic; font-size: 1.05rem; color: var(--gold-soft); text-decoration: none; }
.back-link span { transition: transform .35s var(--ease); }
.back-link:hover span, .back-link:focus-visible span { transform: translateX(-4px); }
.paper .back-link { color: var(--gold-deep); }

.pb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(32px, 4vw, 64px); align-items: start; }
.pb-start { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
.pb-group + .pb-group { margin-top: 48px; }
.pb-group__title { margin-bottom: 14px; }
.pb-items { border-top: 1px solid var(--line); }
.pb-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px 22px; padding: 16px 12px; border-bottom: 1px solid var(--line); transition: background .25s var(--ease); }
.pb-item.is-on { background: rgba(201, 160, 85, .12); box-shadow: inset 2px 0 0 var(--gold-deep); }
.pb-item__name { display: block; font-weight: 600; color: var(--ink); line-height: 1.35; }
.pb-item__detail { display: block; margin-top: 2px; font-size: .92rem; color: var(--slate); }
.pb-item__price { font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--ink); white-space: nowrap; }
.pb-stepper { display: inline-flex; align-items: center; gap: 8px; }
.pb-btn { width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border: 1px solid var(--navy); border-radius: 2px; font-size: 1.35rem; line-height: 1; color: var(--navy); cursor: pointer; transition: background .2s, color .2s, opacity .2s; }
.pb-btn:hover:not(:disabled) { background: var(--navy); color: var(--cream); }
.pb-btn:disabled { opacity: .3; cursor: not-allowed; }
.pb-qty { min-width: 1.6em; text-align: center; font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--ink); }

.pb-summary { position: sticky; top: 104px; padding: 36px 32px; background: var(--navy-2); color: var(--cream); border: 1px solid var(--gold); }
.pb-summary::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--line-gold); pointer-events: none; }
.pb-summary > * { position: relative; z-index: 1; }
.pb-summary .cap { color: var(--gold-soft); margin-bottom: 6px; }
.pb-summary .h3 { margin-bottom: 16px; }
.pb-lines { max-height: 260px; overflow: auto; margin-bottom: 18px; font-size: .92rem; }
.pb-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(243, 238, 228, .14); color: var(--cream); }
.pb-lines li span:last-child { white-space: nowrap; color: var(--gold-soft); }
.pb-lines .pb-free span:last-child { font-family: var(--book); font-style: italic; }
.pb-totals div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: .95rem; }
.pb-totals div[hidden] { display: none; }
.pb-totals dt { color: var(--mist); }
.pb-totals dd { margin: 0; font-weight: 600; text-align: right; }
.pb-monthly { margin: 18px 0 6px; padding-top: 16px; border-top: 1px solid var(--line-gold); font-family: var(--fine); font-size: clamp(2.6rem, 3.6vw, 3.2rem); line-height: 1; color: var(--gold); }
.pb-monthly small { display: block; margin-top: 6px; font-family: var(--book); font-style: italic; font-size: 1rem; color: var(--gold-soft); }
.pb-hint { margin: 12px 0 22px; font-family: var(--book); font-style: italic; color: var(--gold-soft); }
.pb-send { width: 100%; justify-content: center; }
.pb-send[aria-disabled] { opacity: .55; }
.pb-terms { margin-top: 14px; font-size: .85rem; color: var(--mist); }
.pb-bar { display: none; }
.pb-projects { max-width: 760px; }
.navy .pb-projects li { color: var(--cream); }
.pb-foot { margin-top: 28px; }

/* Custom plan banner on the options page */
.plan-custom { display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: center; margin-top: clamp(28px, 3vw, 40px); padding: 32px 34px; border: 1px solid var(--gold); }
.plan-custom .h3 { margin-bottom: 8px; }
.plan-custom p { color: var(--mist); max-width: 40em; }

@media (max-width: 1024px) {
  .pb { grid-template-columns: 1fr; }
  .pb-summary { position: relative; top: 0; }
  .pb-section { scroll-padding-bottom: 96px; }
  .pb-bar { position: sticky; bottom: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 calc(var(--gutter) * -1); padding: 14px var(--gutter); background: var(--navy); color: var(--cream); border-top: 1px solid var(--gold); }
  .pb-bar b { display: block; font-family: var(--fine); font-size: 1.7rem; line-height: 1; color: var(--gold); }
  .pb-bar span { font-size: .85rem; color: var(--mist); }
  .pb-bar .link { color: var(--gold-soft); }
}
@media (max-width: 640px) {
  .pb-item { grid-template-columns: minmax(0, 1fr) auto; padding: 16px 4px; }
  .pb-item__price { grid-column: 1; grid-row: 2; font-size: 1rem; }
  .pb-stepper { grid-column: 2; grid-row: 1 / span 2; }
  .pb-start .btn { width: 100%; justify-content: center; }
  .pb-summary { padding: 30px 22px; }
  .plan-custom { grid-template-columns: 1fr; padding: 26px 22px; }
  .plan-custom .btn { width: 100%; justify-content: center; }
}
.band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }

/* ---------- Website 7: websites page + website packages in the plan builder (existing palette, fonts and frames) ---------- */
.web-points { margin: 24px 0 0; }
.web-points li { color: var(--slate); }
.web-photo { aspect-ratio: 4 / 3; }
.plans--web .diamonds { margin: 18px 0 24px; }
.plans--web .diamonds li { font-size: .94rem; padding: 7px 0; }
.plan > .plan__plus { margin-top: 14px; font-family: var(--book); font-style: italic; color: var(--gold-soft); }
.plan__label { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: .74rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.plan__label::before, .plan__label::after { content: ""; flex: 0 0 26px; height: 1px; background: var(--gold); }
.plan--sig { box-shadow: 0 30px 60px -30px rgba(6, 17, 39, .7); }
.plan--sig .plan__price { font-size: clamp(3rem, 4.4vw, 3.9rem); }
.plan__act--two { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }

.cmp-wrap { overflow-x: auto; background: #f8f4ec; border: 1px solid var(--line); }
.cmp-wrap:focus-visible { outline-offset: 4px; }
.cmp { width: 100%; min-width: 560px; border-collapse: collapse; color: var(--ink); font-size: .98rem; }
.cmp th, .cmp td { padding: 13px 18px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp thead th { padding: 22px 18px 16px; font-family: var(--display); font-weight: 700; font-size: 1.2rem; border-bottom: 1px solid var(--gold-deep); }
.cmp tbody th { text-align: left; font-weight: 600; }
.cmp .is-sig { background: rgba(201, 160, 85, .16); }
.cmp thead .is-sig { color: var(--gold-deep); }
.cmp__price td { font-family: var(--fine); font-size: 1.6rem; line-height: 1.1; color: var(--gold-deep); }
.cmp .yes { font-weight: 700; color: var(--gold-deep); }
.cmp .no { color: var(--slate); opacity: .6; }

.callout { position: relative; margin-top: 30px; padding: 24px 26px; background: rgba(201, 160, 85, .12); border: 1px solid rgba(126, 95, 37, .45); }
.callout .h3 { margin-bottom: 8px; font-size: 1.3rem; }
.callout p { color: var(--slate); }
.sig-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }
.faq--sig summary { padding: 20px 0; }
.faq--sig .faq__a p { color: var(--slate); }
.faq--sig .faq__a p + p, .faq--sig .faq__a ul + p { margin-top: 12px; }
.faq--sig .diamonds { margin: 12px 0 0; }
.faq--sig .diamonds li { padding: 7px 0; font-size: .96rem; color: var(--ink); }
.diamonds--cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.diamonds--cols li:nth-child(2) { border-top: 1px solid var(--line); }

.plans--care .plan__price { margin-top: 0; }
.care-note { max-width: 46em; margin-top: clamp(28px, 3vw, 40px); font-family: var(--book); font-style: italic; font-size: 1.1rem; color: var(--gold-soft); }

.work { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 3.4vw, 52px); }
.work__img { aspect-ratio: 4 / 3; }
.slot { display: grid; place-items: center; height: 100%; padding: 20px; border: 1px dashed rgba(126, 95, 37, .55); background: var(--linen); font-family: var(--book); font-style: italic; color: var(--gold-deep); text-align: center; }
.work__item .h3 { margin: 30px 0 4px; }
.work__item p { margin-bottom: 10px; color: var(--slate); }

/* Plan builder: website packages */
.pb-web { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 280px); gap: 24px; align-items: start; }
.pb-sub { margin: 26px 0 8px; font-family: var(--book); font-style: italic; font-size: 1.05rem; color: var(--gold-deep); }
.pb-pick { min-width: 96px; min-height: 44px; padding: 0 16px; background: transparent; border: 1px solid var(--navy); border-radius: 2px; font: inherit; font-size: .95rem; font-weight: 600; color: var(--navy); cursor: pointer; transition: background .2s, color .2s; }
.pb-pick:hover, .pb-pick[aria-pressed="true"] { background: var(--navy); color: var(--cream); }
.pb-webpanel { position: sticky; top: 104px; padding: 26px 24px; background: var(--navy-2); color: var(--cream); border: 1px solid var(--gold); }
.pb-webpanel::after { content: ""; position: absolute; inset: 7px; border: 1px solid var(--line-gold); pointer-events: none; }
.pb-webpanel > * { position: relative; z-index: 1; }
.pb-webpanel .plan__label { margin-bottom: 10px; color: var(--gold-soft); }
.pb-webpanel .plan__label::before, .pb-webpanel .plan__label::after { background: var(--gold-soft); }
.pb-webpanel__title { margin-bottom: 10px; font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.25; }
.pb-webpanel p { font-size: .95rem; color: var(--mist); }
.pb-webpanel .link { margin-top: 16px; color: var(--gold-soft); text-decoration-color: var(--gold-soft); }
.pb-oneoff { margin: 4px 0 0; font-family: var(--book); font-style: italic; color: var(--gold-soft); }
.pb-oneoff[hidden] { display: none; }

@media (max-width: 1024px) {
  .pb-web { grid-template-columns: 1fr; }
  .pb-webpanel { position: relative; top: 0; }
}
@media (max-width: 900px) {
  .work { grid-template-columns: 1fr; max-width: 520px; }
}
@media (max-width: 640px) {
  .diamonds--cols { grid-template-columns: 1fr; }
  .diamonds--cols li:nth-child(2) { border-top: 0; }
  .cmp { font-size: .9rem; }
  .cmp th, .cmp td { padding: 11px 10px; }
  .pb-pick { min-width: 84px; padding: 0 12px; }
}
.svc-row p.svc-more { margin-top: 20px; }
.plan__inline { color: inherit; text-decoration: underline; text-decoration-color: var(--gold-soft); text-underline-offset: 4px; }
.plan__inline:hover { color: var(--gold-soft); }

/* ---------- Website 8: one-off projects in the plan builder ---------- */
.pb-item--project .pb-item__text { min-width: 0; }
.pb-tag { display: block; margin-bottom: 4px; font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); }
.pb-item__price small { display: block; margin-top: 2px; font-family: var(--book); font-style: italic; font-weight: 400; font-size: .85rem; color: var(--slate); text-align: right; }
.pb-more-btn { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; padding: 0; background: none; border: 0; font: inherit; font-size: .92rem; font-weight: 600; color: var(--gold-deep); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(126, 95, 37, .45); cursor: pointer; }
.pb-more-btn:hover { text-decoration-color: currentColor; }
.pb-more { grid-column: 1 / -1; margin-top: 2px; padding: 22px 24px; background: rgba(255, 255, 255, .45); border-left: 2px solid var(--gold-deep); }
.pb-more[hidden] { display: none; }
.pb-more__title { font-family: var(--display); font-weight: 700; font-size: 1.2rem; line-height: 1.25; color: var(--ink); }
.pb-more__type { margin: 4px 0 12px; font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); }
.pb-more__intro { margin-bottom: 10px; color: var(--slate); }
.pb-more__list { margin-top: 16px; }
.pb-more__label { margin-bottom: 6px; font-family: var(--book); font-style: italic; font-size: 1.05rem; color: var(--gold-deep); }
.pb-more__items { columns: 2; column-gap: 32px; margin: 0; }
.pb-more__items li { break-inside: avoid; padding: 7px 0; font-size: .95rem; }
.pb-more__note { margin-top: 16px; padding: 12px 16px; border-left: 2px solid var(--gold-deep); background: rgba(126, 95, 37, .06); font-size: .92rem; color: var(--slate); }
.pb-more__timing { margin-top: 12px; font-family: var(--book); font-style: italic; color: var(--slate); }
.pb-lines .pb-lines__head { justify-content: flex-start; padding-top: 14px; border-bottom: 0; font-family: var(--book); font-style: italic; color: var(--gold-soft); }
.pb-total-label { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-gold); font-family: var(--book); font-style: italic; font-size: 1rem; color: var(--gold-soft); }
.pb-total-label + .pb-monthly { margin-top: 4px; padding-top: 0; border-top: 0; }
.pb-oneoff { margin: 0; font-style: normal; }
.pb-oneoff .pb-total-label { margin-top: 16px; padding-top: 14px; }
.pb-oneoff__amount { margin-top: 4px; font-family: var(--fine); font-size: clamp(2rem, 2.8vw, 2.4rem); line-height: 1; color: var(--gold); }
.pb-oneoff__note { margin-top: 6px; font-family: var(--book); font-style: italic; font-size: .92rem; color: var(--mist); }
@media (max-width: 640px) {
  .pb-item--project .pb-pick { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .pb-item__price small { text-align: left; display: inline; margin: 0 0 0 6px; }
  .pb-more { padding: 18px 16px; }
  .pb-more__items { columns: 1; }
}

/* ---------- Website 9: pricing types, monthly packs, legal note ---------- */
.pb-types { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: -18px 0 36px; padding: 14px 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, .35); font-size: .9rem; color: var(--slate); }
.pb-types b { font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); margin-right: 6px; }
.pb-item--pack .pb-tag { color: var(--navy); }
.pb-item.is-locked .pb-item__name, .pb-item.is-locked .pb-item__price { opacity: .55; }
.pb-item.is-locked .pb-item__detail { font-style: italic; }
.pb-item--addon { padding-left: 32px; }
.pb-note { padding: 14px 12px; border-bottom: 1px solid var(--line); font-family: var(--book); font-style: italic; color: var(--gold-deep); }
.pb-legal { margin-top: 18px; padding: 14px 18px; border-left: 2px solid var(--gold-deep); background: rgba(126, 95, 37, .06); font-size: .9rem; line-height: 1.6; color: var(--slate); }
.pb-more__highlight { margin: 16px 0 4px; padding: 14px 18px; background: var(--navy); color: var(--cream); }
.pb-more__highlight p { font-size: .95rem; color: var(--mist); }
.pb-more__highlight .pb-more__hl-title { margin-bottom: 4px; font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--gold-soft); }
@media (max-width: 640px) {
  .pb-types { margin-top: -10px; }
  .pb-item--addon { padding-left: 14px; }
}

/* ---------- Website 11: "Included with your Belmont plan" ---------- */
.included { position: relative; margin-top: clamp(32px, 4vw, 48px); padding: clamp(28px, 4vw, 52px); border: 1px solid var(--gold); background: var(--navy-2); color: var(--cream); }
.included::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--line-gold); pointer-events: none; }
.included > * { position: relative; z-index: 1; }
.included__head { max-width: 720px; margin-bottom: 28px; }
.included__head .cap { color: var(--gold-soft); margin-bottom: 6px; }
.included__head .h3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin-bottom: 12px; }
.included__head p { color: var(--mist); }
.included__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--line-gold); }
.included__list li { position: relative; padding: 16px 0 16px 22px; border-bottom: 1px solid var(--line-gold); }
.included__list li::before { content: ""; position: absolute; left: 0; top: 24px; width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold); }
.included__list b { display: block; font-weight: 600; color: var(--cream); }
.included__list span { display: block; margin-top: 4px; font-size: .95rem; color: var(--mist); }
.included__fair { margin-top: 24px; font-family: var(--book); font-style: italic; color: var(--gold-soft); max-width: 60em; }
@media (max-width: 760px) { .included__list { grid-template-columns: 1fr; } }

/* ---------- Website 12: free website review ---------- */
.pb-item--free .pb-tag { color: var(--gold-deep); }
.pb-item--free .pb-item__price { font-size: 1.35rem; letter-spacing: .08em; color: var(--gold-deep); }
.pb-lines__head + .pb-free span:last-child, .pb-lines .pb-free span:last-child { color: var(--gold-soft); }

/* ---------- Website 13: services grid, free website review, discount note, payments and client portal ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(44px, 5vw, 64px) clamp(24px, 2.6vw, 36px); }
.svc-card .frame { margin-bottom: 30px; }
.svc-card .frame::before { inset: 10px -10px -10px 10px; }
.svc-card .frame__img { aspect-ratio: 4 / 3; }
.svc-card .frame__img::after { inset: 8px; }
.svc-card .cap { margin-bottom: 4px; }
.svc-card .h3 { font-size: clamp(1.2rem, 1.5vw, 1.4rem); margin-bottom: 8px; }
.svc-card p { font-size: .97rem; color: var(--slate); }
.svc-card .link { display: inline-block; margin-top: 12px; font-size: .95rem; }
.svc-legal { margin-top: clamp(44px, 5vw, 64px); max-width: 64em; }
@media (max-width: 1100px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .svc-grid { grid-template-columns: 1fr; gap: 26px; }
  .svc-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: start; }
  .svc-card .frame { margin: 0; }
  .svc-card .frame::before { display: none; }
  .svc-card .frame__img { aspect-ratio: 1 / 1; }
  .svc-card .frame__img::after { inset: 5px; }
  .svc-card p { font-size: .94rem; }
}

.review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.review__badge { margin-top: 14px; font-family: var(--fine); font-style: italic; font-size: clamp(1.3rem, 1.8vw, 1.6rem); color: var(--gold-deep); }
.review__text { margin-top: 14px; max-width: 34em; color: var(--slate); }
.review__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 28px; }
.review__box { position: relative; padding: clamp(26px, 3.4vw, 44px); background: #f8f4ec; border: 1px solid var(--line); }
.review__box::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(126, 95, 37, .35); pointer-events: none; }
.review__box > * { position: relative; z-index: 1; }
.review__label { font-family: var(--book); font-style: italic; font-size: 1.1rem; color: var(--gold-deep); }
.review__box .diamonds { margin: 12px 0 0; }
.review__box .diamonds li { padding: 8px 0; font-size: .96rem; }
.review__note { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .92rem; color: var(--slate); }
@media (max-width: 900px) { .review { grid-template-columns: 1fr; } }

.pb-rule-note { margin-top: clamp(36px, 4vw, 52px); padding: 18px 22px; max-width: 62em; border-left: 2px solid var(--gold-deep); background: rgba(126, 95, 37, .06); color: var(--slate); }

.pay-list { margin: 22px 0 34px; }
.pay-secure { padding: 20px 22px; border: 1px dashed rgba(126, 95, 37, .55); background: var(--linen); }
.pay-secure__title { font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--ink); margin-bottom: 4px; }
.pay-secure p:not(.pay-secure__title) { font-size: .94rem; color: var(--slate); }

.portal-list { margin-top: 24px; border-top: 1px solid var(--line); }
.portal-list li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.portal-list b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.portal-list span { display: block; margin-top: 2px; color: var(--slate); font-size: .96rem; }

.area-facts div { padding: 10px 0; border-bottom: 1px solid var(--line-gold); }
.area-facts dt { font-family: var(--book); font-style: italic; color: var(--gold-soft); }
.area-facts dd { margin: 2px 0 0; font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--cream); }
.area { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.journal { margin-top: 30px; border-top: 1px solid var(--line); }
.journal li { padding: 24px 0; border-bottom: 1px solid var(--line); }
.journal__date { font-family: var(--book); font-style: italic; color: var(--gold-deep); }
.journal .h3 { margin: 4px 0 8px; }
.journal p:not(.journal__date) { color: var(--slate); }
.area__side { display: grid; gap: 22px; }
.area-box { padding: 26px 28px; background: #f8f4ec; border: 1px solid var(--line); }
.area-box .diamonds { margin: 10px 0 0; }
.area-box > p { margin-top: 16px; }
.area-files { margin-top: 10px; }
.area-files li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .96rem; }
@media (max-width: 900px) { .area { grid-template-columns: 1fr; } }
.next + .area-note { margin: 22px 0 0; }

/* ---------- Website 14: £995 package, legal pages, cookie banner, client area demo, invoice ---------- */
.pkg__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding-bottom: 28px; margin-bottom: 26px; border-bottom: 1px solid var(--line-gold); }
.pkg__price { margin-top: 10px; font-family: var(--fine); font-size: clamp(3.2rem, 5vw, 4.4rem); line-height: 1; color: var(--gold); }
.pkg__price small { display: inline-block; margin-left: 10px; font-family: var(--book); font-style: italic; font-size: 1.1rem; color: var(--gold-soft); }
.pkg__terms { margin-top: 10px; color: var(--mist); }
.pkg__label { margin-bottom: 6px; font-family: var(--book); font-style: italic; font-size: 1.1rem; color: var(--gold-soft); }
.pkg__list b { display: flex; justify-content: space-between; gap: 16px; }
.pkg__list b em { font-style: normal; font-family: var(--display); color: var(--gold-soft); white-space: nowrap; }
.pkg__maths { margin-top: 22px; color: var(--mist); max-width: 62em; }
.pkg__maths b { color: var(--cream); }
.pb-head { margin-bottom: clamp(28px, 4vw, 48px); }
.pb-pkg-note { margin: -24px 0 28px; padding: 14px 18px; border-left: 2px solid var(--gold-deep); background: rgba(126, 95, 37, .08); color: var(--ink); }
.pb-note--legal { font-style: normal; }
.pb-note--legal .pb-legal { margin: 0; font-family: var(--body, inherit); font-style: normal; }

.nav a.nav__client { opacity: .7; font-size: .92rem; }
.footer__cookies { padding: 0; background: none; border: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.footer__cookies:hover { color: var(--gold); }
.link-btn { min-height: 44px; padding: 0 4px; background: none; border: 0; font: inherit; font-weight: 600; color: var(--gold-soft); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

.cookie-banner { position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px; max-width: 640px; margin-left: auto; background: var(--midnight); color: var(--cream); border: 1px solid var(--gold); box-shadow: 0 24px 60px -20px rgba(6, 17, 39, .6); }
.cookie-banner__in { padding: 22px 24px; }
.cookie-banner__title { font-family: var(--display); font-weight: 700; font-size: 1.15rem; margin-bottom: 6px; }
.cookie-banner p { color: var(--mist); font-size: .95rem; }
.cookie-banner a { color: var(--gold-soft); }
.cookie-banner__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }
.cookie-banner__prefs { display: grid; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-gold); }
.cookie-banner__prefs[hidden] { display: none; }
.cookie-banner__prefs label { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; color: var(--mist); }
.cookie-banner__prefs input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--gold); }
.cookie-banner__prefs b { color: var(--cream); margin-right: 4px; }
.cookie-banner__prefs .btn { justify-self: start; }

.doc-wrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.doc-toc { position: sticky; top: 110px; max-height: calc(100vh - 140px); overflow: auto; padding-right: 8px; }
.doc-toc ol { margin-top: 10px; font-size: .9rem; }
.doc-toc li { padding: 5px 0; border-bottom: 1px solid var(--line); }
.doc-toc a { color: var(--slate); text-decoration: none; }
.doc-toc a:hover { color: var(--gold-deep); }
.doc-toc__more { margin-top: 18px; font-size: .88rem; color: var(--slate); }
.doc-toc__more a { color: var(--gold-deep); }
.doc { max-width: 760px; }
.doc__sec { padding: 28px 0; border-top: 1px solid var(--line); scroll-margin-top: 110px; }
.doc__sec:first-child { padding-top: 0; border-top: 0; }
.doc__h { font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 1.8vw, 1.55rem); margin-bottom: 10px; }
.doc__sub { margin: 18px 0 4px; font-family: var(--book); font-style: italic; font-size: 1.1rem; color: var(--gold-deep); }
.doc p { margin-top: 10px; color: var(--slate); }
.doc a { color: var(--gold-deep); }
.doc__list { margin: 10px 0 0; }
.doc__list li { padding: 6px 0; font-size: .97rem; }
.doc__ol { margin: 10px 0 0 22px; list-style: decimal; color: var(--slate); }
.doc__ol li { padding: 4px 0; }
.doc__table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: .92rem; }
.doc__table th, .doc__table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.doc__table th { font-weight: 600; color: var(--ink); }
@media (max-width: 900px) { .doc-wrap { grid-template-columns: 1fr; } .doc-toc { position: static; max-height: none; } .doc-toc ol { columns: 2; column-gap: 24px; } }
@media (max-width: 560px) { .doc-toc ol { columns: 1; } }

.area-nav { position: sticky; top: 72px; z-index: 5; background: var(--linen-2); border-bottom: 1px solid var(--line); }
.area-nav .wrap { display: flex; gap: 6px 26px; overflow-x: auto; white-space: nowrap; }
.area-nav a { display: inline-flex; align-items: center; min-height: 52px; font-size: .95rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.area-nav a:hover { color: var(--gold-deep); }
.area-table { width: 100%; margin-top: 26px; border-collapse: collapse; font-size: .96rem; }
.area-table th, .area-table td { padding: 13px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.area-table th { font-family: var(--book); font-style: italic; font-weight: 400; color: var(--gold-deep); }
.area-table td:not(:first-child) { color: var(--slate); }
.area-table .due { color: var(--gold-deep); }
.area-dl div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.area-dl dt { color: var(--slate); }
.area-dl dd { margin: 0; font-weight: 600; text-align: right; }
.area-checks { margin-top: 10px; }
.area-checks li { position: relative; padding: 9px 0 9px 28px; border-bottom: 1px solid var(--line); font-size: .96rem; }
.area-checks li::before { content: ""; position: absolute; left: 0; top: 13px; width: 14px; height: 14px; border: 1px solid var(--gold-deep); }
.area-checks li.is-done { color: var(--slate); text-decoration: line-through; text-decoration-color: rgba(126, 95, 37, .5); }
.area-checks li.is-done::before { background: var(--gold-deep); }
.area-note2 { margin-top: 16px; font-family: var(--book); font-style: italic; color: var(--slate); }
.area-pay .h3 { margin: 4px 0 10px; }
.area-pay .pay-secure { margin: 18px 0; }
.area-pay .form__status { margin-top: 14px; }
.portal-demo { grid-column: 1 / -1; font-size: .88rem; color: var(--slate); font-style: italic; }
.contact__aside .next + .portal-list { margin-top: 30px; }
@media (max-width: 640px) { .area-table { font-size: .88rem; } .area-table th, .area-table td { padding: 10px 6px; } }

.invoice-acts { display: flex; justify-content: space-between; align-items: center; gap: 16px; max-width: 820px; margin: 0 auto 24px; }
.invoice { max-width: 820px; margin: 0 auto; padding: clamp(28px, 5vw, 56px); background: #fff; border: 1px solid var(--line); color: var(--ink); }
.invoice__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 2px solid var(--gold); }
.invoice__logo { height: auto; }
.invoice__from { display: grid; gap: 2px; text-align: right; font-size: .92rem; color: var(--slate); }
.invoice__from b { color: var(--ink); }
.invoice__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; margin: 26px 0; }
.invoice__meta dl div { display: flex; justify-content: space-between; gap: 30px; padding: 4px 0; font-size: .95rem; }
.invoice__meta dt { color: var(--slate); }
.invoice__meta dd { margin: 0; font-weight: 600; }
.invoice__label { font-family: var(--book); font-style: italic; color: var(--gold-deep); margin-bottom: 4px; }
.invoice__table { width: 100%; border-collapse: collapse; }
.invoice__table th, .invoice__table td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.invoice__table td:last-child, .invoice__table th:last-child { text-align: right; white-space: nowrap; }
.invoice__table thead th { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.invoice__table tfoot th { text-align: right; font-weight: 500; color: var(--slate); }
.invoice__total th, .invoice__total td { font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--ink) !important; border-bottom: 2px solid var(--gold); }
.invoice__small { font-size: .88rem; color: var(--slate); }
.invoice__pay { margin-top: 28px; padding: 18px 20px; background: var(--linen); }
.invoice__pay p + p { margin-top: 6px; }
.invoice__foot { margin-top: 22px; font-size: .88rem; color: var(--slate); }
@media print {
  .header, .menu, .footer, .invoice-acts, .cookie-banner, .skip-link { display: none !important; }
  body, .invoice-page { background: #fff !important; }
  .invoice-page { padding: 0 !important; }
  .invoice { border: 0; padding: 0; max-width: none; }
}
@media print { .phero { display: none !important; } }

/* ---------- Website 15: client area demo — journal thread, Belmont view, one-off projects ---------- */
.ca-lead { margin: 10px 0 22px; color: var(--slate); max-width: 40em; }
.ca-sub { margin-top: 30px; font-family: var(--book); font-style: italic; font-size: 1.1rem; color: var(--gold-deep); }
.ca-oneoff__list li { display: flex; justify-content: space-between; gap: 20px; padding: 13px 10px; border-bottom: 1px solid var(--line); }
.ca-oneoff__list b { display: block; font-weight: 600; }
.ca-oneoff__list small { display: block; margin-top: 2px; font-size: .88rem; color: var(--slate); }
.ca-oneoff__list li > span:last-child { white-space: nowrap; font-weight: 600; }
.ca-admin { background: var(--gold); color: var(--midnight); }
.ca-admin__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-top: 12px; padding-bottom: 12px; }
.ca-admin .input { width: auto; min-height: 44px; }

.jn-form { display: grid; gap: 6px; padding: 20px 22px; background: #f8f4ec; border: 1px solid var(--line); }
.jn-form label { font-weight: 600; font-size: .95rem; }
.jn-form .input { margin-bottom: 8px; }
.jn-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 6px; }
.jn-form__note { font-size: .88rem; color: var(--slate); }
.jn-status { font-size: .9rem; color: var(--gold-deep); min-height: 1.2em; }
.jn-list { max-height: 440px; overflow-y: auto; margin-top: 18px; padding-right: 6px; border-top: 1px solid var(--line); }
.jn-list:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.jn-item { position: relative; margin-top: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); }
.jn-item--belmont { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.jn-item__who { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: .85rem; }
.jn-item__who b { font-weight: 600; }
.jn-item--client .jn-item__who b { color: var(--ink); }
.jn-item--belmont .jn-item__who b { color: var(--gold-soft); }
.jn-item__who span { color: var(--slate); }
.jn-item--belmont .jn-item__who span { color: var(--mist); }
.jn-item__subject { margin-top: 6px; font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.jn-item__text { margin-top: 4px; font-size: .96rem; color: var(--slate); }
.jn-item--belmont .jn-item__text { color: var(--mist); }
.jn-item .textarea { margin-top: 8px; }
.jn-edit { margin-top: 6px; min-height: 36px; padding: 0; background: none; border: 0; font: inherit; font-size: .88rem; font-weight: 600; color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.jn-item--belmont .jn-edit { color: var(--gold-soft); }
.jn-item__acts { display: flex; align-items: center; gap: 16px; margin-top: 8px; }

/* ---------- Website 16: Belmont marks plan items as done ---------- */
.ca-prog { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ca-prog .input { width: auto; min-height: 40px; padding: 6px 8px; font-size: .9rem; }
.ca-prog .btn { min-height: 40px; padding: 0 14px; }
.ca-oneoff__list .ca-prog { margin-top: 8px; }
.area-table--admin td { vertical-align: middle; }
[data-prog]:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
.area--wide { grid-template-columns: 1fr; }
.area--wide .area__side { max-width: 560px; }
.area-table--admin .ca-prog { flex-wrap: nowrap; }
@media (max-width: 760px) { .area-table--admin .ca-prog { flex-wrap: wrap; } }

/* Journal: delete, and deleted posts in Belmont's view */
.jn-item .input { margin-top: 8px; }
.jn-item__acts { flex-wrap: wrap; }
.jn-item__ask { font-size: .9rem; font-weight: 600; }
.jn-item--deleted { background: #ece8e1 !important; border-color: var(--line) !important; color: var(--slate) !important; opacity: .7; }
.jn-item--deleted .jn-item__who b, .jn-item--deleted .jn-item__who span, .jn-item--deleted .jn-item__text { color: var(--slate) !important; }
.jn-item--deleted .jn-item__subject, .jn-item--deleted .jn-item__text { text-decoration: line-through; text-decoration-color: rgba(75, 86, 114, .5); }
.jn-item__gone { margin-top: 6px; font-size: .85rem; font-weight: 600; color: #8a3b2e; }

/* ---------- Website 17: basket, checkout, accounts ---------- */
.nav a.nav__basket { color: var(--gold-soft); opacity: 1; font-weight: 600; }
.pb-alt { margin-top: 12px; font-size: .9rem; color: var(--mist); text-align: center; }
.pb-alt .link { color: var(--gold-soft); }
.pb-signed { margin: 0 0 22px; padding: 14px 18px; border-left: 2px solid var(--gold-deep); background: rgba(126, 95, 37, .08); color: var(--ink); }

.shop { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.shop-main .pb-lines { margin-top: 22px; }
.shop .pb-lines li { color: var(--ink); border-color: var(--line); }
.shop .pb-lines li span:last-child { white-space: nowrap; }
.shop .pb-lines .pb-lines__head span { color: var(--gold-deep); }
.shop .pb-lines .pb-free span:last-child { color: var(--gold-deep); }
.shop-side { position: sticky; top: 110px; padding: clamp(22px, 3vw, 34px); background: var(--navy); color: var(--cream); border: 1px solid var(--gold); }
.shop-side .cap { color: var(--gold-soft); }
.shop-side .pb-lines li { color: var(--cream); border-color: var(--line-gold); }
.shop-side .pb-lines .pb-lines__head span, .shop-side .pb-lines .pb-free span:last-child { color: var(--gold-soft); }
.shop-totals { margin-top: 16px; }
.shop-totals div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line-gold); }
.shop-totals dt { color: var(--mist); }
.shop-totals dd { margin: 0; font-weight: 600; white-space: nowrap; }
.shop-totals__due dt, .shop-totals__due dd { font-family: var(--display); font-size: 1.25rem; color: var(--gold) !important; }
.shop-go { width: 100%; justify-content: center; margin-top: 20px; }
.shop-small { margin-top: 12px; font-size: .86rem; color: var(--mist); }
.shop-main .shop-small { color: var(--slate); }
.shop-note { margin-top: 14px; padding: 12px 16px; border-left: 2px solid var(--gold-deep); background: rgba(126, 95, 37, .08); color: var(--ink); }
.shop-links { margin-top: 18px; font-size: .95rem; color: var(--slate); }
.shop-clear { color: var(--gold-deep); min-height: 0; }
.shop-empty, .shop-done { grid-column: 1 / -1; max-width: 640px; }
.shop-empty p, .shop-done p { margin: 12px 0 20px; color: var(--slate); }
.shop-done .diamonds { margin: 10px 0 18px; }

.co-step { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid var(--line); }
.co-step__n { font-family: var(--display); font-weight: 700; font-size: 1.3rem; margin-bottom: 12px; }
.co-step__n--off { color: var(--slate); opacity: .7; }
.co-account { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; }
.co-form, .ca-new, .ca-pw { display: grid; gap: 10px; padding: 22px 24px; background: #f8f4ec; border: 1px solid var(--line); color: var(--ink); }
.co-form label, .ca-new label, .ca-pw label { display: grid; gap: 4px; font-size: .92rem; font-weight: 600; }
.co-form .btn, .ca-pw .btn { justify-self: start; margin-top: 6px; }
.co-form--in { align-content: start; }
.co-form--in p:not(.ca-new__title) { color: var(--slate); font-size: .95rem; }
.ca-new__title { font-family: var(--display); font-weight: 700; font-size: 1.15rem; }
.co-pay { display: grid; gap: 16px; }
.co-pay .btn { justify-self: start; }
.co-agree { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.co-agree input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--gold-deep); }
.co-agree a { color: var(--gold-deep); }
#co-for { max-width: 420px; }

.ca-hero-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 6px; }
.ca-admin__tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ca-admin .btn--line { color: var(--midnight); border-color: var(--midnight); }
.ca-admin .btn--line:hover { background: var(--midnight); color: var(--cream); }
.ca-admin .ca-new { flex-basis: 100%; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.ca-admin .ca-new__title, .ca-admin .ca-new__acts, .ca-admin .ca-new .jn-status { grid-column: 1 / -1; }
.ca-new[hidden] { display: none; }
.ca-new__acts { display: flex; gap: 16px; align-items: center; }
.ca-admin .jn-status { flex-basis: 100%; color: var(--midnight); font-weight: 600; }
.ca-account { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.ca-empty { color: var(--slate); font-style: italic; }
.ca-add { color: var(--gold-soft); padding: 0; }
@media (max-width: 900px) { .shop, .co-account, .ca-account { grid-template-columns: 1fr; } .shop-side { position: static; } }
.shop .pb-lines { max-height: none; overflow: visible; }
.shop-main .pb-lines li span:last-child { color: var(--ink); font-weight: 600; }
.shop-main .pb-lines .pb-free span:last-child { color: var(--gold-deep); font-weight: 400; }
/* Correspondence & dispute support note in the plan builder */
.pb-legal p + p { margin-top: 10px; }
.pb-legal .pb-legal__title { font-family: var(--display); font-weight: 700; font-style: normal; font-size: 1.05rem; color: var(--ink); }
.pb-legal b { color: var(--ink); font-weight: 600; }

/* ---------- Chat button (every page) and the contact-page map ---------- */
.chat-fab { position: fixed; z-index: 80; right: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px; background: var(--gold); color: var(--midnight); border: 0; border-radius: 26px; font: inherit; font-weight: 700; box-shadow: 0 14px 30px -12px rgba(6, 17, 39, .55); cursor: pointer; }
.chat-fab:hover { background: var(--gold-soft); }
.chat-fab:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
.chat-panel { position: fixed; z-index: 81; right: 20px; bottom: 84px; width: min(360px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 120px)); display: flex; flex-direction: column; background: var(--midnight); color: var(--cream); border: 1px solid var(--gold); box-shadow: 0 24px 60px -20px rgba(6, 17, 39, .6); }
.chat-panel[hidden] { display: none; }
.chat-head { display: flex; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line-gold); }
.chat-title { font-family: var(--display); font-weight: 700; font-size: 1.15rem; }
.chat-sub { font-size: .86rem; color: var(--mist); }
.chat-close { min-width: 44px; min-height: 44px; margin: -10px -10px 0 0; background: none; border: 0; color: var(--cream); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.chat-menu { display: grid; gap: 10px; padding: 16px 18px; overflow-y: auto; }
.chat-menu[hidden], .chat-live[hidden], .chat-email[hidden] { display: none; }
.chat-opt { display: grid; gap: 2px; padding: 12px 14px; background: rgba(243, 238, 228, .06); border: 1px solid var(--line-gold); color: var(--cream); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.chat-opt:hover { border-color: var(--gold); background: rgba(243, 238, 228, .1); }
.chat-opt b { font-weight: 600; }
.chat-opt span { font-size: .86rem; color: var(--mist); }
.chat-opt--wa b::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: #25d366; }
.chat-more { font-size: .88rem; color: var(--mist); }
.chat-more a { color: var(--gold-soft); }
.chat-live { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 12px 18px 16px; }
.chat-back { align-self: flex-start; min-height: 36px; padding: 0; background: none; border: 0; color: var(--gold-soft); font: inherit; font-size: .9rem; cursor: pointer; }
.chat-log { display: grid; gap: 8px; max-height: 240px; overflow-y: auto; }
.chat-msg { display: grid; gap: 2px; max-width: 85%; padding: 9px 12px; font-size: .92rem; }
.chat-msg small { font-size: .74rem; opacity: .7; }
.chat-msg--us { background: rgba(243, 238, 228, .1); }
.chat-msg--you { justify-self: end; background: var(--gold); color: var(--midnight); }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.chat-input { min-height: 0; resize: none; }
.chat-email { display: grid; gap: 6px; font-size: .86rem; color: var(--mist); }
.chat-email div { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.chat-demo { font-size: .76rem; color: var(--mist); }
@media (max-width: 760px) { .has-pb-bar .chat-fab { bottom: 86px; } .has-pb-bar .chat-panel { bottom: 150px; } .chat-fab span { display: none; } .chat-fab { padding: 0 15px; } }
@media print { .chat-fab, .chat-panel { display: none !important; } }

.where { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.where__text { margin-top: 16px; color: var(--slate); max-width: 34em; }
.where__frame { position: relative; display: grid; place-content: center; justify-items: center; gap: 10px; aspect-ratio: 16 / 10; padding: 24px; text-align: center; background: var(--navy); color: var(--cream); border: 1px solid var(--gold); }
.where__frame.is-loaded { padding: 0; display: block; }
.where__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.where__note { font-family: var(--display); font-weight: 700; font-size: 1.2rem; }
.where__small { font-size: .82rem; color: var(--mist); }
@media (max-width: 900px) { .where { grid-template-columns: 1fr; } }

/* ---------- Website 18: managed websites first, buying outright second ---------- */
.plans--managed .plan__price { font-size: clamp(3rem, 4.4vw, 3.9rem); }
.plan > .plan__tag { margin: -8px 0 14px; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); }
.plan--mw .plan__act { margin-top: auto; }
.plan > .plan__alt { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-gold); font-size: .92rem; color: var(--mist); }
.plan__alt p + p { margin-top: 4px; }
.plan__alt b { color: var(--cream); font-weight: 600; }
.plan__alt .link { display: inline-block; margin-top: 8px; color: var(--gold-soft); }
.plan__alt-q { font-family: var(--book); font-style: italic; color: var(--gold-soft); }

.mw-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: start; }
.mw-box { padding: clamp(24px, 3vw, 36px); background: #f8f4ec; border: 1px solid var(--line); }
.mw-box__title { margin-bottom: 12px; font-family: var(--display); font-weight: 700; font-size: 1.2rem; }
.mw-box .diamonds li { padding: 7px 0; font-size: .95rem; }
.mw-box--quotes { background: var(--navy); color: var(--cream); border-color: var(--gold); }
.mw-quotes li { padding: 8px 0; border-bottom: 1px solid var(--line-gold); font-family: var(--book); font-style: italic; font-size: 1.05rem; color: var(--gold-soft); }
.mw-box__note { margin-top: 14px; color: var(--cream); font-weight: 600; }
.mw-fair { margin-top: 28px; padding: 16px 20px; max-width: 70em; border-left: 2px solid var(--gold-deep); background: rgba(126, 95, 37, .06); color: var(--slate); }

.own-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.own-box { padding: clamp(22px, 3vw, 32px); background: #f8f4ec; border: 1px solid var(--line); }
.own-box p + p { margin-top: 10px; }
.own-box p:not(.own-box__title) { color: var(--slate); }
.own-box__title { font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--ink); margin-bottom: 10px; }
.own-box--domain { background: var(--navy); border-color: var(--gold); }
.own-box--domain .own-box__title { color: var(--gold-soft); }
.own-box--domain p:not(.own-box__title) { color: var(--cream); }

.pb-sub--first { margin-top: 0; }
.pb-items--managed .pb-item__price { color: var(--gold-deep); }
.pb-care-note { margin: 8px 0 0; padding: 10px 14px; font-size: .88rem; color: var(--slate); border-left: 2px solid var(--gold-deep); background: rgba(126, 95, 37, .06); }
.pb-care-note[hidden] { display: none; }
@media (max-width: 900px) { .mw-grid, .own-grid { grid-template-columns: 1fr; } }

/* ---------- Website 19: four website packages ---------- */
.plans--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); }
.plans--four .plan { padding: 32px 24px; }
.plans--four .plan__price { font-size: clamp(2.6rem, 3.4vw, 3.3rem); }
.plans--four .h3 { font-size: clamp(1.15rem, 1.4vw, 1.35rem); }
.plans--four .diamonds li { font-size: .9rem; }
.plans--four .plan__act { display: grid; gap: 12px; justify-items: start; }
.plans--four .plan__alt { margin-top: 18px; }
.plans--four .plan__alt-q { font-size: 1.05rem; }
.plans-note { margin-top: 28px; max-width: 62em; color: var(--mist); }
.own-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cmp--four td, .cmp--four th { font-size: .9rem; }
@media (max-width: 1200px) { .plans--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .plans--four { grid-template-columns: 1fr; } .own-grid--four { grid-template-columns: 1fr; } }
.cmp--four .cmp__price td { font-size: clamp(1.4rem, 2vw, 1.8rem); }
/* Terms page: Parts as main headings, numbered clauses as clear sub-headings */
.doc--terms .doc__sub { margin: 22px 0 4px; font-family: var(--display); font-style: normal; font-weight: 700; font-size: 1.05rem; color: var(--ink); }

/* ---------- Website 20: cancel-anytime line on managed websites; owner photos on About ---------- */
.plan > .plan__tag .plan__cancel { display: block; margin-top: 6px; color: var(--cream); }
.mw-cancel { margin-top: 18px; font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--gold-deep); }
.who__photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); max-width: 1100px; margin: 0 auto clamp(40px, 5vw, 64px); }
.who__photos .frame__img { aspect-ratio: 4 / 5; }
.who__photos figcaption { margin-top: 10px; font-family: var(--book); font-style: italic; font-size: .95rem; color: var(--slate); }
@media (max-width: 760px) { .who__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }.who__photos .frame::before { display: none; }
/* Home: shorter monthly band — wider card, two-column list, less padding */
.band--compact { padding: clamp(56px, 6vw, 96px) 0; }
.band--compact .band__card { max-width: 860px; padding: clamp(28px, 3.4vw, 46px); }
.band--compact .band__card .h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem); margin-bottom: 12px; }
.band--compact .diamonds li { font-size: .95rem; }/* Websites hero offer — "Luxury Minimalist" pairing (ui-ux-pro-max typography #50):
   Bodoni Moda (high-contrast fashion serif, the fancy voice) + Jost (geometric sans, the modern voice). */
.web-offer { font-feature-settings: "kern" 1; }
.web-offer__kick { display: flex; align-items: center; gap: 16px; font-family: "Jost", var(--sans); font-weight: 400; font-size: .8rem; letter-spacing: .34em; text-transform: uppercase; color: var(--cream); }
.web-offer__kick::after { content: ""; flex: 0 0 48px; height: 1px; background: var(--gold); }
.web-offer__big { margin-top: 10px; font-family: "Bodoni Moda", var(--fine); font-optical-sizing: auto; font-style: italic; font-weight: 500; font-size: clamp(2.4rem, 3.5vw, 3.3rem); line-height: 1.02; letter-spacing: -0.01em; color: var(--gold); }
.web-offer__line { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 26px; font-family: "Jost", var(--sans); font-weight: 300; font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; color: var(--cream); }
.web-offer__line span { white-space: nowrap; }
.web-offer__clip { overflow: hidden; margin-top: 26px; }
.web-offer__clip .web-offer__line { margin: 0 0 0 -15px; }
.web-offer__line span { padding-left: 14px; border-left: 1px solid var(--gold); line-height: 1; margin-right: 14px; }
.web-offer__cancel { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(201, 162, 90, .4); font-family: "Bodoni Moda", var(--fine); font-optical-sizing: auto; font-weight: 400; font-size: clamp(1.25rem, 1.6vw, 1.45rem); line-height: 1.2; color: var(--cream); }
.web-offer__cancel em { font-style: italic; color: var(--gold); }
.web-offer + p { margin-top: 22px; }/* Footer: no giant "Belmont" word; tighter spacing (user: bottom took too much space) */
.footer { padding: clamp(48px, 5vw, 68px) 0 22px; }
.footer__top { padding-bottom: 30px; gap: 28px; }
.footer__logo { width: 140px; }
.footer a { min-height: 32px; }
.footer__word { display: none; }
.footer__bottom { padding-top: 16px; }
.phero__grid--offer { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
.phero__grid--offer .phero__side { max-width: 31em; }
@media (max-width: 1000px) { .phero__grid--offer { grid-template-columns: 1fr; } }
.phero__grid--offer .bill__big { white-space: normal; font-size: clamp(2.4rem, 4.4vw, 4.2rem); }
@media (max-width: 640px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: 24px 20px; padding-bottom: 24px; }
  .footer__top > div:first-child { grid-column: 1 / -1; }
  .footer__logo { width: 110px; }
  .footer__tag { margin-top: 10px; font-size: 1rem; }
  .footer a { min-height: 30px; font-size: .92rem; }
  .footer h2 { margin-bottom: 6px; }
  .footer__bottom { gap: 4px 16px; font-size: .8rem; }
}

/* ---------- Website 21: the condensed price menu (plan-builder.html#menu) ---------- */
.menu-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.menu-col { padding: clamp(22px, 2.4vw, 32px); border: 1px solid var(--line-gold); background: rgba(255, 255, 255, .03); }
.menu-col__title { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line-gold); font-family: var(--book); font-style: italic; font-size: 1.25rem; color: var(--gold); }
.menu-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); color: var(--cream); font-size: .98rem; line-height: 1.35; }
.menu-list b { flex: none; font-family: var(--fine); font-weight: 500; font-size: 1.2rem; color: var(--cream); white-space: nowrap; }
.menu-list b small { font-family: var(--book); font-style: italic; font-size: .8rem; color: var(--mist); margin-right: 2px; }
.menu-col__note { margin-top: 14px; font-size: .84rem; color: var(--mist); }
.menu-foot { margin-top: 26px; max-width: 64em; color: var(--mist); }
@media (max-width: 1100px) { .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .menu-grid { grid-template-columns: 1fr; } }.menu-list--plan { margin: 16px 0 6px; }
.plan .menu-list--plan li { color: inherit; border-bottom-color: var(--line); }
.plan .menu-list--plan b { color: inherit; font-size: 1.1rem; }
.plan--main .menu-list--plan li { border-bottom-color: rgba(255, 255, 255, .14); }
.plan__from { font-family: var(--book); font-style: italic; font-size: .38em; margin-right: 6px; vertical-align: middle; color: var(--mist); }.care-one { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(28px, 4vw, 56px); padding: clamp(26px, 3.4vw, 46px); border: 1px solid var(--gold); background: rgba(255, 255, 255, .03); }
.care-one__price { padding-right: clamp(0px, 3vw, 40px); border-right: 1px solid var(--line-gold); }
.care-one__price > p:not(.plan__price):not(.plan__per) { color: var(--mist); }
.care-one__label { margin-bottom: 8px; font-family: var(--book); font-style: italic; font-size: 1.15rem; color: var(--gold); }
.care-one .diamonds li { color: var(--cream); }
.care-one__fair { margin-top: 18px; font-size: .92rem; color: var(--mist); }
@media (max-width: 800px) { .care-one { grid-template-columns: 1fr; } .care-one__price { padding-right: 0; border-right: 0; padding-bottom: 22px; border-bottom: 1px solid var(--line-gold); } }
.menu-list--plan { margin-bottom: 18px; }
.care-one__price .h3 { margin: 12px 0 8px; }
.care-one__price .plan__act { margin-top: 22px; }
/* ---------- Website 21: Belmont Monthly Support package card, pricing details ---------- */
.pkg-card { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-bottom: clamp(24px, 3vw, 36px); padding: clamp(26px, 3.4vw, 44px); border: 1px solid var(--gold); background: rgba(201, 162, 90, .07); }
.pkg-card__name { margin: 12px 0 4px; font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--cream); }
.pkg-card__price { font-family: var(--fine); font-size: clamp(2.6rem, 4.4vw, 3.6rem); line-height: 1; color: var(--gold); }
.pkg-card__price small { margin-left: 6px; font-family: var(--book); font-style: italic; font-size: 1.1rem; color: var(--mist); }
.pkg-card__label { margin: 20px 0 4px; font-family: var(--book); font-style: italic; color: var(--gold-soft); }
.pkg-card__list li { color: var(--cream); }
.pkg-card__side { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding-left: clamp(0px, 3vw, 40px); border-left: 1px solid var(--line-gold); }
.pkg-card__facts div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.pkg-card__facts dt { color: var(--mist); }
.pkg-card__facts dd { font-weight: 600; color: var(--cream); }
.pkg-card__side .btn { align-self: flex-start; }
.pkg-card__small { font-size: .86rem; color: var(--mist); }
.menu-list .menu-list__pkg { margin-top: 4px; border-bottom: 0; }
.menu-list .menu-list__pkg span { font-family: var(--book); font-style: italic; color: var(--gold); }
.menu-list .menu-list__pkg b { color: var(--gold); }
.pb-pricing { margin: 4px 0 18px; border: 1px solid var(--line); background: var(--paper-2, rgba(0, 0, 0, .02)); }
.pb-pricing summary { padding: 12px 16px; cursor: pointer; font-weight: 600; color: var(--ink); }
.pb-pricing__body { padding: 0 16px 16px; color: var(--slate); font-size: .95rem; }
.pb-pricing__body p + ul, .pb-pricing__body ul + p { margin-top: 10px; }
@media (max-width: 800px) { .pkg-card { grid-template-columns: 1fr; } .pkg-card__side { padding-left: 0; border-left: 0; padding-top: 20px; border-top: 1px solid var(--line-gold); } }
/* ---------- Website 21: SEO & Google wording ---------- */
.plan > .plan__tag .plan__seo { display: block; margin-top: 6px; color: var(--gold-soft); }
.plan__alt-seo { margin: 2px 0 6px; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-soft); }
.care-one__seo { margin-top: 10px; font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-soft); }
.care-one__label--2 { margin-top: 24px; }