/* Design options for the pitch (?hero=, ?header=, ?footer=, ?btn=, ?hfont=, ?bfont=). Option 1 = styles.css as is. */
.brand-tag, .hdr-mail { display: none; }

/* ================= HERO 2: full-bleed field ================= */
[data-hero="2"] .hero { padding: 0; min-height: 100svh; color: var(--white); justify-content: flex-end; }
[data-hero="2"] .hero-stage { position: absolute; inset: 0; margin: 0; padding: 0; width: 100%; max-width: none; }
[data-hero="2"] .plate { border-radius: 0; min-height: 100%; }
[data-hero="2"] .plate-img { object-position: 50% 70%; }
[data-hero="2"] .plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 28, 36, .55) 0%, rgba(8, 28, 36, .1) 38%, rgba(8, 28, 36, 0) 55%, rgba(12, 26, 18, .72) 100%); }
@media (max-width: 899px) { [data-hero="2"] .plate::after { background: linear-gradient(180deg, rgba(8, 28, 36, .5) 0%, rgba(8, 28, 36, 0) 30%, rgba(10, 24, 16, .35) 42%, rgba(10, 24, 16, .86) 70%, rgba(10, 24, 16, .9) 100%); } }
[data-hero="2"] .hero-top { position: relative; z-index: 3; padding-bottom: clamp(36px, 7svh, 80px); pointer-events: none; }
[data-hero="2"] .hero-top a { pointer-events: auto; }
[data-hero="2"] .hero-title { color: var(--white); text-shadow: 0 2px 30px rgba(0, 0, 0, .18); }
[data-hero="2"] .hero-title .hl { color: var(--leaf); }
[data-hero="2"] .hero-sub { color: rgba(251, 252, 249, .9); }
[data-hero="2"] .hero .btn-primary { background: var(--white); color: var(--ink); }
[data-hero="2"] .hero .btn-primary:hover { background: var(--green); color: var(--white); }
[data-hero="2"] .hero .btn-ghost { border-color: var(--white); color: var(--white); }
[data-hero="2"] .hero .btn-ghost:hover { background: var(--green); border-color: var(--green); }
[data-hero="2"] .specimens { inset: 0; z-index: 2; }
[data-hero="2"] .spec-bfly { left: 5%; top: 20%; }
[data-hero="2"] .spec-moth { right: 7%; top: 18%; }
[data-hero="2"] .spec-skipper { left: 34%; top: 26%; }
[data-hero="2"] .spec-gecko { right: 5%; bottom: auto; top: 40%; }
[data-hero="2"] .spec-ant { left: 22%; bottom: auto; top: 36%; }
[data-hero="2"] .thread-line { stroke: var(--white); opacity: .8; }
[data-hero="2"] .site-header:not(.is-fixed) .brand,
[data-hero="2"] .site-header:not(.is-fixed) .nav a,
[data-hero="2"] .site-header:not(.is-fixed) .menu-toggle,
[data-hero="2"] .site-header:not(.is-fixed) .hdr-mail { color: var(--white); }
[data-hero="2"] .site-header:not(.is-fixed) .hdr-cta { background: var(--white); color: var(--ink); }
[data-hero="2"] .site-header:not(.is-fixed) .hdr-cta:hover { background: var(--green); color: var(--white); }
@media (max-width: 899px) {
  [data-hero="2"] .spec-bfly { left: 4%; top: 13%; }
  [data-hero="2"] .spec-moth { right: 4%; top: 12%; width: 100px; }
  [data-hero="2"] .spec-gecko { right: 4%; top: 25%; width: 120px; }
  [data-hero="2"] .spec-ant { right: auto; left: 30%; top: 30%; width: 90px; }
  [data-hero="2"] .spec-gecko figcaption { right: 30%; top: 100%; }
}

