/* =========================================================================
   CREAVE LAB — main stylesheet
   Palette "Grove & Ember" · Type: Bricolage Grotesque / Instrument Serif /
   Instrument Sans (English-only site)
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Brand palette — adjust here only */
  --c-ivory: #F3EDE2;
  --c-cream: #EAE2D2;
  --c-sage: #CBD0BA;
  --c-olive: #6B7049;
  --c-forest: #1F3A2D;
  --c-forest-deep: #16291F;
  --c-ink: #1A251E;
  --c-espresso: #2B211B;
  --c-acorn: #8E4E23;
  --c-terracotta: #BF6440;
  --c-terracotta-deep: #A4502D;
  --c-ember: #E08A5F;
  --c-bluegray: #66767D;

  /* Type */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", "Times New Roman", Times, serif;
  --font-ui: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Space */
  --gutter: clamp(16px, 2.6vw, 44px);
  --nav-h: clamp(58px, 5.4vw, 78px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --nav-total: calc(var(--nav-h) + var(--safe-b));

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.25, .1, .25, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
}

/* Scenes: each defines the working colors for whatever is inside it.
   With JS, the <body> carries the active scene and the whole page recolors.
   Without JS, each section paints its own scene. */
[data-scene="ivory"],
html:not(.js) [data-section-scene="ivory"] {
  --bg: var(--c-ivory);
  --fg: var(--c-ink);
  --muted: rgba(26, 37, 30, .64);
  --line: rgba(26, 37, 30, .16);
  --accent: var(--c-terracotta);
  --nav-bg: rgba(243, 237, 226, .94);
}
[data-scene="forest"],
html:not(.js) [data-section-scene="forest"] {
  --bg: var(--c-forest);
  --fg: var(--c-ivory);
  --muted: rgba(243, 237, 226, .72);
  --line: rgba(243, 237, 226, .2);
  --accent: var(--c-ember);
  --nav-bg: rgba(31, 58, 45, .94);
}
[data-scene="sage"],
html:not(.js) [data-section-scene="sage"] {
  --bg: var(--c-sage);
  --fg: var(--c-ink);
  --muted: rgba(26, 37, 30, .7);
  --line: rgba(26, 37, 30, .2);
  --accent: var(--c-terracotta-deep);
  --nav-bg: rgba(203, 208, 186, .94);
}
html:not(.js) [data-section-scene] { background: var(--bg); color: var(--fg); }

/* ---------- 2. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--c-ivory);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
  transition: background-color .9s var(--ease-soft), color .9s var(--ease-soft);
}
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
em { font-style: normal; }
::selection { background: var(--accent); color: var(--c-ivory); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--fg);
  color: var(--bg);
  font-size: 14px;
  transform: translateY(-160%);
  transition: transform .3s var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

/* Shared small type */
.label,
.index {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.4;
}
.index { font-variant-numeric: tabular-nums; color: var(--muted); }

.section-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
}

/* Italic serif accent (used sparingly) */
.serif-i {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.012em;
}

/* ---------- 3. Bottom navigation ---------------------------------------- */
.site-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  height: var(--nav-total);
  padding: 0 var(--gutter) var(--safe-b);
  background: var(--nav-bg, var(--bg));
  color: var(--fg);
  transition: background-color .9s var(--ease-soft), color .9s var(--ease-soft);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-nav {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}
.site-nav::before {
  /* hairline */
  content: "";
  position: absolute;
  left: var(--gutter); right: var(--gutter); top: 0;
  height: 1px;
  background: var(--line);
}
.nav-list {
  height: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.nav-item { position: relative; display: flex; }
.nav-item--left { justify-content: flex-start; }
.nav-item--center { justify-content: center; }
.nav-item--right { justify-content: flex-end; }

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(14px, 1.55vw, 24px);
  letter-spacing: .035em;
  text-transform: uppercase;
  line-height: 1;
}
.nav-link .nav-text { position: relative; display: inline-block; padding: 4px 0; }
.nav-link .nav-text::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .5s var(--ease-out);
}
.nav-link:hover .nav-text::after,
.nav-link:focus-visible .nav-text::after,
.nav-link[aria-current="page"] .nav-text::after,
.nav-link[aria-expanded="true"] .nav-text::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.nav-link[aria-current="page"]::before {
  /* tiny seed dot marks the current view */
  content: "";
  width: .3em; height: .3em;
  margin-right: .45em;
  border-radius: 50%;
  background: var(--accent);
}
.nav-link:focus-visible { outline-offset: 2px; }

