:root{
  --bg:#130d0f;
  --bg2:#191012;
  --panel:#1c1214;
  --panel2:#221617;
  --text:#f5ede6;
  --muted:#c7b8ae;
  --soft:#9c8980;
  --line:rgba(255,229,205,.12);
  --line-strong:rgba(255,229,205,.22);
  --accent:#e9a477;
  --accent2:#ef8d76;
  --accent3:#f4c28f;
  --cream:#f6eee6;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'DM Sans',Arial,sans-serif;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;

  background:
    radial-gradient(
      circle at 78% 6%,
      rgba(118,63,50,.16),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #120c0e 0%,
      #160e10 48%,
      #110b0d 100%
    );

  color:var(--text);

  font-family:var(--sans);
  line-height:1.5;
}

a{
  color:inherit;
  text-decoration:none;
}

button{
  font:inherit;
  cursor:pointer;
}

img{
  display:block;
  width:100%;
}

.site-shell{
  overflow:hidden;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.nav-wrap{
  height:82px;

  max-width:1320px;

  margin:0 auto;

  padding:0 28px;

  display:grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items:center;

  position:relative;

  z-index:20;
}


.brand{
  display:inline-flex;
  flex-direction:column;

  width:max-content;
}


.brand-main{
  font-family:var(--serif);

  font-size:18px;

  letter-spacing:.1em;
}


.brand-sub{
  font-size:9px;

  letter-spacing:.45em;

  margin-top:2px;

  color:var(--accent3);
}


.desktop-nav{
  display:flex;

  gap:30px;

  font-size:14px;

  color:#e7dcd4;
}


.desktop-nav a{
  transition:.2s;
}


.desktop-nav a:hover{
  color:var(--accent3);
}


.desktop-cta{
  justify-self:end;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  gap:8px;

  padding:13px 20px;

  border-radius:999px;

  border:1px solid var(--line);

  font-weight:600;

  font-size:14px;

  transition:.25s ease;
}


.btn:hover{
  transform:translateY(-2px);

  border-color:var(--line-strong);
}


.btn-primary{
  background:
    linear-gradient(
      90deg,
      var(--accent3),
      var(--accent2)
    );

  color:#25130f;

  border-color:transparent;

  box-shadow:
    0 14px 32px rgba(223,127,92,.16);
}


.btn-secondary{
  background:var(--cream);

  color:#1d1110;

  border-color:transparent;
}


.btn-ghost{
  background:rgba(255,255,255,.025);
}


.full{
  width:100%;
}


.menu-btn,
.mobile-menu{
  display:none;
}


.play-dot{
  font-size:12px;
}


/* =========================================================
   GENERAL
   ========================================================= */

.section-pad{
  max-width:1320px;

  margin:0 auto;

  padding:104px 34px;
}


.eyebrow{
  font-size:11px;

  letter-spacing:.23em;

  color:var(--accent);

  font-weight:700;

  margin-bottom:17px;
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
  min-height:720px;

  display:grid;

  grid-template-columns:
    1.02fr .98fr;

  align-items:center;

  gap:56px;

  padding-top:56px;
  padding-bottom:88px;
}


.hero h1,
.section-head h2,
.problem h2,
.starter h2,
.final-cta h2{
  font-family:var(--serif);

  font-weight:500;

  line-height:.96;

  margin:0;
}


.hero h1{
  font-size:clamp(
    64px,
    6.3vw,
    96px
  );

  max-width:760px;
}


.hero h1 em,
.starter h2 em{
  font-style:italic;

  color:var(--accent2);
}


.hero-copy>p{
  font-size:18px;

  line-height:1.7;

  color:var(--muted);

  max-width:640px;

  margin:
    27px 0
    31px;
}


.hero-actions{
  display:flex;

  gap:12px;

  flex-wrap:wrap;
}


.micro-note{
  font-family:var(--serif);

  font-style:italic;

  color:#d9b7a1;

  margin-top:30px;

  font-size:16px;
}


.hero-visual{
  position:relative;

  transform:scale(1.03);
}


.visual-frame{
  padding:10px;

  border:
    1px solid rgba(255,213,181,.27);

  border-radius:28px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.012)
    );

  box-shadow:
    0 36px 90px rgba(0,0,0,.34);
}


.visual-frame img{
  border-radius:20px;

  aspect-ratio:1.2/1;

  object-fit:cover;

  object-position:center;
}


