/* ============ Tokens ============ */
:root {
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-accent: #c67139;
  --color-accent-2: #7a8a5e;
  --color-divider: rgba(32,30,29,.16);
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-accent-200: #ffe1d0;
  --color-accent-300: #ffc6a5;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;
  --color-accent-2-100: #f0fae1;
  --color-accent-2-200: #e1eecc;
  --color-accent-2-300: #ccdbb2;
  --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b;
  --font-heading: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Static blob shape = the 0% frame of th-morph, so it holds under reduced motion */
  --radius-blob: 58% 42% 46% 54% / 44% 52% 48% 56%;
  /* Type scale */
  --text-body: 17px;
  --text-legal: 13px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@keyframes th-morph {
  0%, 100% { border-radius: var(--radius-blob); transform: translate3d(0,0,0) rotate(0deg); }
  33% { border-radius: 44% 56% 62% 38% / 58% 40% 60% 42%; transform: translate3d(3%,-4%,0) rotate(6deg); }
  66% { border-radius: 62% 38% 40% 60% / 40% 62% 38% 60%; transform: translate3d(-3%,3%,0) rotate(-5deg); }
}
@keyframes th-rise {
  from { opacity: 0; transform: translateY(0.42em) rotate(1.2deg); }
  to { opacity: 1; transform: none; }
}

/* ============ Base elements ============ */
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-accent-700); text-decoration: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

h1 {
  margin: 0;
  font-family: var(--font-heading);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 700;
}
h1 .w {
  display: inline-block;
  animation: th-rise .9s cubic-bezier(.2,.7,.2,1) both;
}
h1 .accent { color: var(--color-accent-700); }

h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 26px;
}

/* All body copy shares one size/leading/color */
.lead, .card p, .belief-quote, .shipyard, .d-duo p {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--color-neutral-800);
}
.shipyard strong, .d-duo strong {
  color: var(--color-text);
  font-weight: 700;
}

/* ============ Shared components ============ */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand svg { display: block; flex: none; }
.brand span {
  font-family: var(--font-heading);
  font-size: 20px;
}

.lead {
  max-width: 42ch;
  animation: th-rise 1s cubic-bezier(.2,.7,.2,1) .55s both;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 14px 26px;
  font-family: var(--font-heading);
  font-size: 16px;
  color: var(--color-bg);
  background: var(--color-accent);
  border-radius: 999px;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), background .35s, box-shadow .45s;
}
.cta:hover {
  background: var(--color-accent-600);
  transform: translateY(-8px) rotate(-1.2deg);
  box-shadow: 0 14px 34px rgba(140,73,26,.28);
}

.kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}

.email {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-accent-700);
  border-bottom: 2px solid var(--color-accent-300);
  transition: color .2s ease;
}
.email:hover { color: var(--color-accent-800); }

.legal, .d-footer {
  font-size: var(--text-legal);
  line-height: 1.6;
  color: var(--color-neutral-700);
}

/* Decorative morphing blobs (sizes/positions set per layout) */
.panel::before, .panel::after,
.d-hero::before, .d-hero::after,
.d-belief::before {
  content: "";
  position: absolute;
  border-radius: var(--radius-blob);
  pointer-events: none;
}

html.js .reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1);
}
html.js .reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .reveal { opacity: 1; transform: none; }
}

/* ============ 404 (client-routed) ============ */
.nf {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
}
.nf-code {
  font-family: var(--font-heading);
  font-size: 72px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--color-accent-700);
}
.nf-text {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--color-neutral-800);
}

/* ============ Layout 2a — Split ============ */
.panel {
  position: fixed;
  inset: 0 auto 0 0;
  width: 44%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 64px;
  padding: 56px;
  background: var(--color-surface);
  overflow: hidden;
}
.panel::before {
  right: -190px; top: -170px;
  width: 460px; height: 460px;
  background: var(--color-accent-200);
  animation: th-morph 26s ease-in-out infinite;
}
.panel::after {
  left: -110px; bottom: -80px;
  width: 320px; height: 320px;
  background: var(--color-accent-2-200);
  animation: th-morph 34s ease-in-out infinite reverse;
}
.panel > * { position: relative; z-index: 1; }

.statement {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}
.panel h1 { font-size: 52px; }

.legal-mobile { display: none; }

.content {
  margin-left: 44%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* First section aligns with the brand row, contact bottom-aligns with the
     panel's legal line (44px + email's 44px hit-area centers on the legal text) */
  justify-content: space-between;
  gap: clamp(24px, 4.2svh, 40px);
  padding: clamp(32px, 5.8svh, 56px) 64px clamp(34px, 5.4svh, 44px);
}
.content section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card {
  padding: clamp(22px, 3.6svh, 34px) 36px;
  border-radius: 28px;
  background: var(--color-surface);
}
.card h2 { margin-bottom: 12px; }
.belief {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.7svh, 14px);
  margin: 0;
  padding: clamp(18px, 3.4svh, 28px) 32px;
  border: 2px solid var(--color-accent-2-300);
  border-radius: 28px;
}
.belief-quote em {
  font-style: normal;
  color: var(--color-accent-2-700);
}

