/* The short logo pages (EMES, Sweetrade): hero, how the logo was built, then the logo in use */
.lede{max-width:40ch}
.lc{padding-top:clamp(70px,12svh,120px);padding-bottom:0}
.head{margin-bottom:clamp(28px,5svh,44px)}
.lc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.lc-step.wide{grid-column:1/-1}
.lc-panel{display:grid;place-items:center;aspect-ratio:1;padding:9%;border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px rgba(239,232,216,.1)}
.lc-panel svg{display:block;width:100%;height:auto;overflow:visible}
.lc-step.wide .lc-panel{aspect-ratio:auto;padding:clamp(28px,5vw,64px)}
.lc-n{display:flex;gap:12px;margin-top:16px;color:var(--muted);font-size:11px}
.lc-n b{color:var(--accent);font-weight:500}
.lc-step h3{margin-top:10px;font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,1.4vw,1.25rem);letter-spacing:-.02em;line-height:1.2}
.lc-step p:not(.mono){margin-top:8px;max-width:40ch;color:#cfc7b9;font-size:15px;line-height:1.55}
.gd{fill:none;stroke:#e8643c;stroke-width:1;stroke-opacity:.6;vector-effect:non-scaling-stroke}
.gd.dash{stroke-dasharray:4 5}
.gd-dot{fill:#e8643c}
.gd-t{fill:#e8643c;font:10px var(--mono);letter-spacing:.08em}
/* the logo in use */
.use{padding-top:clamp(70px,12svh,120px)}
.use-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.use-grid figure:nth-child(4n+1),.use-grid figure:nth-child(4n){grid-column:span 5}
.use-grid figure:nth-child(4n+2),.use-grid figure:nth-child(4n+3){grid-column:span 7}
.use-grid .frame{height:clamp(240px,27vw,400px)}
@media (max-width:900px){.lc-grid{grid-template-columns:1fr}.use-grid figure:nth-child(n){grid-column:1/-1}.use-grid .frame{height:auto;aspect-ratio:4/3}}