/* ==========================================================================
   BlueRise Partners — night identity
   Palette sampled directly from the supplied "night" logo artwork.
   ========================================================================== */

:root {
  --abyss:   #01030B;   /* page base — near-black, navy shifted */
  --hull:    #060A14;   /* polished stone, near field */
  --tile:    #091325;   /* alternate tile */
  --facet:   #212B3B;   /* diamond facet blue — rules and edges */
  --haze:    #CBDBEC;   /* cool pale highlight from the star's blue-white rim */
  --bronze:  #94652C;   /* deep gold — hairlines */
  --gold:    #E3A758;   /* primary gold */
  --gold-lt: #F7BE71;   /* gold highlight */
  --ivory:   #E9E3D6;   /* warm prose white */
  --slate:   #8E9AAC;   /* cool meta grey */

  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* One compact type scale across both pages. The crest remains intentionally
     exceptional; everything else shares five supporting sizes. */
  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-lead: clamp(1.05rem, 1.5vw, 1.25rem);
  --text-title: clamp(1.6rem, 3.2vw, 2.25rem);
  --text-display: clamp(1.35rem, 4.5vw, 3rem);

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  /* the water gave up height so the star could take it */
  --pool-h: 28vh;

  /* edge of one wall plate. The diamond it makes on screen is √2 times wider,
     which lands about four plates across a desktop viewport — the same
     architectural scale the artwork uses. */
  --plate: clamp(110px, 19vw, 360px);
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--abyss);
  color: var(--ivory);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }

[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  padding: 0.6rem 1rem;
  background: var(--facet);
  color: var(--ivory);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.skip-link:focus { left: var(--gutter); top: 0.75rem; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
}

/* --------------------------------------------------------------------------
   The faceted wall — dark stone lattice, from the artwork's background
   -------------------------------------------------------------------------- */

.wall {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;      /* clips the oversized rotated plate layer below */
  pointer-events: none;
  background: var(--abyss);
}

/* The plates are drawn as a plain square grid and then turned 45°. Authoring
   them upright is what lets each plate carry its own vertex-to-vertex gradient
   — the thing that makes the lattice read as bevelled stone rather than as
   crossed hairlines. */
.wall::before {
  content: "";
  position: absolute;
  /* a 45° turn needs √2 of the diagonal to still cover the corners */
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  transform: rotate(45deg);
  opacity: 0.32;
  background-image:
    /* lit edges — a crisp catch-light, then the bevel rolling into the face */
    linear-gradient(to bottom,
      rgba(203, 219, 236, 0.038) 0 1px,
      rgba(203, 219, 236, 0.012) 5px,
      rgba(0, 0, 0, 0) 14px),
    linear-gradient(to right,
      rgba(203, 219, 236, 0.026) 0 1px,
      rgba(203, 219, 236, 0.008) 5px,
      rgba(0, 0, 0, 0) 12px),
    /* the seam where the neighbouring plate laps over this one */
    linear-gradient(to top,
      rgba(0, 0, 0, 0.62) 0 2px,
      rgba(0, 0, 0, 0.26) 7px,
      rgba(0, 0, 0, 0) 18px),
    linear-gradient(to left,
      rgba(0, 0, 0, 0.45) 0 2px,
      rgba(0, 0, 0, 0.18) 6px,
      rgba(0, 0, 0, 0) 15px),
    /* the face itself. Two crossed ramps rather than one, so a plate differs in
       tone from every neighbour it touches and the field reads as harlequin. */
    linear-gradient(to bottom,
      rgba(203, 219, 236, 0.022) 0%,
      rgba(203, 219, 236, 0.003) 56%,
      rgba(0, 0, 0, 0.095) 100%),
    linear-gradient(to right,
      rgba(203, 219, 236, 0.011) 0%,
      rgba(0, 0, 0, 0.038) 100%);
  background-size: var(--plate) var(--plate);
}

.wall::after {           /* bloom behind the emblem, then an edge vignette */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 46% at 50% 34%, rgba(33, 43, 59, 0.4) 0%, rgba(1, 3, 11, 0) 68%),
    radial-gradient(88% 78% at 50% 42%, rgba(1, 3, 11, 0) 42%, rgba(1, 3, 11, 0.92) 100%);
}

