/* ==========================================================================
   Mills River Storage Center
   Design system: fluid type scale, spacing scale, pill buttons, soft-shadow
   cards. Palette is the Mills River green / amber / cream.
   ========================================================================== */

:root{
  /* Ink — near-black with a green cast */
  --ink:      #131a15;
  --ink-2:    #39463d;
  --ink-3:    #5f6d63;
  --ink-4:    #8c978f;

  /* Surface */
  --bg:       #ffffff;
  --bg-2:     #faf7f0;   /* cream */
  --bg-3:     #f1ebde;   /* sand  */
  --line:     #e3dccd;

  /* Brand — the roll-up door amber */
  --accent:      #c8761a;
  --accent-hot:  #e08a2e;
  --accent-deep: #9c5613;   /* passes AA on white for text */
  --accent-wash: #fdf4e8;

  /* Support — the forest green */
  --forest:      #1e3b2c;
  --forest-2:    #2c5540;
  --forest-wash: #edf3ef;
  --good:        #1a7f52;

  /* Type */
  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Scale — fluid, clamps at both ends */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.44rem);
  --step-2:  clamp(1.44rem, 1.30rem + 0.72vw, 1.94rem);
  --step-3:  clamp(1.73rem, 1.49rem + 1.20vw, 2.60rem);
  --step-4:  clamp(2.07rem, 1.68rem + 1.95vw, 3.50rem);
  --step-5:  clamp(2.49rem, 1.86rem + 3.10vw, 4.20rem);

  /* Space */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem;  --sp-7:3rem;   --sp-8:4rem; --sp-9:6rem;

  --radius:.625rem;
  --radius-lg:1.125rem;
  --radius-pill:999px;

  --shadow-sm: 0 1px 2px rgba(19,26,21,.06), 0 1px 3px rgba(19,26,21,.05);
  --shadow:    0 4px 12px rgba(19,26,21,.07), 0 2px 4px rgba(19,26,21,.04);
  --shadow-lg: 0 18px 40px rgba(19,26,21,.12), 0 4px 12px rgba(19,26,21,.06);

  --wrap:1180px;
  --wrap-narrow:760px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);font-size:var(--step-0);line-height:1.65;
  color:var(--ink-2);background:var(--bg);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{color:var(--ink);line-height:1.15;margin:0 0 var(--sp-4);font-weight:800;letter-spacing:-.02em}
h1{font-size:var(--step-5);letter-spacing:-.035em}
h2{font-size:var(--step-3);letter-spacing:-.028em}
h3{font-size:var(--step-1);letter-spacing:-.018em}
h4{font-size:var(--step-0);letter-spacing:-.01em}
p{margin:0 0 var(--sp-4)}
a{color:var(--accent-deep);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--accent)}
strong{color:var(--ink);font-weight:700}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--sp-5)}
.narrow{max-width:var(--wrap-narrow)}
.section{padding-block:var(--sp-8)}
.section--tight{padding-block:var(--sp-7)}
.bg-sand{background:var(--bg-2)}
.bg-white{background:var(--bg)}
.center{text-align:center}
.lede{font-size:var(--step-1);color:var(--ink-3);line-height:1.5}

.eyebrow{
  font-size:var(--step--1);font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-deep);margin:0 0 var(--sp-3);
}

