/* Layout scale at 100% zoom. Keep content-driven heights and the original hero.
   Loaded last: this file owns the calibrated desktop geometry. */
:root { --content-max: 1280px; --layout-gap: 24px; }
.material-note.material-note-compact { padding-block: 32px; }
.material-advice { display: grid; grid-template-columns: 1fr 1.3fr auto; align-items: center; gap: 32px; }
.material-note-compact .eyebrow { font-size: 11px; margin-bottom: 10px; }
.material-note.material-note-compact h2 { font-size: 30px; line-height: 1.1; margin: 0; }
.material-note.material-note-compact p:not(.eyebrow) { max-width: 54ch; margin: 0; font-size: 15px; line-height: 25px; }
.material-advice > .text-link { white-space: nowrap; }
@media (max-width: 1023px) {
  .material-advice { grid-template-columns: 1fr 1.3fr; gap: 20px 32px; }
  .material-advice > .text-link { grid-column: 2; justify-self: start; }
}
@media (max-width: 767px) {
  .material-advice { grid-template-columns: 1fr; gap: 16px; }
  .material-advice > .text-link { grid-column: auto; }
  .material-note.material-note-compact h2 { font-size: 28px; }
}
.location-heading { grid-column: 1 / -1; }

@media (min-width: 1024px) {
  :root { --header-offset: 92px; }
  .wrap { width: calc(100% - 64px); max-width: var(--content-max); }
  .header {
    width: 100%; max-width: none; min-height: 76px;
    padding: 12px max(32px, calc((100% - var(--content-max)) / 2));
    gap: 24px; border: 0; border-radius: 0; background: #fffef9;
  }
  .header .brand-logo { width: 52px; height: 52px; flex-basis: 52px; }
  .header .brand strong { font-size: 18px; }
  .header nav { gap: 28px; font-size: 15px; }
  .header > .button { min-height: 48px; padding: 12px 20px; font-size: 14px; gap: 20px; margin: 0; border-radius: 8px; }
  .button { min-height: 52px; padding: 13px 24px; font-size: 15px; border-radius: 8px; }
  .button span { font-size: 22px; }
  .eyebrow { font-size: 12px; margin-bottom: 16px; }
  .text-link { min-height: 44px; font-size: 14px; }

  /* Header offset includes 16px of anchor clearance; subtract only its real height.
     A minimum, not a fixed height, preserves content on short windows and zoom. */
  .hero-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; min-height: calc(100vh - 76px); min-height: calc(100svh - var(--header-offset) + 16px); padding: 32px 0; }
  .hero-kicker { font-size: 10px; letter-spacing: 1.3px; margin-bottom: 16px; }
  .hero-premium h1 { font-size: 72px; line-height: 1.02; letter-spacing: -1.4px; margin-bottom: 22px; }
  .hero-line-accent { gap: 24px; }
  .hero-line-accent svg { width: 40px; height: 40px; }
  .hero-premium .hero-description { font-size: 17px; line-height: 1.6; max-width: 470px; margin-bottom: 24px; }
  .hero-premium .hero-actions { align-items: center; flex-wrap: wrap; gap: 16px 24px; }
  .hero-premium .hero-cta { min-height: 52px; padding: 13px 24px; font-size: 15px; gap: 20px; border-radius: 8px; }
  .hero-category-link { font-size: 14px; min-height: 44px; align-items: center; }
  .hero-scene { width: 100%; max-width: 600px; height: 480px; margin: 0; justify-self: end; }
  .scene-index { font-size: 10px; left: 12%; }
  .scene-note { font-size: 9px; right: 8%; }
  .scene-label { border-radius: 8px; min-height: 56px; }
  .scene-label small { font-size: 10px; }
  .label-base { right: 4%; }
  .label-finish { left: 4%; }

  .section, .story, .process-section { padding-block: 72px; }
  .section-heading { grid-template-columns: 1.2fr 1fr; gap: 48px; margin-bottom: 36px; }
  .section-heading h2, .process-heading h2, .location h2, .faq-section h2, .story h2 { font-size: 48px; line-height: 1.05; letter-spacing: -.6px; }
  .section-heading > p:last-child { font-size: 16px; line-height: 26px; max-width: 380px; }

  .categories { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .categories .category,
  .categories .category:nth-child(1),
  .categories .category:nth-child(2) { grid-column: auto; display: flex; flex-direction: column; min-height: 0; border: 0; border-radius: 12px; background: #fffef9; }
  .categories .category::before,
  .categories .category:nth-child(1)::before,
  .categories .category:nth-child(2)::before { flex: 0 0 auto; width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 9; background-position: center; }
  .categories .category > :is(.number,h3,p,.category-bottom),
  .categories .category:nth-child(1) > * { margin-left: 24px; margin-right: 24px; }
  .categories .category .number,
  .categories .category:nth-child(1) .number { font-size: 11px; letter-spacing: 1.2px; margin-top: 18px; margin-bottom: 8px; }
  .categories .category h3,
  .categories .category:nth-child(1) h3 { font-size: 28px; line-height: 1.08; margin-bottom: 12px; }
  .categories .category p { font-size: 15px; line-height: 24px; max-width: none; margin-bottom: 16px; }
  .categories .category .category-bottom { font-size: 14px; min-height: 44px; padding-top: 10px; margin-top: auto; margin-bottom: 18px; }
  .category-bottom b { width: 32px; height: 32px; font-size: 18px; }
  .availability { font-size: 13px; margin-top: 20px; }
  .trade-track { padding-block: 16px; font-size: 14px; }
  .material-note { padding-block: 40px; }
  .material-note-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
  .material-blueprint { min-height: 240px; border-radius: 12px; }
  .material-note h2 { font-size: 40px; line-height: 1.05; margin-bottom: 16px; }
  .material-note p:not(.eyebrow) { font-size: 16px; line-height: 26px; }

  .process-section > .wrap { display: block; }
  .process-heading { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0 48px; margin-bottom: 32px; }
  .process-heading .eyebrow { margin-bottom: 16px; }
  .process-heading h2 { margin: 0; }
  .process-heading > p:last-child { max-width: 380px; justify-self: end; font-size: 16px; line-height: 26px; }
  .process-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
  .process-step { display: grid; grid-template-columns: 144px minmax(0,1fr); gap: 0 20px; min-height: 0; padding: 24px 0; border: 0; border-top: 1px solid #cad3d3; border-radius: 0; }
  .process-step:last-child { border-bottom: 0; }
  .process-image { grid-column: 1; grid-row: 1 / 3; width: 144px; height: 96px; margin: 0; border-radius: 12px; }
  .process-index { grid-column: 2; font-size: 20px; margin: 0; }
  .process-step > h3 { grid-column: 2; font-size: 28px; line-height: 1.1; margin: 8px 0 12px; }
  .process-step > p { grid-column: 1 / -1; font-size: 16px; line-height: 26px; max-width: none; margin-top: 16px; }
  .process-cta { margin-top: 8px; }

  .story-grid { grid-template-columns: 420px minmax(0,1fr); gap: 64px; align-items: center; }
  .story figure { width: 100%; max-width: 416px; padding: 12px; transform: none; border-radius: 16px; }
  .story figure img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; max-height: none; border-radius: 12px; }
  .story figcaption { font-size: 12px; line-height: 20px; margin-top: 12px; }
  .story h2 { margin-bottom: 24px; }
  .story p:not(.eyebrow) { font-size: 16px; line-height: 27px; max-width: 58ch; margin-bottom: 16px; }
  .story-signature { margin-top: 24px; font-size: 16px; }
  .brands { padding-block: 32px; }
  .brands .eyebrow { font-size: 12px; }
  .loop-toggle { font-size: 12px; }

  .quote { padding-block: 64px; }
  .quote-grid { grid-template-columns: minmax(0,1fr) minmax(0,600px); gap: 64px; }
  .quote h2 { font-size: 56px; line-height: 1.02; letter-spacing: -.7px; margin-bottom: 24px; }
  .quote-grid > .reveal:first-child > p:last-child { max-width: 45ch; font-size: 16px; line-height: 27px; }
  .contact-card { padding: 32px; border-radius: 12px; }
  .quote-card-title { font-size: 28px; }
  .quote-form { gap: 16px; margin-top: 20px; }
  .quote-form label { font-size: 14px; gap: 6px; font-weight: 600; }
  .quote-form :is(input,textarea) { font-size: 16px; line-height: 24px; padding: 12px; min-height: 50px; border-radius: 8px; }
  .quote-form textarea { min-height: 112px; }
  .quote-form button { min-height: 52px; padding: 13px 20px; font-size: 15px; border-radius: 8px; }
  .quote-form .form-note { font-size: 13px; line-height: 20px; }

  .location { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 24px 64px; align-items: center; }
  .location h2 { margin-bottom: 0; }
  .map-frame { margin-top: 0; border-radius: 12px; }
  .map-frame iframe { height: 325px; }
  .location-details { max-width: none; align-self: center; justify-self: stretch; padding: 12px 0 12px 32px; margin: 0; transform: none; }
  .location-details h3 { font-size: 22px; line-height: 1.4; }
  .location-details p { font-size: 16px; line-height: 27px; }
  .location-details .hours { margin-block: 24px; }
  .hours strong { font-size: 16px; }

  .reviews-section { padding-block: 40px; }
  .reviews-panel { padding: 28px 32px; border-radius: 12px; }
  .reviews-intro h2 { font-size: 44px; line-height: 1.05; }
  .reviews-header { margin-bottom: 24px; }
  .review-card { flex-basis: 304px; min-height: 220px; padding: 24px; border-radius: 12px; }
  .review-card blockquote { font-size: 15px; line-height: 24px; margin: 12px 0 16px; }
  .review-author { font-size: 14px; }
  .review-author small { font-size: 12px; }
  .review-avatar { width: 40px; height: 40px; flex-basis: 40px; font-size: 12px; }
  .reviews-rating small, .reviews-toggle { font-size: 12px; }
  .reviews-toggle { min-height: 44px; border-radius: 8px; }
  .reviews-panel .reviews-footer > p { font-size: 13px; line-height: 21px; max-width: 55ch; }
  .reviews-footer { margin-top: 20px; }

  .faq-section { padding-block: 56px; }
  .faq-layout { gap: 28px; }
  .faq-columns { gap: 0 40px; }
  .faq-heading .eyebrow { margin-bottom: 16px; }
  .faq-section summary { min-height: 72px; padding: 16px 0; font-size: 16px; line-height: 24px; }
  .faq-section details p { font-size: 16px; line-height: 26px; padding: 0 32px 24px 0; }

  footer { padding-top: 40px; }
  footer::before { width: calc(100% - 64px); max-width: var(--content-max); font-size: 96px; line-height: .95; letter-spacing: -2px; margin-bottom: 16px; padding-bottom: 16px; }
  .footer-top { padding-block: 0 24px; grid-template-columns: 1fr 1.25fr 1fr; gap: 48px; align-items: start; }
  .footer-top .brand-logo { width: 72px; height: 72px; flex-basis: 72px; }
  .footer-top p, .footer-address, .footer-links { font-size: 14px; }
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding: 30px 0 0 24px; }
  .footer-links::before { left: 24px; top: 0; }
  .footer-links a:first-child, .footer-links a:last-child { grid-column: 1 / -1; }
  .footer-links a, .footer-links .social-link { min-height: 44px; margin: 0; }
  .footer-bottom { font-size: 12px; padding-block: 20px 24px; padding-right: 72px; }
  .whatsapp-float { width: 56px; height: 56px; right: 24px; bottom: 24px; }
}

@media (min-width: 1440px) { .hero-premium h1 { font-size: 76px; } }
@media (min-width: 1600px) { .hero-premium h1 { font-size: 80px; } .hero-premium .hero-description { font-size: 18px; } }
@media (min-width: 1920px) { .hero-premium h1 { font-size: 84px; } .hero-scene { height: 500px; } }
@media (min-width: 1024px) and (max-width: 1199px) {
  .header { gap: 16px; }
  .header nav { gap: 16px; font-size: 14px; }
  .header .brand strong { font-size: 16px; }
  .header > .button { padding-inline: 16px; gap: 12px; font-size: 13px; }
  .hero-premium h1 { font-size: 60px; }
  .hero-stage { gap: 24px; }
  .hero-kicker { font-size: 9px; letter-spacing: .8px; }
  .hero-scene { height: 420px; }
  .story-grid { grid-template-columns: 360px minmax(0,1fr); gap: 48px; }
  .quote-grid { grid-template-columns: 1fr 1.1fr; gap: 40px; }
  .process-step { grid-template-columns: 120px minmax(0,1fr); gap: 0 16px; }
  .process-image { width: 120px; height: 80px; }
  .process-step > h3 { font-size: 26px; }
  .review-track:not(.is-looping) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .footer-top { gap: 24px; }
}
@media (min-width: 1024px) and (max-height: 740px) {
  .hero-stage { padding-block: 28px; }
  .hero-premium h1 { font-size: min(72px, 5.85vw); }
  .hero-scene { height: 440px; }
}

