@charset "utf-8";
/* CSS Document */

/* Bricolage Grotesque Variable */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/BricolageGrotesque-VariableFont_opsz,wght.woff2') format('woff2-variations'),
       url('../fonts/BricolageGrotesque-VariableFont_opsz,wght.woff2') format('woff2');
  font-weight: 12 96; /* Supports your 500, 600, 700 weights */
  font-style: normal;
  font-display: swap; /* Prevents text from being invisible while loading */
}

/* Inter Variable */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2-variations'),
       url('../fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2');
  font-weight: 100 900; /* Supports your 400, 500, 600, 700 weights */
  font-style: normal;
  font-display: swap;
}

  :root{
    --ink: #12202B;
    --ink-soft: #40515C;
    --paper: #EDF0EF;
    --card: #FFFFFF;
    --water: #1D7A8C;
    --water-deep: #145A68;
    --brick: #AE4E2C;
    --brick-deep: #8C3D22;
    --stone: #6E7A75;
    --line: #D7DCD9;
    --radius: 14px;
    --shadow: 0 20px 40px -20px rgba(18, 32, 43, 0.35);
    --font-head: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  }

  *, *::before, *::after{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  img{ max-width: 100%; display: block; }
  a{ color: inherit; text-decoration: none; }
  ul{ margin: 0; padding: 0; list-style: none; }
  h1, h2, h3{ font-family: var(--font-head); color: var(--ink); line-height: 1.15; margin: 0; }
  p{ margin: 0 0 1em; color: var(--ink-soft); max-width: 62ch; }
  .visually-hidden{
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
  }
  :focus-visible{ outline: 3px solid var(--water); outline-offset: 3px; }

  .wrap{
    width: min(1180px, 92%);
    margin: 0 auto;
  }
  .eyebrow{
    display: inline-block;
    font-weight: 600;
    color: var(--water-deep);
    margin-bottom: 0.6em;
  }
  .btn{
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.85em 1.6em;
    border-radius: 999px;
    font-weight: 600;
    font-family: var(--font-body);
    font-size: 0.98rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    border: 2px solid transparent;
  }
  .btn-primary{
    background: var(--brick);
    color: #fff;
    box-shadow: 0 10px 24px -10px rgba(174,78,44,0.65);
  }
  .btn-primary:hover{ background: var(--brick-deep); transform: translateY(-2px); }
  .btn-ghost{
    border-color: var(--line);
    color: var(--ink);
  }
  .btn-ghost:hover{ border-color: var(--water); color: var(--water-deep); }

  /* HEADER */
  header.site{
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .header-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.9rem 0;
	  
  }
  .logo img{ height: 72px; width: auto; }
  nav.primary-nav{ display: flex; }
  nav.primary-nav ul{
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.2rem;
    align-items: center;
  }
  nav.primary-nav a{
    display: inline-block;
    padding: 0.5em 0.75em;
    border-radius: 8px;
    font-size: 0.93rem;
    font-weight: 500;
    color: var(--ink-soft);
    transition: background 0.15s ease, color 0.15s ease;
  }
  nav.primary-nav a:hover,
  nav.primary-nav a.active{
    background: rgba(29,122,140,0.12);
    color: var(--water-deep);
  }
  .header-actions{ display: flex; align-items: center; gap: 1rem; }
  .header-phone{
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    display: none;
  }
  .nav-toggle{ display: none; }
  .nav-toggle-label{
    display: none;
    width: 42px; height: 42px;
    border-radius: 10px;
    border: 1px solid var(--line);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }
  .nav-toggle-label span,
  .nav-toggle-label span::before,
  .nav-toggle-label span::after{
    display: block;
    width: 20px; height: 2px;
    background: var(--ink);
    position: relative;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .nav-toggle-label span::before,
  .nav-toggle-label span::after{ content: ""; position: absolute; }
  .nav-toggle-label span::before{ top: -6px; }
  .nav-toggle-label span::after{ top: 6px; }

  @media (max-width: 900px){
    nav.primary-nav{
      position: fixed;
      inset: 0 0 0 auto;
      width: min(320px, 82vw);
      height: 100vh;
      background: var(--ink);
      padding: 5.5rem 1.75rem 2rem;
      transform: translateX(100%);
      transition: transform 0.28s ease;
      box-shadow: -20px 0 40px rgba(0,0,0,0.25);
    }
    nav.primary-nav ul{ flex-direction: column; align-items: stretch; gap: 0.2rem; }
    nav.primary-nav a{ color: #DDE6E4; padding: 0.7em 0.5em; font-size: 1.02rem; }
    nav.primary-nav a:hover, nav.primary-nav a.active{ background: rgba(255,255,255,0.08); color: #fff; }
    .nav-toggle-label{ display: flex; }
    .nav-toggle:checked ~ nav.primary-nav{ transform: translateX(0); }
    .nav-toggle:checked ~ .nav-toggle-label span{ background: transparent; }
    .nav-toggle:checked ~ .nav-toggle-label span::before{ transform: rotate(45deg); top: 0; }
    .nav-toggle:checked ~ .nav-toggle-label span::after{ transform: rotate(-45deg); top: 0; }
  }
  @media (min-width: 640px){ .header-phone{ display: inline-block; } }

  /* HERO */
  .hero{
    padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem);
    background:
      radial-gradient(circle at 85% 12%, rgba(29,122,140,0.16), transparent 55%),
      radial-gradient(circle at 8% 90%, rgba(174,78,44,0.10), transparent 45%);
  }
  .hero-grid{
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }
  .hero h1{
    font-size: clamp(2.1rem, 4.4vw, 3.3rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 0.5em;
  }
  .hero-lede{
    font-size: 1.1rem;
    max-width: 46ch;
  }
  .hero-actions{ display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.6rem; }
  .hero-note{
    margin-top: 1.6rem;
    font-size: 0.92rem;
    color: var(--stone);
    max-width: 46ch;
  }
  .hero-visual{
    position: relative;
    height: clamp(320px, 34vw, 420px);
  }
  .hero-visual img{
    position: absolute;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 6px solid var(--card);
  }
  .hero-visual .v1{ width: 66%; height: 72%; top: 0; left: 0; z-index: 2; }
  .hero-visual .v2{ width: 54%; height: 56%; bottom: 0; right: 0; z-index: 3; transform: rotate(2deg); }
  .hero-visual .v3{ width: 40%; height: 40%; top: 8%; right: 6%; z-index: 1; transform: rotate(-4deg); opacity: 0.95; }

  @media (max-width: 860px){
    .hero-grid{ grid-template-columns: 1fr; }
    .hero-visual{ height: 280px; margin-top: 1rem; }
  }

  /* TRUST BAR */
  .trust{
    background: var(--ink);
    color: #E7ECEA;
    padding: 1.4rem 0;
  }
  .trust .wrap{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
  }
  .trust p{ color: #C6D2CF; margin: 0; font-size: 0.98rem; }
  .trust img{ height: 40px; width: auto; border-radius: 6px; background: #fff; padding: 3px; }

  /* SECTION HEADINGS */
  .section{ padding: clamp(3rem, 6vw, 5.5rem) 0; }
  .section h2{
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 600;
    margin-bottom: 0.5em;
  }
  .section-head{ max-width: 62ch; margin-bottom: 2.4rem; }

  /* SERVICES BENTO */
  .services-grid{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.1rem;
  }
  .service-card{
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .service-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
  .service-card img{ width: 100%; height: 150px; object-fit: cover; }
  .service-card .body{ padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
  .service-card h3{ font-size: 1.08rem; margin-bottom: 0.4em; }
  .service-card p{ font-size: 0.94rem; margin-bottom: 0.9em; }
  .service-card .more{ margin-top: auto; font-weight: 600; color: var(--water-deep); font-size: 0.92rem; }
  .service-card .more:hover{ color: var(--brick); }

  .service-card.wide{ grid-column: span 3; }
  .service-card.narrow{ grid-column: span 2; }
  @media (max-width: 980px){
    .services-grid{ grid-template-columns: repeat(2, 1fr); }
    .service-card.wide, .service-card.narrow{ grid-column: span 1; }
  }

  /* WHAT WE OFFER */
  .offer{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  .tick-list{ display: grid; gap: 0.7rem; margin-top: 1.2rem; }
  .tick-list li{
    display: flex;
    align-items: center;
    gap: 0.7em;
    font-weight: 500;
    color: var(--ink);
  }
  .tick-list li::before{
    content: "";
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--water);
    background-image: linear-gradient(135deg, var(--water), var(--water-deep));
    -webkit-mask: none;
  }
  .tick-list li{ position: relative; padding-left: 0; }
  .tick-list li::after{
    content: "";
    position: absolute;
    left: 7px; top: 7px;
    width: 8px; height: 4px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
  }
  @media (max-width: 860px){ .offer{ grid-template-columns: 1fr; } }

  /* TESTIMONIALS */
  .testimonials{ background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .testi-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
  }
  .testi-card{
    background: var(--paper);
    border-radius: var(--radius);
    padding: 1.8rem 1.7rem;
    position: relative;
  }
  .testi-card::before{
    content: "\201C";
    font-family: var(--font-head);
    font-size: 3.4rem;
    color: var(--water);
    opacity: 0.35;
    line-height: 1;
    display: block;
    margin-bottom: 0.2rem;
  }
  .testi-card p{ color: var(--ink-soft); margin-bottom: 1rem; font-size: 0.98rem; }
  .testi-card cite{ font-style: normal; font-weight: 600; color: var(--ink); font-size: 0.92rem; }
  @media (max-width: 860px){ .testi-grid{ grid-template-columns: 1fr; } }

  /* AREAS */
  .areas-panel{
    background: linear-gradient(135deg, var(--water-deep), var(--ink));
    border-radius: 20px;
    padding: clamp(2rem, 5vw, 3.2rem);
    color: #EAF1EF;
  }
  .areas-panel h2{ color: #fff; }
  .areas-panel p{ color: #C6D6D3; }
  .area-tags{ display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }
  .area-tags li{
    padding: 0.5em 1em;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    font-size: 0.9rem;
  }

  /* FOOTER */
  footer.site{
    background: var(--ink);
    color: #AEBCB8;
    padding: 2.4rem 0;
    font-size: 0.9rem;
  }
  footer.site .wrap{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; }
  footer.site a:hover{ color: #fff; }
  footer.site .links{ display: flex; gap: 1.2rem; flex-wrap: wrap; }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  }


  /* PAGE BANNER (inner pages) */
  .page-banner{
    padding: clamp(2.2rem, 5vw, 3.4rem) 0;
    background:
      radial-gradient(circle at 90% 0%, rgba(29,122,140,0.14), transparent 55%),
      radial-gradient(circle at 0% 100%, rgba(174,78,44,0.08), transparent 45%);
    border-bottom: 1px solid var(--line);
  }
  .page-banner h1{
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    font-weight: 600;
    margin-bottom: 0.4em;
  }
  .page-banner p{ font-size: 1.05rem; max-width: 60ch; }
  .page-banner .hero-actions{ display:flex; flex-wrap:wrap; gap:0.8rem; margin-top:1.2rem; }

  /* FEATURE ROW */
  .feature{
    display: grid;
    grid-template-columns: minmax(220px, 340px) 1fr;
    gap: clamp(1.6rem, 4vw, 3rem);
    align-items: start;
    margin-bottom: 2.6rem;
  }
  .feature.reverse{ grid-template-columns: 1fr minmax(220px, 340px); }
  .feature.reverse .feature-media{ order: 2; }
  .feature-media img{
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    border: 6px solid var(--card);
    box-shadow: var(--shadow);
  }
  .feature-body h2{ font-size: 1.5rem; margin-bottom: 0.5em; }
  .feature-body h2:not(:first-child){ margin-top: 1.2em; }
  @media (max-width: 760px){
    .feature, .feature.reverse{ grid-template-columns: 1fr; }
    .feature.reverse .feature-media{ order: 0; }
  }

  /* CALLOUT */
  .callout{
    background: var(--card);
    border-left: 4px solid var(--water);
    border-radius: 10px;
    padding: 1.4rem 1.6rem;
    margin: 1.6rem 0;
    box-shadow: 0 8px 24px -18px rgba(18,32,43,0.4);
  }
  .callout p{ margin-bottom: 0; }
  .callout strong{ color: var(--ink); }

  /* PRICE LIST */
  .price-list{ display: grid; gap: 0.7rem; margin: 1.2rem 0; }
  .price-list li{
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.85em 1.1em;
    font-size: 0.96rem;
  }
  .price-list li .label{ color: var(--ink); font-weight: 600; }
  .price-list li .value{ color: var(--water-deep); font-weight: 600; white-space: nowrap; }

  /* COVERAGE (lighter version for inner pages) */
  .coverage{
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1.6rem, 4vw, 2.4rem);
  }
  .coverage h2{ font-size: 1.3rem; margin-bottom: 0.5em; }
  .tag-list{ display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.2rem; }
  .tag-list li{
    padding: 0.45em 0.95em;
    border-radius: 999px;
    background: rgba(29,122,140,0.09);
    color: var(--water-deep);
    font-size: 0.87rem;
    font-weight: 500;
    border: 1px solid rgba(29,122,140,0.18);
  }

  /* GENERIC CONTENT SECTION */
  .content-section{ padding: clamp(2.6rem, 5vw, 4rem) 0; }
  .content-narrow{ max-width: 760px; }

  /* FAQ ACCORDION */
  .faq-group{ margin-bottom: 2.6rem; }
  .faq-group h2{ font-size: 1.35rem; margin-bottom: 1rem; }
  .faq-item{
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 0.6rem;
    overflow: hidden;
  }
  .faq-item summary{
    cursor: pointer;
    list-style: none;
    padding: 0.95em 1.2em;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .faq-item summary::-webkit-details-marker{ display: none; }
  .faq-item summary::after{
    content: "+";
    font-family: var(--font-head);
    font-size: 1.3rem;
    color: var(--water-deep);
    flex-shrink: 0;
  }
  .faq-item[open] summary::after{ content: "\2212"; }
  .faq-item .faq-answer{ padding: 0 1.2em 1.1em; color: var(--ink-soft); font-size: 0.96rem; }
  .faq-answer p{ margin: 0; }
  .faq-toc{ columns: 2; column-gap: 2rem; margin-bottom: 0.4rem; }
  .faq-toc li{ margin-bottom: 0.35rem; break-inside: avoid; }
  .faq-toc a{ color: var(--water-deep); font-size: 0.94rem; font-weight: 500; }
  .faq-toc a:hover{ color: var(--brick); }
  @media (max-width: 640px){ .faq-toc{ columns: 1; } }

  /* GALLERY */
  .gallery-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin: 1.4rem 0 2.2rem;
  }
  .gallery-grid a.view{
    display: block;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
  }
  .gallery-grid a.view img{
    width: 100%; height: 170px; object-fit: cover;
    transition: transform 0.25s ease;
  }
  .gallery-grid a.view:hover img{ transform: scale(1.04); }
  .gallery-grid a.view:not(:has(img)){ display: none; }

  /* CONTACT */
  .contact-grid{
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(2rem, 5vw, 3.5rem);
  }
  .contact-card{
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.8rem 2rem;
  }
  .contact-card p{ margin-bottom: 0.4em; }
  @media (max-width: 800px){ .contact-grid{ grid-template-columns: 1fr; } }