/* ============================================================
   AWESOME GROUP CONSTRUCTION — Brand Book v3.0
   Master brand: Additions · Full Remodels · Custom Kitchens

   WHAT CHANGED FROM v2.0
   ----------------------
   Retained   Lake Blue #0D5BAA as the sole brand identifier (5–10% ink)
              Deep Navy #0B1D3A as the primary dark
              Montserrat as the UI / body / eyebrow face
   Added      Stone #EFE9E0 — warm-neutral light canvas (replaces flat white)
              Sand  #DCD2C3 — warm type color on dark (never pure white)
              Instrument Serif 400 — display face, used large and never bold
   Retired    Montserrat 700 headings. Headings are serif, weight 400.
              Pure #FFFFFF as a canvas. White is now a highlight only.

   THE TWO-CANVAS RULE
   Every section sits on exactly one of two grounds — Stone or Navy — and
   consecutive sections should alternate. Nothing else is a background.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Canvases */
  --navy:        #0B1D3A;
  --navy-deep:   #071427;
  --navy-soft:   #12294A;
  --stone:       #EFE9E0;
  --stone-deep:  #E4DCCE;

  /* Ink */
  --sand:        #DCD2C3;
  --sand-dim:    rgba(220, 210, 195, 0.58);
  --sand-faint:  rgba(220, 210, 195, 0.18);
  --ink:         #0B1D3A;
  --body:        #3B4657;
  --body-dim:    rgba(59, 70, 87, 0.62);
  --hairline:    rgba(11, 29, 58, 0.16);

  /* Identifier — 5–10% of ink, never a canvas */
  --lake:        #0D5BAA;
  --lake-light:  #7AAEE8;

  --white:       #FFFFFF;

  /* Fluid unit. Everything spatial is a multiple of --u so the whole
     layout breathes continuously instead of jumping at breakpoints. */
  --u: clamp(0.62px, calc(0.62px + 0.38 * ((100vw - 480px) / 1440)), 1px);

  --shell: 0 clamp(20px, 5.2vw, 120px);
  --ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-slow: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: calc(var(--u) * 17);
  line-height: 1.62;
  letter-spacing: -0.005em;
  color: var(--body);
  background: var(--stone);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--lake); color: var(--stone); }

/* ---------- 3. Type scale ----------
   Display is Instrument Serif, weight 400, tracking negative, leading
   under 1. It is never bolded and never uppercased above 40px. */

.d0, .d1, .d2, .d3, .serif {
  font-family: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.022em;
  line-height: 0.92;
  color: var(--ink);
}

.d0 { font-size: calc(var(--u) * 172); line-height: 0.86; letter-spacing: -0.032em; }
.d1 { font-size: calc(var(--u) * 112); line-height: 0.90; letter-spacing: -0.026em; }
.d2 { font-size: calc(var(--u) *  74); line-height: 0.95; }
.d3 { font-size: calc(var(--u) *  46); line-height: 1.02; letter-spacing: -0.016em; }

.d0 em, .d1 em, .d2 em, .d3 em { font-style: italic; }

/* The eyebrow: tiny, wide, quiet. Montserrat 500, never bigger than 12px. */
.eyebrow {
  font-size: calc(var(--u) * 11);
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--body-dim);
}

/* The second line under a serif title — the Springs "ESSENCE OF …" move. */
.overline {
  font-size: calc(var(--u) * 12);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink);
}

.lead {
  font-size: calc(var(--u) * 21);
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: var(--body);
  max-width: 44ch;
}

.prose { max-width: 56ch; }
.prose p + p { margin-top: 1.1em; }

.small {
  font-size: calc(var(--u) * 14);
  line-height: 1.6;
  color: var(--body-dim);
}

/* ---------- 4. Canvases ---------- */
.on-navy {
  background: var(--navy);
  color: var(--sand-dim);
}
.on-navy .d0, .on-navy .d1, .on-navy .d2, .on-navy .d3, .on-navy .serif,
.on-navy .overline { color: var(--sand); }
.on-navy .eyebrow, .on-navy .small { color: var(--sand-dim); }
.on-navy .lead { color: var(--sand); }
.on-navy { --hairline: var(--sand-faint); }

.on-stone { background: var(--stone); color: var(--body); }

/* The two-canvas rule says sections alternate. Where the content genuinely
   wants two of the same ground in a row, a full-bleed hairline marks the
   seam so the two do not silently merge into one endless band. */
