/**
 * Shaw Tower — Block Styles
 * ============================================================================
 *
 * Per-block CSS for the new design system. Loads after design-system.css, which
 * owns the tokens, reset, surfaces, type roles and container.
 */

/* ==========================================================================
   Section Intro   (layout: stds_section_intro)
   Spec: block-specs/section-intro.md
   ========================================================================== */

.stds-section-intro {
  --_rule-w: clamp(14px, calc(14px + 26 * var(--stds-fluid)), 40px);
  --_rule-h: clamp(1px, calc(1px + 1 * var(--stds-fluid)), 2px);
  --_rule-gap: clamp(10.5px, calc(10.5px + 11.5 * var(--stds-fluid)), 22px);
  --_rule-c: currentColor;

  --stds-flow-space: clamp(18.5px, calc(18.5px + 22.5 * var(--stds-fluid)), 41px);
}

.stds-section-intro__inner {
  position: relative;
  z-index: 2;
}

.stds-section-intro__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--_rule-gap);
}

.stds-section-intro__eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: var(--_rule-w);
  height: var(--_rule-h);
  background-color: var(--_rule-c);
}

.stds-section-intro__body {
  line-height: var(--stds-lh-body-loose);
}

/* 21 — (-1) - 5 = 17 and 59 */
.stds-section-intro .stds-section-intro__text > .stds-section-intro__body {
  margin-block-start: clamp(17px, calc(17px + 38.32 * var(--stds-fluid)), 55.32px);
}

.stds-section-intro__body > p + p {
  margin-block-start: var(--stds-space-md);
}

.stds-section-intro:not(.stds-surface--brand):not(.stds-surface--ink) {
  --_rule-c: var(--stds-c-terracotta);
  color: var(--stds-c-black);
}

.stds-section-intro:not(.stds-surface--brand):not(.stds-surface--ink) .stds-section-intro__heading {
  color: var(--stds-c-terracotta);
}

/* --- Section seam ---------------------------------------------------------- */

.stds-section-intro--rule-top {
  position: relative;
  --stds-section-pt: clamp(65.5px, calc(65.5px + 131 * var(--stds-fluid)), 196.5px);
}

.stds-section-intro--rule-top::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  /* Container width from OUTSIDE the container — hence the hoisted tokens. */
  width: min(calc(100% - 2 * var(--stds-gutter)), var(--stds-container-max));
  height: clamp(0.35px, calc(0.35px + 0.15 * var(--stds-fluid)), 0.5px);
  background-color: var(--stds-c-black);
}

/* --- Media ---------------------------------------------------------------- */

.stds-section-intro__media {
  margin: 0;
}

.stds-section-intro--pulled .stds-section-intro__media {
  position: relative;
  z-index: 1;
}

.stds-section-intro__image {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1023.98px) {
  .stds-section-intro--has-media .stds-section-intro__inner {
    display: flex;
    flex-direction: column;
  }

  .stds-section-intro__media {
    order: -1;
    width: var(--stds-intro-media-w-m, 74.23%);
    margin-inline: auto;
    margin-block-start: calc(-1 * var(--stds-intro-pull-m, 0px));
    margin-block-end: 50px;
  }
}

@media (min-width: 1024px) {
  .stds-section-intro__inner {
    --_measure: 66.09%;   /* 1027 / 1554 */
  }

  .stds-section-intro--measure-narrow .stds-section-intro__inner { --_measure: 43.5%; }
  .stds-section-intro--measure-full .stds-section-intro__inner { --_measure: 100%; }

  .stds-section-intro__text {
    max-width: var(--_measure);
  }

  .stds-section-intro--has-media .stds-section-intro__inner {
    display: grid;
    grid-template-columns: var(--_measure) 1fr var(--stds-intro-media-w, 49.03%);
    align-items: start;
  }

  .stds-section-intro--has-media .stds-section-intro__text {
    grid-column: 1;
    max-width: none;
  }

  .stds-section-intro__heading {
    width: var(--stds-intro-heading-w, auto);
  }

  .stds-section-intro--has-media .stds-section-intro__media {
    grid-column: 3;
  }

  .stds-section-intro--media-left.stds-section-intro--has-media .stds-section-intro__inner {
    grid-template-columns: var(--stds-intro-media-w, 49.03%) 1fr var(--_measure);
  }

  .stds-section-intro--media-left.stds-section-intro--has-media .stds-section-intro__text { grid-column: 3; }
  .stds-section-intro--media-left.stds-section-intro--has-media .stds-section-intro__media { grid-column: 1; }

  .stds-section-intro__media {
    margin-block-start: calc(-1 * var(--stds-intro-pull, 0px));
  }

}

/* ==========================================================================
   Among Equals   (layout: stds_among_equals)
   Spec: block-specs/among-equals.md
   ========================================================================== */

/* --- Section spacing ------------------------------------------------------- */

.stds-among {
  --stds-section-pt: clamp(
    50px,
    calc(50px + 57.74 * var(--stds-fluid)),
    107.74px
  );
  --stds-section-pb: clamp(93px, calc(93px + 107 * var(--stds-fluid)), 200px);
}

/* --- Lockup: "1" + superscript "ST" + "AMONG EQUALS" ----------------------- */


.stds-among__lockup {
  display: flex;
  flex-direction: column; /* mobile: two lines */
  align-items: center;
  row-gap: 0; /* baselines 42px apart; line-height 1 covers it */
  font-family: var(--stds-font-display);
  text-align: center;
}

.stds-among__lead {
  position: relative;
  display: inline-block;
  font-style: italic;
  font-size: clamp(110px, calc(110px + 90 * var(--stds-fluid)), 200px);
  line-height: 1;
}

.stds-among__suffix {
  position: absolute;
  left: 100%;
  top: 0.655em;
  font-size: 0.275em;
  font-style: normal;
  line-height: 1;
}

@media (min-width: 1024px) {
  /* desktop: single line, numeral and title on one baseline, near-touching */
  .stds-among__lockup {
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    column-gap: 2px;
  }
}

/* --- Intro ---------------------------------------------------------------- */

.stds-among__intro {
  max-width: 1137px;
  margin-inline: auto;
  text-align: center;
}

@media (max-width: 767px) {
  .stds-among__intro {
    padding: 0 15px;
  }
}

.stds-among__intro > p + p {
  margin-block-start: var(--stds-space-md);
}

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

.stds-among__cards {
  --stds-flow-space: clamp(50px, calc(50px + 35 * var(--stds-fluid)), 85px);

  margin: 0;
  padding: 0;
  list-style: none;
}

/* The <li> is the slide/grid item; the card is the bordered box inside it.
   Never merge them — slick's `.slick-initialized .slick-slide { display: block }`
   is 0-2-0 and would beat the card's `display: flex`. */


.stds-among__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-block-start: clamp(45px, calc(45px + 34 * var(--stds-fluid)), 79px);
  padding-block-end: clamp(53px, calc(53px + 3 * var(--stds-fluid)), 56px);
  padding-inline: clamp(19px, calc(19px + 17 * var(--stds-fluid)), 36px);
  border: 0.5px solid currentColor;
}


.stds-among__icon {
  display: block;
  height: clamp(57px, calc(57px + 19 * var(--stds-fluid)), 76px);
  width: fit-content;
  margin-block-end: clamp(25px, calc(25px + 19 * var(--stds-fluid)), 44px);
}

.stds-among__icon svg {
  display: block;
  height: 100%;
  width: auto; /* natural aspect from the viewBox */
}

.stds-among__icon svg [stroke]:not([stroke="none"]) {
  stroke: currentColor;
}

.stds-among__icon svg [fill]:not([fill="none"]) {
  fill: currentColor;
}

.stds-among__card-body {
  margin-block-start: clamp(10px, calc(10px + 14 * var(--stds-fluid)), 24px);
}

.stds-among__card-body > p + p {
  margin-block-start: var(--stds-space-md);
}

/* --- The 4 / 2 / 1 ladder ------------------------------------------------- */

@media (min-width: 1240px) {
  .stds-among__cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--stds-gap-grid);
  }
}

/* Whole slider range — slick owns horizontal layout from here down. */
@media (max-width: 1239.98px) {
  /* Dots sit 35px below the card: card ends y2008, dashes at y2043. */
  .stds-among__cards .slick-dots {
    margin-top: 35px;
  }
}

/* 2 — up range */
@media (min-width: 992px) and (max-width: 1239.98px) {
  .stds-among__slide {
    padding-inline: calc(var(--stds-gap-grid) / 2);
  }

  .stds-among .stds-among__cards .slick-list {
    margin-inline: calc(var(--stds-gap-grid) / -2);
  }
}

@media (max-width: 991.98px) {
  .stds-among__slide {
    padding-inline: 1.5px;
  }

  .stds-among__card {
    align-items: center;
    text-align: center;
  }
}

/* ==========================================================================
   Header & Navigation (V2)
   Spec: block-specs/header-navigation.md
   ========================================================================== */

.stds-header {
  --_logo-w: clamp(
    113.1px,
    calc(113.1px + 100.232 * var(--stds-fluid)),
    213.332px
  );

  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
}

/* --- Flow variant --------------------------------------------------------- */

.stds-header--flow {
  position: relative;
  min-height: calc(var(--_logo-w) * 1.52345);
}

.stds-header--flow .stds-header__bars > span {
  background-color: var(--stds-c-ink);
}

/* --- Logo ----------------------------------------------------------------- */

.stds-header__logo {
  position: absolute;
  inset-block-start: calc(var(--_logo-w) * -0.02344);
  inset-inline-start: calc(var(--_logo-w) * -0.1172);
  display: block;
  width: var(--_logo-w);
  line-height: 0;
}

.stds-header__logo img {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * No focus ring on the logo.
 *
 * The only thing drawing one is the global `.stds :focus-visible` rule
 * (design-system.css:400) — a 2px terracotta outline sitting 2px clear of the
 * box. This link is absolutely positioned with negative insets and
 * `line-height: 0`, so that box is the artwork's full bleed rather than the
 * mark you can actually see, and the ring lands out in the header instead of
 * hugging the logo. The element's resting outline-style is already `none`, so
 * there is nothing else to switch off.
 *
 * Trade-off, taken deliberately on request: keyboard users lose the visible
 * focus indicator on this one link (WCAG 2.4.7 Focus Visible). Every other
 * focusable element in the header keeps its ring. To put a keyboard-only
 * indicator back in a shape that suits the mark, replace `outline: none` with
 * `outline: 2px solid #f8fafc; outline-offset: -6px;` on the
 * :focus-visible selector alone.
 */
.stds .stds-header__logo:focus,
.stds .stds-header__logo:focus-visible {
  outline: none;
}

/* --- Hamburger ------------------------------------------------------------ */

.stds-header__toggle {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.stds-header.is-open .stds-header__toggle {
  opacity: 0;
  visibility: hidden;
}

.stds-header__bars {
  display: flex;
  flex-direction: column;
  gap: 4.6px;
  width: 16px;
}

/* Mobile bars are pure #FFFFFF in the XD; desktop uses #F8FAFC (set below). */
.stds-header__bars > span {
  display: block;
  height: 0.6px;
  background-color: #ffffff;
}

/* --- Panel ---------------------------------------------------------------- */

.stds-nav {
  --stds-nav-close-top: clamp(17px, calc(17px + 18.9 * var(--stds-fluid)), 35.9px);
  --stds-nav-close-size: clamp(15px, calc(15px + 13.3 * var(--stds-fluid)), 28.3px);
  --stds-nav-clearance: calc(var(--stds-nav-close-top) * 2 + var(--stds-nav-close-size));

  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: rgba(0, 0, 0, 0.9);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.stds-header.is-open .stds-nav {
  transform: translateX(0);
}

/* .stds-header::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
} */

/* --- Close --------------------------------------------------------------- */

.stds-nav__close {
  position: absolute;
  inset-block-start: var(--stds-nav-close-top);
  inset-inline-end: clamp(14px, calc(14px + 21.7 * var(--stds-fluid)), 35.7px);
  width: var(--stds-nav-close-size);
  height: var(--stds-nav-close-size);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.stds-nav__close-icon {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.stds-nav__close-icon > span {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: -20.71%;
  width: 141.421%;
  height: clamp(1px, calc(1px + 1 * var(--stds-fluid)), 2px);
  background-color: #f8fafc;
  transition: background-color 0.2s ease;
}

.stds-nav__close-icon > span:first-child {
  transform: rotate(45deg);
}
.stds-nav__close-icon > span:last-child {
  transform: rotate(-45deg);
}

/*
 * Close button hover.
 *
 * It had no hover state at all, so the one control that dismisses the panel
 * was the only thing in it that gave no feedback on approach.
 *
 * Reuses `--stds-link-hover` — the same token the nav items hover to, which
 * resolves to #BD603E here — so the icon answers in the menu's own language
 * and follows automatically if that token is ever retuned. Matching the
 * items' 0.2s ease for the same reason.
 *
 * The transition is declared on the bars rather than left to the `all` they
 * currently inherit: `all` would also animate the 45deg transforms if anything
 * ever touched them.
 */
.stds-nav__close:hover .stds-nav__close-icon > span,
.stds-nav__close:focus-visible .stds-nav__close-icon > span {
  background-color: var(--stds-link-hover);
}

/* --- List ----------------------------------------------------------------- */

.stds-nav__inner {
  display: flex;
  width: 100%;
}

.stds-nav__list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stds-nav .stds-nav__link {
  display: block;
  font-family: var(--stds-font-body);
  font-size: var(--stds-text-nav);
  letter-spacing: var(--stds-ls-nav);
  color: var(--stds-c-white);
  text-decoration: none;
  line-height: 1.2;
  padding-block: clamp(19.1px, calc(19.1px + 1.3 * var(--stds-fluid)), 20.4px);
  opacity: 0.5;
  /*
   * `color` has to be named here as well as `opacity`. The design system
   * already gives every link `transition: color 0.2s ease`
   * (design-system.css:392), but `transition` is a shorthand, so listing only
   * opacity replaces that declaration outright rather than adding to it — and
   * this selector wins, (0,2,0) against the (0,1,1) of
   * `.stds a:where(:any-link)`, since :where() contributes no specificity.
   *
   * The result was a hover whose two halves ran at different speeds: opacity
   * eased over 200ms while the colour snapped instantly.
   */
  transition: opacity 0.2s ease, color 0.2s ease;
  text-transform: uppercase;
}

.stds-nav .stds-nav__link:hover,
.stds-nav .stds-nav__link:focus-visible {
  opacity: 1;
}

.stds-nav .stds-nav__item.current-menu-item > .stds-nav__link,
.stds-nav .stds-nav__link[aria-current] {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.45em;
  text-decoration-thickness: 1px;
}

/*
 * CONNECT WITH US never takes the active underline.
 *
 * It is a custom menu link to `/#contact-us`, and WordPress ignores the
 * fragment when it decides which item is current — so on the front page the
 * URL collapses to `/`, matches, and the item is stamped `current-menu-item`
 * and `aria-current="page"`. It is an in-page jump, not a destination, so the
 * underline that marks "you are here" is simply wrong on it.
 *
 * Matched on href rather than the menu-item ID, which differs between local,
 * staging and production, and rather than an admin-added CSS class, which
 * would have to be re-added by hand in all three. The substring covers both
 * the root-relative form stored here and the absolute form other environments
 * emit.
 *
 * Each selector deliberately out-specifies the one it overrides — (0,5,0) and
 * (0,4,0) against (0,4,0) and (0,3,0) — so this holds on specificity alone and
 * needs neither !important nor a particular source order.
 */
.stds-nav .stds-nav__item.current-menu-item > .stds-nav__link[href*="#contact-us"],
.stds-nav .stds-nav__link[aria-current][href*="#contact-us"] {
  text-decoration: none;
  /*
   * ...and the brightening too. The active rule lifts opacity 0.5 -> 1, which
   * on the front page left this item reading as white next to nine dimmed
   * neighbours — the same false "you are here" as the underline, just in
   * weight rather than decoration. It is an in-page jump, so it is never
   * where you are, and it should sit at rest like every other item.
   */
  opacity: 0.5;
}

/*
 * Hover has to be restored explicitly on the front page.
 *
 * The rule above is (0,5,0) and the shared hover rule is only (0,3,0), so
 * neutralising the active state would otherwise take this item's hover with
 * it and leave the one link that can't look active also unable to respond.
 * These selectors carry the `.current-menu-item` / `[aria-current]` weight of
 * the rule they override, plus the pseudo-class, so they win on every page.
 */
.stds-nav .stds-nav__item.current-menu-item > .stds-nav__link[href*="#contact-us"]:hover,
.stds-nav .stds-nav__item.current-menu-item > .stds-nav__link[href*="#contact-us"]:focus-visible,
.stds-nav .stds-nav__link[aria-current][href*="#contact-us"]:hover,
.stds-nav .stds-nav__link[aria-current][href*="#contact-us"]:focus-visible {
  opacity: 1;
}

.stds-nav .stds-nav__link[href*="#contact-us"]:hover,
.stds-nav .stds-nav__link[href*="#contact-us"]:focus-visible {
  text-decoration: none;
}

/* --- Mobile layout (below 1024) ------------------------------------------ */

@media (max-width: 1023px) {
  .stds-nav {
    inset-inline-start: 0;
    padding-block: 52px 40px;
  }

  .stds-nav__inner {
    align-items: flex-start;
    justify-content: center;
    margin-block: auto;
  }

  .stds-nav__list {
    text-align: center;
  }
}

/* --- Desktop layout (1024+) ---------------------------------------------- */

@media (min-width: 1024px) {
  .stds-nav .stds-nav__item.current-menu-item > .stds-nav__link,
  .stds-nav .stds-nav__link[aria-current] {
    text-underline-offset: 0.1em;
  }

  .stds-header__toggle {
    width: 100px;
    height: 100px;
    background-color: rgba(35, 31, 32, 0.9);
  }

  .stds-header__bars > span {
    background-color: #f8fafc;
  }

  .stds-header__bars {
    gap: 10px;
    width: 40px;
  }

  /* Two bars on desktop, three on mobile — per the design. */
  .stds-header__bars > span:nth-child(3) {
    display: none;
  }

  .stds-nav {
    width: 358px;
    /* background-color: rgba(35, 31, 32, 0.95); */
    padding-block: var(--stds-nav-clearance) 38px;
  }

  .stds-nav::before {
    content: '';
    flex: 0 1 auto;
    height: calc(219.6px - var(--stds-nav-clearance));
    min-height: 0;
  }

  /* Never let the list itself absorb the shortfall — only the spacer may. */
  .stds-nav__inner {
    flex-shrink: 0;
    justify-content: flex-end;
  }

  .stds-header.is-open::after {
    opacity: 1;
  }

  .stds-nav__list {
    padding-inline-end: 36px;
    text-align: right;
  }
}

/* --- Motion preference ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .stds-nav,
  .stds-header::after {
    transition: none;
  }
}

/* ==========================================================================
   Footer (V2)
   Spec: block-specs/footer-navigation.md
   ========================================================================== */

.stds-footer {
  --_top: clamp(30px, calc(30px + 70 * var(--stds-fluid)), 100px);
  --_inset: clamp(30px, calc(30px + 35.61 * var(--stds-fluid)), 65.61px);
  position: relative;
  --stds-link: var(--stds-c-white);
  --stds-link-hover: var(--stds-c-white);
}

.stds-footer__inner {
  display: flex;
  flex-direction: column;
  min-height: 100px;
  padding-inline: var(--_inset);
  padding-block: 15.08px 16.09px;
}

/* --- Legal links ---------------------------------------------------------- */

.stds-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-self: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--stds-font-display);
  font-size: clamp(9px, calc(9px + 6 * var(--stds-fluid)), 15px);
  line-height: clamp(10px, calc(10px + 7 * var(--stds-fluid)), 17px);
}

.stds-footer__legal-item {
  display: flex;
}

.stds-footer__legal-item + .stds-footer__legal-item::before {
  content: "|";
  margin-inline: clamp(18px, calc(18px + 0.75 * var(--stds-fluid)), 18.75px);
}

/* 0-2-0: design-system.css has `.stds a:where(:any-link)` at 0-1-1. */
.stds-footer .stds-footer__legal-link {
  text-decoration: none;
  text-transform: uppercase;
}

/* --- Credits -------------------------------------------------------------- */

.stds-footer__credits {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin-block-start: 16.92px;
}

.stds-footer__credit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.stds-footer__credit--dev {
  gap: 6.99px;
}
.stds-footer__credit--managed {
  gap: 10px;
}

.stds-footer__credit-label {
  line-height: 1;
  color: var(--stds-c-white);
}

.stds-footer__credit-logo {
  display: block;
  max-width: 100%;
  height: auto;
}

.stds-footer__credit-logo > img {
  display: block;
  width: 100%;
  height: auto;
}

/* The two logos scale by different factors — 0.5366 and 0.5891. Do not merge. */
.stds-footer__credit--dev .stds-footer__credit-logo {
  width: clamp(160.99px, calc(160.99px + 139 * var(--stds-fluid)), 299.99px);
}

.stds-footer__credit--managed .stds-footer__credit-logo {
  width: clamp(99.96px, calc(99.96px + 69.72 * var(--stds-fluid)), 169.68px);
}

/* --- Back to top ---------------------------------------------------------- */

.stds-footer__top {
  position: absolute;
  inset-block-end: 100%;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--_top);
  height: var(--_top);
  padding: 0;
  border: 0;
  background-color: var(--stds-c-terracotta);
  color: var(--stds-c-white);
  cursor: pointer;
}

.stds-footer__top-icon {
  overflow: visible;
  width: clamp(9px, calc(9px + 11 * var(--stds-fluid)), 20px);
  height: clamp(6.75px, calc(6.75px + 8.25 * var(--stds-fluid)), 15px);
}

.stds-footer__top-icon > path {
  stroke-width: clamp(0.75px, calc(0.75px + 0.75 * var(--stds-fluid)), 1.5px);
  vector-effect: non-scaling-stroke;
}

/* --- Desktop layout (1024+) ----------------------------------------------- */

@media (min-width: 1024px) {
  .stds-footer {
    --_top: 100px;
  }

  .stds-footer__inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-block: 0;
    /* Credits stop 82.86px short of the button, which is itself flush right. */
    padding-inline-end: calc(var(--_top) + 82.86px);
  }

  .stds-footer__legal {
    align-self: auto;
  }

  .stds-footer__credits {
    justify-content: flex-end;
    width: auto;
    margin-block-start: 0;
    gap: 46.22px;
  }

  .stds-footer__credit {
    flex-direction: row;
    align-items: center;
  }

  .stds-footer__credit--dev {
    gap: 13.62px;
  }
  .stds-footer__credit--managed {
    gap: 14.31px;
  }

  .stds-footer__top {
    inset-block-start: 0;
    inset-block-end: auto;
  }

  .stds-footer__top-icon {
    width: 20px;
    height: 15px;
  }

  .stds-footer__top-icon > path {
    stroke-width: 1.5px;
  }
}

/* ==========================================================================
   Contact Tabs   (global chrome, no layout)
   Spec: block-specs/contact-tabs.md
   ========================================================================== */

.stds-contact-tabs {
  --_w: clamp(24px, calc(24px + 26 * var(--stds-fluid)), 50px);
  --_h: clamp(105px, calc(105px + 80 * var(--stds-fluid)), 185px);
  --_r: clamp(7px, calc(7px + 8 * var(--stds-fluid)), 15px);
  --_gap: clamp(12px, calc(12px + 8 * var(--stds-fluid)), 20px);
  --_top: clamp(45px, calc(45px + 205 * var(--stds-fluid)), 250px);
  --_size: clamp(12px, calc(12px + 10 * var(--stds-fluid)), 22px);

  --_plate: var(--stds-c-ink);
  --_ink: var(--stds-c-white);

  --stds-link: var(--_ink);
  --stds-link-hover: var(--_ink);

  position: fixed;
  inset-block-start: var(--_top);
  inset-inline-end: 0;
  /* Under the header (100) and its nav panel (110), over page content. */
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--_gap);
  visibility: hidden;
}

