/* ==========================================================================
   Caytana Labs — site stylesheet
   --------------------------------------------------------------------------
   The page markup carries the design's inline styles verbatim from the
   approved 1440px artboards. This file supplies only what inline styles
   cannot: base rules, interaction states, and the responsive layer.
   Overrides below 1440px need !important precisely because the desktop
   design lives in inline style attributes — that is deliberate, not sloppy.
   ========================================================================== */

:root {
  --ink: #050B1A;
  --ink-raised: #0E1B33;
  --mint: #4EF0C8;
  --blue: #3B6DFF;
  --blue-soft: #C5D5FF;
  --text-1: #A7B8D2;
  --text-2: #8FA3C0;
  --text-3: #93A6C4;
  --text-4: #5C6E8C;
  --rule: #16233D;
  --rule-raised: #24365A;
  --flag: #FF7A5C;
  --flag-border: #4A2A28;
}

/* --------------------------------------------------------------- base --- */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  font-family: Archivo, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { opacity: .8; }
img { max-width: 100%; }

/* Focus rings: 2px mint at 2px offset. Mint on ink passes AA comfortably. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

/* ------------------------------------------------------- interactions --- */
/* 150–200ms ease-out only. The design's tone is fast and matter-of-fact. */

.row-index { transition: background 150ms ease-out; }
.row-index:hover { background: var(--ink-raised); }
/* rows on an ink-raised section invert — the artboard records the target
   colour in style-hover, so the selector reads it rather than duplicating it */
.row-index[style-hover*="050B1A"]:hover { background: var(--ink); }
.row-arrow { display: inline-block; transition: transform 150ms ease-out; }
.row-index:hover .row-arrow { transform: translateX(4px); }

.btn, .btn-cta, .btn-submit { transition: opacity 150ms ease-out; }
.btn-submit:disabled { opacity: .5; cursor: default; }

input, textarea { transition: border-color 150ms ease-out; }
input:focus, textarea:focus { border-color: var(--mint) !important; }
input::placeholder, textarea::placeholder { color: var(--text-4); }

/* field error state */
.field.error input,
.field.error textarea { border-color: var(--flag) !important; }
.field-error {
  font: 500 11px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .06em;
  color: var(--flag);
  margin-top: 2px;
}

/* form success block: mint rule, per the handoff */
.form-success {
  border-top: 2px solid var(--mint);
  padding-top: 24px;
}
.form-success p {
  font: 700 22px/1.35 Archivo, sans-serif;
  letter-spacing: -.015em;
  color: #fff;
  margin: 0 0 10px;
}
.form-success span {
  font: 400 15px/1.6 Archivo, sans-serif;
  color: var(--text-2);
}

/* marquee — defined here because the site drops the artboard's <helmet> */
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------------------------------------------------------- sticky nav --- */
/* The hero is also ink, so the bar carries its background from the start
   rather than fading one in at 80px; the hairline is what separates it. */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
}

.nav-toggle { display: none; }

/* ------------------------------------------------------------- mobile --- */
/* Two tiers below the 1440 design width: 1024–1439 keeps the designed
   grid and scales the type; below 1024 goes single-column. */

/* the fixed-width guard never applies once the responsive layer is in play */
.page > div { min-width: 0 !important; }

/* --- 1024–1439: the design, scaled -------------------------------------
   Laptop windows and embedded preview panes land here. The grid structure
   holds exactly as designed; only the display type and the gutters step
   down, per the handoff's own recommendation for this tier. */

@media (min-width: 1024px) and (max-width: 1439px) {
  .section, .footer, .nav { padding-left: 32px !important; padding-right: 32px !important; }
  .section { padding-top: 88px !important; padding-bottom: 88px !important; }
  .hero { padding-top: 88px !important; }
  .quote-band { padding-top: 84px !important; padding-bottom: 84px !important; }

  .h1-hero { font-size: 96px !important; }
  .h1 { font-size: 72px !important; }
  .h2, .h2-contact { font-size: 52px !important; }
  .h3 { font-size: 24px !important; }
  .row-title { font-size: 28px !important; }
  .metric { font-size: 72px !important; }
  .quote { font-size: 36px !important; }

  .hero-grid { grid-template-columns: 1fr 400px !important; gap: 48px !important; }
  .cta-grid { grid-template-columns: 1fr 400px !important; gap: 48px !important; }
  .contact-grid { grid-template-columns: 1fr 460px !important; gap: 56px !important; }
  .split-grid { grid-template-columns: 300px 1fr !important; gap: 48px !important; }
  .row-index { grid-template-columns: 60px 1fr 1fr 32px !important; gap: 28px !important; }
  .row-split { grid-template-columns: 120px 1fr !important; gap: 28px !important; }
  .row-meta { grid-template-columns: 180px 1fr !important; gap: 28px !important; }
  .card { padding: 36px 28px !important; }

  .nav-links { gap: 24px !important; }
  .footer-cols { gap: 48px !important; }
  .ghost { font-size: 150px !important; bottom: -34px !important; }
}

