*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif}body{background:#f5f5f2}main{display:grid;grid-template-columns:1fr 1fr;min-height:100svh}section{display:flex;align-items:center;justify-content:center;padding:90px 15px}.metal{background:#f5f5f2;color:#191d1b}.outdoor{background:#0e3d2b;color:#fff}h1,h2{margin:0;line-height:1.15;white-space:nowrap}h1{font-size:clamp(25px,5.8vw,96px);font-weight:750;letter-spacing:-.055em}h1 span{font-weight:400}h2{font-size:clamp(23px,5.1vw,84px);font-weight:800;letter-spacing:.07em}.languages{position:fixed;top:28px;left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:4px;padding:5px;background:#fff;border:1px solid #e3e6e0}.languages button{font:500 14px Arial,Helvetica,sans-serif;border:0;background:transparent;color:#202622;min-width:44px;min-height:40px;cursor:pointer}.languages button[aria-pressed=true]{background:#202622;color:#fff}.languages button:focus-visible{outline:2px solid #ed1c24;outline-offset:2px}@media(max-width:600px){section{padding-inline:10px}.languages{top:20px}.languages button{min-width:40px}h1{font-size:clamp(22px,6.6vw,40px)}h2{font-size:clamp(20px,5.8vw,36px)}}

h1,h2{width:100%;display:flex;justify-content:center;align-items:center}h1 img,h2 img{display:block;height:auto;object-fit:contain}.hh-logo{width:min(65%,340px)}.ravnor-logo{width:86%;max-width:620px}@media(max-width:600px){.hh-logo{width:86%}.ravnor-logo{width:96%}}

section{position:relative;isolation:isolate;overflow:hidden}.panel-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.laser-background{object-position:50% center}.mountain-background{object-position:center}.metal{background:#151819}.metal:before,.outdoor:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}.metal:before{background:linear-gradient(180deg,#0002,#0000 40%,#0004)}.outdoor:before{background:linear-gradient(180deg,#082b1815,#082b1830)}.hh-logo{background:transparent;box-shadow:none;width:min(62%,310px);padding:0;mix-blend-mode:multiply}.ravnor-logo{filter:drop-shadow(0 2px 12px #05261890)}@media(max-width:600px){.hh-logo{width:86%;padding:0}}

/* Feather the shared image boundary and perimeter beneath the crisp logos. */
.brand-opening{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  --seam-width:clamp(60px,12vw,210px);
  --seam-core:clamp(12px,2vw,36px);
  --edge-width:clamp(28px,6vw,100px);
}
.brand-opening>section{isolation:auto}
.brand-opening .panel-background{z-index:0}
.brand-opening>.metal::before,.brand-opening>.outdoor::before{z-index:1}
.brand-opening h1,.brand-opening h2{position:relative;z-index:3}
.brand-opening::before,.brand-opening::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}
.brand-opening::before{
  -webkit-backdrop-filter:blur(clamp(24px,4vw,64px));
  backdrop-filter:blur(clamp(24px,4vw,64px));
  --seam-mask:linear-gradient(to right,
    transparent calc(50% - var(--seam-width)),
    #000 calc(50% - var(--seam-core)),
    #000 calc(50% + var(--seam-core)),
    transparent calc(50% + var(--seam-width)));
  -webkit-mask-image:var(--seam-mask);
  mask-image:var(--seam-mask);
}
.brand-opening::after{
  -webkit-backdrop-filter:blur(clamp(10px,1.4vw,22px));
  backdrop-filter:blur(clamp(10px,1.4vw,22px));
  --edge-mask:linear-gradient(to right,
    #000,transparent var(--edge-width),
    transparent calc(100% - var(--edge-width)),#000),
    linear-gradient(to bottom,
    #000,transparent var(--edge-width),
    transparent calc(100% - var(--edge-width)),#000);
  -webkit-mask-image:var(--edge-mask);
  mask-image:var(--edge-mask);
}

.brand-entry{display:flex;align-items:center;justify-content:center;width:100%;text-decoration:none}.metal h1{mix-blend-mode:multiply}.brand-entry:focus-visible{outline:2px solid white;outline-offset:12px}.brand-entry img{transition:transform .2s}.brand-entry:hover img{transform:scale(1.025)}.brand-page{min-height:100svh}.metal-page{background:#f5f5f2;color:#191d1b}.ravnor-page{background:#0e3d2b;color:#fff}.section-header{display:flex;justify-content:space-between;align-items:center;padding:24px 6%;gap:20px}.section-header .languages{position:static;transform:none}.home-link{color:inherit;font-size:14px;text-decoration:none}.brand-content{display:block;min-height:0;max-width:1100px;margin:auto;padding:30px 6% 70px}.brand-intro{padding:24px 0 40px;border-bottom:1px solid #88998b66}.section-logo{display:block;object-fit:contain;max-width:100%;height:auto}.metal-page .section-logo{width:150px;mix-blend-mode:multiply}.ravnor-page .section-logo{width:420px;margin-bottom:30px}.brand-intro h1{font-size:34px;width:auto;display:block;letter-spacing:-.025em;white-space:normal;margin:24px 0}.section-nav{display:flex;gap:26px;flex-wrap:wrap}.section-nav a{color:inherit;font-size:16px;text-underline-offset:5px}.brand-information{display:block;padding:48px 0;border-bottom:1px solid #88998b66;overflow:visible}.brand-information h2{display:block;font-size:26px;letter-spacing:0;font-weight:500;white-space:normal;margin:0 0 20px}.brand-information p{font-size:18px;line-height:1.8;max-width:700px;margin:0;opacity:.85}.brand-page a:focus-visible{outline:2px solid #ed1c24;outline-offset:5px}@media(prefers-reduced-motion:reduce){.brand-entry img{transition:none}}


/* RAVNOR's temporary launch page. */
.ravnor-coming-soon{
  display:flex;
  flex-direction:column;
  background:#123a29;
  background-image:linear-gradient(180deg,#08241935,#08241970),url("mountain-sketch.png");
  background-size:cover;
  background-position:center;
}
.ravnor-coming-soon .section-header{flex-shrink:0}
.ravnor-launch{
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:0;
  width:100%;
  padding:50px 24px 60px;
  text-align:center;
}
.launch-logo{display:block;width:min(72vw,440px);height:auto;margin-bottom:48px}
.ravnor-launch h1{
  display:block;
  max-width:760px;
  font-size:clamp(28px,3.3vw,46px);
  font-weight:400;
  line-height:1.25;
  letter-spacing:-.025em;
  white-space:normal;
  text-wrap:balance;
  color:#f1f1e7;
}
.ravnor-launch p{margin:22px 0 0;font-size:18px;line-height:1.6;color:#e0e5d9}
@media(max-width:600px){
  .ravnor-launch{padding:40px 24px 50px}
  .launch-logo{margin-bottom:36px}
}

.whatsapp-contact{display:inline-flex;flex-direction:column;gap:8px;margin-top:24px;padding:20px 28px;background:#176b44;color:#fff;border-radius:8px;text-decoration:none;font-size:18px;line-height:1.4;max-width:100%}.whatsapp-contact:hover{background:#105435}.contact-number{font-size:15px;letter-spacing:.04em}

.contact-address{font-style:normal;font-size:18px;line-height:1.8;margin:28px 0 12px}.map-link{color:inherit;text-underline-offset:5px}

/* Contact icons and refined link treatments. */
.whatsapp-contact{display:grid;grid-template-columns:32px 1fr;column-gap:16px;row-gap:5px;padding:20px 26px;border-radius:14px;box-shadow:0 6px 20px #153c2812}
.contact-icon{width:28px;height:28px;flex-shrink:0}
.whatsapp-contact .contact-icon{grid-row:1 / 3;align-self:center;width:32px;height:32px}
.whatsapp-contact .contact-number{grid-column:2;font-size:14px;opacity:.85}
.map-link{display:inline-flex;align-items:center;gap:12px;padding:12px 18px;border:1px solid #ced5cd;border-radius:12px;text-decoration:none;background:#fff8}
.map-link:hover{background:#e8ede5;border-color:#8d9e8f}
.map-link .contact-icon{width:23px;height:23px;color:#176b44}

.email-contact{display:flex;align-items:center;gap:12px;width:fit-content;max-width:100%;margin-top:24px;color:#191d1b;text-decoration:none;font-size:18px;padding:14px 0}.email-contact span{overflow-wrap:anywhere}.email-contact .contact-icon{color:#176b44}.email-contact:hover span{text-decoration:underline;text-underline-offset:5px}

.message-form{display:grid;gap:20px;max-width:640px;margin-top:24px}.message-form label{display:grid;gap:9px;font-size:15px}.message-form input,.message-form textarea{width:100%;padding:14px;border:1px solid #cbd3ca;border-radius:10px;background:#fff;font:inherit;color:inherit}.message-form textarea{resize:vertical}.message-form button{justify-self:start;border:0;border-radius:10px;padding:15px 26px;background:#176b44;color:white;font:inherit;cursor:pointer}.message-form button:disabled{opacity:.6;cursor:wait}.message-form :focus-visible{outline:2px solid #176b44;outline-offset:3px}.message-form .form-trap{display:none}.message-form #form-status{font-size:15px;line-height:1.5}

.brand-opening .hh-logo{mix-blend-mode:normal}

/* Ten-second cinematic background loops on the entry page only. */
.brand-opening .panel-background{pointer-events:none;will-change:transform;transform-origin:center;animation-duration:10s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.brand-opening .laser-background{animation-name:entry-metal-camera}
.brand-opening .mountain-background{animation-name:entry-outdoor-camera}
.brand-opening .brand-entry img,.brand-opening .brand-entry:hover img{transform:none;transition:none}
@keyframes entry-metal-camera{
  0%,100%{transform:scale(1.06) translate3d(-1%,.5%,0)}
  50%{transform:scale(1.14) translate3d(1%,-.5%,0)}
}
@keyframes entry-outdoor-camera{
  0%,100%{transform:scale(1.1) translate3d(1.3%,-.5%,0)}
  50%{transform:scale(1.05) translate3d(-1.2%,.5%,0)}
}
@media(prefers-reduced-motion:reduce){.brand-opening .panel-background{animation:none;transform:none;will-change:auto}}

/* Horizontal entry panels: a compact metal band above the outdoor landscape. */
.brand-opening{grid-template-columns:minmax(0,1fr);grid-template-rows:35fr 65fr;height:100svh;min-height:480px;--seam-width:clamp(24px,5vh,60px);--seam-core:5px;--edge-width:clamp(16px,3vw,48px)}
.brand-opening>section{min-height:0;padding:0 24px}
.brand-opening>.metal{padding-top:48px}
.brand-opening .hh-logo{width:auto;max-width:70vw;height:min(23svh,190px);max-height:190px}
.brand-opening .ravnor-logo{width:min(64vw,570px);max-height:36svh;object-fit:contain}
.brand-opening::before{--seam-mask:linear-gradient(to bottom,transparent calc(35% - var(--seam-width)),#000 calc(35% - var(--seam-core)),#000 calc(35% + var(--seam-core)),transparent calc(35% + var(--seam-width)))}
.brand-opening .mountain-background{object-position:center 36%;filter:brightness(1.9) contrast(.86) saturate(.85)}
.brand-opening>.outdoor::before{background:linear-gradient(180deg,#ffffff12,transparent 50%,#082b1808)}
@media(max-width:600px){.brand-opening .ravnor-logo{width:82vw}.brand-opening>.metal{padding-top:56px}.brand-opening .hh-logo{height:min(22svh,170px)}}

/* Frame the quiet cutting point within the shallow metal entry band. */
.brand-opening .laser-background{object-position:50% 58%}

/* A softly lit silver center gives the original black/red mark clear contrast. */
.brand-opening>.metal::before{background:radial-gradient(ellipse at 50% 53%,rgba(234,238,238,.88) 0%,rgba(225,231,232,.76) 24%,rgba(215,224,226,.34) 58%,rgba(207,215,216,.1) 100%)}
.brand-opening .metal h1{mix-blend-mode:normal}
.brand-opening .hh-logo{height:min(26svh,220px);max-height:220px}
.brand-entry-page>.display-controls,.brand-entry-page>.display-controls .languages button{color:#22292b}
.brand-opening .metal .brand-entry:focus-visible{outline-color:#a82229}
@media(max-width:600px){.brand-opening .hh-logo{height:min(24svh,195px)}}

.brand-opening .laser-background{object-position:50% 55%;filter:saturate(.45) brightness(1.08)}