/* ═══════════════════════════════════════════════════════════
   Karima Digital — Homepage
   Implemented from "Karima Digital Homepage v2.dc.html"
   (Claude Design handoff bundle, Website/project/)
   ═══════════════════════════════════════════════════════════ */

:root{
  --cream:#FDF4E6; --cream-2:#FBEAD2; --sand:#FAE3C6;
  --ocean-deep:#06222E; --ocean:#0C3B48;
  --teal:#1B8A8F; --teal-bright:#2FCDBE; --amber:#F4A24C; --sunset:#EF7D54; --coral:#E8624A; --taupe:#5E4742;
  --ink:#06222E; --ink-soft:rgba(6,34,46,.66); --ink-mute:rgba(6,34,46,.42);
  --cream-soft:rgba(253,244,230,.74); --cream-mute:rgba(253,244,230,.48);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--cream);}
body{
  font-family:'Inter Tight',system-ui,sans-serif;
  letter-spacing:-.01em;
  color:var(--ink);
  position:relative;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;}

/* ── Animations ── */
@keyframes kd-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes kd-float-slow{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes kd-spin{to{transform:rotate(360deg)}}
@keyframes kd-twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}
@keyframes kd-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes kd-sky{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes kd-shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes kd-pulse{0%{box-shadow:0 0 0 0 rgba(47,205,190,.5)}70%{box-shadow:0 0 0 16px rgba(47,205,190,0)}100%{box-shadow:0 0 0 0 rgba(47,205,190,0)}}
@keyframes kd-draw{from{stroke-dashoffset:3000}to{stroke-dashoffset:0}}
@keyframes kd-rise{0%{opacity:0;transform:translateY(34px) scale(.96)}100%{opacity:1;transform:none}}

/* Entrance plays only while the clock runs; with no fill-mode the resting
   state is the element's base (visible), so content is never stuck hidden. */
[data-kd-reveal]{animation:kd-rise .8s cubic-bezier(.16,.84,.44,1) .18s;}
[data-kd-wave]{animation:kd-draw 2.6s ease .25s;}

/* ── Interaction utilities ── */
.kd-arrow{display:inline-block;transition:transform .28s cubic-bezier(.2,.8,.3,1);}
a:hover .kd-arrow,button:hover .kd-arrow{transform:translateX(5px);}
.kd-marquee-track:hover{animation-play-state:paused;}
.kd-link-u{position:relative;}
.kd-link-u::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.3,1);opacity:.7;}
.kd-link-u:hover::after{transform:scaleX(1);}
.kd-chip{transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s ease,border-color .3s ease;}
.kd-chip:hover{transform:translateY(-4px);border-color:rgba(47,205,190,.6);box-shadow:0 14px 30px rgba(6,34,46,.12);}
.kd-tilt{transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s ease;}
.kd-mag{transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s ease;will-change:transform;}
.kd-cta-btn{transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .3s ease,filter .3s ease;}
.kd-cta-btn:hover{box-shadow:0 16px 34px rgba(6,34,46,.26);filter:brightness(1.04);}

/* ── Shared patterns ── */
.mono{font-family:'IBM Plex Mono',monospace;text-transform:uppercase;}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.26em;text-transform:uppercase;margin-bottom:16px;}
.display{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;}

.btn{font-weight:600;font-size:16px;padding:15px 28px;border-radius:12px;display:inline-flex;align-items:center;gap:9px;}
.btn--dark{background:var(--ocean-deep);color:var(--cream);}
.btn--teal{background:var(--teal-bright);color:var(--ocean-deep);}
.btn--outline{background:transparent;color:var(--ink);padding:14px 26px;border:1.5px solid rgba(6,34,46,.26);}

/* ── Scroll progress ── */
.progress-bar{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;background:linear-gradient(90deg,var(--amber),var(--sunset),var(--teal-bright));box-shadow:0 0 12px rgba(239,125,84,.5);}

