/* =========================================================================
   NORTHWIND
   Event planning and production 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:      #17131F;   /* headings, body text, and the primary button */
  --ink-soft: #5C5468;   /* second-rank text */
  --gold:     #A0731C;   /* the accent, on pale backgrounds */
  --gold-br:  #E0B44A;   /* the accent, on dark backgrounds */
  --cream:    #FAF6EF;   /* the pale section background */
  --line:     #E7DFD2;   /* hairlines and borders */
  --line-dk:  rgba(255, 255, 255, .16);  /* hairlines on dark sections */
  --white:    #FFFFFF;
  --dark:     #17131F;   /* the dark sections */
  --dark-2:   #221C2E;   /* panels sitting on a dark section */

  /* shape */
  --r:      4px;    /* the template is squared off on purpose */
  --r-lg:   6px;
  --shadow: 0 26px 60px -34px rgba(23, 19, 31, .55);

  /* measure */
  --wrap: 1180px;
}

/* --- 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.7 Georgia, "Iowan Old Style", "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
}

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

/* Headings and anything structural use the sans face; body copy stays
   serif. That split is what gives the page its character, so if you change
   one font here, change the other to match. */
h1, h2, h3, .sans {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.12;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(36px, 5.4vw, 62px); }
h2 { font-size: clamp(27px, 3.6vw, 40px); }
h3 { font-size: 21px; letter-spacing: -.015em; }
p  { margin: 0 0 1em; }

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

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

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
/* Used by the plain page send.php prints when JavaScript is off. */
.wrap.narrow { max-width: 760px; }

.section { padding: clamp(66px, 8.5vw, 112px) 0; }
.section.cream { background: var(--cream); }

.head { max-width: 740px; margin-bottom: clamp(36px, 4.4vw, 58px); }
.head.centred { max-width: 720px; margin-inline: auto; text-align: center; }
.head .lede { margin-bottom: 0; }

/* Written out rather than left to inherit, so a later "p" rule inside a
   section head cannot quietly win and turn the eyebrow grey. */
.eyebrow,
.head .eyebrow {
  margin: 0 0 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow.gold { color: var(--gold-br); }

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

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

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 30px;
  border: 1px solid var(--ink);
  border-radius: var(--r);
  background: var(--ink);
  color: var(--white);
  font: 700 15px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
}
.btn:hover { background: var(--gold); border-color: var(--gold); color: var(--white); }

.btn-sm { padding: 11px 20px; font-size: 13.5px; }
.btn-lg { padding: 18px 36px; font-size: 16px; }
.btn-block { display: flex; width: 100%; }

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

/* The gold button is only used on the dark closing band, where gold on
   near-black has plenty of contrast. */
.btn-gold { background: var(--gold-br); border-color: var(--gold-br); color: var(--ink); }
.btn-gold:hover { background: var(--white); border-color: var(--white); color: var(--ink); }

/* A link that behaves like a secondary action without shouting. */
.plain {
  font: 700 15px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--gold-br);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}
.plain:hover { color: var(--white); }

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

/* The header starts transparent, sitting over the dark hero, and turns
   solid once the page scrolls. The script only adds the class. */
.bar {
  position: sticky; top: 0; z-index: 40;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .25s, border-color .25s;
}
.bar.stuck {
  background: rgba(23, 19, 31, .95);
  backdrop-filter: saturate(1.3) blur(8px);
  border-bottom-color: var(--line-dk);
}

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

.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--white); }
.logo-mark { display: grid; place-items: center; width: 34px; height: 34px; color: var(--gold-br); }
.logo-word {
  font: 700 21px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -.02em;
}

.nav { display: flex; gap: 24px; margin-left: auto; }
.nav a {
  font: 500 15px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
}
.nav a:hover { color: var(--gold-br); }

.bar .btn {
  background: transparent; border-color: rgba(255, 255, 255, .38); color: var(--white);
}
.bar .btn:hover { background: var(--gold-br); border-color: var(--gold-br); color: var(--ink); }

@media (max-width: 1100px) { .nav { display: none; } .bar-in { justify-content: space-between; } }

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

/* The header sits over this, so the hero carries the top padding for both. */
.hero { background: var(--dark); color: var(--white); margin-top: -78px; padding-top: 78px; }

.hero-in {
  display: grid; grid-template-columns: 1.04fr .96fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(64px, 8vw, 104px) 0 clamp(72px, 9vw, 116px);
}
.hero-text h1 { color: var(--white); max-width: 15ch; }
.hero-text .lede { color: rgba(255, 255, 255, .78); max-width: 46ch; }
.hero-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin-top: 32px; }
.hero-acts .btn { background: var(--gold-br); border-color: var(--gold-br); color: var(--ink); }
.hero-acts .btn:hover { background: var(--white); border-color: var(--white); }
.hero-note {
  margin: 26px 0 0; font-size: 14.5px; color: rgba(255, 255, 255, .5);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Two photographs, the smaller one dropped below and across the larger. */
.hero-pics { position: relative; padding-bottom: 56px; }
.hero-pics figure { margin: 0; overflow: hidden; border-radius: var(--r-lg); }
/* Written as a descendant selector on purpose. ".hero-pics figure" above is
   (0,1,1) and would otherwise beat a plain ".hero-pic-a" (0,1,0), so the
   margin: 0 would win and both photographs would stack on the left edge. */
.hero-pics .hero-pic-a { width: 74%; margin-left: auto; }
.hero-pic-a img { width: 100%; aspect-ratio: 640 / 800; object-fit: cover; }
/* The smaller photograph is dropped below and across the larger one. The
   border is the same colour as the section, which is what reads as a gap
   between the two rather than a frame around one. */
.hero-pic-b {
  position: absolute; left: 0; bottom: 0; width: 45%;
  border: 8px solid var(--dark);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .9);
}
.hero-pic-b img { width: 100%; aspect-ratio: 520 / 390; object-fit: cover; }

@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-text h1 { max-width: none; }
  .hero-pics { padding-bottom: 40px; }
  .hero-pic-a { width: 82%; }
  .hero-pic-b { width: 44%; }
}
@media (max-width: 560px) {
  .hero-pic-a { width: 100%; }
  .hero-pic-b { display: none; }
  .hero-pics { padding-bottom: 0; }
}

/* --- 3. the ribbon ----------------------------------------------------- */

/* Two identical copies of the list slide left together. When the first has
   moved its whole width the animation restarts, and because the second copy
   is sitting exactly where the first started, the join is invisible. */
.ribbon {
  background: var(--gold);
  color: var(--white);
  overflow: hidden;
  padding: 15px 0;
}
.ribbon-track { display: flex; width: max-content; animation: ribbon 44s linear infinite; }
.ribbon-set { display: flex; align-items: center; }
.ribbon b {
  font: 700 13px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
}
.ribbon i { display: block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .55; margin: 0 30px; }

@keyframes ribbon { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Somebody who has asked for less movement gets a still ribbon. */
@media (prefers-reduced-motion: reduce) { .ribbon-track { animation: none; } }

/* --- 4. the tabs ------------------------------------------------------- */

/* Radio buttons drive these, not JavaScript. The inputs are hidden from
   sight but not from the keyboard, so the arrow keys move between tabs the
   way they do in any radio group. */
.tabs { position: relative; }
.tab-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }

.tab-bar {
  display: flex; flex-wrap: wrap; gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(28px, 3.4vw, 44px);
}
.tab-bar label {
  padding: 14px 22px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font: 600 15.5px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.tab-bar label:hover { color: var(--ink); }

.tab-panel { display: none; }

/* One pair of rules per tab. Add a sixth tab by copying a pair and bumping
   both numbers. */
#tab1:checked ~ .tab-bar label:nth-of-type(1),
#tab2:checked ~ .tab-bar label:nth-of-type(2),
#tab3:checked ~ .tab-bar label:nth-of-type(3),
#tab4:checked ~ .tab-bar label:nth-of-type(4),
#tab5:checked ~ .tab-bar label:nth-of-type(5) {
  color: var(--ink); border-bottom-color: var(--gold);
}
#tab1:checked ~ .tab-panels .tab-panel:nth-of-type(1),
#tab2:checked ~ .tab-panels .tab-panel:nth-of-type(2),
#tab3:checked ~ .tab-panels .tab-panel:nth-of-type(3),
#tab4:checked ~ .tab-panels .tab-panel:nth-of-type(4),
#tab5:checked ~ .tab-panels .tab-panel:nth-of-type(5) {
  display: grid;
}
/* Keyboard users need to see which tab they are on. */
.tab-radio:focus-visible ~ .tab-bar label { outline: none; }
#tab1:focus-visible ~ .tab-bar label:nth-of-type(1),
#tab2:focus-visible ~ .tab-bar label:nth-of-type(2),
#tab3:focus-visible ~ .tab-bar label:nth-of-type(3),
#tab4:focus-visible ~ .tab-bar label:nth-of-type(4),
#tab5:focus-visible ~ .tab-bar label:nth-of-type(5) {
  outline: 2px solid var(--gold); outline-offset: -2px;
}

