/* ============================================================
   Lowick Hedry - brand tokens
   Mirrors 01. Design System/colors_and_type.css.
   ============================================================ */

/* Fonts loaded from Google Fonts - Fraunces (variable) + Rethink Sans (variable) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,100..900,0..100;1,9..144,100..900,0..100&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap');

:root {
  /* Brand palette */
  --off-white:     #FAFAFA;
  --anchor:        #0A2C4A;   /* Midnight Navy */
  --anchor-deep:   #051A2E;
  --whisper:       #C8D8EC;
  --whisper-60:    #DCE6F3;
  --whisper-20:    #ECF2F8;
  --civic:         #4F719C;
  --civic-deep:    #3D5A7E;
  --signal:        #D84011;   /* Orangey-Red - the dot */
  --signal-deep:   #B83209;
  --signal-tint:   #FBE0D6;
  --highlight:     #F6FFB0;
  --ink:           #0A2C4A;
  --ink-soft:      #1F3E5C;
  --graphite:      #4F719C;
  --stone:         #8A9FB7;

  --font-display:  "Fraunces", "Source Serif Pro", "Georgia", serif;
  --font-sans:     "Rethink Sans", "Inter", "Helvetica Neue", system-ui, sans-serif;

  --fs-eyebrow:    13px;
  --fs-caption:    13px;
  --fs-body:       17px;

  --r-card:        10px;
  --r-tag:         999px;
  --r-button:      0;

  --sh-2: 0 2px 0 rgba(14,17,23,0.04), 0 12px 28px -8px rgba(14,17,23,0.12);

  --ease-out:   cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-inout: cubic-bezier(0.45, 0, 0.2, 1);
  --dur-base:   200ms;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: #111E30;
  color: var(--whisper-20);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
::selection { background: var(--signal); color: #fff; }

.reddot {
  color: var(--signal);
  display: inline-flex;
  gap: 0.02em;
  padding-left: 4px;
}
.reddot span {
  animation: ellipsisFade 2.4s var(--ease-inout) infinite;
  opacity: 0;
}
.reddot span:nth-child(2) {
  animation-delay: 0.28s;
}
.reddot span:nth-child(3) {
  animation-delay: 0.56s;
}
@keyframes ellipsisFade {
  0%, 72%, 100% { opacity: 0; }
  18%, 48% { opacity: 1; }
}

/* ----- Reusable animation blocks ----- */
.anim-fade-up,
.anim-fade-down,
.anim-soft-pop {
  animation-duration: 900ms;
  animation-fill-mode: both;
  animation-timing-function: var(--ease-out);
  opacity: 0;
  will-change: opacity, transform;
}
.anim-fade-up {
  animation-name: lhFadeUp;
}
.anim-fade-down {
  animation-name: lhFadeDown;
}
.anim-soft-pop {
  animation-name: lhSoftPop;
}
.anim-delay-1 { animation-delay: 120ms; }
.anim-delay-2 { animation-delay: 220ms; }
.anim-delay-3 { animation-delay: 340ms; }
.anim-delay-4 { animation-delay: 480ms; }
.anim-delay-5 { animation-delay: 620ms; }
.anim-delay-6 { animation-delay: 780ms; }

.anim-stagger > * {
  animation: lhFadeUp 760ms var(--ease-out) both;
  opacity: 0;
  will-change: opacity, transform;
}
.anim-stagger > *:nth-child(1) { animation-delay: 760ms; }
.anim-stagger > *:nth-child(2) { animation-delay: 880ms; }
.anim-stagger > *:nth-child(3) { animation-delay: 1000ms; }
.anim-stagger > *:nth-child(4) { animation-delay: 1120ms; }

.anim-line-draw {
  transform-origin: left center;
  animation: lhLineDraw 820ms var(--ease-out) both;
  will-change: transform, opacity;
}

@keyframes lhFadeUp {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes lhFadeDown {
  from {
    opacity: 0;
    transform: translate3d(0, -14px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes lhSoftPop {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes lhLineDraw {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* ----- Layout: 100vh page, three-block stack ----- */
.page {
  position: relative;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(24px, 4vh, 56px) clamp(24px, 5vw, 88px);
  overflow: hidden;
}

/* Official Lowick Hedry dark gradient - rendered in CSS so the
   page works without the asset file. */
.page::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 86% 54% at 92% 14%, rgba(54, 121, 210, 0.98) 0%, rgba(53, 122, 212, 0.82) 26%, rgba(31, 65, 109, 0.28) 52%, transparent 72%),
    radial-gradient(ellipse 78% 44% at 2% 94%, rgba(52, 117, 204, 0.92) 0%, rgba(52, 119, 208, 0.62) 34%, rgba(33, 71, 122, 0.24) 58%, transparent 78%),
    radial-gradient(ellipse 72% 58% at 12% 50%, rgba(33, 71, 122, 0.58) 0%, rgba(25, 51, 87, 0.36) 46%, transparent 72%),
    radial-gradient(ellipse 78% 64% at 90% 84%, rgba(19, 33, 51, 0.96) 0%, rgba(19, 37, 60, 0.74) 46%, transparent 74%),
    linear-gradient(158deg, #111E30 0%, #152640 22%, #193357 45%, #13253C 69%, #111E30 100%);
  z-index: 0;
  pointer-events: none;
}

/* Official Lowick Hedry light gradient - rendered in CSS. */
.lh-gradient-light {
  background:
    radial-gradient(ellipse 90% 70% at 85% 110%, rgba(216, 64, 17, 0.18), transparent 60%),
    radial-gradient(ellipse 80% 70% at 10% -10%, rgba(200, 216, 236, 0.85), transparent 55%),
    radial-gradient(ellipse 70% 60% at 100% 0%,  rgba(79, 113, 156, 0.22), transparent 60%),
    linear-gradient(135deg, #FAFAFA 0%, #ECF2F8 38%, #DCE6F3 70%, #C8D8EC 100%);
}

.page::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 50% at 50% 0%, rgba(17, 30, 48, 0.38) 0%, rgba(17, 30, 48, 0) 64%),
    linear-gradient(180deg, rgba(17, 30, 48, 0.08) 0%, rgba(17, 30, 48, 0) 34%, rgba(17, 30, 48, 0.44) 100%);
  z-index: 0;
  pointer-events: none;
}
.page > * { position: relative; z-index: 1; }

/* ----- Header ----- */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

/* Wordmark */
.wordmark {
  display: block;
  grid-column: 2;
  width: clamp(110px, 12vw, 140px);
  height: auto;
}

.companies {
  display: inline-flex;
  justify-self: center;
  align-items: center;
  gap: 16px;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.companies a {
  color: var(--whisper);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--whisper) 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--dur-base) var(--ease-out), text-decoration-color var(--dur-base) var(--ease-out);
}
.companies a:hover {
  color: var(--off-white);
  text-decoration-color: var(--signal);
}
.companies-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--signal);
}

.badge {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--whisper-60);
  border-radius: var(--r-tag);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--whisper-20);
}
.badge .pulse {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--highlight);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--highlight) 24%, transparent);
  animation: pulse 2.4s var(--ease-inout) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--highlight) 24%, transparent); }
  50%      { box-shadow: 0 0 0 9px color-mix(in oklab, var(--highlight) 10%, transparent); }
}

