/* About */
.about-intro__grid { display: grid; gap: var(--space-6); }
/* Width follows the 70vh cap so the 4:5 portrait is never cropped in landscape */
.about-intro__photo {
  aspect-ratio: 4 / 5;
  max-height: 70vh;
  width: min(100%, calc(70vh * 4 / 5));
  margin-inline: auto;
}
.about-intro__text .page-title { margin: 0 0 var(--space-5); }
.about-intro__text .lead { margin: 0 0 var(--space-5); max-width: 440px; }
@media (min-width: 1024px) {
  .about-intro__grid { grid-template-columns: 5fr 6fr; gap: 80px; align-items: center; }
  .about-intro__photo { max-height: none; width: 100%; }
}

.about-wide { height: clamp(320px, 50vw, 640px); width: 100%; }

.about-steps .h2 { text-align: center; margin: 0 0 56px; }
.about-steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.about-step__num {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 48px;
  line-height: 1;
  color: var(--color-number);
}
.about-step__title {
  margin: 16px 0 12px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .about-steps__list { grid-template-columns: repeat(3, 1fr); gap: 48px; }
}

.about-gallery { gap: 6px; }
@media (min-width: 768px) { .about-gallery { gap: var(--grid-gap); } }

.cta-panel {
  background: var(--color-panel);
  padding: 64px 24px;
  text-align: center;
}
.cta-panel .h2 { margin: 0 0 var(--space-4); }
.cta-panel .text { margin-inline: auto; margin-bottom: var(--space-5); }

/* Pricing */
.packages { display: grid; gap: 64px; max-width: 520px; margin-inline: auto; }
.package { display: flex; flex-direction: column; }
.package__media { aspect-ratio: 4 / 5; width: 100%; }
.package__body { display: flex; flex-direction: column; flex: 1; padding-top: 28px; }
.package__duration { margin: 0 0 var(--space-3); }
.package__name { margin: 0 0 var(--space-3); }
.package__desc {
  margin: 0 0 var(--space-5);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--color-muted);
}
.package__group + .package__group { margin-top: var(--space-6); }
.package__label {
  margin: 0 0 var(--space-3);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.package__features,
.package__options { list-style: none; margin: 0; padding: 0; }
.package__features li,
.package__option {
  padding: 10px 0;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
}
.package__features li:last-child,
.package__option:last-child { border-bottom: 1px solid var(--color-border); }
.package__option {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: 12px;
}
.package__option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.package__option-detail {
  font-size: calc(var(--fs-body-sm) - 1px);
  line-height: 1.6;
  color: var(--color-muted);
}
.package__option-price {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.package__price {
  margin: 24px 0;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--fs-price);
  letter-spacing: 0.06em;
}
/* Price and button sit at the card bottom, so they line up across a row */
.package .package__price { margin-top: auto; padding-top: 24px; }
.package__cta { align-self: flex-start; margin-top: auto; }
.package__price + .package__cta { margin-top: 0; }
.package--wide .package__cta { justify-self: start; margin-top: var(--space-6); }

/* Custom projects: no photo, sits under the packages */
.pricing-custom {
  display: grid;
  gap: var(--space-5);
  max-width: 520px;
  margin: clamp(64px, 8vw, 96px) auto 0;
  padding: 32px 20px;
  border: 1px solid var(--color-border);
}
.pricing-custom__title { margin: 0 0 var(--space-3); }
.pricing-custom__desc {
  max-width: 620px;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--color-muted);
}
.pricing-custom__aside { display: flex; flex-direction: column; align-items: flex-start; }
.pricing-custom__aside .package__price { margin: 0 0 var(--space-4); }

@media (min-width: 768px) {
  .pricing-custom {
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 48px;
    max-width: none;
    padding: 48px;
  }
  .pricing-custom__aside { align-items: flex-end; }
}

/* Tablet: photo beside the text, so four packages do not make a very long page */
@media (min-width: 768px) and (max-width: 1023px) {
  .packages { max-width: none; gap: 72px; }
  .package {
    display: grid;
    grid-template-columns: 5fr 7fr;
    column-gap: 32px;
    align-items: center;
  }
  .package__body { padding-top: 0; }
  .package--wide .package__media { aspect-ratio: 2 / 3; }
}