.on-navy + .on-navy,
.on-stone + .on-stone { border-top: 1px solid var(--hairline); }

.accent { color: var(--lake); }
.on-navy .accent { color: var(--lake-light); }

/* ---------- 5. Layout ---------- */
.shell { padding: var(--shell); }
.band  { padding-block: calc(var(--u) * 148); }
.band--tight { padding-block: calc(var(--u) * 96); }

.rule { height: 1px; background: var(--hairline); border: 0; }

/* Editorial two-column: text left, image right (or reversed). */
.spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 6vw, 120px);
  align-items: center;
}
.spread--flip > :first-child { order: 2; }

.stack-sm > * + * { margin-top: calc(var(--u) * 18); }
.stack-md > * + * { margin-top: calc(var(--u) * 30); }
.stack-lg > * + * { margin-top: calc(var(--u) * 56); }

/* ---------- 6. Figures ---------- */
.fig {
  position: relative;
  overflow: hidden;
  background: var(--stone-deep);
}
.fig img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.4s var(--ease-slow);
}
a:hover > .fig img, .fig:hover img { transform: scale(1.06); }
.fig--tall  { aspect-ratio: 3 / 4; }
.fig--wide  { aspect-ratio: 16 / 10; }
.fig--square{ aspect-ratio: 1 / 1; }

/* ---------- 7. Buttons & links ----------
   No filled blocks above the fold. The primary action is a hairline
   capsule; the secondary is an underline that draws itself. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  padding: calc(var(--u) * 17) calc(var(--u) * 34);
  border: 1px solid var(--hairline);
  border-radius: 100px;
  font-size: calc(var(--u) * 12);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  background: transparent;
  transition: background .55s var(--ease), color .55s var(--ease),
              border-color .55s var(--ease);
}
.btn:hover { background: var(--navy); border-color: var(--navy); color: var(--sand); }
.on-navy .btn { color: var(--sand); }
.on-navy .btn:hover { background: var(--sand); border-color: var(--sand); color: var(--navy); }

.btn--solid { background: var(--navy); border-color: var(--navy); color: var(--sand); }
.btn--solid:hover { background: var(--lake); border-color: var(--lake); color: var(--white); }

.btn__arrow { transition: transform .55s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.link-u {
  display: inline-block;
  position: relative;
  font-size: calc(var(--u) * 12);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-bottom: 5px;
  color: inherit;
}
.link-u::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .6s var(--ease-slow);
}
.link-u:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- 8. Reveal on scroll ---------- */
.rv {
  opacity: 0;
  transform: translateY(calc(var(--u) * 26));
  transition: opacity 1.1s var(--ease-slow), transform 1.1s var(--ease-slow);
  transition-delay: var(--rv-delay, 0ms);
}
.rv.is-in { opacity: 1; transform: none; }

/* Serif display reveals by line, clipped — the expensive-looking one. */
.rv-lines { display: block; }
.rv-lines > span {
  display: block;
  overflow: hidden;
}
.rv-lines > span > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.25s var(--ease-slow);
  transition-delay: calc(var(--rv-delay, 0ms) + var(--line, 0) * 90ms);
}
.rv-lines.is-in > span > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .rv-lines > span > span { opacity: 1; transform: none; transition: none; }
  .fig img { transition: none; }
}

/* ---------- 9. Utilities ---------- */
.u-center { text-align: center; }
.u-mono-num {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: calc(var(--u) * 96);
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.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;
}
.skip-link {
  position: absolute; top: -60px; left: 16px; z-index: 999;
  background: var(--navy); color: var(--sand);
  padding: 12px 20px; border-radius: 4px;
}
.skip-link:focus { top: 16px; }

:focus-visible { outline: 2px solid var(--lake); outline-offset: 3px; }

/* ---------- 10. Responsive ---------- */
@media (max-width: 860px) {
  .spread { grid-template-columns: 1fr; gap: 34px; }
  .spread--flip > :first-child { order: 0; }
  .band { padding-block: calc(var(--u) * 110); }
  :root { --u: clamp(0.60px, calc(0.44px + 0.048vw * 1.6), 0.88px); }
  .d0 { font-size: calc(var(--u) * 108); }
  .d1 { font-size: calc(var(--u) * 82); }
  .d2 { font-size: calc(var(--u) * 60); }
  .d3 { font-size: calc(var(--u) * 42); }
  body { font-size: calc(var(--u) * 21); }
  .lead { font-size: calc(var(--u) * 22); }
}