/* ------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.82em 1.5em;border-radius:var(--radius-pill);
  font-weight:700;font-size:var(--step-0);line-height:1;
  text-decoration:none;white-space:nowrap;cursor:pointer;border:2px solid transparent;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent);color:#fff;box-shadow:var(--shadow)}
.btn--primary:hover{background:var(--accent-hot);color:#fff;box-shadow:var(--shadow-lg)}
.btn--dark{background:var(--forest);color:#fff;box-shadow:var(--shadow)}
.btn--dark:hover{background:var(--forest-2);color:#fff;box-shadow:var(--shadow-lg)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.32);backdrop-filter:blur(6px)}
.btn--ghost:hover{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.6)}
.btn--sm{padding:.6em 1.1em;font-size:var(--step--1)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.btn-row--center{justify-content:center}

/* ---------------------------------------------------------- promo bar -- */
.promo{
  background:var(--accent);color:#fff;text-align:center;
  padding:var(--sp-3) var(--sp-4);font-size:var(--step--1);font-weight:700;
  line-height:1.4;
}
.promo a{color:#fff;text-decoration:none;display:inline-flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:.25em .6em}
.promo a:hover{color:#fff}
.promo a:hover .promo__cta{text-decoration:underline}
.promo__tag{
  background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35);
  border-radius:var(--radius-pill);padding:.15em .7em;font-size:.82em;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.promo__cta{text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.promo__was{opacity:.8;text-decoration:line-through;font-weight:600}

/* flag on a discounted unit card */
.unit--special{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow-sm)}
.unit__flag{
  align-self:flex-start;background:var(--accent);color:#fff;
  border-radius:var(--radius-pill);padding:.2em .8em;
  font-size:var(--step--1);font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.unit__was{font-size:var(--step--1);font-weight:600;color:var(--ink-4);
  text-decoration:line-through;letter-spacing:0}

/* -------------------------------------------------------------- topbar -- */
.topbar{background:var(--ink);color:#c3cdc6;font-size:var(--step--1);padding:var(--sp-2) 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;align-items:center}
.topbar a{color:#fff;font-weight:700;text-decoration:none}
.topbar a:hover{color:var(--accent-hot)}
.topbar__badge{color:#9fada4}

/* -------------------------------------------------------------- header -- */
.site-header{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);min-height:76px}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.logo__mark{width:38px;height:38px;flex:0 0 38px}
.logo__text{font-size:var(--step-0);font-weight:800;color:var(--ink);line-height:1.1;letter-spacing:-.02em;white-space:nowrap}
.logo__text small{display:block;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);font-weight:700;margin-top:3px}

.nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap;justify-content:flex-end}
.nav a{
  color:var(--ink-2);text-decoration:none;font-size:var(--step--1);font-weight:600;
  padding:.5em .7em;border-radius:var(--radius);white-space:nowrap;
}
.nav a:hover{background:var(--bg-2);color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
/* .nav a sets a 10px radius — restore the pill on the header CTA */
.nav .btn{margin-left:var(--sp-2);border-radius:var(--radius-pill)}
.nav .btn:hover{background:var(--accent-hot);color:#fff}

/* ---------------------------------------------------------------- hero -- */
.hero{position:relative;background:var(--forest);color:#fff;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 400px at 80% -12%, rgba(224,138,46,.24), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.28));
}
.hero__ridge{position:absolute;left:0;right:0;bottom:0;width:100%;height:140px;opacity:.26}
.hero .wrap{position:relative;z-index:2;padding-block:clamp(3.5rem,9vw,6.5rem)}
.hero h1{color:#fff;max-width:17ch}
.hero .lede{color:#c9dccf;max-width:56ch}
.hero .eyebrow{color:var(--accent-hot)}
/* strong defaults to dark ink — force it light on every dark surface */
.hero strong,.panel strong,.cta strong,.site-footer strong,.topbar strong{color:#fff}
.hero__flags{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-6);padding:0;list-style:none}
.hero__flags li{
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);color:#fff;
  border-radius:var(--radius-pill);padding:.35em .95em;font-size:var(--step--1);font-weight:700;
  backdrop-filter:blur(6px);
}

/* --------------------------------------------------------- trust strip -- */
.trust{background:var(--bg);border-bottom:1px solid var(--line)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);padding:0}
.trust__item{background:var(--bg);padding:var(--sp-5) var(--sp-4);text-align:center}
.trust__num{font-size:var(--step-3);font-weight:800;color:var(--forest);line-height:1;display:block;letter-spacing:-.03em}
.trust__lbl{font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);font-weight:700;margin-top:var(--sp-2);display:block}

/* --------------------------------------------------------------- grid -- */
.grid{display:grid;gap:var(--sp-4)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.card{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--sp-6);box-shadow:var(--shadow-sm);
  transition:box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.card h3{margin-bottom:var(--sp-2)}
.card p:last-child{margin-bottom:0}
.card--link{text-decoration:none;color:inherit;display:block}
.card--link:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:#cfc6b2;color:inherit}
.card__icon{width:34px;height:34px;margin-bottom:var(--sp-4);color:var(--accent)}
.card__more{font-weight:700;color:var(--accent-deep);font-size:var(--step--1)}

/* -------------------------------------------------------- unit cards --- */
.unit-grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.unit{
  position:relative;display:flex;flex-direction:column;gap:var(--sp-3);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--sp-5);box-shadow:var(--shadow-sm);
  transition:box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.unit:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:#cfc6b2}
.unit__size{font-size:var(--step-2);font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1}
.unit__sqft{display:block;font-size:var(--step--1);font-weight:700;color:var(--ink-4);
  letter-spacing:.07em;text-transform:uppercase;margin-top:var(--sp-2)}
.unit__fit{margin:0;font-size:var(--step--1);color:var(--ink-3);line-height:1.55}
.unit__fit strong{color:var(--ink-2)}
.unit__price{display:flex;align-items:baseline;gap:.3em;margin-top:auto;padding-top:var(--sp-3);
  font-size:var(--step-2);font-weight:800;color:var(--forest);letter-spacing:-.03em}
.unit__price span{font-size:var(--step--1);font-weight:700;color:var(--ink-4);letter-spacing:0}

/* ---------------------------------------------------------- statements -- */
.proofs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-6);margin:0;padding:0;list-style:none}
.proof{border-top:3px solid var(--accent);padding-top:var(--sp-4)}
.proof h3{margin-bottom:var(--sp-2)}
.proof p{margin-bottom:0;color:var(--ink-3);font-size:var(--step--1)}

/* --------------------------------------------------------------- steps -- */
.steps{counter-reset:step;display:grid;gap:var(--sp-6);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));list-style:none;padding:0;margin:0}
.steps li{counter-increment:step;position:relative;padding-top:var(--sp-8)}
.steps li::before{
  content:counter(step);position:absolute;top:0;left:0;width:2.75rem;height:2.75rem;
  border-radius:var(--radius-pill);background:var(--accent);color:#fff;font-weight:800;
  font-size:var(--step-1);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);
}
.steps h3{margin-bottom:var(--sp-2)}
.steps p{margin-bottom:0;color:var(--ink-3);font-size:var(--step--1)}

