@charset "UTF-8";
/* ==========================================================================
   PEN & INC · ONE-NORTH FUNCTION HALL
   Structure follows the Mishika Retreat system: one continuous hairline
   spine running the full height of the page, with real measured figures
   hung off it at every section. Palette and typefaces are PEN & INC.

   Readability rules applied throughout:
     · body copy never exceeds 33em (55–70 characters)
     · display type is Thin only, so it can carry size without shouting
     · every section states its facts as figures, not sentences
     · type never sits over a photograph
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* PEN & INC palette */
  --ink:          #2c3f4e;
  --ink-2:        #4a5b68;
  --stone:        #586a77;   /* body copy — 7.0:1 on paper */
  --slate:        #4F758B;
  --slate-deep:   #263845;
  --gold:         #b0841c;
  --goldink:      #7a5c12;   /* gold that must carry type — AA */
  --night:        #263845;
  --paper2:       #EFE4CB;
  --amber:        #FED141;
  --ivory:        #F4ECD8;
  --paper:        #FDFBF4;

  --hair:          rgba(44, 63, 78, 0.20);
  --hair-strong:   rgba(44, 63, 78, 0.38);
  --hair-gold:     rgba(176, 132, 28, 0.48);
  --hair-reverse:  rgba(252, 250, 246, 0.24);
  --hair-gold-rev: rgba(254, 209, 65, 0.42);

  /* Typefaces */
  --font-display: "GT Ultra Fine", "Canela Web", Georgia, serif;
  --font-body:    "Canela Web", Georgia, "Times New Roman", serif;
  --font-ui:      system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --t-hero:     clamp(2.6rem, 5.4vw, 5.75rem);
  --t-mega:     clamp(2.15rem, 4.4vw, 4rem);
  --t-display:  clamp(1.9rem, 3.4vw, 3.05rem);
  --t-title:    clamp(1.4rem, 2.1vw, 1.9rem);
  --t-sub:      clamp(1.125rem, 1.5vw, 1.4rem);
  --t-body:     clamp(1.0625rem, 0.4vw + 0.96rem, 1.1875rem);
  --t-ui:       0.875rem;
  --t-label:    0.6875rem;
  --t-fig:      clamp(1.5rem, 2.1vw, 2rem);

  --measure: 33em;

  --band-y:  clamp(4.25rem, 8vw, 8.5rem);
  --gutter:  clamp(1.25rem, 4.5vw, 4rem);
  --max:     80rem;
  --rail:    clamp(7rem, 11vw, 10.5rem);
  --gap:     clamp(1.5rem, 3.2vw, 3.5rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--stone);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.64;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  padding-top: 5.25rem;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 100;
  color: var(--ink);
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

::selection { background: var(--amber); color: var(--ink); }
:focus-visible { outline: 2px solid var(--slate); outline-offset: 3px; }
.band--ink :focus-visible, .band--slate :focus-visible, .foot :focus-visible { outline-color: var(--amber); }

.u-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link {
  position: absolute; left: var(--gutter); top: -100%; z-index: 200;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-ui); font-size: var(--t-ui);
  padding: 0.7rem 1.1rem; text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0.75rem; }

/* --------------------------------------------------------------------------
   3. THE SPINE
   Every band is a three-column grid: figures, hairline, body. Because the
   gutter and maximum width never change, the hairline reads as one
   continuous gold rule running the whole height of the page.
   -------------------------------------------------------------------------- */

.band { padding-inline: var(--gutter); padding-block: var(--band-y); position: relative; }
.band--tight { padding-block: clamp(2.75rem, 5vw, 4.5rem); }

.band__inner {
  max-width: var(--max); margin-inline: auto;
  display: grid;
  grid-template-columns: var(--rail) 1px minmax(0, 1fr);
  column-gap: var(--gap);
  align-items: start;
}
.band__rule { background: var(--hair-gold); align-self: stretch; min-height: 100%; }
.band__body { min-width: 0; }

/* The spine must cross the vertical padding too, or it breaks at each seam. */
.band::before, .band::after {
  content: ""; position: absolute; left: 50%; width: 1px;
  background: var(--hair-gold); pointer-events: none;
  transform: translateX(calc(-1 * (var(--max) / 2) + var(--rail) + var(--gap) / 2));
}
.band::before { top: 0; height: var(--band-y); }
.band::after  { bottom: 0; height: var(--band-y); }
.band--tight::before, .band--tight::after { height: clamp(2.75rem, 5vw, 4.5rem); }

@media (max-width: 61.99rem) {
  .band__inner { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
  .band__rule { display: none; }
  .band::before, .band::after { display: none; }
}

/* Grounds */
.band--ivory { background: var(--ivory); }
.band--slate { background: var(--slate-deep); }
.band--ink   { background: var(--ink); }

.band--slate, .band--ink { color: rgba(252, 250, 246, 0.84); }
.band--slate h1, .band--slate h2, .band--slate h3,
.band--ink h1, .band--ink h2, .band--ink h3 { color: var(--paper); }
.band--slate .band__rule, .band--ink .band__rule,
.band--slate::before, .band--slate::after,
.band--ink::before, .band--ink::after { background: var(--hair-gold-rev); }

/* --------------------------------------------------------------------------
   4. FIGURES — what hangs off the spine
   -------------------------------------------------------------------------- */

.figs { display: grid; gap: 1.5rem; }
@media (min-width: 62rem) { .figs { position: sticky; top: 7.25rem; } }
@media (max-width: 61.99rem) {
  .figs {
    display: flex; flex-wrap: wrap; gap: 1.25rem 2.25rem;
    border-top: 1px solid var(--hair-gold); padding-top: 1.2rem;
  }
  .figs .eyebrow { flex: 1 0 100%; }
  .band--slate .figs, .band--ink .figs { border-top-color: var(--hair-gold-rev); }
}

.fig__n {
  display: block; font-family: var(--font-display); font-weight: 100;
  font-size: var(--t-fig); line-height: 1; color: var(--ink);
  letter-spacing: -0.02em; white-space: nowrap;
}
.fig__n i { font-style: normal; font-size: 0.5em; letter-spacing: 0.02em; }
.fig__l {
  display: block; margin-top: 0.45rem; font-family: var(--font-ui);
  font-size: var(--t-label); letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--stone); line-height: 1.5;
}
.band--slate .fig__n, .band--ink .fig__n { color: var(--paper); }
.band--slate .fig__l, .band--ink .fig__l { color: rgba(252, 250, 246, 0.64); }

