/* ============================================================
   IJI — component library.
   1:1 with the approved mock-up docs/ui/preview/property-websites-preview.html
   and the component spec docs/ui/property-websites.md §2.
   Rules: radius 0 (2px on controls only), no shadows except overlays,
   no gradients (the hero scrim is the single documented exception).
   ============================================================ */

/* ---------------- 2.1 Button ---------------- */
.c-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--control-h-lg); padding-inline: 32px;
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600;
  text-align: center; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radius-xs);
  transition: background var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
.c-btn--md { min-height: var(--control-h-md); }
.c-btn--primary { background: var(--color-accent); color: #FFFFFF; }
.c-btn--primary:hover { background: var(--iji-flame-700); }
.c-btn--brand { background: var(--iji-forest-relic); color: var(--color-text-on-dark); }
.c-btn--brand:hover { background: var(--iji-forest-700); }
.c-btn--secondary { background: transparent; color: var(--iji-forest-relic); border-color: var(--iji-forest-relic); }
.c-btn--secondary:hover { background: var(--iji-forest-relic); color: var(--color-text-on-dark); }
.c-btn--on-dark { background: transparent; color: var(--color-text-on-dark); border-color: var(--color-text-on-dark); }
.c-btn--on-dark:hover { background: rgba(237,236,233,0.14); }
.c-btn[disabled], .c-btn[aria-disabled="true"] {
  background: var(--color-disabled-bg); color: var(--color-disabled-ink);
  border-color: transparent; cursor: not-allowed;
}
.c-btn__arrow { transition: transform var(--dur-micro) var(--ease-out); }
@media (hover: hover) { .c-btn:hover .c-btn__arrow { transform: translateX(2px); } }

.c-link-more {
  display: inline-block;
  font-size: var(--fs-small); font-weight: 600; color: var(--iji-forest-relic);
  border-bottom: 1px solid var(--iji-forest-relic); padding-bottom: 2px;
}
.c-link-more--on-dark { color: var(--color-text-on-dark); border-bottom-color: var(--color-text-on-dark); }

/* ---------------- 2.13 Header ---------------- */
.c-header { background: var(--color-bg); border-bottom: 1px solid var(--color-border); position: relative; z-index: 20; }
.c-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 88px; }
.c-header__logo img { display: block; height: 72px; width: auto; }
.c-header__tools { display: flex; align-items: center; gap: 16px; }
.c-nav { display: flex; align-items: center; gap: 36px; }
.c-nav a {
  /* One step up from the shared small size: at 15px the menu read as fine print
     next to a 72px logo. The tokens stay untouched — they drive the whole site. */
  font-size: var(--fs-body); font-weight: 500; color: var(--color-text);
  padding-block: 8px; border-bottom: 1px solid transparent;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.c-nav a:hover { border-bottom-color: var(--iji-forest-relic); }
.c-nav .c-nav__caret { font-size: .7em; color: var(--color-text-muted); }

/* Dropdowns. The header wrapped onto two lines when every page was spelled out
   in the top level, so Stay and Partnership hold their children here instead.
   focus-within keeps them reachable by keyboard without any script. */
.c-nav > li { position: relative; }
.c-nav > li > a { white-space: nowrap; }
.c-nav .sub-menu {
  position: absolute; top: 100%; inset-inline-start: 0; z-index: 30;
  min-width: 248px; margin: 0; padding: 8px 0; list-style: none;
  background: var(--color-bg); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-overlay);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out),
              visibility var(--dur-micro) var(--ease-out);
}
.c-nav > li:hover > .sub-menu,
.c-nav > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.c-nav .sub-menu a {
  display: block; padding: 8px 18px; white-space: nowrap; line-height: 1.35;
  font-size: var(--fs-small); border-bottom: 0;
}
.c-nav .sub-menu a:hover { background: var(--color-bg-alt); border-bottom: 0; }

/* The mobile panel is a flat list — no hover there to open anything. */
.c-mobile-menu .sub-menu { list-style: none; margin: 0; padding: 0; }
.c-mobile-menu .sub-menu a { padding-inline-start: calc(var(--page-gutter) + 16px); font-weight: 400; }
.c-mobile-menu .c-nav__caret { display: none; }

/* 2.14 Language switch */
.c-lang-switch {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  /* Moves with the menu so the two sit on the same optical level. */
  font-size: var(--fs-small); font-weight: 500;
}
.c-lang-switch a, .c-lang-switch span { padding: 6px 14px; }
.c-lang-switch .is-active { background: var(--iji-stone-ash); color: var(--color-text-on-dark); }
.c-lang-switch [aria-disabled="true"] { color: var(--color-disabled-ink); cursor: not-allowed; }

.c-ig-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; color: var(--iji-stone-ash);
  transition: color var(--dur-micro) var(--ease-out);
}
.c-ig-link:hover { color: var(--iji-forest-relic); }
.c-ig-link--on-dark { color: var(--color-text-on-dark); opacity: .88; width: auto; }
.c-ig-link--on-dark:hover { opacity: 1; color: var(--color-text-on-dark); }
.c-ig-link__handle { margin-inline-start: 8px; font-size: 14px; letter-spacing: .04em; }

