/* Homepage geometry measured against the supplied Sioen desktop reference.
   2048-unit canvas: copy x297, gallery x903, 591/340 image widths, 38 gutter.
   Brand tokens, content, links and the following sections remain independent. */
html[data-view=home]{--hero-unit:clamp(.54px,.048828125vw,1.1px)}
html[data-view=home] .hero-curve{height:auto;aspect-ratio:1440 / 195;bottom:-1px}
html[data-view=home] .hero .tile-detail img{filter:none}
html[data-view=home] .hero .tile-tote img{object-fit:cover;object-position:50% 50%;background:var(--surface)}
html[data-view=home] .hero .tile-fiber img{object-position:center}
html[data-view=home] .hero .tile-white img{object-position:50% 32%}

@media(min-width:1101px){
 html[data-view=home]{--home-header-top:calc(86 * var(--hero-unit));--home-header-nav:calc(78 * var(--hero-unit));--home-header-space:calc(164 * var(--hero-unit))}
 html[data-view=home] .site-header{height:var(--home-header-space);padding:0 max(28px,calc((100% - 1552 * var(--hero-unit)) / 2));gap:0;box-shadow:none}
 html[data-view=home] .header-top{height:var(--home-header-top);min-height:0;gap:calc(28 * var(--hero-unit));border:0;position:static}
 html[data-view=home] .brand{gap:10px}
 html[data-view=home] .brand img{width:clamp(32px,2.4vw,48px);height:clamp(32px,2.4vw,48px)}
 html[data-view=home] .brand-type strong{font-size:clamp(18px,1.3vw,27px)}
 html[data-view=home] .brand-type>span{font-size:clamp(7px,.46vw,9.5px);letter-spacing:.12em}
 html[data-view=home] .header-actions{gap:clamp(14px,1.8vw,36px);height:100%}
 html[data-view=home] .header-utility[data-search]{width:calc(440 * var(--hero-unit));min-height:calc(48 * var(--hero-unit));height:calc(48 * var(--hero-unit));padding:3px 4px 3px 20px}
 html[data-view=home] .header-utility[data-search] .icon{height:calc(40 * var(--hero-unit));width:calc(40 * var(--hero-unit));padding:calc(10 * var(--hero-unit))}
 html[data-view=home] .site-header .quote-button{position:absolute;right:max(28px,calc((100% - 1552 * var(--hero-unit)) / 2));top:calc(88 * var(--hero-unit));min-height:calc(52 * var(--hero-unit));height:calc(52 * var(--hero-unit));padding:10px 18px;gap:12px;border-radius:6px;box-shadow:none}
 html[data-view=home] .site-header .quote-button .icon{width:18px;height:18px;padding:0}
 html[data-view=home] .desktop-nav{height:var(--home-header-nav);min-height:0;border:0;padding:0 185px 0 0;gap:clamp(16px,1.8vw,36px);align-items:center}
 html[data-view=home] .desktop-nav a{font-size:clamp(12px,.76vw,15px)!important;padding:13px 0;line-height:1.4}
 html[data-view=home] .hero-inner{width:min(100%,2252.8px);max-width:none;height:calc(876 * var(--hero-unit));min-height:0;padding:0;margin:0 auto;display:grid;grid-template-columns:14.5% 25% 4.59% 47.27% 8.64%;grid-template-rows:minmax(0,1fr);gap:0;align-items:start}
 html[data-view=home] .hero-copy{grid-column:2;grid-row:1;align-self:start;height:calc(591 * var(--hero-unit));max-width:none;margin:0;padding:0 0 calc(25 * var(--hero-unit));transform:none;justify-content:flex-end;min-width:0}
 html[data-view=home] .hero h1{font-size:calc(57 * var(--hero-unit));line-height:1.18;font-weight:800;letter-spacing:-.035em;width:100%;margin:0}
 html[data-view=home][lang=zh-CN] .hero h1{font-size:calc(61 * var(--hero-unit));line-height:1.25;font-weight:700;letter-spacing:-.02em}
 html[data-view=home][lang=es] .hero h1{font-size:calc(52 * var(--hero-unit));line-height:1.18}
 html[data-view=home] .hero-description{font-size:clamp(16px,calc(24 * var(--hero-unit)),26px);line-height:1.45;margin:calc(21 * var(--hero-unit)) 0 0;width:calc(575 * var(--hero-unit));max-width:calc(100% + 70 * var(--hero-unit));text-wrap:pretty}
 html[data-view=home] .material-story{grid-column:4;grid-row:1;display:grid;grid-template-columns:591fr 340fr;grid-template-rows:calc(591 * var(--hero-unit)) minmax(0,1fr);gap:calc(38 * var(--hero-unit));width:100%;height:100%;max-width:none;max-height:none;align-self:stretch;justify-self:stretch}
 html[data-view=home] .hero .tile-fiber{height:100%;grid-column:1;grid-row:1;margin:0;border-radius:0 0 calc(18 * var(--hero-unit)) calc(18 * var(--hero-unit))}
 html[data-view=home] .hero .tile-tote{grid-column:2;grid-row:1;height:auto;aspect-ratio:1.68;align-self:end;border-radius:calc(18 * var(--hero-unit))}
 html[data-view=home] .hero .detail-pair{grid-column:1 / -1;grid-row:2;grid-template-columns:340fr 591fr;gap:calc(38 * var(--hero-unit));height:100%;min-height:0}
 html[data-view=home] .hero .detail-pair .visual-tile{border-radius:calc(18 * var(--hero-unit)) calc(18 * var(--hero-unit)) 0 0}
 html[data-view=home] .film-section{padding-top:clamp(32px,3.8vw,56px)}
}