.floating-chip{
  position:absolute;

  padding:9px 12px;

  border-radius:999px;

  background:#2a191a;

  border:
    1px solid rgba(255,217,181,.22);

  font-size:10px;

  letter-spacing:.12em;

  color:#f0d9c8;

  box-shadow:
    0 10px 24px rgba(0,0,0,.25);
}


.chip-one{
  top:10%;
  left:-3%;
}


.chip-two{
  right:-3%;
  bottom:12%;
}


/* =========================================================
   AUDIENCE
   ========================================================= */

.audience-band{
  max-width:1320px;

  margin:
    0 auto
    18px;

  padding:
    18px 34px;

  display:flex;

  justify-content:center;

  gap:22px;

  flex-wrap:wrap;

  color:#c9b8ad;

  font-size:11px;

  letter-spacing:.17em;

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);

  background:
    rgba(255,255,255,.012);
}


.audience-band i{
  font-style:normal;

  color:var(--accent);
}


/* =========================================================
   STATS
   ========================================================= */

.stats-strip{
  max-width:1320px;

  margin:0 auto;

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  padding:
    30px 34px;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,.008)
    );

  border-bottom:
    1px solid var(--line);
}


.stats-strip div{
  padding:0 28px;

  border-right:
    1px solid var(--line);
}


.stats-strip div:first-child{
  padding-left:0;
}


.stats-strip div:last-child{
  border-right:0;
}


.stats-strip strong{
  font-family:var(--serif);

  font-size:26px;

  font-weight:500;

  display:block;
}


.stats-strip span{
  font-size:10px;

  text-transform:uppercase;

  letter-spacing:.13em;

  color:#a9968c;
}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.section-head.split,
.split{
  display:grid;

  grid-template-columns:
    1.12fr .88fr;

  gap:76px;

  align-items:end;
}


.align-start{
  align-items:start;
}


.section-head h2,
.problem h2,
.services h2,
.process h2{
  font-size:
    clamp(
      46px,
      4.6vw,
      66px
    );
}


.section-head p,
.split>p{
  color:var(--muted);

  max-width:480px;

  font-size:16px;

  line-height:1.7;
}


/* =========================================================
   LEGACY WORK STYLES
   Kept in case we reuse them on View All Work later
   ========================================================= */

.filters{
  display:flex;

  gap:10px;

  flex-wrap:wrap;

  margin:
    38px 0
    26px;
}


.filters button{
  border:
    1px solid var(--line);

  background:transparent;

  color:var(--muted);

  padding:9px 17px;

  border-radius:999px;
}


.filters button.active{
  background:var(--cream);

  color:#171010;
}


/* =========================================================
   FEATURED WORK V6
   ========================================================= */

.portfolio-play-note{
  display:flex;

  align-items:center;

  gap:9px;

  margin-top:18px;

  color:#a9968c;

  font-size:12px;

  letter-spacing:.03em;
}


.portfolio-live-dot{
  width:7px;
  height:7px;

  border-radius:50%;

  background:var(--accent2);

  box-shadow:
    0 0 0 5px rgba(239,141,118,.08);
}


.portfolio-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:20px;

  margin-top:42px;
}


.portfolio-card{
  min-width:0;

  overflow:hidden;

  border:
    1px solid var(--line);

  border-radius:20px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.032),
      rgba(255,255,255,.012)
    );

  box-shadow:
    0 24px 60px rgba(0,0,0,.13),
    inset 0 1px 0 rgba(255,255,255,.025);

  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}


.portfolio-card:hover{
  transform:translateY(-5px);

  border-color:
    rgba(244,194,143,.27);

  box-shadow:
    0 30px 70px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.035);
}


.portfolio-media{
  position:relative;

  width:100%;

  aspect-ratio:16 / 9;

  overflow:hidden;

  background:#080506;

  border-bottom:
    1px solid var(--line);

  cursor:pointer;
}


.portfolio-video{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  background:#080506;

  transition:
    transform .35s ease,
    opacity .25s ease;
}


.portfolio-card:not(.is-playing):hover
.portfolio-video{
  transform:scale(1.025);
}


.portfolio-card.is-playing
.portfolio-video{
  object-fit:contain;

  transform:none;
}


.portfolio-media::after{
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      rgba(8,5,6,.05) 30%,
      rgba(8,5,6,.58) 100%
    );

  transition:
    opacity .25s ease;
}


.portfolio-card.is-playing
.portfolio-media::after{
  opacity:0;
}


