:root{--red:#ed2412;--white:#fff;--black:#070707;--hero-title-size:175px;--page-padding:32px}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--black);color:#fff;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}
.hero{position:relative;width:100%;height:100svh;min-height:650px;overflow:hidden;isolation:isolate;background:#111}.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-5}.hero-overlay{position:absolute;inset:0;z-index:-4;background:linear-gradient(180deg,rgba(0,0,0,.53),rgba(0,0,0,.1) 45%,rgba(0,0,0,.6))}
.hero-content,.topbar,.navigation,.designer-credit,.scroll-indicator,.section-content,.section-number,.contact-heading,.contact-grid{z-index:5}
.topbar{position:absolute;top:0;left:0;width:100%;height:110px;padding:28px var(--page-padding);display:flex;justify-content:space-between;align-items:flex-start;z-index:30}.logo{display:block;width:118px;height:auto}.menu-button{width:52px;height:52px;border:0;background:transparent;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:9px;padding:8px;cursor:pointer}.menu-button span{height:2px;background:#fff;display:block;transition:width .35s,transform .35s}.menu-button span:first-child{width:31px}.menu-button span:last-child{width:20px}.menu-button.active span:first-child{width:29px;transform:translateY(5.5px) rotate(45deg)}.menu-button.active span:last-child{width:29px;transform:translateY(-5.5px) rotate(-45deg)}
.navigation{position:absolute;top:0;right:0;width:min(570px,100%);height:100%;padding:40px 55px 50px;background:rgba(10,10,10,.95);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);z-index:25;visibility:hidden;transform:translateY(-105%);transition:transform .62s cubic-bezier(.77,0,.18,1),visibility .62s}.navigation.open{visibility:visible;transform:translateY(0)}.nav-inner{height:100%;display:flex;flex-direction:column}.nav-logo-link{display:inline-flex;width:max-content;margin-bottom:48px}.nav-logo{width:105px;height:auto}.nav-label{color:rgba(255,255,255,.42);font-size:10px;letter-spacing:.28em;margin-bottom:24px}.nav-link{position:relative;display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:clamp(27px,4vw,40px);font-weight:700;letter-spacing:-.04em;transition:color .28s,padding-left .28s}.nav-link:not(.contact-nav):hover{color:var(--red);padding-left:12px}.nav-link small{color:rgba(255,255,255,.38);font-size:10px;letter-spacing:.16em}.contact-nav:hover{color:inherit;padding-left:0}
.hero-content{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:90px 25px 70px;pointer-events:none}.reveal-wrap{overflow:hidden;position:relative}.title-reveal h1{font-family:"Junegull","Arial Black",Impact,sans-serif;font-size:var(--hero-title-size);line-height:.86;font-weight:900;letter-spacing:-.065em;text-transform:uppercase;text-shadow:0 4px 25px rgba(0,0,0,.38),0 0 70px rgba(255,255,255,.08);animation:revealText 1.05s cubic-bezier(.16,1,.3,1) .15s both}.subtitle-reveal{margin-top:27px}.subtitle-reveal p{font-size:clamp(13px,1.35vw,19px);line-height:1.45;font-weight:500;letter-spacing:.16em;text-transform:uppercase;animation:revealText .95s cubic-bezier(.16,1,.3,1) .4s both}.certifications{margin-top:35px;display:flex;align-items:center;justify-content:center;gap:20px;animation:revealGroup 1s cubic-bezier(.16,1,.3,1) .62s both}.cert-card{width:100px;height:100px;background:#fff;border-radius:3px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.35)}.cert-card img{width:100%;height:100%;display:block;object-fit:contain}
.designer-credit{position:absolute;left:var(--page-padding);bottom:31px;z-index:30;display:inline-flex;align-items:center;gap:7px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;opacity:.8;transition:opacity .25s,transform .25s}.designer-credit:hover{opacity:1;transform:translateX(4px)}.designer-credit span{font-size:14px}.scroll-indicator{position:absolute;right:var(--page-padding);bottom:30px;display:flex;align-items:center;gap:12px;opacity:.6;z-index:10}.scroll-indicator span{width:40px;height:1px;background:#fff}.scroll-indicator small{font-size:9px;letter-spacing:.25em}
.content-section{position:relative;isolation:isolate;min-height:82vh;position:relative;padding:120px 8vw;display:flex;align-items:center;overflow:hidden}.section-dark{background:#0b0b0b}.section-light{background:#eee;color:#111}.section-number{position:absolute;top:70px;left:8vw;font-size:11px;letter-spacing:.25em;color:var(--red);font-weight:700}.section-content{max-width:920px}.section-kicker{font-size:10px;letter-spacing:.28em;font-weight:700;margin-bottom:20px;text-transform:uppercase;opacity:.6}.section-content h2{font-family:"Junegull","Arial Black",Impact,sans-serif;font-size:clamp(65px,10vw,150px);line-height:.86;letter-spacing:-.06em;margin-bottom:35px}.section-content p:not(.section-kicker){max-width:680px;font-size:clamp(16px,1.7vw,22px);line-height:1.7;opacity:.72}
.contact-section{position:relative;isolation:isolate;min-height:90vh;padding:115px 7vw 110px;background:#111;overflow:hidden}.contact-heading,.contact-grid{position:relative;z-index:2}.contact-heading{max-width:800px;margin-bottom:55px}.contact-heading .section-number{position:static;margin-bottom:30px}.contact-heading .section-kicker{margin-bottom:18px}.contact-heading h2{font-family:"Junegull","Arial Black",Impact,sans-serif;font-size:clamp(65px,10vw,150px);line-height:.86;letter-spacing:-.06em}.contact-intro{margin-top:28px;color:rgba(255,255,255,.62);font-size:17px}.contact-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);gap:45px;align-items:stretch}.map-card{min-height:430px;border:1px solid rgba(255,255,255,.16);background:#222;overflow:hidden}.map-card iframe{width:100%;height:100%;min-height:430px;display:block;border:0;filter:grayscale(1) contrast(.92)}.contact-details{display:flex;flex-direction:column;justify-content:center}.contact-item{min-height:115px;padding:22px 0;display:flex;align-items:center;gap:22px;border-bottom:1px solid rgba(255,255,255,.14)}.contact-item:first-child{border-top:1px solid rgba(255,255,255,.14)}.contact-icon{width:50px;height:50px;flex:0 0 50px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.25);border-radius:50%;font-size:21px}.contact-item small{display:block;margin-bottom:9px;color:rgba(255,255,255,.43);font-size:9px;font-weight:700;letter-spacing:.22em}.contact-item strong{display:block;font-size:15px;line-height:1.8;font-weight:500}.contact-item:not(.contact-static):hover strong{color:var(--red)}
.designer-footer{min-height:170px;padding:45px 7vw;background:#050505;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:center;align-items:center;text-align:center}.footer-designer{display:inline-block;font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;line-height:1.5;transition:color .25s}.footer-designer:hover{color:var(--red)}
@keyframes revealText{from{opacity:0;transform:translateY(110%);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes revealGroup{from{opacity:0;transform:translateY(45px);filter:blur(7px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@media(max-width:1100px){:root{--hero-title-size:125px}.topbar{padding:24px}.designer-credit{left:24px}.scroll-indicator{right:24px}.contact-grid{grid-template-columns:1fr}.map-card,.map-card iframe{min-height:390px}}
@media(max-width:700px){:root{--hero-title-size:clamp(65px,20vw,105px);--page-padding:20px}.hero{min-height:570px}.topbar{height:90px;padding:20px}.logo{width:86px}.hero-content{padding:90px 18px 70px}.title-reveal h1{letter-spacing:-.075em}.subtitle-reveal p{max-width:340px;margin:auto;font-size:10px;letter-spacing:.11em}.certifications{margin-top:28px;gap:13px}.cert-card{width:76px;height:76px}.navigation{width:100%;padding:28px 28px 40px}.nav-logo{width:90px}.nav-logo-link{margin-bottom:40px}.nav-link{padding:14px 0;font-size:29px}.designer-credit{left:20px;bottom:20px;font-size:9px}.scroll-indicator{display:none}.content-section{min-height:72vh;padding:105px 8vw}.section-number{top:45px;left:8vw}.section-content h2,.contact-heading h2{font-size:clamp(58px,18vw,105px)}.section-content p:not(.section-kicker){font-size:16px;line-height:1.65}.contact-section{padding:95px 7vw 80px}.contact-grid{gap:30px}.map-card,.map-card iframe{min-height:330px}.contact-item strong{font-size:13px}.contact-item{gap:15px}.contact-icon{width:44px;height:44px;flex-basis:44px}.designer-footer{min-height:150px;padding:40px 7vw;display:flex;align-items:center;justify-content:center;text-align:center}.footer-designer{font-size:11px;letter-spacing:.18em}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}


/* =========================================================
   USER-SUPPLIED TOPOGRAPHIC PNG
   ONLY sections 01–04.
   HERO and CONTACT have NO pattern.
========================================================= */

.content-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.content-section .section-content,
.content-section .section-number {
  position: relative;
  z-index: 3;
}

.section-pattern {
  position: absolute;
  top: 0;
  right: 0;
  width: min(38vw, 520px);
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.section-pattern img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* Grey supplied PNG on black sections 01 and 03 */
.section-pattern.pattern-grey {
  opacity: 0.78;
}

/* Black supplied PNG on white sections 02 and 04 */
.section-pattern.pattern-black {
  opacity: 0.25;
}

/* Make sure pattern never covers the readable content column */
@media (min-width: 701px) {
  .section-content {
    max-width: min(58vw, 920px);
    padding-right: 30px;
  }
}

@media (max-width: 700px) {
  .section-pattern {
    width: 55vw;
    opacity: 0.18;
  }

  .section-pattern.pattern-grey {
    opacity: 0.28;
  }

  .section-pattern.pattern-black {
    opacity: 0.16;
  }
}



/* =========================================================
   FINAL LAYOUT ADJUSTMENTS
========================================================= */

/* Section numbers 01–04: small, top-left, aligned with title/content */
.content-section .section-number {
  position: absolute;
  top: 58px;
  left: 8vw;
  margin: 0;
  z-index: 4;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .25em;
  font-weight: 700;
}

/* Keep number close to the section's first text/title */
.content-section .section-content {
  position: relative;
  z-index: 3;
}

/* Clickable section titles retain the same visual appearance */
.section-title-link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  transition: color .28s ease;
}

.section-title-link:hover,
.section-title-link:focus-visible {
  color: var(--red);
}

/* New transition section below 04 Impacts */
.touch-section {
  min-height: 190px;
  padding: 45px 8vw;
  background: #fff;
  color: #050505;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.touch-title {
  color: #050505;
  text-decoration: none;
  font-family: "Junegull", "Arial Black", Impact, sans-serif;
  font-size: 70px;
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 700;
  transition: color .28s ease;
}

.touch-title:hover,
.touch-title:focus-visible {
  color: var(--red);
}

@media (max-width: 700px) {
  .content-section .section-number {
    top: 42px;
    left: 8vw;
    font-size: 10px;
  }

  .touch-section {
    min-height: 145px;
    padding: 35px 6vw;
  }

  .touch-title {
    font-size: 70px;
    max-width: 100%;
    transform: scale(.72);
    transform-origin: center;
    white-space: nowrap;
  }
}


/* Dedicated new-tab pages */
.subpage {
  margin: 0;
  min-height: 100vh;
  background: #050505;
}

.subpage-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 92px;
  padding: 22px 7vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 20;
}

.subpage-logo img {
  display: block;
  max-width: 115px;
  max-height: 58px;
  object-fit: contain;
}

.subpage-back {
  color: inherit;
  text-decoration: none;
  font-size: 11px;
  letter-spacing: .16em;
  font-weight: 700;
}

.subpage-section {
  min-height: 100vh !important;
  padding-top: 150px !important;
}

.subpage-section h1 {
  font-family: "Junegull", "Arial Black", Impact, sans-serif;
  font-size: clamp(65px, 10vw, 150px);
  line-height: .86;
  letter-spacing: -.06em;
  margin: 0 0 35px;
}

@media (max-width: 700px) {
  .subpage-header {
    padding: 18px 6vw;
  }
  .subpage-section {
    padding-top: 130px !important;
  }
}