/* ==========================================================================
   ONE HILL MEDIA design-system component layer.

   Transcribed 1:1 from the React components in the Claude Design project
   (_ds/one-media-design-system-035cf34c…/_ds_bundle.js). Each block below
   corresponds to one component source file; the values are the component's
   own inline styles, so the rendered result matches the design project.

   Hover/focus/selected states that the React components held in useState are
   expressed here as :hover / :focus-within / .is-* classes.
   ========================================================================== */


/* --- components/core/Badge.jsx ------------------------------------------- */
.om-badge{
  display:inline-block;
  font-family:var(--font-sans);
  font-size:10px;
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  padding:7px 12px;
  border-radius:var(--radius-xs);
  background:var(--accent);
  color:var(--text-on-accent);
  border:1px solid transparent;
}
.om-badge--outline{background:transparent;color:var(--accent);border:1px solid var(--border-accent)}
.om-badge--neutral{background:var(--alpha-white-08);color:var(--text-body);border:1px solid var(--border-hairline)}


/* --- components/core/Card.jsx -------------------------------------------- */
.om-card{
  background:var(--surface-card);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-xs);
  padding:var(--space-8);
  box-shadow:var(--shadow-card);
  transition:transform var(--dur-fast) var(--ease-silk),
             box-shadow var(--dur-fast) var(--ease-silk),
             border-color var(--dur-fast) var(--ease-silk);
}
.om-card--featured{border-color:var(--border-accent);box-shadow:var(--glow-accent)}
.om-card--interactive{cursor:pointer}
.om-card--interactive:hover{box-shadow:var(--shadow-hover);transform:var(--hover-lift)}
.om-card--featured.om-card--interactive:hover{box-shadow:var(--glow-accent);transform:none}


/* --- components/core/Divider.jsx ----------------------------------------- */
.om-divider{border:0;height:1px;width:100%;background:var(--divider);margin:0}
.om-divider--accent{height:3px;width:88px;background:var(--accent)}


/* --- components/core/Button.jsx ------------------------------------------ */
.om-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-3);
  font-family:var(--font-sans);
  font-weight:var(--fw-semibold);
  text-transform:uppercase;
  letter-spacing:var(--ls-button);
  border-radius:var(--radius-xs);
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  /* SIZES.md — the component default */
  font-size:12px;
  padding:16px 26px;
  transition:background var(--dur-micro) var(--ease-silk),
             color var(--dur-micro) var(--ease-silk),
             border-color var(--dur-micro) var(--ease-silk),
             transform var(--dur-micro) var(--ease-silk),
             box-shadow var(--dur-fast) var(--ease-silk);
}
.om-btn--sm{font-size:11px;padding:10px 18px}
.om-btn--lg{font-size:13px;padding:20px 34px}

.om-btn--primary{background:var(--accent);color:var(--text-on-accent)}
.om-btn--primary:hover:not(:disabled){background:var(--accent-hover);box-shadow:var(--glow-accent);transform:var(--hover-lift)}
.om-btn--secondary{background:transparent;color:var(--text-heading);border-color:var(--border-subtle)}
.om-btn--secondary:hover:not(:disabled){background:var(--alpha-white-08);border-color:var(--alpha-white-28)}
.om-btn--outline-accent{background:transparent;color:var(--accent);border-color:var(--border-accent)}
.om-btn--outline-accent:hover:not(:disabled){background:var(--accent-soft);border-color:var(--accent)}
.om-btn--ghost{background:transparent;color:var(--accent);padding:4px 0;letter-spacing:var(--ls-button)}
.om-btn--ghost:hover:not(:disabled){color:var(--accent-hover)}

.om-btn:active:not(:disabled){transform:scale(var(--press-scale));box-shadow:none}
.om-btn--full{width:100%}
.om-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}

/* ghost variant's sliding underline */
.om-btn--ghost::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:currentColor;transition:width var(--dur-fast) var(--ease-silk);
}
.om-btn--ghost:hover::after{width:100%}

.om-btn .om-icon{width:16px;height:16px}


