/* Aloha Dreams Photography
   Spacing sits on the 8-point scale (4 for fine detail). Sizes are in rem so text scales with the visitor's setting.
   Colors and fonts come from the theme block the editor writes into the page. */

@font-face { font-family: "Corben"; src: url("../fonts/corben-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Caprasimo"; src: url("../fonts/caprasimo.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Federo"; src: url("../fonts/federo.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Mulish"; src: url("../fonts/mulish-var.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

:root {
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; --s10: 8rem;
  --r-s: .5rem; --r-m: 1rem; --r-l: 1.5rem; --r-full: 999rem;
  --section: clamp(var(--s7), 6.5vw, var(--s9));
  --head-gap: clamp(var(--s6), 3.5vw, var(--s7));
  --gutter: clamp(var(--s4), 5vw, var(--s8));
  --header: var(--s8);
  --t-small: .875rem; --t-body: clamp(1.0625rem, 1rem + .2vw, 1.125rem); --t-h3: 1.5rem;
  --t-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); --t-h1: clamp(2.5rem, 1.5rem + 4.5vw, 4.5rem);
  --shadow: 0 1px 2px rgb(45 80 80 / .06), 0 8px 24px rgb(45 80 80 / .08);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4c9.300-5 18.700-5 28 0s18.700 5 28 0' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  --c-link: color-mix(in srgb, var(--c-accent) 82%, #000);
}

@media (max-width: 767px) { :root { --gutter: var(--s5); } }
@media (max-width: 359px) { :root { --gutter: var(--s4); } }
*, *::before, *::after { box-sizing: border-box; }
/* The heading font joins letters like st into a curl, which makes words such as Destin harder to read. */
* { font-variant-ligatures: none; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + var(--s5)); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page, var(--c-paper)); transition: background-color 500ms var(--ease); color: var(--c-body); font: 400 var(--t-body)/1.75rem var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { margin: 0; color: var(--c-heading); font-family: var(--f-heading); font-weight: 700; text-wrap: balance; }
h1 { font-size: var(--t-h1); line-height: 1.1; }
h2 { font-size: var(--t-h2); line-height: 1.2; }
h3 { font-size: var(--t-h3); line-height: 2rem; }
h2 em, h1 em { color: var(--c-accent); font-style: normal; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 2px; border-radius: var(--r-s); }

.shell { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.section { padding-block: var(--section); }
.tint-sand { background: var(--c-sand); }
.tint-aqua { background: var(--c-aqua); }
.tint-blush { background: var(--c-blush); }
.icon { flex: none; width: var(--s7); height: var(--s7); overflow: visible; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip { position: absolute; left: var(--s4); top: -100%; z-index: 30; padding: var(--s3) var(--s4); background: var(--c-action); color: #fff; border-radius: var(--r-s); }
.skip:focus { top: var(--s2); }

/* Small caps label, and the same label set on a thin rule */
.label, .rule { font-family: var(--f-label); font-size: var(--t-small); line-height: 1.25rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-teal); }
.rule { display: flex; align-items: center; justify-content: center; gap: var(--s4); margin-bottom: var(--s3); }
.section-head { max-width: 48rem; margin: 0 auto var(--head-gap); text-align: center; }
.section-intro { max-width: 40rem; margin: calc(var(--s4) * -1) auto var(--head-gap); text-align: center; }

/* Buttons: the prominent style marks the likely action; each has a press state */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--s7); padding: var(--s3) var(--s5); border: 0; border-radius: var(--r-full); background: var(--c-action); color: #fff; font: 700 1rem/1.5rem var(--f-body); text-decoration: none; cursor: pointer; transition: transform 160ms var(--ease), filter 160ms var(--ease); }
.btn:active { transform: scale(.97); filter: brightness(.9); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn--light { background: var(--c-paper); color: var(--c-heading); }
@media (hover: hover) { .btn:hover { filter: brightness(1.1); } .btn--light:hover { filter: brightness(.96); } }

.link { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--c-link); font-weight: 700; text-decoration: none; }
.link:active { opacity: .7; }

/* The squiggle is an accent, not an underline: it sits under the colored word in a heading and under the page you're on.
   Links are told apart by color. */
.section-head em::after, .welcome__copy h2 em::after, .teaser__copy h2 em::after, .area-intro__copy h2 em::after, .site-nav > ul > li > a::after, .site-nav__toggle::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: var(--wave-y); height: var(--wave-h); background: var(--c-papaya);
  -webkit-mask: var(--squiggle) 0 0 / var(--wave-w) 100% repeat-x; mask: var(--squiggle) 0 0 / var(--wave-w) 100% repeat-x;
}
.section-head em, .welcome__copy h2 em, .teaser__copy h2 em, .area-intro__copy h2 em { --wave-w: 1.4em; --wave-h: .2em; --wave-y: -.34em; position: relative; display: inline-block; }
.section-head em::after, .welcome__copy h2 em::after, .teaser__copy h2 em::after, .area-intro__copy h2 em::after { transition: clip-path 800ms var(--ease) 300ms; }
.section-head h2:has(em), .welcome__copy h2:has(em), .teaser__copy h2:has(em), .area-intro__copy h2:has(em) { padding-bottom: .4em; } /* room for the squiggle, so it never touches what's below */
.reveal:not(.is-in) em::after { clip-path: inset(0 100% 0 0); }
.book__direct a, .label a { display: inline-block; color: var(--c-link); text-decoration: none; }
@media (hover: hover) {
  .link, .rw__more, .book__direct a, .label a { transition: color 150ms var(--ease); }
  .link:hover, .rw__more:hover, .book__direct a:hover, .label a:hover { color: var(--c-heading); }
}

/* Header: logo left, menu centered, social links right */
.site-header { position: sticky; top: 0; z-index: 20; background: #fff; box-shadow: 0 1px 0 rgb(45 80 80 / .08); padding-top: env(safe-area-inset-top); }
.site-header__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: var(--header); }
.brand { display: block; flex: none; padding-block: var(--s1); }
.brand img { width: auto; height: 3.5rem; }
.header-book { min-height: 2.75rem; padding: var(--s2) var(--s4); font-size: 1rem; }
.site-header__end, .site-header__social, .site-nav__social { display: flex; align-items: center; gap: var(--s1); }
.site-header__social { display: none; }
.site-nav__social { margin-top: var(--s2); margin-left: calc(var(--s3) * -1); }
.social { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-s); color: var(--c-heading); transition: color 160ms var(--ease), transform 160ms var(--ease); }
.social svg { width: var(--s5); height: var(--s5); }
.social:active { transform: scale(.94); }
@media (hover: hover) { .social:hover { color: var(--c-accent); } }
.menu-toggle { display: inline-flex; align-items: center; gap: var(--s2); min-width: 2.75rem; min-height: 2.75rem; padding-inline: var(--s2); border: 0; border-radius: var(--r-s); background: transparent; color: var(--c-heading); font: 700 1rem/1.5rem var(--f-body); cursor: pointer; }
.menu-toggle:active { opacity: .7; }
.menu-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* the icon says it; screen readers still hear "Menu" */
.menu-toggle__bars { position: relative; width: var(--s4); height: var(--s3); background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; transition: background-size 200ms var(--ease); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background-size: 0 2px; }
.menu-toggle__bars::before, .menu-toggle__bars::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform 200ms var(--ease), top 200ms var(--ease); }
.menu-toggle__bars::before { top: 0; }
.menu-toggle__bars::after { top: 10px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { top: 5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { top: 5px; transform: rotate(-45deg); }
@media (max-width: 399px) {
  .brand img { height: 3rem; }
}
.site-nav { display: none; position: absolute; inset: 100% 0 auto; max-height: calc(100dvh - var(--header)); overflow-y: auto; padding: var(--s3) var(--gutter) var(--s4); background: #fff; box-shadow: var(--shadow); }
.site-nav.is-open { display: block; }
.site-nav li a { display: flex; align-items: center; min-height: var(--s7); color: var(--c-heading); font-weight: 600; text-decoration: none; }
/* Choose your session: opens in place on phones, drops down on desktop */
.site-nav__toggle { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s1); width: 100%; min-height: var(--s7); padding: 0; border: 0; background: none; color: var(--c-heading); font: 600 1rem/1.5rem var(--f-body); cursor: pointer; }
.site-nav__toggle > span::after { content: ""; display: inline-block; width: .5rem; height: .5rem; margin: 0 .125rem .1875rem .625rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 200ms var(--ease); }
.has-sub.is-open .site-nav__toggle > span::after { transform: translateY(.1875rem) rotate(225deg); }
.sub-nav { display: none; padding-left: var(--s3); }
.has-sub.is-open .sub-nav, html:not(.js) .sub-nav { display: block; }
.sub-nav a[aria-current] { color: var(--c-link); }
html:not(.js) .site-nav { display: block; position: static; box-shadow: none; }
html:not(.js) .menu-toggle { display: none; }

@media (min-width: 1024px) {
  :root { --header: var(--s9); }
  .site-header__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s5); }
  .brand { justify-self: start; }
  .brand img { height: 4.5rem; object-fit: contain; object-position: left center; }
  .site-header__end { justify-self: end; }
  .site-header__social { display: flex; }
  .header-book { display: none; }
  .site-nav > ul > li:last-child > a { min-height: 2.75rem; padding-inline: var(--s5); border-radius: var(--r-full); background: var(--c-action); color: #fff; font-weight: 700; transition: filter 160ms var(--ease), transform 160ms var(--ease); }
  .site-nav > ul > li:last-child > a::after { display: none; }
  .site-nav > ul > li:last-child > a:active { transform: scale(.97); filter: brightness(.9); }
  .site-nav > ul { align-items: center; }
  .site-nav__social { display: none; }
  .menu-toggle { display: none; }
  .site-nav, html:not(.js) .site-nav { display: block; position: static; max-height: none; overflow: visible; padding: 0; box-shadow: none; background: none; }
  .site-nav > ul { display: flex; gap: clamp(var(--s4), 2vw, var(--s6)); }
  .site-nav li a { position: relative; min-height: 2.75rem; font-size: 1rem; }
  .site-nav > ul > li > a::after, .site-nav__toggle::after { --wave-w: 2rem; --wave-h: .25rem; --wave-y: .125rem; display: none; }
  .site-nav > ul > li > a[aria-current]::after, .site-nav__toggle[data-current]::after { display: block; }
  .site-nav > ul > li:not(:last-child) > a:hover, .site-nav__toggle:hover { color: var(--c-link); }
  .has-sub { position: relative; }
  .site-nav__toggle { width: auto; min-height: 2.75rem; white-space: nowrap; }
  .site-nav li a, .site-nav__toggle { white-space: nowrap; }
  .sub-nav, html:not(.js) .sub-nav { display: block; position: absolute; z-index: 5; top: calc(100% + var(--s1)); left: calc(var(--s2) * -1); min-width: 12rem; padding: var(--s1); border-radius: var(--r-m); background: #fff; box-shadow: var(--shadow); visibility: hidden; opacity: 0; transform: translateY(calc(var(--s1) * -1)); transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 0s linear 160ms; }
  .sub-nav::before { content: ""; position: absolute; inset: calc(var(--s2) * -1) 0 100%; } /* no dead gap between the label and the list */
  .has-sub.is-open .sub-nav, html:not(.js) .has-sub:is(:hover, :focus-within) .sub-nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .sub-nav a { padding-inline: var(--s2); border-radius: var(--r-s); }
  .sub-nav a:hover { background: var(--c-sand); color: var(--c-link); }
}

/* Banner. The book button always lands above the fold: on phones the photo gives up height
   to the words, and on larger screens the words sit on a card centered beside the couple. */
.hero { padding: var(--s2); } /* with the card's own padding, the words line up with every other section */
.hero__frame { position: relative; display: flex; flex-direction: column; height: calc(100svh - var(--header) - var(--s4)); min-height: 26rem; max-height: 44rem; border-radius: var(--r-l); overflow: hidden; background: var(--c-sand); }
.hero__frame > img { flex: 1 1 0; width: 100%; min-height: 0; object-fit: cover; }
.hero__copy { position: relative; flex: none; display: grid; justify-items: start; gap: var(--s2); padding: var(--s4); }
.hero__copy h1 { font-size: 1.75rem; line-height: 2.25rem; }
.hero__eyebrow { display: block; margin-bottom: var(--s2); color: var(--c-teal); font-family: var(--f-label); font-size: var(--t-small); font-weight: 400; line-height: 1.25rem; letter-spacing: .12em; text-transform: uppercase; }
.hero__title { display: block; }
.hero__text { font-size: 1rem; line-height: 1.5rem; }
.hero__copy .btn { background: var(--c-action); color: #fff; }
.hero__action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin-top: var(--s1); }
.hero__proof { display: grid; color: var(--c-heading); font-size: var(--t-small); line-height: 1.25rem; text-decoration: none; white-space: nowrap; }
.hero__stars { color: var(--c-marigold); letter-spacing: .08em; }
.hero__flower { display: none; }
@media (min-width: 768px) {
  .hero { padding: var(--s4); }
  .hero__frame { flex-direction: row; align-items: center; justify-content: flex-end; height: min(calc(100svh - var(--header) - var(--s6)), 44rem); min-height: 28rem; max-height: none; padding-inline: clamp(var(--s6), 6vw, var(--s9)); background: none; }
  .hero__frame > img { position: absolute; inset: 0; height: 100%; }
  .hero__copy { z-index: 1; width: 25rem; max-width: 46%; gap: var(--s3); padding: var(--s6); border-radius: var(--r-l); background: var(--c-paper); box-shadow: var(--shadow); }
  .hero__copy h1 { font-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.2; }
  .hero__flower { display: block; position: absolute; top: calc(var(--s6) * -1); right: var(--s5); width: var(--s8); height: var(--s8); }
}

/* Sessions */
.sessions__grid { display: grid; gap: var(--s7); }
.session { position: relative; display: grid; justify-items: center; gap: var(--s3); text-align: center; font-size: 1rem; line-height: 1.5rem; }
.session__pic { position: relative; width: 100%; max-width: 18rem; margin-bottom: var(--s3); }
.session h3 { line-height: 1.75rem; }
.arch { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 50% 50% var(--r-l) var(--r-l) / 40% 40% var(--r-l) var(--r-l); background: var(--c-sand); }
.arch img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease); }
.session > p:not(.label):not(.session__price) { max-width: 22rem; }
.session__price { font-size: 1rem; }
.session__price strong { color: var(--c-heading); }
.sessions__note { margin-top: var(--s6); text-align: center; }
/* On phones the sessions are one big card at a time, with the next peeking in, and all three prices above. Nothing shrinks to fit. */
.session-tabs { display: none; }
@media (max-width: 767px) {
  .session-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--s5); border-bottom: 1px solid color-mix(in srgb, var(--c-heading) 15%, transparent); }
  .session-tabs button { display: grid; gap: 0; min-height: 3.5rem; padding: var(--s2) var(--s1); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--c-body); font: inherit; font-size: var(--t-small); line-height: 1.25rem; cursor: pointer; }
  .session-tabs b { color: var(--c-heading); font-size: 1rem; line-height: 1.5rem; }
  .session-tabs button[aria-pressed="true"] { border-bottom-color: var(--c-accent); color: var(--c-heading); font-weight: 700; }
  .sessions__grid { display: flex; gap: var(--s4); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .sessions__grid::-webkit-scrollbar { display: none; }
  .session { flex: 0 0 84%; align-content: start; scroll-snap-align: center; }
  .session__pic { max-width: 15rem; margin-bottom: 0; }
}
@media (min-width: 768px) {
  .sessions__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
  .session { grid-template-rows: auto auto auto 1fr auto auto; }
}
@media (min-width: 1024px) { .sessions__grid { gap: var(--s7); } }
@media (hover: hover) { .session:hover .arch img { transform: scale(1.03); } }

