:root {
  color-scheme: only light;
  --paper: #f3eee5;
  --paper-deep: #e9dfd1;
  --taupe: #b9a58f;
  --taupe-light: #c9b7a3;
  --ink: #332d27;
  --ink-soft: #62584e;
  --moss: #5b654a;
  --line: rgba(51,45,39,.18);
  --max: 1240px;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); color-scheme: only light; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.6; color-scheme: only light; }
img { display: block; width: 100%; height: auto; }
a { color: inherit; }
button, input { font: inherit; }
::selection { background: var(--moss); color: var(--paper); }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.hidden { display:none; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 1000; padding: .75rem 1rem; background: var(--ink); color: var(--paper); text-decoration: none; }
.skip-link:focus { top: 1rem; }
.site-header { position: fixed; z-index: 100; top: 0; left: 0; right: 0; height: 86px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,4vw,72px); transition: background .3s ease, box-shadow .3s ease, height .3s ease; }
.site-header.scrolled { height: 68px; background: rgba(243,238,229,.9); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(14px); }
.wordmark { position: relative; display:inline-flex; align-items:flex-start; text-decoration:none; font-family:var(--serif); font-size:2rem; font-weight:600; line-height:1; letter-spacing:.02em; }
.wordmark i { position:relative; width:13px; height:15px; margin-left:-2px; margin-top:-3px; }
.wordmark i::before, .wordmark i::after { content:""; position:absolute; width:8px; height:5px; background:currentColor; border-radius:100% 0 100% 0; transform:rotate(-28deg); }
.wordmark i::before { top:1px; left:0; }
.wordmark i::after { top:6px; left:5px; transform:rotate(-70deg); }
.site-nav { display:flex; align-items:center; gap:clamp(20px,2.2vw,38px); font-size:.82rem; }
.site-nav a { text-decoration:none; position:relative; }
.site-nav a:not(.nav-cta)::after { content:""; position:absolute; left:0; right:100%; bottom:-5px; height:1px; background:currentColor; transition:right .25s ease; }
.site-nav a:hover::after { right:0; }
.nav-cta { border:1px solid var(--ink); padding:.65rem 1rem; border-radius:99px; transition:.25s ease; }
.nav-cta:hover { background:var(--ink); color:var(--paper); }
.menu-button { display:none; background:none; border:0; padding:.5rem; }
.menu-button span:not(.sr-only) { display:block; width:25px; height:1px; background:var(--ink); margin:5px 0; }
.hero { min-height:100vh; padding:130px clamp(24px,6vw,110px) 70px; display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.78fr); align-items:center; gap:clamp(40px,8vw,140px); background:var(--taupe); }
.hero-copy { max-width:700px; }
.eyebrow, .section-kicker { margin:0 0 1.2rem; font-size:.74rem; text-transform:uppercase; letter-spacing:.18em; font-weight:600; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:var(--serif); font-weight:500; line-height:.98; }
h1 { margin-bottom:1.8rem; font-size:clamp(3.7rem,7vw,8rem); letter-spacing:-.045em; }
h2 { font-size:clamp(2.6rem,5vw,5.8rem); letter-spacing:-.04em; }
h3 { font-size:clamp(1.6rem,2.3vw,2.45rem); }
.hero-intro { max-width:620px; font-size:clamp(1rem,1.35vw,1.25rem); }
.hero-whisper { margin-top:2rem; font-family:var(--serif); font-size:1.4rem; }
.button-row { display:flex; align-items:center; flex-wrap:wrap; gap:1.5rem; margin-top:2.4rem; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:.8rem 1.35rem; border:0; border-radius:999px; text-decoration:none; cursor:pointer; transition:transform .2s ease, background .2s ease; }
.button:hover { transform:translateY(-2px); }
.button-dark { background:var(--ink); color:var(--paper); }
.button-light { background:var(--paper); color:var(--ink); }
.text-link { text-decoration:none; font-size:.9rem; }
.hero-visual { max-width:560px; justify-self:end; }
.image-frame { overflow:hidden; background:var(--paper); }
.hero-frame { border-radius:48% 48% 8px 8px / 18% 18% 8px 8px; box-shadow:0 30px 80px rgba(51,45,39,.18); }
.hero-frame img { aspect-ratio:3/4; object-fit:cover; }
.concept-label { margin:.8rem 0 0; text-align:right; font-size:.72rem; opacity:.65; }
.section-pad { padding:clamp(90px,11vw,170px) clamp(24px,6vw,110px); }
.statement { text-align:center; background:var(--ink); color:var(--paper); }
.statement-heading { max-width:1080px; margin:0 auto; font-size:clamp(3rem,6.4vw,7.4rem); }
.section-heading { max-width:780px; margin-bottom:clamp(45px,7vw,90px); }
.section-heading p:last-child { max-width:660px; font-size:1.05rem; color:var(--ink-soft); }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,32px); }
.product-card { background:var(--paper-deep); overflow:hidden; border-radius:4px; }
.product-image { overflow:hidden; aspect-ratio:1/1; }
.product-image img { height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.6,.2,1); }
.product-card:hover img { transform:scale(1.035); }
.product-copy { padding:clamp(22px,3vw,36px); }
.product-copy > span { font-size:.7rem; letter-spacing:.16em; }
.product-copy h3 { margin:.75rem 0 1rem; }
.product-copy p { margin-bottom:0; color:var(--ink-soft); }
.system { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.75fr); gap:clamp(45px,8vw,130px); align-items:center; background:var(--taupe-light); }
.system-visual img { max-height:820px; object-fit:contain; }
.system-copy p { color:var(--ink-soft); }
.growth-steps { margin-top:2.5rem; display:grid; gap:.7rem; font-family:var(--serif); font-size:1.35rem; }
.growth-steps span { padding-bottom:.65rem; border-bottom:1px solid var(--line); }
.lifestyle { background:var(--paper); }
.wide-image { max-width:var(--max); margin:0 auto; overflow:hidden; }
.wide-image img { aspect-ratio:16/9; object-fit:cover; }
.lifestyle-caption { max-width:930px; margin:clamp(40px,6vw,85px) auto 0; text-align:center; }
.lifestyle-caption p { font-size:.84rem; text-transform:uppercase; letter-spacing:.14em; }
.world { background:var(--ink); color:var(--paper); }
.world .section-heading p:last-child { color:rgba(243,238,229,.72); }
.world-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,32px); }
.world-card { min-height:510px; padding:clamp(28px,3.5vw,46px); border:1px solid rgba(243,238,229,.17); display:flex; flex-direction:column; justify-content:flex-end; }
.world-card h3 { margin:2rem 0 1rem; }
.world-card p { color:rgba(243,238,229,.7); margin-bottom:0; }
.field-note-stack { position:relative; height:235px; width:185px; margin:auto; }
.field-note { position:absolute; inset:0; border-radius:12px; border:1px solid rgba(51,45,39,.25); background:var(--paper); color:var(--ink); box-shadow:0 18px 35px rgba(0,0,0,.2); }
.field-note.back { transform:rotate(-8deg) translate(-14px,5px); background:var(--taupe); }
.field-note.middle { transform:rotate(6deg) translate(13px,4px); background:var(--paper-deep); }
.field-note.front { padding:18px; display:flex; flex-direction:column; }
.field-note.front span { font-family:var(--serif); font-size:1.4rem; }
.field-note.front b { margin-top:auto; font-size:.7rem; letter-spacing:.15em; }
.field-note.front strong { font-family:var(--serif); font-size:2rem; }
.field-note.front small { opacity:.6; }
.journal-mock { height:235px; width:180px; margin:auto; border-radius:4px 15px 15px 4px; padding:22px; background:var(--taupe); color:var(--ink); box-shadow:18px 20px 0 rgba(243,238,229,.08); display:flex; flex-direction:column; }
.journal-mock span { font-family:var(--serif); font-size:1.5rem; }
.journal-mock strong { margin:auto 0; font-family:var(--serif); font-size:2.1rem; line-height:1; }
.journal-mock small { letter-spacing:.15em; }
.detailer-mock { height:235px; max-width:240px; margin:auto; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.detailer-mock i { display:block; border-radius:50%; background:var(--taupe); width:48px; height:35px; }
.detailer-mock i:nth-child(2) { width:28px; height:42px; border-radius:50% 50% 45% 45%; background:var(--moss); }
.detailer-mock i:nth-child(3) { width:54px; height:24px; border-radius:50%; background:var(--paper-deep); }
.detailer-mock span { display:grid; place-items:center; width:42px; height:42px; border-radius:9px; background:var(--paper); color:var(--ink); font-family:var(--serif); font-size:1.4rem; }
.world-rule { margin:70px 0 0; text-align:center; font-family:var(--serif); font-size:clamp(1.8rem,3vw,3.2rem); }
.measurement-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,3vw,40px); }
.measurement-grid figure { margin:0; background:var(--paper-deep); }
.measurement-grid img { aspect-ratio:4/5; object-fit:cover; }
.measurement-grid figcaption { padding:1rem 1.2rem; font-family:var(--serif); font-size:1.5rem; }
.about { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:clamp(50px,9vw,160px); background:var(--taupe); }
.about-heading { position:sticky; top:120px; align-self:start; }
.about-copy { max-width:720px; font-size:1.08rem; }
.founders { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin:3rem 0; padding:2rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.founders div { display:flex; flex-direction:column; }
.founders strong { font-family:var(--serif); font-size:1.8rem; }
.founders span { color:var(--ink-soft); font-size:.8rem; }
.made-line { font-family:var(--serif); font-size:2rem; line-height:1.1; }
.join { background:var(--paper); }
.join-panel { max-width:var(--max); margin:0 auto; padding:clamp(40px,6vw,80px); background:var(--moss); color:var(--paper); display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.7fr); gap:clamp(45px,8vw,120px); align-items:center; }
.join-panel > div > p:last-child { color:rgba(243,238,229,.78); max-width:600px; }
.waitlist-form { display:grid; gap:.7rem; }
.waitlist-form label { font-size:.72rem; text-transform:uppercase; letter-spacing:.13em; }
.waitlist-form input { width:100%; border:0; border-bottom:1px solid rgba(243,238,229,.6); background:transparent; color:var(--paper); padding:.7rem 0 1rem; outline:none; }
.waitlist-form input::placeholder { color:rgba(243,238,229,.55); }
.waitlist-form input:focus { border-bottom-color:var(--paper); }
.waitlist-form .button { margin-top:1rem; width:fit-content; }
.waitlist-form small { color:rgba(243,238,229,.65); }
.waitlist-wrap { width:100%; }
.sib-form-message-panel { display:none; }
.koke-form-message { margin:0 0 1.2rem; padding:1rem 1.1rem; border:1px solid rgba(243,238,229,.32); font-family:var(--sans); font-size:.88rem; line-height:1.5; }
.koke-form-message-success { background:rgba(243,238,229,.12); color:var(--paper); }
.koke-form-message-error { background:rgba(70,35,30,.28); color:var(--paper); }
.waitlist-form .form__entry { display:grid; gap:.35rem; }
.waitlist-form .entry__field { width:100%; }
.waitlist-form .entry__error { display:none; margin-top:.25rem; font-size:.72rem; color:var(--paper); opacity:.85; text-transform:none; letter-spacing:0; }
.waitlist-form .entry__error:not(:empty) { display:block; }
.waitlist-form .input--hidden { position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; }
.waitlist-form button[disabled] { opacity:.65; cursor:wait; transform:none; }