/* Footer social row. The on-dark links are auto-width, so without a gap the two
   glyphs would touch. */
.c-social { display: flex; align-items: center; gap: 14px; margin-block-start: 16px; }

.c-burger {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: var(--tap-min); height: var(--tap-min);
  background: none; border: 1px solid var(--color-border-strong); border-radius: var(--radius-xs);
  cursor: pointer;
}
.c-burger i { display: block; width: 18px; height: 1px; background: var(--iji-stone-ash); }
.c-mobile-menu {
  display: none; flex-direction: column;
  background: var(--color-bg); border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-overlay); /* the single allowed shadow */
}
.c-mobile-menu a { padding: 16px var(--page-gutter); border-top: 1px solid var(--color-border); font-weight: 500; }
.c-mobile-menu.is-open { display: flex; }

/* ---------------- 2.5 Hero ---------------- */
.c-hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: min(88vh, 720px);
  background: var(--iji-forest-relic); color: var(--color-text-on-dark);
  overflow: hidden;
}
.c-hero__media, .c-hero__media img, .c-hero__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* The video fades over the poster only once it can actually play through,
   so a half-buffered file never shows as a stutter. */
.c-hero__media video { opacity: 0; transition: opacity 900ms ease; }
.c-hero.has-video .c-hero__media video { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .c-hero__media video { transition: none; }
}
/* Two layers. The vertical one lifts the bottom edge; the horizontal one covers the
   left half, which is where every hero puts its type — measured at 38-48% of the
   hero height, exactly where a bottom-weighted gradient is still almost clear. */
.c-hero__scrim { position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(63,58,54,.58) 0%, rgba(63,58,54,.40) 34%, rgba(63,58,54,.10) 62%, rgba(63,58,54,0) 80%),
    var(--color-overlay-scrim); }
.c-hero__content { position: relative; width: 100%; padding-block: var(--section-y); }
.c-hero__text { max-width: 640px; }
.c-hero h1 { font-size: var(--fs-display); color: var(--color-text-on-dark); max-width: var(--measure-display); margin-block: 0 24px; letter-spacing: var(--tracking-display);
  /* Local contrast where a bright render sits directly behind the type. */
  text-shadow: 0 1px 24px rgba(43,39,36,.55), 0 1px 3px rgba(43,39,36,.35); }
.c-hero .c-lead { max-width: 52ch; margin-block-end: 32px; opacity: .94; text-shadow: 0 1px 16px rgba(43,39,36,.5); }
.c-hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; }

.c-hero--property { background: var(--iji-stone-ash); min-height: min(78vh, 640px); }
.c-hero--property h1 { font-size: var(--fs-h1); margin-block-end: 12px; }
.c-hero--soon { background: var(--iji-sandy-pearl); color: var(--iji-stone-ash); min-height: min(70vh, 560px); }
.c-hero--soon h1 { font-size: var(--fs-h1); margin-block-end: 12px; color: var(--iji-stone-ash); }
/* With a render behind it the sandy ground is gone and the type must read on dark. */
.c-hero--soon.has-media { background: var(--iji-stone-ash); color: var(--color-text-on-dark); }
.c-hero--soon.has-media h1,
.c-hero--soon.has-media .c-lead,
.c-hero--soon.has-media .c-hero__essence { color: var(--color-text-on-dark); }
.c-hero__essence { font-size: var(--fs-lead); max-width: 46ch; margin-block-end: 28px; }
.c-hero--property .c-hero__essence { opacity: .94; }

/* 2.18 Status badge */
.c-status-badge {
  display: inline-block; padding: 6px 14px;
  background: rgba(237,236,233,0.92); color: var(--iji-stone-ash);
  font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 500;
  letter-spacing: var(--tracking-caption); text-transform: uppercase;
  border-radius: var(--radius-pill);
}
.c-status-badge--overlay { position: absolute; top: 16px; inset-inline-start: 16px; }

/* ---------------- 2.6 B2B entry strip (replaces the audience switcher) ---------------- */
.c-link-strip { border-block: 1px solid var(--color-border); }
.c-link-strip__inner {
  display: flex; justify-content: center; align-items: center; gap: 48px; flex-wrap: wrap;
  padding-block: 20px; font-size: var(--fs-small); color: var(--color-text-muted);
}
.c-link-strip a { font-weight: 600; color: var(--iji-forest-relic); border-bottom: 1px solid var(--iji-forest-relic); padding-bottom: 1px; }

/* ---------------- 2.3 Property card ---------------- */
.c-property-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gutter); }
.c-property-card { container-type: inline-size; display: flex; flex-direction: column; }
.c-property-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.c-property-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-ui) var(--ease-out); }
@media (hover: hover) { .c-property-card:hover .c-property-card__media img { transform: scale(1.03); } }
.c-property-card__body { padding-block-start: 20px; }
.c-property-card__district {
  font-size: var(--fs-caption); font-weight: 500; letter-spacing: var(--tracking-caption);
  text-transform: uppercase; color: var(--color-text-muted);
}
.c-property-card h3 { font-size: var(--fs-h3); margin-block: 8px; }
.c-property-card__teaser { font-size: var(--fs-small); color: var(--color-text-muted); margin-block-end: 12px; max-width: 52ch; }

