*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --off-white:#F8F5F0;--cream:#FBF9F5;--charcoal:#1E1D1B;--charcoal-mid:#3A3835;
  --charcoal-light:#6B6760;--sand:#C8B89A;--sand-light:#E8DDD0;--sand-deep:#D9C7AA;
  --olive:#8A8B74;--olive-pale:#DCDCCB;--border:rgba(30,29,27,0.1);--border-strong:rgba(30,29,27,0.2);
  --serif:'DM Serif Display',Georgia,serif;--sans:'DM Sans',system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
html{scroll-behavior:smooth;}
body{background:var(--off-white);color:var(--charcoal);font-family:var(--sans);font-size:16px;line-height:1.7;font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:1.5rem 3rem;background:rgba(248,245,240,0.93);backdrop-filter:blur(12px);border-bottom:0.5px solid var(--border);}
.nav-logo{font-family:var(--serif);font-size:1.4rem;letter-spacing:-0.02em;text-decoration:none;}
.nav-right{display:flex;align-items:center;gap:2rem;}
.nav-link{font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;font-weight:400;}
.nav-link.active{border-bottom:0.5px solid var(--charcoal);}
.nav-cta{font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;font-weight:400;border:0.5px solid var(--border-strong);padding:0.6rem 1.4rem;transition:background .2s,color .2s;}
.nav-cta:hover{background:var(--charcoal);color:var(--off-white);}

/* type */
.wrap{max-width:1200px;margin:0 auto;padding:0 3rem;}
.label{font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--olive);font-weight:400;display:flex;align-items:center;gap:0.75rem;}
.label::before{content:'';width:1.5rem;height:0.5px;background:currentColor;}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,5vw,4.4rem);line-height:1.04;letter-spacing:-0.015em;}
h1 em,h2 em,h3 em{font-style:italic;color:var(--charcoal-mid);}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,2.8vw,2.6rem);line-height:1.12;letter-spacing:-0.01em;}
h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.2;}
.lede{font-size:1rem;line-height:1.8;color:var(--charcoal-light);max-width:50ch;}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:0.7rem;font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;font-weight:400;padding:0.85rem 1.6rem;border:0.5px solid var(--charcoal);transition:background .2s,color .2s;}
.btn:hover{background:var(--charcoal);color:var(--off-white);}
.btn svg{transition:transform .2s;}
.btn:hover svg{transform:translateX(3px);}
.btn-dark{background:var(--charcoal);color:var(--off-white);}
.btn-dark:hover{background:var(--charcoal-mid);}
.btn-light{background:var(--off-white);color:var(--charcoal);border-color:var(--off-white);}
.btn-light:hover{background:var(--sand-light);color:var(--charcoal);}

/* hero */
.hero{padding:10rem 0 5rem;}
.hero h1{margin:1.75rem 0 1.5rem;max-width:16ch;}

/* platform strip */
.strip{border-top:0.5px solid var(--border);border-bottom:0.5px solid var(--border);background:var(--cream);}
.strip .wrap{display:flex;align-items:center;gap:3rem;padding-top:1.6rem;padding-bottom:1.6rem;flex-wrap:wrap;}
.strip-label{font-size:0.66rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--charcoal-light);}
.strip-items{display:flex;gap:3rem;flex-wrap:wrap;align-items:center;}
.strip-item{font-family:var(--serif);font-size:1.35rem;color:var(--charcoal-mid);letter-spacing:-0.01em;}

