/* ============================================
   Santa Rosa Flips — shared stylesheet
   Edit this one file to restyle every page.
   ============================================ */

:root{
  --navy:#0F2A44;
  --navy-mid:#1D4E77;
  --chalk:#F5F7F9;
  --gold:#E4A33B;
  --slate:#5C6B7A;
  --rule:rgba(15,42,68,.14);
  --measure:68ch;
  --pad:clamp(1.25rem,5vw,4rem);
}

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

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

body{
  margin:0;
  background:var(--chalk);
  color:var(--navy);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-size:clamp(1rem,.97rem + .2vw,1.09rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
main{flex:1}

.wrap{max-width:1080px;margin:0 auto;padding-inline:var(--pad)}

a{color:inherit}
a:focus-visible,button:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

h1,h2,h3{
  font-family:"Fraunces","Georgia",serif;
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.015em;
  margin:0;
  font-variation-settings:"SOFT" 30,"WONK" 1;
}

.eyebrow{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--slate);
  margin:0 0 .9rem;
}

.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- header + nav ---------- */
header{background:var(--navy);color:var(--chalk);position:relative}

.topbar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(1.25rem,2.2vw,2rem);
  padding-block:clamp(1.6rem,3.5vw,3rem) clamp(1.15rem,1.8vw,1.8rem);
  border-bottom:1px solid rgba(245,247,249,.14);
}
.brandmark{
  display:flex;
  align-items:center;
  gap:.7rem;
  font-family:"Fraunces",serif;
  font-weight:700;
  font-size:1.06rem;
  letter-spacing:-.01em;
  text-decoration:none;
  color:#fff;
}
.brandmark img{
  height:clamp(170px,26vw,400px);
  width:auto;
  display:block;
}