.stds-contact-tabs.is-over-ink {
  --_plate: var(--stds-c-sand);
  --_ink: var(--stds-c-black);
}

.stds-contact-tabs.is-visible {
  visibility: visible;
}

.stds-scroll-locked .stds-contact-tabs {
  visibility: hidden;
}

.stds .stds-contact-tabs__tab {
  display: grid;
  place-items: center;
  width: var(--_w);
  height: var(--_h);
  border-start-start-radius: var(--_r);
  border-end-start-radius: var(--_r);
  background-color: var(--_plate);
  transition: none;
}

.stds-contact-tabs__label {
  writing-mode: vertical-rl;
  rotate: 180deg;
  white-space: nowrap;
  font-size: var(--_size);
  letter-spacing: 0.05em;
}

/* ==========================================================================
   Hero Banner   (layout: stds_hero_banner)
   Spec: block-specs/hero-banner.md
   ========================================================================== */

.stds-hero {
  --stds-hero-focal-d: 50% 50%;
  --stds-hero-focal-m: 50% 50%;
  --stds-hero-scrim-d: 30%;
  --stds-hero-scrim-m: 30%;
  --stds-hero-scrim-c: #000000;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  color: var(--stds-c-white);
}

.stds-hero__media,
.stds-hero__scrim {
  position: absolute;
  inset: 0;
}

/* 0 — 2-0 on purpose */
.stds-hero .stds-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--stds-hero-focal-m);
}

.stds-hero__scrim {
  background-color: var(--stds-hero-scrim-c);
  opacity: var(--stds-hero-scrim-m);
}

/* --- Lockup --------------------------------------------------------------- */

.stds-hero__inner {
  position: relative;
  flex: 1;
  padding-inline: var(--stds-space-md);
}

.stds-hero__lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  text-align: center;
  text-wrap: balance;
}

.stds-hero__line {
  display: block;
  text-transform: uppercase;
}

.stds-hero--track-desktop .stds-hero__line--sm {
  letter-spacing: clamp(-1.2px, calc(0px + -1.2 * var(--stds-fluid)), 0px);
}

.stds-hero--track-mobile .stds-hero__line--sm {
  letter-spacing: clamp(-0.6px, calc(-0.6px + 0.6 * var(--stds-fluid)), 0px);
}

/* --- Left-aligned lockup — opt in with `stds-media-left-font` ------------- */
@media (min-width: 1024px) {
  .stds-hero.stds-media-left-font .stds-hero__inner {
    padding-inline: max(40px, calc((100% - 1590px) / 2 + 40px));
  }

  .stds-hero.stds-media-left-font .stds-hero__lockup {
    width: 700px;
    max-width: 100%;
  }
}

/* --- Stacked display line ------------------------------------------------- */

.stds-hero__glyphs {
  display: block;
}

.stds-hero__glyph {
  display: block;
}

@media (max-width: 1023.98px) {
  .stds-hero__line--stack {
    font-size: 70px;
    line-height: 58px;
    letter-spacing: -0.025em;
  }

  .stds-hero__line--stack .stds-hero__word {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* --- Caption -------------------------------------------------------------- */

.stds-hero__caption {
  position: absolute;
  inset-block-end: 20.27px;
  inset-inline-start: 27.19px;
  display: none;
  margin: 0;
}

/* --- Scroll cue ----------------------------------------------------------- */

.stds-hero__cue {
  position: absolute;
  inset-block-end: 13px;
  inset-inline-start: 50%;
  translate: -50% 0;
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--stds-c-white);
  cursor: pointer;
}

.stds-hero__cue-icon {
  overflow: visible;
  width: 12px;
  height: 9px;
}

.stds-hero__cue-icon > path {
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

@media (min-width: 1024px) {
  /* Must match the base rule's 0-2-0, or the mobile focal point wins here. */
  .stds-hero .stds-hero__image {
    object-position: var(--stds-hero-focal-d);
  }

  .stds-hero__cue {
    display: none;
  }

  .stds-hero__scrim {
    opacity: var(--stds-hero-scrim-d);
  }

  .stds-hero__caption {
    display: block;
  }

  .stds-hero__line--stack .stds-hero__glyphs {
    display: none;
  }
}

/* ==========================================================================
   Workspace Showcase   (layout: stds_workspace_showcase)
   Spec: block-specs/workspace-showcase.md
   ========================================================================== */

.stds-ws {
  --stds-ws-inset: clamp(32px, calc(35px + 148 * var(--stds-fluid)), 183px);
  --stds-ws-focal: 50% 50%;
  --stds-section-pt: 45px;
  --stds-section-pb: 0;
  overflow-x: clip;
}

.stds-ws__inner {
  display: flex;
  flex-direction: column;
}

.stds-ws__text {
  display: contents;
}

.stds-ws__lead {
  order: 1;
  max-width: min(
    100%,
    calc(var(--stds-ws-lead-w, 100%) + 2 * var(--stds-ws-inset))
  );
  padding-inline: var(--stds-ws-inset);
}

/*
 * The lead is a lighter grey than the body on a light surface — §4 "Lead
 * colour, light surface: #4E4E4E", against `#FFFFFF` on the brand surface that
 * Home and Office use. §6 Q3 calls the two greys on one page deliberate and is
 * why `--stds-c-grey-700` was added to design-system.css.
 *
 * The token landed but nothing ever consumed it, so the lead simply inherited
 * `--stds-fg` (#2E2E2D) from the surface — the mismatch reported on Community.
 *
 * Scoped by SURFACE rather than by `.stds-ws--community`, matching how the spec
 * states the rule and how `.stds-section-intro` above already scopes its own
 * light-surface colours. Home and Office are `brand`, so they keep inheriting
 * white and are untouched.
 */
.stds-ws:not(.stds-surface--brand):not(.stds-surface--ink) .stds-ws__lead {
  color: var(--stds-c-grey-700);
}

.stds-ws__collage {
  order: 2;
}

.stds-ws__body {
  order: 3;
  max-width: min(
    100%,
    calc(var(--stds-ws-body-w, 100%) + 2 * var(--stds-ws-inset))
  );
  margin-block-start: 40.25px;
  padding-inline: var(--stds-ws-inset);
  line-height: var(--stds-lh-body-loose);
}

.stds-ws__link {
  order: 4;
  align-self: center;
  display: inline-block;
  margin-block-start: 59px;
  padding-block-end: 7.91px;
  border-block-end: 1px solid currentColor;
  font-family: var(--stds-font-body);
  font-weight: var(--stds-fw-medium);
  font-size: clamp(12px, calc(12px + 10 * var(--stds-fluid)), 22px);
  line-height: 1;
  letter-spacing: clamp(0px, calc(0.36px + -0.36 * var(--stds-fluid)), 0.36px);
  color: var(--stds-c-terracotta);
  text-decoration: none;
  text-transform: uppercase;
}

/* 0-2-0: design-system.css sets `.stds a:where(:any-link)` at 0-1-1. */
.stds-ws .stds-ws__link:hover,
.stds-ws .stds-ws__link:focus-visible {
  color: var(--stds-link-hover);
}

/* --- Collage -------------------------------------------------------------- */

.stds-ws__collage {
  position: relative;
  block-size: 0;
  padding-block-start: var(--stds-ws-stage);
}

.stds-ws__slots {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stds-ws__slot {
  position: absolute;
  inset-block-start: var(--stds-ws-y);
  inset-inline-start: var(--stds-ws-x);
  inline-size: var(--stds-ws-w);
  aspect-ratio: var(--stds-ws-a);
  z-index: var(--stds-ws-z, 1);
}

/* 0-2-0: `.stds img` resets height to auto at 0-1-1 and would win. */
.stds-ws .stds-ws__image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--stds-ws-focal);
}

.stds-ws__ribbon {
  position: absolute;
  inset-block-start: var(--stds-ws-ry);
  inset-inline-start: var(--stds-ws-rx);
  inline-size: var(--stds-ws-rw);
  aspect-ratio: 138.265 / 226.255;
  mask-image: url("../images/ribbon-icon.svg");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

.stds-ws__ribbon--sand {
  background-color: var(--stds-c-sand);
}
.stds-ws__ribbon--terracotta {
  background-color: var(--stds-c-terracotta);
}

/* --- Arrangements: mobile ------------------------------------------------- */

.stds-ws--home {
  --stds-ws-stage: 77.992%;
  --stds-ws-lead-w: 45.6%;
}

.stds-ws--office {
  --stds-ws-stage: 79.019%;
  --stds-ws-lead-w: 66.133%;
  --stds-section-pb: 74.53px;
}

.stds-ws--community {
  --stds-ws-stage: 83.267%;
  --stds-ws-lead-w: 57.867%;
  --stds-ws-body-w: 81.333%;
  --stds-section-pb: 96.58px;
}

.stds-ws--home .stds-ws__collage {
  margin-block-start: 52.5px;
}
.stds-ws--office .stds-ws__collage {
  margin-block-start: 22.44px;
}
.stds-ws--community .stds-ws__collage {
  margin-block-start: 28.5px;
}

.stds-ws--home .stds-ws__ribbon {
  --stds-ws-rx: 30.4%;
  --stds-ws-ry: 22.566%;
  --stds-ws-rw: 36.869%;
}
.stds-ws--office .stds-ws__ribbon {
  --stds-ws-rx: 37.867%;
  --stds-ws-ry: 23.643%;
  --stds-ws-rw: 36.869%;
}
.stds-ws--community .stds-ws__ribbon {
  --stds-ws-rx: 30.4%;
  --stds-ws-ry: 21.137%;
  --stds-ws-rw: 36.869%;
}

.stds-ws--home .stds-ws__slot--1 {
  --stds-ws-x: 51.2%;
  --stds-ws-y: 0%;
  --stds-ws-w: 48.8%;
  --stds-ws-a: 1.537;
}
.stds-ws--home .stds-ws__slot--2 {
  --stds-ws-x: 0%;
  --stds-ws-y: 47.868%;
  --stds-ws-w: 38.667%;
  --stds-ws-a: 1.538;
}
.stds-ws--home .stds-ws__slot--3 {
  --stds-ws-x: 72%;
  --stds-ws-y: 77.273%;
  --stds-ws-w: 28%;
  --stds-ws-a: 1.58;
}

.stds-ws--office .stds-ws__slot--1 {
  --stds-ws-x: 51.2%;
  --stds-ws-y: 3.732%;
  --stds-ws-w: 38.667%;
  --stds-ws-a: 1.423;
}
.stds-ws--office .stds-ws__slot--2 {
  --stds-ws-x: 0%;
  --stds-ws-y: 48.616%;
  --stds-ws-w: 48.267%;
  --stds-ws-a: 1.537;
}
.stds-ws--office .stds-ws__slot--3 {
  --stds-ws-x: 72%;
  --stds-ws-y: 56.041%;
  --stds-ws-w: 28%;
  --stds-ws-a: 1.418;
}

.stds-ws--community .stds-ws__slot--1 {
  --stds-ws-x: 51.2%;
  --stds-ws-y: 0%;
  --stds-ws-w: 48.8%;
  --stds-ws-a: 1.607;
}
.stds-ws--community .stds-ws__slot--2 {
  --stds-ws-x: 61.067%;
  --stds-ws-y: 69.816%;
  --stds-ws-w: 39.064%;
  --stds-ws-a: 1.554;
}
.stds-ws--community .stds-ws__slot--3 {
  --stds-ws-x: 0%;
  --stds-ws-y: 45.797%;
  --stds-ws-w: 35.704%;
  --stds-ws-a: 1.536;
}

.stds-ws--custom .stds-ws__slot {
  --stds-ws-x: var(--stds-ws-mx, 0%);
  --stds-ws-y: var(--stds-ws-my, 0%);
  --stds-ws-w: var(--stds-ws-mw, 50%);
  --stds-ws-a: 1.537;
}

/* --- Desktop layout (1024+) ----------------------------------------------- */

@media (min-width: 1024px) {
  .stds-ws__inner {
    display: grid;
  }

  .stds-ws__text {
    display: block;
    position: relative;
    z-index: 1;
    padding-block-start: var(--stds-ws-text-top);
  }

  .stds-ws__text {
    grid-area: 1 / 1;
  }

  .stds-ws__collage {
    grid-column: 1;
    grid-row: var(--stds-ws-collage-row, 1);
  }

  .stds-ws__inner::before {
    content: "";
    grid-area: 1 / 1;
    padding-block-start: var(--stds-ws-overlap, 0%);
  }

  .stds-ws__body {
    margin-block-start: 59.5px;
  }

  /* Left-aligned on desktop, centred on mobile — spec section 4.2. */
  .stds-ws__link {
    margin-block-start: 117px;
    margin-inline-start: var(--stds-ws-inset);
    padding-block-end: 10.41px;
  }

  .stds-ws--home {
    --stds-ws-stage: 53.256%;
    --stds-ws-text-top: 2.396%;
    --stds-ws-lead-w: clamp(171px, calc(171px + 215.5 * var(--stds-fluid)), 386.5px);
    --stds-ws-collage-row: 2;
    --stds-ws-overlap: 13.312%;
    --stds-section-pt: 250px;
    --stds-section-pb: 108px;
  }

  .stds-ws--office {
    --stds-ws-stage: 55.527%;
    --stds-ws-text-top: 4.375%;
    --stds-ws-lead-w: 36.823%;
    --stds-section-pt: 212px;
    --stds-section-pb: 153.88px;
  }

  .stds-ws--community {
    --stds-ws-stage: 51.777%;
    --stds-ws-text-top: 3.333%;
    --stds-ws-lead-w: clamp(217px, calc(217px + 384 * var(--stds-fluid)), 601px);
    --stds-ws-body-w: clamp(305px, calc(305px + 248 * var(--stds-fluid)), 646px);
    --stds-ws-collage-row: 2;
    --stds-ws-overlap: 36.294%;
    --stds-section-pt: 232px;
    --stds-section-pb: 194.27px;
  }

  .stds-ws--home .stds-ws__collage,
  .stds-ws--office .stds-ws__collage,
  .stds-ws--community .stds-ws__collage {
    margin-block-start: calc(-1 * var(--stds-ws-overlap, 0%));
  }

  .stds-ws--community .stds-ws__collage {
    margin-inline-end: clamp(0px, calc(82.77px - 82.77 * var(--stds-fluid)), 48px);
  }

  .stds-ws--home .stds-ws__ribbon {
    --stds-ws-rx: 43.94%;
    --stds-ws-ry: 20.487%;
    --stds-ws-rw: 25.878%;
  }
  .stds-ws--office .stds-ws__ribbon {
    --stds-ws-rx: 57.653%;
    --stds-ws-ry: 23.738%;
    --stds-ws-rw: 25.878%;
  }
  .stds-ws--community .stds-ws__ribbon {
    --stds-ws-rx: 50.778%;
    --stds-ws-ry: 18.214%;
    --stds-ws-rw: 25.878%;
  }

  .stds-ws--home .stds-ws__slot--1 {
    --stds-ws-x: 57.656%;
    --stds-ws-y: 0%;
    --stds-ws-w: 32.813%;
  }
  .stds-ws--home .stds-ws__slot--2 {
    --stds-ws-x: 9.479%;
    --stds-ws-y: 37.554%;
    --stds-ws-w: 26.042%;
  }
  .stds-ws--home .stds-ws__slot--3 {
    --stds-ws-x: 78.281%;
    --stds-ws-y: 55.158%;
    --stds-ws-w: 21.719%;
  }

  .stds-ws--office .stds-ws__slot--1 {
    --stds-ws-x: 64.427%;
    --stds-ws-y: 3.564%;
    --stds-ws-w: 25.938%;
  }
  .stds-ws--office .stds-ws__slot--2 {
    --stds-ws-x: 29.948%;
    --stds-ws-y: 43.898%;
    --stds-ws-w: 32.813%;
  }
  .stds-ws--office .stds-ws__slot--3 {
    --stds-ws-x: 78.281%;
    --stds-ws-y: 49.057%;
    --stds-ws-w: 21.719%;
  }

  .stds-ws--community .stds-ws__slot--1 {
    --stds-ws-x: 64.427%;
    --stds-ws-y: 0%;
    --stds-ws-w: 25.951%;
  }
  .stds-ws--community .stds-ws__slot--2 {
    --stds-ws-x: 71.667%;
    --stds-ws-y: 55.125%;
    --stds-ws-w: 28.333%;
  }
  .stds-ws--community .stds-ws__slot--3 {
    --stds-ws-x: 37.031%;
    --stds-ws-y: 61.06%;
    --stds-ws-w: 18.958%;
    --stds-ws-a: 1.537;
  }

  .stds-ws--custom .stds-ws__slot {
    --stds-ws-x: var(--stds-ws-dx, 0%);
    --stds-ws-y: var(--stds-ws-dy, 0%);
    --stds-ws-w: var(--stds-ws-dw, 30%);
  }
}

/* ==========================================================================
   Contact Form   (layout: stds_contact_form)
   Spec: block-specs/contact-form.md
   ========================================================================== */

.stds-contact {
  --stds-section-pt: 54.715px;
  --stds-section-pb: 45.41px;
  --stds-contact-rule: 0.5px;
  --stds-contact-box: 14.84px;
}

/* @media only screen and (max-width: 767px) { */
	.stds-contact__inner .st-submit-btn:after {
		display: none;
	}
/* } */

.stds-contact__heading {
  font-family: var(--stds-font-display);
  font-size: var(--stds-text-form-heading);
  line-height: var(--stds-lh-form-heading);
  letter-spacing: var(--stds-ls-none);
  color: var(--stds-c-terracotta);
  text-align: center;
}

.stds-contact__label {
  margin-block-start: 27.13px;
  font-family: var(--stds-font-display);
  font-size: var(--stds-text-contact-label);
  line-height: var(--stds-lh-contact-label);
  letter-spacing: var(--stds-ls-none);
  color: var(--stds-c-terracotta);
  text-transform: uppercase;
}

.stds-contact__address {
  margin-block-start: -0.745px;
  font-size: var(--stds-text-body);
  line-height: var(--stds-lh-contact-addr);
  color: var(--stds-c-black);
}

.stds-contact__address + .stds-contact__label {
  margin-block-start: 21.31px;
}

.stds-contact .stds-contact__phone {
  display: block;
  margin-block-start: 17px;
  font-size: var(--stds-text-contact-phone);
  line-height: var(--stds-lh-contact-phone);
  color: var(--stds-c-black);
  text-decoration: none;
}

.stds-contact__info {
  text-align: center;
}

.stds-contact__form {
  margin-block-start: 31.06px;
  margin-inline: 10.41px 13.05px;
}

/* --- CF7 layout wrappers -------------------------------------------------- */

.stds-contact .flex {
  display: grid;
  gap: 21.63px;
}

.stds-contact .half {
  width: auto;
}

.stds-contact .half + .half {
  margin-left: 0;
}

.stds-contact .flex + .flex {
  margin-block-start: 25px;
}

.stds-contact .flex + div {
  margin-block-start: 23.63px;
}

/* --- Fields --------------------------------------------------------------- */

.stds-contact input[type="text"],
.stds-contact input[type="tel"],
.stds-contact input[type="email"],
.stds-contact select,
.stds-contact textarea {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--stds-c-black);
  font-family: var(--stds-font-body);
  font-size: var(--stds-text-form-label);
  letter-spacing: var(--stds-ls-form-label);
  outline: 0;
}

.stds-contact input[type="text"],
.stds-contact input[type="tel"],
.stds-contact input[type="email"],
.stds-contact select {
  padding: 0 0 5.87px;
  line-height: 1;
  border-block-end: var(--stds-contact-rule) solid var(--stds-c-terracotta);
}

.stds-contact select.select-hidden {
  display: none;
}

.stds-contact ::placeholder {
  color: var(--stds-c-black);
  opacity: 1;
}

.stds-contact textarea {
  block-size: 97.57px;
  padding: 8.75px 0 0 10.48px;
  line-height: 1;
  border: var(--stds-contact-rule) solid var(--stds-c-terracotta);
  resize: vertical;
}

.stds-contact .enquiry {
  margin-block-start: 16.09px;
}

/* --- Select --------------------------------------------------------------- */

.stds-contact .select {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 0;
  font-size: var(--stds-text-form-label);
  color: var(--stds-c-black);
}

.stds-contact .select-styled {
  position: relative;
  inset: auto;
  padding: 0 0 7.87px;
  line-height: 1;
  letter-spacing: var(--stds-ls-form-label);
  border-block-end: var(--stds-contact-rule) solid var(--stds-c-terracotta);
}

.stds-contact .select-styled::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  width: 9px;
  height: 6.75px;
  border: 0;
  background-color: var(--stds-c-black);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Cpath d='M20 0 L10 15 L0 0' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

.st-submit-btn.stds-submit-btn::after {
  content: none;
}

.stds-contact .select-styled.active::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Cpath d='M20 15 L10 0 L0 15' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
}

.stds-contact .select-options {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  z-index: 999;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: var(--stds-c-white);
}

.stds-contact .select-options li {
  margin: 0;
  padding: 12px 0;
  text-indent: 22px;
  background-color: var(--stds-c-terracotta);
  color: var(--stds-c-white);
  transition: background-color 0.15s ease-in;
}

.stds-contact .select-options li.is-selected,
.stds-contact .select-options li:hover {
  background-color: rgb(185 99 70 / 0.8);
}

/* --- Consent rows --------------------------------------------------------- */

.stds-contact .cf_btm {
  margin-block-start: 10.96px;
  margin-bottom: 0;
}

.stds-contact .acc_checkbox {
  width: auto;
}

.stds-contact .acc_checkbox + .acc_checkbox {
  margin-block-start: 8.63px;
}

.stds-contact .wpcf7-list-item {
  margin: 0;

  vertical-align: top;
}

/* --- Consent checkbox ----------------------------------------------------- */

.stds-contact .acc_checkbox .wpcf7-acceptance .acceptance {
  display: none;
}

.stds-contact .acc_checkbox .wpcf7-acceptance .wpcf7-list-item-label {
  position: relative;
  display: block;
  max-width: clamp(249px, calc(249px + 1305 * var(--stds-fluid)), 100%);
  padding-left: calc(var(--stds-contact-box) + 11.95px);
  font-size: var(--stds-text-form-legal);
  line-height: var(--stds-lh-form-legal);
  color: var(--stds-c-black);
}

.stds-contact .acc_checkbox.first_check {
  margin-block-start: 0;
}

/* 3.63 = the design's 1.63 box-below-ink offset plus the copy's own 2 (§4.8b). */
.stds-contact .acc_checkbox .wpcf7-acceptance .wpcf7-list-item-label::before {
  content: "";

  box-sizing: content-box;

  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 3.63px;
  inline-size: var(--stds-contact-box);
  block-size: var(--stds-contact-box);
  border: var(--stds-contact-rule) solid var(--stds-c-terracotta);
  background: none;
}

.stds-contact .acc_checkbox .wpcf7-acceptance .wpcf7-list-item-label::after {
  content: "";

  box-sizing: content-box;

  position: absolute;
  inset-inline-start: calc(var(--stds-contact-box) * 0.345);
  inset-block-start: calc(3.63px + var(--stds-contact-box) * 0.069);
  inline-size: calc(var(--stds-contact-box) * 0.241);
  block-size: calc(var(--stds-contact-box) * 0.552);
  border-block-end: calc(var(--stds-contact-box) * 0.138) solid
    var(--stds-c-terracotta);
  border-inline-end: calc(var(--stds-contact-box) * 0.138) solid
    var(--stds-c-terracotta);
  transform: none;
  rotate: 45deg;
  opacity: 0;
  visibility: hidden;
}

.stds-contact
  .acc_checkbox
  .wpcf7-acceptance
  .acceptance:checked
  + .wpcf7-list-item-label::after {
  opacity: 1;
  visibility: visible;
}

/* --- Submit --------------------------------------------------------------- */
.stds-contact .st-submit-btn {
  position: relative;
  inline-size: clamp(57.68px, calc(57.68px + 55.32 * var(--stds-fluid)), 113px);
  block-size: clamp(
    94.39px,
    calc(94.39px + 90.53 * var(--stds-fluid)),
    184.92px
  );
  margin-block-start: 57.38px;
  margin-inline: auto;
  text-align: initial;
  margin: 20px auto 0;
}

.stds-contact .st-submit-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--stds-c-terracotta);
  mask-image: url("../images/ribbon-icon.svg");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

.stds-contact .wpcf7-submit {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  padding: 0 0
    clamp(31.65px, calc(31.65px + 28.59 * var(--stds-fluid)), 60.24px);
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--stds-c-white);
  font-family: var(--stds-font-body);
  font-weight: var(--stds-fw-medium);
  font-size: var(--stds-text-form-submit);
  line-height: var(--stds-lh-form-submit);
  letter-spacing: var(--stds-ls-form-submit);
  text-align: center;
  cursor: pointer;
}

.stds-contact .wpcf7-spinner {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  margin: 0;
  translate: -50% 0;
}

/* --- CF7 messages ---------------------------------------------------------*/
.stds-contact .wpcf7-response-output {
  position: relative;
  inset-block-start: 10px;
  margin: 0;
  border: 1px solid var(--stds-c-terracotta);
  font-size: 16px;
  line-height: 22px;
}

.stds-contact .wpcf7-not-valid-tip {
  margin-block-start: 5px;
  font-size: 12px;
  line-height: 12px;
  color: var(--stds-c-terracotta);
}

.stds-contact .wpcf7-not-valid {
  border-block-end-color: var(--stds-c-terracotta);
}

/* --- Desktop (1024+) ------------------------------------------------------ */

@media (min-width: 1024px) {
  .stds-contact {
    --stds-section-pt: 186px;
    --stds-section-pb: 197.22px;
    --stds-contact-rule: 1px;
    --stds-contact-box: 29.07px;
  }

  .stds-contact__heading {
    text-align: left;
  }
  .stds-contact__cols {
    display: grid;
    grid-template-columns: 527.5fr 1025.5fr;
    margin-block-start: 88px;
  }

  .stds-contact__info {
    padding-block-start: 237.4px;
    text-align: left;
  }

  .stds-contact__form {
    margin-block-start: 0;
    margin-inline: 0;
  }

  .stds-contact__label {
    margin-block-start: 95.84px;
  }

  .stds-contact__info > .stds-contact__label:first-child {
    margin-block-start: 0;
  }

  .stds-contact__address {
    margin-block-start: 5.66px;
    max-width: 309px;
  }

  .stds-contact__address + .stds-contact__label {
    margin-block-start: 95.84px;
  }

  .stds-contact__phone {
    margin-block-start: 11.16px;
  }

  .stds-contact .flex {
    grid-template-columns: 1fr 1fr;
    gap: 30.5px;
  }

  .stds-contact .flex + .flex {
    margin-block-start: 45.66px;
  }

  .stds-contact .flex + div {
    margin-block-start: 44px;
  }

  .stds-contact input[type="text"],
  .stds-contact input[type="tel"],
  .stds-contact input[type="email"],
  .stds-contact select {
    padding-block-end: 11.41px;
  }

  .stds-contact .select-styled {
    padding-block-end: 14.91px;
  }

  .stds-contact textarea {
    block-size: 224.12px;
    padding-block-start: 22.19px;
    padding-inline-start: 22.04px;
  }

  .stds-contact .enquiry {
    margin-block-start: 34.14px;
  }

  .stds-contact .select-styled::after {
    width: 20px;
    height: 15px;
    inset-inline-end: 6.5px;
  }

  .stds-contact .cf_btm {
    display: grid;
    grid-template-columns: 1fr 113px;

    grid-template-rows: max-content max-content 1fr;
    column-gap: 75.68px;
    row-gap: 19.45px;
    margin-block-start: 27.35px;
  }

  .stds-contact .acc_checkbox {
    grid-column: 1;
  }

  .stds-contact .acc_checkbox + .acc_checkbox {
    margin-block-start: 0;
  }

  .stds-contact .acc_checkbox .wpcf7-acceptance .wpcf7-list-item-label {
    max-width: none;
    padding-left: calc(var(--stds-contact-box) + 24.75px);
  }

  .stds-contact
    .acc_checkbox
    .wpcf7-acceptance
    .wpcf7-list-item-label::before {
    inset-block-start: 4.77px;
  }

  .stds-contact .acc_checkbox .wpcf7-acceptance .wpcf7-list-item-label::after {
    inset-block-start: calc(4.77px + var(--stds-contact-box) * 0.069);
  }
  .stds-contact .st-submit-btn {
    grid-column: 2;
    /* 1 / -1, not `span 2` — it has to reach the flexible third track above. */
    grid-row: 1 / -1;
    inline-size: 113px;
    block-size: 184.92px;
    margin-block-start: 4.28px;
    margin-inline: 0;
  }

  .stds-contact .wpcf7-submit {
    padding-block-end: 60.24px;
  }
}


/* ==========================================================================
   Section Navigation   (layout: stds_section_nav)
   Spec: block-specs/section-navigation.md
   ========================================================================== */

.stds-section-nav {
  --stds-section-pt: clamp(42px, calc(42px + 260 * var(--stds-fluid)), 302px);
  --stds-section-pb: clamp(155.3px, calc(155.3px + 58.7 * var(--stds-fluid)), 214px);
  --_curve-w: clamp(138.26px, calc(138.26px + 358.59 * var(--stds-fluid)), 496.85px);
  --_curve-h: calc(var(--_curve-w) / 0.6111);   /* aspect is constant — §4.6 */

  position: relative;
}


.stds-section-nav--tabs {
  --stds-section-pt: var(--stds-section-y);
}

.stds-section-nav__inner {
  position: relative;
  z-index: 2;
}

@media (min-width: 1024px) {
  .stds-section-nav__lead {
    max-width: 53.19%;
  }
}

.stds-surface--ink .stds-section-nav__lead {
  color: var(--stds-c-sand);
}

.stds-section-nav__lead + .stds-section-nav__nav {
  margin-block-start: clamp(55px, calc(55px + 100 * var(--stds-fluid)), 155px);
}

.stds-section-nav__list {
  display: flex;
  flex-wrap: wrap;
  column-gap: clamp(28.28px, calc(28.28px + 28.12 * var(--stds-fluid)), 56.4px);
  row-gap: clamp(19.71px, calc(19.71px + 17.25 * var(--stds-fluid)), 36.96px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 1024 — 1439 */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .stds-section-nav:has(+ .stds-view360) .stds-section-nav__list {
    flex-direction: column;
  }
}

.stds .stds-section-nav__link {
  display: inline-block;
  opacity: 0.4;
  color: var(--stds-c-white);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.stds .stds-section-nav__link:hover,
.stds .stds-section-nav__link:focus-visible {
  opacity: 1;
  color: var(--stds-c-white);
}

.stds-section-nav__link[aria-current="true"] {
  opacity: 1;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: clamp(7.42px, calc(7.42px + 5.99 * var(--stds-fluid)), 13.41px);
}

/* --- Decorative curve ------------------------------------------------------ */

.stds-section-nav__media {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: var(--stds-nav-curve-top-m, 289px);
  width: var(--_curve-w);
  z-index: 1;           /* above section backgrounds, below all content */
  pointer-events: none;
}

.stds-section-nav__curve {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 0.6111;   /* identical at both breakpoints — §4.6 */
  object-fit: contain;
  color: var(--stds-c-sand);
}

@media (min-width: 1024px) {
  .stds-section-nav__media {
    inset-block-start: var(--stds-nav-curve-top, 189px);
  }
}


/* ==========================================================================
   Awards   (layout: stds_awards)
   Spec: block-specs/awards.md
   ========================================================================== */

.stds-awards {
  --stds-section-pt: clamp(52px, calc(52px + 32 * var(--stds-fluid)), 84px);
  --stds-section-pb: 0;

  --_logo-cell: clamp(113.75px, calc(113.75px + 136.25 * var(--stds-fluid)), 250px);
  --_logo-gap: clamp(16.25px, calc(16.25px + 33.75 * var(--stds-fluid)), 50px);
}

.stds-awards__inner {
  border-block-end: 0.5px solid var(--stds-c-black);
  padding-block-end: clamp(58px, calc(58px + 122 * var(--stds-fluid)), 180px);
}

@media (min-resolution: 2dppx) {
  .stds-awards__inner {
    border-block-end-width: 0.35px;
  }
}

.stds-awards__list {
  display: grid;
  row-gap: clamp(67.65px, calc(67.65px + 35.47 * var(--stds-fluid)), 103.12px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stds-awards__item {
  display: grid;
  grid-template-columns: var(--_logo-cell) 1fr;
  column-gap: var(--_logo-gap);
  align-items: start;
}

.stds-awards__logo {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.stds-awards__logo img {
  display: block;
  width: calc(var(--stds-logo-w, 0) * var(--_logo-scale) * 1px);
  max-width: 100%;
  height: auto;
}

.stds-awards {
  --_logo-scale: clamp(0.2693, calc(0.2693 + 0.2307 * var(--stds-fluid) / 1px), 0.5);
}

.stds-awards__text {
  font-family: var(--stds-font-body);
  font-size: var(--stds-text-body);
  line-height: var(--stds-lh-body-loose);
  color: var(--stds-c-black);
}

.stds-awards__title {
  font-size: inherit;
  font-weight: var(--stds-fw-bold);
  line-height: inherit;
  letter-spacing: var(--stds-ls-none);
  font-family: var(--stds-font-body);
}

.stds-awards__body > p + p {
  margin-block-start: var(--stds-space-md);
}

@media (min-width: 1024px) {
  .stds-awards__list {
    grid-template-columns: repeat(2, 48.8417%);   /* 759 / 1554 */
    grid-template-rows: repeat(var(--stds-awards-rows, 1), auto);
    grid-auto-flow: column;
    column-gap: 0;
  }

  .stds-awards__item {
    grid-template-columns: 21.4756% 49.2754%;
    column-gap: 13.307%;
  }

  .stds-awards__item--col2 {
    grid-template-columns: 32.9381% 51.1199%;
    column-gap: 6.5876%;
  }
}


/* ==========================================================================
   Corporate Profile   (layout: stds_corporate_profile)
   Spec: block-specs/corporate-profile.md
   ========================================================================== */

.stds-cp {
  --stds-section-pt: clamp(35.53px, calc(35.53px + 32.47 * var(--stds-fluid)), 68px);
  --stds-section-pb: clamp(104.13px, calc(104.13px + 211.39 * var(--stds-fluid)), 315.52px);
}

@media (max-width: 767px) {
  .stds-about-heritage-section .stds-section-intro__media {
    margin-top: 26px;
  }
}

/* --- About: the two headed seams ------------------------------------------- */

.stds-section-intro:has(+ .stds-awards) {
  --stds-section-pt: clamp(63px, calc(63px + 141 * var(--stds-fluid)), 204px);
}

.stds-section-intro:has(+ .stds-cp) {
  --stds-section-pt: clamp(68px, calc(68px + 133 * var(--stds-fluid)), 201px);
}

/* --- Location: the two headed seams ---------------------------------------- */

/*
 * Scoped to the intro that introduces each block, NOT to .stds-section-intro at
 * large — there are 7 intros across About, Lifestyle and Location, and the ones
 * not named here keep the default --stds-section-y (70-180px).
 *
 * Keyed on the following block rather than on #surrounding-amenities /
 * #getting-here because those ids come from the editable `stds_section_id`
 * field: renaming one in the admin would silently drop the rule. The seam is
 * structural, so the selector is too — same reasoning as the two About seams
 * above.
 *
 * One rule per seam, each with its own measured numbers, so they can be tuned
 * apart — which is why the two About seams already differ from each other.
 */
.stds-section-intro:has(+ .stds-amenities) {
  --stds-section-pt: clamp(63px, calc(63px + 141 * var(--stds-fluid)), 204px);
}

.stds-section-intro:has(+ .stds-gh) {
  --stds-section-pt: clamp(62px, calc(62px + 138 * var(--stds-fluid)), 200px);
}

/* --- Lifestyle: the DIRECTORY (RETAIL) seam -------------------------------- */

/*
 * Same reasoning as the seams above: keyed on the block that follows, not on
 * #directory-retail, because that id comes from the editable `stds_section_id`
 * field. `stds_lifestyle_list` is used once site-wide, so this resolves to a
 * single section.
 *
 * The Facilities intro on this same page is NOT affected — it carries an inline
 * `--stds-section-pt:201px` set from the admin's exact-px fields, which beats
 * any stylesheet rule regardless.
 */
.stds-section-intro:has(+ .stds-lifestyle-list) {
  --stds-section-pt: clamp(70px, calc(70px + 75 * var(--stds-fluid)), 145px);
}


.stds-cp__partners {
  display: grid;
  row-gap: clamp(58.75px, calc(58.75px + 36.25 * var(--stds-fluid)), 95px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stds-cp__partner {
  display: flex;
  flex-direction: column;
}

.stds-cp__logo {
  display: flex;
  justify-content: center;
}

.stds-cp {
  --_logo-scale: clamp(0.2399, calc(0.2399 + 0.2601 * var(--stds-fluid) / 1px), 0.5);
}

.stds-cp__logo img {
  display: block;
  width: calc(var(--stds-logo-w, 0) * var(--_logo-scale) * 1px);
  max-width: 100%;
  height: auto;
}

/* Photos are clamped to their zone and keep their own aspect — D7. */
.stds-cp__media img {
  display: block;
  width: 100%;
  height: auto;
}

.stds-cp__media {
  margin: 0;
}

.stds-cp__role {
  line-height: var(--stds-lh-h5);
  text-transform: uppercase;
}

.stds-cp__role-label,
.stds-cp__role-name {
  display: block;
  font-family: var(--stds-font-body);
}

.stds-cp__role-label {
  font-weight: var(--stds-fw-regular);
  font-size: clamp(16px, calc(16px + 6 * var(--stds-fluid)), 22px);
  letter-spacing: clamp(0.12px, calc(0.12px + 0.08 * var(--stds-fluid)), 0.2px);
  color: var(--stds-c-black);
}

.stds-cp__role-name {
  font-weight: var(--stds-fw-medium);
  font-size: clamp(16px, calc(16px + 10 * var(--stds-fluid)), 26px);
  letter-spacing: clamp(0.16px, calc(0.16px + 0.1 * var(--stds-fluid)), 0.26px);
  color: var(--stds-c-terracotta);
}

.stds-cp__body {
  font-family: var(--stds-font-body);
  font-size: var(--stds-text-body);
  line-height: var(--stds-lh-body-loose);
  letter-spacing: var(--stds-ls-none);
  color: var(--stds-c-black);
}

.stds-cp__role + .stds-cp__body {
  margin-block-start: clamp(21px, calc(21px + 19 * var(--stds-fluid)), 40px);
}

.stds-cp__body > p + p {
  margin-block-start: var(--stds-space-md);
}

.stds-cp__body a {
  font-weight: var(--stds-fw-medium);
  text-decoration: none;
}

.stds-cp__body a:hover,
.stds-cp__body a:focus-visible {
  text-decoration: underline;
}

@media (max-width: 1023.98px) {
  .stds-cp__logo { order: 1; }
  .stds-cp__media { order: 2; margin-block-start: 23.42px; }
  .stds-cp__text { order: 3; margin-block-start: 23.62px; }
}

@media (min-width: 1024px) {
  .stds-cp__partner {
    display: grid;
    grid-template-columns: 13.8932% 5.1544% 44.4659% 4.5045% 31.982%;
    align-items: start;
  }

  .stds-cp__logo { grid-column: 1; }
  .stds-cp__text { grid-column: 3; }
  .stds-cp__media { grid-column: 5; }
}


/* ==========================================================================
   Conserved Heritage   (layout: stds_conserved_heritage)
   Spec: block-specs/conserved-heritage.md
   ========================================================================== */

.stds-heritage {
  --stds-section-pt: clamp(53px, calc(53px + 231 * var(--stds-fluid)), 284px);
  --stds-section-pb: clamp(72px, calc(72px + 132 * var(--stds-fluid)), 204px);
  --_gap: 31px;
  --_panel-h: clamp(85px, calc(85px + 55 * var(--stds-fluid)), 140px);
}

.stds-heritage__lead + .stds-heritage__items {
  margin-block-start: clamp(29px, calc(29px + 24 * var(--stds-fluid)), 53px);
}

.stds-heritage__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.stds-heritage__slide {
  padding-inline: calc(var(--_gap) / 2);
}

/* 0 — 3-0 on purpose */
.stds .stds-heritage__items .slick-list {
  margin-inline: calc(var(--_gap) / -2);
}

.stds-heritage__card {
  position: relative;
  padding-block-end: clamp(71.5674px, calc(71.5674px + 46.9375 * var(--stds-fluid)), 118.5049px);
}

.stds-heritage__image {
  display: block;
  width: 100%;
  height: auto;
  /*  aspect-ratio: 1.499267; identical at both breakpoints; NOT 3:2 — §4.2 */
  object-fit: cover;
}

.stds-heritage__panel {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  background-color: var(--stds-c-ink);
  font-size: var(--stds-text-body);
  /* 20 -> 30 matches no token: --stds-lh-body is 22 -> 28, wrong at both ends. */
  line-height: clamp(20px, calc(20px + 10 * var(--stds-fluid)), 30px);
  padding-inline: clamp(26px, calc(26px + 14 * var(--stds-fluid)), 40px);
  padding-block-start: clamp(13px, calc(13px + 15 * var(--stds-fluid)), 28px);
  padding-block-end: clamp(12px, calc(12px + 10 * var(--stds-fluid)), 22px);
}

.stds-heritage__title,
.stds-heritage__body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: var(--stds-ls-none);
  font-family: var(--stds-font-body);
}

.stds-heritage__title {
  -webkit-line-clamp: 1;
  font-weight: var(--stds-fw-bold);
}

.stds-heritage__body {
  -webkit-line-clamp: 2;
  font-weight: var(--stds-fw-regular);
}

.stds-heritage .slick-dots {
  margin-block-start: clamp(35px, calc(35px + 33.1 * var(--stds-fluid)), 68.1px);
}

.stds-heritage__intro {
  margin-block-start: clamp(60px, calc(60px + 42 * var(--stds-fluid)), 102px);
  margin-inline: auto;
  max-width: clamp(234px, calc(234px + 1107 * var(--stds-fluid)), 1341px);
  font-size: var(--stds-text-body);
  line-height: var(--stds-lh-body-loose);
  text-align: center;
}

.stds-heritage__intro > p + p {
  margin-block-start: var(--stds-space-md);
}

.stds .stds-heritage__cta {
  margin-block-start: clamp(45px, calc(45px + 10 * var(--stds-fluid)), 55px);
  text-align: center;
}

.stds-t--eyebrow.stds-heritage__cta-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: clamp(9.41px, calc(9.41px + 7 * var(--stds-fluid)), 10.41px);
  letter-spacing: clamp(0px, calc(0.36px + -0.36 * var(--stds-fluid)), 0.36px);
}


/* ==========================================================================
   Location List   (layout: stds_location_list)
   Spec: block-specs/location-list.md
   ========================================================================== */

.stds-location-list {
  --stds-section-pt: clamp(71px, calc(71px + 141 * var(--stds-fluid)), 212px);
  --stds-section-pb: clamp(49px, calc(49px + 132.81 * var(--stds-fluid)), 181.81px);
}

.stds-location-list__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.stds-location-list__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 366 / 430;
  object-fit: cover;
}

.stds-location-list__media {
  margin: 0;
}

.stds-location-list__title {
  margin-block-start: clamp(24.67px, calc(24.67px + 24.33 * var(--stds-fluid)), 49px);
}

/* Title ink bottom -> body ink top 27 / 37.07, less both half-leadings. */
.stds-location-list__body {
  margin-block-start: clamp(27px, calc(27px + 10 * var(--stds-fluid)), 37px);
  line-height: var(--stds-lh-body-loose);
}

.stds-location-list__body > p + p {
  margin-block-start: var(--stds-space-md);
}

.stds .stds-location-list__items .slick-dots {
  margin-block-start: 58px;
}

@media (min-width: 1240px) {
  .stds-location-list__items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--stds-gap-grid);
  }
}

@media (max-width: 1239.98px) {
  .stds-location-list__item {
    padding-inline: calc(var(--stds-gap-grid) / 2);
  }

  .stds .stds-location-list__items .slick-list {
    margin-inline: calc(var(--stds-gap-grid) / -2);
  }
}


/* ==========================================================================
   Getting Here   (layout: stds_getting_here)
   Spec: block-specs/location-getting-here.md
   ========================================================================== */

.stds-gh {
  --stds-section-pt: clamp(37.79px, calc(37.79px + 33.21 * var(--stds-fluid)), 71px);
  --stds-section-pb: clamp(97px, calc(97px + 211 * var(--stds-fluid)), 308px);
  --_band-h: clamp(30px, calc(30px + 30 * var(--stds-fluid)), 60px);
  --_chip-gap: 5px;
}

/* --- Tab strip ------------------------------------------------------------ */

.stds-gh__tabs {
  display: flex;
  flex-wrap: wrap;
  column-gap: clamp(27.58px, calc(27.58px + 25.72 * var(--stds-fluid)), 53.3px);
  row-gap: var(--stds-space-xs);
}

/* 0 — 2-0 on purpose */
.stds .stds-gh__tab {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--stds-font-body);
  font-weight: var(--stds-fw-medium);
  font-size: var(--stds-text-eyebrow);
  line-height: var(--stds-lh-eyebrow);
  letter-spacing: var(--stds-ls-eyebrow);
  text-transform: uppercase;
  color: var(--stds-c-terracotta);
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.stds .stds-gh__tab:hover,
.stds .stds-gh__tab:focus-visible {
  opacity: 1;
}

.stds .stds-gh__tab[aria-selected="true"] {
  opacity: 1;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: clamp(7.42px, calc(7.42px + 5.99 * var(--stds-fluid)), 13.41px);
}

/* --- Shared panel parts --------------------------------------------------- */

.stds-gh__panels,
.stds-gh__panel {
  display: flow-root;
}

.stds-gh__panel[hidden] {
  display: none;
}

.stds .stds-gh__caption {
  margin-block-start: clamp(38.21px, calc(38.21px + 44.79 * var(--stds-fluid)), 83px);
  font-size: var(--stds-text-body);
  line-height: var(--stds-lh-body);
  color: var(--stds-c-black);
}

.stds-gh__map {
  margin: 0;
}

.stds-gh__map-image {
  display: block;
  width: 100%;
  height: 100% !important;
  aspect-ratio: 305 / 203.3333;   /* mobile, both tabs */
  object-fit: cover;
}

@media (min-width: 1024px) {
  .stds-gh__panel--car .stds-gh__map-image { aspect-ratio: 1553 / 600; }
  .stds-gh__panel--transport .stds-gh__map-image { aspect-ratio: 776.5 / 600; }
}

/* Caption box bottom -> map top: 4214 -> 4241 and 5672 -> 5717. §4.4 */
.stds-gh__caption + .stds-gh__map {
  margin-block-start: clamp(33px, calc(33px + 18 * var(--stds-fluid)), 51px);
}

/* --- `car`: banded rate table --------------------------------------------- */

/* Map bottom -> dark band top: 4485 - 4444.33 and 6413 - 6317. §4.4 */
.stds-gh__table {
  margin-block-start: clamp(40.67px, calc(40.67px + 55.33 * var(--stds-fluid)), 96px);
}

.stds-gh__table-title,
.stds-gh__group-label {
  display: flex;
  align-items: center;
  gap: var(--stds-space-xs);
  min-height: var(--_band-h);
  padding-inline: clamp(12px, calc(12px + 12 * var(--stds-fluid)), 24px);
  font-family: var(--stds-font-body);
  font-weight: var(--stds-fw-medium);
  font-size: clamp(13.5px, calc(13.5px + 6.5 * var(--stds-fluid)), 20px);
  color: var(--stds-c-white);
}

/*
 * The design separates the two bands — and the Car band from its rates — with a
 * 1px line of the section surface rather than butting them together. A margin,
 * not a border: the gap has to read as the page showing through, and it must
 * not add to the band's own `--_band-h` measured height.
 *
 * On the two-column desktop grid the title spans 1 / -1, so this pushes the
 * whole group row down by 1px rather than only the column it sits over.
 *
 * Needs the `.stds ` prefix, and is kept out of the shared block above because
 * of it: both bands are <p>, and `.stds p { margin: 0 }` (design-system.css 2.4)
 * is (0,1,1) — it outranks a lone class and silently drops the margin. Raising
 * the shared block instead would lift its display/min-height/padding/font over
 * everything else too, which is a far wider change than this needs.
 */
.stds .stds-gh__table-title,
.stds .stds-gh__group-label {
  margin-block-end: 1px;
}

.stds-gh__table-title {
  background-color: var(--stds-c-ink-deep);
}

.stds-gh__group-label {
  background-color: var(--stds-c-terracotta);
  letter-spacing: clamp(0.27px, calc(0.27px + 0.13 * var(--stds-fluid)), 0.4px);
}

.stds-gh__group-icon svg {
  display: block;
  overflow: visible;
  width: auto;
  /* Union of the icon paths, not a nearby rect: 16.73 -> 24.36. §4.4 */
  height: clamp(16.73px, calc(16.73px + 7.63 * var(--stds-fluid)), 24.36px);
}

.stds-gh__rows {
  display: grid;
  grid-template-columns: 51.43% 1fr;
  row-gap: clamp(22.5px, calc(22.5px + 11.5 * var(--stds-fluid)), 34px);
  /* First row's line-box top below the band: 18 mobile, 17 desktop — flat. */
  padding-block: 17.5px 20px;
  padding-inline: clamp(12px, calc(12px + 12 * var(--stds-fluid)), 24px);
  margin: 0;
  font-size: var(--stds-text-body);
  /* Matches no token: --stds-lh-body is 22 -> 28 against a measured 16 -> 24. */
  line-height: clamp(16px, calc(16px + 8 * var(--stds-fluid)), 24px);
  color: var(--stds-c-black);
}

.stds-gh__when,
.stds-gh__rate {
  margin: 0;
}

.stds-gh__table {
  border-block-end: 0.25px solid var(--stds-c-ink-deep);
}

.stds-gh__notes {
  margin-block-start: var(--stds-space-lg);
  font-size: var(--stds-text-body);
  line-height: clamp(16px, calc(16px + 12 * var(--stds-fluid)), 28px);
  color: var(--stds-c-black);
}

/* --- `transport`: terracotta board ---------------------------------------- */
.stds-gh__board {
  margin-block-start: clamp(38.21px, calc(38.21px + 44.79 * var(--stds-fluid)), 83px);
  color: var(--stds-c-white);
}

.stds-gh__info {
  margin-block-start: 40.67px;
  padding-block: clamp(17px, calc(17px + 16 * var(--stds-fluid)), 33px)
                 clamp(17px, calc(17px + 14 * var(--stds-fluid)), 31px);
  padding-inline: clamp(17px, calc(17px + 19.5 * var(--stds-fluid)), 36.5px)
                  clamp(17px, calc(17px + -17 * var(--stds-fluid)), 17px);
  background-color: var(--stds-c-terracotta);
}

.stds-gh__info-title {
  font-size: var(--stds-text-body);
  font-weight: var(--stds-fw-medium);
}

.stds-gh__stops {
  display: grid;
  row-gap: clamp(14px, calc(14px + 20.5 * var(--stds-fluid)), 34.5px);
  margin: clamp(12px, calc(12px + 6 * var(--stds-fluid)), 18px) 0 0;
  padding: 0;
  list-style: none;
}

.stds-gh__stop {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(3px, calc(3px + 3 * var(--stds-fluid)), 6px);
  align-items: start;
}

.stds-gh__badge {
  display: grid;
  place-items: center;
  width: clamp(14px, calc(14px + 16 * var(--stds-fluid)), 30px);
  height: clamp(14px, calc(14px + 16 * var(--stds-fluid)), 30px);
  border-radius: 50%;
  background-color: var(--stds-c-grey-750);
  font-weight: var(--stds-fw-bold);
  font-size: clamp(10px, calc(10px + 8 * var(--stds-fluid)), 18px);
  line-height: 1;
}

.stds-gh__stop-name {
  font-size: var(--stds-text-body);
  letter-spacing: clamp(-0.36px, calc(0px + -0.36 * var(--stds-fluid)), 0px);
}

@media (max-width: 1024px) {
  .stds-gh__stop-name {
    line-height: 1;
    margin-bottom: 4px;
  }
}


.stds-gh__services {
  display: flex;
  flex-wrap: wrap;
  gap: var(--_chip-gap);
  margin: 0.5px 0 0;
  padding: 0;
  list-style: none;
}

.stds-gh__chip {
  display: grid;
  place-items: center;
  min-width: clamp(32px, calc(32px + 8 * var(--stds-fluid)), 40px);
  height: clamp(15px, calc(15px + 5 * var(--stds-fluid)), 20px);
  padding-inline: 2px;
  border-radius: clamp(7px, calc(7px + 3 * var(--stds-fluid)), 10px);
  border: 1px solid var(--stds-c-sand);
  font-weight: var(--stds-fw-medium);
  font-size: clamp(11px, calc(11px + 4 * var(--stds-fluid)), 15px);
  letter-spacing: clamp(-0.3px, calc(-0.22px + -0.08 * var(--stds-fluid)), -0.22px);
  line-height: 1;
}

.stds-gh__mrt {
  margin-block-start: 42px;
  font-size: var(--stds-text-body);
  line-height: var(--stds-lh-body);
  /* font-weight: var(--stds-fw-bold); */
}

.stds-gh__footnote {
  margin-block-start: clamp(31px, calc(77px - 46 * var(--stds-fluid)), 77px);
  font-size: var(--stds-text-nano);
  line-height: clamp(14px, calc(14px + 2 * var(--stds-fluid)), 16px);
}

@media (min-width: 1024px) {
  .stds-gh__board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    aspect-ratio: 1553 / 600;
    background-color: var(--stds-c-terracotta);
  }

  .stds-gh__info {
    margin-block-start: 0;
    background-color: transparent;
  }

  .stds-gh__panel--transport .stds-gh__map {
    display: block;
    overflow: hidden;
  }

  .stds-gh__panel--transport .stds-gh__map picture {
    display: block;
    height: 100%;
  }
  .stds-gh__stops {
    grid-template-columns: 357fr 338fr;
    column-gap: 3.87%;
  }

  .stds-gh__stop--wide {
    grid-column: 1 / -1;
  }

  .stds-gh__panel--car .stds-gh__table {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .stds-gh__table-title {
    grid-column: 1 / -1;
  }

  .stds-gh__group + .stds-gh__group .stds-gh__group-label {
    box-shadow: -0.5px 0 0 0 var(--stds-c-white);
  }
}


/* ==========================================================================
   Surrounding Amenities   (layout: stds_surrounding_amenities)
   Spec: block-specs/surrounding-amenities.md
   ========================================================================== */

.stds-amenities {
  --stds-section-pt: clamp(30px, calc(30px + 84 * var(--stds-fluid)), 114px);
  --stds-section-pb: 25.32px;
  --_row-h: 76.5px;
}

.stds-amenities__map {
  position: relative;
}

.stds-amenities .panzoom__controls {
  display: none;
}

.stds-amenities__canvas {
  position: relative;
  overflow: hidden;
}

.stds-amenities__stage {
  display: block;
}

.stds-amenities__map-layer {
  display: block;
}

.stds-amenities__map-layer[hidden] {
  display: none;
}

.stds-amenities__map-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 375 / 381;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .stds-amenities__map-image {
    aspect-ratio: 1200 / 930;
  }
}

.stds-amenities__overlay {
  position: absolute;
  inset-block-start: clamp(9px, calc(9px + 13.93 * var(--stds-fluid)), 22.93px);
  inset-inline-end: clamp(6.67px, calc(7.83px + -1.16 * var(--stds-fluid)), 7.83px);
  pointer-events: none;
}

.stds-amenities__overlay--m { display: none; }

@media (max-width: 1023.98px) {
  .stds-amenities__overlay--d { display: none; }
  .stds-amenities__overlay--m { display: block; }
}

.stds-amenities__hint {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  background-color: rgb(0 0 0 / 0.7);
  cursor: pointer;
  clip-path: inset(0 0 0 0);
  transition: clip-path 600ms ease;
}

.stds-amenities__hint.is-closing {
  clip-path: inset(0 0 100% 0);
}

@media (prefers-reduced-motion: reduce) {
  .stds-amenities__hint { transition-duration: 1ms; }
}

.stds-amenities__hint[hidden] {
  display: none;
}

.stds-amenities__hint-dot {
  position: relative;
  width: 59px;
  height: 22px;
  border: 1px solid #EDEBE9;
  border-radius: 20px;
}

.stds-amenities__hint-dot::before {
  content: "";
  position: absolute;
  inset-block-start: 7px;
  inset-inline-start: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--stds-c-white);
  animation: stds-amenities-drag 1.5s infinite;
}

