/* ─────────────────────────────────────────────
   Hotel Guest Laundry — Global CSS
   Layout grids handled by Bootstrap 5 (row/col-*)
   This file: design tokens + component styles only
   ───────────────────────────────────────────── */

:root {
    /* ── Brand palette — navy + gold rebrand.
       Primary (navy)  #0B2743 : dark sections, headings, body text (~13:1 on white).
       Secondary (gold) #DBA530 : CTAs, accents, borders, eyebrows.
       Gold-on-white is low-contrast, so text links use navy with a gold hover;
       CTA buttons use gold backgrounds with navy text (~6:1). ── */
    --navy:          #0B2743; /* Primary — dark section background / ink */
    --navy-darker:   #071A30; /* Deeper navy — trust marquee, deepest accents */
    --navy-grad-a:   #123A5C; /* Gradient CTA banner start */
    --navy-grad-b:   #06182C; /* Gradient CTA banner end */
    --cream:         #FBFAF6; /* Primary light section background (warm ivory) */
    --cream-alt:     #F5F0E6; /* Alternate light section background (warm sand) */
    --coral:         #DBA530; /* Secondary — CTA / accent / eyebrow / border (gold) */
    --coral-light:   #E7BD5C; /* Lighter gold — hovers, accents on dark backgrounds */
    --coral-dark:    #BD8A1E; /* Deeper gold — CTA hover */
    --gold-ink:      #8C6B12; /* Readable deep gold for text/prices on light (~4.6:1) */
    --ink:           #0B2743; /* Heading / body text on light backgrounds (navy) */
    --cream-text:    #FFFFFF; /* Body text on dark backgrounds */
    --cream-text-2:  #F5F0E6; /* Alt light text on dark backgrounds */
    --muted-1:       #4A5568; /* Body copy on light backgrounds */
    --muted-2:       #A0AEC0; /* Muted text on dark backgrounds */
    --muted-3:       #69727D; /* Secondary muted text */
    --muted-4:       #9AA7B2; /* Tertiary muted text on dark backgrounds */
    --border:        rgba(219,165,48,.32); /* Gold-tinted structural border */
    --border-dark:   rgba(219,165,48,.28); /* Gold-tinted border on dark backgrounds */
    --white:         #FFFFFF;
    --radius:        8px;
    --radius-lg:     14px;
    /* Cormorant Garamond (serif) — hero H1 + section headings.
       Hanken Grotesk (sans, open-source HK Grotesk) — body/buttons/UI. */
    --font-serif:    'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-sans:     'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* One consistent container width sitewide — overrides Bootstrap's own
   per-breakpoint max-width (1140px at xl, 1320px at xxl) so every page's
   .container is capped at the same size, instead of each section using a
   different ad-hoc max-width. */
.container { max-width: 1240px; }

/* scroll-padding-top clears the 76px sticky navbar so in-page #anchor
   links (Artwork Approval, Events & Functions, Onboarding, Hotel
   Partnerships, Staff Uniforms, Partner Hotel) don't land with their
   target heading hidden underneath it. */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

/* Bootstrap 5 has no global image guard — its .img-fluid is opt-in — so any
   <img> without its own width rule (editor-inserted content, featured images,
   future markup) can push the page wider than the viewport on a phone. This is
   the standard safety net. SVGs are deliberately excluded: hgl_icon() sizes
   them explicitly via .hgl-icon, and capping those would shrink icons inside
   narrow flex rows. */
img, video, iframe { max-width: 100%; }
img, video { height: auto; }

body {
    font-family: var(--font-sans);
    background: var(--cream);
    color: var(--ink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

/* Text links use navy — gold is too low-contrast for small text on light;
   gold is reserved for hovers, CTAs and accents. */
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--coral-dark); }
/* ...but navy links are invisible on the navy hero/banner grounds, so inline
   links there flip to light gold. Buttons keep their own styling. */
.page-hero-dark a:not(.btn-primary):not(.btn-outline),
.cta-banner a:not(.btn-primary):not(.btn-outline) { color: var(--coral-light); }
.page-hero-dark a:not(.btn-primary):not(.btn-outline):hover,
.cta-banner a:not(.btn-primary):not(.btn-outline):hover { color: var(--cream-text); }
::selection { background: var(--coral); color: var(--navy); }

/* ── ACCESSIBILITY: visible keyboard focus on every interactive element ── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2.5px solid var(--coral-light); outline-offset: 2px; border-radius: 4px;
}
.page-hero-dark a:focus-visible, .page-hero-dark button:focus-visible {
    outline-color: var(--coral);
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── Sticky footer: main.site-content fills all space between the header
   and footer (min-height: 100vh minus header/footer height) so the footer
   never rides up on pages with little content. ── */
main.site-content { flex: 1 0 auto; }

/* ── TYPOGRAPHY HELPERS ── */
.eyebrow {
    font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--coral-light); font-weight: 600; margin-bottom: 0;
}
.eyebrow--on-light { color: #8C6B12; } /* deep gold — readable on light (~4.6:1) */

.section-hd { max-width: 640px; margin: 0 auto 3rem; text-align: center; }
.section-hd--left { max-width: none; margin: 0 0 2.5rem; text-align: left; }
.section-hd h2 {
    font-family: var(--font-serif); font-weight: 600; letter-spacing: -.4px;
    font-size: clamp(30px, 3.8vw, 48px); line-height: 1.05; margin: 14px 0 0; color: var(--ink);
}
.section-hd p { font-size: 16.5px; line-height: 1.6; color: var(--muted-1); margin: 14px 0 0; }

h1, h2, h3 { font-family: var(--font-serif); color: var(--ink); }

/* ── SECTIONS ── */
.section { padding: 6.5rem 0; }
.section--sm { padding: 4.5rem 0; }
.section--alt { background: var(--cream-alt); }

/* ── BUTTONS ── */
.btn-primary, .btn-outline {
    font-family: var(--font-sans); font-size: 16px; font-weight: 600;
    padding: 15px 30px; border-radius: 100px; border: none;
    cursor: pointer; transition: background .25s, transform .25s, border-color .25s;
    text-decoration: none; display: inline-block;
}
.btn-primary {
    background: linear-gradient(180deg, #B9850F 0%, #D19E1D 25%, #FFD86E 65%, #E3A812 100%);; color: var(--navy);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.35), 0 8px 20px rgba(209,158,29,.25);;
}
.btn-primary:hover { color: var(--navy) !important; transform: translateY(-2px); box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 12px 28px rgba(209,158,29,.35); color: var(--navy) !important; }

.btn-outline {
    background: transparent; color: var(--cream-text);
    border: 1.5px solid rgba(255,255,255,.28);
}
.btn-outline:hover { border-color: var(--cream-text); background: rgba(255,255,255,.05); color: var(--cream-text); }

.btn-outline--on-light { color: var(--ink); border-color: rgba(11,39,67,.2); }
.btn-outline--on-light:hover { border-color: var(--ink); background: rgba(11,39,67,.04); color: var(--ink); }

/* ── HERO (dark, used on most inner pages) ── */
/* Gradient rather than flat navy: a warm gold bloom off the top-right over a
   navy ramp, matching .suburb-hero so every hero on the site reads as one
   family. On .has-bg heroes the inline background-image wins the image layer,
   so those keep their photo — this gradient is what shows while the photo
   loads, and is the full treatment on the heroes that have no photo. */
.page-hero-dark {
    position: relative;
    background:
        radial-gradient(1000px 500px at 84% -10%, rgba(219,165,48,.30), transparent 62%),
        linear-gradient(158deg, #0B2743, #0E3253 54%, #0A2340);
    padding: 100px 20px; text-align: center; box-sizing: border-box;
}

/* ── Background elements for heroes with no photo ──
   Two decorative layers so the band reads as lit rather than as a flat colour
   block: a fine grid, masked so it fades out instead of tiling edge to edge,
   and a pair of soft light sources low in the frame to balance the gold bloom
   coming from the top right.

   Both are painted inside inset:0 with no negative offsets, so the section
   needs no overflow:hidden — which matters, because the Home hero lives in
   this same class and its .hgl-hero-media::before frame deliberately sits
   18px outside its column. Clipping would have quietly broken that detail.

   Photo heroes (.has-bg) are excluded: they already carry an image and a
   scrim, and a grid on top of photography just reads as noise. */
.page-hero-dark:not(.has-bg)::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(700px 400px at 80% 14%, #000, transparent 72%);
    mask-image: radial-gradient(700px 400px at 80% 14%, #000, transparent 72%);
}
.page-hero-dark:not(.has-bg)::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(520px 380px at 4% 112%, rgba(219,165,48,.15), transparent 70%),
        radial-gradient(460px 320px at 100% 100%, rgba(255,255,255,.05), transparent 72%);
}
/* The decorative layers are positioned, so the content needs its own stacking
   context to sit above them. */
.page-hero-dark > .container { position: relative; z-index: 1; }

.page-hero-dark .hero-inner { max-width: 900px; margin: 0 auto; }
/* Photo hero variant — background photo set inline per page via style="",
   with a navy scrim so the existing cream text stays readable over any image. */
.page-hero-dark.has-bg {
    background-size: cover; background-position: center; position: relative;
}
.page-hero-dark.has-bg::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11,39,67,.86), rgba(11,39,67,.74) 45%, rgba(11,39,67,.9));
}
/* Promote the whole .container rather than just .hero-inner/.stat-strip —
   the Home hero uses its own .row/.col-lg-7 layout instead of .hero-inner,
   so scoping only to those two classes left its text painting underneath
   the absolutely-positioned scrim (position:static content stacks below
   positioned siblings regardless of DOM order). */
.page-hero-dark.has-bg > .container { position: relative; z-index: 1; }

/* ── LEAD-CAPTURE HERO (Become a Partner) ──
   Split hero: copy left, form card right, so the form is above the fold on
   desktop. Columns come from Bootstrap (.row + .col-md-6) — this block only
   handles the typography and the form card. The hero overrides
   .page-hero-dark's centred text since the layout is two columns, and drops
   the section's vertical padding because the form card carries the height. */
.hero-split { padding: 72px 20px 80px; text-align: left; }

/* ── PARTNER LANDING: two-column conversion layout ──
   The form is the only conversion point on the page, so it sticks to the
   viewport as the proof sections scroll past on the left. Sticky needs a
   defined offset and a parent that doesn't clip — the row is plain Bootstrap,
   so nothing here sets overflow. */
/* 40% copy / 60% form — fr units rather than percentages so the 60px gap is
   subtracted first and the two columns can't overflow the container. */
.lp-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 60px; align-items: start; }
.lp-form-col { position: sticky; top: 96px; }

/* Trust strip under the headline — the three objections a GM raises first. */
.lp-trust { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.lp-trust li {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 100px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(219,165,48,.3);
    font-size: 13px; font-weight: 600; color: var(--cream-text); white-space: nowrap;
}
.lp-trust .hgl-icon { width: 15px; height: 15px; color: var(--coral-light); flex: none; }

/* Objection-handling list — used stand-alone (single column) and as a
   full-width 2x2 grid via the --grid modifier on Become a Partner. */
.lp-objections { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.lp-objections--grid { grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 980px; margin: 0 auto; }
/* Each card splits the spoken objection (quote styling, serif italic) from
   the honest answer (labelled, muted body copy) so the two read as distinct
   moves in a conversation rather than a bolded lead-in plus a run-on line. */
.lp-objection {
    background: var(--white); border: 1px solid rgba(11,39,67,.08);
    border-radius: 14px; overflow: hidden; transition: box-shadow .2s ease, transform .2s ease;
}
.lp-objection:hover { box-shadow: 0 20px 40px -28px rgba(14,30,43,.35); transform: translateY(-3px); }
.lp-objection-quote { position: relative; padding: 24px 24px 18px; border-bottom: 1px dashed rgba(11,39,67,.12); }
.lp-objection-mark {
    display: block; font-family: var(--font-serif); font-size: 48px; line-height: .5;
    color: var(--coral); opacity: .55; margin-bottom: 6px;
}
.lp-objection-quote p { font-family: var(--font-serif); font-style: italic; font-size: 18.5px; line-height: 1.35; color: var(--ink); margin: 0; }
.lp-objection-answer { padding: 18px 24px 24px; }
.lp-objection-answer-label {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--coral-dark); margin-bottom: 8px;
}
.lp-objection-answer p { font-size: 14.5px; line-height: 1.6; color: var(--muted-1); margin: 0; }

@media (max-width: 767.98px) {
    .lp-objections--grid { grid-template-columns: 1fr; }
}

@media (max-width: 991.98px) {
    /* Stack, and drop sticky — a sticky form above scrolling content on a
       phone would pin the form over the very proof it's meant to support. */
    .lp-grid { grid-template-columns: 1fr; gap: 40px; }
    .lp-form-col { position: static; top: auto; }
}

/* Horizontal process stepper — four badges joined by a thin coral rule,
   the same marker style as .hiw-steps' vertical timeline, just rotated to
   read left-to-right for a section that now spans the full page width. */
.lp-process {
    list-style: none; margin: 0; padding: 0; position: relative;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.lp-process::before {
    content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 25px;
    height: 1px; background: var(--coral); opacity: .45;
}
.lp-process-step { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.lp-process-step .step-badge { margin-bottom: 20px; }
.lp-process-step h3 { font-size: 19px; margin: 0; }
.lp-process-step p { font-size: 14.5px; line-height: 1.6; color: var(--muted-1); margin: 8px 0 0; max-width: 240px; }

@media (max-width: 767.98px) {
    .lp-process { grid-template-columns: 1fr; gap: 32px; text-align: left; }
    .lp-process::before { display: none; }
    .lp-process-step { flex-direction: row; align-items: flex-start; gap: 20px; text-align: left; }
    .lp-process-step .step-badge { margin-bottom: 0; flex: none; }
    .lp-process-step p { max-width: none; }
}
.hero-split h1 { font-size: clamp(32px, 4vw, 46px); line-height: 1.12; margin: 16px 0 0; }
/* No max-width. The column is already half the container, so a reading-width
   cap on top of that left a dead strip down the right of every lead line. */
.hero-split .lead { margin: 20px 0 0; text-align: left; }
/* Proof points under the hero copy. */
.hero-points { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; }
.hero-points li {
    display: flex; align-items: flex-start; gap: 12px;
    font-size: 15.5px; line-height: 1.55; color: var(--cream-text);
}
.hero-points .hgl-icon { width: 20px; height: 20px; color: var(--coral); flex: none; margin-top: 2px; }
/* The form card sits on the navy ground, so it gets a warmer edge than the
   standard .form-card and a deeper shadow to lift it off the photo. */
.hero-form-card {
    background: var(--white); border-radius: var(--radius-lg);
    border: 1px solid rgba(219,165,48,.35);
    box-shadow: 0 44px 90px -42px rgba(0,0,0,.7);
    padding: 32px 30px;
}
.hero-form-card .hero-form-title { font-size: 22px; line-height: 1.25; margin: 0; color: var(--ink); }
.hero-form-card .hero-form-sub { font-size: 14.5px; line-height: 1.6; color: var(--muted-1); margin: 8px 0 18px; }
.hero-form-card .wpcf7-form-control-wrap { display: block; }
/* Tighter vertical rhythm than a standalone form page — this card sits in the
   hero, so its height is what pushes the fold down. Scoped to .hero-form-card
   so the contact page and booking forms keep their roomier spacing. */
.hero-form-card .form-section { margin-bottom: 22px; }
.hero-form-card .form-section:last-of-type { margin-bottom: 12px; }
.hero-form-card .form-section-title { font-size: 18px; margin-bottom: 12px; padding-bottom: 9px; }
.hero-form-card .form-group { margin-bottom: 14px; }
.hero-form-card .form-group label { font-size: 13px; margin-bottom: 5px; }
/* 16px, not 15px: iOS Safari auto-zooms the whole page when a focused field is
   under 16px, which on this hero form would jump the visitor mid-signup. The
   height saving comes from the tighter padding instead. */
.hero-form-card .form-group input,
.hero-form-card .form-group select { min-height: 42px; padding: 10px 13px; font-size: 16px; }
.hero-form-card .form-group textarea { min-height: 84px; padding: 10px 13px; font-size: 16px; }
.hero-form-card .wpcf7-list-item > label { min-height: 42px; padding: 8px 14px; font-size: 14.5px; }

/* Bootstrap stacks the two col-md-6 columns below 768px, so the only work left
   here is easing the padding. */
@media (max-width: 767.98px) {
    .hero-split { padding: 60px 20px 64px; }
    .hero-form-card { padding: 26px 22px; }
}

/* ── HOME HERO TRUST CARD — fills the empty right column beside the hero
   copy (was col-lg-7 with no sibling, leaving unbalanced whitespace on
   large screens) with a glass-panel rating/quote highlight. ── */
/* The Home hero photo now lives in the right column as a real <img> (the
   section itself is flat navy — no background image). Treated as the hero's
   focal point: an offset gold frame sits behind the photo, which is lifted off
   the navy with a deep shadow and edged with a gold hairline. */
.hgl-hero-media { position: relative; margin: 0; }
.hgl-hero-media::before {
    content: ''; position: absolute; z-index: 0;
    inset: 18px -18px -18px 18px;
    border: 1px solid rgba(219,165,48,.55); border-radius: 22px;
}
.hgl-hero-media img {
    position: relative; z-index: 1;
    display: block; width: 100%; height: auto;
    aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: 20px;
    border: 1px solid rgba(219,165,48,.28);
    box-shadow: 0 44px 90px -42px rgba(0,0,0,.78);
}
@media (max-width: 991.98px) {
    /* Pull the offset frame in so it can't push the layout sideways on mobile. */
    .hgl-hero-media { margin-top: 44px; }
    .hgl-hero-media::before { inset: 12px -12px -12px 12px; }
}
/* Every inner-page hero gets the same fixed height regardless of how long
   its heading/lead text is, so pages don't visually jump in hero size —
   the Home hero (the only one with the u-ta-left override) keeps its own
   natural, content-driven height instead. */
.page-hero-dark:not(.u-ta-left) {
    min-height: 480px; display: flex; flex-direction: column; justify-content: center;
}
.page-hero-dark h1 {
    font-weight: 600; font-size: 45px; line-height: 1.03;
    letter-spacing: -.5px; margin: 18px 0 0; color: var(--cream-text);
}
.page-hero-dark p.lead { font-size: 19px; line-height: 1.6; color: var(--cream-text); max-width: 640px; margin: 0 auto; }
/* Home hero lead: drop all margin (the utility/Bootstrap margin-top classes
   use !important, so this override does too). Front page only. */
body.home .page-hero-dark p.lead { margin: 0 !important; }
.hero-badge-row { display: flex; flex-wrap: wrap; gap: 26px; justify-content: center; margin: 34px 0 0; }
.hero-badge-row span { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 500; color: #FFFFFF; }
.hero-badge-row span::before { content: '✓'; color: var(--coral); font-size: 17px; }

/* ── STAT STRIP ── */
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--navy-darker); border-radius: 20px; overflow: hidden; }
.stat-strip .stat-tile { padding: 34px 26px; border-right: 1px solid var(--border-dark); }
.stat-strip .stat-tile:last-child { border-right: none; }
.stat-tile .stat-val { font-family: var(--font-serif); font-weight: 700; font-size: 30px; line-height: 1; color: var(--coral); }
.stat-tile .stat-val .hgl-icon { width: 26px; height: 26px; vertical-align: 2px; margin-left: 3px; }
.stat-tile .stat-label { font-size: 14px; color: var(--cream-text); margin-top: 8px; }

/* ── PARTNER LOGO SLOT (trust marquee) — placeholder box for each partner
   hotel's real logo; swap the hgl_icon('building') + name for an <img> once
   artwork is supplied, no markup restructuring needed. ── */
/* Partner logo row. Real logo artwork now, so the dashed placeholder frame and
   the text label underneath are gone — the hotel name lives in each image's alt
   text instead. Logos are supplied as white/gold artwork for the navy ground. */
.hgl-logo-row {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 30px 46px;
}
/* Logos are direct children of the row and render at their natural size; the
   row's flex gap does all the spacing. */
.hgl-logo-img {
    display: block; max-width: 100%; width: auto; height: auto;
    opacity: .85; transition: opacity .2s;
}
.hgl-logo-img:hover { opacity: 1; }

@media (max-width: 767px) {
    .hgl-logo-row { gap: 24px 30px; }
}

@media (max-width: 767px) {
    .stat-strip { grid-template-columns: repeat(2, 1fr); }
    .stat-strip .stat-tile:nth-child(2) { border-right: none; }
    .stat-tile .stat-val { font-size: 25px; }
}

/* ── HOW IT WORKS: numbered timeline + bento photo cluster ──
   Steps sit in the left column as a vertical timeline: navy circular badges
   joined by a thin gold rule drawn as a ::before on the <ol> (inset so it
   starts and ends at the first/last badge centre). Photos fill the right. */
.hiw-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; align-items: start; }

.hiw-steps { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: 40px; }
.hiw-steps::before {
    content: ''; position: absolute; left: 33px; top: 33px; bottom: 33px;
    width: 1px; background: var(--coral); opacity: .45;
}
.hiw-step { position: relative; display: grid; grid-template-columns: 66px 1fr; gap: 26px; align-items: start; }

/* Shared step marker used by every numbered section sitewide (How It Works,
   Home's four steps, Events, Staff Uniforms, and the interactive steppers) —
   navy disc with a gold serif numeral. --sm is for steps inside grid cards. */
.step-badge {
    position: relative; z-index: 1; flex: none;
    width: 66px; height: 66px; border-radius: 50%;
    background: var(--navy); color: var(--coral-light);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif); font-weight: 700; font-size: 26px; letter-spacing: .02em;
}
.step-badge--sm { width: 50px; height: 50px; font-size: 19px; }
.hiw-step-body h3 { font-size: clamp(22px, 2.1vw, 28px); line-height: 1.2; margin: 8px 0 0; }
.hiw-step-body p { margin: 12px 0 0; font-size: 16px; line-height: 1.7; color: var(--muted-1); }

.hiw-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: sticky; top: 110px; align-self: start; }
.hiw-bento-item { margin: 0; overflow: hidden; border-radius: var(--radius-lg); }
.hiw-bento-item--lg { grid-column: 1 / -1; }
.hiw-bento-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.hiw-bento-item--lg img { aspect-ratio: 4 / 2; }
.hiw-bento-item:not(.hiw-bento-item--lg) img { aspect-ratio: 1 / 1; }
.hiw-bento-item:hover img { transform: scale(1.04); }

@media (max-width: 991.98px) {
    .hiw-layout { grid-template-columns: 1fr; gap: 40px; }
    /* Photos lead on narrow screens so the section doesn't open with a wall of text. */
    .hiw-bento { order: -1; position: static; }
}
@media (max-width: 575.98px) {
    .hiw-step { grid-template-columns: 52px 1fr; gap: 18px; }
    .hiw-step .step-badge { width: 52px; height: 52px; font-size: 21px; }
    .step-badge--sm { width: 44px; height: 44px; font-size: 17px; }
    .hiw-steps::before { left: 26px; top: 26px; bottom: 26px; }
}

/* ══════════════════════════════════════════════════════════
   SUBURB LANDING PAGES (single-partner_hotel.php)
   Built to the supplied HGL suburb design, re-expressed in this theme's
   tokens: their --gold/--gold-dark/--warm/--slate map to --coral/--gold-ink/
   --cream-alt/--muted-1 so the pages sit inside the existing design system
   rather than shipping a second one.
   ══════════════════════════════════════════════════════════ */

/* Hero: copy left, fact panel right. The gold radial glow and faint grid are
   painted with gradients — no image request, and the grid is masked so it
   fades out rather than tiling edge to edge. */
.suburb-hero {
    position: relative; overflow: hidden; color: var(--cream-text);
    background:
        radial-gradient(1000px 500px at 84% -10%, rgba(219,165,48,.30), transparent 62%),
        linear-gradient(158deg, #0B2743, #0E3253 54%, #0A2340);
}
.suburb-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(700px 400px at 80% 14%, #000, transparent 72%);
    mask-image: radial-gradient(700px 400px at 80% 14%, #000, transparent 72%);
}
.suburb-hero-in {
    position: relative; z-index: 2; padding: 88px 0 76px;
    display: grid; grid-template-columns: 1.15fr .85fr; gap: 66px; align-items: center;
}
.suburb-hero h1 {
    font-size: clamp(36px, 4.6vw, 55px); letter-spacing: -1px; line-height: 1.1;
    margin: 0 0 20px; color: var(--cream-text);
}
.suburb-hero p { font-size: 18.5px; line-height: 1.66; color: rgba(255,255,255,.8); max-width: 56ch; margin: 0 0 1.1em; }
.suburb-hero-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.suburb-hero-note { margin-top: 24px; padding: 20px 0; font-size: 13.5px; color: rgba(255,255,255,.55); }

/* Glass fact panel — definition list, so the stat labels and values stay
   semantically paired. */
.suburb-fact {
    background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.13);
    border-radius: 22px; padding: 30px 30px 26px; backdrop-filter: blur(8px);
}
.suburb-fact-title {
    font-family: var(--font-sans); font-size: 13px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--coral-light);
    margin: 0 0 20px;
}
.suburb-fact dl { margin: 0; }
.suburb-fact-row {
    display: flex; justify-content: space-between; gap: 18px; padding: 13px 0;
    border-bottom: 1px solid rgba(255,255,255,.1); font-size: 14.5px;
}
.suburb-fact-row:last-child { border-bottom: 0; padding-bottom: 0; }
.suburb-fact-row dt { color: rgba(255,255,255,.58); }
.suburb-fact-row dd { margin: 0; font-weight: 600; color: #fff; text-align: right; }

@media (max-width: 940px) {
    .suburb-hero-in { grid-template-columns: 1fr; gap: 40px; padding: 68px 0 58px; }
    .suburb-hero p { max-width: none; }
}

/* Long-form prose sections. */
.suburb-prose { max-width: 100%; }
.suburb-prose h2 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.14; margin: 14px 0 0; }
.suburb-prose p { margin: 18px 0 0; font-size: 17px; line-height: 1.75; color: var(--muted-1); }
.suburb-prose p strong { color: var(--ink); font-weight: 600; }
.suburb-prose a { color: var(--gold-ink); font-weight: 600; border-bottom: 1px solid var(--border); }
.suburb-prose a:hover { border-color: var(--gold-ink); }

