/* Reference-led identity section. Intentionally scoped to #design. */
.g-colour-usage{margin-top:14px;padding:clamp(22px,3vw,40px);background:#fffdfa;border:1px solid var(--line);border-radius:12px}
.g-colour-usage-heading{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:28px}
.g-colour-usage-heading h4{font:600 clamp(24px,3vw,38px)/1.1 var(--f1);letter-spacing:-.04em;margin-top:12px}
.g-colour-usage-heading>p{max-width:440px;font-size:15px;color:var(--muted);line-height:1.6}
.g-colour-ratio{display:flex;height:42px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.g-colour-ratio>span{flex:var(--share) 1 0;background:var(--usage-colour)}
.g-colour-usage-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 30px;list-style:none;margin:28px 0 0;padding:0}
.g-colour-usage-list li{padding-top:16px;border-top:1px solid var(--line)}
.g-colour-usage-list li>div{display:flex;align-items:center;gap:10px;font-size:14px}
.g-colour-usage-list strong{font-weight:500}
.g-colour-usage-list b{margin-left:auto;font:600 22px var(--f1)}
.g-usage-dot{width:14px;height:14px;flex-shrink:0;background:var(--usage-colour);border:1px solid #30251f30;border-radius:3px}
.g-usage-role{display:block;margin:8px 0 4px;font:500 10px var(--f1);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.g-colour-usage-list p{font-size:13px;line-height:1.5;color:var(--muted)}
@media(max-width:800px){.g-colour-usage-heading{align-items:start;flex-direction:column;gap:18px}.g-colour-usage-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.g-colour-usage-list{grid-template-columns:1fr}.g-colour-ratio{height:32px}}
#design{background:var(--paper);--acc:#49c3d7;padding-block:64px}
#design>.g-wrap{width:min(1560px,94%);padding:0}
.g-identity-heading{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:end;padding:0 3% 12px}
.g-identity-heading h2{font-size:clamp(48px,7.4vw,112px);line-height:1;letter-spacing:-.065em;font-weight:700;margin-top:22px}
.g-identity-heading h2>span{background:linear-gradient(transparent 64%,#60d2df 64%,#60d2df 96%,transparent 96%);white-space:nowrap}
.g-identity-summary>p{max-width:440px;margin:0 0 28px auto;font-size:clamp(16px,1.25vw,20px);line-height:1.6;color:var(--muted)}
.g-identity-stats{display:grid;grid-template-columns:repeat(3,1fr) 1.15fr;background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px 8px;margin:0}
.g-identity-stats>div{display:flex;align-items:center;justify-content:center;gap:12px;border-right:1px solid var(--line)}
.g-identity-stats>div:last-child{border:0;flex-direction:column;gap:2px}
.g-identity-stats dt{font:700 clamp(26px,2.5vw,38px)/1 var(--f2)}
.g-identity-stats>div:last-child dt{font-size:15px}
.g-identity-stats dd{margin:0;font:400 12px/1.3 var(--f2);color:var(--muted)}
/* sub-parts of brand identity: a real heading level below the section h2, no numbers */
#design .g-sub{gap:8px 24px;margin:clamp(44px,5vw,64px) 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line);align-items:baseline}
#design .g-sub h3{display:flex;align-items:center;gap:12px;font:600 clamp(22px,2vw,28px)/1.2 var(--f1);letter-spacing:-.025em;color:var(--text)}
#design .g-sub h3::before{content:"";width:12px;height:12px;flex-shrink:0;background:var(--magenta);border-radius:2px}
#design .g-sub p{font-size:15px}
#design .g-logo-grid{gap:10px}
#design .g-logo-hero{display:grid;grid-template-columns:190px 1fr;gap:40px;min-height:0;padding:50px 32px;border:1px solid var(--line)}
.g-logo-description h4{font:500 12px var(--f2);letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.g-logo-description p{font:400 15px/1.5 var(--f2);color:var(--muted);max-width:160px}
.g-logo-description::after{content:"";display:block;width:140px;border-top:1px solid var(--line);margin-top:32px}
#design .g-logo-hero .g-logo{width:min(760px,88%);justify-self:center}
#design .g-logo-var{aspect-ratio:2.35;padding:32px 20px 48px;border:1px solid var(--line)}
#design .g-logo-var .g-logo{width:72%}
#design .g-logo-var figcaption{opacity:1;left:20px;bottom:18px;font:400 13px var(--f2)}
#design .g-logo-var figcaption::before{content:"";display:inline-block;width:18px;height:2px;background:#49c3d7;vertical-align:middle;margin-right:12px}
#design .v-cyan{background:#49c3d7}
#design .g-logo-var.v-cyan figcaption::before{background:#16181d}
#design .g-palette{grid-template-columns:repeat(5,1fr);gap:10px;height:auto;overflow:visible}
#design .g-swatch{border-radius:9px;min-height:190px;padding:22px 26px;aspect-ratio:1.3}
#design .sw-top{justify-content:flex-end}
#design .sw-top>span+span{display:none}
#design .sw-bot strong{font-size:22px;margin-bottom:10px}
#design .sw-bot>span{font:400 15px/1.35 var(--f2)}
#design .g-swatch:nth-child(2),#design .g-swatch:nth-child(5){color:white}
#design .g-swatch{flex-direction:column;align-items:stretch}
#design .sw-bot{text-align:left}
#design .g-weights{margin:0;border-bottom:0}
#design .g-type{gap:12px}
#design .g-type-card{grid-row:auto;grid-template-columns:1fr 1.35fr 1.2fr;grid-template-rows:auto auto auto auto;gap:12px 18px;padding:26px;border:1px solid var(--line)}
#design .g-type-top{grid-column:1/-1;margin-bottom:10px}
#design .g-type-top .g-badge{font:400 10px var(--f2);letter-spacing:.12em}
#design .g-type-aa{grid-column:1;grid-row:2/4;font-size:clamp(70px,8vw,120px);margin:0;align-self:center}
#design .g-type-card h4{grid-column:2;grid-row:2;font-size:30px;align-self:end}
#design .g-type-card>p:not(.g-glyphs){grid-column:2;grid-row:3;font-size:12px;margin:0;line-height:1.5}
#design .g-weights{grid-column:1/3;grid-row:4;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:14px;font-size:12px}
#design .g-glyphs{grid-column:3;grid-row:2/5;font:400 13px/1.8 var(--f2);overflow-wrap:anywhere;word-break:break-word;border-left:1px solid var(--line);padding-left:22px;margin:0;align-self:stretch;display:flex;align-items:center}
#design .g-type-demo{position:relative;isolation:isolate;overflow:hidden;display:block;min-height:240px;padding:28px;color:#fff}
#design .g-type-demo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
#design .g-type-demo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.98) 0%,rgba(0,0,0,.94) 22%,rgba(0,0,0,.82) 39%,rgba(0,0,0,.55) 53%,rgba(0,0,0,.2) 69%,rgba(0,0,0,.04) 88%,transparent 100%);z-index:-1}
.g-brand-message{max-width:49%}
#design .g-type-demo .g-eyebrow{color:#fff;font-size:10px}
#design .g-type-demo h4{font-size:clamp(32px,4.6vw,64px);margin:16px 0 12px;line-height:1;letter-spacing:-.055em}
#design .g-type-demo h4 span{background:linear-gradient(transparent 55%,#49c3d7 55%,#49c3d7 92%,transparent 92%)}
#design .g-type-demo p{font-size:14px;line-height:1.5}
@media(max-width:1100px){.g-identity-heading{padding-inline:0}.g-identity-stats>div{gap:6px}#design .g-type-card{padding:22px;gap:10px}#design .g-swatch{padding:18px;min-height:175px}#design .g-type-card h4{font-size:25px}}
@media(max-width:800px){.g-identity-heading{grid-template-columns:1fr}.g-identity-summary>p{margin:0 0 24px;max-width:none}.g-identity-heading h2{font-size:clamp(44px,10vw,76px)}#design .g-logo-hero{grid-template-columns:1fr;padding:28px;gap:24px}.g-logo-description p{max-width:none}.g-logo-description::after{display:none}#design .g-logo-grid{grid-template-columns:repeat(3,1fr)}#design .g-logo-var{aspect-ratio:1.4;padding:18px 8px 40px}#design .g-logo-var .g-logo{width:95%}#design .g-palette{grid-template-columns:repeat(3,1fr)}#design .g-type{grid-template-columns:1fr}#design .g-sub p{width:100%;margin:0}#design .g-type-demo>img{width:100%;opacity:.4}.g-brand-message{max-width:90%}}
@media(max-width:480px){#design{padding-block:40px}.g-identity-stats{grid-template-columns:1fr 1fr;gap:18px}.g-identity-stats>div:nth-child(2){border:0}#design .g-logo-grid{grid-template-columns:1fr}#design .g-logo-var{aspect-ratio:2.5}#design .g-logo-var .g-logo{width:70%}#design .g-palette{grid-template-columns:1fr 1fr}#design .g-swatch{aspect-ratio:auto;min-height:150px}#design .g-swatch:last-child{grid-column:1/-1;min-height:110px}#design .g-type-card{grid-template-columns:1fr 1.5fr}#design .g-glyphs{grid-column:1/-1;grid-row:5;border-left:0;border-top:1px solid var(--line);padding:12px 0 0}.g-brand-message{max-width:100%}}
