:root{font-family:Rubik,Arial,sans-serif;color:#102f49;background:#f7f5f0;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0}button,a{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}img{max-width:100%}.wrap{width:min(1180px,calc(100% - 64px));margin:auto}.topbar{position:sticky;top:0;z-index:15;background:#061c31;border-bottom:1px solid #ffffff1a;color:#fff}.bar-content{height:76px;display:flex;align-items:center;gap:30px;justify-content:space-between}.brand-link,.footer-brand{display:flex;align-items:center;gap:11px;font-size:13px;font-weight:600;letter-spacing:.11em;white-space:nowrap}.brand-link img{width:34px;height:36px}.bar-muted{font-weight:400;opacity:.55}.topbar nav{display:flex;gap:31px;font-size:12px;color:#d6e1e8}.topbar nav a:hover,.footer-inner a:hover{color:#e5bc74}.top-button{border:1px solid #e5bc7480;color:#e5bc74;padding:12px 17px;border-radius:5px;font-size:12px;white-space:nowrap}.top-button span{margin-left:13px}.hero{position:relative;overflow:hidden;background:linear-gradient(125deg,#061c31 4%,#102f49 70%,#153c59);color:#fff;padding:104px 0 115px}.hero-glow{position:absolute;width:670px;height:670px;right:-130px;top:-270px;border-radius:50%;background:radial-gradient(circle,#e5bc741a,transparent 66%);pointer-events:none}.hero-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:110px}.eyebrow,.kicker{font-weight:600;font-size:11px;letter-spacing:.19em;color:#e5bc74}.eyebrow{display:inline-flex;gap:10px;align-items:center}.eyebrow-dot{width:6px;height:6px;border-radius:50%;background:#e5bc74}.hero h1{font-size:clamp(56px,6vw,94px);line-height:1.06;letter-spacing:-.075em;font-weight:600;margin:27px 0 29px}.hero h1 em,.section h2 em{color:#e5bc74;font-style:normal}.hero p{font-size:16px;line-height:1.85;color:#c2d0db;max-width:470px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px}.btn{font-size:12px;font-weight:600;padding:17px 19px;border-radius:5px;display:inline-flex;gap:18px;align-items:center}.btn-gold{background:#e5bc74;color:#061c31}.btn-gold:hover{background:#f8ead1}.btn-ghost{border:1px solid #8197a67a;color:#fff}.btn-ghost:hover{border-color:#e5bc74}.art-frame{border:1px solid #e5bc7447;border-radius:4px;min-height:365px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:linear-gradient(145deg,#123652,#071d30);box-shadow:0 35px 75px #0003}.art-frame:before,.art-frame:after{content:"";position:absolute;inset:13px;border:1px solid #e5bc7424;pointer-events:none}.art-frame:after{inset:21px;border-color:#e5bc7410}.art-frame>img{width:min(80%,370px);filter:drop-shadow(0 8px 15px #0002)}.art-stars{position:absolute;color:#e5bc74;top:32px;right:40px;font-size:26px}.art-stars span{font-size:15px;margin-left:20px}.art-label{position:absolute;bottom:37px;color:#e5bc74a8;font-size:9px;letter-spacing:.35em}.art-caption{text-align:right;color:#e5bc7499;font-size:9px;letter-spacing:.15em;margin-top:17px}.intro-strip{background:#e5bc74;color:#102f49}.strip-inner{display:flex;justify-content:space-between;gap:25px;align-items:center;min-height:76px;font-size:10px;letter-spacing:.07em}.strip-inner p{white-space:nowrap}.strip-inner>div{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.strip-star{font-size:12px}.section{padding:115px 0}.section-light{background:#f7f5f0}.section-heading{display:flex;justify-content:space-between;gap:20px;margin-bottom:55px}.section h2{font-size:clamp(40px,4.3vw,62px);line-height:1.12;letter-spacing:-.065em;font-weight:600;margin:18px 0 19px}.section-light h2 em{color:#102f49}.section-heading p{max-width:580px;color:#657383;line-height:1.8;font-size:14px;margin:0}.section-number{font-size:68px;letter-spacing:-.08em;font-weight:600;color:#e5e5df;line-height:1}.palette-title{display:flex;justify-content:space-between;gap:15px;align-items:center;margin:0 0 18px}.palette-title h3{font-size:17px;margin:0}.palette-title span{font-size:12px;color:#78818a}.secondary-title{margin-top:48px}.palette-grid{display:grid;gap:15px}.palette-core{grid-template-columns:repeat(4,minmax(0,1fr))}.palette-secondary{grid-template-columns:repeat(5,minmax(0,1fr))}.swatch{border:1px solid #e5e4df;border-radius:8px;background:#fff;text-align:left;padding:8px;min-width:0;transition:transform .18s,box-shadow .18s}.swatch:hover{transform:translateY(-3px);box-shadow:0 13px 27px #102f4914}.swatch-sample{display:flex;height:152px;border-radius:4px;justify-content:flex-end;align-items:flex-start;padding:12px}.palette-secondary .swatch-sample{height:110px}.swatch-copy{color:#fff8;border:1px solid #fff5;border-radius:50%;width:26px;height:26px;display:grid;place-items:center;font-size:14px}.swatch-copy.dark{color:#061c3188;border-color:#061c3122}.swatch-info{display:flex;justify-content:space-between;gap:7px;align-items:center;padding:15px 6px 8px;flex-wrap:wrap}.swatch-info strong{font-size:12px}.swatch-info>span{font-size:11px;color:#697586}.note{display:flex;gap:15px;background:#efeae0;border:1px solid #e8ddc9;border-radius:7px;padding:18px 22px;margin-top:39px}.note>span{color:#153c59}.note p{font-size:12px;line-height:1.85;margin:0;color:#56616d}.note strong{color:#102f49}.type-section{background:#102f49;color:#fff}.type-section .section-heading p{color:#b6c7d3}.type-section .section-number{color:#ffffff15}.type-showcase{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #ffffff35;border-bottom:1px solid #ffffff35}.type-showcase>div:first-child{padding:48px 35px 47px 0}.type-tag{font-size:10px;letter-spacing:.16em;color:#e5bc74}.type-big{font-size:clamp(82px,12vw,175px);font-weight:600;letter-spacing:-.09em;line-height:1.25}.type-big span{color:#e5bc74}.type-showcase>div:first-child p{color:#c1ced9;font-size:14px;line-height:2;letter-spacing:.03em}.type-specs{border-left:1px solid #ffffff35;padding-left:55px;display:flex;flex-direction:column;justify-content:center}.type-specs>div{border-bottom:1px solid #ffffff26;padding:22px 0;display:flex;flex-direction:column;gap:8px}.type-specs>div:last-child{border-bottom:0}.type-specs span{color:#e5bc74;font-size:9px;letter-spacing:.15em}.type-specs strong{font-size:23px}.weight600{font-weight:600}.weight500{font-weight:500}.weight400{font-weight:400}.type-specs small{color:#8fa9bc;font-size:11px}.text-link{display:inline-block;color:#e5bc74;border-bottom:1px solid #e5bc7470;font-size:12px;font-weight:500;margin-top:30px;padding-bottom:8px}.text-link span{margin-left:12px}.asset-tabs{display:flex;gap:5px;border-bottom:1px solid #dcdedc;margin-bottom:36px;overflow:auto}.asset-tabs button{border:0;border-bottom:3px solid transparent;background:transparent;padding:18px 25px;color:#667484;font-size:13px;font-weight:500;white-space:nowrap}.asset-tabs button[aria-selected=true]{color:#102f49;border-bottom-color:#e5bc74}.asset-tabs button:hover{color:#102f49}.asset-subhead{display:flex;align-items:start;justify-content:space-between;gap:20px;margin-bottom:25px}.asset-subhead h3{font-size:25px;letter-spacing:-.04em;margin:0 0 8px}.asset-subhead p{font-size:13px;color:#657383;line-height:1.7;margin:0}.asset-count{white-space:nowrap;color:#8b9198;font-size:10px;letter-spacing:.1em}.asset-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.asset-card{border:1px solid #e3e2dc;border-radius:8px;background:#fff;overflow:hidden}.asset-preview{height:190px;display:flex;align-items:center;justify-content:center;padding:32px;position:relative}.asset-preview img{display:block;width:100%;height:100%;object-fit:contain}.asset-preview.paper{background:#f7f5f0}.asset-preview.navy{background:#153c59}.asset-preview.midnight{background:#061c31}.asset-preview.white{background:#fff}.asset-preview.checker{background-color:#f4f4f0;background-image:linear-gradient(45deg,#e9e9e4 25%,transparent 25%),linear-gradient(-45deg,#e9e9e4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e9e9e4 75%),linear-gradient(-45deg,transparent 75%,#e9e9e4 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}.asset-preview.square img{max-width:160px}.asset-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:17px 17px;border-top:1px solid #eaeae8}.asset-meta strong{font-size:12px;display:block;margin-bottom:5px}.asset-meta small{font-size:10px;color:#88939d}.download-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d5d9dd;border-radius:5px;padding:10px 12px;font-size:11px;font-weight:600;background:#fff;color:#153c59;white-space:nowrap;transition:background .2s}.download-btn:hover{background:#f8ead1;border-color:#e5bc74}.download-hint{color:#7d8790;font-size:11px;margin-top:22px}.guideline-section{background:#f8ead1}.guideline-section h2 em{color:#102f49}.guideline-section .section-number{color:#e4d2b5}.guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.guide-grid article{border-top:2px solid #153c59;padding-top:25px}.guide-icon{font-size:12px;color:#102f49;font-weight:600}.guide-grid h3{font-size:18px;line-height:1.4;margin:25px 0 12px}.guide-grid p{font-size:12px;color:#5e6871;line-height:1.9;margin:0}footer{background:#061c31;color:white;padding:36px 0}.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:25px}.footer-brand img{width:38px}.footer-brand small{font-size:9px;color:#96a9b8;letter-spacing:.12em}.footer-inner p{font-size:11px;color:#8ca1b2}.footer-inner>a:last-child{font-size:12px;color:#e5bc74}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,30px);background:#061c31;color:#fff;border:1px solid #e5bc74;padding:13px 22px;border-radius:6px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:25}.toast.visible{opacity:1;transform:translate(-50%,0)}@media(max-width:950px){.topbar nav{display:none}.hero-grid{gap:35px}.strip-inner{flex-direction:column;justify-content:center;padding:20px 0}.palette-secondary{grid-template-columns:repeat(3,1fr)}.asset-grid{grid-template-columns:repeat(2,1fr)}.guide-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.wrap{width:min(100% - 36px,1180px)}.bar-content{height:65px}.brand-link{font-size:11px}.top-button{padding:10px;font-size:11px}.hero{padding:65px 0 70px}.hero-grid{grid-template-columns:1fr;gap:42px}.hero h1{font-size:60px}.hero p{font-size:14px}.art-frame{min-height:235px}.art-caption{margin-top:10px}.strip-inner>div{justify-content:center;gap:9px;font-size:9px}.section{padding:70px 0}.section-heading{margin-bottom:36px}.section-number{display:none}.section h2{font-size:42px}.palette-core,.palette-secondary{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.palette-title{align-items:start;flex-direction:column;gap:5px}.swatch-sample,.palette-secondary .swatch-sample{height:100px}.swatch-info{padding:12px 3px 5px}.type-showcase{grid-template-columns:1fr}.type-showcase>div:first-child{padding:30px 0}.type-big{font-size:100px}.type-specs{border-left:0;border-top:1px solid #ffffff35;padding-left:0;padding-bottom:18px}.asset-tabs button{padding:15px}.asset-subhead{flex-direction:column}.asset-grid{grid-template-columns:1fr}.asset-preview{height:205px}.guide-grid{grid-template-columns:1fr 1fr;gap:25px}.guide-grid h3{font-size:15px}.footer-inner{flex-wrap:wrap}.footer-inner p{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

/* Brand Bank refinements — restrained typography and clearer navigation */
:root{font-weight:400}
.brand-link,.footer-brand,.eyebrow,.kicker,.art-label,.art-caption,.strip-inner,.section-number,.type-tag,.type-specs span,.asset-count,.footer-brand small,.brand-select-label{letter-spacing:normal}
.hero h1,.section h2,.type-big,.asset-subhead h3{letter-spacing:normal}
.hero h1{font-size:clamp(42px,4.8vw,68px);font-weight:500;line-height:1.17}
.section h2{font-size:clamp(32px,3.3vw,48px);font-weight:500;line-height:1.2}
.type-big{font-size:clamp(75px,10vw,136px);font-weight:500;line-height:1.2}
.type-specs strong{font-size:21px;font-weight:400}
.type-specs strong.weight600{font-weight:600}
.type-specs strong.weight500{font-weight:500}
.asset-subhead h3{font-size:23px;font-weight:500}
.palette-title h3,.guide-grid h3{font-weight:500}
.asset-meta strong,.swatch-info strong{font-weight:500}
.topbar nav,.btn,.top-button,.download-btn{font-weight:400}
.btn{gap:9px}
.section{padding:85px 0}
.section-heading{margin-bottom:38px}
.hero{padding:82px 0}
.hero-grid{gap:60px}
.art-frame{min-height:320px}
.art-frame:before,.art-frame:after{display:none}
.art-label{bottom:25px}
.swatch-copy{font-family:Arial,sans-serif;font-size:15px;line-height:1}
.asset-preview{height:205px}
.asset-preview.navy{background:#153c59}
.brand-select-label{font-size:12px;color:#647589;margin:0 0 12px;font-weight:500}
.asset-tabs{gap:12px;border:0;margin-bottom:35px;overflow-x:auto;padding:3px 2px 9px}
.asset-tabs button{flex:1;min-width:205px;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:7px;min-height:78px;padding:16px 20px;background:#fff;border:1px solid #d6dadc;border-radius:8px;color:#263f56;font-size:14px;font-weight:500;transition:background .15s,border-color .15s}
.asset-tabs button[aria-selected=true]{background:#153c59;color:#fff;border:1px solid #153c59;box-shadow:0 3px 8px #102f491c}
.asset-tabs button:hover:not([aria-selected=true]){background:#eef3f6;border-color:#8fa5b5}
.asset-tabs button:focus-visible{outline:3px solid #e5bc74;outline-offset:2px}
.tab-kind{font-size:11px;opacity:.7;font-weight:400}
.asset-panel[hidden]{display:none}
@media(max-width:650px){.section{padding:65px 0}.hero h1{font-size:48px}.section h2{font-size:36px}.type-big{font-size:83px}.asset-tabs{gap:8px;flex-wrap:nowrap}.asset-tabs button{min-width:170px;padding:13px 12px;font-size:12px}}

/* Use Rubik's standard spacing rather than decorative tracking. */


/* Brand selection, hero and asset preview refinements */
.brand-link{letter-spacing:.005em}
.hero{padding:92px 0 94px;background:linear-gradient(120deg,#061c31 5%,#102f49 75%,#153c59)}
.hero-grid{gap:75px;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.hero h1{font-size:clamp(60px,6.6vw,95px);font-weight:500;line-height:1.04;letter-spacing:-.035em;margin:26px 0 25px;white-space:nowrap}
.hero p{max-width:480px;font-size:15px;line-height:1.8}
.eyebrow{letter-spacing:.055em;font-weight:500;display:flex;align-items:center;gap:12px}
.eyebrow-divider{width:19px;height:1px;background:#e5bc74;display:inline-block}
.art-frame{min-height:350px;background:linear-gradient(135deg,#153c59,#0b263d);border:1px solid #e5bc7440;border-radius:8px;box-shadow:0 20px 50px #0002}
.art-frame>img{width:min(78%,410px)}
.art-stars,.art-caption,.art-label,.intro-strip{display:none}
.brand-selector-heading{display:flex;align-items:baseline;gap:15px;margin:0 0 15px}
.brand-selector-heading strong{font-size:19px;font-weight:500}
.brand-selector-heading span{font-size:12px;color:#687787}
.asset-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:0 0 20px;padding:0;overflow:visible}
.asset-tabs button,.asset-tabs button[aria-selected=true]{position:relative;min-width:0;min-height:165px;display:flex;align-items:center;justify-content:flex-start;flex-direction:column;gap:0;padding:0;overflow:hidden;border-radius:9px;text-align:center;box-shadow:none;transition:box-shadow .18s,border-color .18s,transform .18s}
.asset-tabs button{border:2px solid #d7dce0;background:#fff;color:#153c59}
.asset-tabs button:hover:not([aria-selected=true]){background:#fff;border-color:#9daeba;transform:translateY(-2px)}
.asset-tabs button[aria-selected=true]{background:#fff;border:2px solid #e5bc74;box-shadow:0 0 0 3px #e5bc7440;color:#153c59}
.brand-tab-image{display:flex;width:100%;height:112px;padding:19px 36px;align-items:center;justify-content:center;background:linear-gradient(135deg,#153c59,#061c31)}
.brand-tab-image img{display:block;height:100%;width:100%;object-fit:contain}
.brand-tab-text{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;padding:12px 10px;font-size:13px;font-weight:500;line-height:1.3}
.brand-tab-text small{font-size:10px;font-weight:400;color:#6a7989}
.selected-indicator{display:none;position:absolute;top:8px;right:9px;width:22px;height:22px;align-items:center;justify-content:center;background:#e5bc74;color:#061c31;border-radius:50%;font-size:13px;font-weight:600}
.asset-tabs button[aria-selected=true] .selected-indicator{display:flex}
.preview-note{color:#5e6c79;font-size:12px;line-height:1.6;margin:0 0 32px}
.asset-card .asset-preview.is-transparent{transition:background .2s}
.asset-card:hover .asset-preview.is-transparent{background-color:#fff;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0}
.asset-card:hover .asset-preview.is-transparent:after{content:"Transparent preview";position:absolute;left:10px;bottom:9px;padding:5px 8px;background:#fff;border-radius:4px;font-size:10px;color:#102f49;border:1px solid #d7dce0}
@media(max-width:950px){.hero-grid{gap:30px}.hero h1{font-size:clamp(55px,6.5vw,85px)}.brand-tab-image{padding:17px 20px}}
@media(max-width:650px){.hero-grid{grid-template-columns:1fr;gap:28px}.hero{padding:65px 0}.hero h1{font-size:clamp(50px,11vw,75px)}.art-frame{min-height:230px}.asset-tabs{grid-template-columns:1fr;gap:10px}.asset-tabs button,.asset-tabs button[aria-selected=true]{min-height:84px;flex-direction:row}.brand-tab-image{width:124px;height:82px;flex-shrink:0;padding:15px}.brand-tab-text{align-items:flex-start;text-align:left;flex:1;padding:10px 16px;font-size:13px}.selected-indicator{top:8px;right:8px}.brand-selector-heading{flex-direction:column;gap:2px}}
@media(hover:none){.asset-card .asset-preview.is-transparent:after{content:"Transparent artwork";position:absolute;bottom:8px;left:8px;font-size:10px;padding:3px 6px;background:#fffddd;border-radius:4px;color:#102f49}}

/* Brand selection */
.selected-indicator{display:none!important}
.asset-tabs button:not([aria-selected=true]){opacity:.58;transition:opacity .18s ease,border-color .18s ease}
.asset-tabs button:hover:not([aria-selected=true]),.asset-tabs button:focus-visible:not([aria-selected=true]){opacity:.92}
.asset-tabs button[aria-selected=true]{opacity:1;border-color:#e5bc74;box-shadow:0 0 0 2px #e5bc7438}
/* Transparency indicator: static tiles fading in at 20% opacity */
.asset-card .asset-preview.is-transparent{isolation:isolate;transition:none}
.asset-card .asset-preview.is-transparent::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:conic-gradient(#aeb7bf 25%,#fff 0 50%,#aeb7bf 0 75%,#fff 0);background-size:24px 24px;opacity:0;transition:opacity .2s ease}
.asset-card .asset-preview.is-transparent img{position:relative;z-index:1}
.asset-card:hover .asset-preview.is-transparent{background-image:none!important}
.asset-card:hover .asset-preview.is-transparent::before{opacity:.2}
.asset-card:hover .asset-preview.is-transparent::after{display:none}
.download-options{display:flex;gap:7px;flex-shrink:0}
.download-options .download-btn{padding:10px 12px}
@media(hover:none){.asset-card .asset-preview.is-transparent::after{display:none}}
@media(prefers-reduced-motion:reduce){.asset-card .asset-preview.is-transparent::before{transition:none}}

/* Subtle transparency preview: preserve 20% of the original background,
   blend in a static checkerboard with enough contrast for white logos. */
.asset-tabs button:not([aria-selected=true]){opacity:.48}
.asset-tabs button:hover:not([aria-selected=true]),
.asset-tabs button:focus-visible:not([aria-selected=true]){opacity:.9}
.asset-card .asset-preview.is-transparent::before{
 background-image:conic-gradient(#718595 25%,#a0adb8 0 50%,#718595 0 75%,#a0adb8 0);
 background-size:24px 24px;
 opacity:0;
 transition:opacity .24s ease;
}
.asset-card:hover .asset-preview.is-transparent::before{opacity:.8}
@media(prefers-reduced-motion:reduce){
 .asset-card .asset-preview.is-transparent::before{transition:none}
}

/* Clickable logo previews and background-aware transparency grid */
.asset-preview:is(a,button){width:100%;border:0;text-decoration:none;cursor:pointer;font:inherit}
.asset-preview:is(a,button):focus-visible{outline:3px solid #153c59;outline-offset:-4px}
.asset-preview .preview-download-icon{position:absolute;z-index:3;top:12px;right:12px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:#102f49;border:1px solid #ccd5dc;opacity:0;transform:translateY(4px);transition:opacity .18s ease,transform .18s ease;pointer-events:none}
.preview-download-icon svg{width:19px;height:19px}
.asset-preview:is(a,button):hover .preview-download-icon,.asset-preview:is(a,button):focus-visible .preview-download-icon{opacity:1;transform:translateY(0)}
/* The original preview colour remains; overlay introduces muted squares, not a blue tint. */
.asset-card .asset-preview.is-transparent::before{background-size:24px 24px;opacity:0;transition:opacity .24s ease}
.asset-card .asset-preview.is-transparent.white::before{background-image:conic-gradient(#d0d0d0 25%,#f7f7f7 0 50%,#d0d0d0 0 75%,#f7f7f7 0);opacity:0}
.asset-card .asset-preview.is-transparent.navy::before,.asset-card .asset-preview.is-transparent.midnight::before{background-image:conic-gradient(#80909c 25%,#b2bcc4 0 50%,#80909c 0 75%,#b2bcc4 0);opacity:0}
.asset-card .asset-preview.is-transparent:is(a,button):hover::before,.asset-card .asset-preview.is-transparent:is(a,button):focus-visible::before{opacity:.8}
.asset-card .asset-preview.is-transparent:is(a,button):hover{background-image:none!important}
.download-dialog{border:1px solid #dce0e3;border-radius:12px;max-width:min(420px,calc(100% - 32px));width:100%;padding:0;color:#102f49;box-shadow:0 22px 70px #061c3160}
.download-dialog::backdrop{background:#061c3180}
.download-dialog-inner{padding:30px;position:relative}
.download-dialog h2{font-size:22px;font-weight:500;margin:0 30px 8px 0}
.download-dialog p{font-size:14px;color:#667789;margin:0 0 24px}
.download-dialog-close{position:absolute;right:15px;top:13px;background:transparent;border:0;color:#566a7b;font-size:28px;line-height:1;padding:5px 9px}
.download-dialog-actions{display:flex;gap:10px}
.download-dialog-actions a{display:inline-flex;flex:1;justify-content:center;align-items:center;padding:13px 10px;border-radius:6px;border:1px solid #153c59;background:#153c59;color:white;font-size:13px;font-weight:500}
.download-dialog-actions a:last-child{background:#fff;color:#153c59}
.download-dialog-actions a:hover{border-color:#e5bc74;background:#f8ead1;color:#102f49}
@media(hover:none){.asset-preview .preview-download-icon{opacity:1;transform:none;width:31px;height:31px;top:9px;right:9px}.preview-download-icon svg{width:16px;height:16px}}
@media(prefers-reduced-motion:reduce){.asset-preview .preview-download-icon{transition:none}}

/* Keep each preview's original colour in its transparency check.
   Neutral greys are mixed with that base, never with navy universally.
   For artwork with embedded backgrounds, only the area outside the image
   reveals the grid, since the artwork itself remains opaque. */
.asset-preview.has-preview-grid.navy{--grid-base:#153c59}
.asset-preview.has-preview-grid.midnight{--grid-base:#061c31}
.asset-preview.has-preview-grid.white{--grid-base:#fff}
.asset-preview.has-preview-grid.paper{--grid-base:#f7f5f0}
.asset-card .asset-preview.has-preview-grid:is(a,button)::before{
 content:"";
 position:absolute;
 inset:0;
 z-index:0;
 pointer-events:none;
 background-image:conic-gradient(
  color-mix(in srgb,var(--grid-base) 45%,#858585) 25%,
  color-mix(in srgb,var(--grid-base) 45%,#cccccc) 0 50%,
  color-mix(in srgb,var(--grid-base) 45%,#858585) 0 75%,
  color-mix(in srgb,var(--grid-base) 45%,#cccccc) 0
 )!important;
 background-size:24px 24px;
 opacity:0!important;
 transition:opacity .24s ease;
}
.asset-card .asset-preview.has-preview-grid:is(a,button) img{position:relative;z-index:1}
.asset-card .asset-preview.has-preview-grid:is(a,button):hover::before,
.asset-card .asset-preview.has-preview-grid:is(a,button):focus-visible::before{opacity:1!important}
@media(prefers-reduced-motion:reduce){
 .asset-card .asset-preview.has-preview-grid:is(a,button)::before{transition:none}
}

/* Keep transparency tiles relative to the ORIGINAL background, with no grey-blue replacement. */
.asset-card .asset-preview.has-preview-grid:is(a,button)::before{
 background-image:conic-gradient(
  rgba(0,0,0,.12) 25%,transparent 0 50%,
  rgba(0,0,0,.12) 0 75%,transparent 0
 )!important;
 opacity:0!important;
 transition:opacity .24s ease;
}
.asset-card .asset-preview.has-preview-grid.midnight:is(a,button)::before,
.asset-card .asset-preview.has-preview-grid.navy:is(a,button)::before{
 background-image:conic-gradient(
  rgba(255,255,255,.19) 25%,transparent 0 50%,
  rgba(255,255,255,.19) 0 75%,transparent 0
 )!important;
}
.asset-card .asset-preview.has-preview-grid:is(a,button):hover::before,
.asset-card .asset-preview.has-preview-grid:is(a,button):focus-visible::before{
 opacity:1!important;
}

/* Explicit preview colours for interactive elements.
   Earlier hover rules must never clear the background behind transparent artwork. */
.asset-card .asset-preview.midnight:is(a,button),
.asset-card .asset-preview.midnight:is(a,button):hover,
.asset-card .asset-preview.midnight:is(a,button):focus-visible{background-color:#061c31!important}
.asset-card .asset-preview.navy:is(a,button),
.asset-card .asset-preview.navy:is(a,button):hover,
.asset-card .asset-preview.navy:is(a,button):focus-visible{background-color:#153c59!important}
.asset-card .asset-preview.white:is(a,button),
.asset-card .asset-preview.white:is(a,button):hover,
.asset-card .asset-preview.white:is(a,button):focus-visible{background-color:#fff!important}
.asset-card .asset-preview.paper:is(a,button),
.asset-card .asset-preview.paper:is(a,button):hover,
.asset-card .asset-preview.paper:is(a,button):focus-visible{background-color:#f7f5f0!important}

/* Match the white-background logo hover to the navy logo hover.
   The transparent grid overlays the ORIGINAL white surface only. */
.asset-card .asset-preview.has-preview-grid.white:is(a,button)::before{
 background-image:conic-gradient(
  rgba(0,0,0,.19) 25%,transparent 0 50%,
  rgba(0,0,0,.19) 0 75%,transparent 0
 )!important;
 background-size:24px 24px;
 opacity:0!important;
 transition:opacity .24s ease;
}
.asset-card .asset-preview.has-preview-grid.white:is(a,button):hover::before,
.asset-card .asset-preview.has-preview-grid.white:is(a,button):focus-visible::before{
 opacity:1!important;
}

/* Section surfaces follow the new Colours → Logos → Guidelines → Typography order. */
#colours.section-light{background:#f7f5f0}
#logos.section-light{background:#fff}
#guidelines.guideline-section{background:#f8ead1}
#typography.type-section{background:#102f49}
#logos .asset-preview.paper{background-color:#f7f5f0}
#logos .asset-preview.white{background-color:#fff}
/* Simplified hero and matching header/footer wordmarks. */
.hero-copy h1{margin-top:0}
.brand-link,.footer-brand{letter-spacing:normal}
.footer-brand small{font-size:inherit;font-weight:400;letter-spacing:normal;opacity:.65}
@media(max-width:650px){
 .brand-link{font-size:10px}
 .brand-link img{width:30px;height:32px}
 .footer-brand{font-size:11px}
}

/* Hover/focus colour reveal: copy affordance remains accessible on touch. */
.swatch-sample{position:relative;overflow:hidden;justify-content:center;align-items:center;padding:12px}
.swatch-hover-content{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;width:100%;height:100%;opacity:0;transform:translateY(5px);transition:opacity .22s ease,transform .22s ease;pointer-events:none}
.swatch:hover .swatch-hover-content,.swatch:focus-visible .swatch-hover-content{opacity:1;transform:translateY(0)}
.swatch-hover-content.on-dark{color:#fff}
.swatch-hover-content.on-light{color:#102f49}
.swatch-hover-hex{font-size:clamp(18px,2.15vw,29px);font-weight:500;letter-spacing:-.025em;line-height:1.1;font-variant-numeric:tabular-nums}
.palette-secondary .swatch-hover-hex{font-size:clamp(15px,1.65vw,22px)}
.swatch-hover-copy{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:400}
.swatch-hover-copy svg{width:16px;height:16px}
.swatch:focus-visible{outline:2px solid #e5bc74;outline-offset:3px}
@media(hover:none){.swatch-hover-content{opacity:0;transform:none}.swatch:focus-visible .swatch-hover-content{opacity:1}}
@media(prefers-reduced-motion:reduce){.swatch-hover-content{transition:none;transform:none}}

/* Three supporting palette colours after removing near-duplicates. */
@media(min-width:651px){.palette-secondary{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Section headings use one consistent colour, with no alternate gold/brown word. */
.section h2 em{color:inherit!important;font-style:normal}

/* Guidelines: soft neutral background with a distinct hierarchy within each rule. */
#guidelines.guideline-section{background:#f7f5f0}
#guidelines .section-heading{margin-bottom:30px}
#guidelines .section-heading h2{color:#102f49}
#guidelines .section-heading p{color:#657383;font-size:14px;line-height:1.6}
#guidelines .guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#guidelines .guide-grid article{
 background:#fff;
 border:1px solid #e3e2dc;
 border-radius:8px;
 padding:25px 23px 27px;
 display:flex;
 flex-direction:column;
 align-items:flex-start;
 min-width:0;
}
#guidelines .guide-icon{
 display:flex;
 align-items:center;
 justify-content:center;
 background:#153c59;
 color:#fff;
 font-size:12px;
 font-weight:500;
 width:36px;
 height:36px;
 border-radius:7px;
 letter-spacing:normal;
}
#guidelines .guide-grid h3{
 color:#102f49;
 font-size:18px;
 font-weight:600;
 line-height:1.35;
 letter-spacing:normal;
 margin:22px 0 10px;
}
#guidelines .guide-grid p{
 color:#5e6871;
 font-size:13px;
 line-height:1.75;
 margin:0;
}
@media(max-width:950px){
 #guidelines .guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
 #guidelines .guide-grid{grid-template-columns:1fr;gap:12px}
 #guidelines .guide-grid article{padding:22px}
 #guidelines .guide-grid h3{margin-top:16px}
}

/* Approved Starlight gold badges with navy numerals */
#guidelines .guide-icon{background:#E5BC74;color:#102F49}

/* Brandmark assets have their own four-up grid; primary logos stay three-up. */
.brandmark-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media(max-width:1050px){.brandmark-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.brandmark-grid{grid-template-columns:1fr}}

/* Download the complete logo library beside the Logos heading. */
.logo-heading{display:flex;align-items:center;gap:18px}
.download-all-assets{position:relative;width:42px;height:42px;border-radius:13px;background:#f7f5f0;border:1px solid #d7dce0;color:#153c59;display:inline-flex;align-items:center;justify-content:center;transition:background .2s ease,border-color .2s ease,color .2s ease}
.download-all-assets:hover,.download-all-assets:focus-visible{background:#f8ead1;border-color:#e5bc74;color:#102f49}
.download-all-assets svg{width:21px;height:21px}
.download-all-tooltip{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translate(-50%,5px);background:#102f49;color:#fff;white-space:nowrap;font-size:11px;font-weight:500;padding:9px 12px;border-radius:6px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility .18s ease;z-index:3}
.download-all-assets:is(:hover,:focus-visible) .download-all-tooltip{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* Full-width Logos heading with a clearly labelled download-all action. */
#logos .section-heading.logos-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}
#logos .download-all-assets{width:auto;height:auto;min-height:44px;gap:10px;padding:11px 16px;border-radius:8px;background:#fff;white-space:nowrap;font-size:13px;font-weight:600}
#logos .download-all-assets svg{width:19px;height:19px;flex-shrink:0}
@media(max-width:650px){#logos .section-heading.logos-heading{align-items:flex-start;flex-direction:column;gap:17px}#logos .download-all-assets{width:auto}}

/* Keep colour swatch labels in Starlight Navy on iOS Safari (buttons otherwise use system blue). */
button.swatch,button.swatch .swatch-info strong{color:#102f49}