/* CONTACT menu (opens upward) */
.contact-toggle[hidden], .contact-fallback[hidden] { display: none; }
.contact-menu {
  position: absolute;
  right: calc(-1 * var(--gutter));
  bottom: calc(100% + (var(--nav-h) - 44px) / 2);
  min-width: max(240px, 17em);
  padding: 18px var(--gutter) 14px;
  background: var(--bg);
  font-family: var(--font-ui);
  font-size: clamp(14px, 1.3vw, 19px);
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s var(--ease-soft), transform .5s var(--ease-out), visibility 0s linear .5s;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .contact-menu { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
.contact-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .35s var(--ease-soft), transform .5s var(--ease-out), visibility 0s;
}
.contact-menu::after {
  content: "";
  position: absolute;
  left: var(--gutter); right: var(--gutter); bottom: 0;
  height: 1px;
  background: var(--line);
}
.cm-list { display: grid; gap: 2px; text-align: right; }
.cm-list li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s var(--ease-soft), transform .45s var(--ease-out);
}
.contact-menu.is-open .cm-list li { opacity: 1; transform: none; }
.contact-menu.is-open .cm-list li:nth-child(1) { transition-delay: .02s; }
.contact-menu.is-open .cm-list li:nth-child(2) { transition-delay: .07s; }
.contact-menu.is-open .cm-list li:nth-child(3) { transition-delay: .12s; }

.cm-item {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: .9em;
  min-height: 44px;
  align-items: center;
  font-weight: 500;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.cm-item.is-disabled { color: var(--muted); cursor: default; }
.cm-status {
  font-size: 10.5px;
  letter-spacing: .14em;
  font-weight: 500;
  padding: 3px 0;
  color: var(--muted);
  border-bottom: 1px dotted currentColor;
}
a.cm-item .nav-text { position: relative; }
a.cm-item .nav-text::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right center;
  transition: transform .5s var(--ease-out);
}
a.cm-item:hover .nav-text::after,
a.cm-item:focus-visible .nav-text::after { transform: scaleX(1); transform-origin: left center; }
a.cm-item .cm-arrow {
  display: inline-block;
  font-family: var(--font-ui);
  transition: transform .45s var(--ease-out);
}
a.cm-item:hover .cm-arrow { transform: translate(2px, -2px); }

/* ---------- 4. HERO ------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 2.2vw, 30px) var(--gutter) calc(var(--nav-total) + clamp(28px, 6vh, 64px));
  overflow: hidden;
  overflow: clip;
}

/* Wordmark */
.wordmark-wrap { container-type: inline-size; }
.wordmark {
  margin: 0 0 0 -.035em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19vw; /* fallback */
  font-size: calc(100cqw / 4.99);
  line-height: .84;
  letter-spacing: -.03em;
  white-space: nowrap;
  font-kerning: normal;
}
.wm-word {
  display: inline-block;
  overflow: hidden;
  overflow: clip;
  padding-top: .07em;
  margin-top: -.07em;
  vertical-align: bottom;
}
.wm-letter { display: inline-block; }

/* Bottom block: eyebrow + slogan */
.hero-bottom {
  position: relative;
  margin-top: auto;
  padding-top: clamp(40px, 8vh, 96px);
  container-type: inline-size;
}
.eyebrow {
  position: absolute;
  left: 0;
  bottom: calc(var(--slogan-fs) * 1.17);
  max-width: 17em;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .15em;
  line-height: 1.55;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  display: block;
  width: 7px; height: 7px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--accent);
}

.slogan {
  --slogan-fs: clamp(48px, 7.2vw + 8px, 124px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--slogan-fs);
  line-height: .98;
  letter-spacing: -.038em;
}
.hero-bottom { --slogan-fs: clamp(48px, 7.2vw + 8px, 124px); }
.slogan-line { display: block; white-space: nowrap; }
.slogan-line--1 { padding-left: calc(100% * 5 / 12); }
.slogan-line--2 { padding-left: calc(100% * 1 / 12 - .04em); margin-top: .02em; }
.word {
  display: inline-block;
  overflow: hidden;
  overflow: clip;
  padding: .02em .08em .16em;
  margin: -.02em -.08em -.16em;
  vertical-align: bottom;
}
.word > span { display: inline-block; }
.slogan .serif-i { font-size: 1.04em; letter-spacing: -.01em; }

