:root {
  --paper:#f2f0e9; --ink:#101010; --acid:#FF6A00; --muted:#6e6b64;
  --line:rgba(16,16,16,.16); --pad:clamp(22px,4vw,68px); --max:1500px; --motif-ink:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20120%2072%27%3E%0A%20%20%3Cg%20fill%3D%27%23111111%27%3E%0A%20%20%20%20%3Crect%20x%3D%276%27%20y%3D%278%27%20width%3D%2712%27%20height%3D%2756%27/%3E%0A%20%20%20%20%3Cpolygon%20points%3D%2728%2C8%2086%2C8%2076%2C24%2028%2C24%27/%3E%0A%20%20%20%20%3Cpolygon%20points%3D%2728%2C28%20108%2C28%2096%2C44%2028%2C44%27/%3E%0A%20%20%20%20%3Cpolygon%20points%3D%2728%2C48%2074%2C48%2084%2C64%2028%2C64%27/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E"); --motif-acid:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20120%2072%27%3E%0A%20%20%3Cg%20fill%3D%27%23FF6A00%27%3E%0A%20%20%20%20%3Crect%20x%3D%276%27%20y%3D%278%27%20width%3D%2712%27%20height%3D%2756%27/%3E%0A%20%20%20%20%3Cpolygon%20points%3D%2728%2C8%2086%2C8%2076%2C24%2028%2C24%27/%3E%0A%20%20%20%20%3Cpolygon%20points%3D%2728%2C28%20108%2C28%2096%2C44%2028%2C44%27/%3E%0A%20%20%20%20%3Cpolygon%20points%3D%2728%2C48%2074%2C48%2084%2C64%2028%2C64%27/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%} a{color:inherit;text-decoration:none}
.wrap{width:min(var(--max),100%);margin:auto;padding-left:var(--pad);padding-right:var(--pad)}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.16em;font-weight:800}
header{position:sticky;top:0;z-index:20;background:rgba(242,240,233,.94);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.08)}
.nav{height:70px;display:grid;grid-template-columns:1fr auto auto;gap:28px;align-items:center}
.brand{font-weight:900} nav{display:flex;gap:28px;font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:800}
.li{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:800}

.hero{min-height:calc(100vh - 70px)}
.hero-grid{min-height:calc(100vh - 70px);display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,29vw);grid-template-rows:auto 1fr auto;column-gap:clamp(30px,6vw,100px);padding-top:45px;padding-bottom:34px}
.hero-meta{grid-column:1/-1;display:flex;justify-content:space-between}
h1{grid-column:1;align-self:center;margin:35px 0;font-size:clamp(64px,8.8vw,158px);line-height:.84;letter-spacing:-.078em;text-transform:uppercase;max-width:10ch}
.marker{position:relative;display:inline-block;z-index:0}
.marker:before{content:"";position:absolute;z-index:-1;left:-.03em;right:-.05em;top:53%;height:.27em;background:#fff;transform:rotate(-1deg)}
.hero-copy{grid-column:2;align-self:end;font-size:clamp(16px,1.25vw,20px);line-height:1.5;max-width:31ch}
.hero-bottom{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:20px;font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:800}

.employer-section{background:#111;color:white;padding:clamp(70px,9vw,130px) 0}
.section-head{display:grid;grid-template-columns:1fr 3fr;gap:40px;align-items:start;margin-bottom:clamp(45px,6vw,80px)}
.section-head h2{margin:0;font-size:clamp(48px,6vw,98px);line-height:.92;letter-spacing:-.06em;max-width:13ch}
.employer-section .section-head p{max-width:45ch;color:rgba(255,255,255,.64);font-size:17px;line-height:1.55;margin:22px 0 0}
.employer-grid{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid rgba(255,255,255,.18);border-top:1px solid rgba(255,255,255,.18)}
.employer-card{border-right:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);min-height:280px;display:flex;flex-direction:column}
.employer-logo{flex:1;background:#fff;display:flex;align-items:center;justify-content:center;padding:22px;overflow:hidden}
.employer-logo img{width:100%;height:170px;object-fit:contain;filter:grayscale(1);mix-blend-mode:multiply}
.wordmark{color:#111;font-weight:900;letter-spacing:-.07em;font-size:clamp(42px,5vw,78px)}
.wordmark.kanmon{text-transform:lowercase}
.wordmark.sellx{text-transform:lowercase}
.employer-meta{padding:18px 18px 20px;display:flex;justify-content:space-between;gap:18px;align-items:flex-start;min-height:78px}
.employer-meta strong{font-size:16px;letter-spacing:-.02em;line-height:1.15}
.employer-meta span{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.58);text-align:right;line-height:1.25;max-width:14ch}

.section{padding:clamp(85px,10vw,155px) 0}
.section .section-head h2{color:var(--ink)}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.work{padding:28px 28px 20px 0;border-right:1px solid var(--line);min-height:330px}
.work+.work{padding-left:28px} .work:last-child{border-right:0}
.work .num{font-family:Georgia,serif;font-style:italic;font-size:18px;display:block;margin-bottom:75px}
.work h3{font-size:clamp(28px,2.3vw,38px);letter-spacing:-.045em;line-height:1;margin:0 0 38px;max-width:9ch}
.work p{font-size:14px;line-height:1.7;color:var(--muted);max-width:31ch}

.clients{background:#e7e4dc;padding:clamp(85px,10vw,150px) 0}
.clients-intro{display:grid;grid-template-columns:1.3fr .7fr;gap:50px;align-items:end;margin-bottom:65px}
.clients h2{margin:12px 0 0;font-size:clamp(58px,7.5vw,125px);line-height:.85;letter-spacing:-.07em;text-transform:uppercase;max-width:9ch}
.clients-copy{font-size:18px;line-height:1.6;color:#4f4c47;max-width:39ch}
.logo-wall{display:grid;grid-template-columns:repeat(6,1fr);border-left:1px solid var(--ink);border-top:1px solid var(--ink)}
.client-logo{position:relative;aspect-ratio:1/1;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.client-logo img{width:100%;height:100%;object-fit:contain;filter:grayscale(1);transition:transform .25s ease,filter .25s ease}
.client-logo span{position:absolute;left:12px;bottom:10px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;opacity:0;transition:opacity .2s}
.client-logo:hover img{transform:scale(1.035);filter:grayscale(.25)} .client-logo:hover span{opacity:.62}

.pov{background:#111;color:white;padding:clamp(95px,12vw,180px) 0}
.pov .eyebrow{color:rgba(255,255,255,.55);margin-bottom:65px}
.pov h2{font-size:clamp(58px,9vw,160px);line-height:.79;letter-spacing:-.08em;text-transform:uppercase;margin:0}
.pov h2.acid{color:var(--acid);margin-left:clamp(0px,8vw,120px)}
.pov-copy{width:min(620px,58%);margin:70px 0 0 auto;color:rgba(255,255,255,.72);font-size:19px;line-height:1.65}

.outcomes{padding:clamp(85px,10vw,145px) 0}
.outcome-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ink)}
.outcome{padding:36px;min-height:230px;border-right:1px solid var(--ink);display:flex;flex-direction:column;justify-content:space-between}
.outcome:last-child{border-right:0}
.outcome strong{font-size:clamp(52px,6vw,94px);letter-spacing:-.07em;line-height:.85}
.outcome p{font-size:14px;line-height:1.55;color:var(--muted);max-width:28ch;margin:30px 0 0}
.outcome-label{font-size:10px;text-transform:uppercase;letter-spacing:.13em;font-weight:800}

.about{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(180px,.42fr);gap:clamp(40px,8vw,120px);align-items:end}
.portrait{width:min(100%,300px);justify-self:end;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1);opacity:.86}
.about h2{font-size:clamp(50px,5.8vw,90px);line-height:.91;letter-spacing:-.06em;margin:14px 0 30px}
.about p{font-size:18px;line-height:1.65;max-width:44ch}
.about .small{font-size:13px;color:var(--muted)}

.cta{background:var(--acid);color:#fff;padding:clamp(80px,10vw,150px) 0}
.cta-grid{display:grid;grid-template-columns:1.4fr .7fr;gap:60px;align-items:end}
.cta h2{font-size:clamp(70px,9vw,150px);line-height:.8;letter-spacing:-.075em;text-transform:uppercase;margin:0;max-width:7ch}
.cta p{font-size:18px;line-height:1.5} .cta a{display:inline-block;margin-top:20px;font-size:26px;font-weight:900;border-bottom:2px solid #fff}
footer{background:#111;color:white;padding:32px 0} .footer{display:flex;justify-content:space-between;font-size:10px;text-transform:uppercase;letter-spacing:.12em}

@media(max-width:950px){
  nav,.li{display:none}
  .nav{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr;grid-template-rows:auto auto auto auto}
  h1,.hero-copy{grid-column:1} .hero-copy{max-width:520px;margin:30px 0 60px}
  .employer-grid{grid-template-columns:repeat(2,1fr)}
  .section-head,.clients-intro{grid-template-columns:1fr}
  .work-grid{grid-template-columns:1fr} .work{border-right:0;border-bottom:1px solid var(--line);padding:30px 0 45px!important;min-height:0}
  .work .num{margin-bottom:40px}
  .logo-wall{grid-template-columns:repeat(3,1fr)}
  .pov-copy{width:100%}
  .outcome-grid{grid-template-columns:1fr} .outcome{border-right:0;border-bottom:1px solid var(--ink)} .outcome:last-child{border-bottom:0}
  .about,.cta-grid{grid-template-columns:1fr}.portrait{justify-self:start;width:min(52vw,220px);margin-top:18px}
}
@media(max-width:600px){
  .hero-meta span:last-child{display:none}
  h1{font-size:clamp(58px,18vw,88px)}
  .employer-grid{grid-template-columns:1fr 1fr} .employer-card{min-height:210px}
  .employer-logo img{height:120px} .employer-meta{display:block} .employer-meta span{display:block;text-align:left;margin-top:6px}
  .logo-wall{grid-template-columns:repeat(2,1fr)}
  .clients h2{font-size:clamp(54px,17vw,82px)}
  .pov h2{font-size:clamp(48px,16vw,78px)} .pov h2.acid{margin-left:0}
  .footer{display:block} .footer span:last-child{display:block;margin-top:10px}
}

/* ========================================
   SUBTLE TEXTURE + MOTION
   ======================================== */

.hero,
.employer-section,
.clients,
.pov,
.cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* softly moving grid on hero */
.hero::before {
  content:"";
  position:absolute;
  inset:-20%;
  z-index:-2;
  background-image:
    linear-gradient(rgba(16,16,16,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,16,16,.035) 1px, transparent 1px);
  background-size:54px 54px;
  transform:rotate(-2deg);
  animation:gridDrift 28s linear infinite;
}

/* subtle acid glow */
.hero::after {
  content:"";
  position:absolute;
  width:34vw;
  height:34vw;
  min-width:320px;
  min-height:320px;
  right:-10vw;
  top:12vh;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,106,0,.18), rgba(255,106,0,0) 68%);
  filter:blur(8px);
  z-index:-1;
  animation:floatGlow 13s ease-in-out infinite alternate;
}

.employer-section::before,
.pov::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 18% 24%, rgba(255,106,0,.08), transparent 30%),
    radial-gradient(circle at 80% 78%, rgba(255,255,255,.055), transparent 25%),
    #111;
}

.employer-section::after,
.pov::after {
  content:"";
  position:absolute;
  inset:-80px;
  z-index:-1;
  opacity:.12;
  background-image:
    repeating-linear-gradient(
      135deg,
      transparent 0 18px,
      rgba(255,255,255,.17) 18px 19px
    );
  animation:diagonalDrift 36s linear infinite;
}

.clients::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,106,0,.14), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,.45), transparent 45%),
    #e7e4dc;
}

