:root {
      --navy: #123B4A;
      --teal: #2F8F9D;
      --aqua: #72C6C7;
      --sand: #E8D8C3;
      --cream: #FAF8F3;
      --ink: #17343E;
      --muted: #68777C;
      --line: #dce4e4;
      --white: #fff;
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      margin: 0;
      color: var(--ink);
      background: var(--cream);
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.55
    }

    img {
      display: block;
      max-width: 100%
    }

    a {
      color: inherit;
      text-decoration: none
    }

    .wrap {
      width: min(1180px, calc(100% - 44px));
      margin: auto
    }

    .utility {
      background: var(--navy);
      color: #eaf3f4;
      font-size: 12px
    }

    .utility-inner {
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px
    }

    .utility-right {
      display: flex;
      align-items: center;
      gap: 11px
    }

    .utility a {
      opacity: .92
    }

    .utility a:hover {
      opacity: 1
    }

    .socials {
      display: flex;
      gap: 7px;
      margin-left: 8px
    }

    .socials a {
      width: 22px;
      height: 22px;
      border: 1px solid rgba(255, 255, 255, .28);
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 10px
    }

    .site-header {
      background: rgba(255, 255, 255, .97);
      border-bottom: 1px solid #e9eded;
      position: sticky;
      top: 0;
      z-index: 20
    }

    .nav {
      height: 82px;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .brand {
      width: 105px;
      height: 72px;
      display: block
    }

    .brand img {
      width: 100%;
      height: 100%;
      object-fit: contain
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 31px;
      font-size: 14px;
      font-weight: 600
    }

    .nav-links>a {
      position: relative;
      padding: 30px 0
    }

    .nav-links>a:not(.nav-cta):after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 20px;
      width: 0;
      height: 2px;
      background: var(--teal);
      transition: .2s
    }

    .nav-links>a:hover:after,
    .nav-links>a.active:after {
      width: 100%
    }

    .nav-cta {
      background: var(--teal);
      color: #fff !important;
      padding: 13px 19px !important;
      border-radius: 4px;
      margin-left: 4px
    }

    .nav-cta span {
      margin-left: 10px
    }

    .menu-toggle {
      display: none;
      border: 0;
      background: none;
      font-size: 25px;
      color: var(--navy)
    }

    .hero {
      height: 650px;
      min-height: 650px;
      position: relative;
      color: #fff;
      overflow: hidden
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background-image: url("../images/12.webp");
      background-size: cover;
      background-position: center 58%;
      transform: scale(1.015)
    }

    .hero-shade {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(8, 31, 39, .82) 0%, rgba(8, 31, 39, .58) 43%, rgba(8, 31, 39, .10) 75%), linear-gradient(0deg, rgba(8, 31, 39, .58), transparent 35%)
    }

    .hero-inner {
      height: 100%;
      display: flex;
      align-items: center;
      position: relative;
      z-index: 2
    }

    .hero-copy {
      max-width: 650px;
      padding-top: 10px
    }

    .kicker,
    .eyebrow {
      font-size: 11px;
      letter-spacing: .19em;
      font-weight: 700;
      color: var(--teal);
      margin: 0 0 13px
    }

    .hero .kicker {
      color: #a9e3e5
    }

    .hero h1 {
      font-family: Georgia, "Times New Roman", serif;
      font-weight: 400;
      font-size: clamp(48px, 6vw, 76px);
      line-height: .99;
      letter-spacing: -.035em;
      margin: 0 0 24px;
      max-width: 680px
    }

    .hero-lede {
      font-size: 18px;
      line-height: 1.65;
      max-width: 620px;
      color: #f5f8f8;
      margin: 0 0 30px
    }

    .hero-buttons {
      display: flex;
      gap: 12px;
      flex-wrap: wrap
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: 14px 21px;
      border-radius: 3px;
      border: 1px solid transparent;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer
    }

    .button.solid {
      background: var(--teal);
      color: #fff
    }

    .button.solid:hover {
      background: #267e8a
    }

    .button.ghost {
      border-color: rgba(255, 255, 255, .72);
      color: #fff;
      background: rgba(0, 0, 0, .08)
    }

    .hero-meta {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3;
      background: rgba(11, 42, 51, .86);
      border-top: 1px solid rgba(255, 255, 255, .15)
    }

    .hero-meta-inner {
      display: grid;
      grid-template-columns: repeat(3, 1fr)
    }

    .hero-meta-inner>div {
      padding: 19px 24px;
      border-right: 1px solid rgba(255, 255, 255, .16)
    }

    .hero-meta-inner>div:last-child {
      border-right: 0
    }

    .hero-meta strong,
    .hero-meta span {
      display: block
    }

    .hero-meta strong {
      font-size: 13px
    }

    .hero-meta span {
      font-size: 12px;
      color: #bcd0d2;
      margin-top: 3px
    }

    .carousel-section {
      background: #fff;
      padding: 70px 0 78px
    }

    .carousel-top {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 25px;
      margin-bottom: 28px
    }

    .carousel-top h2,
    .section-heading h2,
    .intro-copy h2,
    .split-copy h2,
    .quote-grid h2 {
      font-family: Georgia, "Times New Roman", serif;
      font-weight: 400;
      color: var(--navy);
      font-size: clamp(34px, 4vw, 48px);
      line-height: 1.05;
      letter-spacing: -.025em;
      margin: 0
    }

    .carousel-controls {
      display: flex;
      gap: 8px
    }

    .carousel-btn {
      width: 46px;
      height: 46px;
      border: 1px solid #ccd7d8;
      background: #fff;
      color: var(--navy);
      font-size: 20px;
      border-radius: 50%;
      cursor: pointer
    }

    .carousel-btn:hover {
      background: var(--navy);
      color: #fff
    }

    .carousel {
      overflow: hidden
    }

    .slides {
      display: flex;
      gap: 18px;
      transition: transform .55s cubic-bezier(.2, .7, .2, 1)
    }

    .slide {
      flex: 0 0 calc((100% - 36px)/3);
      min-width: 0;
      position: relative;
      height: 405px;
      overflow: hidden;
      background: #ddd
    }

    .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .6s ease
    }

    .slide:hover img {
      transform: scale(1.035)
    }

    .slide:after {
      content: "";
      position: absolute;
      inset: 45% 0 0;
      background: linear-gradient(transparent, rgba(8, 30, 38, .86))
    }

    .slide-caption {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      color: #fff;
      display: flex;
      gap: 16px;
      align-items: flex-start;
      padding: 22px
    }

    .slide-caption>span {
      font-size: 12px;
      color: #a9e3e5;
      padding-top: 3px
    }

    .slide-caption h3 {
      font-family: Georgia, "Times New Roman", serif;
      font-weight: 400;
      font-size: 27px;
      margin: 0 0 3px
    }

    .slide-caption p {
      font-size: 12px;
      color: #e6eeee;
      margin: 0
    }

    .carousel-dots {
      display: flex;
      justify-content: center;
      gap: 7px;
      margin-top: 22px
    }

    .carousel-dots button {
      width: 28px;
      height: 3px;
      padding: 0;
      border: 0;
      background: #bfcaca;
      cursor: pointer
    }

    .carousel-dots button.active {
      background: var(--teal)
    }

    .intro {
      padding: 105px 0;
      background: var(--cream)
    }

    .intro-grid {
      display: grid;
      grid-template-columns: 1.03fr .97fr;
      gap: 90px;
      align-items: center
    }

    .intro-photo {
      position: relative
    }

    .intro-photo img {
      width: 100%;
      height: 560px;
      object-fit: cover
    }

    .photo-note {
      position: absolute;
      bottom: 0;
      left: 0;
      background: var(--navy);
      color: #fff;
      padding: 13px 17px;
      font-size: 11px;
      letter-spacing: .04em
    }

    .intro-copy {
      max-width: 520px
    }

    .intro-copy h2 {
      margin: 0 0 24px
    }

    .intro-copy p {
      color: #5f6f73;
      font-size: 16px;
      margin: 0 0 17px
    }

    .text-link {
      display: inline-flex;
      gap: 12px;
      color: var(--navy);
      font-weight: 700;
      font-size: 14px;
      border-bottom: 1px solid var(--navy);
      padding-bottom: 5px;
      margin-top: 12px
    }

    .services-section {
      background: #fff;
      padding: 96px 0 110px
    }

    .section-heading {
      display: flex;
      justify-content: space-between;
      gap: 50px;
      align-items: end;
      margin-bottom: 42px
    }

    .section-heading>p {
      max-width: 420px;
      color: #657477;
      margin: 0
    }

    .service-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px
    }

    .service-card {
      background: var(--cream);
      display: flex;
      flex-direction: column;
      min-height: 470px;
      border: 1px solid #edf0ee;
      transition: transform .2s, box-shadow .2s
    }

    .service-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 30px rgba(16, 54, 64, .09)
    }

    .service-card.wide {
      grid-column: span 2
    }

    .service-image {
      height: 245px;
      overflow: hidden
    }

    .service-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .5s
    }

    .service-card:hover .service-image img {
      transform: scale(1.035)
    }

    .service-card>div:last-child {
      padding: 22px 22px 25px
    }

    .service-card small {
      font-size: 11px;
      color: var(--teal);
      font-weight: 700
    }

    .service-card h3 {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 26px;
      font-weight: 400;
      color: var(--navy);
      margin: 6px 0 8px
    }

    .service-card p {
      font-size: 13px;
      color: #68777b;
      margin: 0 0 20px
    }

    .service-card span {
      font-size: 12px;
      font-weight: 700;
      color: var(--navy)
    }

    .split-band {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      min-height: 560px;
      background: var(--navy);
      color: #fff
    }

    .split-photo {
      background: url("../images/13.webp") center/cover
    }

    .split-copy {
      padding: 90px 9vw 90px 75px;
      display: flex;
      justify-content: center;
      flex-direction: column
    }

    .split-copy h2 {
      color: #fff;
      max-width: 540px
    }

    .split-copy p:not(.eyebrow) {
      max-width: 510px;
      color: #c5d3d5;
      font-size: 16px
    }

    .states {
      display: flex;
      gap: 9px;
      margin-top: 20px
    }

    .states span {
      display: grid;
      place-items: center;
      width: 54px;
      height: 54px;
      border: 1px solid rgba(255, 255, 255, .35);
      font-size: 13px;
      font-weight: 700
    }

    .quote-section {
      padding: 105px 0;
      background: var(--cream)
    }

    .quote-grid {
      display: grid;
      grid-template-columns: 1fr .8fr;
      gap: 100px
    }

    .quote-grid h2 {
      max-width: 500px;
      margin-bottom: 20px
    }

    .quote-grid>div>p:not(.eyebrow) {
      color: #667578;
      max-width: 520px
    }

    .contact-details {
      display: flex;
      flex-direction: column;
      gap: 7px;
      margin-top: 30px;
      font-size: 14px;
      color: #42565c
    }

    .contact-details strong {
      font-size: 24px;
      color: var(--navy);
      font-weight: 500
    }

    .quote-form {
      background: #fff;
      border: 1px solid #e5e9e8;
      padding: 30px
    }

    .quote-form label {
      display: block;
      font-size: 12px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 15px
    }

    .quote-form input,
    .quote-form textarea {
      width: 100%;
      margin-top: 7px;
      border: 1px solid #d7dfdf;
      padding: 12px 13px;
      font: inherit;
      font-size: 14px;
      background: #fff;
      outline: 0
    }

    .quote-form input:focus,
    .quote-form textarea:focus {
      border-color: var(--teal)
    }

    .quote-form .button {
      border: 0;
      margin-top: 2px
    }

    .form-note {
      display: block;
      color: var(--teal);
      margin-top: 12px
    }

    .footer {
      background: #0d2f3b;
      color: #d6e1e2;
      padding: 65px 0 20px
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.6fr .8fr .8fr 1fr;
      gap: 45px;
      padding-bottom: 55px
    }

    .footer-brand img {
      width: 125px;
      height: 110px;
      object-fit: contain;
      background: #fff;
      border-radius: 2px;
      margin-bottom: 13px
    }

    .footer-brand p {
      max-width: 310px;
      color: #9eb2b5;
      font-size: 13px
    }

    .footer h4 {
      color: #fff;
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;
      margin: 0 0 16px
    }

    .footer-grid>div:not(.footer-brand) a,
    .footer-grid>div:not(.footer-brand) span {
      display: block;
      color: #a9bec1;
      font-size: 13px;
      margin: 0 0 8px
    }

    .footer-grid a:hover {
      color: #fff
    }

    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, .12);
      padding-top: 18px;
      display: flex;
      justify-content: space-between;
      color: #82999d;
      font-size: 11px
    }

    @media(max-width:900px) {
      .utility-inner {
        justify-content: center
      }

      .utility-inner>span {
        display: none
      }

      .utility-right {
        width: 100%;
        justify-content: center
      }

      .nav-links {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 82px;
        background: #fff;
        padding: 10px 22px 24px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        border-bottom: 1px solid #ddd
      }

      .nav-links.open {
        display: flex
      }

      .nav-links>a {
        padding: 13px 0
      }

      .nav-links>a:not(.nav-cta):after {
        bottom: 7px
      }

      .nav-cta {
        text-align: center;
        margin-top: 8px
      }

      .menu-toggle {
        display: block
      }

      .hero {
        height: 650px
      }

      .hero-meta-inner {
        grid-template-columns: 1fr
      }

      .hero-meta-inner>div {
        padding: 11px 18px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .12)
      }

      .hero-meta-inner>div:last-child {
        display: none
      }

      .slide {
        flex-basis: calc((100% - 18px)/2)
      }

      .intro-grid,
      .quote-grid {
        grid-template-columns: 1fr;
        gap: 50px
      }

      .intro-photo img {
        height: 450px
      }

      .service-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .service-card.wide {
        grid-column: span 2
      }

      .split-band {
        grid-template-columns: 1fr
      }

      .split-photo {
        min-height: 390px
      }

      .split-copy {
        padding: 70px 30px
      }

      .footer-grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media(max-width:600px) {
      .wrap {
        width: min(100% - 30px, 1180px)
      }

      .utility-right>a:nth-child(3),
      .utility-right .dot {
        display: none
      }

      .nav {
        height: 74px
      }

      .nav-links {
        top: 74px
      }

      .brand {
        width: 85px;
        height: 65px
      }

      .hero {
        height: 720px;
        min-height: 720px
      }

      .hero-bg {
        background-position: 62% center
      }

      .hero-copy {
        padding-bottom: 90px
      }

      .hero h1 {
        font-size: 47px
      }

      .hero-lede {
        font-size: 16px
      }

      .hero-meta-inner>div {
        display: none
      }

      .hero-meta-inner>div:first-child {
        display: block
      }

      .carousel-section,
      .services-section,
      .quote-section {
        padding: 65px 0
      }

      .intro {
        padding: 70px 0
      }

      .carousel-top {
        align-items: start
      }

      .carousel-controls {
        margin-top: 3px
      }

      .carousel-btn {
        width: 40px;
        height: 40px
      }

      .slide {
        flex-basis: 100%;
        height: 390px
      }

      .intro-photo img {
        height: 390px
      }

      .section-heading {
        display: block
      }

      .section-heading>p {
        margin-top: 15px
      }

      .service-grid {
        grid-template-columns: 1fr
      }

      .service-card.wide {
        grid-column: auto
      }

      .service-card {
        min-height: 0
      }

      .service-image {
        height: 240px
      }

      .quote-grid {
        gap: 35px
      }

      .quote-form {
        padding: 22px
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px 20px
      }

      .footer-brand {
        grid-column: span 2
      }

      .footer-bottom {
        display: block
      }

      .footer-bottom span {
        display: block;
        margin-bottom: 5px
      }
    }

    .social-icon {
      display: grid !important;
      place-items: center
    }

    .social-icon svg {
      width: 12px;
      height: 12px;
      fill: currentColor;
      stroke: currentColor;
      stroke-width: 1.7
    }

    .social-icon svg rect,
    .social-icon svg circle {
      fill: none
    }

    .social-icon svg .fill-dot {
      fill: currentColor;
      stroke: none
    }

    .comprehensive-form {
      padding: 0 !important;
      background: #fff;
      border: 1px solid #dfe7e7 !important
    }

    .form-intro {
      padding: 28px 30px 22px;
      border-bottom: 1px solid #e5eaea
    }

    .form-intro strong {
      display: block;
      color: var(--navy);
      font-family: Georgia, "Times New Roman", serif;
      font-size: 27px;
      font-weight: 400
    }

    .form-intro span {
      display: block;
      color: #718084;
      font-size: 13px;
      margin-top: 5px
    }

    .form-section {
      padding: 24px 30px;
      border-bottom: 1px solid #e5eaea
    }

    .form-section h3 {
      font-size: 13px;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--navy);
      margin: 0 0 18px
    }

    .form-row {
      display: grid;
      gap: 14px
    }

    .form-row.two {
      grid-template-columns: 1fr 1fr
    }

    .form-row.three {
      grid-template-columns: 1fr 1fr 1.2fr
    }

    .comprehensive-form label {
      display: block;
      font-size: 11px;
      font-weight: 700;
      color: #294851;
      margin-bottom: 13px
    }

    .comprehensive-form input,
    .comprehensive-form select,
    .comprehensive-form textarea {
      width: 100%;
      margin-top: 6px;
      border: 1px solid #d4dede;
      padding: 11px 12px;
      font: inherit;
      font-size: 13px;
      color: var(--ink);
      background: #fff;
      border-radius: 2px;
      outline: 0
    }

    .comprehensive-form input:focus,
    .comprehensive-form select:focus,
    .comprehensive-form textarea:focus {
      border-color: var(--teal);
      box-shadow: 0 0 0 2px rgba(47, 143, 157, .08)
    }

    .check-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px
    }

    .check-grid label,
    .form-consent label {
      font-weight: 500;
      font-size: 12px;
      display: flex;
      align-items: center;
      gap: 9px;
      margin: 0
    }

    .check-grid input[type=checkbox],
    .form-consent input[type=checkbox] {
      width: 16px;
      height: 16px;
      margin: 0;
      accent-color: var(--teal)
    }

    .comprehensive-form input[type=file] {
      padding: 9px;
      background: #fafcfc
    }

    .field-help {
      display: block;
      color: #829093;
      font-size: 11px;
      margin-top: -5px
    }

    .form-consent {
      padding: 18px 30px
    }

    .comprehensive-form>.button {
      margin: 0 30px 10px;
      border: 0
    }

    .comprehensive-form>.form-note {
      display: block;
      margin: 0 30px 25px
    }

    .form-intro+.form-section label:last-child {
      margin-bottom: 0
    }

    @media(max-width:700px) {

      .form-row.two,
      .form-row.three,
      .check-grid {
        grid-template-columns: 1fr
      }

      .form-section,
      .form-intro,
      .form-consent {
        padding-left: 20px;
        padding-right: 20px
      }

      .comprehensive-form>.button {
        margin-left: 20px;
        margin-right: 20px
      }

      .comprehensive-form>.form-note {
        margin-left: 20px;
        margin-right: 20px
      }
    }
  
