/* ==========================================================================
   SHIFTO — Public website styles
   Every colour, font and radius comes from a CSS custom property defined by
   theme.css.php, which reads the active theme from the database. There are no
   hard-coded brand values in this file.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* The `hidden` attribute must win over any component display rule
   (.sh-alert uses display:flex, which would otherwise override it). */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-base, 1.65);
    color: var(--body);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--heading);
    font-weight: var(--fw-heading, 700);
    line-height: 1.22;
    margin: 0 0 .6em;
    letter-spacing: -.015em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

p { margin: 0 0 1rem; }

a {
    color: var(--link);
    text-decoration: none;
    transition: color .18s ease;
}
a:hover { color: var(--primary); }

img { max-width: 100%; height: auto; display: block; }

/* Visible focus for keyboard users, suppressed for mouse clicks. */
:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    background: var(--primary-fill, var(--primary));
    color: var(--on-primary, #fff);
    padding: .75rem 1.25rem;
    border-radius: 0 0 var(--radius) 0;
    font-weight: 600;
}
.skip-link:focus { left: 0; color: var(--on-primary, #fff); }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.sh-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 20px;
}

.sh-container--wide { max-width: calc(var(--container) + 200px); }
.sh-container--full { max-width: none; }

.sh-section { padding-block: var(--section-y); position: relative; }
.sh-section--tight { padding-block: calc(var(--section-y) * .6); }

.sh-section-head {
    max-width: 720px;
    margin: 0 auto 3rem;
    text-align: center;
}
.sh-section-head p {
    font-size: 1.06rem;
    color: var(--body);
    opacity: .88;
    margin: 0;
}
.sh-section-head--left { margin-inline: 0; text-align: left; }

.sh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: .85rem;
}
.sh-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
}
.sh-section-head .sh-eyebrow::before { display: none; }

.sh-grid { display: grid; gap: 1.5rem; }
.sh-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sh-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sh-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.sh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .8rem 1.6rem;
    border-radius: var(--radius-btn);
    border: 2px solid transparent;
    font-weight: 600;
    font-size: .96rem;
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
    white-space: nowrap;
}

.sh-btn:active { transform: translateY(1px); }