/* --------------------------------------------------------------------------
   Masthead — one nav item, institutional restraint
   -------------------------------------------------------------------------- */

.masthead {
  position: relative;
  z-index: 30;
  display: flex;
  /* top-aligned, so the nav link starts on the same line as the first city
     rather than floating at the middle of the stack */
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.1rem, 2.4vh, 1.9rem) var(--gutter) 0;
}

/* The four cities stack in the corner, one per line, as an office list reads.
   Set smaller than the old single "Tokyo" so four lines stay quiet against the
   crest instead of competing with it. */
.masthead__mark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--font-display);
  font-size: clamp(0.5625rem, 1.9vw, 0.6875rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  line-height: 1.85;
  color: var(--slate);
  text-transform: uppercase;
}

.masthead__city { white-space: nowrap; }

/* On the back-page the crest sits in the header rather than in the body, so the
   page below it can stay centred like the front page. */
.masthead__crest {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.55rem, 1.4vw, 0.85rem);
  min-height: 44px;
}

.masthead__emblem {
  width: clamp(30px, 4vw, 40px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  background: url("/assets/emblem.webp") center / contain no-repeat;
}

.masthead__wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F9FD 42%, #CBD9EB 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(198, 219, 244, 0.2));
}

.masthead__nav {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.25rem);
}

.navlink {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  font-size: clamp(0.5625rem, 2.1vw, 0.6875rem);
  font-weight: 500;
  letter-spacing: clamp(0.14em, 0.8vw, 0.3em);
  text-transform: uppercase;
  /* gold with a standing rule. The first outside reviewer could not find the
     second page when this was grey with a hover-only underline. */
  color: var(--gold);
  transition: color 0.5s ease;
}
.navlink::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0.55rem;
  height: 1px;
  background: var(--bronze);
  transition: background-color 0.5s ease;
}
.navlink:hover, .navlink:focus-visible { color: var(--gold-lt); }
.navlink:hover::after, .navlink:focus-visible::after { background: var(--gold-lt); }
.navlink[aria-current="page"] { color: var(--gold); }
.navlink[aria-current="page"]::after { right: 0; background: var(--bronze); }

/* --------------------------------------------------------------------------
   Home — the crest, the waterline, the pool
   -------------------------------------------------------------------------- */

.stage {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  min-height: 100dvh;
  /* pinned to the screen, not merely at least as tall as it: that is what lets
     the pool shrink instead of pushing the footer off the bottom edge */
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: clip;
}

.crest {
  /* the star carries the page, so it takes as much height as the single screen
     will give it. 928px of source art caps the useful size — past roughly 480px
     it upscales on a 2× display, which is why the vector master still matters. */
  --emblem: clamp(210px, 34.65vh, 441px);
  /* Michael, 5 Aug: sit the star higher in the frame. The crest fills its track
     exactly, so there is no slack to centre into — this offsets the painted
     block without touching the layout, and the air it gives back lands between
     the statement and the waterline. */
  --lift: clamp(0px, 5vh, 56px);
  position: relative;
  top: calc(-1 * var(--lift));
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter);
  text-align: center;
  overflow: clip;
}

.crest__link {
  display: block;
  position: relative;
}

