/* OFERO Philippines only. Shared baseline styles and campaign sources are unchanged. */
html:has(> body.ofph-visual) { scroll-behavior: auto; }
body.ofph-visual {
  --v-ink: #111719;
  --v-muted: #5e6b7e;
  --v-green: #356b29;
  --v-green-hover: #28551f;
  --v-line: #e1e6e7;
  --v-rail: #f7f9fa;
  --v-soft: #eff7eb;
  --ink: var(--v-ink);
  --muted: var(--v-muted);
  --green: var(--v-green);
  --green-dark: var(--v-green);
  --paper: #fff;
  --line: var(--v-line);
  --deep: var(--v-ink);
  --deep-2: var(--v-green);
  --coral: var(--v-green);
  --sand: var(--v-soft);
  --sand-2: #fff;
  --shadow: none;
  margin: 0;
  padding: 0;
  background: #fff;
  color: var(--v-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  overflow-wrap: break-word;
}
body.ofph-visual *,
body.ofph-visual *::before,
body.ofph-visual *::after { box-sizing: border-box; }
body.ofph-visual [hidden] { display: none !important; }
body.ofph-visual img { max-width: 100%; }
body.ofph-visual a { text-underline-offset: .2em; }
body.ofph-visual :where(a, button, input, textarea, summary):focus-visible {
  outline: 3px solid #176b29;
  outline-offset: 4px;
}
body.ofph-visual :where(button, input, textarea, select) { font: inherit; }
body.ofph-visual :where(h1, h2, h3, p, li, a, strong, span) { overflow-wrap: break-word; }
body.ofph-visual :where(h1, h2, h3) { color: var(--v-ink); }
body.ofph-visual .keep { white-space: normal; }
body.ofph-visual .email-text { white-space: normal; overflow-wrap: anywhere; }
body.ofph-visual .v-skip-link { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.ofph-visual .v-skip-link:focus { position: fixed; z-index: 20; top: 12px; left: 12px; width: auto; height: auto; margin: 0; padding: 12px 18px; overflow: visible; clip-path: none; white-space: normal; background: #fff; color: var(--v-green); }
body.ofph-visual .skip-link:focus { background: #fff; color: var(--v-green); }

/* One compact, wrapping header; the original vertical Logo is never stretched. */
body.ofph-visual .v-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 88px;
  padding: 8px clamp(20px, 3.2vw, 48px);
  border-bottom: 1px solid var(--v-line);
  background: #fff;
  box-shadow: none;
}
body.ofph-visual .v-brand {
  display: flex;
  align-items: center;
  flex: 0 1 230px;
  min-width: 0;
  gap: 12px;
  color: var(--v-ink);
  text-decoration: none;
  line-height: 1.3;
}
body.ofph-visual .v-brand img {
  display: block;
  flex: 0 0 auto;
  width: 67px;
  height: 68px;
  max-width: none;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: #fff;
}
body.ofph-visual .v-brand > span { min-width: 0; font-size: 14px; font-weight: 700; letter-spacing: 0; overflow-wrap: anywhere; }
body.ofph-visual .v-brand .brand-logo { display: block; flex: 0 0 auto; width: auto; height: auto; margin: 0; padding: 0; overflow: visible; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
body.ofph-visual .v-brand small { display: block; font-size: 12px; color: var(--v-muted); }
body.ofph-visual .v-nav { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 4px 20px; align-items: center; min-width: 0; }
body.ofph-visual .v-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 650;
  color: #455266;
  text-decoration: none;
}
body.ofph-visual .v-nav a:hover,
body.ofph-visual .v-nav a[aria-current="page"] { color: var(--v-green); text-decoration: underline; }
body.ofph-visual .v-nav .official-link { flex-wrap: wrap; max-width: 100%; gap: 8px; white-space: normal; }
body.ofph-visual .v-header-cta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 19px;
  border: 1px solid var(--v-green);
  border-radius: 6px;
  background: var(--v-green);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
body.ofph-visual .v-header-cta:hover { background: var(--v-green-hover); }

/* The supplied composition becomes a real rail / article / image layout. */
body.ofph-visual .v-main { width: 100%; max-width: none; margin: 0; padding: 0; }
body.ofph-visual .v-shell {
  display: grid;
  grid-template-columns: 258px minmax(0, 643px) minmax(0, 1fr);
  align-items: start;
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
}
body.ofph-visual .v-shell > * { min-width: 0; }
body.ofph-visual .v-contents {
  position: sticky;
  top: 20px;
  align-self: start;
  min-width: 0;
  padding: 38px 24px 38px 32px;
  background: var(--v-rail);
  border-right: 1px solid var(--v-line);
  color: var(--v-muted);
}
body.ofph-visual .v-contents > :first-child { margin-top: 0; }
body.ofph-visual .v-contents nav { display: grid; gap: 4px; }
body.ofph-visual .v-contents a { display: block; min-height: 44px; padding: 9px 0; font-size: 14px; font-weight: 400; line-height: 1.45; color: #596b7f; text-decoration: none; }
body.ofph-visual .v-contents a:hover,
body.ofph-visual .v-contents a:focus-visible { color: var(--v-green); text-decoration: underline; }
body.ofph-visual .v-mobile-toc { display: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body.ofph-visual .v-mobile-toc summary { display: list-item; min-height: 44px; margin: 0; padding: 10px 0; color: #455266; font-size: 15px; font-weight: 700; line-height: 1.6; cursor: pointer; }
body.ofph-visual .v-mobile-toc summary::before,
body.ofph-visual .v-mobile-toc summary::after { content: none; }
body.ofph-visual .v-desktop-toc > p { margin: 0 0 14px; color: #455266; font-size: 17px; font-weight: 700; }
body.ofph-visual .v-reading { min-width: 0; padding: 30px 32px 48px 50px; background: #fff; }
body.ofph-visual .v-reading :where(section, h2, h3) { scroll-margin-top: 24px; }
body.ofph-visual .v-reading .breadcrumbs { width: auto; max-width: none; margin: 0 0 22px; padding: 0; color: var(--v-muted); font-size: 13px; }
body.ofph-visual .v-reading .breadcrumbs ol { flex-wrap: wrap; padding: 0; gap: 7px; }
body.ofph-visual .v-reading .breadcrumbs a { color: var(--v-green); }
body.ofph-visual .v-reading :where(.article, .container, .shell, .article-body) { width: 100%; max-width: none; min-width: 0; margin: 0; padding: 0; }
body.ofph-visual .v-reading :where(.hero, .category-hero, .contact-hero, .page-hero, .commercial-hero, .support-hero) {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  max-width: none;
  margin: 0 0 30px;
  padding: 0 0 28px;
  border: 0;
  border-bottom: 1px solid var(--v-line);
  border-radius: 0;
  background: #fff;
  color: var(--v-ink);
  box-shadow: none;
  overflow: visible;
}
body.ofph-visual .v-reading .hero::after,
body.ofph-visual .v-reading .hero::before { content: none; }
body.ofph-visual .v-reading :where(.hero-grid, .hero-inner, .hero-copy, .contact-hero-copy) { display: block; width: 100%; min-width: 0; margin: 0; padding: 0; }
body.ofph-visual .v-reading h1 { max-width: none; margin: 0 0 20px; color: var(--v-ink); font-size: clamp(32px, 3.8vw, 56px); font-weight: 780; line-height: 1.08; letter-spacing: -.035em; }
body.ofph-visual .v-reading h2 { max-width: none; margin: 0 0 14px; font-size: clamp(25px, 2.1vw, 31px); font-weight: 720; line-height: 1.2; letter-spacing: -.02em; }
body.ofph-visual .v-reading h3 { margin: 0 0 8px; font-size: 21px; line-height: 1.3; letter-spacing: -.01em; }
body.ofph-visual .v-reading p { margin: 0 0 18px; color: var(--v-muted); font-size: 17px; line-height: 1.6; }
body.ofph-visual .v-reading :where(.hero > p, .hero-copy > p, .contact-hero-copy > p, .hero-lead, .hero-intro) { max-width: none; color: var(--v-muted); font-size: 18px; line-height: 1.55; }
body.ofph-visual .v-reading .hero-lead strong { color: var(--v-ink); }
body.ofph-visual .v-reading .eyebrow,
body.ofph-visual .v-reading .coral { margin: 0 0 14px; color: var(--v-green); font-size: 12px; font-weight: 750; line-height: 1.5; letter-spacing: .095em; text-transform: uppercase; }
body.ofph-visual .v-reading :where(.hero-caption, .source-notes p, figcaption) { color: var(--v-muted); font-size: 13px; line-height: 1.5; }
body.ofph-visual .v-reading :where(.section, .article-body > section) {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 28px 0;
  border: 0;
  border-bottom: 1px solid var(--v-line);
  border-radius: 0;
  background: transparent;
  color: var(--v-ink);
  box-shadow: none;
}
body.ofph-visual .v-reading .section-head { display: block; margin: 0 0 18px; }
body.ofph-visual .v-reading :where(.section-head p, .split-band p, .support-contact-panel p) { color: var(--v-muted); }
body.ofph-visual .v-reading .support-hero-media-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
body.ofph-visual .v-reading :where(ul, ol) { max-width: 100%; padding-left: 24px; }
body.ofph-visual .v-reading li { margin-bottom: 9px; }
body.ofph-visual .v-reading :where(p, li) a { color: var(--v-green); text-decoration: underline; }

/* Preserve every existing guide/model entry as a readable row. */
body.ofph-visual .v-reading :where(.seo-hub-grid, .support-guide-grid, .support-step-grid, .support-model-strip, .stat-grid, .quick-links, .support-contact-actions) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  width: 100%;
  gap: 0;
  margin: 0;
  overflow: visible;
}
body.ofph-visual .v-reading :where(.seo-hub-grid > article, .support-step-grid > article, .support-model-card, .support-guide-card, .support-visual-card, .stat-grid > div) {
  display: block;
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 22px 0;
  border: 0;
  border-bottom: 1px solid var(--v-line);
  border-radius: 0;
  background: transparent;
  color: var(--v-ink);
  box-shadow: none;
  transform: none;
  overflow: visible;
}
body.ofph-visual .v-reading :where(.support-model-card, .support-guide-card, .support-visual-card) { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 6px 18px; }
body.ofph-visual .v-reading :where(.support-model-card, .support-guide-card, .support-visual-card) img { grid-column: 1; grid-row: 1 / span 4; width: 132px; height: 132px; aspect-ratio: 1; object-fit: contain; object-position: center; border: 0; border-radius: 0; background: #fff; }
body.ofph-visual .v-reading :where(.support-model-card, .support-guide-card, .support-visual-card) :where(span, strong, small, em) { grid-column: 2; min-width: 0; margin: 0; line-height: 1.45; }
body.ofph-visual .v-reading :where(.support-model-card, .support-guide-card, .support-visual-card) strong { color: var(--v-ink); font-size: 20px; }
body.ofph-visual .v-reading :where(.support-model-card, .support-guide-card, .support-visual-card) small { color: var(--v-muted); font-size: 14px; font-weight: 400; }
body.ofph-visual .v-reading :where(.support-model-card, .support-guide-card, .support-visual-card) :where(span, em) { color: var(--v-green); }
body.ofph-visual .v-reading :where(.stat-grid strong, .stat-grid span) { color: var(--v-ink); }
body.ofph-visual .v-reading .stat-grid strong { font-size: 24px; }
body.ofph-visual .v-reading .stat-grid span { color: var(--v-muted); }
body.ofph-visual .v-reading .quick-links a { min-height: 44px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--v-line); border-radius: 0; background: transparent; color: var(--v-green); }
body.ofph-visual .v-reading :where(.support-step-grid a, .hero-actions a, .button) { min-height: 44px; }
body.ofph-visual .v-reading .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
body.ofph-visual :where(.v-reading, .v-contact-band) .button { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 44px; padding: 11px 17px; border: 1px solid #b9c8b5; border-radius: 5px; background: #fff; color: var(--v-green); font-size: 15px; font-weight: 650; line-height: 1.4; text-align: center; text-decoration: none; }
body.ofph-visual :where(.v-reading, .v-contact-band) :where(.button.primary, .button.dark, .support-step-grid a) { border-color: var(--v-green); background: var(--v-green); color: #fff; }
body.ofph-visual :where(.v-reading, .v-contact-band) .button:hover { border-color: var(--v-green-hover); }

/* Relevant original photography/illustrations, never synthetic crops of the mock. */
body.ofph-visual .v-media-mobile { display: none; }
body.ofph-visual :is(.v-media, .v-media-mobile) { position: sticky; top: 20px; min-width: 0; margin: 0; padding: 0; background: #fff; }
body.ofph-visual :is(.v-media, .v-media-mobile) :where(.support-hero-media, .support-hero-media-stack, .hero-visual) { display: grid; grid-template-columns: 1fr; gap: 22px; width: 100%; min-width: 0; margin: 0; padding: 24px; }
body.ofph-visual :is(.v-media, .v-media-mobile) :where(figure, .product-stage) { margin: 0; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
body.ofph-visual :is(.v-media, .v-media-mobile) :where(img, .feature-photo, .poster-preview, .hero-visual img, .product-stage img) { position: static; display: block; width: 100%; max-width: 100%; height: auto; max-height: 780px; aspect-ratio: auto; object-fit: contain; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
body.ofph-visual :is(.v-media, .v-media-mobile) figcaption { max-width: none; margin: 0; padding: 14px 24px; color: var(--v-muted); font-size: 12px; line-height: 1.5; }
body.ofph-visual :is(.v-media, .v-media-mobile) .v-showroom { width: 100%; margin: 0; padding: 0; }
body.ofph-visual :is(.v-media, .v-media-mobile) .v-showroom img { width: 100%; height: min(900px, calc(100svh - 100px)); min-height: 480px; max-height: none; object-fit: cover; object-position: 45% 50%; }
body.ofph-visual :is(.v-media, .v-media-mobile) .product-stage { padding: 24px; }
body.ofph-visual :is(.v-media, .v-media-mobile) .stage-label { position: static; display: block; margin-bottom: 14px; color: var(--v-muted); }
body.ofph-visual :is(.v-media, .v-media-mobile) .stage-bottom { flex-wrap: wrap; border-color: var(--v-line); color: var(--v-ink); }
body.ofph-visual.page-system .v-contents,
body.ofph-visual.page-system .v-media:empty { display: none; }
body.ofph-visual.page-system .v-shell { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
body.ofph-visual .v-reading .v-original-visual { margin: 20px 0; padding: 0; border: 0; border-block: 1px solid var(--v-line); border-radius: 0; background: transparent; box-shadow: none; }
body.ofph-visual .v-reading .v-original-visual summary { display: list-item; min-height: 44px; margin: 0; padding: 10px 0; color: var(--v-green); font-size: 14px; line-height: 1.6; cursor: pointer; }
body.ofph-visual .v-reading .v-original-visual summary::before,
body.ofph-visual .v-reading .v-original-visual summary::after { content: none; }
body.ofph-visual .v-reading .v-original-visual :where(.support-hero-media, .support-hero-media-stack, figure) { display: block; width: 100%; min-width: 0; margin: 12px 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body.ofph-visual .v-reading .v-original-visual img { position: static; display: block; width: 100%; max-width: 260px; height: auto; max-height: none; aspect-ratio: auto; object-fit: contain; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
body.ofph-visual .v-reading .v-original-visual figcaption { margin: 12px 0; padding: 0; color: var(--v-muted); font-size: 13px; line-height: 1.5; }

/* Contact routes stay visible and use the same quiet, in-flow visual language. */
body.ofph-visual :where(.contact-direct-card, .support-contact-panel) { background: #fff; color: var(--v-ink); border: 0; border-radius: 0; box-shadow: none; }
body.ofph-visual .contact-direct-card { padding: 0; gap: 0; }
body.ofph-visual :where(.contact-direct-card .eyebrow, .support-contact-panel .eyebrow) { color: var(--v-green); }
body.ofph-visual :where(.contact-line, .support-contact-actions a) { display: grid; gap: 4px; min-width: 0; min-height: 44px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--v-line); border-radius: 0; background: transparent; color: var(--v-ink); box-shadow: none; }
body.ofph-visual :where(.contact-line, .support-contact-actions a) :where(strong, span, small) { color: inherit; overflow-wrap: anywhere; }
body.ofph-visual :where(.contact-line, .support-contact-actions a) small { color: var(--v-muted); }
body.ofph-visual .support-contact-actions > div { display: grid; gap: 4px; min-width: 0; min-height: 44px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--v-line); border-radius: 0; background: transparent; color: var(--v-ink); box-shadow: none; }
body.ofph-visual .support-contact-actions > div :where(strong, span, small) { color: inherit; overflow-wrap: anywhere; }
body.ofph-visual .contact-direct-card .contact-line.primary { padding: 14px 16px; background: var(--v-green); color: #fff; }
body.ofph-visual .contact-direct-card .contact-line.primary :where(strong, span, small) { color: #fff; }
body.ofph-visual .v-contact-band {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  width: calc(100% - 64px);
  max-width: 1550px;
  margin: 28px auto;
  padding: 28px 32px;
  border: 0;
  border-radius: 12px;
  background: var(--v-soft);
  color: var(--v-ink);
  box-shadow: none;
}
body.ofph-visual .v-contact-band .site-contact-band { width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; box-shadow: none; }
body.ofph-visual .v-contact-band h2 { margin: 0 0 12px; color: var(--v-ink); font-size: 27px; line-height: 1.25; letter-spacing: -.02em; }
body.ofph-visual .v-contact-band p { margin: 0; color: var(--v-muted); font-size: 16px; line-height: 1.55; }
body.ofph-visual .v-contact-band .eyebrow { margin-bottom: 10px; color: var(--v-green); }
body.ofph-visual .site-contact-band-actions { display: flex; flex-wrap: wrap; min-width: 0; gap: 10px; }
body.ofph-visual .v-contact-band .contact-action { display: flex; flex: 1 1 138px; flex-direction: column; justify-content: center; min-width: 0; min-height: 54px; padding: 10px 13px; border: 1px solid #c4d8bd; border-radius: 5px; background: #fff; color: var(--v-ink); text-align: left; }
body.ofph-visual .v-contact-band .contact-action.primary { border-color: var(--v-green); background: var(--v-green); color: #fff; }
body.ofph-visual .v-contact-band .contact-action :where(span, strong) { color: inherit; }
body.ofph-visual .daily-update { width: auto; max-width: 1180px; margin: 18px auto; padding: 0 24px; border: 0; background: #fff; color: var(--v-muted); }
body.ofph-visual .site-contact-dock { position: static; inset: auto; transform: none; width: auto; max-width: 1180px; min-width: 0; margin: 22px auto; padding: 14px 24px; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; border: 0; border-top: 1px solid var(--v-line); border-radius: 0; background: #fff; box-shadow: none; }
body.ofph-visual .site-contact-dock a { display: inline-flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 44px; padding: 10px 14px; border: 1px solid #c4d8bd; border-radius: 5px; background: #fff; color: var(--v-green); }
body.ofph-visual .site-contact-dock .dock-label { align-self: center; color: var(--v-muted); }
body.ofph-visual .ofero-contact-widget { position: static !important; inset: auto !important; transform: none !important; width: min(100% - 48px, 680px) !important; max-width: none; min-width: 0; margin: 24px auto !important; padding: 0; z-index: auto; color: var(--v-ink); font-family: inherit; }
body.ofph-visual .ofero-contact-launcher-row { justify-content: flex-start; flex-wrap: wrap; }
body.ofph-visual .ofero-contact-panel { position: static; width: 100%; max-width: none; max-height: none; margin: 0 0 14px; padding: 20px; border: 1px solid var(--v-line); border-radius: 8px; box-shadow: none; }
body.ofph-visual .ofero-contact-launcher { min-height: 48px; border-radius: 5px; border-color: var(--v-green); background: var(--v-green); box-shadow: none; }
body.ofph-visual .ofero-contact-launcher:hover { background: var(--v-green-hover); }
body.ofph-visual .ofero-contact-dismiss { box-shadow: none; }
body.ofph-visual .ofero-contact-spacer { height: 0 !important; }
body.ofph-visual .ofero-contact-widget .ofero-contact-messenger { border-color: var(--v-green); background: var(--v-green); }
body.ofph-visual .ofero-contact-widget .ofero-contact-messenger:hover { background: var(--v-green-hover); }
body.ofph-visual .ofero-contact-restore { max-width: calc(100% - 32px); color: var(--v-green); }

/* The quote page keeps its worksheet, figures and sources without its old skin. */
body.ofph-visual .preview-bar { padding: 8px 20px; background: var(--v-soft); color: var(--v-green); }
body.ofph-visual .v-reading :where(.method-strip, .quote-equation, .article-aside, .final-cta, .notice) { position: static; width: 100%; max-width: none; min-width: 0; margin: 20px 0; padding: 20px 0; border: 0; border-block: 1px solid var(--v-line); border-radius: 0; background: #fff; color: var(--v-ink); box-shadow: none; }
body.ofph-visual .v-reading .method-strip { margin: 0 0 24px; padding: 0 0 20px; border-top: 0; }
body.ofph-visual .v-reading .quote-equation { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; border: 0; }
body.ofph-visual .v-reading :where(.quote-equation > b, .article-body .eyebrow) { color: var(--v-green); }
body.ofph-visual .v-reading .article-layout { display: block; }
body.ofph-visual .v-reading .article-aside { margin-top: 32px; }
body.ofph-visual .v-reading .article-aside :where(p, li, .aside-note) { color: var(--v-muted); }
body.ofph-visual .v-reading .article-aside nav a { border-color: var(--v-line); color: var(--v-green); }
body.ofph-visual .v-reading .table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
body.ofph-visual .v-reading table { max-width: 100%; border-collapse: collapse; font-size: 15px; }
body.ofph-visual .v-reading .quote-table { min-width: 510px; }
body.ofph-visual .v-reading :where(th, td) { padding: 13px 12px; border-color: var(--v-line); color: var(--v-ink); vertical-align: top; white-space: normal; }
body.ofph-visual .v-reading .quote-table thead { background: var(--v-soft); color: var(--v-ink); }
body.ofph-visual .v-reading .quote-table tbody tr:nth-child(even) { background: #f8faf7; }
body.ofph-visual .v-reading .comparison-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
body.ofph-visual .v-reading .comparison-fields fieldset { min-width: 0; padding: 16px 12px; border: 1px solid #bdcdb6; border-radius: 5px; }
body.ofph-visual .v-reading :where(input, textarea, select) { min-width: 0; max-width: 100%; min-height: 44px; border-color: #aebca8; background: #fff; color: var(--v-ink); }
body.ofph-visual .v-reading .final-cta .shell { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
body.ofph-visual .v-reading .final-cta img { width: 70px; height: auto; padding: 0; border-radius: 0; }
body.ofph-visual .v-reading .final-cta .shell > div { flex: 1 1 240px; }

/* Retain the original footer content with a light finish. */
body.ofph-visual .site-footer { display: flex; flex-wrap: wrap; gap: 28px 48px; margin: 0; padding: 38px clamp(20px, 4vw, 60px); border-top: 1px solid var(--v-line); background: #f8faf7; color: var(--v-ink); }
body.ofph-visual .site-footer > div { flex: 1 1 240px; min-width: 0; }
body.ofph-visual .site-footer :where(.shell, .footer-grid) { width: 100%; max-width: none; margin: 0; padding: 0; }
body.ofph-visual .site-footer :where(h2, h3, .footer-title, .footer-brand, .brand-word) { color: var(--v-ink); }
body.ofph-visual .site-footer :where(p, small, .footer-contact, .brand-word small, .footer-bottom) { color: var(--v-muted); font-size: 14px; line-height: 1.6; }
body.ofph-visual .site-footer :where(a, .footer-links a) { color: var(--v-green); }
body.ofph-visual .site-footer .footer-contact strong { color: var(--v-ink); }
/* The inherited quote stylesheet marks its footer headings !important. */
body.ofph-visual .site-footer p.footer-brand,
body.ofph-visual .site-footer p.footer-title { color: var(--v-ink) !important; }
body.ofph-visual .site-footer .footer-links { display: flex; flex-wrap: wrap; align-content: start; gap: 8px 20px; }
body.ofph-visual .site-footer a { min-height: 44px; display: inline-flex; align-items: center; }
body.ofph-visual .site-footer > div:not(.footer-links):not(.shell) > a:not(.footer-brand),
body.ofph-visual .site-footer .footer-grid > div > a { display: flex; width: fit-content; max-width: 100%; }
body.ofph-visual .site-footer :where(.footer-brand img, .footer-logo img, .brand img) { width: 64px; height: 66px; object-fit: contain; border-radius: 0; }
body.ofph-visual .site-footer .footer-logo { width: 64px; height: 66px; border-radius: 0; overflow: visible; }

/* Existing campaign remains usable; no card, launcher or root floats over text. */
body.ofph-visual #ofero-celebration-20261001 { position: static !important; inset: auto !important; transform: none !important; width: min(100% - 48px, 680px); max-width: none; min-width: 0; margin: 24px auto; padding: 0; }
body.ofph-visual #ofero-celebration-20261001 .ofc-202610-card,
body.ofph-visual #ofero-celebration-20261001 .ofc-202610-launcher { position: static !important; inset: auto !important; transform: none !important; width: 100%; max-width: 100%; min-width: 0; max-height: none; margin: 12px 0; border-radius: 7px; box-shadow: none; z-index: auto; }
body.ofph-visual #ofero-celebration-20261001 .ofc-202610-card { overflow: visible; padding: 20px; }
body.ofph-visual #ofero-celebration-20261001 :where(.ofc-202610-contact, .ofc-202610-browse, .ofc-202610-launcher, .ofc-202610-close) { min-height: 44px; }
body.ofph-visual #ofero-celebration-20261001 .ofc-202610-photo { height: auto; aspect-ratio: auto; overflow: visible; border-radius: 0; background: #fff; }
body.ofph-visual #ofero-celebration-20261001 .ofc-202610-scooter { position: static; width: 100%; height: auto; max-width: 100%; object-fit: contain; }
body.ofph-visual #ofero-celebration-20261001 :where(.ofc-202610-dates, .ofc-202610-saving, .ofc-202610-price) { white-space: normal; }

@media (max-width: 1100px) {
  body.ofph-visual .v-header { flex-wrap: wrap; gap: 8px 24px; }
  body.ofph-visual .v-brand { flex: 1 1 250px; }
  body.ofph-visual .v-nav { order: 3; flex-basis: 100%; border-top: 1px solid var(--v-line); }
  body.ofph-visual .v-shell { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  body.ofph-visual .v-contents { position: static; grid-column: 1 / -1; padding: 8px 32px; border-right: 0; border-bottom: 1px solid var(--v-line); }
  body.ofph-visual .v-desktop-toc { display: none; }
  body.ofph-visual .v-mobile-toc { display: block; }
  body.ofph-visual .v-contents nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
  body.ofph-visual .v-contents a { max-width: 100%; }
  body.ofph-visual .v-reading { padding: 28px; }
  body.ofph-visual :is(.v-media, .v-media-mobile) .v-showroom img { min-height: 420px; height: 720px; }
  body.ofph-visual .v-contact-band { width: calc(100% - 40px); padding: 24px; }
}
@media (max-width: 900px) {
  body.ofph-visual .v-shell { display: grid; grid-template-columns: minmax(0, 1fr); }
  body.ofph-visual .v-contents { grid-column: auto; }
  body.ofph-visual .v-reading { padding: 28px 24px; }
  body.ofph-visual .v-reading h1 { font-size: clamp(32px, 6vw, 48px); }
  body.ofph-visual .v-media { display: none; }
  body.ofph-visual .v-media-mobile { display: block; position: static; width: 100%; margin: 0 0 28px; }
  body.ofph-visual :is(.v-media, .v-media-mobile) .v-showroom img { min-height: 0; height: auto; max-height: 560px; aspect-ratio: 3 / 2; object-position: 45% 50%; }
  body.ofph-visual :is(.v-media, .v-media-mobile) :where(.feature-photo, .poster-preview, .product-stage img) { max-height: 540px; }
  body.ofph-visual .v-contact-band { grid-template-columns: minmax(0, 1fr); }
  body.ofph-visual .site-footer .footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 540px) {
  body.ofph-visual { font-size: 16px; }
  body.ofph-visual .v-header { gap: 8px 14px; padding: 10px 18px; }
  body.ofph-visual .v-brand { flex: 1 1 180px; gap: 10px; }
  body.ofph-visual .v-brand img { width: 59px; height: 60px; }
  body.ofph-visual .v-brand > span { font-size: 13px; }
  body.ofph-visual .v-header-cta { flex: 1 1 auto; font-size: 14px; min-height: 44px; padding: 10px 14px; }
  body.ofph-visual.page-quote .v-brand { flex-basis: 220px; }
  body.ofph-visual .v-nav { gap: 0 18px; }
  body.ofph-visual .v-nav a { font-size: 13px; }
  body.ofph-visual .v-contents { padding: 8px 20px; }
  body.ofph-visual .v-contents nav { gap: 0 18px; }
  body.ofph-visual .v-contents a { font-size: 13px; }
  body.ofph-visual .v-reading { padding: 24px 20px; }
  body.ofph-visual .v-reading p { font-size: 16px; }
  body.ofph-visual .v-reading h1 { font-size: clamp(32px, 8.4vw, 42px); }
  body.ofph-visual .v-reading h2 { font-size: 26px; }
  body.ofph-visual .v-reading h3 { font-size: 20px; }
  body.ofph-visual .v-reading :where(.section, .article-body > section) { padding: 24px 0; }
  body.ofph-visual .v-reading :where(.support-model-card, .support-guide-card, .support-visual-card) { grid-template-columns: 94px minmax(0, 1fr); gap: 5px 14px; }
  body.ofph-visual .v-reading :where(.support-model-card, .support-guide-card, .support-visual-card) img { width: 94px; height: 108px; }
  body.ofph-visual .v-reading :where(.support-model-card, .support-guide-card, .support-visual-card) strong { font-size: 18px; }
  body.ofph-visual .v-reading .comparison-fields { grid-template-columns: minmax(0, 1fr); }
  body.ofph-visual :is(.v-media, .v-media-mobile) :where(.support-hero-media, .support-hero-media-stack, .hero-visual) { padding: 20px; }
  body.ofph-visual :is(.v-media, .v-media-mobile) figcaption { padding: 12px 20px; }
  body.ofph-visual .v-contact-band { width: calc(100% - 32px); margin: 20px auto; padding: 22px 18px; gap: 20px; }
  body.ofph-visual .v-contact-band h2 { font-size: 25px; }
  body.ofph-visual .v-contact-band .contact-action { flex-basis: 116px; font-size: 14px; }
  body.ofph-visual .site-contact-dock { padding: 14px 20px; }
  body.ofph-visual .ofero-contact-widget { width: calc(100% - 40px) !important; }
  body.ofph-visual .ofero-contact-panel { padding: 16px; }
  body.ofph-visual .site-footer { padding: 28px 20px; gap: 22px; }
  body.ofph-visual #ofero-celebration-20261001 { width: calc(100% - 40px); }
  body.ofph-visual #ofero-celebration-20261001 .ofc-202610-card { padding: 16px; }
  body.ofph-visual #ofero-celebration-20261001 .ofc-202610-discount { grid-template-columns: minmax(0, 1fr); }
  body.ofph-visual #ofero-celebration-20261001 :where(.ofc-202610-price, .ofc-202610-regular, .ofc-202610-saving) { grid-column: 1; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  body.ofph-visual *, body.ofph-visual *::before, body.ofph-visual *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}
@media print {
  body.ofph-visual .v-shell { display: block; }
  body.ofph-visual .v-reading { padding: 0; }
  body.ofph-visual .v-reading :where(.table-wrap, .quote-table) { overflow: visible; min-width: 0; }
  body.ofph-visual :where(.v-header, .v-contents, .v-header-cta, .v-media, .site-contact-dock, .ofero-contact-widget, .ofero-contact-restore) { display: none !important; }
}