/* ============================================================
   Jenelle Williams for Montecito Fire Board
   Shared stylesheet
   ============================================================ */

:root{
  --navy:        #123262;
  --navy-deep:   #0c2249;
  --navy-soft:   #2f5288;
  --red:         #c8102e;
  --red-bright:  #d81f3d;
  --cream:       #fdfbf6;
  --cream-warm:  #f7f3ea;
  --rule:        #ddd6ca;
  --ink:         #1b3057;
  --measure:     68ch;
}

*,*::before,*::after{box-sizing:border-box;}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Lora",Georgia,"Times New Roman",serif;
  /* Scales with the window: 21px on a laptop, ~30px on a large desktop display.
     A fixed pixel size looks tiny on a 2500px-wide monitor. */
  font-size:clamp(20px,1.1vw,30px);
  line-height:1.65;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important; transition:none !important;}
}

img{max-width:100%;height:auto;display:block;}

a{color:var(--navy);}

.wrap{max-width:min(1720px,94vw);margin:0 auto;padding:0 28px;}

/* ---------- Type ---------- */
h1,h2,h3,h4{
  font-family:"Playfair Display",Georgia,serif;
  color:var(--navy);
  margin:0;
  line-height:1.15;
}

.display{
  font-weight:900;
  letter-spacing:.01em;
  text-transform:uppercase;
  font-size:clamp(2.4rem,5.4vw,4.6rem);
}

.eyebrow{
  font-family:"Lato",system-ui,sans-serif;
  font-size:.82rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--navy);
  font-weight:700;
}

.script{
  font-family:"Playfair Display",Georgia,serif;
  font-style:italic;
  font-weight:500;
  color:var(--navy-soft);
  font-size:clamp(1.25rem,2.6vw,1.85rem);
  line-height:1.35;
}

.lede{
  max-width:86ch;
  margin-inline:auto;
  color:var(--navy-soft);
  font-size:1.4rem;
}

/* ---------- Rules & stars ---------- */
.rule-red{
  width:150px;height:3px;background:var(--red);
  border:0;margin:18px auto;
}
.rule-red.left{margin-left:0;}

.stars{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin:16px 0;
}
.stars::before,.stars::after{
  content:"";height:2px;background:var(--red);flex:0 1 190px;
}
.stars span{color:var(--navy);letter-spacing:.35em;font-size:.8rem;}

/* ---------- Creed band ---------- */
.creed-band{background:var(--navy);}
.creed-band p{
  margin:0;padding:13px 28px;text-align:center;color:#fff;
  font-family:"Lato",system-ui,sans-serif;font-weight:700;
  font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;
}

/* ---------- Header ---------- */
.site-header{
  background:var(--cream);
  border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:40;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:14px 28px;max-width:min(1820px,96vw);margin:0 auto;
}

.brand{text-decoration:none;display:block;text-align:center;}
.brand span{display:block;}
.brand .first{
  font-family:"Playfair Display",serif;font-weight:700;
  font-size:1.05rem;letter-spacing:.14em;color:var(--navy);
  text-transform:uppercase;line-height:1;
}
.brand .last{
  font-family:"Playfair Display",serif;font-weight:900;
  font-size:2.1rem;letter-spacing:.03em;color:var(--navy);
  text-transform:uppercase;line-height:1;
}
.brand .badge{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:3px;
}
.brand .badge i{color:var(--navy);font-style:normal;font-size:.6rem;letter-spacing:.3em;}
.brand .bar{height:3px;background:var(--red);margin:4px 0 3px;}
.brand .office{
  font-family:"Playfair Display",serif;font-style:italic;
  font-size:.78rem;color:var(--navy);letter-spacing:.04em;
}
.brand .office b{font-style:normal;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}

.nav{display:flex;align-items:center;gap:30px;}
.nav a{
  font-family:"Lato",system-ui,sans-serif;
  font-size:.9rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--navy);text-decoration:none;padding:6px 0;
  border-bottom:3px solid transparent;
}
.nav a:hover{border-bottom-color:var(--rule);}
.nav a[aria-current="page"]{border-bottom-color:var(--red);}