/* Intermediate widths: two cards per row and a contained hero, never a scaled desktop. */
@media (min-width: 768px) and (max-width: 1023px) {
  .topbar { display: none; }
  .wrap { width: calc(100% - 48px); }
  .header { width: 100%; }
  .hero-stage { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; min-height: 540px; padding-block: 40px; }
  .hero-premium h1 { font-size: clamp(44px,5.8vw,58px); line-height: 1.05; letter-spacing: -.8px; }
  .hero-premium .hero-description { font-size: 16px; line-height: 26px; }
  .hero-line-accent { gap: 12px; }
  .hero-line-accent svg { width: 28px; height: 28px; }
  .hero-kicker { font-size: 9px; letter-spacing: .6px; }
  .hero-scene { width: 100%; margin: 0; height: 380px; }
  .scene-index, .scene-note { display: none; }
  .categories { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
  .category::before { flex: 0 0 auto; aspect-ratio: 16 / 9; }
  .categories .category p { font-size: 15px; }
  .story-grid { gap: 32px; }
  .story figure { max-width: 390px; }
  .story img { height: auto; max-height: none; }
  .story h2 { font-size: 40px; }
  .quote-grid { grid-template-columns: 1fr; }
  .contact-card { width: 100%; max-width: 640px; justify-self: center; }
}
@media (max-width: 767px) {
  .wrap { width: calc(100% - 40px); }
  .header { width: 100%; }
}
@media (min-width: 701px) and (max-width: 767px) {
  .hero-stage { grid-template-columns: 1fr; padding-block: 32px 16px; min-height: 0; }
  .hero-premium h1 { font-size: 64px; line-height: 1.02; }
  .hero-premium .hero-description { font-size: 16px; max-width: 470px; }
  .hero-scene { width: 100%; max-width: 520px; height: 440px; margin: 16px auto 0; }
  .categories, .process-steps, .story-grid, .quote-grid, .location, .material-note-grid { grid-template-columns: 1fr; }
  .story figure { max-width: 390px; justify-self: center; }
  .process-heading { display: block; }
  .process-heading h2 { margin-bottom: 24px; }
  .process-image { margin: -25px -28px 24px; }
}