.eyebrow {
  font-family: var(--font-ui); font-size: var(--t-label);
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--stone); margin: 0 0 1.5rem;
}
.band--slate .eyebrow, .band--ink .eyebrow { color: rgba(252, 250, 246, 0.64); }
.figs .eyebrow { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   5. TYPE SETTING
   -------------------------------------------------------------------------- */

.statement {
  font-family: var(--font-display); font-weight: 100;
  font-size: var(--t-display); line-height: 1.08; letter-spacing: -0.018em;
  color: var(--ink); max-width: 20ch; margin: 0; text-wrap: balance;
}
.statement--hero { font-size: var(--t-hero); line-height: 0.99; max-width: 13ch; letter-spacing: -0.028em; }
.statement--mega { font-size: var(--t-mega); line-height: 1.01; max-width: 16ch; letter-spacing: -0.024em; }
.statement--wide { max-width: 27ch; }
.statement--reverse { color: var(--paper); }

.lede { font-size: var(--t-sub); line-height: 1.52; max-width: 32em; color: var(--stone); }
.band--slate .lede, .band--ink .lede { color: rgba(252, 250, 246, 0.8); }

.prose { max-width: var(--measure); }
.prose h3 { font-size: var(--t-title); margin: 2.3em 0 0.7em; }
.prose h3:first-child { margin-top: 0; }
.prose a { color: var(--slate); text-underline-offset: 0.22em; }
.band--slate .prose a, .band--ink .prose a { color: var(--paper); }

.pull {
  font-family: var(--font-display); font-weight: 100;
  font-size: var(--t-title); line-height: 1.34; color: var(--ink);
  max-width: 26ch; margin: 2.25rem 0 0; padding-top: 1.6rem;
  border-top: 1px solid var(--hair-gold);
}
.band--slate .pull, .band--ink .pull { color: var(--paper); border-top-color: var(--hair-gold-rev); }

/* --------------------------------------------------------------------------
   6. MASTHEAD
   -------------------------------------------------------------------------- */

.masthead {
  position: fixed; inset: 0 0 auto; z-index: 100;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.85rem var(--gutter);
  background: var(--paper); border-bottom: 1px solid var(--hair);
  transition: padding 0.35s var(--ease);
}
.masthead.is-stuck { padding-block: 0.55rem; }
.brand { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; }
.brand img { width: 54px; height: auto; transition: width 0.35s var(--ease); }
.masthead.is-stuck .brand img { width: 44px; }
.brand__loc {
  font-family: var(--font-ui); font-size: var(--t-label); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--stone); line-height: 1.4;
  border-left: 1px solid var(--hair-gold); padding-left: 0.9rem;
}
@media (max-width: 34rem) { .brand__loc { display: none; } }

.nav {
  margin-left: auto; display: flex; align-items: center;
  gap: clamp(0.9rem, 1.6vw, 1.75rem);
  font-family: var(--font-ui); font-size: var(--t-ui);
}
.nav a {
  text-decoration: none; color: var(--ink); padding-block: 0.3rem;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8125rem;
  border-bottom: 1px solid transparent; transition: border-color 0.25s var(--ease);
}
.nav a:hover { border-bottom-color: var(--hair-gold); }
.nav__enquire {
  background: var(--ink); color: var(--paper) !important;
  border: 1px solid var(--ink) !important;
  padding: 0.55rem 1.2rem !important; letter-spacing: 0.12em;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.nav__enquire:hover { background: transparent; color: var(--ink) !important; }

.nav-toggle {
  display: none; margin-left: auto; background: none; border: 0; color: var(--ink);
  font-family: var(--font-ui); font-size: 0.75rem; letter-spacing: 0.18em;
  text-transform: uppercase; cursor: pointer; align-items: center; gap: 0.6rem;
  padding: 0.75rem 0.25rem; min-height: 44px;
}
.nav-toggle__bars { display: inline-flex; flex-direction: column; gap: 4px; width: 22px; }
.nav-toggle__bars span { height: 1.5px; background: currentColor; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.masthead.is-open .nav-toggle__bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.masthead.is-open .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.masthead.is-open .nav-toggle__bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 74.99rem) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 4.5rem 0 auto; margin-left: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--hair);
    padding: 0.5rem var(--gutter) 1.75rem; font-size: 1.0625rem; display: none;
    max-height: calc(100vh - 4.5rem); overflow-y: auto;
    box-shadow: 0 20px 40px rgba(37, 40, 42, 0.1);
  }
  .nav.is-open { display: flex; }
  .nav a { padding-block: 0.95rem; border-bottom: 1px solid var(--hair);
           font-size: 1rem; letter-spacing: 0.14em; }
  .nav__enquire { margin-top: 1.25rem; text-align: center; }
}

/* --------------------------------------------------------------------------
   7. HERO — split, never overlaid
   -------------------------------------------------------------------------- */

