/* ==========================================================================
   Kalos Construction Group — Design Tokens
   Palette pulled directly from the Beauty Built Better Book brand guide.
   Sleek / minimal direction: typography and whitespace carry hierarchy —
   no card chrome, no drop shadows, no boxed callouts.
   ========================================================================== */

@font-face {
  font-family: "Geosans Light";
  src: url("../fonts/GeosansLight.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geosans Light";
  src: url("../fonts/GeosansLight-Oblique.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Brand palette */
  --navy: #15233F;
  --navy-deep: #0E1A2E;
  --gold: #B0883C;
  --gold-light: #CBA85C;
  --bone: #F5F2EA;
  --ink: #1C2738;
  --slate: #5C6677;
  --white: #FFFFFF;

  /* Semantic tokens */
  --color-bg: var(--bone);
  --color-surface: var(--white);
  --color-text: var(--ink);
  --color-text-muted: var(--slate);
  --color-accent: var(--gold);
  --color-accent-light: var(--gold-light);
  --color-accent-on-light: #7A5A26;
  --color-inverse-bg: var(--navy);
  --color-inverse-text: var(--bone);
  --color-inverse-text-muted: #9CA5B4;

  /* Type */
  --font-serif: "Lora", Georgia, serif;
  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-wordmark: "Geosans Light", var(--font-sans);

  --fs-hero: clamp(2.75rem, 6vw + 1rem, 5.75rem);
  --fs-h2: clamp(2rem, 2.4vw + 1rem, 3rem);
  --fs-body-lg: clamp(1.05rem, 0.4vw + 1rem, 1.2rem);
  --fs-eyebrow: 0.78rem;

  /* Spacing rhythm (8px base) */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --section-pad: clamp(4.5rem, 9vw, 9rem);

  --container-max: 1200px;
  --container-narrow: 760px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-med: 500ms;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font: inherit; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--sp-6); }
}

section { position: relative; }

h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; color: var(--color-text); }
.on-dark h1, .on-dark h2, .on-dark p, .on-dark span { color: var(--color-inverse-text); }

.eyebrow {
  display: block;
  font-family: var(--font-wordmark);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-accent-on-light);
  margin-bottom: var(--sp-2);
}
.on-dark .eyebrow { color: var(--gold-light); }

.heading {
  font-size: var(--fs-h2);
  line-height: 1.18;
  max-width: 18ch;
}
.lede {
  font-size: var(--fs-body-lg);
  color: var(--color-text-muted);
  max-width: 56ch;
  font-weight: 300;
  margin-top: var(--sp-3);
}
.on-dark .lede { color: var(--color-inverse-text-muted); }

.rule {
  width: 40px;
  height: 1px;
  background: var(--color-accent);
  border: none;
  margin: var(--sp-4) 0;
}
.center .rule { margin-inline: auto; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* ==========================================================================
   Links & buttons — one solid button style; everything else is a text link
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 2.2em;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  background: var(--color-accent);
  color: var(--navy-deep);
  border-radius: 1px;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--gold-light); }
.btn:active { transform: scale(0.98); }

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  opacity: 0.85;
  transition: opacity var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out);
}
.link:hover { opacity: 1; gap: 0.75em; }

/* ==========================================================================
   Nav
   ========================================================================== */

.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: var(--sp-3) 0;
  transition: background var(--dur-med) var(--ease-out), padding var(--dur-med) var(--ease-out);
}
.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-nav.is-scrolled {
  background: rgba(21, 35, 63, 0.9);
  backdrop-filter: blur(10px);
  padding: var(--sp-2) 0;
}

