/* Fonts: Google's variable WOFF2 files (SIL Open Font License), served from our own origin so visitors' browsers
   never call Google. Latin-ext holds the rupee sign and accented names. JetBrains Mono keeps separate 500 and 700 faces so
   600 still renders as 700, as it did with Google Fonts. Relative URLs, so Auto's copy finds them in brand/fonts/. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/inter-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; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("fonts/inter-tight-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("fonts/inter-tight-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; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono-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; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/jetbrains-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/jetbrains-mono-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 {
  color-scheme: light;
  /* Brand palette: see brand/logo/README.md */
  --paper: #f3f5f0;
  --paper-deep: #e3e9e4;
  --ink: #0e3b43;
  --ink-deep: #0a2c32;
  --ink-soft: #4d686d;
  --amber: #f2b33d;
  --ramp-2: #ee9b3d;
  --ramp-3: #e9833d;
  --ramp-4: #e46b3d;
  --vermilion: #e0533d;
  --vermilion-deep: #b53d2a;
  --line: rgba(14, 59, 67, .16);
  --surface: #fff; /* Form fields and rows on secondary pages */
  --ok: #2e9e5b; /* Status only: something is done or confirmed ("Verified"). Not a brand colour. */
  --display: "Inter Tight", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --header-h: 97px;
  --hero-pad: clamp(32px, 7vh, 80px);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

a:focus-visible {
  outline: 3px solid var(--vermilion);
  outline-offset: 5px;
}

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

.site-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100% - 48px, 1240px);
  margin: 0 auto;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}

.brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -.03em;
}

.brand img {
  width: 44px;
  height: 44px;
}

nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: .88rem;
  font-weight: 600;
}

nav > a:not(.contact-link) { border-bottom: 1px solid transparent; }
nav > a:not(.contact-link):hover { border-color: currentColor; }

.contact-link {
  padding: 10px 16px;
  border: 1px solid var(--ink);
  border-radius: 999px;
}

.contact-link:hover { background: var(--ink); color: var(--paper); }

.nav-button {
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

/* Signed-out links show by default; account.js swaps in "Account" when a session exists. */
nav [hidden] { display: none; }

.eyebrow {
  margin: 0;
  color: var(--vermilion-deep);
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

h1,
h2,
h3,
blockquote {
  font-family: var(--display);
  font-weight: 700;
}

/* Hero */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .8fr);
  align-items: center;
  gap: 6vw;
  width: min(100% - 48px, 1240px);
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  margin: 0 auto;
  padding: var(--hero-pad) 0;
}

h1 {
  max-width: 760px;
  margin: 22px 0 28px;
  font-size: clamp(3.9rem, min(8.2vw, 15vh), 7.6rem);
  letter-spacing: -.04em;
  line-height: .94;
}

.intro {
  max-width: 540px;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.65;
}

.jump-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--vermilion);
  font-size: .9rem;
  font-weight: 600;
}

.hero-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  aspect-ratio: 1;
  /* On desktop the whole hero, panel included, fits above the fold: the panel shrinks with the
     viewport height (down to 300px) instead of pushing past the bottom of the screen. */
  width: min(100%, 520px, max(300px, calc(100svh - var(--header-h) - 2 * var(--hero-pad) - 16px)));
  margin-left: auto;
  padding: clamp(24px, 3.4vw, 40px);
  border-radius: 28px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 30px 60px -30px rgba(14, 59, 67, .55);
}

.hero-panel img {
  width: 74%;
  margin: auto auto 0;
}

.hero-prompt {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid rgba(243, 245, 240, .14);
  font-family: var(--mono);
  font-size: clamp(.78rem, 1.1vw, .92rem);
  font-weight: 500;
  line-height: 1.7;
  color: rgba(243, 245, 240, .6);
}

.prompt-caret { color: var(--amber); font-weight: 700; }
/* pre-wrap keeps the double spaces between product names but lets the line wrap, so it never pushes a phone screen
   wider (non-breaking spaces did, and made phones zoom out). */
.prompt-output { color: var(--paper); white-space: pre-wrap; }

.prompt-cursor {
  display: inline-block;
  width: .6em;
  height: 1.1em;
  margin-left: .5em;
  vertical-align: -.2em;
  background: var(--amber);
}

/* Work */

.work {
  padding: 112px max(24px, calc((100vw - 1240px) / 2));
  background: var(--ink);
  color: var(--paper);
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 56px;
}

.work .eyebrow { color: var(--amber); }

h2 {
  margin: 0;
  font-size: clamp(2.4rem, 4.6vw, 4.4rem);
  letter-spacing: -.035em;
  line-height: 1.02;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}

.project {
  display: flex;
  min-height: 440px;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 28px;
  border-radius: 20px;
  color: var(--ink);
}

.less-card { grid-column: span 6; background: var(--vermilion-deep); color: var(--paper); }
.kite-card { grid-column: span 3; background: var(--amber); }
.listings-card { grid-column: span 3; background: var(--paper-deep); }
.auto-card { grid-column: span 12; min-height: 240px; background: var(--paper); color: var(--ink); }

.project-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.project-state {
  padding: 6px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
}

h3 {
  margin: 0 0 16px;
  font-size: clamp(3rem, 4.6vw, 4.8rem);
  letter-spacing: -.04em;
  line-height: .95;
}

.kite-card h3,
.listings-card h3 { font-size: clamp(2.6rem, 3.6vw, 3.6rem); }

