:root {
  --teal:       #78a0b4;
  --teal-dark:  #4a6878;
  --teal-light: #8cb4c8;
  --teal-pale:  #dce8f0;
  --teal-faint: #f0f4f7;
  --accent:     #4db8b8;
  --charcoal:   #2e4a5a;
  --mid:        #3d5e5e;
  --muted:      #6a8e8e;
  --border:     #c4d8e4;
  --white:      #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Jost', sans-serif; background: var(--white); color: var(--charcoal); font-weight: 300; line-height: 1.75; }

/* NAV */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 0 56px; height: 96px; background: rgba(247,253,253,0.97); border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); transition: box-shadow 0.3s; }
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo img { height: 70px; width: auto; object-fit: contain; }
.nav-links { display: flex; list-style: none; gap: 18px; align-items: center; }
.nav-links > li { position: relative; }
.nav-links a { font-size: 0.85rem; letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none; color: var(--mid); font-weight: 400; transition: color 0.2s; }
.nav-links a:hover { color: var(--teal); }
.nav-links a.active { color: var(--teal); border-bottom: 2px solid var(--teal); padding-bottom: 2px; }
.has-dropdown > a::after { content: ' ▾'; font-size: 0.55rem; vertical-align: middle; }
.dropdown { display: none; position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid var(--border); border-top: 2px solid var(--teal); min-width: 220px; padding: 6px 0; box-shadow: 0 8px 28px rgba(0,0,0,0.08); list-style: none; }
.has-dropdown { padding-bottom: 0; }
.has-dropdown:hover .dropdown, .has-dropdown.open .dropdown { display: block; }
.has-dropdown > a { padding-bottom: 8px; }
.dropdown { margin-top: -2px; padding-top: 8px; }
.dropdown a { display: block; padding: 12px 20px; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid); border-bottom: none !important; }
.dropdown a:hover { background: var(--teal-faint); color: var(--teal); }
.nav-cta { background: var(--teal) !important; color: #fff !important; padding: 10px 24px; border-radius: 2px; }
.nav-cta:hover { background: var(--teal-light) !important; color: #fff !important; }

/* PAGE HEADER */
.page-header { height: 180px; position: relative; display: flex; align-items: flex-end; overflow: hidden; margin-top: 96px; }
.page-header-bg { position: absolute; inset: 0; background: linear-gradient(130deg, #1e2c38 0%, #4a6878 40%, #78a0b4 70%, #8cb4c8 100%); }
.page-header-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 80% 20%, rgba(77,184,184,0.15) 0%, transparent 70%); }
.page-header-content { position: relative; z-index: 2; padding: 0 64px 52px; max-width: 1100px; margin: 0 auto; width: 100%; }
.ph-eyebrow { font-size: 0.67rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; }
.ph-eyebrow::before { content: ''; display: block; width: 28px; height: 1px; background: var(--accent); }
.page-header h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem, 4vw, 3.5rem); font-weight: 300; color: #fff; line-height: 1.15; }
.page-header h1 em { font-style: italic; color: var(--accent); }

/* SECTIONS */
section { padding: 96px 64px; }
.inner { max-width: 1100px; margin: 0 auto; }
.eyebrow { font-size: 0.67rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); font-weight: 500; display: block; margin-bottom: 12px; }
.divider { width: 40px; height: 2px; background: #1e2c38; opacity: 0.35; margin: 0 0 26px; }
h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.9rem, 3vw, 2.8rem); font-weight: 300; color: var(--charcoal); line-height: 1.2; margin-bottom: 16px; }
.section-lead { font-size: 0.98rem; color: var(--mid); max-width: 640px; margin-bottom: 52px; line-height: 1.82; }
p { font-size: 0.95rem; color: var(--mid); line-height: 1.82; }