/* ---------------- 2.4 Unit card ---------------- */
.c-unit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); }
.c-unit-card { container-type: inline-size; display: flex; flex-direction: column; }
.c-unit-card__media { aspect-ratio: 4 / 3; overflow: hidden; }
.c-unit-card__media img { width: 100%; height: 100%; object-fit: cover; }
.c-unit-card__body { padding-block-start: 16px; }
.c-unit-card h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h4); margin-block-end: 6px; }
.c-unit-card__capacity {
  display: block; margin-block-end: 10px;
  font-size: var(--fs-caption); letter-spacing: var(--tracking-caption);
  text-transform: uppercase; color: var(--color-text-muted);
}
.c-unit-card ul { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.c-unit-card li { position: relative; padding-inline-start: 16px; font-size: var(--fs-small); color: var(--color-text-muted); }
.c-unit-card li::before { content: ""; position: absolute; inset-inline-start: 0; top: .75em; width: 6px; height: 1px; background: var(--iji-forest-relic); }

/* ---------------- Direct-booking block ---------------- */
.c-direct { background: var(--color-surface-warm); }
.c-direct__inner { max-width: 820px; margin-inline: auto; text-align: center; }
.c-direct h2 { font-size: var(--fs-h2); margin-block-end: 32px; }
.c-direct__perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); margin-block-end: 40px; }
.c-direct__perks div { border-top: 1px solid var(--iji-sand-600); padding-block-start: 16px; font-size: var(--fs-small); color: var(--iji-stone-ash); }

/* ---------------- 2.17 Neighbour cross-sell ---------------- */
.c-neighbour { container-type: inline-size; background: var(--color-bg-alt); }
.c-neighbour__split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.c-neighbour__media { min-height: 320px; }
.c-neighbour__media img { width: 100%; height: 100%; object-fit: cover; }
.c-neighbour__text {
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  padding: var(--section-y) var(--card-pad);
  background: var(--color-surface-dark); color: var(--color-text-on-dark);
}
.c-neighbour__text h2 { color: var(--color-text-on-dark); font-size: var(--fs-h2); }
.c-neighbour__text p { font-size: var(--fs-small); opacity: .9; max-width: 48ch; }
.c-neighbour__text .c-btn { align-self: flex-start; margin-block-start: 8px; }

/* ---------------- Guest benefits strip ---------------- */
.c-benefits { border-block: 1px solid var(--color-border); }
.c-benefits__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.c-benefits__item {
  padding: 40px var(--card-pad); text-align: center;
  border-inline-start: 1px solid var(--color-border);
  font-family: var(--font-heading); font-size: var(--fs-h4); line-height: 1.5; color: var(--color-heading);
}
.c-benefits__item:first-child { border-inline-start: 0; }

/* ---------------- B2B band ---------------- */
.c-b2b { background: var(--color-surface-brand); color: var(--color-text-on-dark); }
.c-b2b h2 { color: var(--color-text-on-dark); font-size: var(--fs-h2); margin-block-end: 40px; }
/* Two plain columns split by one hairline, not two boxes: on a saturated ground a
   border repeats the section edge, and a fixed card height forced both columns to
   match the taller one. The merged card gets the wider measure — it carries two
   destinations. */
.c-b2b__cards { display: grid; grid-template-columns: 1fr; }
.c-b2b-card { display: flex; flex-direction: column; background: none; border: 0;
  padding: 0; min-inline-size: 0; }
.c-b2b-card + .c-b2b-card { margin-block-start: 32px; padding-block-start: 32px;
  border-block-start: 1px solid rgba(237,236,233,.22); }
.c-b2b-card h3 { color: var(--color-text-on-dark); font-size: var(--fs-h3); margin: 0; }
.c-b2b-card p { font-size: var(--fs-body); line-height: 1.6; margin-block: 16px 0; max-width: 46ch; }

.c-b2b-card__actions { display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px 24px; margin-block-start: auto; padding-block-start: 28px; }
.c-b2b-card__link { display: inline-flex; align-items: center; gap: 8px;
  min-block-size: 44px; font-size: var(--fs-small); color: var(--color-text-on-dark);
  text-decoration-line: underline; text-decoration-thickness: 1px;
  text-underline-offset: 4px; text-decoration-color: rgba(237,236,233,.45);
  transition: text-decoration-color var(--dur-micro) var(--ease-out); }
.c-b2b-card__link::after { content: "\2192"; transition: transform var(--dur-micro) var(--ease-out); }
.c-b2b-card__link:hover { text-decoration-color: currentColor; }
.c-b2b-card__link:hover::after { transform: translateX(3px); }
.c-b2b-card__link:focus-visible { outline: 2px solid var(--color-text-on-dark); outline-offset: 3px; }

