/* ==========================================================================
   AAZ Consulting Sdn Bhd
   Single-viewport pages with a shared footer below; navy, white and brass,
   serif headlines, hairline rules.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --navy: #0E1B2C;
  --navy-2: #13243A;
  --navy-3: #1D3350;
  --slate: #2B4262;
  --text: #1B2633;
  --muted: #5B6676;
  --bg: #F5F6F8;
  --white: #FFFFFF;
  --line: #DDE2E8;
  --line-2: #C9D0D9;
  --gold: #B08D57;
  --gold-2: #C9A86E;
  --gold-soft: #F4EEE4;

  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

  --header-h: 76px;
  --pad-x: clamp(16px, 4vw, 72px);
  --pad-y: clamp(14px, 3.2vh, 40px);
  --gap: clamp(12px, 2.4vh, 28px);
  --radius: 4px;
  --shadow: 0 1px 2px rgba(14, 27, 44, .06), 0 10px 28px -14px rgba(14, 27, 44, .22);
  --shadow-lg: 0 2px 4px rgba(14, 27, 44, .05), 0 30px 60px -26px rgba(14, 27, 44, .42);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);

  --fs-display: clamp(1.9rem, .6rem + 1.2vw + 3vh, 4rem);
  --fs-h1: clamp(1.65rem, .55rem + 1vw + 2.5vh, 3.15rem);
  --fs-lead: clamp(.93rem, .8rem + .22vw + .38vh, 1.14rem);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
h1:focus { outline: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 .72rem/1 var(--font-sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold); }
.eyebrow__num { color: var(--gold); }
.display {
  font: 500 var(--fs-display)/1.08 var(--font-serif); letter-spacing: -.015em;
  color: var(--navy); text-wrap: balance;
}
.display em { font-style: italic; color: var(--gold); }
.h1 { font: 500 var(--fs-h1)/1.1 var(--font-serif); letter-spacing: -.012em; color: var(--navy); text-wrap: balance; }
.h3 { font: 600 1.15rem/1.25 var(--font-serif); color: var(--navy); }
.lead { max-width: 58ch; font-size: var(--fs-lead); line-height: 1.65; color: var(--muted); text-wrap: pretty; }
.label { font: 600 .7rem/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .65em;
  padding: .95em 1.5em;
  border: 1px solid var(--navy); border-radius: 2px;
  background: transparent; color: var(--navy);
  font: 500 .9rem/1 var(--font-sans); letter-spacing: .02em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn .icon { transition: transform .35s var(--ease); }
/* Only on devices with a real pointer: on touch screens hover sticks after a tap */
@media (hover: hover) { .btn:hover .icon { transform: translateX(4px); } }
.btn--primary { background: var(--navy); color: var(--white); }
.btn--primary:hover { background: var(--navy-3); border-color: var(--navy-3); }
.btn--text {
  padding-left: 0; padding-right: 0; border-color: transparent;
  background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 calc(100% - .55em) / 0 1px;
  transition: background-size .45s var(--ease), color .3s;
}
.btn--text:hover { background-size: 100% 1px; }
.btn--light { border-color: rgba(255, 255, 255, .55); color: var(--white); }
.btn--light:hover { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn--light:hover .icon { transform: translateX(-4px); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }

.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line-2); border-radius: 2px; background: var(--white); color: var(--navy);
  cursor: pointer; transition: background-color .3s, color .3s, border-color .3s;
}
.icon-btn:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }

.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px;
  border-radius: 2px; background: #E9F2EE; color: #1E5A45;
  font: 600 .64rem/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase;
}
.badge i { width: 6px; height: 6px; border-radius: 50%; background: #1E8A5E; animation: blink 1.8s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* Tabs: switch panels on small screens */
.seg { display: none; gap: 24px; border-bottom: 1px solid var(--line); }
.seg__btn {
  position: relative; padding: 10px 0 12px; border: 0; background: none; cursor: pointer;
  font: 500 .88rem/1 var(--font-sans); color: var(--muted); white-space: nowrap;
  transition: color .3s;
}
.seg__btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold);
  transform: scaleX(0); transition: transform .4s var(--ease);
}
.seg__btn:hover { color: var(--navy); }
.seg__btn[aria-pressed="true"] { color: var(--navy); }
.seg__btn[aria-pressed="true"]::after { transform: scaleX(1); }

/* ---------- Header ---------- */
.site-header {
  position: relative; z-index: 40; flex: none;
  height: var(--header-h);
  /* Equal side columns keep the two page links dead centre between logo and button */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--pad-x);
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.site-header__left { justify-self: start; display: flex; align-items: center; }
.site-header__right { justify-self: end; display: flex; align-items: center; gap: 10px; }

.main-nav { position: relative; height: 100%; }
.main-nav ul { height: 100%; display: flex; align-items: center; gap: clamp(8px, 2vw, 28px); }
.nav-item a {
  display: block; padding: 10px 12px;
  font: 500 .9rem/1 var(--font-sans); letter-spacing: .01em;
  color: var(--text); text-decoration: none; white-space: nowrap;
  transition: color .3s;
}
.nav-item a:hover, .nav-item a[aria-current="page"] { color: var(--navy); }
.nav-item a:hover { color: var(--gold); }
.nav-indicator {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--gold); opacity: 0;
  transition: transform .6s var(--ease), width .6s var(--ease), opacity .3s;
}

.logo { display: block; color: var(--navy); text-decoration: none; transition: color .3s; }
.logo__mark { display: block; height: calc(var(--header-h) - 22px); width: auto; aspect-ratio: 374 / 162; transition: transform .5s var(--ease); }
.logo:hover { color: var(--slate); }
.logo:hover .logo__mark { transform: scale(1.03); }

.btn--contact { padding: .85em 1.25em; }
.btn--contact[aria-current="page"] { background: var(--gold); border-color: var(--gold); color: var(--navy); }

