/* ===========================================================
   B&H Construction — shared styles (multi-page)
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{ --ease:cubic-bezier(.22,1,.36,1); --ink:#0c0d0c; }
html{ scroll-behavior:smooth; }
html,body{ background:#F4F4EF; }
body{ -webkit-font-smoothing:antialiased; }
::selection{ background:rgba(116,113,84,.2); color:#222724; }

.label{ font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#5E665E; }
.display{ font-family:Archivo, system-ui, sans-serif; }

/* underline-draw link */
.link{ position:relative; }
.link::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease); }
.link:hover::after{ transform:scaleX(1); transform-origin:left; }

/* nav active marker */
.nav-link.is-active{ color:#747154; }

/* ---------- header ---------- */
#masthead{ transition:background-color .5s var(--ease), border-color .5s var(--ease); border-bottom:1px solid transparent; }
#masthead.scrolled{ background:rgba(244,244,239,.9); backdrop-filter:blur(12px); border-color:#D8DCD3; }
/* dark variant (home over black) */
#masthead.header--dark.scrolled{ background:rgba(12,13,12,.72); backdrop-filter:blur(12px); border-color:rgba(255,255,255,.1); }

.logo-light{ filter:invert(1) sepia(.06) brightness(1.05); }

/* ---------- buttons ---------- */
.btn{ transition:background-color .3s var(--ease), color .3s var(--ease); }

/* ---------- keyboard focus ring ---------- */
/* Light surfaces: olive ring (AA contrast on cream/white). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid #747154; outline-offset:3px; border-radius:2px;
}
/* Dark surfaces (home hero, mobile menu, charcoal footer): lighter sage ring so the
   indicator keeps sufficient contrast against #0c0d0c / #222724. */
.home a:focus-visible, .home button:focus-visible,
.menu-overlay a:focus-visible, .menu-overlay button:focus-visible,
footer a:focus-visible, footer button:focus-visible{
  outline-color:#A7A283;
}

/* ---------- mobile menu overlay ---------- */
.menu-overlay{ position:fixed; inset:0; z-index:60; background:#0c0d0c; color:#F4F4EF;
  display:flex; flex-direction:column; opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s var(--ease); }
.menu-overlay.open{ opacity:1; visibility:visible; }
.menu-overlay a.menu-item{ transform:translateY(10px); opacity:0; transition:transform .5s var(--ease), opacity .5s var(--ease); }
.menu-overlay.open a.menu-item{ transform:none; opacity:1; }
.menu-overlay.open a.menu-item:nth-child(1){ transition-delay:.08s; }
.menu-overlay.open a.menu-item:nth-child(2){ transition-delay:.14s; }
.menu-overlay.open a.menu-item:nth-child(3){ transition-delay:.20s; }
.menu-overlay.open a.menu-item:nth-child(4){ transition-delay:.26s; }
body.menu-open{ overflow:hidden; }

/* ---------- fields (underline) ---------- */
.field{ background:transparent; border:0; border-bottom:1px solid #D8DCD3; border-radius:0; transition:border-color .4s var(--ease); }
.field:focus{ outline:none; border-color:#747154; }
/* Keyboard focus still gets the accessible ring (mouse-click stays underline-only). */
.field:focus-visible{ outline:2px solid #747154; outline-offset:3px; border-radius:2px; }
.field::placeholder{ color:rgba(94,102,94,.5); }
.field-dark{ border-bottom-color:rgba(216,220,211,.35); }
.field-dark:focus{ border-color:#A7A283; }
.field-dark:focus-visible{ outline-color:#A7A283; }
.field-dark::placeholder{ color:rgba(230,234,227,.4); }

/* ---------- art-directed photo placeholder (swap for real images) ---------- */
.photo{ position:relative; overflow:hidden; background:#8f8a6e; }
.photo::before{ content:""; position:absolute; inset:0; z-index:1; opacity:.06; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.photo .fill{ position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 78% 16%, rgba(246,243,233,.82) 0%, rgba(246,243,233,0) 44%),
    radial-gradient(80% 70% at 18% 32%, rgba(167,162,131,.5) 0%, rgba(167,162,131,0) 60%),
    linear-gradient(176deg, #93906f 0%, #6f6b50 48%, #44412f 100%); }
.photo .vig{ position:absolute; inset:0; z-index:2; box-shadow:inset 0 -80px 110px -50px rgba(34,39,36,.45); }

/* ---------- HOME (black + grid + slider) ---------- */
.home{ background:#0c0d0c; color:#E6EAE3; }
.home-grid{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(230,234,227,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(230,234,227,.08) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 10%, #000 88%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 10%, #000 88%, transparent 100%); }

/* drag-to-scroll slider */
.slider{ display:flex; gap:16px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:none;
  scroll-behavior:auto; cursor:grab; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; }
.slider::-webkit-scrollbar{ display:none; }
.slider.dragging{ cursor:grabbing; scroll-snap-type:none; }
.slider.dragging *{ pointer-events:none; }
/* fixed-height filmstrip — variable width keeps each photo's real aspect (no cropping) */
.slide{ flex:0 0 auto; }
.slide img{ height:clamp(300px, 56vh, 540px); width:auto; display:block; user-select:none;
  box-shadow:0 24px 48px -28px rgba(0,0,0,.85); }

/* slider progress line — doubles as a draggable scrollbar (tall transparent hit area, thin visible line) */
.slider-progress{ position:relative; padding:8px 0; width:100%; cursor:grab; touch-action:none; }
.slider-progress.dragging{ cursor:grabbing; }
.slider-progress::before{ content:""; position:absolute; left:0; right:0; top:50%; height:2px;
  transform:translateY(-50%); background:rgba(230,234,227,.2); border-radius:2px; }
.slider-progress__bar{ position:absolute; left:0; top:50%; height:2px; background:#A7A283; width:33%;
  border-radius:2px; will-change:transform, width; }
/* light-page progress track */
.slider-progress--light::before{ background:#D8DCD3; }
.slider-progress--light .slider-progress__bar{ background:#747154; }

/* ---------- review cards (text slides on the shared .slider) ---------- */
.review-card{ width:clamp(286px, 82vw, 452px); display:flex; flex-direction:column;
  padding:34px 32px 30px; border:1px solid; user-select:none; position:relative; }
/* closing quote — mirrors the opening mark, sits bottom-right above the project type */
.review-card::after{ content:"\201D"; position:absolute; right:30px; bottom:48px;
  font-family:Archivo, sans-serif; font-weight:900; font-size:46px; line-height:.7;
  color:#A7A283; opacity:.85; pointer-events:none; }
.review-card .mark{ font-family:Archivo, sans-serif; font-weight:900; font-size:46px; line-height:.7;
  color:#A7A283; opacity:.85; margin-bottom:14px; }
.review-card .quote{ font-family:Archivo, system-ui, sans-serif; font-weight:600;
  font-size:clamp(1.05rem, 2.5vw, 1.28rem); line-height:1.4; letter-spacing:-.01em; }
.review-card .name{ font-family:Archivo, sans-serif; font-weight:800; text-transform:uppercase;
  letter-spacing:-.01em; font-size:.98rem; }
/* dark (home) */
.review-card--dark{ background:rgba(230,234,227,.035); border-color:rgba(230,234,227,.14); }
.review-card--dark .quote{ color:#E6EAE3; }
.review-card--dark .name{ color:#F4F4EF; }
/* light (work) */
.review-card--light{ background:#fff; border-color:#D8DCD3; }
.review-card--light .quote{ color:#222724; }
.review-card--light .name{ color:#222724; }

/* ---------- scroll/load reveal ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.09s; } .reveal[data-d="2"]{ transition-delay:.18s; }
.reveal[data-d="3"]{ transition-delay:.27s; } .reveal[data-d="4"]{ transition-delay:.36s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }