/* Complete Builders Inc — shared design tokens & chrome (nav, footer, typography)
   Mirrors the homepage's inline styles. The homepage keeps its own copy inline;
   this file is for every inner page so they share one source of truth. */

:root {
  --limestone: #F4F0EA;
  --limestone-deep: #ECE6DC;
  --charcoal: #1E1D1B;
  --stone: #635D4F;
  --bronze: #8C6A43;
  --bronze-dim: #A9875F;
  --border: #DCD5C8;
  --radius: 2px;
  --max: 1220px;
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans: 'Manrope', -apple-system, sans-serif;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); font-weight: 300; color: var(--charcoal); background: var(--limestone); line-height: 1.7; -webkit-font-smoothing: antialiased; font-size: 17px; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
.serif { font-family: var(--font-serif); font-weight: 400; }

/* reveal-on-scroll (text only — never applied to photos, so images always render immediately) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s ease, transform 1s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* SKIP LINK */
.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--charcoal);color:var(--limestone);padding:14px 22px;font-size:14px;letter-spacing:.02em;border-radius:0 0 var(--radius) 0}
.skip-link:focus{left:0}

/* NAV */
nav { background: var(--limestone); border-bottom: 1px solid var(--border); padding: 0 40px; display: flex; align-items: center; height: 84px; position: sticky; top: 0; z-index: 100; }
.nav-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-logo img { height: 34px; width: auto; object-fit: contain; }
.nav-logo-name { font-family: var(--font-serif); font-size: 19px; letter-spacing: .01em; color: var(--charcoal); }
.nav-links { display: flex; gap: 36px; list-style: none; font-size: 13.5px; font-weight: 400; letter-spacing: .02em; margin-left: 56px; }
.nav-links a { color: var(--stone); padding-bottom: 3px; border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; }
.nav-links a:hover, .nav-links a.active { color: var(--charcoal); border-color: var(--bronze); }
.nav-dropdown { position: relative; }
.dropdown-menu { position: absolute; top: 100%; left: -20px; background: var(--limestone); border: 1px solid var(--border); min-width: 230px; padding: 10px 0; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; z-index: 200; }
.nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; }
.dropdown-menu a { display: block; padding: 10px 20px; font-size: 13.5px; letter-spacing: .01em; color: var(--charcoal); border: none; }
.dropdown-menu a:hover, .dropdown-menu a.active { color: var(--bronze); }
.nav-end { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.nav-cta { font-size: 13.5px; letter-spacing: .02em; color: var(--charcoal); border-bottom: 1px solid var(--bronze); padding-bottom: 3px; white-space: nowrap; }
.nav-cta:hover { color: var(--bronze); }
.hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.hamburger span { display: block; width: 22px; height: 1px; background: var(--charcoal); transition: transform .3s, opacity .3s; }
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu { display: none; position: fixed; top: 84px; left: 0; right: 0; bottom: 0; overflow-y: auto; background: var(--limestone); z-index: 9500; }
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: 18px 28px; font-size: 14px; letter-spacing: .02em; color: var(--charcoal); border-bottom: 1px solid var(--border); }
.mobile-menu .mob-cta { color: var(--bronze); }
.mob-dropdown-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: none; padding: 18px 28px; font-size: 14px; letter-spacing: .02em; color: var(--charcoal); border-bottom: 1px solid var(--border); font-family: inherit; }
.mob-dropdown-icon { font-size: 11px; color: var(--stone); }
.mob-dropdown-panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; background: var(--limestone-deep); }
.mob-dropdown.open .mob-dropdown-panel { max-height: 400px; }
.mob-dropdown-panel a { padding: 13px 28px 13px 40px; font-size: 13px; }
@media (max-width: 900px) { .nav-links, .nav-end .nav-cta { display: none; } .hamburger { display: flex; } }

/* PAGE HERO (service/inner-page heroes — large serif headline, generous spacing) */
.page-hero { max-width: var(--max); margin: 0 auto; padding: 88px 40px 64px; }
.page-hero .label { font-size: 12.5px; letter-spacing: .03em; color: var(--stone); margin-bottom: 18px; }
.page-hero h1 { font-family: var(--font-serif); font-weight: 300; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.18; letter-spacing: .005em; max-width: 780px; }
.page-hero h1 em { font-style: italic; color: var(--bronze); }
.page-hero .hero-sub { font-size: 17px; color: var(--charcoal); max-width: 540px; margin-top: 24px; line-height: 1.7; }
.page-hero .btn-row { display: flex; gap: 28px; align-items: center; margin-top: 36px; flex-wrap: wrap; }
@media (max-width: 768px) { .page-hero { padding: 56px 24px 44px; } }

/* FULL-BLEED SERVICE HERO */
.hero-full{position:relative;min-height:84vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--charcoal)}
.hero-full-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-full-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform .1s linear}
.hero-full-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(14,13,12,.82) 0%,rgba(14,13,12,.35) 38%,rgba(14,13,12,.05) 65%)}
.hero-full-text{position:relative;z-index:2;max-width:620px;padding:0 48px 64px}
.hero-full-text h1{font-family:var(--font-serif);font-weight:300;font-size:clamp(34px,5vw,64px);letter-spacing:-.01em;line-height:1.08;color:var(--limestone);text-shadow:0 2px 16px rgba(0,0,0,.35)}
.hero-full-text h1 em{font-style:normal;color:var(--limestone)}
@media(max-width:768px){.hero-full{min-height:72vh}.hero-full-text{padding:0 24px 40px}}
.hero-full-below{max-width:620px;margin:0 auto;padding:48px 24px 0;text-align:center}
.hero-full-below p{font-size:16px;color:var(--charcoal);line-height:1.7}
.hero-full-below .btn-row{display:flex;justify-content:center;gap:24px;margin-top:22px}
.btn-text{display:inline-block;color:var(--charcoal);font-size:14px;font-weight:600;letter-spacing:.02em;border-bottom:1px solid var(--bronze);padding-bottom:4px;transition:color .2s,border-color .2s}
.btn-text:hover{color:var(--bronze)}
@media(prefers-reduced-motion:reduce){.hero-full-media img{transform:none!important;transition:none!important}}

