@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&family=Nunito+Sans:opsz,wght@6..12,400;6..12,500;6..12,600;6..12,700&display=swap');

/* ==========================================================================
   Design tokens — mirrored from the Bareli design system
   ========================================================================== */

:root {
  /* Colour */
  --color-cream-soft: #faf8f4;
  --color-cream: #f3efe7;
  --color-paper: #ede8de;
  --color-line: #dad3c5;
  --color-line-strong: #c3b9a6;
  --color-white: #ffffff;
  --color-ink: #2c2a25;
  --color-ink-soft: #57534a;
  --color-slate-700: #3f5568;
  --color-slate-600: #4c6478;
  --color-slate-500: #5f7688;
  --color-slate-400: #7c93a3;
  --color-slate-200: #c7d5dd;
  --color-powder-300: #b7cbda;
  --color-powder-200: #d7e3ea;
  --color-powder-100: #eef3f6;
  --color-gold-600: #a5813a;
  --color-gold-400: #c9a659;
  --color-gold-200: #e8d9b0;
  --color-success: #7a9179;
  --color-error: #b4645a;

  /* Page-specific colours used by the Coming Soon design */
  --color-brand-blue: #768c9e;   /* footer + primary button */
  --color-marquee-bg: #d6e3ee;   /* ticker band */
  --color-photo-mat: #e9e6df;    /* hero photo mat */

  --surface-page: var(--color-cream-soft);
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-ink-soft);
  --text-heading: var(--color-slate-600);
  --text-muted: var(--color-slate-400);
  --border-default: var(--color-line);
  --accent-primary: var(--color-slate-600);

  /* Typography */
  --font-display: 'Jost', sans-serif;
  --font-body: 'Nunito Sans', sans-serif;
  --tracking-label: 0.14em;
  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --container-max: 1280px;

  /* Effects */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-md: 0 4px 16px rgba(44, 42, 37, 0.1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;

  /* Marquee (mirrors the design's `marqueeSeconds` / `marqueeDirection` props) */
  --marquee-seconds: 32s;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--surface-page);
  font-family: var(--font-body);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

a:hover {
  opacity: 0.7;
}

:focus-visible {
  outline: 2px solid var(--color-slate-600);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Content is capped at the design's 1280px frame and centred, so it does not
   stretch apart on wide screens. Applied to the inner blocks rather than the
   sections themselves so the marquee and footer backgrounds still run the full
   width of the viewport. */
.hero,
.features,
.story,
.site-footer__top,
.site-footer__legal {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}

.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;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--color-slate-600);
  color: var(--color-cream-soft);
  font-family: var(--font-display);
  font-size: 14px;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  text-align: center;
  padding: 24px 20px 20px;
}

/* width: auto is required — the img width/height attributes otherwise set the
   CSS width and stretch the wordmark. The attributes stay for the aspect ratio,
   which keeps the header from shifting while the SVG loads. */
.site-header__logo {
  height: 26px;
  width: auto;
  display: inline-block;
}

/* ==========================================================================
   Marquee
   ========================================================================== */

.marquee {
  background: var(--color-marquee-bg);
  overflow: hidden;
  padding: 14px 0;
}

.marquee__track {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
  animation: marquee-right var(--marquee-seconds) linear infinite;
}

.marquee__group {
  display: inline-flex;
  align-items: center;
}

.marquee__item,
.marquee__sep {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--color-ink-soft);
}

.marquee__item {
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 0 18px;
}

.marquee__sep {
  opacity: 0.4;
}

@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 40px 24px 48px;
}

.hero__media {
  background: var(--color-photo-mat);
  border-radius: 22px;
  overflow: hidden;
}

/* The hero artwork is a square moodboard collage, so the slot is square —
   the design's original portrait crop would have cut the Pantone chip off the
   left and the sketches off the right. */
.hero__image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 22px;
}

/* Applied by script.js when assets/photos/hero.jpg is missing: the hero falls
   back to a centred text block instead of an empty panel. */
.hero--no-media {
  justify-content: center;
}

.hero--no-media .hero__body {
  max-width: 620px;
  margin: 0 auto;
}

.hero__body {
  text-align: center;
}

.eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: var(--lh-snug);
  letter-spacing: 0.01em;
  color: var(--text-heading);
}

.hero__tagline {
  margin: 0 0 30px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--color-ink-soft);
}

/* ==========================================================================
   Signup form
   ========================================================================== */

.signup {
  max-width: 500px;
  margin: 0 auto;
}

.signup__input {
  width: 100%;
  border: 1px solid var(--color-slate-400);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  background: transparent;
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.signup__input::placeholder {
  color: var(--color-slate-400);
}

.signup__input:focus {
  outline: none;
  border-color: var(--color-slate-600);
  box-shadow: 0 0 0 3px rgba(118, 140, 158, 0.18);
}

.signup__input[aria-invalid='true'] {
  border-color: var(--color-error);
}

.signup__blurb {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: var(--lh-normal);
  color: var(--color-slate-600);
}

.signup__button {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 16px;
  background: var(--color-brand-blue);
  color: var(--color-cream-soft);
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard);
}

.signup__button:hover {
  background: var(--color-slate-500);
}

