/* ==========================================================================
   Long Dark Sky — site styles
   Palette: night-sky ink, star gold, olive green, warm paper
   ========================================================================== */

:root {
  /* Colour */
  --ink:        #0a0c11;
  --ink-2:      #12161e;
  --ink-3:      #1b212c;
  --paper:      #f8f6f1;
  --paper-2:    #ece7dd;
  --paper-3:    #ddd6c8;

  --gold:       #e0b13c;
  --gold-soft:  #f0cd7a;
  --olive:      #6d7d52;
  --olive-deep: #46523a;

  --on-dark:    #eceae5;
  --on-dark-dim:#a9a59c;
  --on-light:   #23262b;
  --on-light-dim:#5e6259;

  --line-dark:  rgba(236,234,229,.14);
  --line-light: rgba(35,38,43,.14);

  /* Type */
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Space */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(4rem, 9vw, 8rem);
  --maxw: 1180px;
  --maxw-narrow: 720px;

  --radius: 3px;
  --shadow: 0 18px 50px -18px rgba(0,0,0,.5);
  --ease: cubic-bezier(.2,.7,.3,1);
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--on-light);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 7vw, 5rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.25rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); }
h4 { font-size: 1.1rem; font-family: var(--body); font-weight: 600; letter-spacing: .01em; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

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

.skip-link {
  position: absolute; left: -9999px;
  background: var(--gold); color: var(--ink);
  padding: .75rem 1.25rem; z-index: 200; font-weight: 600;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ------------------------------------------------------------ utilities -- */

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

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.dark { background: var(--ink); color: var(--on-dark); }
.dark h1, .dark h2, .dark h3 { color: var(--on-dark); }
.dark .eyebrow { color: var(--gold); }
.dark .lede { color: var(--on-dark-dim); }

.tint { background: var(--paper-2); }

.eyebrow {
  display: block;
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--olive-deep);
  margin-bottom: 1.25rem;
}

.lede {
  font-size: clamp(1.08rem, 1.7vw, 1.3rem);
  line-height: 1.62;
  color: var(--on-light-dim);
}

.center { text-align: center; }
.center .eyebrow { margin-inline: auto; }

.section-head { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head.center { margin-inline: auto; }

.rule {
  width: 56px; height: 1px; border: 0;
  background: var(--gold);
  margin: 2rem 0;
}
.center .rule { margin-inline: auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- button -- */

.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--body);
  font-size: .82rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 1rem 1.9rem;
  border: 1px solid var(--gold);
  background: var(--gold); color: var(--ink);
  text-decoration: none; cursor: pointer;
  border-radius: var(--radius);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { background: var(--gold-soft); border-color: var(--gold-soft); transform: translateY(-2px); }

.btn--ghost { background: transparent; color: var(--gold); }
.btn--ghost:hover { background: var(--gold); color: var(--ink); }

.btn--light { background: transparent; border-color: var(--on-light); color: var(--on-light); }
.btn--light:hover { background: var(--on-light); color: var(--paper); }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.center .btn-row { justify-content: center; }

.textlink {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
  color: var(--olive-deep);
  border-bottom: 1px solid currentColor;
  padding-bottom: .3rem;
  transition: gap .25s var(--ease), color .25s var(--ease);
}
.textlink:hover { gap: .85rem; }
.dark .textlink { color: var(--gold); }

/* ------------------------------------------------------------------ nav -- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  padding: 1.1rem var(--gutter);
  background: transparent;
  transition: background .35s var(--ease), border-color .35s var(--ease), padding .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck,
.nav.is-open {
  background: rgba(10,12,17,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line-dark);
  padding-block: .85rem;
}
/* Pages without a full-bleed hero need a solid bar from the start */
.nav--solid { background: rgba(10,12,17,.94); backdrop-filter: blur(14px); border-bottom-color: var(--line-dark); }

.brand {
  display: flex; align-items: baseline; gap: .42rem;
  text-decoration: none; color: var(--on-dark);
  font-family: var(--display);
  font-size: 1.4rem; letter-spacing: .01em;
  line-height: 1;
  flex-shrink: 0;
}
.brand b { font-weight: 600; }
.brand span { color: var(--on-dark-dim); }
.brand i {
  font-style: normal; color: var(--gold);
  font-size: .7em; align-self: flex-start; margin-left: .1rem;
}

.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav-links a {
  color: var(--on-dark);
  text-decoration: none;
  font-size: .78rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .4rem 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.nav-links a:hover { color: var(--gold); }
.nav-links a[aria-current="page"] { border-bottom-color: var(--gold); color: var(--gold); }
.nav-links .btn { padding: .7rem 1.25rem; font-size: .72rem; border-bottom: 0; }
.nav-links .btn:hover { color: var(--ink); }

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  padding: .5rem; color: var(--on-dark);
}
.nav-toggle svg { width: 26px; height: 26px; }
.nav-toggle .close, .nav.is-open .nav-toggle .open { display: none; }
.nav.is-open .nav-toggle .close { display: block; }

@media (max-width: 940px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: 62px 0 auto 0;
    flex-direction: column; align-items: stretch;
    gap: 0;
    background: rgba(10,12,17,.98);
    backdrop-filter: blur(14px);
    padding: 1rem var(--gutter) 2.5rem;
    border-bottom: 1px solid var(--line-dark);
    max-height: calc(100dvh - 62px);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav.is-open .nav-links {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  }
  .nav-links a {
    padding: 1rem 0;
    font-size: .9rem;
    border-bottom: 1px solid var(--line-dark);
  }
  .nav-links a[aria-current="page"] { border-bottom-color: var(--gold); }
  .nav-links .btn { margin-top: 1.5rem; justify-content: center; }
}

/* ----------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: grid; align-items: end;
  color: var(--on-dark);
  background: var(--ink);
  overflow: hidden;
}
/* A shorter version of the full-bleed banner. Currently unused: the home page
   uses the full-height .hero, and the interior pages use .hero--natural. */
.hero--short { min-height: min(68svh, 620px); }

.hero picture, .hero > img { position: absolute; inset: 0; }
.hero img { width: 100%; height: 100%; object-fit: cover; }

.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(10,12,17,.92) 0%, rgba(10,12,17,.45) 42%, rgba(10,12,17,.35) 100%);
}

.hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(3.5rem, 8vw, 7rem);
}
.hero h1 { margin-bottom: .35em; }
.hero .lede { color: var(--on-dark); max-width: 46ch; }
.hero .eyebrow { color: var(--gold); }

.hero-badge {
  display: inline-flex; align-items: center; gap: .6rem;
  border: 1px solid var(--line-dark);
  background: rgba(10,12,17,.5);
  backdrop-filter: blur(6px);
  padding: .55rem 1rem;
  border-radius: 100px;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.75rem;
}
.hero-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 10px var(--gold);
}

/* Full-bleed hero that shows the WHOLE image instead of cropping it to a fixed
   height. For pictures that are composed graphics — where losing the top and
   bottom edges would wreck them. The image spans the full viewport width and
   its height simply follows its own proportions.

   The title sits BELOW the picture rather than over it: laying type across a
   composed image covers the very thing we widened it to show. */
.hero--natural {
  display: block;
  min-height: 0;
  background: var(--ink);
  /* Start the picture below the fixed nav bar. The other heroes run behind a
     transparent nav because their images are dark up there; this one has bright
     sky in the top corner, so the bar is made solid (.nav--solid) and the image
     is pushed clear of it instead of hiding underneath.
     The bar is 78px at rest and shrinks to ~71px once scrolled; this clears the
     taller state. Any surplus is invisible — nav and hero are both ink. */
  padding-top: 84px;
}
.hero--natural picture { position: static; display: block; }
.hero--natural img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: unset;
}
.hero--natural::after { display: none; }   /* no scrim needed — nothing overlaps */
.hero--natural .hero-inner {
  position: static;
  /* The overlaid hero pushed its text hard to the bottom of the frame. Sitting
     below an image it just needs even breathing room. */
  padding-top: clamp(2.5rem, 6vw, 4rem);
  padding-bottom: clamp(2.75rem, 6vw, 4.5rem);
}