/* --- components/core/IconButton.jsx -------------------------------------- */
.om-iconbtn{
  width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-xs);
  color:var(--text-muted);
  cursor:pointer;
  transition:all var(--dur-micro) var(--ease-silk);
}
.om-iconbtn:hover,.om-iconbtn.is-active{background:var(--accent-soft);color:var(--accent)}
.om-iconbtn.is-active,.om-iconbtn--accent{border-color:var(--border-accent)}
.om-iconbtn--accent{color:var(--accent)}
/* Icon size is round(size * 0.42) in the component */
.om-iconbtn .om-icon{width:17px;height:17px}
.om-iconbtn--34{width:34px;height:34px}
.om-iconbtn--34 .om-icon{width:14px;height:14px}
.om-iconbtn--38{width:38px;height:38px}
.om-iconbtn--38 .om-icon{width:16px;height:16px}
.om-iconbtn--42{width:42px;height:42px}
.om-iconbtn--42 .om-icon{width:18px;height:18px}


/* --- components/core/Logo.jsx -------------------------------------------- */
/* The wordmark is a two-line lockup ("One Hill" over "Media", 1080x434), so a
   given height buys only half the type size a single-line mark would — but the
   header cannot afford more. Alongside ten nav links and the CTA the row needs
   1291px at 48px against the 1280 it has. The nav instance is pinned to 32px by
   .om-nav__logo below; the footer, which has no such competition, overrides
   this inline. Raising either means dropping nav items first. */
.om-logo{height:34px;width:auto;display:block}

/* Never let the mark shrink to buy space for the links: flex would rather
   squeeze the logo (max-width:100% + the intrinsic ratio drops the height with
   it) than overflow, which reads as a mysteriously tiny logo rather than a
   layout that needs fixing. Pinned, so any future overflow is visible. */
.om-nav > a{flex:0 0 auto;display:flex;align-items:center}


/* --- components/core/SectionHeading.jsx ---------------------------------- */
.om-heading{
  font-family:var(--font-display);
  font-weight:var(--fw-regular);
  font-size:var(--text-section);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-display);
  color:var(--text-heading);
  text-align:center;
  margin:0;
  text-wrap:balance;
}
.om-heading__accent{display:block;font-style:italic;color:var(--accent)}


/* --- components/core/SectionLabel.jsx ------------------------------------ */
.om-label{display:flex;align-items:center;gap:var(--space-4);justify-content:center}
.om-label::before,.om-label::after{
  content:"";display:block;width:44px;height:1px;background:var(--alpha-gold-40);flex:0 0 auto;
}
.om-label--start{justify-content:flex-start}
.om-label--no-rules::before,.om-label--no-rules::after{display:none}
.om-label__text{
  font-family:var(--font-sans);
  font-size:var(--text-micro);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--accent);
  white-space:nowrap;
}


/* --- components/core/Tag.jsx --------------------------------------------- */
.om-tag{
  font-family:var(--font-sans);
  font-size:13px;
  font-weight:var(--fw-regular);
  letter-spacing:0;
  padding:11px 18px;
  border-radius:var(--radius-xs);
  cursor:pointer;
  background:transparent;
  color:var(--text-muted);
  border:1px solid var(--border-hairline);
  transition:all var(--dur-micro) var(--ease-silk);
}
.om-tag:hover{background:var(--alpha-white-04)}
.om-tag[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}


/* --- components/forms/Checkbox.jsx --------------------------------------- */
.om-checkbox{display:flex;align-items:flex-start;gap:var(--space-3);cursor:pointer}
.om-checkbox input{position:absolute;opacity:0;width:0;height:0}
.om-checkbox__box{
  width:20px;height:20px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border-subtle);
  background:transparent;
  border-radius:var(--radius-xs);
  transition:all var(--dur-micro) var(--ease-silk);
}
.om-checkbox__box .om-icon{width:13px;height:13px;color:var(--accent);opacity:0}
.om-checkbox input:checked+.om-checkbox__box{border-color:var(--accent);background:var(--accent-soft)}
.om-checkbox input:checked+.om-checkbox__box .om-icon{opacity:1}
.om-checkbox__label{
  font-family:var(--font-sans);font-size:15px;font-weight:var(--fw-light);
  color:var(--text-body);line-height:1.5;
}