/* ── Nav ── */
.site-nav{position:sticky;top:0;z-index:60;background:rgba(253,244,230,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(6,34,46,.1);}
.nav-inner{max-width:1240px;margin:0 auto;padding:15px 40px;display:flex;align-items:center;justify-content:space-between;}
.logo{display:flex;align-items:baseline;gap:2px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:21px;letter-spacing:-.03em;}
.logo-dot{color:var(--teal-bright);display:inline-block;animation:kd-twinkle 2.6s ease-in-out infinite;}
.kd-nav-links{display:flex;align-items:center;gap:30px;}
.nav-link{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
.nav-cta{background:var(--teal-bright);color:var(--ocean-deep);font-weight:600;font-size:14px;padding:10px 20px;border-radius:9999px;display:inline-flex;align-items:center;gap:7px;}

/* ── Hero ── */
.hero{position:relative;background:var(--cream);overflow:hidden;}
.hero-sky{position:absolute;inset:0;pointer-events:none;animation:kd-sky 11s ease-in-out infinite;background:
  radial-gradient(ellipse 46% 60% at 82% 4%,rgba(244,162,76,.4) 0%,transparent 58%),
  radial-gradient(ellipse 52% 50% at 90% 34%,rgba(239,125,84,.2) 0%,transparent 60%),
  radial-gradient(ellipse 42% 42% at 4% 82%,rgba(47,205,190,.14) 0%,transparent 62%);}
.spark{position:absolute;}
.spark--1{top:14%;left:12%;animation:kd-twinkle 3.4s ease-in-out infinite;}
.spark--2{top:66%;left:7%;animation:kd-twinkle 4.2s ease-in-out infinite .6s;}
.spark--3{top:8%;right:34%;animation:kd-twinkle 3.8s ease-in-out infinite 1.1s;}

.kd-hero-grid{position:relative;max-width:1240px;margin:0 auto;padding:60px 40px 70px;display:grid;grid-template-columns:1.05fr .95fr;column-gap:48px;row-gap:0;align-items:center;}
.hero-badge{display:inline-flex;align-items:center;gap:9px;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin-bottom:20px;padding:6px 14px;border:1px solid rgba(27,138,143,.32);border-radius:9999px;background:rgba(47,205,190,.08);}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--teal-bright);display:inline-block;animation:kd-pulse 2.4s ease-out infinite;}
.hero-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(52px,7.4vw,96px);line-height:.92;letter-spacing:-.04em;margin:0;}
.hero-title .gradient{background:linear-gradient(100deg,var(--coral),var(--sunset),var(--amber),var(--teal-bright),var(--sunset));background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:kd-shimmer 6s linear infinite;}
.hero-tagline{font-family:'Bricolage Grotesque',sans-serif;font-style:italic;font-weight:600;font-size:clamp(22px,2.5vw,30px);line-height:1.15;letter-spacing:-.02em;color:var(--sunset);margin:20px 0 0;max-width:18ch;}
.hero-desc{font-size:18px;line-height:1.62;color:var(--ink-soft);max-width:52ch;margin:24px 0 0;}
.hero-ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}
.hero-ctas .kd-arrow{color:var(--teal-bright);}

.kd-hero-art{position:relative;min-height:560px;display:flex;align-items:flex-end;justify-content:center;}
.hero-arcs{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:600px;z-index:0;}
.hero-photo{position:relative;z-index:1;height:600px;width:auto;max-width:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 30px 46px rgba(6,34,46,.24));}
.hero-baseline{position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--teal-bright),transparent);z-index:2;}

