/* ---------- Base + Variables ---------- */
:root{
  --brand:#0b5e63;           /* deep teal */
  --brand-2:#0c7a80;         /* accent gradient end */
  --brand-3:#0fa3a6;         /* subtle accent for hovers */
  --ink:#111827;             /* text, slightly deeper */
  --ink-2:#374151;           /* secondary text */
  --muted:#6b7280;
  --line:#e5e7eb;
  --bg:#ffffff;
  --bg-soft:#f6fbfc;
  --white:#fff;
  --focus:#ffd166;           /* visible focus ring */
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --shadow-soft:0 6px 18px rgba(0,0,0,.06);
  --shadow-inset:0 8px 18px rgba(0,0,0,.04) inset;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Layout helpers */
.wrap{max-width:1100px;margin:0 auto;padding:clamp(16px,4vw,28px)}
img{max-width:100%;display:block;height:auto}

/* Links & focus */
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;padding:.7rem 1rem;border-radius:999px;
  font-weight:800;text-decoration:none;border:2px solid transparent;
  transition:transform .08s ease,box-shadow .08s ease,background .2s ease,filter .2s ease;
  box-shadow:0 2px 0 rgba(0,0,0,.08)
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-solid{color:#fff;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.btn-solid:hover{filter:brightness(1.06)}
.btn-outline{background:#fff;color:var(--brand);border-color:var(--brand)}
.btn-outline:hover{background:#f1fafa}
.btn-call{font-weight:900;letter-spacing:.2px}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid var(--line)
}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand img{height:88px;width:auto}

/* Primary nav */
.nav{display:flex;gap:18px;align-items:center}
.nav a{font-weight:700;color:var(--ink-2);padding:.45rem .35rem;border-radius:8px}
.nav a:hover{color:var(--ink)}
.nav .btn{margin-left:8px}

/* Mobile nav (button-based) */
.nav-burger{display:none;cursor:pointer;width:46px;height:46px;border-radius:12px;border:1px solid var(--line);align-items:center;justify-content:center;background:#fff}
.nav-burger span, .nav-burger span::before, .nav-burger span::after{
  display:block;position:relative;width:22px;height:2px;background:var(--ink);content:"";
}
.nav-burger span::before{position:absolute;top:-6px}
.nav-burger span::after{position:absolute;top:6px}

/* Typography */
h1,h2,h3,h4{line-height:1.2;margin:0 0 .6rem}
h1{font-size:clamp(1.9rem,4.6vw,3rem);letter-spacing:-.01em}
.h2{font-size:clamp(1.4rem,3.2vw,2rem)}
h3{font-size:clamp(1.05rem,2.4vw,1.25rem)}
.lead{color:var(--ink-2)}

/* Screen-reader helper */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Skip link */
.skip-link{
  position:absolute;left:-9999px;top:0;background:#000;color:#fff;padding:.5rem .75rem;border-radius:0 0 8px 8px
}
.skip-link:focus{left:0;z-index:1000}

/* ---------- Hero ---------- */
.hero{position:relative;color:#fff;min-height:clamp(380px,60vh,640px);overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 24%;z-index:0}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.35))}
.hero-inner{position:relative;z-index:2;text-align:center;padding:clamp(64px,8vw,130px) 0}
.hero-title{color:#fff}
.hero-sub{color:#e6fffe;margin:.35rem 0 0}
.hero-cta{display:flex;gap:12px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.trust-inline{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:.9rem 0 0;padding:0;color:#e6fffe;font-weight:700;opacity:.95}

/* Trust line: prevent bullet overlap */
.trust-inline { list-style: none; padding-left: 0; margin: 0; display: flex; gap: 0; }
.trust-inline li { list-style: none; }
.trust-inline li + li::before { content: "•"; margin: 0 .5rem; opacity: .9; }

/* ---------- Sections ---------- */
.section{padding:clamp(28px,5vw,56px) 0}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}

/* ---------- Services ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.card.pro{display:flex;flex-direction:column;transition:transform .12s ease, box-shadow .12s ease}
.card.pro:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.08)}
.card.pro img{aspect-ratio:16/10;object-fit:cover;border-radius:12px;box-shadow:var(--shadow-soft)}
.card.pro h3{margin:.7rem 0 .25rem}
.card.pro p{color:var(--muted);margin:0}

/* Services (icons) — filled, bolder look */
.card.pro .pro-icon{
  display:grid;place-items:center;width:100%;aspect-ratio:16/10;
  border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(180deg,#ffffff, var(--bg-soft));box-shadow:var(--shadow-inset);
  margin:0 0 .7rem;
}
.card.pro .pro-icon svg{width:84px;height:84px;fill:var(--brand)}
.card.pro .pro-icon-alt svg{fill:var(--brand-2)}
.card.pro .pro-icon-soft{background:linear-gradient(180deg,#fff,#f7fafb)}

/* ---------- Feature band ---------- */
.feature{background:linear-gradient(180deg,#fff, var(--bg-soft));border-block:1px solid var(--line)}
.feature-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.feature-copy .ticks{padding-left:18px;margin:0}
.feature-copy .ticks li{margin:.45rem 0}
.stack-sm{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.feature-media img{width:100%;height:100%;object-fit:cover;border-radius:16px;border:1px solid var(--line);box-shadow:0 12px 28px rgba(0,0,0,.06)}

/* ---------- CTA strip ---------- */
.cta-band{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff}
.cta-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cta-text{margin:0;font-size:1.05rem}

/* ---------- Testimonials ---------- */
.testimonials .quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.testimonials figure{margin:0}
.testimonials blockquote{
  margin:0;padding:18px 18px 18px 46px;position:relative;
  border-left:4px solid var(--brand);background:#fff;border:1px solid var(--line);border-radius:12px
}
.testimonials blockquote::before{
  content:"“";position:absolute;left:12px;top:6px;font-size:32px;line-height:1;color:var(--brand-3);font-weight:900;opacity:.6
}
.testimonials figcaption{margin-top:.5rem;color:var(--muted);font-size:.95rem}

/* ---------- Areas ---------- */
.areas-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;margin-top:10px;padding:0}
.areas-grid li{list-style:none;text-align:center;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.55rem .75rem;font-weight:800}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:20px}
.contact-list{padding-left:0;margin:0 0 8px}
.contact-list li{list-style:none;margin:.25rem 0}
.tel{font-weight:900;color:var(--ink);text-decoration:none}
.muted{color:var(--muted)}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form label{display:flex;flex-direction:column;gap:6px}
.contact-form label.wide{grid-column:1 / -1}
.contact-form input,.contact-form textarea{
  border:1px solid var(--line);border-radius:12px;padding:.8rem .9rem;font:inherit;color:var(--ink);
  background:#fff;box-shadow:inset 0 1px 0 rgba(0,0,0,.02);transition:border-color .12s ease, box-shadow .12s ease
}
.contact-form input:focus,.contact-form textarea:focus{
  border-color:var(--brand);outline:2px solid transparent;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent)
}
.form-cta{grid-column:1 / -1;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.form-status{font-weight:700}
.form-status.ok{color:#1a7f37}
.form-status.err{color:#b00020}

/* Lift the contact section slightly under the hero (desktop) */
.contact-up{position:relative;z-index:3;margin-top:clamp(-64px,-6vw,-28px)}
@media (max-width:760px){.contact-up{margin-top:0}}

/* ---------- Footer ---------- */
.site-footer{background:#0f172a;color:#e5e7eb;border-top:none}
.site-footer::before{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.footer-cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
.site-footer h4{margin:.2rem 0 .4rem;color:#fff}
.site-footer a{color:#cfeff2;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.foot-list{padding-left:0;margin:0}
.foot-list li{list-style:none;margin:.25rem 0;border-bottom:1px solid rgba(255,255,255,.08);padding:.25rem 0}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.12);color:#cbd5e1}
.toplink{color:#cfeff2;font-weight:700}
.toplink:hover{color:#fff}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-inner{grid-template-columns:1fr}
  .areas-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .contact-grid{grid-template-columns:1fr}
  .cta-row{flex-direction:column;align-items:flex-start}
}
@media (max-width:760px){
  .nav{display:none;position:absolute;right:16px;top:76px;flex-direction:column;background:#fff;border:1px solid var(--line);padding:10px;border-radius:12px;box-shadow:var(--shadow)}
  .nav a{padding:.5rem .7rem}
  .nav .btn{margin:6px 0 0}
  .nav-burger{display:flex}
  .brand img{height:72px}
  .areas-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-form{grid-template-columns:1fr}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}
}

/* --- FAQ --- */
.faq{border:1px solid var(--line);border-radius:12px;padding:.6rem .9rem;background:#fff;margin:.6rem 0;box-shadow:var(--shadow)}
.faq > summary{cursor:pointer;font-weight:800;list-style:none}
.faq > summary::-webkit-details-marker{display:none}
.faq[open]{background:linear-gradient(180deg,#fff,#f9fcfd)}
.faq-a{color:var(--ink-2);margin-top:.5rem}

/* --- Hero picture wrapper --- */
.hero picture{position:absolute;inset:0;z-index:0}
.hero picture img.hero-bg{width:100%;height:100%;object-fit:cover;object-position:50% 24%}

/* --- Sticky mobile CTA --- */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:10px;justify-content:space-between;
  padding:10px 14px;background:rgba(15,23,42,.9);backdrop-filter:saturate(140%) blur(6px);
  border-top:1px solid rgba(255,255,255,.1)
}
.mobile-cta-btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;
  padding:.8rem 1rem;border-radius:999px;font-weight:900;border:2px solid transparent;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;text-decoration:none
}
.mobile-cta-btn.outline{background:transparent;border-color:#cfeff2;color:#cfeff2}
@media (max-width:760px){ .mobile-cta{display:flex} body{padding-bottom:70px} }

/* --- Header Contact button refinement --- */
.nav .btn{
  padding:.5rem 1.1rem;border-radius:999px;font-weight:800;
  background:linear-gradient(90deg,#e27935,#b75536);
  color:#fff !important;box-shadow:0 3px 6px rgba(0,0,0,.15)
}
.nav .btn:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* --- Button edge colour fix --- */
.btn,
.mobile-cta-btn,
.nav .btn{ border: 0; background-clip: padding-box; }
.btn-solid,
.mobile-cta-btn{ background-image: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 120%); }
.nav .btn{ background-image: linear-gradient(90deg, #e27935 0%, #b75536 120%); }
.btn-outline{ border: 2px solid var(--brand); background-clip: border-box; }
.btn:hover,
.mobile-cta-btn:hover,
.nav .btn:hover{ transform: translateY(-1px); }

/* --- Mobile fixes --- */
@media (max-width: 600px){
  .grid-4 { display: block !important; }
  .grid-4 .card.pro { display: block; margin-bottom: 1rem; }
  .pro .pro-icon,
  .pro .pro-icon-alt,
  .pro .pro-icon-soft {
    position: static !important;
    display: inline-block;
    margin: 0 0 .5rem 0;
    transform: none !important;
  }
  .ticks li,
  .trust-inline li,
  .areas-grid li {
    position: relative;
    overflow: hidden;
  }
  .ticks li::before,
  .trust-inline li::before,
  .areas-grid li::before {
    position: static !important;
    margin-right: .5rem;
  }
}

/* Safety net */
.card.pro, .feature-copy, .feature-media, .section {
  z-index: 1;
  position: relative;
}

/* Add space below hero call-to-action buttons */
.hero-cta {
  margin-bottom: 1.5rem; /* adjust to taste */
}

/* --- Gallery --- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.gallery-item{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  aspect-ratio:4/3;                 /* tidy, consistent tiles */
  background:#f7fafb;
}
.gallery-item img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .2s ease, filter .2s ease;
}
.gallery-item:hover img{ transform:scale(1.02); filter:contrast(1.02); }
.gallery h2{ margin-bottom:.6rem; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:80;
  display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.92);
  padding:24px;
}
.lightbox.open{ display:flex; }
.lightbox img{
  max-width:90vw; max-height:90vh; border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.lb-close{
  position:absolute; top:12px; right:12px;
  width:44px; height:44px; border-radius:999px;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.4); color:#fff; font-size:26px; line-height:1;
  display:grid; place-items:center; cursor:pointer;
}
.lb-close:hover{ background:rgba(255,255,255,.12); }

/* Responsive */
@media (max-width:1100px){ .gallery-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){
  .gallery-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .gallery-item{ aspect-ratio:1/1; } /* square, shorter */
}

/* Collapse extra gallery items until expanded */
.gallery-grid.collapsed .gallery-item:nth-child(n+5){ display:none; }
.show-more-wrap{ margin-top:10px; display:flex; justify-content:center; }

/* --- Mobile gallery fix --- */
@media (max-width: 768px){
  .gallery-grid{
    grid-template-columns: repeat(2, 1fr); /* two columns instead of one */
    gap: 8px;
  }
  .gallery-item{
    aspect-ratio: 1/1;   /* square, keeps it neat */
    max-height: 180px;   /* stops very tall blocks */
  }
  .gallery-item img{
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

/* --- Stop horizontal scrolling on mobile --- */
html, body { max-width: 100%; overflow-x: hidden; }

/* Clip any child that tries to stick out */
.site-header, .hero, .section, .feature, .gallery, .cta-band, .site-footer { overflow-x: clip; }

/* Ensure the mobile dropdown nav can't exceed the viewport width */
@media (max-width: 760px){
  .nav{
    left: 16px;     /* keep it inside the screen */
    right: 16px;    /* instead of fixed width pushing page wider */
    width: auto;
    max-width: calc(100vw - 32px);
  }
}

/* Gallery collapse by default */
.gallery-item.more {
  display: none;
}

/* When gallery is expanded, show them */
.gallery-grid.open .gallery-item.more {
  display: block;
}

/* Style the toggle button */
.gallery-toggle {
  display: inline-block;
  margin-top: 1rem;
  padding: .6rem 1.2rem;
  border-radius: 999px;
  border: 2px solid var(--brand);
  background: #fff;
  color: var(--brand);
  font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
}
.gallery-toggle:hover {
  background: var(--bg-soft);
}

.gallery-toggle {
  padding: 0.6rem 1.2rem;
  border: 2px solid var(--brand);
  border-radius: 999px;
  background: #fff;
  color: var(--brand);
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.gallery-toggle:hover {
  background: var(--brand);
  color: #fff;
}

/* collapse behavior */
.gallery-item.more { display: none; }
.gallery-grid.open .gallery-item.more { display: block; }

/* centered toggle */
.show-more-wrap { display:flex; justify-content:center; margin-top:12px; }
.gallery-toggle{
  padding:.6rem 1.2rem; border:2px solid var(--brand); border-radius:999px;
  background:#fff; color:var(--brand); font-weight:700; cursor:pointer;
}

/* mobile gallery (keep page short) */
@media (max-width:768px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .gallery-item{ aspect-ratio:1/1; max-height:180px; }
  .gallery-item img{ width:100%; height:100%; object-fit:cover; }
}

/* --- Fix "Recent feedback" on mobile --- */
@media (max-width: 768px){
  .testimonials .quotes{
    grid-template-columns: 1fr;   /* 1 column on phones */
    gap: 12px;
  }
  .testimonials blockquote{
    padding: 14px 14px 14px 40px; /* slightly smaller padding so it never overflows */
  }
}

/* --- Mobile fixes for bottom sections --- */
@media (max-width: 768px){

  /* --- Definitive mobile fixes (place LAST) --- */
html, body { max-width: 100%; overflow-x: hidden; }

/* Bottom sections full-width on mobile */
@media (max-width: 768px){
  .wrap { max-width: 100% !important; padding-left: 16px; padding-right: 16px; }

  /* Testimonials → 1 column */
  .testimonials .quotes { display:grid; grid-template-columns:1fr !important; gap:14px !important; }

  /* Areas → 2 columns */
  .areas-grid { display:grid; grid-template-columns:repeat(2,1fr) !important; gap:8px !important; }

  /* FAQ items stretch */
  .faq { width:100% !important; }
}

/* Gallery behaviour */
.gallery-item.more { display:none; }

/* Centered toggle */
.show-more-wrap { display:flex; justify-content:center; margin-top:12px; }

/* Two-col, compact gallery on phones */
@media (max-width: 768px){
}

  /* Recent feedback (testimonials) → full width */
  .testimonials .quotes {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  /* Areas we cover → 2 columns max on phones */
  .areas-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }

  /* FAQ entries → stack nicely */
  .faq {
    width: 100%;
    box-sizing: border-box;
  }
}

/* --- Mobile hard-fix for bottom sections --- */
html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 768px){
  /* Ensure section containers take full width */
  .wrap,
  .section .wrap,
  .feature .wrap,
  .gallery .wrap,
  .testimonials .wrap { width: 100% !important; max-width: 100% !important; }

  /* Testimonials → 1 column */
  .testimonials .quotes {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
  }
  .testimonials blockquote { padding: 14px 14px 14px 40px; }

  /* Areas → 2 columns on phones */
  .areas-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* FAQ entries should span full width */
  .faq { width: 100% !important; box-sizing: border-box; }
}
/* === Mobile nav portal overlay (fix for iOS/Safari + backdrop-filter clipping) === */
@media (max-width:760px){
  .site-header{ overflow: visible; } /* allow overlay to escape header bounds */

  /* When moved to <body> as a portal */
  #primary-nav.is-portal{
    position: fixed;
    z-index: 3000;
    top: 76px;                         /* align just under header */
    left: 16px;
    right: 16px;
    display: flex !important;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 10px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 76px - 16px);
    overflow: auto;
  }
  #primary-nav.is-portal a{ padding: .5rem .7rem; }
  #primary-nav.is-portal .btn{ margin: 6px 0 0; }

  /* Keep the burger on top */
  #nav-burger{ position: relative; z-index: 3100; }
}