@media (min-width: 1024px) {
  .packages { grid-template-columns: repeat(3, 1fr); gap: 72px 32px; max-width: none; }
  /* Wide package: photo in the first column, body across the other two */
  .package--wide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 32px;
    align-items: center;
  }
  .package--wide .package__media { aspect-ratio: 2 / 3; }
  .package--wide .package__body {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    align-content: center;
    padding: 0 0 0 clamp(0px, 2vw, 24px);
  }
  .package--wide .package__body > * { grid-column: 1 / -1; }
  .package--wide .package__body > .package__group { grid-column: auto; margin-top: 0; }
  .package--wide .package__desc { max-width: 560px; }

  .pricing-custom { gap: 56px; padding: 48px 56px; }
}

.extras { background: var(--color-panel); padding: 32px 20px; }
.extras .h3 { margin: 0 0 var(--space-5); text-align: center; }
.extras__list { list-style: none; margin: 0; padding: 0; }
.extras__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 14px;
}
.extras__price { font-family: var(--font-head); font-weight: 500; font-size: 13px; white-space: nowrap; }
.extras__note {
  margin: 24px 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--color-muted);
}
@media (min-width: 768px) {
  .extras { padding: 56px; }
  .extras__list { columns: 2; column-gap: 56px; }
  .extras__item { break-inside: avoid; }
}

/* One section gap (not two) between the offers, the extras panel and the notes */
.pricing-offers,
.pricing-extras { padding-bottom: 0; }
.pricing-faq__title { margin: 0 0 40px; text-align: center; }
.pricing-faq__list { display: grid; gap: 32px; margin: 0; }
.pricing-faq__item { padding-top: 20px; border-top: 1px solid var(--color-border); }
.pricing-faq__q {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.pricing-faq__a { max-width: none; margin: 0; }
@media (min-width: 768px) {
  .pricing-faq__title { margin-bottom: 56px; }
  .pricing-faq__list { grid-template-columns: repeat(2, 1fr); gap: 40px 48px; }
}
@media (min-width: 1024px) {
  .pricing-faq__list { grid-template-columns: repeat(3, 1fr); }
}

/* Contact */
.contact__grid { display: grid; gap: var(--space-6); }
.contact__media { aspect-ratio: 4 / 5; max-height: 60vh; width: 100%; }
.contact__body .page-title { margin: 0 0 var(--space-4); }
.contact__form { display: grid; gap: 24px; margin-top: var(--space-6); }
.field { display: flex; flex-direction: column; min-width: 0; }
.field__label {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.field__input {
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid #8f8a82; /* 3.4:1 on white (WCAG 1.4.11) */
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px; /* below 16px iOS Safari zooms on focus */
  line-height: 1.5;
  appearance: none;
  transition: border-color var(--dur-fast) var(--ease);
}
@media (min-width: 1024px) {
  .field__input { font-size: 14px; }
}
/* Date input: same height as text inputs, left-aligned value (Chromium, iOS WebKit) */
.field__input::-webkit-date-and-time-value { min-height: 1.5em; margin: 0; text-align: left; }
.field__input::-webkit-datetime-edit { padding: 0; }
.field__input::-webkit-datetime-edit-fields-wrapper { padding: 0; }
textarea.field__input { resize: vertical; min-height: 120px; }
select.field__input {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 24px;
}
/* Forced colors drop gradient backgrounds: restore the native select arrow */
@media (forced-colors: active) {
  select.field__input { appearance: auto; background-image: none; padding-right: 0; }
}
.field__input:focus { border-bottom-color: var(--color-dark); }
.field__input.is-invalid { border-bottom-color: #a33a3a; }
.field__error {
  margin: 6px 0 0;
  min-height: 0;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: #a33a3a;
}
.field__error:empty { display: none; }
.contact__submit { align-self: flex-start; }
.contact__submit[disabled] { opacity: 0.6; cursor: wait; }
.form-status {
  margin: var(--space-4) 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
}
.form-status:empty { display: none; }
.contact__details { margin: 48px 0 0; }
.contact__details dt { margin: 24px 0 4px; }
.contact__details dt:first-child { margin-top: 0; }
.contact__details dd { margin: 0; font-family: var(--font-body); font-size: 14px; }
/* Tap target of at least 44px without a change to the line box */
.contact__details dd a { display: inline-block; padding-block: 10px; margin-block: -10px; }
.contact__details a:hover { opacity: 0.6; }

@media (min-width: 768px) {
  .contact__form { grid-template-columns: 1fr 1fr; gap: 28px 32px; }
  .field--full { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .contact__grid { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
  .contact__media {
    aspect-ratio: 2 / 3;
    max-height: none;
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}