/* ============================================================
   & Ko. — Site chrome: header, nav, marquee, footer, forms
   ============================================================ */

/* ——— Header ——— */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  transition: transform 0.5s var(--ease-out), background-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.site-header.header-hide { transform: translateY(-102%); }
.site-header .header-in {
  width: var(--wrap); margin-inline: auto; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.site-header.scrolled {
  background: rgba(247, 240, 228, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--paper-deep);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand img { height: 46px; width: auto; }
.brand:hover img, .brand:focus-visible img { animation: brand-spin 0.85s var(--ease-out); }
@keyframes brand-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* Scroll-progress hairline (scaleX driven by main.js) */
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--terra); transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}
.brand .logo-dark { display: none; }
.site-header.header-dark .brand .logo-light { display: none; }
.site-header.header-dark .brand .logo-dark { display: block; }
.site-header.header-dark { background: transparent; box-shadow: none; backdrop-filter: none; }
.site-header.header-dark.scrolled { background: rgba(48, 37, 33, 0.88); }
.main-nav { display: flex; align-items: center; gap: 2.4rem; }
.main-nav a {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; text-decoration: none; color: var(--ink);
  padding-bottom: 0.4rem;
  background-image: linear-gradient(var(--terra), var(--terra));
  background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--dur) var(--ease-out), color var(--dur);
}
.main-nav a:hover, .main-nav a:focus-visible { background-size: 100% 2px; }
.main-nav a[aria-current="page"] { background-size: 100% 2px; color: var(--terra); }
.site-header.header-dark .main-nav a { color: var(--paper); }
.site-header.header-dark .main-nav a[aria-current="page"] { color: var(--rose); }
.header-cta { flex: none; padding: 0.8rem 1.5rem; }
.nav-toggle {
  display: none; flex: none; align-items: center; gap: 0.6rem;
  background: none; border: 0; cursor: pointer; color: var(--ink);
  font: 700 0.8rem var(--font-body); letter-spacing: 0.24em; text-transform: uppercase;
  padding: 0.6rem 0.2rem;
}
.site-header.header-dark .nav-toggle { color: var(--paper); }
.nav-toggle .bars { display: grid; gap: 5px; }
.nav-toggle .bars span { display: block; width: 26px; height: 2px; background: currentColor; transition: transform 0.35s var(--ease-out), opacity 0.3s; }
body.nav-open .nav-toggle .bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle .bars span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle .bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav {
  display: none;
  position: fixed; inset: var(--header-h) 0 auto 0; z-index: 990;
  background: var(--paper); border-bottom: 1px solid var(--paper-deep);
  padding: 1.2rem 4vw 2rem;
  transform: translateY(-12px); opacity: 0; pointer-events: none;
  transition: transform 0.4s var(--ease-out), opacity 0.35s;
}
body.nav-open .mobile-nav { transform: none; opacity: 1; pointer-events: auto; }
.mobile-nav a {
  display: block; padding: 0.85rem 0; text-decoration: none;
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 400;
  text-transform: uppercase; border-bottom: 1px solid var(--paper-deep);
}
.mobile-nav a[aria-current="page"] { color: var(--terra); }
.mobile-nav .btn { margin-top: 1.4rem; }
@media (max-width: 980px) {
  .main-nav, .site-header .header-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-nav { display: block; }
  :root { --header-h: 72px; }
  .brand img { height: 40px; }
}
main { padding-top: var(--header-h); }
main.no-offset { padding-top: 0; }

