/* ════════════════════════════════════════════════════════════════════════
   BEYOND THEATERS — SITE STYLES
   ────────────────────────────────────────────────────────────────────────
   SITE SETTINGS are the variables right below. Change a colour, font or
   width there and it updates across the whole site. Everything else is
   layout mechanics, grouped by page section with comments.
   Values were taken from the original site's own theme settings
   (archived copies, 2016–2025) — not invented.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* Fonts — the original site's fonts */
  --font-main: "Open Sans", sans-serif;   /* all body text, headings, menu */

  /* Colours — from the original theme settings */
  --text: #4e5663;            /* body text */
  --heading: #2b2c36;         /* headings */
  --dark-bar: rgba(21, 21, 26, 0.63);  /* header top strip */
  --dark-bar-solid: rgba(21, 21, 26, 0.85); /* header when scrolled */
  --nav-text: #edf0f2;        /* menu links over the slider */
  --accent-blue: #428df5;     /* link hover blue */
  --current-page: #8295b0;    /* current menu item over the slider */
  --dark-section: #2b2c36;    /* footer background */
  --footer-text: #6c6d7a;     /* footer copyright text */
  --footer-link: #a4abb3;     /* footer menu links */
  --footer-hover: #428df5;    /* footer link hover — blue, same as the header links (was the theme's red #ff2b58 until 2026-10-27) */
  --cta-blue: #2050c9;        /* the "smart home" block */
  --slider-red: #f93434;      /* active slider dot */
  --plaque: rgba(0, 0, 0, 0.65); /* slider caption plaque */

  /* Sizes */
  --wrap: 1200px;             /* content column width */
  --hero-height: 650px;       /* slider height on desktop */
}

/* ── Basics ─────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { font-size: 14px; }                 /* original base size */
body {
  margin: 0;
  font-family: var(--font-main);
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  color: var(--text);
  background: #fff;
  /* Column layout so the footer can be held at the bottom of the
     screen on pages shorter than the screen (see .site-footer). */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-main); color: var(--heading); margin: 0; }
h2 { font-size: 34px; line-height: 1.2; font-weight: 400; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 40px; }
.section { padding: 7.5rem 0; position: relative; }

/* The small accent word above the ABOUT US heading — the same font
   as the heading itself, just lowercase (the whimsical part). */
.kicker {
  font-family: var(--font-main);
  font-size: 20px;
  margin: 0 0 0.4rem;
  color: var(--text);
}