/* BEACH FORMAT V5 — residential + commercial visual system */
.audience-strip{background:#f0e9df;border-bottom:1px solid #ddd4c7;border-top:1px solid #e5ddd2}
.audience-inner{min-height:62px;display:flex;align-items:center;gap:28px;overflow:auto;white-space:nowrap}
.audience-inner a{font-size:12px;font-weight:700;color:var(--navy);padding:4px 0;border-bottom:1px solid transparent}
.audience-inner a:hover{border-color:var(--teal)}
.audience-label{font-size:10px;letter-spacing:.18em;font-weight:800;color:var(--teal)}
.hero .kicker{max-width:600px}
.service-grid{grid-template-columns:repeat(3,1fr)}
.service-card.wide{grid-column:auto}
.service-card{min-height:450px}
.service-card h3{min-height:58px}
.service-card p{min-height:64px}
.split-band{grid-template-columns:.95fr 1.05fr}
.split-photo{background-position:center}
@media(max-width:900px){
 .audience-inner{gap:20px}
 .service-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
 .audience-inner{gap:18px;min-height:56px}
 .audience-inner>div{display:none}
 .service-grid{grid-template-columns:1fr}
 .service-card{min-height:0}
 .service-card h3,.service-card p{min-height:0}
}

  

/* Services page base styles */

        :root {
            --navy: #123B4A;
            --teal: #2F8F9D;
            --aqua: #72C6C7;
            --sand: #E8D8C3;
            --cream: #FAF8F3;
            --ink: #17343E;
            --muted: #68777C;
            --line: #dce4e4;
            --white: #fff;
        }

        * {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth
        }

        body {
            margin: 0;
            color: var(--ink);
            background: var(--cream);
            font-family: Arial, Helvetica, sans-serif;
            line-height: 1.55
        }

        img {
            display: block;
            max-width: 100%
        }

        a {
            color: inherit;
            text-decoration: none
        }

        .wrap {
            width: min(1180px, calc(100% - 44px));
            margin: auto
        }

        .utility {
            background: var(--navy);
            color: #eaf3f4;
            font-size: 12px
        }

        .utility-inner {
            min-height: 38px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px
        }

        .utility-right {
            display: flex;
            align-items: center;
            gap: 11px
        }

        .utility a {
            opacity: .92
        }

        .utility a:hover {
            opacity: 1
        }

        .socials {
            display: flex;
            gap: 7px;
            margin-left: 8px
        }

        .socials a {
            width: 22px;
            height: 22px;
            border: 1px solid rgba(255, 255, 255, .28);
            border-radius: 50%;
            display: grid;
            place-items: center;
            font-size: 10px
        }

        .site-header {
            background: rgba(255, 255, 255, .97);
            border-bottom: 1px solid #e9eded;
            position: sticky;
            top: 0;
            z-index: 20
        }

        .nav {
            height: 82px;
            display: flex;
            align-items: center;
            justify-content: space-between
        }

        .brand {
            width: 105px;
            height: 72px;
            display: block
        }

        .brand img {
            width: 100%;
            height: 100%;
            object-fit: contain
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 31px;
            font-size: 14px;
            font-weight: 600
        }

        .nav-links>a {
            position: relative;
            padding: 30px 0
        }

        .nav-links>a:not(.nav-cta):after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 20px;
            width: 0;
            height: 2px;
            background: var(--teal);
            transition: .2s
        }

        .nav-links>a:hover:after,
        .nav-links>a.active:after {
            width: 100%
        }

        .nav-cta {
            background: var(--teal);
            color: #fff !important;
            padding: 13px 19px !important;
            border-radius: 4px;
            margin-left: 4px
        }

        .nav-cta span {
            margin-left: 10px
        }

        .menu-toggle {
            display: none;
            border: 0;
            background: none;
            font-size: 25px;
            color: var(--navy)
        }

        .hero {
            height: 650px;
            min-height: 650px;
            position: relative;
            color: #fff;
            overflow: hidden
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            background-image: url("../images/12.webp");
            background-size: cover;
            background-position: center 58%;
            transform: scale(1.015)
        }

        .hero-shade {
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(8, 31, 39, .82) 0%, rgba(8, 31, 39, .58) 43%, rgba(8, 31, 39, .10) 75%), linear-gradient(0deg, rgba(8, 31, 39, .58), transparent 35%)
        }

        .hero-inner {
            height: 100%;
            display: flex;
            align-items: center;
            position: relative;
            z-index: 2
        }

        .hero-copy {
            max-width: 650px;
            padding-top: 10px
        }

        .kicker,
        .eyebrow {
            font-size: 11px;
            letter-spacing: .19em;
            font-weight: 700;
            color: var(--teal);
            margin: 0 0 13px
        }

        .hero .kicker {
            color: #a9e3e5
        }

        .hero h1 {
            font-family: Georgia, "Times New Roman", serif;
            font-weight: 400;
            font-size: clamp(48px, 6vw, 76px);
            line-height: .99;
            letter-spacing: -.035em;
            margin: 0 0 24px;
            max-width: 680px
        }

        .hero-lede {
            font-size: 18px;
            line-height: 1.65;
            max-width: 620px;
            color: #f5f8f8;
            margin: 0 0 30px
        }

        .hero-buttons {
            display: flex;
            gap: 12px;
            flex-wrap: wrap
        }

        .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            padding: 14px 21px;
            border-radius: 3px;
            border: 1px solid transparent;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer
        }

        .button.solid {
            background: var(--teal);
            color: #fff
        }

        .button.solid:hover {
            background: #267e8a
        }

        .button.ghost {
            border-color: rgba(255, 255, 255, .72);
            color: #fff;
            background: rgba(0, 0, 0, .08)
        }

        .hero-meta {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 3;
            background: rgba(11, 42, 51, .86);
            border-top: 1px solid rgba(255, 255, 255, .15)
        }

        .hero-meta-inner {
            display: grid;
            grid-template-columns: repeat(3, 1fr)
        }

        .hero-meta-inner>div {
            padding: 19px 24px;
            border-right: 1px solid rgba(255, 255, 255, .16)
        }

        .hero-meta-inner>div:last-child {
            border-right: 0
        }

        .hero-meta strong,
        .hero-meta span {
            display: block
        }

        .hero-meta strong {
            font-size: 13px
        }

        .hero-meta span {
            font-size: 12px;
            color: #bcd0d2;
            margin-top: 3px
        }

        .carousel-section {
            background: #fff;
            padding: 70px 0 78px
        }

        .carousel-top {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 25px;
            margin-bottom: 28px
        }

        .carousel-top h2,
        .section-heading h2,
        .intro-copy h2,
        .split-copy h2,
        .quote-grid h2 {
            font-family: Georgia, "Times New Roman", serif;
            font-weight: 400;
            color: var(--navy);
            font-size: clamp(34px, 4vw, 48px);
            line-height: 1.05;
            letter-spacing: -.025em;
            margin: 0
        }

        .carousel-controls {
            display: flex;
            gap: 8px
        }

        .carousel-btn {
            width: 46px;
            height: 46px;
            border: 1px solid #ccd7d8;
            background: #fff;
            color: var(--navy);
            font-size: 20px;
            border-radius: 50%;
            cursor: pointer
        }

        .carousel-btn:hover {
            background: var(--navy);
            color: #fff
        }

        .carousel {
            overflow: hidden
        }

        .slides {
            display: flex;
            gap: 18px;
            transition: transform .55s cubic-bezier(.2, .7, .2, 1)
        }

        .slide {
            flex: 0 0 calc((100% - 36px)/3);
            min-width: 0;
            position: relative;
            height: 405px;
            overflow: hidden;
            background: #ddd
        }

        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .6s ease
        }

        .slide:hover img {
            transform: scale(1.035)
        }

        .slide:after {
            content: "";
            position: absolute;
            inset: 45% 0 0;
            background: linear-gradient(transparent, rgba(8, 30, 38, .86))
        }

        .slide-caption {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 2;
            color: #fff;
            display: flex;
            gap: 16px;
            align-items: flex-start;
            padding: 22px
        }

        .slide-caption>span {
            font-size: 12px;
            color: #a9e3e5;
            padding-top: 3px
        }

        .slide-caption h3 {
            font-family: Georgia, "Times New Roman", serif;
            font-weight: 400;
            font-size: 27px;
            margin: 0 0 3px
        }

        .slide-caption p {
            font-size: 12px;
            color: #e6eeee;
            margin: 0
        }

        .carousel-dots {
            display: flex;
            justify-content: center;
            gap: 7px;
            margin-top: 22px
        }

        .carousel-dots button {
            width: 28px;
            height: 3px;
            padding: 0;
            border: 0;
            background: #bfcaca;
            cursor: pointer
        }

        .carousel-dots button.active {
            background: var(--teal)
        }

        .intro {
            padding: 105px 0;
            background: var(--cream)
        }

        .intro-grid {
            display: grid;
            grid-template-columns: 1.03fr .97fr;
            gap: 90px;
            align-items: center
        }

        .intro-photo {
            position: relative
        }

        .intro-photo img {
            width: 100%;
            height: 560px;
            object-fit: cover
        }

        .photo-note {
            position: absolute;
            bottom: 0;
            left: 0;
            background: var(--navy);
            color: #fff;
            padding: 13px 17px;
            font-size: 11px;
            letter-spacing: .04em
        }

        .intro-copy {
            max-width: 520px
        }

        .intro-copy h2 {
            margin: 0 0 24px
        }

        .intro-copy p {
            color: #5f6f73;
            font-size: 16px;
            margin: 0 0 17px
        }

        .text-link {
            display: inline-flex;
            gap: 12px;
            color: var(--navy);
            font-weight: 700;
            font-size: 14px;
            border-bottom: 1px solid var(--navy);
            padding-bottom: 5px;
            margin-top: 12px
        }

        .services-section {
            background: #fff;
            padding: 96px 0 110px
        }

        .section-heading {
            display: flex;
            justify-content: space-between;
            gap: 50px;
            align-items: end;
            margin-bottom: 42px
        }

        .section-heading>p {
            max-width: 420px;
            color: #657477;
            margin: 0
        }

        .service-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px
        }

        .service-card {
            background: var(--cream);
            display: flex;
            flex-direction: column;
            min-height: 470px;
            border: 1px solid #edf0ee;
            transition: transform .2s, box-shadow .2s
        }

        .service-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 14px 30px rgba(16, 54, 64, .09)
        }

        .service-card.wide {
            grid-column: span 2
        }

        .service-image {
            height: 245px;
            overflow: hidden
        }

        .service-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .5s
        }

        .service-card:hover .service-image img {
            transform: scale(1.035)
        }

        .service-card>div:last-child {
            padding: 22px 22px 25px
        }

        .service-card small {
            font-size: 11px;
            color: var(--teal);
            font-weight: 700
        }

        .service-card h3 {
            font-family: Georgia, "Times New Roman", serif;
            font-size: 26px;
            font-weight: 400;
            color: var(--navy);
            margin: 6px 0 8px
        }

        .service-card p {
            font-size: 13px;
            color: #68777b;
            margin: 0 0 20px
        }

        .service-card span {
            font-size: 12px;
            font-weight: 700;
            color: var(--navy)
        }

        .split-band {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            min-height: 560px;
            background: var(--navy);
            color: #fff
        }

        .split-photo {
            background: url("../images/13.webp") center/cover
        }

        .split-copy {
            padding: 90px 9vw 90px 75px;
            display: flex;
            justify-content: center;
            flex-direction: column
        }

        .split-copy h2 {
            color: #fff;
            max-width: 540px
        }

        .split-copy p:not(.eyebrow) {
            max-width: 510px;
            color: #c5d3d5;
            font-size: 16px
        }

        .states {
            display: flex;
            gap: 9px;
            margin-top: 20px
        }

        .states span {
            display: grid;
            place-items: center;
            width: 54px;
            height: 54px;
            border: 1px solid rgba(255, 255, 255, .35);
            font-size: 13px;
            font-weight: 700
        }

        .quote-section {
            padding: 105px 0;
            background: var(--cream)
        }

        .quote-grid {
            display: grid;
            grid-template-columns: 1fr .8fr;
            gap: 100px
        }

        .quote-grid h2 {
            max-width: 500px;
            margin-bottom: 20px
        }

        .quote-grid>div>p:not(.eyebrow) {
            color: #667578;
            max-width: 520px
        }

        .contact-details {
            display: flex;
            flex-direction: column;
            gap: 7px;
            margin-top: 30px;
            font-size: 14px;
            color: #42565c
        }

        .contact-details strong {
            font-size: 24px;
            color: var(--navy);
            font-weight: 500
        }

        .quote-form {
            background: #fff;
            border: 1px solid #e5e9e8;
            padding: 30px
        }

        .quote-form label {
            display: block;
            font-size: 12px;
            font-weight: 700;
            color: var(--navy);
            margin-bottom: 15px
        }

        .quote-form input,
        .quote-form textarea {
            width: 100%;
            margin-top: 7px;
            border: 1px solid #d7dfdf;
            padding: 12px 13px;
            font: inherit;
            font-size: 14px;
            background: #fff;
            outline: 0
        }

        .quote-form input:focus,
        .quote-form textarea:focus {
            border-color: var(--teal)
        }

        .quote-form .button {
            border: 0;
            margin-top: 2px
        }

        .form-note {
            display: block;
            color: var(--teal);
            margin-top: 12px
        }

        .footer {
            background: #0d2f3b;
            color: #d6e1e2;
            padding: 65px 0 20px
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.6fr .8fr .8fr 1fr;
            gap: 45px;
            padding-bottom: 55px
        }

        .footer-brand img {
            width: 125px;
            height: 110px;
            object-fit: contain;
            background: #fff;
            border-radius: 2px;
            margin-bottom: 13px
        }

        .footer-brand p {
            max-width: 310px;
            color: #9eb2b5;
            font-size: 13px
        }

        .footer h4 {
            color: #fff;
            font-size: 12px;
            letter-spacing: .12em;
            text-transform: uppercase;
            margin: 0 0 16px
        }

        .footer-grid>div:not(.footer-brand) a,
        .footer-grid>div:not(.footer-brand) span {
            display: block;
            color: #a9bec1;
            font-size: 13px;
            margin: 0 0 8px
        }

        .footer-grid a:hover {
            color: #fff
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, .12);
            padding-top: 18px;
            display: flex;
            justify-content: space-between;
            color: #82999d;
            font-size: 11px
        }

        @media(max-width:900px) {
            .utility-inner {
                justify-content: center
            }

            .utility-inner>span {
                display: none
            }

            .utility-right {
                width: 100%;
                justify-content: center
            }

            .nav-links {
                display: none;
                position: absolute;
                left: 0;
                right: 0;
                top: 82px;
                background: #fff;
                padding: 10px 22px 24px;
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                border-bottom: 1px solid #ddd
            }

            .nav-links.open {
                display: flex
            }

            .nav-links>a {
                padding: 13px 0
            }

            .nav-links>a:not(.nav-cta):after {
                bottom: 7px
            }

            .nav-cta {
                text-align: center;
                margin-top: 8px
            }

            .menu-toggle {
                display: block
            }

            .hero {
                height: 650px
            }

            .hero-meta-inner {
                grid-template-columns: 1fr
            }

            .hero-meta-inner>div {
                padding: 11px 18px;
                border-right: 0;
                border-bottom: 1px solid rgba(255, 255, 255, .12)
            }

            .hero-meta-inner>div:last-child {
                display: none
            }

            .slide {
                flex-basis: calc((100% - 18px)/2)
            }

            .intro-grid,
            .quote-grid {
                grid-template-columns: 1fr;
                gap: 50px
            }

            .intro-photo img {
                height: 450px
            }

            .service-grid {
                grid-template-columns: repeat(2, 1fr)
            }

            .service-card.wide {
                grid-column: span 2
            }

            .split-band {
                grid-template-columns: 1fr
            }

            .split-photo {
                min-height: 390px
            }

            .split-copy {
                padding: 70px 30px
            }

            .footer-grid {
                grid-template-columns: repeat(2, 1fr)
            }
        }

        @media(max-width:600px) {
            .wrap {
                width: min(100% - 30px, 1180px)
            }

            .utility-right>a:nth-child(3),
            .utility-right .dot {
                display: none
            }

            .nav {
                height: 74px
            }

            .nav-links {
                top: 74px
            }

            .brand {
                width: 85px;
                height: 65px
            }

            .hero {
                height: 720px;
                min-height: 720px
            }

            .hero-bg {
                background-position: 62% center
            }

            .hero-copy {
                padding-bottom: 90px
            }

            .hero h1 {
                font-size: 47px
            }

            .hero-lede {
                font-size: 16px
            }

            .hero-meta-inner>div {
                display: none
            }

            .hero-meta-inner>div:first-child {
                display: block
            }

            .carousel-section,
            .services-section,
            .quote-section {
                padding: 65px 0
            }

            .intro {
                padding: 70px 0
            }

            .carousel-top {
                align-items: start
            }

            .carousel-controls {
                margin-top: 3px
            }

            .carousel-btn {
                width: 40px;
                height: 40px
            }

            .slide {
                flex-basis: 100%;
                height: 390px
            }

            .intro-photo img {
                height: 390px
            }

            .section-heading {
                display: block
            }

            .section-heading>p {
                margin-top: 15px
            }

            .service-grid {
                grid-template-columns: 1fr
            }

            .service-card.wide {
                grid-column: auto
            }

            .service-card {
                min-height: 0
            }

            .service-image {
                height: 240px
            }

            .quote-grid {
                gap: 35px
            }

            .quote-form {
                padding: 22px
            }

            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 30px 20px
            }

            .footer-brand {
                grid-column: span 2
            }

            .footer-bottom {
                display: block
            }

            .footer-bottom span {
                display: block;
                margin-bottom: 5px
            }
        }

        .social-icon {
            display: grid !important;
            place-items: center
        }

        .social-icon svg {
            width: 12px;
            height: 12px;
            fill: currentColor;
            stroke: currentColor;
            stroke-width: 1.7
        }

        .social-icon svg rect,
        .social-icon svg circle {
            fill: none
        }

        .social-icon svg .fill-dot {
            fill: currentColor;
            stroke: none
        }

        .comprehensive-form {
            padding: 0 !important;
            background: #fff;
            border: 1px solid #dfe7e7 !important
        }

        .form-intro {
            padding: 28px 30px 22px;
            border-bottom: 1px solid #e5eaea
        }

        .form-intro strong {
            display: block;
            color: var(--navy);
            font-family: Georgia, "Times New Roman", serif;
            font-size: 27px;
            font-weight: 400
        }

        .form-intro span {
            display: block;
            color: #718084;
            font-size: 13px;
            margin-top: 5px
        }

        .form-section {
            padding: 24px 30px;
            border-bottom: 1px solid #e5eaea
        }

        .form-section h3 {
            font-size: 13px;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--navy);
            margin: 0 0 18px
        }

        .form-row {
            display: grid;
            gap: 14px
        }

        .form-row.two {
            grid-template-columns: 1fr 1fr
        }

        .form-row.three {
            grid-template-columns: 1fr 1fr 1.2fr
        }

        .comprehensive-form label {
            display: block;
            font-size: 11px;
            font-weight: 700;
            color: #294851;
            margin-bottom: 13px
        }

        .comprehensive-form input,
        .comprehensive-form select,
        .comprehensive-form textarea {
            width: 100%;
            margin-top: 6px;
            border: 1px solid #d4dede;
            padding: 11px 12px;
            font: inherit;
            font-size: 13px;
            color: var(--ink);
            background: #fff;
            border-radius: 2px;
            outline: 0
        }

        .comprehensive-form input:focus,
        .comprehensive-form select:focus,
        .comprehensive-form textarea:focus {
            border-color: var(--teal);
            box-shadow: 0 0 0 2px rgba(47, 143, 157, .08)
        }

        .check-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px
        }

        .check-grid label,
        .form-consent label {
            font-weight: 500;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 9px;
            margin: 0
        }

        .check-grid input[type=checkbox],
        .form-consent input[type=checkbox] {
            width: 16px;
            height: 16px;
            margin: 0;
            accent-color: var(--teal)
        }

        .comprehensive-form input[type=file] {
            padding: 9px;
            background: #fafcfc
        }

        .field-help {
            display: block;
            color: #829093;
            font-size: 11px;
            margin-top: -5px
        }

        .form-consent {
            padding: 18px 30px
        }

        .comprehensive-form>.button {
            margin: 0 30px 10px;
            border: 0
        }

        .comprehensive-form>.form-note {
            display: block;
            margin: 0 30px 25px
        }

        .form-intro+.form-section label:last-child {
            margin-bottom: 0
        }

        @media(max-width:700px) {

            .form-row.two,
            .form-row.three,
            .check-grid {
                grid-template-columns: 1fr
            }

            .form-section,
            .form-intro,
            .form-consent {
                padding-left: 20px;
                padding-right: 20px
            }

            .comprehensive-form>.button {
                margin-left: 20px;
                margin-right: 20px
            }

            .comprehensive-form>.form-note {
                margin-left: 20px;
                margin-right: 20px
            }
        }

        /* BEACH FORMAT V5 — residential + commercial visual system */
        .audience-strip {
            background: #f0e9df;
            border-bottom: 1px solid #ddd4c7;
            border-top: 1px solid #e5ddd2
        }

        .audience-inner {
            min-height: 62px;
            display: flex;
            align-items: center;
            gap: 28px;
            overflow: auto;
            white-space: nowrap
        }

        .audience-inner a {
            font-size: 12px;
            font-weight: 700;
            color: var(--navy);
            padding: 4px 0;
            border-bottom: 1px solid transparent
        }

        .audience-inner a:hover {
            border-color: var(--teal)
        }

        .audience-label {
            font-size: 10px;
            letter-spacing: .18em;
            font-weight: 800;
            color: var(--teal)
        }

        .hero .kicker {
            max-width: 600px
        }

        .service-grid {
            grid-template-columns: repeat(3, 1fr)
        }

        .service-card.wide {
            grid-column: auto
        }

        .service-card {
            min-height: 450px
        }

        .service-card h3 {
            min-height: 58px
        }

        .service-card p {
            min-height: 64px
        }

        .split-band {
            grid-template-columns: .95fr 1.05fr
        }

        .split-photo {
            background-position: center
        }

        @media(max-width:900px) {
            .audience-inner {
                gap: 20px
            }

            .service-grid {
                grid-template-columns: repeat(2, 1fr)
            }
        }

        @media(max-width:600px) {
            .audience-inner {
                gap: 18px;
                min-height: 56px
            }

            .audience-inner>div {
                display: none
            }

            .service-grid {
                grid-template-columns: 1fr
            }

            .service-card {
                min-height: 0
            }

            .service-card h3,
            .service-card p {
                min-height: 0
            }
        }



        /* Comprehensive form copied from index(3).html */
        .comprehensive-form {
            padding: 0 !important;
            background: #fff;
            border: 1px solid #dfe7e7 !important
        }

        .form-intro {
            padding: 28px 30px 22px;
            border-bottom: 1px solid #e5eaea
        }

        .form-intro strong {
            display: block;
            color: var(--navy);
            font-family: Georgia, "Times New Roman", serif;
            font-size: 27px;
            font-weight: 400
        }

        .form-intro span {
            display: block;
            color: #718084;
            font-size: 13px;
            margin-top: 5px
        }

        .form-section {
            padding: 24px 30px;
            border-bottom: 1px solid #e5eaea
        }

        .form-section h3 {
            font-size: 13px;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--navy);
            margin: 0 0 18px
        }

        .form-row {
            display: grid;
            gap: 14px
        }

        .form-row.two {
            grid-template-columns: 1fr 1fr
        }

        .form-row.three {
            grid-template-columns: 1fr 1fr 1.2fr
        }

        .comprehensive-form label {
            display: block;
            font-size: 11px;
            font-weight: 700;
            color: #294851;
            margin-bottom: 13px
        }

        .comprehensive-form input,
        .comprehensive-form select,
        .comprehensive-form textarea {
            width: 100%;
            margin-top: 6px;
            border: 1px solid #d4dede;
            padding: 11px 12px;
            font: inherit;
            font-size: 13px;
            color: var(--ink);
            background: #fff;
            border-radius: 2px;
            outline: 0
        }

        .comprehensive-form input:focus,
        .comprehensive-form select:focus,
        .comprehensive-form textarea:focus {
            border-color: var(--teal);
            box-shadow: 0 0 0 2px rgba(47, 143, 157, .08)
        }

        .check-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px
        }

        .check-grid label,
        .form-consent label {
            font-weight: 500;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 9px;
            margin: 0
        }

        .check-grid input[type=checkbox],
        .form-consent input[type=checkbox] {
            width: 16px;
            height: 16px;
            margin: 0;
            accent-color: var(--teal)
        }

        .comprehensive-form input[type=file] {
            padding: 9px;
            background: #fafcfc
        }

        .field-help {
            display: block;
            color: #829093;
            font-size: 11px;
            margin-top: -5px
        }

        .form-consent {
            padding: 18px 30px
        }

        .comprehensive-form>.button {
            margin: 0 30px 10px;
            border: 0
        }

        .comprehensive-form>.form-note {
            display: block;
            margin: 0 30px 25px
        }

        .form-intro+.form-section label:last-child {
            margin-bottom: 0
        }

        @media(max-width:700px) {

            .form-row.two,
            .form-row.three,
            .check-grid {
                grid-template-columns: 1fr
            }

            .form-section,
            .form-intro,
            .form-consent {
                padding-left: 20px;
                padding-right: 20px
            }

            .comprehensive-form>.button {
                margin-left: 20px;
                margin-right: 20px
            }

            .comprehensive-form>.form-note {
                margin-left: 20px;
                margin-right: 20px
            }
        }

        /* BEACH FORMAT V5 — residential + commercial visual system */
        .audience-strip {
            background: #f0e9df;
            border-bottom: 1px solid #ddd4c7;
            border-top: 1px solid #e5ddd2
        }

        .audience-inner {
            min-height: 62px;
            display: flex;
            align-items: center;
            gap: 28px;
            overflow: auto;
            white-space: nowrap
        }

        .audience-inner a {
            font-size: 12px;
            font-weight: 700;
            color: var(--navy);
            padding: 4px 0;
            border-bottom: 1px solid transparent
        }

        .audience-inner a:hover {
            border-color: var(--teal)
        }

        .audience-label {
            font-size: 10px;
            letter-spacing: .18em;
            font-weight: 800;
            color: var(--teal)
        }

        .hero .kicker {
            max-width: 600px
        }

        .service-grid {
            grid-template-columns: repeat(3, 1fr)
        }

        .service-card.wide {
            grid-column: auto
        }

        .service-card {
            min-height: 450px
        }

        .service-card h3 {
            min-height: 58px
        }

        .service-card p {
            min-height: 64px
        }

        .split-band {
            grid-template-columns: .95fr 1.05fr
        }

        .split-photo {
            background-position: center
        }

        @media(max-width:900px) {
            .audience-inner {
                gap: 20px
            }

            .service-grid {
                grid-template-columns: repeat(2, 1fr)
            }
        }

        @media(max-width:600px) {
            .audience-inner {
                gap: 18px;
                min-height: 56px
            }

            .audience-inner>div {
                display: none
            }

            .service-grid {
                grid-template-columns: 1fr
            }

            .service-card {
                min-height: 0
            }

            .service-card h3,
            .service-card p {
                min-height: 0
            }
        }
    

