/* =========================================================================
   ASSEMBLY
   Air conditioning service landing page

   Every colour, radius and width is a variable in the block below. Change
   one there and it changes everywhere on the page. Nothing else in this
   file needs touching to recolour the template.
   ========================================================================= */

:root {
  /* colours */
  --ink:      #0F172A;   /* headings and body text */
  --ink-soft: #55677A;   /* second-rank text */
  --blue:     #0284C7;   /* the main colour: buttons, links, numbers */
  --blue-dk:  #026AA2;   /* the same, pressed */
  --blue-lt:  #38BDF8;   /* highlights on dark backgrounds */
  --tint:     #F1F7FB;   /* the pale section background */
  --line:     #DCE7F0;   /* hairlines and borders */
  --white:    #FFFFFF;
  --dark:     #081828;   /* the colour every scrim is mixed from */

  /* shape */
  --r:      14px;   /* cards and inputs */
  --r-lg:   22px;   /* big panels */
  --shadow: 0 18px 40px -24px rgba(15, 40, 66, .45);

  /* measure */
  --wrap: 1160px;
  --gap:  28px;
}

/* --- reset ------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 17px/1.65 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg { max-width: 100%; }
img { display: block; height: auto; }

h1, h2, h3 { margin: 0 0 .5em; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: clamp(34px, 5.2vw, 56px); }
h2 { font-size: clamp(27px, 3.4vw, 38px); }
h3 { font-size: 20px; letter-spacing: -.01em; }
p  { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.1em; }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- layout ------------------------------------------------------------ */

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.wrap.narrow { max-width: 800px; }

.section { padding: clamp(64px, 8vw, 104px) 0; }
.section.tint { background: var(--tint); }

.head { max-width: 720px; margin-bottom: clamp(34px, 4vw, 52px); }
.head .lede { color: var(--ink-soft); font-size: 18.5px; margin-bottom: 0; }

/* The eyebrow needs to beat any "p" rule that comes after it, which is why
   it is written out rather than left to inherit. */
.eyebrow,
.head .eyebrow {
  margin: 0 0 12px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.eyebrow.light { color: var(--blue-lt); }

.lede { font-size: 19px; color: var(--ink-soft); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px;
  border: 1px solid var(--blue);
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  font: 600 16px/1 inherit;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.btn:hover { background: var(--blue-dk); border-color: var(--blue-dk); color: var(--white); transform: translateY(-1px); }
.btn:active { transform: none; }

.btn-sm  { padding: 10px 18px; font-size: 15px; }
.btn-lg  { padding: 17px 32px; font-size: 17px; }
.btn-block { display: flex; width: 100%; }

.btn-outline { background: transparent; color: var(--blue); }
.btn-outline:hover { background: var(--blue); color: var(--white); }

.btn-clear {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: var(--white);
}
.btn-clear:hover { background: rgba(255, 255, 255, .14); border-color: var(--white); color: var(--white); }

/* --- 1. header --------------------------------------------------------- */

.bar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .2s, border-color .2s;
}
/* Added by the script once the page scrolls. */
.bar.stuck { box-shadow: 0 8px 24px -18px rgba(15, 40, 66, .8); border-bottom-color: var(--line); }

.bar-in { display: flex; align-items: center; gap: 24px; height: 72px; }

.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo-mark { display: grid; place-items: center; width: 36px; height: 36px; color: var(--blue); }
.logo-word { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }

.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { color: var(--ink-soft); font-size: 15.5px; font-weight: 500; text-decoration: none; }
.nav a:hover { color: var(--blue); }

.bar-end { display: flex; align-items: center; gap: 16px; }
.tel { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 600; font-size: 15.5px; text-decoration: none; }
.tel:hover { color: var(--blue); }

@media (max-width: 1080px) { .nav { display: none; } .bar-in { justify-content: space-between; } .bar-end { margin-left: auto; } }
@media (max-width: 620px)  { .tel span { display: none; } }

/* --- 2. hero ----------------------------------------------------------- */

.hero { position: relative; isolation: isolate; color: var(--white); }
.hero-pic { position: absolute; inset: 0; z-index: -2; }
.hero-pic img { width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(9, 26, 43, .86) 0%, rgba(9, 26, 43, .66) 52%, rgba(9, 26, 43, .42) 100%); }

.hero-in { padding: clamp(90px, 13vw, 150px) 0 clamp(130px, 15vw, 190px); }
.hero-text { max-width: 660px; }
.hero-text h1 { color: var(--white); }
.hero-text .lede { color: rgba(255, 255, 255, .88); font-size: 20px; max-width: 560px; }
.hero-acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* --- 3. quick form ----------------------------------------------------- */