.hero { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--hair); }
.hero__type {
  padding: clamp(2.75rem, 5.5vw, 5.5rem) var(--gutter) clamp(2.75rem, 4.5vw, 4.5rem);
  display: flex; flex-direction: column; justify-content: center;
}
.hero__inner { max-width: 40rem; margin-left: auto; width: 100%; }
.hero__view { position: relative; min-height: 62vw; background: var(--ivory); overflow: hidden; }
.hero__view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* The split engages at 68rem, not 62rem. At 62rem a portrait tablet (1024 ×
   1366) still takes the two-column layout and the photo column becomes a
   0.375 sliver — far outside anything a single hero video can cover. Above
   68rem the box stays between 0.82 and 0.91; below it, 1.61. Two cases, not
   three. */
@media (min-width: 68rem) {
  .hero { grid-template-columns: minmax(0, 53fr) minmax(0, 47fr); min-height: calc(100vh - 5.25rem); }
  .hero__view { min-height: 0; }
  .hero__inner { padding-right: clamp(2rem, 4vw, 4rem); }
}

.hero .figs {
  position: static; display: flex; flex-wrap: wrap;
  gap: 1.35rem clamp(1.5rem, 2.8vw, 2.75rem);
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.4rem;
  border-top: 1px solid var(--hair-gold);
}
.hero__inner .statement { max-width: 100%; overflow-wrap: break-word; }

/* --------------------------------------------------------------------------
   8. PARALLAX BANNER — full-bleed, type on a scrim
   -------------------------------------------------------------------------- */

.pbanner {
  position: relative; display: grid; place-items: center;
  padding: clamp(4rem, 10vw, 9rem) var(--gutter);
  background-size: cover; background-position: center;
  background-repeat: no-repeat; background-attachment: fixed;
  background-color: var(--ink);
}
@media (hover: none), (max-width: 61.99rem) { .pbanner { background-attachment: scroll; } }
.pbanner--tall { min-height: 62vh; }
.pbanner__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(37,40,42,0.30) 0%, rgba(37,40,42,0.66) 100%);
}
.pbanner__body { position: relative; max-width: var(--max); width: 100%; margin-inline: auto; }
.pbanner__coords {
  font-family: var(--font-ui); font-size: var(--t-label); letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(252,250,246,0.72); margin: 1.6rem 0 0;
}

/* --------------------------------------------------------------------------
   9. COMPONENTS
   -------------------------------------------------------------------------- */

.action {
  display: inline-block; font-family: var(--font-ui); font-size: var(--t-ui);
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  padding: 0.95rem 1.9rem; background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.action:hover { background: transparent; color: var(--ink); transform: translateY(-1px); }
.action--ghost { background: transparent; color: var(--ink); border-color: var(--hair-strong); }
.action--ghost:hover { background: var(--ink); color: var(--paper); }
.action--reverse { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.action--reverse:hover { background: transparent; color: var(--paper); }
.actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.quiet-link {
  font-family: var(--font-ui); font-size: var(--t-ui); letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--hair-gold); padding-bottom: 0.2rem;
  transition: border-color 0.25s var(--ease);
}
.quiet-link:hover { border-bottom-color: var(--ink); }
.band--slate .quiet-link, .band--ink .quiet-link { color: var(--paper); border-bottom-color: var(--hair-gold-rev); }
.links-row { display: flex; flex-wrap: wrap; gap: 1.4rem; }

.grid { display: grid; gap: clamp(1.5rem, 2.6vw, 2.5rem); }
@media (min-width: 46rem) { .grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 46rem) { .grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* Spaces — a stacked list, each with its own photograph */
.space { border-bottom: 1px solid var(--hair); padding-block: clamp(2rem, 3.4vw, 3rem); }
.space:first-of-type { padding-top: 0; }
.space:last-of-type { border-bottom: 0; padding-bottom: 0; }
.space__grid { display: grid; gap: clamp(1.25rem, 2.6vw, 2.25rem); align-items: center; }
@media (min-width: 46rem) { .space__grid { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); } }
.space__img { margin: 0; overflow: hidden; background: var(--ivory); aspect-ratio: 4 / 3; }
.space__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.space:hover .space__img img { transform: scale(1.035); }
.space__name { font-size: var(--t-mega); letter-spacing: -0.026em; line-height: 0.96; }
.space__line { font-size: var(--t-sub); font-style: italic; color: var(--ink-2); margin-top: 0.7rem; max-width: 30ch; }
.space__figs { display: flex; flex-wrap: wrap; gap: 1.1rem 2.25rem; margin-top: 1.5rem;
               padding-top: 1.1rem; border-top: 1px solid var(--hair-gold); }

/* Facts list */
.facts { border-top: 1px solid var(--hair); margin: 0; font-family: var(--font-ui); font-size: var(--t-ui); }
.facts > div {
  display: grid; grid-template-columns: minmax(8.5rem, 15rem) minmax(0,1fr);
  gap: 0.4rem 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--hair);
}
@media (max-width: 34rem) { .facts > div { grid-template-columns: minmax(0,1fr); } }
.facts dt { letter-spacing: 0.12em; text-transform: uppercase; font-size: var(--t-label); padding-top: 0.2rem; }
.facts dd { margin: 0; color: var(--ink); line-height: 1.6; }
.band--slate .facts, .band--ink .facts { border-top-color: var(--hair-reverse); }
.band--slate .facts > div, .band--ink .facts > div { border-bottom-color: var(--hair-reverse); }
.band--slate .facts dd, .band--ink .facts dd { color: var(--paper); }