.portfolio-kicker{
  position:absolute;

  z-index:4;

  top:16px;
  left:16px;

  padding:
    7px 11px;

  border:
    1px solid rgba(255,229,205,.17);

  border-radius:999px;

  background:
    rgba(12,8,9,.78);

  backdrop-filter:
    blur(9px);

  color:#f0d9c8;

  font-size:9px;

  font-weight:700;

  letter-spacing:.13em;

  transition:
    opacity .2s ease,
    transform .2s ease;
}


.portfolio-play{
  position:absolute;

  z-index:5;

  left:50%;
  top:50%;

  transform:
    translate(-50%,-50%);

  width:62px;
  height:62px;

  display:grid;

  place-items:center;

  padding:0;

  border-radius:50%;

  border:
    1px solid rgba(255,255,255,.62);

  background:
    rgba(17,11,13,.66);

  backdrop-filter:
    blur(10px);

  color:#fff;

  box-shadow:
    0 14px 40px rgba(0,0,0,.35);

  transition:
    transform .22s ease,
    background .22s ease,
    opacity .2s ease;
}


.portfolio-play span{
  display:block;

  margin-left:3px;

  font-size:17px;
}


.portfolio-play:hover{
  transform:
    translate(-50%,-50%)
    scale(1.08);

  background:
    linear-gradient(
      135deg,
      var(--accent3),
      var(--accent2)
    );

  color:#25130f;

  border-color:transparent;
}


.portfolio-card.is-playing
.portfolio-play,
.portfolio-card.is-playing
.portfolio-kicker{
  opacity:0;

  pointer-events:none;
}


.portfolio-copy{
  padding:
    25px 24px
    26px;
}


.portfolio-copy h3{
  margin:
    0 0 10px;

  font-family:var(--serif);

  font-size:30px;

  font-weight:500;

  line-height:1.08;

  color:var(--text);
}


.portfolio-copy p{
  margin:0;

  min-height:68px;

  color:var(--muted);

  font-size:14px;

  line-height:1.65;
}


.portfolio-tags{
  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:7px;

  margin-top:20px;
}


.portfolio-tags span{
  display:inline-flex;

  align-items:center;

  min-height:28px;

  padding:
    6px 10px;

  border-radius:999px;

  border:
    1px solid rgba(255,229,205,.11);

  background:
    rgba(255,255,255,.023);

  color:#d5c4ba;

  font-size:10px;

  letter-spacing:.035em;
}


.work-foot{
  display:flex;

  justify-content:space-between;

  gap:28px;

  align-items:center;

  border-top:
    1px solid var(--line);

  margin-top:26px;

  padding-top:22px;

  color:#a9968c;

  font-size:13px;
}


.work-foot a{
  color:var(--accent3);

  font-weight:600;
}


.portfolio-foot{
  margin-top:30px;
}


.portfolio-more{
  color:var(--accent3);

  font-weight:600;
}


.portfolio-card.is-playing{
  border-color:
    rgba(244,194,143,.27);

  box-shadow:
    0 32px 75px rgba(0,0,0,.28),
    0 0 0 1px rgba(244,194,143,.03);
}


/* =========================================================
   PROBLEM
   ========================================================= */

.problem{
  position:relative;

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);

  background:
    linear-gradient(
      90deg,
      #171011,
      #130d0e 56%,
      #151012
    );
}


.problem-media{
  position:absolute;

  inset:
    0 auto 0 0;

  width:31%;

  background:
    linear-gradient(
      90deg,
      rgba(18,12,13,.02),
      rgba(18,12,13,.88)
    ),
    url('assets/problem_visual.png')
    center/cover
    no-repeat;

  opacity:.58;
}


.section-pad-inner{
  max-width:1320px;

  margin:0 auto;

  padding:
    108px 34px
    108px 29%;
}


.problem-grid-v2{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:14px;

  margin-top:42px;
}


.mini-card{
  border-top:
    1px solid var(--line-strong);

  padding:
    25px 18px
    0 0;
}


.icon{
  color:var(--accent);

  font-size:12px;

  letter-spacing:.14em;

  font-weight:700;
}


.mini-card h3{
  font-size:18px;

  margin:
    15px 0
    8px;
}


.mini-card p{
  font-size:13px;

  line-height:1.55;

  color:var(--muted);

  margin:0;
}


.center-note{
  text-align:center;

  color:#9f8f86;

  font-size:10px;

  letter-spacing:.2em;

  margin-top:42px;
}


/* =========================================================
   PROCESS
   ========================================================= */