.crest__lockup {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* the city skyline crosses the emblem's lower vertex, as in the artwork */
.crest__horizon {
  position: absolute;
  left: 50%;
  top: calc(var(--emblem) * 0.99);
  transform: translate(-50%, -50%);
  width: min(196vw, 2000px);
  aspect-ratio: 2048 / 192;
  background: url("/assets/horizon.webp") center / 100% 100% no-repeat;
  opacity: 0.66;
  pointer-events: none;
  /* let the skyline fall away at the edges so the eye stays centred */
  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%, #000 26%, #000 74%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%, #000 26%, #000 74%, rgba(0,0,0,0) 100%);
}

.crest__emblem {
  position: relative;
  z-index: 1;
  width: var(--emblem);
  aspect-ratio: 1;
  /* clear air under the star: the name used to be tucked up into it */
  margin-bottom: clamp(0.9rem, 2.2vh, 1.7rem);
  background: url("/assets/emblem.webp") center / contain no-repeat;
  filter: drop-shadow(0 0 40px rgba(227, 167, 88, 0.15));
  animation: emblem-breathe 11s ease-in-out infinite;
}

@keyframes emblem-breathe {
  0%, 100% { filter: drop-shadow(0 0 38px rgba(227, 167, 88, 0.13)); }
  50%      { filter: drop-shadow(0 0 58px rgba(227, 167, 88, 0.24)); }
}

/* the star's beam, continued down to where it meets the water */
.crest__beam {
  position: absolute;
  left: 50%;
  top: calc(var(--emblem) * 0.52);
  bottom: 0;
  transform: translateX(-50%);
  width: clamp(2px, 0.34vw, 4px);
  background: linear-gradient(to bottom,
    rgba(247, 190, 113, 0.85) 0%,
    rgba(227, 167, 88, 0.5) 38%,
    rgba(227, 167, 88, 0.22) 74%,
    rgba(227, 167, 88, 0) 100%);
  filter: blur(0.4px);
  pointer-events: none;
}

.crest__word {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-display);
  line-height: 1;
  --track: clamp(0.1em, 0.42vw, 0.185em);
  letter-spacing: var(--track);
  /* letter-spacing adds a trailing gap; half of it re-centres the glyphs */
  text-indent: calc(var(--track) / 2);
  text-transform: uppercase;
  /* white, as in the artwork — the gold is the star and the arc, not the name */
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F9FD 40%, #C6D6E9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* drop-shadow, not text-shadow: it works off the clipped result, so the glow
     stays outside the letters instead of bleeding through the transparent fill */
  filter:
    drop-shadow(0 1px 8px rgba(1, 3, 11, 0.9))
    drop-shadow(0 0 20px rgba(198, 219, 244, 0.3))
    drop-shadow(0 0 52px rgba(120, 162, 214, 0.2));
}

/* the gold arc — the one element carried over from the old identity */
.crest__arc {
  display: block;
  width: min(78vw, 820px);
  height: auto;
  margin-top: clamp(0.7rem, 1.7vh, 1.3rem);
}

/* Set in the masthead's serif, sentence case, and held back from the ivory the
   prose uses elsewhere — the star and the gold are what should carry light. */
.crest__statement {
  max-width: 42ch;
  margin: clamp(2.3rem, 6vh, 3.8rem) auto 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lead);
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: rgba(233, 227, 214, 0.6);
  text-wrap: balance;
}
.crest__statement em {
  font-style: normal;
  color: var(--gold);
}

/* hold each clause together so the line never breaks on "for" */
.crest__line { display: inline-block; }

/* --------------------------------------------------------------------------
   The reflecting pool
   -------------------------------------------------------------------------- */

.pool {
  position: relative;
  /* shrinkable: on a short screen the water gives its height back to the crest
     before anything gets clipped, down to the min-height floor */
  flex: 0 1 auto;
  height: var(--pool-h);
  min-height: min(120px, 18svh);
  width: 100%;
  overflow: hidden;
}

.pool__canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* melt the far edge of the water into the page */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 24%, #000 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 24%, #000 100%);
}

