/* Beach Breaks — production stylesheet
   Structure: reset → variables → base → layout → components → utilities → media queries */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth}
body{margin:0;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p,figure{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--navy-600)}
a:hover{color:var(--brass-600)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- Variables ---------- */
:root{
  --navy-900:#0a2233;--navy-800:#0e3753;--navy-700:#1b4d6b;--navy-600:#2e6385;
  --brass-500:#c9a96a;--brass-600:#b08d4f;--sand-300:#e3d4b8;--shell-100:#f4ede1;
  --canvas:#fcfaf6;--white:#fff;--mist-100:#f3f1ec;--line-300:#ddd8cd;
  --ink-700:#4a5560;--ink-500:#7b8590;--ink-300:#a8b0b8;--error:#c2544a;
  --on-dark:#eef3f6;--on-dark-muted:#9fb6c4;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost',system-ui,-apple-system,sans-serif;
  --hairline:1px solid var(--line-300);
  --shadow-sm:0 2px 8px rgba(14,55,83,.06);--shadow-card:0 14px 40px rgba(14,55,83,.10);
  --focus-ring:0 0 0 3px rgba(46,99,133,.22);
  --sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-24:96px;--sp-32:128px;
  --section-y:clamp(60px,9vw,128px);
}

/* ---------- Base ---------- */
body{background:var(--canvas);color:var(--ink-700);font-family:var(--sans);font-size:16px;line-height:1.6}
h1,h2,h3{font-family:var(--serif);font-weight:500;color:var(--navy-800);line-height:1.1;text-wrap:balance}
h1{font-size:clamp(38px,5.5vw,76px);letter-spacing:-.5px;line-height:1.04}
h1.display-lg,h2.display-lg{font-size:clamp(34px,4.2vw,60px);line-height:1.06}
h2{font-size:clamp(30px,3.2vw,46px)}
h3{font-size:clamp(22px,2vw,28px);line-height:1.15}
p{text-wrap:pretty}
.lead{font-size:clamp(16px,1.25vw,18px);line-height:1.75;max-width:60ch}
.serif-num{font-family:var(--serif);color:var(--brass-500);line-height:1}

/* ---------- Layout ---------- */
.container{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,32px)}
.section{padding:var(--section-y) 0}
.split{display:grid;gap:clamp(32px,5vw,80px);align-items:start}
.split-57{grid-template-columns:5fr 7fr}
.split-75{grid-template-columns:7fr 5fr}
.split-56{grid-template-columns:5fr 6fr}
.split-65{grid-template-columns:6fr 5fr}
.split-66{grid-template-columns:1fr 1fr}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.center{text-align:center}

