:root {
  --midnight: #07131a;
  --charcoal: #111b20;
  --ivory: #f4f0e9;
  --stone: #dad7d2;
  --copper: #c47a3a;
  --bronze: #8c6239;
  --white: #f6f5f2;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--white); background: var(--midnight); font-family: "Montserrat", sans-serif; font-weight: 300; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, p {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.site-header {
  position: absolute; z-index: 10; top: 0; left: 0; width: 100%; height: 88px;
  display: flex; align-items: center; gap: 42px; padding: 0 4.2%;
  background: linear-gradient(to bottom, rgba(4,11,15,.9), transparent);
}
.site-header.is-scrolled {
  position: fixed; height: 72px; background: rgba(5,14,19,.9);
  border-bottom: 1px solid rgba(196,122,58,.22);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  animation: header-in .55s ease both;
}
@keyframes header-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.brand { display: inline-flex; align-items: center; min-width: 235px; }
.brand-logo { display: block; width: 245px; height: auto; }
.main-nav { margin-left: auto; display: flex; align-items: center; gap: 34px; }
.main-nav a { position: relative; padding: 12px 0; text-transform: uppercase; font-size: 9px; letter-spacing: 1.5px; font-weight: 500; transition: color .35s ease; }
.main-nav a:hover { color: #efb57f; }
.main-nav a::after { content: ""; position: absolute; left: 0; bottom: 3px; width: 0; height: 1px; background: var(--copper); transition: width .25s; }
.main-nav a:hover::after, .main-nav a.active::after { width: 100%; }
.menu-toggle { display: none; }

/* Always-visible social touchpoint: intentionally compact so the primary
   navigation still reads as the header's anchor. */
.header-social-links {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: -21px;
  padding-left: 17px;
  border-left: 1px solid rgba(244,241,234,.19);
}
.header-social-links a {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(244,241,234,.21);
  border-radius: 50%;
  color: rgba(244,241,234,.88);
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.015));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(7px) saturate(1.06);
  backdrop-filter: blur(7px) saturate(1.06);
  transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
}
.header-social-links a:hover,
.header-social-links a:focus-visible {
  color: #fff;
  border-color: rgba(225,151,91,.9);
  background: rgba(196,122,58,.5);
  transform: translateY(-1px);
}
.header-social-links svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.header-social-links .social-dot { fill: currentColor; stroke: none; }

.button { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: space-between; gap: 40px; border: 1px solid var(--copper); padding: 14px 18px; color: #e8a46e; font-size: 9px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; transition: background .25s, color .25s, transform .25s, box-shadow .25s; }
.button:hover { color: var(--midnight); background: var(--copper); }
.button:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(196,122,58,.15); }
.button b { font-size: 17px; font-weight: 300; }
.button-small { gap: 12px; padding: 12px 17px; white-space: nowrap; }

.hero { position: relative; height: min(760px, 100vh); min-height: 610px; overflow: hidden; background: url("assets/projects/verified/brentwood-california-4k.webp") center / cover no-repeat; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,10,15,.96) 0%, rgba(2,10,15,.72) 28%, rgba(2,10,15,.06) 64%); }
.hero-shade { position: absolute; z-index: 1; inset: 0; background: linear-gradient(0deg, rgba(3,12,17,.5), transparent 45%); }
.hero-copy { position: absolute; z-index: 2; left: 4.2%; top: 51%; transform: translateY(-43%); width: min(445px, 91.6%); }
.hero-copy.reveal { transform: translateY(calc(-43% + 12px)); }
.hero-copy.reveal.visible { transform: translateY(-43%); }
/* Keep the home hero copy aligned from the first paint; the intro animation
   should reveal it, not make it hop after the page settles. */
