/* Warm glass throughout; mobile layouts show more of the page at once. */
.contact {
  --contact-ink: #59443b;
  --contact-muted: #827164;
  background: radial-gradient(ellipse at 8% 0%, #fffaf0c9, transparent 60%), #eee7de;
}
.contact h2, .contact-email, .contact-phone, .contact .form-title { color: #59443b; }
.contact h2 em { color: #a37b60; }
.contact .eyebrow, .contact-instagram { color: #8b7564; }
.contact-email { border-color: #c9b8a9; }
.contact .contact-form {
  background: linear-gradient(135deg, #fffdf9ed, #fbf5eddc);
  box-shadow: inset 0 1px 0 #fff, 0 13px 40px #59443b08;
}
.contact .contact-form label { color: #756254; }
.contact .contact-form input:not([type=checkbox]),
.contact .contact-form textarea, .contact .contact-form select {
  background: #fcf8f2;
  border-color: #e3d7ca;
  color: #59443b;
  accent-color: #84634e;
}
.contact .contact-form input::placeholder,
.contact .contact-form textarea::placeholder { color: #9b8878; }
.contact .contact-form input:focus-visible,
.contact .contact-form select:focus-visible,
.contact .contact-form textarea:focus-visible {
  outline-color: #b28e71;
  border-color: #b28e71;
}
.contact .checkbox-label, .contact #contact-result p { color: #827164; }
.contact .checkbox-label input { accent-color: #84634e; }
.contact .contact-form .button-dark {
  background: linear-gradient(120deg, #59443b, #87634d);
  border-color: #6b4d3d;
  box-shadow: inset 0 1px 0 #ffffff25, 0 8px 20px #59443b16;
  color: #fffaf4;
}
.contact .contact-form .button-dark:hover {
  background: linear-gradient(120deg, #49362d, #977057);
  box-shadow: inset 0 1px 0 #ffffff35, 0 11px 25px #59443b22;
}
.contact .form-note { color: #9b8878; }
.contact #contact-result textarea { background: #fffdf9; }

/* The photograph itself is clipped on mobile as well as its surrounding card. */
.services .service-grid .service-card-image { isolation: isolate; }

@media (max-width: 760px) {
  html { scroll-padding-top: 74px; }
  .section-pad { padding: 32px 18px; }
  .section-label { padding-bottom: 12px; margin-bottom: 19px; font-size: 8px; }
  .section-heading { margin-bottom: 19px; }
  h2, .intention h2, .studio-copy h2, .faq h2 {
    font-size: clamp(25px, 6.9vw, 30px);
    line-height: 1.2;
  }
  .section-heading > p { font-size: 11px; line-height: 1.7; margin-top: 12px; }

  .site-header, .site-header.scrolled {
    left: 10px;
    right: 10px;
    top: 8px;
    padding: 6px 10px;
    gap: 7px;
  }
  .site-header .brand > span, .site-header.scrolled .brand > span,
  .page-mode .site-header .brand > span { font-size: 18px; }
  .site-header .brand-symbol, .site-header.scrolled .brand-symbol {
    width: 23px;
    height: 28px;
  }
  .site-header .brand small { font-size: 4.5px; letter-spacing: .09em; margin-top: 3px; }
  .site-header .brand { gap: 6px; }
  .site-header .cart-link, .site-header .menu-toggle {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
  .site-header .cart-link svg { width: 17px; height: 19px; }
  .site-header .cart-link [data-cart-count] {
    min-width: 17px;
    height: 17px;
    font-size: 8px;
    right: -2px;
    top: -2px;
  }
  .page-mode .site-header, .page-mode .site-header.scrolled {
    width: calc(100% - 36px);
    padding: 12px 0 0;
    margin-bottom: 10px;
    top: auto;
    left: auto;
    right: auto;
  }
  .mobile-nav { padding-top: 90px; gap: 10px; }
  .mobile-nav > a { font-size: 29px; min-height: 46px; }

  .hero { min-height: 440px; height: 62svh; max-height: 530px; border-radius: 12px; }
  .hero-copy { left: 18px; right: 18px; top: 25%; }
  .hero h1 { font-size: clamp(30px, 8.1vw, 39px); line-height: 1.12; }
  .hero-copy .eyebrow { margin-bottom: 13px; }
  .hero-description { font-size: 11px; line-height: 1.7; margin: 14px 0 17px; }
  .hero .button { min-height: 44px; font-size: 11px; }
  .hero-footer { left: 18px; right: 18px; bottom: 15px; padding-top: 10px; }

  .intention-grid { gap: 18px; }
  .intention-copy p { font-size: 12px; line-height: 1.8; }
  .intention-copy p:first-child { font-size: 12px; }
  .palette { margin-top: 14px; }
  .ambiance { gap: 19px; padding: 32px 18px; }
  .ambiance h2 { font-size: clamp(25px, 6.9vw, 30px); margin-bottom: 15px; }
  .ambiance-intro > .eyebrow { margin-bottom: 13px; }
  .ambiance-intro > p:not(.eyebrow) { font-size: 12px; line-height: 1.8; }
  .ambiance-choices { margin: 15px 0 11px; gap: 6px; }
  .ambiance-choices button { min-height: 36px; padding: 7px 9px; font-size: 10px; }
  .ambiance-board { min-height: 300px; padding: 8px 8px 76px 0; }
  .ambiance-project { height: 214px; }
  .ambiance-detail { height: 119px; }
  .ambiance-palette { padding: 12px; }
  .ambiance-palette i { width: 22px; height: 22px; }
  .ambiance-palette > div { margin: 9px 0; gap: 6px; }

  .filter-row { gap: 5px; margin-bottom: 16px; }
  .filter { font-size: 9px; min-height: 36px; padding: 7px 9px; }
  .project-grid { gap: 21px; }
  .project-image, .project-card:nth-child(2n) .project-image { aspect-ratio: 16/9; height: auto; }
  .project-meta h3 { font-size: 19px; line-height: 1.25; }
  .project-meta { margin-top: 10px; }
  .projects-more { margin-top: 20px; }
  .studio { gap: 23px; padding-top: 34px; padding-bottom: 32px; }
  .studio .studio-visual { max-width: 245px; }
  .studio .portrait-label { margin-top: 10px; min-height: 56px; font-size: 10px; padding: 11px 13px; gap: 12px; }
  .studio-copy h2 { font-size: 27px; margin-bottom: 15px; }
  .studio-copy > p:not(.eyebrow) { font-size: 12px; line-height: 1.8; }
  .studio-copy .eyebrow { margin-bottom: 12px; }
  .studio-values { margin-top: 14px; gap: 6px; }

  .services { padding: 32px 18px; }
  .services h2 { font-size: clamp(25px, 6.9vw, 30px); line-height: 1.2; }
  .services .section-heading { margin-bottom: 17px; }
  .services .section-heading > p { font-size: 11px; margin-top: 12px; line-height: 1.7; }
  .services .service-filters { margin-bottom: 17px; padding: 3px; }
  .services .service-filter { min-height: 38px; font-size: 10px; padding: 8px 10px; gap: 8px; }
  .services .service-grid, .services .service-grid.pros { gap: 14px; }
  .services .service-grid .service-card, .services .service-grid.pros .service-card,
  .services .service-grid .service-card.featured {
    padding: 8px;
    border-radius: 19px;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .services .service-grid .service-card-image {
    border: 1px solid #ffffffb0;
    border-radius: 13px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    aspect-ratio: auto;
    height: clamp(105px, 31vw, 140px);
    min-height: 0;
    background: #ded1c2;
    box-shadow: 0 4px 13px #59443b08;
  }
  .services .service-grid .service-card-image > img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 0;
  }
  .services .service-grid .service-card .service-card-content {
    padding: 13px 10px 0;
    min-height: 0;
  }
  .services .service-grid .service-intention { font-size: 7px; margin-bottom: 7px; line-height: 1.6; }
  .services .service-grid .service-card .service-card-content h3 {
    font-size: 21px;
    line-height: 1.25;
    margin-bottom: 7px;
    min-height: 0;
  }
  .services .service-grid .service-card .service-card-content .service-tagline {
    font-size: 11px;
    line-height: 1.65;
    margin-bottom: 10px;
    min-height: 0;
  }
  .services .service-grid .service-card .service-card-content .service-price {
    font-size: 27px;
    margin-bottom: 11px;
    min-height: 0;
    gap: 2px 6px;
  }
  .services .service-grid .service-card .service-card-content .service-price > small { font-size: 9px; margin: 0; }
  .services .service-grid .service-card .service-card-content .service-price > span { font-size: 9px; }
  .services .service-grid .service-card .service-reserve {
    min-height: 44px;
    font-size: 11px;
    padding: 8px 10px 8px 13px;
    gap: 8px;
  }
  .services .service-grid .service-card .service-reserve > span { width: 27px; height: 27px; }
  .services .service-grid .service-card .service-card-actions .service-details-link {
    font-size: 10px;
    min-height: 36px;
    padding: 6px 0;
  }
  .services .service-grid .service-card-actions { gap: 1px; }
  .service-image-open { width: 29px; height: 29px; right: 9px; bottom: 9px; }
  .service-image-open .ui-icon { width: 16px; height: 16px; }
  .services .services-note { font-size: 9px; line-height: 1.75; margin-top: 16px; }
  .process-grid { margin-top: 18px; gap: 19px; }
  .process-grid h3 { font-size: 20px; margin-bottom: 7px; }
  .process-grid p { font-size: 12px; line-height: 1.75; }
  .faq { gap: 18px; }
  .faq h2 { margin: 12px 0; }
  .faq details { padding: 14px 0; }
  .faq summary { font-size: 12px; line-height: 1.6; }
  .image-interlude .interlude-card { padding: 15px 18px; }
  .image-interlude .interlude-card p { font-size: 18px; line-height: 1.4; }

  .contact { padding: 28px 18px; gap: 16px; }
  .contact h2 { font-size: 28px; }
  .contact .contact-form { padding: 16px; }
  .contact .contact-form input:not([type=checkbox]),
  .contact .contact-form textarea, .contact .contact-form select { font-size: 16px; }
  .contact .form-note { font-size: 9px; }
  .site-footer { padding: 29px 18px 18px; }
  .footer-brand { font-size: 28px; }

  .about-v5 .about-v5-shell { width: calc(100% - 36px); }
  .about-v5-opening { padding: 19px 0 32px; gap: 23px; }
  .about-v5 h1.about-v5-title { font-size: 30px; margin-bottom: 21px; }
  .about-v5 .about-v5-portrait { max-width: 245px; }
  .about-v5-atmosphere-heading h2, .about-v5-chapter-title { font-size: 27px; }
  .about-v5-atmosphere { padding: 28px 0 32px; }
  .about-v5-atmosphere-main img { height: 220px; }
  .about-v5-chapter-figure img, .about-v5-chapter-reverse .about-v5-chapter-figure img { height: 255px; }
  .about-v5-chapter, .about-v5-chapter-reverse { gap: 20px; margin-bottom: 32px; }
  .about-v5-story-heading { padding-bottom: 26px; }
  .about-v5-contact-copy h2 { font-size: 28px; }
  .booking-shell { padding: 16px 18px 36px; }
  .booking-heading h1 { font-size: 29px; }
  .booking-block h2 { font-size: 23px; }
  .cart-page { padding: 18px 18px 36px; }
  .cart-heading h1 { font-size: 34px; }
  .cart-empty h2 { font-size: 27px; }
  .dialog-body h2 { font-size: 27px; }
}
@media (max-width: 360px) {
  .site-header .brand > span, .site-header.scrolled .brand > span,
  .page-mode .site-header .brand > span { font-size: 16px; }
  .site-header .brand-symbol, .site-header.scrolled .brand-symbol { width: 21px; }
  .site-header .brand small { font-size: 4px; }
  .site-header .cart-link, .site-header .menu-toggle {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    flex-basis: 38px;
  }
  .services .service-grid .service-card .service-card-content h3 { font-size: 20px; }
  .services .service-filter { font-size: 9px; }
  .contact h2 { font-size: 26px; }
}