/* Pulled up over the bottom of the hero. The negative margin is the only
   thing joining the two, so change it in one place if you want them apart. */
.quick-wrap { margin-top: clamp(-110px, -11vw, -80px); position: relative; z-index: 5; }

.quick {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: clamp(24px, 3.4vw, 36px);
}
.quick-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 20px; }
.quick-head h2 { font-size: 24px; margin: 0; }
.quick-head p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }

.quick-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; }
.quick .btn { max-width: 260px; }
.quick-note { margin: 12px 0 0; font-size: 14.5px; color: var(--ink-soft); }

@media (max-width: 760px) { .quick-row { grid-template-columns: 1fr; } .quick .btn { max-width: none; } }

/* --- 4. trust strip ---------------------------------------------------- */

.strip { padding: 30px 0; border-bottom: 1px solid var(--line); }
.strip-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.strip-item { padding-left: 18px; border-left: 3px solid var(--blue-lt); }
.strip-item b { display: block; font-size: 18px; }
.strip-item span { color: var(--ink-soft); font-size: 15px; }

@media (max-width: 760px) { .strip-in { grid-template-columns: 1fr 1fr; } }

/* --- 5. services cards ------------------------------------------------- */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }

.card {
  padding: 30px 28px 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.card:hover { border-color: var(--blue-lt); box-shadow: var(--shadow); transform: translateY(-3px); }
.card h3 { margin-bottom: 8px; }
.card p { margin: 0; color: var(--ink-soft); font-size: 16px; }

.card-ico {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 18px;
  border-radius: 13px;
  background: var(--tint);
  color: var(--blue);
}
.card-ico svg { width: 26px; height: 26px; }

@media (max-width: 980px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }

/* --- 6. alternating rows ----------------------------------------------- */

.rows { display: grid; gap: clamp(40px, 5vw, 64px); }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.row-flip .row-pic { order: 2; }

.row-pic { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.row-pic img { width: 100%; aspect-ratio: 900 / 620; object-fit: cover; }

.row-tag {
  margin: 0 0 10px; color: var(--blue);
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.row-text p { color: var(--ink-soft); }
.row-text h3 { font-size: clamp(22px, 2.4vw, 27px); }

.ticks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 28px; font-size: 16px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 15px; height: 9px; border-left: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue);
  transform: rotate(-45deg);
}

@media (max-width: 860px) {
  .row { grid-template-columns: 1fr; }
  .row-flip .row-pic { order: 0; }
}

/* --- 7. parallax bands ------------------------------------------------- */

.band { position: relative; isolation: isolate; overflow: hidden; color: var(--white); }

/* The picture is taller than the band so it has room to move. 140% with the
   top pulled up 20% leaves 20% of slack above and below. The script never
   shifts it further than 18% of the band height, so an edge cannot show. */
.band-pic { position: absolute; left: 0; right: 0; top: -20%; height: 140%; z-index: -2; will-change: transform; }
.band-pic img { width: 100%; height: 100%; object-fit: cover; }
/* The scrim. It is a gradient rather than a flat wash so the side the text
   sits on is darkest and the photograph still reads on the other side.
   These photographs are busy, so it has to be heavier than it looks. */
.band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(95deg, rgba(8, 24, 40, .88) 0%, rgba(8, 24, 40, .74) 48%, rgba(8, 24, 40, .5) 100%);
}
/* The closing band is centred, so its scrim has to be even all the way across. */
.band-close::after { background: rgba(8, 24, 40, .66); }

.band-in { padding: clamp(72px, 9vw, 118px) 0; max-width: 760px; }
.band-in h2 { color: var(--white); }
.band-in p { color: rgba(255, 255, 255, .9); font-size: 18.5px; }
.band-in .btn { margin-top: 12px; }

.band-close { text-align: center; }
.band-close .band-in { margin-inline: auto; }

/* --- 8. steps ---------------------------------------------------------- */

.steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap);
}
.step { position: relative; padding-top: 30px; }

/* The line that joins the numbers. It stops short of the last step. */
.step::before {
  content: ""; position: absolute; left: 0; right: calc(var(--gap) * -1); top: 21px;
  height: 2px; background: var(--line);
}
.step:last-child::before { right: 0; }

.step-n {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 44px; height: 44px; margin: -30px 0 16px;
  border-radius: 50%;
  background: var(--blue); color: var(--white);
  font-size: 17px; font-weight: 700;
}
.step h3 { font-size: 18.5px; margin-bottom: 6px; }
.step p { margin: 0; color: var(--ink-soft); font-size: 15.8px; }