.sh-btn--primary {
    /* --on-btn is computed from --btn by ThemeService so the label always
       reaches WCAG AA on whatever colour the admin chose, rather than being
       hard-coded to white and failing on a mid-tone brand colour. */
    background: var(--btn-fill, var(--btn));
    border-color: var(--btn-fill, var(--btn));
    color: var(--on-btn, #fff);
    box-shadow: 0 6px 18px rgba(var(--primary-rgb), .28);
}
.sh-btn--primary:hover {
    background: var(--btn-hover-fill, var(--btn-hover));
    border-color: var(--btn-hover-fill, var(--btn-hover));
    color: var(--on-btn-hover, var(--on-btn, #fff));
    box-shadow: 0 10px 26px rgba(var(--primary-rgb), .36);
    transform: translateY(-2px);
}

.sh-btn--secondary {
    background: var(--secondary-fill, var(--secondary));
    border-color: var(--secondary-fill, var(--secondary));
    color: var(--on-secondary, #fff);
}
.sh-btn--secondary:hover { background: var(--secondary-dark); border-color: var(--secondary-dark); color: var(--on-secondary, #fff); }

.sh-btn--outline {
    background: transparent;
    border-color: currentColor;
    color: var(--heading);
}
.sh-btn--outline:hover { background: var(--heading); border-color: var(--heading); color: #fff; }

 /* Designed for a dark photographic ground, where white-on-translucent-white
    is legible. Over a mid-tone brand fill it is not (2.4:1), so the border is
    opaque and the label carries a shadow-free solid white at full strength;
    sections with a light or mid-tone background should use --outline instead. */
.sh-btn--ghost-light {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .75);
    color: #fff;
    backdrop-filter: blur(6px);
}
.sh-btn--ghost-light:hover { background: rgba(255, 255, 255, .28); color: #fff; }

/* The inverse of --primary: a solid light button for use ON a filled brand
   band, where a translucent one cannot reach AA. */
.sh-btn--on-brand {
    background: var(--card, #fff);
    border-color: var(--card, #fff);
    color: var(--heading);
}
.sh-btn--on-brand:hover { background: var(--card, #fff); color: var(--primary-ink, var(--primary)); transform: translateY(-2px); }

/* The outline partner to --on-brand, for the secondary action on a filled
   brand band. The label and border are the band's own text colour, so it
   inherits whatever contrast that colour was chosen to have — unlike a
   translucent white wash, which lands somewhere unpredictable. */
.sh-btn--outline-on-brand {
    background: transparent;
    border-color: currentColor;
    color: inherit;
}
.sh-btn--outline-on-brand:hover {
    background: var(--card, #fff);
    border-color: var(--card, #fff);
    color: var(--heading);
    transform: translateY(-2px);
}

.sh-btn--sm { padding: .5rem 1rem; font-size: .86rem; }
.sh-btn--lg { padding: 1rem 2rem; font-size: 1.05rem; }
.sh-btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.sh-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 1.75rem;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    height: 100%;
}
.sh-card--hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(var(--primary-rgb), .35);
}

.sh-card__icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 1.45rem;
    margin-bottom: 1.1rem;
}

.sh-card h3 { font-size: 1.16rem; margin-bottom: .5rem; }
.sh-card p  { font-size: .95rem; margin-bottom: 0; }

.sh-card__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1rem;
    font-weight: 600;
    font-size: .92rem;
    color: var(--primary);
}
.sh-card__link:hover { gap: .7rem; }

/* --------------------------------------------------------------------------
   Header (rendered from the database by HeaderService)
   -------------------------------------------------------------------------- */

.sh-header-row {
    width: 100%;
    position: relative;
    z-index: 100;
}
.sh-header-row--sticky {
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 2px 18px rgba(11, 31, 63, .10);
}

.sh-header-row__inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: 44px;
}

.sh-header-col { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.sh-header-col--left   { flex: 0 0 auto; margin-right: auto; }
.sh-header-col--center { flex: 1 1 auto; justify-content: center; }
.sh-header-col--right  { flex: 0 0 auto; margin-left: auto; }

.sh-logo img { max-height: 58px; width: auto; }
.sh-logo--mobile { display: none; }

.sh-header-contact {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    color: inherit;
    opacity: .92;
}
.sh-header-contact:hover { opacity: 1; color: var(--primary); }
.sh-header-contact i { color: var(--primary); font-size: 1rem; }
.sh-header-contact__label { opacity: .72; }

.sh-social { display: inline-flex; gap: .45rem; }
.sh-social a {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: inherit;
    font-size: .9rem;
    transition: background .18s ease, transform .18s ease;
}
.sh-social a:hover { background: var(--primary-fill, var(--primary)); color: var(--on-primary, #fff); transform: translateY(-2px); }

.sh-announcement {
    font-size: .88rem;
    text-align: center;
    font-weight: 500;
}

/* Primary navigation */

.sh-nav { display: flex; align-items: center; gap: .25rem; }
.sh-nav__item { position: relative; }

.sh-nav__link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .65rem .9rem;
    font-size: .95rem;
    font-weight: 500;
    color: inherit;
    border-radius: var(--radius-btn);
    white-space: nowrap;
}
.sh-nav__link:hover,
.sh-nav__item--active > .sh-nav__link {
    color: var(--primary);
    background: rgba(255, 255, 255, .08);
}
.sh-nav__link .caret { font-size: .68rem; opacity: .7; transition: transform .18s ease; }
.sh-nav__item:hover > .sh-nav__link .caret { transform: rotate(180deg); }

.sh-dropdown,
.sh-mega {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 1040;
}

.sh-dropdown { min-width: 230px; padding: .55rem; }
.sh-mega {
    left: 50%;
    transform: translate(-50%, 10px);
    width: min(940px, calc(100vw - 40px));
    padding: 1.75rem;
}

.sh-nav__item:hover > .sh-dropdown,
.sh-nav__item:focus-within > .sh-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

.sh-nav__item:hover > .sh-mega,
.sh-nav__item:focus-within > .sh-mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.sh-dropdown a {
    display: block;
    padding: .58rem .8rem;
    border-radius: var(--radius-btn);
    color: var(--heading);
    font-size: .92rem;
}
.sh-dropdown a:hover { background: var(--primary-soft); color: var(--primary); }

.sh-mega__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.75rem; }
.sh-mega__heading {
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--primary);
    font-weight: 700;
    margin-bottom: .9rem;
}
.sh-mega__item {
    display: flex;
    gap: .75rem;
    padding: .6rem;
    border-radius: var(--radius-btn);
    color: var(--heading);
}
.sh-mega__item:hover { background: var(--primary-soft); }
.sh-mega__item i {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 9px;
    background: var(--primary-soft);
    color: var(--primary);
    flex-shrink: 0;
}
.sh-mega__item strong { display: block; font-size: .93rem; }
.sh-mega__item span   { font-size: .81rem; color: var(--body); opacity: .8; }
.sh-mega__links a { display: block; padding: .4rem 0; font-size: .92rem; color: var(--heading); }
.sh-mega__links a:hover { color: var(--primary); padding-left: .3rem; }

/* Mobile navigation */

.sh-burger {
    display: none;
    width: 44px; height: 44px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: transparent;
    border-radius: var(--radius-btn);
    color: inherit;
    font-size: 1.25rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.sh-mobile-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 88vw);
    background: var(--card);
    z-index: 2000;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
    padding: 1.25rem;
    box-shadow: -8px 0 40px rgba(0, 0, 0, .2);
}
.sh-mobile-nav.is-open { transform: translateX(0); }

.sh-mobile-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid var(--border);
}
.sh-mobile-nav a {
    display: block;
    padding: .8rem .6rem;
    color: var(--heading);
    font-weight: 500;
    border-radius: var(--radius-btn);
}
.sh-mobile-nav a:hover { background: var(--primary-soft); color: var(--primary); }
.sh-mobile-nav__sub a { padding-left: 1.6rem; font-size: .92rem; opacity: .9; }

.sh-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 15, 30, .55);
    z-index: 1900;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
}
.sh-overlay.is-open { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.sh-hero { position: relative; overflow: hidden; }
.sh-hero::after {
    content: "";
    position: absolute;
    width: 620px; height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--primary-rgb), .22), transparent 68%);
    top: -220px; right: -180px;
    pointer-events: none;
}

.sh-hero__grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 3.5rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

.sh-hero h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.4rem); margin-bottom: 1.1rem; }
.sh-hero p  { color: rgba(255, 255, 255, .86); font-size: 1.1rem; max-width: 56ch; }

.sh-hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }

.sh-hero__highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
}
.sh-hero__highlights li {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: rgba(255, 255, 255, .9);
    font-size: .92rem;
    font-weight: 500;
}
.sh-hero__highlights i { color: var(--primary); }

.sh-hero__media { display: grid; place-items: center; }
.sh-hero__media img { max-width: 420px; filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .35)); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.sh-form-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lg);
    padding: 2rem;
}

.sh-field { margin-bottom: 1.1rem; }

.sh-label {
    display: block;
    font-size: .86rem;
    font-weight: 600;
    color: var(--heading);
    margin-bottom: .42rem;
}
.sh-label .req { color: #dc3545; margin-left: .15rem; }

.sh-input,
.sh-select,
.sh-textarea {
    width: 100%;
    padding: .72rem .9rem;
    font-family: inherit;
    font-size: .95rem;
    color: var(--heading);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    transition: border-color .16s ease, box-shadow .16s ease;
}
.sh-input:focus,
.sh-select:focus,
.sh-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .16);
}
.sh-input.is-invalid,
.sh-select.is-invalid,
.sh-textarea.is-invalid { border-color: #dc3545; }

.sh-textarea { min-height: 120px; resize: vertical; }
.sh-select:disabled { background: var(--muted-bg); opacity: .7; cursor: not-allowed; }

.sh-help  { font-size: .8rem; opacity: .72; margin-top: .3rem; }
.sh-error { font-size: .82rem; color: #dc3545; margin-top: .3rem; display: block; }

.sh-check {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .92rem;
    cursor: pointer;
    margin-bottom: .55rem;
}
.sh-check input { margin-top: .22rem; width: 17px; height: 17px; accent-color: var(--primary); flex-shrink: 0; }

.sh-chipset { display: flex; flex-wrap: wrap; gap: .55rem; }
.sh-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .95rem;
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: .88rem;
    cursor: pointer;
    background: var(--bg);
    transition: all .16s ease;
    user-select: none;
}
.sh-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.sh-chip:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 600;
}