.clients::after {
  content:"";
  position:absolute;
  width:48vw;
  height:48vw;
  right:-19vw;
  bottom:-23vw;
  z-index:-1;
  border:1px solid rgba(16,16,16,.12);
  border-radius:50%;
  box-shadow:
    0 0 0 60px rgba(16,16,16,.025),
    0 0 0 120px rgba(16,16,16,.018),
    0 0 0 180px rgba(16,16,16,.012);
  animation:slowOrbit 22s ease-in-out infinite alternate;
}

.cta::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.16;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(90deg, transparent 0%, black 35%, black 100%);
}

@keyframes gridDrift {
  from { transform:translate3d(0,0,0) rotate(-2deg); }
  to   { transform:translate3d(54px,54px,0) rotate(-2deg); }
}
@keyframes diagonalDrift {
  from { transform:translate3d(0,0,0); }
  to   { transform:translate3d(72px,0,0); }
}
@keyframes floatGlow {
  from { transform:translate3d(0,-12px,0) scale(.96); }
  to   { transform:translate3d(-24px,22px,0) scale(1.08); }
}
@keyframes slowOrbit {
  from { transform:translate3d(0,0,0) scale(.98); }
  to   { transform:translate3d(-30px,-18px,0) scale(1.04); }
}

/* respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after,
  .employer-section::after,
  .pov::after,
  .clients::after {
    animation:none !important;
  }
}


/* ========================================
   EMPLOYER LOGO REFINEMENTS
   ======================================== */

.sellx-logo {
  width: 82% !important;
  height: 120px !important;
  object-fit: contain !important;
  filter: grayscale(1) contrast(1.12) !important;
  mix-blend-mode: multiply;
}

.kanmon-lockup {
  display:flex;
  align-items:center;
  gap:14px;
  color:#111;
}
.kanmon-k {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:2px solid #111;
  font-weight:900;
  font-size:23px;
  letter-spacing:-.08em;
  transform:rotate(45deg);
}
.kanmon-k::first-letter { transform:rotate(-45deg); }
.kanmon-name {
  font-size:clamp(36px,4vw,66px);
  font-weight:800;
  letter-spacing:-.065em;
  text-transform:lowercase;
}

/* ========================================
   TRUSTED BY AGENCIES — MOVING MARQUEE
   ======================================== */

.agencies {
  background:var(--acid);
  border-top:1px solid #111;
  border-bottom:1px solid #111;
  overflow:hidden;
  position:relative;
  isolation:isolate;
}

.agencies-head {
  padding:20px var(--pad);
  border-bottom:1px solid #111;
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center;
}