/* Hotel list — auto-fill so long lists (Sydney CBD runs to 31) stay dense
   without ever dropping below a readable card width. */
.suburb-hotel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 12px; }
.suburb-hotel {
    display: flex; align-items: center; gap: 13px;
    background: var(--white); border: 1px solid rgba(11,39,67,.08); border-radius: 13px;
    padding: 15px 17px; font-size: 15px; font-weight: 500;
    box-shadow: 0 1px 2px rgba(11,39,67,.03);
    transition: border-color .25s, transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1);
}
.suburb-hotel:hover {
    border-color: var(--border); transform: translateY(-2px);
    box-shadow: 0 1px 2px rgba(11,39,67,.04), 0 8px 24px -12px rgba(11,39,67,.14);
}
.suburb-hotel-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.suburb-hotel-name { color: var(--ink); line-height: 1.3; }
.suburb-hotel-detail { display: block; font-size: 12px; font-weight: 500; color: var(--muted-3); margin-top: 1px; }

/* "Don't see your hotel?" band — full-bleed navy so the reassurance reads as
   its own beat between the hotel list and the process steps, not a footnote.
   The gold hairline on top carries over the accent the old left-bordered card
   had, and the soft radial keeps it in the same family as the hero and the
   closing CTA without being as tall or as loud as either. */
.suburb-notlisted {
    position: relative; overflow: hidden;
    padding: 52px 0; color: var(--cream-text);
    border-top: 2px solid var(--coral);
    background:
        radial-gradient(620px 300px at 12% 0%, rgba(219,165,48,.20), transparent 66%),
        linear-gradient(160deg, #0B2743, #0E3253);
}
.suburb-notlisted-in {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 26px; align-items: center;
}
.suburb-notlisted-icon {
    flex: none; display: grid; place-items: center;
    width: 54px; height: 54px; border-radius: 14px;
    background: rgba(219,165,48,.14); border: 1px solid rgba(219,165,48,.32);
}
.suburb-notlisted-icon .hgl-icon { width: 26px; height: 26px; color: var(--coral-light); }
.suburb-notlisted-body h3 {
    font-size: clamp(21px, 2.2vw, 27px); line-height: 1.2;
    margin: 0 0 8px; color: var(--cream-text);
}
.suburb-notlisted-body p {
    margin: 0; font-size: 15.5px; line-height: 1.7;
    color: rgba(255,255,255,.74); max-width: 78ch;
}
/* Inline "book a pickup" link inside the copy — underlined rather than
   colour-only, since gold on navy alone is a weak affordance. */
.suburb-notlisted-body a {
    color: var(--coral-light); font-weight: 600;
    text-decoration: underline; text-underline-offset: 3px;
}
.suburb-notlisted-body a:hover { color: #fff; }

@media (max-width: 900px) {
    .suburb-notlisted { padding: 40px 0; }
    .suburb-notlisted-in { grid-template-columns: auto minmax(0, 1fr); gap: 20px; }
    /* CTA drops to its own row, spanning under the icon and copy. */
    .suburb-notlisted-cta { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .suburb-notlisted-in { grid-template-columns: 1fr; }
    .suburb-notlisted-cta .btn-primary { display: block; text-align: center; }
}

/* Steps — numbered rail rather than cards, with a hairline joining them.
   The connector is hidden on the last step and on stacked layouts. */
.suburb-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.suburb-step { position: relative; padding-top: 30px; }
.suburb-step-num {
    position: absolute; top: 0; left: 0;
    font-family: var(--font-serif); font-size: 15px; font-weight: 700;
    color: var(--gold-ink); letter-spacing: .06em;
}
.suburb-step::after {
    content: ''; position: absolute; top: 9px; left: 34px; right: -13px;
    height: 1px; background: rgba(11,39,67,.12);
}
.suburb-step:last-child::after { display: none; }
.suburb-step h3 { font-size: 20px; margin: 0 0 9px; }
.suburb-step p { font-size: 14.5px; color: var(--muted-1); margin: 0; }
@media (max-width: 900px) {
    .suburb-steps { grid-template-columns: 1fr 1fr; }
    .suburb-step::after { display: none; }
}
@media (max-width: 520px) { .suburb-steps { grid-template-columns: 1fr; } }

/* Service cards — the "from" price is the focal point, so it's set in the
   display serif at card scale rather than sitting in a table cell. */
.suburb-svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.suburb-svc {
    display: flex; flex-direction: column;
    background: var(--white); border: 1px solid rgba(11,39,67,.08);
    border-radius: var(--radius-lg); padding: 30px 28px;
    box-shadow: 0 1px 2px rgba(11,39,67,.04), 0 8px 24px -12px rgba(11,39,67,.14);
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1), border-color .3s;
}
.suburb-svc:hover {
    transform: translateY(-4px); border-color: var(--border);
    box-shadow: 0 2px 4px rgba(11,39,67,.05), 0 24px 56px -20px rgba(11,39,67,.24);
}
.suburb-svc h3 { font-size: 22px; margin: 0 0 10px; }
.suburb-svc p { font-size: 14.5px; color: var(--muted-1); margin: 0 0 16px; flex: 1; }
.suburb-svc-price {
    font-family: var(--font-serif); font-size: 26px; font-weight: 600;
    color: var(--gold-ink); letter-spacing: -.5px; line-height: 1.1;
}



/* ── EXPLORE ROWS (Home "Explore Hotel Guest Laundry") ──
   Alternating photo/text rows: photo leads on odd rows, text leads on even
   rows via --flip. Each row is a single <a>, so its inner elements are
   inline <span>s promoted to blocks here (an <a> can't wrap <div>s validly). */
.explore-rows { display: flex; flex-direction: column; gap: 30px; }
.explore-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center;
    text-decoration: none; color: inherit;
}
.explore-media { display: block; overflow: hidden; border-radius: var(--radius-lg); }
.explore-media img {
    display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover;
    transition: transform .5s ease;
}
.explore-row:hover .explore-media img { transform: scale(1.04); }
.explore-row--flip .explore-media { order: 2; }
.explore-body { display: flex; flex-direction: column; align-items: flex-start; }
.explore-body .eyebrow { display: block; margin-bottom: 10px; }
.explore-body h3 { font-size: clamp(24px, 2.4vw, 31px); line-height: 1.15; margin: 0; }
.explore-body p { margin: 14px 0 0; font-size: 16px; line-height: 1.65; color: var(--muted-1); max-width: 46ch; }
.explore-link { display: inline-block; margin-top: 18px; font-weight: 600; font-size: 15px; color: var(--gold-ink); transition: color .2s; }
.explore-row:hover .explore-link { color: var(--coral-dark); }
.explore-row:focus-visible { outline: 2.5px solid var(--coral-light); outline-offset: 6px; border-radius: 4px; }

@media (max-width: 767.98px) {
    /* Stack with the photo always on top, regardless of flip order. */
    .explore-row, .explore-row--flip { grid-template-columns: 1fr; gap: 20px; }
    .explore-row--flip .explore-media { order: 0; }
    .explore-rows { gap: 44px; }
}

/* ── SUBURB PILLS (Regions we cover) ──
   Linked suburbs get gold-tinted, tappable pills; suburbs without a published
   page yet render as muted plain pills so the list has no dead links. */
.hgl-suburb-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hgl-suburb-pill {
    display: inline-flex; align-items: center; min-height: 34px;
    padding: 6px 14px; border-radius: 100px;
    font-size: 13.5px; font-weight: 600; line-height: 1.2;
    border: 1px solid var(--border); color: var(--navy);
    background: var(--white); text-decoration: none;
    transition: background .2s, border-color .2s, color .2s;
}
a.hgl-suburb-pill:hover, a.hgl-suburb-pill:focus-visible {
    background: var(--coral); border-color: var(--coral); color: var(--navy);
}
.hgl-suburb-pill.is-plain { color: var(--muted-1); font-weight: 500; background: transparent; }

/* .is-plain's muted-grey text is meant for a light card background — inside
   a dark .cta-banner it drops to near-invisible, so give it the same
   light-on-dark treatment as .lp-trust's pills instead. */
.cta-banner .hgl-suburb-pill.is-plain {
    color: var(--cream-text); border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.06);
}

/* ── FEATURE / BENEFIT CARDS ── */
.feature-card {
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 34px 30px; box-shadow: 0 20px 50px -38px rgba(14,30,43,.4);
    transition: transform .3s, box-shadow .3s;
    /* min-height: 270px; */
}
.services .feature-card {
    min-height: 0px !important;
}

/* Staff Uniforms: give the six benefit cards a common floor so the rows sit
   level regardless of copy length. Scoped to that page — min-height can't
   cause overflow, so it applies at every breakpoint. */
.page-id-16 .feature-card { min-height: 270px; }

.mauto {
    margin: auto;
}

.feature-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -34px rgba(14,30,43,.5); }
.feature-card .feature-icon { margin-bottom: 16px; }
.feature-card .feature-icon .hgl-icon { width: 30px; height: 30px; color: var(--coral); }

/* ── ICON SYSTEM (replaces emoji glyphs — see hgl_icon() in functions.php) ── */
.hgl-icon { width: 22px; height: 22px; display: inline-block; vertical-align: -4px; flex: none; }
.hgl-icon-sm { width: 16px; height: 16px; vertical-align: -2px; }

/* Staff Uniforms — "Across the property" department icons: bigger, gold, bold label. */
.hgl-dept-icon { display: inline-flex; }
.hgl-dept-icon .hgl-icon { width: 45px; height: 45px; color: var(--coral); vertical-align: 0; }
.hgl-dept-label { font-weight: 700; }
.feature-card h3 { font-weight: 600; font-size: 22px; margin-bottom: 10px; }
.feature-card p { font-size: 15.5px; line-height: 1.6; color: var(--muted-1); }

/* Pricing-tier cards (Hotel Partnerships "Volume partner pricing") — pins the
   Enquire button to a consistent bottom position across cards whose
   descriptions run to different lengths, now that w-100 makes them equal height. */
.feature-card--pricing { position: relative; padding-bottom: 90px; }
.feature-card--pricing .btn-outline { position: absolute; left: 30px; bottom: 30px; }

/* ── TESTIMONIAL CARDS ── */
.testimonial-card {
    background: var(--white); border-radius: var(--radius-lg); padding: 36px 32px;
    box-shadow: 0 20px 50px -38px rgba(14,30,43,.4); display: flex; flex-direction: column; height: 100%;
}
.testimonial-card .stars { display: inline-flex; gap: 2px; color: var(--coral); margin-bottom: 20px; }
.testimonial-card .stars .hgl-icon { width: 17px; height: 17px; }
.testimonial-card blockquote {
    font-family: var(--font-serif); font-size: 21px; line-height: 1.45; color: #2B2720;
    font-style: italic; flex: 1;
}
.testimonial-card .author-row {
    display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 22px;
    border-top: 1px solid var(--border);
}
.testimonial-card .avatar {
    width: 46px; height: 46px; border-radius: 50%; background: var(--navy-darker); color: var(--coral);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex: none;
}
.testimonial-card .author-name { font-weight: 700; font-size: 15px; color: var(--ink); }
.testimonial-card .author-sub { font-size: 13px; color: var(--muted-3); }