/* Capacity table */
.cap { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: var(--t-ui); }
.cap th, .cap td { text-align: left; padding: 0.95rem 0.75rem 0.95rem 0; border-bottom: 1px solid var(--hair); }
.cap thead th {
  font-size: var(--t-label); letter-spacing: 0.15em; text-transform: uppercase;
  font-weight: 400; color: var(--stone); border-bottom-color: var(--hair-gold);
}
.cap tbody th { font-weight: 400; color: var(--ink); font-size: 1rem; }
.cap td { color: var(--ink); font-variant-numeric: tabular-nums; }
.cap tbody tr:last-child th, .cap tbody tr:last-child td { border-bottom: 0; }
.cap .muted { color: var(--stone); }
@media (max-width: 46rem) {
  .cap thead { display: none; }
  .cap tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
                  gap: 0.35rem 1rem; padding-block: 1.1rem; border-bottom: 1px solid var(--hair); }
  .cap tbody th { grid-column: 1 / -1; font-size: var(--t-title); font-family: var(--font-display); }
  .cap td { border: 0; padding: 0; }
  .cap td::before { content: attr(data-l) " — "; color: var(--stone); font-size: var(--t-label);
                    letter-spacing: 0.12em; text-transform: uppercase; }
}

/* Formats — image tiles */
.fmt { margin: 0; }
.fmt__img { margin: 0 0 0.9rem; overflow: hidden; background: var(--ivory); aspect-ratio: 4 / 3; }
.fmt__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.fmt:hover .fmt__img img { transform: scale(1.04); }
.fmt__name { font-family: var(--font-display); font-weight: 100; font-size: var(--t-title);
             color: var(--ink); line-height: 1.1; }
.fmt__n { display: block; margin-top: 0.4rem; font-family: var(--font-ui); font-size: var(--t-label);
          letter-spacing: 0.15em; text-transform: uppercase; color: var(--stone); }

/* Gallery */
/* A wide tile spans two columns at 8:3; a single tile is 4:3. Both resolve to
   the same height — 0.75 × column width — so every row lines up and the grid
   never leaves a hole. */
