/* The Home Concierge — 2026 refinement pass.
   Loaded site-wide. Owns four things and nothing else:
     1. RADIUS      tightened corners across every component
     2. RHYTHM      alternating grounds so sections stop blending
     3. CATEGORY    hover / tap previews on the category tiles
     4. POLISH      measure, spacing, focus states
   Tokens mirror the active "Concierge Navy" design system. */

:root {
  --hc-navy: #18304C;
  --hc-navy-dark: #0F1F33;
  --hc-gold: #A37830;
  --hc-gold-dark: #8C6427;
  --hc-gold-light: #FBCAA2;
  --hc-ink: #1E2830;
  --hc-prose: #4A5560;
  --hc-muted: #6B7784;
  --hc-muted-soft: #9AA5B1;
  --hc-line: #D7DDE3;
  --hc-mist: #E8EDF2;
  --hc-surface: #F3F5F7;
  --hc-on-navy: #DBE3EC;
  --hc-green: #2E7D32;

  /* Tightened radius scale. Was 12 / 18 / 20 / 999. */
  --hc-r-chip: 4px;
  --hc-r-card: 6px;
  --hc-r-band: 8px;
  --hc-r-btn: 6px;
}

/* ============================================================
   1. RADIUS
   Elementor writes per-widget radius into post-<id>.css, which
   loads after this file, so these need !important.
   ============================================================ */

.elementor-button,
.elementor-button-wrapper .elementor-button,
.hc-db .elementor-button {
  border-radius: var(--hc-r-btn) !important;
}

.hc-cat-card,
.hc-cat-card--custom { border-radius: var(--hc-r-card) !important; }
.hc-cat-icon         { border-radius: var(--hc-r-chip) !important; }
.hc-next             { border-radius: var(--hc-r-btn) !important; }

/* Day builder shares the scale. */
.hc-db .hc-card,
.hc-db .hc-panel,
.hc-db .hc-result,
.hc-db .hc-ticket,
.hc-db .hc-hero { border-radius: var(--hc-r-card) !important; }
.hc-db .hc-pill,
.hc-db .hc-chip,
.hc-db button   { border-radius: var(--hc-r-btn) !important; }

/* ============================================================
   2. RHYTHM
   Every section was boxed at 1080px on the same near-white
   ground, so the page read as one continuous wash. Grounds now
   alternate. The band is painted on .e-con-inner rather than the
   container so it stays inside the 1080px column with a radius,
   per the design system, instead of going full bleed.
   ============================================================ */

.hc-band--navy,
.hc-band--surface {
  padding-top: 26px !important;
  padding-bottom: 26px !important;
}

.hc-band--navy > .e-con-inner,
.hc-band--surface > .e-con-inner {
  border-radius: var(--hc-r-band);
  padding: 54px 46px;
}

.hc-band--navy > .e-con-inner    { background: var(--hc-navy); }
.hc-band--surface > .e-con-inner { background: var(--hc-surface); }

@media (max-width: 767px) {
  .hc-band--navy > .e-con-inner,
  .hc-band--surface > .e-con-inner { padding: 40px 24px; }
}

/* Astra emits .entry-content :where(h1..h6){color:#18304C}. :where() adds no
   specificity, so it wins on source order and repaints white headings navy,
   which makes them vanish on a navy ground. */
