/* =========================================================
   Flagship Tax & Business Advisors — shared styles
   Design: coastal. Light & airy — bright sea-green aqua action
   color, cold-green dark sections, warm sunset-gold highlight.
   Display serif (Fraunces) + clean sans (Inter).
   NOTE: the variable names --navy and --brass are kept so the
   existing HTML keeps working; their VALUES are now green/gold.
   ========================================================= */

:root{
  /* VARIANT B — photo-inspired but brighter & livelier */
  --navy:        #134e44;   /* deep teal-green — dark sections */
  --navy-2:      #186053;   /* lighter teal band */
  --brass:       #16a89a;   /* lively aqua-teal — buttons & accents */
  --brass-soft:  #74d2c4;   /* bright aqua tint on dark */
  --sun:         #f6cf69;   /* the photo's exact sunset gold */
  --sun-soft:    #f9de96;
  --paper:       #f6f6ee;   /* warm-neutral light background */
  --paper-2:     #eceae0;
  --ink:         #18302b;   /* deep green body text */
  --ink-soft:    #4c635c;
  --line:        #d6e0d3;   /* soft hairline */
  --white:       #ffffff;
  --max:         1120px;
  --radius:      4px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Fraunces","Georgia",serif;line-height:1.12;font-weight:600;color:var(--navy);letter-spacing:-0.01em}
h1{font-size:clamp(2.1rem,5vw,3.5rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
h3{font-size:1.18rem;font-weight:600}
p{margin-bottom:1rem}
a{color:var(--navy);text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.eyebrow{
  font-size:0.74rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--brass);margin-bottom:0.8rem;display:inline-block;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-weight:600;font-size:0.98rem;
  padding:14px 26px;border-radius:var(--radius);cursor:pointer;border:1.5px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{background:var(--brass);color:#ffffff}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(13,74,69,.22)}
.btn-ghost{border-color:var(--brass);color:var(--navy);background:transparent}
.btn-ghost:hover{background:rgba(23,179,163,.12)}
.btn-light{background:var(--brass);color:#ffffff}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.25)}

/* ---------- header / nav ---------- */
header.site{
  position:sticky;top:0;z-index:50;background:rgba(247,245,239,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:12px;font-family:"Fraunces",serif;font-weight:600;font-size:1.18rem;color:var(--navy)}
.brand .mark{width:30px;height:30px;flex:none}
.brand small{display:block;font-family:"Inter",sans-serif;font-weight:500;font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--brass);margin-top:1px}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:0.95rem;font-weight:500;color:var(--ink);position:relative}
.nav-links a:hover{color:var(--navy)}
.nav-links a.active{color:var(--navy)}
.nav-links a.active::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:2px;background:var(--brass)}
.nav-cta{padding:10px 20px}
.menu-btn{display:none;background:none;border:0;cursor:pointer;font-size:1.4rem;color:var(--navy)}

/* ---------- language bar ---------- */
.langbar{background:var(--navy);color:#d7e0ea}
.langbar .wrap{display:flex;align-items:center;justify-content:center;gap:18px;
  height:34px;font-size:0.76rem;letter-spacing:0.04em;flex-wrap:wrap}
.langbar b{color:var(--brass-soft);font-weight:600}
.langbar span{opacity:.55}

/* ---------- hero ---------- */
.hero{position:relative;color:#eaf0f6;overflow:hidden;
  background-color:var(--navy);
  background-image:url("hero-harbor.jpg");
  background-size:cover;background-position:center center}
/* darkening overlay: keeps the white headline crisp, heavier on the left where text sits */
.hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg, rgba(7,38,34,.90) 0%, rgba(7,38,34,.62) 34%, rgba(8,46,41,.20) 64%, rgba(8,46,41,.05) 100%)}
.hero .wrap{position:relative;z-index:2;padding:84px 24px 92px;max-width:880px}
.hero h1{color:var(--white)}
.hero p.lead{font-size:1.18rem;color:#dcefe7;max-width:620px;margin:1.3rem 0 2rem}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap}
/* compass-rose signature, subtle, top-right */
.compass{position:absolute;right:-90px;top:50%;transform:translateY(-50%);
  width:440px;height:440px;opacity:.08;z-index:1;color:#bfe9df;pointer-events:none}
@media(max-width:760px){.compass{right:-180px;width:360px;height:360px}}

/* ---------- generic section ---------- */
section{padding:74px 0}
.section-head{max-width:640px;margin-bottom:42px}
.section-head p{color:var(--ink-soft);font-size:1.05rem}

/* ---------- audience cards ---------- */
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px;transition:transform .15s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(15,42,67,.09)}
.card .num{font-family:"Fraunces",serif;color:var(--brass);font-size:0.85rem;font-weight:600;letter-spacing:.1em}
.card h3{margin:.5rem 0 .5rem}
.card p{color:var(--ink-soft);font-size:0.97rem;margin:0}
.card ul{margin:.6rem 0 0;padding-left:1.1rem;color:var(--ink-soft);font-size:0.95rem}
.card ul li{margin-bottom:.3rem}

/* ---------- EA / credential band ---------- */
.band{position:relative;color:#16302b;
  background-color:#acc4bb;
  background-image:linear-gradient(rgba(244,246,238,.28),rgba(244,246,238,.16)),url("band-harbor.jpg");
  background-size:100% 100%;background-position:center;background-repeat:no-repeat}
.band h2{color:var(--navy)}
.band .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.band p{color:#234039}
.band .pts{list-style:none;margin-top:1rem}
.band .pts li{padding-left:30px;position:relative;margin-bottom:.9rem;color:#1c3a33}
.band .pts li::before{content:"";position:absolute;left:0;top:8px;width:14px;height:14px;
  border:2px solid var(--brass);border-radius:50%}

/* ---------- steps ---------- */
.steps{counter-reset:step;display:grid;gap:20px;grid-template-columns:repeat(4,1fr)}
.step{position:relative;padding-top:14px;border-top:2px solid var(--line)}
.step .n{font-family:"Fraunces",serif;font-size:1.5rem;color:var(--brass);font-weight:600}
.step h3{font-size:1.05rem;margin:.3rem 0 .4rem}
.step p{font-size:0.94rem;color:var(--ink-soft);margin:0}

/* ---------- CTA strip (sunset-gold band — warm contrast to the aqua/greens) ---------- */
.cta-strip{background:var(--sun);color:#5a3a12}
.cta-strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta-strip h2{color:#3f2a0c;max-width:560px}
.cta-strip p{margin:.4rem 0 0;color:#6b4a1c}

/* ---------- form ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:680px}
.form-grid .full{grid-column:1/-1}
label{display:block;font-size:0.85rem;font-weight:600;color:var(--navy);margin-bottom:6px}
input,select,textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);
  font-family:inherit;font-size:1rem;background:var(--white);color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brass);border-color:var(--brass)}
textarea{min-height:120px;resize:vertical}
.form-note{font-size:0.85rem;color:var(--ink-soft);margin-top:4px}

/* ---------- contact split ---------- */
.contact-split{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:start}
.contact-info{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.contact-info dt{font-size:0.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);font-weight:600;margin-top:18px}
.contact-info dt:first-child{margin-top:0}
.contact-info dd{font-size:1.02rem;margin-top:3px}

/* ---------- footer ---------- */
footer.site{position:relative;color:#16302b;padding:50px 0 30px;font-size:0.9rem;
  background-color:var(--navy);
  background-image:linear-gradient(rgba(244,246,238,.30),rgba(244,246,238,.14)),url("footer-harbor.jpg");
  background-size:cover;background-position:center;background-repeat:no-repeat}
footer.site .cols{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:28px}
footer.site .brand{color:var(--navy)}
footer.site a{color:#14463e}
footer.site a:hover{color:var(--brass)}
footer.site .fnav{display:flex;gap:22px;flex-wrap:wrap}
footer.site .disc{border-top:1px solid rgba(13,74,69,.35);padding-top:18px;font-size:0.78rem;color:#06140f;line-height:1.6;font-weight:500}
.placeholder{color:var(--brass-soft);font-weight:600}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .grid-3,.grid-2{grid-template-columns:1fr}
  .band .wrap{grid-template-columns:1fr;gap:28px}
  .steps{grid-template-columns:1fr 1fr}
  .contact-split{grid-template-columns:1fr;gap:32px}
  .form-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .nav-links{position:fixed;inset:74px 0 auto 0;background:var(--paper);flex-direction:column;
    align-items:flex-start;gap:0;padding:0 24px;border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .25s ease}
  .nav-links.open{max-height:400px;padding:12px 24px 20px}
  .nav-links a{width:100%;padding:11px 0;border-bottom:1px solid var(--line)}
  .nav-links .nav-cta{margin-top:10px;width:100%;text-align:center}
  .menu-btn{display:block}
  .steps{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- floating chat buttons (WhatsApp + Telegram) ---------- */
.chat-fab{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;flex-direction:column;gap:12px}
.chat-fab a{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.22);transition:transform .15s ease, box-shadow .15s ease;text-decoration:none}
.chat-fab a:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 18px rgba(0,0,0,.28)}
.chat-fab a:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.chat-fab .wa{background:#25D366}
.chat-fab .tg{background:#229ED9}
.chat-fab svg{width:30px;height:30px;fill:#fff}
@media(max-width:560px){.chat-fab{right:14px;bottom:14px}.chat-fab a{width:50px;height:50px}}
@media print{.chat-fab{display:none}}