/* ==========================================================================
   Hip Campers 2027 - main stylesheet
   Tokens come from theme.json (--wp--preset--*). Short aliases below.
   Sections: 1 Base, 2 Header and navigation, 3 Footer placeholder
   ========================================================================== */

/* 1. Base ----------------------------------------------------------------- */
:root {
  --hdr: 76px;
  --ink-900: var(--wp--preset--color--ink-900);
  --ink-800: var(--wp--preset--color--ink-800);
  --ink-200: var(--wp--preset--color--ink-200);
  --ink-100: var(--wp--preset--color--ink-100);
  --ember-700: var(--wp--preset--color--ember-700);
  --ember-600: var(--wp--preset--color--ember-600);
  --ember-050: var(--wp--preset--color--ember-050);
  --shadow-lg: var(--wp--preset--shadow--lg);
}
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Pages that do not start with a full-bleed hero need room for the fixed header. */
.hip-main--offset { padding-top: calc(var(--hdr) + 32px); padding-bottom: 64px; }

/* 2. Header and navigation ------------------------------------------------ */
header.hip-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(74, 73, 69, 0.10);
  margin: 0;
}
.admin-bar header.hip-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 782px) { .admin-bar header.hip-header { top: var(--wp-admin--admin-bar--height, 46px); } }

.hip-header__inner {
  max-width: 1240px; width: 100%; margin: 0 auto; padding: 14px 24px;
  gap: 20px; box-sizing: border-box;
}
.hip-header .wp-block-site-logo { flex: none; line-height: 0; }
.hip-header .wp-block-site-logo img { display: block; width: 140px; height: auto; }

/* Links */
.hip-nav { font-size: 14.5px; font-weight: 600; gap: 6px; position: static; }
.hip-nav .wp-block-navigation__container { gap: 6px; align-items: center; }
.hip-nav .wp-block-navigation-item__content {
  padding: 8px 12px; border-radius: 8px; color: var(--ink-800);
  transition: color 120ms var(--ease-standard, ease);
}
.hip-nav .wp-block-navigation-item__content:hover,
.hip-nav .current-menu-item > .wp-block-navigation-item__content,
.hip-nav .wp-block-navigation-item__content[aria-current="page"] { color: var(--ember-600); }

/* Call-to-action pill (last link) */
.hip-nav .hip-nav-cta > .wp-block-navigation-item__content {
  font-size: 14px; font-weight: 600; color: #fff; background: var(--ember-600);
  border-radius: 999px; padding: 10px 20px; margin-left: 4px;
  transition: background-color 120ms var(--ease-standard, ease);
}
.hip-nav .hip-nav-cta > .wp-block-navigation-item__content:hover,
.hip-nav .hip-nav-cta > .wp-block-navigation-item__content:focus-visible { color: #fff; background: var(--ember-700); }

/* Hamburger button */
.hip-nav .wp-block-navigation__responsive-container-open,
.hip-nav .wp-block-navigation__responsive-container-close {
  width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--ink-900);
}

/* Move the hamburger breakpoint from core's 600px to the design's 768px. */
@media (min-width: 600px) and (max-width: 768px) {
  .hip-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .hip-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* Mobile: full-screen menu (reference: Audi). It covers the header, "Close menu" sits top left (label comes from the button's own
   translated aria-label), items are left-aligned, the language list is one row at the bottom of the list. */
@media (max-width: 768px) {
  .hip-nav .wp-block-navigation__responsive-container.is-menu-open {
    position: absolute; top: 0; left: 0; right: 0; bottom: auto;
    height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
    height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
    overflow-y: auto; padding: 0; border: 0; box-shadow: none;
    background: var(--ink-900, #4A4945) !important; color: #fff !important;
  }
  .hip-nav .is-menu-open .wp-block-navigation__responsive-dialog { display: flex; flex-direction: column; min-height: 100%; }
  .hip-nav .is-menu-open .wp-block-navigation__responsive-container-close {
    position: static !important; display: flex; align-items: center; justify-content: flex-start; gap: 14px;
    width: 100%; height: auto; min-height: 64px; padding: 0 24px; box-sizing: border-box;
    color: #fff; background: none; border: 0; font: 600 16px/1 var(--font-sans, inherit); cursor: pointer;
  }
  .hip-nav .is-menu-open .wp-block-navigation__responsive-container-close::after { content: attr(aria-label); }
  .hip-nav .is-menu-open .wp-block-navigation__responsive-container-close svg { width: 24px; height: 24px; flex: none; }
  .hip-nav .is-menu-open .wp-block-navigation__responsive-container-close:focus-visible { outline: 2px solid #C9A45A; outline-offset: -4px; }
  .hip-nav .is-menu-open .wp-block-navigation__responsive-container-content {
    padding: 8px 24px 40px !important; align-items: flex-start !important; justify-content: flex-start !important; flex: 1 1 auto; width: 100%; box-sizing: border-box;
  }
  .hip-nav .is-menu-open .wp-block-navigation__container {
    flex-direction: column; align-items: flex-start !important; justify-content: flex-start; gap: 0; width: 100%;
  }
  .hip-nav .is-menu-open .wp-block-navigation-item { width: 100%; align-items: flex-start; }
  .hip-nav .is-menu-open .wp-block-navigation-item__content {
    display: block; width: 100%; box-sizing: border-box; padding: 16px 0; border-radius: 0; text-align: left;
    font-size: 22px; font-weight: 600; line-height: 1.25; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }
  .hip-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content,
  .hip-nav .is-menu-open .wp-block-navigation-item__content[aria-current="page"] { color: #C9A45A; }
  /* Call-to-action pill stays a pill, left-aligned */
  .hip-nav .is-menu-open .hip-nav-cta { width: auto; margin-top: 28px; }
  .hip-nav .is-menu-open .hip-nav-cta > .wp-block-navigation-item__content {
    display: inline-flex; align-items: center; width: auto; min-height: 52px; margin: 0; padding: 14px 28px;
    border: 0; border-radius: 999px; font-size: 16px; color: #fff; background: var(--ember-600);
  }
  /* Language list: always open, one row (English, Deutsch, Български), current one underlined */
  .hip-nav .is-menu-open .hip-lang { display: block; width: 100%; margin-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.28); }
  .hip-nav .is-menu-open .hip-lang > .wp-block-navigation-item__content,
  .hip-nav .is-menu-open .hip-lang > .wp-block-navigation__submenu-icon { display: none !important; }
  .hip-nav .is-menu-open .hip-lang .wp-block-navigation__submenu-container {
    position: static !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 0 20px;
    width: 100% !important; min-width: 0 !important; height: auto !important; padding: 8px 0 0 !important; margin: 0 !important;
    visibility: visible !important; opacity: 1 !important; overflow: visible; background: none !important; border: 0 !important; box-shadow: none !important; color: #fff;
  }
  .hip-nav .is-menu-open .hip-lang .wp-block-navigation-item { width: auto; }
  .hip-nav .is-menu-open .hip-lang .wp-block-navigation-item__content {
    display: inline-flex; align-items: center; width: auto; min-height: 48px; padding: 8px 0 !important; border: 0; font-size: 17px; font-weight: 600;
  }
  .hip-nav .is-menu-open .hip-lang-item.is-current > .wp-block-navigation-item__content {
    color: #C9A45A; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px;
  }
}

/* 3. Footer ---------------------------------------------------------------- */
footer.wp-block-template-part { margin-block-start: 0; }
.hip-footer { padding: 0; overflow: hidden; font-family: var(--font-sans, inherit); }
.hip-footer :where(.wp-block-group, p, h3, figure) { margin: 0; }
.hip-footer a { color: inherit; text-decoration: none; }

/* Top area: brand block on the left, four link columns (Appearance > Menus, "Footer column" locations) on the right. */
.hip-footer .hip-footer__main {
  box-sizing: border-box; width: 100%; max-width: 1240px; margin-inline: auto;
  padding: clamp(56px, 7vw, 88px) 24px clamp(40px, 5vw, 56px);
  display: flex; flex-wrap: wrap; gap: clamp(36px, 4vw, 56px);
}
.hip-footer .hip-footer__brand { flex: 1 1 260px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hip-footer .hip-footer__logo img { display: block; width: 170px; height: auto; }
.hip-footer .hip-footer__tagline { max-width: 30ch; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); text-wrap: pretty; }
.hip-footer .hip-footer__cols { flex: 3 1 560px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 36px 32px; }
.hip-footer .hip-footer__col { display: flex; flex-direction: column; align-items: flex-start; }
.hip-footer .hip-footer__title { margin: 0 0 18px; font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: #fff; }

/* Link lists (core Navigation blocks, vertical) */
.hip-footer .hip-footer__nav .wp-block-navigation__container { flex-direction: column; align-items: flex-start; gap: 2px; padding: 0; }
.hip-footer .hip-footer__nav .wp-block-navigation-item { width: auto; }
.hip-footer .hip-footer__nav .wp-block-navigation-item__content {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0;
  font-size: 15px; font-weight: 400; line-height: 1.4; color: rgba(255, 255, 255, 0.86);
  transition: color 120ms ease;
}
.hip-footer .hip-footer__nav .wp-block-navigation-item__content:hover,
.hip-footer .hip-footer__nav .wp-block-navigation-item__content:focus-visible { color: #C9A45A; }
.hip-footer a:focus-visible { outline: 2px solid #C9A45A; outline-offset: 3px; border-radius: 4px; }

/* Bottom bar: copyright, social icons, "Like No Other" mark */
.hip-footer .hip-footer__bar { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.hip-footer .hip-footer__top {
  box-sizing: border-box; width: 100%; max-width: 1240px; margin-inline: auto; padding: 24px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.hip-footer .hip-footer__copyright { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }
.hip-footer .hip-footer__social { display: flex; gap: 10px; margin: 0; padding: 0; }
.hip-footer__social .wp-social-link { margin: 0; }
.hip-footer__social .wp-social-link a {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px;
  transition: border-color 120ms ease, color 120ms ease;
}
.hip-footer__social .wp-social-link svg { width: 18px; height: 18px; }
.hip-footer__social .wp-social-link a:hover,
.hip-footer__social .wp-social-link a:focus-visible { color: #C9A45A; border-color: #C9A45A; }
.hip-footer .hip-footer__mark img { display: block; height: 44px; width: auto; }

@media (max-width: 600px) {
  .hip-footer .hip-footer__nav .wp-block-navigation-item__content { min-height: 44px; }
  .hip-footer .hip-footer__top { flex-direction: column; justify-content: center; text-align: center; gap: 16px; }
  .hip-footer .hip-footer__social { justify-content: center; }
}

/* 4. Hero banner ----------------------------------------------------------- */
/* Landing template: no page title, no header offset, sections run edge to edge. */
.hip-main--landing { margin-block-start: 0; padding: 0; }
.hip-main--landing .wp-block-post-content > * { margin-block: 0; }

.hip-hero { position: relative; overflow: hidden; margin: 0; padding: 0; background: #EDEFF1; }
.hip-hero > * { margin-block: 0; }
.hip-hero .hip-hero__img { margin: 0; }
.hip-hero .hip-hero__img img { display: block; width: 100%; height: auto; }
.hip-hero .hip-hero__img--mobile { display: none; }
@media (max-width: 768px) {
  .hip-hero .hip-hero__img--desktop { display: none; }
  .hip-hero .hip-hero__img--mobile { display: block; }
}

/* Text sits on the picture: top right on desktop, centered (title top, subline bottom) on mobile. */
.hip-hero .hip-hero__copy {
  position: absolute; top: 0; right: 0; box-sizing: content-box;
  width: min(42vw, 560px);
  padding: calc(clamp(24px, 4vw, 64px) + clamp(60px, 7vw, 96px)) calc(clamp(24px, 4vw, 64px) + 8px) 0 24px;
  display: flex; flex-direction: column; align-items: flex-end; text-align: right;
}
.hip-hero .hip-hero__copy > * { margin: 0; }
.hip-hero .hip-hero__title {
  max-width: 15ch; font-size: clamp(30px, 7vw, 48px); font-weight: 700; line-height: 1.06;
  color: var(--ink-900); text-wrap: balance;
}
.hip-hero .hip-hero__subline {
  margin-top: 14px; max-width: 44ch; font-size: clamp(15px, 3.8vw, 18px); font-weight: 400; line-height: 1.55;
  color: var(--ink-900);
}
/* Small tablets: the picture is short here, so tighten the text block to keep it inside the image. */
@media (min-width: 769px) and (max-width: 1100px) {
  .hip-hero .hip-hero__copy {
    width: 50vw;
    padding-top: calc(var(--hdr, 76px) + 20px);
  }
  .hip-hero .hip-hero__title { font-size: clamp(30px, 5.2vw, 48px); }
  .hip-hero .hip-hero__subline { font-size: 15px; }
}
@media (max-width: 768px) {
  .hip-hero .hip-hero__copy {
    top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; width: auto;
    padding: 26px 18px; align-items: center; justify-content: space-between; text-align: center;
  }
  .hip-hero .hip-hero__title { padding-top: 64px; }
  .hip-hero .hip-hero__subline {
    box-sizing: border-box; width: fit-content; max-width: 100%; margin-top: 0; padding: 14px 22px;
    font-size: 16px; font-weight: 600;
    background: rgba(255, 255, 255, 0.8); border-radius: 14px;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
}

/* 5. Overview ("The only one in its class") + testimonials ------------------ */
.hip-eyebrow {
  margin: 0 0 16px; font-size: 13px; font-weight: 700; line-height: 1.2;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember-600);
}
.hip-section-title {
  margin: 0 0 22px; font-size: clamp(28px, 4vw, 44px); font-weight: 700; line-height: 1.12;
  color: var(--ink-900); text-wrap: balance;
}
.hip-overview { margin: 0; padding: 96px 24px 40px; text-align: center; background: linear-gradient(180deg, #F5F5F5 0%, #FFFFFF 100%); }
.hip-overview > * { margin-block: 0; }
.hip-overview .hip-overview__intro { max-width: 960px; margin: 0 auto; }
.hip-overview .hip-overview__lead {
  margin: 0; font-size: 19px; line-height: 1.7; color: var(--wp--preset--color--ink-700); text-wrap: pretty;
}
.hip-overview .hip-testimonials { max-width: 1240px; margin: 60px auto 0; text-align: left; }
.hip-testimonials .wp-block-post-template {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px;
  list-style: none; margin: 0; padding: 0;
}
.hip-testimonials .wp-block-post-template > li { margin: 0; }
.hip-testimonials .hip-testimonial {
  box-sizing: border-box; height: 100%; display: flex; flex-direction: column;
  background: #E5E5E5; border-radius: 14px; padding: 28px;
}
.hip-testimonial > * { margin-block: 0; }
.hip-testimonial blockquote { margin: 0; padding: 0; border: 0; }
.hip-testimonial .quote-text {
  margin: 0 0 16px; font-size: 17px; line-height: 1.55; font-style: italic; color: var(--ink-900);
}
.hip-testimonial .quote-text::before { content: "\201C"; }
.hip-testimonial .quote-text::after { content: "\201D"; }
.hip-testimonial .quote-source { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--ember-600); }
.hip-testimonial .quote-source a { color: inherit; text-decoration: none; }
.hip-testimonial .quote-source a:hover, .hip-testimonial .quote-source a:focus-visible { text-decoration: underline; }
.hip-testimonial .quote-image { margin: auto 0 0; padding-top: 20px; }
.hip-testimonial .quote-image img { display: block; width: auto; height: auto; max-width: 120px; max-height: 40px; object-fit: contain; object-position: left center; }

/* 6. Exterior layer + reusable card row ("hip27-cards") ----------------------- */
.hip-exterior { margin: 0; padding: 88px 0; background: #FFFFFF; }
.hip-exterior > * { margin-block: 0; }
.hip-exterior .hip-exterior__intro { max-width: 820px; margin: 0 auto; padding: 0 24px; text-align: center; box-sizing: border-box; }
.hip-exterior .hip-exterior__intro .hip-eyebrow { margin-bottom: 14px; }
.hip-exterior .hip-exterior__intro .hip-section-title { margin: 0; font-size: clamp(28px, 4vw, 42px); }
.hip-exterior .hip27-cards { padding-top: clamp(48px, 7vw, 96px); }

/* Class names use the hip27 prefix because the HIP Campers Feature Cards plugin ships its own .hip-card rule (aspect-ratio 9/13, overflow hidden) that cut the text off.
   Reusable card row: add class "hip27-cards" to a Group, and class "hip27-card" to each child Group.
   Card = square Image (.hip27-card__image) + text group (.hip27-card__body: title, text).
   Desktop: all cards visible in equal columns. Tablet and mobile (max 900px): one swipeable row, cards stretch to the tallest. */
.hip27-cards {
  box-sizing: border-box; max-width: 1160px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch;
}
.hip27-card { margin: 0; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--hip27-card-bg, var(--ink-100)); }
.hip27-card > * { margin-block: 0; }
.hip27-card .hip27-card__image { margin: 0; aspect-ratio: 1 / 1; width: 100%; background: var(--ink-200); }
.hip27-card .hip27-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hip27-card .hip27-card__image img:not([src]) { display: none; }
.hip27-card .hip27-card__body { flex: 1 1 auto; padding: 24px 24px 28px; }
.hip27-card .hip27-card__body > * { margin-block: 0; }
.hip27-card .hip27-card__title { margin: 0 0 12px; font-size: 22px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink-900); text-wrap: balance; }
.hip27-card .hip27-card__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-800); }
@media (max-width: 900px) {
  .hip27-cards {
    display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 14px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .hip27-cards::-webkit-scrollbar { display: none; }
  .hip27-card { flex: 0 0 min(78vw, 340px); scroll-snap-align: center; }
  .hip27-card .hip27-card__body { padding: 20px 20px 24px; }
  .hip27-card .hip27-card__title { font-size: 20px; }
  .hip27-card .hip27-card__text { font-size: 14px; }
}
@media (max-width: 768px) {
  .hip-overview { padding: 72px 18px 32px; }
  .hip-exterior { padding: 64px 0; }
  .hip27-cards { padding-left: 18px; padding-right: 18px; scroll-padding-inline: 18px; }
}

/* 7. Exterior scroll sequence (frame-by-frame, pinned) ------------------------ */
/* Stage is a 16:9 box (never taller than the viewport), pinned and vertically centred while the page scrolls. JS in functions.php picks the visible frame from scroll progress. */
.hip-spin {
  --spin-stage: min(56.25vw, 100svh);
  --spin-len: 2600px;
  position: relative; margin: 0; padding: 0;
  height: calc(var(--spin-stage) + var(--spin-len));
}
.hip-spin__stage {
  position: sticky; top: max(0px, calc((100svh - var(--spin-stage)) / 2));
  height: var(--spin-stage); margin: 0; overflow: hidden; background: #FFFFFF;
}
.hip-spin__stage > * { margin: 0; }
.hip-spin__frame { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.hip-spin__frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Frame 1 shows until JS takes over, and for visitors without JS. */
.hip-spin:not(.is-ready) .hip-spin__frame:first-child,
.hip-spin__frame.is-active { opacity: 1; }
/* Reduced motion: no pinning, just the first frame. */
@media (prefers-reduced-motion: reduce) {
  .hip-spin { height: var(--spin-stage); }
  .hip-spin__stage { position: relative; top: 0; }
}
@media (max-width: 768px) {
  .hip-spin { --spin-len: 1500px; }
}

/* 8. Day & Night (pinned scroll: day layout fades into night layout) ---------- */
/* The section is tall; the inner stage is pinned. JS in functions.php writes --dn-* variables on .hip-daynight from the scroll progress. Pin length = --dn-run (transition) + --dn-hold (rest on the night state). The day text (dark) and the night text (light) sit inside the panel under the picture and hand over to each other, so each text is always read on the background it was made for. */
.hip-daynight {
  --dn-run: 1400px; --dn-hold: 650px; --dn-pad-x: clamp(20px, 4vw, 40px);
  --dn-e: 0; --dn-bg: rgb(232, 234, 229);
  --dn-day-op: 1; --dn-night-op: 0; --dn-day-shift: 0px; --dn-night-shift: 10px;
  margin: 0; padding: 0; background: var(--ink-900);
}
.hip-daynight .wp-block-group > * { margin-block: 0; }
.hip-daynight .hip-dn__pin { position: relative; height: calc(100svh + var(--dn-run) + var(--dn-hold)); }
.hip-daynight .hip-dn__sticky {
  position: sticky; top: 0; box-sizing: border-box; height: 100svh; overflow: hidden;
  padding: calc(var(--hdr, 76px) + clamp(12px, 3svh, 32px)) 32px 28px;
  display: flex; flex-direction: column; justify-content: center;
}
.hip-daynight .hip-dn__inner { max-width: 1160px; width: 100%; margin: 0 auto; }
.hip-daynight .hip-dn__eyebrow {
  margin: 0 0 12px; text-align: center; font-size: 13px; font-weight: 700; line-height: 1.2;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ember-600);
}
.hip-daynight .hip-dn__title {
  margin: 0 0 clamp(8px, 1.6svh, 18px); text-align: center; color: #FFFFFF;
  font-size: clamp(30px, 4vw, 44px); font-weight: 800; line-height: 1.08; text-wrap: balance;
}
.hip-daynight .hip-dn__panel {
  position: relative; border-radius: 22px; overflow: hidden; background-color: var(--dn-bg);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.35);
  padding: clamp(12px, 2.2svh, 26px) var(--dn-pad-x) clamp(14px, 2.6svh, 30px);
}
/* Warm daylight glow fades out, cool night glow fades in. */
.hip-daynight .hip-dn__panel::before, .hip-daynight .hip-dn__panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hip-daynight .hip-dn__panel::before { background: radial-gradient(120% 90% at 50% 8%, rgba(255, 236, 196, 0.9), rgba(255, 236, 196, 0) 60%); opacity: calc(1 - var(--dn-e)); }
.hip-daynight .hip-dn__panel::after { background: radial-gradient(120% 90% at 50% 8%, rgba(120, 150, 220, 0.55), rgba(30, 40, 70, 0) 62%); opacity: var(--dn-e); }
/* Row = picture area. The vertical DAY / NIGHT labels are centred on it, in the panel's side padding. */
.hip-daynight .hip-dn__row { position: relative; z-index: 1; }
.hip-daynight .hip-dn__label {
  position: absolute; z-index: 2; top: 0; bottom: 0; margin: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
  writing-mode: vertical-rl; font-size: 13px; font-weight: 700; letter-spacing: 0.22em; line-height: 1;
}
.hip-daynight .hip-dn__label--day { left: calc(14px - var(--dn-pad-x)); transform: rotate(180deg); color: #B5893F; }
.hip-daynight .hip-dn__label--night { right: calc(14px - var(--dn-pad-x)); color: rgba(110, 120, 150, 0.55); }
.hip-daynight.is-night .hip-dn__label--day { color: rgba(140, 120, 90, 0.5); }
.hip-daynight.is-night .hip-dn__label--night { color: #6F86C9; }
.hip-daynight .hip-dn__stage { position: relative; width: 100%; max-width: 1000px; margin: 0 auto; aspect-ratio: 16 / 9; max-height: max(200px, min(50svh, calc(100svh - 410px))); }
.hip-daynight .hip-dn__stage .wp-block-image { position: absolute; inset: 0; margin: 0; }
.hip-daynight .hip-dn__stage .wp-block-image img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 16px; transform: rotate(180deg); }
.hip-daynight .hip-dn__img--night { opacity: var(--dn-e); }
/* Texts inside the panel, under the picture. */
.hip-daynight .hip-dn__copy { position: relative; z-index: 1; max-width: 760px; margin: clamp(10px, 2svh, 22px) auto 0; min-height: clamp(118px, 20svh, 150px); }
.hip-daynight .hip-dn__copy-item { position: absolute; inset: 0; text-align: center; }
.hip-daynight .hip-dn__copy-item--day { opacity: var(--dn-day-op); transform: translateY(var(--dn-day-shift)); }
.hip-daynight .hip-dn__copy-item--night { opacity: var(--dn-night-op); transform: translateY(var(--dn-night-shift)); pointer-events: none; }
.hip-daynight.is-night .hip-dn__copy-item--day { pointer-events: none; }
.hip-daynight.is-night .hip-dn__copy-item--night { pointer-events: auto; }
.hip-daynight .hip-dn__copy-title { margin: 0 0 14px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; line-height: 1.2; }
.hip-daynight .hip-dn__copy-text { margin: 0; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; text-wrap: pretty; }
/* Wide screens: the texts take 2 lines, so the text area can be shorter. */
@media (min-width: 1001px) {
  .hip-daynight .hip-dn__copy { min-height: clamp(104px, 14svh, 120px); }
}
/* Day text: dark on the light panel. Night text: light on the dark panel. */
.hip-daynight .hip-dn__copy-item--day .hip-dn__copy-title { color: var(--ink-900); }
.hip-daynight .hip-dn__copy-item--day .hip-dn__copy-text { color: var(--ink-900); }
.hip-daynight .hip-dn__copy-item--night .hip-dn__copy-title { color: #FFFFFF; }
.hip-daynight .hip-dn__copy-item--night .hip-dn__copy-text { color: rgba(255, 255, 255, 0.78); }
@media (max-width: 768px) {
  /* Wider side padding so the vertical DAY / NIGHT labels do not overlap the picture. */
  .hip-daynight { --dn-pad-x: 38px; }
  /* Under the picture there is no label, so the text may use the side padding too. */
  .hip-daynight .hip-dn__copy { margin-left: calc(12px - var(--dn-pad-x)); margin-right: calc(12px - var(--dn-pad-x)); min-height: clamp(160px, 44vw, 190px); }
  .hip-daynight .hip-dn__sticky { padding-left: 16px; padding-right: 16px; }
}

/* 9. Feature sections built from the card row (Welcome Inside, Kitchen, Bathroom, Storage) ---------- */
/* Reusable: Group.hip-section (optional modifier hip-section--cream or hip-section--grey) > Group.hip-section__intro (eyebrow, H2) + Group.hip27-cards. */
.hip-section { margin: 0; padding: 88px 0; background: #FFFFFF; }
.hip-section > * { margin-block: 0; }
.hip-section .hip-section__intro { box-sizing: border-box; max-width: 820px; margin: 0 auto 56px; padding: 0 24px; text-align: center; }
.hip-section .hip-section__intro .hip-eyebrow { margin-bottom: 14px; }
.hip-section .hip-section__intro .hip-section-title { margin: 0; font-size: clamp(28px, 4vw, 42px); }
.hip-section--cream { background: var(--ember-050); }
.hip-section--grey { background: var(--ink-100); }
.hip-section--cream, .hip-section--grey { --hip27-card-bg: #FFFFFF; }
@media (max-width: 768px) {
  .hip-section { padding: 64px 0; }
  .hip-section .hip-section__intro { margin-bottom: 40px; padding: 0 18px; }
}

/* 10. Every Season (two picture cards with text over a dark gradient) ------------------------------- */
/* Group.hip-section > intro + Group.hip-seasons > Group.hip-season x2 > [Image.hip-season__image, Group.hip-season__body > H3 + P]. */
.hip-seasons { box-sizing: border-box; max-width: 1160px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 28px; }
.hip-seasons > * { margin-block: 0; }
.hip-season { position: relative; display: flex; align-items: flex-end; min-height: 420px; border-radius: 16px; overflow: hidden; background: var(--ink-900); }
.hip-season > * { margin-block: 0; }
.hip-season .hip-season__image { position: absolute; inset: 0; margin: 0; }
.hip-season .hip-season__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.hip-season::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,29,27,0) 30%, rgba(30,29,27,.9) 100%); pointer-events: none; }
.hip-season .hip-season__body { position: relative; z-index: 1; padding: 32px; }
.hip-season .hip-season__title { margin: 0 0 12px; font-size: 26px; font-weight: 700; line-height: 1.2; color: #FFFFFF; }
.hip-season .hip-season__text { margin: 0; font-size: 15.5px; font-weight: 400; line-height: 1.6; color: rgba(255,255,255,.9); }
@media (max-width: 768px) {
  .hip-seasons { padding: 0 18px; gap: 20px; }
  .hip-season { min-height: 460px; }
  .hip-season .hip-season__body { padding: 24px; }
  .hip-season .hip-season__title { font-size: 23px; }
}

/* 11. Brevo forms (all current and future Brevo embeds, any language) ------------------------------------ */
/* Scope: the .sib-form wrapper that Brevo's generated HTML always carries. No wrapper class is needed; the
   embed only has to sit in a Custom HTML block. Brevo's own stylesheet (sib-styles.css) loads separately and
   its markup carries inline styles (Helvetica, #EFF2F7, #3c4858 ...), so the overrides below use
   body .sib-form (higher specificity) and !important only where an inline style has to be beaten.
   Never set display on .entry__error, .sib-form-message-panel or .sib-menu: Brevo's script toggles them.
   Optional layout: put the embed inside a Group with the class hip-brevo--cols for a two column form on
   screens wider than 640px (short fields pair up, long ones stay full width). Default is one column.
   Text is never uppercased, truncated or fixed in width, so long German and Bulgarian strings wrap. */
body .sib-form {
  --hb-ink: var(--ink-900, #4A4945);
  --hb-ink-soft: #6F6E68;
  --hb-line: #DBDAD2;
  --hb-accent: var(--ember-600, #B08A3E);
  --hb-accent-dark: var(--ember-700, #8C6B29);
  --hb-accent-bg: var(--ember-050, #F8F3E8);
  --hb-error: #B3261E;
  --hb-error-bg: #FDECEA;
  --hb-ok: #1F6B3F;
  --hb-ok-bg: #E9F6EE;
  box-sizing: border-box; margin: 0 auto; padding: 0 !important; max-width: 820px;
  background: transparent !important; text-align: left !important;
  font-family: var(--wp--preset--font-family--montserrat, Montserrat, sans-serif); font-size: 15px; line-height: 1.5; color: var(--hb-ink);
}
body .sib-form *, body .sib-form *::before, body .sib-form *::after { box-sizing: border-box; }
body .sib-form .sib-form-container { width: 100%; }

/* Card */
body .sib-form #sib-container, body .sib-form .sib-container--large, body .sib-form .sib-container--medium, body .sib-form .sib-container--small {
  display: block; width: 100%; max-width: 820px !important; margin: 0 auto;
  padding: clamp(24px, 4vw, 44px) !important;
  background: #FFFFFF !important; border: 1px solid #EAE9E4 !important; border-radius: 18px !important;
  box-shadow: 0 14px 36px rgba(74, 73, 69, .08); text-align: left !important; direction: ltr;
}
html[dir="rtl"] body .sib-form #sib-container { direction: rtl; }

/* Fields: stack, one column. Brevo wraps every field in an unclassed div with inline padding. */
body .sib-form form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 0; }
body .sib-form form > div { margin: 0; padding: 0 !important; min-width: 0; }
body .sib-form form > div:has(> .g-recaptcha-v3) { display: none; }
body .sib-form .sib-form-block { padding: 0 !important; text-align: left !important; }
body .sib-form .form__entry, body .sib-form .form__entry:not(:first-child) { margin: 0; padding: 0; }
body .sib-form .form__label-row { display: flex; flex-direction: column; gap: 6px; margin: 0; }

/* Labels, hints, required star */
body .sib-form .entry__label {
  display: block; width: auto; max-width: none; margin: 0 !important; padding: 0;
  font: 600 13px/1.4 var(--wp--preset--font-family--montserrat, Montserrat, sans-serif) !important;
  color: var(--hb-ink) !important; text-align: left !important; text-transform: none; overflow-wrap: anywhere; hyphens: auto;
}
body .sib-form .entry__label::after { color: var(--hb-accent-dark); font-weight: 700; margin-left: 2px; }
body .sib-form .entry__specification {
  display: block; max-width: none; margin: 8px 0 0 !important;
  font: 400 13px/1.5 var(--wp--preset--font-family--montserrat, Montserrat, sans-serif) !important;
  color: var(--hb-ink-soft) !important; text-align: left !important;
}

/* Inputs, selects, textarea: the bordered box is .entry__field, the control inside is borderless. */
body .sib-form .entry__field {
  display: flex; width: 100%; max-width: 100%; margin: 0; background: #FFFFFF;
  border: 1.5px solid var(--hb-line); border-radius: 8px; overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
body .sib-form .entry__field:hover { border-color: #A5A399; }
body .sib-form .entry__field:focus-within { border-color: var(--hb-accent); box-shadow: 0 0 0 3px rgba(176, 138, 62, .22); }
body .sib-form .entry__field .input, body .sib-form .entry__field .input:first-child, body .sib-form .entry__field .input:last-child {
  display: block; flex: 1 1 auto; width: 100%; min-width: 0; height: 48px; margin: 0; padding: 0 14px;
  font: 400 15px/1.4 var(--wp--preset--font-family--montserrat, Montserrat, sans-serif); color: var(--hb-ink);
  background-color: transparent; border: 0; border-radius: 0; box-shadow: none; outline: 0;
}
body .sib-form .entry__field textarea.input { height: auto; min-height: 112px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
body .sib-form .entry__field select.input {
  padding-right: 40px; text-overflow: ellipsis; cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%234A4945' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px;
}
body .sib-form .entry__field select.input:invalid, body .sib-form .entry__field select.input option[value=""] { color: #87857D; }
body .sib-form .entry__field select.input option { color: var(--hb-ink); }
body .sib-form .input::placeholder { color: #87857D !important; opacity: 1; font-family: inherit !important; font-size: inherit; }
/* Brevo's own rule sets content-box on inputs; keep border-box so padding never causes overflow */
body .sib-form .entry__field .input, body .sib-form .input--multiselect { box-sizing: border-box; }
body .sib-form .input__rtl, body .sib-form .input__textareaRtl { text-align: right; }

/* Phone: country code select + number, side by side, wrapping text-safe */
body .sib-form .sib-sms-input-wrapper { display: flex; align-items: center; gap: 10px; width: 100%; }
body .sib-form .sib-sms-input { display: flex; flex: 1 1 auto; align-items: stretch; gap: 10px; width: auto; min-width: 0; }
body .sib-form .sib-sms-input > .entry__field { margin: 0; }
body .sib-form .sib-sms-input > .entry__field:first-child { flex: 0 0 auto; width: clamp(112px, 34%, 150px); }
body .sib-form .sib-sms-input > .entry__field:last-child { flex: 1 1 auto; min-width: 0; }
body .sib-form .sib-sms-tooltip { position: relative; flex: 0 0 auto; margin: 0; }
body .sib-form .sib-sms-tooltip__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border-radius: 50%;
  font: 700 14px/1 var(--wp--preset--font-family--montserrat, Montserrat, sans-serif); color: var(--hb-ink-soft); background: #F5F5F5; border: 1px solid var(--hb-line); cursor: help;
}
body .sib-form .sib-sms-tooltip__box {
  right: 0; left: auto; bottom: calc(100% + 8px); width: min(280px, 78vw); padding: 10px 12px; border-radius: 8px;
  font: 400 12px/1.5 var(--wp--preset--font-family--montserrat, Montserrat, sans-serif); color: #FFFFFF; background: var(--hb-ink); box-shadow: 0 4px 16px rgba(74, 73, 69, .25); z-index: 5;
}
body .sib-form .sib-sms-tooltip:focus-within .sib-sms-tooltip__box { display: block; }

/* Phone field after Brevo's script has run: the select above is replaced by a flag button + calling code + number.
   (The label's for="SMS" then points at nothing: Brevo drops the id. See the notes for the optional fix.) */
body .sib-form .sib-sms-select { display: flex; align-items: stretch; gap: 10px; flex: 1 1 auto; width: 100%; min-width: 0; margin: 0; font-size: 15px; font-family: inherit; }
body .sib-form .sib-sms-select__title { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-start; width: 76px; max-width: 76px; height: 48px; margin: 0; padding: 0 22px 0 12px; background: #FFFFFF; border: 1.5px solid var(--hb-line); border-radius: 8px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
body .sib-form .sib-sms-select__title:hover { border-color: #A5A399; }
body .sib-form .sib-sms-select__title:focus-visible, body .sib-form .sib-sms-select__title:focus-within { border-color: var(--hb-accent); box-shadow: 0 0 0 3px rgba(176, 138, 62, .22); outline: 0; }
body .sib-form .sib-sms-select__title::after { right: 10px; border-top-color: var(--hb-ink); }
body .sib-form .sib-sms-select__title > .sib-flag { float: none; margin: 0; bottom: 0; flex: 0 0 auto; }
body .sib-form .sib-sms-select__title > .sib-sms-select__label-text { display: none; }
body .sib-form .sib-sms-select__number-input { display: flex; flex: 1 1 auto; align-items: stretch; width: auto; min-width: 0; height: 48px; background: #FFFFFF; border: 1.5px solid var(--hb-line); border-radius: 8px; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
body .sib-form .sib-sms-select__number-input:hover { border-color: #A5A399; }
body .sib-form .sib-sms-select__number-input:focus-within { border-color: var(--hb-accent); box-shadow: 0 0 0 3px rgba(176, 138, 62, .22); }
body .sib-form .sib-sms-select__calling-code { flex: 0 0 auto; width: 76px; max-width: none; height: 100%; padding: 0 8px; font: 500 15px/1.4 var(--wp--preset--font-family--montserrat, Montserrat, sans-serif); color: var(--hb-ink-soft); text-align: center; background: #F5F5F5; border: 0; border-right: 1.5px solid var(--hb-line); border-radius: 0; }
body .sib-form .sib-sms-select__phone-number { flex: 1 1 auto; width: auto; min-width: 0; height: 100%; padding: 0 14px; font: 400 15px/1.4 var(--wp--preset--font-family--montserrat, Montserrat, sans-serif); color: var(--hb-ink); background: transparent; border: 0; border-radius: 0; outline: 0; }
/* Brevo appends the country list to <body>, OUTSIDE .sib-form, so these rules must not be scoped to it. */
body .sib-sms-select__list { z-index: 9999; margin-top: 6px; background: #FFFFFF; border: 1.5px solid #DBDAD2; border-radius: 12px; box-shadow: 0 14px 36px rgba(74, 73, 69, .16); font-family: var(--wp--preset--font-family--montserrat, Montserrat, sans-serif); }
body .sib-sms-select__list.sib-is-open { max-height: min(280px, 50vh); overflow-x: hidden; overflow-y: auto; }
body .sib-sms-select__list li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #EAE9E4; font: 400 14px/1.4 var(--wp--preset--font-family--montserrat, Montserrat, sans-serif); color: #4A4945; cursor: pointer; }
body .sib-sms-select__list li:last-child { border-bottom: 0; }
body .sib-sms-select__list li:hover, body .sib-sms-select__list li.sib-is-selected { background: #F8F3E8; }
body .sib-sms-select__list .sib-sms-select__label-text { margin: 0; white-space: normal; overflow: visible; }
body .sib-sms-select__list .sib-flag { flex: 0 0 auto; margin: 0; float: none; bottom: 0; }

/* Multi-select (checkbox dropdown). Brevo shows/hides .sib-menu with inline display. */
body .sib-form .sib-multiselect { position: relative; }
body .sib-form .entry__field .input.input--multiselect {
  position: relative; display: flex; align-items: center; width: 100%; height: 48px; margin: 0; padding: 0 40px 0 14px; box-sizing: border-box; line-height: 1.4;
  font: 400 15px/1.4 var(--wp--preset--font-family--montserrat, Montserrat, sans-serif); color: var(--hb-ink);
  background: #FFFFFF; border: 1.5px solid var(--hb-line); border-radius: 8px; cursor: pointer; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
body .sib-form .input--multiselect::before { right: 14px; border-width: 5px; border-top-color: var(--hb-ink); }
body .sib-form .sib-multiselect .entry__field { display: block; border: 0; background: transparent; overflow: visible; }
body .sib-form .sib-multiselect .entry__field:focus-within { box-shadow: none; }
body .sib-form .sib-menu {
  left: 0; right: 0; top: auto; width: 100%; max-width: 100%; margin-top: 6px; padding: 8px 0 4px; z-index: 20;
  background: #FFFFFF; border: 1.5px solid var(--hb-line); border-radius: 12px; box-shadow: 0 14px 36px rgba(74, 73, 69, .16) !important; text-align: left !important;
}
body .sib-form .sib-menu__select { padding: 4px 16px !important; font-size: 13px; }
body .sib-form .sib-menu__item-list { margin: 0; padding: 4px 0; max-height: min(320px, 50vh); }
body .sib-form .sib-menu__item { padding: 0; line-height: 1.45; }
body .sib-form .sib-menu__item:hover { background: var(--hb-accent-bg); }
body .sib-form .sib-menu .entry__choice { white-space: normal; overflow: visible; text-overflow: clip; text-indent: 0 !important; margin: 0; padding: 0; }
/* #sib-form .entry__choice label{display:unset} in Brevo's sheet has ID specificity, hence !important */
body .sib-form .sib-menu .sib-multiselect__label, body .sib-form .sib-menu .entry__choice label { display: flex !important; align-items: flex-start; gap: 12px; width: 100%; padding: 10px 16px; cursor: pointer; font-family: inherit !important; font-size: 14px; color: var(--hb-ink); }
body .sib-form .sib-menu .entry__choice { font-family: inherit !important; }
body .sib-form .sib-menu .input_replaced { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
body .sib-form .sib-multiselect__label-text { text-indent: 0; overflow-wrap: anywhere; }
body .sib-form .sib-menu__apply { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 8px 12px 12px; border-top: 1px solid #EAE9E4; }

/* Checkbox look (also used by Brevo opt-in and consent blocks) */
body .sib-form .checkbox { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; background: #FFFFFF; border: 1.5px solid #A5A399; border-radius: 5px; vertical-align: middle; }
body .sib-form .radio-button { flex: 0 0 auto; width: 20px; height: 20px; border: 1.5px solid #A5A399; }
body .sib-form .input_replaced:checked + .checkbox_tick_positive { background: var(--hb-accent); border-color: var(--hb-accent); }
body .sib-form .input_replaced:checked + .radio-button { border-color: var(--hb-accent); }
body .sib-form .input_replaced:checked + .radio-button::before { background: var(--hb-accent); }
body .sib-form .input_replaced:focus-visible + .checkbox, body .sib-form .input_replaced:focus-visible + .radio-button { box-shadow: 0 0 0 3px rgba(176, 138, 62, .35); }
body .sib-form .entry__choice { padding-left: 0; text-indent: 0; }

/* Small text buttons (Select all / Clear / Cancel) and the Apply button */
body .sib-form .clickable_link {
  padding: 8px 6px; font: 600 13px/1.2 var(--wp--preset--font-family--montserrat, Montserrat, sans-serif); color: var(--hb-accent-dark); background: none; border: 0; text-decoration: none; cursor: pointer;
}
body .sib-form .clickable_link:hover, body .sib-form .clickable_link:focus-visible { color: var(--hb-ink); text-decoration: underline; }
body .sib-form .clickable_button {
  padding: 10px 20px; font: 600 14px/1.2 var(--wp--preset--font-family--montserrat, Montserrat, sans-serif); color: #FFFFFF;
  background: var(--hb-accent); border: 0; border-radius: 8px; cursor: pointer;
}
body .sib-form .clickable_button:hover:not([disabled]), body .sib-form .clickable_button:focus:not([disabled]) { background: var(--hb-accent-dark); }

/* Submit button */
body .sib-form .sib-form-block__button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: auto; max-width: 100%; min-height: 52px; padding: 15px 32px;
  font: 600 16px/1.3 var(--wp--preset--font-family--montserrat, Montserrat, sans-serif) !important; text-align: center !important; color: #FFFFFF !important;
  background: var(--hb-accent) !important; border: 0 !important; border-radius: 10px !important; cursor: pointer; transition: background-color .15s;
}
body .sib-form .sib-form-block__button:hover:not([disabled]) { background: var(--hb-accent-dark) !important; }
body .sib-form .sib-form-block__button:focus-visible { outline: 3px solid rgba(176, 138, 62, .45); outline-offset: 2px; }
body .sib-form .sib-form-block__button-disabled, body .sib-form .sib-form-block__button[disabled] { opacity: .6; cursor: not-allowed; }
body .sib-form .sib-form-block__button .clickable__icon { width: 20px; height: 20px; margin: 0; fill: #FFFFFF; }
body .sib-form .progress-indicator { background: transparent; width: auto; height: auto; }
body .sib-form .progress-indicator .progress-indicator__icon { width: 20px; height: 20px; fill: #FFFFFF; }
@media (max-width: 520px) { body .sib-form .sib-form-block__button { width: 100%; } }

/* Privacy declaration (shield icon + text) */
body .sib-form .sib-form__declaration { display: flex; align-items: center; gap: 14px; padding: 0 !important; direction: ltr; }
body .sib-form .sib-form__declaration .declaration-block-icon { flex: 0 0 auto; padding: 0; }
body .sib-form .sib-form__declaration .declaration-block-icon .svgIcon-sphere { width: 40px !important; height: 40px !important; }
body .sib-form .sib-form__declaration .declaration-block-icon path { fill: var(--hb-accent); }
body .sib-form .sib-form__declaration > div:last-child { font: 400 13px/1.5 var(--wp--preset--font-family--montserrat, Montserrat, sans-serif) !important; color: var(--hb-ink-soft) !important; text-align: left !important; }
body .sib-form .sib-form__declaration p { margin: 0; }
body .sib-form .sib-form__declaration strong { font-weight: 500; }
body .sib-form .sib-form-container a, body #sib-container a { color: var(--hb-accent-dark) !important; text-decoration: underline; text-underline-offset: 2px; }
body .sib-form .sib-form-container a:hover { color: var(--hb-ink) !important; }

/* Validation: Brevo sets inline display:block on .entry__error and adds .sib-entry_errored to the field */
body .sib-form .entry__error {
  max-width: none; margin: 8px 0 0 !important; padding: 8px 12px; border: 0 !important; border-left: 3px solid var(--hb-error) !important; border-radius: 6px !important;
  font: 500 13px/1.45 var(--wp--preset--font-family--montserrat, Montserrat, sans-serif) !important; color: var(--hb-error) !important; background: var(--hb-error-bg) !important; text-align: left !important;
}
body .sib-form .sib-entry_errored { margin: 0; padding: 0; }
body .sib-form .sib-entry_errored::before { display: none; }
body .sib-form .sib-entry_errored .entry__field, body .sib-form .sib-entry_errored .input--multiselect { border-color: var(--hb-error); }

/* Success and error banners (shown with .sib-form-message-panel--active). They sit above the card. */
body .sib-form .sib-form-message-panel {
  width: 100%; max-width: 820px !important; margin: 0 auto 20px; padding: 6px;
  font: 500 15px/1.5 var(--wp--preset--font-family--montserrat, Montserrat, sans-serif) !important; text-align: left !important; border-radius: 12px !important; border-width: 1px !important;
}
body .sib-form .sib-form-message-panel--active { display: block; }
body .sib-form #error-message, body .sib-form .sib-form-message-panel[id^="error"] { color: var(--hb-error) !important; background-color: var(--hb-error-bg) !important; border-color: #E7B4AF !important; }
body .sib-form #success-message, body .sib-form .sib-form-message-panel[id^="success"] { color: var(--hb-ok) !important; background-color: var(--hb-ok-bg) !important; border-color: #A9D8BD !important; }
body .sib-form .sib-form-message-panel__text { gap: 12px; padding: 10px 12px; }
body .sib-form .sib-form-message-panel__text .sib-notification__icon { width: 22px; height: 22px; margin: 0; }
body .sib-form .sib-form-container > div:empty { display: none; }

/* Optional two column layout: wrap the embed in a Group with the class hip-brevo--cols */
@media (min-width: 641px) {
  .hip-brevo--cols .sib-form form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
  .hip-brevo--cols .sib-form form > div { grid-column: 1 / -1; }
  .hip-brevo--cols .sib-form form > div:has(> .sib-input, > .sib-select, > .sib-sms-field):not(:has(textarea)) { grid-column: auto; }
}
@media (max-width: 640px) {
  body .sib-form .sib-sms-input-wrapper { align-items: flex-start; }
  body .sib-form .sib-form__declaration .declaration-block-icon { display: none; }
}
@media (prefers-reduced-motion: reduce) { body .sib-form * { transition: none !important; } }

/* Date fields: Brevo uses the Pikaday calendar, appended to <body>. Only colours and font are aligned here. */
body .pika-single { font-family: var(--wp--preset--font-family--montserrat, Montserrat, sans-serif); border: 1.5px solid #DBDAD2; border-radius: 12px; box-shadow: 0 14px 36px rgba(74, 73, 69, .16); overflow: hidden; }
body .pika-button { border-radius: 6px; }
body .pika-button:hover, body .pika-row.pick-whole-week:hover .pika-button { background: #8C6B29 !important; color: #FFFFFF !important; border-radius: 6px; }
body .is-selected .pika-button, body .has-event .pika-button { background: #B08A3E !important; color: #FFFFFF !important; box-shadow: none !important; border-radius: 6px; }
body .is-today .pika-button { color: #8C6B29; }

/* 12. Specifications (dark section, white spec cards; any number of cards) ------------------------------- */
/* Group.hip-section.hip-section--dark > intro + Group.hip-spec-grid > Group.hip-spec-card x N > [H3.hip-spec-card__title, Group.hip-spec-card__rows > Group.hip-spec-row x N > [P.hip-spec-row__label, P.hip-spec-row__value]]. */
/* Editors add a card by duplicating one (or inserting the "HIP Spec card" pattern) and a row by duplicating a row; the grid reflows by itself. A row with only a label shows a plain line. */
.hip-section--dark { background: var(--ink-900); }
.hip-section--dark .hip-section__intro .hip-section-title { color: #FFFFFF; }
.hip-spec-grid { box-sizing: border-box; max-width: 1160px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.hip-spec-grid > * { margin-block: 0; }
.hip-spec-card { box-sizing: border-box; background: #FFFFFF; border-radius: 14px; padding: 26px; }
.hip-spec-card > * { margin-block: 0; }
.hip-spec-card .hip-spec-card__title { margin: 0 0 16px; padding-bottom: 14px; border-bottom: 2px solid var(--wp--preset--color--ember-100); font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--ink-900); }
.hip-spec-card__rows { display: flex; flex-direction: column; gap: 11px; }
.hip-spec-card__rows > * { margin-block: 0; }
.hip-spec-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.hip-spec-row > * { margin: 0; }
.hip-spec-row .hip-spec-row__label { font-size: 14.5px; font-weight: 500; line-height: 1.4; color: var(--ink-800); }
.hip-spec-row .hip-spec-row__value { font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--ember-700); text-align: right; }
@media (min-width: 481px) { .hip-spec-row .hip-spec-row__value { white-space: nowrap; } }
@media (max-width: 768px) { .hip-spec-grid { padding: 0 18px; } .hip-spec-card { padding: 22px; } }

/* 13. Request an Offer page (hero, three promises, form card) + flat Brevo variant ------------------------ */
/* Classes use the hip27- prefix on purpose: the Feature Cards plugin ships global .hip-card rules. */
.hip27-offer-hero { margin: 0; padding: calc(var(--hdr) + 56px) 24px 64px; background: var(--ink-900); text-align: center; }
.hip27-offer-hero > * { margin-block: 0; }
.hip27-offer-hero .hip27-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 7px 14px; border-radius: 999px; background: var(--ember-600); font-size: 12px; font-weight: 700; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; color: #FFFFFF; }
.hip27-offer-hero .hip27-offer-title { max-width: 20ch; margin: 0 auto 18px; font-size: clamp(30px, 5vw, 52px); font-weight: 700; line-height: 1.1; color: #FFFFFF; text-wrap: balance; }
.hip27-offer-hero .hip27-offer-lead { max-width: 56ch; margin: 0 auto; font-size: 18px; font-weight: 400; line-height: 1.6; color: rgba(255, 255, 255, .88); text-wrap: pretty; }
.hip27-offer-promises { box-sizing: border-box; max-width: 1120px; margin: 0 auto; padding: 64px 24px 24px; }
.hip27-offer-promises > * { margin-block: 0; }
.hip27-offer-promise-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 24px; }
.hip27-offer-promise-grid > * { margin-block: 0; }
.hip27-promise { padding: 30px; border-radius: 16px; background: var(--ink-100); }
.hip27-promise > * { margin-block: 0; }
.hip27-promise .hip27-promise__num { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 0 18px; border-radius: 12px; background: var(--ember-600); font-size: 20px; font-weight: 700; line-height: 1; color: #FFFFFF; }
.hip27-promise .hip27-promise__title { margin: 0 0 10px; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--ink-900); }
.hip27-promise .hip27-promise__text { margin: 0; font-size: 15.5px; font-weight: 400; line-height: 1.6; color: var(--wp--preset--color--ink-700); }
.hip27-offer-form { box-sizing: border-box; max-width: 820px; margin: 0 auto; padding: 40px 24px 96px; }
.hip27-offer-form > * { margin-block: 0; }
.hip27-offer-card { padding: clamp(24px, 4vw, 44px); border: 1px solid var(--ink-200); border-radius: 18px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(74, 73, 69, .08); }
.hip27-offer-card > * { margin-block: 0; }
.hip27-offer-card .hip27-offer-card__title { margin: 0 0 8px; font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--ink-900); }
.hip27-offer-card .hip27-offer-card__intro { margin: 0 0 32px; font-size: 16px; line-height: 1.6; color: var(--wp--preset--color--ink-700); }
@media (max-width: 768px) {
  .hip27-offer-hero { padding: calc(var(--hdr) + 32px) 18px 48px; }
  .hip27-offer-hero .hip27-offer-lead { font-size: 16px; }
  .hip27-offer-promises { padding: 40px 18px 8px; }
  .hip27-offer-form { padding: 24px 18px 64px; }
}
/* Flat Brevo variant: put the embed in a Group that is already a card, and drop Brevo's own card. */
.hip-brevo--flat .sib-form { max-width: none; }
.hip-brevo--flat .sib-form #sib-container { max-width: none !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none; }

/* 14. Call to action band ("Build your dream 4Family") ------------------------------------------------------ */
.hip27-cta { box-sizing: border-box; margin: 0; padding: 80px 24px; background: var(--ember-600); text-align: center; }
.hip27-cta > * { margin-block: 0; }
.hip27-cta .hip27-cta__title { max-width: 22ch; margin: 0 auto 16px; font-size: clamp(28px, 4vw, 44px); font-weight: 700; line-height: 1.15; color: #FFFFFF; text-wrap: balance; }
.hip27-cta .hip27-cta__text { max-width: 46ch; margin: 0 auto 30px; font-size: 18px; font-weight: 400; line-height: 1.6; color: rgba(255, 255, 255, .92); text-wrap: pretty; }
.hip27-cta .wp-block-buttons { justify-content: center; margin: 0; }
.hip27-cta .hip27-cta__button .wp-block-button__link { padding: 16px 34px; border-radius: 10px; background: #FFFFFF; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--ember-700); text-decoration: none; transition: background-color .2s ease; }
.hip27-cta .hip27-cta__button .wp-block-button__link:hover,
.hip27-cta .hip27-cta__button .wp-block-button__link:focus-visible { background: var(--ember-050); color: var(--ember-700); }
.hip27-cta .hip27-cta__button .wp-block-button__link:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
@media (max-width: 768px) {
  .hip27-cta { padding: 56px 18px; }
  .hip27-cta .hip27-cta__text { font-size: 16px; }
}
/* 15. Background flow (Rivian style) ------------------------------------------------------------------ */
/* Each section paints a vertical gradient that ENDS on the colour the next section STARTS with, so the page colour drifts from layer to layer with no visible seams. */
/* Hero to Overview is a deliberate hard cut. Fades that end in or start from the dark charcoal sit BEHIND the cards (no extra space): --f is the fade length in px. */
/* Gradients are eased (smoothstep, 6 steps) to avoid a visible band where a ramp starts. The sections are matched by their HTML anchors (#exterior, #interior ...). */
.hip-overview { background: linear-gradient(180deg, #F5F5F5 0%, #F5F5F5 30%, #F6F6F6 41.7%, #F8F8F8 53.3%, #FAFAFA 65.0%, #FCFCFC 76.7%, #FEFEFE 88.3%, #FFFFFF 100.0%); }
#exterior { --f: 340px; background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF calc(100% - var(--f)), #F2F2F1 calc(100% - var(--f) * 0.833), #D0D0CF calc(100% - var(--f) * 0.667), #A4A4A2 calc(100% - var(--f) * 0.500), #797875 calc(100% - var(--f) * 0.333), #575653 calc(100% - var(--f) * 0.167), #4A4945 calc(100% - var(--f) * 0.000)); }
#interior { --f: 120px; --hip27-card-bg: #FFFFFF; background: linear-gradient(180deg, #4A4945 calc(var(--f) * 0.000), #565551 calc(var(--f) * 0.167), #75746F calc(var(--f) * 0.333), #9E9B96 calc(var(--f) * 0.500), #C6C2BC calc(var(--f) * 0.667), #E5E1DA calc(var(--f) * 0.833), #F1EDE6 calc(var(--f) * 1.000), #F1EDE6 calc(var(--f) + 1px), #F2EDE6 calc(var(--f) + (100% - var(--f)) * 0.167), #F3EFE7 calc(var(--f) + (100% - var(--f)) * 0.333), #F4F0E7 calc(var(--f) + (100% - var(--f)) * 0.500), #F6F1E7 calc(var(--f) + (100% - var(--f)) * 0.667), #F7F3E8 calc(var(--f) + (100% - var(--f)) * 0.833), #F8F3E8 calc(var(--f) + (100% - var(--f)) * 1.000)); }
#kitchen { background: linear-gradient(180deg, #F8F3E8 0%, #F7F2E6 16.7%, #F5EFE0 33.3%, #F2EAD8 50.0%, #F0E6D1 66.7%, #EEE3CB 83.3%, #EDE2C9 100.0%); }
#bathroom { --hip27-card-bg: #FFFFFF; background: linear-gradient(180deg, #EDE2C9 0%, #ECE3CC 16.7%, #EBE4D3 33.3%, #E8E6DC 50.0%, #E6E9E4 66.7%, #E5EAEB 83.3%, #E4EBEE 100.0%); }
#storage { background: linear-gradient(180deg, #E4EBEE 0%, #E5ECEF 16.7%, #E8EEF0 33.3%, #ECF0F2 50.0%, #F1F2F3 66.7%, #F4F4F4 83.3%, #F5F5F5 100.0%); }
#every-season { --f: 340px; background: linear-gradient(180deg, #F5F5F5 calc((100% - var(--f)) * 0.000), #F5F4F4 calc((100% - var(--f)) * 0.167), #F4F3F1 calc((100% - var(--f)) * 0.333), #F3F1EE calc((100% - var(--f)) * 0.500), #F2EFEA calc((100% - var(--f)) * 0.667), #F1EEE7 calc((100% - var(--f)) * 0.833), #F1EDE6 calc((100% - var(--f)) * 1.000), #E5E1DA calc(100% - var(--f) * 0.833), #C6C2BC calc(100% - var(--f) * 0.667), #9E9B96 calc(100% - var(--f) * 0.500), #75746F calc(100% - var(--f) * 0.333), #565551 calc(100% - var(--f) * 0.167), #4A4945 calc(100% - var(--f) * 0.000)); }
#specifications { --f: 300px; background: linear-gradient(180deg, #4A4945 0%, #4A4945 calc(100% - var(--f)), #4F4C43 calc(100% - var(--f) * 0.833), #5B523E calc(100% - var(--f) * 0.667), #6B5A37 calc(100% - var(--f) * 0.500), #7B6230 calc(100% - var(--f) * 0.333), #87682B calc(100% - var(--f) * 0.167), #8C6B29 calc(100% - var(--f) * 0.000)); }
#build-your-dream { --f: 160px; background: linear-gradient(180deg, #8C6B29 calc(var(--f) * 0.000), #8F6D2B calc(var(--f) * 0.167), #95732E calc(var(--f) * 0.333), #9E7A34 calc(var(--f) * 0.500), #A78239 calc(var(--f) * 0.667), #AD883C calc(var(--f) * 0.833), #B08A3E calc(var(--f) * 1.000), #B08A3E calc(var(--f) + 1px)); }
@media (max-width: 768px) {
  #exterior, #every-season { --f: 260px; }
  #interior { --f: 88px; }
  #specifications { --f: 240px; }
  #build-your-dream { --f: 120px; }
}

/* 16. Page hero + Become a Dealer page ------------------------------------------------------------------ */
/* hip27 prefix on purpose (Feature Cards plugin ships global .hip-card rules). Reusable page hero: Group.hip27-ph > H1.hip27-ph__title + P.hip27-ph__lead + optional Buttons. */
.hip27-ph { margin: 0; padding: calc(var(--hdr) + clamp(36px, 6vw, 64px)) 24px clamp(64px, 8vw, 96px); background: var(--ink-900); text-align: center; }
.hip27-ph > * { margin-block: 0; }
.hip27-ph .hip27-ph__title { max-width: 20ch; margin: 0 auto 18px; font-size: clamp(30px, 5vw, 52px); font-weight: 700; line-height: 1.1; color: #FFFFFF; text-wrap: balance; }
.hip27-ph .hip27-ph__lead { max-width: 52ch; margin: 0 auto 32px; font-size: 18px; font-weight: 400; line-height: 1.6; color: rgba(255, 255, 255, .88); text-wrap: pretty; }
.hip27-ph .wp-block-buttons { justify-content: center; gap: 12px; margin: 0; }
/* Buttons: Button block with class hip27-btn plus hip27-btn--primary (ember) or hip27-btn--outline (white outline on dark, with download icon). */
.hip27-btn .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; min-height: 48px; padding: 15px 30px; border: 1.5px solid transparent; border-radius: 10px; font-size: 16px; font-weight: 600; line-height: 1.3; text-decoration: none; white-space: nowrap; transition: background-color .2s ease; }
.hip27-btn--primary .wp-block-button__link { background: var(--ember-600); color: #FFFFFF; }
.hip27-btn--primary .wp-block-button__link:hover, .hip27-btn--primary .wp-block-button__link:focus-visible { background: var(--ember-700); color: #FFFFFF; }
.hip27-btn--outline .wp-block-button__link { padding: 13.5px 26px; border-color: rgba(255, 255, 255, .5); background: transparent; color: #FFFFFF; }
.hip27-btn--outline .wp-block-button__link:hover, .hip27-btn--outline .wp-block-button__link:focus-visible { background: rgba(255, 255, 255, .1); color: #FFFFFF; }
.hip27-btn--outline .wp-block-button__link::before { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M5 21h14'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M5 21h14'/%3E%3C/svg%3E") center / contain no-repeat; }
.hip27-btn .wp-block-button__link:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
/* Shared bits */
.hip27-h2 { margin: 0 0 22px; font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; line-height: 1.15; color: var(--ink-900); text-wrap: balance; }
/* Tick list (core List block with class hip27-checklist) */
.hip27-checklist { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.hip27-checklist li { position: relative; margin: 0; padding-left: 30px; font-size: 16.5px; font-weight: 500; line-height: 1.5; color: var(--ink-800); }
.hip27-checklist li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; background: var(--ember-600); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Dealer: "market is saturated" split */
.hip27-split { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: start; max-width: 1216px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) 24px; }
.hip27-split > * { margin-block: 0; }
.hip27-split__lead { padding-top: clamp(28px, 4vw, 56px); }
.hip27-split__lead > * { margin-block: 0; }
.hip27-lines { display: flex; flex-direction: column; gap: 4px; }
.hip27-lines > * { margin-block: 0; }
.hip27-lines p { margin: 0; font-size: 16.5px; font-weight: 500; line-height: 1.6; color: var(--wp--preset--color--ink-700); }
.hip27-split__lead .hip27-split__text { max-width: 44ch; margin: 24px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--wp--preset--color--ink-700); }
.hip27-split__card { box-sizing: border-box; padding: clamp(28px, 4vw, 56px); border-radius: 18px; background: var(--ink-100); }
.hip27-split__card > * { margin-block: 0; }
.hip27-split__card .hip27-h2 { margin: 0 0 14px; }
.hip27-split__card .hip27-split__text { margin: 0 0 28px; font-size: 16.5px; line-height: 1.6; color: var(--wp--preset--color--ink-700); }
.hip27-split__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 24px; border-top: 1px solid var(--ink-200); }
.hip27-split__cols > * { margin-block: 0; }
.hip27-split__col { display: flex; flex-direction: column; gap: 6px; }
.hip27-split__col > * { margin-block: 0; }
.hip27-split__col p { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink-900); }
.hip27-split__col--accent p { color: var(--ember-700); }
/* Dealer: two benefit cards on grey */
.hip27-partners { margin: 0; padding: clamp(56px, 8vw, 96px) 24px; background: var(--ink-100); }
.hip27-partners > * { margin-block: 0; }
.hip27-partners__inner { max-width: 1120px; margin: 0 auto; }
.hip27-partners__inner > * { margin-block: 0; }
.hip27-partners .hip27-h2 { margin: 0 0 36px; text-align: center; }
.hip27-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.hip27-benefits > * { margin-block: 0; }
.hip27-benefit { padding: clamp(28px, 4vw, 40px); border-radius: 18px; background: #FFFFFF; box-shadow: 0 10px 30px rgba(74, 73, 69, .06); }
.hip27-benefit > * { margin-block: 0; }
.hip27-benefit .hip27-benefit__title { margin: 0 0 20px; font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--ink-900); }
/* Application / form section (anchor #apply) */
.hip27-apply { box-sizing: border-box; max-width: 820px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) 24px; }
.hip27-apply > * { margin-block: 0; }
.hip27-apply__head { margin: 0 0 36px; text-align: center; }
.hip27-apply__head > * { margin-block: 0; }
.hip27-apply__head .hip27-h2 { margin: 0 0 12px; }
.hip27-apply__head .hip27-apply__lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--wp--preset--color--ink-700); }
.hip27-form-card { padding: clamp(24px, 4vw, 44px); border: 1px solid var(--ink-200); border-radius: 18px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(74, 73, 69, .08); }
.hip27-form-card > * { margin-block: 0; }
.hip27-form-card .hip27-form-card__title { margin: 0 0 20px; font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--ink-900); }
.hip27-form-todo { margin: 0; padding: 24px; border: 2px dashed var(--wp--preset--color--ink-300); border-radius: 12px; font-size: 15px; line-height: 1.5; text-align: center; color: var(--wp--preset--color--ink-700); }
@media (max-width: 768px) {
  .hip27-ph { padding: calc(var(--hdr) + 28px) 18px 48px; }
  .hip27-ph .hip27-ph__lead { font-size: 16px; }
  .hip27-split { grid-template-columns: minmax(0, 1fr); padding: 48px 18px; }
  .hip27-split__lead { padding-top: 0; }
  .hip27-partners { padding: 48px 18px; }
  .hip27-apply { padding: 48px 18px 64px; }
}

/* 17. Newsletter page (dark hero with benefits left, sign-up card right) ----------------------------------- */
.hip27-news { margin: 0; padding: calc(var(--hdr) + clamp(36px, 6vw, 64px)) 24px clamp(72px, 9vw, 120px); background: var(--ink-900); }
.hip27-news > * { margin-block: 0; }
.hip27-news__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(36px, 6vw, 80px); align-items: center; max-width: 1120px; margin: 0 auto; }
.hip27-news__grid > * { margin-block: 0; }
.hip27-news__intro > * { margin-block: 0; }
.hip27-news__intro .hip27-news__title { margin: 0 0 18px; font-size: clamp(30px, 4.6vw, 50px); font-weight: 700; line-height: 1.1; color: #FFFFFF; text-wrap: balance; }
.hip27-news__intro .hip27-news__lead { max-width: 42ch; margin: 0 0 36px; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.hip27-news__list { display: flex; flex-direction: column; gap: 22px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .18); }
.hip27-news__list > * { margin-block: 0; }
.hip27-news__item { position: relative; padding-left: 32px; }
.hip27-news__item > * { margin-block: 0; }
.hip27-news__item::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; background: #C9A45A; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.hip27-news__item .hip27-news__item-title { margin: 0 0 4px; font-size: 17px; font-weight: 600; line-height: 1.3; color: #FFFFFF; }
.hip27-news__item .hip27-news__item-text { margin: 0; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, .8); }
.hip27-news__card { box-sizing: border-box; padding: clamp(26px, 4vw, 44px); border-radius: 18px; background: #FFFFFF; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.hip27-news__card > * { margin-block: 0; }
.hip27-news__card .hip27-news__card-title { margin: 0 0 24px; font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--ink-900); }
@media (max-width: 768px) {
  .hip27-news { padding: calc(var(--hdr) + 28px) 18px 56px; }
  .hip27-news__intro .hip27-news__lead { font-size: 16px; }
}

/* ==========================================================================
   19. Contact Us page (reuses the Offer page hero and card, section 13)
   ========================================================================== */
.hip27-contact-follow { margin: 32px 0 0; text-align: center; }
.hip27-contact-follow > * { margin-block: 0; }
.hip27-contact-follow .hip27-contact-follow__title { margin: 0 0 14px; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink-900); }
.hip27-contact-follow .wp-block-social-links { justify-content: center; gap: 4px; }
.hip27-contact-follow .wp-block-social-links .wp-social-link { color: var(--ink-900) !important; }
.hip27-contact-follow .wp-block-social-links .wp-social-link a { padding: 10px; color: inherit !important; }
.hip27-contact-follow .wp-block-social-links .wp-social-link:hover { color: var(--ember-600) !important; }

/* ==========================================================================
   18. Dealers and Service Centers locator (page: dealers-and-service-centers)
   ========================================================================== */
.hip27-loc-banner { margin: 0; padding: 16px 24px; background: var(--ember-600); text-align: center; }
.hip27-loc-banner > * { margin-block: 0; }
.hip27-loc-banner p { font-size: 16px; line-height: 1.5; color: #FFFFFF; }
.hip27-loc-banner a { color: #FFFFFF; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.hip27-loc-banner a:hover, .hip27-loc-banner a:focus-visible { text-decoration-thickness: 2px; }
.hip27-locator-sec { box-sizing: border-box; max-width: 1160px; margin: 0 auto; padding: 48px 24px 24px; }
.hip27-locator-sec > * { margin-block: 0; }
.hip27-locator { display: flex; height: 600px; border: 1px solid var(--ink-200); border-radius: 18px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(74, 73, 69, .08); overflow: hidden; }
.hip27-loc-side { display: flex; flex-direction: column; flex: 0 0 360px; min-width: 0; border-right: 1px solid var(--ink-200); background: #FFFFFF; }
.hip27-loc-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 16px 18px; border-bottom: 1px solid var(--ink-200); background: #F5F5F5; font-size: 14px; color: var(--ink-900); }
.hip27-loc-filters strong { flex: 0 0 100%; font-weight: 700; }
.hip27-loc-filters label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 500; }
.hip27-loc-filters input { width: 18px; height: 18px; margin: 0; accent-color: var(--ember-600); }
.hip27-loc-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.hip27-loc-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--ink-200); cursor: pointer; transition: background-color .2s; }
.hip27-loc-item[hidden] { display: none; }
.hip27-loc-item:hover, .hip27-loc-item:focus-visible { background: #F5F5F5; outline: none; }
.hip27-loc-item:focus-visible { box-shadow: inset 3px 0 0 var(--ember-600); }
.hip27-loc-text { flex: 1; min-width: 0; }
.hip27-loc-name { margin: 0 0 4px; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink-900); }
.hip27-loc-meta { display: flex; gap: 10px; margin-bottom: 4px; font-size: 12px; font-weight: 700; }
.hip27-loc-label { color: var(--ember-700); }
.hip27-loc-rating { color: #8C6B29; }
.hip27-loc-addr { font-size: 13px; line-height: 1.45; color: var(--wp--preset--color--ink-700); }
.hip27-loc-dir { display: inline-flex; flex: 0 0 44px; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--ink-200); border-radius: 50%; background: #FFFFFF; color: var(--ember-700); }
.hip27-loc-dir:hover, .hip27-loc-dir:focus-visible { background: #F5F5F5; color: var(--ember-600); }
.hip27-loc-map { flex: 1; min-width: 0; min-height: 400px; background: #E5E3DF; }
.hip27-loc-pop { max-width: 220px; padding: 4px 2px; font-family: inherit; color: #333333; }
.hip27-loc-pop strong { font-size: 14px; }
.hip27-loc-pop p { margin: 6px 0; font-size: 12px; line-height: 1.4; color: #666666; }
.hip27-loc-pop a { display: inline-block; margin-top: 4px; padding: 8px 12px; border-radius: 6px; background: var(--ember-600); color: #FFFFFF; font-size: 12px; font-weight: 700; text-decoration: none; }
.hip27-loc-follow { box-sizing: border-box; max-width: 1160px; margin: 0 auto; padding: 24px 24px 96px; }
.hip27-loc-follow > * { margin-block: 0; }
@media (max-width: 768px) {
	.hip27-locator-sec { padding: 28px 16px 16px; }
	.hip27-locator { flex-direction: column; height: auto; }
	.hip27-loc-side { flex: none; height: 380px; border-right: 0; border-bottom: 1px solid var(--ink-200); }
	.hip27-loc-map { flex: none; height: 400px; }
	.hip27-loc-follow { padding: 16px 16px 64px; }
}
/* About Us page (2026-10-05) ---------------------------------------------------------------------------- */
/* Hero reuses .hip27-ph. Sections: .hip27-ab-sec (white), .hip27-ab-band (cream goal/promise), .hip27-ab-sec--grey (partners). Cards are core Groups. */
.hip27-pill { display: inline-block; margin: 0 0 22px; padding: 7px 14px; border-radius: 999px; background: var(--ember-600); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; color: #FFFFFF; }
.hip27-ph .hip27-ph__lead.hip27-ab-lead { max-width: 820px; margin: 0 auto; line-height: 1.7; }
.hip27-ph .hip27-ph__title.hip27-ab-title { max-width: 820px; }
.hip27-ab-sec { box-sizing: border-box; max-width: 1208px; margin: 0 auto; padding: clamp(56px, 8vw, 88px) 24px 40px; }
.hip27-ab-sec > * { margin-block: 0; }
.hip27-ab-sec--grey { max-width: none; margin: 0; padding: clamp(56px, 7vw, 80px) 24px; background: var(--ink-100); }
.hip27-ab-inner { max-width: 1160px; margin: 0 auto; }
.hip27-ab-inner > * { margin-block: 0; }
.hip27-ab-head { margin: 0 0 48px; text-align: center; }
.hip27-ab-head > * { margin-block: 0; }
.hip27-ab-head .hip-eyebrow { margin-bottom: 14px; }
.hip27-ab-head .hip-section-title { margin: 0; font-size: clamp(26px, 4vw, 40px); line-height: 1.14; }
.hip27-ab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 20px; }
.hip27-ab-grid > * { margin-block: 0; }
.hip27-ab-grid--team { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 22px; }
.hip27-ab-grid--partners { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.hip27-ab-card { box-sizing: border-box; padding: 30px; border: 1px solid var(--ink-200); border-radius: 16px; background: #FFFFFF; }
.hip27-ab-card > * { margin-block: 0; }
.hip27-ab-grid--team .hip27-ab-card { padding: 28px; }
.hip27-ab-grid--partners .hip27-ab-card { padding: 24px; border: 0; border-radius: 14px; }
.hip27-ab-num { margin: 0 0 18px; font-size: 34px; font-weight: 700; line-height: 1; color: var(--ember-600); }
.hip27-ab-card .hip27-ab-card__title { margin: 0 0 10px; font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--ink-900); }
.hip27-ab-card .hip27-ab-card__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-700); }
.hip27-ab-avatar { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 0 18px; border-radius: 999px; background: var(--wp--preset--color--ember-100, #F4E7C8); font-size: 19px; font-weight: 700; color: var(--ember-700); }
.hip27-ab-role { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ember-600); }
.hip27-ab-card .hip27-ab-card__title.is-name { margin-bottom: 2px; }
.hip27-ab-card .hip27-ab-card__text.is-bio { font-size: 14.5px; }
.hip27-ab-card .hip27-ab-card__text.is-partner { font-size: 14px; line-height: 1.55; }
.hip27-ab-pt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.hip27-ab-pt-head > * { margin: 0; }
.hip27-ab-pt-head .hip27-ab-card__title { margin: 0; font-size: 17px; }
.hip27-ab-loc { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--ember-600); }
.hip27-ab-band { margin: 48px 0 0; padding: clamp(56px, 7vw, 80px) 24px; background: var(--ember-050); }
.hip27-ab-band > * { margin-block: 0; }
.hip27-ab-band__inner { box-sizing: border-box; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 40px; max-width: 1020px; margin: 0 auto; }
.hip27-ab-band__inner > * { margin-block: 0; }
.hip27-ab-band__col > * { margin-block: 0; }
.hip27-ab-band h2 { margin: 0 0 14px; font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--ink-900); }
.hip27-ab-band__text { font-size: 16.5px; line-height: 1.7; color: var(--ink-700); }
.hip27-ab-band .hip27-checklist li { font-weight: 400; font-size: 16px; color: var(--ink-700); }
@media (max-width: 768px) {
  .hip27-ab-head { margin-bottom: 32px; }
  .hip27-ab-sec { padding-left: 18px; padding-right: 18px; }
  .hip27-ab-sec--grey, .hip27-ab-band { padding-left: 18px; padding-right: 18px; }
  .hip27-ab-card { padding: 24px; }
}
/* 20. Text pages (Privacy Policy, Cookie Settings, Weight Information): Contact Us hero + one wide white card ------ */
.hip27-offer-form--wide { max-width: 920px; }
.hip27-offer-form--wide .hip27-text-card { overflow-wrap: anywhere; }
.hip27-text-card > :first-child { margin-top: 0; }
.hip27-text-card > :last-child { margin-bottom: 0; }
.hip27-text-card p { margin: 0 0 16px; font-size: 16px; line-height: 1.7; color: var(--wp--preset--color--ink-700); }
.hip27-text-card p.hip27-text-lead { font-size: 17px; color: var(--ink-900); }
.hip27-text-card h2 { margin: 44px 0 14px; padding-top: 28px; border-top: 1px solid var(--ink-200); font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--ink-900); }
.hip27-text-card > h2:first-child, .hip27-text-card .hip27-text-lead + h2 { margin-top: 28px; }
.hip27-text-card h3 { margin: 28px 0 10px; font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--ink-900); }
.hip27-text-card ul, .hip27-text-card ol { margin: 0 0 18px; padding-left: 22px; }
.hip27-text-card li { margin: 0 0 8px; font-size: 16px; line-height: 1.65; color: var(--wp--preset--color--ink-700); }
.hip27-text-card li > ul, .hip27-text-card li > ol { margin: 8px 0 0; }
.hip27-text-card a { color: var(--ember-700); text-decoration: underline; text-underline-offset: 2px; }
.hip27-text-card a:hover, .hip27-text-card a:focus-visible { text-decoration-thickness: 2px; }
.hip27-text-card strong { color: var(--ink-900); }
.hip27-text-card code { padding: 2px 7px; border-radius: 6px; background: var(--ink-100); font-size: .92em; line-height: 1.6; color: var(--ink-900); }
.hip27-text-card pre.wp-block-code { margin: 0 0 18px; padding: 16px 18px; border: 0; border-radius: 12px; background: var(--ink-100); white-space: pre-wrap; }
.hip27-text-card pre.wp-block-code code { padding: 0; background: transparent; font-size: 15px; }
.hip27-text-card .wp-block-details { margin: 0 0 12px; border: 1px solid var(--ink-200); border-radius: 12px; background: #FFFFFF; }
.hip27-text-card .wp-block-details > summary { display: flex; align-items: center; min-height: 44px; padding: 14px 20px; cursor: pointer; font-size: 15px; font-weight: 700; letter-spacing: .02em; line-height: 1.4; color: var(--ink-900); }
.hip27-text-card .wp-block-details > summary:hover { background: var(--ink-100); border-radius: 12px; }
.hip27-text-card .wp-block-details > summary:focus-visible { outline: 2px solid var(--ember-600); outline-offset: 2px; border-radius: 12px; }
.hip27-text-card .wp-block-details[open] > summary { border-bottom: 1px solid var(--ink-200); border-radius: 12px 12px 0 0; }
.hip27-text-card .wp-block-details > :not(summary) { margin-left: 20px; margin-right: 20px; }
.hip27-text-card .wp-block-details > summary + * { margin-top: 18px; }
.hip27-text-card .wp-block-details > :last-child { margin-bottom: 20px; }
.hip27-text-card .CookieDeclaration { max-width: 100%; overflow-x: auto; }
@media (max-width: 768px) {
  .hip27-text-card h2 { margin-top: 36px; font-size: 21px; }
  .hip27-text-card .wp-block-details > summary { padding: 14px 16px; }
  .hip27-text-card .wp-block-details > :not(summary) { margin-left: 16px; margin-right: 16px; }
}

/* 21. Footer spacing (2026-10-06) ----------------------------------------- */
/* The global flow-layout rule added a 24px top margin to each link list. Removed. Link rows now get equal padding instead of a fixed min-height, so one-line and two-line items have the same gap around the text. */
.hip-footer .hip-footer__col > .hip-footer__nav { margin-block-start: 0; }
.hip-footer .hip-footer__title { margin-bottom: 4px; white-space: normal; overflow-wrap: break-word; line-height: 1.3; }
.hip-footer .hip-footer__nav .wp-block-navigation__container { gap: 0; }
.hip-footer .hip-footer__nav .wp-block-navigation-item__content { min-height: 0; padding-block: 11px; }