:root{
      --bg:#f7f6f1;
      --ink:#101010;
      --muted:#6d6d69;
      --line:rgba(16,16,16,.12);
      --card:#ffffffcc;
      --radius:28px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:var(--bg);
      color:var(--ink);
      font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    button{font:inherit}

    /* NAV — keep original Leann site structure */
    .navbar-original{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      z-index:1000;
      padding:22px 4.8vw;
      display:flex;
      align-items:center;
      justify-content:space-between;
      background:rgba(247,246,241,.78);
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
      border-bottom:1px solid rgba(16,16,16,.06);
    }
    .brand-original{
      font-size:35px;
      line-height:1;
      font-weight:750;
      letter-spacing:-.04em;
    }
    .nav-desktop-original ul{
      display:flex;
      align-items:center;
      gap:60px;
      list-style:none;
      margin:0;
      padding:0;
    }
    .nav-desktop-original a{
      position:relative;
      display:block;
      font-size:15px;
      font-weight:700;
      white-space:nowrap;
      transition:opacity .2s ease;
    }
    .nav-desktop-original a:hover{
      opacity:.55;
    }
    .nav-desktop-original li.active a{
      font-weight:700;
    }
    .nav-desktop-original li.active a::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:-10px;
      height:2px;
      background:#111;
    }
    .nav-toggle-original{
      display:none;
      width:34px;
      height:30px;
      padding:4px 0;
      border:0;
      background:transparent;
      flex-direction:column;
      align-items:flex-end;
      justify-content:space-between;
      cursor:pointer;
    }
    .nav-toggle-original span{
      display:block;
      height:2px;
      background:#111;
    }
    .nav-toggle-original span:nth-child(1){width:30px}
    .nav-toggle-original span:nth-child(2){width:22px}
    .nav-toggle-original span:nth-child(3){width:30px}
    .mobile-menu-original{
      display:none;
      position:absolute;
      top:78px;
      left:4.8vw;
      right:4.8vw;
      padding:18px 20px;
      background:rgba(247,246,241,.97);
      border:1px solid rgba(0,0,0,.1);
      border-radius:18px;
      box-shadow:0 20px 50px rgba(0,0,0,.08);
    }
    .mobile-menu-original.open{display:block}
    .mobile-menu-original ul{
      list-style:none;
      margin:0;
      padding:0;
    }
    .mobile-menu-original li+li{margin-top:15px}
    .mobile-menu-original a{font-size:14px;font-weight:600}

    /* HERO */
    .hero{
      min-height:100svh;
      position:relative;
      display:grid;
      place-items:center;
      isolation:isolate;
      overflow:hidden;
      padding:110px 24px 48px;
    }
    .hero-intro{
      position:absolute;
      top:17%;
      z-index:8;
      text-align:center;
    }
    .hero-intro-no-photo{
      top:43%;
      left:50%;
      width:min(86vw,900px);
      transform:translate(-50%,-50%);
      padding:38px 34px 34px;
      border-radius:34px;
      background:rgba(247,246,241,.22);
      backdrop-filter:blur(2px);
      -webkit-backdrop-filter:blur(2px);
    }
    .hero-intro-no-photo .eyebrow{
      font-size:20px;
      margin-bottom:12px;
    }
    .hero-intro-no-photo .role{
      height:auto;
      min-height:54px;
      font-size:clamp(70px,4.6vw,80px);
      font-weight:900;
      letter-spacing:-.055em;
      line-height:1.02;
    }
    .hero-statement{
      margin:20px 0 7px;
      font-size:20px;
      font-weight:650;
      letter-spacing:-.02em;
    }
    .hero-disciplines{
      margin:0;
      font-size:11px;
      color:#7c786f;
      letter-spacing:.14em;
    }
    .eyebrow{
      font-size:16px;
      margin:0 0 10px;
      letter-spacing:-.02em;
    }
    .role{
      height:31px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:650;
      font-size:21px;
      letter-spacing:-.03em;
    }
    .role span{
      display:inline-block;
      animation:roleIn .55s cubic-bezier(.2,.8,.2,1);
    }
    @keyframes roleIn{
      from{opacity:0; transform:translateY(12px)}
      to{opacity:1; transform:none}
    }

    .marquee{
      position:absolute;
      z-index:1;
      left:0;
      top:54%;
      transform:translateY(-50%);
      white-space:nowrap;
      width:max-content;
      font-size:clamp(72px,13.4vw,205px);
      font-weight:760;
      letter-spacing:-.055em;
      line-height:.84;
      color:#fffef5;
      animation:marquee 38s linear infinite;
      user-select:none;
      pointer-events:none;
    }
    .marquee span{padding-right:5vw}
    @keyframes marquee{
      from{transform:translate3d(0,-50%,0)}
      to{transform:translate3d(-50%,-50%,0)}
    }

    .portrait{
      width:min(31vw,330px);
      aspect-ratio:.76;
      position:relative;
      z-index:5;
      border-radius:42px;
      overflow:hidden;
      box-shadow:0 34px 80px rgba(0,0,0,.18);
      transform:rotate(-2deg);
      background:
        radial-gradient(circle at 50% 22%, #f3d5c4 0 15%, transparent 15.4%),
        radial-gradient(ellipse at 50% 32%, #26211f 0 21%, transparent 21.5%),
        radial-gradient(ellipse at 50% 64%, #dfd9d0 0 35%, transparent 35.5%),
        linear-gradient(150deg,#e6d5ca 0 30%,#cad6d0 65%,#9dad9e);
      border:1px solid rgba(255,255,255,.7);
    }
    .portrait::after{
      content:"LEANN";
      position:absolute;
      left:50%;
      bottom:18px;
      transform:translateX(-50%);
      font-size:11px;
      letter-spacing:.3em;
      color:white;
      text-shadow:0 1px 7px rgba(0,0,0,.32);
    }
    .portrait-label{
      position:absolute;
      z-index:8;
      bottom:15.5%;
      left:50%;
      transform:translateX(-50%);
      text-align:center;
      white-space:nowrap;
    }
    .portrait-label strong{
      display:block;
      font-size:16px;
      margin-bottom:6px;
    }
    .portrait-label span{
      color:var(--muted);
      font-size:12px;
      letter-spacing:.06em;
      text-transform:uppercase;
    }

    .hero-cta{
      position:absolute;
      z-index:12;
      bottom:8%;
      left:50%;
      transform:translateX(-50%);
      display:flex;
      gap:10px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      min-height:46px;
      padding:0 18px;
      border-radius:999px;
      border:1px solid var(--ink);
      font-size:16px;
      transition:.25s ease;
    }
    .btn.primary{background:#111;color:#fff}
    .btn:hover{transform:translateY(-2px)}

    /* FLOATING OBJECTS */
    .float{
      position:absolute;
      z-index:4;
      filter:drop-shadow(0 18px 18px rgba(0,0,0,.11));
      animation:float 5.8s ease-in-out infinite alternate;
      will-change:transform;
    }
    @keyframes float{
      from{transform:translate3d(-14px,-28px,0) rotate(-9deg)}
      to{transform:translate3d(16px,30px,0) rotate(10deg)}
    }
    .orb{
      width:78px;height:78px;border-radius:50%;
      background:radial-gradient(
        circle at 30% 25%,
        #f8f7f3 0 10%,
        #c9cce0 34%,
        #9298bf 66%,
        #6d718e 100%
      );
      box-shadow:0 16px 24px rgba(92,98,130,.14);
    }
    .cube{
      width:82px;height:82px;border-radius:20px;
      background:linear-gradient(145deg,#ffc9a7,#ff8f70 48%,#b44e56);
      transform:rotate(18deg);
    }
    .glass{
      width:92px;height:68px;border-radius:24px;
      border:1px solid rgba(255,255,255,.92);
      background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(196,222,214,.5));
      backdrop-filter:blur(10px);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.7),
        0 18px 22px rgba(118,141,132,.16);
      opacity:.98;
    }
    .star{
      width:74px;height:74px;
      background:linear-gradient(145deg,#ffe07a,#f09d3e);
      clip-path:polygon(50% 0,62% 35%,100% 50%,62% 65%,50% 100%,38% 65%,0 50%,38% 35%);
    }
    .tag3d{
      width:105px;height:52px;border-radius:18px;
      display:grid;place-items:center;
      font-size:13px;font-weight:700;
      background:linear-gradient(145deg,#d9f1d0,#8ebb86);
      border:1px solid rgba(255,255,255,.55);
    }
    .ring{
      width:66px;
      height:66px;
      border-radius:50%;
      border:14px solid rgba(238, 207, 121, 0.78);
      background:rgba(255,255,255,.18);
      backdrop-filter:blur(4px);
    }
    .pill{
      width:92px;
      height:38px;
      border-radius:999px;
      background:linear-gradient(145deg,#d8d1e6,#b8afca);
      border:1px solid rgba(255,255,255,.6);
      transform:rotate(-16deg);
    }
    .soft-diamond{
      width:58px;
      height:58px;
      border-radius:18px;
      background:linear-gradient(145deg,#f2dfc6,#d7c3a6);
      transform:rotate(45deg);
      opacity:.86;
    }
    .mini-orb{
      width:50px;
      height:50px;
      border-radius:50%;
      background:radial-gradient(circle at 30% 25%,#fff 0 14%,#e5eadf 34%,#bcc8b6 64%,#8ea08a 100%);
      box-shadow:0 14px 20px rgba(126,145,123,.18);
      opacity:1;
    }

    /* clustered around the hero copy instead of the viewport edges */
    .f1{left:16%;top:28%;animation-delay:-1s;animation-duration:6.8s}
    .f2{right:15%;top:28%;animation-delay:-2s;animation-duration:7.6s}
    .f3{left:18%;bottom:20%;animation-delay:-3.3s;animation-duration:8.4s}
    .f4{right:17%;bottom:21%;animation-delay:-.8s;animation-duration:7.1s}
    .f5{left:30%;bottom:12%;animation-delay:-4s;animation-duration:7.9s}
    .f6{left:25%;top:17%;animation-delay:-2.4s;animation-duration:8.7s;opacity:.76}
    .f7{right:27%;top:16%;animation-delay:-1.6s;animation-duration:7.4s;opacity:.82}
    .f8{right:29%;bottom:13%;animation-delay:-3.9s;animation-duration:8.2s;opacity:.72}
    .f9{left:13%;bottom:34%;animation-delay:-4.7s;animation-duration:7.7s;opacity:.80}


    /* COMMON SECTIONS */
    section.content{padding:120px 6vw}
    .section-kicker{
      font-size:12px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--muted);
      margin-bottom:20px;
    }
    .section-title{
      margin:0;
      font-size:clamp(42px,7vw,100px);
      line-height:.93;
      letter-spacing:-.065em;
      max-width:1080px;
    }


    /* ABOUT */
    .about-new{
      position:relative;
      background:
        radial-gradient(circle at 12% 18%,
          rgba(211,222,215,.58) 0%,
          rgba(211,222,215,.24) 24%,
          transparent 48%),
        radial-gradient(circle at 88% 78%,
          rgba(215,211,227,.50) 0%,
          rgba(215,211,227,.20) 25%,
          transparent 50%),
        linear-gradient(135deg,#f2f0ea 0%,#eef1ee 52%,#eff0f4 100%);
      border-top:1px solid rgba(16,16,16,.055);
      border-bottom:1px solid rgba(16,16,16,.045);
    }
    .about-grid{
      display:grid;
      grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);
      gap:clamp(42px,7vw,110px);
      align-items:center;
      margin-top:34px;
    }
    .about-visual{
      position:relative;
      min-height:520px;
      border-radius:34px;
      overflow:hidden;
      background:
        radial-gradient(circle at 28% 25%,rgba(255,255,255,.85),transparent 24%),
        linear-gradient(145deg,#e8dfd2 0%,#cbd8d2 48%,#b9b7d1 100%);
      box-shadow:0 28px 70px rgba(0,0,0,.08);
    }
    .about-visual::before{
      content:"";
      position:absolute;
      width:62%;
      aspect-ratio:1;
      border-radius:50%;
      left:19%;
      top:13%;
      background:rgba(255,255,255,.34);
      border:1px solid rgba(255,255,255,.62);
      box-shadow:inset 0 0 0 22px rgba(255,255,255,.08);
    }
    .about-visual::after{
      content:"";
      position:absolute;
      width:58%;
      height:44%;
      left:21%;
      bottom:9%;
      border-radius:44% 44% 28px 28px;
      background:rgba(22,22,22,.72);
    }
    .about-visual-inner{
      position:absolute;
      left:28px;
      right:28px;
      bottom:26px;
      z-index:3;
      color:white;
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:20px;
    }
    .about-visual-inner span{
      font-size:12px;
      font-weight:750;
      letter-spacing:.18em;
    }
    .about-visual-inner small{
      font-size:10px;
      letter-spacing:.06em;
      opacity:.78;
      text-align:right;
    }
    .about-title{
      margin:0 0 28px;
      font-size:clamp(38px,5vw,70px);
      line-height:.98;
      letter-spacing:-.06em;
    }
    .about-text{
      max-width:720px;
      color:#565652;
      font-size:20px;
      line-height:1.85;
    }
    .about-text p{
      margin:0 0 18px;
    }
    .about-text strong{
      color:#111;
      font-weight:700;
    }


    /* WHAT'S NEW */
    .whats-new{
      background:#f0ede6;
    }
    .news-feature{
      margin-top:58px;
      display:grid;
      grid-template-columns:1.12fr .88fr;
      min-height:540px;
      border-radius:34px;
      overflow:hidden;
      background:#fff;
      border:1px solid rgba(16,16,16,.08);
      box-shadow:0 30px 80px rgba(0,0,0,.06);
    }
    .news-visual{
      position:relative;
      overflow:hidden;
      min-height:540px;
      background:
        radial-gradient(circle at 22% 22%,rgba(255,255,255,.85),transparent 23%),
        radial-gradient(circle at 84% 72%,rgba(255,226,207,.7),transparent 25%),
        linear-gradient(145deg,#d8e0dd 0%,#e9dfd0 48%,#c7c3db 100%);
    }
    .phone{
      position:absolute;
      width:220px;
      height:440px;
      border-radius:42px;
      padding:12px;
      background:#131313;
      box-shadow:0 28px 54px rgba(0,0,0,.24);
    }
    .phone::before{
      content:"";
      position:absolute;
      top:10px;
      left:50%;
      transform:translateX(-50%);
      width:76px;
      height:20px;
      border-radius:999px;
      background:#090909;
      z-index:2;
    }
    .phone-front{
      left:49%;
      top:12%;
      transform:rotate(8deg);
      z-index:3;
    }
    .phone-back{
      left:19%;
      top:20%;
      transform:rotate(-9deg) scale(.93);
      z-index:2;
    }
    .phone-ui{
      height:100%;
      border-radius:32px;
      padding:50px 22px 24px;
      background:
        linear-gradient(180deg,rgba(255,255,255,.88),rgba(247,245,240,.96));
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
      color:#151515;
    }
    .phone-dot{
      width:48px;
      height:48px;
      border-radius:50%;
      margin-bottom:24px;
      background:linear-gradient(145deg,#c9d8d0,#e0bea8);
      box-shadow:inset 0 0 0 10px rgba(255,255,255,.4);
    }
    .phone-score{
      font-size:64px;
      line-height:1;
      font-weight:780;
      letter-spacing:-.07em;
    }
    .phone-title{
      font-size:30px;
      font-weight:760;
      letter-spacing:-.05em;
      margin-bottom:26px;
    }
    .phone-ui small{
      margin-top:12px;
      max-width:120px;
      line-height:1.45;
      color:#777;
    }
    .phone-bars{
      display:flex;
      align-items:flex-end;
      gap:7px;
      height:70px;
    }
    .phone-bars i{
      display:block;
      width:16px;
      border-radius:999px;
      background:#c7cec8;
    }
    .phone-bars i:nth-child(1){height:28px}
    .phone-bars i:nth-child(2){height:48px}
    .phone-bars i:nth-child(3){height:64px}
    .phone-bars i:nth-child(4){height:39px}
    .news-orbit{
      position:absolute;
      display:grid;
      place-items:center;
      width:60px;
      height:60px;
      border-radius:50%;
      background:rgba(255,255,255,.72);
      border:1px solid rgba(255,255,255,.9);
      backdrop-filter:blur(9px);
      box-shadow:0 12px 30px rgba(0,0,0,.08);
      font-size:11px;
      font-weight:750;
      letter-spacing:.08em;
    }
    .orbit-one{left:9%;top:16%}
    .orbit-two{right:8%;top:18%}
    .orbit-three{right:12%;bottom:12%}

    .news-copy{
      padding:56px 50px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:40px;
    }
    .news-meta{
      font-size:14px;
      font-weight:720;
      letter-spacing:.13em;
      color:#8a877f;
      text-transform:uppercase;
    }
    .news-meta span{padding:0 7px}
    .news-copy h3{
      margin:18px 0 20px;
      font-size:clamp(36px,4.4vw,64px);
      line-height:.98;
      letter-spacing:-.06em;
    }
    .news-copy p{
      margin:0;
      max-width:54ch;
      color:#64615c;
      line-height:1.72;
      font-size:18px;
    }
    .store-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .store-badge{
      min-width:150px;
      padding:10px 16px 11px;
      border-radius:14px;
      background:#111;
      color:#fff;
      display:flex;
      flex-direction:column;
      line-height:1.15;
      transition:.2s ease;
    }
    .store-badge:hover{transform:translateY(-2px)}
    .store-badge small{
      font-size:12px;
      opacity:.7;
      margin-bottom:3px;
    }
    .store-badge strong{
      font-size:17px;
      font-weight:650;
    }

    /* MAKING IDEAS WORK */
    .build{
      background:#111;
      color:#f8f7f2;
    }
    .build .section-kicker{color:#aaa}
    .build-grid{
      margin-top:72px;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:16px;
    }
    .build-grid.four{
      grid-template-columns:repeat(4,1fr);
    }
    .build-grid.four .build-card{
      min-height:300px;
      padding:28px;
    }
    .build-grid.four .build-card h3{
      font-size:30px;
    }
    .build-card{
      padding:30px;
      min-height:300px;
      border:1px solid rgba(255,255,255,.13);
      border-radius:26px;
      background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      transition:.3s ease;
    }
    .build-card:hover{transform:translateY(-7px)}
    .build-card .num{color:#8b8b8b;font-size:12px}
    .build-card h3{
      margin:0 0 14px;
      font-size:28px;
      letter-spacing:-.04em;
    }
    .build-card p{
      margin:0;
      color:#b8b8b8;
      line-height:1.6;
      max-width:31ch;
      font-size:18px;
    }

    /* FEATURED WORK */
    .work-grid{
      margin-top:64px;
      display:grid;
      gap:22px;
    }
    .work-card{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      min-height:430px;
      border-radius:32px;
      overflow:hidden;
      border:1px solid var(--line);
      background:#fff;
    }
    .work-copy{
      padding:46px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .tag-row{display:flex;gap:7px;flex-wrap:wrap}
    .tag{
      padding:7px 10px;
      font-size:11px;
      border:1px solid rgba(0,0,0,.12);
      border-radius:999px;
    }
    .work-card h3{
      font-size:clamp(36px,4vw,62px);
      letter-spacing:-.06em;
      line-height:.98;
      margin:22px 0;
      max-width:760px;
    }
    .work-copy p{
      max-width:58ch;
      color:var(--muted);
      line-height:1.65;
      font-size:14px;
    }
    .work-visual{
      position:relative;
      min-height:340px;
      background:
        radial-gradient(circle at 20% 25%,rgba(255,255,255,.8) 0 7%,transparent 7.5%),
        linear-gradient(140deg,#e3e4f9,#cad9d2 50%,#f0ccb9);
      overflow:hidden;
    }
    .work-visual::before,
    .work-visual::after{
      content:"";
      position:absolute;
      border-radius:32px;
      border:1px solid rgba(255,255,255,.65);
      box-shadow:0 18px 45px rgba(0,0,0,.09);
    }
    .work-visual::before{
      width:48%;height:66%;left:15%;top:16%;
      background:rgba(255,255,255,.64);
      transform:rotate(-7deg);
    }
    .work-visual::after{
      width:41%;height:56%;right:10%;bottom:12%;
      background:rgba(18,18,18,.82);
      transform:rotate(6deg);
    }
    .work-card:nth-child(2) .work-visual{
      background:linear-gradient(140deg,#f7d7c6,#d2dbe7 58%,#c6d9bc);
    }
    .work-card:nth-child(3) .work-visual{
      background:linear-gradient(140deg,#d7eadb,#f3e0b9 58%,#d8d4ee);
    }

    /* STORIES */
    .stories{
      background:#ecebe5;
    }
    .bento{
      margin-top:64px;
      display:grid;
      grid-template-columns:repeat(12,1fr);
      gap:16px;
    }
    .story{
      min-height:250px;
      padding:26px;
      border-radius:28px;
      background:#fff;
      border:1px solid rgba(0,0,0,.08);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      transition:.28s ease;
    }
    .story:hover{transform:translateY(-5px)}
    .story-gradient-a,
    .story-gradient-b{
      position:relative;
      overflow:hidden;
      isolation:isolate;
      background:#f5f1ea;
    }
    .story-gradient-a::before,
    .story-gradient-b::before{
      content:"";
      position:absolute;
      inset:-12%;
      z-index:-2;
      pointer-events:none;
    }
    .story-gradient-a::after,
    .story-gradient-b::after{
      content:"";
      position:absolute;
      inset:0;
      z-index:-1;
      pointer-events:none;
      background:linear-gradient(
        135deg,
        rgba(255,255,255,.42),
        rgba(255,255,255,.08) 48%,
        rgba(255,255,255,.22)
      );
    }

    /* Warm beige + muted lilac + soft blue-green wash */
    .story-gradient-a::before{
      background:
        radial-gradient(circle at 12% 16%,
          rgba(242,219,197,.92) 0 18%,
          rgba(242,219,197,.42) 34%,
          transparent 55%),
        radial-gradient(circle at 86% 24%,
          rgba(205,210,231,.78) 0 17%,
          rgba(205,210,231,.34) 35%,
          transparent 58%),
        radial-gradient(circle at 78% 88%,
          rgba(198,220,210,.72) 0 18%,
          rgba(198,220,210,.28) 38%,
          transparent 60%),
        linear-gradient(145deg,#f6f1e9,#eee9e3 58%,#e5e7ec);
      filter:blur(10px);
      transform:scale(1.05);
    }

    /* Pale sage + powder blue + blush wash */
    .story-gradient-b::before{
      background:
        radial-gradient(circle at 18% 78%,
          rgba(205,222,207,.88) 0 20%,
          rgba(205,222,207,.32) 38%,
          transparent 58%),
        radial-gradient(circle at 82% 18%,
          rgba(208,217,235,.84) 0 18%,
          rgba(208,217,235,.30) 36%,
          transparent 58%),
        radial-gradient(circle at 68% 86%,
          rgba(238,211,200,.66) 0 16%,
          rgba(238,211,200,.24) 34%,
          transparent 56%),
        linear-gradient(145deg,#f3f0e9,#e9efec 52%,#ece8ec);
      filter:blur(9px);
      transform:scale(1.05);
    }

    .story-gradient-a:hover::before,
    .story-gradient-b:hover::before{
      transform:scale(1.09);
      transition:transform .6s ease;
    }

    .story.big{grid-column:span 7;min-height:390px}
    .story.tall{grid-column:span 5;min-height:390px;background:#171717;color:#fff}
    .story.small{grid-column:span 4}
    .story h4{
      margin:0;
      max-width:16ch;
      font-size:32px;
      line-height:1.08;
      letter-spacing:-.045em;
    }
    .story small{color:#777}
    .story.tall small{color:#aaa}


    /* STORIES — restore original homepage ending */
    .stories-all-wrap{
      display:flex;
      justify-content:center;
      margin-top:56px;
    }
    .stories-all-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:46px;
      padding:0 18px;
      border:1px solid rgba(91, 91, 91, 0.42);
      border-radius:10px;
      color:#353535;
      background:rgba(255,255,255,.42);
      font-size:12px;
      font-weight:750;
      letter-spacing:.06em;
      text-transform:uppercase;
      transition:transform .22s ease, background .22s ease, border-color .22s ease;
    }
    .stories-all-btn:hover{
      transform:translateY(-2px);
      background:#fff;
      border-color:#353535;
    }

    .journey-contact{
      min-height:390px;
      padding:94px 24px 104px;
      display:grid;
      place-items:center;
      text-align:center;
      background:#fff;
      border-top:1px solid rgba(16,16,16,.045);
    }
    .journey-contact-inner{
      width:min(720px,86vw);
      color:#62615e;
      font-family:var(--font-body, Inter, "Helvetica Neue", Arial, sans-serif);
      font-size:20px;
      line-height:1.72;
    }
    .journey-contact-inner p{
      margin:0 auto 25px;
    }
    .journey-contact-inner p:last-child{
      margin-bottom:0;
    }

    /* JOURNEY */
    .journey-wrap{
      margin-top:76px;
      display:grid;
      grid-template-columns:1fr 1.4fr;
      gap:60px;
      align-items:start;
    }
    .journey-quote{
      position:sticky;
      top:120px;
      font-size:28px;
      line-height:1.25;
      letter-spacing:-.04em;
      max-width:14ch;
    }
    .timeline{
      border-top:1px solid var(--line);
    }
    .step{
      display:grid;
      grid-template-columns:120px 1fr;
      gap:26px;
      padding:30px 0;
      border-bottom:1px solid var(--line);
    }
    .step .label{
      font-size:12px;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:.08em;
    }
    .step h4{
      margin:0 0 7px;
      font-size:25px;
      letter-spacing:-.04em;
    }
    .step p{margin:0;color:var(--muted);line-height:1.6}

    /* CONTACT */
    .contact{
      min-height:78vh;
      display:grid;
      place-items:center;
      text-align:center;
      background:#111;
      color:#fff;
      position:relative;
      overflow:hidden;
    }
    .contact h2{
      font-size:clamp(58px,10vw,150px);
      letter-spacing:-.08em;
      line-height:.84;
      margin:0 0 34px;
    }
    .contact p{color:#aaa;margin:0 0 30px}
    .contact .btn{border-color:#fff}

    /* cursor halo */
    .cursor-glow{
      position:fixed;
      width:360px;
      height:360px;
      border-radius:50%;
      pointer-events:none;
      z-index:0;
      background:
        radial-gradient(
          circle,
          rgba(161,177,214,.24) 0%,
          rgba(191,202,224,.18) 28%,
          rgba(220,216,198,.10) 52%,
          transparent 74%
        );
      filter:blur(8px);
      transform:translate(-50%,-50%);
      transition:opacity .18s;
    }

    
    /* FINAL CTA + FOOTER */
    .contact-final{
      min-height:76vh;
      display:grid;
      place-items:center;
      text-align:center;
      background:#111;
      color:#fff;
      position:relative;
      overflow:hidden;
      padding:100px 24px;
    }
    .contact-final h2{
      font-size:clamp(58px,10vw,150px);
      letter-spacing:-.08em;
      line-height:.84;
      margin:0 0 34px;
    }
    .contact-final p{
      color:#aaa;
      margin:0 0 30px;
      font-size:16px;
    }
    .contact-final .btn{
      border-color:#fff;
      color:#fff;
      background:transparent;
    }
    .contact-final .btn:hover{
      background:#fff;
      color:#111;
    }

    .site-footer-final{
      background:#1a1a1a;
      color:#fff;
      padding:56px 24px 30px;
    }
    .site-footer-inner{
      width:min(1100px,86vw);
      margin:0 auto;
    }
    .site-footer-brand h3{
      margin:0 0 10px;
      font-family:var(--font-display, Manrope, "Helvetica Neue", Arial, sans-serif);
      font-size:25px;
      letter-spacing:-.045em;
    }
    .site-footer-brand p{
      margin:0;
      max-width:420px;
      color:#c8c8c8;
      font-size:14px;
      line-height:1.55;
    }
    .site-footer-rule{
      height:1px;
      background:rgba(255,255,255,.12);
      margin:36px 0 20px;
    }
    .site-footer-copy{
      margin:0;
      color:#9e9e9e;
      font-size:11px;
    }

@media(max-width:900px){
      .nav-desktop-original{display:none}
      .nav-toggle-original{display:flex}
      .hero-intro{top:18%}
      .hero-intro-no-photo{top:43%;width:min(90vw,680px)}
      .portrait{width:min(58vw,310px)}
      .portrait-label{bottom:14%}
      .marquee{font-size:26vw}
      .f1{left:-3%}.f2{right:-3%}.f3{left:4%}.f4{right:3%}
      .f5,.f7,.f8{display:none}
      .f6{left:18%;top:22%}
      .f9{left:2%;bottom:31%}
      .about-grid{grid-template-columns:1fr}
      .about-visual{min-height:440px;max-width:620px}
      .news-feature{grid-template-columns:1fr}
      .news-visual{min-height:480px}
      .news-copy{padding:42px}
      .build-grid,
      .build-grid.four{grid-template-columns:1fr 1fr}
      .work-card{grid-template-columns:1fr}
      .work-visual{min-height:280px;order:-1}
      .story.big,.story.tall,.story.small{grid-column:span 12}
      .journey-wrap{grid-template-columns:1fr}
      .journey-quote{position:static;max-width:22ch}
    }
    @media(max-width:560px){
      section.content{padding:88px 22px}
      .hero{padding-inline:14px}
      .navbar-original{padding:20px 22px}
      .brand-original{font-size:20px}

      /* Full-width mobile dropdown — no floating-card margins */
      .mobile-menu-original{
        position:fixed;
        top:70px;
        left:0;
        right:0;
        width:100vw;
        padding:0 22px 18px;
        background:rgba(247,246,241,.985);
        border:0;
        border-top:1px solid rgba(16,16,16,.07);
        border-bottom:1px solid rgba(16,16,16,.07);
        border-radius:0;
        box-shadow:none;
      }
      .mobile-menu-original ul{
        width:100%;
      }
      .mobile-menu-original li{
        margin:0 !important;
        border-bottom:1px solid rgba(16,16,16,.08);
      }
      .mobile-menu-original li:last-child{
        border-bottom:0;
      }
      .mobile-menu-original a{
        display:block;
        width:100%;
        padding:14px 0;
        font-size:14px;
        font-weight:650;
      }

      .hero-intro{top:17%}
      .hero-intro-no-photo{
        top:42%;
        width:92vw;
        padding:26px 18px 24px;
      }
      .hero-intro-no-photo .role{
        font-size:clamp(55px,9vw,65px);
      }
      .hero-statement{
        font-size:16px;
      }
      .eyebrow{font-size:14px}
      .role{font-size:18px}
      .portrait{width:64vw;border-radius:34px}
      .portrait-label{bottom:13%}
      .hero-cta{bottom:4.5%;width:100%;justify-content:center}
      .float{scale:.78}
      .f1{top:30%}.f2{top:29%}.f3{bottom:20%}.f4{bottom:21%}
      .about-grid{gap:60px}
      .about-visual{min-height:390px}
      .news-feature{margin-top:38px;border-radius:24px}
      .news-visual{min-height:390px}
      .phone{width:165px;height:330px;border-radius:32px}
      .phone-ui{border-radius:24px;padding:42px 16px 18px}
      .phone-front{left:47%;top:10%}
      .phone-back{left:15%;top:17%}
      .phone-score{font-size:48px}
      .news-copy{padding:30px}
      .store-row{flex-direction:column}
      .store-badge{width:100%}
      .build-grid,
      .build-grid.four{grid-template-columns:1fr}
      .work-copy{padding:30px}
      .step{grid-template-columns:1fr;gap:8px}
      .stories-all-wrap{margin-top:42px}
      .stories-all-btn{width:auto;max-width:100%}
      .journey-contact{
        min-height:360px;
        padding:72px 24px 82px;
      }
      .journey-contact-inner{
        width:100%;
        font-size:18px;
        line-height:1.75;
      }
      .contact-final{
        min-height:70vh;
        padding:84px 20px;
      }
      .contact-final p{
        font-size:16px;
      }
      .contact-final h2{
        font-size:clamp(50px,15vw,76px);
        line-height:.88;
      }
      .site-footer-final{
        padding:46px 22px 26px;
      }
      .site-footer-inner{
        width:100%;
      }
    }
    @media(prefers-reduced-motion:reduce){
      *{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
    }


/* Original video blocks restored from the original HTML reference set */
.original-video-section{
  padding:90px 24px;
  background:#f7f5ef;
}
.original-video-inner{
  width:min(1120px,88vw);
  margin:0 auto;
}
.original-video-kicker{
  margin:0 0 12px;
  color:#8b857d;
  font-size:10px;
  font-weight:750;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.original-video-inner h2{
  margin:0 0 34px;
  color:#11110f;
  font-family:var(--display, "Manrope","Inter",sans-serif);
  font-size:clamp(38px,5vw,62px);
  line-height:1;
  letter-spacing:-.055em;
}
.original-video-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:26px;
  background:#111;
  box-shadow:0 22px 58px rgba(36,32,26,.08);
  margin-top:18px;
}
.original-video-frame iframe{
  width:100%;
  height:100%;
  border:0;
}
.original-reference-preserve{
  display:none !important;
}
@media(max-width:680px){
  .original-video-section{padding:70px 22px}
  .original-video-inner{width:100%}
  .original-video-frame{border-radius:20px}
}


/* =========================================================
   HOME — REAL PHOTO SLOTS
   Replace these files only:
   img/home-about-photo.jpg
   img/home-inewme-photo.jpg
   ========================================================= */

/* About Me photo */
.about-photo-slot{
  position:relative;
}
.about-photo-slot .about-photo{
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 35%;
  border-radius:inherit;
}
.about-photo-slot:not(.photo-fallback)::before,
.about-photo-slot:not(.photo-fallback)::after{
  opacity:0;
}
.about-photo-slot:not(.photo-fallback) .about-visual-inner{
  z-index:3;
  padding:90px 0 0;
  background:linear-gradient(
    180deg,
    transparent 0%,
    transparent 58%,
    rgba(0,0,0,.34) 100%
  );
  left:0;
  right:0;
  bottom:0;
  padding:0 28px 26px;
  min-height:130px;
}

/* inewme / What's New photo */
.news-photo-slot{
  position:relative;
}
.news-photo-slot .news-photo{
  position:absolute;
  inset:0;
  z-index:10;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.news-photo-slot:not(.photo-fallback) .phone,
.news-photo-slot:not(.photo-fallback) .news-orbit{
  opacity:0;
  pointer-events:none;
}

/* Let the supplied photo determine the visual — no extra crop mask */
.news-feature{
  align-items:stretch;
}
.news-photo-slot .news-photo{
  border-radius:0;
}

/* Subtle hover only; keeps the page feeling photographic, not like a card mockup */
.about-photo-slot .about-photo,
.news-photo-slot .news-photo{
  transition:transform .45s ease, filter .45s ease;
}
.about-photo-slot:hover .about-photo,
.news-photo-slot:hover .news-photo{
  transform:scale(1.012);
}

/* Tablet / mobile */
@media(max-width:900px){
  .about-photo-slot .about-photo{
    object-position:center 30%;
  }
  .news-photo-slot .news-photo{
    object-position:center;
  }
}


/* =========================================================
   HOME ABOUT PHOTO — NATURAL IMAGE RATIO
   The photo itself determines the container height.
   ========================================================= */
.about-photo-slot{
  position:relative !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  overflow:hidden !important;
  padding:0 !important;
  background:transparent !important;
}

/* When the real photo exists, show it as a normal document-flow image.
   No absolute fill, no cover crop, no forced square. */
.about-photo-slot:not(.photo-fallback) .about-photo{
  position:relative !important;
  inset:auto !important;
  z-index:2 !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center !important;
  border-radius:18px !important;
}

/* Hide the old geometric fallback completely when the photo loads. */
.about-photo-slot:not(.photo-fallback) .about-visual-inner{
  display:none !important;
}
.about-photo-slot:not(.photo-fallback)::before,
.about-photo-slot:not(.photo-fallback)::after{
  display:none !important;
  content:none !important;
}

/* Prevent legacy About Me rules from forcing a fixed frame. */
.about-photo-slot.about-visual{
  min-height:0 !important;
  max-height:none !important;
}

/* Keep the surrounding grid aligned to the real image height. */
.about-grid{
  align-items:start !important;
}
.about-grid > *{
  min-height:0 !important;
}

@media(max-width:900px){
  .about-photo-slot:not(.photo-fallback) .about-photo{
    border-radius:14px !important;
  }
}


/* HOME NEWS PHOTO — NATURAL IMAGE RATIO */
.news-photo-slot{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
}
.news-photo-slot:not(.photo-fallback) .news-photo{
  position:relative !important;
  inset:auto !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center !important;
}


/* =========================================================
   LITTLE STORIES — Figure 1 content hierarchy
   Category → Title → Excerpt → Date / Read
   ========================================================= */
.story{
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  gap:30px !important;
}

.story .story-content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
}

.story .story-content small{
  display:block;
  margin:0 0 22px;
  letter-spacing:.01em;
}

.story .story-content h4{
  margin:0;
}

.story .story-excerpt{
  margin:20px 0 0;
  max-width:92%;
  font-size:15px;
  line-height:1.65;
  font-weight:400;
  opacity:.68;
}

.story .story-footer{
  width:100%;
  margin-top:auto;
  padding-top:20px;
  border-top:1px solid rgba(18,18,18,.16);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  font-size:14px;
  font-weight:650;
  letter-spacing:.02em;
}

.story .story-footer a,
.story .story-footer span,
.story .story-footer time{
  color:inherit;
  text-decoration:none;
}

.story.tall .story-footer{
  border-top-color:rgba(255,255,255,.22);
}

/* The black card inherits light text for its supporting content. */
.story.tall .story-excerpt{
  color:inherit;
  opacity:.72;
}

.story.tall .story-footer{
  color:inherit;
}

.story-status{
  opacity:.68;
}

/* Give excerpts enough room on the smaller cards without making them dense. */
.story.small .story-excerpt{
  font-size:14px;
  line-height:1.58;
  max-width:96%;
}

@media(max-width:900px){
  .story{
    gap:26px !important;
  }
  .story .story-content small{
    margin-bottom:18px;
  }
  .story .story-excerpt,
  .story.small .story-excerpt{
    margin-top:16px;
    max-width:100%;
    font-size:18px;
  }
  .story .story-footer{
    padding-top:18px;
    font-size:13px;
  }
}