/* ============================================================
   Georgian Custom Homes — navigation refinement + mobile corrections
   Layered over the v5 prototype styles.
   ============================================================ */

/* ---------- 1. Navigation (all viewports) ------------------- */

header {
  padding: 20px 34px !important;
  background: #F6F6F1 !important;      /* solid, not see-through */
  -webkit-backdrop-filter: none !important;   /* the prototype sets blur(10px) inline */
  backdrop-filter: none !important;
  border-bottom: 1px solid transparent;
  transition: padding 0.35s cubic-bezier(0.22,0.7,0.2,1),
              border-color 0.35s ease, background-color 0.35s ease;
}
header.gc-scrolled {
  padding: 12px 34px !important;
  background: #F6F6F1 !important;
  border-bottom-color: #D8DACB;
}

/* Brand lockup — georgian-logo-final.png, the exact asset the live site ships.
   One file everywhere; dark grounds invert it rather than loading a second
   variant (the white master is spaced differently and would not match). */
.gc-brand { display: block; flex-shrink: 0; }
.gc-brand img { height: 44px; width: auto; display: block; }
.gc-brand-foot {
  align-self: flex-start;          /* flex column would otherwise stretch it */
  height: 40px !important; width: auto !important; max-width: 100%; display: block;
}
.gc-foot-invert { filter: brightness(0) invert(1); opacity: 0.92; }

header > div:first-child { gap: 46px !important; }

/* Nav links: small caps, wide tracking — the register used by galleries
   and architecture practices rather than software marketing sites. */