@keyframes stds-amenities-drag {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(37px); }
}

.stds-amenities__hint-text {
  margin: 0;
  font-family: var(--stds-font-display);
  font-size: 13px;
  line-height: 24px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--stds-c-white);
}

@media (prefers-reduced-motion: reduce) {
  .stds-amenities__hint-dot::before { animation: none; }
}

.stds-amenities__overlay svg {
  display: block;
  width: clamp(64.33px, calc(90.17px + -25.84 * var(--stds-fluid)), 90.17px);
  height: auto;
}

/* --- List ----------------------------------------------------------------- */

.stds-amenities__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * The row rule belongs to the ITEM, not to the toggle.
 *
 * On the toggle it rendered between the heading and the open panel, because the
 * panel is the toggle's sibling — so an expanded row was cut in half by its own
 * separator. On the item it stays where the design puts it: directly under the
 * heading while closed (the panel is display:none, so nothing moves), and under
 * the panel once open.
 *
 * This is also what the panel's existing padding was already written for —
 * `padding-block: 13px 35.5px` is §4.3's "title ink bottom -> panel ink top 13"
 * and "panel ink bottom -> row rule 35.5". Those two numbers only describe a
 * rule that sits BELOW the panel.
 */
.stds-amenities__item {
  border-block-end: 1px solid var(--stds-c-terracotta);
}

.stds-amenities__heading {
  margin: 0;
}

.stds .stds-amenities__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stds-space-xs);
  width: 100%;
  min-height: var(--_row-h);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: start;
  color: var(--stds-c-terracotta);

  padding-inline-end: clamp(1px, calc(1px + 4 * var(--stds-fluid)), 5px);
}

.stds-amenities__title {
  text-transform: uppercase;
}

.stds-amenities__chevron {
  flex: 0 0 auto;
  width: clamp(12px, calc(12px + 8 * var(--stds-fluid)), 20px);
  height: auto;
  transform: rotate(90deg);
  transition: transform 0.2s ease;
  color: var(--stds-c-black);
}

.stds .stds-amenities__toggle[aria-expanded="true"] .stds-amenities__chevron {
  transform: rotate(180deg);
}

/*
 * `--_row-h` is the CLOSED row's fixed height — §4.3's "row is fixed height,
 * not padded", which keeps a two-line title's row the same height as a one-line
 * one. An open row is not on that grid: §4.3 measures its title ink to its
 * panel ink at 13, and the title is centred in the closed box, so holding the
 * full height leaves ~33px of dead space under the title and the panel lands
 * 45.7 below it instead of 13.
 *
 * Only the space BELOW the title is dead, though. The space above is what sets
 * the title off from the previous row's rule, and the design keeps it: §4.3 has
 * the title ink the same distance under that rule open or closed. So the row
 * height is released and the top half of the centring is re-added explicitly —
 * dropping both halves is what pushed an open heading up against the rule above
 * it.
 *
 * `(--_row-h - --stds-lh-label) / 2` IS the centring the closed row computes,
 * for a single-line title. A two-line title is centred on a smaller slack
 * (19.77 against 32.73 at 1600), so it gains ~13px of head room when it opens
 * rather than holding position exactly. Bounded, only affects the two wrapping
 * titles, and preferable to the alternative of no top space at all — CSS cannot
 * read the line count back out to make it exact.
 */
.stds .stds-amenities__toggle[aria-expanded="true"] {
  min-height: 0;
  padding-block-start: calc((var(--_row-h) - var(--stds-lh-label)) / 2);
}

/*
 * 13 / 35.5 are §4.3's mobile "title ink bottom -> panel ink top" and
 * "panel ink bottom -> row rule". The bottom was 21.5 — the DESKTOP figure —
 * which was invisible while the rule sat above the panel and only became wrong
 * once it moved below. Desktop overrides to its own 22 at >=1024.
 */
.stds-amenities__body {
  padding-block: 13px 35.5px;
  font-size: var(--stds-text-body-sm);
  line-height: var(--stds-lh-body-sm-loose);
  color: var(--stds-c-black);
}

.stds-amenities__body[hidden] {
  display: none;
}

.stds-amenities__body div + div {
  margin-top: 21px;
}

/* --- Legend --------------------------------------------------------------- */

.stds-amenities__legend[hidden] {
  display: none;
}

.stds-amenities__legend-list {
  display: grid;
  gap: 4px;
  margin: var(--stds-space-xs) 0 0;
  padding: 0;
  list-style: none;
}

.stds-amenities__legend-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10.74px;
  align-items: center;
}

.stds-amenities__legend-marker {
  display: block;
  width: clamp(22.26px, calc(22.26px + 8.74 * var(--stds-fluid)), 31px);
}

.stds-amenities__legend-marker--bar {
  height: clamp(8px, calc(8px + 3 * var(--stds-fluid)), 11px);
  background-color: var(--stds-marker, var(--stds-c-sand-dark));
}

.stds-amenities__legend-marker--line {
  height: 3px;
  background-color: var(--stds-marker, var(--stds-c-sand-dark));
}

.stds-amenities__legend-marker--icon svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Legend ink bottom -> footnote ink top. §4.5 */
.stds-amenities__note {
  margin-block-start: clamp(13.96px, calc(13.96px + 10.67 * var(--stds-fluid)), 24.63px);
  color: var(--stds-c-black);
}

@media (max-width: 1023.98px) {
  .stds-amenities__foot {
    margin-block-start: 62px;
  }

  .stds-amenities__panel {
    padding-inline: var(--stds-gutter);
  }

  .stds-amenities__zoom {
    display: none;
  }

  .stds-amenities__legend-title,
  .stds-amenities__note {
    font-family: var(--stds-font-legend);
  }

  .stds-amenities__legend-list {
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
  }
}

@media (min-width: 1024px) {
  .stds-amenities {
    --_row-h: 91.4px;
    --stds-section-pb: 0;   /* the map IS the section's bottom edge */
  }

  .stds-amenities__inner {
    display: grid;
    grid-template-columns: 62.5% 8.958% 19.01%;
  }

  .stds-amenities__map { grid-column: 1; }
  .stds-amenities__panel { grid-column: 3; }

  .stds-amenities__panel {
    display: flex;
    flex-direction: column;
    height: 48.4375vw;
  }

  .stds-amenities__list {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
  }

  .stds-amenities__list::-webkit-scrollbar { width: 0; height: 0; }

/* --- The designed scrollbar --------------------------------------------- */
  .stds-amenities__panel {
    position: relative;
  }

  .stds-amenities__bar {
    position: absolute;
    inset-inline-start: calc(100% + 21.098%);
    width: 8px;
    border-radius: 5px;
    background-color: var(--stds-c-terracotta);
  }

  .stds-amenities__bar[hidden] {
    display: none;
  }

  .stds-amenities__thumb {
    position: absolute;
    inset-inline: 0;
    border-radius: 5px;
    background-color: rgb(255 255 255 / 0.5);
  }

  .stds-amenities__foot {
    margin-block-start: auto;
  }

  .stds-amenities__list {
    margin-block-end: 117px;
  }

  .stds-amenities__body {
    padding-block: 13px 22px;
  }

  /* Map top -> list viewport top, and footnote ink bottom -> section bottom. §4.6 */
  .stds-amenities__panel {
    padding-block: 67px 40.37px;
  }

  .stds-amenities__zoom {
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
    /* 1200 - (1128 + 46.86) from the map's right edge. §4.2b */
    inset-inline-end: 2.095%;
    display: grid;
    width: 46.86px;
    border-radius: 19.573px;
    background-color: var(--stds-bg-control);
    box-shadow: 3.9146px 3.9146px 1.9573px rgb(0 0 0 / 0.302);
    overflow: hidden;
  }

  .stds .stds-amenities__zoom-btn {
    display: grid;
    place-items: center;
    height: 40.49px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--stds-c-black);
  }

  .stds .stds-amenities__zoom-btn--in {
    border-block-end: 0.979px solid var(--stds-c-black);
  }
}

/* ==========================================================================
   The 360 component — shared by stds_view_360 and stds_virtual_tour
   Spec: block-specs/view-360.md §4.3-§4.4, block-specs/virtual-tour.md §4.4
   ========================================================================== */

.stds-360 {
  position: relative;
  --_hint: #EDEBE9;
  --_scrim: rgb(0 0 0 / 0.55);
  --_close: #F8FAFC;
}

.stds-360__trigger {
  position: relative;
  display: block;
  overflow: hidden;
}

.stds-360__picture {
  position: absolute;
  inset: 0;
  display: block;
}

.stds .stds-360 .stds-360__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stds-360__scrim {
  position: absolute;
  inset: 0;
  background-color: var(--_scrim);
}

.stds-360__badge {
  position: absolute;
  color: var(--stds-c-white);
}

.stds-360__badge-mark {
  display: block;
  width: clamp(68.72px, calc(68.72px + 24.74 * var(--stds-fluid)), 93.46px);
  height: auto;
}

.stds-360__badge-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- the coach mark, mobile only ------------------------------------------ */

.stds-360__hint {
  position: absolute;
  inset-inline: 0;
  display: grid;
  justify-items: center;
  /* Badge ink bottom -> pill top. view-360.md §4.4 */
  row-gap: 24px;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.stds-360__hint.is-dismissed {
  opacity: 0;
  visibility: hidden;
}

.stds-360__hint-track {
  position: relative;
  width: 59px;
  height: 22px;
  /* 28 exceeds half the height, so it renders as a stadium. §4.4 */
  border: 1px solid var(--_hint);
  border-radius: 28px;
}

.stds-360__hint-track::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 11px;
  width: 6px;
  height: 6px;
  margin-block-start: -3px;
  border-radius: 50%;
  background-color: var(--_hint);
  animation: stds-360-drag 1.5s infinite;
}

@keyframes stds-360-drag {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(35px); }
}

.stds-360__hint-text {
  font-family: var(--stds-font-body);
  font-weight: var(--stds-fw-medium);
  font-size: 15px;
  letter-spacing: 1.5px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--_hint);
}

/* --- the open state, mobile only ------------------------------------------ */

.stds-360__viewer {
  position: absolute;
  inset: 0;
  display: none;
}

.stds-360__viewer iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.stds-360.is-open .stds-360__viewer {
  display: block;
}

.stds-360.is-open .stds-360__scrim,
.stds-360.is-open .stds-360__badge,
.stds-360.is-open .stds-360__hint {
  display: none;
}

.stds-360.is-loading .stds-360__viewer::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 2px solid rgb(255 255 255 / 0.35);
  border-block-start-color: var(--stds-c-white);
  border-radius: 50%;
  animation: stds-360-spin 0.8s linear infinite;
}

@keyframes stds-360-spin {
  to { transform: rotate(360deg); }
}

.stds .stds-360__close {
  position: absolute;
  inset-block-start: 12.5px;
  inset-inline-end: 9.5px;
  display: none;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--_close);
}

.stds-360.is-open .stds-360__close {
  display: grid;
}

@media (min-width: 1024px) {
  .stds-360__scrim,
  .stds-360__hint,
  .stds-360__viewer,
  .stds .stds-360__close {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stds-360__hint-track::before,
  .stds-360.is-loading .stds-360__viewer::after { animation: none; }
}

/* --- the desktop tour modal ------------------------------------------------ */

.stds-360-modal .fancybox__slide.has-iframe .fancybox__content {
  height: 100%;
  padding: 0;
}

.stds-360-modal .fancybox__content > .carousel__button.is-close {
  inset-block-start: 20px;
  inset-inline-end: 20px;
  z-index: 2;
  width: 24px;
  height: 24px;
  padding: 0;
  color: #FFFFFF;
  opacity: 1;
}

@media (max-width: 1023.98px) {
  .stds-360-modal .fancybox__content > .carousel__button.is-close {
    inset-block-start: 15px;
    inset-inline-end: 15px;
    width: 20px;
    height: 20px;
  }
}

.stds-360-modal .carousel__button.is-close svg {
  width: 100%;
  height: 100%;
  stroke-width: 1;
}

/* ==========================================================================
   360 View / All-Around Brilliance — block-specs/view-360.md
   ========================================================================== */

.stds-view360 {
  --stds-section-pt: clamp(60px, calc(60px + 26.59 * var(--stds-fluid)), 84.59px);
  --stds-section-pb: 0px;
}

.stds-view360__inner {
  display: flex;
  flex-direction: column;
}

.stds-view360__panel { order: 1; }
.stds-view360__media { order: 2; }

.stds-view360__panel {
  position: relative;
  z-index: 1;
  /* 240 of a 375 artboard, inset 68 from the left. §4.2 */
  width: 64%;
  margin-inline-start: 18.133%;
  color: var(--stds-fg-on-brand);
}

.stds-view360__hook {
  display: block;
  width: 63.096%;
  aspect-ratio: 63.096 / 63.636;
  color: var(--stds-c-terracotta);
}

.stds-view360__hook svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 1023.98px) {
  .stds-view360__hook {
    max-inline-size: 167.2px;
  }
}