.agencies-head .eyebrow {
  white-space:nowrap;
}

.agencies-head p {
  margin:0;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-weight:800;
  opacity:.58;
}

.marquee {
  overflow:hidden;
  width:100%;
  position:relative;
}

.marquee::before,
.marquee::after {
  content:"";
  position:absolute;
  z-index:3;
  top:0;
  bottom:0;
  width:9vw;
  pointer-events:none;
}

.marquee::before {
  left:0;
  background:linear-gradient(90deg,#fff,rgba(255,255,255,0));
}

.marquee::after {
  right:0;
  background:linear-gradient(270deg,#fff,rgba(255,255,255,0));
}

.marquee-track {
  display:flex;
  width:max-content;
  animation:agencyMarquee 28s linear infinite;
  will-change:transform;
}

.marquee:hover .marquee-track {
  animation-play-state:paused;
}

.agency-set {
  display:flex;
  flex:none;
}

.agency-logo {
  width:clamp(210px,20vw,330px);
  height:170px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:27px 36px;
  border-right:1px solid rgba(16,16,16,.45);
}

.agency-logo img {
  width:100%;
  height:100%;
  object-fit:contain;
  filter:grayscale(1) contrast(1.1);
  mix-blend-mode:multiply;
  transition:transform .25s ease;
}

.agency-logo:hover img {
  transform:scale(1.04);
}

@keyframes agencyMarquee {
  from { transform:translate3d(0,0,0); }
  to { transform:translate3d(-50%,0,0); }
}

@media (max-width:700px) {
  .agencies-head {
    display:block;
  }
  .agencies-head p {
    margin-top:7px;
  }
  .agency-logo {
    width:210px;
    height:135px;
    padding:22px 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation:none;
  }
  .marquee {
    overflow-x:auto;
  }
}


/* ========================================
   V2.4 REFINEMENTS
   ======================================== */

/* stronger hero */
.hero {
  background:
    radial-gradient(circle at 78% 26%, rgba(255,106,0,.26), rgba(255,106,0,0) 34%),
    radial-gradient(circle at 20% 75%, rgba(0,0,0,.09), rgba(0,0,0,0) 28%),
    linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(242,240,233,.98) 45%, rgba(230,227,219,1) 100%);
}

.hero::before {
  background-image:
    linear-gradient(rgba(16,16,16,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,16,16,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: rotate(-2deg);
  opacity: .9;
}

.hero::after {
  width: 52vw;
  height: 52vw;
  right: -12vw;
  top: 6vh;
  background:
    radial-gradient(circle, rgba(255,106,0,.20), rgba(255,106,0,.06) 24%, rgba(255,106,0,0) 66%);
  filter: blur(6px);
}

.hero-grid {
  position: relative;
}

.hero-grid::before {
  content:"";
  position:absolute;
  right: clamp(-20px, 2vw, 20px);
  top: 80px;
  width: clamp(180px, 24vw, 380px);
  height: clamp(180px, 24vw, 380px);
  border-top: 28px solid #111;
  border-right: 28px solid #111;
  transform: skewX(-32deg);
  opacity: .92;
  pointer-events: none;
}

.hero-grid::after {
  content:"";
  position:absolute;
  left: -6vw;
  bottom: 18vh;
  width: 18vw;
  min-width: 120px;
  height: 1px;
  background: rgba(16,16,16,.28);
  box-shadow: 0 18px 0 rgba(16,16,16,.10), 0 -18px 0 rgba(16,16,16,.10);
  transform: rotate(-32deg);
  opacity:.55;
  pointer-events:none;
}

h1 {
  max-width: 9.6ch;
}

.hero-copy {
  max-width: 33ch;
  position: relative;
  z-index: 2;
}

.hero-bottom {
  margin-top: clamp(48px, 10vh, 130px);
  padding-top: 28px;
  align-self: end;
}

/* Kanmon image in employer wall */
.kanmon-logo-image {
  width: 72% !important;
  height: 150px !important;
  object-fit: contain !important;
  filter: grayscale(1) contrast(1.08) !important;
  mix-blend-mode: multiply;
}

/* white marquee */
.agencies {
  background:#fff !important;
}
.agencies-head p {
  opacity: .48;
}
.marquee::before {
  background: linear-gradient(90deg,#fff,rgba(255,255,255,0)) !important;
}
.marquee::after {
  background: linear-gradient(270deg,#fff,rgba(255,255,255,0)) !important;
}

/* Add subtle textures in more sections */
.section,
.outcomes,
.about,
footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.section::before,
.outcomes::before,
.about::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 88% 18%, rgba(255,106,0,.07), transparent 19%),
    linear-gradient(135deg, rgba(255,255,255,.28), transparent 32%);
  pointer-events:none;
}

.outcomes::after {
  content:"";
  position:absolute;
  inset:auto -10vw -12vw auto;
  width:42vw;
  height:42vw;
  min-width:280px;
  min-height:280px;
  border:1px solid rgba(16,16,16,.08);
  border-radius:50%;
  box-shadow:
    0 0 0 44px rgba(16,16,16,.015),
    0 0 0 88px rgba(16,16,16,.012);
  z-index:-1;
  animation:slowOrbit 24s ease-in-out infinite alternate;
}

.about::after {
  content:"";
  position:absolute;
  left:-14vw;
  top:18%;
  width:28vw;
  min-width:180px;
  height:1px;
  background:rgba(16,16,16,.12);
  box-shadow:0 16px 0 rgba(16,16,16,.06), 0 -16px 0 rgba(16,16,16,.06);
  transform:rotate(-24deg);
  z-index:-1;
  opacity:.55;
}

footer::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 12% 50%, rgba(255,106,0,.10), transparent 18%),
    #111;
}

/* Ensure employer footer alignment on small screens too */
@media(max-width:600px){
  .employer-meta{
    min-height:84px;
  }
  .hero-grid::before{
    width: 150px;
    height: 150px;
    border-top-width:18px;
    border-right-width:18px;
    right: 0;
    top: 88px;
  }
  .hero-grid::after{
    display:none;
  }
}

/* maintain accessibility */
@media (prefers-reduced-motion: reduce) {
  .outcomes::after {
    animation:none !important;
  }
}


/* ========================================
   V2.5 — THINKING + SECTION SEPARATION
   ======================================== */

/* Give outcomes its own darker tonal container */
.outcomes {
  background:#dcd8ce;
  border-top:1px solid rgba(16,16,16,.35);
  border-bottom:1px solid rgba(16,16,16,.35);
}

.outcomes .section-head {
  margin-bottom: clamp(54px, 7vw, 90px);
}

/* A distinct editorial Thinking section */
.thinking-section {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#111;
  color:#fff;
  padding:clamp(90px,11vw,160px) 0;
}

.thinking-section::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 82% 26%, rgba(255,106,0,.13), transparent 26%),
    #111;
}

.thinking-section::after {
  content:"";
  position:absolute;
  inset:-15%;
  z-index:-1;
  opacity:.14;
  background-image:
    linear-gradient(120deg, transparent 0 47%, rgba(255,255,255,.22) 47% 47.35%, transparent 47.35% 100%);
  background-size:110px 110px;
  animation:thinkingTexture 34s linear infinite;
}