/* A hand-drawn wave beside a heading */

/* Welcome: words on one side, two overlapping photos on the other */
.welcome__grid { display: grid; gap: var(--s6); }
.welcome__copy { display: grid; justify-items: start; gap: var(--s4); }
.welcome__copy .rule { justify-content: flex-start; margin: 0; width: 100%; }
.prose { display: grid; gap: var(--s4); max-width: 34rem; }
.welcome__photos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); width: 100%; max-width: 36rem; margin-inline: auto; }
.welcome__photo { position: relative; grid-row: 1; }
.welcome__photo img { width: 100%; object-fit: cover; border-radius: var(--r-l); }
.welcome__photo--right { grid-column: 5 / -1; margin-bottom: var(--s7); }
.welcome__photo--right img { aspect-ratio: 4 / 5; }
.welcome__photo--left { grid-column: 1 / 7; z-index: 1; align-self: end; }
.welcome__photo--left img { aspect-ratio: 1; box-shadow: 0 0 0 var(--s2) var(--c-sand); }
.badge { position: absolute; top: calc(var(--s7) * -1); left: var(--s2); width: var(--s9); height: var(--s9); }
.badge circle { fill: var(--c-sand); }
.badge text { fill: var(--c-teal); font: 400 11px var(--f-label); text-transform: uppercase; }
@media (min-width: 1024px) {
  .welcome__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s8); align-items: center; }
}

