/* Cardinal — pre-launch holding page
   Palette fixed to the brand guidelines: Charcoal / Graphite / Stone / Bone / Paper.
   Default pairing for this page: Bone on Charcoal. */

:root {
  --charcoal: #1D2328;
  --graphite: #5E6268;
  --stone: #BDB8B0;
  --bone: #E4E1DB;
  --paper: #F2F1EE;

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--charcoal);
  color: var(--bone);
}

body {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.page {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2rem);
  padding: clamp(1.5rem, 5vw, 4rem) clamp(1.25rem, 6vw, 3rem) clamp(4.5rem, 8vw, 6rem);
  text-align: center;
  isolation: isolate;
}

/* ---------- Lockup ----------
   Per the brand guidelines: needle height is twice the wordmark's cap
   height, centred on the cap band (so it overhangs equally above the cap
   line and below the baseline), with its base half a cap height below the
   baseline. The gap from the needle to the left stem of the C is one cap
   height. Cormorant Garamond Light measures 0.64em cap height at this
   weight (verified against the live glyph outline), so every dimension
   below is expressed as a multiple of the wordmark's own font-size and
   scales correctly at any viewport width. */

.lockup {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: clamp(2rem, 5.5vw, 3.75rem); /* establishes the shared em for mark + word */
  color: var(--bone);
}

/* Cormorant Garamond Light measured directly from its glyph outline at this
   weight: cap height is 0.64em, and with line-height:1 the baseline sits
   0.18em above the bottom edge of the text box. Needle height is twice cap
   height (1.28em), centred on the cap band, so it overhangs 0.32em above
   the cap line and 0.32em below the baseline, i.e. 0.14em below the word
   box's own bottom edge (0.32 minus the 0.18 baseline offset). */
.lockup__mark {
  position: absolute;
  left: 0;
  bottom: -0.14em;
  display: inline-flex;
  width: 0.6336em; /* 4.95u width at a 10u-tall needle scaled to 1.28em height */
  height: 1.28em;
  color: var(--bone);
}

.lockup__mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.lockup__word {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1em;
  letter-spacing: 0.30em;
  /* left padding = needle width (0.6336em) + one cap height gap (0.64em) to the left stem of the C */
  padding-left: 1.2736em;
  color: var(--bone);
  line-height: 1;
}

/* ---------- Capability line ---------- */

.capability-line {
  margin-top: clamp(0.9rem, 2vw, 1.5rem);
  margin-bottom: clamp(0.5rem, 1.5vw, 0.9rem);
  font-family: var(--sans);
  font-size: clamp(0.82rem, 1.7vw, 1rem);
  letter-spacing: 0.16em;
  color: var(--bone);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  max-width: 46rem;
}

.capability-line .dot {
  color: var(--graphite);
  font-weight: 700;
}

/* ---------- Launch statement ---------- */

.launch-statement {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  color: var(--bone);
  letter-spacing: 0.01em;
}

/* ---------- Foot group ----------
   Enquire and the footer copy sit together as one bottom-anchored flex
   column, separated by a fixed two-line-space gap. Using flex `gap`
   instead of two independently absolutely-positioned elements means the
   spacing holds steady even when the footer's address line wraps onto
   an extra line on narrow viewports. */

.foot-group {
  position: absolute;
  bottom: clamp(1rem, 2.5vw, 1.35rem);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.24rem;
  padding: 0 1.25rem;
}

.footer {
  text-align: center;
  color: var(--graphite);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  line-height: 1.6;
}

.footer p {
  margin: 0;
}

/* ---------- Enquiry link ----------
   Recessive by default: quiet, low-contrast, no visible border, so it
   does not compete with the lockup or the footer. It only steps forward
   — text brightens, an underline appears — when the visitor actually
   engages: hovering, focusing, or tabbing to it. */

.enquiry-link {
  color: var(--graphite);
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-underline-offset: 0.25em;
  padding: 0.35rem 0.1rem;
  transition: color 0.2s ease;
}

.enquiry-link:hover,
.enquiry-link:focus-visible {
  color: var(--bone);
  text-decoration: underline;
}

/* ---------- Entrance reveal: the mark cuts through the mist first ----------
   Sequence: the needle mark resolves to full sharpness almost immediately,
   as if it is the point bringing the rest of the mark into focus. The mist
   keeps dissipating around it and the wordmark, capability line, launch
   statement and footer ease in afterwards, more slowly, once the mark has
   already read clearly. The mark's own fill is never filtered mid-animation
   beyond its own short resolve — only the surrounding mist and the later
   elements carry blur/opacity change, per the "one colour, one job" rule. */

.reveal-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.wisp {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(94, 98, 104, 0.55) 0%, rgba(94, 98, 104, 0) 70%);
  filter: blur(18px);
  opacity: 0.9;
}

.wisp-1 { width: 42vw; height: 42vw; top: 18%; left: 22%; animation: wisp-drift-1 4.4s ease-out forwards; }
.wisp-2 { width: 36vw; height: 36vw; top: 30%; left: 48%; animation: wisp-drift-2 4.6s ease-out forwards; }
.wisp-3 { width: 30vw; height: 30vw; top: 40%; left: 30%; animation: wisp-drift-3 4.2s ease-out 0.15s forwards; }
.wisp-4 { width: 26vw; height: 26vw; top: 22%; left: 52%; animation: wisp-drift-4 4.8s ease-out 0.1s forwards; }

@keyframes wisp-drift-1 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.9; }
  100% { transform: translate(-8vw, -6vw) scale(1.6); opacity: 0; }
}
@keyframes wisp-drift-2 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.85; }
  100% { transform: translate(10vw, -4vw) scale(1.7); opacity: 0; }
}
@keyframes wisp-drift-3 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.8; }
  100% { transform: translate(-6vw, 8vw) scale(1.5); opacity: 0; }
}
@keyframes wisp-drift-4 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.8; }
  100% { transform: translate(7vw, 6vw) scale(1.6); opacity: 0; }
}

.lockup {
  position: relative;
  z-index: 1;
}

.lockup__mark {
  will-change: filter, opacity;
  filter: blur(10px);
  opacity: 0;
  animation: mark-resolve 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes mark-resolve {
  0%   { filter: blur(10px); opacity: 0; }
  100% { filter: blur(0); opacity: 1; }
}

.lockup__word {
  display: inline-block;
  will-change: filter, opacity;
  filter: blur(12px);
  opacity: 0;
  animation: word-resolve 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: 0.45s;
}

@keyframes word-resolve {
  0%   { filter: blur(12px); opacity: 0; }
  100% { filter: blur(0); opacity: 1; }
}

.fade-in {
  opacity: 0;
  animation: fade-in 0.9s ease forwards;
  animation-delay: 1.7s;
}

.footer.fade-in {
  animation-delay: 1.9s;
}

.enquiry-link.fade-in {
  animation-delay: 2.05s;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Reduced motion: skip the reveal entirely, render everything at final state immediately */
@media (prefers-reduced-motion: reduce) {
  .reveal-layer { display: none; }
  .lockup__mark,
  .lockup__word {
    filter: none;
    opacity: 1;
    animation: none;
  }
  .fade-in {
    opacity: 1;
    animation: none;
  }
}

/* Small screens: keep the lockup and copy comfortably within the viewport.
   Letter-spacing is reduced to fit, but the left padding still has to equal
   the needle width plus one cap height, per the lockup spec, so it must not
   collapse to the tracking-cancellation value. */
@media (max-width: 420px) {
  .lockup__word {
    letter-spacing: 0.22em;
    padding-left: 1.2736em;
  }
}