/* The opening fills the available screen; content may grow when text is enlarged. */
.hero{
 --opening-space:clamp(12px,2svh,24px);
 --opening-height:calc(100svh - var(--header-height,93px) - var(--utility-height,38px));
 display:grid;min-height:var(--opening-height);padding:var(--opening-space) var(--gutter);overflow:visible
}
.hero-grid{
 width:100%;max-width:1600px;min-height:calc(var(--opening-height) - var(--opening-space)*2);
 margin:0 auto;padding:clamp(18px,2.4vmin,32px);gap:12px 4%;border:0;border-radius:24px;
 grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(min-content,1fr) auto;touch-action:pan-y pinch-zoom
}
.hero-copy{padding:12px;min-width:0}
.hero .display,html[lang=en] .hero .display{font-size:clamp(38px,min(5vw,8.4svh),78px);line-height:1.05}
.hero .eyebrow{margin-bottom:16px}
.hero h1{margin-bottom:20px}
.hero-description{font-size:17px;line-height:1.65;min-height:0;max-width:560px}
.hero .action-row{flex-direction:row;align-items:center;gap:12px 20px;margin-top:22px}
.hero-visual{min-height:0;min-width:0;width:100%;height:auto;aspect-ratio:auto;margin:0;padding:20px;gap:12px}
.hero-bottom{grid-column:1/-1;grid-row:2;min-height:40px;padding:0 12px}

/* Portrait tablets retain a broad photograph instead of a narrow, cropped column. */
@media(min-width:700px) and (orientation:portrait){
 .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(200px,1fr) auto}
 .hero-copy{padding:4px 8px}
 .hero .display,html[lang=en] .hero .display{font-size:clamp(46px,6vw,66px)}
 .hero-description{max-width:760px}
 .hero-bottom{grid-row:3}
}
@media(min-width:700px) and (max-height:900px) and (orientation:portrait){
 .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(min-content,1fr) auto}
 .hero .display,html[lang=en] .hero .display{font-size:clamp(34px,4.8vw,44px)}
 .hero-description{font-size:16px;line-height:1.5}
 .hero-bottom{grid-row:2}
}

