/* ============================================================
   Wavebreak Labs — wavebreak.au
   Prototype stylesheet (desktop + mobile)

   Modernist system from the brand exploration: flush-left type,
   Archivo 800 headings, square section rules. The mark is a square
   tile — nothing in here is allowed to round it. Controls are the
   deliberate exception: buttons and chips are softened, and app
   icons take the iOS home-screen corner.
   ============================================================ */

:root {
  /* Brand: Sea #0F4C81 · Sea Light #4AA8D8 · Sun #FFD23F · Ink #201E1D · Ground #F3F2F2 */
  --sea: #0f4c81;
  --sea-dark: #0b3a63;
  --sea-light: #4aa8d8;
  --sun: #ffd23f;
  --ink: #201e1d;
  --ink-soft: #4d4a48;
  --ink-faint: #6c6763; /* AA contrast (≥4.5:1) on both --bg and --surface */
  --bg: #f3f2f2;
  --surface: #ffffff;
  --line: #d7d3d3;

  /* Per-app accents live in data/apps.json — each app's own colour, darkened
     where it had to be so small uppercase labels clear AA on white. The build
     sets them as an inline --accent on the card and the showcase, so adding an
     app never needs a rule in here. */

  /* The brand system is flush and square — that's the mark and the section
     rules. Controls are the exception: buttons and chips take a soft radius,
     and app icons take the iOS home-screen corner (22.5% of the tile), because
     that's the shape people already read as "an app". */
  --radius: 12px;
  --radius-icon: 22.5%;
  --shadow-sm: 0 1px 2px rgba(22, 22, 26, 0.06), 0 4px 14px rgba(22, 22, 26, 0.07);
  --shadow-lg: 0 2px 6px rgba(22, 22, 26, 0.08), 0 24px 60px rgba(22, 22, 26, 0.16);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

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

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

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

/* The bar is the mark's own navy, flat and opaque — the logo tile sitting on
   it has to read as one continuous field, so no translucency and no blur
   (either would shift the colour against whatever scrolls underneath). The
   contact strip further down takes --sea-dark so the two bands stay distinct. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--sea);
  border-bottom: 2px solid rgba(255, 255, 255, 0.14);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* the symbol is a square tile — never round its corners */
.brand img { width: 42px; height: 42px; }

.brand-text { line-height: 1.1; }

/* wordmark: Archivo 800, tracking -0.038em. Reversed to white on the navy
   bar — the sea-blue lockup (11a) is for light grounds only */
.brand-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.038em;
  color: #fff;
}

/* LABS · GOLD COAST: Archivo 600, tracking 0.3em */
.brand-tag {
  font-family: var(--font-display);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.62);
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
  transition: color 0.15s ease;
}

/* the sun picks out hover and the section you're in */
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--sun); }

.site-nav a[aria-current="page"] { font-weight: 700; }

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.btn-primary { background: var(--sea); color: #fff; }
.btn-primary:hover { background: var(--sea-dark); transform: translateY(-1px); }

.btn-ghost { box-shadow: inset 0 0 0 2px var(--line); background: var(--surface); color: var(--ink); }
.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--ink); transform: translateY(-1px); }

/* sea-blue on navy would vanish, so the nav CTA takes the sun treatment —
   same swap the contact strip makes for the same reason */
.site-nav .btn-primary { padding: 11px 22px; background: var(--sun); color: var(--ink); }
.site-nav .btn-primary:hover { background: #ffdd6b; color: var(--ink); }

/* mobile nav */

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

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

.hero { padding: 60px 0 40px; overflow: hidden; }

.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.kicker {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sea);
  margin-bottom: 20px;
}

/* the sun, borrowed from the mark, as a rule under section kickers */
.kicker::after {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  background: var(--sun);
  margin-top: 12px;
}

.hero h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.038em;
  margin-bottom: 22px;
}

.hero p.lead {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 34em;
  margin-bottom: 34px;
}

.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* two overlapping phones */

.hero-phones {
  position: relative;
  height: 560px;
}

.hero-phones .phone {
  position: absolute;
  width: 240px;
}

.hero-phones .phone:nth-child(1) {
  left: 6%;
  top: 40px;
  transform: rotate(-5deg);
  z-index: 1;
}

.hero-phones .phone:nth-child(2) {
  right: 4%;
  top: 0;
  transform: rotate(4deg);
  z-index: 2;
}

/* ---------- phone frame ---------- */

.phone {
  border-radius: 40px;
  background: #111114;
  padding: 10px;
  box-shadow: var(--shadow-lg);
}

.phone img {
  border-radius: 31px;
  width: 100%;
  height: auto; /* keep aspect ratio — the height attribute must not fix it */
}

/* ---------- sections ---------- */

/* anchored sections stop below the sticky header when scrolled to */
section { padding: 72px 0; scroll-margin-top: 72px; }

/* the Our Apps intro leads straight into the first showcase */
.section-head { max-width: 620px; margin-bottom: 48px; }

.section-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin-bottom: 14px;
}

.section-head p { color: var(--ink-soft); font-size: 1.05rem; }

/* why wavebreak */

.values { background: var(--surface); border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); }

.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}

.value h3 { font-size: 1.05rem; margin: 14px 0 8px; }
.value p { font-size: 0.93rem; color: var(--ink-soft); }

.value .dot {
  width: 44px;
  height: 44px;
  background: var(--sea);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
}

/* about */

.about .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.about p { color: var(--ink-soft); margin-bottom: 16px; }

/* contact / footer */

/* --sea-dark, not --sea: the header already owns the mark's navy, and two
   identical bands at either end of the page read as a repeat */
.contact {
  background: var(--sea-dark);
  color: #fff;
  padding: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.contact h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.03em; margin-bottom: 8px; }
.contact p { color: #c3d8ea; }

.contact .btn-primary { background: var(--sun); color: var(--ink); }
.contact .btn-primary:hover { background: #ffdd6b; }

.site-footer { padding: 40px 0 56px; }

.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: var(--ink-faint);
}

.footer-links { display: flex; gap: 24px; }
.footer-links a:hover { color: var(--ink); }

/* ---------- app grid (home) ---------- */

/* auto-fill, so the grid takes however many apps there are without a rule
   change — three fills a row, four wraps, twenty just keeps going */
.app-grid {
  display: grid;
  /* min() floor, or the 280px track overflows a narrower phone */
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 24px;
}

.app-card {
  position: relative; /* anchors the stretched toggle below */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--line);
  border-radius: var(--radius);
  padding: 26px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.app-card:hover {
  box-shadow: inset 0 0 0 2px var(--accent);
  transform: translateY(-2px);
}

.app-card .icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-icon);
  box-shadow: var(--shadow-sm);
  margin-bottom: 4px;
}

.app-card .app-kind {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.app-card h3 { font-size: 1.35rem; letter-spacing: -0.03em; }

.app-card .blurb { color: var(--ink-soft); font-size: 0.95rem; }

/* pins the chip and the toggle to the bottom so cards of uneven copy line up */
.app-card .app-status { margin-top: auto; padding-top: 8px; }

.app-card-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* stretched over the whole card, so clicking anywhere opens the panel —
   the card can't be one big <button>, since a button can't wrap the <h3> */
.app-card-toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.app-card-toggle:focus-visible { outline: 2px solid var(--sea); outline-offset: 4px; }

.app-card-toggle .chev { transition: transform 0.2s ease; }

.app-card.is-open { box-shadow: inset 0 0 0 2px var(--accent); }
.app-card.is-open .chev { transform: rotate(180deg); }

/* ---------- app screenshot panel (home) ---------- */

/* Sits after the whole grid rather than between cards — a full-bleed panel
   spliced into the grid would break the row it interrupts. */
.app-panel {
  margin-top: 24px;
  scroll-margin-top: 88px; /* clears the sticky header when scrolled into view */
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--line);
  border-radius: var(--radius);
  padding: 28px 26px 32px;
  animation: panel-in 0.22s ease both;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(-6px); }
}