/* Sliders: they roll, drag and pause. Without JavaScript or with reduced motion they're plain scrollers. */
.slider { position: relative; overflow: hidden; touch-action: pan-y; cursor: grab; }
.slider.is-dragging { cursor: grabbing; }
.slider__track { display: flex; width: max-content; will-change: transform; }
.slider__run { flex: none; display: flex; align-items: center; user-select: none; -webkit-user-select: none; }
html:not(.js) .slider { overflow-x: auto; cursor: auto; }
.slider__pause { position: absolute; right: var(--s3); bottom: var(--s3); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / .88); box-shadow: var(--shadow); color: var(--c-heading); cursor: pointer; transition: transform 160ms var(--ease); }
.slider__pause[hidden] { display: none; }
.slider__pause::before { content: ""; width: var(--s3); height: var(--s3); border-inline: 4px solid currentColor; }
.slider__pause[aria-pressed="true"]::before { width: 0; height: 0; margin-left: var(--s1); border-block: 7px solid transparent; border-inline: 12px solid transparent; border-left-color: currentColor; border-right-width: 0; }
.slider__pause:active { transform: scale(.94); }

/* Sessions we shoot, with a little paper cut-out between each */
.marquee { padding-block: var(--s4); border-block: 1px solid var(--c-peach); }
.marquee .slider__run { gap: var(--s5); padding-right: var(--s5); color: var(--c-pine); font: 400 clamp(1.25rem, 1.1rem + .6vw, 1.5rem)/1.2 var(--f-label); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.marquee .icon { width: auto; height: var(--s6); }
.marquee .slider__pause { top: 0; bottom: 0; margin-block: auto; }

/* Photos rolling the other way */
.ribbon { padding-block: var(--s5) var(--s6); }
.ribbon .slider__run { align-items: flex-start; }
.ribbon__item { flex: none; margin: 0 var(--s2) 0 0; }
.ribbon__item img { width: auto; max-width: none; height: clamp(12rem, 20vw, 17rem); border-radius: var(--r-l); pointer-events: none; }
.ribbon__item:nth-child(3n) img { border-radius: 50% 50% var(--r-l) var(--r-l) / 40% 40% var(--r-l) var(--r-l); }
@media (min-width: 768px) { .ribbon__item { margin-right: var(--s4); } }

/* What you get */
.promise__grid { display: grid; gap: var(--s6) var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); padding: var(--s6) var(--s5); border: 1px solid var(--c-teal); border-radius: var(--r-l); }
@media (min-width: 1024px) {
  .promise__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding-inline: 0; }
  .promise__grid li { padding-inline: var(--s5); }
  .promise__grid li + li { border-left: 1px solid var(--c-seafoam); }
}
.promise__grid li { display: grid; justify-items: center; align-content: start; gap: var(--s2); text-align: center; }
/* Two by two on phones, so four promises don't take a whole screen each. */
@media (max-width: 767px) {
  .promise__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s3); padding: var(--s5) var(--s4); }
  .promise__icon, .promise__grid .icon { width: var(--s7); height: var(--s7); }
}
.promise__icon { height: var(--s7); width: auto; margin-bottom: var(--s1); }
.promise__value { color: var(--c-heading); font: 700 2rem/2.5rem var(--f-heading); }
.promise__grid p:last-child, .how__grid p { font-size: 1rem; line-height: 1.5rem; }

/* How it works */
.how__grid { display: grid; gap: var(--s6); }
.how__grid li { display: grid; justify-items: center; gap: var(--s3); text-align: center; }
.how__grid li p { max-width: 24rem; }
.how__pic { width: 100%; overflow: hidden; border-radius: var(--r-l); }
.how__pic img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; transition: transform 300ms var(--ease); }
@media (min-width: 768px) { .how__pic img { aspect-ratio: 3 / 2; } }
@media (hover: hover) { .how__grid li:hover .how__pic img { transform: scale(1.03); } }
.how__pic + .how__num { z-index: 1; margin-top: calc(var(--s7) * -1); border-radius: 50%; background: var(--c-paper); box-shadow: var(--shadow); }
.how__num { position: relative; display: grid; place-items: center; width: var(--s8); height: var(--s8); }
.how__num .icon { position: absolute; inset: var(--s1); width: calc(100% - var(--s2)); height: calc(100% - var(--s2)); }
.how__num b { position: relative; color: var(--c-heading); font: 700 1.5rem/1 var(--f-heading); }
@media (min-width: 768px) { .how__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); } }
/* Larger screens: the heading sits to one side and the steps line up beside it */
@media (min-width: 1024px) {
  .how__layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--s7); align-items: start; }
  .how .section-head { margin: 0; text-align: left; }
  .how .rule { justify-content: flex-start; }
  .how__grid { gap: var(--s5); align-items: start; }
  .how__grid li { justify-items: start; text-align: left; }
  .how__pic { border-radius: 50% 50% var(--r-l) var(--r-l) / 40% 40% var(--r-l) var(--r-l); }
  .how__pic img { aspect-ratio: 1; }
  .how__pic + .how__num { margin-left: var(--s4); }
}

/* Stories: one tidy row */
.mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s4); }
.mosaic__item { margin: 0; display: grid; gap: var(--s3); min-width: 0; align-content: start; }
.mosaic__item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-l); }
.mosaic__item figcaption { display: grid; gap: var(--s1); }
.mosaic__title { color: var(--c-heading); font: 700 1rem/1.5rem var(--f-heading); }
@media (min-width: 1024px) { .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); } }

