/* The Quarry Workshop — site styles. Desktop layout comes from the design; these rules make it work on every screen. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: 'IBM Plex Sans', system-ui, sans-serif; background: #EDE8DE; color: #1F1D1A; }
a { color: #8A3F1E; }
a:hover { color: #5E2A12; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid #8A3F1E; outline-offset: 3px; }
.page { max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; }
.page > footer { margin-top: auto; }

/* Mobile menu (hidden on desktop) */
.mnav { display: none; position: relative; }
.mnav summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary span { display: block; width: 24px; height: 2px; background: #1F1D1A; }
.mnav nav { position: absolute; right: 0; top: 52px; z-index: 20; width: min(300px, 88vw); background: #F6F2EA; border: 1px solid #CFC6B6; display: flex; flex-direction: column; padding: 8px; box-shadow: 0 12px 28px rgba(31,29,26,.14); }
.mnav nav a { padding: 14px 12px; color: #1F1D1A; text-decoration: none; font-size: 17px; border-bottom: 1px solid #E2DACB; }
.mnav nav a:last-child { border-bottom: 0; }
.mnav .mnav-cta { margin-top: 8px; background: #1F1D1A; color: #F6F2EA; text-align: center; border-radius: 2px; }

/* Enquiry form */
.hp { position: absolute; left: -9999px; }
.chip { position: relative; display: block; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: flex; align-items: center; min-height: 52px; padding: 12px 16px; border: 1px solid #8C8375; border-radius: 2px; background: #FFFFFF; font-size: 15px; line-height: 1.35; }
.chip input:checked + span { background: #1F1D1A; color: #F6F2EA; border-color: #1F1D1A; }
.chip input:focus-visible + span { outline: 2px solid #8A3F1E; outline-offset: 2px; }
input:focus, select:focus, textarea:focus { outline: 2px solid #8A3F1E; outline-offset: 1px; }

/* Medium screens */
@media (max-width: 1200px) {
  .site-nav { gap: 22px !important; font-size: 14px !important; }
}

/* Tablets and phones */
@media (max-width: 960px) {
  .site-nav { display: none !important; }
  .mnav { display: block; }
  .site-header { height: 72px !important; }
  .page [style*="padding: 0 80px"] { padding-left: 20px !important; padding-right: 20px !important; }
  .page section, .page footer, .page header { padding-left: 20px !important; padding-right: 20px !important; }
  .page section[style*="margin: 0 80px"], .page section[style*="margin: 120px 80px"], .page section[style*="margin: 96px 80px"] { margin-left: 20px !important; margin-right: 20px !important; }
  .page section[style*="padding: 120px"], .page section[style*="padding: 96px"], .page section[style*="padding-top: 96px"], .page section[style*="padding-top: 120px"] { padding-top: 64px !important; }
  .page section[style*="margin-top: 96px"], .page section[style*="margin-top: 120px"] { margin-top: 64px !important; }
  .page section[style*="margin: 96px 80px"], .page section[style*="margin: 120px 80px"] { margin-top: 64px !important; margin-bottom: 64px !important; padding: 32px 24px !important; }
  .page section[style*="height:"] { height: auto !important; }
  .page [style*="grid-template-columns"] { grid-template-columns: 1fr !important; row-gap: 28px !important; }
  .page [style*="grid-column"] { grid-column: auto !important; }
  .page [style*="repeat(3"], .page [style*="repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .page div:has(> img) { height: auto !important; aspect-ratio: 4 / 3; }
  .page [style*="max-width:"] { max-width: 100% !important; }
  .page [style*="justify-content: space-between"][style*="display: flex"] { flex-wrap: wrap; row-gap: 20px; }
  .page h1 { font-size: 46px !important; line-height: 1 !important; }
  .page h2 { font-size: 36px !important; line-height: 1.05 !important; }
  .page h3 { font-size: 26px !important; }
  .page [style*="font-size: 88px"], .page [style*="font-size: 72px"], .page [style*="font-size: 64px"] { font-size: 44px !important; }
  .page [style*="font-size: 48px"]:not(h1):not(h2) { font-size: 32px !important; }
  .page [style*="border-left: 1px solid"] { border-left: 0 !important; padding-left: 0 !important; }
  .page section[aria-label="Why us"] { padding-top: 8px !important; padding-bottom: 24px !important; }
  .page section[aria-label="Why us"] > div { padding: 20px 0 0 !important; }
  .page form { padding: 24px !important; }
  .page form [style*="grid-template-columns"] { row-gap: 14px !important; }
  .page .site-footer [style*="justify-content: space-between"] { flex-direction: column; }
}

@media (max-width: 620px) {
  .page [style*="repeat(2"], .page [style*="repeat(3"], .page [style*="repeat(4"] { grid-template-columns: 1fr !important; }
  .page h1 { font-size: 40px !important; }
  .page h2 { font-size: 32px !important; }
  .page p[style*="font-size: 20px"], .page p[style*="font-size: 18px"] { font-size: 17px !important; }
  .page a[style*="height: 56px"] { width: 100%; justify-content: center; }
  .page .site-header a[style*="height: 56px"] { width: auto; }
}