/* ==========================================================================
   Clickory Stories — Weddings
   Hand-built conversion of the WordPress (Solene + Elementor) original.

   Contents
     1.  Design tokens
     2.  Reset & base
     3.  Layout helpers
     4.  Buttons
     5.  Header  (transparent + sticky)
     5b. Page title band
     6.  Mobile nav
     7.  Hero
     8.  Intro
     9.  Grey band
    10.  Films + video boxes
    11.  Instagram reels
    12.  Testimonials band (home)
    13.  Footer
    14.  Floating buttons
    15.  Reveal animation
    16.  Responsive
    17.  Photography page
    18.  Page banner   (every inner page)
    19.  Films page
    20.  Gallery grid  (pre-weddings)
    21.  Forms         (join us / contact)
    22.  Blog carousel
    23.  Testimonial carousel (home + contact)
    23b. Story page
    23c. Contact details
    23d. Story gallery + lightbox
    24.  Utilities
   ========================================================================== */


/* ===========================================================
   1. DESIGN TOKENS
   Values lifted verbatim from the original Elementor global kit.
   =========================================================== */
:root {
  /* palette */
  --c-primary:      #282828;
  --c-secondary:    #8f8f8f;
  --c-text:         #7a7a7a;
  --c-accent:       #ffffff;
  --c-light:        #f8f8f8;
  --c-grey:         #eaeaea;   /* photography + reels band */
  --c-ink:          #0a0a0a;
  --c-menu-dark:    #4d504a;
  --c-cream:        #f4f0ed;   /* page title band */

  /* Type — two families, three weights each, per the design system.
     Cormorant Garamond carries the voice: page titles, section headlines,
     couple names, testimonials (italic 300). Jost carries everything
     functional: body copy, navigation, buttons, labels, captions, forms.

     This replaces four unrelated faces the theme shipped — Pasajero for
     display, Cormorant beside Cormorant Garamond, Heebo for body, and
     Yesteryear for the single word "love" — which is what made the site
     read as busy. Two faces, so two tokens -- the theme's --f-heading and
     --f-serif tokens are gone with the faces they named. --f-heading was used both
     by the bare h1..h6 and by the buttons, which the system sets in
     different families. */
  --f-display:      'Cormorant Garamond', serif;
  --f-body:         'Jost', sans-serif;

  /* metrics */
  --container:      1140px;   /* Elementor boxed section */
  --container-wide: 1366px;   /* the intro row's wider container */
  --grid:           1100px;   /* the Solene theme grid (title band, page body) */
  --header-h:       130px;
  --sticky-h:       100px;
  --gutter:         0px;
}


/* ===========================================================
   2. RESET & BASE
   =========================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
}

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

a { color: var(--c-secondary); text-decoration: none; transition: color .3s ease; }
a:hover { color: var(--c-primary); }

p {
  margin: 0 0 1em;
  color: var(--c-ink);
  font-family: var(--f-body);
}

/* 300 is the system's heading weight. Without it a heading with no rule of
   its own keeps the browser's bold, which Cormorant Garamond has no cut
   for -- the browser then synthesises one. */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--c-primary);
  font-family: var(--f-display);
  font-weight: 300;
}