/* ——— Marquee divider ——— */
.marquee {
  border-block: 1px solid var(--paper-deep);
  padding-block: 1.1rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex; gap: 0; width: max-content;
  animation: marquee 36s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-set {
  display: flex; align-items: center; gap: 2.6rem; padding-right: 2.6rem;
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase;
  white-space: nowrap;
}
.marquee-set .dot { color: var(--terra); font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; line-height: 0; }
.marquee-set .amp { font-family: var(--font-script); text-transform: none; letter-spacing: 0; color: var(--teal); font-size: 1.5rem; font-weight: 400; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ——— Final CTA band ——— */
.final-cta { background: var(--ink); color: var(--paper); overflow: hidden; position: relative; }
.final-cta .eyebrow { color: var(--rose); }
.final-cta h2 { font-size: var(--text-h2); max-width: 16ch; }
.final-cta p { color: rgba(247, 240, 228, 0.82); max-width: 52ch; }
.final-cta .cta-grid { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 900px) { .final-cta .cta-grid { grid-template-columns: 1.5fr 1fr; } .final-cta .cta-side { justify-self: end; } }
.final-cta .big-amp {
  position: absolute; right: -2rem; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(16rem, 34vw, 30rem); line-height: 1; color: rgba(247, 240, 228, 0.05);
  pointer-events: none; user-select: none;
}

/* ——— Ferris wheel motif (decorative; behind CTA content) ——— */
.final-cta .wrap, .final-cta .marquee { position: relative; z-index: 1; }
.cta-wheel {
  position: absolute; right: -110px; top: 50%; transform: translateY(-50%);
  width: clamp(240px, 26vw, 360px); aspect-ratio: 1; opacity: 0.55;
  pointer-events: none; z-index: 0;
}
.cta-wheel svg { display: block; width: 100%; height: auto; overflow: visible; }
.cta-wheel .gw-rim, .cta-wheel .gw-spoke {
  fill: none; stroke: rgba(247, 240, 228, 0.55); stroke-width: 2.5;
}
.cta-wheel .gw-hanger { stroke: rgba(247, 240, 228, 0.55); stroke-width: 2; }
.cta-wheel .gw-hub { fill: var(--terra); }
.cta-wheel .gw-cabin rect { fill-opacity: 0.9; }
.cta-wheel .gw-window { fill: rgba(247, 240, 228, 0.38); }
.cta-wheel .gw-rotor {
  transform-box: view-box; transform-origin: center;
  animation: gw-spin 80s linear infinite;
}
.cta-wheel .gw-cabin-spin {
  transform-box: fill-box; transform-origin: 50% 0;
  animation: gw-spin-rev 80s linear infinite;
}
@keyframes gw-spin { to { transform: rotate(360deg); } }
@keyframes gw-spin-rev { to { transform: rotate(-360deg); } }
@media (max-width: 720px) { .cta-wheel { width: 200px; right: -80px; opacity: 0.4; } }
@media (max-width: 480px) { .cta-wheel { width: 170px; opacity: 0.35; } }

/* ——— Footer ——— */
.site-footer { background: var(--ink); color: var(--paper); padding: clamp(3.5rem, 7vw, 5.5rem) 0 2.2rem; position: relative; overflow: hidden; }
.footer-lockup { width: min(215px, 37vw); height: auto; margin-bottom: 2.6rem; will-change: transform, opacity; }
.footer-grid { display: grid; gap: 2.6rem; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; } }
.footer-grid h3 {
  font-size: 0.78rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--rose); margin-bottom: 1.1rem; font-family: var(--font-body); font-weight: 700;
}
.footer-grid ul { list-style: none; display: grid; gap: 0.55rem; }
.footer-grid a {
  text-decoration: none; color: rgba(247, 240, 228, 0.88);
  background-image: linear-gradient(var(--terra), var(--terra));
  background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--dur) var(--ease-out), color var(--dur);
  padding-bottom: 2px;
}
.footer-grid a:hover, .footer-grid a:focus-visible { background-size: 100% 1.5px; color: var(--paper); }
.footer-grid a.btn-paper { color: var(--ink); }
.footer-grid a.btn-paper:hover, .footer-grid a.btn-paper:focus-visible { color: var(--ink); }
/* Footer link underline rule above sets padding-bottom: 2px on every
   footer-grid link — on the button that collapses its bottom padding
   (16.8px top vs 2px bottom) and drops the label ~7.4px below center.
   Restore the button's symmetric padding. */
