.color-hero{min-height:590px;display:grid;grid-template-columns:.82fr 1.18fr;overflow:hidden;border-radius:30px;background:var(--black);color:white}
.color-hero-copy{display:flex;flex-direction:column;justify-content:center;padding:70px clamp(38px,5vw,78px)}
.color-hero .hero-eyebrow{color:var(--orange)}
.color-hero h1{margin:0;font-size:clamp(112px,12vw,190px)}
.color-hero-copy>p:last-child{max-width:570px;margin:28px 0 0;color:rgba(255,255,255,.72);font-size:20px;line-height:1.55}
.color-hero-palette{display:grid;grid-template-columns:1.35fr 1fr 1.2fr 1fr;grid-template-rows:1fr 1fr;min-height:590px}
.color-hero-palette span{display:flex;align-items:flex-end;padding:25px;color:var(--eggshell);font:800 clamp(31px,3vw,51px)/.82 var(--display);text-transform:uppercase}
.hero-orange{grid-column:1;grid-row:1/3;background:var(--orange);color:var(--black)!important}.hero-eggshell{grid-column:2;grid-row:1/3;background:var(--eggshell);color:var(--black)!important}.hero-black{grid-column:3;grid-row:1/3;background:var(--black);box-shadow:inset 1px 0 rgba(255,255,255,.12)}.hero-red{grid-column:4;grid-row:1;background:var(--red)}.hero-gold{grid-column:4;grid-row:2;background:var(--gold)}

.palette-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:18px}
.color-card{overflow:hidden;border-radius:24px;background:white;box-shadow:0 12px 38px rgba(42,37,37,.05)}
.color-card.color-orange{grid-row:span 2}
.color-chip{min-height:245px;display:flex;flex-direction:column;justify-content:space-between;padding:25px}
.color-orange .color-chip{min-height:576px;background:var(--orange);color:var(--black)}.color-eggshell .color-chip{background:var(--eggshell)}.color-black .color-chip{background:var(--black);color:var(--eggshell)}.color-red .color-chip{background:var(--red);color:var(--eggshell)}.color-gold .color-chip{background:var(--gold);color:var(--eggshell)}
.color-chip>span{font:10px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.09em}
.color-chip strong{font:800 clamp(45px,4.8vw,76px)/.83 var(--display);text-transform:uppercase}
.color-data{padding:20px}
.color-data dl{display:grid;gap:9px;margin:0}.color-data dl div{display:grid;grid-template-columns:52px 1fr;gap:10px}.color-data dt,.color-data dd{margin:0;font:10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}.color-data dt{color:var(--muted)}
.color-data button{display:inline-flex;align-items:center;gap:10px;margin-top:18px;border:0;border-radius:10px;padding:10px 12px;background:var(--eggshell);color:var(--black);font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.09em;cursor:pointer;transition:.2s}.color-data button:hover{background:var(--black);color:white;transform:translateY(-2px)}.color-data button.is-copied{background:var(--status-green);color:white}
.color-data button.is-copied .small-copy-icon{width:14px;height:14px;border:0}.color-data button.is-copied .small-copy-icon::before{content:'✓';display:block;position:static;width:auto;height:auto;border:0;background:none;font:800 14px/1 var(--body)}

.role-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:15px}
.role-grid article{min-height:320px;display:flex;flex-direction:column;padding:24px;border-radius:22px;background:white}
.role-dot{width:42px;height:42px;border-radius:50%;box-shadow:0 0 0 8px var(--eggshell)}.role-dot.orange{background:var(--orange)}.role-dot.eggshell{background:var(--eggshell);box-shadow:0 0 0 1px rgba(42,37,37,.14),0 0 0 8px white}.role-dot.black{background:var(--black)}.role-dot.red{background:var(--red)}.role-dot.gold{background:var(--gold)}
.role-grid article>span{margin-top:38px;color:var(--muted);font:10px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.08em}.role-grid h3{margin:10px 0 12px;font-size:20px}.role-grid p{margin:auto 0 0;color:var(--muted);font-size:14px;line-height:1.5}