.btn-connect{
  font-family:"Lato",system-ui,sans-serif;
  border:2px solid var(--red);color:var(--red);
  padding:12px 26px;text-decoration:none;
  letter-spacing:.16em;text-transform:uppercase;font-size:.89rem;font-weight:700;
  white-space:nowrap;
}
.btn-connect:hover{background:var(--red);color:#fff;}

.nav-toggle{display:none;}

/* ---------- Buttons ---------- */
.btn{
  font-family:"Lato",system-ui,sans-serif;
  display:inline-block;text-decoration:none;
  padding:14px 30px;letter-spacing:.15em;text-transform:uppercase;
  font-size:.89rem;font-weight:700;border:2px solid var(--navy);
}
.btn-solid{background:var(--navy);color:#fff;}
.btn-solid:hover{background:var(--navy-deep);}
.btn-ghost{background:transparent;color:var(--navy);}
.btn-ghost:hover{background:var(--navy);color:#fff;}

/* ---------- Home hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:var(--cream);
  border-bottom:1px solid var(--rule);
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:url("firehouse-line.jpg") center 46% / cover no-repeat;
  opacity:.10;
  mix-blend-mode:multiply;
}
.hero-portrait,.hero-copy{z-index:3;}
.hero-art{display:none;}
.hero-art{
  position:absolute;right:-3%;bottom:0;width:38%;
  opacity:.30;mix-blend-mode:multiply;pointer-events:none;
}
.hero-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(300px,34%) minmax(0,1fr);
  gap:48px;align-items:stretch;min-height:min(600px,62vh);
  max-width:min(1820px,96vw);margin:0 auto;padding:0 28px;
}
.hero-portrait{
  position:relative;
  align-self:stretch;   /* must stretch: the portrait inside is absolutely
                           positioned at height:100%, so an end-aligned column
                           collapses to zero height and the photo disappears. */
}
.hero-portrait img{
  position:absolute;bottom:0;right:4%;
  height:100%;width:auto;max-width:none;max-height:min(860px,76vh);
}
.hero-copy{
  align-self:center;text-align:center;
  padding:26px 0 34px;max-width:32em;margin-right:auto;
}
.hero-copy > *{margin:0;}
.hero-copy .eyebrow{white-space:nowrap;font-size:.85rem;letter-spacing:.2em;}
.hero-copy .rule-red{margin:10px auto;}
.hero-name{
  font-weight:900;text-transform:uppercase;color:var(--navy);
  font-size:clamp(2.5rem,5vw,4.4rem);line-height:1;letter-spacing:.01em;
  margin-top:8px;
}
.hero-office{
  font-family:"Playfair Display",serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.19em;
  font-size:clamp(1.4rem,2.3vw,1.9rem);color:var(--navy);
}
.hero-status{
  font-family:"Lato",sans-serif;font-size:.92rem;letter-spacing:.13em;font-weight:700;
  text-transform:uppercase;color:var(--navy);margin-top:10px;
}
.hero-copy .script{font-size:clamp(1.45rem,2.5vw,2rem);margin-top:16px;line-height:1.28;}
.hero-body{max-width:none;margin:16px auto 0;font-size:1.1rem;line-height:1.45;}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px;}
.hero-actions .btn{font-size:1.1rem;padding:18px 38px;}
.hero-tag{
  position:absolute;top:30px;right:30px;z-index:3;text-align:right;
  font-family:"Playfair Display",serif;font-style:italic;color:var(--navy);
  font-size:.98rem;line-height:1.3;
}
.hero-tag hr{width:70px;height:2px;background:var(--red);border:0;margin:8px 0 0 auto;}

/* ---------- Interior page header ---------- */
.page-head{
  position:relative;text-align:center;
  min-height:460px;
  display:flex;flex-direction:column;justify-content:center;
  padding:74px 0 64px;
  border-bottom:1px solid var(--rule);
  background:var(--cream);
  overflow:hidden;
}
.page-head::before{
  content:"";position:absolute;inset:0;
  background:url("firehouse-line.jpg") no-repeat;
  /* Width-locked, anchored a fixed distance from the top of the band. Both the
     scale and the offset are independent of the band's height, so the drawing
     lands in exactly the same place on every page regardless of how long that
     page's intro paragraph runs. Do not switch this back to "cover". */
  background-size:100% auto;
  background-position:center -260px;
  opacity:.17;
  mix-blend-mode:multiply;
}
/* Alternative page-header treatment: the softened photograph instead of the
   line drawing. Swap the background URL above for firehouse-wash.jpg and
   raise opacity to about .55. */
.page-head > *{position:relative;z-index:2;}

.page-head .script{
  font-style:normal;
  font-weight:700;
  color:var(--navy);
  letter-spacing:.01em;
  font-size:clamp(1.5rem,2.6vw,1.95rem);
}

/* ---------- Sections ---------- */
.section{padding:66px 0;}
.section + .section{border-top:1px solid var(--rule);}
.section-head{text-align:center;margin-bottom:46px;}
.section-head h2{
  font-weight:900;text-transform:uppercase;letter-spacing:.06em;
  font-size:clamp(1.9rem,3.5vw,2.8rem);
}

/* pillar row (home) */
.pillars{
  /* auto-fits however many pillars are in the markup — a fixed column count
     leaves an empty column and shoves the row off-centre when one is removed */
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  gap:0;text-align:center;
}
.pillars > div{padding:0 34px;border-left:1px solid var(--rule);}
.pillars > div:first-child{border-left:0;}
.pillars h3{font-size:1.5rem;margin-bottom:12px;}
.pillars p{font-size:1.18rem;color:var(--navy-soft);margin:0;}

.more{text-align:center;margin:44px 0 0;}
.more a{
  font-family:"Lato",sans-serif;font-size:.88rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy);text-decoration:none;
  border-bottom:2px solid var(--red);padding-bottom:5px;
}
.more a:hover{color:var(--red);}

