/* ============================================================
   Ovid Software Solutions — landing page
   Palette (contrast-checked against #161110):
     text     #e9e2d9  14.6:1
     muted    #a89c8e   7.0:1
     link     #d4694f   5.3:1 (AA) — small accents & links
     deep red #8b1e2d   large decorative elements ONLY
   ============================================================ */

:root {
  --bg: #161110;
  --bg-raised: #1d1613;
  --text: #e9e2d9;
  --muted: #a89c8e;
  --text-warm: #d9c8b4;   /* tagline — warmer than body, ~11:1 on bg */
  --accent: #d4694f;      /* terracotta — links, small accents */
  --red-deep: #8b1e2d;    /* large elements only */
  --hairline: #3a2d28;
  --red-numeral: #b8303f; /* step numerals — 3.15:1, clears 3:1 large-text floor */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --container: 62rem;
}

/* ---------- Reset & base ---------- */

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

/* Mandatory snap integrates with trackpad deceleration (no settle-then-jump).
   Guards: snap off below 480px (sections release their forced height there)
   and off in the >=1800px tall-viewport regime (capped sections can't fill
   the snapport). Everywhere between, sections are min-height 100svh, so they
   either fit exactly or exceed the snapport — where the CSS snap spec allows
   free scrolling within the section, so mandatory can never trap.
   No scroll-behavior here: smooth anchor scrolling is handled in script.js
   so it can't add a second easing on top of snap corrections. */
html {
  scroll-snap-type: y mandatory;
  color-scheme: dark;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

::selection { background: var(--red-deep); color: var(--text); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/* ---------- Sections & snap ---------- */

section {
  scroll-snap-align: start;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-block: clamp(4rem, 10vh, 7rem);
}

/* Safe vertical centering: auto margins collapse to zero when content
   is taller than the viewport, so nothing can ever clip off the top. */
section > .container,
.hero-inner {
  margin-block: auto;
}

/* ---------- Section 1 · Hero ---------- */

.hero {
  position: relative;
  align-items: center;
  text-align: center;
  /* subtle warm glow — large element, deep red family allowed */
  background:
    radial-gradient(ellipse 70% 45% at 50% 108%, rgba(139, 30, 45, 0.16), transparent 70%),
    var(--bg);
}

.hero-inner { padding-inline: 1.25rem; }

.hero-eyebrow {
  font-size: 0.8125rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(4.5rem, 14vw, 8.5rem);
  line-height: 1;
  letter-spacing: 0.01em;
  margin-top: 1.25rem;
}

.wordmark-sub {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 2.6vw, 1.25rem);
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--text);
  margin-top: 1rem;
  /* optically re-centre letterspaced text */
  padding-left: 0.42em;
}

.hero-rule {
  width: 5.5rem;
  height: 2px;
  background: var(--red-deep);
  margin: 2.25rem auto;
}

.hero-tagline {
  max-width: clamp(30ch, 38vw, 40ch);
  margin-inline: auto;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 3vw, 2rem);
  line-height: 1.45;
  letter-spacing: 0.005em;
  color: var(--text-warm);
  text-wrap: balance;
}

/* Scroll cue */

/* Centred WITHOUT transform: this element also carries `.anim`, whose
   `rise-in` keyframes set `transform: translateY(...)`. A keyframe transform
   replaces the whole property, so a `translateX(-50%)` here would be
   discarded for the life of the animation (fill-mode: both = forever) and
   the cue would sit half its own width to the right. Auto margins between
   left:0/right:0 with a shrink-to-fit width can't be clobbered by animation. */
.scroll-cue {
  position: absolute;
  bottom: 1.75rem;
  left: 0;
  right: 0;
  width: fit-content;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
}
.scroll-cue:hover { text-decoration: none; color: var(--accent); }

.scroll-cue-label {
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  /* trailing tracking after the last glyph shifts the optical centre left */
  padding-left: 0.28em;
  text-transform: uppercase;
}

.scroll-cue-line {
  width: 1px;
  height: 2.5rem;
  background: linear-gradient(var(--muted), transparent);
  animation: cue-drift 2.4s ease-in-out infinite;
}

@keyframes cue-drift {
  0%, 100% { transform: translateY(0); opacity: 0.9; }
  50%      { transform: translateY(0.4rem); opacity: 0.45; }
}

/* Hero entrance — everything readable well within 1.5s */