/* Tablet and phone use the same square/wide image logic without tiny text. */
@media(min-width:851px) and (max-width:1100px){
 html[data-view=home] .hero-inner{height:580px;grid-template-columns:38% minmax(0,1fr);gap:28px;padding:0 32px}
 html[data-view=home] .hero-copy{margin:0;transform:none;padding:0 0 60px}
 html[data-view=home] .hero h1{font-size:44px;line-height:1.2}
 html[data-view=home][lang=zh-CN] .hero h1{font-size:48px}
 html[data-view=home][lang=es] .hero h1{font-size:40px}
 html[data-view=home] .hero-description{font-size:17px;line-height:1.65}
 html[data-view=home] .material-story{grid-template-columns:1.74fr 1fr;grid-template-rows:auto minmax(0,1fr);gap:20px;height:100%}
 html[data-view=home] .hero .tile-fiber{height:auto;aspect-ratio:1}
 html[data-view=home] .hero .tile-tote{height:auto;aspect-ratio:1.68}
 html[data-view=home] .hero .detail-pair{grid-template-columns:1fr 1.74fr;gap:20px}
}
@media(max-width:850px){
 html[data-view=home] .hero-inner{height:auto;padding:46px 24px 0;grid-template-columns:1fr;gap:36px}
 html[data-view=home] .hero-copy{margin:0;padding:0;transform:none}
 html[data-view=home] .material-story{height:auto;grid-template-columns:1.74fr 1fr;grid-template-rows:auto auto;gap:18px}
 html[data-view=home] .hero .tile-fiber{aspect-ratio:1;border-radius:12px;height:auto}
 html[data-view=home] .hero .tile-tote{height:auto;aspect-ratio:1.68;border-radius:12px}
 html[data-view=home] .hero .detail-pair{grid-template-columns:1fr 1.74fr;gap:18px;height:clamp(125px,28vw,210px)}
 html[data-view=home] .hero-description{margin:22px 0 0}
 html[data-view=home] .hero-curve{height:auto;aspect-ratio:1440 / 195}
}
@media(max-width:540px){
 html[data-view=home] .hero-inner{padding:36px 20px 0;gap:30px}
 html[data-view=home] .hero h1{font-size:42px;line-height:1.15}
 html[data-view=home][lang=zh-CN] .hero h1{font-size:44px;line-height:1.22}
 html[data-view=home][lang=es] .hero h1{font-size:38px}
 html[data-view=home] .hero-description{font-size:16px;line-height:1.65;margin:20px 0 0}
 html[data-view=home] .material-story,html[data-view=home] .hero .detail-pair{gap:12px}
}