/* Terrapin Solutions — terrapinsolutions.net
   Converted from the Claude Design component (Terrapin Homepage.dc.html).
   The authoring runtime (React + Babel via unpkg) is gone; every style that
   was an inline attribute or a computed template binding lives here. */

:root {
  --ground:      #1C2B26;
  --ground-deep: #121C19;
  --ground-dark: #0E1714;
  --ink:         #EDE6D8;
  --amber:       #C05621;
  --ink-72: rgba(237, 230, 216, 0.72);
  --ink-66: rgba(237, 230, 216, 0.66);
  --ink-62: rgba(237, 230, 216, 0.62);
  --ink-60: rgba(237, 230, 216, 0.60);
  --ink-40: rgba(237, 230, 216, 0.40);
  --rule:   rgba(237, 230, 216, 0.13);
  --rule-2: rgba(237, 230, 216, 0.16);
  --edge: clamp(20px, 5vw, 88px);
  --serif: 'Newsreader', Georgia, serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;
  --sans:  'IBM Plex Sans', system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--amber); color: var(--ink); }

a { color: var(--ink); text-underline-offset: 4px; text-decoration-color: rgba(237, 230, 216, 0.32); }
a:hover { color: var(--amber); text-decoration-color: var(--amber); }

input, textarea, button { font: inherit; color: inherit; }

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

/* ── reveal-on-scroll ─────────────────────────────────────────────── */
/* The JS adds .is-in once the element enters the viewport. If JS never
   runs, the .no-js rule below leaves everything visible — content must
   never depend on script to be readable. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.reveal.d1 { transition-delay: 60ms; }
.reveal.d2 { transition-delay: 120ms; }
.reveal.d3 { transition-delay: 180ms; }
.reveal.d4 { transition-delay: 200ms; }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── shared type ──────────────────────────────────────────────────── */
.kicker {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-66);
}
.kicker .n { color: var(--amber); }

.display {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.028em;
  text-wrap: pretty;
  margin: 0;
}

.section-head {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 4.1vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: pretty;
  margin: 0;
}

.body-copy { font-size: 18.5px; line-height: 1.6; color: var(--ink-66); }

/* ── header ───────────────────────────────────────────────────────── */
.site-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px var(--edge);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-name {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 38px);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.site-nav a { color: var(--ink-66); text-decoration: none; transition: color .3s; }
.site-nav a:hover { color: var(--ink); }

/* ── hero ─────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding: clamp(40px, 8vh, 110px) 0 clamp(60px, 10vh, 130px);
}
/* was heroArtStyle, computed from React `narrow` state — now a media query */
.hero-art { position: absolute; top: 0; right: 0; width: 56%; height: 100%; pointer-events: auto; }
.hero-grid {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  padding: 0 var(--edge);
  pointer-events: none;
}
.hero-col { grid-column: 1 / span 7; pointer-events: auto; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: calc(-1 * var(--edge));
  padding-left: var(--edge);
}
.eyebrow .dash {
  display: block;
  width: var(--edge);
  height: 1px;
  background: var(--ink-40);
  margin-left: calc(-1 * var(--edge));
}
.hero h1 {
  margin: 26px 0 0;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 0.95;
  max-width: 14ch;
}
.hero .lede {
  margin: 34px 0 0;
  max-width: 46ch;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-72);
}
.hero-actions {
  margin: 44px 0 0;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.hero-note {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-66);
}

.btn-cta {
  display: inline-block;
  padding: 19px 38px;
  border: 1px solid var(--amber);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background .4s var(--ease), color .4s;
  will-change: transform;
}
.btn-cta:hover { background: var(--amber); color: var(--ink); }

