/* ==========================================================================
   Sea 2 Sea Tree & Debris
   Palette sampled from the truck: door paint, badge blue, badge sun,
   and the county permit sticker. Deliberately no cream, no Inter.
   ========================================================================== */
:root{
  /* Sampled directly from the logo artwork */
  --asphalt:    #001848;   /* logo navy, 31% of the mark */
  --deepwater:  #001230;   /* deeper navy */
  --seafoam:    #35C6DE;   /* logo cyan, brightened for dark grounds */
  --seafoam-dk: #0A6C84;   /* same hue, legible on light */
  --sunrise:    #F0A800;   /* logo sun */
  --sunrise-dk: #C77A00;
  --ember:      #F07800;   /* logo sunburst orange */
  --placard:    #FFD200;   /* the HAULING yellow */
  --concrete:   #E6EDF0;
  --concrete-d: #D3DEE3;
  --paper:      #FFFFFF;

  --ink:        #001430;
  --ink-soft:   #405670;
  --ink-faint:  #73899C;
  --rule:       #BECDD4;

  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --util:    "Saira Condensed", "Arial Narrow", sans-serif;
  --body:    "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;

  --wrap: 1200px;
  --gut:  clamp(1.25rem, 4vw, 3rem);
  --band: clamp(3.75rem, 8vw, 6.75rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--seafoam-dk); text-underline-offset:3px}
a:hover{color:var(--ink)}

/* ---------- Type ---------- */
h1,h2,h3{margin:0 0 .42em; font-family:var(--display); font-weight:800;
         line-height:.94; letter-spacing:.004em; text-transform:uppercase}
h1{font-size:clamp(2.9rem, 7.2vw, 5.6rem)}
h2{font-size:clamp(2.1rem, 4.6vw, 3.4rem)}
h3{font-size:1.34rem; letter-spacing:.012em; line-height:1.05}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong{font-weight:600}

.lede{font-size:clamp(1.06rem,1.9vw,1.22rem); color:var(--ink-soft); max-width:60ch; line-height:1.58}
.eyebrow{
  font-family:var(--util); font-weight:700; font-size:.82rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--seafoam-dk);
  margin:0 0 1rem; display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{content:""; width:1.9rem; height:2px; background:var(--sunrise); flex:none}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.band{padding-block:var(--band)}
