/* Dolphin Family Insurance — concept design
   Prepared by April Joy Studio. Static site, no build step, no dependencies.
   Colors live here. Change them once and the whole site follows. */

:root{
  --navy:#0c2a3d;
  --navy-2:#143c53;
  --teal:#15808c;
  --teal-dark:#0f6570;
  --teal-soft:#e2f1f2;
  --sand:#f7f2e9;
  --sand-2:#efe7d9;
  --white:#ffffff;
  --ink:#16242e;
  --ink-2:#425561;
  --muted:#6f8390;
  --line:#e0dacd;
  --line-2:#d8d2c4;
  --sun:#c46a1f;
  --radius:14px;
  --shadow:0 1px 2px rgba(12,42,61,.06), 0 14px 34px -18px rgba(12,42,61,.35);
  --wrap:68rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--teal-dark)}

h1,h2,h3{
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.01em;
  text-wrap:balance;
  margin:0;
}
h1{font-size:clamp(2.1rem,6vw,3.4rem)}
h2{font-size:clamp(1.6rem,4vw,2.3rem)}
h3{font-size:1.15rem;line-height:1.3}
p{margin:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 1.25rem}
.eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal);margin:0;
}
.lede{font-size:1.12rem;line-height:1.6;color:var(--ink-2);max-width:36rem}
.muted{color:var(--muted)}

/* ---------- concept banner — DELETE THIS BLOCK BEFORE LAUNCH ---------- */
.concept{
  background:var(--navy);color:#cfe3e6;
  font-size:.8rem;line-height:1.45;text-align:center;
  padding:.6rem 1.25rem;
}
.concept b{color:#fff}
/* ---------------------------------------------------------------------- */

/* ---------- header ---------- */
.mast{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.mast .bar{display:flex;align-items:center;gap:1rem;min-height:72px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--navy);margin-right:auto}
.brand svg{width:40px;height:40px;flex:none}
.brand .name{display:flex;flex-direction:column;line-height:1.15}
.brand .name b{
  font-family:"Source Serif 4",Georgia,serif;
  font-size:1.08rem;font-weight:600;letter-spacing:-.01em;
}
.brand .name span{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700}

.nav{display:none;gap:1.5rem;align-items:center}
.nav a{
  text-decoration:none;color:var(--ink-2);font-size:.92rem;font-weight:500;
  padding:.35rem 0;border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--teal-dark)}
.nav a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--teal)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:inherit;font-size:.95rem;font-weight:600;
  padding:.8rem 1.35rem;border-radius:999px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .12s ease, background .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-dark)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal-dark)}
.mast .btn{display:none}

@media (min-width:880px){
  .nav{display:flex}
  .mast .btn{display:inline-flex}
}

/* mobile call bar */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;gap:.6rem;padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);
  border-top:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.callbar .btn{flex:1;padding:.85rem 1rem}