/* ── TESTIMONIALS PAGE: "We got you covered" recap row ── */
.hgl-covered-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 44px; }
.hgl-covered-step { max-width: 170px; text-align: center; }
.hgl-covered-step-icon {
    width: 62px; height: 62px; border-radius: 50%; border: 1.5px solid var(--border);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.hgl-covered-step-icon .hgl-icon { width: 24px; height: 24px; color: var(--coral); }
.hgl-covered-step h3 { font-size: 16px; margin: 0 0 4px; }
.hgl-covered-step p { font-size: 13.5px; line-height: 1.5; color: var(--muted-1); margin: 0; }

/* ── TESTIMONIALS PAGE: featured quote (copy + rotating card) ── */
.hgl-featured-quote {
    max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: center;
}
.hgl-featured-quote-copy h3, .hgl-featured-quote-copy .eyebrow { margin: 0; }
.hgl-featured-quote-copy p { font-size: 15px; }
.hgl-featured-quote-card {
    background: var(--white); border-radius: 20px; padding: 40px 44px; position: relative;
    box-shadow: 0 24px 60px -42px rgba(14,30,43,.45); min-height: 190px;
}
.hgl-featured-quote-item { display: none; }
.hgl-featured-quote-item.is-active { display: block; animation: hgl-reveal .5s ease both; }
.hgl-featured-quote-item blockquote {
    font-family: var(--font-serif); font-style: italic; font-size: 22px; line-height: 1.5; color: var(--ink); margin: 0;
}
.hgl-featured-quote-author { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.hgl-featured-quote-author .avatar {
    width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: var(--coral);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: none;
}
.hgl-featured-quote-author .author-name { display: block; font-weight: 700; font-size: 14.5px; color: var(--ink); }
.hgl-featured-quote-author .author-sub { display: block; font-size: 13px; color: var(--muted-3); }
.hgl-featured-quote-dots { display: flex; gap: 8px; margin-top: 26px; }
.hgl-featured-quote-dot {
    width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(11,39,67,.18); padding: 0; cursor: pointer; transition: background .2s, transform .2s;
}
.hgl-featured-quote-dot:hover { background: rgba(11,39,67,.32); }
.hgl-featured-quote-dot.is-active { background: var(--coral); transform: scale(1.2); }

@media (max-width: 767.98px) {
    .hgl-featured-quote { grid-template-columns: 1fr; text-align: center; gap: 28px; }
    .hgl-featured-quote-author { justify-content: center; }
    .hgl-featured-quote-dots { justify-content: center; }
}

/* ── TESTIMONIALS PAGE: labelled variant of the homepage's logo row —
   adds a visible caption under each logo instead of relying on alt text alone. ── */
.hgl-logo-row--labelled .hgl-logo-item { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hgl-logo-row--labelled .hgl-logo-label {
    font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; color: var(--muted-2);
}

/* ── CARDS (generic white card) ── */
.card-white {
    background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--border);
    box-shadow: 0 20px 50px -38px rgba(14,30,43,.4);
    transition: transform .3s, box-shadow .3s;
}
.card-white:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -34px rgba(14,30,43,.5); }

/* Onboarding — "The full partnership journey" numbered grid cards. */
.hgl-journey-num { display: block; font-family: var(--font-serif); font-weight: 700; font-size: 28px; color: var(--coral); margin-bottom: 10px; }
.hgl-journey-card h3 { font-size: 18px; margin: 0 0 6px; }
.hgl-journey-card p { margin: 0; }

/* ── CTA BANNER (dark gradient, closing sections) ── */
.cta-banner {
    max-width: 1120px; margin: 0 auto; background: linear-gradient(140deg, var(--navy-grad-a), var(--navy-grad-b));
    border-radius: 28px; padding: 66px 60px; text-align: center; position: relative; overflow: hidden;
}
.cta-banner::before {
    content: ''; position: absolute; top: -80px; right: -60px; width: 320px; height: 320px;
    border-radius: 50%; background: radial-gradient(circle, rgba(219,165,48,.35), transparent 70%);
}
.cta-banner .cta-inner { position: relative; }
.cta-banner h2 { color: var(--cream-text-2); font-size: clamp(30px, 3.6vw, 46px); line-height: 1.06; letter-spacing: -.4px; max-width: 620px; }
.cta-banner p { font-size: 17px; color: rgba(243,243,243,.72); margin: 16px auto 0; width: 100%; }
/* Base rule so .btn-row works standalone (e.g. the onboarding wizard's
   finished-state buttons, outside any .cta-banner) — cta-banner just adds
   its own top margin on top of this. */
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cta-banner .btn-row { margin-top: 30px; }
/* Icon + heading + paragraph grid variant (currently just the "Don't want
   to count?" banner) — the base .cta-banner p rule above centers text for
   the default centered banners, which is wrong here; this resets it to sit
   flush against the heading above it instead. Scoped to .u-gtc-auto-1fr
   specifically so it doesn't touch the other left-aligned .cta-banner
   layouts elsewhere, which already set their own paragraph margins. */
.cta-banner .u-gtc-auto-1fr p { margin: 0; max-width: none; }

/* Onboarding "phase" cards (Hotel Partnerships page) — same base .cta-banner p
   rule was silently forcing 17px/16px-margin over these cards' own
   u-fs-n14px/u-mt-n8px utility classes; scoped to .phase-card so it doesn't
   touch other .cta-banner paragraphs. Each card has two <p> children: the
   "Phase N / Days X" heading, then the description — targeted separately via
   :first-of-type/:last-of-type so the heading keeps its own size and spacing. */
.cta-banner .phase-card { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); }
.cta-banner .phase-card p { font-size: 14px; margin: 8px 0 0; max-width: none; text-align: left; }

@media (max-width: 700px) {
    .cta-banner { padding: 48px 28px; }
}

/* Photo variant (currently just the Home "Become a partner hotel" banner) —
   background photo set inline per instance, layered under a dark gradient
   scrim within the same background-image value so the existing decorative
   ::before blob and text styling still work unchanged. */
.cta-banner.has-bg { background-size: cover; background-position: center; }

/* ── ACCORDION (FAQ / Terms) ── */
/* Wrapper used by the Services page's "Important terms" accordion. */
.hgl-accordion { padding: 20px; }

.accordion-item {
    background: var(--white); border-radius: 16px; border: 1px solid var(--border);
    overflow: hidden; box-shadow: 0 14px 40px -40px rgba(14,30,43,.4); margin-bottom: 12px;
}
/* Bootstrap (CDN) ships its own .accordion-item:first-of-type/:last-of-type
   corner-radius rules and :not(:first-of-type){border-top:0} for its accordion
   component — neutralize them so every item keeps the full 16px card look. */
.accordion-item:first-of-type,
.accordion-item:last-of-type { border-radius: 16px; }
.accordion-item:not(:first-of-type) { border-top: 1px solid var(--border); }
.accordion-q {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 22px 26px; background: none; border: none; cursor: pointer; text-align: left;
    font-family: inherit; font-weight: 700; font-size: 17px; color: var(--ink);
}
.accordion-icon {
    flex: none; width: 30px; height: 30px; border-radius: 50%; background: #F3EDE0; color: var(--gold-ink);
    font-size: 20px; line-height: 28px; text-align: center; transition: transform .25s, background .25s, color .25s;
}
.accordion-item.is-open .accordion-icon { transform: rotate(45deg); background: var(--coral); color: var(--navy); }
.accordion-a { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .3s ease, opacity .25s ease; }
.accordion-item.is-open .accordion-a { max-height: 600px; opacity: 1; }
.accordion-a p { padding: 0 26px 24px; font-size: 15.5px; line-height: 1.65; color: var(--muted-1); }

/* ── LEGAL DOCUMENT LAYOUT (Terms, Privacy Policy) ──
   Deliberately not an accordion: legal/compliance text should stay fully
   visible and printable, not collapsed behind a click. A jump-to-section
   list gives the same quick navigation an accordion would, without hiding
   any of the actual terms. */
.legal-toc { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 26px 30px; margin-bottom: 3rem; }
.legal-toc-label { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; margin: 0 0 14px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 28px; counter-reset: legal-toc; }
.legal-toc li { counter-increment: legal-toc; font-size: 14.5px; line-height: 1.5; }
.legal-toc li::before { content: counter(legal-toc, decimal-leading-zero) '. '; color: var(--gold-ink); font-weight: 700; }
.legal-toc a { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; }
.legal-toc a:hover, .legal-toc a:focus-visible { color: var(--coral-dark); border-bottom-color: currentColor; }

.legal-sections { display: flex; flex-direction: column; gap: 2.4rem; }
.legal-section { scroll-margin-top: 100px; padding-top: 2.4rem; border-top: 1px solid var(--border); }
.legal-section:first-child { padding-top: 0; border-top: none; }
.legal-section h3 { display: flex; align-items: baseline; gap: 14px; font-size: 21px; }
.legal-section-num { font-family: var(--font-serif); font-weight: 700; color: var(--coral); font-size: 25px; flex: none; }
.legal-section p { margin: 10px 0 0; color: var(--muted-1); line-height: 1.7; font-size: 15.5px; }

@media (max-width: 575.98px) {
    .legal-toc ol { grid-template-columns: 1fr; }
}

/* ── FILTER TABS (FAQ categories, blog categories) ── */
.filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 2.5rem; }
.filter-tab {
    padding: 12px 20px; min-height: 44px; border-radius: 100px; border: 1.5px solid var(--border);
    background: var(--white); color: var(--muted-1); font-size: 13.5px; font-weight: 600;
    cursor: pointer; transition: all .2s; font-family: inherit;
}
.filter-tab.is-active { background: var(--navy); border-color: var(--navy); color: var(--cream-text-2); }

/* ── STEPPER (guest journey / artwork approval / onboarding) ── */
.stepper-wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 30px; align-items: start; }
@media (max-width: 880px) { .stepper-wrap { grid-template-columns: 1fr; } }

.stepper-rail { display: flex; flex-direction: column; gap: 8px; }
.stepper-step {
    display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; font-family: inherit;
    cursor: pointer; padding: 16px 20px; border-radius: 16px; transition: all .22s;
    border: 1.5px solid var(--border); background: var(--white);
    box-shadow: 0 14px 40px -44px rgba(14,30,43,.4);
}
.stepper-step.is-active { border-color: var(--coral); background: var(--navy); box-shadow: 0 22px 50px -40px rgba(14,30,43,.7); }
/* Matches the sitewide .step-badge (navy disc + gold numeral). The active card
   turns navy, so the dot inverts to gold-on-navy to stay legible against it —
   same two brand colours either way, state still readable at a glance. */
.stepper-step .step-dot {
    width: 40px; height: 40px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif); font-weight: 700; font-size: 17px; background: var(--navy); color: var(--coral);
}
.stepper-step.is-active .step-dot { background: var(--coral); color: var(--navy); }
.stepper-step .step-kicker { display: block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: var(--gold-ink); }
.stepper-step.is-active .step-kicker { color: var(--coral-light); }
.stepper-step .step-title { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 19px; line-height: 1.15; margin-top: 2px; color: var(--ink); }
.stepper-step.is-active .step-title { color: var(--cream-text); }

.stepper-detail {
    background: var(--navy); border-radius: 26px; padding: 44px 46px;
    box-shadow: 0 34px 80px -50px rgba(14,30,43,.7); position: relative; overflow: hidden;
}
.stepper-detail::before {
    content: ''; position: absolute; top: -90px; right: -70px; width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, rgba(219,165,48,.22), transparent 70%);
}
.stepper-detail .detail-inner { position: relative; }
.stepper-detail .detail-icon {
    width: 70px; height: 70px; border-radius: 20px; background: var(--coral); display: flex; align-items: center; justify-content: center; flex: none;
}
.stepper-detail .detail-icon .hgl-icon { width: 32px; height: 32px; color: var(--navy); }
.stepper-detail .detail-kicker { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--coral-light); font-weight: 700; }
.stepper-detail h3 { font-weight: 600; font-size: clamp(24px, 3vw, 32px); line-height: 1.05; color: var(--cream-text); margin-top: 4px; }
.stepper-detail p.detail-desc { font-size: 16px; line-height: 1.65; color: var(--muted-2); margin-top: 18px; }
.stepper-detail .detail-points { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.stepper-detail .detail-points div { display: flex; align-items: flex-start; gap: 13px; font-size: 15px; line-height: 1.55; color: #E9EDF0; }
.stepper-detail .detail-points span.tick {
    width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--coral); color: var(--cream-text-2);
    display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.stepper-detail .detail-points span.tick .hgl-icon { width: 13px; height: 13px; }
.stepper-nav { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border-dark); display: flex; justify-content: space-between; gap: 12px; }
.stepper-nav button {
    font-family: inherit; font-weight: 600; font-size: 14px; padding: 13px 20px; min-height: 44px; border-radius: 100px;
    border: 1.5px solid rgba(255,255,255,.24); background: transparent; color: var(--cream-text); cursor: pointer; transition: all .2s;
}
.stepper-nav button:hover { border-color: var(--cream-text); background: rgba(255,255,255,.06); }

/* ── ONBOARDING WIZARD (interactive "try it yourself" portal card) ── */
.hgl-wizard-card { background: var(--white); border: 1px solid var(--border); border-radius: 26px; overflow: hidden; box-shadow: 0 34px 80px -52px rgba(14,30,43,.55); }
.hgl-wizard-topbar { background: var(--navy); padding: 20px 30px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hgl-wizard-brand { display: flex; align-items: center; gap: 13px; }
.hgl-wizard-logo { width: 40px; height: 40px; border-radius: 50%; background: var(--cream); display: flex; align-items: center; justify-content: center; padding: 6px; flex: none; }
.hgl-wizard-logo img { width: 100%; height: 100%; object-fit: contain; }
.hgl-wizard-brand-title { font-weight: 700; font-size: 16px; color: var(--cream-text); line-height: 1; }
.hgl-wizard-brand-sub { font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted-2); font-weight: 600; margin-top: 3px; }
.hgl-wizard-progress { display: flex; align-items: center; gap: 14px; }
.hgl-wizard-progress span { font-size: 13px; color: var(--muted-2); font-weight: 500; white-space: nowrap; }
.hgl-wizard-progress-track { width: 140px; height: 8px; border-radius: 100px; background: rgba(255,255,255,.14); overflow: hidden; }
.hgl-wizard-progress-fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--coral), var(--coral-light)); transition: width .5s cubic-bezier(.22,.61,.36,1); }

