:root { --pine:#023022;--pine-700:#008573;--oat:#f7f9f8;--leaf:#ccf3ea;--signal:#12a594;--ink:#0d3d38;--moss:#5f6563;--fog:#f7f9f8;--white:#fff;--line:#d7dad9;--display:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0;color:var(--ink);background:var(--fog);font-family:var(--body); } a { color:inherit;text-decoration:none; }.wrap { width:min(1180px,calc(100% - 64px));margin-inline:auto; }
.topbar { position:fixed;z-index:20;top:0;left:0;width:100%;height:62px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 25px;color:var(--oat);border-bottom:1px solid rgba(255,255,255,.12);background:rgba(2,48,34,.88);backdrop-filter:blur(18px);font-size:12px; }.topbar > a:last-child { justify-self:end;padding:9px 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px; }.topmark { display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700; }.topmark img { width:25px;height:25px;object-fit:contain;filter:brightness(0) invert(1); }
.brand-hero { position:relative;min-height:810px;overflow:hidden;display:flex;align-items:center;padding:120px max(42px,calc((100vw - 1180px)/2));color:var(--oat);background:var(--pine); }.hero-content { position:relative;z-index:2;max-width:960px; }.hero-content > p { margin:0 0 30px;color:var(--leaf);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; }.master-logo { width:min(430px,70vw);height:auto; }.hero-content h1 { margin:47px 0 0;font:500 clamp(65px,7.4vw,112px)/.91 var(--display);letter-spacing:-.07em; }.hero-principles { display:flex;align-items:center;gap:16px;margin-top:39px;color:#abc2b8;font-size:14px; }.hero-principles i { width:5px;height:5px;border-radius:50%;background:var(--signal); }.hero-orbit { position:absolute;border:1px solid rgba(220,232,216,.11);border-radius:50%; }.hero-orbit.one { width:690px;height:690px;right:-120px;top:60px;box-shadow:0 0 0 100px rgba(220,232,216,.018); }.hero-orbit.two { width:390px;height:390px;right:30px;top:210px; }.hero-palette { position:absolute;z-index:2;right:max(42px,calc((100vw - 1180px)/2));bottom:42px;display:grid;grid-template-columns:repeat(4,110px);overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:16px;box-shadow:0 18px 45px rgba(0,0,0,.18); }.hero-palette span { min-height:94px;display:flex;justify-content:flex-end;flex-direction:column;padding:12px;color:var(--pine);background:var(--swatch); }.hero-palette span:first-child { color:var(--oat); }.hero-palette b,.hero-palette small { display:block; }.hero-palette b { font:700 11px var(--display); }.hero-palette small { margin-top:3px;font-size:9px;opacity:.75; }
.brand-thesis { display:grid;grid-template-columns:150px 1fr;gap:20px 55px;padding-block:120px; }.section-number { margin:8px 0 0;color:var(--pine-700);font:700 11px var(--display);letter-spacing:.1em;text-transform:uppercase; }.brand-thesis h2 { max-width:850px;margin:0;font:500 clamp(45px,5vw,70px)/.98 var(--display);letter-spacing:-.055em; }.brand-thesis > div:nth-child(2) > p { max-width:700px;margin:25px 0 0;color:var(--moss);font-size:17px;line-height:1.7; }.trait-grid { grid-column:2;display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:42px; }.trait-grid article { min-height:135px;display:flex;justify-content:flex-end;flex-direction:column;padding:18px;border:1px solid var(--line);border-radius:15px;background:var(--white); }.trait-grid span { font:600 19px var(--display); }.trait-grid p { margin:5px 0 0;color:#64736d;font-size:12px; }
@media (max-width:800px) { .wrap { width:min(100% - 30px,1180px); }.topbar { grid-template-columns:1fr auto; }.topbar > span { display:none; }.brand-hero { min-height:760px;padding-inline:20px; }.hero-content h1 { font-size:62px; }.hero-palette { right:20px;left:20px;grid-template-columns:repeat(4,1fr); }.brand-thesis { grid-template-columns:1fr; }.trait-grid { grid-column:1;grid-template-columns:1fr 1fr; }.section-number { margin-bottom:15px; } }
@media (max-width:520px) { .topbar > a:last-child { font-size:0; }.topbar > a:last-child::after { content:"Assets ↓";font-size:11px; }.hero-principles { flex-wrap:wrap; }.hero-palette span { min-height:78px;padding:8px; }.trait-grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media (prefers-reduced-transparency:reduce) { .topbar { background:var(--pine);backdrop-filter:none; } }

/* Brand guideline navigation */
.topmark img { padding:3px;border-radius:50%;background:var(--oat);filter:none; }
.section-nav { position:sticky;z-index:16;top:62px;border-block:1px solid var(--line);background:rgba(243,246,242,.9);backdrop-filter:blur(16px); }
.section-nav .wrap { display:flex;align-items:center;justify-content:space-between;min-height:58px;overflow:auto;scrollbar-width:none; }
.section-nav .wrap::-webkit-scrollbar { display:none; }
.section-nav a { flex:0 0 auto;padding:22px 15px 18px;color:var(--moss);font:700 11px var(--display);letter-spacing:.09em;text-transform:uppercase; }
.section-nav a:first-child { padding-left:0; }
.section-nav a:hover,.section-nav a:focus-visible { color:var(--pine); }

/* Shared guide anatomy */
.guide-section,.assets-section { padding-block:128px;scroll-margin-top:120px; }
.guide-intro { display:grid;grid-template-columns:150px minmax(0,1fr);gap:55px;align-items:start;margin-bottom:68px; }
.guide-intro h2 { margin:0;font:500 clamp(48px,5.8vw,78px)/.95 var(--display);letter-spacing:-.06em; }
.guide-intro > div > p { max-width:720px;margin:26px 0 0;color:var(--moss);font-size:18px;line-height:1.67; }
.guide-intro.light h2 { color:var(--oat); }
.guide-intro.light > div > p { color:#b8cbc3; }
.guide-intro.light .section-number { color:var(--signal); }

/* Logo */
.master-logo { width:min(520px,78vw);padding:14px 18px;border-radius:18px;background:var(--fog);box-shadow:0 16px 40px rgba(0,0,0,.12); }
.logo-showcase { display:grid;grid-template-columns:1.55fr .72fr;gap:14px; }
.logo-card { min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:24px;background:var(--white); }
.logo-card > div { min-height:410px;display:grid;place-items:center;padding:58px; }
.logo-card.primary > div { background:var(--fog); }
.logo-card.primary img { width:min(570px,90%); }
.logo-card.symbol > div { background:var(--oat); }
.logo-card.symbol img { width:min(210px,63%);filter:drop-shadow(0 20px 35px rgba(2,48,34,.11)); }
.logo-card footer { min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 23px;background:var(--white); }
.logo-card footer span { display:flex;flex-direction:column;gap:6px;color:#62716b;font-size:13px; }
.logo-card footer b { color:var(--ink);font:700 15px var(--display); }
.logo-card footer a { padding:10px 13px;border:1px solid var(--line);border-radius:999px;color:var(--pine);font:700 11px var(--display); }
.logo-rules { display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:14px; }
.logo-rules article { min-height:260px;padding:25px;border:1px solid var(--line);border-radius:20px;background:var(--white); }
.logo-rules article > p { margin:0 0 25px;color:var(--pine);font:700 12px var(--display);letter-spacing:.08em;text-transform:uppercase; }
.logo-rules small { display:block;margin-top:22px;color:#62716b;font-size:13px;line-height:1.45; }
.clear-space { position:relative;width:110px;height:110px;display:grid;place-items:center;margin:2px auto 0;border:1px dashed rgba(2,48,34,.4); }
.clear-space img { width:60px;height:60px; }
.clear-space span { position:absolute;top:-7px;left:-6px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;color:var(--pine);background:var(--signal);font:700 9px var(--display); }
.size-row { min-height:108px;display:flex;align-items:flex-end;justify-content:center;gap:48px; }
.size-row span { display:flex;align-items:center;flex-direction:column;gap:11px;color:var(--moss);font-size:12px; }
.size-row span:first-child img { width:32px;height:32px; }
.size-row span:last-child img { width:48px;height:48px; }
.donts ul { margin:0;padding:0;list-style:none;color:var(--moss);font-size:14px;line-height:1.45; }
.donts li { position:relative;padding:9px 0 9px 24px;border-top:1px solid var(--line); }
.donts li::before { content:"×";position:absolute;left:2px;color:#b8413e;font-weight:700; }

/* Color */
.color-section,.voice-section { padding-block:128px;color:var(--oat);background:var(--pine);scroll-margin-top:120px; }
.core-swatches { display:grid;grid-template-columns:2.1fr 1.2fr 1.05fr .75fr;min-height:400px;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:24px; }
.core-swatches button,.mini-swatches button { appearance:none;text-align:left;border:0;cursor:pointer;color:var(--tc);background:var(--c);font:inherit; }
.core-swatches button { display:flex;justify-content:space-between;flex-direction:column;padding:24px;transition:filter .18s ease,transform .18s ease; }
.core-swatches button:hover,.core-swatches button:focus-visible { filter:brightness(.95);outline:3px solid var(--signal);outline-offset:-3px; }
.core-swatches button span { display:flex;flex-direction:column;gap:6px; }
.core-swatches button b { font:700 17px var(--display); }
.core-swatches button small { font-size:12px;opacity:.72; }
.core-swatches button i { font:500 12px var(--display);font-style:normal;opacity:.76; }
.pack-scales { display:grid;gap:12px;margin-top:44px; }
.pack-scales article { overflow:hidden;border:1px solid rgba(255,255,255,.15);border-radius:18px; }
.pack-scales header { display:flex;align-items:center;justify-content:space-between;gap:30px;padding:17px 19px; }
.pack-scales h3 { margin:0;color:var(--oat);font:600 15px var(--display); }
.pack-scales header p { margin:0;color:#a9beb5;font-size:11px;text-align:right; }
.scale-row { display:grid;grid-template-columns:repeat(12,1fr);min-height:78px; }
.scale-row button { appearance:none;display:flex;align-items:flex-end;justify-content:center;padding:9px 4px;border:0;color:var(--tc);background:var(--c);font:700 9px var(--display);cursor:pointer; }
.scale-row button:hover,.scale-row button:focus-visible { position:relative;z-index:2;outline:3px solid var(--white);outline-offset:-3px; }
.color-details { display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:72px; }
.color-details h3,.contrast-board h3 { margin:0 0 20px;color:var(--oat);font:600 19px var(--display); }
.mini-swatches { display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:16px; }
.mini-swatches button { min-height:118px;display:flex;justify-content:space-between;flex-direction:column;padding:15px; }
.mini-swatches button:hover,.mini-swatches button:focus-visible { outline:2px solid var(--signal);outline-offset:-2px; }
.mini-swatches b { font:700 12px var(--display); }
.mini-swatches span { font-size:10px;opacity:.75; }
.usage-note { margin:13px 0 0;color:#a9beb5;font-size:12px; }
.contrast-board { margin-top:72px;padding:28px;border:1px solid rgba(255,255,255,.15);border-radius:22px; }
.contrast-board header { display:flex;align-items:center;justify-content:space-between;gap:24px; }
.contrast-board header h3 { margin:0; }
.contrast-board header p { margin:0;color:#a9beb5;font-size:12px; }
.contrast-board > div { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:24px; }
.contrast-board span { min-height:120px;display:flex;justify-content:space-between;flex-direction:column;padding:16px;border-radius:13px;color:var(--fg);background:var(--bg); }
.contrast-board b { font:700 13px var(--display); }
.contrast-board i { font-size:11px;font-style:normal;opacity:.75; }

/* Typography */
.type-specimens { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.type-specimens article { min-height:420px;padding:28px;border:1px solid var(--line);border-radius:23px;background:var(--white); }
.type-specimens header { display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--moss);font-size:12px; }
.type-specimens header a { padding-bottom:2px;border-bottom:1px solid var(--line); }
.type-specimens h3 { margin:78px 0 34px;color:var(--pine);font-size:clamp(44px,4vw,66px);font-weight:500;line-height:.98;letter-spacing:-.05em; }
.type-specimens > .manrope { font-family:var(--display); }
.type-specimens > .atkinson { font-family:var(--body); }
.type-specimens article > p { margin:0;color:var(--moss);font-size:23px;line-height:1.5; }
.type-specimens article > footer { margin-top:45px;color:#6c7b75;font-size:12px; }
.type-scale { display:grid;grid-template-columns:repeat(12,1fr);gap:1px;margin-top:70px;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:var(--line); }
.type-scale article { min-height:190px;padding:22px;background:var(--white); }
.type-scale article:nth-child(-n+2) { grid-column:span 6;min-height:280px; }
.type-scale article:nth-child(n+3) { grid-column:span 3; }
.type-scale article > span { color:#78857f;font:700 10px var(--display);letter-spacing:.08em;text-transform:uppercase; }
.type-scale h3,.type-scale h4,.type-scale h5 { color:var(--pine);font-family:var(--display);font-weight:500;letter-spacing:-.05em; }
.type-scale h3 { margin:55px 0 0;font-size:60px;line-height:60px; }
.type-scale h4 { margin:63px 0 0;font-size:35px;line-height:40px; }
.type-scale h5 { margin:42px 0 0;font-size:28px;line-height:36px; }
.type-scale p { margin:42px 0 0;color:var(--moss);font-size:16px;line-height:24px; }
.type-scale button { margin-top:45px;padding:13px 15px;border:0;border-radius:10px;color:var(--oat);background:var(--pine);font:700 14px/20px var(--body); }
.type-scale button i { margin-left:18px;color:var(--signal);font-style:normal; }
.type-scale article:last-child b { display:block;margin-top:52px;color:var(--pine);font:700 11px var(--display);letter-spacing:.06em; }

/* Voice */
.voice-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.voice-grid article { min-height:260px;padding:28px;border:1px solid rgba(255,255,255,.15);border-radius:20px;background:rgba(255,255,255,.035); }
.voice-grid span { color:var(--signal);font:700 11px var(--display);letter-spacing:.1em;text-transform:uppercase; }
.voice-grid h3 { max-width:500px;margin:45px 0 20px;color:var(--oat);font:500 clamp(27px,2.8vw,41px)/1.08 var(--display);letter-spacing:-.035em; }
.voice-grid p { margin:0;color:#9fb7ad;font-size:14px;line-height:1.5; }
.message-stack { display:grid;grid-template-columns:150px 1fr;gap:55px;margin-top:78px;padding-top:35px;border-top:1px solid rgba(255,255,255,.16); }
.message-stack > p { margin:8px 0 0;color:var(--signal);font:700 11px var(--display);letter-spacing:.1em;text-transform:uppercase; }
.message-stack ol { margin:0;padding:0;list-style:none;counter-reset:messages; }
.message-stack li { counter-increment:messages;display:grid;grid-template-columns:34px 250px 1fr;gap:15px;align-items:center;padding:19px 0;border-bottom:1px solid rgba(255,255,255,.12); }
.message-stack li::before { content:"0" counter(messages);color:var(--signal);font:700 10px var(--display); }
.message-stack b { color:var(--oat);font:600 17px var(--display); }
.message-stack span { color:#a9beb5;font-size:15px; }

/* Imagery */
.imagery-grid { display:grid;grid-template-columns:1.5fr .72fr;gap:14px; }
.imagery-grid-single { grid-template-columns:1fr; }
.imagery-grid article { min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:23px;background:var(--white); }
.product-shot > img { width:100%;height:525px;display:block;object-fit:cover;object-position:center; }
.portrait-sheet > div { min-height:525px;display:grid;place-items:center;padding:25px;background:var(--leaf); }
.portrait-sheet img { width:100%;height:auto;max-height:470px;object-fit:contain; }
.imagery-grid footer { position:relative;min-height:110px;display:flex;flex-direction:column;justify-content:center;padding:20px 120px 20px 23px; }
.imagery-grid footer b { font:700 15px var(--display); }
.imagery-grid footer span { margin-top:6px;color:#687770;font-size:12px; }
.imagery-grid footer a { position:absolute;right:22px;top:50%;padding:10px 12px;border:1px solid var(--line);border-radius:999px;transform:translateY(-50%);color:var(--pine);font:700 10px var(--display); }
.pod-gallery { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px; }
.pod-image-card { min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:23px;background:var(--white); }
.pod-image-card > img { width:100%;height:390px;display:block;object-fit:cover; }
.pod-context { grid-column:1/-1; }
.pod-context > img { height:500px; }
.pod-context > img { object-position:center; }
.pod-detail > img { object-position:center; }
.pod-gallery footer { position:relative;min-height:110px;display:flex;flex-direction:column;justify-content:center;padding:20px 120px 20px 23px; }
.pod-gallery footer b { font:700 15px var(--display); }
.pod-gallery footer span { margin-top:6px;color:#687770;font-size:12px; }
.pod-gallery footer a { position:absolute;right:22px;top:50%;padding:10px 12px;border:1px solid var(--line);border-radius:999px;transform:translateY(-50%);color:var(--pine);font:700 10px var(--display); }
.image-rules { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px; }
.image-rules article { padding:28px;border-radius:20px; }
.image-rules .do { color:var(--pine);background:var(--leaf); }
.image-rules .dont { color:var(--ink);background:#f3dedb; }
.image-rules b { font:700 12px var(--display);letter-spacing:.08em;text-transform:uppercase; }
.image-rules ul { display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;margin:23px 0 0;padding:0;list-style:none; }
.image-rules li { position:relative;padding-left:21px;font-size:14px; }
.image-rules li::before { position:absolute;left:0;font-weight:700; }
.image-rules .do li::before { content:"✓"; }
.image-rules .dont li::before { content:"×";color:#b8413e; }

/* Product UI */
.ui-section { padding-block:128px;scroll-margin-top:120px;background:var(--leaf); }
.ui-board { display:grid;grid-template-columns:135px 1fr;min-height:740px;overflow:hidden;border:1px solid rgba(2,48,34,.14);border-radius:28px;background:var(--fog);box-shadow:0 35px 85px rgba(2,48,34,.13); }
.ui-board > aside { display:flex;align-items:stretch;flex-direction:column;gap:5px;padding:25px 15px;background:var(--pine); }
.ui-board > aside img { width:34px;height:34px;margin:2px auto 46px;padding:4px;border-radius:50%;background:var(--oat); }
.ui-board > aside button { appearance:none;padding:12px;border:0;border-radius:10px;text-align:left;color:#a9beb5;background:transparent;font:600 13px var(--body); }
.ui-board > aside button.active { color:var(--pine);background:var(--leaf); }
.ui-board > section { padding:39px 42px 45px; }
.ui-board > section > header { display:flex;align-items:flex-start;justify-content:space-between;gap:30px; }
.ui-board header small,.ui-answer article small { color:#66766f;font:700 10px var(--display);letter-spacing:.09em; }
.ui-board header h3 { margin:10px 0 0;color:var(--pine);font:500 39px/1 var(--display);letter-spacing:-.045em; }
.ui-board > section > header > span { padding:9px 11px;border-radius:999px;color:var(--pine);background:var(--leaf);font-size:11px; }
.ui-answer { margin-top:55px; }
.ui-question { width:max-content;max-width:85%;margin-left:auto;padding:14px 17px;border-radius:16px 16px 3px 16px;color:var(--oat);background:var(--pine);font-size:15px; }
.ui-answer article { display:flex;gap:17px;margin-top:15px;padding:24px;border:1px solid var(--line);border-radius:4px 20px 20px;background:var(--white); }
.ui-answer .spark { flex:0 0 33px;height:33px;display:grid;place-items:center;border-radius:50%;color:var(--pine);background:var(--signal); }
.ui-answer article h4 { margin:11px 0 11px;color:var(--pine);font:600 25px/1.12 var(--display);letter-spacing:-.035em; }
.ui-answer article p { margin:0;color:var(--moss);font-size:14px;line-height:1.55; }
.ui-answer article footer { display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px;padding-top:15px;border-top:1px solid var(--line); }
.ui-answer article footer span { color:#66766f;font-size:11px; }
.ui-answer article footer button { border:0;color:var(--pine);background:none;font:700 12px var(--body); }
.ui-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:10px; }
.ui-cards article { min-height:125px;display:grid;grid-template-columns:28px 1fr;gap:12px;align-content:center;position:relative;padding:18px;border:1px solid var(--line);border-radius:15px;background:var(--white); }
.ui-cards i { width:25px;height:25px;display:grid;place-items:center;border-radius:50%;color:var(--pine);background:var(--leaf);font:700 10px var(--display);font-style:normal; }
.ui-cards div { display:flex;flex-direction:column;gap:5px; }
.ui-cards b { color:var(--pine);font:700 12px var(--display); }
.ui-cards span { color:#6c7a74;font-size:11px; }
.ui-cards em { grid-column:2;margin-top:5px;color:#008573;font-size:10px;font-style:normal; }
.component-row { display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:23px; }
.component-row > button { min-height:47px;padding:0 19px;border:1px solid var(--pine);border-radius:12px;font:700 13px var(--body); }
.primary-button { color:var(--oat);background:var(--pine); }
.primary-button i { margin-left:20px;color:var(--signal);font-style:normal; }
.secondary-button { color:var(--pine);background:transparent; }
.success-chip,.attention-chip { display:flex;align-items:center;gap:8px;padding:11px 13px;border-radius:999px;background:rgba(255,255,255,.64);color:var(--pine);font-size:12px; }
.success-chip i,.attention-chip i { width:7px;height:7px;border-radius:50%;background:#2f7a59; }
.attention-chip i { background:var(--signal); }
.input-example { flex:1;min-width:230px;display:flex;align-items:center;justify-content:space-between;padding:7px 8px 7px 15px;border:1px solid var(--line);border-radius:13px;color:#718079;background:rgba(255,255,255,.7);font-size:13px; }
.input-example button { width:33px;height:33px;border:0;border-radius:9px;color:var(--oat);background:var(--pine); }

/* Assets and research */
.asset-list { border-top:1px solid var(--line); }
.asset-list > a { min-height:108px;display:grid;grid-template-columns:90px 1fr 35px;gap:22px;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line);transition:background .15s ease; }
.asset-list > a:hover,.asset-list > a:focus-visible { background:var(--white); }
.asset-list img,.code-icon { width:72px;height:72px;object-fit:contain;padding:9px;border-radius:13px;background:var(--oat); }
.asset-list a:nth-child(2) img { background:var(--pine); }
.asset-list a:nth-child(5) img { object-fit:cover;background:var(--oat); }
.asset-list .pod-asset img { object-fit:cover;background:var(--oat); }
.code-icon { display:grid;place-items:center;color:var(--signal);font:700 18px var(--display); }
.asset-list span { display:flex;flex-direction:column;gap:7px; }
.asset-list b { color:var(--pine);font:700 17px var(--display); }
.asset-list small { color:#6d7b75;font-size:12px; }
.asset-list > a > i { color:var(--pine);font-size:20px;font-style:normal; }
.research-section { padding-block:100px;background:var(--oat); }
.research-section > .wrap { display:grid;grid-template-columns:150px 1fr;gap:55px; }
.research-section h2 { margin:0;color:var(--pine);font:500 clamp(40px,4vw,58px)/1 var(--display);letter-spacing:-.05em; }
.research-section div > p { max-width:760px;margin:20px 0 0;color:var(--moss);font-size:17px;line-height:1.6; }
.research-links { display:flex;flex-wrap:wrap;gap:8px;margin-top:30px; }
.research-links a { padding:10px 13px;border:1px solid rgba(2,48,34,.17);border-radius:999px;color:var(--pine);font:700 11px var(--display); }
.research-links a:hover,.research-links a:focus-visible { color:var(--oat);background:var(--pine); }
.brand-footer { padding-block:65px;color:var(--oat);background:var(--pine); }
.brand-footer .wrap { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px; }
.brand-footer img { width:180px; }
.brand-footer p { margin:0;color:#a9beb5;font-size:13px; }
.brand-footer a { justify-self:end;color:var(--signal);font:700 11px var(--display); }
.copy-toast { position:fixed;z-index:50;left:50%;bottom:26px;padding:10px 16px;border-radius:999px;color:var(--oat);background:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.22);transform:translate(-50%,20px);opacity:0;pointer-events:none;font:700 12px var(--body);transition:opacity .18s ease,transform .18s ease; }
.copy-toast.show { transform:translate(-50%,0);opacity:1; }

@media (max-width:960px) {
  .guide-intro { grid-template-columns:115px 1fr;gap:35px; }
  .logo-showcase,.imagery-grid,.pod-gallery { grid-template-columns:1fr; }
  .logo-rules { grid-template-columns:1fr 1fr; }
  .logo-rules article:last-child { grid-column:1/-1; }
  .core-swatches { grid-template-columns:1.5fr 1fr; }
  .color-details { grid-template-columns:1fr; }
  .contrast-board > div { grid-template-columns:1fr 1fr; }
  .type-scale article:nth-child(n) { grid-column:span 6; }
  .ui-board { grid-template-columns:94px 1fr; }
  .ui-board > section { padding-inline:28px; }
  .ui-cards { grid-template-columns:1fr; }
  .ui-cards article { min-height:80px; }
}

@media (max-width:700px) {
  .guide-section,.assets-section,.color-section,.voice-section,.ui-section { padding-block:90px; }
  .section-nav .wrap { gap:8px; }
  .section-nav a { padding-inline:9px; }
  .guide-intro,.research-section > .wrap { grid-template-columns:1fr;gap:18px; }
  .guide-intro { margin-bottom:45px; }
  .guide-intro > div > p { font-size:16px; }
  .logo-card > div { min-height:300px;padding:35px; }
  .logo-rules,.type-specimens,.voice-grid,.image-rules { grid-template-columns:1fr; }
  .logo-rules article:last-child { grid-column:auto; }
  .core-swatches { grid-template-columns:1fr 1fr;min-height:580px; }
  .pack-scales header { align-items:flex-start;flex-direction:column;gap:8px; }.pack-scales header p { text-align:left; }.scale-row { grid-template-columns:repeat(6,1fr); }.scale-row button { min-height:58px; }
  .mini-swatches,.contrast-board > div { grid-template-columns:1fr 1fr; }
  .contrast-board header { align-items:flex-start;flex-direction:column; }
  .type-specimens article { min-height:360px; }
  .type-specimens h3 { margin-top:60px; }
  .type-scale article:nth-child(n) { grid-column:1/-1;min-height:190px; }
  .message-stack { grid-template-columns:1fr;gap:18px; }
  .message-stack li { grid-template-columns:30px 1fr; }
  .message-stack li span { grid-column:2; }
  .product-shot > img,.portrait-sheet > div { height:390px;min-height:390px; }
  .image-rules ul { grid-template-columns:1fr; }
  .ui-board { display:block;min-height:0;border-radius:20px; }
  .ui-board > aside { flex-direction:row;overflow:auto; }
  .ui-board > aside img { margin:0 20px 0 0; }
  .ui-board > aside button { flex:0 0 auto; }
  .ui-board > section { padding:28px 18px; }
  .ui-board > section > header { flex-direction:column; }
  .ui-board header h3 { font-size:32px; }
  .ui-answer article { padding:18px; }
  .ui-answer article h4 { font-size:21px; }
  .ui-answer article footer { align-items:flex-start;flex-direction:column; }
  .brand-footer .wrap { grid-template-columns:1fr; }
  .brand-footer a { justify-self:start; }
}

@media (max-width:520px) {
  .section-nav { top:62px; }
  .section-nav .wrap { width:100%;padding-inline:15px; }
  .hero-content h1 { font-size:52px; }
  .hero-palette b { font-size:9px; }
  .hero-palette small { font-size:8px; }
  .core-swatches { grid-template-columns:1fr;min-height:780px; }
  .scale-row { grid-template-columns:repeat(4,1fr); }
  .mini-swatches { grid-template-columns:1fr 1fr; }
  .contrast-board { padding:17px; }
  .contrast-board > div { grid-template-columns:1fr; }
  .imagery-grid footer { padding-right:22px;padding-bottom:70px; }
  .imagery-grid footer a { top:auto;right:auto;bottom:17px;left:22px;transform:none; }
  .pod-image-card > img { height:330px; }
  .pod-gallery footer { padding-right:22px;padding-bottom:70px; }
  .pod-gallery footer a { top:auto;right:auto;bottom:17px;left:22px;transform:none; }
  .asset-list > a { grid-template-columns:68px 1fr 20px;gap:13px;padding-inline:5px; }
  .asset-list img,.code-icon { width:58px;height:58px; }
}

@media (prefers-reduced-motion:reduce) {
  .copy-toast,.asset-list > a,.core-swatches button { transition:none; }
}

@media (prefers-reduced-transparency:reduce) {
  .section-nav { background:var(--fog);backdrop-filter:none; }
}