/* Featured story: words on the photo, three more beside it */
.feature { display: grid; gap: var(--s5); }
.feature__main { position: relative; display: grid; margin: 0; overflow: hidden; border-radius: var(--r-l); }
.feature__main img { width: 100%; height: 100%; min-height: 24rem; object-fit: cover; transition: transform 500ms var(--ease); }
.feature__main figcaption { position: absolute; inset: auto 0 0; display: grid; justify-items: start; gap: var(--s1); padding: var(--s8) var(--s5) var(--s5); background: linear-gradient(to top, rgb(16 40 42 / .78), transparent); color: #fff; font-size: 1rem; line-height: 1.5rem; }
.feature__main .label { color: #fff; }
.feature__main .feature__title { color: #fff; font: 700 var(--t-h2)/1.2 var(--f-heading); }
/* Something moved in the editor can't make the page scroll sideways on a narrower screen. */
main { overflow-x: clip; }
/* Footer app icons */
.app-icons { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }
.site-footer a.app-icon { display: grid; place-items: center; width: 3rem; height: 3rem; min-height: 0; padding: 0; border-radius: .875rem; background: var(--c-paper); color: var(--c-teal); box-shadow: 0 2px 8px rgb(0 0 0 / .18); transition: transform 150ms var(--ease); }
.app-icon svg { width: 1.5rem; height: 1.5rem; }
@media (hover: hover) { .site-footer a.app-icon:hover { color: var(--c-action); transform: translateY(-2px); } }

/* A customer's words in the calm part of a photo. The sky or sea does the framing, so no box or shade sits over the picture. */
.quote-band { position: relative; margin: 0; }
.quote-band > img, .quote-band > .photo-empty { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.quote-band blockquote { position: absolute; inset: var(--s6) var(--gutter) auto; margin: 0; color: var(--c-heading); text-align: left; }
/* Each line stays whole, so the size comes from the longest line (--q-n, set by the template). */
.quote-band__text { --q-room: calc(100vw - 2 * var(--gutter)); font-family: var(--f-label); font-size: min(4rem, calc(var(--q-room) / var(--q-n, 12))); font-weight: 400; line-height: 1.16; letter-spacing: .01em; white-space: pre-line; text-shadow: 0 0 .5em rgb(255 255 255 / .9), 0 0 1.4em rgb(255 255 255 / .7); }
.q-line { display: block; white-space: nowrap; }
.q-line:nth-child(even) { margin-left: .9em; } /* every other line steps in, like a title on a poster */
.q-big { text-transform: uppercase; }
.q-little { font-family: var(--f-body); font-size: .58em; font-style: italic; font-weight: 400; text-transform: lowercase; }
.q-wave { display: inline-block; width: .8em; height: .24em; vertical-align: .2em; }
.quote-band footer { margin-top: var(--s3); margin-left: 2.5em; text-shadow: 0 0 .6em rgb(255 255 255 / .9); font-family: var(--f-label); font-size: var(--t-small); letter-spacing: .12em; text-transform: uppercase; }
.quote-band--light blockquote { color: #fff; }
.quote-band--light .quote-band__text, .quote-band--light footer { text-shadow: 0 1px .25em rgb(16 52 54 / .55), 0 0 1.2em rgb(16 52 54 / .55); }
@media (max-width: 767px) { /* phones crop tighter, so the words often land on busier parts of the photo */
  .quote-band__text { text-shadow: 0 0 .2em #fff, 0 0 .5em #fff, 0 0 1.2em #fff; }
  .quote-band--light .quote-band__text { text-shadow: 0 0 .2em rgb(16 52 54 / .8), 0 0 .6em rgb(16 52 54 / .8), 0 0 1.2em rgb(16 52 54 / .6); }
}
@media (min-width: 768px) {
  .quote-band > img, .quote-band > .photo-empty { aspect-ratio: 16 / 8; }
  .quote-band--hero > img { aspect-ratio: auto; height: min(calc(100svh - var(--header)), 46rem); }
  .quote-band__text { --q-room: 50vw; }
  .quote-band blockquote { inset: 12% max(var(--gutter), 6vw) auto auto; width: auto; text-align: left; }
  .quote-band--left blockquote { inset: 12% auto auto max(var(--gutter), 6vw); }
  .quote-band--top blockquote { inset: var(--s7) 0 auto; width: auto; margin-inline: auto; max-width: 48rem; text-align: center; }
}
.post-review { display: grid; gap: var(--s3); margin: var(--s7) auto; max-width: 42rem; padding: var(--s6); border-radius: var(--r-l); background: var(--c-sand); text-align: center; }
.post-review blockquote { margin: 0; }
.post-review figcaption { color: var(--c-heading); font-weight: 700; }
.post-adds { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; margin-block: var(--s6); }
.post-add { min-height: var(--s8); padding: 0 var(--s5); border: 2px dashed var(--c-seafoam); border-radius: var(--r-l); background: none; color: var(--c-teal); font: inherit; font-weight: 700; }

/* Icon on the seam: a paper-cut icon across the bottom edge of a photo */
.seam { position: absolute; left: 50%; bottom: -1.75rem; z-index: 1; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--c-paper); box-shadow: 0 4px 12px color-mix(in srgb, var(--c-heading) 18%, transparent); translate: -50% 0; }
.seam .icon { width: 2.25rem; height: 2.25rem; }
.session__pic { margin-bottom: var(--s5); }
.choice__pic { margin-bottom: var(--s4); }

/* Stat tiles in the pricing card */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.tiles li { display: grid; gap: 0; padding: var(--s3) var(--s1); border-radius: var(--r-m); background: var(--c-paper); text-align: center; }
.tiles b { color: var(--c-heading); font: 700 1.25rem/1.75rem var(--f-heading); }
.tiles span { font-size: var(--t-small); line-height: 1.25rem; }

/* Highlighter and a handwritten note, used once */
.welcome__solution em { padding-inline: .15em; border-radius: .25em; background: linear-gradient(100deg, transparent 1%, color-mix(in srgb, var(--c-marigold) 55%, transparent) 4% 96%, transparent 99%) no-repeat 0 72% / 100% 62%; color: inherit; font-style: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hand-note { display: flex; align-items: flex-start; gap: var(--s1); margin-top: calc(var(--s2) * -1); color: var(--c-action); font: 1.375rem/1.5rem "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive; rotate: -2deg; }
.hand-note svg { flex: none; width: 3rem; height: 2rem; }
.hand-note span { padding-top: var(--s3); }

/* Die-cut stickers */
.sticker { display: inline-block; padding: var(--s2) var(--s3); border: 3px solid #fff; border-radius: var(--r-m); background: var(--c-marigold); color: var(--c-heading); font: 700 1rem/1.25rem var(--f-heading); box-shadow: 0 4px 12px color-mix(in srgb, var(--c-heading) 22%, transparent); rotate: -4deg; }
.book__panel { position: relative; }
.book__panel > .sticker { position: absolute; top: calc(var(--s4) * -1); right: var(--s4); z-index: 2; rotate: 4deg; }
.sticker--head { margin-bottom: var(--s3); }

/* Paper grain on the page color, and a cutout at the edge of the lead story */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .35; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .32 0 0 0 0 .22 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.feature { position: relative; }
.feature__cutout { position: absolute; top: calc(var(--s6) * -1); left: calc(var(--s5) * -1); z-index: 2; width: 5rem; height: 5rem; rotate: -18deg; pointer-events: none; }

/* Love stories melt into their cards */
.mosaic__item { overflow: hidden; border-radius: var(--r-l); background: var(--c-sand); gap: 0; }
.mosaic__item img { border-radius: 0; -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }
.mosaic__item figcaption { position: relative; margin-top: calc(var(--s5) * -1); padding: 0 var(--s4) var(--s4); }

/* Folded-in home page sections */
/* On phones the three steps read as a tight list: number on the left, words on the right. */
@media (max-width: 767px) {
  .how__pic { display: none; }
  .how__grid { gap: var(--s5); }
  .how__grid li { grid-template-columns: var(--s7) minmax(0, 1fr); justify-items: start; column-gap: var(--s3); row-gap: var(--s1); text-align: left; }
  .how__pic + .how__num, .how__num { grid-row: span 2; margin: 0; width: var(--s7); height: var(--s7); box-shadow: none; background: none; }
  .how__num b { font-size: 1.25rem; }
  .how__grid h3 { font-size: 1.25rem; line-height: 1.5rem; }
}
.proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin: var(--s7) 0 0; padding: var(--s5) 0 0; border-top: 1px solid color-mix(in srgb, var(--c-heading) 15%, transparent); list-style: none; }
.proof li { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.proof__icon { flex: none; width: 2.5rem; height: 2.5rem; }
.proof__value { color: var(--c-heading); font: 700 1.5rem/1.75rem var(--f-heading); }
.proof__label { color: var(--c-teal); font-family: var(--f-label); font-size: var(--t-small); line-height: 1.25rem; letter-spacing: .08em; text-transform: uppercase; }
.calm { display: grid; gap: var(--s5); margin-top: var(--s7); padding: var(--s5); border-radius: var(--r-l); background: var(--c-blush); }
.calm__head { display: grid; gap: var(--s2); }
.calm__head h3 { color: var(--c-heading); font: 700 var(--t-h3, 1.5rem)/1.3 var(--f-heading); }
.calm__list { display: grid; gap: var(--s4); margin: 0; padding: 0; list-style: none; }
.calm__list li { display: grid; grid-template-columns: var(--s7) minmax(0, 1fr); column-gap: var(--s3); align-content: start; font-size: 1rem; line-height: 1.5rem; }
.calm__list .icon { grid-row: span 2; width: var(--s7); height: var(--s7); }
.calm__list strong, .calm__list span { grid-column: 2; }
.calm__list strong { color: var(--c-heading); }
.know__grid { display: grid; gap: var(--s6); align-items: start; }
.know__copy { display: grid; justify-items: start; gap: var(--s4); }
.know__copy .link-row { margin: 0; gap: var(--s1) var(--s3); }
@media (min-width: 768px) {
  .proof { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .calm { padding: var(--s6); }
  .calm__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
}
@media (min-width: 1024px) {
  .calm { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s7); align-items: center; }
  .know__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); }
}
/* Text someone has emptied takes up no room at all. */
:is(p, h1, h2, h3, h4, li, figcaption, a, .label, .hero__eyebrow):empty, li:has(> a:empty) { display: none; }
/* A story card is one link: the title's link stretches over the whole card, and the gallery button stays clickable above it. */
.story-link { color: inherit; text-decoration: none; }
.story-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mosaic__item, .feature__list li { position: relative; }
.feature__image { display: block; height: 100%; }
.feature__main::after { pointer-events: none; }
.story-link:focus-visible { outline: none; }
.story-link:focus-visible::after { outline: 3px solid var(--c-accent); outline-offset: 2px; border-radius: var(--r-l); }
.feature__pill { position: relative; z-index: 2; display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: var(--s2); padding: var(--s2) var(--s4); border-radius: var(--r-full); background: var(--c-paper); color: var(--c-heading); font-weight: 700; text-decoration: none; transition: transform 160ms var(--ease); }
.feature__pill:active { transform: scale(.97); }
.feature__list { display: grid; gap: var(--s4); align-content: space-between; }
.feature__list li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s4); align-items: center; font-size: 1rem; line-height: 1.5rem; }
.feature__list h3 { font-size: 1.125rem; line-height: 1.5rem; }
.feature__thumb { overflow: hidden; border-radius: var(--r-m); }
.feature__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 300ms var(--ease); }
.feature__list li:nth-child(2) .feature__thumb { border-radius: 50% 50% var(--r-m) var(--r-m) / 40% 40% var(--r-m) var(--r-m); }
@media (hover: hover) {
  .feature__main:hover img, .feature__list li:hover img { transform: scale(1.03); }
  .feature__pill:hover { transform: translateY(-2px); }
}
@media (min-width: 640px) { .feature__main figcaption { max-width: 60%; background: none; padding-top: var(--s5); } .feature__main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgb(16 40 42 / .7), transparent 62%); pointer-events: none; } .feature__main figcaption { z-index: 1; } }
@media (min-width: 1024px) { .feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); } }

/* Reviews widget */
.rw__summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-bottom: var(--s5); color: var(--c-heading); }
.rw__score { display: inline-flex; align-items: center; gap: var(--s2); }
.rw__score b { font: 700 var(--t-h3)/2rem var(--f-heading); }
.rw__stars { margin: 0; color: var(--c-marigold); letter-spacing: .1em; }
@media (min-width: 1024px) { .rw__track { grid-auto-columns: calc((100% - var(--s7)) / 3); } }
.rw__arrows { display: flex; gap: var(--s2); margin-left: auto; }
@media (max-width: 767px) { .rw__summary { gap: 0 var(--s2); } .rw__score { flex: none; } }
.rw__arrows button, .arrow { width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--c-seafoam); border-radius: 50%; background: var(--c-paper); color: var(--c-heading); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: transform 160ms var(--ease), background-color 160ms var(--ease); }
.rw__arrows button:active, .arrow:active { transform: scale(.94); }
@media (hover: hover) { .rw__arrows button:hover, .arrow:hover { background: var(--c-aqua); } }
.rw__track { display: grid; grid-auto-flow: column; grid-auto-columns: min(100%, 22rem); gap: var(--s5); overflow-x: auto; padding-block: var(--s1) var(--s3); scroll-snap-type: x proximity; scrollbar-width: thin; }
.rw__card { display: grid; align-content: start; gap: var(--s3); padding: var(--s5); border-radius: var(--r-l); background: var(--c-paper); box-shadow: 0 4px 16px color-mix(in srgb, var(--c-heading) 8%, transparent); font-size: 1rem; line-height: 1.5rem; scroll-snap-align: start; }
.rw__who { display: flex; align-items: center; gap: var(--s3); }
.rw__who b { display: block; color: var(--c-heading); }
.rw__who span:not(.rw__avatar) { display: block; font-size: var(--t-small); line-height: 1.25rem; }
.rw__avatar { position: relative; flex: none; display: grid; place-items: center; width: var(--s7); height: var(--s7); border-radius: 50%; overflow: hidden; background: var(--c-action); color: #fff; font-weight: 700; }
.rw__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rw__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.rw__text.is-open { display: block; }
.rw__more { position: relative; justify-self: start; min-height: 2.75rem; padding: 0; border: 0; background: none; color: var(--c-link); font: 700 1rem/1.5rem var(--f-body); text-decoration: none; cursor: pointer; }
.rw__photos { display: flex; gap: var(--s2); }
.rw__photos button { width: var(--s8); height: var(--s8); padding: 0; border: 0; border-radius: var(--r-s); overflow: hidden; background: none; cursor: zoom-in; }
.rw__photos img { width: 100%; height: 100%; object-fit: cover; }
.viewer { overflow: visible; max-width: min(90vw, 60rem); padding: 0; border: 0; border-radius: var(--r-l); background: none; }
.viewer::backdrop { background: rgb(16 40 42 / .8); }
.viewer img { max-height: calc(100svh - 8rem); border-radius: var(--r-l); }
.viewer form { display: flex; align-items: center; justify-content: center; gap: var(--s2); margin-top: var(--s3); }
.viewer form { position: fixed; inset: auto 0 var(--s4) 0; } /* the controls stay put from photo to photo */
.viewer--single .arrow { display: none; }
.viewer[open] { animation: fade 240ms var(--ease); }
.viewer[open]::backdrop { animation: fade 240ms var(--ease); }
@keyframes pop { from { opacity: 0; transform: scale(.96); } }
@keyframes fade { from { opacity: 0; } }

/* Fold-outs for locations and FAQs */
.fold { border-bottom: 1px solid var(--c-peach); }
.faq__cols { display: grid; align-items: start; column-gap: var(--s7); max-width: 64rem; margin-inline: auto; }
@media (min-width: 768px) { .faq__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fold summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: var(--s8); padding-block: var(--s3); color: var(--c-heading); font-size: 1rem; line-height: 1.5rem; font-weight: 700; cursor: pointer; list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: ""; flex: none; width: var(--s3); height: var(--s3); margin-right: var(--s1); border-right: 2px solid var(--c-accent); border-bottom: 2px solid var(--c-accent); transform: rotate(45deg) translate(-2px, -2px); transition: transform 200ms var(--ease); }
.fold[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.fold summary:active { opacity: .7; }
.fold__body { display: grid; gap: var(--s1); padding-bottom: var(--s4); max-width: 40rem; font-size: 1rem; line-height: 1.5rem; }



/* Inquiry */
.book { padding-block: var(--section); }
.book__grid { display: grid; gap: var(--s6); }
.book__photo { position: relative; display: none; max-width: 20rem; margin-inline: auto; width: 100%; }
.book__palm { position: absolute; right: calc(var(--s4) * -1); bottom: calc(var(--s4) * -1); width: var(--s8); height: auto; }
.book__panel { display: grid; gap: var(--s3); padding: var(--s5); border-radius: var(--r-l); background: var(--c-paper); box-shadow: var(--shadow); min-width: 0; }
.book__panel .rule { margin: 0; }
.book__panel h1, .book__panel h2 { font-size: var(--t-h2); line-height: 1.2; text-align: center; }
.book__panel > p:not(.rule) { text-align: center; }
.form { display: grid; gap: var(--s4); margin-top: var(--s3); }
.field { display: grid; gap: var(--s1); min-width: 0; }
.field label { color: var(--c-heading); font-size: 1rem; font-weight: 700; line-height: 1.5rem; }
.field label span { color: var(--c-body); font-weight: 400; }
.field input, .field select, .field textarea { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%; min-height: var(--s7); padding: var(--s3) var(--s4); border: 1px solid var(--c-pine); border-radius: var(--r-s); background: #fff; color: var(--c-body); font: 400 1.0625rem/1.5rem var(--f-body); }
.field textarea { min-height: var(--s9); resize: vertical; }
/* iPhones give date boxes their own width and alignment, which pushed them out of the card. */
.field input[type="date"] { min-height: var(--s7); text-align: left; }
.field input::-webkit-date-and-time-value { min-height: 1.5rem; margin: 0; text-align: left; }
.field select { padding-right: var(--s7); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%232b6f73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right var(--s4) center / var(--s4) no-repeat; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-offset: 0; }
.field [aria-invalid="true"] { border: 2px solid var(--c-accent); }
.field__error { color: var(--c-accent); font-size: 1rem; line-height: 1.5rem; font-weight: 700; }
.field__error::before { content: "! "; }
.form__trap { position: absolute; left: -100vw; }
.form .btn { width: 100%; }
.form__reply { margin: 0; color: var(--c-teal); font-size: var(--t-small); line-height: 1.25rem; font-weight: 700; text-align: center; }
.form__status { padding: var(--s3) var(--s4); border-radius: var(--r-s); background: var(--c-aqua); color: var(--c-heading); font-weight: 700; }
.form__status[data-kind="ok"]::before { content: "✓ "; }
.form__status[data-kind="error"] { background: var(--c-blush); }
.form__status[data-kind="error"]::before { content: "! "; }
.book__direct { font-size: 1rem; }
.book__direct a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; overflow-wrap: anywhere; }
@media (min-width: 640px) {
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form__wide, .form .btn, .form__status, .form__reply { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .book__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s7); align-items: center; }
  .book__photo { display: block; }
  .book__panel { padding: var(--s7); }
}

/* Photos above the footer */
.ig { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-decoration: none; }
.ig__cell { overflow: hidden; }
.ig__cell img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 300ms var(--ease); }
.ig__label { position: absolute; inset: 0; width: max-content; max-width: calc(100% - var(--s6)); height: max-content; margin: auto; padding: var(--s2) var(--s4); border-radius: var(--r-full); background: var(--c-paper); box-shadow: var(--shadow); color: var(--c-heading); font-size: 1rem; line-height: 1.5rem; font-weight: 700; transition: transform 200ms var(--ease); }
@media (min-width: 768px) { .ig { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (hover: hover) { .ig:hover img { transform: scale(1.05); } .ig:hover .ig__label { transform: translateY(calc(var(--s1) * -1)); } }

/* Footer */
.site-footer { padding-block: var(--s8) var(--s5); padding-bottom: max(var(--s5), env(safe-area-inset-bottom)); background: var(--c-teal); color: #fff; }
.site-footer__grid { display: grid; grid-template-columns: repeat(2, auto); justify-content: space-between; gap: var(--s6) var(--s5); }
.site-footer__brand, .site-footer__hello { grid-column: 1 / -1; }
.site-footer__brand p { max-width: 22rem; }
.site-footer img { width: auto; height: var(--s8); margin-bottom: var(--s3); }
.site-footer .label { margin-bottom: var(--s2); color: var(--c-seafoam); }
.site-footer li a, .site-footer__legal a { display: inline-flex; align-items: center; min-height: 2.75rem; color: #fff; font-size: 1rem; line-height: 1.5rem; text-decoration: none; white-space: nowrap; }
.site-footer :focus-visible { outline-color: #fff; }
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s5); margin-top: var(--s5); font-size: var(--t-small); }
.site-footer__legal a { font-size: inherit; }
@media (hover: hover) { .site-footer a { transition: color 150ms var(--ease); } .site-footer a:hover { color: var(--c-marigold); } }
@media (hover: hover) and (pointer: fine) { .site-footer li a { min-height: 2rem; } }
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: repeat(3, auto); }
  .site-footer__hello { grid-column: auto; }
}
@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: minmax(0, 20rem) repeat(3, auto); }
  .site-footer__brand { grid-column: auto; }
}

