/* Homepage. Boldness is spent on the hero; everything else stays quiet. */
@import url('/assets/css/content.css');

.hero{background:var(--navy-900);color:var(--white);padding:clamp(2.5rem,6vw,4.5rem) 0;overflow:hidden}
.hero__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
/* The H1 holds two lines: a small service + location lede, then the brand
   headline at full size. Both are inside the heading, so the keyword signal
   stays in the H1 while the brand line remains the loudest thing on the page. */
.hero__h{color:var(--white);margin:0 0 1rem;max-width:none}
/* Each span sets its own measure: ch resolves against its own font-size, so a
   shared max-width on the h1 would mean two different line lengths. */
.hero__h-lede{
  display:block;font-family:var(--f-head);font-size:.9375rem;font-weight:500;
  line-height:1.4;letter-spacing:.01em;color:var(--gold);
  max-width:46ch;margin-bottom:.9rem;
}
.hero__h-main{
  display:block;font-size:clamp(2.25rem,5.4vw,3.9rem);line-height:1.04;
  letter-spacing:-.025em;max-width:17ch;
}
.hero__sub{font-size:1.1875rem;color:#B9CBD9;max-width:52ch;margin-bottom:1.75rem}
.hero__act{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:2.25rem}
.hero .creds{grid-template-columns:1fr 1fr;gap:.75rem 1.25rem}
.hero .creds__item{border-left-color:var(--gold)}
.hero .creds__item strong{color:var(--white);font-weight:500;font-size:.875rem}
.hero__shot{margin:0}
.hero__shot img{border-radius:var(--r);width:100%;object-fit:cover;aspect-ratio:4/3}
.hero__shot figcaption{font-size:.8125rem;color:#8FA3B4;margin-top:.6rem}

.band{padding:clamp(2.5rem,5vw,4rem) 0}
.band--why{background:var(--shell)}
.band--proc{background:var(--shell-2);border-block:1px solid var(--line)}
.band--faq{background:var(--shell)}
.band__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.band__head h2{margin:0}
.band__more{font-family:var(--f-head);font-weight:500;font-size:.9375rem}
.band__lede{font-size:1.125rem;color:var(--ink-2);max-width:60ch}

.why__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.75rem;margin-top:1.5rem}
.why__item h3{color:var(--navy-700);margin-bottom:.4rem}
.why__item p{font-size:.9375rem;color:var(--ink-2);margin:0}

.svc__grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:1rem}
.svc__card a{
  display:block;height:100%;padding:1.35rem 1.5rem;text-decoration:none;
  border:1px solid var(--line);border-radius:var(--r);background:var(--white);
}
.svc__card a:hover{border-color:var(--blue-500);background:var(--shell-2)}
.svc__card h3{margin:0 0 .35rem;font-size:1.0625rem}
.svc__card p{margin:0;font-size:.9375rem;color:var(--ink-2)}

.area__grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem}
.area__grid a{
  display:flex;flex-direction:column;padding:.9rem 1.1rem;text-decoration:none;
  border:1px solid var(--line);border-radius:var(--r);background:var(--white);
}
.area__grid a:hover{border-color:var(--blue-500);background:var(--shell-2)}
.area__grid strong{font-family:var(--f-head);color:var(--navy-900);font-weight:600}
.area__grid span{font-size:.8125rem;color:var(--ink-3)}

.band--proc .steps__item{border-left-color:var(--line)}
.band--faq .faq{margin-top:0}
.band--faq .faq__item{border-bottom-color:var(--line)}

@media (max-width:900px){
  .hero__in{grid-template-columns:1fr}
  .hero__shot{order:-1}
  .hero .creds{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .hero .creds{grid-template-columns:1fr}
}

.band--work{background:var(--shell-2);border-block:1px solid var(--line)}
.band--work .gal{margin-top:0}
.hero__shot img{border-radius:var(--r);width:100%;object-fit:cover;aspect-ratio:4/3}
.foot__logo{max-width:250px;height:auto;border-radius:var(--r)}
.foot__slogan{margin-top:.9rem;max-width:190px;opacity:.95}

.badges{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;margin:1.5rem 0 0;padding:0}
.badges li{margin:0;background:var(--white);border-radius:var(--r);padding:.5rem .7rem;display:flex;align-items:center}
.badges img{height:34px;width:auto;display:block}
@media (max-width:520px){ .badges{gap:.75rem} .badges img{height:28px} }

.hero__price{font-size:.9375rem;color:#B9CBD9;margin:1rem 0 1.75rem}
.hero__price strong{color:var(--gold);font-family:var(--f-head);font-size:1.0625rem}
.hero__price a{color:#B9CBD9;text-decoration:underline}
.hero__price a:hover{color:var(--white)}

.band--take{padding-top:0;padding-bottom:0;background:var(--white)}
.band--take .takeaway{margin:clamp(2rem,4vw,3rem) 0}