:root{--bg:#F3F5F8;--card:#fff;--navy:#213450;--text:#59667A;--line:#D9DFE8;--pink:#E481A8;--joy-red:#E53E51;--joy-dark:#101820;--joy-mist:#F3F2FF;--max:1480px;--shadow:0 18px 45px rgba(33,52,80,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--navy);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{text-decoration:none;color:inherit}img{max-width:100%}.nav-wrap{position:sticky;top:18px;z-index:60;width:min(calc(100% - 28px),var(--max));margin:18px auto 0}.main-nav{min-height:72px;padding:12px 16px 12px 24px;border:1px solid rgba(216,222,232,.9);border-radius:24px;background:rgba(255,255,255,.88);backdrop-filter:blur(22px);display:flex;align-items:center;justify-content:space-between;box-shadow:0 8px 30px rgba(33,52,80,.06)}.logo img{display:block;width:172px}.nav-links{display:flex;align-items:center;gap:28px;font-size:13px;color:#536075}.nav-links a.active{font-weight:750;color:var(--navy)}.nav-pill{padding:13px 20px;border-radius:999px;background:var(--navy);color:#fff!important;font-weight:700}.lang{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);font-size:11px;font-weight:800}.lang span{color:#BCC3CD}.lang-disabled{border:0;background:none;padding:0;font:inherit;color:#9AA4B2;opacity:.6;cursor:not-allowed}.mobile-nav{display:none;position:relative}.mobile-nav summary{list-style:none;cursor:pointer;width:48px;height:48px;border-radius:999px;background:var(--navy);display:grid;place-content:center;gap:6px}.mobile-nav summary::-webkit-details-marker{display:none}.mobile-nav summary span{display:block;width:18px;height:2px;border-radius:2px;background:#fff}.mobile-nav-panel{position:absolute;right:0;top:58px;width:min(320px,calc(100vw - 40px));padding:14px;border-radius:20px;background:rgba(255,255,255,.96);backdrop-filter:blur(22px);border:1px solid var(--line);box-shadow:var(--shadow);display:grid;gap:4px}.mobile-nav-panel>a{padding:13px 14px;border-radius:14px;color:#4F5D73;font-size:14px}.mobile-nav-panel>a.active{background:#F3F6FB;color:var(--navy);font-weight:700}.mobile-nav-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}.mobile-lang{display:inline-flex}
main{width:min(calc(100% - 28px),var(--max));margin:18px auto 28px;display:grid;gap:18px}.hero,.pad{border-radius:34px;background:var(--card);padding:88px 82px}.joy-hero{min-height:690px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);gap:64px;align-items:center;background:radial-gradient(circle at 84% 18%,rgba(228,129,168,.20),transparent 29%),radial-gradient(circle at 18% 82%,rgba(199,179,245,.20),transparent 27%),#fff}.kicker{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:800;color:#778398;margin-bottom:18px}.hero h1,.serif{font-family:Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:-.045em}.hero h1{font-size:clamp(70px,5.25vw,78px);line-height:.98;margin:0 0 28px;max-width:880px}.hero-sub{font-size:20px;line-height:1.6;color:var(--text);max-width:780px;margin:0}.tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}.tag{font-size:11px;padding:8px 11px;border-radius:999px;background:#EEF3FB;border:1px solid rgba(33,52,80,.1);font-weight:700;color:#506078}.meta-grid{display:grid;grid-template-columns:.72fr 1.6fr .45fr;gap:16px;margin-top:44px}.meta-grid>div{padding-top:16px;border-top:1px solid var(--line)}.meta-grid span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#8A95A5;font-weight:800;margin-bottom:7px}.meta-grid strong{font-size:14px;line-height:1.45;font-weight:650;color:var(--navy)}.joy-dark-panel{background:var(--joy-dark);border-radius:28px;overflow:hidden}.hero-art{height:100%;min-height:500px;display:grid;place-items:center;padding:34px}.hero-art img{width:min(100%,520px);max-height:560px;object-fit:contain}.phase-rail{position:sticky;top:108px;z-index:30;padding:10px 14px;border:1px solid var(--line);border-radius:20px;background:rgba(243,245,248,.9);backdrop-filter:blur(18px);display:flex;gap:8px;justify-content:center}.phase-rail a{padding:9px 12px;border-radius:12px;color:#6E7A8C;font-size:12px;font-weight:700}.phase-rail a:hover{background:#fff;color:var(--navy)}.mobile-phase-menu{display:none}.phase{display:flex;align-items:center;gap:10px;margin-bottom:32px;color:#7E8999;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.11em}.phase b{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#F3F6FB;color:var(--navy);font-size:12px}.joy-section h2{font-size:clamp(60px,4.6vw,68px);line-height:1.02;margin:0 0 28px}.lead{font-size:21px;line-height:1.58;color:#48576C;margin:0 0 20px;max-width:900px}.body{font-size:16px;line-height:1.72;color:var(--text);margin:0 0 16px}.narrow-copy{max-width:1040px}.joy-board{margin:48px 0 0}.joy-board img{display:block;width:100%;border-radius:26px;border:1px solid var(--line);background:#181818}.joy-board figcaption,.media-card figcaption{margin-top:10px;font-size:12px;color:#8994A4;line-height:1.5}.soft-section{background:radial-gradient(circle at 88% 14%,rgba(176,201,245,.16),transparent 28%),radial-gradient(circle at 12% 88%,rgba(184,227,209,.14),transparent 26%),#FAFBFD}.split-copy{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start}.pattern-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:46px}.pattern-grid article{padding:26px;border-radius:24px;background:#fff;border:1px solid var(--line);min-height:210px}.pattern-grid article:nth-child(2){background:#F0FAF6}.pattern-grid article:nth-child(3){background:#FFF6F8}.pattern-grid article:nth-child(4){background:#F6F2FD}.pattern-grid span{font-size:11px;letter-spacing:.12em;font-weight:800;color:#8B96A6}.pattern-grid h3{font-size:22px;line-height:1.15;margin:30px 0 12px}.pattern-grid p{font-size:14px;line-height:1.6;color:var(--text);margin:0}.symbol-intro{margin-bottom:44px}.evidence-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.media-card{margin:0;padding:16px;border-radius:28px;background:#F8FAFC;border:1px solid var(--line)}.media-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:18px}.joy-quote{margin:56px auto;padding:0;max-width:1050px;border:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(36px,3.1vw,50px);line-height:1.12;letter-spacing:-.035em;text-align:center;color:var(--navy)}.concept-card{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center;padding:54px;color:#fff}.concept-card h2{font-family:Inter,ui-sans-serif,sans-serif;font-size:42px;line-height:1.04;letter-spacing:-.035em;margin:0 0 16px}.concept-card p{font-size:16px;line-height:1.65;color:#D5DCE5;margin:0}.concept-card img{width:100%;border-radius:18px}.light-kicker{color:#AEB9C6}.logo-showcase{margin:44px 0 18px;padding:0;min-height:auto;display:grid;place-items:center;background:none;border-radius:0;overflow:visible}.logo-single{display:block;width:min(100%,520px);max-height:none;object-fit:contain;border-radius:28px}.system-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.system-card{padding:34px;border-radius:28px;background:#fff;border:1px solid var(--line)}.system-card h3{font-size:28px;line-height:1.1;margin:0 0 16px}.system-card>p{font-size:15px;line-height:1.65;color:var(--text)}.swatches{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:28px 0 18px}.swatches span{position:relative;overflow:hidden;min-height:118px;padding:18px;border-radius:20px;border:1px solid rgba(33,52,80,.08);display:flex;flex-direction:column;justify-content:flex-end;background:var(--sw);color:#fff}.swatches span:nth-child(3),.swatches span:nth-child(4){color:var(--navy)}.swatches b{font-size:13px}.swatches small{font-size:11px;margin-top:3px;opacity:.72}.small-note{font-size:13px!important}.type-samples{display:grid;gap:12px;margin-top:28px}.type-samples>div{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:18px;padding:18px;border-radius:20px;background:#F7F8FA}.type-samples span{font-size:62px;line-height:1}.type-poppins{font-family:Inter,ui-sans-serif,sans-serif;font-weight:700}.type-hand{font-family:"Comic Sans MS","Bradley Hand",cursive;font-weight:700}.type-samples p{margin:0}.type-samples strong,.type-samples small{display:block}.type-samples strong{font-size:15px}.type-samples small{font-size:12px;color:#8793A3;margin-top:4px}.case-thought{margin-top:24px;padding:24px 28px;border-radius:22px;font-size:18px;line-height:1.45;font-weight:650;color:var(--navy);border:1px solid var(--line)}.lavender-thought{background:linear-gradient(135deg,#F7F2FD,#EEF4FC)}.mint-thought{background:linear-gradient(135deg,#F0FAF6,#F6F2FD)}.brandbook-cta{margin-top:18px;padding:30px 34px;border-radius:28px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:36px}.brandbook-cta .kicker{margin-bottom:10px}.brandbook-cta h3{font-size:26px;line-height:1.15;margin:0 0 10px}.brandbook-cta p{margin:0;max-width:720px;font-size:14px;line-height:1.65;color:var(--text)}.brandbook-link{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;padding:14px 19px;border-radius:999px;background:var(--navy);color:#fff;font-size:13px;font-weight:750;white-space:nowrap}.brandbook-link:hover{transform:translateY(-1px)}.result-section{background:linear-gradient(135deg,#FFF8FB 0%,#F5F2FD 52%,#EEF4FC 100%)}.result-grid{display:grid;grid-template-columns:1fr .78fr;gap:60px;align-items:center}.closing-line{font-family:Georgia,"Times New Roman",serif;font-size:28px;line-height:1.25;margin:34px 0;color:var(--navy)}.back-work{display:inline-flex;align-items:center;padding:13px 18px;border-radius:999px;background:var(--navy);color:#fff;font-size:13px;font-weight:700}.result-art{display:grid;place-items:center}.result-variant-panel{padding:0;background:none;border-radius:0;overflow:visible}.result-variant{display:block;width:min(100%,460px);border-radius:30px;object-fit:contain}.site-footer{width:min(calc(100% - 28px),var(--max));margin:0 auto 28px;padding:24px 8px;text-align:center;color:#7A8596;font-size:13px}
@media(max-width:1050px){.joy-hero,.split-copy,.concept-card,.logo-showcase,.system-grid,.result-grid{grid-template-columns:1fr}.joy-hero{gap:34px}.hero-art{min-height:430px}.meta-grid{grid-template-columns:1fr 1fr}.meta-grid>div:last-child{grid-column:1/-1}.pattern-grid{grid-template-columns:1fr 1fr}.concept-card img{max-width:760px;margin:0 auto}.logo-showcase{grid-template-columns:1fr}.result-art{min-height:auto}}
@media(max-width:760px){.brandbook-cta{align-items:flex-start;flex-direction:column;padding:24px}.brandbook-link{width:100%}.nav-wrap{top:10px;width:calc(100% - 20px);margin-top:10px}.main-nav{min-height:68px;padding:10px 14px 10px 16px;border-radius:22px}.logo img{width:142px}.nav-links{display:none}.mobile-nav{display:block}.hero,.pad{padding:44px 24px;border-radius:26px}.joy-hero{min-height:0}.hero h1{font-size:clamp(42px,12vw,56px);line-height:1.01}.hero-sub{font-size:18px}.hero-art{min-height:360px;padding:20px}.meta-grid{grid-template-columns:1fr}.meta-grid>div:last-child{grid-column:auto}.desktop-phase-rail{display:none}.mobile-phase-menu{display:block;position:sticky;top:88px;z-index:30;border:1px solid var(--line);border-radius:20px;background:rgba(243,245,248,.94);backdrop-filter:blur(18px);overflow:hidden}.mobile-phase-menu summary{list-style:none;min-height:62px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:15px;font-weight:750}.mobile-phase-menu summary::-webkit-details-marker{display:none}.phase-chevron{width:11px;height:11px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg)}.mobile-phase-panel{display:grid;padding:4px 18px 16px}.mobile-phase-panel a{padding:13px 0;color:#6F7B8D;font-size:14px;border-top:1px solid rgba(216,222,232,.65)}.joy-section h2{font-size:clamp(38px,11vw,48px)}.lead{font-size:18px}.pattern-grid,.evidence-grid{grid-template-columns:1fr}.pattern-grid article{min-height:0}.joy-quote{font-size:34px;margin:42px auto}.concept-card{padding:30px 22px}.concept-card h2{font-size:32px}.logo-showcase{grid-template-columns:1fr;padding:0;min-height:auto}.logo-single{width:min(100%,360px);max-height:none}.system-card{padding:25px}.swatches{grid-template-columns:1fr 1fr}.result-art{min-height:auto}.result-variant{width:min(100%,360px)}.site-footer{width:calc(100% - 20px);font-size:12px}}
@media(max-width:420px){.swatches{grid-template-columns:1fr}.type-samples>div{grid-template-columns:84px 1fr}.type-samples span{font-size:50px}}

/* Case-study system alignment — CAD is the reference.
   Intentionally limited to shared spacing / hierarchy tokens.
   Joy-specific composition and content remain untouched. */
@media (min-width:761px){
  .hero,
  .pad{
    padding:84px 82px 92px;
  }
  .joy-hero{
    min-height:680px;
    padding:88px 82px 74px;
  }
}

.kicker{
  font-size:12px;
  letter-spacing:.16em;
  font-weight:800;
  color:#8792A2;
  margin-bottom:16px;
}

.phase{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
}
.phase b{
  width:28px;
  height:28px;
  font-size:10px;
  background:#EEF3FB;
}

.hero h1,
.serif{
  font-weight:400;
}

.joy-section h2{
  margin-bottom:24px;
}

.lead{
  font-size:20px;
  line-height:1.7;
  color:#526178;
  max-width:840px;
}
.body{
  font-size:16px;
  line-height:1.75;
  color:#5E6B7E;
}

.phase-rail{
  top:116px;
  z-index:20;
  padding:10px 12px;
  border-radius:18px;
  background:rgba(244,246,249,.88);
  align-items:center;
  justify-content:flex-start;
  overflow:auto;
}
.phase-rail a{
  white-space:nowrap;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  color:#6F7B8D;
  font-weight:400;
}

@media (max-width:760px){
  .phase{
    margin-bottom:18px;
  }
  .phase b{
    width:28px;
    height:28px;
    font-size:10px;
  }
  .lead{
    font-size:18px;
    line-height:1.58;
  }
  .body{
    line-height:1.58;
  }
}