:root {
  --hero-gold: #d4ad78;
  --hero-ivory: #f4efe7;
  --hero-black: #090a0b;
}

.site-header {
  height: 96px;
  padding: 0 clamp(28px, 5.5vw, 92px);
  border-bottom: 1px solid rgba(255,255,255,.13);
  background: linear-gradient(180deg, rgba(5,6,7,.72), transparent);
}

.site-header .brand img { width: 184px; }
.site-header nav {
  display: flex;
  align-items: center;
  gap: clamp(24px, 2.4vw, 42px);
  margin-left: auto;
  margin-right: 34px;
}
.site-header nav a {
  position: relative;
  color: rgba(255,255,255,.8);
  font-size: 14px;
  font-weight: 500;
}
.site-header nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -9px;
  height: 1px;
  background: var(--hero-gold);
  transition: right .25s ease;
}
.site-header nav a:hover { color: #fff; }
.site-header nav a:hover::after { right: 0; }
.site-header .header-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 21px;
  border: 1px solid rgba(212,173,120,.78);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.menu-button { display: none; }

.hero {
  min-height: 820px;
  height: 100svh;
  max-height: 1040px;
  padding: 0;
  isolation: isolate;
  background-color: #090b0d;
  background-image: url("assets/hero-wall-v2.webp");
  background-repeat: no-repeat;
  background-position: left 43%;
  background-size: 56% auto;
}
.hero::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, transparent 0 38%, rgba(7,9,11,.1) 50%, rgba(7,9,11,.68) 74%, #0d0f11 100%),
    linear-gradient(0deg, rgba(4,5,6,.72) 0%, transparent 25%, rgba(3,4,5,.1) 100%);
}
.hero::after {
  content: "WIDEPICK";
  display: block;
  position: absolute;
  z-index: 1;
  right: 4.5vw;
  bottom: 148px;
  color: transparent;
  font: 800 clamp(70px, 8.5vw, 154px)/1 Montserrat, sans-serif;
  letter-spacing: .08em;
  -webkit-text-stroke: 1px rgba(212,173,120,.1);
  opacity: .6;
  pointer-events: none;
}
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(3,4,5,.05), transparent 28%);
}
.hero-shade::before,
.hero-shade::after { display: none; }

.wp-hero-copy-v3 {
  position: absolute;
  z-index: 3;
  top: 47.5%;
  left: clamp(46px, 7.2vw, 138px);
  width: min(55vw, 920px);
  margin: 0;
  transform: translateY(-50%);
}
.wp-hero-intro-v3 {
  position: static;
  margin: 0 0 27px;
  color: rgba(229,190,137,.82);
  font: 600 11px/1.5 Montserrat, sans-serif;
  letter-spacing: .28em;
  text-shadow: 0 2px 16px rgba(0,0,0,.8);
}
.wp-hero-headline-v3 {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: 0;
  color: var(--hero-black);
  letter-spacing: -.065em;
  transform: perspective(1500px) rotateY(-5deg) rotateX(.6deg);
  transform-origin: left center;
}
.wp-hero-headline-v3 > .wp-headline-lead {
  display: block;
  margin: 0 0 16px 7px;
  width: max-content;
  color: #08090a;
  font-size: clamp(28px, 2.55vw, 43px);
  font-weight: 800;
  letter-spacing: -.055em;
}
.wp-hero-headline-v3 strong {
  position: relative;
  z-index: 0;
  isolation: isolate;
  display: block;
  font-size: clamp(76px, 7.35vw, 132px);
  font-weight: 800;
  line-height: 1;
}

.wp-hero-headline-v3 > .wp-headline-lead,
.wp-glow-line {
  position: relative;
  z-index: 1;
  isolation: isolate;
  color: #050506;
  font-family: "Noto Sans KR", sans-serif;
  -webkit-text-stroke: .010em rgba(14,14,14,.92);
  paint-order: stroke fill;
  text-shadow:
    -.010em -.010em 0 rgba(255,255,255,.10),
    .014em .018em 0 #5a422d,
    .030em .038em 0 #443224,
    .046em .058em 0 #33271f,
    .062em .078em 0 #261f1b,
    .078em .098em 0 #1a1816,
    .094em .118em 0 #101112,
    .110em .138em 0 #090a0b,
    .126em .158em 0 #040506,
    .140em .176em .040em rgba(0,0,0,.96);
}
.wp-glow-line { display: inline-block; }
.wp-hero-headline-v3 > .wp-headline-lead::before,
.wp-glow-line::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -2;
  color: transparent;
  -webkit-text-stroke: .100em rgba(255,225,174,.96);
  filter: blur(.060em);
  opacity: .90;
  pointer-events: none;
}