.tab-panel { grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.tab-pic { overflow: hidden; border-radius: var(--r-lg); }
.tab-pic img { width: 100%; aspect-ratio: 900 / 620; object-fit: cover; }
.tab-text h3 { font-size: clamp(22px, 2.5vw, 28px); }
.tab-text > p { color: var(--ink-soft); }

@media (max-width: 860px) {
  .tab-panel { grid-template-columns: 1fr; }
  .tab-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* --- tick lists, used in several places -------------------------------- */

.ticks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; font-size: 16px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 15px; height: 8px;
  border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

/* --- 5. what we handle -------------------------------------------------- */

.handle-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(34px, 5vw, 72px); align-items: start; }

.checks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 26px; }
.checks li {
  position: relative; padding: 13px 0 13px 30px;
  border-top: 1px solid var(--line);
  font-size: 16.5px;
}
.checks li::before {
  content: ""; position: absolute; left: 0; top: 1.28em;
  width: 14px; height: 8px;
  border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

.handle-side { position: sticky; top: 100px; }
.handle-pic { margin: 0; overflow: hidden; border-radius: var(--r-lg); }
.handle-pic img { width: 100%; aspect-ratio: 800 / 640; object-fit: cover; }

.handle-card { margin-top: 22px; padding: 26px 28px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); }
.handle-quote { margin: 0 0 20px; font-size: 18.5px; line-height: 1.55; }

@media (max-width: 900px) {
  .handle-grid { grid-template-columns: 1fr; }
  .handle-side { position: static; }
}
@media (max-width: 600px) { .checks { grid-template-columns: 1fr; } }

/* --- 6. the parallax band ---------------------------------------------- */

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

/* The picture is taller than the band so it has room to move: 140% high,
   pulled up 20%, which leaves 20% of slack top and bottom. The script never
   shifts it more 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; }

/* These photographs are busy and the type sits left, so the scrim is a
   gradient, heaviest on the side the words are on. */
.band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(95deg, rgba(15, 12, 21, .92) 0%, rgba(15, 12, 21, .78) 46%, rgba(15, 12, 21, .5) 100%);
}
/* .band-in is a .wrap, and .wrap centres itself. Putting a max-width on it
   would narrow and re-centre the whole box, pushing the text into the middle
   of the band. Capping the children instead keeps the text against the left
   edge of the content column where the scrim is heaviest. */
.band-in { padding: clamp(76px, 9.5vw, 126px) 0; }
.band-in > * { max-width: 720px; }
.band-in h2 { color: var(--white); }
.band-in p { color: rgba(255, 255, 255, .82); font-size: 18.5px; margin-bottom: 0; }

/* --- 7. how we work ----------------------------------------------------- */

/* A single rule runs down the middle and the steps sit either side of it.
   On a narrow screen the rule moves to the left and every step lines up
   against it, which is the only change needed. */
.path { list-style: none; padding: 0; margin: 0; position: relative; max-width: 980px; margin-inline: auto; }
.path::before {
  content: ""; position: absolute; left: 50%; top: 12px; bottom: 12px;
  width: 1px; background: var(--line); transform: translateX(-.5px);
}

.path-step { position: relative; width: 50%; padding: 0 44px 44px 0; }
.path-step:nth-child(even) { margin-left: 50%; padding: 0 0 44px 44px; }
.path-step:last-child { padding-bottom: 0; }

.path-n {
  position: absolute; top: 0; right: -23px;
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink); color: var(--gold-br);
  font: 700 14px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .04em;
}
.path-step:nth-child(even) .path-n { right: auto; left: -23px; }

.path-step:nth-child(odd) .path-body { text-align: right; }
.path-body h3 { margin-bottom: 8px; }
.path-body p { margin: 0; color: var(--ink-soft); font-size: 16.5px; }

@media (max-width: 780px) {
  .path::before { left: 23px; }
  .path-step,
  .path-step:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 36px 70px; }
  .path-step:last-child { padding-bottom: 0; }
  .path-n,
  .path-step:nth-child(even) .path-n { left: 0; right: auto; }
  .path-step:nth-child(odd) .path-body { text-align: left; }
}

/* --- 8. recent work ----------------------------------------------------- */

