/* Orchard. Every colour is set once, in the block below. Change these and the
   whole page follows. Nothing further down hard-codes a colour. */

:root {
  --brand:      #f97316;   /* buttons, prices, accents */
  --brand-dark: #ea580c;   /* hover states */
  --deep:       #1e1b4b;   /* dark sections */
  --ink:        #1b1730;   /* headings */
  --body:       #4b4763;   /* body text */
  --muted:      #77738f;
  --line:       #eae6f2;
  --bg:         #ffffff;
  --bg-alt:     #fdf7f1;
  --radius:     14px;
  --wrap:       1080px;
  --grad:       linear-gradient(140deg, #fbbf24 0%, #f97316 55%, #ea580c 100%);
  --font:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:       ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { margin: 0 0 .5em; color: var(--ink); line-height: 1.15; letter-spacing: -0.02em; }
h1 { font-size: clamp(32px, 5.2vw, 52px); }
h2 { font-size: clamp(24px, 3.2vw, 34px); }
h3 { font-size: 19px; }
p  { margin: 0 0 1em; }
a  { color: var(--brand-dark); }

.wrap   { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 720px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 20; background: #fff; padding: 10px 16px; border-radius: 8px; }

/* --- header ------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}
/* Added by js/main.js once the page has scrolled. The hairline gives way to
   the shadow, so the two are never doubled up. */
.topbar.is-stuck {
  background: rgba(255, 255, 255, .97);
  border-bottom-color: transparent;
  box-shadow: 0 6px 22px rgba(30, 27, 75, .11), 0 1px 2px rgba(30, 27, 75, .06);
}
.bar    { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.brand  { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; color: var(--ink); text-decoration: none; margin-right: auto; }
/* Swap images/logo.png for your own mark. Keep it square and transparent. */
.brand picture { display: block; flex: none; }
.mark   { width: 30px; height: 30px; display: block; }
.nav    { display: flex; gap: 22px; font-size: 15px; }
.nav a  { color: var(--body); text-decoration: none; }
.nav a:hover { color: var(--brand-dark); }
@media (max-width: 720px) { .nav { display: none; } }

/* --- buttons ------------------------------------------------------------ */
.btn {
  display: inline-block; padding: 15px 28px; border-radius: 100px;
  background: var(--brand); color: #fff; font-weight: 700; font-size: 15.5px;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.btn:hover    { background: var(--brand-dark); transform: translateY(-1px); }
.btn-sm       { padding: 10px 20px; font-size: 14.5px; }
.btn-block    { width: 100%; margin-top: 22px; }
.btn-quiet    { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-quiet:hover { background: var(--bg-alt); color: var(--brand-dark); }
.btn-light    { background: #fff; color: var(--ink); }
.btn-light:hover { background: #fff8f2; color: var(--brand-dark); }

/* --- hero --------------------------------------------------------------- */
.hero {
  padding: clamp(48px, 7vw, 88px) 0 clamp(56px, 8vw, 96px);
  background: linear-gradient(180deg, #fffaf5 0%, #fceadb 100%);
  border-bottom: 1px solid #f2ddc9;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(22px, 3vw, 36px); align-items: center; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }
.hero .lede { font-size: 19.5px; color: var(--muted); max-width: 46ch; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.hero-shot { margin: 0; }
.hero-shot img { border-radius: 20px; box-shadow: 0 24px 60px rgba(30, 27, 75, .16); }

.eyebrow {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-dark); margin: 0 0 14px; font-weight: 800;
}

/* One item per line. It reads as a list rather than a run-on sentence. */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15px; }
.ticks li { position: relative; padding-left: 22px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 11px; height: 6px;
  border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}

/* --- sections ----------------------------------------------------------- */
.band     { padding: clamp(46px, 6.5vw, 84px) 0; }
.band.alt { background: var(--bg-alt); }
.section-head { max-width: 60ch; margin-bottom: 34px; }
.section-head p { color: var(--muted); margin: 0; }
/* .section-head p out-specifies .eyebrow, so say it again here or the
   eyebrow quietly renders grey. */
.section-head .eyebrow { color: var(--brand-dark); margin: 0 0 12px; }

/* --- grids -------------------------------------------------------------- */
.grid   { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* --- product boxes ------------------------------------------------------ */
.box {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
  overflow: hidden; transition: transform .18s ease, box-shadow .18s ease;
}
.box:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(30, 27, 75, .09); }
.box.is-popular { border-color: var(--brand); box-shadow: 0 14px 34px rgba(249, 115, 22, .12); }
.flag {
  position: absolute; top: 14px; right: 14px; z-index: 2; margin: 0;
  background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px;
}
.box-shot { margin: 0; background: var(--bg-alt); overflow: hidden; }
.box-shot img { aspect-ratio: 16 / 9; object-fit: cover; transition: transform .4s ease; }
.box:hover .box-shot img { transform: scale(1.04); }
.box-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.box-body h3 { margin-bottom: 4px; }
.price { font-size: 27px; font-weight: 800; color: var(--brand-dark); margin: 0 0 12px; letter-spacing: -0.02em; }
.price span { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.list { list-style: none; margin: 0 0 20px; padding: 0; font-size: 15.5px; border-top: 1px solid var(--line); }
.list li { padding: 9px 0 9px 20px; border-bottom: 1px solid var(--line); position: relative; }
.list li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.box-body > p:last-child { margin: auto 0 0; }

/* --- why us ---------------------------------------------------------------
   Four reasons, not four steps. The rail this replaced implied an order that
   does not exist, so the cards now stand on their own. The right column is
   nudged down on wide screens, which is what stops a plain 2x2 grid reading
   like a table. No scroll animation: the section is just there. */

.why-head { max-width: 46ch; margin: 0 auto clamp(38px, 5vw, 60px); text-align: center; }
.why-head h2 { text-wrap: balance; margin-bottom: 14px; }
.why-lede { color: var(--muted); margin: 0; font-size: 17.5px; }

.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.2vw, 26px); }
@media (min-width: 900px) {
  /* stagger the right hand column */
  .why-grid > :nth-child(even) { transform: translateY(46px); }
  .why-grid { margin-bottom: 46px; }
}
@media (max-width: 640px) { .why-grid { grid-template-columns: 1fr; } }

.why-card {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(26px, 3.2vw, 40px);
  transition: border-color .25s ease, box-shadow .3s ease, transform .3s ease;
}
/* a soft wash in the far corner, so the card is not a plain white box */
.why-card::after {
  content: "";
  position: absolute; right: -30%; bottom: -55%;
  width: 70%; aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(circle, rgba(249, 115, 22, .13), transparent 68%);
}

/* the big outlined numeral, cropped by the corner of the card */
.why-num {
  position: absolute; top: -18px; right: 10px;
  font-size: clamp(78px, 8.5vw, 124px);
  font-weight: 800; line-height: 1; letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(249, 115, 22, .26);
  transition: -webkit-text-stroke-color .3s ease;
  pointer-events: none; user-select: none;
}

.why-icon {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 56px; height: 56px;
  margin-bottom: clamp(18px, 2.4vw, 26px);
  border-radius: 17px;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 22px rgba(234, 88, 12, .26);
  transition: transform .3s ease;
}
.why-icon svg { width: 25px; height: 25px; }

.why-card h3 { position: relative; z-index: 1; font-size: 20px; margin-bottom: 8px; }
.why-card p  { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: 15.5px; max-width: 38ch; }

.why-card:hover {
  border-color: rgba(249, 115, 22, .55);
  box-shadow: 0 18px 40px rgba(30, 27, 75, .10);
}
.why-card:hover .why-num  { -webkit-text-stroke-color: rgba(249, 115, 22, .55); }
.why-card:hover .why-icon { transform: rotate(-6deg) scale(1.06); }

@media (min-width: 900px) {
  .why-card:hover                        { transform: translateY(-5px); }
  .why-grid > :nth-child(even):hover     { transform: translateY(41px); }
}

/* --- steps -------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { position: relative; padding: 0 0 26px 62px; counter-increment: step; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; font-size: 17px;
}
.steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 20px; top: 48px; bottom: 8px; width: 2px; background: var(--line);
}
.steps h3 { margin-bottom: 4px; }
.steps p  { margin: 0; color: var(--muted); }

/* --- quote -------------------------------------------------------------- */
blockquote { margin: 0; padding: 28px 32px; background: #fff; border-left: 4px solid var(--brand); border-radius: 0 var(--radius) var(--radius) 0; }
blockquote p { font-size: 20px; color: var(--ink); margin: 0; }
blockquote cite { display: block; margin-top: 12px; font-size: 14.5px; color: var(--muted); font-style: normal; }

/* --- order form --------------------------------------------------------- */
.band.order { background: var(--deep); color: #cfcbe4; }
.band.order h2 { color: #fff; }
.band.order .eyebrow { color: #fdba74; }
.band.order .ticks li::before { border-color: #fdba74; }
.order-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 5vw, 56px); align-items: start; }
@media (max-width: 860px) { .order-grid { grid-template-columns: 1fr; } }
.order-copy .ticks { gap: 10px; }

.form { background: #fff; border-radius: 18px; padding: clamp(22px, 3vw, 32px); }
.field { margin-bottom: 16px; }
.row   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .row { grid-template-columns: 1fr; } }
.form label { display: block; font-weight: 700; color: var(--ink); font-size: 14.5px; margin: 0 0 6px; }
.opt { font-weight: 500; color: var(--muted); font-size: 13px; }
.form input, .form select, .form textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.form textarea { resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(249, 115, 22, .16);
}
.form input.is-wrong, .form select.is-wrong { border-color: #dc2626; }
.form-foot { font-size: 13.5px; color: var(--muted); text-align: center; margin: 14px 0 0; }
.form-note { font-size: 14.5px; margin: 12px 0 0; text-align: center; color: #b91c1c; }
.form-note.is-ok { color: #15803d; }
.form-note:empty { display: none; }
.form-done { text-align: center; padding: clamp(34px, 5vw, 54px) clamp(22px, 3vw, 32px); }
.form-done h3 { font-size: 24px; margin-bottom: 8px; }
.form-done h3::before {
  content: ""; display: block; width: 46px; height: 46px; margin: 0 auto 16px;
  border-radius: 50%; background: var(--brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.3 6.3 9.5 17.1 3.7 11.3l1.4-1.4 4.4 4.4 9.4-9.4z'/%3E%3C/svg%3E") center / 46px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.3 6.3 9.5 17.1 3.7 11.3l1.4-1.4 4.4 4.4 9.4-9.4z'/%3E%3C/svg%3E") center / 46px no-repeat;
}
.form-done p { color: var(--muted); margin: 0; }
.btn:disabled { opacity: .6; cursor: default; transform: none; }
/* Honeypot. It has to stay invisible to people and reachable by bots. */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* --- questions ---------------------------------------------------------- */
details { border-bottom: 1px solid var(--line); }
details:first-of-type { border-top: 1px solid var(--line); }
summary { cursor: pointer; padding: 16px 0; font-weight: 700; color: var(--ink); list-style: none; position: relative; padding-right: 32px; }
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; position: absolute; right: 6px; top: 24px; width: 9px; height: 9px;
  border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(45deg); transition: transform .18s ease;
}
details[open] summary::after { transform: rotate(-135deg); top: 27px; }
details p { margin: 0 0 16px; color: var(--muted); }

/* --- closing ------------------------------------------------------------ */
.band.closing { background: var(--brand); color: #fff5ec; text-align: center; }
.band.closing h2 { color: #fff; }

/* --- footer ------------------------------------------------------------- */
.site-foot { border-top: 1px solid var(--line); padding: 30px 0; font-size: 14.5px; color: var(--muted); text-align: center; }
.site-foot p { margin: 0; }
/* Credit link, set to read as ordinary text: it takes the colour of the
   sentence around it and carries no underline, in any state. It is still a
   real link, so a screen reader announces it and the keyboard focus ring
   still shows. */
.credit,
.credit:hover,
.credit:visited,
.credit:active { color: inherit; text-decoration: none; }

/* --- parallax bands ------------------------------------------------------
   The picture is a real <img> rather than a CSS background, so it can be
   lazy-loaded and given proper dimensions. It is taller than the band and
   sits behind everything; js/main.js nudges it as the page scrolls. With no
   JavaScript, or when the visitor prefers less motion, it just sits still
   and the band looks like any other photograph with words on top. */
.parallax {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 11vw, 132px) 0;
  color: #fff;
}
.parallax-img {
  position: absolute;
  left: 0; top: -20%;
  width: 100%; height: 140%;
  z-index: -2;
  display: block;
  will-change: transform;
}
.parallax-img img { width: 100%; height: 100%; object-fit: cover; }
.parallax::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(20, 16, 45, .82) 0%, rgba(20, 16, 45, .62) 46%, rgba(20, 16, 45, .30) 100%);
}
.parallax h2 { color: #fff; }
.parallax p  { color: #ece9f6; }
.parallax .eyebrow { color: #fdba74; }
.parallax-copy { position: relative; }

/* the closing band keeps its orange identity, tinted over the photograph */
.band.closing.parallax::after {
  background: linear-gradient(180deg, rgba(88, 32, 8, .58), rgba(140, 52, 14, .74));
}

/* --- how it works, two columns ------------------------------------------ */
.how-grid { display: grid; grid-template-columns: 1fr .85fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
@media (max-width: 860px) { .how-grid { grid-template-columns: 1fr; } }
.how-shot { margin: 0; }
.how-shot img { border-radius: var(--radius); box-shadow: 0 18px 44px rgba(30, 27, 75, .12); }

/* --- testimonial ---------------------------------------------------------
   Full width photograph with an even scrim over it. A floating white card
   was covering people's faces, which read as an accident rather than a
   design, so the picture now carries the whole band and the words sit on
   top of it. */
.quote-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(88px, 13vw, 168px) 0;
  text-align: center;
}
.quote-img { position: absolute; inset: 0; z-index: -2; display: block; }
.quote-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.quote-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(18, 12, 6, .34), transparent 72%),
    linear-gradient(180deg, rgba(18, 12, 6, .60) 0%, rgba(18, 12, 6, .68) 55%, rgba(18, 12, 6, .74) 100%);
}

/* A px measure, not ch: ch resolves against this element's 17px font, not
   the 32px of the quote inside it, which made the column far too narrow. */
.quote { margin: 0 auto; max-width: 780px; }
.quote-mark {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(62px, 8vw, 104px);
  line-height: .78;
  color: var(--brand);
  opacity: .92;
  margin-bottom: clamp(6px, 1.4vw, 14px);
}
.quote blockquote { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.quote blockquote p {
  margin: 0;
  color: #fff;
  font-size: clamp(21px, 2.7vw, 32px);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -0.015em;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .40);
}
.quote-rule {
  display: block; width: 46px; height: 3px; border-radius: 3px;
  margin: clamp(24px, 3.4vw, 38px) auto clamp(18px, 2.4vw, 24px);
  background: var(--grad);
}
.quote figcaption { display: grid; gap: 3px; }
.quote-name { color: #fff; font-weight: 700; font-size: 15.5px; letter-spacing: .01em; }
.quote-role { color: rgba(255, 255, 255, .74); font-size: 14.5px; }

/* --- gallery --------------------------------------------------------------
   Two rows of four. Each picture is a real <button>, so it is reachable by
   keyboard and announced properly, rather than a div with a click handler
   bolted on. */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.gallery figure { margin: 0; }
.shot-open {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; position: relative; border-radius: var(--radius); overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.shot-open img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .4s ease;
}
.shot-open::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius);
  background: rgba(24, 16, 6, 0); transition: background .3s ease;
}
.shot-open:hover img,
.shot-open:focus-visible img { transform: scale(1.06); }
.shot-open:hover::after,
.shot-open:focus-visible::after { background: rgba(24, 16, 6, .26); }

.shot-zoom {
  position: absolute; z-index: 2; inset: 0; margin: auto;
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--brand-dark);
  opacity: 0; transform: scale(.7); transition: opacity .28s ease, transform .28s ease;
}
.shot-zoom svg { width: 21px; height: 21px; }
.shot-open:hover .shot-zoom,
.shot-open:focus-visible .shot-zoom { opacity: 1; transform: scale(1); }

.gallery figcaption { font-size: 14.5px; color: var(--muted); padding-top: 10px; }
@media (max-width: 680px) { .gallery figcaption { font-size: 13px; } }

/* --- back to top ----------------------------------------------------------
   Visible by default so it still appears with JavaScript switched off. The
   script adds .to-top-auto, which is what allows it to hide, then .is-on when
   the page has scrolled far enough to make it useful. */
.to-top {
  position: fixed; z-index: 40;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  width: 48px; height: 48px;
  border-radius: 50%; overflow: hidden;
  box-shadow: 0 8px 22px rgba(234, 88, 12, .34);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, box-shadow .25s ease;
}
.to-top img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.to-top:hover { transform: translateY(-3px); box-shadow: 0 13px 28px rgba(234, 88, 12, .44); }

.to-top-auto            { opacity: 0; visibility: hidden; transform: translateY(12px); }
.to-top-auto.is-on      { opacity: 1; visibility: visible; transform: none; }
.to-top-auto.is-on:hover { transform: translateY(-3px); }

@media print { .to-top { display: none; } }

/* --- the popup ------------------------------------------------------------ */
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(14, 9, 4, .90);
  animation: lb-in .22s ease both;
}
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }

.lb-frame { margin: 0; max-width: min(1000px, 100%); text-align: center; }
.lb-img {
  display: block; max-width: 100%; max-height: 76vh;
  width: auto; height: auto; margin: 0 auto;
  border-radius: var(--radius); background: #2a1f14;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  animation: lb-pop .28s cubic-bezier(.2, .9, .3, 1.3) both;
}
@keyframes lb-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.lb-cap { color: rgba(255, 255, 255, .84); font-size: 15px; padding-top: 16px; }

.lightbox button {
  position: absolute; border: 0; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .14);
  border-radius: 50%; display: grid; place-items: center;
  transition: background .2s ease, transform .2s ease;
}
.lightbox button:hover { background: rgba(255, 255, 255, .28); }
.lb-close { top: 14px; right: 16px; width: 46px; height: 46px; font-size: 30px; line-height: 1; }
.lb-prev, .lb-next { top: 50%; margin-top: -26px; width: 52px; height: 52px; font-size: 32px; line-height: 1; }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
.lb-prev:hover { transform: translateX(-2px); }
.lb-next:hover { transform: translateX(2px); }
@media (max-width: 560px) {
  .lb-prev, .lb-next { width: 44px; height: 44px; margin-top: -22px; font-size: 26px; }
  .lb-img { max-height: 66vh; }
}

/* stop the page behind scrolling while the popup is open */
body.lb-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .lightbox, .lb-img { animation: none; }
}

/* --- accessibility ------------------------------------------------------ */
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .001ms !important; }
  .parallax-img { transform: none !important; }
  .why-card, .why-icon { transform: none !important; }
}

/* --- print -------------------------------------------------------------- */
@media print {
  .topbar, .hero-buttons, .closing, .btn { display: none; }
  .parallax-img, .quote-img, .gallery { display: none; }
  body { font-size: 12pt; }
  .band, .hero { padding: 12pt 0; }
}