/* SMG Waterproofing — site styles
   Breakpoints mirror the original theme so the layout matches 1:1:
   - 1024px  tablet layout (columns wrap)
   - 921px   mobile header + base font-size 91.2%
   - 767px   single-column mobile layout
   - 544px   small-phone heading sizes */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/roboto-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/work-sans-latin.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  --accent: #e65644;
  --accent-dark: #c95747;
  --navy: #000422;
  --navy-2: #00052f;
  --navy-line: #13183c;
  --teal: #046380;
  --text: #8e91aa;
  --text-on-dark: #dbddee;
  --line: #dbddee;
  --input-bg: #fafafa;
  --input-border: #eaeaea;
  --panel: #f8f8fb;
  --white: #fff;
  --font-body: "Roboto", sans-serif;
  --font-head: "Work Sans", sans-serif;
  --lh: 1.85714285714286;
  --gap: 20px;
}

/* ---------- Base ---------- */
html { font-size: 100%; box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: var(--teal); text-decoration: none; }
a:hover, a:focus { color: var(--navy); }
p { margin: 0 0 1em; }
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.1;
  color: var(--navy);
  text-transform: capitalize;
}
h1 { font-size: 4rem; }
h2 { font-size: 3rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }
ul { margin: 0; padding: 0; list-style: none; }
svg { display: block; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto;
  clip: auto; padding: 12px 16px; background: var(--white); color: var(--navy);
}
::selection { background: var(--teal); color: var(--white); }

/* ---------- Layout primitives ----------
   .s = section, .c = container, .col = column, .in = column inner, .w = block */
.s { position: relative; }
.c { position: relative; display: flex; margin: 0 auto; max-width: 1200px; }
.s--full > .c { max-width: none; }
.col { position: relative; display: flex; min-height: 1px; width: 100%; }
.in {
  position: relative; display: flex; flex-wrap: wrap; align-content: flex-start;
  width: 100%;
}
.in > * { width: 100%; }
.w { position: relative; }
.w:where(:not(:last-child)) { margin-bottom: var(--gap); }
.w--auto { width: auto !important; max-width: 100%; }
.w--auto:where(:not(:last-child)) { margin-bottom: 0; }
p.w { margin-bottom: 1em; }
p.w:where(:not(:last-child)) { margin-bottom: calc(1em + var(--gap)); }
.overlay { position: absolute; inset: 0; pointer-events: none; }

/* ---------- Icons ---------- */
.ico { display: inline-block; line-height: 1; }
.ico svg { height: 1em; width: auto; fill: currentColor; margin: 0 auto; }
.ico--box { width: 1em; height: 1em; display: flex; align-items: center; justify-content: center; }

/* ---------- Buttons ---------- */
.btn-wrap { display: block; }
.btn {
  display: inline-block;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.5px;
  text-align: center;
  color: var(--white);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 14px 32px;
  cursor: pointer;
  transition: all 0.3s;
}
.btn:hover, .btn:focus { color: var(--white); background: var(--navy); border-color: var(--navy); }
.btn__inner { display: flex; justify-content: center; }
.btn__text { flex-grow: 1; order: 10; display: inline-block; }
.btn__icon { flex-grow: 0; order: 15; }
.btn__icon svg { display: inline; width: 1em; height: auto; fill: currentColor; }
.btn__icon--left { order: 5; }
.btn__icon--left svg { display: block; margin-bottom: 0.0625em; }
/* text-only link button with an arrow, used in cards and footer */
.btn--link {
  background: transparent; border-color: transparent; border-width: 0; padding: 0;
  color: var(--white);
}
.btn--link:hover, .btn--link:focus { background: transparent; border-color: transparent; color: var(--accent); }
.btn--link .btn__icon { margin-left: 16px; }

/* ---------- Header ---------- */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 99; }
.hdr {
  display: flex; align-items: stretch; flex-wrap: wrap;
  max-width: 1240px; margin: 0 auto; padding: 0 20px;
}
.hdr__brand { flex: 1 1 auto; display: flex; align-items: center; min-height: 78px; }
.hdr__brand img { width: 136px; height: auto; }
.hdr__toggle { display: none; }
.hdr__nav ul { display: flex; justify-content: flex-end; height: 100%; }
.hdr__nav li { display: flex; flex-direction: column; justify-content: center; }
.hdr__nav a {
  display: flex; align-items: center; height: 100%;
  padding: 0 16px; line-height: 64px; font-size: 1rem;
  color: rgba(255, 255, 255, 0.72); transition: color 0.2s;
}
.hdr__nav a:hover, .hdr__nav a:focus, .hdr__nav a[aria-current="page"] { color: var(--white); }

/* ---------- Shared: page hero (inner pages) ---------- */
.page-hero {
  background-color: var(--navy);
  background-position: center left; background-repeat: no-repeat; background-size: cover;
  padding: 180px 40px 152px;
}
.page-hero > .overlay {
  background: url("/assets/img/inner-symbol.webp") left bottom / auto no-repeat;
  mix-blend-mode: overlay;
}
.page-hero > .c { max-width: 600px; }
.page-hero h1 { color: var(--white); text-align: center; }
.page-hero .lead { color: var(--text-on-dark); text-align: center; }
.page-hero .lead--title { font-size: 1rem; line-height: 1; margin: 0; }
.page-hero--about { background-image: url("/assets/img/hero-about.webp"); }
.page-hero--services { background-image: url("/assets/img/hero-services.webp"); }
.page-hero--contact { background-image: url("/assets/img/hero-contact.webp"); }

/* ---------- Home: hero ---------- */
.home-hero {
  background: var(--navy) url("/assets/img/hero-home.webp") center / cover no-repeat;
  padding: 300px 0 40px;
}
.home-hero .in { margin-right: 32%; }
.home-hero h1 { color: var(--white); margin: 4px 0 calc(4px + var(--gap)); }
.home-hero .intro { color: var(--text-on-dark); margin-right: 200px; margin-bottom: 20px; }
.home-hero .intro:not(:last-child) { margin-bottom: 40px; }
.home-hero .cta-1 { margin-right: 32px; }
.home-hero .cta-2 { align-self: center; }
.btn--ghost {
  background: transparent; border-color: transparent; padding: 0;
  color: rgba(255, 255, 255, 0.78);
}
.btn--ghost:hover, .btn--ghost:focus { background: transparent; border-color: transparent; color: var(--white); }
.btn--ghost .btn__icon { margin-left: 8px; }
.home-hero .foot { height: calc(1.85714285714286em + 212px); }

/* ---------- Home: quote ---------- */
.quote { padding: 0 0 160px; }
.quote .col--text { width: 50%; }
.quote .col--text > .in { padding-top: 80px; }
.quote h2 { margin-bottom: 32px; }
.quote .lead-bold { font-weight: 700; margin-right: 40px; }
.quote .lead-bold:not(:last-child) { margin-bottom: 1em; }
.quote .lead { margin-right: 40px; }
.divider { height: 1px; }
.divider span { display: block; width: 90%; border-top: 1px solid var(--line); }
.callout { display: flex; text-align: left; }
.callout__icon {
  flex: 0 0 auto; margin-right: 24px;
  display: inline-flex; align-self: flex-start;
}
.icon-circle {
  display: inline-block; vertical-align: baseline; line-height: 1; border-radius: 50%;
  font-size: 24px; padding: 16px;
}
.icon-circle .ico--box { display: block; width: 1em; height: 1em; }
.callout .icon-circle { background: rgba(149, 89, 82, 0.08); color: #6a7cd8; }
.callout__body { flex-grow: 1; }
.callout h6 { margin: 0; }
.callout__value { margin: 0; color: var(--accent); font-size: 32px; font-weight: 700; }
.callout__value a { color: inherit; }
.quote .col--form { width: 50%; }
.quote .col--form > .in {
  align-content: center; align-items: center;
  background: var(--white); border-radius: 4px;
  box-shadow: 0 104px 104px -40px rgba(0, 0, 0, 0.16);
  margin: -105px 0 0 80px; padding: 48px;
}
.quote .form-title { text-align: center; }
.quote .quote-form { margin-bottom: 22px; }

/* ---------- Quote form (shared on Home + Contact) ---------- */
.quote-form form { margin: 0; }
.field { padding: 10px 0; }
.field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.field input, .field textarea {
  display: block; width: 100%; max-width: 100%; margin: 0;
  font: inherit; font-size: 1rem; line-height: 1;
  color: #666; background: var(--input-bg);
  border: 1px solid var(--input-border); border-radius: 2px;
  padding: 0.75em; height: 45px;
  -webkit-appearance: none; appearance: none;
}
.field textarea { height: 120px; line-height: var(--lh); resize: vertical; }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: #757575; opacity: 1; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-submit { position: relative; padding-top: 10px; }
.form-submit .btn { font-size: 1rem; }
.form-submit .btn[disabled] { opacity: 0.6; cursor: progress; }
/* reserves the same 30px slot the original form had here, so the layout is unchanged */
.cf-turnstile { padding: 10px 0 20px; }
.form-status { margin: 12px 0 0; font-size: 0.9375rem; line-height: 1.5; }
.form-status:empty { display: none; }
.form-status--ok { color: #1a7f37; }
.form-status--error { color: #c62828; }
.required-note {
  width: auto !important;
  position: absolute; right: 4.813px; bottom: 75px; z-index: 1;
  display: flex; align-items: center;
  font-size: 14px; line-height: 26px; color: var(--text);
}
.required-note .ico { font-size: 10px; width: 1.25em; color: var(--accent); }
.required-note .ico svg { margin: 0; }
.required-note span:last-child { padding-left: 5px; }

/* ---------- Home: service cards ---------- */
.cards .col { width: 25%; }
.card > .in {
  background: var(--navy) center left / cover no-repeat;
  padding: 40px;
}
.card > .in::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(0, 4, 34, 0.64); transition: background 0.3s;
}
.card:hover > .in::before { background: rgba(0, 4, 34, 0.78); }
.card .in > * { position: relative; }
.card .in > .w:where(:not(:last-child)) { margin-bottom: 8px; }
.card h4 { color: var(--white); }
.card h4.w:not(:last-child) { margin-bottom: 208px; }
.card h3 { color: var(--white); }
.card p.w { color: var(--text-on-dark); }
.card p.w:not(:last-child) { margin-bottom: 28px; }
.card .spacer { height: 1.85714285714286em; }
.card--1 > .in { background-image: url("/assets/img/card-1.webp"); }
.card--2 > .in { background-image: url("/assets/img/card-2.webp"); }
.card--3 > .in { background-image: url("/assets/img/card-3.webp"); }
.card--4 > .in { background-image: url("/assets/img/card-4.webp"); }

/* ---------- Home: testimonials ---------- */
.reviews { background-image: linear-gradient(90deg, #fff 0%, var(--panel) 100%); }
.reviews .col { width: 33.333%; }
.reviews .col:nth-child(1) { z-index: 2; }
.reviews .col:nth-child(2) { z-index: 1; }
.review > .in {
  background: var(--white);
  box-shadow: 64px 64px 120px -40px rgba(0, 0, 0, 0.08);
  padding: 48px 40px 40px 48px;
}
.review .quote-icon { color: var(--accent); }
.review .quote-icon .ico--box { display: inline-flex; font-size: 16px; }
.review figure { margin: 0; }
.review blockquote { margin: 0; overflow: hidden; }
.review blockquote p { font-size: 1.3em; line-height: 1.5em; margin: 0 0 20px; }
.review figcaption { line-height: 1; min-height: 1.6875em; }
.review cite { display: inline-block; font-style: normal; line-height: 1.5; color: var(--navy); font-weight: 500; }

/* ---------- Certified ARDEX ---------- */
.ardex > .c > .col > .in { padding: 10px; }
.ardex .col { width: 50%; }
.ardex .col--text > .in { align-content: center; align-items: center; }
.ardex-logo { width: 100%; height: auto; }
.ardex p.w { margin-bottom: 1em; }

/* ---------- About ---------- */
.about-intro { padding: 104px 40px 0; }
.about-intro .col { width: 50%; }
.about-intro .col--media { z-index: 1; }
.about-intro .col--media > .in { margin-right: 80px; padding-bottom: 10px; }
.about-intro .glow {
  background: url("/assets/img/professional-workers.webp") center bottom / 88% auto no-repeat;
  opacity: 0.8; filter: blur(40px);
}
.about-intro .col--media img { border-radius: 4px; position: relative; }
.chevron .ico svg { width: 16px; height: 16px; }
.about-intro h2 { margin-bottom: 32px; }
.about-intro .lead { margin-right: 64px; }
.about-intro .lead:not(:last-child) { margin-bottom: 40px; }
.ticks { display: flex; }
.ticks > .col { width: 50%; }
.tick-list li { display: flex; align-items: center; }
.tick-list li:not(:last-child) { padding-bottom: 6px; }
.tick-list li:not(:first-child) { margin-top: 6px; }
.tick-list .ico { color: var(--accent); font-size: 20px; width: calc(1.25em + 8px); padding-right: 8px; }
.tick-list .ico svg { margin: 0; }
.tick-list span:last-child { padding-left: 5px; }
.about-ardex { padding: 104px 40px; }
.about-ardex .col--media { width: 38.665%; }
.about-ardex .col--text { width: 61.166%; }
.about-ardex .col > .in { align-content: center; align-items: center; }
.about-ardex .chevron { margin-top: -10px; }
.about-ardex h2 { margin-bottom: 32px; }
.about-ardex .lead { padding-right: 16px; }
.mission { padding: 24px 40px; }
.mv-row { border-bottom: 1px solid var(--line); padding-bottom: 40px; }
.mv-row:not(:last-child) { margin-bottom: 64px; }
.mv-row .col--title { width: 33.333%; }
.mv-row .col--body { width: 66.666%; }
.mv-row .col--body > .in { padding-right: 63px; }

/* ---------- Services ---------- */
.process { padding: 104px 40px; }
.process h2 { margin-bottom: 32px; }
.steps .col { width: 25%; }
.steps .col > .in { padding-right: 16px; }
.step-num { display: flex; align-items: center; padding: 16px 0; color: var(--accent); }
.step-num span { font-size: 15px; line-height: 1; flex-shrink: 0; margin-right: 10px; }
.step-num::after { content: ""; flex-grow: 1; border-top: 1px solid var(--accent); }
.steps p.w { margin-right: 16px; }

/* ---------- Contact ---------- */
.contact-main { padding: 104px 40px 0; }
.contact-main .col--info { width: 58.25%; z-index: 1; }
.contact-main .col--form { width: 41.75%; z-index: 1; }
.contact-main h2 { padding-right: 80px; }
.contact-main .lead-bold { font-weight: 700; margin-right: 40px; }
.contact-main .lead-bold:not(:last-child) { margin-bottom: 1em; }
.contact-main .empty { height: 0; }
.info-box {
  display: flex; text-align: left;
  padding: 24px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.info-box--full { width: 100%; }
.info-box--half { width: 50% !important; }
.info-box.w:not(:last-child) { margin-bottom: 0; }
.info-box--first.w:not(:last-child) { margin-bottom: 0; }
.info-box .icon-circle { font-size: 16px; background: rgba(230, 86, 68, 0.1); color: var(--accent); }
.info-box__icon { flex: 0 0 auto; margin-right: 16px; display: inline-flex; align-self: flex-start; }
.info-box__body { flex-grow: 1; }
.info-box h5 { margin: 0 0 2px; }
.info-box p { margin: 0; }
.info-box a { color: inherit; }
.info-box--accent { background: var(--accent); border-bottom: 0; }
.info-box--accent .icon-circle { background: var(--white); }
.info-box--accent p { color: var(--panel); font-size: 22px; font-weight: 700; }
.contact-main .col--form > .in {
  align-content: center; align-items: center;
  background: var(--white); box-shadow: 0 80px 120px -40px rgba(0, 0, 0, 0.24);
  padding: 64px;
}
.contact-main .quote-form { margin-bottom: 14px; }
.contact-main .required-note { font-size: 1rem; line-height: var(--lh); }

/* ---------- Footer: CTA band ---------- */
.cta {
  background-image: linear-gradient(180deg, rgba(0, 5, 47, 0) 16%, var(--navy-2) 16%);
  padding: 200px 40px 120px;
}
.cta > .overlay { background: url("/assets/img/cta-symbol.webp") right bottom / contain no-repeat; }
.cta .col > .in { padding-right: 40%; }
.cta h2 { color: var(--white); }
.cta .lead { color: var(--text-on-dark); margin-right: 160px; }
.cta .lead:not(:last-child) { margin-bottom: calc(1em + 12px); }
.cta .btn-wrap--estimate { margin-right: 32px; }
.btn--light {
  color: var(--accent); background: var(--white); border-color: var(--white);
  box-shadow: 0 24px 80px -8px rgba(0, 0, 0, 0.5);
}
.btn--light:hover, .btn--light:focus { color: var(--white); background: rgba(255, 255, 255, 0); border-color: var(--white); }
.btn--outline { background: rgba(2, 1, 1, 0); border-color: var(--white); color: var(--white); }
.btn--outline:hover, .btn--outline:focus { color: var(--accent); background: var(--white); border-color: var(--white); }
.btn--outline .btn__icon--left { margin-right: 15px; }

/* ---------- Footer: main ---------- */
.ftr { background: var(--navy); padding: 104px 40px; }
.ftr .col--about { width: 25%; }
.ftr .col--contact { width: 25%; }
.ftr .col--links { width: 19%; }
.ftr .col--services { width: 31%; }
.ftr .col--about > .in, .ftr .col--contact > .in { padding-right: 40px; }
.ftr h4 { color: var(--white); }
.ftr h4.w:not(:last-child) { margin-bottom: 28px; }
.ftr-logo img { width: 120px; }
.ftr .blurb { font-size: 14px; color: var(--text); }
.ftr .blurb:not(:last-child) { margin-bottom: 28px; }
.social { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; column-gap: 16px; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(15px + 2 * 0.85em); height: calc(15px + 2 * 0.85em);
  font-size: 15px; line-height: 15px; border-radius: 50%;
  background: rgba(230, 86, 68, 0.1); color: var(--accent); transition: all 0.3s;
}
.social a:hover, .social a:focus { background: var(--accent); color: var(--white); }
.social svg { width: 1em; height: 1em; fill: currentColor; }
.contact-list li { display: flex; align-items: center; font-size: 14px; }
.contact-list li:not(:last-child) { padding-bottom: 4px; }
.contact-list li:not(:first-child) { margin-top: 4px; }
.contact-list .ico { font-size: 14px; width: 1.25em; color: var(--text-on-dark); padding-right: 12px; box-sizing: content-box; }
.contact-list .ico svg { margin: 0; }
.contact-list span:last-child { padding-left: 5px; color: var(--text); }
.contact-list a { color: var(--text); }
.link-list li { font-size: 14px; }
.link-list li:not(:last-child) { padding-bottom: 2px; }
.link-list li:not(:first-child) { margin-top: 2px; }
.link-list a { display: flex; color: var(--text); transition: color 0.3s; }
.link-list a:hover, .link-list a:focus { color: #f8f7f2; }
.ftr .services-cta { margin-top: -8px; }
.ftr-links { display: flex; }
.ftr-links .col:first-child { width: 41.228%; }
.ftr-links .col:last-child { width: 58.48%; }

.ftr-bottom {
  background: var(--navy); border-top: 1px solid var(--navy-line);
  padding: 25px 0;
}
.ftr-bottom .col { width: 50%; }
.ftr-bottom .col > .in { align-content: center; align-items: center; }
.ftr-bottom .copy { margin: 0; text-align: left; color: var(--text); }
.ftr-bottom .credit { margin: 0; text-align: right; }
.ftr-bottom a { color: var(--text); }

/* ---------- Simple pages (thank-you, 404) ---------- */
.simple { padding: 104px 40px; text-align: center; }
.simple h2 { margin-bottom: 32px; }
.simple .lead { max-width: 600px; margin: 0 auto 32px; }

/* =================== Tablet (<= 1024px) =================== */
@media (max-width: 1024px) {
  .c { flex-wrap: wrap; }

  .home-hero { padding: 200px 64px 40px 40px; }
  .home-hero .in { margin-right: 0; }
  .home-hero .intro { margin-right: 120px; margin-bottom: 16px; }
  .home-hero .intro:not(:last-child) { margin-bottom: calc(1em + 20px); }
  .home-hero .foot { height: calc(1.85714285714286em + 140px); }

  .quote { padding: 80px 0 80px 40px; }
  .quote .col--text > .in { padding-top: 0; }
  .callout__value { font-size: 24px; }
  .quote .col--form > .in { margin: -35px 0 0; padding: 32px; }
  .required-note { right: 0; bottom: 30px; }

  .cards .col { width: 50%; }
  .card h4.w:not(:last-child) { margin-bottom: 48px; }
  .reviews .col:nth-child(1) { width: 100%; }
  .reviews .col:nth-child(n+2) { width: 50%; }

  .page-hero { background-position: center center; }
  .page-hero > .overlay { background-size: 880px auto; }

  .about-intro { padding: 0 40px 80px; }
  .about-intro .col { width: 100%; }
  .about-intro .col--media > .in { margin: -40px 0 0; padding-bottom: 12px; }
  .about-intro .col--text > .in { padding-top: 48px; }
  .about-ardex { padding: 80px 0; }
  .about-ardex .col--media, .about-ardex .col--text { width: 100%; }
  .about-ardex .chevron svg { margin: 0 auto; }
  .about-ardex h2, .about-ardex .lead { text-align: center; }
  .about-ardex .lead { padding: 0 80px; }

  .process { padding: 80px 40px; }
  .steps .col { width: 50%; }
  .steps .col:first-child > .in { padding-bottom: 24px; }

  .contact-main { padding: 80px 40px 0; }
  .contact-main .col--info, .contact-main .col--form { width: 100%; }
  .contact-main .col--info > .in { padding-bottom: 80px; }
  .info-box .icon-circle { font-size: 20px; }
  .contact-main .col--form > .in { margin-bottom: -40px; }
  .contact-main .required-note { bottom: 25px; }

  .cta { padding: 120px 40px 80px; }
  .cta > .overlay { background-size: cover; }
  .cta .col > .in { padding-right: 0; }

  .ftr { padding: 80px 40px; }
  .ftr .col--about, .ftr .col--contact, .ftr .col--links, .ftr .col--services { width: 50%; }
  .ftr .col--about > .in { margin-bottom: 64px; padding-right: 80px; }
  .ftr .col--contact > .in { margin-right: 40px; }
  .ftr-links .col:first-child { width: 30%; }
  .ftr-links .col:last-child { width: 70%; }
  .ftr-bottom { padding: 25px 40px; }
}

/* =================== Mobile header (<= 921px) =================== */
@media (max-width: 921px) {
  html { font-size: 91.2%; }
  h1 { font-size: 56px; }
  h2 { font-size: 32px; }
  h3 { font-size: 24px; }

  .hdr { padding: 0 20px; }
  .hdr__brand { min-height: 64.3px; }
  .hdr__brand img { width: 104px; }
  .hdr__toggle {
    display: inline-flex; align-items: center; justify-content: center; align-self: center;
    width: 44.27px; height: 45.95px; padding: 0; margin: 0;
    font-size: 1.5rem; color: var(--white); background: var(--accent);
    border: 0; border-radius: 2px; cursor: pointer;
  }
  .hdr__toggle svg { width: 1em; height: 1em; fill: currentColor; }
  .hdr__toggle .i-close { display: none; }
  .hdr__toggle[aria-expanded="true"] .i-menu { display: none; }
  .hdr__toggle[aria-expanded="true"] .i-close { display: block; }
  .hdr__nav { display: none; flex: 0 0 calc(100% + 40px); margin: 0 -20px; padding-top: 1em; }
  .hdr__nav.is-open { display: block; }
  .hdr__nav ul { flex-direction: column; background: #f9f9f9; border-top: 1px solid var(--input-border); }
  .hdr__nav li { display: block; }
  .hdr__nav a {
    display: block; padding: 0 20px; line-height: 3em; font-size: 1rem;
    color: #181e19; border-bottom: 1px solid var(--input-border);
  }
  .hdr__nav a:hover, .hdr__nav a:focus { color: var(--accent); }
  .hdr__nav a[aria-current="page"] { color: var(--accent); }

  .field input { height: 41.875px; }
}

/* =================== Mobile (<= 767px) =================== */
@media (max-width: 767px) {
  .col { width: 100% !important; }
  .ticks, .ftr-links { flex-wrap: wrap; }

  .home-hero { background-position: center right; padding: 120px 32px 40px 24px; }
  .home-hero .intro { margin-right: 0; margin-bottom: 16px; }
  .home-hero .intro:not(:last-child) { margin-bottom: calc(1em + 20px); }
  .home-hero .btn-wrap.cta-1, .home-hero .btn-wrap.cta-2 { width: 100% !important; margin-right: 0; }
  .home-hero .btn-wrap .btn { width: 100%; }
  .home-hero .cta-2 { margin-top: 16px; }
  .home-hero .foot { height: calc(1.85714285714286em + 84px); }

  .quote { padding: 64px 0; }
  .quote .col--text > .in { padding: 0 32px 32px 24px; }
  .quote .lead-bold, .quote .lead { margin-right: 0; }
  .quote .lead-bold:not(:last-child) { margin-bottom: calc(1em + 20px); }
  .divider span { width: 100%; }
  .callout { display: block; }
  .callout__icon { display: block; margin: 0 0 8px; }
  .callout .icon-circle { font-size: 16px; }
  .quote .col--form > .in { margin: 0; padding: 24px; }

  .card > .in { padding: 24px; }
  .review > .in { padding: 40px 24px; }

  .page-hero > .overlay { background-size: 960px auto; }

  .about-intro { padding: 0 24px 64px; }
  .about-intro .col--media > .in { padding: 0; }
  .about-intro .col--text > .in { padding: 40px 8px 0 0; }
  .about-intro .lead { margin-right: 0; }
  .about-intro .lead:not(:last-child) { margin-bottom: calc(1em + 20px); }
  .ticks > .col:first-child > .in { margin-bottom: 12px; }
  .about-ardex { padding: 40px 0; }
  .about-ardex .col--text > .in { padding-top: 40px; }
  .about-ardex .lead { padding: 0 40px; }
  .mission { padding: 24px; }
  .mv-row .col--title > .in { padding-bottom: 16px; }
  .mv-row .col--body > .in { padding-right: 16px; }

  .process { padding: 64px 24px; }
  .steps .col > .in, .steps .col:first-child > .in { padding: 0 0 32px; }
  .steps .col:last-child > .in { padding: 0; }

  .contact-main { padding: 64px 24px 0; }
  .contact-main .lead-bold { margin-right: 0; }
  .contact-main .lead-bold:not(:last-child) { margin-bottom: calc(1em + 20px); }
  .info-box, .info-box--half { display: block; width: 100% !important; }
  .info-box__icon { display: block; margin: 0 0 16px; }
  .contact-main .col--form > .in { padding: 24px 24px 64px; }
  .contact-main .required-note { right: 0; bottom: -30px; }

  .cta { padding: 64px 24px; }
  .cta .lead { margin-right: 0; }
  .cta .lead:not(:last-child) { margin-bottom: calc(1em + 20px); }
  .cta .btn-wrap { width: 100% !important; margin-right: 0; }
  .cta .btn-wrap .btn { width: 100%; }
  .cta .btn-wrap--call { margin-top: 20px; }

  .ftr { padding: 64px 24px; }
  .ftr .col--about > .in { margin-bottom: 56px; padding-right: 24px; }
  .ftr .col--contact > .in { margin: 0 0 56px; }
  .ftr .col--links > .in { margin-bottom: 64px; padding: 0; }
  .ftr-links .col:first-child, .ftr-links .col:last-child { width: 50% !important; }
  .ftr-bottom .copy, .ftr-bottom .credit { text-align: center; }
}

@media (max-width: 600px) {
  .field { padding: 10px 1px; }
}

/* =================== Small phones (<= 544px) =================== */
@media (max-width: 544px) {
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  h3 { font-size: 22px; }
  h4 { font-size: 1.25rem; }
}

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