.hc-band--navy .elementor-heading-title,
.hc-band--navy h1, .hc-band--navy h2,
.hc-band--navy h3, .hc-band--navy h4 { color: #FFFFFF !important; }

.hc-band--navy .elementor-widget-text-editor,
.hc-band--navy .elementor-widget-text-editor p,
.hc-band--navy p { color: var(--hc-on-navy) !important; }

/* Primary flips to brass on navy grounds, navy everywhere else. */
.hc-band--navy .elementor-button {
  background-color: var(--hc-gold) !important;
  border-color: var(--hc-gold) !important;
  color: #FFFFFF !important;
}
.hc-band--navy .elementor-button:hover,
.hc-band--navy .elementor-button:focus-visible {
  background-color: var(--hc-gold-dark) !important;
  border-color: var(--hc-gold-dark) !important;
}

/* A hairline where a full band would be too loud. */
.hc-band--rule > .e-con-inner { border-top: 1px solid var(--hc-line); }
.hc-band--rule { padding-top: 0 !important; }
.hc-band--rule > .e-con-inner { padding-top: 62px; }

/* ============================================================
   3. CATEGORY TILES
   The shortcode already computed a sample-task preview and a
   task count, then discarded them. They are now shown: on hover
   at desktop, on first tap at touch widths.
   ============================================================ */

.hc-cat-card {
  position: relative;
  gap: 6px;
  padding: 18px 18px 16px;
  transition: border-color .15s ease, transform .15s ease,
              background-color .15s ease, box-shadow .15s ease;
}

/* The reveal is absolutely positioned and styled as a continuation of the
   card, so an expanding tile overlays its neighbours instead of growing the
   grid row. With 26 tiles an in-flow reveal shoves the whole page down on
   every hover. */
.hc-cat-reveal {
  position: absolute;
  top: 100%;
  left: -1px;
  right: -1px;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  background: #fff;
  border: 1px solid var(--hc-gold);
  border-top: 0;
  border-radius: 0 0 var(--hc-r-card) var(--hc-r-card);
  box-shadow: 0 10px 26px rgba(24, 48, 76, .12);
  padding: 0 18px;
  pointer-events: none;
  transition: grid-template-rows .18s ease, opacity .14s ease, padding-bottom .18s ease;
}
.hc-cat-reveal > span { overflow: hidden; min-height: 0; }

.hc-cat-preview {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--hc-muted);
}

/* Example tasks read as a short bullet list, not a run-on comma string. */
.hc-cat-list {
  margin: 0;
  padding: 0 0 0 16px;
  list-style: disc;
}
.hc-cat-list li {
  margin: 0 0 4px;
  padding: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--hc-muted);
}
.hc-cat-list li::marker { color: var(--hc-gold); }
.hc-cat-list li:last-child { margin-bottom: 0; }

/* A tile only promises a click when it actually has somewhere to go. */
.hc-cat-card { cursor: default; }
.hc-cat-card--link { cursor: pointer; text-decoration: none; color: inherit; }
.hc-cat-card--link:hover .hc-cat-label,
.hc-cat-card--link:focus-visible .hc-cat-label { color: var(--hc-gold); }

/* One way forward out of the grid, instead of twenty-six. */
/* Sits above the tile reveals: a bottom-row tile opening downward must never
   cover the only way forward. */