.gal { display: grid; gap: clamp(0.75rem, 1.4vw, 1.1rem); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 56rem) { .gal { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.gal figure { margin: 0; overflow: hidden; background: var(--ivory); position: relative; aspect-ratio: 4 / 3; }
.gal figure.t2 { aspect-ratio: 8 / 3; }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.gal figure:hover img { transform: scale(1.045); }
.gal figcaption {
  position: absolute; inset: auto 0 0 0; padding: 0.7rem 0.85rem;
  font-family: var(--font-ui); font-size: var(--t-label); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--paper);
  background: linear-gradient(180deg, rgba(37,40,42,0) 0%, rgba(37,40,42,0.75) 100%);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.gal figure:hover figcaption, .gal figure:focus-within figcaption { opacity: 1; }
.gal .t2 { grid-column: span 2; }

/* Questions */
.qa { border-top: 1px solid var(--hair-gold); }
.qa__item { padding: 1.6rem 0; border-bottom: 1px solid var(--hair); }
.qa__q { font-size: var(--t-title); margin-bottom: 0.5rem; }
.qa__a { max-width: var(--measure); margin: 0; }

/* Form */
.form { max-width: 42rem; }
.form__row { margin-bottom: 1.4rem; }
.form__two { display: grid; gap: 1.4rem; }
@media (min-width: 40rem) { .form__two { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.form label {
  display: block; font-family: var(--font-ui); font-size: var(--t-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); margin-bottom: 0.55rem;
}
.form input, .form select, .form textarea {
  width: 100%; font-family: var(--font-body); font-size: 1.0625rem; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--hair-strong);
  padding: 0.65rem 0; transition: border-color 0.25s var(--ease);
}
.form textarea { min-height: 7.5rem; resize: vertical; line-height: 1.6; }
.form input:focus, .form select:focus, .form textarea:focus { border-bottom-color: var(--slate); outline: none; }
.form__hint { font-family: var(--font-ui); font-size: var(--t-ui); margin-top: 0.7rem; color: var(--stone); }

/* --------------------------------------------------------------------------
   10. FOOTER
   -------------------------------------------------------------------------- */

.foot { background: var(--ink); color: rgba(252,250,246,0.84); position: relative; }
.foot h1, .foot h2, .foot h3 { color: var(--paper); }
.foot a { color: rgba(252,250,246,0.86); text-decoration: none; }
.foot a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 0.25em; }
.foot .band__rule, .foot .band::before, .foot .band::after { background: var(--hair-gold-rev); }
.foot .band__rule { background: var(--hair-gold-rev); }
.foot .eyebrow { color: rgba(252,250,246,0.64); }
.foot .fig__n { color: var(--paper); }
.foot .fig__l { color: rgba(252,250,246,0.64); }
.foot .band::before, .foot .band::after { background: var(--hair-gold-rev); }

.foot__cols { display: grid; gap: 2.25rem; font-family: var(--font-ui); font-size: var(--t-ui); }
@media (min-width: 46rem) { .foot__cols { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.foot__cols h3 {
  font-family: var(--font-ui); font-size: var(--t-label); letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(252,250,246,0.64); font-weight: 400; margin-bottom: 1rem;
}
.foot__cols ul { list-style: none; margin: 0; padding: 0; }
.foot__cols li { margin-bottom: 0.55rem; line-height: 1.55; }
.foot__addr { font-style: normal; line-height: 1.9; }

.collection { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
              gap: 0.6rem 1.6rem; font-family: var(--font-ui); font-size: var(--t-label);
              letter-spacing: 0.16em; text-transform: uppercase; }
.legal { font-family: var(--font-ui); font-size: var(--t-label); letter-spacing: 0.06em;
         color: rgba(252,250,246,0.55); margin: 0; line-height: 1.8; }
.foot__marque { width: 46px; opacity: 0.95; margin-bottom: 1.25rem; }
.foot__logo { width: 88px; margin-bottom: 1.4rem; }

/* Sticky enquiry bar */
.bookbar {
  position: fixed; inset: auto 0 0 0; z-index: 95;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.8rem var(--gutter); background: var(--ink); color: var(--paper);
  border-top: 1px solid var(--hair-gold-rev);
  transform: translateY(110%); transition: transform 0.4s var(--ease);
}
.bookbar.is-on { transform: translateY(0); }
.bookbar__lead { margin: 0; font-family: var(--font-ui); font-size: var(--t-ui);
                 letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 46rem) { .bookbar__lead { display: none; } .bookbar { justify-content: stretch; } }
.bookbar .actions { flex: 0 0 auto; }
@media (max-width: 46rem) { .bookbar .actions { flex: 1; } .bookbar .action { flex: 1; text-align: center; } }

/* Hero video. The poster paints immediately; the video fades over it once it
   can play, so there is never an empty box or a jump. Under reduced-motion
   the video is dropped and the still stands in. */
.hero__view.video video,
.hero__view.video .hero__poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.hero__view.video .hero__poster { z-index: 0; }
.hero__view.video video { z-index: 1; opacity: 0; transition: opacity 0.9s var(--ease); }
.hero__view.video video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__view.video video { display: none; } }

/* --------------------------------------------------------------------------
   11. REVEAL
   -------------------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .pbanner { background-attachment: scroll; }
}

/* ==========================================================================
   14. ADDITIONS — change request v2
   Built on the existing tokens. Nothing here introduces a new colour.
   ========================================================================== */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- masthead tools: Singapore clock + language ------------------------- */
.mh__tools{display:flex;align-items:center;gap:.85rem;margin-left:1rem}
.sgclock{display:flex;align-items:center;gap:.45rem}
.sgclock svg{width:26px;height:26px}
.cl-face{fill:none;stroke:var(--hair-strong);stroke-width:2}
.cl-tick{stroke:var(--hair-strong);stroke-width:1.6;stroke-linecap:round}
.cl-h,.cl-m{stroke:var(--ink);stroke-linecap:round;transform-origin:50px 50px}
.cl-h{stroke-width:5}.cl-m{stroke-width:3.2}
.cl-s{stroke:var(--gold);stroke-width:2;stroke-linecap:round;transform-origin:50px 50px}
.cl-pin{fill:var(--ink)}
.sgclock__l{font-family:var(--font-ui);font-size:.625rem;letter-spacing:.2em;color:var(--stone)}
.lang{position:relative}
.lang__btn{font-family:var(--font-ui);font-size:.6875rem;letter-spacing:.16em;
  background:none;border:1px solid var(--hair-strong);color:var(--stone);padding:.4rem .65rem;cursor:pointer}
.lang__btn:hover{border-color:var(--ink);color:var(--ink)}
.lang__menu{position:absolute;right:0;top:calc(100% + .5rem);min-width:11rem;background:var(--paper);
  border:1px solid var(--hair);box-shadow:0 12px 34px rgba(37,40,42,.12);padding:.35rem;display:none;z-index:5}
.lang__menu.is-open{display:block}
.lang__menu a{display:block;padding:.55rem .7rem;font-family:var(--font-ui);font-size:.8125rem;
  color:var(--stone);text-decoration:none}
.lang__menu a:hover{background:var(--ivory);color:var(--ink)}
.lang__menu a[aria-current="true"]{color:var(--ink);border-left:2px solid var(--amber)}
@media (max-width:52rem){.sgclock__l{display:none}}

/* --- sticky action bar: always visible, four actions -------------------- */
.bookbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--paper);border-top:1px solid var(--hair);box-shadow:0 -2px 20px rgba(37,40,42,.10);
  padding-bottom:env(safe-area-inset-bottom);transform:none}
.bookbar__a{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.4rem;
  font-family:var(--font-ui);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border-right:1px solid var(--hair)}
.bookbar__a:last-child{border-right:0}
.bookbar__a svg{width:17px;height:17px;fill:currentColor;flex:none}
.bookbar__a:hover{background:var(--ivory)}
.bookbar__a--enquire{background:var(--amber)}
.bookbar__a--enquire:hover{background:#ffdc6d}
body{padding-bottom:3.4rem}
@media (max-width:34rem){.bookbar__a{flex-direction:column;gap:.2rem;font-size:.5625rem;letter-spacing:.08em}}

/* --- menus -------------------------------------------------------------- */
.mfils{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.75rem 0 1.5rem}
.mfil{font-family:var(--font-ui);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  background:none;border:1px solid var(--hair-strong);color:var(--stone);padding:.5rem .85rem;cursor:pointer}
.mfil:hover{border-color:var(--ink);color:var(--ink)}
.mfil[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.menus{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair)}
@media (min-width:38rem){.menus{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:62rem){.menus{grid-template-columns:repeat(3,minmax(0,1fr))}}
.menu{background:var(--paper);padding:1.4rem 1.35rem}
.menu__n{font-family:var(--font-display);font-weight:100;font-size:1.15rem;line-height:1.15;margin:0 0 .4rem;color:var(--ink)}
.menu__c{font-family:var(--font-ui);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--slate)}
.menu__l{margin:.9rem 0 0;display:flex;gap:1.1rem;font-family:var(--font-ui);font-size:.75rem;letter-spacing:.08em}
.menu__l a{color:var(--ink);text-underline-offset:4px}

/* --- directions --------------------------------------------------------- */
.dirs{display:grid;gap:2rem}
@media (min-width:52rem){.dirs{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem}}
.dirs h3{font-family:var(--font-display);font-weight:100;font-size:1.25rem;color:var(--ink);margin:0 0 .3rem}
.dirs__m{font-family:var(--font-ui);font-size:.75rem;letter-spacing:.1em;color:var(--slate);margin:0 0 .8rem}
.dirs ol{margin:0;padding-left:1.1em;font-size:.9375rem;line-height:1.7}
.dirs ol li{margin-bottom:.4rem}
.dirs__links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.dirs__links a{font-family:var(--font-ui);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--hair-strong);padding:.5rem .75rem;text-decoration:none;color:var(--stone)}
.dirs__links a:hover{border-color:var(--ink);color:var(--ink)}

/* --- reverse facts list (on ink) ---------------------------------------- */
.facts--rev dt{color:rgba(252,250,246,.62)}
.facts--rev dd{color:rgba(252,250,246,.92)}
.facts--rev div{border-color:var(--hair-reverse)}

/* --- date field: dd-mmm-yyyy -------------------------------------------- */
.datefield{position:relative;display:block}
.datefield input[type="date"]{width:100%;color:transparent;position:relative;z-index:2;background:transparent}
.datefield input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.5);cursor:pointer}
.datefield__v{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:1;pointer-events:none;
  font-family:var(--font-body);color:rgba(252,250,246,.92)}