/* ── Stat strip ── */
.stat-wrap{position:relative;max-width:1240px;margin:0 auto;padding:0 40px 64px;}
.kd-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.stat-card{background:#FFFCF6;border:1px solid rgba(6,34,46,.12);border-radius:16px;padding:22px 22px 20px;box-shadow:0 8px 22px rgba(6,34,46,.06);}
.stat-value{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(34px,3.6vw,46px);line-height:1;letter-spacing:-.03em;color:var(--ink);}
.stat-label{font-size:13.5px;line-height:1.4;color:var(--ink-soft);margin-top:8px;}

/* ── Press marquee ── */
.press{background:var(--cream-2);border-top:1px solid rgba(6,34,46,.1);border-bottom:1px solid rgba(6,34,46,.1);overflow:hidden;}
.press-inner{display:flex;align-items:center;}
.press-label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap;padding:0 26px;position:relative;z-index:2;background:var(--cream-2);}
.press-mask{flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.kd-marquee-track{display:flex;align-items:center;width:max-content;animation:kd-marquee 30s linear infinite;padding:26px 0;}
.press-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:18px;letter-spacing:-.02em;color:var(--ink-soft);padding:0 18px;white-space:nowrap;}
.press-star{color:var(--teal);font-size:13px;}

/* ── Case studies ── */
.cases{background:var(--sand);position:relative;}
.kd-pad{max-width:1240px;margin:0 auto;padding:84px 40px;}
.cases-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px;flex-wrap:wrap;}
.cases-head .eyebrow{color:var(--coral);}
.cases-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(34px,4.6vw,56px);line-height:1;letter-spacing:-.035em;margin:0;max-width:16ch;}
.cases-intro{font-size:16px;line-height:1.55;color:var(--ink-soft);max-width:34ch;}
.kd-cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.case-card{background:#FFFCF6;border-radius:18px;border:1px solid rgba(6,34,46,.1);overflow:hidden;box-shadow:0 16px 38px rgba(6,34,46,.08);display:flex;flex-direction:column;}
.case-media{position:relative;height:210px;background:var(--cream-2);border-bottom:1px solid rgba(6,34,46,.08);overflow:hidden;}
.case-media img{width:100%;height:210px;object-fit:cover;display:block;}
.case-media--text{width:100%;height:210px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#FBEAD2,#FAE3C6);}
.case-media--text span{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:21px;letter-spacing:-.025em;color:rgba(6,34,46,.34);}
.case-body{padding:26px 24px 28px;display:flex;flex-direction:column;flex:1;}
.case-num{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:12px;}
.case-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:25px;letter-spacing:-.025em;margin:0 0 10px;}
.case-metric{font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.02em;color:var(--teal);margin-bottom:14px;line-height:1.5;}
.case-desc{font-size:15px;line-height:1.55;color:var(--ink-soft);margin:0;}

/* ── Work with me ── */
.offers{position:relative;background:linear-gradient(165deg,#F6AC5C 0%,#F08E54 52%,#EA7150 100%);overflow:hidden;}
.offers-glow{position:absolute;top:-60px;right:-40px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(253,244,230,.35),transparent 70%);animation:kd-float-slow 9s ease-in-out infinite;}
.offers .kd-pad{position:relative;}
.offers-head{text-align:center;margin-bottom:48px;}
.offers-head .eyebrow{color:var(--ocean-deep);opacity:.62;}
.offers-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(34px,4.8vw,58px);line-height:1;letter-spacing:-.035em;margin:0;color:var(--ocean-deep);max-width:20ch;margin-inline:auto;}
.kd-two-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.offer-card{border-radius:20px;padding:38px 36px;display:flex;flex-direction:column;}
.offer-card--dark{background:var(--ocean-deep);color:var(--cream);box-shadow:0 22px 50px rgba(6,34,46,.28);}
.offer-card--light{background:#FFFCF6;color:var(--ink);box-shadow:0 22px 50px rgba(6,34,46,.18);}
.offer-tag{display:flex;align-items:center;gap:10px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:22px;}
.offer-card--dark .offer-tag{color:var(--teal-bright);}
.offer-card--dark .offer-tag .sub{color:var(--cream-mute);}
.offer-card--light .offer-tag{color:var(--coral);}
.offer-card--light .offer-tag .sub{color:var(--ink-mute);}
.offer-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:30px;letter-spacing:-.03em;margin:0 0 14px;}
.offer-desc{font-size:16px;line-height:1.6;margin:0 0 28px;flex:1;}
.offer-card--dark .offer-desc{color:var(--cream-soft);}
.offer-card--light .offer-desc{color:var(--ink-soft);}
.offer-card .btn{align-self:flex-start;}

/* ── About ── */
.about{position:relative;background:var(--ocean);color:var(--cream);overflow:hidden;}
.about-waves{position:absolute;inset:0;pointer-events:none;opacity:.55;}
.kd-about-grid{position:relative;max-width:1240px;margin:0 auto;padding:88px 40px;display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center;}
.about-photo-wrap{position:relative;}
.about-photo-frame{position:absolute;inset:-14px -14px 14px 14px;border-radius:20px;border:1px solid rgba(47,205,190,.4);}
.about-photo{position:relative;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center top;border-radius:18px;display:block;box-shadow:0 26px 56px rgba(0,0,0,.4);}
.about .eyebrow{color:var(--teal-bright);margin-bottom:22px;}
.about-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(30px,3.6vw,46px);line-height:1.05;letter-spacing:-.03em;margin:0 0 26px;}
.about-title .accent{font-style:italic;font-weight:600;color:var(--amber);}
.about-text{font-size:18px;line-height:1.66;color:var(--cream-soft);margin:0;max-width:56ch;}

