/* Homepage redesign. Scoped to .fx-* so the locked hero and quote form keep home.css. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("./fonts/cormorant-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("./fonts/cormorant-300i.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("./fonts/cormorant-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("./fonts/inter-tight-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("./fonts/inter-tight-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

html { scroll-padding-top: 88px; }
main > section { scroll-margin-top: 88px; }

.fx-page,
.fx-grade,
.fx-install,
.fx-product,
.fx-header,
.fx-menu,
.fx-drawer,
.fx-cue,
.fx-cursor,
.fx-float,
.fx-bar {
  --fx-ink: #1c1a17;
  --fx-ink-soft: #4a453e;
  --fx-stone: #766e64;
  --fx-stone-light: #a39a8e;
  --fx-line: #e2dbcf;
  --fx-line-dark: rgb(245 241 234 / 14%);
  --fx-linen: #f5f1ea;
  --fx-paper: #fbf9f5;
  --fx-sand: #ede6da;
  --fx-oak: #b08a5b;
  --fx-oak-deep: #8c6a43;
  --fx-charcoal: #1f1d1a;
  --fx-charcoal-2: #2a2724;
  --fx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fx-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --fx-ease-hover: cubic-bezier(0.25, 0.1, 0.25, 1);
  --fx-serif: "Cormorant Garamond", "Palatino Linotype", Palatino, serif;
  --fx-sans: "Inter Tight", "Segoe UI", sans-serif;
  --fx-margin: clamp(20px, 5vw, 80px);
  --fx-section: clamp(96px, 12vw, 160px);
  --fx-max: 1440px;
  color-scheme: light;
}

.fx-page {
  background: var(--fx-linen);
  color: var(--fx-ink);
  font-family: var(--fx-sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
}

.fx-page ::selection { background: var(--fx-oak); color: var(--fx-ink); }

.fx-page h2,
.fx-page h3,
.fx-menu h2,
.fx-drawer h2,
.fx-drawer h3 {
  font-family: var(--fx-serif);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}
[data-locked="form"] h2,
[data-locked="form"] h3 {
  font-family: "Schibsted Grotesk", "Segoe UI", sans-serif;
  font-weight: 560;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
html.fx-lock { overflow: hidden; }

.fx-page h2 em,
.fx-page h3 em,
.fx-menu em,
.fx-drawer em {
  font-style: italic;
  font-weight: 300;
}

.fx-page p { text-wrap: pretty; }
.fx-page figure,
.fx-mega figure { margin: 0; }

.fx-page :where(a) { color: inherit; }

.fx-num {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Header */
.fx-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: 80px;
  color: var(--fx-linen);
  font-family: var(--fx-sans);
  transition: transform 500ms var(--fx-ease), height 400ms var(--fx-ease), background-color 400ms var(--fx-ease), color 400ms var(--fx-ease);
}
.fx-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 35%), transparent);
  pointer-events: none;
  transition: opacity 400ms var(--fx-ease);
}
.fx-header.is-solid {
  height: 64px;
  color: var(--fx-ink);
  background: rgb(245 241 234 / 94%);
  backdrop-filter: saturate(140%) blur(14px);
  box-shadow: inset 0 -1px 0 var(--fx-line);
}
.fx-header.is-solid::before { opacity: 0; }
.fx-header.is-hidden { transform: translateY(-100%); }

.fx-header__bar {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
  padding-inline: var(--fx-margin);
  max-width: 1680px;
  margin-inline: auto;
}

.fx-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
}
.fx-wordmark__mark {
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.28em;
}
.fx-wordmark__place {
  font-family: var(--fx-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 0;
}

.fx-nav {
  display: none;
  align-items: center;
  align-self: stretch;
  height: 100%;
  gap: 14px;
  margin-left: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.fx-nav__item {
  display: flex;
  align-items: center;
  align-self: stretch;
}
.fx-nav > a,
.fx-nav__item > a,
.fx-nav__btn {
  position: relative;
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  background: none;
  border: 0;
  padding: 8px 0;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.fx-nav > a::after,
.fx-nav__item > a::after,
.fx-nav__btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms var(--fx-ease);
}
.fx-nav > a:hover::after,
.fx-nav__item > a:hover::after,
.fx-nav__item:focus-within > a::after,
.fx-nav__btn:hover::after,
.fx-nav__btn[aria-expanded="true"]::after { transform: scaleX(1); }
.fx-nav > a.is-current::before,
.fx-nav__item > a.is-current::before,
.fx-nav__btn.is-current::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 999px;
  background: var(--fx-oak);
}

.fx-drop {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 4;
  background: var(--fx-linen);
  color: var(--fx-ink);
  padding: 28px var(--fx-margin) 32px;
  border-bottom: 1px solid var(--fx-line);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 36px;
}
.fx-nav__item:hover > .fx-drop,
.fx-nav__item:focus-within > .fx-drop { display: grid; }
.fx-drop--narrow { grid-template-columns: minmax(220px, 320px); }
.fx-drop--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fx-drop__label {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fx-stone);
}
.fx-drop a {
  display: block;
  padding: 6px 0;
  color: var(--fx-ink);
  text-decoration: none;
  font-size: 15px;
}
.fx-drop a:hover { color: var(--fx-oak); }
.fx-drop__hub {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--fx-line);
}
.fx-header:has(.fx-nav__item:hover),
.fx-header:has(.fx-nav__item:focus-within) {
  color: var(--fx-ink);
  background: var(--fx-linen);
}
.fx-header:has(.fx-nav__item:hover)::before,
.fx-header:has(.fx-nav__item:focus-within)::before { opacity: 0; }

.fx-header__tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
}
.fx-phone {
  display: none;
  text-decoration: none;
  color: inherit;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.fx-phone-icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: inherit;
}
.fx-phone-icon svg { display: block; }
.fx-menu-open {
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  min-height: 44px;
  cursor: pointer;
}

/* Buttons */
.fx-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  padding: 0 28px 0 32px;
  border: 0;
  border-radius: 0;
  background: var(--fx-ink);
  color: var(--fx-linen);
  font-family: var(--fx-sans);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition: transform 80ms linear;
}
.fx-btn--sm { height: 44px; padding: 0 18px 0 20px; }
.fx-btn--linen { background: var(--fx-linen); color: var(--fx-ink); }
.fx-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fx-oak-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--fx-ease);
  z-index: -1;
}
.fx-btn--linen::before { background: var(--fx-oak); }
.fx-btn:hover::before { transform: scaleX(1); }
.fx-btn:hover .fx-btn__arrow { transform: translateX(4px); }
.fx-btn:active { transform: translateY(1px); }
.fx-btn:focus-visible { outline: 2px solid var(--fx-oak); outline-offset: 4px; }
.fx-btn[disabled] { background: var(--fx-sand); color: var(--fx-stone); pointer-events: none; }
.fx-btn[disabled]::before { display: none; }
.fx-btn__arrow { transition: transform 240ms var(--fx-ease-hover); }