/* EDITORIAL ALTERNATING ROWS */
.editorial-row{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;max-width:var(--max);margin:0 auto;padding:88px 40px}
.editorial-row.reverse{grid-template-columns:.9fr 1.1fr}
.editorial-row.reverse .editorial-media{order:2}
.editorial-row.reverse .editorial-text{order:1}
.editorial-media{overflow:hidden}
.editorial-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s ease}
.editorial-row:hover .editorial-media img{transform:scale(1.03)}
.editorial-text .label{margin-bottom:14px}
.editorial-text h2{font-family:var(--font-serif);font-weight:300;font-size:clamp(24px,2.8vw,36px);line-height:1.2;margin-bottom:16px}
.editorial-text p{font-size:16px;color:var(--charcoal);line-height:1.75;max-width:440px}
@media(max-width:860px){.editorial-row,.editorial-row.reverse{grid-template-columns:1fr;gap:28px;padding:56px 24px}.editorial-row.reverse .editorial-media,.editorial-row.reverse .editorial-text{order:initial}}

/* RECENT PROJECTS + BEFORE/AFTER SLIDER (reusable, supports multiple per page) */
.recent-projects{max-width:var(--max);margin:0 auto;padding:88px 40px}
@media(max-width:768px){.recent-projects{padding:56px 24px}}
.ba-slider{position:relative;width:100%;max-width:640px;margin:28px auto 0;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);cursor:ew-resize;user-select:none;touch-action:pan-y}
.ba-slider:focus-visible{outline:2px solid var(--bronze);outline-offset:4px}
.ba-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ba-before-wrap{position:absolute;inset:0;clip-path:inset(0 50% 0 0);will-change:clip-path}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--limestone);transform:translateX(-1px);display:flex;align-items:center;justify-content:center}
.ba-handle span{position:absolute;width:40px;height:40px;border-radius:50%;background:var(--limestone);display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 2px 10px rgba(0,0,0,.25);color:var(--charcoal)}
.ba-tag{position:absolute;top:16px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--limestone);background:rgba(30,29,27,.55);padding:5px 12px;border-radius:2px}
.ba-tag-before{left:16px}
.ba-tag-after{right:16px}
.ba-hint{text-align:center;font-size:12.5px;color:var(--stone);margin-top:14px}

/* SECTION SHELL — shared rhythm */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 40px; }
section.block { padding: 100px 0; }
@media (max-width: 768px) { .wrap { padding: 0 24px; } section.block { padding: 64px 0; } }
.band { background: var(--limestone-deep); }
.label { font-size: 12.5px; letter-spacing: .03em; color: var(--stone); margin-bottom: 18px; }
h2.heading, h2.serif-heading { font-family: var(--font-serif); font-weight: 300; font-size: clamp(26px, 3vw, 40px); line-height: 1.22; }
h2.heading em, h2.serif-heading em { font-style: italic; color: var(--bronze); }
h3.serif-heading { font-family: var(--font-serif); font-weight: 300; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.3; }

/* BUTTONS / CTAs — understated: a text link or a thin outline, never a solid block */
.btn-text { font-size: 14px; letter-spacing: .02em; color: var(--charcoal); border-bottom: 1px solid var(--bronze); padding-bottom: 4px; display: inline-block; }
.btn-text:hover { color: var(--bronze); }
.btn-outline { font-size: 13.5px; letter-spacing: .03em; color: var(--charcoal); border: 1px solid var(--charcoal); padding: 12px 26px; border-radius: var(--radius); display: inline-block; transition: border-color .2s, color .2s; }
.btn-outline:hover { border-color: var(--bronze); color: var(--bronze); }

/* THIN DIVIDER LIST (services index, bullet-style project/feature lists) */
.divider-list { border-top: 1px solid var(--border); }
.divider-list > * { border-bottom: 1px solid var(--border); padding: 30px 2px; }

/* FOOTER — identical on every page */
footer { background: var(--limestone); border-top: 1px solid var(--border); padding: 72px 0 36px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px; margin-bottom: 56px; }
.footer-brand .logo { font-family: var(--font-serif); font-size: 21px; margin-bottom: 10px; }
.footer-brand p { font-size: 13.5px; color: var(--stone); max-width: 280px; line-height: 1.7; }
.footer-col h5 { font-size: 12px; letter-spacing: .03em; color: var(--stone); margin-bottom: 14px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { font-size: 13.5px; color: var(--charcoal); }
.footer-col a:hover { color: var(--bronze); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 28px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--stone); }
.footer-bottom a { color: var(--stone); border-bottom: 1px solid var(--border); }
.footer-instagram { color: var(--charcoal); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 1px solid var(--bronze); outline-offset: 3px; }

/* mobile safety: no page should scroll horizontally, side padding stays >=16px via .wrap/.page-hero above */
body { overflow-x: hidden; }