/* Landing page. Shared tokens, buttons and the compare slider live in styles.css. */
.landing {
  --m: clamp(20px, 5.5vw, 88px);
  --gap-section: clamp(104px, 14vw, 216px);
  --step-small: clamp(.8125rem, .79rem + .1vw, .875rem);
  --step-body: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(3rem, 7.2vw, 7.5rem);
  font-family: var(--font-display);
  font-size: var(--step-body);
  line-height: 1.45;
}
.landing h1, .landing h2, .landing h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.03em; line-height: .98; margin: 0; }
.landing h2 { font-size: var(--step-head); }
.landing p { margin: 0; }
.landing img, .landing video { width: 100%; height: auto; }
.landing .btn { font-weight: 500; }
.l-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-underline-offset: 4px; }

/* Parts of a section arrive in reading order, once. Without script everything is simply there. */
.js [data-rise] { opacity: 0; translate: 0 24px; }
.js .in [data-rise] { opacity: 1; translate: 0 0; transition: opacity 700ms var(--ease-out) var(--d, 0ms), translate 700ms var(--ease-out) var(--d, 0ms); }

/* Hero: one house, light shifting from evening to dusk. */
.l-hero { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; /* taste-skill-ignore: fallback for browsers without svh */ min-height: 100svh; padding: 0 var(--m) clamp(24px, 4vw, 56px); color: var(--on-photo); overflow: hidden; background: #1a1d12; }
.l-hero-photos, .l-hero-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.l-hero-dusk { opacity: 0; animation: dusk 5.2s ease-in-out infinite; }
.l-hero.off .l-hero-dusk, .l-hero.off .l-state span { animation-play-state: paused; }
/* Two seconds on each picture, with a 0.6 second fade between them. */
@keyframes dusk { 0%, 38.5% { opacity: 0; } 50%, 88.5% { opacity: 1; } 100% { opacity: 0; } }
/* One label swaps for the other in the middle of the fade, so they never sit on top of each other. */
.l-state { position: absolute; z-index: 2; top: calc(max(10px, env(safe-area-inset-top)) + 54px); left: var(--m); display: grid; }
.l-state span { grid-area: 1 / 1; justify-self: start; padding: clamp(8px, .8vw, 12px) clamp(18px, 1.8vw, 28px); border-radius: 999px; background: var(--on-photo); color: #2a340b; font-size: clamp(1.25rem, 1rem + 1.1vw, 2rem); font-weight: 500; line-height: 1.1; letter-spacing: -.01em; }
.l-state-before { animation: state-before 5.2s linear infinite; }
.l-state-after { opacity: 0; visibility: hidden; animation: state-after 5.2s linear infinite; }
@keyframes state-before { 0%, 38.5% { opacity: 1; visibility: visible; } 44.25%, 94.25% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } }
@keyframes state-after { 0%, 44.25% { opacity: 0; visibility: hidden; } 50%, 88.5% { opacity: 1; visibility: visible; } 94.25%, 100% { opacity: 0; visibility: hidden; } }
.l-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; /* taste-skill-ignore: neutral scrim over a photo */ background: linear-gradient(to bottom, rgba(14, 16, 10, .55), rgba(14, 16, 10, 0) 22%), linear-gradient(to top, rgba(14, 16, 10, .82), rgba(14, 16, 10, .5) 28%, rgba(14, 16, 10, 0) 62%); }
.l-nav, .l-hero-copy { position: relative; z-index: 1; }
.l-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: max(10px, env(safe-area-inset-top)); }
.l-name { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; min-height: 44px; font-size: var(--step-lead); font-weight: 500; letter-spacing: -.03em; text-decoration: none; }
.l-name .logo-mark { flex: none; width: 28px; height: 28px; border-radius: 7px; background: var(--brand-fill, #38450f); color: var(--brand-ink, #ecebe7); display: grid; place-items: center; }
.l-name .logo-mark::before { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill-rule='evenodd' stroke='%23000' stroke-width='1.400' stroke-linejoin='round' d='M16 6.500 27 16v10H5V16Z M12.700 15.700v6.600h6.600v-6.600Z'/%3E%3C/svg%3E") center / 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill-rule='evenodd' stroke='%23000' stroke-width='1.400' stroke-linejoin='round' d='M16 6.500 27 16v10H5V16Z M12.700 15.700v6.600h6.600v-6.600Z'/%3E%3C/svg%3E") center / 100% no-repeat; }
.l-links { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); font-size: var(--step-body); }
.l-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; text-underline-offset: 5px; }
.l-hero-copy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.l-hero h1 { font-size: var(--step-display); line-height: .95; }
.l-hero-side { justify-self: end; max-width: 40ch; }
.l-hero-side p { margin-bottom: 20px; }
.l-on-photo { background: var(--on-photo); color: #2a340b; }
@media (hover: hover) and (pointer: fine) {
  .l-on-photo:hover { background: #fff; }
  .l-links a:hover, .l-name:hover { text-decoration: underline; }
}


/* The whole offer at a glance, before any demo. */
.l-services { padding: var(--gap-section) var(--m) 0; }
.l-service-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2vw, 32px); margin: 40px 0 0; padding: 0; list-style: none; }
.l-service-list a { display: grid; align-content: start; gap: 8px; height: 100%; text-decoration: none; touch-action: manipulation; }
.l-service-list strong { font-size: var(--step-lead); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--line); }
.l-service-list span { font-size: 1rem; }
.l-service-list em { font-size: var(--step-small); font-style: normal; font-weight: 500; color: var(--muted); }
.l-service-list a:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .l-service-list a:hover strong { text-decoration-color: currentColor; } }
#services, #staging, #improve, #video, #editors { scroll-margin-top: 24px; }
.l-band-head strong, .l-hero-side strong { font-weight: 500; }