.process-track{
  display:grid;

  grid-template-columns:
    repeat(5,1fr);

  gap:0;

  margin-top:54px;

  position:relative;
}


.process-track:before{
  content:"";

  position:absolute;

  top:22px;

  left:5%;
  right:5%;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--accent),
      var(--line-strong),
      var(--accent),
      transparent
    );

  opacity:.5;
}


.process-step{
  position:relative;

  padding:
    58px 28px
    8px 0;
}


.process-step span{
  position:absolute;

  top:0;
  left:0;

  width:44px;
  height:44px;

  border-radius:50%;

  display:grid;

  place-items:center;

  border:
    1px solid var(--accent);

  background:#171011;

  color:var(--accent3);

  font-size:11px;

  z-index:2;
}


.process-step h3{
  font-family:var(--serif);

  font-size:24px;

  margin:
    0 0 10px;
}


.process-step p{
  color:var(--muted);

  font-size:13px;

  line-height:1.65;

  margin:0;

  max-width:200px;
}


/* =========================================================
   SERVICES
   ========================================================= */

.services{
  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);

  background:
    linear-gradient(
      180deg,
      #171011,
      #120c0d
    );
}


.services-grid-v2{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:18px;

  margin-top:42px;
}


.service-group{
  position:relative;

  border:
    1px solid var(--line);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.026),
      rgba(255,255,255,.012)
    );

  border-radius:18px;

  padding:30px;

  min-height:320px;
}


.service-index{
  font-size:10px;

  letter-spacing:.14em;

  color:var(--accent);

  margin-bottom:42px;
}


.service-group h3{
  font-family:var(--serif);

  font-size:30px;

  line-height:1.08;

  margin:
    0 0 12px;
}


.service-group>p{
  color:var(--muted);

  margin:
    0 0 22px;

  line-height:1.6;
}


.service-group ul{
  list-style:none;

  padding:0;

  margin:0;

  border-top:
    1px solid var(--line);
}


.service-group li{
  padding:
    10px 0;

  border-bottom:
    1px solid var(--line);

  font-size:13px;

  color:#decfc6;
}


.secondary-service{
  text-align:center;

  color:#baa69b;

  font-size:12px;

  margin-top:30px;
}


/* =========================================================
   STARTER OFFER
   ========================================================= */

.starter{
  min-height:470px;

  display:grid;

  grid-template-columns:
    .9fr 1.1fr .72fr;

  gap:34px;

  align-items:center;

  position:relative;

  max-width:1320px;

  margin:
    86px auto
    0;

  padding:
    78px 34px;
}


.starter:before{
  content:"";

  position:absolute;

  inset:0;

  border-radius:30px;

  background:
    linear-gradient(
      90deg,
      #1a1113 0%,
      #241718 60%,
      #140d0f 100%
    );

  border:
    1px solid var(--line);

  z-index:-2;
}


.starter-image{
  position:absolute;

  left:0;
  top:0;
  bottom:0;

  width:31%;

  background:
    linear-gradient(
      90deg,
      rgba(18,12,13,.06),
      rgba(18,12,13,.93)
    ),
    url('assets/offer_visual.png')
    center/cover
    no-repeat;

  border-radius:
    30px 0 0 30px;

  opacity:.63;

  z-index:-1;
}


.starter-copy{
  grid-column:2;
}


.starter h2{
  font-size:49px;
}


.starter-copy p{
  color:var(--muted);

  line-height:1.7;
}


.starter-proof{
  margin-top:22px;

  padding-top:17px;

  border-top:
    1px solid var(--line);

  color:#d5c1b5;

  font-size:13px;
}


.price-card{
  background:#120c0d;

  border:
    1px solid rgba(255,219,184,.19);

  border-radius:18px;

  padding:26px;

  box-shadow:
    0 22px 50px rgba(0,0,0,.2);
}


.price-label{
  font-size:10px;

  letter-spacing:.16em;

  color:var(--accent);

  font-weight:700;
}


.price{
  font-family:var(--serif);

  font-size:58px;

  line-height:1;

  margin:
    10px 0
    18px;
}


.price-card ul{
  list-style:none;

  padding:0;

  margin:
    0 0 22px;
}


.price-card li{
  color:#dccdc4;

  font-size:13px;

  margin:
    8px 0;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.final-cta{
  min-height:430px;

  display:flex;

  align-items:center;

  padding:
    84px
    max(
      34px,
      calc((100vw - 1252px)/2)
    );

  margin-top:86px;

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);

  position:relative;

  overflow:hidden;

  isolation:isolate;

  background:#110b0d;
}