/* priority cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0;text-align:center;}
.cards .card{padding:0 34px;border-left:1px solid var(--rule);}
.cards .card:first-child{border-left:0;}
.cards img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:20px;}
.cards h3{font-size:1.5rem;margin-bottom:10px;}
.cards p{font-size:1.18rem;color:var(--navy-soft);margin:0;}

/* two-column feature grid */
.grid2{
  display:grid;grid-template-columns:1fr 1fr;
  gap:50px 76px;
}
.feature h3{font-size:1.75rem;margin-bottom:12px;}
.feature p{margin:0 0 16px;max-width:56ch;font-size:1.2rem;}
.feature .tick{width:46px;height:3px;background:var(--red);border:0;margin:0 0 14px;}
.grid2 .feature{border-top:0;}

/* divider between rows on wide screens */
.grid2.ruled .feature{padding-bottom:10px;}

/* narrative prose block */
.prose{max-width:none;margin:0 auto;}
.prose p{margin:0 0 24px;font-size:1.2rem;text-align:justify;hyphens:auto;}

/* single-column stacked features (Priorities) */
.feature-stack{max-width:90ch;margin:0 auto;display:grid;gap:52px;}
.feature-stack .feature p{max-width:none;}
.feature-lead{
  font-family:"Playfair Display",serif;font-weight:700;color:var(--navy);
  font-size:1.35rem;line-height:1.35;margin:0 0 14px;
}

/* contact page blocks */
.block-head{
  font-family:"Lato",sans-serif;font-size:.85rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--navy-soft);font-weight:700;
  margin:46px 0 16px;
}
.prose .block-head:first-child{margin-top:0;}
.email-line{font-size:1.45rem;}
.email-line a{
  color:var(--navy);text-decoration:none;
  border-bottom:2px solid var(--red);padding-bottom:4px;
}
.email-line a:hover{color:var(--red);}
.email-line em{font-style:normal;color:var(--navy-soft);}

/* yard sign figure */
.sign-figure{max-width:440px;margin:56px auto 0;text-align:center;}
.sign-figure img{width:100%;border:1px solid var(--rule);}
.sign-figure figcaption{
  margin:0 0 18px;text-align:center;
  font-family:"Playfair Display",Georgia,serif;
  font-weight:700;font-style:normal;color:var(--navy);
  font-size:1.25rem;line-height:1.3;
}

/* About page: long-form story reads as prose, not a card stack */
.about-story .feature p{font-size:1.15rem;margin:0 0 16px;}
.about-story .feature p:last-child{margin-bottom:0;}

/* credentials list */
.creds{
  max-width:78ch;margin:64px auto 0;padding-top:34px;
  border-top:1px solid var(--rule);text-align:center;
}
.creds h3{
  font-family:"Lato",sans-serif;font-size:.85rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--navy-soft);font-weight:700;margin-bottom:22px;
}
.creds ul{list-style:none;margin:0;padding:0;}
.creds li{font-size:1.12rem;color:var(--navy);padding:7px 0;}

/* pull quote */
.pull{
  text-align:center;padding:54px 0 10px;
}
.pull blockquote{
  margin:0;font-family:"Playfair Display",serif;font-style:italic;
  color:var(--navy);font-size:clamp(1.3rem,2.8vw,2rem);line-height:1.4;
}
.pull cite{
  display:block;margin-top:14px;font-style:normal;
  font-family:"Lato",sans-serif;font-size:.75rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--navy-soft);
}

