/* =========================================================================
   CURRENT ON CENTER — V2 SITE LAYER
   Shared chrome + component system. Pairs with tokens-v2.css and motion.js.
   ========================================================================= */

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }        /* Lenis owns scrolling */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }

::selection { background: var(--terra); color: var(--cream); }

/* ---- grain atmosphere ---- */
body::after {
  content: ''; position: fixed; inset: -50%; z-index: 2147483000; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .05; mix-blend-mode: overlay;
  animation: grain 9s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0) } 20% { transform: translate(-4%,3%) }
  40% { transform: translate(3%,-4%) } 60% { transform: translate(-3%,-2%) }
  80% { transform: translate(4%,4%) }
}
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

/* =========================================================================
   TYPE UTILITIES
   ========================================================================= */
.display { font-family: var(--serif); font-weight: 400; line-height: var(--leading-display); letter-spacing: -.005em; }
.display em, .italic { font-style: italic; }
.d-hero { font-size: var(--display-hero); }
.d-xl   { font-size: var(--display-xl); }
.d-lg   { font-size: var(--display-lg); }
.d-md   { font-size: var(--display-md); line-height: 1.15; }

.eyebrow {
  font-family: var(--sans); font-weight: 600; font-size: var(--text-label);
  letter-spacing: var(--track-label); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .9em; color: var(--terra);
}
.eyebrow::before { content: ''; width: 2.6em; height: 1px; background: currentColor; }
.eyebrow--bare::before { display: none; }
.on-dark .eyebrow, .eyebrow--light { color: var(--tan-soft); }

.lede { font-size: var(--text-lede); font-weight: 300; line-height: 1.7; color: var(--ink-soft); max-width: var(--measure); }
.on-dark .lede { color: var(--paper-on-dark); }
.small { font-size: var(--text-small); }

.chapter-num {
  font-family: var(--serif); font-style: italic; font-size: var(--text-lede);
  color: var(--terra); letter-spacing: .04em;
}
.on-dark .chapter-num { color: var(--tan-soft); }

/* =========================================================================
   LAYOUT PRIMITIVES
   ========================================================================= */
.container { width: min(1520px, 100% - var(--gutter) * 2); margin-inline: auto; }
.container--wide { width: min(1720px, 100% - var(--gutter) * 2); margin-inline: auto; }
.section { padding-block: var(--sect-y); position: relative; }
.on-dark { background: var(--navy); color: var(--cream); }
.on-ink  { background: var(--navy-ink); color: var(--cream); }
.on-sage { background: var(--sage); color: var(--cream); }
.on-terra{ background: var(--terra); color: var(--cream); }
.on-dim  { background: var(--cream-dim); }

/* ---- subtle surface textures ----
   dark/sage surfaces: faint cream dot-grid; cream surfaces: faint navy dot-grid.
   Concentric "current" ripple echoes the brand C in one corner of dark sections. */
.on-dark, .on-ink, .on-sage, .on-terra {
  background-image:
    radial-gradient(rgba(255,246,236,.055) 1px, transparent 1.6px);
  background-size: 26px 26px;
}
section.on-dark::before, section.on-ink::before, footer.footer-v2::before {
  content: ''; position: absolute; right: -14%; top: -18%; width: 56vw; height: 56vw;
  max-width: 900px; max-height: 900px; pointer-events: none; opacity: .05;
  background: repeating-radial-gradient(circle at center,
    transparent 0 44px, rgba(255,246,236,.9) 44px 45.5px);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  mask-image: radial-gradient(circle, #000 30%, transparent 70%);
}
.footer-v2 { position: relative; }
.footer-v2 > .container { position: relative; }
section.on-dark > .container, section.on-ink > .container, section.on-sage > .container { position: relative; }
.on-dim {
  background-image: radial-gradient(rgba(29,44,56,.05) 1px, transparent 1.6px);
  background-size: 26px 26px;
}

/* editorial split — asymmetric 12-col */
.ed-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 3vw, 3rem); align-items: center; }
@media (max-width: 900px) { .ed-grid { grid-template-columns: 1fr; } .ed-grid > * { grid-column: 1 / -1 !important; } }

/* =========================================================================
   IMAGERY
   ========================================================================= */
.frame { position: relative; overflow: hidden; border-radius: var(--r-md); }
.frame--arch { border-radius: var(--r-arch); }
.frame--round { border-radius: var(--r-lg); }
.frame > img, .frame > video { width: 100%; height: 100%; object-fit: cover; }
.frame[data-parallax] > img, .frame[data-parallax] > video { height: 118%; width: 100%; will-change: transform; }

