/* ===========================================================
   Wise Moon Build — Website chrome
   Shared layout styles for nav, footer, sections, components.
   Pulls tokens from ../colors_and_type.css
   =========================================================== */

/* Base reset + page background */
html, body {
  margin: 0;
  padding: 0;
  background: var(--bone);
  scroll-behavior: smooth;
}

img { display: block; max-width: 100%; }

/* ---------- Container ---------- */
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 48px;
}

/* ---------- Top navigation ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 48px;
  background: rgba(247,244,237,0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-base) var(--ease-out);
}
.nav.over-hero {
  background: transparent;
  border-bottom: 1px solid transparent;
}
.nav.over-hero .nav-link,
.nav.over-hero .lockup-top { color: var(--bone); }
.nav.over-hero .lockup-bot { color: rgba(247,244,237,0.7); }

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.nav-brand img { width: 42px; height: 42px; flex: 0 0 auto; }
.lockup { display: inline-flex; flex-direction: column; line-height: 0.92; white-space: nowrap; }
.lockup-top {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.lockup-bot {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  color: var(--stone);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 2px;
}
.lockup-tag {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  color: var(--stone);
  letter-spacing: 0.04em;
  margin-top: 6px;
  opacity: 0.9;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-link {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none !important;
  transition: color var(--dur-base) var(--ease-out);
}
.nav-link[aria-current="page"] {
  color: var(--ink);
  border-bottom: 2px solid var(--sun);
  padding-bottom: 2px;
}
.nav-link:hover { opacity: 0.7; }
.nav-brand,
.nav-brand:hover {
  text-decoration: none !important;
}
.btn, .btn:hover { text-decoration: none !important; }
.card, .card:hover { text-decoration: none !important; }
.footer-col a { text-decoration: none !important; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  border: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.btn-sun { background: var(--sun); color: var(--ink); }
.btn-sun:hover { background: var(--sun-deep); }
.btn-ink { background: var(--ink); color: var(--bone); }
.btn-ink:hover { background: #1d1d19; }
.btn-bone { background: var(--bone); color: var(--ink); }
.btn-bone:hover { background: var(--paper); }
.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--bone); }
.btn-ghost { background: transparent; color: var(--ink); padding-left: 4px; padding-right: 4px; }
.btn-ghost:hover { color: var(--stone); }
.btn-lg { padding: 16px 26px; font-size: 15px; }

/* ---------- Disc element (the yellow stamp) ---------- */
.disc {
  display: inline-block;
  border-radius: 999px;
  background: var(--sun);
  flex: 0 0 auto;
}

/* ---------- Section header ---------- */
.section-header {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 2.4fr;
  gap: 48px;
  align-items: end;
}
.section-header .kicker {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.section-header h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 5.5vw, 80px);
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--ink);
  line-height: 0.95;
  text-wrap: balance;
}
.section-header .lede {
  font-family: var(--font-sans);
  font-size: 19px;
  color: var(--char);
  margin-top: 18px;
  max-width: 56ch;
  line-height: 1.5;
}

/* ---------- Page hero (intra-page hero, smaller than home hero) ---------- */
.page-hero {
  padding: 180px 48px 80px;
  background: var(--bone);
}
.page-hero .kicker {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 5.2vw, 78px); /* page hero */
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--ink);
  line-height: 0.95;
  text-wrap: balance;
  max-width: 16ch;
}
.page-hero .lede {
  font-family: var(--font-sans);
  font-size: 19px;
  color: var(--char);
  margin-top: 22px;
  max-width: 56ch;
  line-height: 1.5;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--ink);
  color: var(--bone);
  padding: 64px 48px 28px;
}
.footer-grid {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 32px;
}
.footer-brand-line { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.footer-brand-line img { width: 56px; height: 56px; }
.footer-brand-line .lockup-top { color: var(--bone); font-size: 22px; }
.footer-brand-line .lockup-bot { color: var(--sun); font-size: 12px; }
.footer-tagline {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--sun);
  letter-spacing: 0.04em;
  margin: 8px 0 14px;
}
.footer-desc {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(247,244,237,0.72);
  margin: 0;
  max-width: 36ch;
}
.footer-col h2 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--sun);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.footer-col a {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--bone);
  text-decoration: none;
  padding: 4px 0;
  opacity: 0.92;
}
.footer-col a:hover { opacity: 1; color: var(--sun); }
.footer-base {
  max-width: var(--content-max);
  margin: 56px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(247,244,237,0.12);
  display: grid;
  gap: 16px;
}
.footer-nap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--bone);
  align-items: center;
}
.footer-nap .nap-label {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--sun);
}
.footer-nap a { color: var(--bone); text-decoration: none !important; }
.footer-nap a:hover { color: var(--sun); }
.footer-base-legal {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(247,244,237,0.55);
}