/* Page header for interior pages */
.pagehead {
  padding-top: clamp(8rem, 14vw, 11rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.pagehead h1 { margin-bottom: .3em; }
.pagehead .lede { max-width: 56ch; }

/* ---------------------------------------------------------------- grids -- */

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Alternating image + text feature block */
.feature {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.feature + .feature { margin-top: clamp(4rem, 8vw, 7rem); }
.feature__media { position: relative; }
/* Images keep their own proportions — never cropped to fit a box. */
.feature__media img {
  width: 100%; height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.feature--flip .feature__media { order: 2; }
@media (max-width: 700px) { .feature--flip .feature__media { order: 0; } }

.feature__body h2 { margin-bottom: .5em; }

/* Caption under a media block */
.caption {
  margin-top: .85rem;
  font-size: .8rem; line-height: 1.5;
  color: var(--on-light-dim);
  font-style: italic;
}
.dark .caption { color: var(--on-dark-dim); }

/* ---------------------------------------------------------------- cards -- */

.card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
a.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--paper-3); }

.dark .card { background: var(--ink-2); border-color: var(--line-dark); }

.card img { width: 100%; height: auto; }
.card__body { padding: 1.6rem 1.6rem 1.8rem; flex: 1; display: flex; flex-direction: column; }
.card__body h3 { margin-bottom: .4em; }
.card__body p { font-size: .95rem; color: var(--on-light-dim); }
.dark .card__body p { color: var(--on-dark-dim); }
.card__body .textlink { margin-top: auto; padding-top: 1.25rem; align-self: flex-start; }

/* Small icon/stat blocks */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2rem; }
.fact { border-top: 1px solid var(--line-light); padding-top: 1.25rem; }
.dark .fact { border-top-color: var(--line-dark); }
.fact strong {
  display: block;
  font-family: var(--display);
  font-size: 2.4rem; font-weight: 400; line-height: 1;
  color: var(--olive-deep);
  margin-bottom: .4rem;
}
.dark .fact strong { color: var(--gold); }
.fact span { font-size: .9rem; color: var(--on-light-dim); }
.dark .fact span { color: var(--on-dark-dim); }

/* Bulleted feature list */
.ticks { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .8rem; }
.ticks li { position: relative; padding-left: 1.75rem; font-size: .98rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
}

/* ------------------------------------------------------------- products -- */

.product { text-align: center; }
.product__img {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.product__img img { width: 100%; height: auto; }
.product h3 { margin-bottom: .25em; }
.product .varietal {
  display: block;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
}
.product p { font-size: .95rem; color: var(--on-light-dim); }
.dark .product p { color: var(--on-dark-dim); }

/* -------------------------------------------------------------- gallery -- */

/* Masonry via CSS multi-column: every photo keeps its own proportions and the
   columns simply pack around whatever height each one turns out to be. */
.gallery {
  columns: 3 240px;
  column-gap: .8rem;
}
.gallery button {
  padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: var(--radius); overflow: hidden;
  display: block; position: relative;
  width: 100%;
  margin: 0 0 .8rem;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.gallery img {
  width: 100%; height: auto;
  transition: transform .5s var(--ease), opacity .3s var(--ease);
}
.gallery button:hover img { transform: scale(1.03); opacity: .9; }

/* Panoramas span the full width rather than being squeezed into one column. */
.gallery .wide { column-span: all; }
@media (max-width: 560px) { .gallery { columns: 1; } }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: none; place-items: center;
  background: rgba(6,7,10,.96);
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[open], .lightbox.is-open { display: grid; }
.lightbox img { max-width: 100%; max-height: 82svh; object-fit: contain; border-radius: var(--radius); }
.lightbox figcaption {
  color: var(--on-dark-dim); text-align: center;
  margin-top: 1.25rem; font-size: .9rem; max-width: 60ch;
}
.lightbox__close {
  position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem);
  background: none; border: 1px solid var(--line-dark); color: var(--on-dark);
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  font-size: 1.4rem; line-height: 1;
  display: grid; place-items: center;
}
.lightbox__close:hover { border-color: var(--gold); color: var(--gold); }

/* ----------------------------------------------------------------- form -- */

.form { display: grid; gap: 1.5rem; }

.field { display: grid; gap: .5rem; }
.field label, .field-legend {
  font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-light-dim);
  padding: 0;
}
.dark .field label, .dark .field-legend { color: var(--on-dark-dim); }
/* a <legend> ignores grid gap, so give it its own spacing */
.field-legend { margin-bottom: .5rem; }
.field label .req { color: var(--gold); }

.field input, .field select, .field textarea {
  font-family: var(--body); font-size: 1rem;
  color: var(--on-light);
  background: #fff;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  width: 100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.dark .field input, .dark .field select, .dark .field textarea {
  background: var(--ink-2); color: var(--on-dark); border-color: var(--line-dark);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(224,177,60,.18);
}
.field textarea { resize: vertical; min-height: 140px; }
.field .hint { font-size: .82rem; color: var(--on-light-dim); }
.dark .field .hint { color: var(--on-dark-dim); }

.field--error input, .field--error select, .field--error textarea { border-color: #c4523f; }
.field .error {
  font-size: .82rem; color: #c4523f; display: none;
}
.field--error .error { display: block; }
.dark .field .error { color: #e88a78; }

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }

.radios { display: flex; flex-wrap: wrap; gap: .75rem; }
.radios label {
  display: inline-flex; align-items: center; gap: .55rem;
  border: 1px solid var(--line-light);
  border-radius: 100px;
  padding: .7rem 1.2rem;
  cursor: pointer; text-transform: none; letter-spacing: 0;
  font-size: .92rem; font-weight: 500;
  color: var(--on-light);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.dark .radios label { border-color: var(--line-dark); color: var(--on-dark); }
.radios label:has(input:checked) { border-color: var(--gold); background: rgba(224,177,60,.12); }
.radios input { accent-color: var(--gold); margin: 0; }

/* honeypot */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-status {
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--line-light);
  font-size: .95rem;
  display: none;
}
.form-status.is-shown { display: block; }
.form-status.is-ok { border-color: var(--olive); background: rgba(109,125,82,.12); }
.form-status.is-err { border-color: #c4523f; background: rgba(196,82,63,.1); }
.dark .form-status { border-color: var(--line-dark); }

/* ------------------------------------------------------------------ map -- */

.map {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-light);
  background: var(--ink-2);
  min-height: 420px;
}
.dark .map { border-color: var(--line-dark); }
.map iframe { width: 100%; height: 480px; border: 0; display: block; }

.map__fallback {
  padding: clamp(2rem, 5vw, 3rem);
  color: var(--on-dark);
  display: grid; place-content: center; text-align: center;
  min-height: 420px;
}
.map__fallback h3 { color: var(--on-dark); }
.map__fallback p { color: var(--on-dark-dim); }

.map-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
}
.dark .map-card { border-color: var(--line-dark); }
.map-card__info { padding: clamp(1.75rem, 4vw, 2.75rem); }
.map-card__info dl { margin: 0; display: grid; gap: 1.25rem; }
.map-card__info dt {
  font-size: .72rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .3rem;
}
.map-card__info dd { margin: 0; font-size: .98rem; }

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

.footer { background: var(--ink); color: var(--on-dark-dim); padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem; }
.footer a { color: var(--on-dark-dim); text-decoration: none; }
.footer a:hover { color: var(--gold); }

.footer__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line-dark);
}
.footer__brand .brand { margin-bottom: 1.25rem; }
.footer__brand p { font-size: .92rem; max-width: 34ch; }

.footer h4 {
  color: var(--on-dark);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; font-size: .92rem; }

.footer__bottom {
  padding-top: 2rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .82rem;
}

/* -------------------------------------------------------------- reveals -- */

/* Content is visible by default. Only hide it for the animation when we know
   JavaScript is running (the <head> adds .js), so a script failure can never
   leave the page blank. */
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .gallery img, .card, .btn { transition: none !important; }
}

/* ---------------------------------------------------------------- print -- */

@media print {
  .nav, .footer, .lightbox, .btn-row { display: none; }
  body { background: #fff; color: #000; }
  .hero { min-height: auto; }
}