h2 {
  font-size: 40px;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Ink behind selected text, paper on top -- the strongest contrast the
   palette allows, and it reads the same over photographs and over paper. */
::selection   { background: var(--c-ink); color: #fff; }
::-moz-selection { background: var(--c-ink); color: #fff; }


/* ===========================================================
   3. LAYOUT HELPERS
   =========================================================== */
/* Elementor's container carries no horizontal padding of its own — the 10px
   on each column (see .e-col below) is what forms the gutter. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }

/* Elementor's spacer widget, reproduced as a one-liner. */
.spacer { height: var(--spacer, 50px); }

/* Elementor gives every populated column 10px of padding on all four sides
   ("default column gap") and 20px of bottom margin to every widget that is
   not the last in its column. Both drive the whole page's rhythm, so they are
   reproduced here rather than hard-coded into each section. (.e-gap lives at
   the very bottom of this file so it always wins over a section's own margin.) */
.e-col { padding: 10px; }

.align-center { text-align: center; }

.site-content {
  position: relative;
  z-index: 100;
  background: #fff;
}

/* "content is behind header" — the hero slides up under the transparent bar */
.content-behind-header .site-content { margin-top: calc(var(--header-h) * -1); }


/* ===========================================================
   4. BUTTONS
   =========================================================== */
.btn {
  display: inline-block;
  padding: 20px 40px;
  border: 1px solid var(--c-primary);
  background: #fff;
  color: var(--c-primary);
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1.3px;
  line-height: 1;
  text-transform: uppercase;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.btn:hover,
.btn:focus-visible { background: var(--c-primary); color: #fff; }

/* The two SEE MORE buttons. They inherit .btn's sans -- the system sets every
   button in Jost -- and step down from 22px, which was a size chosen for the
   serif and shouts in a geometric sans at the same measure. */
.btn--pill {
  border-radius: 31px;
  font-size: 15px;
}


/* ===========================================================
   5. HEADER
   The original renders two bars: a transparent one over the hero, and a
   white "sticky" one that slides in from above past 1300px of scroll.
   =========================================================== */
.page-header {
  position: relative;
  z-index: 110;
  width: 100%;
}

.menu-area {
  position: relative;
  height: var(--header-h);
  background: transparent;
}

.header-inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding-inline: 40px;
}

.header-left,
.header-right { flex: 0 0 auto; z-index: 2; }

/* The nav sits at the right-hand end of the bar. It is a flex item taking the
   free space with margin-left:auto, so only one thing in the row may claim
   that space -- .header-right gets it back below 1024px, where the nav is
   hidden and the burger is the only thing left to push right. */
.header-center {
  margin-left: auto;
  height: 100%;
  text-align: right;
  z-index: 1;
}

/* --- logo ------------------------------------------------- */
.logo {
  position: relative;
  display: inline-block;
  vertical-align: top;
  height: 72px;
  max-width: 100%;
}
.logo img {
  display: block;
  height: 100%;
  width: auto;
  transition: opacity .2s ease;
}
/* The two marks are stacked by pulling the second one up a full line rather
   than by absolute positioning — the first image has to stay in flow or the
   anchor collapses to zero width and neither logo paints. */
.menu-area .logo .logo-dark  { opacity: 1; }
.menu-area .logo .logo-light { opacity: 0; transform: translateY(-100%); }

.light-header .menu-area .logo .logo-dark  { opacity: 0; }
.light-header .menu-area .logo .logo-light { opacity: 1; }

.sticky-header .logo { height: 70px; }

/* --- main menu -------------------------------------------- */
.main-menu {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.main-menu > ul {
  display: flex;
  align-items: center;
  height: 100%;
}
.main-menu > ul > li { display: flex; align-items: center; height: 100%; }

/* Wider tracking buys legibility at small sizes but costs width, and with
   six items there is not much width to spare -- so the size goes up and the
   tracking comes back a little to pay for it. */
.main-menu > ul > li > a {
  position: relative;
  display: inline-block;
  padding: 0 20px;
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .3s ease;
}

/* the underline that wipes in from the right on hover */
/* flush with the container edge, rather than one item's padding short of it */
.main-menu > ul > li:last-child > a { padding-right: 0; }

.main-menu .item-text { position: relative; display: inline-block; }
.main-menu .item-text::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 2px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width .4s ease;
}
.main-menu > ul > li:hover .item-text::before,
.main-menu > ul > li.is-active > a .item-text::before {
  left: 0;
  right: auto;
  width: 100%;
}

/* over the hero everything is white */
.light-header .menu-area .main-menu > ul > li > a { color: #fff; }

/* --- sticky bar ------------------------------------------- */
.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: var(--sticky-h);
  background: #fff;
  border-bottom: 1px solid #e1e1e1;
  transform: translateY(-100%);
  transition: transform .6s ease;
  -webkit-backface-visibility: hidden;
}
.sticky-header.header-appear { transform: translateY(0); }
.sticky-header .main-menu > ul > li > a { color: var(--c-ink); }
.sticky-header .main-menu > ul > li > a:hover { color: #afafa5; }

/* --- hamburger -------------------------------------------- */
.mobile-toggle {
  display: none;
  width: 30px;
  height: 22px;
  padding: 0;
  position: relative;
}
.mobile-toggle span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--c-menu-dark);
  transition: transform .3s ease, opacity .3s ease, background-color .3s ease;
}
.mobile-toggle span:nth-child(1) { top: 0; }
.mobile-toggle span:nth-child(2) { top: 10px; }
.mobile-toggle span:nth-child(3) { top: 20px; }

.light-header .menu-area .mobile-toggle span { background: #fff; }

.mobile-toggle.is-open span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.mobile-toggle.is-open span:nth-child(2) { opacity: 0; }
.mobile-toggle.is-open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }


/* --- inner pages: one solid white bar, stuck to the top ----
   The original makes .eltdf-fixed-wrapper `position:fixed` as soon as
   scrollTop > 0 and pads the header to compensate; position:sticky is the
   same result without the compensation. */
.page-header--solid {
  position: sticky;
  top: 0;
  background: #fff;
}
.page-header--solid .menu-area { background: #fff; }


/* ===========================================================
   5b. PAGE TITLE BAND
   The theme's title area: 240px of cream with the page name set in white,
   which is why it reads as a very faint watermark.
   =========================================================== */
.grid {
  width: 100%;
  max-width: var(--grid);
  margin-inline: auto;
  padding-inline: var(--gutter);   /* 0 on desktop, 15px on phones */
}

/* the theme's page body wrapper */
.theme-container {
  width: 100%;
  max-width: var(--grid);
  margin-inline: auto;
  /* --gutter is 0 on desktop and 15px on phones, where the content would
     otherwise run into both edges of the screen */
  padding: 80px var(--gutter);
}


/* ===========================================================
   6. MOBILE NAV
   =========================================================== */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 109;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 20, 20, .97);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.mobile-nav[hidden] { display: flex; }        /* JS drives visibility, not [hidden] */
.mobile-nav.is-open { opacity: 1; visibility: visible; }

.mobile-nav ul { text-align: center; }
.mobile-nav li { margin: 18px 0; }
.mobile-nav a {
  color: #fff;
  font-family: var(--f-body);
  font-size: 18px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.mobile-nav li.is-active a { text-decoration: underline; text-underline-offset: 6px; }


/* ===========================================================
   7. HERO
   Replaces the Slider Revolution module: one full-bleed looping video.
   Heights mirror the original's responsive grid (1240x900 → 480x720).
   =========================================================== */
.hero {
  position: relative;
  width: 100%;
  height: 900px;          /* fixed, exactly as the slider renders it */
  overflow: hidden;
  background: #000;
}

/* the slider's own responsive heights: 1240->900, 1024->768, 778->960, 480->720 */
@media (max-width: 1024px) { .hero { height: 768px; } }
@media (max-width:  778px) { .hero { height: 960px; } }
@media (max-width:  480px) { .hero { height: 720px; } }
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* ===========================================================
   8. INTRO
   Three columns: mono photo / script + copy / tinted portrait.
   The script image deliberately overhangs its column to the left.
   =========================================================== */
.intro-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.intro-col { position: relative; padding: 10px; }

.intro-col--left  { width: 30.164%; }
.intro-col--mid   { width: 36.168%; }
.intro-col--right { width: 33.668%; }

.intro-photo { width: 100%; }
.intro-photo--mono {
  margin: 148px auto 0;
  filter: saturate(0);
}
.intro-photo--tinted {
  margin-top: -42px;
  height: 100%;
  object-fit: cover;
  filter: saturate(0) hue-rotate(75deg);
}

.intro-script {
  position: absolute;
  top: 0;
  left: -300px;
  width: 744px;
  max-width: 744px;
}

/* The widget is set in Pasajero, but the theme styles bare <p> in Cormorant
   Garamond and an element selector beats inherited type — so the copy itself
   renders as a serif, exactly as it does on the original. */
.intro-text {
  margin-top: 174px;
  color: var(--c-primary);
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 400;
  /* The theme justified this column. Cormorant set tightly enough to carry
     it; Jost is wider and opens rivers at the same measure, and the system
     asks for body copy left-aligned anyway. */
  text-align: left;
}
.intro-text p {
  color: var(--c-ink);
  font-family: var(--f-body);
}
.intro-text p:last-child { margin-bottom: 0; }


/* ===========================================================
   9. GREY BAND  ("PHOTOGRAPHY")
   =========================================================== */
.band--grey { background: var(--c-grey); }

.band {
  display: flex;
  align-items: center;
  min-height: 147px;
}
/* Elementor's heading widget resets line-height to 1 — that reset drives the
   page's vertical rhythm, so every heading derived from one carries it. */
/* The home page's section headings -- Photography, Instagram reels. Set at
   the scale's display step and in 600, which is heavier than the design
   system's own 300/400 set: Cormorant Garamond is a light face by nature and
   400 does not read as bold at any size. The two extra weights are fetched
   for this and nothing else.

   Sentence case, not uppercase: the system allows uppercase only on the 12px
   label, and a serif headline set in caps loses the word shapes you read it
   by. */
.band-title {
  width: 100%;
  margin: 0;
  line-height: 1.1;
  color: #030303;
  font-family: var(--f-display);
  font-size: 56px;
  font-weight: 600;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
}


/* ===========================================================
   10. FILMS + VIDEO BOXES
   =========================================================== */
.section-lead {
  color: #000;
  line-height: 1.15;
  font-family: var(--f-display);
  font-size: 40px;
  font-weight: 300;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
}

/* 10px of column padding a side means 10px at the outer edges and 20px
   between neighbours — the original's column gap, reproduced with grid. */
.video-grid {
  display: grid;
  width: 100%;
  gap: 20px;
  padding: 10px;
}
.video-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* The theme gave this row 60px gutters inside 30/40px of padding, which left
   more grey around the reels than reel. On the 8px scale, and the tiles get
   the width back. */
.video-grid--5 {
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  padding: 0 10px;
}

/* every box is 9:16 portrait, exactly as the original widgets are configured */
.video-box {
  position: relative;
  aspect-ratio: 0.5625;
  overflow: hidden;
  background: #000;
}
.video-box iframe,
.video-box video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  inset: 0;
  background-position: 50%;
  background-size: cover;
  cursor: pointer;
  text-align: center;
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: .8;
  transition: opacity .5s ease;
}
/* Font Awesome's fa-play at font-size:100px — a 384x512 glyph on a 100px em. */
.play-btn svg {
  width: 75px;
  height: 100px;
  fill: #fff;
  filter: drop-shadow(1px 0 6px rgba(0, 0, 0, .3));
}
.video-overlay:hover .play-btn,
.video-overlay:focus-visible .play-btn { opacity: 1; }

/* two of the reels carry a very slightly smaller play glyph (98px) */
.video-box--lg-play .play-btn svg { width: 73.5px; height: 98px; }


/* ===========================================================
   11. INSTAGRAM REELS
   The section is a fixed 1165px tall with its content centred, which is
   what pushes the block well down inside the grey band.
   =========================================================== */
/* The theme fixed this band at 1165px tall and centred the block inside it,
   which left a deep empty margin above and below five videos that are only
   about 640px tall. It is now sized by its contents, with the same 80px
   step every other section on the page uses. */
.reels {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 80px;
}

.reels-top    { padding-top: 0; }
.reels-bottom { padding: 0 10px; }

/* full-bleed, so it stays on one line */
/* The supporting line under the headline, so it takes the scale's H3 step
   rather than sitting 4px off the heading above it -- at 36px against 40px
   the two read as one run-on sentence in two sizes. */
.reels-tagline {
  margin: 24px 0 0;
  padding-inline: 10px;
  color: var(--c-text);
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
}


/* ===========================================================
   13. FOOTER
   =========================================================== */
.footer-main {
  padding: 64px 0 40px;
  background: #000;
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.footer-col {
  width: 33.333%;
  padding: 10px;
}

/* --- follow us + socials ---------------------------------- */
.footer-follow {
  margin: 0 0 10px;
  line-height: 1;
  color: #fff;
  font-family: var(--f-body);
  font-size: 26px;
  font-weight: 300;
  text-align: center;
}

.social-list { text-align: center; }
.social-list li { display: inline-block; margin: 5px; }
.social-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  transition: background-color .3s ease;
}
.social-list a:hover { background: #000; }
.social-list svg { width: 20px; height: 20px; fill: currentColor; }

/* --- centre logo ------------------------------------------ */
.footer-col--logo { text-align: center; }
.footer-col--logo img {
  width: 100%;
  height: 285px;
  object-fit: cover;
  object-position: center;
}

/* --- contact list ----------------------------------------- */
.contact-list li + li { margin-top: 16px; }

.contact-list li > a,
.contact-list li {
  display: flex;
  align-items: flex-start;
  color: #fff;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: .06em;
}
.contact-list li > a { padding: 0; }
.contact-list li > a:hover .contact-text { color: var(--c-accent); }

.contact-icon {
  flex: 0 0 auto;
  padding-right: 5px;
  margin-right: 5px;
  line-height: 1.75;
}
/* the studio's second phone number repeats the row without the icon, so the
   blank keeps the two numbers aligned under one another */
.contact-icon:empty { width: 20px; }
.contact-icon svg {
  width: 20px;
  height: 20px;
  fill: #fff;
  transition: fill .3s ease;
}
.contact-text { color: #fff; transition: color .3s ease; }

/* --- copyright bar ---------------------------------------- */
.footer-bottom {
  padding: 5px 0;
  background: #050505;
}
.copyright {
  margin: 0;
  padding: 10px 0;
  line-height: 1;
  color: #fff;
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: 2px;
  text-align: center;
}


/* ===========================================================
   14. FLOATING BUTTONS
   =========================================================== */
.whatsapp-btn {
  position: fixed;
  right: 25px;
  bottom: 80px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  transition: transform .3s ease;
}
.whatsapp-btn:hover { transform: scale(1.07); }
.whatsapp-btn svg { width: 30px; height: 30px; fill: #fff; }

/* The button used to be a thin grey arrow on no ground at all, so over a
   photograph or any pale section it simply vanished. It is now a solid ink
   disc: it carries its own contrast whatever it is sitting on. */
.back-to-top {
  position: fixed;
  right: 25px;
  bottom: 25px;
  z-index: 10000;
  display: block;
  width: 46px;
  height: 46px;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.85);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2, .8, .3, 1),
              visibility 0s .35s;
}
.back-to-top.on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .3, 1);
}
.back-to-top > span {
  position: relative;
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #faf8f5;
  background: var(--c-ink);
  overflow: hidden;
  transition: background .3s ease, transform .3s ease;
}
.back-to-top:hover > span,
.back-to-top:focus-visible > span { background: #a98b66; transform: translateY(-3px); }
.back-to-top:focus-visible { outline: none; }
.back-to-top:focus-visible > span { box-shadow: 0 0 0 2px #faf8f5, 0 0 0 4px var(--c-ink); }
.back-to-top:active > span { transform: translateY(-1px); }

/* The ring turns with the pointer — a small confirmation that the control
   is live, and it keeps the flat disc from reading as a dead dot. */
.btt-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: .35;
  transform: rotate(-135deg);
  transition: opacity .3s ease, transform .6s cubic-bezier(.2, .8, .3, 1);
}
.back-to-top:hover .btt-ring { opacity: .8; transform: rotate(225deg); }
.btt-arrow {
  position: absolute;
  top: 13px;
  left: 13px;
  width: calc(100% - 26px);
  height: calc(100% - 26px);
}
.btt-arrow line { transition: transform .3s ease-out; }
.btt-arrow line:nth-of-type(1) { transform: translateY(0); }
.btt-arrow line:nth-of-type(2) { transform: translateY(100%); }
.back-to-top:hover .btt-arrow line:nth-of-type(1) { transform: translateY(-100%); }
.back-to-top:hover .btt-arrow line:nth-of-type(2) { transform: translateY(0); transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  .back-to-top,
  .back-to-top > span,
  .btt-ring,
  .btt-arrow line { transition-duration: .01ms; }
  .back-to-top { transform: none; }
}


/* ===========================================================
   15. REVEAL ANIMATION
   The original applies Elementor's fadeInUp to the two footer headings.
   =========================================================== */
.reveal {
  opacity: 0;
  transform: translate3d(0, 100%, 0);
}
.reveal.is-visible {
  animation: fadeInUp 1.25s both;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 100%, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; animation: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ===========================================================
   16. RESPONSIVE
   Breakpoints match the original (1024 / 767).
   =========================================================== */
@media (max-width: 1366px) {
  .intro-script { left: -200px; width: 620px; }
}

@media (max-width: 1200px) {
  .header-inner { padding-inline: 20px; }
  .main-menu > ul > li > a { padding: 0 13px; font-size: 15px; letter-spacing: .1em; }
}

@media (max-width: 1024px) {
  :root { --container: 1024px; }

  .header-center { display: none; }
  .header-right { margin-left: auto; }
  .mobile-toggle { display: block; }

  .intro-script { left: -140px; width: 491px; max-width: 491px; }
  .intro-photo--mono { margin-top: 90px; }
  .intro-text { margin-top: 120px; font-size: 16px; }

  .band-title { font-size: 44px; }
  .section-lead { font-size: 34px; }

  .video-grid--5 { grid-template-columns: repeat(3, 1fr); }
  .play-btn svg,
  .video-box--lg-play .play-btn svg { width: 64px; height: 64px; }

  .reels-tagline { font-size: 24px; }


  .footer-col--logo img { height: 200px; }
}

@media (max-width: 767px) {
  :root { --container: 767px; --header-h: 90px; --sticky-h: 70px; --gutter: 15px; }

  /* the intro stacks; the script image tucks back inside the flow */
  .intro-col--left,
  .intro-col--mid,
  .intro-col--right { width: 100%; }

  .intro-photo--mono { margin-top: 30px; }
  .intro-photo--tinted { margin-top: 30px; }

  .intro-script {
    position: relative;
    left: auto;
    width: 100%;
    max-width: 100%;
    margin-top: 30px;
  }
  .intro-text { margin-top: 30px; text-align: left; }

  .band { min-height: 110px; }
  .band-title { font-size: 34px; }
  .section-lead { font-size: 28px; }

  .video-grid--4,
  .video-grid--5 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .play-btn svg,
  .video-box--lg-play .play-btn svg { width: 48px; height: 48px; }

  .btn--pill { padding: 14px 30px; font-size: 14px; }

  .reels { padding-block: 40px; }
  /* The two words stack and centre. The width has to come off the *columns*
     — resetting only the headings leaves them centred inside 54%/46% boxes,
     which reads as off-centre. */
  .reels-tagline { margin-top: 16px; font-size: 20px; }


  .footer-main { padding: 40px 0 24px; }
  .footer-col { width: 100%; padding-block: 10px; }
  /* `cover` at this height slices the wordmark in half — show all of it */
  .footer-col--logo img { height: 160px; object-fit: contain; }
  .contact-list li,
  .contact-list li > a { justify-content: flex-start; }
  .copyright { line-height: 18px; }

  .whatsapp-btn { width: 48px; height: 48px; bottom: 76px; }
  .whatsapp-btn svg { width: 26px; height: 26px; }
}


/* ===========================================================
   17. PHOTOGRAPHY — collage backdrop + tile grid
   =========================================================== */

/* Full width by simply filling <main>; the 70/40 margins reproduce the padding
   of the .theme-container the original nests this section inside. */
.gallery-section {
  position: relative;
  width: 100%;
  margin-block: 80px;
  padding-bottom: 450px;
  background-image: url('../img/photography-collage.jpg');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: auto;          /* the collage is shown at its natural size */
}

.gallery-section__inner {
  display: flex;
  align-items: center;
  min-height: 1440px;
}

.gallery-col--edge { width: 15%; }
.gallery-col--main { width: 69.332%; margin-top: 200px; }

/* the white mount around the tiles */
.tile-grid {
  display: flex;
  flex-wrap: wrap;
  border: 20px solid #fff;
}

.tile {
  display: block;
  width: 50%;
  align-self: flex-start;   /* a short tile leaves the collage showing below */
}
.tile img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1024px) {
  .gallery-section { padding-bottom: 240px; background-size: cover; }
  .gallery-section__inner { min-height: 0; padding-block: 64px; }
  .gallery-col--edge { display: none; }
  .gallery-col--main { width: 100%; margin-top: 0; }
}

@media (max-width: 767px) {
  .theme-container { padding: 40px var(--gutter); }

  .gallery-section { padding-bottom: 120px; }
  .gallery-section__inner { padding-block: 32px; }
  .tile-grid { border-width: 10px; }
}


/* ===========================================================
   18. PAGE BANNER
   Join us / Blog / Contact open on a photographic band with a dark
   scrim and a breadcrumb, instead of the theme's cream title area.
   =========================================================== */
.page-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 300px;
  padding-block: 30px;
  /* the photograph itself is set inline, one per page */
  background-color: #4d504a;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
}
/* a story leads with its own photograph, so its banner gets more room */
.page-banner--tall { min-height: 420px; }
.page-banner--tall .page-banner__title { letter-spacing: 3px; }
/* the section's own 50%-black overlay */
.page-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #000;
  opacity: .5;
}
.page-banner__inner { position: relative; width: 100%; }

/* Sentence case, set in the page's own data -- the theme lower-cased every
   banner title, which turned proper nouns like a couple's names into
   something that read as a typo. */
.page-banner__title {
  margin: 0;
  color: #fff;
  font-family: var(--f-display);
  font-size: 56px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 2.8px;
  text-transform: none;
}

/* the 20px below the title is the heading widget's own bottom margin */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
/* Jost, not the serif: this is navigation, and the design system puts
   everything you can click in the sans face. */
.breadcrumb li {
  display: flex;
  align-items: center;
  margin-inline: 4.5px;
  color: #fff;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: .08em;
  text-transform: none;
}
.breadcrumb a { color: #fff; }
.breadcrumb a:hover { color: rgba(255, 255, 255, .7); }
.breadcrumb svg { width: 14px; height: 14px; margin-right: 8px; fill: #fff; }

/* The theme wraps page content in 70px/40px of vertical padding. .theme-container
   also caps the width; .page-body keeps the padding but lets a section run edge
   to edge, which is what Elementor's "stretched" sections do. */
.page-body { width: 100%; padding-block: 80px; }


/* ===========================================================
   19. FILMS PAGE
   A 16:9 showreel, then two rows of category cards. Every image is a
   fixed 400px tall and cropped; one corner is rounded to 150px and the
   rounded corner travels around the row, which is what gives the two
   rows their rhythm.
   =========================================================== */
.film-reel { width: 100%; }
.film-reel video {
  display: block;
  width: 100%;
  aspect-ratio: 1.77777;
  object-fit: cover;
  background: #000;
}

.film-row { display: flex; flex-wrap: wrap; width: 100%; }
.film-cell { padding: 10px; }                 /* Elementor's column padding */
.film-row--2 .film-cell { width: 50%; }
.film-row--3 .film-cell:nth-child(1) { width: 35%; }
.film-row--3 .film-cell:nth-child(2) { width: 24.333%; }
.film-row--3 .film-cell:nth-child(3) { width: 40.667%; }

.film-card { display: block; margin: 0; color: inherit; }
.film-card img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center center;
}
/* the image widget is not last in its column, so it carries 20px below it */
.film-card figcaption {
  margin: 20px 0 0;
  color: var(--c-primary);
  font-family: var(--f-display);
  font-size: 40px;
  line-height: 1;
  text-align: center;
}
.film-card figcaption a { color: inherit; }
.film-card figcaption a:hover { color: var(--c-secondary); }

.film-card--tl img { border-radius: 150px 0 0 0; object-position: center right; }
.film-card--tr img { border-radius: 0 150px 0 0; object-position: bottom center; }
.film-card--bl img { border-radius: 0 0 0 150px; }
.film-card--br img { border-radius: 0 0 150px 0; }


/* --- one category: the films themselves --------------------
   The studio's own category pages tile the films two to a row, edge to edge
   and with nothing between them, so the films are the page. Ours did the
   opposite -- small posters inside a 1140 column with a caption under each --
   which left the page mostly white and the films looking like thumbnails.

   No captions: every poster carries the couple's name as artwork, exactly as
   the pre-wedding reels do, so a caption underneath only says it twice. The
   name is still on the control for a screen reader. */
.film-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  width: 100%;
}
.film-item { margin: 0; }
.film-item .video-box { aspect-ratio: 16 / 9; }
/* the glyph is sized for the home page's tall reels; a landscape poster is
   half the height and wants a smaller mark on it */
.film-item .play-btn svg { width: 56px; height: 75px; }


/* ===========================================================
   20. GALLERY GRID  (pre-weddings)
   Portrait 9:16 cards that zoom gently under the cursor.
   =========================================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.gallery-card {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
}
.gallery-card img {
  width: 100%;
  aspect-ratio: 0.5625;          /* 9:16, the reels' native shape */
  object-fit: cover;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
/* Every frame already carries the couple's name as artwork, so there is no
   caption to reveal — the zoom is the whole hover treatment. */
.gallery-card:hover img,
.gallery-card:focus-visible img { transform: scale(1.06); }

/* --- the linked variant (weddings) -------------------------
   The studio's own gallery is a plain grid of photographs with nothing
   written on it. Ours needs the couple's name somewhere -- unlike a reel
   frame, a wedding photograph does not carry it as artwork -- so the name
   arrives under the cursor, the same treatment the blog cards use, and the
   grid at rest is exactly the photographs. */
.gallery-card--link img { aspect-ratio: 3 / 4; }
.gallery-card--link a { display: block; color: inherit; }
.gallery-card__name {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8%;
  background: rgba(248, 246, 244, .93);
  color: var(--c-primary);
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  opacity: 0;
  transition: opacity .4s ease-out;
}
.gallery-card--link:hover .gallery-card__name,
.gallery-card--link a:focus-visible .gallery-card__name { opacity: 1; }

/* A touch screen has no hover, so the name would never appear. */
@media (hover: none) {
  .gallery-card__name {
    inset: auto 0 0 0;
    padding: 40px 8% 12px;
    background: linear-gradient(rgba(10, 10, 10, 0), rgba(10, 10, 10, .72));
    color: #fff;
    font-size: 18px;
    opacity: 1;
  }
}


/* ===========================================================
   21. FORMS
   The original ran Contact Form 7 here and a third-party embed on the
   contact page. Both are replaced by one hand-built form; the
   validation and delivery live in includes/form.php.
   =========================================================== */
.form-panel { padding: 48px 32px 32px; background: #f5f0ed; }

.form-intro { margin-bottom: 32px; text-align: center; }
.form-intro img { width: 16%; margin: 0 auto -20px; }
.form-intro h2 {
  margin: 0 0 2px;
  color: var(--c-primary);
  font-family: var(--f-display);
  font-size: 40px;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: normal;
  text-transform: none;
}
.form-intro p {
  margin: 0;
  color: var(--c-primary);
  font-family: var(--f-display);
  font-size: 20px;
}

.site-form { padding: 6%; background: #fff; }

.site-form label {
  display: block;
  margin-bottom: 6px;
  color: var(--c-primary);
  font-family: var(--f-body);
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.field { margin-bottom: 22px; }

.site-form input,
.site-form select,
.site-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd8d3;
  border-radius: 0;
  background: #fff;
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: 16px;
  transition: border-color .25s ease;
}
.site-form textarea { min-height: 130px; resize: vertical; }
.site-form input:focus,
.site-form select:focus,
.site-form textarea:focus { border-color: var(--c-primary); outline: none; }

.site-form .is-invalid { border-color: #b3413a; }
.field-error { display: block; margin-top: 6px; color: #b3413a; font-size: 13px; }

/* honeypot — moved off-screen rather than display:none, which some bots skip */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  margin-bottom: 24px;
  padding: 14px 16px;
  border-left: 3px solid var(--c-primary);
  background: #f5f0ed;
  font-family: var(--f-body);
  font-size: 15px;
}
.form-note--bad { border-left-color: #b3413a; }

.form-actions { text-align: center; }

/* two-up rows where the fields are short */
.field-row { display: flex; flex-wrap: wrap; gap: 0 22px; }
.field-row > .field { flex: 1 1 240px; }


/* ===========================================================
   22. BLOG CAROUSEL
   Owl's "centered" mode: half-width slides with the middle one framed,
   its overlay carrying the post's meta, title and Read More.
   =========================================================== */
.post-carousel { position: relative; overflow: hidden; }

.post-track {
  display: flex;
  will-change: transform;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.post-track.no-anim { transition: none; }

.post-slide {
  flex: 0 0 50%;
  padding-inline: 15px;        /* 30px between neighbouring cards */
}

.post-card {
  position: relative;
  display: block;
  overflow: hidden;
}
.post-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.post-card__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 5%;
  /* light, so the couple's name reads in the site's own ink rather than
     white-on-grey over the photograph */
  background: rgba(248, 246, 244, .93);
  color: var(--c-primary);
  text-align: center;
  opacity: 0;
  transition: opacity .4s ease-out;
}
/* The card is the photograph. The words arrive only under the cursor —
   before, the centred slide sat permanently behind a grey wash. */
.post-card:hover .post-card__body,
.post-card:focus-visible .post-card__body { opacity: 1; }

.post-meta {
  margin-bottom: 2px;
  font-family: var(--f-body);
  font-size: 12px;
  line-height: 24px;
}
.post-meta span:not(:last-child)::after { content: '/'; margin: 0 6px 0 8px; }

.post-title {
  margin: 0;
  color: var(--c-primary);
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 1px;
  text-transform: none;
}
.post-more {
  margin-top: 15px;
  color: var(--c-primary);
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.post-card:hover .post-more { color: var(--c-text); }

/* --- slider chrome, shared with the testimonial carousel -- */
.slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  margin-top: 26px;
}
.slider-nav button {
  display: flex;
  align-items: center;
  padding: 6px;
  color: #84847c;
  transition: color .3s ease;
}
.slider-nav button:hover { color: var(--c-primary); }
.slider-nav svg { width: 46px; height: 12px; stroke: currentColor; stroke-width: 1.5; fill: none; }

.slider-count {
  min-width: 70px;
  color: #84847c;
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .1em;
  text-align: center;
}


/* ===========================================================
   23c. TESTIMONIAL CAROUSEL  (contact)
   The arrangement the live contact page uses: a half-width photograph
   with a dark quote panel overlapping its right edge. On desktop the
   photograph wipes in from the left as its slide arrives.

   The home page runs the newer full-bleed section (23) instead, so the
   two never appear together and their class prefixes are kept apart.
   =========================================================== */
.tq-slider { position: relative; overflow: hidden; }

.tq-track { display: flex; transition: transform .6s cubic-bezier(.4, 0, .2, 1); }

.tq-slide {
  position: relative;
  flex: 0 0 100%;
  display: flex;
  align-items: center;
}

/* The theme puts the quote panel *behind* the photograph (it uses z-index:-1,
   which only works because of where its stacking context happens to fall).
   Lifting the photo instead gives the same result deterministically. */
.tq-photo {
  position: relative;
  z-index: 1;
  width: 50%;
  margin-top: 40px;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s cubic-bezier(.4, 0, .2, 1);
}
.tq-slide.is-active .tq-photo { clip-path: inset(0 0 0 0); }
.tq-photo img { width: 100%; height: auto; }

.tq-quote {
  position: absolute;
  top: 0;
  right: 0;
  /* a bare <blockquote> carries 40px of inline margin from the UA sheet,
     which held the panel 40px off both edges it is meant to meet */
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  width: 31%;
  height: calc(100% - 106px);
  padding: 20px 9.9% 20px 16.6%;
  background: var(--c-menu-dark);
  color: #fff;
  text-align: center;
  opacity: 0;
  transition: opacity .5s ease-out;
}
.tq-slide.is-active .tq-quote { opacity: 1; transition: opacity .7s ease-out .2s; }

.tq-name {
  margin: 0;
  color: #fff;
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 1px;
  text-transform: none;
}
/* Italic 300 Cormorant Garamond -- the weight the design system reserves
   for client quotes, the same as the home page's section uses. */
.tq-text {
  margin: 19px 0 0;
  color: #fff;
  font-family: var(--f-display);
  font-size: 19px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.6;
}


/* ===========================================================
   23b. STORY PAGE  (one wedding)
   =========================================================== */
.story { max-width: 760px; margin-inline: auto; padding-top: 24px; }
.story__para {
  margin: 0 0 24px;
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: 20px;
  line-height: 1.6;
}
/* the opening line carries the story, so it is set larger and centred */
.story__para--lead {
  margin-bottom: 24px;
  font-size: 25px;
  line-height: 1.5;
  text-align: center;
  letter-spacing: .01em;
}

/* --- the film ---------------------------------------------- */
.story__actions { margin: 40px 0 0; text-align: center; }
/* Advait & Ruchira has no narrative, so the film leads that page */
.story__actions:first-child { margin-top: 0; }

.film-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 16px 30px 16px 22px;
  border: 1px solid var(--c-grey);
  border-radius: 46px;
  background: #fff;
  text-align: left;
  transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.film-cta:hover,
.film-cta:focus-visible {
  border-color: var(--c-primary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .07);
}
.film-cta__badge { flex: 0 0 auto; display: block; }
.film-cta__badge svg { display: block; width: 42px; height: 30px; }
.film-cta__body { fill: #ff0000; transition: fill .3s ease; }
.film-cta__play { fill: #fff; }
.film-cta:hover .film-cta__body { fill: #cc0000; }

.film-cta__text { display: flex; flex-direction: column; gap: 3px; }
.film-cta__title {
  color: var(--c-primary);
  font-family: var(--f-body);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 1.2px;
  line-height: 1.2;
  text-transform: uppercase;
}
.film-cta__meta {
  color: var(--c-secondary);
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* --- credits ----------------------------------------------- */
.story__credits { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--c-grey); }
/* Advait & Ruchira has no narrative on the original, so the credits lead —
   and a rule with nothing above it reads as a stray line. */
.story__credits:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.story__credits-title {
  margin: 0 0 24px;
  color: var(--c-secondary);
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .26em;
  text-align: center;
  text-transform: uppercase;
}
/* end-credit columns: they pair up on a wide screen and stack on a phone */
.story__credits-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 40px;
  margin: 0;
}
.story__credits-list > div { display: flex; flex-direction: column; gap: 5px; }
.story__credits-list dt {
  color: var(--c-secondary);
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.story__credits-list dd {
  margin: 0;
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: 19px;
  line-height: 1.3;
}

/* --- previous / next --------------------------------------- */
.story-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px 30px;
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--c-grey);
}
.story-nav__link { display: flex; flex-direction: column; gap: 5px; }
.story-nav__link--next { text-align: right; }
.story-nav__label {
  color: var(--c-secondary);
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.story-nav__name {
  color: var(--c-primary);
  font-family: var(--f-display);
  font-size: 22px;
  line-height: 1.2;
  transition: color .3s ease;
}
.story-nav__link:hover .story-nav__name { color: var(--c-text); }
.story-nav__all {
  color: var(--c-primary);
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--c-grey);
  padding-bottom: 4px;
  transition: border-color .3s ease;
}
.story-nav__all:hover { border-color: var(--c-primary); }

@media (max-width: 767px) {
  .story__para { font-size: 17px; }
  .story__para--lead { font-size: 21px; text-align: left; }
  .story__credits-list { grid-template-columns: 1fr; gap: 18px; }
  .film-cta { gap: 12px; padding: 13px 22px 13px 16px; }
  .film-cta__badge svg { width: 34px; height: 24px; }
  .film-cta__title { font-size: 15px; }

  .story-nav { grid-template-columns: 1fr; margin-top: 64px; }
  .story-nav__link--next { text-align: left; }
  .story-nav__all { justify-self: start; }
}


/* ===========================================================
   23c. CONTACT — the details beside the enquiry form
   =========================================================== */
.field-optional { color: var(--c-secondary); text-transform: none; letter-spacing: 0; }

.contact-direct {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 34px;
  margin-top: 26px;
  color: var(--c-primary);
  font-family: var(--f-body);
  font-size: 14px;
  letter-spacing: .04em;
  text-align: center;
}
.contact-direct a { color: var(--c-primary); }
.contact-direct a:hover { color: var(--c-secondary); }

/* the "testimonials" heading reuses the grey band's type, without the band */
.theme-container > .band-title { margin: 0; }


/* ===========================================================
   23d. STORY GALLERY + LIGHTBOX
   The theme's eltdf-grid-list / eltdf-three-columns / eltdf-normal-space:
   three equal columns, 30px apart, every frame at its own aspect ratio and
   aligned to the top of its row. Hovering scales the photograph by 1.04
   inside a clipped frame.

   The lightbox is ours — the original leaves the frames unclickable, which
   is a shame for a wedding gallery.
   =========================================================== */
.story-gallery-section { margin-top: 80px; }
.story-gallery-head { margin-bottom: 32px; text-align: center; }
.story-gallery-title {
  margin: 0;
  color: var(--c-primary);
  font-family: var(--f-display);
  font-size: 40px;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 1.5px;
  text-transform: none;
}
.story-gallery-hint {
  margin: 8px 0 0;
  color: var(--c-secondary);
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Masonry. A grid row is as tall as its tallest frame, so one portrait beside
   two landscapes left a hole under each of them; columns pack instead. They
   fill top to bottom, so the DOM order the lightbox counts is unchanged. */
.story-gallery {
  column-count: 3;
  column-gap: 30px;
}

.story-shot {
  display: block;
  width: 100%;
  margin-bottom: 24px;
  padding: 0;
  break-inside: avoid;     /* never split a photograph across two columns */
  overflow: hidden;        /* clips the zoom */
  background: none;
  cursor: pointer;
}
.story-shot img {
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform .3s ease-in-out;
}
.story-shot:hover img { transform: scale(1.04); }
.story-shot:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }

/* --- lightbox -------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  /* above the floating WhatsApp (9999) and back-to-top (10000) buttons —
     a modal has to cover everything, those included */
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 80px;
  background: rgba(10, 10, 10, .94);
  opacity: 0;
  visibility: hidden;
  /* visibility flips instantly on the way in — a visibility:hidden element
     cannot take focus, and the close button is focused as soon as the class
     lands — and is held back until the fade has finished on the way out. */
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.lightbox[hidden] { display: flex; }      /* JS drives visibility, not [hidden] */
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease, visibility 0s linear 0s;
}

.lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
}
.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity .25s ease;
}
.lightbox__stage img.is-ready { opacity: 1; }

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: #fff;
  opacity: .75;
  transition: opacity .2s ease;
}
.lightbox__close:hover,
.lightbox__nav:hover { opacity: 1; }
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; opacity: 1; }

.lightbox__close { top: 14px; right: 18px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 14px; }
.lightbox__nav--next { right: 14px; }

.lightbox svg { width: 30px; height: 30px; fill: currentColor; }
.lightbox__nav svg { width: 40px; height: 40px; }

.lightbox__count {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  margin: 0;
  color: rgba(255, 255, 255, .75);
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .1em;
  text-align: center;
}

@media (max-width: 1024px) {
  .story-gallery-section { margin-top: 64px; }
  .story-gallery { column-count: 2; column-gap: 20px; }
  .story-shot { margin-bottom: 16px; }
  .lightbox { padding: 60px 56px; }
}

@media (max-width: 767px) {
  .story-gallery-section { margin-top: 48px; }
  .story-gallery-title { font-size: 28px; }
  .story-gallery { column-count: 1; }
  .story-shot { margin-bottom: 16px; }

  .lightbox { padding: 56px 12px 46px; }
  .lightbox__nav { width: 40px; height: 40px; }
  .lightbox__nav svg { width: 30px; height: 30px; }
  .lightbox__nav--prev { left: 2px; }
  .lightbox__nav--next { right: 2px; }
}


/* ===========================================================
   16b. RESPONSIVE — inner pages
   Same 1024 / 767 breakpoints the original uses.
   =========================================================== */
@media (max-width: 1024px) {
  .page-banner { min-height: 250px; }
  .page-banner--tall { min-height: 340px; }
  .page-banner__title { font-size: 40px; }
  .page-banner--tall .page-banner__title { font-size: 40px; }

  .film-card img { height: 300px; }
  .film-card figcaption { font-size: 34px; }
  .film-card--tl img { border-radius: 100px 0 0 0; }
  .film-card--tr img { border-radius: 0 100px 0 0; }
  .film-card--bl img { border-radius: 0 0 0 100px; }
  .film-card--br img { border-radius: 0 0 100px 0; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); }

  /* the quote panel needs the full width once the photo stops being wide */
  /* stretch, not centre: the base rule centres the panel against the photo,
     which once stacked leaves it floating inset on both sides */
  .tq-slide { display: flex; flex-direction: column; align-items: stretch; }
  .tq-photo { width: 100%; margin-top: 0; clip-path: none; }
  .tq-quote {
    position: static;
    flex: 1;                 /* fill the slide, so a short quote leaves no gap */
    box-sizing: border-box;
    width: auto;
    height: auto;
    padding: 32px 24px;
    opacity: 1;
  }

  .form-panel { padding: 40px; }

  /* the couple list drops below the quote rather than beside it */
}