/* stats band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);}
.stat{padding:2.25rem 1.5rem 2.25rem 0;}
.stat+.stat{padding-left:1.75rem;border-left:0.5px solid var(--border);}
.stat-num{font-family:var(--serif);font-size:clamp(2.2rem,3.6vw,3.2rem);line-height:1;}
.stat-text{font-size:0.8rem;color:var(--charcoal-light);margin-top:0.7rem;line-height:1.5;max-width:22ch;}

/* case cards */
.cases{padding:6rem 0 4rem;}
.cases-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:3rem;}
.case-card{display:grid;grid-template-columns:1.05fr 1fr;gap:0;margin-bottom:1.5rem;text-decoration:none;overflow:hidden;border-radius:6px;transition:transform .35s ease,box-shadow .35s ease;}
.case-card:hover{transform:translateY(-3px);box-shadow:0 24px 50px -28px rgba(30,29,27,.45);}
.case-visual{position:relative;min-height:440px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.case-text{padding:3.25rem 3.25rem;display:flex;flex-direction:column;justify-content:center;}
.case-brand{font-size:0.8rem;letter-spacing:0.22em;text-transform:uppercase;font-weight:500;margin-bottom:1rem;}
.tags{display:flex;flex-wrap:wrap;gap:0.4rem;margin-bottom:1.5rem;}
.tag{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.06em;text-transform:uppercase;padding:0.3rem 0.6rem;border:0.5px solid var(--border-strong);border-radius:2px;}
.case-text h3{margin-bottom:1rem;}
.case-text p{font-size:0.9rem;line-height:1.75;color:var(--charcoal-mid);margin-bottom:1.75rem;max-width:44ch;}
.case-text .btn{align-self:flex-start;}

.t-sand{background:var(--sand-deep);}
.t-sand .case-visual{background:#CDB894;}
.t-olive{background:var(--olive-pale);}
.t-olive .case-visual{background:#C9CAB4;}
.t-dark{background:var(--charcoal);color:var(--off-white);}
.t-dark .case-visual{background:#2A2926;}
.t-dark .case-text p{color:rgba(248,245,240,.65);}
.t-dark .tag{border-color:rgba(248,245,240,.25);color:rgba(248,245,240,.8);}
.t-dark .case-brand{color:var(--sand);}
.t-dark h3 em{color:var(--sand);}

/* phone mockup */
.phone{width:248px;height:500px;border-radius:40px;background:#141412;padding:9px;box-shadow:0 40px 70px -30px rgba(20,20,18,.6),0 0 0 0.5px rgba(255,255,255,.08) inset;position:relative;z-index:2;}
.phone::before{content:'';position:absolute;top:17px;left:50%;transform:translateX(-50%);width:74px;height:20px;border-radius:12px;background:#141412;z-index:3;}
.screen{width:100%;height:100%;border-radius:32px;overflow:hidden;position:relative;padding:46px 18px 18px;font-family:var(--sans);}
.chip{position:absolute;z-index:4;background:var(--off-white);color:var(--charcoal);border-radius:4px;padding:0.8rem 1rem;box-shadow:0 18px 40px -18px rgba(20,20,18,.45);min-width:150px;}
.chip-num{font-family:var(--serif);font-size:1.7rem;line-height:1;}
.chip-text{font-size:0.66rem;color:var(--charcoal-light);margin-top:0.35rem;line-height:1.35;letter-spacing:.02em;}

/* hub screen */
.hub{background:#1E1D1B;color:#F8F5F0;}
.hub-kicker{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);}
.hub-title{font-family:var(--serif);font-size:24px;line-height:1.1;margin:4px 0 14px;}
.dial{display:block;margin:0 auto 14px;}
.hub-card{background:#2C2B28;border-radius:12px;padding:10px 12px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.hub-card-t{font-size:10px;font-weight:500;}
.hub-card-s{font-size:8.5px;color:rgba(248,245,240,.55);margin-top:1px;}
.hub-btn{font-size:8px;letter-spacing:.1em;text-transform:uppercase;background:var(--sand);color:#1E1D1B;border-radius:20px;padding:5px 9px;font-weight:500;white-space:nowrap;}
.streak{display:flex;gap:4px;}
.streak i{width:9px;height:9px;border-radius:50%;background:var(--sand);display:block;}
.streak i.off{background:#46443F;}

/* onboarding screen */
.onb{background:#FBF9F5;color:#1E1D1B;}
.onb-kicker{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--olive);}
.onb-title{font-family:var(--serif);font-size:22px;line-height:1.12;margin:4px 0 12px;}
.prog{height:5px;border-radius:5px;background:#E6E3DA;margin-bottom:14px;overflow:hidden;}
.prog span{display:block;height:100%;width:78%;background:#6E705A;border-radius:5px;}
.step{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:0.5px solid rgba(30,29,27,.1);font-size:10.5px;}
.tick{width:18px;height:18px;border-radius:50%;background:#6E705A;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.tick.open{background:none;border:1px solid #9C9D88;}
.step .s-sub{font-size:8.5px;color:var(--charcoal-light);}
.bars-card{margin-top:14px;background:#F0EEE6;border-radius:12px;padding:10px 12px;}
.bars-t{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--charcoal-light);margin-bottom:8px;}
.bars{display:flex;align-items:flex-end;gap:6px;height:70px;}
.bars i{flex:1;background:#B9BAA4;border-radius:3px 3px 0 0;display:block;}
.bars i.hi{background:#6E705A;}

/* chart card (farm folk) */
.chart-card{width:min(400px,84%);background:#33322E;border-radius:10px;padding:22px 22px 18px;color:#F8F5F0;box-shadow:0 40px 70px -30px rgba(0,0,0,.6);position:relative;z-index:2;}
.chart-k{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);}
.chart-v{font-family:var(--serif);font-size:34px;line-height:1.05;margin:6px 0 2px;}
.chart-s{font-size:11px;color:rgba(248,245,240,.55);margin-bottom:14px;}
.chart-foot{display:flex;justify-content:space-between;font-size:9px;color:rgba(248,245,240,.4);margin-top:6px;letter-spacing:.08em;text-transform:uppercase;}
.team{display:flex;margin-top:16px;align-items:center;gap:10px;font-size:10.5px;color:rgba(248,245,240,.7);}
.team-dots{display:flex;}
.team-dots i{width:18px;height:18px;border-radius:50%;border:1.5px solid #33322E;margin-left:-6px;display:block;}
.team-dots i:first-child{margin-left:0;}

/* glow rings behind visuals */
.ring{position:absolute;border-radius:50%;border:0.5px solid rgba(30,29,27,.12);pointer-events:none;}
.t-dark .ring{border-color:rgba(248,245,240,.07);}

/* about */
.about{background:var(--sand-light);padding:6rem 0;}
.about .wrap{display:grid;grid-template-columns:1fr 1.4fr;gap:5rem;}
.monogram{width:88px;height:88px;border-radius:50%;background:var(--charcoal);color:var(--sand);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:2rem;margin-top:1.75rem;}
.about h2{margin-top:1.5rem;}
.about p{font-size:0.95rem;line-height:1.8;color:var(--charcoal-mid);margin-bottom:1.2rem;}
.about .brands{font-size:0.82rem;color:var(--charcoal-light);border-top:0.5px solid var(--border-strong);padding-top:1.2rem;margin-top:1.6rem;}
.about .brands strong{font-weight:500;color:var(--charcoal);}

/* how */
.how{padding:6rem 0;}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:3rem;border-top:0.5px solid var(--border-strong);}
.how-step{padding:2rem 2rem 0 0;}
.how-step+.how-step{padding-left:2rem;border-left:0.5px solid var(--border);}
.how-n{font-family:var(--mono);font-size:0.7rem;color:var(--olive);letter-spacing:.1em;}
.how-step h3{margin:0.6rem 0 0.7rem;font-size:1.35rem;}
.how-step p{font-size:0.88rem;color:var(--charcoal-light);line-height:1.75;}

/* cta */
.cta{background:var(--charcoal);color:var(--off-white);padding:7rem 0;}
.cta .label{color:var(--sand);}
.cta h2{margin:1.5rem 0 1.25rem;max-width:20ch;}
.cta p{color:rgba(248,245,240,.6);font-size:0.95rem;max-width:48ch;margin-bottom:2.5rem;}
footer{background:var(--charcoal);border-top:0.5px solid rgba(255,255,255,.07);padding:2rem 3rem;display:flex;justify-content:space-between;align-items:center;}
.footer-logo{font-family:var(--serif);font-size:1rem;color:rgba(248,245,240,.4);}
.footer-copy{font-size:0.7rem;color:rgba(248,245,240,.25);letter-spacing:.06em;}

/* case study detail */
.cs-hero{padding:9rem 0 0;}
.cs-back{font-size:0.72rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--charcoal-light);display:inline-flex;gap:.5rem;align-items:center;margin-bottom:2.5rem;}
.cs-back:hover{color:var(--charcoal);}
.cs-top{display:grid;grid-template-columns:1.1fr 1fr;gap:4rem;align-items:end;margin-bottom:3.5rem;}
.cs-top h1{margin-top:1.25rem;font-size:clamp(2.2rem,4.4vw,3.8rem);}
.cs-meta{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem 2rem;border-top:0.5px solid var(--border-strong);padding-top:1.5rem;}
.cs-meta dt{font-size:0.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--charcoal-light);}
.cs-meta dd{font-size:0.9rem;margin-top:.2rem;}
.cs-visual{border-radius:6px;min-height:560px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.cs-stats{border-bottom:0.5px solid var(--border);}
.cs-body{padding:6rem 0;}
.cs-section{display:grid;grid-template-columns:1fr 2fr;gap:4rem;padding:3rem 0;border-top:0.5px solid var(--border);}
.cs-section:first-child{border-top:none;padding-top:0;}
.cs-section p{font-size:1rem;line-height:1.85;color:var(--charcoal-mid);margin-bottom:1.2rem;max-width:62ch;}
.cs-list{list-style:none;margin-top:.5rem;}
.cs-list li{padding:1rem 0;border-bottom:0.5px solid var(--border);display:grid;grid-template-columns:2.5rem 1fr;font-size:0.95rem;color:var(--charcoal-mid);}
.cs-list li span{font-family:var(--mono);font-size:0.7rem;color:var(--olive);padding-top:.25rem;}
.cs-list li strong{font-weight:500;color:var(--charcoal);}
.next{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2rem;padding:3rem;border-radius:6px;text-decoration:none;margin-bottom:6rem;transition:transform .3s;}
.next:hover{transform:translateY(-2px);}
.next h3{margin-top:.6rem;}

@media(max-width:900px){
  nav{padding:1.1rem 1rem;}
  .nav-right{gap:1rem;}
  .nav-cta{padding:0.5rem 0.85rem;font-size:0.68rem;}
  .wrap{padding:0 1rem;}
  .hero{padding:7.5rem 0 3rem;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .stat:nth-child(3){padding-left:0;border-left:none;}
  .stat{padding:1.5rem 1rem 1.5rem 0;}
  .stat+.stat{padding-left:1rem;}
  .stat:nth-child(3){padding-left:0;}
  .cases{padding:4rem 0 2rem;}
  .cases-head{flex-direction:column;align-items:flex-start;}
  .case-card{grid-template-columns:1fr;}
  .case-visual{min-height:400px;}
  .case-text{padding:2rem 1.5rem 2.25rem;}
  .about .wrap,.cs-top,.cs-section{grid-template-columns:1fr;gap:1.5rem;}
  .how-grid{grid-template-columns:1fr;}
  .how-step,.how-step+.how-step{padding:1.75rem 0;border-left:none;border-bottom:0.5px solid var(--border);}
  .cs-hero{padding-top:7rem;}
  .cs-visual{min-height:460px;}
  .next{grid-template-columns:1fr;padding:2rem 1.5rem;}
  footer{flex-direction:column;gap:.75rem;padding:2rem 1rem;}
  .chip{min-width:0;padding:.6rem .8rem;}
  .chip-num{font-size:1.35rem;}
}
@media(max-width:440px){
  .nav-link{display:none;}
  .strip-items{gap:1.5rem;}
  .strip-item{font-size:1.1rem;}
  .chip.c-left{left:4% !important;}
  .chip.c-right{right:4% !important;}
}

/* fit phones inside cards, keep chips clear of screens */
.case-visual{min-height:520px;}
.case-visual .phone{transform:scale(.86);}
.case-visual .chip{min-width:0;width:132px;}
.case-visual .chip.c-left{left:3.5% !important;}
.case-visual .chip.c-right{right:3.5% !important;}
.cs-visual .chip.c-left{left:12% !important;}
.cs-visual .chip.c-right{right:12% !important;}
@media(max-width:900px){
  .case-visual{min-height:470px;}
  .case-visual .phone{transform:scale(.8);}
  .case-visual .chip{width:112px;}
  .cs-visual .chip.c-left{left:3% !important;}
  .cs-visual .chip.c-right{right:3% !important;}
  .cs-visual .phone{transform:scale(.86);}
}

/* small screens: chips sit under the phone, never over it */
@media(max-width:640px){
  .case-visual,.cs-visual{flex-direction:column;justify-content:flex-start;padding:28px 0 112px;min-height:0;}
  .case-visual .phone,.cs-visual .phone{transform:scale(.74);transform-origin:top center;margin-bottom:-130px;}
  .case-visual .chip,.cs-visual .chip{top:auto !important;bottom:24px !important;width:43%;}
  .case-visual .chip.c-left,.cs-visual .chip.c-left{left:5% !important;}
  .case-visual .chip.c-right,.cs-visual .chip.c-right{right:5% !important;}
  .case-visual .chart-card{margin-bottom:-84px;}
}