.hgl-wizard-dots-wrap { padding: 20px 30px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.hgl-wizard-dots { display: flex; align-items: center; gap: 0; min-width: 560px; }
.hgl-wizard-dot { flex: none; width: 38px; height: 38px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-weight: 700; font-size: 14px; cursor: pointer; background: var(--cream-alt); color: var(--gold-ink); transition: all .25s; }
.hgl-wizard-dot.is-done { background: #1F8A5B; color: #fff; }
.hgl-wizard-dot.is-active { background: var(--coral); color: var(--navy); box-shadow: 0 0 0 4px rgba(219,165,48,.24); }
.hgl-wizard-dot-line { flex: 1; height: 3px; min-width: 16px; border-radius: 3px; background: var(--border); margin: 0 2px; transition: background .3s; }
.hgl-wizard-dot-line.is-done { background: #1F8A5B; }

.hgl-wizard-body { padding: 40px 44px 44px; }
.hgl-wizard-step-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.hgl-wizard-step-num { font-family: var(--font-serif); font-weight: 700; font-size: 40px; color: var(--coral); line-height: 1; flex: none; }
.hgl-wizard-step-kicker { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; }
.hgl-wizard-body h3 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.1; color: var(--ink); margin-top: 2px; }
.hgl-wizard-step-goal { font-size: 16px; line-height: 1.6; color: var(--muted-1); margin: 6px 0 24px; }
.hgl-wizard-yw { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hgl-wizard-yw-card { background: var(--cream-alt); border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px; }
.hgl-wizard-yw-label { display: block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; margin-bottom: 6px; }
.hgl-wizard-yw-card p { font-size: 14.5px; line-height: 1.55; color: var(--ink); margin: 0; }
.hgl-wizard-done-strip { display: flex; align-items: center; gap: 10px; background: rgba(31,138,91,.08); border-radius: 12px; padding: 13px 18px; margin-top: 16px; }
.hgl-wizard-done-strip .hgl-icon { width: 16px; height: 16px; color: #1F8A5B; flex: none; }
.hgl-wizard-done-strip span { font-size: 14px; color: #1F6E4C; font-weight: 500; }
.hgl-wizard-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.hgl-wizard-actions [data-back]:disabled { opacity: .4; cursor: not-allowed; }

.hgl-wizard-finished { padding: 60px 44px 64px; text-align: center; }
.hgl-wizard-done-badge { width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(150deg, var(--coral), var(--coral-light)); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; box-shadow: 0 18px 40px -12px rgba(219,165,48,.5); }
.hgl-wizard-done-badge .hgl-icon { width: 40px; height: 40px; color: var(--navy); }
.hgl-wizard-finished h3 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(28px, 3.4vw, 40px); }
.hgl-wizard-finished p { font-size: 16px; line-height: 1.6; color: var(--muted-1); margin: 12px auto 0; max-width: 440px; }
.hgl-wizard-partner-id { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; background: var(--cream-alt); border-radius: 12px; padding: 12px 22px; }
.hgl-wizard-partner-id span:first-child { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted-1); font-weight: 600; }
.hgl-wizard-partner-id span:last-child { font-family: var(--font-serif); font-weight: 700; font-size: 20px; color: var(--coral-dark); letter-spacing: 1px; }

@media (max-width: 620px) {
    .hgl-wizard-yw { grid-template-columns: 1fr; }
}

/* ── COMPARISON TABLE (in-house vs HGL) ── */
.comparison-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 767px) { .comparison-grid { grid-template-columns: 1fr; } }
.comparison-col { border-radius: var(--radius-lg); padding: 34px 30px; }
.comparison-col--neg { background: #FBEDEC; border: 1px solid rgba(198,61,34,.18); }
.comparison-col--pos { background: var(--navy); }
.comparison-col h3 { font-weight: 600; font-size: 22px; margin-bottom: 20px; }
.comparison-col--pos h3 { color: var(--cream-text); }
.comparison-col ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.comparison-col li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; }
.comparison-col--neg li::before { content: '✕'; color: #D30046; font-weight: 700; flex: none; }
.comparison-col--pos li { color: rgba(243,243,243,.85); }
.comparison-col--pos li::before { content: '✓'; color: var(--coral); font-weight: 700; flex: none; }

/* ── PRICE DISCLAIMER (Services & pricing, Book a Pickup) ── */
.hgl-price-disclaimer {
    display: flex; align-items: flex-start; gap: 10px; margin: 1.1rem 0 1.6rem;
    padding: 14px 18px; font-size: 13.5px; line-height: 1.55; color: var(--muted-1);
    background: rgba(219,165,48,.06); border: 1px solid rgba(219,165,48,.18); border-radius: 10px;
}
.hgl-price-disclaimer .hgl-price-disclaimer-icon { flex: none; font-size: 15px; line-height: 1.4; }
.hgl-price-disclaimer strong { color: var(--ink); }

/* ── PRICING TABLE ── */
.price-table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; }
.price-table th {
    background: var(--navy); color: var(--coral); font-weight: 700; text-align: center;
    padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.price-table td { padding: 10px 16px; border-bottom: 1px solid var(--border); color: var(--muted-1); }
.price-table tr:last-child td { border-bottom: none; }
.price-table .price { font-weight: 700; color: var(--gold-ink); text-align: center; }
.price-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); }

/* ── FORMS (Contact, Book a Pickup) ── */
.form-card { background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 40px; box-shadow: 0 20px 50px -38px rgba(14,30,43,.4); }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.form-group input[type="text"], .form-group input[type="email"], .form-group input[type="tel"],
.form-group select, .form-group textarea {
    width: 100%; font-family: var(--font-sans); font-size: 16px; line-height: 1.4; color: var(--ink);
    border: 1.5px solid var(--border); border-radius: 10px; padding: 13px 14px; background: var(--white);
    min-height: 46px; box-sizing: border-box; transition: border-color .15s, box-shadow .15s;
}
.form-group textarea { min-height: 130px; resize: vertical; }
.form-group select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 42px;
    cursor: pointer;
}
.form-group input:hover, .form-group select:hover, .form-group textarea:hover { border-color: var(--muted-4); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px rgba(219,165,48,.12);
}
/* Grouped sections within a long form ("Personal details", "Hotel details"). */
.form-section { margin-bottom: 34px; }
.form-section:last-of-type { margin-bottom: 22px; }
.form-section-title {
    font-family: var(--font-serif); font-size: 21px; font-weight: 700; line-height: 1.2; color: var(--ink);
    margin: 0 0 18px; padding-bottom: 12px;
}

/* Radio / checkbox lists inside .form-group.
   CF7 renders each option as
   <span class="wpcf7-list-item"><label><input><span class="wpcf7-list-item-label">,
   so without these overrides the inner <label> inherits the block-level, bold
   styling of the field label above it and every option stacks. The pill hit
   area is 46px tall to clear the 44px minimum touch target. */
.form-group .wpcf7-radio, .form-group .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 10px; }
.form-group .wpcf7-list-item { margin: 0; }
.form-group .wpcf7-list-item > label {
    display: inline-flex; align-items: center; gap: 9px; margin: 0;
    min-height: 46px; padding: 10px 16px;
    border: 1.5px solid var(--border); border-radius: 10px; background: var(--white);
    font-size: 15px; font-weight: 500; color: var(--ink); cursor: pointer;
    transition: border-color .15s, background .15s;
}
.form-group .wpcf7-list-item > label:hover { border-color: var(--muted-4); }
.form-group .wpcf7-list-item input[type="radio"],
.form-group .wpcf7-list-item input[type="checkbox"] {
    width: 18px; height: 18px; margin: 0; flex: none; cursor: pointer; accent-color: var(--coral);
}
.form-group .wpcf7-list-item:has(input:checked) > label { border-color: var(--coral); background: rgba(219,165,48,.06); }
.form-group .wpcf7-list-item:has(input:focus-visible) > label { outline: 2px solid var(--coral-light); outline-offset: 2px; }
.form-group .wpcf7-list-item-label { line-height: 1.2; }

/* ── Contact Form 7: styled entirely off CF7's own auto-applied classes
   (wpcf7-form-control, wpcf7-form-control-wrap, wpcf7-submit) rather than
   a .form-group wrapper, so this renders correctly no matter what markup
   is actually saved in the Form tab — no re-pasting required. ── */