/* --- components/forms/Input.jsx ------------------------------------------ */
.om-field{display:block;position:relative;padding-top:18px}
.om-field__label{
  position:absolute;left:0;top:26px;
  font-family:var(--font-sans);
  font-size:16px;letter-spacing:0;text-transform:none;
  color:var(--text-muted);
  pointer-events:none;
  transition:all var(--dur-micro) var(--ease-silk);
}
/* raised = focused, or holding a value */
.om-field:focus-within .om-field__label,
.om-field.is-raised .om-field__label{
  top:0;font-size:11px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent);
}
.om-field__input{
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--border-subtle);
  padding:10px 0;
  font-family:var(--font-sans);
  font-size:16px;
  font-weight:var(--fw-light);
  color:var(--text-heading);
  outline:none;
  transition:border-color var(--dur-micro) var(--ease-silk);
}
.om-field__input:focus{border-bottom-color:var(--accent)}
.om-field.is-error .om-field__label{color:#c76b5a}
.om-field.is-error .om-field__input{border-bottom-color:#c76b5a}
.om-field__error{display:block;margin-top:6px;font-size:12px;color:#c76b5a}


/* --- components/forms/Select.jsx ----------------------------------------- */
.om-select{display:block;position:relative;padding-top:18px}
.om-select__label{
  position:absolute;left:0;top:0;
  font-family:var(--font-sans);font-size:11px;
  letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--text-muted);pointer-events:none;
  transition:color var(--dur-micro) var(--ease-silk);
}
.om-select:focus-within .om-select__label{color:var(--accent)}
.om-select__input{
  width:100%;
  appearance:none;-webkit-appearance:none;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--border-subtle);
  padding:10px 28px 10px 0;
  font-family:var(--font-sans);
  font-size:16px;
  font-weight:var(--fw-light);
  color:var(--text-heading);
  outline:none;
  cursor:pointer;
}
.om-select__input:focus{border-bottom-color:var(--accent)}
.om-select__input option{background:var(--navy-700)}
.om-select__chevron{
  position:absolute;right:0;bottom:14px;pointer-events:none;
  width:16px;height:16px;color:var(--text-muted);
}


/* --- components/forms/Textarea.jsx --------------------------------------- */
.om-textarea{display:block}
.om-textarea__label{
  display:block;font-family:var(--font-sans);font-size:16px;font-weight:var(--fw-light);
  color:var(--text-muted);margin-bottom:var(--space-3);
  transition:color var(--dur-micro) var(--ease-silk);
}
.om-textarea:focus-within .om-textarea__label{color:var(--accent)}
.om-textarea__input{
  width:100%;resize:vertical;
  background:transparent;border:0;
  border-bottom:1px solid var(--border-subtle);
  padding:8px 0;
  font-family:var(--font-sans);font-size:15px;font-weight:var(--fw-light);
  line-height:var(--lh-body);color:var(--text-heading);outline:none;
}
.om-textarea__input:focus{border-bottom-color:var(--accent)}


/* --- components/forms/TagGroup.jsx --------------------------------------- */
.om-taggroup__label{
  font-family:var(--font-sans);font-size:11px;
  letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--text-muted);margin-bottom:var(--space-4);
}
.om-taggroup__list{display:flex;flex-wrap:wrap;gap:var(--space-2)}


/* --- components/forms/ProgressBar.jsx ------------------------------------ */
.om-progress__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--space-3)}
.om-progress__label{
  font-family:var(--font-sans);font-size:11px;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--text-muted);
}
.om-progress__value{font-family:var(--font-sans);font-size:13px;color:var(--accent)}
.om-progress__rail{height:3px;background:var(--alpha-white-08);border-radius:var(--radius-pill);overflow:hidden}
.om-progress__fill{height:100%;width:0;background:var(--accent);transition:width var(--dur-normal) var(--ease-air)}


/* --- components/marketing/Accordion.jsx ---------------------------------- */
.om-accordion{border-top:1px solid var(--divider)}
.om-accordion__item{border-bottom:1px solid var(--divider)}
.om-accordion__trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-6);padding:var(--space-6) 0;
  background:none;border:0;cursor:pointer;text-align:left;
}
.om-accordion__q{
  font-family:var(--font-display);font-size:22px;font-weight:var(--fw-regular);
  color:var(--text-heading);transition:color var(--dur-micro) var(--ease-silk);
}
.om-accordion__item.is-open .om-accordion__q{color:var(--accent)}
.om-accordion__panel{
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height var(--dur-normal) var(--ease-silk),opacity var(--dur-fast) var(--ease-silk);
}
.om-accordion__item.is-open .om-accordion__panel{max-height:320px;opacity:1}
.om-accordion__a{
  padding:0 0 var(--space-6);max-width:var(--width-reading);
  font-family:var(--font-sans);font-size:15px;font-weight:var(--fw-light);
  line-height:var(--lh-body);color:var(--text-muted);
}