header nav a {
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.17em !important;
  text-transform: uppercase;
  color: #4A4D44 !important;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}
header nav a:hover { color: #1E211C !important; border-bottom-color: #6E7A55 !important; }
header nav { gap: 30px !important; flex-wrap: nowrap !important; }

/* Phone: quieter than the nav, separated by a hairline */
header > div:last-child > a[href^="tel:"] {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em;
  color: #4A4D44 !important;
  padding-right: 22px;
  border-right: 1px solid #D8DACB;
}
header > div:last-child > a[href^="tel:"]:hover { color: #1E211C !important; }
header > div:last-child { gap: 22px !important; }

/* CTA: inset and tracked, no longer a full-height black slab */
header > div:last-child > a[href="/contact/"] {
  padding: 13px 26px !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.19em !important;
  text-transform: uppercase;
  background: #1E211C;
  color: #FFFFFF !important;
  border: 1px solid #1E211C;
  transition: background-color 0.3s ease, color 0.3s ease;
}
header > div:last-child > a[href="/contact/"]:hover {
  background: transparent;
  color: #1E211C !important;
}

/* Condensed state once the page is scrolled */

/* ---------- 1b. Narrow desktop / laptop (1041–1280px) --------
   Six nav items plus the phone need more room than a 13" laptop has.
   Tighten the rhythm and drop the phone before anything can overflow. */
@media (min-width: 1041px) and (max-width: 1280px) {
  header, header.gc-scrolled { padding-left: 22px !important; padding-right: 22px !important; }
  header > div:first-child { gap: 28px !important; }
  header nav { gap: 20px !important; }
  header nav a { font-size: 10px !important; letter-spacing: 0.13em !important; }
  header > div:last-child > a[href^="tel:"] { display: none !important; }
  header > div:last-child > a[href="/contact/"] { padding: 12px 20px !important; }
}

/* The bottom action bar and hamburger are mobile-only. They are injected into
   the DOM on every viewport, so they must be hidden by default — otherwise the
   bar renders as unstyled text ("Call  Discuss your project") on desktop. */
.gc-bottom-bar, .gc-menu-btn { display: none; }

/* ---------- 2. Mobile ≤1040px ------------------------------- */
@media (max-width: 1040px) {
  /* NOTE: do NOT put overflow-x on html/body — either `hidden` or `clip`
     creates a containing block that breaks the sticky header. The individual
     overflow sources are clamped directly below instead. */
  body { max-width: 100%; }
  img, video, iframe { max-width: 100%; height: auto; }

  /* ---- Full-bleed hero ----
     Two things broke this: the section's own 8px margin left a cream strip on
     all four sides, and clamping the parallax layer to max-width:100% left it
     ~30px short of the negative inset it needs to cover, so the section's dark
     background showed through. On mobile there is no pointer to drive parallax,
     so the layer is pinned flush and the scale removed. */
  section[data-screen-label="Hero"] { margin: 0 !important; }
  .m-stage > div {
    inset: 0 !important;
    transform: none !important;
    max-width: none !important;
    width: 100% !important;
    /* The content layer carries 24px of horizontal padding under content-box
       sizing, so width:100% resolved to viewport + 48px — the whole hero
       lockup sat 48px right of true centre. Desktop was unaffected because
       this block is mobile-only. */
    box-sizing: border-box !important;
  }
  .m-stage img {
    transform: none !important;
    max-width: none !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
  }
  .m-duo, .m-duo > *, .m-duo a { max-width: 100% !important; min-width: 0 !important; }
  section > div, article > div { max-width: 100%; }
  a > img, figure > img, picture > img { max-width: 100% !important; height: auto; }
  a { max-width: 100%; }

  /* Dark-register pages (architecture / interiors / construction) repaint the
     header dark at runtime with inline priority. Same strategy as the footer:
     invert the one logo master on dark grounds. gc-dark is set by mobile-nav.js
     from the page's own colours. */
  html.gc-dark header .gc-brand img { filter: brightness(0) invert(1); opacity: 0.94; }

  /* Hero stage labels: the 12px translateX is a desktop hover affordance.
     On mobile the auto-rotate triggers it and the word visibly slides —
     the selected label should only italicize. */
  .gc-stagelabel { transform: none !important; }

  /* Tap targets for a 45+ audience */
  header a, footer a { min-height: 44px; display: inline-flex; align-items: center; }
  .gc-drawer a { min-height: 52px; }

  /* ---- Glass header: wordmark + hamburger only ----
     The phone and CTA both live in the bottom action bar, so the header
     carries nothing but identity and the way in. */
  /* The prototype wraps the header in a short container, so `position: sticky`
     releases as soon as that wrapper scrolls past. Fixed positioning is the
     reliable equivalent; body padding compensates for the removed flow height. */
  header, header.gc-scrolled {
    position: fixed !important; top: 0; left: 0; right: 0; z-index: 60;
    padding: 16px 20px !important;
    background: #F6F6F1 !important;      /* solid, not see-through */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid rgba(30,33,28,0.07) !important;
  }
  header.gc-scrolled { border-bottom-color: rgba(30,33,28,0.12) !important; }
  .gc-brand img { height: 34px !important; }

  /* everything except the wordmark comes out of the header on mobile */
  header nav,
  header > div:last-child > a[href^="tel:"],
  header > div:last-child > a[href="/contact/"] { display: none !important; }
  header > div:last-child { gap: 0 !important; }

  /* ---- Hamburger ---- */
  .gc-menu-btn {
    position: fixed; z-index: 61;
    width: 46px; height: 46px; padding: 0 !important;
    border: 1px solid rgba(30,33,28,0.14) !important;
    border-radius: 50%;
    background: rgba(246,246,241,0.80) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.7);
    backdrop-filter: blur(20px) saturate(1.7);
    display: none; align-items: center; justify-content: center;
    flex-direction: column; gap: 5px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }
  .gc-menu-btn span {
    display: block; width: 17px; height: 1px;
    background: var(--ink, #1E211C);
    transition: transform 0.32s cubic-bezier(0.22,0.7,0.2,1), opacity 0.2s ease;
  }
  .gc-menu-btn.is-open .gc-bar-1 { transform: translateY(6px) rotate(45deg); }
  .gc-menu-btn.is-open .gc-bar-2 { opacity: 0; }
  .gc-menu-btn.is-open .gc-bar-3 { transform: translateY(-6px) rotate(-45deg); }
  .gc-menu-btn.is-open { border-color: rgba(30,33,28,0.28) !important; }

  /* --- Horizontal-overflow guards (found in the mobile run-through) --- */
  /* Desktop-scale side padding inside a collapsed 2-col: 56px each side leaves
     ~262px of a 374px column, so long words forced the page 6px wide. */
  .m-2col > div[style*="padding: 96px 56px"] { padding: 56px 22px !important; }

  /* Wide-tracked eyebrows (0.3em) can measure past the viewport as one
     unbreakable run. Let them wrap and ease the tracking. */
  span[style*="letter-spacing: 0.3em"],
  span[style*="letter-spacing: 0.34em"],
  span[style*="letter-spacing: 0.4em"] {
    letter-spacing: 0.22em !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    max-width: 100%;
  }

  /* Project detail grids: two-up on mobile */
  .m-detail-grid { grid-template-columns: 1fr 1fr !important; gap: 20px 14px !important; }

  /* Persistent bottom action bar */
  .gc-bottom-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 58;
    display: grid; grid-template-columns: 1fr 1.25fr;
    background: rgba(246,246,241,0.97); backdrop-filter: blur(10px);
    border-top: 1px solid #D8DACB; box-shadow: 0 -6px 24px rgba(20,23,15,0.10);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .gc-bottom-bar a {
    display: flex; align-items: center; justify-content: center; min-height: 56px;
    font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  }
  .gc-bottom-bar .gc-call { color: #1E211C; border-right: 1px solid #D8DACB; }
  .gc-bottom-bar .gc-cta  { background: #1E211C; color: #FFFFFF; }
  /* Clear the fixed action bar plus a little air, so the last footer link
     is never sitting underneath it. */
  body.gc-bar-on { padding-bottom: 96px; }
  body.gc-bar-on footer { padding-bottom: 24px; }
  body { padding-top: var(--gc-header-h, 76px); }
  .gc-drawer-open .gc-bottom-bar { display: none; }
}

@media (max-width: 640px) {
  header, header.gc-scrolled { padding: 14px 16px !important; }
}

/* Dark-register pages (Architecture / Interiors / Construction) —
   glass tuned to the darker ground. */
@media (max-width: 1040px) {
  body[style*="12140E"] header,
  body[style*="#12140E"] header,
  .gc-dark header {
    background: rgba(18,20,14,0.86) !important;
    border-bottom-color: rgba(237,234,224,0.10) !important;
  }
  .gc-dark .gc-menu-btn {
    background: rgba(18,20,14,0.80) !important;
    border-color: rgba(237,234,224,0.22) !important;
  }
}

/* ---------- 3. Stacked story cards ---------------------------
   Design stories / Featured interiors alternate image-left and image-right on
   desktop, so when they collapse to one column the DOM order puts the title
   above the photo on every second card. Pin the photo first at every stack. */
@media (max-width: 900px) {
  a.m-2col > img { order: -1 !important; }
  a.m-2col { display: grid !important; }
}

/* ---------- 4. Stacked "table" lists ------------------------
   .m-3up / .m-4up cells carry borders computed from their COLUMN position:
   border-right on all but the 3rd, border-top only from row two down, and
   asymmetric left/right padding. Correct in a grid; once stacked it reads as
   lines appearing at random.

   Specificity note: each page injects its own `.m-3up { … !important }` AFTER
   this stylesheet, so a single class here loses the cascade even with
   !important. Doubling the class (.m-3up.m-3up) raises specificity above it
   without needing to touch 25 pages.

   Border colour derives from currentColor so one rule serves both the cream
   and the dark-forest registers. */
@media (max-width: 900px) {
  .m-3up.m-3up, .m-4up.m-4up {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    background: transparent !important;   /* the 1px-gap hairline ground */
    border: 0 !important;
  }
  .m-3up.m-3up > div, .m-4up.m-4up > div {
    border-right: 0 !important;
    border-left: 0 !important;
    border-bottom: 0 !important;
    border-top: 1px solid rgba(128,128,128,0.32) !important;
    border-top-color: color-mix(in srgb, currentColor 20%, transparent) !important;
    padding: 22px 0 24px !important;
    background: transparent !important;
    /* a cell carrying `grid-column: span 2` (renovations 07) spawns a second
       implicit track regardless of grid-template-columns — reset the span. */
    grid-column: auto !important;
  }
  .m-3up.m-3up > div:first-child, .m-4up.m-4up > div:first-child {
    border-top: 0 !important;
    padding-top: 2px !important;
  }
  /* image grids inside these wrappers keep their own rhythm */
  .m-3up.m-3up > figure, .m-4up.m-4up > figure { border: 0 !important; }
  /* .m-creds is a true hairline grid and stacks correctly on its own. */
}


/* ---------- 5. Orphan control (all viewports) ----------------
   The prototype sets `text-wrap: pretty` inline on most headings. `pretty`
   only discourages a lone last word; `balance` actively evens the lines, which
   is what a display serif needs. Inline styles beat a stylesheet, so these
   need !important.

   Cap: browsers stop balancing past ~6 lines, so this is safe on long copy —
   it simply stops applying rather than degrading.

   Body copy keeps `pretty`: balancing a paragraph would make it look ragged.
   `pretty` there just prevents the single-word final line. */
h1, h2, h3, h4,
.m-display,
blockquote {
  text-wrap: balance !important;
}

p, li, figcaption,
p + span, .m-lede {
  text-wrap: pretty;
}


/* ---------- 6. Editorial Michelle spread (interiors) --------- */
@media (max-width: 900px) {
  .m-capt { left: 20px !important; right: 20px; bottom: 20px !important; letter-spacing: 0.2em !important; }
}