/* ── section shells ───────────────────────────────────────────────── */
.slab {
  position: relative;
  padding: clamp(90px, 16vh, 190px) var(--edge) clamp(80px, 14vh, 160px);
  background: var(--ground-deep);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.slab-dark {
  position: relative;
  padding: clamp(84px, 14vh, 180px) var(--edge) clamp(84px, 14vh, 170px);
  background: var(--ground-dark);
  box-shadow: inset 0 1px 0 rgba(237, 230, 216, 0.08);
  overflow: hidden;
}
.tick { position: absolute; top: 0; left: var(--edge); width: 74px; height: 1px; background: var(--amber); }

.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.col-label { grid-column: 1 / span 2; margin: 10px 0 0; }

/* ── card rows (approach steps, why points) ───────────────────────── */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(24px, 4vw, 56px);
}
.card { border-top: 1px solid var(--rule-2); padding-top: 22px; }
.card-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; color: var(--amber); }
.card-mark { display: block; width: 26px; height: 1px; background: var(--amber); }
.card-title {
  margin-top: 14px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 25px;
  letter-spacing: -0.01em;
}
.card p { margin: 10px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--ink-60); max-width: 30ch; }

/* ── contact ──────────────────────────────────────────────────────── */
.contact {
  position: relative;
  border-top: 1px solid var(--rule);
  padding: clamp(90px, 16vh, 190px) var(--edge) clamp(70px, 10vh, 120px);
}
.contact-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 4vw, 64px); }
.contact-copy { grid-column: 1 / span 5; }
.contact-copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.028em;
  max-width: 12ch;
}
.contact-copy p { margin: 28px 0 0; max-width: 38ch; font-size: 18.5px; line-height: 1.6; color: var(--ink-66); }

.contact-form { grid-column: 7 / span 6; display: grid; gap: 34px; }
.field { display: grid; gap: 9px; }
.field label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-66);
}
.field input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(237, 230, 216, 0.24);
  padding: 10px 0;
  font-size: 18px;
  color: var(--ink);
  transition: border-color .3s;
}
.field input:hover { border-bottom-color: rgba(237, 230, 216, 0.44); }
.field input:focus-visible { outline: 2px solid var(--amber); outline-offset: 6px; }

.form-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.btn-send {
  padding: 19px 38px;
  background: transparent;
  border: 1px solid var(--ink-40);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .35s, background .35s, opacity .35s;
}
.btn-send:hover { border-color: var(--ink); background: rgba(237, 230, 216, 0.06); }
.btn-send[disabled] { opacity: 0.5; cursor: default; }
.form-note { font-size: 14.5px; color: var(--ink-66); }
.form-note[data-state="error"] { color: #E8A87C; }
.form-note[data-state="ok"]    { color: var(--ink); }

/* ── footer ───────────────────────────────────────────────────────── */
.site-footer {
  padding: 44px var(--edge) 54px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 28px 64px;
  align-items: flex-start;
  justify-content: space-between;
  font-size: 15px;
  color: var(--ink-66);
}
.site-footer > div { display: flex; flex-direction: column; gap: 6px; }
.footer-brand {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(237, 230, 216, 0.7);
}
.footer-muted { color: var(--ink-40); }

/* ── responsive ───────────────────────────────────────────────────── */
/* The original collapsed only the hero art, via a JS `narrow` flag at
   900px. The 12-column grids had no breakpoint at all and crushed on a
   phone; they get real ones here. */
@media (max-width: 900px) {
  .hero-art { inset: 0; top: auto; right: auto; width: auto; height: auto; opacity: 0.34; pointer-events: none; }
  .hero-col { grid-column: 1 / span 12; }
  .hero h1 { max-width: 100%; }
}

@media (max-width: 820px) {
  .grid12, .contact-grid { grid-template-columns: 1fr; gap: 20px; }
  .grid12 > *, .contact-grid > * { grid-column: 1 / -1 !important; }
  .col-label { margin: 0; }
  .contact-copy h2 { max-width: 100%; }
  .contact-form { margin-top: 20px; }
  .approach-figure { justify-content: flex-start !important; margin-top: 8px !important; }
}

@media (max-width: 560px) {
  .site-nav { gap: 16px; font-size: 10.5px; }
  .hero { min-height: 0; padding-top: 24px; }
  .card p { max-width: 100%; }
}

@media (max-width: 420px) {
  .site-nav a:not(:last-child) { display: none; }
}