.thinking-top {
  display:grid;
  grid-template-columns:1fr 2.2fr;
  column-gap:clamp(35px,6vw,100px);
  row-gap:28px;
  margin-bottom:clamp(55px,8vw,100px);
}

.thinking-top .eyebrow {
  color:rgba(255,255,255,.55);
}

.thinking-top h2 {
  margin:0;
  font-size:clamp(58px,7.5vw,118px);
  line-height:.86;
  letter-spacing:-.07em;
  max-width:8ch;
}

.thinking-top p {
  grid-column:2;
  margin:0;
  max-width:38ch;
  color:rgba(255,255,255,.64);
  font-size:17px;
  line-height:1.6;
}

.thinking-list {
  border-top:1px solid rgba(255,255,255,.38);
}

.thinking-item {
  display:grid;
  grid-template-columns:70px 1fr 50px;
  align-items:center;
  gap:24px;
  min-height:120px;
  border-bottom:1px solid rgba(255,255,255,.28);
  transition:background .2s ease, color .2s ease, padding .2s ease;
}

.thinking-item:hover {
  background:var(--acid);
  color:#fff;
  padding-left:18px;
  padding-right:18px;
}

.thinking-num {
  font-family:Georgia,serif;
  font-style:italic;
  font-size:15px;
  opacity:.55;
}

.thinking-title {
  font-size:clamp(23px,3vw,42px);
  line-height:1.02;
  letter-spacing:-.04em;
  max-width:27ch;
}

.thinking-arrow {
  justify-self:end;
  font-size:26px;
}

/* About now intentionally returns to light paper after the dark Thinking section */
.section#about {
  background:var(--paper);
  padding-top:clamp(105px,12vw,175px);
  padding-bottom:clamp(105px,12vw,175px);
}

.section#about::before {
  background:
    radial-gradient(circle at 8% 76%, rgba(255,106,0,.10), transparent 18%),
    linear-gradient(135deg, rgba(255,255,255,.30), transparent 30%);
}

.about {
  grid-template-columns:minmax(0,1.5fr) minmax(140px,.32fr);
  align-items:end;
}

.portrait {
  width:min(100%,210px) !important;
  aspect-ratio:1/1 !important;
  border-radius:50%;
  opacity:.90;
  box-shadow:0 0 0 1px rgba(16,16,16,.15);
}

/* tiny neon accent near About without making the photo the focal point */
.about > div:first-child {
  position:relative;
}

.about > div:first-child::after {
  content:"";
  position:absolute;
  width:78px;
  height:8px;
  background:var(--acid);
  left:0;
  bottom:-28px;
  transform:rotate(-2deg);
}

@keyframes thinkingTexture {
  from { transform:translate3d(0,0,0); }
  to   { transform:translate3d(110px,0,0); }
}

@media(max-width:950px){
  .thinking-top {
    grid-template-columns:1fr;
  }
  .thinking-top p {
    grid-column:1;
  }
  .thinking-item {
    grid-template-columns:42px 1fr 32px;
    gap:14px;
    min-height:105px;
  }
  .about {
    grid-template-columns:1fr;
  }
  .portrait {
    justify-self:start !important;
    width:160px !important;
    margin-top:55px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .thinking-section::after {
    animation:none !important;
  }
}


/* ========================================
   V2.6 — SECTION 01 / 02 DIFFERENTIATION
   ======================================== */

/* 01 / The Work — brighter, cleaner editorial canvas */
.section#work {
  background:#fff;
  border-top:1px solid rgba(16,16,16,.12);
  border-bottom:1px solid rgba(16,16,16,.20);
}

.section#work::before {
  background:
    linear-gradient(90deg, rgba(16,16,16,.025) 1px, transparent 1px),
    linear-gradient(rgba(16,16,16,.025) 1px, transparent 1px),
    #fff;
  background-size:64px 64px;
  opacity:.72;
}

.section#work::after {
  content:"";
  position:absolute;
  right:-12vw;
  top:18%;
  width:34vw;
  min-width:260px;
  height:34vw;
  min-height:260px;
  border-radius:50%;
  border:1px solid rgba(16,16,16,.07);
  box-shadow:
    0 0 0 48px rgba(16,16,16,.012),
    0 0 0 96px rgba(16,16,16,.009);
  z-index:-1;
}

/* 02 / Clients — warmer and denser so it feels like a new chapter */
.clients {
  background:#ded9cf;
}

.clients::before {
  background:
    radial-gradient(circle at 10% 14%, rgba(255,106,0,.16), transparent 23%),
    linear-gradient(135deg, rgba(255,255,255,.25), transparent 42%),
    #ded9cf;
}

.clients .logo-wall {
  box-shadow:0 18px 50px rgba(16,16,16,.06);
}

@media(max-width:700px){
  .section#work::after{
    width:280px;
    height:280px;
    right:-150px;
    top:12%;
  }
}


/* ========================================
   V2.7 — BLUE ACCENT SYSTEM
   ======================================== */

.marker:before {
  background:var(--acid);
  opacity:.92;
}

.pov h2.acid {
  color:var(--acid);
}

.about > div:first-child::after {
  background:var(--acid);
}

.cta p {
  color:rgba(255,255,255,.82);
}

.cta a {
  color:#fff;
}

.clients::before {
  background:
    radial-gradient(circle at 10% 14%, rgba(255,106,0,.13), transparent 23%),
    linear-gradient(135deg, rgba(255,255,255,.25), transparent 42%),
    #ded9cf;
}

.hero {
  background:
    radial-gradient(circle at 78% 26%, rgba(255,106,0,.17), rgba(255,106,0,0) 34%),
    radial-gradient(circle at 20% 75%, rgba(0,0,0,.09), rgba(0,0,0,0) 28%),
    linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(242,240,233,.98) 45%, rgba(230,227,219,1) 100%);
}

.hero::after {
  background:
    radial-gradient(circle, rgba(255,106,0,.16), rgba(255,106,0,.05) 24%, rgba(255,106,0,0) 66%);
}

.employer-section::before,
.pov::before {
  background:
    radial-gradient(circle at 18% 24%, rgba(255,106,0,.10), transparent 30%),
    radial-gradient(circle at 80% 78%, rgba(255,255,255,.055), transparent 25%),
    #111;
}

.thinking-section::before {
  background:
    radial-gradient(circle at 82% 26%, rgba(255,106,0,.14), transparent 26%),
    #111;
}

.section#about::before {
  background:
    radial-gradient(circle at 8% 76%, rgba(255,106,0,.09), transparent 18%),
    linear-gradient(135deg, rgba(255,255,255,.30), transparent 30%);
}

footer::before {
  background:
    radial-gradient(circle at 12% 50%, rgba(255,106,0,.11), transparent 18%),
    #111;
}


/* ========================================
   V2.8 — ORANGE ACCENT + HEADER LOCKUP
   ======================================== */

.brand-lockup {
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1;
  gap:3px;
}

.brand-main {
  font-size:19px;
  font-weight:900;
  letter-spacing:-.055em;
  text-transform:uppercase;
}

.brand-sub {
  font-size:9px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.56;
}

.brand-lockup:hover .brand-main,
.brand-lockup:hover .brand-sub {
  opacity:.88;
}

