/* Levoeu's brighter, white-led editorial palette. */
:root {
  --paper: #ffffff;
  --ink: #262626;
  --muted: #737373;
  --line: #e5e5e5;
  --accent: #a99e8c;
}

body,
.site-header,
.intro,
.stories,
.gallery-section,
.inquiry-dialog {
  background: #fff;
}

.menu-panel { background: #fff; }
.menu-inner > a:hover { color: var(--accent); }
.grid-intro::before { background: #dedede; }

.intro-copy h2 em,
.quote-band h2 em,
.gallery-heading h2 em,
.contact-copy h2 em,
.inquiry-dialog h2 em {
  color: var(--accent);
}

.quote-band {
  background: #fafafa;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
}

.contact {
  background: #fff;
  border-top: 1px solid #eeeeee;
}

footer {
  background: #fff;
  color: var(--ink);
  border-top: 1px solid #eeeeee;
}
.footer-logo img { filter: brightness(0); }
.footer-row { border-top-color: #e5e5e5; }

/* A light print finish on the temporary photos. */
.hero-panel img,
.feature-photo,
.story-image img,
.gallery-item img,
.contact-photo img {
  filter: brightness(1.1) contrast(.96) saturate(.86);
}
.story-image:hover img,
.gallery-item:hover img {
  filter: brightness(.96) contrast(.96) saturate(.86);
}
.hero-panel::after {
  background: linear-gradient(0deg, rgba(0,0,0,.32), transparent 31%);
}

.hero-count,
.scroll-link,
.hero-autoplay-toggle {
  background: rgba(255,255,255,.86);
  color: #262626;
  text-shadow: none;
  backdrop-filter: blur(8px);
}
.hero-count i { background: #262626; }
.hero-autoplay-toggle:hover,
.hero-autoplay-toggle:focus-visible { background: #fff; }

.sticky-frame { background: #e9e7e3; }
.story-image { background: #f2f2f2; }
.gallery-item { background: #f2f2f2; }

@media (max-width: 600px) {
  .quote-band { background: #fbfbfb; }
}
.story-image img { object-position: center 28%; }
.hero-panel { flex-basis: 25%; }
.hero-panel img { object-position: center 38%; }
@media (max-width: 900px) { .hero-panel { flex-basis: 50%; } }
@media (max-width: 600px) { .hero-panel { flex-basis: 100%; } }
/* Axioo-inspired single-image hero carousel */
.site-header { position:absolute; inset:0 0 auto; height:74px; background:linear-gradient(180deg,rgba(15,14,12,.34),transparent); color:#fff; z-index:30; }
.site-header .brand img { filter:brightness(0) invert(1); }
.site-header .header-note { color:#fff; }
.site-header .menu-toggle span { background:#fff; }
.hero { height:100svh; min-height:560px; margin-top:0; background:#292720; }
.hero-track { transition:transform 1.2s cubic-bezier(.22,1,.36,1); }
.hero-panel { position:relative; flex:0 0 100%; height:100%; isolation:isolate; overflow:hidden; background:#292720; }
.hero-panel::before { content:""; position:absolute; z-index:-2; inset:-24px; background-image:var(--hero-image); background-position:center; background-size:cover; filter:blur(24px) brightness(.57); transform:scale(1.06); }
.hero-panel::after { content:""; position:absolute; z-index:1; inset:0; opacity:1; background:linear-gradient(180deg,rgba(0,0,0,.16),transparent 24%,transparent 62%,rgba(0,0,0,.34)); pointer-events:none; }
.hero-panel img { position:relative; z-index:0; width:100%; height:100%; object-fit:contain; object-position:center; filter:none; transition:transform 5.5s ease; }
.hero-panel:hover img,.hero-panel:focus-visible img { transform:scale(1.025); }
.hero-panel span { z-index:2; left:20%; right:20%; bottom:112px; opacity:1; transform:none; text-align:center; color:#fff; font-size:9px; letter-spacing:.3em; text-shadow:0 1px 14px #000b; }
.hero-panel:hover span,.hero-panel:focus-visible span { opacity:1; transform:none; }
.hero-arrow { z-index:5; top:50%; width:66px; height:66px; padding:17px; border:1px solid rgba(255,255,255,.72); border-radius:50%; background:rgba(0,0,0,.12); color:#fff; }
.hero-arrow svg { width:30px; }
.hero-prev { left:2.5%; transform:translateY(-50%) rotate(180deg); }
.hero-next { right:2.5%; }
.hero-arrow:disabled { opacity:1; }
.hero-bottom { z-index:5; bottom:22px; left:3.4%; right:3.4%; pointer-events:none; color:#fff; }
.hero-status,.hero-pagination,.scroll-link { pointer-events:auto; }
.hero-count,.hero-autoplay-toggle,.scroll-link { background:rgba(15,15,14,.3); color:#fff; border:1px solid rgba(255,255,255,.55); backdrop-filter:blur(8px); text-shadow:none; }
.hero-count { padding:9px 12px; }
.hero-count i { background:#fff; }
.hero-autoplay-toggle { min-height:34px; }
.hero-autoplay-toggle:hover,.hero-autoplay-toggle:focus-visible { background:rgba(255,255,255,.2); }
.scroll-link { padding:8px 12px; }
.hero-pagination { display:flex; align-items:center; justify-content:center; gap:10px; position:absolute; left:50%; bottom:9px; transform:translateX(-50%); }
.hero-dot { display:block; width:11px; height:11px; border:1px solid rgba(255,255,255,.9); border-radius:50%; padding:0; background:transparent; }
.hero-dot.is-active { background:#fff; }
.hero-dot:focus-visible { outline:2px solid white; outline-offset:4px; }
@media(max-width:900px) { .hero-panel { flex-basis:100%; } }
@media(max-width:600px) {
  .site-header { height:70px; }
  .hero { height:100svh; min-height:520px; }
  .hero-panel { flex-basis:100%; }
  .hero-panel img { object-fit:contain; }
  .hero-panel span { left:12%; right:12%; bottom:124px; font-size:8px; }
  .hero-arrow { top:50%; width:46px; height:46px; padding:11px; }
  .hero-arrow svg { width:22px; }
  .hero-prev { left:3%; }
  .hero-next { right:3%; }
  .hero-bottom { bottom:13px; left:3%; right:3%; }
  .hero-pagination { gap:7px; bottom:5px; }
  .hero-dot { width:9px; height:9px; }
  .hero-autoplay-toggle { padding:0 7px; font-size:7px; }
  .scroll-link { font-size:7px; gap:6px; }
}
/* Preserve the horizontal multi-photo reel while filling the full viewport */
.hero { height:100svh; min-height:560px; }
.hero-panel { flex:0 0 25%; }
.hero-panel img { object-fit:cover; object-position:center 38%; }
.hero-panel::before { filter:blur(24px) brightness(.72); }
.hero-panel span { bottom:46px; }
.hero-prev { transform:translateY(-50%); }
.hero-prev svg { transform:rotate(180deg); }
.hero-arrow:hover svg { transform:scaleX(1.14); }
.hero-prev:hover svg { transform:rotate(180deg) scaleX(1.14); }
@media(max-width:900px) { .hero-panel { flex-basis:50%; } }
@media(max-width:600px) {
  .hero { height:100svh; min-height:520px; }
  .hero-panel { flex-basis:100%; }
  .hero-panel img { object-fit:cover; object-position:center 38%; }
  .hero-panel span { bottom:124px; }
}
/* Rotating service label in the hero header */
.header-note { display:flex; align-items:center; gap:12px; white-space:nowrap; }
.header-service-count { font-size:8px; letter-spacing:.14em; opacity:.7; font-variant-numeric:tabular-nums; }
.header-service-label { font-size:9px; letter-spacing:.22em; }
.header-note.is-changing .header-service-count,
.header-note.is-changing .header-service-label { animation:service-count-in .55s cubic-bezier(.22,1,.36,1) both; }
@keyframes service-count-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:900px) { .header-note { display:flex; margin-right:26px; } }
@media(max-width:600px) { .header-note { gap:7px; margin-right:14px; } .header-service-label { font-size:7px; letter-spacing:.12em; } .header-service-count { font-size:7px; } }
/* Per-letter rolling count-up for rotating service names */
.header-service-label { display:inline-flex; overflow:hidden; }
.service-letter { display:inline-block; }
.header-note.is-changing .header-service-label { animation:none; }
.header-note.is-changing .service-letter { animation:service-letter-roll .58s cubic-bezier(.18,.82,.25,1) both; animation-delay:calc(var(--letter-index) * 22ms); }
@keyframes service-letter-roll { from { opacity:0; transform:translateY(-115%); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .header-note.is-changing .service-letter,.header-note.is-changing .header-service-count { animation:none; } }
/* Calm crossfade between service labels */
.header-note > span { transition:opacity .38s ease, transform .38s ease; }
.header-note.is-changing > span { opacity:0; transform:translateY(5px); animation:none !important; }
.header-note.is-changing .service-letter { animation:none !important; }
/* Minimal, editorial testimonial carousel mockup */
.review-section { padding:clamp(88px,11vw,160px) 7%; background:#f7f6f3; color:#292823; }
.review-topline { max-width:1160px; margin:0 auto 35px; display:flex; align-items:center; gap:22px; }
.review-topline .eyebrow { margin:0; color:#65635d; }
.review-position { font-size:8px; letter-spacing:.19em; color:#77756e; }
.review-frame { max-width:1160px; min-height:430px; margin:auto; padding:48px 5.5%; border:1px solid #d7d4cc; display:grid; grid-template-columns:54px minmax(0,760px) 54px; justify-content:space-between; align-items:center; }
.review-content { text-align:center; transition:opacity .28s ease,transform .28s ease; }
.review-content.is-changing { opacity:0; transform:translateY(8px); }
.review-kicker { margin:0 0 23px; font-size:8px; font-weight:600; letter-spacing:.22em; color:#77756e; }
.review-content blockquote { margin:0 auto; max-width:760px; font:clamp(30px,4vw,54px)/1.17 var(--serif); letter-spacing:-.018em; }
.review-rating { margin-top:25px; color:#a88d5f; font-size:13px; letter-spacing:.24em; }
.review-author { display:grid; gap:8px; margin:25px 0 0; }
.review-author span:first-child { font:21px var(--serif); letter-spacing:.02em; }
.review-author span:last-child { font-size:8px; letter-spacing:.18em; color:#77756e; }
.review-arrow { width:42px; height:42px; border:1px solid #d7d4cc; border-radius:50%; background:transparent; color:#45433e; font-size:19px; transition:background .25s,color .25s,border-color .25s; }
.review-arrow:hover,.review-arrow:focus-visible { background:#292823; color:#fff; border-color:#292823; }
.review-pagination { display:flex; justify-content:center; gap:9px; margin:25px auto 0; }
.review-dot { width:6px; height:6px; padding:0; border:0; border-radius:50%; background:#cbc8c0; }
.review-dot.is-active { background:#292823; }
.review-dot:focus-visible { outline:2px solid #292823; outline-offset:4px; }
@media(max-width:700px) {
  .review-section { padding:80px 5%; }
  .review-topline { gap:12px; flex-wrap:wrap; margin-bottom:22px; }
  .review-topline .eyebrow { font-size:8px; }
  .review-frame { min-height:390px; padding:32px 13px; grid-template-columns:30px minmax(0,1fr) 30px; gap:5px; }
  .review-content blockquote { font-size:clamp(27px,8vw,38px); }
  .review-arrow { width:30px; height:30px; font-size:15px; }
  .review-kicker { font-size:7px; }
}

/* Seamless vertical roll: the next service enters as the current one leaves */
.header-note > span { opacity:1 !important; transform:none !important; }
.header-service-count,.header-service-label { position:relative; display:block; height:1.45em; line-height:1.45em; overflow:hidden; }
.header-service-count { flex:0 0 auto; min-width:2ch; }
.header-service-label { flex:0 1 auto; }
.header-service-count .service-current,.header-service-label .service-current,
.header-service-count .service-next,.header-service-label .service-next { position:absolute; left:0; top:0; display:block; white-space:nowrap; transition:transform .72s cubic-bezier(.22,1,.36,1); }
.header-service-count .service-next,.header-service-label .service-next { top:100%; }
.header-note.is-changing .service-current { transform:translateY(-105%); }
.header-note.is-changing .service-next { transform:translateY(-100%); }
/* Correct the previous-slide arrow direction */
.hero-prev svg { transform:none !important; }
.hero-prev:hover svg,.hero-prev:focus-visible svg { transform:scaleX(1.14) !important; }
/* Airy review layout: no card border and a clean, legible quote face */
.review-frame { min-height:410px; padding:42px 0; border:0; grid-template-columns:54px minmax(0,820px) 54px; }
.review-content blockquote { max-width:760px; font-family:var(--sans); font-size:clamp(21px,2.6vw,34px); font-weight:300; line-height:1.55; letter-spacing:.005em; }
.review-author span:first-child { font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.review-author span:last-child { font-size:8px; letter-spacing:.15em; }
.review-pagination { gap:7px; }
.review-dot { width:12px; height:2px; border-radius:0; transition:width .3s,background .3s; }
.review-dot.is-active { width:26px; }
@media(max-width:700px) {
  .review-frame { min-height:390px; padding:32px 0; grid-template-columns:30px minmax(0,1fr) 30px; }
  .review-content blockquote { font-size:clamp(19px,5.3vw,27px); line-height:1.55; }
  .review-author span:first-child { font-size:12px; }
  .review-pagination { gap:5px; }
  .review-dot { width:8px; }
  .review-dot.is-active { width:19px; }
}
/* Refined testimonial type scale and expressive couple name */
.review-content blockquote { max-width:700px; font-family:var(--sans); font-size:10px; font-weight:400; line-height:1.85; letter-spacing:.045em; }
.review-author { gap:8px; margin-top:22px; }
.review-author span:first-child { font-family:var(--serif); font-size:24px; font-weight:400; letter-spacing:0; text-transform:none; }
.review-author span:last-child { margin-top:2px; font-size:8px; }
@media(max-width:700px) {
  .review-content blockquote { font-size:10px; line-height:1.8; }
  .review-author span:first-child { font-size:22px; }
}
.review-content blockquote { max-width:500px; }
@media(max-width:700px) { .review-content blockquote { max-width:100%; } }
.review-content { transition:none; will-change:opacity,transform; }
/* Let the featured slide keep its headline; turn the story list into an image-only long gallery */
.stories-grid { padding:42px 7% 110px 2%; gap:30px 24px; }
.stories-grid .story-card { align-self:start; margin:0; cursor:pointer; }
.stories-grid .story-image { aspect-ratio:auto; overflow:hidden; background:#f3f1ed; }
.stories-grid .story-image img { width:100%; height:auto; object-fit:contain; transition:transform .9s cubic-bezier(.22,1,.36,1); }
.stories-grid .story-card:hover .story-image img { transform:scale(1.025); }
.stories-grid .story-card:focus-visible { outline:1px solid #777; outline-offset:5px; }
.stories-grid .story-card:focus-visible .story-image img { transform:scale(1.025); }
/* Keep the rotating service name visible inside its clipped roll container */
.header-service-label { width:180px; flex:0 0 180px; }
@media(max-width:600px) { .header-service-label { width:126px; flex:0 0 126px; } }
/* Full-screen featured story followed by a seamless, full-bleed photo gallery */
.stories { display:block; }
.stories-lead { height:100svh; }
.stories-lead .sticky-photo { position:relative; top:auto; width:100%; height:100svh; padding:0; }
.stories-lead .sticky-frame { width:100%; height:100%; }
.stories-grid { display:block; width:100%; padding:0; }
.stories-grid .story-card { display:block; width:100%; margin:0; padding:0; }
.stories-grid .story-image { display:block; width:100%; height:auto; aspect-ratio:auto; overflow:hidden; background:transparent; }
.stories-grid .story-image img { display:block; width:100%; height:auto; object-fit:contain; }
.stories-grid .story-card + .story-card { margin-top:0; }
@media(max-width:900px) {
  .stories-lead { height:100svh; }
  .stories-lead .sticky-photo { height:100svh; padding:0; }
}
@media(max-width:600px) {
  .stories-lead,.stories-lead .sticky-photo { height:100svh; }
  .stories-grid { padding:0; }
}
/* Restore the original split Featured Stories + photo gallery composition */
.stories { display:grid; grid-template-columns:48% 52%; align-items:stretch; }
.stories-lead { position:relative; height:auto; }
.stories-lead .sticky-photo { position:sticky; top:0; width:100%; height:100svh; padding:38px 6% 38px 8%; }
.stories-lead .sticky-frame { width:100%; height:100%; }
.stories-grid { display:block; width:auto; padding:38px 7% 90px 2%; columns:2; column-gap:24px; }
.stories-grid .story-card { display:block; width:100%; margin:0 0 24px; padding:0; break-inside:avoid; }
.stories-grid .story-image { display:block; width:100%; height:auto; aspect-ratio:auto; overflow:hidden; background:transparent; }
.stories-grid .story-image img { display:block; width:100%; height:auto; object-fit:contain; }
@media(max-width:900px) {
  .stories { display:block; }
  .stories-lead { height:78vh; }
  .stories-lead .sticky-photo { position:relative; height:78vh; padding:0; }
  .stories-grid { columns:2; padding:55px 6% 90px; column-gap:20px; }
}
@media(max-width:600px) {
  .stories-lead,.stories-lead .sticky-photo { height:72vh; }
  .stories-grid { columns:1; padding:35px 5% 75px; }
  .stories-grid .story-card { margin-bottom:20px; }
}
/* Portrait gallery thumbnails; the lightbox continues to use each full original image */
.stories-grid .story-image { aspect-ratio:4/5; overflow:hidden; }
.stories-grid .story-image img { width:100%; height:100%; object-fit:cover; object-position:center; }
@media(max-width:600px) {
  .stories-grid .story-image { aspect-ratio:4/5; }
  .stories-grid .story-image img { width:100%; height:100%; object-fit:cover; }
}
/* Reframe the chapel gallery crop so the couple sits clearly inside the portrait thumbnail */
.stories-grid .story-card[data-image="assets/feature-02.jpg"] .story-image img { object-position:85% center; }
.stories-grid .story-card[data-image="assets/gallery-07.jpg"] .story-image img { object-position:24% center; }
/* Animated signature intro */
.page-loader { animation:none; opacity:1; visibility:visible; transition:opacity .75s ease,visibility .75s ease; }
.page-loader.is-done { opacity:0; visibility:hidden; }
.page-loader .loader-video { display:block; width:min(420px,78vw); height:auto; margin:0 auto; object-fit:contain; }
.page-loader > span { margin-top:8px; }
@media(prefers-reduced-motion:reduce) { .page-loader { transition:none; } }
.gallery-outro { column-span:all; min-height:190px; margin-top:12px; border-top:1px solid #e4e2dd; display:flex; justify-content:center; align-items:center; }
.gallery-outro span { font:italic 30px/1.1 var(--serif); color:#514b43; }
@media(max-width:600px) { .gallery-outro { min-height:150px; } .gallery-outro span { font-size:26px; } }

/* Quiet moving image behind the beginning statement. */
.intro { position:relative; isolation:isolate; overflow:hidden; }
.intro-background-video { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; opacity:.25; pointer-events:none; }
.intro-index, .intro-copy { position:relative; z-index:1; }
@media(max-width:600px) { .intro-background-video { transform:scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .intro-background-video { display:block; } }


/* Photographer introduction added beneath the original approach copy */
.photographer-team { width:min(1040px,100%); margin:90px auto 0; text-align:left; }
.photographer-team .team-eyebrow { text-align:center; margin:0 0 12px; color:#77756e; }
.photographer-team > h3 { margin:0 0 38px; text-align:center; font:clamp(34px,4.2vw,58px)/1.05 var(--serif); font-weight:400; letter-spacing:-.02em; }
.photographer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px; }
.photographer-card { display:grid; grid-template-columns:minmax(135px, .82fr) 1fr; align-items:center; gap:24px; }
.photographer-portrait { overflow:hidden; background:#ebe8e1; }
.photographer-portrait img { width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 26%; }
.photographer-bio .eyebrow { margin:0 0 10px; color:#77756e; font-size:8px; }
.photographer-bio h4 { margin:0 0 12px; font:32px/1.1 var(--serif); font-weight:400; }
.photographer-bio > p:last-child { margin:0; color:#6e6c66; font-size:12px; line-height:1.8; text-align:left; }
@media(max-width:900px) { .photographer-grid { grid-template-columns:1fr; max-width:700px; margin:auto; gap:34px; } .photographer-card { grid-template-columns:minmax(180px,.8fr) 1fr; } }
@media(max-width:600px) { .photographer-team { margin-top:68px; } .photographer-team > h3 { margin-bottom:28px; font-size:38px; } .photographer-grid { gap:28px; } .photographer-card { grid-template-columns:40% 1fr; gap:16px; } .photographer-bio h4 { font-size:26px; } .photographer-bio > p:last-child { font-size:11px; line-height:1.65; } }

.inquiry-dialog select { width:100%; border:1px solid var(--line); background:#fff; padding:12px; color:var(--ink); border-radius:0; }
.inquiry-dialog label[hidden] { display:none !important; }
.inquiry-dialog select:invalid { color:#8a8983; }
.inquiry-dialog {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .42s ease, transform .42s cubic-bezier(.22, 1, .36, 1);
}
.inquiry-dialog.is-visible { opacity: 1; transform: translateY(0); }
.inquiry-dialog::backdrop { background: rgba(18, 18, 16, 0); transition: background-color .42s ease; }
.inquiry-dialog.is-visible::backdrop { background: rgba(18, 18, 16, .85); }


/* Quiet, editorial social links */
.floating-socials { position:fixed; right:28px; bottom:94px; z-index:45; display:flex; align-items:center; gap:9px; }
.instagram-float,.whatsapp-float { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:18px; padding:0 19px; border:1px solid #26251f; border-radius:999px; box-shadow:0 8px 24px rgba(26,24,20,.12); transition:transform .35s cubic-bezier(.22,1,.36,1),background .3s ease,color .3s ease,box-shadow .3s ease; }
.instagram-float { color:#26251f; background:rgba(248,247,244,.94); border-color:rgba(38,37,31,.22); }
.instagram-float span,.whatsapp-float span { font-size:9px; font-weight:500; letter-spacing:.17em; white-space:nowrap; }
.instagram-float i,.whatsapp-float i { font-size:15px; font-style:normal; line-height:1; transition:transform .3s ease; }
.instagram-float:hover,.instagram-float:focus-visible,.whatsapp-float:hover,.whatsapp-float:focus-visible { transform:translateY(-3px); background:#f8f7f4; color:#26251f; box-shadow:0 10px 28px rgba(26,24,20,.16); }
.instagram-float:hover i,.instagram-float:focus-visible i,.whatsapp-float:hover i,.whatsapp-float:focus-visible i { transform:translate(2px,-2px); }
.instagram-float:focus-visible,.whatsapp-float:focus-visible { outline:2px solid #a99e8c; outline-offset:4px; }
.whatsapp-float { color:#fff; background:#26251f; }
@media(max-width:600px) { .floating-socials { right:14px; bottom:68px; gap:6px; } .instagram-float,.whatsapp-float { min-height:42px; gap:9px; padding:0 12px; } .instagram-float span,.whatsapp-float span { font-size:7px; letter-spacing:.12em; } .instagram-float i,.whatsapp-float i { font-size:13px; } }

.photographer-team { margin-top:0; }
.approach-eyebrow { width:min(1040px,100%); margin:0 auto 20px; font-size:9px; }
.quote-band h2 { font-size:clamp(46px,5vw,78px); }
@media(max-width:600px) { .approach-eyebrow { margin-bottom:16px; font-size:8px; } .quote-band h2 { font-size:clamp(40px,10vw,58px); } }

/* Destinations */
.destinations {
  padding: clamp(58px, 6.4vw, 102px) 7%;
  background: #f8f7f4;
}

.destination-group {
  max-width: 1280px;
  margin-inline: auto;
}

.destination-group + .destination-group {
  margin-top: clamp(38px, 4.6vw, 70px);
}

.destination-intro {
  max-width: 1280px;
  margin: 0 auto 32px;
  color: #625f57;
  font: clamp(19px, 2vw, 25px)/1.4 var(--serif);
}

.destination-group-label {
  margin: 0 0 18px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
  text-transform: uppercase;
}

.destination-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.65vw, 26px);
}

.destination-card {
  display: block;
  border-radius: 8px;
}

.destination-grid .destination-card.reveal { transition-delay: 0s; }
.destination-grid .destination-card.reveal:nth-child(2) { transition-delay: .12s; }
.destination-grid .destination-card.reveal:nth-child(3) { transition-delay: .24s; }
.destination-grid .destination-card.reveal:nth-child(4) { transition-delay: .36s; }

.destination-card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.destination-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 8px;
  background: #e9e4dc;
}

.destination-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20,19,17,.16);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.destination-quote-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 30px;
  background: rgba(25,25,23,.52);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 6px));
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
  backdrop-filter: blur(8px);
}

.destination-quote-overlay i {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}

.destination-card:is(:hover, :focus-visible) .destination-quote-overlay {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.destination-card:is(:hover, :focus-visible) .destination-photo::after { opacity: 1; }

.destination-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
}

.destination-card-caption {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 2px 0;
}

.destination-card-caption h3 {
  margin: 0 0 3px;
  font-size: clamp(14px, 1.35vw, 18px);
  font-weight: 500;
  line-height: 1.25;
}

.destination-card-caption p {
  margin: 0;
  color: #625f57;
  font-size: 12px;
  line-height: 1.55;
  max-width: 34ch;
}

.destination-arrow {
  color: #625f57;
  font-size: 16px;
  line-height: 1;
  transition: transform .25s ease;
}

.destination-card:is(:hover, :focus-visible) img {
  transform: scale(1.035);
}

.destination-card:is(:hover, :focus-visible) .destination-arrow {
  transform: translate(2px, -2px);
}

@media (max-width: 840px) {
  .destination-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 22px;
  }
}

@media (max-width: 600px) {
  .destinations {
    padding-inline: 5%;
  }

  .destination-group-label {
    margin-bottom: 14px;
  }

  .destination-card-caption {
    padding-top: 9px;
  }

  .destination-intro {
    margin-bottom: 24px;
  }

  .destination-quote-overlay {
    padding: 9px 13px;
    font-size: 8px;
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  .destination-photo::after { opacity: .35; }
}