/* hover reveal card */
.peek { position: relative; overflow: hidden; }
.peek img { transition: transform 1.1s var(--ease-out); }
.peek:hover img { transform: scale(1.05); }
.peek__veil {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: var(--s-3);
  background: linear-gradient(to top, rgba(22,34,44,.62), transparent 55%);
  opacity: 0; transition: opacity var(--t-med) var(--ease-out); color: var(--cream);
}
.peek:hover .peek__veil { opacity: 1; }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn {
  --btn-bg: var(--navy); --btn-fg: var(--cream);
  position: relative; display: inline-flex; align-items: center; gap: .7em;
  padding: 1.02em 2.1em; border-radius: var(--r-pill);
  font-family: var(--sans); font-weight: 500; font-size: .92rem; letter-spacing: .05em;
  color: var(--btn-fg); background: var(--btn-bg); text-decoration: none;
  overflow: hidden; transition: color var(--t-fast) ease;
  isolation: isolate; white-space: nowrap;
}
.btn::before {           /* liquid fill sweep */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-fill, var(--terra));
  transform: translateY(101%); border-radius: 50% 50% 0 0;
  transition: transform .5s var(--ease-out), border-radius .5s var(--ease-out);
}
.btn:hover::before { transform: translateY(0); border-radius: 0; }
.btn .arr { display: inline-block; transition: transform var(--t-fast) var(--ease-out); }
.btn:hover .arr { transform: translateX(.35em); }

.btn--terra { --btn-bg: var(--terra); --btn-fill: var(--navy); }
.btn--sage  { --btn-bg: var(--sage);  --btn-fill: var(--navy); }
.btn--cream { --btn-bg: var(--cream); --btn-fg: var(--navy); --btn-fill: var(--tan); }
.btn--ghost {
  --btn-bg: transparent; --btn-fill: var(--cream);
  border: 1px solid var(--line-on-dark); color: var(--cream);
}
.btn--ghost:hover { color: var(--navy); }
.btn--ghost-ink { --btn-bg: transparent; --btn-fill: var(--navy); border: 1px solid var(--ink-faint); color: var(--ink); }
.btn--ghost-ink:hover { color: var(--cream); }

/* text link with sliding underline */
.tlink {
  display: inline-flex; align-items: baseline; gap: .5em; text-decoration: none;
  font-weight: 500; font-size: .95rem; letter-spacing: .03em; position: relative;
}
.tlink::after {
  content: ''; position: absolute; left: 0; bottom: -4px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(.35); transform-origin: left;
  transition: transform var(--t-med) var(--ease-out);
}
.tlink:hover::after { transform: scaleX(1); }

/* =========================================================================
   MARQUEE TICKER
   ========================================================================= */
.marquee { overflow: hidden; white-space: nowrap; user-select: none; padding-block: 1.1em; }
.marquee__track { display: inline-flex; gap: 0; will-change: transform; animation: marquee 36s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__unit { display: inline-flex; align-items: baseline; gap: 1.4em; padding-right: 1.4em; }
.marquee__unit span { font-family: var(--sans); font-weight: 500; font-size: .95rem; letter-spacing: .18em; text-transform: uppercase; }
.marquee__unit em { font-family: var(--serif); font-style: italic; font-size: 1.25rem; letter-spacing: 0; text-transform: none; }
.marquee__unit .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; align-self: center; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* =========================================================================
   NAVIGATION
   ========================================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  transition: transform var(--t-med) var(--ease-out), background var(--t-med) ease,
              box-shadow var(--t-med) ease, padding var(--t-med) ease;
}
.nav__inner {
  width: min(1720px, 100% - var(--gutter) * 2); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding-block: 1.35rem; transition: padding var(--t-med) ease;
}
.nav--scrolled { background: rgba(255,246,236,.86); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(29,44,56,.08); }
.nav--scrolled .nav__inner { padding-block: .8rem; }
.nav--hidden { transform: translateY(-105%); }

.nav__logo img { height: 40px; width: auto; transition: height var(--t-med) ease; }
.nav--scrolled .nav__logo img { height: 32px; }
/* over-hero (transparent on dark imagery) */
.nav--overlay:not(.nav--scrolled) .nav__logo img { filter: brightness(0) invert(1) sepia(.14) saturate(.6) hue-rotate(-10deg); }
.nav--overlay:not(.nav--scrolled) { color: var(--cream); }
.nav--overlay:not(.nav--scrolled) .nav__links a { color: var(--cream); }
.nav--overlay:not(.nav--scrolled) .nav__cta.btn--ghost-ink { border-color: var(--line-on-dark); color: var(--cream); }

.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); list-style: none; }
.nav__links a {
  text-decoration: none; font-size: .8rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink); position: relative; padding-block: .35em;
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-med) var(--ease-out);
}
.nav__links a:hover::after, .nav__links a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.nav__actions { display: flex; align-items: center; gap: .9rem; }
.nav__tel { text-decoration: none; font-size: .85rem; font-weight: 500; letter-spacing: .04em; }
.nav__cta { padding: .72em 1.5em; font-size: .8rem; }

