a.btn.btn-ghost, .emoji {
    color: #ff375a;
}

/* About section – make cards full-width and stacked on mobile */
/* Put this AFTER your existing styles so it overrides them */
@media (max-width: 768px) {
  #about .about-grid {
    grid-template-columns: 1fr;   /* stack instead of side-by-side */
    gap: 16px;
  }

  /* undo equal-height rule on mobile */
  #about .about-grid > * {
    height: auto;
  }

  #about .about-copy,
  #about .about-photo {
    width: 100%;
  }

  #about .about-photo {
    position: relative;
    margin-left: 0;
  }
  #about .about-photo img {
    width: 100%;
    height: auto;          /* show full image, not squished */
    max-height: none;
    object-fit: cover;
    border-radius: 12px;
  }
  /* move caption below image on mobile */
  #about .about-photo figcaption {
    position: static;
    display: inline-block;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.9);
  }
  #services.services-grid {
    grid-template-columns: repeat(1, minmax(120px, 1fr)) !important;
}
}


/* ===== Hummingbird v4 per feedback ===== */
:root{
  --ink:#08261c;
  --muted:#3d6c59;
  --brand:#12b86f;
  --brand2:#83ffd1;
  --panel:#ffffffcc;
  --ring: 0 0 0 6px rgba(18,184,111,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; color:var(--ink); font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; line-height:1.6; background:#f2fbf6}
h1,h2,h3{font-family:'Poppins',system-ui,sans-serif}
.container{width:min(1120px,92%); margin-inline:auto}
.section{padding:84px 0}
.muted{color:var(--muted)} .small{font-size:.9rem}

.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.7); backdrop-filter: blur(10px) saturate(140%); border-bottom:1px solid rgba(0,0,0,.06)}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0}
a.logo {color: #0b714c;}
.logo{display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; font-weight:800}
.logo .thin{font-weight:600; opacity:.85}
.logo-mark{width:28px; height:28px; border-radius:8px; background: conic-gradient(from 270deg,var(--brand),var(--brand2),#adffe3,var(--brand)); box-shadow:0 12px 30px rgba(18,184,111,.3)}
.nav ul{display:flex; gap:18px; list-style:none; padding:0; margin:0}
.nav a{color:inherit; text-decoration:none; font-weight:600}
.menu-toggle{display:none; background:none; border:0; cursor:pointer; padding:8px}
.menu-toggle .bar{display:block; width:24px; height:2px; background:currentColor; margin:5px 0}
.btn{display:inline-block; padding:12px 18px; border-radius:14px; text-decoration:none; font-weight:700; transition:.2s transform,.2s box-shadow}
.btn:hover{transform:translateY(-1px)}
.btn-primary{color:#ffffff; background:linear-gradient(180deg,var(--brand),var(--brand2)); box-shadow:0 10px 26px rgba(18,184,111,.35);font-size: 1.25em;}
.btn-ghost{border:1.5px solid rgba(0,0,0,.12); background:rgba(255,255,255,.75); font-size: 1.25em;}
.btn-call{background:linear-gradient(90deg,var(--brand),var(--brand2)); color:#ffffff; border-radius:999px; padding:10px 14px}
.progress{height:2px; background:linear-gradient(90deg, transparent, var(--brand), var(--brand2), transparent); width:0%}

.hero{position:relative; min-height:76vh; display:grid; place-items:center; background-image: url('images/poolside-palms.jpg'); background-size:cover; background-position:center}
.hero::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.55))}
.hero-inner{position:relative; text-align:center; color:#fff}
.img-text{--img:url('images/canary-palm.jpg'); background-image:linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,.85)), var(--img); background-blend-mode:screen, normal; background-size:cover; background-position:center; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.2); font-size:clamp(2.6rem, 4vw + 2rem, 5rem); line-height:.92; letter-spacing:.5px; margin:0 0 10px}
.hero-sub{max-width:760px; margin-inline:auto}
.cta-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}

.layers .stack-scene{position:relative; height:520px; perspective:1000px}
.stack{position:absolute; right:0; border-radius:16px; width:min(74%,520px); box-shadow:0 18px 40px rgba(0,0,0,.22); transform-origin: 70% 30%}
.stack.back{top:10px}
.stack.mid{top:110px}
.stack.front{top:210px}

.services-grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:16px}
.card{background:var(--panel); border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:18px; box-shadow:0 16px 34px rgba(0,0,0,.06)}
.card h3{margin:4px 0 8px}

.alt{background:#f7fffb}
.gallery{display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:16px}
.gallery figure{margin:0; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px; overflow:hidden; box-shadow:0 16px 34px rgba(0,0,0,.06)}
.gallery img{display:block; width:100%; height:240px; object-fit:cover}
.gallery figcaption{padding:10px 12px; font-weight:700}

.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch}
.about-copy, .about-photo{display:flex; flex-direction:column}
.about-photo img{width:100%; height:100%; object-fit:cover; border-radius:12px}
.about-photo figcaption{margin-top:10px; font-weight:700; color:var(--muted)}

.contact-grid{display:grid; grid-template-columns: 1fr 1fr; gap:22px; align-items:start}
.form{display:grid; gap:12px}
.form .row.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.field{display:flex; flex-direction:column; gap:6px}
.form input, .form textarea{font:inherit; padding:12px 12px; border-radius:12px; border:1px solid rgba(0,0,0,.15); background:#fff; outline:none}
.form input:focus, .form textarea:focus{box-shadow:var(--ring); border-color:var(--brand)}
@media (max-width:860px){ .form .row.two{grid-template-columns:1fr} .contact-grid{grid-template-columns:1fr} }

.site-footer{padding:28px 0; background:rgba(255,255,255,.7); backdrop-filter: blur(8px); border-top:1px solid rgba(0,0,0,.06)}
.foot{display:flex; align-items:center; justify-content:space-between; gap:12px}
.site-footer a{color:#0a6848; text-decoration:none; margin-left:12px}

@media (max-width:860px){
  .menu-toggle{display:block}
  .nav ul{position:fixed; inset:56px 0 auto 0; background:rgba(255,255,255,.95); backdrop-filter: blur(6px); padding:16px 24px; display:flex; flex-direction:column; gap:12px; border-bottom:1px solid rgba(0,0,0,.06); transform:translateY(-120%); transition:.3s}
  .nav.open ul{transform:translateY(0)}
  .btn-call{display:none}
}

.to-top{position:fixed; right:14px; bottom:14px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(0,0,0,.15); background:rgba(255,255,255,.8); cursor:pointer; display:grid; place-items:center; box-shadow:0 8px 24px rgba(0,0,0,.15); opacity:.001; transform:translateY(10px); transition:.25s}
.to-top.show{opacity:1; transform:none}

/* Layers section two-column layout */
.layers-grid{display:grid; grid-template-columns: 1.05fr 1fr; gap:22px; align-items:center}
@media (max-width: 980px){ .layers-grid{grid-template-columns:1fr; grid-auto-flow:row} }
#services.services-grid{grid-template-columns:repeat(2, minmax(220px,1fr)); grid-auto-rows:1fr}
#services .card{min-height:120px}

/* Flush heights */
.about-grid{align-items:stretch}
.about-grid > *{height:100%}
.about-photo{position:relative}
.about-photo figcaption{position:absolute; left:12px; bottom:12px; margin:0; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.9)}
.contact-grid{align-items:stretch}
.contact-grid > *{height:100%}