/* ------------------------------------------------------------- tables --- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg);box-shadow:var(--shadow-sm)}
table{border-collapse:collapse;width:100%;font-size:var(--step--1);min-width:560px}
th,td{padding:var(--sp-3) var(--sp-4);text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--forest);color:#fff;font-size:var(--step--1);letter-spacing:.07em;text-transform:uppercase;font-weight:800}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:var(--bg-2)}
td strong{color:var(--ink)}
.yes{color:var(--good);font-weight:700}
.no{color:#9a3b2c;font-weight:700}
caption{caption-side:bottom;padding:var(--sp-3) var(--sp-4);font-size:var(--step--1);color:var(--ink-4);text-align:left}

/* ----------------------------------------------------------------- faq -- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line);padding:var(--sp-5) 0}
.faq__q{font-size:var(--step-1);color:var(--ink);margin:0 0 var(--sp-2);font-weight:800;letter-spacing:-.018em}
.faq__a{margin:0;color:var(--ink-2)}
.faq__a p:last-child{margin-bottom:0}

/* --------------------------------------------------------------- split -- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-7);align-items:center}
.split--rev .split__media{order:-1}
.panel{background:var(--forest);color:#c9dccf;padding:var(--sp-6);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.panel h3{color:#fff}
.panel a{color:var(--accent-hot)}

/* ------------------------------------------------------------ checklist -- */
.checks{list-style:none;padding:0;margin:0 0 var(--sp-5)}
.checks li{position:relative;padding-left:1.85rem;margin-bottom:var(--sp-3)}
.checks li::before{content:"";position:absolute;left:0;top:.4em;width:1.05rem;height:1.05rem;background:var(--accent);border-radius:var(--radius-pill)}
.checks li::after{content:"";position:absolute;left:.3rem;top:.68em;width:.42rem;height:.24rem;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}