.fx-btn--line {
  background: transparent;
  color: var(--fx-ink);
  box-shadow: inset 0 0 0 1px var(--fx-ink);
}
.fx-btn--line::before {
  background: var(--fx-ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 450ms var(--fx-ease);
}
.fx-btn--line:hover { color: var(--fx-linen); }
.fx-btn--line:hover::before { transform: scaleY(1); }
.fx-on-dark .fx-btn--line {
  color: var(--fx-linen);
  box-shadow: inset 0 0 0 1px var(--fx-line-dark);
}

.fx-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fx-ink);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  background-image: linear-gradient(var(--fx-line), var(--fx-line)), linear-gradient(var(--fx-oak), var(--fx-oak));
  background-repeat: no-repeat;
  background-size: 100% 1px, 0 1px;
  background-position: 0 calc(100% + 4px), 0 calc(100% + 4px);
  transition: background-size 400ms var(--fx-ease);
}
.fx-link:hover { background-size: 100% 1px, 100% 1px; }
.fx-link:hover .fx-link__arrow { transform: translateX(3px); }
.fx-link__arrow { transition: transform 240ms var(--fx-ease-hover); }
.fx-on-dark .fx-link { color: var(--fx-linen); }

.fx-eye {
  margin: 0 0 24px;
  font-family: var(--fx-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fx-stone);
}
.fx-eye b { color: var(--fx-oak); font-weight: 500; }
.fx-on-dark .fx-eye { color: var(--fx-stone-light); }

.fx-lead {
  max-width: 48ch;
  margin: 32px 0 0;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
  color: var(--fx-ink-soft);
}
.fx-on-dark .fx-lead,
.fx-on-dark .fx-body { color: var(--fx-stone-light); }
.fx-body { margin: 16px 0 0; max-width: 62ch; color: var(--fx-ink-soft); }
.fx-display {
  font-size: clamp(38px, 5vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 18ch;
}
.fx-display-m {
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 16ch;
}
.fx-display-s {
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.15;
}

.fx-grid {
  width: min(var(--fx-max), calc(100% - (var(--fx-margin) * 2)));
  margin-inline: auto;
}

/* Scroll cue, outside the hero */
.fx-cue {
  position: fixed;
  left: var(--fx-margin);
  bottom: 132px;
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--fx-linen);
  pointer-events: none;
  font-family: var(--fx-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
}
.fx-cue i {
  display: block;
  width: 1px;
  height: 56px;
  background: var(--fx-linen);
  transform-origin: top;
  animation: fx-cue 1.8s var(--fx-ease) infinite;
}
.fx-cue.is-gone { opacity: 0; }
@keyframes fx-cue {
  0% { transform: scaleY(0); }
  55% { transform: scaleY(1); }
  100% { transform: scaleY(1); opacity: 0; }
}

/* Trust */
.fx-trust {
  background: var(--fx-paper);
  border-top: 1px solid var(--fx-line);
  border-bottom: 1px solid var(--fx-line);
}
.fx-trust dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
  min-height: 112px;
}
.fx-trust div {
  padding: 22px 18px;
  border-bottom: 1px solid var(--fx-line);
  border-right: 1px solid var(--fx-line);
}
.fx-trust div:nth-child(2n) { border-right: 0; }
.fx-trust dt {
  margin: 8px 0 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fx-stone);
  font-weight: 500;
}
.fx-trust dd {
  margin: 0;
  font-family: var(--fx-serif);
  font-weight: 300;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.15;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Positioning */
.fx-split { padding: var(--fx-section) 0; background: var(--fx-linen); }
.fx-split h2 {
  font-size: clamp(48px, 6vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  max-width: 18ch;
}
.fx-doors {
  display: grid;
  margin-top: 56px;
  border-top: 1px solid var(--fx-line);
}
.fx-door {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 28px 0 8px;
}
.fx-door .fx-frame { aspect-ratio: 4 / 3; }
.fx-door h3 { margin-top: 22px; }
.fx-door p { margin: 12px 0 18px; max-width: 36ch; color: var(--fx-ink-soft); }
.fx-both {
  margin: 48px 0 0;
  text-align: center;
  font-family: var(--fx-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.15;
}
.fx-both .fx-link { font-style: normal; margin-left: 12px; }

/* Frames */
.fx-frame {
  position: relative;
  background: var(--fx-sand);
  overflow: hidden;
}
.fx-frame img,
.fx-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
  display: block;
}
.fx-frame.fx-await { clip-path: inset(12% 0 12% 0); }
.fx-frame.fx-await img { transform: scale(1.12); }
.fx-frame.fx-await.is-in {
  clip-path: inset(0);
  transition: clip-path 1400ms var(--fx-ease);
}
.fx-frame.fx-await.is-in img {
  transform: none;
  transition: transform 1400ms var(--fx-ease);
}

/* Collection */
.fx-collection { padding: 0 0 var(--fx-section); background: var(--fx-linen); border-top: 1px solid var(--fx-line); }
.fx-collection__head {
  padding-top: var(--fx-section);
  display: grid;
  gap: 28px;
}
.fx-triptych {
  display: flex;
  gap: 12px;
  margin-top: 48px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.fx-triptych::-webkit-scrollbar { display: none; }
.fx-panel {
  position: relative;
  flex: 0 0 85%;
  scroll-snap-align: start;
  height: 72vh;
  max-height: 820px;
  min-height: 420px;
  color: var(--fx-linen);
  text-decoration: none;
  overflow: hidden;
  background: var(--fx-sand);
}
.fx-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 1200ms var(--fx-ease);
}
.fx-panel:hover img,
.fx-panel:focus-visible img { transform: scale(1); }
.fx-panel__shade {
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgb(28 26 23 / 60%), transparent);
}
.fx-panel__copy {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
}
.fx-panel__copy p,
.fx-panel__copy .fx-link { display: none; }
.fx-panel__n {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  opacity: 0.7;
}
.fx-panel h3 { color: var(--fx-linen); margin-top: 8px; }
.fx-spec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 28px 0 0;
  border-top: 1px solid var(--fx-line);
}
.fx-spec div { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--fx-line); }
.fx-spec dt {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fx-stone);
}
.fx-spec dd { margin: 6px 0 0; font-variant-numeric: tabular-nums lining-nums; }
.fx-counter {
  margin: 12px 0 0;
  text-align: right;
  font-family: var(--fx-serif);
  font-variant-numeric: tabular-nums;
  color: var(--fx-stone);
}
.fx-progress { height: 1px; background: var(--fx-line); margin-top: 8px; }
.fx-progress i {
  display: block;
  height: 1px;
  background: var(--fx-oak);
  width: 33%;
  transform-origin: left;
}

/* Services */
.fx-services {
  background: var(--fx-charcoal);
  color: var(--fx-linen);
  padding: var(--fx-section) 0;
  color-scheme: dark;
}
.fx-services .fx-display { max-width: 16ch; }
.fx-svc-list { margin-top: 56px; border-top: 1px solid var(--fx-line-dark); }
a.fx-svc { text-decoration: none; color: inherit; }
.fx-product #package .fx-svc__meta {
  font-size: 17px;
  line-height: 1.55;
}
.fx-svc {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  align-items: baseline;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--fx-line-dark);
  color: inherit;
  font-family: inherit;
  min-height: 88px;
  padding: 18px 0;
  cursor: pointer;
}
.fx-svc__n { color: var(--fx-oak); font-size: 13px; font-variant-numeric: tabular-nums; grid-row: 1 / span 2; }
.fx-svc__name {
  font-family: var(--fx-serif);
  font-weight: 300;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.15;
  transition: transform 400ms var(--fx-ease);
}
.fx-svc__meta { color: var(--fx-stone-light); font-size: 13px; }
.fx-svc__arrow { display: none; }
.fx-svc-list.is-hot .fx-svc { opacity: 0.4; }
.fx-svc-list.is-hot .fx-svc:hover,
.fx-svc-list.is-hot .fx-svc:focus-visible { opacity: 1; }
.fx-svc:hover .fx-svc__name,
.fx-svc:focus-visible .fx-svc__name { transform: translateX(16px); }
.fx-svc:hover,
.fx-svc:focus-visible { border-bottom-color: var(--fx-oak); }