.form-card .wpcf7-form-control-wrap { display: block; margin-bottom: 4px; }
.form-card .wpcf7-form label {
    display: block; font-family: var(--font-sans); font-size: 13.5px; font-weight: 700;
    color: var(--ink); margin: 0 0 7px;
}
.form-card .wpcf7-form p { margin: 0 0 20px; }
.form-card .wpcf7-form-control:not(.wpcf7-submit) {
    width: 100%; font-family: var(--font-sans); font-size: 16px; line-height: 1.4; color: var(--ink);
    border: 1.5px solid var(--border); border-radius: 10px; padding: 13px 14px; background: var(--white);
    min-height: 46px; box-sizing: border-box; transition: border-color .15s, box-shadow .15s;
}
.form-card textarea.wpcf7-form-control { min-height: 130px; resize: vertical; }
.form-card select.wpcf7-form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px !important;
    padding-right: 42px !important;
    cursor: pointer;
}
.form-card .wpcf7-form-control:not(.wpcf7-submit):hover { border-color: var(--muted-4); }
.form-card .wpcf7-form-control:not(.wpcf7-submit):focus {
    outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px rgba(219,165,48,.12);
}
.form-card .wpcf7-not-valid { border-color: #D30046 !important; box-shadow: 0 0 0 4px rgba(219,165,48,.1); }
.form-card .wpcf7-not-valid-tip { display: block; font-size: 12.5px; color: #D30046; margin-top: 6px; }

.form-card input.wpcf7-submit, .form-card button.wpcf7-submit {
    font-family: var(--font-sans); font-size: 16px; font-weight: 600;
    padding: 15px 30px; border: none; border-radius: 100px; cursor: pointer;
    background: var(--coral); color: var(--cream-text); box-shadow: 0 12px 30px rgba(219,165,48,.34);
    transition: background .25s, transform .25s; margin-top: 4px;
}
.form-card input.wpcf7-submit:hover, .form-card button.wpcf7-submit:hover {
    background: var(--coral-dark); transform: translateY(-2px);
}
.form-card input.wpcf7-submit:disabled, .form-card button.wpcf7-submit:disabled {
    opacity: .65; cursor: not-allowed; transform: none;
}
/* Whatever element directly wraps the submit button (p, div, span — Form
   tab markup varies) gets centered, so the button + its loading spinner
   sit together as a centered group instead of hugging the left edge. */
.form-card .wpcf7-form *:has(> input.wpcf7-submit),
.form-card .wpcf7-form *:has(> button.wpcf7-submit) { text-align: center; }
.form-card .wpcf7-spinner { margin: 0 0 0 10px; vertical-align: middle; }

/* Any bare <p> left over (e.g. a reCAPTCHA disclaimer line) that isn't a
   labelled field renders as a small muted footnote instead of full-size
   default text. */
.form-card .wpcf7-form > p:has(a) { font-size: 12px; color: var(--muted-3); line-height: 1.55; margin: 14px 0 0; }
.form-card .wpcf7-form > p:has(a) a { color: var(--muted-1); text-decoration: underline; }
.form-card .wpcf7-form > p:has(a) a:hover { color: var(--coral); }

/* Replaced by the .hgl-toast notification (see below) — CF7 still renders
   this element and manages its aria-live text under the hood, so it stays
   in the DOM for accessibility, just visually hidden. */
.form-card .wpcf7-response-output { display: none; }

/* ── Toast notification (replaces the CF7 response-output banner) ── */
.hgl-toast {
    position: fixed; left: 50%; bottom: 28px; z-index: 1100;
    display: flex; align-items: center; gap: 10px;
    max-width: calc(100vw - 32px); background: var(--navy); color: var(--cream-text);
    padding: 14px 20px; border-radius: 12px; box-shadow: 0 20px 40px -12px rgba(14,30,43,.5);
    font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1.4;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translate(-50%, 12px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.hgl-toast.is-visible {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
}
.hgl-toast-icon { flex: none; display: inline-flex; width: 20px; height: 20px; }
.hgl-toast-icon .hgl-icon { width: 20px; height: 20px; }
.hgl-toast.is-success .hgl-toast-icon { color: #7CE3A8; }
.hgl-toast.is-error .hgl-toast-icon { color: #FF9EB8; }
@media (prefers-reduced-motion: reduce) {
    .hgl-toast { transition: opacity .15s linear, visibility 0s linear .15s; transform: translate(-50%, 0); }
    .hgl-toast.is-visible { transition: opacity .15s linear; }
}
@media (max-width: 575.98px) {
    .hgl-toast { left: 16px; right: 16px; bottom: 16px; transform: translate(0, 12px); max-width: none; }
    .hgl-toast.is-visible { transform: translate(0, 0); }
}

/* ── BOOK A PICKUP: native form fields ── */
/* No bottom margin: nearly every field sits in a .row g-3 column whose gutter
   already provides the vertical rhythm, so the margin was doubling it up.
   .hgl-field-group still separates one labelled group from the next. */
.hgl-field { margin-bottom: 0; }
.hgl-field label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.hgl-field-group { margin-bottom: 20px; }
.hgl-group-label {
    display: block; font-family: var(--font-sans); font-size: 13.5px; font-weight: 700;
    color: var(--ink); margin: 0 0 9px;
}
/* Nested sub-label (e.g. inside a section that already has its own
   .hgl-group-label) — lighter weight so it reads as a sub-heading, not a
   repeat of the same section-header style stacked three times in a row. */
.hgl-group-label--sub { font-size: 12px; font-weight: 600; color: var(--muted-1); text-transform: uppercase; letter-spacing: .04em; }
.hgl-booking-form input[type="text"], .hgl-booking-form input[type="email"],
.hgl-booking-form input[type="tel"], .hgl-booking-form input[type="number"],
.hgl-booking-form input[type="date"], .hgl-booking-form select, .hgl-booking-form textarea {
    width: 100%; font-family: var(--font-sans); font-size: 16px; line-height: 1.4; color: var(--ink);
    border: 1.5px solid var(--border); border-radius: 10px; padding: 13px 14px; background: var(--white);
    margin-bottom: 12px; min-height: 46px; box-sizing: border-box; transition: border-color .15s, box-shadow .15s;
}
.hgl-booking-form textarea { min-height: 92px; }
.hgl-booking-form select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 42px;
    cursor: pointer;
}
.hgl-booking-form input:hover, .hgl-booking-form select:hover, .hgl-booking-form textarea:hover { border-color: var(--muted-4); }
.hgl-booking-form input:focus, .hgl-booking-form select:focus, .hgl-booking-form textarea:focus {
    outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px rgba(219,165,48,.12);
}
.hgl-form-error { color: #D30046; font-size: 13.5px; margin: 4px 0 12px; }
.hgl-form-success { text-align: center; padding: 30px 10px; }

/* ── Booking authorization consent ── */
.hgl-auth {
    margin: 18px 0 20px; padding: 16px 18px;
    background: rgba(219,165,48,.08); border: 1px solid var(--border); border-radius: 10px;
}
.hgl-auth-title {
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--gold-ink); margin-bottom: 10px;
}
.hgl-auth-check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.hgl-auth-check input[type="checkbox"] {
    flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--coral-dark); cursor: pointer;
}
.hgl-auth-check span { font-size: 13px; line-height: 1.6; color: var(--muted-1); }
.hgl-auth-check a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.hgl-auth-check a:hover { color: var(--coral-dark); }
.hgl-form-success h3 { font-weight: 600; font-size: 26px; margin-bottom: 8px; }

/* ── BOOK A PICKUP: order preview shown on the success panel after submit ── */
.hgl-order-preview {
    text-align: left; margin-top: 26px; padding: 22px 24px; background: var(--cream-alt);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.hgl-order-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.hgl-order-preview-head h4 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0; }
.hgl-order-preview-head .hgl-print-btn { padding: 8px 16px; font-size: 13px; min-height: 44px; box-sizing: border-box; }
.hgl-summary-row {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.hgl-summary-row:last-child { border-bottom: none; }
.hgl-summary-row > span:first-child { color: var(--muted-1); flex: none; }
.hgl-summary-row > span:last-child { color: var(--ink); font-weight: 600; text-align: right; }
.hgl-summary-row-total { margin-top: 4px; padding-top: 12px; border-top: 1.5px solid var(--border); }
.hgl-summary-row-total > span:first-child { color: var(--ink); font-weight: 700; }
.hgl-summary-row-total > span:last-child { font-family: var(--font-serif); font-weight: 700; font-size: 21px; color: var(--gold-ink); }
.hgl-summary-table-wrap { overflow-x: auto; margin: 6px 0 4px; border: 1px solid var(--border); border-radius: 10px; }
.hgl-summary-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 13px; }
.hgl-summary-table th {
    background: var(--navy); color: var(--coral); font-weight: 700; text-align: left;
    padding: 9px 12px; white-space: nowrap;
}
.hgl-summary-table th:last-child, .hgl-summary-table td:last-child { text-align: right; }
.hgl-summary-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--muted-1); }
.hgl-summary-table tr:last-child td { border-bottom: none; }

@media print {
    /* visibility:hidden alone leaves every hidden element's box (and thus its
       height) in the flow, so the rest of the page — hero image, full-height
       sections, footer — still occupies real vertical space on the printed
       sheet even though nothing is visible there. That's what previously
       produced 2 extra blank pages after the one real page of content.
       Collapsing everything to height:0 removes that leftover space; the
       preview and its descendants get their height restored afterward. */
    body * { visibility: hidden; height: 0 !important; overflow: hidden !important; }
    /* .hgl-print-ready is added to the active tab's success panel just before
       window.print() (see book-a-pickup.js) — display must be forced because
       visibility can't reveal content inside a display:none ancestor, which
       previously printed a blank page when printing before submitting. Panels
       without the class stay display:none, so only one preview ever prints. */
    .hgl-form-success.hgl-print-ready { display: block !important; }
    .hgl-order-preview, .hgl-order-preview * { visibility: visible; height: auto !important; overflow: visible !important; }
    .hgl-order-preview { position: absolute; top: 0; left: 0; width: 100%; box-shadow: none; border: none; }
    .hgl-order-preview .hgl-print-btn { display: none; }
}

.hgl-radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hgl-radio-card {
    display: flex; align-items: flex-start; gap: 10px; border: 1.5px solid var(--border);
    border-radius: 10px; padding: 14px 16px; cursor: pointer; font-size: 14px; color: var(--muted-1);
    min-height: 44px; box-sizing: border-box; transition: border-color .15s, background .15s;
}
.hgl-radio-card:hover { border-color: var(--muted-4); }
.hgl-radio-card input { margin-top: 3px; flex: none; }
.hgl-radio-card:has(input:checked) { border-color: var(--coral); background: rgba(219,165,48,.05); }
.hgl-radio-card:has(input:focus-visible) { outline: 2px solid var(--coral-light); outline-offset: 2px; }
.hgl-radio-card strong { color: var(--ink); font-size: 14.5px; }
@media (max-width: 575.98px) { .hgl-radio-cards { grid-template-columns: 1fr; } }

.hgl-stripe-wrap { margin: 8px 0 18px; padding: 18px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--cream-alt); }

/* ── BOOK A PICKUP: service/speed tabs (choose once for the whole order) ── */
.hgl-tabs-row { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; margin-bottom: 10px; }
.hgl-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--cream-alt); border-radius: 100px; padding: 4px; }
.hgl-tab { position: relative; cursor: pointer; }
.hgl-tab input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.hgl-tab span {
    display: flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box;
    font-size: 13px; font-weight: 600; color: var(--muted-1); padding: 8px 18px;
    border-radius: 100px; white-space: nowrap; transition: background .18s, color .18s;
}
.hgl-tab input:checked + span { background: var(--navy); color: var(--cream-text); }
.hgl-tab input:focus-visible + span { outline: 2px solid var(--coral-light); outline-offset: 2px; }
/* No max-width: the note sits directly above the full-width order grid, so
   capping it to a reading column left it visibly narrower than the table it
   introduces. Used only by the partner order form. */
.hgl-tabs-note { font-size: 12.5px; color: var(--muted-3); line-height: 1.5; margin: 10px 0 16px; }

/* ── BOOK A PICKUP: group tab — was referenced in markup but never defined,
   so both the nested "Group rates" card and the sticky "Group estimate"
   sidebar were rendering with no padding/radius/shadow at all. ── */
.hgl-sidebar-card {.
    border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 26px;
    box-shadow: 0 20px 50px -38px rgba(14,30,43,.4); margin-bottom: 20px;
}
.hgl-sidebar-card:last-child { margin-bottom: 0; }
@media (max-width: 575.98px) {
    .hgl-sidebar-card [data-group-tier] { flex: 0 0 100%; max-width: 100%; }
}

/* ── BOOK A PICKUP: garment reference table + single live Qty/Amount column ── */
.hgl-grid-wrap { margin: 1.25rem 0; }
.hgl-price-table-scroll { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); }
/* Six columns now (Item / 3 services / Qty / Amount) instead of eleven, so the
   grid no longer needs to be nearly a metre wide before it scrolls. */
.hgl-order-grid { min-width: 660px; }
.hgl-order-grid .hgl-item-name { white-space: nowrap; font-weight: 600; color: var(--ink); }

/* Price cells are the service picker: tapping one toggles that service on for
   the garment. Rendered as real <button>s so they're keyboard-operable and
   expose their state via aria-pressed. */
.hgl-order-grid .hgl-price-cell { text-align: center; padding: 6px 8px; }
.hgl-order-grid .hgl-price-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 74px; min-height: 38px; padding: 8px 12px;
    font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; line-height: 1;
    color: var(--navy); background: var(--white);
    border: 1.5px solid var(--border); border-radius: 9px;
    cursor: pointer; white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}
.hgl-order-grid .hgl-price-btn:hover:not(:disabled) { border-color: var(--coral); background: rgba(219,165,48,.07); }
.hgl-order-grid .hgl-price-btn:focus-visible { outline: 2px solid var(--coral-light); outline-offset: 2px; }
.hgl-order-grid .hgl-price-cell.is-selected .hgl-price-btn {
    background: var(--navy); border-color: var(--navy); color: var(--coral); font-weight: 700;
}
/* Not offered for this garment at this speed — renders as a bare dash. */
.hgl-order-grid .hgl-price-btn:disabled {
    color: var(--muted-4); background: transparent; border-color: transparent;
    cursor: default; min-width: 0;
}
.hgl-order-grid tr.is-selected-row { background: rgba(219,165,48,.05); }

.hgl-order-grid .hgl-cell-qty { text-align: center; white-space: nowrap; }
.hgl-order-grid .hgl-qty-input:disabled { opacity: .45; cursor: not-allowed; }
/* The speed picker replaced the old tab pills; keep it from stretching across
   the whole grid width on desktop. */
.hgl-speed-select { max-width: 320px; }
.hgl-order-grid .hgl-cell-amount { text-align: right; white-space: nowrap; font-size: 16px; font-weight: 700; color: var(--ink); padding-right: 14px; }
.hgl-order-grid tr.is-unavailable .hgl-item-name { color: var(--muted-3); }
/* 16px for the same iOS reason as the hero form — this one sits inside a
   horizontally-scrolling grid, where an auto-zoom on focus is especially
   disorienting. */
.hgl-qty-input {
    width: 52px; text-align: center; font-family: var(--font-sans); font-size: 16px;
    border: 1.5px solid var(--border); border-radius: 7px; padding: 5px 4px; color: var(--ink);
}
.hgl-qty-input:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(219,165,48,.12); }
.hgl-qty-input:disabled { background: var(--cream-alt); color: var(--muted-4); cursor: not-allowed; }
/* Wider only inside the partner order grid, where the Qty column has room for
   it. Scoped so the compact 52px default still applies anywhere else the input
   is reused. */
.hgl-order-grid .hgl-qty-input { width: 150px !important; }
.hgl-grid-total {
    display: flex; align-items: center; justify-content: space-between; margin-top: 14px;
    padding: 16px 20px; background: var(--navy); border-radius: 10px; color: var(--cream-text);
    font-size: 15px;
}
/* Sans, not the display serif — this is a running figure that changes as the
   order is built, so it should match the sans amounts in the grid above it
   rather than read as a display heading. */
.hgl-grid-total strong { font-family: var(--font-sans); font-size: 22px; font-weight: 700; color: var(--coral); }
/* Estimate caveat under the order total, on the grid and the confirmation. */
.hgl-price-note {
    margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted-3);
}

/* ── CONTACT INFO PANEL ── */
.info-panel { background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 32px; }
.info-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; }
.info-row + .info-row { border-top: 1px solid var(--border); }
.info-row .info-icon { flex: none; }
.info-row .info-icon .hgl-icon { width: 20px; height: 20px; color: var(--coral); }
.info-row .info-key { display: block; font-size: 12px; color: var(--muted-3); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.info-row .info-val { display: block; font-size: 16px; color: var(--ink); font-weight: 600; margin-top: 2px; }
.info-row .info-val--link { text-decoration: none; transition: color .15s; cursor: pointer; }
.info-row .info-val--link:hover, .info-row .info-val--link:focus-visible { color: var(--coral); }
.info-row .info-val--link:focus-visible { outline: 2px solid var(--coral-light); outline-offset: 3px; border-radius: 2px; }

@media (max-width: 575.98px) {
    .form-card { padding: 28px 22px; }
    .info-panel { padding: 24px 20px; }
}

/* ── NAV ──
   Mobile menu opens as an absolutely-positioned panel anchored to the
   bottom of the navbar (not by growing the navbar's own height), so the
   bar itself always stays a fixed 76px regardless of open/closed state —
   the hamburger icon morphs into an X to match. */
.hgl-navbar { background: var(--cream); border-bottom: 1px solid rgba(11,39,67,.08); position: sticky; top: 0; z-index: 1000; }
.hgl-navbar .container { height: 76px; display: flex; align-items: center; }
.hgl-navbar .navbar-brand {
    display: inline-flex; align-items: center; gap: .6rem; text-decoration: none;
}
.hgl-brand-logo { height: 48px; width: auto; display: block; flex: none; }
.hgl-brand-text {
    display: flex; flex-direction: column; line-height: 1;
    font-family: var(--font-serif); font-weight: 600; font-size: 25px;
    color: var(--navy); letter-spacing: -.2px;
}
.hgl-brand-text small {
    font-family: var(--font-sans); font-weight: 700; font-size: 10.5px;
    letter-spacing: 4px; text-transform: uppercase; color: var(--coral-dark); margin-top: 3px;
}
@media (max-width: 575.98px) {
    .hgl-brand-logo { height: 42px; }
    .hgl-brand-text { font-size: 21px; }
    .hgl-brand-text small { font-size: 9.5px; letter-spacing: 3px; }
}
.hgl-navbar .navbar-nav .nav-link {
    font-family: var(--font-sans); font-weight: 600; font-size: 14.5px; color: var(--ink) !important;
    padding: 8px 16px !important; cursor: pointer;
    display: flex; align-items: center; min-height: 44px; box-sizing: border-box;
}

.btn-cta {
    font-family: var(--font-sans); font-weight: 600; font-size: 14.5px; color: var(--ink) !important;
    padding: 8px 16px !important; cursor: pointer;
    display: flex; align-items: center; min-height: 44px; box-sizing: border-box;
}
.hgl-navbar .navbar-nav .nav-link:hover,
.hgl-navbar .navbar-nav .current-menu-item .nav-link { color: var(--coral) !important; }
.hgl-navbar .dropdown-item {
    display: flex; align-items: center; min-height: 44px; box-sizing: border-box;
    font-family: var(--font-sans); font-size: 14px; color: var(--ink);
}
.hgl-navbar .dropdown-item:hover, .hgl-navbar .dropdown-item:focus { color: var(--coral); background: var(--cream-alt); }

/* Open submenus on hover (desktop only — below lg the nav is the collapsed
   hamburger panel, where tapping must still be what opens a submenu).
   :focus-within keeps it keyboard-accessible; Bootstrap's click toggle still
   works because .show is what it adds, and both paths end up displayed. */
@media (min-width: 992px) {
    .hgl-navbar .nav-item.dropdown:hover > .dropdown-menu,
    .hgl-navbar .nav-item.dropdown:focus-within > .dropdown-menu { display: block; }
    /* Bridge the gap between the trigger and the panel so the pointer can
       travel down without the menu closing mid-move. */
    .hgl-navbar .nav-item.dropdown > .dropdown-menu { margin-top: 0; }
    .hgl-navbar .nav-item.dropdown::after {
        content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px;
    }
    .hgl-navbar .nav-item.dropdown { position: relative; }
}
.hgl-navbar .navbar-toggler { border: none; box-shadow: none; border-radius: 6px; }
.hgl-navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(219,165,48,.2); }
.hgl-navbar .navbar-toggler:focus:not(:focus-visible) { box-shadow: none; }

