@charset "UTF-8";
/* ==========================================================================
   Solar Design — Elementor widget library
   Build: npm run build   (watch: npm run watch)
   Output: ../css/sd-widgets.css

   Tokens and base define the contracts controls write into; atoms and organisms
   add only the structure those controls need.
   ========================================================================== */
/* ==========================================================================
   Design tokens — extracted from `Solar Design Homepage.dc.html`.

   Mirrors includes/class-tokens.php. Values here are the *fallbacks* that make
   unstyled markup render on-brand; Elementor control `selectors` override them
   per widget instance. Keep the two files in step.
   ========================================================================== */
:root {
  /* ---------------------------------------------------------------- colour */
  --sd-surface: #F0F0F0;
  --sd-surface-alt: #E9E9E8;
  --sd-ink: #313130;
  --sd-ink-body: #4A4A48;
  --sd-ink-deep: #262222;
  --sd-ink-shade: #141212;
  --sd-muted: #666666;
  --sd-muted-soft: #8C8B8B;
  --sd-muted-faint: #999999;
  --sd-rule: #D7D7D6;
  --sd-rule-soft: #E4E4E3;
  --sd-rule-mid: #C9C8C7;
  --sd-on-dark: #C0BFBF;
  --sd-on-dark-mute: #A8A7A6;
  --sd-level-mid: #9A9A98;
  --sd-footer-rule: #3C3838;
  --sd-white: #FFFFFF;
  --sd-accent: #D42121;
  --sd-accent-warm: #D4BA26;
  --sd-gradient: linear-gradient(105.5deg, #F5A623 0%, #F7C948 50%, #FADB5F 100%);
  --sd-scrim-hero: linear-gradient(90deg, rgba(20, 18, 18, 0.92) 0%, rgba(20, 18, 18, 0.62) 42%, rgba(20, 18, 18, 0.15) 78%, rgba(20, 18, 18, 0.35) 100%);
  --sd-scrim-band: linear-gradient(0deg, rgba(20, 18, 18, 0.75), rgba(20, 18, 18, 0.05));
  --sd-hatch: repeating-linear-gradient(135deg, #E9E9E8 0 8px, #F0F0F0 8px 16px);
  /* ------------------------------------------------------------ typography */
  --sd-font-sans: Arimo, Helvetica, Arial, sans-serif;
  --sd-font-mono: ui-monospace, Menlo, monospace;
  --sd-size-caption: 12px;
  --sd-size-label: 13px;
  --sd-size-meta: 14px;
  --sd-size-nav: 15px;
  --sd-size-section: 18px;
  --sd-size-small: 16px;
  --sd-size-body-s: 17px;
  --sd-size-body: 18px;
  --sd-size-body-l: 19px;
  --sd-size-lead: 20px;
  --sd-size-card-title: 22px;
  --sd-size-row-title: 24px;
  --sd-size-tile-title: 26px;
  --sd-size-panel-h: 32px;
  --sd-size-quote: 34px;
  --sd-size-stat: 40px;
  --sd-size-stat-l: 44px;
  --sd-size-h2-panel: 52px;
  --sd-size-h2: 64px;
  --sd-size-h1: 96px;
  --sd-track-h1: -0.035em;
  --sd-track-h2: -0.03em;
  --sd-track-h3: -0.025em;
  --sd-track-panel: -0.02em;
  --sd-track-title: -0.015em;
  --sd-track-nav: 0.02em;
  --sd-track-button: 0.04em;
  --sd-track-badge: 0.06em;
  --sd-track-label: 0.1em;
  --sd-track-footer: 0.14em;
  --sd-track-kicker: 0.16em;
  --sd-track-seminar: 0.18em;
  --sd-track-section: 0.2em;
  --sd-track-hero-kick: 0.22em;
  /* --------------------------------------------------------------- spacing */
  --sd-container-max: 1560px;
  --sd-gutter: clamp(20px, 3vw, 44px);
  --sd-section-top: 120px;
  --sd-header-min-h: 86px;
  --sd-hero-min-h: 760px;
  --sd-band-h: 520px;
  --sd-map-min-h: 640px;
  /* ---------------------------------------------------------------- shapes */
  --sd-radius-chip: 20px;
  --sd-radius-card: 20px;
  --sd-radius-badge: 22px;
  --sd-radius-btn: 22px;
  --sd-radius-btn-l: 25px;
  --sd-radius-cta: 32px;
  --sd-rule-width: 1px;
  --sd-shadow-pill: inset -1px -1px 4px rgba(255, 255, 255, 0.25), inset 1px 1px 4px rgba(0, 0, 0, 0.1);
  /* ---------------------------------------------------------------- motion */
  --sd-ease-brand: cubic-bezier(0.2, 0.8, 0.2, 1);
  --sd-anim-duration: 800ms;
  --sd-anim-delay: 0ms;
  --sd-anim-easing: ease-out;
  --sd-transition: 200ms;
  --sd-stagger: 80ms;
}

/* ==========================================================================
   Base layer — the machinery the shared control traits write into.

   Nothing here styles a specific widget. It defines:
     1. keyframes ported from the source document
     2. the entrance-animation contract (--sd-anim*)
     3. the hover-motion contract (--sd-hover-*, --sd-transition)
     4. the overlay pseudo-element contract (--sd-overlay*)
     5. section chrome (container, gutter, hairline rules)
     6. layout primitives that collapse cleanly when a child is removed
   ========================================================================== */
/* --------------------------------------------------------------- keyframes */
/* Ported verbatim from the source's <style> block, plus the variants exposed
   through the entrance-animation control. */
@keyframes sdArc {
  from {
    stroke-dasharray: 0 999;
  }
}
@keyframes sdRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes sdBar {
  from {
    transform: scaleX(0);
  }
}
@keyframes sdFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes sdScale {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes sdSlideL {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes sdSlideR {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* ------------------------------------------------------- entrance contract */
/* Motion_Controls sets --sd-anim on an element; this rule turns that into a
   running animation. Default trigger is page load, exactly like the source, so
   the animation needs no JavaScript to complete. */
.sd-anim {
  animation-name: var(--sd-anim, none);
  animation-duration: var(--sd-anim-duration, 800ms);
  animation-delay: var(--sd-anim-delay, 0ms);
  animation-timing-function: var(--sd-anim-easing, ease-out);
  animation-fill-mode: both;
}

/* Opt-in "play when scrolled into view". The hold is applied by JS only, so a
   scripting failure leaves the element visible rather than stuck at opacity 0. */
.sd-trigger-view .sd-anim.sd-anim--hold {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .sd-anim,
  .sd-trigger-view .sd-anim.sd-anim--hold {
    animation: none !important;
  }
}
/* ---------------------------------------------------------- hover contract */
/* Identity transform by default; the hover state selectors override the vars.
   Only applied to elements that opt in via .sd-motion — an identity transform
   still creates a containing block, which would surprise fixed children. */
.sd-motion {
  transform: translate(var(--sd-hover-x, 0), var(--sd-hover-y, 0)) rotate(var(--sd-hover-rotate, 0deg)) scale(var(--sd-hover-scale, 1));
  transition: transform var(--sd-transition, 200ms) var(--sd-anim-easing, ease-out), background-color var(--sd-transition, 200ms) linear, background-image var(--sd-transition, 200ms) linear, color var(--sd-transition, 200ms) linear, border-color var(--sd-transition, 200ms) linear, box-shadow var(--sd-transition, 200ms) linear, opacity var(--sd-transition, 200ms) linear;
}

@media (prefers-reduced-motion: reduce) {
  .sd-motion {
    transform: none;
    transition-property: background-color, color, border-color, box-shadow, opacity;
  }
}
/* -------------------------------------------------------- overlay contract */
/* Any element registering Box_Controls with overlays enabled carries .sd-box.
   With --sd-overlay unset the pseudo-element paints nothing. */
.sd-box,
.sd-section {
  position: relative;
}

.sd-box::after,
.sd-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: var(--sd-overlay, none);
  mix-blend-mode: var(--sd-overlay-blend, normal);
  opacity: var(--sd-overlay-opacity, 1);
}

/* Content must sit above the overlay without needing a z-index on every node.
   Full-bleed backdrops are the exception: they are emitted as direct children so
   they can span the viewport, and must stay *below* the overlay. */
.sd-box > *,
.sd-section > * {
  position: relative;
  z-index: 1;
}

.sd-hero__media,
.sd-image-band__media {
  z-index: 0 !important;
}

/* ---------------------------------------------------------- section chrome */
.sd-section {
  box-sizing: border-box;
  font-family: var(--sd-font-sans);
  color: var(--sd-ink);
}

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

.sd-section__inner {
  max-width: var(--sd-container-max, 1560px);
  margin-inline: auto;
  padding-inline: var(--sd-gutter, clamp(20px, 3vw, 44px));
  width: 100%;
}

/* The rule spans the content column, not the gutter: a border on the padded
   container would overshoot the content by the gutter at each end. Drawn as
   pseudo-elements inset by the gutter, which the control publishes as a variable
   alongside the padding it sets. */
.sd-section--rule-top > .sd-section__inner,
.sd-section--rule-bottom > .sd-section__inner,
.sd-section--rule-both > .sd-section__inner {
  position: relative;
}

.sd-section--rule-top > .sd-section__inner::before,
.sd-section--rule-both > .sd-section__inner::before,
.sd-section--rule-bottom > .sd-section__inner::after,
.sd-section--rule-both > .sd-section__inner::after {
  content: "";
  position: absolute;
  inset-inline: var(--sd-gutter, clamp(20px, 3vw, 44px));
  border-block-start: var(--sd-rule-width, 1px) solid var(--sd-rule, #D7D7D6);
}

/* The rule needs air on the content side of it — flush against a headline's
   descenders is the one thing the reference never does. */
.sd-section--rule-top > .sd-section__inner {
  padding-block-start: 40px;
}

.sd-section--rule-bottom > .sd-section__inner {
  padding-block-end: 40px;
}

.sd-section--rule-both > .sd-section__inner {
  padding-block: 40px;
}

.sd-section--rule-top > .sd-section__inner::before,
.sd-section--rule-both > .sd-section__inner::before {
  top: 0;
}

.sd-section--rule-bottom > .sd-section__inner::after,
.sd-section--rule-both > .sd-section__inner::after {
  bottom: 0;
}

/* ------------------------------------------------------- layout primitives */
/* Every arrangement in this library is flex or grid plus `gap`. Removing a
   child therefore removes its space too — no spacer nodes, no fixed heights,
   no absolute positioning that assumes a sibling exists. */
.sd-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sd-gap, 0);
  min-width: 0;
}

.sd-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sd-gap, 0);
  min-width: 0;
}

.sd-grid {
  display: grid;
  gap: var(--sd-gap, 0);
  min-width: 0;
}

/* minmax(0, 1fr) throughout: a long unbroken word must not widen a track. */
.sd-grid > * {
  min-width: 0;
}

/* ------------------------------------------------------- the hidden attribute */
/* `[hidden]` is only `display: none` in the UA stylesheet, which any class with a
   display value out-specifies. Every panel in this library that toggles with the
   attribute also carries a layout class — .sd-stack on the context-map panels,
   the grid on a deliverables row — so without this they stay visible while
   reporting themselves hidden to assistive tech, which is the worst of both.
   The !important is load-bearing: the whole point is to beat those classes. */
[hidden] {
  display: none !important;
}

/* ---------------------------------------------------- graceful degradation */
/* An element that rendered nothing takes no space. Guards in render() should
   have prevented the node entirely; this is the belt to that braces. */
.sd-collapse:empty {
  display: none;
}

/* A section whose every slot was cleared disappears rather than leaving its
   120px of vertical rhythm behind as a mystery gap. */
.sd-section:not(:has(.sd-section__inner > *)) {
  display: none;
}

/* Two-column arrangements become single-column when one side is gone. The
   :has() form covers "the slot is present but empty"; the :not(:has()) form
   covers "the slot was never rendered". */
.sd-split {
  display: grid;
  gap: var(--sd-gap, 0);
  grid-template-columns: var(--sd-split-template, minmax(0, 1fr) minmax(0, 1fr));
  align-items: var(--sd-split-align, start);
}

.sd-split:not(:has(> .sd-split__media)),
.sd-split:has(> .sd-split__media:empty),
.sd-split:not(:has(> .sd-split__body)),
.sd-split:has(> .sd-split__body:empty) {
  grid-template-columns: minmax(0, 1fr);
}

/* Media queries collapse every multi-column arrangement before the tracks get
   narrower than their content. Organisms may override the breakpoint. */
@media (max-width: 1024px) {
  .sd-split {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* --------------------------------------------------------------- utilities */
.sd-mono {
  /* The typography control group writes font-family with Elementor's specificity,
     which a single class cannot beat — so the monospace opt-in has to insist. */
  font-family: var(--sd-font-mono) !important;
}

/* The opt-in usually lands on a wrapper while the typography control writes
   font-family onto the text span inside it, so inheritance never reaches it. */
.sd-mono .sd-eyebrow__text,
.sd-mono .sd-image__caption,
.sd-mono .sd-swatch__text {
  font-family: var(--sd-font-mono) !important;
}

/* Visually hidden but available to assistive tech — used for the accessible
   names of icon-only controls. */
.sd-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Focus must always be visible. Widgets may restyle it; they may not remove it. */
.sd-section :focus-visible {
  outline: 2px solid var(--sd-accent, #D42121);
  outline-offset: 2px;
}

/* ==========================================================================
   Atoms — structure only.

   Every visual decision (colour, type, spacing, radius, shadow) arrives from
   Elementor control `selectors`. What lives here is the arrangement those
   controls need in order to work: display modes, resets that stop a theme
   fighting the controls, and the collapse rules that keep a card from leaving a
   hole when a slot is emptied.
   ========================================================================== */
/* ----------------------------------------------------------------- heading */
.sd-heading {
  margin: 0;
  min-width: 0;
}

.sd-heading__link {
  color: inherit;
  text-decoration: inherit;
}

/* ----------------------------------------------------------------- eyebrow */
.sd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.sd-eyebrow__rule {
  display: block;
  flex: 0 0 auto;
  /* Sized here as well as by the control: organisms compose eyebrows through
     Eyebrow::markup(), where no per-widget control applies, and an unsized rule
     collapses to nothing. 56x2 is the reference design's own measurement. */
  width: 56px;
  height: 2px;
  background: var(--sd-gradient);
}

.sd-eyebrow__text {
  display: block;
  min-width: 0;
}

/* --------------------------------------------------------------- paragraph */
.sd-paragraph {
  margin: 0;
  min-width: 0;
}

/* The WYSIWYG emits its own paragraphs; first and last must not add margin the
   widget's own spacing controls already account for. */
.sd-paragraph > :first-child {
  margin-top: 0;
}

.sd-paragraph > :last-child {
  margin-bottom: 0;
}

.sd-paragraph a {
  color: inherit;
}

/* ------------------------------------------------------------------ button */
.sd-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  border: 0 solid transparent;
  background: none;
  font: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.sd-button__label,
.sd-button__icon {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.sd-button__icon svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* Variant defaults. Anything a control sets wins over these. */
.sd-button--outline {
  background: transparent;
  border: 1px solid currentColor;
}

.sd-button--ghost {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.sd-button--link {
  padding: 0;
  background: none;
  border: 0;
  text-underline-offset: 0.25em;
}

.sd-button--link:hover {
  text-decoration: underline;
}

/* An icon-only button is square by default rather than a stretched pill. */
.sd-button--icon-only {
  aspect-ratio: 1;
  padding-inline: 0;
}

/* ------------------------------------------------------------------- badge */
.sd-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: var(--sd-gradient);
  color: var(--sd-ink-deep);
  font-weight: 700;
  /* Organisms compose badges through Badge::markup(), where no per-widget
     control applies. Without a default the gradient paints as a bare bar
     behind the text instead of a pill. */
  padding: 6px 18px;
  border-radius: 22px;
}

/* The chip's pill, for the same reason. */
.sd-chip {
  padding: 9px 18px;
  border-radius: 20px;
}

.sd-chip__ordinal {
  font-size: 0.857em;
  opacity: 0.6;
}

/* ----------------------------------------------------------------- divider */
.sd-divider {
  display: block;
  flex: 0 0 auto;
  border: 0;
  margin: 0;
  background: var(--sd-rule);
}

/* -------------------------------------------------------------------- stat */
.sd-stat__label,
.sd-stat__value,
.sd-stat__caption {
  display: block;
  min-width: 0;
}

/* ------------------------------------------------------------------ swatch */
.sd-swatch {
  display: block;
  min-width: 0;
}

.sd-swatch__head {
  display: flex;
  align-items: center;
  gap: 0.7em;
  min-width: 0;
}

.sd-swatch__chip {
  display: block;
  flex: 0 0 auto;
  /* A default size for the same reason the chip has a default gap: organisms
     compose swatches through Swatch::markup(), where no per-widget size control
     applies, and an unsized chip collapses to nothing. */
  width: 14px;
  height: 14px;
  background: var(--sd-swatch, currentColor);
}

.sd-swatch__text,
.sd-swatch__description {
  display: block;
  min-width: 0;
}

/* -------------------------------------------------------------------- chip */
.sd-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* A default gap, not only the control's. Organisms render chips through
     Chip::markup() rather than the atom widget, so no per-widget control applies
     and the ordinal would otherwise butt against the label. */
  gap: 8px;
  border: 1px solid var(--sd-rule-mid);
  background: transparent;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.sd-chip__ordinal,
.sd-chip__label {
  display: inline-block;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------- list item */
.sd-list-item {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  min-width: 0;
  border-inline-start: 0 solid transparent;
  margin: 0;
  list-style: none;
}

.sd-list-item__marker {
  flex: 0 0 auto;
}

.sd-list-item__text {
  min-width: 0;
}

.sd-list-item__link {
  color: inherit;
  text-decoration: inherit;
}

/* ------------------------------------------------------------------- image */
.sd-image {
  display: block;
  margin: 0;
  min-width: 0;
}

.sd-image__img {
  display: block;
  max-width: 100%;
  height: auto;
}

.sd-image__link {
  display: block;
}

.sd-image__caption {
  display: block;
}

/* -------------------------------------------------------------------- icon */
.sd-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1;
}

.sd-icon__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sd-icon__glyph svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* ------------------------------------------------------------- form  field */
.sd-field__label {
  display: block;
  min-width: 0;
}

.sd-field__control {
  display: block;
  width: 100%;
  font: inherit;
  color: inherit;
  border: 1px solid var(--sd-rule);
  border-radius: 0;
  background: var(--sd-surface);
  -webkit-appearance: none;
  appearance: none;
}

.sd-field--textarea .sd-field__control {
  resize: vertical;
}

.sd-field--select .sd-field__control {
  /* Restore the disclosure affordance appearance:none removed. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.25em top 55%, right 1em top 55%;
  background-size: 0.35em 0.35em, 0.35em 0.35em;
  background-repeat: no-repeat;
  padding-inline-end: 2.5em;
}

.sd-field--checkbox .sd-field__inline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sd-field--checkbox .sd-field__control {
  width: auto;
  min-height: 0;
  flex: 0 0 auto;
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

.sd-field--checkbox .sd-field__label {
  margin: 0;
}

.sd-field__help {
  display: block;
}

.sd-field__required {
  margin-inline-start: 0.25em;
}

/* -------------------------------------------------------------------- card */
.sd-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sd-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 32px;
  height: 32px;
  font-size: 28px;
  line-height: 1;
  color: var(--sd-accent-warm, #F5A623);
  margin-bottom: 8px;
  flex-shrink: 0;
}
.sd-card__icon svg {
  display: block;
  width: 32px;
  height: 32px;
}
.sd-card__icon svg:not([fill]):not([stroke]),
.sd-card__icon svg[fill=none] {
  stroke: currentColor;
  fill: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sd-card__icon i {
  font-size: inherit;
  line-height: 1;
  color: currentColor;
}

.sd-card__eyebrow,
.sd-card__meta {
  display: block;
  min-width: 0;
}

.sd-card__title {
  margin: 0;
  min-width: 0;
}

/* The source pins the goal-tile title to the bottom so tiles of unequal
   content still align along their titles. */
.sd-card__title--pinned {
  margin-top: auto;
}

/* When the title is not pinned, the meta line takes the slack instead — the
   partner cells do exactly this. Only one of the two may claim it. */
.sd-card:not(:has(.sd-card__title--pinned)) .sd-card__meta {
  margin-top: auto;
}

/* With a pinned title the slack is already taken above it, so the body must sit
   directly beneath rather than claiming the rest and drifting away from it. */
.sd-card:has(.sd-card__title--pinned) .sd-card__meta {
  margin-top: 0;
}

.sd-card__body {
  min-width: 0;
}

/* An empty body slot must not hold open the card's gap. In the editor the slot
   carries a placeholder child, so this only applies on the front end. */
.sd-card__body:empty {
  display: none;
}

.sd-card--linked {
  position: relative;
}

.sd-card__overlay-link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Interactive content inside a linked card must stay clickable — the overlay
   link covers everything below it. */
.sd-card--linked :is(a, button, input, select, textarea, [tabindex]):not(.sd-card__overlay-link) {
  position: relative;
  z-index: 3;
}

/* ==========================================================================
   Organisms — structure only.

   Same rule as the atoms: colour, type and spacing arrive from control
   `selectors`. What lives here is the arrangement, plus the collapse rules that
   keep a section coherent when a slot is emptied.
   ========================================================================== */
/* ---------------------------------------------------------- section header */
.sd-section-head {
  display: grid;
  gap: var(--sd-gap, 20px 72px);
  min-width: 0;
}

.sd-section-head--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: baseline;
}

/* A label row ("Obiettivi" … "06") pushes its count to the content's right
   edge. The two-track split parks it at the midpoint instead, which is a
   different thing and reads as an accident. */
.sd-section-head--between {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

.sd-section-head--between > * {
  min-width: 0;
}

.sd-section-head--split-end {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
}

.sd-section-head--stack {
  grid-template-columns: minmax(0, 1fr);
}

.sd-section-head__lead,
.sd-section-head__aside {
  display: flex;
  flex-direction: column;
  gap: inherit;
  min-width: 0;
}

/* One side gone means the other takes the full width, not half of it. */
.sd-section-head:not(:has(> .sd-section-head__aside)),
.sd-section-head:has(> .sd-section-head__aside:empty),
.sd-section-head:not(:has(> .sd-section-head__lead)),
.sd-section-head:has(> .sd-section-head__lead:empty) {
  grid-template-columns: minmax(0, 1fr);
}

.sd-section-head__note {
  display: block;
}

@media (max-width: 900px) {
  .sd-section-head--split,
  .sd-section-head--split-end {
    grid-template-columns: minmax(0, 1fr);
  }
  .sd-section-head--between {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* ---------------------------------------------------------- hairline grids */
/* Clean vertical dividing lines between columns, without horizontal border lines. */
.sd-grid--hairline {
  --sd-grid-hairline: 0;
  background: none;
  border-inline-start: 1px solid var(--sd-hairline, var(--sd-rule));
}
.sd-grid--hairline > * {
  border-inline-end: 1px solid var(--sd-hairline, var(--sd-rule));
}

/* --------------------------------------------------------------- site header */
.sd-site-header {
  isolation: isolate;
}

.sd-site-header__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 12px;
  min-width: 0;
}

.sd-site-header__logo {
  flex: 0 0 auto;
}

.sd-site-header__brand {
  display: flex;
  align-items: center;
}

/* An inline image sits on the text baseline and drags a descender's worth of
   height with it, which is what made the header 111px instead of 87px. */
.sd-site-header__logo img,
.sd-footer__logo img {
  display: block;
}

/* margin-inline-start:auto pushes the nav and actions right without a spacer. */
.sd-site-header__nav {
  margin-inline-start: auto;
  flex-wrap: wrap;
  row-gap: 8px;
  min-width: 0;
}

.sd-site-header__link {
  text-decoration: none;
}

.sd-site-header__actions {
  flex: 0 0 auto;
  gap: 18px;
}

.sd-site-header__lang {
  gap: 6px;
  flex: 0 0 auto;
}

.sd-site-header__lang a,
.sd-site-header__lang span {
  text-decoration: none;
}

/* With no nav present the actions still sit right, because they inherit the
   auto margin the nav would have carried. */
.sd-site-header__bar:not(:has(.sd-site-header__nav)) .sd-site-header__actions {
  margin-inline-start: auto;
}

/* ---------------------------------------------------------------------- hero */
.sd-hero {
  display: flex;
  overflow: hidden;
}

.sd-hero__media {
  position: absolute;
  inset: 0;
  /* Below the section's ::after, which paints the scrim, which is below the
     content. Three layers, one stacking context, no z-index arms race. */
  z-index: 0;
}

/* Two classes, not one: Elementor's own `.elementor img { height: auto }` is a
   class plus a type selector, so a single class loses to it and the backdrop
   fell back to its natural aspect — only the top of each photo showed. */
.sd-hero__media > .sd-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sd-hero__body {
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* The staggered cadence: each child waits one interval longer than the last.
   Purely declarative, so adding or removing a child re-sequences the rest. */
.sd-hero__body > * {
  --sd-anim-delay: calc(var(--sd-stagger, 80ms) * 0);
}

.sd-hero__body > :nth-child(2) {
  --sd-anim-delay: calc(var(--sd-stagger, 80ms) * 1);
}

.sd-hero__body > :nth-child(3) {
  --sd-anim-delay: calc(var(--sd-stagger, 80ms) * 2);
}

.sd-hero__body > :nth-child(4) {
  --sd-anim-delay: calc(var(--sd-stagger, 80ms) * 3);
}

.sd-hero__body > :nth-child(5) {
  --sd-anim-delay: calc(var(--sd-stagger, 80ms) * 4);
}

.sd-hero__body > :nth-child(6) {
  --sd-anim-delay: calc(var(--sd-stagger, 80ms) * 5);
}

.sd-hero__actions {
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .sd-hero {
    --sd-hero-min-h: 60vh;
  }
}
/* ----------------------------------------------------------------- image band */
.sd-image-band {
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.sd-image-band__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Separation above a full-bleed band must be margin, not padding: the photo is
   positioned against the section's padding box and would paint straight over
   any padding put there. */
.sd-image-band {
  margin-block-start: 120px;
}

.sd-image-band__media > .sd-image-band__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sd-image-band__row {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
}

.sd-image-band__credit {
  flex: 0 0 auto;
}

/* ------------------------------------------------------------------ cta band */
.sd-cta-band__panel {
  overflow: hidden;
}

/* ------------------------------------------------------------------ split */
.sd-split-media__media {
  min-width: 0;
}

.sd-split-media__img {
  width: 100%;
  height: auto;
  display: block;
}

/* ------------------------------------------------------------ feature grid */
.sd-feature-grid__grid {
  list-style: none;
  margin: 0;
  /* A UA padding-left of 40px on ol/ul leaves the first cell inset from the
     grid's own left hairline, with the rule visibly overhanging it. */
  padding: 0;
}

/* ------------------------------------------------------------- logo strip */
.sd-logo-strip__grid {
  list-style: none;
  margin: 0;
  /* A UA padding-left of 40px on ol/ul leaves the first cell inset from the
     grid's own left hairline, with the rule visibly overhanging it. */
  padding: 0;
}

.sd-logo-strip__link {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  transition: transform var(--sd-dur-fast) var(--sd-ease-out), filter var(--sd-dur-fast) var(--sd-ease-out);
}
.sd-logo-strip__link:hover {
  transform: translateY(-3px) scale(1.02);
}

.sd-logo-strip__logo img {
  display: block;
  max-width: 100%;
  height: auto;
  transition: filter var(--sd-dur-fast) var(--sd-ease-out);
}
.sd-logo-strip__link:hover .sd-logo-strip__logo img {
  filter: brightness(1.08) contrast(1.04);
}

.sd-logo-strip__lockup img {
  display: block;
  margin-inline: auto;
}

/* ------------------------------------------------------------ deliverables */
.sd-deliverables__list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Rows carry a bottom rule each; without a top rule the first row has no
     line above it and the table looks like it starts mid-way. */
  border-block-start: 1px solid var(--sd-rule);
}

.sd-deliverables__row {
  display: grid;
  grid-template-columns: var(--sd-row-template, 90px minmax(0, 1fr) 200px 130px);
  align-items: baseline;
  border-block-end: 1px solid var(--sd-rule);
  min-width: 0;
}

.sd-deliverables__status {
  text-transform: uppercase;
}

.sd-deliverables__code,
.sd-deliverables__title,
.sd-deliverables__kind,
.sd-deliverables__status {
  min-width: 0;
}

.sd-deliverables__link {
  color: inherit;
  text-decoration: inherit;
}

/* Four tracks in a phone's width is unreadable, so each row becomes a stack.
   A fixed breakpoint rather than a control: a container query cannot take its
   threshold from a custom property, and a control that silently does nothing is
   worse than no control. */
@media (max-width: 900px) {
  .sd-deliverables__row {
    /* The real declaration, not the custom property: the control sets the
       property with Elementor's specificity, which a class rule cannot beat. */
    grid-template-columns: minmax(0, 1fr);
  }
  .sd-deliverables__status {
    text-align: start !important;
  }
}
/* ------------------------------------------------------------------- events */
/* The note is its own line under the button, not a trailing run of the body. */
.sd-events__meta {
  display: block;
  max-width: 267px;
}

.sd-events__lead,
.sd-events__aside {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}

.sd-events__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* -------------------------------------------------------------------- footer */
/* The reference separates the footer from the page above it. */
.sd-footer {
  margin-block-start: 96px;
}

.sd-footer__grid {
  display: grid;
  grid-template-columns: var(--sd-row-template, repeat(4, minmax(0, 1fr)));
  min-width: 0;
}

.sd-footer__brand,
.sd-footer__column {
  min-width: 0;
}

/* The brand blurb sits well clear of the logo; the stack's gap alone is 0 here
   because the footer composes these children directly. */
.sd-footer__logo + .sd-paragraph,
.sd-footer__logo + * {
  margin-block-start: 26px;
}

.sd-footer__head {
  margin-block-end: 6px;
}

.sd-footer__column {
  display: flex;
  flex-direction: column;
}

.sd-footer__link,
.sd-footer__plain {
  text-decoration: none;
  display: block;
}

.sd-footer__bottom {
  border-block-start: 1px solid var(--sd-footer-rule);
  margin-block-start: 20px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.sd-footer__logo img {
  display: block;
}

@media (max-width: 900px) {
  .sd-footer__grid {
    /* The real declaration, not the custom property: the control sets the
       property with Elementor's specificity, which a class rule cannot beat. */
    grid-template-columns: minmax(0, 1fr);
  }
}
/* --------------------------------------------------------------- stat panel */
.sd-stat-panel__row {
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}

.sd-stat-panel__ring {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 1;
}

.sd-stat-panel__svg {
  display: block;
  width: 100%;
  height: auto;
  /* The source rotates the ring so the sweep starts at twelve o'clock. */
  transform: rotate(-90deg);
}

.sd-stat-panel__arc {
  animation-name: sdArc;
  animation-timing-function: var(--sd-ease-brand);
  animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {
  .sd-stat-panel__arc {
    animation: none;
  }
}
.sd-stat-panel__centre {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.sd-stat-panel__legend {
  min-width: 280px;
  flex: 1 1 280px;
}

/* -------------------------------------------------------------- context map */
.sd-context-map__media,
.sd-context-map__aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.sd-context-map__canvas {
  width: 100%;
}

.sd-context-map__canvas svg {
  display: block;
  margin-inline: auto;
}

.sd-context-map__land {
  fill: var(--sd-map-land, #313130);
  stroke: var(--sd-map-land, #313130);
  stroke-width: 0.5;
}

.sd-context-map__neighbour {
  fill: var(--sd-map-neighbour, #E4E4E3);
  stroke: var(--sd-surface, #F0F0F0);
  stroke-width: 1;
}

.sd-context-map__marker {
  cursor: pointer;
}

.sd-context-map__dot {
  fill: var(--sd-map-marker, #F0F0F0);
  stroke: var(--sd-map-land, #313130);
  stroke-width: 1.5;
  transition: fill var(--sd-transition, 200ms) linear, r var(--sd-transition, 200ms) linear;
}

.sd-context-map__num {
  font-family: var(--sd-font-sans);
  font-size: 13px;
  font-weight: 600;
  fill: var(--sd-map-land, #313130);
  pointer-events: none;
}

.sd-context-map__marker.is-selected .sd-context-map__dot {
  fill: var(--sd-map-marker-active, #D42121);
  stroke: var(--sd-map-marker-active, #D42121);
  r: 18;
}

.sd-context-map__marker.is-selected .sd-context-map__num {
  fill: var(--sd-white, #fff);
}

.sd-context-map__chips {
  flex-wrap: wrap;
  margin-block-end: 36px;
}

.sd-context-map__fact {
  min-width: 0;
}

.sd-context-map__fact dt,
.sd-context-map__fact dd {
  margin: 0;
}

.sd-context-map__facts {
  margin: 0;
  /* Three across, the fourth wrapping into a fresh row against the rule
     colour showing through a 1px gap — the hairline is the gap, not a border. */
  grid-template-columns: var(--sd-facts-template, repeat(3, minmax(0, 1fr)));
  gap: 1px;
  background: var(--sd-rule);
}

/* The panel composes its children directly, so no per-widget gap control
   applies and the stack would otherwise collapse to nothing. */
.sd-context-map__detail {
  gap: 0;
}

.sd-context-map__kicker + .sd-context-map__title {
  margin-block-start: 12px;
}

.sd-context-map__title + .sd-paragraph {
  margin-block-start: 18px;
}

.sd-context-map__facts {
  margin-block-start: 34px;
}

.sd-context-map__fact dd {
  margin-block-start: 8px;
}

.sd-context-map__fact dt {
  font-weight: 400;
}

@media (max-width: 700px) {
  .sd-context-map__facts {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* -------------------------------------------------------------------- matrix */
.sd-matrix__main,
.sd-matrix__aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* The panel's internal rhythm. Organisms compose these children directly, so no
   per-widget gap control applies and the stack would otherwise collapse to 0. */
.sd-matrix__detail {
  gap: 0;
}

.sd-matrix__pair + .sd-matrix__headline {
  margin-block-start: 12px;
}

.sd-matrix__headline + .sd-matrix__note {
  margin-block-start: 16px;
}

.sd-matrix__note + .sd-matrix__slot,
.sd-matrix__headline + .sd-matrix__slot {
  margin-block-start: 28px;
}

/* The table scrolls inside its own container. The page body must never scroll
   sideways because a table is wide. */
.sd-matrix__scroll {
  overflow-x: auto;
  max-width: 100%;
}

.sd-matrix__table {
  border-collapse: separate;
  border-spacing: 1px;
  width: 100%;
}

/* Themes and WordPress core both put a border on th/td. The rules here are the
   1px of table background showing through border-spacing — a cell border adds
   itself on both sides of that and turns a tight grid into an outlined table. */
.sd-matrix__table th,
.sd-matrix__table td {
  border: 0;
  border-radius: 0;
}

.sd-matrix__head,
.sd-matrix__column,
.sd-matrix__row-head {
  text-align: start;
  vertical-align: bottom;
  padding: 14px 16px;
  font-weight: 600;
}

.sd-matrix__head {
  width: 210px;
}

.sd-matrix__column {
  font-weight: 500;
  padding: 14px 12px;
}

.sd-matrix__row-head {
  font-weight: 500;
  padding: 18px 16px;
  vertical-align: middle;
}

.sd-matrix__td {
  padding: 0;
}

.sd-matrix__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 0;
  font: inherit;
  cursor: pointer;
  background: var(--sd-cell-bg, transparent);
  color: var(--sd-cell-fg, inherit);
  -webkit-appearance: none;
  appearance: none;
}

.sd-matrix__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  gap: 24px;
}

.sd-matrix__legend .sd-swatch__head {
  gap: 8px;
}

.sd-matrix__slot {
  display: flex;
  align-items: flex-end;
  padding: 16px;
  border: 1px solid var(--sd-rule);
  overflow: hidden;
}

.sd-matrix__slot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------------- faq */
.sd-faq__row {
  border-block-end: 1px solid var(--sd-rule);
}

.sd-faq__heading {
  margin: 0;
  font: inherit;
}

.sd-faq__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  list-style: none;
}

/* Safari draws its own triangle unless this is suppressed. */
.sd-faq__summary::-webkit-details-marker,
.sd-faq__summary::marker {
  display: none;
  content: "";
}

.sd-faq__marker {
  flex: 0 0 auto;
  line-height: 1;
  transition: transform var(--sd-transition, 200ms) var(--sd-ease-brand);
}

.sd-faq__row[open] .sd-faq__marker {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .sd-faq__marker {
    transition: none;
  }
}
.sd-faq__answer > :first-child {
  margin-top: 0;
}

.sd-faq__answer > :last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------- pricing */
.sd-pricing__features {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sd-pricing__summary {
  margin: 0;
}

/* The call to action sits at the foot of every plan, so plans of unequal
   feature counts still line their buttons up. */
.sd-pricing__cta {
  margin-block-start: auto;
}

/* ------------------------------------------------------------- testimonial */
.sd-testimonial__cell {
  margin: 0;
}

.sd-testimonial__quote {
  margin: 0;
}

.sd-testimonial__quote p {
  margin: 0;
}

/* The attribution sits at the foot of the cell, so quotes of unequal length
   still align their names. */
.sd-testimonial__attribution {
  margin-block-start: auto;
  align-items: center;
}

.sd-testimonial__portrait {
  flex: 0 0 auto;
}

.sd-testimonial__portrait img {
  display: block;
}

.sd-testimonial__name {
  font-style: normal;
}

/* ============================ redesign additions ========================== */
/* --------------------------------------------------------------- page nav */
.sd-page-nav__link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  text-decoration: none;
  color: inherit;
}

.sd-page-nav__target {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  min-width: 0;
}

/* The arrow is part of the title's line, so it takes the title's size. */
.sd-page-nav__arrow {
  font-size: 1em;
}

.sd-page-nav__label,
.sd-page-nav__title {
  display: inline-block;
}

.sd-page-nav__arrow {
  flex: 0 0 auto;
  transition: transform var(--sd-transition, 200ms) var(--sd-ease-brand);
}

/* The arrow leans toward its destination on hover — a nudge, not a bounce. */
.sd-page-nav__link--forward:hover .sd-page-nav__arrow {
  transform: translateX(0.15em);
}

.sd-page-nav__link--back:hover .sd-page-nav__arrow {
  transform: translateX(-0.15em);
}

@media (prefers-reduced-motion: reduce) {
  .sd-page-nav__arrow {
    transition: none;
    transform: none !important;
  }
}
/* ------------------------------------------------------------- page index */
.sd-page-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sd-page-index__link {
  display: grid;
  grid-template-columns: var(--sd-row-template, 80px minmax(0, 1fr) minmax(0, 1fr) 40px);
  align-items: center;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.sd-page-index__ordinal,
.sd-page-index__title,
.sd-page-index__body,
.sd-page-index__arrow {
  min-width: 0;
}

.sd-page-index__arrow {
  transition: transform var(--sd-transition, 200ms) var(--sd-ease-brand);
}

.sd-page-index__link:hover .sd-page-index__arrow {
  transform: translateX(0.2em);
}

@media (prefers-reduced-motion: reduce) {
  .sd-page-index__arrow {
    transition: none;
    transform: none !important;
  }
}
/* Four tracks is unreadable on a phone: stack, and drop the arrow, which was
   only ever an affordance the whole row already communicates. */
@media (max-width: 860px) {
  .sd-page-index__link {
    /* The real declaration, not the custom property: the control sets the
       property with Elementor's specificity, which a class rule cannot beat. */
    grid-template-columns: minmax(0, 1fr);
  }
  .sd-page-index__arrow {
    display: none;
  }
}
/* -------------------------------------------------------------- media grid */
.sd-media-grid__grid {
  display: grid;
  min-width: 0;
}

.sd-media-grid__figure {
  margin: 0;
  min-width: 0;
}

.sd-media-grid__slot {
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border: 1px solid var(--sd-rule);
}

/* An image fills its slot; a placeholder label sits in the bottom corner. */
.sd-media-grid__slot--image {
  padding: 0 !important;
}

.sd-media-grid__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sd-media-grid__placeholder,
.sd-media-grid__caption {
  display: block;
}

.sd-media-grid__link {
  display: block;
}

/* ------------------------------------------------- deliverables, redesigned */
.sd-deliverables__filters {
  flex-wrap: wrap;
  gap: 10px;
  /* 28px below the section rule, 32px above the table. */
  margin-block: 28px 32px;
}

.sd-deliverables__filter {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding-inline: 18px;
  border: 1px solid var(--sd-rule-mid);
  border-radius: 20px;
  background: transparent;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.sd-deliverables__main {
  display: block;
  min-width: 0;
}

.sd-deliverables__title,
.sd-deliverables__body {
  display: block;
}

.sd-deliverables__body {
  margin-block-start: 8px;
}

.sd-deliverables__note {
  margin-block: 26px 0;
}

/* --------------------------------------------------- events, redesigned date */
.sd-events__datetime {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  min-width: 0;
}

.sd-events__date,
.sd-events__place {
  display: inline-block;
}

/* An unlinked page-nav row is content without the affordance: no pointer, no
   hover tint, nothing that suggests it can be clicked. */
.sd-page-nav__link--inert {
  cursor: default;
  background: none !important;
}

.sd-page-nav__link--inert .sd-page-nav__arrow {
  opacity: 0.4;
}

/* A brand that never disappears: when no logo image is set, the site name shows
   as a wordmark rather than leaving an invisible gap in the header. */
.sd-site-header__wordmark,
.sd-footer__wordmark {
  display: inline-block;
  white-space: nowrap;
}

/* ------------------------------------------------------------ contact modal */
.sd-contact-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 32px);
  background: rgba(20, 18, 18, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: sdFadeIn 0.2s ease-out;
}
.sd-contact-modal[hidden] {
  display: none !important;
}

.sd-contact-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--sd-surface, #F0F0F0);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--sd-rule, #D7D7D6);
  color: var(--sd-ink, #313130);
  font-family: var(--sd-font-sans, Arimo, Helvetica, Arial, sans-serif);
  box-sizing: border-box;
  animation: sdModalIn 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sd-contact-modal__close {
  position: absolute;
  top: clamp(18px, 2.5vw, 26px);
  right: clamp(18px, 2.5vw, 26px);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--sd-rule, #D7D7D6);
  background: var(--sd-white, #FFFFFF);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--sd-ink-deep, #262222);
  font-size: 18px;
  line-height: 1;
  transition: background 0.15s ease, transform 0.15s ease;
}
.sd-contact-modal__close:hover {
  background: var(--sd-surface-alt, #E9E9E8);
  transform: rotate(90deg);
}

.sd-contact-modal__header {
  margin-bottom: 20px;
}

.sd-contact-modal__eyebrow {
  display: block;
  font-family: var(--sd-font-mono, ui-monospace, Menlo, monospace);
  font-size: var(--sd-size-caption, 12px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-muted-soft, #8C8B8B);
  font-weight: 600;
  margin-bottom: 6px;
}

.sd-contact-modal__title {
  margin: 0;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--sd-ink-deep, #262222);
  line-height: 1.15;
}

.sd-contact-modal__card {
  background: var(--sd-surface-alt, #E9E9E8);
  border: 1px solid var(--sd-rule, #D7D7D6);
  border-radius: 14px;
  padding: 14px 18px;
  margin-top: 20px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sd-ink-body, #4A4A48);
}

.sd-contact-modal__card-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.sd-contact-modal__card-row strong {
  color: var(--sd-ink-deep, #262222);
  font-weight: 600;
  flex-shrink: 0;
}
.sd-contact-modal__card-row a {
  color: var(--sd-ink-deep, #262222);
  text-decoration: underline;
  font-weight: 600;
}
.sd-contact-modal__card-row a:hover {
  color: var(--sd-accent, #D42121);
}

.sd-contact-modal__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sd-contact-modal__form[hidden] {
  display: none !important;
}

.sd-contact-modal__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sd-contact-modal__label {
  font-size: var(--sd-size-label, 13px);
  font-weight: 600;
  color: var(--sd-ink, #313130);
}

.sd-contact-modal__input,
.sd-contact-modal__select,
.sd-contact-modal__textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--sd-white, #FFFFFF);
  border: 1px solid var(--sd-rule, #D7D7D6);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--sd-ink-deep, #262222);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sd-contact-modal__input:focus,
.sd-contact-modal__select:focus,
.sd-contact-modal__textarea:focus {
  border-color: #F5A623;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.2);
}

.sd-contact-modal__textarea {
  resize: vertical;
  min-height: 96px;
}

.sd-contact-modal__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  margin-top: 8px;
  border-radius: 25px;
  border: 0;
  background: var(--sd-gradient, linear-gradient(105.5deg, #F5A623 0%, #F7C948 50%, #FADB5F 100%));
  color: var(--sd-ink-deep, #262222);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: var(--sd-shadow-pill, inset -1px -1px 4px rgba(255, 255, 255, 0.25), inset 1px 1px 4px rgba(0, 0, 0, 0.1)), 0 4px 12px rgba(245, 166, 35, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sd-contact-modal__submit:hover {
  transform: translateY(-1px);
  box-shadow: var(--sd-shadow-pill, inset -1px -1px 4px rgba(255, 255, 255, 0.25), inset 1px 1px 4px rgba(0, 0, 0, 0.1)), 0 6px 16px rgba(245, 166, 35, 0.35);
}
.sd-contact-modal__submit:active {
  transform: translateY(0);
}

.sd-contact-modal__success {
  background: #E6F4EA;
  border: 1px solid #B7E1CD;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  color: #137333;
  animation: sdRise 0.4s ease-out;
}
.sd-contact-modal__success[hidden] {
  display: none !important;
}

.sd-contact-modal__success-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #137333;
  color: #fff;
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.sd-contact-modal__success-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  color: #137333;
}

.sd-contact-modal__success-text {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.5;
  color: #1e4620;
}

.sd-contact-modal__close-btn {
  height: 40px;
  padding: 0 24px;
  border-radius: 20px;
  border: 0;
  background: #137333;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

body.sd-modal-open {
  overflow: hidden;
}

@keyframes sdFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes sdModalIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
/* ------------------------------------------------------------- contact hub */
.sd-contact-hub .sd-contact-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
.sd-contact-hub .sd-contact-hub__channels {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.sd-contact-hub .sd-contact-hub__cards {
  display: grid;
  gap: 16px;
}
.sd-contact-hub .sd-channel-card {
  background: var(--sd-white, #FFFFFF);
  border: 1px solid var(--sd-rule, #D7D7D6);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}
.sd-contact-hub .sd-channel-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
  border-color: var(--sd-ink, #313130);
}
.sd-contact-hub .sd-channel-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.sd-contact-hub .sd-channel-card__tag {
  font-size: var(--sd-size-caption, 12px);
  font-family: var(--sd-font-mono, ui-monospace, Menlo, monospace);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sd-muted-soft, #8C8B8B);
  font-weight: 600;
}
.sd-contact-hub .sd-channel-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--sd-surface-alt, #E9E9E8);
  font-size: 12px;
  font-weight: 600;
  color: var(--sd-ink, #313130);
}
.sd-contact-hub .sd-channel-card__link {
  font-size: 20px;
  font-weight: 700;
  color: var(--sd-ink-deep, #262222);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.sd-contact-hub .sd-channel-card__link:hover {
  color: var(--sd-accent, #D42121);
}
.sd-contact-hub .sd-channel-card__link .sd-channel-card__arrow {
  font-size: 16px;
  color: var(--sd-accent, #D42121);
  transition: transform 0.15s ease;
}
.sd-contact-hub .sd-channel-card__link:hover .sd-channel-card__arrow {
  transform: translateX(4px);
}
.sd-contact-hub .sd-channel-card__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sd-ink-body, #4A4A48);
}
.sd-contact-hub .sd-channel-card__venue {
  display: flex;
  gap: 16px;
  align-items: center;
}
.sd-contact-hub .sd-channel-card__venue-thumb {
  width: 84px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--sd-rule, #D7D7D6);
  background: var(--sd-surface-alt, #E9E9E8);
}
.sd-contact-hub .sd-channel-card__venue-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sd-contact-hub .sd-channel-card__venue-title {
  font-size: 16px;
  color: var(--sd-ink-deep, #262222);
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
}
.sd-contact-hub .sd-channel-card__venue-addr {
  font-size: 14px;
  color: var(--sd-ink-body, #4A4A48);
  display: block;
}
.sd-contact-hub .sd-channel-card__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.sd-contact-hub .sd-channel-card__head strong {
  font-size: 16px;
  color: var(--sd-ink-deep, #262222);
  font-weight: 600;
}
.sd-contact-hub .sd-channel-card__head span {
  font-size: 13px;
  color: var(--sd-muted-soft, #8C8B8B);
}
.sd-contact-hub .sd-contact-hub__hours {
  background: var(--sd-surface-alt, #E9E9E8);
  border: 1px solid var(--sd-rule, #D7D7D6);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--sd-ink-body, #4A4A48);
}
.sd-contact-hub .sd-contact-hub__hours .sd-contact-hub__hours-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #137333;
  flex-shrink: 0;
}
.sd-contact-hub .sd-contact-hub__hours strong {
  color: var(--sd-ink-deep, #262222);
}
.sd-contact-hub {
  /* Form Card */
}
.sd-contact-hub .sd-form-card {
  background: var(--sd-white, #FFFFFF);
  border: 1px solid var(--sd-rule, #D7D7D6);
  border-radius: 20px;
  padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}
.sd-contact-hub .sd-form-card__head {
  margin-bottom: 24px;
}
.sd-contact-hub .sd-form-card__eyebrow {
  font-family: var(--sd-font-mono, ui-monospace, Menlo, monospace);
  font-size: var(--sd-size-caption, 12px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sd-muted-soft, #8C8B8B);
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}
.sd-contact-hub .sd-form-card__title {
  margin: 0;
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--sd-ink-deep, #262222);
  line-height: 1.15;
}
.sd-contact-hub .sd-form-card__intro {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--sd-ink-body, #4A4A48);
}
.sd-contact-hub .sd-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.sd-contact-hub .sd-input-label {
  font-size: var(--sd-size-label, 13px);
  font-weight: 600;
  color: var(--sd-ink, #313130);
}
.sd-contact-hub .sd-input-field {
  width: 100%;
  box-sizing: border-box;
  background: var(--sd-white, #FFFFFF);
  border: 1px solid var(--sd-rule, #D7D7D6);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--sd-ink-deep, #262222);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.sd-contact-hub .sd-input-field:focus {
  border-color: var(--sd-ink, #313130);
  box-shadow: 0 0 0 3px rgba(49, 49, 48, 0.12);
}
.sd-contact-hub .sd-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.sd-contact-hub .sd-chip-btn {
  border: 1px solid var(--sd-rule, #D7D7D6);
  background: var(--sd-white, #FFFFFF);
  color: var(--sd-ink, #313130);
  border-radius: 20px;
  height: 34px;
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: all 0.15s ease;
}
.sd-contact-hub .sd-chip-btn:hover {
  border-color: var(--sd-ink, #313130);
}
.sd-contact-hub .sd-chip-btn.active {
  background: var(--sd-ink, #313130);
  color: var(--sd-white, #FFFFFF);
  border-color: var(--sd-ink, #313130);
}
.sd-contact-hub .sd-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  border-radius: 26px;
  border: 0;
  background: var(--sd-gradient, linear-gradient(105.5deg, #F5A623 0%, #F7C948 50%, #FADB5F 100%));
  color: var(--sd-ink-deep, #262222);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: var(--sd-shadow-pill, inset -1px -1px 4px rgba(255, 255, 255, 0.25), inset 1px 1px 4px rgba(0, 0, 0, 0.1)), 0 4px 16px rgba(245, 166, 35, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.sd-contact-hub .sd-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--sd-shadow-pill, inset -1px -1px 4px rgba(255, 255, 255, 0.25), inset 1px 1px 4px rgba(0, 0, 0, 0.1)), 0 8px 24px rgba(245, 166, 35, 0.36);
}
.sd-contact-hub .sd-submit-btn:active {
  transform: translateY(0);
}
.sd-contact-hub .sd-success-banner {
  background: #E6F4EA;
  border: 1px solid #B7E1CD;
  border-radius: 16px;
  padding: 40px 28px;
  text-align: center;
  color: #137333;
  display: none;
  animation: sdRise 0.4s ease-out both;
}
.sd-contact-hub .sd-success-banner.visible {
  display: block;
}