/* ---------- Components ---------- */
/* Eyebrow */
.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:20px;font-size:13px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-600)}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--brass-500);flex:none}
.eyebrow.on-dark{color:var(--brass-500)}
.eyebrow.centered{justify-content:center}
.eyebrow.centered::after{content:"";width:24px;height:1px;background:var(--brass-500);flex:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 28px;border:none;border-radius:4px;font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.04em;text-decoration:none;cursor:pointer;transition:background .2s ease-out,color .2s ease-out,transform .2s ease-out,box-shadow .2s ease-out}
.btn-gold{background:var(--brass-500);color:var(--navy-900)}
.btn-gold:hover{background:var(--brass-600);color:var(--navy-900);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-navy{background:var(--navy-800);color:#fff}
.btn-navy:hover{background:var(--navy-700);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-ghost{background:transparent;border:1px solid var(--navy-800);color:var(--navy-800)}
.btn-ghost:hover{background:rgba(14,55,83,.06);color:var(--navy-800)}
.btn-ghost-light{background:transparent;border:1px solid rgba(255,255,255,.6);color:#fff}
.btn-ghost-light:hover{background:rgba(255,255,255,.1);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:16px}
.text-link{font-weight:500;color:var(--navy-600);text-decoration:none;border-bottom:1px solid var(--brass-500);padding-bottom:2px}
.text-link:hover{color:var(--navy-800)}
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* Header / nav */
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .25s ease-out,border-color .25s ease-out}
.site-header .nav-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.site-header{border-bottom:1px solid transparent}
.site-header.solid{background:var(--canvas);border-bottom:var(--hairline)}
.logo img{height:20px;width:auto}
.logo .logo-navy{display:none}
.site-header.solid .logo-white,.site-header.on-light .logo-white{display:none}
.site-header.solid .logo-navy,.site-header.on-light .logo-navy{display:block}
.site-header.on-light{background:var(--canvas);border-bottom:var(--hairline)}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{font-size:14px;letter-spacing:.04em;text-decoration:none;color:var(--on-dark);padding:12px 0;border-bottom:1px solid transparent}
.nav-links a[aria-current="page"]{border-bottom-color:var(--brass-500)}
.site-header.solid .nav-links a,.site-header.on-light .nav-links a{color:var(--navy-800)}
.nav-links a:hover{color:var(--brass-500)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-cta .btn{min-height:44px;padding:11px 22px;font-size:14px}
.nav-cta .btn-ghost-nav{background:transparent;border:1px solid rgba(255,255,255,.55);color:var(--on-dark)}
.site-header.solid .btn-ghost-nav,.site-header.on-light .btn-ghost-nav{border-color:var(--navy-800);color:var(--navy-800)}
.nav-cta .btn-ghost-nav:hover{background:rgba(201,169,106,.12)}
/* Hamburger */
.nav-toggle{display:none;width:48px;height:48px;background:none;border:none;cursor:pointer;padding:12px;z-index:210}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--on-dark);margin:5px 0;transition:transform .25s ease-out,opacity .2s}
.site-header.solid .nav-toggle span,.site-header.on-light .nav-toggle span{background:var(--navy-800)}
body.menu-open .nav-toggle span{background:var(--on-dark)}
body.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .nav-toggle span:nth-child(2){opacity:0}
body.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:200;background:var(--navy-900);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;opacity:0;visibility:hidden;transition:opacity .3s ease-out,visibility .3s}
body.menu-open .mobile-menu{opacity:1;visibility:visible}
.mobile-menu a{font-family:var(--serif);font-size:32px;color:var(--on-dark);text-decoration:none;padding:12px 24px;min-height:44px}
.mobile-menu a:hover{color:var(--brass-500)}
.mobile-menu .btn{font-family:var(--sans);font-size:15px;margin-top:16px}
body.menu-open{overflow:hidden}

/* Hero */
.hero{position:relative;z-index:0;display:flex;align-items:center;min-height:88vh;color:#fff;overflow:hidden}
.hero.compact{min-height:60vh}
.hero.mid{min-height:72vh}
.hero-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(10,34,51,.8) 0%,rgba(10,34,51,.5) 55%,rgba(10,34,51,.3) 100%)}
.hero .container{padding-top:140px;padding-bottom:96px;width:100%}
.hero-inner{max-width:680px}
.hero h1{color:#fff}
.hero .lead{color:var(--on-dark);margin:24px 0 40px}
.hero .eyebrow{color:var(--brass-500)}
.trust-strip{border-top:1px solid rgba(255,255,255,.25);padding-top:20px;margin-top:56px;font-size:13px;letter-spacing:.06em;color:#bcd4e0}

/* Bands */
.band-white{background:var(--white)}
.band-shell{background:var(--shell-100)}
.band-navy{background:var(--navy-800)}
.band-deep{background:var(--navy-900)}
.band-navy h2,.band-deep h2,.band-navy h3,.band-deep h3{color:#fff}
.band-navy p,.band-deep p{color:var(--on-dark-muted)}

/* Cards */
.card{background:var(--white);border:var(--hairline);border-radius:8px;padding:36px 32px;transition:box-shadow .25s ease-out,transform .25s ease-out}
.card:hover{box-shadow:var(--shadow-card);transform:translateY(-2px)}
.card-static:hover{box-shadow:none;transform:none}
.num-badge{width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin-bottom:22px;border:1px solid var(--sand-300);border-radius:4px;font-family:var(--serif);font-size:20px;color:var(--brass-600)}
.card h3{margin-bottom:12px}
.card p{font-size:15px}
.principle-rule{display:block;width:24px;height:2px;background:var(--brass-500);margin-bottom:20px}
.fee-card{background:var(--white);border:var(--hairline);border-radius:8px;box-shadow:var(--shadow-card);padding:40px}
.fee-card .fee{font-family:var(--serif);font-size:clamp(56px,5vw,76px);color:var(--navy-800);margin-bottom:16px}

/* Rows / checklists */
.row-list>div{display:flex;align-items:center;gap:18px;padding:20px 0;border-bottom:var(--hairline)}
.row-list>div:last-child{border-bottom:none}
.row-list svg{flex:none}
.tick-list>div{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:var(--hairline)}
.tick-list>div:last-child{border-bottom:none}
.tick-inline{display:flex;align-items:center;gap:12px;padding:6px 0}
.tick-inline svg,.tick-list svg{flex:none}

/* Numbered editorial columns (dark bands) */
.num-col{border-top:1px solid rgba(255,255,255,.18);padding-top:24px}
.num-col .roman{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--brass-500);margin-bottom:12px}
.num-col h3{margin-bottom:10px}
.logo-strip{border-top:1px solid rgba(255,255,255,.12);padding-top:28px;display:flex;gap:40px;flex-wrap:wrap}
.logo-strip span{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45)}

/* Pull quote */
.pull-quote{padding-top:36px;border-top:var(--hairline);max-width:46ch}
.pull-quote .mark{display:block;font-family:var(--serif);font-size:64px;line-height:.5;color:var(--brass-500);margin:12px 0 18px}
.pull-quote blockquote{margin:0 0 20px;font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(22px,2vw,27px);line-height:1.4;color:var(--navy-800)}
.pull-quote figcaption{font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-600)}

/* FAQ */
.faq details{border-bottom:var(--hairline)}
.faq summary{font-family:var(--serif);font-weight:500;font-size:clamp(20px,1.8vw,26px);color:var(--navy-800);padding:24px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-size:20px;font-weight:300;color:var(--brass-500);flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 48px 28px 0;max-width:68ch;line-height:1.75}

/* Forms */
.form-card{background:var(--white);border:var(--hairline);border-radius:8px;box-shadow:var(--shadow-card);padding:clamp(24px,3.5vw,40px)}
.form-grid{display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:6px;position:relative}
.field label{font-size:13px;color:var(--ink-500)}
.field label .opt{color:var(--ink-300)}
.field label .req{color:var(--error)}
.field input,.field select,.field textarea{width:100%;min-height:48px;background:#fff;border:var(--hairline);border-radius:4px;padding:12px 16px;font-size:16px;color:var(--navy-800);outline:none}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy-600);box-shadow:var(--focus-ring)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field .error-msg{display:none;font-size:13px;color:var(--error)}
.field.invalid input{border-color:var(--error)}
.field.invalid .error-msg{display:block}
.check-line{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5;cursor:pointer}
.check-line input{margin-top:3px;width:16px;height:16px;accent-color:var(--navy-800);min-height:0}
.microcopy{font-size:13px;color:var(--ink-300);text-align:center;margin:0}
.hidden{display:none!important}

/* CTA band + footer */
.cta-band{padding:var(--section-y) 0;text-align:center}
.cta-band h2{color:#fff;margin:0 0 36px}
.cta-band .btn-row{justify-content:center}
.site-footer{background:var(--navy-900);padding:80px 0 0}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:48px;padding-bottom:64px}
.site-footer .tagline{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--on-dark);margin:20px 0 12px}
.site-footer p{font-size:14px;color:var(--on-dark-muted)}
.footer-head{font-size:13px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-500);margin:0 0 20px}
.footer-links{display:flex;flex-direction:column;gap:12px}
.footer-links a,.site-footer a{font-size:14px;color:var(--on-dark-muted);text-decoration:none;min-height:24px}
.site-footer a:hover{color:var(--brass-500)}
.site-footer .email-link{font-size:15px;color:var(--on-dark);display:block;margin-bottom:12px}
.social-row{display:flex;gap:16px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:24px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-bottom p{font-size:12px;color:#6f96ad;margin:0}

/* Area tiles */
.area-tile .tile-img{height:300px;border-radius:8px;overflow:hidden;background:linear-gradient(160deg,var(--shell-100),var(--sand-300))}
.area-tile .tile-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(.96);transition:transform .6s ease-out}
.area-tile:hover .tile-img img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.area-tile:hover .tile-img img{transform:none}}
.area-tile .tile-img span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-600)}
.area-tile h3{font-size:24px;margin-top:16px}