.wp-hero-headline-image {
  position: relative;
  width: clamp(420px, 38vw, 640px);
  margin: -18px 0 0 -36px;
}
.wp-slogan-picture,
.wp-slogan-picture img {
  display: block;
  width: 100%;
  height: auto;
}
.wp-slogan-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.wp-hero-headline-v3 > .wp-headline-lead::after,
.wp-glow-line::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -3;
  color: transparent;
  -webkit-text-stroke: .205em rgba(255,193,112,.56);
  filter: blur(.150em);
  opacity: .76;
  pointer-events: none;
}

.hero-cta-block {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: auto;
  right: clamp(38px, 6.5vw, 124px);
  width: min(390px, 31vw);
  min-height: 0;
  padding: 8px 0 8px 29px;
  border-left: 1px solid rgba(212,173,120,.8);
  background: none;
  transform: translateY(-50%);
  backdrop-filter: none;
}
.hero-cta-block::before { display: none; }
.hero-kicker {
  margin: 0 0 19px;
  color: var(--hero-gold);
  font: 600 10px/1.4 Montserrat, sans-serif;
  letter-spacing: .22em;
}
.hero .hero-description {
  position: static;
  margin: 0 0 30px;
  color: rgba(255,255,255,.9);
  font-size: clamp(18px, 1.45vw, 23px);
  font-weight: 500;
  line-height: 1.72;
  letter-spacing: -.025em;
  text-shadow: 0 3px 20px rgba(0,0,0,.95);
}
.hero-actions {
  position: static;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.hero-work-button,
.hero-contact-button {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 0 16px;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.hero-work-button {
  border: 1px solid var(--hero-ivory);
  background: var(--hero-ivory);
  color: #111214;
  backdrop-filter: none;
}
.hero-contact-button {
  border: 1px solid rgba(212,173,120,.72);
  background: rgba(4,5,6,.28);
  color: #fff;
  backdrop-filter: blur(7px);
}
.hero-work-button:hover { background: #fff; }
.hero-contact-button:hover { border-color: var(--hero-gold); background: rgba(212,173,120,.14); }

.scroll-cue {
  z-index: 3;
  right: 23px;
  bottom: 144px;
  left: auto;
  color: rgba(255,255,255,.55);
  writing-mode: vertical-rl;
}
.hero-bottom-services {
  z-index: 4;
  height: 112px;
  padding: 0 6vw;
  background: rgba(3,4,5,.93);
  border-top: 1px solid rgba(255,255,255,.13);
  backdrop-filter: blur(12px);
}
.hero-bottom-services > div {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 3vw;
  border-right: 1px solid rgba(255,255,255,.11);
}
.hero-bottom-services > div:last-child { border-right: 0; }
.hero-bottom-services > div > div {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
}
.hero-bottom-services b {
  flex: 0 0 auto;
  margin: 0;
  color: var(--hero-gold);
  font: 600 11px/1 Montserrat, sans-serif;
  letter-spacing: .12em;
}
.hero-bottom-services strong { margin: 0; color: #fff; font-size: 16px; font-weight: 600; }
.hero-bottom-services span { color: rgba(255,255,255,.5); font-size: 12px; line-height: 1.4; }

@media (min-width: 1041px) {
  .wp-hero-copy-v3 {
    left: clamp(150px, calc(50vw - 500px), 360px);
  }
  .hero-cta-block {
    right: clamp(150px, calc(50vw - 500px), 360px);
  }
}

@media (max-width: 1040px) and (min-width: 821px) {
  .site-header nav { gap: 22px; margin-right: 22px; }
  .wp-hero-copy-v3 { left: 11.5vw; width: 54vw; }
  .wp-hero-headline-v3 strong { font-size: clamp(63px, 7vw, 82px); }
  .hero-cta-block { right: 11vw; width: 35vw; }
  .hero .hero-description { font-size: 18px; }
}

@media (max-width: 820px) {
  .site-header {
    height: 82px;
    padding: 0 22px;
    background: linear-gradient(180deg, rgba(4,5,6,.92), transparent);
  }
  .site-header .brand { width: 154px; height: 45px; }
  .site-header .brand img { width: 154px; visibility: visible; }
  .site-header nav,
  .site-header .header-cta { display: none; }
  .menu-button {
    display: flex;
    width: 34px;
    height: 28px;
    padding: 2px 0;
  }
  .menu-button span { height: 1px; }
  .menu-open header.site-header nav {
    display: flex;
    top: 82px;
    padding: 26px 24px 30px;
    background: rgba(6,7,8,.98);
  }
  .hero {
    min-height: 900px;
    height: 100svh;
    max-height: 980px;
    background-color: #121314;
    background-image: none;
  }
  .hero::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    z-index: 0;
    background: #121314 url("assets/hero-wall-v2.webp") center 42% / cover no-repeat;
    filter: brightness(1.52) contrast(.93) saturate(1.02);
    transform: translateZ(0) scale(1.002);
    pointer-events: none;
  }
  .hero::after { display: none; }
  .hero-shade {
    background: linear-gradient(180deg, rgba(2,3,4,.07) 0%, transparent 18%, transparent 76%, rgba(2,3,4,.1) 100%);
  }
  .wp-hero-copy-v3 {
    top: 160px;
    left: 27px;
    width: calc(100% - 54px);
    transform: none;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
  .wp-hero-copy-v3::before,
  .wp-hero-copy-v3::after,
  .wp-hero-headline-v3::before,
  .wp-hero-headline-v3::after { content: none !important; display: none !important; }
  .wp-hero-copy-v3,
  .wp-hero-headline-v3,
  .wp-hero-headline-v3 > .wp-headline-lead,
  .wp-hero-headline-v3 strong {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  .wp-hero-intro-v3 {
    margin-bottom: 24px;
    font-size: 8px;
    letter-spacing: .18em;
  }
  .wp-hero-headline-v3 > .wp-headline-lead {
    margin: 0 0 15px 3px;
    font-size: clamp(25px, 7.2vw, 30px);
  }
  .wp-hero-headline-v3 strong {
    font-size: clamp(60px, 17.2vw, 70px);
    line-height: .94;
  }
  .wp-hero-headline-image {
    width: calc(100% + 8px);
    max-width: 360px;
    margin: -12px 0 0 -26px;
  }
  .wp-hero-headline-v3 > .wp-headline-lead::before,
  .wp-glow-line::before { opacity: .96; }
  .wp-hero-headline-v3 > .wp-headline-lead::after,
  .wp-glow-line::after { opacity: .84; }
  .wp-hero-headline-v3 strong::before {
    content: none;
    display: none;
  }
  .hero-cta-block {
    top: auto;
    right: 27px;
    bottom: 285px;
    width: calc(100% - 54px);
    padding: 4px 0 4px 20px;
    transform: none;
  }
  .hero-kicker { margin-bottom: 12px; font-size: 8px; }
  .hero .hero-description {
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.6;
  }
  .hero-actions { gap: 7px; }
  .hero-work-button,
  .hero-contact-button {
    min-height: 46px;
    padding: 0 8px;
    font-size: 13px;
  }
  .scroll-cue { display: none; }
  .hero-bottom-services {
    height: 142px;
    padding: 0 8px;
  }
  .hero-bottom-services > div {
    gap: 7px;
    padding: 0 7px;
  }
  .hero-bottom-services > div > div { gap: 4px; }
  .hero-bottom-services b { font-size: 9px; }
  .hero-bottom-services strong { font-size: 14px; }
  .hero-bottom-services span { font-size: 9px; }
}

@media (max-width: 390px) {
  .wp-hero-copy-v3 { top: 150px; }
  .wp-hero-headline-v3 strong { font-size: clamp(58px, 17.2vw, 67px); }
  .hero .hero-description br { display: block; }
  .hero-bottom-services span { display: none; }
}