.stds-view360__panel-body {
  container-type: inline-size;
  padding: clamp(34.27px, calc(34.27px + 64.55 * var(--stds-fluid)), 98.82px)
           clamp(27px, calc(27px + 9.5 * var(--stds-fluid)), 36.5px)
           clamp(31.74px, calc(31.74px + 60.98 * var(--stds-fluid)), 92.72px)
           clamp(27px, calc(27px + 11.5 * var(--stds-fluid)), 38.5px);
  background-color: var(--stds-c-terracotta);
}

.stds-view360__eyebrow {
  position: relative;
  margin: 0;
  padding-inline-start: clamp(24.5px, calc(24.5px + 37 * var(--stds-fluid)), 61.5px);
  color: var(--stds-c-white);
}

.stds-view360__eyebrow::before {
  content: "";
  position: absolute;
  inset-block-start: 0.55em;
  inset-inline-start: 0;
  width: clamp(14px, calc(14px + 26 * var(--stds-fluid)), 40px);
  height: clamp(1px, calc(1px + 1 * var(--stds-fluid)), 2px);
  background-color: var(--stds-c-white);
}

.stds-view360__heading {
  /* Eyebrow ink -> heading ink. §4.5 */
  margin: clamp(21px, calc(21px + 18 * var(--stds-fluid)), 39px) 0 0;
  font-size: min(var(--stds-text-h1), calc(100cqi * 28 / 186));
  letter-spacing: clamp(-0.975px, calc(0px + -0.975 * var(--stds-fluid)), 0px);
  color: var(--stds-c-white);
}

.stds .stds-view360__body {
  /* Heading ink -> body ink. §4.5 */
  margin-block-start: clamp(24px, calc(24px + 32.32 * var(--stds-fluid)), 56.32px);
  /* .stds-t--body carries --stds-lh-body (22 -> 28) against a measured 22 -> 30. §3 */
  line-height: var(--stds-lh-body-loose);
  color: var(--stds-c-white);
}

.stds-view360__media {
  /* The panel square overlaps the photograph's top 91.74 of a 375 artboard. §4.2 */
  margin-block-start: -24.464%;
}

.stds-view360 .stds-360__trigger {
  aspect-ratio: 375 / 667;
}

.stds-view360 .stds-360__badge {
  /* Centred, 250.99 below the photograph's top edge. §4.4 */
  inset-block-start: 37.63%;
  inset-inline: 0;
  display: grid;
  justify-items: center;
}

.stds-view360 .stds-360__hint {
  /* Badge top 250.99 + badge 50.01 + 24 = pill top 325 of a 667 photo. §4.4 */
  inset-block-start: 48.726%;
}

@media (min-width: 1024px) {
  .stds-view360 {
    --stds-section-pb: clamp(0px, calc(0px + 196 * var(--stds-fluid)), 196px);
  }

  .stds-view360__inner {
    position: relative;
    display: block;
  }

  .stds-view360__media {
    width: calc(100% - 2 * var(--stds-gutter));
    max-width: var(--stds-container-max);
    margin: 0 auto;
  }

  .stds-view360 .stds-360__trigger {
    aspect-ratio: 1553 / 716;
  }

  .stds-view360__panel {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    width: clamp(265px, 25.877vw, 496.85px);
    margin-inline-start: 0;
  }

  .stds-view360__heading {
    font-size: min(var(--stds-text-h1), calc(100cqi * 65 / 421.85));
    letter-spacing: -0.015em;
  }

  .stds-view360 .stds-360__badge {
    /* Bottom-left, 46 in and 30.99 up from the photograph's edges. §4.4 */
    inset-block-start: auto;
    inset-block-end: 4.33%;
    inset-inline: 2.962% auto;
    justify-items: start;
  }
}

/* ==========================================================================
   Virtual Office Tour — block-specs/virtual-tour.md
   ========================================================================== */

.stds-vtour {
  --stds-section-pt: clamp(150.5px, calc(150.5px + 90.04 * var(--stds-fluid)), 240.54px);
  /* The photograph's bottom edge IS the section's, at both breakpoints. §4.5 */
  --stds-section-pb: 0px;
}

.stds-vtour__eyebrow {
  position: relative;
  margin: 0;
  padding-inline-start: clamp(24.5px, calc(24.5px + 38 * var(--stds-fluid)), 62.5px);
  color: var(--stds-c-black);
}

.stds-vtour__eyebrow::before {
  content: "";
  position: absolute;
  inset-block-start: 0.55em;
  inset-inline-start: 0;
  width: clamp(14px, calc(14px + 26 * var(--stds-fluid)), 40px);
  height: clamp(1px, calc(1px + 1 * var(--stds-fluid)), 2px);
  /* Terracotta here, white on view-360 — the rule takes the section's fg. §3 */
  background-color: var(--stds-c-terracotta);
}

.stds-vtour__heading {
  margin: clamp(21px, calc(21px + 18 * var(--stds-fluid)), 39px) 0 0;
  color: var(--stds-fg-brand);
}

.stds .stds-vtour__body {
  margin-block-start: clamp(23px, calc(23px + 22.32 * var(--stds-fluid)), 45.32px);
  line-height: var(--stds-lh-body-loose);
  color: var(--stds-c-black);
}

.stds-vtour__media {
  margin-block-start: clamp(49.22px, calc(49.22px + 4.78 * var(--stds-fluid)), 54px);
}

.stds-vtour .stds-360__trigger {
  aspect-ratio: 375 / 667;
}

.stds-vtour .stds-360__badge {
  inset-block-start: 37.63%;
  inset-inline: 0;
  display: grid;
  justify-items: center;
}

.stds-vtour .stds-360__hint {
  inset-block-start: 48.726%;
}

@media (max-width: 1023.98px) {
  .stds-vtour__media {
    margin-inline: calc(-1 * var(--stds-gutter));
  }
}

@media (min-width: 1024px) {
  .stds-vtour {
    --stds-section-pb: clamp(0px, calc(0px + 249.38 * var(--stds-fluid)), 249.38px);
  }

  .stds-vtour__media {
    margin-block-start: clamp(49.22px, calc(49.22px + 0 * var(--stds-fluid)), 49.22px);
  }

  .stds-vtour .stds-360__trigger {
    aspect-ratio: 1553 / 610;
  }

  .stds-vtour .stds-360__badge {
    inset-block-start: auto;
    inset-block-end: 5.08%;
    inset-inline: auto 2.546%;
    justify-items: end;
  }

  .stds-vtour .stds-360__badge--start {
    inset-inline: 2.962% auto;
    justify-items: start;
  }
}

/* ==========================================================================
   Overview of Offices — block-specs/overview-of-offices.md
   ========================================================================== */

.stds-oo {
  --stds-section-pt: 0px;
  --stds-section-pb: clamp(129.93px, calc(129.93px + 243.54 * var(--stds-fluid)), 373.47px);
}

.stds-oo__head,
.stds-oo__media,
.stds-oo__lede,
.stds-oo__tiles {
  width: calc(100% - 2 * var(--stds-gutter));
  max-width: var(--stds-container-max);
  margin-inline: auto;
}

.stds-oo__eyebrow {
  position: relative;
  margin: 0;
  padding-inline-start: clamp(24.5px, calc(24.5px + 39 * var(--stds-fluid)), 63.5px);
  color: var(--stds-c-white);
}

.stds-oo__eyebrow::before {
  content: "";
  position: absolute;
  inset-block-start: 0.55em;
  inset-inline-start: 0;
  width: clamp(14px, calc(14px + 26 * var(--stds-fluid)), 40px);
  height: clamp(1px, calc(1px + 1 * var(--stds-fluid)), 2px);
  background-color: var(--stds-c-white);
}

.stds-oo__title {
  margin: clamp(21px, calc(21px + 13 * var(--stds-fluid)), 34px) 0 0;
  font-family: var(--stds-font-display);
  font-size: var(--stds-text-h1);
  line-height: clamp(30px, calc(30px + 45 * var(--stds-fluid)), 75px);
  font-weight: var(--stds-fw-regular);
  color: var(--stds-c-white);
}

.stds-oo__media {
  margin-block-start: clamp(32px, calc(32px + 38 * var(--stds-fluid)), 64px);
  margin-block-end: 0;
}

.stds-oo__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 375 / 200;
  object-fit: cover;
  object-position: 22.8% 50%;
}

.stds-oo__lede {
  margin-block-start: clamp(23px, calc(23px + 49.02 * var(--stds-fluid)), 72.02px);
  font-size: var(--stds-text-body);
  line-height: var(--stds-lh-body-loose);
  color: var(--stds-c-white);
}

.stds-oo__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 7.473%;
  row-gap: clamp(19.93px, calc(19.93px + 12.14 * var(--stds-fluid)), 32.07px);
  margin-block-start: clamp(131px, calc(131px + 39 * var(--stds-fluid)), 170px);
  margin-block-end: 0;
  padding: 0;
  list-style: none;
}

.stds-oo__tile {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: center;
  padding-block-start: clamp(19px, calc(19px + 55.46 * var(--stds-fluid)), 74.46px);
  padding-inline: clamp(10px, calc(10px + 8 * var(--stds-fluid)), 14px);
  min-height: clamp(148.07px, calc(148.07px + 176.46 * var(--stds-fluid)), 324.53px);
  background-color: var(--stds-c-ink);
  text-align: center;
  color: var(--stds-c-white);
  padding-bottom: 10px;
}

.stds-oo__tile--lead::before,
.stds-oo__tile--tail::before {
  content: "";
  position: absolute;
  width: 63.096%;
  aspect-ratio: 179.778 / 181.326;
  background-color: var(--stds-c-ink);
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20179.778%20181.326%22%3E%3Cpath%20d%3D%22M99.186%2C181.326%20C99.186%2C181.326%2082.141%2C110.035%20179.778%2C66.639%20L179.778%2C0%20C179.778%2C0%2012.398%2C9.295%200%2C181.326%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20179.778%20181.326%22%3E%3Cpath%20d%3D%22M99.186%2C181.326%20C99.186%2C181.326%2082.141%2C110.035%20179.778%2C66.639%20L179.778%2C0%20C179.778%2C0%2012.398%2C9.295%200%2C181.326%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

.stds-oo__tile--lead::before {
  inset-block-end: calc(100% - 0.5px);
  inset-inline-start: 0;
}

.stds-oo__tile--tail::before {
  inset-block-start: calc(100% - 0.5px);
  inset-inline-end: 0;
  transform: rotate(180deg);
}

.stds-oo__tile-title {
  margin: 0;
  font-weight: var(--stds-fw-bold);
}

.stds-oo__tile-body {
  margin-block-start: clamp(16px, calc(16px + 14 * var(--stds-fluid)), 30px);
}

.stds-oo__tile-title,
.stds-oo__tile-body {
  font-family: var(--stds-font-body);
  font-size: var(--stds-text-body);
  /* No token: --stds-lh-body-loose is right at 1920 but 6 too tall at 375. §4.5 */
  line-height: clamp(16px, calc(16px + 14 * var(--stds-fluid)), 30px);
}

@media (min-width: 1024px) {
  .stds-oo__image {
    aspect-ratio: 1553 / 646.98;
    object-position: 50% 50%;
  }
  .stds-oo__lede {
    display: grid;
    grid-template-columns: minmax(0, 38.546%);
    justify-content: end;
  }
}

@media (min-width: 1200px) {
  .stds-oo__tiles {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 2.065%;
  }

  .stds-oo__tile {
    padding-inline: 14px;
  }
}

@media (max-width: 1199.98px) {
  .stds-oo__tiles {
    max-width: 616px;
    padding-inline: 11px;
  }

  .stds-oo__tile:last-child {
    grid-column: 2;
  }
}

@media (max-width: 1023.98px) {
  .stds-oo {
    display: flex;
    flex-direction: column;
  }

  .stds-oo__head   { order: 1; }
  .stds-oo__lede   { order: 2; margin-block-start: clamp(23px, calc(23px + 0 * var(--stds-fluid)), 23px); }
  .stds-oo__media  { order: 3; margin-block-start: 32px; }
  .stds-oo__tiles  { order: 4; }

  .stds-oo__media {
    width: 100%;
  }

  .stds-oo__tiles {
    padding-block-start: calc(0.294369 * (min(100% - 2 * var(--stds-gutter), 616px) - 22px));
    margin-block-start: 48.28px;
  }
}


/* ==========================================================================
   Plans / Schedule of Areas / Specs — block-specs/plans-schedule-specs.md
   ========================================================================== */

.stds-plans {
  --stds-section-pt: clamp(63px, calc(63px + 137 * var(--stds-fluid)), 200px);
  --stds-section-pb: 0px;
  --_square: clamp(70.39px, calc(70.39px + 44.34 * var(--stds-fluid)), 114.73px);
  --_tab-gap: clamp(18.61px, calc(18.61px + 6.67 * var(--stds-fluid)), 25.28px);
  --_coach: #EDEBE9;
}

.stds-plans .panzoom__controls {
  display: none;
}

.stds-plans__eyebrow {
  display: flex;
  align-items: center;
  gap: clamp(10.5px, calc(10.5px + 12.5 * var(--stds-fluid)), 23px);
  margin: 0;
  color: var(--stds-c-black);
}

.stds-plans__eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: clamp(14px, calc(14px + 26 * var(--stds-fluid)), 40px);
  height: clamp(1px, calc(1px + 1 * var(--stds-fluid)), 2px);
  background-color: var(--stds-c-terracotta);
}

.stds-plans__heading {
  margin: 0;
  color: var(--stds-fg-brand);
}

.stds-plans__eyebrow + .stds-plans__heading {
  margin-block-start: clamp(9.5px, calc(9.5px + 31.04 * var(--stds-fluid)), 40.54px);
}

/* To the zone SQUARE's top, not the tab box's — the hook overflows above it. §4.3 */
.stds-plans__body {
  margin-block-start: clamp(92.55px, calc(92.55px + 54.93 * var(--stds-fluid)), 147.48px);
}

.stds-plans__zones {
  display: flex;
  justify-content: center;
  gap: var(--_tab-gap);
}

.stds-plans__zone {
  position: relative;
  flex: 0 0 min(var(--_square), calc((100% - var(--_tab-gap)) / 2));
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background-color: var(--stds-c-terracotta);
  color: var(--stds-c-white);
  opacity: 0.4;
  cursor: pointer;
}

.stds-plans__zone[aria-selected="true"],
.stds-plans__zone:hover,
.stds-plans__zone:focus-visible {
  opacity: 1;
}

.stds-plans__zone::before {
  content: "";
  position: absolute;
  width: 63.095%;
  aspect-ratio: 179.778 / 181.326;
  background-color: var(--stds-c-terracotta);
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20179.778%20181.326%22%3E%3Cpath%20d%3D%22M99.186%2C181.326%20C99.186%2C181.326%2082.141%2C110.035%20179.778%2C66.639%20L179.778%2C0%20C179.778%2C0%2012.398%2C9.295%200%2C181.326%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20179.778%20181.326%22%3E%3Cpath%20d%3D%22M99.186%2C181.326%20C99.186%2C181.326%2082.141%2C110.035%20179.778%2C66.639%20L179.778%2C0%20C179.778%2C0%2012.398%2C9.295%200%2C181.326%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

.stds-plans__zone:first-child::before {
  inset-block-end: calc(100% - 0.5px);
  inset-inline-start: 0;
}

.stds-plans__zone:last-child::before {
  inset-block-start: calc(100% - 0.6px);
  inset-inline-end: 0;
  transform: rotate(180deg);
}

.stds-plans__zone-label {
  font-family: var(--stds-font-display);
  font-size: var(--stds-text-h4);
  line-height: clamp(16px, calc(16px + 15 * var(--stds-fluid)), 31px);
  text-align: center;
}

.stds-plans__views {
  margin: clamp(91.05px, calc(91.05px + 32.2 * var(--stds-fluid)), 123.25px) 0 0;
  padding: 0;
  list-style: none;
}

.stds-plans__view-item + .stds-plans__view-item {
  margin-block-start: clamp(49px, calc(50.67px + -1.67 * var(--stds-fluid)), 50.67px);
}

.stds-plans__view-item {
  display: flex;
  justify-content: center;
}

.stds .stds-plans__view {
  position: relative;
  display: inline-block;
  padding: 0;
  border: 0;
  background: none;
  color: var(--stds-fg-brand);
  text-align: inherit;
  opacity: 0.4;
  cursor: pointer;
}

.stds .stds-plans__view[aria-selected="true"],
.stds .stds-plans__view:hover,
.stds .stds-plans__view:focus-visible {
  opacity: 1;
}

.stds-plans__view[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + clamp(0.5px, calc(0.5px + 3.91 * var(--stds-fluid)), 4.41px));
  height: 1px;
  background-color: currentColor;
}

.stds-plans__figure {
  position: relative;
  aspect-ratio: var(--stds-plan-w, 930) / var(--stds-plan-h, 360.34);
  overflow: hidden;
}

.stds-plans__frame {
  display: block;
  mix-blend-mode: multiply;
}

.stds-plans__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.stds-plans__zoom {
  position: relative;
  flex: 0 0 46.91px;
  width: 46.91px;
  height: 81.06px;
  box-shadow: 4px 4px 4px #0000004D;
  border-radius: 19.59px;
  background-color: var(--stds-bg-control);
}

.stds-plans__zoom--modal {
  display: none;
}

.stds .stds-plans__zoom-btn {
  position: absolute;
  inset-inline: 0;
  display: grid;
  justify-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--stds-c-black);
  cursor: pointer;
}

.stds .stds-plans__zoom-btn[data-plans-zoom="in"] {
  inset-block-start: 0;
  height: 40.03px;
  padding-block-start: 14.2px;
}

.stds .stds-plans__zoom-btn[data-plans-zoom="out"] {
  inset-block-start: 41.01px;
  inset-block-end: 0;
  padding-block-start: 17.11px;
}

.stds-plans__zoom-btn[data-plans-zoom="in"] svg { width: 14.49px; }
.stds-plans__zoom-btn[data-plans-zoom="out"] svg { width: 12.66px; }

.stds-plans__zoom-rule {
  position: absolute;
  inset-block-start: 40.03px;
  inset-inline-start: 7.17px;
  width: 32.57px;
  height: 0.98px;
  background-color: var(--stds-c-black);
}