/* Small shared pieces */
.more { margin-top: var(--s6); text-align: center; }
.link-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); margin-top: var(--s2); }
.link-row span { flex-basis: 100%; font-weight: 700; }
@media (min-width: 768px) { .know__copy .link-row span, .teaser__copy .link-row span, .offer__story .link-row span { flex-basis: auto; } }
.sessions .link-row { justify-content: center; text-align: center; }
.mosaic__text { font-size: 1rem; line-height: 1.5rem; }
.section-head p:not(.rule) { margin-top: var(--s2); }
.ticks, .nopes { display: grid; gap: var(--s1); font-size: 1rem; line-height: 1.5rem; }
.ticks li, .nopes li { position: relative; padding-left: var(--s5); text-align: left; }
.ticks li::before, .nopes li::before { position: absolute; left: 0; font-weight: 700; }
.ticks li::before { content: "✓"; color: var(--c-teal); }
.nopes li::before { content: "✕"; color: var(--c-accent); }

/* Problem and solution */
.welcome__solution { max-width: 34rem; }

/* Worry-free */
.worry__grid { display: grid; gap: var(--s5); }
.worry__grid li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); overflow: hidden; border-radius: var(--r-l); background: var(--c-paper); font-size: 1rem; line-height: 1.5rem; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.worry__pic img { width: 100%; height: 100%; object-fit: cover; }
.worry__body { display: grid; align-content: start; gap: var(--s2); padding: var(--s4); }
.worry__grid h3 { font-size: 1.125rem; line-height: 1.5rem; }
@media (min-width: 640px) {
  .worry__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .worry__grid li { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .worry__pic img { height: auto; aspect-ratio: 3 / 2; }
  .worry__body { padding: var(--s4) var(--s5) var(--s5); }
}
@media (min-width: 1024px) {
  .worry__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Locations teaser */
.teaser__grid { display: grid; gap: var(--s4); align-items: center; }
.teaser__grid .scene { margin: 0; max-width: none; }
.teaser__copy { display: grid; gap: var(--s2); justify-items: start; }
.teaser__copy .rule { justify-content: flex-start; margin: 0; }
.teaser__copy .link-row { margin: 0; gap: var(--s1) var(--s3); }
@media (min-width: 768px) { .teaser__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s7); } }

/* Inner page banner: words first, so the button stays above the fold */
.page-hero { padding-block: var(--s7); }
.page-hero__grid { display: grid; gap: var(--s5); align-items: center; }
.page-hero__copy { display: grid; gap: var(--s3); justify-items: start; }
.page-hero__copy h1 { font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); line-height: 1.15; }
.page-hero__copy .btn { margin-top: var(--s2); }
.page-hero__text { max-width: 32rem; }
.page-hero__photo { width: 100%; max-width: 16rem; margin-inline: auto; }
@media (min-width: 768px) {
  .page-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); }
  .page-hero__photo { max-width: 20rem; }
}

.page-hero__trio { display: grid; grid-template-columns: 3fr 4fr 3fr; gap: var(--s2); align-items: center; width: 100%; max-width: 34rem; margin-inline: auto; }
.page-hero__trio .arch { aspect-ratio: 2 / 3; }
.page-hero__trio .arch:first-child { margin-top: var(--s6); }
.page-hero__trio .arch:last-child { margin-bottom: var(--s6); }
@media (min-width: 768px) {
  .page-hero--trio .page-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .page-hero__trio { gap: var(--s3); }
}

/* What's included */
.offer { display: grid; gap: var(--s6); align-items: center; margin-bottom: var(--s7); }
.offer__story { display: grid; gap: var(--s4); align-content: start; }
.offer__story .link-row { margin: 0; gap: var(--s1) var(--s3); }
.offer__card { position: relative; display: grid; gap: var(--s4); padding: var(--s6) var(--s5); border-radius: var(--r-l); background: var(--c-sand); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-heading) 12%, transparent); }
.offer__flower { position: absolute; top: calc(var(--s4) * -1); right: var(--s4); width: var(--s8); height: var(--s8); rotate: 12deg; }
.offer__price { font-size: 1rem; line-height: 1.5rem; }
.offer__price b { color: var(--c-heading); font: 700 2rem/2.5rem var(--f-heading); }
.offer__deposit { font-size: var(--t-small); line-height: 1.25rem; text-align: center; }
.strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.strip figure { margin: 0; }
.strip img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-l); }
@media (min-width: 768px) { .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); } }
@media (min-width: 1024px) { .offer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); } .offer__card { padding: var(--s6); } }

/* Page photos, three ways. Every tile opens the photo viewer. */
.wall__item, .cols__item, .film__item { display: block; min-width: 0; padding: 0; border: 0; overflow: hidden; background: var(--c-sand); cursor: zoom-in; }
.wall__item img, .film__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease); }
.cols__item img { width: 100%; transition: transform 300ms var(--ease); }
@media (hover: hover) { .wall__item:hover img, .cols__item:hover img, .film__item:hover img { transform: scale(1.03); } }

/* Photo wall: rows that fill exactly, so nothing gets cropped hard and no gaps open up */
.wall { --row: 9rem; display: flex; flex-wrap: wrap; gap: var(--s2); }
.wall__item { flex: calc(var(--ar) * 100) 1 calc(var(--ar) * var(--row)); aspect-ratio: var(--ar); border-radius: var(--r-m); }
.wall__item.is-tall:nth-child(odd) { border-radius: 50% 50% var(--r-m) var(--r-m) / 33% 33% var(--r-m) var(--r-m); }
@media (min-width: 768px) { .wall { --row: 14rem; gap: var(--s3); } }
@media (min-width: 1024px) { .wall { --row: 15rem; gap: var(--s4); } }