@media(max-width:700px){
  .brand-main{
    font-size:17px;
  }
  .brand-sub{
    font-size:8px;
  }
}

/* orange fine tuning */
.marker:before {
  opacity:.88;
}

.cta p {
  color:rgba(255,255,255,.86);
}

.thinking-item:hover {
  color:#fff;
}

/* give the orange a touch more richness in some atmospheric areas */
.hero::after {
  background:
    radial-gradient(circle, rgba(255,106,0,.18), rgba(255,106,0,.06) 24%, rgba(255,106,0,0) 66%);
}

.clients::before {
  background:
    radial-gradient(circle at 10% 14%, rgba(255,106,0,.14), transparent 23%),
    linear-gradient(135deg, rgba(255,255,255,.25), transparent 42%),
    #ded9cf;
}

.thinking-section::before {
  background:
    radial-gradient(circle at 82% 26%, rgba(255,106,0,.15), transparent 26%),
    #111;
}

.section#about::before {
  background:
    radial-gradient(circle at 8% 76%, rgba(255,106,0,.10), transparent 18%),
    linear-gradient(135deg, rgba(255,255,255,.30), transparent 30%);
}

footer::before {
  background:
    radial-gradient(circle at 12% 50%, rgba(255,106,0,.11), transparent 18%),
    #111;
}


/* ========================================
   V2.9 — CUSTOM WORDMARK + REPEATED MOTIF
   ======================================== */

.brand-wordmark{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.brand-symbol{
  width:34px;
  height:34px;
  flex:none;
  background-image:var(--motif-ink);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}

.brand-type{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.brand-main{
  display:block;
  font-size:20px;
  font-weight:900;
  letter-spacing:-.065em;
  line-height:.92;
  transform:skewX(-10deg);
  text-transform:uppercase;
}

.brand-sub{
  display:block;
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.52;
  white-space:nowrap;
}

.brand-wordmark:hover .brand-symbol{
  transform:translateY(-1px);
}
.brand-wordmark:hover .brand-main,
.brand-wordmark:hover .brand-sub{
  opacity:.9;
}

/* Replace the generic hero graphic with the new brand symbol language */
.hero-grid::before{
  content:"";
  position:absolute;
  right:clamp(-10px,1vw,18px);
  top:64px;
  width:clamp(180px,24vw,360px);
  height:clamp(118px,15vw,238px);
  background-image:var(--motif-ink);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  opacity:.94;
  pointer-events:none;
}

/* Use the motif as subtle brand breadcrumbs throughout the page */
.section-head .eyebrow,
.clients .eyebrow,
.pov .eyebrow,
.thinking-top .eyebrow{
  position:relative;
  padding-left:30px;
}
.section-head .eyebrow::before,
.clients .eyebrow::before,
.pov .eyebrow::before,
.thinking-top .eyebrow::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:18px;
  height:18px;
  transform:translateY(-50%);
  background-image:var(--motif-acid);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  opacity:.95;
}

.hero::after{
  background:
    radial-gradient(circle, rgba(255,106,0,.18), rgba(255,106,0,.06) 24%, rgba(255,106,0,0) 66%),
    var(--motif-acid);
  background-repeat:no-repeat;
  background-size:auto, 220px auto;
  background-position:center, 82% 28%;
}

.clients::after{
  inset:auto 0 -16vw auto;
  width:34vw;
  height:22vw;
  min-width:220px;
  min-height:140px;
  border:none;
  border-radius:0;
  box-shadow:none;
  background-image:var(--motif-ink);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:right bottom;
  opacity:.06;
  animation:slowFloat 20s ease-in-out infinite alternate;
}

.thinking-section::after{
  inset:auto 4vw 3.5vw auto;
  width:220px;
  height:140px;
  background-image:var(--motif-acid);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:right bottom;
  opacity:.10;
  animation:slowFloat 22s ease-in-out infinite alternate;
}

.section#about::after{
  content:"";
  position:absolute;
  right:6vw;
  top:16%;
  width:150px;
  height:94px;
  background-image:var(--motif-ink);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  opacity:.07;
  transform:rotate(0deg);
  z-index:-1;
}

.cta::after{
  content:"";
  position:absolute;
  right:5vw;
  bottom:24px;
  width:180px;
  height:114px;
  background-image:var(--motif-acid);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  opacity:.12;
  z-index:0;
  pointer-events:none;
}

footer::after{
  content:"";
  position:absolute;
  right:var(--pad);
  top:50%;
  width:78px;
  height:48px;
  transform:translateY(-50%);
  background-image:var(--motif-acid);
  background-repeat:no-repeat;
  background-size:contain;
  opacity:.18;
}

@keyframes slowFloat{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-16px,-10px,0); }
}

@media(max-width:700px){
  .brand-symbol{
    width:28px;
    height:28px;
  }
  .brand-main{
    font-size:17px;
  }
  .brand-sub{
    display:none;
  }
  .hero-grid::before{
    width:152px;
    height:96px;
    top:88px;
    right:2px;
  }
  .section-head .eyebrow,
  .clients .eyebrow,
  .pov .eyebrow,
  .thinking-top .eyebrow{
    padding-left:26px;
  }
  .section-head .eyebrow::before,
  .clients .eyebrow::before,
  .pov .eyebrow::before,
  .thinking-top .eyebrow::before{
    width:15px;
    height:15px;
  }
  footer::after{
    display:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .clients::after,
  .thinking-section::after{
    animation:none !important;
  }
}


/* ========================================
   V3.0 — SIMPLIFIED BRAND SYSTEM
   ======================================== */

/* Clean editorial wordmark */
.brand-wordmark-simple {
  display:inline-flex;
  align-items:baseline;
  gap:3px;
  color:#111;
  font-weight:900;
  line-height:1;
  letter-spacing:-.065em;
}

.brand-wordmark-simple .word-tate,
.brand-wordmark-simple .word-gtm {
  font-size:21px;
}

.brand-wordmark-simple .word-slash {
  color:var(--acid);
  font-size:22px;
  font-weight:900;
  margin:0 1px;
  transform:translateY(1px);
}

.brand-wordmark-simple:hover .word-slash {
  transform:translateY(1px) scaleY(1.15);
}

/* Remove the previous custom symbol system everywhere */
.brand-symbol,
.brand-type,
.section-head .eyebrow::before,
.clients .eyebrow::before,
.pov .eyebrow::before,
.thinking-top .eyebrow::before,
.clients::after,
.thinking-section::after,
.section#about::after,
.cta::after,
footer::after {
  display:none !important;
}

.section-head .eyebrow,
.clients .eyebrow,
.pov .eyebrow,
.thinking-top .eyebrow {
  padding-left:0 !important;
}

/* ========================================
   TEXTURE LIVES ONLY IN HEADER / HERO
   ======================================== */

/* Header gets a very subtle printed-grid texture */
header {
  background:
    linear-gradient(rgba(242,240,233,.94), rgba(242,240,233,.94)),
    repeating-linear-gradient(
      90deg,
      rgba(16,16,16,.035) 0 1px,
      transparent 1px 22px
    );
}

/* Hero carries the stronger brand atmosphere */
.hero {
  background:
    radial-gradient(circle at 78% 26%, rgba(255,106,0,.17), rgba(255,106,0,0) 34%),
    radial-gradient(circle at 20% 75%, rgba(0,0,0,.07), rgba(0,0,0,0) 28%),
    linear-gradient(135deg, #f7f5ef 0%, #f2f0e9 48%, #e6e2d9 100%);
}

/* cleaner hero graphic: oversized slash echoing the wordmark */
.hero-grid::before {
  content:"/";
  position:absolute;
  right:clamp(0px,3vw,48px);
  top:clamp(70px,10vh,125px);
  width:auto;
  height:auto;
  background:none !important;
  color:rgba(16,16,16,.92);
  font-size:clamp(180px,25vw,390px);
  line-height:.72;
  font-weight:900;
  letter-spacing:-.08em;
  transform:skewX(-8deg);
  opacity:.94;
  pointer-events:none;
}

.hero-grid::after {
  content:"";
  display:block;
  position:absolute;
  right:clamp(40px,10vw,150px);
  top:clamp(170px,24vh,270px);
  width:clamp(80px,10vw,150px);
  height:12px;
  background:var(--acid);
  transform:rotate(-8deg);
  opacity:.9;
}

/* Remove texture from all non-hero areas */
.employer-section::after,
.pov::after,
.clients::before,
.section::before,
.outcomes::before,
.about::before,
.cta::before {
  animation:none !important;
}

/* Restore intentionally clean surfaces below hero */
.section#work {
  background:#fff;
}
.section#work::before,
.section#work::after {
  display:none !important;
}