/* Acorn landing slot (reserves space: no layout shift) */
.acorn-slot {
  position: relative;
  display: inline-block;
  width: .5em;
  height: .625em;
  margin-left: .2em;
  margin-bottom: -.015em;
  vertical-align: baseline;
}
.acorn-slot span { display: block; position: absolute; inset: 0; }
.acorn-sq { transform-origin: 50% 100%; }
.acorn-rot { transform-origin: 50% 58%; }
.acorn-rot img { width: 100%; height: 100%; }

/* ---------- 5. COMPANY (intro) ------------------------------------------ */
.intro {
  position: relative;
  min-height: 118vh;
  padding: clamp(28px, 5vh, 56px) var(--gutter) clamp(96px, 16vh, 180px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  grid-template-rows: auto auto 1fr;
}
.intro > .section-top { grid-column: 1 / -1; }
.intro-head {
  grid-column: 1 / -1;
  margin-top: clamp(72px, 16vh, 180px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 7.3vw, 132px);
  line-height: 1;
  letter-spacing: -.042em;
}
.intro-head .serif-i { font-size: 1.05em; letter-spacing: -.012em; }
.ih-phrase {
  display: inline-block;
  white-space: nowrap;
}
.ih-indent { margin-left: calc(100% / 12); }
.br-mob { display: none; }

.intro-net {
  grid-column: 1 / 9;
  align-self: end;
  margin-top: clamp(48px, 9vh, 112px);
  margin-left: calc(-1 * var(--gutter) * .5);
  color: var(--fg);
}
.intro-copy {
  grid-column: 9 / 13;
  align-self: center;
  padding-bottom: 6%;
  margin-top: clamp(48px, 9vh, 112px);
}
.intro-copy p {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.6vw, 25px);
  line-height: 1.48;
  letter-spacing: -.014em;
  font-weight: 400;
  color: var(--fg);
  max-width: 21em;
  text-wrap: pretty;
}
.intro-copy .copy-rule {
  display: block;
  width: 44px; height: 1px;
  margin-bottom: 28px;
  background: currentColor;
  opacity: .5;
}

/* Organic Connections */
.net { width: 100%; height: auto; overflow: visible; }
.net .p {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.05;
  stroke-linecap: round;
  opacity: .5;
}
.net .p--main { opacity: .75; stroke-width: 1.25; }
.net .p--faint { opacity: .3; }
.net .n { fill: currentColor; transform-box: fill-box; transform-origin: center; }
.net .n--accent { fill: var(--accent); }
.net .n--ring { fill: none; stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .7; }
html.js .net .n { transform: scale(0); transition: transform .7s var(--ease-out); }
html.js .net .n.is-on { transform: scale(1); }

/* ---------- 6. WHAT WE DO ------------------------------------------------ */
.work {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(28px, 5vh, 56px) var(--gutter) calc(var(--nav-total) + 4px);
  display: flex;
  flex-direction: column;
  scroll-margin-top: 0;
}
.work-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 84px);
  line-height: 1;
  letter-spacing: -.04em;
}
.work .section-top { align-items: flex-end; }
.areas {
  margin-top: clamp(40px, 9vh, 120px);
  counter-reset: area;
}
.area {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding: clamp(22px, 3.4vh, 40px) 0 clamp(30px, 5vh, 60px);
  container-type: inline-size;
}
.area::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--line);
  transform-origin: left center;
}
.area-num {
  grid-column: 1 / 2;
  grid-row: 1;
  padding-top: .9em;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.area-title {
  grid-column: 2 / -1;
  grid-row: 1;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(46px, 10.2cqw, 160px);
  line-height: .96;
  letter-spacing: -.047em;
  white-space: nowrap;
}
.area-title .word { padding-bottom: .14em; margin-bottom: -.14em; }
.area-desc {
  grid-column: 8 / -1;
  grid-row: 2;
  margin-top: clamp(14px, 2.4vh, 26px);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.5vw, 42px);
  line-height: 1.08;
  letter-spacing: -.008em;
}
.area:nth-child(2) .area-title { grid-column: 3 / -1; }