.hc-cat-cta {
  position: relative;
  z-index: 10;
  margin: 38px 0 0;
  text-align: center;
}
.hc-cta-btn {
  display: inline-block;
  padding: 14px 30px;
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--hc-navy);
  border: 1.5px solid var(--hc-navy);
  border-radius: var(--hc-r-btn);
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.hc-cta-btn:hover,
.hc-cta-btn:focus-visible {
  background: var(--hc-navy-dark);
  border-color: var(--hc-navy-dark);
  color: #FFFFFF;
  text-decoration: none;
}
.hc-cta-btn:focus-visible { outline: 2px solid var(--hc-gold); outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  .hc-cat-card:hover,
  .hc-cat-card:focus-visible {
    z-index: 6;
    border-color: var(--hc-gold);
    background: #fff;
    box-shadow: 0 6px 24px rgba(24, 48, 76, .08);
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .hc-cat-card:hover .hc-cat-reveal,
  .hc-cat-card:focus-visible .hc-cat-reveal {
    grid-template-rows: 1fr;
    opacity: 1;
    padding-bottom: 15px;
    pointer-events: auto;
  }
}

/* Touch: first tap expands (refresh.js adds .is-open), second follows the link. */
.hc-cat-card.is-open {
  z-index: 6;
  border-color: var(--hc-gold);
  background: #fff;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.hc-cat-card.is-open .hc-cat-reveal {
  grid-template-rows: 1fr;
  opacity: 1;
  padding-bottom: 15px;
  pointer-events: auto;
}

.hc-cat-card:focus-visible {
  outline: 2px solid var(--hc-gold);
  outline-offset: 2px;
}

/* ============================================================
   4. POLISH
   ============================================================ */

/* Long-form paragraphs were running the full 1080px column. Cap the measure
   so body copy sits at a readable 62-68 characters. */
.hc-measure .elementor-widget-text-editor p,
.hc-measure p {
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
  color: var(--hc-prose);
}
.hc-band--navy.hc-measure p,
.hc-band--navy .hc-measure p { color: var(--hc-on-navy) !important; }

.hc-lead p { font-size: 17px; line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .hc-cat-card,
  .hc-cat-reveal { transition: none; }
  .hc-cat-card:hover { transform: none; }
}


/* ------------------------------------------------------------------
   Homepage band bindings (page 575).

   Elementor 4 does not render the container _css_classes setting, so the
   semantic classes above are aliased onto the container element ids, which
   ARE in the markup and are stable across edits. Same pattern the header
   layout CSS already uses. If a section is rebuilt in Elementor its id
   changes, so re-point the selector rather than wondering why a band went
   flat.
   ------------------------------------------------------------------ */

/* "Let's be honest" - the emotional hook, beat one. */
.elementor-element-2bbd5a3 { padding-top: 26px !important; padding-bottom: 26px !important; }
.elementor-element-2bbd5a3 > .e-con-inner {
  background: var(--hc-navy);
  border-radius: var(--hc-r-band);
  padding: 54px 46px;
}
.elementor-element-2bbd5a3 .elementor-heading-title,
.elementor-element-2bbd5a3 h1, .elementor-element-2bbd5a3 h2,
.elementor-element-2bbd5a3 h3 { color: #FFFFFF !important; }
.elementor-element-2bbd5a3 .elementor-widget-text-editor,
.elementor-element-2bbd5a3 p { color: var(--hc-on-navy) !important; }
.elementor-element-2bbd5a3 .elementor-widget-text-editor p {
  max-width: 64ch; margin-left: auto; margin-right: auto;
}
.elementor-element-2bbd5a3 .elementor-button {
  background-color: var(--hc-gold) !important;
  border-color: var(--hc-gold) !important;
  color: #FFFFFF !important;
}
.elementor-element-2bbd5a3 .elementor-button:hover,
.elementor-element-2bbd5a3 .elementor-button:focus-visible {
  background-color: var(--hc-gold-dark) !important;
  border-color: var(--hc-gold-dark) !important;
}

/* Example days - a quiet tinted beat between two white sections. */
.elementor-element-007ab62 { padding-top: 26px !important; padding-bottom: 26px !important; }
.elementor-element-007ab62 > .e-con-inner {
  background: var(--hc-surface);
  border-radius: var(--hc-r-band);
  padding: 54px 46px;
}

/* White sections separated by a hairline rather than another grey. */
.elementor-element-1cfea96 > .e-con-inner,
.elementor-element-1e19a8b > .e-con-inner,
.elementor-element-142835a > .e-con-inner {
  border-top: 1px solid var(--hc-line);
  padding-top: 60px;
}
.elementor-element-1cfea96,
.elementor-element-1e19a8b,
.elementor-element-142835a { padding-top: 4px !important; }

/* Materials panel: cap the measure so it stops reading as a wall. */
.elementor-element-1d7323c p {
  max-width: 62ch; margin-left: auto; margin-right: auto;
  color: var(--hc-prose);
}

@media (max-width: 767px) {
  .elementor-element-2bbd5a3 > .e-con-inner,
  .elementor-element-007ab62 > .e-con-inner { padding: 40px 24px; }
  .elementor-element-1cfea96 > .e-con-inner,
  .elementor-element-1e19a8b > .e-con-inner,
  .elementor-element-142835a > .e-con-inner { padding-top: 44px; }
}


/* ------------------------------------------------------------------
   Hero signal row: next opening + flat price.
   ------------------------------------------------------------------ */

.hc-signals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.hc-signals .hc-next { display: inline-flex; }

.hc-price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-family: "Manrope", sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--hc-navy);
  background: var(--hc-mist);
  border: 1.5px solid #C3CEDA;
  border-radius: var(--hc-r-btn);
}
.hc-price strong { font-weight: 800; font-size: 16px; }

@media (max-width: 480px) {
  .hc-signals { flex-direction: column; gap: 8px; }
}


/* ------------------------------------------------------------------
   Pricing page. Its own URL on purpose: the funnel is home -> build ->
   pricing, and the price appears on this step and nowhere earlier.
   ------------------------------------------------------------------ */

.hc-pricing { font-family: "Manrope", sans-serif; max-width: 940px; margin: 0 auto; }

.hc-pricing-hero {
  background: var(--hc-navy);
  border-radius: var(--hc-r-band);
  padding: 56px 40px 48px;
  text-align: center;
  color: var(--hc-on-navy);
}

.hc-pricing-eyebrow {
  margin: 0 0 18px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--hc-gold-light);
}

