/* ==========================================================================
   WAS Concept Tailor Malaysia — "The Pattern Room"
   --------------------------------------------------------------------------
   THESIS      A tailoring site that shows its working. Full-bleed cloth and
               people, with the price, the place and the production model
               annotated in the open. It refuses the black-and-gold luxury
               tailor template and the beige lifestyle-boutique opposite.
   OWN-WORLD   Espresso / cream / white fields alternating full width; vermilion
               as the action colour; cream hairlines on dark fields. Bricolage Grotesque
               set tight at display size, no fashion serif. One authored
               pattern line — a tailor's scye curve — recurs as hero sweep,
               process spine and booking frame. Radius near zero, no cards.
   STORY       "Custom tailoring, in Puchong, from RM 949, measured and
               fitted here and crafted through our WAS network" — read,
               believed, then acted on in WhatsApp.
   FIRST VIEW  Full-height hero photograph; ink scrim over its left half
               carrying eyebrow, 104px headline, two lines of copy, the price
               line and a tobacco WhatsApp button. Pattern line sweeps across.
   FORM        Pinned by the client brief (§5 "The Pattern Room"), not rolled.
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  /* Palette trial: vermilion, white, warm cream and espresso. */
  --vermilion: #c73a1f;
  --white: #ffffff;
  --cream: #f1ece6;
  --espresso: #302824;

  /* Existing component aliases retain one shared colour source. */
  --ink: var(--espresso);
  --bone: var(--cream);
  --paper: var(--white);
  --olive: var(--espresso);
  --tobacco: var(--vermilion);
  --brass: var(--cream);
  --slate: #685b53;
  --error: #b2331b;

  /* Darker vermilion for small text on cream; pale text on espresso. */
  --tobacco-600: #b2331b;
  --tobacco-700: #9e2c17;
  --tobacco-300: var(--cream);
  --slate-strong: #685b53;
  --bone-dim: #c9bfb7;
  --error-300: #f5b09f;
  --brass-300: var(--cream);
  --tobacco-200: var(--cream);
  --brass-200: var(--white);

  /* Field-relative roles. Every field block re-declares these. */
  --fg: var(--ink);
  --fg-dim: var(--slate-strong);
  --bg: var(--bone);
  --rule: rgba(48, 40, 36, 0.16);
  --rule-strong: rgba(48, 40, 36, 0.32);
  --accent: var(--tobacco-600);
  --accent-line: var(--tobacco);
  --eyebrow-color: var(--tobacco-600);
  --focus-ring: var(--tobacco-700);

  /* Type */
  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Role scale: rem values preserve browser text-size preferences. */
  --fs-display: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  --fs-display-sm: var(--fs-h2);
  --fs-h2: clamp(2rem, 1.5rem + 2vw, 3rem);
  --fs-h3: clamp(1.5rem, 1.375rem + 0.5vw, 1.75rem);
  --fs-h4: 1.25rem;
  --fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --fs-body: 1rem;
  --fs-menu: 1rem;
  --fs-menu-mobile: 1.25rem;
  --fs-button: 1rem;
  --fs-label: 0.875rem;
  --fs-small: 0.875rem;
  --fs-meta: 0.8125rem;
  --fs-numeral: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  --lh-body: 1.6;
  --lh-heading: 1.1;

  /* Space */
  --space-section: clamp(72px, 9vw, 152px);
  --space-section-tight: clamp(56px, 6vw, 96px);
  --gutter: clamp(20px, 5vw, 64px);
  --gap: clamp(16px, 2.2vw, 32px);
  --maxw: 1440px;
  --measure: 68ch;

  /* Shape + motion */
  --r-sm: 2px;
  --r-md: 8px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 74px;
}

@media (min-width: 1024px) {
  :root {
    --header-h: 86px;
  }
}


/* ==========================================================================
   2. Reset + base
   ========================================================================== */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* `clip`, not `hidden` — it contains bleed without creating a scroll
     container, so position: sticky keeps working */
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font);
  font-optical-sizing: auto;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip` contains the bleeding image panels without turning <body> into a
     scroll container — `hidden` would silently break every position: sticky */
  overflow-x: clip;
}

body.is-locked {
  overflow: hidden;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  font-weight: 650;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection {
  background: var(--vermilion);
  color: var(--white);
}

[hidden] {
  display: none !important;
}

/* Anchors clear the sticky header */
:target,
[id] {
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -110%);
  z-index: 200;
  background: var(--tobacco-600);
  color: var(--bone);
  padding: 12px 22px;
  font-weight: 700;
  font-size: var(--fs-small);
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition: transform 160ms var(--ease);
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */

.shell {
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
}

.shell--wide {
  width: min(100% - (var(--gutter) * 2), 1600px);
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

.field {
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--space-section);
  position: relative;
}

.field--tight {
  padding-block: var(--space-section-tight);
}

/* Edge-to-edge band whose children carry their own padding (trust rail) */
.field--rail {
  padding-block: 0;
}

.field--flush-bottom {
  padding-bottom: 0;
}

.field--ink {
  --bg: var(--ink);
  --fg: var(--bone);
  --fg-dim: var(--bone-dim);
  --rule: rgba(241, 236, 230, 0.22);
  --rule-strong: rgba(241, 236, 230, 0.42);
  --accent: var(--tobacco-300);
  --accent-line: var(--tobacco);
  --eyebrow-color: var(--brass);
  --focus-ring: var(--brass);
}

.field--olive {
  --bg: var(--olive);
  --fg: var(--bone);
  --fg-dim: var(--bone-dim);
  --rule: rgba(241, 236, 230, 0.22);
  --rule-strong: rgba(241, 236, 230, 0.4);
  /* olive is lighter than ink, so links and eyebrows need the lighter steps */
  --accent: var(--tobacco-200);
  --accent-line: var(--brass);
  --eyebrow-color: var(--brass-300);
  --focus-ring: var(--brass);
}

.field--paper {
  --bg: var(--paper);
}

.field--bone {
  --bg: var(--bone);
}

/* ==========================================================================
   4. Typography
   ========================================================================== */

.eyebrow {
  display: block;
  font-size: var(--fs-meta);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eyebrow-color);
  margin-bottom: clamp(18px, 2vw, 28px);
}

.display {
  font-size: var(--fs-display);
  line-height: 0.94;
  letter-spacing: -0.035em;
}

.display--sm {
  font-size: var(--fs-display-sm);
  line-height: 0.98;
  letter-spacing: -0.032em;
}

.h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: -0.03em;
}

.h3 {
  font-size: var(--fs-h3);
  line-height: 1.16;
  letter-spacing: -0.02em;
}

.h4 {
  font-size: var(--fs-h4);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 700;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: 34ch;
}

.measure {
  max-width: var(--measure);
}

.measure--narrow {
  max-width: 52ch;
}

.dim {
  color: var(--fg-dim);
}

.meta {
  font-size: var(--fs-meta);
  letter-spacing: 0.02em;
  color: var(--fg-dim);
}

.numeral {
  font-size: var(--fs-numeral);
  font-weight: 650;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.stack > * + * {
  margin-top: var(--stack, 20px);
}

.stack--lg {
  --stack: 28px;
}

.stack--sm {
  --stack: 12px;
}

/* Long-form prose (legal, journal, process detail) */
.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: 1.1em;
}

.prose h2 {
  font-size: var(--fs-h3);
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin-top: 2em;
}

.prose h3 {
  font-size: var(--fs-h4);
  margin-top: 1.8em;
}

.prose ul,
.prose ol {
  padding-left: 1.15em;
}

.prose li + li {
  margin-top: 0.5em;
}

.prose a {
  color: var(--accent);
}

/* ==========================================================================
   5. Buttons + links
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px 26px;
  border-radius: var(--r-md);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-decoration: none;
  text-align: center;
  transition: background-color 180ms var(--ease), color 180ms var(--ease),
    border-color 180ms var(--ease);
}

.btn svg {
  flex: none;
}

.btn--primary {
  background: var(--vermilion);
  color: var(--white);
}

.btn--primary:hover {
  background: var(--tobacco-700);
  color: var(--white);
}

.btn--primary:focus-visible {
  outline-color: var(--focus-ring);
}

.btn--secondary {
  border: 1px solid color-mix(in srgb, currentColor 42%, transparent);
  color: var(--fg);
}

.btn--secondary:hover {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.btn--sm {
  min-height: 46px;
  padding: 10px 20px;
  font-size: 0.9375rem;
}

/* Narrow phones: keep the primary label on one line without shrinking the
   44px tap target. */
@media (max-width: 419px) {
  .btn {
    font-size: 0.9375rem;
    padding-inline: 16px;
    gap: 8px;
  }
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* Arrow link — the site's standard tertiary action */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--accent);
  text-decoration: none;
  padding-block: 4px;
}

.arrow-link::after {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.647);
  transform-origin: left center;
  transition: transform 200ms var(--ease);
}

.arrow-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.28em;
}

.arrow-link:hover::after {
  transform: scaleX(1);
}

/* ==========================================================================
   6. Pattern line — the site's one recurring device
   ========================================================================== */

.pattern-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  color: var(--brass);
}

.pattern-line path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.5;
}

/* draw-once: pathLength="1" makes the maths independent of the path */
.js .pattern-line--draw path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1100ms var(--ease-out);
}

.js .pattern-line--draw.is-drawn path {
  stroke-dashoffset: 0;
}

.notch {
  display: inline-block;
  width: 12px;
  height: 8px;
  flex: none;
  color: var(--accent-line);
}

/* ==========================================================================
   7. Utility strip
   ========================================================================== */

.utility {
  background: var(--ink);
  color: var(--bone-dim);
  font-size: var(--fs-meta);
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(241, 236, 230, 0.16);
  position: relative;
  z-index: 60;
}

.utility__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 40px;
  padding-block: 9px;
}

.utility__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.utility__facts span {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.utility__facts span + span::before {
  content: "·";
  color: var(--brass);
}

.utility__link {
  color: var(--bone);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px solid rgba(241, 236, 230, 0.5);
  padding-bottom: 1px;
}

.utility__link:hover {
  border-color: var(--brass);
}

@media (max-width: 767px) {
  .utility {
    display: none;
  }
}

/* ==========================================================================
   8. Header + navigation
   ========================================================================== */

.site-header,
.mega,
.drawer {
  --fg: var(--bone);
  --fg-dim: var(--bone-dim);
  --rule: rgba(241, 236, 230, 0.22);
  --rule-strong: rgba(241, 236, 230, 0.42);
  --accent: var(--tobacco-300);
  --accent-line: var(--brass);
  --eyebrow-color: var(--brass);
  --focus-ring: var(--brass);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  color: var(--bone);
  background: transparent;
  /* short enough that a fast scroll cannot outrun it and leave bone text
     sitting over a bone section */
  transition: background-color 140ms var(--ease), border-color 140ms var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header.is-solid,
.site-header.is-open {
  background: var(--ink);
  border-bottom-color: rgba(241, 236, 230, 0.18);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 40px);
  min-height: var(--header-h);
}

/* Wordmark lockup — placeholder until the supplied WAS logo files arrive */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: var(--bone);
  padding-block: 6px;
  flex: none;
}

.wordmark__name {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1;
}

.wordmark__sub {
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  line-height: 1;
}

.nav {
  display: none;
  margin-left: auto;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(2px, 0.8vw, 14px);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 1100px) {
  .nav {
    display: block;
  }
}

.nav__item {
  position: relative;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bone);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}

.nav__link:hover {
  border-bottom-color: var(--brass);
}

.nav__link[aria-current="page"] {
  border-bottom-color: var(--tobacco);
}

.nav__link[aria-expanded="true"] {
  border-bottom-color: var(--brass);
}

.nav__caret {
  width: 9px;
  height: 6px;
  transition: transform 200ms var(--ease);
}

.nav__link[aria-expanded="true"] .nav__caret {
  transform: rotate(180deg);
}

.header__cta {
  margin-left: clamp(8px, 1.5vw, 20px);
  flex: none;
}

@media (max-width: 1099px) {
  .header__cta {
    margin-left: auto;
  }
}

@media (max-width: 599px) {
  .header__cta {
    display: none;
  }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 12px;
  margin-right: -12px;
  color: var(--bone);
  font-size: 0.9375rem;
  font-weight: 650;
}

@media (min-width: 1100px) {
  .nav-toggle {
    display: none;
  }
}

.nav-toggle__bars {
  display: grid;
  gap: 5px;
  width: 22px;
}

.nav-toggle__bars i {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform 220ms var(--ease), opacity 160ms var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* --- Mega menu (desktop) -------------------------------------------------- */

.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--ink);
  color: var(--bone);
  border-top: 1px solid rgba(241, 236, 230, 0.18);
  border-bottom: 1px solid rgba(241, 236, 230, 0.18);
  padding-block: clamp(32px, 3.4vw, 52px);
  z-index: 80;
}

.mega[hidden] {
  display: none !important;
}

.mega__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(260px, 0.9fr);
  gap: clamp(24px, 3vw, 56px);
}

.mega__col h3 {
  font-size: var(--fs-meta);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(241, 236, 230, 0.2);
}

.mega__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 2px;
}

.mega__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  color: var(--bone);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.mega__list a:hover {
  color: var(--tobacco-300);
  border-bottom-color: rgba(241, 236, 230, 0.3);
}

.mega__badge {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--brass);
  padding: 3px 7px;
  border-radius: var(--r-sm);
  white-space: nowrap;
}

.mega__feature {
  border-left: 1px solid rgba(241, 236, 230, 0.2);
  padding-left: clamp(20px, 2vw, 32px);
  display: grid;
  gap: 14px;
  align-content: start;
}

.mega__feature img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 45% 30%;
  border-radius: var(--r-md);
}

.mega__feature p {
  font-size: var(--fs-small);
  color: var(--bone-dim);
}

/* --- Mobile drawer -------------------------------------------------------- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--ink);
  color: var(--bone);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drawer[hidden] {
  display: none !important;
}

.js .drawer {
  animation: drawer-in 260ms var(--ease-out);
}

@keyframes drawer-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
  border-bottom: 1px solid rgba(241, 236, 230, 0.18);
}

.drawer__close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  margin-right: -12px;
  color: var(--bone);
  font-weight: 650;
  font-size: 0.9375rem;
}

.drawer__body {
  padding-block: 24px 40px;
  flex: 1;
}

.drawer__group + .drawer__group {
  border-top: 1px solid rgba(241, 236, 230, 0.16);
}

.drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
  padding: 18px 0;
  font-size: var(--fs-menu-mobile);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--bone);
  text-align: left;
}

.drawer__toggle .nav__caret {
  width: 12px;
  height: 8px;
  color: var(--brass);
}

.drawer__panel {
  padding-bottom: 18px;
}

.drawer__panel ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1px;
}

.drawer__panel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 0 10px 18px;
  border-left: 1px solid rgba(241, 236, 230, 0.28);
  color: var(--bone-dim);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
}

.drawer__panel a:hover {
  color: var(--bone);
}

.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  font-size: var(--fs-menu-mobile);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--bone);
  text-decoration: none;
}

.drawer__foot {
  display: grid;
  gap: 12px;
  padding-block: 24px;
  border-top: 1px solid rgba(241, 236, 230, 0.16);
}

.drawer__foot .btn {
  width: 100%;
}

/* ==========================================================================
   9. Hero — homepage
   ========================================================================== */

.hero {
  position: relative;
  background: var(--ink);
  color: var(--bone);
  margin-top: calc(var(--header-h) * -1);
  isolation: isolate;
  /* contains the 1.02 breathe scale and the pattern line's overshoot */
  overflow: clip;
  /* the hero is a dark field and must carry the dark-field roles */
  --fg: var(--bone);
  --fg-dim: var(--bone-dim);
  --rule: rgba(241, 236, 230, 0.22);
  --rule-strong: rgba(241, 236, 230, 0.42);
  --accent: var(--tobacco-300);
  --accent-line: var(--brass);
  --eyebrow-color: var(--brass);
  --focus-ring: var(--brass);
}

.hero__media {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__body {
  position: relative;
  z-index: 2;
}

.hero__price {
  font-size: var(--fs-lead);
  font-weight: 700;
  letter-spacing: -0.015em;
  padding-top: 22px;
  border-top: 1px solid rgba(241, 236, 230, 0.34);
  max-width: 30ch;
}

.hero__micro {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-meta);
  color: var(--bone-dim);
}

/* Mobile: photograph on top, copy in a solid ink panel — never unbacked type
   over a busy image. Both halves inside the first viewport. */
@media (max-width: 899px) {
  .hero {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
  }

  .hero__media {
    flex: 1 1 auto;
    min-height: 38svh;
    max-height: 46svh;
    padding-top: var(--header-h);
    background: var(--ink);
  }

  .hero__media img {
    position: absolute;
    inset: 0;
    object-position: 72% 24%;
  }

  .hero__scrim {
    background: linear-gradient(
        180deg,
        rgba(48, 40, 36, 0.86) 0%,
        rgba(48, 40, 36, 0.15) 34%,
        rgba(48, 40, 36, 0) 55%
      ),
      linear-gradient(0deg, var(--ink) 0%, rgba(48, 40, 36, 0) 26%);
  }

  .hero__body {
    padding-block: clamp(24px, 4vw, 40px) clamp(28px, 5vw, 48px);
    display: grid;
    gap: 18px;
  }

  .hero .display {
    font-size: clamp(2.5rem, 9.6vw, 3.75rem);
  }

  .hero__lede {
    font-size: 1.0625rem;
    max-width: 42ch;
  }

  .hero__price {
    padding-top: 16px;
  }

  .hero .btn {
    width: 100%;
  }
}

@media (max-width: 899px) and (max-height: 700px) {
  .hero__media {
    min-height: 28svh;
    max-height: 32svh;
  }

  .hero .display {
    font-size: clamp(2.125rem, 8.4vw, 3rem);
  }
}

/* Desktop: one full-bleed photograph, ink scrim carrying the copy on the left */
@media (min-width: 900px) {
  .hero {
    min-height: min(100svh, 940px);
    display: grid;
    align-items: end;
  }

  .hero__media {
    position: absolute;
    inset: 0;
    height: 100%;
  }

  .hero__media img {
    object-position: 62% 42%;
  }

  .hero__scrim {
    background: linear-gradient(
        90deg,
        rgba(48, 40, 36, 0.95) 0%,
        rgba(48, 40, 36, 0.88) 26%,
        rgba(48, 40, 36, 0.55) 46%,
        rgba(48, 40, 36, 0.08) 64%,
        rgba(48, 40, 36, 0.3) 100%
      ),
      linear-gradient(
        0deg,
        rgba(48, 40, 36, 0.72) 0%,
        rgba(48, 40, 36, 0) 32%
      ),
      /* keeps the navigation legible whatever the crop behind it */
        linear-gradient(
          180deg,
          rgba(48, 40, 36, 0.72) 0%,
          rgba(48, 40, 36, 0.34) 9%,
          rgba(48, 40, 36, 0) 17%
        );
  }

  .hero__body {
    padding-top: calc(var(--header-h) + clamp(24px, 5vh, 80px));
    padding-bottom: clamp(40px, 6vh, 88px);
    display: grid;
    gap: clamp(18px, 2.2vh, 32px);
    max-width: 40ch;
  }

  /* Keep the whole offer — headline, price and CTA — inside one viewport
     on short laptop screens by tying display size to available height. */
  .hero .display {
    font-size: min(var(--fs-display), 10.6vh);
  }

  .hero__lede {
    font-size: min(var(--fs-lead), 2.5vh);
  }

  .hero__lede {
    max-width: 33ch;
  }
}

@media (min-width: 1280px) {
  .hero__body {
    max-width: 46ch;
  }
}

/* 12s breathe on the hero frame — desktop only, motion-preference aware */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .hero__media img {
    animation: hero-breathe 12s var(--ease-out) forwards;
    will-change: transform;
  }
}

@keyframes hero-breathe {
  from {
    transform: scale(1.02);
  }
  to {
    transform: scale(1);
  }
}

.hero__pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 899px) {
  .hero__pattern {
    display: none;
  }
}

/* ==========================================================================
   10. Page header — inner pages
   ========================================================================== */

.page-head {
  position: relative;
  background: var(--ink);
  color: var(--bone);
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(36px, 6vw, 76px));
  padding-bottom: clamp(44px, 6vw, 84px);
  overflow: hidden;
  --fg: var(--bone);
  --fg-dim: var(--bone-dim);
  --accent: var(--tobacco-300);
  --eyebrow-color: var(--brass);
  --focus-ring: var(--brass);
  --rule: rgba(241, 236, 230, 0.22);
}

.page-head__grid {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

@media (min-width: 900px) {
  .page-head__grid--media {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

.page-head__body {
  display: grid;
  gap: clamp(18px, 2vw, 26px);
  max-width: 46ch;
}

.page-head--text .breadcrumb {
  margin-bottom: clamp(28px, 4vw, 48px);
}

.page-head__split {
  position: relative;
  display: grid;
  gap: clamp(24px, 3.5vw, 64px);
}

@media (min-width: 900px) {
  .page-head__split {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: end;
  }
}

.page-head__split > div:first-child {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  align-content: end;
}

.page-head__aside {
  display: grid;
  gap: clamp(18px, 2vw, 26px);
  align-content: end;
  padding-bottom: 6px;
}

.page-head__media {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
}

.page-head__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-head__media--wide img {
  aspect-ratio: 3 / 2;
}

.page-head__media--tall img {
  aspect-ratio: 4 / 5;
}

/* Sits in the gap between the two head columns at every width from 900px up,
   so it reads as a seam between them rather than a line through the words. */
.page-head__seam {
  display: none;
}

.page-head__seam path {
  opacity: 0.62;
}

@media (min-width: 900px) {
  .page-head__seam {
    display: block;
    position: absolute;
    left: calc(53.6% - 17px);
    top: -40px;
    bottom: -40px;
    width: 34px;
    height: auto;
    inset-inline-end: auto;
    pointer-events: none;
  }
}

.breadcrumb {
  font-size: var(--fs-meta);
  color: var(--bone-dim);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb li + li::before {
  content: "";
  width: 12px;
  height: 1px;
  background: rgba(241, 236, 230, 0.5);
}

.breadcrumb a {
  color: var(--bone-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.breadcrumb a:hover {
  color: var(--bone);
  border-bottom-color: rgba(241, 236, 230, 0.5);
}

.breadcrumb [aria-current="page"] {
  color: var(--bone);
}

/* ==========================================================================
   11. Trust rail
   ========================================================================== */

.trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}

@media (min-width: 900px) {
  .trust {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.trust__item {
  padding: clamp(22px, 2.6vw, 34px) clamp(16px, 2vw, 28px) clamp(22px, 2.6vw, 34px) 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: 6px;
  align-content: start;
}

@media (min-width: 900px) {
  .trust__item {
    border-bottom: 0;
    padding-right: clamp(20px, 2.4vw, 40px);
  }

  .trust__item + .trust__item {
    border-left: 1px solid var(--rule);
    padding-left: clamp(20px, 2.4vw, 40px);
  }
}

@media (max-width: 899px) {
  .trust__item:nth-child(odd) {
    border-right: 1px solid var(--rule);
    padding-right: clamp(14px, 4vw, 28px);
  }

  .trust__item:nth-child(even) {
    padding-left: clamp(14px, 4vw, 28px);
  }
}

.trust__value {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.1;
}

.trust__label {
  font-size: var(--fs-small);
  color: var(--fg-dim);
  line-height: 1.45;
}

/* ==========================================================================
   12. Section headers
   ========================================================================== */

.section-head {
  display: grid;
  gap: clamp(18px, 2vw, 26px);
  margin-bottom: clamp(40px, 5vw, 72px);
}

@media (min-width: 1024px) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: end;
  }

  .section-head--split .section-head__intro {
    padding-bottom: 6px;
  }
}

.section-head__intro {
  font-size: var(--fs-lead);
  color: var(--fg-dim);
  max-width: 46ch;
}

/* ==========================================================================
   13. Featured service panel
   ========================================================================== */

.featured {
  display: grid;
  gap: clamp(24px, 3vw, 48px);
  align-items: stretch;
  margin-bottom: clamp(48px, 6vw, 88px);
}

@media (min-width: 900px) {
  .featured {
    /* narrower image column so the portrait crop does not tower over the
       copy beside it */
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  }

  .featured--reverse .featured__media {
    order: 2;
  }
}

.featured__media {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink);
}

.featured__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 45% 30%;
}

@media (min-width: 900px) {
  .featured__media img {
    aspect-ratio: 4 / 5;
    max-height: 640px;
  }
}

.featured__body {
  display: grid;
  align-content: center;
  gap: clamp(16px, 1.8vw, 24px);
  padding-block: clamp(4px, 2vw, 24px);
}

@media (min-width: 900px) {
  .featured__body {
    padding-left: clamp(8px, 2vw, 40px);
  }
}

.featured__price {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 700;
  font-size: var(--fs-lead);
  letter-spacing: -0.02em;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  width: 100%;
}

/* ==========================================================================
   14. Service index
   ========================================================================== */

.svc {
  display: grid;
  gap: clamp(24px, 3vw, 56px);
}

@media (min-width: 1024px) {
  .svc {
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
    align-items: start;
  }
}

.svc__list {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.svc__row {
  border-bottom: 1px solid var(--rule);
}

.svc__link {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 30px);
  padding: clamp(18px, 2.2vw, 28px) 0;
  color: var(--fg);
  text-decoration: none;
  transition: color 180ms var(--ease);
}

.svc__link:hover,
.svc__link:focus-visible {
  color: var(--accent);
}

.svc__num {
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  align-self: start;
  padding-top: 6px;
  flex: none;
  min-width: 2ch;
}

.svc__thumb {
  display: block;
  width: 64px;
  height: 80px;
  flex: none;
}

.svc__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-sm);
}

/* the facing-column preview replaces the inline thumbnail on desktop */
@media (min-width: 1024px) {
  .svc__thumb {
    display: none;
  }
}

.svc__text {
  display: grid;
  gap: 5px;
  min-width: 0;
  flex: 1 1 auto;
}

.svc__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.svc__desc {
  font-size: var(--fs-small);
  color: var(--fg-dim);
  max-width: 46ch;
}

.svc__arrow {
  width: 26px;
  height: 10px;
  flex: none;
  color: var(--accent-line);
  transition: transform 200ms var(--ease);
}

.svc__link:hover .svc__arrow {
  transform: translateX(6px);
}

.svc__row--soon .svc__link {
  cursor: pointer;
}

.badge {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--rule-strong);
  color: var(--fg-dim);
  white-space: nowrap;
}

/* Facing-column preview — desktop enhancement only */
.svc__preview {
  display: none;
}

@media (min-width: 1024px) {
  .svc__preview {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 40px);
    aspect-ratio: 4 / 5;
    border-radius: var(--r-md);
    overflow: hidden;
    background: color-mix(in srgb, var(--fg) 6%, transparent);
  }

  .svc__preview img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    clip-path: inset(0 0 12% 0);
    transition: opacity 220ms var(--ease), clip-path 240ms var(--ease);
  }

  .svc__preview img.is-active {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

.svc__caption {
  margin-top: 14px;
  font-size: var(--fs-meta);
  color: var(--fg-dim);
}

/* ==========================================================================
   15. Price band + price rail
   ========================================================================== */

.price-band {
  position: relative;
  overflow: hidden;
}

.price-band__grid {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

@media (min-width: 900px) {
  .price-band__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

.price-band__media {
  border-radius: var(--r-md);
  overflow: hidden;
}

.price-band__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 55%;
}

@media (min-width: 900px) {
  .price-band__media img {
    aspect-ratio: 4 / 3;
  }
}

.price-rail {
  display: grid;
  gap: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule-strong);
  margin-bottom: 8px;
}

.price-rail__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(14px, 2vw, 28px);
}

.price-rail__amount {
  font-size: var(--fs-numeral);
  font-weight: 650;
  line-height: 0.82;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.price-rail__note {
  display: block;
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  color: var(--fg-dim);
  max-width: 24ch;
  padding-bottom: 8px;
}

.price-rail__h2 {
  display: grid;
  gap: clamp(10px, 1.4vw, 18px);
  font-weight: 650;
}

.price-rail__lead {
  display: block;
  font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
}

/* ==========================================================================
   16. Process timeline
   ========================================================================== */

.process {
  position: relative;
  display: grid;
  gap: clamp(28px, 4vw, 64px);
}

@media (min-width: 1024px) {
  .process {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
  }
}

.process__media {
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
}

@media (min-width: 1024px) {
  .process__media {
    position: sticky;
    top: calc(var(--header-h) + 40px);
  }
}

.process__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .process__media img {
    aspect-ratio: 4 / 5;
  }
}

.process__steps {
  --step-number-width: 44px;
  --step-gap: 32px;
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* The spine runs in the gap between the numerals and the copy, so it reads as
   one continuous basted seam joining 01 to 05 rather than a line hidden
   behind the digits. */
.process__spine {
  position: absolute;
  left: calc(var(--step-number-width) + (var(--step-gap) - 12px) / 2);
  top: 6px;
  height: calc(100% - 12px);
  width: 12px;
  pointer-events: none;
  color: var(--accent-line);
}

.process__spine path {
  opacity: 0.75;
}

@media (min-width: 640px) {
  .process__steps {
    --step-number-width: 66px;
    --step-gap: 40px;
  }
}

.process__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--step-number-width) minmax(0, 1fr);
  gap: var(--step-gap);
  padding-block: clamp(18px, 2.2vw, 30px);
}

.process__step + .process__step {
  border-top: 1px solid var(--rule);
}

.process__num {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  padding-block: 2px;
  position: relative;
  z-index: 1;
}

.process__body {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.process__where {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-meta);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ==========================================================================
   17. Story splits (wedding, women's, generic)
   ========================================================================== */

.story {
  display: grid;
  align-items: stretch;
  background: var(--bg);
  color: var(--fg);
}

@media (min-width: 900px) {
  .story {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }

  .story--reverse .story__media {
    order: 2;
  }
}

.story__media {
  position: relative;
  min-height: clamp(260px, 46vw, 620px);
  background: var(--ink);
}

.story__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story__body {
  display: grid;
  align-content: center;
  gap: clamp(18px, 2vw, 28px);
  padding: clamp(36px, 5vw, 88px) var(--gutter);
  background: var(--bg);
}

@media (min-width: 900px) {
  .story__body {
    padding-inline: clamp(36px, 4.4vw, 88px);
  }

  .story__body--pad-right {
    padding-right: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + 24px));
  }

  .story__body--pad-left {
    padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + 24px));
  }
}

/* ==========================================================================
   18. Network line — WAS network
   ========================================================================== */

.network__line {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}

@media (min-width: 640px) {
  .network__line {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.network__node {
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: 8px;
  align-content: start;
  position: relative;
}

@media (min-width: 640px) {
  .network__node {
    padding-right: clamp(16px, 2vw, 28px);
  }

  .network__node + .network__node {
    border-left: 1px solid var(--rule);
    padding-left: clamp(16px, 2vw, 28px);
  }
}

.network__place {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  font-weight: 650;
  letter-spacing: -0.028em;
  line-height: 1.1;
}

.network__place svg {
  color: var(--brass);
  width: 20px;
  height: 10px;
  flex: none;
}

.network__role {
  font-size: var(--fs-small);
  color: var(--fg-dim);
}

.network__node a {
  color: var(--accent);
  font-size: var(--fs-meta);
  font-weight: 650;
}

/* ==========================================================================
   19. Proof / empty states
   ========================================================================== */

.empty-state {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: clamp(28px, 4vw, 56px);
  display: grid;
  gap: 18px;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
}

/* On dark fields the panel deepens rather than lightens, so secondary text
   inside it keeps its contrast against the ground. */
.field--ink .empty-state,
.field--olive .empty-state {
  background: color-mix(in srgb, var(--ink) 18%, transparent);
}

.empty-state__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: var(--fs-small);
  color: var(--fg-dim);
}

.empty-state__list li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.empty-state__list svg {
  margin-top: 7px;
  color: var(--accent-line);
}

/* ==========================================================================
   20. Accordion (FAQ)
   ========================================================================== */

.accordion {
  border-top: 1px solid var(--rule);
}

.accordion__item {
  border-bottom: 1px solid var(--rule);
}

.accordion__trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 64px;
  padding: clamp(18px, 2vw, 26px) 0;
  text-align: left;
  font-size: var(--fs-h4);
  font-weight: 650;
  letter-spacing: -0.018em;
  line-height: 1.3;
  color: var(--fg);
}

.accordion__trigger:hover {
  color: var(--accent);
}

.accordion__icon {
  position: relative;
  width: 16px;
  height: 16px;
  justify-self: end;
  flex: none;
  color: var(--accent-line);
}

.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 220ms var(--ease), opacity 180ms var(--ease);
}

.accordion__icon::before {
  inset: 7.5px 0 7.5px 0;
  height: 1.5px;
}

.accordion__icon::after {
  inset: 0 7.5px 0 7.5px;
  width: 1.5px;
}

.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
  transform: scaleY(0);
  opacity: 0;
}

.accordion__panel {
  padding-bottom: clamp(20px, 2.4vw, 30px);
  max-width: var(--measure);
  color: var(--fg-dim);
  display: grid;
  gap: 14px;
}

.accordion__panel a {
  color: var(--accent);
}

/* No-JS: every answer stays open and indexable */
html:not(.js) .accordion__panel {
  display: grid !important;
}

html:not(.js) .accordion__icon {
  display: none;
}

/* ==========================================================================
   21. Booking panel + form
   ========================================================================== */

.booking {
  position: relative;
  overflow: hidden;
}

.booking__frame {
  position: absolute;
  inset: clamp(16px, 2.4vw, 40px) var(--gutter);
  pointer-events: none;
  color: var(--brass);
}

@media (max-width: 767px) {
  .booking__frame {
    display: none;
  }
}

.booking__grid {
  position: relative;
  display: grid;
  gap: clamp(32px, 4vw, 72px);
  padding: clamp(8px, 3vw, 48px) 0;
}

@media (min-width: 1024px) {
  .booking__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    padding-inline: clamp(24px, 3vw, 56px);
  }
}

.booking__aside {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  align-content: start;
}

.booking__points {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
  font-size: var(--fs-small);
  color: var(--fg-dim);
}

.booking__points li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.booking__points svg {
  margin-top: 7px;
  color: var(--brass);
}

.form {
  display: grid;
  gap: clamp(16px, 2vw, 22px);
}

.form__row {
  display: grid;
  gap: clamp(16px, 2vw, 22px);
}

@media (min-width: 640px) {
  .form__row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field-group {
  display: grid;
  align-content: start;
  min-width: 0;
  gap: 8px;
}

/* Shared, progressively enhanced booking controls. */
.form [hidden] { display: none !important; }
.form-control { display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; cursor: pointer; }
.form-control svg, .calendar-icon svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.form-control svg { color: var(--brass); }
.form-control[data-placeholder="true"] { color: var(--bone-dim); }
.form-control:disabled { opacity: .55; cursor: not-allowed; }
.form-control[aria-expanded="true"] svg { transform: rotate(180deg); }
.custom-select { position: relative; min-width: 0; }
.custom-select__list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; background: var(--ink); border: 1px solid var(--brass); padding: 6px; scrollbar-color: var(--brass) var(--ink); }
.custom-select__list [role="option"] { position: relative; padding: 12px 36px 12px 12px; min-height: 44px; line-height: 1.4; cursor: pointer; }
.custom-select__list [role="option"]:hover, .custom-select__list [data-active="true"] { background: color-mix(in srgb, var(--bone) 10%, var(--ink)); }
.custom-select__list [aria-selected="true"] { color: var(--brass-200); }
.custom-select__list [aria-selected="true"]::after { content: ""; position: absolute; right: 15px; top: 17px; width: 7px; height: 12px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.form #booking-nodate { appearance: none; flex: 0 0 20px; width: 20px !important; height: 20px !important; border: 1px solid var(--bone-dim); border-radius: 2px; display: grid; place-content: center; cursor: pointer; }
.form #booking-nodate:checked { background: var(--tobacco-600); border-color: var(--tobacco-300); }
.form #booking-nodate:checked::after { content: ""; width: 6px; height: 11px; border: solid var(--bone); border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
.date-modal { width: min(420px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 24px; overflow: auto; color: var(--fg); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-sm); box-shadow: 0 30px 60px -20px rgba(48,40,36,.45); }
.date-modal::backdrop { background: rgb(48 40 36 / .55); }
body:has(.date-modal[open]) { overflow: hidden; }
.date-modal__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.date-modal__heading h2 { font-size: 1.25rem; line-height: 1.3; }
.date-modal__hint { color: var(--fg-dim); font-size: .875rem; margin: 8px 0 20px; }
.calendar-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.calendar-nav p { font-weight: 650; }
.calendar-icon { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: transparent; color: var(--fg); border: 0; border-radius: var(--r-sm); cursor: pointer; }
.calendar-icon[data-prev] svg { transform: rotate(90deg); }
.calendar-icon[data-next] svg { transform: rotate(-90deg); }
.calendar-week, .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
.calendar-week { color: var(--fg-dim); font-size: .75rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; padding-bottom: 8px; }
.calendar-days { gap: 2px; }
.calendar-days button { min-height: 44px; padding: 0; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--fg); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color 120ms var(--ease); }
.calendar-days [aria-current="date"] { border-color: var(--fg); font-weight: 650; }
.calendar-days [aria-pressed="true"], .calendar-days [aria-pressed="true"]:hover:not(:disabled) { background: var(--vermilion); border-color: var(--vermilion); color: var(--white); font-weight: 650; }
.calendar-days button:hover:not(:disabled), .calendar-icon:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 7%, var(--paper)); }
.date-modal button:disabled { opacity: .3; cursor: not-allowed; }
.date-modal button:focus-visible, .form #booking-nodate:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.calendar-footer { display: flex; justify-content: space-between; border-top: 1px solid var(--rule); margin-top: 16px; padding-top: 8px; }
.calendar-text { min-height: 44px; padding: 0 8px; color: var(--tobacco-600); font-weight: 600; background: transparent; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.calendar-text:hover { color: var(--tobacco-700); }

.field-group label {
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.field-group .req {
  color: var(--brass);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--bone) 6%, transparent);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  color: var(--fg);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
  appearance: none;
}

.input::placeholder,
.textarea::placeholder {
  color: color-mix(in srgb, var(--fg) 45%, transparent);
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--rule-strong);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: transparent;
  background: color-mix(in srgb, var(--bone) 10%, transparent);
}

.textarea {
  min-height: 104px;
  resize: vertical;
}

.select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 1px),
    calc(100% - 14px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}

.select option {
  background: var(--ink);
  color: var(--bone);
}

.field-group[data-invalid="true"] .input,
.field-group[data-invalid="true"] .select {
  border-color: var(--error-300);
  background: color-mix(in srgb, var(--error) 12%, transparent);
}

.field-error {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-meta);
  font-weight: 650;
  color: var(--error-300);
}

.field-error[hidden] {
  display: none;
}

.field--paper .field-error,
.field--bone .field-error {
  color: var(--error);
}

.field-hint {
  font-size: var(--fs-meta);
  color: var(--fg-dim);
}

.form__summary {
  border: 1px solid var(--error-300);
  border-radius: var(--r-sm);
  padding: 16px 18px;
  display: grid;
  gap: 8px;
  background: color-mix(in srgb, var(--error) 14%, transparent);
}

.form__summary h3 {
  font-size: var(--fs-small);
  font-weight: 700;
}

.form__summary ul {
  margin: 0;
  padding-left: 18px;
  font-size: var(--fs-small);
}

.form__summary a {
  color: inherit;
}

.form__consent {
  font-size: var(--fs-meta);
  color: var(--fg-dim);
  max-width: 54ch;
}

.form__actions {
  display: grid;
  gap: 12px;
}

@media (min-width: 480px) {
  .form__actions {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }
}

.form__actions .btn {
  width: 100%;
}

@media (min-width: 480px) {
  .form__actions .btn {
    width: auto;
  }
}

/* Handoff / success state */
.handoff {
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  padding: clamp(20px, 3vw, 32px);
  display: grid;
  gap: 16px;
  background: color-mix(in srgb, var(--bone) 7%, transparent);
}

.handoff__message {
  font-size: var(--fs-small);
  line-height: 1.6;
  padding: 16px 18px;
  border-left: 1px solid var(--brass);
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  color: var(--fg);
  white-space: pre-wrap;
  word-break: break-word;
}

.field--paper .handoff__message,
.field--bone .handoff__message {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}

/* ==========================================================================
   22. Footer
   ========================================================================== */

.site-footer {
  background: var(--ink);
  color: var(--bone);
  padding-top: clamp(56px, 7vw, 104px);
  padding-bottom: clamp(28px, 3vw, 40px);
  --fg: var(--bone);
  --fg-dim: var(--bone-dim);
  --rule: rgba(241, 236, 230, 0.2);
  --accent: var(--tobacco-300);
  --focus-ring: var(--brass);
}

.site-footer a {
  color: var(--bone-dim);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--bone);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.footer__top {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(36px, 4vw, 56px);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 900px) {
  .footer__top {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  }
}

.footer__prop {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.25;
  max-width: 22ch;
}

.footer__nav {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 700px) {
  .footer__nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.footer__col h3 {
  font-size: var(--fs-meta);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 14px;
}

.footer__col ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 9px;
  font-size: var(--fs-small);
}

.footer__mid {
  display: grid;
  gap: clamp(24px, 3vw, 48px);
  padding-block: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 900px) {
  .footer__mid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.footer__block {
  display: grid;
  gap: 8px;
  align-content: start;
  font-size: var(--fs-small);
  color: var(--bone-dim);
}

.footer__block h3 {
  font-size: var(--fs-meta);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 6px;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  padding-top: clamp(22px, 2.4vw, 32px);
  font-size: var(--fs-meta);
  color: var(--bone-dim);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  padding: 0;
}

.footer__final {
  width: 100%;
  padding-top: 14px;
  color: var(--brass);
  letter-spacing: 0.04em;
}

/* ==========================================================================
   23. Mobile action bar
   ========================================================================== */

.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--ink) 94%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 -1px 0 rgba(241, 236, 230, 0.18);
  transform: translateY(110%);
  transition: transform 260ms var(--ease);
}

.action-bar .btn {
  width: 100%;
}

.action-bar.is-visible {
  transform: translateY(0);
}

@media (min-width: 900px) {
  .action-bar {
    display: none;
  }
}

@media (max-width: 899px) {
  body {
    /* room so the bar never covers the last line of the footer */
    padding-bottom: 0;
  }

  .site-footer {
    padding-bottom: calc(28px + 74px + env(safe-area-inset-bottom, 0px));
  }
}

/* ==========================================================================
   24. Confirm chips, notes, tables, chips
   ========================================================================== */

.confirm {
  display: inline;
  font-weight: 700;
  font-size: 0.9em;
  letter-spacing: 0.02em;
  /* deeper than the usual link shade because the chip's own tint lifts the
     background it sits on (5.5:1 composited) */
  color: var(--tobacco-700);
  background: color-mix(in srgb, var(--tobacco) 14%, transparent);
  border-bottom: 1px dashed color-mix(in srgb, var(--tobacco) 60%, transparent);
  border-radius: var(--r-sm);
  padding: 1px 6px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.field--ink .confirm,
.field--olive .confirm,
.page-head .confirm,
.site-footer .confirm,
.hero .confirm {
  color: var(--brass-200);
  background: color-mix(in srgb, var(--brass) 8%, transparent);
  border-bottom-color: color-mix(in srgb, var(--brass) 55%, transparent);
}

.illustrative {
  font-size: var(--fs-meta);
  color: var(--fg-dim);
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.illustrative::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--rule-strong);
  flex: none;
  transform: translateY(-4px);
}

.note {
  border-left: 1px solid var(--accent-line);
  padding: 4px 0 4px 18px;
  font-size: var(--fs-small);
  color: var(--fg-dim);
  max-width: 60ch;
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--rule);
}

table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

caption {
  text-align: left;
  font-size: var(--fs-meta);
  color: var(--fg-dim);
  padding-bottom: 14px;
}

th,
td {
  text-align: left;
  padding: 16px 20px 16px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

thead th {
  font-size: var(--fs-meta);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding-bottom: 12px;
}

tbody th {
  font-weight: 650;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  width: 34%;
}

td.num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

/* Two-column feature lists (options, inclusions) */
.spec-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}

@media (min-width: 700px) {
  .spec-list--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 4vw, 64px);
  }
}

.spec-list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: 5px;
}

.spec-list strong {
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
}

.spec-list span {
  font-size: var(--fs-small);
  color: var(--fg-dim);
}

/* Related-services strip */
.related {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}

@media (min-width: 700px) {
  .related {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.related a {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: clamp(20px, 2.4vw, 28px) clamp(16px, 2vw, 28px) clamp(20px, 2.4vw, 28px) 0;
  border-bottom: 1px solid var(--rule);
  color: var(--fg);
  text-decoration: none;
}

@media (min-width: 700px) {
  .related a + a,
  .related a:nth-child(n + 2) {
    border-left: 1px solid var(--rule);
    padding-left: clamp(16px, 2vw, 28px);
  }
}

.related a:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}

.related strong {
  font-size: var(--fs-h4);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.related span {
  font-size: var(--fs-small);
  color: var(--fg-dim);
}

/* Contact detail rows */
.detail-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}

.detail-list > div {
  display: grid;
  gap: 6px;
  padding: clamp(16px, 2vw, 22px) 0;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 640px) {
  .detail-list > div {
    grid-template-columns: minmax(140px, 0.4fr) minmax(0, 1fr);
    gap: 20px;
    align-items: baseline;
  }
}

.detail-list dt {
  font-size: var(--fs-meta);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.detail-list dd {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.5;
}



/* ==========================================================================
   25. Journal + portfolio scaffolds
   ========================================================================== */

.planned-list {
  list-style: none;
  padding: 0;
  counter-reset: planned;
  border-top: 1px solid var(--rule);
}

.planned-list li {
  counter-increment: planned;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: clamp(12px, 2vw, 24px);
  align-items: baseline;
  padding: clamp(16px, 2vw, 24px) 0;
  border-bottom: 1px solid var(--rule);
}

.planned-list li::before {
  content: counter(planned, decimal-leading-zero);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-line);
  font-variant-numeric: tabular-nums;
}

.planned-list strong {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.planned-list .badge {
  align-self: center;
}

/* ==========================================================================
   26. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js .pattern-line--draw path {
    stroke-dashoffset: 0;
  }

  .hero__media img {
    animation: none;
    transform: none;
  }
}

/* ==========================================================================
   27. Print
   ========================================================================== */

@media print {
  .site-header,
  .action-bar,
  .utility,
  .pattern-line,
  .booking__frame {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .field,
  .page-head,
  .site-footer {
    background: #fff !important;
    color: #000 !important;
    padding-block: 24px;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}

/* ==========================================================================
   28. Service-page building blocks
   ========================================================================== */

/* Direct-answer block — the first thing a search visitor reads */
.answer {
  display: grid;
  gap: clamp(20px, 2.4vw, 30px);
  max-width: 46ch;
}

.answer__lead {
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -0.012em;
}

.split-2 {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

@media (min-width: 900px) {
  .split-2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .split-2--wide-left {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }

  .split-2--wide-right {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  }
}

.media-block {
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
}

.media-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-block--wide img {
  aspect-ratio: 3 / 2;
}

.media-block--tall img {
  aspect-ratio: 4 / 5;
}

.media-block--square img {
  aspect-ratio: 1 / 1;
}

.gallery {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 599px) {
  .gallery {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Compact process reminder — a sequence, not five cards */
.process-strip-wrap {
  container-type: inline-size;
}

.process-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(18px, 2.2vw, 26px) 0;
  list-style: none;
  margin: 0;
}

.process-strip li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  white-space: nowrap;
  font-size: var(--fs-small);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.process-strip li::before {
  content: attr(data-step);
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--accent-line);
  font-variant-numeric: tabular-nums;
}

.process-strip li::before {
  min-width: 2ch;
}

@container (min-width: 620px) {
  .process-strip {
    grid-template-columns: repeat(4, max-content) minmax(0, 1fr);
    gap: 0;
    justify-content: space-between;
  }

  .process-strip li + li {
    margin-left: 18px;
    padding-left: 18px;
    border-left: 1px solid var(--rule);
  }
}

/* Statement line — a single sentence given room, used once per page */
.statement {
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.375rem);
  font-weight: 650;
  letter-spacing: -0.028em;
  line-height: 1.2;
  max-width: 24ch;
}

/* Numbered decision list (options and choices) */
.decisions {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--rule);
  counter-reset: decision;
}

.decisions li {
  counter-increment: decision;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: clamp(12px, 2vw, 24px);
  padding: clamp(18px, 2.2vw, 26px) 0;
  border-bottom: 1px solid var(--rule);
}

.decisions li::before {
  content: counter(decision, decimal-leading-zero);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-line);
  font-variant-numeric: tabular-nums;
  padding-top: 5px;
}

.decisions h3 {
  font-size: var(--fs-h4);
  font-weight: 650;
  letter-spacing: -0.018em;
  margin-bottom: 6px;
}

.decisions p {
  color: var(--fg-dim);
  font-size: var(--fs-small);
  max-width: 62ch;
}

/* Timeline for wedding planning — a real sequence with intervals */
.timeline {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.timeline li {
  display: grid;
  gap: 4px 24px;
  padding: clamp(16px, 2vw, 24px) 0;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 700px) {
  .timeline li {
    grid-template-columns: minmax(150px, 0.32fr) minmax(0, 1fr);
    align-items: baseline;
  }
}

.timeline dt,
.timeline strong {
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.timeline p {
  color: var(--fg-dim);
  font-size: var(--fs-small);
}

/* Single-page men's suits: the existing Pattern Room identity, focused on one offer. */
.suits-page { --space-section: clamp(64px, 7vw, 112px); }
.suits-page figure { margin: 0; }
.suits-page .site-header { position: sticky; top: 0; background: var(--ink); border-bottom: 1px solid rgba(241,236,230,.15); }
.suits-page .site-header__inner { min-height: 88px; }
.suits-page .nav__link { font-size: var(--fs-menu); }
.suits-page :is(section, details)[id] { scroll-margin-top: 110px; }
.suits-page h1, .suits-page h2 { text-wrap: balance; }
.suit-hero { display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); color: var(--bone); }
.suit-hero__copy { padding: clamp(48px, 5vw, 80px) var(--gutter); align-self: center; }
.suit-hero h1 { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.04em; font-weight: 650; max-width: 9.5em; margin: 0 0 28px; }
.suit-hero__intro { font-size: var(--fs-lead); line-height: 1.55; max-width: 35ch; color: var(--bone); }
.suit-hero__location { font-size: var(--fs-body); color: var(--bone-dim); margin-top: 16px; }
.suit-hero__price { display: grid; grid-template-columns: 1fr 1fr; margin: 32px 0 28px; border-block: 1px solid rgba(241,236,230,.16); max-width: 520px; }
.suit-hero__tier { display: flex; flex-direction: column; gap: 10px; padding: 20px 24px 22px 0; min-width: 0; }
.suit-hero__tier + .suit-hero__tier { padding-left: 24px; border-left: 1px solid rgba(241,236,230,.16); }
.suit-hero__tier dt { font-size: var(--fs-meta); font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); }
.suit-hero__tier dd { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.suit-hero__from { font-size: var(--fs-small); color: var(--bone-dim); }
.suit-hero__amount { display: flex; align-items: flex-start; gap: 6px; font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem); font-weight: 650; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--bone); }
.suit-hero__cur { font-size: .36em; font-weight: 600; letter-spacing: .04em; padding-top: .3em; color: var(--bone-dim); }
.suit-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.suit-hero .btn { max-width: 100%; white-space: normal; text-align: center; font-size: var(--fs-button); }
.suit-hero__btn-icon, .btn-icon { flex: none; width: 22px; height: 22px; }
.suit-hero__explore { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: var(--fs-body); font-weight: 500; color: var(--bone); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 200ms var(--ease-out), gap 200ms var(--ease-out); }
.suit-hero__explore:hover { gap: 16px; border-bottom-color: rgba(241,236,230,.5); }
.suit-hero__reviews { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.g-badge { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; background: var(--cream); color: var(--espresso); border-radius: 6px; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 20px -10px rgba(0,0,0,.55); }
.g-badge__logo { flex: none; width: 32px; height: 32px; padding: 6px; background: #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(48,40,36,.1); }
.g-badge__score { font-size: 1.625rem; font-weight: 650; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.g-badge__body { display: flex; flex-direction: column; gap: 4px; padding-left: 10px; border-left: 1px solid rgba(48,40,36,.16); }
.g-badge__stars { display: flex; gap: 2px; }
.g-badge__stars svg { fill: #f5b400; }
.g-badge__label { font-size: var(--fs-small); line-height: 1.2; white-space: nowrap; color: #5b4f49; }
@media (max-width: 599px) { .suit-hero__reviews { flex-direction: column; } .g-badge { width: 100%; } }
.suit-hero__explore:focus-visible { outline: 2px solid var(--brass-200); outline-offset: 3px; }
.suit-hero__image { position: relative; min-width: 0; }
.suit-hero__image picture { display: block; height: 100%; }
.suit-hero__image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%; }
.suit-section-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: end; margin-bottom: 52px; }
.suit-section-head > p { max-width: 44ch; }
.suit-occasions { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.suit-occasions__image { position: sticky; top: 120px; }
.suit-occasions__image img { width: 100%; aspect-ratio: 1.12; object-fit: cover; object-position: 36% center; border-radius: 8px; }
.suit-occasions__list article { border-top: 1px solid var(--rule); padding: 26px 0; }
.suit-occasions__list article:first-child { padding-top: 18px; }
.suit-occasions__list h3 { font-size: var(--fs-h3); letter-spacing: -.025em; font-weight: 600; margin-bottom: 12px; }
.suit-occasions__list p { color: var(--fg-dim); margin-bottom: 14px; }
.suit-occasions__list .arrow-link { font-size: var(--fs-body); min-height: 44px; }
.suit-price { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.suit-price .h2 { margin-bottom: clamp(28px, 3vw, 40px); }
.suit-price__tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.suit-price__tier { display: flex; flex-direction: column; gap: 18px; padding: clamp(22px, 2vw, 30px); border: 1px solid rgba(241,236,230,.16); border-radius: 8px; background: rgba(241,236,230,.04); min-width: 0; }
.suit-price__label { margin: 0; font-size: var(--fs-meta); font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); }
.suit-price__amount { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.suit-price__from { font-size: var(--fs-small); color: var(--bone-dim); }
.suit-price__figure { display: flex; align-items: flex-start; gap: 6px; font-size: clamp(2.5rem, 2rem + 1.8vw, 3.5rem); font-weight: 650; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.suit-price__cur { font-size: .34em; font-weight: 600; letter-spacing: .04em; padding-top: .3em; color: var(--bone-dim); }
.suit-price__includes { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid rgba(241,236,230,.16); display: grid; gap: 10px; }
.suit-price__includes li { display: flex; align-items: center; gap: 12px; font-size: var(--fs-body); }
.suit-price__includes li::before { content: ""; flex: none; width: 10px; height: 5px; margin-top: -3px; border-left: 1.5px solid var(--vermilion); border-bottom: 1.5px solid var(--vermilion); transform: rotate(-45deg); }
.suit-price__note { margin-top: 24px; max-width: 52ch; font-size: var(--fs-small); line-height: 1.6; color: var(--bone-dim); }
.suit-price .btn { margin-top: 28px; }
.suit-price figure img { aspect-ratio: .95; object-fit: cover; border-radius: 8px; }
.suit-process { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(36px, 6vw, 88px); align-items: start; }
.suit-process figure img { width: 100%; aspect-ratio: .95; object-fit: cover; object-position: 58% center; border-radius: 8px; }
.suit-process ol { padding: 0; margin: 0; list-style: none; }
.suit-process li { display: grid; grid-template-columns: 42px 1fr; gap: 20px; border-top: 1px solid var(--rule); padding: 24px 0; }
.suit-process li:first-child { padding-top: 18px; }
.suit-step { font-size: var(--fs-body); padding-top: 3px; font-variant-numeric: tabular-nums; color: var(--tobacco-600); }
.suit-process h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.025em; margin-bottom: 10px; }
.suit-process li p { font-size: var(--fs-body); line-height: 1.65; }
.suit-network { display: flex; flex-wrap: wrap; column-gap: 24px; row-gap: 10px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule); font-size: var(--fs-small); }
.suit-network a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.suit-network span { display: inline-flex; align-items: center; }
.suit-faq { display: grid; gap: 32px; max-width: 1200px; align-items: start; }
.suit-faq h2 { margin-bottom: 0; }
.suit-faq .accordion { min-width: 0; }
.suit-faq .accordion__panel { max-width: none; padding-right: 40px; }
@media (min-width: 1000px) {
  .suit-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(48px, 5vw, 80px); }
}
.suits-page .booking__frame { display: none; }
.suits-page .booking__grid { gap: clamp(40px, 6vw, 88px); }
.suits-page .booking__aside .meta { color: var(--bone-dim); }
.suits-page .site-footer { padding-top: 54px; }
.suits-page .suit-site-footer { padding-top: clamp(56px, 6vw, 88px); background: #261f1c; border-top: 1px solid rgba(241,236,230,.1); }
.suit-footer { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(32px, 5vw, 80px); padding-bottom: clamp(40px, 4vw, 56px); }
.suit-footer__brand p { max-width: 34ch; margin-top: 20px; font-size: var(--fs-body); line-height: 1.65; color: var(--bone-dim); }
.suit-footer__title { margin: 0 0 14px; font-size: var(--fs-meta); font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); opacity: .75; }
.suit-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.suit-footer__col li { display: flex; align-items: center; min-height: 40px; font-size: var(--fs-body); color: var(--bone); }
.suit-site-footer .suit-footer__col a { color: var(--bone); }
.suit-site-footer .suit-footer__col a:hover { color: var(--white); }
.suit-site-footer .suit-footer__cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 8px; font-weight: 600; color: var(--white); }
.suit-site-footer .suit-footer__cta:hover { text-decoration: none; }
.suit-footer__cta .svc__arrow { color: var(--vermilion); transition: transform 200ms var(--ease-out); }
.suit-footer__cta:hover .svc__arrow { transform: translateX(4px); }
.suit-footer__venue { margin: 0; font-size: var(--fs-h4); font-weight: 650; line-height: 1.3; color: var(--bone); }
.suit-footer__location-note { margin: 8px 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--bone-dim); }
.suit-footer__address { margin-top: 20px; font-style: normal; font-size: var(--fs-body); line-height: 1.65; color: var(--bone-dim); }
.suit-site-footer .suit-footer__visit .suit-footer__cta { margin-top: 24px; }
@media (max-width: 599px) { .suit-footer__visit { grid-column: 1 / -1; } }
.suits-page .footer__bottom { align-items: center; border-top: 1px solid rgba(241,236,230,.12); padding-top: 20px; }
.suit-footer__legal { display: grid; gap: 4px; }
.suit-footer__legal p { margin: 0; }
.suits-page .footer__bottom .suit-footer__top { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid rgba(241,236,230,.2); border-radius: 999px; color: var(--bone); }
.suits-page .footer__bottom .suit-footer__top:hover { text-decoration: none; border-color: rgba(241,236,230,.5); }
.suits-page .drawer__body > .btn { margin-top: 24px; }
.suits-page .drawer .shell { padding-bottom: 32px; }
.suits-page input, .suits-page textarea { caret-color: var(--tobacco-200); }
.suits-page { scrollbar-color: var(--tobacco-600) var(--bone); }
html:not(.js) [data-booking-form], html:not(.js) .nav-toggle { display: none; }
html:not(.js) .suits-page .nav { display: block; }
html:not(.js) .suits-page .nav__list { flex-wrap: wrap; }
@media (prefers-reduced-motion: no-preference) {
  .suit-hero__image img { animation: suit-arrive 900ms cubic-bezier(.16,1,.3,1) both; }
  @keyframes suit-arrive { from { clip-path: inset(0 0 5% 0); } to { clip-path: inset(0); } }
}
@media (max-width: 1100px) {
  .suits-page .header__cta { display: none; }
  .suit-hero .btn { padding-inline: 18px; }
}
@media (max-width: 899px) {
  .suits-page .site-header__inner { min-height: 74px; }
  .suit-hero { grid-template-columns: 1fr; }
  .suit-hero__copy { padding: 48px var(--gutter) 42px; }
  .suit-hero__intro { max-width: 42ch; }
  .suit-hero__image { height: clamp(380px, 80vw, 620px); }
  .suit-hero__image img { object-position: 50% 26%; }
  .suit-section-head, .suit-occasions, .suit-price, .suit-process { grid-template-columns: 1fr; }
  .suit-section-head { gap: 24px; margin-bottom: 36px; }
  .suit-occasions__image { position: static; }
  .suit-occasions__image img { aspect-ratio: 1.4; }
  .suit-price figure img { aspect-ratio: 1.35; }
  .suit-process figure img { aspect-ratio: 1.3; }
  .suit-price .h2, .suit-section-head .h2 { max-width: 18ch; }
  .suits-page :is(section, details)[id] { scroll-margin-top: 90px; }
}
@media (max-width: 540px) {
  .suits-page .suit-hero .btn { gap: 8px; width: 100%; padding-inline: 16px; font-size: .9375rem; }
  .suit-hero__copy { padding-top: 38px; }
  .suit-hero__price { margin-top: 24px; }
  .suit-hero__actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .suit-hero__explore { align-self: flex-start; }
  .suit-price__tiers { gap: 10px; }
  .suit-price__tier { padding: 18px 16px; gap: 14px; }
  .suit-price__figure { font-size: 2.25rem; }
  .suit-footer { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .suit-footer__brand { grid-column: 1 / -1; }
  .suit-site-footer .suit-footer__cta { white-space: nowrap; }
  .suit-footer__cta .svc__arrow { display: none; }
  .suit-process li { grid-template-columns: 28px 1fr; gap: 14px; }
}

.suits-page .arrow-link::after { content: none; }

/* Hero image rotation keeps both portraits in the same fixed grid area. */
.suit-hero__image { display: grid; isolation: isolate; }
.suit-hero__slide { grid-area: 1 / 1; min-width: 0; min-height: 0; opacity: 0; pointer-events: none; transition: opacity 700ms var(--ease-out); }
.suit-hero__slide.is-active { opacity: 1; pointer-events: auto; }
.suit-hero__controls { position: absolute; z-index: 1; bottom: 18px; right: 18px; display: flex; gap: 8px; }
.suit-hero__controls[hidden] { display: none; }
.suit-hero__controls button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(241,236,230,.4); border-radius: 8px; background: var(--ink); color: var(--bone); font: inherit; font-size: var(--fs-meta); cursor: pointer; }
.suit-hero__controls button:hover { background: var(--vermilion); color: var(--white); }
.suit-hero__controls button:focus-visible { outline: 2px solid var(--brass-200); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .suit-hero__slide { transition: none; } }

/* Shared control roles stay legible at every breakpoint. */
.suits-page .btn { font-size: var(--fs-button); font-weight: 600; line-height: 1.4; }
.suits-page .input, .suits-page .select, .suits-page .textarea { font-size: var(--fs-body); }
.suits-page .suit-footer .dim, .suits-page .suit-process li p { line-height: var(--lh-body); }

/* About: local service takes priority within the regional network. */
.suit-about__heading {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: end;
  gap: clamp(32px, 6vw, 88px);
  margin-bottom: 40px;
}
.suit-about__heading .lead { max-width: 32ch; color: var(--fg-dim); }
.suit-about__network {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 6vw, 88px);
}
.suit-about__local {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 64px;
  padding: clamp(28px, 3.5vw, 48px);
  background: var(--espresso);
  color: var(--cream);
}
.suit-about__place { display: flex; align-items: start; justify-content: space-between; gap: 24px; }
.suit-about__place h3 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; }
.suit-about__place h3 span { display: block; margin-top: 12px; font-size: var(--fs-body); font-weight: 400; letter-spacing: 0; color: var(--bone-dim); }
.suit-about__place > svg { flex: none; margin-top: 5px; color: var(--bone-dim); }
.suit-about__local-copy p { max-width: 39ch; font-size: var(--fs-body); color: var(--bone-dim); }
.suit-about__local-copy .arrow-link { color: var(--cream); margin-top: 24px; min-height: 44px; font-size: var(--fs-body); }
.suit-about__partners { align-self: center; }
.suit-about__intro { color: var(--fg-dim); max-width: 48ch; padding-bottom: 28px; }
.suit-about__partner { border-top: 1px solid var(--rule-strong); padding: 24px 0; }
.suit-about__partner:last-child { padding-bottom: 0; }
.suit-about__partner h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.suit-about__partner p { color: var(--fg-dim); max-width: 46ch; margin-top: 12px; }
.suit-about__partner .arrow-link { min-height: 44px; margin-top: 10px; font-size: var(--fs-body); }
@media (max-width: 899px) {
  .suit-about__heading, .suit-about__network { grid-template-columns: 1fr; gap: 28px; }
  .suit-about__heading { margin-bottom: 32px; gap: 20px; }
  .suit-about__local { gap: 48px; }
  .suit-about__partners { padding-top: 4px; }
}

.suit-about__local .svc__arrow { color: currentColor; }

/* Viewport hero: image sizing never dictates the height of the text column. */
.suit-hero { min-height: calc(100svh - 89px); }
.suit-hero__image { min-height: 0; height: auto; overflow: clip; }
.suit-hero__slide { position: absolute; inset: 0; }
.suit-hero__copy { padding-block: clamp(28px, 5vh, 64px); }
@media (min-width: 900px) {
  .suit-hero { min-height: max(600px, calc(100svh - 89px)); }
}
@media (max-width: 899px) {
  .suit-hero { min-height: calc(100svh - 75px); grid-template-rows: auto minmax(180px, 1fr); }
  .suit-hero__copy { padding-block: 24px; }
  .suit-hero h1 { margin-bottom: 16px; }
  .suit-hero__intro { font-size: var(--fs-body); line-height: 1.5; }
  .suit-hero__location { margin-top: 10px; font-size: var(--fs-small); }
  .suit-hero__price { margin-block: 16px; }
  .suit-hero__tier { padding-block: 12px 14px; gap: 6px; }
  .suit-hero__image { height: auto; min-height: 180px; }
  .suit-hero__image img { object-position: 50% 25%; }
}

/* Booking panel: cream (bone) field. Light-field roles from the root apply:
   ink text, slate-strong secondary, #B2331B for small accents, white form surfaces, 2px radius. */
.suits-page .booking { --input-border: rgba(48,40,36,.24); --input-border-hover: rgba(48,40,36,.5); }
.suits-page .booking__points { gap: 14px; font-size: var(--fs-body); color: var(--fg); }
.suits-page .booking__points li { grid-template-columns: 16px minmax(0, 1fr); gap: 14px; align-items: start; line-height: 1.5; }
.booking__check { display: block; padding-top: 5px; color: var(--tobacco-600); }
.suits-page .booking__points .booking__check svg { display: block; width: 16px; height: 16px; margin: 0; color: inherit; }
.suits-page .booking__aside .meta { color: var(--fg-dim); font-size: var(--fs-small); padding-top: 16px; border-top: 1px solid var(--rule); }

.suits-page .booking .field-group { gap: 10px; }
.suits-page .booking .field-group > label { font-size: var(--fs-label); letter-spacing: .06em; color: var(--fg-dim); }
.suits-page .booking .req { color: var(--tobacco-600); }
.suits-page .booking :is(.input, .select, .textarea) { min-height: 56px; padding: 15px 18px; background-color: var(--paper); border: 1px solid var(--input-border); border-radius: var(--r-sm); color: var(--fg); caret-color: var(--fg); transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.suits-page .booking :is(.input, .select, .textarea):hover { border-color: var(--input-border-hover); }
.suits-page .booking :is(.input, .select, .textarea):focus-visible,
.suits-page .booking :is(.input, .textarea):focus { outline: 2px solid var(--fg); outline-offset: 2px; border-color: var(--fg); background-color: var(--paper); }
.suits-page .booking .textarea { min-height: 120px; line-height: 1.55; }
.suits-page .booking :is(.input, .textarea)::placeholder { color: var(--fg-dim); opacity: .8; }
.suits-page .booking .select { cursor: pointer; padding-right: 52px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%23302824' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5.5 7 9l3.5-3.5'/%3E%3C/svg%3E"); background-position: right 18px center; background-size: 14px 14px; background-repeat: no-repeat; }
.suits-page .booking .select option { background: var(--paper); color: var(--fg); }
.suits-page .booking .field-group[data-invalid="true"] :is(.input, .select) { border-color: var(--error); background-color: color-mix(in srgb, var(--error) 5%, var(--paper)); }

/* Enhanced dropdowns and date trigger (rendered by was.js). */
.suits-page .booking .form-control { gap: 12px; font-weight: 400; }
.suits-page .booking .form-control[data-placeholder="true"] { color: var(--fg-dim); }
.suits-page .booking .form-control svg { width: 18px; height: 18px; flex-basis: 18px; color: var(--fg-dim); transition: transform 200ms var(--ease-out), color 160ms var(--ease); }
.suits-page .booking .form-control:hover svg { color: var(--fg); }
.suits-page .booking .form-control[aria-expanded="true"] { border-color: var(--fg); }
.suits-page .booking .custom-select__list { top: calc(100% + 6px); max-height: 380px; padding: 6px; border: 1px solid var(--input-border); border-radius: var(--r-sm); background: var(--paper); color: var(--fg); box-shadow: 0 18px 36px -14px rgba(48,40,36,.35); scrollbar-color: var(--rule-strong) transparent; animation: booking-list-in 160ms var(--ease-out); }
.suits-page .booking .custom-select__list [role="option"] { display: flex; align-items: center; padding: 11px 40px 11px 14px; color: var(--fg); transition: background-color 120ms var(--ease); }
.suits-page .booking .custom-select__list [role="option"]:hover,
.suits-page .booking .custom-select__list [data-active="true"] { background: color-mix(in srgb, var(--ink) 6%, var(--paper)); }
.suits-page .booking .custom-select__list [aria-selected="true"] { background: color-mix(in srgb, var(--vermilion) 9%, var(--paper)); color: var(--fg); font-weight: 600; }
.suits-page .booking .custom-select__list [aria-selected="true"]::after { top: 50%; right: 16px; width: 6px; height: 11px; margin-top: -7px; border-color: var(--tobacco-600); border-width: 0 2px 2px 0; }
@keyframes booking-list-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .suits-page .booking .custom-select__list { animation: none; } }

.suits-page .booking #booking-nodate { appearance: none; display: inline-grid; place-items: center; width: 20px !important; height: 20px !important; margin: 0; border: 1px solid var(--input-border-hover); border-radius: var(--r-sm); background: var(--paper); cursor: pointer; transition: background-color 160ms var(--ease), border-color 160ms var(--ease); }
.suits-page .booking #booking-nodate:hover { border-color: var(--fg); }
.suits-page .booking #booking-nodate:checked { background: var(--vermilion); border-color: var(--vermilion); }
.suits-page .booking #booking-nodate:checked::after { content: ""; width: 9px; height: 5px; margin-top: -2px; border-style: solid; border-color: var(--white); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.suits-page .booking #booking-nodate:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.suits-page .booking .field-hint label { cursor: pointer; color: var(--fg-dim); font-size: var(--fs-small) !important; }
.suits-page .booking .form__consent { color: var(--fg-dim); }
.suits-page .booking .form__actions .btn .svc__arrow { color: currentColor; }
.suits-page .booking .btn--primary:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.suits-page .booking .handoff { background: var(--paper); border-color: var(--rule-strong); border-radius: var(--r-sm); }
.suits-page .booking .handoff__message { border-left: 1px solid var(--rule-strong); }
.suits-page .booking .custom-select__list [role="option"][data-group-start] { margin-top: 13px; position: relative; }
.suits-page .booking .custom-select__list [role="option"][data-group-start]::before { content: ""; position: absolute; left: 8px; right: 8px; top: -8px; height: 1px; background: var(--rule); }
.header__cta .btn-icon { width: 20px; height: 20px; }
@media (max-width: 1099px) { .site-header__inner .nav-toggle { margin-left: auto; } }
/* Logo lockup: WAS monogram + text, separated by a hairline. */
.wordmark { flex-direction: row; align-items: center; gap: 14px; }
.wordmark__mark { display: block; width: auto; height: 40px; flex: none; }
.wordmark__text { display: flex; flex-direction: column; gap: 4px; padding-left: 14px; border-left: 1px solid rgba(241,236,230,.22); }
@media (max-width: 899px) {
  .wordmark { gap: 11px; }
  .wordmark__mark { height: 32px; }
  .wordmark__text { padding-left: 11px; }
}