.fx-marquee { margin-top: 36px; max-width: 100%; min-width: 0; overflow: hidden; }
.fx-marquee__controls { display: flex; justify-content: flex-end; }
.fx-marquee__pause {
  background: none;
  border: 0;
  color: var(--fx-stone-light);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 44px;
}
.fx-marquee__track {
  display: flex;
  gap: 32px;
  width: max-content;
  animation: fx-marquee 60s linear infinite;
}
.fx-marquee.is-paused .fx-marquee__track { animation-play-state: paused; }
.fx-marquee__track p { margin: 0; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fx-stone-light); }
.fx-marquee a { text-decoration: none; }
.fx-marquee a:hover { color: var(--fx-linen); }
@keyframes fx-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.fx-float {
  position: fixed;
  width: 220px;
  height: 280px;
  pointer-events: none;
  z-index: 45;
  overflow: hidden;
  opacity: 0;
  clip-path: inset(12% 0 12% 0);
  transition: opacity 400ms var(--fx-ease), clip-path 700ms var(--fx-ease);
}
.fx-float.is-on { opacity: 1; clip-path: inset(0); }
.fx-float img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Drawer */
.fx-drawer {
  width: min(560px, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0 0 0 auto;
  border: 0;
  padding: 0;
  background: var(--fx-linen);
  color: var(--fx-ink);
  font-family: var(--fx-sans);
}
.fx-drawer::backdrop { background: rgb(28 26 23 / 48%); }
.fx-drawer__inner { padding: 28px var(--fx-margin) 48px; overflow: auto; height: 100%; }
.fx-drawer__close {
  background: none;
  border: 0;
  font-family: inherit;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 13px;
  cursor: pointer;
  min-height: 44px;
}
.fx-drawer__photo { aspect-ratio: 16 / 10; margin: 12px 0 24px; }
.fx-drawer ul { margin: 12px 0 0; padding: 0; list-style: none; }
.fx-drawer li { padding: 8px 0; border-bottom: 1px solid var(--fx-line); }
.fx-drawer li::before { content: "— "; color: var(--fx-oak); }

/* BYO + standards + colour */
.fx-byo { background: var(--fx-paper); padding: var(--fx-section) 0; }
.fx-byo__photo { aspect-ratio: 4 / 5; }
.fx-steps { list-style: none; margin: 28px 0; padding: 0; }
.fx-steps li { padding: 16px 0; border-top: 1px solid var(--fx-line); }
.fx-steps strong { display: block; font-family: var(--fx-serif); font-weight: 300; font-size: 24px; }
.fx-tags { color: var(--fx-stone); font-size: 13px; letter-spacing: 0.02em; }
.fx-note { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--fx-line); color: var(--fx-stone); font-size: 13px; }

.fx-standards { background: var(--fx-linen); padding: var(--fx-section) 0 0; }
.fx-std {
  display: grid;
  gap: 0;
  margin-top: 36px;
}
.fx-std article { padding: 22px 0; border-top: 1px solid var(--fx-line); }
.fx-std span { color: var(--fx-oak); font-size: 13px; font-variant-numeric: tabular-nums; }
.fx-std p { margin: 8px 0 0; color: var(--fx-ink-soft); }
.fx-bleed {
  margin-top: 48px;
  width: 100%;
}
.fx-bleed .fx-frame { aspect-ratio: 21 / 9; }
.fx-cap {
  width: min(var(--fx-max), calc(100% - (var(--fx-margin) * 2)));
  margin: 10px auto 0;
  color: var(--fx-stone);
  font-size: 13px;
  padding-bottom: 28px;
}

.fx-colour { background: var(--fx-paper); padding: var(--fx-section) 0; }
.fx-viewer { margin-top: 28px; }
.fx-viewer__stage { position: relative; aspect-ratio: 3 / 2; background: var(--fx-sand); overflow: hidden; }
.fx-viewer__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.02); transition: opacity 600ms var(--fx-ease), transform 600ms var(--fx-ease); }
.fx-viewer__stage img.is-on { opacity: 1; transform: none; }
.fx-swatches { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.fx-swatch {
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 999px;
  border: 0;
  background: var(--fx-sand) center/cover;
  cursor: pointer;
}
.fx-swatch[aria-checked="true"] { outline: 1px solid var(--fx-ink); outline-offset: 4px; }
.fx-swatch:hover { transform: scale(1.06); }
.fx-colour__name { min-height: 1.2em; overflow: hidden; }
.fx-roll { display: block; transition: transform 450ms var(--fx-ease); }

/* Craft */
.fx-craft { background: var(--fx-charcoal); color: var(--fx-linen); color-scheme: dark; }
.fx-craft__media { display: none; }
.fx-craft article { padding: 0 var(--fx-margin) 56px; }
.fx-craft article .fx-frame { aspect-ratio: 4 / 3; margin-bottom: 18px; }
.fx-craft button {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 8px 14px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fx-craft button:focus-visible { outline: 1px solid var(--fx-oak); outline-offset: 6px; }
.fx-craft__n {
  color: var(--fx-oak);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  padding-top: 7px;
}
.fx-craft h2,
.fx-craft h3 { max-width: 16ch; }
.fx-craft .fx-body { margin-top: 10px; }

/* Projects */
.fx-projects { background: var(--fx-linen); padding: var(--fx-section) 0; }
.fx-filters { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 28px; }
.fx-filters button {
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--fx-stone);
  min-height: 44px;
  cursor: pointer;
  padding: 0;
}
.fx-filters button[aria-pressed="true"] { color: var(--fx-ink); border-bottom-color: var(--fx-ink); }
.fx-mosaic { margin-top: 36px; display: grid; gap: 36px 20px; }
.fx-tile { text-decoration: none; color: inherit; display: block; }
.fx-tile .fx-frame { aspect-ratio: 4 / 3; }
.fx-tile h3 { margin-top: 16px; }
.fx-tile p { margin: 8px 0 0; color: var(--fx-stone); font-size: 13px; }
.fx-meta {
  margin: 14px 0 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fx-stone);
}
.fx-empty { color: var(--fx-stone); margin-top: 28px; }

/* Why + price + process */
.fx-why { background: var(--fx-paper); padding: var(--fx-section) 0; }
.fx-why-list { margin-top: 12px; }
.fx-why-list article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  padding: 22px 0;
  border-top: 1px solid var(--fx-line);
}
.fx-why-list span { color: var(--fx-oak); font-size: 13px; }
.fx-why-list p { grid-column: 2; margin: 0; color: var(--fx-ink-soft); }
.fx-why-list h3 { transition: transform 400ms var(--fx-ease); }
.fx-why-list article:hover h3 { transform: translateX(8px); }
.fx-why-list article:hover { box-shadow: inset 0 1px 0 var(--fx-oak); }
.fx-drawing { margin-top: 28px; width: min(420px, 100%); }
.fx-drawing path, .fx-drawing line, .fx-drawing rect {
  fill: none;
  stroke: var(--fx-ink);
  stroke-width: 1;
}
.fx-draw {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
}
.fx-draw.is-in { animation: fx-draw 1.6s var(--fx-ease) forwards; }
@keyframes fx-draw { to { stroke-dashoffset: 0; } }
.fx-drawing text { fill: var(--fx-stone); font-size: 11px; letter-spacing: 0.12em; font-family: var(--fx-sans); }

