/* IBS EXPERIENCE — Home overview and reference-led scroll sequences.
 * Content: build_home_content.py / build_product_pages.py, all named CMS blocks.
 * Behaviour: homepage.js; no scroll interception or paid animation dependency.
 * Default rules are complete static layouts. Only .ibsh-motion-ready adds pinning.
 */
.ibsh-home-overview .ibsh-section-head { margin-bottom:28px; }
.ibsh-home-overview .ibsh-section-head h2 { max-width:860px; }
.ibsh-home-overview .ibsh-section-head { grid-template-columns:1fr; }
.ibsh-reading-line { font-size:clamp(25px,2.8vw,39px); line-height:1.55; max-width:1100px; margin-bottom:58px!important; letter-spacing:-.025em; }
.ibsh-reading-clause { display:inline; margin-inline-end:.3em; }
.ibsh-motion-ready .ibsh-reading-clause { opacity:calc(.64 + var(--ibsh-clause-progress,1)*.36); }
.ibsh-overview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:45px; }
.ibsh-overview-card { padding-top:26px; border-top:1px solid var(--ibsh-line); }
.ibsh-overview-card h3 { font-size:28px; font-weight:500; margin-bottom:18px; }
.ibsh-overview-card p { color:var(--ibsh-muted); font-size:14px; line-height:1.9; max-width:370px; margin-bottom:20px; }