/* Honeypot — hidden from people, visible to naive bots. */
.sh-hp {
    position: absolute !important;
    left: -9999px !important;
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Steps / process
   -------------------------------------------------------------------------- */

.sh-steps { display: grid; gap: 1.5rem; grid-template-columns: repeat(5, 1fr); counter-reset: step; }

.sh-step { position: relative; padding-top: 1rem; }
.sh-step__num {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
    opacity: .28;
    line-height: 1;
    margin-bottom: .55rem;
}
.sh-step h3 { font-size: 1.03rem; margin-bottom: .4rem; }
.sh-step p  { font-size: .9rem; }

.sh-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.6rem;
    right: -.75rem;
    width: 1.5rem;
    height: 2px;
    background: var(--border);
}

/* --------------------------------------------------------------------------
   Statistics
   -------------------------------------------------------------------------- */

.sh-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.sh-stat__value {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 800;
    /* currentColor, not a brand colour. This block is dropped onto a light
       card on one page and a navy band on another, and a fixed orange cannot
       pass AA on both — it measured 2.55:1 on the light card and 2.7:1 on the
       navy. Inheriting the section's own text colour is correct by
       construction, whatever background an operator picks in the builder. */
    color: currentColor;
    line-height: 1.1;
}
.sh-stat__label { font-size: .92rem; opacity: .85; margin-top: .35rem; }

/* --------------------------------------------------------------------------
   FAQ (accordion)
   -------------------------------------------------------------------------- */

.sh-faq { max-width: 860px; margin-inline: auto; }

.sh-faq__item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    margin-bottom: .8rem;
    overflow: hidden;
}

.sh-faq__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    background: none;
    border: 0;
    text-align: left;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--heading);
    cursor: pointer;
}
.sh-faq__q i { color: var(--primary); transition: transform .22s ease; flex-shrink: 0; }
.sh-faq__item.is-open .sh-faq__q i { transform: rotate(180deg); }

.sh-faq__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s ease, padding .28s ease;
    padding: 0 1.35rem;
    font-size: .95rem;
}
.sh-faq__item.is-open .sh-faq__a { max-height: 640px; padding: 0 1.35rem 1.3rem; }

/* --------------------------------------------------------------------------
   Testimonials / reviews
   -------------------------------------------------------------------------- */

.sh-quote { position: relative; padding-top: 1.5rem; }
.sh-quote::before {
    content: "\201C";
    position: absolute;
    top: -.6rem; left: 0;
    font-size: 4rem;
    line-height: 1;
    color: var(--primary);
    opacity: .28;
    font-family: Georgia, serif;
}
.sh-quote p { font-size: .98rem; font-style: italic; }

/* Star glyphs are text, so they need text contrast. The usual review-site
   amber (#f5a524) is 2.0:1 on white; this is the same hue taken down far
   enough to pass AA while still reading as gold. */
.sh-rating { color: #8A5A00; letter-spacing: 1px; font-size: .95rem; }

.sh-person { display: flex; align-items: center; gap: .8rem; margin-top: 1.1rem; }
.sh-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--secondary-fill, var(--secondary));
    color: var(--on-secondary, #fff);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .9rem;
    flex-shrink: 0;
}
.sh-person strong { display: block; font-size: .93rem; color: var(--heading); }
.sh-person span   { font-size: .82rem; opacity: .75; }

/* --------------------------------------------------------------------------
   Tracking timeline
   -------------------------------------------------------------------------- */

.sh-progress {
    height: 10px;
    background: var(--border);
    border-radius: 100px;
    overflow: hidden;
    margin: 1.25rem 0;
}
.sh-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 100px;
    transition: width .6s ease;
}

.sh-timeline { position: relative; padding-left: 2.1rem; }
.sh-timeline::before {
    content: "";
    position: absolute;
    left: .52rem;
    top: .4rem;
    bottom: .4rem;
    width: 2px;
    background: var(--border);
}

.sh-timeline__item { position: relative; padding-bottom: 1.6rem; }
.sh-timeline__item::before {
    content: "";
    position: absolute;
    left: -1.85rem;
    top: .32rem;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--card);
    border: 3px solid var(--border);
}
.sh-timeline__item--done::before { border-color: var(--primary); background: var(--primary); }
.sh-timeline__item--current::before {
    border-color: var(--primary);
    background: var(--card);
    box-shadow: 0 0 0 5px rgba(var(--primary-rgb), .18);
}

.sh-timeline__time { font-size: .8rem; opacity: .68; }
.sh-timeline__title { font-weight: 600; color: var(--heading); font-size: .96rem; }
.sh-timeline__desc  { font-size: .89rem; margin-top: .15rem; }

/* --------------------------------------------------------------------------
   Footer (rendered from the database by FooterService)
   -------------------------------------------------------------------------- */

/* rgba(255,255,255,.74) on the navy footer is 7.9:1, comfortably AA, and the
   softness is deliberate. */