.anim {
  animation: rise-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.anim-1 { animation-delay: 0.05s; }
.anim-2 { animation-delay: 0.18s; }
.anim-3 { animation-delay: 0.32s; }
.anim-4 { animation-delay: 0.45s; }
.anim-5 { animation-delay: 0.7s; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Shared section furniture ---------- */

.section-head { margin-bottom: clamp(2.5rem, 6vh, 4rem); }

.eyebrow {
  font-size: 0.8125rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.section h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: 0.005em;
  max-width: 24ch;
  text-wrap: balance;
}

.section-note {
  color: var(--muted);
  margin-top: 1rem;
  max-width: 48ch;
}

/* ---------- Section 2 · How we work ---------- */

.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
}

.step {
  border-top: 1px solid var(--hairline);
  padding-top: 1.5rem;
}

.step-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(4rem, 7vw, 5.5rem);
  line-height: 1;
  color: var(--red-numeral);
  margin-bottom: 0.75rem;
}

.step h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.375rem;
  margin-bottom: 0.6rem;
}

.step p { color: var(--muted); font-size: 1rem; }

/* ---------- Section 3 · What we build ---------- */

.work-list { list-style: none; }

.work-item {
  display: grid;
  grid-template-columns: 2rem minmax(12rem, 16rem) 1fr;
  gap: 0.65rem clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
  padding-block: clamp(1.5rem, 3vh, 2rem);
  border-top: 1px solid var(--hairline);
}
.work-list .work-item:last-child { border-bottom: 1px solid var(--hairline); }

.work-item h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3125rem;
  line-height: 1.3;
}

.work-item p { color: var(--muted); font-size: 1rem; max-width: 58ch; }

.work-icon {
  display: block;
  width: 32px;
  height: 32px;
  color: var(--accent);
  margin-top: -2px; /* optical alignment with the h3 cap height */
  flex-shrink: 0;
}

/* ---------- Section 4 · Contact + footer ---------- */

.contact {
  gap: clamp(2rem, 5vh, 4rem);
}

/* Bottom-anchor the contact block: one top auto-margin takes all free
   space, so founder line -> footer rule is only ever the fixed gap.
   (Overrides the generic `section > .container { margin-block: auto }`.) */
.contact > .container {
  margin-block: auto 0;
}

.contact {
  padding-bottom: 0;
  background:
    radial-gradient(ellipse 70% 40% at 50% -10%, rgba(139, 30, 45, 0.1), transparent 70%),
    var(--bg);
}

.contact-copy {
  color: var(--muted);
  max-width: 44ch;
  margin-bottom: 2rem;
}

.contact-email {
  margin-bottom: clamp(2.5rem, 6vh, 3.5rem);
}

.contact-email a {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4.6vw, 2.4rem);
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: rgba(212, 105, 79, 0.35);
  transition: text-decoration-color 0.2s ease;
}
.contact-email a:hover,
.contact-email a:focus-visible {
  text-decoration-color: var(--accent);
}

.founder {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--muted);
  font-size: 0.9375rem;
  border-top: 1px solid var(--hairline);
  padding-top: 1.5rem;
  max-width: 34rem;
}

.founder-photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(55%) brightness(0.85) contrast(1.05);
  box-shadow: inset 0 0 0 1px rgba(233, 226, 217, 0.14);
  flex-shrink: 0;
}

/* Footer shares the contact snap area */

.site-footer {
  border-top: 1px solid var(--hairline);
  padding-block: 1.75rem;
}

.site-footer p {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.6;
  opacity: 0.85;
  max-width: 68ch;
}
.site-footer p + p { margin-top: 0.5rem; }

/* ---------- Scroll reveals (JS-enhanced only) ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 2.25rem; }
  .step-num { font-size: 3.25rem; }
  .work-item { grid-template-columns: 1fr; gap: 0.35rem; }
  .work-icon { margin-top: 0; margin-bottom: 0.5rem; }
}

@media (max-width: 480px) {
  html { scroll-snap-type: none; }     /* sections release height — no snap targets */
  section { min-height: auto; }        /* never clip tall content on small phones */
  .hero { min-height: 100svh; }
  .wordmark-sub { letter-spacing: 0.3em; padding-left: 0.3em; }
}

@media (min-width: 1200px) {
  :root { --container: 68rem; }
}

@media (min-width: 1800px) {
  :root { --container: 74rem; }
  body { font-size: 1.125rem; }
  section { min-height: min(100svh, 60rem); }
  .hero { min-height: 100svh; } /* full-screen opening view; scroll cue stays at the true bottom */
  .wordmark { font-size: clamp(8.5rem, 7vw, 12rem); }
  .section h2 { font-size: clamp(2.75rem, 3vw, 3.5rem); }
  .step p, .work-item p { font-size: 1.0625rem; }
}

/* When capped 60rem sections cannot fill a taller viewport, snap points
   would straddle two sections — turn snap off there. Below 60rem viewport
   height the cap is inert (min() picks 100svh), so snap stays cleanly
   aligned on laptops. */
@media (min-width: 1800px) and (min-height: 60rem) {
  html { scroll-snap-type: none; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .anim { animation: none; }
  .scroll-cue-line { animation: none; }
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}