.hc-pricing-figure {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 82px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2.5px;
  color: #FFFFFF;
}
.hc-pricing-figure span { font-size: 44px; vertical-align: super; letter-spacing: 0; margin-right: 2px; }

.hc-pricing-unit {
  margin: 10px 0 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--hc-gold-light);
}
.hc-pricing-sub {
  margin: 14px auto 26px;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--hc-on-navy);
}

.hc-pricing-hero .hc-next { margin: 0 auto; }
.hc-pricing-hero .hc-cat-cta { margin-top: 24px; }
.hc-pricing-hero .hc-cta-btn {
  background: var(--hc-gold);
  border-color: var(--hc-gold);
}
.hc-pricing-hero .hc-cta-btn:hover,
.hc-pricing-hero .hc-cta-btn:focus-visible {
  background: var(--hc-gold-dark);
  border-color: var(--hc-gold-dark);
}

.hc-pricing-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}
@media (max-width: 767px) { .hc-pricing-cols { grid-template-columns: 1fr; } }

.hc-pricing-col {
  padding: 28px 28px 26px;
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-card);
  background: #FFFFFF;
}
.hc-pricing-col--out { background: #FAF8F6; border-color: #EFE9E3; }

.hc-pricing-col h2 {
  margin: 0 0 16px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.2px;
  color: var(--hc-navy) !important;
}
.hc-pricing-col--out h2 { color: #8C8076 !important; }

.hc-pricing-col ul { margin: 0; padding: 0 0 0 18px; list-style: disc; }
.hc-pricing-col li {
  margin: 0 0 11px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--hc-prose);
}
.hc-pricing-col li:last-child { margin-bottom: 0; }
.hc-pricing-col--in li::marker { color: var(--hc-green); }
.hc-pricing-col--out li { color: #8C8076; }
.hc-pricing-col--out li::marker { color: #C9BCB0; }


/* ------------------------------------------------------------------
   About beat on the homepage (cloned from /about/, page 13).

   Sits directly under the navy "Let's be honest" band. The why-we-sell-days
   copy stays on white; the four promises become a tinted panel so the run of
   white sections that follows does not turn back into one continuous wash.
   ------------------------------------------------------------------ */

/* Long-form copy, so cap the measure rather than letting it run 1080px. */
.elementor-element-96ecffb .elementor-widget-text-editor p {
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
  color: var(--hc-prose);
}
.elementor-element-96ecffb { padding-bottom: 4px !important; }

/* The four promises, as a tinted panel instead of another white stretch. */
.elementor-element-105bbcb {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  margin-top: 22px !important;
  border: 0 !important;
}
.elementor-element-105bbcb > .e-con-inner {
  background: var(--hc-surface);
  border-radius: var(--hc-r-band);
  padding: 44px 46px;
}
@media (max-width: 767px) {
  .elementor-element-105bbcb > .e-con-inner { padding: 34px 24px; }
}


/* ------------------------------------------------------------------
   Booking lookup, on its own page.
   ------------------------------------------------------------------ */

.hc-lookup {
  font-family: "Manrope", sans-serif;
  max-width: 620px;
  margin: 0 auto;
  padding: 34px 32px 30px;
  background: var(--hc-surface);
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-band);
}

.hc-lookup-hint {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--hc-prose);
}

.hc-lookup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hc-lookup-row input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 13px 15px;
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  color: var(--hc-ink);
  background: #FFFFFF;
  border: 1.5px solid var(--hc-line);
  border-radius: var(--hc-r-btn);
}
.hc-lookup-row input:focus {
  outline: 2px solid var(--hc-gold);
  outline-offset: 1px;
  border-color: var(--hc-gold);
}
.hc-lookup-row .hc-cta-btn { flex: 0 0 auto; padding: 13px 26px; cursor: pointer; }
.hc-lookup-row .hc-cta-btn[disabled] { opacity: .55; cursor: default; }

.hc-lookup-msg {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--hc-muted);
}

.hc-lookup-result {
  margin-top: 20px;
  padding: 22px 22px 20px;
  background: #FFFFFF;
  border: 1px solid var(--hc-line);
  border-top: 3px solid var(--hc-gold);
  border-radius: var(--hc-r-card);
}
.hc-lookup-ticket {
  margin: 0 0 12px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.2px;
  color: var(--hc-navy);
}
.hc-lookup-line {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--hc-prose);
}
.hc-lookup-line strong {
  display: inline-block;
  min-width: 92px;
  font-weight: 700;
  color: var(--hc-navy);
}
.hc-lookup-tasks {
  margin: 14px 0 0;
  padding: 14px 0 0 18px;
  list-style: disc;
  border-top: 1px solid var(--hc-line);
}
.hc-lookup-tasks li {
  margin: 0 0 5px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--hc-prose);
}
.hc-lookup-tasks li::marker { color: var(--hc-gold); }

