/* Shared design tokens + components for Ali's Construction category pages.
   The homepage (index.html) is a dark, cinematic experience — near-black
   sections (#11110f / #0b0b0a / #121210) for nearly the whole page, with only
   the marquee strip and the "assembly" section breaking to a light tone for
   rhythm. These subpages now use the same dark-first palette so they read as
   a continuation of the homepage rather than a separate, brighter site.
   --paper/--stone are kept for the one deliberate light beat (the "Related
   services" panel near the end of each page), mirroring the homepage's own
   light interlude — everything else here is dark. */
:root {
  --ink: #171713; --stone: #f1eee7; --paper: #faf9f5; --clay: #a86e48;
  --sage: #8e9582; --line: rgba(255,255,255,.14); --muted: rgba(255,255,255,.62);
  --text: #f4f1ea;
  --serif: Georgia, 'Times New Roman', serif; --sans: Arial, Helvetica, sans-serif;
  --max: 1280px; --radius: 18px; --ease: cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: var(--ink); font-family: var(--sans); line-height: 1.5; }
body.menu-open { overflow: hidden; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.skip { position: fixed; left: 1rem; top: -5rem; z-index: 999; background: white; padding: .8rem 1rem; }
.skip:focus { top: 1rem; }
.wrap { width: min(calc(100% - 2.5rem), var(--max)); margin-inline: auto; }
.eyebrow { margin: 0 0 1.2rem; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; }
.title { font: 400 clamp(2.4rem, 5vw, 5rem)/.96 var(--serif); letter-spacing: -.045em; margin: 0; }
.lede { max-width: 46rem; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.2rem); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: .85rem 1.3rem; border: 1px solid transparent; border-radius: 100px; background: var(--ink); color: white; font-weight: 700; font-size: .82rem; letter-spacing: .04em; transition: transform .25s var(--ease), background .25s; cursor: pointer; }
.btn:hover { transform: translateY(-2px); background: #34332d; }
.btn--light { background: white; color: var(--ink); }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--text); }
:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }
section { padding: clamp(5rem, 9vw, 9rem) 0; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* Header / nav — dark translucent, matching the homepage's header treatment
   (white hairline border on a dark ground) instead of a light frosted bar. */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(17,17,15,.82); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.18); }
.nav { min-height: 84px; display: flex; align-items: center; justify-content: space-between; }
.brand { font: 600 1.15rem/1 var(--serif); letter-spacing: -.02em; color: var(--text); }
.brand small { display: block; margin-top: .35rem; font: 600 .5rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; opacity: .6; }
.navlinks { display: flex; align-items: center; gap: 1.8rem; font-size: .78rem; font-weight: 700; }
.navlinks a:not(.btn) { position: relative; padding: .3rem 0; color: var(--text); }
.navlinks a:not(.btn)::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -.1rem; height: 1px; background: currentColor; transition: right .25s; }
.navlinks a:hover::after { right: 0; }
.has-dropdown { position: relative; }
.dropdown { position: absolute; top: 100%; left: 50%; translate: -50% 0; margin-top: .6rem; background: rgba(20,20,17,.98); border: 1px solid var(--line); border-radius: 14px; padding: .5rem; display: grid; min-width: 190px; box-shadow: 0 24px 60px rgba(0,0,0,.4); opacity: 0; visibility: hidden; transform: translate(-50%,6px); transition: opacity .2s, transform .2s, visibility .2s; }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translate(-50%,0); }
.dropdown a { display: block; padding: .6rem .8rem; border-radius: 8px; font-weight: 600; color: var(--text); }
.dropdown a::after { display: none; }
.dropdown a:hover { background: rgba(255,255,255,.08); }
.dropdown a.current { color: var(--clay); }
.menu { display: none; background: none; border: 0; color: var(--text); font-size: .8rem; font-weight: 700; }
@media (max-width: 820px) {
  .menu { display: block; }
  .navlinks { display: none; position: fixed; inset: 0; background: var(--ink); padding: 6.5rem 1.3rem 2rem; flex-direction: column; align-items: flex-start; font: 400 2rem var(--serif); gap: 1.2rem; }
  .menu-open .navlinks { display: flex; }
  .menu-open .menu { position: fixed; right: 1.25rem; top: 1.6rem; z-index: 60; }
  .dropdown { position: static; translate: none; box-shadow: none; border: 0; opacity: 1; visibility: visible; transform: none; display: none; margin: .5rem 0 0 1rem; padding: 0; }
  .has-dropdown.open .dropdown { display: grid; }
}

/* Page-to-page cinematic transition overlay (subpages only — index.html is
   never touched, so this only fires when the click originates on a subpage). */
.page-transition { position: fixed; inset: 0; z-index: 999; background: var(--ink); pointer-events: none; transform: scaleY(1); transform-origin: top; transition: transform .65s cubic-bezier(.65,0,.35,1); will-change: transform; }
.page-transition.is-leaving { pointer-events: auto; }

/* Category hero banner */
.page-hero { position: relative; min-height: 66svh; display: grid; align-items: end; color: white; overflow: hidden; }
.page-hero-bg { position: absolute; inset: -4% -4%; z-index: -1; background: #111 center/cover; filter: brightness(.55) saturate(.85); transform: scale(1.08); transition: transform 1.15s var(--ease); }
.page-hero.hero-in .page-hero-bg { transform: scale(1); }
.page-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(8,8,7,.82)); }
.page-hero .wrap { padding-bottom: clamp(2.5rem,6vw,5rem); }
.page-kicker { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; opacity: .78; margin-bottom: 1rem; }
.page-hero h1 { font: 400 clamp(2.6rem,6vw,5.5rem)/1 var(--serif); letter-spacing: -.03em; margin: 0 0 1.1rem; }
.page-hero p { max-width: 42rem; color: rgba(255,255,255,.82); font-size: clamp(1rem,1.4vw,1.2rem); margin: 0; }
.page-crumbs { display: flex; gap: .5rem; align-items: center; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; opacity: .7; margin-bottom: 1.4rem; }
.page-crumbs a { text-decoration: underline; text-underline-offset: 3px; }

/* Hero cinematic entrance: heading rises through a clipped mask, supporting
   copy fades up with a stagger, scroll cue appears last. Disabled entirely
   under reduced motion (see bottom of file). */
.hero-mask { overflow: hidden; }
.hero-mask h1 { transform: translateY(112%); transition: transform .9s var(--ease); transition-delay: .15s; }
.page-hero.hero-in .hero-mask h1 { transform: translateY(0); }
.hero-fade { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.page-hero.hero-in .hero-fade { opacity: 1; transform: none; }
.page-hero .page-crumbs.hero-fade { transition-delay: .05s; }
.page-hero .page-kicker.hero-fade { transition-delay: .05s; }
.page-hero p.hero-fade { transition-delay: .4s; }
.hero-scroll { display: inline-flex; align-items: center; gap: .7rem; margin-top: 2.2rem; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); opacity: 0; transition: opacity .6s var(--ease); transition-delay: .8s; }
.page-hero.hero-in .hero-scroll { opacity: 1; }
.hero-scroll::after { content: ''; width: 1px; height: 24px; background: rgba(255,255,255,.5); animation: scrollpulse 1.8s ease-in-out infinite; }
@keyframes scrollpulse { 0%,100% { transform: scaleY(.4); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* Category intro / CTA strip */
.page-intro { display: grid; grid-template-columns: .8fr 1.6fr; gap: clamp(2rem,6vw,6rem); align-items: start; }
.page-cta { background: var(--clay); color: white; text-align: center; }
.page-cta .title { color: white; }
.page-cta .lede { color: rgba(255,255,255,.82); margin-inline: auto; }
.page-cta .btn { margin-top: 2rem; }

/* Concise informational sections (homeowner's challenge, our approach,
   process, FAQ) use tighter padding than the big immersive sections (hero,
   photo chapters, philosophy quote), and reduce (not eliminate) the gap
   between two that sit back-to-back, so a two-part idea (challenge →
   approach, process → FAQ) reads as one connected block with a modest,
   deliberate buffer — not a large dead gap, and not jammed together either. */
.section-tight { padding: clamp(3rem,5vw,4.5rem) 0; }
.section-tight + .section-tight { padding-top: clamp(1.75rem,3vw,2.75rem); }

/* Homeowner's challenge / our approach — concise, text-led sections that sit
   between the hero and the photo chapters. Deliberately restrained: no extra
   imagery, generous whitespace, one clear idea per section. */
.split-section .wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2.5rem,6vw,6rem); align-items: start; }
.split-section .split-label { color: var(--clay); }
.split-section h2 { margin: 0 0 1.4rem; }
.split-section ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .9rem; }
.split-section li { padding-left: 1.6rem; position: relative; color: var(--muted); font-size: 1rem; line-height: 1.5; }
.split-section li::before { content: ''; position: absolute; left: 0; top: .65rem; width: 8px; height: 1px; background: var(--clay); }
.split-section .approach-lede { color: var(--muted); font-size: 1.05rem; max-width: 42rem; margin: 0 0 1.6rem; }
.split-section--alt .wrap { grid-template-columns: 1.15fr .85fr; }
.split-section--alt .split-copy { order: 2; }
.split-section--alt .split-side { order: 1; }