/* ----- Hero ----- */
.hero {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vh, 44px);
  padding: clamp(16px, 3vh, 40px) 0;
  text-align: center;
}

.hero-copy {
  display: flex;
  justify-content: center;
  width: 100%;
}

.eyebrow-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(16px, 2.4vh, 28px);
}
.eyebrow-row .rule {
  width: 56px;
  height: 1.5px;
  background: var(--signal);
  display: inline-block;
}
.eyebrow-row .label {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--whisper);
}

.headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--off-white);
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
  margin: 0;
  text-wrap: balance;
  max-width: 14ch;
}
.headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--whisper);
}
.headline .dot {
  display: inline-block;
  width: 0.16em;
  height: 0.16em;
  background: var(--signal);
  border-radius: 999px;
  vertical-align: 0.05em;
  margin-left: 0.04em;
  transform: translateY(-0.05em);
}

.tagline {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--whisper-60);
  margin: 0;
  text-wrap: balance;
}

.lede {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.55;
  color: var(--whisper-60);
  max-width: 46ch;
  margin: clamp(20px, 3.2vh, 36px) 0 0;
}
.lede strong { color: var(--off-white); font-weight: 600; }

/* ----- Contact card ----- */
.card {
  background: var(--whisper-20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--whisper-60);
  border-radius: var(--r-card);
  padding: clamp(24px, 3.6vh, 40px);
  box-shadow: var(--sh-2);
}
.card .eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--civic);
  display: inline-block;
  margin-bottom: 14px;
}
.card h3 {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.2vw, 32px);
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--anchor);
  margin: 0 0 22px;
  line-height: 1.18;
  font-variation-settings: "opsz" 144, "SOFT" 20;
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: start;
  gap: 14px;
}
.contact-item .icon {
  width: 36px;
  height: 36px;
  border-radius: 5px;
  background: var(--signal);
  border: 1px solid var(--whisper-60);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.contact-item .icon svg { width: 16px; height: 16px; }
.contact-item .label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--civic);
  margin: 2px 0 4px;
}
.contact-item .value {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.05vw, 16px);
  line-height: 1.4;
  color: var(--anchor);
  text-decoration: none;
  font-weight: 500;
  display: block;
}
.contact-item a.value {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--anchor) 25%, transparent);
  transition: text-decoration-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.contact-item a.value:hover {
  text-decoration-color: var(--signal);
  color: var(--anchor-deep);
}

/* ----- Footer ----- */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: clamp(12px, 2vh, 20px);
  border-top: 1px solid var(--whisper-60);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--whisper);
}
.footer-copy {
  display: flex;
  align-items: center;
  gap: 24px;
}
.footer .copy { letter-spacing: 0.02em; }
.footer a {
  color: var(--off-white);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--off-white) 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-base) var(--ease-out), text-decoration-color var(--dur-base) var(--ease-out);
}
.footer a:hover {
  color: var(--whisper-20);
  text-decoration-color: var(--signal);
}
.footer .merger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
}
.footer .merger .sep {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--whisper);
  opacity: 0.5;
}
.footer .merger .plus { color: var(--signal); font-weight: 700; }

/* ----- Responsive ----- */
@media (max-width: 920px) {
  body { overflow: auto; }
  .page {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 28px 22px 24px;
  }
  .hero {
    padding: 8px 0 0;
  }
  .headline { font-size: clamp(36px, 9vw, 56px); max-width: 18ch; }
  .tagline  { font-size: clamp(18px, 4.4vw, 22px); }
  .footer {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
  }
  .footer-copy {
    flex-direction: column;
    gap: 6px;
  }
}
@media (max-width: 480px) {
  .topbar {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 12px;
  }
  .wordmark { grid-column: 1; }
  .badge { font-size: 10px; padding: 6px 10px; }
  .badge .pulse { width: 7px; height: 7px; }
  .wordmark { width: 90px; }
  .card { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .badge .pulse { animation: none; }
  .reddot span { animation: none; opacity: 1; }
  .anim-fade-up,
  .anim-fade-down,
  .anim-soft-pop,
  .anim-stagger > *,
  .anim-line-draw {
    animation: none;
    opacity: 1;
    transform: none;
  }
}