/* One centred content grid for the integrated ILOS concept.
   Full-bleed section backgrounds remain full width; their contents do not. */
:root{
  --layout-max:1640px;
  --layout-gutter:max(clamp(22px,4vw,72px),calc((100% - var(--layout-max))/2));
  --section-x:var(--layout-gutter);
}
.site-header,.section,.hero,.footer,.contact-closing,.closing-footer{
  box-sizing:border-box;
  width:100%;max-width:none;margin-inline:0;
  padding-inline:var(--layout-gutter);
}
.site-header{padding-block:22px;gap:28px;min-height:92px}
.site-header .brand img{width:210px!important;height:auto!important}
.desktop-nav a,.ilos-nav a{font-size:15px!important}
.site-header .header-contact{font-size:14px}
.hero{
  padding-inline:var(--layout-gutter)!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,4vw,64px);align-items:center;
}
.hero-copy{width:100%;min-width:0;max-width:800px}
.hero h1{font-size:clamp(44px,4.8vw,84px)!important;max-width:14ch}
.hero-intro{font-size:18px!important;max-width:37em}
.hero-actions{flex-wrap:wrap}
.hero-visual{width:100%;max-width:760px;min-width:0;justify-self:end}
.home-ilos-spotlight{width:100%;max-width:760px;margin:0}
.spot-pictures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;align-items:center;min-height:0;padding:24px 16px 0}
.spot-pictures img{width:100%;height:250px;min-width:0;object-fit:contain}
.spot-copy strong{font-size:30px}
.spot-copy small,.eyebrow{font-size:12px}
.spot-button{font-size:14px}
.section-heading h2{font-size:clamp(32px,3.5vw,56px)}
.section-heading{gap:clamp(24px,3vw,56px)}
.hero.hero-text-only{grid-template-columns:minmax(0,1fr)}
.hero.hero-text-only .hero-copy{max-width:1100px}
.product-intro{align-items:start}
.product-gallery.approved-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.product-gallery,.catalogue{min-width:0}
.render-card,.model{min-width:0}
.footer{gap:clamp(32px,5vw,100px)}
/* The portfolio remains complete, but the seven original showcase cards
   form a finite, user-controlled rail rather than duplicated autoplay. */
.project-interlude{overflow:hidden}
.project-interlude .work-reel{
  display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x proximity;
  padding-inline:var(--layout-gutter);padding-block:32px 48px;
}
.project-interlude .work-reel .reel-card{
  flex:0 0 280px!important;width:280px!important;min-width:0;
  scroll-snap-align:center;
}
.project-interlude .work-reel .reel-card img{height:340px!important;width:100%;object-fit:contain!important}
.project-interlude .work-reel .reel-card figcaption{font-size:14px}
#portfolio-categories.portfolio-nav{
  max-width:var(--layout-max);width:calc(100% - 2 * clamp(22px,4vw,72px));
  margin-inline:auto;
}
@media(min-width:1800px){
  .site-header .brand img{width:224px!important}
  .desktop-nav a,.ilos-nav a{font-size:17px!important}
  .site-header .header-contact{font-size:15px}
  .hero{padding-block:78px 88px!important}
  .hero-intro{font-size:20px!important}
  .spot-pictures img{height:270px}
  .spot-copy{padding:28px 32px 32px}
}
@media(max-width:1100px){.site-header{gap:18px}.desktop-nav a,.ilos-nav a{font-size:13px!important}.site-header .brand img{width:184px!important}}
@media(max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr)!important;gap:36px}
  .hero-visual{justify-self:start;max-width:640px}
  .home-ilos-spotlight{max-width:640px}
  .spot-pictures img{height:190px}
  .spot-copy strong{font-size:25px}
  .section-heading{grid-template-columns:1fr}
  .product-gallery.approved-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .site-header{padding:16px;gap:12px;min-height:76px}
  .site-header .brand img{width:128px!important}
  .hero h1{font-size:43px!important}
  .hero-intro{font-size:16px!important}
  .hero-visual{max-width:100%}
  .spot-pictures img{height:170px}
  .spot-copy strong{font-size:25px}
  .section-heading h2{font-size:32px}
  .product-gallery.approved-pair{grid-template-columns:minmax(0,1fr)}
  .project-interlude .work-reel .reel-card{flex-basis:260px!important;width:260px!important}
}
@media(prefers-reduced-motion:reduce){.work-reel{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Continuous finite-period rail: centred viewport, no blank end padding. */
.project-interlude .work-reel{width:calc(100% - 2 * clamp(22px,4vw,72px));max-width:var(--layout-max);margin-inline:auto;padding-inline:0;scroll-snap-type:none;scroll-behavior:auto;overflow-anchor:none;touch-action:pan-x pan-y pinch-zoom}
.project-interlude .work-reel:focus-visible{outline:3px solid #ff6a2a;outline-offset:6px}
/* Cancel native-ratio anchor heights here only: every showcase photograph
   gets the same contain frame, including landscape tree/counter images. */
.project-interlude .work-reel{align-items:stretch}
.project-interlude .work-reel .reel-card{
  display:grid!important;grid-template-rows:340px 100px!important;
  height:440px!important;min-height:0!important;max-height:none!important;
  align-self:stretch!important;aspect-ratio:auto!important;margin:0;
}
.project-interlude .work-reel .reel-card>a{
  display:flex!important;align-items:center;justify-content:center;
  width:100%!important;height:340px!important;min-height:0!important;
  max-height:none!important;aspect-ratio:auto!important;overflow:hidden;
  padding:0!important;background:#102b3b;
}
.project-interlude .work-reel .reel-card img{
  display:block;width:100%!important;height:340px!important;
  min-height:0!important;max-height:none!important;max-width:100%!important;
  aspect-ratio:auto!important;object-fit:contain!important;
  object-position:center!important;transform:none!important;padding:0!important;
}
.project-interlude .work-reel .reel-card figcaption{
  position:static!important;inset:auto!important;display:flex!important;
  flex-direction:column;align-items:flex-start;justify-content:center;
  gap:8px;width:100%;height:100px!important;min-height:100px!important;
  max-height:100px!important;margin:0;padding:16px!important;
  background:#fff;color:#112d3a;overflow:hidden;
}
.project-interlude .work-reel .reel-card figcaption span{
  display:block;max-width:100%;font-size:10px!important;line-height:1.25;
  letter-spacing:.08em;text-transform:uppercase;color:#526571;
  white-space:normal;
}
.project-interlude .work-reel .reel-card figcaption strong{
  display:block;text-align:left!important;font-size:18px!important;
  line-height:1.25;font-weight:700;color:#112d3a;
}
.project-interlude .work-reel .reel-card>.photo-window,
.project-interlude .work-reel .reel-card .photo-window>a{
 display:flex!important;align-items:center;justify-content:center;
 width:100%!important;height:340px!important;min-height:0!important;
 max-height:none!important;aspect-ratio:auto!important;padding:0!important;
 margin:0!important;overflow:hidden;background:#102b3b;
}
.project-interlude .work-reel .reel-card figcaption{flex-wrap:nowrap!important}