/* --- components/marketing/FeatureCard.jsx -------------------------------- */
.om-feature{padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-6)}
.om-feature__head{display:flex;align-items:center;justify-content:space-between}
.om-feature__index{font-family:var(--font-sans);font-size:11px;letter-spacing:.12em;color:var(--accent)}
.om-feature__head .om-icon{width:22px;height:22px;color:var(--accent)}
.om-feature__title{
  font-family:var(--font-display);font-size:var(--text-card-title);
  font-weight:var(--fw-regular);color:var(--text-heading);margin:0;line-height:1.2;
}
.om-feature__body{
  font-family:var(--font-sans);font-size:15px;font-weight:var(--fw-light);
  line-height:var(--lh-body);color:var(--text-muted);margin:0;
}


/* --- components/marketing/ServiceCard.jsx -------------------------------- */
.om-service{
  position:relative;height:480px;overflow:hidden;
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-xs);
  transition:border-color var(--dur-fast) var(--ease-silk);
}
.om-service:hover{border-color:var(--border-accent)}
.om-service__media{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1);transition:transform var(--dur-section) var(--ease-air);
}
.om-service:hover .om-service__media{transform:scale(var(--hover-scale-image))}
.om-service__scrim{position:absolute;inset:0;background:var(--scrim-bottom)}
.om-service__body{position:absolute;left:var(--space-6);right:var(--space-6);bottom:var(--space-6)}
.om-service__index{
  font-family:var(--font-sans);font-size:11px;letter-spacing:.12em;
  color:var(--accent);margin-bottom:var(--space-2);
}
.om-service__title{
  font-family:var(--font-display);font-size:var(--text-card-title);
  font-weight:var(--fw-regular);color:var(--text-display);margin:0;line-height:1.2;
}
.om-service__action{
  display:inline-flex;align-items:center;gap:var(--space-2);
  margin-top:var(--space-3);padding:0;background:none;border:0;cursor:pointer;
  font-family:var(--font-sans);font-size:11px;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--text-muted);
  transition:color var(--dur-micro) var(--ease-silk);
}
.om-service:hover .om-service__action{color:var(--accent)}
.om-service__action .om-icon{width:12px;height:12px}


/* --- components/marketing/PackageCard.jsx -------------------------------- */
.om-package{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface-card);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-xs);
  padding:var(--space-8);
  box-shadow:var(--shadow-card);
  transition:all var(--dur-fast) var(--ease-silk);
}
.om-package:hover{box-shadow:var(--shadow-hover);transform:var(--hover-lift)}
.om-package--featured{
  background:var(--surface-raised);border-color:var(--border-accent);box-shadow:var(--glow-accent);
}
.om-package--featured:hover{box-shadow:var(--glow-accent);transform:none}
.om-package__badge{position:absolute;top:-14px;left:var(--space-8)}
.om-package__name{
  font-family:var(--font-display);font-size:24px;font-weight:var(--fw-regular);
  color:var(--text-heading);margin:0;
}
.om-package__blurb{
  margin-top:var(--space-2);font-family:var(--font-sans);font-size:14px;
  font-weight:var(--fw-light);color:var(--text-muted);
}
.om-package__price{display:flex;align-items:baseline;gap:6px;margin:var(--space-6) 0 var(--space-4)}
.om-package__amount{font-family:var(--font-display);font-size:42px;color:var(--text-display);line-height:1}
.om-package__unit{font-family:var(--font-sans);font-size:13px;font-weight:var(--fw-light);color:var(--text-muted)}
.om-package__rule{height:1px;background:var(--divider);margin-bottom:var(--space-6)}
.om-package__features{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:var(--space-3);flex:1;
}
.om-package__features li{
  display:flex;gap:var(--space-3);font-family:var(--font-sans);font-size:14px;
  font-weight:var(--fw-light);color:var(--text-body);
}
.om-package__features .om-icon{width:14px;height:14px;color:var(--accent);margin-top:3px}
.om-package__cta{margin-top:var(--space-8)}
.om-package__cta .om-btn{justify-content:space-between}