.datefield__v[data-empty="true"]{color:rgba(252,250,246,.34)}

/* --- footer: socials, signup, legal ------------------------------------- */
@media (min-width:60rem){.foot__cols--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.socials{display:flex;gap:.6rem;margin-top:1.1rem}
.socials a{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--hair-reverse);color:var(--amber)}
.socials a:hover{border-color:var(--amber);background:rgba(254,209,65,.1)}
.socials svg{width:15px;height:15px;fill:currentColor}
.signup{display:flex;border-bottom:1px solid var(--hair-reverse);margin-top:.35rem}
.signup input{flex:1;background:none;border:0;color:var(--paper);font-family:var(--font-ui);font-size:.8125rem;padding:.55rem 0}
.signup input:focus{outline:none}
.signup input::placeholder{color:rgba(252,250,246,.4)}
.signup button{background:none;border:0;color:var(--amber);font-family:var(--font-ui);
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;padding:0 .3rem}
.foot__note{font-family:var(--font-ui);font-size:.6875rem;color:rgba(252,250,246,.45);margin:.6rem 0 0}
.foot__legal-nav{display:flex;flex-wrap:wrap;gap:1.1rem;font-family:var(--font-ui);font-size:.75rem;margin:2rem 0 0}
.foot__legal-nav a{color:rgba(252,250,246,.7);text-decoration:none}
.foot__legal-nav a:hover{color:var(--amber)}

/* --- parallax banners: keep the "no type over photography" rule --------- */
.pbanner{background-attachment:scroll;will-change:background-position}
@media (prefers-reduced-motion:reduce){.pbanner{background-position:center!important}}

/* ==========================================================================
   15. CHANGE REQUEST v3
   No solid-ink surfaces, no ink CTAs, colour carried by slate + amber,
   artwork behind the quiet bands, motion on every photograph.
   ========================================================================== */

/* --- CTAs: nothing sits on ink any more --------------------------------- */
.action{background:var(--amber);color:var(--ink);border-color:var(--amber)}
.action:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.action--ghost{background:transparent;color:var(--slate-deep);border-color:var(--slate)}
.action--ghost:hover{background:var(--slate);border-color:var(--slate);color:var(--paper)}
.action--reverse{background:var(--amber);color:var(--ink);border-color:var(--amber)}
.action--reverse:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.nav__enquire{background:var(--amber)!important;color:var(--ink)!important;border-color:var(--amber)!important}
.nav__enquire:hover{background:var(--gold)!important;border-color:var(--gold)!important;color:var(--ink)!important}

/* --- clock: slate hands, gold seconds ----------------------------------- */
.cl-face{stroke:rgba(79,117,139,.45)}
.cl-tick{stroke:rgba(79,117,139,.55)}
.cl-h,.cl-m{stroke:var(--slate-deep)}
.cl-s{stroke:var(--gold)}
.cl-pin{fill:var(--slate-deep)}
.sgclock__l{color:var(--slate)}

/* --- slate band replaces the ink band ----------------------------------- */
.band--slate{background:var(--slate-deep);color:rgba(252,250,246,.94)}
.band--slate .statement,.band--slate h2,.band--slate h3{color:var(--paper)}
.band--slate .eyebrow{color:rgba(252,250,246,.72)}
.band--slate .fig__n{color:var(--amber)}
.band--slate .fig__l{color:rgba(252,250,246,.7)}
.band--slate .band__rule{background:var(--hair-gold-rev)}

/* --- enquiry form: readable ---------------------------------------------- */
.band--slate .form label,.form label{color:rgba(252,250,246,.86);font-size:.75rem;letter-spacing:.16em}
.band--slate .form input,.band--slate .form select,.band--slate .form textarea{
  color:var(--paper);background:rgba(252,250,246,.07);border:1px solid rgba(252,250,246,.30);
  border-radius:2px;padding:.7rem .75rem;font-size:1rem}
.band--slate .form input:focus,.band--slate .form select:focus,.band--slate .form textarea:focus{
  outline:none;border-color:var(--amber);background:rgba(252,250,246,.12)}
.band--slate .form select option{background:var(--slate-deep);color:var(--paper)}
.band--slate .form__hint{color:rgba(252,250,246,.78)}
.datefield__v{left:.75rem;color:var(--paper)}
.datefield__v[data-empty="true"]{color:rgba(252,250,246,.5)}