/* ================= HERO 3: horizon band + giant headline ================= */
[data-hero="3"] .hero { padding-top: 0; }
[data-hero="3"] .hero-stage { order: -1; flex: none; margin: 0; padding: 0; width: 100%; max-width: none; }
[data-hero="3"] .plate { border-radius: 0 0 clamp(28px, 4vw, 64px) clamp(28px, 4vw, 64px); min-height: 0; height: 58svh; flex: 1; }
[data-hero="3"] .plate-img { object-position: 50% 50%; }
[data-hero="3"] .plate::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 160px; background: linear-gradient(180deg, rgba(8, 24, 16, .5), transparent); }
[data-hero="3"] .specimens { inset: 0; }
[data-hero="3"] .spec-bfly { left: 8%; top: auto; bottom: -9%; }
[data-hero="3"] .spec-moth { right: 12%; top: 26%; }
[data-hero="3"] .spec-skipper { left: 26%; top: 34%; }
[data-hero="3"] .spec-gecko { right: 5%; bottom: -16%; }
[data-hero="3"] .spec-ant { left: 52%; bottom: -5%; }
[data-hero="3"] .thread-line { stroke: var(--white); opacity: .85; }
[data-hero="3"] .hero-top { grid-template-columns: minmax(0, 1fr); margin-top: clamp(26px, 5svh, 54px); gap: 22px; }
[data-hero="3"] .hero-title { font-size: clamp(44px, min(7.2vw, 11svh), 120px); letter-spacing: -.045em; }
[data-hero="3"] .hero-side { display: flex; align-items: center; gap: clamp(20px, 4vw, 60px); flex-wrap: wrap; }
[data-hero="3"] .hero-sub { max-width: 48ch; }
[data-hero="3"] .hero-ctas { margin-top: 0; }
[data-hero="3"] .site-header:not(.is-fixed) .brand,
[data-hero="3"] .site-header:not(.is-fixed) .nav a,
[data-hero="3"] .site-header:not(.is-fixed) .menu-toggle,
[data-hero="3"] .site-header:not(.is-fixed) .hdr-mail { color: var(--white); }
[data-hero="3"] .site-header:not(.is-fixed) .hdr-cta { background: var(--white); color: var(--ink); }
[data-hero="3"] .site-header:not(.is-fixed) .hdr-cta:hover { background: var(--green); color: var(--white); }
@media (max-width: 899px) {
  [data-hero="3"] .plate { height: 46svh; }
  [data-hero="3"] .spec-moth { top: 24%; right: 6%; }
  [data-hero="3"] .spec-gecko { width: 120px; bottom: -12%; }
  [data-hero="3"] .spec-ant { left: 40%; }
  [data-hero="3"] .hero-title { font-size: clamp(30px, 9.3vw, 64px); }
  [data-hero="3"] .to-life { display: block; }
  [data-hero="3"] .plate { border-radius: 0 0 clamp(28px, 4vw, 64px) clamp(28px, 4vw, 64px); }
  [data-hero="3"] .plate::after { z-index: 1; }
  .plate-slides { position: absolute; inset: -12% 0; z-index: 0; overflow: hidden; }
  .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
  .slide.is-active { opacity: 1; }
  .slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
  .slide.is-active img, .slide.is-leaving img { animation: kb-in 6.5s linear forwards; }
  .slide.zoom-out.is-active img, .slide.zoom-out.is-leaving img { animation-name: kb-out; }
}
@keyframes kb-in { from { transform: scale(1); } to { transform: scale(1.14); } }
@keyframes kb-out { from { transform: scale(1.14); } to { transform: scale(1); } }


/* ================= HEADER 2: floating capsule ================= */
@media (min-width: 900px) {
  [data-header="2"] .hdr { width: min(1120px, calc(100% - 40px)); height: 66px; margin-top: 16px; padding: 0 9px 0 26px; background: var(--white); border-radius: 999px; box-shadow: 0 18px 40px -24px rgba(19, 34, 26, .35); }
  [data-header="2"] .site-header.is-fixed { background: transparent; }
  [data-header="2"] .site-header .brand, [data-header="2"] .site-header .nav a { color: var(--ink) !important; }
  [data-header="2"] .site-header .hdr-cta { background: var(--ink) !important; color: var(--white) !important; }
  [data-header="2"] .site-header .hdr-cta:hover { background: var(--green) !important; }
  [data-header="2"] .hdr-cta { min-height: 48px; }
  [data-header="2"] .brand-mark { height: 30px; }
  [data-header="2"] .brand-word { height: 20px; }
}

/* ================= HEADER 3: centred lockup, split nav ================= */
@media (min-width: 900px) {
  [data-header="3"] { --hdr-h: 108px; }
  [data-header="3"] .brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); flex-direction: column; gap: 6px; }
  [data-header="3"] .brand-mark { height: 34px; }
  [data-header="3"] .brand-word { height: 22px; }
  [data-header="3"] .brand-tag { display: block; height: 9px; width: auto; aspect-ratio: 1292/118; opacity: .8; }
  [data-header="3"] .nav { position: static; transform: none; gap: 26px; }
  [data-header="3"] .nav a { font-size: 15.5px; }
  [data-header="3"] .hdr-mail { display: inline-block; margin-left: auto; margin-right: 22px; font: 500 15.5px/1 var(--display); color: var(--ink); text-decoration: none; transition: color .3s var(--ease); }
  [data-header="3"] .hdr-mail:hover { color: var(--green); }
}
@media (min-width: 900px) and (max-width: 1240px) {
  [data-header="3"] .hdr-mail { display: none; }
  [data-header="3"] .hdr-cta { margin-left: auto; }
  [data-header="3"] .nav { gap: 16px; }
  [data-header="3"] .nav a:nth-child(n+4) { display: none; }
}

/* ================= FOOTER 2: giant wordmark ================= */
.footer-2 { background: var(--paper-2); color: var(--ink-soft); padding-bottom: 0; overflow: hidden; }
.f2-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: clamp(36px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.f2-q { font: 500 clamp(34px, 4.6vw, 70px)/1 var(--display); letter-spacing: -.035em; color: var(--ink); }
.f2-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: clamp(36px, 4vw, 56px) 0; }
.footer-2 .foot-h { color: var(--green); }
.footer-2 ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15px; }
.footer-2 a { text-decoration: none; transition: color .3s var(--ease); }
.footer-2 .fx-col a:hover, .footer-2 .to-top:hover { color: var(--green); }
.footer-2 .muted { color: rgba(19, 34, 26, .5); }
.f2-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; padding-bottom: 18px; }
.f2-base p a { color: var(--green); font-weight: 600; }
.f2-word { display: block; color: var(--ink); padding: 0 var(--gut); margin-bottom: -2.4vw; }
.f2-word svg { width: 100%; height: auto; aspect-ratio: 1650/202; display: block; }
.f2-word:hover { color: var(--green); transition: color .5s var(--ease); }