.hero-copy.reveal,
.hero-copy.reveal.visible { opacity: 1; transform: translateY(-43%); transition: none; }
.eyebrow, .section-kicker { text-transform: uppercase; letter-spacing: 2px; font-weight: 500; font-size: 9px; }
.eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 24px; }
.eyebrow span { display: inline-block; width: 22px; height: 1px; background: var(--copper); }
h1 { margin: 0 0 17px; text-transform: uppercase; font-size: clamp(38px, 4.2vw, 61px); line-height: 1.2; letter-spacing: clamp(4px, .56vw, 8px); font-weight: 300; text-wrap: balance; }
.lede { width: min(390px, 100%); font-size: 12px; line-height: 1.8; margin-bottom: 25px; color: #ddd; text-wrap: pretty; }
.scroll-cue { position: absolute; z-index: 3; right: 4.2%; bottom: 25px; display: flex; align-items: center; gap: 9px; text-transform: uppercase; letter-spacing: 2px; font-size: 8px; }
.scroll-cue span { width: 25px; height: 1px; background: var(--copper); }

.section-light { background: var(--ivory); color: #22282c; }
.about { min-height: 490px; display: grid; grid-template-columns: 31% 22% 47%; grid-template-rows: 1fr 105px; }
.about-copy { grid-row: 1 / 3; padding: 48px 7.5%; align-self: center; }
.eyebrow.dark { color: #343b3e; }
.about h2, .partners h2, .cta h2 { text-transform: uppercase; font-weight: 300; letter-spacing: 1.4px; line-height: 1.45; }
.about h2 { margin: 0 0 34px; font-size: 25px; }
.about-copy > p:not(.eyebrow) { font-size: 11px; line-height: 1.85; max-width: 265px; margin-bottom: 34px; }
.text-link { padding-bottom: 7px; border-bottom: 1px solid var(--copper); text-transform: uppercase; font-size: 9px; font-weight: 500; letter-spacing: 1.5px; }
.text-link b { color: var(--copper); margin-left: 10px; font-size: 14px; }
.portrait-card { position: relative; z-index: 2; align-self: end; height: 390px; margin-right: -14px; overflow: hidden; background: linear-gradient(145deg, #aaa299, #e7e1d8 57%, #aaa198); box-shadow: 0 0 0 7px var(--ivory); }
.portrait-silhouette { position: absolute; inset: 0; background: radial-gradient(circle at 50% 24%, rgba(255,255,255,.55), transparent 26%); }
.portrait-head { position: absolute; left: 33%; top: 14%; width: 35%; aspect-ratio: .82; border-radius: 48% 48% 43% 43%; background: linear-gradient(120deg, #2f211b 8%, #6f4b35 40%, #b37b55 49%, #2d211e 83%); box-shadow: 0 0 0 8px rgba(49,34,26,.5); }
.portrait-head::after { content: ""; position: absolute; inset: 15% 16% 0; border-radius: 50% 50% 45% 45%; background: linear-gradient(135deg, #c99172, #f0b993 55%, #9f6548); }
.portrait-body { position: absolute; left: 14%; right: 14%; bottom: -12%; height: 65%; border-radius: 48% 48% 0 0; background: linear-gradient(110deg, #11161a, #24282c 55%, #0b1013); transform: skew(-3deg); }
.portrait-caption { position: absolute; z-index: 2; left: 16px; bottom: 14px; padding: 9px 13px; color: white; background: rgba(8,16,20,.8); text-transform: uppercase; font-size: 8px; letter-spacing: 1px; }
.portrait-caption small { display: block; margin-top: 4px; color: #ccc; }
.about-image { background-image: linear-gradient(rgba(4,12,16,.08), rgba(4,12,16,.18)), url("assets/projects/verified/palm-beach-interior-4k.webp"); background-size: cover; background-position: center 46%; }
.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--ivory); }
.about > .principles { grid-column: 2 / 4; min-height: 105px; }
.principles div { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; border-right: 1px solid #d8d1c8; text-align: center; text-transform: uppercase; font-size: 7px; line-height: 1.5; letter-spacing: .5px; }
.principles span { max-width: 125px; padding: 0 8px; }
.principles i { color: var(--copper); font-size: 25px; font-style: normal; font-family: serif; }
.brand-icon { display: block; width: 38px; height: 38px; object-fit: contain; transition: transform .55s cubic-bezier(.22,.61,.36,1), filter .55s ease; }
.principles div:hover .brand-icon, .service-grid article:hover .brand-icon, .goal-grid article:hover .brand-icon { transform: translateY(-3px); filter: brightness(1.12); }
.principles .brand-icon { width: 30px; height: 30px; }

.section-dark { background: radial-gradient(circle at 50% 20%, #172127, var(--midnight) 70%); }
.services { padding: 48px 4.2% 54px; }
.section-kicker { margin: 0 0 28px; }
.service-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.service-grid article { min-height: 230px; padding: 0 32px; border-right: 1px solid rgba(196,122,58,.55); }
.service-grid article:first-child { padding-left: 0; }
.service-grid article:last-child { border: 0; }
.service-grid i { display: block; height: 42px; color: var(--copper); font-family: serif; font-style: normal; font-size: 32px; }
.service-grid .brand-icon { width: 42px; height: 42px; margin-bottom: 7px; }
.service-grid h3 { text-transform: uppercase; font-weight: 400; line-height: 1.5; letter-spacing: 1.5px; font-size: 11px; }
.service-grid p { min-height: 54px; color: #c1c4c5; font-size: 9px; line-height: 1.7; }
.service-grid a { color: var(--copper); font-size: 9px; }

.projects { padding-top: 36px; overflow: hidden; }
.section-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 4.2% 22px; }
.section-heading .section-kicker { margin: 0; }
.slider-controls { display: flex; gap: 9px; }
.slider-controls button { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #c8c2ba; background: transparent; color: #7b7168; cursor: pointer; font-size: 0; }
.slider-controls button::before { content: ""; display: block; width: 7px; height: 7px; margin: auto; border-top: 1px solid currentColor; border-right: 1px solid currentColor; }
.slider-controls .slide-prev::before { transform: rotate(-135deg) translate(-1px, -1px); }
.slider-controls .slide-next::before { transform: rotate(45deg) translate(-1px, -1px); }
.project-track { display: flex; transition: transform .75s cubic-bezier(.22,.61,.36,1); }
.project-card { position: relative; flex: 0 0 33.333%; height: 305px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 22px 20px; border-right: 3px solid var(--ivory); color: white; overflow: hidden; }
.project-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(2,10,15,.9), transparent 58%); }
.project-card img { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.22,.61,.36,1), filter .7s ease; }
.project-card:hover img { transform: scale(1.03); filter: saturate(1.03); }
.project-card > div, .project-card > .project-arrow { position: relative; z-index: 2; }
.project-card h3 { margin: 0 0 5px; text-transform: uppercase; letter-spacing: 1.5px; font-size: 12px; font-weight: 400; }
.project-card p { margin: 0; text-transform: uppercase; letter-spacing: .7px; font-size: 8px; }
.project-arrow { position: relative; display: inline-block; width: 31px; height: 31px; flex: 0 0 31px; border: 1px solid rgba(255,255,255,.48); border-radius: 7px; background: rgba(8,20,27,.62); box-shadow: 0 6px 16px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.12); transition: background .35s ease, border-color .35s ease, transform .35s ease; }
.project-arrow::before { content: ""; position: absolute; width: 10px; height: 10px; top: 10px; left: 9px; border-top: 1.5px solid var(--copper); border-right: 1.5px solid var(--copper); }
.project-arrow::after { content: ""; position: absolute; width: 13px; height: 1.5px; top: 14px; left: 8px; background: var(--copper); transform: rotate(-45deg); transform-origin: center; }
.project-card:hover .project-arrow, .project-card:focus-visible .project-arrow { background: rgba(181,101,47,.2); border-color: rgba(218,138,79,.8); transform: translate(2px,-2px); }
.inline-arrow { position: relative; display: inline-block; width: 17px; height: 17px; margin-left: 5px; vertical-align: -4px; border: 1px solid rgba(255,255,255,.42); border-radius: 4px; background: rgba(8,20,27,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.inline-arrow::before { content: ""; position: absolute; width: 6px; height: 6px; top: 5px; left: 5px; border-top: 1px solid var(--copper); border-right: 1px solid var(--copper); }
.inline-arrow::after { content: ""; position: absolute; width: 8px; height: 1px; top: 8px; left: 4px; background: var(--copper); transform: rotate(-45deg); transform-origin: center; }
.partner-link:hover .inline-arrow, .text-link:hover .inline-arrow, .system-card-link:hover .inline-arrow { border-color: rgba(218,138,79,.8); background: rgba(181,101,47,.2); }

/* Keep the mobile menu viewport-bound even while the header is animating or
   the page is scrolled, and keep it above every page layer. */
@media (max-width: 1120px) {
  .site-header.is-scrolled { transform: none !important; }
  .main-nav { z-index: 1000; }
  .main-nav.open { z-index: 1000; }
  .menu-toggle { z-index: 1001; }
}

.partners { min-height: 310px; display: grid; grid-template-columns: minmax(230px, 28%) 1fr; align-items: stretch; gap: clamp(30px, 4vw, 70px); padding: 48px 4.2%; }
.partners .section-kicker { margin-bottom: 12px; color: #aaa; font-size: 7px; }
.partners h2 { margin: 0; font-size: 17px; }
.partners-intro { display: flex; flex-direction: column; justify-content: center; }
.partners-intro > p:last-child { max-width: 290px; margin: 22px 0 0; color: #aeb3b5; font-size: 10px; line-height: 1.7; }
.partner-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.partner-card { position: relative; min-height: 214px; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px clamp(18px, 2.2vw, 34px); color: #f4f1eb; border-left: 1px solid rgba(255,255,255,.18); overflow: hidden; transition: background-color .35s ease, color .35s ease; }
.partner-card::before { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--copper); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.partner-card:hover, .partner-card:focus-visible { background: rgba(255,255,255,.055); color: white; }
.partner-card:hover::before, .partner-card:focus-visible::before { transform: scaleX(1); }
.partner-card strong { display: block; font-size: clamp(23px, 2.35vw, 35px); font-weight: 500; letter-spacing: .06em; line-height: 1; }
.partner-category { min-height: 30px; margin-top: 13px; color: #abb1b3; font-size: 9px; line-height: 1.55; text-transform: uppercase; letter-spacing: .08em; }
.partner-link { margin-top: 18px; color: var(--copper); font-size: 8px; text-transform: uppercase; letter-spacing: .12em; }

.cta { position: relative; height: 315px; display: flex; align-items: center; background: url("assets/projects/verified/brentwood-glazing-detail-4k.webp") center 42% / cover no-repeat; }
.cta-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,12,17,.97), rgba(3,12,17,.65) 42%, rgba(3,12,17,.05)); }
.cta-copy { position: relative; z-index: 1; margin-left: 4.2%; }
.cta h2 { margin: 0 0 13px; font-size: 24px; }
.cta p { max-width: 370px; color: #d6d6d4; font-size: 10px; line-height: 1.7; margin-bottom: 19px; }

.site-footer { display: grid; grid-template-columns: 1.6fr 1fr 1.4fr 1.4fr; gap: 45px; padding: 38px 4.2%; background: #08131a; border-top: 1px solid rgba(196,122,58,.35); color: #aeb3b5; font-size: 8px; line-height: 1.8; }
.site-footer .brand { color: white; }
.site-footer .brand-logo { width: 210px; }
.site-footer h2 { margin: 0 0 9px; color: white; text-transform: uppercase; font-size: 8px; letter-spacing: 1px; font-weight: 400; }
.site-footer > div > a { display: block; }
.site-footer > div > a:hover { color: var(--copper); }
.site-footer a, .site-footer p { overflow-wrap: normal; }
.site-footer a[href^="mailto:"] { overflow-wrap: anywhere; }

/* Fenestration social links: quiet, architectural line work rather than
   platform-color badges.  The treatment echoes the site's glass motif. */
.social-links { margin-top: 19px; }
.social-links > span,
.menu-social-links > span {
  display: block;
  margin-bottom: 9px;
  color: var(--copper);
  font-size: 8px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.social-links > div { display: flex; align-items: center; gap: 9px; }
.site-footer .social-links a,
.menu-social-link {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(244,241,234,.24);
  border-radius: 50%;
  color: rgba(244,241,234,.92);
  background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 7px 18px rgba(0,0,0,.18);
  -webkit-backdrop-filter: blur(8px) saturate(1.08);
  backdrop-filter: blur(8px) saturate(1.08);
  transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.site-footer .social-links a:hover,
.site-footer .social-links a:focus-visible,
.menu-social-link:hover,
.menu-social-link:focus-visible {
  color: #fff;
  border-color: rgba(225,151,91,.92);
  background: linear-gradient(145deg, rgba(228,157,97,.42), rgba(126,73,38,.27));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 10px 24px rgba(0,0,0,.28);
  transform: translateY(-2px);
}
.social-links svg,
.menu-social-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.social-links .social-dot,
.menu-social-link .social-dot { fill: currentColor; stroke: none; }
.menu-social-links { display: none; }

.reveal { opacity: 0; transform: translateY(12px); transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 1120px) {
  .site-header { height: 76px; padding: 0 28px; z-index: 30; }
  .site-header .brand-logo { width: 220px; }
  .main-nav {
    position: fixed; inset: 0; z-index: 20; margin: 0;
    display: flex; flex-direction: column; justify-content: center; gap: 26px;
    background: rgba(5,14,19,.98); opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
  }
  .main-nav.open { opacity: 1; pointer-events: auto; z-index: 20; }
  .main-nav a { font-size: 15px; }
  .menu-toggle { position: relative; z-index: 21; display: block; margin-left: auto; width: 35px; height: 35px; border: 0; background: transparent; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .menu-toggle span { position: absolute; left: 6px; width: 23px; height: 1px; background: white; transition: transform .2s; }
  .menu-toggle span:first-child { top: 13px; }
  .menu-toggle span:last-child { top: 21px; }
  .menu-toggle[aria-expanded="true"] span:first-child { top: 17px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { top: 17px; transform: rotate(-45deg); }
  .header-cta { display: none; }
  .header-social-links { display: none; }
}

@media (max-width: 900px) {
  .slider-controls { display: none; }
  .site-header { height: 75px; z-index: 30; }
  .main-nav { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; justify-content: center; background: rgba(5,14,19,.98); opacity: 0; pointer-events: none; transition: opacity .25s; }
  .main-nav.open { opacity: 1; pointer-events: auto; z-index: 20; }
  .main-nav a { font-size: 15px; }
  .menu-toggle { position: relative; z-index: 21; display: block; margin-left: auto; width: 35px; height: 35px; border: 0; background: transparent; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .menu-toggle span { position: absolute; left: 6px; width: 23px; height: 1px; background: white; transition: transform .2s; }
  .menu-toggle span:first-child { top: 13px; }
  .menu-toggle span:last-child { top: 21px; }
  .menu-toggle[aria-expanded="true"] span:first-child { top: 17px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { top: 17px; transform: rotate(-45deg); }
  .header-cta { display: none; }
  .about { grid-template-columns: 45% 55%; grid-template-rows: auto 340px auto; }
  .about-copy { grid-column: 1 / 3; grid-row: auto; padding: 55px 6%; }
  .portrait-card { grid-column: 1; grid-row: 2; height: 340px; margin: 0; box-shadow: none; }
  .about-image { grid-column: 2; grid-row: 2; }
  .partners { display: block; }
  .partners-intro > p:last-child { max-width: 520px; }
  .partner-logos { margin-top: 36px; }
  .principles { grid-column: 1 / 3; grid-row: 3; min-height: 105px; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .service-grid article { border-bottom: 1px solid rgba(196,122,58,.35); }
  .project-card { flex-basis: 50%; }
}

/* Architectural system design showcase */
.system-showcase {
  position: relative;
  padding: clamp(76px, 8vw, 126px) 4.2% clamp(68px, 7vw, 108px);
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 4%, rgba(196,122,58,.1), transparent 30%),
    linear-gradient(180deg, #06131b 0%, #091820 52%, #06131b 100%);
}

.system-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(220,232,234,.12) 25%);
}

.system-showcase-head,
.system-showcase-grid,
.system-showcase-foot {
  position: relative;
  z-index: 1;
}

.system-showcase-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  align-items: end;
  gap: clamp(40px, 8vw, 130px);
  margin-bottom: clamp(42px, 5vw, 72px);
}

.system-showcase-head h2 {
  margin: 15px 0 0;
  color: #f2eee8;
  font-size: clamp(34px, 4.1vw, 60px);
  font-weight: 300;
  line-height: 1.17;
  letter-spacing: clamp(3px, .48vw, 7px);
  text-transform: uppercase;
}

.system-showcase-head > p {
  max-width: 520px;
  margin: 0 0 3px;
  color: #bdc5c7;
  font-size: 14px;
  line-height: 1.82;
}

.system-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 26px);
}

.system-showcase-card {
  position: relative;
  min-height: clamp(560px, 49vw, 720px);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(215,226,228,.18);
  color: #f5f1eb;
  background: #0b161c;
  transition: transform .65s cubic-bezier(.2,.7,.2,1), border-color .45s ease, box-shadow .65s ease;
}

.system-showcase-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,12,17,.04) 12%, rgba(4,12,17,.18) 42%, rgba(4,12,17,.93) 82%, #07131a 100%);
  transition: opacity .5s ease;
}

.system-showcase-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 18px;
  pointer-events: none;
  border: 1px solid rgba(231,237,237,.16);
  opacity: 0;
  transform: scale(.985);
  transition: opacity .45s ease, transform .65s cubic-bezier(.2,.7,.2,1);
}

.system-showcase-card img {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(1.04) brightness(.84);
  transform: scale(1.015);
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .7s ease;
}

.system-showcase-card--wood img { object-position: 48% center; }
.system-showcase-card--minimal img { object-position: 53% center; }
.system-showcase-card--metal img { object-position: 58% center; }

.system-card-rule {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background: var(--copper);
  transition: height .65s cubic-bezier(.2,.7,.2,1);
}

.system-card-content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: clamp(28px, 3vw, 46px);
}

.system-card-index {
  margin: 0 0 14px;
  color: #d48a50;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.system-card-content h3 {
  margin: 0 0 14px;
  font-size: clamp(20px, 2vw, 29px);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.system-card-content > p:not(.system-card-index) {
  max-width: 420px;
  margin: 0;
  color: #cbd0d1;
  font-size: 13px;
  line-height: 1.68;
}

.system-card-content ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.system-card-content li {
  padding: 8px 10px;
  border: 1px solid rgba(220,229,231,.22);
  color: #d9ddde;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .09em;
  text-transform: uppercase;
  background: rgba(4,12,17,.28);
}

.system-card-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 25px;
  padding-top: 16px;
  border-top: 1px solid rgba(220,229,231,.2);
  color: #e39a64;
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.system-card-link b {
  font-size: 18px;
  font-weight: 300;
  transition: transform .4s ease;
}

.system-showcase-card:hover,
.system-showcase-card:focus-visible {
  transform: translateY(-8px);
  border-color: rgba(196,122,58,.7);
  box-shadow: 0 24px 58px rgba(0,0,0,.3);
}

.system-showcase-card:hover::after,
.system-showcase-card:focus-visible::after { opacity: 1; transform: scale(1); }
.system-showcase-card:hover img,
.system-showcase-card:focus-visible img { transform: scale(1.065); filter: saturate(.94) contrast(1.02) brightness(.92); }
.system-showcase-card:hover .system-card-rule,
.system-showcase-card:focus-visible .system-card-rule { height: 100%; }
.system-showcase-card:hover .system-card-link b,
.system-showcase-card:focus-visible .system-card-link b { transform: translate(3px,-3px); }

.system-showcase-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid rgba(215,226,228,.18);
}

.system-showcase-foot p {
  max-width: 650px;
  margin: 0;
  color: #9fa9ac;
  font-size: 12px;
  line-height: 1.7;
}

@media (max-width: 980px) {
  .system-showcase-grid { grid-template-columns: 1fr; }
  .system-showcase-card { min-height: 590px; }
  .system-showcase-card img { object-position: center 52%; }
}

@media (max-width: 700px) {
  .system-showcase { padding: 68px 24px 62px; }
  .system-showcase-head { grid-template-columns: 1fr; gap: 24px; }
  .system-showcase-head h2 { font-size: clamp(30px, 9vw, 39px); }
  .system-showcase-head > p { font-size: 13px; }
  .system-showcase-card { min-height: 540px; }
  .system-card-content { padding: 28px; }
  .system-showcase-foot { display: block; }
  .system-showcase-foot .text-link { display: inline-block; margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .system-showcase-card,
  .system-showcase-card::after,
  .system-showcase-card img,
  .system-card-rule,
  .system-card-link b { transition: none; }
}

@media (max-width: 620px) {
  .site-header { padding: 0 20px; }
  .brand { min-width: 0; }
  .brand-logo { width: 210px; }
  .hero { height: 720px; background-position: 62% center; }
  .hero::after { background: linear-gradient(90deg, rgba(2,10,15,.91), rgba(2,10,15,.24)), linear-gradient(0deg, rgba(2,10,15,.6), transparent); }
  .hero-copy { left: 20px; right: 20px; top: 44%; width: auto; }
  h1 { font-size: 37px; letter-spacing: 5px; }
  .lede { width: auto; max-width: 340px; }
  .about { display: block; }
  .about-copy { padding: 58px 24px; }
  .portrait-card { display: none; }
  .about-image { height: 300px; }
  .principles { min-height: 185px; grid-template-columns: repeat(2, 1fr); }
  .principles div { padding: 15px; border-bottom: 1px solid #d8d1c8; }
  .services { padding: 48px 24px; }
  .service-grid { display: block; }
  .service-grid article, .service-grid article:first-child { min-height: 0; padding: 25px 0; border-right: 0; }
  .service-grid p { min-height: 0; }
  .section-heading { padding-left: 24px; padding-right: 24px; }
  .project-card { flex-basis: 86%; height: 360px; }
  .partners { display: block; padding: 48px 24px; }
  .partner-logos { grid-template-columns: 1fr; margin-top: 35px; }
  .partner-card { min-height: 185px; border-left: 0; border-top: 1px solid rgba(255,255,255,.18); }
  .partner-card:first-child { border-top: 0; }
  .cta { height: 370px; background-position: 68% center; }
  .cta-copy { margin: 0 24px; }
  .site-footer { grid-template-columns: 1fr 1fr; padding: 40px 24px; gap: 35px 25px; }
  .footer-brand { grid-column: 1 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* About and Projects pages */
.portrait-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.inner-hero { position: relative; min-height: 500px; background-size: cover; background-position: center; }
.inner-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,10,15,.96), rgba(2,10,15,.62) 35%, rgba(2,10,15,.08) 75%); }
.inner-hero-copy { position: absolute; z-index: 1; left: 4.2%; top: 53%; width: min(520px, 91.6%); transform: translateY(-42%); }
.inner-hero-copy.reveal { transform: translateY(calc(-42% + 12px)); }
.inner-hero-copy.reveal.visible { transform: translateY(-42%); }
.inner-hero h1 { font-size: clamp(35px, 4vw, 55px); }
.about-hero { background-image: url("assets/projects/verified/palm-beach-interior-4k.webp"); background-position: center 47%; }
.projects-hero { background-image: url("assets/projects/verified/brentwood-glazing-detail-4k.webp"); }

.story-section { display: grid; grid-template-columns: 36% 24% 40%; min-height: 610px; padding: 26px 0 22px 4.2%; }
.story-copy { padding: 28px 45px 20px 0; align-self: center; }
.story-copy h2 { margin: 0 0 14px; text-transform: uppercase; font-size: 32px; font-weight: 300; line-height: 1.42; letter-spacing: clamp(3px, .5vw, 7px); text-wrap: balance; }
.story-copy p:not(.eyebrow) { font-size: 10px; line-height: 1.9; margin: 19px 0; }
.copper-rule { display: block; width: 42px; height: 1px; background: var(--copper); }
.story-portrait { height: 520px; margin: 0; align-self: center; overflow: hidden; }
.story-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.story-architecture { align-self: center; }
.story-architecture > img { display: block; width: 100%; height: 330px; object-fit: cover; }
.story-architecture .principles { min-height: 105px; }

.center-label { display: flex; justify-content: center; align-items: center; gap: 15px; margin: 0 0 30px; text-transform: uppercase; font-size: 10px; letter-spacing: 3px; }
.center-label span { display: inline-block; width: 35px; height: 1px; background: var(--copper); }
.goals { padding: 28px 4.2% 45px; border-top: 1px solid #d8d1c8; }
.goal-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.goal-grid article { padding: 12px 55px; text-align: center; border-right: 1px solid #d8d1c8; }
.goal-grid article:last-child { border: 0; }
.goal-grid i { color: var(--copper); font-size: 50px; font-style: normal; font-family: serif; }
.goal-grid .goal-icon { width: 54px; height: 54px; margin: 0 auto; }
.goal-grid h3 { min-height: 42px; text-transform: uppercase; font-size: 11px; font-weight: 400; line-height: 1.6; letter-spacing: 2px; }
.goal-grid p { font-size: 9px; line-height: 1.8; }
.team-section { padding: 42px 6% 72px; border-top: 1px solid #d8d1c8; }
.team-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 34px 24px; max-width: 1180px; margin: 0 auto; }
.team-card { grid-column: span 2; text-align: center; }
.team-card:nth-child(1) { grid-column: 2 / span 2; }
.team-card:nth-child(2) { grid-column: 4 / span 2; }
.team-card img { width: 100%; aspect-ratio: .82; object-fit: cover; object-position: 50% 18%; filter: saturate(.88); }
.team-card h3 { margin: 14px auto 8px; padding-bottom: 10px; max-width: 260px; border-bottom: 1px solid var(--copper); text-transform: uppercase; font-size: 12px; font-weight: 400; letter-spacing: 2px; }
.team-card p { margin: 0; text-transform: uppercase; font-size: 8px; letter-spacing: 1.3px; }

@media (max-width: 900px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
  .team-card,
  .team-card:nth-child(1),
  .team-card:nth-child(2) { grid-column: auto; }
  .team-card:nth-child(5) { grid-column: 1 / -1; width: calc(50% - 12px); justify-self: center; }
}
.brand-statement { display: grid; grid-template-columns: 110px 1.4fr 1fr; align-items: center; gap: 45px; padding: 42px 8%; }
.statement-mark { display: block; width: 76px; height: 100px; object-fit: contain; }
.brand-statement h2 { margin: 0; text-transform: uppercase; font-size: 24px; line-height: 1.5; letter-spacing: clamp(3px, .5vw, 7px); font-weight: 300; }
.brand-statement h2 b { color: var(--copper); font-weight: 300; }
.brand-statement p { padding-left: 45px; border-left: 1px solid var(--copper); color: #b9bdbe; font-size: 10px; line-height: 1.8; }

.project-filters { display: flex; gap: 36px; padding: 17px 4.2%; }
.project-filters button { padding: 6px 0; border: 0; border-bottom: 1px solid transparent; background: transparent; color: #363a3c; text-transform: uppercase; font-size: 9px; letter-spacing: .7px; cursor: pointer; }
.project-filters button { transition: color .35s ease, border-color .35s ease; }
.project-filters button:hover { color: var(--copper); }
.project-filters button.active { color: var(--copper); border-color: var(--copper); }
.project-list { background: var(--ivory); }
.project-row { position: relative; display: grid; grid-template-columns: minmax(0, 58%) minmax(340px, 42%); height: clamp(380px, 31vw, 440px); overflow: hidden; opacity: 0; transform: translateX(-28px); transition: opacity 1.05s cubic-bezier(.22,.61,.36,1), transform 1.05s cubic-bezier(.22,.61,.36,1); }
.project-row.reverse { grid-template-columns: minmax(340px, 42%) minmax(0, 58%); transform: translateX(28px); }
.project-row.in-view { opacity: 1; transform: translateX(0); }
.project-row.reverse img { grid-column: 2; }
.project-row.reverse .project-detail { grid-column: 1; grid-row: 1; }
.project-row[hidden] { display: none; }
.project-row > img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; transform: scale(1.01); transition: transform 1.1s cubic-bezier(.22,.61,.36,1), filter .8s ease; }
.project-row[data-category="minimal"] > img { object-position: 50% 78%; }
.project-row[data-category="steel"] > img { object-position: 50% 24%; }
.project-row:hover > img { transform: scale(1.035); filter: saturate(1.035); }
.project-detail { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 42px clamp(34px, 5vw, 72px); }
.dark-panel { color: white; background: var(--midnight); }
.light-panel { color: #292e31; background: var(--ivory); }
.project-detail small { color: var(--copper); text-transform: uppercase; font-size: 8px; letter-spacing: 1px; }
.project-detail h2 { margin: 10px 0 4px; max-width: 100%; text-transform: uppercase; font-size: clamp(16px, 1.65vw, 21px); font-weight: 300; line-height: 1.35; letter-spacing: clamp(1.2px, .2vw, 2.6px); overflow-wrap: normal; text-wrap: balance; transition: color .55s ease; }
.project-row:hover .project-detail h2 { color: #d79258; }
.project-detail h3 { margin: 0; font-size: 10px; font-weight: 300; }
.project-detail > span { width: 25px; height: 1px; margin: 14px 0; background: var(--copper); }
.project-detail p { max-width: 420px; margin: 0 0 18px; font-size: 10px; line-height: 1.75; }
.project-detail a { width: fit-content; color: var(--copper); text-transform: uppercase; font-size: 9px; letter-spacing: 1px; transition: color .35s ease, transform .45s ease; }
.project-detail a:hover { color: #df9a61; transform: translateX(3px); }
.global-reach { display: grid; grid-template-columns: 25% 55% 20%; align-items: center; min-height: 260px; padding: 30px 5%; }
.global-reach small { color: var(--copper); text-transform: uppercase; letter-spacing: 1px; }
.global-reach h2 { margin: 8px 0; text-transform: uppercase; font-size: 22px; font-weight: 300; letter-spacing: clamp(2.5px, .4vw, 5px); line-height: 1.35; }
.global-reach p, .global-reach li { font-size: 9px; line-height: 1.7; }
.global-reach ul { list-style: none; padding: 0; text-transform: uppercase; }
.global-reach li { width: fit-content; outline: none; transition: color .4s ease, transform .4s ease; }
.global-reach li::before { content: "•"; color: var(--copper); padding-right: 10px; transition: color .4s ease, text-shadow .4s ease; }
.global-reach li.is-highlighted { color: #f4f0e9; transform: translateX(3px); }
.global-reach li.is-highlighted::before { color: #f0b27c; text-shadow: 0 0 9px rgba(240,178,124,.7); }
.map-art { position: relative; min-width: 0; height: 240px; }
.map-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.map-grid { fill: none; stroke: rgba(244,240,233,.055); stroke-width: 1; }
.continents { fill: #26333a; stroke: rgba(244,240,233,.18); stroke-width: 1.2; stroke-linejoin: round; transition: fill .6s ease, stroke .6s ease; }
.map-art:hover .continents { fill: #2b3940; stroke: rgba(244,240,233,.25); }
.map-location { cursor: default; outline: none; }
.map-location text { fill: #d8dbdc; font-family: "Montserrat", sans-serif; font-size: 9px; font-weight: 500; letter-spacing: .7px; text-transform: uppercase; opacity: .72; transition: fill .45s ease, opacity .45s ease, transform .45s ease; }
.map-location .location-detail { fill: #90999e; font-size: 7px; font-weight: 300; letter-spacing: .3px; text-transform: none; }
.location-dot { fill: #d88a49; transition: r .45s ease, fill .45s ease; }
.location-halo { fill: none; stroke: rgba(196,122,58,.5); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: map-pulse 3.8s ease-out infinite; }
.location-mx .location-halo { animation-delay: 1.25s; }
.location-uk .location-halo { animation-delay: 2.5s; }
.map-location:hover .location-dot, .map-location:focus .location-dot, .map-location.is-highlighted .location-dot { r: 6px; fill: #f0b27c; }
.map-location:hover .location-halo, .map-location:focus .location-halo, .map-location.is-highlighted .location-halo { stroke: #e4a06a; animation-play-state: paused; transform: scale(1.2); }
.map-location:hover text, .map-location:focus text, .map-location.is-highlighted text { fill: #f4f0e9; opacity: 1; transform: translateX(2px); }
@keyframes map-pulse {
  0%, 45% { opacity: .45; transform: scale(.45); }
  75% { opacity: .12; transform: scale(1.3); }
  100% { opacity: 0; transform: scale(1.5); }
}
.project-cta { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding: 28px 12%; }
.project-cta h2 { margin: 0 0 5px; text-transform: uppercase; font-size: 21px; font-weight: 300; letter-spacing: clamp(2px, .3vw, 4px); line-height: 1.35; text-wrap: balance; }
.project-cta p { max-width: 560px; margin: 0; font-size: 9px; line-height: 1.6; }

.page-enter { animation: page-enter .85s cubic-bezier(.22,.61,.36,1) both; }
/* Keep the document itself transform-free. A transformed body becomes the
   containing block for fixed mobile navigation, making the menu stretch to
   the full page instead of the viewport during the first-load animation. */
@keyframes page-enter { from { opacity: 0; } to { opacity: 1; } }
body.menu-open { overflow: hidden; }

@media (max-width: 900px) {
  .story-section { grid-template-columns: 48% 52%; padding-left: 0; }
  .story-copy { grid-column: 1 / 3; padding: 55px 6%; }
  .story-portrait { height: 430px; }
  .story-architecture > img { height: 325px; }
  .goal-grid article { padding: 12px 25px; }
  .brand-statement { grid-template-columns: 80px 1fr; }
  .brand-statement p { grid-column: 2; padding: 0; border: 0; }
  .project-row, .project-row.reverse { grid-template-columns: 1fr; height: auto; transform: translateY(20px); }
  .project-row.reverse img, .project-row > img { grid-column: 1; grid-row: 1; height: clamp(290px, 54vw, 440px); min-height: 0; }
  .project-row.reverse .project-detail, .project-detail { grid-column: 1; grid-row: 2; height: 300px; min-height: 0; }
  .project-row.in-view { transform: translateY(0); }
  .global-reach { grid-template-columns: 1fr; gap: 22px; padding: 48px 7%; }
  .global-reach > div:first-child { max-width: 470px; }
  .map-art { width: 100%; height: 285px; }
  .region-list { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; }
  .project-cta { padding-left: 7%; padding-right: 7%; }
}

@media (max-width: 620px) {
  .inner-hero { min-height: 650px; background-position: 63% center; }
  .inner-hero-copy { left: 24px; right: 24px; top: 46%; }
  .inner-hero h1 { font-size: 36px; letter-spacing: 5px; }
  .story-section { display: block; padding: 0; }
  .story-copy { padding: 55px 24px; }
  .story-portrait { height: 520px; }
  .story-architecture > img { height: 290px; }
  .story-architecture .principles { min-height: 190px; }
  .goals, .team-section { padding-left: 24px; padding-right: 24px; }
  .goal-grid { display: block; }
  .goal-grid article { padding: 28px 5px; border-right: 0; border-bottom: 1px solid #d8d1c8; }
  .team-grid { grid-template-columns: 1fr; }
  .team-card,
  .team-card:nth-child(1),
  .team-card:nth-child(2),
  .team-card:nth-child(5) { grid-column: auto; width: auto; }
  .brand-statement { display: block; padding: 50px 24px; }
  .statement-mark { display: block; margin: 0 auto 40px; }
  .brand-statement h2 { font-size: 20px; letter-spacing: 4px; }
  .brand-statement p { margin-top: 30px; }
  .project-filters { gap: 18px; overflow-x: auto; white-space: nowrap; }
  .project-row, .project-row.reverse { display: grid; }
  .project-row > img { height: 265px; }
  .project-detail { height: 290px; min-height: 0; padding: 40px 24px; }
  .global-reach { display: block; padding: 48px 24px; }
  .map-art { height: 250px; margin: 24px -12px; }
  .map-location text { font-size: 10px; }
  .map-location .location-detail { font-size: 8px; }
  .project-cta { display: block; padding: 40px 24px; }
  .project-cta .button { margin-top: 25px; }
}

@media (max-width: 480px) {
  .site-header { padding: 0 16px; }
  .site-header .brand-logo { width: 190px; }
  .hero-copy { left: 18px; right: 18px; width: auto; }
  h1, .inner-hero h1 { font-size: 32px; line-height: 1.24; letter-spacing: 3px; }
  .eyebrow { font-size: 8px; letter-spacing: 1.4px; }
  .site-footer { grid-template-columns: 1fr; gap: 28px; }
  .footer-brand { grid-column: 1; }
}

@media (pointer: coarse), (max-width: 900px) {
  .project-row:hover > img { transform: scale(1.01); }
}

@media (prefers-reduced-motion: reduce) {
  .project-row, .project-row.reverse { opacity: 1; transform: none; transition: none; }
  .project-row > img, .project-row.in-view > img, .project-row:hover > img { filter: none; transform: none; transition: none; }
  .project-detail > * { opacity: 1; transform: none; transition: none; }
  .page-enter, .site-header.is-scrolled { animation: none; }
  .location-halo { animation: none; opacity: .35; }
  .brand-icon { transition: none; }
}

/* Services process */
.services-hero { background-image: url("assets/partners/titoni-minimal-frame-4k.webp"); background-position: center; }
.process-intro {
  display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 70px;
  padding: 72px 6% 56px; border-bottom: 1px solid rgba(196,122,58,.22);
}
.process-intro h2 { margin: 0; text-transform: uppercase; font-size: clamp(30px,4vw,55px); line-height: 1.24; letter-spacing: clamp(3px, .5vw, 7px); font-weight: 300; text-wrap: balance; }
.process-intro h2 b { color: var(--copper); font-weight: 300; }
.process-intro > p { max-width: 520px; margin: 0 0 10px; color: #b9bec0; font-size: 12px; line-height: 1.9; }

.process-scroll { position: relative; padding: 54px 24px 70px; background: #07131a; }
.process-stage {
  --process-progress: 0; position: relative; min-height: 760px; height: min(820px, 88vh); overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(36,51,59,.42), transparent 31%),
    radial-gradient(circle at 50% 50%, #101b21 0, #07131a 67%);
  border: 1px solid rgba(196,122,58,.16);
  box-shadow: 0 28px 80px rgba(0,0,0,.22);
}
.process-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 58px 58px; mask-image: radial-gradient(circle at center, black, transparent 73%);
}
.process-atmosphere i { position: absolute; border: 1px solid rgba(196,122,58,.12); border-radius: 50%; animation: atmosphere 12s ease-in-out infinite alternate; }
.process-atmosphere i:nth-child(1) { width: 580px; height: 580px; left: calc(50% - 290px); top: calc(50% - 290px); }
.process-atmosphere i:nth-child(2) { width: 760px; height: 760px; left: calc(50% - 380px); top: calc(50% - 380px); animation-delay: -4s; }
.process-atmosphere i:nth-child(3) { width: 980px; height: 980px; left: calc(50% - 490px); top: calc(50% - 490px); animation-delay: -8s; }
@keyframes atmosphere { from { opacity: .12; transform: scale(.98); } to { opacity: .34; transform: scale(1.02); } }
.process-meter { display: none; }

.process-orbit { position: relative; width: min(1050px, 89vw); height: min(760px, 82vh); min-height: 650px; }
.orbit-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit-base { fill: none; stroke: rgba(196,122,58,.2); stroke-width: 1.2; stroke-dasharray: 2 8; }
.orbit-progress { fill: none; stroke: #c47a3a; stroke-width: 1.65; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--process-progress)); transform: rotate(-90deg); transform-origin: 50% 50%; filter: drop-shadow(0 0 4px rgba(196,122,58,.3)); }
.orbit-inner { fill: rgba(8,18,24,.5); stroke: rgba(244,240,233,.08); stroke-width: 1; }
.orbit-runner {
  position: absolute; z-index: 4; left: 0; top: 0; width: 10px; height: 10px; margin: -5px;
  border-radius: 50%; background: #d89157; box-shadow: 0 0 18px 5px rgba(216,145,87,.42);
  opacity: 1;
  will-change: transform;
}

.process-center {
  position: absolute; z-index: 3; left: 50%; top: 50%; width: 285px; height: 285px; transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  opacity: 1; transition: filter .6s ease;
}
.process-center img { width: 130px; height: 130px; object-fit: contain; filter: drop-shadow(0 12px 28px rgba(0,0,0,.28)); }
.process-center p { margin: 4px 0 0; color: #aeb5b8; font-size: 8px; line-height: 1.6; text-transform: uppercase; letter-spacing: 1.7px; }
.center-ring { position: absolute; inset: 0; border: 1px solid rgba(196,122,58,.2); border-radius: 50%; }
.ring-one { animation: center-breathe 6s ease-in-out infinite; }
.ring-two { inset: 18px; border-color: rgba(244,240,233,.06); animation: center-breathe 6s 1.2s ease-in-out infinite; }
@keyframes center-breathe { 50% { transform: scale(1.035); opacity: .45; } }

.process-steps { list-style: none; margin: 0; padding: 0; }
.process-step {
  position: absolute; z-index: 4; width: 158px; min-height: 126px; padding: 22px 12px 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid rgba(196,122,58,.32); color: #f2eee8; background: rgba(9,20,26,.88);
  box-shadow: 0 16px 35px rgba(0,0,0,.16); text-align: center; cursor: default; outline: none;
  opacity: .5; filter: none; transform: none;
  transition: opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1), filter .85s, border-color .45s, background .45s, box-shadow .45s;
}
.process-step.is-revealed { opacity: .5; filter: none; transform: none; }
.process-step.is-active, .process-step:hover, .process-step:focus {
  z-index: 8; opacity: 1; border-color: rgba(222,147,88,.95); background: rgba(14,27,34,.98);
  box-shadow: 0 20px 50px rgba(0,0,0,.34), 0 0 30px rgba(196,122,58,.08); transform: translateY(-4px);
}
.process-step svg { width: 45px; height: 45px; margin-bottom: 7px; color: #cc8048; transition: transform .5s ease, color .5s ease; }
.process-step:hover svg, .process-step:focus svg, .process-step.is-active svg { color: #efa66e; transform: scale(1.06); }
.process-step h3 { margin: 0; text-transform: uppercase; font-size: 9px; line-height: 1.45; letter-spacing: .8px; font-weight: 400; }
.process-step p { display: none; }
.step-number {
  position: absolute; left: 50%; top: -16px; width: 34px; height: 34px; transform: translateX(-50%);
  display: grid; place-items: center; border: 1px solid #c47a3a; border-radius: 50%;
  color: #f5eee7; background: linear-gradient(145deg,#5a3725,#1b2023); font-size: 10px; letter-spacing: .5px;
}
.step-1 { left: 50%; top: 0; --enter-y: -24px; transform-origin: center bottom; transform: translateX(-50%); }
.step-1.is-revealed { transform: translateX(-50%); }
.step-1.is-active, .step-1:hover, .step-1:focus { transform: translate(-50%,-4px); }
.step-2 { right: 8%; top: 10%; --enter-x: 24px; }
.step-3 { right: 0; top: 39%; --enter-x: 24px; }
.step-4 { right: 9%; bottom: 7%; --enter-x: 24px; --enter-y: 15px; }
.step-5 { left: 59%; bottom: 0; --enter-y: 24px; }
.step-6 { right: 59%; bottom: 0; --enter-y: 24px; }
.step-7 { left: 9%; bottom: 7%; --enter-x: -24px; --enter-y: 15px; }
.step-8 { left: 0; top: 39%; --enter-x: -24px; }
.step-9 { left: 8%; top: 10%; --enter-x: -24px; }
.step-4 p, .step-5 p, .step-6 p, .step-7 p { top: auto; bottom: calc(100% + 12px); }

.process-complete {
  position: absolute; z-index: 5; left: calc(50% + 105px); top: 18px; display: flex; align-items: center; gap: 9px;
  color: #d99560; text-transform: uppercase; font-size: 8px; letter-spacing: 1.5px;
  opacity: 0; transform: translateY(7px); transition: opacity .7s, transform .7s;
}
.process-stage.is-complete .process-complete { opacity: 1; transform: none; }
.process-complete span { width: 9px; height: 9px; border-radius: 50%; background: #d99560; box-shadow: 0 0 16px rgba(217,149,96,.7); }
.process-caption {
  position: absolute; z-index: 8; left: 50%; top: 50%; width: 270px;
  padding-top: 11px; border-top: 1px solid rgba(196,122,58,.45);
  text-align: center; transform: translate(-50%, 108px);
}
.process-caption small { color: #c47a3a; text-transform: uppercase; font-size: 7px; letter-spacing: 1.6px; }
.process-caption strong { display: block; margin: 5px 0; text-transform: uppercase; font-size: 10px; letter-spacing: 1px; font-weight: 400; }
.process-caption p { margin: 0; color: #9fa6a9; font-size: 8px; line-height: 1.55; }
.process-hint { position: absolute; z-index: 8; left: 4%; bottom: 25px; margin: 0; color: #8e9699; text-transform: uppercase; font-size: 7px; letter-spacing: 1.5px; }
.process-hint span { display: inline-block; margin-left: 8px; color: var(--copper); animation: process-pulse 2.4s ease-in-out infinite; }
@keyframes process-pulse { 50% { opacity: .45; transform: scale(.82); } }
.process-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }

.service-pillars { display: grid; grid-template-columns: repeat(5,1fr); padding: 52px 5%; border-top: 1px solid rgba(196,122,58,.34); }
.service-pillars article { padding: 0 27px; border-right: 1px solid rgba(196,122,58,.32); }
.service-pillars article:last-child { border: 0; }
.service-pillars span { color: #c47a3a; font-size: 9px; }
.service-pillars h3 { min-height: 35px; text-transform: uppercase; font-size: 10px; line-height: 1.5; letter-spacing: 1.2px; font-weight: 400; }
.service-pillars p { margin: 0; color: #aeb4b6; font-size: 8px; line-height: 1.7; }

@media (max-width: 1100px) {
  .process-orbit { transform: scale(.86); }
  .process-caption { width: 240px; }
}

@media (max-width: 900px) {
  .process-intro { grid-template-columns: 1fr; gap: 25px; }
  .process-scroll { height: auto; padding: 45px 24px 70px; }
  .process-stage { position: relative; height: auto; min-height: 0; display: block; overflow: visible; background: transparent; }
  .process-stage::before, .process-meter, .process-atmosphere, .orbit-lines, .orbit-runner, .process-hint, .process-complete { display: none; }
  .process-orbit { width: 100%; height: auto; min-height: 0; transform: none; }
  .process-center { position: relative; left: auto; top: auto; width: 250px; height: 250px; margin: 0 auto 55px; transform: none; opacity: 1; }
  .process-center img { width: 135px; height: 135px; }
  .process-steps { position: relative; display: grid; gap: 18px; max-width: 680px; margin: 0 auto; }
  .process-steps::before { content: ""; position: absolute; left: 24px; top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--copper),rgba(196,122,58,.12)); }
  .process-step, .step-1 {
    position: relative; inset: auto; width: 100%; min-height: 115px; padding: 25px 28px 22px 82px;
    display: grid; grid-template-columns: 55px 1fr; align-items: center; text-align: left;
    transform: translateY(16px); transform-origin: center; opacity: 0;
  }
  .process-step.is-revealed, .step-1.is-revealed { transform: none; opacity: 1; }
  .process-step svg { grid-row: 1 / 3; margin: 0; width: 48px; height: 48px; }
  .process-step h3 { font-size: 11px; }
  .step-number { left: 24px; top: 50%; width: 38px; height: 38px; transform: translate(-50%,-50%); }
  .process-step p { position: static; display: block; grid-column: 2; width: auto; padding: 7px 0 0; border: 0; background: none; opacity: 1; transform: none; font-size: 9px; }
  .process-step:hover, .process-step:focus, .process-step.is-active { transform: none; }
  .process-caption { display: none; }
  .service-pillars { grid-template-columns: repeat(2,1fr); }
  .service-pillars article { padding: 25px; border-bottom: 1px solid rgba(196,122,58,.25); }
}

@media (max-width: 620px) {
  .process-intro { padding: 55px 24px 42px; }
  .process-intro h2 { font-size: 30px; letter-spacing: 4px; }
  .process-scroll { padding-left: 18px; padding-right: 18px; }
  .process-center { width: 220px; height: 220px; }
  .process-center img { width: 122px; height: 122px; }
  .process-step, .step-1 { grid-template-columns: 45px 1fr; padding: 23px 18px 20px 64px; }
  .process-step svg { width: 39px; height: 39px; }
  .process-steps::before { left: 16px; }
  .step-number { left: 16px; width: 32px; height: 32px; }
  .service-pillars { grid-template-columns: 1fr; padding: 35px 24px; }
  .service-pillars article { border-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .process-scroll { height: auto; padding: 50px 24px; }
  .process-stage { position: relative; height: auto; }
  .process-step, .process-step.is-revealed { opacity: 1; filter: none; transform: none; }
  .process-center { opacity: 1; }
  .orbit-progress { stroke-dashoffset: 0; }
  .orbit-runner, .process-atmosphere, .process-hint { display: none; }
  .process-complete { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
  .process-center { transform: translate(-50%,-50%) scale(1); }
  .step-1, .step-1.is-revealed { transform: translateX(-50%); }
}

/* Refined process showcase */
.process-scroll {
  display: flex;
  justify-content: center;
  padding: 58px clamp(18px, 4vw, 64px) 72px;
}

.process-stage {
  position: relative;
  width: min(1120px, 100%);
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 3;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(196,122,58,.25);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 48%, rgba(37,49,55,.6), transparent 27%),
    linear-gradient(145deg, #0c171d, #061016 72%);
  box-shadow: 0 30px 90px rgba(0,0,0,.34);
}

.process-stage::before {
  opacity: .14;
  background-size: 52px 52px;
  mask-image: linear-gradient(black, rgba(0,0,0,.45));
}

.process-orbit-art {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.process-orbit-dotted { opacity: .7; }
.process-orbit-arrows { opacity: .82; }

.process-corner-mark {
  position: absolute;
  z-index: 2;
  right: 3.4%;
  bottom: 3.7%;
  width: 42px;
  height: 55px;
  object-fit: contain;
  opacity: .72;
}

.process-feature {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 49%;
  width: 31%;
  margin: 0;
  overflow: visible;
  transform: translate(-50%,-50%);
  filter: drop-shadow(0 22px 28px rgba(0,0,0,.34));
}

.process-feature::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 1px;
  right: 1px;
  height: 24px;
  background: #0d171c;
}

.process-feature-image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(217,137,75,.68);
  background: #0d171c;
  transition: opacity .28s ease, transform .55s cubic-bezier(.22,.61,.36,1), filter .45s ease;
}

.process-feature-image.is-changing {
  opacity: 0;
  transform: scale(.975);
  filter: blur(3px);
}

.process-feature-number {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: -23px;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid #d98a4b;
  border-radius: 50%;
  color: #f5eee8;
  background: radial-gradient(circle at 35% 25%, #60422f, #201912 72%);
  box-shadow: 0 9px 20px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.025);
  font-size: 13px;
  letter-spacing: 1px;
  transform: translateX(-50%);
}

.process-steps {
  position: absolute;
  z-index: 5;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.process-step,
.process-step.is-revealed {
  position: absolute;
  width: 42px;
  min-height: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(196,122,58,.42);
  border-radius: 50%;
  color: #c8ced0;
  background: rgba(7,18,24,.94);
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  cursor: pointer;
  opacity: .76;
  transform: translate(-50%,-50%);
  transition: opacity .45s ease, transform .55s cubic-bezier(.22,.61,.36,1), border-color .45s ease, background .45s ease, box-shadow .45s ease;
}

.process-step.is-active,
.process-step:hover,
.process-step:focus {
  z-index: 7;
  opacity: 1;
  border-color: #e19a61;
  background: radial-gradient(circle at 35% 25%, #5d3e2b, #141a1d 72%);
  box-shadow: 0 0 0 5px rgba(196,122,58,.09), 0 9px 24px rgba(0,0,0,.4), 0 0 20px rgba(205,128,70,.24);
  transform: translate(-50%,-50%) scale(1.18);
}

.process-step .step-number {
  position: static;
  width: auto;
  height: auto;
  transform: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: none;
  font-size: 10px;
  letter-spacing: .7px;
}

.process-step h3,
.process-step p {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.process-step.step-1 { left: 50.3%; top: 17.9%; }
.process-step.step-2 { left: 69.8%; top: 25.7%; }
.process-step.step-3 { left: 76.2%; top: 45.4%; }
.process-step.step-4 { left: 71.2%; top: 66.3%; }
.process-step.step-5 { left: 59%; top: 79.1%; }
.process-step.step-6 { left: 42.8%; top: 79.1%; }
.process-step.step-7 { left: 29.2%; top: 66.3%; }
.process-step.step-8 { left: 24.7%; top: 46.4%; }
.process-step.step-9 { left: 31.1%; top: 27.3%; }

.orbit-runner {
  z-index: 6;
  width: 8px;
  height: 8px;
  margin: -4px;
  background: #f0a66d;
  box-shadow: 0 0 18px 5px rgba(216,145,87,.5);
}

.process-caption {
  position: absolute;
  z-index: 5;
  left: 3.7%;
  top: 38%;
  width: 20%;
  padding: 0 0 0 15px;
  border: 0;
  border-left: 1px solid rgba(196,122,58,.55);
  text-align: left;
  transform: none;
}

.process-caption small { font-size: 7px; }
.process-caption strong { margin: 7px 0; font-size: 11px; line-height: 1.45; }
.process-caption p { font-size: 8px; line-height: 1.7; }

.process-hint {
  left: auto;
  right: 3.7%;
  bottom: 4.5%;
}

@media (max-width: 900px) {
  .process-stage {
    aspect-ratio: auto;
    min-height: 720px;
    padding: 54px 24px 32px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 25%, #17242b, #07131a 66%);
  }

  .process-stage::before { display: block; }
  .process-orbit-art, .orbit-runner, .process-corner-mark, .process-hint { display: none; }

  .process-feature {
    position: relative;
    left: auto;
    top: auto;
    width: min(420px, 86%);
    margin: 8px auto 34px;
    transform: none;
  }

  .process-steps {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(9, 42px);
    justify-content: center;
    gap: 8px;
    margin: 0 auto 30px;
  }

  .process-step,
  .process-step.is-revealed,
  .process-step.step-1,
  .process-step.step-2,
  .process-step.step-3,
  .process-step.step-4,
  .process-step.step-5,
  .process-step.step-6,
  .process-step.step-7,
  .process-step.step-8,
  .process-step.step-9 {
    position: relative;
    inset: auto;
    width: 42px;
    min-height: 42px;
    height: 42px;
    display: grid;
    padding: 0;
    transform: none;
    opacity: .76;
  }

  .process-step.is-active,
  .process-step:hover,
  .process-step:focus { transform: scale(1.12); }

  .process-caption {
    position: relative;
    left: auto;
    top: auto;
    display: block;
    width: min(520px, 92%);
    margin: 0 auto;
    padding-left: 16px;
  }
}

@media (max-width: 620px) {
  .process-scroll { padding: 28px 14px 45px; }
  .process-stage { min-height: 600px; padding: 45px 14px 28px; }
  .process-feature { width: min(390px, 94%); }
  .process-steps {
    grid-template-columns: repeat(5, 40px);
    gap: 9px 12px;
    max-width: 248px;
  }
  .process-step,
  .process-step.is-revealed,
  .process-step.step-1,
  .process-step.step-2,
  .process-step.step-3,
  .process-step.step-4,
  .process-step.step-5,
  .process-step.step-6,
  .process-step.step-7,
  .process-step.step-8,
  .process-step.step-9 {
    width: 40px;
    min-height: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-feature-image { transition: none; }
  .process-orbit-arrows { opacity: .55; }
}

/* Refined interactive project map */
.global-reach {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(230px, 24%) minmax(420px, 55%) minmax(220px, 21%);
  min-height: 430px;
  gap: 20px;
  padding: 55px 4.2%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(26,44,54,.68), transparent 44%),
    linear-gradient(115deg, #07141c, #06121a 64%, #081721);
}

.global-reach::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(4,14,20,.78), transparent 25%, transparent 74%, rgba(4,14,20,.72));
  pointer-events: none;
}

.reach-copy { position: relative; z-index: 3; }
.reach-copy small { display: block; margin-bottom: 26px; font-size: 9px; letter-spacing: 2px; }
.reach-copy h2 { margin-bottom: 25px; font-size: clamp(22px, 2.1vw, 31px); line-height: 1.65; letter-spacing: clamp(4px, .5vw, 8px); }
.reach-copy p { max-width: 310px; color: #c2c7c9; font-size: 10px; line-height: 1.9; }
.reach-button { margin-top: 23px; }

.map-art {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  aspect-ratio: 1400 / 791;
  overflow: visible;
}

.map-art::after {
  content: "";
  position: absolute;
  inset: -3%;
  pointer-events: none;
  background:
    linear-gradient(90deg, #07141c, transparent 12%, transparent 88%, #07141c),
    linear-gradient(#07141c, transparent 14%, transparent 86%, #07141c);
}

.map-art > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .9;
  filter: saturate(.82) contrast(1.05);
}

.map-location {
  position: absolute;
  z-index: 4;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  outline: none;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%,-50%);
}

.map-location span,
.map-location::before,
.map-location::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%,-50%);
}

.map-location span {
  z-index: 2;
  width: 7px;
  height: 7px;
  background: #f0ae75;
  box-shadow: 0 0 8px 3px rgba(239,155,90,.65);
  transition: transform .45s ease, background .45s ease, box-shadow .45s ease;
}

.map-location::before {
  width: 20px;
  height: 20px;
  border: 1px solid rgba(230,151,88,.48);
  opacity: .55;
  animation: map-hotspot-pulse 3.2s ease-out infinite;
}

.map-location::after {
  width: 3px;
  height: 3px;
  background: white;
}

.map-location.is-highlighted span,
.map-location:hover span,
.map-location:focus span {
  background: #ffc18c;
  box-shadow: 0 0 12px 5px rgba(239,155,90,.78);
  transform: translate(-50%,-50%) scale(1.35);
}

.map-location.is-highlighted::before,
.map-location:hover::before,
.map-location:focus::before {
  border-color: #eba168;
  animation-play-state: paused;
  opacity: 1;
  transform: translate(-50%,-50%) scale(1.25);
}

.location-us { left: 17.5%; top: 44.5%; }
.location-mx { left: 8.5%; top: 52%; }
.location-uk { left: 48%; top: 29%; }
.location-mx::before { animation-delay: 1s; }
.location-uk::before { animation-delay: 2s; }

@keyframes map-hotspot-pulse {
  0% { opacity: .7; transform: translate(-50%,-50%) scale(.45); }
  72% { opacity: .08; transform: translate(-50%,-50%) scale(1.45); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.65); }
}

.region-list {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-transform: none;
}

.global-reach .region-list li {
  position: relative;
  width: 100%;
  padding: 8px 8px 8px 32px;
  border-left: 1px solid transparent;
  outline: none;
  cursor: default;
  transition: color .4s ease, transform .4s ease, border-color .4s ease, background .4s ease;
}

.global-reach .region-list li::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 16px;
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 50%;
  background: #e69a60;
  box-shadow: 0 0 9px 3px rgba(230,154,96,.42);
}

.region-list strong {
  display: block;
  color: #e9e7e3;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2px;
}

.region-list span {
  display: block;
  margin-top: 5px;
  color: #aeb5b8;
  font-size: 9px;
  line-height: 1.65;
}

.global-reach .region-list li.is-highlighted,
.global-reach .region-list li:hover,
.global-reach .region-list li:focus {
  border-left-color: rgba(218,137,73,.68);
  background: linear-gradient(90deg, rgba(196,122,58,.08), transparent);
  transform: translateX(4px);
}

.global-reach .region-list li.is-highlighted strong,
.global-reach .region-list li:hover strong,
.global-reach .region-list li:focus strong { color: #f2b17b; }

@media (max-width: 1050px) {
  .global-reach {
    grid-template-columns: minmax(210px, 28%) 1fr;
    min-height: 0;
  }
  .region-list {
    grid-column: 1 / 3;
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 700px) {
  .global-reach { display: block; padding: 48px 22px; }
  .reach-copy { max-width: 430px; }
  .map-art { height: auto; margin: 36px 0 28px; aspect-ratio: 1400 / 791; }
  .region-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .global-reach .region-list li { min-height: 82px; }
}

@media (max-width: 440px) {
  .region-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .map-location::before { animation: none; opacity: .55; }
}

/* Scroll-led process diagram, aligned to the original motion study. */
.process-scroll {
  position: relative;
  height: 330vh;
  padding: 0;
  background: radial-gradient(circle at 50% 44%, rgba(27,46,57,.44), transparent 42%), #06131b;
}

.process-stage {
  --center-reveal: 0;
  --graphic-reveal: 0;
  --loop-progress: 0;
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100vh;
  min-height: 720px;
  padding: 66px 4vw 72px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(4,13,19,.74), transparent 17%, transparent 83%, rgba(4,13,19,.74)),
    radial-gradient(circle at 50% 48%, rgba(31,49,59,.24), transparent 51%),
    #06131b;
}

.process-stage::before {
  display: block;
  opacity: .16;
  background-image:
    linear-gradient(rgba(187,125,78,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(187,125,78,.06) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at center, black, transparent 74%);
}

.process-reference-frame {
  position: relative;
  width: min(1180px, 91vw, calc((100vh - 150px) * 1.3333));
  aspect-ratio: 4 / 3;
  isolation: isolate;
  filter: drop-shadow(0 28px 45px rgba(0,0,0,.24));
  transform: scale(calc(.975 + var(--center-reveal) * .025));
  transform-origin: center;
}

.process-reference-frame::after {
  content: "";
  position: absolute;
  z-index: 7;
  inset: 0;
  border: 1px solid rgba(189,122,70,.16);
  box-shadow: inset 0 0 80px rgba(2,10,15,.28);
  pointer-events: none;
}

.process-reference-image {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.process-center-veil {
  position: absolute;
  z-index: 4;
  left: 52.5%;
  top: 50.6%;
  width: 43%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(7,19,26,.99) 0 56%, rgba(7,19,26,.95) 71%, transparent 76%);
  opacity: calc(1 - var(--center-reveal));
  transform: translate(-50%, -50%) scale(calc(.92 + var(--center-reveal) * .08));
  pointer-events: none;
}

.process-reveal-mask {
  position: absolute;
  z-index: 5;
  border-radius: 8px;
  background: radial-gradient(circle at 50% 45%, #0b1921 0 52%, rgba(7,18,25,.99) 82%);
  box-shadow: 0 0 22px 13px rgba(7,18,25,.96);
  will-change: opacity, transform;
  pointer-events: none;
}

.process-reveal-mask.mask-1 { left: 47.1%; top: 9.2%; width: 15.6%; height: 18.4%; }
.process-reveal-mask.mask-2 { left: 67.7%; top: 18.3%; width: 15.8%; height: 18.6%; }
.process-reveal-mask.mask-3 { left: 76.9%; top: 38.8%; width: 16%; height: 18.8%; }
.process-reveal-mask.mask-4 { left: 67.9%; top: 60.1%; width: 16%; height: 18.8%; }
.process-reveal-mask.mask-5 { left: 54%; top: 71%; width: 14.2%; height: 18.8%; }
.process-reveal-mask.mask-6 { left: 38.9%; top: 71%; width: 14.2%; height: 18.8%; }
.process-reveal-mask.mask-7 { left: 23%; top: 60.1%; width: 16.3%; height: 18.8%; }
.process-reveal-mask.mask-8 { left: 18.2%; top: 38.8%; width: 16.8%; height: 18.8%; }
.process-reveal-mask.mask-9 { left: 28.4%; top: 18.3%; width: 15.7%; height: 18.6%; }

.process-path-overlay {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.process-path-progress {
  fill: none;
  stroke: rgba(209,129,72,.88);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--loop-progress));
  filter: drop-shadow(0 0 5px rgba(212,128,69,.42));
  transform: rotate(-90deg);
  transform-box: fill-box;
  transform-origin: center;
}

.orbit-runner {
  position: absolute;
  z-index: 9;
  left: 0;
  top: 0;
  display: block;
  width: 11px;
  height: 11px;
  border: 0;
  border-radius: 50%;
  opacity: clamp(0, calc(var(--loop-progress) * 4), 1);
  background: #e9a46f;
  box-shadow: 0 0 0 5px rgba(224,139,76,.12), 0 0 17px 5px rgba(225,141,79,.55);
  transition: opacity .25s ease;
  will-change: transform;
  pointer-events: none;
}

.process-completion-dot {
  position: absolute;
  z-index: 9;
  left: 82.2%;
  top: 27.5%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  opacity: 0;
  background: #d9894d;
  box-shadow: 0 0 18px 6px rgba(217,137,77,.45);
  transform: scale(.45);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}

.process-stage.is-complete .process-completion-dot { opacity: 1; transform: scale(1); }

.process-phase {
  position: absolute;
  z-index: 12;
  right: 3.7vw;
  bottom: 25px;
  width: min(310px, 28vw);
  padding: 3px 0 3px 19px;
  border-left: 1px solid rgba(204,129,73,.7);
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .45s ease, transform .45s ease;
}

.process-phase.is-visible { opacity: 1; transform: none; }
.process-phase small,
.process-phase strong { display: block; text-transform: uppercase; }
.process-phase small { color: var(--copper); font-size: 8px; letter-spacing: 2px; }
.process-phase strong { margin-top: 5px; color: #ece8e1; font-size: 11px; font-weight: 400; letter-spacing: 2.3px; }
.process-phase p { margin: 5px 0 0; color: #9ea7aa; font-size: 8px; line-height: 1.55; }

.process-hint { left: 3.7vw; bottom: 29px; color: #879195; }

.process-accessible-list {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .process-scroll { height: auto; padding: 34px 18px 58px; }
  .process-stage {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
  }
  .process-stage::before,
  .process-center-veil,
  .process-reveal-mask,
  .orbit-runner,
  .process-completion-dot,
  .process-hint { display: none; }
  .process-reference-frame {
    width: 100%;
    transform: none;
    filter: drop-shadow(0 18px 25px rgba(0,0,0,.2));
  }
  .process-path-progress { stroke-dashoffset: 0; }
  .process-phase {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(100%, 420px);
    margin: 24px auto 0;
  }
}

/* Layered process assembly built from the supplied production assets. */
.process-assembly {
  --sequence-progress: 0;
  --route-progress: 0;
  position: relative;
  width: min(1180px, 91vw, calc((100vh - 150px) * 1.3333));
  aspect-ratio: 4 / 3;
  isolation: isolate;
  opacity: var(--graphic-reveal);
  transform: scale(calc(.97 + var(--center-reveal) * .03));
  transform-origin: center;
  will-change: opacity, transform;
}

.process-atmosphere {
  position: absolute;
  z-index: 0;
  inset: 4%;
  overflow: hidden;
  opacity: calc(.18 + var(--center-reveal) * .48);
  background:
    radial-gradient(circle at 50% 49%, rgba(211,132,75,.07), transparent 34%),
    linear-gradient(115deg, transparent 20%, rgba(255,255,255,.018) 47%, transparent 70%);
  filter: blur(1px);
  pointer-events: none;
}

.process-atmosphere::before,
.process-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(230,159,102,.55) 0 1px, transparent 1.6px);
  background-size: 93px 81px;
  opacity: .18;
  animation: process-dust-drift 18s linear infinite;
}

.process-atmosphere::after {
  background-size: 137px 119px;
  opacity: .11;
  transform: rotate(180deg);
  animation-duration: 27s;
}

.process-light-sweep {
  position: absolute;
  z-index: 10;
  top: -20%;
  bottom: -20%;
  left: -35%;
  width: 18%;
  opacity: calc(var(--sequence-progress) * .22);
  background: linear-gradient(90deg, transparent, rgba(229,178,139,.2), transparent);
  filter: blur(18px);
  transform: skewX(-15deg);
  animation: process-light-sweep 10s ease-in-out infinite;
  pointer-events: none;
}

.process-assembly::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 22% 28%;
  border: 1px solid rgba(204,129,73,.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 32px rgba(198,124,70,.025),
    0 0 0 64px rgba(198,124,70,.018),
    inset 0 0 70px rgba(218,139,79,.05);
  opacity: var(--center-reveal);
  transform: scale(calc(.88 + var(--center-reveal) * .12));
}

.process-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.process-center-logo {
  z-index: 2;
  opacity: clamp(0, var(--center-reveal), 1);
  filter: drop-shadow(0 0 14px rgba(210,130,72,.11));
  transform: translateY(calc((1 - var(--center-reveal)) * 10px)) scale(calc(.88 + var(--center-reveal) * .12));
  transform-origin: center;
  will-change: opacity, transform;
}

.process-center-glow {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 49.3%;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: calc(var(--center-reveal) * .8);
  background: radial-gradient(circle, rgba(195,122,70,.12), rgba(20,37,46,.1) 45%, transparent 72%);
  filter: blur(12px);
  transform: translate(-50%, -50%);
  animation: process-center-breathe 7s ease-in-out infinite;
}

.process-center-rings {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 49.3%;
  width: 31%;
  aspect-ratio: 1;
  opacity: calc(var(--center-reveal) * .55);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.process-center-rings i {
  position: absolute;
  inset: 15%;
  border: 1px solid rgba(211,132,75,.16);
  border-radius: 50%;
  animation: process-ring-expand 6.5s ease-out infinite;
}

.process-center-rings i:nth-child(2) { animation-delay: -2.15s; }
.process-center-rings i:nth-child(3) { animation-delay: -4.3s; }

.process-dotted-route {
  z-index: 3;
  opacity: .92;
  filter: drop-shadow(0 0 4px rgba(215,132,73,.25));
}

.process-arrow-route {
  z-index: 4;
  opacity: .18;
  filter: drop-shadow(0 0 5px rgba(215,132,73,.28));
  animation: process-arrow-breathe 4.8s ease-in-out infinite;
}

.process-node {
  --node-scale: 1;
  --card-reveal: 0;
  position: absolute;
  z-index: 6;
  width: 13.2%;
  margin: 0;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.88);
  transform-origin: center;
  will-change: opacity, transform;
  transition: filter .5s ease;
  cursor: pointer;
}

.process-node::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 7% 5% 3%;
  border-radius: 8px;
  opacity: 0;
  background: radial-gradient(circle at 50% 35%, rgba(218,138,79,.24), transparent 66%);
  box-shadow: 0 0 0 1px rgba(218,138,79,.08), 0 0 28px rgba(218,138,79,.2);
  transform: scale(.92);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}

.process-node img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  backface-visibility: hidden;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.32));
  transition: filter .45s ease, transform .55s cubic-bezier(.2,.75,.2,1);
}

.process-node:hover,
.process-node:focus { z-index: 11; outline: none; }
.process-node:hover img,
.process-node:focus img {
  filter: drop-shadow(0 14px 25px rgba(0,0,0,.45)) drop-shadow(0 0 8px rgba(211,130,72,.24));
  transform: translateY(-4px) scale(1.035);
}

.process-node.is-current img {
  filter:
    drop-shadow(0 14px 24px rgba(0,0,0,.46))
    drop-shadow(0 0 8px rgba(229,149,89,.52))
    brightness(1.08);
  animation: process-current-card 2.8s ease-in-out infinite;
}

.process-node.is-current::before { opacity: 1; transform: scale(1.06); }
.process-node.is-complete:not(.is-current) img {
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.32)) saturate(.82) brightness(.88);
}

.process-node:focus-visible::before {
  opacity: 1;
  transform: scale(1.06);
  box-shadow: 0 0 0 2px rgba(239,167,111,.75), 0 0 30px rgba(218,138,79,.3);
}

.process-node.node-1 { left: 50%; top: 9.5%; }
.process-node.node-2 { left: 75.5%; top: 20.5%; }
.process-node.node-3 { left: 86.5%; top: 47%; }
.process-node.node-4 { left: 75.5%; top: 72.5%; }
.process-node.node-5 { left: 59.5%; top: 85.5%; width: 12.4%; }
.process-node.node-6 { left: 40.5%; top: 85.5%; width: 12.4%; }
.process-node.node-7 { left: 24.5%; top: 72.5%; }
.process-node.node-8 { left: 13.5%; top: 47%; }
.process-node.node-9 { left: 24.5%; top: 20.5%; }

.process-assembly .orbit-runner {
  z-index: 12;
  width: 9px;
  height: 9px;
  opacity: var(--runner-opacity, 0);
}

.process-sparks {
  position: absolute;
  z-index: 13;
  inset: 0;
  opacity: calc(var(--sequence-progress) * .9);
  pointer-events: none;
}

.process-sparks i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #e29a63;
  box-shadow: 0 0 8px 2px rgba(226,154,99,.5);
  animation: process-spark-pulse 4.6s ease-in-out infinite;
}

.process-sparks i:nth-child(1) { left: 50%; top: 2.8%; animation-delay: -.5s; }
.process-sparks i:nth-child(2) { left: 88%; top: 44%; animation-delay: -1.7s; }
.process-sparks i:nth-child(3) { left: 66%; top: 89%; animation-delay: -2.8s; }
.process-sparks i:nth-child(4) { left: 16%; top: 61%; animation-delay: -3.6s; }
.process-sparks i:nth-child(5) { left: 24%; top: 18%; animation-delay: -4.2s; }

.process-detail {
  position: absolute;
  z-index: 18;
  left: 2.8vw;
  top: 50%;
  width: min(280px, 20vw);
  padding: 20px 20px 18px;
  border: 1px solid rgba(206,130,73,.32);
  background:
    linear-gradient(145deg, rgba(16,29,37,.94), rgba(6,17,24,.92)),
    rgba(7,18,25,.94);
  box-shadow: 0 18px 48px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.025);
  opacity: 0;
  transform: translateY(calc(-50% + 8px));
  transition: opacity .36s ease, transform .46s cubic-bezier(.2,.8,.2,1);
  backdrop-filter: blur(12px);
}

.process-detail::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: linear-gradient(transparent, #d4874f, transparent);
}

.process-detail.is-visible { opacity: 1; transform: translateY(-50%); }
.process-detail small {
  color: #c98049;
  text-transform: uppercase;
  font-size: 7px;
  letter-spacing: 2px;
}
.process-detail h3 {
  margin: 9px 0 10px;
  color: #f0ece5;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 1.7px;
}
.process-detail p {
  margin: 0;
  color: #b8bec0;
  font-size: 9px;
  line-height: 1.75;
}
.process-detail b {
  display: block;
  margin-top: 13px;
  padding-top: 10px;
  border-top: 1px solid rgba(196,122,58,.2);
  color: #8f999d;
  text-transform: uppercase;
  font-size: 6px;
  font-weight: 400;
  letter-spacing: 1.2px;
}

.service-pillars {
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 0 5%;
}
.service-pillars article {
  min-height: 175px;
  padding: 34px 30px;
  border-right: 1px solid rgba(196,122,58,.25);
  border-bottom: 1px solid rgba(196,122,58,.25);
}
.service-pillars article:nth-child(3n) { border-right: 0; }
.service-pillars article:nth-last-child(-n+3) { border-bottom: 0; }
.service-pillars span { font-size: 11px; }
.service-pillars h3 {
  min-height: 0;
  margin: 12px 0 14px;
  font-size: 13px;
  line-height: 1.55;
}
.service-pillars p {
  max-width: 340px;
  font-size: 11px;
  line-height: 1.85;
}

@keyframes process-center-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(.98); opacity: calc(var(--center-reveal) * .55); }
  50% { transform: translate(-50%, -50%) scale(1.04); opacity: calc(var(--center-reveal) * .9); }
}

@keyframes process-ring-expand {
  0% { opacity: 0; transform: scale(.72); }
  18% { opacity: .65; }
  80%, 100% { opacity: 0; transform: scale(1.52); }
}

@keyframes process-arrow-breathe {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(215,132,73,.2)); }
  50% { filter: drop-shadow(0 0 8px rgba(215,132,73,.42)); }
}

@keyframes process-current-card {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.018); }
}

@keyframes process-light-sweep {
  0%, 15% { transform: translateX(0) skewX(-15deg); opacity: 0; }
  35% { opacity: calc(var(--sequence-progress) * .2); }
  68%, 100% { transform: translateX(760%) skewX(-15deg); opacity: 0; }
}

@keyframes process-dust-drift {
  from { transform: translate3d(-2%, -2%, 0); }
  to { transform: translate3d(6%, 5%, 0); }
}

@keyframes process-spark-pulse {
  0%, 100% { opacity: .08; transform: scale(.55); }
  45% { opacity: .75; transform: scale(1); }
  62% { opacity: .22; transform: scale(1.8); }
}

@media (max-width: 900px) {
  .process-assembly {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 12px;
    width: 100%;
    aspect-ratio: auto;
    transform: none;
  }
  .process-assembly::before,
  .process-atmosphere,
  .process-light-sweep,
  .process-center-glow,
  .process-center-rings,
  .process-dotted-route,
  .process-arrow-route,
  .process-sparks { display: none; }
  .process-center-logo {
    position: relative;
    grid-column: 1 / -1;
    width: min(100%, 340px);
    justify-self: center;
    aspect-ratio: 4 / 3;
    opacity: 1;
    transform: none;
  }
  .process-node,
  .process-node.node-1,
  .process-node.node-2,
  .process-node.node-3,
  .process-node.node-4,
  .process-node.node-5,
  .process-node.node-6,
  .process-node.node-7,
  .process-node.node-8,
  .process-node.node-9 {
    position: relative;
    left: auto;
    top: auto;
    width: min(100%, 300px);
    justify-self: center;
    opacity: 1;
    transform: none !important;
  }
  .process-node:last-of-type { grid-column: 1 / -1; width: min(calc(50% - 6px), 300px); justify-self: center; }
  .process-detail {
    position: relative;
    left: auto;
    top: auto;
    width: min(100%, 520px);
    margin: 26px auto 0;
    opacity: 1;
    transform: none;
  }
  .process-detail.is-visible { transform: none; }
  .service-pillars { grid-template-columns: repeat(2, 1fr); padding: 0 24px; }
  .service-pillars article,
  .service-pillars article:nth-child(3n),
  .service-pillars article:nth-last-child(-n+3) {
    min-height: 0;
    border-right: 1px solid rgba(196,122,58,.25);
    border-bottom: 1px solid rgba(196,122,58,.25);
  }
  .service-pillars article:nth-child(2n) { border-right: 0; }
  .service-pillars article:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
}

@media (max-width: 520px) {
  .process-assembly { grid-template-columns: 1fr; }
  .process-center-logo,
  .process-node,
  .process-node:last-of-type { grid-column: auto; width: min(100%, 286px); justify-self: center; }
  .service-pillars { grid-template-columns: 1fr; }
  .service-pillars article,
  .service-pillars article:nth-child(2n),
  .service-pillars article:last-child {
    grid-column: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(196,122,58,.25);
  }
  .service-pillars article:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .process-atmosphere::before,
  .process-atmosphere::after,
  .process-light-sweep,
  .process-center-glow,
  .process-center-rings i,
  .process-arrow-route,
  .process-node.is-current img,
  .process-sparks i { animation: none; }
  .process-node { opacity: 1 !important; transform: translate(-50%, -50%) !important; }
  .process-dotted-route { mask-image: none !important; -webkit-mask-image: none !important; }
}

/* Full-canvas process presentation. */
.engineering-luxury {
  color: #dda06f;
  font-size: 10px;
  letter-spacing: 4px;
  text-shadow: 0 0 18px rgba(211,132,75,.18);
}

.services-hero .inner-hero-copy::before {
  content: none;
}

.services-brand {
  flex: 0 0 auto;
  width: clamp(190px, 18vw, 245px);
  min-width: 0;
  overflow: visible;
}

.services-brand .services-logo,
.site-footer .footer-logo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1039 / 301;
  object-fit: contain;
  object-position: left center;
}

.services-footer-brand {
  width: min(210px, 100%);
  min-width: 0;
}

.process-stage {
  padding: 28px 1.5vw 64px;
}

.process-assembly {
  width: min(1450px, 98vw, calc((100vh - 92px) * 1.3333));
}

.process-vector-route {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.process-vector-route path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.process-route-guide {
  stroke: rgba(211,132,75,.16);
  stroke-width: 2;
  stroke-dasharray: .002 .014;
}

.process-route-progress {
  stroke: rgba(229,149,89,.9);
  stroke-width: 2.4;
  stroke-dasharray: .002 .014;
  filter: drop-shadow(0 0 5px rgba(226,143,83,.55));
}

.process-route-mask {
  stroke: white;
  stroke-width: 12;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--route-progress));
}

.process-dotted-route,
.process-detail,
.process-arrow-route,
.process-phase { display: none !important; }

.site-footer .footer-logo {
  display: block;
  width: 100%;
  max-width: 210px;
  height: auto;
  aspect-ratio: 1039 / 301;
  object-fit: contain;
  object-position: left center;
}

.process-summary-heading {
  padding: 70px 5% 44px;
  border-top: 1px solid rgba(196,122,58,.28);
  text-align: center;
}

.process-summary-heading .eyebrow {
  justify-content: center;
}

.process-summary-heading h2 {
  margin: 18px 0 14px;
  color: #efebe4;
  text-transform: uppercase;
  font-size: clamp(25px,3vw,43px);
  font-weight: 300;
  letter-spacing: clamp(3px,.48vw,7px);
}

.process-summary-heading > p:last-child {
  max-width: 690px;
  margin: 0 auto;
  color: #aeb6b9;
  font-size: 10px;
  line-height: 1.9;
}

.service-pillars article {
  position: relative;
  overflow: hidden;
  transition: background .85s ease, box-shadow 1.05s ease, transform .85s cubic-bezier(.22,.72,.24,1);
}

.service-pillars article::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, #d78950, transparent);
  transition: width .55s ease;
}

.service-pillars article:hover {
  z-index: 1;
  background: linear-gradient(145deg, rgba(203,126,70,.08), rgba(8,21,28,.2));
  transform: translateY(-3px);
}

.service-pillars article:hover::before { width: 100%; }
.service-pillars article:hover span { color: #efa76f; }

.service-pillars article.is-target {
  z-index: 2;
  background:
    radial-gradient(circle at 12% 15%, rgba(220,139,80,.16), transparent 48%),
    linear-gradient(145deg, rgba(203,126,70,.12), rgba(8,21,28,.24));
  box-shadow: inset 0 0 0 1px rgba(232,157,100,.68), 0 0 34px rgba(210,131,74,.2);
  transform: translateY(-2px);
  animation: process-summary-target 3.1s cubic-bezier(.22,.61,.36,1) both;
}

.service-pillars article.is-target::before { width: 100%; height: 2px; }
.service-pillars article.is-target span { color: #ffc08f; transition: color .8s ease; }

@keyframes process-summary-target {
  0% { box-shadow: inset 0 0 0 1px rgba(232,157,100,.1), 0 0 6px rgba(210,131,74,.03); }
  24% { box-shadow: inset 0 0 0 1px rgba(255,194,139,.82), 0 0 34px rgba(220,139,80,.28); }
  60% { box-shadow: inset 0 0 0 1px rgba(239,167,111,.42), 0 0 21px rgba(210,131,74,.14); }
  100% { box-shadow: inset 0 0 0 1px rgba(232,157,100,.12), 0 0 8px rgba(210,131,74,.04); }
}

@media (max-width: 900px) {
  .services-hero .inner-hero-copy::before { display: none; }
  .process-stage { padding: 0; }
  .process-assembly { opacity: 1; }
  .process-vector-route { display: none; }
  .process-summary-heading { padding: 55px 24px 35px; }
}

@media (prefers-reduced-motion: reduce) {
  .process-route-mask { stroke-dashoffset: 0; }
  .service-pillars article.is-target { animation: none; }
}

/* Services hero-to-process transition */
.services-hero {
  --hero-shift: 0px;
  --hero-transition-opacity: .72;
  --hero-line-opacity: .16;
  isolation: isolate;
  overflow: hidden;
  background-position: center calc(50% + var(--hero-shift));
}

.services-hero::after {
  z-index: 1;
  background: linear-gradient(90deg, rgba(3,12,18,.94) 0%, rgba(3,12,18,.64) 40%, rgba(3,12,18,.1) 75%);
}

.services-hero .inner-hero-copy.reveal,
.services-hero .inner-hero-copy.reveal.visible {
  z-index: 2;
  opacity: 1;
  transform: translateY(-42%);
  filter: none;
}

.services-hero-transition {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 96px;
  pointer-events: none;
  opacity: var(--hero-transition-opacity);
  background:
    repeating-linear-gradient(112deg, transparent 0 17%, rgba(220,229,231,.065) 17.08%, transparent 17.22% 34%),
    linear-gradient(180deg, transparent 0%, rgba(6,19,27,.035) 42%, rgba(6,19,27,.38) 78%, #06131b 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.3) 30%, #000 100%);
}

.services-hero-transition::after {
  content: "";
  position: absolute;
  right: 8%;
  bottom: 0;
  left: 8%;
  height: 1px;
  opacity: var(--hero-line-opacity);
  background: linear-gradient(90deg, transparent, rgba(214,223,225,.58) 24%, rgba(197,124,61,.52) 50%, rgba(214,223,225,.58) 76%, transparent);
}

.process-scroll {
  isolation: isolate;
}

.process-scroll::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -54px;
  right: 0;
  left: 0;
  height: 55px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6,19,27,0), #06131b);
}

.process-stage {
  z-index: 1;
}

.process-assembly .orbit-runner {
  display: none !important;
}

/* Final typography and footer balance */
body {
  overflow-x: clip;
}

.main-nav a,
.button,
.text-link {
  font-size: 10px;
}

.eyebrow,
.section-kicker {
  font-size: 10px;
  line-height: 1.5;
}

.lede {
  max-width: 470px;
  font-size: 13px;
  line-height: 1.75;
}

h1 {
  font-size: clamp(36px, 3.7vw, 54px);
  line-height: 1.18;
}

.inner-hero h1 {
  font-size: clamp(34px, 3.25vw, 48px);
  line-height: 1.22;
  letter-spacing: clamp(3px, .42vw, 6px);
}

.about-hero .inner-hero-copy {
  width: min(640px, 91.6%);
}

.about-hero {
  min-height: clamp(590px, 72vh, 700px);
}

.about-hero .inner-hero-copy .lede {
  max-width: 500px;
}

.story-copy h2 {
  font-size: clamp(26px, 2.3vw, 31px);
}

.story-copy p:not(.eyebrow),
.goal-grid p,
.brand-statement p,
.project-detail p,
.global-reach p,
.global-reach li,
.project-cta p {
  font-size: 11px;
}

.principles div,
.team-card p {
  font-size: 9px;
}

.service-grid p,
.service-grid a,
.cta p,
.project-detail h3,
.project-detail a,
.process-detail p,
.process-summary-heading > p:last-child {
  font-size: 10px;
}

.partners .section-kicker,
.project-card p,
.project-detail small,
.process-detail small,
.process-hint {
  font-size: 9px;
}

.goal-grid h3,
.team-card h3,
.service-grid h3,
.project-card h3 {
  font-size: 12px;
}

.brand-statement {
  grid-template-columns: minmax(80px, 110px) minmax(360px, 1.35fr) minmax(280px, 1fr);
  gap: clamp(30px, 4vw, 58px);
  padding: 42px clamp(5%, 7vw, 8%);
}

.brand-statement h2 {
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.48;
}

.site-footer {
  width: 100%;
  grid-template-columns:
    minmax(220px, 1.5fr)
    minmax(105px, .72fr)
    minmax(170px, 1fr)
    minmax(190px, 1.1fr);
  gap: clamp(24px, 3vw, 48px);
  padding: 42px clamp(28px, 4.2vw, 68px);
  font-size: 10px;
  line-height: 1.85;
}

.site-footer > div,
.site-footer .brand {
  min-width: 0;
}

.site-footer h2 {
  margin-bottom: 12px;
  font-size: 10px;
  letter-spacing: 1.4px;
}

.site-footer a,
.site-footer p {
  max-width: 100%;
}

.site-footer .footer-logo,
.site-footer .brand-logo {
  width: min(210px, 100%);
  max-width: 100%;
}

@media (max-width: 1100px) {
  .site-footer {
    grid-template-columns: minmax(220px, 1.25fr) repeat(3, minmax(130px, 1fr));
    gap: 30px;
  }

  .brand-statement {
    grid-template-columns: 85px minmax(300px, 1fr);
  }

  .brand-statement p {
    grid-column: 2;
    padding: 0;
    border-left: 0;
  }
}

@media (max-width: 900px) {
  .site-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  h1,
  .inner-hero h1 {
    font-size: clamp(30px, 9vw, 36px);
    line-height: 1.24;
    letter-spacing: 3px;
  }

  .lede {
    font-size: 12px;
  }

  .about-hero .inner-hero-copy {
    width: auto;
  }

  .brand-statement {
    display: block;
  }

  .site-footer {
    grid-template-columns: 1fr;
    font-size: 11px;
  }

  .site-footer .footer-brand {
    grid-column: auto;
  }
}

/* Contact page and restrained architectural glass effects */
.contact-page {
  --glass-x: 34%;
  --glass-y: 18%;
}

.contact-hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  padding: 155px clamp(28px, 6vw, 92px) 90px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(3,12,18,.96), rgba(3,12,18,.68) 45%, rgba(3,12,18,.28)),
    url("assets/projects/verified/palm-beach-island-4k.webp") center / cover no-repeat;
}

.contact-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(112deg, transparent 0 44%, rgba(232,240,241,.055) 44.08%, transparent 44.22%),
    linear-gradient(180deg, transparent 58%, #07131a 100%);
  pointer-events: none;
}

.contact-ambient {
  position: absolute;
  z-index: -1;
  top: 18%;
  right: 2%;
  width: min(48vw, 720px);
  aspect-ratio: 1;
  border: 1px solid rgba(213,224,227,.08);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(194,125,67,.08), transparent 64%);
  animation: contact-ambient 12s ease-in-out infinite;
}

.contact-intro {
  max-width: 700px;
  margin-bottom: 54px;
}

.contact-intro h1 {
  max-width: 680px;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.16;
}

.contact-intro .lede {
  max-width: 610px;
  color: #d7dcdd;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .7fr);
  align-items: stretch;
  gap: clamp(22px, 3vw, 42px);
  max-width: 1240px;
}

.glass-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(222,232,234,.2);
  background:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255,255,255,.085), transparent 27%),
    linear-gradient(145deg, rgba(210,224,228,.12), rgba(9,24,32,.48) 46%, rgba(6,18,25,.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.3);
  backdrop-filter: blur(20px) saturate(1.08);
  -webkit-backdrop-filter: blur(20px) saturate(1.08);
  transition: border-color .55s ease, box-shadow .55s ease;
}

.glass-panel:hover,
.glass-panel:focus-within {
  border-color: rgba(221,161,111,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 36px 95px rgba(0,0,0,.36);
}

.glass-sheen {
  position: absolute;
  z-index: 0;
  inset: -80% -40%;
  pointer-events: none;
  opacity: .48;
  background: linear-gradient(112deg, transparent 42%, rgba(255,255,255,.12) 49%, rgba(210,224,228,.035) 52%, transparent 59%);
  transform: translateX(-24%);
  animation: glass-sheen 11s ease-in-out infinite;
}

.contact-form {
  display: grid;
  gap: 22px;
  padding: clamp(28px, 4.2vw, 58px);
}

.contact-form > *,
.contact-details > * {
  position: relative;
  z-index: 1;
}

.inquiry-trap {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.contact-form-status {
  padding: 13px 15px;
  border: 1px solid rgba(211, 150, 100, .45);
  color: #f4e5d7;
  background: rgba(196, 122, 58, .12);
  font: 500 11px/1.55 "Montserrat", sans-serif;
  letter-spacing: .35px;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.contact-form label {
  display: grid;
  gap: 9px;
  color: #dfe4e5;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(221,230,232,.28);
  border-radius: 0;
  padding: 12px 2px;
  outline: none;
  color: #f3f1ed;
  background: transparent;
  font: 300 13px/1.65 "Montserrat", sans-serif;
  transition: border-color .35s ease, background .35s ease, padding .35s ease;
}

.contact-form textarea {
  min-height: 118px;
  resize: vertical;
}

.contact-form select {
  color-scheme: dark;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: #d28a50;
  padding-right: 10px;
  padding-left: 10px;
  background: rgba(255,255,255,.035);
}

.contact-form ::placeholder {
  color: #899398;
}

.form-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-top: 5px;
}

.form-action p {
  max-width: 310px;
  margin: 0;
  color: #929da1;
  font-size: 10px;
  line-height: 1.7;
}

.contact-form .button {
  border-color: #ce8248;
  background: transparent;
  cursor: pointer;
}

.contact-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 35px;
  padding: clamp(30px, 4vw, 52px);
}

.contact-brand {
  display: grid;
  gap: 27px;
}

.contact-logo {
  display: block;
  width: min(100%, 330px);
  height: auto;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 15px 32px rgba(0,0,0,.24));
}

.contact-details p {
  max-width: 360px;
  margin: 0;
  color: #c2c9cb;
  font-size: 12px;
  line-height: 1.85;
}

.contact-capabilities {
  display: grid;
  gap: 0;
}

.contact-capabilities span {
  padding: 13px 0;
  border-top: 1px solid rgba(222,232,234,.13);
  color: #d8dcdd;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1.25px;
  transition: color .35s ease, padding-left .35s ease;
}

.contact-capabilities span:hover {
  padding-left: 7px;
  color: #e1a16e;
}

@keyframes glass-sheen {
  0%, 20% { transform: translateX(-30%); opacity: 0; }
  38% { opacity: .48; }
  58%, 100% { transform: translateX(30%); opacity: 0; }
}

@keyframes contact-ambient {
  50% { transform: translate3d(-18px, 12px, 0) scale(1.04); opacity: .72; }
}

@media (max-width: 900px) {
  .contact-hero {
    padding-top: 125px;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }

  .contact-details {
    min-height: 480px;
  }
}

@media (max-width: 620px) {
  .contact-hero {
    padding: 112px 18px 65px;
  }

  .contact-intro h1 {
    font-size: 36px;
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  .form-action {
    align-items: flex-start;
    flex-direction: column;
  }

  .contact-form,
  .contact-details {
    padding: 28px 22px;
  }
}

/* Final type-scale refinement */
.main-nav a,
.button,
.text-link,
.site-footer h2 {
  font-size: 10px;
}

.eyebrow,
.section-kicker,
.center-label {
  font-size: 10px;
}

.hero h1 {
  font-size: clamp(38px, 3.5vw, 52px);
}

.inner-hero h1 {
  font-size: clamp(34px, 3vw, 46px);
}

.lede {
  font-size: 13px;
  line-height: 1.78;
}

.about-copy > p:not(.eyebrow),
.story-copy p:not(.eyebrow),
.goal-grid p,
.service-grid p,
.project-detail p,
.global-reach p,
.global-reach li,
.reach-copy p,
.project-cta p,
.cta p,
.process-summary-heading > p:last-child,
.service-pillars p {
  font-size: 11px;
  line-height: 1.8;
}

.principles div,
.team-card p,
.project-card p,
.project-detail small,
.project-detail a,
.partners .section-kicker,
.process-hint {
  font-size: 10px;
}

.service-grid h3,
.goal-grid h3,
.team-card h3,
.project-card h3 {
  font-size: 12px;
}

.project-detail h2 {
  font-size: clamp(18px, 1.55vw, 22px);
}

.project-detail h3 {
  font-size: 11px;
}

.process-summary-heading h2 {
  font-size: clamp(28px, 2.7vw, 39px);
}

.site-footer {
  font-size: 10px;
}

@media (max-width: 620px) {
  .hero h1,
  .inner-hero h1 {
    font-size: clamp(30px, 8.4vw, 35px);
  }

  .lede {
    font-size: 12px;
  }

  .contact-logo {
    width: min(100%, 285px);
  }
}

/* Home page framed reveal */
.home-page.intro-playing {
  overflow: hidden;
}

.intro-reveal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
  opacity: 0;
  visibility: hidden;
}

.intro-reveal.is-playing {
  opacity: 1;
  visibility: visible;
}

.intro-panel {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: calc(50% + 2px);
  background:
    linear-gradient(112deg, transparent 32%, rgba(190,211,220,.035) 32.15%, transparent 32.35%),
    radial-gradient(circle at 50% 42%, rgba(21,49,65,.34), transparent 48%),
    linear-gradient(145deg, #061722, #020b12 72%);
  box-shadow: inset 0 0 0 1px rgba(229,237,239,.035);
  will-change: transform;
}

.intro-panel-left {
  left: 0;
}

.intro-panel-right {
  right: 0;
}

.intro-reveal.is-css-fallback .intro-panel-left {
  animation: intro-panel-left 1.62s 1.82s cubic-bezier(.76,0,.18,1) forwards;
}

.intro-reveal.is-css-fallback .intro-panel-right {
  animation: intro-panel-right 1.62s 1.82s cubic-bezier(.76,0,.18,1) forwards;
}

.intro-mark {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.intro-door {
  display: block;
  width: auto;
  height: 96vh;
  max-width: 96vw;
  overflow: visible;
  filter: drop-shadow(0 0 18px rgba(218,228,231,.1));
}

/* On wide displays, keep the opening mark at a considered architectural
   scale. The mobile version intentionally stays larger and is handled by
   the narrow-screen rules below. */
@media (min-width: 901px) {
  .intro-door {
    height: min(66vh, 640px);
    max-width: 58vw;
  }
}

.intro-door path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.intro-door-half {
  transform-box: fill-box;
  transform-origin: center;
}

.intro-door-half path {
  stroke: #eeeae3;
  stroke-width: 5;
  stroke-dasharray: 1100;
  stroke-dashoffset: 1100;
  filter: drop-shadow(0 0 10px rgba(236,241,241,.1));
}

.intro-door-seam {
  stroke: #c77a3d;
  stroke-width: 6;
  stroke-dasharray: 950;
  stroke-dashoffset: 950;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 13px rgba(199,122,61,.4));
}

.intro-door-seam-blue {
  fill: none;
  stroke: #00aeef;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 950;
  stroke-dashoffset: 950;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 12px rgba(0,174,239,.34));
}

.intro-reveal.is-css-fallback .intro-door-seam {
  animation:
    intro-seam-draw .8s .05s cubic-bezier(.4,0,.2,1) forwards,
    intro-seam-open 1.62s 1.82s cubic-bezier(.76,0,.18,1) forwards;
}

.intro-reveal.is-css-fallback .intro-door-seam-blue {
  animation:
    intro-seam-draw .8s .11s cubic-bezier(.4,0,.2,1) forwards,
    intro-seam-open 1.62s 1.82s cubic-bezier(.76,0,.18,1) forwards;
}

.intro-reveal.is-css-fallback .intro-door-half path {
  animation: intro-door-draw 1.05s .42s cubic-bezier(.4,0,.2,1) forwards;
}

.intro-reveal.is-css-fallback .intro-logo-left {
  animation: intro-door-left-open 1.62s 1.82s cubic-bezier(.76,0,.18,1) forwards;
}

.intro-reveal.is-css-fallback .intro-logo-right {
  animation: intro-door-right-open 1.62s 1.82s cubic-bezier(.76,0,.18,1) forwards;
}

.intro-reflection {
  position: absolute;
  z-index: 4;
  top: -15%;
  bottom: -15%;
  left: -18%;
  width: 16%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(235,243,244,.16), rgba(255,255,255,.035), transparent);
  transform: skewX(-12deg);
}

.intro-reveal.is-css-fallback .intro-reflection {
  animation: intro-reflection-pass 1.48s 1.72s ease-in-out forwards;
}

.home-page.intro-css-fallback .hero {
  animation: intro-hero-focus 3.65s cubic-bezier(.2,.7,.2,1) both;
}

.home-page.intro-css-fallback .site-header,
.home-page.intro-css-fallback .hero-copy,
.home-page.intro-css-fallback .scroll-cue {
  animation: intro-content-arrive .95s 2.82s cubic-bezier(.22,.61,.36,1) both;
}

.home-page.intro-css-fallback .site-header {
  animation-name: intro-content-fade;
}

.intro-grid {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0;
  background-image:
    linear-gradient(rgba(167,198,211,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167,198,211,.03) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, #000, transparent 62%);
  -webkit-mask-image: radial-gradient(circle at center, #000, transparent 62%);
}

.intro-reveal.is-css-fallback .intro-grid {
  animation: intro-grid-breathe 2.45s .28s ease forwards;
}

.intro-guides {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0;
}

.intro-guides i {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(222,231,233,.25), transparent);
}

.intro-guides i:nth-child(1),
.intro-guides i:nth-child(2) {
  top: calc(50% - 170px);
  left: 50%;
  width: min(680px, 88vw);
  height: 1px;
  transform: translateX(-50%);
}

.intro-guides i:nth-child(2) {
  top: calc(50% + 170px);
}

.intro-guides i:nth-child(3),
.intro-guides i:nth-child(4) {
  top: 50%;
  left: calc(50% - 290px);
  width: 1px;
  height: min(460px, 68vh);
  transform: translateY(-50%);
  background: linear-gradient(transparent, rgba(222,231,233,.2), transparent);
}

.intro-guides i:nth-child(4) {
  right: calc(50% - 290px);
  left: auto;
}

.intro-reveal.is-css-fallback .intro-guides {
  animation: intro-guides-arrive 2.5s .44s ease forwards;
}

.intro-edge {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  width: 3px;
  opacity: 0;
  background: linear-gradient(transparent 2%, #c77a3d 18%, #d99560 50%, #c77a3d 82%, transparent 98%);
  box-shadow: 0 0 16px rgba(199,122,61,.4), 0 0 34px rgba(199,122,61,.18);
  will-change: transform, opacity;
}

.intro-edge-left { left: calc(50% - 1px); }
.intro-edge-right { right: calc(50% - 1px); }

.intro-reveal.is-css-fallback .intro-edge-left {
  animation: intro-edge-left 1.62s 1.82s cubic-bezier(.76,0,.18,1) forwards;
}

.intro-reveal.is-css-fallback .intro-edge-right {
  animation: intro-edge-right 1.62s 1.82s cubic-bezier(.76,0,.18,1) forwards;
}

@keyframes intro-seam-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes intro-door-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes intro-seam-open {
  0% { opacity: 1; stroke-width: 6; transform: scaleY(1); }
  18% { opacity: 1; stroke-width: 11; }
  55% { opacity: .72; stroke-width: 3; }
  100% { opacity: 0; stroke-width: 1; transform: scaleY(1.04); }
}

@keyframes intro-door-left-open {
  0% { opacity: 1; transform: translateX(0); }
  72% { opacity: .82; }
  100% { opacity: 0; transform: translateX(-72vw); }
}

@keyframes intro-door-right-open {
  0% { opacity: 1; transform: translateX(0); }
  72% { opacity: .82; }
  100% { opacity: 0; transform: translateX(72vw); }
}

@keyframes intro-panel-left {
  to { transform: translateX(-101%); }
}

@keyframes intro-panel-right {
  to { transform: translateX(101%); }
}

@keyframes intro-reflection-pass {
  0% { left: -18%; opacity: 0; }
  22% { opacity: .55; }
  72% { opacity: .18; }
  100% { left: 112%; opacity: 0; }
}

@keyframes intro-grid-breathe {
  0% { opacity: 0; transform: scale(1.04); }
  25%, 70% { opacity: .7; }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes intro-guides-arrive {
  0% { opacity: 0; transform: scale(.93); }
  28%, 68% { opacity: .72; }
  100% { opacity: 0; transform: scale(1.02); }
}

@keyframes intro-edge-left {
  0% { opacity: 0; left: calc(50% - 1px); }
  14%, 78% { opacity: .72; }
  100% { opacity: 0; left: -2px; }
}

@keyframes intro-edge-right {
  0% { opacity: 0; right: calc(50% - 1px); }
  14%, 78% { opacity: .72; }
  100% { opacity: 0; right: -2px; }
}

@keyframes intro-hero-focus {
  from { background-size: 108% auto; filter: saturate(.75) brightness(.62); }
  52% { filter: saturate(.88) brightness(.82); }
  to { background-size: 100% auto; filter: none; }
}

@keyframes intro-content-arrive {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes intro-content-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 900px) {
  .intro-door {
    height: 91vh;
  }

  @keyframes intro-hero-focus {
    from { background-size: auto 108%; filter: saturate(.82) brightness(.72); }
    to { background-size: auto 100%; filter: none; }
  }
}

@media (max-width: 620px) {
  .intro-door {
    height: 86vh;
    max-width: 104vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-reveal {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-ambient,
  .glass-sheen {
    animation: none;
  }

  .glass-panel {
    transform: none !important;
  }
}

/* One-way process reveal and a softer hero handoff */
.services-hero {
  z-index: 1;
  min-height: clamp(610px, 76vh, 735px);
}

.services-hero-transition {
  z-index: 2;
  height: 150px;
  opacity: .88;
  background:
    linear-gradient(112deg, transparent 0 24%, rgba(230,238,240,.055) 24.08%, transparent 24.22% 67%, rgba(230,238,240,.04) 67.08%, transparent 67.22%),
    linear-gradient(180deg, transparent 0%, rgba(8,24,32,.045) 46%, rgba(7,20,27,.42) 100%);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  mask-image: linear-gradient(180deg, transparent, #000 68%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 68%);
}

.services-hero-transition::before {
  content: "";
  position: absolute;
  right: 4%;
  bottom: 22px;
  left: 4%;
  height: 54px;
  border: 1px solid rgba(224,233,235,.12);
  border-bottom: 0;
  background: linear-gradient(120deg, rgba(228,237,239,.055), rgba(7,20,27,.08) 48%, rgba(196,122,58,.035));
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  transform: perspective(700px) rotateX(67deg);
  transform-origin: center bottom;
}

.services-hero-transition::after {
  right: 12%;
  left: 12%;
  opacity: .28;
  background: linear-gradient(90deg, transparent, rgba(222,231,233,.5), rgba(196,122,58,.42), rgba(222,231,233,.5), transparent);
}

.services-hero + .process-scroll {
  z-index: 3;
  margin-top: -62px;
  padding-top: 62px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(111,137,148,.13), transparent 24%),
    radial-gradient(circle at 50% 44%, rgba(27,46,57,.44), transparent 42%),
    #06131b;
}

.services-hero + .process-scroll::before {
  top: 0;
  height: 64px;
  border-top: 1px solid rgba(222,231,233,.12);
  background:
    linear-gradient(112deg, transparent 15%, rgba(225,234,236,.045) 15.08%, transparent 15.2% 72%, rgba(225,234,236,.035) 72.08%, transparent 72.2%),
    linear-gradient(180deg, rgba(10,27,35,.36), #06131b);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.process-scroll.is-reveal-locked .process-stage {
  --center-reveal: 1;
  --graphic-reveal: 1;
  --loop-progress: 1;
  --route-progress: 1;
}

/* Selective glass accents used only at key interaction points */
.site-header.is-scrolled {
  background:
    linear-gradient(110deg, rgba(220,232,235,.055), transparent 32%),
    rgba(5,14,19,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 12px 32px rgba(0,0,0,.18);
}

.button::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(112deg, transparent 34%, rgba(255,255,255,.22) 48%, transparent 62%);
  transform: translateX(-70%);
  transition: transform .7s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
}

.button:hover::after,
.button:focus-visible::after {
  opacity: .48;
  transform: translateX(70%);
}

.project-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  border: 1px solid transparent;
  background: linear-gradient(135deg, rgba(255,255,255,.09), transparent 24%) border-box;
  opacity: 0;
  transition: opacity .5s ease;
}

.project-card:hover::after,
.project-card:focus-visible::after {
  opacity: .55;
}

.team-card img {
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 18px 42px rgba(12,24,29,.12);
  transition: box-shadow .5s ease, filter .5s ease;
}

.team-card:hover img {
  filter: saturate(.94);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 24px 54px rgba(12,24,29,.18);
}

.project-cta {
  position: relative;
  isolation: isolate;
}

.project-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10px 5%;
  pointer-events: none;
  border-top: 1px solid rgba(255,255,255,.48);
  background: linear-gradient(115deg, rgba(255,255,255,.13), transparent 22%);
  opacity: .48;
}

@media (max-width: 900px) {
  .services-hero + .process-scroll {
    margin-top: -34px;
    padding-top: 34px;
  }

  .services-hero-transition {
    height: 105px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button::after {
    display: none;
  }
}

/* U.S. project map */
.us-project-reach {
  grid-template-columns: minmax(220px, 22%) minmax(430px, 50%) minmax(250px, 28%);
  min-height: 520px;
}

.us-project-map {
  aspect-ratio: 959 / 593;
}

.us-project-map > img {
  opacity: .72;
  filter: grayscale(1) brightness(.46) sepia(.14) saturate(.6) contrast(1.14);
  transition: opacity .55s ease, filter .55s ease;
}

.us-project-map:hover > img,
.us-project-map:focus-within > img {
  opacity: .9;
  filter: grayscale(1) brightness(.54) sepia(.16) saturate(.7) contrast(1.08);
}

.us-project-map::after {
  inset: -1%;
  background:
    linear-gradient(90deg, #07141c, transparent 8%, transparent 94%, #07141c),
    linear-gradient(#07141c, transparent 8%, transparent 92%, #07141c);
}

.location-brentwood { left: 11.2%; top: 57.4%; }
.location-dunbar { left: 69.7%; top: 58.3%; }
.location-palm-beach { left: 82.8%; top: 89.1%; }
.location-dunbar::before { animation-delay: 1.05s; }
.location-palm-beach::before { animation-delay: 2.1s; }

/* Technical product library */
.product-library {
  margin: clamp(44px, 7vw, 104px) 0 clamp(64px, 8vw, 120px);
  border-top: 1px solid rgba(255,255,255,.2);
  border-bottom: 1px solid rgba(255,255,255,.2);
  overflow: hidden;
}

.product-library-materials {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid rgba(255,255,255,.2);
  background: #07151c;
}

.product-library-materials button {
  position: relative;
  min-height: 72px;
  appearance: none;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.13);
  color: rgba(244,241,234,.52);
  background: transparent;
  font: 500 .76rem/1 Montserrat, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .25s ease, background .25s ease;
}

.product-library-materials button:last-child { border-right: 0; }
.product-library-materials button::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 2px;
  background: #bd6b32;
  transition: left .3s ease, right .3s ease;
}
.product-library-materials button:hover,
.product-library-materials button:focus-visible,
.product-library-materials button.is-active { color: #f4f1ea; background: rgba(255,255,255,.035); }
.product-library-materials button.is-active::after { left: 0; right: 0; }

.product-library-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr);
  height: 620px;
  min-height: 0;
}

.product-library-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  width: 100%;
  height: 620px;
  overflow: hidden;
  border: 1px solid rgba(222,232,234,.2);
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.12), transparent 25%),
    linear-gradient(145deg, rgba(210,224,228,.16), rgba(9,24,32,.5) 46%, rgba(6,18,25,.82)),
    #0b1a22;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset -30px -30px 90px rgba(0,0,0,.2);
  backdrop-filter: blur(20px) saturate(1.08);
  -webkit-backdrop-filter: blur(20px) saturate(1.08);
  isolation: isolate;
}

.product-library-visual::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: clamp(14px, 2vw, 28px);
  border: 1px solid rgba(226,237,239,.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 1px 0 0 rgba(255,255,255,.04),
    0 22px 70px rgba(0,0,0,.18);
  pointer-events: none;
}

.product-library-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  inset: -65% -35%;
  opacity: .5;
  background: linear-gradient(112deg, transparent 42%, rgba(255,255,255,.14) 49%, rgba(210,224,228,.04) 52%, transparent 59%);
  transform: translateX(-24%);
  animation: glass-sheen 11s ease-in-out infinite;
}

.product-library-visual img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 2px;
  backface-visibility: hidden;
  image-rendering: auto;
  transform: translateZ(0);
  will-change: opacity, transform;
  padding: clamp(46px, 6vw, 88px);
  filter: drop-shadow(0 24px 36px rgba(0,0,0,.22));
  transition: opacity .18s ease, transform .55s cubic-bezier(.2,.7,.2,1);
}

.product-library-visual img.is-architectural-photo {
  width: calc(100% - clamp(64px, 8vw, 112px));
  height: auto;
  aspect-ratio: 16 / 9;
  padding: 0;
  object-fit: cover;
  image-rendering: auto;
}

/* The 38/54 technical plates carry a left-side structural mass. A restrained
   optical nudge keeps the assembly centered in the glass frame without
   changing the shared carousel dimensions or cropping its details. */
.product-library-visual img.is-series-plate {
  width: calc(100% - clamp(64px, 8vw, 112px) + 24px);
  transform: translateX(-12px);
}

.product-library-watermark {
  position: absolute;
  left: 3%;
  bottom: -6%;
  z-index: 0;
  margin: 0;
  color: rgba(225,236,238,.075);
  font-size: clamp(7rem, 17vw, 16rem);
  font-weight: 500;
  line-height: .8;
  letter-spacing: -.08em;
}

.product-library-coordinate {
  position: absolute;
  z-index: 4;
  top: clamp(16px, 2.4vw, 30px);
  left: clamp(16px, 2.4vw, 30px);
  padding: 4px 7px 4px 8px;
  color: rgba(236,242,243,.52);
  background: rgba(7,20,28,.46);
  box-shadow: inset 2px 0 0 rgba(196,122,58,.44), 0 0 0 1px rgba(226,237,239,.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: .64rem;
  letter-spacing: .16em;
}

.product-library-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  height: 620px;
  overflow: hidden;
  padding: clamp(38px, 5vw, 72px);
  background: #0a1a22;
}

.product-library-copy h3 {
  max-width: 9ch;
  margin: 20px 0 24px;
  color: #f4f1ea;
  font-size: clamp(2.35rem, 4.2vw, 4.8rem);
  font-weight: 300;
  line-height: .96;
  letter-spacing: -.045em;
}

.product-library-copy > p:not(.system-card-index) {
  max-width: 42ch;
  margin: 0 0 28px;
  color: rgba(244,241,234,.72);
  font-size: clamp(1rem, 1.15vw, 1.16rem);
  line-height: 1.7;
}

.product-library-copy ul {
  display: grid;
  gap: 0;
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
}

.product-library-copy li {
  position: relative;
  padding: 11px 0 11px 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(244,241,234,.88);
  font-size: .82rem;
  letter-spacing: .06em;
}

.product-library-copy li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #bd6b32;
  transform: translateY(-50%);
}

.product-library-copy .text-link { align-self: flex-start; }

.product-library-nav {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  border-top: 1px solid rgba(255,255,255,.2);
  background: #07151c;
}

.product-library-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}

.product-library-tabs::-webkit-scrollbar { display: none; }

.product-library-tabs button,
.product-library-arrows button {
  appearance: none;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.13);
  border-radius: 0;
  color: rgba(244,241,234,.48);
  background: transparent;
  font: inherit;
  cursor: pointer;
  transition: color .25s ease, background .25s ease;
}

.product-library-tabs button {
  flex: 1 0 128px;
  position: relative;
  min-height: 88px;
  padding: 18px;
  text-align: left;
  font-size: .78rem;
  letter-spacing: .08em;
}

.product-library-tabs button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: #bd6b32;
  transition: right .35s ease;
}

.product-library-tabs button span {
  display: block;
  margin-bottom: 8px;
  color: #bd6b32;
  font-size: .64rem;
}

.product-library-tabs button:hover,
.product-library-tabs button:focus-visible,
.product-library-tabs button.is-active { color: #f4f1ea; background: rgba(255,255,255,.035); }
.product-library-tabs button.is-active::after { right: 0; }

.product-library-arrows { display: grid; grid-template-columns: repeat(2, 64px); }
.product-library-arrows button { position: relative; border-right: 0; border-left: 1px solid rgba(255,255,255,.13); font-size: 0; }
.product-library-arrows button::before { content: ""; display: block; width: 10px; height: 10px; margin: auto; border-top: 1px solid currentColor; border-right: 1px solid currentColor; }
.product-library-arrows button[data-product-prev]::before { transform: rotate(-135deg) translate(-2px, -2px); }
.product-library-arrows button[data-product-next]::before { transform: rotate(45deg) translate(-2px, -2px); }
.product-library-arrows button:hover,
.product-library-arrows button:focus-visible { color: #fff; background: #bd6b32; }

.product-library.is-changing .product-library-visual img { opacity: 0; transform: scale(.975); }
.product-library.is-changing .product-library-copy > * { opacity: .58; }
.product-library-copy > * { transition: opacity .18s ease; }

.titoni-social {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 22px 24px;
  border-top: 1px solid rgba(255,255,255,.13);
  background: #0a1a22;
}

.titoni-social > div > span {
  display: block;
  margin-bottom: 5px;
  color: #bd6b32;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.titoni-social p { margin: 0; color: rgba(244,241,234,.82); font-size: .86rem; letter-spacing: .04em; }
.titoni-social nav { display: flex; align-items: center; gap: 8px; }

.titoni-social a {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}

.titoni-social a img { width: 17px; height: 17px; opacity: .8; transition: opacity .25s ease; }
.titoni-social a img.icon-invert { filter: invert(1); }
.titoni-social a span {
  position: absolute;
  right: 0;
  bottom: calc(100% + 9px);
  padding: 5px 8px;
  border-radius: 2px;
  color: #f4f1ea;
  background: #07151c;
  font-size: .66rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(3px);
  transition: opacity .2s ease, transform .2s ease;
}

.titoni-social a:hover,
.titoni-social a:focus-visible { border-color: #bd6b32; background: #bd6b32; transform: translateY(-2px); }
.titoni-social a:hover img,
.titoni-social a:focus-visible img { opacity: 1; }
.titoni-social a:hover span,
.titoni-social a:focus-visible span { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  .product-library-stage { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .product-library-visual { height: clamp(380px, 68vw, 520px); }
  .product-library-visual img { height: 100%; min-height: 0; }
  .product-library-visual img.is-architectural-photo { height: auto; }
  .product-library-copy { height: 480px; min-height: 0; }
  .product-library-tabs button { flex-basis: 132px; }
}

@media (max-width: 560px) {
  .product-library { margin-inline: -20px; }
  .product-library-materials { display: flex; overflow-x: auto; scrollbar-width: none; }
  .product-library-materials::-webkit-scrollbar { display: none; }
  .product-library-materials button { flex: 0 0 118px; min-height: 64px; }
  .product-library-visual { height: 390px; }
  .product-library-visual img { height: 100%; padding: 30px 18px; }
  .product-library-visual img.is-architectural-photo { width: calc(100% - 36px); max-height: 326px; height: auto; padding: 0; }
  .product-library-visual img.is-series-plate {
    width: calc(100% - 42px);
    max-height: 326px;
    transform: translateX(-4px);
  }
  .product-library-copy { height: 470px; min-height: 0; padding: 38px 24px; }
  .product-library-nav { grid-template-columns: minmax(0, 1fr) auto; }
  .product-library-arrows { grid-template-columns: repeat(2, 50px); }
  .product-library-tabs button { min-height: 76px; }
  .titoni-social { align-items: flex-start; flex-direction: column; padding: 22px 24px 26px; }
}

/* Mobile product browsing: the stage itself is swipeable, with only two
   floating controls retained. The long secondary tab rail is desktop-only. */
@media (max-width: 560px) {
  .product-library { position: relative; }
  .product-library-materials { scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .product-library-materials button { scroll-snap-align: start; }
  .product-library-nav { position: absolute; top: 405px; right: 24px; z-index: 8; display: block; border: 0; background: transparent; }
  .product-library-tabs { display: none; }
  .product-library-arrows { display: flex; gap: 8px; }
  .product-library-arrows button { width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(7,21,28,.86); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
  .product-library-arrows button:hover,
  .product-library-arrows button:focus-visible { background: #bd6b32; }
}

@media (prefers-reduced-motion: reduce) {
  .product-library-visual img,
  .product-library-copy > * { transition: none; }
}

.us-project-map .map-location em {
  position: absolute;
  left: 18px;
  top: -5px;
  width: max-content;
  max-width: 150px;
  padding: 7px 9px;
  color: #e8e5df;
  border: 1px solid rgba(233,160,104,.35);
  background: rgba(5,16,23,.9);
  box-shadow: 0 8px 22px rgba(0,0,0,.24);
  font-size: 8px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-5px);
  transition: opacity .3s ease, transform .35s ease;
}

.us-project-map .map-location:hover em,
.us-project-map .map-location:focus em,
.us-project-map .map-location.is-highlighted em {
  opacity: 1;
  transform: translateX(0);
}

.project-location-list {
  gap: 10px;
}

.global-reach .project-location-list li {
  min-height: 78px;
  padding: 14px 14px 14px 34px;
  border: 1px solid rgba(255,255,255,.06);
  border-left-color: transparent;
  background: rgba(255,255,255,.018);
  cursor: pointer;
  overflow: hidden;
}

.global-reach .project-location-list li::before {
  top: 21px;
}

.project-location-list img {
  display: block;
  width: calc(100% + 48px);
  height: 0;
  margin: -14px -14px 13px -34px;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: height .5s cubic-bezier(.22,.61,.36,1), opacity .45s ease, transform .7s ease;
}

.project-location-list li.is-highlighted img {
  height: 108px;
  opacity: .78;
  transform: scale(1);
}

.project-location-list li.is-highlighted {
  border-color: rgba(218,137,73,.36);
}

@media (max-width: 1050px) {
  .us-project-reach {
    grid-template-columns: minmax(220px, 30%) 1fr;
    min-height: 0;
  }

  .project-location-list {
    grid-column: 1 / 3;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .project-location-list li.is-highlighted img {
    height: 120px;
  }
}

@media (max-width: 700px) {
  .us-project-reach { display: block; }
  .us-project-map { margin: 34px -8px 26px; aspect-ratio: 959 / 593; }
  .project-location-list { grid-template-columns: 1fr; }
  .global-reach .project-location-list li { min-height: 74px; }
  .project-location-list li.is-highlighted img { height: min(42vw, 180px); }
  .us-project-map .map-location em { font-size: 7px; }
}

@media (max-width: 470px) {
  .us-project-map .map-location em { display: none; }
  .map-location { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .project-location-list img,
  .us-project-map > img,
  .us-project-map .map-location em { transition: none; }
}

/* Site-wide legibility and portrait framing */
.main-nav a,
.button,
.text-link,
.eyebrow,
.section-kicker,
.center-label,
.project-filters button,
.portrait-caption,
.principles div,
.service-grid a,
.team-card p,
.project-card p,
.project-detail small,
.project-detail a,
.partners .section-kicker,
.partner-category,
.partner-link,
.site-footer,
.site-footer h2,
.process-caption small,
.process-hint,
.process-phase small,
.process-detail small,
.process-detail b,
.process-center p,
.process-step h3,
.reach-copy small,
.engineering-luxury,
.contact-form label,
.contact-capabilities span,
.us-project-map .map-location em {
  font-size: 11px;
}

.about-copy > p:not(.eyebrow),
.story-copy p:not(.eyebrow),
.goal-grid p,
.service-grid p,
.partners-intro > p:last-child,
.brand-statement p,
.project-detail p,
.global-reach p,
.global-reach li,
.reach-copy p,
.project-cta p,
.cta p,
.process-caption p,
.process-phase p,
.process-detail p,
.form-action p,
.service-pillars p {
  font-size: 12px;
  line-height: 1.75;
}

.lede {
  font-size: 14px;
}

.project-detail h3,
.service-grid h3,
.goal-grid h3,
.team-card h3,
.project-card h3,
.service-pillars h3,
.process-caption strong {
  font-size: 13px;
}

.team-card img {
  object-position: 50% 6%;
}

.portrait-photo img,
.story-portrait img {
  object-position: 50% 10%;
}

.portrait-photo img {
  object-position: 50% 8%;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  font-size: 13px;
}

.portrait-caption small,
.project-location-list strong,
.project-location-list span {
  font-size: 11px;
}

/* Seamless architectural handoff from Services hero to process canvas */
.services-hero-transition {
  bottom: -2px;
  height: 280px;
  opacity: 1;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(198,126,68,.12), transparent 38%),
    linear-gradient(90deg,
      transparent 0 17%,
      rgba(218,229,232,.045) 17.08%,
      transparent 17.18% 49.92%,
      rgba(220,231,234,.06) 50%,
      transparent 50.08% 82.82%,
      rgba(218,229,232,.04) 82.9%,
      transparent 83%),
    linear-gradient(180deg,
      transparent 0%,
      rgba(5,17,24,.08) 20%,
      rgba(6,19,27,.54) 62%,
      #06131b 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 12%, #000 54%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 12%, #000 54%);
}

.services-hero-transition::before {
  right: 7%;
  bottom: 18px;
  left: 7%;
  height: 150px;
  border: 0;
  background:
    linear-gradient(90deg,
      rgba(225,235,237,.09) 0 1px,
      transparent 1px calc(33.333% - 1px),
      rgba(225,235,237,.075) calc(33.333% - 1px) 33.333%,
      transparent 33.333% calc(66.666% - 1px),
      rgba(225,235,237,.075) calc(66.666% - 1px) 66.666%,
      transparent 66.666% calc(100% - 1px),
      rgba(225,235,237,.09) calc(100% - 1px)),
    linear-gradient(180deg, rgba(222,233,235,.055), rgba(7,20,27,.015));
  box-shadow: inset 0 1px rgba(225,235,237,.09);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transform: perspective(900px) rotateX(72deg);
  transform-origin: center bottom;
}

.services-hero-transition::after {
  right: 6%;
  bottom: 1px;
  left: 6%;
  height: 1px;
  opacity: .6;
  background: linear-gradient(90deg,
    transparent,
    rgba(216,228,231,.22) 18%,
    rgba(204,130,72,.8) 50%,
    rgba(216,228,231,.22) 82%,
    transparent);
  box-shadow: 0 0 20px rgba(196,122,58,.22);
}

.services-hero + .process-scroll {
  margin-top: -126px;
  padding-top: 126px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(149,167,174,.12), transparent 28%),
    radial-gradient(ellipse at 50% 4%, rgba(196,122,58,.055), transparent 21%),
    radial-gradient(circle at 50% 44%, rgba(27,46,57,.44), transparent 42%),
    #06131b;
}

.services-hero + .process-scroll::before {
  top: 0;
  height: 150px;
  border-top: 0;
  background:
    linear-gradient(90deg, transparent, rgba(214,226,229,.028) 34%, rgba(196,122,58,.04) 50%, rgba(214,226,229,.028) 66%, transparent),
    linear-gradient(180deg, rgba(6,19,27,.04), rgba(6,19,27,.82) 72%, #06131b);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 900px) {
  .services-hero-transition { height: 190px; }
  .services-hero + .process-scroll {
    margin-top: -76px;
    padding-top: 76px;
  }
  .services-hero + .process-scroll::before { height: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .services-hero-transition,
  .services-hero-transition::before,
  .services-hero-transition::after {
    transition: none;
  }
}

/* Preserve the architectural base; responsive cropping comes from the sky */
.services-hero {
  background-position: center calc(100% - var(--hero-shift));
}

@media (max-width: 900px) {
  .services-hero {
    background-position: 58% calc(100% - var(--hero-shift));
  }
}

/* Final restrained hero handoff: one fade, no intermediary ornament */
.services-hero-transition {
  bottom: -1px;
  height: 112px;
  opacity: 1;
  background: linear-gradient(180deg,
    rgba(6,19,27,0) 0%,
    rgba(6,19,27,.03) 28%,
    rgba(6,19,27,.18) 62%,
    rgba(6,19,27,.58) 88%,
    #06131b 100%);
  mask-image: none;
  -webkit-mask-image: none;
}

.services-hero-transition::before,
.services-hero-transition::after {
  display: none;
}

.services-hero + .process-scroll {
  margin-top: 0;
  padding-top: 0;
  background:
    radial-gradient(circle at 50% 36%, rgba(27,46,57,.42), transparent 42%),
    #06131b;
}

.services-hero + .process-scroll::before {
  display: none;
}

@media (max-width: 900px) {
  .services-hero-transition { height: 96px; }
  .services-hero + .process-scroll {
    margin-top: 0;
    padding-top: 0;
  }
}

/* True panoramic hero: one full-bleed image, without duplicated edge fill */
.services-hero {
  background:
    linear-gradient(90deg, rgba(3,12,18,.76) 0%, rgba(3,12,18,.46) 34%, rgba(3,12,18,.12) 65%, rgba(3,12,18,.02) 100%),
    url("assets/partners/titoni-minimal-frame-panoramic-4k.webp") center 58% / cover no-repeat;
}

.services-hero::before {
  display: none;
}

.services-hero-photo {
  display: none;
}

@media (max-width: 900px) {
  .services-hero {
    background:
      linear-gradient(90deg, rgba(3,12,18,.78) 0%, rgba(3,12,18,.44) 58%, rgba(3,12,18,.08) 100%),
      url("assets/partners/titoni-minimal-frame-panoramic-4k.webp") 61% 56% / cover no-repeat;
  }
}

@media (max-width: 620px) {
  .lede { font-size: 13px; }
  .team-card img { object-position: 50% 4%; }
}

/* Mobile polish: enlarge the process mark, soften the supplied tile edges,
   and keep the project strip gesture-driven instead of showing edge controls. */
.process-node {
  overflow: hidden;
  border: 1px solid rgba(218,138,79,.2);
  border-radius: 10px;
  background: #0b151b;
  isolation: isolate;
  contain: paint;
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
}

.process-node img {
    border-radius: 9px;
    clip-path: inset(2px round 8px);
    filter: none;
    image-rendering: auto;
}

.project-track {
  touch-action: pan-y pinch-zoom;
  cursor: grab;
}

.project-track:active { cursor: grabbing; }

@media (max-width: 900px) {
  .slider-controls { display: none !important; }
}

@media (max-width: 520px) {
  .process-center-logo {
    width: min(100%, 360px);
    transform: scale(2);
    margin: 12px auto 38px;
  }

    .process-node { border-radius: 12px; box-shadow: 0 12px 24px rgba(0,0,0,.3); }
    .process-node img { border-radius: 10px; clip-path: inset(2px round 10px); }

    .project-arrow { width: 32px; height: 32px; flex-basis: 32px; border-radius: 8px; }
}

/* Final mobile layer pass: keep the menu independent of document scroll and
   mask the source card artwork behind a clean inset frame. */
@media (max-width: 1120px) {
  .site-header { z-index: 10001; }
  .site-header.is-scrolled { transform: none !important; }
  .main-nav,
  .main-nav.open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000 !important;
    width: 100vw;
    height: 100dvh;
    min-height: 100vh;
    overflow-y: auto;
    background:
      linear-gradient(145deg, rgba(11,30,39,.92), rgba(4,14,20,.88) 72%),
      rgba(5,19,26,.88);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    isolation: isolate;
  }
  .main-nav:not(.open) { opacity: 0; pointer-events: none; visibility: hidden; }
  .main-nav.open { opacity: 1; pointer-events: auto; visibility: visible; }
  .menu-toggle { z-index: 10002; }

  .menu-social-links {
    position: absolute;
    right: 0;
    bottom: max(34px, env(safe-area-inset-bottom));
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .menu-social-links > span { position: absolute; bottom: 48px; margin: 0; color: rgba(244,241,234,.56); }
  .main-nav .menu-social-link { padding: 0; font-size: 0; }
  .main-nav .menu-social-link::after { display: none; }

  /* When the menu is open, repeat the social pair directly beneath the header.
     The second pair stays at the closing edge of the menu, making the links
     easy to find without permanently crowding the mobile masthead. */
  .main-nav.open + .header-social-links {
    position: fixed;
    top: max(96px, calc(env(safe-area-inset-top) + 82px));
    left: 50%;
    z-index: 10003;
    display: flex;
    margin: 0;
    padding: 0;
    border-left: 0;
    transform: translateX(-50%);
  }
  .main-nav.open + .header-social-links a {
    width: 32px;
    height: 32px;
    color: rgba(244,241,234,.76);
    border-color: rgba(244,241,234,.16);
    background: rgba(255,255,255,.035);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
  }
}

@media (max-width: 900px) {
  .process-node { padding: 10px; border: 2px solid rgba(218,138,79,.42); border-radius: 15px; background: #0b151b; box-shadow: 0 12px 24px rgba(0,0,0,.3), inset 0 0 0 2px #0b151b; }
  .process-node img { width: 100%; clip-path: inset(1px round 9px); }

  /* The scroll-led process tiles are intentionally omitted on mobile.  The
     concise process summaries remain available below, without forcing a
     330vh gesture sequence that does not translate well to touch screens. */
  .services-hero .button[href="#process"],
  .process-scroll { display: none !important; }
}

/* Site-wide readability pass: preserve hierarchy while removing undersized type */
.main-nav a,
.button,
.text-link,
.project-detail a,
.partner-link,
.project-filters button {
  font-size: 11px;
}

.eyebrow,
.section-kicker,
.partners .section-kicker,
.scroll-cue,
.project-detail small,
.process-caption small,
.process-hint,
.process-phase small,
.reach-copy small {
  font-size: 10px;
}

.lede {
  width: min(500px, 100%);
  font-size: 15px;
  line-height: 1.72;
}

.about-copy > p:not(.eyebrow),
.story-copy p:not(.eyebrow),
.service-grid p,
.partners-intro > p:last-child,
.partner-category,
.cta p,
.brand-statement p,
.goal-grid p,
.project-detail p,
.global-reach p,
.global-reach li,
.project-cta p,
.process-intro > p,
.process-caption p,
.service-pillars p,
.reach-copy p,
.process-phase p {
  font-size: 13px;
  line-height: 1.72;
}

.service-grid h3,
.goal-grid h3,
.project-detail h3,
.process-step h3,
.process-caption strong,
.service-pillars h3,
.process-phase strong {
  font-size: 12px;
}

.portrait-caption,
.project-card p,
.team-card p {
  font-size: 10px;
}

.principles div {
  font-size: 10px;
}

.site-footer,
.site-footer h2 {
  font-size: 11px;
}

@media (max-width: 900px) {
  .lede { font-size: 14px; }
  .main-nav a { font-size: 16px; }
  .about-copy > p:not(.eyebrow),
  .story-copy p:not(.eyebrow),
  .service-grid p,
  .partners-intro > p:last-child,
  .cta p,
  .brand-statement p,
  .goal-grid p,
  .project-detail p,
  .global-reach p,
  .global-reach li,
  .project-cta p,
  .process-intro > p,
  .process-caption p,
  .service-pillars p,
  .reach-copy p,
  .process-phase p {
    font-size: 13px;
  }
}

/* Mobile light surfaces: replace stark white blocks with a softly tinted
   architectural neutral so longer copy stays comfortable to read. */
@media (max-width: 900px) {
  .section-light {
    background:
      linear-gradient(180deg, rgba(224,230,229,.98), rgba(211,220,220,.98)),
      var(--ivory);
    color: #22282c;
  }

  .section-light > .story-copy,
  .section-light > .goals,
  .section-light > .team-section,
  .section-light.project-cta {
    background: linear-gradient(180deg, rgba(233,235,231,.72), rgba(214,222,222,.72));
  }
}

/* Product showcase navigation: keep category, system, and arrows in one
   compact control rail instead of splitting them between distant bars. */
.product-library { position: relative; }
.product-library-materials { display: none; }
.product-library-nav {
  position: absolute;
  z-index: 6;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  min-height: 66px;
  border-top: 0;
  border-bottom: 1px solid rgba(255,255,255,.18);
  background: rgba(7,21,28,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.product-library-category {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 150px;
  padding: 10px 18px;
  border-right: 1px solid rgba(255,255,255,.13);
}
.product-library-category span {
  color: #bd6b32;
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.product-library-category select {
  width: 100%;
  padding: 0 18px 0 0;
  appearance: none;
  border: 0;
  color: #f4f1ea;
  background: linear-gradient(45deg, transparent 50%, #bd6b32 50%) right 7px center / 6px 6px no-repeat,
              linear-gradient(135deg, #bd6b32 50%, transparent 50%) right 3px center / 6px 6px no-repeat,
              transparent;
  font: 500 .72rem/1 Montserrat, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.product-library-category select:focus-visible { outline: 1px solid #bd6b32; outline-offset: 3px; }
.product-library-tabs { min-width: 0; }
.product-library-arrows { grid-template-columns: repeat(2, 58px); }
.product-library-arrows button { display: grid; place-items: center; }
.product-library-arrows button::before {
  width: 11px;
  height: 11px;
  margin: 0;
  transform: rotate(45deg);
}
.product-library-arrows button[data-product-prev]::before { transform: rotate(-135deg); }
.product-library-arrows button[data-product-next]::before { transform: rotate(45deg); }
.product-library-coordinate { top: 82px; }

@media (max-width: 560px) {
  .product-library-nav {
    top: 0;
    min-height: 62px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding-left: 8px;
  }
  .product-library-category {
    min-width: 0;
    padding: 8px 12px;
    border-right: 0;
  }
  .product-library-category select { font-size: .68rem; }
  .product-library-arrows { display: flex; gap: 7px; padding: 8px 10px 8px 0; }
  .product-library-arrows button {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 50%;
    background: rgba(7,21,28,.94);
    box-shadow: 0 5px 14px rgba(0,0,0,.22);
  }
  .product-library-coordinate { top: 76px; }
}

/* Custom category menu: keep the open state in the same midnight/copper
   visual language instead of exposing the browser's white native picker. */
.product-library-category { position: relative; }
.product-library-category-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 3px 0;
  border: 0;
  color: #f4f1ea;
  background: transparent;
  font: 500 .72rem/1 Montserrat, sans-serif;
  letter-spacing: .1em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}
.product-library-category-toggle i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-right: 1px solid #bd6b32;
  border-bottom: 1px solid #bd6b32;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s ease;
}
.product-library-category-toggle[aria-expanded="true"] i { transform: rotate(225deg) translate(-1px, -1px); }
.product-library-category-options {
  position: absolute;
  z-index: 20;
  top: calc(100% - 1px);
  right: 0;
  left: 0;
  overflow: hidden;
  padding: 5px 5px 6px;
  border: 1px solid rgba(196,122,58,.48);
  border-top-color: rgba(196,122,58,.24);
  border-radius: 0 0 2px 2px;
  background: rgba(7,19,26,.98);
  box-shadow: 0 14px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-5px) scaleY(.96);
  transform-origin: top center;
  transition: opacity .18s ease, transform .24s cubic-bezier(.2,.75,.25,1), visibility 0s linear .24s;
}
.product-library-category-options[hidden] { display: none; }
.product-library-category-toggle[aria-expanded="true"] + .product-library-category-options {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scaleY(1);
  transition-delay: 0s;
}
.product-library-category-options button {
  display: block;
  width: 100%;
  padding: 10px 11px;
  border: 0;
  color: rgba(244,241,234,.68);
  background: transparent;
  font: 500 .68rem/1 Montserrat, sans-serif;
  letter-spacing: .1em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}
.product-library-category-options button:hover,
.product-library-category-options button:focus-visible,
.product-library-category-options button[aria-selected="true"] {
  color: #f4f1ea;
  background: linear-gradient(90deg, rgba(196,122,58,.24), rgba(196,122,58,.05));
  outline: none;
}

/* A restrained progress cue makes the carousel feel navigable at a glance. */
.product-library-nav::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #bd6b32 0 var(--product-progress, 20%), rgba(255,255,255,.08) var(--product-progress, 20%) 100%);
  pointer-events: none;
  transition: background .45s ease;
}
.product-library-tabs button span { transition: color .25s ease, transform .25s ease; }
.product-library-tabs button.is-active span { transform: translateX(2px); color: #efb47f; }

/* Keep the material name in the category rail only; the visual watermark is
   an understated systems label rather than another repeated category tag. */
.product-library-watermark {
  letter-spacing: .24em;
}
.product-library-coordinate {
  letter-spacing: .16em;
}

/* Quiet single-line image framing: one copper keyline and a soft inset
   replace the layered glass-box treatment so the product image leads. */
.product-library-stage {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.product-library-visual {
  border: 0;
  border-right: 1px solid rgba(196,122,58,.42);
  box-shadow: inset 0 1px 0 rgba(196,122,58,.68), inset 0 -1px 0 rgba(196,122,58,.36);
}
.product-library-visual::before {
  inset: clamp(16px, 2.4vw, 34px);
  border: 1px solid rgba(196,122,58,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.product-library-visual::after { display: none; }
.product-library-watermark { display: none; }

/* Architectural arrow rail: squared controls replace the paired circular
   buttons so the carousel reads like a framed system, not decorative badges. */
.product-library-arrows {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 9px 12px 9px 0;
}
.product-library-arrows button {
  width: 56px;
  height: 48px;
  border: 1px solid rgba(222,232,234,.28);
  border-radius: 2px;
  background: rgba(7,21,28,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.product-library-arrows button::before {
  width: 11px;
  height: 11px;
  border-width: 1px;
}
.product-library-arrows button:hover,
.product-library-arrows button:focus-visible {
  color: #f4f1ea;
  border-color: rgba(196,122,58,.9);
  background: rgba(189,107,50,.18);
  transform: translateY(-1px);
}
.product-library-arrows button:active { transform: translateY(0); }

@media (max-width: 560px) {
  .product-library-arrows { gap: 6px; padding: 8px 10px 8px 0; }
  .product-library-arrows button {
    width: 44px;
    height: 42px;
    border-radius: 2px;
    background: rgba(7,21,28,.9);
  }
}

/* Unified showcase card: the image frame and its editorial copy now read as
   one composed object instead of two unrelated panels. */
.product-library-stage {
  overflow: hidden;
  border: 1px solid rgba(222,232,234,.22);
  border-radius: 2px;
  background:
    linear-gradient(115deg, rgba(224,235,237,.07), transparent 28%),
    linear-gradient(180deg, #0c1c24, #07151c);
  box-shadow: 0 24px 60px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.product-library-visual {
  border: 0;
  border-right: 1px solid rgba(222,232,234,.18);
  box-shadow: none;
}
.product-library-copy {
  position: relative;
  background: linear-gradient(160deg, rgba(11,31,40,.88), rgba(6,19,27,.96));
}
.product-library-copy::before {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 0;
  width: 1px;
  background: linear-gradient(transparent, rgba(196,122,58,.7), transparent);
}
.product-library-copy h3 { margin-top: 16px; }

@media (max-width: 900px) {
  .product-library-stage {
    border-radius: 10px;
  }
  .product-library-visual {
    border-right: 0;
    border-bottom: 1px solid rgba(222,232,234,.18);
  }
  .product-library-copy {
    height: auto;
    min-height: 390px;
    padding: 34px 24px 42px;
  }
  .product-library-copy::before {
    top: 0;
    right: 10%;
    bottom: auto;
    left: 10%;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(196,122,58,.7), transparent);
  }
}

@media (max-width: 560px) {
  .product-library-visual { height: 390px; }
  .product-library-visual::before { inset: 12px; }
  .product-library-copy { min-height: 370px; }
}

/* Keep the mobile project CTA in the site's midnight/copper language instead
   of letting the light-surface pass wash out its contrast. */
@media (max-width: 900px) {
  .project-cta.section-light {
    color: #f4f1ea;
    background:
      radial-gradient(circle at 78% 16%, rgba(196,122,58,.12), transparent 35%),
      linear-gradient(145deg, #10252e, #07131a 72%);
    border-top: 1px solid rgba(224,233,235,.13);
    border-bottom: 1px solid rgba(224,233,235,.1);
  }
  .project-cta.section-light h2 { color: #f4f1ea; }
  .project-cta.section-light p { color: rgba(244,241,234,.74); }
  .project-cta.section-light .button {
    color: #efb47f;
    border-color: rgba(196,122,58,.86);
    background: rgba(7,19,26,.24);
  }
  .project-cta.section-light .button:hover,
  .project-cta.section-light .button:focus-visible {
    color: #07131a;
    background: #bd6b32;
  }
}

/* Frosted-glass image plinth: reduce the empty lower field and let each
   carousel image sit inside one balanced, suspended panel. */
.product-library-stage { height: 560px; margin-top: clamp(18px, 2.4vw, 30px); }
.product-library-visual {
  height: 560px;
  padding: clamp(22px, 3vw, 38px);
  background:
    radial-gradient(circle at 24% 16%, rgba(255,255,255,.16), transparent 34%),
    linear-gradient(145deg, rgba(213,226,230,.18), rgba(9,24,32,.72) 64%),
    #0b1a22;
}
.product-library-visual::before {
  inset: clamp(18px, 2.5vw, 34px);
  z-index: 0;
  border: 1px solid rgba(231,239,240,.28);
  background: linear-gradient(145deg, rgba(235,243,243,.1), rgba(157,183,188,.035));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 22px 55px rgba(0,0,0,.2);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}
.product-library-visual img,
.product-library-visual img.is-architectural-photo {
  width: calc(100% - clamp(26px, 3vw, 52px));
  height: auto;
  max-height: calc(100% - clamp(26px, 3vw, 52px));
  padding: 0;
  border: 1px solid rgba(238,244,244,.26);
  border-radius: 1px;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.26));
}
.product-library-visual img.is-architectural-photo { object-fit: cover; }
.product-library-visual img.is-series-plate {
  width: calc(100% - clamp(26px, 3vw, 52px));
  transform: translateX(-8px);
}

/* Image-edge navigation keeps browsing legible and removes the detached
   arrow cluster from the category rail. */
.product-library-visual > .product-library-arrows {
  position: absolute;
  z-index: 7;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(8px, 1.2vw, 18px);
  pointer-events: none;
}
.product-library-visual > .product-library-arrows button {
  pointer-events: auto;
  width: 46px;
  height: 54px;
  border-color: rgba(231,239,240,.3);
  background: rgba(7,21,28,.56);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 900px) {
  .product-library-stage { height: auto; margin-top: 16px; }
  .product-library-visual { height: 340px; padding: 18px; }
  .product-library-visual img,
  .product-library-visual img.is-architectural-photo,
  .product-library-visual img.is-series-plate {
    width: calc(100% - 18px);
    max-height: calc(100% - 18px);
  }
  .product-library-visual > .product-library-arrows { padding-inline: 6px; }
  .product-library-visual > .product-library-arrows button { width: 38px; height: 48px; }
}

/* Final carousel copy fit: keep the larger, accessible type inside the
   composed card instead of letting the description push beyond its panel. */
.product-library-copy {
  height: 100%;
  min-height: 0;
}

.product-library-copy > p:not(.system-card-index) {
  max-width: 36ch;
  margin-bottom: 22px;
  font-size: clamp(.88rem, 1vw, 1rem);
  line-height: 1.62;
}

@media (max-width: 900px) {
  .product-library-copy {
    height: auto;
    min-height: 370px;
  }

  .product-library-copy > p:not(.system-card-index) {
    max-width: 38ch;
    margin-bottom: 20px;
    font-size: .9rem;
    line-height: 1.65;
  }
}

/* Desktop process graphic: reserve the fixed header's band and scale the
   animated assembly to the space that remains, so the first node is never
   hidden beneath the navigation bar. */
@media (min-width: 901px) {
  .process-scroll {
    height: auto;
    padding: clamp(48px, 6vw, 92px) 0;
  }

  .process-stage {
    position: relative;
    top: auto;
    height: min(820px, calc(100vh - 94px));
    min-height: 650px;
    padding: 34px 4vw 48px;
    overflow: visible;
    border-block: 1px solid rgba(222,231,233,.08);
  }

  .process-assembly {
    width: min(1220px, 91vw, calc((100vh - 170px) * 1.3333));
    opacity: 1;
    transform: scale(.965);
    transition: transform 1.1s cubic-bezier(.22,.72,.24,1);
  }

  .process-scroll.is-played .process-assembly {
    transform: scale(1);
  }

  .process-node {
    /* The supplied tiles intentionally extend their numbered medallion above
       the card edge.  Keep that artwork fully visible and slightly larger. */
    width: 14.6%;
    overflow: visible;
    contain: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: opacity .65s ease, transform .92s cubic-bezier(.22,.72,.24,1), filter .55s ease;
  }

  .process-node.node-5,
  .process-node.node-6 { width: 13.8%; }

  /* The numbered medallions sit right at the top edge of the supplied artwork.
     Do not inherit the mobile image crop here or the upper arc is shaved off. */
  .process-node img {
    clip-path: none;
    border-radius: 0;
  }

  .process-node.is-current::before {
    z-index: -1;
    inset: -23%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 49%, rgba(255,218,181,.38), rgba(221,144,84,.16) 34%, transparent 70%);
    filter: blur(10px);
    animation: process-step-beacon .78s cubic-bezier(.22,.72,.24,1) both;
  }

  .process-node.is-current {
    filter: drop-shadow(0 0 15px rgba(230,151,90,.34)) drop-shadow(0 0 30px rgba(196,122,58,.2));
  }

  .process-node.is-current img {
    filter:
      drop-shadow(0 14px 24px rgba(0,0,0,.46))
      drop-shadow(0 0 12px rgba(239,167,111,.58))
      brightness(1.07) saturate(1.04);
    animation: process-current-card .78s cubic-bezier(.22,.72,.24,1) both;
  }

  .process-node.is-trailing {
    filter: drop-shadow(0 0 10px rgba(230,151,90,.16));
  }

  .process-node.is-trailing::before {
    z-index: -1;
    inset: -25%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 49%, rgba(255,218,181,.20), rgba(221,144,84,.08) 38%, transparent 72%);
    filter: blur(13px);
    animation: process-step-afterglow .98s cubic-bezier(.22,.61,.36,1) both;
  }

  .process-node.is-trailing img {
    filter:
      drop-shadow(0 11px 20px rgba(0,0,0,.38))
      drop-shadow(0 0 9px rgba(239,167,111,.36))
      brightness(1.02) saturate(1.02);
    transition: filter .85s ease;
  }

  .process-scroll:not(.is-played) .process-center-logo {
    opacity: .28;
    transform: scale(.86);
  }

  .process-reveal-control {
    position: absolute;
    z-index: 20;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    gap: 8px;
    width: 210px;
    height: 210px;
    padding: 26px;
    border: 1px solid rgba(225,157,100,.62);
    border-radius: 50%;
    color: #f4f1ea;
    background:
      radial-gradient(circle at 34% 22%, rgba(242,250,251,.18), transparent 26%),
      linear-gradient(140deg, rgba(196,225,229,.16), rgba(10,30,39,.5) 48%, rgba(5,18,25,.74)),
      rgba(6,19,27,.72);
    box-shadow: 0 0 0 16px rgba(196,122,58,.045), 0 20px 48px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.24), inset 0 -18px 30px rgba(2,11,16,.22);
    overflow: hidden;
    backdrop-filter: blur(14px) saturate(1.16);
    -webkit-backdrop-filter: blur(14px) saturate(1.16);
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: color .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease, opacity .35s ease, transform .4s cubic-bezier(.22,.72,.24,1);
  }

  .process-reveal-control::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    opacity: .9;
    background:
      linear-gradient(118deg, rgba(255,255,255,.28), transparent 21% 57%, rgba(255,255,255,.06) 67%, transparent 76%),
      radial-gradient(ellipse at 50% -16%, rgba(255,255,255,.24), transparent 51%);
    pointer-events: none;
    transition: opacity .35s ease, transform .65s cubic-bezier(.22,.72,.24,1);
  }

  /* A single, full-width reflection gives the resting control a convincing
     glass surface without the cut-off look of a narrow moving strip. */
  .process-scroll:not(.is-played) .process-reveal-control::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(112deg, transparent 37%, rgba(229,248,249,.08) 44%, rgba(255,255,255,.48) 50%, rgba(211,240,242,.12) 56%, transparent 64%);
    transform: translateX(-108%);
    animation: process-control-wink 5.6s cubic-bezier(.22,.65,.25,1) infinite;
  }

  .process-reveal-control span,
  .process-reveal-control strong,
  .process-reveal-control i {
    z-index: 1;
  }

  .process-reveal-control span {
    color: #d48a50;
    font-size: .56rem;
    letter-spacing: .19em;
    text-transform: uppercase;
  }

  .process-reveal-control strong {
    max-width: 11ch;
    font-size: .95rem;
    font-weight: 400;
    letter-spacing: .08em;
    line-height: 1.35;
    text-transform: uppercase;
  }

  .process-reveal-control i {
    position: relative;
    width: 28px;
    height: 1px;
    background: #d48a50;
  }

  .process-reveal-control i::after {
    content: "";
    position: absolute;
    right: 0;
    top: -3px;
    width: 7px;
    height: 7px;
    border-top: 1px solid #d48a50;
    border-right: 1px solid #d48a50;
    transform: rotate(45deg);
  }

  .process-reveal-control:hover,
  .process-reveal-control:focus-visible {
    border-color: #efb47f;
    color: #fff;
    background:
      radial-gradient(circle at 34% 22%, rgba(242,250,251,.27), transparent 26%),
      linear-gradient(140deg, rgba(196,225,229,.25), rgba(12,37,48,.58) 48%, rgba(5,18,25,.78)),
      rgba(9,27,35,.82);
    box-shadow: 0 0 0 22px rgba(196,122,58,.07), 0 26px 55px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -18px 30px rgba(2,11,16,.18);
    outline: none;
    transform: translate(-50%, -50%) scale(1.035);
  }

  .process-reveal-control:hover::before,
  .process-reveal-control:focus-visible::before {
    opacity: 1;
    transform: translateX(5%);
  }

  .process-reveal-control.is-complete {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.82);
  }

  .process-reset-control {
    position: absolute;
    z-index: 15;
    left: 50%;
    top: 50%;
    width: clamp(150px, 17vw, 220px);
    aspect-ratio: 1;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
  }

  .process-reset-control::after {
    content: "Reset process";
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 8px 10px;
    color: rgba(244,241,234,.82);
    border: 1px solid rgba(225,157,100,.42);
    background: rgba(6,19,27,.74);
    font-size: .54rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: 0;
    transform: translate(-50%, -50%) translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
    white-space: nowrap;
  }

  .process-reset-control:hover,
  .process-reset-control:focus-visible {
    border-color: rgba(225,157,100,.48);
    background: radial-gradient(circle, rgba(171,205,210,.08), rgba(6,19,27,.06) 66%, transparent 68%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 12px rgba(196,122,58,.035);
    outline: none;
  }

  .process-reset-control:hover::after,
  .process-reset-control:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  .process-scroll:not(.is-played) .process-route-progress,
  .process-scroll:not(.is-played) .process-completion-dot,
  .process-scroll:not(.is-played) .process-assembly .orbit-runner {
    opacity: 0;
  }
}

@keyframes process-step-beacon {
  0% { opacity: 0; transform: scale(.9); }
  32% { opacity: .70; transform: scale(1.04); }
  72% { opacity: .26; transform: scale(1.14); }
  100% { opacity: 0; transform: scale(1.23); }
}

@keyframes process-step-afterglow {
  0% { opacity: .36; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.28); }
}

@keyframes process-control-wink {
  0%, 10%, 100% { opacity: 0; transform: translateX(-108%); }
  16% { opacity: .12; }
  38% { opacity: .76; transform: translateX(108%); }
  47% { opacity: 0; transform: translateX(116%); }
}

@media (prefers-reduced-motion: reduce) {
  .process-scroll:not(.is-played) .process-reveal-control::after { animation: none; }
}