.nav-logo { display: flex; align-items: center; gap: 0.6rem; }
.nav-logo img { height: 30px; width: auto; transform: translateY(-2px); }
.nav-logo span {
  font-family: var(--font-wordmark);
  color: var(--white);
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  margin: -8px;
  z-index: 110;
}
.nav-toggle span {
  width: 22px; height: 1px;
  background: var(--white);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: var(--sp-6);
  right: var(--sp-4);
  z-index: 99;
  min-width: 190px;
  background: rgba(14, 26, 46, 0.82);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(245, 242, 234, 0.1);
  border-radius: 10px;
  box-shadow: 0 20px 40px -12px rgba(14, 26, 46, 0.5);
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-med) var(--ease-out), visibility var(--dur-med), transform var(--dur-med) var(--ease-out);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu a {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--bone);
  opacity: 0.85;
  padding: 0.55em 0.7em;
  border-radius: 6px;
  transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.mobile-menu a:hover { opacity: 1; background: rgba(245, 242, 234, 0.06); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100dvh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--navy-deep);
}
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,26,46,0.5) 0%, rgba(14,26,46,0.3) 32%, rgba(14,26,46,0.5) 66%, rgba(14,26,46,0.88) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 var(--sp-4);
  max-width: 860px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-content { --hero-logo-w: clamp(150px, 22vw, 200px); }
.hero-logo-text {
  width: var(--hero-logo-w);
}
.hero-logo-icon {
  width: clamp(70px, 13vw, 92px);
  margin-top: var(--sp-1);
}
/*
  Height matches the cap-height of "A" in .hero-sub (Poppins Light cap-height
  measures 0.69 x font-size). Tile count/width is computed in JS (see
  layoutGreekKey in main.js): it fits as many whole, near-natural-aspect
  tiles as possible into --hero-logo-w with a small overlap to close seams,
  rather than forcing a fixed tile count to squish/stretch to an exact width.
*/
.greek-key {
  width: var(--hero-logo-w);
  /* A touch taller than the cap-height of "A" (0.69 x font-size) so the
     meander linework stays legible instead of blurring into a solid bar. */
  height: var(--fs-body-lg);
  display: flex;
  justify-content: center;
  /* kalos-text-white.png has ~17% baked-in transparent padding below the
     letters (155px of 900px tall canvas), but the key tile art has zero
     padding (its bars touch the image edge exactly). The icon's own padding
     is symmetric top/bottom so it cancels out of this comparison, but the
     wordmark/key mismatch doesn't — without this extra term the gap above
     the icon visually reads larger than the gap below it. This adds back
     exactly that missing padding, scaled to the wordmark's rendered size,
     so both visual gaps match. */
  margin-top: calc(var(--sp-1) + (var(--hero-logo-w) * 0.057386));
}
.greek-key img { flex-shrink: 0; }
.hero-headline {
  font-size: var(--fs-hero);
  color: var(--white);
  line-height: 1.08;
  /*
    Lora at this weight/size needs more vertical room than the tight 1.08
    line-height gives it, so the first line actually renders ~0.109 x the
    font-size ABOVE the element's own CSS box top (verified: at font-size
    92px the box reported an 8px gap from the key above, but the first
    line's true rendered top was 10px above the box itself, netting a
    visual gap of -2px, i.e. the text was overlapping the key). This adds
    that back so the true visual gap matches --sp-3, same as the gaps below.
  */
  margin-top: calc(var(--sp-3) + (var(--fs-hero) * 0.1087));
  font-weight: 500;
}
.hero-sub {
  color: #DCE1EA;
  font-size: var(--fs-body-lg);
  max-width: 44ch;
  /*
    Visual gap (measured glyph-to-glyph, not CSS-box-to-box) is what should
    match .hero-actions below. .hero-headline's tight 1.08 line-height makes
    its last line visually overflow its own box by ~0.094 x its font-size
    (descenders render past the line-height box since 1.08 is tighter than
    the font's natural metrics). .hero-sub's own line-height (1.7, inherited)
    adds ~0.104 x its font-size of leading above its first line. Both are
    corrected here so the visible gap equals --sp-3, matching .hero-actions.
  */
  margin-top: calc(var(--sp-3) + (var(--fs-hero) * 0.09392) - (var(--fs-body-lg) * 0.10417));
  font-weight: 300;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  /* .hero-sub's generous 1.7 line-height leaves ~0.19 x its font-size of
     leading below its last line already; this subtracts that back out so
     the visible vertical gap equals --sp-4, matching the horizontal gap
     between the button and link above. */
  margin-top: calc(var(--sp-4) - (var(--fs-body-lg) * 0.18963));
  flex-wrap: wrap;
  justify-content: center;
}
.hero-actions .link { color: var(--white); }