/* Both ways of improving a photo, side by side. */
.l-improve { padding-top: var(--gap-section); }
.l-improve-demos { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.34fr); gap: 4px; align-items: start; }
.l-compare { aspect-ratio: 994 / 742; width: 100%; border-radius: 0; background: var(--field); }
.l-compare > .after, .l-compare > .before { object-fit: cover; height: 100%; }
.compare.l-compare .tag { font-size: var(--step-small); }
.l-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.l-pair-side { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--field); }
.l-pair-side img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.l-editors { padding: var(--gap-section) var(--m) 0; }
.l-editors .l-band-head { padding: 0; }
.l-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.l-shots figure { margin: 0; }
.l-shots figcaption { margin-bottom: 12px; font-size: var(--step-lead); font-weight: 500; letter-spacing: -.02em; }

/* The empty room beside a quick run through what it became: 1 second each, with a 0.15 second change. */
.l-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.l-duo-side { position: relative; aspect-ratio: 800 / 533; overflow: hidden; background: var(--field); }
.l-duo-side img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.l-pill { position: absolute; left: clamp(12px, 1.6vw, 24px); bottom: clamp(12px, 1.6vw, 24px); padding: clamp(6px, .6vw, 10px) clamp(14px, 1.4vw, 22px); border-radius: 999px; background: var(--on-photo); color: #2a340b; font-size: var(--step-lead); font-weight: 500; line-height: 1.1; letter-spacing: -.01em; }
.l-flick-item { position: absolute; inset: 0; opacity: 0; visibility: hidden; animation: flick 3s linear infinite; }
.l-flick-item:nth-child(2) { animation-delay: -2s; }
.l-flick-item:nth-child(3) { animation-delay: -1s; }
.l-flick.off .l-flick-item { animation-play-state: paused; }
@keyframes flick { 0% { opacity: 0; visibility: visible; } 5%, 33.33% { opacity: 1; visibility: visible; } 38.33% { opacity: 0; visibility: hidden; } 100% { opacity: 0; visibility: hidden; } }

.l-band { padding-top: var(--gap-section); }
.l-band-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; padding: 0 var(--m); margin-bottom: 56px; }
.l-band-head h2 { grid-column: 1 / span 7; }
.l-band-head p { grid-column: 8 / -1; max-width: 44ch; }
.l-band-head strong { font-weight: 500; }

/* A still photo that comes to life: the same frame, then the clip made from it. */
.l-demo { padding-top: var(--gap-section); }
.l-demo-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--field); }
.l-demo-stage video, .l-demo-stage img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.l-demo-stage img { transition: opacity 400ms ease; }
.l-demo-stage img.off { opacity: 0; }
.l-demo-stage .l-pill { top: clamp(12px, 1.6vw, 24px); bottom: auto; }
.l-demo-toggle { position: absolute; top: clamp(12px, 1.6vw, 24px); right: clamp(12px, 1.6vw, 24px); }

/* Every step on show, at staggered heights. */
.l-steps { padding: var(--gap-section) var(--m) 0; }
.l-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: clamp(16px, 1.7vw, 24px); margin: 48px 0 0; padding: 0; list-style: none; }
.l-row li { display: flex; flex-direction: column; }
.l-row strong { font-size: var(--step-lead); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.l-row p { margin-top: 8px; font-size: 1rem; }
.l-row img, .l-row video { margin-top: auto; padding-top: 0; aspect-ratio: 4 / 5; object-fit: cover; background: var(--field); }
.l-row li::after { content: ""; order: 1; height: var(--gap); flex: none; }
.l-row img, .l-row video { order: 2; margin-top: 0; }

/* Prices like a menu. */
.l-pricing { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: var(--gap-section) var(--m) 0; scroll-margin-top: 16px; }
.l-pricing-head { grid-column: 1 / span 3; }
.l-pricing-head img { margin-top: 40px; aspect-ratio: 4 / 5; object-fit: cover; }
.l-menu { grid-column: 5 / -1; columns: 2; column-gap: 64px; }
.l-group { break-inside: avoid; padding-bottom: 48px; }
.landing .l-group h3 { font-size: var(--step-lead); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 22px; }
.l-item { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.l-item strong { display: block; font-weight: 400; }
.l-item div span { display: block; max-width: 36ch; color: var(--muted); font-size: 1rem; }
.l-item b { flex: none; font-weight: 400; font-variant-numeric: tabular-nums; }
.l-group-note { color: var(--muted); font-size: 1rem; max-width: 40ch; }

/* Questions beside a tall photograph. */
.l-faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; margin-top: var(--gap-section); padding: 0 var(--m) 80px; background: var(--field); }
.l-faq-copy { grid-column: 1 / span 5; padding-top: clamp(56px, 7vw, 112px); }
.l-facts { list-style: none; margin: 28px 0 44px; padding: 0; }
.l-facts li { margin-bottom: 4px; }
.l-qs details { padding-bottom: 28px; }
.l-qs summary { position: relative; display: flex; align-items: center; min-height: 44px; padding-right: 36px; font-size: var(--step-lead); line-height: 1.15; letter-spacing: -.01em; cursor: pointer; list-style: none; touch-action: manipulation; }
.l-qs summary::-webkit-details-marker { display: none; }
.l-qs summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.l-qs details[open] summary::after { margin-top: -2px; transform: rotate(-135deg); }
.l-qs summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.l-qs details p { margin-top: 8px; max-width: 52ch; }
.l-faq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 12px; }
.l-faq-photos { grid-column: 7 / -1; position: relative; margin-top: calc(-1 * clamp(32px, 5vw, 72px)); }
.l-faq-photos .tall { aspect-ratio: 3 / 4; object-fit: cover; }
.l-faq-photos .square { position: absolute; left: -40px; bottom: 40px; width: 33%; aspect-ratio: 1; object-fit: cover; }

/* The page ends quietly, on one sentence. */
.l-cta { padding: 30svh var(--m) 20svh; }
.landing .l-cta h2 { max-width: 28ch; font-size: var(--step-lead); line-height: 1.2; letter-spacing: -.015em; }
.l-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 24px; }