/* --- artwork behind the quiet bands ------------------------------------- */
.band{position:relative}
.band--art::before{content:"";position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.16;pointer-events:none;z-index:0}
.band--art > .band__inner{position:relative;z-index:1}
.band--art--sage::before{background-image:url('../img/tex-pale-sage.webp')}
.band--art--blue::before{background-image:url('../img/tex-light-blue.webp')}
.band--art--peach::before{background-image:url('../img/tex-peach.webp')}
.band--art--beige::before{background-image:url('../img/tex-soft-beige.webp')}
.band--art--lav::before{background-image:url('../img/tex-lavender.webp')}
.band--ivory{background:#F3EFE6}

/* --- photographic banners: parallax + slow zoom -------------------------- */
.pbanner{position:relative;overflow:hidden;background:var(--slate-deep)}
.pbanner__media{position:absolute;inset:0;overflow:hidden}
.pbanner__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);
  transition:transform .12s linear;will-change:transform}
.hero__view{overflow:hidden}
.hero__view img,.hero__view video{will-change:transform}
.zoomable{overflow:hidden}
.zoomable img{will-change:transform}
.fmt__img,.space__img,.gal figure{overflow:hidden}
.fmt__img img,.space__img img,.gal figure img{transition:transform .9s var(--ease)}
.fmt:hover .fmt__img img,.space:hover .space__img img,.gal figure:hover img{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){
  .pbanner__media img{transform:none!important}
  .fmt__img img,.space__img img,.gal figure img{transition:none}
}

/* --- menus: collapsible book, native content ---------------------------- */
.mopen{border:1px solid var(--hair);background:var(--paper);margin-top:1.75rem}
.mopen > summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  padding:1.15rem 1.35rem;font-family:var(--font-ui);font-size:.8125rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.mopen > summary::-webkit-details-marker{display:none}
.mopen > summary::after{content:"+";margin-left:auto;font-size:1.3rem;line-height:1;color:var(--goldink)}
.mopen[open] > summary::after{content:"–"}
.mopen > summary:hover{background:var(--ivory)}
.mopen__n{font-size:.6875rem;letter-spacing:.14em;color:var(--slate);text-transform:none}
.mopen .mfils{padding:0 1.35rem;margin:1rem 0}
.mopen .menus{border-left:0;border-right:0;border-bottom:0}
.menu{background:var(--paper);padding:0}
.menu > summary{list-style:none;cursor:pointer;padding:1.15rem 1.35rem;display:flex;flex-direction:column;gap:.3rem;position:relative}
.menu > summary::-webkit-details-marker{display:none}
.menu > summary:hover{background:var(--ivory)}
.menu__x{position:absolute;right:1.2rem;top:1.25rem;width:11px;height:11px}
.menu__x::before,.menu__x::after{content:"";position:absolute;background:var(--gold);transition:transform .25s var(--ease)}
.menu__x::before{left:0;top:5px;width:11px;height:1px}
.menu__x::after{left:5px;top:0;width:1px;height:11px}
.menu[open] .menu__x::after{transform:rotate(90deg)}
.menu__n{display:block;font-family:var(--font-display);font-weight:100;font-size:1.15rem;line-height:1.2;color:var(--ink)}
.menu__c{font-family:var(--font-ui);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--slate)}
.mnu{padding:0 1.35rem 1.5rem;border-top:1px solid var(--hair)}
.mnu__blurb{font-size:.95rem;margin:1rem 0 .35rem;color:var(--stone)}
.mnu__meta{font-family:var(--font-ui);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);margin:0 0 1rem}
.mnu__s{margin-bottom:1.35rem}
.mnu__s h4{font-family:var(--font-ui);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);margin:0 0 .6rem;padding-bottom:.35rem;border-bottom:1px solid var(--hair-gold);
  display:flex;gap:.75rem;align-items:baseline}
.mnu__pick{margin-left:auto;font-size:.625rem;letter-spacing:.12em;color:var(--goldink);text-transform:none;white-space:nowrap}
.mnu__s ul{list-style:none;margin:0;padding:0}
.mnu__s li{margin-bottom:.5rem;line-height:1.5}
.mnu__i{display:block;font-size:.95rem;color:var(--ink)}
.mnu__d{display:block;font-size:.8125rem;color:var(--stone)}
.menu__l{margin:1.25rem 0 0}
.menu__l a{font-family:var(--font-ui);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--slate);color:var(--slate-deep);padding:.55rem .85rem;text-decoration:none;display:inline-block}
.menu__l a:hover{background:var(--slate);color:var(--paper)}

/* --- map ---------------------------------------------------------------- */
.mapwrap{margin-top:2rem;border:1px solid var(--hair);background:var(--ivory);aspect-ratio:16/7;position:relative;overflow:hidden}
.mapwrap iframe{width:100%;height:100%;border:0;display:block}
.mapwrap__load{position:absolute;inset:0;width:100%;border:0;cursor:pointer;background:
  linear-gradient(rgba(79,117,139,.10),rgba(79,117,139,.10)),url('../img/tex-light-blue.webp') center/cover;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
  font-family:var(--font-ui);font-size:.8125rem;letter-spacing:.18em;text-transform:uppercase;color:var(--slate-deep)}
.mapwrap__load small{font-size:.6875rem;letter-spacing:.08em;text-transform:none;color:var(--stone)}
.mapwrap__load:hover{filter:brightness(.97)}

/* --- sticky bar: one accent, colour on hover ---------------------------- */
.bookbar__a{color:var(--slate-deep);transition:background .2s var(--ease),color .2s var(--ease)}
.bookbar__a svg{color:var(--slate)}
.bookbar__a:hover{background:var(--slate-deep);color:var(--paper)}
.bookbar__a:hover svg{color:var(--amber)}
.bookbar__a--enquire{background:var(--amber);color:var(--ink)}
.bookbar__a--enquire svg{color:var(--ink)}
.bookbar__a--enquire:hover{background:var(--gold);color:var(--ink)}
.bookbar__a--enquire:hover svg{color:var(--ink)}