/* Collection introductions are brief routes into the website, not finish grids. */
.ibsh-home-feature { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:7vw; align-items:center; }
.ibsh-home-feature.is-reverse { grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); }
.ibsh-home-feature-copy { min-width:0; }
.ibsh-home-feature-copy h2 { font-size:clamp(34px,3.6vw,54px); font-weight:500; margin-bottom:25px; }
.ibsh-home-feature-copy>p:not(.ibsh-kicker) { color:var(--ibsh-muted); font-size:16px; line-height:1.9; max-width:550px; margin-bottom:25px; }
.ibsh-home-photo { min-width:0; }
.ibsh-home-photo-frame { aspect-ratio:3/2; overflow:hidden; background:var(--ibsh-sand); }
.ibsh-home-photo-frame img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform 1.1s cubic-bezier(.2,.7,.3,1); }
.ibsh-home-photo-frame:hover img { transform:scale(1.025); }
.ibsh-home-caption { font-size:10px; line-height:1.7; color:var(--ibsh-muted); padding-top:12px; }
.ibsh-home-collection-links { display:flex; flex-wrap:wrap; gap:8px 22px; margin-block:25px; }
.ibsh-home-collection-link { font-size:13px; padding-block:7px; border-bottom:1px solid var(--ibsh-line); }
.ibsh-home-reliance { background:var(--ibsh-stone); }
.ibsh-reliance-room .ibsh-home-photo-frame { aspect-ratio:3/2; }
.ibsh-reliance-room img { object-position:50% 50%; }
.ibsh-home-system-list { list-style:none; padding:0; margin:26px 0; display:flex; flex-wrap:wrap; gap:9px 22px; font-size:12px; }
.ibsh-home-system-list li { padding-bottom:6px; border-bottom:1px solid var(--ibsh-line); }
.ibsh-home-other-materials { display:flex; gap:35px; align-items:start; justify-content:space-between; border-top:1px solid var(--ibsh-line); padding-top:32px; margin-top:55px; }
.ibsh-home-other-materials>.ibsh-kicker { margin-bottom:0!important; }
.ibsh-home-other-links { display:flex; flex-wrap:wrap; gap:14px 30px; }
.ibsh-home-material-link { font-size:13px; padding-bottom:6px; border-bottom:1px solid var(--ibsh-accent); }
.ibsh-home-catalogues { background:var(--ibsh-sand); }
.ibsh-home-downloads { display:grid; grid-template-columns:1fr 1fr; gap:55px; margin-bottom:35px; }
.ibsh-home-download { border-top:1px solid var(--ibsh-line); padding-top:28px; }
.ibsh-home-download h3 { font-size:30px; font-weight:500; margin-bottom:12px; }
.ibsh-home-download p { color:var(--ibsh-muted); font-size:12px; margin-bottom:17px; }
.ibsh-scroll-cue { display:inline-flex; align-items:center; gap:14px; font-size:10px; margin-top:35px; color:#e0d9cf!important; }
.ibsh-scroll-cue::after { content:'↓'; font-size:22px; line-height:1; }
.ibsh-hero-after { display:none; }
.ibsh-hero-after h2 { font-size:clamp(43px,5.5vw,82px); line-height:1.1; font-weight:500; }
.ibsh-hero-after .ibsh-kicker { color:#e0d9cf; }

/* The Reliance native catalogue image contains print text at its top/bottom.
 * Both website frames are exactly 3:2, preserving the clean middle image band.
 * Keep this ratio when changing layouts; never use the full portrait as a hero.
 */
.ibsh-reliance-page-hero .ibsh-page-hero-image { aspect-ratio:3/2; }
.ibsh-reliance-page-hero .ibsh-page-hero-image img { object-position:50% 50%; }
.ibsh-reliance-hero-caption { position:absolute; bottom:0; inset-inline:0; padding:12px 16px; background:linear-gradient(transparent,#24231fc9); color:#fff; font-size:10px; }

/* Original catalogue sample and original manufacturer's schematic.
 * Static layouts show both; the enhanced desktop scene transitions between them.
 */
.ibsh-material-scene { position:relative; background:var(--ibsh-sand); }
.ibsh-material-stage { display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:center; padding-block:85px; }
.ibsh-material-scene-copy h2 { font-size:clamp(36px,3.8vw,55px); font-weight:500; margin-bottom:25px; }
.ibsh-material-scene-copy>p:not(.ibsh-kicker) { color:var(--ibsh-muted); font-size:15px; line-height:1.9; max-width:520px; margin-bottom:24px; }
.ibsh-material-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; border-top:1px solid var(--ibsh-line); padding-top:24px; margin-bottom:30px; }
.ibsh-material-facts strong { display:block; font-weight:400; font-size:25px; line-height:1.4; }
.ibsh-material-facts span { display:block; font-size:10px; color:var(--ibsh-muted); margin-top:7px; }
.ibsh-material-visual { display:grid; gap:35px; justify-items:center; min-width:0; }
.ibsh-material-surface { width:min(100%,380px); }
.ibsh-material-surface img { width:100%; aspect-ratio:1.6; object-fit:cover; }
.ibsh-material-technical { width:min(100%,300px); }
.ibsh-material-technical img { width:100%; height:auto; max-width:347px; }
.ibsh-material-surface figcaption,.ibsh-material-technical figcaption { font-size:10px; line-height:1.75; color:var(--ibsh-muted); margin-top:15px; }

/* Opening: a short image-window expansion, text chapter, then cream transition.
 * The header and normal anchor navigation remain available throughout.
 */
.ibsh-motion-ready .ibsh-opening { height:calc(180svh - var(--ibsh-header-h)); }
.ibsh-motion-ready .ibsh-hero-stage { position:sticky; top:calc(var(--ibsh-header-h) + var(--ibsh-top)); height:calc(100svh - var(--ibsh-header-h) - var(--ibsh-top)); min-height:0; display:block; }
.ibsh-motion-ready .ibsh-hero-copy { width:55%; height:100%; display:flex; flex-direction:column; justify-content:center; padding-block:40px; opacity:var(--ibsh-copy-opacity,1); transform:translateY(var(--ibsh-copy-y,0px)); z-index:3; }
.ibsh-motion-ready .ibsh-hero-evidence { position:absolute; top:var(--ibsh-frame-top,10%); bottom:var(--ibsh-frame-bottom,10%); left:var(--ibsh-frame-left,55%); right:var(--ibsh-frame-right,5%); height:auto; min-height:0; z-index:1; }
.ibsh-motion-ready .ibsh-hero-image img { transform:scale(var(--ibsh-zoom,1)); object-position:center 64%; }
.ibsh-motion-ready .ibsh-hero-evidence::after { background:linear-gradient(0deg,#24231fd9,transparent 55%),#15151166; }
.ibsh-motion-ready .ibsh-hero-project { opacity:var(--ibsh-frame-opacity,1); }
.ibsh-motion-ready .ibsh-hero-after { display:block; position:absolute; inset:0; z-index:4; padding:var(--ibsh-gutter); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; opacity:var(--ibsh-after-opacity,0); transform:translateY(var(--ibsh-after-y,24px)); pointer-events:none; background:#151511b8; }
.ibsh-motion-ready .ibsh-hero-stage::after { content:''; position:absolute; inset:0; z-index:5; pointer-events:none; background:var(--ibsh-paper); opacity:var(--ibsh-wash,0); }
.ibsh-motion-ready[dir=rtl] .ibsh-hero-evidence { left:var(--ibsh-frame-right,5%); right:var(--ibsh-frame-left,55%); }
.ibsh-enhanced .ibsh-image-reveal { transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.3,1),clip-path 1s cubic-bezier(.2,.7,.3,1); clip-path:inset(0); }
.ibsh-enhanced .ibsh-image-reveal:not(.is-visible) { clip-path:inset(6% 0); }
.ibsh-link::after { transition:transform .25s ease; }
.ibsh-link:hover::after { transform:translate(2px,-2px); }

@media(min-width:901px) and (min-height:740px) {
  .ibsh-material-motion { height:190svh; }
  .ibsh-material-motion .ibsh-material-stage { position:sticky; top:calc(var(--ibsh-header-h) + var(--ibsh-top)); height:calc(100svh - var(--ibsh-header-h) - var(--ibsh-top)); min-height:0; padding-block:45px; overflow:hidden; isolation:isolate; }
  .ibsh-material-motion .ibsh-material-visual { position:relative; display:block; height:min(60vh,510px); }
  .ibsh-material-motion .ibsh-material-surface { position:absolute; width:min(100%,380px); top:50%; left:50%; z-index:2; opacity:var(--ibsh-surface-opacity,1); transform:translate(calc(-50% + var(--ibsh-material-x,0px)),calc(-50% + var(--ibsh-material-y,0px))) rotate(var(--ibsh-material-rotation,0deg)) scale(var(--ibsh-material-scale,1)); }
  .ibsh-material-motion .ibsh-material-surface img { box-shadow:18px 24px 36px #24231f30; }
  .ibsh-material-motion .ibsh-material-technical { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); opacity:var(--ibsh-technical-opacity,0); }
}
@media(max-width:1000px) {
  .ibsh-home-feature,.ibsh-home-feature.is-reverse { gap:40px; }
  .ibsh-home-feature-copy h2 { font-size:37px; }
  .ibsh-overview-grid { gap:28px; }
  .ibsh-home-other-materials { display:block; }
  .ibsh-home-other-links { margin-top:24px; }
}
@media(max-width:900px) {
  .ibsh-material-stage { gap:35px; }
  .ibsh-material-visual { grid-template-columns:1fr 1fr; gap:22px; align-items:center; }
  .ibsh-material-scene-copy h2 { font-size:37px; }
  .ibsh-motion-ready .ibsh-hero-copy { width:100%; height:auto; padding:28px var(--ibsh-gutter); justify-content:start; }
  .ibsh-motion-ready .ibsh-hero-copy h1 { font-size:clamp(36px,6vw,52px); line-height:1.1; }
  .ibsh-motion-ready .ibsh-hero-intro { font-size:14px; line-height:1.7; max-width:560px; margin-top:18px!important; }
  .ibsh-motion-ready .ibsh-hero-copy .ibsh-kicker { margin-bottom:16px!important; }
  .ibsh-motion-ready .ibsh-hero-copy .ibsh-actions { margin-top:20px; }
  .ibsh-motion-ready .ibsh-scroll-cue { display:none; }
  .ibsh-motion-ready .ibsh-hero-project { bottom:20px; inset-inline:23px; }
  .ibsh-motion-ready .ibsh-hero-project strong { font-size:18px; }
  .ibsh-motion-ready .ibsh-opening { height:calc(160svh - var(--ibsh-header-h)); }
}
@media(max-width:700px) {
  .ibsh-overview-grid,.ibsh-home-downloads { grid-template-columns:1fr; gap:30px; }
  .ibsh-reading-line { margin-bottom:35px!important; }
  .ibsh-overview-card h3 { font-size:27px; }
  .ibsh-home-feature,.ibsh-home-feature.is-reverse { grid-template-columns:1fr; gap:31px; }
  .ibsh-home-feature.is-reverse .ibsh-home-photo { order:-1; }
  .ibsh-home-feature-copy h2 { font-size:35px; }
  .ibsh-home-feature-copy>p:not(.ibsh-kicker) { font-size:15px; }
  .ibsh-home-other-materials { margin-top:38px; padding-top:27px; }
  .ibsh-home-other-links { gap:16px 24px; }
  .ibsh-home-catalogues .ibsh-section-head { display:block; }
  .ibsh-material-stage { grid-template-columns:1fr; padding-block:60px; gap:40px; }
  .ibsh-material-scene-copy h2 { font-size:35px; }
  .ibsh-material-facts { gap:15px; }
  .ibsh-material-facts strong { font-size:23px; }
  .ibsh-page[dir=rtl] .ibsh-home-feature-copy h2 { font-size:31px; line-height:1.55; }
  .ibsh-page[dir=rtl] .ibsh-reading-line { letter-spacing:0; line-height:1.8; }
  .ibsh-motion-ready[dir=rtl] .ibsh-hero-copy { padding:25px var(--ibsh-gutter); }
  .ibsh-motion-ready[dir=rtl] .ibsh-hero-copy h1 { font-size:35px; line-height:1.45; }
  .ibsh-motion-ready[dir=rtl] .ibsh-hero-intro { font-size:14px; line-height:1.85; }
  .ibsh-motion-ready .ibsh-hero-after h2 { font-size:clamp(36px,8vw,54px); }
}
@media(prefers-reduced-motion:reduce) {
  .ibsh-home-photo-frame img,.ibsh-link::after { transition:none; transform:none; }
  .ibsh-reading-clause { opacity:1!important; }
}