/* Grade House Footer — graphite. Two panels (blue: book; manila card with a
 * punched hole: send designs), studio details + three link columns, the
 * name across the full width, and the legal row. */

.gh.ftr { background: var(--gh-ink-2); color: #B9BCC2; padding: clamp(56px, 7vw, 96px) 0 28px; font-size: 15.5px; }
.gh.ftr a { color: inherit; text-decoration: none; }

.gh .ftr__panels { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: clamp(56px, 7vw, 88px); }
.gh .ftr__panel { position: relative; display: grid; align-content: start; justify-items: start; gap: 16px; padding: clamp(28px, 3.4vw, 48px); border-radius: 2px; }
.gh .ftr__panel p { max-width: 46ch; font-size: 16.5px; line-height: 1.6; }
.gh .ftr__panel .ftr__pt { max-width: none; font: 600 clamp(28px, 2.8vw, 40px)/1.06 var(--gh-head); letter-spacing: var(--gh-track); }
.gh .ftr__panel .btn { margin-top: 8px; }
/* footer links inherit colour; buttons keep their own */
.gh.ftr .btn--paper { color: var(--gh-ink); }
.gh.ftr .btn--paper:hover { color: var(--gh-blue); }
.gh .ftr__panel--a { background: var(--gh-blue); color: #E3E8F6; }
.gh .ftr__panel--a .ftr__pt { color: #fff; }
.gh .ftr__panel--b { background: var(--gh-card); color: #3F3522; clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%); }
.gh .ftr__panel--b .ftr__pt { color: var(--gh-ink); }
.gh .ftr__panel--b .punch { top: 22px; right: 54px; background: var(--gh-ink-2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }
.gh .ftr__panel--b .btn--line { color: var(--gh-ink); }
.gh .ftr__panel--b .btn--line:hover { background: var(--gh-ink); color: #fff; }
.gh .ftr__mail { font-weight: 600; color: var(--gh-ink) !important; text-decoration: underline !important; text-underline-offset: 3px; }

.gh .ftr__grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.gh .ftr__studio { display: grid; align-content: start; gap: 20px; }
.gh .ftr__studio .logo .logo__svg { height: 76px; }
.gh .ftr__about { max-width: 38ch; }
.gh .ftr__contact { display: grid; gap: 12px; margin: 0; }
.gh .ftr__contact div { display: grid; grid-template-columns: 64px 1fr; gap: 12px; }
.gh .ftr__contact dt { color: #80848B; font-weight: 400; }
.gh .ftr__contact dd { margin: 0; color: #E4E5E7; }
.gh .ftr__contact dd span { display: block; }
.gh .ftr__contact a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.gh .ftr__social { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.gh .ftr__social a { color: #E4E5E7; border-bottom: 1px solid rgba(255, 255, 255, .25); }

.gh .ftr__ct { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .16); font: 600 18px/1.2 var(--gh-head); letter-spacing: -.01em; color: #fff; }
.gh .ftr__col ul { display: grid; gap: 4px; }
.gh .ftr__col a { display: inline-block; padding: 5px 0; transition: color .2s; }
.gh .ftr__col a:hover { color: #fff; }

/* the name across the footer: sized to the width, clipped at the baseline like a cut edge */
.gh .ftr__wm { margin: 0; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .16); font: 700 clamp(60px, 16.4vw, 232px)/.86 var(--gh-head); letter-spacing: -.055em; color: #2E3136; white-space: nowrap; overflow: hidden; text-align: center; user-select: none; }

.gh .ftr__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 14px; color: #80848B; }
.gh .ftr__legal ul { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.gh .ftr__legal a:hover { color: #fff; }
.gh .ftr__credit { display: inline-flex; align-items: center; gap: 8px; }
.gh .ftr__sky { width: auto; height: 17px; flex: none; }

@media (max-width: 1024px) {
	.gh .ftr__grid { grid-template-columns: 1fr 1fr; }
	.gh .ftr__studio { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
	.gh.ftr { padding-top: 56px; }
	.gh .ftr__panels { grid-template-columns: 1fr; gap: 14px; margin-bottom: 56px; }
	.gh .ftr__panel .ftr__pt { font-size: 30px; }
	.gh .ftr__panel .btn { width: 100%; }
	.gh .ftr__grid { grid-template-columns: 1fr; gap: 36px; }
	.gh .ftr__studio .logo .logo__svg { height: 60px; }
	.gh .ftr__wm { font-size: 17.4vw; }
	.gh .ftr__legal { flex-direction: column; }
	.gh .ftr__legal ul { gap: 10px 20px; }
	.gh .ftr__col a { padding: 8px 0; }
}