/* Quality page only: supplied photography and complete, model-linked documents. */
:root { --forest: #173d35; --forest-deep: #102f29; }
* { box-sizing: border-box; }
body { margin: 0; color: #173d35; font: 16px/1.6 Arial, Helvetica, sans-serif; }
a { color: inherit; }
.quality-page { --q-muted: #59675f; --q-line: #dedfd4; max-width: 1600px; margin: auto; padding: 52px clamp(20px, 4.1vw, 72px) 88px; }
.quality-page h1,.quality-page h2,.quality-page h3,.quality-viewer h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.045em; }
.quality-page h1,.quality-page h2,.quality-page h3,.quality-page p { margin: 0; }
.quality-page a { text-decoration: none; }
.q-kicker { color: #b7482e; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.q-hero { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: clamp(28px,4vw,64px); }
.q-hero h1 { font-size: clamp(44px,5.1vw,78px); line-height: 1.06; margin: 24px 0; }
.q-hero h1 em { font-weight: 400; }
.q-intro { max-width: 450px; color: var(--q-muted); font-size: 18px; line-height: 1.7; }
.q-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-top: 30px; }
.q-button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 24px; border: 1px solid #173d35; border-radius: 30px; background: #173d35; color: #fffaf2; font-size: 16px; transition: background .2s,transform .2s; }
.q-button:hover { background: #28594d; transform: translateY(-2px); }
.q-text-link { display: inline-flex; align-items: center; min-height: 48px; text-decoration: underline !important; text-underline-offset: 6px; text-decoration-color: #a4aea5 !important; }
.q-hero-photo { margin: 0; position: relative; }
.q-hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1.12; object-fit: cover; border-radius: 24px; }
.q-hero-photo figcaption { position: absolute; bottom: 20px; left: 20px; padding: 8px 16px; background: #fffaf2; border-radius: 24px; font-size: 14px; }
.q-checkpoints { margin-top: 84px; padding: 44px clamp(24px,3vw,48px); border-radius: 24px; background: #173d35; color: #fffaf2; }
.q-checkpoints-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.quality-page h2 { font-size: clamp(34px,3.2vw,50px); line-height: 1.13; }
.q-checkpoints-heading > p { max-width: 350px; color: #dbe4dc; font-size: 17px; }
.q-checkpoints-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px; margin-top: 32px; }
.q-checkpoint { border-top: 1px solid #668278; padding-top: 22px; }
.q-checkpoint-number { display: block; color: #e4c9a2; font: 28px/1 Georgia,serif; }
.q-checkpoint h3 { font-size: 25px; line-height: 1.15; letter-spacing: -.025em; margin: 20px 0 12px; }
.q-checkpoint p { color: #dbe4dc; font-size: 16px; line-height: 1.65; }
.q-library { margin-top: 86px; scroll-margin-top: 128px; }
.q-library-heading { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: end; }
.q-library-heading h2 { margin-top: 16px; }
.q-library-heading > p { max-width: 490px; justify-self: end; color: var(--q-muted); font-size: 17px; }
.q-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 24px; }
.q-filters[hidden],.q-document[hidden] { display: none; }
.q-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px !important; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.q-filters button { font: inherit; color: #173d35; border: 1px solid #b9c6bd; background: transparent; border-radius: 30px; min-height: 48px; padding: 10px 20px; cursor: pointer; transition: background .18s; }
.q-filters button[aria-pressed=true] { background: #173d35; border-color: #173d35; color: #fffaf2; }
.q-filters button:hover:not([aria-pressed=true]) { background: #f5e3c9; }
.q-document-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 32px 24px; }
.q-document { grid-column: span 4; min-width: 0; display: block; }
.q-document[data-kind=design] { grid-column: span 6; }
.q-document-media { display: block; border: 1px solid #e4e0d5; border-radius: 18px; background: #f0ece2; padding: 22px; overflow: hidden; }
.q-document-media img { display: block; width: 100%; height: 310px; object-fit: contain; transition: transform .25s; }
.q-document:hover .q-document-media img { transform: scale(1.025); }
.q-document-meta { padding: 18px 2px 0; }
.q-document h3 { font-size: 25px; letter-spacing: -.03em; line-height: 1.2; }
.q-document-meta p { color: var(--q-muted); font-size: 15px; margin-top: 8px; }
.q-document-action { display: inline-block; margin-top: 10px; font-size: 15px; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #a4aea5; }
.q-library:not(:has(.q-filters:not([hidden]))) .q-document-grid { margin-top: 30px; }
.q-request { display: flex; align-items: center; justify-content: space-between; gap: 40px; background: #f5e3c9; padding: 40px; border-radius: 24px; margin-top: 64px; }
.q-request h2 { font-size: clamp(30px,3vw,42px); }
.q-request p { max-width: 650px; color: var(--q-muted); margin-top: 14px; font-size: 17px; }
.q-request .q-button { flex-shrink: 0; }
.quality-page a:focus-visible,.quality-page button:focus-visible,.quality-viewer a:focus-visible,.quality-viewer button:focus-visible { outline: 3px solid #b7482e; outline-offset: 5px; }
.quality-viewer { width: min(1100px,calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 20px; color: #173d35; background: #fffaf2; }
.quality-viewer::backdrop { background: rgb(10 30 25 / .82); }
.q-viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 24px; }
.quality-viewer h2 { font-size: 28px; line-height: 1.15; margin: 0; }
.q-viewer-close { flex-shrink: 0; min-width: 48px; min-height: 48px; border: 1px solid #a6b3a8; border-radius: 50%; background: transparent; color: #173d35; font-size: 28px; cursor: pointer; }
.q-viewer-image { display: block; width: 100%; height: min(66dvh,760px); object-fit: contain; background: #eeeae0; padding: 16px; }
.q-viewer-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 24px; }
.q-viewer-foot p { margin: 0; max-width: 740px; font-size: 15px; overflow-wrap: anywhere; }
.q-viewer-foot a { flex-shrink: 0; font-size: 16px; color: inherit; }
html:has(.quality-viewer[open]) { overflow: hidden; }
@media(min-width:1600px) { .q-hero h1 { font-size: 82px; } }
@media(max-width:1000px) {
  .q-checkpoints-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
  .q-checkpoints-heading { align-items: start; }
  .q-checkpoints-heading > p { max-width: 280px; }
  .q-document-media img { height: 250px; }
  .q-document-media { padding: 14px; }
  .q-document h3 { font-size: 23px; }
}
@media(max-width:760px) {
  .quality-page { padding-top: 32px; padding-bottom: 48px; }
  .q-hero { grid-template-columns: 1fr; gap: 28px; }
  .q-hero h1 { font-size: clamp(42px,8.4vw,62px); margin: 18px 0; }
  .q-intro { max-width: 550px; font-size: 17px; }
  .q-actions { margin-top: 20px; }
  .q-hero-photo img { aspect-ratio: 1.2; }
  .q-checkpoints { margin-top: 44px; padding: 30px 24px; }
  .q-checkpoints-heading { display: block; }
  .q-checkpoints-heading > p { max-width: 500px; margin-top: 18px; }
  .q-library { margin-top: 48px; scroll-margin-top: 96px; }
  .q-library-heading { grid-template-columns: 1fr; gap: 20px; }
  .q-library-heading > p { max-width: none; justify-self: start; }
  .q-document { grid-column: span 6; }
  .q-document-media img { height: 240px; }
  .q-document-grid { gap: 28px 16px; }
  .q-request { padding: 28px; margin-top: 40px; flex-direction: column; align-items: start; gap: 24px; }
  .q-viewer-foot { flex-direction: column; align-items: start; gap: 10px; }
  .q-viewer-head { padding: 14px 16px; }
  .quality-viewer h2 { font-size: 24px; }
  .q-viewer-image { height: 54dvh; padding: 10px; }
}
@media(max-width:480px) {
  .q-checkpoints-grid { grid-template-columns: 1fr; gap: 24px; }
  .q-checkpoint { display: grid; grid-template-columns: 34px 1fr; gap: 0 14px; padding-top: 18px; }
  .q-checkpoint h3 { margin: 0 0 10px; }
  .q-checkpoint p { grid-column: 2; }
  .q-document,.q-document[data-kind=design] { grid-column: 1/-1; }
  .q-document-media img { height: 310px; }
  .q-filters { gap: 8px; }
  .q-filters button { padding: 10px 14px; font-size: 15px; }
  .q-hero-photo figcaption { bottom: 14px; left: 14px; }
}
@media(prefers-reduced-motion:reduce) { .quality-page * { transition: none !important; } }