/* Hero — architectural composition, aligned to the site's 1,280px grid. */
.hero {
  position: relative;
  overflow: hidden;
  background: #111211;
  color: #fff;
}
.hero-layout {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 65px;
  min-height: 686px;
  padding-block: 30px;
  align-items: center;
}
.hero-copy { padding: 25px 0 34px; min-width: 0; }
.hero-copy > .eyebrow {
  margin-bottom: 30px;
  font-size: 9px;
  letter-spacing: .16em;
  color: #deded6;
}
.hero h1 {
  max-width: none;
  margin-bottom: 28px;
  font-size: clamp(60px, 5.7vw, 84px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.06em;
}
.hero-title-line { display: block; color: #f6f5ef; }
.hero-title-accent { color: #ff743c; }
.hero-description {
  max-width: 405px;
  margin-bottom: 31px;
  color: #b9bcb2;
  font-size: 15px;
  line-height: 1.85;
}
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 23px; }
.hero-actions > .button { padding: 18px 22px; font-size: 12px; gap: 23px; }
.hero-call { display: flex; align-items: center; gap: 11px; }
.hero-call > .icon { width: 20px; height: 20px; color: #ff8a57; }
.hero-call > span { display: flex; flex-direction: column; gap: 3px; font-size: 8px; letter-spacing: .13em; color: #92978c; }
.hero-call strong { font-size: 13px; letter-spacing: 0; font-weight: 500; color: #eceee5; }
.hero-assurance {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 30px;
  font-size: 10px;
  color: #8f9488;
}
.hero-assurance > .icon { width: 19px; height: 19px; color: #bfc4b6; }
.hero-assurance strong { color: #c8cec0; font-weight: 500; margin-right: 5px; }
.hero-media {
  position: relative;
  min-width: 0;
  height: 626px;
  align-self: stretch;
  background: #3d4237;
}
.hero-image-wrap { position: absolute; inset: 0; overflow: hidden; }
.hero-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 57%; transform: scale(1.025); }
.hero-media-work .hero-photo,
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.hero-media-work .hero-image-wrap::before {
  content: '';
  position: absolute;
  inset: -25px;
  background: url('assets/client-work-poster.webp') center / cover;
  filter: blur(24px) brightness(.5);
}
.hero-media-work .hero-photo { transform: none; animation: none; }
.hero-video { opacity: 0; transition: opacity .3s ease; }
.hero-media-work.has-video .hero-video { opacity: 1; }
.hero-video-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #ffffff42;
  background: #171e17b8;
  color: #fff;
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.hero-video-toggle[hidden] { display: none; }
.hero-video-toggle:hover { background: #ff743c; color: #111211; }
.hero-video-toggle:focus-visible { outline: 2px solid #ff743c; outline-offset: 4px; }
.hero-video-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; }
.hero-video-toggle .hero-video-play { fill: currentColor; stroke: none; }
.hero-video-toggle .hero-video-pause { display: none; }
.hero-video-toggle.is-playing .hero-video-play { display: none; }
.hero-video-toggle.is-playing .hero-video-pause { display: block; }
.hero-media-work .hero-project { gap: 16px; }
.hero-media-work .hero-project > img { width: 64px; height: 76px; }
.hero-media-work .hero-project-copy { gap: 6px; }
.hero-media-work .hero-project-copy > strong { font-size: 17px; }
.hero-image-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #07100d36, transparent 30%, transparent 55%, #0b130c69);
}
.hero-image-label {
  position: absolute;
  top: 24px;
  left: 25px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  background: #171e17b8;
  backdrop-filter: blur(10px);
  font-size: 7px;
  letter-spacing: .14em;
  color: #f4f4eb;
}
.hero-image-corner { position: absolute; top: 24px; right: 24px; width: 30px; height: 30px; border-top: 1px solid #fff8; border-right: 1px solid #fff8; }
.hero-project {
  position: absolute;
  bottom: 42px;
  left: -35px;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 407px;
  padding: 17px;
  background: #f8f7f2;
  color: #1b201a;
  box-shadow: 0 10px 45px #0002;
  transition: transform .25s;
}
.hero-project:hover { transform: translateY(-4px); }
.hero-project > img { width: 87px; height: 109px; object-fit: cover; object-position: 62% center; flex-shrink: 0; }
.hero-project-copy { display: flex; flex-direction: column; gap: 10px; }
.hero-project-copy > small { color: #71776b; font-size: 7px; letter-spacing: .1em; }
.hero-project-copy > strong { font-family: var(--heading); font-size: 18px; font-weight: 600; letter-spacing: -.035em; line-height: 1.4; }
.hero-project-copy > span { font-size: 10px; color: #74796e; }
.hero-project-arrow { display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; background: var(--orange); align-self: flex-end; flex-shrink: 0; }
.hero-project-arrow > .icon { width: 15px; height: 15px; }
.hero-photo-credit { position: absolute; bottom: 15px; right: 19px; color: #eef0e4; font-size: 6px; letter-spacing: .18em; }
.hero-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  padding-block: 21px;
  border-top: 1px solid #ffffff1c;
  color: #9ba191;
  font-size: 10px;
}
.hero-footer > span { display: flex; align-items: center; gap: 9px; }
.hero-footer .icon { width: 14px; height: 14px; color: #bdc4b2; }
.hero-footer i { font-style: normal; color: #f77c40; margin-inline: 7px; }
.hero-footer > a { display: flex; align-items: center; gap: 25px; color: #cbd0c2; }
.hero-footer > a > span { font-size: 18px; line-height: 1; }

@media (min-width: 1700px) {
  .hero-layout { grid-template-columns: 1fr 1.08fr; min-height: 735px; padding-block: 35px; }
  .hero-media { height: 665px; }
}
@media (max-width: 1200px) {
  .hero-layout { gap: 44px; grid-template-columns: 1fr 1fr; min-height: 640px; }
  .hero h1 { font-size: clamp(55px, 6.05vw, 74px); }
  .hero-description { max-width: 350px; font-size: 14px; }
  .hero-media { height: 580px; }
  .hero-project { width: 365px; left: -22px; gap: 15px; }
  .hero-project-copy > strong { font-size: 16px; }
  .hero-project > img { width: 75px; height: 99px; }
  .hero-call { display: none; }
}
@media (max-width: 1000px) {
  .hero-layout { gap: 35px; min-height: 620px; }
  .hero h1 { font-size: clamp(47px, 6.05vw, 60px); }
  .hero-copy > .eyebrow { font-size: 7px; letter-spacing: .11em; gap: 9px; }
  .hero-copy > .eyebrow .eyebrow-line { width: 19px; }
  .hero-description { font-size: 13px; }
  .hero-media { height: 560px; }
  .hero-project { width: 320px; padding: 13px; gap: 13px; bottom: 34px; left: -17px; }
  .hero-project-copy > strong { font-size: 15px; }
  .hero-project-copy > small { font-size: 6px; }
  .hero-project > img { width: 63px; height: 93px; }
  .hero-project-arrow { width: 28px; height: 28px; }
  .hero-image-label { top: 18px; left: 17px; font-size: 6px; }
  .hero-image-corner { top: 18px; right: 17px; width: 22px; height: 22px; }
  .hero-assurance { font-size: 9px; gap: 8px; }
  .hero-footer { font-size: 9px; }
}
@media (max-width: 760px) {
  .hero-layout { display: flex; flex-direction: column; align-items: stretch; min-height: 0; gap: 35px; padding-top: 44px; padding-bottom: 24px; }
  .hero-copy { padding: 0; }
  .hero-copy > .eyebrow { font-size: 8px; gap: 11px; margin-bottom: 26px; letter-spacing: .13em; }
  .hero-copy > .eyebrow .eyebrow-line { width: 23px; }
  .hero h1 { font-size: clamp(47px, 11.8vw, 77px); line-height: 1.09; margin-bottom: 24px; letter-spacing: -.055em; }
  .hero-description { max-width: 410px; margin-bottom: 24px; font-size: 14px; line-height: 1.8; }
  .hero-actions > .button { font-size: 12px; padding: 17px 20px; gap: 29px; min-height: 54px; }
  .hero-assurance { margin-top: 23px; font-size: 10px; gap: 10px; }
  .hero-assurance > .icon { width: 18px; height: 18px; }
  .hero-assurance strong { margin-right: 3px; }
  .hero-media { height: 365px; width: 100%; }
  .hero-video-toggle { top: 12px; right: 12px; }
  .hero-media-work .hero-project > img { width: 54px; height: 64px; }
  .hero-media-work .hero-project-copy > strong { font-size: 15px; }
  .hero-photo { object-position: center 57%; }
  .hero-image-label { left: 18px; top: 18px; font-size: 6px; padding: 9px 11px; }
  .hero-image-corner { top: 18px; right: 18px; }
  .hero-project { left: 16px; right: 16px; bottom: 31px; width: auto; padding: 13px; gap: 14px; }
  .hero-project > img { width: 64px; height: 83px; }
  .hero-project-copy > small { font-size: 6px; }
  .hero-project-copy > strong { font-size: 16px; line-height: 1.35; }
  .hero-project-copy > span { font-size: 9px; }
  .hero-project-copy { gap: 7px; }
  .hero-project-arrow { width: 28px; height: 28px; }
  .hero-photo-credit { right: 16px; bottom: 12px; font-size: 5px; }
  .hero-footer { padding: 19px 0 22px; font-size: 8px; align-items: flex-start; }
  .hero-footer > span { flex-wrap: wrap; gap: 5px; max-width: 235px; line-height: 1.8; }
  .hero-footer .icon { width: 12px; height: 12px; }
  .hero-footer i { margin-inline: 3px; }
  .hero-footer > a { font-size: 0; gap: 0; padding-top: 3px; }
  .hero-footer > a > span { font-size: 22px; }
}
@media (max-width: 360px) {
  .hero-copy > .eyebrow { font-size: 7px; letter-spacing: .08em; }
  .hero h1 { font-size: 43px; }
  .hero-description { font-size: 13px; }
  .hero-media { height: 330px; }
  .hero-project { left: 12px; right: 12px; padding: 11px; gap: 10px; }
  .hero-project > img { width: 50px; height: 77px; }
  .hero-project-copy > strong { font-size: 14px; }
  .hero-project-copy > small { font-size: 5px; }
  .hero-project-arrow { width: 24px; height: 24px; }
  .hero-assurance { font-size: 9px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-photo { animation: interior-drift 24s ease-in-out infinite alternate; }
  .hero-copy > .eyebrow { animation: enter .7s .05s both; }
  .hero-title-line { animation: enter .9s .12s both; }
  .hero-title-line:nth-child(2) { animation-delay: .22s; }
  .hero-title-line:nth-child(3) { animation-delay: .32s; }
  .hero-description { animation: enter .9s .4s both; }
  .hero-actions, .hero-assurance { animation: enter .9s .5s both; }
  .hero-project { animation: enter 1s .55s both; }
  @keyframes interior-drift { from { transform: scale(1.025); } to { transform: scale(1.08); } }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo { transform: none; }
  .hero-video { transition: none; }
}