.site-footer {
  margin-top: auto;
  padding: clamp(40px, 7vh, 80px) 0 clamp(18px, 3vh, 28px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
}

/* ---------- 7. Sub views (Coming Soon / Support / 404) ------------------- */
.view {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 3vh, 36px) var(--gutter) calc(var(--nav-total) + clamp(28px, 6vh, 72px));
}
.view-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  container-type: inline-size;
}

/* Coming Soon */
.soon-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(56px, calc(100cqw / 5.5), 228px);
  line-height: .92;
  letter-spacing: -.045em;
  text-align: center;
  white-space: nowrap;
}
.soon-title .serif-i { font-size: 1.05em; }
.hop-stage {
  --acorn-h: clamp(62px, 7.6vw, 104px);
  --acorn-w: calc(var(--acorn-h) * .8);
  --hop: clamp(52px, 7vw, 110px);
  --dot: clamp(7px, .75vw, 11px);
  position: relative;
  width: calc(var(--hop) * 3 + var(--acorn-w));
  height: calc(var(--acorn-h) + var(--hop) * .7);
  margin: 0 auto clamp(18px, 3.6vh, 40px);
}
.hop-x, .hop-y, .hop-sq { position: absolute; left: 0; bottom: 0; width: var(--acorn-w); height: var(--acorn-h); }
.hop-sq { transform-origin: 50% 100%; }
.hop-sq img { width: 100%; height: 100%; }
.hop-dot {
  position: absolute;
  bottom: 0;
  width: var(--dot); height: var(--dot);
  border-radius: 50%;
  background: var(--accent);
  left: calc(var(--acorn-w) / 2 - var(--dot) / 2);
}
.hop-dot:nth-child(2) { left: calc(var(--hop) + var(--acorn-w) / 2 - var(--dot) / 2); }
.hop-dot:nth-child(3) { left: calc(var(--hop) * 2 + var(--acorn-w) / 2 - var(--dot) / 2); }
/* resting state = final frame (used for reduced motion / no animation) */
.hop-x { transform: translateX(calc(var(--hop) * 3)); }

.soon-meta {
  margin-top: clamp(22px, 4vh, 44px);
  text-align: center;
  color: var(--muted);
}

/* Support */
.support-title {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .16em;
}
.support-head {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 7vw, 116px);
  line-height: 1;
  letter-spacing: -.04em;
}
.support-mail {
  margin-top: clamp(28px, 6vh, 72px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(100cqw / 10.7);
  line-height: 1.05;
  letter-spacing: -.035em;
  white-space: nowrap;
  -webkit-user-select: all;
  user-select: all;
  cursor: text;
}
.support-mail .at { font-family: var(--font-serif); font-style: italic; letter-spacing: 0; color: var(--accent); }
.support-actions {
  margin-top: clamp(22px, 4vh, 44px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.text-btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: 44px;
  border-bottom: 1px solid transparent;
}
.text-btn .nav-text { position: relative; padding: 4px 0; }
.text-btn .nav-text::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(.18); transform-origin: left center;
  transition: transform .5s var(--ease-out);
}
.text-btn:hover .nav-text::after, .text-btn:focus-visible .nav-text::after { transform: scaleX(1); }
.copy-status { color: var(--accent); min-width: 6em; }
.support-note {
  margin-top: clamp(36px, 7vh, 80px);
  max-width: 34em;
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
}

/* 404 */
.nf-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(56px, 12vw, 200px);
  line-height: .92;
  letter-spacing: -.045em;
}