.scroll-cue {
  position: absolute;
  bottom: var(--sp-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(245,242,234,0.65);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: var(--font-wordmark);
}
.scroll-cue .chevron {
  width: 12px; height: 12px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: rotate(45deg) translate(0,0); }
  50% { transform: rotate(45deg) translate(3px, 3px); }
}

/* ==========================================================================
   Reveal-on-scroll — a single, subtle fade; no staggered card choreography
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   About / Story
   ========================================================================== */

.about { background: var(--color-surface); padding-bottom: var(--section-pad); }
.about-banner {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  margin-bottom: var(--sp-6);
}
.about-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.about-copy {
  max-width: var(--container-narrow);
  margin-inline: auto;
  text-align: center;
}
.about-copy .heading { max-width: none; }
.about-copy p { margin-top: var(--sp-3); color: var(--color-text-muted); font-size: var(--fs-body-lg); font-weight: 300; }
.about-copy p:first-of-type { margin-top: var(--sp-4); }

.pull-quote {
  margin-top: var(--sp-5);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1.4vw + 0.9rem, 1.5rem);
  color: var(--navy);
  line-height: 1.4;
}
.signature {
  margin-top: var(--sp-2);
  font-family: var(--font-wordmark);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.credential-line {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid #E7E1D0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}
.hba-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid #E7E1D0;
  /* GAHBA renders much wider than NAHB at matched height, so centering the
     pair as a bounding-box group leaves the visual gap between them sitting
     right of true center. Nudge left so the gap itself is centered instead. */
  transform: translateX(-38.6px);
}
.hba-logos img { height: 72px; width: auto; }

/* ==========================================================================
   Work / Gallery
   ========================================================================== */

.work { background: var(--color-bg); padding: var(--section-pad) 0; }
.gallery-carousel { position: relative; margin-top: var(--sp-5); }
.gallery-grid {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; }
  .g-1 { grid-column: span 2; grid-row: span 2; }
  .g-2 { grid-column: span 2; }
}
.gallery-item {
  overflow: hidden;
  min-height: 180px;
  transition: transform 500ms var(--ease-out);
}
.gallery-item:hover { transform: scale(1.015); }
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 600ms var(--ease-out);
  animation: kalosKenBurns 20s ease-in-out infinite alternate;
}
.gallery-item img.is-fading { opacity: 0; }

.g-1 img { transition-delay: 0ms; animation-duration: 19s; }
.g-2 img { transition-delay: 60ms; animation-duration: 23s; }
.g-3 img { transition-delay: 120ms; animation-duration: 21s; }
.g-4 img { transition-delay: 180ms; animation-duration: 25s; }

@keyframes kalosKenBurns {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.045) translate(-1.2%, 1%); }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-item img { animation: none; }
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px -8px rgba(21,35,63,0.3);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.gallery-arrow:hover { background: var(--gold); color: var(--navy-deep); transform: translateY(-50%) scale(1.06); }
.gallery-arrow:active { transform: translateY(-50%) scale(0.96); }
.gallery-arrow svg { pointer-events: none; }
.gallery-arrow.prev { left: var(--sp-2); }
.gallery-arrow.next { right: var(--sp-2); }
@media (min-width: 900px) {
  .gallery-arrow.prev { left: calc(-1 * var(--sp-6)); }
  .gallery-arrow.next { right: calc(-1 * var(--sp-6)); }
}

.gallery-dots {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.gallery-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D8D1BE;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.gallery-dots button:hover { background: var(--gold-light); }
.gallery-dots button.is-active { background: var(--gold); transform: scale(1.3); }

/* ==========================================================================
   Testimonials — plain text, no cards
   ========================================================================== */

.testimonials { background: var(--navy-deep); padding: var(--section-pad) 0; }
.testimonial-single {
  max-width: var(--container-narrow);
  margin: var(--sp-5) auto 0;
  min-height: 8em;
}
.testimonial-single .quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 1.4vw + 0.9rem, 1.6rem);
  color: var(--bone);
  line-height: 1.5;
  text-align: center;
  transition: opacity 900ms var(--ease-out);
}
.testimonial-single .attr {
  margin-top: var(--sp-2);
  text-align: center;
  font-family: var(--font-wordmark);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-light);
  transition: opacity 900ms var(--ease-out);
}
.testimonial-single.is-fading .quote,
.testimonial-single.is-fading .attr {
  opacity: 0;
}

/* ==========================================================================
   Book CTA / Lead magnet — photo + form, no illustrated cover
   ========================================================================== */

.book-cta { background: var(--color-surface); padding-bottom: var(--sp-6); }
.book-banner {
  width: 100%;
  aspect-ratio: 21/9;
  overflow: hidden;
  margin-bottom: var(--sp-6);
}
.book-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.book-copy { max-width: var(--container-narrow); margin-inline: auto; text-align: center; }
.book-copy .heading { max-width: none; }

.lead-form {
  margin: var(--sp-5) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 420px;
  text-align: left;
}
@media (min-width: 500px) {
  .lead-form { flex-direction: row; flex-wrap: wrap; }
  .lead-form .field { flex: 1 1 160px; }
  .lead-form button { flex: 1 1 100%; }
}
.lead-form .field { display: flex; flex-direction: column; gap: 6px; }
.lead-form label {
  font-family: var(--font-wordmark);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}
.lead-form input {
  padding: 0.8em 0;
  border: none;
  border-bottom: 1px solid #D8D1BE;
  background: transparent;
  color: var(--ink);
  font-size: 0.95rem;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.lead-form input:focus {
  outline: none;
  border-color: var(--gold);
}
.lead-form .form-note {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: var(--sp-1);
  text-align: center;
  flex: 1 1 100%;
}
.lead-form .error-msg {
  font-size: 0.76rem;
  color: #9A3B3B;
  min-height: 1em;
  display: none;
}
.lead-form .field.has-error input { border-color: #9A3B3B; }
.lead-form .field.has-error .error-msg { display: block; }

.lead-success {
  display: none;
  margin: var(--sp-5) auto 0;
  max-width: 420px;
  text-align: center;
}
.lead-success.is-visible { display: block; animation: fade-in 500ms var(--ease-out); }
.lead-success h4 { font-family: var(--font-serif); color: var(--navy); font-size: 1.1rem; font-weight: 500; }
.lead-success p { color: var(--color-text-muted); margin-top: 6px; font-size: 0.9rem; }
.lead-success .link { margin-top: var(--sp-3); color: var(--navy); }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--navy-deep);
  padding: var(--sp-6) 0 var(--sp-4);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid rgba(245,242,234,0.1);
}
.footer-inner img { height: 32px; width: auto; }
.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
}
.footer-social a {
  display: flex;
  color: #C7CCD7;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.footer-social a:hover { color: var(--gold-light); transform: translateY(-2px); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  align-items: center;
  padding-top: var(--sp-3);
  font-size: 0.74rem;
  color: #7C8494;
  text-align: center;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--gold);
  color: var(--navy-deep);
  padding: 0.8em 1.4em;
  z-index: 200;
  font-weight: 600;
}
.skip-link:focus { left: var(--sp-3); top: var(--sp-3); }

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