@media (max-width: 767px) {

  .tq-name { font-size: 22px; }
  .tq-text { font-size: 17px; }

  .page-banner { min-height: 180px; }
  .page-banner--tall { min-height: 260px; }
  .page-banner__title { font-size: 34px; }
  .page-banner--tall .page-banner__title { font-size: 34px; letter-spacing: 1.5px; }
  .breadcrumb { margin-top: 2px; }
  .breadcrumb li { font-size: 11px; }

  .page-body { padding-block: 40px; }

  /* the films rows stack, one card per row */
  .film-row--2 .film-cell,
  .film-row--3 .film-cell:nth-child(1),
  .film-row--3 .film-cell:nth-child(2),
  .film-row--3 .film-cell:nth-child(3) { width: 100%; }
  .film-card img { height: 260px; }
  .film-grid { grid-template-columns: 1fr; }
  .film-item .play-btn svg { width: 44px; height: 59px; }
  .film-card figcaption { font-size: 28px; }

  /* Two up, not one. A single column of 3:4 frames makes the weddings
     gallery six thousand pixels of scrolling; the pre-wedding reels are
     taller still. The names arrive on tap either way. */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .gallery-card--link figcaption { font-size: 17px; }

  .form-panel { padding: 16px; }
  .site-form { padding: 24px; }

  .post-slide { flex-basis: 100%; padding-inline: 8px; }
  .post-title { font-size: 22px; }
  /* one card at a time, so it always shows its own caption */
  .post-slide .post-card__body { opacity: 1; }

  .slider-nav { gap: 20px; margin-top: 18px; }
  .slider-nav svg { width: 34px; }
}


/* ===========================================================
   24. UTILITIES
   Last so they beat the section rules above.
   =========================================================== */

/* Readable by a screen reader and by search engines, invisible on screen.
   The home page uses it for its h1: every heading in that design is a section
   label, so there is nowhere to put the page's own name. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.e-gap { margin-bottom: 20px; }