.signup__button:disabled {
  opacity: 0.6;
  cursor: default;
}

.signup__message {
  margin: 12px 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: var(--lh-normal);
  min-height: 1em;
}

.signup__message[data-state='error'] {
  color: var(--color-error);
}

.signup__message[data-state='success'] {
  color: var(--color-success);
}

/* ==========================================================================
   Feature pills
   ========================================================================== */

.features {
  padding: 0 24px 40px;
}

.features__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border: 1px solid var(--color-slate-400);
  border-radius: var(--radius-pill);
}

.pill i {
  font-size: 19px;
  color: var(--color-slate-500);
}

.pill span {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-heading);
  white-space: nowrap;
}

/* ==========================================================================
   Founder story
   ========================================================================== */

.story {
  display: flex;
  flex-direction: column;
  padding: 0 24px 48px;
  text-align: center;
}

.story__media {
  margin-bottom: 28px;
}

.story__image {
  display: block;
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 20px;
  background: var(--color-photo-mat);
}

.story__title {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: var(--lh-snug);
  color: var(--text-heading);
}

.story__text p {
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-heading);
}

.story__signature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
}

.story__headshot {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-photo-mat);
}

.story__signature p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--color-slate-500);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--color-brand-blue);
  color: var(--color-cream-soft);
  padding: 44px 24px 28px;
}

.site-footer__logo {
  height: 24px;
  width: auto;
  display: block;
  margin-bottom: 16px;
}

.site-footer__blurb {
  margin: 0 0 28px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-powder-100);
}

.site-footer__heading {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-powder-100);
  margin-bottom: 14px;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
  margin-bottom: 28px;
}

.site-footer__col:last-child .site-footer__links {
  margin-bottom: 0;
}

.site-footer__links a {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-footer__links i {
  font-size: 18px;
}

.site-footer__legal {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(250, 248, 244, 0.15);
  font-size: 12px;
  color: var(--color-powder-100);
}

/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 900px) {
  .site-header {
    padding: 30px 44px 26px;
  }

  .site-header__logo {
    height: 30px;
  }

  .marquee {
    padding: 16px 0;
  }

  .marquee__item,
  .marquee__sep {
    font-size: 15px;
  }

  .marquee__item {
    padding: 0 22px;
  }

  /* Hero — two columns */
  .hero {
    flex-direction: row;
    align-items: center;
    gap: 64px;
    padding: 72px 56px 80px;
  }

  .hero__media {
    flex: 0 0 520px;
    border-radius: 28px;
  }

  .hero__image {
    border-radius: 28px;
  }

  .hero__body {
    flex: 1;
    padding: 0 20px;
  }

  .eyebrow {
    margin-bottom: 18px;
    font-size: 13px;
  }

  .hero__title {
    margin-bottom: 22px;
    font-size: 42px;
    line-height: 1.25;
  }

  .hero__tagline {
    margin-bottom: 40px;
    font-size: 19px;
  }

  .signup__input {
    padding: 18px 22px;
    margin-bottom: 16px;
    font-size: 15px;
  }

  .signup__blurb {
    font-size: 14px;
  }

  .signup__button {
    padding: 18px;
    font-size: 15px;
  }

  /* Features */
  .features {
    padding: 0 56px 72px;
  }

  .features__list {
    gap: 18px;
    /* Wide enough to keep all four pills on one row — the set measures ~1009px
       with "Implant-grade titanium". */
    max-width: 1060px;
    margin: 0 auto;
  }

  .pill {
    gap: 12px;
    padding: 16px 30px;
  }

  .pill i {
    font-size: 24px;
  }

  .pill span {
    font-size: 13px;
    letter-spacing: 0.2em;
  }

  /* Story — two columns, photo on the right. Reversing here rather than in the
     markup keeps the photo above the text when the layout stacks on mobile. */
  .story {
    flex-direction: row-reverse;
    align-items: center;
    gap: 64px;
    padding: 8px 56px 96px;
    text-align: left;
  }

  .story__media {
    flex: 0 0 460px;
    margin-bottom: 0;
  }

  .story__image {
    height: 560px;
    border-radius: 24px;
  }

  .story__body {
    flex: 1;
  }

  .eyebrow--story {
    margin-bottom: 20px;
  }

  .story__title {
    margin-bottom: 24px;
    font-size: 34px;
  }

  .story__text p {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.85;
  }

  .story__signature {
    justify-content: flex-start;
    gap: 16px;
    margin-top: 28px;
  }

  .story__headshot {
    width: 70px;
    height: 70px;
    flex: 0 0 70px;
  }

  .story__signature p {
    font-size: 15px;
  }

  /* Footer */
  .site-footer {
    padding: 64px 56px 40px;
  }

  .site-footer__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 56px;
    flex-wrap: wrap;
  }

  .site-footer__col--brand {
    max-width: 280px;
  }

  .site-footer__logo {
    height: 26px;
    margin-bottom: 18px;
  }

  .site-footer__blurb {
    margin-bottom: 0;
  }

  .site-footer__heading {
    margin-bottom: 16px;
  }

  .site-footer__links {
    margin-bottom: 0;
  }

  .site-footer__legal {
    margin-top: 48px;
    padding-top: 24px;
  }
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
    transform: translateX(-50%);
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}