/* ---------- Project card ---------- */
.card {
  background: var(--paper);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-lift); }
.card-photo {
  aspect-ratio: 5 / 6;
  background-size: cover;
  background-position: center;
  position: relative;
}
.card-photo--wide { aspect-ratio: 4 / 5; }
.card-photo .seal {
  position: absolute;
  top: 14px; left: 14px;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--sun);
}
.card-body { padding: 18px 22px; }
.card-meta-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--stone);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.card-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
  line-height: 1.05;
}
.card-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--stone);
  margin-top: 6px;
}

/* ---------- Utility ---------- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow .disc { width: 8px; height: 8px; }

/* ---------- Editorial accents ---------- */
.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.eyebrow-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  color: var(--char);
  letter-spacing: 0;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow-serif::before {
  content: "";
  display: inline-block;
  width: 24px; height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.eyebrow-serif--inverse {
  color: rgba(247,244,237,0.85);
}
.divider-hairline {
  display: block;
  width: 64px; height: 1px;
  background: var(--ink);
  margin-bottom: 20px;
}
.numeral {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0;
}

/* ---------- Reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Editorial cards (variant of card) ---------- */
.card--editorial {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.card--editorial .card-photo {
  border-radius: var(--radius-md);
  overflow: hidden;
}
.card--editorial:hover { box-shadow: none; }
.card--editorial:hover .card-photo {
  transform: scale(1.02);
}
.card--editorial .card-photo {
  transition: transform 600ms var(--ease-out);
}
.card--editorial .card-body { padding: 18px 0 0; }

/* ---------- Phone link in nav ---------- */
.nav-call {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--ink);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.nav-call:hover { background: var(--ink); color: var(--bone); }
.nav.over-hero .nav-call { color: var(--bone); border-color: var(--bone); }
.nav.over-hero .nav-call:hover { background: var(--bone); color: var(--ink); }

/* ---------- Instagram icon in nav ---------- */
.nav-ig, .nav-fb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  text-decoration: none !important;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.nav-ig svg, .nav-fb svg { width: 19px; height: 19px; display: block; }
.nav-ig:hover, .nav-fb:hover { background: var(--ink); color: var(--bone); }
.nav.over-hero .nav-ig, .nav-fb { color: var(--bone); border-color: var(--bone); }
.nav.over-hero .nav-ig:hover, .nav.over-hero .nav-fb:hover { background: var(--bone); color: var(--ink); }
@media (max-width: 720px) {
  .nav-call { display: none; }
}

/* ---------- Sticky bottom CTA bar (mobile only) ---------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--ink);
  color: var(--bone);
  padding: 12px 16px;
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-top: 2px solid var(--sun);
  box-shadow: 0 -8px 24px rgba(14,14,12,0.18);
}
.sticky-cta strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.005em;
  line-height: 1.1;
}
.sticky-cta small {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  color: rgba(247,244,237,0.7);
  margin-top: 2px;
}
.sticky-cta .actions { display: flex; gap: 8px; flex-shrink: 0; }
.sticky-cta a {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  text-decoration: none !important;
  white-space: nowrap;
}
.sticky-cta .call { background: transparent; color: var(--bone); border: 1px solid rgba(247,244,237,0.5); }
.sticky-cta .book { background: var(--sun); color: var(--ink); }
@media (max-width: 720px) {
  .sticky-cta { display: flex; }
  body { padding-bottom: 76px; }
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--ink);
  color: var(--bone);
  padding: 8px 12px;
  z-index: 100;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ---------- Mobile hamburger ---------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  padding: 0 12px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease-out), opacity .2s; }
.nav.over-hero .nav-toggle { border-color: var(--bone); }
.nav.over-hero .nav-toggle span { background: var(--bone); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .container, .footer, .page-hero { padding-left: 24px; padding-right: 24px; }
  .nav { padding-left: 24px; padding-right: 24px; }
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bone);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 24px 48px rgba(14,14,12,0.14);
    padding: 8px 24px 22px;
    max-height: calc(100vh - 78px);
    overflow-y: auto;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links .nav-link {
    display: block;
    color: var(--ink) !important;
    font-size: 18px;
    padding: 15px 2px;
    border-bottom: 1px solid var(--border);
  }
  .nav-call {
    display: inline-flex !important;
    align-self: flex-start;
    color: var(--ink) !important;
    border-color: var(--ink) !important;
    margin-top: 16px;
  }
  .nav-links .nav-fb, .nav-links .nav-ig { display: none; }
  .nav-links .btn { margin-top: 14px; text-align: center; }
  .section-header { grid-template-columns: 1fr; gap: 16px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}


/* ---------- Image copyright protection ---------- */
img, .card-photo, .photo, .area-hero .photo, .article-hero, .service-photo,
.post-card .photo, .hero-photo, [style*="install-"] {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.card-photo, .photo, .article-hero, .service-photo, .post-card .photo, .hero-photo {
  position: relative;
}
.card-photo::after, .article-hero::after {
  content: "© Wise Moon Build";
  position: absolute;
  bottom: 8px; right: 10px;
  font-family: var(--font-sans, sans-serif);
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  pointer-events: none;
}


/* ---------- Mobile cut-off / overflow fixes ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; }
@media (max-width: 900px) {
  /* collapse any inline 2-col grids inside sections so nothing runs off-screen */
  section[class*="section--"] > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* stack label/value rows on contact */
  .channel, .review-row { grid-template-columns: 1fr !important; gap: 6px !important; }
  /* comparison table must fit the screen, wrap long words */
  .compare-table { table-layout: fixed; width: 100%; }
  .compare-table th, .compare-table td { word-break: break-word; overflow-wrap: anywhere; padding-left: 10px; padding-right: 10px; }
  .compare-table td:first-child { width: 30% !important; }
}



/* ---------- Hard guard: nothing overflows horizontally, ever ---------- */
* { min-width: 0; }
h1, h2, h3, h4, h5, h6, p, li, dd, dt, blockquote, a, span, figcaption {
  overflow-wrap: break-word;
}
img, svg, video, iframe, table { max-width: 100%; }
@media (max-width: 540px) {
  .hero h1 { font-size: clamp(32px, 11vw, 52px) !important; }
  .page-hero h1 { font-size: clamp(30px, 9.5vw, 52px) !important; }
  .section-header h2 { font-size: clamp(28px, 8.5vw, 48px) !important; }
}


/* ==================== MOTION LAYER ==================== */
/* Reveal — slightly richer than before */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }

/* Nav condense on scroll */
.nav { transition: background var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.nav.is-condensed { box-shadow: 0 6px 24px rgba(14,14,12,0.08); }
.nav.is-condensed .nav-brand img { transform: scale(0.9); }
.nav-brand img { transition: transform var(--dur-base) var(--ease-out); }

/* Hero entrance */
.wm-anim .hero h1, .wm-anim .hero .kicker, .wm-anim .hero .lede, .wm-anim .hero .btn-row,
.wm-anim .page-hero h1, .wm-anim .page-hero .kicker, .wm-anim .page-hero .lede {
  opacity: 0; transform: translateY(26px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.hero.anim-in .kicker, .page-hero.anim-in .kicker { opacity: 1; transform: none; transition-delay: 60ms; }
.hero.anim-in h1, .page-hero.anim-in h1 { opacity: 1; transform: none; transition-delay: 150ms; }
.hero.anim-in .lede, .page-hero.anim-in .lede { opacity: 1; transform: none; transition-delay: 280ms; }
.hero.anim-in .btn-row { opacity: 1; transform: none; transition-delay: 400ms; }
.hero.anim-ready h1, .hero.anim-ready .kicker, .hero.anim-ready .lede, .hero.anim-ready .btn-row,
.page-hero.anim-ready h1, .page-hero.anim-ready .kicker, .page-hero.anim-ready .lede { opacity: 1; transform: none; transition: none; }

/* Slow drift on the hero photo — subtle life, no distraction */
.hero-photo, .hero .photo { animation: wm-drift 26s ease-in-out infinite alternate; }
@keyframes wm-drift { from { transform: scale(1.02); } to { transform: scale(1.08); } }

/* Sun disc float */
.hero-disc, .seal { animation: wm-float 9s ease-in-out infinite alternate; }
@keyframes wm-float { from { transform: translateY(0); } to { transform: translateY(-12px); } }

/* Photo zoom on card hover */
.card-photo, .post-card .photo, .gallery .card-photo { transition: transform 700ms var(--ease-out); }
.card:hover .card-photo, .post-card:hover .photo { transform: scale(1.045); }
.card, .post-card { overflow: hidden; }
.card-photo, .post-card .photo { will-change: transform; }

/* Buttons: lift + arrow nudge */
.btn { transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(14,14,12,0.16); }
.btn:active { transform: translateY(0); }

/* Spec chips */
.spec-tag { transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 200ms var(--ease-out); }
.spec-tag:hover { background: var(--sun-wash); border-color: var(--sun); transform: translateY(-1px); }

/* Text link underline sweep */
.article-body a, .area-body a { background-image: linear-gradient(var(--sun), var(--sun)); background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 100%; transition: background-size 320ms var(--ease-out); text-decoration: none; }
.article-body a:hover, .area-body a:hover { background-size: 100% 2px; }

/* Social icons */
.nav-ig, .nav-fb { transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform 220ms var(--ease-out); }
.nav-ig:hover, .nav-fb:hover { transform: translateY(-2px); }

/* Respect reduced motion — kill all of it */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero h1, .hero .kicker, .hero .lede, .hero .btn-row,
  .page-hero h1, .page-hero .kicker, .page-hero .lede { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-photo, .hero .photo, .hero-disc, .seal { animation: none !important; }
  .card:hover .card-photo, .post-card:hover .photo, .btn:hover, .spec-tag:hover, .nav-ig:hover, .nav-fb:hover { transform: none !important; }
}


/* ==================== 1. NEVER CUT OFF — ANY SCREEN ==================== */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }
/* let genuine layout wrappers shrink — NOT every element (that squeezes nav items) */
.container, .section, .footer, .page-hero, .card, .card-body,
.service-row, .process-detail, .founder-grid, .gallery, .post-grid,
.work-strip, .service-grid, .reviews-grid, .article-body, .area-body { min-width: 0; }

/* long words / URLs can never push the page wide (prose only) */
h1, h2, h3, h4, h5, h6, p, li, dd, dt, blockquote, figcaption, .lede, .card-title, .card-meta {
  overflow-wrap: break-word;
}
/* never break inside a word; only an unbreakable string (long URL) may wrap */
.article-body, .area-body, p, li, blockquote, .lede { word-break: normal; overflow-wrap: break-word; }
td, th { word-break: break-word; }

/* Navigation & buttons are chrome, not prose — never break their labels */
.nav, .nav-brand, .lockup, .lockup-top, .lockup-bottom, .nav-links, .nav-link,
.nav-call, .nav-ig, .nav-fb, .nav-toggle, .btn, .filter-btn, .spec-tag {
  word-break: normal; overflow-wrap: normal; white-space: nowrap;
}
.nav-brand, .lockup, .nav-links { flex-shrink: 0; }
/* media and tables always fit */
img, svg, video, iframe, canvas, table, pre { max-width: 100%; }
img, svg, video { height: auto; }
table { table-layout: fixed; width: 100%; }
/* decorative overflow elements clipped, never scrolling the page */
.hero, .page-hero, section { overflow-x: clip; }

/* Fluid type so headlines shrink on small screens instead of clipping */
@media (max-width: 700px) {
  .hero h1 { font-size: clamp(30px, 10vw, 48px) !important; }
  .page-hero h1 { font-size: clamp(28px, 9vw, 46px) !important; }
  .section-header h2, .section-header h2 .serif { font-size: clamp(26px, 8vw, 42px) !important; }
  h2 { font-size: clamp(24px, 7.4vw, 40px); }
  h3 { font-size: clamp(20px, 5.6vw, 28px); }
}
@media (max-width: 380px) {
  .hero h1 { font-size: clamp(26px, 9.4vw, 38px) !important; }
  .page-hero h1 { font-size: clamp(25px, 8.6vw, 36px) !important; }
  .container, .footer, .page-hero, .nav { padding-left: 18px !important; padding-right: 18px !important; }
}
/* Very wide screens: keep content measured, never edge-to-edge text */
@media (min-width: 1800px) {
  .container { max-width: 1440px; margin-left: auto; margin-right: auto; }
}

/* ==================== 2. ALL PARAGRAPHS JUSTIFIED ==================== */
p, blockquote, .lede, dd {
  text-align: justify !important;
  text-align-last: left;
  -webkit-hyphens: none !important; hyphens: none !important;
}
/* chips/spec rows are flex, not text — don't let justify affect them */
.specs dd { text-align: left !important; }


/* mid-width nav — tighten spacing so the row fits without squeezing labels */
@media (min-width: 901px) and (max-width: 1120px) {
  .nav-links { gap: 18px; }
  .nav-link { font-size: 14px; }
  .nav-call { display: none; }
}


/* no hyphenation anywhere — words are never split across lines */
html, body, h1, h2, h3, h4, h5, h6, p, li, dd, dt, blockquote, a, span, td, th, figcaption, .lede {
  -webkit-hyphens: none !important; hyphens: none !important;
}

/* Big display quotes: justify leaves huge word gaps at this size, so the
   testimonial keeps its natural ragged right. */
blockquote { text-align: left !important; }


/* ==================== IMAGES: SHOW THE WHOLE PIECE ==================== */
/* Source photos are portrait; "cover" crops them. Content imagery now scales
   to fit inside its frame so the entire closet/build is visible at any size. */
.card-photo, .post-card .photo, .gallery .card-photo, .idea .photo,
.article-hero, .work-strip .card-photo, .founder-photo,
.service-photo, .service-row .service-photo {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-color: var(--sand);
}
img { object-fit: contain; }

/* ---------- Hero: portrait source in a wide frame ---------- */
/* Keep it filling the viewport (a letterboxed hero reads as broken), but give
   it more height on desktop so far more of the photograph is in frame. */
@media (min-width: 1100px) {
  .hero { min-height: min(96vh, 1040px); }
  .hero-photo, .hero .photo { background-position: center 42% !important; }
}
@media (min-width: 1600px) {
  .hero { min-height: min(94vh, 1120px); }
}

/* ==================== HAMBURGER: ANIMATED ==================== */
@media (max-width: 900px) {
  .nav-links {
    display: flex !important;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    transition: opacity 260ms var(--ease-out), transform 320ms var(--ease-out), max-height 380ms var(--ease-out);
  }
  .nav-links.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    max-height: calc(100vh - 78px);
    overflow-y: auto;
  }
  /* links cascade in behind the panel */
  .nav-links .nav-link, .nav-links .nav-call, .nav-links .btn {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
  }
  .nav-links.open .nav-link, .nav-links.open .nav-call, .nav-links.open .btn {
    opacity: 1;
    transform: translateY(0);
  }
  .nav-links.open .nav-link:nth-child(1) { transition-delay: 70ms; }
  .nav-links.open .nav-link:nth-child(2) { transition-delay: 110ms; }
  .nav-links.open .nav-link:nth-child(3) { transition-delay: 150ms; }
  .nav-links.open .nav-link:nth-child(4) { transition-delay: 190ms; }
  .nav-links.open .nav-link:nth-child(5) { transition-delay: 230ms; }
  .nav-links.open .nav-call { transition-delay: 270ms; }
  .nav-links.open .btn { transition-delay: 310ms; }
}
/* button itself: press feedback + smooth bar morph to X */
.nav-toggle { transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 180ms var(--ease-out); }
.nav-toggle:active { transform: scale(0.94); }
.nav-toggle span { transition: transform 300ms var(--ease-snap), opacity 180ms var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .nav-links, .nav-links .nav-link, .nav-links .nav-call, .nav-links .btn,
  .nav-toggle, .nav-toggle span { transition: none !important; }
}


/* ==================== DECORATIVE DISCS: STAY PUT ==================== */
/* Absolutely-positioned sun discs must anchor to (and be clipped by) their own
   section — otherwise they escape and land on top of photographs. */
.section, .page-hero, .hero, .service-section, footer.footer { position: relative; overflow: clip; }
/* The small "seal" dot is decoration — on phones it just covers the product photo. */
@media (max-width: 640px) {
  .seal, .card-photo .seal, .service-row .service-photo .seal { display: none !important; }
}

/* ==================== HAMBURGER — REFINED MORPH ==================== */
.nav-toggle {
  position: relative;
  display: none;
  width: 48px; height: 48px;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background 240ms var(--ease-out), border-color 240ms var(--ease-out), transform 200ms var(--ease-out);
}
@media (max-width: 900px) { .nav-toggle { display: block; } }
.nav-toggle span {
  position: absolute;
  left: 50%; top: 50%;
  width: 20px; height: 2px;
  margin-left: -10px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 420ms cubic-bezier(0.68, -0.4, 0.28, 1.4), opacity 200ms var(--ease-out), width 300ms var(--ease-out);
}
.nav-toggle span:nth-child(1) { transform: translateY(-7px); }
.nav-toggle span:nth-child(2) { transform: translateY(0); width: 14px; margin-left: -10px; }
.nav-toggle span:nth-child(3) { transform: translateY(7px); }
/* open: bars converge, middle retracts, outers cross into an X */
.nav-toggle[aria-expanded="true"] { background: var(--sun); border-color: var(--sun); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(0) rotate(45deg); transition-delay: 60ms; }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { width: 0; opacity: 0; transition-delay: 0ms; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(0) rotate(-45deg); transition-delay: 60ms; }
.nav-toggle:hover { background: var(--sun-soft); }
.nav-toggle[aria-expanded="true"]:hover { background: var(--sun-deep); }
.nav-toggle:active { transform: scale(0.92); }
.nav.over-hero .nav-toggle { border-color: var(--bone); }
.nav.over-hero .nav-toggle span { background: var(--bone); }
.nav.over-hero .nav-toggle[aria-expanded="true"] span { background: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .nav-toggle, .nav-toggle span { transition: none !important; }
}


/* ==================== SECTION MODIFIERS (shared) ==================== */
/* These were previously defined only inside index.html's inline <style>, so on
   every other page the dark CTA band rendered light — white text on bone with
   the accent disc floating over it. Now available site-wide. */
.section--sand { background: var(--sand); }
.section--paper { background: var(--paper); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section--ink { background: var(--ink); color: var(--bone); position: relative; overflow: hidden; }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--bone); }

/* Decorative disc sits behind the copy, always */
.section--ink > [aria-hidden="true"] { z-index: 0; }
.section--ink > *:not([aria-hidden="true"]) { position: relative; z-index: 1; }


/* CTA band on phones: stack the copy above the button */
@media (max-width: 760px) {
  .section--ink > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    align-items: start !important;
  }
}


