/*
Theme Name: LLS Foundation
Theme URI: https://mcwilliamsmedia.com/lls
Author: McWilliams Media
Author URI: https://mcwilliamsmedia.com
Description: Local Launch System (LLS) Foundation theme. Reusable, parameterized theme for local service-business sites. Brand colors, NAP, phone, and service/location data are set via the Customizer and theme-config.php so each client is a re-skin, not a rebuild. Pilot build: Tulsa Executive Cleaning.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lls
*/

/* ============================================================
   Brand tokens — defaults; overridable via Customizer (printed
   as an inline :root override in <head> by lls_brand_css_vars()).
   Both naming sets (homepage --spruce/--brass, inner --blue/--cyan-text)
   are aliased so all extracted component CSS resolves.
   ============================================================ */
:root{
  --spruce:#05508A;   --blue:#05508A;        /* Executive Blue */
  --spruce-deep:#033A66; --blue-deep:#033A66; /* Deep Executive */
  --mist:#EFF1D9;     --celery:#EFF1D9;       /* Celery Mist */
  --paper:#FCF5ED;    --cream:#FCF5ED;        /* Warm Cream */
  --ink:#15212C;
  --ink-soft:#4E5A64;
  --brass:#0D9ACF;    --cyan-text:#0B86B5;    /* text-safe cyan accent */
  --brass-soft:#F9DD72;
  --line:#DDD9CB;
  --gold:#F9DD72;                              /* Tulsa Gold — FILL only */
  --cyan:#1FB7E0;                              /* Sky Cyan */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Open Sans',sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;font-size:17px}
h1,h2,h3,h4{font-family:'Raleway',sans-serif;line-height:1.12;letter-spacing:-0.015em}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.eyebrow{font-family:'Raleway',sans-serif;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;background:#fff;color:var(--spruce);padding:8px 14px;border-radius:4px;z-index:1000}

/* ===== Buttons ===== */
.btn{display:inline-block;font-family:'Raleway',sans-serif;font-weight:700;font-size:15px;padding:13px 26px;border-radius:4px;transition:transform .12s ease;cursor:pointer;border:none}
.btn:hover{transform:translateY(-1px)}
.btn-solid,.btn-gold{background:var(--gold);color:#0A2B47}      /* Primary CTA: gold fill + navy text */
.btn-ghost,.btn-line{border:2px solid var(--spruce);color:var(--spruce);background:transparent}
.btn-light{background:#fff;color:var(--spruce)}
.btn-blue{background:var(--blue);color:#fff}
.verify{font-size:11px;font-weight:700;color:#6B5A0E;background:var(--gold);padding:1px 6px;border-radius:3px;vertical-align:middle;font-family:'Open Sans',sans-serif}

/* ===== Header ===== */
header.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100}
.topline{background:var(--spruce-deep);color:#DFEAE5;font-size:13.5px;padding:7px 0}
.topline .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.topline strong{color:#fff}
.navrow{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:24px;position:relative}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:54px;height:54px;border-radius:50%;object-fit:cover}
.logo{font-family:'Raleway',sans-serif;font-weight:800;font-size:21px;color:var(--spruce);line-height:1.05}
.logo span{display:block;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#0D9ACF}
.main-nav > ul{display:flex;gap:26px;list-style:none;font-weight:600;font-size:15.5px;margin:0;font-family:'Raleway',sans-serif;align-items:center}
.main-nav a:hover{color:var(--brass)}
.main-nav > ul > li{position:relative}
.nav-toggle{display:none;background:none;border:none;font-size:26px;line-height:1;color:var(--spruce);cursor:pointer;padding:4px 8px}
.dd-trigger{background:none;border:none;font:inherit;font-weight:600;color:inherit;cursor:pointer;padding:0}
.dd-trigger:hover{color:var(--brass)}
.submenu-toggle{display:none;background:none;border:none;cursor:pointer;color:inherit}
.dropdown{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-top:3px solid var(--cyan);border-radius:0 0 8px 8px;box-shadow:0 18px 40px rgba(5,80,138,.14);padding:18px 22px;z-index:50}
.has-dropdown:hover > .dropdown,.has-dropdown:focus-within > .dropdown{display:block}
.dropdown ul{display:block;list-style:none;margin:0;font-size:14.5px;font-weight:600}
.dropdown a{display:block;padding:6px 0;white-space:nowrap;color:var(--ink-soft)}
.dropdown a:hover{color:var(--brass)}
.dropdown-services{grid-template-columns:1fr 1fr;gap:4px 36px;min-width:470px}
/* services dropdown lays out as a 2-col grid only when actually shown (hover/focus) */
.has-dropdown:hover > .dropdown-services,.has-dropdown:focus-within > .dropdown-services{display:grid}
.dd-head{display:block;font-family:'Raleway',sans-serif;font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--spruce);margin-bottom:6px;border-bottom:1px solid var(--line);padding-bottom:6px}
.dd-all{grid-column:1 / -1;display:block;margin-top:8px;padding-top:10px;border-top:1px solid var(--line);font-family:'Raleway',sans-serif;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--brass)}
.dropdown-locations{min-width:330px}
.dropdown-locations ul{columns:2;column-gap:34px}
.dropdown-locations li{break-inside:avoid}

/* ===== Hero (front page) ===== */
.hero{background:linear-gradient(160deg,var(--spruce) 0%,var(--spruce-deep) 100%);color:#fff;padding:78px 0 86px;position:relative;overflow:hidden}
.hero.has-photo{background-size:cover;background-position:center 38%}
.hero::after{content:"";position:absolute;right:-140px;top:-140px;width:520px;height:520px;border-radius:50%;border:90px solid rgba(255,255,255,.05)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start;position:relative;z-index:1}
.hero h1{font-size:clamp(34px,4.6vw,54px);font-weight:800;color:#fff;margin:14px 0 22px}
.hero h1 em{font-style:normal;color:var(--gold)}
.answer-card{background:rgba(255,255,255,.07);border-left:4px solid var(--gold);padding:22px 24px;border-radius:0 6px 6px 0;font-size:18px;color:#EAF2EE;margin-bottom:30px}
.answer-card strong{color:#fff}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-aside{background:#fff;color:var(--ink);border-radius:8px;padding:30px 28px;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.hero-aside h3{font-size:20px;color:var(--spruce);margin-bottom:6px}
.hero-aside p.small{font-size:14px;color:var(--ink-soft);margin-bottom:18px}
.field{margin-bottom:12px}
.field label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.field input,.field select,.field textarea{width:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:4px;font:inherit;font-size:15px;background:var(--paper)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--cyan);border-color:var(--cyan)}
.hero-aside .btn{width:100%;text-align:center;margin-top:6px}
.form-note{font-size:12.5px;color:var(--ink-soft);margin-top:10px;text-align:center}

/* ===== Trust bar ===== */
.trust{background:var(--mist);border-bottom:1px solid var(--line);padding:22px 0}
.trust .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:var(--spruce)}
.trust-item .dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);flex:none}

/* ===== Generic sections ===== */
section{padding:74px 0}
.sec-head{max-width:680px;margin-bottom:40px}
.sec-head h2{font-size:clamp(27px,3.4vw,38px);color:var(--spruce);margin:12px 0 14px}
.sec-head p{color:var(--ink-soft);font-size:17.5px}
.lead-answer{border-left:4px solid var(--gold);padding:6px 0 6px 22px;font-size:18.5px;color:var(--ink);max-width:680px;margin-bottom:18px}
.lead-answer strong{color:var(--spruce)}

/* ===== Service grids ===== */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc{background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 24px;transition:border-color .15s ease, box-shadow .15s ease}
.svc:hover{border-color:var(--cyan);box-shadow:0 10px 30px rgba(23,63,56,.08)}
.svc h3{font-size:18.5px;color:var(--spruce);margin-bottom:8px}
.svc p{font-size:15px;color:var(--ink-soft);margin-bottom:12px}
.svc a{font-family:'Raleway',sans-serif;font-weight:700;font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--brass)}
.resi,.resi-bg{background:var(--spruce);color:#fff}
.resi .sec-head h2,.resi-bg .sec-head h2{color:#fff}
.resi .sec-head p,.resi-bg .sec-head p{color:#CFE0D9}
.resi .eyebrow,.resi-bg .eyebrow{color:var(--gold)}
.resi .svc,.resi-bg .svc{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.resi .svc h3,.resi-bg .svc h3{color:#fff}
.resi .svc p,.resi-bg .svc p{color:#C8D8D1}
.resi .svc a,.resi-bg .svc a{color:var(--gold)}

/* ===== Founder / E-E-A-T — portrait supports circle OR rectangle ===== */
.founder-grid,.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:center}
.portrait{aspect-ratio:4/4.6;border-radius:8px;background:linear-gradient(155deg,var(--mist),#cfdfd6);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;position:relative;border:1px solid var(--line)}
.portrait .ph{font-family:'Raleway',sans-serif;font-weight:700;color:var(--spruce);opacity:.45;font-size:14px;letter-spacing:.1em;text-transform:uppercase;padding-bottom:24px;text-align:center}
.portrait img{width:100%;height:100%;object-fit:cover}
/* circular variant (default for the current Judith asset) */
.portrait.is-circle{aspect-ratio:4/4.6;background:linear-gradient(155deg,var(--mist),#cfdfd6);border:1px solid var(--line);align-items:center}
.portrait.is-circle img{width:86%;height:auto;aspect-ratio:1/1;border-radius:50%;object-fit:cover;box-shadow:0 14px 36px rgba(5,80,138,.22)}
.cred-list{list-style:none;margin-top:22px;display:grid;gap:12px}
.cred-list li{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.cred-list .dot,.cred-list .d{width:9px;height:9px;border-radius:50%;background:var(--cyan);flex:none;margin-top:8px}
blockquote{border-left:3px solid var(--gold);padding-left:18px;margin-top:24px;font-style:italic;color:var(--ink-soft);font-size:17px}
blockquote cite{display:block;font-style:normal;font-weight:700;color:var(--spruce);margin-top:8px;font-size:14.5px}

/* ===== Values (About) ===== */
.values{background:var(--mist)}
.val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.val{background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 24px}
.val h3{font-size:19px;color:var(--spruce);margin-bottom:8px;font-weight:800}
.val p{font-size:15px;color:var(--ink-soft)}

/* ===== Locations ===== */
.loc{background:var(--mist)}
.loc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.loc-grid.cols-3{grid-template-columns:repeat(3,1fr);gap:20px}
.loc-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:22px 18px;text-align:center;transition:transform .12s ease}
.loc-card:hover{transform:translateY(-3px);border-color:var(--cyan)}
.loc-card.hq{background:var(--spruce);border-color:var(--spruce)}
.loc-card.hq h3{color:var(--gold)}
.loc-card.hq p{color:#CFE3F2}
.loc-card h3{font-size:17px;color:var(--spruce)}
.loc-card p{font-size:13px;color:var(--ink-soft);margin-top:4px}
.loc-note{margin-top:26px;font-size:15px;color:var(--ink-soft);max-width:720px}

/* ===== Page banner (inner pages) ===== */
.banner{background:linear-gradient(160deg,var(--spruce),var(--spruce-deep));color:#fff;padding:60px 0 64px;position:relative;overflow:hidden}
.banner::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;border:80px solid rgba(255,255,255,.05)}
/* Hero photo variant: real photo behind a navy overlay so the H1 stays legible. */
.banner.has-hero{background-size:cover;background-position:center}
.banner.has-hero{padding:78px 0 82px}
.banner.has-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(3,58,102,.85) 0%,rgba(5,80,138,.58) 55%,rgba(5,80,138,.40) 100%);z-index:0}
.banner.has-hero .wrap{position:relative;z-index:1}
.banner .crumbs{font-size:13px;color:#9CC8E8;font-weight:600;margin-bottom:10px;position:relative;z-index:1}
.banner h1{font-size:clamp(32px,4.4vw,50px);font-weight:800;color:#fff;letter-spacing:-0.015em;position:relative;z-index:1}
.banner p{color:#CFE3F2;font-size:18px;max-width:640px;margin-top:14px;position:relative;z-index:1}

/* ===== Default page content ===== */
.page-content{padding:64px 0}
.page-content .wrap{max-width:1040px}
/* In-content page photo (clean, clearly visible; floats beside the opening prose) */
.page-photo{float:right;width:min(44%,400px);margin:4px 0 20px 32px;border-radius:10px;overflow:hidden;box-shadow:0 16px 38px rgba(5,80,138,.16);aspect-ratio:4/3;background:var(--mist)}
.page-photo img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:680px){.page-photo{float:none;width:100%;margin:0 0 20px;aspect-ratio:16/10}}
.loc-map{clear:both;margin-top:34px;border-radius:10px;overflow:hidden;border:1px solid #242424}
.loc-map iframe{display:block;width:100%;height:280px}

.sitemap-page{padding:56px 0 70px}
.sitemap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;align-items:start}
.sitemap-col h2{font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:#FF6600;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid #242424}
.sitemap-col h2 + ul{margin-top:0}
.sitemap-col ul + h2{margin-top:28px}
.sitemap-col ul{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:8px}
.sitemap-col a{font-size:14.5px;color:#C9C9C9}
.sitemap-col a:hover{color:#FF6600}
@media(max-width:900px){.sitemap-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sitemap-grid{grid-template-columns:1fr}}

/* Locations Hub (Type A) — dark-theme card grid, reusing .loc-grid/.loc-card
   (built for the old homepage locations section, now only used here) */
.loc-hub{padding:56px 0 70px}
.loc-hub .lead-answer{font-size:17px;color:#D9D9D9;max-width:760px;margin-bottom:40px}
.loc-hub h2{color:#FF6600;text-transform:uppercase;letter-spacing:.06em;font-size:15px;
  border-left:4px solid #FF6600;padding-left:16px;margin:36px 0 18px}
.loc-card{background:#141414;border:1px solid #242424}
.loc-card:hover{border-color:#FF6600}
.loc-card h3{color:#FFFFFF}
.loc-card p{color:#9a9a9a}
.loc-card.hq{background:#1a1108;border-color:#FF6600}
.loc-card.hq h3{color:#FF6600}
.loc-grid-extended{grid-template-columns:repeat(8,1fr)}
.loc-grid-extended .loc-card{padding:16px 12px}
.loc-grid-extended .loc-card h3{font-size:14px}
@media(max-width:900px){.loc-grid-extended{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){.loc-grid-extended{grid-template-columns:repeat(2,1fr)}}
.page-content h2{color:var(--spruce);font-size:clamp(24px,3vw,32px);margin:28px 0 12px}
.page-content h3{color:var(--spruce);font-size:21px;margin:22px 0 10px}
.page-content p{margin-bottom:16px;color:var(--ink)}
.page-content ul,.page-content ol{margin:0 0 16px 22px}
.page-content li{margin-bottom:8px}

/* ===== Contact ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.info-card{display:grid;gap:22px}
.info-item h4{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-text);margin-bottom:6px;font-weight:800}
.info-item p{font-size:17px;color:var(--ink)}
.info-item strong{color:var(--spruce)}
.map-ph{margin-top:8px;height:220px;border-radius:8px;background:linear-gradient(135deg,var(--mist),#dde6e6);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:'Raleway',sans-serif;font-weight:800;color:var(--spruce);opacity:.55;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.form-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:32px 30px;box-shadow:0 16px 40px rgba(5,80,138,.07)}
.form-card h3{font-size:22px;color:var(--spruce);font-weight:800;margin-bottom:6px}
.form-card .sub{font-size:14.5px;color:var(--ink-soft);margin-bottom:20px}
.form-card .btn{width:100%;text-align:center;margin-top:4px}

/* ===== FAQ ===== */
.faq-cluster{margin-bottom:14px}
.faq-cluster > .eyebrow{margin-bottom:18px;display:block}
.faq-item{border-bottom:1px solid var(--line);padding:22px 0;max-width:860px}
.faq-item h3{font-size:18.5px;color:var(--spruce);margin-bottom:8px}
.faq-item p{color:var(--ink-soft);font-size:16px}
.faq-more{margin-top:26px}

/* ===== CTA band ===== */
.cta-band{background:var(--spruce-deep);color:#fff;text-align:center;padding:70px 0}
.cta-band h2{font-size:clamp(26px,3.4vw,38px);color:#fff;margin-bottom:14px}
.cta-band p{color:#C8D8D1;max-width:560px;margin:0 auto 28px}

/* ===== Footer ===== */
footer.site-footer{background:var(--ink);color:#B9C4BF;padding:56px 0 28px;font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px}
.site-footer h4{color:#fff;font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.site-footer ul{list-style:none;display:grid;gap:8px}
.site-footer a:hover{color:var(--gold)}
.foot-brand .footer-logo{display:block;width:96px;height:96px;border-radius:50%;background:#fff;padding:6px;box-sizing:border-box;margin-bottom:16px}
.nap{line-height:1.7}
.nap strong{color:#fff;font-size:16px}
.legal{border-top:1px solid #333d39;padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:#7f8b86}

/* ===== Responsive ===== */
@media (max-width:920px){
  .hero-grid,.founder-grid,.about-grid,.contact-grid{grid-template-columns:1fr}
  .svc-grid,.val-grid{grid-template-columns:1fr 1fr}
  .loc-grid,.loc-grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  /* mobile nav */
  .nav-toggle{display:block}
  .nav-cta{display:none}
  .main-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);box-shadow:0 20px 40px rgba(0,0,0,.14);z-index:60;max-height:78vh;overflow:auto}
  .main-nav.open{display:block}
  .main-nav > ul{flex-direction:column;gap:0;padding:6px 0;align-items:stretch}
  .main-nav > ul > li{position:static;border-bottom:1px solid var(--line)}
  .main-nav > ul > li > a,.dd-trigger{display:block;padding:13px 22px}
  .submenu-toggle{display:inline-block;position:absolute;right:10px;margin-top:4px;padding:9px 14px;font-size:16px}
  .dropdown{display:none;position:static;box-shadow:none;border:none;border-top:1px solid var(--line);border-radius:0;padding:4px 28px 12px;background:var(--paper)}
  .has-dropdown:hover > .dropdown,.has-dropdown:focus-within > .dropdown{display:none}
  .has-dropdown.open > .dropdown{display:block}
  .dropdown-services{grid-template-columns:1fr;min-width:0;gap:6px}
}
@media (max-width:560px){
  .svc-grid,.loc-grid,.loc-grid.cols-3,.val-grid,.foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* Homepage service card photos (janitorial section, added 2026-07) */
.svc.has-img{padding:0;overflow:hidden;display:flex;flex-direction:column}
.svc.has-img .svc-body{padding:26px 24px}
.svc-img{display:block;width:100%;height:200px;object-fit:cover;object-position:center;border-radius:0}
@media(max-width:600px){.svc-img{height:210px}}

/* =====================================================================
   PROPERTY ARTS — brand override (dark theme + orange accent)
   Added 2026-07-24. Matches the current propertyarts.com look/feel:
   black surfaces, white text, #FF6600 accent. Loads last so it wins the
   cascade over the light base theme. Covers CSS vars the config map does
   not reach (--brass/--ink-soft/--line) plus hardcoded light backgrounds.
   ===================================================================== */
:root{
  --brass:#FF6600;        /* link / hover accent (base used cyan) */
  --cyan-text:#FF8600;
  --brass-soft:#FF8600;
  --ink-soft:#B3B3B3;     /* muted text on dark */
  --line:#2A2A2A;         /* borders on dark */
}
body{background:#0D0D0D;color:#EDEDED}
h1,h2,h3,h4{color:#FFFFFF}
a{color:#FF6600}
a:hover{color:#FF8600}

/* Header / nav */
header.site-header{background:#000;border-bottom:1px solid #1E1E1E}
.topline{background:#000;color:#CFCFCF;border-bottom:1px solid #1C1C1C}
.logo{color:#FFFFFF}
.logo span{color:#B3B3B3}
.logo img,.brand img{max-height:56px;width:auto;display:block}
.main-nav a,.dd-trigger{color:#EAEAEA}
.main-nav a:hover,.dd-trigger:hover,.dropdown a:hover,.dd-all{color:#FF6600}
.nav-toggle{color:#FFFFFF}

/* Dropdowns */
.dropdown{background:#0F0F0F;border:1px solid #242424;border-top:3px solid #FF6600;box-shadow:0 18px 40px rgba(0,0,0,.6)}
.dropdown a{color:#CFCFCF}
.dd-head{color:#FFFFFF;border-bottom-color:#242424}

/* Hero */
.hero{background:linear-gradient(160deg,#151515 0%,#000 100%);color:#fff}
.hero h1 em{color:#FF6600}
.answer-card{background:rgba(255,255,255,.05);border-left:4px solid #FF6600;color:#E6E6E6}
.hero-aside{background:#141414;color:#EDEDED;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.hero-aside h3{color:#FFFFFF}
.hero-aside p.small{color:#B3B3B3}

/* Trust bar */
.trust{background:#111111;border-bottom:1px solid #1E1E1E}
.trust-item{color:#EAEAEA}
.trust-item .dot{background:#FF6600}

/* Sections / typography */
.sec-head h2{color:#FFFFFF}
.sec-head p{color:#B3B3B3}
.lead-answer{border-left-color:#FF6600;color:#EDEDED}
.eyebrow{color:#FF6600}

/* Buttons */
.btn-solid,.btn-gold{background:#FF6600;color:#111111}
.btn-solid:hover,.btn-gold:hover{background:#FF8600;color:#111}
.btn-ghost,.btn-line{border:2px solid #FF6600;color:#FF6600;background:transparent}
.btn-light{background:#FFFFFF;color:#111111}
.btn-blue{background:#FF6600;color:#111}

/* Form fields on dark */
.field label{color:#B3B3B3}
.field input,.field select,.field textarea{background:#0F0F0F;border:1.5px solid #333;color:#EDEDED}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid #FF6600;border-color:#FF6600}
.form-note{color:#8A8A8A}

/* Service cards */
.svc{background:#141414;border:1px solid #242424}
.svc h3{color:#FFFFFF}

/* =====================================================================
   PROPERTY ARTS — layout pass (blueprint bg + portfolio placeholders +
   dual-logo footer). Added 2026-07-24. Mirrors the current propertyarts.com
   look: dark blueprint texture behind content, orange section headings,
   portfolio image placeholders, Architecture/Construction dual footer.
   ===================================================================== */

/* Blueprint texture — see the "original-site match" block at the end of this
   file, where it moved onto <body> and is tiled at the source image's natural
   1200px width the way propertyarts.com does it. #content only carries a flat
   scrim now, so nothing here rescales the drafting lines. */
#content{
  background-color:transparent;
  background-image:linear-gradient(rgba(13,13,13,.58),rgba(13,13,13,.58));
}
/* Let section bands show the blueprint through (cards stay solid) */
#content > section{background-color:transparent}
.trust{background:rgba(0,0,0,.55) !important;backdrop-filter:blur(1px)}
section.resi{background:rgba(10,10,10,.55) !important}

/* Hero sits directly on the body blueprint tile with only a scrim of its own —
   no second copy of the texture at a different scale */
.hero{background-color:transparent !important;
      background-image:linear-gradient(120deg,rgba(0,0,0,.68) 0%,rgba(15,15,15,.42) 100%) !important;
      background-repeat:repeat !important;
      background-size:auto !important;
      background-attachment:scroll !important}

/* Hero photo strip — recent project photos, spliced in under the headline
   the way the old site opened straight into a project gallery */
.hero-photos{display:flex;gap:14px;margin-top:40px;position:relative;z-index:1;
  overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.hero-photos img{flex:1 0 190px;height:150px;object-fit:cover;border-radius:6px;
  border:1px solid rgba(255,255,255,.15);box-shadow:0 14px 34px rgba(0,0,0,.45);
  transition:transform .2s ease}
.hero-photos img:hover{transform:translateY(-4px)}
@media(max-width:780px){.hero-photos img{flex:0 0 140px;height:108px}}

/* Orange section headings (match current site) */
.sec-head h2{color:#FF6600 !important;text-transform:uppercase;letter-spacing:.01em}
.sec-head{border-left:4px solid #FF6600;padding-left:20px}

/* ---- Portfolio placeholder grid ---- */
.pa-portfolio{padding:66px 0}
.pa-portfolio .sec-head{margin-bottom:26px}
.pa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.pa-tile{position:relative;aspect-ratio:4/3;border:1px solid #323232;overflow:hidden;
  background:repeating-linear-gradient(45deg,#171717 0 14px,#1c1c1c 14px 28px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:16px;transition:border-color .18s,transform .18s}
.pa-tile:hover{border-color:#FF6600;transform:translateY(-3px)}
.pa-tile .pa-ico{width:34px;height:34px;color:#FF6600;margin-bottom:10px}
.pa-tile .pa-label{font-family:'Raleway',sans-serif;font-weight:800;font-size:14.5px;
  letter-spacing:.05em;text-transform:uppercase;color:#F2F2F2;line-height:1.2}
.pa-tile .pa-ph{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#7d7d7d;margin-top:8px}
.pa-tile .pa-corner{position:absolute;top:8px;right:10px;font-size:10px;color:#FF6600;
  border:1px solid #FF6600;border-radius:2px;padding:1px 5px;letter-spacing:.08em}

/* Big hero portfolio band placeholder */
.pa-slider{aspect-ratio:21/7;min-height:220px;margin-top:8px}
.pa-slider .pa-label{font-size:18px}

/* ---- Dual-logo footer + association badges ---- */
/* Clears the base theme's circular white-background footer-logo treatment
   (border-radius:50%, background:#fff, fixed 96x96 box) which was showing
   as a white oval behind Property Arts' wide rectangular logo. */
.foot-brand .footer-logo{width:auto;max-width:210px;height:auto;border-radius:0;
  background:transparent;padding:0;margin-bottom:12px}
.foot-const{margin-top:22px;padding-top:18px;border-top:1px solid #222}
.foot-const img{max-width:210px;height:auto}
.foot-badges{display:flex;align-items:center;justify-content:center;gap:34px;
  flex-wrap:wrap;padding:26px 0 6px;margin-top:16px;border-top:1px solid #1e1e1e}
.foot-badges img{height:58px;width:auto;opacity:.9;filter:grayscale(.15)}
.foot-pro h4{color:#fff}
.foot-pro ul{list-style:none;margin:0;padding:0}
.foot-pro li{margin:5px 0}
.foot-pro a{color:#b8b8b8}
.foot-pro a:hover{color:#FF6600}

/* Property Arts — dark footer fix */
.site-footer{background:#0A0A0A !important;color:#C9C9C9;border-top:3px solid #FF6600}
.site-footer h4{color:#FFFFFF}
.site-footer a{color:#C9C9C9}
.site-footer a:hover{color:#FF6600}
.foot-brand .foot-const{border-top-color:#242424}
.foot-badges{border-top-color:#222}
.foot-badges img{filter:brightness(1.6) grayscale(.1)}
.legal{border-top:1px solid #222;color:#8f8f8f}

/* "Where We Build" footer service-area band — moved out of the primary nav
   so the top bar stays short; internal links to every city page live here
   instead, styled as chips rather than a bare link list. */
.foot-areas{text-align:center;padding-bottom:30px;margin-bottom:30px;border-bottom:1px solid #1e1e1e}
.foot-areas h4{color:#FFFFFF;margin-bottom:8px}
.foot-areas > p{color:#9a9a9a;font-size:14px;max-width:640px;margin:0 auto 18px}
.site-footer ul.area-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;list-style:none;margin:0;padding:0}
.area-chips li{margin:0}
.area-chips a{display:flex;align-items:center;gap:6px;padding:7px 16px;border:1px solid #2a2a2a;
  border-radius:999px;color:#D9D9D9;font-size:13.5px;font-weight:600;letter-spacing:.01em;
  transition:border-color .18s,color .18s,background-color .18s}
.area-chips a:hover{border-color:#FF6600;color:#FFFFFF;background:rgba(255,102,0,.08)}
.area-chips .hq-badge{font-size:10px;letter-spacing:.08em;color:#FF6600;border:1px solid #FF6600;
  border-radius:3px;padding:1px 5px;line-height:1.4}
.area-extended-label{margin:16px auto 0;max-width:640px;font-size:12.5px;color:#7a7a7a;line-height:1.7}
.area-extended-label a{color:#9a9a9a;text-decoration:underline;text-decoration-color:#333}
.area-extended-label a:hover{color:#FF6600;text-decoration-color:#FF6600}

/* Property Arts — header logo fix (remove circular crop) */
.brand-logo{width:auto !important;height:56px !important;max-width:260px;
  border-radius:0 !important;object-fit:contain !important;display:block}
@media(max-width:600px){.brand-logo{height:44px;max-width:190px}}

/* Real-photo portfolio tiles */
.pa-tile.has-photo{padding:0;background:#0D0D0D;align-items:stretch;justify-content:flex-end}
.pa-tile.has-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.72;transition:opacity .2s ease,transform .25s ease}
.pa-tile.has-photo:hover img{opacity:.96;transform:scale(1.05)}
.pa-tile.has-photo:hover{border-color:#FF6600}
.pa-tile.has-photo .pa-cap{position:relative;z-index:2;width:100%;text-align:left;
  padding:36px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.92))}
.pa-tile.has-photo .pa-label{color:#FFFFFF;text-shadow:0 1px 6px rgba(0,0,0,.85)}
.pa-slider.has-photo .pa-label{font-size:20px}

/* =====================================================================
   PROPERTY ARTS — News / blog (archive grid + single article), dark theme
   ===================================================================== */
.wrap-narrow{max-width:780px}

/* ---- News archive grid ---- */
.news-archive{padding:56px 0 72px}
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin-top:26px}
.news-card{display:flex;flex-direction:column;background:#151515;border:1px solid #262626;
  border-radius:6px;overflow:hidden;text-decoration:none;transition:border-color .18s,transform .18s}
.news-card:hover{border-color:#FF6600;transform:translateY(-3px)}
.news-thumb{display:block;width:100%;height:190px;object-fit:cover}
.news-thumb-ph{background:repeating-linear-gradient(45deg,#171717 0 14px,#1c1c1c 14px 28px)}
.news-card-body{display:flex;flex-direction:column;gap:8px;padding:20px 20px 22px}
.news-card .post-meta{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#FF6600;font-weight:700}
.news-card .news-title{font-family:'Raleway',sans-serif;font-weight:800;font-size:18px;line-height:1.25;color:#FFFFFF}
.news-card .news-ex{font-size:14.5px;color:#B3B3B3;line-height:1.5}
.news-card .news-more{margin-top:2px;font-size:13px;font-weight:700;color:#FF6600}

/* ---- Single article ---- */
.post-single{padding:52px 0 70px}
.post-head{margin-bottom:26px}
.post-back{display:inline-block;margin-bottom:16px;font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#FF6600;text-decoration:none}
.post-single h1{font-family:'Raleway',sans-serif;font-weight:800;color:#FFFFFF;
  font-size:clamp(28px,4vw,42px);line-height:1.15;margin-bottom:12px}
.post-single .post-meta{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#8f8f8f;font-weight:700}
.post-hero{margin:24px 0 30px;border-radius:8px;overflow:hidden}
.post-hero img{width:100%;height:auto;display:block}

.post-body{color:#DADADA;font-size:17.5px;line-height:1.75}
.post-body p{margin:0 0 20px}
.post-body h2,.post-body h3{font-family:'Raleway',sans-serif;color:#FFFFFF;margin:34px 0 12px;line-height:1.25}
.post-body h2{font-size:26px}.post-body h3{font-size:21px}
.post-body a{color:#FF6600;text-decoration:underline}
.post-body a:hover{color:#FF8600}
.post-body img{max-width:100%;height:auto;border-radius:6px;margin:14px 0}
.post-body ul,.post-body ol{margin:0 0 20px 22px}
.post-body li{margin:6px 0}
.post-body blockquote{border-left:4px solid #FF6600;padding:8px 0 8px 20px;margin:24px 0;color:#EDEDED;font-size:19px}
.post-body strong{color:#FFFFFF}

.post-foot{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px;padding-top:26px;border-top:1px solid #242424}

/* pagination */
.pagination,.nav-links{margin-top:38px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pagination .page-numbers{display:inline-block;padding:8px 14px;border:1px solid #333;border-radius:4px;
  color:#C9C9C9;text-decoration:none}
.pagination .page-numbers.current{background:#FF6600;color:#111;border-color:#FF6600}
.pagination a.page-numbers:hover{border-color:#FF6600;color:#FF6600}

/* Property Arts — page banner (dark) + page content accents */
.banner{background:linear-gradient(160deg,#151515,#000) !important}
.banner::after{border-color:rgba(255,102,0,.06) !important}
.banner.has-hero::before{background:linear-gradient(100deg,rgba(0,0,0,.86) 0%,rgba(12,12,12,.62) 55%,rgba(12,12,12,.45) 100%) !important}
.banner .crumbs{color:#B3B3B3}
.banner .crumbs a{color:#FF6600}
.banner h1{color:#FFFFFF}
.page-content h2{color:#FF6600 !important}
.page-content h3{color:#FFFFFF !important}
.page-content p,.page-content li{color:#DADADA}
.page-content a{color:#FF6600}
.page-content strong{color:#FFFFFF}

/* =====================================================================
   PROPERTY ARTS — original-site match pass (2026-07-30)
   1. Blueprint background tiled at natural size, like propertyarts.com
   2. Dual logos in the header (Architecture left, Construction right)
   3. Desktop menu as orange page buttons
   4. Rotating project slider under the header
   ===================================================================== */

/* ---- 1. Background -------------------------------------------------- */
/* propertyarts.com puts bg4.jpg (1200x730) on <body> at background-size:auto
   with repeat + scroll. blueprint-bg.jpg IS that file, so tile it the same way
   instead of scaling it to cover — scaling is what made it read as blown up. */
body{
  background-color:#141414;
  background-image:url('/wp-content/uploads/brand/blueprint-bg.jpg');
  background-repeat:repeat;
  background-position:top center;
  background-size:1200px auto;
  background-attachment:scroll;
}
/* The texture now runs continuously behind header, hero, content and footer,
   so the header only needs a translucent scrim to stay legible when sticky. */
header.site-header{background:rgba(8,8,8,.92);backdrop-filter:blur(3px)}
.topline{background:rgba(0,0,0,.55)}
.trust{background:rgba(0,0,0,.6) !important}
.site-footer{background:rgba(6,6,6,.93) !important}

/* ---- 2. Topline + CTA ----------------------------------------------- */
.topline-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.topline-cta{display:inline-block;background:#FF6600;color:#111;font-family:'Raleway',sans-serif;
  font-weight:800;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 14px;line-height:1.5;transition:background .16s,color .16s}
.topline-cta:hover{background:#fff;color:#111}
.nav-cta-mobile{display:none}

/* ---- 3. Dual-logo header + button menu (desktop) --------------------- */
@media(min-width:921px){
  .navrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
    gap:26px;padding:16px 0}
  .brand-arch{justify-self:start}
  .brand-const{justify-self:end}
  .brand-logo{height:62px !important;max-width:230px}

  .main-nav{justify-self:center;width:100%}
  .main-nav > ul{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
    font-family:Helvetica,Arial,sans-serif}
  .main-nav > ul > li{position:relative;display:flex}
  /* Orange page buttons, matching the current site's menu treatment */
  .main-nav > ul > li > a{
    display:block;width:100%;background:#FF6600;color:#121212;
    padding:6px 22px;font-size:13px;font-weight:700;letter-spacing:.09em;
    text-transform:uppercase;white-space:nowrap;text-align:center;line-height:1.45;
    border:1px solid #FF6600;transition:background .16s,color .16s,border-color .16s}
  .main-nav > ul > li > a:hover,
  .main-nav > ul > li:focus-within > a{background:#111;color:#FF6600}

  /* Services button keeps its dropdown; centre it so a wide panel cannot
     shoot off the right edge of a wrapped menu row. */
  .main-nav .has-dropdown > .dropdown{left:50%;right:auto;transform:translateX(-50%)}
}

/* Medium desktops: shrink both logos and tighten the buttons so the menu wraps
   to two rows instead of five. */
@media(min-width:921px) and (max-width:1180px){
  .navrow{gap:16px}
  .brand-logo{height:48px !important;max-width:172px}
  .main-nav > ul > li > a{padding:5px 13px;font-size:11.5px;letter-spacing:.06em}
}

/* Below 921px (the theme's existing mobile-nav breakpoint) the construction logo
   and the two-column header would crowd the burger, so drop to the single-logo
   mobile bar and move the CTA into the menu. */
@media(max-width:920px){
  .brand-const{display:none}
  .nav-cta-mobile{display:block;margin:14px 22px 18px}
  .topline-cta{display:none}
  .main-nav{background:#0B0B0B;border-top:1px solid #222}
  /* The base mobile rules leave every <li> position:static, so the absolutely
     positioned submenu arrow anchored to .navrow instead of its own row and
     rendered beside the wrong item. */
  .main-nav > ul > li.has-dropdown{position:relative}
  .submenu-toggle{margin-top:0;top:4px}
}

/* ---- 4. Top project slider ------------------------------------------ */
.pa-slider-band{padding:26px 0 6px}
.pa-stage{position:relative;overflow:hidden;aspect-ratio:16/6.6;min-height:260px;
  border:1px solid #2A2A2A;background:#0B0B0B;
  box-shadow:0 26px 60px rgba(0,0,0,.55)}
.pa-slide{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;
  transition:opacity .75s ease,visibility .75s;text-decoration:none}
.pa-slide.is-active{opacity:1;visibility:visible}
/* Pre-JS: only the first slide is marked active, so the band is never empty. */
.pa-slide img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);transition:transform 7s linear}
.pa-slide.is-active img{transform:scale(1.09)}
@media(prefers-reduced-motion:reduce){
  .pa-slide,.pa-slide img,.pa-slide.is-active img{transition:none;transform:none}
}
.pa-slide-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:4px;
  padding:56px 30px 22px;
  background:linear-gradient(transparent,rgba(0,0,0,.88))}
.pa-slide-kicker{font-family:'Raleway',sans-serif;font-size:11px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:#FF6600}
.pa-slide-title{font-family:'Raleway',sans-serif;font-size:clamp(20px,2.6vw,30px);
  font-weight:800;color:#fff;line-height:1.15;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.pa-slide:hover .pa-slide-title{color:#FF8600}

.pa-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:56px;border:none;cursor:pointer;
  background:rgba(0,0,0,.45);color:#fff;font-size:30px;line-height:1;
  transition:background .16s,color .16s}
.pa-arrow:hover{background:#FF6600;color:#111}
.pa-arrow:focus-visible{outline:2px solid #FF6600;outline-offset:2px}
.pa-prev{left:0}
.pa-next{right:0}

.pa-dots{position:absolute;left:0;right:0;bottom:14px;z-index:3;
  display:flex;justify-content:center;gap:9px}
.pa-dot{width:11px;height:11px;padding:0;border:1px solid rgba(255,255,255,.65);
  border-radius:50%;background:transparent;cursor:pointer;transition:background .16s,border-color .16s}
.pa-dot:hover{background:rgba(255,255,255,.5)}
.pa-dot.is-active{background:#FF6600;border-color:#FF6600}
.pa-dot:focus-visible{outline:2px solid #FF6600;outline-offset:2px}

@media(max-width:780px){
  .pa-slider-band{padding:16px 0 0}
  .pa-stage{aspect-ratio:16/10;min-height:210px}
  .pa-slide-cap{padding:44px 18px 30px}
  .pa-arrow{width:36px;height:46px;font-size:24px}
}

/* The slider now carries the opening visual, so the hero can sit tighter under
   it instead of opening with 78px of empty blueprint. */
.hero{padding:46px 0 62px}

/* The old inline hero photo strip is redundant next to the slider. */
.hero-photos{display:none}

/* The dual-logo + two-row button bar is ~135px tall, and propertyarts.com lets
   its header scroll away rather than pinning it, so match that on desktop.
   Mobile keeps the sticky bar — there it is one short row with the burger. */
@media(min-width:921px){
  header.site-header{position:relative;top:auto}
}

/* Drop the base theme's decorative corner ring in the hero — it reads as a
   smudge on top of the blueprint drafting lines. */
.hero::after{display:none}

/* Inner-page banner: let the blueprint run under it like the rest of the page
   instead of covering it with an opaque slab, and drop the decorative ring for
   the same reason it went from the hero. Photo banners (.has-hero) keep their
   own image and are deliberately excluded. */
.banner:not(.has-hero){background:linear-gradient(160deg,rgba(18,18,18,.62),rgba(0,0,0,.80)) !important}
.banner::after{display:none}

/* =====================================================================
   PROPERTY ARTS — background parity pass (2026-07-30, second round)
   propertyarts.com puts NO overlay over the blueprint: body copy sits
   straight on the tile. Our scrims were washing the drafting lines out,
   which is what still read as "not the current site". Remove them.
   ===================================================================== */
#content{background-image:none}
.hero{background-image:none !important}
.banner:not(.has-hero){background:transparent !important}
.trust{background:rgba(0,0,0,.42) !important}
section.resi{background:transparent !important}
header.site-header{background:rgba(10,10,10,.96)}

/* Slightly rounded menu buttons — 6px is what propertyarts.com's own
   #menu-main>li rule uses, along with the lighter orange gradient on hover. */
@media(min-width:921px){
  .main-nav > ul > li > a{border-radius:6px}
  .main-nav > ul > li > a:hover,
  .main-nav > ul > li:focus-within > a{background:linear-gradient(#FFAD50,#FF6600);color:#121212;border-color:#FFAD50}
}
.topline-cta{border-radius:6px}

/* =====================================================================
   PROPERTY ARTS — galleries (2026-07-30)
   Mirrors propertyarts.com/galleries/: a card index of every gallery, and
   inside each one a photo grid that opens into a lightbox.
   ===================================================================== */
.gallery-section{padding:52px 0 72px}
.gallery-intro{max-width:760px;margin-bottom:30px;color:#DADADA}
.gallery-intro p{margin-bottom:12px}

/* Index of galleries (hub + Educational sector) */
.gal-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.gal-card{position:relative;display:block;overflow:hidden;border:1px solid #2C2C2C;
  background:#0D0D0D;aspect-ratio:4/3;transition:border-color .18s,transform .18s}
.gal-card:hover{border-color:#FF6600;transform:translateY(-3px)}
.gal-card img{width:100%;height:100%;object-fit:cover;display:block;opacity:.82;
  transition:opacity .2s ease,transform .3s ease}
.gal-card:hover img{opacity:1;transform:scale(1.05)}
.gal-card-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:2px;
  padding:38px 18px 15px;background:linear-gradient(transparent,rgba(0,0,0,.92))}
.gal-card-title{font-family:'Raleway',sans-serif;font-weight:800;font-size:17px;color:#fff;
  letter-spacing:.02em;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.gal-card-count{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#FF6600}

/* Photo grid inside a gallery */
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.gal-item{display:block;overflow:hidden;border:1px solid #2C2C2C;background:#0D0D0D;
  aspect-ratio:4/3;cursor:zoom-in;transition:border-color .18s,transform .18s}
.gal-item:hover{border-color:#FF6600;transform:translateY(-2px)}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.gal-item:hover img{transform:scale(1.06)}

/* Lightbox */
.gal-lightbox{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;
  gap:10px;padding:56px 18px;background:rgba(0,0,0,.93)}
.gal-lightbox.is-open{display:flex}
body.gal-lock{overflow:hidden}
.gal-figure{max-width:min(1200px,94vw);max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:10px}
.gal-figure img{max-width:100%;max-height:80vh;width:auto;height:auto;object-fit:contain;
  border:1px solid #333;background:#0D0D0D}
.gal-figure figcaption{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9a9a9a}
.gal-close{position:absolute;top:14px;right:18px;width:44px;height:44px;border:none;cursor:pointer;
  background:transparent;color:#fff;font-size:34px;line-height:1}
.gal-close:hover{color:#FF6600}
.gal-nav{flex:0 0 auto;width:46px;height:64px;border:none;cursor:pointer;
  background:rgba(255,255,255,.08);color:#fff;font-size:32px;line-height:1;transition:background .16s,color .16s}
.gal-nav:hover{background:#FF6600;color:#111}
.gal-close:focus-visible,.gal-nav:focus-visible{outline:2px solid #FF6600;outline-offset:2px}
@media(max-width:600px){
  .gal-lightbox{padding:56px 6px}
  .gal-nav{width:38px;height:52px;font-size:26px}
}

/* "Photos" block linking a service page to its gallery */
.svc-gallery{margin-top:34px;padding-top:26px;border-top:1px solid #242424}
.svc-gallery h2{color:#FF6600 !important;text-transform:uppercase;letter-spacing:.02em;margin-bottom:16px}
.dropdown-galleries{min-width:230px}
.dropdown-galleries ul{list-style:none;margin:0;padding:0}

/* Contact page — office hours table + staff email directory */
.hours-table{width:100%;border-collapse:collapse;font-size:15px}
.hours-table th,.hours-table td{padding:6px 0;text-align:left;font-weight:400;color:#DADADA;vertical-align:top}
.hours-table th{width:48%;color:#FFFFFF;font-weight:600}
.staff-emails{list-style:none;margin:0;padding:0}
.staff-emails li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 18px;
  padding:9px 0;border-bottom:1px solid #202020;font-size:15px}
.staff-emails li:last-child{border-bottom:none}
.staff-who{color:#FFFFFF;font-weight:600}
.staff-role{color:#B3B3B3;font-weight:400}
.staff-emails a{color:#FF6600;word-break:break-word}
.staff-emails a:hover{color:#FF8600}
.svc-gallery-more{margin-top:16px;font-weight:700}
.svc-gallery-more a{color:#FF6600}
.svc-gallery-more a:hover{color:#FF8600}