/* Film strip: a swipeable row that runs edge to edge */
.film__track { display: flex; gap: var(--s3); overflow-x: auto; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scroll-snap-type: x proximity; scrollbar-width: none; }
.film__track::-webkit-scrollbar { display: none; }
.film__item { flex: none; height: clamp(16rem, 36vw, 28rem); aspect-ratio: var(--ar); border-radius: var(--r-l); scroll-snap-align: start; }
.film__arrows { display: flex; justify-content: center; gap: var(--s2); margin-top: var(--s4); }

/* Staggered columns: the middle one sits lower and drifts as you scroll */
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); align-items: start; }
.cols__col { display: grid; gap: var(--s3); }
.cols__col:nth-child(2) { margin-top: var(--s6); }
.cols__col:nth-child(3) { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols__item { border-radius: var(--r-l); }
.cols__col:nth-child(2) .cols__item:first-child { border-radius: 50% 50% var(--r-l) var(--r-l) / 33% 33% var(--r-l) var(--r-l); }
@media (min-width: 768px) {
  .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
  .cols__col { gap: var(--s4); }
  .cols__col:nth-child(2) { margin-top: var(--s8); }
  .cols__col:nth-child(3) { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
}

/* Wedding packages */
.packages { display: grid; gap: var(--s5); margin-bottom: var(--s7); }
.package { position: relative; display: grid; align-content: start; gap: var(--s2); padding: var(--s5); border-radius: var(--r-l); background: var(--c-paper); box-shadow: 0 4px 16px color-mix(in srgb, var(--c-heading) 8%, transparent); }
.package--pick { background: var(--c-aqua); box-shadow: inset 0 0 0 2px var(--c-teal); }
.package__flag { justify-self: start; padding: var(--s1) var(--s3); border-radius: var(--r-full); background: var(--c-action); color: #fff; font-size: var(--t-small); line-height: 1.25rem; font-weight: 700; }
@media (min-width: 768px) { .packages { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Locations page */
.locs-page { padding-top: var(--s7); }
.locs-page .section-head { margin-bottom: 0; }
.locs-page .hero__title { font-size: var(--t-h2); line-height: 1.2; }
.locs-page .locs__title { margin-top: var(--s5); }
.locs-page .locs + .locs__title { margin-top: var(--s7); }
.locs-page .hero__eyebrow { margin-bottom: var(--s2); }
.locs__title { display: flex; align-items: center; gap: var(--s3); margin: var(--s6) 0 var(--s4); font-size: var(--t-h3); line-height: 2rem; }
.locs__title .icon { width: var(--s6); height: var(--s6); }
.locs__title + .strip { margin-bottom: var(--s4); }
.locs { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
/* Rows stay full: four spots sit side by side, and seven get a wide first and last card. */
@media (min-width: 640px) {
  .locs:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .locs:has(> :nth-child(7):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .locs:has(> :nth-child(7):last-child) > :last-child { grid-column: span 2; }
}
@media (min-width: 1200px) {
  .locs:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
  .locs:has(> :nth-child(4):last-child) .loc h3 { font-size: 1.25rem; }
  .locs:has(> :nth-child(7):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .locs:has(> :nth-child(7):last-child) > :is(:first-child, :last-child) { grid-column: span 2; }
  .locs:has(> :nth-child(7):last-child) > :is(:first-child, :last-child) .loc__pic img { aspect-ratio: auto; height: 18.4rem; }
}
/* Listing cards: the photo melts into the card, then the name, the best light, a few words and one clear button. */
.loc { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--r-l); background: var(--c-paper); box-shadow: 0 8px 32px color-mix(in srgb, var(--c-heading) 14%, transparent); font-size: 1rem; line-height: 1.5rem; }
.loc__pic img, .loc__pic .photo-empty { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent); mask-image: linear-gradient(to bottom, #000 74%, transparent); }
.loc__body { position: relative; flex: 1; display: grid; grid-template-rows: auto 1fr auto auto; gap: var(--s3); margin-top: calc(var(--s5) * -1); padding: 0 var(--s4) var(--s4); }
.loc h3 { color: var(--c-heading); font-size: 1.5rem; line-height: 1.75rem; }
.loc__best { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2); padding-top: var(--s3); border-top: 1px solid color-mix(in srgb, var(--c-heading) 14%, transparent); color: var(--c-heading); font-size: var(--t-small); line-height: 1.25rem; }
.loc__best .icon { flex: none; width: 1.5rem; height: 1.5rem; }
.loc__best span { color: var(--c-body); }
.loc .btn { width: 100%; justify-content: center; }

/* Galleries */
.mosaic--three .mosaic__item img { aspect-ratio: 3 / 2; }
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-bottom: var(--s5); }
.filters button { min-height: 2.75rem; padding: var(--s2) var(--s4); border: 1px solid var(--c-teal); border-radius: var(--r-full); background: transparent; color: var(--c-heading); font: 700 1rem/1.5rem var(--f-body); cursor: pointer; transition: transform 160ms var(--ease); }
.filters button:active { transform: scale(.97); }
.filters [aria-pressed="true"] { background: var(--c-action); color: #fff; }
.gal { columns: 2; column-gap: var(--s3); }
.gal__item { display: block; width: 100%; margin-bottom: var(--s3); padding: 0; border: 0; border-radius: var(--r-m); overflow: hidden; background: none; cursor: zoom-in; break-inside: avoid; }
.gal { transition: opacity 160ms var(--ease); }
.gal.is-swapping { opacity: 0; }
.gal__item[hidden] { display: none; }
.gal__item img { width: 100%; transition: transform 300ms var(--ease); }
@media (hover: hover) { .gal__item:hover img { transform: scale(1.03); } }
@media (min-width: 768px) { .gal { columns: 3; } }
@media (min-width: 1024px) { .gal { columns: 4; } .gal.gal--few { columns: 3; } .mosaic.mosaic--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Blog */
.posts { display: grid; gap: var(--s6) var(--s5); }
.post-card { display: grid; align-content: start; gap: var(--s2); color: inherit; text-decoration: none; }
.post-card[hidden] { display: none; }
.post-card__pic { overflow: hidden; border-radius: var(--r-l); }
.post-card__pic img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 300ms var(--ease); }
.post-card__title { color: var(--c-heading); font: 700 1.125rem/1.5rem var(--f-heading); }
@media (hover: hover) { .post-card:hover img { transform: scale(1.03); } }
@media (min-width: 640px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-head { padding-block: var(--s6) var(--s4); }
.post-head__inner { max-width: 52rem; display: grid; gap: var(--s3); }
.post-head h1 { font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); line-height: 1.15; }
.post-head a { color: inherit; }
.post-body { max-width: 52rem; }
.post-gallery { margin-top: var(--s6); }
.post-text { max-width: none; margin-top: var(--s6); }
.post-text h2 { font-size: var(--t-h3); line-height: 2rem; }
.post-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); margin-block: var(--s6) var(--s7); }

/* Destin, 30A and Oahu pages */
.area-switch { margin: 0; font-size: var(--t-small); line-height: 1.5rem; }
.choices { display: grid; gap: var(--s6); max-width: 60rem; margin-inline: auto; }
.choice { display: grid; justify-items: center; gap: var(--s4); text-align: center; }
.choice__pic { position: relative; width: min(100%, 20rem); }
.choice__pic .arch img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.choice__mark { position: absolute; right: calc(var(--s3) * -1); bottom: var(--s4); width: 5rem; height: 5rem; rotate: -10deg; }
.choice__copy { display: grid; justify-items: center; gap: var(--s2); max-width: 26rem; }
.choice__copy .btn { margin-top: var(--s2); }
@media (min-width: 640px) {
  .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice:nth-child(2) { margin-top: var(--s7); } /* the two sit a step apart, like footprints up a beach */
}
.area-intro { display: grid; gap: var(--s6); align-items: center; }
.area-intro__copy { display: grid; justify-items: start; gap: var(--s4); }
.area-intro__pic { overflow: hidden; border-radius: var(--r-l); }
.area-intro__pic img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.area-strip { margin-bottom: var(--s5); }
.area-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1) var(--s5); }
@media (min-width: 1024px) { .area-intro { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s8); } }

/* Contact and privacy */
.direct { display: grid; gap: var(--s2); justify-items: center; text-align: center; }
.direct__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1) var(--s5); }
@media (max-width: 359px) { .direct__links a { font-size: .875rem; } }
.rw__arrows[hidden] { display: none; }
.direct__photos { margin-top: var(--s6); }
.lost__icon { width: var(--s9); height: var(--s9); margin-bottom: var(--s3); }
.legal { display: grid; gap: var(--s3); max-width: 44rem; }
.legal h2 { margin-top: var(--s3); font-size: var(--t-h3); line-height: 2rem; }