.pairing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.pair{min-height:360px;display:flex;flex-direction:column;padding:25px;border-radius:24px}
.pair strong{margin:auto 0 24px;font:800 clamp(53px,5vw,78px)/.82 var(--display);text-transform:uppercase}.pair p{margin:0;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}
.pair-status{align-self:flex-start;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.76);color:var(--black);font:9px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}.pair-status.body-safe::before{content:'✓ ';font-weight:800}.pair-status.display-only::before{content:'Aa ';font-weight:800}
.eggshell-black{background:var(--eggshell);color:var(--black)}.black-eggshell{background:var(--black);color:var(--eggshell)}.red-eggshell{background:var(--red);color:var(--eggshell)}.orange-black{background:var(--orange);color:var(--black)}.gold-black{background:var(--gold);color:var(--black)}
.black-eggshell .pair-status,.red-eggshell .pair-status{background:rgba(255,255,255,.9)}
.orange-black p,.gold-black p{align-self:flex-start;padding:6px 8px;border-radius:8px;background:white;color:var(--black)}
.contrast-note{display:grid;grid-template-columns:130px 1fr;gap:26px;margin-top:18px;padding:25px 28px;border-radius:18px;background:white}.contrast-note b{font:10px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}.contrast-note p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}

.logo-color-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.logo-color-grid>a{padding:9px 9px 20px;border-radius:22px;background:white;transition:.23s}.logo-color-grid>a:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(42,37,37,.1)}
.logo-sample{display:grid;place-items:center;height:255px;border-radius:16px}.logo-sample img{width:76%;max-height:100px}.on-eggshell{background:var(--eggshell)}.on-mildred{background:var(--black)}.on-roby{background:var(--orange)}
.logo-color-grid b,.logo-color-grid small{display:block;margin-left:12px}.logo-color-grid b{margin-top:18px;font-size:16px}.logo-color-grid small{margin-top:4px;color:var(--muted);font:10px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}
.logo-library-link{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding:22px 25px;border-radius:18px;background:var(--black);color:white}.logo-library-link span{color:rgba(255,255,255,.68);font-size:14px}.logo-library-link b{color:var(--orange);font-size:14px}.logo-library-link:hover b{color:white}

@media(max-width:1180px){.color-hero{grid-template-columns:.9fr 1.1fr}.color-hero-palette span{padding:18px;font-size:34px}.palette-grid{grid-template-columns:1fr 1fr}.color-card.color-orange{grid-row:auto}.color-orange .color-chip{min-height:320px}.role-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.color-hero{position:relative;grid-template-columns:1fr;min-height:780px}.color-hero-copy{position:relative;z-index:2;align-self:end;grid-row:1;padding:340px 30px 58px;background:linear-gradient(0deg,var(--black) 18%,rgba(42,37,37,.96) 62%,transparent 100%)}.color-hero-palette{position:absolute;inset:0;min-height:780px}.color-hero-palette span{align-items:flex-start;padding-top:86px}.palette-grid{grid-template-columns:1fr 1fr}.role-grid{grid-template-columns:1fr 1fr}.pairing-grid{grid-template-columns:1fr 1fr}.logo-color-grid{grid-template-columns:1fr}.logo-sample{height:300px}}
@media(max-width:640px){.color-hero{min-height:700px;border-radius:22px}.color-hero-copy{padding:300px 22px 44px}.color-hero h1{font-size:104px}.color-hero-copy>p:last-child{font-size:17px}.color-hero-palette{min-height:700px}.color-hero-palette span{padding:82px 12px 12px;font-size:29px}.palette-grid,.role-grid,.pairing-grid{grid-template-columns:1fr}.color-chip,.color-orange .color-chip,.color-black .color-chip{min-height:330px}.role-grid article{min-height:270px}.pair{min-height:330px}.contrast-note{grid-template-columns:1fr;gap:9px}.logo-library-link{align-items:flex-start;flex-direction:column;gap:8px}.logo-sample{height:250px}}

@media(min-width:901px){.color-hero,.color-hero-palette{min-height:590px}}

.color-data button{font-weight:600}
.color-data button.is-copied .small-copy-icon::before{font:600 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace}