:root{
    --cream:#FBF6EC; --cream-2:#F4EAD7; --paper:#FFFFFF;
    --ink:#1E2128; --ink-2:#2C313A; --ink-soft:#4A4F59; --muted:#6F665A;
    --terracotta:#C2562F; --terracotta-deep:#A2421F;
    --gold:#E0A23A; --gold-soft:#F3D08A;
    --teal:#01A6BC; --teal-deep:#0A7E90;
    --line:rgba(30,33,40,.12);
    --shadow-sm:0 2px 10px rgba(60,40,20,.07);
    --shadow:0 18px 50px -22px rgba(60,38,18,.35);
    --shadow-lg:0 40px 90px -40px rgba(40,24,10,.5);
    --r:14px; --r-lg:24px; --r-xl:34px;
    --container:1180px;
    --ease:cubic-bezier(.22,.61,.36,1);
    --serif:"Fraunces",Georgia,serif;
    --sans:"Mulish",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    --geo:"Montserrat",var(--sans);
  }
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth; scroll-padding-top:88px}
  body{margin:0; background:var(--cream); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
  h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.08; letter-spacing:-.015em; margin:0}
  p{margin:0 0 1rem}
  a{color:inherit; text-decoration:none}
  img{display:block; max-width:100%}
  ::selection{background:var(--terracotta); color:#fff}
  :focus-visible{outline:3px solid var(--teal); outline-offset:3px; border-radius:6px}
  .wrap{width:min(100% - 44px,var(--container)); margin-inline:auto}
  .eyebrow{font-weight:800; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--terracotta); display:inline-flex; align-items:center; gap:.6rem; margin:0 0 1rem}
  .eyebrow::before{content:""; width:24px; height:2px; background:var(--terracotta)}
  .lead{font-size:1.15rem; color:var(--ink-soft); max-width:62ch}

  .topbar{position:sticky; top:0; z-index:60; background:rgba(251,246,236,.85); backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:.3s}
  .topbar.scrolled{border-color:var(--line); box-shadow:0 10px 30px -22px rgba(60,40,20,.5)}
  .topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:64px}
  .topbar .bl{display:flex; align-items:center; gap:.7rem; font-weight:800; letter-spacing:.01em}
  .topbar .bl img{height:30px}
  .topbar .bl span{color:var(--muted); font-weight:700; font-size:.92rem}
  .tnav{display:flex; gap:.2rem; flex-wrap:wrap}
  .tnav a{font-weight:700; font-size:.83rem; color:var(--ink-2); padding:.4rem .6rem; border-radius:8px; transition:.2s}
  .tnav a:hover{color:var(--terracotta); background:rgba(194,86,47,.08)}

  .cover{background:radial-gradient(70% 90% at 82% 0%,rgba(1,166,188,.22),transparent 55%),radial-gradient(60% 80% at 0% 100%,rgba(194,86,47,.18),transparent 55%),var(--ink); color:#fff; padding:clamp(56px,9vw,118px) 0 clamp(48px,7vw,92px)}
  .cover .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center}
  .cover .tag{font-weight:800; letter-spacing:.24em; text-transform:uppercase; font-size:.74rem; color:var(--gold); margin-bottom:1.4rem; display:flex; align-items:center; gap:.6rem}
  .cover .tag::before{content:""; width:24px; height:2px; background:var(--gold)}
  .cover h1{font-size:clamp(2.8rem,7vw,5.4rem); font-weight:600; letter-spacing:-.02em}
  .cover h1 em{font-style:italic; color:var(--teal); font-weight:500}
  .cover p{color:rgba(255,255,255,.78); font-size:1.16rem; max-width:48ch; margin:1.4rem 0 0}
  .cover .meta{margin-top:2.2rem; display:flex; gap:2rem; flex-wrap:wrap; font-size:.86rem; color:rgba(255,255,255,.6); font-weight:700; letter-spacing:.04em}
  .cover .meta b{display:block; color:#fff; font-family:var(--serif); font-size:1.2rem; font-weight:600; letter-spacing:0}
  .cover-logo{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-xl); padding:clamp(2rem,4vw,3.4rem); display:grid; place-items:center}
  .cover-logo img{width:100%; max-width:360px}

  section{padding:clamp(56px,8vw,104px) 0; border-bottom:1px solid var(--line)}
  .snum{font-family:var(--serif); font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:600; color:var(--terracotta); letter-spacing:.01em; line-height:1}
  .shead{display:flex; align-items:baseline; gap:1rem; margin-bottom:.6rem}
  .shead h2{font-size:clamp(1.9rem,4.2vw,3rem)}
  .sintro{max-width:64ch; color:var(--ink-soft); font-size:1.1rem; margin-bottom:clamp(2rem,4vw,3.2rem)}

  .essence{display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem}
  .ecard{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:2rem 1.8rem; box-shadow:var(--shadow-sm)}
  .ecard h3{font-size:1.32rem; margin-bottom:.5rem}
  .ecard p{color:var(--ink-soft); font-size:.98rem; margin:0}
  .ecard .k{font-weight:800; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-deep); margin-bottom:1rem}
  .pers{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem}
  .pers span{background:var(--cream-2); border:1px solid var(--line); border-radius:100px; padding:.5rem 1.1rem; font-weight:700; font-size:.9rem; color:var(--ink-2)}

  .logo-row{display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; margin-bottom:1.3rem}
  .logo-card{border-radius:var(--r-lg); padding:clamp(2rem,4vw,3.4rem); display:grid; place-items:center; min-height:230px; position:relative; border:1px solid var(--line)}
  .logo-card img{width:100%; max-width:330px}
  .logo-card .cap{position:absolute; left:1.2rem; top:1.1rem; font-weight:800; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase}
  .lc-light{background:var(--paper)}
  .lc-light .cap{color:var(--muted)}
  .lc-cream{background:var(--cream-2)}
  .lc-cream .cap{color:var(--muted)}
  .lc-dark{background:var(--ink)} .lc-dark .cap{color:rgba(255,255,255,.55)}
  .lc-teal{background:var(--teal)} .lc-teal .cap{color:rgba(255,255,255,.85)}

  .anatomy{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,4vw,3.4rem); align-items:center; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(2rem,4vw,3rem); box-shadow:var(--shadow-sm)}
  .anatomy .sym{background:var(--cream); border-radius:var(--r-lg); padding:2rem; display:grid; place-items:center}
  .anatomy .sym img{width:100%; max-width:230px}
  .alist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.1rem}
  .alist li{display:flex; gap:1rem}
  .alist .n{flex:none; width:34px; height:34px; border-radius:10px; background:var(--teal); color:#fff; font-family:var(--serif); font-weight:600; display:grid; place-items:center}
  .alist h4{font-family:var(--sans); font-weight:800; font-size:1rem; margin:0 0 .15rem}
  .alist p{margin:0; color:var(--ink-soft); font-size:.94rem}

  .twocol{display:grid; grid-template-columns:1fr 1fr; gap:1.3rem}
  .panel{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.8rem,3vw,2.6rem); box-shadow:var(--shadow-sm)}
  .panel h3{font-size:1.3rem; margin-bottom:.5rem}
  .panel p{color:var(--ink-soft); font-size:.95rem}
  .clearbox{margin-top:1.4rem; background:var(--cream); border-radius:var(--r); padding:1.5rem; display:grid; place-items:center}
  .clearframe{position:relative; padding:clamp(20px,5vw,38px); border:2px dashed var(--teal); border-radius:10px; background:var(--paper)}
  .clearframe img{width:100%; max-width:240px}
  .clearframe span{position:absolute; font-weight:800; color:var(--teal-deep); font-size:.8rem; background:var(--paper); padding:0 .3rem}
  .cf-t{top:-10px; left:50%; transform:translateX(-50%)}
  .cf-l{left:-12px; top:50%; transform:translateY(-50%) rotate(-90deg)}
  .minrow{display:flex; align-items:flex-end; gap:2rem; margin-top:1.4rem; flex-wrap:wrap}
  .minrow .mi{text-align:center}
  .minrow .mi .b{background:var(--cream); border:1px solid var(--line); border-radius:10px; display:grid; place-items:center; margin-bottom:.6rem}
  .minrow .mi img{display:block}
  .minrow .mi small{font-weight:800; font-size:.74rem; letter-spacing:.06em; color:var(--muted)}

  .dont{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem}
  .dcard{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm)}
  .dcard .vis{height:130px; display:grid; place-items:center; background:var(--cream-2); border-bottom:1px solid var(--line); overflow:hidden}
  .dcard .vis img{max-width:150px; max-height:84px}
  .dcard .txt{padding:1rem 1.2rem; display:flex; gap:.6rem; align-items:flex-start}
  .dcard .txt svg{flex:none; width:20px; height:20px; margin-top:1px}
  .dcard .txt b{font-weight:800; font-size:.95rem}
  .dcard .txt p{margin:.1rem 0 0; font-size:.86rem; color:var(--muted)}
  .x-cross{color:var(--terracotta)}
  .v-check{color:var(--teal-deep)}
  .squash{transform:scaleX(1.5)} .rot{transform:rotate(-8deg)}
  .glow{filter:drop-shadow(0 0 10px rgba(1,166,188,.9))}

  .pal{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-bottom:1.1rem}
  .pal.four{grid-template-columns:repeat(4,1fr)}
  .sw{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--paper); cursor:pointer; transition:transform .2s var(--ease),box-shadow .2s}
  .sw:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
  .sw .chip{height:128px; position:relative}
  .sw .chip .copy{position:absolute; right:.7rem; top:.7rem; font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; background:rgba(255,255,255,.8); color:var(--ink); padding:.25rem .5rem; border-radius:6px; opacity:0; transition:.2s}
  .sw:hover .chip .copy{opacity:1}
  .sw .info{padding:1rem 1.1rem 1.2rem}
  .sw .info b{font-size:1rem; font-weight:800}
  .sw .info code{display:block; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.84rem; color:var(--ink-2); margin-top:.3rem}
  .sw .info span{display:block; font-size:.78rem; color:var(--muted); margin-top:.5rem; line-height:1.4}
  .tints{display:flex; border-radius:12px; overflow:hidden; border:1px solid var(--line); margin-top:.4rem}
  .tints div{flex:1; height:54px; display:grid; place-items:end center; padding-bottom:.3rem; font-size:.66rem; font-weight:800; font-family:ui-monospace,monospace}
  .label{font-weight:800; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 1rem}

  .type-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.8rem,3vw,2.6rem); box-shadow:var(--shadow-sm); margin-bottom:1.3rem}
  .type-card .role{display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; align-items:baseline; border-bottom:1px solid var(--line); padding-bottom:1rem; margin-bottom:1.3rem}
  .type-card .role b{font-weight:800; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--terracotta)}
  .type-card .role span{color:var(--muted); font-weight:700; font-size:.9rem}
  .spec-geo{font-family:var(--geo); font-weight:800; font-size:clamp(2rem,5vw,3.4rem); letter-spacing:.02em; color:var(--teal-deep)}
  .spec-serif{font-family:var(--serif); font-weight:600; font-size:clamp(2.2rem,5.5vw,3.8rem); line-height:1.05}
  .glyphs{font-family:var(--serif); font-size:1.5rem; color:var(--ink-2); margin-top:1rem; letter-spacing:.02em; word-spacing:.1em}
  .weights{display:flex; gap:1.4rem; flex-wrap:wrap; margin-top:1.2rem}
  .weights span{font-size:1.4rem}
  .scale{display:flex; flex-direction:column; gap:.7rem; margin-top:1rem}
  .scale div{display:flex; align-items:baseline; gap:1rem; border-bottom:1px dashed var(--line); padding-bottom:.6rem}
  .scale .t{flex:none; width:62px; font-weight:800; font-size:.76rem; color:var(--muted)}

  .ele{display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem}
  .ele .e{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.6rem; box-shadow:var(--shadow-sm); text-align:center}
  .ele .e .box{height:96px; display:grid; place-items:center; margin-bottom:1rem}
  .ele .e b{font-weight:800; font-size:.95rem}
  .ele .e p{font-size:.82rem; color:var(--muted); margin:.2rem 0 0}
  .eq{display:flex; align-items:flex-end; gap:5px; height:60px}
  .eq i{width:7px; border-radius:5px; background:linear-gradient(var(--gold),var(--terracotta)); animation:eq 1.3s var(--ease) infinite}
  @keyframes eq{0%,100%{height:14px}50%{height:54px}}
  .keys{display:flex; height:54px; width:120px; border:2px solid #073C46; border-radius:5px; overflow:hidden; background:#fff}
  .keys i{flex:1; border-right:2px solid #073C46; position:relative}
  .keys i:last-child{border-right:0}
  .keys i:nth-child(1)::after,.keys i:nth-child(2)::after,.keys i:nth-child(4)::after,.keys i:nth-child(5)::after,.keys i:nth-child(6)::after{content:""; position:absolute; top:-1px; right:-7px; width:11px; height:60%; background:#073C46; z-index:3}

  .photo-grid{display:grid; grid-template-columns:2fr 1fr 1fr; grid-auto-rows:150px; gap:1rem; margin-bottom:1.6rem}
  .photo-grid figure{margin:0; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm)}
  .photo-grid img{width:100%; height:100%; object-fit:cover}
  .photo-grid .big{grid-row:span 2}
  .principles{display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem 2rem}
  .principles div{display:flex; gap:.7rem; align-items:flex-start; font-size:.96rem; color:var(--ink-soft)}
  .principles svg{flex:none; width:20px; height:20px; color:var(--teal-deep); margin-top:3px}

  .voice{display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-bottom:1.8rem}
  .vcard{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.6rem; box-shadow:var(--shadow-sm)}
  .vcard h4{font-family:var(--sans); font-weight:800; font-size:1rem; margin:0 0 .4rem}
  .vcard p{font-size:.86rem; color:var(--muted); margin:0}
  .vcard .d{width:40px; height:40px; border-radius:11px; background:var(--cream-2); display:grid; place-items:center; margin-bottom:1rem; color:var(--terracotta)}
  .vcard .d svg{width:20px;height:20px}
  .saynot{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
  .saynot .b{border-radius:var(--r-lg); padding:1.6rem 1.8rem; border:1px solid var(--line)}
  .saynot .say{background:rgba(1,166,188,.07)} .saynot .not{background:rgba(194,86,47,.06)}
  .saynot h4{font-family:var(--sans); display:flex; align-items:center; gap:.5rem; font-size:.95rem; margin:0 0 .8rem}
  .saynot ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.5rem}
  .saynot li{font-size:.94rem; color:var(--ink-soft)}
  .saynot .say h4{color:var(--teal-deep)} .saynot .not h4{color:var(--terracotta-deep)}

  .uses{display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem}
  .use{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); background:var(--paper)}
  .use .vis{height:200px; display:grid; place-items:center; position:relative}
  .use .vis.avatar{background:radial-gradient(circle at 50% 40%,var(--teal),var(--teal-deep))}
  .use .avatar .av{width:108px; height:108px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:var(--shadow)}
  .use .avatar .av img{width:74px}
  .use .vis.card-dark{background:var(--ink)}
  .use .card-dark .biz{width:80%; aspect-ratio:1.7/1; background:linear-gradient(135deg,#23262e,#15171c); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:1rem 1.2rem; display:flex; flex-direction:column; justify-content:space-between}
  .use .card-dark .biz img{height:30px; width:auto; align-self:flex-start}
  .use .card-dark .biz small{color:rgba(255,255,255,.6); font-size:.62rem; letter-spacing:.04em}
  .use .vis.btns{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem; background:var(--cream-2)}
  .ubtn{font-family:var(--sans); font-weight:800; font-size:.86rem; padding:.7rem 1.5rem; border-radius:100px; border:0; display:inline-flex; align-items:center; justify-content:center; line-height:1; cursor:pointer}
  .ubtn.t{background:var(--terracotta); color:#fff} .ubtn.o{background:transparent; border:2px solid var(--ink); color:var(--ink)}
  .use .lab{padding:.9rem 1.2rem; font-weight:800; font-size:.8rem; letter-spacing:.06em; color:var(--muted); border-top:1px solid var(--line)}

  .footer{background:var(--ink); color:rgba(255,255,255,.6); padding:clamp(40px,6vw,64px) 0 2.4rem; border:0}
  .footer .wrap{display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:space-between; align-items:center}
  .footer img{height:46px}
  .footer .r{text-align:right; font-size:.85rem}
  .footer a{color:var(--gold)}

  .toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:.7rem 1.3rem; border-radius:100px; font-weight:700; font-size:.9rem; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:.3s var(--ease); z-index:90}
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

  .reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .reveal.in{opacity:1; transform:none}

  @media(max-width:900px){
    .cover .wrap{grid-template-columns:1fr} .cover-logo{order:-1}
    .essence,.dont,.ele,.voice,.pal,.pal.four{grid-template-columns:1fr 1fr}
    .anatomy,.logo-row,.twocol,.saynot,.uses,.photo-grid,.principles{grid-template-columns:1fr}
    .photo-grid{grid-auto-rows:180px} .photo-grid .big{grid-row:auto}
    .tnav{display:none}
  }
  @media(max-width:560px){
    .essence,.dont,.ele,.voice,.pal,.pal.four,.uses{grid-template-columns:1fr}
  }
  @media(prefers-reduced-motion:reduce){*{animation:none!important}.reveal{opacity:1;transform:none;transition:none}}