/* ===========================================================
   Edgewood Remodel & Construction
   Design tokens: San Diego coastal-casual + Spanish-Mexican warmth
   layered on the bright editorial base. Blue stays the structural
   / brand color; the slate-blue accent (var(--terracotta)) is reserved for human, emotional
   moments (quotes, reviews). Arch motif is the signature element.
   =========================================================== */

:root{
  --black:        #14181D;
  --charcoal:     #2B2F35;
  --charcoal-2:   #3A3F46;
  --blue-deep:    #124A80;
  --blue:         #1868A8;
  --blue-bright:  #2D86C9;
  --blue-light:   #7BAFDF;
  --pale-blue:    #EAF1F8;
  --white:        #FFFFFF;
  --ivory:        #F4F7FA;   /* cool off-white, replaces the warm whitewash */
  --off-white:    #E7EDF3;   /* cool blue-grey for alt sections */
  --sand:         #F4F7FA;
  --terracotta:       #3D6E8C;   /* cool slate-blue, replaces the warm terracotta accent */
  --terracotta-deep:  #285068;
  --terracotta-pale:  #DDE9F1;
  --line:         rgba(20,24,29,0.10);
  --line-dark:    rgba(20,24,29,0.12);

  --font-head: "Playfair Display", "Georgia", serif;
  --font-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1180px;
  --radius: 10px;
  --arch: 260px 260px 12px 12px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--ivory);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
.container{ width:100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }

h1,h2,h3,h4{
  font-family: var(--font-head);
  font-weight: 600;
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
  text-transform: none;
  line-height: 1.08;
  margin: 0 0 .5em;
  color: var(--black);
}
h1{ font-size: clamp(2.6rem, 5.6vw, 4.6rem); font-weight: 700; }
h2{ font-size: clamp(1.9rem, 3.2vw, 2.7rem); font-weight: 600; }
h3{ font-size: 1.3rem; letter-spacing: 0; font-weight: 600; }
p{ margin: 0 0 1em; }
.eyebrow{
  font-family: var(--font-body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--blue);
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 16px;
}
.eyebrow::before{
  content:"";
  width: 22px; height: 1px;
  background: var(--blue);
  display:inline-block;
}

/* -------- Buttons -------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 15px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{ background: var(--blue); color: var(--white); }
.btn-primary:hover{ background: var(--blue-deep); transform: translateY(-1px); }
.btn-outline{ border-color: var(--charcoal); color: var(--charcoal); }
.btn-outline:hover{ background: var(--charcoal); color: var(--white); }
.btn-outline-light{ border-color: rgba(255,255,255,.55); color: var(--white); }
.btn-outline-light:hover{ background: var(--white); color: var(--black); }
.btn-dark{ background: var(--black); color: var(--white); }
.btn-dark:hover{ background: var(--charcoal-2); }

/* -------- Header / Nav -------- */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(251,249,245,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header::before{
  content:""; display:block; height:3px; width:100%;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue-light) 45%, var(--terracotta) 100%);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 24px;
  max-width: var(--container); margin:0 auto;
  gap: 28px;
}
.logo-link{ display:flex; align-items:center; gap:16px; }
.logo-link img{ height: 50px; width: 50px; border-radius: 50%; object-fit:cover; border: 1px solid var(--line-dark); }
.logo-text{ font-family: var(--font-head); font-weight:600; color:var(--black); font-size:1.5rem; letter-spacing:0; line-height:1; }
.logo-text span{ display:block; font-family:var(--font-body); font-size:.6rem; letter-spacing:.16em; color: var(--blue); text-transform:uppercase; margin-top:5px; font-weight:600; }
.nav-divider{ width:1px; height:34px; background: var(--line-dark); flex-shrink:0; }

