/* =========================================================================
   Paragon Electric LLC — shared stylesheet
   Visual language: warm premium — soft rounded geometry, generous use of the
   brand blue as a signature accent (icons, checkmarks, eyebrows, CTAs), deep
   navy for immersive dark moments, real photography with rounded framing.
   Brand spine (client asset): ink #050505, navy #0D1A29, blue #0B55D8.
   No build step: loaded as-is on every page.
   ========================================================================= */

:root{
  /* Brand */
  --ink:#050505;
  --navy:#0D1A29;
  --navy-soft:#16283C;
  --blue:#0B55D8;
  --blue-dark:#0847B4;
  --blue-light:#5B92EE;      /* accent on dark grounds */
  --blue-tint:#EAF1FD;       /* faint accent surface on light grounds */

  /* Ground */
  --paper:#F7F5F0;           /* warm off-white — the dominant light ground */
  --surface:#FFFFFF;

  /* Text */
  --text:#111417;
  --text-muted:#5B5F63;
  --text-faint:#8A8D8F;
  --text-on-dark:#FFFFFF;
  --text-on-dark-muted:rgba(255,255,255,0.70);

  /* Lines */
  --line:rgba(12,14,16,0.12);
  --line-strong:rgba(12,14,16,0.22);
  --line-on-dark:rgba(255,255,255,0.16);

  /* Geometry — soft, rounded, consistent */
  --radius-sm:10px;
  --radius-md:18px;
  --radius-lg:28px;
  --shadow-sm:0 2px 8px rgba(12,16,20,0.06);
  --shadow-md:0 24px 56px -24px rgba(12,16,20,0.30);

  /* Scale */
  --space-1:8px; --space-2:12px; --space-3:16px; --space-4:24px;
  --space-5:32px; --space-6:48px; --space-7:64px; --space-8:96px; --space-9:128px;
  --ease:cubic-bezier(0.33,1,0.68,1);
  --container:1250px;        /* one content width, used everywhere */
  --header-h:86px;
}
@media (max-width:900px){:root{--header-h:68px;}}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;
  line-height:1.12;
  letter-spacing:-0.025em;
  margin:0 0 var(--space-3);
  text-wrap:balance;
  color:var(--text);
}
h1{font-size:clamp(38px,5vw,64px); font-weight:800;}
h2{font-size:clamp(28px,3.6vw,44px);}
h3{font-size:clamp(19px,1.7vw,23px);}
p{margin:0 0 var(--space-3); color:var(--text-muted); max-width:64ch;}
p:last-child{margin-bottom:0;}
ul{margin:0; padding:0;}
.container{max-width:var(--container); margin:0 auto; padding:0 var(--space-5);}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:4px;}

/* -------------------------------------------------------------------- */
/* Eyebrow — small tracked accent label above a heading                  */
/* -------------------------------------------------------------------- */
.eyebrow{
  display:block;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:var(--space-3);
}
.eyebrow.on-dark{color:var(--blue-light);}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;}