/* Compact right column on shorter desktop screens so it still fits one screen */
@media (min-width: 901px) and (max-height: 800px) {
  .content { gap: 26px; padding: 30px 56px 34px; }
  .card { padding: 22px 26px; }
  .card h2 { margin-bottom: 8px; }
  .content h2 { font-size: 22px; }
  .card p, .shipyard, .belief-quote { font-size: 15.5px; }
  .belief { padding: 18px 24px; gap: 10px; }
  .email { font-size: 18px; }
}

/* ============ Layout 2b — Dossier (Extended density) ============ */
.d-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: 132px 80px 140px;
  background: var(--color-surface);
  border-radius: 0 0 60px 60px;
}
.d-hero::before {
  right: -160px; top: -140px;
  width: 520px; height: 520px;
  background: var(--color-accent-2-200);
  animation: th-morph 28s ease-in-out infinite;
}
.d-hero::after {
  right: 180px; bottom: -110px;
  width: 260px; height: 260px;
  background: var(--color-accent-200);
  animation: th-morph 22s ease-in-out infinite reverse;
}
.d-brand {
  position: absolute;
  top: 44px; left: 80px;
  z-index: 1;
}
.d-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 72px;
  align-items: end;
}
.d-hero h1 {
  font-size: 84px;
  line-height: 1.08;
}
.d-hero-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  padding-bottom: 8px;
}
.d-hero .lead { font-size: 21px; }

.dossier h2 { font-size: 40px; }

.d-duo {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 36px;
  align-items: center;
  min-height: 72svh;
  padding: 140px 80px;
}
.d-card, .d-duo-text, .d-contact-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.d-card, .d-duo-text { padding: 56px 60px; }
.d-card {
  border-radius: 32px;
  background: var(--color-surface);
}

.d-belief {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  margin: 0 40px;
  min-height: 72svh;
  padding: 140px 60px;
  border-radius: 48px;
  background: var(--color-accent-2-700);
}
.d-belief::before {
  right: -90px; top: -90px;
  width: 360px; height: 360px;
  background: var(--color-accent-2-800);
  animation: th-morph 30s ease-in-out infinite;
}
.d-belief .kicker {
  position: relative;
  color: var(--color-accent-2-100);
}
.d-quote {
  position: relative;
  margin: 0;
  max-width: 42ch;
  font-family: var(--font-heading);
  font-size: 48px;
  line-height: 1.35;
  color: var(--color-accent-2-100);
}
.d-quote em {
  font-style: normal;
  color: var(--color-accent-200);
}

.d-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  min-height: 72svh;
  padding: 140px 80px 56px;
}
.d-contact h2 { max-width: 24ch; }
.d-contact .email {
  align-self: center;
  font-size: 22px;
  padding-bottom: 3px;
  white-space: nowrap;
}

.d-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0 40px 40px;
  padding: 26px 40px;
  border-radius: 32px;
  background: var(--color-surface);
}

/* ============ Mobile (both layouts) ============ */
@media (max-width: 900px) {
  h1 { font-size: 38px; }
  h2 { font-size: 24px; }
  .panel h1, .d-hero h1 { font-size: 38px; }
  .dossier h2 { font-size: 28px; }
  .email {
    align-self: flex-start;
    font-size: 18px;
    white-space: normal;
    word-break: break-all;
  }

  /* Split */
  .panel {
    position: relative;
    inset: auto;
    width: auto;
    gap: 40px;
    padding: 32px 24px 40px;
  }
  .panel .legal { display: none; }
  .legal-mobile {
    display: block;
    padding: 0 24px 40px;
  }
  .content {
    margin-left: 0;
    min-height: auto;
    padding: 48px 24px 40px;
    gap: 48px;
  }

  /* Dossier */
  .d-hero {
    min-height: auto;
    padding: 104px 24px 64px;
    border-radius: 0 0 36px 36px;
  }
  .d-brand { top: 28px; left: 24px; }
  .d-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
  }
  .d-hero .lead { font-size: 18px; }
  .d-duo {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 56px 24px;
    gap: 24px;
  }
  .d-card, .d-duo-text { padding: 32px 28px; }
  .d-belief {
    margin: 0 16px;
    min-height: auto;
    padding: 56px 28px;
    border-radius: 32px;
  }
  .d-quote { font-size: 30px; }
  .d-contact {
    flex-direction: column;
    align-items: flex-start;
    min-height: auto;
    padding: 56px 24px 40px;
    gap: 24px;
  }
  .d-footer {
    margin: 0 16px 24px;
    padding: 22px 24px;
  }
}