/* --- components/marketing/StatCounter.jsx ------------------------------- */
.om-stat{text-align:center}
.om-stat__value{font-family:var(--font-display);font-size:56px;line-height:1;color:var(--text-display)}
.om-stat__suffix{color:var(--accent)}
.om-stat__label{
  margin-top:var(--space-3);font-family:var(--font-sans);font-size:11px;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);
}


/* --- components/marketing/TestimonialCard.jsx --------------------------- */
.om-quote{
  margin:0;padding:var(--space-8);
  background:var(--surface-card);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-xs);
  display:flex;flex-direction:column;gap:var(--space-6);
}
.om-quote__text{
  font-family:var(--font-display);font-size:22px;font-style:italic;
  line-height:1.45;color:var(--text-heading);margin:0;
}
.om-quote__foot{display:flex;flex-direction:column;gap:2px}
.om-quote__name{
  font-family:var(--font-sans);font-size:13px;font-weight:var(--fw-semibold);
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
}
.om-quote__role{font-family:var(--font-sans);font-size:13px;font-weight:var(--fw-light);color:var(--text-muted)}


/* --- components/marketing/TimelineStep.jsx ------------------------------ */
.om-step{display:grid;grid-template-columns:1fr 48px 1fr;align-items:start}
.om-step__text{text-align:left}
.om-step--left .om-step__text{text-align:right}
.om-step__index{font-family:var(--font-display);font-size:44px;color:var(--mustard-700);opacity:.7;line-height:1}
.om-step__title{
  font-family:var(--font-display);font-size:var(--text-card-title);
  font-weight:var(--fw-regular);color:var(--text-heading);margin:10px 0 0;
}
.om-step__body{
  margin-top:var(--space-3);font-family:var(--font-sans);font-size:14px;
  font-weight:var(--fw-light);line-height:var(--lh-body);color:var(--text-muted);max-width:380px;
}
.om-step--left .om-step__body{margin-left:auto}
.om-step__rail{display:flex;flex-direction:column;align-items:center;height:100%}
.om-step__node{
  width:22px;height:22px;border-radius:50%;
  border:1px solid var(--border-accent);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.om-step__node::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
.om-step__line{flex:1;width:1px;background:var(--alpha-gold-24)}


/* --- components/marketing/NavBar.jsx ------------------------------------ */
.om-nav{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);
  padding:28px var(--space-12);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:all var(--dur-fast) var(--ease-silk);
}
.om-nav.is-scrolled{
  padding:18px var(--space-12);
  background:var(--surface-glass);
  backdrop-filter:var(--blur-nav);
  -webkit-backdrop-filter:var(--blur-nav);
  border-bottom-color:var(--border-hairline);
}
.om-nav__logo{height:32px;transition:height var(--dur-fast) var(--ease-silk)}
.om-nav.is-scrolled .om-nav__logo{height:26px}
/* Ten items is what this row can carry, and only just. Measured at a real
   1280px viewport the links get 847px between the logo and the CTA; at
   11px with a 24px gap the set wants 862 and the browser resolves the
   overflow by breaking "Before / After" and "Add-Ons" onto two lines each.
   nowrap forbids that, and the 16px gap pays for it. 11px matches the
   uppercase label type used elsewhere. Re-measure before adding an item. */
.om-nav__links{display:flex;align-items:center;gap:var(--space-4)}
.om-nav__link{
  position:relative;white-space:nowrap;
  font-family:var(--font-sans);font-size:11px;font-weight:var(--fw-regular);
  letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--text-body);padding-bottom:4px;
  transition:color var(--dur-micro) var(--ease-silk);
}
.om-nav__link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--accent);transition:width var(--dur-fast) var(--ease-silk);
}
.om-nav__link:hover,.om-nav__link.is-active{color:var(--accent)}
.om-nav__link:hover::after,.om-nav__link.is-active::after{width:100%}
.om-nav__burger{display:none}


