:root{
      --cream:#F7F4ED;
      --paper:#FFFDF8;
      --ink:#181815;
      --muted:#706D65;
      --soft:#E9E4D7;
      --line:#D8D1C3;
      --lime:#C8FF5A;
      --olive:#61763B;
      --orange:#FF6D3A;
      --lav:#C9C1FF;
      --blue:#B6D7FF;
      --shadow:0 28px 80px rgba(65,54,33,.12);
      --max:1280px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;background:var(--cream);color:var(--ink);
      font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      -webkit-font-smoothing:antialiased;overflow-x:hidden;
    }
    a{text-decoration:none;color:inherit}
    img{max-width:100%;display:block}
    .wrap{width:min(var(--max),calc(100% - 40px));margin:auto}
    .mono{font-family:"DM Mono",monospace}
    .eyebrow{font:500 11px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.14em;color:var(--olive)}
    .section{padding:118px 0;border-top:1px solid rgba(24,24,21,.08)}
    .section-title{
      margin:12px 0 0;font:800 clamp(42px,6vw,82px)/.91 Manrope,sans-serif;
      letter-spacing:-.06em;max-width:900px;
    }
    .section-intro{
      margin:20px 0 0;max-width:680px;color:var(--muted);font-size:18px;line-height:1.7;
    }

    /* NAV */
    .nav-shell{position:fixed;z-index:90;top:16px;left:0;right:0;pointer-events:none}
    nav{
      pointer-events:auto;width:min(1180px,calc(100% - 28px));margin:auto;
      display:flex;justify-content:space-between;align-items:center;gap:24px;
      padding:9px 10px 9px 16px;background:rgba(247,244,237,.80);
      border:1px solid rgba(24,24,21,.11);backdrop-filter:blur(18px);
      border-radius:999px;box-shadow:0 10px 40px rgba(60,48,24,.06)
    }
    .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.025em}
    .brand-mark{
      width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
      background:var(--ink);color:var(--cream);font:600 11px "DM Mono",monospace
    }
    .nav-links{display:flex;gap:24px;align-items:center}
    .nav-links>a:not(.nav-cta){font-size:12px;color:#57544d}
    .nav-cta{
      display:inline-flex;min-height:42px;padding:0 18px;align-items:center;
      border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:700
    }

    /* HERO */
    .hero{
      min-height:100vh;padding:145px 0 72px;position:relative;overflow:hidden;
    }
    .hero:before{
      content:"";position:absolute;width:420px;height:420px;right:-120px;top:80px;
      border-radius:50%;background:var(--lime);filter:blur(0);opacity:.42;
    }
    .hero:after{
      content:"";position:absolute;width:260px;height:260px;left:-70px;bottom:90px;
      border-radius:50%;background:var(--lav);opacity:.42;
    }
    .hero-grid{
      position:relative;z-index:2;display:grid;
      grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);
      gap:72px;align-items:end;
    }
    .availability{
      display:inline-flex;align-items:center;gap:9px;margin-bottom:25px;
      font:500 11px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.1em
    }
    .availability:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--olive);box-shadow:0 0 0 5px rgba(97,118,59,.12)}
    h1{
      margin:0;max-width:760px;
      font:800 clamp(54px,7vw,102px)/.86 Manrope,sans-serif;
      letter-spacing:-.075em;
    }
    h1 .script{
      font-family:"Playfair Display",serif;font-style:italic;font-weight:700;
      letter-spacing:-.045em;color:var(--olive);white-space:nowrap
    }
    .hero-sub{
      max-width:620px;margin:24px 0 0;color:#5f5b53;font-size:18px;line-height:1.68
    }
    .hero-sub strong{color:var(--ink);font-weight:700}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
    .btn{
      min-height:54px;padding:0 22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
      gap:10px;font-size:13px;font-weight:800;border:1px solid var(--ink);transition:.2s
    }
    .btn-dark{background:var(--ink);color:#fff}
    .btn-light{background:transparent;color:var(--ink)}
    .btn:hover{transform:translateY(-2px)}
    .signal-row{
      display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;padding-top:20px;border-top:1px solid rgba(24,24,21,.14)
    }
    .signal-row span{font-size:12px;color:#615d55}
    .signal-row b{color:var(--olive)}

    .portrait-zone{
      position:relative;min-height:760px;
      display:flex;align-items:flex-end;justify-content:center;
    }
    .portrait{
      position:absolute;inset:24px 0 0 0;
      overflow:visible;background:transparent;box-shadow:none;transform:none;
      display:flex;align-items:flex-end;justify-content:center;
    }
    .portrait img{
      width:auto;height:100%;max-width:100%;
      object-fit:contain;object-position:center bottom;
      filter:saturate(.98) contrast(1.02);background:transparent;
    }
    .portrait:after{display:none}
    .portrait-caption{display:none}
    .portrait-caption strong{display:block;font:700 24px Manrope,sans-serif}
    .portrait-caption span{font:500 11px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.1em;opacity:.72}
    .sticker{
      position:absolute;z-index:5;border:1px solid var(--ink);background:var(--paper);
      box-shadow:7px 7px 0 var(--ink);padding:16px 17px;min-width:160px
    }
    .sticker strong{display:block;font:800 34px Manrope,sans-serif;letter-spacing:-.05em}
    .sticker span{font-size:11px;color:#625f58}
    .s1{top:36px;left:8px;transform:rotate(-4deg)}
    .s2{right:-8px;top:290px;background:var(--lime);transform:rotate(4deg)}
    .scribble{
      position:absolute;left:6px;bottom:10px;z-index:6;
      font:700 22px "Playfair Display",serif;font-style:italic;transform:rotate(-6deg);
      max-width:260px;
    }

    /* MARQUEE */
    .marquee{
      overflow:hidden;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
      background:var(--ink);color:var(--cream);padding:13px 0
    }
    .track{
      width:max-content;display:flex;gap:32px;animation:scroll 24s linear infinite;
      font:500 12px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.12em
    }
    .track span:after{content:"✦";margin-left:32px;color:var(--lime)}
    @keyframes scroll{to{transform:translateX(-50%)}}

    /* PROOF */
    .proof-wrap{display:grid;grid-template-columns:.74fr 1.26fr;gap:60px;align-items:start}
    .proof-note{
      position:sticky;top:105px;padding:28px;border:1px solid var(--ink);background:var(--lime);
      box-shadow:10px 10px 0 var(--ink);transform:rotate(-1deg)
    }
    .proof-note .tiny{font:500 11px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.1em}
    .proof-note h3{font:800 38px/1 Manrope,sans-serif;letter-spacing:-.05em;margin:25px 0 14px}
    .proof-note p{margin:0;line-height:1.6;color:#3e442c;font-size:14px}
    .metrics{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink)}
    .metric{
      padding:32px 24px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);min-height:190px;
      display:flex;flex-direction:column;justify-content:space-between
    }
    .metric:nth-child(even){border-right:0}
    .metric .num{font:800 clamp(48px,6vw,88px)/.86 Manrope,sans-serif;letter-spacing:-.07em}
    .metric .lbl{font-size:12px;color:#5d5952;text-transform:uppercase;letter-spacing:.09em}
    .metric.alt{background:var(--paper)}
    .metric.orange{background:#FFD7C9}
    .metric.blue{background:#DCEBFF}
    .metric.lav{background:#E3DFFF}

    /* PROBLEM */
    .problem-header{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:end;margin-bottom:54px}
    .problem-stack{display:grid;gap:0;border-top:1px solid var(--ink)}
    .problem-row{
      display:grid;grid-template-columns:90px 1fr 1fr;gap:30px;padding:30px 0;border-bottom:1px solid var(--ink);align-items:center
    }
    .problem-num{font:500 11px "DM Mono",monospace;color:var(--olive)}
    .problem-row h3{margin:0;font:700 clamp(25px,3vw,40px)/1.04 Manrope,sans-serif;letter-spacing:-.04em}
    .problem-row p{margin:0;color:var(--muted);font-size:14px;line-height:1.62}
    .problem-row:hover h3{font-style:italic}

    /* CASE STUDIES */
    .cases{display:grid;gap:28px}
    .case{
      border:1px solid var(--ink);background:var(--paper);min-height:440px;position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr 1fr;transition:.25s
    }
    .case:hover{transform:translateY(-4px);box-shadow:12px 12px 0 var(--ink)}
    .case-copy{padding:42px;display:flex;flex-direction:column;justify-content:space-between}
    .case-kicker{font:500 11px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--olive)}
    .case h3{font:800 clamp(38px,4.4vw,66px)/.95 Manrope,sans-serif;letter-spacing:-.055em;margin:18px 0 18px}
    .case p{color:#645f56;line-height:1.65;margin:0;max-width:590px}
    .tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:24px}
    .tag{padding:7px 9px;border:1px solid rgba(24,24,21,.22);font:500 10px "DM Mono",monospace}
    .case-visual{position:relative;display:grid;place-items:center;overflow:hidden}
    .case-visual.green{background:var(--lime)}
    .case-visual.orange{background:#FFD4C4}
    .case-visual.lav{background:#DCD7FF}
    .giant{
      font:800 clamp(88px,12vw,178px)/.82 Manrope,sans-serif;letter-spacing:-.08em;
      transform:rotate(-5deg)
    }
    .visual-label{
      position:absolute;top:28px;right:28px;border:1px solid var(--ink);background:var(--paper);
      padding:9px 11px;font:500 10px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.08em
    }
    .arrow{
      position:absolute;right:28px;bottom:28px;width:56px;height:56px;border-radius:50%;border:1px solid var(--ink);
      display:grid;place-items:center;font-size:21px;background:var(--paper);transition:.2s
    }
    .case:hover .arrow{background:var(--ink);color:#fff;transform:rotate(-10deg)}

    /* OFFER */
    .offer-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:72px;align-items:start}
    .offer-copy h2{font:800 clamp(48px,6vw,82px)/.92 Manrope,sans-serif;letter-spacing:-.06em;margin:12px 0 22px}
    .offer-copy p{font-size:17px;line-height:1.7;color:var(--muted)}
    .services{border-top:1px solid var(--ink)}
    .service{
      display:grid;grid-template-columns:58px 1fr auto;gap:20px;align-items:start;
      padding:23px 0;border-bottom:1px solid var(--ink)
    }
    .service .i{font:500 10px "DM Mono",monospace;color:var(--olive)}
    .service h4{margin:0 0 7px;font:700 21px Manrope,sans-serif;letter-spacing:-.025em}
    .service p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
    .service .plus{font-size:22px}
    .fit{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:50px}
    .fit-card{padding:30px;border:1px solid var(--ink);min-height:300px}
    .fit-card.good{background:var(--lime)}
    .fit-card.bad{background:var(--paper)}
    .fit-card h3{font:700 22px Manrope,sans-serif;margin:0 0 20px}
    .fit-card ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
    .fit-card li{font-size:13px;line-height:1.55;padding-left:22px;position:relative}
    .fit-card.good li:before{content:"✓";position:absolute;left:0;font-weight:800}
    .fit-card.bad li:before{content:"×";position:absolute;left:0;font-weight:800}

    /* PROCESS */
    .process-ribbon{margin-top:50px;border-top:1px solid var(--ink)}
    .step{
      display:grid;grid-template-columns:90px .8fr 1.2fr;gap:30px;padding:29px 0;border-bottom:1px solid var(--ink);align-items:start
    }
    .step .n{font:500 11px "DM Mono",monospace;color:var(--olive)}
    .step h3{margin:0;font:700 28px Manrope,sans-serif;letter-spacing:-.035em}
    .step p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}

    /* TESTIMONIALS */
    .quotes{display:grid;grid-template-columns:1.16fr .84fr;gap:22px}
    .quote{
      border:1px solid var(--ink);padding:36px;background:var(--paper);display:flex;flex-direction:column;justify-content:space-between
    }
    .quote.featured{min-height:460px;background:#DDE6CF}
    .quote.small{min-height:218px}
    .quote-mark{font:700 60px/1 "Playfair Display",serif}
    .quote blockquote{margin:25px 0 36px;font:600 27px/1.42 Manrope,sans-serif;letter-spacing:-.03em}
    .quote.small blockquote{font-size:18px}
    .by{font-size:12px;color:#666158}.by b{display:block;color:var(--ink);margin-bottom:4px}

    /* CTA */
    .cta{padding:110px 0 60px}
    .cta-card{
      position:relative;overflow:hidden;border:1px solid var(--ink);background:var(--orange);
      padding:70px;min-height:520px;display:flex;flex-direction:column;justify-content:space-between
    }
    .cta-card:before{
      content:"";position:absolute;width:320px;height:320px;border:1px solid var(--ink);border-radius:50%;
      right:-80px;top:-110px;background:var(--lime)
    }
    .cta-card:after{
      content:"";position:absolute;width:210px;height:210px;border:1px solid var(--ink);border-radius:50%;
      right:125px;top:70px;background:var(--lav)
    }
    .cta-card h2{
      position:relative;z-index:2;font:800 clamp(56px,8vw,118px)/.84 Manrope,sans-serif;
      letter-spacing:-.075em;margin:0;max-width:1000px
    }
    .cta-bottom{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:end;gap:40px}
    .cta-bottom p{margin:0;max-width:610px;line-height:1.65;font-size:16px}
    .cta-button{
      min-height:58px;padding:0 24px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;font-weight:800;
      display:inline-flex;align-items:center;white-space:nowrap
    }

    footer{padding:24px 0 36px;font-size:12px;color:#706c64}
    .footer-in{display:flex;justify-content:space-between;gap:20px}
    .footer-links{display:flex;gap:16px}

    /* REVEAL */
    .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
    .reveal.show{opacity:1;transform:none}

    @media(max-width:980px){
      .hero-grid,.proof-wrap,.problem-header,.offer-grid,.quotes{grid-template-columns:1fr}
      .hero-grid{gap:26px}
      .portrait-zone{min-height:560px;max-width:470px;margin:8px auto 0}
      .portrait{inset:0}
      .s1{top:18px;left:-4px}
      .s2{right:-4px;top:160px}
      .scribble{left:0;bottom:4px;max-width:220px}
      .proof-note{position:relative;top:auto}
      .problem-row{grid-template-columns:60px 1fr}.problem-row p{grid-column:2}
      .case{grid-template-columns:1fr}.case-visual{min-height:300px}
      .quotes>div:last-child{display:grid;grid-template-columns:1fr 1fr;gap:22px}
      .nav-links>a:not(.nav-cta){display:none}
    }
    @media(max-width:700px){
      .wrap{width:min(var(--max),calc(100% - 24px))}
      .section{padding:84px 0}.hero{padding-top:125px}
      h1{font-size:56px;max-width:100%}.hero-sub{font-size:17px}
      .portrait-zone{min-height:430px;max-width:340px;margin:10px auto 0}.portrait{inset:0}
      .s1{left:-8px;top:14px}.s2{right:-8px;top:118px}.sticker{min-width:138px;padding:12px}.sticker strong{font-size:26px}
      .scribble{left:-2px;bottom:6px;max-width:180px;font-size:18px}
      .metrics{grid-template-columns:1fr}.metric{border-right:0}
      .problem-row{grid-template-columns:45px 1fr;gap:14px}
      .case-copy{padding:28px}.fit{grid-template-columns:1fr}
      .step{grid-template-columns:42px 1fr;gap:15px}.step p{grid-column:2}
      .quotes>div:last-child{grid-template-columns:1fr}
      .cta-card{padding:38px 25px;min-height:590px}.cta-bottom{flex-direction:column;align-items:stretch}
      .cta-button{justify-content:center}
      .footer-in{flex-direction:column}
      .brand span:last-child{display:none}
    }
  
/* ===== FINAL HERO ART DIRECTION ===== */
.hero{
  min-height:auto;
  padding:138px 0 64px;
  position:relative;
  overflow:hidden;
}
.hero:before,
.hero:after{display:none!important}

.hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,.93fr) minmax(460px,1.07fr);
  gap:56px;
  align-items:center;
  min-height:690px;
}

.hero-grid > div:first-child{
  position:relative;
  z-index:4;
  padding:30px 0 22px;
}

.availability{
  margin-bottom:26px;
  color:#34342f;
}

h1{
  max-width:720px;
  font-size:clamp(58px,6.3vw,96px);
  line-height:.9;
  letter-spacing:-.074em;
}
h1 .script{
  display:inline-block;
  margin-top:4px;
  color:var(--olive);
  font-size:.94em;
}

.hero-sub{
  max-width:600px;
  margin-top:26px;
  font-size:17px;
  line-height:1.7;
}

.hero-actions{margin-top:29px}
.signal-row{
  max-width:620px;
  margin-top:28px;
  padding-top:18px;
  gap:18px;
}

/* right-side editorial portrait stage */
.portrait-zone{
  position:relative;
  min-height:650px;
  width:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  isolation:isolate;
}

.portrait-zone:before{
  content:"";
  position:absolute;
  width:82%;
  height:82%;
  right:0;
  bottom:1px;
  border-radius:46% 46% 28px 28px;
  background:#E4F4B4;
  z-index:-3;
}

.portrait-zone:after{
  content:"GROWTH / PERFORMANCE";
  position:absolute;
  right:-22px;
  top:114px;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font:500 10px "DM Mono",monospace;
  letter-spacing:.18em;
  color:#5d6750;
  z-index:-1;
}

.portrait{
  position:absolute;
  inset:22px 34px 0 16px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:visible;
}

.portrait img{
  height:100%;
  width:auto;
  max-width:100%;
  object-fit:contain;
  object-position:center bottom;
  filter:saturate(.98) contrast(1.015);
}

.portrait-caption{display:none!important}

/* cleaner metric cards */
.sticker{
  min-width:154px;
  padding:14px 16px 13px;
  border:1px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  z-index:8;
}
.sticker strong{
  font-size:29px;
}
.sticker span{
  display:block;
  margin-top:3px;
  line-height:1.25;
}
.s1{
  top:48px;
  left:0;
  transform:rotate(-3deg);
  background:var(--paper);
}
.s2{
  right:-4px;
  top:250px;
  transform:rotate(3deg);
  background:var(--lime);
}

.scribble{
  left:0;
  bottom:12px;
  max-width:220px;
  font-size:18px;
  line-height:1.05;
  color:var(--ink);
}

/* subtle structure under the hero instead of decorative circles */
.hero:after{
  display:block!important;
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:rgba(24,24,21,.18);
}

.case-brand-row{
  display:flex;
  gap:10px;
  align-items:center;
  margin:0 0 18px;
}
.case-brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 10px;
  border:1px solid rgba(24,24,21,.18);
  background:rgba(255,255,255,.46);
}
.case-brand img{
  width:26px;
  height:26px;
  object-fit:contain;
}
.case-brand span{
  font:600 10px "DM Mono",monospace;
  letter-spacing:.06em;
  text-transform:uppercase;
}

@media(max-width:980px){
  .hero-grid{
    grid-template-columns:1fr;
    min-height:auto;
    gap:12px;
  }
  .hero-grid > div:first-child{padding-top:20px}
  .portrait-zone{
    min-height:560px;
    max-width:520px;
    margin:0 auto;
  }
  .portrait{inset:10px 28px 0}
  .s1{left:-10px}
  .s2{right:-10px;top:205px}
}

@media(max-width:700px){
  .hero{padding-top:122px}
  h1{font-size:54px}
  .hero-sub{font-size:16px}
  .portrait-zone{
    min-height:430px;
    max-width:350px;
  }
  .portrait{inset:6px 16px 0}
  .portrait-zone:before{width:88%;height:84%}
  .sticker{min-width:124px;padding:10px 11px}
  .sticker strong{font-size:23px}
  .sticker span{font-size:9px}
  .s1{top:26px;left:-8px}
  .s2{top:145px;right:-12px}
  .scribble{font-size:15px;max-width:160px}
  .portrait-zone:after{display:none}
}


/* =========================================================
   V7 — REFERENCE-INSPIRED HERO / CREAM EDITORIAL DIRECTION
   ========================================================= */
.hero-showcase{
  min-height:960px;
  padding:126px 0 34px;
  overflow:hidden;
  position:relative;
  background:#F7F4ED;
}
.hero-showcase:before,
.hero-showcase:after{display:none!important}

.showcase-inner{
  position:relative;
  min-height:800px;
}

.showcase-heading{
  position:relative;
  z-index:15;
  width:min(950px,90%);
  margin:0 auto;
  text-align:center;
}

.showcase-eyebrow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:15px;
  font:500 10px "DM Mono",monospace;
  letter-spacing:.15em;
  color:#4f5844;
}
.showcase-eyebrow span{
  width:7px;height:7px;border-radius:50%;
  background:#61763B;
  box-shadow:0 0 0 5px rgba(97,118,59,.12);
}

.showcase-name{
  max-width:none;
  margin:0;
  font:800 clamp(42px,5vw,74px)/.94 Manrope,sans-serif;
  letter-spacing:-.055em;
}
.showcase-name em{
  font-family:"Playfair Display",serif;
  font-style:italic;
  font-weight:700;
  color:#61763B;
  letter-spacing:-.045em;
}

.showcase-role{
  margin-top:10px;
  font:650 clamp(24px,3vw,42px)/1.05 Manrope,sans-serif;
  letter-spacing:-.04em;
}

.showcase-positioning{
  max-width:760px;
  margin:15px auto 0;
  color:#666158;
  font-size:15px;
  line-height:1.65;
}

.showcase-stage{
  position:relative;
  min-height:650px;
  margin-top:-2px;
  isolation:isolate;
}

.showcase-word{
  position:absolute;
  z-index:-4;
  left:50%;
  top:38px;
  transform:translateX(-50%);
  white-space:nowrap;
  font:800 clamp(155px,20vw,310px)/.77 Manrope,sans-serif;
  letter-spacing:-.09em;
  color:rgba(24,24,21,.075);
  user-select:none;
}

.showcase-sun{
  position:absolute;
  z-index:-3;
  left:50%;
  bottom:76px;
  transform:translateX(-50%);
  width:520px;
  height:520px;
  border-radius:50%;
  background:#C8FF5A;
  border:1px solid rgba(24,24,21,.16);
  box-shadow:0 0 100px rgba(200,255,90,.22);
}

.showcase-orbit{
  position:absolute;
  z-index:-5;
  border:1px solid rgba(24,24,21,.09);
  border-radius:50%;
}
.orbit-a{
  width:640px;height:640px;left:50%;bottom:14px;transform:translateX(-50%);
}
.orbit-b{
  width:760px;height:480px;left:50%;bottom:58px;transform:translateX(-50%) rotate(-7deg);
}

.showcase-person{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  height:590px;
  width:470px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.showcase-person img{
  display:block;
  height:100%;
  width:auto;
  max-width:100%;
  object-fit:contain;
  object-position:center bottom;
  filter:saturate(.98) contrast(1.015);
}

.skill-pill{
  position:absolute;
  z-index:9;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:0 15px;
  border:1px solid #181815;
  border-radius:999px;
  background:#FFFDF8;
  box-shadow:4px 4px 0 #181815;
  font:700 12px/1 Inter,sans-serif;
  white-space:nowrap;
}
.skill-icon{
  display:grid;
  place-items:center;
  width:23px;height:23px;
  border-radius:50%;
  background:#C8FF5A;
  font-weight:800;
}
.skill-1{left:24%;top:270px;transform:rotate(-4deg)}
.skill-2{right:21%;top:247px;transform:rotate(3deg)}
.skill-3{left:20%;top:390px;transform:rotate(2deg)}
.skill-4{right:17%;top:384px;transform:rotate(-3deg)}
.skill-5{right:25%;top:506px;transform:rotate(2deg)}

.showcase-proof{
  position:absolute;
  z-index:7;
  color:#36342f;
}
.proof-left{
  left:0;
  bottom:118px;
  width:240px;
  padding:18px 18px 17px;
  border-left:2px solid #61763B;
}
.proof-left .quote-mark{
  font:700 34px/1 "Playfair Display",serif;
  color:#61763B;
}
.proof-left p{
  margin:6px 0 10px;
  font-size:13px;
  line-height:1.55;
}
.proof-left span{
  font:500 9px "DM Mono",monospace;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#777168;
}

.proof-right{
  right:0;
  bottom:126px;
  width:235px;
  text-align:left;
}
.proof-right > strong{
  display:block;
  font:800 36px/.95 Manrope,sans-serif;
  letter-spacing:-.055em;
}
.proof-right > span{
  display:block;
  margin-top:8px;
  color:#6b665e;
  font-size:11px;
  line-height:1.45;
}
.proof-divider{
  height:1px;
  background:rgba(24,24,21,.2);
  margin:14px 0 12px;
}
.proof-mini{
  margin-top:7px;
  font-size:11px;
  color:#666158;
}
.proof-mini b{
  color:#181815;
  font-size:13px;
}

.showcase-bottom{
  position:absolute;
  z-index:12;
  left:285px;
  right:280px;
  bottom:5px;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  padding-top:17px;
  border-top:1px solid rgba(24,24,21,.17);
}
.showcase-promise{
  max-width:330px;
}
.showcase-promise .mono{
  display:block;
  margin-bottom:6px;
  color:#61763B;
  font-size:9px;
  letter-spacing:.1em;
}
.showcase-promise strong{
  display:block;
  font:700 16px/1.25 Manrope,sans-serif;
  letter-spacing:-.025em;
}
.showcase-actions{
  display:flex;
  gap:9px;
}
.showcase-actions .btn{
  min-height:46px;
  padding:0 17px;
  font-size:11px;
}

/* Give the following ticker breathing room after this full-screen hero */
.hero-showcase + .marquee{margin-top:0}

@media(max-width:1100px){
  .hero-showcase{min-height:970px}
  .showcase-stage{min-height:670px}
  .showcase-person{height:570px}
  .skill-1{left:12%}.skill-2{right:11%}
  .skill-3{left:9%}.skill-4{right:7%}
  .skill-5{right:17%}
  .proof-left,.proof-right{bottom:118px;width:205px}
  .showcase-bottom{left:225px;right:225px}
}

@media(max-width:860px){
  .hero-showcase{
    min-height:auto;
    padding-top:120px;
    padding-bottom:45px;
  }
  .showcase-inner{min-height:auto}
  .showcase-heading{width:100%}
  .showcase-positioning{max-width:620px}
  .showcase-stage{
    min-height:720px;
    margin-top:6px;
  }
  .showcase-word{
    top:64px;
    font-size:clamp(115px,23vw,180px);
  }
  .showcase-sun{
    width:430px;height:430px;bottom:145px;
  }
  .orbit-a{width:500px;height:500px;bottom:115px}
  .orbit-b{width:580px;height:390px;bottom:150px}
  .showcase-person{
    height:505px;
    width:400px;
    bottom:108px;
  }
  .skill-pill{font-size:10px;min-height:35px;padding:0 11px;box-shadow:3px 3px 0 #181815}
  .skill-icon{width:20px;height:20px}
  .skill-1{left:6%;top:230px}
  .skill-2{right:4%;top:228px}
  .skill-3{left:4%;top:352px}
  .skill-4{right:2%;top:354px}
  .skill-5{right:9%;top:470px}
  .proof-left{
    left:0;bottom:92px;width:190px;
  }
  .proof-right{
    right:0;bottom:92px;width:190px;
  }
  .showcase-bottom{
    left:210px;right:210px;bottom:16px;
    display:block;
    text-align:center;
    border-top:0;
  }
  .showcase-promise{display:none}
  .showcase-actions{justify-content:center}
}

@media(max-width:680px){
  .hero-showcase{padding-top:112px}
  .showcase-name{font-size:42px}
  .showcase-role{font-size:24px}
  .showcase-positioning{font-size:14px}
  .showcase-stage{
    min-height:660px;
    margin-left:-6px;
    margin-right:-6px;
  }
  .showcase-word{
    top:70px;
    font-size:94px;
  }
  .showcase-sun{
    width:330px;height:330px;bottom:195px;
  }
  .orbit-a{width:365px;height:365px;bottom:177px}
  .orbit-b{display:none}
  .showcase-person{
    height:410px;
    width:330px;
    bottom:166px;
  }
  .skill-pill{
    font-size:9px;
    min-height:31px;
    padding:0 9px;
  }
  .skill-icon{display:none}
  .skill-1{left:1%;top:230px}
  .skill-2{right:0;top:262px}
  .skill-3{left:1%;top:347px}
  .skill-4{right:0;top:382px}
  .skill-5{right:5%;top:457px}
  .proof-left{
    left:3px;
    bottom:82px;
    width:47%;
    padding:12px 10px;
  }
  .proof-left p{font-size:10px;line-height:1.45}
  .proof-left .quote-mark{font-size:25px}
  .proof-right{
    right:3px;
    bottom:88px;
    width:42%;
  }
  .proof-right > strong{font-size:25px}
  .proof-right > span{font-size:9px}
  .proof-mini{font-size:9px}.proof-mini b{font-size:10px}
  .showcase-bottom{
    left:0;right:0;bottom:3px;
  }
  .showcase-actions .btn{
    min-height:42px;
    padding:0 13px;
    font-size:10px;
  }
}


/* =========================================================
   V8 — HERO SCALE FIX
   Bigger portrait, less empty space, stronger first impression
   ========================================================= */
@media(min-width:1101px){
  .hero-showcase{
    min-height:900px;
    padding-top:116px;
    padding-bottom:20px;
  }

  .showcase-inner{
    min-height:760px;
  }

  .showcase-heading{
    width:min(980px,92%);
  }

  .showcase-stage{
    min-height:620px;
    margin-top:-18px;
  }

  .showcase-word{
    top:25px;
    font-size:clamp(180px,21vw,330px);
  }

  .showcase-sun{
    width:600px;
    height:600px;
    bottom:18px;
  }

  .orbit-a{
    width:690px;
    height:690px;
    bottom:-25px;
  }

  .orbit-b{
    width:820px;
    height:520px;
    bottom:18px;
  }

  .showcase-person{
    height:690px;
    width:555px;
    bottom:-34px;
  }

  .skill-1{
    left:18%;
    top:245px;
  }

  .skill-2{
    right:15%;
    top:235px;
  }

  .skill-3{
    left:15%;
    top:382px;
  }

  .skill-4{
    right:11%;
    top:370px;
  }

  .skill-5{
    right:19%;
    top:506px;
  }

  .proof-left{
    left:-8px;
    bottom:82px;
    width:235px;
  }

  .proof-right{
    right:-5px;
    bottom:92px;
    width:225px;
  }

  .showcase-bottom{
    left:255px;
    right:245px;
    bottom:-4px;
  }
}

@media(min-width:1400px){
  .hero-showcase{
    min-height:920px;
  }

  .showcase-stage{
    min-height:640px;
  }

  .showcase-person{
    height:735px;
    width:590px;
    bottom:-54px;
  }

  .showcase-sun{
    width:630px;
    height:630px;
    bottom:5px;
  }

  .orbit-a{
    width:725px;
    height:725px;
    bottom:-48px;
  }

  .orbit-b{
    width:865px;
    height:545px;
    bottom:6px;
  }

  .skill-1{left:19%;top:250px}
  .skill-2{right:16%;top:240px}
  .skill-3{left:16%;top:400px}
  .skill-4{right:12%;top:388px}
  .skill-5{right:20%;top:528px}
}

@media(min-width:861px) and (max-width:1100px){
  .showcase-stage{
    min-height:700px;
  }

  .showcase-person{
    height:625px;
    width:490px;
    bottom:72px;
  }

  .showcase-sun{
    width:505px;
    height:505px;
    bottom:118px;
  }

  .orbit-a{
    width:575px;
    height:575px;
    bottom:82px;
  }

  .orbit-b{
    width:665px;
    height:425px;
    bottom:128px;
  }

  .skill-1{left:6%;top:232px}
  .skill-2{right:5%;top:225px}
  .skill-3{left:3%;top:365px}
  .skill-4{right:2%;top:360px}
  .skill-5{right:8%;top:492px}
}

/* Keep the mobile portrait notably larger too */
@media(max-width:680px){
  .showcase-stage{
    min-height:690px;
  }

  .showcase-person{
    height:475px;
    width:365px;
    bottom:145px;
  }

  .showcase-sun{
    width:370px;
    height:370px;
    bottom:175px;
  }

  .orbit-a{
    width:405px;
    height:405px;
    bottom:158px;
  }

  .skill-1{top:218px}
  .skill-2{top:252px}
  .skill-3{top:350px}
  .skill-4{top:382px}
  .skill-5{top:478px}
}


/* =========================================================
   V9 — PREMIUM REFINEMENT PASS
   Preserve the design. Fix hierarchy, collisions, scale,
   and remove tell-tale "AI template" roughness.
   ========================================================= */

:root{
  --premium-shadow:0 18px 55px rgba(49,44,34,.075);
}

/* Slightly calmer navigation — precision over decoration */
nav{
  box-shadow:var(--premium-shadow);
  border-color:rgba(24,24,21,.10);
}
.nav-cta{
  transition:transform .2s ease, opacity .2s ease;
}
.nav-cta:hover{transform:translateY(-1px);opacity:.92}

/* Desktop hero: deliberately composed into three clear depth layers */
@media(min-width:1101px){
  .hero-showcase{
    min-height:900px;
    padding:112px 0 22px;
  }

  .showcase-inner{
    min-height:765px;
  }

  .showcase-heading{
    width:min(980px,92%);
    margin-bottom:0;
  }

  .showcase-name{
    font-size:clamp(46px,4.65vw,72px);
    line-height:.96;
  }

  .showcase-role{
    margin-top:8px;
    font-size:clamp(25px,2.55vw,38px);
  }

  .showcase-positioning{
    max-width:720px;
    margin-top:13px;
    font-size:14px;
    line-height:1.62;
  }

  .showcase-stage{
    min-height:630px;
    margin-top:-8px;
  }

  /* background typography remains visible, but never fights the portrait */
  .showcase-word{
    top:54px;
    font-size:clamp(180px,19.5vw,302px);
    letter-spacing:-.085em;
    color:rgba(24,24,21,.058);
  }

  .showcase-sun{
    width:650px;
    height:650px;
    bottom:-10px;
    border:0;
    background:
      radial-gradient(circle at 42% 36%, #D9FF87 0%, #C8FF5A 52%, #B9F244 100%);
    box-shadow:0 26px 90px rgba(132,174,61,.14);
  }

  /* one orbit is enough — less synthetic, more deliberate */
  .orbit-a{
    width:720px;
    height:720px;
    bottom:-44px;
    border-color:rgba(24,24,21,.075);
  }
  .orbit-b{
    opacity:.42;
    width:820px;
    height:520px;
    bottom:26px;
  }

  /* The cropped asset lets the visible person actually fill this size */
  .showcase-person{
    height:755px;
    width:620px;
    bottom:-72px;
  }

  .showcase-person img{
    max-height:none;
    filter:saturate(.96) contrast(1.018);
  }

  /* Pills live OUTSIDE the face/torso. No collisions. */
  .skill-pill{
    min-height:38px;
    padding:0 14px;
    box-shadow:2px 3px 0 rgba(24,24,21,.92);
    border-color:rgba(24,24,21,.9);
    font-size:11px;
    letter-spacing:-.01em;
    backdrop-filter:blur(7px);
  }
  .skill-icon{
    width:22px;
    height:22px;
    font-size:11px;
  }

  .skill-1{left:11%;top:260px;transform:rotate(-2.2deg)}
  .skill-2{right:10%;top:245px;transform:rotate(2deg)}
  .skill-3{left:8%;top:404px;transform:rotate(1.4deg)}
  .skill-4{right:5.5%;top:388px;transform:rotate(-1.7deg)}
  .skill-5{right:11.5%;top:526px;transform:rotate(1.5deg)}

  /* Proof blocks stay in dedicated side columns */
  .proof-left{
    left:0;
    bottom:78px;
    width:220px;
    padding:16px 14px 15px;
    background:rgba(247,244,237,.72);
    backdrop-filter:blur(9px);
  }
  .proof-left p{
    font-size:12px;
    line-height:1.5;
  }

  .proof-right{
    right:0;
    bottom:82px;
    width:220px;
    padding:14px 0;
    background:rgba(247,244,237,.72);
    backdrop-filter:blur(9px);
  }
  .proof-right > strong{
    font-size:32px;
  }

  /* Previously this was easy to hide behind the fold / image.
     It now gets its own clear, collision-free bottom lane. */
  .showcase-bottom{
    left:235px;
    right:235px;
    bottom:-6px;
    min-height:62px;
    padding-top:14px;
    align-items:center;
    background:linear-gradient(180deg,rgba(247,244,237,0),rgba(247,244,237,.72) 42%,#F7F4ED 100%);
  }

  .showcase-promise{
    max-width:290px;
  }
  .showcase-promise strong{
    font-size:14px;
  }

  .showcase-actions{
    flex-shrink:0;
  }
  .showcase-actions .btn{
    min-height:44px;
    padding:0 16px;
  }
}

/* Large monitor refinement */
@media(min-width:1450px){
  .showcase-stage{min-height:646px}
  .showcase-person{
    height:790px;
    width:650px;
    bottom:-88px;
  }
  .showcase-sun{
    width:680px;
    height:680px;
    bottom:-24px;
  }
  .orbit-a{
    width:748px;
    height:748px;
    bottom:-58px;
  }
  .skill-1{left:12%;top:270px}
  .skill-2{right:11%;top:252px}
  .skill-3{left:9%;top:420px}
  .skill-4{right:6%;top:405px}
  .skill-5{right:12.5%;top:548px}
}

/* Tablet: explicit lanes prevent pill/proof collisions */
@media(min-width:681px) and (max-width:1100px){
  .hero-showcase{padding-top:116px}
  .showcase-stage{
    min-height:720px;
    margin-top:0;
  }
  .showcase-word{
    top:72px;
    opacity:.8;
  }
  .showcase-person{
    height:600px;
    width:470px;
    bottom:90px;
  }
  .showcase-sun{
    width:500px;
    height:500px;
    bottom:120px;
  }
  .orbit-a{
    width:555px;
    height:555px;
    bottom:92px;
  }
  .skill-1{left:2%;top:255px}
  .skill-2{right:2%;top:245px}
  .skill-3{left:1%;top:390px}
  .skill-4{right:1%;top:382px}
  .skill-5{right:5%;top:500px}
  .proof-left{
    left:0;bottom:78px;width:185px;
    background:rgba(247,244,237,.82);
  }
  .proof-right{
    right:0;bottom:80px;width:180px;
    background:rgba(247,244,237,.82);
  }
  .showcase-bottom{
    left:195px;
    right:195px;
    bottom:10px;
  }
}

/* Mobile: no hidden copy, no pills over the face */
@media(max-width:680px){
  .showcase-heading{
    position:relative;
    z-index:30;
  }
  .showcase-stage{
    min-height:720px;
    margin-top:4px;
  }
  .showcase-word{
    top:78px;
    font-size:90px;
  }
  .showcase-person{
    height:505px;
    width:385px;
    bottom:150px;
  }
  .showcase-sun{
    width:390px;
    height:390px;
    bottom:172px;
  }
  .orbit-a{
    width:420px;
    height:420px;
    bottom:156px;
  }

  .skill-pill{
    min-height:29px;
    padding:0 8px;
    font-size:8.5px;
    box-shadow:1px 2px 0 #181815;
  }
  .skill-1{left:0;top:224px}
  .skill-2{right:0;top:264px}
  .skill-3{left:0;top:365px}
  .skill-4{right:0;top:405px}
  .skill-5{right:3%;top:506px}

  .proof-left{
    left:0;
    bottom:73px;
    width:48%;
    background:#F7F4ED;
  }
  .proof-right{
    right:0;
    bottom:78px;
    width:43%;
    background:#F7F4ED;
  }

  .showcase-bottom{
    left:0;
    right:0;
    bottom:0;
    min-height:55px;
    background:#F7F4ED;
  }
  .showcase-actions{
    width:100%;
    justify-content:center;
  }
}

/* Premium brand chips — logos stay readable regardless of page context */
.case-brand{
  min-height:44px;
  padding:7px 11px;
  border-color:rgba(24,24,21,.15);
  background:rgba(255,253,248,.82);
  box-shadow:0 8px 26px rgba(52,45,33,.05);
}
.case-brand img{
  width:30px;
  height:30px;
  object-fit:contain;
  flex:0 0 30px;
}

/* micro-interactions: quiet, not gimmicky */
.case,
.problem-row,
.service,
.btn,
.case-brand{
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.btn:hover{transform:translateY(-1px)}


/* =========================================================
   V10 — CLEAN PREMIUM HERO
   One hierarchy. No overlapping copy. Bigger portrait.
   ========================================================= */

.hero-premium{
  position:relative;
  overflow:hidden;
  background:#F7F4ED;
  padding:118px 0 26px;
  min-height:940px;
}

.hero-premium:before,
.hero-premium:after{display:none!important}

.premium-hero-inner{
  position:relative;
  min-height:790px;
}

.premium-hero-copy{
  position:relative;
  z-index:20;
  width:min(980px,100%);
  margin:0 auto;
  text-align:center;
}

.premium-kicker{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font:500 11px "DM Mono",monospace;
  letter-spacing:.14em;
  color:#59634c;
  margin-bottom:14px;
}

.premium-kicker span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#61763B;
  box-shadow:0 0 0 5px rgba(97,118,59,.12);
}

.premium-title{
  max-width:none;
  margin:0;
  font:800 clamp(50px,5vw,78px)/.95 Manrope,sans-serif;
  letter-spacing:-.06em;
}

.premium-title em{
  font-family:"Playfair Display",serif;
  font-style:italic;
  font-weight:700;
  color:#61763B;
  letter-spacing:-.045em;
}

.premium-role{
  margin:8px 0 0;
  font:700 clamp(28px,3vw,44px)/1 Manrope,sans-serif;
  letter-spacing:-.045em;
}

.premium-sub{
  max-width:720px;
  margin:16px auto 0;
  color:#666158;
  font-size:18px;
  line-height:1.55;
}

/* Main stage */
.premium-stage{
  position:relative;
  z-index:5;
  min-height:610px;
  margin-top:-8px;
}

.premium-word{
  position:absolute;
  z-index:-5;
  top:42px;
  left:50%;
  transform:translateX(-50%);
  font:800 clamp(180px,20vw,315px)/.78 Manrope,sans-serif;
  letter-spacing:-.09em;
  color:rgba(24,24,21,.055);
  white-space:nowrap;
  user-select:none;
}

.premium-disc{
  position:absolute;
  z-index:-4;
  left:50%;
  bottom:4px;
  transform:translateX(-50%);
  width:690px;
  height:690px;
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 28%, #E2FF9D 0%, #D2FF75 28%, #C8FF5A 62%, #B7ED45 100%);
  box-shadow:0 30px 100px rgba(123,156,66,.12);
}

.premium-person{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:-48px;
  transform:translateX(-50%);
  height:790px;
  width:645px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.premium-person img{
  display:block;
  height:100%;
  width:auto;
  max-width:100%;
  object-fit:contain;
  object-position:center bottom;
  filter:saturate(.97) contrast(1.015);
}

/* Platform badges — visual proof, not extra paragraphs */
.platform-badge{
  position:absolute;
  z-index:9;
  display:flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:0 14px;
  border:1px solid rgba(24,24,21,.82);
  border-radius:999px;
  background:rgba(255,253,248,.94);
  box-shadow:0 10px 28px rgba(46,40,30,.07);
  backdrop-filter:blur(8px);
  font-size:12px;
  font-weight:750;
  white-space:nowrap;
}

.platform-mark{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#181815;
  color:#fff;
  font-weight:800;
  font-size:12px;
  line-height:1;
}

.meta-mark{font-size:17px}
.linkedin-mark{font-size:10px}
.google-mark{background:#fff;color:#181815;border:1px solid rgba(24,24,21,.2)}
.instagram-mark{font-size:17px}
.tiktok-mark{font-size:16px}
.x-mark{font-size:12px}

.platform-meta{left:9%;top:250px;transform:rotate(-2deg)}
.platform-tiktok{left:6%;top:385px;transform:rotate(1.5deg)}
.platform-instagram{left:13%;top:505px;transform:rotate(-1deg)}
.platform-linkedin{right:8%;top:245px;transform:rotate(2deg)}
.platform-x{right:5%;top:382px;transform:rotate(-1.5deg)}
.platform-google{right:11%;top:505px;transform:rotate(1deg)}

/* Three large proof blocks only. No tiny body copy. */
.premium-proof{
  position:absolute;
  z-index:10;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:14px 16px;
  min-width:170px;
  background:rgba(247,244,237,.88);
  border-top:1px solid rgba(24,24,21,.18);
  backdrop-filter:blur(10px);
}

.premium-proof strong{
  font:800 30px/.95 Manrope,sans-serif;
  letter-spacing:-.055em;
}

.premium-proof span{
  font-size:11px;
  color:#6d685f;
}

.proof-spend{left:0;bottom:70px}
.proof-installs{right:0;bottom:70px}
.proof-years{
  right:0;
  top:105px;
}

/* Dedicated footer lane; never intersects portrait or badges */
.premium-hero-footer{
  position:relative;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  min-height:72px;
  padding-top:17px;
  margin-top:0;
  border-top:1px solid rgba(24,24,21,.17);
  background:#F7F4ED;
}

.premium-statement{
  max-width:390px;
}

.premium-statement .mono{
  display:block;
  margin-bottom:6px;
  color:#61763B;
  font-size:10px;
  letter-spacing:.1em;
}

.premium-statement strong{
  font:700 18px/1.2 Manrope,sans-serif;
  letter-spacing:-.025em;
}

.premium-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.premium-actions .btn{
  min-height:50px;
  padding:0 19px;
  font-size:12px;
}

/* Large desktop */
@media(min-width:1450px){
  .hero-premium{min-height:960px}
  .premium-stage{min-height:630px}
  .premium-person{
    height:830px;
    width:680px;
    bottom:-65px;
  }
  .premium-disc{
    width:720px;
    height:720px;
    bottom:-10px;
  }
  .platform-meta{left:11%;top:260px}
  .platform-tiktok{left:8%;top:402px}
  .platform-instagram{left:15%;top:526px}
  .platform-linkedin{right:10%;top:255px}
  .platform-x{right:7%;top:397px}
  .platform-google{right:13%;top:526px}
}

/* Medium desktop / tablet */
@media(max-width:1100px){
  .hero-premium{
    min-height:auto;
    padding-top:112px;
  }

  .premium-title{font-size:58px}
  .premium-role{font-size:31px}
  .premium-sub{font-size:16px}

  .premium-stage{
    min-height:650px;
  }

  .premium-person{
    height:650px;
    width:520px;
    bottom:10px;
  }

  .premium-disc{
    width:545px;
    height:545px;
    bottom:30px;
  }

  .premium-word{
    top:70px;
    font-size:180px;
  }

  .platform-badge{
    min-height:38px;
    padding:0 11px;
    font-size:10px;
  }

  .platform-mark{
    width:21px;height:21px;
  }

  .platform-meta{left:2%;top:250px}
  .platform-tiktok{left:0;top:380px}
  .platform-instagram{left:3%;top:495px}
  .platform-linkedin{right:2%;top:245px}
  .platform-x{right:0;top:375px}
  .platform-google{right:3%;top:495px}

  .premium-proof{
    min-width:150px;
    padding:11px 12px;
  }

  .premium-proof strong{font-size:24px}
  .premium-proof span{font-size:10px}
  .proof-years{top:105px}

  .premium-hero-footer{
    margin-top:4px;
  }
}

/* Mobile: stack cleanly; no badge over the face */
@media(max-width:680px){
  .hero-premium{
    padding-top:104px;
    padding-bottom:20px;
  }

  .premium-kicker{
    font-size:9px;
    margin-bottom:11px;
  }

  .premium-title{
    font-size:42px;
    line-height:.98;
  }

  .premium-role{
    margin-top:10px;
    font-size:24px;
  }

  .premium-sub{
    margin-top:13px;
    padding:0 5px;
    font-size:15px;
  }

  .premium-stage{
    min-height:640px;
    margin-top:8px;
  }

  .premium-word{
    top:72px;
    font-size:96px;
  }

  .premium-disc{
    width:380px;
    height:380px;
    bottom:145px;
  }

  .premium-person{
    height:490px;
    width:385px;
    bottom:105px;
  }

  .platform-badge{
    min-height:31px;
    padding:0 8px;
    gap:5px;
    font-size:8.5px;
    box-shadow:0 6px 18px rgba(46,40,30,.06);
  }
  .platform-mark{
    width:18px;height:18px;font-size:8px;
  }

  .platform-meta{left:0;top:225px}
  .platform-tiktok{left:0;top:332px}
  .platform-instagram{left:1%;top:436px}
  .platform-linkedin{right:0;top:225px}
  .platform-x{right:0;top:332px}
  .platform-google{right:1%;top:436px}

  /* On mobile proof is one readable row under the image */
  .premium-proof{
    top:auto!important;
    bottom:15px;
    min-width:0;
    width:31.5%;
    padding:9px 6px;
    text-align:center;
    border-top:1px solid rgba(24,24,21,.18);
    background:#F7F4ED;
  }

  .premium-proof strong{
    font-size:19px;
  }
  .premium-proof span{
    font-size:8px;
    line-height:1.25;
  }

  .proof-spend{left:0}
  .proof-years{left:34.25%;right:auto}
  .proof-installs{right:0}

  .premium-hero-footer{
    flex-direction:column;
    align-items:stretch;
    text-align:center;
    gap:15px;
    padding-top:18px;
  }

  .premium-statement{
    max-width:none;
  }

  .premium-statement strong{
    font-size:16px;
  }

  .premium-actions{
    justify-content:center;
  }

  .premium-actions .btn{
    min-height:44px;
    padding:0 13px;
    font-size:10px;
  }
}


/* =========================================================
   V11 — FINAL HERO CLEANUP
   Clear copy zone / image zone / CTA zone. No overlap.
   ========================================================= */

.hero-v11{
  min-height:930px;
  padding:116px 0 28px;
}

.hero-v11 .premium-hero-inner{
  min-height:800px;
}

/* COPY ZONE — completely separate from the portrait */
.hero-v11 .premium-hero-copy{
  position:relative;
  z-index:50;
  max-width:1040px;
  margin:0 auto;
  padding-bottom:22px;
  background:linear-gradient(180deg,#F7F4ED 0%,#F7F4ED 92%,rgba(247,244,237,0) 100%);
}

.hero-v11 .premium-title{
  font-size:clamp(50px,5vw,76px);
}

.hero-v11 .premium-role{
  font-size:clamp(28px,2.9vw,42px);
}

.hero-v11 .premium-sub{
  max-width:790px;
  font-size:17px;
  line-height:1.6;
  margin-top:14px;
}

.hero-capabilities{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:9px;
  margin-top:19px;
}

.hero-capabilities span{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border:1px solid rgba(24,24,21,.15);
  border-radius:999px;
  background:rgba(255,253,248,.84);
  color:#4f4c45;
  font-size:11px;
  font-weight:650;
}

/* IMAGE ZONE — starts clearly under the copy */
.hero-v11 .premium-stage{
  position:relative;
  min-height:565px;
  margin-top:0;
}

.hero-v11 .premium-word{
  top:42px;
  font-size:clamp(170px,18.5vw,290px);
  color:rgba(24,24,21,.05);
}

.hero-v11 .premium-disc{
  width:585px;
  height:585px;
  bottom:5px;
}

/* Slightly smaller than V10, intentionally lower */
.hero-v11 .premium-person{
  height:665px;
  width:545px;
  bottom:-16px;
}

.hero-v11 .premium-person img{
  height:100%;
  max-height:100%;
}

/* Actual platform logos, no fake glyphs */
.real-logo{
  position:absolute;
  z-index:14;
  width:58px;
  height:58px;
  padding:8px;
  display:grid;
  place-items:center;
  border:1px solid rgba(24,24,21,.16);
  border-radius:17px;
  background:rgba(255,253,248,.94);
  box-shadow:0 14px 35px rgba(52,44,33,.08);
  backdrop-filter:blur(8px);
  transition:transform .2s ease, box-shadow .2s ease;
}

.real-logo:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 18px 42px rgba(52,44,33,.11);
}

.real-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:10px;
}

/* Logo positions deliberately avoid head / torso / proof cards */
.logo-meta{left:16%;top:145px;transform:rotate(-4deg)}
.logo-linkedin{right:15%;top:140px;transform:rotate(4deg)}
.logo-x{right:9%;top:285px;transform:rotate(-3deg)}
.logo-reddit{left:10%;top:300px;transform:rotate(3deg)}
.logo-google{right:16%;top:425px;transform:rotate(2deg)}

/* Proof is large enough to read and sits below logo layer */
.hero-v11 .premium-proof{
  min-width:175px;
  padding:14px 15px;
  background:rgba(247,244,237,.92);
  border-top:1px solid rgba(24,24,21,.16);
  box-shadow:none;
}

.hero-v11 .premium-proof strong{
  font-size:29px;
}

.hero-v11 .premium-proof span{
  font-size:11px;
  margin-top:3px;
}

.hero-v11 .proof-years{
  right:0;
  top:85px;
}

.hero-v11 .proof-spend{
  left:0;
  bottom:48px;
}

.hero-v11 .proof-installs{
  right:0;
  bottom:48px;
}

/* CTA ZONE — outside the image stage */
.hero-v11 .premium-hero-footer{
  position:relative;
  z-index:60;
  margin-top:0;
  min-height:78px;
  padding-top:18px;
  background:#F7F4ED;
}

.hero-v11 .premium-statement strong{
  font-size:18px;
}

.hero-v11 .premium-statement .mono{
  font-size:10px;
}

@media(min-width:1450px){
  .hero-v11{
    min-height:945px;
  }

  .hero-v11 .premium-stage{
    min-height:580px;
  }

  .hero-v11 .premium-disc{
    width:610px;
    height:610px;
  }

  .hero-v11 .premium-person{
    height:690px;
    width:565px;
    bottom:-22px;
  }

  .logo-meta{left:18%;top:150px}
  .logo-linkedin{right:17%;top:145px}
  .logo-x{right:11%;top:290px}
  .logo-reddit{left:12%;top:310px}
  .logo-google{right:18%;top:432px}
}

/* Tablet */
@media(max-width:1100px){
  .hero-v11{
    padding-top:108px;
    min-height:auto;
  }

  .hero-v11 .premium-hero-copy{
    padding-bottom:18px;
  }

  .hero-v11 .premium-title{
    font-size:56px;
  }

  .hero-v11 .premium-role{
    font-size:31px;
  }

  .hero-v11 .premium-stage{
    min-height:600px;
  }

  .hero-v11 .premium-disc{
    width:500px;
    height:500px;
    bottom:40px;
  }

  .hero-v11 .premium-person{
    height:580px;
    width:475px;
    bottom:10px;
  }

  .real-logo{
    width:50px;
    height:50px;
    padding:7px;
    border-radius:15px;
  }

  .logo-meta{left:6%;top:155px}
  .logo-linkedin{right:6%;top:150px}
  .logo-x{right:2%;top:285px}
  .logo-reddit{left:2%;top:300px}
  .logo-google{right:7%;top:420px}

  .hero-v11 .proof-years{
    top:72px;
  }

  .hero-v11 .premium-proof{
    min-width:145px;
  }

  .hero-v11 .premium-proof strong{
    font-size:24px;
  }
}

/* Mobile: portrait starts well below all hero copy */
@media(max-width:680px){
  .hero-v11{
    padding-top:102px;
    padding-bottom:20px;
  }

  .hero-v11 .premium-hero-copy{
    padding-bottom:14px;
  }

  .hero-v11 .premium-title{
    font-size:41px;
  }

  .hero-v11 .premium-role{
    font-size:23px;
  }

  .hero-v11 .premium-sub{
    font-size:15px;
    padding:0 6px;
  }

  .hero-capabilities{
    gap:6px;
    margin-top:15px;
  }

  .hero-capabilities span{
    min-height:29px;
    padding:0 9px;
    font-size:9px;
  }

  .hero-v11 .premium-stage{
    min-height:560px;
    margin-top:4px;
  }

  .hero-v11 .premium-word{
    top:66px;
    font-size:92px;
  }

  .hero-v11 .premium-disc{
    width:355px;
    height:355px;
    bottom:100px;
  }

  .hero-v11 .premium-person{
    height:430px;
    width:345px;
    bottom:70px;
  }

  .real-logo{
    width:39px;
    height:39px;
    padding:5px;
    border-radius:12px;
  }

  .logo-meta{left:0;top:145px}
  .logo-linkedin{right:0;top:145px}
  .logo-reddit{left:0;top:270px}
  .logo-x{right:0;top:270px}
  .logo-google{right:4%;top:390px}

  /* Proof becomes one clean row below portrait */
  .hero-v11 .premium-proof{
    top:auto!important;
    bottom:6px;
    width:31.5%;
    min-width:0;
    padding:8px 4px;
    text-align:center;
  }

  .hero-v11 .premium-proof strong{
    font-size:18px;
  }

  .hero-v11 .premium-proof span{
    font-size:7.5px;
    line-height:1.2;
  }

  .hero-v11 .proof-spend{left:0}
  .hero-v11 .proof-years{left:34.25%;right:auto}
  .hero-v11 .proof-installs{right:0}

  .hero-v11 .premium-hero-footer{
    flex-direction:column;
    align-items:stretch;
    text-align:center;
    gap:14px;
    padding-top:17px;
  }

  .hero-v11 .premium-actions{
    justify-content:center;
  }
}


/* =========================================================
   V12 — HEAD VISIBILITY + ZERO-OVERLAP FIX
   Preserve V11 design; only fix spacing and portrait position.
   ========================================================= */

/* Give the capability row and portrait two completely separate lanes */
.hero-v11 .premium-hero-copy{
  padding-bottom:34px;
}

.hero-v11 .hero-capabilities{
  position:relative;
  z-index:70;
  margin-bottom:0;
}

/* The stage starts LOWER. This is the critical fix. */
.hero-v11 .premium-stage{
  margin-top:28px;
  min-height:590px;
}

/* Move the decorative word with the image stage, not behind the copy */
.hero-v11 .premium-word{
  top:58px;
}

/* Portrait becomes slightly smaller + lower so the full head is always visible */
.hero-v11 .premium-person{
  height:625px;
  width:515px;
  bottom:-12px;
  top:auto;
}

/* Green disc follows the portrait, leaving a clean gap above the head */
.hero-v11 .premium-disc{
  width:565px;
  height:565px;
  bottom:7px;
}

/* Keep all logos outside the head/shoulder safe area */
.hero-v11 .logo-meta{
  left:15%;
  top:155px;
}
.hero-v11 .logo-linkedin{
  right:14%;
  top:150px;
}
.hero-v11 .logo-reddit{
  left:9%;
  top:315px;
}
.hero-v11 .logo-x{
  right:8%;
  top:305px;
}
.hero-v11 .logo-google{
  right:15%;
  top:445px;
}

/* Proof blocks stay in their own outer columns */
.hero-v11 .proof-years{
  top:96px;
  right:0;
}
.hero-v11 .proof-spend{
  left:0;
  bottom:38px;
}
.hero-v11 .proof-installs{
  right:0;
  bottom:38px;
}

/* Ensure copy can never visually bleed into the portrait stage */
.hero-v11 .premium-hero-copy:after{
  content:"";
  display:block;
  height:1px;
  width:100%;
}

/* Slightly increase hero height so nothing is forced to collide */
.hero-v11{
  min-height:965px;
}

/* Large screens */
@media(min-width:1450px){
  .hero-v11 .premium-hero-copy{
    padding-bottom:38px;
  }

  .hero-v11 .premium-stage{
    margin-top:30px;
    min-height:605px;
  }

  .hero-v11 .premium-person{
    height:650px;
    width:535px;
    bottom:-16px;
  }

  .hero-v11 .premium-disc{
    width:590px;
    height:590px;
    bottom:4px;
  }

  .hero-v11 .logo-meta{left:17%;top:165px}
  .hero-v11 .logo-linkedin{right:16%;top:158px}
  .hero-v11 .logo-reddit{left:11%;top:325px}
  .hero-v11 .logo-x{right:10%;top:315px}
  .hero-v11 .logo-google{right:17%;top:455px}
}

/* Tablet */
@media(max-width:1100px){
  .hero-v11 .premium-hero-copy{
    padding-bottom:30px;
  }

  .hero-v11 .premium-stage{
    margin-top:24px;
    min-height:610px;
  }

  .hero-v11 .premium-person{
    height:550px;
    width:450px;
    bottom:12px;
  }

  .hero-v11 .premium-disc{
    width:485px;
    height:485px;
    bottom:42px;
  }

  .hero-v11 .premium-word{
    top:70px;
  }

  .hero-v11 .logo-meta{left:5%;top:168px}
  .hero-v11 .logo-linkedin{right:5%;top:162px}
  .hero-v11 .logo-reddit{left:2%;top:315px}
  .hero-v11 .logo-x{right:2%;top:305px}
  .hero-v11 .logo-google{right:7%;top:440px}

  .hero-v11 .proof-years{
    top:90px;
  }
}

/* Mobile: strict separation between chips and image */
@media(max-width:680px){
  .hero-v11 .premium-hero-copy{
    padding-bottom:24px;
  }

  .hero-v11 .premium-stage{
    margin-top:24px;
    min-height:575px;
  }

  .hero-v11 .premium-person{
    height:405px;
    width:330px;
    bottom:78px;
  }

  .hero-v11 .premium-disc{
    width:345px;
    height:345px;
    bottom:106px;
  }

  .hero-v11 .premium-word{
    top:76px;
    font-size:88px;
  }

  .hero-v11 .logo-meta{left:0;top:150px}
  .hero-v11 .logo-linkedin{right:0;top:150px}
  .hero-v11 .logo-reddit{left:0;top:275px}
  .hero-v11 .logo-x{right:0;top:275px}
  .hero-v11 .logo-google{right:4%;top:398px}
}


/* =========================================================
   V13 — ABOVE-THE-FOLD HERO COMPRESSION
   Move the visual group up while preserving the no-overlap gap.
   ========================================================= */

/* Use less vertical space above the content */
.hero-v11{
  min-height:860px;
  padding-top:88px;
  padding-bottom:16px;
}

.hero-v11 .premium-hero-inner{
  min-height:730px;
}

/* Tighten the copy block without changing its visual hierarchy */
.hero-v11 .premium-kicker{
  margin-bottom:10px;
}

.hero-v11 .premium-role{
  margin-top:5px;
}

.hero-v11 .premium-sub{
  margin-top:10px;
  line-height:1.48;
}

.hero-v11 .hero-capabilities{
  margin-top:13px;
}

.hero-v11 .premium-hero-copy{
  padding-bottom:14px;
}

/* Move the ENTIRE visual stage upward */
.hero-v11 .premium-stage{
  margin-top:6px;
  min-height:515px;
}

/* Keep portrait completely below the copy, but higher on the viewport */
.hero-v11 .premium-person{
  height:548px;
  width:462px;
  bottom:2px;
}

/* Background circle follows portrait upward */
.hero-v11 .premium-disc{
  width:510px;
  height:510px;
  bottom:3px;
}

/* Huge background word follows the group */
.hero-v11 .premium-word{
  top:36px;
  font-size:clamp(155px,17.5vw,270px);
}

/* Pull all surrounding logos upward with the portrait */
.hero-v11 .logo-meta{
  left:15%;
  top:112px;
}
.hero-v11 .logo-linkedin{
  right:14%;
  top:108px;
}
.hero-v11 .logo-reddit{
  left:9%;
  top:252px;
}
.hero-v11 .logo-x{
  right:8%;
  top:245px;
}
.hero-v11 .logo-google{
  right:15%;
  top:372px;
}

/* Proof metrics move upward too */
.hero-v11 .proof-years{
  top:64px;
  right:0;
}
.hero-v11 .proof-spend{
  left:0;
  bottom:28px;
}
.hero-v11 .proof-installs{
  right:0;
  bottom:28px;
}

/* Bring the CTA lane directly under the visual instead of below the fold */
.hero-v11 .premium-hero-footer{
  min-height:62px;
  padding-top:12px;
  margin-top:-2px;
}

.hero-v11 .premium-statement .mono{
  margin-bottom:4px;
}

.hero-v11 .premium-actions .btn{
  min-height:46px;
}

/* Large desktop */
@media(min-width:1450px){
  .hero-v11{
    min-height:875px;
    padding-top:90px;
  }

  .hero-v11 .premium-stage{
    min-height:525px;
    margin-top:5px;
  }

  .hero-v11 .premium-person{
    height:565px;
    width:475px;
    bottom:1px;
  }

  .hero-v11 .premium-disc{
    width:525px;
    height:525px;
    bottom:2px;
  }

  .hero-v11 .logo-meta{left:17%;top:118px}
  .hero-v11 .logo-linkedin{right:16%;top:113px}
  .hero-v11 .logo-reddit{left:11%;top:260px}
  .hero-v11 .logo-x{right:10%;top:253px}
  .hero-v11 .logo-google{right:17%;top:382px}
}

/* Tablet */
@media(max-width:1100px){
  .hero-v11{
    min-height:auto;
    padding-top:86px;
  }

  .hero-v11 .premium-hero-copy{
    padding-bottom:12px;
  }

  .hero-v11 .premium-stage{
    margin-top:5px;
    min-height:525px;
  }

  .hero-v11 .premium-person{
    height:485px;
    width:405px;
    bottom:20px;
  }

  .hero-v11 .premium-disc{
    width:435px;
    height:435px;
    bottom:31px;
  }

  .hero-v11 .premium-word{
    top:43px;
  }

  .hero-v11 .logo-meta{left:5%;top:122px}
  .hero-v11 .logo-linkedin{right:5%;top:118px}
  .hero-v11 .logo-reddit{left:2%;top:255px}
  .hero-v11 .logo-x{right:2%;top:248px}
  .hero-v11 .logo-google{right:7%;top:368px}

  .hero-v11 .proof-years{
    top:61px;
  }

  .hero-v11 .proof-spend,
  .hero-v11 .proof-installs{
    bottom:22px;
  }
}

/* Mobile */
@media(max-width:680px){
  .hero-v11{
    padding-top:84px;
  }

  .hero-v11 .premium-hero-copy{
    padding-bottom:10px;
  }

  .hero-v11 .premium-stage{
    margin-top:4px;
    min-height:510px;
  }

  .hero-v11 .premium-person{
    height:370px;
    width:310px;
    bottom:80px;
  }

  .hero-v11 .premium-disc{
    width:320px;
    height:320px;
    bottom:99px;
  }

  .hero-v11 .premium-word{
    top:56px;
    font-size:82px;
  }

  .hero-v11 .logo-meta{left:0;top:123px}
  .hero-v11 .logo-linkedin{right:0;top:123px}
  .hero-v11 .logo-reddit{left:0;top:235px}
  .hero-v11 .logo-x{right:0;top:235px}
  .hero-v11 .logo-google{right:4%;top:344px}

  .hero-v11 .premium-hero-footer{
    padding-top:12px;
  }
}


/* V14 contact + social polish */
.social-links{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.social-links a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:0 11px;
  border:1px solid rgba(24,24,21,.14);
  border-radius:999px;
  background:rgba(255,253,248,.65);
  font-size:11px;
  font-weight:650;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.social-links a:hover{
  transform:translateY(-1px);
  background:#FFFDF8;
  border-color:rgba(24,24,21,.28);
}
.social-dot{
  width:6px;height:6px;border-radius:50%;background:#61763B;
}


/* =========================================================
   V20 — HEAD OF MARKETING LAYER
   Native extension of the existing cream/editorial system.
   ========================================================= */

.leadership-serif{
  font-family:"Playfair Display",serif;
  font-style:italic;
  font-weight:700;
  color:var(--olive);
  letter-spacing:-.04em;
}

.leadership-head,
.marketing-os-head,
.experience-head{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:70px;
  align-items:end;
  margin-bottom:48px;
}

.leadership-intro{
  max-width:610px;
}

.leadership-intro p{
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
}

.leadership-signal{
  display:flex;
  align-items:center;
  gap:11px;
  flex-wrap:wrap;
  margin-top:22px;
  padding-top:17px;
  border-top:1px solid rgba(24,24,21,.16);
}

.leadership-signal span{
  font-size:9px;
  letter-spacing:.11em;
  color:#5f684f;
}

.leadership-signal b{
  color:#9c978e;
  font-weight:500;
}

.ownership-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--ink);
  border-left:1px solid var(--ink);
}

.ownership-card{
  position:relative;
  min-height:290px;
  padding:25px;
  border-right:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  background:rgba(255,253,248,.45);
  transition:background .2s ease, transform .2s ease;
}

.ownership-card:hover{
  background:var(--paper);
}

.ownership-n{
  font:500 9px "DM Mono",monospace;
  color:var(--olive);
  letter-spacing:.1em;
}

.ownership-icon{
  position:absolute;
  top:22px;
  right:23px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(24,24,21,.18);
  border-radius:50%;
  font-weight:800;
  background:var(--cream);
}

.ownership-card h3{
  margin:82px 0 12px;
  max-width:250px;
  font:700 22px/1.1 Manrope,sans-serif;
  letter-spacing:-.035em;
}

.ownership-card p{
  margin:0;
  max-width:310px;
  color:#69645c;
  font-size:13px;
  line-height:1.6;
}

/* Marketing operating system */
.marketing-os-section{
  background:linear-gradient(180deg,rgba(255,253,248,.28),rgba(247,244,237,0));
}

.marketing-os{
  display:grid;
  grid-template-columns:1fr 34px 1fr 34px 1fr 34px 1fr 34px 1fr 34px 1fr;
  align-items:stretch;
  margin-top:50px;
}

.os-node{
  min-height:260px;
  padding:20px 17px;
  border:1px solid var(--ink);
  background:var(--paper);
}

.os-node:nth-of-type(5){
  background:#E8F6C5;
}

.os-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font:500 9px "DM Mono",monospace;
  letter-spacing:.08em;
  color:var(--olive);
}

.os-node h3{
  margin:62px 0 10px;
  font:700 19px/1.12 Manrope,sans-serif;
  letter-spacing:-.03em;
}

.os-node p{
  margin:0;
  color:#706b62;
  font-size:11px;
  line-height:1.58;
}

.os-arrow{
  display:grid;
  place-items:center;
  color:#88837a;
  font-size:18px;
}

.channel-layer{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:30px;
  align-items:center;
  margin-top:20px;
  padding:20px 22px;
  border:1px solid rgba(24,24,21,.2);
  background:rgba(255,253,248,.55);
}

.channel-layer-title .mono{
  display:block;
  margin-bottom:5px;
  color:var(--olive);
  font-size:9px;
  letter-spacing:.12em;
}

.channel-layer-title strong{
  font:700 17px Manrope,sans-serif;
  letter-spacing:-.025em;
}

.channel-layer-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  justify-content:flex-end;
}

.channel-layer-tags span{
  padding:7px 9px;
  border:1px solid rgba(24,24,21,.18);
  background:var(--cream);
  font:500 9px "DM Mono",monospace;
}

/* Experience */
.experience-list{
  border-top:1px solid var(--ink);
}

.experience-row{
  display:grid;
  grid-template-columns:60px .75fr 1.25fr .55fr;
  gap:28px;
  align-items:start;
  padding:29px 0;
  border-bottom:1px solid var(--ink);
}

.experience-index{
  font:500 10px "DM Mono",monospace;
  color:var(--olive);
}

.experience-badge{
  display:inline-block;
  margin-bottom:9px;
  font:500 8px "DM Mono",monospace;
  letter-spacing:.1em;
  color:var(--olive);
}

.experience-role h3{
  margin:0;
  font:700 24px/1 Manrope,sans-serif;
  letter-spacing:-.035em;
}

.experience-desc p{
  margin:0;
  color:#666158;
  font-size:13px;
  line-height:1.65;
}

.experience-scope{
  justify-self:end;
  text-align:right;
  font:500 9px/1.5 "DM Mono",monospace;
  letter-spacing:.07em;
  color:#716d64;
}

/* Philosophy */
.philosophy-head{
  margin-bottom:42px;
}

.philosophy-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.philosophy-card{
  min-height:310px;
  padding:28px;
  border:1px solid var(--ink);
  background:#DDD7FF;
  display:flex;
  flex-direction:column;
}

.philosophy-card.philosophy-green{
  background:var(--lime);
}

.philosophy-card.philosophy-paper{
  background:var(--paper);
}

.philosophy-num{
  font:500 9px "DM Mono",monospace;
  letter-spacing:.1em;
}

.philosophy-card h3{
  margin:auto 0 14px;
  font:800 31px/1 Manrope,sans-serif;
  letter-spacing:-.05em;
  max-width:300px;
}

.philosophy-card p{
  margin:0;
  color:#514d46;
  font-size:13px;
  line-height:1.6;
  max-width:330px;
}

@media(max-width:1050px){
  .leadership-head,
  .marketing-os-head,
  .experience-head{
    grid-template-columns:1fr;
    gap:22px;
  }

  .ownership-grid{
    grid-template-columns:1fr 1fr;
  }

  .marketing-os{
    grid-template-columns:1fr 30px 1fr;
    gap:0;
  }

  .marketing-os .os-arrow:nth-of-type(6n){
    display:none;
  }

  .os-node{
    min-height:230px;
  }

  .channel-layer{
    grid-template-columns:1fr;
  }

  .channel-layer-tags{
    justify-content:flex-start;
  }

  .experience-row{
    grid-template-columns:45px .9fr 1.4fr;
  }

  .experience-scope{
    grid-column:2 / 4;
    justify-self:start;
    text-align:left;
  }
}

@media(max-width:700px){
  .ownership-grid{
    grid-template-columns:1fr;
  }

  .ownership-card{
    min-height:240px;
  }

  .ownership-card h3{
    margin-top:62px;
  }

  .marketing-os{
    display:block;
  }

  .os-node{
    min-height:210px;
    margin-bottom:9px;
  }

  .os-node h3{
    margin-top:45px;
  }

  .os-arrow{
    display:none;
  }

  .experience-row{
    grid-template-columns:38px 1fr;
    gap:14px;
  }

  .experience-desc,
  .experience-scope{
    grid-column:2;
  }

  .philosophy-grid{
    grid-template-columns:1fr;
  }

  .philosophy-card{
    min-height:240px;
  }

  .leadership-signal{
    gap:7px;
  }
}


/* =========================================================
   V21 — HEAD OF MARKETING SECTIONS: THEME ALIGNMENT
   Same editorial system, fewer "dashboard" vibes.
   ========================================================= */

/* Leadership section gets same paper/line rhythm as case studies */
.leadership-section{
  background:transparent;
}

.leadership-head{
  margin-bottom:54px;
}

.ownership-grid{
  border:0;
  gap:14px;
  background:transparent;
}

.ownership-card{
  border:1px solid rgba(24,24,21,.18);
  border-radius:18px;
  background:rgba(255,253,248,.64);
  min-height:270px;
  padding:26px;
  box-shadow:0 12px 34px rgba(48,41,31,.035);
}

.ownership-card:nth-child(2){
  background:#EEF7D8;
}

.ownership-card:nth-child(5){
  background:#E7E2FF;
}

.ownership-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 45px rgba(48,41,31,.065);
  border-color:rgba(24,24,21,.28);
}

.ownership-icon{
  background:var(--cream);
  border-color:rgba(24,24,21,.14);
}

/* Operating system becomes editorial flow, not a technical dashboard */
.marketing-os-section{
  background:transparent;
}

.marketing-os{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:50px;
}

.os-arrow{
  display:none;
}

.os-node{
  min-height:230px;
  padding:24px;
  border:1px solid rgba(24,24,21,.18);
  border-radius:18px;
  background:var(--paper);
}

.os-node:nth-of-type(3){
  background:#E8F6C5;
}

.os-node:nth-of-type(7){
  background:#FFDCCF;
}

.os-node:nth-of-type(11){
  background:#E3DFFF;
}

.os-node h3{
  margin:54px 0 10px;
  font-size:21px;
}

.channel-layer{
  margin-top:14px;
  border-radius:18px;
  border-color:rgba(24,24,21,.16);
  background:rgba(255,253,248,.58);
}

/* Experience uses the same clean case-study line system */
.experience-row{
  padding:31px 0;
  border-bottom-color:rgba(24,24,21,.7);
}

.experience-role h3{
  font-size:25px;
}

.experience-badge{
  color:var(--olive);
}

/* Philosophy cards brought closer to portfolio color language */
.philosophy-grid{
  gap:14px;
}

.philosophy-card{
  border-radius:18px;
  border-color:rgba(24,24,21,.18);
  box-shadow:0 12px 34px rgba(48,41,31,.035);
}

.philosophy-card.philosophy-green{
  background:var(--lime);
}

.philosophy-card:nth-child(2){
  background:#E3DFFF;
}

.philosophy-card.philosophy-paper{
  background:#FFDCCF;
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-section{
  padding-top:100px;
}

.contact-shell{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:62px;
  padding:52px;
  border:1px solid rgba(24,24,21,.18);
  border-radius:26px;
  background:
    radial-gradient(420px 300px at 92% 0%, rgba(200,255,90,.16), transparent 65%),
    var(--paper);
  box-shadow:0 24px 70px rgba(47,40,31,.07);
}

.contact-copy{
  max-width:650px;
  margin:22px 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
}

.contact-details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:34px;
}

.contact-detail{
  padding:20px;
  border:1px solid rgba(24,24,21,.15);
  border-radius:15px;
  background:var(--cream);
}

.contact-label{
  display:block;
  margin-bottom:8px;
  font-size:9px;
  letter-spacing:.12em;
  color:var(--olive);
}

.contact-detail strong{
  display:block;
  font:700 18px/1.25 Manrope,sans-serif;
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}

.contact-social{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:6px;
}

.social-profile{
  display:grid;
  grid-template-columns:42px 1fr auto;
  align-items:center;
  gap:13px;
  min-height:72px;
  padding:13px 14px;
  border:1px solid rgba(24,24,21,.15);
  border-radius:15px;
  background:rgba(247,244,237,.68);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}

.social-profile:hover{
  transform:translateY(-2px);
  border-color:rgba(24,24,21,.28);
  background:#FFFDF8;
}

.social-profile-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--ink);
  color:#fff;
  font-weight:800;
}

.social-linkedin .social-profile-icon{
  background:#0A66C2;
  font-size:14px;
}

.social-instagram .social-profile-icon{
  background:linear-gradient(145deg,#7A3FF2,#E84077,#F49B3D);
  font-size:21px;
}

.social-profile strong{
  display:block;
  font-size:13px;
}

.social-profile span{
  display:block;
  margin-top:3px;
  font-size:10px;
  color:#777168;
}

.social-profile b{
  font-size:18px;
  font-weight:500;
}

.contact-note{
  margin-top:8px;
  padding-top:18px;
  border-top:1px solid rgba(24,24,21,.14);
}

.contact-note .mono{
  font-size:9px;
  letter-spacing:.09em;
  color:var(--olive);
}

.contact-note p{
  margin:8px 0 0;
  color:#6d685f;
  font-size:11px;
  line-height:1.55;
}

/* Footer contact info remains plain text */
.footer-contact-plain{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  align-items:center;
}

.footer-contact-plain span{
  font-size:11px;
}

@media(max-width:980px){
  .marketing-os{
    grid-template-columns:1fr 1fr;
  }

  .contact-shell{
    grid-template-columns:1fr;
    gap:38px;
  }
}

@media(max-width:700px){
  .marketing-os{
    grid-template-columns:1fr;
  }

  .contact-shell{
    padding:28px 22px;
  }

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

  .contact-detail strong{
    font-size:16px;
  }
}


/* =========================================================
   V22 — SIMPLIFIED SECTIONS + REAL ICONS + PHOTO BRAND
   ========================================================= */
.brand-photo{
  overflow:hidden;
  padding:0 !important;
  background:transparent !important;
  border:1px solid rgba(24,24,21,.12);
}
.brand-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.ownership-grid{
  grid-template-columns:repeat(2,1fr) !important;
}
.ownership-card{
  min-height:250px !important;
}

.marketing-os{
  grid-template-columns:repeat(2,1fr) !important;
  gap:14px !important;
}
.os-node{
  min-height:215px !important;
}
.os-node h3{
  margin-top:42px !important;
}

.contact-shell{
  border-radius:22px !important;
}
.real-contact-card{
  display:grid !important;
  grid-template-columns:52px 1fr;
  align-items:center;
  gap:14px;
}
.real-contact-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#FFFDF8;
  border:1px solid rgba(24,24,21,.12);
}
.real-contact-icon img{
  width:28px;
  height:28px;
  object-fit:contain;
}
.real-social-logo{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
}
.real-social-logo img{
  width:32px;
  height:32px;
  object-fit:contain;
}
.social-instagram .social-profile-icon,
.social-linkedin .social-profile-icon{
  display:none !important;
}

.footer-social-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.footer-social-link img{
  width:16px;
  height:16px;
  object-fit:contain;
}

@media(max-width:980px){
  .ownership-grid,
  .marketing-os{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:700px){
  .real-contact-card{
    grid-template-columns:42px 1fr;
  }
  .real-contact-icon{
    width:42px;
    height:42px;
  }
  .real-contact-icon img{
    width:22px;
    height:22px;
  }
}


/* =========================================================
   V24 — CLEAN FLOW AFTER REMOVING EXTRA LEADERSHIP BLOCK
   ========================================================= */

/* Keep the transition from "What I solve" into case studies deliberate */
.problem-stack{
  margin-bottom:8px;
}

#work{
  padding-top:104px;
}

/* Give the case-study intro a little more breathing room */
#work .section-intro{
  max-width:690px;
}

/* Smooth responsive rhythm across the homepage */
@media(max-width:980px){
  #work{
    padding-top:88px;
  }
}

@media(max-width:700px){
  #work{
    padding-top:74px;
  }

  #work .section-title{
    max-width:100%;
  }

  #work .section-intro{
    font-size:16px;
    line-height:1.62;
  }
}



:focus-visible{outline:3px solid #61763B;outline-offset:5px}
[id]{scroll-margin-top:100px}
.skip-link{position:fixed;top:-80px;left:20px;z-index:999;padding:14px 20px;background:#181815;color:white}
.skip-link:focus{top:20px}
.editorial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:40px}
.editorial-card{display:flex;flex-direction:column;min-height:290px;padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--paper);transition:transform .2s,box-shadow .2s}
.editorial-card:hover{transform:translateY(-4px);box-shadow:0 16px 35px #1818150d}
.editorial-card .category{font:500 12px "DM Mono",monospace;color:var(--olive);text-transform:uppercase;letter-spacing:.06em}
.editorial-card h3{font:700 24px/1.2 Manrope,sans-serif;letter-spacing:-.035em;margin:22px 0 12px}
.editorial-card p{color:var(--muted);font-size:16px;line-height:1.65;margin:0 0 25px}
.editorial-card .read{margin-top:auto;font-size:14px;font-weight:600}
.editorial-card.featured{background:var(--lime);border-color:var(--lime)}
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start}
.about-copy p{font-size:18px;line-height:1.8;color:var(--muted)}
.about-panel{background:var(--ink);color:var(--cream);padding:35px;border-radius:24px}
.about-panel h3{font:700 28px/1.2 Manrope;margin-top:0;letter-spacing:-.035em}
.about-panel dl{margin:0}.about-panel dl div{padding:20px 0;border-top:1px solid #ffffff25}
.about-panel dt{font:500 12px "DM Mono";text-transform:uppercase;color:var(--lime);margin-bottom:9px}
.about-panel dd{margin:0;font-size:16px;line-height:1.65}
.deliverable-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:40px}
.deliverable{padding:30px;border:1px solid var(--line);border-radius:20px;background:var(--paper)}
.deliverable h3{font:700 26px/1.2 Manrope;margin:0 0 16px;letter-spacing:-.04em}
.deliverable p,.deliverable li{font-size:16px;line-height:1.75;color:var(--muted)}
.deliverable ul{padding-left:20px}.deliverable li{margin-bottom:10px}
.faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}
.faq-list details{border-bottom:1px solid var(--line);padding:22px 0}
.faq-list summary{font:600 19px/1.5 Manrope;cursor:pointer;list-style:none;display:flex;gap:25px;justify-content:space-between}
.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:'+';font-size:25px}.faq-list details[open] summary:after{content:'−'}
.faq-list p{font-size:16px;line-height:1.8;color:var(--muted);max-width:680px;margin:18px 0 0}
.section-bottom-link{margin-top:32px;display:inline-flex;gap:12px;font-size:16px;font-weight:700;border-bottom:1px solid;padding-bottom:6px}
.nav-links>a:not(.nav-cta){font-size:13px}.nav-links{gap:19px}
.contact-detail strong{overflow-wrap:anywhere}
.reveal{opacity:1;transform:none}
@media(max-width:1000px){.editorial-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.about-grid,.faq-layout{grid-template-columns:1fr;gap:32px}.deliverable-grid{grid-template-columns:1fr}.nav-links>a:not(.nav-cta){display:none}}
@media(max-width:620px){.editorial-grid{grid-template-columns:1fr}.editorial-card{min-height:250px}.about-panel{padding:26px}.section{padding:75px 0}.nav-shell .brand>span:last-child{font-size:11px}.nav-cta{font-size:11px;padding:0 13px}.faq-list summary{font-size:18px}.about-copy p{font-size:17px}.editorial-card h3{font-size:23px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}