/* Hero only. Existing header, global design system and subsequent sections are untouched. */
.architecture-hero {
  height:auto; min-height:0; max-height:none;
  padding:128px 5% 52px; background:#24262b; color:#fff;
}
.architecture-hero .ah-stage {
  position:relative; isolation:isolate; width:100%;
  height:clamp(440px,42.1875vw,810px); overflow:hidden;
  background:#202123; touch-action:pan-y;
}
.architecture-hero .ah-stage:focus-visible {outline:2px solid #ba7d63;outline-offset:6px}
.architecture-hero .ah-photographs,.architecture-hero .ah-image-layer,
.architecture-hero .ah-image-layer picture {position:absolute;inset:0}
.architecture-hero .ah-image-layer img {width:100%;height:100%;object-fit:contain;object-position:center}
.architecture-hero .ah-readability {position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#11131535,transparent 58%)}
.architecture-hero .ah-copy {position:absolute;top:12%;left:6%;width:57%;max-width:760px;z-index:2}
.architecture-hero .ah-eyebrow {color:#d9d9d7;font:500 12px/1.6 var(--sans);letter-spacing:.15em;margin:0 0 21px}
.architecture-hero .ah-title {color:#fff;font:700 clamp(42px,4.6vw,88px)/1.04 var(--sans);letter-spacing:-.055em;min-height:2.08em;margin:0}
.architecture-hero .ah-title span {display:block}
.architecture-hero .ah-description {color:#e4e3de;font:400 16px/1.7 var(--sans);max-width:395px;margin:25px 0 0}
.architecture-hero .ah-cta {display:inline-flex;align-items:center;gap:28px;min-height:48px;border-bottom:1px solid #e6ddd0;color:#fff;font:500 12px/1.5 var(--sans);letter-spacing:.08em;padding:8px 0;margin-top:22px}
.architecture-hero .ah-cta svg {width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .2s}
.architecture-hero .ah-cta:hover svg {transform:translateX(5px)}
.architecture-hero .ah-cta:focus-visible,.architecture-hero .ah-controls button:focus-visible {outline:2px solid #dfaa90;outline-offset:5px}
.architecture-hero .ah-controls {position:absolute;left:6%;right:4%;bottom:25px;z-index:3;display:flex;justify-content:space-between;align-items:end;gap:25px}
.architecture-hero .ah-indicators {display:flex;gap:15px;align-items:end}
.architecture-hero .ah-indicators button {display:flex;flex-direction:column;align-items:start;justify-content:end;width:78px;height:100px;padding:0;background:none;border:0;color:#d0d0cc;cursor:pointer;text-align:left}
.architecture-hero .ah-indicators button>span {font:400 22px/1.1 var(--sans);letter-spacing:-.05em;display:block;padding:6px 0 13px;transition:color .2s}
.architecture-hero .ah-indicators button[aria-pressed="true"]>span {font-size:64px;font-weight:500;color:#fff}
.architecture-hero .ah-indicators i {height:2px;width:100%;display:block;background:#d4d4ce55}
.architecture-hero .ah-indicators button[aria-pressed="true"] i {background:#b67459}
.architecture-hero .ah-arrows {display:flex;gap:10px}
.architecture-hero .ah-arrows button {width:48px;height:48px;display:grid;place-items:center;border:1px solid #d8d8cf60;background:#20212338;color:#fff;cursor:pointer;transition:background .2s,border-color .2s}
.architecture-hero .ah-arrows button:hover {background:#b6745944;border-color:#d2a08b}
.architecture-hero .ah-arrows svg {width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.3}
.architecture-hero .ah-controls button[aria-disabled="true"] {cursor:progress}
@media(max-width:1100px) {
  .architecture-hero {padding-top:120px;padding-bottom:38px}
  .architecture-hero .ah-copy {top:9%;left:5%;width:60%}
  .architecture-hero .ah-eyebrow {font-size:12px;margin-bottom:17px}
  .architecture-hero .ah-description {font-size:14px;max-width:340px;margin-top:20px}
  .architecture-hero .ah-cta {font-size:12px;margin-top:15px;gap:20px}
  .architecture-hero .ah-controls {left:5%;bottom:20px}
  .architecture-hero .ah-indicators button {height:78px;width:62px}
  .architecture-hero .ah-indicators button[aria-pressed="true"]>span {font-size:50px}
}
@media(max-width:767px) {
  .architecture-hero {padding:104px 5% 30px}
  .architecture-hero .ah-stage {height:clamp(640px,calc(100svh - 142px),760px)}
  .architecture-hero .ah-photographs {bottom:78px}
  .architecture-hero .ah-image-layer img {object-position:center bottom}
  .architecture-hero .ah-readability {background:linear-gradient(180deg,#20212318,transparent 55%)}
  .architecture-hero .ah-copy {top:30px;left:22px;right:22px;width:auto;max-width:none}
  .architecture-hero .ah-eyebrow {font-size:12px;letter-spacing:.12em;line-height:1.6;margin-bottom:16px;max-width:280px}
  .architecture-hero .ah-title {font-size:clamp(36px,10.4vw,44px);line-height:1.06;letter-spacing:-.045em;min-height:3.18em;max-width:380px}
  .architecture-hero .ah-description {font-size:14px;line-height:1.65;margin-top:15px;max-width:315px;min-height:4.95em}
  .architecture-hero .ah-cta {font-size:12px;letter-spacing:.07em;min-height:44px;margin-top:10px;gap:18px;padding:6px 0}
  .architecture-hero .ah-cta svg {width:20px;height:20px}
  .architecture-hero .ah-controls {left:22px;right:18px;bottom:18px;gap:14px;align-items:end}
  .architecture-hero .ah-indicators {gap:9px}
  .architecture-hero .ah-indicators button {width:45px;height:58px}
  .architecture-hero .ah-indicators button>span {font-size:16px;padding-bottom:10px}
  .architecture-hero .ah-indicators button[aria-pressed="true"]>span {font-size:37px}
  .architecture-hero .ah-arrows {gap:7px}
  .architecture-hero .ah-arrows button {width:44px;height:44px}
  .architecture-hero .ah-arrows svg {width:21px;height:21px}
}
@media(prefers-reduced-motion:reduce) {
  .architecture-hero * {transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
/* Suppress the superseded hero's pseudo-element overlay on these image layers. */
.architecture-hero .ah-image-layer::after {content:none}
@media(max-width:767px) {
  .architecture-hero .ah-image-layer img {
    position:absolute;bottom:0;left:0;width:100%;height:100%;
    mask-image:linear-gradient(to bottom,transparent max(0px,calc(100% - 120vw)),#000 max(60px,calc(100% - 120vw + 60px)));
  }
}