/* --- components/marketing/CTABanner.jsx --------------------------------- */
.om-cta{position:relative;overflow:hidden;padding:var(--space-32) var(--space-12);background:var(--navy-900)}
.om-cta__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.om-cta__scrim{position:absolute;inset:0;background:var(--scrim-flat)}
.om-cta__inner{position:relative;z-index:1;max-width:900px;margin:0 auto;text-align:center}
.om-cta__eyebrow{
  font-family:var(--font-sans);font-size:var(--text-micro);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent);
  margin-bottom:var(--space-6);
}
.om-cta__title{
  font-family:var(--font-display);font-size:var(--text-section);font-weight:var(--fw-regular);
  line-height:var(--lh-heading);color:var(--text-display);margin:0;
}
.om-cta__sub{
  margin:var(--space-6) auto 0;max-width:640px;
  font-family:var(--font-sans);font-size:17px;font-weight:var(--fw-light);color:var(--text-body);
}
.om-cta__actions{margin-top:var(--space-8);display:flex;justify-content:center}


/* --- components/marketing/Footer.jsx ------------------------------------ */
.om-footer{
  background:var(--navy-900);
  border-top:1px solid var(--border-hairline);
  padding:var(--space-24) var(--space-12) var(--space-8);
}
.om-footer__grid{
  max-width:var(--width-content);margin:0 auto;
  display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:var(--space-12);
}
.om-footer__blurb{
  margin-top:var(--space-6);max-width:340px;
  font-family:var(--font-sans);font-size:14px;font-weight:var(--fw-light);
  line-height:var(--lh-body);color:var(--text-muted);
}
.om-footer__social{display:flex;gap:var(--space-2);margin-top:var(--space-8)}
.om-footer__coltitle{
  font-family:var(--font-sans);font-size:11px;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-6);
}
.om-footer__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-4)}
.om-footer__list a{font-family:var(--font-sans);font-size:14px;font-weight:var(--fw-light);color:var(--text-body)}
.om-footer__list a:hover{color:var(--link-hover)}
.om-footer__bar{
  max-width:var(--width-content);margin:var(--space-16) auto 0;
  padding-top:var(--space-6);border-top:1px solid var(--border-hairline);
  display:flex;flex-wrap:wrap;gap:var(--space-8);align-items:center;justify-content:space-between;
}
.om-footer__contact{display:flex;flex-wrap:wrap;gap:var(--space-8)}
.om-footer__contact span{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-family:var(--font-sans);font-size:13px;font-weight:var(--fw-light);color:var(--text-muted);
}
.om-footer__contact .om-icon{width:15px;height:15px;color:var(--accent)}
/* The global `a` rule paints links gold, which would make the phone number
   shout against the rest of the contact bar. Inherit the bar's colour and
   save the accent for hover, so it still reads as tappable. */
.om-footer__contact a{color:inherit;text-decoration:none}
.om-footer__contact a:hover,
.om-footer__contact a:focus-visible{color:var(--accent)}
.om-footer__legal{font-family:var(--font-sans);font-size:13px;font-weight:var(--fw-light);color:var(--text-disabled)}

/* --- before / after comparison ------------------------------------------- */
/* The stage stacks two identically-framed photographs. The edited one is the
   base layer; the raw one sits on top and is clipped back from the right, so
   the seam position is a single custom property (--pos) that the script sets.

   clip-path rather than a width on a wrapper: clipping leaves the top image at
   full size, so it stays pixel-aligned with the base underneath. Sizing a
   wrapper would rescale it and the two halves would drift apart. */
.om-compare__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:var(--space-12);margin-top:var(--space-16);
}
.om-compare{margin:0;display:flex;flex-direction:column;gap:var(--space-6)}
.om-compare__stage{
  --pos:50%;
  position:relative;overflow:hidden;isolation:isolate;
  aspect-ratio:3/2;border-radius:var(--radius-image);
  border:1px solid var(--border-hairline);box-shadow:var(--shadow-card);
  background:var(--navy-900);touch-action:pan-y;
}
.om-compare__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;user-select:none;-webkit-user-drag:none;
}
.om-compare__img--before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}

/* Labels fade out on the side the seam has swallowed, so neither one ever
   sits on top of the image it is not describing. */
.om-compare__tag{
  position:absolute;top:var(--space-4);z-index:2;pointer-events:none;
  padding:5px 10px;border-radius:var(--radius-pill);
  background:rgba(9,11,15,.62);backdrop-filter:var(--blur-glass);
  border:1px solid var(--alpha-white-08);
  font-family:var(--font-sans);font-size:var(--text-micro);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-label);text-transform:uppercase;
  transition:opacity var(--dur-fast) var(--ease-silk);
}
.om-compare__tag--a{left:var(--space-4);color:var(--text-muted)}
.om-compare__tag--b{right:var(--space-4);color:var(--accent)}
.om-compare__stage[data-edge="start"] .om-compare__tag--a,
.om-compare__stage[data-edge="end"] .om-compare__tag--b{opacity:0}

.om-compare__seam{
  position:absolute;top:0;bottom:0;left:var(--pos);z-index:2;
  width:2px;margin-left:-1px;background:var(--alpha-white-72);
  box-shadow:0 0 0 1px rgba(9,11,15,.28);pointer-events:none;
}
.om-compare__grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;gap:2px;
  width:46px;height:46px;border-radius:50%;
  background:rgba(9,11,15,.58);backdrop-filter:var(--blur-glass);
  border:1px solid var(--alpha-white-28);color:#fff;
  transition:transform var(--dur-fast) var(--ease-silk),
             border-color var(--dur-fast) var(--ease-silk);
}
.om-compare__grip .om-icon{width:15px;height:15px}

/* The real control: invisible, but on top and full-bleed, so a drag anywhere
   across the photograph moves the seam and the focus ring lands correctly. */
.om-compare__range{
  position:absolute;inset:0;z-index:3;width:100%;height:100%;
  margin:0;padding:0;background:none;border:0;
  -webkit-appearance:none;appearance:none;cursor:ew-resize;
}
.om-compare__range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:46px;height:46px;border-radius:50%;background:transparent;cursor:grab;
}
.om-compare__range::-moz-range-thumb{
  width:46px;height:46px;border:0;border-radius:50%;background:transparent;cursor:grab;
}
.om-compare__range:active{cursor:ew-resize}
.om-compare__stage:hover .om-compare__grip{transform:translate(-50%,-50%) scale(1.06)}
.om-compare__range:focus-visible{outline:none}
.om-compare__range:focus-visible ~ .om-compare__seam .om-compare__grip{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}

.om-compare__cap{padding:0 var(--space-1)}
.om-compare__title{
  margin:0;font-family:var(--font-display);font-size:var(--text-card-title);
  font-weight:var(--fw-regular);line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading);color:var(--text-display);
}
.om-compare__note{
  margin:var(--space-3) 0 0;max-width:46ch;
  font-size:15px;line-height:var(--lh-body);color:var(--text-muted);
}

@media (prefers-reduced-motion:reduce){
  .om-compare__tag,.om-compare__grip{transition:none}
}
@media (max-width:900px){
  .om-compare__grid{grid-template-columns:1fr;gap:var(--space-8)}
}

/* Without JS nothing paints --pos, so the seam would never move. Drop the
   control and the grip and let the pair sit as a clean half-and-half still. */
.no-js .om-compare__range,
.no-js .om-compare__grip{display:none}


/* --- Site assistant ------------------------------------------------------ *
 * Built entirely by js/chat.js, so nothing here renders without JS.
 * Sits above the sticky à la carte bar (z-index 20) and below the nav drawer
 * (70), so it can never trap the mobile menu behind it.
 * ----------------------------------------------------------------------- */
.om-chat{position:fixed;right:var(--space-6);bottom:var(--space-6);z-index:60}
.om-chat__srOnly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* A circular icon, not a labelled pill. It sits over the page at every scroll
   position, so it should read as a persistent affordance rather than another
   call to action competing with "Schedule Appointment". */
