@font-face {
  font-family: "Neue Montreal";
  src: url("assets/fonts/NeueMontreal-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("assets/fonts/NeueMontreal-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("assets/fonts/NeueMontreal-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("assets/fonts/NeueMontreal-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #29284f;
  --navy-deep: #1e1d48;
  --orange: #ff5b25;
  --orange-deep: #dd4f21;
  --ink: #111114;
  --muted: #77777c;
  --line: #b9babd;
  --panel: #e4e9ed;
  --panel-2: #dbe1e5;
  --paper: #ffffff;
  --shadow: 0 16px 45px rgba(22, 22, 28, .10);
  --radius: 28px;
  --header-height: 82px;
  --wrap: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Neue Montreal", Arial, Helvetica, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--orange); color: #fff; }

.skip-link {
  position: fixed;
  z-index: 1000;
  left: 18px;
  top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #111;
  color: #fff;
  transform: translateY(-160%);
  transition: .2s ease;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  z-index: 100;
  top: 15px;
  left: 50%;
  width: min(calc(100% - 40px), 1120px);
  height: var(--header-height);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 240px 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 10px 26px 10px 34px;
  border: 1px solid rgba(20,20,25,.07);
  border-radius: 50px;
  background: linear-gradient(100deg, rgba(245,246,247,.92), rgba(255,255,255,.70));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 3px 14px rgba(0,0,0,.08), inset 0 1px 1px rgba(255,255,255,.9);
  transition: .25s ease;
}
.site-header.is-scrolled {
  top: 9px;
  height: 68px;
  width: min(calc(100% - 28px), 1160px);
  box-shadow: 0 10px 34px rgba(0,0,0,.12), inset 0 1px 1px rgba(255,255,255,.92);
}
.brand { display: inline-flex; align-items: center; width: 150px; }
.brand img { width: 145px; height: auto; }
.site-nav { display: flex; justify-content: center; align-items: center; gap: 24px; font-size: 15px; }
.site-nav a { position: relative; white-space: nowrap; }
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .2s ease;
}
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav-cta {
  padding: 15px 22px;
  border-radius: 17px;
  background: linear-gradient(120deg, #0b0b0c, #242425);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 7px 16px rgba(0,0,0,.10);
  white-space: nowrap;
}
.nav-toggle { display: none; }

.section { position: relative; overflow: clip; }
.section-wrap { width: min(calc(100% - 48px), var(--wrap)); margin-inline: auto; }
.eyebrow { font-size: 17px; margin: 0 0 18px; }

.hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 140px 22px 70px;
  isolation: isolate;
}
/* ---- Hero sky -------------------------------------------------------
   Clouds drift right to left behind the headline. Each cloud carries its
   own size, speed, opacity and blur as custom properties set in index.php,
   so the motion is tuned there rather than here. */
.hero-clouds {
  --cloud-scale: 1;          /* shrinks the whole sky on small screens */
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.cloud-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.cloud {
  position: absolute;
  left: 100%;                /* starts just off the right edge */
  top: var(--top);
  width: calc(var(--w) * 1px * var(--cloud-scale));
  opacity: var(--op);
  will-change: transform;
  animation: cloud-drift var(--dur) linear infinite;
  animation-delay: var(--delay);
}
.cloud-art {
  display: block;
  width: 100%;
  height: auto;
  filter: blur(var(--blur));
  /* The horizontal drift lives on .cloud, so the gentle rise and fall
     needs its own element — one transform per element. */
  animation: cloud-bob var(--bob) ease-in-out infinite alternate;
}

@keyframes cloud-drift {
  from { transform: translate3d(0, 0, 0); }
  /* 100% here is the cloud's own width, so it clears the left edge fully. */
  to   { transform: translate3d(calc(-100vw - 100%), 0, 0); }
}
@keyframes cloud-bob {
  from { transform: translateY(0); }
  to   { transform: translateY(-13px); }
}

/* Smaller sky on smaller screens, so a cloud never swamps the viewport. */
@media (max-width: 850px) { .hero-clouds { --cloud-scale: .64; } }
@media (max-width: 560px) { .hero-clouds { --cloud-scale: .5; } }

.hero::after {
  content:"";
  position:absolute;
  inset:0;
  /* Keeps the headline clean while letting clouds show near the edges. */
  background: radial-gradient(circle at 50% 42%,
    rgba(255,255,255,.90) 0 21%,
    rgba(255,255,255,.55) 41%,
    rgba(255,255,255,.14) 72%,
    rgba(255,255,255,0) 100%);
  z-index:-1;
}
.hero-inner { text-align: center; margin-top: 15px; }
.hero h1 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(58px, 7vw, 108px);
  line-height: .80;
  letter-spacing: -0.065em;
  font-weight: 400;
  text-shadow: 0 5px 7px rgba(0,0,0,.12);
}
.hero h1 span { color: var(--orange); font-weight: 700; }
.hero p { margin: 35px 0 28px; color: #66666b; font-size: 18px; line-height: 1.05; }
.hero-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 30px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  font-size: 20px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-light { background: linear-gradient(#f2f2f3, #dedfe1); box-shadow: 0 4px 5px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.8); }
.button-dark { background: linear-gradient(135deg, #09090a, #232324); color: #fff; box-shadow: 0 6px 12px rgba(0,0,0,.16); }

.task { min-height: 100svh; padding: 125px 0 78px; display: flex; align-items: center; }
.task-title {
  max-width: 950px;
  margin: 0;
  color: var(--navy);
  font-weight: 700;
  font-size: clamp(64px, 6vw, 96px);
  line-height: .84;
  letter-spacing: -0.06em;
}
.task-title span { color: var(--orange); }
.task-title span:last-of-type { color: var(--orange); }
.task-intro { max-width: 580px; margin: 24px 0 25px 6px; color: #626268; font-size: 20px; line-height: 1.04; }
.principles-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 14px; }
.principle-card {
  position: relative;
  min-height: 245px;
  display: grid;
  grid-template-columns: 1fr 52px;
  border-radius: 23px;
  overflow: hidden;
  background: linear-gradient(135deg, #e9edf0, #cfd5d9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.principle-content { padding: 30px 24px 26px; }
.line-icon { width: 44px; height: 44px; margin-bottom: 15px; }
.line-icon svg { width: 100%; height: 100%; fill: none; stroke: #0c0c0d; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.principle-card h3 { width: fit-content; margin: 0 0 12px; padding-bottom: 5px; border-bottom: 1px solid #232326; font-size: 20px; font-weight: 400; }
.principle-card p { margin: 0; color: #65666a; font-size: 14px; line-height: 1.02; }
.card-number { display: flex; align-items: flex-start; justify-content: center; padding-top: 34px; color: #fff; font-size: 30px; }
.card-number.navy { background: linear-gradient(180deg, #1b1947 0 33%, #403f68 33% 100%); }
.card-number.orange { background: linear-gradient(180deg, #cf4d1b 0 33%, #e36b3d 33% 100%); }

.clients { min-height: 100svh; padding: 130px 0 80px; display: flex; align-items: center; }
.clients-wrap { width: min(calc(100% - 32px), 1420px); }
.clients-title { text-align: center; margin: 0 auto 56px; font-size: clamp(44px, 4.3vw, 67px); line-height: .86; letter-spacing: -0.055em; font-weight: 700; }
.clients-title span { color: var(--orange); }
.client-row { display: grid; grid-template-columns: 180px 1fr; align-items: stretch; border-top: 1px solid #858589; border-bottom: 1px solid #858589; }
.client-row + .client-row { margin-top: 56px; }
.client-label { margin: 0; padding: 26px 18px; display: flex; align-items: center; color: #8d8d92; font-size: 19px; line-height: .95; border-right: 1px solid #d3d3d3; }
.orange-text { color: #d8785f; }
.logo-track { min-width: 0; display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); align-items: center; gap: 22px; padding: 15px 24px; overflow-x: auto; scrollbar-width: thin; }
.logo-track img { width: 100%; height: 72px; object-fit: contain; }
.text-logo.boc { display: grid; place-items: center; color: #daa714; font-weight: 700; text-align: center; }
.text-logo.boc strong { font-size: 45px; line-height: .85; text-shadow: 0 1px #000; }
.text-logo.boc small { color: #333; font-size: 10px; }

.process { min-height: 100svh; padding: 130px 0 95px; }
.process-wrap { display: grid; grid-template-columns: .82fr 1.38fr; gap: 85px; align-items: start; }
.process-copy { position: sticky; top: 128px; padding-top: 24px; }
.process-copy h2 { margin: 0; font-size: clamp(50px, 5.3vw, 78px); line-height: .82; letter-spacing: -0.055em; font-weight: 700; }
.process-copy h2 span { color: var(--orange); }
.process-copy p:last-child { max-width: 420px; color: #727277; font-size: 17px; line-height: 1.05; margin-top: 28px; }
.process-list { position: relative; display: grid; gap: 0; }
.process-card { display: grid; grid-template-columns: 58px 1fr; gap: 18px; padding: 28px 30px 25px 22px; border-radius: 28px; background: linear-gradient(135deg, #e9eef1, #d7dfe4); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.process-card h3 { margin: 0 0 11px; font-size: clamp(32px, 3vw, 48px); font-weight: 300; letter-spacing: -0.04em; }
.process-card p { margin: 0; color: #696a6d; font-size: 15px; line-height: 1.1; }
.step-badge { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 18px; }
.orange-bg { background: var(--orange); }
.navy-bg { background: var(--navy); }
.timeline-line { width: 1px; height: 46px; background: #828589; margin-left: 50px; }
.pill-list { display: flex; gap: 7px; flex-wrap: wrap; padding: 0; margin: 18px 0 0; list-style: none; }
.pill-list li { padding: 7px 10px; border: 1px solid rgba(255,255,255,.95); border-radius: 999px; background: rgba(255,255,255,.65); color: #8a8a8f; font-size: 11px; }

.people-lead { min-height: 100svh; padding: 130px 0 75px; display: flex; align-items: center; }
.leader-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: center; }
.leader-visual { position: relative; min-height: 535px; display: grid; place-items: end center; }
.leader-orange { position: absolute; left: 32px; right: 56px; top: 28px; bottom: 12px; background: #ffad19; }
.leader-photo { position: relative; z-index: 2; width: 560px; height: 590px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 8px 6px rgba(0,0,0,.18)); }
.signature { position: absolute; z-index: 3; width: 190px; left: -4px; top: 115px; transform: rotate(-7deg); }
.leader-kicker { margin: 0 0 8px; font-size: 15px; }
.leader-copy h2 { margin: 0; color: var(--navy); font-size: clamp(78px, 7.2vw, 110px); line-height: .69; letter-spacing: -0.07em; font-weight: 700; }
.leader-copy h2 span { color: var(--orange); }
.leader-intro { max-width: 630px; margin: 28px 0 24px; color: #66666c; font-size: 18px; line-height: 1.05; }
.leader-points { display: grid; gap: 14px; list-style: none; padding: 0; margin: 0; }
.leader-points li { position: relative; padding-left: 37px; color: #3f3f43; font-size: 14px; line-height: 1.25; }
.leader-points li::before { content: "✓"; position: absolute; left: 0; top: -3px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #08080a; color: #fff; font-weight: 700; }

.team { min-height: 100svh; padding: 118px 0 90px; display: flex; align-items: center; }
.team-wrap { width: min(calc(100% - 40px), 1360px); }
.team-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 34px; }
.team-heading h2 { margin: 0; font-size: clamp(53px, 5vw, 76px); line-height: .9; letter-spacing: -0.06em; font-weight: 700; }
.team-heading h2 span { color: var(--orange); }
.team-controls { display: flex; gap: 8px; }
.round-control { width: 44px; height: 44px; border: 1px solid #aaa; border-radius: 50%; background: #fff; cursor: pointer; font-size: 20px; transition: .2s ease; }
.round-control:hover { background: #111; color: #fff; border-color: #111; }
.team-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(255px, 1fr); grid-template-columns: repeat(4, 1fr); gap: 34px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: none; }
.team-track::-webkit-scrollbar { display: none; }
.team-card { border: 1px solid #333; background: #fff; scroll-snap-align: start; }
.team-image { position: relative; height: 325px; overflow: hidden; display: grid; place-items: end center; }
.team-image.peach { background: #ff7150; }
.team-image.navy-panel { background: #555275; }
.team-image img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 5px 7px rgba(0,0,0,.12)); }
.role-tag { position: absolute; z-index: 3; left: 14px; top: 14px; padding: 7px 10px; background: rgba(255,255,255,.9); font-size: 12px; }
.team-card-copy { min-height: 210px; padding: 16px 14px 20px; }
.team-card-copy h3 { margin: 0 0 14px; font-size: 17px; font-weight: 500; }
.team-card-copy h3 small { font-size: 9px; font-weight: 400; color: #666; }
.team-card-copy p { margin: 0; color: #717176; font-size: 11px; line-height: 1.25; }

.ideas { padding: 128px 0 95px; }
.ideas-wrap { width: min(calc(100% - 28px), 1390px); }
.ideas-title { margin: 0; font-size: clamp(54px, 5.5vw, 82px); line-height: .9; letter-spacing: -0.055em; font-weight: 700; }
.ideas-title span { color: var(--orange); }
.ideas-intro { max-width: 760px; color: #77777c; font-size: 17px; line-height: 1.05; }
.featured-articles { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 40px; padding-top: 34px; border-top: 1px solid #8e8e91; }
.article-card { min-width: 0; }
.article-card.feature:first-child { padding-right: 16px; border-right: 1px solid #b1b1b4; }
.article-visual { position: relative; height: 170px; overflow: hidden; background: #e8e9e9; }
.feature .article-visual { height: 250px; }
.article-meta { margin: 6px 0; color: #8b8b8f; font-size: 12px; }
.article-card h3 { margin: 0; font-size: clamp(23px, 2.4vw, 36px); line-height: .88; letter-spacing: -0.045em; font-weight: 400; }
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #777; margin-top: 52px; }
.article-grid .article-card { padding: 30px 18px 28px 0; border-bottom: 1px solid #b1b1b4; }
.article-grid .article-card:not(:nth-child(3n+1)) { padding-left: 18px; border-left: 1px solid #c2c2c4; }
.article-grid .article-card h3 { font-size: clamp(22px, 2.1vw, 31px); }

/* Original, self-contained article artwork — avoids bundling the stock placeholder photos from the concept PDF. */
.art-leak { background: linear-gradient(160deg,#f2f4f5,#d9e3e8); }
.art-leak .pipe { position:absolute; left:45%; top:-18px; width:48px; height:150px; border-radius: 0 0 20px 20px; background:linear-gradient(90deg,#60656c,#dbe4e8 45%,#686d74); transform:rotate(8deg); }
.drop { position:absolute; width:18px; height:26px; border-radius: 55% 45% 60% 40%; background:#7597aa; transform:rotate(32deg); }
.d1{left:48%;top:118px}.d2{left:44%;top:152px;width:14px;height:21px}.d3{left:52%;top:160px;width:11px;height:17px}
.art-boxing { background: radial-gradient(circle at 50% 50%,#343434 0,#121212 64%); }
.glove { position:absolute; top:74px; width:120px; height:92px; border-radius:60px 60px 45px 45px; }
.glove::after { content:""; position:absolute; width:48px; height:57px; border-radius:50%; top:-30px; }
.glove.left{left:17%;background:#d93c33;transform:rotate(12deg)} .glove.left::after{right:7px;background:#ed5048}
.glove.right{right:17%;background:#315ea9;transform:rotate(-12deg)} .glove.right::after{left:7px;background:#4375c7}
.versus{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:700;font-size:34px}
.art-land { background: linear-gradient(160deg,#eee7db,#d8ccb4); }
.house-icon { position:absolute; left:30%; top:30px; font-size:110px; color:#b46a3b; text-shadow: 0 6px #8d4f2d; }
.coin-stack{position:absolute;right:24%;bottom:30px;width:92px;height:74px;border-radius:50%;background:repeating-linear-gradient(0deg,#b9902d 0 9px,#e3bd50 9px 13px);box-shadow:0 -12px 0 #d6aa3f,0 -24px 0 #c89c35}
.art-doc { background: linear-gradient(145deg,#2d3440,#11161d); }
.doc-sheet{position:absolute;left:33%;top:24px;width:130px;height:128px;background:#f4f3ef;transform:rotate(-5deg);box-shadow:12px 12px 0 rgba(255,255,255,.12)}
.doc-sheet::after{content:"";position:absolute;left:20px;top:28px;width:90px;height:50px;background:repeating-linear-gradient(#777 0 2px,transparent 2px 11px)}
.warning{position:absolute;right:25%;bottom:22px;width:55px;height:55px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-size:38px;font-weight:700}
.art-house { background:linear-gradient(#d8e4e8 0 57%,#bea47b 57% 100%); }
.pretty-house{position:absolute;inset:12px 0 auto;display:grid;place-items:center;color:#fff;font-size:125px;text-shadow:0 3px 0 #a06f4d,0 12px 20px rgba(0,0,0,.2)}
.crack{position:absolute;left:49%;top:100px;width:5px;height:95px;background:#372f2b;transform:rotate(16deg);clip-path:polygon(40% 0,100% 0,55% 40%,100% 42%,22% 100%,42% 55%,0 51%)}
.art-mask{background:linear-gradient(145deg,#e5eee6,#b9d0bc)}
.home-face{position:absolute;inset:16px 0 auto;display:grid;place-items:center;color:#3f7650;font-size:128px}.mask-line{position:absolute;left:25%;right:25%;top:95px;height:12px;border-radius:99px;background:#111;transform:rotate(-4deg)}
.art-market{background:linear-gradient(140deg,#f6f1e5,#e0d6c0)}
.market-arrow{position:absolute;font-size:92px;font-weight:700}.market-arrow.up{left:18%;top:28px;color:#67834a}.market-arrow.down{right:18%;bottom:16px;color:#b04a3f}.market-dot{position:absolute;left:50%;top:52%;width:52px;height:52px;border-radius:50%;background:var(--navy);transform:translate(-50%,-50%)}
.art-mistake{background:linear-gradient(145deg,#e8e9ec,#c7cad0)}
.magnify{position:absolute;left:28%;top:33px;width:82px;height:82px;border:10px solid #1c1c22;border-radius:50%}.magnify::after{content:"";position:absolute;width:72px;height:12px;background:#1c1c22;right:-56px;bottom:-31px;transform:rotate(47deg);border-radius:10px}.mistake-coin{position:absolute;right:20%;bottom:28px;width:74px;height:74px;border-radius:50%;background:#d3a736;color:#fff;display:grid;place-items:center;font-size:46px;font-weight:700;box-shadow:0 -12px 0 #b98c25,0 -24px 0 #d8ae45}

.faqs { min-height: 100svh; padding: 128px 0 90px; display: flex; align-items: center; }
.faq-wrap { display: grid; grid-template-columns: .7fr 1.3fr; gap: 80px; align-items: center; }
.faq-copy h2 { margin: 0; font-size: clamp(70px, 6.5vw, 98px); line-height: .68; letter-spacing: -0.065em; font-weight: 700; }
.faq-copy h2 span { color: var(--orange); }
.accordion { display: grid; gap: 18px; }
details { border-radius: 22px; background: linear-gradient(135deg,#e6ebee,#dbe2e6); overflow: clip; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 78px; padding: 0 24px; cursor: pointer; font-size: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content:"+"; font-size: 30px; font-weight: 400; transition: transform .2s ease; }
details[open] summary::after { transform: rotate(45deg); }
details p { margin: -2px 24px 22px; max-width: 720px; color: #68696d; line-height: 1.35; }

.contact { min-height: 100svh; padding: 128px 0 85px; display: flex; align-items: center; }
.contact-wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 75px; align-items: center; }
.contact-copy h2 { margin: 0; font-size: clamp(68px, 6.2vw, 96px); line-height: .75; letter-spacing: -0.065em; font-weight: 700; }
.contact-copy h2 span { color: var(--orange); }
.contact-copy h2 u { text-decoration-thickness: 3px; text-underline-offset: 7px; }
.contact-copy > p:not(.eyebrow) { max-width: 500px; margin: 30px 0 55px; color: #77777d; font-size: 16px; line-height: 1.15; }
.contact-copy address { display: grid; gap: 4px; font-style: normal; color: #808087; font-size: 17px; }
.contact-copy address a:hover { color: var(--orange); }
.contact-form { padding: 32px 32px 28px; border-radius: 34px; background: linear-gradient(135deg,#e1e7eb,#d4dce1); box-shadow: inset 0 1px 0 rgba(255,255,255,.85); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form label { display: grid; gap: 7px; margin-bottom: 18px; color: #6e6f73; font-size: 12px; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; border: 0; outline: none; border-radius: 10px; background: var(--navy-deep); color: #fff; padding: 14px 16px; box-shadow: inset 0 1px 5px rgba(0,0,0,.18); }
.contact-form input, .contact-form select { min-height: 52px; }
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form select { appearance: none; background-image: linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%); background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px,6px 6px;background-repeat:no-repeat; }
.contact-form option { color: #111; }
.button-submit { width: 100%; border: 0; background: linear-gradient(90deg,#050505,#222); color: #fff; cursor: pointer; }
.form-note { min-height: 18px; margin: 8px 0 0; font-size: 12px; color: #65666a; text-align: center; }

.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 32px max(28px, calc((100vw - 1160px)/2)); border-top: 1px solid #e5e5e5; color: #6f6f74; font-size: 13px; }
.site-footer img { width: 120px; }
.site-footer p { text-align: center; margin: 0; }
.site-footer a { justify-self: end; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  :root { --header-height: 70px; }
  .site-header { grid-template-columns: 180px 1fr auto; padding-inline: 24px; }
  .site-nav { gap: 14px; font-size: 13px; }
  .nav-cta { padding: 13px 16px; font-size: 13px; }
  .brand { width: 125px; }
  .brand img { width: 122px; }
  .principles-grid { grid-template-columns: repeat(2, 1fr); }
  .process-wrap { grid-template-columns: .75fr 1.25fr; gap: 45px; }
  .leader-grid { grid-template-columns: 1fr 1fr; }
  .leader-photo { height: 520px; }
  .team-track { grid-template-columns: none; grid-auto-columns: minmax(260px, 32vw); }
  .faq-wrap, .contact-wrap { gap: 45px; }
}

@media (max-width: 850px) {
  .desktop-break { display: none; }
  .site-header { width: calc(100% - 24px); top: 9px; height: 64px; grid-template-columns: 1fr auto; padding: 8px 13px 8px 20px; }
  .site-header.is-scrolled { width: calc(100% - 16px); height: 62px; top: 7px; }
  .brand, .brand img { width: 116px; }
  .nav-toggle { display: grid; width: 44px; height: 44px; place-items: center; gap: 5px; border: 0; border-radius: 14px; background: #111; cursor: pointer; }
  .nav-toggle span { display: block; width: 18px; height: 1.5px; background: #fff; transition: .2s ease; }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .nav-cta { display: none; }
  .site-nav { position: fixed; left: 12px; right: 12px; top: 76px; display: grid; gap: 0; padding: 10px; border-radius: 22px; background: rgba(250,250,250,.96); backdrop-filter: blur(18px); box-shadow: var(--shadow); transform-origin: top; transform: scaleY(.88) translateY(-10px); opacity: 0; pointer-events: none; transition: .2s ease; }
  .site-nav.open { opacity: 1; transform: scaleY(1) translateY(0); pointer-events: auto; }
  .site-nav a { padding: 14px 16px; border-radius: 12px; font-size: 16px; }
  .site-nav a:hover { background: #efefef; }
  .section-wrap { width: min(calc(100% - 30px), var(--wrap)); }
  .hero { padding-top: 105px; }
  .hero h1 { font-size: clamp(51px, 15vw, 82px); line-height: .86; }
  .hero p { font-size: 16px; line-height: 1.15; }
  .hero-actions { width: min(100%, 420px); margin-inline: auto; }
  .button { flex: 1; min-width: 170px; font-size: 17px; }
  .task, .clients, .people-lead, .team, .faqs, .contact { padding-top: 100px; min-height: auto; }
  .task-title { font-size: clamp(54px, 15vw, 88px); }
  .principles-grid { grid-template-columns: 1fr; gap: 16px; }
  .principle-card { min-height: 180px; }
  .clients-title { text-align: left; line-height: .94; }
  .client-row { grid-template-columns: 122px 1fr; }
  .client-label { font-size: 14px; padding: 18px 10px; }
  .logo-track { grid-template-columns: repeat(6, 145px); padding: 12px 18px; }
  .process-wrap { grid-template-columns: 1fr; }
  .process-copy { position: relative; top: auto; padding-top: 0; }
  .process-copy h2 { font-size: clamp(54px, 14vw, 80px); }
  .process-list { margin-top: 15px; }
  .process-card { grid-template-columns: 50px 1fr; padding: 24px 20px; }
  .step-badge { width: 48px; height: 48px; }
  .process-card h3 { font-size: 34px; }
  .leader-grid { grid-template-columns: 1fr; }
  .leader-visual { min-height: 460px; order: 2; }
  .leader-photo { height: 510px; }
  .leader-copy h2 { font-size: clamp(75px, 19vw, 110px); }
  .signature { left: 0; top: 85px; width: 160px; }
  .team-heading { align-items: center; }
  .team-track { grid-auto-columns: minmax(260px, 76vw); gap: 18px; }
  .featured-articles { grid-template-columns: 1fr; }
  .article-card.feature:first-child { padding-right: 0; padding-bottom: 28px; border-right: 0; border-bottom: 1px solid #b1b1b4; }
  .article-grid { grid-template-columns: 1fr 1fr; }
  .article-grid .article-card:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .article-grid .article-card:nth-child(even) { padding-left: 16px; border-left: 1px solid #c2c2c4; }
  .faq-wrap, .contact-wrap { grid-template-columns: 1fr; }
  .faq-copy h2 { font-size: clamp(68px, 18vw, 98px); }
  .contact-copy h2 { font-size: clamp(64px, 16vw, 95px); }
  .contact-copy > p:not(.eyebrow) { margin-bottom: 30px; }
  .site-footer { grid-template-columns: 1fr auto; }
  .site-footer p { display: none; }
}

@media (max-width: 560px) {
  .section-wrap { width: min(calc(100% - 22px), var(--wrap)); }
  .hero { min-height: 790px; padding-inline: 12px; }
  .hero h1 { font-size: clamp(50px, 16vw, 72px); }
  .hero p { margin-top: 28px; }
  .button { width: 100%; flex-basis: 100%; }
  .task-title { font-size: clamp(52px, 16vw, 74px); }
  .task-intro { font-size: 17px; }
  .principle-card { grid-template-columns: 1fr 48px; }
  .principle-content { padding: 25px 18px; }
  .clients-title { font-size: 45px; }
  .client-row { grid-template-columns: 100px 1fr; }
  .client-row + .client-row { margin-top: 30px; }
  .logo-track { grid-template-columns: repeat(6, 120px); gap: 12px; }
  .logo-track img { height: 58px; }
  .text-logo.boc strong { font-size: 34px; }
  .process { padding-top: 105px; }
  .process-copy h2 { font-size: 56px; }
  .process-card { grid-template-columns: 1fr; }
  .timeline-line { margin-left: 24px; }
  .pill-list { gap: 5px; }
  .leader-visual { min-height: 390px; }
  .leader-orange { left: 22px; right: 22px; }
  .leader-photo { width: 100%; height: 440px; }
  .signature { width: 120px; top: 105px; }
  .leader-copy h2 { font-size: 72px; }
  .leader-intro { font-size: 16px; }
  .team-heading h2 { font-size: 48px; }
  .team-controls { display: none; }
  .team-track { grid-auto-columns: 83vw; }
  .ideas-title { font-size: 51px; }
  .ideas-intro { font-size: 15px; }
  .feature .article-visual { height: 210px; }
  .article-grid { grid-template-columns: 1fr; }
  .article-grid .article-card, .article-grid .article-card:nth-child(even) { padding: 24px 0; border-left: 0; }
  .article-visual { height: 180px; }
  .faq-copy h2 { font-size: 68px; }
  summary { min-height: 66px; padding-inline: 18px; font-size: 14px; }
  details p { margin-inline: 18px; font-size: 14px; }
  .contact-copy h2 { font-size: 64px; }
  .contact-form { padding: 24px 18px 20px; border-radius: 26px; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .site-footer { padding-inline: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1; transform: none; }

  /* The blanket rule above would run the drift once, instantly, leaving the
     clouds parked off the left edge and the sky empty. Pausing them instead
     holds each one at its negative-delay offset, so the sky stays full and
     nothing moves. Must sit after that rule to win on order. */
  .cloud {
    animation-duration: var(--dur) !important;
    animation-iteration-count: infinite !important;
    animation-play-state: paused !important;
  }
  .cloud-art {
    animation-duration: var(--bob) !important;
    animation-iteration-count: infinite !important;
    animation-play-state: paused !important;
  }
}

/* ===== Visual refinement pass: glass nav, continuous client marquees,
   source-accurate people imagery, and gradient brand treatments ===== */
:root {
  --orange-start: #f45f2d;
  --orange-mid: #fb6f42;
  --orange-end: #ff916d;
  --navy-start: #242341;
  --navy-mid: #373653;
  --navy-end: #686889;
  --orange-gradient: linear-gradient(105deg, var(--orange-start) 0%, var(--orange-mid) 48%, var(--orange-end) 100%);
  --navy-gradient: linear-gradient(105deg, var(--navy-start) 0%, var(--navy-mid) 50%, var(--navy-end) 100%);
  --navy-gradient-deep: linear-gradient(135deg, #191832 0%, #29284f 52%, #4f4f73 100%);
  --orange: var(--orange-start);
  --navy: var(--navy-start);
  --navy-deep: #211f46;
}

/* More transparent, layered glass navigation. */
.site-header {
  overflow: hidden;
  isolation: isolate;
  border-color: rgba(255,255,255,.72);
  background: linear-gradient(108deg, rgba(255,255,255,.34), rgba(236,241,245,.15) 48%, rgba(255,255,255,.24));
  -webkit-backdrop-filter: blur(28px) saturate(155%);
  backdrop-filter: blur(28px) saturate(155%);
  box-shadow:
    0 14px 45px rgba(25,28,34,.10),
    0 2px 7px rgba(25,28,34,.06),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(255,255,255,.30);
}
.site-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% -20%, rgba(255,255,255,.78), rgba(255,255,255,0) 45%),
    linear-gradient(110deg, rgba(255,255,255,.20), rgba(255,255,255,0) 42%, rgba(255,255,255,.13));
}
.site-header.is-scrolled {
  background: linear-gradient(108deg, rgba(255,255,255,.41), rgba(235,240,244,.20) 52%, rgba(255,255,255,.30));
  box-shadow:
    0 16px 48px rgba(20,22,28,.13),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(255,255,255,.34);
}
.brand img { filter: none; }

/* Gradient text system. All brand-orange and brand-navy display text uses a gradient rather than a flat fill. */
.orange-word,
.hero h1 span,
.task-title span,
.process-copy h2 span,
.clients-title .orange-word,
.team-heading .orange-word,
.ideas-title span,
.faq-copy .orange-word,
.contact-copy .orange-word,
.orange-text {
  background-image: var(--orange-gradient);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

.navy-word,
.clients-title .navy-word,
.team-heading .navy-word,
.faq-copy .navy-word,
.contact-copy .navy-word {
  background-image: var(--navy-gradient);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

.hero h1,
.task-title,
.leader-copy h2 {
  background-image: var(--navy-gradient);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero h1 span,
.task-title span,
.leader-copy h2 span {
  background-image: var(--orange-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Replace every flat orange/navy brand block with the matching gradient. */
.card-number.orange,
.orange-bg,
.team-image.peach,
.warning {
  background: var(--orange-gradient);
}
.card-number.navy,
.navy-bg,
.team-image.navy-panel,
.market-dot {
  background: var(--navy-gradient);
}
.card-number.orange,
.card-number.navy { background-size: 180% 180%; }
.contact-form input,
.contact-form textarea {
  background: var(--navy-gradient-deep);
}
.contact-form select {
  background-color: #242347;
  background-image:
    linear-gradient(45deg,transparent 50%,#fff 50%),
    linear-gradient(135deg,#fff 50%,transparent 50%),
    var(--navy-gradient-deep);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px,0 0;
  background-size:6px 6px,6px 6px,100% 100%;
  background-repeat:no-repeat;
}

/* Client logos: transparent assets on one continuously moving line. */
.clients-wrap { overflow: hidden; }
.client-row { min-width: 0; }
.logo-marquee {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-block: 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
}
.logo-belt {
  display: flex;
  flex: none;
  width: max-content;
  will-change: transform;
  animation: client-marquee 30s linear infinite;
}
.corporate-row .logo-belt { animation-direction: reverse; animation-duration: 32s; }
.logo-marquee:hover .logo-belt,
.logo-marquee:focus-within .logo-belt { animation-play-state: paused; }
.logo-group {
  flex: none;
  display: flex;
  align-items: center;
  gap: clamp(34px, 4.2vw, 76px);
  padding-inline: clamp(28px, 3.4vw, 58px);
}
.logo-cell {
  flex: 0 0 clamp(142px, 12vw, 190px);
  width: clamp(142px, 12vw, 190px);
  height: 94px;
  display: grid;
  place-items: center;
}
.logo-cell img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 74px;
  object-fit: contain;
  filter: none;
}
@keyframes client-marquee {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-50%,0,0); }
}

/* Tharaka: use the approved concept graphic as one source-accurate visual instead of rebuilding its layers. */
.leader-visual {
  min-height: 0;
  place-items: center;
}
.leader-composite {
  width: min(100%, 610px);
  height: auto;
  object-fit: contain;
  filter: none;
}

/* Team portraits are now genuinely transparent and sit over the PDF-matched gradient panels. */
.team-image.peach {
  background: linear-gradient(100deg, #f46e45 0%, #f97d56 48%, #ff936e 100%);
}
.team-image.navy-panel {
  background: linear-gradient(100deg, #4b4b66 0%, #585978 52%, #6b6c8e 100%);
}
.team-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(-8px 8px 8px rgba(0,0,0,.20));
}
.role-tag {
  background: rgba(255,255,255,.90);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

@media (max-width: 850px) {
  .site-nav {
    border: 1px solid rgba(255,255,255,.72);
    background: linear-gradient(120deg, rgba(255,255,255,.58), rgba(238,242,246,.35));
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    backdrop-filter: blur(26px) saturate(150%);
  }
  .client-row { grid-template-columns: 116px 1fr; }
  .logo-cell { flex-basis: 138px; width: 138px; height: 78px; }
  .logo-cell img { max-height: 60px; }
  .logo-group { gap: 28px; padding-inline: 22px; }
  .leader-composite { width: min(100%, 600px); }
}

@media (max-width: 560px) {
  .client-row { grid-template-columns: 92px 1fr; }
  .logo-cell { flex-basis: 118px; width: 118px; height: 70px; }
  .logo-cell img { max-height: 54px; }
  .logo-group { gap: 22px; padding-inline: 18px; }
  .leader-visual { min-height: 0; }
  .leader-composite { width: 100%; }
}

/* ===== Blog cards on the home page =====
   The Ideas section now lists posts from the database. Cards became
   links, and a post may carry an uploaded cover image instead of the
   CSS artwork. */
.article-link { display: block; color: inherit; }
.article-link h3 { transition: color .2s ease; }
.article-link:hover h3 { color: var(--orange); }
.article-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 6px; }
.article-visual.has-cover { background: #e4e9ed; }
.article-visual.has-cover img { width: 100%; height: 100%; object-fit: cover; }
.ideas-more { margin: 42px 0 0; text-align: center; }
.ideas-more a {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1px solid #c2c2c5;
  color: #4a4a50;
  font-size: 16px;
  transition: color .2s ease, border-color .2s ease;
}
.ideas-more a:hover { color: var(--orange); border-color: var(--orange); }