/* Page-scoped layout rules — loaded ONLY by /custom-design and /contact.
   Everything here is namespaced with new class names so the shared components
   (.about-intro, .features-grid, .section-title, .inquiry-card) keep behaving
   exactly as they do on the other 270 pages. */
/* Two-column intro that actually has two columns of content. The pages previously
   used .about-intro (a 1fr 1fr grid) with a single child, which left 608px of the
   container empty on a 1440px screen. minmax(0,...) + min-width:0 stop long
   unbreakable values (a street address, an email) from forcing overflow. */
.intro-split{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:56px;align-items:start}
.intro-split>*{min-width:0}
@media (max-width:1024px){.intro-split{grid-template-columns:1fr;gap:36px}}
/* Label/value spec rows. The old inline 1fr 1fr grid let each pair wrap
   independently, so a short row (Sizes) sat next to a 2-line row and the block
   looked ragged. A fixed label column makes every row start at the same x. */
.spec-list{display:grid;gap:12px;margin:0 0 24px;font-size:.9rem}
.spec-row{display:grid;grid-template-columns:92px minmax(0,1fr);gap:2px 16px;align-items:baseline}
.spec-row dt{margin:0;font-weight:700;color:var(--color-navy)}
.spec-row dd{margin:0;color:var(--color-text-light);line-height:1.6}
@media (max-width:480px){.spec-row{grid-template-columns:1fr;gap:2px}}
/* Supporting card for the intro's right column. */
.side-card{background:var(--color-cream);border-radius:var(--radius-lg);padding:30px 28px}
.side-card h3{margin-bottom:16px;font-size:1.1rem}
.side-card ul{display:grid;gap:11px;margin:0 0 22px;padding:0;list-style:none}
.side-card li{position:relative;padding-left:22px;font-size:.9rem;line-height:1.6;color:var(--color-text-light)}
.side-card li::before{content:'';position:absolute;left:0;top:.52em;width:8px;height:8px;border-radius:50%;background:var(--color-gold)}
.side-card .btn{width:100%;justify-content:center}
/* Image step trio. Replaces an inline repeat(3,1fr) that outranked the media
   queries, so at 375px the page still rendered 3 columns of 88px and the captions
   broke mid-word. */
.media-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:44px}
@media (max-width:1024px){.media-steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){.media-steps{grid-template-columns:1fr}}
.media-steps figure{display:flex;flex-direction:column;margin:0;padding:0;overflow:hidden;background:var(--color-white);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}
.media-steps figure img{border-radius:0}
.media-steps figcaption{flex:1;padding:16px 20px 20px;font-size:.92rem;line-height:1.6;color:var(--color-text-light)}
.media-steps figcaption strong{color:var(--color-navy)}
.media-steps figcaption br{display:block;content:'';margin-top:2px}
/* Contact details in ONE column. The previous inline 1fr 1fr grid produced
   unequal 225px/147px columns and pushed the page 60px wider than a 375px
   viewport, clipping the phone number and business hours. */
.contact-list{display:grid;gap:18px}
.contact-list .contact-detail-item{align-items:flex-start}
.contact-list .contact-detail-item h4{margin-bottom:3px}
.contact-list .contact-detail-item a{color:var(--color-wine);font-weight:600;text-decoration:none;word-break:break-word}
.contact-list .contact-detail-item a:hover{text-decoration:underline}
.side-card .contact-list{margin-bottom:22px}
/* Form card head: the heading was centred while the paragraph beneath it was
   left-aligned, so the two lines of the same block disagreed. */
.form-card-head{text-align:center;margin-bottom:24px}
.form-card-head h3{margin-bottom:8px;text-align:center}
.form-card-head p{margin:0;color:var(--color-text-light)}
/* Small assurance strip under the intro paragraph. */
.reply-promise{display:grid;gap:9px;font-size:.87rem;color:var(--color-text-light)}
.reply-promise span{position:relative;padding-left:20px;line-height:1.5}
.reply-promise span::before{content:'';position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--color-gold)}
/* Quick self-service links for buyers who are not ready to enquire yet. */
.self-serve{margin-top:26px;font-size:.88rem;color:var(--color-text-light)}
.self-serve a{color:var(--color-wine);font-weight:600}