.app-panel-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}

.app-panel-head .icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-icon);
  box-shadow: var(--shadow-sm);
}

.app-panel-head .app-kind {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.app-panel-head h3 { font-size: 1.3rem; letter-spacing: -0.03em; }

.app-panel-close {
  margin-left: auto;
  align-self: flex-start;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
  color: var(--ink-faint);
  box-shadow: inset 0 0 0 2px var(--line);
  transition: color 0.15s ease, box-shadow 0.15s ease;
}

.app-panel-close:hover { color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.app-panel-close:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }

.app-panel .screens { margin-bottom: 28px; }

.app-panel-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.app-panel-actions .btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--accent); }

/* status chip and the live link share a row on a per-app page */
.app-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* carries the app's own accent, so the button belongs to the app not the site */
.btn-live { background: var(--accent); color: #fff; }
.btn-live:hover { filter: brightness(1.15); transform: translateY(-1px); }

/* ---------- app showcases (per-app pages) ---------- */

.back-link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 28px;
  transition: color 0.15s ease;
}

.back-link:hover { color: var(--sea); }

.showcase-head {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 18px;
}

/* app icons take the iOS home-screen corner, so they read the way they do on
   a phone. The Wavebreak mark in the header stays square — it's the brand
   tile, not an app icon. */
.showcase-head .icon {
  width: 84px;
  height: 84px;
  border-radius: var(--radius-icon);
  box-shadow: var(--shadow-sm);
}

/* h1 on a per-app page, where the app name is the page's own heading */
.showcase-head h1, .showcase-head h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  letter-spacing: -0.03em;
}

.showcase-head .app-kind {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.app-showcase > .container > p.desc {
  max-width: 46em;
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin-bottom: 10px;
}

.app-showcase > .container > p.fine-print {
  max-width: 46em;
  color: var(--ink-faint);
  font-size: 0.85rem;
  margin-top: 10px;
}

.feature-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 40px;
}

.feature-list li {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 8px 18px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.screens {
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.screens .phone { width: 250px; flex-shrink: 0; }

.screens figcaption {
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-top: 14px;
}

/* status chip — these apps have no public URL yet, so the showcase says
   where each one is up to instead of linking nowhere */
.app-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 2px var(--line);
  padding: 10px 18px;
}

.app-status::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--sun);
  flex: none;
}

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

@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; }

  .hero { padding-top: 40px; }

  .hero-phones {
    height: auto;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 16px;
  }

  .hero-phones .phone { position: static; width: 200px; }
  .hero-phones .phone:nth-child(1) { transform: rotate(-4deg) translateY(20px); }
  .hero-phones .phone:nth-child(2) { transform: rotate(3deg); }

  .about .container { grid-template-columns: 1fr; }

  .value-grid { grid-template-columns: 1fr 1fr; }

  .contact { padding: 40px 28px; }
}

@media (max-width: 680px) {
  .site-nav {
    position: fixed;
    inset: 72px 0 auto 0;
    background: var(--sea-dark);
    border-bottom: 2px solid rgba(255, 255, 255, 0.14);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px 28px;
    gap: 18px;
    box-shadow: var(--shadow-lg);
    transform: translateY(-130%);
    transition: transform 0.25s ease;
  }

  .nav-open .site-nav { transform: translateY(0); }

  .site-nav a { font-size: 1.05rem; }

  .nav-toggle { display: flex; }

  section { padding: 52px 0; }

  .value-grid { grid-template-columns: 1fr; gap: 26px; }

  .screens { gap: 22px; }
  .screens .phone { width: min(250px, 72vw); }

  .hero-phones .phone { width: 42vw; max-width: 200px; }

  .showcase-head .icon { width: 64px; height: 64px; }
}