.navbar-toggler-bar {
    display: block; width: 20px; height: 2.5px; background: var(--ink);
    border-radius: 2px; transition: transform .25s ease, opacity .2s ease;
}
/* Bootstrap toggles .collapsed on this button to match the collapse's
   hidden/shown state — .collapsed = closed (hamburger), absent = open (X). */
.hgl-navbar .navbar-toggler:not(.collapsed) .navbar-toggler-bar--top { transform: translateY(7.5px) rotate(45deg); }
.hgl-navbar .navbar-toggler:not(.collapsed) .navbar-toggler-bar--mid { opacity: 0; }
.hgl-navbar .navbar-toggler:not(.collapsed) .navbar-toggler-bar--bottom { transform: translateY(-7.5px) rotate(-45deg); }

/* Sized for a 44px touch target only while it's actually the visible nav
   control (below navbar-expand-lg's 992px breakpoint) — an earlier,
   unscoped `display: flex` here had equal specificity to and loaded after
   Bootstrap's own `@media (min-width:992px) .navbar-expand-lg .navbar-toggler
   { display: none; }`, so it won the tie and kept the hamburger icon
   visible on desktop too. */
@media (max-width: 991.98px) {
    .hgl-navbar .navbar-toggler {
        min-width: 44px; min-height: 44px; display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 5px;
    }
    /* Menu opens as a full-width panel anchored to the navbar's bottom edge
       (position:absolute relative to .hgl-navbar, which is the nearest
       positioned ancestor since .container stays position:static) — it
       overlays the page instead of pushing content down, which is what
       keeps .hgl-navbar's own height fixed at 76px whether open or closed. */
    .hgl-navbar .navbar-collapse {
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--white); border-top: 1px solid var(--border);
        box-shadow: 0 8px 16px rgba(14,30,43,.12);
        padding: 1rem 0; max-height: calc(100vh - 76px); overflow-y: auto;
    }
    .hgl-navbar .navbar-nav .nav-link { margin: 0; }
    /* .btn-cta is `display: flex` (block-level) with no explicit width, so
       inside the collapsed nav's flex column it stretches to fill the full
       panel width like every other block-level nav item. Switching to
       inline-flex lets it size to its own content instead. */
    .hgl-navbar .navbar-nav .btn-cta { display: inline-flex; width: auto; margin: 8px 16px; }
}

/* ── FOOTER ── */
.site-footer { flex-shrink: 0; background: #F3EEE2; color: var(--muted-1); padding: 4.5rem 0 1.5rem; border-top: 1px solid var(--border); }

/* ── MOBILE STICKY CTA (site-wide, rendered from footer.php) ──
   Desktop-hidden by default: both actions already sit in the header nav there,
   so a fixed bar would just duplicate space. Below 767.98px the header nav
   collapses into the hamburger menu, which is exactly when a persistent
   "book now" affordance earns its keep.

   The reserved space goes on .site-footer's own bottom padding rather than
   <body> — body's background is --cream (#FBFAF6), one shade lighter than the
   footer's #F3EEE2, so padding on body would show as a mismatched-colour strip
   under the footer instead of the footer's own background continuing under
   the bar. */
.hgl-sticky-cta { display: none; }
@media (max-width: 767.98px) {
    .hgl-sticky-cta {
        display: flex; gap: 10px; justify-content: center;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: rgba(251,250,246,.96);
        -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        border-top: 1px solid rgba(11,39,67,.1);
        box-shadow: 0 -10px 26px -14px rgba(14,30,43,.22);
    }
    .hgl-sticky-btn {
        flex: 1 1 0; min-width: 0; min-height: 46px;
        display: inline-flex; align-items: center; justify-content: center;
        padding: 0 14px; border-radius: 100px;
        font-family: var(--font-sans); font-size: 14.5px; font-weight: 700;
        line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
        transition: transform .15s ease, background .15s ease;
    }
    /* Only one button rendered (on /book-a-pickup/ or /become-a-partner/,
       which each hide their own self-referential CTA — see footer.php): drop
       the flex-grow so it hugs its label instead of stretching full width,
       and the parent's justify-content: center places it in the middle of
       the bar. The two-button case is untouched — both still fill the row
       edge-to-edge as before. */
    .hgl-sticky-btn:only-child { flex: 0 1 auto; padding: 0 36px; }
    .hgl-sticky-btn--primary {
        background: var(--coral); color: var(--navy);
        box-shadow: 0 10px 22px -10px rgba(219,165,48,.6);
    }
    .hgl-sticky-btn--primary:active { transform: scale(.97); }
    .hgl-sticky-btn--outline { background: var(--white); color: var(--navy); border: 1.5px solid rgba(11,39,67,.16); }
    .hgl-sticky-btn--outline:active { background: rgba(11,39,67,.05); }

    /* Reserve room under the footer so its last line of text/links is never
       hidden behind the fixed bar once the page is scrolled all the way down. */
    .site-footer { padding-bottom: calc(1.5rem + 58px + env(safe-area-inset-bottom)); }

    /* The toast (contact / partner forms) sits at the same screen edge —
       lift it clear of the bar instead of letting the two overlap. */
    .hgl-toast { bottom: calc(70px + env(safe-area-inset-bottom)); }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    .hgl-sticky-btn { transition: none; }
}
.footer-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.footer-brand-logo { width: 46px; height: auto; display: block; flex: none; }
.footer-brand-text {
    display: flex; flex-direction: column; line-height: 1;
    font-family: var(--font-serif); font-weight: 600; font-size: 23px; color: var(--navy);
}
.footer-brand-text small {
    font-family: var(--font-sans); font-weight: 700; font-size: 10px;
    letter-spacing: 4px; text-transform: uppercase; color: var(--gold-ink); margin-top: 3px;
}
.footer-desc { font-size: 15px; line-height: 1.65; max-width: 280px; color: var(--muted-1); }
.footer-col h4 { font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: .9rem; text-transform: uppercase; letter-spacing: .05em; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; padding: 0; }
.footer-col a { font-size: 14px; color: var(--muted-1); text-decoration: none; transition: color .2s; }
.footer-col a:hover { color: var(--coral-dark); }
.footer-border { border-bottom: 1px solid rgba(11,39,67,.12); padding-bottom: 2.5rem; margin-bottom: 1.75rem; }
.footer-bottom { font-size: 12px; color: var(--muted-3); }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-legal-links { list-style: none; display: flex; gap: 20px; padding: 0; margin: 0; }
.footer-legal-links a { font-size: 12px; color: var(--muted-3); text-decoration: none; transition: color .2s; cursor: pointer; }
.footer-legal-links a:hover { color: var(--coral-dark); }

@media (max-width: 575.98px) {
    .footer-bottom-inner { flex-direction: column; text-align: center; }
    .footer-brand { justify-content: center; }
    .footer-desc { max-width: 100%; text-align: center; }
}

/* ── BREADCRUMB (used by page-sample.php) ── */
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted-3); padding: 12px 0 0; }
.breadcrumb a { color: var(--coral); text-decoration: none; font-weight: 500; cursor: pointer; }
.breadcrumb a:hover { text-decoration: underline; }

/* ── SCROLL REVEAL (cosmetic fade-in, applied via inc/js/scroll-reveal.js) ── */
@keyframes hgl-reveal { from { transform: translateY(26px); } to { transform: none; } }
[data-reveal] { opacity: 0; }
[data-reveal][data-shown] { opacity: 1; animation: hgl-reveal .7s cubic-bezier(.22,.61,.36,1) both; }
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; animation: none; transform: none; }
}

/* ── BLOG: POST CARDS ──
   Built by hgl_post_card() in functions.php and shared by page-blog.php and
   archive.php. The title's <a> is the card's only link; its ::after stretches
   over the whole card so the card is clickable while screen readers still
   announce a single, correctly-labelled link. */
.post-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.post-card {
    position: relative; display: flex; flex-direction: column; height: 100%;
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: 0 20px 50px -38px rgba(14,30,43,.4);
    transition: transform .3s, box-shadow .3s;
}
.post-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -34px rgba(14,30,43,.5); }
.post-card-media { display: block; overflow: hidden; background: var(--cream-alt); }
.post-card-img {
    display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover;
    transition: transform .5s ease;
}
.post-card:hover .post-card-img { transform: scale(1.04); }
.post-card-body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 22px; }
.post-card-title { font-size: 19px; line-height: 1.3; margin: 12px 0 0; }
.post-card-title a { color: var(--ink); text-decoration: none; transition: color .2s; }
.post-card:hover .post-card-title a { color: var(--coral-dark); }
/* Stretched hit area — see note above. */
.post-card-title a::after { content: ''; position: absolute; inset: 0; }
.post-card-title a:focus-visible { outline: none; }
.post-card:focus-within { outline: 2.5px solid var(--coral-light); outline-offset: 4px; }
.post-card-excerpt {
    margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted-1);
    flex: 1;
}
/* Card footer holds just the "Read article" CTA now — no date (a publish date
   ages an evergreen article badly) and no read time. flex-end keeps the CTA
   right-aligned where it sat when the read time was beside it. */
.post-card-foot {
    display: flex; align-items: center; justify-content: flex-end; gap: 12px;
    margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
}
/* A <span>, not a link — the whole card is already one link. See hgl_post_card(). */
.post-card-cta {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13.5px; font-weight: 600; color: var(--gold-ink); white-space: nowrap;
    transition: color .2s, gap .2s;
}
.post-card:hover .post-card-cta { color: var(--coral-dark); gap: 10px; }
@media (prefers-reduced-motion: reduce) {
    .post-card-cta, .post-card:hover .post-card-cta { transition: none; gap: 6px; }
}
.post-meta-sep { opacity: .6; }
/* Category chip. Hidden entirely when a post is only "Uncategorized". */
.post-chip {
    align-self: flex-start;
    font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: var(--gold-ink); background: rgba(219,165,48,.12);
    padding: 5px 12px; border-radius: 100px;
}
/* Without a photo the card would be a bare box, so give the copy more room. */
.post-card--no-media .post-card-body { padding-top: 28px; }

/* 4-up needs two steps down: 3-up once the ~270px columns would get too tight,
   then 2-up, then a single column on phones. */
@media (max-width: 1199.98px) {
    .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .post-grid { grid-template-columns: 1fr; }
}

/* ── BLOG: ARTICLE BODY ──
   Styles the raw output of the_content(), which we don't control the markup
   of — so every selector here is an element selector scoped to .article-body. */