.menu-btn {
  display: none; position: relative; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line-2); border-radius: 2px; background: var(--white); cursor: pointer;
}
.menu-btn span {
  position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--navy);
  transition: transform .4s var(--ease), top .3s var(--ease);
}
.menu-btn span:nth-child(1) { top: 16px; }
.menu-btn span:nth-child(2) { top: 25px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { top: 20.5px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { top: 20.5px; transform: rotate(-45deg); }

/* ---------- Mobile menu ---------- */
.mobile-menu {
  position: fixed; z-index: 35; inset: var(--header-h) 0 0 0;
  display: flex; flex-direction: column; gap: 18px;
  padding: 8px var(--pad-x) 24px;
  background: var(--white); overflow-y: auto;
}
.mobile-menu.is-open { animation: menu-in .45s var(--ease); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a {
  display: flex; align-items: baseline; gap: 16px; padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font: 500 1.45rem/1.1 var(--font-serif); color: var(--navy); text-decoration: none;
}
.mobile-menu.is-open nav a { animation: rise .55s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 40ms + 60ms); }
.mobile-menu__num { font: 600 .72rem/1 var(--font-sans); letter-spacing: .14em; color: var(--gold); }
.mobile-menu nav a[aria-current="page"] { color: var(--gold); }
.mobile-menu__ceo {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0;
  font: 500 .92rem/1 var(--font-sans); color: var(--muted); text-decoration: none;
}
.mobile-menu__legal { margin-top: auto; font-size: .78rem; color: var(--muted); }

/* ---------- Stage & pages ---------- */
.stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
/* One scroll area holds every section, top to bottom, and the shared footer below them */
.scroller {
  position: absolute; inset: 0;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}
/* On wider screens each section is at least one screen tall, so it keeps its full-screen layout as
   the visitor scrolls past; when a short or zoomed-in screen can't fit its content, the section
   grows taller instead of scrolling on its own (no second scrollbar). The inner min-height is the
   screen below the header, less the section's padding; its grids stretch to fill it.
   At 860px and under, sections take their natural height instead (see the 860px block). */
.page {
  position: relative; min-height: 100%;
  padding: var(--pad-y) var(--pad-x);
  overflow-x: clip;
}
.page + .page { border-top: 1px solid var(--line); }
.page[data-standalone] { border-top: 0; }
/* Faint architectural column lines behind every page */
.page::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(14, 27, 44, .035) calc(25% - 1px) 25%);
}
.page__inner {
  position: relative; z-index: 1; max-width: 1320px; margin: 0 auto;
  min-height: calc(100vh - var(--header-h) - 2 * var(--pad-y) - 1px);
  min-height: calc(100dvh - var(--header-h) - 2 * var(--pad-y) - 1px);
}

/* Entrance: elements fade up, staggered by --i (set in JS) */
.js .page:not(.is-entering) [data-reveal] { opacity: 0; }
.page.is-entering [data-reveal] {
  animation: rise .8s var(--ease) backwards;
  animation-delay: calc(var(--delay, 0ms) + var(--i, 0) * 60ms);
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Page transition curtain ---------- */
.wipe { position: absolute; inset: 0; z-index: 20; overflow: hidden; pointer-events: none; }
.wipe__bar { position: absolute; inset: 0; transform: translateX(101%); will-change: transform; }
.wipe__bar:nth-child(1) { background: var(--gold); }
.wipe__bar:nth-child(2) { display: grid; place-items: center; overflow: hidden; background: var(--navy); }
.wipe.is-intro .wipe__bar { transform: none; }
.wipe__label { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 24px; color: var(--white); text-align: center; }
.wipe__num { font: 600 .78rem/1 var(--font-sans); letter-spacing: .32em; color: var(--gold-2); }
.wipe__num:empty { display: none; }
.wipe__title { font: 500 clamp(2.2rem, 1.5rem + 4vw, 5.4rem)/1.05 var(--font-serif); letter-spacing: -.01em; }
.wipe__title::after { content: ""; display: block; width: 56px; height: 1px; margin: 22px auto 0; background: var(--gold-2); }

/* ==========================================================================
   Home
   ========================================================================== */
.home {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "intro art" "clients clients";
  column-gap: clamp(28px, 5vw, 80px);
  row-gap: var(--gap);
}
.home__intro {
  grid-area: intro; align-self: center;
  display: flex; flex-direction: column; align-items: flex-start; gap: clamp(12px, 2.4vh, 26px);
}
.home__art {
  grid-area: art; position: relative; min-height: 0; overflow: hidden;
  border-radius: var(--radius);
  background: radial-gradient(120% 90% at 100% 0%, var(--navy-3), var(--navy) 62%);
}
.home__art::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 32px 32px;
}
.home__caption {
  position: absolute; z-index: 1; bottom: 20px; left: 24px;
  font: 600 .64rem/1 var(--font-sans); letter-spacing: .28em; text-transform: uppercase; color: rgba(255, 255, 255, .6);
}
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-art .layer {
  transform: translate(calc(var(--px, 0) * var(--depth, 0) * 2px), calc(var(--py, 0) * var(--depth, 0) * 2px));
  transition: transform .9s var(--ease);
}
.hero-art .bar { transform-box: fill-box; transform-origin: bottom; }
.page.is-entering .hero-art .bar { animation: grow 1.1s var(--ease) backwards; animation-delay: calc(var(--delay, 0ms) + 350ms + var(--n, 0) * 70ms); }
.hero-art .trend { stroke-dasharray: 700; stroke-dashoffset: 0; }
.page.is-entering .hero-art .trend { animation: draw 1.8s var(--ease-io) backwards; animation-delay: calc(var(--delay, 0ms) + 900ms); }
.page.is-entering .hero-art .nodes { animation: fade .6s ease backwards; animation-delay: calc(var(--delay, 0ms) + 1500ms); }
.hero-art .pulse { transform-box: fill-box; transform-origin: center; animation: pulse 2.4s var(--ease) infinite; }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes draw { from { stroke-dashoffset: 700; } }
@keyframes fade { from { opacity: 0; } }
@keyframes pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }

.ceo-link {
  grid-area: art; align-self: start; justify-self: end; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  margin: 12px 14px 0 0; padding: 5px 14px 5px 5px;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px;
  font: 500 .78rem/1 var(--font-sans); letter-spacing: .02em; color: rgba(255, 255, 255, .78);
  text-decoration: none;
  transition: color .3s, border-color .3s, background-color .3s;
}
.ceo-link:hover, .ceo-link:focus-visible { color: var(--white); border-color: var(--gold-2); background: rgba(255, 255, 255, .06); }
.ceo-link__face { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gold-2); }
.ceo-link .icon { width: 1em; height: 1em; transition: transform .35s var(--ease); }
.ceo-link:hover .icon { transform: translateX(3px); }