/* On phones the original photographs form the opening's background. */
@media(width <700px) and (orientation:portrait){
 .hero{--opening-space:10px;padding-inline:10px}
 .hero-grid{position:relative;isolation:isolate;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(min-content,1fr) auto auto;padding:20px;gap:10px;border-radius:20px}
 .hero-copy{grid-row:1;align-self:center;padding:0}
 .hero .display,html[lang=en] .hero .display{font-size:clamp(34px,9.7vw,54px);line-height:1.06}
 .hero .eyebrow{font-size:12px;margin-bottom:12px}
 .hero h1{margin-bottom:16px}
 .hero-description{font-size:16px;line-height:1.5;color:#f1f3ed}
 .hero .action-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px;margin-top:18px;align-items:stretch}
 .hero .btn,.hero .text-link{font-size:16px;line-height:1.4;gap:8px;min-height:48px;padding:10px 12px}
 .hero .text-link{padding-inline:0}
 .hero-visual{display:contents}
 .hero-frame{z-index:-1;border-radius:20px}
 .hero-frame::after{background:linear-gradient(180deg,#10291fbd 0%,#10291fde 42%,#10291ff5 100%)}
 .hero-photo{filter:brightness(1.05)}
 .hero-stamp{display:none}
 .hero-visual>.hero-image-note{grid-column:1;grid-row:2;align-self:center;max-width:calc(100% - 146px);font-size:12px;line-height:1.5;letter-spacing:0}
 .hero-visual>.hero-controls{grid-column:1;grid-row:2;justify-self:end;align-self:center;width:136px;gap:8px}
 .hero-controls button{width:44px;height:44px}
 .hero-controls .hero-progress{min-width:24px;max-width:32px}
 .hero-bottom{grid-column:1;grid-row:3;padding:0;min-height:40px;font-size:14px;line-height:1.4}
}
@media(width <700px) and (max-height:700px) and (orientation:portrait){
 .hero{--opening-space:6px;padding-inline:6px}
 .hero-grid{padding:14px 16px;gap:8px;border-radius:16px}
 .hero-frame{border-radius:16px}
 .hero .display,html[lang=en] .hero .display{font-size:clamp(30px,9.4vw,38px)}
 .hero .eyebrow{margin-bottom:8px}
 .hero h1{margin-bottom:10px}
 .hero-description{line-height:1.375}
 .hero .action-row{margin-top:12px;gap:12px}
 .hero .btn,.hero .text-link{min-height:44px;padding-block:8px}
 .hero-bottom{min-height:32px;font-size:13px}
}
@media(width <700px) and (max-height:560px) and (orientation:portrait){
 .has-js .utility{display:none}
 .hero-grid{grid-template-rows:minmax(min-content,1fr) auto}
 .hero-bottom{display:none}
}

/* Short landscape screens use a shallow header and two columns. */
@media(max-height:700px) and (orientation:landscape){
 .has-js .utility{display:none}
 .has-js .header-inner{display:flex;min-height:64px;padding:8px 20px;gap:20px}
 .has-js .brand{width:210px;max-width:40%;margin:0}
 .has-js .brand small{display:none}
 .has-js .languages{margin-left:auto}
 .has-js .menu-toggle{order:3;flex-shrink:0}
 .hero{--opening-space:8px;padding-inline:16px}
 .hero-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-rows:minmax(min-content,1fr);gap:16px;padding:14px;border-radius:16px}
 .hero-copy{padding:0}
 .hero .display,html[lang=en] .hero .display{font-size:clamp(28px,3.8vw,40px)}
 .hero .eyebrow{font-size:12px;margin-bottom:6px}
 .hero h1{margin-bottom:8px}
 .hero-description{font-size:16px;line-height:1.4}
 .hero .action-row{margin-top:10px;gap:10px 16px}
 .hero .btn,.hero .text-link{font-size:15px;min-height:44px;padding:8px 12px;gap:10px}
 .hero .text-link{padding-inline:0}
 .hero-visual{padding:12px;gap:8px}
 .hero-stamp{padding:8px 10px}
 .hero-stamp strong{font-size:20px}
 .hero-stamp small{font-size:12px}
 .hero-stamp small:last-of-type{display:none}
 .hero-image-note{font-size:12px;line-height:1.4}
 .hero-controls{gap:8px}
 .hero-controls button{width:44px;height:44px}
 .hero-controls .hero-progress{min-width:24px;max-width:48px}
 .hero-bottom{display:none}
}
@media(width <700px) and (max-height:700px) and (orientation:landscape){
 .hero{--opening-space:6px;padding-inline:8px}
 .hero-grid{isolation:isolate;grid-template-columns:minmax(0,1fr);padding:12px 16px}
 .hero .eyebrow,.hero h1{max-width:calc(100% - 144px)}
 .hero .display,html[lang=en] .hero .display{font-size:28px}
 .hero-visual{display:contents}
 .hero-frame{z-index:-1}
 .hero-frame::after{background:linear-gradient(110deg,#10291ff0,#10291fd9)}
 .hero-stamp{display:none}
 .hero-visual>.hero-controls{position:absolute;inset:12px 16px auto auto;width:128px}
 .hero-visual>.hero-image-note{position:absolute;inset:64px 16px auto auto;width:128px;max-width:128px;text-align:center;line-height:1.35}
}

/* Keep the longest slide visible on narrow, short phones without reducing body text. */
@media(width <360px) and (max-height:700px) and (orientation:portrait){
 .has-js .header-inner{min-height:72px;padding:7px 14px 5px;gap:2px 12px}
 .has-js .languages a{min-height:28px}
 .hero{--opening-space:4px;padding-inline:4px}
 .hero-grid{padding:10px 12px;gap:6px}
 .hero .eyebrow{font-size:12px;line-height:1.5;letter-spacing:.04em;margin-bottom:8px}
 .hero .action-row{gap:8px}
 .hero .btn{padding-inline:8px}
 .hero .btn,.hero .text-link{gap:4px}
 .hero .action-row .arrow{font-size:18px}
}

/* Give longer translated actions enough room on narrow portrait screens. */
@media(width < 360px) and (orientation:portrait){
 .hero .action-row{grid-template-columns:minmax(0,1fr);gap:6px}
 .hero .btn,.hero .text-link{font-size:16px;gap:12px}
 .hero .text-link{justify-self:start}
}

/* Very narrow screens give the photo caption its own readable row. */
@media(width <320px) and (orientation:portrait){
 .hero-grid{grid-template-rows:minmax(min-content,1fr) auto auto auto}
 .hero-visual>.hero-image-note{grid-row:2;max-width:100%;font-size:12px}
 .hero-visual>.hero-controls{grid-row:3;justify-self:start}
 .hero-bottom{grid-row:4}
}