.footer-grid a.btn { padding-bottom: 1.05rem; }
.footer-tag { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; line-height: 1.3; max-width: 22ch; }
.footer-tag .script { font-size: 1.3em; }
.footer-base {
  margin-top: 3.2rem; padding-top: 1.4rem; border-top: 1px solid rgba(247, 240, 228, 0.16);
  display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; justify-content: space-between;
  font-size: 0.85rem; color: rgba(247, 240, 228, 0.62);
}
.footer-base a {
  color: rgba(247, 240, 228, 0.75); text-decoration: none; padding-bottom: 2px;
  background-image: linear-gradient(var(--terra), var(--terra));
  background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--dur) var(--ease-out), color var(--dur);
}
.footer-base a:hover, .footer-base a:focus-visible { background-size: 100% 1.5px; color: var(--paper); }

/* ——— Forms ——— */
.form-card {
  background: #FFFDF8; border: 1px solid var(--paper-deep); border-radius: var(--radius);
  padding: clamp(1.6rem, 3.4vw, 2.6rem); box-shadow: var(--shadow-warm);
}
.field { margin-bottom: 1.35rem; }
.field label { display: block; font-weight: 700; font-size: 0.92rem; margin-bottom: 0.5rem; }
.field label .req { color: var(--terra); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--paper-deep); border-radius: var(--radius);
  padding: 0.85rem 1rem; transition: border-color var(--dur), box-shadow var(--dur);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(40, 110, 107, 0.18);
}
.field [aria-invalid="true"] { border-color: var(--terra); }
.field-error { display: none; color: var(--terra-deep); font-size: 0.88rem; font-weight: 600; margin-top: 0.45rem; }
.field-error.show { display: block; }
.form-notice {
  display: none; border-radius: var(--radius); padding: 1.05rem 1.2rem; margin-bottom: 1.4rem;
  font-size: 0.97rem; line-height: 1.55;
}
.form-notice.show { display: block; }
.form-notice.warn { background: #FBEBDD; border: 1.5px solid var(--apricot); color: var(--ink); }
.form-notice.good { background: #E4EFE9; border: 1.5px solid var(--teal); color: var(--ink); }
.form-note { font-size: 0.88rem; color: var(--ink-faint); margin-top: 1rem; }

/* ============================================================
   Creative layer — sweeps, cursor, wipes, intro (v2 heavy pass)
   ============================================================ */

/* ——— Buttons: colour fill-sweep under the label ——— */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--ink);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.5s var(--ease-out);
}
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }
.btn-teal::after { background: var(--terra); }
.btn-paper::after { background: var(--butter); }

/* ——— Reverse marquee (ink zones) ——— */
.marquee-rev {
  border-block: 1px solid rgba(247, 240, 228, 0.16);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.marquee-rev .marquee-track { animation-direction: reverse; }
.marquee-rev .marquee-set {
  color: var(--paper); font-family: var(--font-display);
  font-weight: 400; font-size: 1rem; letter-spacing: 0.3em;
}
.marquee-rev .marquee-set .dot { color: var(--terra); }

/* ——— Homepage intro overlay —————————————————————————
   Hidden by default: no-JS and reduced-motion visits never
   see it. anim.js displays it (html.anim), plays it once per
   session, and removes it; html.intro-seen (set by the inline
   head script on repeat visits) keeps it out entirely. */
.intro-overlay {
  display: none; position: fixed; inset: 0; z-index: 3200;
  background: var(--paper); place-items: center;
}
html.anim:not(.intro-seen) .intro-overlay { display: grid; }
.intro-overlay img { width: min(300px, 62vw); height: auto; }
.intro-overlay.done { pointer-events: none; }

/* ——— CSS-only visibility backstop ————————————————————
   Independent of JavaScript timers and of GSAP's ticker.
   In a throttled phone webview (backgrounded tab, Low Power
   Mode) rAF and timers can both stall indefinitely, which
   left this page sitting on the blank intro overlay with the
   hero held in its script-set hidden states — every JS rescue
   shared the same stalled pipeline. CSS animations run on
   the rendering timeline instead, and a filling keyframe
   outranks the inline styles the script sets, so these two
   animations guarantee the overlay leaves by 3.4s and the
   hero lands in its final, visible state by 4s even if no
   script timer ever fires. On a healthy load the script finishes long before
   the delays elapse (overlay removed from the DOM, hero at
   these same end values), so the backstop never shows. */
@keyframes ko-intro-away {
  to { transform: translateY(-101%); visibility: hidden; }
}
html.anim:not(.intro-seen) .intro-overlay {
  animation: ko-intro-away 0.6s cubic-bezier(0.76, 0, 0.24, 1) 3.4s forwards;
}
@keyframes ko-hero-in {
  to { opacity: 1; transform: none; clip-path: none; }
}
html.anim .hero .line-in,
html.anim .hero .script-dot,
html.anim .hero [data-hero-fade] {
  animation: ko-hero-in 0.01s linear 4s forwards;
}
/* The script word's designed end state carries a -2deg tilt;
   its backstop lands on that exact state, not on none. */
@keyframes ko-script-in {
  to { opacity: 1; transform: rotate(-2deg); clip-path: none; }
}
html.anim .hero .script-pop {
  animation: ko-script-in 0.01s linear 4s forwards;
}
@keyframes ko-hero-clip {
  to { clip-path: none; }
}
html.anim .hero-photo {
  animation: ko-hero-clip 0.01s linear 4s forwards;
}

/* ——— Page-transition wipe (created by main.js) ——— */
.page-wipe {
  position: fixed; inset: 0; z-index: 3500; background: var(--paper);
  display: grid; place-items: center; pointer-events: none;
  will-change: transform;
}
.page-wipe.wipe-exit { pointer-events: auto; }
.page-wipe .wipe-amp {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 4.2rem; line-height: 1; color: var(--terra);
}

/* ——— Brand & cursor (Kaye's own logo ampersand) ———
   Replaces the dot-and-ring custom cursor, then the arrow. One rule covers
   the page and every interactive element, so links and buttons show the same
   & (never a hand). Hotspot 16 12 = the glyph's visual center. Falls back
   to auto. Asset: assets/img/cursor-amp.png, cropped from her real wordmark. */
html, body, a, button, input, textarea, select, label, summary, .nav-toggle {
  cursor: url("../img/cursor-amp.png") 16 12, auto;
}

/* ——— Form fields: focus underline sweep + lifting labels ——— */
.field label {
  transition: transform 0.35s var(--ease-out), color 0.35s;
  transform-origin: 0 100%;
}
.field.focused label, .field.filled label {
  transform: translateY(-0.14rem) scale(0.94); color: var(--teal);
}
.field input, .field textarea {
  background-image: linear-gradient(var(--teal), var(--teal));
  background-size: 0% 2px; background-repeat: no-repeat; background-position: 50% 100%;
  transition: background-size 0.5s var(--ease-out), border-color var(--dur), box-shadow var(--dur);
}
.field input:focus, .field textarea:focus { background-size: 100% 2px; }

/* ——— Contact form: editorial underline fields (scoped to .form-card
   so the shared .field base styles stay untouched for any other use).
   The teal focus sweep above (background-image) is preserved by using
   background-color here, never the background shorthand. ——— */
.form-card {
  background: rgba(238, 231, 180, 0.32); /* butter at low alpha over paper */
  padding: clamp(1.9rem, 4vw, 3rem);
}
.form-card .field input, .form-card .field textarea {
  background-color: transparent;
  border: 0; border-bottom: 1.5px solid rgba(48, 37, 33, 0.25);
  border-radius: 0;
  padding: 0.72rem 0.15rem;
}
.form-card .field input:focus, .form-card .field textarea:focus {
  box-shadow: none;
  border-bottom-color: rgba(48, 37, 33, 0.25); /* the teal sweep is the focus signal */
}
.form-card .field [aria-invalid="true"] { border-bottom-color: var(--terra); }