/* --- footer: artwork, not a black slab ---------------------------------- */
.foot{position:relative;background:var(--slate-deep);overflow:hidden}
.foot::before{content:"";position:absolute;inset:0;background:url('../img/foot-art.webp') center/cover;
  opacity:.16;pointer-events:none}
.foot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(59,88,107,.72),rgba(59,88,107,.94));pointer-events:none}
.foot > *{position:relative;z-index:2}
.foot__logo{width:88px}
.foot__marque{width:52px}

/* ==========================================================================
   16. CHANGE REQUEST v4
   ========================================================================== */

/* --- clock dial: tinted face, no white ---------------------------------- */
.cl-face{fill:rgba(79,117,139,.12);stroke:rgba(79,117,139,.5);stroke-width:2}
.cl-tick{stroke:rgba(59,88,107,.65)}

/* --- no italics ---------------------------------------------------------- */
.space__line{font-style:normal}
.pbanner__body .lede,.lede,.fig__l,.mnu__d{font-style:normal}

/* --- motion: two transforms, two elements -------------------------------
   The wrapper is translated by scroll (parallax); the image inside runs its
   own slow zoom loop. Keeping them on separate nodes stops one overwriting
   the other, which is why the parallax was not showing.
   ----------------------------------------------------------------------- */
@keyframes kenburns{
  0%   {transform:scale(1.02)}
  50%  {transform:scale(1.14)}
  100% {transform:scale(1.02)}
}
.pbanner__media{position:absolute;inset:-8% 0;overflow:hidden;will-change:transform}
.pbanner__media img{width:100%;height:100%;object-fit:cover;transform-origin:center;
  animation:kenburns 26s ease-in-out infinite;will-change:transform}
.pbanner:nth-of-type(even) .pbanner__media img{animation-duration:32s;animation-delay:-8s}
.hero__view img,.hero__view video{animation:kenburns 34s ease-in-out infinite}
.zoomable img{animation:kenburns 30s ease-in-out infinite}
.gal figure img{animation:kenburns 40s ease-in-out infinite}
.gal figure:nth-child(odd) img{animation-delay:-12s}
@media (prefers-reduced-motion:reduce){
  .pbanner__media img,.hero__view img,.hero__view video,.zoomable img,.gal figure img{animation:none}
  .pbanner__media{transform:none!important}
}

/* --- cookie consent ------------------------------------------------------ */
.cookie{position:fixed;left:1rem;right:1rem;bottom:calc(3.4rem + 1rem);z-index:70;max-width:44rem;
  margin-inline:auto;background:var(--paper);border:1px solid var(--hair);box-shadow:0 10px 40px rgba(37,40,42,.16);
  padding:1.1rem 1.25rem;display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap}
.cookie[hidden]{display:none}
.cookie__t{margin:0;font-size:.875rem;line-height:1.55;color:var(--stone);flex:1 1 20rem}
.cookie__t a{color:var(--slate-deep)}
.cookie__b{display:flex;gap:.5rem;flex-wrap:wrap}
.cookie .action{padding:.7rem 1.1rem;font-size:.6875rem}
@media (max-width:36rem){.cookie{left:.5rem;right:.5rem;padding:.9rem 1rem}.cookie__b{width:100%}.cookie .action{flex:1}}

/* ==========================================================================
   17. FIXES v5
   ========================================================================== */

/* --- date field: the native value was overlapping the dd-mmm-yyyy display.
       .band--slate .form input set colour:paper and outranked the earlier
       transparent rule. Higher-specificity reset, plus hide the native
       datetime edit entirely in WebKit. ----------------------------------- */
.band--slate .form .datefield input[type="date"],
.datefield input[type="date"]{color:transparent!important;background:transparent}
.datefield input[type="date"]::-webkit-datetime-edit,
.datefield input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.datefield input[type="date"]::-webkit-datetime-edit-text,
.datefield input[type="date"]::-webkit-datetime-edit-day-field,
.datefield input[type="date"]::-webkit-datetime-edit-month-field,
.datefield input[type="date"]::-webkit-datetime-edit-year-field{color:transparent;opacity:0}
.datefield input[type="date"]::-moz-datetime-edit{color:transparent}
.datefield__v{font-family:var(--font-body);font-size:1rem;letter-spacing:.02em}

/* --- footer legal nav: separated, wrapping, never a run-on --------------- */
.foot__legal-nav{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .9rem;
  margin:2rem 0 0;font-family:var(--font-ui);font-size:.75rem;letter-spacing:.06em}
.foot__legal-nav a{color:rgba(252,250,246,.72);text-decoration:none;white-space:nowrap;padding:.15rem 0}
.foot__legal-nav a:hover{color:var(--amber);text-decoration:underline;text-underline-offset:3px}
.foot__legal-nav a + a::before{content:"·";margin-right:.9rem;color:rgba(252,250,246,.34);
  display:inline-block;text-decoration:none}

/* --- halal disclosure (remediation) --- */
.note-halal{margin-top:1.1rem;padding:0.95rem 1.15rem;
  background:var(--paper2);border-left:3px solid var(--gold);
  font-size:0.975rem;line-height:1.6;color:var(--ink-2)}
.note-halal b{color:var(--ink)}
.note-halal--inline{margin:1.25rem 0 0;max-width:60ch}

/* --- WCAG 2.5.5 target size on the consent bar (remediation) --- */
#cookie .action{min-height:44px;display:inline-flex;align-items:center;
  justify-content:center} /* cookie-tap */
#cookie a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:48rem){#cookie a{min-height:44px}}