.stds-plans__stats {
  max-width: 77.32%;
  color: var(--stds-c-black);
}

.stds-plans__stats p + p {
  margin-block-start: var(--stds-lh-body-sm);
}

.stds-plans__legend {
  --_swatch: 22.928%;
  --_swatch-gap: 6.562%;
  --_row-gap: 10.629%;
  --_swatch-shift: -1.255%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stds-plans__stats + .stds-plans__legend {
  margin-block-start: 25.948%;
}

/* Fields render conditionally, so a hidden sibling must not leave its gap. */
.stds-plans__stats[hidden] + .stds-plans__legend,
.stds-plans__legend[hidden] + .stds-plans__caption,
.stds-plans__stats[hidden] + .stds-plans__caption {
  margin-block-start: 0;
}

.stds-plans__legend-row {
  display: flex;
  align-items: flex-start;
}

.stds-plans__legend-row + .stds-plans__legend-row {
  margin-block-start: var(--_row-gap);
}

.stds-plans__swatch {
  flex: 0 0 var(--_swatch);
  margin-block-start: var(--_swatch-shift);
  aspect-ratio: 44.48 / 22.87;
  background-color: var(--stds-swatch, transparent);
}

.stds-plans__legend-label {
  margin-inline-start: var(--_swatch-gap);
  color: var(--stds-c-black);
}

.stds-plans__legend--stage .stds-plans__legend-label,
.stds-plans__caption {
  font-family: var(--stds-font-body);
  font-size: var(--stds-text-body-sm);
  line-height: var(--stds-lh-body-sm);
}

.stds-plans__caption {
  color: var(--stds-c-black);
}

.stds-plans__stats + .stds-plans__caption,
.stds-plans__legend + .stds-plans__caption {
  margin-block-start: var(--stds-space-md);
}

.stds .stds-plans__details,
.stds .stds-plans__modal-details {
  display: inline-block;
  color: var(--stds-fg-brand);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.stds .stds-plans__details[hidden],
.stds .stds-plans__modal-details[hidden] {
  display: none;
}

.stds-plans__legend + .stds-plans__details,
.stds-plans__stats + .stds-plans__details {
  margin-block-start: var(--stds-space-md);
}

/* --- the modal, at BOTH breakpoints (§6.1) --------------------------------- */

.stds-plans__modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow-y: auto;
  /* The drawing's widest drawn box on the desktop popup artboards. */
  --stds-plans-modal-max: 1175px;
  /* #FFFFFF @1 — the fill every modal artboard carries, not the page surface. §4.7 */
  background-color: var(--stds-bg-alt);
}

.stds-plans__modal[hidden] {
  display: none;
}

.stds-plans__modal-panel {
  position: relative;
  display: flow-root;
  width: 375px;
  max-width: 100%;
  min-height: 100%;
  margin-inline: auto;
  padding-block-end: var(--stds-space-2xl);
}

.stds .stds-plans__modal-close {
  position: absolute;
  inset-block-start: 17px;
  inset-inline-end: 14px;
  width: 21.213px;
  height: 21.213px;
  padding: 0;
  border: 0;
  background: none;
  /* #000000, NOT the #F8FAFC the virtual tour's close uses. §4.7 */
  color: var(--stds-c-black);
  cursor: pointer;
}
@media (max-width: 1023px) {
  .stds .stds-plans__modal-close {
    width: 15px;
    height: 15px;
  }
}


.stds-plans__modal-title {
  position: absolute;
  inset-block-start: 55.96px;
  inset-inline: 0;
  transform: translateY(-50%);
  font-family: var(--stds-font-display);
  font-size: 22px;
  line-height: 22px;
  color: var(--stds-fg-brand);
  text-align: center;
}

.stds-plans__modal-figure {
  position: relative;
  width: 40.813%;
  margin: 105.46px auto 0;
}

.stds-plans__modal-stage {
  position: relative;
  aspect-ratio: var(--stds-plan-w, 375) / var(--stds-plan-h, 415);
  overflow: hidden;
}

/*
 * The frame must be exactly the stage, which is already the drawing's own box.
 *
 * Panzoom pins `width`/`height`/`max-width`/`max-height` inline on
 * `.panzoom__content` from its own fit calculation, and re-applies them
 * whenever it re-measures — so clearing them from JS only wins until the next
 * updateMetrics(). Measured mid-fight: a 928x771 stage holding a 928x621 frame,
 * the previous drawing's aspect, which centred the image and pulled it 90px out
 * of line with the title.
 *
 * `!important` beats the inline declarations deterministically, which is the
 * point: sizing is ours, and Panzoom keeps the `transform` it uses for zoom and
 * pan. At scale 1 content and container coincide — the correct "nothing to pan"
 * state — and zooming still scales the frame from here.
 */
.stds-plans__modal-frame {
  position: absolute;
  inset: 0;
}

/*
 * Panzoom INSERTS a `.panzoom__viewport` between the stage and the frame and
 * sizes it inline from its own fit. It does not re-measure when the stage
 * changes shape, so switching drawings left the viewport at the previous one's
 * width — measured 928px inside an 1153px stage — and the frame, which fills
 * its parent, inherited that. The image then centred inside the stage and sat
 * 113px right of the title.
 *
 * This is the element the earlier attempts kept missing: they pinned the frame,
 * which is one level too deep to fix a wrong containing block.
 */
.stds-plans__modal-stage .panzoom__viewport {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}

/*
 * Sized by Panzoom, not by us — the image is now `.panzoom__content` (see the
 * note in stds-plans.php). It used to be pinned to 100%/100% with object-fit
 */
.stds .stds-plans__modal-image {
  position: static;
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.stds-plans__modal.is-rotated .stds-plans__modal-stage {
  /* Inverted: the box's width is the asset's height and vice versa. */
  aspect-ratio: var(--stds-plan-h, 153.047) / var(--stds-plan-w, 395);
}

.stds .stds-plans__modal.is-rotated .stds-plans__modal-image {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: calc(var(--stds-plan-w, 395) / var(--stds-plan-h, 153.047) * 100%);
  height: auto;
  max-width: none;
  aspect-ratio: var(--stds-plan-w, 395) / var(--stds-plan-h, 153.047);
  transform: translate(-50%, -50%) rotate(90deg);
}

.stds-plans__modal-caption {
  max-width: 210px;
  margin: 41.5px 36px 0;
  font-family: var(--stds-font-body);
  font-size: var(--stds-text-legend);
  line-height: 0.9;
  color: var(--stds-c-black);
}

.stds-plans__modal-caption p + p {
  margin-block-start: 1em;
  margin-block-start: 1lh;
}

/* The caption's second run is 8 of the 10 the rest of it sets. §4.7 */
.stds-plans__modal-caption small {
  font-size: 0.8em;
}

.stds-plans__modal-details {
  margin: var(--stds-space-md) 36px 0;
}

.stds-plans__modal-data {
  display: grid;
  grid-template-columns: 144.7fr 158.3fr;
  margin: 29px 36px 0;
}

.stds-plans__modal-data[hidden] {
  display: none;
}

.stds-plans__modal-stats {
  font-family: var(--stds-font-body);
  font-size: var(--stds-text-legend);
  line-height: 1;
  color: var(--stds-c-black);
}

/* 1em at line-height 1 is the blank line the node's 7/17/27 baselines leave. */
.stds-plans__modal-stats p + p {
  margin-block-start: 1em;
}

.stds-plans__legend--modal {
  --_swatch: 14.378%;
  --_swatch-gap: 4.125%;
  --_row-gap: 5.237%;
  --_swatch-shift: -0.287%;
}

.stds-plans__legend--modal .stds-plans__swatch {
  aspect-ratio: 22.76 / 11.71;
}

.stds-plans__legend--modal .stds-plans__legend-label {
  font-family: var(--stds-font-body);
  /* 9 of the caption's 10, and 10.8 leading on that 9. §4.7 */
  font-size: calc(var(--stds-text-legend) * 0.9);
  line-height: 1.2;
}

/*
 * Below 1024 the drawing ran edge to edge — measured 0px either side at 375,
 * against a card that insets it on every mobile artboard. `--stds-gutter` is
 * the system's own page inset (36px at 375), so the popup now matches every
 * other block rather than carrying a second, private number.
 */
.stds-plans__modal.is-wide .stds-plans__modal-figure {
  width: calc(100% - 2 * var(--stds-gutter));
  margin-inline: auto;
  margin-block-start: 92.46px;
}


.stds-plans__modal.is-wide .stds-plans__modal-caption {
  max-width: 144px;
  margin-block-start: 33.5px;
  line-height: 1.1;
}

.stds-plans__coach {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  clip-path: inset(0);
}

/*
 * The cue spans the card, not just the drawing's column.
 *
 * A `stage`-kind plan (Base Plan, Test Fit) keeps its figure at the base
 * 40.813% — 153px against a 375 panel — and the coach, being `inset: 0` of that
 * figure, inherited the same 153px. The artboards draw the black band across the
 * full card width with the drawing centred inside it, so the cue read as a
 * narrow strip around the plan rather than a wash over the card.
 *
 * Widened here rather than by resizing the figure, because the drawing's own
 * width is correct and must not move. `min(375px, 100vw)` is the panel's own
 * width rule, so the band lands on the same gutters as everything else on the
 * card. Above 1024 the coach is display:none, so this is mobile-only by
 * construction; `is-wide` already fills the card and is left alone.
 */
.stds-plans__modal:not(.is-wide) .stds-plans__coach {
  inset-inline: auto;
  inset-inline-start: 50%;
  width: calc(min(375px, 100vw) - 2 * var(--stds-gutter));
  transform: translateX(-50%);
}

.stds-plans__coach.is-dismissed {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  pointer-events: none;
  transition: clip-path 0.45s ease, opacity 0.45s ease;
}

.stds-plans__coach-scrim {
  position: absolute;
  inset: 0;
  /* 0.8, NOT the 0.55 the 360 component's scrim measures. §6 Q11 */
  background-color: rgb(0 0 0 / 0.8);
}

/*
 * Centres the cue on what the reader can SEE.
 *
 * The coach covers the whole drawing, so a drawing taller than the viewport put
 * its midpoint off-screen — Specifications is a 1008px stage in an 865px
 * viewport, and the cue sat near the fold rather than in the middle of the view.
 * Sticking this to the top of the scroll container and giving it one viewport
 * of height centres the mark and label in the visible slice at any scroll
 * position, while the scrim above still covers the full drawing.
 *
 * `max-height: 100%` keeps it honest when the drawing is SHORTER than the
 * viewport — there it collapses back to the stage and centres as before.
 */
.stds-plans__coach-body {
  position: sticky;
  inset-block-start: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100svh;
  max-height: 100%;
}

/* Positioned, so both paint above the scrim: same z-index, later in DOM. */
.stds-plans__coach-mark {
  position: relative;
  flex: none;
  width: 67.19px;
  height: 67.19px;
  color: var(--stds-c-white);
}

.stds-plans__coach-label {
  position: relative;
  margin-block-start: 17px;
  font-family: var(--stds-font-body);
  font-weight: var(--stds-fw-medium);
  font-size: 13px;
  line-height: 13px;
  letter-spacing: 1.3px;
  color: var(--_coach);
  text-align: center;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .stds-plans__coach.is-dismissed { transition-duration: 1ms; }
}

@media (max-width: 1023.98px) {
  .stds-plans__stage {
    display: none;
  }

  .stds-plans__inner {
    position: relative;
  }

  .stds-plans__inner::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset-block-start: calc(100% + 75px);
    inset-inline: 0;
    height: 0.35px;
    background-color: var(--stds-c-black);
  }
}

@media (min-width: 1024px) {
  .stds-plans__body {
    display: grid;
    grid-template-columns: 296fr 1258fr;
  }

  .stds-plans__zones {
    justify-content: flex-start;
  }

  .stds-plans__view-item {
    justify-content: flex-start;
  }

  .stds-plans__stage {
    display: grid;
    grid-template-columns: 995.21fr 262.79fr;
  }

  .stds-plans__plan {
    position: relative;
    align-self: start;
    padding-inline-start: 65.21px;
    margin-block-start: 9.945%;
  }

  .stds-plans__plan .stds-plans__zoom {
    position: absolute;
    inset-block-end: 17.5%;
    inset-inline-start: 0;
  }

  .stds-plans__side {
    grid-column: 2;
    padding-inline-start: 26.176%;
    margin-block-start: 8.806%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
  }

  .stds-plans__modal-panel {
    width: calc(100% - 2 * var(--stds-gutter));
    max-width: var(--stds-container-max);
  }

/* --- the Schedule popup at desktop ------------------------------------- */
  .stds-plans__modal.is-wide .stds-plans__modal-panel {
    display: grid;
    /* Two content-sized columns: the drawing, then its figures. */
    grid-template-columns: auto auto;
    justify-content: center;
    align-content: center;
    column-gap: 48px;
    padding-block: 47px;
  }

  .stds-plans__modal.is-wide .stds-plans__modal-head {
    grid-column: 1 / -1;
  }

  .stds-plans__modal.is-wide .stds-plans__modal-title {
    position: static;
    transform: none;
    margin-block-end: 32px;
    font-size: 47px;
    line-height: 56px;
    text-align: left;
  }

  /*
   * The figure only wraps the stage now. Its old `height: min(...)` read
   * `--stds-plan-w/h`, but stds-plans.js sets those on `[data-plans-modal-figure]`,
   * which is the STAGE — a child. Custom properties inherit downward, so the
   * figure never saw them and every view was sized with the 3636/3020 fallback,
   * i.e. the Schedule's ratio. Sizing the stage instead puts the calculation on
   * the element that actually holds the variables.
   */
  .stds-plans__modal.is-wide .stds-plans__modal-figure {
    grid-column: 1;
    align-self: end;
    width: auto;
    margin: 0;
  }

  /*
   * The stage IS the image box: same ratio, bounded by three limits at once —
   * the design's max width, the viewport height, and the container minus the
   * caption column. Because the box now matches the drawing exactly, Panzoom's
   * fit-and-centre lands on the stage's own bounds instead of centring a
   * smaller frame inside a larger box, which is what pulled the drawing out of
   * line with the title (measured 70-87px, varying per image).
   */
  .stds-plans__modal.is-wide .stds-plans__modal-stage {
    width: min(
      var(--stds-plans-modal-max),
      calc((100vh - 190px) * var(--stds-plan-w, 3636) / var(--stds-plan-h, 3020)),
      calc(min(100vw - 2 * var(--stds-gutter), var(--stds-container-max)) - 260px)
    );
    height: auto;
  }

  .stds-plans__modal.is-wide .stds-plans__modal-caption {
    grid-column: 2;
    align-self: end;
    max-width: 144px;
    margin: 0;
  }

  .stds-plans__zoom--modal {
    display: block;
    position: absolute;
    inset-block-end: 34px;
    inset-inline-end: 31px;
    z-index: 2;
  }

  .stds-plans__coach {
    display: none;
  }
}


/* ==========================================================================
   Lifestyle List — block-specs/lifestyle-list.md
   ========================================================================== */

.stds-lifestyle-list {
  --stds-section-pt: clamp(37px, calc(37px + 86 * var(--stds-fluid)), 123px);
}

.stds-lifestyle-list__items {
  display: grid;
  gap: clamp(14.14px, calc(14.14px + 15.86 * var(--stds-fluid)), 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stds-lifestyle-list__card {
  display: block;
  height: 100%;
}

.stds-lifestyle-list__media {
  margin: 0;
}

.stds-lifestyle-list__image {
  display: block;
  width: 100%;
  aspect-ratio: 498 / 310;
  object-fit: cover;
}

.stds-lifestyle-list__caption {
  padding-block: clamp(17px, calc(17px + 3.5 * var(--stds-fluid)), 20.5px)
                 clamp(13px, calc(13px + 11 * var(--stds-fluid)), 24px);
  padding-inline: clamp(26px, calc(26px + 11 * var(--stds-fluid)), 37px);
}

.stds-lifestyle-list__title,
.stds-lifestyle-list__unit {
  margin: 0;
  color: var(--stds-c-white);
}

.stds-lifestyle-list__title {
  font-size: clamp(16px, calc(16px + 6 * var(--stds-fluid)), 22px);
}

.stds .stds-lifestyle-list__unit {
  margin-block-start: clamp(3px, calc(3px + 2.5 * var(--stds-fluid)), 5.5px);
  font-size: var(--stds-text-body);
  line-height: var(--stds-lh-body);
}

@media (min-width: 1024px) {
  .stds-lifestyle-list__items {
    grid-template-columns: repeat(3, 1fr);
  }

  .stds-lifestyle-list__card {
    box-shadow: 0 0 3px rgb(0 0 0 / 0.251);
  }
}

@media (max-width: 1023.98px) {
  .stds-lifestyle-list__inner::after {
    content: "";
    display: block;
    height: 0.35px;
    margin-block-start: 68px;
    background-color: var(--stds-c-black);
  }
}


/* ==========================================================================
   Facilities Slider — block-specs/facilities-slider.md
   ========================================================================== */

.stds-facilities {
  --stds-section-pt: clamp(36px, calc(36px + 89 * var(--stds-fluid)), 125px);
  --stds-section-pb: clamp(102.99px, calc(102.99px + 185.92 * var(--stds-fluid)), 288.91px);
}

.stds-facilities__slides {
  margin: 0;
  padding: 0;
  list-style: none;
}

.stds-facilities__media {
  margin: 0;
}

.stds-facilities__image {
  display: block;
  width: 100%;
  aspect-ratio: 1026 / 580;
  object-fit: cover;
}

/* 0-3-0: the shared rule is `.stds .slick-slide > div`, which is 0-2-1. */
.stds .stds-facilities__slide > .stds-facilities__caption {
  height: auto;
}

.stds-facilities__caption {
  padding-block-start: clamp(33.58px, calc(33.58px + 20.42 * var(--stds-fluid)), 54px);
  margin-inline: auto;
  text-align: center;
}

.stds-facilities__label {
  margin: 0;
  font-family: var(--stds-font-body);
  font-weight: var(--stds-fw-bold);
  font-size: clamp(16px, calc(16px + 2 * var(--stds-fluid)), 18px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--stds-fg-brand);
  text-transform: uppercase;
}

.stds-facilities__text {
  margin-block-start: clamp(6px, calc(7px + -1 * var(--stds-fluid)), 7px);
  line-height: var(--stds-lh-body-loose);
  color: var(--stds-c-black);
}

.stds-facilities .slick-dots {
  color: var(--stds-c-terracotta);
  margin-block-start: clamp(63px, calc(63px + 2.47 * var(--stds-fluid)), 65.47px);
  margin-block-end: 0;
}

@media (min-width: 1024px) {
  /* 1026 of the 1554 container, centred — 264 clear each side. §4.3 */
  .stds-facilities__media {
    width: 66.023%;
    margin-inline: auto;
  }

  .stds-facilities__caption {
    max-width: 483px;
  }
}


/* ==========================================================================
   Gallery Slider — block-specs/gallery-slider.md
   ========================================================================== */

.stds-gallery {
  --stds-section-pt: clamp(45px, calc(45px + 257 * var(--stds-fluid)), 302px);
  --stds-section-pb: clamp(32px, calc(32px + 157.91 * var(--stds-fluid)), 189.91px);
  overflow: hidden;   /* the comma bleeds to the right edge and stops there */
}

.stds-gallery__mark {
  position: absolute;
  z-index: 0;
  inset-block-start: clamp(96px, calc(207px + -111 * var(--stds-fluid)), 207px);
  inset-inline-end: 0;
  display: block;
  width: clamp(138.26px, calc(138.26px + 358.59 * var(--stds-fluid)), 496.85px);
  color: var(--stds-c-sand);
}

.stds-gallery__mark svg {
  display: block;
  width: 100%;
  height: auto;
}

.stds-gallery__inner {
  position: relative;
  z-index: 1;
}

.stds-gallery__intro {
  max-width: 221.94px;
}

.stds-gallery__body {
  margin-block-start: 56.79px;
}

.stds-gallery__tabs {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.stds-gallery__tab-line {
  display: inline;
}

.stds .stds-gallery__tab {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  color: var(--stds-fg-on-brand);
  line-height: var(--stds-lh-eyebrow);
  text-align: start;
  /* Measured on all four labels at both breakpoints. §4.3 */
  opacity: 0.4;
  cursor: pointer;
}

.stds .stds-gallery__tab[aria-selected="true"],
.stds .stds-gallery__tab:hover,
.stds .stds-gallery__tab:focus-visible {
  opacity: 1;
}

/* Ink gap 23.47 / 55, less each label's own half-leading (2 and 4). §4.3 */
.stds-gallery__tab + .stds-gallery__tab {
  margin-block-start: clamp(24px, calc(19.47px + 27.53 * var(--stds-fluid)), 47px);
}

.stds-gallery__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + clamp(2.41px, calc(2.41px + 1 * var(--stds-fluid)), 3.41px));
  height: 1px;
  background-color: currentColor;
}

.stds-gallery__panels {
  min-width: 0;
  margin-block-start: 32.77px;
}

.stds-gallery__panel,
.stds-gallery__slides,
.stds-gallery .slick-list {
  min-width: 0;
}

.stds-gallery__panel[hidden] {
  display: none;
}

.stds-gallery__slides {
  margin: 0;
  padding: 0;
  list-style: none;
}

.stds-gallery__link {
  position: relative;
  display: block;
}

.stds-gallery__image {
  display: block;
  width: 100%;
  /* 1.93001 at 375 against 1.93000 at 1920, so one registered crop. §4.4 */
  aspect-ratio: 1158 / 600;
  object-fit: cover;
}

.stds-gallery__badge,
.stds-gallery__action {
  position: absolute;
  inset-block-end: clamp(5px, calc(5px + 10 * var(--stds-fluid)), 15px);
  inset-inline-start: clamp(5px, calc(5px + 10 * var(--stds-fluid)), 15px);
  display: flex;
  align-items: center;
  gap: var(--stds-space-xs);
  color: var(--stds-c-white);
}

/* 0 — 2-0 */
.stds .stds-gallery__badge-mark,
.stds .stds-gallery__action-mark {
  display: block;
  width: auto;
  height: clamp(15px, calc(15px + 33.227 * var(--stds-fluid)), 48.227px);
}

.stds-gallery__action-label {
  font-family: var(--stds-font-body);
  font-weight: var(--stds-fw-medium);
  font-size: var(--stds-text-eyebrow);
  letter-spacing: var(--stds-ls-eyebrow);
  text-transform: uppercase;
}

.stds-gallery__credit {
  display: none;
  position: absolute;
  inset-block-end: 16.21px;
  inset-inline-end: 20.52px;
  margin: 0;
  color: var(--stds-c-black);
}

.stds-gallery .slick-dots {
  /* Image bottom → the dash's top edge. §4.5 */
  margin-block-start: clamp(27.99px, calc(27.99px + 17.48 * var(--stds-fluid)), 45.47px);
  margin-block-end: 0;
}

@media (min-width: 1024px) {
  .stds-gallery__intro {
    max-width: 881px;
  }

  .stds-gallery__body {
    display: grid;
    grid-template-columns: minmax(0, 396fr) minmax(0, 1158fr);
    margin-block-start: 188px;
  }

  .stds-gallery__tabs {
    align-self: end;
    margin-block-end: 44.47px;
  }

  .stds-gallery__tab-line {
    display: block;
  }

  .stds-gallery__panels {
    margin-block-start: 0;
  }

  .stds-gallery__credit {
    display: block;
  }

  /* Centred on the IMAGE, not the viewport — 1157.73 against 1158. §4.5 */
  .stds-gallery .slick-dots {
    justify-content: center;
  }
}


/* ==========================================================================
   Smart & Sustainable — block-specs/smart-sustainable.md
   ========================================================================== */

.stds-smartsus {
  --stds-section-pt: clamp(45px, calc(45px + 263 * var(--stds-fluid)), 308px);
  --stds-section-pb: clamp(86px, calc(95px + 249.38 * var(--stds-fluid)), 330.38px);
  position: relative;
  overflow: hidden;
}

.stds-smartsus__mark {
  position: absolute;
  z-index: 0;
  display: block;
  width: clamp(138.26px, calc(138.26px + 358.59 * var(--stds-fluid)), 496.85px);
  color: var(--stds-c-sand);
}

.stds-smartsus__mark svg {
  display: block;
  width: 100%;
  height: auto;
}

.stds-smartsus__mark--a {
  inset-block-start: clamp(247px, calc(247px + 61 * var(--stds-fluid)), 308px);
  inset-inline-end: 0;
  transform: rotate(180deg);
}

.stds-smartsus__mark--b {
  inset-block-start: max(clamp(1457px, calc(1457px + 224 * var(--stds-fluid)), 1681px), 48%);
  inset-inline-start: 0;
}

.stds-smartsus__inner {
  position: relative;
  z-index: 1;
}

.stds-smartsus__intro {
  max-width: clamp(256.94px, calc(256.94px + 382.06 * var(--stds-fluid)), 639px);
}

.stds-smartsus__items {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--stds-gap-grid);
  row-gap: 0;
  margin: 105.41px 0 0;
  padding: 0;
  list-style: none;
}

.stds-smartsus__item {
  grid-column: var(--stds-ss-col-m) / span var(--stds-ss-span-m);
  margin-block-start: var(--stds-ss-offset-m);
}

.stds-smartsus__media {
  margin: 0;
}

.stds-smartsus__image {
  display: block;
  width: 100%;
  aspect-ratio: var(--stds-ss-aspect);
  object-fit: cover;
}

.stds-smartsus__title {
  margin: 0;
  font-size: var(--stds-text-body);
  line-height: clamp(16px, calc(16px + 14 * var(--stds-fluid)), 30px);
  font-weight: var(--stds-fw-bold);
  letter-spacing: var(--stds-ls-none);
  text-transform: uppercase;
  font-family: var(--stds-font-body);
}

.stds-smartsus__body {
  line-height: var(--stds-lh-body-loose);
}

@media (max-width: 768px) {
  .stds-smartsus__body {
    margin-top: 10px;
  }
}

.stds-smartsus__text {
  width: var(--stds-ss-text-w-m, 100%);
}

.stds-smartsus__media + .stds-smartsus__text {
  margin-block-start: clamp(10.6px, calc(10.6px + 13.4 * var(--stds-fluid)), 24px);
}

@media (max-width: 1239.98px) {
  .stds-smartsus__item--text-right,
  .stds-smartsus__item--text-left {
    display: grid;
    align-items: start;
  }

  .stds-smartsus__item--text-right {
    grid-template-columns: 144fr 13fr 146fr;
    column-gap: 0;
  }

  .stds-smartsus__item--text-left {
    grid-template-columns: 152fr 7fr 144fr;
    column-gap: 0;
  }

  .stds-smartsus__item--text-right .stds-smartsus__text {
    grid-column: 3;
  }

  .stds-smartsus__item--text-right .stds-smartsus__media {
    margin-inline-start: calc(-1 * var(--stds-gutter));
    width: calc(100% + var(--stds-gutter));
  }

  .stds-smartsus__item--text-left .stds-smartsus__media {
    grid-column: 3;
    grid-row: 1;
    margin-inline-end: calc(-1 * var(--stds-gutter));
    width: calc(100% + var(--stds-gutter));
  }

  .stds-smartsus__item--text-left .stds-smartsus__text {
    grid-column: 1;
    grid-row: 1;
  }

  .stds-smartsus__item--text-right .stds-smartsus__media + .stds-smartsus__text,
  .stds-smartsus__item--text-left .stds-smartsus__media + .stds-smartsus__text {
    margin-block-start: 0;
  }
}

@media (min-width: 1240px) {
  .stds-smartsus__inner {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--stds-gap-grid);
    row-gap: 0;
  }

  .stds-smartsus__intro {
    grid-row: 1;
    grid-column: 1 / span 6;
  }

  .stds-smartsus__items {
    display: contents;
  }

  .stds-smartsus__item {
    grid-row: var(--stds-ss-row);
    grid-column: var(--stds-ss-col) / span var(--stds-ss-span);
    margin-block-start: var(--stds-ss-offset);
  }

  .stds-smartsus__text {
    width: var(--stds-ss-text-w, 100%);
  }
}