/* BUTTONS */
.btn { display: inline-block; padding: 13px 34px; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; border-radius: 2px; text-decoration: none; transition: background 0.2s, transform 0.2s; font-family: 'Jost', sans-serif; border: none; cursor: pointer; }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--teal-light); transform: translateY(-1px); }
.btn-teal-light { background: var(--teal-light); color: #fff; }
.btn-teal-light:hover { background: var(--accent); transform: translateY(-1px); }
.btn-outline-white { border: 1px solid rgba(255,255,255,0.55); color: #fff; background: transparent; }
.btn-outline-white:hover { background: rgba(255,255,255,0.09); border-color: #fff; }
.btn-hero-primary { background: #fff; color: #2d4a52; font-weight: 600; border: 2px solid #fff; }
.btn-hero-primary:hover { background: rgba(255,255,255,0.92); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
.btn-outline-teal { border: 1px solid var(--teal); color: var(--teal); background: transparent; }
.btn-outline-teal:hover { background: var(--teal-pale); }
.arrow-link { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; transition: gap 0.2s; }
.arrow-link:hover { gap: 14px; }

/* LAYOUT */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.two-col-start { align-items: start; }

/* IMAGE BLOCKS */
.img-block { width: 100%; aspect-ratio: 4/5; background: linear-gradient(155deg, var(--teal-pale), #a8d8d8); border-radius: 3px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.img-block-wide { aspect-ratio: 3/2; }
.img-block span { font-family: 'Cormorant Garamond', serif; font-size: 4.5rem; color: var(--teal); opacity: 0.18; font-style: italic; user-select: none; }
.img-badge { position: absolute; bottom: 24px; left: 24px; background: var(--teal); color: #fff; padding: 16px 22px; border-radius: 2px; }
.img-badge-num { font-family: 'Cormorant Garamond', serif; font-size: 1.9rem; font-weight: 600; line-height: 1; }
.img-badge-label { font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; margin-top: 4px; }

/* CHECK LIST */
.check-list { list-style: none; margin: 24px 0 32px; display: flex; flex-direction: column; gap: 11px; }
.check-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.9rem; color: var(--mid); }
.check-list li::before { content: '✓'; color: var(--teal); font-weight: 600; flex-shrink: 0; margin-top: 1px; }

/* BG VARIANTS */
.bg-faint { background: var(--teal-faint); }
.bg-pale  { background: var(--teal-pale); }
.bg-teal  { background: var(--teal); }
.bg-dark  { background: #0d3333; }
.bg-white { background: var(--white); }

/* CARD GRIDS */
.card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.card-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.card-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; }

.care-card { background: var(--teal-faint); padding: 46px 36px; border-left: 3px solid transparent; transition: border-color 0.25s, background 0.25s, transform 0.25s; display: flex; flex-direction: column; }
.care-card:hover { border-left-color: var(--teal); background: var(--teal-pale); transform: translateY(-3px); }
.care-card .card-icon { width: 52px; height: 52px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 22px; box-shadow: 0 2px 12px rgba(26,120,120,0.1); }
.care-card h3 { font-family: 'Jost', sans-serif; font-size: 1.25rem; font-weight: 600; color: #2e4a5a; margin-bottom: 12px; }
.care-card p { font-size: 0.88rem; line-height: 1.75; margin-bottom: 22px; }
.care-card .arrow-link { margin-top: auto; }

.white-card { background: #f5f7f8; border: 1px solid var(--border); padding: 44px 36px; border-radius: 6px; transition: background 0.2s; }
.white-card:hover { background: var(--teal-pale); }

/* PILLAR */
.pillar-num { font-family: 'Cormorant Garamond', serif; font-size: 3rem; font-weight: 300; color: #2e4a5a; opacity: 0.35; line-height: 1; margin-bottom: 12px; }
.pillar h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; font-weight: 600; color: #2e4a5a; margin-bottom: 10px; }

/* STRIP */
.strip { background: var(--teal); padding: 42px 64px; }
.strip-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; }
.strip-item { text-align: center; }
.strip-icon { font-size: 1.65rem; display: block; margin-bottom: 9px; }
.strip-label { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 5px; font-weight: 500; }
.strip-desc { font-size: 0.92rem; color: rgba(255,255,255,0.74); line-height: 1.5; }

/* INCLUDED BOX */
.included-box { background: var(--teal-pale); padding: 32px 36px; border-left: 3px solid var(--teal); margin-top: 28px; }
.included-box h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.55rem; font-weight: 400; color: var(--charcoal); margin-bottom: 26px; }
.included-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 11px 22px; }
.included-item { display: flex; align-items: flex-start; gap: 9px; font-size: 0.87rem; color: var(--mid); }
.included-item::before { content: ''; width: 6px; height: 6px; background: var(--teal-light); border-radius: 50%; margin-top: 8px; flex-shrink: 0; }

/* TESTIMONIALS */
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 26px; }
.testi-card { background: #fff; padding: 42px 34px; border-radius: 2px; position: relative; }
.quote-mark { font-family: 'Cormorant Garamond', serif; font-size: 4.5rem; color: var(--teal); opacity: 0.12; line-height: 0.5; position: absolute; top: 26px; left: 26px; }
.testi-card blockquote { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.12rem; color: var(--charcoal); line-height: 1.78; margin-bottom: 20px; position: relative; z-index: 1; }
.testi-author { font-size: 0.72rem; letter-spacing: 0.06em; color: var(--muted); font-weight: 400; }
.testi-rel { font-size: 0.68rem; color: var(--muted); opacity: 0.7; margin-top: 2px; }

/* ROOM CARDS */
.room-card { background: var(--teal-faint); overflow: hidden; border-radius: 2px; transition: transform 0.25s, box-shadow 0.25s; }
.room-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(26,120,120,0.12); }
.room-img { height: 200px; background: linear-gradient(135deg, var(--teal-pale), #9acece); display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.room-body { padding: 28px; }
.room-type { font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); font-weight: 500; margin-bottom: 8px; }
.room-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 600; color: var(--charcoal); margin-bottom: 10px; }
.room-price { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 600; color: var(--teal); margin: 14px 0 6px; }
.room-price-label { font-size: 0.76rem; color: var(--muted); }

/* STATS */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-top: 36px; }
.stat-box { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); padding: 26px 22px; border-radius: 2px; }
.stat-box.light { background: var(--teal-pale); border: none; }
.stat-num { font-family: 'Cormorant Garamond', serif; font-size: 2.3rem; font-weight: 600; color: var(--accent); line-height: 1; margin-bottom: 5px; }
.stat-box.light .stat-num { color: var(--teal); }
.stat-label { font-size: 0.78rem; color: rgba(255,255,255,0.6); line-height: 1.4; }
.stat-box.light .stat-label { color: var(--mid); }

/* CONTACT */
.contact-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; align-items: start; }
.contact-details { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }
.contact-row { display: flex; align-items: flex-start; gap: 14px; }
.contact-icon { width: 36px; height: 36px; background: var(--teal-pale); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0; }
.contact-txt strong { font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--teal); font-weight: 500; display: block; margin-bottom: 2px; }
.contact-txt span { font-size: 0.88rem; color: var(--mid); }
.contact-txt a { color: var(--mid); text-decoration: none; }
.contact-txt a:hover { color: var(--teal); }
.form-box { background: var(--teal-faint); border: 1px solid var(--border); padding: 48px 42px; border-radius: 3px; }
.form-box h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 400; color: var(--teal); margin-bottom: 28px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fg { margin-bottom: 16px; }
.fg label { display: block; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; font-weight: 500; }
.fg input, .fg select, .fg textarea { width: 100%; background: #fff; border: 1px solid var(--border); border-radius: 2px; padding: 11px 15px; color: var(--charcoal); font-family: 'Jost', sans-serif; font-size: 0.87rem; font-weight: 300; outline: none; transition: border-color 0.2s; }
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--teal); }
.fg textarea { resize: none; height: 106px; }
.form-note { font-size: 0.78rem; color: var(--muted); margin-bottom: 18px; line-height: 1.6; }
.form-submit { background: var(--teal); color: #fff; border: none; padding: 14px 36px; font-family: 'Jost', sans-serif; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; border-radius: 2px; cursor: pointer; width: 100%; transition: background 0.2s; }
.form-submit:hover { background: var(--teal-light); }

/* ADVICE CARDS */
.advice-card { background: var(--teal-faint); overflow: hidden; border-radius: 2px; transition: transform 0.25s, box-shadow 0.25s; }
.advice-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(26,120,120,0.12); }
.advice-thumb { height: 164px; background: linear-gradient(135deg, var(--teal-pale), #a0d0d0); display: flex; align-items: center; justify-content: center; font-size: 2.6rem; }
.advice-body { padding: 26px 26px 30px; }
.advice-cat { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); font-weight: 500; margin-bottom: 9px; }
.advice-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 600; color: var(--charcoal); line-height: 1.35; margin-bottom: 9px; }
.advice-card p { font-size: 0.84rem; color: var(--muted); }

/* DARK ROOM CARDS */
.dark-room-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 3px; }
.dark-room { aspect-ratio: 3/4; position: relative; overflow: hidden; cursor: pointer; }
.dark-room-bg { position: absolute; inset: 0; transition: transform 0.5s; }
.dark-room:hover .dark-room-bg { transform: scale(1.04); }
.dark-room:nth-child(1) .dark-room-bg { background: linear-gradient(160deg, #1e6060, #0d3a3a); }
.dark-room:nth-child(2) .dark-room-bg { background: linear-gradient(160deg, #175555, #092e2e); }
.dark-room:nth-child(3) .dark-room-bg { background: linear-gradient(160deg, #124848, #072424); }
.dark-room-emoji { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); font-size: 4rem; opacity: 0.1; }
.dark-room-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 26px; background: linear-gradient(to top, rgba(0,0,0,0.72), transparent); }
.dark-room-info h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 400; color: #fff; margin-bottom: 5px; }
.dark-room-info p { font-size: 0.8rem; color: rgba(255,255,255,0.56); line-height: 1.5; }

/* FEAT STRIP */
.feat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 48px; }
.feat-item { padding: 20px 18px 20px 0; border-top: 1px solid rgba(255,255,255,0.1); }
.feat-item-label { font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.feat-item-val { font-size: 0.86rem; color: rgba(255,255,255,0.7); }

/* QUOTE BLOCK */
.quote-block { background: rgba(255,255,255,0.07); border-left: 3px solid var(--accent); padding: 34px 38px; border-radius: 2px; }
.quote-block blockquote { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.25rem; color: rgba(255,255,255,0.88); line-height: 1.7; margin-bottom: 16px; }
.quote-block cite { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-style: normal; }

/* TEAL/DARK OVERRIDES */
.bg-teal h2, .bg-dark h2 { color: #fff; }
.bg-teal .eyebrow, .bg-dark .eyebrow { color: var(--accent); }
.bg-teal p, .bg-teal .section-lead { color: rgba(255,255,255,0.72); }

/* Get in Touch — #4a7089 background with white text */
section.bg-teal { background: #4a7089 !important; }
section.bg-teal h2 { color: #fff !important; }
section.bg-teal .eyebrow { color: var(--accent) !important; letter-spacing: 0.2em; }
section.bg-teal .section-lead { color: rgba(255,255,255,0.82) !important; }
section.bg-teal .btn-outline-white { border: 1px solid rgba(255,255,255,0.7); color: #fff; background: transparent; }
section.bg-teal .btn-outline-white:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
.bg-dark .section-lead { color: rgba(255,255,255,0.62); }

/* FOOTER */
footer { background: #061818; padding: 28px 64px 20px; }
.footer-inner { max-width: 1100px; margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 46px; margin-bottom: 24px; align-items: start; }
.footer-logo img { height: 54px; width: auto; object-fit: contain; margin-bottom: 12px; display: block; }
.footer-brand p { font-size: 0.82rem; color: rgba(255,255,255,0.36); line-height: 1.72; max-width: 260px; }
.social-row { display: flex; gap: 9px; margin-top: 22px; }
.soc { width: 34px; height: 34px; background: #dce8f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; text-decoration: none; color: #4a6878; transition: background 0.2s, color 0.2s; border: 1px solid #c4d8e4; }
.soc:hover { background: #78a0b4; color: #fff; border-color: #78a0b4; }
.footer-col h4 { font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; font-weight: 500; padding-top: 0; }
.footer-brand { display: flex; flex-direction: column; }
.footer-col, .footer-mission { vertical-align: top; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 9px; }
.footer-col ul li a { font-size: 0.82rem; color: rgba(255,255,255,0.38); text-decoration: none; transition: color 0.2s; }
.footer-col ul li a:hover { color: rgba(255,255,255,0.78); }
.footer-col address { font-style: normal; font-size: 0.82rem; color: rgba(255,255,255,0.38); line-height: 1.85; margin: 0; padding: 0; }
.footer-col address a { color: rgba(255,255,255,0.38); text-decoration: none; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.07); padding-top: 16px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.footer-copy { font-size: 0.74rem; color: rgba(255,255,255,0.2); }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { font-size: 0.74rem; color: rgba(255,255,255,0.2); text-decoration: none; transition: color 0.2s; }
.footer-legal a:hover { color: rgba(255,255,255,0.5); }

/* REVEAL */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.68s ease, transform 0.68s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: 0.1s; } .d2 { transition-delay: 0.2s; } .d3 { transition-delay: 0.3s; }

/* HELPERS */
.text-center { text-align: center; }
.text-center .section-lead { margin-left: auto; margin-right: auto; }
.text-center .divider { margin-left: auto; margin-right: auto; }
.mt-sm { margin-top: 20px; } .mt-md { margin-top: 36px; } .mt-lg { margin-top: 52px; }
.mb-md { margin-bottom: 36px; }

@media (max-width: 980px) {
  nav { padding: 0 22px; }
  .nav-links { display: none; }
  section { padding: 68px 22px; }
  .strip { padding: 34px 22px; }
  .page-header-content { padding: 0 22px 46px; }
  .two-col, .contact-layout { grid-template-columns: 1fr; gap: 40px; }
  .card-grid-3 { grid-template-columns: 1fr; }
  .card-grid-4 { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  footer { padding: 46px 22px 32px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* HAMBURGER MOBILE MENU */
.hamburger { display: none; flex-direction: column; justify-content: space-between; width: 26px; height: 18px; background: transparent; border: none; cursor: pointer; padding: 0; }
.nav-toggle { display: none; background: transparent; border: none; cursor: pointer; font-size: 1.4rem; color: var(--teal); padding: 4px; line-height: 1; }
.hamburger span { display: block; width: 100%; height: 2px; background: var(--teal); border-radius: 2px; transition: all 0.3s ease; }
.hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 980px) {
  .hamburger { display: flex; }
  .nav-toggle { display: block; }
  .nav-links { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(247,253,253,0.98); flex-direction: column; align-items: center; justify-content: center; gap: 28px; z-index: 999; backdrop-filter: blur(10px); }
  .nav-links.open { display: flex; }
  .nav-links a { font-size: 1rem; letter-spacing: 0.08em; }
  .has-dropdown .dropdown { position: static; box-shadow: none; border: none; border-top: none; background: transparent; padding: 0; min-width: auto; }
  .has-dropdown.open .dropdown { display: block; }
  .dropdown a { font-size: 0.85rem; text-align: center; padding: 6px 0; }
}

/* SVG icon styling */
.card-icon svg { display: block; }
.strip-icon svg { display: block; }
.advice-thumb { height: 140px; background: linear-gradient(135deg, #dce8f0, #f0f4f7); display: flex; align-items: center; justify-content: center; }
.advice-thumb svg { opacity: 0.85; }

/* Botanical illustration styling */
.advice-thumb { height: 150px; background: linear-gradient(145deg, #f0f4f7, #dce8f0); display: flex; align-items: center; justify-content: center; }
.advice-thumb svg { opacity: 0.9; }
.card-icon { width: 56px; height: 56px; background: #f0f4f7; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; border: 1px solid #dce8f0; }
.card-icon svg { opacity: 0.9; }
.strip-icon { display: flex; align-items: center; justify-content: center; }
.strip-icon svg { opacity: 0.85; }

/* Dropdown toggle arrow — mobile tap target, hidden on desktop */
.dropdown-toggle {
  display: none;
  background: transparent;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  color: var(--mid);
  font-size: 0.7rem;
  cursor: pointer;
  padding: 0;
  margin: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  line-height: 1;
  vertical-align: middle;
}
@media (max-width: 980px) {
  .dropdown-toggle { display: inline-block; width: auto; height: auto; overflow: visible; color: rgba(255,255,255,0.6); font-size: 1rem; padding: 0 8px; }
  .has-dropdown.open .dropdown { display: block; }
}

/* Language toggle */
.lang-toggle { display: flex; align-items: center; gap: 2px; margin-left: 16px; }
.lang-toggle a { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid); text-decoration: none; padding: 3px 7px; border-radius: 2px; transition: all 0.18s; border: 1px solid transparent; }
.lang-toggle a:hover { border-color: var(--teal); color: var(--teal); }
.lang-toggle a.active { background: var(--teal); color: #fff; border-color: var(--teal); }
.lang-toggle span { color: var(--border); font-size: 0.6rem; }
@media (max-width: 980px) { .lang-toggle { display: none; } }

/* ── WARMTH UPDATE v2 ─────────────────────────────────── */
:root {
  --warm-cream:  #f7f9fa;
  --warm-sand:   #eef4f5;
  --warm-border: #dce8ea;
  --warm-gold:   #c8935a;
  --warm-text:   #2e4a5a;
  --warm-mid:    #4a6468;
}

/* Larger, more readable body text */
body { font-size: 1.1rem; color: var(--warm-text); }
p { font-size: 1.1rem; color: var(--warm-mid); line-height: 1.85; }

/* Bigger headings */
h2 { font-size: clamp(2.1rem, 3.2vw, 3.1rem); color: var(--warm-text); }
h3 { font-size: 1.35rem; color: var(--warm-text); }

/* Clean white sections — no cream */
.bg-faint { background: #f5f7f8; }
.bg-white  { background: #ffffff; }

/* Cards — white with soft shadow, teal left border */
.care-card {
  background: #fff;
  border: 1px solid #dde8ea;
  border-left: 4px solid var(--teal-light);
  border-radius: 12px;
  padding: 40px 34px;
  box-shadow: 0 2px 18px rgba(30,80,90,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-left-color 0.3s ease, background 0.3s ease;
  cursor: pointer;
}
.care-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(45,74,82,0.18);
  border-left-color: var(--teal);
  background: #f8fbfc;
}
.care-card:hover .arrow-link {
  color: var(--accent);
  gap: 16px;
  font-weight: 600;
}
.care-card:hover .card-icon {
  background: var(--teal-pale);
  box-shadow: 0 4px 16px rgba(45,74,82,0.12);
}
.care-card h3 { font-family: 'Jost', sans-serif; color: var(--teal-dark); font-size: 1.25rem; font-weight: 600; margin-bottom: 14px; }
.care-card p  { font-size: 1rem; line-height: 1.82; }

/* Icon squares on care cards — soft teal tint */
.care-card > div[style*="border-radius:14px"] {
  background: #ecf2f6 !important;
  border: 1px solid #c4d8e4 !important;
}

/* Check list */
.check-list li { font-size: 1.08rem; color: var(--warm-mid); gap: 13px; margin-bottom: 10px; }
.check-list li::before { color: var(--teal); font-size: 1.1rem; font-weight: 600; }

/* Strip — soft charcoal-teal */
.strip {
  background: #2d4a52;
  padding: 16px 64px;
  border-top: none;
  border-bottom: none;
}
.strip-label { color: var(--accent); font-weight: 500; }
.strip-desc  { color: rgba(255,255,255,0.72); }
.strip-item  { border-right: 1px solid rgba(255,255,255,0.12); }
.strip-item:last-child { border-right: none; }
.strip-item:hover { background: rgba(255,255,255,0.06); border-radius: 8px; }

/* Eyebrow — gold as subtle accent only */
.eyebrow { font-size: 0.72rem; letter-spacing: 0.2em; color: var(--teal); }
.divider  { background: var(--teal-light); opacity: 0.8; }

/* Buttons — rounder */
.btn { border-radius: 6px; padding: 14px 36px; font-size: 0.82rem; }
.btn-teal { background: var(--teal); }
.btn-teal:hover { background: var(--teal-dark); }
.btn-teal-light { background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.5); color: #fff; }
.btn-teal-light:hover { background: rgba(255,255,255,0.28); }
.btn-outline { border: 1px solid var(--teal); color: var(--teal); background: transparent; border-radius: 6px; }
.btn-outline:hover { background: #ecf2f6; }

/* Section lead */
.section-lead { font-size: 1.12rem; color: var(--warm-mid); line-height: 1.85; }

/* Nav */
.nav-links a { color: #3a4e5c; }
.nav-links a:hover { color: var(--teal); }
.nav-cta { border-radius: 6px !important; }
.dropdown a { color: #3a4e5c; }

/* CTA dark section */
.bg-teal-dark { background: #b4ccd8; }

/* Card grid */
.card-grid-3 { gap: 24px; }

/* Hero — strong and clear */
.hero h1 { font-size: clamp(2.4rem, 4.5vw, 3.8rem); }
.hero-eyebrow { font-size: 0.72rem; letter-spacing: 0.22em; }
.hero-lead { font-size: 1.12rem; line-height: 1.78; }
.hero h1 em {
  color: rgba(255,255,255,0.92);
  font-style: italic;
  text-shadow: none;
}

/* Welcome section stats */
.stat-num { color: var(--teal); }

/* Footer */
footer { background: #e4eef4; }
.footer-tagline { color: rgba(255,255,255,0.5); }

/* Callout */
.callout-warm {
  background: #ecf2f6;
  border-left: 4px solid var(--teal);
  border-radius: 0 10px 10px 0;
  padding: 28px 32px;
  margin: 32px 0;
}
.callout-warm p { color: var(--warm-text); font-style: italic; font-size: 1.08rem; }

/* CTA section light override */
.bg-teal-dark h2 { color: var(--warm-text) !important; }
.bg-teal-dark p  { color: var(--warm-mid) !important; }
.bg-teal-dark .btn-teal-light { background: var(--teal); color: #fff; border: none; }
.bg-teal-dark .btn-teal-light:hover { background: var(--teal-dark); }
.bg-teal-dark .btn-outline-white { border: 1px solid var(--teal); color: var(--teal); background: transparent; }
.bg-teal-dark .btn-outline-white:hover { background: var(--teal-pale); }

/* Light footer text overrides */
footer { color: var(--warm-text); }
.footer-col h4 { color: #2e4a5a; }
.footer-col ul li { color: #3a4e5c; }
.footer-col a { color: #3a4e5c; }
.footer-col a:hover { color: var(--teal); }
.footer-tagline { color: #3a4e5c !important; }
.footer-bottom { border-top: 1px solid #b4ccd8; color: #4a6468; }
.fb-link { color: var(--teal) !important; }

/* Footer text — strong readable dark */
footer, footer p, footer li, footer span, footer a { color: #2e4a5a !important; }
footer a:hover { color: var(--teal) !important; }
footer h4 { color: #2e4a5a !important; font-weight: 600; }
.footer-bottom { color: #3a4e5c !important; border-top: 1px solid #b4ccd8; }
.footer-tagline { color: #3a4e5c !important; }
.footer-col address a[href*="google.com/maps"] { text-decoration: none; }

/* FINAL OVERRIDE — hero em white */
.hero h1 em { color: rgba(255,255,255,0.92) !important; font-style: italic !important; text-shadow: none !important; }

/* ── SPACING IMPROVEMENTS ───────────────────────── */
.hero-content { max-width: 680px; }
.hero-eyebrow { margin-bottom: 14px; }
.hero h1 { margin-bottom: 22px; }
.hero-lead { max-width: 500px; margin-bottom: 0; }
section.bg-faint, section.bg-white, section.bg-pale { padding: 64px 0; }
section.bg-teal { padding: 52px 0; }
.two-col { gap: 64px; align-items: center; }
.section-lead { margin-bottom: 44px; }
.card-grid-3 { margin-top: 16px; }
.testi-grid { gap: 24px; }
.inner { padding: 0 48px; }
@media (max-width: 768px) { .inner { padding: 0 24px; } }

/* ── DAY AT EDEN TIMELINE ───────────────────────── */
.day-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.day-item {
  background: #f4f8fb;
  border: 1px solid #d4e4ed;
  border-radius: 8px;
  padding: 28px 24px;
  position: relative;
}
.day-item::before {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  background: var(--teal);
  border-radius: 2px;
  margin-bottom: 16px;
}
.day-time {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 600;
  margin-bottom: 10px;
}
.day-desc {
  font-size: 0.95rem;
  color: #3a4e5c;
  line-height: 1.75;
}
@media (max-width: 900px) {
  .day-timeline { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .day-timeline { grid-template-columns: 1fr; }
}

/* ── TEAM CARDS ─────────────────────────────────── */
.team-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
}
.team-photo {
  background: var(--teal-pale);
  padding: 40px 20px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}
.team-photo-label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-style: italic;
}
.team-info {
  padding: 22px 20px 26px;
}
.team-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 4px;
}
.team-role {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 500;
  margin-bottom: 10px;
}
.team-note {
  font-size: 0.87rem;
  color: var(--mid);
  line-height: 1.6;
  font-style: italic;
}

/* ── FOOTER CONTACT ROWS & MISSION ──────────────── */
.footer-top { grid-template-columns: 1.6fr 1.2fr 1fr; align-items: start; }
.footer-contact-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; font-size: 0.82rem; }
.footer-contact-row svg { flex-shrink: 0; margin-top: 2px; opacity: 0.7; }
.footer-mission-text { font-family: 'Cormorant Garamond', serif; font-size: 1.18rem; line-height: 1.9; font-style: italic; color: #1e3040; font-weight: 500; padding-top: 36px; }

/* ── CLEAN PAGE TITLE (replaces gradient band) ──── */
.page-title {
  margin-top: 96px;
  padding: 48px 0 36px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}
.page-title-eyebrow {
  font-size: 0.67rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.page-title-eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--teal);
  opacity: 0.6;
}
.page-title-h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  font-weight: 300;
  color: var(--charcoal);
  line-height: 1.15;
}
.page-title-h1 em {
  font-style: italic;
  color: var(--teal);
}

/* ── PAGES WITHOUT HEADER BAND ──────────────────── */
.page-no-header > section:first-of-type,
.page-no-header > div:first-of-type {
  margin-top: 96px;
}

/* ── HERO TRUST SIGNALS ─────────────────────────── */
.hero-trust {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.hero-trust-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hero-trust-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 400;
  color: #fff;
  line-height: 1;
}
.hero-trust-label {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  font-weight: 400;
}
.hero-trust-divider {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.2);
}
@media (max-width: 560px) {
  .hero-trust { flex-wrap: wrap; gap: 16px; }
  .hero-trust-divider { display: none; }
}

/* ── DAY TIMELINE — LARGE SERIF LABELS ──────────── */
.day-time-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 300;
  color: #2e4a5a;
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.day-item {
  position: relative;
  padding-top: 0;
}
.day-item::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--teal) 0%, transparent 100%);
  opacity: 0.3;
  margin-bottom: 14px;
}

/* ── STRIP ITEM HOVER ───────────────────────────── */
a.strip-item { display: block; text-decoration: none; transition: background 0.2s; border-radius: 6px; padding: 8px; margin: -8px; }
a.strip-item:hover { background: rgba(255,255,255,0.08); }
a.strip-item:hover .strip-label { color: #fff; }

/* ── WHATSAPP ICON ──────────────────────────────── */
a.soc[aria-label="WhatsApp"]:hover { color: #25D366; }

/* ════════════════════════════════════════════════════════════
   MOBILE RENDERING & NAVIGATION FIXES  (appended 2026-06)
   Fixes: hamburger tap target, hero text overflow, card grids,
   horizontal overflow, stat row clipping. Desktop unaffected.
   ════════════════════════════════════════════════════════════ */

/* 0. Stop any element forcing the page wider than the screen */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg { max-width: 100%; }

/* 1. NAV TOGGLE — make the hamburger reliably tappable.
   The <nav> was intercepting taps before they reached the button.
   Raise the button above the nav's own stacking context. */
nav { position: fixed; }
.nav-toggle {
  position: relative;
  z-index: 1002;            /* above nav (1000) and the open menu overlay (999) */
  width: 48px; height: 48px; /* proper finger-size tap target */
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
}
@media (max-width: 980px) {
  .nav-toggle { display: flex; }
  /* the open full-screen menu must sit below the toggle so the
     toggle stays tappable to close it, but above page content */
  .nav-links { z-index: 1001; }
  .nav-links.open { display: flex; }
}

/* 2. HERO — kill the forced no-wrap that clips the headline,
   give the hero a real height, and keep content inside the screen */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding: 120px 56px 64px;
  overflow: hidden;
}
.hero-content { position: relative; z-index: 2; width: 100%; }
.hero h1 span,
.hero h1 em { white-space: normal !important; } /* undo inline nowrap */

@media (max-width: 980px) {
  .hero { padding: 110px 22px 56px; min-height: 80vh; align-items: center; }
  .hero h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.18; }
  .hero-lead { font-size: 1rem; }
  .hero-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
  .hero-actions .btn { width: 100%; text-align: center; }
}

/* 3. HERO TRUST ROW — was running off the right edge */
@media (max-width: 980px) {
  .hero-trust { flex-wrap: wrap; gap: 14px 18px; justify-content: flex-start !important; }
}
@media (max-width: 560px) {
  .hero-trust-num { font-size: 1.2rem; }
  .hero-trust-label { font-size: 0.6rem; }
}

/* 4. CARD GRIDS — collapse cleanly on small screens.
   The 2-up grid was squeezing content into a narrow strip. */
@media (max-width: 780px) {
  .card-grid-4 { grid-template-columns: 1fr 1fr; gap: 16px; }
  .card-grid-3, .card-grid-2 { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 560px) {
  .card-grid-4 { grid-template-columns: 1fr; }
  .care-card { padding: 32px 26px; }
}

/* 5. SECTION & CONTENT PADDING — prevent text touching the edges
   and prevent the inner container forcing overflow */
@media (max-width: 980px) {
  section { padding: 56px 22px; }
  section.bg-faint, section.bg-white, section.bg-pale { padding: 56px 0; }
  .inner { padding: 0 22px; }
  .two-col, .contact-layout { grid-template-columns: 1fr; gap: 36px; }
}

/* 6. STAT BOXES & STRIP — single sensible column on phones */
@media (max-width: 560px) {
  .stats-row { grid-template-columns: 1fr 1fr; }
  .strip-inner { grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* 7. CONTACT FORM — the two-up name/contact row stacks on mobile */
@media (max-width: 620px) {
  .form-row { grid-template-columns: 1fr; }
  .form-box { padding: 32px 22px; }
}

/* 8. FOOTER — stack columns on small screens */
@media (max-width: 620px) {
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
}

/* 9. TYPACABILITY — ensure long words/emails don't overflow */
.contact-txt a, .footer-col a { word-break: break-word; }

/* lock background scroll while the mobile menu overlay is open */
body.menu-open { overflow: hidden; }

/* 10. Responsive 2-up grid (replaces inline fixed 2-column grids) */
.grid-2up { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 780px) { .grid-2up { grid-template-columns: 1fr; gap: 16px; } }
/* dementia page used inline repeat(2,1fr) on .card-grid-3 — now class-driven */
.card-grid-3.grid-2up { grid-template-columns: 1fr 1fr; }
@media (max-width: 780px) { .card-grid-3.grid-2up { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════
   MOBILE MENU OVERLAY FIX (appended 2026-06)
   Problem 1: vertical-centering pushed "Home" & "About Us" off
             the top of the screen behind the nav bar.
   Problem 2: translucent background blended into hero photos.
   Fix: top-align below the nav bar, solid opaque background,
        full-width tappable rows, clear dividers.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .nav-links.open {
    display: block;                /* block so <li> items stack and box grows to fit */
    list-style: none;
    margin: 0;
    position: fixed;
    top: 84px;                     /* just under the bar */
    bottom: auto;                  /* clear inherited bottom:0 from base rule */
    right: 12px;
    left: auto;                    /* anchor to the right, not full width */
    width: 240px;                  /* compact dropdown width */
    height: auto;                  /* only as tall as its contents */
    max-height: calc(100vh - 100px);
    padding: 6px 0;
    background: #ffffff;
    backdrop-filter: none;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 14px 38px rgba(0,0,0,0.18);
    overflow-y: auto;
    z-index: 1001;
  }
  .nav-links.open li { width: 100%; }
  .nav-links.open li a {
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px 20px;
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: var(--charcoal);                 /* dark text on white = readable */
    border-bottom: 1px solid var(--teal-faint);
    background: transparent;
  }
  .nav-links.open li:last-child a { border-bottom: none; }
  .nav-links.open li a:hover,
  .nav-links.open li a:active {
    background: var(--teal-faint);
    color: var(--teal);
  }
  /* keep the Enquire CTA looking like a button, but fit the narrow panel */
  .nav-links.open li a.nav-cta {
    background: var(--teal) !important;
    color: #fff !important;
    margin: 8px 14px 6px;
    width: calc(100% - 28px);
    border-radius: 6px;
    border-bottom: none;
    padding: 13px 20px;
    text-align: center;
  }
  .nav-links.open li a.nav-cta:hover { background: var(--teal-light) !important; }

  /* make sure the nav bar itself is solid while menu is open
     so the logo/hamburger don't sit over a photo */
  body.menu-open nav { background: #ffffff; }
}

/* ── CONTACT PAGE: form first on mobile ──────────────────
   On desktop the enquiry form sits beside the photo (image left,
   form right). On mobile the columns stack; by default the photo
   (min-height 500px) would push the form far down the page, making
   the enquiry form almost invisible on first load. Below 768px we
   flip the order so the FORM appears first and the photo sits under
   it — ensuring families reach the enquiry form immediately.
   ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .two-col.contact-enquire { display: flex; flex-direction: column; }
  .two-col.contact-enquire .form-box { order: 1; }
  .two-col.contact-enquire > div:first-child { order: 2; }   /* the image block */
  /* the tall image is unnecessary on mobile — let it size naturally and cap it */
  .two-col.contact-enquire > div:first-child {
    min-height: 0 !important;
    height: 220px;
  }
}