/* ---------- 8. Motion (progressive enhancement) ------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* Hero intro — CSS only, so it runs even if JS fails */
  .wm-letter {
    animation: rise 1s var(--ease-out) both;
    animation-delay: calc(.08s + var(--i, 0) * .035s);
  }
  .eyebrow { animation: fade-up .9s var(--ease-out) .5s both; }
  .slogan .word > span { animation: rise 1s var(--ease-out) both; animation-delay: var(--wd, .4s); }

  /* Acorn tumble: X (decelerating roll in) · Y (bounces) · squash · rotation */
  .acorn-x { animation: tumble-x 1.75s cubic-bezier(.2, .62, .3, 1) .85s both; }
  .acorn-y { animation: tumble-y 1.75s linear .85s both; }
  .acorn-sq { animation: tumble-sq 1.75s linear .85s both; }
  .acorn-rot { animation: tumble-rot 1.75s linear .85s both; }

  /* Coming Soon hops */
  .hop-x { animation: hop-x 2.6s linear .45s both; }
  .hop-y { animation: hop-y 2.6s linear .45s both; }
  .hop-sq { animation: hop-sq 2.6s linear .45s both; }
  .hop-dot { animation: dot-pop .5s var(--ease-out) both; }
  .hop-dot:nth-child(1) { animation-delay: calc(.45s + 2.6s * .095); }
  .hop-dot:nth-child(2) { animation-delay: calc(.45s + 2.6s * .355); }
  .hop-dot:nth-child(3) { animation-delay: calc(.45s + 2.6s * .615); }
  .soon-title .word > span { animation: rise 1.05s var(--ease-out) both; animation-delay: var(--wd, 0s); }
  .view-fade { animation: fade-up .9s var(--ease-out) .15s both; }
  .view-fade--2 { animation-delay: .3s; }
  .view-fade--3 { animation-delay: .45s; }

  /* Scroll reveals (only when JS is running) */
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .9s var(--ease-soft), transform 1.1s var(--ease-out);
    transition-delay: var(--d, 0s);
  }
  html.js [data-reveal="mask"] { opacity: 1; transform: none; }
  html.js [data-reveal="mask"] .word > span {
    transform: translateY(108%);
    transition: transform 1.15s var(--ease-out);
    transition-delay: var(--d, 0s);
  }
  html.js [data-reveal="line"] { opacity: 1; transform: none; }
  html.js [data-reveal="line"]::before { transform: scaleX(0); transition: transform 1.4s var(--ease-out); }
  html.js [data-reveal].is-in { opacity: 1; transform: none; }
  html.js [data-reveal="mask"].is-in .word > span { transform: none; }
  html.js [data-reveal="line"].is-in::before { transform: none; }
  html.js .area[data-reveal="line"] .area-num,
  html.js .area[data-reveal="line"] .area-desc {
    opacity: 0; transform: translateY(14px);
    transition: opacity .9s var(--ease-soft) .25s, transform 1.1s var(--ease-out) .25s;
  }
  html.js .area[data-reveal="line"].is-in .area-num,
  html.js .area[data-reveal="line"].is-in .area-desc { opacity: 1; transform: none; }
  html.js .area[data-reveal="line"] .area-title .word > span { transform: translateY(108%); transition: transform 1.2s var(--ease-out) .08s; }
  html.js .area[data-reveal="line"].is-in .area-title .word > span { transform: none; }

  /* Korean headline: phrase-by-phrase, driven by scroll (JS sets --lp 0…1) */
  html.js .ih-phrase {
    opacity: calc(.14 + var(--lp, 0) * .86);
    transform: translateY(calc((1 - var(--lp, 0)) * .32em));
    will-change: opacity, transform;
  }
}

@keyframes rise { from { transform: translateY(108%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes dot-pop {
  0% { transform: scale(0); opacity: 0; }
  55% { transform: scale(1.45); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes tumble-x {
  from { transform: translateX(48vw); }
  to { transform: none; }
}
/* The acorn rolls in along the line of "Brighter Days." from the right,
   with small decreasing hops — it never crosses the headline. */
@keyframes tumble-y {
  0%   { transform: translateY(-.32em); opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .95, .5); }
  8%   { opacity: 1; }
  30%  { transform: translateY(0); animation-timing-function: cubic-bezier(.08, .55, .45, 1); }
  49%  { transform: translateY(-.42em); animation-timing-function: cubic-bezier(.55, 0, .92, .45); }
  67%  { transform: translateY(0); animation-timing-function: cubic-bezier(.08, .55, .45, 1); }
  78%  { transform: translateY(-.13em); animation-timing-function: cubic-bezier(.55, 0, .92, .45); }
  88%, 100% { transform: translateY(0); opacity: 1; }
}
@keyframes tumble-sq {
  0%, 27% { transform: none; }
  30% { transform: scale(1.12, .86); }
  36% { transform: scale(.95, 1.06); }
  43%, 64% { transform: none; }
  67% { transform: scale(1.09, .89); }
  72% { transform: scale(.97, 1.03); }
  76%, 86% { transform: none; }
  88% { transform: scale(1.07, .92); }
  94% { transform: scale(.985, 1.015); }
  100% { transform: none; }
}
@keyframes tumble-rot {
  0% { transform: rotate(480deg); animation-timing-function: cubic-bezier(.25, .55, .35, 1); }
  88%, 100% { transform: rotate(0deg); }
}

@keyframes hop-x {
  0%, 8%   { transform: translateX(0); }
  27%, 34% { transform: translateX(var(--hop)); }
  53%, 60% { transform: translateX(calc(var(--hop) * 2)); }
  81%, 100% { transform: translateX(calc(var(--hop) * 3)); }
}
@keyframes hop-y {
  0%, 8%  { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .62, .4, 1); }
  17.5%   { transform: translateY(calc(var(--hop) * -.62)); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  27%, 34% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .62, .4, 1); }
  43.5%   { transform: translateY(calc(var(--hop) * -.62)); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  53%, 60% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .62, .4, 1); }
  70.5%   { transform: translateY(calc(var(--hop) * -.7)); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  81%, 100% { transform: translateY(0); }
}
@keyframes hop-sq {
  0%    { transform: none; }
  5%    { transform: scale(1.1, .86); }
  8%    { transform: scale(.94, 1.08) rotate(-4deg); }
  17.5% { transform: rotate(7deg); }
  25%   { transform: scale(.97, 1.04) rotate(2deg); }
  27%   { transform: scale(1.12, .85); }
  31%   { transform: scale(1.06, .9); }
  34%   { transform: scale(.94, 1.08) rotate(-4deg); }
  43.5% { transform: rotate(7deg); }
  51%   { transform: scale(.97, 1.04) rotate(2deg); }
  53%   { transform: scale(1.12, .85); }
  57%   { transform: scale(1.06, .9); }
  60%   { transform: scale(.94, 1.08) rotate(-5deg); }
  70.5% { transform: rotate(9deg); }
  79%   { transform: scale(.97, 1.04) rotate(2deg); }
  81%   { transform: scale(1.15, .82); }
  86%   { transform: scale(.96, 1.05); }
  91%   { transform: scale(1.02, .98); }
  96%, 100% { transform: none; }
}

/* JS-free safety net: if the script never confirms, show everything */
html.no-anim [data-reveal],
html.no-anim [data-reveal] .word > span,
html.no-anim .area .area-num,
html.no-anim .area .area-desc { opacity: 1 !important; transform: none !important; }
html.no-anim [data-reveal]::before { transform: none !important; }
html.no-anim .ih-phrase { opacity: 1 !important; transform: none !important; }
html.no-anim .net .n { transform: none !important; }
html.no-anim .net .p { stroke-dashoffset: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  html.js .net .n { transform: none; }
}

/* ---------- 9. Responsive ----------------------------------------------- */
@media (max-width: 1024px) {
  .intro-net { grid-column: 1 / 8; }
  .intro-copy { grid-column: 8 / -1; }
  .area-desc { grid-column: 7 / -1; }
}

@media (max-width: 720px) {
  .label, .index { font-size: 11px; }

  /* Hero recomposition: stacked wordmark, four-line slogan */
  .wordmark { font-size: calc(100cqw / 3.2); line-height: .86; }
  .wm-word { display: block; width: fit-content; }
  .wm-word--lab { margin-left: auto; margin-right: -.04em; }

  .hero-bottom { padding-top: 32px; }
  .eyebrow {
    position: static;
    max-width: 15em;
    margin-bottom: clamp(26px, 6vh, 56px);
    font-size: 11px;
  }
  .slogan { --slogan-fs: calc(100cqw / 4.45); line-height: .96; }
  .slogan-line { padding-left: 0 !important; white-space: normal; }
  .slogan .word { display: block; width: fit-content; }
  .slogan-line--1 .word:nth-of-type(2),
  .slogan-line--2 .word-days-wrap { margin-left: auto; }
  .slogan-line--2 { display: block; }
  .word-days-wrap { display: flex; align-items: baseline; width: fit-content; }
  .word-days-wrap .word { display: inline-block; }

  /* Company */
  .intro { min-height: 0; padding-bottom: clamp(88px, 14vh, 140px); }
  .intro-head { font-size: clamp(38px, 12.6vw, 72px); line-height: 1.02; margin-top: clamp(56px, 12vh, 120px); }
  .br-mob { display: inline; }
  .ih-indent { margin-left: 0; }
  .ih-last { display: block; width: fit-content; margin-left: auto; }
  .intro-copy { grid-column: 1 / -1; grid-row: 3; margin-top: clamp(44px, 8vh, 72px); }
  .intro-copy p { font-size: 19px; line-height: 1.5; }
  .intro { overflow: hidden; overflow: clip; }
  .intro-net { grid-column: 1 / -1; grid-row: 4; width: 150%; margin: 56px 0 0 calc(-1 * var(--gutter) * .4); }
  .net .p { stroke-width: 1.5; }
  .net .p--main { stroke-width: 1.75; }

  /* What We Do */
  .area { padding: 22px 0 34px; }
  .area-num { grid-column: 1 / -1; padding-top: 0; margin-bottom: 14px; }
  .area-title, .area:nth-child(2) .area-title {
    grid-column: 1 / -1;
    grid-row: 2;
    white-space: normal;
    font-size: calc(100cqw / 4.25);
    line-height: .94;
  }
  .area-title .word { display: block; width: fit-content; }
  .area:nth-child(2) .area-title .word:nth-of-type(2) { margin-left: auto; }
  .area:nth-child(1) .area-title .word:nth-of-type(2) { margin-left: auto; }
  .area-desc { grid-column: 1 / -1; grid-row: 3; margin-top: 18px; font-size: 26px; }
  .site-footer { font-size: 12px; }

  /* Sub views */
  .soon-title { font-size: calc(100cqw / 3.05); white-space: normal; line-height: .9; }
  .soon-title .word { display: block; width: fit-content; margin-inline: auto; }
  .support-mail { font-size: calc(100cqw / 10.7); }
  .contact-menu { min-width: 220px; }
}

@media (max-width: 360px) {
  .nav-link { font-size: 13px; letter-spacing: .03em; }
}

/* Short landscape phones: keep hero composed */
@media (max-height: 520px) and (min-width: 560px) {
  .hero { min-height: 560px; }
}

/* menu detail */
.cm-status { order: -1; }
svg.cm-arrow { width: .62em; height: .62em; }

.cm-status { white-space: nowrap; }
.text-btn { text-transform: inherit; letter-spacing: inherit; font-weight: inherit; }

/* Portrait tablets share the stacked hero composition; vh caps keep the
   hero composed on short screens. */
@media (min-width: 721px) and (max-width: 1100px) and (orientation: portrait) {
  .wordmark { font-size: calc(100cqw / 3.2); line-height: .86; }
  .wm-word { display: block; width: fit-content; }
  .wm-word--lab { margin-left: auto; margin-right: -.04em; }
  .hero-bottom { padding-top: 32px; }
  .eyebrow { position: static; max-width: 17em; margin-bottom: clamp(26px, 5vh, 56px); }
  .slogan-line { padding-left: 0 !important; white-space: normal; }
  .slogan .word { display: block; width: fit-content; }
  .slogan-line--1 .word:nth-of-type(2),
  .slogan-line--2 .word-days-wrap { margin-left: auto; }
  .slogan-line--2 { display: block; }
  .word-days-wrap { display: flex; align-items: baseline; width: fit-content; }
  .word-days-wrap .word { display: inline-block; }
}
@media (max-width: 720px), (min-width: 721px) and (max-width: 1100px) and (orientation: portrait) {
  .wordmark { font-size: min(calc(100cqw / 3.2), 18vh); }
  .slogan { --slogan-fs: min(calc(100cqw / 4.45), 10.5vh); }
}
@media (max-width: 720px) and (max-height: 640px) {
  .eyebrow { margin-bottom: 18px; }
  .hero-bottom { padding-top: 20px; }
}
.nowrap { white-space: nowrap; }
.wordmark:focus { outline: none; }