nav ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.7rem clamp(1.4rem,2.2vw,2.6rem);
  list-style:none;
  margin:0;
  padding:0;
  font-size:clamp(.9rem,.82rem + .4vw,1.15rem);
  font-weight:500;
  letter-spacing:.01em;
}
nav a{
  text-decoration:none;
  color:rgba(245,247,249,.82);
  padding-block:.4rem;
  border-bottom:2px solid transparent;
  transition:color .18s ease,border-color .18s ease;
  white-space:nowrap;
}
nav a:hover{color:#fff;border-bottom-color:var(--gold)}
nav a.current{color:#fff;border-bottom-color:rgba(245,247,249,.5)}
.nav-store{color:var(--gold)}
.nav-store:hover{color:var(--gold)}
.nav-store .ext{font-size:.8em;display:inline-block;margin-left:.1em}

/* ---------- hero (home page only) ---------- */
.hero{
  position:relative;
  padding-block:clamp(3.5rem,9vw,6.5rem) clamp(3.5rem,8vw,6rem);
  overflow:hidden;
}
.hero::after{ /* chalk dust */
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero .wrap{position:relative;z-index:1}
.kicker{
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--gold);
  margin:0 0 1.4rem;
}
.hero h1{
  font-size:clamp(2.3rem,6.2vw,4.15rem);
  max-width:19ch;
  color:#fff;
}
.hero .lede{
  max-width:56ch;
  font-size:clamp(1.05rem,1rem + .35vw,1.25rem);
  color:rgba(245,247,249,.85);
  margin:0 0 2.2rem;
}

/* signature: the beam */
.beam{
  position:relative;
  height:7px;
  width:min(360px,72%);
  background:var(--gold);
  border-radius:1px;
  margin:2rem 0 1.9rem;
}
.beam::before,.beam::after{
  content:"";
  position:absolute;
  top:-6px;
  width:9px;
  height:19px;
  background:#B9822A;
  border-radius:1px;
}
.beam::before{left:-9px}
.beam::after{right:-9px}

/* ---------- interior page header ---------- */
.pagehead{
  padding-block:clamp(2.6rem,6vw,4.2rem);
}
.pagehead h1{
  font-size:clamp(2rem,4.6vw,3.15rem);
  max-width:20ch;
  color:#fff;
}
.pagehead .beam{margin:1.6rem 0 1.4rem;width:min(240px,55%)}
.pagehead p{
  max-width:56ch;
  color:rgba(245,247,249,.85);
  margin:0;
}

/* ---------- buttons ---------- */
.actions{display:flex;flex-wrap:wrap;gap:.85rem}
.btn{
  display:inline-block;
  text-decoration:none;
  font-weight:600;
  font-size:.95rem;
  padding:.85rem 1.6rem;
  border-radius:3px;
  transition:transform .15s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--gold);color:var(--navy)}
.btn-solid:hover{background:#F2B75A}
.btn-ghost{border:1.5px solid rgba(245,247,249,.45);color:#fff}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
/* ghost button on a light background */
.on-light .btn-ghost{border-color:var(--rule);color:var(--navy)}
.on-light .btn-ghost:hover{border-color:var(--navy);color:var(--navy)}

/* ---------- sections ---------- */
section{padding-block:clamp(3.2rem,7vw,5.2rem)}
section h2{
  font-size:clamp(1.75rem,3.4vw,2.5rem);
  max-width:22ch;
  margin-bottom:1.1rem;
}
section p{max-width:var(--measure)}
.rule-top{border-top:1px solid var(--rule)}

.two-col{display:grid;gap:clamp(1.6rem,4vw,3.4rem);grid-template-columns:1fr}
@media (min-width:820px){
  .two-col{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
}

/* fact table */
.facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.facts li{
  display:grid;
  grid-template-columns:1fr auto;
  gap:1rem;
  padding-block:.85rem;
  border-bottom:1px solid var(--rule);
  font-size:.94rem;
}
.facts .k{color:var(--slate)}
.facts .v{font-weight:600;text-align:right}

/* card grid */
.cards{
  display:grid;
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
  grid-template-columns:1fr;
  margin-top:2.2rem;
}
@media (min-width:700px){.cards{grid-template-columns:1fr 1fr}}
.card{background:var(--chalk);padding:1.7rem 1.6rem 1.9rem}
.card h3{font-size:1.2rem;margin-bottom:.55rem}
.card p{font-size:.95rem;color:#33455a;margin:0}

/* home page teaser links */
.teasers{
  display:grid;
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
  grid-template-columns:1fr;
  margin-top:2.4rem;
}
@media (min-width:760px){.teasers{grid-template-columns:repeat(3,1fr)}}
.teaser{
  background:var(--chalk);
  padding:1.8rem 1.6rem;
  text-decoration:none;
  display:block;
  transition:background .18s ease;
}
.teaser:hover{background:#EBEFF3}
.teaser h3{font-size:1.15rem;margin-bottom:.5rem}
.teaser p{font-size:.93rem;color:#33455a;margin:0 0 .9rem}
.teaser .go{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--navy-mid);
}
.teaser:hover .go{color:var(--gold)}

/* dark band */
.band{background:var(--navy-mid);color:var(--chalk)}
.band h2,.band h1{color:#fff}
.band p{color:rgba(245,247,249,.85)}
.band .eyebrow{color:var(--gold)}

.costs{
  list-style:none;
  margin:2.2rem 0 0;
  padding:0;
  border-top:1px solid rgba(245,247,249,.22);
  max-width:760px;
}
.costs li{
  padding-block:.95rem;
  border-bottom:1px solid rgba(245,247,249,.22);
  display:flex;
  gap:1rem;
  align-items:baseline;
  font-size:1rem;
}
.costs .tick{color:var(--gold);font-weight:600;flex:none}

/* contact */
.contact-grid{display:grid;gap:1.4rem;grid-template-columns:1fr;margin-top:2rem}
@media (min-width:700px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-block{border-left:3px solid var(--gold);padding-left:1.1rem}
.contact-block .label{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--slate);
  font-weight:600;
  display:block;
  margin-bottom:.3rem;
}
.contact-block a{
  font-family:"Fraunces",serif;
  font-weight:700;
  font-size:1.25rem;
  text-decoration:none;
  border-bottom:2px solid transparent;
}
.contact-block a:hover{border-bottom-color:var(--gold)}

/* ---------- footer ---------- */
footer{
  background:var(--navy);
  color:rgba(245,247,249,.7);
  font-size:.86rem;
  padding-block:2.6rem;
}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between}
footer strong{color:#fff;font-weight:600}
footer a{color:rgba(245,247,249,.7)}

/* ---------- forms ---------- */
.form-grid{
  display:grid;
  gap:1.15rem;
  grid-template-columns:1fr;
  max-width:680px;
  margin-top:2.2rem;
}
@media (min-width:640px){
  .form-grid{grid-template-columns:1fr 1fr}
  .field-full{grid-column:1 / -1}
}
.field label{
  display:block;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:.4rem;
}
.field .req{color:#B9822A}
.field input,
.field select,
.field textarea{
  width:100%;
  font-family:inherit;
  font-size:1rem;
  color:var(--navy);
  background:#fff;
  border:1px solid var(--rule);
  border-radius:3px;
  padding:.7rem .8rem;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--navy-mid);
  box-shadow:0 0 0 3px rgba(29,78,119,.15);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{outline:none}
.field.has-error input,
.field.has-error select,
.field.has-error textarea{border-color:#B91C1C}
.field .err{
  display:block;
  font-size:.82rem;
  color:#B91C1C;
  margin-top:.35rem;
  text-transform:none;
  letter-spacing:0;
  font-weight:500;
}

button.btn{border:none;cursor:pointer;font-family:inherit}

/* honeypot — hidden from humans, visible to bots */
.hp{position:absolute!important;left:-9999px!important;opacity:0;height:0;overflow:hidden}

/* form status messages */
.notice{
  border-left:4px solid;
  padding:1.1rem 1.3rem;
  margin-bottom:2rem;
  max-width:680px;
  border-radius:0 3px 3px 0;
}
.notice h3{font-size:1.1rem;margin-bottom:.35rem}
.notice p{margin:0;font-size:.95rem}
.notice-ok{border-color:#15803D;background:#F0FDF4;color:#14532D}
.notice-ok h3{color:#14532D}
.notice-bad{border-color:#B91C1C;background:#FEF2F2;color:#7F1D1D}
.notice-bad h3{color:#7F1D1D}