/* Client logos: a conveyor belt that loops forever (JS appends a hidden copy of the list) */
.clients {
  grid-area: clients; min-width: 0;
  display: flex; flex-direction: column; gap: clamp(10px, 1.6vh, 16px);
  padding-top: clamp(12px, 2vh, 20px); border-top: 1px solid var(--line);
}
.clients__title { font-size: .82rem; line-height: 1.5; color: var(--muted); text-align: center; }
.marquee {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__inner { display: flex; width: max-content; animation: marquee var(--marquee-duration, 150s) linear infinite; }
.marquee__list { display: flex; align-items: center; gap: clamp(32px, 4vw, 56px); padding-right: clamp(32px, 4vw, 56px); }
.marquee__list img { display: block; width: auto; height: clamp(34px, 6.4vh, 52px); max-width: 150px; object-fit: contain; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   What We Do (pillars + gallery)
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "head gallery" "services gallery";
  column-gap: clamp(28px, 4.5vw, 72px);
  row-gap: var(--gap);
}
.split__head { grid-area: head; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(8px, 1.6vh, 18px); }
.split__services { grid-area: services; min-height: 0; }
.split__gallery { grid-area: gallery; min-height: 0; display: flex; flex-direction: column; gap: 12px; }

/* Pillars: an accordion, one open at a time */
.pillars { border-top: 1px solid var(--line); }
.pillar { position: relative; border-bottom: 1px solid var(--line); }
.pillar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.pillar.is-open::after { transform: scaleX(1); }
.pillar__heading { font: inherit; }
.pillar__head {
  width: 100%; display: flex; align-items: center; gap: 18px;
  padding: clamp(12px, 2.1vh, 20px) 0; border: 0; background: none; cursor: pointer;
  color: var(--navy); text-align: left;
}
.pillar__num { flex: none; width: 1.9em; font: 600 .72rem/1 var(--font-sans); letter-spacing: .16em; color: var(--muted); transition: color .3s; }
.pillar__title { flex: 1; font: 500 clamp(1rem, .88rem + .45vw, 1.3rem)/1.25 var(--font-serif); transition: color .3s; }
.pillar__head:hover .pillar__title { color: var(--slate); }
.pillar.is-open .pillar__num { color: var(--gold); }
.pillar__toggle { position: relative; flex: none; width: 14px; height: 14px; }
.pillar__toggle::before, .pillar__toggle::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor;
  transition: transform .45s var(--ease);
}
.pillar__toggle::after { transform: rotate(90deg); }
.pillar.is-open .pillar__toggle::after { transform: rotate(0); }
.pillar__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.pillar.is-open .pillar__body { grid-template-rows: 1fr; }
.pillar__content {
  min-height: 0; overflow: hidden; padding-left: calc(1.9 * .72rem + 18px);
  visibility: hidden; transition: visibility 0s .55s;
}
.pillar.is-open .pillar__content { visibility: visible; transition-delay: 0s; }
.pillar__content p { max-width: 64ch; font-size: clamp(.86rem, .8rem + .2vw, .98rem); line-height: 1.65; color: var(--muted); text-wrap: pretty; }
.pillar__content p + p { margin-top: .75em; }
.pillar__content > :last-child { margin-bottom: clamp(14px, 2.2vh, 20px); }
.pillar__link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding-bottom: 3px;
  border-bottom: 1px solid var(--gold); font: 500 .85rem/1 var(--font-sans); color: var(--navy); text-decoration: none;
}
.pillar__link .icon { transition: transform .35s var(--ease); }
.pillar__link:hover .icon { transform: translateX(4px); }

.gallery-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.gallery-head__hint { font-size: .78rem; color: var(--muted); }
.gallery {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.2vh, 12px);
}
.gallery .tile:first-child { grid-column: span 2; grid-row: span 2; }
.tile, .lightbox__media {
  background-color: var(--bg, var(--navy-2));
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 20px 20px;
}
.tile {
  position: relative; min-height: 0; padding: 0; overflow: hidden;
  border: 0; border-radius: var(--radius); cursor: zoom-in;
}
.tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(14, 27, 44, .92), rgba(14, 27, 44, 0) 50%);
}
.tile__media { position: absolute; inset: 0; }
.tile__media svg, .tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.tile:hover .tile__media svg, .tile:hover .tile__media img { transform: scale(1.05); }
.tile__cap {
  position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 12px;
  padding-left: 10px; border-left: 2px solid var(--gold-2);
  font: 500 .8rem/1.3 var(--font-sans); color: var(--white); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Video tiles: the video sits over the line drawing, which shows while it loads */
.tile--video { cursor: pointer; }
.tile--video::after { background: linear-gradient(to top, rgba(14, 27, 44, .8), rgba(14, 27, 44, 0) 42%); }
.tile__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity .45s var(--ease), transform .9s var(--ease);
}
.tile:hover .tile__media video { transform: scale(1.05); }
.tile.is-swapping .tile__media video { opacity: 0; }
.tile.is-broken .tile__media video { display: none; }
/* Photo turns: the photo takes the video's place, and the play button is hidden */
.tile__media .tile__photo { position: absolute; inset: 0; opacity: 0; transition: opacity .45s var(--ease), transform .9s var(--ease); }
.tile--photo .tile__photo { opacity: 1; }
.tile--photo .tile__media video, .tile--photo .tile__play, .tile.is-broken .tile__photo { display: none; }
.tile.is-swapping .tile__media .tile__photo { opacity: 0; }
.tile__badge {
  position: absolute; z-index: 2; top: 14px; left: 14px; padding: 6px 10px; border-radius: 2px;
  background: var(--gold-2); color: var(--navy);
  font: 600 .62rem/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase;
}
.tile__play {
  position: absolute; z-index: 2; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px;
  display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--navy);
  opacity: 0; transform: scale(.8); transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.tile__play .icon { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; stroke: none; }
.tile--video:hover .tile__play, .tile--video:focus-visible .tile__play { opacity: 1; transform: none; }
.tile--spotlight .tile__play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }

/* ==========================================================================
   System Development & SaaS
   ========================================================================== */
.sys {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(28px, 5vw, 80px);
}
.sys__intro, .sys__build { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(8px, 1.4vh, 16px); }
.sys__intro { justify-content: safe center; min-height: 0; }
.sys__build { width: 100%; }
.sys__build > .label { margin-top: clamp(4px, 1vh, 10px); } /* "What we can do" belongs to the list below */
.caps { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.cap {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 11px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--white);
  font: 500 .8rem/1.2 var(--font-sans); color: var(--navy);
  transition: border-color .3s;
}
.cap:hover { border-color: var(--gold); }
.cap .icon { width: 1em; height: 1em; color: var(--gold); }

