/* SAS Global Service: adaptive category mosaic, detail-page RFQs and branded social links.
   Loaded last, so these rules extend the existing CMS-driven design without replacing it. */

/* Exactly three categories intentionally keep the original editorial 1-tall + 2-stack layout. */
@media (min-width: 761px) {
  .studio-site .category-grid--1,
  .studio-site .category-grid--2,
  .studio-site .category-grid--4,
  .studio-site .category-grid--5,
  .studio-site .category-grid--many {
    gap: 15px;
  }
  .studio-site .category-grid--1 {grid-template-columns:minmax(0,1fr);grid-auto-rows:clamp(365px,39vw,515px)}
  .studio-site .category-grid--2 {grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(365px,39vw,515px)}
  .studio-site .category-grid--4 {grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(310px,27vw,405px)}
  .studio-site .category-grid--many {grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(285px,28vw,370px)}
  .studio-site .category-grid--5 {
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(6,minmax(0,1fr));
    grid-auto-rows:auto;
    height:clamp(660px,58vw,790px);
  }
  .studio-site .category-grid--5 .category-card:nth-child(1) {grid-column:1;grid-row:1 / span 3}
  .studio-site .category-grid--5 .category-card:nth-child(2) {grid-column:1;grid-row:4 / span 3}
  .studio-site .category-grid--5 .category-card:nth-child(3) {grid-column:2;grid-row:1 / span 2}
  .studio-site .category-grid--5 .category-card:nth-child(4) {grid-column:2;grid-row:3 / span 2}
  .studio-site .category-grid--5 .category-card:nth-child(5) {grid-column:2;grid-row:5 / span 2}
  .studio-site .category-grid--1 .category-card:first-child,
  .studio-site .category-grid--2 .category-card:first-child,
  .studio-site .category-grid--4 .category-card:first-child,
  .studio-site .category-grid--5 .category-card:first-child,
  .studio-site .category-grid--many .category-card:first-child {grid-row:auto}
  /* The five-card pattern defines explicit row placement for its first card. */
  .studio-site .category-grid--5 .category-card:first-child {grid-row:1 / span 3}
  .studio-site .category-grid--2 .category-card:first-child .category-card-info,
  .studio-site .category-grid--4 .category-card:first-child .category-card-info,
  .studio-site .category-grid--5 .category-card:first-child .category-card-info,
  .studio-site .category-grid--many .category-card:first-child .category-card-info {padding:30px 33px}
  .studio-site .category-grid--2 .category-card:first-child .category-card-top,
  .studio-site .category-grid--4 .category-card:first-child .category-card-top,
  .studio-site .category-grid--5 .category-card:first-child .category-card-top,
  .studio-site .category-grid--many .category-card:first-child .category-card-top {top:29px;left:33px;right:33px}
  .studio-site .category-grid--2 .category-card:first-child .category-card-info h3,
  .studio-site .category-grid--4 .category-card:first-child .category-card-info h3,
  .studio-site .category-grid--5 .category-card:first-child .category-card-info h3,
  .studio-site .category-grid--many .category-card:first-child .category-card-info h3 {font-size:clamp(22px,2vw,33px);margin-bottom:10px}
  .studio-site .category-grid--2 .category-card:first-child .category-card-info p,
  .studio-site .category-grid--4 .category-card:first-child .category-card-info p,
  .studio-site .category-grid--5 .category-card:first-child .category-card-info p,
  .studio-site .category-grid--many .category-card:first-child .category-card-info p {font-size:12px;margin-bottom:15px}
  .studio-site .category-grid--5 .category-card .category-card-info {padding:23px 28px}
  .studio-site .category-grid--5 .category-card .category-card-top {top:22px;left:28px;right:28px}
  .studio-site .category-grid--5 .category-card .category-card-info h3 {font-size:clamp(21px,1.9vw,30px)}
  .studio-site .category-grid--5 .category-card .category-card-info p {font-size:12px;line-height:1.5;margin-bottom:10px}
}
@media (min-width:761px) and (max-width:1080px) {
  .studio-site .category-grid--5 {height:clamp(710px,77vw,800px)}
  .studio-site .category-grid--5 .category-card .category-card-info {padding:20px}
  .studio-site .category-grid--5 .category-card .category-card-top {top:18px;left:20px;right:20px}
  .studio-site .category-grid--5 .category-card .category-card-info h3 {font-size:clamp(20px,2.7vw,27px)}
}
@media (max-width:760px) {
  .studio-site .category-grid--1,.studio-site .category-grid--2,
  .studio-site .category-grid--4,.studio-site .category-grid--5,
  .studio-site .category-grid--many {
    display:grid;grid-template-columns:1fr;grid-template-rows:none;
    grid-auto-rows:auto;height:auto;gap:14px;
  }
  .studio-site .category-grid--1 .category-card,.studio-site .category-grid--2 .category-card,
  .studio-site .category-grid--4 .category-card,.studio-site .category-grid--5 .category-card,
  .studio-site .category-grid--many .category-card {grid-column:auto;grid-row:auto;min-height:355px}
  .studio-site .category-grid--2 .category-card:first-child,
  .studio-site .category-grid--4 .category-card:first-child,
  .studio-site .category-grid--5 .category-card:first-child,
  .studio-site .category-grid--many .category-card:first-child {min-height:355px}
  .studio-site .category-grid--2 .category-card:first-child .category-card-info,
  .studio-site .category-grid--4 .category-card:first-child .category-card-info,
  .studio-site .category-grid--5 .category-card:first-child .category-card-info,
  .studio-site .category-grid--many .category-card:first-child .category-card-info {padding:25px}
  .studio-site .category-grid--2 .category-card:first-child .category-card-top,
  .studio-site .category-grid--4 .category-card:first-child .category-card-top,
  .studio-site .category-grid--5 .category-card:first-child .category-card-top,
  .studio-site .category-grid--many .category-card:first-child .category-card-top {top:24px;left:25px;right:25px}
  .studio-site .category-grid--2 .category-card:first-child .category-card-info h3,
  .studio-site .category-grid--4 .category-card:first-child .category-card-info h3,
  .studio-site .category-grid--5 .category-card:first-child .category-card-info h3,
  .studio-site .category-grid--many .category-card:first-child .category-card-info h3 {font-size:clamp(25px,6vw,32px)}
}
@media (max-width:560px) {
  .studio-site .category-grid--1 .category-card,.studio-site .category-grid--2 .category-card,
  .studio-site .category-grid--4 .category-card,.studio-site .category-grid--5 .category-card,
  .studio-site .category-grid--many .category-card {min-height:350px}
}

/* Embedded request forms for each eligible product and published service. */
#enquiry-form {scroll-margin-top:110px}
.detail-enquiry-section {background:#f1f4f6;border-top:1px solid #dee7ed}
.detail-enquiry-layout {display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(28px,5vw,85px);align-items:start}
.detail-enquiry-intro {position:sticky;top:135px;max-width:450px}
.detail-enquiry-intro h2 {font-size:clamp(32px,3.6vw,52px);letter-spacing:-.05em;line-height:1.12;margin:0 0 20px;color:var(--deep)}
.detail-enquiry-intro p {font-size:15px;line-height:1.8;color:#5f7282}
.detail-enquiry-card {min-width:0;padding:clamp(24px,3vw,46px);border:1px solid #dbe4e9;background:#fff}
.studio-site .detail-enquiry-card .enquiry-panel,
.studio-site .detail-enquiry-card .enquiry-panel--detail {padding:0;border:0;background:transparent;margin:0}
.detail-enquiry-card .form-heading h2 {font-size:clamp(21px,2.1vw,30px);line-height:1.3}
.enquiry-context {background:#f0f4f7;border-left:3px solid var(--gold);padding:14px 18px;margin:0 0 26px;display:flex;flex-direction:column;gap:3px}
.enquiry-context>span {font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:#687c8d}
.enquiry-context strong {font-size:15px;font-weight:750;color:var(--deep);overflow-wrap:anywhere}
.enquiry-context small {font-size:12px;color:#607181}
.studio-site .detail-enquiry-card .field input,
.studio-site .detail-enquiry-card .field select,
.studio-site .detail-enquiry-card .field textarea {max-width:100%}

/* Brand-mark icons are visible only where URLs are supplied in Admin > Social. */
.social-block {max-width:100%}
.social-links--icons {display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.social-links--icons a,.studio-site .social-links--icons a {display:inline-flex;align-items:center;justify-content:center;flex:0 0 42px;width:42px;height:42px;padding:0;border:1px solid #b3bec7;border-radius:50%;text-decoration:none;line-height:1;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease}
.social-brand-icon {width:19px;height:19px;display:block}
.social-links--icons a:hover {transform:translateY(-2px)}
.social-links--icons a:focus-visible {outline:2px solid var(--gold);outline-offset:3px}
.social-block--footer {margin-top:20px}
.social-block--footer .social-links--icons a {color:#edf4f8;border-color:rgba(217,228,235,.45)}
.social-block--footer .social-links--icons a:hover {color:#0c2537;background:var(--gold);border-color:var(--gold)}
.social-block--contact {border-top:1px solid var(--line);padding:22px 0 0;margin-top:8px}
.social-block--contact .social-block-title {color:var(--deep);font-weight:800;font-size:15px;margin:0 0 16px}
.social-block--contact .social-links--icons a {color:#173950;background:#fff;border-color:#c9d5dc}
.social-block--contact .social-links--icons a:hover {background:var(--navy);border-color:var(--navy);color:#fff}
.sr-only {position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

@media (max-width:900px) {
  .detail-enquiry-layout {grid-template-columns:1fr;gap:26px}
  .detail-enquiry-intro {position:static;max-width:720px}
}
@media (max-width:560px) {
  .detail-enquiry-card {padding:22px 18px}
  .detail-enquiry-intro h2 {font-size:31px}
  .social-links--icons a,.studio-site .social-links--icons a {flex-basis:40px;width:40px;height:40px}
  #enquiry-form {scroll-margin-top:84px}
}
@media (prefers-reduced-motion:reduce) {
  .social-links--icons a {transition:none}
  .social-links--icons a:hover {transform:none}
}