/* Tidy Sealants website.
   One typeface (Archivo variable) and one accent colour (the mould).
   Every word on the page comes from Business/Website/Copy/Home.md. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper:        #EEF1EF;
  --paper-lift:   #F6F8F7;
  --band:         #E3E8E6;
  --ink:          #191D1F;
  --ink-soft:     #4C5559;
  --anthracite:   #31383B;
  --anthracite-d: #22282B;
  --hero-soft:    #D2D8D6;
  --hair:         #C7D0CE;

  --font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --measure: 62ch;
  --wrap: 1200px;
  --gutter: 28px;
  --section-y: clamp(52px, 6.5vw, 96px);
}

*, *::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(--font);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--anthracite); color: #fff; }

:focus-visible {
  outline: 2px solid var(--anthracite);
  outline-offset: 2px;
  border-radius: 2px;
}

a { color: var(--ink); text-underline-offset: 3px; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--anthracite);
  color: #fff;
  padding: 12px 18px;
  text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- shell ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

h1, h2 {
  margin: 0 0 0.55em;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 {
  max-width: 15em;
  font-size: clamp(2.15rem, 1.3rem + 3.6vw, 3.6rem);
  font-stretch: 90%;
  letter-spacing: -0.032em;
  line-height: 0.98;
}
h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.2rem);
  font-stretch: 92%;
}

p { margin: 0 0 1.05em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.22rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
}

.subhead {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  font-weight: 600;
  font-stretch: 96%;
  color: var(--ink);
  max-width: 54ch;
  margin-bottom: 1.1em;
}

/* ---------- masthead ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper);
  border-bottom: 1px solid var(--hair);
}
.masthead-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-block: 14px;
}
.wordmark {
  margin-right: auto;
  display: flex;
  align-items: center;
  text-decoration: none;
}
/* The artwork is navy and cyan on nothing. The optimiser lifted its flat
   background out, so it sits on whatever colour the masthead is. Its own
   colours are kept, because a logo is the thing a palette answers to, not the
   other way round. */
.wordmark img {
  display: block;
  width: 130px;
  height: auto;
}
@media (max-width: 700px) {
  .wordmark img { width: 100px; }
}
.nav {
  display: flex;
  gap: 20px;
  font-size: 0.9375rem;
}
.nav a { color: var(--ink-soft); text-decoration: none; }
.nav a:hover { color: var(--ink); text-decoration: underline; }
.nav-cta { padding: 10px 16px; font-size: 0.9375rem; }

@media (max-width: 1000px) { .nav { display: none; } }

/* ---------- hero ----------
   A split panel. Charcoal on the left carrying the words, the photograph on
   the right at full strength, used as it came. The two halves are exactly half
   the page each. The copy keeps the page's container edge, so the left edge
   still lines up with the sections below it.

   The panel is --anthracite-d, the darker of the two charcoals, at the owner's
   instruction: it is the shade the quote button goes when the mouse is over it.
   The button itself stays --anthracite-d on the page and light in here, so the
   panel and the button never sit on each other at the same value. */

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(520px, 54vw, 800px);
  background: var(--anthracite-d);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--anthracite-d);
  color: #fff;
  padding-block: clamp(56px, 6.5vw, 104px);
  /* The left edge of the page's 1200px container, expressed as a share of this
     half. Percentages in padding resolve against the grid area, and half the
     page is 100% of it, so the container edge is 100% minus half the container,
     plus the gutter. Below the container width the max() falls back to the
     gutter on its own.

     The min() is the important part. On a very wide screen the container edge
     is far enough in that the words end up optically centred in this half,
     which reads as a mistake. Capping the indent at 12.5vw keeps them clearly
     ranged left, and the cap does not bite until about 1185px, so the hero still
     holds the page's left edge on every ordinary laptop. */
  padding-inline: min(max(var(--gutter), calc(100% - var(--wrap) / 2 + var(--gutter))), 12.5vw)
                  clamp(32px, 3.5vw, 64px);
}

.hero-copy h1 { color: #fff; }
.hero-copy .lede,
.hero-copy .hero-note { color: var(--hero-soft); }

/* The one button in the hero, reversed out of the dark panel. */
.hero-copy .btn-solid { background: var(--paper-lift); color: var(--anthracite-d); }
.hero-copy .btn-solid:hover { background: #fff; }
.hero-copy :focus-visible { outline-color: #fff; }

/* Selecting text in the hero. The page's selection is --anthracite on white,
   which against the darker panel is almost no highlight at all. */
.hero-copy ::selection { background: var(--paper-lift); color: var(--anthracite-d); }

.hero-shot {
  position: relative;
  overflow: hidden;
}
.hero-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The frame is cropped so the fixtures at its foot are kept, so anchoring to
     the bottom is what keeps them in view when the column gets wider than tall. */
  object-position: 50% 100%;
}

/* Below this there is no room for two columns, so the panel goes above the
   photograph. The photograph keeps a fixed slice of the height rather than
   being squeezed by the text. */
@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding-inline: var(--gutter); }
  .hero-shot { height: clamp(260px, 62vw, 430px); }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.9em;
}
.hero-note {
  margin-top: 1.1em;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 3px;
  font: inherit;
  font-weight: 600;
  font-stretch: 96%;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn-solid { background: var(--anthracite); color: #fff; }
.btn-solid:hover { background: var(--anthracite-d); }
.btn-ghost { border-color: var(--hair); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }

/* ---------- sections ---------- */

.section { padding-block: var(--section-y); scroll-margin-top: 74px; }
.band { background: var(--band); }
.section-lede {
  font-size: 1.0625rem;
  color: var(--ink-soft);
  max-width: 58ch;
  margin-bottom: 1.9em;
}
.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.9em;
}
.after-button {
  margin-top: 1.1em;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  max-width: 52ch;
}
.after-list { margin-top: 2em; }

.spec {
  max-width: 68ch;
  color: var(--ink-soft);
}

/* ---------- lists ---------- */

.ticks {
  list-style: none;
  margin: 0.3em 0 1.75em;
  padding: 0;
  max-width: 68ch;
}
.ticks li {
  position: relative;
  padding: 15px 0 15px 24px;
  border-top: 1px solid var(--hair);
}
.ticks li:last-child { border-bottom: 1px solid var(--hair); }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 11px;
  height: 2px;
  background: var(--ink);
  transform: translateY(-50%);
}

.areas {
  list-style: none;
  margin: 0 0 1.6em;
  padding: 0;
  max-width: 64ch;
}
.areas li { padding: 13px 0; border-top: 1px solid var(--hair); }
.areas li:last-child { border-bottom: 1px solid var(--hair); }

/* ---------- steps ---------- */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0.3em 0 0;
  padding: 0;
  max-width: 68ch;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
  padding: 20px 0;
  border-top: 1px solid var(--hair);
}
.steps li:last-child { border-bottom: 1px solid var(--hair); }
.steps li::before {
  content: counter(step);
  grid-column: 1;
  grid-row: 1;
  font-size: 1.5rem;
  font-weight: 700;
  font-stretch: 88%;
  line-height: 1;
  letter-spacing: -0.03em;
}
.steps li p {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  max-width: 58ch;
}

@media (max-width: 560px) {
  .steps li { grid-template-columns: 34px minmax(0, 1fr); gap: 14px; }
}

/* ---------- prices ---------- */

.prices {
  width: 100%;
  max-width: 840px;
  border-collapse: collapse;
  margin-bottom: 1.9em;
}
.prices th, .prices td {
  padding: 16px 0;
  border-top: 1px solid var(--hair);
  text-align: left;
  vertical-align: baseline;
}
.prices thead th {
  border-top: 0;
  padding-bottom: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.prices th:first-child, .prices td:first-child { padding-right: 28px; }
.prices th:last-child, .prices td:last-child {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}
.prices tbody td:last-child {
  font-weight: 700;
  font-stretch: 92%;
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}
.prices tbody tr:last-child td { border-bottom: 1px solid var(--hair); }

/* ---------- questions ---------- */

.faq { margin: 0; }
.faq dt {
  padding-top: 22px;
  border-top: 1px solid var(--hair);
  font-weight: 700;
  font-stretch: 96%;
}
.faq dd {
  margin: 8px 0 0;
  padding-bottom: 22px;
  color: var(--ink-soft);
  max-width: var(--measure);
}
.faq dt:last-of-type + dd { border-bottom: 1px solid var(--hair); }

/* ---------- footer ---------- */

.foot {
  border-top: 1px solid var(--hair);
  padding-block: 46px;
}
.foot-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px 40px;
}
.foot p {
  margin: 0 0 6px;
  font-size: 0.875rem;
  color: var(--ink-soft);
  max-width: 42ch;
}
.foot-logo {
  display: block;
  margin-bottom: 14px;
}
.foot-logo img {
  display: block;
  width: 120px;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}