.fx-layers {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(8.5rem, 0.85fr);
  gap: 4px 18px;
  align-items: stretch;
  margin: 32px 0 0;
}
.fx-layers img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 22px rgb(28 26 23 / 13%));
}
.fx-layers ol {
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0;
}
.fx-layers li {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  transform: translateY(-40%);
}
.fx-layers li:nth-child(1) { top: 32%; }
.fx-layers li:nth-child(2) { top: 52%; }
.fx-layers li:nth-child(3) { top: 74%; }
.fx-layers b {
  display: block;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fx-oak);
}
.fx-layers span {
  display: block;
  margin-top: 6px;
  color: var(--fx-ink-soft);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
}
@media (max-width: 640px) {
  .fx-layers { grid-template-columns: 1fr; }
  .fx-layers ol { display: flex; flex-direction: column; gap: 16px; height: auto; }
  .fx-layers li { position: static; transform: none; }
}

.fx-price { background: var(--fx-linen); padding: var(--fx-section) 0; }
.fx-price__head { text-align: center; }
.fx-price__head h2 { margin-inline: auto; }
.fx-plans { margin-top: 48px; display: grid; }
.fx-plan { padding: 28px 0; border-top: 1px solid var(--fx-line); }
.fx-plan h3 { font-family: var(--fx-sans); font-weight: 500; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.fx-plan .fx-price-num {
  font-family: var(--fx-serif);
  font-weight: 300;
  font-size: clamp(30px, 3.4vw, 52px);
  margin: 12px 0 0;
  font-variant-numeric: tabular-nums lining-nums;
}
.fx-plan ul { list-style: none; margin: 18px 0 28px; padding: 0; }
.fx-plan li { padding: 8px 0; border-top: 1px solid var(--fx-line); color: var(--fx-ink-soft); }
.fx-plan.is-focus { background: var(--fx-paper); padding: 36px 22px 28px; }
.fx-plan .fx-kicker { color: var(--fx-oak); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }

.fx-process { background: var(--fx-paper); padding: var(--fx-section) 0; }
.fx-time { list-style: none; margin: 40px 0 0; padding: 0; border-left: 1px solid var(--fx-line); }
.fx-time li { padding: 0 0 36px 22px; position: relative; }
.fx-time li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--fx-line);
}
.fx-time li.is-on::before { background: var(--fx-oak); }
.fx-time .fx-frame { width: 120px; aspect-ratio: 1; margin-bottom: 12px; }

/* Homepage process sequence. Scoped so the older timeline, and the test page, stay as they are. */
.fx-process .fx-seq {
  display: flex;
  gap: 0;
  width: calc(100% + var(--fx-margin));
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  scrollbar-width: none;
}
.fx-process .fx-seq::-webkit-scrollbar { display: none; }
.fx-process .fx-seq li {
  position: relative;
  flex: 0 0 78%;
  scroll-snap-align: start;
  border-top: 1px solid var(--fx-line);
  padding: 22px 28px 0 0;
}
.fx-process .fx-seq li::before { left: 0; top: -4px; }
.fx-process .fx-seq__still {
  display: grid;
  place-items: center;
  height: 200px;
  margin: 0 0 16px;
}
.fx-process .fx-seq__still img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  filter: drop-shadow(0 18px 22px rgb(28 26 23 / 13%));
}
.fx-process .fx-seq .fx-eye { margin: 0; }
.fx-process .fx-seq h3 {
  margin: 8px 0 0;
  font-size: clamp(22px, 1.6vw, 28px);
}
.fx-process .fx-seq .fx-body {
  margin-top: 8px;
  max-width: 32ch;
  font-size: 15px;
  line-height: 1.45;
}
@media (min-width: 1024px) {
  .fx-process .fx-seq {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 28px;
    width: auto;
    margin-top: 36px;
    overflow: visible;
    scroll-snap-type: none;
    border-top: 1px solid var(--fx-line);
  }
  .fx-process .fx-seq li {
    flex: none;
    border-top: 0;
    padding: 26px 4px 0 0;
  }
  .fx-process .fx-seq__still { height: 250px; }
}

/* Quote surround. The sheet restores the locked form’s dark field. */
.fx-quote {
  position: relative;
  padding: var(--fx-section) 0;
  background:
    linear-gradient(rgb(31 29 26 / 82%), rgb(31 29 26 / 82%)),
    url("./projects/assets/soft-white-mississauga-chevron/large/copy-of-photo-2024-01-22-14-37-50.webp") center 72%/cover;
  color: var(--fx-linen);
  color-scheme: dark;
}
.fx-quote__grid { display: grid; gap: 36px; }
.fx-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.fx-pill {
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--fx-line-dark);
  background: transparent;
  color: var(--fx-linen);
  font-family: var(--fx-sans);
  font-size: 14px;
  cursor: pointer;
}
.fx-pill[aria-pressed="true"] { background: var(--fx-linen); color: var(--fx-ink); border-color: var(--fx-linen); }
.fx-quote .fx-contact { margin-top: 28px; }
.fx-quote .fx-contact a { text-decoration: none; }
.fx-quote .fx-contact .fx-display-s { display: block; margin: 6px 0; }
.fx-form-sheet {
  background: #121317;
  color: #f3efe6;
  padding: 56px 28px;
  --ink: #f3efe6;
  --ink-dim: #d5cec3;
  --ground: #121317;
  --ground-2: #191b21;
  --ground-3: #22252c;
  --line: rgb(243 239 230 / 16%);
  --oak: #c4a574;
  --ink-on-oak: #1c140e;
  font-family: "Schibsted Grotesk", "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color-scheme: dark;
}

/* Showroom, FAQ, footer */
.fx-guides { background: var(--fx-linen); padding: var(--fx-section) 0; border-top: 1px solid var(--fx-line); }
.fx-guides .fx-grid { display: grid; gap: 36px; }
.fx-guide-list { list-style: none; margin: 0; padding: 0; }
.fx-guide-list a {
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--fx-line);
  text-decoration: none;
  color: inherit;
}
.fx-guide-list li:last-child a { border-bottom: 1px solid var(--fx-line); }
.fx-guide-list span {
  grid-row: 1 / span 2;
  padding-top: 8px;
  color: var(--fx-oak);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.fx-guide-list strong {
  font-family: var(--fx-serif);
  font-weight: 300;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.05;
}
.fx-guide-list p { margin: 6px 0 0; color: var(--fx-ink-soft); }
.fx-guide-list a:hover strong { color: var(--fx-oak); }

.fx-show { display: grid; background: var(--fx-linen); }
.fx-show__photo { min-height: 360px; aspect-ratio: 4 / 5; }
.fx-show__copy { padding: var(--fx-section) var(--fx-margin); }
.fx-hours { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 22px 0; }
.fx-hours dt { color: var(--fx-stone); }
.fx-hours dd { margin: 0; font-variant-numeric: tabular-nums; }
.fx-show__links { display: flex; flex-wrap: wrap; gap: 18px 28px; }

.fx-faq { background: var(--fx-paper); padding: var(--fx-section) 0; }
.fx-acc { border-top: 1px solid var(--fx-line); }
.fx-acc details { border-bottom: 1px solid var(--fx-line); }
.fx-acc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 22px 0;
  font-family: var(--fx-serif);
  font-weight: 300;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.15;
}
.fx-acc summary::-webkit-details-marker { display: none; }
.fx-acc summary::after {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background:
    linear-gradient(var(--fx-ink), var(--fx-ink)) center/14px 1px no-repeat,
    linear-gradient(var(--fx-ink), var(--fx-ink)) center/1px 14px no-repeat;
  transition: transform 400ms var(--fx-ease);
}
.fx-acc details[open] summary::after {
  background: linear-gradient(var(--fx-ink), var(--fx-ink)) center/14px 1px no-repeat;
  transform: none;
}
.fx-acc details p { margin: 0 0 22px; max-width: 62ch; color: var(--fx-ink-soft); }

.fx-footer {
  background: var(--fx-charcoal);
  color: var(--fx-linen);
  padding: 160px 0 28px;
  color-scheme: dark;
}
.fx-footer__cta { display: grid; gap: 24px; align-items: start; }
.fx-footer__cols {
  display: grid;
  gap: 28px;
  margin-top: 64px;
}
.fx-footer__cols div { border-top: 1px solid var(--fx-line-dark); padding-top: 18px; }
.fx-footer h3 {
  font-family: var(--fx-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fx-stone-light);
}
.fx-footer ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.fx-footer a { text-decoration: none; }
.fx-footer a:hover { color: var(--fx-oak); }
.fx-wordmark-xl {
  margin: 48px 0 0;
  overflow: hidden;
  line-height: 0.8;
}
.fx-wordmark-xl span {
  display: block;
  font-family: var(--fx-serif);
  font-weight: 300;
  font-size: 15.5vw;
  color: rgb(245 241 234 / 8%);
  letter-spacing: -0.03em;
}
.fx-fine {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 18px;
  color: var(--fx-stone-light);
  font-size: 13px;
}

.fx-menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--fx-charcoal);
  color: var(--fx-linen);
  display: flex;
  flex-direction: column;
  padding: 24px var(--fx-margin) 32px;
  overflow: auto;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  pointer-events: none;
  transition: clip-path 700ms var(--fx-ease), visibility 0s linear 700ms;
}
.fx-menu.is-open {
  clip-path: inset(0);
  visibility: visible;
  pointer-events: auto;
  transition: clip-path 700ms var(--fx-ease);
}
.fx-menu.is-open nav a { animation: fx-up 700ms var(--fx-ease) both; }
.fx-menu.is-open nav a:nth-child(2) { animation-delay: 60ms; }
.fx-menu.is-open nav a:nth-child(3) { animation-delay: 120ms; }
.fx-menu.is-open nav a:nth-child(4) { animation-delay: 180ms; }
.fx-menu.is-open nav a:nth-child(5) { animation-delay: 240ms; }
@keyframes fx-up {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.fx-menu header { display: flex; justify-content: space-between; align-items: center; }
.fx-menu nav { display: grid; gap: 0; margin-top: 28px; }
.fx-menu summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--fx-serif);
  font-weight: 300;
  font-size: clamp(28px, 6vw, 40px);
  line-height: 1.1;
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
}
.fx-menu summary::after { content: "+"; font-family: var(--fx-sans); font-size: 22px; }
.fx-menu details[open] summary::after { content: "–"; }
.fx-menu summary::-webkit-details-marker { display: none; }
.fx-menu details { border-top: 1px solid var(--fx-line-dark); }
.fx-menu details:last-child { border-bottom: 1px solid var(--fx-line-dark); }
.fx-menu details a {
  display: block;
  font-family: var(--fx-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.35;
  padding: 7px 0 7px 2px;
  text-decoration: none;
  color: var(--fx-stone-light);
}
.fx-menu details:not([open]) > a { display: none; }
.fx-menu details a:hover { color: var(--fx-linen); }
.fx-menu details[open] { padding-bottom: 12px; }
.fx-menu footer { margin-top: auto; padding-top: 32px; color: var(--fx-stone-light); }

.fx-mega {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--fx-linen);
  color: var(--fx-ink);
  padding: 28px var(--fx-margin) 32px;
  border-bottom: 1px solid var(--fx-line);
  transform: translateY(12px);
  opacity: 0;
  pointer-events: none;
}
.fx-header.is-mega .fx-mega {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 28px;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 400ms var(--fx-ease), transform 400ms var(--fx-ease);
}
.fx-mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fx-mega a { font-family: var(--fx-serif); font-weight: 300; font-size: clamp(22px, 2vw, 28px); text-decoration: none; }
.fx-mega .fx-link { font-family: var(--fx-sans); font-size: 15px; }
.fx-mega__photo { aspect-ratio: 4 / 5; max-height: 280px; }
.fx-mega figcaption { color: var(--fx-stone); font-size: 13px; margin-top: 8px; }

.fx-cursor {
  position: fixed;
  z-index: 50;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  border-radius: 999px;
  background: var(--fx-ink);
  color: var(--fx-linen);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: none;
  transform: scale(0);
  transition: transform 150ms var(--fx-ease);
}
.fx-cursor.is-on { transform: scale(1); }

.fx-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--fx-linen);
  border-top: 1px solid var(--fx-line);
}
.fx-bar[hidden] { display: none; }
.fx-bar .fx-btn { width: 100%; justify-content: center; height: 52px; }

.fx-rise { opacity: 1; }
@media (min-width: 800px) {
  .fx-trust dl { grid-template-columns: repeat(5, 1fr); }
  .fx-trust div { border-bottom: 0; border-right: 1px solid var(--fx-line); }
  .fx-trust div:last-child { border-right: 0; }
  .fx-doors { grid-template-columns: 1fr 1fr; }
  .fx-door + .fx-door { border-left: 1px solid var(--fx-line); padding-left: 28px; }
  .fx-door:first-child { padding-right: 28px; }
  .fx-door .fx-frame { aspect-ratio: 4 / 5; }
  .fx-byo .fx-grid, .fx-colour .fx-grid, .fx-why .fx-grid, .fx-faq .fx-grid, .fx-quote__grid, .fx-guides .fx-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
  }
  .fx-plans { grid-template-columns: 1fr 1fr 1fr; }
  .fx-plan { border-top: 0; border-left: 1px solid var(--fx-line); padding: 8px 28px 28px; }
  .fx-plan:first-child { border-left: 0; padding-left: 0; }
  .fx-std { grid-template-columns: 1fr 1fr; }
  .fx-std article:nth-child(odd) { padding-right: 28px; }
  .fx-show { grid-template-columns: 1fr 1fr; }
  .fx-footer__cols { grid-template-columns: repeat(4, 1fr); }
  .fx-spec { grid-template-columns: repeat(4, 1fr); }
  .fx-spec div { border-right: 1px solid var(--fx-line); padding-right: 18px; }
}

@media (max-width: 1023px) {
  .fx-header .fx-btn { display: none; }
  .fx-page { padding-bottom: 84px; }
}
@media (min-width: 1024px) {
  .fx-phone-icon { display: none; }
  .fx-phone { display: inline; }
  .fx-bar { display: none; }
  .fx-menu-open { display: none; }
  .fx-nav { display: flex; }
  .fx-collection__head { grid-template-columns: 1.4fr 0.8fr; align-items: end; }
  .fx-triptych { display: flex; gap: 2px; overflow: visible; }
  .fx-panel { flex: 1 1 0; height: 80vh; transition: flex 900ms var(--fx-ease-inout); }
  .fx-panel:hover, .fx-panel:focus-visible { flex: 2.2 1 0; }
  .fx-panel:hover .fx-panel__copy p,
  .fx-panel:focus-visible .fx-panel__copy p,
  .fx-panel:hover .fx-panel__copy .fx-link,
  .fx-panel:focus-visible .fx-panel__copy .fx-link {
    display: block;
    margin-top: 10px;
  }
  .fx-panel__copy .fx-link { color: var(--fx-linen); }
  .fx-counter, .fx-progress { display: none; }
  .fx-svc {
    grid-template-columns: 48px 1.4fr 1fr auto;
    align-items: center;
    min-height: 112px;
    gap: 12px;
  }
  .fx-svc__n { grid-row: auto; }
  .fx-svc__arrow { display: block; }
  .fx-standards .fx-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.7fr) 1.3fr;
    gap: 64px;
    align-items: start;
  }
  .fx-standards .fx-std { margin-top: 0; }
  .fx-craft__layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    min-height: 100svh;
  }
  .fx-craft__media { display: block; position: relative; min-height: 100%; }
  .fx-craft__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 700ms var(--fx-ease);
  }
  .fx-craft__media img.is-on { opacity: 1; }
  .fx-craft__steps {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 88px 64px 88px 48px;
  }
  .fx-craft article {
    padding: 0;
    border-top: 1px solid var(--fx-line-dark);
  }
  .fx-craft article:last-child { border-bottom: 1px solid var(--fx-line-dark); }
  .fx-craft article .fx-frame { display: none; }
  .fx-craft button { padding: 16px 0; align-items: start; }
  .fx-craft article:not(.is-on) h2,
  .fx-craft article:not(.is-on) h3 {
    color: var(--fx-stone-light);
    font-size: clamp(22px, 1.7vw, 28px);
  }
  .fx-craft article.is-on h2,
  .fx-craft article.is-on h3 { font-size: clamp(32px, 2.6vw, 44px); }
  .fx-craft article:not(.is-on) .fx-body { display: none; }
  .fx-time { display: grid; grid-template-columns: repeat(5, 1fr); border-left: 0; border-top: 1px solid var(--fx-line); }
  .fx-time li { padding: 22px 16px 0 0; }
  .fx-time li::before { left: 0; top: -5px; }
  .fx-mosaic { grid-template-columns: 1.4fr 0.8fr; }
  .fx-tile:nth-child(2) .fx-frame { aspect-ratio: 3 / 4; margin-top: 64px; }
  .fx-faq .fx-grid { display: grid; align-items: start; }
  .fx-float { width: 320px; height: 400px; }
  .fx-cursor { display: flex; }
}

@media (min-width: 1024px) and (max-width: 1360px) {
  .fx-phone { display: none; }
  .fx-phone-icon { display: inline-flex; }
  .fx-nav { gap: 10px; }
  .fx-header__bar { gap: 16px; }
  .fx-header__tools { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-cue i, .fx-marquee__track, .fx-draw.is-in, .fx-menu.is-open nav a { animation: none; }
  .fx-frame.fx-await, .fx-frame.fx-await img, .fx-panel, .fx-header, .fx-menu, .fx-btn::before, .fx-svc__name, .fx-craft__media img {
    transition: opacity 200ms linear;
    transform: none;
    clip-path: none;
  }
  .fx-marquee__track { transform: none; }
}

@media (max-width: 799px) {
  .fx-btn { height: 52px; }
  .fx-header { height: 64px; }
}

/* Grade AB vs ABC guide. Layout only — tokens and the locked form stay as shipped. */
body.fx-grade {
  background: var(--fx-linen);
  color: var(--fx-ink);
}
.fx-header--ink {
  color: var(--fx-ink);
  background: var(--fx-linen);
}
.fx-header--ink::before { opacity: 0; }

.fx-grade h1 {
  font-family: var(--fx-serif);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-wrap: balance;
  margin: 12px 0 0;
}
.fx-grade h1 em { font-style: italic; font-weight: 300; }
.fx-grade figure { margin: 0; }
.fx-grade figcaption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--fx-stone);
}
.fx-grade #lead-form { scroll-margin-top: 88px; }

.fx-grade-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  font-size: 13px;
  color: var(--fx-stone);
}
.fx-grade-crumb a { color: inherit; text-decoration: none; }
.fx-grade-crumb a:hover { color: var(--fx-ink); }

.fx-grade-open {
  padding: calc(80px + clamp(40px, 5vw, 72px)) 0 var(--fx-section);
}
.fx-grade-open__photos { display: grid; gap: 22px; }
.fx-grade .fx-frame {
  aspect-ratio: 4 / 3;
  background: var(--fx-charcoal);
}
.fx-grade .fx-frame img,
.fx-grade .fx-frame.fx-await img,
.fx-grade .fx-frame.fx-await.is-in img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: scale(2.32);
  transform-origin: center;
}
.fx-grade .fx-frame.fx-await img { transform: scale(2.5); }
.fx-grade .fx-frame.fx-await.is-in img {
  transform: scale(2.32);
  transition: transform 1400ms var(--fx-ease);
}

.fx-grade-diff { background: var(--fx-paper); padding: var(--fx-section) 0; }
.fx-grade-split { display: grid; }
.fx-grade-split article {
  border-top: 1px solid var(--fx-line);
  padding-top: 22px;
}
.fx-grade-split article + article { margin-top: 36px; }
.fx-grade-rows,
.fx-grade-sheet { margin: 28px 0 0; border-top: 1px solid var(--fx-line); }
.fx-grade-rows div,
.fx-grade-sheet div {
  display: grid;
  grid-template-columns: minmax(108px, 180px) 1fr;
  gap: 12px 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--fx-line);
}
.fx-grade-rows dt,
.fx-grade-sheet dt {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fx-stone);
}
.fx-grade-rows dd,
.fx-grade-sheet dd {
  margin: 0;
  font-variant-numeric: tabular-nums lining-nums;
}
.fx-grade-note {
  margin: 22px 0 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fx-stone);
}

.fx-grade-spec { padding: var(--fx-section) 0; }

.fx-grade-choose {
  background: var(--fx-charcoal);
  color: var(--fx-linen);
  padding: var(--fx-section) 0;
}
.fx-grade-steps { display: grid; }
.fx-grade-steps article {
  border-top: 1px solid var(--fx-line-dark);
  padding: 22px 0 8px;
}
.fx-grade-n {
  color: var(--fx-oak);
  font-size: 13px;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}
.fx-grade-steps h3 { color: var(--fx-linen); margin-top: 10px; }
.fx-grade-steps p {
  margin: 12px 0 0;
  color: var(--fx-stone-light);
  max-width: 36ch;
}
.fx-grade-choose .fx-body { margin-top: 36px; }
.fx-grade-choose + .fx-quote { border-top: 1px solid var(--fx-line-dark); }

.fx-grade-next { padding: var(--fx-section) 0; }
.fx-grade-next .fx-guide-list { margin-top: 28px; }
.fx-grade-updated {
  margin: 28px 0 0;
  font-size: 13px;
  color: var(--fx-stone);
}

@media (max-width: 799px) {
  .fx-grade-open { padding-top: calc(64px + 36px); }
}
@media (min-width: 1024px) {
  .fx-grade-open__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 24px;
    align-items: center;
  }
  .fx-grade-open__copy { grid-column: 1 / 6; }
  .fx-grade-open__photos {
    grid-column: 7 / 13;
    grid-template-columns: 1fr 1fr;
    column-gap: 2px;
    align-items: start;
  }
  .fx-grade-split {
    grid-template-columns: 1fr 1fr;
    column-gap: 64px;
  }
  .fx-grade-split article + article { margin-top: 0; position: relative; }
  .fx-grade-split article + article::before {
    content: "";
    position: absolute;
    left: -32px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--fx-line);
  }
  .fx-grade-steps { grid-template-columns: 1fr 1fr 1fr; }
  .fx-grade-steps article { border-top: 0; padding: 0 28px 0 0; }
  .fx-grade-steps article + article {
    border-left: 1px solid var(--fx-line-dark);
    padding-left: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fx-grade .fx-frame img,
  .fx-grade .fx-frame.fx-await img,
  .fx-grade .fx-frame.fx-await.is-in img {
    transform: scale(2.32);
    transition: none;
    clip-path: none;
  }
}

/* Installation hub. Layout only. */
body.fx-install,
body.fx-product {
  background: var(--fx-linen);
  color: var(--fx-ink);
}
.fx-install h1,
.fx-product h1 {
  font-family: var(--fx-serif);
  font-weight: 300;
  font-synthesis: none;
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-wrap: balance;
  margin: 12px 0 0;
}
.fx-install h1 em,
.fx-product h1 em { font-style: italic; font-weight: 300; }
.fx-product .fx-install-open h1.fx-display {
  max-width: 11ch;
  font-weight: 300;
  font-synthesis: none;
  letter-spacing: -0.01em;
}
.fx-product .fx-lead,
.fx-product .fx-body,
.fx-product figcaption,
.fx-product .fx-install-crumb {
  font-family: var(--fx-sans);
  font-weight: 400;
  font-synthesis: none;
}
.fx-product .fx-install-open h1 .fx-offer-key {
  display: block;
  max-width: 28ch;
  margin-top: 18px;
  font-family: var(--fx-sans);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.45;
  letter-spacing: 0;
  font-style: normal;
  color: var(--fx-ink-soft);
}
.fx-product .fx-offer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.fx-install figure,
.fx-product figure { margin: 0; }
.fx-install figcaption,
.fx-product figcaption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--fx-stone);
}
.fx-install #lead-form,
.fx-product #lead-form { scroll-margin-top: 88px; }
.fx-install-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  font-size: 13px;
  color: var(--fx-stone);
}
.fx-install-crumb a { color: inherit; text-decoration: none; }
.fx-install-crumb a:hover { color: var(--fx-ink); }
.fx-install .fx-frame,
.fx-product .fx-frame { aspect-ratio: 4 / 3; background: var(--fx-sand); }
.fx-install .fx-frame img,
.fx-product .fx-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}
.fx-install .fx-frame--low img,
.fx-product .fx-frame--low img { object-position: center 82%; }
.fx-product .fx-frame--floor img { object-position: center 72%; }
.fx-install-open {
  padding: calc(80px + clamp(40px, 5vw, 72px)) 0 var(--fx-section);
}
.fx-install-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.fx-standards--pad { padding-bottom: var(--fx-section); }
.fx-install-seq,
.fx-install-where,
.fx-install-bought { background: var(--fx-paper); padding: var(--fx-section) 0; }
.fx-install-methods,
.fx-install-quote-rows,
.fx-install-next,
.fx-install-days { padding: var(--fx-section) 0; }
.fx-install-steps { margin-top: 36px; }
.fx-install-steps article {
  padding: 22px 0;
  border-top: 1px solid var(--fx-line);
}
.fx-install-steps article:last-child { border-bottom: 1px solid var(--fx-line); }
.fx-install-steps span {
  color: var(--fx-oak);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
}
.fx-install-steps h3 { margin-top: 8px; }
.fx-install-steps p { margin: 8px 0 0; max-width: 62ch; color: var(--fx-ink-soft); }
.fx-install .fx-bleed,
.fx-product .fx-bleed { margin-top: 48px; }
.fx-install .fx-bleed .fx-frame,
.fx-product .fx-bleed .fx-frame { aspect-ratio: 16 / 9; }
.fx-install-methods__cols,
.fx-install-where__cols { display: grid; margin-top: 36px; }
.fx-install-methods__cols article,
.fx-install-where__cols article {
  border-top: 1px solid var(--fx-line);
  padding: 22px 0 8px;
}
.fx-install-methods__cols article + article,
.fx-install-where__cols article + article { margin-top: 28px; }
.fx-install-methods__cols .fx-frame,
.fx-install-where__cols .fx-frame { margin-top: 18px; }
.fx-install-methods__cols .fx-link,
.fx-install-where__cols .fx-link { display: inline-block; margin-top: 16px; }
.fx-install-sheet { margin: 28px 0 0; border-top: 1px solid var(--fx-line); }
.fx-install-sheet div {
  display: grid;
  grid-template-columns: minmax(140px, 240px) 1fr;
  gap: 12px 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--fx-line);
}
.fx-install-sheet dt {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fx-stone);
}
.fx-install-sheet dd {
  margin: 0;
  font-variant-numeric: tabular-nums lining-nums;
}
.fx-install-note {
  margin: 22px 0 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fx-stone);
}
.fx-install-note a { color: inherit; }
.fx-install-next .fx-guide-list { margin-top: 28px; }
.fx-install-updated {
  margin: 28px 0 0;
  font-size: 13px;
  color: var(--fx-stone);
}
.fx-product .fx-install-methods__cols a,
.fx-product .fx-install-where__cols a { color: inherit; text-decoration: none; }
.fx-product .fx-proof {
  background: var(--fx-charcoal);
  color: var(--fx-linen);
  padding: var(--fx-section) 0;
  color-scheme: dark;
}
.fx-product .fx-proof .fx-why-list article { border-top-color: var(--fx-line-dark); }
.fx-product .fx-proof .fx-why-list article:last-child { border-bottom: 1px solid var(--fx-line-dark); }
.fx-product .fx-proof .fx-why-list p { color: var(--fx-stone-light); }
.fx-product .fx-proof .fx-frame { background: var(--fx-charcoal-2); }
.fx-product .fx-proof figcaption { color: var(--fx-stone-light); }
.fx-product .fx-proof .fx-why-list { margin-top: 28px; }
.fx-product .fx-proof .fx-why-list h3 { color: var(--fx-linen); font-weight: 300; font-synthesis: none; }
@media (min-width: 800px) {
  .fx-product .fx-proof .fx-proof__photo { align-self: stretch; }
  .fx-product .fx-proof .fx-proof__photo img { object-position: center 78%; }
  .fx-product .fx-proof .fx-proof__photo .fx-frame {
    height: calc(100% - 28px);
    aspect-ratio: auto;
    min-height: 320px;
  }
}
@media (max-width: 799px) {
  .fx-install-open { padding-top: calc(64px + 36px); }
}
@media (min-width: 800px) {
  .fx-product .fx-install-open__grid,
  .fx-product .fx-proof .fx-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 24px;
    align-items: start;
  }
  .fx-product .fx-install-open__grid { align-items: center; }
  .fx-product .fx-install-open__copy,
  .fx-product .fx-proof .fx-proof__copy { grid-column: 1 / 7; }
  .fx-product .fx-install-open__photo,
  .fx-product .fx-proof .fx-proof__photo { grid-column: 7 / 13; }
}
@media (min-width: 1024px) {
  .fx-install-open__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 24px;
    align-items: center;
  }
  .fx-install-open__copy { grid-column: 1 / 6; }
  .fx-install-open__photo { grid-column: 7 / 13; }
  .fx-install-methods__cols { grid-template-columns: 1fr 1fr 1fr; }
  .fx-install-methods__cols article {
    border-top: 0;
    margin-top: 0;
    padding: 0 28px 0 0;
  }
  .fx-install-methods__cols article + article {
    margin-top: 0;
    border-left: 1px solid var(--fx-line);
    padding-left: 28px;
  }
  .fx-install-where__cols {
    grid-template-columns: 1fr 1fr;
    column-gap: 64px;
  }
  .fx-install-where__cols article,
  .fx-install-where__cols article + article { margin-top: 0; }
  .fx-install-where__cols article + article { position: relative; }
  .fx-install-where__cols article + article::before {
    content: "";
    position: absolute;
    left: -32px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--fx-line);
  }
}

/* Installation film. Full-bleed chapter above the linen page. */
.fx-film {
  position: relative;
  background: var(--fx-charcoal);
  color: var(--fx-linen);
}
.fx-film__stage {
  position: relative;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  background: var(--fx-charcoal);
}
.fx-film__video,
.fx-film__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
.fx-film__veil {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 160px;
  background: linear-gradient(to bottom, rgb(28 26 23 / 62%), rgb(28 26 23 / 0%));
  pointer-events: none;
}
.fx-film__card {
  position: absolute;
  inset: 0;
  z-index: 2;
  transition: opacity 400ms var(--fx-ease), visibility 0s linear;
}
.fx-film.is-playing .fx-film__card,
.fx-film__stage.is-playing .fx-film__card {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 400ms var(--fx-ease), visibility 0s linear 400ms;
}
.fx-film__shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 56% 46% at 50% 46%, rgb(28 26 23 / 74%) 0%, rgb(28 26 23 / 0%) 70%),
    linear-gradient(to bottom, rgb(28 26 23 / 55%) 0%, rgb(28 26 23 / 0%) 22%);
  pointer-events: none;
}
.fx-film__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 96px var(--fx-margin) 34vh;
  border: 0;
  background: none;
  color: var(--fx-linen);
  cursor: pointer;
}
.fx-film__play:focus { outline: none; }
.fx-film__play:disabled { cursor: progress; }
.fx-film__play:focus-visible .fx-film__hit {
  outline: 2px solid var(--fx-oak);
  outline-offset: 4px;
}
.fx-film__mark {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.35em 0.5em;
}
.fx-film__floors {
  font-family: var(--fx-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.28em;
}
.fx-film__place {
  font-family: var(--fx-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.fx-film__hit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 56px;
  min-width: 148px;
  padding: 0 28px;
  overflow: hidden;
  background: var(--fx-linen);
  color: var(--fx-ink);
  font-family: var(--fx-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fx-film__hit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fx-oak);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 500ms var(--fx-ease);
}
.fx-film__play:hover .fx-film__hit::before,
.fx-film__play:focus-visible .fx-film__hit::before { transform: scaleX(1); }
.fx-film__play:active .fx-film__hit { transform: translateY(1px); }
.fx-film__hit svg,
.fx-film__hit span { position: relative; z-index: 1; }
.fx-film__bar {
  position: absolute;
  z-index: 3;
  top: 76px;
  right: var(--fx-margin);
  display: flex;
  gap: 8px;
}
.fx-film__ctrl {
  height: 44px;
  min-width: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgb(245 241 234 / 62%);
  background: rgb(28 26 23 / 42%);
  color: var(--fx-linen);
  font-family: var(--fx-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.fx-film__ctrl[hidden] { display: none; }
.fx-film__ctrl:hover { background: var(--fx-ink); }
.fx-film__ctrl:focus-visible {
  outline: 2px solid var(--fx-oak);
  outline-offset: 4px;
}
.fx-install .fx-install-open { padding-top: var(--fx-section); }
@media (min-width: 1024px) {
  .fx-film__play { padding-bottom: 18vh; }
  .fx-film__bar { top: 96px; bottom: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-film__card,
  .fx-film__hit::before { transition: none; }
}

/* Paired installation films. Click to play, one at a time. Below the fold. */
.cl-films {
  background: var(--fx-paper);
  padding: var(--fx-section) 0;
}
.cl-films h2 em { font-style: italic; font-weight: 300; }
.cl-films__pair {
  display: grid;
  gap: 48px 24px;
  margin-top: 40px;
}
.cl-films figure { margin: 0; }
.cl-films figcaption h3 { margin: 16px 0 0; }
.cl-films figcaption p {
  margin: 8px 0 0;
  max-width: 46ch;
  color: var(--fx-ink-soft);
}
.cl-films figcaption .fx-link { display: inline-block; margin-top: 12px; }
.fx-film--pair .fx-film__stage {
  height: auto;
  min-height: 0;
}
.fx-film--pair .fx-film__stage::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.fx-film--pair .fx-film__video,
.fx-film--pair .fx-film__still { object-position: center center; }
.fx-film--pair .fx-film__play {
  justify-content: center;
  padding: 16px;
}
.fx-film--pair .fx-film__bar { top: 12px; right: 12px; }
@media (min-width: 900px) {
  .cl-films__pair { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* Interactive process map. Same behaviour as the homepage craft chapter. */
.cl-map {
  background: var(--fx-charcoal);
  color: var(--fx-linen);
  color-scheme: dark;
}
.cl-map__media { display: none; }
.cl-map__copy { padding: clamp(72px, 9vw, 120px) var(--fx-margin); }
.cl-map h2 { max-width: 14em; }
.cl-map h2 em { font-style: italic; font-weight: 300; }
.cl-map .fx-lead { margin-top: 14px; max-width: 36em; }
.cl-map__steps { margin-top: 32px; }
.cl-map article { border-top: 1px solid var(--fx-line-dark); }
.cl-map article:last-child { border-bottom: 1px solid var(--fx-line-dark); }
.cl-map h3 { margin: 0; }
.cl-map button {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 8px 12px;
  align-items: start;
  width: 100%;
  margin: 0;
  padding: 16px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cl-map button:focus-visible { outline: 1px solid var(--fx-oak); outline-offset: 6px; }
.cl-map__n {
  color: var(--fx-oak);
  font-family: var(--fx-sans);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  padding-top: 0.45em;
}
.cl-map__title { display: block; }
.cl-map article:not(.is-on) .cl-map__title {
  color: var(--fx-stone-light);
  font-size: clamp(22px, 1.7vw, 28px);
}
.cl-map article.is-on .cl-map__title { font-size: clamp(28px, 2.4vw, 40px); }
.cl-map__panel {
  margin: 0 0 18px 48px;
  max-width: 46ch;
  color: var(--fx-stone-light);
}
.cl-map__panel p { margin: 0; }
.cl-map article:not(.is-on) .cl-map__panel,
.cl-map article:not(.is-on) .fx-frame { display: none; }
.cl-map .fx-frame { aspect-ratio: 4 / 3; margin: 0 0 4px; }
@media (min-width: 1024px) {
  .cl-map__layout {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: stretch;
  }
  .cl-map__media {
    display: block;
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 560px;
    background: var(--fx-charcoal);
  }
  .cl-map__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 700ms var(--fx-ease);
  }
  .cl-map__media img.is-on { opacity: 1; }
  .cl-map__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 88px 64px 88px 48px;
  }
  .cl-map article .fx-frame { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-map__media img { transition: opacity 200ms linear; }
}