/* 2S Exterior Services
   Palette and type taken from the live Squarespace site: black header, brand
   blue from the logo artwork, Rubik headings over Nunito Sans body. */

:root {
  --blue:        #0b7ae0;
  --blue-bright: #1a95ff;
  --blue-deep:   #0045b3;
  --blue-ink:    #073a78;

  --ink:    #0a0e13;
  --ink-2:  #121820;
  --ink-3:  #1b232d;

  --paper:   #ffffff;
  --paper-2: #f2f6fa;
  --paper-3: #e3ebf3;

  --text:  #22303f;
  --muted: #5b6c7d;
  --line:  #dbe4ed;

  --wrap: 1180px;
  --pad: clamp(1.15rem, 4vw, 2.5rem);
  --r: 14px;

  --shadow: 0 1px 2px rgba(10, 25, 45, .06), 0 8px 28px rgba(10, 25, 45, .08);
  --shadow-lg: 0 2px 4px rgba(10, 25, 45, .07), 0 22px 60px rgba(10, 25, 45, .14);

  --head-font: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body-font: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--body-font);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

/* Without height:auto an img with width/height attributes gets stretched to the
   attribute ratio the moment CSS sets one dimension. This exact omission shipped
   a page of distorted images once already. */
img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--head-font);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.35rem + 3.1vw, 3.65rem); }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.9vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1.02rem + .5vw, 1.4rem); }
h4 { font-size: 1.05rem; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blue); }

.wrap { width: min(100% - (var(--pad) * 2), var(--wrap)); margin-inline: auto; }
.narrow { width: min(100%, 70ch); }

.kicker {
  font-family: var(--head-font);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 .85rem;
}
.lede { font-size: clamp(1.05rem, 1rem + .35vw, 1.28rem); color: var(--muted); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blue); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--blue-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--head-font);
  font-size: .82rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  padding: .95rem 1.7rem;
  border: 2px solid transparent; border-radius: 999px;
  background: var(--blue); color: #fff;
  text-decoration: none; cursor: pointer;
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease, color .16s ease;
  box-shadow: 0 6px 18px rgba(11, 122, 224, .3);
}
.btn:hover { background: var(--blue-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(11, 122, 224, .38); }
.btn.ghost { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; box-shadow: none; }
.btn.ghost:hover { background: rgba(255,255,255,.13); border-color: #fff; transform: translateY(-2px); }
.btn.dark { background: var(--ink); box-shadow: 0 6px 18px rgba(10,14,19,.25); }
.btn.dark:hover { background: var(--ink-3); }
.btn.lg { padding: 1.1rem 2.1rem; font-size: .88rem; }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.head-in {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 78px;
}
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { width: 190px; }
@media (max-width: 480px) { .brand img { width: 148px; } }

.nav { display: flex; align-items: center; gap: .35rem; }
.nav a {
  font-family: var(--head-font);
  font-size: .8rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255,255,255,.82); text-decoration: none;
  padding: .6rem .85rem; border-radius: 8px;
  transition: color .15s ease, background .15s ease;
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--blue-bright); border-radius: 8px 8px 0 0; }
.nav .btn { color: #fff; padding: .72rem 1.3rem; margin-left: .5rem; }
.nav .btn[aria-current="page"] { box-shadow: 0 6px 18px rgba(11,122,224,.3); }

.head-phone {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--head-font); font-weight: 600; font-size: .95rem;
  color: #fff; text-decoration: none; white-space: nowrap;
  padding: .5rem .7rem; border-radius: 8px;
}
.head-phone:hover { color: var(--blue-bright); background: rgba(255,255,255,.07); }
.head-phone svg { width: 16px; height: 16px; flex: none; }