.project p {
  max-width: 460px;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.project a,
.project-note {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 700;
}

.project a { padding-bottom: 5px; border-bottom: 1px solid currentColor; }

/* Websites teaser: a small card pointing to /websites. The launch offer badge is shared with that page. */

.service-teaser {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px 48px;
  width: min(100% - 48px, 1240px);
  margin: 0 auto 96px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 28px;
  background: var(--paper-deep);
}

.service-teaser h2 {
  max-width: 720px;
  margin: 14px 0 12px;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
}

.service-teaser-intro {
  max-width: 560px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.6;
}

.service-teaser-link {
  flex: none;
  padding: 16px 24px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: .95rem;
  font-weight: 600;
}

.service-teaser-link:hover { background: var(--ink-deep); }

.offer {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 24px 0 0;
  padding: 8px 18px 8px 8px;
  border-radius: 18px;
  background: var(--ink);
  color: var(--paper);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.4;
}

.offer-tag {
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Manifesto */

.manifesto {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  width: min(100% - 48px, 1240px);
  margin: 0 auto;
  padding: 128px 0;
}

.manifesto-label p {
  margin: 18px 0 0;
  color: var(--vermilion-deep);
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* The logo's five stripes, amber to vermilion, as a small section marker. */
.ramp {
  display: grid;
  gap: 3px;
  width: 44px;
}

.ramp i { display: block; height: 5px; }
.ramp i:nth-child(1) { background: var(--amber); }
.ramp i:nth-child(2) { background: var(--ramp-2); }
.ramp i:nth-child(3) { background: var(--ramp-3); }
.ramp i:nth-child(4) { background: var(--ramp-4); }
.ramp i:nth-child(5) { background: var(--vermilion); }

blockquote {
  margin: 0;
  font-size: clamp(2.8rem, 5.8vw, 6rem);
  letter-spacing: -.04em;
  line-height: 1;
}

/* Footer */

footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  width: min(100% - 48px, 1240px);
  margin: 0 auto;
  padding: 28px 0 36px;
  border-top: 1px solid var(--line);
  font-size: .8rem;
}

footer p { margin: 0; color: var(--ink-soft); }
footer p a:hover { color: var(--ink); text-decoration: underline; }
footer > a:last-child { justify-self: end; }
.footer-brand { font-size: 1.05rem; gap: 9px; }
.footer-brand img { width: 30px; height: 30px; }

@media (max-width: 900px) {
  /* Stacked hero: the copy and a compact, horizontal panel both fit in the first screen, with the
     next section peeking in below on taller screens. */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    min-height: auto;
    padding: 56px 0 64px;
  }

  .hero-panel {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    aspect-ratio: auto;
    width: 100%;
    max-width: 640px;
    margin: 0;
    padding: 18px 22px;
    border-radius: 20px;
  }

  .hero-panel img { flex: none; width: 96px; margin: 0; }

  .hero-prompt {
    padding: 2px 0 2px 20px;
    border-top: 0;
    border-left: 1px solid rgba(243, 245, 240, .14);
    font-size: .88rem;
  }
  .section-heading { align-items: start; flex-direction: column; }
  .less-card { grid-column: span 12; }
  .kite-card, .listings-card { grid-column: span 6; }
  .manifesto { grid-template-columns: 1fr; }
  .service-teaser { align-items: flex-start; flex-direction: column; }
}

/* Just above 600px all five nav links still show, so they sit closer together to keep the header on one line,
   and the footer's links line takes its own row, as it does on phones. */
@media (min-width: 601px) and (max-width: 760px) {
  .site-header nav { gap: 18px; }
  footer { grid-template-columns: 1fr auto; }
  footer p { grid-column: 1 / -1; order: 1; }
}

@media (max-width: 600px) {
  .site-header,
  .hero,
  .manifesto,
  footer { width: min(100% - 32px, 1240px); }

  :root { --header-h: 73px; }
  .site-header { padding: 18px 0; }
  .brand { font-size: 1.2rem; }
  .brand img { width: 36px; height: 36px; }
  nav { gap: 16px; font-size: .8rem; }
  nav .nav-secondary { display: none; }
  .contact-link { padding: 9px 13px; }
  .hero { gap: clamp(20px, 4svh, 28px); padding: clamp(24px, 6svh, 44px) 0 48px; }
  h1 { margin: clamp(14px, 3svh, 22px) 0 clamp(18px, 3.5svh, 28px); }
  .jump-link { margin-top: clamp(20px, 4svh, 40px); }
  h1 { font-size: clamp(3.1rem, min(17vw, 11svh), 5.2rem); }
  .hero-panel { gap: 16px; padding: 16px 18px; border-radius: 18px; }
  .hero-panel img { width: 80px; }
  .hero-prompt { padding-left: 16px; font-size: .8rem; }
  .work { padding-top: 76px; padding-bottom: 76px; }
  .project-grid { gap: 12px; }
  .project,
  .kite-card,
  .listings-card { grid-column: span 12; min-height: 340px; padding: 24px; }
  .manifesto { padding: 84px 0; }
  .service-teaser { width: min(100% - 32px, 1240px); margin-bottom: 56px; padding: 24px; border-radius: 20px; }
  .offer { font-size: .9rem; }
  footer { grid-template-columns: 1fr auto; }
  footer p { grid-column: 1 / -1; order: 1; }
  footer > a:last-child { font-size: .72rem; }
}

@media (max-width: 360px) {
  .brand span { font-size: 1.05rem; }
  nav { gap: 12px; }
  /* The wordmark and the support address can't share a row with larger phone text, so the footer stacks. */
  footer { grid-template-columns: 1fr; }
  footer > a:last-child { justify-self: start; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy { animation: rise .65s ease-out both; }
  .hero-panel { animation: rise .65s .1s ease-out both; }
  .prompt-cursor { animation: blink 1.1s steps(1) infinite; }
  a { transition: color .18s ease, background .18s ease, border-color .18s ease; }

  @keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes blink {
    50% { opacity: 0; }
  }
}