/* Services page components */

        .page-intro {
            padding: 92px 0;
            background: var(--cream, #FAF8F3)
        }

        .intro-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 64px;
            align-items: start
        }

        .intro-grid h2 {
            max-width: 650px
        }

        .intro-grid>div:last-child {
            font-size: 17px;
            line-height: 1.8;
            color: var(--muted, #5c6b70)
        }

        .intro-grid p {
            margin: 0 0 18px
        }

        .service-list {
            display: grid;
            gap: 0;
            border-top: 1px solid var(--line, #d7e1e2)
        }

        .service-item {
            display: grid;
            grid-template-columns: 70px minmax(0, 1fr) minmax(320px, 44%);
            gap: 36px;
            align-items: center;
            padding: 42px 0;
            border-bottom: 1px solid var(--line, #d7e1e2)
        }

        .service-number {
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .12em;
            color: var(--teal, #2F8F9D);
            align-self: start;
            padding-top: 5px
        }

        .service-copy h2 {
            margin: 0 0 12px;
            font-size: clamp(27px, 3vw, 40px);
            line-height: 1.08
        }

        .service-copy p {
            margin: 0 0 18px;
            max-width: 650px;
            color: var(--muted, #5c6b70);
            line-height: 1.7
        }

        .service-link {
            display: inline-block;
            color: var(--navy, #123B4A);
            font-weight: 700;
            text-decoration: none;
            border-bottom: 1px solid currentColor;
            padding-bottom: 3px
        }

        .service-photo {
            height: 300px;
            overflow: hidden
        }

        .service-photo img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover
        }

        .area-band {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            min-height: 520px;
            background: var(--navy, #123B4A)
        }

        .area-photo {
            min-height: 520px;
            background: url('../images/6.webp') center/cover no-repeat
        }

        .area-copy {
            padding: 80px clamp(32px, 7vw, 100px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: #fff
        }

        .area-copy h2 {
            max-width: 600px;
            margin: 0 0 18px
        }

        .area-copy>p:not(.eyebrow) {
            max-width: 600px;
            line-height: 1.75;
            color: rgba(255, 255, 255, .78)
        }

        .states {
            display: flex;
            gap: 12px;
            margin-top: 22px
        }

        .states span {
            font-weight: 800;
            letter-spacing: .12em;
            border: 1px solid rgba(255, 255, 255, .35);
            padding: 11px 18px
        }

        .cta-section {
            padding: 100px 0;
            background: var(--cream, #FAF8F3)
        }

        .cta-grid {
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            gap: 70px;
            align-items: start
        }

        .cta-copy h2 {
            max-width: 560px
        }

        .cta-copy>p:not(.eyebrow) {
            max-width: 540px;
            color: var(--muted, #5c6b70);
            line-height: 1.75
        }

        .contact-details {
            display: grid;
            gap: 8px;
            margin-top: 28px
        }

        .contact-details a {
            color: var(--navy, #123B4A);
            text-decoration: none
        }

        .contact-details span {
            color: var(--muted, #5c6b70);
            line-height: 1.5
        }

        .contact-form {
            display: grid;
            gap: 16px;
            background: #fff;
            padding: 34px;
            border: 1px solid var(--line, #d7e1e2)
        }

        .contact-form label {
            display: grid;
            gap: 7px;
            font-size: 13px;
            font-weight: 700;
            color: var(--navy, #123B4A)
        }

        .contact-form input,
        .contact-form select,
        .contact-form textarea {
            width: 100%;
            box-sizing: border-box;
            border: 1px solid #cbd8da;
            background: #fff;
            padding: 13px 14px;
            font: inherit;
            color: var(--navy, #123B4A);
            border-radius: 0
        }

        .contact-form textarea {
            resize: vertical
        }

        @media(max-width:900px) {

            .intro-grid,
            .cta-grid,
            .area-band {
                grid-template-columns: 1fr
            }

            .service-item {
                grid-template-columns: 45px 1fr
            }

            .service-photo {
                grid-column: 2;
                height: 260px
            }

            .area-photo {
                min-height: 360px
            }
        }

        @media(max-width:620px) {

            .page-intro,
            .cta-section {
                padding: 68px 0
            }

            .intro-grid {
                gap: 30px
            }

            .service-item {
                grid-template-columns: 1fr;
                gap: 14px;
                padding: 32px 0
            }

            .service-number {
                padding: 0
            }

            .service-photo {
                grid-column: auto;
                height: 230px
            }

            .area-copy {
                padding: 60px 24px
            }

            .contact-form {
                padding: 22px
            }
        }

/* Projects page */
.projects-hero {
    min-height: 470px;
    display: flex;
    align-items: center;
    color: #fff;
    background: linear-gradient(90deg, rgba(8, 31, 39, .88), rgba(8, 31, 39, .35)), url("../images/12.webp") center 55%/cover;
}
.projects-hero-inner { padding-top: 45px; padding-bottom: 65px; }
.projects-hero .kicker { color: #a9e3e5; }
.projects-hero h1 {
    max-width: 720px;
    margin: 0 0 20px;
    font: 400 clamp(44px, 6vw, 72px)/1 Georgia, "Times New Roman", serif;
    letter-spacing: -.035em;
}
.projects-hero-inner > p:not(.kicker) { max-width: 570px; margin: 0 0 28px; color: #edf4f4; font-size: 17px; }
.projects-gallery { padding: 90px 0 105px; background: var(--cream, #FAF8F3); }
.projects-gallery .section-heading { margin-bottom: 34px; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.project-card { position: relative; min-height: 340px; overflow: hidden; background: #d8e0df; }
.project-card-featured { grid-column: span 2; }
.project-card::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(8, 30, 38, .88)); }
.project-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.project-card:hover img { transform: scale(1.035); }
.project-caption { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 25px; color: #fff; }
.project-caption > span { color: #a9e3e5; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.project-caption h3 { margin: 7px 0 4px; font: 400 27px Georgia, "Times New Roman", serif; }
.project-caption p { margin: 0; color: #e2ebeb; font-size: 13px; }
.projects-cta { padding: 75px 0; background: #fff; }
.projects-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.projects-cta h2 { margin: 0 0 12px; color: var(--navy, #123B4A); font: 400 clamp(34px, 4vw, 46px)/1.08 Georgia, "Times New Roman", serif; }
.projects-cta p:not(.eyebrow) { margin: 0; color: #657477; }
@media(max-width:900px) {
    .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .project-card-featured { grid-column: auto; }
}
@media(max-width:600px) {
    .projects-hero { min-height: 430px; }
    .projects-gallery { padding: 65px 0; }
    .project-grid { grid-template-columns: 1fr; }
    .project-card { min-height: 330px; }
    .projects-cta { padding: 60px 0; }
    .projects-cta-inner { align-items: flex-start; flex-direction: column; }
}

/* About page */
.about-hero {
    min-height: 455px;
    display: flex;
    align-items: center;
    color: #fff;
    background: linear-gradient(90deg, rgba(8, 31, 39, .88), rgba(8, 31, 39, .38)), url("../images/12.webp") center 55%/cover;
}
.about-hero-inner { padding-top: 45px; padding-bottom: 55px; }
.about-hero .kicker { color: #a9e3e5; }
.about-hero h1 { max-width: 790px; margin: 0 0 20px; font: 400 clamp(44px, 6vw, 72px)/1 Georgia, "Times New Roman", serif; letter-spacing: -.035em; }
.about-hero-inner > p:not(.kicker) { max-width: 570px; margin: 0; color: #edf4f4; font-size: 17px; }
.about-story { padding: 100px 0; background: var(--cream, #FAF8F3); }
.about-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.about-story-photo img { width: 100%; height: 570px; object-fit: cover; }
.about-story-copy { max-width: 550px; }
.about-story-copy h2, .about-contact h2 { margin: 0 0 22px; color: var(--navy, #123B4A); font: 400 clamp(34px, 4vw, 48px)/1.06 Georgia, "Times New Roman", serif; }
.about-story-copy p:not(.eyebrow) { color: #5f6f73; font-size: 15px; }
.about-services { padding: 90px 0 100px; background: #fff; }
.about-service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.about-service-grid article { padding: 25px 22px; background: var(--cream, #FAF8F3); border: 1px solid #edf0ee; }
.about-service-grid article > span { color: var(--teal, #2F8F9D); font-size: 12px; font-weight: 700; }
.about-service-grid h3 { margin: 18px 0 10px; color: var(--navy, #123B4A); font: 400 23px/1.15 Georgia, "Times New Roman", serif; }
.about-service-grid p { margin: 0; color: #68777b; font-size: 13px; }
.about-contact { padding: 90px 0; background: var(--cream, #FAF8F3); }
.about-contact-grid { display: grid; grid-template-columns: 1fr .8fr; gap: 100px; align-items: center; }
.about-contact-grid > div > p:not(.eyebrow) { max-width: 480px; margin: 0 0 25px; color: #657477; }
.about-contact address { display: flex; flex-direction: column; gap: 10px; padding: 32px; background: #fff; border: 1px solid #e5e9e8; color: #42565c; font-style: normal; font-size: 14px; overflow-wrap: anywhere; }
.about-contact address strong { margin-bottom: 6px; color: var(--navy, #123B4A); font: 400 25px Georgia, "Times New Roman", serif; }
.about-contact address a { color: var(--navy, #123B4A); }
@media(max-width:900px) {
    .about-story-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .about-story-photo img { height: 500px; }
    .about-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-contact-grid { gap: 45px; }
}
@media(max-width:600px) {
    .about-hero { min-height: 420px; }
    .about-story, .about-services, .about-contact { padding: 65px 0; }
    .about-story-grid, .about-contact-grid { grid-template-columns: 1fr; gap: 32px; }
    .about-story-photo img { height: 360px; }
    .about-service-grid { grid-template-columns: 1fr; }
    .about-contact address { padding: 24px; }
}

/* Service area page */
.form-trap { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.legal-page .page-intro > .wrap { max-width: 850px; }
.legal-page .page-intro h2 { margin: 34px 0 10px; color: var(--navy, #123B4A); font: 400 clamp(25px, 3vw, 34px)/1.15 Georgia, "Times New Roman", serif; }
.legal-page .page-intro p { max-width: 820px; color: #5f6f73; }
.legal-page .page-intro a { color: var(--navy, #123B4A); text-decoration: underline; text-underline-offset: 3px; }
.legal-page .page-intro a:hover { color: var(--teal, #2F8F9D); }
.service-area-hero {
    min-height: 430px;
    display: flex;
    align-items: center;
    color: #fff;
    background: linear-gradient(90deg, rgba(8, 31, 39, .88), rgba(8, 31, 39, .38)), url("../images/8.webp") center 52%/cover;
}
.service-area-hero-inner { padding-top: 45px; padding-bottom: 55px; }
.service-area-hero .kicker { color: #a9e3e5; }
.service-area-hero h1 { max-width: 760px; margin: 0 0 20px; font: 400 clamp(44px, 6vw, 72px)/1 Georgia, "Times New Roman", serif; letter-spacing: -.035em; }
.service-area-hero-inner > p:not(.kicker) { max-width: 630px; margin: 0; color: #edf4f4; font-size: 17px; }
.service-area-intro { padding: 80px 0; background: var(--cream, #FAF8F3); }
.service-area-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.service-area-intro h2, .service-area-contact h2 { margin: 0; color: var(--navy, #123B4A); font: 400 clamp(34px, 4vw, 48px)/1.06 Georgia, "Times New Roman", serif; }
.service-area-intro-grid > div:last-child p { margin: 0 0 15px; color: #5f6f73; font-size: 15px; }
.service-area-states { padding: 85px 0 100px; background: #fff; }
.state-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.state-cards article { display: flex; align-items: center; gap: 28px; min-height: 230px; padding: 32px; background: var(--cream, #FAF8F3); border: 1px solid #edf0ee; }
.state-cards article > span { display: grid; flex: 0 0 76px; width: 76px; height: 76px; place-items: center; border: 1px solid #a9bec1; color: var(--navy, #123B4A); font-size: 21px; font-weight: 700; }
.state-cards .eyebrow { margin-bottom: 8px; }
.state-cards h3 { margin: 0 0 8px; color: var(--navy, #123B4A); font: 400 25px Georgia, "Times New Roman", serif; }
.state-cards article p:last-child { margin: 0; color: #68777b; font-size: 13px; }
.service-area-contact { padding: 85px 0; background: var(--cream, #FAF8F3); }
.service-area-contact-inner { display: grid; grid-template-columns: 1fr .8fr; gap: 80px; align-items: center; }
.service-area-contact-inner > div:first-child > p:not(.eyebrow) { max-width: 470px; color: #657477; }
.service-area-contact-details { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 32px; background: #fff; border: 1px solid #e5e9e8; color: #42565c; font-size: 14px; overflow-wrap: anywhere; }
.service-area-contact-details .service-area-phone { color: var(--navy, #123B4A); font-size: 26px; font-weight: 600; }
.service-area-contact-details > span { line-height: 1.6; }
.service-area-contact-details .button { margin-top: 8px; color: #fff; }
@media(max-width:900px) {
    .service-area-intro-grid, .service-area-contact-inner { gap: 42px; }
    .state-cards article { align-items: flex-start; flex-direction: column; gap: 18px; }
}
@media(max-width:600px) {
    .service-area-hero { min-height: 400px; }
    .service-area-intro, .service-area-states, .service-area-contact { padding: 65px 0; }
    .service-area-intro-grid, .service-area-contact-inner, .state-cards { grid-template-columns: 1fr; gap: 30px; }
    .state-cards article { flex-direction: row; padding: 24px; }
    .state-cards article > span { flex-basis: 58px; width: 58px; height: 58px; }
    .service-area-contact-details { padding: 24px; }
}

/* About page experience and certification badges */
.credentials-section { padding: 82px 0 92px; background: var(--navy, #123B4A); color: #fff; }
.credentials-heading { max-width: 650px; margin-bottom: 36px; }
.credentials-heading .eyebrow { color: #a9e3e5; }
.credentials-heading h2 { margin: 0 0 14px; font: 400 clamp(34px, 4vw, 48px)/1.06 Georgia, "Times New Roman", serif; }
.credentials-heading > p:last-child { max-width: 560px; margin: 0; color: #c5d3d5; }
.credentials-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.credential-card { min-height: 265px; padding: 24px 21px; background: #fff; color: var(--ink, #17343E); border: 1px solid rgba(255, 255, 255, .22); }
.credential-badge { display: flex; width: 76px; height: 76px; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 20px; border: 2px solid var(--teal, #2F8F9D); border-radius: 50%; color: var(--navy, #123B4A); }
.credential-badge strong { font-size: 21px; line-height: 1; }
.credential-badge small { margin-top: 4px; font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.credential-mark { position: relative; display: block; width: 130px; height: 106px; overflow: visible; margin-bottom: 20px; }
.credential-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.credential-card h3 { margin: 0 0 9px; color: var(--navy, #123B4A); font: 400 21px/1.15 Georgia, "Times New Roman", serif; }
.credential-card h3 sup { font: 700 9px Arial, Helvetica, sans-serif; }
.credential-card p { margin: 0; color: #68777b; font-size: 12px; }
@media(max-width:900px) { .credentials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width:600px) { .credentials-section { padding: 65px 0; } .credentials-grid { grid-template-columns: 1fr; } .credential-card { min-height: 0; } }
    

/* Gentle photo finishing keeps the source imagery natural while it is framed for the layout. */
.slide img, .service-image img, .service-photo img, .project-card img, .about-story-photo img { filter: saturate(1.07) contrast(1.035); }

/* Distinct local photos for each page; subtle finishing keeps the source work authentic. */
body.home-page .hero-bg { background-image: url("../images/19.webp"); background-position: center 54%; }
body.services-page .hero-bg { background-image: url("../images/17.webp"); background-position: center 52%; }
body.home-page .split-photo { background-image: url("../images/18.webp"); background-position: center 55%; background-size: cover; }
body.projects-page .projects-hero { background-image: linear-gradient(90deg, rgba(8, 31, 39, .82), rgba(8, 31, 39, .22)), url("../images/19.webp"); background-position: center 50%; background-size: cover; }
body.about-page .about-hero { background-image: linear-gradient(90deg, rgba(8, 31, 39, .86), rgba(8, 31, 39, .30)), url("../images/7.webp"); background-position: center 48%; background-size: cover; }
body.service-area-page .service-area-hero { background-image: linear-gradient(90deg, rgba(8, 31, 39, .87), rgba(8, 31, 39, .3)), url("../images/11.webp"); background-position: center 53%; background-size: cover; }
.slide img[src$="16.webp"], .project-card img[src$="16.webp"] { object-position: center 50%; transform: scale(1.65); }
.intro-photo img { filter: saturate(1.07) contrast(1.035); }