.disclaimer { padding:20px 24px; text-align:center; background:var(--paper-deep); font-size:.7rem; color:var(--ink-soft); }
.disclaimer p { margin:0; }
.site-footer { padding:55px clamp(24px,6vw,110px); display:grid; grid-template-columns:1fr 1fr 1fr; align-items:end; gap:20px; background:var(--ink); color:var(--paper); }
.footer-wordmark { font-size:2.5rem; }
.site-footer > p { margin:0; text-align:center; font-family:var(--serif); font-size:1.4rem; }
.site-footer > div { display:flex; flex-direction:column; text-align:right; font-size:.75rem; gap:.5rem; }
.site-footer a { text-decoration:none; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .reveal { opacity:1; transform:none; transition:none; } }
@media (max-width: 960px) {
  .site-header { height:72px; }
  .menu-button { display:block; }
  .site-nav { position:fixed; inset:72px 0 auto 0; padding:25px; flex-direction:column; align-items:stretch; background:var(--paper); border-top:1px solid var(--line); transform:translateY(-140%); opacity:0; transition:.3s ease; }
  .site-nav.open { transform:none; opacity:1; }
  .site-nav a { font-family:var(--serif); font-size:1.7rem; padding:.45rem 0; }
  .nav-cta { border:0; padding:.45rem 0; }
  .hero { grid-template-columns:1fr; padding-top:120px; }
  .hero-visual { justify-self:center; max-width:520px; }
  .product-grid, .world-grid { grid-template-columns:1fr; }
  .system { grid-template-columns:1fr; }
  .system-visual { max-width:650px; margin:auto; }
  .about { grid-template-columns:1fr; }
  .about-heading { position:static; }
  .join-panel { grid-template-columns:1fr; }
  .site-footer { grid-template-columns:1fr; text-align:center; }
  .site-footer > p, .site-footer > div { text-align:center; }
  .footer-wordmark { margin:auto; }
}
@media (max-width: 640px) {
  h1 { font-size:clamp(3.4rem,16vw,5.2rem); }
  .hero { padding-left:20px; padding-right:20px; }
  .section-pad { padding-left:20px; padding-right:20px; }
  .hero-frame { border-radius:44% 44% 4px 4px / 15% 15% 4px 4px; }
  .measurement-grid { grid-template-columns:1fr; }
  .founders { grid-template-columns:1fr; }
  .join-panel { padding:34px 22px; }
}