/* ==================== NARROW PHONES: ONE COLUMN ==================== */
/* Two columns on a ~390px screen leaves ~160px per card — headings break
   mid-word ("Mad/e to") and copy turns to rivers. Collapse to one column. */
@media (max-width: 700px) {
  .values-grid,
  .stats-grid,
  .service-grid,
  .work-strip,
  .post-grid,
  .reviews-grid,
  .gallery,
  .footer-grid,
  .about-intro-grid,
  .founder-row,
  .founder-grid,
  .process,
  .service-row,
  .process-detail {
    grid-template-columns: 1fr !important;
  }
  /* stats are short — two up still reads fine */
  .stats-grid { grid-template-columns: 1fr 1fr !important; }
  .values-grid { gap: 14px !important; }
  .value { padding: 26px !important; }
}

/* Headings must never break inside a word */
h1, h2, h3, h4, h5, h6,
.value h3, .card-title, .section-header h2 {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}
/* only a single unbreakable long word may wrap, as a last resort */
h1, h2, h3 { overflow-wrap: anywhere; }

/* Justified text needs a usable measure; below that, rag right */
@media (max-width: 430px) {
  .value p, .card-meta, .stat-block p { text-align: left !important; }
}


/* ==================== ACCENT DISC: READ AS A CIRCLE ==================== */
/* At 640px inside a clipped section the disc got sliced flat by the section
   edge and read as a yellow slab. Size it to the space and keep it whole. */