.process {
  width: 100%; display: flex; flex-direction: column; gap: clamp(10px, 1.8vh, 16px);
  padding: clamp(14px, 2.2vh, 20px) clamp(16px, 1.6vw, 22px);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow);
}
.process__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.process__hint { font-size: .8rem; color: var(--muted); }
.process__track { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); --progress: 0; }
.process__track::before, .process__track::after { content: ""; position: absolute; top: 17px; left: 10%; height: 1px; }
.process__track::before { right: 10%; background: var(--line-2); }
.process__track::after { width: calc(80% * var(--progress)); height: 2px; top: 16.5px; background: var(--gold); transition: width .7s var(--ease); }
.step {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.step__dot {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 50%; background: var(--white);
  font: 600 .82rem/1 var(--font-sans); color: var(--muted);
  transition: background-color .35s, color .35s, border-color .35s, transform .45s var(--ease);
}
.step:hover .step__dot { border-color: var(--navy); color: var(--navy); }
.step.is-done .step__dot { border-color: var(--gold); color: var(--gold); }
.step[aria-selected="true"] .step__dot { background: var(--navy); border-color: var(--navy); color: var(--white); transform: scale(1.1); }
.step__label { font: 500 .8rem/1 var(--font-sans); color: var(--muted); transition: color .3s; }
.step[aria-selected="true"] .step__label { color: var(--navy); }
.step__timer { width: 28px; height: 2px; overflow: hidden; background: var(--line); opacity: 0; transition: opacity .3s; }
.step__timer::after { content: ""; display: block; width: 100%; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.process.is-running .step[aria-selected="true"] .step__timer { opacity: 1; }
.process.is-running .step[aria-selected="true"] .step__timer::after { animation: step-timer 5.5s linear forwards; }
.process:hover .step__timer::after { animation-play-state: paused; }
@keyframes step-timer { to { transform: scaleX(1); } }

.process__panel { padding-top: clamp(10px, 1.6vh, 14px); border-top: 1px solid var(--line); animation: panel-in .6s var(--ease); }
/* All five steps share one slot sized to the longest, so changing step never changes the section's
   height (on the long page that would shift everything below). Hidden steps stay out of view and
   out of the accessibility tree. */
.process__panels { display: grid; }
.process__panel { grid-area: 1 / 1; }
.process__panel[hidden] { display: block !important; visibility: hidden; }
.process__panel p { font-size: .88rem; line-height: 1.55; color: var(--muted); }
.process__panel b { font-weight: 600; color: var(--navy); }
@keyframes panel-in { from { opacity: 0; transform: translateX(14px); } }

/* SaaS showcase card: product details, a live-looking preview, and a link out */
/* Sized by its content and centred; only squeezes (via the preview) when the screen is short */
.product {
  align-self: center; min-height: 0; max-height: 100%;
  display: flex; flex-direction: column; gap: clamp(10px, 1.6vh, 16px);
  padding: clamp(14px, 2.4vh, 24px);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-lg);
}
.product__bar { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(6px, 1vh, 10px); }
.product__brand { display: flex; align-items: center; gap: 12px; }
.product__logo { width: auto; height: clamp(22px, 3.6vh, 30px); }
.product__tagline { font: 500 clamp(1rem, .9rem + .35vw, 1.25rem)/1.3 var(--font-serif); color: var(--navy); }
.product__summary { font-size: clamp(.8rem, .76rem + .14vw, .88rem); line-height: 1.6; color: var(--muted); }
.product__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; }
.product__foot .btn--text { padding-top: .4em; padding-bottom: .4em; background-position: 0 100%; }

.preview {
  position: relative; display: flex; flex-direction: column; flex: 0 1 auto; aspect-ratio: 16 / 10; min-height: 0; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: 6px; background: var(--white); box-shadow: var(--shadow-lg);
  text-decoration: none;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.preview:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(14, 27, 44, .05), 0 44px 80px -30px rgba(14, 27, 44, .5); }