/* v0.4: preserve original layout; use official KOKE wordmark at original visual scale */
.wordmark-image {
  display:inline-flex;
  align-items:center;
  font-size:inherit;
  line-height:1;
}
.wordmark-image img {
  display:block;
  width:auto;
  height:32px;
  max-width:none;
}
.footer-wordmark.wordmark-image img {
  height:40px;
}
.detailer-visual {
  height:235px;
  width:100%;
  max-width:270px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.detailer-visual img {
  width:100%;
  height:100%;
  object-fit:contain;
}
@media (max-width:960px) {
  .wordmark-image img { height:30px; }
}

/* v0.7: premium ultrawide containment + restrained image radius system */
:root {
  --canvas-max: 1660px;
  --radius-large: 20px;
  --radius-card: 14px;
}

/* Keep the navigation visually connected on ultrawide screens. */
.site-header {
  padding-left: 0;
  padding-right: 0;
}
.header-inner {
  width: min(calc(100% - 96px), var(--canvas-max));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Full-bleed colour, contained composition. */
.hero {
  padding-left: 0;
  padding-right: 0;
  display: block;
}
.hero-inner {
  width: min(calc(100% - 96px), var(--canvas-max));
  min-height: calc(100vh - 200px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 470px);
  gap: clamp(72px, 7vw, 145px);
  align-items: center;
}
.hero-copy {
  max-width: 720px;
}
.hero-visual {
  width: 100%;
  max-width: 470px;
}

/* Editorial photography gets a soft, deliberate radius. Technical renders stay crisp. */
.product-card {
  border-radius: var(--radius-card);
}
.wide-image {
  border-radius: var(--radius-large);
}
.detailer-visual img {
  border-radius: var(--radius-card);
}

/* Stop content grids from stretching into oversized islands on very wide displays. */
.garden > .section-heading,
.garden > .product-grid,
.world > .section-heading,
.world > .world-grid,
.world > .world-rule,
.measurements > .section-heading,
.measurements > .measurement-grid {
  width: min(100%, var(--canvas-max));
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1800px) {
  .hero h1 { font-size: 7.2rem; }
  .hero-intro { font-size: 1.15rem; }
}

@media (max-width: 960px) {
  .header-inner { width: calc(100% - 48px); }
  .hero { padding-left: 0; padding-right: 0; }
  .hero-inner {
    width: calc(100% - 48px);
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hero-visual { max-width: 520px; justify-self: center; }
}

@media (max-width: 640px) {
  .header-inner { width: calc(100% - 40px); }
  .hero { padding-left: 0; padding-right: 0; }
  .hero-inner { width: calc(100% - 40px); }
  .wide-image { border-radius: var(--radius-card); }
}

/* v0.8: keep Brevo's required embed structure intact while visually preserving KOKE. */
.koke-sib-shell,
.koke-sib-shell .sib-form-container,
.koke-sib-shell .koke-sib-container {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}
.koke-sib-shell .sib-form-block,
.koke-sib-shell .sib-input {
  padding: 0 !important;
  background: transparent !important;
}
.koke-sib-shell .waitlist-form {
  display: grid;
  gap: .7rem;
}
.koke-sib-shell .waitlist-form .entry__label {
  display: block;
  margin: 0 0 .35rem !important;
  padding: 0 !important;
  color: var(--paper) !important;
  font-family: var(--sans) !important;
  font-size: .72rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-transform: uppercase;
  letter-spacing: .13em;
}
.koke-sib-shell .waitlist-form .entry__field {
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.koke-sib-shell .waitlist-form input.input {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: .7rem 0 1rem !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(243,238,229,.6) !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--paper) !important;
  font-family: var(--sans) !important;
  font-size: 1rem !important;
}
.koke-sib-shell .waitlist-form input.input::placeholder {
  color: rgba(243,238,229,.55) !important;
  font-family: var(--sans) !important;
}
.koke-sib-shell .waitlist-form input.input:focus {
  border-bottom-color: var(--paper) !important;
}
.koke-sib-shell .waitlist-form .entry__error {
  min-height: 0 !important;
  margin: .25rem 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--paper) !important;
  font-family: var(--sans) !important;
  font-size: .72rem !important;
  line-height: 1.35 !important;
}
.koke-sib-shell .koke-submit-block {
  margin-top: .3rem !important;
}
.koke-sib-shell .sib-form-block__button {
  display: inline-flex !important;
  align-items: center !important;
  gap: .55rem !important;
  width: fit-content !important;
  min-height: 0 !important;
  margin: .4rem 0 0 !important;
  padding: .85rem 1.35rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: .9rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
}
.koke-sib-shell .progress-indicator__icon {
  width: 14px !important;
  height: 14px !important;
  fill: currentColor !important;
}
.koke-sib-shell .sib-form-message-panel {
  max-width: none !important;
  margin: 0 0 1rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--paper) !important;
  font-family: var(--sans) !important;
  font-size: .85rem !important;
  line-height: 1.45 !important;
  text-align: left !important;
}
.koke-sib-shell .sib-form-message-panel__text {
  justify-content: flex-start !important;
  padding: .8rem 1rem !important;
  border: 1px solid rgba(243,238,229,.28) !important;
  border-radius: 10px !important;
  background: rgba(243,238,229,.08) !important;
  color: var(--paper) !important;
}
.koke-sib-shell .sib-notification__icon {
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
}
.koke-sib-shell .waitlist-form small {
  display: block !important;
  margin-top: .35rem !important;
  color: rgba(243,238,229,.65) !important;
  font-family: var(--sans) !important;
  font-size: .76rem !important;
  line-height: 1.45 !important;
}
.koke-sib-shell .input--hidden {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* v0.9: Brevo activates success/error panels by adding this class. */
.koke-sib-shell .sib-form-message-panel--active {
  display: inline-block !important;
  width: 100% !important;
}


/* v0.10: preserve KOKE's authored palette when the device/browser prefers dark mode.
   KOKE currently has one deliberate visual theme rather than an alternate dark palette. */
html, body, main, header, footer, section, form, input, button, textarea, select {
  color-scheme: only light;
}

/* v0.15: CSS-only arrow avoids iOS emoji substitution entirely */


/* v0.17: Discover link intentionally contains NO arrow glyph, icon or pseudo-element. */
.discover-link {
  text-decoration: none;
  font-size: .9rem;
  color: inherit;
  display: inline-flex;
  align-items: center;
}
.discover-link::before,
.discover-link::after {
  content: none !important;
  display: none !important;
}