/* Founder photos */
.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.photo-pair img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px}
.photo-pair img:last-child{margin-top:32px}
.portrait{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:8px}
.rounded-img{border-radius:8px;width:100%;object-fit:cover}
.pill-tags{display:flex;flex-wrap:wrap;gap:10px}
.pill-tags span{font-size:13px;letter-spacing:.04em;color:var(--navy-800);border:var(--hairline);border-radius:999px;padding:7px 16px}

/* Detail rows (contact) */
.detail-rows>div{display:flex;align-items:center;gap:18px;padding:18px 0;border-bottom:var(--hairline)}
.detail-rows .k{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-500);margin:0 0 3px}
.detail-rows .v{font-size:16px;color:var(--navy-800);margin:0}
.detail-rows .v a{color:var(--navy-800);text-decoration:none}

/* Reassurance strip */
.reassure{border-top:var(--hairline);border-bottom:var(--hairline);display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding:32px 0}
.reassure>div{text-align:center}
.reassure>div:nth-child(2){border-left:var(--hairline);border-right:var(--hairline)}
.reassure .t{font-family:var(--serif);font-size:22px;color:var(--navy-800);margin-bottom:4px}
.reassure .s{font-size:14px;color:var(--ink-500)}

/* Suggestions dropdown */
.suggest{position:absolute;top:100%;left:0;right:0;z-index:20;background:#fff;border:var(--hairline);border-radius:4px;box-shadow:0 8px 24px rgba(14,55,83,.12);overflow:hidden;margin-top:4px}

/* Mobile sticky CTA */
.mobile-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:90;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(252,250,246,.97);border-top:var(--hairline)}
.mobile-cta .btn{width:100%}

/* Wave motif */
.wave-motif{width:160px;margin:0 auto 32px}

/* ---------- Utilities ---------- */
.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}.mb-10{margin-bottom:40px}.mb-14{margin-bottom:56px}.mb-16{margin-bottom:64px}
.mt-8{margin-top:32px}
.max-640{max-width:640px}.max-680{max-width:680px}.max-720{max-width:720px}.max-760{max-width:760px}.max-880{max-width:880px;margin-left:auto;margin-right:auto}
.reveal{opacity:0;transform:translateY(28px)}
.no-js .reveal,.reduced-motion .reveal{opacity:1;transform:none}

/* ---------- Media queries ---------- */
@media (max-width:1023px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:block}
  .split-57,.split-75,.split-56,.split-65,.split-66{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:639px){
  .hero{min-height:auto}
  .hero .container{padding-top:120px;padding-bottom:72px}
  .grid-3,.grid-4,.grid-2,.field-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .reassure{grid-template-columns:1fr;gap:20px}
  .reassure>div:nth-child(2){border:none;border-top:var(--hairline);border-bottom:var(--hairline);padding:20px 0}
  .mobile-cta{display:block}
  body{padding-bottom:76px}
  .btn{width:100%}
  .nav-cta-mobile-hide{display:none}
  .faq details p{padding-right:0}
}