/* Grade House Header — fixed bar on paper with a hairline; Services opens a
 * full-width panel (three groups and a manila booking card). Phones: 64px
 * bar, call icon + menu, full-screen drawer. Tucks away on scroll down. */

.gh.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--gh-paper); border-bottom: 1px solid var(--gh-line); transition: transform .3s var(--gh-ease); }
body.admin-bar .gh.hdr { top: 32px; }
.gh.hdr.is-tucked { transform: translateY(-110%); }
.gh.hdr-space { height: var(--gh-hdr); }

.gh .hdr__in { display: flex; align-items: center; gap: 28px; height: var(--gh-hdr); max-width: var(--gh-max); margin: 0 auto; padding: 0 var(--gh-pad); }
.gh.hdr .logo .logo__svg { height: 58px; }

.gh .hdr__nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.gh .hdr__nav > a, .gh .hdr__svc { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border: 0; background: none; font: 500 15.5px/1 var(--gh-sans); color: var(--gh-ink); text-decoration: none; cursor: pointer; white-space: nowrap; }
.gh .hdr__nav > a::after, .gh .hdr__svc::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 1.5px; background: var(--gh-blue); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--gh-ease); }
.gh .hdr__nav > a:hover::after, .gh .hdr__nav > a[aria-current="page"]::after, .gh .hdr__svc:hover::after, .gh .hdr__svc[aria-expanded="true"]::after { transform: scaleX(1); }
.gh .hdr__svc svg { width: 11px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .2s; }
.gh .hdr__svc[aria-expanded="true"] svg { transform: rotate(180deg); }

.gh .hdr__end { display: flex; align-items: center; gap: 14px; }
.gh .hdr__phone { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1 var(--gh-sans); color: var(--gh-ink); text-decoration: none; white-space: nowrap; }
.gh .hdr__phone:hover { color: var(--gh-blue); }
.gh .hdr__phone .ic { width: 17px; height: 17px; color: var(--gh-blue); }
.gh .hdr__ic, .gh .hdr__menu { display: none; }

/* services panel */
.gh .hdr__panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--gh-paper); border-top: 1px solid var(--gh-line); border-bottom: 1px solid var(--gh-line); box-shadow: 0 24px 40px -28px rgba(26, 28, 31, .35); }
.gh .hdr__panel[hidden] { display: none; }
.gh .hdr__panel-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(240px, .9fr); gap: 40px; max-width: var(--gh-max); margin: 0 auto; padding: 36px var(--gh-pad) 40px; }
.gh .hdr__gt { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--gh-ink); font: 600 18px/1.2 var(--gh-head); letter-spacing: -.015em; color: var(--gh-ink); }
.gh .hdr__group ul { display: grid; gap: 2px; }
.gh .hdr__group a { display: block; padding: 7px 0; font-size: 15.5px; color: var(--gh-text); text-decoration: none; }
.gh .hdr__group a:hover, .gh .hdr__group a[aria-current="page"] { color: var(--gh-blue); }
.gh .hdr__card { position: relative; display: grid; align-content: start; gap: 14px; padding: 36px 26px 26px; background: var(--gh-card-2); clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
.gh .hdr__card .punch { top: 14px; left: 14px; width: 14px; height: 14px; }
.gh .hdr__card-t { font: 600 22px/1.15 var(--gh-head); letter-spacing: var(--gh-track); color: var(--gh-ink); }
.gh .hdr__card p { font-size: 15px; }
.gh .hdr__card .btn { justify-self: start; }

/* drawer (phones and small tablets) */
.gh .hdr__drawer { position: fixed; inset: var(--gh-hdr) 0 0; background: var(--gh-paper); overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--gh-line); }
body.admin-bar .gh .hdr__drawer { top: calc(var(--gh-hdr) + 46px); }
.gh .hdr__drawer[hidden] { display: none; }
.gh .hdr__drawer-in { display: grid; gap: 28px; padding: 12px var(--gh-pad) 40px; }
.gh .hdr__dlist > li { border-bottom: 1px solid var(--gh-line); }
.gh .hdr__dlist > li > a, .gh .hdr__dsvc > summary { display: flex; align-items: center; justify-content: space-between; min-height: 58px; font: 600 21px/1.2 var(--gh-head); letter-spacing: -.02em; color: var(--gh-ink); text-decoration: none; list-style: none; cursor: pointer; }
.gh .hdr__dsvc > summary::-webkit-details-marker { display: none; }
.gh .hdr__dsvc > summary svg { width: 14px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .2s; }
.gh .hdr__dsvc[open] > summary svg { transform: rotate(180deg); }
.gh .hdr__dsvc .hdr__gt { margin: 14px 0 6px; padding: 0; border: 0; font: 600 14px/1.3 var(--gh-sans); color: var(--gh-muted); }
.gh .hdr__dsvc ul a { display: block; padding: 9px 0; font-size: 17px; color: var(--gh-text); text-decoration: none; }
.gh .hdr__dsvc ul a[aria-current="page"] { color: var(--gh-blue); }
.gh .hdr__all { padding: 12px 0 18px; }
.gh .hdr__dfoot { display: grid; gap: 10px; }

@media (max-width: 1240px) {
	.gh .hdr__phone { display: none; }
}
@media (max-width: 1100px) {
	.gh .hdr__nav, .gh .hdr__panel { display: none !important; }
	.gh .hdr__end { margin-left: auto; }
	.gh .hdr__menu { display: inline-grid; place-content: center; gap: 6px; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
	.gh .hdr__menu span { display: block; width: 24px; height: 1.8px; background: var(--gh-ink); transition: transform .25s; }
	.gh .hdr__menu[aria-expanded="true"] span:first-child { transform: translateY(3.9px) rotate(45deg); }
	.gh .hdr__menu[aria-expanded="true"] span:last-child { transform: translateY(-3.9px) rotate(-45deg); }
}
@media (max-width: 767px) {
	.gh .hdr__in { gap: 8px; }
	.gh.hdr .logo .logo__svg { height: 44px; }
	.gh .hdr__cta { display: none; }
	.gh .hdr__ic { display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--gh-ink); }
	.gh .hdr__ic .ic { width: 21px; height: 21px; }
	.gh .hdr__end { gap: 0; }
}
@media (max-width: 782px) {
	body.admin-bar .gh.hdr { top: 46px; }
}
@media (max-width: 600px) {
	body.admin-bar .gh.hdr { top: 0; }
	body.admin-bar .gh .hdr__drawer { top: var(--gh-hdr); }
}