.section.section--ink > [aria-hidden="true"][style*="border-radius"], .section.section--ink .cta-disc {
  width: clamp(180px, 16vw, 300px) !important;
  height: clamp(180px, 16vw, 300px) !important;
  right: clamp(32px, 5vw, 96px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: 1;
}
/* Tablet: let it bleed slightly off the edge — still clearly circular */
@media (max-width: 1100px) {
  .section.section--ink > [aria-hidden="true"][style*="border-radius"], .section.section--ink .cta-disc {
    width: 200px !important; height: 200px !important;
    right: -48px !important;
  }
}
/* Phone: a small corner accent that never crowds the copy */
@media (max-width: 760px) {
  .section.section--ink > [aria-hidden="true"][style*="border-radius"], .section.section--ink .cta-disc {
    width: 130px !important; height: 130px !important;
    right: -44px !important;
    top: auto !important; bottom: 22px !important;
    transform: none !important;
    opacity: 0.85;
  }
}

/* Hero disc: same problem at the top-right of the hero */
.hero-disc {
  width: clamp(120px, 12vw, 200px) !important;
  height: clamp(120px, 12vw, 200px) !important;
  right: clamp(28px, 4vw, 72px) !important;
}
@media (max-width: 760px) {
  .hero-disc { width: 110px !important; height: 110px !important; right: -34px !important; }
}


/* seal only over imagery — with letterboxed photos it landed on bare sand */
.card-photo .seal, .service-row .service-photo .seal, .founder-photo .seal, .article-hero .seal { display: none !important; }


/* ==================== DISCS MUST NEVER TOUCH CONTROLS ==================== */
/* Decoration sits clear of the nav strip and of any button. */

/* Hero disc: drop it below the fixed nav, and remove it entirely on phones
   where the hamburger occupies that corner. */
.hero .hero-disc, .hero-disc {
  top: clamp(120px, 14vh, 190px) !important;
  bottom: auto !important;
  right: clamp(24px, 3vw, 64px) !important;
  width: clamp(96px, 9vw, 150px) !important;
  height: clamp(96px, 9vw, 150px) !important;
  transform: none !important;
  z-index: 0 !important;
}
@media (max-width: 900px) {
  .hero .hero-disc, .hero-disc { display: none !important; }
}

/* CTA disc: pin to the TOP-right of the band. The action button is bottom-right,
   so the two can never collide at any width. */
.section.section--ink > [aria-hidden="true"][style*="border-radius"], .section.section--ink .cta-disc {
  top: clamp(28px, 5vh, 64px) !important;
  bottom: auto !important;
  transform: none !important;
  right: clamp(28px, 4vw, 80px) !important;
  width: clamp(120px, 11vw, 210px) !important;
  height: clamp(120px, 11vw, 210px) !important;
  z-index: 0 !important;
}
@media (max-width: 1100px) {
  .section.section--ink > [aria-hidden="true"][style*="border-radius"], .section.section--ink .cta-disc {
    width: 150px !important; height: 150px !important;
    top: 24px !important; right: 20px !important;
  }
}
/* Phones: the band stacks, so the disc becomes a small top-corner mark */
@media (max-width: 760px) {
  .section.section--ink > [aria-hidden="true"][style*="border-radius"], .section.section--ink .cta-disc {
    width: 92px !important; height: 92px !important;
    top: 18px !important; right: 16px !important;
    opacity: 0.9;
  }
}

/* Buttons and the nav always render above decoration */
.nav { z-index: 100; }
.btn, .nav-toggle, .nav-links, .nav-call, .nav-ig, .nav-fb { position: relative; z-index: 2; }


/* hamburger sits at the far right of the nav row, never beside the logo */
@media (max-width: 900px) {
  .nav { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; }
  .nav-brand { margin-right: auto !important; flex-shrink: 1 !important; min-width: 0 !important; }
  .nav .nav-toggle {
    display: block !important;
    order: 99 !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
  }
  /* the dropdown panel spans the full width beneath the bar */
  .nav .nav-links {
    position: absolute !important;
    top: 100% !important; left: 0 !important; right: 0 !important;
    order: 100 !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
}