.hc-hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

@media (max-width: 520px) {
  .hc-lookup { padding: 26px 20px 24px; }
  .hc-lookup-row .hc-cta-btn { flex: 1 1 100%; }
}

/* Multi-day tickets list each day separately. */
.hc-lookup-day { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hc-line); }
.hc-lookup-day:first-of-type { margin-top: 14px; }
.hc-lookup-dayhead {
  margin: 0 0 8px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--hc-navy);
}
.hc-lookup-day .hc-lookup-tasks { margin-top: 0; padding-top: 0; border-top: 0; }


/* ------------------------------------------------------------------
   Next opening. Availability is the strongest thing this business can say
   on a first visit, so it reads as an invitation, not a footnote. The
   kicker (This week / Next week) carries more weight than the date.
   ------------------------------------------------------------------ */

.hc-next {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 13px 22px 13px 18px;
  font-family: "Manrope", sans-serif;
  text-align: left;
  color: #1B5E20;
  background: #EAF5EA;
  border: 1.5px solid #2E7D32;
  border-radius: var(--hc-r-btn) !important;
  box-shadow: 0 4px 16px rgba(46, 125, 50, .14);
}

/* Slow pulse. Enough to catch the eye once, not enough to nag. */
.hc-next-pulse {
  position: relative;
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
}
.hc-next-pulse > span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #2E7D32;
}
.hc-next-pulse::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid #2E7D32;
  opacity: 0;
  animation: hc-next-ping 2.4s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes hc-next-ping {
  0%   { transform: scale(.6); opacity: .8; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.hc-next-text { display: flex; flex-direction: column; gap: 2px; }

.hc-next-kicker {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -.2px;
  line-height: 1.1;
  color: #1B5E20;
}
.hc-next-date {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  color: #3E7A42;
}

.hc-next--full {
  color: #7A6A5C !important;
  background: #FAF8F6 !important;
  border-color: #E0D7CE !important;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .hc-next-pulse::after { animation: none; }
}


/* ------------------------------------------------------------------
   Preview page.

   Anything experimental should be scoped to body.hc-preview so it cannot
   leak onto the live pages, e.g.
     body.hc-preview .some-new-thing { ... }
   ------------------------------------------------------------------ */

.hc-preview-flag {
  font-family: "Manrope", sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: #6B4E12;
  background: #FDF6E7;
  border: 1px solid #E8D5A8;
  border-left: 4px solid #A37830;
  border-radius: var(--hc-r-card);
  padding: 12px 16px;
}
.hc-preview-flag strong { color: #4A3608; }

.hc-preview-empty {
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  color: #9AA5B1;
  text-align: center;
  padding: 54px 20px;
  border: 1px dashed var(--hc-line);
  border-radius: var(--hc-r-band);
  margin: 0;
}


/* ------------------------------------------------------------------
   Brand wordmark. The header lockup used to be a picture plus live text,
   which meant two things to keep in sync and a webfont that could fail.
   It is now one supplied asset, so the only job here is sizing.
   ------------------------------------------------------------------ */

.hc-brand-wordmark img {
  display: block;
  width: 196px;
  max-width: 100%;
  height: auto;
}

@media (max-width: 1100px) {
  .hc-brand-wordmark img { width: 172px; }
}

@media (max-width: 767px) {
  .hc-brand-wordmark img { width: 152px; }
}

@media (max-width: 380px) {
  .hc-brand-wordmark img { width: 132px; }
}


/* ---- how it works: three cards, numbered ----------------------------
   The card itself is set in Elementor so it stays editable there. Only the
   number bubble needs CSS, because the heading widget has no background or
   size control of its own. */
.hc-step-num .elementor-heading-title {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50% !important;
  background: #18304C !important;
  color: #FFFFFF !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}
.hc-step { transition: transform .15s ease, box-shadow .15s ease; }
.hc-step:hover { transform: translateY(-2px); }
@media (max-width: 767px) {
  .hc-step-num .elementor-heading-title { width: 40px; height: 40px; font-size: 15px !important; }
}


/* ============================================================
   5. CATEGORY TILES ARE LINKS
   The example-task reveal is gone. A tile either goes somewhere
   (and says so with the cursor) or it is inert.
   ============================================================ */

.hc-cat-reveal { display: none !important; }

.hc-cat-card--link { cursor: pointer !important; }

/* The squared-off bottom corners existed so the reveal could hang below the
   tile. With no reveal they just look broken on hover. */
.hc-cat-card:hover,
.hc-cat-card:focus-visible,
.hc-cat-card.is-open {
  border-bottom-left-radius: var(--hc-r-card) !important;
  border-bottom-right-radius: var(--hc-r-card) !important;
}


/* ============================================================
   6. HEADER: BRAND LOCKUP AND MENU BUTTON

   The real DOM is deeper than it looks:
     .hc-header > .hc-hrow > .e-con-inner > [ .hc-brandbar , .hc-navcol ]
   The three logo images live inside .hc-brandbar, so flex rules written
   against .hc-header never reached them - .hc-brandbar sized to its own
   content and the words sat glued to the house.

   The button is in NORMAL FLOW inside a fixed-width .hc-navcol lane. It used
   to be position:absolute against .hc-header, but Elementor sets
   position:relative on every .elementor-widget, so it anchored to the menu
   widget instead and never reached the right edge. Flow + a fixed lane is
   deterministic, and it makes the lane the exact thing the words centre
   against.

   Three competing stylesheets, strongest first:
     Customizer Additional CSS (!important, and invisible from the plugin)
     post-1910.css - the Xpro widget's own, (0,4,1)
     .elementor-kit-574 button - (0,2,1)
   Ours is (0,2,x), so width/height/color need !important.
   ============================================================ */

.hc-header .hc-logo img { width: 315px; height: auto; max-width: none; display: block; }
.hc-header .hc-logo .elementor-widget-container { line-height: 0; }
.hc-header .hc-house,
.hc-header .hc-words { display: none; }

@media (max-width: 1024px) {

  .hc-header { position: relative; min-height: 86px; padding-left: 14px; padding-right: 0; }
  .hc-header .hc-logo img { width: min(324px, calc(100vw - 112px)); height: auto; }

  .hc-header .hc-hrow { flex: 1 1 auto; width: 100%; }
  .hc-header .hc-hrow > .e-con-inner { width: 100%; flex-wrap: nowrap; align-items: center; }
  .hc-header .hc-brandbar { flex: 1 1 auto; min-width: 0; width: auto; }

  .hc-header .hc-navcol {
    flex: 0 0 auto;
    width: 68px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 12px 0 0;
  }
  .hc-header .xpro-elementor-horizontal-menu-toggler-wrapper {
    position: static;
    transform: none;
    line-height: 0;
  }

  .hc-header button.xpro-elementor-horizontal-menu-toggler {
    width: 56px !important;
    height: 56px !important;
    color: #fff !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    background: var(--hc-navy);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(15, 31, 51, .22);
    cursor: pointer;
    overflow: visible;
    transition: background-color .18s ease;
  }

  .hc-header button.xpro-elementor-horizontal-menu-toggler:hover,
  .hc-header button.xpro-elementor-horizontal-menu-toggler:focus,
  .hc-header button.xpro-elementor-horizontal-menu-toggler:active {
    background: var(--hc-navy-dark);
    color: #fff !important;
  }

  .hc-header button.xpro-elementor-horizontal-menu-toggler i,
  .hc-header button.xpro-elementor-horizontal-menu-toggler i::before {
    display: block;
    font-size: 19px;
    line-height: 19px;
    height: 19px;
    margin: 0;
    padding: 0;
    color: #fff;
    vertical-align: top;
  }

  .hc-header button.xpro-elementor-horizontal-menu-toggler::after {
    content: "Menu";
    display: block;
    color: #fff;
    font-family: "Plus Jakarta Sans", "Manrope", system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    line-height: 11px;
    height: 11px;
    white-space: nowrap;
  }

  /* the drawer's close button - see the note in section 6b below */
  .hc-header button.xpro-elementor-horizontal-menu-close {
    width: 44px !important;
    height: 44px !important;
    color: #fff !important;
    background: var(--hc-navy);
    border: 0;
    border-radius: 10px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(15, 31, 51, .22);
  }
  .hc-header button.xpro-elementor-horizontal-menu-close i { display: none; }
  .hc-header button.xpro-elementor-horizontal-menu-close::after {
    content: "\00D7";
    display: block;
    font-family: "Plus Jakarta Sans", "Manrope", system-ui, -apple-system, Arial, sans-serif;
    font-size: 30px;
    line-height: 30px;
    height: 30px;
    font-weight: 400;
    color: #fff;
  }
  .hc-header button.xpro-elementor-horizontal-menu-close:hover,
  .hc-header button.xpro-elementor-horizontal-menu-close:focus {
    background: var(--hc-navy-dark);
    color: #fff !important;
  }

  /* ---- phone: house pinned left, WORDS centred in the lane between it and
     the button. Needs the two halves as separate images; the combined lockup
     centred as one unit leaves the words right of centre. ---- */
  @media (max-width: 480px) {
    .hc-header { min-height: 70px; padding-left: 10px; padding-right: 0; }
    .hc-header .hc-logo { display: none; }
    .hc-header .hc-brandbar { display: flex; flex-direction: row; align-items: center; }
    .hc-header .hc-house { display: block; flex: 0 0 auto; }
    .hc-header .hc-words { display: flex; flex: 1 1 auto; min-width: 0; justify-content: center; }
    .hc-header .hc-words > .elementor-widget-container { width: 100%; display: flex; justify-content: center; }
    .hc-header .hc-house img { height: 36px; width: auto; }
    .hc-header .hc-words img { height: 32px; width: auto; max-width: 100%; }
    .hc-header .hc-navcol { width: 57px; padding: 0 9px 0 0; }
    .hc-header button.xpro-elementor-horizontal-menu-toggler {
      width: 48px !important;
      height: 48px !important;
      gap: 3px;
      border-radius: 10px;
    }
    .hc-header button.xpro-elementor-horizontal-menu-toggler i,
    .hc-header button.xpro-elementor-horizontal-menu-toggler i::before {
      font-size: 15px;
      line-height: 15px;
      height: 15px;
    }
    .hc-header button.xpro-elementor-horizontal-menu-toggler::after {
      font-size: 8.5px;
      line-height: 9px;
      height: 9px;
      letter-spacing: .4px;
    }
  }

}

/* ============================================================
   7. DESKTOP NAV SPACING
   John wanted more air between the logo and the first menu item. The nav is
   right aligned, so the only way to move its left edge right is to make the
   whole bar narrower.

   The lever is NOT Elementor's menu_padding control - that only writes
   padding. The real spacing comes from Xpro's own stylesheet:
     .xpro-elementor-horizontal-navbar-nav > li > a { margin: 0 10px; }
   at (0,1,2), which no Elementor setting exposes. Overriding it here at
   (0,2,2). Seven items, two sides each, so every 1px off the margin moves
   the bar 14px right. 10px -> 7px = 42px.
   ============================================================ */

@media (min-width: 1025px) {
  .hc-header .xpro-elementor-horizontal-navbar-nav > li > a { margin: 0 7px; }
}


/* ============================================================
   7. CATEGORY TILES FLIP
   The tile is the control. Front is the category, back is five
   real tasks read from the live catalogue. Most visitors should
   never need the detail page, so "See more of what we do" is a
   quiet line at the foot of the back, and it is printed only
   where a detail page actually exists.

   Faces are absolutely positioned inside a preserve-3d parent,
   so any stray transform on a face breaks the 3D. Section 3 and
   site.css both lift .hc-cat-card on hover. Both are overridden
   below per face rather than with a blanket reset, because the
   back face's rotateY(180deg) IS its transform.
   ============================================================ */

.hc-cat-tile {
  position: relative;
  min-height: 248px;
  perspective: 1200px;
  cursor: pointer;
  border-radius: var(--hc-r-card);
}
.hc-cat-tile--static { cursor: default; }

.hc-cat-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.hc-cat-tile.is-flipped .hc-cat-inner { transform: rotateY(180deg); }

@media (hover: hover) and (pointer: fine) {
  .hc-cat-tile:not(.hc-cat-tile--static):hover .hc-cat-inner { transform: rotateY(180deg); }
}

.hc-cat-grid--flip .hc-cat-face {
  position: absolute;
  inset: 0;
  margin: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: none;
  border-radius: var(--hc-r-card) !important;
}

/* Per face, never blanket: the back's rotation is a transform too. */
.hc-cat-grid--flip .hc-cat-front,
.hc-cat-grid--flip .hc-cat-front:hover,
.hc-cat-grid--flip .hc-cat-front:focus-visible { transform: none; }
.hc-cat-grid--flip .hc-cat-back,
.hc-cat-grid--flip .hc-cat-back:hover,
.hc-cat-grid--flip .hc-cat-back:focus-visible { transform: rotateY(180deg); }

.hc-cat-grid--flip .hc-cat-front { justify-content: center; }

.hc-cat-count {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--hc-muted);
}

.hc-cat-grid--flip .hc-cat-back {
  gap: 0;
  padding: 14px 15px 13px;
  background: #FFFFFF;
  border-color: var(--hc-gold);
  overflow: hidden;
}
.hc-cat-grid--flip .hc-cat-back .hc-cat-label {
  font-size: 12.5px;
  margin: 0 0 8px;
}

.hc-cat-ex { list-style: none; margin: 0; padding: 0; }
.hc-cat-ex li {
  position: relative;
  padding: 2px 0 2px 13px;
  font-size: 12px;
  line-height: 1.38;
  color: var(--hc-prose);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hc-cat-ex li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hc-gold);
}

.hc-cat-more {
  margin-top: auto;
  padding-top: 8px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: var(--hc-gold);
  text-decoration: none;
}
.hc-cat-more:hover,
.hc-cat-more:focus-visible {
  color: var(--hc-gold-dark);
  text-decoration: underline;
}

.hc-cat-tile:focus-visible {
  outline: 2px solid var(--hc-gold);
  outline-offset: 3px;
}
.hc-cat-grid--flip .hc-cat-face:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .hc-cat-inner { transition: none; }
}


/* ------------------------------------------------------------------
   Next opening, sitting inside the navy hero. The green pill was drawn
   for a white ground; on navy it reads as an alert banner. Same signal,
   hero clothing. The dot stays green because that is the live part.
   ------------------------------------------------------------------ */

.hc-hero-next .hc-next {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.22) !important;
  color: #DBE3EC !important;
  box-shadow: none !important;
}
.hc-hero-next .hc-next-kicker { color: #FFFFFF; }
.hc-hero-next .hc-next-date   { color: #DBE3EC; }
.hc-hero-next .hc-next-pulse > span  { background: #6FCF97; }
.hc-hero-next .hc-next-pulse::after  { border-color: #6FCF97; }
.hc-hero-next .hc-next--full {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #C3CEDA !important;
}
.hc-hero-next .hc-next--full .hc-next-kicker { color: #E4E9EF; }
.hc-hero-next .hc-next--full .hc-next-date   { color: #C3CEDA; }
.hc-hero-next .hc-next--full .hc-next-pulse > span { background: #B9AA9C; }
.hc-hero-next .hc-next--full .hc-next-pulse::after { border-color: #B9AA9C; }


/* Anchor target: hero value line -> "What fits in a day?" section. */
#what-fits { scroll-margin-top: 24px; }


/* ------------------------------------------------------------------
   Homepage "What fits in a day?" tabs (widget 2534e5e).
   Elementor turns nested tabs into an accordion below the mobile
   breakpoint: .e-n-tabs-heading goes display:contents and each title
   is interleaved with its own panel via --n-tabs-title-order, which
   put one pill above each list. John wants them to stay tabs - both
   buttons side by side, the chosen list underneath.
   So: restore the heading as a real flex row, drop the order values,
   and let the titles grow taller so a two-line label fits. The pill
   radius is left alone; a tall pill matches the desktop treatment.
   ------------------------------------------------------------------ */

@media (max-width: 767px) {

  .elementor-element-2534e5e .e-n-tabs {
    flex-direction: column !important;
    gap: 0 !important;
  }

  .elementor-element-2534e5e .e-n-tabs-heading {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 8px !important;
    order: 0 !important;
    width: 100% !important;
    margin-bottom: 16px !important;
  }

  .elementor-element-2534e5e .e-n-tab-title {
    order: 0 !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 64px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .elementor-element-2534e5e .e-n-tab-title-text {
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.25 !important;
  }

  .elementor-element-2534e5e .e-n-tabs-content {
    order: 1 !important;
    width: 100% !important;
  }

  .elementor-element-2534e5e .e-n-tabs-content > .e-con {
    order: 0 !important;
  }

  .elementor-element-2534e5e .e-n-tabs-content > .e-con:not(.e-active) {
    display: none !important;
  }
}