.om-chat__launch{
  width:52px;height:52px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--text-on-accent);background:var(--accent);
  border:1px solid transparent;border-radius:50%;
  box-shadow:var(--shadow-hover);
  transition:background var(--dur-micro) var(--ease-silk),transform var(--dur-micro) var(--ease-silk);
}
.om-chat__launch:hover{background:var(--accent-hover);transform:var(--hover-lift)}
.om-chat__launch .om-icon{width:21px;height:21px}
/* The label is kept in the DOM for screen readers; only the glyph is shown. */
.om-chat__launchText{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* An author `display` declaration outranks the browser's [hidden]{display:none},
   so `panel.hidden = true` set the attribute and the panel carried on
   rendering — the close button fired correctly but nothing appeared to happen,
   and the panel showed on page load. Restate it here, scoped, so the hidden
   state actually wins. */
.om-chat__panel[hidden]{display:none}
.om-chat__panel{
  position:absolute;right:0;bottom:calc(100% + var(--space-3));
  width:min(380px,calc(100vw - var(--space-8)));
  max-height:min(560px,calc(100vh - var(--space-24)));
  display:flex;flex-direction:column;
  background:var(--surface-card);
  border:1px solid var(--border-accent);border-radius:var(--radius-xs);
  box-shadow:var(--shadow-hover);overflow:hidden;
}
.om-chat__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-6);border-bottom:1px solid var(--border-hairline);
}
.om-chat__title{
  font-family:var(--font-sans);font-size:11px;font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent);
}
.om-chat__sub{margin-top:4px;font-size:12px;font-weight:var(--fw-light);color:var(--alpha-white-55)}
/* 36px rather than the 28px it started at — this is the control people reach
   for on a phone, and a small target is its own kind of "not working". */
.om-chat__close{
  flex:0 0 auto;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  padding:0;background:none;border:0;border-radius:var(--radius-xs);
  color:var(--text-muted);cursor:pointer;
}
.om-chat__close:hover{color:var(--accent);background:var(--accent-soft)}
.om-chat__close .om-icon{width:13px;height:13px}

.om-chat__log{
  flex:1 1 auto;overflow-y:auto;padding:var(--space-6);
  display:flex;flex-direction:column;gap:var(--space-4);
}
.om-chat__msg{
  max-width:88%;padding:11px 14px;border-radius:var(--radius-xs);
  font-size:14px;font-weight:var(--fw-light);line-height:1.6;
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.om-chat__msg--bot{align-self:flex-start;background:var(--alpha-white-04);color:var(--text-body)}
.om-chat__msg--you{align-self:flex-end;background:var(--accent-soft);color:var(--text-display)}
.om-chat__msg.is-thinking{color:var(--text-muted);letter-spacing:.3em}
.om-chat__msg.is-error{border:1px solid var(--border-accent);color:var(--text-display)}

.om-chat__form{
  display:flex;gap:var(--space-2);align-items:center;
  padding:var(--space-4) var(--space-6);border-top:1px solid var(--border-hairline);
}
.om-chat__input{
  flex:1 1 auto;min-width:0;padding:10px 0;
  background:none;border:0;border-bottom:1px solid var(--border-hairline);
  font-family:var(--font-sans);font-size:14px;font-weight:var(--fw-light);color:var(--text-display);
}
.om-chat__input::placeholder{color:var(--text-disabled)}
.om-chat__input:focus{outline:none;border-bottom-color:var(--accent)}
.om-chat__send{
  flex:0 0 auto;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  padding:0;cursor:pointer;color:var(--accent);
  background:none;border:1px solid var(--border-accent);border-radius:var(--radius-xs);
}
.om-chat__send:hover{background:var(--accent-soft)}
.om-chat__send .om-icon{width:15px;height:15px}

.om-chat__foot{
  margin:0;padding:0 var(--space-6) var(--space-4);
  font-size:11px;font-weight:var(--fw-light);color:var(--text-disabled);
}
.om-chat__foot a{color:var(--text-muted)}

@media (max-width:520px){
  .om-chat{right:var(--space-4);bottom:var(--space-4)}
  .om-chat__launch{width:48px;height:48px}
  /* Anchored to both edges rather than sized from 100vw. 100vw counts the
     scrollbar and the fixed container does not, so a width calculated from it
     pushed the panel's right edge past the viewport on a phone. Pinning left
     and right makes the arithmetic impossible to get wrong. */
  .om-chat__panel{
    position:fixed;left:var(--space-4);right:var(--space-4);width:auto;
    bottom:calc(var(--space-4) + 62px);
    max-height:calc(100dvh - 160px);
  }
}
.om-footer__legal a{color:var(--text-muted);text-decoration:none}
.om-footer__legal a:hover,.om-footer__legal a:focus-visible{color:var(--accent)}