.clients {
  background:#ded9cf;
}
.clients::before {
  display:none !important;
}

.outcomes {
  background:#dcd8ce;
}
.outcomes::before,
.outcomes::after {
  display:none !important;
}

.thinking-section {
  background:#111;
}
.thinking-section::before {
  background:#111 !important;
}
.thinking-section::after {
  display:none !important;
}

.section#about {
  background:var(--paper);
}
.section#about::before,
.section#about::after {
  display:none !important;
}

footer::before {
  background:#111 !important;
}

/* Keep the orange as restrained punctuation */
.marker:before {
  background:var(--acid);
  opacity:.88;
}

.pov h2.acid {
  color:var(--acid);
}

.about > div:first-child::after {
  background:var(--acid);
  width:58px;
  height:6px;
}

@media(max-width:700px){
  .brand-wordmark-simple .word-tate,
  .brand-wordmark-simple .word-gtm {
    font-size:18px;
  }

  .brand-wordmark-simple .word-slash {
    font-size:19px;
  }

  .hero-grid::before {
    font-size:145px;
    right:0;
    top:90px;
    opacity:.82;
  }

  .hero-grid::after {
    right:30px;
    top:165px;
    width:70px;
    height:8px;
  }
}


/* ========================================
   V3.2 — ORIGINAL PALETTE / ATMOSPHERIC TEXTURE
   ======================================== */

:root {
  --paper:#F2F0E9;
  --ink:#111111;
  --acid:#FF6A00;
  --muted:#6E6B64;
  --charcoal:#111111;
  --soft-black:#1A1A1A;
  --cream:#F2F0E9;
  --white:#FFFFFF;
}

/* Header: quiet, editorial */
header {
  background:rgba(242,240,233,.96) !important;
  border-bottom:1px solid rgba(17,17,17,.10);
  backdrop-filter:blur(14px);
}

.brand-wordmark-simple {
  color:var(--ink);
}

.brand-wordmark-simple .word-slash {
  color:var(--acid);
}

/* ========================================
   HERO — LARGE ATMOSPHERIC FIELD, NO LINES
   ======================================== */

.hero {
  min-height:auto;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(ellipse at 76% 86%, rgba(255,106,0,.36) 0%, rgba(255,106,0,.14) 24%, rgba(255,106,0,0) 56%),
    radial-gradient(ellipse at 25% 110%, rgba(242,240,233,.15) 0%, rgba(242,240,233,0) 48%),
    linear-gradient(155deg, #111111 0%, #161616 45%, #25211E 76%, #111111 100%) !important;
  color:var(--cream);
}

/* No grid, no vertical lines, no geometry crossing the headline. */
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODAiIGhlaWdodD0iMTgwIiB2aWV3Qm94PSIwIDAgMTgwIDE4MCI+CjxmaWx0ZXIgaWQ9Im4iPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIuODIiIG51bU9jdGF2ZXM9IjQiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48L2ZpbHRlcj4KPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI24pIiBvcGFjaXR5PSIuNDIiLz4KPC9zdmc+");
  background-repeat:repeat;
  background-size:180px 180px;
  opacity:.08;
  mix-blend-mode:soft-light;
  animation:grainShift 10s steps(8) infinite;
  transform:none !important;
}

/* Soft light field only — deliberately positioned away from headline. */
.hero::after {
  content:"";
  position:absolute;
  z-index:-2;
  width:54vw;
  height:54vw;
  min-width:520px;
  min-height:520px;
  right:-20vw;
  bottom:-34vw;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,106,0,.22), rgba(255,106,0,0) 67%);
  filter:blur(22px);
  animation:heroBloom 15s ease-in-out infinite alternate;
}

.hero-grid {
  min-height:calc(91vh - 70px);
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(260px,.58fr);
  grid-template-rows:auto 1fr auto;
  column-gap:clamp(42px,8vw,128px);
  padding-top:clamp(42px,6vw,76px);
  padding-bottom:clamp(38px,5vw,68px);
  position:relative;
  z-index:2;
}

/* Kill every prior hero ornament. */
.hero-grid::before,
.hero-grid::after {
  display:none !important;
}

.hero-meta {
  color:rgba(242,240,233,.54);
}

.hero h1 {
  color:var(--cream);
  max-width:9.1ch;
  margin:clamp(44px,8vh,90px) 0;
  position:relative;
  z-index:4;
}

/* Revenue and all other headline words stay completely clean. */
.hero h1::before,
.hero h1::after {
  display:none !important;
}

.marker {
  position:relative;
  display:inline-block;
}

.marker:before {
  content:"";
  position:absolute;
  z-index:-1;
  left:-.02em;
  right:-.02em;
  top:auto;
  bottom:.015em;
  height:.105em;
  background:var(--acid);
  transform:none;
  opacity:1;
}

.hero-copy {
  color:rgba(242,240,233,.76);
  align-self:center;
  max-width:31ch;
  padding-top:clamp(74px,11vh,126px);
}

.hero-copy::before {
  content:"";
  display:block;
  width:34px;
  height:4px;
  margin-bottom:22px;
  background:var(--acid);
}

.hero-bottom {
  color:rgba(242,240,233,.48);
  border-top:1px solid rgba(242,240,233,.18);
  margin-top:clamp(54px,10vh,116px);
  padding-top:25px;
}

/* ========================================
   TEXTURE SYSTEM — SOFT FIELDS, NOT PATTERNS
   ======================================== */