.article-body { max-width: 100%; margin: 0 auto; }
.article-body > *:first-child { margin-top: 0; }
.article-body p {
    margin: 0 0 1.5rem; font-size: 17.5px; line-height: 1.75; color: var(--muted-1);
}
.article-body h2 {
    font-family: var(--font-serif); font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2;
    color: var(--ink); margin: 3rem 0 1rem;
}
.article-body h3 {
    font-size: 21px; line-height: 1.3; color: var(--ink); margin: 2.25rem 0 .75rem;
}
.article-body ul, .article-body ol { margin: 0 0 1.5rem; padding-left: 1.3rem; }
.article-body li {
    margin-bottom: .6rem; font-size: 17px; line-height: 1.7; color: var(--muted-1);
}
.article-body li::marker { color: var(--coral); }
.article-body a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--coral-dark); }
.article-body strong { color: var(--ink); font-weight: 600; }
.article-body blockquote {
    margin: 2.5rem 0; padding: 28px 32px;
    background: var(--cream-alt); border-left: 4px solid var(--coral); border-radius: 0 16px 16px 0;
}
.article-body blockquote p {
    margin: 0; font-family: var(--font-serif); font-style: italic;
    font-size: 22px; line-height: 1.5; color: var(--ink);
}
.article-body img, .article-body figure { max-width: 100%; height: auto; border-radius: var(--radius-lg); }
.article-body figure { margin: 2.5rem 0; }
.article-body figcaption { margin-top: 10px; font-size: 13.5px; color: var(--muted-3); text-align: center; }
.article-body hr { margin: 3rem 0; border: none; border-top: 1px solid var(--border); }

/* Article header + featured image. */
.article-head { text-align: center; }
.article-head h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.15; margin: 20px 0 0; }
.article-meta {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
    margin: 18px 0 0; font-size: 14px; color: var(--muted-3);
}
.article-hero-img {
    display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover;
    border-radius: var(--radius-lg); margin-top: 44px;
}

/* Previous/next article links at the foot of a post. */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.post-nav-link {
    display: flex; flex-direction: column; gap: 8px;
    padding: 24px 28px; background: var(--white);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    text-decoration: none; transition: border-color .2s, transform .3s;
}
.post-nav-link:hover { border-color: var(--coral); transform: translateY(-4px); }
.post-nav-link .post-nav-dir {
    font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: var(--gold-ink);
}
.post-nav-link .post-nav-title { font-size: 17px; line-height: 1.35; color: var(--ink); font-weight: 600; }
.post-nav-link--next { text-align: right; align-items: flex-end; }
@media (max-width: 575.98px) {
    .post-nav { grid-template-columns: 1fr; }
    .post-nav-link--next { text-align: left; align-items: flex-start; }
}

/* ── BLOG: PAGINATION ── */
.hgl-pagination { display: flex; justify-content: center; margin-top: 50px; }
.hgl-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0 14px; margin: 0 4px;
    border: 1px solid var(--border); border-radius: 10px;
    font-size: 14.5px; font-weight: 600; color: var(--navy); text-decoration: none;
    transition: background .2s, border-color .2s, color .2s;
}
.hgl-pagination .page-numbers:hover { background: var(--cream-alt); border-color: var(--coral); }
.hgl-pagination .page-numbers.current { background: var(--navy); border-color: var(--navy); color: var(--coral); }
.hgl-pagination .page-numbers.dots { border-color: transparent; }

/* ══════════════════════════════════════════════════════════
   UTILITY CLASSES — mechanically generated from every inline
   style attribute that used to live in the page templates.
   Each class is named u-{property short-code}-{value slug} and
   maps to exactly one CSS declaration, so the rendered output is
   pixel-identical to the inline styles it replaced. Shared values
   (e.g. u-mt-n16px) are reused across every element that had that
   exact inline style, which is the de-duplication win.
   ══════════════════════════════════════════════════════════ */
.u-ai-baseline { align-items: baseline; }
.u-ai-center { align-items: center; }
.u-ai-flex-end { align-items: flex-end; }
.u-ai-flex-start { align-items: flex-start; }
.u-border-bottom-light { border-bottom: 1px solid rgba(255,255,255,.12); }
.u-border-bottom { border-bottom: 1px solid var(--border); }
.u-border { border: 1px solid var(--border); }
.u-bd-none { border: none; }
.u-bdc-coral { border-color: var(--coral); }
.u-bg-coral { background: var(--coral); }
.u-bg-cream { background: var(--cream); }
.u-bg-cream-alt { background: var(--cream-alt); }
.u-bg-navy { background: var(--navy); }
.u-bg-navy-darker { background: var(--navy-darker); }
.u-bg-coral-tint { background: rgba(219,165,48,.1); }
.u-bg-white { background: var(--white); }
.u-border-left-accent { border-left: 4px solid var(--coral); }
.u-br-full { border-radius: 100px; }
.u-br-md { border-radius: 12px; }
.u-br-lg { border-radius: 14px; }
.u-br-sm { border-radius: 8px; }
.u-border-top-light { border-top: 1px solid rgba(255,255,255,.14); }
.u-border-top-dark { border-top: 1px solid var(--border-dark); }
.u-c-coral { color: var(--gold-ink); }
.u-c-coral2 { color: var(--coral); }
.u-c-coral-light { color: var(--coral-light); }
.u-c-cream-text { color: var(--cream-text); }
.u-c-white { color: #fff; }
.u-c-ink { color: var(--ink); }
.u-c-text-muted { color: var(--muted-1); }
.u-c-text-muted-dark { color: var(--muted-2); }
.u-c-text-subtle { color: var(--muted-3); }
.u-c-text-faint-dark { color: var(--muted-4); }

.u-c-cream-faint { color: rgba(243,243,243,.55); }
.u-c-cream-muted { color: rgba(243,243,243,.6); }
.u-cur-pointer { cursor: pointer; }
.u-d-block { display: block; }
.u-d-flex { display: flex; }
.u-d-grid { display: grid; }
.u-fd-column { flex-direction: column; }
.u-ff-sans { font-family: var(--font-sans); }
.u-ff-serif { font-family: var(--font-serif); }
.u-flex-grow { flex: 1; }
.u-flex-none { flex: none; }
.u-flexwrap-wrap { flex-wrap: wrap; }
.u-fs-fluid-sm { font-size: clamp(24px,3vw,32px); }
.u-fs-fluid-md { font-size: clamp(28px,3.6vw,42px); }
.u-fs-fluid-xl { font-size: clamp(34px,4vw,50px); }
.u-fs-3xs { font-size: 10.5px; }
.u-fs-2xs-plus { font-size: 11.5px; }
.u-fs-2xs { font-size: 11px; }
.u-fs-xs-plus { font-size: 12.5px; }
.u-fs-xs { font-size: 12px; }
.u-fs-sm-plus { font-size: 13.5px; }
.u-fs-sm { font-size: 13px; }
.u-fs-base-plus { font-size: 14.5px; }
.u-fs-base { font-size: 14px; }
.u-fs-md-plus { font-size: 15.5px; }
.u-fs-md { font-size: 15px; }
.u-fs-lg { font-size: 16.5px; }
.u-fs-lg-plus { font-size: 18px; }
.u-fs-xl { font-size: 19px; }
.u-fs-xl-plus { font-size: 20px; }
.u-fs-2xl { font-size: 22px; }
.u-fs-3xl { font-size: 24px; }
.u-fs-3xl-plus { font-size: 26px; }
.u-fs-4xl-plus { font-size: 30px; }
.u-fs-5xl { font-size: 34px; }
.u-fs-5xl-plus { font-size: 36px; }
.u-fs-6xl { font-size: 40px; }
.u-fst-italic { font-style: italic; }
.u-fst-normal { font-style: normal; }
.u-fw-medium { font-weight: 500; }
.u-fw-semibold { font-weight: 600; }
.u-fw-bold { font-weight: 700; }
.u-gap-none { gap: 0; }
.u-gap-sm { gap: 10px; }
.u-gap-sm-plus { gap: 12px; }
.u-gap-md { gap: 14px; }
.u-gap-md-plus { gap: 16px; }
.u-gap-lg { gap: 18px; }
.u-gap-lg-plus { gap: 20px; }
.u-gap-xl { gap: 24px; }
.u-gap-2xl { gap: 40px; }
.u-gtc-auto-fill { grid-template-columns: auto 1fr; }
.u-gtc-two-col { grid-template-columns: repeat(2,1fr); }
.u-h-full { height: 100%; }
.u-h-md { height: 56px; }
.u-jc-center { justify-content: center; }
.u-jc-flex-start { justify-content: flex-start; }
.u-jc-space-between { justify-content: space-between; }
.u-lh-tight { line-height: 1; }
.u-lh-snug { line-height: 1.1; }
.u-lh-normal { line-height: 1.4; }
.u-lh-relaxed { line-height: 1.5; }
.u-lh-relaxed-plus { line-height: 1.55; }
.u-lh-loose { line-height: 1.6; }
.u-lh-looser { line-height: 1.7; }
.u-ls-none { letter-spacing: 0; }
.u-ls-snug { letter-spacing: 1.5px; }
.u-ls-tight { letter-spacing: 1px; }
.u-ls-wide { letter-spacing: 3px; }
.u-m-none { margin: 0; }
.u-m-center { margin: 0 auto; }
.u-m-center-gap-lg { margin: 0 auto 2rem; }
.u-m-stack-sm { margin: 14px 0 8px; }
.u-m-stack-sm-plus { margin: 16px 0 12px; }
.u-m-top-md { margin: 20px 0 0; }
.u-m-top-md-plus { margin: 26px 0 0; }
.u-m-top-lg { margin: 34px 0 0; }
.u-m-top-xs { margin: 4px 0 0; }
.u-m-center-top-lg { margin: 60px auto 0; }
.u-m-center-top-xl { margin: 70px auto 0; }
.u-mb-none { margin-bottom: 0; }
.u-mb-sm { margin-bottom: 8px; }
.u-mb-2xl-plus-rem { margin-bottom: 1.5rem; }
.u-mb-sm-plus { margin-bottom: 10px; }
.u-mb-xl-plus { margin-bottom: 20px; }
.u-mb-2xl { margin-bottom: 22px; }
.u-mb-8xl-rem { margin-bottom: 3rem; }
.u-mb-4xl { margin-bottom: 30px; }
.u-mb-7xl { margin-bottom: 44px; }
.u-ml-auto { margin-left: auto; }
.u-ml-none { margin-left: 0; }
.u-mr-auto { margin-right: auto; }
.u-mt-xl-plus-rem { margin-top: 1.25rem; }
.u-mt-2xl-plus-rem { margin-top: 1.5rem; }
.u-mt-sm-plus { margin-top: 10px; }
.u-mt-md { margin-top: 12px; }
.u-mt-lg { margin-top: 14px; }
.u-mt-lg-plus { margin-top: 16px; }
.u-mt-6xl-rem { margin-top: 2.5rem; }
.u-mt-xl-plus { margin-top: 20px; }
.u-mt-3xl { margin-top: 26px; }
.u-mt-3xs { margin-top: 2px; }
.u-mt-4xl-plus-rem { margin-top: 2rem; }
.u-mt-4xl { margin-top: 30px; }
.u-mt-5xl { margin-top: 34px; }
.u-mt-5xl-plus { margin-top: 38px; }
.u-mt-2xs { margin-top: 4px; }
.u-mt-10xl-rem { margin-top: 4rem; }
.u-mt-xs { margin-top: 6px; }
.u-mt-sm { margin-top: 8px; }
.u-mw-lg { max-width: 1000px; }
.u-mw-xl { max-width: 1120px; }
.u-mw-2xl { max-width: 1180px; }
.u-mw-3xl { max-width: 1220px; }
.u-mw-xs { max-width: 400px; }
.u-mw-sm { max-width: 520px; }
.u-mw-md { max-width: 640px; }
.u-op-heavy { opacity: .75; }
.u-p-row-xs { padding: 12px 0; }
.u-p-tight { padding: 14px 18px; }
.u-p-lg-plus-rem { padding: 1rem; }
.u-p-xl-plus { padding: 20px; }
.u-p-comfortable { padding: 20px 26px; }
.u-p-comfortable-plus { padding: 22px 26px; }
.u-p-2xl-plus { padding: 24px; }
.u-p-3xl { padding: 26px; }
.u-p-roomy { padding: 26px 34px; }
.u-p-3xl-plus { padding: 28px; }
.u-p-4xl { padding: 30px; }
.u-p-4xl-plus { padding: 32px; }
.u-p-spacious { padding: 38px 32px; }
.u-p-section { padding: 100px 0; }
.u-p-chip { padding: 4px 12px; }
.u-p-chip-plus { padding: 5px 12px; }
.u-p-pill-wide { padding: 8px 4px; }
.u-p-pill-md { padding: 9px 20px; }
.u-pb-sm-plus { padding-bottom: 11px; }
.u-pb-11xl { padding-bottom: 70px; }
.u-pos-absolute { position: absolute; }
.u-pos-sticky { position: sticky; }
.u-pt-lg { padding-top: 14px; }
.u-pt-xl-plus { padding-top: 20px; }
.u-pt-2xl-plus { padding-top: 24px; }
.u-pt-4xl { padding-top: 30px; }
.u-right-offset { right: 20px; }
.u-ta-center { text-align: center; }
.u-ta-left { text-align: left; }
.u-top-sticky-offset { top: 104px; }
.u-top-badge-offset { top: -12px; }
.u-tt-none { text-transform: none; }
.u-tt-uppercase { text-transform: uppercase; }
.u-w-full { width: 100%; }
.u-w-sm { width: 34px; }
.u-w-md { width: 56px; }
.u-ws-nowrap { white-space: nowrap; }

.post-type-archive-partner_hotel .feature-card{
 min-height: 320px !important;
}