.final-cta::before{
  content:"";

  position:absolute;

  z-index:-2;

  top:0;
  right:0;
  bottom:0;
  left:46%;

  background:
    url('assets/cta_visual.png')
    center right/cover
    no-repeat;

  opacity:.86;
}


.final-cta::after{
  content:"";

  position:absolute;

  z-index:-1;

  inset:0;

  background:
    linear-gradient(
      90deg,
      #110b0d 0%,
      rgba(17,11,13,.99) 34%,
      rgba(17,11,13,.93) 54%,
      rgba(17,11,13,.55) 76%,
      rgba(17,11,13,.18) 100%
    );
}


.final-inner{
  position:relative;

  z-index:2;

  max-width:720px;

  padding:
    26px 40px
    26px 0;
}


.final-cta h2{
  font-size:62px;
}


.final-cta p{
  color:#eadbd2;

  font-size:18px;

  max-width:600px;

  line-height:1.65;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer{
  max-width:1320px;

  margin:0 auto;

  padding:
    56px 34px
    36px;

  display:grid;

  grid-template-columns:
    1.2fr 1fr auto;

  gap:40px;

  align-items:start;

  color:#cdbdb3;

  border-top:
    1px solid var(--line);
}


footer p{
  color:#927f75;

  font-size:12px;

  max-width:330px;
}


.footer-links,
.socials{
  display:flex;

  gap:18px;

  flex-wrap:wrap;

  font-size:12px;
}


footer .brand-main{
  letter-spacing:.12em;
}


footer a{
  transition:
    color .2s ease;
}


footer a:hover{
  color:var(--accent3);
}


.copyright{
  grid-column:
    1/-1;

  border-top:
    1px solid var(--line);

  padding-top:24px;

  font-size:10px;

  color:#766963;
}


/* =========================================================
   REVEAL
   ========================================================= */

.reveal{
  opacity:0;

  transform:
    translateY(18px);

  transition:
    opacity .7s ease,
    transform .7s ease;
}


.reveal.is-visible{
  opacity:1;

  transform:none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1050px){

  .desktop-nav,
  .desktop-cta{
    display:none;
  }


  .menu-btn{
    display:block;

    border:0;

    background:transparent;

    color:var(--text);

    font-size:26px;

    justify-self:end;
  }


  .nav-wrap{
    grid-template-columns:
      1fr auto;
  }


  .mobile-menu{
    position:absolute;

    right:22px;

    top:68px;

    width:220px;

    flex-direction:column;

    padding:18px;

    background:#1c1314;

    border:
      1px solid var(--line);

    border-radius:14px;

    gap:14px;
  }


  .mobile-menu.open{
    display:flex;
  }


  .hero{
    grid-template-columns:1fr;

    min-height:auto;
  }


  .hero-visual{
    max-width:760px;

    transform:none;
  }


  .stats-strip{
    grid-template-columns:
      repeat(2,1fr);

    padding:
      26px 28px;
  }


  .stats-strip div:nth-child(2){
    border-right:0;
  }


  .stats-strip div{
    margin:
      8px 0;
  }


  .portfolio-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .portfolio-card:first-child{
    grid-column:
      1 / -1;
  }


  .portfolio-card:first-child
  .portfolio-media{
    aspect-ratio:
      16 / 8;
  }


  .portfolio-copy p{
    min-height:auto;
  }


  .problem-media{
    display:none;
  }


  .section-pad-inner{
    padding:
      90px 28px;
  }


  .problem-grid-v2{
    grid-template-columns:
      repeat(2,1fr);
  }


  .process-track{
    grid-template-columns:
      repeat(2,1fr);

    gap:18px;
  }


  .process-track:before{
    display:none;
  }


  .services-grid-v2{
    grid-template-columns:
      1fr 1fr;
  }


  .service-group:last-child{
    grid-column:
      1/-1;
  }


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


  .starter-image{
    display:none;
  }


  .starter-copy{
    grid-column:auto;
  }


  .section-head.split,
  .split{
    grid-template-columns:1fr;

    gap:18px;
  }


  .final-cta::before{
    left:38%;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:680px){

  .nav-wrap{
    height:70px;

    padding:
      0 18px;
  }


  .section-pad{
    padding:
      72px 18px;
  }


  .hero{
    padding-top:42px;
  }


  .hero h1{
    font-size:52px;
  }


  .hero-copy>p{
    font-size:16px;
  }


  .audience-band{
    padding:
      16px 18px;

    gap:11px;

    font-size:9px;
  }


  .stats-strip{
    grid-template-columns:1fr;
  }


  .stats-strip div{
    border-right:0;

    border-bottom:
      1px solid var(--line);

    padding:
      15px 0;
  }


  .portfolio-grid{
    grid-template-columns:1fr;

    gap:18px;

    margin-top:30px;
  }


  .portfolio-card:first-child{
    grid-column:auto;
  }


  .portfolio-card:first-child
  .portfolio-media,
  .portfolio-media{
    aspect-ratio:
      16 / 10;
  }


  .portfolio-copy{
    padding:
      20px 18px
      21px;
  }


  .portfolio-copy h3{
    font-size:27px;
  }


  .portfolio-copy p{
    font-size:13px;
  }


  .portfolio-play{
    width:54px;
    height:54px;
  }


  .portfolio-tags{
    margin-top:16px;
  }


  .portfolio-play-note{
    margin-top:12px;
  }


  .work-foot{
    align-items:flex-start;

    flex-direction:column;
  }


  .problem-grid-v2,
  .process-track,
  .services-grid-v2{
    grid-template-columns:1fr;
  }


  .service-group:last-child{
    grid-column:auto;
  }


  .process-step{
    padding-right:0;
  }


  .starter{
    grid-template-columns:1fr;

    padding:
      54px 18px;

    margin:
      62px 14px
      0;
  }


  .starter h2{
    font-size:40px;
  }


  .price-card{
    margin-top:10px;
  }


  .final-cta{
    padding:
      70px 18px;
  }


  .final-inner{
    padding-right:0;
  }


  .final-cta h2{
    font-size:44px;
  }


  footer{
    grid-template-columns:1fr;

    padding:
      48px 18px
      32px;
  }


  .footer-links{
    gap:14px;
  }


  .floating-chip{
    display:none;
  }


  .section-head h2,
  .problem h2,
  .services h2,
  .process h2{
    font-size:42px;
  }


  .final-cta::before{
    left:0;

    opacity:.26;

    background-position:
      68% center;
  }


  .final-cta::after{
    background:
      linear-gradient(
        90deg,
        rgba(17,11,13,.98),
        rgba(17,11,13,.89)
      );
  }

}


/* =========================================================
   DESKTOP POLISH
   ========================================================= */

@media (min-width:1051px){

  .nav-wrap,
  .section-pad,
  .audience-band,
  .stats-strip,
  footer{
    max-width:1400px;
  }


  .nav-wrap{
    height:90px;

    padding-left:38px;
    padding-right:38px;
  }


  .brand-main{
    font-size:20px;
  }


  .desktop-nav{
    gap:34px;

    font-size:14px;
  }


  .section-pad{
    padding-left:44px;
    padding-right:44px;
  }


  .hero{
    min-height:805px;

    grid-template-columns:
      1.06fr .94fr;

    gap:54px;

    padding-top:72px;
    padding-bottom:96px;
  }


  .hero h1{
    font-size:
      clamp(
        82px,
        6.55vw,
        108px
      );

    max-width:810px;
  }


  .hero-copy>p{
    font-size:19px;

    max-width:675px;

    line-height:1.72;

    margin-top:30px;
  }


  .hero-visual{
    transform:
      scale(1.115);

    transform-origin:
      center right;
  }


  .visual-frame{
    border-radius:30px;

    padding:11px;

    box-shadow:
      0 42px 110px rgba(0,0,0,.38);
  }


  .visual-frame img{
    border-radius:22px;
  }


  .hero-actions .btn{
    padding:
      14px 23px;

    font-size:14px;
  }


  .audience-band{
    padding:
      21px 44px;

    margin-bottom:0;

    background:
      rgba(255,255,255,.018);
  }


  .stats-strip{
    padding:
      36px 44px;

    border-top:
      1px solid var(--line);

    background:
      linear-gradient(
        90deg,
        rgba(245,194,143,.045),
        rgba(255,255,255,.012),
        rgba(245,194,143,.028)
      );
  }


  .stats-strip div{
    padding:
      2px 34px;
  }


  .stats-strip strong{
    font-size:30px;

    margin-bottom:4px;
  }


  .stats-strip span{
    font-size:11px;

    letter-spacing:.14em;
  }


  .work{
    padding-top:106px;

    padding-bottom:104px;
  }


  .section-head.split,
  .split{
    grid-template-columns:
      1.16fr .84fr;

    gap:88px;
  }


  .section-head h2,
  .problem h2,
  .services h2,
  .process h2{
    font-size:
      clamp(
        54px,
        4.65vw,
        72px
      );
  }


  .section-head p,
  .split>p{
    font-size:18px;

    line-height:1.75;
  }


  .portfolio-grid{
    gap:22px;

    margin-top:50px;
  }


  .portfolio-copy{
    padding:
      27px 26px
      28px;
  }


  .portfolio-copy h3{
    font-size:32px;
  }


  .portfolio-copy p{
    font-size:15px;

    line-height:1.7;
  }


  .portfolio-tags span{
    font-size:11px;
  }


  .problem-media{
    width:35%;

    opacity:.7;

    background:
      linear-gradient(
        90deg,
        rgba(18,12,13,.03),
        rgba(18,12,13,.76) 68%,
        rgba(18,12,13,.96)
      ),
      url('assets/problem_visual.png')
      center/cover
      no-repeat;
  }


  .section-pad-inner{
    max-width:1400px;

    padding:
      124px 44px
      124px 35%;
  }


  .problem-copy .split{
    grid-template-columns:
      1.08fr .92fr;

    gap:58px;
  }


  .problem-copy .split>p{
    font-size:18px;

    max-width:520px;
  }


  .problem-grid-v2{
    gap:24px;

    margin-top:50px;
  }


  .mini-card{
    padding-top:28px;
  }


  .mini-card h3{
    font-size:20px;

    margin-top:17px;
  }


  .mini-card p{
    font-size:14px;

    line-height:1.65;
  }


  .center-note{
    margin-top:50px;

    font-size:11px;
  }


  .process{
    padding-top:120px;

    padding-bottom:124px;
  }


  .process-track{
    margin-top:66px;
  }


  .process-step{
    padding:
      64px 34px
      12px 0;
  }


  .process-step span{
    width:48px;
    height:48px;
  }


  .process-step h3{
    font-size:27px;

    margin-bottom:12px;
  }


  .process-step p{
    font-size:16px;

    line-height:1.7;

    max-width:235px;
  }


  .services{
    padding-top:118px;

    padding-bottom:120px;
  }


  .services-grid-v2{
    gap:22px;

    margin-top:52px;
  }


  .service-group{
    min-height:365px;

    padding:36px;

    border-color:
      rgba(255,229,205,.16);

    background:
      linear-gradient(
        180deg,
        rgba(255,194,143,.045),
        rgba(255,255,255,.016)
      );

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      0 24px 55px rgba(0,0,0,.08);
  }


  .service-group:before{
    content:"";

    position:absolute;

    top:0;
    left:34px;
    right:34px;

    height:1px;

    background:
      linear-gradient(
        90deg,
        transparent,
        var(--accent),
        transparent
      );

    opacity:.52;
  }


  .service-index{
    margin-bottom:50px;

    font-size:11px;
  }


  .service-group h3{
    font-size:34px;
  }


  .service-group>p{
    font-size:15px;

    line-height:1.65;
  }


  .service-group li{
    font-size:14px;

    padding:
      12px 0;
  }


  .secondary-service{
    font-size:13px;

    margin-top:34px;
  }


  .starter{
    max-width:1400px;

    min-height:520px;

    grid-template-columns:
      .82fr 1.18fr .82fr;

    gap:42px;

    margin-top:100px;

    padding:
      88px 44px;
  }


  .starter-image{
    width:29%;
  }


  .starter h2{
    font-size:56px;
  }


  .starter-copy p{
    font-size:16px;

    max-width:620px;
  }


  .starter-proof{
    font-size:14px;
  }


  .price-card{
    padding:
      31px 30px
      30px;

    border-radius:20px;
  }


  .price{
    font-size:68px;
  }


  .price-card li{
    font-size:14px;

    margin:
      9px 0;
  }


  .final-cta{
    min-height:430px;

    margin-top:96px;

    padding-left:
      max(
        44px,
        calc((100vw - 1312px)/2)
      );

    padding-right:
      max(
        44px,
        calc((100vw - 1312px)/2)
      );

    background:#110b0d;
  }


  .final-cta::before{
    left:48%;

    opacity:.9;
  }


  .final-inner{
    max-width:700px;

    padding:
      12px 0;
  }


  .final-cta h2{
    font-size:66px;

    max-width:680px;
  }


  .final-cta p{
    font-size:18px;

    max-width:590px;
  }


  footer{
    padding:
      72px 44px
      46px;

    grid-template-columns:
      1.35fr 1fr auto;

    gap:64px;
  }


  footer .brand-main{
    font-size:23px;
  }


  footer p{
    font-size:14px;

    max-width:390px;
  }


  .footer-links,
  .socials{
    font-size:14px;

    gap:24px;

    padding-top:4px;
  }


  .copyright{
    font-size:11px;

    margin-top:6px;
  }

}

/* Accurate role disclosure on portfolio thumbnails */
.portfolio-media{position:relative;}
.portfolio-disclosure{
  position:absolute;
  right:0;
  bottom:0;
  z-index:4;
  width:44%;
  min-height:70px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-left:1px solid rgba(255,229,205,.14);
  border-top:1px solid rgba(255,229,205,.14);
  border-radius:14px 0 0 0;
  background:#140d0e;
  color:#d8c7bd;
  font-size:9px;
  line-height:1.35;
  text-align:center;
}
@media(max-width:680px){.portfolio-disclosure{width:56%;min-height:62px;font-size:8px;}}

/* =========================================================
   HOMEPAGE MEDIA FIT FIX · 2026-09-28
   Keeps explanatory hero art uncropped and gives the
   founder proof poster enough visual weight.
   ========================================================= */
.hero-process-frame{
  position:relative;
  width:100%;
  max-width:720px;
  margin-left:auto;
  padding:10px;
  overflow:hidden;
  border:1px solid rgba(255,229,205,.20);
  border-radius:26px;
  background:linear-gradient(145deg,rgba(244,194,143,.07),rgba(255,255,255,.012));
  box-shadow:0 34px 100px rgba(0,0,0,.28),0 0 0 1px rgba(244,194,143,.035) inset;
}
.hero-process-frame img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  object-position:center;
  border-radius:18px;
}
.proof-section{max-width:1220px;}
.proof-card{grid-template-columns:minmax(300px,340px) 1fr;gap:48px;padding:30px;}
.proof-media{width:100%;max-width:330px;margin:auto;}
.proof-media img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:contain;object-position:center;}
@media(max-width:1050px){.proof-card{grid-template-columns:1fr}.proof-media{max-width:310px}}
@media(max-width:680px){.hero-process-frame{border-radius:20px;padding:7px}.hero-process-frame img{border-radius:14px}.proof-media{max-width:280px}.proof-card{gap:26px;padding:22px}}