.employer-section {
  background:
    radial-gradient(ellipse at 92% 15%, rgba(255,106,0,.08), rgba(255,106,0,0) 34%),
    #111 !important;
}
.employer-section::before {
  display:block !important;
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODAiIGhlaWdodD0iMTgwIiB2aWV3Qm94PSIwIDAgMTgwIDE4MCI+CjxmaWx0ZXIgaWQ9Im4iPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIuODIiIG51bU9jdGF2ZXM9IjQiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48L2ZpbHRlcj4KPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI24pIiBvcGFjaXR5PSIuNDIiLz4KPC9zdmc+");
  background-size:180px 180px;
  opacity:.04;
  z-index:0;
  pointer-events:none;
}
.employer-section::after {
  display:none !important;
}
.employer-section > .wrap {
  position:relative;
  z-index:1;
}

/* The Work: cream/white with a very soft ambient shadow */
.section#work {
  background:
    radial-gradient(ellipse at 87% 18%, rgba(255,106,0,.055), rgba(255,106,0,0) 26%),
    #fff !important;
}
.section#work::before,
.section#work::after {
  display:none !important;
}

/* Clients: warm cream, slightly dimensional */
.clients {
  background:
    radial-gradient(ellipse at 10% 2%, rgba(255,255,255,.75), rgba(255,255,255,0) 34%),
    radial-gradient(ellipse at 92% 92%, rgba(255,106,0,.07), rgba(255,106,0,0) 28%),
    #E7E4DC !important;
}
.clients::before {
  display:block !important;
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODAiIGhlaWdodD0iMTgwIiB2aWV3Qm94PSIwIDAgMTgwIDE4MCI+CjxmaWx0ZXIgaWQ9Im4iPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIuODIiIG51bU9jdGF2ZXM9IjQiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48L2ZpbHRlcj4KPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI24pIiBvcGFjaXR5PSIuNDIiLz4KPC9zdmc+");
  background-size:180px 180px;
  opacity:.028;
  mix-blend-mode:multiply;
  z-index:-1;
}
.clients::after {
  display:none !important;
}

/* POV: near-black with an orange glow, rather than diagonal lines */
.pov {
  background:
    radial-gradient(ellipse at 78% 72%, rgba(255,106,0,.16), rgba(255,106,0,0) 38%),
    linear-gradient(145deg,#111 0%,#171717 62%,#211B17 100%) !important;
}
.pov::before {
  display:block !important;
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODAiIGhlaWdodD0iMTgwIiB2aWV3Qm94PSIwIDAgMTgwIDE4MCI+CjxmaWx0ZXIgaWQ9Im4iPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIuODIiIG51bU9jdGF2ZXM9IjQiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48L2ZpbHRlcj4KPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI24pIiBvcGFjaXR5PSIuNDIiLz4KPC9zdmc+");
  background-size:180px 180px;
  opacity:.05;
  z-index:-1;
}
.pov::after {
  display:none !important;
}

/* Outcomes: cream with depth only */
.outcomes {
  background:
    radial-gradient(ellipse at 75% 0%, rgba(255,255,255,.86), rgba(255,255,255,0) 32%),
    #F2F0E9 !important;
}
.outcomes::before,
.outcomes::after {
  display:none !important;
}

/* Thinking: dark, subtle light field */
.thinking-section {
  background:
    radial-gradient(ellipse at 90% 10%, rgba(255,106,0,.10), rgba(255,106,0,0) 30%),
    #111 !important;
}
.thinking-section::before {
  display:block !important;
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODAiIGhlaWdodD0iMTgwIiB2aWV3Qm94PSIwIDAgMTgwIDE4MCI+CjxmaWx0ZXIgaWQ9Im4iPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIuODIiIG51bU9jdGF2ZXM9IjQiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48L2ZpbHRlcj4KPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI24pIiBvcGFjaXR5PSIuNDIiLz4KPC9zdmc+");
  background-size:180px 180px;
  opacity:.04;
  z-index:-1;
}
.thinking-section::after {
  display:none !important;
}

/* About stays quiet */
.section#about {
  background:#fff !important;
}
.section#about::before,
.section#about::after {
  display:none !important;
}

/* CTA uses the original highlighter orange unapologetically */
.cta {
  background:var(--acid) !important;
  color:#fff;
}
.cta::before,
.cta::after {
  display:none !important;
}
.cta p {
  color:rgba(255,255,255,.84);
}
.cta a {
  color:#fff;
  border-bottom-color:#fff;
}

footer {
  background:#111 !important;
}
footer::before,
footer::after {
  display:none !important;
}

@keyframes grainShift {
  0%   { transform:translate(0,0); }
  20%  { transform:translate(-2%,1%); }
  40%  { transform:translate(1%,-2%); }
  60%  { transform:translate(2%,2%); }
  80%  { transform:translate(-1%,-1%); }
  100% { transform:translate(0,0); }
}

@keyframes heroBloom {
  from { transform:translate3d(0,0,0) scale(.98); opacity:.72; }
  to   { transform:translate3d(-26px,-12px,0) scale(1.06); opacity:1; }
}

@media(max-width:950px) {
  .hero-grid {
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto;
    min-height:auto;
  }
  .hero h1,
  .hero-copy {
    grid-column:1;
  }
  .hero-copy {
    padding-top:0;
    margin:0 0 38px;
    justify-self:start;
    max-width:560px;
  }
}

@media(max-width:600px) {
  .hero h1 {
    font-size:clamp(56px,17vw,82px);
  }
  .hero::after {
    min-width:340px;
    min-height:340px;
    right:-220px;
    bottom:-190px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after {
    animation:none !important;
  }
}


/* ========================================
   V3.3 — ORANGE AGENCY DIVIDER
   ======================================== */

.agencies{
  background:var(--acid) !important;
  border-top:1px solid rgba(17,17,17,.28) !important;
  border-bottom:1px solid rgba(17,17,17,.28) !important;
  position:relative;
  overflow:hidden;
}

.agencies::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 12% 18%, rgba(255,255,255,.18), rgba(255,255,255,0) 28%),
    radial-gradient(ellipse at 88% 80%, rgba(17,17,17,.08), rgba(17,17,17,0) 30%);
  pointer-events:none;
}

.agencies-head{
  background:transparent !important;
  border-bottom:1px solid rgba(17,17,17,.24) !important;
  position:relative;
  z-index:1;
}

.agencies-head .eyebrow{
  color:#111 !important;
}

.agencies-head p{
  color:rgba(17,17,17,.72) !important;
  opacity:1 !important;
}

.marquee{
  position:relative;
  z-index:1;
}

.marquee::before{
  background:linear-gradient(90deg,var(--acid),rgba(255,106,0,0)) !important;
}
.marquee::after{
  background:linear-gradient(270deg,var(--acid),rgba(255,106,0,0)) !important;
}

.agency-logo{
  border-right:1px solid rgba(17,17,17,.22) !important;
}

.agency-logo img{
  filter:grayscale(1) contrast(1.08) brightness(.92) !important;
  mix-blend-mode:multiply;
}


/* ========================================
   V3.4 — ORANGE HEADER / WHITE MARQUEE
   ======================================== */

.agencies-head{
  background:var(--acid) !important;
  border-bottom:1px solid rgba(17,17,17,.22) !important;
}

.marquee{
  background:#fff !important;
}

.marquee::before{
  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)) !important;
}

