/* Shared marketing components. Palette: /design/main/tokens.css.
   Never load this file on the separate onsite offer or demo designs. */
.studio-page {
  color-scheme: light;
  background: var(--paper);
  color: var(--ink);
}

.studio-page :focus-visible { outline-color: var(--accent-text); }

/* Keep the portrait clear of the cut-out headline; stack it below on small screens. */
.studio-page .hero--portrait .hero-background { background: #dceef3; }
.studio-page .hero--portrait .hero-background img { object-position: right top; }
.studio-page .hero--portrait .hero-copy { width: 57%; }

@media (min-width: 1101px) and (max-width: 1200px) {
  .studio-page .hero--portrait .hero-copy { width: 54%; }
  .studio-page .hero--portrait h1 { font-size: 45px; }
}

@media (max-width: 1100px) {
  .studio-page .hero--portrait {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .studio-page .hero--portrait .hero-inner {
    order: 0;
    min-height: 0;
    padding-bottom: 0;
  }
  .studio-page .hero--portrait .hero-copy {
    width: 100%;
    max-width: none;
    padding: 6px 6px 28px;
    border-radius: 0;
  }
  .studio-page .hero--portrait .hero-copy::before,
  .studio-page .hero--portrait .hero-copy::after { content: none; }
  .studio-page .hero--portrait .hero-background {
    position: relative;
    inset: auto;
    order: 1;
    z-index: auto;
    height: clamp(300px, 80vw, 460px);
  }
}

.studio-page .header-background,
.studio-page .hero-copy { background: var(--paper); }
.studio-page .hero-copy::before,
.studio-page .hero-copy::after { box-shadow: -8px -8px 0 8px var(--paper); }
.studio-page .wordmark img { filter: brightness(0) saturate(100%); opacity: .88; }
.studio-page .hero h1 span,
.studio-page .studio-intro h2 span { color: var(--accent-text); }
.studio-page .hero-free-preview strong { color: var(--ink); }
.studio-page .hero-offer-price:hover,
.studio-page .hero-price-link:hover,
.studio-page .site-footer address a:hover,
.studio-page .footer-links :is(a, button):hover { color: var(--accent-text); }
.studio-page .site-header > .button { padding-right: 12px; }
.studio-page .site-header > .button:not(.portfolio-copy .button) > .nextapp-arrow,
.studio-page .site-header > .button:not(.portfolio-copy .button):is(:hover, :focus-visible) > .nextapp-arrow {
  background: transparent url('/assets/nextapp-arrow.svg') center / contain no-repeat;
  color: inherit;
  transform: none;
}
.studio-page .site-header > .button:not(.portfolio-copy .button) > .nextapp-arrow::before { content: none; }

.studio-page .button {
  --button-rest-bg: var(--surface);
  --button-rest-fg: var(--ink);
}
.studio-page .button.button-primary { --button-rest-bg: var(--accent); }
.studio-page .button.button-outline { --button-rest-bg: #e3edf0; }
.studio-page #questionnaire-start { gap: 30px; }
.studio-page .button:not(.portfolio-copy .button)::before {
  transition: none;
}
.studio-page .button.button-primary:is(:hover, :focus-visible) { --button-rest-bg: #7cddfb; }
.studio-page .button.button-outline:is(:hover, :focus-visible) { --button-rest-bg: #cddfe5; }
.studio-page .button:not(.portfolio-copy .button) > .nextapp-arrow {
  background: var(--ink);
  color: var(--white);
}
.studio-page .portfolio-copy .button { color: var(--ink); }
.studio-page .pricing-card > .button { --button-rest-bg: var(--accent); }
.studio-page .button,
.studio-page .button::before,
.studio-page .button > .nextapp-arrow { transition: none; }
.studio-page .button:not(.portfolio-copy .button):is(:hover, :focus-visible) > .nextapp-arrow {
  background: var(--accent-text);
  color: var(--white);
  transform: none;
}
.studio-page .portfolio-copy .button:is(:hover, :focus-visible),
.studio-page .portfolio-copy .button:is(:hover, :focus-visible) > .nextapp-arrow { color: var(--accent-text); }
.studio-page .portfolio-copy .button > .nextapp-arrow { width: 32px; height: 32px; transform: none; }

.studio-page .pricing-card { background: #e5f1f5; }
.studio-page .included-list--static {
  list-style: disc;
  padding-left: 1.2em;
}
.studio-page .included-list--static > li {
  border: 0;
  margin-bottom: 22px;
  padding-left: .3em;
  font-size: 16px;
  line-height: 1.65;
}
.studio-page .included-list--static > li::marker { color: var(--accent-text); }
.studio-page .included-list--static strong { font-weight: 600; }
.studio-page .package-custom { background: #d3e7ef; }
.studio-page .steps li,
.studio-page .step-number,
.studio-page .faq-list details { border-color: var(--line); }
.studio-page .step-number { background: #e5f1f5; }
.studio-page .faq-section { background: #edf3f4; }
.studio-page .booking-phone a { color: var(--ink); }

.studio-page .site-footer { background: #edf3f4; color: var(--ink); }
.studio-page .footer-background video { opacity: .12; }
.studio-page .footer-overlay { background: #edf3f4ed; }
.studio-page dialog { background: var(--paper); color: var(--ink); }
.studio-page .dialog-close { background: #e3edf0; }

/* A low marker stroke keeps the upper part of each letter on the paper. */
/* His left shoulder meets the card's right edge, like the doorway in the photo. */
.studio-page .booking-panel--personal {
  --portrait-width: 420px;
  position: relative;
  display: block;
  padding-top: 48px;
}
.studio-page .booking-panel--personal .booking-card {
  width: calc(100% - var(--portrait-width) * .84);
  min-height: 550px;
  padding: 48px 70px 48px 48px;
  background: #e5f1f5;
  border-radius: 28px 8px 0 28px;
}
.studio-page .booking-panel--personal .booking-copy h2 { font-size: clamp(36px, 3.8vw, 54px); }
.studio-page .booking-panel--personal .booking-action {
  border: 0;
  padding: 26px 0 0;
  max-width: 510px;
}
.studio-page .booking-panel--personal .booking-action h3 { margin: 0 0 12px; }
.studio-page .booking-panel--personal .booking-action > p { max-width: 44ch; }
.studio-page .booking-panel--personal .booking-phone { margin-bottom: 0; }
.studio-page .booking-portrait {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--portrait-width);
  pointer-events: none;
}
.studio-page .booking-portrait img { display: block; width: 100%; height: auto; }
@media (min-width: 781px) and (max-width: 1100px) {
  .studio-page .booking-panel--personal { --portrait-width: 340px; }
  .studio-page .booking-panel--personal .booking-card { padding: 36px 44px 36px 30px; }
}
@media (max-width: 780px) {
  .studio-page .booking-panel--personal {
    padding-top: 0;
    background: #e5f1f5;
    border-radius: 28px;
    overflow: hidden;
    isolation: isolate;
  }
  .studio-page .booking-panel--personal .booking-card {
    width: 100%;
    min-height: 0;
    padding: 32px 26px 24px;
    background: transparent;
    border-radius: 0;
  }
  .studio-page .booking-panel--personal .booking-copy h2 { font-size: clamp(30px, 6vw, 42px); }
  .studio-page .booking-panel--personal .booking-action { padding-top: 24px; }
  .studio-page .booking-portrait {
    --portrait-height: clamp(310px, 85vw, 380px);
    position: relative;
    width: 100%;
    height: var(--portrait-height);
    margin-top: 4px;
    isolation: isolate;
  }
  .studio-page .booking-portrait::before {
    content: '';
    position: absolute;
    z-index: -1;
    /* Match the upright edge to his left shoulder; soften only the entry above it. */
    inset: 0 0 0 auto;
    width: calc(var(--portrait-height) * .63);
    background: var(--paper);
    border-radius: 48px 0 0 0;
  }
  .studio-page .booking-portrait img {
    position: absolute;
    right: 0;
    bottom: -2px;
    width: auto;
    height: 100%;
  }
}

.studio-page .text-marker {
  color: inherit;
  background: linear-gradient(var(--marker), var(--marker)) no-repeat 0 88% / 100% .62em;
  padding: 0 .055em;
  margin: 0 -.055em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Section titles lead directly, without an eyebrow or an empty label column. */
.studio-page .studio-intro,
.studio-page .portfolio-heading,
.studio-page .section-heading { grid-template-columns: minmax(0, 1fr); }
.studio-page .studio-intro h2 { max-width: 38ch; }
.studio-page .faq-grid h2,
.studio-page .booking-copy h2,
.studio-page .portfolio-invitation h3,
.studio-page .entry-price { margin-top: 0; }

/* A simple brand signature replaces the decorative direction diagram. */
.studio-page .direction-art {
  display: flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin-bottom: 32px;
  color: var(--ink);
  font: 550 clamp(60px, 6.5vw, 92px) / 1.15 var(--font);
  letter-spacing: -.05em;
  pointer-events: none;
}

@media (max-width: 780px) {
  .studio-page .portfolio-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 8px;
  }
  .studio-page .portfolio-track::-webkit-scrollbar { display: none; }
  .studio-page .portfolio-track.is-swiping { scroll-snap-type: none; }
  .studio-page .portfolio-track > .portfolio-card,
  .studio-page .portfolio-track > .portfolio-invitation {
    flex: 0 0 100%;
    min-width: 0;
    margin-top: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .studio-page .portfolio-copy { flex-wrap: wrap; gap: 12px 16px; }
  .studio-page .portfolio-copy .button { font-size: 12px; gap: 14px; }
  .studio-page .portfolio-navigation:not([hidden]) {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
  }
  .studio-page .portfolio-navigation button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--ink);
    color: var(--white);
    border: 0;
    border-radius: 50%;
  }
  .studio-page .portfolio-navigation button:not(:disabled):is(:hover, :focus-visible) { background: var(--accent-text); }
  .studio-page .portfolio-navigation button:disabled { opacity: .3; cursor: default; }
  .studio-page .portfolio-navigation .nextapp-arrow {
    width: 24px;
    height: 24px;
    color: inherit;
    background: currentColor;
    mask: url('/assets/nextapp-chevron.svg') center / contain no-repeat;
    border-radius: 0;
    transition: none;
  }
  .studio-page .portfolio-position { text-align: center; font-size: 13px; }
  .studio-page .portfolio-swipe-hint { display: block; color: var(--muted); font-size: 11px; margin-bottom: 3px; }
  .studio-page .portfolio-carousel > .portfolio-invitation { margin-top: 55px; }
  .studio-page .desktop-nav {
    background: var(--paper);
    border-color: var(--line);
    box-shadow: 0 14px 35px #102d391a;
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-page .button:not(.portfolio-copy .button)::before { transition: none; }
}