/* --- Gallery lightbox ------------------------------------------------------ */

.stds-gallery-modal .fancybox__content,
.stds-gallery-modal .fancybox__slide {
  padding: 0;
  background: none;
}

.stds-gallery-modal .fancybox__content > picture,
.stds-gallery-modal .fancybox__content > img {
  display: block;
}

.stds-gallery-modal.fancybox__container {
  color: var(--fancybox-color, #fff);
}

.stds-gallery-modal .fancybox__caption {
  display: none;
}

.stds-gallery-modal .panzoom__controls {
  display: none;
}

.stds-gallery-modal__caption {
  --_tile: 75px;
  --_font: 10px;
  --_lead: 12px;
  --_pad: 10px;
  --_comma: 50px;
  --_comma-rise: 25px;
  --_comma-x: 0px;

  position: absolute;
  inset-block-end: -50px;
  inset-inline-start: 20px;
  z-index: 2;
}

@media (min-width: 768px) {
  .stds-gallery-modal__caption {
    --_tile: 100px;
    --_font: 13px;
    --_lead: 15px;
    --_pad: 8px;
    --_comma: 65px;
    --_comma-rise: 36px;
    --_comma-x: -1px;

    inset-block-end: 0;
    inset-inline-start: 0;
  }
}

@media (min-width: 1201px) {
  .stds-gallery-modal__caption {
    --_tile: 105px;
    --_font: 15px;
    --_lead: 18px;
    --_comma: 70px;
  }
}

@media (min-width: 1601px) {
  .stds-gallery-modal__caption {
    --_tile: 120px;
    --_font: 16px;
    --_comma: 76px;
    --_comma-rise: 45px;
  }
}

.stds-gallery-modal__caption p {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--_tile);
  height: var(--_tile);
  margin: 0;
  padding-inline: var(--_pad);
  background-color: var(--stds-c-terracotta);
  font-family: var(--stds-font-display);
  font-size: var(--_font);
  line-height: var(--_lead);
  color: var(--stds-c-white);
  text-align: center;
  text-transform: uppercase;
}

.stds-gallery-modal__caption p::before {
  content: "";
  position: absolute;
  inset-block-start: calc(-100% + var(--_comma-rise));
  inset-inline-start: var(--_comma-x);
  width: var(--_comma);
  height: var(--_comma);
  background-color: var(--stds-c-terracotta);
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20179.778%20181.326%22%3E%3Cpath%20d%3D%22M99.186%2C181.326%20C99.186%2C181.326%2082.141%2C110.035%20179.778%2C66.639%20L179.778%2C0%20C179.778%2C0%2012.398%2C9.295%200%2C181.326%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20179.778%20181.326%22%3E%3Cpath%20d%3D%22M99.186%2C181.326%20C99.186%2C181.326%2082.141%2C110.035%20179.778%2C66.639%20L179.778%2C0%20C179.778%2C0%2012.398%2C9.295%200%2C181.326%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

/* ==========================================================================
   Landing Loader   (global chrome, no layout)
   Spec: block-specs/landing-loader.md
   ========================================================================== */

.stds-loader {
  --stds-loader-ink: #000921;
  --stds-loader-disc: clamp(96px, calc(96px + 124 * var(--stds-fluid, 0px)), 220px);

  position: fixed;
  inset: 0;
  z-index: 2000;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;

  opacity: 0;
  visibility: hidden;

  animation: stds-loader-out 0.3s ease var(--stds-loader-hold, 10s) both;
}

@media print {
  .stds-loader {
    display: none;
  }
}

.stds-loader__backdrop {
  position: absolute;
  inset: 0;
  background: var(--stds-loader-src-m, none) var(--stds-loader-focal-m, 50% 50%) / cover no-repeat var(--stds-loader-ink);
}

@media (min-width: 1024px) {
  .stds-loader__backdrop {
    background-image: var(--stds-loader-src-d, none);
    background-position: var(--stds-loader-focal-d, 50% 50%);
  }
}

.stds-loader__scrim {
  position: absolute;
  inset: 0;
  background-color: var(--stds-loader-ink);
  opacity: 0.7023;
  mix-blend-mode: multiply;
}

.stds-loader--flat .stds-loader__scrim {
  opacity: 1;
  mix-blend-mode: normal;
}

.stds-loader__caption {
  position: absolute;
  inset-block-end: 20.27px;
  inset-inline-start: 27.19px;
  display: none;
  margin: 0;
  color: var(--stds-c-white, #ffffff);
}

@media (min-width: 1024px) {
  .stds-loader__caption {
    display: block;
  }
}

.stds-loader__disc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--stds-loader-disc);
  height: var(--stds-loader-disc);
  border-radius: 50%;
  background-color: var(--stds-c-terracotta, #B96346);
}

.stds-loader__mark {
  width: calc(var(--stds-loader-disc) * 0.36749);
  aspect-ratio: 80.847 / 153.844;
  height: auto;
  color: var(--stds-c-sand, #D1C0AB);

  --stds-loader-pass: 4s;
}

.stds-loader__band {
  clip-path: inset(var(--stds-loader-t, 0%) 0 var(--stds-loader-b, 0%) 0);
}

.stds-loader__wipe {
  animation-duration: var(--stds-loader-pass);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-iteration-count: 4;
  animation-fill-mode: backwards;
}

.stds-loader__band:nth-child(1) .stds-loader__wipe { animation-name: stds-loader-draw-0; }
.stds-loader__band:nth-child(2) .stds-loader__wipe { animation-name: stds-loader-draw-1; }
.stds-loader__band:nth-child(3) .stds-loader__wipe { animation-name: stds-loader-draw-2; }
.stds-loader__band:nth-child(4) .stds-loader__wipe { animation-name: stds-loader-draw-3; }
.stds-loader__band:nth-child(5) .stds-loader__wipe { animation-name: stds-loader-draw-4; }
.stds-loader__band:nth-child(6) .stds-loader__wipe { animation-name: stds-loader-draw-5; }
.stds-loader__band:nth-child(7) .stds-loader__wipe { animation-name: stds-loader-draw-6; }
.stds-loader__band:nth-child(8) .stds-loader__wipe { animation-name: stds-loader-draw-7; }
.stds-loader__band:nth-child(9) .stds-loader__wipe { animation-name: stds-loader-draw-8; }
.stds-loader__band:nth-child(10) .stds-loader__wipe { animation-name: stds-loader-draw-9; }
.stds-loader__band:nth-child(11) .stds-loader__wipe { animation-name: stds-loader-draw-10; }
.stds-loader__band:nth-child(12) .stds-loader__wipe { animation-name: stds-loader-draw-11; }
.stds-loader__band:nth-child(13) .stds-loader__wipe { animation-name: stds-loader-draw-12; }
.stds-loader__band:nth-child(14) .stds-loader__wipe { animation-name: stds-loader-draw-13; }

@keyframes stds-loader-draw-0 {
  0% { clip-path: inset(0 100% 0 0); }
  5.2%, 89.0% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}

@keyframes stds-loader-draw-1 {
  0%, 5.9% { clip-path: inset(0 0 0 100%); }
  11.1%, 89.0% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 100% 0 0); }
}

@keyframes stds-loader-draw-2 {
  0%, 11.8% { clip-path: inset(0 100% 0 0); }
  17.0%, 89.0% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}

@keyframes stds-loader-draw-3 {
  0%, 17.7% { clip-path: inset(0 0 0 100%); }
  22.9%, 89.0% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 100% 0 0); }
}

@keyframes stds-loader-draw-4 {
  0%, 23.6% { clip-path: inset(0 100% 0 0); }
  28.8%, 89.0% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}

@keyframes stds-loader-draw-5 {
  0%, 29.5% { clip-path: inset(0 0 0 100%); }
  34.7%, 89.0% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 100% 0 0); }
}

@keyframes stds-loader-draw-6 {
  0%, 35.4% { clip-path: inset(0 100% 0 0); }
  40.6%, 89.0% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}

@keyframes stds-loader-draw-7 {
  0%, 41.3% { clip-path: inset(0 0 0 100%); }
  46.5%, 89.0% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 100% 0 0); }
}

@keyframes stds-loader-draw-8 {
  0%, 47.2% { clip-path: inset(0 100% 0 0); }
  52.4%, 89.0% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}

@keyframes stds-loader-draw-9 {
  0%, 53.1% { clip-path: inset(0 0 0 100%); }
  58.3%, 89.0% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 100% 0 0); }
}

@keyframes stds-loader-draw-10 {
  0%, 59.0% { clip-path: inset(0 100% 0 0); }
  64.2%, 89.0% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}

@keyframes stds-loader-draw-11 {
  0%, 64.9% { clip-path: inset(0 0 0 100%); }
  70.1%, 89.0% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 100% 0 0); }
}

@keyframes stds-loader-draw-12 {
  0%, 70.8% { clip-path: inset(0 100% 0 0); }
  76.0%, 89.0% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}

@keyframes stds-loader-draw-13 {
  0%, 76.7% { clip-path: inset(0 0 0 100%); }
  81.9%, 89.0% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 100% 0 0); }
}

@keyframes stds-loader-out {
  from { opacity: 1; visibility: visible; }
  to   { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .stds-loader__mark {
    animation: stds-loader-fade-in 0.6s ease both;
  }
}

@keyframes stds-loader-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}