/* Buttons (original style: slight rounding, outline fills on hover) */
.btn {
  display: inline-block;
  padding: 0.8rem 2.2rem;
  border-radius: 3px;
  font-size: 18px;
  line-height: 1.2;
  transition: background 0.25s, color 0.25s;
}
.btn-outline { border: 2px solid var(--text); color: var(--text); }
.btn-outline:hover { background: var(--text); color: #fff; }
.btn-outline-white { border: 2px solid #fff; color: #fff; }
.btn-outline-white:hover { background: #fff; color: var(--cta-blue); }

/* ── Header ───────────────────────────────────────────────────────────
   Sits over the top of the slider (transparent). When the page scrolls,
   js/site.js adds .stuck: the bar shrinks and turns solid dark, and the
   logo crossfades to a flat-white version (assets/logo3-white.png sits
   exactly over the colour logo and fades in) while it shrinks. */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }

.topbar {
  background: var(--dark-bar);
  color: #d3d8db;
  font-size: 13px;
  line-height: 36px;
  max-height: 36px;
  overflow: hidden;
  transition: max-height 0.3s;
}
.topbar-in { display: flex; justify-content: space-between; }
.topbar a:hover { color: #fff; }
.topbar-contact a { margin-right: 1.6rem; }
.topbar-social a { margin-left: 1.4rem; }

.mainbar { transition: background 0.3s; }
.mainbar-in { display: flex; align-items: center; justify-content: space-between; height: 100px; transition: height 0.3s; }
.logo { position: relative; display: block; }
.logo img { display: block; height: 60px; width: auto; transition: height 0.3s, opacity 0.3s; }
.logo .logo-white { position: absolute; left: 0; top: 0; opacity: 0; }

.site-header.stuck .mainbar { background: var(--dark-bar-solid); }
.site-header.stuck .mainbar-in { height: 52px; }
.site-header.stuck .logo img { height: 34px; }
.site-header.stuck .logo .logo-colour { opacity: 0; }
.site-header.stuck .logo .logo-white { opacity: 1; }

.mainnav { flex: 1; display: flex; justify-content: space-evenly; margin-left: 3rem; }
.mainnav a {
  color: var(--nav-text);
  font-size: 15px;
  padding: 0.4rem 0;
}
.mainnav a:hover { color: var(--accent-blue); }
.mainnav a.current { color: var(--current-page); }

/* ── Hero slider ──────────────────────────────────────────────────────
   Full-width, 650px tall. Slides fade (js/slider.js rotates .active).
   Each slide's caption is a dark plaque at the bottom-left, with the
   device photo perched above it — the original slider's layout. */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: #15151a; }
.slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1s ease;
  pointer-events: none;
}
.slide.active { opacity: 1; pointer-events: auto; }


.hero-inner { position: relative; max-width: 1240px; margin: 0 auto; height: 100%; }
.device { position: absolute; z-index: 6; }
.plaque {
  position: absolute; left: 10px; bottom: 10px; z-index: 5;
  background: var(--plaque);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;  /* the slider's own caption font */
  font-size: 65px; line-height: 75px; font-weight: 600;
  letter-spacing: 2px;
  padding: 8px 24px 14px;
}
.plaque:hover { color: #fff; }

/* Prev / next: thin line arrows with the word under each, right side */
.hero-nav { position: absolute; right: 30px; top: 47%; z-index: 10; display: flex; gap: 2.4rem; }
.hero-nav a { color: #fff; font-size: 13px; text-align: center; opacity: 0.9; }
.hero-nav a:hover { opacity: 1; }
.hero-nav .arr { display: block; width: 96px; height: 2px; background: #fff; position: relative; margin-bottom: 7px; }
.hero-nav .arr::after {
  content: ""; position: absolute; top: -4px;
  border: 5px solid transparent;
}
.hero-nav .arr-left::after { left: -2px; border-right: 8px solid #fff; border-left: none; }
.hero-nav .arr-right::after { right: -2px; border-left: 8px solid #fff; border-right: none; }
#heroPrev { text-align: right; }
#heroNext { text-align: left; }

/* Square bullets in a vertical stack at the right edge */
.hero-dots { position: absolute; right: 30px; top: 60%; z-index: 10; display: flex; flex-direction: column; gap: 10px; }
.hero-dots button {
  width: 10px; height: 10px; padding: 0;
  border: 2px solid #fff; border-radius: 0;
  background: transparent; cursor: pointer;
}
.hero-dots button.active { background: var(--slider-red); border-color: var(--slider-red); }

/* ── What We Do (12 services) ─────────────────────────────────────────
   Four columns; photo icon (shown at 70px) above the service name.
   Icons are the original site's own images in assets/icon-*.png */
.services { background: #fff; }
.services-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  column-gap: 2rem; row-gap: 3.5rem;
  margin-top: 4rem;
}
.service { display: block; text-align: center; }
.service img { width: 70px; height: 70px; object-fit: contain; transition: transform 0.25s; }
.service h4 { font-size: 21px; font-weight: 400; margin-top: 0.9rem; transition: color 0.25s; }
.service:hover img { transform: scale(1.06); }
.service:hover h4 { color: var(--accent-blue); }

/* ── Three photo blocks ───────────────────────────────────────────────
   Three dark columns: the title sits at the top of each column and the
   photo fills the rest — the layout the site has today. */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--dark-section); }
.trio-item { display: flex; flex-direction: column; height: 620px; background: #222329; overflow: hidden; }
.trio-head { display: block; padding: 4.2rem 2.4rem 1.8rem; }
.trio-title { color: #fff; font-size: 30px; line-height: 1.25; font-weight: 400; }
.trio-design { background: #5b6579; }   /* the Design block's own slate colour */
.trio-photo { display: block; flex: 1; overflow: hidden; }
.trio-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.trio-item:hover .trio-photo img { transform: scale(1.04); }

/* ── About Us ─────────────────────────────────────────────────────────
   The original has a photo of a man at a desk (about_us3.png) fading in
   at the bottom-right of this section, text on the left. */
.about { background: #fff; overflow: hidden; }
.about-bg {
  position: absolute; right: 0; bottom: 0; top: 0; width: 52%;
  background: url("../assets/about_us3.png") bottom right / contain no-repeat;
}
.about-text { position: relative; z-index: 1; width: 50%; }
.about-text p { margin: 1.2rem 0 0; }
.about-text .btn { margin-top: 2.2rem; }

/* ── Blue call-to-action block ──────────────────────────────────────── */
.cta { background: var(--cta-blue); padding: 5.5rem 0; }
.cta-in { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.cta h1 { color: #fff; font-size: 40px; font-weight: 400; line-height: 1.2; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer { background: var(--dark-section); padding: 2.2rem 0; margin-top: auto; }
.footer-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.site-footer p { color: var(--footer-text); margin: 0; }
.footernav a { color: var(--footer-link); margin-left: 1.6rem; }
.footernav a:hover { color: var(--footer-hover); }

/* ── Smaller screens ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero { min-height: 480px; }
  .plaque { font-size: 42px; line-height: 50px; }
  .device { display: none; }           /* original hid device layers on small screens too */
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .mainnav { margin-left: 1rem; }
  .logo img { height: 48px; }
  .hero-nav { display: none; }
}
@media (max-width: 760px) {
  .hero { min-height: 380px; }
  .wrap { padding: 0 20px; }
  .topbar { display: none; }
  .mainbar-in { height: 64px; }
  .mainnav { display: none; }         /* NOTE: add a hamburger menu when the full site is built */
  .plaque { font-size: 30px; line-height: 38px; letter-spacing: 1px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .trio { grid-template-columns: 1fr; }
  .about-bg { display: none; }
  .about-text { width: 100%; }
  .cta-in, .footer-in { flex-direction: column; text-align: center; }
  .footernav a { margin: 0 0.7rem; }
  .cta h1 { font-size: 30px; }
}

/* ════════════════════════════════════════════════════════════════════
   INNER PAGES (everything except the homepage)
   The inner pages share the same header and footer. Their header is
   solid dark (no slider under it) — add class "inner" to the header
   and class "inner-page" to <body>.
   ════════════════════════════════════════════════════════════════════ */
.site-header.inner { position: relative; background: var(--dark-section); }
.site-header.inner .mainbar { background: var(--dark-section); }

/* Page title: dark band with the page name, as on the original site */
.page-title { background: var(--dark-section); padding: 3.2rem 0 3.6rem; }
.page-title h1 { color: #fff; font-size: 40px; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; }

/* Plain content pages */
.content { padding: 4.5rem 0 5.5rem; background: #fff; }
.content p { margin: 0 0 1.2rem; max-width: 75ch; }
.content h2 { margin: 2.2rem 0 0.8rem; }

/* ── Mobile menu button (only shows on small screens) ─────────────── */
.menu-btn {
  display: none;
  background: none; border: none; cursor: pointer;
  color: #fff; font-size: 28px; line-height: 1; padding: 0.4rem 0.6rem;
}

/* ── Portfolio pages: the three stages ────────────────────────────── */
.stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-bottom: 3rem; }
.stage h2 { font-size: 24px; margin: 0 0 0.7rem; }
.stage p { margin: 0; }
.portfolio-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2.5rem; }
.portfolio-photos img { width: 100%; height: auto; display: block; }
.lead-photo { margin: 0 0 2.5rem; }
.lead-photo img { max-width: 520px; width: 100%; height: auto; display: block; }

/* ── Everything page: one row per service ─────────────────────────── */
.service-row {
  display: flex; gap: 2.5rem;
  padding: 2.8rem 0; border-bottom: 1px solid #e4e7eb; align-items: flex-start;
}
.service-row:last-child { border-bottom: none; }
.service-row img { width: 150px; height: 150px; object-fit: contain; flex: none; }
.service-row > div { flex: 1; }
.service-row h2 { font-size: 30px; margin: 0 0 0.8rem; text-transform: uppercase; }
.service-row p { margin: 0; max-width: 80ch; }

/* ── About page ───────────────────────────────────────────────────── */
.about-layout { display: grid; grid-template-columns: 1fr 340px; gap: 3.5rem; align-items: start; }
.about-layout .side-images img { width: 100%; height: auto; display: block; margin-bottom: 1.5rem; }
.check-list { list-style: none; padding: 0; margin: 0.5rem 0 1.5rem; }
.check-list li { padding: 0.55rem 0 0.55rem 2rem; position: relative; border-bottom: 1px solid #eef0f3; }
.check-list li::before { content: "✓"; position: absolute; left: 0.2rem; color: var(--cta-blue); font-weight: 700; }

/* ── Gallery page ─────────────────────────────────────────────────── */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.gallery-grid button { padding: 0; border: none; background: none; cursor: pointer; display: block; }
.gallery-grid img { width: 100%; height: 260px; object-fit: cover; display: block; transition: opacity 0.25s; }
.gallery-grid button:hover img { opacity: 0.85; }
/* Lightbox (full-screen photo viewer) */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(10, 10, 14, 0.94); align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; }
.lightbox .lb-btn {
  position: absolute; background: none; border: none; color: #fff;
  font-size: 34px; cursor: pointer; padding: 1rem; line-height: 1;
}
.lightbox .lb-close { top: 0.5rem; right: 1rem; }
.lightbox .lb-prev { left: 0.5rem; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 0.5rem; top: 50%; transform: translateY(-50%); }

/* ── Contacts page ────────────────────────────────────────────────── */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.contact-details h4 { font-size: 20px; font-weight: 400; margin: 0 0 1.4rem; color: var(--heading); }
.contact-details a { color: var(--cta-blue); }
.contact-form label { display: block; margin: 0 0 1.1rem; font-weight: 700; color: var(--heading); }
.contact-form input, .contact-form textarea {
  width: 100%; margin-top: 0.4rem; padding: 0.75rem 0.9rem;
  border: 1px solid #c9ced6; border-radius: 3px;
  font-family: var(--font-main); font-size: 15px; font-weight: 400; color: var(--text);
}
.contact-form button {
  background: var(--cta-blue); color: #fff; border: none; cursor: pointer;
  padding: 0.85rem 2.4rem; font-size: 17px; border-radius: 3px; font-family: var(--font-main);
}
.contact-form button:hover { background: #1a44a8; }

/* ── More responsive rules (tablets and phones) ───────────────────── */
@media (max-width: 1024px) {
  .stages { grid-template-columns: 1fr; gap: 1.8rem; }
  .about-layout { grid-template-columns: 1fr; }
  .about-layout .side-images { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .trio-item { height: 480px; }
}
@media (max-width: 860px) {
  .menu-btn { display: block; }
  .mainnav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; margin: 0; padding: 0.6rem 0;
    background: var(--dark-section); box-shadow: 0 12px 24px rgba(0,0,0,0.35);
  }
  .mainnav.open { display: flex; }
  .mainnav a { padding: 0.85rem 24px; margin: 0; font-size: 16px; border-top: 1px solid rgba(255,255,255,0.08); }
  .site-header .mainbar-in { position: relative; }
  .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .service-row { gap: 1.4rem; padding: 2rem 0; }
  .service-row img { width: 84px; height: 84px; }
  .portfolio-photos { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-grid img { height: auto; }
  .page-title h1 { font-size: 30px; }
  .service-row { flex-direction: column; }
  .service-row img { width: 96px; height: 96px; }
  .trio-item { height: 420px; }
  .topbar-contact a { margin-right: 1rem; }
}

/* ════════════════════════════════════════════════════════════════════
   MOTION & PHOTO BANDS — added 2026-10-24 after Michael's test found
   the rebuild had missed the original site's movement and photo bands.
   Everything below recreates behaviour found in the archived original:
   • Scroll-in animations (the original theme's animate_fade / _afl /
     _afr / _aft / _afb): elements start invisible and glide in when
     they scroll into view. Handled by js/site.js adding .in.
   • Full-width photo bands with parallax (the original's
     "parallax_fixed" rows): the photo stays put while the page
     scrolls past it. Done with background-attachment: fixed.
   • Richer mouse-over motion on services, photo blocks and gallery.
   ════════════════════════════════════════════════════════════════════ */

/* ── Scroll-in animations ────────────────────────────────────────────
   Elements carry class "rv" plus a direction: rv-fade, rv-left,
   rv-right, rv-top, rv-bottom. They only start hidden when JavaScript
   is running (html.js), so the page is never blank without it. */
.js .rv { opacity: 0; }
.js .rv-left   { transform: translateX(-3rem); }
.js .rv-right  { transform: translateX(3rem); }
.js .rv-top    { transform: translateY(-3rem); }
.js .rv-bottom { transform: translateY(3rem); }
.js .rv { transition: opacity 0.9s cubic-bezier(.22,.61,.36,1), transform 0.9s cubic-bezier(.22,.61,.36,1); }
.js .rv.in { opacity: 1; transform: none; }

/* ── Photo bands (page titles, Everything services, portfolio) ────── */
.band {
  position: relative; color: #fff;
  background-size: cover; background-position: center center;
  background-attachment: fixed; /* the parallax: photo stays, text scrolls */
}
.band::before { /* dark overlay so white text reads over any photo */
  content: ""; position: absolute; inset: 0;
  background: rgba(28, 29, 38, 0.58);
}
.band > .wrap { position: relative; z-index: 1; }
.band h1, .band h2 { color: #fff; }
.band-title { padding: 5.5rem 0; }
.band-title h1 { font-size: 40px; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; margin: 0; }
.band-service { padding: 6rem 0; }
.band-full { min-height: 100vh; display: flex; align-items: center; padding: 5rem 0; }
.band-full .half { max-width: 560px; }
.band-full h2 { font-size: 34px; margin: 0 0 0.9rem; text-transform: uppercase; }
.band-full p { margin: 0; font-size: 17px; line-height: 1.65; }
.band-photo { min-height: 100vh; } /* photo-only band, no text */
/* Phones/tablets: fixed backgrounds judder or break on touch browsers,
   so bands scroll normally there (photos still show, just no parallax). */
@media (hover: none), (max-width: 860px) {
  .band { background-attachment: scroll; }
  .band-full, .band-photo { min-height: 70vh; }
}

/* ── Two-column rows (Everything services, text + icon) ───────────── */
.cols2 { display: flex; align-items: center; gap: 3.5rem; }
.cols2 > div { flex: 1 1 0; }
.cols2 .col-icon { text-align: center; }
.cols2 .col-icon img { width: 100%; max-width: 300px; height: auto; }
.cols2.flip { flex-direction: row-reverse; }
@media (max-width: 760px) {
  .cols2, .cols2.flip { flex-direction: column; gap: 1.8rem; }
  .cols2 .col-icon img { max-width: 180px; }
}

/* ── Stronger mouse-over motion (matches the original's feel) ────── */
.service img { will-change: transform; }
.service:hover img { transform: translateY(-7px) scale(1.06); }
.service:hover h4 { color: var(--link-blue, #428df5); }
.trio-item .trio-photo { overflow: hidden; }
.trio-item:hover .trio-photo img { transform: scale(1.09); }
.trio-item .trio-title { transition: letter-spacing 0.35s, color 0.35s; }
.trio-item:hover .trio-title { letter-spacing: 2.5px; color: #fff; }
.plaque { transition: background 0.3s, transform 0.3s; }
.plaque:hover { background: rgba(0,0,0,0.82); transform: translateX(6px); }
.gallery-grid button { overflow: hidden; }
.gallery-grid button img { transition: transform 0.45s, opacity 0.3s; }
.gallery-grid button:hover img { transform: scale(1.07); opacity: 0.92; }
.cols2 .col-icon img { transition: transform 0.4s; }
.cols2:hover .col-icon img { transform: scale(1.05) rotate(-1.5deg); }
.footernav a, .topbar a, .mainnav a { transition: color 0.25s; }

/* ── Contacts page map ─────────────────────────────────────────────── */
.map-band { line-height: 0; background: var(--dark-section); }
.map-band img { width: 100%; height: auto; display: block; }

/* ── Respect visitors who ask their system for less motion ────────── */
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  .band { background-attachment: scroll; }
  * { transition-duration: 0.01s !important; }
}

/* ── Band variants (which bands had a dark overlay on the original) ── */
.band-light::before { background: rgba(28, 29, 38, 0.38); }
.no-overlay::before { display: none; }
.band-service h2 { font-size: 30px; text-transform: uppercase; margin: 0 0 0.8rem; }
.band-service p { margin: 0 0 1rem; max-width: 62ch; }
.service-plain { padding: 3.8rem 0; }
.service-plain h2 { font-size: 30px; text-transform: uppercase; margin: 0 0 0.8rem; }
.service-plain p { margin: 0 0 1rem; max-width: 62ch; }
.full-photo { line-height: 0; }
.full-photo img { width: 100%; height: auto; display: block; }

/* ════════════════════════════════════════════════════════════════════
   PASS 3 — Michael's notes, 2026-10-25
   • Header keeps a shaded background even at the very top, so the
     menu text is always readable (it still shrinks on scroll).
   • Hero slider rebuilt to move like the original: the photo wipes
     in left-to-right DARK, a second pass wipes in to brighten it,
     the caption plaque slides in from the right, and the device
     image rises from the bottom last.
   • New pieces: Houzz-only social link, Features cards, alternating
     About rows, Contacts form icons + dark details panel.
   ════════════════════════════════════════════════════════════════════ */

/* ── Header shading at the top (homepage) ─────────────────────────── */
.site-header .topbar { background: rgba(21, 21, 26, 0.78); }
.site-header .mainbar { background: rgba(21, 21, 26, 0.85); }
/* Inner pages: the SAME translucent header as the homepage (they
   used to be solid dark). Their header element and bar override
   the solid .inner styles above. */
.site-header.inner { background: transparent; }
.site-header.inner .mainbar { background: rgba(21, 21, 26, 0.85); }

/* ── Houzz: same line as the email/phone, right after the number ──── */
.topbar { max-height: 36px; } /* single row again */
.topbar-in { justify-content: flex-end; }
.topbar-right { display: flex; align-items: center; }
.houzz-link { display: inline-flex; align-items: center; gap: 7px; color: #d3d8db; font-size: 13px; white-space: nowrap; }
.houzz-link img { width: 17px; height: 17px; display: block; }
.houzz-link:hover { color: #4dbc15; } /* Houzz green */

/* ── Hero slider: the transition, as Michael mapped it from the
   live site (2026-10-26). Each slide's photo is painted on two
   layers (the same inline background-image on both): .bg-dark
   (dimmed) and .bg-bright (full colour), plus a white .slide-wash.
   1. The OUTGOING photo (top layer) slides out to the RIGHT,
      fast (1s), its white wash fading up to 80% — it whitens
      away, uncovering the incoming slide beneath from the left.
   2. The incoming DARK photo slides IN from the left beneath
      it, slower than the outgoing exits, its layers overscanned
      (scale 1.22) so it fills the frame throughout the slide.
   3. The moment the old photo has left, the BRIGHT copy sweeps
      in from the left (1s) carrying the white wash at 80%,
      which burns down to nothing as it fills the screen, while
      the dark photo keeps panning beneath until it is covered.
   (Direction corrected 2026-10-26: the whole flow reads
   left-to-right, as on the live site.)
   The plaque rides in with the dark photo; the device image with
   the bright one. The outgoing exit uses a weighted ease (slow
   start, then accelerating); the two incoming passes move at a
   constant speed, no ramping; the plaque and device keep the
   live slider's own layer easings.
   (The photo is set inline on each layer, NOT via a CSS variable:
   browsers resolve a url() inside a variable against the stylesheet
   folder, which silently 404'd the photos in v5.) */
.slide { opacity: 1; transition: none; visibility: hidden; }
.slide.active, .slide.leaving { visibility: visible; }
.slide.active { z-index: auto; }
.slide-bg { z-index: 1; }
.slide-bg.bg-bright { z-index: 2; }
.slide.leaving .slide-bg { z-index: 3; }
.slide-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: 50% 50%;
  clip-path: inset(0 100% 0 0); /* parked: hidden until revealed from the left */
}
.slide-bg.bg-dark { filter: brightness(0.45) saturate(0.92); }
.slide.active .bg-dark { clip-path: inset(0 0 0 0); transform: translateX(0) scale(1.22); animation: bt-slide-in 2s linear backwards; }
.slide.active .bg-bright { clip-path: inset(0 0 0 0); transform: translateX(0) scale(1.22); animation: bt-clip-b 1s linear 1s backwards; }
/* The incoming DARK photo slides IN from the left beneath the
   outgoing one, slower than the outgoing exits, and it NEVER
   stops: it slides at a constant speed (no ramping) straight
   past its resting position and keeps moving right until the
   bright copy has fully covered it. It starts about 20% off the
   screen to the left and ends about 20% off the screen to the
   right, the whole slide taking the same 2 seconds as the exit
   plus the white pass together. Both
   incoming layers are
   scaled 1.22: the overscan means the dark photo still fills the
   frame edge-to-edge at every point of its slide, so no empty
   gap can open at the right while it travels. The BRIGHT copy
   sweeps in from the left over it, also at a constant speed,
   and fills the frame — it is the layer that lands at rest. */
@keyframes bt-slide-in {
  from { transform: translateX(-20%) scale(1.22); }
  to   { transform: translateX(20%) scale(1.22); }
}
@keyframes bt-clip-b {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
/* The white wash: a plain white layer in step with each photo.
   Over the OUTGOING photo it fades UP (0 to 80%) as the photo
   exits — the old image whitens away — and it is glued to that
   photo (same exit slide), so the white only ever covers the
   outgoing image, never the whole screen. Over the incoming
   BRIGHT photo it starts at 80% and fades DOWN to nothing as
   that photo sweeps in — the "flash" is this white burning off,
   not a brightness filter. There it is clipped with the same
   reveal as the bright photo, so it only covers what has swept in. */
.slide-wash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 4; }
.slide.active .slide-wash {
  animation: bt-clip-b 1s linear 1s backwards,
             bt-wash-in 1s linear 1s backwards;
}
@keyframes bt-wash-in { from { opacity: 0.8; } to { opacity: 0; } }
.slide.leaving .slide-wash {
  animation: bt-wash-out 1s cubic-bezier(.5,0,.85,.4) both,
             bt-exit2 1s cubic-bezier(.5,0,.85,.4) both;
}
@keyframes bt-wash-out { from { opacity: 0; } to { opacity: 0.8; } }
/* Timing pairs (Michael, 2026-10-25): the plaque rides in WITH the
   dark photo pass; the device image rides in WITH the bright pass.
   Speeds and easings are matched to the live site's slider data
   (checked 2026-10-25): the plaque layer runs ~2s on a power3.out
   ease, starting off-screen left (x:-175%) behind a mask — which
   is why it reads as a right-to-left wipe reveal while the text
   itself drifts a little left-to-right. The device layer rises
   from y:100% on power4.inOut — compressed into the white pass's
   own 1-second window at Michael's direction (2026-10-27): it
   transitions WITH the white pass, not after it. The photo passes
   use a weighted ease that starts slow and speeds up, the dark pass
   slower than the bright pass, as on the live site. */
.slide.active .plaque { animation: bt-plaque 2s cubic-bezier(.215,.61,.355,1) 0.1s backwards; }
@keyframes bt-plaque {
  0%   { clip-path: inset(0 0 0 100%); transform: translateX(-38px); opacity: 0; }
  4%   { opacity: 1; }
  100% { clip-path: inset(0 0 0 0); transform: translateX(0); opacity: 1; }
}
.slide.active .device { animation: bt-device 1s cubic-bezier(.77,0,.175,1) 1s backwards; }
@keyframes bt-device {
  /* The rise carries the device up THROUGH the caption plaque's
     space before it settles into its perch just above the text.
     Michael (2026-10-25): it should stay invisible while it is
     crossing the text and only fade in once it is past it, so the
     arrival feels smooth instead of the image clunking in and
     sliding over the words. Opacity therefore holds at 0 for the
     first half of the rise and fades in across the rest. */
  0%   { transform: translateY(100%); opacity: 0; }
  50%  { opacity: 0; }
  85%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .slide-bg { clip-path: none; animation: none !important; }
  .slide-wash { display: none; }
  .slide.active .plaque, .slide.active .device { animation: none; }
}

/* ── Expertise page: three cards + a dark process band ───────────── */
.band-title.slim { padding: 3rem 0; }
/* Photo frieze at the very top of the Expertise page (real jobs) */
.frieze { display: flex; gap: 6px; }
.frieze img { flex: 1 1 0; min-width: 0; height: 190px; object-fit: cover; display: block; }
@media (max-width: 760px) { .frieze { flex-wrap: wrap; } .frieze img { flex: 1 1 40%; height: 130px; } }
/* The Expertise heading, set lower on the page */
.page-head { margin-bottom: 2.8rem; }
.page-head h1 { font-size: 44px; margin: 0; }
/* Wide photo band between the Expertise cards and the process band */
.wide-band { height: 340px; background-size: cover; background-position: center; }
/* Big pale number in the top corner of each card */
.feature-card .fc-body { position: relative; }
.fc-num { position: absolute; top: 0.4rem; right: 1rem; font-size: 56px; font-weight: 700; line-height: 1; color: #edf0f4; }
.feature-card .fc-body h3, .feature-card .fc-body p, .feature-card .fc-link { position: relative; }
/* "How a project comes together": dark band of numbered steps */
.process { background: var(--dark-section); padding: 5rem 0; }
.process-title { color: #fff; text-align: center; margin: 0 0 3rem; }
.process-steps { display: flex; gap: 2.2rem; }
.pstep { flex: 1 1 0; }
.pstep-num { display: block; font-size: 44px; font-weight: 700; line-height: 1; color: var(--accent-blue); margin-bottom: 0.8rem; }
.pstep h3 { color: #fff; font-size: 18px; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 0.5rem; }
.pstep p { color: #b9bec9; margin: 0; }
@media (max-width: 760px) { .process-steps { flex-direction: column; } }
.feature-cards { display: flex; gap: 2.2rem; }
.feature-card {
  flex: 1 1 0; background: #fff; border: 1px solid #e5e7ec; display: flex; flex-direction: column;
  box-shadow: 0 4px 18px rgba(20, 22, 35, 0.05);
  transition: transform 0.35s, box-shadow 0.35s;
}
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(20, 22, 35, 0.13); }
.feature-card .fc-photo { display: block; overflow: hidden; aspect-ratio: 16 / 8.5; margin-top: auto; }
.feature-card .fc-body { display: block; padding: 1.3rem 1.5rem 1.5rem; }
.feature-card .fc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s; }
.feature-card:hover .fc-photo img { transform: scale(1.06); }
.feature-card .fc-body { padding: 1.3rem 1.5rem 1.5rem; }
.feature-card h3 { font-size: 22px; margin: 0 0 0.5rem; text-transform: uppercase; letter-spacing: 0.5px; }
.feature-card p { margin: 0 0 0.9rem; color: var(--text); }
.feature-card .fc-link { font-weight: 700; color: var(--cta-blue); }
.feature-card .fc-link span { display: inline-block; transition: transform 0.3s; }
.feature-card:hover .fc-link span { transform: translateX(5px); }
@media (max-width: 760px) { .feature-cards { flex-direction: column; } }

/* ── About page: alternating photo / text rows ────────────────────── */
.about-row { display: flex; align-items: center; gap: 3.2rem; margin-bottom: 3.8rem; }
.about-row:last-child { margin-bottom: 0; }
.about-row.flip { flex-direction: row-reverse; }
.about-row .ar-img, .about-row .ar-text { flex: 1 1 0; }
.about-row .ar-img img { width: 100%; height: auto; display: block; box-shadow: 0 10px 30px rgba(20, 22, 35, 0.14); }
@media (max-width: 860px) {
  .about-row, .about-row.flip { flex-direction: column; gap: 1.6rem; }
}

/* ── Contacts page: icons inside the fields (like the live site),
      light-grey fields, dark details panel ────────────────────────── */
.contact-form .field { position: relative; margin: 0 0 1.1rem; }
.contact-form .field label { display: block; font-weight: 700; color: var(--heading); margin-bottom: 0.4rem; }
.contact-form .field svg {
  position: absolute; left: 14px; bottom: 13px; width: 19px; height: 19px;
  color: #8a919c; pointer-events: none;
}
.contact-form .field textarea + svg, .contact-form .field.has-textarea svg { bottom: auto; top: 15px; }
.contact-form input, .contact-form textarea {
  background: #f5f5f5; border: 1px solid #e2e4e9; border-radius: 3px;
  padding-left: 2.9rem; box-shadow: inset 0 1px 0 rgba(0,0,0,0.05);
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--cta-blue); background: #fff;
  box-shadow: 0 0 0 3px rgba(32, 80, 201, 0.15);
}
.contact-form .form-status { margin: 1rem 0 0; font-weight: 700; }
.contact-form .form-status:empty { display: none; }
.contact-form .form-status.ok { color: #1d7a3a; }
.contact-form .form-status.err { color: #b3261e; }
.contact-form button:disabled { opacity: 0.6; cursor: wait; }
.policy-links { margin-top: 2.5rem; }
.policy-links h2 { font-size: 1.35rem; }
.contact-details {
  background: #f4f5f7; border: 1px solid #e4e6eb; color: var(--text);
  padding: 2.1rem 2.1rem 1.2rem; border-radius: 4px;
}
.contact-details .cd-row { display: flex; gap: 1.05rem; align-items: flex-start; margin-bottom: 1.5rem; }
.contact-details .cd-ico {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--cta-blue); display: flex; align-items: center; justify-content: center;
}
.contact-details .cd-ico svg { width: 20px; height: 20px; color: #fff; }
.contact-details .cd-ico img { width: 19px; height: 19px; }
.contact-details .cd-label { display: block; font-size: 12.5px; letter-spacing: 1.6px; text-transform: uppercase; color: #8f939e; margin-bottom: 0.2rem; }
.contact-details .cd-value { font-size: 18.5px; color: var(--heading); line-height: 1.45; }
.contact-details a { color: var(--heading); }
.contact-details a:hover { color: var(--cta-blue); }

/* ── Sticky shrinking header on the inner pages too (Michael,
      2026-10-25): their header used to scroll away with the page.
      Now it pins to the top and shrinks on scroll, exactly like
      the homepage. The body padding makes room for the pinned bar
      (36px top strip + 100px main bar; on phones the strip hides
      and the bar is 64px). ──────────────────────────────────────── */
.site-header.inner { position: fixed; }
body.inner-page { padding-top: 136px; }
html { scroll-padding-top: 150px; }
@media (max-width: 860px) {
  body.inner-page { padding-top: 64px; }
  html { scroll-padding-top: 84px; }
}

/* ── Slider element visibility discipline (Michael, 2026-10-25) ─────
   The plaque and device of a slide exist ONLY while their slide is
   active: hidden during their entrance delays (their animations'
   first keyframes hold opacity 0), and when a slide leaves, its
   text and device fade out fast while its PHOTO stays in place
   until the incoming slide's dark wipe covers it — so the old
   slide's text never sits on top of the new slide's entrance. */
.slide .plaque, .slide .device { opacity: 0; }
.slide .plaque { transition: opacity .18s ease, background-color .3s ease, transform .3s ease; }
.slide .device { transition: opacity .18s ease; }
.slide.active .plaque, .slide.active .device { opacity: 1; }
/* The OUTGOING slide's photo exits to the RIGHT, fast, as the top
   layer — uncovering the incoming slide beneath it from the left
   as it goes, and whitening as it travels (its white wash above
   fades up to 80%). Same weighted ease as everything else: slow
   off the mark, then accelerating away. */
.slide.leaving .bg-dark, .slide.leaving .bg-bright {
  clip-path: inset(0 0 0 0);
  animation: bt-exit2 1s cubic-bezier(.5,0,.85,.4) both;
}
@keyframes bt-exit2 { from { transform: translateX(0) scale(1.22); } to { transform: translateX(100%) scale(1.22); } }