@media (min-width: 768px) {
  .c-b2b__cards { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); margin-block-start: 64px; }
  .c-b2b-card { padding-inline-end: 48px; }
  .c-b2b-card + .c-b2b-card { margin-block-start: 0; padding-block-start: 0;
    padding-inline: 48px 0; border-block-start: 0;
    border-inline-start: 1px solid rgba(237,236,233,.22); }
}

@media (prefers-reduced-motion: reduce) {
  .c-b2b-card__link, .c-b2b-card__link::after { transition: none; }
  .c-b2b-card__link:hover::after { transform: none; }
}

/* ---------------- 2.9 Stat band (B2B only) ---------------- */
.c-stat-band {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  margin-block-start: 40px; padding-block-start: 40px;
  border-top: 1px solid rgba(237,236,233,0.35);
}
.c-stat-band > div { border-inline-start: 1px solid rgba(237,236,233,0.35); padding-inline-start: 20px; }
.c-stat-band > div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.c-stat-band b { display: block; font-family: var(--font-heading); font-weight: 400; font-size: var(--fs-h1); color: var(--color-text-on-dark); }
.c-stat-band > div:first-child b { font-size: calc(var(--fs-h1) * 1.25); }
.c-stat-band span { font-size: var(--fs-small); opacity: .85; }

/* 2.8 Operator proof band */
.c-operator-proof { background: var(--color-surface-brand); color: var(--color-text-on-dark); }
.c-operator-proof__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: center; }
.c-operator-proof b { display: block; font-family: var(--font-heading); font-weight: 400; font-size: calc(var(--fs-h1) * 1.15); }
.c-operator-proof span { font-size: var(--fs-small); opacity: .85; }

/* ---------------- 2.7 Guest quote ---------------- */
.c-quote-band { background: var(--color-surface-warm); }
/* On property pages the quote band lands straight after the direct-booking band,
   which is the same sand. Two identical grounds in a row read as one long block —
   and the logobook forbids leaning on a secondary colour twice over. */
.c-direct + .c-quote-band { background: var(--color-bg-alt); }

/* The gallery sits after the unit grid on a property page (alternate ground, so
   base is right) but after the amenities list on a unit page (base ground, so
   base collides). Its ground therefore has to follow the section before it. */
.u-section:not(.u-section--alt) + .u-section:has(.c-gallery) { background: var(--color-bg-alt); }
.c-quote-band__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; align-items: start; }
/* width:100% is load-bearing: `margin-inline:auto` drops the grid stretch, and
   `container-type:inline-size` then forbids sizing from the text — without an
   explicit width the figure collapses to 0 and the quote wraps letter by letter. */
.c-guest-quote { container-type: inline-size; width: 100%; max-width: 760px; margin-inline: auto; text-align: center; }
.c-guest-quote blockquote {
  margin: 0 0 24px; font-family: var(--font-heading);
  font-size: calc(var(--fs-quote) * .78); line-height: 1.55; color: var(--iji-stone-ash);
}
.c-guest-quote cite {
  font-style: normal; font-size: var(--fs-small); font-weight: 500; color: var(--iji-muted-700);
  letter-spacing: var(--tracking-caption); text-transform: uppercase;
}

/* ---------------- 2.11 FAQ ---------------- */
.c-faq { max-width: 820px; }
.c-faq__item { border-top: 1px solid var(--color-border); }
.c-faq__item:last-child { border-bottom: 1px solid var(--color-border); }
.c-faq__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-block: 20px; background: none; border: 0; cursor: pointer;
  font-family: var(--font-heading); font-size: var(--fs-h3); color: var(--color-heading); text-align: start;
}
.c-faq__marker { font-size: var(--fs-body); color: var(--iji-forest-relic); }
.c-faq__a { padding-block-end: 20px; font-size: var(--fs-small); color: var(--color-text-muted); }
.c-faq__a[hidden] { display: none; }

/* ---------------- 2.12 Gallery ---------------- */
.c-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.c-gallery figure { margin: 0; }
.c-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-gallery figcaption { margin-block-start: 8px; font-size: var(--fs-caption); color: var(--color-text-muted); }

/* ---------------- 2.2 Form field / forms ---------------- */
.c-form { background: var(--color-surface); border: 1px solid var(--iji-sand-600); padding: var(--card-pad); }
.c-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-block-end: 16px; }
.c-form__row--full { grid-template-columns: 1fr; }
.c-field { display: flex; flex-direction: column; gap: 6px; }
.c-field--full { grid-column: 1 / -1; }
.c-field label { font-size: var(--fs-small); font-weight: 500; }
.c-field .c-field__req { color: var(--iji-error); }
.c-field input, .c-field select, .c-field textarea {
  min-height: var(--control-h-md); padding: 12px 14px;
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-xs);
}
.c-field textarea { min-height: 120px; resize: vertical; line-height: var(--lh-body); }
.c-field .c-field__hint { font-size: var(--fs-caption); color: var(--color-text-muted); }
.c-field .c-field__error { font-size: var(--fs-caption); color: var(--iji-error); }
.c-field[data-invalid="true"] input,
.c-field[data-invalid="true"] select,
.c-field[data-invalid="true"] textarea { border-color: var(--iji-error); }
.c-field__counter { font-size: var(--fs-caption); color: var(--color-text-muted); text-align: end; }
.c-field__counter.is-near { color: var(--iji-error); }
.c-consent { display: flex; gap: 12px; align-items: flex-start; margin-block-end: 16px; font-size: var(--fs-small); }
.c-consent input { min-height: 0; width: 20px; height: 20px; margin-block-start: 2px; flex: 0 0 auto; }
.c-form .c-btn { width: 100%; margin-block-start: 8px; }
.c-form__note { margin-block-start: 12px; font-size: var(--fs-caption); color: var(--color-text-muted); text-align: center; }
.c-form__honey { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.c-alert { padding: 16px var(--card-pad); font-size: var(--fs-small); border: 1px solid transparent; margin-block-end: 16px; }
.c-alert--error { background: var(--iji-error-surface); border-color: var(--iji-error); color: var(--iji-error); }
.c-alert--success { background: var(--iji-success-surface); border-color: var(--iji-success); color: var(--iji-success); }
.c-form-success { background: var(--color-surface); border: 1px solid var(--iji-success); padding: var(--card-pad); }
.c-form-success h3 { font-size: var(--fs-h3); margin-block-end: 12px; }

/* 2.16 Waitlist */
.c-waitlist { background: var(--color-surface-warm); }
.c-waitlist__inner { max-width: 720px; margin-inline: auto; }
.c-waitlist h2 { font-size: var(--fs-h2); margin-block-end: 8px; }
.c-waitlist__benefits { font-size: var(--fs-small); color: var(--iji-muted-700); margin-block-end: 40px; }

/* ---------------- B2B / inner pages ---------------- */
.c-b2b-hero { background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.c-b2b-hero__split { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; padding-block: var(--section-y); }
.c-b2b-hero h1 { font-size: var(--fs-h1); max-width: var(--measure-display); margin-block-end: 20px; }
.c-b2b-hero .c-lead { max-width: 56ch; margin-block-end: 28px; }
.c-b2b-hero__media img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; display: block; }
.c-b2b-hero .c-hero__note { margin-block-start: 12px; font-size: var(--fs-small); color: var(--color-text-muted); }
.c-section-note { margin-block-start: 24px; font-size: var(--fs-small); color: var(--color-text-muted); max-width: 78ch; }
.c-proof__src { margin-block-start: 24px; font-size: var(--fs-caption); opacity: .8; }
.c-benefits__list { margin-block-start: 16px; padding-inline-start: 20px; display: grid; gap: 10px; max-width: 72ch; }

.c-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gutter); }
.c-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.c-card {
  display: flex; flex-direction: column; gap: 12px; padding: var(--card-pad);
  background: var(--color-surface); border: 1px solid var(--color-border);
}
.c-card h3 { font-size: var(--fs-h3); }
.c-card p { font-size: var(--fs-small); color: var(--color-text-muted); max-width: 52ch; }
.c-card .c-link-more { margin-block-start: auto; align-self: flex-start; }

/* 2.x Process steps */
.c-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gutter); }
.c-steps--3 { grid-template-columns: repeat(3, 1fr); }
.c-step { border-top: 1px solid var(--color-border-strong); padding-block-start: 20px; }
.c-step__num { display: block; margin-block-end: 12px; font-family: var(--font-heading); font-size: var(--fs-h3); color: var(--iji-forest-relic); }
.c-step h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h4); margin-block-end: 8px; }
.c-step p { font-size: var(--fs-small); color: var(--color-text-muted); }

.c-phase { position: relative; border-top: 1px solid var(--color-border-strong); padding-block-start: 20px; }
.c-phase::before { content: ""; position: absolute; top: -4px; inset-inline-start: 0; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--iji-forest-relic); }
.c-phase__label { display: block; margin-block-end: 8px; font-size: var(--fs-caption); font-weight: 500; letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--iji-forest-relic); }

/* 2.10 Named BD contact */
.c-bd-contact {
  display: flex; gap: var(--grid-gutter); align-items: center; max-width: 560px;
  padding: var(--card-pad); background: var(--color-surface); border: 1px solid var(--color-border);
}
.c-bd-contact__photo { width: 96px; min-width: 96px; aspect-ratio: 1/1; object-fit: cover; }
.c-bd-contact__name { display: block; font-family: var(--font-heading); font-size: var(--fs-h3); }
.c-bd-contact__role { display: block; margin-block-end: 8px; font-size: var(--fs-small); color: var(--color-text-muted); }
.c-bd-contact__channel { font-size: var(--fs-small); font-weight: 600; color: var(--iji-forest-relic); }

/* Travel-trade tiles */
.c-trade-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gutter); }
.c-trade-tile { padding: var(--card-pad); background: var(--color-surface); border: 1px solid var(--color-border); }
.c-trade-tile__label { display: block; margin-block-end: 10px; font-size: var(--fs-caption); font-weight: 500; letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-text-muted); }
.c-trade-tile p { font-size: var(--fs-small); font-weight: 500; }
.c-trade-tile--wide { grid-column: span 2; }
.c-trade-tile--wide table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.c-trade-tile--wide td { padding-block: 8px; border-top: 1px solid var(--color-border); }
.c-trade-tile--wide tr:first-child td { border-top: 0; }
.c-trade-tile--wide td:last-child { text-align: end; font-weight: 500; }

/* Media kit */
.c-media-kit ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 32px; max-width: 720px; }
.c-media-kit li { display: flex; justify-content: space-between; gap: 16px; padding-block: 12px; font-size: var(--fs-small); border-bottom: 1px solid var(--color-border); }
.c-media-kit li span { font-size: var(--fs-caption); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--tracking-caption); }

/* CTA strip */
.c-cta-strip { background: var(--color-surface-warm); }
.c-cta-strip__inner { max-width: 720px; margin-inline: auto; text-align: center; }
.c-cta-strip h2 { font-size: var(--fs-h2); margin-block-end: 28px; }
.c-cta-strip__row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Team */
.c-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); }
.c-team-card__name { display: block; margin-block-start: 16px; font-family: var(--font-heading); font-size: var(--fs-h4); }
.c-team-card__role { font-size: var(--fs-small); color: var(--color-text-muted); }

/* Fee / FAQ callout */
.c-callout { margin-block-start: 32px; padding: 20px var(--card-pad); background: var(--color-surface); border: 1px solid var(--color-border); }
.c-callout b { display: block; margin-block-end: 6px; font-weight: 600; }
.c-callout p { margin: 0; font-size: var(--fs-small); color: var(--color-text-muted); }

/* ---------------- 2.15 Footer ---------------- */
.c-footer { background: var(--color-surface-dark); color: var(--color-text-on-dark); }
.c-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-block: 72px; }
.c-footer__logo img { display: block; height: 84px; width: auto; margin-block-end: 16px; }
.c-footer h4 { margin-block-end: 16px; font-size: var(--fs-caption); font-weight: 500; letter-spacing: var(--tracking-caption); text-transform: uppercase; opacity: .65; color: var(--color-text-on-dark); }
.c-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.c-footer a { font-size: var(--fs-small); opacity: .88; border-bottom: 1px solid transparent; }
.c-footer a:hover { border-bottom-color: var(--color-text-on-dark); }
.c-footer__note { font-size: var(--fs-small); opacity: .7; max-width: 36ch; }
.c-footer__bottom {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-block: 24px; border-top: 1px solid rgba(237,236,233,0.2);
  font-size: var(--fs-caption); opacity: .65;
}

/* ---------------- Media placeholders (used only when an image is absent) ---------------- */
.c-ph {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 16px; text-align: center;
  font-family: var(--font-heading); font-size: var(--fs-small);
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--iji-sandy-pearl); color: var(--iji-stone-ash);
}

/* ---------------- Container queries (§6.7) ---------------- */
@container (max-width: 420px) {
  .c-property-card h3, .c-unit-card h3 { font-size: var(--fs-h4); }
  .c-neighbour__split { grid-template-columns: 1fr; }
}