.sh-footer { background: var(--footer-bg); color: rgba(255, 255, 255, .74); }
.sh-footer h1, .sh-footer h2, .sh-footer h3,
.sh-footer h4, .sh-footer h5, .sh-footer h6 { color: #fff; }

/* :not(.sh-btn) matters. Without it this rule (0,2,1) outranks
   .sh-btn--primary (0,1,0) and repaints a button's label translucent white on
   its own orange fill — 2.1:1, on the footer's most important call to action.
   The same specificity trap bit the admin panel's buttons in phase 1; a
   container-scoped link colour must always exclude the button classes. */
.sh-footer a:not(.sh-btn) { color: rgba(255, 255, 255, .74); }
.sh-footer a:not(.sh-btn):hover { color: var(--primary-light, var(--primary)); }
.sh-footer .sh-social a { background: rgba(255, 255, 255, .1); }

.sh-footer-row { position: relative; }
.sh-footer-row--bordered { border-top: 1px solid rgba(255, 255, 255, .1); }
/* minmax(0, 1fr), not 1fr: a bare `1fr` track has an automatic minimum, so a
   wide child (the newsletter input) pushes the whole footer past the viewport
   on a narrow phone instead of shrinking. */
.sh-footer-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; }
.sh-footer-grid > * { min-width: 0; }

.sh-footer__heading {
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
    margin-bottom: 1.1rem;
}
.sh-footer__list { list-style: none; margin: 0; padding: 0; }
.sh-footer__list li { margin-bottom: .55rem; font-size: .92rem; }
.sh-footer__logo img { max-height: 56px; margin-bottom: 1rem; }

.sh-footer__contact-item {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    margin-bottom: .85rem;
    font-size: .92rem;
}
.sh-footer__contact-item i { color: var(--primary); margin-top: .18rem; }

.sh-newsletter { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.sh-newsletter input {
    flex: 1 1 240px;
    min-width: 0; /* an input's intrinsic min-content width would overflow a phone */
    padding: .8rem 1rem;
    border-radius: var(--radius-btn);
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-family: inherit;
    font-size: .94rem;
}
.sh-newsletter input::placeholder { color: rgba(255, 255, 255, .55); }

.sh-badges { display: flex; flex-wrap: wrap; gap: .6rem; }
.sh-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 100px;
    font-size: .82rem;
}
.sh-badge i { color: var(--primary); }

.sh-copyright { font-size: .87rem; }
.sh-legal { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: flex-end; font-size: .87rem; }

/* --------------------------------------------------------------------------
   Alerts, badges, breadcrumbs, empty states
   -------------------------------------------------------------------------- */

