/* Causeway Labs — static, dependency-free.
   Accent is the logo's own teal; Relay's blue is deliberately not used here. */

:root {
  --ink:        #10151f;
  --ink-2:      #3d4757;
  --ink-3:      #6b7688;
  --surface:    #ffffff;
  --surface-2:  #f5f8f9;
  --line:       #d9e3e6;

  /* Sampled from the logo mark: #01b4b2. Darkened to carry 4.5:1 on white. */
  --accent:     #08807e;
  --accent-ink: #066360;
  --accent-wash:#e6f6f6;
  /* Lifted for dark grounds, same hue — the brand teal is too dark on navy. */
  --accent-on-dark: #4fd6d2;

  --night:      #0f1c2b;
  --night-2:    #17293c;
  --night-ink:  #a3b6c4;

  --radius: 14px;
  --radius-sm: 8px;
  --maxw: 1080px;
  --pad: clamp(20px, 5vw, 40px);
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: clip; }
img, svg { max-width: 100%; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4.8vw, 3.3rem); font-weight: 780; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.25rem); font-weight: 720; }
h3 { font-size: 1.12rem; font-weight: 680; }
p  { margin: 0 0 1em; }
a  { color: var(--accent); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
.section { padding-block: clamp(54px, 8vw, 96px); }
.section--tint { background: var(--surface-2); border-block: 1px solid var(--line); }
.section--dark { background: var(--night); color: #fff; }
.section--dark h2 { color: #fff; }
.section--dark .lede { color: #c3d3de; }

.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .9em;
}
.hero .eyebrow { color: var(--accent-on-dark); }
.lede { font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--ink-2); max-width: 64ch; }
.small { font-size: .9rem; }
.mt-l { margin-top: 34px; }
.mt-m { margin-top: 22px; }

/* ---------- header ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; gap: 28px; height: 70px; }
.nav__brand {
  margin-right: auto; display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex: 0 0 auto;
}
.brandMark { height: 34px; width: auto; display: block; }
.brandName { font-weight: 720; letter-spacing: -.01em; color: var(--ink); font-size: 1.02rem; text-transformation: uppercase; }
.nav__links { display: flex; gap: 24px; }
.nav__links a { color: var(--ink-2); text-decoration: none; font-size: .93rem; font-weight: 550; }
.nav__links a:hover { color: var(--accent); }
@media (max-width: 840px) { .nav__links { display: none; } }
@media (max-width: 420px) { .brandName { display: none; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px; font-weight: 640; font-size: .95rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, background .12s ease;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-ink); transform: translateY(-1px); }
.btn--ghost { border-color: rgba(255,255,255,.3); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.08); }

/* ---------- hero ---------- */
.hero {
  background:
    radial-gradient(900px 460px at 82% -10%, rgba(1,180,178,.26), transparent 62%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
  color: #fff;
}
.hero__inner {
  padding-block: clamp(60px, 9vw, 104px);
  display: grid; gap: 44px; grid-template-columns: 1.15fr .85fr; align-items: center;
}
.hero h1 { color: #fff; max-width: 18ch; }
.hero__sub { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: #c3d3de; max-width: 54ch; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.heroMark { margin: 0; display: grid; place-items: center; }
.heroMark img { width: min(320px, 100%); height: auto; display: block; }
@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; }
  .heroMark { order: -1; justify-items: start; }
  .heroMark img { width: min(190px, 60%); }
}

/* ---------- cards ---------- */
.grid { display: grid; gap: 20px; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid--3 { grid-template-columns: 1fr; } }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 22px 24px;
}
.card p { margin-bottom: 0; color: var(--ink-2); }
.card__ico {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: var(--accent-wash); color: var(--accent); margin-bottom: 16px;
}
.card__ico svg { width: 20px; height: 20px; }

/* ---------- work ---------- */
.work { display: grid; gap: 18px; }
.workItem {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 28px;
}
.workItem__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.workItem__head h3 { margin: 0; font-size: 1.3rem; font-weight: 740; }
.workItem__what {
  margin: 4px 0 12px; color: var(--ink-3);
  font-size: .82rem; font-weight: 660; letter-spacing: .05em; text-transform: uppercase;
}
.workItem p { color: var(--ink-2); }
.workItem__links { margin: 14px 0 0; }
.workItem__links a { font-weight: 620; text-decoration: none; }
.workItem__links a:hover { text-decoration: underline; }
.tag {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line);
}
.tag--live { background: var(--accent-wash); color: var(--accent-ink); border-color: transparent; }
.tag--soon { background: #fff5e6; color: #8a5a08; border-color: transparent; }

/* ---------- tick list ---------- */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.ticks li { position: relative; padding-left: 28px; color: var(--ink-2); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .52em; width: 15px; height: 8px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.ticks strong { color: var(--ink); font-weight: 650; }
.approachList { max-width: 74ch; }

/* ---------- contact ---------- */
.contact { text-align: center; }
.contact .lede { margin-inline: auto; }

/* ---------- colophon ---------- */
.colophon { background: #0a1520; padding-block: 26px; }
.colophon__inner {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  color: var(--night-ink); font-size: .88rem;
}
.colophon__inner p { margin: 0; }
.colophon__logo { height: 34px; width: auto; display: block; flex: 0 0 auto; }
@media (max-width: 480px) { .colophon__inner { flex-direction: column; text-align: center; gap: 10px; } }

/* ---------- clickable work cards ----------
   The visible "Visit" link stays — it is the keyboard and no-JS path. The card
   click is an enlarged hit target layered on top, not a replacement. */
.workItem--link { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.workItem--link:hover {
  border-color: var(--accent);
  box-shadow: 0 14px 28px -18px rgba(16,21,31,.4);
  transform: translateY(-2px);
}
.workItem--link:hover .workItem__links a { text-decoration: underline; }
/* Keyboard users tab to the inner link; show the card responding to that too. */
.workItem--link:focus-within { border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .workItem--link { transition: none; }
  .workItem--link:hover { transform: none; }
}

/* ---------- contact dialog ---------- */
.modal {
  width: min(560px, calc(100vw - 32px));
  padding: 30px 32px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 30px 70px -20px rgba(16,21,31,.5);
}
.modal::backdrop { background: rgba(8,20,26,.55); backdrop-filter: blur(2px); }
.modal__x { position: absolute; top: 10px; right: 12px; margin: 0; }
.modal__x button {
  border: 0; background: none; cursor: pointer;
  font-size: 1.6rem; line-height: 1; color: var(--ink-3); padding: 6px 8px;
  border-radius: var(--radius-sm);
}
.modal__x button:hover { color: var(--ink); background: var(--surface-2); }
.modal__title { margin: 0 0 4px; font-size: 1.5rem; }
.modal__sub { margin: 0 0 20px; color: var(--ink-3); font-size: .92rem; }

.modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.modal .field--wide { grid-column: 1 / -1; }
.modal .field > label {
  display: block; font-size: .84rem; font-weight: 640; color: var(--ink-2); margin-bottom: 6px;
}
.field__opt { font-weight: 400; color: var(--ink-3); }
.modal input[type="text"], .modal input[type="email"], .modal input[type="tel"], .modal textarea {
  width: 100%; padding: 10px 12px; font: inherit; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.modal textarea { resize: vertical; min-height: 110px; }
.modal input:focus-visible, .modal textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.modal [aria-invalid="true"] { border-color: #b23a2f; box-shadow: 0 0 0 3px rgba(178,58,47,.12); }

/* Off-screen rather than display:none — bots skip hidden fields. */
.modal__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.modal__status { margin: 14px 0 0; font-size: .88rem; min-height: 1.2em; color: var(--ink-2); }
.modal__status--good { color: var(--accent-ink); font-weight: 620; }
.modal__status--bad { color: #b23a2f; font-weight: 600; }

.modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.modal__actions .btn:disabled { opacity: .6; cursor: default; transform: none; }
.btn--quiet { border-color: var(--line); color: var(--ink); background: var(--surface); }
.btn--quiet:hover { border-color: var(--accent); color: var(--accent); }

/* Must share the breakpoint with the full-screen sheet rules below: when these
   two disagreed, 521-560px got full-width buttons still laid out in a row, so
   their labels sat left of centre. */
@media (max-width: 560px) {
  .modal { padding: 26px 20px 20px; }
  .modal__grid { grid-template-columns: 1fr; }
  .modal__actions { flex-direction: column-reverse; }
  .modal__actions .btn { justify-content: center; }
}

/* ---------- dialog on small screens ----------
   The form was taller than a phone viewport before the keyboard even appeared,
   so iOS scrolled and zoomed to reach the focused field. Cap the height, let
   the dialog scroll internally, and shrink the parts that cost the most rows.
   dvh (not vh) so the cap tracks Safari's collapsing toolbar. */
.modal { max-height: 88vh; max-height: 88dvh; overflow-y: auto; }

@media (max-width: 560px) {
  .modal { padding: 22px 18px 18px; }
  .modal__title { font-size: 1.28rem; }
  .modal__sub { margin-bottom: 16px; font-size: .88rem; }
  .modal__grid { gap: 12px; }
  .modal textarea { min-height: 84px; }
  .modal__actions { margin-top: 14px; }
}

/* ---------- full-screen dialog on phones ----------
   A centred dialog fights iOS: when the keyboard opens Safari pans the visual
   viewport, but the dialog is fixed, so you end up looking at one corner of it.
   Filling the screen removes anything to pan to, and the sheet scrolls
   internally instead. */
@media (max-width: 560px) {
  .modal {
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
    padding-top: calc(20px + env(safe-area-inset-top));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal__x { top: calc(6px + env(safe-area-inset-top)); right: 8px; }
  .modal__x button { font-size: 2rem; padding: 4px 10px; }
  /* Keep a focused field clear of the top edge when the sheet scrolls to it. */
  .modal input, .modal textarea { scroll-margin: 18px; }
  /* Full-width buttons read as a sheet footer rather than a dialog's corner. */
  .modal__actions .btn { width: 100%; }
}

/* Never below 16px: anything smaller makes iOS Safari zoom the page on focus. */
.modal input[type="text"], .modal input[type="email"],
.modal input[type="tel"], .modal textarea { font-size: max(16px, 1rem); }