/* The detail pages that share one block layer: the About Us group
   (/about/company/, /about/our-approach/, /about/quality-production/), the
   Solutions pages, and — as they are written — the Custom Services and
   Resources pages and the second-level product categories. inc/setup.php loads
   this sheet for every routed page beside that page's own sheet,
   assets/css/route-<path>.css.

   These are the blocks the pages are built from, so their markup is meant to use
   the classes defined here, the primitives in layout.css (.container, .section,
   .section--cream, .section--surface, .section--clay, .section-heading, .eyebrow,
   .page-head, .breadcrumb, .btn, .text-link) and the shared .media-slot panel
   from inc/placeholders.php. A page that needs something of its own puts it in
   its own sheet, assets/css/route-<path>.css, which is loaded with this one.

   Band rhythm follows the homepage: canvas hero, then alternating
   white/cream/canvas bands, and the clay closing call to action. */

.subpage-body{padding-block:var(--space-md) 0}

/* ---------- Hero ---------- */
.subpage-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-block:var(--space-lg) 0}
.subpage-hero__body{min-width:0}
.subpage-hero__head{margin-bottom:0}
.subpage-hero__lead{margin-top:20px;max-width:560px;font-family:var(--font-display);font-size:1.06rem;font-weight:600;line-height:1.45;letter-spacing:-.015em}
.subpage-hero__intro{margin-top:14px;max-width:560px;font-size:.94rem;color:var(--muted)}
.subpage-hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.subpage-hero__media{position:relative;min-width:0}
.subpage-hero__slot{aspect-ratio:4/3;box-shadow:0 22px 44px rgb(76 55 39 / 12%)}
.subpage-hero__tag{position:absolute;left:-20px;bottom:-18px;margin:0;padding:13px 17px;border-radius:12px;background:var(--apricot);font-family:var(--font-display);font-size:.78rem;font-weight:800;line-height:1.3;box-shadow:0 10px 30px rgb(164 123 96 / 20%)}

/* ---------- Fact rail under the hero ---------- */
.subpage-facts{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin:var(--space-xl) 0 0;padding:26px 0 0;border-top:1px solid var(--line)}
.subpage-fact{display:flex;flex-direction:column;gap:6px;min-width:0}
.subpage-fact__label{font-family:var(--font-display);font-size:.8rem;font-weight:800}
.subpage-fact__value{font-size:.78rem;line-height:1.55;color:var(--muted)}

/* ---------- Panel grid: three or four plain cards ---------- */
.panel-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0}
.panel-grid--four{grid-template-columns:repeat(4,minmax(0,1fr))}
.panel-grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.panel-card{display:flex;flex-direction:column;min-width:0;height:100%;padding:28px 26px;background:var(--canvas);border:1px solid var(--line-soft);border-radius:var(--radius-card)}
.panel-grid--on-white .panel-card{background:var(--canvas)}
.panel-grid--on-canvas .panel-card{background:var(--white)}
.panel-card__no{font-family:var(--font-display);font-size:.72rem;font-weight:800;letter-spacing:.14em;color:var(--clay)}
.panel-card__title{margin-top:16px;font-size:1.14rem}
.panel-card__text{margin-top:12px;font-size:.9rem;line-height:1.6;color:var(--muted)}

/* ---------- Numbered steps ---------- */
.step-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 26px;margin:0;padding:0}
.step-list--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.step{position:relative;min-width:0;padding-top:24px;border-top:1px solid var(--line)}
.step::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--clay)}
.step__no{display:block;font-family:var(--font-display);font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}
.step__title{margin-top:12px;font-size:1.1rem}
.step__text{margin-top:10px;font-size:.9rem;line-height:1.6;color:var(--muted)}

/* ---------- A hairline-separated stack of titled items ---------- */
.stack-list{list-style:none;display:grid;margin:0;padding:0}
.stack-item{padding:20px 0;border-top:1px solid var(--line)}
.stack-item:first-child{padding-top:0;border-top:0}
.stack-item:last-child{padding-bottom:0}
.stack-item__title{font-size:1.06rem}
.stack-item__text{margin-top:8px;max-width:620px;font-size:.88rem;line-height:1.6;color:var(--muted)}

/* ---------- Two panels side by side ---------- */
.pair-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.pair-panel{min-width:0;padding:28px 26px;background:var(--canvas);border:1px solid var(--line-soft);border-radius:var(--radius-card)}
.pair-panel--alt{background:var(--cream)}
.pair-panel__title{font-size:1.06rem}
.pair-panel__lead{margin-top:10px;font-size:.88rem;line-height:1.6;color:var(--muted)}

/* ---------- Marker lists ---------- */
.check-list{list-style:none;display:grid;gap:14px;margin:22px 0 0;padding:0}
.check-list--plain{margin-top:18px}
.check-list__item{position:relative;min-width:0;padding-left:20px;font-size:.9rem;line-height:1.6;color:var(--muted)}
.check-list__item::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--clay)}
.check-list--limits .check-list__item::before{background:transparent;box-shadow:inset 0 0 0 1.6px #c9bcb0}

/* ---------- Media beside body copy ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.split--media-first{grid-template-columns:.95fr 1.05fr}
.split__media{min-width:0}
.split__slot{aspect-ratio:4/3}
.split__body{min-width:0}
.split__body h3{margin-top:26px}
.split__body h3:first-child{margin-top:0}
.split__text{margin-top:16px;max-width:560px;font-size:.92rem;color:var(--muted)}

/* ---------- A closing line on a hairline ---------- */
.note-line{margin:30px 0 0;padding-top:22px;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}

/* ---------- A record: labels over values, three across ---------- */
.record{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0}
.record__item{min-width:0;padding:22px 22px 24px;background:var(--canvas);border:1px solid var(--line-soft);border-radius:var(--radius-card)}
.record__label{display:block;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.record__value{margin-top:10px;font-family:var(--font-display);font-size:.95rem;font-weight:700;line-height:1.45}
.record__value a:hover{color:var(--clay)}

/* ---------- Onward links ---------- */
.link-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0;padding:0}
.link-grid--four{grid-template-columns:repeat(4,minmax(0,1fr))}
.link-grid__item{display:flex;min-width:0}
.link-card{position:relative;display:flex;flex:1;flex-direction:column;gap:10px;min-height:180px;padding:26px 24px 54px;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius-card);transition:transform .24s,box-shadow .24s}
.link-card:hover,.link-card:focus-visible{transform:translateY(-4px);box-shadow:0 16px 28px rgb(76 55 39 / 9%)}
.link-card__title{font-family:var(--font-display);font-size:1.05rem;font-weight:800;letter-spacing:-.02em}
.link-card__line{font-size:.82rem;line-height:1.55;color:var(--muted)}
.link-card__arrow{position:absolute;right:22px;bottom:20px;color:var(--clay);font-weight:700}
.link-card:hover .link-card__arrow{transform:translate(2px,-2px)}

/* ---------- Closing call to action, on the clay band ---------- */
.subpage-cta__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-lg)}
.subpage-cta__body{max-width:640px}
.subpage-cta__text{margin-top:14px;color:#584b41}
.subpage-cta__actions{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- Narrow screens ---------- */
@media (max-width:1100px){
  .subpage-hero{gap:44px}
  .subpage-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panel-grid--four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .link-grid--four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{gap:34px}
}
@media (max-width:900px){
  .subpage-hero{grid-template-columns:1fr;gap:32px;padding-block:var(--space-md) 0}
  .subpage-hero__slot{aspect-ratio:16/10}
  .subpage-hero__tag{left:0;bottom:-14px}
  .subpage-facts{margin-top:var(--space-lg)}
  .panel-grid,
  .panel-grid--four,
  .panel-grid--two,
  .step-list,
  .step-list--two{grid-template-columns:1fr;gap:18px}
  .panel-card{padding:24px 22px}
  .pair-grid{grid-template-columns:1fr}
  .split,
  .split--media-first{grid-template-columns:1fr;gap:26px}
  .record{grid-template-columns:1fr;gap:16px}
  .subpage-cta__inner{align-items:flex-start;flex-direction:column;gap:var(--space-md)}
}
@media (max-width:560px){
  .subpage-hero__lead{font-size:1rem}
  .subpage-facts{grid-template-columns:1fr;gap:14px}
  .link-grid,
  .link-grid--four{grid-template-columns:1fr}
  .link-card{min-height:0;padding:22px 22px 46px}
  .subpage-cta__actions{width:100%}
  .subpage-cta__actions .btn{flex:1 1 auto}
}