.marquee::after{
  background:linear-gradient(270deg,#fff,rgba(255,255,255,0)) !important;
}

.agency-logo{
  background:#fff !important;
  border-right:1px solid rgba(17,17,17,.16) !important;
}

.agency-logo img{
  filter:grayscale(1) contrast(1.08) !important;
  mix-blend-mode:multiply;
}


/* ========================================
   V3.5 — REMOVE MARQUEE BOTTOM SEAM
   ======================================== */

.agencies{
  border-bottom:0 !important;
}

.marquee{
  display:block;
  background:#fff !important;
  margin-bottom:-1px;
  padding-bottom:1px;
}

.marquee-track{
  background:#fff !important;
}

.agency-set{
  background:#fff !important;
}

.agency-logo{
  background:#fff !important;
}


/* ========================================
   V3.6 — FOOTER LINKS
   ======================================== */

footer a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .18s ease, opacity .18s ease;
}

footer a:hover{
  border-bottom-color:currentColor;
  opacity:.82;
}



/* ========================================
   PRODUCTION / INTERNAL PAGES
   ======================================== */
html { scroll-padding-top: 78px; }
body.internal-page { background:#f2f0e9; }
.internal-page header { position:sticky; }
.internal-hero {
  background:#111;
  color:#f2f0e9;
  padding:clamp(85px,11vw,155px) 0 clamp(70px,9vw,125px);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.internal-hero::before {
  content:""; position:absolute; width:46vw; height:46vw; min-width:420px; min-height:420px;
  right:-18vw; bottom:-31vw; border-radius:50%;
  background:radial-gradient(circle,rgba(255,106,0,.20),rgba(255,106,0,0) 68%); z-index:-1;
}
.internal-hero h1 { margin:14px 0 0; color:#f2f0e9; font-size:clamp(58px,8.4vw,132px); line-height:.88; letter-spacing:-.07em; max-width:10ch; }
.internal-hero .lede { max-width:52ch; margin:34px 0 0 auto; color:rgba(242,240,233,.72); font-size:clamp(17px,1.4vw,21px); line-height:1.6; }
.breadcrumb { color:rgba(242,240,233,.52); font-size:10px; text-transform:uppercase; letter-spacing:.14em; font-weight:800; }
.page-section { padding:clamp(75px,9vw,130px) 0; }
.page-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(230px,.55fr); gap:clamp(45px,8vw,120px); align-items:start; }
.page-grid h2 { font-size:clamp(42px,5vw,76px); margin:0 0 28px; line-height:.94; letter-spacing:-.055em; }
.page-grid p { font-size:17px; line-height:1.7; color:#555; }
.page-aside { border-top:1px solid rgba(17,17,17,.25); padding-top:20px; }
.page-aside p { font-size:13px; line-height:1.55; color:#6f6d66; }
.page-aside a { font-weight:800; border-bottom:1px solid #111; }
.page-portrait { width:min(100%,260px); aspect-ratio:1; object-fit:cover; border-radius:50%; filter:grayscale(.1); }
.simple-links { display:flex; flex-wrap:wrap; gap:14px 24px; margin-top:28px; }
.simple-links a { font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:12px; border-bottom:1px solid currentColor; }

/* Thinking index */
.article-index { background:#fff; }
.article-index-list { border-top:1px solid #111; }
.article-card { display:grid; grid-template-columns:100px 1fr 42px; gap:24px; padding:34px 0; border-bottom:1px solid rgba(17,17,17,.25); align-items:start; }
.article-card:hover .article-card-title { color:#ff6a00; }
.article-card-date { font-size:10px; text-transform:uppercase; letter-spacing:.13em; font-weight:800; color:#777; padding-top:7px; }
.article-card-title { display:block; font-size:clamp(28px,3.2vw,46px); line-height:1.02; letter-spacing:-.045em; font-weight:800; transition:color .2s ease; }
.article-card-excerpt { margin:12px 0 0; max-width:58ch; color:#666; line-height:1.55; }
.article-card-arrow { font-size:25px; justify-self:end; }

/* Article pages */
.article-shell { background:#fff; }
.article-header { padding:clamp(80px,10vw,145px) 0 55px; border-bottom:1px solid rgba(17,17,17,.16); }
.article-header h1 { margin:18px 0 25px; font-size:clamp(48px,6.7vw,102px); line-height:.91; letter-spacing:-.062em; text-transform:none; max-width:12ch; }
.article-meta { display:flex; flex-wrap:wrap; gap:12px 28px; font-size:10px; text-transform:uppercase; letter-spacing:.13em; font-weight:800; color:#777; }
.article-body { width:min(760px,calc(100% - 44px)); margin:0 auto; padding:clamp(58px,8vw,105px) 0 clamp(90px,11vw,150px); }
.article-body p, .article-body li { font-family:Georgia,'Times New Roman',serif; font-size:clamp(18px,1.5vw,21px); line-height:1.76; color:#292929; }
.article-body h2, .article-body h3 { font-family:Arial,Helvetica,sans-serif; color:#111; letter-spacing:-.04em; line-height:1.02; margin:58px 0 20px; }
.article-body h2 { font-size:clamp(34px,4vw,52px); }
.article-body h3 { font-size:clamp(27px,3.2vw,40px); }
.article-body blockquote { margin:0 0 42px; padding-left:24px; border-left:5px solid #ff6a00; font-size:clamp(27px,3.5vw,44px); line-height:1.05; letter-spacing:-.04em; font-weight:800; }
.article-body hr { border:0; border-top:1px solid rgba(17,17,17,.2); margin:55px 0; }
.article-body img { width:100%; height:auto; margin:35px 0 8px; }
.article-caption { font-family:Arial,Helvetica,sans-serif !important; font-size:11px !important; text-transform:uppercase; letter-spacing:.1em; color:#777 !important; margin-top:10px !important; }
.article-nav { border-top:1px solid rgba(17,17,17,.18); padding-top:26px; margin-top:70px; display:flex; justify-content:space-between; gap:30px; font-family:Arial,Helvetica,sans-serif; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; }

/* Contact */
.contact-panel { background:#ff6a00; color:#fff; padding:clamp(85px,11vw,160px) 0; }
.contact-panel h1 { color:#fff; margin:0 0 38px; font-size:clamp(65px,9vw,145px); line-height:.82; letter-spacing:-.075em; max-width:7ch; }
.contact-panel p { max-width:36ch; font-size:19px; line-height:1.55; color:rgba(255,255,255,.82); }
.contact-big-link { display:block; width:max-content; max-width:100%; margin-top:36px; color:#fff; font-size:clamp(24px,3vw,40px); font-weight:900; border-bottom:2px solid #fff; overflow-wrap:anywhere; }

/* 404 */
.not-found { min-height:calc(100vh - 70px); background:#111; color:#fff; display:grid; place-items:center; text-align:center; padding:50px 24px; }
.not-found h1 { color:#fff; font-size:clamp(90px,18vw,250px); margin:0; line-height:.75; }
.not-found p { color:rgba(255,255,255,.68); font-size:18px; }
.not-found a { display:inline-block; margin-top:18px; border-bottom:2px solid #ff6a00; font-weight:800; }

@media(max-width:800px) {
  .page-grid { grid-template-columns:1fr; }
  .article-card { grid-template-columns:70px 1fr 28px; gap:12px; }
  .article-card-excerpt { display:none; }
  .article-body { width:min(100% - 34px,760px); }
}