.nav-toggle {
  display: none;
  background: transparent; border: 1px solid rgba(255,255,255,.25); border-radius: 8px;
  color: #fff; padding: .55rem .7rem; cursor: pointer; line-height: 0;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .x { display: none; }
.nav-toggle[aria-expanded="true"] .x { display: block; }
.nav-toggle[aria-expanded="true"] .bars { display: none; }

@media (max-width: 940px) {
  .nav-toggle { display: inline-block; }
  .head-phone span { display: none; }
  .nav {
    position: absolute; inset: 78px 0 auto; z-index: 99;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink-2); border-bottom: 1px solid rgba(255,255,255,.1);
    padding: .6rem var(--pad) 1.3rem;
    box-shadow: 0 24px 40px rgba(0,0,0,.35);
  }
  .nav:not(.open) { display: none; }
  .nav a { padding: .95rem .4rem; font-size: .92rem; border-bottom: 1px solid rgba(255,255,255,.07); }
  .nav a[aria-current="page"] { box-shadow: none; color: var(--blue-bright); }
  .nav .btn { margin: 1rem 0 0; justify-content: center; border-bottom: 0; }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { position: relative; background: var(--ink); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--hero-img);
  background-size: cover; background-position: center 62%;
}
/* Scrim weighted to the left so the headline holds contrast over the sky while
   the photo stays visible on the right. */
/* Scrim weighted to the left, but deliberately lighter than a full overlay so
   the photograph stays bright across the right two thirds. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(96deg, rgba(6,12,20,.9) 0%, rgba(6,12,20,.64) 30%, rgba(6,12,20,.18) 56%, rgba(6,12,20,.05) 78%),
    linear-gradient(to top, rgba(6,12,20,.44), transparent 38%);
}
.hero-in { position: relative; z-index: 2; padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(4rem, 8vw, 6.5rem); }
.hero-copy { max-width: 44rem; }
/* Set in caps at the client's request. Caps in Rubik run appreciably wider than
   the condensed face the treatment was drawn with, so the hero headline is
   stepped down from the global h1 scale and given a wider column — otherwise
   "STRONG IMPRESSIONS." breaks onto a third line and leaves an orphan.
   The rule below carries the gap, so the headline sits flush against it. */
.hero h1 {
  color: #fff; margin-bottom: 0;
  text-transform: uppercase; letter-spacing: -.01em;
  font-size: clamp(1.95rem, 1.1rem + 2.9vw, 3.15rem);
}
.hero h1 .b { display: block; color: var(--blue-bright); }
.hero-rule {
  width: min(100%, 27rem); height: 3px; margin: 1.5rem 0 1.6rem;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue-bright) 55%, rgba(26,149,255,0) 100%);
}
.hero .lede { color: rgba(255,255,255,.94); max-width: 31rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; align-items: center; }
.hero-note {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  margin-top: 2.2rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: .9rem; color: rgba(255,255,255,.72);
}
.hero-note span { display: inline-flex; align-items: center; gap: .45rem; }
.hero-note svg { width: 15px; height: 15px; color: var(--blue-bright); flex: none; }

/* ── Page banner (interior pages) ────────────────────────────────────────── */
.page-head {
  background: var(--ink);
  background-image: radial-gradient(120% 150% at 8% 0%, rgba(11,122,224,.4), transparent 58%);
  color: #fff;
  padding: clamp(3rem, 6vw, 4.75rem) 0 clamp(2.6rem, 5vw, 4rem);
}
.page-head h1 { color: #fff; }
.page-head .lede { color: rgba(255,255,255,.82); max-width: 62ch; }
.page-head .kicker { color: var(--blue-bright); }

.crumbs { font-size: .82rem; color: rgba(255,255,255,.62); margin: 0 0 1.15rem; }
.crumbs a { color: rgba(255,255,255,.82); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs span { padding: 0 .45rem; opacity: .5; }

/* ── Sections ────────────────────────────────────────────────────────────── */
section { padding: clamp(3.25rem, 7vw, 5.75rem) 0; }
.alt { background: var(--paper-2); }
.dark { background: var(--ink); color: rgba(255,255,255,.76); }
.dark h2, .dark h3 { color: #fff; }
.dark .lede { color: rgba(255,255,255,.74); }
.dark .kicker { color: var(--blue-bright); }

.head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.head.center { margin-inline: auto; text-align: center; }

/* ── Grids and cards ─────────────────────────────────────────────────────── */
.grid { display: grid; gap: 1.15rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.6rem 1.5rem;
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--muted); font-size: .96rem; }
a.card { text-decoration: none; color: inherit; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(11,122,224,.42); }
@media (prefers-reduced-motion: reduce) { a.card:hover { transform: none; } }

.card-more {
  margin-top: auto; padding-top: 1.15rem;
  font-family: var(--head-font); font-size: .78rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--blue);
  display: inline-flex; align-items: center; gap: .4rem;
}
a.card:hover .card-more { gap: .7rem; }
.card-more svg { width: 14px; height: 14px; transition: transform .18s ease; }

.ico {
  width: 46px; height: 46px; border-radius: 11px;
  display: grid; place-items: center; margin-bottom: 1.15rem;
  background: linear-gradient(150deg, var(--blue-bright), var(--blue-deep));
  color: #fff; flex: none;
  box-shadow: 0 5px 14px rgba(11,122,224,.32);
}
.ico svg { width: 23px; height: 23px; }

/* Proof band */
.proof { display: grid; gap: 1.6rem 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.proof h3 { font-size: 1.02rem; margin-bottom: .3rem; }
.proof p { font-size: .93rem; margin: 0; }
.proof .bar { width: 34px; height: 3px; background: var(--blue-bright); border-radius: 2px; margin-bottom: .95rem; }

/* Process */
.steps { counter-reset: s; display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.step { position: relative; padding: 1.55rem 1.4rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.step .n {
  font-family: var(--head-font); font-size: 2rem; font-weight: 700;
  color: var(--paper-3); line-height: 1; margin-bottom: .5rem; display: block;
}
.step h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.step p { font-size: .93rem; color: var(--muted); margin: 0; }

/* Checked lists */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.checks.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.checks li { position: relative; padding-left: 1.85rem; font-size: .97rem; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/.72rem no-repeat;
}
.dark .checks li::before { background-color: var(--blue-bright); }

/* Pill lists (cities, tags) */
.pills { display: flex; flex-wrap: wrap; gap: .55rem; padding: 0; margin: 0; list-style: none; }
.pills a, .pills span {
  display: inline-block; padding: .5rem 1rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  font-size: .9rem; text-decoration: none; color: var(--text);
}
.pills a:hover { border-color: var(--blue); color: var(--blue-ink); background: #fff; }
.pills span { color: var(--muted); }
.alt .pills a, .alt .pills span { background: #fff; }

/* ── Split (text + media) ────────────────────────────────────────────────── */
.split { display: grid; gap: clamp(1.75rem, 4vw, 3.25rem); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.split-media img { width: 100%; border-radius: var(--r); box-shadow: var(--shadow-lg); }
figure { margin: 0; }
figcaption { font-size: .85rem; color: var(--muted); margin-top: .75rem; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq { display: grid; gap: .7rem; max-width: 56rem; margin-inline: auto; }
.faq details {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.1rem 1.35rem;
}
.faq details[open] { border-color: rgba(11,122,224,.4); box-shadow: var(--shadow); }
.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--head-font); font-weight: 600; font-size: 1.02rem; color: var(--ink);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 1.1rem; height: 1.1rem; margin-top: .22em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b7ae0' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq .a { padding-top: .8rem; color: var(--muted); font-size: .97rem; }

/* ── CTA band ────────────────────────────────────────────────────────────── */
.cta-band {
  background: linear-gradient(115deg, var(--blue-ink), var(--blue-deep) 55%, var(--blue) 100%);
  color: #fff; text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.88); max-width: 54ch; margin-inline: auto; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; margin-top: 1.9rem; }
.cta-band .btn { background: #fff; color: var(--blue-ink); box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.cta-band .btn:hover { background: var(--ink); color: #fff; }
.cta-band .btn.ghost { background: transparent; color: #fff; }

/* ── Form ────────────────────────────────────────────────────────────────── */
.form-wrap { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; }
form.quote { display: grid; gap: 1.05rem; }
.field { display: grid; gap: .4rem; }
.field.row2 { grid-column: 1 / -1; }
form.quote .pair { display: grid; gap: 1.05rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* City / State / ZIP. Fixed ratios rather than auto-fit: state and ZIP are
   short and known, and letting them claim a third of the row each looks wrong
   next to a city name. Below 34rem the city takes its own line. */
form.quote .pair.addr { grid-template-columns: 2.2fr .7fr 1fr; }
@media (max-width: 34rem) {
  form.quote .pair.addr { grid-template-columns: 1fr 1fr; }
  form.quote .pair.addr .field:first-child { grid-column: 1 / -1; }
}
form.quote #state { text-transform: uppercase; }

/* Consent. Deliberately plain and readable rather than fine print — it is
   only worth collecting if it is legible. */
.field.consent label {
  display: grid; grid-template-columns: auto 1fr; gap: .65rem;
  align-items: start; cursor: pointer;
  font-weight: 400; font-size: .86rem; line-height: 1.5;
  color: var(--muted); letter-spacing: 0; text-transform: none;
}
.field.consent input { width: 1.05rem; height: 1.05rem; margin-top: .12rem; accent-color: var(--blue); }
label {
  font-family: var(--head-font); font-size: .82rem; font-weight: 600;
  letter-spacing: .04em; color: var(--ink);
}
label .opt { font-weight: 400; color: var(--muted); letter-spacing: 0; text-transform: none; }
input, textarea, select {
  font: inherit; font-size: 1rem; color: var(--text);
  padding: .82rem .95rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(11,122,224,.16);
}
textarea { min-height: 8.5rem; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .87rem; color: var(--muted); }
.form-msg { padding: .95rem 1.15rem; border-radius: 10px; font-size: .95rem; display: none; }
.form-msg.show { display: block; }
.form-msg.ok { background: #e7f6ec; border: 1px solid #a8ddb9; color: #14532d; }
.form-msg.err { background: #fdecec; border: 1px solid #f2b8b8; color: #7f1d1d; }
button[disabled] { opacity: .6; cursor: progress; }

.side-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); padding: 1.75rem 1.6rem; }
.side-card h3 { font-size: 1.1rem; }
.contact-rows { display: grid; gap: 1.1rem; margin: 1.25rem 0 0; }
.contact-row { display: flex; gap: .85rem; align-items: flex-start; }
.contact-row svg { width: 19px; height: 19px; color: var(--blue); flex: none; margin-top: .22em; }
.contact-row .k { font-family: var(--head-font); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: block; }
.contact-row a { font-weight: 600; text-decoration: none; color: var(--ink); }
.contact-row a:hover { color: var(--blue); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-foot { background: var(--ink); color: rgba(255,255,255,.62); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; font-size: .93rem; }
/* Stack first, widen at a breakpoint. An auto-fit repeat sitting after an
   explicit wide first track cannot shrink below the sum of both minimums, which
   pushed the whole footer 96px past the viewport on a phone. */
.foot-grid { display: grid; gap: 2.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.foot-brand { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .foot-grid { grid-template-columns: 1.4fr repeat(4, 1fr); }
  .foot-brand { grid-column: auto; }
}
.site-foot h4 {
  color: #fff; font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.05rem;
}
.site-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.site-foot a { color: rgba(255,255,255,.68); text-decoration: none; }
.site-foot a:hover { color: #fff; }
.foot-brand img { width: 200px; margin-bottom: 1.1rem; }
.foot-brand p { max-width: 34ch; }
.foot-contact { display: grid; gap: .5rem; margin-top: 1.2rem; }
.foot-contact a { color: #fff; font-weight: 600; }
.foot-bottom {
  margin-top: 2.75rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-size: .85rem; color: rgba(255,255,255,.45);
}

/* ── Reveal on scroll ────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }