/* TUUYA — product pillar pages (page-timber-houses.php and future silos).
   Reuses the site design system: paper/ink/brass tokens, hairlines, no radii/shadows. */

.silo { width: min(76rem, 100%); margin-inline: auto; padding: clamp(4rem, 9vh, 7rem) var(--gutter) 0; position: relative; z-index: 1; }

.silo-hero { max-width: 52rem; margin-bottom: clamp(2rem, 5vh, 3rem); }
.silo-hero .kick, .silo-cta .kick { font-family: var(--font-display); color: var(--brass); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8rem; margin-bottom: 0.8rem; }
.silo-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 5.4vw, 3.9rem); line-height: 1.03; }
.silo-hero .lede { margin-top: 1rem; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink-soft); max-width: 44ch; }
.silo-hero-cta { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; margin-top: 1.4rem; }
.silo-alt { color: var(--brass-dark); text-decoration: none; }
.silo-alt:hover { color: var(--ink); }

/* Quick summary: definition + fact table (editorial plate like the home intro) */
.silo-summary { border: 1px solid var(--hairline-strong); border-top: 2px solid var(--brass); background: rgba(255, 255, 255, 0.4); padding: clamp(1.4rem, 3vw, 2.2rem); margin-bottom: clamp(2.5rem, 6vh, 4rem); max-width: 60rem; }
.silo-summary--inset { margin-top: 1.4rem; }
.silo-def { font-size: 1.02rem; max-width: 62ch; }
.silo-def strong { font-weight: 600; }
.silo-facts { width: 100%; border-collapse: collapse; margin-top: 1.2rem; font-size: 0.95rem; }
.silo-facts th { font-family: var(--font-display); font-weight: 500; text-align: left; white-space: nowrap; padding: 0.5rem 1.2rem 0.5rem 0; color: var(--ink); border-top: 1px solid var(--hairline); width: 11rem; vertical-align: top; }
.silo-facts td { padding: 0.5rem 0; border-top: 1px solid var(--hairline); color: var(--ink-soft); }
.silo-facts a { color: var(--brass-dark); }
.silo-summary-note { margin-top: 1rem; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }

.silo-block { margin-bottom: clamp(2.8rem, 7vh, 4.5rem); }
.silo-block > h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.08; margin-bottom: 0.8rem; border-top: 1px solid var(--hairline-strong); padding-top: 1rem; }
.silo-block-lede { color: var(--ink-soft); max-width: 56ch; margin-bottom: 1.4rem; }
.silo-prose p { max-width: 62ch; margin-bottom: 1rem; color: var(--ink); }
/* Read-more: a long prose block (.silo-longread, .silo-prose) collapses on phones behind a tasteful editorial
   "Read more" so a pillar is not a wall of text; silo.js injects the button + toggles .is-open.
   Desktop always shows the full text (there the 2-column layout has the room). */
@media (max-width: 600px) {
  /* one marker (.is-collapsible), added by silo.js to any long block it clamps (.silo-prose / .silo-wall-tx /
     .silo-longread) - decoupled so the read-more lives in ONE place, no per-block CSS. */
  .is-collapsible { max-height: 12.5rem; overflow: hidden; transition: max-height 0.4s ease;
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); }
  .is-collapsible.is-open { -webkit-mask-image: none; mask-image: none; }
  /* centred divider-style toggle: thin rules flank a brass label + caret (owner: left edge looked off) */
  .readmore-btn { display: flex; align-items: center; gap: 0.85rem; width: 100%; margin: 0.95rem 0 0.2rem;
    padding: 0.15rem 0; background: none; border: 0; cursor: pointer; color: var(--brass-dark);
    font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.03em; }
  .readmore-btn::before, .readmore-btn::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
  .readmore-btn .rm-in { display: inline-flex; align-items: center; gap: 0.45rem; }
  .readmore-btn .rm-caret { width: 0.46rem; height: 0.46rem; border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.25s; }
  .readmore-btn.is-open .rm-caret { transform: translateY(1px) rotate(-135deg); }
}
.silo-more { margin-top: 1.2rem; }
.silo-more a, .silo-inline-link a { color: var(--brass-dark); }
.silo-inline-link { margin-top: 1.2rem; color: var(--ink-soft); max-width: 62ch; }
.silo-proj { margin-top: clamp(1.6rem, 3vh, 2.4rem); }

/* Design renders shown as a small before/built pair (e.g. award house on the timber-houses pillar) */
.silo-renders { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.6rem, 2vw, 1.1rem); margin: 1.4rem 0; max-width: 46rem; }
.silo-renders figure { margin: 0; }
.silo-renders img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; border: 1px solid var(--hairline-strong); }
.silo-renders figcaption { margin-top: 0.4rem; font-size: 0.82rem; color: var(--ink-soft); }
@media (max-width: 560px) { .silo-renders { grid-template-columns: 1fr; } }

/* Comparison + fact tables share the journal table language */
.silo-compare { width: 100%; border-collapse: collapse; margin: 1.4rem 0 0; font-size: 0.92rem; max-width: 60rem; }
.silo-compare th, .silo-compare td { border: 1px solid var(--hairline-strong); padding: 0.55rem 0.7rem; text-align: left; vertical-align: top; }
.silo-compare thead th { font-family: var(--font-display); font-weight: 500; background: var(--paper-deep); }
/* Mobile: wide compare tables (e.g. the 4-col MHM/CLT/GLT plate on timber-houses) scroll INSIDE
   their own box instead of pushing the page wider than the screen. That page overflow was shifting
   the fixed header (right:0) so the burger drifted right on the widest pillars. width:max-content +
   max-width:100% caps the box at the viewport; narrow 2-3 col tables simply fit with no scrollbar. */
@media (max-width: 700px) {
  .silo-compare { display: block; width: max-content; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* MHM wall: cutaway + points */
.silo-wall-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start; }
.silo-cutaway { margin: 0; border: 1px solid var(--hairline-strong); }
.silo-cutaway img { width: 100%; display: block; }
/* window section: smaller, calmer than the door cutaway (owner: was too big) */
.win-section { grid-template-columns: 0.82fr 1.18fr; align-items: center; }
.win-cutaway { border: 0; max-width: 24rem; }
.win-cutaway img { mix-blend-mode: multiply; }
.win-cutaway figcaption { border: 0; padding: 0.6rem 0 0; }
@media (max-width: 900px) { .win-cutaway { max-width: 20rem; margin: 0 auto; } }
.silo-cutaway figcaption { font-size: 0.82rem; color: var(--ink-soft); padding: 0.6rem 0.8rem; border-top: 1px solid var(--hairline); }
.silo-wall-tx p { max-width: 58ch; color: var(--ink); margin-bottom: 1rem; }
.silo-wall-points { list-style: none; padding: 0; margin: 0 0 1rem; }
.silo-wall-points li { padding: 0.6rem 0; border-top: 1px solid var(--hairline); color: var(--ink-soft); max-width: 58ch; }
.silo-wall-points strong { color: var(--ink); font-weight: 600; }

/* Price drivers */
.silo-drivers { list-style: none; counter-reset: drv; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(1.2rem, 2.5vw, 2rem); }
.silo-drivers li { counter-increment: drv; border-top: 1px solid var(--hairline-strong); padding-top: 0.9rem; }
.silo-drivers li::before { content: counter(drv, decimal-leading-zero); font-family: var(--font-display); color: var(--brass); font-size: 0.85rem; letter-spacing: 0.1em; }
.silo-drivers h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; margin: 0.3rem 0 0.4rem; }
.silo-drivers p { font-size: 0.92rem; color: var(--ink-soft); }

/* Process steps: editorial plates so the timeline reads as a feature, not plain text (owner 04.07) */
.silo-steps { list-style: none; padding: 0; margin: 0 0 1.8rem; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(1.2rem, 2.5vw, 2rem); }
.silo-steps li { border: 1px solid var(--hairline-strong); border-top: 2px solid var(--brass); background: rgba(255, 255, 255, 0.4); padding: 1rem 1.15rem 1.2rem; }
.silo-steps .no { font-family: var(--font-display); color: var(--brass); font-size: 1.7rem; letter-spacing: 0.06em; display: block; line-height: 1; }
.silo-steps h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; margin: 0.45rem 0 0.4rem; }
.silo-steps p { font-size: 0.92rem; color: var(--ink-soft); }
.silo-standards { display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 2.4rem); flex-wrap: wrap; border-top: 1px solid var(--hairline); padding-top: 1.4rem; }
.silo-certs { list-style: none; display: flex; align-items: center; gap: 1.4rem; padding: 0; margin: 0; flex-wrap: wrap; }
.silo-certs img { height: 2.5rem; width: auto; display: block; opacity: 0.9; }
.silo-standards p { font-size: 0.9rem; color: var(--ink-soft); max-width: 40ch; }

/* FAQ: same visual language as the home FAQ */
.silo-faq details { border-top: 1px solid var(--hairline-strong); }
.silo-faq details:last-child { border-bottom: 1px solid var(--hairline-strong); }
.silo-faq summary { cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 1.08rem; padding: 0.9rem 2rem 0.9rem 0; position: relative; }
.silo-faq summary::-webkit-details-marker { display: none; }
.silo-faq summary::after { content: "+"; position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%); color: var(--brass-dark); font-size: 1.3rem; }
.silo-faq details[open] summary::after { content: "\2013"; }
.silo-faq details p { padding: 0 0 1rem; color: var(--ink-soft); max-width: 62ch; }

/* Final PM CTA */
.silo-cta { display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 2.4rem); max-width: 46rem; padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid var(--hairline-strong); border-top: 2px solid var(--brass); background: rgba(255, 255, 255, 0.4); margin-bottom: clamp(3rem, 7vh, 4.5rem); }
.silo-cta-face { margin: 0; flex: none; }
.silo-cta-face img { width: 6.5rem; height: 6.5rem; border-radius: 50%; object-fit: cover; display: block; }
.silo-cta h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin-bottom: 0.5rem; }
.silo-cta p { color: var(--ink-soft); font-size: 0.95rem; max-width: 48ch; }
.silo-cta-btns { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 0.9rem; }

@media (max-width: 900px) {
  .silo-wall-grid { grid-template-columns: 1fr; }
  .silo-drivers, .silo-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .silo-drivers, .silo-steps { grid-template-columns: 1fr; }
  .silo-cta { flex-direction: column; align-items: flex-start; }
  .silo-facts th { width: auto; padding-right: 0.8rem; }
}

/* A-frame pillar: four architectural directions (2x2 editorial cards) */
.af-types { list-style: none; padding: 0; margin: clamp(1.6rem, 3vh, 2.4rem) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 3vw, 2.4rem); }
.af-types li { border: 1px solid var(--hairline-strong); border-top: 2px solid var(--brass); background: rgba(255, 255, 255, 0.4); }
.af-types figure { margin: 0; }
.af-types img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.af-types h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; margin: 0.9rem 1.1rem 0.35rem; }
.af-types p { font-size: 0.93rem; color: var(--ink-soft); margin: 0 1.1rem 1.1rem; }
/* small type-label line under a school card (was a link to a child page; now a quiet caption) */
.af-note { font-family: var(--font-display); font-size: 0.82rem; letter-spacing: 0.03em; color: var(--brass-dark); margin: 0 1.1rem 1.1rem !important; }
/* "Enquire about this" catalogue button: filled plate so it reads as an action, not a link.
   Preselects the form dropdown + scrolls (silo.js). No left stripe (D-018). */
.af-order { display: inline-block; margin: 0.2rem 1.1rem 1.3rem; padding: 0.55rem 1.2rem; cursor: pointer;
  background: rgba(255, 255, 255, 0.55); border: 1px solid var(--hairline-strong); border-top: 2px solid var(--brass);
  font-family: var(--font-display); font-size: 0.9rem; color: var(--brass-dark); letter-spacing: 0.02em;
  transition: background 0.2s, color 0.2s, border-color 0.2s; }
.af-order:hover { background: var(--brass-dark); color: var(--paper); border-color: var(--brass-dark); }
@media (max-width: 700px) { .af-types { grid-template-columns: 1fr; } }

/* Full window catalogue: three across on desktop so 9 types stay compact */
.af-catalog { grid-template-columns: repeat(3, 1fr); }
.af-catalog h3 { font-size: 1.15rem; }
.af-catalog p { font-size: 0.88rem; }
@media (max-width: 900px) { .af-catalog { grid-template-columns: 1fr 1fr; } }
/* Phones: the full type catalogue (9 windows / 10 doors) becomes a compact EDITORIAL LIST -
   small photo left, title + description + CTA stacked right, one card per row. Fixes the old
   cramped 2-col grid (text now has the full width to breathe) and the ragged CTA heights
   (one card per row = nothing to misalign; the CTA is pinned to the row bottom). Numbered
   01.. in brass so nine items read as a curated catalogue, not a squeezed product grid.
   Every card here has a photo (verified 9/9, 10/10). Cross-model GPT-5.5 + Gemini converged. */
@media (max-width: 600px) {
  .af-catalog { display: flex; flex-direction: column; gap: 0.7rem; counter-reset: aftype; }
  .af-catalog > li {
    display: grid; grid-template-columns: 6.75rem 1fr; grid-template-rows: auto auto 1fr;
    counter-increment: aftype; min-height: 7rem;
  }
  .af-catalog > li figure { grid-column: 1; grid-row: 1 / -1; margin: 0; align-self: stretch; border-right: 1px solid var(--hairline-strong); }
  .af-catalog > li figure img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  .af-catalog > li h3 { grid-column: 2; grid-row: 1; font-size: 1.05rem; margin: 0.7rem 1rem 0.15rem; }
  .af-catalog > li h3::before { content: counter(aftype, decimal-leading-zero) "  "; color: var(--brass); font-size: 0.82em; letter-spacing: 0.02em; }
  .af-catalog > li p { grid-column: 2; grid-row: 2; font-size: 0.85rem; margin: 0 1rem 0.5rem; }
  .af-catalog > li .af-order { grid-column: 2; grid-row: 3; align-self: end; display: block; width: auto;
    margin: 0.35rem 1rem 0.85rem; padding: 0.55rem 0 0; background: none; border: 0;
    border-top: 1px solid var(--hairline); color: var(--brass-dark); text-align: left; white-space: nowrap; }
  .af-catalog > li .af-order:hover { background: none; color: var(--brass); }
}

/* "How timber compares" table: highlight the Timber column, keep it honest not a sales grid */
.timber-compare { font-size: 0.92rem; }
.timber-compare thead th:nth-child(2) { color: var(--brass-dark); }
.timber-compare .tc-win { background: rgba(176, 141, 87, 0.08); color: var(--ink); }
.timber-compare td:first-child { font-family: var(--font-display); white-space: nowrap; }

/* Sauna doors sub-section: three photo cards (full-glass / half-glass / dark) */
.sauna-doors { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .sauna-doors { grid-template-columns: 1fr; } }

/* Four woods: compact 4-across species swatches (square photo + short note) */
.wood-grid { grid-template-columns: repeat(4, 1fr); }
.wood-grid figure img { aspect-ratio: 1 / 1; }
.wood-grid h3 { font-size: 1.15rem; margin-top: 0.7rem; }
.wood-grid p { font-size: 0.86rem; }
@media (max-width: 760px) { .wood-grid { grid-template-columns: 1fr 1fr; } }

/* Glazing tiers: three text plates (no photo), brass pane-count glyph */
.glazing-tiers { grid-template-columns: repeat(3, 1fr); }
.glazing-tiers .gt-body { padding: 1.2rem 1.2rem 0.4rem; }
/* Glazing cross-section diagram: exact pane count in SVG (owner: no fake AI count) */
.gt-diagram { display: block; width: 6.5rem; height: auto; margin-bottom: 0.7rem; }
.gt-diagram .gt-glass { fill: rgba(140, 178, 205, 0.42); stroke: var(--ink); stroke-width: 0.8; }
.gt-diagram .gt-spacer { fill: var(--brass); }
.glazing-tiers h3 { margin: 0 0 0.4rem; }
.glazing-tiers p { margin: 0 0 0.7rem; }
.glazing-tiers .af-note { margin: 0 0 1.1rem !important; }
@media (max-width: 760px) { .glazing-tiers { grid-template-columns: 1fr; } }

/* Phones: the price-factor grids (.silo-drivers, every pillar) and the glazing tiers (double/triple/quadruple,
   .glazing-tiers) become a horizontal SWIPE carousel to save vertical space (owner: like home block 08).
   CSS Grid grid-auto-flow (NOT flex -> cannot blow out, see memory reference-mobile-swipe-carousel-grid-not-flex).
   Text stays in the DOM = SEO-safe. Placed after all grid rules so it wins. silo.js injects .swipe-dots after each.
   NOTE: the wood-species grid (.wood-grid) is intentionally NOT here - owner wants it as a normal grid. */
@media (max-width: 600px) {
  .silo-drivers, .glazing-tiers { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(80vw, 21rem);
    gap: 1rem; width: 100%; max-width: 100vw; min-width: 0; margin: 0;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    padding: 0 1.4rem 0.4rem; scroll-padding-left: 1.4rem; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.4rem, #000 calc(100% - 1.4rem), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 1.4rem, #000 calc(100% - 1.4rem), transparent 100%); }
  .silo-drivers::-webkit-scrollbar, .glazing-tiers::-webkit-scrollbar { display: none; }
  .silo-drivers > li, .glazing-tiers > li { width: auto; min-width: 0; box-sizing: border-box; scroll-snap-align: start;
    border: 1px solid var(--hairline-strong); border-top: 2px solid var(--brass); background: rgba(255, 255, 255, 0.4); }
  .silo-drivers > li { padding: 1.2rem 1.3rem 1.3rem; }
  /* running swipe dots (silo.js injects .swipe-dots after each carousel; no text, just the moving dots) */
  .swipe-dots { position: relative; display: block; width: 4.6rem; height: 0.6rem; margin: 1.1rem auto 0.2rem; }
  .swipe-dots i { position: absolute; left: 0; top: 50%; width: 0.44rem; height: 0.44rem; border-radius: 999px;
    background: var(--brass); opacity: 0; transform: translateY(-50%); animation: siloSwipeDot 1.75s cubic-bezier(0.45,0,0.2,1) infinite; }
  .swipe-dots i:nth-child(2) { animation-delay: 0.18s; }
  .swipe-dots i:nth-child(3) { animation-delay: 0.36s; }
}
@keyframes siloSwipeDot { 0% { transform: translate(0,-50%) scale(0.7); opacity: 0; } 25% { opacity: 0.7; } 55% { opacity: 1; } 100% { transform: translate(3.2rem,-50%) scale(0.7); opacity: 0; } }

/* Kit levels table + choices grid (a-frame anatomy block).
   .table-scroll: on narrow screens the 4-column table slides inside its own container
   instead of clipping at the viewport edge (right border stays visible). */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: clamp(1.6rem, 3vh, 2.2rem); }
.table-scroll .silo-levels { margin-top: 0; min-width: 33rem; }
.silo-levels { margin-top: clamp(1.6rem, 3vh, 2.2rem); }
.silo-levels td:nth-child(n+2), .silo-levels thead th:nth-child(n+2) { text-align: center; white-space: nowrap; }
.silo-choices a { color: var(--brass-dark); }

/* Per-pillar enquiry form: person + form on one editorial plate */
.silo-enquiry { margin-bottom: clamp(3rem, 7vh, 4.5rem); }
.silo-enquiry-grid { display: grid; grid-template-columns: 15rem 1fr; gap: clamp(1.6rem, 3.5vw, 3rem); border: 1px solid var(--hairline-strong); border-top: 2px solid var(--brass); background: rgba(255, 255, 255, 0.4); padding: clamp(1.4rem, 3vw, 2.4rem); max-width: 60rem; }
.silo-enquiry-person { text-align: left; }
.silo-enquiry-person img { width: 6.5rem; height: 6.5rem; border-radius: 50%; object-fit: cover; display: block; margin-bottom: 0.9rem; }
.silo-enquiry-person .kick { font-family: var(--font-display); color: var(--brass); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.72rem; margin-bottom: 0.3rem; }
.silo-enquiry-person h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; }
.silo-enquiry-langs { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.4rem; letter-spacing: 0.08em; }
.silo-form h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 0.4rem; }
.silo-form-micro { color: var(--ink-soft); font-size: 0.92rem; max-width: 52ch; margin-bottom: 0.6rem; }
.silo-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.silo-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.silo-form-radios { border: 0; padding: 0; margin: 1.1rem 0 0; }
.silo-form-radios legend { font-size: var(--label); letter-spacing: var(--track); text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.45rem; }
.silo-form-radios label { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 1.1rem 0.45rem 0; font-size: 0.92rem; color: var(--ink); text-transform: none; letter-spacing: 0; }
.silo-form-radios input { width: auto; accent-color: var(--brass-dark); }
.silo-form .btn-start { margin-top: 1.3rem; }
.silo-form-trust { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.7rem; }
.silo-form-error { color: #8a3b2e; font-size: 0.85rem; margin-top: 0.5rem; min-height: 1em; }
.silo-form .order-done h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; margin-bottom: 0.5rem; }
.silo-form .order-done p { color: var(--ink-soft); max-width: 48ch; }
@media (max-width: 760px) {
  .silo-enquiry-grid { grid-template-columns: 1fr; }
  .silo-form-row { grid-template-columns: 1fr; }
}

/* Use-case cards ("where it belongs"): compact SQUARE photo with an Open badge + brass icon + scenario.
   NB: img must carry height:auto to beat the HTML height attribute (04.07 lesson: fixed 600px columns). */
.silo-uses { list-style: none; padding: 0; margin: clamp(1.4rem, 3vh, 2rem) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); }
.silo-uses li { border: 1px solid var(--hairline-strong); border-top: 2px solid var(--brass); background: rgba(255, 255, 255, 0.4); padding: 0; overflow: hidden; }
.silo-uses figure { margin: 0; position: relative; cursor: zoom-in; }
.silo-uses figure img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.silo-use-open { position: absolute; right: 0; bottom: 0; background: var(--paper); color: var(--brass-dark); font-family: var(--font-display); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.35rem 0.7rem; border-top: 1px solid var(--hairline-strong); border-left: 1px solid var(--hairline-strong); }
.silo-uses figure:hover .silo-use-open, .silo-uses figure:focus-visible .silo-use-open { background: var(--brass-dark); color: var(--paper); }
.silo-uses .silo-use-tx { padding: 0.9rem 1.1rem 1.15rem; }
.silo-uses h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.12rem; margin-bottom: 0.35rem; display: flex; align-items: center; gap: 0.5rem; }
.silo-use-ico { display: inline-block; width: 1.5rem; height: 1.5rem; flex: none; color: var(--brass); }
.silo-use-ico svg { width: 100%; height: 100%; display: block; }
.silo-uses p { font-size: 0.9rem; color: var(--ink-soft); }
@media (max-width: 980px) { .silo-uses { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .silo-uses { grid-template-columns: 1fr; } .silo-uses figure img { aspect-ratio: 16 / 10; } }

/* Wide variant: big 2x2 photo cards (glulam centrepiece; owner: large photos like the other pillars) */
.silo-uses--wide { grid-template-columns: 1fr 1fr; }
.silo-uses--wide figure img { aspect-ratio: 4 / 3; }
.silo-uses--wide h3 { font-size: 1.3rem; }
@media (max-width: 640px) { .silo-uses--wide { grid-template-columns: 1fr; } }

/* Lightbox for use-case photos (silo.js) */
.silo-lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(28, 21, 16, 0.9); display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); }
.silo-lightbox img { max-width: min(96vw, 72rem); max-height: 88vh; display: block; border: 1px solid rgba(239, 232, 218, 0.3); }
.silo-lightbox-close { position: absolute; top: 0.8rem; right: 1.1rem; color: var(--paper-on-bark); font-size: 2.2rem; line-height: 1; background: none; border: 0; cursor: pointer; }