.main-nav{ display:flex; align-items:center; gap: 10px; flex:1; justify-content:flex-end; }
.main-nav > ul{ display:flex; align-items:center; gap: 6px; }
.main-nav > ul > li{ position:relative; }
.main-nav > ul > li > a, .nav-btn{
  display:flex; align-items:center; padding: 12px 17px; color: var(--charcoal);
  font-size:.82rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  border-radius: var(--radius); white-space:nowrap; position:relative;
}
.main-nav > ul > li > a::after, .nav-btn::after{
  content:""; position:absolute; left:17px; right:17px; bottom:7px; height:1px;
  background: var(--terracotta); transform: scaleX(0); transform-origin:left;
  transition: transform .2s ease;
}
.main-nav > ul > li > a:hover::after, .has-dropdown.open .nav-btn::after{ transform: scaleX(1); }
.main-nav > ul > li > a:hover, .nav-btn:hover{ color: var(--blue-deep); }
.nav-btn{ background:none; border:none; font-family:var(--font-body); cursor:pointer; gap:6px; position:relative; }
.nav-btn svg{ width:10px; height:10px; transition: transform .18s ease; }
.has-dropdown.open .nav-btn svg{ transform: rotate(180deg); }

.dropdown{
  position:absolute; top: calc(100% + 8px); left:0;
  background: var(--white);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  min-width: 260px;
  box-shadow: 0 20px 44px rgba(20,24,29,0.12);
  padding: 8px;
  opacity:0; visibility:hidden; transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  max-height: 70vh; overflow-y:auto;
}
.has-dropdown.open .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{ display:block; padding:10px 14px; color:var(--charcoal); font-size:.92rem; border-radius:3px; }
.dropdown a:hover{ background: var(--pale-blue); color: var(--blue-deep); }
.dropdown .dd-note{ padding: 8px 14px 4px; font-size:.72rem; color:#9a9488; text-transform:uppercase; letter-spacing:.08em; }

.nav-cta{ display:flex; align-items:center; gap:20px; margin-left: 14px; padding-left: 20px; border-left: 1px solid var(--line-dark); }
.nav-phone{ color:var(--charcoal); font-size:.86rem; font-weight:700; display:none; white-space:nowrap; }
.nav-cta .btn-primary{
  padding: 10px 22px; font-size:.82rem; letter-spacing:.03em; white-space:nowrap;
}

.mobile-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.mobile-toggle span{ display:block; width:24px; height:2px; background:var(--charcoal); margin:5px 0; transition: transform .2s ease, opacity .2s ease; }
body.menu-open .mobile-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
body.menu-open .mobile-toggle span:nth-child(2){ opacity:0; }
body.menu-open .mobile-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 900px){ .nav-phone{ display:inline-block; } }

