/* Mireora adaptive type contract — must be loaded last.
   One role = one family/size at each breakpoint. */
:root{
  --ui-font: var(--sans, Inter, Arial, sans-serif);
  --editorial-font: var(--serif, Georgia, serif);
}

/* Only major landing statements use the editorial face. */
.hero h1,
.collection .section-intro h2,
.design-copy h2,
.process .section-intro h2,
.studio-copy h2,
.final-cta h2,
.inquiry-dialog .dialog-copy h2{
  font-family:var(--editorial-font)!important;
  font-weight:400!important;
}

/* All interface and order-flow text uses one sans-serif family. */
.inquiry-dialog,
.inquiry-dialog button,
.inquiry-dialog input,
.inquiry-dialog textarea,
.inquiry-dialog select,
.inquiry-dialog h3,
.inquiry-dialog h4,
.inquiry-dialog strong,
.inquiry-dialog small,
.inquiry-dialog p,
.inquiry-dialog span,
.choice-card,
.choice-card strong,
.choice-card small,
.service-copy,
.service-copy>strong,
.service-copy>small,
.service-tags i,
.choice-actions,
.selected-order,
.order-summary-sticky{
  font-family:var(--ui-font)!important;
}

@media (min-width:768px) and (max-width:1100px){
  /* Tablet scale */
  .hero h1,.final-cta h2{font-size:52px!important;line-height:1!important}
  .collection .section-intro h2,.design-copy h2,.process .section-intro h2,.studio-copy h2{font-size:40px!important;line-height:1.05!important}
  .inquiry-dialog .dialog-copy h2{font-size:34px!important;line-height:1.08!important}
  .choice-section-heading h3,.configurator-head h3,.configurator-intro h3,.form-section-head h3{font-size:22px!important;line-height:1.2!important}
  .choice-copy strong,.service-copy>strong,.selected-order-type>strong{font-size:18px!important;line-height:1.25!important;font-weight:500!important}
  .choice-copy small,.service-copy>small,.choice-actions p,.form-section-head p,.configurator-summary,.configurator-note{font-size:14px!important;line-height:1.5!important}
  .service-copy>strong br{display:none!important}
  .choice-service{min-height:0!important;padding:24px!important;gap:20px!important}
  .service-tags i{font-size:13px!important;padding:7px 10px!important}
}

@media (max-width:767px){
  /* Phone scale: restrained and consistent. */
  .hero h1,.final-cta h2{font-size:38px!important;line-height:1.02!important}
  .collection .section-intro h2,.design-copy h2,.process .section-intro h2,.studio-copy h2{font-size:30px!important;line-height:1.07!important}
  .inquiry-dialog .dialog-copy h2{font-size:26px!important;line-height:1.1!important}
  .choice-section-heading h3,.configurator-head h3,.configurator-intro h3,.form-section-head h3,.configurator-fields-heading h4{font-size:19px!important;line-height:1.22!important;font-weight:500!important}

  /* Card and option titles */
  #collection .product-card h3,
  .process-card h3,
  .choice-copy strong,
  .service-copy>strong,
  .selected-order-type>strong,
  .spec-heading-row h4,
  .spec-grid h4,
  .phone-spec-models h4{
    font-family:var(--ui-font)!important;
    font-size:17px!important;
    line-height:1.25!important;
    letter-spacing:-.01em!important;
    font-weight:500!important;
  }

  /* Body copy */
  .hero-text,.section-intro>p,.design-copy>p:not(.kicker),.studio-copy>p:last-child,.final-cta p,
  .choice-copy small,.service-copy>small,.process-card p,.choice-actions p,.form-section-head p,
  .configurator-summary,.configurator-note,.selected-order-type>span{
    font-family:var(--ui-font)!important;
    font-size:14px!important;
    line-height:1.5!important;
    font-weight:400!important;
  }

  .kicker,.service-label,.interface-label,.interface-status,.visual-chip,.hero-trust,
  .order-progress li,.selected-order-price small,.choice-price small{
    font-family:var(--ui-font)!important;
    font-size:11px!important;
    line-height:1.35!important;
    letter-spacing:.05em!important;
  }

  /* Custom design option: same visual language as every other option. */
  .choice-service{
    min-height:0!important;
    grid-template-columns:1fr!important;
    padding:18px!important;
    gap:14px!important;
    border-radius:18px!important;
  }
  .service-copy{gap:10px!important;padding:0!important}
  .service-copy>strong{margin-top:4px!important}
  .service-copy>strong br{display:none!important}
  .service-copy>small{margin-top:6px!important;max-width:100%!important}
  .service-tags{margin-top:8px!important;gap:6px!important;display:flex!important;flex-wrap:wrap!important}
  .service-tags i{font-size:12px!important;line-height:1.2!important;padding:7px 10px!important}
  .choice-service>.choice-arrow{width:40px!important;height:40px!important;right:12px!important;top:12px!important}

  /* Bottom action area must not cover the option card. */
  .order-step-choice .choice-actions,
  .choice-actions{
    position:static!important;
    inset:auto!important;
    margin:18px 0 0!important;
    padding:14px!important;
    border-radius:18px!important;
    gap:10px!important;
  }
  .choice-status{gap:8px!important}
  .choice-actions .button{min-height:48px!important;font-size:16px!important;padding:12px 16px!important}
  .choice-price strong{font-size:20px!important;line-height:1.2!important}

  /* Form controls and prices */
  .modern-field input,.modern-field textarea,.modern-field select,.config-text-field input{font-size:16px!important;line-height:1.35!important}
  .selected-order-price strong,.submit-price strong{font-size:20px!important;line-height:1.2!important}
}