/* The van scene: words ride a curved path */
.scene { max-width: 32rem; margin: calc(var(--s3) * -1) auto var(--s4); }
.scene svg { width: 100%; height: auto; overflow: visible; }
.scene text { fill: var(--c-heading); font: 700 22px var(--f-heading); }
.scene__words--phone { display: none; }
/* On a phone the words take a taller curve, so they can stay big enough to read. */
@media (max-width: 639px) {
  .teaser__grid .scene { margin: var(--s6) calc(var(--gutter) * -.5) 0; }
  .scene .scene__words { display: none; }
  .scene .scene__words--phone { display: block; font-size: 30px; }
}
.scene__van, .scene__sun { transition: transform 200ms linear; }

/* Scroll scenes live in space a section already has, so none of them adds height to the page */
[data-rider], .rider { transition: transform 200ms linear; }
/* Riders on a heading's squiggle */
.rider { position: absolute; left: 0; bottom: var(--wave-y); pointer-events: none; }
.rider svg { width: 100%; height: 100%; overflow: visible; }
.rider--surf { --c-papaya: var(--c-teal); width: 1.5em; height: .5em; margin: 0 0 -.15em -.75em; }
.rider--honu { width: .8em; height: .8em; margin: 0 0 -.3em -.4em; }
/* The flip-flop trail through the 1, 2, 3. It's drawn over the section, in the gap between the photos and the words. */
.trail { display: none; }
@media (min-width: 768px) {
  .how__layout { position: relative; }
  .trail { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
  .trail svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .trail__end { opacity: 0; transition: opacity 200ms var(--ease); }
  .trail__end.is-there { opacity: 1; }
  .trail-on .how__num { transition: scale 300ms cubic-bezier(.3, 1.7, .5, 1); }
  .trail-on .how__num:not(.is-passed) { scale: .72; }
}
/* The sun sets behind the arch beside the booking form */
.sunset { position: absolute; inset: 0; pointer-events: none; }
.sunset svg { width: 100%; height: 100%; overflow: visible; }
.book__photo .arch { position: relative; z-index: 1; }
.book__palm { z-index: 2; }
/* A photo that hasn't been added yet */
.photo-empty { display: grid; place-items: center; width: 100%; height: 100%; min-height: var(--s9); padding: var(--s4); background: var(--c-aqua); color: var(--c-teal); font-family: var(--f-label); font-size: var(--t-small); letter-spacing: .08em; text-align: center; }

/* Motion. All of it is short, and everything below switches off for reduced-motion visitors. */
.js .tint-sand, .js .tint-aqua, .js .tint-blush { background: transparent; }

/* Pages fade into each other instead of flashing white */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }

/* The header settles once the page moves */
.site-header { transition: box-shadow 200ms var(--ease); }
.site-header.is-scrolled { box-shadow: 0 1px 0 rgb(45 80 80 / .08), 0 8px 24px rgb(45 80 80 / .08); }
.brand img { transform-origin: left center; transition: transform 200ms var(--ease); }
.is-scrolled .brand img { transform: scale(.88); }

/* The phone menu slides down */
@media (max-width: 1023px) {
  .js .site-nav { display: block; visibility: hidden; opacity: 0; transform: translateY(calc(var(--s2) * -1)); transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 0s linear 200ms; }
  .js .site-nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
}

/* Buttons and cards lift a touch under the mouse */
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
  .btn:active { transform: scale(.97); }
  .worry__grid li:hover, .rw__card:hover, .package:hover, .loc:hover { transform: translateY(calc(var(--s1) * -1)); box-shadow: var(--shadow); }
  .promise__grid li:hover .promise__icon { transform: translateY(calc(var(--s1) * -1)) rotate(-4deg); }
}
.btn { transition: transform 160ms var(--ease), filter 160ms var(--ease), box-shadow 160ms var(--ease); }
.rw__card, .package, .loc { transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.promise__icon { transition: transform 200ms var(--ease); }

/* Things arrive one after another as they scroll in */
.reveal { opacity: 0; transform: translateY(var(--s4)); transition: opacity 500ms var(--ease), transform 500ms var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal .icon { transition: transform 500ms var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.reveal:not(.is-in) .icon { transform: translateY(var(--s2)) rotate(-6deg); }
.reveal.mosaic__item img, .reveal.feature__main img, .welcome__photo.reveal img { transition: transform 500ms var(--ease); }
.reveal:not(.is-in).mosaic__item img, .reveal:not(.is-in).feature__main img, .welcome__photo.reveal:not(.is-in) img { transform: scale(1.04); }

/* Photos rise a touch and come into focus */
.reveal.reveal--soft { transform: translateY(var(--s2)); filter: blur(6px); transition: opacity 600ms var(--ease), transform 700ms var(--ease), filter 700ms var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.reveal--soft.is-in { transform: none; filter: blur(0); }

@keyframes rise { from { opacity: 0; transform: translateY(var(--s3)); } }
.hero__copy > * { animation: rise 500ms var(--ease) both; }
.hero__copy > :nth-child(2) { animation-delay: 80ms; }
.hero__copy > :nth-child(3) { animation-delay: 160ms; }
.hero__copy > :nth-child(4) { animation-delay: 240ms; }
.page-hero__copy > * { animation: rise 500ms var(--ease) both; }
.page-hero__copy > :nth-child(2) { animation-delay: 80ms; }
.page-hero__copy > :nth-child(3) { animation-delay: 160ms; }
.page-hero__copy > :nth-child(4) { animation-delay: 240ms; }
.page-hero .arch { animation: rise 700ms var(--ease) both; }
.page-hero__trio .arch:nth-child(2) { animation-delay: 120ms; }
.page-hero__trio .arch:nth-child(3) { animation-delay: 240ms; }

/* Paper flowers and palms sway in a slow breeze */
@keyframes sway { 50% { transform: rotate(5deg); } }
.hero__copy > .hero__flower { transform-origin: 50% 90%; animation: rise 500ms var(--ease) both, sway 7s ease-in-out 500ms infinite; }
.book__palm { transform-origin: 50% 100%; animation: sway 8s ease-in-out infinite; }

/* Fold-outs ease open where the browser supports it */
@supports selector(::details-content) {
  .fold::details-content { opacity: 0; transition: opacity 200ms var(--ease), content-visibility 200ms allow-discrete; }
  .fold[open]::details-content { opacity: 1; }
}

/* Scroll-linked touches: big photos drift, side photos float, the suns turn */
@keyframes drift { from { transform: translateY(-3%) scale(1.08); } to { transform: translateY(3%) scale(1.08); } }
@keyframes float-up { from { translate: 0 var(--s4); } to { translate: 0 calc(var(--s4) * -1); } }
@keyframes float-down { from { translate: 0 calc(var(--s4) * -1); } to { translate: 0 var(--s4); } }
@keyframes turn { to { rotate: 120deg; } }
@supports (animation-timeline: view()) {
  .how__num .icon { animation: turn linear both; animation-timeline: view(); }
  @media (min-width: 768px) {
    .hero__frame > img { animation: drift linear both; animation-timeline: view(); }
    .cols__col:nth-child(2) { animation: float-up linear both; animation-timeline: view(); }
  }
  @media (min-width: 1024px) {
    .welcome__photo--left img { animation: float-up linear both; animation-timeline: view(); }
    .welcome__photo--right img { animation: float-down linear both; animation-timeline: view(); }
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  body { transition: none; }
  .hero__copy > *, .hero__copy > .hero__flower, .page-hero__copy > *, .page-hero .arch, .book__palm, .hero__frame > img, .how__num .icon, .cols__col, .welcome__photo img, .viewer[open], .viewer[open]::backdrop { animation: none; }
  .reveal, .reveal .icon, .reveal img { opacity: 1; transform: none !important; filter: none !important; transition: none; }
  .slider { overflow-x: auto; cursor: auto; touch-action: auto; }
  .slider__track { will-change: auto; }
  .trail { display: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}