/* ----------------------
       Reset & Base
    ---------------------- */
    *, *::before, *::after { box-sizing: border-box; }
    html:focus-within { scroll-behavior: smooth; }
    body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: var(--ink); background: var(--bg); line-height: 1.6; }
    img, picture, video, canvas, svg { display: block; max-width: 100%; }
    input, button, textarea, select { font: inherit; }
    :root {
      --bg: #0b2430; /* deep teal navy */
      --bg-soft: #0f2f3d;
      --panel: #ffffff;
      --ink: #0b1a1f;
      --muted: #4b5a64;
      --brand-600: #1b998b; /* primary */
      --brand-700: #157a6f;
      --brand-200: #c8efe9;
      --accent-500: #fbb13c; /* warm highlight */
      --accent-700: #e09a2f;
      --surface: #f6f8fb;
      --success: #13795b;
      --danger: #b42318;
      --radius: 14px;
      --shadow: 0 10px 30px rgba(2, 10, 20, .18);
      --container: 1200px;
    }

    /* Utility */
    .container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
    .section { padding: clamp(3rem, 4vw, 5rem) 0; background: #fff; }
    .section.alt { background: var(--surface); }
    .grid { display: grid; gap: 1.25rem; }
    .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
    .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
    @media (max-width: 900px) { .grid.cols-3 { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 640px) { .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; } }

    h4, h2, h3 { line-height: 1.2; margin: 0 0 .6rem 0; }
    h4 { font-size: clamp(1rem, 3.6vw, 2rem); color: #fff; }
    h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--ink); }
    h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); color: var(--ink); }
    p { color: #32424b; margin: 0.2rem 0 1rem; }

    .btn { display: inline-flex; align-items: center; gap: .5rem; background: var(--brand-600); color: #fff; border: 0; padding: .9rem 1.1rem; border-radius: calc(var(--radius) - 6px); text-decoration: none; box-shadow: var(--shadow);
      transition: transform .15s ease, background .2s ease, box-shadow .2s ease; }
    .btn:hover { background: var(--brand-700); transform: translateY(-1px); }
    .btn.light { background: #fff; color: var(--ink); box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 6px 20px rgba(2,10,20,.08); }
    .btn.accent { background: var(--accent-500); }
    .btn.ghost { background: transparent; border: 2px solid #fff; color: #fff; box-shadow: none; }

    .badge { display: inline-block; background: var(--brand-200); color: var(--brand-700); padding: .25rem .6rem; border-radius: 999px; font-weight: 600; letter-spacing: .2px; }

    /* Skip link */
    .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
    .skip-link:focus { position: fixed; left: 1rem; top: 1rem; width: auto; height: auto; padding: .6rem .8rem; background: #fff; z-index: 9999; box-shadow: var(--shadow); border-radius: 8px; }

    /* Header */
    header { position: sticky; top: 0; z-index: 99; background: rgba(11,36,48,.9); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.08); }
    .nav { display: flex; align-items: center; justify-content: space-between; padding: .8rem 0; }
    .brand { display:flex; align-items:center; gap:.7rem; color:#fff; text-decoration:none; }
    .brand svg { width: 34px; height: 34px; }
    .brand span { font-weight: 800; letter-spacing: .4px; font-size: 1.05rem; }
    nav ul { list-style:none; display:flex; gap: 1rem; margin:0; padding:0; }
    nav a { color:#fff; text-decoration:none; opacity:.9; padding:.6rem .7rem; border-radius:8px; }
    nav a:hover, nav a[aria-current="page"] { opacity:1; background: rgba(255,255,255,.08); }

    .menu-toggle { display:none; background: transparent; color:#fff; border:0; padding:.5rem; border-radius:10px; }
    .menu-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

    @media (max-width: 900px){
      nav ul { position: fixed; inset: 60px 0 auto 0; background: rgba(11,36,48,.98); padding:1rem; transform: translateY(-140%); transition: transform .25s ease; flex-direction: column; gap:.5rem; border-bottom-left-radius: 14px; border-bottom-right-radius:14px; }
      nav ul.open { transform: translateY(0); }
      .menu-toggle { display:block; }
    }

    /* Hero */
    .hero { background: radial-gradient(1200px 600px at 85% -20%, rgba(29,161,140,.35), transparent 55%),
                          radial-gradient(800px 400px at 10% 10%, rgba(251,177,60,.18), transparent 55%),
                          linear-gradient(180deg, #0b2430, #0e3b4a 55%);
             color:#fff; padding: 3.5rem 0 2.8rem; position: relative; overflow:hidden; }
    .hero .container { display:grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: center; }
    .hero p { color: rgba(255,255,255,.92); font-size: 1.1rem; }
    .hero figure { position: relative; }
    .hero .card-illus { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem; }
    .hero img { border-radius: 12px; width:100%; height: auto; }
    .hero .cta-row { display:flex; gap:.8rem; flex-wrap: wrap; margin-top: 1rem; }
    @media (max-width: 900px){ .hero .container { grid-template-columns: 1fr; } }

    /* Cards */
    .card { background:#fff; border-radius: var(--radius); padding: 1.2rem; box-shadow: var(--shadow); border: 1px solid #e8eef3; }
    .card h3 { margin-top: .2rem; }
    .card p { color:#32424b; }

    /* Trust row */
    .trust { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; margin-top:1rem; }
    .trust .pill { background: #0e3b4a; color:#fff; padding:.5rem .7rem; border-radius: 999px; font-size:.85rem; opacity:.95; }

    /* Section: Services */
    .service { display:flex; gap: .9rem; }
    .service .icon { width: 44px; height: 44px; border-radius: 10px; background: var(--brand-200); display:grid; place-items:center; color: var(--brand-700); font-weight:700; }

    /* Section: Approach */
    .about { display:grid; grid-template-columns: 1.2fr 1fr; gap:1.2rem; align-items: start; }
    .about .panel { background: #fff; border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); border:1px solid #e8eef3; }
    @media (max-width: 900px) { .about { grid-template-columns: 1fr; } }

    /* Testimonials */
    .slider { position: relative; overflow: hidden; }
    .slides { display: flex; transition: transform .35s ease; }
    .slide { min-width: 100%; padding: 1rem; }
    .slide blockquote { background: #fff; border-left: 4px solid var(--brand-600); margin:0; padding: 1rem; border-radius: 10px; box-shadow: var(--shadow); }
    .slider-controls { display:flex; justify-content: space-between; align-items: center; margin-top:.5rem; }
    .dots { display:flex; gap:.5rem; }
    .dot { width: 10px; height: 10px; border-radius: 50%; background: #cdd6dc; border: 0; }
    .dot[aria-current="true"] { background: var(--brand-600); }

    /* Accordion */
    .accordion button { width:100%; text-align:left; background:#fff; border:1px solid #e8eef3; border-radius: 10px; padding:.9rem 1rem; margin-bottom:.6rem; box-shadow: 0 1px 0 rgba(0,0,0,.03); }
    .accordion button[aria-expanded="true"] { border-color: var(--brand-600); box-shadow: 0 0 0 2px rgba(27,153,139,.2); }
    .accordion .panel { display:none; padding:.6rem 1rem 1rem; background:#fff; border-radius: 0 0 10px 10px; border:1px solid #e8eef3; border-top: 0; margin-top:-.6rem; }

    /* Forms */
    form { display:grid; gap:.8rem; }
    label { font-weight:600; color:#24333a; }
    input, textarea, select { width:100%; padding:.8rem .9rem; border:1px solid #d7e2ea; border-radius: 10px; background:#fff; }
    input:focus, textarea:focus, select:focus { outline:none; border-color: var(--brand-600); box-shadow: 0 0 0 3px rgba(27,153,139,.2); }
    .help { font-size:.9rem; color:#5a6a74; }

    .toast { position: fixed; bottom: 1rem; right: 1rem; background: #0e3b4a; color:#fff; padding: .8rem 1rem; border-radius: 10px; box-shadow: var(--shadow); opacity:0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
    .toast.show { opacity:1; transform: translateY(0); }

    /* Footer */
    footer { background: #061922; color: #cfe3eb; padding: 3rem 0 2rem; }
    footer a { color:#cfe3eb; text-decoration:none; }
    .footer-grid { display:grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 1rem; }
    .foot-note { border-top: 1px solid rgba(255,255,255,.08); margin-top: 1rem; padding-top: 1rem; color:#8fb1bf; font-size:.95rem; }
    @media (max-width: 900px){ .footer-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 640px){ .footer-grid { grid-template-columns: 1fr; } }

    /* Motion sensitivity */
    @media (prefers-reduced-motion: reduce) {
      html:focus-within { scroll-behavior: auto; }
      .slides { transition: none; }
      .btn { transition: none; }
    }

    /* 1) Make all images responsive (prevents horizontal overflow) */
img {
  max-width: 100%;
  height: auto;
  display: block; /* removes baseline gap */
}

/* 2) Make the Life section grid fluid and clamp card content */
#living .grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}

#living .card {
  overflow: hidden;      /* clips any oversized media */
  border-radius: 12px;
  min-width: 0;          /* prevents long content from forcing overflow */
}

/* Give the Life images a consistent crop without stretching */
#living .card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10; /* keep a tidy card shape */
  object-fit: cover;     /* crop to the frame */
}

/* 3) General safety: don’t allow any child to force the page wider */
.container, .grid, .card {
  min-width: 0;
}