/* ==========================================================================
   Hippo Seeds - hipposeeds.com
   Ported from the Claude Design export "Hippo Seeds Design System" (402665cd).
   Token values are the design system's own; do not invent colours or sizes.
   No JavaScript anywhere on this site. See README.md.
   ========================================================================== */

/* --- Montserrat, self-hosted. v31 latin is a single variable font covering
       every weight, so one 37 KB file replaces the whole family. Self-hosted
       rather than Google-hosted so `font-src 'self'` holds and no visitor IP
       reaches a third party. ------------------------------------------------ */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Core palette, 2022 brand brief */
  --haystacks: #ceaa47;
  --bonsai-garden: #989e75;
  --nile: #a7b784;
  --aloe-tip: #829581;
  --cumin: #a48661;
  --dill: #707553;
  --cocos-black: #1d1e1b;
  /* Added July 2026 */
  --clay-red: #a14d4a;
  --canvas: #f1f1e9;
  /* Reserved: hippo line art only, on black or white */
  --lineart-green: #c0c683;

  /* Neutrals derived from Canvas / Coco's Black */
  --canvas-deep: #e6e6db;
  --paper: #ffffff;
  --ink-70: rgba(29, 30, 27, 0.7);
  --ink-55: rgba(29, 30, 27, 0.55);
  --ink-38: rgba(29, 30, 27, 0.38);
  --ink-14: rgba(29, 30, 27, 0.14);
  --ink-08: rgba(29, 30, 27, 0.08);

  /* Semantic */
  --surface-page: var(--canvas);
  --surface-sunken: var(--canvas-deep);
  --surface-inverse: var(--cocos-black);
  --surface-brand: var(--aloe-tip);
  --text-body: var(--cocos-black);
  --text-muted: var(--ink-55);
  --text-on-inverse: var(--canvas);
  --text-link: var(--dill);
  --text-link-hover: var(--cocos-black);
  --border-hairline: var(--ink-14);
  --focus-ring: var(--dill);

  /* Type - 1.25 major third off a 16px body */
  --font-sans: "Montserrat", "Poppins", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --size-3xs: 11px;
  --size-2xs: 12px;
  --size-xs: 13px;
  --size-sm: 14px;
  --size-md: 16px;
  --size-lg: 20px;
  --size-xl: 25px;
  --size-2xl: 31px;
  --size-3xl: 39px;
  --size-4xl: 49px;
  --tracking-brand: 0.34em; /* the wordmark / eyebrow spacing from the brief */
  --tracking-caps: 0.16em;
  --tracking-tight: -0.01em;

  /* Spacing - 4px base */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --container-max: 1160px;
  --page-pad: var(--space-8);
  --header-h: 76px;

  /* Shape - radii stay small; the organic feel comes from the line art */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;

  /* Motion - slow and settled, no bounce */
  --ease-standard: cubic-bezier(0.32, 0.72, 0.32, 1);
  --duration-fast: 140ms;
  --transition-control: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

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

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

html {
  scroll-behavior: smooth;
  /* Clears the sticky header when an in-page anchor lands. Without this the
     heading you jumped to hides underneath the header. */
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--size-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); }

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

/* Inverse surfaces need a ring that is actually visible against Coco's Black */
.band-dark :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--haystacks);
}

.wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  background: var(--cocos-black);
  color: var(--canvas);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--size-sm);
  font-weight: 600;
  transition: top var(--duration-fast) var(--ease-standard);
}
.skip-link:focus { top: var(--space-4); color: var(--canvas); }

/* ------------------------------------------------------------ buttons --- */
/* Variants mirror the design system's Button PALETTE exactly. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-control);
}
.btn-sm { height: 32px; padding: 0 var(--space-4); font-size: var(--size-2xs); }
.btn-lg { height: 48px; padding: 0 var(--space-8); font-size: var(--size-sm); }

.btn-primary {
  background: var(--aloe-tip);
  border-color: var(--aloe-tip);
  color: #fff;
}
.btn-primary:hover {
  background: var(--dill);
  border-color: var(--dill);
  color: #fff;
}

.btn-secondary {
  background: transparent;
  border-color: var(--cocos-black);
  color: var(--cocos-black);
}
.btn-secondary:hover {
  background: var(--cocos-black);
  color: var(--canvas);
}

.btn-accent {
  background: var(--haystacks);
  border-color: var(--haystacks);
  color: var(--cocos-black);
}
.btn-accent:hover {
  background: #bf9b3b;
  border-color: #bf9b3b;
  color: var(--cocos-black);
}

/* ------------------------------------------------------------- header --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--canvas);
  border-bottom: 1px solid var(--border-hairline);
}

.site-header .wrap {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}
.logo img.mark { height: 30px; width: auto; }
.logo img.wordmark { height: 11px; width: auto; }

.nav {
  display: flex;
  gap: var(--space-8);
  flex: 1;
}
.nav a {
  font-size: var(--size-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.nav a:hover { color: var(--cocos-black); }

/* --------------------------------------------------------------- hero --- */