/* ================= FOOTER 3: specimen drawer ================= */
.footer-3 { background: var(--green); color: var(--ink-soft); padding-bottom: 0; overflow: hidden; }
.f3-word { color: var(--white); margin-top: clamp(28px, 4vw, 56px); }
.f3-word:hover { color: var(--ink); }
.f3-head { position: relative; display: flex; align-items: center; gap: 22px; color: var(--white); padding-bottom: clamp(40px, 5vw, 60px); padding-right: clamp(120px, 16vw, 240px); }
.f3-mark { height: clamp(56px, 6vw, 84px); width: auto; aspect-ratio: 405/580; }
.f3-line { font: 500 clamp(36px, 5.6vw, 88px)/.95 var(--display); letter-spacing: -.04em; }
.f3-line .hl { color: var(--ink); }
.f3-frog { position: absolute; right: 2%; bottom: -36px; width: clamp(130px, 14vw, 210px); z-index: 2; filter: drop-shadow(0 18px 24px rgba(10, 30, 15, .35)); }
.f3-drawer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.f3-tag { position: relative; background: var(--paper); border-radius: var(--r); padding: 44px 24px 26px; }
.f3-tag::before { content: ""; position: absolute; top: 16px; left: 24px; width: 12px; height: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--paper-2); }
.f3-tag:nth-child(odd) { transform: rotate(-1deg); }
.f3-tag:nth-child(even) { transform: rotate(1deg) translateY(10px); }
.footer-3 .foot-h { color: var(--green); }
.footer-3 ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15px; }
.footer-3 a { text-decoration: none; transition: color .3s var(--ease); }
.footer-3 .f3-tag a:hover { color: var(--green); }
.footer-3 .muted { color: rgba(19, 34, 26, .5); }
.f3-base { padding-bottom: 6px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: clamp(36px, 4vw, 56px); padding-top: 22px; border-top: 1px solid rgba(251, 252, 249, .3); font-size: 14px; color: rgba(251, 252, 249, .85); }
.f3-base p a { color: var(--white); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.f3-base .to-top:hover { color: var(--ink); }
@media (max-width: 899px) {
  .f2-cols, .f3-drawer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f3-frog { width: 110px; bottom: -20px; }
  .f3-tag:nth-child(even) { transform: rotate(1deg); }
}
@media (max-width: 520px) {
  .f2-cols, .f3-drawer { grid-template-columns: minmax(0, 1fr); }
}

/* ================= BUTTON 2: specimen tag ================= */
[data-btn="2"] .btn { border-radius: 12px; padding-left: 40px; position: relative; }
[data-btn="2"] .btn::before { content: ""; position: absolute; left: 17px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px rgba(19, 34, 26, .25); }
[data-btn="2"] .btn-primary { background: var(--green); }
[data-btn="2"] .btn-primary:hover { background: var(--ink); }
[data-btn="2"] .btn-ghost::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
[data-btn="2"] .btn-light::before { background: var(--green); box-shadow: none; }
[data-btn="2"] .gift .btn-primary { background: var(--ink); }
[data-btn="2"] .gift .btn-primary:hover { background: var(--white); color: var(--green-deep); }

/* ================= BUTTON 3: helix chip ================= */
[data-btn="3"] .btn { padding-left: 7px; gap: 12px; }
[data-btn="3"] .btn::before { content: ""; flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--paper) url("/img/mark-ink.svg?v=1") center / auto 20px no-repeat; transition: background-color .35s var(--ease); }
[data-btn="3"] .hdr-cta::before { flex-basis: 32px; height: 32px; }
[data-btn="3"] .btn-ghost::before { background-color: var(--paper-2); }
[data-btn="3"] .btn-light::before { background-color: var(--paper-2); }
[data-btn="3"] .btn-primary:hover { background: var(--green); }

/* ================= FONTS ================= */
[data-hfont="2"] { --display: "Young Serif", Georgia, serif; }
[data-hfont="2"] h1, [data-hfont="2"] h2, [data-hfont="2"] h3, [data-hfont="2"] .num, [data-hfont="2"] .f2-q, [data-hfont="2"] .f3-line, [data-hfont="2"] .foot-line { letter-spacing: -.02em; font-weight: 400; }
[data-hfont="3"] { --display: "Sora", "Avenir Next", sans-serif; }
[data-hfont="3"] h1, [data-hfont="3"] h2 { letter-spacing: -.045em; font-weight: 500; }
[data-bfont="2"] { --body: "Figtree", "Avenir Next", sans-serif; }
[data-bfont="3"] { --body: "Literata", Georgia, serif; }
[data-bfont="3"] body { font-size: 17.5px; }