@media (max-width:390px){
  .hero h1,.final-cta h2{font-size:35px!important}
  .collection .section-intro h2,.design-copy h2,.process .section-intro h2,.studio-copy h2{font-size:28px!important}
  .inquiry-dialog .dialog-copy h2{font-size:24px!important}
  .choice-section-heading h3,.configurator-head h3,.configurator-intro h3,.form-section-head h3,.configurator-fields-heading h4{font-size:18px!important}
  #collection .product-card h3,.process-card h3,.choice-copy strong,.service-copy>strong,.selected-order-type>strong{font-size:16px!important}
  .choice-copy small,.service-copy>small,.process-card p,.choice-actions p,.form-section-head p,.configurator-summary,.configurator-note{font-size:13.5px!important}
}


/* Critical correction: custom-design title must match ordinary option titles.
   This selector is intentionally specific and loaded last. */
@media (min-width:768px) and (max-width:1100px){
  .inquiry-dialog .choice-service .service-copy > .service-title{
    font-family:var(--ui-font)!important;
    font-size:22px!important;
    line-height:1.2!important;
    font-weight:500!important;
    letter-spacing:0!important;
    margin:2px 0 0!important;
  }
}
@media (max-width:767px){
  .inquiry-dialog .choice-service .service-copy > .service-title{
    display:block!important;
    font-family:var(--ui-font)!important;
    font-size:20px!important;
    line-height:1.25!important;
    font-weight:500!important;
    letter-spacing:0!important;
    margin:2px 0 0!important;
    text-wrap:balance!important;
  }
}
@media (max-width:390px){
  .inquiry-dialog .choice-service .service-copy > .service-title{font-size:19px!important;}
}

/* Restore the Custom Design visual on phones and tablets. It is part of the option card,
   not decorative desktop-only content. */
@media (max-width: 1024px){
  .choice-service{
    grid-template-columns:1fr!important;
  }
  html body .inquiry-dialog .choice-service .service-visual{
    display:grid!important;
    min-height:150px!important;
    width:100%!important;
    margin-top:4px!important;
    border-radius:16px!important;
  }
  .choice-service .service-visual-bg{
    font-size:clamp(46px,11vw,76px)!important;
    line-height:.72!important;
  }
  .choice-service .service-visual-mark{
    font-size:clamp(42px,10vw,66px)!important;
  }
  .choice-service .service-visual-caption{
    bottom:12px!important;
    font-size:11px!important;
    line-height:1.2!important;
  }
}

@media (max-width: 480px){
  html body .inquiry-dialog .choice-service .service-visual{
    min-height:132px!important;
  }
}