.preview::after { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--navy); opacity: 0; transition: opacity .45s var(--ease); }
.preview:hover::after { opacity: .42; }
.preview__cta {
  position: absolute; z-index: 3; left: 50%; top: 50%;
  display: inline-flex; align-items: center; gap: .6em; padding: 1em 1.5em;
  border-radius: 2px; background: var(--white); color: var(--navy);
  font: 500 .92rem/1 var(--font-sans); letter-spacing: .02em; white-space: nowrap;
  opacity: 0; transform: translate(-50%, -40%);
  transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.preview:hover .preview__cta, .preview:focus-visible .preview__cta { opacity: 1; transform: translate(-50%, -50%); }
.preview__bar { flex: none; height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #EEF1F4; border-bottom: 1px solid var(--line); }
.preview__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.preview__url {
  flex: 0 1 46%; margin-left: 10px; padding: 4px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--white);
  font: 500 .7rem/1 var(--font-sans); color: var(--muted);
}
.preview__screen { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #E8EBE8; container-type: inline-size; }
.preview__caption { font-size: .78rem; color: var(--muted); text-align: center; }

/* Illustrative Tallyo dashboard (Tallyo brand colours) */
.mock { position: absolute; inset: 0; display: grid; grid-template-columns: 21% minmax(0, 1fr); color: #1D2B26; font-family: var(--font-sans); }
.mock__side { display: flex; flex-direction: column; gap: 1cqw; padding: 2.4cqw 1.4cqw; background: #fff; border-right: 1px solid #D5DBD7; }
.mock__logo { width: 72%; margin: 0 0 1.8cqw .9cqw; }
.mock__nav { display: block; padding: 1.1cqw 1.3cqw; border-radius: 1cqw; font-size: 1.65cqw; color: #55625C; }
.mock__nav.is-active { background: #1E5A45; color: #F3F8F5; font-weight: 600; }
.mock__main { display: flex; flex-direction: column; gap: 1.8cqw; min-width: 0; padding: 2.4cqw; }
.mock__top { display: flex; align-items: center; justify-content: space-between; font-size: 2.4cqw; }
.mock__pill { padding: .6cqw 1.4cqw; border: 1px solid #D5DBD7; border-radius: 99px; background: #fff; font-size: 1.45cqw; }
.mock__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6cqw; }
.mock__kpi { display: flex; flex-direction: column; gap: .5cqw; padding: 1.6cqw; border: 1px solid #D5DBD7; border-radius: 1.4cqw; background: #fff; }
.mock__kpi small { font-size: 1.4cqw; color: #6B7772; }
.mock__kpi b { font-size: 2.5cqw; font-weight: 600; }
.mock__kpi em { font-size: 1.3cqw; font-style: normal; font-weight: 600; color: #1E5A45; }
.mock__kpi em.is-down { color: #B5523F; }
.mock__row { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.6cqw; }
.mock__card { display: flex; flex-direction: column; gap: 1.2cqw; min-height: 0; padding: 1.6cqw; border: 1px solid #D5DBD7; border-radius: 1.4cqw; background: #fff; }
.mock__card small { font-size: 1.4cqw; font-weight: 600; color: #6B7772; }
.mock__bars { flex: 1; min-height: 0; display: flex; align-items: flex-end; gap: 1cqw; }
.mock__bars i { flex: 1; height: var(--h); border-radius: .6cqw .6cqw 0 0; background: #1E5A45; transform-origin: bottom; }
.mock__bars i.is-gold { background: #C9A24A; }
.page.is-entering .mock__bars i { animation: grow 1s var(--ease) backwards; animation-delay: calc(var(--delay, 0ms) + 500ms + var(--n, 0) * 55ms); }
.mock__line { display: flex; align-items: center; justify-content: space-between; padding: .7cqw 0; border-bottom: 1px solid #EEF1EF; font-size: 1.4cqw; }
.mock__tag { padding: .3cqw 1cqw; border-radius: 99px; background: #E3EDE8; color: #1E5A45; font-size: 1.2cqw; font-weight: 600; }
.mock__tag.is-due { background: #F6EAD0; color: #8A6A1F; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(28px, 5vw, 80px); align-items: center; }
.contact__intro { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, 1.8vh, 18px); }
.details { width: 100%; margin-top: 6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; border-top: 1px solid var(--line); }
.details li { display: flex; align-items: flex-start; gap: 12px; padding: clamp(10px, 1.8vh, 16px) 0; border-bottom: 1px solid var(--line); }
.details .icon { margin-top: 2px; color: var(--gold); }
.details small { display: block; margin-bottom: 4px; font: 600 .66rem/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.details span, .details a { font-size: .92rem; color: var(--navy); }
.details a { text-decoration-color: var(--gold); text-underline-offset: 3px; }

.form {
  display: flex; flex-direction: column; gap: clamp(12px, 2vh, 20px);
  padding: clamp(18px, 3.2vh, 36px);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-lg);
}
.form__title { font-size: clamp(1.1rem, 1rem + .3vw, 1.35rem); }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.6vh, 16px) 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field > span { font: 600 .68rem/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field em { font-style: normal; font-weight: 500; letter-spacing: .04em; text-transform: none; }
.field input, .field select, .field textarea {
  width: 100%; padding: .72em .9em;
  border: 1px solid var(--line-2); border-radius: 2px; background: #FBFCFD;
  font-size: .95rem; color: var(--text);
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.field textarea { min-height: clamp(60px, 12vh, 120px); resize: none; }
.field select {
  appearance: none; padding-right: 2.4em; cursor: pointer; text-overflow: ellipsis;
  background: #FBFCFD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1B2C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8em center / 1em;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy); background-color: var(--white); box-shadow: 0 0 0 3px rgba(14, 27, 44, .08); }
.field [aria-invalid="true"] { border-color: #B3261E; box-shadow: 0 0 0 3px rgba(179, 38, 30, .1); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.form__note { flex: 1; min-width: 180px; font-size: .8rem; color: var(--muted); }
.form__note.is-error { color: #B3261E; }
.form__note.is-ok { color: #1E5A45; }
.form__privacy { margin-top: 12px; font-size: .74rem; color: var(--muted); }
.form__privacy a { color: var(--navy); text-decoration-color: var(--gold); text-underline-offset: 3px; }

/* ==========================================================================
   Meet the CEO
   ========================================================================== */
.page--ceo { background: var(--navy); color: var(--white); }
.page--ceo::before { background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(255, 255, 255, .04) calc(25% - 1px) 25%); }
/* Oversized watermark, clipped to the page so it never causes scrolling */
.page--ceo::after {
  content: "AAZ"; position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: flex-end;
  font: 600 38vh/.72 var(--font-serif); letter-spacing: .06em; color: rgba(255, 255, 255, .03);
}
.page--ceo .eyebrow { color: var(--gold-2); }
.page--ceo .eyebrow::before { background: var(--gold-2); }
.page--ceo .h1 { color: var(--white); }
.ceo { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); column-gap: clamp(32px, 6vw, 96px); align-items: center; }
.ceo__portrait { height: 100%; max-height: 600px; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 26px; }
.ceo__frame { position: relative; flex: 0 1 auto; min-height: 0; height: calc(100% - 44px); aspect-ratio: 4 / 5; max-width: 100%; margin-right: 16px; }
.ceo__frame::before { content: ""; position: absolute; inset: 16px -16px -16px 16px; border: 1px solid var(--gold-2); }
.ceo__frame picture { display: contents; }
.ceo__frame svg, .ceo__frame img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.ceo__portrait figcaption { font: 500 .78rem/1 var(--font-sans); letter-spacing: .06em; color: rgba(255, 255, 255, .55); }
.ceo__text { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, 1.8vh, 18px); }
.ceo__role { font: 500 .9rem/1.4 var(--font-sans); letter-spacing: .02em; color: rgba(255, 255, 255, .62); }
.ceo__quote {
  position: relative; max-width: 32ch; padding-left: clamp(30px, 3vw, 44px);
  font: italic 500 clamp(1.15rem, .85rem + .9vw + .8vh, 1.9rem)/1.35 var(--font-serif);
}
.ceo__quote::before {
  content: "\201C"; position: absolute; left: 0; top: -.12em;
  font: 600 3.2em/1 var(--font-serif); color: var(--gold-2);
}
.ceo__body { display: flex; flex-direction: column; gap: 10px; max-width: 58ch; font-size: clamp(.88rem, .84rem + .18vw, 1rem); line-height: 1.7; color: rgba(255, 255, 255, .78); }
.ceo__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 6px; }
.ceo__sign { font: italic 500 1.35rem/1 var(--font-serif); color: var(--gold-2); }

/* ---------- About us (a page of its own) ---------- */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(28px, 5vw, 80px); align-content: center; align-items: start; }
.about__intro { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(12px, 2vh, 20px); }
/* The heading and facts stay in view while the longer text beside them scrolls past */
.about__intro { position: sticky; top: var(--pad-y); }
.facts { width: 100%; max-width: 420px; margin-top: 4px; border-top: 1px solid var(--line); }
.facts div { display: flex; align-items: baseline; gap: 16px; padding: clamp(9px, 1.5vh, 13px) 0; border-bottom: 1px solid var(--line); }
.facts dt { flex: none; width: 8.5em; font: 600 .66rem/1.5 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; font: 500 1rem/1.4 var(--font-serif); color: var(--navy); }
.about__body { display: flex; flex-direction: column; gap: .95em; max-width: 66ch; font-size: clamp(.88rem, .83rem + .2vw, 1rem); line-height: 1.75; color: var(--muted); }
.about__body p { text-wrap: pretty; }
.about__body p:first-child { font-size: 1.1em; line-height: 1.65; color: var(--navy); }
.about__tagline {
  margin-top: .3em; padding-left: 16px; border-left: 2px solid var(--gold);
  font: italic 500 1.05em/1.5 var(--font-serif); color: var(--navy);
}

/* ---------- Our values (a page of its own) ---------- */
.values { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(28px, 5vw, 80px); align-content: center; align-items: center; }
.values__intro { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(12px, 2vh, 20px); }
.values__close { max-width: 54ch; padding-top: clamp(12px, 2vh, 18px); border-top: 1px solid var(--line); font-size: .9rem; line-height: 1.7; color: var(--muted); text-wrap: pretty; }
.values__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.value {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-content: start;
  padding: clamp(16px, 2.6vh, 24px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
}
.value .icon { grid-row: span 2; width: 26px; height: 26px; margin-top: 1px; color: var(--gold); }
.value__name { font: 600 1.12rem/1.25 var(--font-serif); color: var(--navy); }
.value p { font-size: .88rem; line-height: 1.55; color: var(--muted); }

/* ---------- Meet the team (a page of its own) ---------- */
.team { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(28px, 5vw, 80px); align-content: center; align-items: start; }
/* Like About us, the heading stays in view while the departments scroll past */
.team__intro { position: sticky; top: var(--pad-y); display: flex; flex-direction: column; align-items: flex-start; gap: clamp(12px, 2vh, 20px); }
.team__depts { display: flex; flex-direction: column; gap: clamp(22px, 3.6vh, 38px); }
.dept__name {
  display: flex; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
  font: 600 .7rem/1.4 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--navy);
}
.dept__num { color: var(--gold); }
.dept__people { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.person {
  display: grid; grid-template-columns: clamp(104px, 11vw, 150px) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); align-items: start;
  padding: clamp(16px, 2.6vh, 24px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
}
.person__photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; background: var(--bg); }
.person__text { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.person__name { font: 600 1.28rem/1.25 var(--font-serif); color: var(--navy); }
.person__role { margin-top: -4px; font: 600 .68rem/1.4 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.person__bio { max-width: 70ch; font-size: .9rem; line-height: 1.68; color: var(--muted); text-wrap: pretty; }
.person__bio a { color: var(--navy); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.person__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.person__tags li { padding: 5px 10px; border: 1px solid var(--line); border-radius: 2px; background: var(--bg); font-size: .74rem; line-height: 1.3; color: var(--navy); }
.person__edu { font-size: .8rem; line-height: 1.55; color: var(--muted); }
.person__edu span { display: block; margin-bottom: 2px; font: 600 .62rem/1.4 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--text); }
.person__link { display: inline-flex; align-items: center; gap: 6px; font: 500 .84rem/1.3 var(--font-sans); color: var(--navy); text-decoration: none; transition: color .3s; }
.person__link .icon { width: 1em; height: 1em; transition: transform .35s var(--ease); }
.person__link:hover { color: var(--gold); }
.person__link:hover .icon { transform: translateX(3px); }

/* ---------- Testimonials (in the long page, before Meet the CEO) ---------- */
.testimonials { display: flex; flex-direction: column; justify-content: center; gap: clamp(22px, 4vh, 40px); }
.testimonials__head { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, 1.8vh, 16px); }
.testimonials__badge { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--navy); }
.testimonials__badge .icon { color: var(--gold); fill: var(--gold); }
.quotes {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.quotes__inner { display: flex; width: max-content; animation: marquee var(--quotes-duration, 200s) linear infinite; }
.quotes__list { display: flex; align-items: stretch; gap: 16px; padding-right: 16px; }
.quotes__list > li { display: flex; width: clamp(270px, 26vw, 350px); }
.quote {
  width: 100%; display: flex; flex-direction: column; gap: 12px; margin: 0;
  padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
}
.quote::before { content: "\201C"; height: .45em; font: 600 2.8rem/.8 var(--font-serif); color: var(--gold-2); }
.quote blockquote { flex: 1; margin: 0; }
.quote blockquote p { font-size: .9rem; line-height: 1.62; color: var(--text); text-wrap: pretty; }
.quote figcaption { padding-top: 12px; border-top: 1px solid var(--line); }
.quote figcaption strong { display: block; font: 600 .98rem/1.3 var(--font-serif); color: var(--navy); }
.quote figcaption span { display: block; margin-top: 3px; font-size: .76rem; line-height: 1.4; color: var(--muted); }

/* ---------- Privacy notice ---------- */
.privacy { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(28px, 5vw, 80px); align-items: center; }
.privacy__intro { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, 1.8vh, 18px); }
.privacy__alt { display: block; margin-top: .25em; font-size: .52em; font-style: italic; color: var(--gold); }
/* The language toggle shows at every width, not only on small screens like the other tabs */
.privacy-dialog .seg { display: inline-flex; }
.privacy-dialog .is-off { display: none !important; }
.privacy__lead { max-width: 60ch; font: italic 500 clamp(1.02rem, .88rem + .45vw, 1.3rem)/1.45 var(--font-serif); color: var(--navy); text-wrap: pretty; }
.privacy__grid { margin-top: clamp(12px, 2.2vh, 22px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 40px); border-top: 1px solid var(--line); }
.privacy__item { padding: clamp(10px, 1.7vh, 16px) 0; border-bottom: 1px solid var(--line); }
.privacy__item h3 { margin-bottom: 6px; font: 600 .66rem/1.35 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.privacy__item p { font-size: .86rem; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.privacy__item a { color: var(--navy); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.privacy__item .privacy__meta { margin-top: 8px; font-size: .74rem; color: var(--muted); }

/* ==========================================================================
   Footer (shared by every page, below the fold)
   ========================================================================== */
.site-footer {
  padding: clamp(44px, 7vh, 76px) var(--pad-x) 22px;
  background: var(--navy); color: var(--white);
  border-top: 1px solid rgba(201, 168, 110, .45);
}
.site-footer__inner {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .75fr) minmax(0, 1.5fr);
  gap: 36px clamp(28px, 3.5vw, 56px); align-items: start;
}
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-logo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 10px; color: var(--white); text-decoration: none; }
.footer-logo__mark { display: block; width: auto; height: 66px; aspect-ratio: 374 / 162; }
.footer-logo__tag { font: 600 .55rem/1.3 var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); }
.footer-brand__tag { max-width: 30ch; margin-top: 4px; font: italic 500 1.08rem/1.4 var(--font-serif); color: rgba(255, 255, 255, .82); }
.footer-contact {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 4px; padding-bottom: 4px;
  border-bottom: 1px solid var(--gold-2);
  font: 500 .92rem/1 var(--font-sans); color: var(--white); text-decoration: none;
  transition: color .3s;
}
.footer-contact .icon { color: var(--gold-2); }
.footer-contact:hover { color: var(--gold-2); }

.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col__title { font: 600 .66rem/1 var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); }
.footer-col__title:not(:first-child) { margin-top: 20px; }
.site-footer address, .footer-col p { font-style: normal; font-size: .9rem; line-height: 1.65; color: rgba(255, 255, 255, .78); }
.footer-col ul { display: flex; flex-direction: column; gap: 9px; }
.footer-col ul a { font-size: .9rem; color: rgba(255, 255, 255, .78); text-decoration: none; transition: color .3s; }
.footer-col ul a:hover, .footer-col ul a[aria-current="page"] { color: var(--gold-2); }

.footer-map { display: flex; flex-direction: column; gap: 14px; }
.footer-map__frame {
  aspect-ratio: 16 / 10; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius); background: var(--navy-2);
}
.footer-map iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(.9) contrast(1.05); transition: filter .6s var(--ease); }
.footer-map:hover iframe, .footer-map:focus-within iframe { filter: none; }
.footer-map__link {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  font: 500 .84rem/1 var(--font-sans); letter-spacing: .02em; color: var(--white); text-decoration: none;
  transition: color .3s;
}
.footer-map__link .icon { color: var(--gold-2); }
.footer-map__link:hover { color: var(--gold-2); }

.site-footer__bottom {
  max-width: 1320px; margin: clamp(34px, 5vh, 56px) auto 0; padding-top: 18px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .8rem; letter-spacing: .02em; color: rgba(255, 255, 255, .55);
}
.site-footer__bottom a { color: inherit; text-underline-offset: 3px; transition: color .3s; }
.site-footer__bottom a:hover { color: var(--gold-2); }

/* Footer columns fade up as they scroll into view (class added by JS) */
.site-footer.can-animate .site-footer__inner > * { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.site-footer.can-animate.is-in .site-footer__inner > * { opacity: 1; transform: none; }
.site-footer.can-animate.is-in .site-footer__inner > :nth-child(2) { transition-delay: .08s; }
.site-footer.can-animate.is-in .site-footer__inner > :nth-child(3) { transition-delay: .16s; }
.site-footer.can-animate.is-in .site-footer__inner > :nth-child(4) { transition-delay: .24s; }

@media (max-width: 1100px) {
  .site-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-map { grid-column: 1 / -1; }
  .footer-map__frame { aspect-ratio: 21 / 8; }
}
@media (max-width: 700px) {
  .site-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-map__frame { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox {
  width: min(1000px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible;
}
.lightbox::backdrop { background: rgba(14, 27, 44, .78); }

/* Privacy notice: a window over the page, opened from the footer and the contact form. The content
   scrolls inside it when long; on phones it fills the screen. */
.privacy-dialog {
  width: min(1120px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: var(--radius); overflow: hidden;
  background: var(--bg); color: var(--text); box-shadow: var(--shadow-lg);
}
.privacy-dialog::backdrop { background: rgba(14, 27, 44, .78); }
.privacy-dialog[open] { animation: lb-in .55s var(--ease); }
.privacy-dialog[open]::backdrop { animation: fade .35s ease-out; }
.privacy-dialog__scroll { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: clamp(40px, 5vw, 64px) clamp(20px, 4vw, 56px) clamp(24px, 4vw, 48px); }
.privacy-dialog__close { position: absolute; top: 14px; right: 14px; background: var(--white); }
.lightbox[open] { animation: lb-in .55s var(--ease); }
.lightbox[open]::backdrop { animation: fade .35s ease-out; }
@keyframes lb-in { from { opacity: 0; transform: translateY(18px); } }
.lightbox__card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); overflow: hidden;
  border-radius: var(--radius); background: var(--white); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6);
}
.lightbox__media { position: relative; aspect-ratio: 10 / 7; overflow: hidden; }
.lightbox__media svg, .lightbox__media img { width: 100%; height: 100%; object-fit: cover; }
.lightbox__media.is-video { background: #000; }
.lightbox__media video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.lightbox__media.is-photo { background: var(--navy); }
.lightbox__media.is-photo img { object-fit: contain; } /* the whole photo, whatever its shape */
.lightbox__info { display: flex; flex-direction: column; gap: 12px; padding: 32px 28px 26px; }
.lightbox__count { font: 600 .7rem/1 var(--font-sans); letter-spacing: .2em; color: var(--gold); }
.lightbox__info .h3 { padding-right: 44px; font-size: 1.5rem; font-weight: 500; }
.lightbox__info p { font-size: .95rem; color: var(--muted); }
.lightbox__nav { display: flex; gap: 8px; margin-top: auto; padding-top: 14px; }
.lightbox__close { position: absolute; top: 16px; right: 16px; }

/* ---------- Floating WhatsApp button (every screen) ---------- */
.wa-float {
  position: fixed; z-index: 30;
  right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; text-decoration: none;
}
.wa-float__btn {
  width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%;
  background: #25D366; color: #fff;
  box-shadow: 0 10px 24px -10px rgba(14, 27, 44, .6), 0 2px 6px rgba(14, 27, 44, .18);
  transition: transform .3s var(--ease);
}
.wa-float__icon { width: 30px; height: 30px; }
.wa-float__label {
  padding: 9px 13px; border-radius: 2px; background: var(--navy); color: var(--white);
  font: 500 .82rem/1 var(--font-sans); letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 8px 20px -10px rgba(14, 27, 44, .6);
}
.wa-float:focus-visible { outline: none; }
.wa-float:focus-visible .wa-float__btn { outline: 2px solid var(--navy); outline-offset: 3px; }
@media (hover: hover) { .wa-float:hover .wa-float__btn { transform: scale(1.06); } }
/* Room under the footer's last line so the button never covers it */
.site-footer__bottom { padding-bottom: 76px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .nav-item a { padding: 10px 9px; font-size: .86rem; }
}

/* Short desktop screens: tighten so everything still fits without scrolling */
@media (max-height: 820px) {
  /* The numbered steps explain themselves; drop the card's header row when height is tight */
  .process__head { display: none; }
}
@media (min-width: 861px) and (max-height: 820px) {
  /* The Malay notice runs about a fifth longer than the English one */
  .privacy__lead { font-size: 1.02rem; }
  .privacy__item p { font-size: .8rem; line-height: 1.5; }
}
@media (min-width: 861px) and (max-height: 700px) {
  .pillar__content p { font-size: .86rem; line-height: 1.55; }
  .ceo__body { font-size: .88rem; }
}
@media (min-width: 861px) and (max-height: 630px) {
  .product__summary, .form__title { display: none; }
}
@media (min-width: 861px) and (max-height: 600px) {
  :root { --header-h: 64px; }
  .gallery-head__hint, .process__hint, .clients__title { display: none; }
}

/* Both inner pages need two roomy columns; below 1100px show one panel at a time */
@media (max-width: 1100px) {
  .page--what-we-do .seg, .page--systems .seg { display: inline-flex; }
  .page--what-we-do .is-off, .page--systems .is-off { display: none !important; }
  .split {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "head" "panel";
  }
  .split__services, .split__gallery { grid-area: panel; }
  .sys { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); row-gap: var(--gap); }
  .sys__intro { justify-content: flex-start; }
  .product { align-self: start; }
  /* On the "Our SaaS" tab the intro paragraph steps aside so the preview keeps its shape */
  .page--systems[data-view="saas"] .lead { display: none; }
}
@media (min-width: 601px) and (max-width: 1100px) {
  /* Product details beside the preview rather than above it */
  .product {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: minmax(0, 1fr) auto;
    column-gap: clamp(18px, 2.4vw, 28px); row-gap: 12px;
  }
  .product__bar { grid-column: 1; grid-row: 1; }
  .product__foot { grid-column: 1; grid-row: 2; flex-direction: column; align-items: flex-start; }
  .product .preview { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .gallery { grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .gallery .tile:first-child { grid-column: auto; grid-row: auto; }
}

/* Tablet & phone header */
@media (max-width: 1023px) {
  :root { --header-h: 64px; }
  .menu-btn { display: block; }
  .btn--contact { min-height: 44px; } /* same height as the menu button beside it */
  .nav-item, .nav-indicator { display: none; }
}

/* Single column: one panel at a time via the tabs */
@media (max-width: 860px) {
  .seg { display: inline-flex; }
  .is-off { display: none !important; }
  .page::before { display: none; }

  .home {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "intro" "clients";
    align-content: center;
    row-gap: clamp(20px, 4vh, 36px);
  }
  .home__art { display: none; }
  /* The CEO chip lives on the hero panel, which is hidden here; the CEO section is a scroll away */
  .ceo-link { display: none; }

  /* One long page: each section takes its natural height; Home still fills the first screen */
  .page { min-height: 0; padding-block: clamp(36px, 7vh, 56px); }
  .page__inner { min-height: 0; }
  .page--home { min-height: 100%; display: flex; flex-direction: column; padding-block: var(--pad-y); }
  .page--home > .page__inner { flex: 1; width: 100%; }

  /* The tabbed sections show all their panels, one after another (the privacy notice keeps its
     language toggle) */
  .page--what-we-do .seg, .page--systems .seg, .page--contact .seg { display: none; }
  .split { grid-template-rows: none; grid-template-areas: "head" "services" "gallery"; }
  .split__services { grid-area: services; }
  .split__gallery { grid-area: gallery; }
  .gallery { flex: none; height: clamp(340px, 70vw, 560px); }

  .sys, .contact, .ceo, .privacy, .about, .values, .team { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; row-gap: var(--gap); }
  .page[data-standalone] { min-height: 100%; }
  .about__intro, .team__intro { position: static; }
  .quotes__list > li { width: min(300px, 78vw); }
  .privacy__grid { grid-template-columns: minmax(0, 1fr); }
  .sys { grid-template-rows: none; }
  .sys__intro { justify-content: flex-start; }
  .product { align-self: start; }

  /* min-height: auto keeps the portrait row from collapsing under the text on short phones */
  .ceo__portrait { height: auto; max-height: none; min-height: auto; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; }
  .ceo__frame { width: 84px; height: 104px; margin: 0; }
  .ceo__frame::before { inset: 6px -6px -6px 6px; }
  .page--ceo::after { font-size: 24vh; }
}

@media (max-width: 600px) {
  :root { --header-h: 60px; --fs-lead: .9rem; }
  .form__grid { grid-template-columns: minmax(0, 1fr); } /* one field per row */
  .values__grid { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
  .value { padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
  /* Team: a small photo beside the name and role, the rest full width below */
  .person { grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; row-gap: 10px; padding: 16px; }
  .person__text { display: contents; }
  .person__photo { grid-row: span 2; }
  .person__name { align-self: end; }
  .person__role { align-self: start; margin-top: 0; }
  .person__bio, .person__tags, .person__edu, .person__link { grid-column: 1 / -1; }
  .person__link { justify-self: start; }
  .privacy-dialog { width: 100%; height: 100%; max-height: none; margin: 0; border-radius: 0; }
  .privacy-dialog__scroll { height: 100%; max-height: none; padding: 64px 16px 32px; }
  .wa-float__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .btn { font-size: .86rem; }
  .btn--contact { padding: .75em .95em; }
  .actions { gap: 4px 24px; }

  .marquee__list img { height: 38px; max-width: 120px; }

  /* The gallery becomes a two-row strip you swipe sideways */
  .gallery {
    height: clamp(320px, 92vw, 440px); display: grid; grid-auto-flow: column;
    grid-template-columns: none; grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-columns: 70%;
    gap: 10px; padding-bottom: 6px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .gallery::-webkit-scrollbar { display: none; }
  .tile { scroll-snap-align: start; }
  .gallery .tile:first-child { grid-column: auto; grid-row: span 2; }
  .gallery-head__hint { display: none; }

  .pillar__head { gap: 12px; }
  .pillar__content { padding-left: 0; }

  .caps { gap: 6px; }
  .cap { padding: 6px 10px 6px 9px; font-size: .76rem; }
  .process { padding: 14px; }
  .step__dot { width: 32px; height: 32px; }
  .process__track::before { top: 15px; }
  .process__track::after { top: 14.5px; }
  .step__label { font-size: .72rem; }

  .product__summary, .preview__cta { display: none; }

  .contact .lead, .form__title { display: none; }
  .details { grid-template-columns: minmax(0, 1fr); }

  .lightbox__card { grid-template-columns: minmax(0, 1fr); }
  .lightbox__info { padding: 20px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* The logo belt stops; visitors can scroll it sideways instead */
  .marquee__inner { animation: none !important; }
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .quotes__inner { animation: none !important; }
  .quotes { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .quotes__list[aria-hidden] { display: none; }
}