:root{
    --bg:#FCFCFC;
    --panel:#F5F7FA;
    --panel-blue:#F5F7FA;
    --ink:#111827;
    --primary:#111827;
    --ink-soft:#EEF1F4;
    --slate:#5B6472;
    --slate-soft:#9CA6B0;
    --line:#E5E7EB;
    --secondary:#4B6D98;
    --secondary-soft:#F0F4FA;
    --tertiary:#5F7267;
    --tertiary-soft:#F0F4F1;
    --quaternary:#A85830;
    --white:#FFFFFF;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{ background:var(--bg); color:var(--ink); font-family:'Inter Tight',sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
  .eyebrow{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; display:flex; align-items:center; gap:10px; color:var(--secondary); }
  .eyebrow::before{ content:''; width:20px; height:1px; background:currentColor; display:inline-block; }
  h1,h3{ font-family:'Geist',sans-serif; font-weight:600; letter-spacing:-0.01em; }
  h2{ font-family:'Source Serif 4',serif; font-weight:600; letter-spacing:-0.005em; }
  a{ color:inherit; }
  .wrap{ max-width:1080px; margin:0 auto; padding:0 40px; }

  nav{ position:sticky; top:0; z-index:50; background:var(--primary); border-bottom:1px solid rgba(255,255,255,0.08); }
  nav .wrap{ display:flex; justify-content:space-between; align-items:center; height:64px; }
  .nav-right{ display:flex; align-items:center; gap:26px; }
  .nav-divider{ width:1px; height:18px; background:rgba(255,255,255,0.18); }
  .nav-linkedin{ display:flex; align-items:center; color:rgba(255,255,255,0.75); transition:color .2s ease; }
  .nav-linkedin:hover{ color:var(--secondary); }
  .nav-brand{ display:flex; align-items:center; gap:10px; }
  .nav-avatar{ width:30px; height:30px; border-radius:50%; object-fit:cover; flex-shrink:0; display:block; border:1.5px solid rgba(255,255,255,0.25); }
  .nav-name{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:17px; color:var(--white); }
  .nav-links{ display:flex; gap:32px; }
  .nav-links a{ font-family:'Inter Tight',sans-serif; font-weight:600; font-size:12px; letter-spacing:0.01em; color:rgba(255,255,255,0.75); text-decoration:none; transition:color .2s ease; }
  .nav-links a:hover{ color:var(--secondary); }

  header.hero{ padding:100px 0 0; }
  .hero h1{ font-family:'Source Serif 4',serif; font-size:clamp(32px,5vw,52px); line-height:1.15; max-width:880px; margin:26px 0 22px; font-weight:600; letter-spacing:-0.01em; }
  .hero h1 .accent-blue{ color:var(--secondary); }
  .hero h1 .accent-green{ color:var(--secondary); }
  .hero-sub{ max-width:620px; font-size:15.5px; color:var(--slate); margin-bottom:44px; line-height:1.7; }
  .problem-tags{ display:flex; flex-wrap:wrap; gap:12px; }
  .problem-tag{ border:1px solid var(--line); border-radius:24px; padding:10px 18px; font-size:13.5px; font-weight:500; color:var(--ink); background:var(--white); transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
  .problem-tag:hover{ border-color:var(--slate-soft); box-shadow:0 4px 10px rgba(14,42,71,0.08); transform:translateY(-2px); }
  .hero-cta{ display:flex; gap:16px; margin-bottom:70px; flex-wrap:wrap; }
  .btn{ font-family:'Inter Tight',sans-serif; font-weight:600; font-size:12.5px; letter-spacing:0.01em; text-decoration:none; padding:14px 26px; display:inline-block; transition:opacity .2s ease, background .2s ease, color .2s ease, border-color .2s ease; border-radius:3px; }
  .btn-primary{ background:var(--primary); color:var(--white); }
  .btn-primary:hover{ opacity:.85; }
  .btn-ghost{ border:1px solid var(--line); color:var(--ink); }
  .btn-ghost:hover{ border-color:var(--secondary); color:var(--secondary); }

  .pillar-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  .pillar-card{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:28px 24px; transition:border-color .3s ease, box-shadow .3s ease; }
  .pillar-card:hover{ border-color:var(--pc); box-shadow:0 8px 22px rgba(17,24,39,0.06); }
  .pillar-card .card-label{ display:block; font-family:'Inter Tight',sans-serif; font-weight:600; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--slate); margin-bottom:14px; }
  .pillar-card .card-verb{ font-family:'Source Serif 4',serif; font-size:24px; font-weight:600; color:var(--pc); margin-bottom:10px; }
  .pillar-card .card-shift{ font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.5; }
  .pillar-card .card-shift .arrow{ color:var(--pc); font-weight:400; margin:0 2px; }
  .impact-closing{ margin-top:48px; padding-left:24px; border-left:3px solid var(--secondary); max-width:680px; font-family:'Source Serif 4',serif; font-size:20px; font-weight:500; color:var(--ink); line-height:1.55; }
  .impact-closing strong{ color:var(--secondary); font-weight:700; }
  @media (prefers-reduced-motion:reduce){
    .pillar-card, .card-screen{ transition:none; }
  }

  .diagram-wrap{ background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .diagram-wrap svg{ display:block; width:100%; height:auto; }

  #proof{ position:relative; overflow:hidden; padding:120px 0; }
  #proof::before, #proof::after{ content:''; position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0; }
  #proof::before{ width:420px; height:420px; top:-140px; left:-120px; background:rgba(75,109,152,0.35); }
  #proof::after{ width:380px; height:380px; bottom:-160px; right:-100px; background:rgba(183,89,26,0.22); }
  #proof .wrap{ position:relative; z-index:1; }

  section{ padding:96px 0; border-bottom:1px solid var(--line); }
  section.panel{ background:var(--panel); }
  .section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:52px; }
  .section-head h2{ font-size:clamp(24px,3.2vw,34px); max-width:600px; }
  .section-head .note{ max-width:280px; font-size:14px; color:var(--slate); padding-bottom:4px; }

  .belief{ padding:110px 0; text-align:left; border-bottom:1px solid var(--line); background:var(--panel); }
  .belief-main-quote{ font-family:'Source Serif 4',serif; font-size:clamp(24px,3.2vw,34px); font-weight:600; line-height:1.4; max-width:820px; color:var(--ink); margin:16px 0 0; text-align:left; }
  .belief-main-quote .hl-green{ color:var(--secondary); }
  .belief-attr-meta{ margin-top:24px; margin-bottom:52px; text-align:left; font-family:'Inter Tight',sans-serif; font-size:12.5px; color:var(--slate); letter-spacing:0.05em; text-transform:uppercase; }
  .belief .eyebrow{ justify-content:flex-start; }

  .philo-illo{ margin-top:36px; }
  .philo-illo svg{ display:block; width:100%; height:auto; max-width:100%; overflow:visible; }
  .philo-illo .block{ opacity:0.72; transform:translate(var(--dx), var(--dy)) rotate(var(--rot)); transform-origin:center; transition:transform 1.3s cubic-bezier(0.16,1,0.3,1) var(--d), opacity 1s ease var(--d); transform-box:fill-box; }
  .philo-illo.in .block{ opacity:1; transform:translate(0,0) rotate(0deg); }
  .philo-illo .journey-bar{ opacity:0; transform:scale(0.92); transform-origin:center; transition:opacity .6s ease 2.4s, transform .6s cubic-bezier(0.34,1.4,0.64,1) 2.4s; transform-box:fill-box; }
  .philo-illo.in .journey-bar{ opacity:1; transform:scale(1); }
  .philo-illo .journey-bar text{ font-family:'Inter Tight',sans-serif; font-weight:600; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; fill:var(--white); }

  @media (prefers-reduced-motion:reduce){
    .philo-illo .block, .philo-illo .journey-bar{ transition:none; opacity:1; transform:none; }
  }

  .proof-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
  .proof-preview-card{ display:flex; flex-direction:column; height:100%; background:var(--white); border:1px solid var(--line); border-radius:10px; padding:32px; box-shadow:0 4px 14px rgba(0,0,0,0.18); text-decoration:none; color:inherit; transition:border-color .2s ease; overflow:hidden; }
  .proof-preview-card:not(.static):hover{ border-color:rgba(75,109,152,0.4); }
  .card-visual{ position:relative; margin:-32px -32px 22px; height:170px; overflow:hidden; background:var(--panel); border-radius:10px 10px 0 0; }
  .card-screen{ position:absolute; top:18px; left:6%; right:6%; height:170px; border-radius:8px; overflow:hidden; border:1px solid rgba(17,24,39,0.12); box-shadow:0 18px 34px rgba(17,24,39,0.22); transform:rotate(-4deg) scale(1.06); background:var(--white); transition:transform .3s ease; }
  .proof-preview-card:hover .card-screen{ transform:rotate(-2deg) scale(1.08); }
  .card-screen-bar{ display:flex; align-items:center; gap:4px; height:16px; padding:0 8px; background:var(--ink-soft); }
  .card-screen-bar i{ width:5px; height:5px; border-radius:50%; background:var(--slate-soft); display:block; }
  .card-screen img{ display:block; width:100%; height:calc(100% - 16px); object-fit:cover; object-position:top; }
  .proof-preview-eyebrow{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--secondary); margin-bottom:20px; }
  .proof-preview-title{ font-family:'Source Serif 4',serif; font-size:clamp(18px,2vw,22px); font-weight:600; line-height:1.3; margin-bottom:16px; flex:1; }
  .proof-preview-desc{ font-size:13.5px; color:var(--slate); line-height:1.6; margin-bottom:28px; }
  .proof-preview-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
  .proof-preview-tag{ font-size:11px; font-weight:500; background:var(--panel); color:var(--slate); border-radius:20px; padding:5px 13px; }
  .proof-preview-cta{ font-size:12.5px; font-weight:600; color:var(--secondary); margin-top:auto; }
  .proof-preview-cta.muted{ color:var(--slate); }
  .proof-preview-card:hover .proof-preview-cta:not(.muted){ text-decoration:underline; }
  .working-list{ display:flex; flex-direction:column; }
  .working-item{ display:flex; align-items:flex-start; gap:20px; padding:26px 0; border-top:1px solid var(--line); }

  .quote-scroll-header{ display:flex; align-items:center; justify-content:space-between; margin-top:52px; margin-bottom:20px; }
  .quote-scroll-label{ display:block; font-family:'Inter Tight',sans-serif; font-weight:600; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--slate); }
  .quote-scroll-arrows{ display:flex; gap:8px; }
  .quote-arrow{ flex-shrink:0; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--white); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:border-color .2s ease, color .2s ease; }
  .quote-arrow:hover{ border-color:var(--secondary); color:var(--secondary); }
  .quote-arrow:disabled{ opacity:0.35; cursor:default; }
  .quote-arrow:disabled:hover{ border-color:var(--line); color:var(--ink); }
  .quote-arrow svg{ width:16px; height:16px; }
  .quote-scroll{ overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x proximity; scrollbar-width:none; -ms-overflow-style:none; mask-image:linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
  .quote-scroll::-webkit-scrollbar{ display:none; }
  .quote-track{ display:flex; gap:16px; width:max-content; }
  .quote-card{ flex-shrink:0; width:300px; scroll-snap-align:start; background:var(--white); border:1px solid var(--line); border-radius:10px; padding:20px 22px; }
  .quote-card p{ font-size:13.5px; color:var(--ink); line-height:1.55; margin-bottom:14px; }
  .quote-role{ font-family:'Inter Tight',sans-serif; font-weight:600; font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--secondary); }
  .working-item:last-child{ border-bottom:1px solid var(--line); }
  .working-item .mark{ font-family:'Inter Tight',sans-serif; font-weight:500; font-size:12px; color:var(--secondary); flex-shrink:0; padding-top:5px; }
  .working-item-title{ font-family:'Source Serif 4',serif; font-size:19px; font-weight:600; color:var(--ink); margin-bottom:6px; }
  .working-item-desc{ font-size:14px; color:var(--slate); line-height:1.6; max-width:480px; }
  footer{ padding:100px 0 70px; border-bottom:none; background:var(--primary); }
  footer h2{ font-size:clamp(19px,2.2vw,24px); font-weight:600; max-width:560px; margin-bottom:40px; color:var(--white); }
  .contact-list{ display:flex; flex-direction:column; max-width:380px; }
  .contact-row{ display:flex; align-items:center; justify-content:flex-start; gap:16px; width:100%; padding:16px 0; border-top:1px solid rgba(255,255,255,0.12); color:inherit; text-decoration:none; font-family:'Inter Tight',sans-serif; cursor:pointer; background:none; border-left:none; border-right:none; border-bottom:none; text-align:left; }
  .contact-row-icon{ flex-shrink:0; width:20px; height:20px; display:flex; align-items:center; justify-content:center; color:#8FB3E0; }
  .contact-list a.contact-row:last-child, .contact-list button.contact-row:last-child{ border-bottom:1px solid rgba(255,255,255,0.12); }
  .contact-detail{ display:block; font-size:16px; font-weight:500; color:var(--white); transition:color .2s ease; }
  .contact-row:hover .contact-detail{ color:#8FB3E0; }

  @media (max-width:860px){
    .wrap{ padding:0 24px; }
    .nav-links{ display:none; }
    .pillar-cards{ grid-template-columns:repeat(2,1fr); }
    .belief{ padding:70px 0; }
    .proof-grid{ grid-template-columns:1fr; }
    .section-head{ flex-direction:column; align-items:flex-start; gap:16px; }
    section{ padding:60px 0; }
    #proof{ padding:72px 0; }
    header.hero{ padding:64px 0 0; }
  }
  @media (max-width:600px){
    .wrap{ padding:0 20px; }
    .pillar-cards{ grid-template-columns:1fr; }
    .card-visual, .card-screen{ height:150px; }
  }