@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .step:nth-child(2)::before { right: 0; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; gap: 30px; }
  .step::before { display: none; }
  .step { padding-top: 0; }
  .step-n { margin-top: 0; }
}

/* --- 9. the comparison table ------------------------------------------- */

/* The table scrolls inside its own box on a narrow screen rather than
   pushing the page sideways. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* A scrolling box gives no sign that it scrolls, so say so, but only on the
   screens narrow enough for it to matter. */
.scroll-hint { display: none; margin: 0 0 12px; font-size: 14.5px; color: var(--ink-soft); }
@media (max-width: 860px) { .scroll-hint { display: block; } }

.plans {
  width: 100%; min-width: 720px;
  border-collapse: separate; border-spacing: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-size: 16px;
}
.plans th, .plans td { padding: 15px 18px; text-align: center; vertical-align: middle; }
.plans thead th { vertical-align: bottom; padding: 26px 18px 22px; border-bottom: 1px solid var(--line); }
.plans tbody th { text-align: left; font-weight: 500; color: var(--ink); }
.plans tbody tr + tr th, .plans tbody tr + tr td { border-top: 1px solid var(--line); }
.plans tbody tr:nth-child(odd) th, .plans tbody tr:nth-child(odd) td { background: rgba(241, 247, 251, .55); }

.th-lead { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }

.pl-name  { display: block; font-size: 17px; font-weight: 700; }
.pl-price { display: block; margin: 4px 0 2px; font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.pl-sub   { display: block; font-size: 14px; font-weight: 400; color: var(--ink-soft); }

.pl-flag {
  display: inline-block; margin-bottom: 10px; padding: 4px 12px;
  border-radius: 999px; background: var(--blue); color: var(--white);
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
/* The highlighted column, drawn cell by cell because a table cannot take a
   border round a column any other way. */
.plans th.pl-best, .plans td.pl-best { background: #E8F4FC; }
.plans tbody tr:nth-child(odd) td.pl-best { background: #E1F0FB; }

.yes, .no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 0; }
.yes { background: var(--blue); }
.no  { background: #E4EBF1; }
.yes::before { content: ""; width: 11px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.no::before  { content: ""; width: 10px; height: 2px; background: #A8B7C4; }

.plans-act td { padding-top: 22px; padding-bottom: 26px; }
.plans-act .btn { max-width: 220px; margin-inline: auto; }

.plans-note { margin: 16px 0 0; font-size: 14.5px; color: var(--ink-soft); }

/* --- 10. reviews ------------------------------------------------------- */

.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }

.quote {
  margin: 0; padding: 30px 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
}
.quote blockquote { margin: 0 0 20px; }
.quote blockquote p { margin: 0; font-size: 17.5px; line-height: 1.6; }
.quote figcaption { display: flex; align-items: center; gap: 13px; }
.quote figcaption span { display: block; font-size: 14.5px; color: var(--ink-soft); line-height: 1.35; }
.quote figcaption b { display: block; color: var(--ink); font-size: 16px; }
.dot {
  flex: 0 0 auto; display: grid !important; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--tint); color: var(--blue);
  font-size: 14px !important; font-weight: 700; letter-spacing: .04em;
}

@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }

/* --- 11. gallery ------------------------------------------------------- */

/* Three across, with the first picture taking a two by two square. */
.gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.gal-item {
  padding: 0; border: 0; border-radius: var(--r); overflow: hidden;
  background: var(--line); cursor: zoom-in; line-height: 0;
}
.gal-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease, opacity .2s; }
.gal-item:hover img { transform: scale(1.05); }
.gal-item:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.gal-big { grid-column: span 2; grid-row: span 2; }
.gal-big img { aspect-ratio: 8 / 6.09; height: 100%; }

@media (max-width: 900px) { .gal { grid-template-columns: repeat(3, 1fr); } .gal-big { grid-column: span 2; grid-row: span 2; } }
@media (max-width: 560px) { .gal { grid-template-columns: 1fr 1fr; } .gal-big { grid-column: span 2; grid-row: auto; } .gal-big img { aspect-ratio: 4 / 3; } }

/* --- the popup --------------------------------------------------------- */

.lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(6, 18, 30, .92); padding: 20px; }
.lightbox[hidden] { display: none; }

.lb-inner { position: relative; max-width: 1100px; width: 100%; }
.lb-img { width: 100%; max-height: 78vh; object-fit: contain; border-radius: 8px; }
.lb-cap { margin: 14px 0 0; text-align: center; color: rgba(255, 255, 255, .82); font-size: 15px; }

.lb-close, .lb-prev, .lb-next {
  position: absolute; z-index: 2;
  display: grid; place-items: center;
  width: 46px; height: 46px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%;
  background: rgba(10, 24, 38, .6); color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: var(--blue); border-color: var(--blue); }
.lb-close { top: -58px; right: 0; font-size: 30px; }
.lb-prev  { left: -60px; top: 50%; transform: translateY(-50%); }
.lb-next  { right: -60px; top: 50%; transform: translateY(-50%); }

@media (max-width: 1240px) {
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  .lb-close { top: 8px; right: 8px; background: rgba(6, 18, 30, .8); }
}

/* Stops the page behind the popup from scrolling. */
body.lb-open { overflow: hidden; }

/* --- 12. the enquiry form ---------------------------------------------- */

.book { background: var(--white); }
.book-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(30px, 4vw, 56px); align-items: start; }

.book-pic { display: block; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.book-pic img { width: 100%; aspect-ratio: 900 / 700; object-fit: cover; }
.book-side-text { padding-top: 28px; }
.book-side-text p { color: var(--ink-soft); }
.book-call { margin-top: 22px; font-size: 16px; }
.book-call a { font-weight: 700; }

.book-form {
  padding: clamp(26px, 3.2vw, 38px);
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

@media (max-width: 900px) { .book-grid { grid-template-columns: 1fr; } }

/* --- fields, shared by both forms -------------------------------------- */

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 16px; }
.pair .field { margin-bottom: 0; }
.pair + .pair, .pair + .field { margin-top: 16px; }

.field label { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 600; }
.need, .opt { font-weight: 400; font-size: 13px; }
.need { color: var(--blue); }
.opt  { color: var(--ink-soft); }

.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--white); color: var(--ink);
  font: 400 16px/1.45 inherit; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(2, 132, 199, .16);
}
.field input::placeholder, .field textarea::placeholder { color: #93A5B4; }

.field.bad input, .field.bad select, .field.bad textarea { border-color: #C0392B; }
.err { margin: 6px 0 0; font-size: 14px; color: #C0392B; min-height: 0; }
.err:empty { display: none; }

/* The honeypot. Off screen rather than display:none, because some bots skip
   anything hidden with display. Nobody using the site ever sees it. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fine { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-soft); }

.reply { margin: 14px 0 0; font-size: 16px; font-weight: 600; }
.reply:empty { display: none; }
.reply.good { color: #1E7B45; }
.reply.bad  { color: #C0392B; }

/* Replaces the form once it has been sent. */
.done { padding: 34px 30px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); text-align: center; }
.done h3 { font-size: 24px; }
.done p { margin: 0; color: var(--ink-soft); }
.done .tick {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--blue);
}
.done .tick::before { content: ""; width: 22px; height: 12px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg) translate(2px, -2px); }

@media (max-width: 620px) { .pair { grid-template-columns: 1fr; } }

/* --- 13. questions ----------------------------------------------------- */

.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.faq summary {
  padding: 18px 52px 18px 22px;
  position: relative;
  font-size: 17.5px; font-weight: 600;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 24px; top: 50%;
  width: 10px; height: 10px; margin-top: -6px;
  border-right: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue);
  transform: rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { color: var(--blue); }
.faq-body { padding: 0 22px 20px; }
.faq-body p { margin: 0; color: var(--ink-soft); }

/* --- 14. footer -------------------------------------------------------- */

.foot { padding: 34px 0; background: var(--ink); color: rgba(255, 255, 255, .72); }
.foot-in p { margin: 0; font-size: 15px; }

/* Deliberately quiet. It is a credit, not a call to action. */
.credit { color: inherit; text-decoration: none; }
.credit:hover { color: inherit; text-decoration: none; }

/* --- back to top ------------------------------------------------------- */

.totop {
  position: fixed; right: 22px; bottom: 22px; z-index: 50;
  width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.totop img { width: 100%; height: 100%; object-fit: cover; }
.totop.show { opacity: 1; visibility: visible; transform: none; }

/* --- the plain pages send.php prints without JavaScript ---------------- */

/* Somebody with scripting off gets a real page from send.php rather than a
   message on this one. It borrows .section, .wrap, .eyebrow, .lede and .btn
   from above; this is the only rule it needs of its own. */
.plain-list { margin: 0 0 1.4em; padding-left: 1.2em; color: #C0392B; }
.plain-list li { margin-bottom: .35em; }