body{padding-bottom:5rem}
@media (min-width:880px){
  .callbar{display:none}
  body{padding-bottom:0}
}

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(21,128,140,.25) 0%, rgba(21,128,140,0) 60%),
    linear-gradient(170deg, var(--navy) 0%, var(--navy-2) 100%);
  color:#eaf3f4;
  position:relative;overflow:hidden;
}
.hero .wrap{padding-top:4rem;padding-bottom:5rem;position:relative;z-index:2}
.hero.slim .wrap{padding-top:3rem;padding-bottom:3.25rem}
.hero h1{color:#fff;max-width:18ch}
.hero .lede{color:#bcd4d9;margin-top:1.1rem}
.hero .actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.hero .btn-ghost:hover{border-color:#fff;color:#fff}
.hero .eyebrow{color:#7fd0d8}
.hero .trust{
  display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;margin-top:2.5rem;
  padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.16);
  font-size:.88rem;color:#a9c6cd;
}
.hero .trust span{display:flex;align-items:center;gap:.5rem}
.wave{display:block;width:100%;height:auto;margin-top:-1px}

/* ---------- sections ---------- */
section{padding:4rem 0}
section.tint{background:var(--sand)}
section.deep{background:var(--navy);color:#dfebed}
section.deep h2{color:#fff}
section.deep .lede{color:#b7d0d6}
.section-head{max-width:40rem;display:flex;flex-direction:column;gap:.7rem;margin-bottom:2.5rem}

.grid{display:grid;gap:1.25rem}
@media (min-width:700px){
  .grid.two{grid-template-columns:1fr 1fr}
  .grid.three{grid-template-columns:repeat(3,1fr)}
}

.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem;display:flex;flex-direction:column;gap:.55rem;box-shadow:var(--shadow);
}
.card .ico{
  width:42px;height:42px;border-radius:11px;background:var(--teal-soft);
  display:grid;place-items:center;color:var(--teal-dark);margin-bottom:.4rem;
}
.card p{color:var(--ink-2);font-size:.97rem}

/* ---------- coverage list ---------- */
.lines{display:grid;gap:.85rem;grid-template-columns:1fr}
@media (min-width:640px){ .lines{grid-template-columns:1fr 1fr} }
@media (min-width:980px){ .lines{grid-template-columns:repeat(3,1fr)} }
.line-item{
  display:flex;gap:.9rem;align-items:flex-start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.15rem 1.25rem;
}
.line-item .dot{width:9px;height:9px;border-radius:50%;background:var(--teal);margin-top:.6rem;flex:none}
.line-item b{display:block;font-size:1rem}
.line-item span{font-size:.92rem;color:var(--ink-2)}

/* ---------- steps ---------- */
.steps{counter-reset:step;display:grid;gap:1.75rem}
@media (min-width:820px){ .steps{grid-template-columns:repeat(3,1fr)} }
.step{position:relative;padding-top:3.2rem}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;top:0;left:0;
  width:2.4rem;height:2.4rem;border-radius:50%;
  display:grid;place-items:center;
  background:var(--teal);color:#fff;font-weight:700;font-size:1rem;
  font-family:"Source Serif 4",Georgia,serif;
}
.step h3{margin-bottom:.4rem}
.step p{color:var(--ink-2);font-size:.97rem}
section.deep .step p{color:#b7d0d6}
section.deep .step::before{background:#fff;color:var(--navy)}

/* ---------- events ---------- */
.events{display:flex;flex-direction:column;gap:1rem}
.event{
  display:grid;grid-template-columns:auto 1fr;gap:1.25rem;align-items:start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.35rem;box-shadow:var(--shadow);
}
.event .date{
  width:4.6rem;flex:none;text-align:center;border-radius:11px;
  background:var(--navy);color:#fff;padding:.6rem .4rem;
}
.event .date .m{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#8fc4cc;font-weight:700}
.event .date .d{display:block;font-family:"Source Serif 4",Georgia,serif;font-size:1.7rem;line-height:1.15}
.event .body{display:flex;flex-direction:column;gap:.35rem}
.event .meta{font-size:.86rem;color:var(--muted)}
.event p{font-size:.96rem;color:var(--ink-2)}

/* ---------- placeholders + editorial notes ---------- */
.ph{
  border-bottom:1px dashed var(--sun);
  background:rgba(196,106,31,.1);
  padding:0 .15em;border-radius:3px;
}
.note{
  border-left:3px solid var(--sun);
  background:rgba(196,106,31,.08);
  padding:.85rem 1rem;border-radius:0 8px 8px 0;
  font-size:.88rem;line-height:1.5;color:var(--ink-2);
}
.note b{color:var(--ink)}

/* ---------- review slots ---------- */
.reviews{display:grid;gap:1.25rem}
@media (min-width:820px){ .reviews{grid-template-columns:repeat(3,1fr)} }
.review{
  background:var(--white);border:1px dashed var(--line-2);border-radius:var(--radius);
  padding:1.5rem;display:flex;flex-direction:column;gap:.9rem;
}
.stars{color:var(--sun);letter-spacing:.12em;font-size:1rem}
.review p{font-family:"Source Serif 4",Georgia,serif;font-size:1.02rem;line-height:1.55;color:var(--muted)}
.review .who{font-size:.85rem;color:var(--muted);font-weight:600}

/* ---------- form ---------- */
form{display:flex;flex-direction:column;gap:1.1rem;max-width:34rem}
.field{display:flex;flex-direction:column;gap:.35rem}
label{font-size:.85rem;font-weight:600;color:var(--ink)}
input,select,textarea{
  font-family:inherit;font-size:1rem;color:var(--ink);
  padding:.8rem .95rem;border:1px solid var(--line-2);border-radius:10px;
  background:var(--white);width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
textarea{min-height:7rem;resize:vertical}
.form-note{font-size:.82rem;color:var(--muted)}

/* ---------- team ---------- */
.team{display:grid;gap:1.5rem}
@media (min-width:700px){ .team{grid-template-columns:repeat(3,1fr)} }
.person{display:flex;flex-direction:column;gap:.5rem}
.person .photo{
  aspect-ratio:1/1;border-radius:var(--radius);
  background:linear-gradient(160deg,var(--teal-soft),var(--sand-2));
  display:grid;place-items:center;color:var(--muted);
  font-size:.78rem;text-align:center;padding:1rem;border:1px dashed var(--line-2);
}
.person h3{margin-top:.3rem}
.person .role{font-size:.85rem;color:var(--teal-dark);font-weight:600}
.person p{font-size:.94rem;color:var(--ink-2)}

/* ---------- contact rows ---------- */
.contact-rows{display:flex;flex-direction:column;gap:1.1rem}
.contact-row{display:flex;gap:.9rem;align-items:flex-start}
.contact-row .ico{
  width:40px;height:40px;border-radius:11px;background:var(--teal-soft);
  display:grid;place-items:center;color:var(--teal-dark);flex:none;
}
.contact-row b{display:block;font-size:.95rem}
.contact-row span{font-size:.95rem;color:var(--ink-2)}

/* ---------- cta strip ---------- */
.cta{
  background:linear-gradient(150deg,var(--teal-dark),var(--navy));
  color:#fff;border-radius:var(--radius);padding:2.5rem 1.75rem;
  display:flex;flex-direction:column;gap:1rem;align-items:flex-start;
}
.cta h2{color:#fff}
.cta p{color:#bfd9dd;max-width:34rem}
@media (min-width:820px){ .cta{padding:3rem} }

/* ---------- footer ---------- */
footer{background:var(--navy);color:#a9c6cd;padding:3.5rem 0 2.5rem;font-size:.92rem}
footer .cols{display:grid;gap:2rem;margin-bottom:2.5rem}
@media (min-width:760px){ footer .cols{grid-template-columns:2fr 1fr 1fr} }
footer h4{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#7fd0d8;margin:0 0 .8rem}
footer a{color:#dbe9eb;text-decoration:none;display:block;padding:.2rem 0}
footer a:hover{color:#fff;text-decoration:underline}
footer .brand{color:#fff;margin:0 0 .9rem}
footer .brand .name b{color:#fff}
footer .brand .name span{color:#7fd0d8}
footer .blurb{max-width:26rem;font-size:.9rem;line-height:1.6}
.legal{
  border-top:1px solid rgba(255,255,255,.14);padding-top:1.5rem;
  font-size:.8rem;line-height:1.6;color:#8fabb4;display:flex;flex-direction:column;gap:.6rem;
}
.legal .ph{background:rgba(255,255,255,.1);border-bottom-color:#7fd0d8;color:#dbe9eb}

/* ---------- utilities ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mt-2{margin-top:1rem}.mt-3{margin-top:1.75rem}.mt-4{margin-top:2.5rem}