/* ---------- CTA band ---------- */
.cta{
  position:relative;color:#fff;text-align:center;
  padding:66px 20px;overflow:hidden;
}
.cta::before{
  content:"";position:absolute;inset:0;
  background:url("banner-coast.jpg") center 55% / cover no-repeat;
}
.cta::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,34,73,.82),rgba(12,34,73,.72));
}
.cta > *{position:relative;z-index:2;}
.cta h2{
  color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(1.6rem,3.4vw,2.35rem);
}
.cta hr{width:120px;height:3px;background:var(--red-bright);border:0;margin:16px auto 18px;}
.cta p{margin:0 auto 26px;max-width:50ch;color:#eef2f8;font-size:1.25rem;}
.cta .btn{border-color:#fff;color:#fff;font-size:1.05rem;}
.cta .btn:hover{background:#fff;color:var(--navy);}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--cream);text-align:center;padding:26px 20px 34px;
  border-top:1px solid var(--rule);
}
.footer-stars{
  display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px;
}
.footer-stars::before,.footer-stars::after{content:"";height:2px;background:var(--red);flex:0 1 120px;}
.footer-stars span{color:var(--navy);letter-spacing:.4em;font-size:.75rem;}
.footer-nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;margin-bottom:14px;
}
.footer-nav a{
  font-family:"Lato",sans-serif;font-size:.81rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--navy);text-decoration:none;
}
.footer-nav a:hover{text-decoration:underline;}
.disclaimer{
  font-family:"Lato",sans-serif;font-size:.78rem;color:var(--navy-soft);margin:0;
}

/* ---------- Contact form ---------- */
.form{max-width:620px;margin:0 auto;}
.form label{
  display:block;font-family:"Lato",sans-serif;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--navy);
  margin:22px 0 7px;font-weight:700;
}
.form input,.form textarea{
  width:100%;font-family:"Lora",serif;font-size:1.05rem;color:var(--ink);
  background:#fff;border:1px solid var(--rule);padding:13px 14px;
}
.form input:focus,.form textarea:focus{outline:3px solid var(--navy-soft);outline-offset:1px;}
.form textarea{min-height:170px;resize:vertical;}
.form .actions{margin-top:26px;text-align:center;}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.note{
  font-size:.99rem;color:var(--navy-soft);text-align:center;
  max-width:52ch;margin:34px auto 0;
}

/* ---------- Focus visibility ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--red);outline-offset:3px;
}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .pillars{grid-auto-flow:row;grid-template-columns:1fr 1fr;gap:34px 0;}
  .pillars > div:nth-child(odd){border-left:0;}
  .cards{grid-template-columns:1fr;gap:40px;}
  .cards .card{border-left:0;padding:0;max-width:520px;margin:0 auto;}
  .hero-inner{grid-template-columns:1fr;min-height:0;}
  .hero-portrait{position:static;height:340px;}
  .hero-portrait img{position:static;height:340px;margin:0 auto;}
  .hero-copy{padding-top:26px;margin-inline:auto;}
  .hero-tag{position:static;text-align:center;padding-top:24px;}
  .hero-tag hr{margin-inline:auto;}
  .hero-art{width:100%;right:0;opacity:.28;}
}

@media (max-width:820px){
  body{font-size:19.5px;}
  .header-inner{flex-wrap:wrap;justify-content:center;text-align:center;}
  .nav{order:3;width:100%;justify-content:center;flex-wrap:wrap;gap:18px;
       border-top:1px solid var(--rule);padding-top:12px;}
  .grid2{grid-template-columns:1fr;gap:34px;}
  .stars::before,.stars::after{flex-basis:70px;}
  .hero-copy .eyebrow{white-space:normal;}
  .page-head{min-height:0;}
  .site-header .brand[aria-hidden="true"]{display:none;}
  .nav{gap:22px;}
  .nav a{font-size:.85rem;letter-spacing:.09em;}
  .creed-band p{font-size:.72rem;letter-spacing:.14em;padding:10px 16px;}
  .page-head::before{background-position:center -70px;}
}

@media (max-width:520px){
  .pillars{grid-auto-flow:row;grid-template-columns:1fr;}
  .pillars > div{border-left:0;padding:0;}
  .brand .last{font-size:1.7rem;}
  .page-head::before{background-position:center -25px;}
  .wrap{padding:0 20px;}
}