:root {
  --gold: #e6da78;
  --red: #6e0101;
  --black: #000;
  --muted: rgba(255, 255, 255, .5);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-width: none; -webkit-text-size-adjust: 100%; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; min-width: 320px; overflow-x: hidden; color: #fff; background: #000; font-family: Inter, Arial, sans-serif; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; }
.mobile-text, .mobile-only-link { display: none; }
.top-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

.page-stack {
  min-height: 4470px;
  display: flex;
  flex-direction: column;
  gap: 56px;
  overflow: hidden;
  background: linear-gradient(180deg, #000 0%, var(--red) 50%, #000 100%);
}

.site-header {
  position: fixed;
  z-index: 50;
  top: 35px;
  left: 50%;
  width: min(1388px, calc(100% - 52px));
  height: 117px;
  transform: translateX(-50%);
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(4.8px);
  -webkit-backdrop-filter: blur(4.8px);
}
.header-logo { position: absolute; top: 50%; left: 78px; width: 107px; height: 107px; transform: translateY(-50%); overflow: hidden; }
.header-logo img { width: 100%; height: 100%; object-fit: cover; }
.menu-toggle { position: absolute; top: 50%; right: 121px; width: 71px; height: 52px; padding: 0; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; }
.menu-toggle picture { display: block; width: 100%; height: 100%; }
.menu-toggle img { width: 100%; height: 100%; object-fit: contain; }

.site-menu {
  position: fixed;
  z-index: 60;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  scrollbar-width: none;
  visibility: hidden;
  transition: visibility 0s linear .3s;
  -webkit-overflow-scrolling: touch;
}
.site-menu::-webkit-scrollbar { display: none; }
.menu-panel {
  position: relative;
  min-height: calc(100vh + 190px);
  min-height: calc(100dvh + 190px);
  display: grid;
  grid-template-columns: 51% 49%;
  grid-template-rows: 100vh 190px;
  grid-template-rows: 100dvh 190px;
  align-items: stretch;
  background: linear-gradient(115deg, rgba(0,0,0,.95), rgba(10,0,0,.95), rgba(0,0,0,.95));
  transform: translate3d(0, -100%, 0);
  transition: transform .38s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.site-menu.open { visibility: visible; }
.site-menu.open { transition-delay: 0s; }
.site-menu.open .menu-panel { transform: translate3d(0, 0, 0); }
.site-menu:not(.open) .menu-panel { transition-duration: .3s; }
.menu-close { position: absolute; z-index: 2; top: 36px; right: 14px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0 0 3px; border: 0; border-radius: 50%; background: var(--red); color: #050505; font-size: 30px; font-weight: 400; line-height: 1; cursor: pointer; transition: transform .2s ease, filter .2s ease; }
.menu-close:hover { transform: scale(1.06); filter: brightness(1.2); }
.menu-copy { display: grid; align-content: center; padding-left: max(104px, calc((100vw - 1216px) / 2)); border-right: 1px solid rgba(230,218,120,.18); font-size: clamp(54px, 7vw, 104px); font-weight: 500; line-height: 1.04; letter-spacing: -4px; text-transform: uppercase; transform: translateY(103px); }
.menu-copy span:last-child { color: var(--gold); }
.menu-primary { display: grid; align-content: center; gap: 17px; padding: 38px 0 38px 7vw; transform: translateY(82px); }
.menu-primary a { width: 400px; min-height: 75px; display: flex; align-items: center; justify-content: space-between; padding: 0 57px; border-radius: 16px; color: var(--gold); font-size: clamp(24px, 2.4vw, 42px); transition: background .18s ease; }
.menu-primary a:hover, .menu-primary a:focus-visible { outline: 0; background: rgba(255,255,255,.12); }
.menu-primary b { font-size: .58em; }
.menu-footer { grid-column: 1 / -1; display: grid; grid-template-columns: 51% 49%; align-items: center; border-top: 1px solid rgba(230,218,120,.18); }
.menu-socials, .menu-secondary { display: flex; align-items: center; justify-content: center; gap: clamp(34px, 5vw, 78px); }
.menu-socials a { width: 38px; height: 38px; display: grid; place-items: center; }
.menu-socials img { width: 30px; height: 30px; object-fit: contain; filter: grayscale(1) brightness(1.45); }
.menu-secondary { gap: clamp(32px, 4vw, 68px); padding-inline: 32px; color: var(--gold); font-size: clamp(16px, 1.55vw, 24px); }
.menu-secondary a { white-space: nowrap; transition: color .18s ease; }
.menu-secondary a:hover, .menu-secondary a:focus-visible { color: #fff; outline: 0; }

.hero { position: relative; flex: 0 0 900px; height: 900px; overflow: hidden; }
.hero-copy { position: absolute; z-index: 2; top: 324px; left: 50%; width: 1257px; transform: translateX(-50%); text-align: center; }
.hero h1 { margin: 0; font-size: 96px; font-weight: 500; line-height: 104.5px; letter-spacing: -4px; text-transform: uppercase; }
.hero h1 .gold { display: block; color: var(--gold); }
.hero-copy p { width: 670px; margin: 10px auto 0; color: var(--muted); font-size: 20px; font-weight: 300; line-height: 32.5px; }
.gold-button { width: 279px; height: 58px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; background: var(--gold); color: var(--red); font-size: 16px; font-weight: 500; box-shadow: 0 4px 2px rgba(0,0,0,.25); transition: transform .2s ease, box-shadow .2s ease; }
.gold-button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.32); }
.hero-button { position: absolute; z-index: 2; top: 610px; left: 50%; transform: translateX(-50%); }
.hero-button:hover { transform: translate(-50%, -2px); }
.hero-orb { position: absolute; z-index: 1; display: block; pointer-events: none; transform-origin: center; will-change: width, height, transform; }
.orb-left, .orb-right { border-radius: 50%; background: radial-gradient(ellipse at center, rgba(110,1,1,.5) 0%, rgba(110,1,1,.34) 42%, rgba(110,1,1,.1) 66%, transparent 100%); filter: blur(42px); }
.orb-left { top: -532px; left: -352px; width: 400px; height: 957px; transform: translate3d(0,0,0) rotate(.347rad) skewX(.004rad); }
.orb-right { top: 601px; left: calc(50% + 679px); width: 400px; height: 957px; transform: translate3d(0,0,0) rotate(.366rad) skewX(.004rad); }
.orb-top { top: -704.19px; left: calc(50% - 269.64px); width: 617.116px; height: 961.911px; filter: blur(12px); transform: translate3d(0,0,0) rotate(19.86deg) skewX(.21deg); }

@keyframes hero-orb-left {
  to { width: 617.116px; height: 961.911px; transform: translate3d(547.582px,262.269px,0) rotate(.348rad) skewX(.007rad) scale(.999,1.001); }
}
@keyframes hero-orb-right {
  to { width: 830.942px; height: 961.842px; transform: translate3d(-705.248px,-841.077px,0) rotate(.367rad) skewX(.007rad) scale(.999,1.001); }
}
@keyframes hero-orb-top {
  to { width: 851.975px; transform: translate3d(-107.1px,774.297px,0) rotate(1.738rad); }
}
.ecosystem { position: relative; flex: 0 0 306px; height: 306px; overflow: hidden; background: rgba(0,0,0,.5); }
.ecosystem h2 { position: absolute; top: 64px; left: calc(50% - 637px); margin: 0; color: var(--gold); font-size: 24px; font-weight: 500; line-height: normal; }
.ecosystem-window { position: absolute; top: 153px; left: 50%; width: 1350px; transform: translateX(-50%); overflow: hidden; }
.ecosystem-track { --marquee-shift: 1440px; width: max-content; display: flex; align-items: center; gap: 88px; padding-right: 67px; animation: ecosystem-marquee 24s linear infinite; will-change: transform; }
.ecosystem-track > img,
.ecosystem-logo { flex: 0 0 200px; width: 200px; height: 70px; }
.ecosystem-track > img { object-fit: cover; }
.ecosystem-logo-tech { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; overflow: hidden; }
.ecosystem-logo-tech img:first-child { width: 49px; height: 32px; object-fit: contain; }
.ecosystem-logo-tech img:last-child { width: 200px; height: 28px; object-fit: contain; }

.impact { position: relative; flex: 0 0 1052px; height: 1052px; overflow: hidden; padding-top: 72px; }
.impact > h2 { margin: 0 0 38px; color: var(--gold); font-size: 96px; font-weight: 500; line-height: normal; letter-spacing: -3px; text-align: center; text-transform: uppercase; }
.impact-row { width: 1277px; height: 365px; margin-inline: auto; overflow: hidden; scroll-behavior: auto; }
.impact-row + .impact-row { margin-top: 38px; }
.impact-track { width: max-content; height: 365px; display: flex; gap: 40px; animation: impact-row-one-slide 20s cubic-bezier(.45, 0, .55, 1) infinite alternate; will-change: transform; }
.impact-row-two .impact-track { gap: 52px; animation-name: impact-row-two-slide; }
.impact-card { --figma-spring: cubic-bezier(.22, 1, .36, 1); --image-width: 336px; --image-height: 365px; --image-hover-width: 336px; --image-hover-height: 365px; --image-hover-x: 0px; --image-hover-y: 0px; position: relative; flex: 0 0 336px; width: 336px; height: 365px; overflow: hidden; border-radius: 16px; background: #200001; }
@supports (animation-timing-function: linear(0, 1)) {
  .impact-card { --figma-spring: linear(0, .0188, .0679, .1374, .2195, .308, .3978, .4856, .5686, .6452, .7142, .7753, .8283, .8735, .9113, .9423, .9671, .9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, .9997, .9995, .9993, .9992, .9992, .9992, .9992, .9993, .9993); }
}
.impact-card > img { position: absolute; top: 0; left: 0; width: var(--image-width); height: var(--image-height); max-width: none; object-fit: cover; transform: translate3d(0, 0, 0); transition: width 1.022094s var(--figma-spring), height 1.022094s var(--figma-spring), transform 1.022094s var(--figma-spring); }
.impact-card > div { position: absolute; right: 0; bottom: 0; left: 0; height: 106px; display: flex; flex-direction: column; gap: 9px; padding: 9px 17px; color: #303030; background: rgba(255,255,255,.4); opacity: 0; transform: translate3d(0, 106px, 0); transition: opacity 1.022094s var(--figma-spring), transform 1.022094s var(--figma-spring); }

/* Figma's project-card hover states: each image changes its own crop, then the
   caption frame rises by 106px.  The same spring curve is exported by Dev Mode. */
.impact-row-one .impact-card:nth-child(1) { --image-width: 336px; --image-height: 365px; --image-hover-width: 468px; --image-hover-height: 489px; --image-hover-x: -21px; --image-hover-y: -99px; }
.impact-row-one .impact-card:nth-child(2) { --image-width: 336px; --image-height: 471px; --image-hover-width: 372px; --image-hover-height: 530px; --image-hover-x: -17px; --image-hover-y: -29px; }
.impact-row-one .impact-card:nth-child(3) { --image-width: 336px; --image-height: 471px; --image-hover-width: 372px; --image-hover-height: 549px; --image-hover-x: -83px; --image-hover-y: -38px; }
.impact-row-one .impact-card:nth-child(4) { --image-width: 337px; --image-height: 419px; --image-hover-width: 372px; --image-hover-height: 513px; --image-hover-x: -17px; --image-hover-y: -47px; }
.impact-row-one .impact-card:nth-child(5), .impact-row-two .impact-card { --image-width: 367px; --image-height: 457px; --image-hover-width: 372px; --image-hover-height: 606px; --image-hover-x: -2px; --image-hover-y: -74px; }

@media (hover: hover) and (min-width: 768px) {
  .impact-card:hover > img, .impact-card:focus-within > img { width: var(--image-hover-width); height: var(--image-hover-height); transform: translate3d(var(--image-hover-x), var(--image-hover-y), 0); }
  .impact-card:hover > div, .impact-card:focus-within > div { opacity: 1; transform: translate3d(0, 0, 0); }
}
.impact-card h3, .impact-card p { margin: 0; }
.impact-card h3 { font-size: 21px; font-weight: 600; }
.impact-card p { font-size: 16px; line-height: normal; }
.impact-controls { display: none; }
.impact-controls button { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(230,218,120,.65); border-radius: 50%; background: rgba(0,0,0,.24); cursor: pointer; transition: background .2s ease, transform .2s ease; }
.impact-controls button:hover, .impact-controls button:focus-visible { outline: 0; background: rgba(230,218,120,.14); transform: translateY(-2px); }
.impact-controls button img { width: 22px; height: 22px; object-fit: contain; }
.impact-controls button.next img { transform: rotate(180deg); }

.capabilities { flex: 0 0 534px; height: 534px; }
.capabilities-panel { position: relative; width: 1313px; height: 534px; margin-inline: auto; overflow: hidden; border-radius: 24px; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); }
.capabilities-panel { -webkit-backdrop-filter: blur(2px); }
.capabilities h2 { position: absolute; top: 64px; left: 50%; margin: 0; transform: translateX(-50%); color: var(--gold); font-size: 40px; font-weight: 500; line-height: normal; text-transform: uppercase; white-space: nowrap; }
.capability-scroller { position: absolute; top: 164px; left: 50%; width: 1218px; height: 306px; display: flex; gap: 40px; transform: translateX(-50%); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; scroll-behavior: auto; }
.capability-scroller { -webkit-overflow-scrolling: touch; }
.capability-scroller::-webkit-scrollbar { display: none; }
.capability-card { flex: 0 0 400px; width: 400px; height: 306px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 40px; border: 1px solid rgba(243,243,243,.15); border-radius: 24px; background: rgba(255,255,255,.05); }
.capability-logo { width: 150px; height: 52px; object-fit: contain; }
.golden-tech-logo { width: 150px; height: 57px; display: grid; justify-items: center; align-content: center; }
.golden-tech-logo img:first-child { width: 37px; height: 24px; object-fit: contain; }
.golden-tech-logo img:last-child { width: 150px; height: 22px; object-fit: contain; }
.capability-card ul { width: 281px; margin: 0; padding: 0; list-style: none; }
.capability-card li { min-height: 27px; display: flex; align-items: center; gap: 16px; padding: 3px 5px; border-bottom: 1px solid rgba(110,1,1,.5); border-radius: 4px; color: #b3b3b3; font-size: 14px; line-height: 1.4; text-transform: capitalize; }
.capability-card li img { flex: 0 0 24px; width: 24px; height: 24px; object-fit: contain; }
.capability-arrow { display: none; }

.trusted { position: relative; flex: 0 0 411px; height: 411px; overflow: hidden; }
.trusted h2 { position: absolute; top: 72px; left: calc(50% - 647px); margin: 0; color: var(--gold); font-size: 40px; font-weight: 500; line-height: normal; text-transform: uppercase; }
.trusted-window { position: absolute; top: 184px; left: 50%; width: 1440px; height: 110px; transform: translateX(-50%); overflow: hidden; }
.trusted-track { --marquee-shift: 1680px; width: max-content; height: 110px; display: flex; align-items: center; gap: 80px; padding-inline: 32px; animation: trusted-marquee 28s linear infinite; will-change: transform; }
.trusted-track img { flex: 0 0 200px; width: 200px; object-fit: contain; }
.trusted-track img:nth-child(6n+1) { height: 110px; }.trusted-track img:nth-child(6n+2) { height: 69px; }.trusted-track img:nth-child(6n+3) { height: 45px; }.trusted-track img:nth-child(6n+4) { height: 64px; }.trusted-track img:nth-child(6n+5) { height: 56px; }.trusted-track img:nth-child(6n) { height: 82px; }

@keyframes ecosystem-marquee { to { transform: translate3d(calc(-1 * var(--marquee-shift)), 0, 0); } }
@keyframes trusted-marquee { to { transform: translate3d(calc(-1 * var(--marquee-shift)), 0, 0); } }
@keyframes impact-row-one-slide { to { transform: translate3d(-563px, 0, 0); } }
@keyframes impact-row-two-slide { from { transform: translate3d(-611px, 0, 0); } to { transform: translate3d(0, 0, 0); } }

.cta { flex: 0 0 409px; height: 409px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; background: rgba(0,0,0,.5); }
.cta h2 { width: 824px; margin: 0; color: var(--gold); font-size: 64px; font-weight: 500; line-height: normal; text-align: center; text-transform: uppercase; }
.cta h2 span { display: block; }
.cta .gold-button:hover, .cta .gold-button:focus-visible { transform: none; outline: 0; background: var(--red); color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.28); }

.site-footer { flex: 0 0 522px; height: 522px; display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 32px 0 24px; background: rgba(0,0,0,.15); }
.footer-links { width: 970px; height: 125px; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); gap: 16px 63px; padding: 10px; color: var(--gold); font-size: 20px; }
.footer-links a { white-space: nowrap; }
.footer-main { width: 970px; display: flex; align-items: center; justify-content: center; gap: 196px; }
.footer-copy { width: 535px; color: rgba(230,218,120,.5); font-size: 11px; line-height: 1.1; }
.footer-copy strong { color: var(--gold); font-size: 13px; font-weight: 500; }
.footer-copy p { width: 484px; margin: 2px 0 9px; }
.footer-identity { width: 229px; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.footer-logo { width: 216px; height: 96px; object-fit: cover; }
.socials { display: flex; gap: 32px; }
.socials img { width: 30px; height: 30px; object-fit: contain; }
.footer-rule { width: 1280px; height: 1px; background: rgba(230,218,120,.17); }
.legal { width: 960px; display: flex; align-items: center; justify-content: space-between; color: rgba(230,218,120,.5); font-size: 11px; }
.legal > img { width: 28px; height: 28px; object-fit: cover; opacity: .5; }
.legal > div { display: flex; gap: 16px; }
.legal a { width: auto; white-space: nowrap; }

.about-page {
  min-height: 4766px;
  gap: 0;
  background: linear-gradient(180deg, #000 0%, var(--red) 50%, #000 100%);
}

.about-hero {
  position: relative;
  flex: 0 0 900px;
  height: 900px;
  overflow: hidden;
}

.about-hero-copy {
  position: absolute;
  z-index: 2;
  top: 308px;
  left: 50%;
  width: 1277px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transform: translateX(-50%);
  text-align: center;
}

.about-hero h1 {
  margin: 0;
  color: #fff;
  font-size: 96px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -4px;
  text-transform: uppercase;
}

.about-hero h1 span { display: block; }
.about-hero h1 em { color: var(--gold); font-style: normal; }

.about-hero p {
  width: 670px;
  margin: 0;
  color: var(--muted);
  font-size: 20px;
  font-weight: 300;
  line-height: 32.5px;
}

.about-hero .gold-button { margin-top: 0; }

.about-who {
  position: relative;
  flex: 0 0 765px;
  height: 765px;
  margin-top: 80px;
  overflow: hidden;
}

.about-who > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-who-copy {
  position: absolute;
  top: 229px;
  left: 80px;
  width: 514px;
  color: #b3b3b3;
  font-size: 16px;
  line-height: normal;
}

.about-who h2,
.mv-row h2,
.about-services h2 {
  margin: 0;
  color: var(--gold);
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
}

.about-who h2 {
  width: 555px;
  margin-bottom: 16px;
  font-size: 60px;
}

.about-who p { margin: 0 0 18px; }

.about-ecosystem {
  flex-basis: 306px;
  height: 306px;
  background: #000;
}

.about-ecosystem h2 { left: calc(50% - 637px); }

.mission-vision {
  flex: 0 0 1024px;
  height: 1024px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 80px;
  margin-top: 80px;
}

.mv-row {
  position: relative;
  height: 472px;
  overflow: hidden;
}

.vision-row { height: 484px; }

.mv-row > img {
  position: absolute;
  top: 50%;
  width: 710px;
  height: 470px;
  object-fit: cover;
  transform: translateY(-50%);
}

.mission-row > img {
  left: 0;
  border-radius: 0 32px 32px 0;
}

.vision-row > img {
  right: 0;
  border-radius: 32px 0 0 32px;
}

.mv-row > div {
  position: absolute;
  top: 50%;
  width: 530px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transform: translateY(-50%);
}

.mission-row > div { left: 805px; }
.vision-row > div { left: 96px; }

.mv-row h2 {
  font-size: 64px;
  line-height: 1.5;
}

.mv-row p {
  margin: 0;
  color: #b3b3b3;
  font-size: 16px;
  line-height: 1.5;
}

.about-services {
  flex: 0 0 940px;
  width: 1313px;
  height: 940px;
  margin: 80px auto 69px;
  padding-top: 64px;
  border-radius: 24px;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.about-services h2 {
  margin-bottom: 56px;
  font-size: 40px;
  text-align: center;
}

.about-services-track {
  width: 1036px;
  height: 716px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 40px;
  margin: 0 auto;
}

.about-service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  border-radius: 32px;
  background: rgba(255,255,255,.07);
  text-align: center;
}

.service-icon {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 60px;
}

.service-icon img { width: 96px; height: 96px; object-fit: contain; }
.service-icon-marketing { background: var(--gold); }
.service-icon-marketing img { width: 47px; height: 47px; }

.about-service-card h3 {
  width: 266px;
  margin: 0 0 -24px;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}

.about-service-card p {
  width: 408px;
  height: 66px;
  margin: 0;
  color: #b3b3b3;
  font-size: 16px;
  line-height: 1.4;
}

.about-services-controls { display: none; }

@media (min-width: 768px) and (max-width: 1439px) {
  .header-logo { left: 5.5vw; }
  .menu-toggle { right: 7.5vw; }
  .hero-copy { width: 90%; }
  .hero h1 { font-size: clamp(62px, 6.7vw, 96px); line-height: 1.08; }
  .ecosystem h2, .trusted h2 { left: 5vw; }
  .ecosystem-window, .trusted-window { width: 94vw; }
  .impact-row { width: calc(100vw - 112px); }
  .capabilities-panel { width: calc(100vw - 90px); }
  .capability-scroller { width: calc(100% - 95px); }
  .footer-rule { width: 90vw; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .menu-panel { grid-template-columns: 44% 56%; }
  .menu-copy { padding-left: 40px; font-size: clamp(40px, 6vw, 58px); letter-spacing: -2px; }
  .menu-primary { padding: 38px 24px; }
  .menu-primary a { width: 100%; min-height: 68px; padding-inline: 28px; font-size: clamp(22px, 3vw, 30px); }
  .menu-footer { grid-template-columns: 44% 56%; }
  .menu-socials { gap: 28px; }
  .menu-secondary { display: grid; grid-template-columns: repeat(2, auto); gap: 18px 28px; padding-inline: 24px; font-size: 14px; }

  .cta h2 { width: calc(100% - 80px); font-size: clamp(48px, 6.25vw, 60px); }

  .site-footer { gap: 34px; }
  .footer-links { width: calc(100% - 68px); gap: 16px 20px; font-size: 14px; }
  .footer-main { width: calc(100% - 80px); gap: clamp(42px, 7vw, 72px); }
  .footer-copy { width: calc(100% - 230px); }
  .footer-copy p { width: 100%; }
  .footer-identity { flex: 0 0 180px; width: 180px; }
  .footer-logo { width: 176px; height: 78px; }
  .socials { gap: 24px; }
  .legal { width: calc(100% - 80px); }
}

@media (max-width: 767px) {
  .desktop-text, .desktop-only-link { display: none; }
  .mobile-text, .mobile-only-link { display: inline; }
  .page-stack { min-height: 3617px; display: block; background: linear-gradient(180deg, #000 0%, var(--red) 50%, #000 100%); }

  .site-header { top: 24px; width: calc(100% - 20px); max-width: 410px; height: 58px; border-radius: 8px; }
  body.footer-in-view .site-header { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-18px); }
  .header-logo { left: 24px; width: 27px; height: 26px; }
  .menu-toggle { right: 31px; width: 27px; height: 21px; }
  .header-logo img { position: absolute; top: -9.76%; left: -6.98%; width: 113.95%; height: 119.51%; max-width: none; object-fit: fill; }
  .site-menu { display: block; }
  .menu-panel { min-height: calc(100vh + 230px); min-height: calc(100dvh + 230px); display: block; padding-top: 154px; background: linear-gradient(155deg, rgba(0,0,0,.98), rgba(39,2,2,.96) 54%, rgba(0,0,0,.98)); }
  .site-menu.open .menu-panel { transition-duration: .46s; }
  .menu-close { top: max(24px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); width: 34px; height: 34px; padding-bottom: 3px; font-size: 28px; }
  .menu-copy { display: grid; padding: 0 45px 27px; border-right: 0; font-size: 34px; line-height: 1.28; letter-spacing: -.8px; text-align: center; transform: none; }
  .menu-primary { width: 340px; margin: 0 auto; padding: 20px 38px; border-top: 1px solid rgba(230,218,120,.15); transform: none; }
  .menu-primary a { width: auto; min-height: 56px; padding: 0 12px; font-size: 17px; }
  .menu-footer { width: 340px; min-height: 230px; display: flex; flex-direction: column-reverse; justify-content: center; gap: 28px; margin: 0 auto; padding: 30px 28px; border-top: 1px solid rgba(230,218,120,.15); }
  .menu-secondary { width: 100%; display: grid; grid-template-areas: "home career" "about contact"; grid-template-columns: 1fr 1fr; gap: 24px 30px; padding: 0; font-size: 13px; text-align: center; }
  .menu-secondary a:nth-child(1) { grid-area: home; }
  .menu-secondary a:nth-child(2) { grid-area: about; }
  .menu-secondary a:nth-child(3) { grid-area: career; }
  .menu-secondary a:nth-child(4) { grid-area: contact; }
  .menu-socials { gap: 34px; }
  .menu-socials a { width: 24px; height: 24px; }
  .menu-socials img { width: 21px; height: 21px; }

  .hero { height: 675px; background: transparent; }
  .hero-orb { display: none; }
  .hero-copy, .hero-button { animation: none; }
  .hero-copy { top: 261px; width: 430px; max-width: 100%; }
  .hero h1 { font-size: 48px; line-height: 48px; letter-spacing: -2.4px; }
  .hero h1 span { display: block; }
  .hero-copy p { width: 100%; margin-top: 8px; font-size: 13px; line-height: 32.5px; }
  .hero-button { top: 453px; width: 125px; height: 29px; border-radius: 8px; font-size: 12px; }

  .ecosystem { height: 123px; margin-bottom: 80px; padding: 24px; background: rgba(0,0,0,.5); }
  .ecosystem h2 { position: static; margin: 10px 0 16px; font-size: 10px; }
  .ecosystem-window { position: static; width: 400px; max-width: calc(100vw - 24px); transform: none; }
  .ecosystem-track { --marquee-shift: 725px; gap: 45px; padding-right: 27px; animation-duration: 12s; }
  .ecosystem-track > img,
  .ecosystem-logo { flex-basis: 100px; width: 100px; height: 35px; }
  .ecosystem-logo-tech { gap: 1px; }
  .ecosystem-logo-tech img:first-child { width: 25px; height: 16px; }
  .ecosystem-logo-tech img:last-child { width: 100px; height: 15px; }

  .impact { height: 907px; padding-top: 10px; }
  .impact > h2 { height: 68px; margin: 0 0 26px; padding: 10px 0; font-size: 40px; font-weight: 700; line-height: normal; letter-spacing: 0; }
  .impact-row { width: 400px; max-width: calc(100vw - 30px); height: 330px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-behavior: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
  .impact-row::-webkit-scrollbar { display: none; }
  .impact-row + .impact-row { margin-top: 26px; }
  .impact-track { height: 330px; gap: 16px; transform: none; transition: transform .35s ease; animation: none; }
  .impact-row-two .impact-track { gap: 30px; transform: none; animation: none; }
  .impact-card { flex-basis: 270px; width: 270px; height: 330px; }
  .impact-card > img { position: absolute; max-width: none; object-fit: fill; }
  .impact-row-one .impact-card:nth-child(1) > img { top: -99px; left: -21px; width: 468px; height: 489px; object-fit: cover; }
  .impact-row-one .impact-card:nth-child(2) > img { top: -94.72px; left: -814.46px; width: 1277.67px; height: 719.95px; }
  .impact-row-one .impact-card:nth-child(3) > img { top: -37.84px; left: -294.59px; width: 823.5px; height: 549px; }
  .impact-row-one .impact-card:nth-child(4) > img { top: -206px; left: -235px; width: 742px; height: 742px; }
  .impact-row-one .impact-card:nth-child(5) > img { top: -141.25px; left: -135.89px; width: 684.4px; height: 513px; }
  .impact-row-two .impact-card:nth-child(1) > img { top: -137.58px; left: -201.33px; width: 807.98px; height: 606px; }
  .impact-row-two .impact-card:nth-child(2) > img { top: -236.11px; left: -82.29px; width: 807.98px; height: 606px; }
  .impact-row-two .impact-card:nth-child(3) > img { top: -138px; left: -50px; width: 372px; height: 606px; object-fit: cover; }
  .impact-row-two .impact-card:nth-child(4) > img { top: -138px; left: -51px; width: 372px; height: 606px; object-position: bottom; }
  .impact-row-two .impact-card:nth-child(5) > img { top: -87.28px; left: -154.83px; width: 685.52px; height: 504.74px; }
  .impact-card > div { bottom: 0; height: 97px; gap: 9px; padding: 9px 17px; color: #fff; background: rgba(0,0,0,.48); opacity: 1; transform: none; transition: none; }
  .impact-card h3 { font-size: 16px; }
  .impact-card p { font-size: 13px; }
  .impact-controls { height: 24px; display: flex; justify-content: center; gap: 103px; margin-top: 26px; }
  .impact-controls button { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
  .impact-controls button img { width: 24px; height: 24px; object-fit: contain; }
  .impact-controls button.next img { transform: rotate(180deg); }

  .capabilities { height: 620px; }
  .capabilities-panel { width: 400px; max-width: calc(100vw - 30px); height: 563px; border-radius: 24px; background: rgba(0,0,0,.35); }
  .capabilities h2 { top: 24px; font-size: 32px; font-weight: 600; }
  .capability-scroller { top: 86px; width: 237px; height: 453px; flex-direction: column; gap: 32px; overflow-x: hidden; overflow-y: auto; scroll-behavior: auto; overscroll-behavior-y: contain; touch-action: pan-y; }
  .capability-card { flex: 0 0 249px; width: 237px; height: 249px; justify-content: flex-start; gap: 16px; padding: 40px; }
  .capability-logo { width: 100px; height: 35px; }
  .golden-tech-logo { width: 100px; height: 38px; }
  .golden-tech-logo img:first-child { width: 25px; height: 16px; }
  .golden-tech-logo img:last-child { width: 100px; height: 15px; }
  .capability-card ul { width: 190px; }
  .capability-card li { min-height: 19px; gap: 16px; padding-block: 2px; font-size: 10px; }
  .capability-card li img { flex-basis: 16px; width: 16px; height: 16px; }
  .capability-arrow { position: absolute; z-index: 2; top: 482px; display: block; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
  .capability-arrow img { width: 24px; height: 24px; object-fit: contain; }
  .capability-arrow.up { left: 24px; }
  .capability-arrow.up img { transform: rotate(180deg); }
  .capability-arrow.down { right: 24px; }

  .trusted { height: 148px; }
  .trusted h2 { position: static; width: 366px; max-width: calc(100% - 64px); margin: 0 auto 22px; font-size: 32px; font-weight: 700; }
  .trusted-window { position: static; width: 430px; max-width: 100%; height: 39px; transform: none; }
  .trusted-track { --marquee-shift: 564px; height: 39px; gap: 24px; padding-inline: 32px; animation-duration: 12s; }
  .trusted-track img { flex-basis: 70px; width: 70px; }
  .trusted-track img:nth-child(6n+1) { height: 39px; }.trusted-track img:nth-child(6n+2) { height: 24px; }.trusted-track img:nth-child(6n+3) { height: 15px; }.trusted-track img:nth-child(6n+4) { height: 22px; }.trusted-track img:nth-child(6n+5) { height: 19px; }.trusted-track img:nth-child(6n) { height: 29px; }

  .cta { height: 300px; gap: 22px; }
  .cta h2 { width: 430px; max-width: 100%; font-size: 40px; font-weight: 700; }
  .cta .gold-button { width: 168px; height: 42px; border-radius: 30px; font-size: 12px; }

  .site-footer { position: relative; height: 709px; gap: 0; margin-top: 55px; padding: 0; background: #000; }
  .site-footer::before { content: ""; position: absolute; top: 215px; left: 50%; width: 320px; max-width: calc(100% - 110px); height: 1px; background: rgba(230,218,120,.17); transform: translateX(-50%); }
  .footer-links { position: absolute; top: 44px; left: 50%; width: 344px; max-width: calc(100% - 86px); height: 143px; display: block; padding: 0; color: var(--gold); font-size: 14px; font-weight: 400; line-height: normal; transform: translateX(-50%); }
  .footer-links a { position: absolute; text-align: left; }
  .footer-links a:nth-child(1) { top: 6px; left: 30px; }
  .footer-links a:nth-child(2) { top: 6px; left: 108px; }
  .footer-links a:nth-child(3) { top: 6px; left: 205px; }
  .footer-links a:nth-child(4) { top: 63px; left: 0; }
  .footer-links a:nth-child(5) { top: 63px; left: 125px; }
  .footer-links a:nth-child(6) { top: 63px; left: 246px; }
  .footer-links a:nth-child(7) { top: 120px; left: 28px; }
  .footer-links a:nth-child(8) { top: 120px; left: 148px; }
  .footer-links a:nth-child(9) { top: 120px; left: 230px; }
  .footer-main { display: block; width: auto; max-width: none; margin: 0; }
  .footer-copy { position: absolute; top: 426px; left: 50%; width: 344px; max-width: calc(100% - 86px); height: 136px; color: rgba(230,218,120,.5); font-size: 10px; font-weight: 300; line-height: 1.35; transform: translateX(-50%); }
  .footer-copy strong { font-size: 10px; font-weight: 500; }
  .footer-copy p { width: 100%; margin: 0 0 12px; }
  .footer-identity { position: absolute; top: 292px; left: 50%; width: 328px; max-width: calc(100% - 102px); flex-direction: row; align-items: center; justify-content: flex-start; gap: 51px; transform: translateX(-50%); }
  .footer-logo { width: 134px; height: 50px; object-fit: cover; object-position: center; transform: scale(1.37); transform-origin: left center; }
  .socials { align-items: center; gap: 26px; }
  .socials img { width: 29px; height: 29px; }
  .footer-rule { position: absolute; top: 589px; left: 50%; display: block; width: 320px; max-width: calc(100% - 110px); height: 1px; margin: 0; background: rgba(230,218,120,.17); transform: translateX(-50%); }
  .legal { position: absolute; top: 626px; left: 50%; width: 344px; max-width: calc(100% - 86px); font-size: 8px; transform: translateX(-50%); }
  .legal > img { width: 24px; height: 24px; }
  .legal > div { gap: 16px; }
}

@media (max-width: 767px) {
  .about-page {
    min-height: 3487px;
    display: block;
    background: linear-gradient(180deg, #000 0%, var(--red) 50%, #000 100%);
  }

  .about-hero {
    height: 661px;
  }

  .about-hero .hero-orb { display: block; }
  .about-hero .orb-top { top: -125px; left: 11px; width: 459.584px; height: 697.154px; filter: blur(12px); transform: rotate(19.86deg) skewX(.21deg); }
  .about-hero .orb-left { top: -470px; left: -425px; width: 400px; height: 957px; filter: blur(42px); transform: rotate(19.75deg); }
  .about-hero .orb-right { top: 358px; left: 245px; width: 268.354px; height: 642.036px; filter: blur(42px); transform: rotate(20.84deg); }

  .about-hero-copy {
    top: 279px;
    width: 430px;
    max-width: 100%;
    gap: 10px;
    padding: 10px;
  }

  .about-hero h1 {
    width: 394px;
    height: 112px;
    font-size: 32px;
    line-height: normal;
    letter-spacing: 0;
  }

  .about-hero p {
    width: 284px;
    font-size: 13px;
    line-height: 32.5px;
  }

  .about-hero .gold-button {
    width: 125px;
    height: 29px;
    border-radius: 30px;
    font-size: 12px;
  }

  .about-who {
    height: 596px;
    margin-top: 27px;
    overflow: visible;
  }

  .about-who > img {
    height: 596px;
    object-fit: cover;
  }

  .about-who-copy {
    top: 80px;
    left: 32px;
    width: 288px;
    min-height: 268px;
    padding: 16px;
    border-radius: 8px;
    background: rgba(0,0,0,.8);
    font-size: 11px;
    line-height: 1.35;
  }

  .about-who h2 {
    width: 555px;
    margin-bottom: 8px;
    font-size: 32px;
  }

  .about-who p { margin-bottom: 12px; }

  .about-ecosystem {
    height: 123px;
    margin: 0;
    padding: 24px;
    background: #000;
  }

  .about-ecosystem h2 {
    position: static;
    margin: 10px 0 16px;
    font-size: 10px;
  }

  .mission-vision {
    height: 812px;
    display: block;
    margin-top: 0;
    padding-top: 47px;
  }

  .mv-row,
  .vision-row {
    width: 430px;
    max-width: 100%;
    height: 398px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 0 23px 16px;
    overflow: visible;
  }

  .vision-row {
    height: 371px;
    gap: 16px;
    margin-top: 27px;
  }

  .mv-row > img,
  .vision-row > img {
    position: static;
    order: 2;
    width: 100%;
    height: 216px;
    border-radius: 16px;
    transform: none;
  }

  .mv-row > div,
  .vision-row > div {
    position: static;
    width: 336px;
    display: contents;
    transform: none;
  }

  .mv-row h2 {
    order: 1;
    width: 100%;
    height: 35px;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
  }

  .mv-row p {
    order: 3;
    width: 336px;
    height: 82px;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
  }

  .vision-row p {
    width: 334px;
    height: 71px;
  }

  .about-services {
    width: 400px;
    max-width: calc(100% - 30px);
    height: 461px;
    margin: 32px auto 66px;
    padding: 16px 0;
    border-radius: 24px;
    background: rgba(0,0,0,.35);
  }

  .about-services h2 {
    margin-bottom: 24px;
    font-size: 24px;
  }

  .about-services-track {
    width: 362px;
    max-width: calc(100% - 38px);
    height: 314px;
    display: flex;
    gap: 24px;
    padding-right: 162px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 0;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .about-services-track::-webkit-scrollbar { display: none; }

  .about-service-card {
    flex: 0 0 200px;
    width: 200px;
    height: 314px;
    gap: 8px;
    overflow: hidden;
    border-radius: 32px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .service-icon {
    width: 60px;
    height: 60px;
  }

  .service-icon img { width: 60px; height: 60px; }
  .service-icon-marketing img { width: 31px; height: 31px; }

  .about-service-card h3 {
    width: 160px;
    margin: 0;
    font-size: 16px;
  }

  .about-service-card p {
    width: 176px;
    height: 75px;
    font-size: 11px;
  }

  .about-services-controls {
    width: 100%;
    height: 24px;
    display: flex;
    justify-content: center;
    gap: 103px;
    margin-top: 24px;
  }

  .about-services-controls button {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .about-services-controls img { width: 24px; height: 24px; }
  .about-services-controls button:last-child img { transform: rotate(180deg); }

  .about-page .site-footer {
    margin-top: 0;
  }
}

@media (max-width: 420px) {
  body[data-page="home"] .hero h1 {
    font-size: clamp(40px, 11.1628vw, 48px);
    line-height: 1;
    letter-spacing: clamp(-2.4px, -.5581vw, -1.6px);
  }
  body[data-page="home"] .ecosystem { padding-inline: 18px; }
  .footer-links { font-size: 14px; }
}

@media (max-width: 389px) {
  body[data-page="home"] .footer-links {
    left: 16px;
    width: calc(100% - 32px);
    max-width: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    align-content: space-between;
    font-size: 13px;
    transform: none;
  }
  body[data-page="home"] .footer-links a { position: static; justify-self: center; text-align: center; }
}

@media (max-width: 360px) {
  body[data-page="home"] .footer-identity { gap: 16px; }
  body[data-page="home"] .footer-logo { width: 120px; transform: scale(1.3); }
  body[data-page="home"] .socials { gap: 16px; }
  body[data-page="home"] .socials img { width: 26px; height: 26px; }
}

@media (max-width: 340px) {
  body[data-page="home"] .footer-links { font-size: 12px; }
}

/* The client explicitly requires the authored motion to remain active even
   when iOS/macOS Reduce Motion is enabled. Safari may disable native smooth
   scrolling in that mode, so marquee animations are restated explicitly here
   and carousel controls are animated with requestAnimationFrame in script-v13. */
@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .ecosystem-track {
    animation-name: ecosystem-marquee !important;
    animation-duration: 24s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    animation-play-state: running !important;
  }
  body[data-page="home"] .trusted-track {
    animation-name: trusted-marquee !important;
    animation-duration: 28s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    animation-play-state: running !important;
  }
  body[data-page="home"] .impact-row-one .impact-track {
    animation-name: impact-row-one-slide !important;
    animation-duration: 20s !important;
    animation-timing-function: cubic-bezier(.45, 0, .55, 1) !important;
    animation-iteration-count: infinite !important;
    animation-direction: alternate !important;
    animation-play-state: running !important;
  }
  body[data-page="home"] .impact-row-two .impact-track {
    animation-name: impact-row-two-slide !important;
    animation-duration: 20s !important;
    animation-timing-function: cubic-bezier(.45, 0, .55, 1) !important;
    animation-iteration-count: infinite !important;
    animation-direction: alternate !important;
    animation-play-state: running !important;
  }
}


/* About page responsive artboard scaling
   --------------------------------------
   The approved Figma frames are 1440px (desktop) and 430px (mobile).
   Scaling the complete authored artboard keeps spacing, typography and the
   footer proportional at intermediate viewport widths instead of making the
   page appear vertically stretched. */
@media (min-width: 768px) and (max-width: 1439px) {
  body[data-page="about"] .about-page {
    width: 1440px;
    min-width: 1440px;
    min-height: 4766px;
    zoom: calc(100vw / 1440px);
  }

  body[data-page="about"] .site-header {
    top: 35px;
    width: 1388px;
    max-width: none;
    height: 117px;
    zoom: calc(100vw / 1440px);
  }

  body[data-page="about"] .header-logo { left: 78px; }
  body[data-page="about"] .menu-toggle { right: 121px; }
  body[data-page="about"] .about-hero h1 { font-size: 96px; line-height: normal; }
  body[data-page="about"] .about-ecosystem h2 { left: calc(50% - 637px); }
  body[data-page="about"] .about-ecosystem .ecosystem-window { width: 1350px; }
  body[data-page="about"] .footer-rule { width: 1280px; }
}

@media (max-width: 430px) {
  body[data-page="about"] .about-page {
    width: 430px;
    min-width: 430px;
    min-height: 3487px;
    zoom: calc(100vw / 430px);
  }

  body[data-page="about"] .site-header {
    top: 24px;
    width: 410px;
    max-width: none;
    height: 58px;
    zoom: calc(100vw / 430px);
  }

  body[data-page="about"] .about-hero h1 {
    width: 394px;
    height: 112px;
    font-size: 32px;
    line-height: normal;
    letter-spacing: 0;
  }

  body[data-page="about"] .about-ecosystem { padding: 24px; }
  body[data-page="about"] .footer-links { font-size: 14px; }
}

/* Figma uses a different card sequence on desktop while the mobile carousel
   intentionally opens with Performance & Media. Keep one semantic DOM order
   and place the cards explicitly only in the desktop grid. */
@media (min-width: 768px) {
  .about-services-track .about-service-card:nth-child(1) { grid-column: 2; grid-row: 1; }
  .about-services-track .about-service-card:nth-child(2) { grid-column: 1; grid-row: 2; }
  .about-services-track .about-service-card:nth-child(3) { grid-column: 2; grid-row: 2; }
  .about-services-track .about-service-card:nth-child(4) { grid-column: 1; grid-row: 1; }
}

@media (max-width: 767px) {
  .about-services-controls button:disabled {
    opacity: .35;
    cursor: default;
  }
}

@media (min-width: 768px) {
  .footer-links a:nth-child(6) { grid-column: 1; grid-row: 2; }
  .footer-links a:nth-child(7) { grid-column: 2; grid-row: 2; }
  .footer-links a:nth-child(8) { grid-column: 4; grid-row: 2; }
  .footer-links a:nth-child(9) { grid-column: 5; grid-row: 2; }
}

/* Home Figma reference fidelity */
body[data-page="home"] .ecosystem-track,
body[data-page="home"] .trusted-track,
body[data-page="home"] .impact-track { animation-delay: 1.8s; }


/* Pixel refinement against the supplied Figma Home exports */
@media (min-width: 768px) {
  /* Match the exact image crops visible in the 1440px Impact frame. */
  body[data-page="home"] .impact-card > img { object-fit: fill; }
  body[data-page="home"] .impact-row-one .impact-card:nth-child(1) > img { width: 336px; height: 448px; left: 0; top: -42px; }
  body[data-page="home"] .impact-row-one .impact-card:nth-child(2) > img { width: 1102px; height: 621px; left: -658px; top: -75px; }
  body[data-page="home"] .impact-row-one .impact-card:nth-child(3) > img { width: 706px; height: 471px; left: -185px; top: 0; }
  body[data-page="home"] .impact-row-one .impact-card:nth-child(4) > img { width: 559px; height: 419px; left: -111px; top: -27px; }
  body[data-page="home"] .impact-row-two .impact-card:nth-child(1) > img { width: 609px; height: 457px; left: -135px; top: -46px; }
  body[data-page="home"] .impact-row-two .impact-card:nth-child(2) > img { width: 492px; height: 369px; left: -14px; top: -2px; }
  body[data-page="home"] .impact-row-two .impact-card:nth-child(3) > img { width: 457px; height: 457px; left: -60px; top: -46px; }
  body[data-page="home"] .impact-row-two .impact-card:nth-child(4) > img { width: 367px; height: 490px; left: -15px; top: -63px; }
  body[data-page="home"] .impact-row-two .impact-card:nth-child(5) > img { width: 649px; height: 365px; left: -156px; top: 0; }

  /* The exported second row is captured partway through its opposite motion. */
  body[data-page="home"] .impact-row-two .impact-track {
    transform: translate3d(-224px, 0, 0);
  }
}

@keyframes impact-row-two-slide {
  from { transform: translate3d(-224px, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@media (max-width: 767px) {
  /* The mobile Impact export begins 10px higher than the earlier implementation. */
  body[data-page="home"] .impact { padding-top: 0; }
  body[data-page="home"] .impact-row-two .impact-card:nth-child(4) > img {
    width: 453px;
    height: 606px;
    left: -67px;
    top: -107px;
    object-fit: fill;
  }

  body[data-page="home"] .ecosystem h2 { margin-left: 10px; }

  body[data-page="home"] .capability-card {
    padding-top: 32px;
    padding-bottom: 24px;
  }
  body[data-page="home"] .capability-card li { min-height: 24px; }

  body[data-page="home"] .cta { padding-top: 14px; }

  body[data-page="home"] .footer-logo {
    transform: none;
  }
}

.home-desktop-footer-label { display: none; }
@media (min-width: 768px) {
  body[data-page="home"] .home-desktop-footer-label { display: inline; }
  body[data-page="home"] .default-footer-label { display: none; }
}


/* iPhone and mobile Safari resilience (430px remains the exact Figma frame). */
button, a { -webkit-tap-highlight-color: transparent; }
.ecosystem-track, .trusted-track, .impact-track, .menu-panel {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

@supports (top: max(0px, env(safe-area-inset-top))) {
  @media (max-width: 767px) {
    .site-header { top: max(24px, env(safe-area-inset-top)); }
    .menu-close { top: max(24px, env(safe-area-inset-top)); }
  }
}

@media (max-width: 429px) {
  body[data-page="home"] .impact > h2 { font-size: clamp(32px, 9.3023vw, 40px); }
  body[data-page="home"] .capabilities h2,
  body[data-page="home"] .trusted h2 { font-size: clamp(27px, 7.4419vw, 32px); }
  body[data-page="home"] .cta h2 { font-size: clamp(32px, 9.3023vw, 40px); }
}

@media (max-width: 767px) {
  body[data-page="home"] .impact-row { scroll-snap-type: x proximity; }
  body[data-page="home"] .impact-card { scroll-snap-align: start; scroll-snap-stop: normal; }
  body[data-page="home"] .capability-scroller { scroll-snap-type: y proximity; }
  body[data-page="home"] .capability-card { scroll-snap-align: start; scroll-snap-stop: normal; }
}

/* About page — exact Figma frames: desktop 1440x4766 (32:1099),
   mobile 430x3487 (44:1767). These refinements preserve the approved
   desktop layout and align the mobile section coordinates exactly. */
@media (max-width: 767px) {
  body[data-page="about"] .about-who-copy {
    font-size: 12px;
    line-height: normal;
  }

  body[data-page="about"] .about-services {
    margin-top: 74px;
    margin-bottom: 24px;
  }

  body[data-page="about"] .about-services-track {
    scroll-snap-type: x proximity;
    scroll-padding-inline: 0;
  }

  body[data-page="about"] .about-service-card {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }
}

/* Authored motion remains active on iOS/macOS even when Reduce Motion is on.
   Figma does not define a timeline for About; the implementation therefore
   keeps the ecosystem marquee and the requestAnimationFrame carousel motion. */
@media (prefers-reduced-motion: reduce) {
  body[data-page="about"] .ecosystem-track {
    animation-name: ecosystem-marquee !important;
    animation-duration: 24s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    animation-play-state: running !important;
  }
}

/* The 1440px Figma footers intentionally contain three GoldenReels entries.
   Mobile replaces the second slot with GoldenTech and does not show the extra
   desktop-only item. */
.figma-desktop-extra { display: none; }
@media (min-width: 768px) {
  .figma-desktop-extra {
    display: block;
    grid-column: 3;
    grid-row: 2;
  }
}

/* GoldenBrands page — exact reference frames:
   desktop 1440×4314 (Figma 14:89), mobile 430×3185 (Figma 44:2029). */
:root {
  --gb-peach: #dfad7b;
  --gb-peach-soft: #e0ae7c;
  --gb-blue: #3724ce;
  --gb-deep: #02020d;
}

.gb-page {
  min-height: 4314px;
  display: block;
  overflow: hidden;
  background: linear-gradient(180deg, #000 0%, var(--gb-blue) 50%, #000 100%);
}

.gb-content {
  width: 1440px;
  min-height: 4314px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 96px;
  margin: 0 auto;
  padding-top: 80px;
}

body.brand-detail-page .site-header { top: 32px; }
body[data-page="goldenbrands"] .menu-primary a:nth-child(1),
body[data-page="goldenvibes"] .menu-primary a:nth-child(2),
body[data-page="goldenreels"] .menu-primary a:nth-child(3),
body[data-page="goldenleads"] .menu-primary a:nth-child(4),
body[data-page="goldentech"] .menu-primary a:nth-child(5) { background: rgba(255,255,255,.08); }

.gb-hero {
  position: relative;
  flex: 0 0 900px;
  width: 1440px;
  height: 900px;
  overflow: hidden;
}

.gb-orb {
  position: absolute;
  pointer-events: none;
  transform-origin: center;
  will-change: transform;
}
.gb-orb-left {
  top: -398px;
  left: -350px;
  width: 400px;
  height: 957px;
  filter: blur(42px) hue-rotate(206deg) saturate(1.5);
  transform: rotate(19.75deg);
  animation: gb-orb-left-drift 14s ease-in-out infinite alternate;
}
.gb-orb-right {
  top: 450px;
  left: 1179px;
  width: 400px;
  height: 957px;
  filter: blur(42px) hue-rotate(206deg) saturate(1.5);
  transform: rotate(20.84deg);
  animation: gb-orb-right-drift 15s ease-in-out infinite alternate;
}
@keyframes gb-orb-left-drift { to { transform: translate3d(145px,95px,0) rotate(27deg) scale(1.08); } }
@keyframes gb-orb-right-drift { to { transform: translate3d(-175px,-105px,0) rotate(12deg) scale(1.12); } }

.gb-hero-copy {
  position: absolute;
  z-index: 2;
  top: 232px;
  left: 50%;
  width: 1277px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--brand-hero-gap, 40px);
  transform: translateX(-50%);
  text-align: center;
}
.gb-brand-logo { width: var(--brand-logo-width, 328.908px); height: var(--brand-logo-height, 115px); object-fit: cover; }
.gt-brand-logo { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; object-fit:contain; }
.gt-brand-logo .gt-mark { width:82px; height:54px; }
.gt-brand-logo .gt-word { width:328px; height:45px; }
.gb-hero h1 {
  width: 1277px;
  height: 195px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--gb-peach-soft);
  font-size: 72px;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
}
.gb-hero h1 span { display: block; }
.gb-hero-copy > p {
  width: 965px;
  min-height: 46px;
  margin: 0;
  color: var(--gb-peach-soft);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.gb-projects {
  position: relative;
  flex: 0 0 365px;
  width: 1440px;
  height: 365px;
  overflow: hidden;
}
.gb-project-track {
  width: max-content;
  height: 365px;
  display: flex;
  align-items: center;
  gap: 32px;
  animation: gb-project-marquee 30s cubic-bezier(.45,0,.55,1) 1.8s infinite alternate;
  will-change: transform;
}
@keyframes gb-project-marquee { to { transform: translate3d(-2208px,0,0); } }
.gb-project-card {
  position: relative;
  flex: 0 0 336px;
  width: 336px;
  height: 365px;
  overflow: hidden;
  border-radius: 16px;
  background: #030314;
}
.gb-project-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 1.022094s cubic-bezier(.22,1,.36,1);
}
.gb-project-card:nth-child(2) > img { object-position: center 22%; }
.gb-project-card:nth-child(3) > img { object-position: center; }
.gb-project-card:nth-child(4) > img { object-position: center 45%; }
.gb-project-card:nth-child(5) > img { object-position: center; }
.gb-project-card:nth-child(6) > img { object-position: center; }
.gb-project-card:nth-child(7) > img { object-position: center; }
.gb-project-card:nth-child(8) > img { object-position: center; }
.gb-project-card:nth-child(9) > img { object-position: center; }
.gb-project-card:nth-child(10) > img { object-position: center; }
.gb-project-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--brand-project-tint, var(--gb-blue));
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.gb-project-card > div {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 106px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 9px 17px;
  color: #fff;
  background: rgba(0,0,0,.52);
  opacity: 0;
  transform: translate3d(0,106px,0);
  transition: opacity 1.022094s cubic-bezier(.22,1,.36,1), transform 1.022094s cubic-bezier(.22,1,.36,1);
}
.gb-project-card h2, .gb-project-card p { margin: 0; }
.gb-project-card h2 { font-size: 21px; font-weight: 600; line-height: normal; }
.gb-project-card p { font-size: 16px; font-weight: 400; line-height: normal; }
@media (hover:hover) and (min-width:768px) {
  .gb-project-card:hover > img, .gb-project-card:focus-within > img { transform: scale(1.08); }
  .gb-project-card:hover > div, .gb-project-card:focus-within > div { opacity: 1; transform: none; }
}

.gb-capabilities {
  flex: 0 0 1080px;
  width: 1440px;
  height: 1080px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.gb-capability-row {
  width: 1440px;
  height: 500px;
  display: flex;
  align-items: center;
}
.gb-capability-row-one { gap: 80px; padding-left: 80px; }
.gb-capability-row-two { gap: 80px; padding-right: 80px; }
.gb-capability-copy { color: #b3b3b3; font-size: 16px; font-weight: 400; line-height: normal; }
.gb-capability-row-one .gb-capability-copy { flex: 0 0 555px; width: 555px; }
.gb-capability-row-two .gb-capability-copy { flex: 0 0 500px; width: 500px; }
.gb-capability-copy h2 {
  width: 555px;
  margin: 0 0 16px;
  color: var(--gb-peach);
  font-size: 60px;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
}
.gb-capability-paragraphs { width: 514px; }
.gb-capability-copy p { margin: 0; }
.gb-capability-paragraphs p:first-child { min-height: 73px; }
.gb-capability-paragraphs p + p { width: 500px; min-height: 69px; margin-top: 16px; }
.gb-capability-row-two .gb-capability-copy p { width: 500px; min-height: 78px; }
.gb-capability-row > img {
  flex: 0 0 725px;
  width: 725px;
  height: 500px;
  object-fit: cover;
  background: #01020c;
}
.gb-capability-row-one > img { border-radius: 48px 0 0 48px; }
.gb-capability-row-two > img { border-radius: 0 48px 48px 0; }

.gb-trusted { flex: 0 0 411px; width: 1440px; height: 411px; }
.gb-trusted h2 { color: var(--gb-peach); }
body.brand-detail-page .trusted-track { animation-delay: 1.8s; }

.gb-cta {
  flex: 0 0 409px;
  width: 1440px;
  height: 409px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: rgba(0,0,0,.5);
}
.gb-cta h2 {
  width: 824px;
  margin: 0;
  color: var(--gb-peach-soft);
  font-size: 64px;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
}
.gb-button {
  width: 279px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: var(--gb-peach-soft);
  color: #000;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 4px 2px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.gb-button:hover, .gb-button:focus-visible { outline: 0; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.32); }

body.brand-detail-page .site-footer {
  flex: 0 0 558px;
  width: 1436px;
  height: 558px;
  padding: 24px 0;
}

@media (min-width: 768px) and (max-width: 1439px) {
  body.brand-detail-page .gb-page {
    width: 1440px;
    min-width: 1440px;
    min-height: 4314px;
    zoom: calc(100vw / 1440px);
  }
  body.brand-detail-page .site-header {
    top: 32px;
    width: 1388px;
    max-width: none;
    height: 117px;
    zoom: calc(100vw / 1440px);
  }
  body.brand-detail-page .header-logo { left: 78px; }
  body.brand-detail-page .menu-toggle { right: 121px; }
}

@media (max-width: 767px) {
  body.brand-detail-page { min-width: 320px; background: #000; }
  body.brand-detail-page .gb-page {
    position: relative;
    width: 430px;
    min-width: 430px;
    min-height: var(--brand-mobile-height, 3185px);
    height: var(--brand-mobile-height, 3185px);
    margin: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #000 0%, var(--gb-blue) 50%, #000 100%);
  }
  body.brand-detail-page .gb-content {
    position: relative;
    width: 430px;
    min-height: var(--brand-mobile-height, 3185px);
    height: var(--brand-mobile-height, 3185px);
    display: block;
    margin: 0;
    padding: 0;
  }
  body.brand-detail-page .site-header {
    top: 24px;
    width: 410px;
    max-width: none;
    height: 58px;
  }

  .gb-hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 430px;
    height: 753px;
  }
  .gb-orb-left {
    top: -398px;
    left: -350px;
    width: 400px;
    height: 957px;
    display: block;
  }
  .gb-orb-right {
    top: 450px;
    left: 1179px;
    width: 400px;
    height: 957px;
    display: block;
  }
  .gb-hero-copy {
    top: 233px;
    width: 431px;
    gap: 0;
  }
  .gb-brand-logo { width: var(--brand-mobile-logo-width, 177px); height: var(--brand-mobile-logo-height, 62px); }
  .gt-brand-logo { width:175px; height:66px; gap:5px; }
  .gt-brand-logo .gt-mark { width:42px; height:28px; }
  .gt-brand-logo .gt-word { width:175px; height:24px; }
  .gb-hero h1 {
    width: 321px;
    height: 183px;
    font-size: 36px;
    line-height: normal;
    white-space: normal;
  }
  .gb-hero h1 .mobile-text { display: block; }
  .gb-hero-copy > p {
    width: 347px;
    height: 41px;
    color: var(--gb-peach-soft);
    font-size: 10px;
    line-height: normal;
  }

  .gb-projects {
    position: absolute;
    top: 695px;
    left: 15px;
    width: 400px;
    height: 330px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    scroll-snap-type: x proximity;
  }
  .gb-projects::-webkit-scrollbar { display: none; }
  .gb-project-track {
    height: 330px;
    gap: 16px;
    animation: none;
    transform: none;
  }
  .gb-project-card {
    flex: 0 0 270px;
    width: 270px;
    height: 330px;
    scroll-snap-align: start;
  }
  .gb-project-card > img { width: 100%; height: 100%; object-fit: cover; }
  .gb-project-card:nth-child(1) > img { width: 468px; height: 489px; left: -21px; top: -80px; }
  .gb-project-card:nth-child(2) > img { width: 372px; height: 530px; left: -17px; top: -29px; }
  .gb-project-card:nth-child(3) > img { width: 325px; height: 480px; left: -17px; top: -38px; }
  .gb-project-card:nth-child(4) > img { width: 372px; height: 548px; left: -51px; top: -109px; }
  .gb-project-card:nth-child(5) > img { width: 372px; height: 513px; left: -51px; top: -92px; }
  .gb-project-card > div {
    height: 97px;
    gap: 9px;
    padding: 9px 17px;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .gb-project-card h2 { font-size: 16px; }
  .gb-project-card p { font-size: 13px; }

  .gb-capabilities {
    position: absolute;
    top: 1073px;
    left: 0;
    width: 430px;
    height: 785px;
    display: block;
  }
  .gb-capability-row {
    position: absolute;
    left: 0;
    width: 430px;
    display: grid;
    justify-items: center;
    padding: 0;
  }
  .gb-capability-row-one {
    top: 0;
    height: var(--brand-cap-one-height, 433px);
    grid-template-rows: 38px 232px auto;
    row-gap: 16px;
    align-content: center;
  }
  .gb-capability-row-two {
    top: var(--brand-cap-two-top, 481px);
    height: var(--brand-cap-two-height, 304px);
    grid-template-rows: 232px auto;
    row-gap: 16px;
    align-content: center;
  }
  .gb-capability-row-one .gb-capability-copy,
  .gb-capability-row-two .gb-capability-copy { display: contents; }
  .gb-capability-copy h2 {
    grid-row: 1;
    width: 430px;
    margin: 0;
    color: var(--gb-peach);
    font-size: 32px;
    font-weight: 700;
    text-align: center;
  }
  .gb-capability-row-one > img {
    grid-row: 2;
    width: 384px;
    height: 232px;
    border-radius: 16px;
  }
  .gb-capability-paragraphs {
    grid-row: 3;
    width: 322px;
    color: #b3b3b3;
    font-size: 11px;
    line-height: normal;
    text-align: center;
  }
  .gb-capability-paragraphs p:first-child,
  .gb-capability-paragraphs p + p { width: 322px; min-height: 0; margin: 0; }
  .gb-capability-paragraphs p + p { margin-top: 10px; }
  .gb-capability-row-two > img {
    grid-row: 1;
    width: 384px;
    height: 232px;
    border-radius: 16px;
  }
  .gb-capability-row-two .gb-capability-copy p {
    grid-row: 2;
    width: 352px;
    min-height: 0;
    margin: 0;
    color: #b3b3b3;
    font-size: 11px;
    line-height: normal;
    text-align: center;
  }

  .gb-trusted {
    position: absolute;
    top: var(--brand-trusted-top, 1906px);
    left: 0;
    width: 430px;
    height: 180px;
    padding-top: 40px;
    background: rgba(2,2,8,.49);
  }
  .gb-trusted h2 {
    width: 366px;
    margin: 0 auto 22px;
    color: var(--gb-peach);
    font-size: 32px;
    font-weight: 700;
  }
  .gb-trusted .trusted-window { width: 430px; height: 39px; }

  .gb-cta {
    position: absolute;
    top: var(--brand-cta-top, 2134px);
    left: 15px;
    width: 400px;
    height: 300px;
    gap: 22px;
    border-radius: 24px;
    background: rgba(0,0,0,.5);
  }
  .gb-cta h2 {
    width: 376px;
    color: var(--gb-peach);
    font-size: 48px;
    font-weight: 500;
    line-height: normal;
    text-transform: none;
  }
  .gb-cta h2 small {
    display: block;
    font-size: 24px;
    font-weight: 500;
  }
  .gb-cta .mobile-text { display: block; }
  .gb-button {
    width: 125px;
    height: 42px;
    border-radius: 30px;
    background: var(--brand-mobile-button, var(--gb-peach));
    color: var(--brand-mobile-button-text, #000);
    font-size: 12px;
  }

  body.brand-detail-page .site-footer {
    position: absolute;
    top: var(--brand-footer-top, 2476px);
    left: 0;
    width: 430px;
    height: 709px;
    margin: 0;
    padding: 0;
  }
}

@media (max-width: 430px) {
  body.brand-detail-page .gb-page,
  body.brand-detail-page .site-header {
    zoom: calc(100vw / 430px);
  }
}

/* Motion is an authored interaction requirement for this product, including
   Safari/iPhone when the operating system preference is Reduce Motion. */
@media (prefers-reduced-motion: reduce) and (min-width: 768px) {
  body.brand-detail-page .gb-project-track {
    animation-name: gb-project-marquee !important;
    animation-duration: 30s !important;
    animation-timing-function: cubic-bezier(.45,0,.55,1) !important;
    animation-delay: 1.8s !important;
    animation-iteration-count: infinite !important;
    animation-direction: alternate !important;
    animation-play-state: running !important;
  }
  body.brand-detail-page .trusted-track {
    animation-name: trusted-marquee !important;
    animation-duration: 28s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    animation-play-state: running !important;
  }
  body.brand-detail-page .gb-orb-left { animation-name: gb-orb-left-drift !important; animation-duration: 14s !important; animation-iteration-count: infinite !important; animation-direction: alternate !important; animation-play-state: running !important; }
  body.brand-detail-page .gb-orb-right { animation-name: gb-orb-right-drift !important; animation-duration: 15s !important; animation-iteration-count: infinite !important; animation-direction: alternate !important; animation-play-state: running !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.brand-detail-page .trusted-track {
    animation-name: trusted-marquee !important;
    animation-duration: 28s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    animation-play-state: running !important;
  }
  body.brand-detail-page .gb-orb-left { animation-name: gb-orb-left-drift !important; animation-duration: 14s !important; animation-iteration-count: infinite !important; animation-direction: alternate !important; animation-play-state: running !important; }
  body.brand-detail-page .gb-orb-right { animation-name: gb-orb-right-drift !important; animation-duration: 15s !important; animation-iteration-count: infinite !important; animation-direction: alternate !important; animation-play-state: running !important; }
}

/* Keep the dedicated desktop/mobile GoldenBrands headline variants isolated
   from the generic span display rules used by the hero. */
@media (min-width: 768px) {
  .gb-hero h1 .mobile-text { display: none !important; }
  .gb-hero h1 .desktop-text { display: block !important; }
}
@media (max-width: 767px) {
  .gb-hero h1 .desktop-text { display: none !important; }
  .gb-hero h1 .mobile-text { display: block !important; }
}
@media (max-width: 767px) {
  .gb-hero h1 { padding-top: 14px; line-height: 1.08; }
}

body.brand-detail-page:not([data-page="goldenbrands"]) { --brand-mobile-logo-width:177px; --brand-mobile-logo-height:62px; }
@media (max-width:767px){
 body.brand-detail-page:not([data-page="goldenbrands"]) .gb-hero-copy > p{font-size:12px;height:auto;min-height:38px;}
 body[data-page="goldentech"]{--brand-mobile-logo-width:175px;--brand-mobile-logo-height:66px;}
 body.brand-detail-page .gb-capabilities{height:calc(var(--brand-cap-two-top,481px) + var(--brand-cap-two-height,304px));}
 body.brand-detail-page .gb-capability-row-one{height:var(--brand-cap-one-height,433px);}
 body.brand-detail-page .gb-capability-row-two{top:var(--brand-cap-two-top,481px);height:var(--brand-cap-two-height,304px);}
 body.brand-detail-page .gb-capability-row-one>img,body.brand-detail-page .gb-capability-row-two>img{border-radius:24px;}
}

/* ================================================================
   GoldenLines v15 production hardening
   Exact Home reference frames: desktop 1440px / mobile 430px.
   Home uses component-level responsive adaptation between references.
   ================================================================ */

/* Keep authored motion compositor-friendly without replacing the Figma orb
   transforms. Tracks may start on the compositor; ambient orbs retain their
   exported rotation and position during the animation delay. */
.ecosystem-track,
.trusted-track,
.impact-track,
.gb-project-track {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.hero-orb,
.gb-orb {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
html .motion-paused { animation-play-state: paused !important; }

/* The Home hero motion existed in the exported keyframes but was not attached. */
@media (min-width: 768px) {
  body[data-page="home"] .orb-left { animation: hero-orb-left 14s ease-in-out 1.8s infinite alternate; }
  body[data-page="home"] .orb-right { animation: hero-orb-right 15s ease-in-out 1.8s infinite alternate; }
  body[data-page="home"] .orb-top { animation: hero-orb-top 16s ease-in-out 1.8s infinite alternate; }
}

/* JavaScript drives these tracks on iOS/WebKit and under Reduce Motion. */
html.js-motion-driver .ecosystem-track,
html.js-motion-driver .trusted-track,
html.js-motion-driver .impact-track,
html.js-motion-driver .gb-project-track,
html.js-motion-driver body[data-page="home"] .hero-orb,
html.js-motion-driver body.brand-detail-page .gb-orb {
  animation: none !important;
}

/* Larger touch targets without changing the approved visible geometry. */
@media (max-width: 767px) {
  .impact-controls button,
  .capability-arrow,
  .about-services-controls button,
  .menu-toggle,
  .menu-close {
    position: relative;
  }
  .impact-controls button::before,
  .capability-arrow::before,
  .about-services-controls button::before,
  .menu-toggle::before,
  .menu-close::before {
    content: "";
    position: absolute;
    inset: -10px;
  }
}

/* Desktop artboard from tablet through 1439px. */
@media (min-width: 768px) and (max-width: 1439px) {
  body[data-page="about"] .site-header,
  body.brand-detail-page .site-header {
    width: 1388px;
    max-width: none;
    height: 117px;
    zoom: var(--artboard-scale, calc(100vw / 1440px));
  }
  body[data-page="about"] .header-logo,
  body.brand-detail-page .header-logo { left: 78px; }
  body[data-page="about"] .menu-toggle,
  body.brand-detail-page .menu-toggle { right: 121px; }

  /* Legacy scaled pages retain the original 1440px footer geometry. */
  body:not([data-page="home"]) .site-footer { gap: 40px; }
  body:not([data-page="home"]) .footer-links { width: 970px; gap: 16px 63px; font-size: 20px; }
  body:not([data-page="home"]) .footer-main { width: 970px; gap: 196px; }
  body:not([data-page="home"]) .footer-copy { width: 535px; }
  body:not([data-page="home"]) .footer-copy p { width: 484px; }
  body:not([data-page="home"]) .footer-identity { width: 229px; }
  body:not([data-page="home"]) .footer-logo { width: 216px; height: 96px; }
  body:not([data-page="home"]) .socials { gap: 32px; }
  body:not([data-page="home"]) .footer-rule { width: 1280px; }
  body:not([data-page="home"]) .legal { width: 1280px; }
}

/* Legacy mobile artboards keep their scaler until their responsive pass. */
@media (max-width: 767px) {
  body[data-page="about"] .about-page {
    width: 430px;
    min-width: 430px;
    height: 3487px;
    min-height: 3487px;
    zoom: var(--artboard-scale, calc(100vw / 430px));
  }
  body.brand-detail-page .gb-page {
    width: 430px;
    min-width: 430px;
    zoom: var(--artboard-scale, calc(100vw / 430px));
  }
  body[data-page="about"] .site-header,
  body.brand-detail-page .site-header {
    width: 410px;
    max-width: none;
    height: 58px;
    zoom: var(--artboard-scale, calc(100vw / 430px));
  }
}

/* Fallback for older iOS Safari versions without CSS zoom support. */
html.no-css-zoom .page-scale-shell {
  position: relative;
  width: 100%;
  overflow: hidden;
}
html.no-css-zoom .page-scale-shell > main {
  zoom: 1 !important;
  transform: scale(var(--artboard-scale, 1));
  transform-origin: top left;
}
html.no-css-zoom .site-header {
  zoom: 1 !important;
  transform: translateX(-50%) scale(var(--artboard-scale, 1));
  transform-origin: top center;
}

/* Keyboard focus remains visible without changing pointer states. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

/* ================================================================
   GoldenLines v15 Figma fidelity corrections
   Exact frames: desktop 1440px / mobile 430px.
   ================================================================ */

/* Figma keeps the header as a fixed child throughout the prototype. */
body.footer-in-view .site-header {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) !important;
}

/* The generic touch-target rule must not change the positioned menu controls. */
.site-header .menu-toggle,
.site-menu .menu-close {
  position: absolute;
}

@media (max-width: 767px) {
  .site-header {
    top: calc(24px + env(safe-area-inset-top, 0px));
  }
  .site-menu .menu-close {
    top: calc(24px + env(safe-area-inset-top, 0px));
    right: max(14px, env(safe-area-inset-right, 0px));
  }

  /* Figma hero headings are fixed three-line text frames, not fluid wraps. */
  body[data-page="goldenbrands"] .gb-hero h1 { width: 337px; height: 132px; }
  body[data-page="goldenvibes"] .gb-hero h1 { width: 340px; height: 132px; }
  body[data-page="goldenleads"] .gb-hero h1 { width: 339px; height: 132px; }
  body[data-page="goldenreels"] .gb-hero h1 { width: 392px; height: 132px; }
  body[data-page="goldentech"] .gb-hero h1 { width: 332px; height: 132px; }
  body.brand-detail-page .gb-hero h1 {
    padding-top: 0;
    line-height: normal;
    white-space: nowrap;
  }
  body.brand-detail-page .gb-hero h1 .mobile-text {
    width: 100%;
    white-space: nowrap;
  }
}

/* ================================================================
   Home responsive architecture — v15
   Exact visual references exist only at 430px and 1440px.
   Phones use the mobile composition; 768px and above use the desktop
   composition. Intermediate widths adapt components independently and
   never scale or zoom the complete Figma canvas.
   ================================================================ */

body[data-page="home"] .page-stack {
  width: 100%;
  min-width: 0;
  max-width: none;
  height: auto;
  zoom: 1;
}

@media (min-width: 768px) and (max-width: 1439px) {
  body[data-page="home"] .page-stack {
    min-height: 0;
    gap: clamp(36px, 3.889vw, 56px);
  }

  body[data-page="home"] .site-header {
    top: clamp(20px, 2.431vw, 35px);
    width: calc(100% - clamp(32px, 3.611vw, 52px));
    max-width: 1388px;
    height: clamp(78px, 8.125vw, 117px);
    zoom: 1;
  }

  body[data-page="home"] .header-logo {
    left: clamp(26px, 5.417vw, 78px);
    width: clamp(58px, 7.431vw, 107px);
    height: clamp(58px, 7.431vw, 107px);
  }

  body[data-page="home"] .menu-toggle {
    right: clamp(38px, 8.403vw, 121px);
    width: clamp(44px, 4.931vw, 71px);
    height: clamp(32px, 3.611vw, 52px);
  }

  body[data-page="home"] .hero {
    flex-basis: clamp(720px, 62.5vw, 900px);
    height: clamp(720px, 62.5vw, 900px);
  }

  body[data-page="home"] .hero-copy {
    top: clamp(250px, 22.5vw, 324px);
    width: min(90vw, 1257px);
  }

  body[data-page="home"] .hero h1 {
    font-size: clamp(56px, 6.667vw, 96px);
    line-height: 1.0885;
    letter-spacing: clamp(-4px, -0.278vw, -2px);
  }

  body[data-page="home"] .hero-copy p {
    width: min(78vw, 670px);
    font-size: clamp(15px, 1.389vw, 20px);
    line-height: 1.625;
  }

  body[data-page="home"] .hero-button {
    top: clamp(500px, 42.361vw, 610px);
    width: clamp(220px, 19.375vw, 279px);
    height: clamp(50px, 4.028vw, 58px);
    font-size: clamp(14px, 1.111vw, 16px);
  }

  body[data-page="home"] .ecosystem {
    flex-basis: clamp(240px, 21.25vw, 306px);
    height: clamp(240px, 21.25vw, 306px);
  }

  body[data-page="home"] .ecosystem h2 {
    top: clamp(48px, 4.444vw, 64px);
    left: max(32px, calc(50% - 637px));
    font-size: clamp(18px, 1.667vw, 24px);
  }

  body[data-page="home"] .ecosystem-window {
    top: clamp(122px, 10.625vw, 153px);
    width: calc(100% - clamp(32px, 6.25vw, 90px));
    max-width: 1350px;
  }

  body[data-page="home"] .impact > h2 {
    font-size: clamp(56px, 6.667vw, 96px);
    letter-spacing: clamp(-3px, -0.208vw, -1px);
  }

  body[data-page="home"] .impact-row {
    width: calc(100% - clamp(40px, 7.778vw, 112px));
    max-width: 1277px;
  }

  body[data-page="home"] .capabilities-panel {
    width: calc(100% - clamp(32px, 6.25vw, 90px));
    max-width: 1313px;
  }

  body[data-page="home"] .capability-scroller {
    width: calc(100% - clamp(48px, 6.597vw, 95px));
    max-width: 1218px;
  }

  body[data-page="home"] .trusted h2 {
    left: max(32px, calc(50% - 647px));
    font-size: clamp(30px, 2.778vw, 40px);
  }

  body[data-page="home"] .trusted-window {
    width: 100%;
    max-width: 1440px;
  }

  body[data-page="home"] .cta h2 {
    width: min(calc(100% - 64px), 824px);
    font-size: clamp(46px, 4.444vw, 64px);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body[data-page="home"] .impact {
    padding-top: 58px;
  }

  body[data-page="home"] .impact > h2 {
    margin-bottom: 32px;
  }

  body[data-page="home"] .capabilities h2 {
    font-size: clamp(30px, 4vw, 38px);
  }

  body[data-page="home"] .trusted h2 {
    top: 64px;
  }
}

@media (max-width: 767px) {
  body[data-page="home"] .page-stack {
    min-height: 3617px;
    height: auto;
  }

  body[data-page="home"] .site-header {
    width: calc(100% - 20px);
    max-width: none;
    zoom: 1;
  }

  body[data-page="home"] .hero-copy {
    width: 100%;
  }

  body[data-page="home"] .impact-row {
    width: calc(100% - 30px);
    max-width: 400px;
  }

  body[data-page="home"] .capabilities-panel {
    width: min(520px, calc(100% - 30px));
    max-width: none;
  }

  body[data-page="home"] .trusted-window {
    width: 100%;
  }
}

@media (min-width: 431px) and (max-width: 767px) {
  body[data-page="home"] .hero h1 {
    font-size: clamp(48px, 8vw, 56px);
    line-height: 1;
  }

  body[data-page="home"] .hero-copy p {
    font-size: clamp(13px, 2.2vw, 15px);
  }

  body[data-page="home"] .ecosystem-window {
    width: calc(100% - 48px);
    max-width: none;
  }

  body[data-page="home"] .impact-row {
    max-width: min(570px, calc(100% - 30px));
  }
}

@media (min-width: 1441px) {
  body[data-page="home"] .hero-copy,
  body[data-page="home"] .ecosystem-window,
  body[data-page="home"] .impact-row,
  body[data-page="home"] .capabilities-panel,
  body[data-page="home"] .trusted-window {
    margin-inline: auto;
  }
}

/* Home header/hero alignment.
   The gradient belongs to the complete Home page, not the Hero section. */
body[data-page="home"] .page-stack {
  --home-page-black: #000000;
  --home-deep-red: #6E0101;
  --home-golden-glow: #E6DA78;
  --home-glow-transparent-edge: rgba(102, 102, 102, 0);
  --home-desktop-glow-alpha: .26;
  background: linear-gradient(180deg, var(--home-page-black) 0%, var(--home-deep-red) 50%, var(--home-page-black) 100%);
}

body[data-page="home"] .hero {
  background: transparent;
}

body[data-page="home"] .orb-top {
  top: -781px;
  left: 630.4248px;
  width: 617.1157px;
  height: 961.9109px;
  background: none;
  filter: none;
  opacity: 1;
  transform: rotate(-19.8579deg);
  animation: none !important;
}

body[data-page="home"] .hero-orb {
  animation: none !important;
}

@media (min-width: 1440px) {
  body[data-page="home"] .site-header {
    top: 35px;
    width: 1388px;
    height: 117px;
  }

  body[data-page="home"] .header-logo {
    left: 78px;
    width: 107px;
    height: 107px;
  }

  body[data-page="home"] .menu-toggle {
    right: 121px;
    width: 71px;
    height: 52px;
  }

  body[data-page="home"] .hero {
    flex-basis: 900px;
    height: 900px;
  }

  body[data-page="home"] .hero-copy {
    top: 324px;
    width: 1257px;
  }

  body[data-page="home"] .hero h1 {
    font-size: 96px;
    line-height: 104.5px;
    letter-spacing: -4px;
  }

  body[data-page="home"] .hero-copy p {
    width: 670px;
    margin-top: 10px;
    font-size: 20px;
    line-height: 32.5px;
  }

  body[data-page="home"] .hero-button {
    top: 610px;
    width: 279px;
    height: 58px;
    border-radius: 16px;
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  body[data-page="home"] .site-header {
    width: calc(100% - 20px);
    max-width: 410px;
    height: 58px;
  }

  body[data-page="home"] .header-logo {
    left: 24px;
    width: 27px;
    height: 26px;
  }

  body[data-page="home"] .menu-toggle {
    right: 31px;
    width: 27px;
    height: 21px;
  }

  body[data-page="home"] .hero {
    height: 675px;
  }

  body[data-page="home"] .hero-copy {
    top: 261px;
    width: 100%;
  }

  body[data-page="home"] .hero h1 {
    font-size: 48px;
    line-height: 48px;
    letter-spacing: -2.4px;
  }

  body[data-page="home"] .hero-copy p {
    margin-top: 8px;
    font-size: 13px;
    line-height: 32.5px;
  }

  body[data-page="home"] .hero-button {
    top: 453px;
    width: 125px;
    height: 29px;
    border-radius: 8px;
    font-size: 12px;
  }

  body[data-page="home"] .capability-arrow {
    position: absolute;
    z-index: 5;
    top: 482px;
    display: block;
    width: 24px;
    height: 24px;
  }

  body[data-page="home"] .capability-arrow.up {
    left: 24px;
    right: auto;
  }

  body[data-page="home"] .capability-arrow.down {
    right: 24px;
    left: auto;
  }

  body[data-page="home"] .capability-scroller {
    height: 437px;
  }
}

/* About uses the same page-level gradient model as Home. */
body[data-page="about"] .about-page {
  --about-page-black: #000000;
  --about-deep-red: #6E0101;
  background: linear-gradient(180deg, var(--about-page-black) 0%, var(--about-deep-red) 50%, var(--about-page-black) 100%);
}

body[data-page="about"] .about-hero {
  background: transparent;
}

body[data-page="about"] .about-hero .orb-left,
body[data-page="about"] .about-hero .orb-right {
  background: none;
  filter: none;
  opacity: 0;
}

body[data-page="about"] .about-hero .orb-top {
  background: none;
  filter: none;
  opacity: 1;
  animation: none !important;
}

@media (max-width: 767px) {
  body[data-page="about"] .about-page {
    background: linear-gradient(180deg, #000000 0%, #6E0101 50%, #000000 100%);
  }

  body[data-page="about"] .about-hero {
    background: transparent;
  }

  body[data-page="about"] .about-hero .orb-left,
  body[data-page="about"] .about-hero .orb-right {
    background: none;
    filter: none;
    opacity: 0;
  }

  body[data-page="about"] .about-hero .orb-top {
    background: none;
    filter: none;
    opacity: 1;
    animation: none !important;
  }

  body[data-page="about"] .footer-logo {
    transform: none;
  }
}

/* ================================================================
   Home + About responsive QA pass.
   The approved 430px and 1440px frames stay as the visual anchors;
   intervening widths use component-level adaptation for readability.
   ================================================================ */

@media (max-width: 767px) {
  .site-menu .menu-primary,
  .site-menu .menu-footer {
    width: min(340px, 100%);
  }

  body[data-page="about"] .about-page {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 3487px;
    zoom: 1;
  }

  body[data-page="about"] .site-header {
    width: calc(100% - 20px);
    max-width: 410px;
    height: 58px;
    zoom: 1;
  }

  body[data-page="about"] .about-hero-copy { width: 100%; }
  body[data-page="about"] .about-hero h1 { width: min(394px, calc(100% - 32px)); }

  body[data-page="about"] .about-who-copy {
    left: clamp(16px, 7.442vw, 32px);
    width: min(288px, calc(100% - 32px));
  }

  body[data-page="about"] .about-who h2 { width: 100%; }

  body[data-page="about"] .mv-row,
  body[data-page="about"] .vision-row {
    width: 100%;
    padding-inline: clamp(16px, 5.349vw, 23px);
  }

  body[data-page="about"] .mv-row p,
  body[data-page="about"] .vision-row p {
    width: min(336px, calc(100% - 32px));
    height: auto;
    min-height: 71px;
  }
}

@media (min-width: 431px) and (max-width: 767px) {
  body[data-page="home"] .site-header,
  body[data-page="about"] .site-header {
    width: calc(100% - 30px);
    max-width: 720px;
  }

  body[data-page="about"] .about-hero h1 {
    width: calc(100% - 48px);
    height: auto;
    font-size: clamp(34px, 7.2vw, 46px);
  }

  body[data-page="about"] .about-hero p {
    width: min(430px, calc(100% - 48px));
    font-size: 14px;
    line-height: 1.6;
  }

  body[data-page="about"] .about-hero .gold-button {
    width: 150px;
    height: 36px;
  }

  body[data-page="about"] .about-who,
  body[data-page="about"] .about-who > img { height: 620px; }

  body[data-page="about"] .about-who-copy {
    left: max(32px, calc(50% - 210px));
    width: min(420px, calc(100% - 64px));
    font-size: clamp(11px, 1.9vw, 14px);
  }

  body[data-page="about"] .about-who h2 { font-size: clamp(34px, 6vw, 44px); }

  body[data-page="about"] .about-ecosystem .ecosystem-window {
    width: min(650px, calc(100% - 30px));
    max-width: none;
  }

  body[data-page="about"] .mv-row > img,
  body[data-page="about"] .vision-row > img {
    width: min(600px, calc(100% - 46px));
  }

  body[data-page="about"] .mv-row p,
  body[data-page="about"] .vision-row p {
    width: min(460px, calc(100% - 48px));
  }

  body[data-page="about"] .about-services { width: min(650px, calc(100% - 30px)); }

  body[data-page="about"] .about-services-track {
    width: calc(100% - 38px);
    max-width: none;
  }

  body[data-page="about"] .about-service-card {
    flex-basis: clamp(200px, 38vw, 240px);
    width: clamp(200px, 38vw, 240px);
  }
}

@media (max-width: 389px) {
  body[data-page="about"] .footer-links {
    top: 38px;
    width: calc(100% - 32px);
    max-width: none;
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(32px, auto);
    gap: 12px 8px;
    align-items: center;
  }

  body[data-page="about"] .footer-links a {
    position: static;
    justify-self: center;
    text-align: center;
  }
}

@media (max-width: 360px) {
  body[data-page="about"] .footer-identity {
    width: calc(100% - 64px);
    max-width: none;
    gap: 12px;
  }

  body[data-page="about"] .footer-logo { width: 110px; }
  body[data-page="about"] .socials { gap: 12px; }

  body[data-page="about"] .socials img {
    width: 24px;
    height: 24px;
  }
}

@media (min-width: 768px) and (max-width: 1439px) {
  body[data-page="about"] .about-page {
    width: 100%;
    min-width: 0;
    max-width: 1440px;
    height: auto;
    min-height: 0;
    zoom: 1;
  }

  body[data-page="about"] .site-header {
    top: clamp(20px, 2.431vw, 35px);
    width: calc(100% - clamp(32px, 3.611vw, 52px));
    max-width: 1388px;
    height: clamp(78px, 8.125vw, 117px);
    zoom: 1;
  }

  body[data-page="about"] .header-logo {
    left: clamp(26px, 5.417vw, 78px);
    width: clamp(58px, 7.431vw, 107px);
    height: clamp(58px, 7.431vw, 107px);
  }

  body[data-page="about"] .menu-toggle {
    right: clamp(38px, 8.403vw, 121px);
    width: clamp(44px, 4.931vw, 71px);
    height: clamp(32px, 3.611vw, 52px);
  }

  body[data-page="about"] .about-hero {
    flex-basis: clamp(720px, 62.5vw, 900px);
    height: clamp(720px, 62.5vw, 900px);
  }

  body[data-page="about"] .about-hero-copy {
    top: clamp(250px, 21.389vw, 308px);
    width: min(90vw, 1277px);
  }

  body[data-page="about"] .about-hero h1 {
    font-size: clamp(54px, 6.667vw, 96px);
    line-height: 1.08;
    letter-spacing: clamp(-4px, -0.278vw, -2px);
  }

  body[data-page="about"] .about-hero p {
    width: min(78vw, 670px);
    font-size: clamp(15px, 1.389vw, 20px);
    line-height: 1.625;
  }

  body[data-page="about"] .about-who {
    flex-basis: clamp(560px, 53.125vw, 765px);
    height: clamp(560px, 53.125vw, 765px);
    margin-top: clamp(48px, 5.556vw, 80px);
  }

  body[data-page="about"] .about-who-copy {
    top: clamp(150px, 15.903vw, 229px);
    left: max(32px, calc(50% - 637px));
    width: min(44vw, 514px);
    font-size: clamp(13px, 1.111vw, 16px);
  }

  body[data-page="about"] .about-who h2 {
    width: 100%;
    font-size: clamp(40px, 4.167vw, 60px);
  }

  body[data-page="about"] .about-ecosystem {
    flex-basis: clamp(220px, 21.25vw, 306px);
    height: clamp(220px, 21.25vw, 306px);
  }

  body[data-page="about"] .about-ecosystem h2 {
    left: max(32px, calc(50% - 637px));
  }

  body[data-page="about"] .about-ecosystem .ecosystem-window {
    width: calc(100% - clamp(32px, 6.25vw, 90px));
    max-width: 1350px;
  }

  body[data-page="about"] .mission-vision {
    flex-basis: auto;
    height: clamp(760px, 71.111vw, 1024px);
    gap: clamp(48px, 5.556vw, 80px);
    margin-top: clamp(48px, 5.556vw, 80px);
  }

  body[data-page="about"] .mv-row,
  body[data-page="about"] .vision-row {
    flex: 1 1 0;
    height: auto;
  }

  body[data-page="about"] .mv-row > img {
    width: min(49.306vw, 710px);
    height: min(100%, 470px);
  }

  body[data-page="about"] .mv-row > div { width: min(36.806vw, 530px); }
  body[data-page="about"] .mission-row > div { left: 56%; }
  body[data-page="about"] .vision-row > div { left: max(32px, 6.667vw); }
  body[data-page="about"] .mv-row h2 { font-size: clamp(40px, 4.444vw, 64px); }
  body[data-page="about"] .mv-row p { font-size: clamp(13px, 1.111vw, 16px); }

  body[data-page="about"] .about-services {
    flex-basis: auto;
    width: calc(100% - clamp(32px, 6.25vw, 90px));
    max-width: 1313px;
    height: clamp(760px, 65.278vw, 940px);
    margin-top: clamp(56px, 5.556vw, 80px);
    margin-bottom: clamp(56px, 4.792vw, 69px);
    padding-top: clamp(40px, 4.444vw, 64px);
  }

  body[data-page="about"] .about-services h2 {
    margin-bottom: clamp(32px, 3.889vw, 56px);
    font-size: clamp(32px, 2.778vw, 40px);
  }

  body[data-page="about"] .about-services-track {
    width: calc(100% - clamp(48px, 19.236vw, 277px));
    max-width: 1036px;
    height: calc(100% - clamp(128px, 15.556vw, 224px));
    gap: clamp(24px, 2.778vw, 40px);
  }

  body[data-page="about"] .about-service-card { gap: clamp(16px, 2.222vw, 32px); }

  body[data-page="about"] .service-icon,
  body[data-page="about"] .service-icon img {
    width: clamp(72px, 6.667vw, 96px);
    height: clamp(72px, 6.667vw, 96px);
  }

  body[data-page="about"] .service-icon-marketing img {
    width: clamp(36px, 3.264vw, 47px);
    height: clamp(36px, 3.264vw, 47px);
  }

  body[data-page="about"] .about-service-card h3 {
    width: min(266px, calc(100% - 32px));
    margin-bottom: clamp(-24px, -1.667vw, -12px);
    font-size: clamp(18px, 1.667vw, 24px);
  }

  body[data-page="about"] .about-service-card p {
    width: min(408px, calc(100% - 40px));
    height: auto;
    min-height: 66px;
    font-size: clamp(13px, 1.111vw, 16px);
  }

  body[data-page="about"] .site-footer {
    width: 100%;
    height: 522px;
    gap: clamp(34px, 2.778vw, 40px);
  }

  body[data-page="about"] .footer-links {
    width: min(970px, calc(100% - 68px));
    gap: 16px clamp(20px, 4.375vw, 63px);
    font-size: clamp(14px, 1.389vw, 20px);
  }

  body[data-page="about"] .footer-main {
    width: min(970px, calc(100% - 80px));
    gap: clamp(42px, 13.611vw, 196px);
  }

  body[data-page="about"] .footer-copy {
    flex: 1 1 auto;
    width: auto;
  }

  body[data-page="about"] .footer-copy p { width: 100%; }

  body[data-page="about"] .footer-identity {
    flex: 0 0 clamp(180px, 15.903vw, 229px);
    width: clamp(180px, 15.903vw, 229px);
  }

  body[data-page="about"] .footer-logo {
    width: clamp(176px, 15vw, 216px);
    height: auto;
    aspect-ratio: 2.25 / 1;
  }

  body[data-page="about"] .footer-rule,
  body[data-page="about"] .legal {
    width: min(1280px, calc(100% - 80px));
  }
}

@media (max-width: 420px) {
  body[data-page="about"] .about-hero h1 {
    height: auto;
    min-height: 112px;
    font-size: clamp(24px, 7.442vw, 31.25px);
  }
}

/* Keep the About hero title on the three authored Figma lines.
   The previous fixed height hid the extra wrapped line behind the subtitle. */
@media (max-width: 767px) {
  body[data-page="about"] .about-hero h1 {
    height: auto;
    min-height: 0;
    line-height: 1.1;
  }

  body[data-page="about"] .about-hero h1 span:first-child {
    white-space: nowrap;
  }

  body[data-page="about"] .about-hero h1 em {
    display: block;
  }
}

@media (max-width: 430px) {
  body[data-page="about"] .about-hero h1 {
    width: min(394px, calc(100% - 16px));
    font-size: clamp(23px, 7.2vw, 31px);
  }
}

@media (min-width: 431px) and (max-width: 767px) {
  body[data-page="about"] .about-hero h1 {
    font-size: clamp(31px, 7.2vw, 46px);
  }
}

/* Keep capability arrows in the narrow side gutters on iPhone 5 widths. */
@media (max-width: 340px) {
  body[data-page="home"] .footer-links {
    left: 24px;
    width: calc(100% - 48px);
    gap: 16px 8px;
  }

  body[data-page="home"] .footer-identity {
    width: calc(100% - 48px);
    max-width: none;
    justify-content: center;
    gap: 32px;
  }

  body[data-page="home"] .footer-logo {
    flex: 0 0 120px;
    width: 120px;
  }

  body[data-page="home"] .capability-arrow {
    display: grid;
    place-items: center;
  }

  body[data-page="home"] .capability-arrow.up {
    left: 2px;
  }

  body[data-page="home"] .capability-arrow.down {
    right: 2px;
  }

  body[data-page="home"] .capability-arrow img {
    width: 16px;
    height: 16px;
  }
}

/* Balance footer navigation and identity on 360px iPhone mini layouts. */
@media (min-width: 341px) and (max-width: 360px) {
  body[data-page="home"] .footer-links {
    left: 24px;
    width: calc(100% - 48px);
    gap: 16px 8px;
  }

  body[data-page="home"] .footer-identity {
    width: calc(100% - 48px);
    max-width: none;
    justify-content: center;
    gap: 32px;
  }

  body[data-page="home"] .footer-logo {
    flex: 0 0 120px;
    width: 120px;
  }
}

/* Add comfortable footer navigation gutters on 375px iPhone layouts. */
@media (min-width: 361px) and (max-width: 389px) {
  body[data-page="home"] .footer-links {
    left: 24px;
    width: calc(100% - 48px);
    gap: 16px 8px;
  }
}

/* About footer parity: reuse the approved Home footer geometry at every
   responsive tier instead of maintaining a second set of footer proportions. */
@media (max-width: 767px) {
  body[data-page="about"] .site-footer {
    margin-top: 55px;
  }
}

@media (max-width: 389px) {
  body[data-page="about"] .footer-links {
    top: 44px;
    left: 24px;
    width: calc(100% - 48px);
    max-width: none;
    height: 143px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    gap: 16px 8px;
    align-content: space-between;
    font-size: 13px;
    transform: none;
  }

  body[data-page="about"] .footer-links a {
    position: static;
    justify-self: center;
    text-align: center;
  }
}

@media (max-width: 360px) {
  body[data-page="about"] .footer-identity {
    width: calc(100% - 48px);
    max-width: none;
    gap: 32px;
  }

  body[data-page="about"] .footer-logo {
    flex: 0 0 120px;
    width: 120px;
  }

  body[data-page="about"] .socials {
    gap: 16px;
  }

  body[data-page="about"] .socials img {
    width: 26px;
    height: 26px;
  }
}

@media (max-width: 340px) {
  body[data-page="about"] .footer-links {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body[data-page="about"] .site-footer {
    gap: 34px;
  }

  body[data-page="about"] .footer-links {
    width: calc(100% - 68px);
    gap: 16px 20px;
    font-size: 14px;
  }

  body[data-page="about"] .footer-main {
    width: calc(100% - 80px);
    gap: clamp(42px, 7vw, 72px);
  }

  body[data-page="about"] .footer-copy {
    flex: 0 1 auto;
    width: calc(100% - 230px);
  }

  body[data-page="about"] .footer-copy p {
    width: 100%;
  }

  body[data-page="about"] .footer-identity {
    flex: 0 0 180px;
    width: 180px;
  }

  body[data-page="about"] .footer-logo {
    width: 176px;
    height: 78px;
    aspect-ratio: auto;
  }

  body[data-page="about"] .socials {
    gap: 24px;
  }

  body[data-page="about"] .footer-rule {
    width: 90vw;
  }

  body[data-page="about"] .legal {
    width: calc(100% - 80px);
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  body[data-page="about"] .site-footer {
    gap: 40px;
  }

  body[data-page="about"] .footer-links {
    width: 970px;
    gap: 16px 63px;
    font-size: 20px;
  }

  body[data-page="about"] .footer-main {
    width: 970px;
    gap: 196px;
  }

  body[data-page="about"] .footer-copy {
    flex: 0 1 auto;
    width: 535px;
  }

  body[data-page="about"] .footer-copy p {
    width: 484px;
  }

  body[data-page="about"] .footer-identity {
    flex: 0 1 auto;
    width: 229px;
  }

  body[data-page="about"] .footer-logo {
    width: 216px;
    height: 96px;
    aspect-ratio: auto;
  }

  body[data-page="about"] .socials {
    gap: 32px;
  }

  body[data-page="about"] .footer-rule {
    width: 90vw;
  }

  body[data-page="about"] .legal {
    width: 960px;
  }
}

/* Keep the footer brand readable between compact and 430px mobile anchors. */
@media (min-width: 361px) and (max-width: 427px) {
  body[data-page="home"] .footer-identity,
  body[data-page="about"] .footer-identity {
    width: calc(100% - 48px);
    max-width: none;
    justify-content: center;
    gap: 32px;
  }

  body[data-page="home"] .footer-logo,
  body[data-page="about"] .footer-logo {
    flex: 0 0 134px;
    width: 134px;
  }
}