/* A true 45-degree split: the horizontal run equals the full panel height. */
.brand-entry-page{background:#173e32}
.brand-entry-page .brand-opening{--entry-height:max(100svh,600px);--seam-top:calc(50% + var(--entry-height)/2);--seam-bottom:calc(50% - var(--entry-height)/2);display:block;position:relative;height:var(--entry-height);min-height:600px;overflow:hidden}
.brand-entry-page .brand-opening::before,.brand-entry-page .brand-opening::after{content:none;display:none}
.brand-entry-page .brand-opening>section{position:absolute;inset:0;padding:0;isolation:isolate;overflow:hidden}
.brand-entry-page .brand-opening>.metal{background:#d9dfe0;clip-path:polygon(0 0,var(--seam-top) 0,var(--seam-bottom) 100%,0 100%)}
.brand-entry-page .brand-opening>.outdoor{background:#173e32;clip-path:polygon(var(--seam-top) 0,100% 0,100% 100%,var(--seam-bottom) 100%)}
.brand-entry-page .brand-opening .panel-background{inset:0;width:100%;height:100%;animation:none;transform:none;will-change:auto;object-fit:cover}
.brand-entry-page .brand-opening .laser-background{width:70%;object-position:90% 55%;filter:saturate(.95) contrast(1.08) brightness(1.03)}
.brand-entry-page .brand-opening>.metal::before{background:radial-gradient(ellipse at 22% 28%,rgba(232,238,239,.88) 0%,rgba(232,238,239,.7) 13%,rgba(232,238,239,.16) 30%,transparent 47%)}
.brand-entry-page .brand-opening .mountain-background{object-position:center top;filter:brightness(1.7) contrast(.94) saturate(.8)}
.brand-entry-page .brand-opening>.outdoor::before{background:linear-gradient(180deg,rgba(6,30,20,.06),rgba(6,30,20,.24))}
.brand-entry-page .brand-opening h1,.brand-entry-page .brand-opening h2{position:absolute;width:auto;margin:0;padding:0;transform:translate(-50%,-50%);mix-blend-mode:normal}
.brand-entry-page .brand-opening h1{left:22%;top:28%}
.brand-entry-page .brand-opening h2{left:76%;top:59%}
.brand-entry-page .brand-entry{display:flex;flex-direction:column;gap:22px;width:fit-content;margin:auto}
.brand-entry-page .brand-opening .hh-logo{width:clamp(170px,19vw,265px);height:auto;max-width:none;max-height:none;filter:none;mix-blend-mode:normal}
.brand-entry-page .brand-opening .ravnor-logo{width:clamp(250px,31vw,460px);height:auto;max-width:none;max-height:none;filter:none}
.brand-entry-page .entry-caption{font:700 clamp(20px,2vw,28px)/1.2 Arial,Helvetica,sans-serif;letter-spacing:.12em;white-space:normal;text-align:center;color:#20282a;max-width:250px}
.brand-entry-page .brand-entry img,.brand-entry-page .brand-entry:hover img{transform:none;transition:none}
.brand-entry-page .brand-entry:focus-visible{outline:2px solid currentColor;outline-offset:16px}
.brand-entry-page .metal .brand-entry{color:#a6252b}
.brand-entry-page .outdoor .brand-entry{color:#fff}
.brand-entry-page>.display-controls{position:absolute;top:18px;right:clamp(18px,3vw,48px);left:auto;transform:none;gap:10px;color:#fff}
.brand-entry-page>.display-controls .languages{gap:2px}
.brand-entry-page>.display-controls .languages button{font-size:14px;color:inherit;letter-spacing:0;opacity:.75}
.brand-entry-page>.display-controls .languages button[aria-pressed="true"]{opacity:1;font-weight:600}
.brand-entry-page>.display-controls .languages button[aria-pressed="true"]::after{height:1px}
[data-theme="dark"] .brand-entry-page .brand-opening .laser-background{filter:saturate(.85) contrast(1.08) brightness(.95)}
[data-theme="dark"] .brand-entry-page .brand-opening .mountain-background{filter:brightness(1.5) contrast(.94) saturate(.8)}
@media(max-aspect-ratio:1/1){
 .brand-entry-page .brand-opening h1{left:32%;top:18%}
 .brand-entry-page .brand-opening h2{left:65%;top:75%}
 .brand-entry-page .brand-opening .hh-logo{width:clamp(150px,26vw,220px)}
 .brand-entry-page .brand-opening .ravnor-logo{width:clamp(210px,49vw,350px)}
 .brand-entry-page .brand-opening>.metal::before{background:radial-gradient(ellipse at 32% 16%,rgba(232,238,239,.9) 0%,rgba(232,238,239,.64) 14%,rgba(232,238,239,.06) 31%,transparent 43%)}
 .brand-entry-page>.display-controls{top:12px;right:16px;gap:6px;color:#20282a}
 .brand-entry-page .entry-caption{font-size:20px;letter-spacing:.1em}
 .brand-entry-page .brand-entry{gap:16px}
}
@media(max-width:360px){.brand-entry-page .brand-opening h2{left:63%}.brand-entry-page .brand-opening .ravnor-logo{width:190px}}

/* Keep the cutting head and ignition inside the visible metal half on phones. */
@media(max-aspect-ratio:1/1){.brand-entry-page .brand-opening .laser-background{width:100%;height:70%;object-position:65% 50%}}

/* Echo the broad, heavy, forward-leaning ART METAL lettering. */
@font-face{font-family:"Entry Brand";src:url("fonts/InterVariable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
.brand-entry-page .entry-caption{font-family:"Entry Brand",Arial,sans-serif;font-size:clamp(24px,2.4vw,34px);font-weight:900;line-height:1.1;letter-spacing:.015em;color:#151515;transform:skewX(-8deg) scaleX(1.18);transform-origin:center;white-space:nowrap;max-width:none}
html[lang="en"] .brand-entry-page .entry-caption{font-size:clamp(16px,1.55vw,23px)}
html[lang="nl-NL"] .brand-entry-page .entry-caption{font-size:clamp(19px,1.9vw,27px)}
@media(max-aspect-ratio:1/1){.brand-entry-page .entry-caption{font-size:24px;letter-spacing:.015em}html[lang="en"] .brand-entry-page .entry-caption{font-size:16px}html[lang="nl-NL"] .brand-entry-page .entry-caption{font-size:19px}}

/* Angular wordmark replaces the H&H emblem on the gateway only. */
.brand-entry-page .brand-opening .hh-wordmark{display:block;width:clamp(290px,34vw,500px);height:auto;max-width:none;filter:none}
.brand-entry-page .metal .brand-entry{gap:24px}
.brand-entry-page .entry-caption{font-family:"Entry Brand",Arial,sans-serif;font-size:clamp(18px,1.7vw,25px);font-weight:600;letter-spacing:.32em;line-height:1.2;transform:none;color:#141b1d}
html[lang="en"] .brand-entry-page .entry-caption{font-size:clamp(13px,1.2vw,18px);letter-spacing:.2em}
html[lang="nl-NL"] .brand-entry-page .entry-caption{font-size:clamp(15px,1.4vw,21px);letter-spacing:.25em}
@media(max-aspect-ratio:1/1){
 .brand-entry-page .brand-opening h1{left:42%;top:19%}
 .brand-entry-page .brand-opening .hh-wordmark{width:clamp(250px,72vw,430px)}
 .brand-entry-page .metal .brand-entry{gap:18px}
 .brand-entry-page .entry-caption{font-size:18px;letter-spacing:.28em}
 html[lang="en"] .brand-entry-page .entry-caption{font-size:13px}
 html[lang="nl-NL"] .brand-entry-page .entry-caption{font-size:15px}
}

/* Isolate the original red/black HH without its old ART METAL lettering. */
.brand-entry-page .hh-emblem{display:block;position:relative;overflow:hidden;width:clamp(86px,8vw,118px);aspect-ratio:730/1100;flex:none;align-self:center}
.brand-entry-page .hh-emblem img{position:absolute;display:block;top:0;left:-32.876712%;width:171.780822%;height:auto;max-width:none;filter:none;mix-blend-mode:normal}
.brand-entry-page .metal .brand-entry{align-items:center;gap:18px}
@media(max-aspect-ratio:1/1){.brand-entry-page .hh-emblem{width:clamp(66px,18vw,90px)}.brand-entry-page .metal .brand-entry{gap:14px}}

/* Shared wide, squared lettering for production and both brand slogans. */
@font-face{font-family:"Entry Outdoor";src:url("fonts/Michroma-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
html[lang] .brand-entry-page .brand-opening .entry-caption,html[lang] .brand-entry-page .brand-opening .entry-slogan{font-family:"Entry Outdoor",Arial,sans-serif;font-weight:400;font-style:normal;transform:none;text-transform:uppercase;text-align:center}
html[lang] .brand-entry-page .brand-opening .entry-caption{font-size:clamp(16px,1.6vw,22px);letter-spacing:.24em;line-height:1.5}
html[lang] .brand-entry-page .brand-opening .entry-slogan{display:block;font-size:clamp(14px,1.05vw,16px);letter-spacing:.06em;line-height:1.85;white-space:normal;text-wrap:balance;width:100%;max-width:420px;color:inherit}
.brand-entry-page .metal .entry-slogan{margin-top:0;color:#141b1d!important;max-width:34vw!important}
.brand-entry-page .outdoor .entry-slogan{max-width:32vw!important}
.brand-entry-page .outdoor .brand-entry{gap:8px}
@media(max-aspect-ratio:1/1){
 .brand-entry-page .brand-opening h1{top:23%}
 html[lang] .brand-entry-page .brand-opening .entry-caption{font-size:16px;letter-spacing:.2em}
 html[lang] .brand-entry-page .brand-opening .entry-slogan{font-size:14px;letter-spacing:.035em;line-height:1.75}
 .brand-entry-page .metal .entry-slogan{max-width:74vw!important}
 .brand-entry-page .outdoor .entry-slogan{max-width:62vw!important}
 .brand-entry-page .metal .brand-entry{gap:12px}
}

/* Derived from the original OUTDOOR contours, not an unrelated substitute. */
@font-face{font-family:"Ravnor Outdoor Reference";src:url("fonts/RavnorOutdoorReference.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
html[lang] .brand-entry-page .brand-opening .outdoor .entry-slogan{font-family:"Ravnor Outdoor Reference",Arial,sans-serif;font-size:clamp(16px,1.55vw,22px);font-weight:400;letter-spacing:.65em;line-height:1.95;text-transform:uppercase;padding-left:.65em;max-width:34vw!important}
@media(max-aspect-ratio:1/1){html[lang] .brand-entry-page .brand-opening .outdoor .entry-slogan{font-size:16px;letter-spacing:.6em;padding-left:.6em;line-height:1.9;max-width:64vw!important}}

/* All supporting text uses the same original-outline lettering. */
html[lang] .brand-entry-page .brand-opening .entry-caption,html[lang] .brand-entry-page .brand-opening .entry-slogan{font-family:"Ravnor Outdoor Reference",Arial,sans-serif;font-weight:400;font-style:normal;transform:none}
html[lang] .brand-entry-page .brand-opening .entry-caption{letter-spacing:.38em}
html[lang] .brand-entry-page .brand-opening .metal .entry-slogan{letter-spacing:.22em}
html[lang] .brand-entry-page .brand-opening .outdoor>.ravnor-slogan{position:absolute;z-index:3;left:max(6vw,calc(43% - var(--entry-height)*.37 + 24px));bottom:9%;margin:0;padding:0;width:auto;max-width:none!important;font-size:clamp(16px,1.6vw,23px);letter-spacing:.26em;line-height:1.5;white-space:nowrap;text-wrap:nowrap;text-align:left;text-decoration:none;color:#fff}
.brand-entry-page .ravnor-slogan:focus-visible{outline:2px solid #fff;outline-offset:8px}
@media(max-aspect-ratio:1/1){
 html[lang] .brand-entry-page .brand-opening .outdoor>.ravnor-slogan{left:6vw;bottom:9%;font-size:clamp(14px,4vw,18px);letter-spacing:.14em}
 html[lang] .brand-entry-page .brand-opening .metal .entry-slogan{letter-spacing:.16em}
}

/* Both slogans share precisely the same typography at every viewport. */
html[lang] .brand-entry-page .brand-opening .metal .entry-slogan,
html[lang] .brand-entry-page .brand-opening .outdoor>.ravnor-slogan{
 font-family:"Ravnor Outdoor Reference",Arial,sans-serif;
 font-size:clamp(16px,1.6vw,23px);
 font-weight:400;
 font-style:normal;
 font-synthesis:none;
 letter-spacing:.14em;
 line-height:1.5;
 text-transform:uppercase;
 white-space:nowrap;
 text-wrap:nowrap;
 transform:none;
 padding:0;
}
@media(max-aspect-ratio:1/1){
 html[lang] .brand-entry-page .brand-opening .metal .entry-slogan,
 html[lang] .brand-entry-page .brand-opening .outdoor>.ravnor-slogan{
  font-size:clamp(14px,4vw,18px);
  letter-spacing:.14em;
  line-height:1.5;
 }
}

/* The slogan follows the visible left edge of the tree, four text lines below. */
.brand-entry-page .ravnor-identity{position:absolute;z-index:3;left:76%;top:59%;width:clamp(250px,31vw,460px);transform:translate(-50%,-50%);transition:left 1.65s cubic-bezier(.22,.61,.36,1),top 1.65s cubic-bezier(.22,.61,.36,1)}
.brand-entry-page .brand-opening .ravnor-identity h2{position:static;left:auto;top:auto;transform:none;width:100%;margin:0}
.brand-entry-page .brand-opening .ravnor-identity .ravnor-logo{width:100%;max-width:none}
html[lang] .brand-entry-page .brand-opening .ravnor-identity>.ravnor-slogan{position:absolute;z-index:3;top:calc(100% + 6em);left:5.6778%;right:auto;bottom:auto;padding:0;margin:0;width:max-content;max-width:none!important;transform:none;text-align:left;white-space:nowrap;text-wrap:nowrap;color:#fff;font-family:"Ravnor Outdoor Reference",Arial,sans-serif;font-size:clamp(16px,1.6vw,23px);font-weight:400;letter-spacing:.14em;line-height:1.5;text-decoration:none}
/* Complementary diagonal polygons move together; the initial boundary stays 45°. */
.brand-entry-page .brand-opening>section{transition:clip-path 1.65s cubic-bezier(.22,.61,.36,1)}
.brand-entry-page .brand-opening .metal h1{transition:left 1.65s cubic-bezier(.22,.61,.36,1),top 1.65s cubic-bezier(.22,.61,.36,1)}
.brand-entry-page .brand-opening .laser-background{transition:width 1.65s cubic-bezier(.22,.61,.36,1),height 1.65s cubic-bezier(.22,.61,.36,1),object-position 1.65s cubic-bezier(.22,.61,.36,1)}
.brand-entry-page .brand-opening[data-active="metal"]{--seam-top:calc(100% + var(--entry-height));--seam-bottom:100%}
.brand-entry-page .brand-opening[data-active="outdoor"]{--seam-top:0%;--seam-bottom:calc(0% - var(--entry-height))}

.brand-entry-page .brand-opening[data-active="metal"] .laser-background{width:100%;height:100%;object-position:50% 55%}

.brand-entry-page>.display-controls{transition:color .6s}
.brand-entry-page:has(.brand-opening[data-active="metal"])>.display-controls{color:#20282a}
.brand-entry-page:has(.brand-opening[data-active="outdoor"])>.display-controls{color:#fff}
@media(max-aspect-ratio:1/1){
 .brand-entry-page .ravnor-identity{left:65%;top:75%;width:clamp(210px,49vw,350px)}
 html[lang] .brand-entry-page .brand-opening .ravnor-identity>.ravnor-slogan{font-size:clamp(14px,4vw,18px);letter-spacing:.06em}
 
 
}
@media(prefers-reduced-motion:reduce){.brand-entry-page .brand-opening>section,.brand-entry-page .brand-opening .metal h1,.brand-entry-page .ravnor-identity,.brand-entry-page .brand-opening .laser-background{transition:none}}


html[lang] .brand-entry-page .brand-opening .ravnor-identity>.ravnor-slogan{transform:scaleX(var(--ravnor-caption-scale,1));transform-origin:left top}

/* Continuous camera movement on the photographs only. */
.brand-entry-page .brand-opening .panel-background{will-change:transform;backface-visibility:hidden;transform-origin:center}
.brand-entry-page .brand-opening .laser-background{animation:metal-film-camera 10s ease-in-out infinite}
.brand-entry-page .brand-opening .mountain-background{animation:outdoor-film-camera 14s ease-in-out infinite}
@keyframes metal-film-camera{
 0%,100%{transform:scale(1.065) translate3d(-.65%,.45%,0)}
 50%{transform:scale(1.13) translate3d(.65%,-.45%,0)}
}
@keyframes outdoor-film-camera{
 0%,100%{transform:scale(1.09) translate3d(.8%,.4%,0)}
 50%{transform:scale(1.04) translate3d(-.8%,-.4%,0)}
}
@media(prefers-reduced-motion:reduce){
 .brand-entry-page .brand-opening .panel-background{animation:none;transform:none;will-change:auto}
}

/* Fit the entry to the visible screen, including mobile browser toolbars. */
html:has(body.brand-entry-page){height:100%;overflow:hidden}
body.brand-entry-page{height:100svh;height:100dvh;min-height:0;max-height:100dvh;overflow:hidden;overscroll-behavior:none}
.brand-entry-page .brand-opening{--entry-height:100svh;--entry-height:100dvh;--scene-scale:1;height:var(--entry-height);min-height:0;max-height:100%;width:100%;overflow:hidden}
.brand-entry-page .brand-opening .metal h1{transform:translate(-50%,-50%) scale(var(--scene-scale));transform-origin:center}
.brand-entry-page .ravnor-identity{transform:translate(-50%,-50%) scale(var(--scene-scale));transform-origin:center}
.brand-entry-page>.display-controls{top:max(10px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right))}

/* The interactive halves never move with the animated visual panels. */
.brand-entry-page .brand-opening>section{pointer-events:none}
.brand-entry-page .brand-opening>.brand-hit{position:absolute;inset:0;z-index:10;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.brand-entry-page .brand-hit-metal{clip-path:polygon(0 0,calc(50% + var(--entry-height)/2) 0,calc(50% - var(--entry-height)/2) 100%,0 100%)}
.brand-entry-page .brand-hit-outdoor{clip-path:polygon(calc(50% + var(--entry-height)/2) 0,100% 0,100% 100%,calc(50% - var(--entry-height)/2) 100%)}
.brand-entry-page .brand-hit:focus-visible{outline:none;box-shadow:inset 0 0 0 4px #fff;background:rgba(255,255,255,.045)}
/* Brand identities glide into the expanded scene; hit areas stay fixed. */
.brand-entry-page .brand-opening[data-active="metal"] .metal h1{left:50%;top:36%}
.brand-entry-page .brand-opening[data-active="outdoor"] .ravnor-identity{left:50%;top:44%}
.brand-entry-page .brand-opening[data-active="metal"]>.metal::before{background:radial-gradient(ellipse at 50% 36%,rgba(232,238,239,.86),rgba(232,238,239,.58) 19%,rgba(232,238,239,.04) 44%,transparent 60%)}
@media(max-aspect-ratio:1/1){
 .brand-entry-page .brand-opening[data-active="metal"] .metal h1{top:32%}
 .brand-entry-page .brand-opening[data-active="outdoor"] .ravnor-identity{top:40%}
}

/* Photographic camp lighting, retaining the slow camera movement. */
html[data-theme] .brand-entry-page .brand-opening .entry-camp-background{object-position:center center;filter:brightness(1.08) saturate(.92) contrast(1.02)}
@media(max-aspect-ratio:1/1){html[data-theme] .brand-entry-page .brand-opening .entry-camp-background{object-position:80% center}}