.commercial-page { background: #fff; color: #111; font-family: Inter, Arial, sans-serif; overflow: hidden; }
:is(.commercial-page, .hospitality-page) .commercial-reveal {
  opacity: 1;
  transform: none;
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
:is(.commercial-page, .hospitality-page) .commercial-reveal--pending { opacity: 0; transform: translateY(32px); }
@media (prefers-reduced-motion: reduce) {
  :is(.commercial-page, .hospitality-page) .commercial-reveal { opacity: 1; transform: none; transition: none; }
}
@media print {
  :is(.commercial-page, .hospitality-page) .commercial-reveal { opacity: 1; transform: none; transition: none; }
}
.commercial-shell { width: min(1474px, calc(100% - 80px)); margin-inline: auto; }
.commercial-intro { padding: 10vw 24px 160px; text-align: center; }
.commercial-intro h1 { margin: 0; font: 700 clamp(28px, 2vw, 36px)/1.2 Judson, Georgia, serif; text-transform: uppercase; }
.commercial-intro > p { max-width: 551px; margin: 28px auto 0; font-size: 16px; line-height: 1.35; }
.commercial-stats { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1200px; margin: 96px auto 0; gap: 30px; text-transform: uppercase; font-weight: 300; }
.commercial-stats dt { font-size: 20px; }
.commercial-stats dd { margin: 8px 0 0; font-size: 36px; }
.commercial-suppliers { display: flex; padding-block: 10px; border-block: 1px solid #aaa; overflow: hidden; }
.commercial-suppliers__group { display: flex; flex-shrink: 0; min-width: 100%; align-items: center; justify-content: space-around; gap: 45px; padding-right: 45px; animation: commercial-suppliers-scroll 40s linear infinite; }
@keyframes commercial-suppliers-scroll { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .commercial-suppliers { overflow-x: auto; }
  .commercial-suppliers__group { animation: none; }
  .commercial-suppliers__group[aria-hidden="true"] { display: none; }
}
.commercial-suppliers img { width: 140px; height: 55px; object-fit: contain; flex-shrink: 0; }
.commercial-supply { padding-top: 150px; }
.commercial-supply > h2, .commercial-faq > h2 { margin: 0; text-align: center; font-size: 24px; font-weight: 600; }
.commercial-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 36px 60px; margin: 35px 24px 50px; }
.commercial-tabs a { padding-bottom: 8px; font-size: 20px; font-weight: 300; }
.commercial-tabs a[aria-selected="true"] { font-weight: 700; border-bottom: 1px solid; }
.commercial-supply__panel { display: grid; grid-template-columns: 54.2% 45.8%; min-height: 695px; background: #dce2cd; }
.commercial-supply__panel[hidden] { display: none; }
.commercial-supply__panel > img { width: 100%; height: 695px; object-fit: cover; }
.commercial-supply__copy { align-self: center; padding: 70px clamp(35px, 7vw, 135px); }
.commercial-supply__copy h3 { margin: 0 0 34px; font-size: 24px; font-weight: 600; }
.commercial-supply__copy p { max-width: 400px; font-size: 16px; font-weight: 300; line-height: 1.45; margin: 0 0 85px; }
.commercial-button { display: inline-flex; align-items: center; justify-content: center; gap: 26px; min-height: 41px; border: 1px solid #111; padding: 10px 22px; font-size: 14px; }
.commercial-button img, .commercial-text-link img { width: 25px; height: 10px; object-fit: contain; }
.commercial-page a:focus-visible, .commercial-faq summary:focus-visible { outline: 2px solid #7c8d59; outline-offset: 5px; }
.commercial-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9%; padding: 145px 4% 150px; }
.commercial-benefits h2 { max-width: 175px; min-height: 52px; margin: 0 0 27px; font-size: 20px; }
.commercial-benefits p { margin: 0; font-size: 16px; line-height: 1.4; }
.commercial-advantage { display: grid; grid-template-columns: 47% 27% 1fr; gap: 6%; align-items: center; }
.commercial-advantage__main { width: 100%; height: 927px; object-fit: cover; }
.commercial-advantage__detail { width: 100%; height: 628px; object-fit: cover; }
.commercial-eyebrow { margin: 0 0 10px; font-size: 16px; font-weight: 300; font-style: italic; }
.commercial-advantage h2 { margin: 0 0 64px; font-size: 34px; }
.commercial-advantage__copy > p:not(.commercial-eyebrow) { max-width: 426px; margin: 0 0 65px; font-size: 16px; line-height: 1.4; }
.commercial-sectors { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); column-gap: 24px; row-gap: 155px; padding: 234px 0 185px; }
.commercial-sector { grid-column: span 5; scroll-margin-top: 30px; }
.commercial-sector:nth-child(2), .commercial-sector:nth-child(3), .commercial-sector:nth-child(6) { grid-column: span 9; }
.commercial-sector:nth-child(even) { padding-top: 92px; }
.commercial-sector__image { width: 100%; height: 484px; object-fit: cover; }
.commercial-sector > p { margin: 29px 0 48px; font-size: 13px; color: #484848; }
.commercial-sector h2 { max-width: 305px; min-height: 52px; margin: 0 0 36px; font-size: 20px; font-weight: 500; line-height: 1.3; }
.commercial-text-link { display: inline-flex; gap: 25px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid #111; font-size: 16px; font-weight: 300; }

/* Match the Collections manufacturing CTA across Commercial calls to action. */
:is(.commercial-page, .commercial-projects) :is(.commercial-button, .trade-form button) { cursor: pointer; transition: color .2s ease, background .2s ease; }
:is(.commercial-page, .commercial-projects) :is(.commercial-button, .trade-form button):hover { color: #fff; background: #111; }
:is(.commercial-page, .commercial-projects) :is(.commercial-button, .trade-form button):focus-visible { outline: 2px solid #111; outline-offset: 4px; }
:is(.commercial-page, .commercial-projects) .commercial-button img { transition: filter .2s ease; }
:is(.commercial-page, .commercial-projects) .commercial-button:hover img { filter: brightness(0) invert(1); }

/* Text links keep their original colours; only the arrow grows to the right. */
.commercial-text-link { cursor: pointer; }
.commercial-text-link img { transform-origin: left center; transition: transform .3s ease; }
.commercial-text-link:is(:hover, :focus-visible) img { transform: scaleX(1.5); }
@media (prefers-reduced-motion: reduce) {
  .commercial-text-link img { transition: none; }
}

.commercial-projects { display: grid; grid-template-columns: 24% 1fr; align-items: center; gap: 5%; padding: 132px 0 132px 10%; background: #dce2cd; }
.commercial-projects__heading h2 { margin: 0 0 40px; font: 700 36px/1.1 Judson, Georgia, serif; }
.commercial-projects__gallery { display: grid; grid-template-columns: 1.26fr 1fr 1fr; gap: 39px; align-items: center; margin-right: -7vw; }
.commercial-projects__item { display: block; width: 100%; min-width: 0; height: 490px; padding: 0; border: 0; background: none; cursor: pointer; }
.commercial-projects__item:focus-visible { outline: 2px solid #111; outline-offset: 5px; }
.commercial-projects__gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.commercial-projects__item:first-child { height: 617px; }
.commercial-faq { padding: 150px 0 220px; }
.commercial-faq > h2 { margin-bottom: 90px; }
.commercial-faq details { border-bottom: 1px solid #777; }
.commercial-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 120px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 700; }
.commercial-faq summary::-webkit-details-marker { display: none; }
.commercial-faq summary img { width: 17px; height: 17px; flex-shrink: 0; }
.commercial-faq details[open] summary img { transform: rotate(45deg); }
.commercial-faq details p { max-width: 900px; margin: 0 0 35px; font-size: 16px; line-height: 1.6; }
.commercial-faq details p a { text-decoration: underline; }
@media (max-width: 1100px) {
  .commercial-supply__panel { min-height: 520px; }
  .commercial-supply__panel > img { height: 520px; }
  .commercial-supply__copy { padding: 40px; }
  .commercial-supply__copy p { margin-bottom: 40px; }
  .commercial-benefits { gap: 35px; padding-block: 90px; }
  .commercial-advantage { grid-template-columns: 48% 1fr; gap: 5%; }
  .commercial-advantage__main { height: 680px; }
  .commercial-advantage__copy { padding-right: 30px; }
  .commercial-advantage__detail { grid-column: 2; height: 300px; margin-top: -30px; }
  .commercial-sectors { padding-top: 130px; row-gap: 90px; }
  .commercial-sector__image { height: 350px; }
  .commercial-projects { padding-left: 5%; }
  .commercial-projects__gallery { gap: 20px; }
  .commercial-projects__item { height: 350px; }
  .commercial-projects__item:first-child { height: 450px; }
}
@media (max-width: 700px) {
  .commercial-shell { width: calc(100% - 40px); }
  .commercial-intro { padding: 60px 24px 90px; }
  .commercial-stats { grid-template-columns: repeat(2, 1fr); gap: 38px 20px; margin-top: 60px; }
  .commercial-stats dt { font-size: 13px; }
  .commercial-stats dd { font-size: 30px; }
  .commercial-supply { padding-top: 75px; }
  .commercial-tabs { gap: 20px 26px; }
  .commercial-tabs a { font-size: 16px; }
  .commercial-supply__panel { grid-template-columns: 1fr; }
  .commercial-supply__panel > img { height: 340px; }
  .commercial-supply__copy { padding: 45px 24px; }
  .commercial-benefits { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; padding: 70px 0; }
  .commercial-benefits h2 { font-size: 18px; }
  .commercial-benefits p { font-size: 14px; }
  .commercial-advantage { grid-template-columns: 1fr; gap: 40px; }
  .commercial-advantage__main { height: 450px; }
  .commercial-advantage__copy { padding: 15px 24px; }
  .commercial-advantage h2 { margin-bottom: 28px; }
  .commercial-advantage__detail { grid-column: auto; height: 300px; margin: 0; }
  .commercial-sectors { grid-template-columns: 1fr; padding-block: 80px; gap: 60px; }
  .commercial-sectors .commercial-sector { grid-column: auto; padding-top: 0; }
  .commercial-sector > p { margin-bottom: 24px; }
  .commercial-sector h2 { min-height: 0; margin-bottom: 26px; }
  .commercial-projects { grid-template-columns: 1fr; gap: 45px; padding: 65px 20px; }
  .commercial-projects__gallery { margin: 0; overflow-x: auto; grid-template-columns: repeat(3, 75%); scroll-snap-type: x mandatory; }
  .commercial-projects__item { height: 310px; scroll-snap-align: start; }
  .commercial-projects__item:first-child { height: 380px; }
  .commercial-faq { padding-block: 80px; }
  .commercial-faq > h2 { margin-bottom: 40px; font-size: 22px; }
  .commercial-faq summary { min-height: 100px; font-size: 15px; }
}

/* Supply photography crops, Figma 1491:10. */
.commercial-supply__image {position:relative;overflow:hidden;min-height:695px}
.commercial-supply__image img {position:absolute;max-width:none;width:100%;height:100%;object-fit:cover}
[data-supply-panel="government"] .commercial-supply__image img,
[data-supply-panel="specialised"] .commercial-supply__image img {width:106.15%;height:106%;left:-6.15%;top:-3%}
[data-supply-panel="aged-care"] .commercial-supply__image img {width:118.69%;height:100%;left:.04%;top:0}
[data-supply-panel="shops"] .commercial-supply__image img {width:106.15%;height:106%;left:-6.17%;top:-5.96%}
[data-supply-panel="education"] .commercial-supply__image img {width:117.29%;height:117.12%;left:-17.29%;top:-14.11%}
@media(max-width:1200px){.commercial-supply__image{min-height:520px}}
@media(max-width:700px){.commercial-supply__image{min-height:340px}}

.commercial-projects--white { background: #fff; }

.commercial-projects__carousel { position: relative; min-width: 0; }
.commercial-projects__item[hidden] { display: none; }
.commercial-projects__next { position: absolute; z-index: 2; right: 4vw; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; color: #fff; background: rgba(0,0,0,.35); cursor: pointer; transition: background .2s ease; }
.commercial-projects__next:hover { background: rgba(0,0,0,.65); }
.commercial-projects__next:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@media (max-width: 800px) {
  .commercial-projects__next { right: 12px; width: 48px; height: 48px; }
}

/* Reveal project controls over the image container on pointer devices. */
@media (hover: hover) and (pointer: fine) {
  .hospitality-page .commercial-projects__next {
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, background .2s ease;
  }
  .hospitality-page .commercial-projects__carousel:hover .commercial-projects__next,
  .hospitality-page .commercial-projects__next:focus-visible {
    opacity: 1;
    pointer-events: auto;
  }
}