.band--concrete{background:var(--concrete)}
.band--dark{background:var(--asphalt); color:#D7DEE0}
.band--dark h2,.band--dark h3{color:#fff}
.band--dark .lede,.band--dark p{color:#A8B6BB}
.band--dark .eyebrow{color:var(--seafoam)}

/* ---------- Buttons: squared, like painted panels ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--util); font-weight:700; font-size:1.02rem;
  letter-spacing:.08em; text-transform:uppercase;
  padding:1rem 1.7rem; border:2px solid transparent; border-radius:0;
  text-decoration:none; cursor:pointer; transition:background .14s, color .14s, border-color .14s;
}
.btn--go{background:var(--sunrise); color:var(--asphalt); border-color:var(--sunrise)}
.btn--go:hover{background:var(--sunrise-dk); border-color:var(--sunrise-dk); color:#fff}
.btn--line{background:transparent; color:#fff; border-color:rgba(53,198,222,.55)}
.btn--line:hover{background:rgba(53,198,222,.14); border-color:var(--seafoam); color:#fff}
.btn--ink{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn--ink:hover{background:var(--ink); color:#fff}
.btns{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem}

/* ---------- Header ---------- */
.topbar{background:var(--deepwater); color:#8FA8B2; font-family:var(--util); font-size:.9rem; letter-spacing:.05em}
.topbar .wrap{display:flex; flex-wrap:wrap; gap:.35rem 1.75rem; justify-content:space-between; padding-block:.55rem}
.topbar a{color:var(--seafoam); font-weight:700; text-decoration:none}
.topbar a:hover{color:#fff}

.site-header{position:sticky; top:0; z-index:60; background:var(--asphalt); border-bottom:2px solid rgba(53,198,222,.18)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.85rem; position:relative}
.brand{text-decoration:none; display:block}

.nav{display:flex; align-items:center; gap:.1rem}
.nav a{
  font-family:var(--util); font-weight:600; font-size:.97rem; letter-spacing:.075em;
  text-transform:uppercase; color:#C3D0D4; text-decoration:none;
  padding:.6rem .78rem; white-space:nowrap; border-bottom:2px solid transparent;
}
.nav a:hover{color:#fff; border-bottom-color:rgba(53,198,222,.5)}
.nav a[aria-current="page"]{color:#fff; border-bottom-color:var(--sunrise)}
.nav .btn{margin-left:.7rem; padding:.7rem 1.15rem; font-size:.92rem}

.nav-toggle{display:none; background:none; border:2px solid rgba(53,198,222,.4); color:#fff; padding:.5rem .62rem; cursor:pointer}
@media (max-width:1150px){
  .nav-toggle{display:block}
  .nav{display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:0;
       background:var(--asphalt); padding:.35rem var(--gut) 1.2rem; border-bottom:2px solid var(--sunrise)}
  .nav.is-open{display:flex}
  .nav a{padding:.9rem .2rem; border-bottom:1px solid rgba(255,255,255,.1); font-size:1.05rem}
  .nav .btn{margin:1rem 0 0; justify-content:center}
}

/* ---------- Logo ---------- */
.brand{display:inline-block; line-height:0}
.brand__logo{height:104px; width:auto; transition:height .18s ease}
.site-header.is-compact .brand__logo{height:62px}
.site-header.is-compact .wrap{padding-block:.5rem}
.footer-logo{width:min(260px,72%); height:auto; margin-bottom:1.3rem}
@media (max-width:1150px){ .brand__logo{height:76px} .site-header.is-compact .brand__logo{height:56px} }
@media (max-width:520px){ .brand__logo{height:60px} }

/* ---------- Hero ---------- */
.hero{background:var(--asphalt); color:#fff; padding-block:clamp(3.25rem,7vw,5.5rem) clamp(3rem,6vw,4.5rem);
      position:relative; overflow:hidden}
.hero::after{content:""; position:absolute; inset:auto 0 0 0; height:3px;
             background:linear-gradient(90deg,var(--seafoam) 0 22%,var(--sunrise) 22% 34%,transparent 34%)}
.hero h1{color:#fff; max-width:15ch; margin-bottom:.3em}
.hero .lede{color:#AFC0C6; max-width:52ch}
.hero .eyebrow{color:var(--seafoam)}
.hero--sub{padding-block:clamp(2.6rem,5vw,4rem) clamp(2.4rem,4.5vw,3.5rem)}
.hero--sub h1{max-width:20ch; font-size:clamp(2.4rem,5.6vw,4.2rem)}

/* ---------- Credential placards (the permit-sticker motif) ---------- */
.placards{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2.4rem}
.placard{
  font-family:var(--util); font-weight:700; font-size:.82rem; letter-spacing:.13em; text-transform:uppercase;
  padding:.5rem .8rem; border:2px solid rgba(255,210,0,.45); color:var(--placard); background:rgba(255,210,0,.08);
  display:flex; align-items:baseline; gap:.55rem;
}
.placard b{font-size:.95rem; letter-spacing:.06em; color:#FFE566}
.placard--plain{border-color:rgba(53,198,222,.4); color:var(--seafoam); background:rgba(53,198,222,.08)}
.band--concrete .placard{border-color:rgba(10,108,132,.35); color:var(--seafoam-dk); background:rgba(10,108,132,.06)}
.band--concrete .placard b{color:var(--ink)}

/* ---------- SIGNATURE: hurricane season meter ---------- */
.season{
  margin-top:2.8rem; border:2px solid rgba(53,198,222,.26); background:rgba(0,18,48,.55);
  padding:1.35rem 1.5rem 1.5rem;
}
.season__top{display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; justify-content:space-between; align-items:baseline; margin-bottom:1.1rem}
.season__label{font-family:var(--util); font-weight:700; font-size:.8rem; letter-spacing:.2em;
               text-transform:uppercase; color:var(--seafoam)}
.season__status{font-family:var(--display); font-weight:700; font-size:1.5rem; letter-spacing:.02em;
                text-transform:uppercase; color:#fff; line-height:1}
.season__status em{font-style:normal; color:var(--sunrise)}
.season__track{position:relative; height:16px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1)}
.season__peak{position:absolute; top:0; bottom:0; background:rgba(240,168,0,.26);
              border-left:1px solid rgba(240,168,0,.55); border-right:1px solid rgba(240,168,0,.55)}
.season__fill{position:absolute; top:0; bottom:0; left:0; width:0; background:rgba(53,198,222,.4); transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.season__now{position:absolute; top:-7px; bottom:-7px; width:3px; background:var(--sunrise); left:0;
             transition:left 1.1s cubic-bezier(.2,.7,.2,1)}
.season__scale{display:flex; justify-content:space-between; margin-top:.6rem;
               font-family:var(--util); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:#7B8D94}
.season__note{margin-top:1rem; font-size:.95rem; color:#AFC0C6; max-width:62ch}
.season__note b{color:#fff; font-weight:600}
@media (prefers-reduced-motion:reduce){ .season__fill,.season__now{transition:none} }

/* ---------- Panels (squared, top rule, no uniform radius) ---------- */
.grid{display:grid; gap:1.15rem}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}

.panel{background:var(--paper); border:1px solid var(--rule); border-top:4px solid var(--seafoam-dk); padding:1.6rem 1.5rem 1.7rem}
.panel h3{margin-bottom:.55rem}
.panel p{color:var(--ink-soft); font-size:.98rem}
.panel a{font-family:var(--util); font-weight:700; letter-spacing:.09em; text-transform:uppercase; font-size:.86rem; text-decoration:none}
.panel a::after{content:" →"}
.panel--gold{border-top-color:var(--sunrise)}
.band--dark .panel{background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.11); border-top-color:var(--seafoam)}
.band--dark .panel p{color:#A8B6BB}
.panel__ico{width:38px; height:38px; margin-bottom:1rem; color:var(--seafoam-dk)}
.panel__ico svg{width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.band--dark .panel__ico{color:var(--seafoam)}

/* ---------- Ticks ---------- */
.ticks{list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:.78rem}
.ticks li{position:relative; padding-left:1.75rem; color:var(--ink-soft)}
.ticks li::before{content:""; position:absolute; left:0; top:.55em; width:.62rem; height:.62rem;
                  background:var(--sunrise); transform:rotate(45deg)}
.ticks li strong{color:var(--ink)}
.band--dark .ticks li{color:#A8B6BB}
.band--dark .ticks li strong{color:#fff}

/* ---------- Split ---------- */
.split{display:grid; gap:clamp(2rem,5vw,4rem); align-items:center; grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.shot{aspect-ratio:4/3; background:var(--concrete-d); border:1px solid var(--rule);
      display:grid; place-items:center; padding:1.5rem; text-align:center}
.shot p{font-family:var(--util); letter-spacing:.13em; text-transform:uppercase; font-size:.82rem; color:var(--ink-faint)}
.band--dark .shot{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12)}

/* ---------- Sequence (numbering earns its place: this is a real order) ---------- */
.steps{list-style:none; counter-reset:s; margin:2.4rem 0 0; padding:0;
       display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.steps li{counter-increment:s; border-top:2px solid var(--rule); padding-top:1.1rem; color:var(--ink-soft); font-size:.97rem}
.steps li::before{content:counter(s,decimal-leading-zero); display:block; font-family:var(--display); font-weight:800;
                  font-size:2.5rem; line-height:1; color:var(--sunrise); margin-bottom:.5rem}
.steps li strong{display:block; font-family:var(--util); font-weight:700; letter-spacing:.09em; text-transform:uppercase;
                 color:var(--ink); font-size:.95rem; margin-bottom:.45rem}

/* ---------- Closing call band ---------- */
.callout{background:var(--deepwater); color:#fff; border-top:3px solid var(--sunrise)}
.callout h2{color:#fff; max-width:16ch}
.callout p{color:#A8B6BB; max-width:54ch}
.callout .split{align-items:center}
.callout__num{font-family:var(--display); font-weight:800; font-size:clamp(2.4rem,5vw,3.6rem);
              color:var(--sunrise); text-decoration:none; letter-spacing:.01em; display:inline-block; line-height:1}
.callout__num:hover{color:#fff}

/* ---------- Form ---------- */
.form{display:grid; gap:1.15rem; max-width:640px; margin-top:2rem}
.field{display:grid; gap:.4rem}
.field label{font-family:var(--util); font-weight:700; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink)}
.field label .req{color:var(--sunrise-dk)}
.field input,.field select,.field textarea{
  font:inherit; font-size:1rem; color:var(--ink); background:var(--paper);
  padding:.82rem .9rem; border:1px solid var(--rule); border-radius:0; width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--seafoam-dk); outline-offset:-2px; border-color:var(--seafoam-dk);
}
.field textarea{min-height:132px; resize:vertical}
.field-row{display:grid; gap:1.15rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.contact-list{display:grid; gap:1.35rem; margin:0; padding:0}
.contact-list dt{font-family:var(--util); font-weight:700; font-size:.76rem; letter-spacing:.16em;
                 text-transform:uppercase; color:var(--ink-faint); margin-bottom:.2rem}
.contact-list dd{margin:0; font-size:1.1rem; font-weight:500}
.contact-list a{font-weight:600; text-decoration:none}

/* ---------- Footer ---------- */
.site-footer{background:var(--asphalt); color:#8D9CA2; padding-block:3.5rem 0; font-size:.95rem}
.site-footer h4{font-family:var(--util); font-weight:700; color:#fff; font-size:.78rem;
                letter-spacing:.18em; text-transform:uppercase; margin:0 0 1.05rem}
.site-footer a{color:#C3D0D4; text-decoration:none}
.site-footer a:hover{color:#fff}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.footer-grid{display:grid; gap:2.4rem; grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.footer-brand p{margin-top:1.1rem; max-width:34ch}
.creds{margin-top:3rem; padding-top:1.7rem; border-top:1px solid rgba(255,255,255,.11);
       display:flex; flex-wrap:wrap; gap:.7rem}
.footer-bottom{margin-top:1.7rem; border-top:1px solid rgba(255,255,255,.11); padding-block:1.4rem;
               display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; justify-content:space-between;
               font-family:var(--util); font-size:.85rem; letter-spacing:.05em; color:#6F8087}

/* ---------- Placeholder marker ---------- */
.todo{background:rgba(255,210,0,.16); color:#8A7410; border:1px dashed rgba(185,132,42,.7);
      padding:0 .35em; font-weight:600; font-size:.95em}
.band--dark .todo,.hero .todo,.topbar .todo,.callout .todo,.site-footer .todo{
  background:rgba(240,168,0,.14); color:#F0C978; border-color:rgba(240,168,0,.5)}

/* ---------- Utility ---------- */
.center{text-align:center}
.center .lede{margin-inline:auto}
.center .eyebrow{justify-content:center}
.center .btns{justify-content:center}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-9999px}
.skip:focus{left:.75rem; top:.75rem; z-index:100; background:#fff; color:var(--ink); padding:.7rem 1rem}
:focus-visible{outline:2px solid var(--sunrise); outline-offset:2px}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important; scroll-behavior:auto !important} }

/* ---------- Hero grid: headline left, signature right ---------- */
.hero__grid{display:grid; gap:clamp(2rem,4.5vw,3.75rem); align-items:center;
            grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.hero__main h1{max-width:13ch}
.hero__side .season{margin-top:0}
.hero .wrap + .wrap{margin-top:2.6rem}
.hero .placards{margin-top:0}
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr; gap:2.4rem}
  .hero__main h1{max-width:15ch}
}

/* nav CTA must not inherit the nav link colour */
.nav a.btn--go{color:var(--asphalt)}
.nav a.btn--go:hover{color:#fff; border-bottom-color:var(--sunrise-dk)}

/* meter: keep the peak band reading as gold, not olive under the fill */
.season__track{isolation:isolate}
.season__fill{background:rgba(53,198,222,.5); z-index:1}
.season__peak{background:rgba(240,168,0,.14); z-index:2;
              border-left:2px solid rgba(240,168,0,.75); border-right:2px solid rgba(240,168,0,.75)}
.season__now{z-index:3; box-shadow:0 0 0 2px rgba(0,18,48,.85)}