.hero {
  background: var(--surface-brand);
  color: #fff;
}
.hero .wrap {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-16);
  align-items: center;
}
.hero h1 {
  margin: 0;
  font-size: clamp(32px, 5vw, var(--size-4xl));
  font-weight: 200;
  letter-spacing: var(--tracking-caps);
  line-height: 1.12;
  text-transform: uppercase;
}
.hero .lede {
  max-width: 470px;
  font-size: clamp(17px, 2.2vw, var(--size-lg));
  font-weight: 300;
  line-height: 1.65;
  opacity: 0.92;
  margin: 28px 0 36px;
}
.hero-art { display: grid; place-items: center; }
.hero-art img { width: 72%; max-width: 300px; }

.eyebrow {
  font-size: var(--size-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-brand);
  text-transform: uppercase;
}
.hero .eyebrow { opacity: 0.8; margin-bottom: 28px; }

/* --------------------------------------------------------- section UI --- */

.section {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-24) var(--page-pad) 0;
}

/* The letterspaced eyebrow + hairline rule, from the DS SectionLabel */
.section-label {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.section-label .rule {
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.25;
}

.belief-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  margin-top: var(--space-8);
  align-items: start;
}
.belief-grid h2 {
  margin: 0;
  font-size: clamp(28px, 4vw, var(--size-3xl));
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: var(--tracking-tight);
}
.belief-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.belief-body p { margin: 0; line-height: 1.75; }
.belief-body .pull {
  font-size: clamp(21px, 2.6vw, var(--size-xl));
  font-weight: 200;
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
  color: var(--dill);
}
.belief-body .muted { color: var(--text-muted); }