@media (max-width: 899px){
  .nav-divider{ display:none; }
  .mobile-toggle{ display:block; }
  .main-nav{
    position:fixed; top:74px; left:0; right:0; bottom:0; background: var(--ivory);
    flex-direction:column; align-items:stretch; padding: 10px 0 40px;
    transform: translateX(100%); transition: transform .25s ease;
    overflow-y:auto;
  }
  body.menu-open .main-nav{ transform: translateX(0); }
  .main-nav > ul{ flex-direction:column; align-items:stretch; width:100%; }
  .main-nav > ul > li{ width:100%; border-bottom:1px solid var(--line); }
  .dropdown{ position:static; box-shadow:none; opacity:1; visibility:visible; transform:none; max-height:0; overflow:hidden; padding:0; border:none; transition: max-height .2s ease; }
  .has-dropdown.open .dropdown{ max-height: 2000px; padding: 6px 0 10px 14px; }
  .dropdown a{ color:var(--charcoal); }
  .dropdown a:hover{ background: var(--pale-blue); color:var(--blue-deep); }
  .dropdown .dd-note{ color:#9a9488; }
  .nav-cta{ padding: 18px 20px 0; border-left:none; margin-left:0; }
}

/* -------- Hero -------- */
.hero{
  position:relative;
  min-height: 86vh;
  display:flex; align-items:center;
  overflow: hidden;
}
.hero-bg{
  position:absolute; top:0; left:0; right:0; bottom:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position: center 30%;
}
.hero::before{
  content:""; position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; pointer-events:none;
  background: linear-gradient(100deg, rgba(244,247,250,.62) 0%, rgba(244,247,250,.48) 26%, rgba(244,247,250,.26) 45%, rgba(244,247,250,.06) 60%, transparent 74%);
}
.hero-inner{
  max-width: 1680px; margin:0 auto; width:100%;
  padding: 90px 0; position:relative; z-index:2;
}
.hero-copy{
  max-width: 500px; padding-left: 24px;
  position:relative; z-index:2; overflow-wrap:break-word;
  text-align:left;
}
.hero h1{ color: var(--black); font-size: clamp(2rem, 3.4vw, 3.4rem); hyphens:auto; }
.hero .eyebrow{ justify-content:flex-start; }
.hero .hero-ctas{ justify-content:flex-start; }
.hero-sub{ font-size: 1.08rem; max-width: 440px; color: var(--charcoal-2); margin-bottom: 32px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-tag{
  position:absolute; right: max(24px, calc((100vw - 1680px) / 2 + 24px)); bottom:44px;
  background: var(--white); padding: 18px 22px; border-radius: 14px;
  box-shadow: 0 18px 36px rgba(20,24,29,0.18); border-top: 3px solid var(--terracotta);
  font-family: var(--font-head); font-weight:600; font-size:1rem; color: var(--blue-deep);
  max-width: 230px; line-height:1.3; z-index:2; display:none;
}
@media(min-width:980px){ .hero-tag{ display:block; } }
@media(max-width: 980px){
  .hero{ min-height:auto; }
  .hero-bg{ object-position: center 25%; }
  .hero::before{ background: linear-gradient(180deg, rgba(244,247,250,.25) 0%, rgba(244,247,250,.7) 82%); }
  .hero-inner{ padding: 60px 0 40px; }
  .hero-copy{ padding-left:24px; padding-right:24px; max-width:100%; }
}

/* -------- Wave divider (signature detail) -------- */
.wave-divider{ position:relative; display:block; margin-top:-2px; background: var(--ivory); }
.wave-divider svg{ display:block; width:100%; height:64px; }
.wave-divider.flip{ transform: scaleY(-1); margin-top:0; margin-bottom:-2px; }

/* -------- Photo frame (shared by featured cards + case study) -------- */
.photo-frame{
  position:relative; overflow:hidden;
  box-shadow: 0 34px 60px -20px rgba(20,24,29,0.26);
}
.photo-frame::after{
  content:""; position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none;
  background: linear-gradient(175deg, rgba(180,210,235,.20), rgba(61,110,140,.12) 60%);
  mix-blend-mode: multiply;
}
.photo-frame img{ width:100%; height:100%; object-fit:cover; }

/* -------- Tile-strip divider (signature detail) -------- */
.blueline{
  display:flex; align-items:center; gap:14px;
  color: var(--blue); font-family: var(--font-body);
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  margin: 0 0 34px;
}
.blueline .tick{ display:flex; align-items:center; gap:3px; }
.blueline .tick span{ width:7px; height:7px; border-radius:2px; background: var(--blue); display:block; transform: rotate(45deg); }
.blueline .tick span:nth-child(2){ background: var(--terracotta); }
.blueline::after{ content:""; flex:1; height:1px; background: var(--line-dark); }

/* -------- Trust strip -------- */
.trust-strip{ background: var(--white); color: var(--charcoal); padding: 38px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; text-align:center; }
.trust-item .num{ font-family: var(--font-head); font-size:1.7rem; color: var(--blue-deep); display:block; font-weight:500; }
.trust-item .lbl{ font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:#8a7f68; }
@media(max-width:800px){ .trust-grid{ grid-template-columns: repeat(2,1fr); } }

/* -------- Section rhythm -------- */
section{ padding: 110px 0; }
.section-alt{ background: var(--off-white); }
.section-wave{ background: linear-gradient(180deg, var(--pale-blue), #EAF1F8); }
.section-dark{ background: var(--blue-deep); color: var(--white); }
.section-dark h2{ color: var(--white); }
.section-head{ max-width: 640px; margin-bottom: 54px; }

/* -------- Services grid -------- */
.services-section{ position:relative; }
.side-label{
  position:absolute; right:8px; top:40px; display:none;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size:.72rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color: var(--blue-light);
}
@media(min-width:1300px){ .side-label{ display:block; } }

.featured-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-bottom: 56px; }
.featured-card{ display:flex; flex-direction:column; }
.featured-card .photo-frame{ border-radius: 120px 120px 14px 14px; aspect-ratio: 3/4; margin-bottom: 22px; }
.cap-eyebrow{ font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color: var(--terracotta-deep); margin-bottom:6px; }
.featured-card h3{ margin-bottom:8px; }
.featured-card p{ font-size:.94rem; color: var(--charcoal-2); margin-bottom:10px; }
.featured-card a.more{ color: var(--blue); font-weight:700; font-size:.85rem; }
@media(max-width:900px){
  .featured-grid{ grid-template-columns: repeat(2,1fr); }
  .featured-card:nth-child(2), .featured-card:nth-child(3){ transform:none; }
}
@media(max-width:600px){ .featured-grid{ grid-template-columns: 1fr; } }

.trade-chips{ display:flex; flex-wrap:wrap; gap:14px; }
.trade-chip{
  display:flex; align-items:center; gap:12px;
  background: var(--white); border:1px solid var(--line-dark); border-radius: 999px;
  padding: 12px 22px 12px 14px;
}
.trade-chip .idx{
  width:30px; height:30px; border-radius:50%; background: var(--pale-blue); color: var(--blue-deep);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; font-size:.82rem; flex-shrink:0;
}
.trade-chip span.name{ font-weight:700; font-size:.9rem; color: var(--charcoal); }
.trade-chip:hover{ border-color: var(--blue-light); }

/* -------- Case study -------- */
.case-block{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 50px; align-items:center; }
.case-block .photo-frame{ border-radius: 160px 160px 18px 18px; aspect-ratio: 4/3.3; }
.case-copy .tag{ display:inline-block; background: var(--terracotta-pale); color: var(--terracotta-deep); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:6px 12px; border-radius:20px; margin-bottom:16px; }
.case-quote{ border-left: 3px solid var(--terracotta); padding-left:20px; font-size:1.15rem; color: var(--charcoal); margin: 24px 0; font-family: var(--font-head); font-style: normal; font-weight:600; }
.case-quote cite{ display:block; font-style:normal; font-family:var(--font-body); font-weight:700; margin-top:10px; color: var(--terracotta-deep); font-size:.85rem; letter-spacing:.02em; }
@media(max-width:850px){ .case-block{ grid-template-columns:1fr; } .case-block .photo-frame{ border-radius: 100px 100px 12px 12px; } }

/* -------- Testimonials — slate-blue marks the human/emotional register -------- */
.testi-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 28px; }
.testi-card{ background: var(--white); border:1px solid var(--line-dark); border-radius: 18px; padding: 34px; }
.testi-card .stars{ color: var(--terracotta); letter-spacing:2px; margin-bottom: 16px; font-size:1.1rem; }
.testi-card p{ font-size:1.1rem; font-family: var(--font-head); font-style:normal; font-weight:600; color: var(--black); line-height:1.5; }
.testi-card .who{ font-weight:700; font-size:.85rem; margin-top: 14px; color: var(--terracotta-deep); font-family: var(--font-body); }
@media(max-width:750px){ .testi-grid{ grid-template-columns:1fr; } }

/* -------- Process -------- */
.process-list{ display:grid; grid-template-columns: repeat(4,1fr); gap: 30px; }
.process-step{ border-top: 1px solid var(--line-dark); padding-top: 22px; }
.process-step .step-num{ font-family:var(--font-head); font-style:normal; font-weight:700; font-size:2rem; color: var(--blue-light); }
@media(max-width:900px){ .process-list{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:560px){ .process-list{ grid-template-columns: 1fr; } }

/* -------- FAQ -------- */
.faq-list{ max-width: 780px; }
.faq-item{ border-bottom: 1px solid var(--line-dark); padding: 22px 0; }
.faq-item summary{ cursor:pointer; font-weight:500; font-family:var(--font-head); font-size:1.15rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; color: var(--black); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-family:var(--font-head); font-size:1.4rem; color: var(--blue); flex-shrink:0; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ margin-top: 14px; color:#5a5548; font-family: var(--font-body); }
.faq-more{ margin-top: 34px; }

/* -------- CTA section -------- */
.cta-section{
  position:relative;
  background: linear-gradient(120deg, var(--pale-blue), var(--sand) 45%, var(--terracotta-pale) 75%, var(--pale-blue));
  background-size: 260% 260%;
  animation: ctaDrift 18s ease-in-out infinite;
  color: var(--charcoal); text-align:center;
  overflow:hidden;
}
@keyframes ctaDrift{
  0%{ background-position: 0% 30%; }
  50%{ background-position: 100% 70%; }
  100%{ background-position: 0% 30%; }
}
.cta-section h2{ color: var(--black); position:relative; z-index:2; }
.cta-section .sub{ max-width: 560px; margin: 0 auto 30px; color: var(--charcoal-2); position:relative; z-index:2; }
.cta-glow{
  position:absolute; z-index:0; pointer-events:none;
  width: 620px; height: 620px; left:50%; top:50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(24,104,168,0.30), rgba(61,110,140,0.16) 55%, transparent 75%);
  filter: blur(40px);
  animation: glowMove 14s ease-in-out infinite;
}
@keyframes glowMove{
  0%{ transform: translate(-58%,-56%) scale(1); }
  33%{ transform: translate(-42%,-50%) scale(1.12); }
  66%{ transform: translate(-52%,-44%) scale(0.95); }
  100%{ transform: translate(-58%,-56%) scale(1); }
}
.cta-form-placeholder{
  max-width: 480px; margin: 30px auto 0; padding: 26px;
  border: 1px dashed rgba(20,24,29,.25); border-radius: 16px; font-size:.85rem; color: #6b6558;
  background: rgba(255,255,255,.6);
}

/* -------- Quote form -------- */
.quote-form{ max-width: 720px; margin: 40px auto 0; text-align:left; background: var(--white); border-radius: 20px; padding: 40px; box-shadow: 0 30px 60px -24px rgba(20,24,29,0.16); position:relative; z-index:2; }
.form-note{ font-size:.82rem; color:#8a8474; margin-bottom: 24px; text-align:center; }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-bottom: 26px; }
.form-field-wide{ grid-column: 1 / -1; }
.form-field label{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.03em; color: var(--charcoal); margin-bottom:8px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding: 13px 15px; border: 1px solid var(--line-dark); border-radius: 10px;
  font-family: var(--font-body); font-size: .95rem; color: var(--charcoal); background: var(--white);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--pale-blue);
}
.form-field textarea{ resize: vertical; }
.quote-form .btn-primary{ width:100%; justify-content:center; }
.form-success{ text-align:center; color: var(--blue-deep); font-weight:700; padding: 14px; display:none; }
@media(max-width:650px){ .form-grid{ grid-template-columns: 1fr; } .quote-form{ padding: 28px 22px; } }

/* -------- Footer -------- */
.site-footer{ background: var(--blue-deep); color: #cfe0ef; padding-top: 70px; }
.footer-top{ display:grid; grid-template-columns: 1.15fr 0.85fr 1.15fr 1.05fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,.15); }
.footer-col h4{ color:var(--white); font-size:.95rem; letter-spacing:.06em; margin-bottom: 16px; font-family: var(--font-body); font-weight:600; }
.footer-col ul li{ margin-bottom: 9px; }
.footer-col a:hover{ color: var(--blue-light); }
.city-list-footer{ column-count:2; column-gap:18px; }
.city-list-footer li{ font-size:.88rem; }
@media(max-width:900px){ .footer-top{ grid-template-columns: 1fr 1fr; } .city-list-footer{ column-count:1; } }
@media(max-width:560px){ .footer-top{ grid-template-columns: 1fr; } }

/* -------- Wide dropdown for the full city list -------- */
.dropdown-wide{ min-width: 320px; column-count:2; column-gap: 6px; }
@media(max-width:899px){ .dropdown-wide{ column-count:1; } }

/* -------- Services dropdown grouped by category -------- */
.dropdown-services{ min-width: 480px; column-count:2; column-gap:10px; }
.dd-cat-group{ margin-bottom: 14px; break-inside: avoid; }
.dd-cat-heading{ display:block; font-weight:800; color: var(--blue-deep) !important; font-size:.88rem; padding:8px 14px 4px !important; }
.dd-cat-heading:hover{ background:transparent !important; }
.dropdown-services a:not(.dd-cat-heading){ padding:6px 14px 6px 22px; font-size:.86rem; }
@media(max-width:899px){ .dropdown-services{ column-count:1; } .dd-cat-heading{ padding:8px 0 4px !important; } .dropdown-services a:not(.dd-cat-heading){ padding:6px 0 6px 12px; } }

/* -------- Footer services list, grouped by category -------- */
.footer-services-list{ column-count:2; column-gap:20px; }
.footer-cat{ break-inside: avoid; margin-bottom:16px; display:block; }
.footer-cat > a strong{ color: var(--white); font-weight:700; font-size:.9rem; }
.footer-cat ul{ margin-top:6px; }
.footer-cat ul li{ margin-bottom:6px; }
.footer-cat ul li a{ font-size:.82rem; color:#cfe0ef; }
@media(max-width:900px){ .footer-services-list{ column-count:1; } }
.footer-brand .logo-text{ margin-bottom: 14px; color: var(--white); }
.footer-logo-img{ display:block; height:50px; width:50px; border-radius:50%; object-fit:cover; margin-bottom:14px; border:1px solid rgba(255,255,255,.2); }
.footer-brand p{ font-size:.92rem; max-width: 320px; color:#cfe0ef; }
.footer-map iframe{ width:100%; height: 190px; border-radius: 8px; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; padding: 24px 0 30px; font-size:.82rem; color:#b9d0e6; }
.footer-bottom a{ margin-left: 16px; }
@media(max-width:900px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media(max-width:560px){ .footer-top{ grid-template-columns: 1fr; } }

.tel-link{ color: var(--white); font-weight:700; }

/* -------- Scroll reveal -------- */
.reveal{
  opacity:0; transform: translateY(30px);
  transition: opacity .8s cubic-bezier(.16,.8,.3,1), transform .8s cubic-bezier(.16,.8,.3,1);
  will-change: opacity, transform;
}
.reveal.reveal-left{ transform: translate(-36px, 10px); }
.reveal.reveal-right{ transform: translate(36px, 10px); }
.reveal.reveal-scale{ transform: translateY(20px) scale(.94); }
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none !important; opacity:1 !important; transform:none !important; }
  .cta-section, .cta-glow{ animation:none !important; }
}

/* =====================================================
   Subpage components (about, process, faq, contact,
   services, locations, case study, legal)
   ===================================================== */

/* -------- Page hero banner (non-homepage pages) -------- */
.page-hero{
  background: linear-gradient(135deg, var(--pale-blue) 0%, var(--sand) 75%);
  padding: 74px 0 64px;
  position:relative; overflow:hidden;
}
.page-hero .container{ position:relative; z-index:1; }
.page-hero h1{ margin-bottom:16px; max-width:820px; }
.page-hero .lead{ max-width:640px; color: var(--charcoal-2); font-size:1.08rem; margin-bottom:0; }
.page-hero .breadcrumb{ font-size:.82rem; color: var(--blue-deep); margin-bottom:14px; }
.page-hero .breadcrumb a{ color: var(--blue); font-weight:600; }
.page-hero .breadcrumb a:hover{ text-decoration:underline; }

/* -------- Scope / checklist -------- */
.scope-list{ display:grid; grid-template-columns: repeat(2,1fr); gap: 14px 34px; margin: 22px 0 8px; padding:0; list-style:none; }
.scope-list li{ display:flex; gap:10px; align-items:flex-start; font-size:.98rem; color: var(--charcoal-2); }
.scope-list li::before{ content:"\\2713"; color: var(--blue); font-weight:800; flex-shrink:0; line-height:1.5; }
@media(max-width:650px){ .scope-list{ grid-template-columns:1fr; } }

/* -------- Service / location page intro split -------- */
.intro-split{ display:grid; grid-template-columns: 0.85fr 1.25fr; gap:48px; align-items:center; }
.intro-split .photo-frame{ border-radius: 150px 150px 18px 18px; aspect-ratio: 4/3.3; }
@media(max-width:850px){ .intro-split{ grid-template-columns:1fr; } .intro-split .photo-frame{ order:-1; border-radius:100px 100px 14px 14px; } }
.intro-solo{ max-width: 680px; }

/* -------- FAQ groups (full FAQ page) -------- */
.faq-group{ margin-bottom: 54px; }
.faq-group h3{ color: var(--blue-deep); margin-bottom: 4px; font-size:1.35rem; }
.faq-group .faq-group-note{ color:#8a8474; font-size:.88rem; margin-bottom:18px; }

/* -------- Approach grid (case study) -------- */
.approach-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; margin: 40px 0; }
.approach-card{ background: var(--white); border:1px solid var(--line-dark); border-radius:18px; padding:30px 26px; }
.approach-card .num{ font-family: var(--font-head); font-weight:700; font-size:1.7rem; color: var(--blue-light); display:block; margin-bottom:10px; }
.approach-card h3{ font-size:1.15rem; margin-bottom:8px; }
.approach-card p{ font-size:.95rem; color: var(--charcoal-2); margin:0; }
@media(max-width:850px){ .approach-grid{ grid-template-columns:1fr; } }

/* -------- Case study gallery -------- */
.gallery-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin: 36px 0; }
.gallery-grid .photo-frame{ aspect-ratio: 4/3; border-radius: 14px; }
@media(max-width:750px){ .gallery-grid{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:480px){ .gallery-grid{ grid-template-columns: 1fr; } }

/* -------- Contact page -------- */
.contact-grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items:start; }
.contact-info .info-block{ margin-bottom: 30px; }
.contact-info h3{ font-size:1.1rem; margin-bottom:10px; }
.contact-info p{ color: var(--charcoal-2); margin-bottom:4px; }
.contact-info .tel-link-lg{ color: var(--blue); font-weight:700; font-size:1.3rem; font-family:var(--font-head); }
.contact-info iframe{ width:100%; height:220px; border-radius:14px; margin-top:8px; }
.contact-grid .quote-form{ margin:0; box-shadow: 0 24px 50px -20px rgba(20,24,29,0.14); }
@media(max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

/* -------- Legal pages -------- */
.legal-content{ max-width: 760px; }
.legal-content h2{ margin-top: 42px; font-size:1.4rem; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content p, .legal-content li{ color: var(--charcoal-2); line-height:1.7; }
.legal-content ul{ padding-left: 20px; list-style: disc; margin-bottom:1em; }
.legal-note{
  background: var(--pale-blue); border-radius:14px; padding:20px 24px; margin-bottom:36px;
  font-size:.92rem; color: var(--blue-deep); border-left:3px solid var(--blue);
}

/* -------- About page -------- */
.about-grid{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap:56px; align-items:center; }
@media(max-width:850px){ .about-grid{ grid-template-columns:1fr; } }

.story-block{ max-width: 720px; }
.story-byline{ display:flex; align-items:center; gap:20px; margin-bottom: 30px; }
.mario-headshot{ width:130px; height:130px; border-radius:50%; object-fit:cover; border:3px solid var(--pale-blue); }
.story-byline-name{ display:flex; flex-direction:column; line-height:1.4; }
.story-byline-name strong{ font-size:1.2rem; color: var(--black); }
.story-byline-name span{ font-size:.92rem; color: var(--charcoal-2); }
.value-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
.value-card{ padding:8px 0; }
.value-card h3{ font-size:1.15rem; margin-bottom:8px; color: var(--blue-deep); }
.value-card p{ font-size:.95rem; color: var(--charcoal-2); margin:0; }
@media(max-width:750px){ .value-grid{ grid-template-columns:1fr; } }

/* -------- Simple cross-link cards (service pages "also explore") -------- */
.service-card{ background: var(--white); border:1px solid var(--line-dark); border-radius:16px; padding:26px; transition: box-shadow .2s ease, transform .2s ease; }
.service-card:hover{ box-shadow: 0 20px 40px -18px rgba(20,24,29,0.14); transform: translateY(-3px); }
.service-card h3{ font-size:1.05rem; margin-bottom:8px; }
.service-card h3 a{ color: var(--black); }
.service-card h3 a:hover{ color: var(--blue-deep); }
.service-card p{ font-size:.92rem; color: var(--charcoal-2); margin:0; }
@media(max-width:900px){ .services-grid{ grid-template-columns: repeat(2,1fr) !important; } }
@media(max-width:600px){ .services-grid{ grid-template-columns: 1fr !important; } }