/* -------------------------------------------------------------------- */
/* Buttons — soft rounded, accent-filled primary, diagonal arrow          */
/* -------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 26px;
  border-radius:var(--radius-sm);
  font-weight:700;
  font-size:15px;
  letter-spacing:-0.01em;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn .arw{transition:transform .25s var(--ease); font-size:13px; line-height:1;}
.btn:hover .arw{transform:translate(3px,-3px);}
.btn-primary{background:var(--blue); color:#fff; border-color:var(--blue);}
.btn-primary:hover{background:var(--blue-dark); border-color:var(--blue-dark); transform:translateY(-2px); box-shadow:0 14px 28px -12px rgba(11,85,216,0.5);}
.btn-dark{background:var(--navy); color:#fff; border-color:var(--navy);}
.btn-dark:hover{background:var(--ink); border-color:var(--ink); transform:translateY(-2px);}
.btn-glass{background:rgba(255,255,255,0.10); color:#fff; border-color:rgba(255,255,255,0.35); backdrop-filter:blur(8px);}
.btn-glass:hover{background:rgba(255,255,255,0.18); border-color:#fff;}
.btn-outline{background:transparent; color:var(--text); border-color:var(--line-strong);}
.btn-outline:hover{border-color:var(--navy); background:var(--surface);}
.btn-sm{padding:11px 18px; font-size:14px;}
.btn-block{width:100%; justify-content:center;}

.link-arw{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px; color:var(--blue);}
.link-arw .arw{transition:transform .25s var(--ease);}
.link-arw:hover .arw{transform:translate(3px,-3px);}

/* -------------------------------------------------------------------- */
/* Header — translucent, floats over the hero photograph                 */
/* -------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(13,26,41,0.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,0.10);
}
.header-inner{
  max-width:var(--container);
  margin:0 auto;
  height:var(--header-h);
  padding:0 var(--space-5);
  display:flex; align-items:center; gap:var(--space-5);
}
.logo{flex:0 0 auto; line-height:0;}
.logo img{height:38px; width:auto; border-radius:6px;}
.main-nav{display:flex; align-items:center; gap:var(--space-5); margin-left:var(--space-6); flex:1 1 auto;}
.main-nav a{
  position:relative;
  font-size:15px; font-weight:600;
  color:rgba(255,255,255,0.78);
  padding:6px 0;
  transition:color .2s var(--ease);
}
.main-nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0;
  height:2px; border-radius:2px; background:var(--blue-light);
  transition:right .25s var(--ease);
}
.main-nav a:hover, .main-nav a[aria-current="page"]{color:#fff;}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after{right:0;}
.header-contact{display:flex; align-items:center; gap:var(--space-4); margin-left:auto; flex:0 0 auto;}
.header-phone{font-size:15px; font-weight:700; color:#fff; white-space:nowrap;}
.header-phone:hover{color:var(--blue-light);}
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:42px; height:42px; background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.2); border-radius:var(--radius-sm);
  margin-left:var(--space-2); cursor:pointer; flex:0 0 auto;
}
.nav-toggle span{display:block; width:18px; height:1.5px; background:#fff; transition:transform .3s var(--ease), opacity .3s var(--ease);}
.nav-toggle.is-active span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle.is-active span:nth-child(2){opacity:0;}
.nav-toggle.is-active span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

@media (max-width:900px){
  .main-nav{
    position:absolute; top:100%; left:0; right:0;
    background:rgba(13,26,41,0.97); backdrop-filter:blur(18px);
    flex-direction:column; align-items:flex-start; gap:0; margin-left:0;
    border-top:1px solid rgba(255,255,255,0.1);
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height .3s var(--ease), opacity .25s var(--ease);
  }
  .main-nav.is-open{max-height:380px; opacity:1; padding:var(--space-2) var(--space-5) var(--space-5);}
  .main-nav a{padding:13px 0; width:100%;}
  .main-nav a::after{display:none;}
  .header-inner{position:relative;}
  .header-contact .btn-sm, .header-phone{display:none;}
  .nav-toggle{display:flex;}
}

/* -------------------------------------------------------------------- */
/* Hero — full-bleed photograph, copy anchored low-left                  */
/* -------------------------------------------------------------------- */
.hero{
  position:relative;
  margin-top:calc(-1 * var(--header-h));
  min-height:86vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% center;}
.hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,12,20,0.72) 0%, rgba(6,12,20,0.30) 34%, rgba(6,12,20,0.55) 68%, rgba(6,12,20,0.88) 100%);
}
.hero .container{width:100%; position:relative; z-index:2; padding-top:calc(var(--header-h) + var(--space-7)); padding-bottom:calc(var(--space-9) + var(--space-5));}
.hero-copy{max-width:760px;}
.hero h1{color:#fff; margin-bottom:var(--space-4);}
.hero .lead{font-size:18px; color:rgba(255,255,255,0.82); max-width:46ch; margin-bottom:var(--space-5);}
.hero-cta{display:flex; gap:var(--space-3); flex-wrap:wrap;}
@media (max-width:700px){
  .hero{min-height:0;}
  .hero .container{padding-top:calc(var(--header-h) + var(--space-6)); padding-bottom:var(--space-7);}
  .hero .lead{font-size:16.5px;}
}

/* -------------------------------------------------------------------- */
/* Trust bar — icon + label row, no boxes                                */
/* -------------------------------------------------------------------- */
.trust-bar{background:var(--surface); padding:var(--space-6) 0;}
.trust-bar .lede{text-align:center; font-size:15px; color:var(--text-muted); margin-bottom:var(--space-5);}
.trust-row{
  display:grid; grid-template-columns:repeat(6,1fr); gap:var(--space-4);
  list-style:none;
}
.trust-item{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; min-width:0;}
.trust-icon{
  width:46px; height:46px; border-radius:50%;
  border:1.5px solid var(--blue); color:var(--blue);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.trust-label{font-size:13.5px; font-weight:600; color:var(--text); line-height:1.3;}
.trust-sub{font-size:12px; color:var(--text-faint);}
@media (max-width:900px){.trust-row{grid-template-columns:repeat(3,1fr); gap:var(--space-5) var(--space-3);}}
@media (max-width:520px){.trust-row{grid-template-columns:repeat(2,1fr);}}

/* -------------------------------------------------------------------- */
/* Sections                                                              */
/* -------------------------------------------------------------------- */
.section{padding:var(--space-8) 0;}
.section.tight{padding:var(--space-6) 0;}
.section.surface{background:var(--surface);}
.section.navy{background:var(--navy); color:#fff;}
.section.navy h2, .section.navy h3{color:#fff;}
.section.navy p{color:var(--text-on-dark-muted);}
.section-head{max-width:640px; margin-bottom:var(--space-6);}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* -------------------------------------------------------------------- */
/* Split layouts                                                         */
/* -------------------------------------------------------------------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-7); align-items:center;}
.split > *{min-width:0;}
.split.cols-3{grid-template-columns:repeat(3,1fr);}
.split.wide-left{grid-template-columns:1.15fr 1fr;}
.split.narrow-left{grid-template-columns:1fr 1.15fr;}
.split.top{align-items:start;}
@media (max-width:900px){
  .split, .split.cols-3, .split.wide-left, .split.narrow-left{grid-template-columns:1fr; gap:var(--space-5);}
}

/* Rounded framed photography */
.framed{border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-md);}
.framed img{width:100%; height:100%; object-fit:cover; display:block;}
.framed.tall{aspect-ratio:4/5;}
.framed.wide{aspect-ratio:16/10;}

/* -------------------------------------------------------------------- */
/* Checklist — accent ticks, used in the services teaser                 */
/* -------------------------------------------------------------------- */
.tick-list{list-style:none; display:flex; flex-direction:column; gap:var(--space-3); margin:var(--space-5) 0;}
.tick-list li{display:flex; align-items:center; gap:12px; font-size:16px; font-weight:600; color:var(--text);}
.tick{
  width:22px; height:22px; border-radius:50%;
  background:var(--blue-tint); color:var(--blue);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.section.navy .tick{background:rgba(91,146,238,0.16); color:var(--blue-light);}
.section.navy .tick-list li{color:#fff;}

/* -------------------------------------------------------------------- */
/* Service index — numbered rows (services hub + detail cross-links)     */
/* -------------------------------------------------------------------- */
.service-index{display:flex; flex-direction:column; gap:var(--space-3);}
.service-row{
  display:grid; grid-template-columns:58px 1fr auto; align-items:center; gap:var(--space-5);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:var(--space-5);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.service-row:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:transparent;}
.service-num{font-family:'IBM Plex Mono',monospace; font-size:14px; color:var(--blue); font-weight:500;}
.service-row h3{margin-bottom:6px;}
.service-row p{font-size:15px; margin:0;}
.service-tags{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap;}
.tag{
  font-size:11.5px; font-weight:600; letter-spacing:0.03em;
  color:var(--text-muted); background:var(--paper);
  border-radius:100px; padding:4px 11px;
}
.service-arw{
  width:42px; height:42px; border-radius:50%;
  border:1.5px solid var(--line-strong); color:var(--text);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  transition:background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.service-row:hover .service-arw{background:var(--blue); border-color:var(--blue); color:#fff; transform:translate(3px,-3px);}
@media (max-width:700px){
  .service-row{grid-template-columns:36px 1fr; gap:var(--space-3); padding:var(--space-4);}
  .service-row p{display:none;}
  .service-arw{display:none;}
}

/* -------------------------------------------------------------------- */
/* Panels — Residential / Commercial, rounded and paired                */
/* -------------------------------------------------------------------- */
.panel-pair{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4);}
.panel{
  border-radius:var(--radius-lg);
  padding:var(--space-7) var(--space-6);
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-5);
  min-height:340px;
  transition:transform .25s var(--ease);
}
.panel:hover{transform:translateY(-3px);}
.panel.dark{background:var(--navy); color:#fff;}
.panel.light{background:var(--surface); border:1px solid var(--line);}
.panel-icon{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  margin-bottom:var(--space-4);
}
.panel.dark .panel-icon{border:1.5px solid var(--blue-light); color:var(--blue-light);}
.panel.light .panel-icon{background:var(--blue-tint); color:var(--blue);}
.panel h3{font-size:clamp(22px,2.4vw,28px); margin-bottom:var(--space-3);}
.panel.dark h3{color:#fff;}
.panel.dark p{color:var(--text-on-dark-muted);}
.panel-list{list-style:none; display:flex; flex-direction:column; gap:9px; margin-top:var(--space-3);}
.panel-list li{font-size:15px; padding-left:20px; position:relative;}
.panel-list li::before{content:''; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:50%; background:var(--blue);}
.panel.dark .panel-list li{color:var(--text-on-dark-muted);}
.panel.dark .panel-list li::before{background:var(--blue-light);}
@media (max-width:800px){.panel-pair{grid-template-columns:1fr;} .panel{min-height:0;}}

/* -------------------------------------------------------------------- */
/* Feature card — inset rounded dark card floating on the page ground    */
/* -------------------------------------------------------------------- */
.feature-card{
  background:var(--navy);
  border-radius:var(--radius-lg);
  padding:var(--space-8) var(--space-7);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.feature-card h2, .feature-card h3{color:#fff;}
.feature-card p{color:var(--text-on-dark-muted);}
.feature-split{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-7);}
.feature-item .panel-icon{border:1.5px solid var(--blue-light); color:var(--blue-light);}
@media (max-width:800px){
  .feature-split{grid-template-columns:1fr; gap:var(--space-6);}
  .feature-card{padding:var(--space-6) var(--space-5);}
}

/* -------------------------------------------------------------------- */
/* Page hero (interior pages)                                            */
/* -------------------------------------------------------------------- */
.page-hero{
  background:var(--navy);
  color:#fff;
  margin-top:calc(-1 * var(--header-h));
  padding:calc(var(--header-h) + var(--space-7)) 0 var(--space-7);
}
.page-hero h1{color:#fff; margin-bottom:var(--space-3);}
.page-hero p{color:var(--text-on-dark-muted); font-size:17px; max-width:58ch; margin-bottom:0;}
.breadcrumb{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-on-dark-muted); margin-bottom:var(--space-4);}
.breadcrumb a{color:var(--text-on-dark-muted); transition:color .2s var(--ease);}
.breadcrumb a:hover{color:#fff;}
.breadcrumb .sep{opacity:0.45;}
.breadcrumb .current{color:var(--blue-light);}
.svc-index-label{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--blue-light); margin-bottom:var(--space-3); display:block;}

/* -------------------------------------------------------------------- */
/* Capability list (service detail pages)                               */
/* -------------------------------------------------------------------- */
.capability-list{list-style:none; counter-reset:cap; display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4);}
.capability-list li{
  counter-increment:cap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:var(--space-5);
  font-size:16px; color:var(--text);
  display:flex; gap:var(--space-3); align-items:flex-start;
}
.capability-list li::before{
  content:counter(cap, decimal-leading-zero);
  font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--blue); flex:0 0 auto; padding-top:2px;
}
@media (max-width:800px){.capability-list{grid-template-columns:1fr;}}

/* -------------------------------------------------------------------- */
/* Service area                                                          */
/* -------------------------------------------------------------------- */
.area-groups{display:flex; flex-direction:column; gap:var(--space-4); margin-top:var(--space-5);}
.area-group{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:var(--space-4) var(--space-5);
  display:grid; grid-template-columns:130px 1fr; gap:var(--space-4); align-items:baseline;
}
.area-group > *{min-width:0;}
.area-label{font-size:12.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--blue);}
.area-cities{font-size:16px; font-weight:600; color:var(--text);}
@media (max-width:600px){.area-group{grid-template-columns:1fr; gap:6px;}}

/* -------------------------------------------------------------------- */
/* Quote form — rounded panel, rounded fields                           */
/* -------------------------------------------------------------------- */
.form-panel{background:var(--surface); border-radius:var(--radius-lg); padding:var(--space-6); box-shadow:var(--shadow-md);}
.form-group-label{display:block; font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-faint); margin:var(--space-5) 0 var(--space-3);}
.form-group-label:first-child{margin-top:0;}
.form-row{margin-bottom:var(--space-3);}
.form-row label{display:block; font-size:13.5px; font-weight:600; color:var(--text-muted); margin-bottom:7px;}
.form-row input, .form-row select, .form-row textarea{
  width:100%; padding:13px 15px;
  border:1.5px solid var(--line-strong); border-radius:var(--radius-sm);
  background:var(--paper);
  font-family:'Plus Jakarta Sans',sans-serif; font-size:15.5px; color:var(--text);
  transition:border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-row select{appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235B5F63' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; padding-right:36px;}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline:none; border-color:var(--blue); background:var(--surface); box-shadow:0 0 0 4px var(--blue-tint);
}
.form-row textarea{resize:vertical; min-height:104px;}
.form-error{display:none; color:#B3261E; font-size:12.5px; margin-top:6px;}
.form-row.has-error input, .form-row.has-error select, .form-row.has-error textarea{border-color:#B3261E;}
.form-row.has-error .form-error{display:block;}
.form-note{font-size:12.5px; color:var(--text-faint); margin-top:var(--space-3); text-align:center;}
.form-success{display:none; background:var(--blue-tint); border-radius:var(--radius-md); padding:var(--space-5); font-size:15.5px; color:var(--text);}
.form-success.is-visible{display:block;}
.form-panel.is-submitted form{display:none;}

/* Contact info list */
.info-list{display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-5);}
.info-item{
  display:flex; align-items:center; gap:var(--space-4);
  background:rgba(255,255,255,0.06); border:1px solid var(--line-on-dark);
  border-radius:var(--radius-md); padding:var(--space-4) var(--space-5);
}
.info-icon{width:42px; height:42px; border-radius:50%; border:1.5px solid var(--blue-light); color:var(--blue-light); display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.info-item .k{display:block; font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-on-dark-muted); margin-bottom:2px;}
.info-item .v{font-size:16px; font-weight:600; color:#fff;}
.info-item .v a{color:#fff;}
.info-item .v a:hover{color:var(--blue-light);}

/* More services chips */
.more-services{display:flex; flex-wrap:wrap; gap:10px;}
.more-services a{
  font-size:14.5px; font-weight:600; color:var(--text);
  background:var(--surface); border:1px solid var(--line);
  border-radius:100px; padding:10px 18px;
  transition:border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.more-services a:hover{border-color:var(--blue); color:var(--blue); transform:translateY(-2px);}

/* -------------------------------------------------------------------- */
/* Footer                                                                */
/* -------------------------------------------------------------------- */
.site-footer{background:var(--ink); color:var(--text-on-dark-muted);}
.footer-cta{padding:var(--space-8) 0; border-bottom:1px solid var(--line-on-dark);}
.footer-cta-inner{display:flex; justify-content:space-between; align-items:center; gap:var(--space-6); flex-wrap:wrap;}
.footer-cta h2{color:#fff; max-width:16ch; margin-bottom:0;}
.footer-cta-actions{display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap;}
.footer-cta-phone{font-size:clamp(22px,2.6vw,28px); font-weight:800; color:#fff; letter-spacing:-0.02em;}
.footer-cta-phone:hover{color:var(--blue-light);}
.footer-nav{max-width:var(--container); margin:0 auto; padding:var(--space-7) var(--space-5); display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--space-6);}
.footer-nav > *{min-width:0;}
.footer-brand img{height:34px; width:auto; border-radius:6px; margin-bottom:var(--space-3);}
.footer-brand p{color:var(--text-on-dark-muted); font-size:14.5px; max-width:32ch;}
.footer-brand .value{font-family:'IBM Plex Mono',monospace; font-size:13px; margin-top:var(--space-3); color:var(--blue-light);}
.footer-col-title{font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#fff; margin-bottom:var(--space-3);}
.footer-col a{display:block; color:var(--text-on-dark-muted); font-size:14.5px; padding:6px 0; transition:color .2s var(--ease); overflow-wrap:anywhere;}
.footer-col a:hover{color:#fff;}
.footer-bottom{
  border-top:1px solid var(--line-on-dark);
  max-width:var(--container); margin:0 auto;
  padding:var(--space-4) var(--space-5);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
  font-size:13px; color:#6E6E68;
}
.footer-bottom .license{color:var(--text-on-dark-muted);}
@media (max-width:900px){.footer-nav{grid-template-columns:1fr 1fr;} .footer-brand{grid-column:1/-1;}}
@media (max-width:640px){.footer-cta-inner{flex-direction:column; align-items:flex-start;} .footer-bottom{flex-direction:column; text-align:center;}}

/* -------------------------------------------------------------------- */
/* Sticky mobile call bar                                               */
/* -------------------------------------------------------------------- */
.mobile-call-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:rgba(13,26,41,0.94); backdrop-filter:blur(16px);
  border-top:1px solid var(--line-on-dark);
  padding:10px var(--space-3);
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  gap:10px;
}
.mobile-call-bar a{flex:1;}
@media (max-width:640px){.mobile-call-bar{display:flex;} body{padding-bottom:74px;}}

/* -------------------------------------------------------------------- */
/* Reveal on scroll                                                     */
/* -------------------------------------------------------------------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.is-visible{opacity:1; transform:none;}

.center{text-align:center;}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important; animation:none !important;}
  .reveal{opacity:1; transform:none;}
}

/* -------------------------------------------------------------------- */
/* Project photography — editorial compositions                          */
/* -------------------------------------------------------------------- */
.framed.upright{aspect-ratio:3/4;}

.media-band{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md);}
.media-band img{width:100%; height:100%; object-fit:cover; display:block;}
.media-band.cinematic{aspect-ratio:21/9;}
.media-band.wide{aspect-ratio:16/9;}

.media-duo{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); align-items:start;}
.media-duo > *{min-width:0;}
.media-duo.offset > :last-child{margin-top:var(--space-7);}

.media-figure{margin:0;}
.media-cap{
  display:block; margin-top:var(--space-3);
  font-family:'IBM Plex Mono',monospace; font-size:12px; line-height:1.5;
  letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint);
}
.media-cap .n{color:var(--blue); margin-right:var(--space-2);}

@media (max-width:800px){
  .media-duo{grid-template-columns:1fr; gap:var(--space-6);}
  .media-duo.offset > :last-child{margin-top:0;}
  .media-band.cinematic{aspect-ratio:16/9;}
}

/* Embedded quote form (GoHighLevel). The embed script overwrites the inline
   height once it measures the form; this height is the pre-script fallback. */
.form-embed{margin-top:var(--space-2);}
.form-embed iframe{display:block; width:100%; height:829px; border:0; border-radius:var(--radius-sm);}