/* Sectors */
.sectors {
  margin-top: var(--space-20);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  padding: var(--space-12);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-12);
  align-items: center;
}
.sectors h3 {
  margin: 0;
  font-size: var(--size-xl);
  font-weight: 600;
  line-height: 1.3;
}
.sectors p {
  margin: var(--space-4) 0 0;
  font-size: var(--size-sm);
  line-height: 1.7;
  color: var(--text-muted);
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.tags li {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  padding: 5px var(--space-3);
  font-size: var(--size-2xs);
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* Approach */
.approach h2 {
  margin: 0 0 var(--space-4);
  font-size: clamp(28px, 4vw, var(--size-3xl));
  font-weight: 600;
  line-height: 1.2;
  max-width: 620px;
}
.journey {
  width: 100%;
  max-width: 620px;
  opacity: 0.9;
  margin: var(--space-8) 0 var(--space-10);
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
  list-style: none;
  margin: 0;
  padding: 0;
}
.steps li {
  border-top: 1px solid var(--border-hairline);
  padding-top: var(--space-6);
}
.steps .num {
  font-size: var(--size-3xl);
  font-weight: 200;
  opacity: 0.45;
  line-height: 1;
  letter-spacing: var(--tracking-caps);
}
.steps h3 {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--size-lg);
  font-weight: 600;
  line-height: 1.3;
}
.steps p {
  margin: 0;
  font-size: var(--size-sm);
  line-height: 1.7;
  color: var(--text-muted);
}

/* ------------------------------------------------------------ contact --- */

.contact { margin-top: var(--space-24); }

.band-dark {
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  border-radius: var(--radius-md);
  padding: var(--space-16);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}
.band-dark .eyebrow { opacity: 0.55; margin-bottom: var(--space-5); }
.band-dark h2 {
  margin: 0 0 var(--space-4);
  font-size: clamp(24px, 3.2vw, var(--size-2xl));
  font-weight: 600;
  line-height: 1.25;
}
.band-dark .band-copy p {
  margin: 0;
  line-height: 1.7;
  opacity: 0.75;
  max-width: 520px;
}

/* Form. Fields mirror the DS Input component: uppercase letterspaced label,
   paper field, hairline border, Coco's Black on focus. */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field > span {
  font-size: var(--size-3xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  opacity: 0.7;
}
.field .req { color: var(--haystacks); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0 var(--space-4);
  height: 40px;
  font-family: inherit;
  font-size: var(--size-sm);
  color: var(--text-body);
  background: var(--paper);
  border: 1px solid var(--ink-14);
  border-radius: var(--radius-sm);
  outline: none;
  transition: var(--transition-control), box-shadow var(--duration-fast) var(--ease-standard);
}
.field textarea {
  height: auto;
  min-height: 92px;
  padding: var(--space-3) var(--space-4);
  line-height: 1.6;
  resize: vertical;
}
/* While the untouched placeholder is the selected value, grey it so it does not
   read as a real answer. Progressive enhancement: without :has() support the
   select simply looks normal. */
.field select:has(option[value=""]:checked) { color: var(--text-faint); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--cocos-black);
  box-shadow: 0 0 0 3px rgba(112, 117, 83, 0.35);
}

/* Honeypot. Bots fill hidden inputs; people never see this. Kept out of the
   layout AND out of the tab order AND hidden from screen readers, so it can
   only ever be filled by something automated. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  margin: 0;
  font-size: var(--size-3xs);
  line-height: 1.6;
  opacity: 0.55;
}

/* ------------------------------------------------------------- footer --- */

.site-footer {
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  margin-top: var(--space-24);
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-12);
  flex-wrap: wrap;
  padding-top: var(--space-16);
  padding-bottom: var(--space-10);
}
.footer-top img { height: 44px; width: auto; margin-bottom: 18px; }
.footer-brand .eyebrow { opacity: 0.8; }
.footer-links {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.footer-links a {
  font-size: var(--size-xs);
  color: var(--canvas);
  opacity: 0.8;
}
.footer-links a:hover { color: var(--canvas); opacity: 1; }
.footer-legal {
  border-top: 1px solid rgba(241, 241, 233, 0.14);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  font-size: var(--size-3xs);
  opacity: 0.5;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------- result pages --- */

.result {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-12) var(--page-pad);
  text-align: center;
}
.result-card { max-width: 560px; }
.result-card img { height: 64px; width: auto; margin-bottom: var(--space-8); }
.result-card h1 {
  margin: 0 0 var(--space-4);
  font-size: clamp(26px, 4vw, var(--size-2xl));
  font-weight: 600;
  line-height: 1.25;
}
.result-card p {
  margin: 0 0 var(--space-8);
  line-height: 1.7;
  color: var(--text-muted);
}
.result-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ------------------------------------------------------- responsive --- */

@media (max-width: 900px) {
  :root { --page-pad: var(--space-6); }

  .hero .wrap,
  .belief-grid,
  .sectors,
  .band-dark {
    grid-template-columns: 1fr;
  }
  .hero .wrap { gap: var(--space-12); }
  .hero-art { order: -1; }
  .hero-art img { width: 55%; max-width: 220px; }
  .band-dark { padding: var(--space-12); gap: var(--space-10); }
  .steps { grid-template-columns: 1fr; gap: var(--space-8); }
  .section { padding-top: var(--space-20); }
  .sectors { margin-top: var(--space-16); }
}

@media (max-width: 720px) {
  /* Two rows: logo + CTA, then the links underneath. No toggle, no open/closed
     state, so nothing can be left covering the page after a jump. */
  :root { --header-h: 108px; }

  .site-header .wrap {
    height: auto;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    padding-top: var(--space-4);
    padding-bottom: var(--space-3);
  }
  .logo { margin-right: auto; }
  .header-cta { order: 2; }
  .nav {
    order: 3;
    flex-basis: 100%;
    flex: 0 0 100%;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .nav a { font-size: var(--size-3xs); letter-spacing: 0.1em; }

  .footer-top { align-items: flex-start; }
  .footer-links { gap: var(--space-5); }
}

@media (max-width: 420px) {
  .band-dark { padding: var(--space-8); }
  .logo img.wordmark { display: none; }
}

/* Respect a reduced-motion preference - the only "animation" here is the
   smooth anchor scroll, which is exactly what motion sensitivity flags. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}