.nav__burger { display: none; flex-direction: column; gap: 6px; padding: .6rem; z-index: 1001; }
.nav__burger span { width: 26px; height: 2px; background: currentColor; transition: transform var(--t-med) var(--ease-out), opacity var(--t-fast); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* mobile menu */
/* while the menu is open the nav must float above the overlay so the burger can close it */
body.menu-open .nav { z-index: 990; background: transparent; box-shadow: none; backdrop-filter: none; color: var(--cream); }
body.menu-open .nav__logo img { filter: brightness(0) invert(1) sepia(.14) saturate(.6) hue-rotate(-10deg); }
body.menu-open .nav__cta { visibility: hidden; }

.menu-overlay {
  position: fixed; inset: 0; z-index: 950; background: var(--navy-ink); color: var(--cream);
  display: flex; flex-direction: column; justify-content: center; padding: var(--gutter);
  clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease-in-out);
  visibility: hidden;
}
.menu-overlay.open { clip-path: inset(0 0 0% 0); visibility: visible; }
.menu-overlay nav { display: flex; flex-direction: column; gap: .2em; }
.menu-overlay a.mlink {
  font-family: var(--serif); font-size: clamp(2.2rem, 8vw, 4rem); text-decoration: none;
  color: var(--cream); line-height: 1.18; opacity: 0; transform: translateY(30px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), color .3s;
  width: fit-content;
}
.menu-overlay a.mlink:hover { color: var(--tan-soft); font-style: italic; }
.menu-overlay.open a.mlink { opacity: 1; transform: none; }
.menu-overlay .m-meta { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-4); color: var(--paper-on-dark); font-size: .9rem; }
.menu-overlay .m-meta a { color: inherit; }

@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__tel { display: none; }
  .nav__burger { display: flex; }
}

/* =========================================================================
   MEGA FOOTER
   ========================================================================= */
.footer-v2 { background: var(--navy-ink); color: var(--cream); overflow: hidden; position: relative; }
.footer-v2__cta { padding: var(--sect-y) 0 var(--s-6); border-bottom: 1px solid var(--line-on-dark); }
.footer-v2__cols {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: var(--s-5);
  padding-block: var(--s-6);
}
@media (max-width: 900px) { .footer-v2__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-v2__cols { grid-template-columns: 1fr; } }
.footer-v2 .f-label { font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--tan-soft); font-weight: 600; margin-bottom: 1.1em; }
.footer-v2 ul { list-style: none; display: flex; flex-direction: column; gap: .55em; }
.footer-v2 a { color: var(--paper-on-dark); text-decoration: none; transition: color var(--t-fast); }
.footer-v2 a:hover { color: var(--cream); }
.footer-v2 .f-body { color: var(--paper-on-dark); font-size: .95rem; line-height: 1.8; }
.footer-v2__mark {
  display: block; width: 100%; margin-bottom: -1.5vw; padding-top: var(--s-4);
  font-family: var(--serif); font-size: 13.2vw; line-height: .78; text-align: center;
  letter-spacing: .02em; color: transparent;
  -webkit-text-stroke: 1px rgba(255,246,236,.22);
  user-select: none; white-space: nowrap;
}
.footer-v2__legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding-block: var(--s-3); border-top: 1px solid var(--line-on-dark);
  font-size: .78rem; color: rgba(255,246,236,.5);
}
.footer-v2__legal img { height: 22px; filter: brightness(0) invert(1); opacity: .5; }
.sns-row { display: flex; gap: 1rem; }
.sns-row a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-on-dark); border-radius: 50%; transition: background var(--t-fast), border-color var(--t-fast); }
.sns-row a:hover { background: var(--terra); border-color: var(--terra); }
.sns-row svg { width: 15px; height: 15px; fill: var(--cream); }

/* =========================================================================
   MOTION HOOKS (JS adds .in when revealed; safe without JS)
   ========================================================================= */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-26px); }
[data-reveal="right"] { transform: translateX(26px); }
[data-reveal="scale"] { transform: scale(.94); }
html.no-motion [data-reveal] { opacity: 1 !important; transform: none !important; }

/* SplitText lines start hidden only when JS arms them.
   Padding + negative margin keeps serif descenders and italic overhangs
   visible despite the clip (tight display line-height would chop them). */
[data-split].split-armed .split-line {
  display: block; overflow: clip;
  padding: .12em .1em .22em; margin: -.12em -.1em -.22em;
}
[data-split].split-armed .split-line > div { will-change: transform; }

/* =========================================================================
   MISC
   ========================================================================= */
.skip { position: absolute; left: -9999px; top: 0; background: var(--navy); color: var(--cream); padding: 1em 2em; z-index: 2000; }
.skip:focus { left: 0; }
.pill-tag {
  display: inline-flex; align-items: center; gap: .6em; padding: .5em 1.1em;
  border: 1px solid var(--sand); border-radius: var(--r-pill);
  font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
.on-dark .pill-tag { border-color: var(--line-on-dark); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); position: relative; }
.live-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--sage); animation: pulse 2s var(--ease-out) infinite; }
@keyframes pulse { from { transform: scale(.5); opacity: 1 } to { transform: scale(1.6); opacity: 0 } }