/* ── Final CTA ── */
.cta{position:relative;background:var(--ocean-deep);color:var(--cream);overflow:hidden;}
.cta-sky{position:absolute;inset:0;pointer-events:none;animation:kd-sky 9s ease-in-out infinite;background:
  radial-gradient(ellipse 60% 70% at 50% 118%,rgba(239,125,84,.45) 0%,transparent 60%),
  radial-gradient(ellipse 50% 50% at 50% 130%,rgba(244,162,76,.36) 0%,transparent 55%);}
.kd-cta-pad{position:relative;max-width:900px;margin:0 auto;padding:96px 40px 104px;text-align:center;}
.cta-bars{margin-bottom:30px;}
.cta .eyebrow{color:var(--teal-bright);margin-bottom:22px;}
.cta-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(38px,5.4vw,68px);line-height:.98;letter-spacing:-.035em;margin:0 0 24px;}
.cta-text{font-size:19px;line-height:1.6;color:var(--cream-soft);margin:0 auto 38px;max-width:50ch;}
.cta .btn--teal{font-weight:700;font-size:17px;padding:17px 36px;gap:10px;}

/* ── Footer ── */
.site-footer{background:var(--ocean-deep);color:var(--cream);border-top:1px solid rgba(253,244,230,.12);}
.footer-inner{max-width:1240px;margin:0 auto;padding:64px 40px 40px;}
.kd-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(253,244,230,.12);}
.footer-brand-row{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.footer-sun-rays{transform-origin:center;animation:kd-spin 40s linear infinite;}
.footer-logo{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:22px;letter-spacing:-.03em;}
.footer-tag{font-size:16px;line-height:1.55;color:var(--cream-soft);max-width:34ch;margin:0 0 18px;}
.footer-dm{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.04em;color:var(--amber);}
.footer-dm strong{color:var(--cream);}
.footer-col-title{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-mute);margin-bottom:18px;}
.footer-links{display:flex;flex-direction:column;gap:12px;font-size:15px;color:var(--cream-soft);}
.footer-links a{display:inline-block;align-self:flex-start;}
.footer-socials{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:15px;color:var(--cream-soft);}
.footer-socials a{display:inline-block;justify-self:start;}
.footer-icons{display:flex;flex-wrap:wrap;gap:10px;}
.footer-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(253,244,230,.22);color:var(--cream-soft);transition:color .25s ease,border-color .25s ease,transform .25s cubic-bezier(.2,.8,.3,1);}
.footer-icon:hover{color:var(--teal-bright);border-color:rgba(47,205,190,.6);transform:translateY(-3px);}
.footer-bottom{padding-top:26px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-mute);}