.l-footer { padding: clamp(32px, 4vw, 64px) var(--m) calc(32px + env(safe-area-inset-bottom)); background: var(--field-1); color: var(--field-1-ink); }
.l-wordmark { display: block; white-space: nowrap; font-size: 17vw; font-weight: 500; line-height: .95; letter-spacing: -.04em; margin-left: -.02em; text-decoration: none; white-space: nowrap; }
.l-footer-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-top: 72px; }
.l-footer-reach { grid-column: 1 / span 5; display: grid; justify-items: start; gap: 4px; font-size: var(--step-lead); }
.l-footer-reach a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; text-underline-offset: 5px; }
.l-footer-links { grid-column: 7 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.landing .l-footer-links h2 { font-size: 1rem; font-weight: 500; letter-spacing: 0; line-height: 1.3; margin-bottom: 10px; }
.l-footer-links a { display: flex; align-items: center; min-height: 36px; text-decoration: none; text-underline-offset: 4px; }
.l-footer-end { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-top: 72px; font-size: var(--step-small); }
.l-footer-end a { display: inline-flex; align-items: center; min-height: 44px; }
@media (hover: hover) and (pointer: fine) { .l-footer a:hover { text-decoration: underline; } }

@media (max-width: 900px) {
  .l-hero-copy { grid-template-columns: minmax(0, 1fr); }
  .l-hero-side { justify-self: start; }
  .l-pricing, .l-faq, .l-footer-row { display: block; }
  .l-improve-demos { grid-template-columns: minmax(0, 1fr); }
  .l-service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; gap: 28px 24px; }
  .l-shots { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .l-service-list a { min-height: 44px; }
  .l-band-head { display: block; margin-bottom: 32px; }
  .l-band-head p { margin-top: 16px; }
  .l-duo { grid-template-columns: minmax(0, 1fr); }
  .l-pricing-head img { width: 60%; margin: 24px 0 32px; }
  .l-menu { columns: 1; }
  .l-faq { padding-bottom: 56px; }
  .l-faq-copy { padding-top: 0; }
  .l-faq-photos { margin: 0 0 40px; padding-top: 0; }
  .l-faq { display: flex; flex-direction: column; align-items: stretch; }
  .l-faq-photos { order: -1; margin-top: 0; margin-inline: calc(-1 * var(--m)); }
  .l-faq-photos .tall { aspect-ratio: 4 / 5; }
  .l-faq-photos .square { left: auto; right: var(--m); bottom: -24px; width: 38%; }
  .l-faq-actions .btn { width: 100%; }
  .l-cta { padding-top: 16svh; padding-bottom: 22svh; }
  .l-footer-links { margin-top: 40px; }
  .l-footer-end { margin-top: 48px; }
}
@media (max-width: 640px) { .l-service-list { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
@media (max-width: 440px) { .l-signup { display: none !important; } }
@media (min-width: 901px) and (max-width: 1180px) { .l-service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1180px) {
  .l-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 56px; }
  .l-row li::after { height: calc(var(--gap) / 3); }
}
@media (max-width: 640px) {
  /* One column, but the pictures keep their uneven widths. */
  .l-row { grid-template-columns: minmax(0, 1fr); row-gap: 48px; margin-top: 32px; }
  .l-row li::after { height: 16px; }
  .l-row li:nth-child(3n + 1) img, .l-row li:nth-child(3n + 1) video { width: 100%; }
  .l-row li:nth-child(3n + 2) img, .l-row li:nth-child(3n + 2) video { width: 72%; }
  .l-row li:nth-child(3n) img, .l-row li:nth-child(3n) video { width: 60%; align-self: flex-end; }
  .l-hero::after { background: linear-gradient(to bottom, rgba(14, 16, 10, .55), rgba(14, 16, 10, 0) 18%), linear-gradient(to top, rgba(14, 16, 10, .88), rgba(14, 16, 10, .62) 42%, rgba(14, 16, 10, 0) 70%); } /* taste-skill-ignore: neutral scrim over a photo */
}
@media (prefers-reduced-motion: reduce) {
  .js [data-rise] { translate: 0 0; }
  .l-hero-dusk, .l-state span { animation: none; }
  .l-flick-item { animation: none; }
  .l-flick-item:first-child { opacity: 1; visibility: visible; }
}

/* The longer name and house mark leave no room for every link on phones. Log in always stays. */
.l-links a { white-space: nowrap; }
@media (max-width: 540px) { .l-links a[href="#services"] { display: none; } }
@media (max-width: 374px) { .l-links a[href="#pricing"] { display: none; } }