/* static stand-in when WebGL is unavailable */
.pool--fallback .pool__canvas { display: none; }
.pool--fallback::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(1,3,11,1) 0%, rgba(6,10,20,0) 22%),
    radial-gradient(42% 62% at 50% 0%, rgba(227, 167, 88, 0.3) 0%, rgba(227,167,88,0) 72%),
    repeating-linear-gradient(to bottom,
      rgba(203, 219, 236, 0.05) 0 1px, rgba(0,0,0,0) 1px 26px),
    linear-gradient(to bottom, var(--tile), var(--hull) 60%, #02040C);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

/* One centred stack, small: the line of record, then the reservation finer
   still beneath it. Tokyo moved up to the city line in the masthead. */
.footer {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0 var(--gutter) clamp(0.9rem, 2.2vh, 1.5rem);
  text-align: center;
  font-size: clamp(0.5625rem, 2vw, 0.625rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(142, 154, 172, 0.72);
  /* the near water carries the star's light — keep the meta readable over it */
  text-shadow: 0 1px 4px rgba(1, 3, 11, 0.92), 0 0 12px rgba(1, 3, 11, 0.75);
}

.footer__fine {
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  color: rgba(142, 154, 172, 0.52);
}

.stage .footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

/* --------------------------------------------------------------------------
   Mandates
   -------------------------------------------------------------------------- */

.doc {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* The back-page is centred to match the front page, which is centred and bare.
   Every block below therefore centres its own text and holds its own measure. */
.doc__body {
  flex: 1 1 auto;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(2.4rem, 7vh, 5.5rem) var(--gutter) clamp(2rem, 5vh, 4rem);
  text-align: center;
}

.doc__lede {
  padding-bottom: clamp(2rem, 5vh, 3.4rem);
  border-bottom: 1px solid rgba(33, 43, 59, 0.85);
}

.doc__title {
  margin: 0 0 clamp(0.9rem, 2.4vh, 1.5rem);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-title);
  line-height: 1.1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory);
}

/* matches the front page's statement: same serif, same held-back ivory */
.doc__standfirst {
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lead);
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: rgba(233, 227, 214, 0.6);
  max-width: 52ch;
  text-wrap: balance;
}

.doc__status {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: clamp(1.2rem, 3vh, 1.9rem);
  padding: 0.55rem 1.05rem;
  border: 1px solid rgba(148, 101, 44, 0.5);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-lt);
}

/* The mission — two mandates, not a card grid */
.block { margin: clamp(2.2rem, 6vh, 4rem) 0 0; }

.mission {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  .mission { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4rem); }
}

.mission__eyebrow {
  margin: 0 0 clamp(1.4rem, 3.6vh, 2.2rem);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--slate);
}

.mission__item {
  padding: clamp(1.6rem, 4vh, 2.4rem) 0 0;
  border-top: 1px solid rgba(33, 43, 59, 0.85);
}
.mission__item + .mission__item { margin-top: clamp(1.6rem, 4vh, 2.4rem); }

@media (min-width: 860px) {
  .mission__item + .mission__item { margin-top: 0; }
}

.mission__name {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-lead);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gold-lt);
}

.mission__copy {
  margin: 0 auto 0.9rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.7;
  color: rgba(233, 227, 214, 0.86);
  max-width: 42ch;
}
.mission__copy:last-child { margin-bottom: 0; }

/* Sectors — a single tracked line, the industries they actually work in */
.sectors {
  margin: clamp(2.4rem, 6vh, 4rem) 0 0;
  padding: clamp(1.5rem, 4vh, 2.2rem) 0 0;
  border-top: 1px solid rgba(33, 43, 59, 0.85);
}

.sectors__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.72em;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* natural casing — "IoT" and "AI" must survive */
.sectors__list li {
  position: relative;
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.13em;
  color: rgba(233, 227, 214, 0.82);
}

.sectors__list li:not(:last-child)::after {
  content: "·";
  margin-left: 0.72em;
  color: var(--bronze);
}

/* Enquiries */
/* Stacked rather than side-by-side, so the form sits on the page's centre line */
.enquiries {
  display: grid;
  gap: clamp(1.4rem, 3vh, 2.2rem);
  grid-template-columns: 1fr;
  justify-items: center;
  margin: clamp(2.4rem, 6vh, 4rem) 0 0;
  padding: clamp(1.5rem, 4vh, 2.2rem) 0 0;
  border-top: 1px solid rgba(33, 43, 59, 0.85);
}

.enquiries__intro { padding-top: 0.15rem; }

.enquiries__note {
  margin: 0.7rem auto 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: rgba(233, 227, 214, 0.82);
  max-width: 40ch;
}

.enquiries__fine {
  display: block;
  margin: 1.15rem 0 0;
  line-height: 1.7;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(142, 154, 172, 0.7);
}

.enquiries__panel {
  width: 100%;
  min-width: 0;
  max-width: 44rem;
  padding: clamp(1.15rem, 2.8vw, 1.8rem);
  border: 1px solid rgba(33, 43, 59, 0.9);
  background: rgba(6, 10, 20, 0.56);
  /* fields stay left-aligned; centred labels over inputs read as broken */
  text-align: left;
}

.enquiries__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem clamp(1rem, 2.5vw, 1.5rem);
}

.enquiries__field {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.enquiries__field--wide { grid-column: 1 / -1; }

.enquiries__field > span {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate);
}

.enquiries__field input,
.enquiries__field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(142, 154, 172, 0.38);
  border-radius: 0;
  padding: 0.65rem 0.1rem 0.72rem;
  background: transparent;
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.4;
  caret-color: var(--gold);
  transition: border-color 0.35s ease, background-color 0.35s ease;
}

.enquiries__field textarea {
  min-height: 8.5rem;
  resize: vertical;
}

.enquiries__field input:hover,
.enquiries__field textarea:hover {
  border-bottom-color: rgba(203, 219, 236, 0.62);
}

.enquiries__field input:focus,
.enquiries__field textarea:focus {
  outline: 0;
  border-bottom-color: var(--gold);
  border-bottom-width: 2px;
  background: rgba(9, 19, 37, 0.32);
}

/* Turnstile sits between the last field and the button. Hidden until the
   script confirms a site key, so an unkeyed form has no empty grid row; the
   reserved height then stops the button jumping when the iframe lands. */
.enquiries__verify { display: none; }

.enquiries__verify--on {
  display: block;
  grid-column: 1 / -1;
  min-height: 65px;
}

.enquiries__verify-note {
  margin: 0.6rem 0 0;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--gold-lt);
}

.enquiries__submit {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  justify-self: start;
  min-height: 44px;
  min-width: min(100%, 13.5rem);
  margin-top: 0.25rem;
  border: 1px solid rgba(227, 167, 88, 0.68);
  padding: 0.78rem 0.95rem 0.78rem 1.05rem;
  background: transparent;
  color: var(--gold-lt);
  font: 500 var(--text-xs)/1 var(--font-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

.enquiries__submit:hover,
.enquiries__submit:focus-visible {
  border-color: var(--gold);
  background: rgba(227, 167, 88, 0.1);
  color: var(--ivory);
}

.enquiries__submit:disabled {
  cursor: wait;
  opacity: 0.58;
}

.enquiries__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.enquiries__success {
  padding: clamp(1.4rem, 3.5vw, 2rem);
  border-left: 1px solid var(--gold);
  background: rgba(9, 19, 37, 0.52);
}

.enquiries__success p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: rgba(233, 227, 214, 0.82);
}

.enquiries__success .enquiries__success-title {
  margin-bottom: 0.45rem;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gold-lt);
}

@media (max-width: 560px) {
  .enquiries__form { grid-template-columns: 1fr; }
  .enquiries__field { grid-column: 1; }
  .enquiries__submit { width: 100%; }
}

/* a thin band of the same water closes the second page */
.doc .pool {
  --pool-h: 18vh;
  min-height: 120px;
}

/* --------------------------------------------------------------------------
   Short viewports — protect the crest
   -------------------------------------------------------------------------- */

@media (max-height: 680px) {
  :root { --pool-h: 24vh; }
  .crest { --emblem: clamp(101px, 26.25vh, 273px); }
  .crest__statement { margin-top: clamp(1rem, 2.6vh, 1.8rem); }
  .crest__emblem { margin-bottom: clamp(0.5rem, 1.4vh, 0.9rem); }
}

@media (max-width: 560px) {
  :root { --pool-h: 24vh; }
  .crest__horizon { width: 250vw; }
}

@media (max-height: 500px) and (orientation: landscape) {
  :root { --pool-h: 22vh; }
  .pool { min-height: 22svh; }
}

@media (max-height: 360px) and (orientation: landscape) {
  :root { --pool-h: 19vh; }
  .masthead { padding-top: 0.35rem; }
  .crest__statement {
    margin-top: 0.5rem;
    font-size: var(--text-base);
    line-height: 1.35;
  }
  .pool { min-height: 19svh; }
}

@media (prefers-reduced-motion: reduce) {
  .crest__emblem { animation: none; }
  .navlink::after { transition: none; }
  * { scroll-behavior: auto; }
}