:root{
  --sea-deep:#0d3b53;
  --sea:#0f6d7e;
  --aqua:#25a8b0;
  --aqua-bright:#3cc6cd;
  --foam:#e8f6f6;
  --sand:#faf7f0;
  --shell:#fff;
  --palm:#2e7d67;
  --gold:#c8a45e;
  --ink:#123c4e;
  --ink-soft:#3d6577;
  --font-display:'Marcellus',serif;
  --font-accent:'Cormorant Garamond',serif;
  --font-body:'Mulish',sans-serif;
  --shadow-soft:0 18px 50px -18px rgba(13,59,83,.25);
  --shadow-card:0 10px 34px -14px rgba(13,59,83,.28);
  --radius:14px;
  --ease:cubic-bezier(.23,1,.32,1);
  --topbar-height:40px;
  --site-header-height:110px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;scroll-behavior:smooth;scroll-padding-top:var(--site-header-height)}
body{background:var(--sand);color:var(--ink);font:16px/1.65 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-top:var(--site-header-height)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{color:var(--sea-deep);font-family:var(--font-display);font-weight:400;line-height:1.15}
.container{margin-inline:50px}
.skip-link{background:var(--shell);border-radius:0 0 8px 8px;color:var(--sea-deep);font-weight:700;left:1rem;padding:.75rem 1rem;position:fixed;top:0;transform:translateY(-120%);transition:transform .16s var(--ease);z-index:100}
.skip-link:focus{transform:none}
.eyebrow{align-items:center;color:var(--aqua);display:inline-flex;font-size:.78rem;font-weight:700;gap:.9rem;letter-spacing:.28em;text-transform:uppercase}
.eyebrow::before{background:var(--aqua);content:"";height:1.5px;width:38px}
.accent-script{color:var(--aqua);font-family:var(--font-accent);font-style:italic;font-weight:500}
.btn{align-items:center;border:0;border-radius:60px;cursor:pointer;display:inline-flex;font-family:var(--font-body);font-size:.85rem;font-weight:700;gap:.6rem;justify-content:center;letter-spacing:.12em;min-height:48px;padding:1.05rem 2.1rem;text-transform:uppercase;transition:transform .16s var(--ease),box-shadow .22s var(--ease),background-color .22s ease}
.btn:active{transform:scale(.97)}
.btn svg{height:16px;width:16px}
.btn-primary{background:linear-gradient(120deg,var(--aqua),var(--sea));box-shadow:0 12px 28px -10px rgba(15,109,126,.55);color:#fff}
.btn-secondary{background:transparent;border:1.5px solid var(--sea);color:var(--sea)}
:focus-visible{outline:3px solid var(--aqua-bright);outline-offset:3px}

.topbar{background:var(--sea-deep);color:#cfeef0;font-size:.8rem;inset:0 0 auto;letter-spacing:.06em;position:fixed;width:100%;z-index:60}
.topbar .container{align-items:center;display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0}
.topbar .tag{color:#9fdfe3;font:italic .95rem var(--font-accent)}
.topbar-links{display:flex;flex-wrap:wrap;gap:1.6rem}
.topbar a{align-items:center;display:inline-flex;gap:.45rem;transition:color .18s ease}
.topbar svg{height:13px;width:13px}
.nav{backdrop-filter:blur(14px);background:rgba(250,247,240,.92);border-bottom:1px solid rgba(37,168,176,.15);left:0;position:fixed;right:0;top:var(--topbar-height);transition:box-shadow .22s ease;z-index:50}
.nav.scrolled{box-shadow:0 8px 30px -14px rgba(13,59,83,.25)}
.nav .container{align-items:center;display:flex;gap:1.5rem;justify-content:space-between;padding:.7rem 0}
/* larger logo without growing the header: negative block margin keeps the row height at 56px */
.nav-logo img{height:48px;width:auto}
.nav-links{align-items:center;display:flex;gap:2.1rem;list-style:none}
.nav-links a{color:var(--ink);font-size:.83rem;font-weight:600;letter-spacing:.14em;padding:.65rem 0;position:relative;text-transform:uppercase;white-space:nowrap}
.nav-links a::after{background:var(--aqua);bottom:0;content:"";height:2px;left:0;position:absolute;transition:width .22s var(--ease);width:0}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-phone{align-items:center;border:1.5px solid var(--aqua);border-radius:60px;color:var(--sea);display:inline-flex;font-size:.95rem;font-weight:700;gap:.55rem;padding:.6rem 1.3rem;transition:background-color .2s ease,color .2s ease;white-space:nowrap}
.nav-phone svg{height:15px;width:15px}
.nav-toggle{background:transparent;border:0;cursor:pointer;display:none;min-height:44px;min-width:44px;padding:.5rem}
.nav-toggle span{background:var(--sea-deep);border-radius:3px;display:block;height:2.5px;margin:5.5px auto;transition:transform .22s var(--ease),opacity .16s ease,background-color .16s ease;width:26px}

.page-hero{align-items:center;color:#fff;display:flex;isolation:isolate;min-height:260px;overflow:hidden;position:relative}
.page-hero--compact{padding-block:0}
.page-hero>img{height:100%;inset:0;object-fit:cover;position:absolute;width:100%;z-index:-2}
/* Keep the couple's faces in frame on this short, wide banner instead of
   the default center crop, which would cut them off at the top. */
#properties-hero>img{object-position:center 22%}
.page-hero .container{padding-block:3.8rem}
.page-hero .eyebrow{color:#eaffff;text-shadow:0 2px 5px rgba(3,18,28,.9),0 8px 24px rgba(3,18,28,.75)}
.page-hero .eyebrow::before{background:#eaffff;box-shadow:0 2px 8px rgba(3,18,28,.85)}
.page-hero h1{color:#fff;font-size:clamp(2.35rem,4.8vw,3.8rem);margin-bottom:.85rem;max-width:900px;text-shadow:0 2px 4px rgba(3,18,28,.95),0 10px 28px rgba(3,18,28,.82),0 20px 48px rgba(3,18,28,.65)}
.breadcrumbs{align-items:center;color:#f2ffff;display:flex;flex-wrap:wrap;font-size:.78rem;font-weight:700;gap:.6rem;letter-spacing:.14em;text-shadow:0 2px 4px rgba(3,18,28,.92),0 8px 20px rgba(3,18,28,.78);text-transform:uppercase}
.breadcrumbs a{color:#eaffff}
.breadcrumbs svg{height:13px;width:13px}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:1.7rem}

section{padding:6.5rem 0}
.section-head{margin-bottom:3.2rem;max-width:680px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head.center .eyebrow::before{display:none}
.section-head h2{font-size:clamp(2rem,3.5vw,3rem);margin-top:1rem}
.section-head p{color:var(--ink-soft);margin-top:1rem}
.section-head.amenities-intro{max-width:960px}
.story-grid{align-items:center;display:grid;gap:4.5rem;grid-template-columns:.95fr 1.05fr}
.story-media{position:relative}
.story-media img{aspect-ratio:4/4.7;border-radius:var(--radius);box-shadow:var(--shadow-card);object-fit:cover;width:92%}
.story-media::after{border:2px solid var(--aqua);border-radius:var(--radius);bottom:-1.4rem;content:"";height:58%;position:absolute;right:0;width:62%;z-index:-1}
.story-copy h2{font-size:clamp(2rem,3.4vw,2.9rem);margin:1rem 0 1.4rem}
.story-copy p{color:var(--ink-soft);margin-bottom:1rem}
.story-copy .signature{border-left:3px solid var(--aqua);color:var(--sea);font:italic 1.35rem/1.5 var(--font-accent);margin:1.6rem 0;padding-left:1.4rem}
.stats{border-top:1px solid rgba(37,168,176,.28);display:grid;gap:1rem;grid-template-columns:repeat(3,1fr);margin-top:2rem;padding-top:1.7rem}
.stat strong{color:var(--sea);display:block;font:2.1rem/1 var(--font-display)}
.stat span{color:var(--ink-soft);display:block;font-size:.75rem;letter-spacing:.12em;margin-top:.45rem;text-transform:uppercase}

.values{background:var(--foam)}
.card-grid{display:grid;gap:1.35rem;grid-template-columns:repeat(3,1fr)}
.value-card{background:var(--shell);border:1px solid rgba(37,168,176,.15);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:2rem}
.icon-disc{align-items:center;background:linear-gradient(135deg,var(--aqua-bright),var(--aqua));border-radius:50%;color:#fff;display:flex;height:52px;justify-content:center;margin-bottom:1.25rem;width:52px}
.icon-disc svg{height:24px;width:24px}
.value-card h3{font-size:1.25rem;margin-bottom:.65rem}
.value-card p{color:var(--ink-soft);font-size:.94rem}
.expertise{background:linear-gradient(150deg,var(--sea-deep),#0f5068 55%,var(--sea));color:#dff3f4;overflow:hidden;position:relative}
.expertise::before{background:radial-gradient(700px 360px at 90% -10%,rgba(60,198,205,.26),transparent 60%);content:"";inset:0;position:absolute}
.expertise .container{position:relative}
.expertise h2,.expertise h3{color:#fff}
.expertise .section-head p{color:#b9e2e5}
.expertise .eyebrow{color:#8ee9ec}
.expertise .eyebrow::before{background:#8ee9ec}
.service-list{display:grid;gap:1px;grid-template-columns:1fr 1fr;list-style:none;background:rgba(255,255,255,.12);border:1px solid rgba(142,233,236,.2);border-radius:var(--radius);overflow:hidden}
.service-list li{align-items:flex-start;background:rgba(255,255,255,.06);display:flex;gap:1rem;padding:1.45rem 1.6rem}
.service-list svg{color:#8ee9ec;flex:none;height:20px;margin-top:.2rem;width:20px}
.service-list strong{color:#fff;display:block;font-family:var(--font-display);font-size:1.05rem;font-weight:400}
.service-list span{color:#c5e8ea;display:block;font-size:.88rem;margin-top:.2rem}
.cta-band{background:var(--sand);text-align:center}
.cta-panel{background:var(--shell);border-radius:var(--radius);box-shadow:var(--shadow-soft);padding:clamp(2.2rem,5vw,4.5rem)}
.cta-panel h2{font-size:clamp(2rem,3.6vw,3.1rem)}
.cta-panel p{color:var(--ink-soft);margin:1rem auto 1.7rem;max-width:620px}

.intro-grid{align-items:center;display:grid;gap:4rem;grid-template-columns:.9fr 1.1fr}
.about-btn-mobile{display:none}
.intro-copy h2{font-size:clamp(2rem,3.4vw,2.6rem);margin:1rem 0 1.3rem}
.intro-copy p{color:var(--ink-soft);font-size:.95rem;margin-bottom:1rem}
.intro-image{aspect-ratio:4/3.4;border-radius:var(--radius);box-shadow:var(--shadow-card);height:100%;object-fit:cover;width:100%}
/* Family-mural photo behind the "Why South Seas Resort Real Estate Is
   Unique" section — no overlay wash, inv-white text-shadow keeps the
   heading legible, cards go translucent glass instead of flat opaque. */
#why-unique{background:url('/wp-content/themes/sanibel-captiva-realty/assets/img/scene-mural-family.webp') center/cover no-repeat fixed}
#why-unique .eyebrow{color:#7fe3e8}
#why-unique h2{color:#fff}
#why-unique .section-head p{color:#cfeef0}
.feature-grid{display:grid;gap:1.35rem;grid-template-columns:repeat(3,1fr)}
.feature-card{background:rgba(255,255,255,.78);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(37,168,176,.15);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:2rem}
.feature-card h3{font-size:1.25rem;margin-bottom:.65rem}
.feature-card p{color:var(--ink-soft);font-size:.94rem}
.split-cards{display:grid;gap:1.4rem;grid-template-columns:1fr 1fr}
.split-card{background:var(--shell);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:2.2rem}
.split-card h3{font-size:1.5rem;margin-bottom:.8rem}
.split-card p{color:var(--ink-soft)}
.split-card ul{display:grid;gap:.65rem;list-style:none;margin:1.25rem 0 1.7rem}
.split-card li{align-items:flex-start;display:flex;gap:.7rem}
.split-card li::before{color:var(--aqua);content:"✓";font-weight:700}
/* Same dark navy solid used by the footer elsewhere on this page. */
.video-band{background:var(--sea-deep);color:#fff;isolation:isolate;overflow:hidden;position:relative}
/* Slow-motion palm-frond shadow loop tucked into the corner to fill the
   otherwise empty space around the centered video, without competing with
   it — muted, looping, decorative only (aria-hidden). */
.shadow-video{background:url('/wp-content/themes/sanibel-captiva-realty/assets/img/palm-shadow-overlay.svg') top right/70% 100% no-repeat;inset:0;mix-blend-mode:multiply;overflow:hidden;pointer-events:none;position:absolute;z-index:-1}
.shadow-video video{height:100%;object-fit:cover;object-position:top right;width:100%}
@media (prefers-reduced-motion:reduce){.shadow-video video{display:none}}
.video-band .container{position:relative}
.video-band .eyebrow{color:#7fe3e8}
.video-band h2{color:#fff}
.video-band .section-head p{color:#cfeef0}
.video-band .hero-actions{margin-top:2.2rem}
.video-band .btn-secondary{background:rgba(9,26,36,.32);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-color:rgba(255,255,255,.75);color:#fff;text-shadow:0 2px 6px rgba(3,18,28,.6)}
.video-band .btn-secondary:hover{background:#fff;color:var(--sea-deep);text-shadow:none}
.philosophy{background:var(--foam)}
/* White heading text over the dark sunset photo — was inheriting the
   default dark heading color, which read as barely legible. */
.philosophy .eyebrow{color:#7fe3e8}
.philosophy h2{color:#fff}
.philosophy .section-head p{color:#cfeef0}
.philosophy-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(3,1fr)}
.philosophy-card{border-top:3px solid var(--aqua);padding:1.8rem 1.5rem;background:var(--shell);border-radius:0 0 var(--radius) var(--radius)}
.philosophy-card h3{font-size:1.25rem;margin-bottom:.65rem}
.philosophy-card p{color:var(--ink-soft)}
.location-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(3,1fr)}
.location-card{border-radius:var(--radius);min-height:330px;overflow:hidden;position:relative}
.location-card img{height:100%;inset:0;object-fit:cover;position:absolute;width:100%}
.location-card::after{background:linear-gradient(to top,rgba(9,42,60,.72),rgba(9,42,60,0) 55%);content:"";inset:0;position:absolute}
.location-card div{bottom:0;color:#dff3f4;padding:1.6rem;position:absolute;z-index:1}
.location-card h3{color:#fff;font-size:1.45rem;margin-bottom:.4rem}
.location-card p{font-size:.9rem}

.filter-row{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-bottom:2.5rem}
.filter-chip{border:1px solid rgba(15,109,126,.28);border-radius:999px;color:var(--sea);font-size:.76rem;font-weight:700;letter-spacing:.08em;min-height:44px;padding:.7rem 1rem;text-transform:uppercase}
.property-grid{display:grid;gap:1.4rem;grid-template-columns:repeat(3,1fr)}
.property-card{background:var(--shell);border-radius:var(--radius);box-shadow:var(--shadow-card);overflow:hidden}
.property-card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.property-body{padding:1.5rem}
.property-kicker{color:var(--aqua);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.property-body h3{font-size:1.35rem;margin:.45rem 0 .65rem}
.property-body p{color:var(--ink-soft);font-size:.91rem}
.amenity-tags{display:flex;flex-wrap:wrap;gap:.45rem;margin:1rem 0 1.25rem}
.amenity-tags span{background:var(--foam);border-radius:999px;color:var(--sea);font-size:.7rem;font-weight:700;padding:.4rem .65rem}
.text-link{align-items:center;color:var(--sea);display:inline-flex;font-size:.78rem;font-weight:700;gap:.4rem;letter-spacing:.08em;min-height:44px;text-transform:uppercase}
.text-link svg{height:14px;width:14px}
.highlight-grid{align-items:center;display:grid;gap:3.5rem;grid-template-columns:1.1fr .9fr}
.highlight-grid img{aspect-ratio:16/11;border-radius:var(--radius);box-shadow:var(--shadow-card);object-fit:cover;width:100%}
.highlight-copy h2{font-size:clamp(2rem,3.4vw,2.9rem);margin:1rem 0}
.highlight-copy p{color:var(--ink-soft);margin-bottom:1rem}
/* Full-width editorial property-type banners (image-forward, alternating) */
.type-banners{display:flex;flex-direction:column;gap:clamp(2.6rem,5vw,5rem)}
.type-banner{align-items:center;display:grid;gap:clamp(1.6rem,4vw,3.8rem);grid-template-columns:1.42fr 1fr}
.type-banner.flip{grid-template-columns:1fr 1.42fr}
.type-banner.flip .type-banner-media{order:2}
.type-banner.flip .type-banner-body{order:1}
.type-banner-media{aspect-ratio:16/10;border-radius:var(--radius);box-shadow:var(--shadow-card);overflow:hidden;position:relative}
.type-banner-media img{height:100%;object-fit:cover;transition:transform .8s var(--ease);width:100%}
.type-banner:hover .type-banner-media img{transform:scale(1.045)}
.type-banner-media .scr-badge{left:1rem;position:absolute;top:1rem}
.type-banner-media .photo-pending{aspect-ratio:16/10;border-radius:0;box-shadow:none;height:100%}
.type-banner-body{display:flex;flex-direction:column;gap:.75rem}
.type-banner-body h3{font-size:clamp(1.7rem,3.1vw,2.7rem);margin-top:.15rem}
.type-banner-body p{color:var(--ink-soft);font-size:1.02rem;line-height:1.72;max-width:54ch}
.type-banner-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.1rem}
.type-banner-actions .btn{min-height:46px}
/* Active listings (listings.html) — a p-card carousel (same shell as Sold
   Properties) extended with the office flyer's fields: "Listing Details",
   listing agent, MLS number. */
.listing-card .p-card-body>p{max-width:none}
.listing-specs{grid-template-columns:1fr 1fr;margin:.4rem 0 .2rem}
.listing-agent{color:var(--sea-deep);font-size:.95rem;margin:.35rem 0 0}
.listing-agent a{color:inherit;font-weight:600}
.listing-mls{color:var(--ink-soft);font-size:.82rem;letter-spacing:.04em;margin:.1rem 0 0;text-transform:uppercase}
.listing-card .p-card-actions{flex-direction:column;align-items:flex-start;gap:.6rem}
.listings-disclaimer{color:var(--ink-soft);font-size:.8rem;line-height:1.6;margin-top:clamp(1.6rem,3vw,2.4rem);text-align:center}
.listings-empty{color:var(--ink-soft);font-size:1.02rem;text-align:center}
.photo-pending{align-items:center;aspect-ratio:16/10;background:linear-gradient(135deg,var(--foam),rgba(37,168,176,.18));border-radius:var(--radius);box-shadow:var(--shadow-card);color:var(--sea);display:grid;justify-items:center;padding:2rem;text-align:center;width:100%}
.photo-pending svg{height:68px;margin-bottom:1rem;width:68px}
.photo-pending span{color:var(--ink-soft);font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
@media (max-width:820px){
  .type-banner,.type-banner.flip{grid-template-columns:1fr}
  .type-banner.flip .type-banner-media,.type-banner.flip .type-banner-body{order:initial}
}
.gallery-grid{display:grid;gap:1rem;grid-template-columns:repeat(4,1fr)}
.gallery-grid figure{border-radius:var(--radius);overflow:hidden;position:relative}
.gallery-grid img{aspect-ratio:1/1.08;height:100%;object-fit:cover;width:100%}
.gallery-grid figcaption{background:linear-gradient(to top,rgba(9,42,60,.82),transparent);bottom:0;color:#fff;font:1rem var(--font-display);left:0;padding:2.5rem 1rem 1rem;position:absolute;right:0}
.faq-list{display:grid;gap:.8rem;max-width:860px;margin-inline:auto}
.faq-list details{background:var(--shell);border:1px solid rgba(37,168,176,.18);border-radius:12px;padding:1.1rem 1.25rem}
.faq-list summary{color:var(--sea-deep);cursor:pointer;font-family:var(--font-display);font-size:1.08rem;font-weight:400;min-height:44px}
.faq-list p{color:var(--ink-soft);padding-top:.75rem}

.contact-intro{background:var(--foam)}
/* Both columns are cards of equal height (align-items:stretch) so the
   shorter copy never leaves a bare gap next to the taller form card. */
.contact-layout{align-items:stretch;display:grid;gap:4rem;grid-template-columns:.85fr 1.15fr}
.contact-copy{background:var(--shell);border-radius:var(--radius);box-shadow:var(--shadow-soft);display:flex;flex-direction:column;justify-content:center;padding:clamp(1.5rem,4vw,2.6rem)}
.contact-copy h2{font-size:clamp(2rem,3.4vw,2.9rem);margin:1rem 0}
.contact-copy>p{color:var(--ink-soft)}
.contact-methods{display:grid;gap:1rem;margin-top:2rem}
.contact-method{align-items:flex-start;background:var(--foam);border:1px solid rgba(37,168,176,.15);border-radius:12px;display:flex;gap:1rem;padding:1.2rem;transition:transform .16s var(--ease),box-shadow .22s var(--ease)}
.contact-method svg{color:var(--aqua);flex:none;height:21px;margin-top:.1rem;width:21px}
.contact-method strong{color:var(--sea-deep);display:block;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase}
.contact-method span{color:var(--ink-soft);display:block;font-size:.92rem;margin-top:.18rem}
.contact-method span a{color:var(--sea);font-weight:600;display:inline}
.contact-method span a:hover{color:var(--aqua);text-decoration:underline}
.form-card{background:var(--shell);border-radius:var(--radius);box-shadow:var(--shadow-soft);padding:clamp(1.5rem,4vw,2.6rem)}
.form-card h2{font-size:1.75rem}
.form-card>p{color:var(--ink-soft);font-size:.92rem;margin:.45rem 0 1.6rem}
.form-grid{display:grid;gap:1.1rem}
.row-2{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
.field label{color:var(--ink-soft);display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;margin-bottom:.4rem;text-transform:uppercase}
.field input,.field select,.field textarea{appearance:auto;background:#fdfefe;border:1.5px solid #d7e8ea;border-radius:9px;color:var(--ink);font:1rem var(--font-body);min-height:48px;padding:.85rem 1rem;transition:border-color .18s ease,box-shadow .18s ease;width:100%}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--aqua);box-shadow:0 0 0 3px rgba(37,168,176,.18);outline:0}
.form-note{color:var(--ink-soft);font-size:.78rem}
.field-hint{color:var(--ink-soft);font-size:.78rem;margin-top:.45rem;line-height:1.5}
.privacy-consent{align-items:flex-start;color:var(--ink-soft);cursor:pointer;display:flex;font-size:.85rem;gap:.65rem;line-height:1.5}
.privacy-consent input{accent-color:var(--aqua);flex:0 0 auto;height:18px;margin-top:.15rem;width:18px}
.privacy-consent a{color:var(--sea);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.form-status{color:var(--sea);font-size:.9rem;font-weight:700;min-height:1.5rem}
/* Same treatment as the home page's Begin Your Island Story section: one
   full-bleed photo (no overlay wash), a glass hero-panel floating on top for
   legibility, and section height driven by padding + content instead of a
   fixed min-height. */
/* Fixed attachment gives the section a light parallax feel as the page
   scrolls — same technique as #amenities / #why-choose-us. */
.office{position:relative;color:#fff;isolation:isolate;padding:4.5rem 0;background:url('/wp-content/themes/sanibel-captiva-realty/assets/img/scene-pool-sunrise-family.webp') center/cover no-repeat fixed}
.hero-panel{
  background:rgba(5,29,40,.3);border:1px solid rgba(255,255,255,.28);border-radius:var(--radius);
  box-shadow:0 18px 44px -24px rgba(3,18,28,.72);padding:clamp(1.35rem,3vw,2.1rem);
  -webkit-backdrop-filter:blur(4px) saturate(1.06);backdrop-filter:blur(4px) saturate(1.06);
}
/* Right-aligned so the panel sits over open water instead of the family on
   the left of the photo; a stronger tint offsets the brighter sunset glare
   on this side of the frame. */
.office-card{background:rgba(5,29,40,.62);margin-left:auto;max-width:560px}
.office-card .eyebrow{color:#7fe3e8;text-shadow:0 2px 5px rgba(3,18,28,.9),0 8px 24px rgba(3,18,28,.75)}
.office-card h2{color:#fff;font-size:clamp(2rem,3.4vw,2.6rem);margin-bottom:1rem;text-shadow:0 2px 4px rgba(3,18,28,.95),0 10px 28px rgba(3,18,28,.82),0 20px 48px rgba(3,18,28,.65)}
.office-card p{color:#cfeef0;margin-bottom:1rem;text-shadow:0 2px 4px rgba(3,18,28,.9),0 8px 24px rgba(3,18,28,.78)}
.office-card ul{border-top:1px solid rgba(255,255,255,.25);display:grid;gap:.85rem;list-style:none;margin-top:1.5rem;padding-top:1.5rem}
.office-card li{align-items:flex-start;display:flex;gap:.75rem;text-shadow:0 2px 4px rgba(3,18,28,.9),0 6px 18px rgba(3,18,28,.7)}
.office-card svg{color:#8ee9ec;flex:none;height:18px;margin-top:.2rem;width:18px;filter:drop-shadow(0 2px 4px rgba(3,18,28,.85))}
/* No overlay wash on the photo — legibility comes from text-shadow, same
   as the other photo-backed bands on the site. */
.map-panel{align-items:center;background:url('/wp-content/themes/sanibel-captiva-realty/assets/img/hero-marina.webp') center/cover;border-radius:var(--radius);color:#dff3f4;display:grid;gap:2rem;grid-template-columns:1fr auto;min-height:300px;padding:clamp(2rem,5vw,4rem)}
.map-panel .eyebrow{color:#7fe3e8;text-shadow:0 2px 5px rgba(3,18,28,.9),0 8px 24px rgba(3,18,28,.75)}
.map-panel h2{color:#fff;font-size:clamp(2rem,3.4vw,2.8rem);margin:.8rem 0;text-shadow:0 2px 4px rgba(3,18,28,.95),0 10px 28px rgba(3,18,28,.82),0 20px 48px rgba(3,18,28,.65)}
.map-panel p{max-width:650px;text-shadow:0 2px 4px rgba(3,18,28,.9),0 8px 24px rgba(3,18,28,.78)}
.map-panel .panel-actions{display:flex;flex-direction:column;gap:.9rem}
/* Same treatment as .cta-panel.tropical .btn-secondary: a dark translucent
   fill behind the white outline so the label stays readable over the photo. */
.map-panel .btn-secondary{background:rgba(9,26,36,.32);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-color:rgba(255,255,255,.75);color:#fff;text-shadow:0 2px 6px rgba(3,18,28,.6)}
.map-panel .btn-secondary:hover{background:#fff;color:var(--sea-deep);text-shadow:none}

footer{background:#092f43;color:#acd4d8;padding-top:4.5rem}
.footer-cta{position:relative;isolation:isolate;overflow:hidden;margin-top:-4.5rem;margin-bottom:3.6rem;padding:clamp(3rem,7vw,5.5rem) 0;color:#fff;text-align:center;background:url('/wp-content/themes/sanibel-captiva-realty/assets/img/footer-cta.webp') center/cover no-repeat}
.footer-cta .container{position:relative}
.footer-cta .eyebrow{color:#eaffff;justify-content:center;text-shadow:0 2px 5px rgba(3,18,28,.92),0 8px 24px rgba(3,18,28,.8)}
.footer-cta .eyebrow::before{display:none}
.footer-cta h2{color:#fff;font-size:clamp(1.5rem,3.2vw,2.4rem);max-width:820px;margin:1rem auto 0;line-height:1.28;text-shadow:0 2px 4px rgba(3,18,28,.95),0 10px 26px rgba(3,18,28,.85),0 20px 46px rgba(3,18,28,.7)}
.footer-cta-phones{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:1.9rem}
.footer-cta-phones a{align-items:center;background:rgba(9,26,36,.32);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,.75);border-radius:60px;color:#fff;display:inline-flex;font-size:1rem;font-weight:700;gap:.6rem;padding:.8rem 1.6rem;text-shadow:0 2px 6px rgba(3,18,28,.6);transition:background .25s,color .25s}
.footer-cta-phones a:hover{background:#fff;color:var(--sea-deep);text-shadow:none}
.footer-cta-phones svg{height:16px;width:16px}
.footer-grid{display:grid;gap:3rem;grid-template-columns:1.5fr 1fr 1fr 1.2fr;padding-bottom:3.7rem}
.footer-brand{text-align:center}
.footer-logo{display:block;line-height:0;margin-bottom:0;margin-inline:auto;width:fit-content}
.footer-logo img{height:auto;width:min(340px,100%)}
.footer-brand p{font-size:.9rem;font-weight:300;margin-inline:auto;max-width:310px}
.footer-grid h4{color:#fff;font-family:var(--font-body);font-size:.8rem;font-weight:700;letter-spacing:.18em;margin-bottom:1.15rem;text-transform:uppercase}
.footer-grid ul{display:grid;gap:.7rem;list-style:none}
.footer-grid li,.footer-grid a{font-size:.88rem}
.footer-grid a{transition:color .18s ease}
.footer-bottom{border-top:1px solid rgba(142,233,236,.18);color:#7fb7bd;font-size:.8rem;padding:1.4rem 0}
.footer-bottom .container{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;padding-inline:1rem}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}

@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px)}
  .btn-primary:hover{box-shadow:0 16px 34px -10px rgba(15,109,126,.65)}
  .btn-secondary:hover{background:var(--sea);color:#fff}
  .nav-phone:hover{background:var(--aqua);color:#fff}
  .topbar a:hover,.footer-grid a:hover{color:#fff}
  .contact-method:hover{box-shadow:var(--shadow-card);transform:translateY(-2px)}
}
@media (max-width:1100px){.nav-phone{display:none}.nav-links{gap:1.35rem}.nav-logo img{height:44px}}
@media (max-width:900px){
  .story-grid,.contact-layout,.intro-grid,.highlight-grid,.map-panel{grid-template-columns:1fr}
  .intro-grid-img-first-mobile .intro-image{order:-1}
  .story-media img{width:100%}
  .card-grid,.feature-grid,.property-grid,.location-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  :root{--topbar-height:80px;--site-header-height:146px}
  .container{margin-inline:20px}
  .nav{backdrop-filter:none}
  .nav-logo img{height:44px}
  section{padding:4.5rem 0}
  .topbar .container{justify-content:center}.topbar .tag{display:none}
  .nav-links{background:rgba(9,42,60,.98);flex-direction:column;gap:1.7rem;inset:0;justify-content:center;position:fixed;transform:translateX(100%);transition:transform .28s var(--ease);z-index:80}
  .nav-links.open{transform:none}.nav-links a{color:#fff;font-size:1.05rem;padding:.75rem}.nav-toggle{display:block;position:relative;z-index:90}
  .nav-toggle.open span:nth-child(1){background:#fff;transform:translateY(8px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){background:#fff;transform:translateY(-8px) rotate(-45deg)}
  .page-hero{min-height:220px}.page-hero .container{padding-block:3rem}
  .card-grid,.service-list,.row-2,.feature-grid,.property-grid,.location-grid,.split-cards,.philosophy-grid{grid-template-columns:1fr}
  .stats{gap:.65rem}.stat strong{font-size:1.65rem}.stat span{font-size:.66rem}
  .footer-grid{grid-template-columns:1fr;text-align:center;gap:2rem}
  .footer-logo{margin-inline:auto}
  .footer-brand p{margin-inline:auto}
  .footer-bottom .container{flex-direction:column;align-items:center;text-align:center;gap:.8rem;justify-content:center}
  .story-media::after{display:none}
  .hero-panel{padding:1.3rem 1.45rem}
  .gallery-grid{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- Properties nav "toolbar" dropdown ---------- */
.nav-dropdown{align-items:center;display:flex;gap:.1rem;position:relative}
.nav-drop-toggle{align-items:center;background:transparent;border:0;color:var(--sea-deep);cursor:pointer;display:inline-flex;justify-content:center;min-height:32px;padding:.3rem .1rem}
.nav-drop-toggle svg{height:14px;transition:transform .2s ease;width:14px}
.nav-dropdown.open .nav-drop-toggle svg{transform:rotate(180deg)}
.nav-drop-menu{background:var(--shell);border:1px solid rgba(37,168,176,.2);border-radius:14px;box-shadow:0 26px 60px -22px rgba(13,59,83,.45);display:none;gap:2.4rem;grid-template-columns:repeat(2,auto);left:50%;padding:1.25rem 1.75rem;position:absolute;top:100%;transform:translateX(-50%);z-index:80}
.nav-dropdown.open .nav-drop-menu{display:grid}
.nav-drop-label{color:var(--sea);display:block;font-size:.74rem;font-weight:800;letter-spacing:.18em;line-height:1.25;margin-bottom:.65rem;text-transform:uppercase;white-space:nowrap}
.nav-drop-sublabel{color:var(--sea-deep);display:block;font-size:.68rem;font-weight:700;letter-spacing:.12em;line-height:1.3;margin:.75rem 0 .25rem;text-transform:uppercase;white-space:nowrap}
.nav-drop-sublabel:first-of-type{margin-top:0}
.nav-links .nav-drop-menu a{color:var(--ink-soft);display:block;font-size:.86rem;font-weight:500;letter-spacing:.01em;line-height:1.35;padding:.32rem 0;text-transform:none}
.nav-links .nav-drop-menu a::after{display:none}
.nav-links .nav-drop-menu a:hover{color:var(--sea-deep)}
@media (hover:hover) and (min-width:721px){.nav-dropdown:hover .nav-drop-menu{display:grid}}
@media (max-width:720px){
  .nav-dropdown{flex-wrap:wrap;justify-content:center}
  .nav-drop-toggle{color:#fff}
  .nav-drop-menu{background:transparent;border:0;box-shadow:none;grid-template-columns:1fr;left:auto;max-height:38vh;overflow-y:auto;padding:.4rem 0 0;position:static;transform:none;width:100%}
  .nav-links .nav-drop-menu a{color:#cfeef0;font-size:.91rem;font-weight:500;text-align:center}
  .nav-drop-label{color:var(--aqua-bright);font-size:.76rem;text-align:center}
  .nav-drop-sublabel{color:#fff;font-size:.7rem;font-weight:700;text-align:center}
}

/* ---------- SOLD stamp over sold-property photos ---------- */
.sold-stamp{filter:drop-shadow(0 6px 16px rgba(0,0,0,.3));left:50%;max-width:210px;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%) rotate(-12deg);width:46%;z-index:2}

/* ---------- property-type modal feature bullets ---------- */
.modal-features{display:grid;gap:.45rem;list-style:none;margin:0 0 1.3rem;padding:0}
.modal-features li{align-items:flex-start;color:var(--ink-soft);display:flex;font-size:.95rem;gap:.6rem}
.modal-features li::before{color:var(--aqua);content:"¹3";font-weight:800}

/* ---------- resort amenity cards (lifestyle page) ---------- */
.life-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(3,1fr)}
.life-item{aspect-ratio:3/2.1;background:none;border:0;border-radius:var(--radius);box-shadow:var(--shadow-card);cursor:pointer;display:block;font:inherit;overflow:hidden;padding:0;position:relative;text-align:left;transition:box-shadow .25s var(--ease);width:100%}
.life-item:hover{box-shadow:0 22px 46px -18px rgba(13,59,83,.42)}
.life-item img{height:100%;object-fit:cover;transition:transform .6s var(--ease);width:100%}
.life-item:hover img{transform:scale(1.07)}
.life-item>span{bottom:1rem;color:#fff;font-family:var(--font-display);font-size:1.1rem;left:1.1rem;position:absolute;text-shadow:0 2px 14px rgba(9,42,60,.7);z-index:2}
.life-item .life-cue{background:rgba(255,255,255,.92);border-radius:60px;bottom:auto;color:var(--sea-deep);font-family:var(--font-body);font-size:.64rem;font-weight:700;left:auto;letter-spacing:.14em;opacity:0;padding:.4rem .7rem;right:.85rem;text-shadow:none;text-transform:uppercase;top:.85rem;transform:translateY(-4px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.life-item:hover .life-cue,.life-item:focus-visible .life-cue{opacity:1;transform:none}
.life-item::after{background:linear-gradient(to top,rgba(9,42,60,.55),transparent 45%);content:"";inset:0;position:absolute}
@media (max-width:900px){.life-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.life-grid{grid-template-columns:1fr}}

/* ---------- tropical CTA panel (lifestyle) ---------- */
.cta-panel.tropical{background:url('/wp-content/themes/sanibel-captiva-realty/assets/img/invitational-family.webp') center/cover no-repeat;color:#fff}
/* per-page CTA variants so no page repeats a background image */
.cta-panel.tropical.cta-tiki{background-image:url('/wp-content/themes/sanibel-captiva-realty/assets/img/scene-tiki-sunset.webp')}
.cta-panel.tropical.cta-pool{background-image:url('/wp-content/themes/sanibel-captiva-realty/assets/img/scene-pool-family.webp')}
.cta-panel.tropical.cta-harbor{background-image:url('/wp-content/themes/sanibel-captiva-realty/assets/img/amenities/yacht-harbor.webp')}
.cta-panel.tropical.cta-pass{background-image:url('/wp-content/themes/sanibel-captiva-realty/assets/img/scene-captiva-pass.webp')}
.cta-panel.tropical .eyebrow,.cta-panel.tropical h2,.cta-panel.tropical p{text-shadow:0 2px 16px rgba(3,18,28,.95),0 1px 4px rgba(3,18,28,.98)}
.cta-panel.tropical h2{color:#fff}
.cta-panel.tropical p{color:#eef9fa}
.cta-panel.tropical .eyebrow{color:#a9eef0}
/* Same treatment as .footer-cta-phones a: a dark translucent fill behind the
   white outline so the label stays readable over the photo background. */
.cta-panel.tropical .btn-secondary{background:rgba(9,26,36,.32);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-color:rgba(255,255,255,.75);color:#fff;text-shadow:0 2px 6px rgba(3,18,28,.6)}
.cta-panel.tropical .btn-secondary:hover{background:#fff;color:var(--sea-deep);text-shadow:none}

/* ---------- Meet Marty & Joni: two headshots flanking the story ---------- */
.team-duo{align-items:start;display:grid;gap:2.6rem;grid-template-columns:.72fr 1.56fr .72fr}
.team-member{text-align:center}
.team-member img{aspect-ratio:3/4;border-radius:var(--radius);box-shadow:var(--shadow-card);object-fit:cover;width:100%}
.team-member h3{font-size:1.3rem;margin-top:1rem}
.team-member .team-contact{color:var(--sea);display:block;font-size:.92rem;font-weight:700;margin-top:.35rem}
.team-member .team-contact:hover{color:var(--aqua)}
.team-duo .story-copy h2{font-size:clamp(1.8rem,3vw,2.5rem)}
@media (max-width:1024px){
  .team-duo{grid-template-columns:1fr 1fr}
  .team-duo .story-copy{grid-column:1/-1;order:3}
}
@media (max-width:560px){.team-duo{grid-template-columns:1fr}}

.life-item .life-pending{align-items:center;background:linear-gradient(135deg,var(--foam),rgba(37,168,176,.24));bottom:0;color:var(--sea);display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}
.life-pending svg{height:64px;opacity:.55;width:64px}
.life-item.pending::after{background:linear-gradient(to top,rgba(255,255,255,.55),transparent 42%)}
.life-item.pending>span{color:var(--sea-deep);text-shadow:0 1px 3px rgba(255,255,255,.7)}
.life-item.pending .life-cue{background:var(--sea);color:#fff;opacity:1;transform:none}

/* Give amenity cards enough scrollport breathing room for their existing shadow. */
.amenity-carousel .scr-track{padding:.9rem 1rem 2rem}