/* A continuous layout from compact phones through portrait and landscape tablets. */
:root { --layout-gutter:clamp(18px,3.2vw,44px); }
@media(max-width:1100px) {
  .services { width:100%; padding-inline:var(--layout-gutter); }
  .services-header,.services .service-grid,.services .service-price-note { width:100%; }
  .services-header h2 { font-size:clamp(46px,7vw,70px); }
  .services .service-heading h3 { font-size:clamp(20px,2.8vw,25px); flex-basis:auto; }
  .services .service-heading-top { flex-wrap:wrap; gap:8px 12px; }
  .services .service-image-wrap { aspect-ratio:1.42; }
  .about { padding-inline:var(--layout-gutter); }
  .about p { font-size:clamp(25px,4.6vw,48px); line-height:1.15; }
  .location { padding-inline:var(--layout-gutter); scroll-margin-top:0; }
  .location .footer-location-title { font-size:clamp(52px,10.5vw,104px); }
  .location .footer-cta { display:flex; flex-direction:column; align-items:stretch; gap:28px; }
  .location .footer-service-area { display:contents; }
  .location .footer-service-area h3 { order:0; margin:0; }
  .location .footer-area-copy { order:0; margin:-16px 0 -10px; }
  .location .travel-checker { order:0; width:100%; max-width:none; margin:0; }
  .location .footer-map-panel { order:1; width:100%; max-width:none; grid-template-columns:1fr; gap:14px; margin:0; }
  .location .footer-map-panel .cart-map-panel { grid-column:1; grid-row:1; height:clamp(300px,44vw,440px); }
  .location .footer-map-key { grid-column:1; grid-row:2; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:12px 24px; font-size:13px; }
  .location .location-access-choice,.location .travel-address-choices { order:2; width:100%; max-width:none; margin:0; }
  .showcase-info { position:absolute; inset:auto 0 28px; display:grid; justify-items:center; gap:22px; padding-inline:var(--layout-gutter); pointer-events:none; }
  .showcase-info .showcase-copy { position:static; width:min(600px,100%); transform:none; }
  .showcase-info .showcase-name { font-size:clamp(30px,5vw,52px); white-space:normal; text-wrap:balance; }
  .showcase-info .showcase-description { max-width:540px; margin-inline:auto; font-size:clamp(14px,1.8vw,18px); }
  .showcase-info .showcase-action { position:static; transform:none; }
  .showcase-stage { bottom:35%; }
  .showcase-info .showcase-more { min-width:164px; min-height:50px; font-size:15px; }
}
@media(min-width:600px) and (max-width:999.98px) {
  .services .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 24px; }
  .services .service-card:last-child { grid-column:1 / -1; justify-self:center; width:calc((100% - 24px) / 2); }
}
@media(min-width:1000px) and (max-width:1100px) {
  .services .service-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
}
@media(max-width:599.98px) {
  .services .service-grid { grid-template-columns:1fr; gap:36px; }
  .services .service-heading h3 { font-size:23px; }
  .services .service-image-wrap { aspect-ratio:1.55; }
  .showcase-info { gap:18px; bottom:28px; }
}
/* Short landscape screens need a compact caption without overlapping the controls. */
@media(max-width:1100px) and (max-height:600px) {
  .showcase-pin { min-height:460px; }
  .showcase-info { bottom:18px; gap:12px; }
  .showcase-info .showcase-name { font-size:30px; }
  .showcase-info .showcase-description { font-size:13px; }
  .showcase-info .showcase-more { min-height:44px; padding-block:10px; }
}
/* A centered tablet sheet, with the same compact controls as the phone flow. */
@media(min-width:601px) and (max-width:1100px) {
  .quote-dialog { inset:0; width:min(720px,calc(100% - 48px)); height:calc(100dvh - 48px); margin:auto; border-radius:12px; }
}
@media(min-width:761px) and (max-width:1100px) {
  .cart-top { top:16px; right:16px; }
  .quote-dialog .dialog-close { width:44px; height:44px; }
  .quote-dialog .cart-progress { margin:16px 76px 12px 24px; gap:8px; }
  .quote-dialog .cart-progress button { min-height:60px; padding:8px 4px; gap:6px; font-size:12px; }
  .quote-dialog .cart-progress button svg { width:22px; height:22px; }
  .quote-dialog .cart-meter { margin-inline:24px; }
  .quote-dialog .cart-context { padding-inline:24px; }
  .quote-dialog .cart-body { padding:24px; }
  .quote-dialog .cart-step > h2 { font-size:30px; }
  .quote-dialog[data-step="0"][data-detail-phase="service"] .cart-detail-choice { padding-top:12px; justify-content:flex-start; }
  .quote-dialog[data-step="0"][data-detail-phase="service"] .cart-detail-choice .cart-packages { margin:24px 0 0; padding:0; gap:12px; }
  .quote-form .cart-detail-choice .cart-package label { grid-template-columns:88px minmax(0,1fr) auto; gap:16px; min-height:118px; padding:12px; }
  .quote-form .cart-detail-choice .cart-package img { width:88px; height:92px; }
  .quote-form .cart-detail-choice .cart-package-title { font-size:18px; }
  .quote-form .cart-detail-choice .cart-package-copy > span { font-size:13px; line-height:1.4; }
  .quote-form .cart-detail-choice .cart-package-price { align-self:start; font-size:18px; }
  .quote-form .cart-detail-choice .cart-package-price > span { display:block; margin:0 0 3px; font-size:12px; text-align:right; }
  .quote-dialog .cart-map-panel { height:320px; min-height:320px; }
  .quote-dialog input,.quote-dialog textarea { font-size:16px; }
  .quote-dialog .cart-footer { padding-inline:24px; }
  .quote-dialog[data-step="0"][data-detail-phase="service"] #cart-detail-step > h2,
  .quote-dialog[data-step="2"] #cart-vehicle-step > h2,
  .quote-dialog[data-step="3"] #cart-contact-step > h2 { margin-top:12px; }
}
@media(max-width:1100px) {
  .quote-dialog .cart-package-editor { max-height:calc(100dvh - 300px); }
  .quote-dialog .cart-change-package { min-height:44px; }
}
@media(max-width:600px) {
  .quote-dialog .cart-package-editor { max-height:calc(100dvh - 220px); }
}
@media(max-height:600px) {
  .quote-dialog .cart-progress button { min-height:48px; gap:3px; padding-block:4px; }
  .quote-dialog .cart-progress { margin-block:8px; }
  .quote-dialog .cart-footer { padding-block:10px; }
  .quote-dialog .cart-package-editor { max-height:calc(100dvh - 200px); }
}
/* Product details use one scrolling column before the desktop columns get cramped. */
@media(min-width:761px) and (max-width:900px) {
  .product-dialog { width:calc(100% - 32px); max-height:92dvh; }
  .product-detail-layout { grid-template-columns:1fr; min-height:0; }
  .product-model-panel { min-height:350px; }
  .product-packages { padding:24px 60px 0 22px; }
  .product-model { inset:80px 28px 0; }
  .product-detail-content { padding:20px 32px 36px; }
  .product-dialog h2 { font-size:36px; }
  .product-detail-points { gap:20px; }
  .product-detail-points li { font-size:16px; }
  .product-dialog .product-close { position:sticky; top:12px; width:44px; height:44px; margin:12px 12px -56px auto; }
}
@media(min-width:761px) and (max-width:900px) {
  .package-content { padding:38px 32px 12px; }
  .package-dialog h2 { font-size:36px; }
  .package-points li { font-size:16px; }
  .package-bottle-art { height:180px; }
}
@media(max-width:900px) {
  .footer-bottle-display { top:auto; bottom:100px; height:220px; }
  .footer { padding-bottom:340px; }
}
@media(max-width:600px) {
  .footer { padding-bottom:310px; }
  .footer-bottle-display { height:180px; }
}
@media(max-width:350px) {
  .contact-overlay-actions { gap:8px; }
  .contact-overlay-actions a { padding-inline:10px; font-size:14px; }
  .contact-overlay-copy { width:44px; }
}
@media(hover:none) {
  .services .service-card:hover .service-image > img { transform:none; }
  .services .service-card:hover .service-image-wrap,.services .service-card:hover .service-image { border-radius:0; }
  .services .service-card:has(.service-image:hover, .service-heading:hover, .service-quote-button:hover) .service-actions .service-quote-button { background:#111; }
}

.quote-dialog .quote-form .cart-selected-title { font-size:18px; }
@media(max-width:480px) { .quote-dialog .quote-form .cart-selected-title { font-size:16px; } }

/* Keep mobile Menu on the left and Connect on the right. */
@media(max-width:850px) {
  .site-header .mobile-menu { grid-area:menu; justify-self:start; justify-content:flex-start; }
  .site-header .cart-button { grid-area:connect; justify-self:end; }
}

/* Tablets get a dedicated arena below the footer links, in either orientation. */
@media (min-width:701px) and (max-width:1200px) and (min-height:601px),
       (pointer:coarse) and (min-width:701px) and (min-height:601px) {
  .site .footer { padding-bottom:520px; }
  .footer-bottle-display {
    display:block;
    top:auto;
    bottom:100px;
    left:24px;
    right:24px;
    height:400px;
  }
}