/* ---------------- Mobile ---------------- */
@media (max-width: 767px) {
  .c-header__inner { min-height: 64px; }
  .c-header__logo img { height: 56px; }
  .c-nav, .c-lang-switch--desktop { display: none; }
  .c-burger { display: flex; }
  .c-hero { min-height: 72vh; }
  .c-hero__ctas { flex-direction: column; }
  .c-hero__ctas .c-btn { width: 100%; }
  .c-hero--property, .c-hero--soon { min-height: 64vh; }
  .c-hero--property .c-btn, .c-hero--soon .c-btn { width: 100%; }
  .c-link-strip__inner { flex-direction: column; gap: 12px; text-align: center; }
  .c-property-grid, .c-unit-grid, .c-b2b__cards, .c-direct__perks, .c-neighbour__split,
  .c-form__row, .c-benefits__grid, .c-stat-band, .c-b2b-hero__split, .c-card-grid,
  .c-card-grid--3, .c-steps, .c-steps--3, .c-trade-tiles, .c-team-grid,
  .c-operator-proof__grid, .c-quote-band__grid, .c-media-kit ul, .c-gallery { grid-template-columns: 1fr; }
  .c-stat-band > div { border-inline-start: 0; padding-inline-start: 0; }
  .c-trade-tile--wide { grid-column: auto; }
  .c-benefits__item { border-inline-start: 0; border-top: 1px solid var(--color-border); padding-block: 24px; }
  .c-benefits__item:first-child { border-top: 0; }
  .c-bd-contact { flex-direction: column; align-items: flex-start; }
  .c-cta-strip__row { flex-direction: column; }
  .c-cta-strip__row .c-btn { width: 100%; }
  .c-footer__grid { grid-template-columns: 1fr; gap: 32px; padding-block: 48px; }
  .c-quote-band__grid { gap: 40px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .c-unit-grid, .c-steps, .c-trade-tiles, .c-team-grid, .c-card-grid--3, .c-quote-band__grid { grid-template-columns: repeat(2, 1fr); }
  .c-benefits__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Content tables: six-column inventory tables cannot fit a phone, so the table
   scrolls inside its own figure instead of pushing the page sideways. */
.wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wp-block-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.wp-block-table th, .wp-block-table td { padding: 10px 14px; border-bottom: 1px solid var(--color-border); text-align: start; vertical-align: top; }
.wp-block-table thead th { font-weight: 600; border-bottom-color: var(--color-border-strong); }
@media (max-width: 767px) {
  .wp-block-table table { min-width: 560px; }
}

/* ---------------- Location (property pages) ---------------- */
.c-location__split { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; }
.c-location__text h2 { font-size: var(--fs-h2); margin-block-end: 16px; }
.c-location__text .c-lead { max-width: 46ch; margin-block-end: 28px; }

.c-distances { margin: 0 0 28px; display: grid; gap: 0; }
.c-distances__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-block: 12px; border-bottom: 1px solid var(--color-border);
}
.c-distances__row:first-child { border-top: 1px solid var(--color-border); }
.c-distances dt { font-size: var(--fs-small); }
.c-distances dd { margin: 0; font-weight: 600; white-space: nowrap; }

.c-location__address { font-size: var(--fs-small); color: var(--color-text-muted); margin-block-end: 24px; }
.c-location__pluscode { display: block; margin-block-start: 4px; }

/* The frame carries its own chrome, so it gets no border of ours — it should
   read as a window onto the map, not as another card on the page. */
.c-location__map { position: relative; }
.c-location__map iframe {
  display: block; width: 100%; aspect-ratio: 4 / 3; border: 0;
  background: var(--color-bg-alt);
}
.c-location__credit {
  margin: 8px 0 0; font-size: var(--fs-caption); color: var(--color-text-muted);
}
.c-location__credit a { border-bottom: 1px solid currentColor; }

@media (max-width: 1023px) {
  .c-location__split { grid-template-columns: 1fr; gap: 32px; }
  .c-location__map iframe { aspect-ratio: 16 / 10; }
}

.c-unit-body { margin-block-start: 24px; }
.c-unit-body p + p { margin-block-start: 16px; }

/* ---------------- Cookie bar ---------------- */
.c-cookiebar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
  background: var(--color-surface-dark); color: var(--color-text-on-dark);
  box-shadow: var(--shadow-overlay);
}
.c-cookiebar[hidden] { display: none; }
.c-cookiebar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  padding-block: 20px;
}
.c-cookiebar__text { margin: 0; max-width: 76ch; font-size: var(--fs-small); }
.c-cookiebar__text a { border-bottom: 1px solid currentColor; }
.c-cookiebar__actions { display: flex; gap: 12px; flex-shrink: 0; }
.c-cookiebar .c-btn--secondary { color: var(--color-text-on-dark); border-color: var(--color-text-on-dark); }
.c-cookiebar .c-btn--secondary:hover { background: rgba(237,236,233,0.14); color: var(--color-text-on-dark); }
@media (max-width: 767px) {
  .c-cookiebar__inner { flex-direction: column; align-items: stretch; gap: 16px; }
  .c-cookiebar__actions .c-btn { flex: 1; }
}
.c-footer__legal { display: inline-flex; gap: 20px; flex-wrap: wrap; }
.c-footer__legal a { border-bottom: 1px solid transparent; }
.c-footer__legal a:hover { border-bottom-color: currentColor; }

/* ---------------- Form dialog ---------------- */
.c-form-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: min(88vh, 900px);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-bg);
  color: var(--color-text);
  overflow: auto;
}
.c-form-dialog::backdrop { background: rgba(63,58,54,0.55); }
.c-form-dialog[open] { animation: iji-dialog-in var(--dur-ui) var(--ease-out); }
@keyframes iji-dialog-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .c-form-dialog[open] { animation: none; } }

.c-form-dialog__dismiss { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; margin: 0; }
.c-form-dialog__close {
  width: 44px; height: 44px; margin: 8px 8px 0 0;
  font-size: 24px; line-height: 1; color: var(--color-text-muted);
  background: var(--color-bg); border: 0; border-radius: var(--radius-xs); cursor: pointer;
}
.c-form-dialog__close:hover { color: var(--color-text); background: var(--color-bg-alt); }

/* Inside a dialog the section supplies padding, not full-page rhythm. */
.u-section--in-dialog { padding-block: 0 32px; }
.u-section--in-dialog .u-wrap { padding-inline: 32px; max-width: none; }

/* Cards that open the dialogs */
.c-direction-card { display: flex; flex-direction: column; gap: 12px; padding: var(--card-pad);
  background: var(--color-surface); border: 1px solid var(--color-border); }
.c-direction-card h3 { font-size: var(--fs-h3); }
.c-direction-card p { font-size: var(--fs-small); color: var(--color-text-muted); }
.c-direction-card .c-btn { margin-block-start: auto; align-self: flex-start; }
@media (max-width: 767px) { .u-section--in-dialog .u-wrap { padding-inline: 20px; } }

/* ── Contact page ────────────────────────────────────────────────────────────
   The page was three near-identical off-whites stacked 2681px tall, so nothing
   separated the three audiences from the rest. The olive band carries the
   rhythm; Autumn Flame stays the single accent, per the logobook rule that two
   secondary colours never share a layout. */
/* The band must reach both edges the way .c-b2b does on the home page; the
   post content is capped at 1280, so it breaks out of its own container.
   overflow-x: clip on the root absorbs the scrollbar-width overflow that the
   vw maths creates, and unlike hidden it does not break position: sticky. */
/* .u-section--brand itself (background, on-dark heading colours) already lives
   in base.css; only the breakout and the card treatment are page-specific.
   WordPress's own .has-global-padding > .alignfull rule zeroes the margin at a
   higher specificity than a single class, so the breakout has to outweigh it. */
.entry-content > .alignfull.u-section--brand {
  margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); }
.u-section--brand > .u-wrap > .c-eyebrow { color: rgba(237,236,233,0.70); }
.u-section--brand > .u-wrap > p { color: rgba(237,236,233,0.82); }

/* Cards read as light plates on the band; a border would add a second
   secondary colour for no gain. */
.u-section--brand .c-direction-card { background: var(--iji-soft-veil); border: 0; }
.u-section--brand .c-direction-card h3 { color: var(--color-text); }

/* Direct contact strip: a page called Contact should not hide every address
   behind a modal. */
.c-contact-strip { display: flex; flex-wrap: wrap; gap: 24px 72px;
  margin-block-start: 32px; }
.c-contact-strip__item { display: flex; flex-direction: column; gap: 6px; }
.c-contact-strip__label { font-size: var(--fs-small); color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.08em; }
.c-contact-strip__value { font-size: var(--fs-h3); line-height: 1.3; }

/* Hero was 596px of mostly air, pushing the real choices below the fold. */
/* The olive band below now does the separating; the rule underneath the hero
   only reads as a stray 1280px line against a full-bleed section. */
.c-b2b-hero--tight { border-bottom: 0; }
.c-b2b-hero--tight .c-b2b-hero__split { padding-block: calc(var(--section-y) * 0.62); }
.c-b2b-hero--tight .c-b2b-hero__media img { max-height: 340px; }

@media (max-width: 1023px) {
  .c-contact-strip { gap: 24px; }
}


/* ── c-portfolio — compact properties block ──────────────────────────────────
   Replaces the spec-sheet listing on the travel-trade page: names and status
   only, no counts, no descriptions. Status is carried by text first, then by
   ground and rule, so it never depends on colour alone (WCAG 1.4.1). */
.u-section--tight { --section-y: 80px; }

.c-portfolio { --portfolio-pad-i: 20px; --portfolio-pad-b: 16px;
  --portfolio-rule: 2px; --portfolio-gap: var(--grid-gutter, 24px);
  color: var(--iji-stone-ash); font-family: var(--font-body); }

.c-portfolio__head { max-inline-size: 62ch; margin-block-end: 28px; }
.c-portfolio__lede { font-size: var(--fs-small); line-height: 1.5; margin-block: 8px 0; }

/* Mobile first: hairline rows. A white box at full bleed reads as a carousel. */
.c-portfolio__list { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: 1fr; gap: 0; border-block-start: 1px solid var(--color-border); }
.c-portfolio__item { display: flex; flex-direction: column;
  padding-block: var(--portfolio-pad-b); border-block-end: 1px solid var(--color-border);
  background-color: transparent; }

.c-portfolio__status { font-size: var(--fs-caption); line-height: 1; font-weight: 500;
  text-transform: uppercase; letter-spacing: .09em; margin-block-end: 8px; }
.c-portfolio__item--live .c-portfolio__status { color: var(--iji-forest-relic); }
.c-portfolio__item--soon .c-portfolio__status { color: var(--iji-stone-ash); }

.c-portfolio__name { font-family: var(--font-heading); font-size: var(--fs-body);
  font-weight: 400; line-height: 1.25; margin: 0; text-wrap: balance; }
.c-portfolio__type { font-size: var(--fs-small); line-height: 1.4; margin-block: 6px 0; opacity: .78; }
.c-portfolio__note { font-size: var(--fs-caption); line-height: 1.5; opacity: .78;
  margin-block: 20px 0; max-inline-size: 68ch; }

@media (min-width: 560px) {
  .c-portfolio__list { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: var(--portfolio-gap); }
}

@media (min-width: 1024px) {
  .c-portfolio { --portfolio-pad-i: 24px; --portfolio-pad-b: 24px; }
  .c-portfolio__head { margin-block-end: 40px; }
  .c-portfolio__list { grid-template-columns: repeat(4, minmax(0,1fr));
    gap: var(--portfolio-gap); align-items: stretch; border-block-start: 0; }
  .c-portfolio__item { block-size: 100%;
    padding: var(--portfolio-pad-b) var(--portfolio-pad-i);
    border: 1px solid var(--color-border);
    border-block-start-width: var(--portfolio-rule); }
  .c-portfolio__item--live { background-color: var(--color-surface);
    border-block-start-color: var(--iji-forest-relic); }
  .c-portfolio__item--soon { background-color: transparent;
    border-block-start-color: var(--color-border); }
  .c-portfolio__type { margin-block-start: auto; padding-block-start: 12px; }
}