/* =========================================================
   FOUNDER PROOF INLINE REEL · 2026-09-28
   Keeps visitors on Lilyflare while they watch the proof.
   ========================================================= */
.proof-media{
  position:relative;
  width:100%;
  max-width:330px;
  margin:auto;
  overflow:hidden;
  aspect-ratio:9/16;
  border-radius:22px;
  background:#080506;
  box-shadow:0 24px 70px rgba(0,0,0,.24);
}

.proof-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:#000;
  border:1px solid rgba(255,229,205,.16);
  border-radius:22px;
  transition:transform .28s ease;
}

.proof-media:not(.is-playing):hover .proof-video{
  transform:scale(1.015);
}

.proof-play-button{
  position:absolute;
  z-index:5;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.62);
  background:rgba(17,11,13,.70);
  backdrop-filter:blur(10px);
  color:#fff;
  box-shadow:0 14px 40px rgba(0,0,0,.36);
  transition:transform .22s ease,background .22s ease,opacity .2s ease;
}

.proof-play-button span{
  display:block;
  margin-left:3px;
  font-size:18px;
}

.proof-play-button:hover{
  transform:translate(-50%,-50%) scale(1.08);
  background:linear-gradient(135deg,var(--accent3),var(--accent2));
  color:#25130f;
  border-color:transparent;
}

.proof-media.is-playing .proof-play-button,
.proof-media.is-playing .proof-stat{
  opacity:0;
  pointer-events:none;
}

.proof-stat{
  z-index:4;
  transition:opacity .2s ease;
}

.proof-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
}

.proof-original-link{
  color:#bda89d;
  font-size:11px;
  line-height:1.4;
  text-decoration:none;
  transition:color .2s ease;
}

.proof-original-link:hover{
  color:var(--accent3);
}

@media(max-width:680px){
  .proof-play-button{width:58px;height:58px}
  .proof-actions{align-items:flex-start;flex-direction:column}
}