/* ==========================================================================
   shalom.css — Theme 1 "Shalom" (SHALOM BLOOMS), styled after ozrit.com
   Fixed white header · full-bleed photo hero · white / near-black bands ·
   letter-spaced kickers · photo marquee · split photo sections · FAQ + CTA ·
   dark contact band and footer. Accent: logo blue (navy → blue → sky).
   Loaded only by _LayoutShalom.cshtml, on top of base.css.
   ========================================================================== */

:root {
  /* Logo palette (sampled from shalom-blooms-sb.png): indigo → royal → blue → sky → cyan */
  --logo-indigo: #231bdd;
  --logo-navy: #0412c4;
  --logo-royal: #002fe2;
  --logo-blue: #0060f7;
  --logo-azure: #006afc;
  --logo-cyan: #069ffd;   /* logo sky, readable on white for large text */
  --logo-sky: #1dddfe;    /* logo cyan (bottom-left of the mark) */

  --c-primary: var(--logo-blue);
  --c-secondary: var(--logo-sky);
  --c-ink: #0b1233;       /* headings: near-black with a navy cast */
  --sh-navy: var(--logo-navy);
  --sh-text: #1c2440;
  --sh-dark: #050b22;     /* dark bands: deep logo navy instead of neutral black */
  --sh-darker: #030819;
  --sh-card-dark: #0c1634;
  --sh-tint: #eef3ff;
  --sh-sky: #6ee9fe;      /* logo cyan, lightened for text on dark bands */

  --bg: #ffffff;
  --fg: var(--c-ink);
  --muted: #5b6475;
  --line: #e4e8f0;
  --surface: #f6f8fc;
  --accent: var(--c-primary);

  /* Same direction as the mark: indigo (top) → blue → cyan (bottom) */
  --sh-grad: linear-gradient(120deg, var(--logo-indigo) 0%, var(--c-primary) 52%, var(--c-secondary) 100%);
  --em-grad: linear-gradient(100deg, var(--logo-navy) 0%, var(--c-primary) 55%, var(--logo-cyan) 100%);
  --em-grad-dark: linear-gradient(100deg, #a8f2ff 0%, var(--c-secondary) 45%, #6f8cff 100%);

  --f-display: "Fredoka", "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-body: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --header-h: 72px;
  --offer-h: 40px; /* offer bar above the header (see .sh-offer) */
  --sh-section: clamp(3rem, 2rem + 3vw, 5rem);   /* vertical padding of every section (≈48px phone → 75–80px desktop) */
  --sh-radius: 20px;
}

.layout-shalom { color: var(--sh-text); font-size: 1rem; line-height: 1.65; }
.layout-shalom main { padding-top: calc(var(--header-h) + var(--offer-h)); }
/* The header (+ offer bar) is always on screen: in-page links (#products, #contact…) stop below it */
html:has(> body.layout-shalom) { scroll-padding-top: calc(var(--header-h) + var(--offer-h)); }
:root { --sh-container: 1140px; } /* content width of every section */
.sh-container { width: min(100% - 2 * var(--gutter), var(--sh-container)); margin-inline: auto; }
.sh-section { padding-block: var(--sh-section); position: relative; }
.sh-tint { background: #ffffff; } /* sections are white; only .sh-blue bands are coloured */

/* Single-column grids on small screens: minmax(0, 1fr) stops wide children
   (e.g. the scrollable hero rail) from stretching the page past the viewport */
.sh-hero, .sh-split, .sh-cards, .sh-benefits, .sh-mini, .sh-modlinks, .sh-faq__grid, .sh-contact__grid,
.sh-footer__top, .sh-intro__grid, .sh-module__top, .sh-features-head, .sh-head--split, .sh-form__row {
  grid-template-columns: minmax(0, 1fr);
}

/* Dark bands (re-map tokens so shared pieces adapt) */
.sh-dark {
  --fg: #ffffff; --bg: var(--sh-dark);
  --muted: rgba(255, 255, 255, .68);
  --line: rgba(255, 255, 255, .1);
  --em-grad: var(--em-grad-dark);
  background: var(--sh-dark); color: #fff;
}

/* Blue bands (logo-blue tint) on every alternating section: home "Everything your business runs on",
   "A closer look at every product", the FAQ, and every second section of the product / contact pages.
   Every other section is white. */
.sh-blue {
  --fg: var(--c-ink); --bg: #d6e5ff;
  --muted: #3f4b66;            /* darker secondary text for contrast on the blue */
  --line: #bcd0f5;
  color: var(--c-ink);
  background: var(--sh-blue-bg);
}
:root {
  --sh-blue-bg:
    radial-gradient(55% 70% at 100% 0%, color-mix(in oklab, var(--logo-sky) 30%, transparent), transparent 70%),
    radial-gradient(45% 60% at 0% 100%, color-mix(in oklab, var(--c-primary) 14%, transparent), transparent 70%),
    linear-gradient(180deg, #d6e5ff 0%, #c4d8ff 100%);
}
.sh-blue .sh-kicker, .sh-blue .sh-kicker--light { color: var(--c-primary); }
/* White product cards lift off the blue */
.sh-blue .sh-card a { border-color: rgba(255, 255, 255, .9); box-shadow: 0 1px 2px rgba(10, 30, 90, .08), 0 26px 50px -30px rgba(10, 30, 90, .45); }
.sh-blue .sh-card a:hover { border-color: color-mix(in oklab, var(--pc) 40%, #fff); box-shadow: 0 36px 64px -34px rgba(10, 30, 90, .5); }

/* ---------- Icons ---------- */
.sh-ico { width: 1.25em; height: 1.25em; flex: none; }
.sh-arrow { width: 1.1em; height: 1.1em; flex: none; transition: transform .35s var(--ease); }

/* ---------- Type ---------- */
.sh-kicker {
  display: inline-flex; align-items: center; gap: .55em;
  margin-bottom: 1rem;
  font-size: .76rem; font-weight: 600; line-height: 1.4;
  letter-spacing: .28em; text-transform: uppercase; color: var(--c-primary);
}
.sh-kicker--light { color: var(--c-primary); }
.sh-kicker__icon .sh-ico { width: 1.35em; height: 1.35em; color: var(--pc, currentColor); }
.sh-h2 {
  font-family: var(--f-display); font-weight: 700; color: var(--fg);
  font-size: clamp(2rem, 1.25rem + 2.9vw, 2.5rem); line-height: 1.08; letter-spacing: -.035em;
  text-wrap: balance;
}
/* Home introduction heading: exactly two lines from tablet up. The font scales with the
   viewport so the longer first line always fits the container width. */
.sh-head--center.sh-head--wide { max-width: none; }
.sh-h2--intro { font-size: clamp(2rem, 1.2rem + 3vw, 3rem); }
@media (min-width: 768px) {
  .sh-h2--intro { font-size: min(3.75vw, 3rem); }
  .sh-h2--intro .sh-line { display: block; white-space: nowrap; }
}
.sh-lead { font-size: clamp(1.08rem, 1rem + .35vw, 1.2rem); line-height: 1.6; color: var(--fg); }
.layout-shalom p { text-wrap: pretty; }

/* Gradient emphasis (works with split words too) */
.layout-shalom h1 em, .layout-shalom h2 em, .layout-shalom h3 em { font-style: normal; }
.layout-shalom h1 em, .layout-shalom h2 em, .layout-shalom h3 em, .layout-shalom h1 em .wi, .layout-shalom h2 em .wi {
  background: var(--em-grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.layout-shalom h1 em:has(.wi), .layout-shalom h2 em:has(.wi) { background: none; }

/* Section heads */
.sh-head { margin-bottom: clamp(2rem, 1.6rem + 1.2vw, 3rem); }
.sh-head--center { text-align: center; max-width: 920px; margin-inline: auto; }
.sh-head--center .sh-head__lead { margin-inline: auto; }
.sh-head--split { display: grid; gap: 1.5rem 4rem; align-items: end; }
.sh-head__lead { margin-top: 1.1rem; max-width: 60ch; font-size: 1.1rem; color: var(--muted); }
.sh-head--split .sh-head__lead { margin-top: 0; }
/* Section illustrations (head, intro/overview, module, "why choose" split): one frame everywhere.
   3:2 matches the 1800 × 1200 artwork, so nothing is cropped; white card with a hairline border. */
.sh-head__photo, .sh-intro__photo, .sh-split__media {
  position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; height: 320px;
  border-radius: 0; 
  
}
.sh-head__photo img, .sh-intro__photo img, .sh-split__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 1023.98px) {
  /* Stacked layouts: keep the image from growing taller than the screen on tablets */
  .sh-head__photo, .sh-intro__photo, .sh-split__media { max-width: 640px; margin-inline: auto; }
}
.sh-head--split:has(.sh-head__photo) { align-items: center; }

.sh-textlink {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 600; color: var(--c-primary);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .45s var(--ease);
}
.sh-textlink:hover { background-size: 100% 1px; }
.sh-textlink:hover .sh-arrow { transform: translateX(4px); }

.sh-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.sh-tags li {
  padding: .3em .8em; border: 1px solid var(--line); border-radius: 999px;
  font-size: .78rem; line-height: 1.3; color: var(--muted);
}
.sh-tags--light { margin-top: 1.5rem; }
.sh-tags--light li { background: #fff; }

/* ---------- Buttons ---------- */
.sh-btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 3rem; padding: .85em 1.6em;
  border: 1px solid transparent; border-radius: 999px;
  font-weight: 600; font-size: .98rem; line-height: 1.1; white-space: nowrap;
  transition: transform .3s var(--ease), background-color .3s, border-color .3s, color .3s, box-shadow .4s;
}
.sh-btn:hover { transform: scale(1.04); }
.sh-btn:active { transform: scale(.97); }
.sh-btn:hover .sh-arrow { transform: translateX(3px); }
.sh-btn--lg { min-height: 3.5rem; padding: 1em 1.9em; font-size: 1.05rem; }
.sh-btn--block { display: flex; width: 100%; }

.sh-btn--primary { background: var(--sh-grad); color: #fff; box-shadow: 0 10px 30px -12px color-mix(in oklab, var(--c-primary) 80%, transparent); }
.sh-btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .38) 50%, transparent 75%);
  transform: translateX(-110%); transition: transform .8s var(--ease-in-out);
}
.sh-btn--primary:hover::after { transform: translateX(110%); }
.sh-btn--primary:hover { box-shadow: 0 16px 40px -10px color-mix(in oklab, var(--c-primary) 90%, transparent); }

.sh-btn--outline { border-color: rgba(255, 255, 255, .35); color: #fff; }
.sh-btn--outline:hover { background: var(--c-primary); border-color: var(--c-primary); }
.sh-btn--outline:hover .sh-arrow { transform: translate(2px, -2px); }
.sh-btn--light { background: #fff; color: var(--c-ink); }
.sh-btn--light:hover { background: var(--c-ink); color: #fff; }
.sh-btn--dark { background: var(--logo-navy); color: #fff; border-radius: 6px; }
.sh-btn--dark:hover { background: var(--logo-royal); transform: none; }

/* ---------- Brand ---------- */
.sh-brand { display: inline-flex; align-items: center; gap: .7rem; flex: none; }
.sh-brand__mark { width: 40px; height: 40px; object-fit: contain; }
.sh-brand__text { display: grid; line-height: 1.1; }
    .sh-brand__text strong {
        font-size: 1.02rem;
        font-weight: 800;
        letter-spacing: .06em;
        color: #3322c1 
    }
.sh-brand__text small { margin-top: .2rem; font-size: .64rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.sh-brand--light .sh-brand__mark { width: 44px; height: 44px; }
.sh-brand--light strong { color: #fff; }
.sh-brand--light small { color: rgba(255, 255, 255, .55); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.sh-header {
  position: fixed; inset: 0 0 auto; z-index: 90;
  background: #fff; border-bottom: 1px solid transparent;
  transition: transform .4s var(--ease), border-color .3s, box-shadow .3s;
}
/* Offer bar: brand-gradient strip, white text, highlighted white pill; the message blinks softly */
.sh-offer {
  display: flex; align-items: center; justify-content: center; height: var(--offer-h); padding-inline: var(--gutter);
  background: var(--sh-grad); color: #fff; font-size: .92rem; font-weight: 600; letter-spacing: .01em;
  text-align: center; white-space: nowrap; overflow: hidden;
}
.sh-offer__text { display: inline-flex; align-items: center; gap: .6rem; animation: sh-blink 1.1s ease-in-out infinite; }
.sh-offer__tag {
  display: inline-block; padding: .2rem .7rem; border-radius: 6px;
  background: #fff; color: var(--sh-navy, var(--c-ink)); font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); animation: sh-offer-glow 1.1s ease-in-out infinite;
}
.sh-offer:hover .sh-offer__text, .sh-offer:focus-visible .sh-offer__text { animation-play-state: paused; opacity: 1; }
.sh-offer:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
@keyframes sh-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes sh-offer-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); } 50% { box-shadow: 0 0 14px 3px rgba(255, 255, 255, .55); } }
@media (prefers-reduced-motion: reduce) { .sh-offer__text, .sh-offer__tag { animation: none; } }
.sh-header.is-scrolled { border-color: #eceff5; box-shadow: 0 8px 30px -18px rgba(10, 20, 60, .35); }
/* The header (with the offer bar) stays visible while scrolling in both directions: core.js still
   adds .is-hidden on scroll-down (shared with the other themes), but Theme 1 ignores it */
.sh-header.is-hidden { transform: none; }
.sh-header__inner {
  width: min(100% - 2 * var(--gutter), var(--sh-container)); margin-inline: auto; /* same 1140px as the sections */
  height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}

.sh-nav { display: none; }
.sh-nav > ul { display: flex; align-items: center; gap: clamp(1.5rem, 2.5vw, 2.6rem); }
.sh-nav__link {
  position: relative; display: inline-flex; align-items: center; gap: .3rem;
  padding-block: 1.55rem; font-size: .95rem; font-weight: 500; color: var(--sh-text);
  transition: color .25s;
}
.sh-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 1.1rem; height: 2px; border-radius: 2px;
  background: var(--sh-grad); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.sh-nav__link:hover { color: var(--c-ink); }
.sh-nav__link:hover::after, .sh-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.sh-nav__chev { width: 15px; height: 15px; transition: transform .3s var(--ease); }

.has-children { position: relative; }
.sh-drop {
  position: absolute; top: calc(100% - .4rem); left: 50%; z-index: 5;
  width: 580px; padding: .7rem;
  background: #fff; border: 1px solid #eceff5; border-radius: 18px;
  box-shadow: 0 30px 60px -20px rgba(10, 20, 60, .28);
  opacity: 0; visibility: hidden; transform: translate(-50%, 10px);
  transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s;
}
.has-children:hover .sh-drop, .has-children:focus-within .sh-drop, .has-children.is-open .sh-drop {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s;
}
.has-children:hover .sh-nav__chev, .has-children.is-open .sh-nav__chev { transform: rotate(180deg); }
.sh-drop__list { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem; }
.sh-drop__item { display: flex; align-items: center; gap: .85rem; padding: .75rem .8rem; border-radius: 12px; transition: background-color .2s; }
.sh-drop__item:hover, .sh-drop__item[aria-current="page"] { background: #f3f6ff; }
.sh-drop__item strong { display: block; font-size: .95rem; font-weight: 600; color: var(--c-ink); }
.sh-drop__item small { display: block; font-size: .78rem; color: var(--muted); }
.sh-drop__icon {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px;
  background: color-mix(in oklab, var(--pc, var(--c-primary)) 12%, #fff); color: var(--pc, var(--c-primary));
}
.sh-drop__icon .sh-ico { width: 20px; height: 20px; }

.sh-header__actions { display: flex; align-items: center; gap: 1rem; }
.sh-header__phone { display: none; align-items: center; gap: .45rem; font-weight: 600; font-size: .92rem; color: var(--sh-text); }
.sh-header__phone .sh-ico { width: 18px; height: 18px; color: var(--c-primary); }
.sh-header__cta {
  display: none; align-items: center; padding: .8rem 1.3rem;
  background: var(--c-primary); color: #fff; font-weight: 600; font-size: .9rem;
  transition: background-color .3s;
}
.sh-header__cta:hover { background: var(--sh-navy); }
.sh-burger { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; color: var(--c-ink); transition: background-color .2s; }
.sh-burger:hover { background: var(--sh-tint); }
.sh-burger .sh-ico { width: 24px; height: 24px; }

@media (min-width: 640px) { .sh-header__cta { display: inline-flex; } }
@media (min-width: 1024px) {
  .sh-nav { display: block; }
  .sh-burger { display: none; }
}
@media (min-width: 1280px) { .sh-header__phone { display: inline-flex; } }

/* ---------- Drawer (tablet / mobile) ---------- */
.sh-drawer { position: fixed; inset: 0; z-index: 130; /* above the Customize button (120) */ visibility: hidden; pointer-events: none; transition: visibility 0s .35s; }
.sh-drawer__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .7); opacity: 0; transition: opacity .3s; }
.sh-drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(85vw, 380px);
  display: flex; flex-direction: column; background: #fff; box-shadow: -20px 0 60px rgba(0, 0, 0, .25);
  transform: translateX(100%); transition: transform .35s var(--ease);
}
.menu-open .sh-drawer { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.menu-open .sh-drawer__backdrop { opacity: 1; }
.menu-open .sh-drawer__panel { transform: none; }
.menu-open { overflow: hidden; }
.sh-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid #e4e4e7; }
.sh-drawer__head .sh-brand__mark { width: 32px; height: 32px; }
.sh-drawer__close { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; color: var(--c-ink); }
.sh-drawer__close:hover { background: var(--sh-tint); }
.sh-drawer__nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: .5rem 1.25rem; font-size: 1rem; color: var(--sh-text); }
.sh-drawer__nav > a, .sh-drawer__group summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: .95rem 0; border-bottom: 1px solid #f1f1f4; font-weight: 500;
}
.sh-drawer__nav > a:hover, .sh-drawer__group summary:hover { color: var(--c-primary); }
.sh-drawer__group summary { list-style: none; cursor: pointer; }
.sh-drawer__group summary::-webkit-details-marker { display: none; }
.sh-drawer__group[open] summary .sh-nav__chev { transform: rotate(180deg); }
.sh-drawer__group ul { padding: .4rem 0 .8rem; border-bottom: 1px solid #f1f1f4; }
.sh-drawer__group li a { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; font-size: .95rem; }
.sh-drawer__group .sh-drop__icon { width: 34px; height: 34px; border-radius: 9px; }
.sh-drawer__group .sh-drop__icon .sh-ico { width: 18px; height: 18px; }
.sh-drawer__foot { padding: 1.25rem; border-top: 1px solid #f1f1f4; }
.sh-drawer__contact { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; font-size: .9rem; color: var(--muted); word-break: break-all; }
.sh-drawer__contact .sh-ico { width: 18px; height: 18px; color: var(--c-primary); }
@media (min-width: 1024px) { .sh-drawer { display: none; } }

/* ==========================================================================
   HERO (full-bleed photo)
   ========================================================================== */
.sh-hero {
  --em-grad: var(--em-grad-dark);
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-rows: 1fr auto;
  /*min-height: clamp(600px, calc(100svh - var(--header-h) - var(--offer-h)), 860px);*/
  background: var(--sh-darker); color: #fff;
}
.sh-hero--product { min-height: clamp(560px, calc(92svh - var(--header-h) - var(--offer-h)), 780px); }
.sh-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; animation: sh-zoom 18s var(--ease) both; }
/* Banner artwork sits centre-right: anchor the crop there on narrow screens */
.sh-hero__bg, .sh-hero__video { object-position: 75% 50%; }
@keyframes sh-zoom { from { transform: scale(1.03); } }
.sh-hero__shade {
  position: absolute; inset: 0; z-index: -1;
  /*background:
    radial-gradient(60% 70% at 85% 10%, color-mix(in oklab, var(--c-primary) 35%, transparent), transparent 70%),
    linear-gradient(90deg, rgba(3, 8, 25, .92) 0%, rgba(3, 8, 25, .74) 45%, rgba(3, 8, 25, .35) 100%),
    linear-gradient(0deg, rgba(3, 8, 25, .85) 0%, transparent 40%);*/
}
.sh-hero__inner { align-self: center; padding-block: clamp(3.5rem, 6vw, 6rem); }
.sh-hero__title {
  max-width: 15ch; font-family: var(--f-display); font-weight: 700;
  font-size: 4rem; line-height: 1.03; letter-spacing: -.04em;
}
.sh-hero--product .sh-hero__title { max-width: 18ch; font-size: clamp(2.4rem, 1.3rem + 4vw, 3.6rem); }
.sh-hero__lead { max-width: 44rem; margin-top: 1.5rem; font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); line-height: 1.6; color: #e5e7eb; }
.sh-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }

.sh-pill {
  display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.6rem;
  padding: .45rem 1rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
  background: rgba(255, 255, 255, .08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: .84rem; font-weight: 500; color: rgba(255, 255, 255, .9);
}
.sh-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-secondary); box-shadow: 0 0 0 0 color-mix(in oklab, var(--c-secondary) 70%, transparent); animation: sh-pulse 2.2s infinite; }
@keyframes sh-pulse { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.sh-pill__icon .sh-ico { width: 18px; height: 18px; color: var(--sh-sky); }

/* Bottom strip of product links */
.sh-hero__rail {
  border-top: 1px solid rgba(255, 255, 255, .12);
  /* near-solid so bright artwork behind it can't wash out individual items */
  background: rgba(3, 8, 25, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.sh-hero__rail ul {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr);
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
}
.sh-hero__rail li { scroll-snap-align: start; }
.sh-hero__rail ul::-webkit-scrollbar { display: none; }
.sh-hero__rail li + li { border-left: 1px solid rgba(255, 255, 255, .1); }
.sh-hero__rail a { display: flex; align-items: center; gap: .85rem; height: 100%; padding: 1.15rem 1.25rem; transition: background-color .3s; }
.sh-hero__rail li:first-child a { padding-left: 0; }
.sh-hero__rail a:hover { background: rgba(255, 255, 255, .06); }
.sh-hero__rail .sh-ico {
  width: 40px; height: 40px; padding: 9px; border-radius: 11px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--pc, var(--c-primary)) 70%, transparent), color-mix(in oklab, var(--logo-sky) 45%, transparent)); color: #fff;
}
.sh-hero__rail strong { display: block; font-size: .95rem; font-weight: 600; line-height: 1.25; }
.sh-hero__rail small { display: block; font-size: .78rem; color: rgba(255, 255, 255, .6); }

/* Banners with an illustration (home, product and contact pages: .sh-hero--art) */
.sh-hero--art .sh-hero__title {
  max-width: none; font-size: clamp(2.1rem, 1.3rem + 3vw, 3rem); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance;
}
/* Home: the two phrases always sit on their own lines; each wraps evenly if it must */
.sh-hero__line { display: block; text-wrap: balance; }
.sh-hero__line + .sh-hero__line { margin-top: .12em; }
/* Phones/tablets: text first, then the full illustration, then the scrollable rail */
@media (max-width: 1023.98px) {
  .sh-hero--art { grid-template-rows: auto auto auto; min-height: 0; }
  .sh-hero--art .sh-hero__inner { grid-row: 1; padding-block: clamp(2.5rem, 2rem + 3vw, 3.5rem) 1.5rem; }
  .sh-hero--art .sh-hero__media {
    grid-row: 2; position: relative; inset: auto; z-index: 0; aspect-ratio: 16 / 9; transform: none !important;
  }
  .sh-hero--art .sh-hero__rail { grid-row: 3; }
  .sh-hero--art .sh-reel { top: auto; bottom: 1rem; }
  .sh-hero--art:has(.sh-hero__rail) .sh-reel { bottom: 6.25rem; }
}
/* Desktop: the illustration fills the right of the banner and fades in from the left, so the text has
   its own column and never runs into the artwork */
@media (min-width: 1024px) {
  .sh-hero--art .sh-hero__media {
    left: 36%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%); mask-image: linear-gradient(90deg, transparent, #000 18%);
  }
  .sh-hero--art .sh-hero__bg, .sh-hero--art .sh-hero__video { object-position: 95% 50%; }
  .sh-hero--art .sh-hero__inner > * { max-width: calc(51vw - max(var(--gutter), (100vw - var(--sh-container)) / 2)); }
}

/* Theme 1 banner art (_ShalomHeroMedia.cshtml): a 1200 × 500 crop around the artwork, always shown
   whole (never cropped or hidden by the rail). Phones/tablets: full width under the text. Desktop:
   bottom-right of the text row, sitting on the rail; the row grows if the art is taller than the text. */
.sh-hero--art .sh-hero__media--art { aspect-ratio: 12 / 5; will-change: auto; }
.sh-hero__media--art .sh-hero__bg { object-fit: cover; object-position: 50% 50%; animation: none; }
@media (max-width: 1023.98px) {
  .sh-hero--art .sh-hero__media--art {
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%); mask-image: linear-gradient(180deg, transparent, #000 28%);
  }
}
@media (min-width: 1024px) {
  .sh-hero--art:has(.sh-hero__media--art) .sh-hero__inner { grid-row: 1; grid-column: 1; }
  .sh-hero--art .sh-hero__media--art {
    grid-row: 1; grid-column: 1; justify-self: end; align-self: end;
    position: relative; inset: auto; left: auto; width: min(58%, 960px);
    /* fade the left and top edges into the banner */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%), linear-gradient(180deg, transparent, #000 32%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 22%), linear-gradient(180deg, transparent, #000 32%);
    mask-composite: intersect;
  }
}

/* Theme 1 video banner (_ShalomHeroMedia.cshtml with a Video, e.g. home): the clip fills the whole
   banner behind the text and rail on every screen size, with a shade on the text side. */
.sh-hero--art .sh-hero__media--video {
  grid-row: auto; position: absolute; inset: 0; z-index: -2; aspect-ratio: auto;
  -webkit-mask-image: none; mask-image: none;
}
.sh-hero--art .sh-hero__media--video .sh-hero__bg,
.sh-hero--art .sh-hero__media--video .sh-hero__video { object-position: 50% 50%; }
.sh-hero__media--video + .sh-hero__shade {
  background: linear-gradient(90deg, rgba(3, 8, 25, .78) 0%, rgba(3, 8, 25, .45) 45%, rgba(3, 8, 25, .1) 100%);
}
@media (max-width: 1023.98px) {
  .sh-hero--art .sh-hero__media--video { grid-row: auto; position: absolute; inset: 0; }
  .sh-hero__media--video + .sh-hero__shade { background: rgba(3, 8, 25, .55); }
}
@media (min-width: 1024px) {
  .sh-hero--art .sh-hero__media--video { left: 0; }
}

.sh-crumbs { margin-bottom: 1.25rem; }
.sh-crumbs ol { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .85rem; color: rgba(255, 255, 255, .68); }
.sh-crumbs li + li::before { content: "/"; margin-right: .5rem; opacity: .5; }
.sh-crumbs a:hover { color: #fff; }
.sh-crumbs [aria-current] { color: #fff; }

/* ==========================================================================
   INTRO / OVERVIEW (photo + text)
   ========================================================================== */
.sh-intro__grid { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.sh-intro__grid--solo { max-width: 880px; }
.sh-intro__text > * + *, .sh-intro__text > div > p + p { margin-top: 1.1rem; }
.sh-intro__text p:not(.sh-lead):not(.sh-kicker) {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--fg);
}
.sh-intro__text .sh-textlink { margin-top: 1.75rem; }
@media (min-width: 1024px) { .sh-intro__grid:not(.sh-intro__grid--solo) { grid-template-columns: 5fr 7fr; } }

/* ==========================================================================
   PRODUCT CARDS (dark band)
   ========================================================================== */
/* Light cards: the illustration (light background) on top, white body below with the icon, title and text */
.sh-cards { display: grid; gap: 1.25rem; }
.sh-card a {
  position: relative; display: flex; flex-direction: column; height: 100%; isolation: isolate;
  border: 1px solid var(--line); border-radius: 0; overflow: hidden;
  background: #fff; color: var(--c-ink);
  box-shadow: 0 24px 50px -40px rgba(10, 30, 90, .35);
  transition: border-color .35s, box-shadow .5s var(--ease), transform .5s var(--ease);
}
.sh-card a:hover { border-color: color-mix(in oklab, var(--pc) 45%, #fff); box-shadow: 0 34px 60px -34px rgba(10, 30, 90, .45); transform: translateY(-4px); }
.sh-card__img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #fff;
  border-bottom: 1px solid var(--line); transition: transform .9s var(--ease);
}
.sh-card a:hover .sh-card__img { transform: scale(1.04); }
.sh-card__body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 0 1.5rem 1.4rem; background: #fff; }
/* Accent line in the product colour sweeps along the bottom on hover */
.sh-card a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3px;
  background: linear-gradient(90deg, var(--pc, var(--c-primary)), color-mix(in oklab, var(--pc, var(--c-primary)) 40%, var(--logo-sky)));
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.sh-card a:hover::after, .sh-card a:focus-visible::after { transform: scaleX(1); }
/* "Explore →" footer: pinned to the bottom so every card lines up */
.sh-card__cta {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: auto; padding-top: 1.1rem;
  font-size: .9rem; font-weight: 600; color: var(--pc, var(--c-primary));
}
.sh-card__cta svg { width: 1em; height: 1em; transition: transform .35s var(--ease); }
.sh-card a:hover .sh-card__cta svg, .sh-card a:focus-visible .sh-card__cta svg { transform: translateX(5px); }
.sh-card a:focus-visible { outline: 2px solid var(--pc, var(--c-primary)); outline-offset: 3px; }
/* Icon badge sits on the seam between the image and the white body */
.sh-card__badge {
  display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 1rem;
  border-radius: 12px; border: 3px solid #fff; color: #fff;
  background: linear-gradient(135deg, var(--pc, var(--c-primary)), color-mix(in oklab, var(--pc, var(--c-primary)) 40%, var(--logo-sky)));
  box-shadow: 0 10px 20px -10px color-mix(in oklab, var(--pc, var(--c-primary)) 80%, transparent);
}
.sh-card__badge .sh-ico { width: 19px; height: 19px; }
.sh-card__icon {
  display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px; margin-bottom: 1.1rem;
  border-radius: 14px; border: 4px solid var(--sh-card-dark); color: #fff;
  background: linear-gradient(135deg, var(--pc, var(--c-primary)), color-mix(in oklab, var(--pc, var(--c-primary)) 35%, var(--logo-sky)));
}
.sh-card__icon .sh-ico { width: 22px; height: 22px; }
.sh-card h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); font-weight: 700; letter-spacing: -.02em; color: var(--c-ink); transition: color .3s; }
.sh-card a:hover h3 { color: var(--pc, var(--c-primary)); }
/* Summary trimmed to 3 lines, as in the reference */
.sh-card__text {
  margin-top: .5rem; font-size: .93rem; line-height: 1.55; color: #5b6475;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Phones: 1 per row · tablets: 2 per row (5th full width) · desktop: 3 cards, then 2 wider cards */
@media (min-width: 700px) { .sh-cards { grid-template-columns: repeat(2, 1fr); } .sh-card:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 700px) and (max-width: 1099.98px) {
  /* Lone full-width card on tablets: image beside the text instead of a very tall image */
  .sh-card:last-child:nth-child(odd) a { flex-direction: row; }
  .sh-card:last-child:nth-child(odd) .sh-card__img { width: 50%; border-bottom: 0; border-right: 1px solid var(--line); }
  .sh-card:last-child:nth-child(odd) .sh-card__body { justify-content: center; padding: 1.6rem 1.75rem; }
  .sh-card:last-child:nth-child(odd) .sh-card__badge { margin: 0 0 1rem; }
  .sh-card:last-child:nth-child(odd) .sh-card__cta { margin-top: 0; }
}
@media (min-width: 1100px) {
  .sh-cards { grid-template-columns: repeat(6, 1fr); }
  .sh-card { grid-column: span 2; }
  .sh-card--wide, .sh-card:last-child:nth-child(odd).sh-card--wide { grid-column: span 3; }
}
/* Product pages, "Explore our other products": same cards, all in one row on desktop */
@media (min-width: 1100px) {
  .sh-cards--row { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
  .sh-cards--row > .sh-card, .sh-cards--row > .sh-card:last-child:nth-child(odd) { grid-column: auto; }
  /* Home: 5 narrower cards in one row — taller card, tighter padding, smaller type */
  .sh-cards--compact { gap: 1rem; }
  .sh-cards--compact .sh-card__body { padding: 0 1.15rem 1.2rem; }
  .sh-cards--compact .sh-card__cta { padding-top: .9rem; font-size: .85rem; }
  .sh-cards--compact .sh-card h3 { font-size: 1.15rem; line-height: 1.25; }
  .sh-cards--compact .sh-card__text { font-size: .86rem; -webkit-line-clamp: 4; }
  .sh-cards--compact .sh-card__badge { width: 40px; height: 40px; margin: -20px 0 .85rem; }
}


/* ==========================================================================
   SPLIT (photo + text) — "Why choose us" (white section)
   ========================================================================== */
/* Compact split: a rounded photo inside the content width (not a half-screen bleed),
   no fixed minimum height, tighter spacing. */
.sh-split {
  position: relative; display: grid; gap: 2.5rem; align-items: center; overflow: hidden;
  padding: var(--sh-section) max(var(--gutter), (100% - var(--sh-container)) / 2);
  background: #ffffff; color: var(--c-ink);
}
.sh-split.sh-blue { background: var(--sh-blue-bg); } /* light-blue band when the page alternates */
.sh-split__body { position: relative; }
/* Same type style as every other section heading (.sh-h2): bold, upright, tight tracking.
   Slightly smaller cap because it sits in the narrower text column beside the photo. */
.sh-split__title {
  font-family: var(--f-display); font-weight: 700; color: var(--c-ink);
  font-size: clamp(2rem, 1.25rem + 2.2vw, 3rem); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance;
}
.sh-split__soft, .sh-split__strong { display: inline; font: inherit; letter-spacing: inherit; color: inherit; margin: 0; }
.sh-split .sh-btn { margin-top: .25rem; }
/* Outline button on white: navy text and border, fills logo blue on hover */
.sh-split .sh-btn--outline { border-color: color-mix(in oklab, var(--c-ink) 22%, transparent); color: var(--c-ink); }
.sh-split .sh-btn--outline:hover { color: #fff; }
@media (min-width: 1024px) {
  .sh-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 5vw, 5rem); }
  .sh-split--solo { grid-template-columns: minmax(0, 1fr); }
  .sh-split--solo .sh-split__body { margin-inline: auto; max-width: 980px; }
  /* Points in a 2 × 2 grid on desktop: keeps the section short */
  .sh-split .sh-points { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  .sh-split .sh-points li:nth-child(2) { border-top: 1px solid var(--line); }
}

/* Home "Everything your business needs online": shorter band — less padding, smaller title,
   one-line points, narrower image */
.sh-split--compact { padding-block: clamp(2.5rem, 1.75rem + 2.5vw, 3.75rem); gap: 2rem; }
.sh-split--compact .sh-split__title { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.4rem); }
.sh-split--compact .sh-points { margin: 1.1rem 0 1.4rem; }
.sh-split--compact .sh-points li { gap: .9rem; padding: .7rem 0; }
.sh-split--compact .sh-points h3 { font-size: 1.05rem; }
.sh-split--compact .sh-points p { margin-top: .15rem; font-size: .95rem; line-height: 1.45; }
@media (min-width: 1024px) {
  .sh-split--compact { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2.5rem, 4vw, 4rem); }
}
.sh-points { display: grid; gap: 0; margin: 1.6rem 0 1.9rem; }
.sh-points li { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; padding: .95rem 0; border-bottom: 1px solid var(--line); }
.sh-points li:first-child { border-top: 1px solid var(--line); }
.sh-points h3 { font-size: 1.15rem; font-weight: 600; }
.sh-points p { margin-top: .3rem; color: var(--muted); }

/* ==========================================================================
   BENEFITS / SERVICES (numbered cards)
   ========================================================================== */
.sh-benefits { display: grid; gap: 1.1rem; }
.sh-benefit {
  position: relative; overflow: hidden; padding: 2rem 1.75rem 1.9rem;
  border: 1px solid var(--line); border-radius: var(--sh-radius); background: #fff;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
}
.sh-benefit::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--sh-grad); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.sh-benefit:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -35px rgba(10, 30, 90, .45); border-color: transparent; }
.sh-benefit:hover::before { transform: scaleX(1); }
.sh-benefit__n {
  display: block; font-size: 2.6rem; font-weight: 700; line-height: 1; letter-spacing: -.04em;
  background: var(--em-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.sh-benefit h3 { margin-top: 1.25rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; color: var(--c-ink); }
.sh-benefit p { margin-top: .45rem; color: var(--muted); }
@media (min-width: 640px) { .sh-benefits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sh-benefits { grid-template-columns: repeat(3, 1fr); } }
/* Home "Why businesses trust …": one white panel, 3 × 3 grid of icon + label (no numbers) */
ul.sh-trust[role="list"] { /* beats base.css's ul[role="list"] { padding: 0 } */
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem 2rem;
  max-width: 1120px; margin-inline: auto; padding: clamp(1.75rem, 1.2rem + 2vw, 3rem) clamp(1.5rem, 1rem + 3vw, 3.5rem);
  border: 1px solid var(--line); border-radius: 22px; background: #fff;
  box-shadow: 0 30px 70px -45px rgba(10, 30, 90, .35);
}
@media (min-width: 640px) { ul.sh-trust[role="list"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { ul.sh-trust[role="list"] { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } }
/* --cols: product-page benefits set it so 2–4 items sit in one row; phones get a slightly tighter gap */
@media (max-width: 639.98px) { ul.sh-trust[role="list"] { gap: 1.25rem; } }
.sh-trust__item { display: flex; align-items: center; gap: 1rem; }
.sh-trust__icon {
  display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: color-mix(in oklab, var(--c-primary) 9%, #fff); color: var(--c-primary);
  transition: background-color .3s, color .3s, transform .4s var(--ease);
}
.sh-trust__icon .sh-ico { width: 26px; height: 26px; }
.sh-trust__item:hover .sh-trust__icon { background: var(--c-primary); color: #fff; transform: scale(1.06); }
.sh-trust__label { font-size: 1.02rem; font-weight: 600; line-height: 1.35; color: var(--c-ink); }

/* Card design shared by product-page "Services" and "Benefits for your business": gradient check-icon badge,
   soft tinted card that lifts on hover. Benefits (--row) also puts every card in one row on desktop */
.sh-benefits--card { gap: 1.25rem; }
.sh-benefits--card .sh-benefit {
  display: flex; flex-direction: column; isolation: isolate;
  padding: 1.9rem 1.6rem 2rem; border-color: color-mix(in oklab, var(--c-primary) 12%, var(--line));
  background: linear-gradient(180deg, #fff 0%, color-mix(in oklab, var(--c-primary) 4%, #fff) 100%);
  box-shadow: 0 1px 2px rgba(10, 30, 90, .04), 0 18px 40px -32px rgba(10, 30, 90, .35);
}
.sh-benefits--card .sh-benefit::before { inset: auto 0 0; height: 4px; } /* accent bar sweeps in along the bottom */
.sh-benefits--card .sh-benefit__n {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
  background: var(--sh-grad); color: #fff; -webkit-text-fill-color: #fff;
  box-shadow: 0 12px 24px -12px color-mix(in oklab, var(--c-primary) 85%, transparent);
  transition: transform .5s var(--ease), border-radius .5s var(--ease);
}
.sh-benefits--card .sh-benefit__n .sh-ico { width: 26px; height: 26px; stroke-width: 1.8; }
.sh-benefits--card .sh-benefit__n--tick .sh-ico { width: 34px; height: 34px; stroke-width: 2.2; } /* the tick is drawn small: scale it up */
.sh-benefits--card .sh-benefit h3 { margin-top: 1.4rem; font-size: 1.2rem; line-height: 1.3; transition: color .3s; }
.sh-benefits--card .sh-benefit p { margin-top: .6rem; font-size: .97rem; line-height: 1.6; }
.sh-benefits--card .sh-benefit:hover {
  transform: translateY(-6px); border-color: transparent;
  background: linear-gradient(180deg, #fff 0%, color-mix(in oklab, var(--c-primary) 8%, #fff) 100%);
  box-shadow: 0 34px 60px -32px rgba(10, 30, 90, .45);
}
.sh-benefits--card .sh-benefit:hover .sh-benefit__n { transform: rotate(-6deg) scale(1.06); border-radius: 50%; }
.sh-benefits--card .sh-benefit:hover h3 { color: var(--c-primary); }
.sh-blue .sh-benefits--card .sh-benefit { border-color: transparent; background: #fff; box-shadow: 0 30px 60px -40px rgba(10, 30, 90, .45); }
@media (min-width: 1024px) {
  .sh-benefits--row { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); align-items: stretch; }
  .sh-benefits--row .sh-benefit { padding: 1.75rem 1.4rem 1.9rem; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  /* 5+ cards would be too narrow on small laptops: fall back to 3 per row there */
  .sh-benefits--row[style*="--n:5"], .sh-benefits--row[style*="--n:6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .sh-benefits--row[style*="--n:5"] .sh-benefit h3, .sh-benefits--row[style*="--n:6"] .sh-benefit h3 { font-size: 1.1rem; }
  .sh-benefits--row[style*="--n:5"] .sh-benefit__n, .sh-benefits--row[style*="--n:6"] .sh-benefit__n { width: 46px; height: 46px; }
}

/* ==========================================================================
   FAQ + CTA card
   ========================================================================== */
.sh-faq__grid { display: grid; gap: 3rem; }
.sh-faq__intro .sh-h2 { max-width: 14ch; }
.sh-cta-card {
  position: relative; overflow: hidden; margin-top: 2.25rem; padding: 2rem;
  border-radius: 24px; background: var(--sh-grad); color: #fff;
}
.sh-cta-card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; border: 36px solid rgba(255, 255, 255, .1); }
.sh-cta-card__kicker { font-size: .76rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; opacity: .8; }
.sh-cta-card__title { position: relative; margin-top: .5rem; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.sh-cta-card__actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.5rem; }
.sh-cta-card__mail { font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .5); word-break: break-all; }
.sh-cta-card__mail:hover { text-decoration-color: #fff; }

.sh-accordion__item { border-bottom: 1px solid var(--line); }
.sh-accordion__item:first-child { border-top: 1px solid var(--line); }
.sh-accordion__item summary {
  display: grid; grid-template-columns: 1fr auto; gap: 1.1rem; align-items: center;
  padding: 1.4rem 0; cursor: pointer; list-style: none;
  font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); font-weight: 600; color: var(--c-ink);
}
.sh-accordion__item summary::-webkit-details-marker { display: none; }
.sh-accordion__item summary:hover .sh-accordion__q { color: var(--c-primary); }
.sh-accordion__q { transition: color .25s; }
.sh-accordion__icon { position: relative; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; transition: background-color .3s, border-color .3s; }
.sh-accordion__icon::before, .sh-accordion__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; background: currentColor; transform: translate(-50%, -50%); transition: transform .35s var(--ease); }
.sh-accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.sh-accordion__item[open] .sh-accordion__icon { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.sh-accordion__item[open] .sh-accordion__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.sh-accordion__item p { padding: 0 3.5rem 1.6rem 0; color: var(--muted); }
@media (min-width: 1024px) {
  .sh-faq__grid { grid-template-columns: 5fr 7fr; gap: 5rem; align-items: start; }
  .sh-faq__intro { position: sticky; top: calc(var(--header-h) + var(--offer-h) + 2rem); }
}

/* ==========================================================================
   CONTACT (white section + form card)
   ========================================================================== */
.sh-contact { padding-block: var(--sh-section); background: #ffffff; color: var(--c-ink); }
.sh-contact.sh-blue { background: var(--sh-blue-bg); } /* light-blue band when the page alternates */
.sh-contact.sh-blue .sh-contact__list .sh-ico { background: #fff; }
.sh-contact__grid { display: grid; gap: 3rem; }
.sh-contact__title {
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase; color: var(--c-ink);
  font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); line-height: 1.05; letter-spacing: -.02em;
}
.sh-contact__lead { margin-top: 1.25rem; max-width: 46ch; font-size: 1.1rem; color: var(--muted); }
.sh-contact__list { display: grid; gap: 1.1rem; margin-top: 2.25rem; }
.sh-contact__list li { display: flex; align-items: center; gap: 1rem; }
.sh-contact__list .sh-ico { width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: var(--sh-tint); color: var(--c-primary); }
.sh-contact__list span { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.sh-contact__list a, .sh-contact__list p { color: var(--c-ink); word-break: break-word; }
.sh-contact__list a:hover { color: var(--c-primary); }
@media (min-width: 1024px) { .sh-contact__grid { grid-template-columns: 5fr 7fr; gap: 5rem; align-items: start; } }

.sh-form {
  --fg: var(--c-ink); --bg: #fff; --line: #dfe3ec; --muted: #5b6475;
  padding: clamp(1.5rem, 1rem + 2vw, 2.6rem); border-radius: 26px;
  background: #fff; color: var(--fg); border: 1px solid #e4e8f0; box-shadow: 0 40px 90px -50px rgba(10, 30, 90, .4);
}
.sh-form > * + * { margin-top: 1.1rem; }
.sh-form .input, .sh-form .select, .sh-form .textarea { border-radius: 12px; background: #f8faff; }
.sh-form .field label small { font-weight: 400; color: var(--muted); }
.sh-form__row { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .sh-form__row { grid-template-columns: 1fr 1fr; } }
.sh-form__chips { margin: 0; padding: 0; border: 0; min-width: 0; }
.sh-form__chips legend { margin-bottom: .7rem; padding: 0; font-size: var(--fs-sm); font-weight: 500; }
.sh-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.sh-chip { position: relative; }
.sh-chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.sh-chip span {
  display: inline-flex; align-items: center; gap: .45em; padding: .55em 1em;
  border: 1px solid var(--line); border-radius: 999px; font-size: .88rem; font-weight: 500;
  transition: background-color .25s, border-color .25s, color .25s;
}
.sh-chip .sh-ico { width: 17px; height: 17px; color: var(--pc); }
.sh-chip:hover span { border-color: color-mix(in oklab, var(--pc) 60%, #fff); }
.sh-chip input:checked + span { background: color-mix(in oklab, var(--pc) 12%, #fff); border-color: var(--pc); color: var(--c-ink); }
.sh-chip input:focus-visible + span { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.sh-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding-top: .4rem; }
.sh-form__fine { font-size: .85rem; color: var(--muted); }

/* ==========================================================================
   PRODUCT PAGES
   ========================================================================== */
.sh-modlinks { display: grid; gap: 1rem; }
.sh-modlinks a {
  display: flex; align-items: center; gap: 1.25rem; height: 100%; padding: 1.5rem 1.6rem;
  border: 1px solid var(--line); border-radius: var(--sh-radius); background: #fff; color: var(--c-ink);
  transition: border-color .3s, transform .4s var(--ease), box-shadow .4s var(--ease);
}
.sh-modlinks a:hover { border-color: var(--pc); transform: translateY(-3px); }
.sh-modlinks .sh-card__icon { flex: none; margin: 0; border: 0; }
.sh-modlinks strong { display: block; font-size: 1.3rem; font-weight: 700; }
.sh-modlinks small { display: block; margin-top: .25rem; font-size: .92rem; line-height: 1.5; color: var(--muted); }
.sh-modlinks a:hover { box-shadow: 0 30px 60px -35px rgba(10, 30, 90, .4); }
.sh-modlinks .sh-arrow { margin-left: auto; width: 1.4em; height: 1.4em; }
.sh-modlinks a:hover .sh-arrow { transform: translateX(4px); }
@media (min-width: 800px) { .sh-modlinks { grid-template-columns: 1fr 1fr; } }

.sh-module__top { display: grid; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.sh-module .sh-kicker { color: var(--pc); }
.sh-module .sh-lead { margin-top: 1.1rem; color: var(--muted); }
@media (min-width: 1024px) {
  .sh-module__top { grid-template-columns: 1fr 1fr; }
  .sh-module--flip .sh-intro__photo { order: 2; }
}
.sh-checks { display: grid; gap: .8rem; margin-top: 1.6rem; }
.sh-checks li { display: flex; gap: .75rem; color: var(--muted); }
.sh-checks strong { color: var(--c-ink); font-weight: 600; }
.sh-checks .sh-ico { width: 22px; height: 22px; margin-top: .1rem; color: var(--pc, var(--c-primary)); }

.sh-features-head { display: grid; gap: 2.5rem; align-items: center; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
@media (min-width: 1024px) { .sh-features-head:not(.sh-features-head--solo) { grid-template-columns: 7fr 5fr; gap: 4rem; } }
/* Module feature heading: "Sale Lead features · 7 features" */
.sh-features-bar {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem;
  margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line);
}
.sh-features-bar__title { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); font-weight: 700; letter-spacing: -.01em; color: var(--c-ink); }
.sh-features-bar__count { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Features: plain checklist (tick-box icon + feature name), no cards.
   1 column on phones, 2 on tablets, 3 on desktop; fills row by row. */
ul.sh-checklist[role="list"] { /* beats base.css's ul[role="list"] { padding: 0 } */
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 2.5rem; padding: 0; margin: 0;
}
@media (min-width: 640px) { ul.sh-checklist[role="list"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { ul.sh-checklist[role="list"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sh-checklist li { display: flex; align-items: flex-start; gap: .75rem; font-size: 1.06rem; line-height: 1.45; color: var(--c-ink); }
.sh-checklist .sh-ico { flex: none; width: 22px; height: 22px; margin-top: .05rem; color: var(--pc, var(--c-primary)); }
/* Plain tick inside the solid Benefits/Services badges (the shared "check" icon also draws a ring) */
.sh-benefits--card .sh-benefit__n--tick .sh-ico circle { display: none; }

.sh-mini { display: grid; gap: 1rem; }
.sh-mini a {
  display: flex; flex-direction: column; height: 100%; padding-bottom: 1.4rem;
  border: 1px solid var(--line); border-radius: 0; overflow: hidden; background: #fff;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.sh-mini a:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -35px rgba(10, 30, 90, .45); }
.sh-mini figure { aspect-ratio: 16 / 10; overflow: hidden; }
.sh-mini img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.sh-mini a:hover img { transform: scale(1.06); }
.sh-mini .sh-card__icon { margin: -26px 0 .9rem 1.25rem; border-color: #fff; }
.sh-mini small, .sh-mini strong, .sh-mini .sh-card__more { padding-inline: 1.25rem; }
.sh-mini small { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sh-mini strong { margin-top: .2rem; font-size: 1.25rem; font-weight: 700; color: var(--c-ink); }
.sh-mini .sh-card__more { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: 1rem; font-weight: 600; color: var(--c-primary); }
.sh-mini a:hover .sh-arrow { transform: translate(3px, -3px); }
@media (min-width: 640px) { .sh-mini { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sh-mini { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.sh-footer { padding-top: clamp(4rem, 3rem + 4vw, 6rem); background: var(--sh-darker); color: rgba(255, 255, 255, .68); font-size: .95rem; }
.sh-footer__top { display: grid; gap: 2.5rem; }
.sh-footer__brand p { max-width: 40ch; margin-top: 1.25rem; }
.sh-footer__social { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.sh-footer__social a { display: inline-block; padding: .4rem .9rem; border: 1px solid rgba(255, 255, 255, .15); border-radius: 999px; font-size: .85rem; transition: background-color .3s, color .3s; }
.sh-footer__social a:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.sh-footer__label { margin-bottom: 1rem; font-size: .74rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #fff; }
.sh-footer__col li + li { margin-top: .6rem; }
.sh-footer__col a { transition: color .25s; word-break: break-word; }
.sh-footer__col a:hover { color: #fff; }
.sh-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem;
  margin-top: clamp(3rem, 5vw, 4.5rem); padding-block: 1.6rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, .1); font-size: .86rem; color: rgba(255, 255, 255, .5);
}
.sh-footer__links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.sh-footer__links a:hover { color: #fff; }
@media (min-width: 700px) { .sh-footer__top { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .sh-footer__top { grid-template-columns: 1.6fr .8fr 1fr 1.3fr; gap: 3rem; } }

/* ==========================================================================
   MOTION & INTERACTION (see shalom.js / core.js)
   ========================================================================== */

/* Parallax: hero background moves slower than the page */
/* Small overscan only: the parallax shift is ~15px while the hero is on screen, and a taller box makes
   object-fit: cover enlarge the 16:9 banner artwork */
.sh-hero__media { position: absolute; inset: -6% 0; z-index: -2; will-change: transform; }
.sh-hero__media .sh-hero__bg { z-index: auto; }
.sh-hero__rail-item { transition-delay: calc(var(--d, 0ms) + 650ms); }

/* Parallax photos: oversized inside a clipped frame so edges never show */
.sh-parallax { overflow: hidden; }
.sh-parallax img[data-parallax] { height: calc(100% + 160px) !important; will-change: transform; }

/* Card hover: pointer tilt (core.js data-tilt) + spotlight that follows the pointer */
/* (no extra transition on the tilted <li>: it would replace the scroll-reveal fade;
   the reveal's own transform transition eases the card back when the pointer leaves) */
.sh-card a { position: relative; }
.sh-card a::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--pc) 10%, transparent), transparent 60%);
  opacity: 0; transition: opacity .4s;
}
.sh-card a:hover::before { opacity: 1; }
.sh-benefit:hover { background: linear-gradient(180deg, #fff, #f3f6ff); }
.sh-points li h3 { transition: color .3s, transform .4s var(--ease); }
.sh-points li:hover h3 { color: var(--c-primary); transform: translateX(4px); }
.sh-points--light li:hover h3 { color: var(--c-primary); }

/* Image hover zoom */
.sh-head__photo img, .sh-intro__photo img, .sh-split__media img { transition: transform .9s var(--ease); }
.sh-head__photo:hover img, .sh-intro__photo:hover img, .sh-split__media:hover img { transform: scale(1.04); }

.sh-slide:hover .sh-slide__media img { transform: scale(1.07); }
.sh-slide__media img { transition: transform .9s var(--ease); }

/* Product spotlight slider */
.sh-spot__nav { display: flex; align-items: center; gap: .75rem; }
@media (min-width: 1024px) { .sh-spot .sh-head--split { grid-template-columns: 1fr auto; } }
.sh-round {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid #c9d7f5; background: #fff; color: var(--c-ink);
  transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
.sh-round:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; transform: scale(1.06); }
.sh-round .sh-ico { width: 22px; height: 22px; }
.sh-round__prev { transform: rotate(90deg); }
.sh-round__next { transform: rotate(-90deg); }
.sh-spot__track {
  display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: .5rem;
}
.sh-spot__track::-webkit-scrollbar { display: none; }
.sh-spot__track:focus-visible { outline-offset: 6px; }
.sh-slide {
  flex: 0 0 88%; scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr; /* equal-height slides: the text area takes the spare height */
  border: 1px solid var(--line); border-radius: 0; overflow: hidden; background: #fff;
  opacity: .55; transform: scale(.97); transform-origin: left center;
  transition: opacity .6s var(--ease), transform .6s var(--ease), box-shadow .6s var(--ease);
}
.sh-slide.is-active { opacity: 1; transform: none; box-shadow: 0 40px 80px -45px rgba(10, 30, 90, .5); }
.sh-slide__media { aspect-ratio: 16 / 10; overflow: hidden; }
.sh-slide__media img { width: 100%; height: 100%; object-fit: cover; }
.sh-slide__body { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.5rem, 1rem + 2vw, 3rem); }
.sh-slide__kicker { display: flex; align-items: center; gap: .75rem; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sh-slide__kicker .sh-card__icon { width: 40px; height: 40px; margin: 0; border: 0; border-radius: 11px; }
.sh-slide__kicker .sh-card__icon .sh-ico { width: 19px; height: 19px; }
.sh-slide h3 { margin: 1.1rem 0 .8rem; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; color: var(--c-ink); }
.sh-slide p { color: var(--muted); }
/* Same text block on every slide: exactly 3 lines reserved (longer text is trimmed with …) */
.sh-slide__text {
  line-height: 1.6; min-height: 4.8em; margin-bottom: 1.5rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sh-slide .sh-tags { margin: 1.25rem 0 1.6rem; }
.sh-slide .sh-textlink { margin-top: auto; }
@media (min-width: 900px) {
  .sh-slide { flex-basis: 80%; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
  .sh-slide__media { aspect-ratio: auto; min-height: 400px; }
  .sh-slide__body { justify-content: center; }
}
.sh-spot__dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.75rem; }
.sh-spot__dots button { width: 10px; height: 10px; border-radius: 999px; background: rgba(10, 40, 120, .22); transition: width .45s var(--ease), background-color .3s; } /* visible on the blue band */
.sh-spot__dots button:hover { background: rgba(10, 40, 120, .42); }
.sh-spot__dots button[aria-pressed="true"] { width: 32px; background: var(--sh-grad); }

/* Spotlight on the light-blue band: white slide cards with a soft shadow */
.sh-blue .sh-slide { border-color: transparent; box-shadow: 0 40px 80px -50px rgba(10, 30, 90, .35); }

/* Smooth accordion (height animated by shalom.js) */
.sh-accordion__body { overflow: hidden; }
.sh-accordion__item.is-closing .sh-accordion__icon { background: transparent; border-color: var(--line); color: inherit; }
.sh-accordion__item.is-closing .sh-accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); }

/* Banner video reel (home hero). The still image stays underneath until a clip is playing. */
.sh-hero__videos { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); animation: sh-zoom 18s var(--ease) both; }
.sh-hero__videos.is-ready { opacity: 1; }
.sh-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s var(--ease-in-out); }
.sh-hero__video.is-active { opacity: 1; }

.sh-reel {
  position: absolute; z-index: 2; right: var(--gutter); bottom: 7rem; /* just above the product rail */
  display: flex; align-items: center; gap: .5rem; padding: .4rem;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
  background: rgba(3, 8, 25, .45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.sh-reel[hidden] { display: none; }
.sh-reel__items { display: flex; gap: .25rem; }
.sh-reel__item {
  --p: 0; position: relative; display: grid; gap: .3rem; padding: .45rem .8rem .5rem; border-radius: 999px;
  color: rgba(255, 255, 255, .62); font-size: .76rem; font-weight: 500; text-align: left; transition: color .3s, background-color .3s;
}
.sh-reel__item:hover { color: #fff; }
.sh-reel__item[aria-pressed="true"] { color: #fff; background: rgba(255, 255, 255, .08); }
.sh-reel__bar { display: block; width: 100%; min-width: 64px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.sh-reel__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--c-secondary), #fff); transform-origin: left; transform: scaleX(var(--p)); }
.sh-reel__item[aria-pressed="false"] .sh-reel__bar i { transform: scaleX(0); }
.sh-reel__toggle {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff; transition: background-color .3s;
}
.sh-reel__toggle:hover { background: var(--c-primary); }
.sh-reel__toggle svg { width: 16px; height: 16px; fill: currentColor; }
.sh-reel__play, .sh-reel__toggle[aria-pressed="true"] .sh-reel__pause { display: none; }
.sh-reel__toggle[aria-pressed="true"] .sh-reel__play { display: block; }
/* Small screens: progress dashes only (labels stay available to screen readers) */
@media (max-width: 767px) {
  .sh-reel { top: 1rem; bottom: auto; right: 1rem; }
  .sh-reel__item { padding: .55rem .35rem; }
  .sh-reel__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sh-reel__bar { min-width: 22px; }
}

/* ==========================================================================
   CONTACT PAGE (/contact)
   ========================================================================== */
.sh-hero--page { min-height: clamp(460px, calc(70svh - var(--header-h) - var(--offer-h)), 640px); }

.sh-reach { display: grid; gap: 1.1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .sh-reach { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sh-reach { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.sh-reach__card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: .45rem;
  padding: 1.9rem 1.7rem; border: 1px solid var(--line); border-radius: var(--sh-radius); background: #fff;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
}
.sh-reach__card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--sh-grad); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.sh-reach__card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -35px rgba(10, 30, 90, .45); border-color: transparent; }
.sh-reach__card:hover::before { transform: scaleX(1); }
.sh-reach__icon {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: .8rem; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, var(--c-primary), color-mix(in oklab, var(--c-primary) 35%, var(--logo-sky)));
}
.sh-reach__icon .sh-ico { width: 24px; height: 24px; }
.sh-reach__label { font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.sh-reach__value { font-size: 1.2rem; font-weight: 600; line-height: 1.35; color: var(--c-ink); overflow-wrap: anywhere; }
a.sh-reach__value:hover { color: var(--c-primary); }
.sh-reach__note { font-size: .92rem; color: var(--muted); }
.sh-reach__card .sh-textlink { margin-top: auto; padding-top: .9rem; }

.sh-map { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
.sh-map__info .sh-lead { margin: 1.1rem 0 1.75rem; color: var(--muted); max-width: 32ch; }
.sh-map__frame { overflow: hidden; border-radius: 24px; border: 1px solid var(--line); background: #dfe7fb; aspect-ratio: 16 / 11; box-shadow: 0 40px 80px -45px rgba(10, 30, 90, .5); }
.sh-map__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (min-width: 1024px) { .sh-map { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4rem; } }

/* ==========================================================================
   LOADER (first visit per session; core.js sets --p 0→1, the % count and .is-done)
   ========================================================================== */
/* Comic style: light-blue halftone backdrop, Bloomy pops in and waves beside a speech balloon,
   an outlined progress bar with moving stripes fills below. When done, the whole panel lifts
   away like a curtain (ink edge along the bottom). Tokens (--ink, --pop…) are in the COMIC LAYER. */
.sh-loader {
  --p: 0;
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: var(--halftone), var(--sh-blue-bg);
  border-bottom: 4px solid var(--c-ink);
  color: var(--c-ink);
  transition: transform .75s cubic-bezier(.7, 0, .2, 1), visibility 0s .75s;
  /* Failsafe without JS: if core.js is slow to arrive or fails, the loader still clears after 4s */
  animation: sh-loader-out .7s var(--ease) 4s forwards;
}
@keyframes sh-loader-out { to { transform: translateY(-101%); visibility: hidden; } }
html.sh-no-loader .sh-loader, html:not(.js) .sh-loader { display: none; }
.sh-loader.is-done { transform: translateY(-101%); visibility: hidden; }
.sh-loader__inner { display: grid; justify-items: center; gap: 1.1rem; padding: 1.5rem; }

.sh-loader__stage { display: flex; align-items: center; gap: 0; }
.sh-loader__stage .sh-loader__bubble { margin-left: -2.25rem; } /* the pose has empty space on its right */
.sh-loader__bloomy {
  width: clamp(120px, 10vw + 80px, 170px); height: auto;
  transform-origin: 50% 90%;
  animation: sh-loader-pop .7s cubic-bezier(.34, 1.56, .64, 1) both, sh-loader-hop 1.4s ease-in-out .7s infinite;
}
.sh-loader__bubble {
  position: relative; margin: 0 0 3.5rem; padding: .8rem 1.1rem;
  border: 2.5px solid var(--c-ink); border-radius: 18px; background: #fff; box-shadow: 4px 4px 0 var(--c-ink);
  font-family: var(--f-display); font-size: 1.05rem; font-weight: 600; white-space: nowrap;
  animation: sh-loader-pop .5s cubic-bezier(.34, 1.56, .64, 1) .35s both;
  transform-origin: 0 100%;
}
/* Balloon tail pointing down-left at Bloomy */
.sh-loader__bubble::before {
  content: ""; position: absolute; left: 14px; bottom: -11px; width: 18px; height: 18px;
  background: #fff; border: solid var(--c-ink); border-width: 0 2.5px 2.5px 0; border-radius: 0 0 4px 0;
  transform: skewX(30deg) rotate(45deg);
}
.sh-loader__name {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--f-display); font-size: 1.15rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  animation: sh-loader-fade .6s var(--ease) .5s both;
}
.sh-loader__name img { width: 28px; height: 28px; }
.sh-loader__bar {
  width: min(260px, 70vw); height: 18px; padding: 3px; border: 2.5px solid var(--c-ink); border-radius: 999px;
  background: #fff; box-shadow: 4px 4px 0 var(--c-ink); overflow: hidden;
}
.sh-loader__bar i {
  display: block; height: 100%; border-radius: 999px; transform-origin: left; transform: scaleX(var(--p));
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .28) 0 6px, transparent 6px 12px) 0 0 / 34px 100%, var(--sh-grad);
  animation: sh-loader-stripes .6s linear infinite;
}
.sh-loader__count { font-family: var(--f-display); font-size: .95rem; font-weight: 600; color: var(--c-primary); font-variant-numeric: tabular-nums; }
@media (max-width: 479.98px) {
  .sh-loader__stage { flex-direction: column; gap: .25rem; }
  .sh-loader__stage .sh-loader__bubble { order: -1; margin: 0; font-size: .95rem; transform-origin: 50% 100%; }
  .sh-loader__bubble::before { left: 50%; margin-left: -9px; transform: rotate(45deg); }
}
@keyframes sh-loader-pop { from { opacity: 0; transform: scale(.3) rotate(-10deg); } }
@keyframes sh-loader-hop { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-10px) rotate(-3deg); } 60% { transform: translateY(0) rotate(2deg); } }
@keyframes sh-loader-stripes { to { background-position: 34px 0, 0 0; } }
@keyframes sh-loader-fade { from { opacity: 0; transform: translateY(8px); } }

/* Customize button sits above the dark footer */
.layout-shalom .customizer__toggle { background: #fff; color: var(--c-ink); }

/* Scroll-lit text (shalom.js): each word (.lw) dims to 18% until the scroll reaches it, as Theme 2's intro */
[data-scroll-lit] .lw { opacity: var(--o, .18); transition: opacity .3s linear; }

/* ---------- Back-to-top button (layout + shalom.js) ----------
   Bottom-right (the Customize button is bottom-left); the ring around it fills with reading progress (--p) */
.sh-totop {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 110; /* under the drawer (130) */
  display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--c-primary) calc(100% - 4px), transparent calc(100% - 3px)),
    conic-gradient(var(--c-secondary) calc(var(--p, 0) * 1%), rgba(11, 18, 51, .15) 0);
  color: #fff; cursor: pointer;
  box-shadow: 0 10px 24px -10px color-mix(in oklab, var(--c-primary) 70%, transparent);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity .3s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1), visibility .3s;
}
.sh-totop[hidden] { display: none; }
.sh-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.sh-totop.is-visible:hover { transform: translateY(-3px); }
.sh-totop:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }
.sh-totop svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 599.98px) { .sh-totop { right: 1rem; bottom: 1rem; width: 46px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { .sh-totop { transition: opacity .2s, visibility .2s; transform: none; } }
@media print { .sh-totop { display: none; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sh-hero__bg { animation: none; }
  .sh-pill__dot { animation: none; }
  .sh-btn:hover, .sh-card a:hover, .sh-benefit:hover, .sh-mini a:hover, .sh-modlinks a:hover { transform: none; }
  .sh-benefits--card .sh-benefit:hover, .sh-benefits--card .sh-benefit:hover .sh-benefit__n { transform: none; }}
@media print {
  .sh-header, .sh-drawer, .sh-hero__rail, .customizer { display: none; }
  .layout-shalom main { padding-top: 0; }
}

/* ---------- Bloomy, the mascot guide (_Guide.cshtml) ----------
   A speech bubble beside either Bloomy's head or a full-body pose (.sh-guide--pose).
   Colours are Bloomy's own (see image-prompts-cartoon.md). */
:root {
  --bloomy-body: var(--logo-blue);
  --bloomy-glow: var(--logo-sky);
}
.sh-guide { display: flex; align-items: center; gap: .9rem; width: fit-content; max-width: 100%; margin-top: 1.5rem; }
.sh-head--center .sh-guide { margin-inline: auto; }
.sh-guide__avatar {
  --av: 56px;
  position: relative; flex: none; width: var(--av); height: var(--av); overflow: hidden;
  border-radius: 50%; border: 3px solid #fff; background: #e3eeff;
  box-shadow: 0 0 0 2px var(--bloomy-body), 0 12px 24px -12px rgba(10, 30, 90, .5);
}
/* Crop the waving pose to Bloomy's head */
.sh-guide__avatar img { position: absolute; left: calc(var(--av) * -.36); top: calc(var(--av) * -.24); width: calc(var(--av) * 2.07); max-width: none; height: auto; }
/* Gentle idle float (slow, small): reads as "alive" without bouncing */
.sh-guide__pose { flex: none; width: clamp(88px, 6vw + 50px, 132px); height: auto; margin-block: -.5rem; animation: sh-bob 6s ease-in-out infinite; }
@keyframes sh-bob { 50% { transform: translateY(-4px); } }

.sh-guide__bubble {
  position: relative; max-width: 44ch; margin: 0; padding: 1rem 1.3rem 1.05rem;
  border: 1px solid color-mix(in oklab, var(--bloomy-body) 22%, #fff); border-radius: 16px;
  background: #fff; box-shadow: 0 1px 2px rgba(10, 30, 90, .05), 0 16px 36px -24px rgba(10, 30, 90, .5);
  font-size: .95rem; line-height: 1.6; color: var(--sh-text); text-align: left;
}
/* Tail pointing back at Bloomy */
.sh-guide__bubble::before {
  content: ""; position: absolute; left: -7px; top: 50%; width: 13px; height: 13px;
  background: inherit; border: inherit; border-width: 0 0 1px 1px; border-radius: 0 0 0 3px;
  transform: translateY(-50%) rotate(45deg);
}
.sh-guide__name {
  display: block; width: fit-content; margin-bottom: .2rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .01em; color: var(--c-primary);
}
/* Entrance: Bloomy appears first, the bubble follows a beat later */
html.js .sh-guide[data-reveal] .sh-guide__bubble { opacity: 0; transform: translateX(-8px); transition: opacity var(--dur-reveal, .8s) var(--ease) .2s, transform var(--dur-reveal, .8s) var(--ease) .2s; }
html.js .sh-guide[data-reveal].is-in .sh-guide__bubble { opacity: 1; transform: none; }
/* On the dark hero banners */
.sh-guide--dark .sh-guide__bubble {
  border-color: rgba(255, 255, 255, .22); color: #fff;
  background: rgba(12, 22, 52, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.sh-guide--dark .sh-guide__bubble::before { background: rgb(12, 22, 52); }
.sh-guide--dark .sh-guide__avatar { border-color: var(--sh-card-dark); background: var(--sh-card-dark); box-shadow: 0 0 0 2px var(--bloomy-glow); }
.sh-guide--dark .sh-guide__name { color: var(--sh-sky); }
/* Phones: smaller Bloomy, bubble keeps comfortable padding */
@media (max-width: 639.98px) {
  .sh-guide { gap: .75rem; }
  .sh-guide__avatar { --av: 44px; }
  .sh-guide__pose { width: 72px; }
  .sh-guide__bubble { font-size: .92rem; padding: .85rem 1.05rem; }
}
@media (prefers-reduced-motion: reduce) { .sh-guide__pose { animation: none; } }
@media print { .sh-guide { display: none; } }

/* ==========================================================================
   COMIC LAYER: Bloomy's cartoon world, kept professional.
   Ink outlines + hard offset shadows on cards, buttons and speech bubbles,
   a rounded display face (Fredoka) for headings, a marker highlight on <em>
   and a faint halftone on the blue bands. Logo-blue palette only.
   ========================================================================== */
:root {
  --ink: var(--c-ink);
  --ink-w: 2px;
  --pop: 5px 5px 0 var(--ink);
  --pop-lg: 8px 8px 0 var(--ink);
  --pop-sm: 3px 3px 0 var(--ink);
  --marker: color-mix(in oklab, var(--logo-sky) 55%, transparent);
  --halftone: radial-gradient(color-mix(in oklab, var(--logo-navy) 9%, transparent) 1.2px, transparent 1.6px) 0 0 / 14px 14px;
}

/* Headings: rounded and friendly, still tight and bold */
.sh-h2, .sh-split__title, .sh-hero__title { font-weight: 600; letter-spacing: -.015em; }
.sh-card h3, .sh-benefit h3, .sh-points h3, .sh-modlinks strong { font-family: var(--f-display); font-weight: 600; letter-spacing: 0; }

/* <em> in headings: solid colour on a marker stroke instead of gradient text */
.layout-shalom h1 em, .layout-shalom h2 em, .layout-shalom h3 em,
.layout-shalom h1 em .wi, .layout-shalom h2 em .wi {
  color: var(--c-primary); -webkit-text-fill-color: currentColor;
  background: linear-gradient(transparent 60%, var(--marker) 60%, var(--marker) 92%, transparent 92%);
  -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.layout-shalom h1 em:has(.wi), .layout-shalom h2 em:has(.wi) { background: none; }
/* On the dark hero: white words, the marker carries the colour */
.sh-hero .sh-hero__title em, .sh-hero .sh-hero__title em .wi {
  color: #fff;
  background-image: linear-gradient(transparent 62%, color-mix(in oklab, var(--c-primary) 85%, transparent) 62%, color-mix(in oklab, var(--c-primary) 85%, transparent) 94%, transparent 94%);
}
.sh-hero .sh-hero__title em:has(.wi) { background: none; }

/* Readable measure for body copy */
.sh-lead, .sh-head__lead, .sh-intro__text p { max-width: 62ch; }

/* Halftone dots on the blue bands: the comic-print cue, kept faint */
.sh-blue { background: var(--halftone), var(--sh-blue-bg); }
.sh-split.sh-blue { background: var(--halftone), var(--sh-blue-bg); }

/* ---------- Buttons: ink outline + hard shadow, press on click ---------- */
.sh-btn--primary, .sh-header__cta {
  border: var(--ink-w) solid var(--ink); box-shadow: var(--pop-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .3s;
}
.sh-header__cta { border-radius: 999px; padding: .65rem 1.25rem; }
.sh-btn--primary:hover, .sh-header__cta:hover { transform: translate(-2px, -2px); box-shadow: var(--pop); }
.sh-btn--primary:active, .sh-header__cta:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
/* On the dark hero the ink shadow would vanish: use white ink there */
.sh-hero .sh-btn--primary { border-color: #fff; box-shadow: 3px 3px 0 #fff; }
.sh-hero .sh-btn--primary:hover { box-shadow: 5px 5px 0 #fff; }
.sh-hero .sh-btn--outline { border-width: var(--ink-w); border-color: rgba(255, 255, 255, .85); }

/* ---------- Cards: ink outline + hard shadow, lift on hover ---------- */
.sh-card a,
.sh-blue .sh-card a {
  border: var(--ink-w) solid var(--ink); border-radius: 16px; box-shadow: var(--pop);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.sh-card a:hover,
.sh-blue .sh-card a:hover { border-color: var(--ink); box-shadow: var(--pop-lg); transform: translate(-3px, -3px); }
.sh-card__img { border-bottom: var(--ink-w) solid var(--ink); }
.sh-card__badge { border: var(--ink-w) solid var(--ink); box-shadow: var(--pop-sm); }

ul.sh-trust[role="list"] { border: var(--ink-w) solid var(--ink); border-radius: 18px; box-shadow: var(--pop-lg); }
.sh-trust__icon { border: var(--ink-w) solid var(--ink); background: #fff; box-shadow: var(--pop-sm); }
.sh-trust__item:hover .sh-trust__icon { transform: translate(-1px, -1px) rotate(-6deg); }

.sh-benefit,
.sh-benefits--card .sh-benefit,
.sh-blue .sh-benefits--card .sh-benefit {
  border: var(--ink-w) solid var(--ink); border-radius: 16px; background: #fff; box-shadow: var(--pop);
}
.sh-benefit:hover,
.sh-benefits--card .sh-benefit:hover { border-color: var(--ink); background: #fff; box-shadow: var(--pop-lg); transform: translate(-3px, -3px); }
.sh-benefit::before { display: none; }
.sh-benefits--card .sh-benefit__n { border: var(--ink-w) solid var(--ink); box-shadow: var(--pop-sm); }

.sh-modlinks a { border: var(--ink-w) solid var(--ink); border-radius: 16px; box-shadow: var(--pop); }
.sh-modlinks a:hover { border-color: var(--ink); box-shadow: var(--pop-lg); transform: translate(-3px, -3px); }

/* "Why" points become small comic panels */
.sh-points { gap: 1rem; }
.sh-points li, .sh-points li:first-child, .sh-split--compact .sh-points li {
  padding: 1rem 1.2rem; border: var(--ink-w) solid var(--ink); border-radius: 14px;
  background: #fff; box-shadow: var(--pop-sm);
}
.sh-points li:hover h3 { transform: none; }

/* Illustrations framed like comic panels */
.sh-intro__photo, .sh-head__photo, .sh-split__media { border: var(--ink-w) solid var(--ink); border-radius: 18px; overflow: hidden; box-shadow: var(--pop-lg); }
/* The "clip" reveal ends at inset(0), which would cut the hard shadow off: end just outside it */
.sh-intro__photo[data-reveal="clip"].is-in, .sh-head__photo[data-reveal="clip"].is-in { clip-path: inset(-12px); }

/* ---------- Bloomy: a real cartoon speech balloon ---------- */
.sh-guide { gap: 1.1rem; margin-top: 2rem; }
.sh-guide__pose { width: clamp(110px, 8vw + 60px, 180px); filter: drop-shadow(4px 4px 0 color-mix(in oklab, var(--ink) 18%, transparent)); }
.sh-guide__avatar { border: var(--ink-w) solid var(--ink); box-shadow: var(--pop-sm); }
.sh-guide__bubble {
  border: 2.5px solid var(--ink); border-radius: 22px; box-shadow: var(--pop);
  padding: 1.35rem 1.4rem 1.1rem; font-size: 1rem; font-weight: 500; color: var(--c-ink);
}
.sh-guide__bubble::before {
  left: -9px; width: 16px; height: 16px; border: inherit; border-width: 0 0 2.5px 2.5px; border-radius: 0 0 0 4px;
}
/* Name tag sits on the balloon's top edge */
.sh-guide__name {
  position: absolute; top: 0; left: 1.1rem; transform: translateY(-55%); margin: 0;
  padding: .15rem .65rem; border: var(--ink-w) solid var(--ink); border-radius: 999px;
  background: var(--c-primary); color: #fff; font-family: var(--f-display); font-size: .78rem; font-weight: 600; letter-spacing: .02em;
}
.sh-guide--dark .sh-guide__bubble { border-color: #fff; box-shadow: 5px 5px 0 rgba(255, 255, 255, .9); background: rgba(12, 22, 52, .88); }
.sh-guide--dark .sh-guide__name { border-color: #fff; background: var(--c-primary); color: #fff; }
@media (max-width: 639.98px) {
  .sh-guide__pose { width: 84px; }
  .sh-guide__bubble { font-size: .94rem; padding: 1.2rem 1.1rem .95rem; box-shadow: var(--pop-sm); }
}

/* Reduced motion: no lift / press transforms */
@media (prefers-reduced-motion: reduce) {
  .sh-btn--primary:hover, .sh-btn--primary:active, .sh-header__cta:hover, .sh-header__cta:active,
  .sh-card a:hover, .sh-benefit:hover, .sh-modlinks a:hover, .sh-trust__item:hover .sh-trust__icon { transform: none; }
}