/* --- below 1024: the phone layout -------------------------------------- */

@media (max-width: 1023px) {

  /* gutters and vertical rhythm */
  .section,
  .footer {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .section {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .hero { padding-top: 56px !important; padding-bottom: 0 !important; }
  .footer { padding-top: 48px !important; padding-bottom: 48px !important; }
  .quote-band { padding-top: 64px !important; padding-bottom: 64px !important; }

  /* nav collapses to wordmark + toggle; the CTA stays visible in the sheet */
  .nav {
    flex-wrap: wrap;
    height: auto !important;
    min-height: 64px;
    padding: 0 20px !important;
    align-items: center;
  }
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 0;
    margin-left: auto;
    background: none;
    border: 0;
    cursor: pointer;
    order: 2;
  }
  .nav-toggle span {
    display: block;
    height: 1px;
    width: 22px;
    background: #fff;
    transition: transform 150ms ease-out;
  }
  .nav.open .nav-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav.open .nav-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .nav-links {
    display: none !important;
    order: 3;
    width: 100%;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 8px 0 20px;
  }
  .nav.open .nav-links { display: flex !important; }
  .nav-links > a {
    padding: 16px 0;
    border-top: 1px solid var(--rule);
    font-size: 16px;
  }
  .btn-cta {
    justify-content: center;
    margin-top: 16px;
    border-top: 0 !important;
    padding: 18px 22px !important;
  }

  /* every two-column grid stacks */
  .hero-grid,
  .split-grid,
  .cta-grid,
  .contact-grid,
  .prose-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .card-grid { grid-template-columns: 1fr !important; }
  .card { min-height: 0 !important; padding: 32px 24px !important; }
  .cta-buttons { width: 100%; }
  .btn { padding: 20px 24px !important; }

  /* index rows: numeral and arrow columns drop, title over description */
  .row-index {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 24px 0 !important;
  }
  .row-n, .row-arrow { display: none !important; }

  /* label/value and phase rows stack */
  .row-split { grid-template-columns: 1fr !important; gap: 10px !important; padding: 24px 0 !important; }
  .row-meta { grid-template-columns: 1fr !important; gap: 4px !important; }

  /* display type */
  .h1-hero { font-size: 52px !important; line-height: .95 !important; }
  .h1 { font-size: 46px !important; line-height: .95 !important; }
  .h2, .h2-contact { font-size: 34px !important; line-height: 1.02 !important; }
  .h3 { font-size: 22px !important; }
  .row-title { font-size: 24px !important; }
  .metric { font-size: 56px !important; }
  .quote { font-size: 26px !important; line-height: 1.25 !important; }
  .sub { font-size: 18px !important; max-width: none !important; }
  .section-head {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 16px;
  }

  /* the ghost wordmark is a texture, not a headline */
  .ghost { font-size: 88px !important; bottom: -18px !important; }

  /* the hero grid lines get busy at phone scale */
  .hero { background-size: 64px 64px !important; }

  .footer {
    flex-direction: column;
    gap: 32px !important;
  }
  .footer-cols { flex-wrap: wrap; gap: 32px 48px !important; }
}

@media (max-width: 767px) {
  .section, .footer, .nav { padding-left: 20px !important; padding-right: 20px !important; }
  .form { grid-template-columns: 1fr !important; }
  .h1-hero { font-size: 44px !important; }
  .h1 { font-size: 40px !important; }
  .h2, .h2-contact { font-size: 30px !important; }
  .quote { font-size: 23px !important; }
  .metric { font-size: 48px !important; }
  .card { padding: 28px 20px !important; }
}

/* Touch targets never below 44px on the phone layout. */
@media (max-width: 1023px) and (pointer: coarse) {
  .nav-links > a, .footer-col a { min-height: 44px; display: flex; align-items: center; }
}

/* ---------------------------------------------------- reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none !important; }
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}