.sh-alert {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .95rem 1.15rem;
    border-radius: var(--radius);
    border-left: 4px solid;
    margin-bottom: 1rem;
    font-size: .93rem;
}
.sh-alert i { font-size: 1.1rem; margin-top: .1rem; flex-shrink: 0; }
.sh-alert--success { background: #e8f6ee; border-color: #198754; color: #0f5132; }
.sh-alert--danger  { background: #fdecea; border-color: #dc3545; color: #842029; }
.sh-alert--warning { background: #fff6e5; border-color: #ffc107; color: #664d03; }
.sh-alert--info    { background: #e7f3fb; border-color: #0dcaf0; color: #055160; }

/* --on-primary-soft, not --primary-ink: a pill sits on a 10% brand wash, which
   is darker than a white or grey card, so it needs the darker of the two inks
   to reach AA. ThemeService computes both against the real composited grounds. */
.sh-pill { color: var(--on-primary-soft, var(--primary-ink, var(--primary))); }
.sh-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .7rem;
    border-radius: 100px;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.sh-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    font-size: .86rem;
    padding: 1rem 0;
    opacity: .85;
}
.sh-breadcrumb li + li::before { content: "/"; margin-right: .5rem; opacity: .5; }
.sh-breadcrumb li { display: flex; align-items: center; }

.sh-page-head {
    background: var(--muted-bg);
    border-bottom: 1px solid var(--border);
    padding-block: 2.5rem;
}
.sh-page-head h1 { margin-bottom: .4rem; }

.sh-empty {
    text-align: center;
    padding: 3.5rem 1.5rem;
    color: var(--body);
}
.sh-empty i { font-size: 2.6rem; color: var(--border); display: block; margin-bottom: 1rem; }

/* --------------------------------------------------------------------------
   Mobile sticky action bar
   -------------------------------------------------------------------------- */

.sh-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    background: var(--card);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 22px rgba(11, 31, 63, .12);
    z-index: 1500;
    padding-bottom: env(safe-area-inset-bottom);
}
.sh-sticky-bar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .18rem;
    padding: .7rem .4rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--heading);
    border-right: 1px solid var(--border);
}
.sh-sticky-bar a:last-child { border-right: 0; }
.sh-sticky-bar a i { font-size: 1.18rem; color: var(--primary); }
.sh-sticky-bar a.is-primary { background: var(--primary-fill, var(--primary)); color: var(--on-primary, #fff); }
.sh-sticky-bar a.is-primary i { color: var(--on-primary, #fff); }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.text-center { text-align: center; }
.text-white  { color: #fff !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.w-100 { width: 100%; }
.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.muted { opacity: .75; }
.small { font-size: .86rem; }
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.on-dark { color: rgba(255, 255, 255, .85); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark .sh-card { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); }
.on-dark .sh-card h3 { color: #fff; }
.on-dark .sh-card p  { color: rgba(255, 255, 255, .8); }
.on-dark .sh-section-head p { color: rgba(255, 255, 255, .82); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .sh-steps    { grid-template-columns: repeat(3, 1fr); }
    .sh-step::after { display: none; }
    .sh-grid--4  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
    :root { --section-y: 60px; }

    .sh-header-col--center { display: none; }
    .sh-burger { display: inline-flex; }

    .sh-hero__grid { grid-template-columns: 1fr; gap: 2.25rem; }
    .sh-hero__media { display: none; }

    .sh-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .sh-stats   { grid-template-columns: repeat(2, 1fr); }

    .sh-footer-grid > [class*="col-"] { grid-column: span 6 !important; }
    .sh-legal { justify-content: flex-start; }
}

@media (max-width: 768px) {
    body { padding-bottom: 62px; } /* room for the sticky bar */

    .sh-sticky-bar { display: flex; }

    .sh-grid--2,
    .sh-grid--3,
    .sh-grid--4 { grid-template-columns: 1fr; }

    .sh-steps { grid-template-columns: 1fr; }
    .sh-stats { grid-template-columns: repeat(2, 1fr); }

    .sh-form-card { padding: 1.35rem; }
    .sh-card      { padding: 1.35rem; }

    .sh-logo img       { max-height: 44px; }
    .sh-logo--desktop  { display: none; }
    .sh-logo--mobile   { display: block; }

    .sh-hero__actions .sh-btn { flex: 1 1 100%; }
    .sh-hero__highlights { gap: .85rem 1.25rem; }

    /* One real column, not a 12-of-12 span: a span across all 12 tracks still
       includes the 11 internal 32px gaps (352px), which on its own is wider
       than a 360px phone's content box. Collapse the grid itself instead. */
    .sh-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .sh-footer-grid > [class*="col-"] { grid-column: auto !important; }

    .sh-section-head { margin-bottom: 2rem; }
}

@media (max-width: 480px) {
    :root { --fs-h1: 1.9rem; --fs-h2: 1.55rem; --fs-h3: 1.28rem; }
    .sh-container { padding-inline: 16px; }
    .sh-stats { grid-template-columns: 1fr; }
}

@media print {
    .sh-header-row, .sh-footer, .sh-sticky-bar, .sh-burger, .sh-mobile-nav { display: none !important; }
    body { padding: 0; color: #000; background: #fff; }
    a[href]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Responsive grid utilities
   --------------------------------------------------------------------------
   An inline `style="grid-template-columns:…"` CANNOT be overridden by a media
   query, so a multi-column grid written inline never stacks on a phone. Every
   fixed multi-column grid in the views therefore uses one of the classes
   below. Keep it that way: put the column template in a class, never inline.

   Breakpoints:
     <= 992px  sidebar layouts collapse (content first, aside beneath)
     <= 768px  every remaining multi-column grid becomes a single column
   ========================================================================== */

.u-cols-2     { grid-template-columns: 1fr 1fr; }
.u-cols-3     { grid-template-columns: repeat(3, 1fr); }
.u-cols-dyn   { grid-template-columns: repeat(var(--u-cols, 1), 1fr); }

.u-side-320   { grid-template-columns: 1fr 320px; }
.u-side-340   { grid-template-columns: 1fr 340px; }
.u-side-fluid { grid-template-columns: 1.5fr 1fr; }
.u-aside-250  { grid-template-columns: 250px 1fr; }

.u-item-row   { grid-template-columns: 2fr 80px 100px auto auto; }

/* Nothing inside a grid cell may force the track wider than the viewport. */
.u-cols-2 > *, .u-cols-3 > *, .u-cols-dyn > *,
.u-side-320 > *, .u-side-340 > *, .u-side-fluid > *,
.u-aside-250 > *, .u-item-row > * { min-width: 0; }

@media (max-width: 992px) {
    .u-side-320,
    .u-side-340,
    .u-side-fluid,
    .u-aside-250 { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .u-cols-2,
    .u-cols-3,
    .u-cols-dyn,
    .u-item-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Device visibility — driven by the header/footer builder
   --------------------------------------------------------------------------
   Every row and every header element stores a per-device visibility flag. The
   renderer turns a false flag into one of these classes, so the switch in the
   builder changes what a visitor actually sees.

   .sh-el wraps a single element only when it has a restriction; `display:
   contents` keeps it a direct flex child of its header column, so adding the
   wrapper cannot change the desktop layout.
   ========================================================================== */

.sh-el { display: contents; }

@media (min-width: 993px) {
    .hide-desktop { display: none !important; }
}
@media (min-width: 769px) and (max-width: 992px) {
    .hide-tablet { display: none !important; }
}
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
}

/* --------------------------------------------------------------------------
   Header overflow safety net
   --------------------------------------------------------------------------
   A header assembled in the builder can end up with more in a column than a
   narrow screen can hold. `overflow-x: clip` stops that from creating a
   page-wide horizontal scrollbar. Unlike `overflow: hidden` it does not turn
   the row into a scroll container, so `position: sticky` still works and the
   mega-menu dropdown is not trapped inside it.
   -------------------------------------------------------------------------- */

@media (max-width: 992px) {
    .sh-header-row__inner { flex-wrap: wrap; row-gap: .5rem; }

    .sh-header-col { min-width: 0; flex-wrap: wrap; }
    .sh-header-col--right { justify-content: flex-end; }
    .sh-header-col--right .sh-btn { max-width: 100%; }

    /* The menu button must always be reachable, whatever else is in the row. */
    .sh-burger { flex: 0 0 auto; margin-left: auto; }
}

@media (max-width: 768px) {
    .sh-header-row { overflow-x: clip; }
}

/* Last-resort guard: no element may widen the document past the viewport. */
img, svg, video, canvas, iframe, embed, object {
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   Button rows
   --------------------------------------------------------------------------
   A row of buttons has a min-content width that flexbox will not shrink below
   (`min-width: auto` on flex items), so two side-by-side buttons overflow a
   narrow screen. Let the row wrap, and give each button the full width once
   there is no room for two.
   -------------------------------------------------------------------------- */

.sh-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
}
.sh-btn-row > .sh-btn { min-width: 0; }

@media (max-width: 560px) {
    .sh-btn-row { width: 100%; }
    .sh-btn-row > .sh-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Readable brand text
   --------------------------------------------------------------------------
   The brand orange is chosen to look good as a fill. As body-size text on a
   white card the same colour measures 2.7:1, well below the 4.5:1 WCAG AA
   asks for. --primary-ink (generated in ThemeService from whatever primary
   colour the theme is set to) is that colour darkened just far enough to
   pass, and it is what text-only rules use. Fills, borders and icons on dark
   surfaces keep --primary, so the brand still looks like itself.

   A theme whose primary already passes gets --primary-ink identical to
   --primary, so this changes nothing for it.
   -------------------------------------------------------------------------- */

a.sh-card__link,
.sh-step__num,
.sh-price,
.sh-stat__num,
.err__code,
.sh-section-head__eyebrow,
.sh-eyebrow { color: var(--primary-ink, var(--primary)); }

/* Link hover on light surfaces. The footer's own rule is more specific, so
   links on the dark footer keep the brighter colour they need there. */
a:hover { color: var(--primary-ink, var(--primary)); }

/* ==========================================================================
   Blog  (Phase 3)
   ========================================================================== */

.sh-blog-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
}
.sh-blog-nav .sh-pill {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--body);
    padding: .4rem .9rem;
    transition: border-color .15s ease, color .15s ease;
}
.sh-blog-nav .sh-pill:hover { border-color: var(--primary); color: var(--primary-ink, var(--primary)); }
.sh-blog-nav .sh-pill.is-active {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary-ink, var(--primary));
    font-weight: 600;
}
.sh-pill__count { opacity: .6; font-size: .72rem; margin-left: .15rem; }

/* Long-form article body. The editor writes a safe subset of HTML, so these
   are the only elements that can appear here. */
.sh-prose { font-size: 1.04rem; line-height: 1.75; }
.sh-prose > * + * { margin-top: 1.15rem; }
.sh-prose h2 { font-size: var(--fs-h3); margin-top: 2.4rem; }
.sh-prose h3 { font-size: var(--fs-h4); margin-top: 1.9rem; }
.sh-prose ul, .sh-prose ol { padding-left: 1.35rem; }
.sh-prose li + li { margin-top: .45rem; }
.sh-prose img { border-radius: var(--radius); margin-block: 1.5rem; }
.sh-prose blockquote {
    margin: 1.6rem 0;
    padding: .2rem 0 .2rem 1.2rem;
    border-left: 3px solid var(--primary);
    font-size: 1.08rem;
    color: var(--heading);
}
.sh-prose code {
    background: var(--muted-bg);
    padding: .12rem .35rem;
    border-radius: 4px;
    font-size: .92em;
}
.sh-prose table { width: 100%; border-collapse: collapse; }
.sh-prose th, .sh-prose td { border: 1px solid var(--border); padding: .6rem .75rem; text-align: left; }
/* Tables in the editor's output can be wider than a phone. Let the table
   scroll inside its own box rather than pushing the whole page sideways. */
.sh-prose table { display: block; overflow-x: auto; }

/* The business's public answer to a review, shown under it. */
.sh-reply {
    margin-top: .75rem;
    padding: .6rem .8rem;
    border-left: 3px solid var(--primary);
    border-radius: 0 6px 6px 0;
    background: var(--muted-bg);
}

/* An editorial aside — used on the shipped legal pages to say plainly that the
   text is a starting draft and needs a lawyer's eye before go-live. */
.sh-note {
    padding: .9rem 1.1rem;
    border-left: 3px solid var(--primary);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--muted-bg);
    font-size: .95rem;
}

.sh-cta-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--muted-bg);
}

.sh-pagination {
    display: flex;
    justify-content: center;
    gap: .35rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}
.sh-pagination a {
    min-width: 40px;
    padding: .5rem .7rem;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    color: var(--body);
}
.sh-pagination a:hover { border-color: var(--primary); }
.sh-pagination a.is-active {
    background: var(--primary-fill, var(--primary));
    border-color: var(--primary-fill, var(--primary));
    color: var(--on-primary, #fff);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Pincode serviceability check (locations page)
   -------------------------------------------------------------------------- */

/* .sr-only is defined once, further up. */

.sh-pincode {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem 1.5rem;
    align-items: center;
    padding: 1.4rem 1.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--muted-bg);
}
.sh-pincode__form { display: flex; gap: .6rem; }
.sh-pincode__form .sh-input { max-width: 180px; }
.sh-pincode__answer {
    grid-column: 1 / -1;
    margin: 0;
    padding: .8rem 1rem;
    border-radius: var(--radius);
    border-left: 3px solid var(--border);
    background: var(--card);
    font-size: .95rem;
}
.sh-pincode__answer a { margin-left: .35rem; font-weight: 600; }
.sh-pincode__answer.is-served      { border-left-color: #198754; }
.sh-pincode__answer.is-city-served { border-left-color: var(--primary); }
.sh-pincode__answer.is-not-served,
.sh-pincode__answer.is-invalid     { border-left-color: #dc3545; }

@media (max-width: 640px) {
    .sh-pincode { grid-template-columns: 1fr; }
    .sh-pincode__form .sh-input { max-width: none; flex: 1; }
}

/* --------------------------------------------------------------------------
   PHASE 8 — the stage strip and the map on the public tracking page
   -------------------------------------------------------------------------- */

/* Eight stages across a phone screen is unreadable, so this is a horizontal
   strip on a wide screen and a vertical list on a narrow one — the same markup
   either way, because a customer checking on their move is on a phone far more
   often than not. */
.sh-stages {
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 0;
    display: grid;
    gap: .45rem;
}
.sh-stages__item {
    display: grid;
    grid-template-columns: 1.4rem 1fr;
    gap: .55rem;
    align-items: center;
    font-size: .86rem;
    color: var(--muted, #6b7280);
}
.sh-stages__dot {
    width: 1.15rem; height: 1.15rem;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--card, #fff);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .7rem; line-height: 1;
}
.sh-stages__item.is-done { color: var(--heading); }
.sh-stages__item.is-done .sh-stages__dot {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--on-primary, #fff);
}
.sh-stages__item.is-current { color: var(--heading); font-weight: 700; }
.sh-stages__item.is-current .sh-stages__dot {
    border-color: var(--primary);
    /* Comma syntax, matching how --primary-rgb is consumed everywhere else in
       this file; the token is "r, g, b", not "r g b". */
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .18);
}

@media (min-width: 720px) {
    .sh-stages {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 0;
    }
    .sh-stages__item {
        grid-template-columns: none;
        grid-template-rows: auto auto;
        justify-items: center;
        text-align: center;
        gap: .4rem;
        position: relative;
    }
    /* The connecting rule. Drawn behind the dots and stopped before the first
       one so the strip does not begin with a line into empty space. */
    .sh-stages__item:not(:first-child)::before {
        content: "";
        position: absolute;
        left: 0; right: 50%;
        top: .57rem;
        height: 2px;
        background: var(--border);
        z-index: 0;
    }
    .sh-stages__item.is-done::before,
    .sh-stages__item.is-current::before { background: var(--primary); }
    .sh-stages__dot { position: relative; z-index: 1; }
    .sh-stages__label { font-size: .74rem; line-height: 1.25; }
}

/* An embedded map, only rendered when a provider is actually configured. */
.sh-map {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    max-width: 100%;
    background: var(--border);
}
.sh-map iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width: 520px) {
    .sh-map { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   Display utilities
   --------------------------------------------------------------------------
   These exist in admin.css and were missing here, so any public template that
   used `d-block` — the tracking page and the contact block — rendered its label
   and its value glued together: "CustomerSneha G.", "FromGurugram". Exactly the
   defect Phase 7 found in the admin panel, sitting undiscovered in the other
   stylesheet because the two files are maintained separately.

   They are defined in both files rather than extracted into a shared one: the
   public site deliberately loads only app.css, and adding a second stylesheet to
   every page of the marketing site to save eight lines is the wrong trade. */

.d-block        { display: block; }
.d-inline       { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex         { display: flex; }
.d-none         { display: none; }

/* --------------------------------------------------------------------------
   Answer and authority blocks (Phase 11)

   A page's AEO and GEO content, rendered as content. Styled to be READ — the
   whole premise is that a machine quotes a sentence a person could have read,
   and text nobody can read is hidden text.
   -------------------------------------------------------------------------- */

.sh-answer__card {
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 14px;
    padding: 1.4rem 1.5rem;
    /* rgba(var(--primary-rgb), …) is how the rest of this file tints with the
       operator's brand colour — it works everywhere, where color-mix() does not. */
    background: rgba(var(--primary-rgb), .045);
}
.sh-answer__q {
    font-size: var(--fs-h3);
    margin: 0 0 .6rem;
}
.sh-answer__a {
    font-size: 1.12rem;
    line-height: 1.65;
    font-weight: 500;
    margin: 0;
}
.sh-answer__detail { margin-top: 1rem; }
.sh-answer__detail p {
    margin: 0 0 .8rem;
    line-height: 1.75;
    opacity: .9;
}
.sh-answer__detail p:last-child { margin-bottom: 0; }

.sh-authority__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 2.5rem;
    align-items: start;
}
.sh-authority__prose p { line-height: 1.78; margin: 0 0 1rem; }
.sh-authority__prose h3 { margin: 1.9rem 0 .6rem; font-size: var(--fs-h3); }
.sh-authority__prose > :first-child { margin-top: 0; }

.sh-authority__facts {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.2rem 1.3rem;
    background: rgba(148, 163, 184, .07);
}
.sh-authority__facts h3 {
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .7;
    margin: 0 0 .7rem;
}
.sh-authority__facts h3 + dl { margin-bottom: 1.4rem; }
.sh-authority__facts dl { margin: 0; }
.sh-authority__facts dt {
    font-size: .78rem;
    opacity: .7;
    margin-top: .55rem;
}
.sh-authority__facts dd {
    margin: 0;
    font-weight: 600;
    line-height: 1.45;
}
.sh-authority__source {
    display: block;
    font-weight: 400;
    font-size: .74rem;
    opacity: .65;
}

/* The facts panel goes below the prose on a tablet and a phone — it is
   supporting evidence, and evidence reads after the argument. */
@media (max-width: 900px) {
    .sh-authority__grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
}

/* --------------------------------------------------------------------------
   The chat assistant (Phase 12)

   MOBILE FIRST, AND ON A PHONE IT IS A SHEET AND NOT A BUBBLE

   A 340px floating card on a 360px screen is a card with no room to type in.
   Below 576px the panel is the whole viewport — a full-height sheet with the
   composer pinned to the bottom, which is what every messaging app on the
   device already does and therefore what the thumb expects. Above it, a
   conventional corner panel.

   The launcher sits ABOVE the mobile sticky action bar (z-index 1500) and clear
   of it vertically, because the one thing worse than no chat button is a chat
   button sitting on top of the Call button.

   `100dvh` rather than `100vh`: on iOS Safari a 100vh sheet puts the composer
   behind the address bar, which is exactly where it must not be. `vh` is kept as
   a fallback for browsers that do not know `dvh`.
   -------------------------------------------------------------------------- */

.sh-chat-launcher {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1600;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.05rem;
    border: 0;
    border-radius: 999px;
    background: var(--primary-fill, var(--primary));
    color: var(--on-primary, #fff);
    font: inherit;
    font-weight: 650;
    font-size: .92rem;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), .38);
    transition: transform .18s ease, box-shadow .18s ease;
}
.sh-chat-launcher:hover  { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(var(--primary-rgb), .45); }
.sh-chat-launcher:active { transform: translateY(0); }
.sh-chat-launcher i      { font-size: 1.15rem; }

/* The unread dot for an agent reply that arrived while the panel was shut. */
.sh-chat-launcher__dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #e5484d;
    border: 2px solid var(--card, #fff);
}

.sh-chat {
    position: fixed;
    right: 1rem;
    bottom: 5.25rem;
    z-index: 1650;
    width: min(380px, calc(100vw - 2rem));
    max-height: min(620px, calc(100vh - 7.5rem));
    display: flex;
    flex-direction: column;
    background: var(--card, #fff);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(11, 31, 63, .26);
    animation: sh-chat-in .2s ease-out;
}
.sh-chat[hidden] { display: none; }

@keyframes sh-chat-in {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Somebody who has asked for less motion gets none. */
@media (prefers-reduced-motion: reduce) {
    .sh-chat { animation: none; }
    .sh-chat-launcher { transition: none; }
    .sh-chat-launcher:hover { transform: none; }
}

.sh-chat__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1rem;
    background: var(--primary-fill, var(--primary));
    color: var(--on-primary, #fff);
    flex: 0 0 auto;
}
.sh-chat__who    { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.sh-chat__avatar {
    width: 36px; height: 36px; flex: 0 0 36px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    font-size: 1.05rem;
}
.sh-chat__name   { margin: 0; font-weight: 680; font-size: .97rem; line-height: 1.2; }
.sh-chat__status { margin: 0; font-size: .74rem; opacity: .82; line-height: 1.3;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-chat__close {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border: 0; border-radius: 10px;
    background: rgba(255, 255, 255, .14);
    color: inherit; cursor: pointer;
}
.sh-chat__close:hover { background: rgba(255, 255, 255, .26); }

.sh-chat__progress { padding: .6rem 1rem 0; flex: 0 0 auto; }
.sh-chat__progress[hidden] { display: none; }
.sh-chat__progress-bar {
    height: 4px; border-radius: 999px;
    background: var(--primary-soft, rgba(0, 0, 0, .07));
    overflow: hidden;
}
.sh-chat__progress-bar span {
    display: block; height: 100%;
    background: var(--primary-fill, var(--primary));
    transition: width .3s ease;
}
.sh-chat__chips { margin: .45rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.sh-chat__pill {
    font-size: .7rem; font-weight: 600;
    padding: .16rem .5rem;
    border-radius: 999px;
    background: var(--primary-soft, rgba(0, 0, 0, .06));
    color: var(--primary);
}

.sh-chat__log {
    flex: 1 1 auto;
    min-height: 190px;
    overflow-y: auto;
    overscroll-behavior: contain;       /* the page must not scroll behind it */
    -webkit-overflow-scrolling: touch;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    background: var(--bg, #f7f8fb);
}

.sh-chat__msg {
    max-width: 86%;
    padding: .6rem .8rem;
    border-radius: 14px;
    font-size: .9rem;
    line-height: 1.5;
    /* A stranger can paste a 60-character unbroken string into this. */
    overflow-wrap: anywhere;
}
.sh-chat__msg p       { margin: 0; }
.sh-chat__msg p + p   { margin-top: .45rem; }

.sh-chat__msg--bot, .sh-chat__msg--agent {
    align-self: flex-start;
    background: var(--card, #fff);
    border: 1px solid var(--border);
    border-bottom-left-radius: 5px;
}
.sh-chat__msg--me {
    align-self: flex-end;
    background: var(--primary-fill, var(--primary));
    color: var(--on-primary, #fff);
    border-bottom-right-radius: 5px;
}
/* A system line is the widget talking about itself — a handover, an outage. It
   is centred and quiet so it never reads as something a person said. */
.sh-chat__msg--sys {
    align-self: center;
    max-width: 95%;
    text-align: center;
    background: transparent;
    border: 0;
    font-size: .8rem;
    opacity: .8;
    padding: .3rem .5rem;
}
.sh-chat__msg-who {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--primary);
    margin-bottom: .15rem;
}

.sh-chat__typing { display: flex; gap: .25rem; align-items: center; padding: .7rem .85rem; }
.sh-chat__typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; opacity: .4;
    animation: sh-chat-blink 1.25s infinite ease-in-out;
}
.sh-chat__typing span:nth-child(2) { animation-delay: .18s; }
.sh-chat__typing span:nth-child(3) { animation-delay: .36s; }
@keyframes sh-chat-blink { 0%, 60%, 100% { opacity: .28; } 30% { opacity: .95; } }
@media (prefers-reduced-motion: reduce) {
    .sh-chat__typing span { animation: none; opacity: .5; }
}

.sh-chat__quick {
    display: flex; flex-wrap: wrap; gap: .4rem;
    padding: .65rem 1rem 0;
    flex: 0 0 auto;
}
.sh-chat__quick[hidden] { display: none; }
.sh-chat__chip {
    border: 1px solid rgba(var(--primary-rgb), .35);
    background: var(--card, #fff);
    color: var(--primary);
    border-radius: 999px;
    padding: .38rem .75rem;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}
.sh-chat__chip:hover { background: var(--primary-soft, rgba(0, 0, 0, .05)); }

.sh-chat__form {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    padding: .7rem 1rem;
    flex: 0 0 auto;
    border-top: 1px solid var(--border);
    background: var(--card, #fff);
}
.sh-chat__input {
    flex: 1 1 auto;
    min-width: 0;
    resize: none;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .55rem .7rem;
    font: inherit;
    /* 16px, so iOS Safari does not zoom the page when the field is focused. */
    font-size: 16px;
    line-height: 1.4;
    max-height: 110px;
    background: var(--bg, #fff);
    color: inherit;
}
.sh-chat__input:focus { outline: 2px solid rgba(var(--primary-rgb), .4); outline-offset: 1px; }
.sh-chat__send {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 0; border-radius: 12px;
    background: var(--primary-fill, var(--primary));
    color: var(--on-primary, #fff);
    cursor: pointer;
}
.sh-chat__send:disabled { opacity: .5; cursor: default; }

.sh-chat__foot {
    margin: 0;
    padding: 0 1rem .7rem;
    font-size: .69rem;
    opacity: .68;
    line-height: 1.45;
    flex: 0 0 auto;
    background: var(--card, #fff);
}
.sh-chat__foot a { text-decoration: underline; }

/* ---- Phone: a full-height sheet ---- */
@media (max-width: 575.98px) {
    .sh-chat {
        right: 0; left: 0; bottom: 0; top: 0;
        width: 100%;
        max-height: none;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        border: 0;
    }
    .sh-chat__head { padding-top: calc(.85rem + env(safe-area-inset-top)); }
    .sh-chat__foot { padding-bottom: calc(.7rem + env(safe-area-inset-bottom)); }
    .sh-chat__msg  { max-width: 90%; font-size: .93rem; }

    /* Clear of the sticky action bar, which is 62px tall on this breakpoint. */
    .sh-chat-launcher {
        bottom: calc(72px + env(safe-area-inset-bottom));
        right: .85rem;
        padding: .65rem;
    }
    .sh-chat-launcher__label { display: none; }   /* icon only — the bar is busy */
    .sh-chat-launcher i      { font-size: 1.3rem; }

    /* The page must not scroll behind an open full-screen sheet. */
    body.sh-chat-open { overflow: hidden; }
}

/* The widget is a live control; it has no place on a printed page. */
@media print {
    .sh-chat, .sh-chat-launcher { display: none !important; }
}