/* Process steps */
.process-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.process-step { display: grid; grid-template-columns: 5rem 1fr; gap: 1.6rem; padding: 1.7rem 0; border-bottom: 1px solid var(--line); }
.process-step .num { font: 400 1.7rem/1 var(--serif); color: var(--clay); }
.process-step h4 { margin: 0 0 .4rem; font: 600 1.02rem/1.3 var(--sans); }
.process-step p { margin: 0; color: var(--muted); font-size: .92rem; max-width: 34rem; }

/* FAQ accordion */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.5rem 0; background: none; border: 0; text-align: left; font: 600 1.05rem/1.4 var(--serif); color: var(--text); cursor: pointer; }
.faq-q .icon { font-size: 1.3rem; color: var(--clay); transition: transform .3s var(--ease); flex-shrink: 0; }
.faq-item.open .faq-q .icon { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-a p { margin: 0 0 1.4rem; color: var(--muted); max-width: 42rem; line-height: 1.6; }

/* Gallery grid + lightbox (shared by every category page) */
.gallery-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.gallery-head .lede { margin: 0; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.gallery-item { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: 16px; cursor: pointer; background: #221e17; border: 0; padding: 0; display: block; width: 100%; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0,0,0,.5)); opacity: 0; transition: opacity .3s; }
.gallery-item:hover::after { opacity: 1; }
.gallery-item span { position: absolute; z-index: 2; left: .7rem; bottom: .55rem; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: white; font-weight: 700; opacity: 0; transition: opacity .3s; }
.gallery-item:hover span { opacity: 1; }
.lightbox { position: fixed; z-index: 300; inset: 0; background: rgba(6,6,5,.95); display: none; align-items: center; justify-content: center; padding: clamp(1rem,4vw,3.5rem); }
.lightbox.open { display: flex; }
.lightbox img { max-width: min(90vw,1300px); max-height: 82vh; object-fit: contain; border-radius: 10px; box-shadow: 0 40px 140px rgba(0,0,0,.6); }
.lightbox-caption { position: absolute; left: 0; right: 0; bottom: clamp(1rem,4vw,2.5rem); text-align: center; color: rgba(255,255,255,.75); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.lightbox-close,.lightbox-prev,.lightbox-next { position: absolute; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.06); color: white; border-radius: 50%; width: 3rem; aspect-ratio: 1; cursor: pointer; font-size: 1.1rem; display: grid; place-items: center; backdrop-filter: blur(6px); transition: background .2s; }
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover { background: rgba(255,255,255,.18); }
.lightbox-close { top: clamp(1rem,3vw,2rem); right: clamp(1rem,3vw,2rem); }
.lightbox-prev { left: clamp(.5rem,3vw,2rem); top: 50%; translate: 0 -50%; }
.lightbox-next { right: clamp(.5rem,3vw,2rem); top: 50%; translate: 0 -50%; }

/* Story chapters — replaces the old flat, numbered photo grid. Each category
   page groups its real photography into a handful of curated chapters with a
   short point-of-view instead of a single "N real photos" dump. */
.chapters { display: grid; gap: clamp(4.5rem,8vw,7.5rem); }
.chapter-head { max-width: 42rem; margin-bottom: 1.6rem; }
.chapter-head .eyebrow { color: var(--clay); }
.chapter-head h3 { font: 400 clamp(1.6rem,3vw,2.3rem)/1.15 var(--serif); letter-spacing: -.02em; margin: 0 0 .8rem; }
.chapter-head p { color: var(--muted); font-size: 1rem; max-width: 38rem; margin: 0; }
.chapter-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 10vw; gap: 1rem; }
.chapter-grid .gallery-item { aspect-ratio: auto; height: 100%; border-radius: 14px; }
.chapter-grid .t-lg { grid-column: span 4; grid-row: span 2; }
.chapter-grid .t-tall { grid-column: span 2; grid-row: span 2; }
.chapter-grid .t-md { grid-column: span 3; grid-row: span 1; }
.chapter-grid .t-sm { grid-column: span 2; grid-row: span 1; }

/* Hover-to-preview YouTube embeds — a poster image sits over the player by
   default; the live iframe (muted, autoplay) is only created while the
   pointer is over the element (or it has keyboard focus), and removed again
   on mouseleave/blur, which stops playback. A visible play button acts as a
   click-to-preview fallback for touch devices with no hover state. */
.hover-preview { position: relative; width: 100%; height: 100%; cursor: pointer; background: #111; overflow: hidden; }
.hover-preview-poster { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .35s, transform .6s var(--ease); }
.hover-preview:hover .hover-preview-poster { transform: scale(1.04); }
.hover-preview.is-playing .hover-preview-poster { opacity: 0; pointer-events: none; }
.hover-preview-play { position: absolute; inset: 0; margin: auto; width: 4.2rem; height: 4.2rem; border-radius: 50%; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.55); color: white; font-size: 1.2rem; display: grid; place-items: center; padding: 0; transition: opacity .3s, transform .3s var(--ease); }
.hover-preview:hover .hover-preview-play { transform: scale(1.08); }
.hover-preview.is-playing .hover-preview-play { opacity: 0; pointer-events: none; }
.hover-preview-hint { position: absolute; z-index: 2; left: 1rem; bottom: .9rem; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); text-shadow: 0 2px 10px rgba(0,0,0,.6); transition: opacity .3s; }
.hover-preview.is-playing .hover-preview-hint { opacity: 0; }
.hover-preview iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }

/* Closing "how we think about it" philosophy panel */
.philosophy { background: var(--ink); color: white; }
.philosophy .wrap { max-width: 50rem; }
.philosophy .eyebrow { color: var(--sage); }
.philosophy blockquote { margin: 0; font: 400 clamp(1.5rem,3.2vw,2.3rem)/1.4 var(--serif); letter-spacing: -.01em; }
.philosophy cite { display: block; margin-top: 1.6rem; font: 700 .72rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); font-style: normal; }

/* Other-spaces cross-links — the one deliberate light beat on an otherwise
   dark page, mirroring the homepage's own light "assembly" section breaking
   up its dark hero/journey/process flow. Text is forced back to dark ink
   here since it's the one section sitting on a light background. */
.other-spaces { background: var(--stone); color: var(--ink); }
.other-spaces .eyebrow, .other-spaces .lede { color: inherit; }
.other-spaces-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.other-space-card { position: relative; aspect-ratio: 3/4; border-radius: 18px; overflow: hidden; display: block; }
.other-space-card img { transition: transform .6s var(--ease); }
.other-space-card:hover img { transform: scale(1.06); }
.other-space-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0,0,0,.75)); }
.other-space-card span { position: absolute; z-index: 2; left: 1rem; bottom: 1rem; color: white; font: 400 1.3rem var(--serif); }

/* Footer (shared) */
.footer { background: var(--ink); color: white; padding: 4rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; }
.footer .brand { font-size: 1.7rem; color: white; }
.footer h4 { font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.55); }
.footer p, .footer a { font-size: .9rem; color: rgba(255,255,255,.78); }
.footer a:hover { color: white; }
.legal { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14); display: flex; justify-content: space-between; gap: 1rem; color: rgba(255,255,255,.45); font-size: .72rem; }

@media (max-width: 820px) {
  .page-intro { grid-template-columns: 1fr; }
  .other-spaces-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .chapter-grid { grid-template-columns: repeat(2,1fr); grid-auto-rows: 42vw; }
  .chapter-grid .t-lg { grid-column: span 2; grid-row: span 2; }
  .chapter-grid .t-tall,.chapter-grid .t-md,.chapter-grid .t-sm { grid-column: span 1; grid-row: span 1; }
  .split-section .wrap,.split-section--alt .wrap { grid-template-columns: 1fr; }
  .split-section--alt .split-copy,.split-section--alt .split-side { order: initial; }
  .process-step { grid-template-columns: 3.4rem 1fr; }
}
@media (max-width: 540px) {
  .wrap { width: min(calc(100% - 1.5rem), var(--max)); }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: .5rem; }
  .lightbox-prev,.lightbox-next { width: 2.4rem; font-size: .9rem; }
  .legal { display: block; }
  .other-spaces-grid { grid-template-columns: 1fr 1fr; }
  .chapter-grid { grid-template-columns: 1fr; grid-auto-rows: 78vw; gap: .7rem; }
  .chapter-grid .t-lg,.chapter-grid .t-tall,.chapter-grid .t-md,.chapter-grid .t-sm { grid-column: span 1; grid-row: span 1; }
  .faq-q { font-size: .95rem; padding: 1.2rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .page-transition { display: none !important; }
  .page-hero-bg { transform: none !important; }
  .hero-mask h1 { transform: none !important; }
  .hero-fade, .hero-scroll { opacity: 1 !important; transform: none !important; }
}