/* ── Mobile ── */
@media (max-width:880px){
  .nav-inner{padding:15px 22px;}
  .kd-hero-grid{display:flex;flex-direction:column;gap:0;padding:30px 22px 44px;}
  .kd-hero-text{display:contents;}
  .kd-hero-art{min-height:340px;order:4;margin-top:28px;}
  .kd-hero-text>:nth-child(1){order:1;}
  .kd-hero-text>:nth-child(2){order:2;}
  .kd-hero-text>:nth-child(3){order:3;}
  .kd-hero-text>:nth-child(4){order:5;}
  .kd-hero-text>:nth-child(5){order:6;}
  .kd-cases-grid{grid-template-columns:1fr;}
  .kd-two-grid{grid-template-columns:1fr;}
  .kd-about-grid{grid-template-columns:1fr;gap:32px;padding:54px 22px;}
  .kd-footer-grid{grid-template-columns:1fr;gap:28px;}
  .kd-nav-links{display:none;}
  .kd-pad{padding:54px 22px;}
  .stat-wrap{padding:0 22px 54px;}
  .footer-inner{padding:54px 22px 34px;}
  .kd-stat-grid{grid-template-columns:1fr 1fr;}
  .kd-cta-pad{padding:70px 22px 78px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;}
}

/* ── The night door — for whoever's still awake ── */
.night-door{
  font-family:'Inter Tight',sans-serif;font-style:italic;font-size:13.5px;letter-spacing:.04em;
  text-transform:none;
  color:var(--sunset);opacity:.75;text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;
  transition:opacity .3s ease,color .3s ease;
}
.night-door .nd-moon{font-style:normal;font-size:15px;line-height:1;transform:translateY(-1px);}
.night-door:hover,.night-door:focus-visible{opacity:1;color:var(--amber);}

/* ── From my desk: papers pinned to a sand desktop ── */
.desk{position:relative;background:var(--sand);overflow:hidden;}
.desk-ring{position:absolute;top:64px;right:8%;width:96px;height:96px;border-radius:50%;border:10px solid rgba(94,71,66,.10);box-shadow:0 0 0 2px rgba(94,71,66,.05);pointer-events:none;}
.writing-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:52px;flex-wrap:wrap;}
.desk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;align-items:start;}

.desk-tag{display:flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px;color:var(--ink-mute);}
.desk-tag .dot{width:7px;height:7px;border-radius:50%;display:inline-block;}
.desk-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:24px;letter-spacing:-.025em;line-height:1.1;margin:0 0 12px;}
.desk-desc{font-size:15px;line-height:1.55;margin:0 0 22px;color:var(--ink-soft);}
.desk-link{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--coral);}

/* the book on the desk */
.desk-book{position:relative;display:flex;flex-direction:column;background:var(--ocean-deep);color:var(--cream);border-radius:6px 14px 14px 6px;padding:34px 30px 30px 36px;box-shadow:0 24px 44px rgba(6,34,46,.28);transform:rotate(-1.6deg);transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s ease;}
.desk-book::before{content:"";position:absolute;top:0;bottom:0;left:0;width:9px;border-radius:6px 0 0 6px;background:linear-gradient(180deg,var(--amber),var(--sunset),var(--coral));}
.desk-book .desk-tag{color:rgba(253,244,230,.55);}
.desk-book .desk-desc{color:var(--cream-soft);}
.desk-book:hover{transform:rotate(0) translateY(-8px);box-shadow:0 32px 56px rgba(6,34,46,.36);}

