/* =============================================================================
   Lacey Stevens — Portfolio
   Hand-rebuilt, framework-free stylesheet (migrated off Webflow).
   Sections:
     1.  Fonts (self-hosted)
     2.  Design tokens
     3.  Reset & base elements
     4.  Layout primitives (container, section, bands)
     5.  Header & navigation
     6.  Hero (home)
     7.  Intro + work cards (home)
     8.  Role banners (overlapping panel + photo)
     9.  Project detail rows
     10. Page hero (about / pricing)
     11. About page
     12. Pricing page
     13. Contact section & form
     14. Footer
     15. Utility page (404)
     16. Scroll-reveal animation
     17. Responsive
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------------- */
/* Century Gothic — self-hosted (licensed display face used site-wide). */
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/Century-Gothic.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/Century-Gothic-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/Century-Gothic-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/Century-Gothic-Bold-Italic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Alena — self-hosted display face, AVAILABLE BUT NOT YET APPLIED.
   Uploaded to the original site but never used, and it's kept here for later.
   The browser won't download it until something actually references it.
   To use it, add `font-family: "Alena", ...` to a rule (or switch the
   --font-display-alt token below onto a heading), e.g.:
       .hero__title { font-family: var(--font-display-alt); } */
@font-face {
  font-family: "Alena";
  src: url("../fonts/alena.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Cormorant Garamond — self-hosted (variable weight axis, latin subset). */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-400.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-400-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

/* Lato — self-hosted (latin subset). */
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Roboto — self-hosted (variable weight axis, latin subset). */
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-400.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* -----------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Palette (thistle / mauve family) */
  --color-text: #5f4d5d;          /* body copy (deep mauve) */
  --color-muted: #b0b0b0;         /* captions / de-emphasised */
  --color-accent: #b99bb6;        /* titles, buttons, labels (deep thistle) */
  --color-thistle: #ba9fb7;       /* back-to-top button */
  --color-thistle-medium: #ceb3cb;/* section + card backgrounds */
  --color-thistle-dark: #c9adc6;  /* footer background */
  --color-thistle-light: #d7b7d4; /* hairline dividers */
  --color-plum: #b08ead;          /* dark overlay panels + nav link colour */
  --color-pink: #d6bbd3;          /* image frames, page-hero, accents */
  --color-card: #fff1fd;          /* pricing card background */

  /* Type */
  --font-display: "Century Gothic", "Century Gothic Std", sans-serif;
  --font-display-alt: "Alena", "Century Gothic", sans-serif; /* available; not applied — see Alena @font-face */
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-lato: "Lato", system-ui, sans-serif;
  --font-roboto: "Roboto", system-ui, sans-serif;

  /* Layout */
  --container: 1265px;
  --container-wide: 1750px;
}

/* -----------------------------------------------------------------------------
   3. Reset & base elements
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 30px;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}

h1, h2, h3 {
  margin: 10px 0;
  font-weight: 700;
}
h1 { font-size: 38px; line-height: 44px; }

p { margin: 0 0 10px; }

a {
  color: var(--color-text);
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
}

ul, ol { margin: 0 0 10px; padding-left: 40px; font-size: 22px; }
li { margin-bottom: 2px; }

sup { font-size: 0.6em; }

/* -----------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 25px;
}
.container--wide { max-width: var(--container-wide); }

/* Standard vertical rhythm section */
.section {
  padding: 75px 0;
  overflow: hidden;
}
.section--thistle { background-color: var(--color-thistle-medium); }

/* Pink accent band (inner page heros already use .page-hero) */

.row-between {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-block;
  min-width: 110px;
  max-width: 100%;
  height: 55px;
  margin: 0 auto 45px;
  padding: 15px 28px 0;
  border: 1px solid var(--color-accent);
  border-radius: 25px;
  background-color: var(--color-accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 1.5px;
  text-align: center;
  transition: background-color .2s, color .2s;
}
.btn:hover {
  background-color: transparent;
  color: var(--color-accent);
}
.btn--spaced { margin-top: 15px; }
.btn--tall-gap { margin-bottom: 229px; }

/* Small centred spacing wrappers (previously Webflow "top-border" helpers) */
.spacer-5 { margin-top: 5px; }
.spacer-20 { margin: 20px auto; }
.spacer-40 { margin-top: 40px; }
.spacer-50 { margin-top: 50px; }

/* -----------------------------------------------------------------------------
   5. Header & navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 1000;
  border-top: 4px solid var(--color-pink);
  background-color: #fff;
}
.site-header__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  height: 120px;
  transition: opacity .2s;
}
.brand:hover { opacity: .8; }
.brand img { width: 121.5px; height: auto; }

.nav {
  display: flex;
  align-items: stretch;
}
.nav__link {
  height: 116px;
  padding: 46px 20px 0;
  color: var(--color-plum);
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 700;
  transition: border-color .2s;
}
.nav__link:hover { border-bottom: 4px solid var(--color-thistle-medium); }
.nav__link.is-current { border-bottom: 4px solid var(--color-pink); }
.nav__link--highlight { color: #000; }

/* Hamburger toggle (hidden on desktop, shown ≤991px) */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 60px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  background-color: var(--color-thistle-medium);
  transition: transform .2s;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -8px; left: 0; }
.nav-toggle__bars::after { position: absolute; top: 8px; left: 0; }

/* -----------------------------------------------------------------------------
   6. Hero (home)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: 72px;
  overflow: hidden;
}
.hero__bg-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 56%;
  background-color: var(--color-thistle-dark);
}
.hero__bg-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 44%;
  background-color: var(--color-pink);
}
.hero__stage {
  position: relative;
  margin-bottom: 70px;
}
.hero__inner { display: flex; }
.hero__image {
  width: 70%;
  height: 675px;
  position: relative;
  right: -65px;
  background: url("../images/consulting.jpg") center / cover no-repeat;
}
.hero__panel {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  width: 35%;
  max-width: 440px;
  height: 450px;
  margin-top: 110px;
  padding: 0 40px;
  background-color: var(--color-plum);
}
.hero__title {
  color: #fff;
  font-family: var(--font-display);
  font-size: 65px;
  font-weight: 400;
  line-height: 55px;
}
.hero__title span { font-weight: 700; }

/* Underlined uppercase text link (hero CTA) */
.link-underline {
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 2px solid #fff;
  color: #fff;
  font-family: var(--font-roboto);
  font-size: 13.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: opacity .2s;
}
.link-underline:hover { opacity: .8; }

/* -----------------------------------------------------------------------------
   7. Intro + work cards (home)
   -------------------------------------------------------------------------- */
.intro-head {
  display: block;
  width: 65%;
  max-width: 820px;
  margin: 0 auto;
  color: var(--color-accent);
  font-family: var(--font-roboto);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-align: center;
  text-transform: uppercase;
}

/* Small serif uppercase label used across sections */
.eyebrow {
  margin-bottom: 10px;
  color: var(--color-accent);
  font-family: var(--font-serif);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.eyebrow--white { color: #fff; }

/* Long-form intro paragraph */
.lead {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 38px;
  letter-spacing: 0;
  text-transform: none;
}

.card-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.work-card {
  width: 20%;
  margin-right: 3%;
  background-color: var(--color-thistle-medium);
}
.work-card__media {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.work-card__img { transition: transform .2s; }
.work-card__img:hover { transform: scale(1.05); }
.work-card__body {
  padding: 23px;
  background-color: var(--color-thistle-medium);
}
.work-card__title {
  color: #fff;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 400;
  line-height: 30px;
  transition: opacity .2s;
}
.work-card__title:hover { opacity: .8; }
.work-card__title span { font-weight: 700; }
.work-card__more {
  color: #fff;
  font-family: var(--font-serif);
  font-size: 19px;
  font-style: italic;
  font-weight: 600;
}

/* -----------------------------------------------------------------------------
   8. Role banners (overlapping panel + photo)
   -------------------------------------------------------------------------- */
.band__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.band__inner--reverse { flex-direction: row-reverse; }

/* Photo that drives the band height */
.band__photo {
  position: relative;
  left: 135px;
  display: inline-block;
  width: 44%;
  min-width: 540px;
  height: 675px;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.band__photo--left { left: -135px; }

/* Individual photo images (kept as modifiers so markup stays declarative) */
.band__photo--pm { background-image: url("../images/profile-photo-1.jpg"); }
.band__photo--wedding { background-image: url("../images/wedding-5.jpg"); }
.band__photo--private {
  background-image: url("../images/qwe4rgsertherthjerdfb-.jpg");
  margin-left: -85px;
}
.band__photo--org {
  background-image: url("../images/papa-closet-2.jpg");
  margin-right: -150px;
}
.band__photo--sleepy { background-image: url("../images/SleepyRidge.png"); }

/* Plum overlay panel holding the big title */
.band__panel {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 35%;
  max-width: 440px;
  height: 450px;
  margin-top: 110px;
  margin-right: 10%;
  padding: 0 4% 0 5%;
  background-color: var(--color-plum);
}
.band__panel--left {
  right: auto;
  inset: 0 auto 0 0;
  max-width: 800px;
  margin-left: 10%;
  margin-right: 0;
}
.band__panel--wide { width: 40%; max-width: 800px; margin-right: 5%; }
.band__panel--wide.band__panel--x4 { width: 43%; }
.band__panel--org { width: 35%; }
.band__panel--org.band__panel--left {
  width: 60%;
  max-width: 590px;
  margin-left: 5%;
}

.band__title {
  color: #fff;
  font-family: var(--font-display);
  font-size: 65px;
  font-weight: 700;
  line-height: 55px;
}
.band__title--light span { font-weight: 400; }

/* Decorative underline beneath a title */
.band__rule {
  width: 100%;
  height: 2px;
  background-color: #fff;
}

/* -----------------------------------------------------------------------------
   9. Project detail rows
   -------------------------------------------------------------------------- */
/* Tall section wrappers that provide the positioning context for the
   overlapping role-banner panels above them. */
.section--wedding { margin-bottom: 73px; }
.section--private { }

/* Optional frame wrapper (was Webflow's "top-border _40") that caps height */
.detail-frame { margin-top: 40px; max-height: 850px; }

/* Divider row under a project write-up */
.detail {
  padding-bottom: 100px;
  border-bottom: 1px solid var(--color-thistle-light);
}
.detail--flush { padding-bottom: 0; }
.detail__cols {
  display: flex;
  flex-wrap: wrap;
  height: 850px;
}
.detail__col {
  display: grid;
  grid-template-rows: auto auto;
  grid-auto-columns: 1fr;
  place-items: center;
  gap: 16px;
  width: 50%;
  height: 100%;
}
.detail__col--rows { grid-template-rows: 1fr .5fr; }
.detail__col--media {
  display: grid;
  grid-template-rows: 1fr .25fr;
  grid-auto-columns: 1fr;
  gap: 16px;
  width: 50%;
  margin: 0 auto;
}
.detail__text { width: 80%; }

.prose {
  font-family: var(--font-display);
  font-weight: 400;
}
.prose--sized { font-size: 20px; }

/* Framed image */
.framed { border: 17px solid var(--color-pink); }
.framed--sm { max-width: 80%; margin: 0 auto; }

/* Zoomable (lightbox) links */
.zoom { cursor: zoom-in; }
.zoom--wheel { margin: auto auto auto 95px; }
.zoom--center { margin: 0 auto; }
.zoom--pull { margin-bottom: -130px; }

/* Styled inline callouts inside wedding copy */
.callout {
  color: var(--color-accent);
  font-family: var(--font-serif);
  font-size: 25px;
  font-weight: 600;
  text-transform: none;
}

/* -----------------------------------------------------------------------------
   10. Page hero (about / pricing)
   -------------------------------------------------------------------------- */
.page-hero {
  padding: 75px 0;
  overflow: hidden;
  background-color: var(--color-pink);
}
.page-hero__title {
  color: #fff;
  font-family: var(--font-display);
  font-size: 100px;
  font-weight: 700;
  line-height: 55px;
}

/* Large centred display heading ("Lacey Stevens", "Wedding Packages") */
.display-heading {
  margin-bottom: 100px;
  font-family: var(--font-display);
  font-size: 50px;
  font-weight: 700;
  line-height: 50px;
}

/* Inline emphasis utilities (were Webflow's numbered text-spans) */
.u-r { font-weight: 400; }
.u-b { font-weight: 700; }
.u-h { font-weight: 900; }
/* Original quirk: the first package's emphasis was heavy only on small screens */
.em-mobile { font-weight: 400; }
@media screen and (max-width: 479px) { .em-mobile { font-weight: 900; } }

/* -----------------------------------------------------------------------------
   11. About page
   -------------------------------------------------------------------------- */
.about-block {
  display: block;
  width: 65%;
  max-width: 820px;
  margin: 0 auto 100px;
  color: var(--color-accent);
  font-family: var(--font-roboto);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-align: center;
  text-transform: uppercase;
}
.about-block__label {
  margin-bottom: 10px;
  color: var(--color-accent);
  font-family: var(--font-serif);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.resume__label {
  position: relative;
  z-index: 2;
  margin-top: 100px;
  color: var(--color-accent);
  font-family: var(--font-serif);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.resume__img {
  position: relative;
  z-index: 1;
  margin-top: -76px;
}
.resume__link {
  position: relative;
  z-index: 2;
  display: block;
  margin: -43px 250px 248px;
  border: 2px solid var(--color-pink);
  border-radius: 20px;
  background-color: var(--color-pink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  transition: background-color .3s, color .3s;
}
.resume__link:hover { background-color: #fff; color: var(--color-pink); }

/* -----------------------------------------------------------------------------
   12. Pricing page
   -------------------------------------------------------------------------- */
.package-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
.package {
  padding: 56px 0;
  border-radius: 50px;
  background-color: var(--color-card);
  box-shadow: 0 0 10px #00000024;
}
.package__title {
  margin-bottom: 10px;
  color: var(--color-accent);
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.package__desc {
  max-width: 80%;
  margin: 0 auto 16px;
  color: #6c6c6c;
  font-family: var(--font-lato);
  font-size: 1rem;
  font-weight: 400;
  text-transform: none;
}
.package__pricing {
  max-width: 80%;
  margin: 0 auto;
  font-size: 1.2rem;
  text-transform: none;
}
.package__price {
  font-family: var(--font-lato);
  font-size: 2rem;
  font-weight: 400;
}

.cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 80vw;
  margin: 0 auto;
}
.cta-big {
  display: block;
  font-size: 4rem;
}

/* -----------------------------------------------------------------------------
   13. Contact section & form
   -------------------------------------------------------------------------- */
.contact {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 75px 0;
  overflow: hidden;
  background-color: var(--color-thistle-medium);
}
.contact__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.contact__info {
  width: 25%;
  margin-right: 5%;
}
.contact__label {
  color: #fff;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.contact__link {
  color: #fff;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
}
.contact__note {
  color: #fff;
  font-family: var(--font-display);
  font-size: 19px;
}
.contact__form-wrap { width: 51%; }

.contact-form {
  max-width: 600px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.field {
  width: 48%;
  height: 50px;
  margin-bottom: 30px;
  padding-left: 20px;
  border: 0;
  border-bottom: 1px solid #fff;
  background-color: transparent;
  color: #fff;
  font-family: var(--font-display);
  font-size: 16px;
}
.field::placeholder { color: #fff; }
.field:focus { outline: 0; }
.field--full { width: 100%; }
.field--textarea {
  width: 100%;
  height: auto;
  margin-bottom: 25px;
  padding: 20px 20px 41px;
  border: 1px solid #fff;
  font-family: var(--font-roboto);
}
.field--textarea::placeholder { font-family: var(--font-roboto); }

.btn-submit {
  min-width: 210px;
  height: 50px;
  border: 1px solid #fff;
  background-color: transparent;
  color: #fff;
  font-family: var(--font-roboto);
  font-size: 15px;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.btn-submit:hover { background-color: #fff; color: var(--color-accent); }

/* Invisible Turnstile: renders only a hidden input, so it should take no
   layout space in the flex form (otherwise it adds a dead gap above the
   submit button). */
.cf-turnstile {
  width: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
}

.form-status { width: 100%; }
.form-success {
  display: none;
  color: #fff;
  font-size: 22px;
}
.form-error {
  display: none;
  padding-bottom: 8px;
  font-size: 22px;
}
.form-status.is-success .form-success { display: block; }
.form-status.is-error .form-error { display: block; }

/* -----------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding-top: 40px;
  background-color: var(--color-thistle-dark);
}
.site-footer__row {
  display: flex;
  align-items: center;
  width: 91%;
  flex: 1;
}
.site-footer__brand {
  display: inline-block;
  transition: opacity .2s;
}
.site-footer__brand:hover { opacity: .8; }
.site-footer__brand img { width: 121.5px; height: auto; }
.site-footer__nav {
  width: 100%;
  margin-left: 6%;
}
.site-footer__link {
  margin-right: 35px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 21px;
}
.site-footer__notice {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 10px;
}
.site-footer__notice-box { padding-top: 9px; margin-bottom: 5px; }

.to-top {
  width: 32.6px;
  height: 30px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  background: var(--color-thistle) url("../images/flecha-hacia-arriba.svg") center / 13px no-repeat;
  transition: background-color .2s;
}
.to-top:hover { background-color: var(--color-accent); }

/* -----------------------------------------------------------------------------
   15. Utility page (404)
   -------------------------------------------------------------------------- */
.util {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 60vh;
}
.util__content {
  display: flex;
  flex-direction: column;
  width: 260px;
  text-align: center;
}

/* -----------------------------------------------------------------------------
   16. Scroll-reveal animation
   Content is visible by default; only when JS is present do we hide-then-reveal,
   so no-JS visitors always see everything.
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* Lightbox overlay (vanilla) */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background-color: rgba(30, 20, 30, .9);
}
.lightbox.is-open { display: flex; }
.lightbox__img {
  max-width: 100%;
  max-height: 92vh;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.lightbox__close {
  position: absolute;
  top: 18px;
  right: 24px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
}

/* -----------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .nav { display: none; }
  .nav.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    text-align: center;
  }
  .nav-toggle { display: flex; }
  .nav__link { height: 70px; padding-top: 20px; }

  .intro-head, .about-block { width: 80%; }
  .band__photo, .band__photo--org { min-width: 420px; }
  .contact__info { width: 35%; }
  .hero__inner { flex-direction: column; }
  .hero__panel,
  .band__panel,
  .band__panel--wide,
  .band__panel--org { width: 45%; margin-right: 5%; }
}

@media screen and (max-width: 767px) {
  .work-card { flex-direction: column; display: flex; }
  .band__photo {
    width: 80%;
    min-width: auto;
    left: 40px;
  }
  .band__photo--left { left: -40px; }
  .detail__col--media, .detail__text { width: 100%; }
  .framed { border-width: 10px; }
  .detail__col { justify-content: flex-start; width: 100%; }
  .detail__col--rows { justify-content: center; margin-bottom: 4%; }
  .site-footer__row { flex-direction: column; flex: 0 auto; width: 100%; }
  .site-footer__nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 4% 0 0;
  }
  .to-top { margin-top: 15px; }
}

@media screen and (max-width: 479px) {
  .brand { margin-left: 2%; }
  .section--thistle, .contact { margin-top: 0; }
  .work-card { width: auto; margin: 0 0 9%; }
  .band__photo {
    width: 100%;
    max-width: 440px;
    left: 0;
  }
  .band__photo--left { left: 0; }
  .band__photo--private { margin-left: 0; }
  .band__photo--org { width: 100%; max-width: 440px; margin-right: 0; left: 0; }
  .detail__cols { height: auto; }
  .detail__col--media { place-content: center; place-items: center; margin-top: -149px; }
  .framed--sm { margin-top: -215px; }
  .detail__col--rows { height: auto; }
  .contact__form-wrap { width: 100%; margin-top: 10%; }
  .contact__info { width: 100%; margin-right: 0; }
  .site-footer__row { width: 100%; }
  .site-footer__nav { flex-direction: column; align-items: center; }
  .site-footer__link { margin: 0 0 7%; }
  .site-footer__brand { margin-bottom: 7%; }
  .hero__image { width: 100%; right: 0; }
  .hero__inner { flex-direction: column; }
  .hero__panel,
  .band__panel {
    width: 100%;
    margin-top: 0;
    margin-right: 0;
    padding-left: 9%;
    position: relative;
  }
  .field { width: 100%; }
  .band__panel--left, .band__panel--org.band__panel--left { margin-left: 0; }
  .band__panel--wide.band__panel--x4 { width: 100%; }
  .band__panel--org.band__panel--left { width: 100%; max-width: 800px; }
  .zoom--wheel { margin-left: 43px; }
  .btn--tall-gap { border-radius: 35px; height: 75px; }
  .page-hero__title { font-size: 80px; }
  .display-heading { font-size: 3.5rem; }
  .section--wedding { height: 275vh; }
  .section--private { height: 200vh; }
  .cta-big { font-size: 3.5rem; }
}