/* ------------------------------------------------------------- callout -- */
.note{
  border-left:4px solid var(--accent);background:var(--accent-wash);
  padding:var(--sp-5);border-radius:0 var(--radius) var(--radius) 0;
  font-size:var(--step--1);color:#7a5410;margin:0 0 var(--sp-5);
}
.note strong{color:#5e3f08}
.note code{background:rgba(0,0,0,.06);padding:.1em .35em;border-radius:4px}

.answer{
  border-left:4px solid var(--accent);background:var(--bg);
  padding:var(--sp-5);margin:0 0 var(--sp-6);border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow:var(--shadow-sm);
}
.answer p:last-child{margin-bottom:0}
.answer strong{color:var(--ink)}

/* ------------------------------------------------------------ cta band -- */
.cta{background:var(--forest);color:#c9dccf;text-align:center;padding-block:var(--sp-8)}
.cta h2{color:#fff}
.cta p{max-width:56ch;margin-inline:auto;color:#c9dccf}
.cta__phone{display:inline-block;font-size:var(--step-4);color:#fff;text-decoration:none;font-weight:800;letter-spacing:-.03em;margin:var(--sp-2) 0 var(--sp-5)}
.cta__phone:hover{color:var(--accent-hot)}

/* -------------------------------------------------------------- footer -- */
.site-footer{background:var(--ink);color:#95a29a;font-size:var(--step--1);padding:var(--sp-8) 0 var(--sp-5)}
.site-footer h4{color:#fff;font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--sp-4)}
.site-footer a{color:#d3ddd6;text-decoration:none}
.site-footer a:hover{color:var(--accent-hot);text-decoration:underline}
.site-footer .grid{gap:var(--sp-6)}
.footer-list{list-style:none;padding:0;margin:0}
.footer-list li{margin-bottom:var(--sp-2)}
.site-footer address{font-style:normal;line-height:1.7}
.colophon{border-top:1px solid rgba(255,255,255,.12);margin-top:var(--sp-6);padding-top:var(--sp-4);display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}

/* --------------------------------------------------------- breadcrumbs -- */
.crumbs{font-size:var(--step--1);color:var(--ink-4);padding:var(--sp-4) 0 0}
.crumbs a{color:var(--ink-4);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs span{margin:0 .45em;opacity:.5}

.pagehead{background:var(--bg-2);border-bottom:1px solid var(--line);padding:var(--sp-4) 0 var(--sp-7)}
.pagehead h1{margin-bottom:var(--sp-3)}
.pagehead .lede{max-width:62ch;margin-bottom:0}

/* ------------------------------------------------------------- reviews -- */
.quote{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--sp-5);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:var(--sp-3)}
.quote blockquote{margin:0;font-size:var(--step-0);color:var(--ink);line-height:1.5}
.quote cite{font-style:normal;font-size:var(--step--1);color:var(--ink-4);font-weight:700;margin-top:auto}
.stars{color:var(--accent);letter-spacing:2px;font-size:var(--step-0)}
.rating{
  display:inline-flex;align-items:center;gap:var(--sp-3);background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:var(--sp-2) var(--sp-5);
  font-weight:700;font-size:var(--step--1);color:var(--ink-2);
}

/* --------------------------------------------------------------- facts -- */
.facts{margin:0;display:grid;grid-template-columns:auto 1fr;gap:0}
.facts dt{font-weight:700;color:var(--ink);padding:var(--sp-3) var(--sp-5) var(--sp-3) 0;border-bottom:1px solid var(--line);white-space:nowrap}
.facts dd{margin:0;padding:var(--sp-3) 0;border-bottom:1px solid var(--line)}

.photo{margin:var(--sp-6) 0}
.photo img{width:100%;height:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow);display:block}
.photo--limit{max-width:540px;margin-inline:auto}
.photo--sm{max-width:380px;margin-inline:auto}
.photo figcaption{font-size:var(--step--1);color:var(--ink-4);margin-top:var(--sp-2);text-align:center}

.map{border:0;width:100%;height:400px;border-radius:var(--radius-lg);display:block;box-shadow:var(--shadow-sm)}

/* --------------------------------------------------------- responsive --- */
@media(max-width:1340px){
  .nav a{padding:.45em .55em}
  .logo__mark{width:33px;height:33px;flex-basis:33px}
}
@media(max-width:1120px){
  .site-header .wrap{flex-wrap:wrap;padding-block:var(--sp-3);min-height:0}
  .nav{width:100%;justify-content:flex-start;padding-top:var(--sp-2);border-top:1px solid var(--line);margin-top:var(--sp-3)}
  .nav .btn{margin-left:auto}
}
@media(max-width:900px){
  .split{grid-template-columns:1fr;gap:var(--sp-6)}
  .split--rev .split__media{order:0}
  .trust .wrap{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  /* every CTA is a phone tap — keep targets at the 44px minimum */
  .btn{min-height:44px}
  .btn--sm{padding:.7em 1.2em;font-size:var(--step-0)}
  .grid--2{grid-template-columns:1fr}
  .section{padding-block:var(--sp-7)}
  .facts{grid-template-columns:1fr}
  .facts dt{border-bottom:0;padding-bottom:0}
  .facts dd{padding-top:2px}
  .colophon{flex-direction:column;gap:var(--sp-2)}
}
@media(max-width:620px){
  /* the whole bar is a link — drop the redundant CTA so it fits two lines */
  .promo__cta{display:none}
  .promo{padding:var(--sp-2) var(--sp-3)}
}
@media(max-width:520px){
  .trust .wrap{grid-template-columns:1fr}
  .steps li{padding-top:0;padding-left:3.6rem;min-height:2.75rem}
}

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

@media print{
  .site-header,.topbar,.cta,.hero__ridge{display:none}
  body{background:#fff}
}