/* taped papers */
.desk-paper{position:relative;display:flex;flex-direction:column;background:#FFFCF6;border:1px solid rgba(6,34,46,.09);border-radius:4px;padding:38px 28px 28px;box-shadow:0 16px 30px rgba(6,34,46,.12);transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s ease;}
.desk-paper::before{content:"";position:absolute;top:-13px;left:50%;width:92px;height:27px;transform:translateX(-50%) rotate(-2.5deg);background:rgba(253,244,230,.6);border:1px solid rgba(6,34,46,.07);box-shadow:0 2px 5px rgba(6,34,46,.08);}
.desk-paper--1{transform:rotate(1.5deg) translateY(26px);}
.desk-paper--1::before{transform:translateX(-50%) rotate(2deg);background:rgba(47,205,190,.22);}
.desk-paper--2{transform:rotate(-1.2deg) translateY(6px);}
.desk-paper--2::before{background:rgba(244,162,76,.3);}
.desk-paper:hover{transform:rotate(0) translateY(-6px);box-shadow:0 26px 44px rgba(6,34,46,.18);}

/* ── Subpages: about, resources, terms, privacy ── */
.page-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(34px,4.8vw,56px);line-height:1.02;letter-spacing:-.035em;margin:0;}
.page-title .accent{font-style:italic;font-weight:600;color:var(--sunset);}
.page-lead{font-size:17px;line-height:1.66;color:var(--ink-soft);max-width:58ch;margin:22px 0 0;}

.about-hero-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center;max-width:1240px;margin:0 auto;padding:72px 40px 64px;}
.about-portrait{border-radius:20px;overflow:hidden;box-shadow:0 22px 50px rgba(6,34,46,.18);max-width:380px;}
.about-portrait img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover;object-position:top;}
.why-band{background:var(--sand);}
.why-band .kd-pad{max-width:920px;}
.why-band p{font-size:17px;line-height:1.66;color:var(--ink-soft);margin:0 0 16px;}
.about-stat-grid{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;text-align:center;}
.page-cta{text-align:center;}
.page-cta .kd-pad{max-width:760px;padding-top:64px;padding-bottom:92px;}
.page-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px;}

.kd-prose{max-width:740px;margin:0 auto;padding:56px 40px 96px;}
.kd-prose h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(32px,4.4vw,48px);letter-spacing:-.03em;margin:0 0 10px;}
.kd-updated{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 36px;}
.kd-prose h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:21px;letter-spacing:-.02em;margin:34px 0 10px;}
.kd-prose p{font-size:16px;line-height:1.66;color:var(--ink-soft);margin:0 0 14px;}
.kd-back{display:inline-flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:30px;}

.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px;}
.res-card{display:flex;flex-direction:column;background:#FFFCF6;border:1px solid rgba(6,34,46,.12);border-radius:18px;padding:28px 26px;box-shadow:0 12px 30px rgba(6,34,46,.07);}
.res-tag{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-bottom:14px;}
.res-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:23px;letter-spacing:-.025em;margin:0 0 10px;}
.res-desc{font-size:15px;line-height:1.55;color:var(--ink-soft);margin:0 0 20px;flex:1;}
.res-link{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--coral);}
.res-feature{grid-column:1/-1;background:var(--ocean-deep);border:none;}
.res-feature .res-title{font-size:28px;color:var(--cream);}
.res-feature .res-desc{color:var(--cream-soft);}
.res-feature .res-tag{color:var(--teal-bright);}
.res-feature .res-link{color:var(--amber);}

.subfooter{background:var(--ocean-deep);color:var(--cream);border-top:1px solid rgba(253,244,230,.12);}
.subfooter-inner{max-width:1240px;margin:0 auto;padding:34px 40px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
.subfooter .footer-logo{font-size:19px;}
.subfooter-links{display:flex;gap:22px;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-mute);}

@media (max-width:880px){
  .desk-grid{grid-template-columns:1fr;gap:30px;}
  .desk-paper--1{transform:rotate(1deg) translateY(0);}
  .desk-paper--2{transform:rotate(-.8deg) translateY(0);}
  .desk-book{transform:rotate(-.8deg);}
  .desk-ring{display:none;}
  .about-hero-grid{grid-template-columns:1fr;gap:32px;padding:44px 22px;}
  .res-grid{grid-template-columns:1fr;}
  .kd-prose{padding:44px 22px 72px;}
  .subfooter-inner{padding:30px 22px;}
}