.work { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.work-item {
  position: relative; display: block; padding: 0; border: 0; line-height: 0;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--line); cursor: zoom-in;
  font-family: inherit;
}
.work-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.work-item:hover img { transform: scale(1.05); }
.work-item:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* The caption sits on the photograph rather than appearing on hover, so it
   is readable on a phone where there is no hover. */
.work-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 42px 20px 16px;
  background: linear-gradient(to top, rgba(15, 12, 21, .88), rgba(15, 12, 21, 0));
  color: var(--white);
  font: 600 14.5px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: left;
}

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

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

.lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(12, 9, 17, .94); 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: var(--r); }
.lb-cap { margin: 14px 0 0; text-align: center; color: rgba(255, 255, 255, .8); 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(20, 16, 27, .6); color: #fff;
  font: 400 26px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: var(--gold); border-color: var(--gold); }
.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(12, 9, 17, .8); }
}

body.lb-open { overflow: hidden; }

/* --- 9. the brief form -------------------------------------------------- */

.brief { background: var(--dark); color: var(--white); padding: clamp(66px, 8.5vw, 112px) 0; }
.brief-in { max-width: 760px; margin-inline: auto; }
.brief-head { text-align: center; margin-bottom: 40px; }
.brief-head h2 { color: var(--white); }
.brief-head p { color: rgba(255, 255, 255, .74); margin-bottom: 0; }

.brief-rule { border: 0; border-top: 1px solid var(--line-dk); margin: 26px 0; }

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

.field label {
  display: block; margin-bottom: 8px;
  font: 600 14.5px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: rgba(255, 255, 255, .9);
}
.need, .opt { font-weight: 400; font-size: 13px; }
.need { color: var(--gold-br); }
.opt  { color: rgba(255, 255, 255, .48); }

.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--line-dk); border-radius: var(--r);
  background: var(--dark-2); color: var(--white);
  font: 400 16px/1.5 inherit; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold-br); box-shadow: 0 0 0 3px rgba(224, 180, 74, .2);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, .38); }
/* The date box paints its own icon dark by default, which disappears here. */
.field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .6; cursor: pointer; }

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

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

.brief .btn { margin-top: 8px; background: var(--gold-br); border-color: var(--gold-br); color: var(--ink); }
.brief .btn:hover { background: var(--white); border-color: var(--white); }

.fine { margin: 16px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, .5); text-align: center; }

.reply { margin: 16px 0 0; font-size: 16px; font-weight: 600; text-align: center; }
.reply:empty { display: none; }
.reply.bad { color: #E8836F; }

/* Replaces the form once it has been sent. */
.done { padding: 44px 32px; background: var(--dark-2); border: 1px solid var(--line-dk); border-radius: var(--r-lg); text-align: center; }
.done h3 { font-size: 26px; color: var(--white); }
.done p { margin: 0; color: rgba(255, 255, 255, .76); }
.done .tick { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 20px; border-radius: 50%; background: var(--gold-br); }
.done .tick::before { content: ""; width: 22px; height: 12px; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(-45deg) translate(2px, -2px); }

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

/* --- 10. questions ------------------------------------------------------ */

/* Plain question and answer, two across. An accordion hides the answers,
   and on a page this short there is no reason to. */
.qa { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 48px; }
.qa-item { padding: 28px 0; border-top: 1px solid var(--line); }
.qa-item h3 { font-size: 19px; margin-bottom: 10px; }
.qa-item p { margin: 0; color: var(--ink-soft); font-size: 16.5px; }

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

/* --- 11. closing -------------------------------------------------------- */

.close { background: var(--dark); color: var(--white); text-align: center; padding: clamp(64px, 8vw, 104px) 0; }
.close-in { max-width: 620px; margin-inline: auto; }
.close h2 { color: var(--white); }
.close p { color: rgba(255, 255, 255, .74); font-size: 18.5px; margin-bottom: 28px; }

/* --- 12. footer --------------------------------------------------------- */

.foot { padding: 30px 0; background: var(--dark); color: rgba(255, 255, 255, .55); border-top: 1px solid var(--line-dk); }
.foot-in p { margin: 0; font-size: 14.5px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* 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 page send.php prints without JavaScript ------------------ */

/* Borrows .section, .wrap, .eyebrow, .lede and .btn from above. This is the
   only rule of its own that it needs. */
.plain-list { margin: 0 0 1.4em; padding-left: 1.2em; color: #B4402A; }
.plain-list li { margin-bottom: .35em; }