.gbp-footer__list { list-style: none; margin: 0; padding: 0; }.gbp-footer { background-color: var(--contrast); color: rgba(255,255,255,0.7); padding-bottom: 1.5rem; padding-left: clamp(1.25rem, 4vw, 2.5rem); padding-right: clamp(1.25rem, 4vw, 2.5rem); padding-top: clamp(3rem, 5vw, 4rem); width: 100%; } .gbp-footer__text { font-size: 1rem; }.brand-cta__lead { color: rgba(255,255,255,0.9); font-size: clamp(1.15rem,1.5vw,1.3rem); font-weight: 400; line-height: 1.55; margin: 1rem auto 1.4rem; max-width: 48ch; }.brand-cta__inner { align-items: center; display: flex; flex-direction: column; row-gap: 0.4rem; text-align: center; z-index: 1; }.brand-cta { background-color: var(--primary); color: #ffffff; text-align: center; }
.brand-cta__lead a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .brand-cta__lead a:hover,.brand-cta__lead a:focus-visible{color:var(--accent);text-decoration-color:var(--accent)}.brand-facts { color: var(--contrast); column-gap: 2rem; display: flex; flex-wrap: wrap; font-family: var(--body-font, inherit); font-size: .9rem; font-weight: 700; letter-spacing: .02em; row-gap: 1.4rem; }.brand-attribution { color: var(--primary); font-family: var(--body-font, inherit); font-size: .9rem; font-weight: 700; margin-top: 1.1rem; }.brand-quote { border-left-color: var(--primary); border-left-style: solid; border-left-width: 2px; color: var(--contrast); font-family: var(--heading-font, inherit); font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-style: italic; font-weight: 500; line-height: 1.35; margin: 0; max-width: 60ch; padding-left: 1.8rem; }.brand-pull { max-width: 60ch; }.brand-button-outline--reverse { align-items: center; background-color: transparent; border-bottom-color: rgba(255,255,255,0.55); border-bottom-style: solid; border-bottom-width: 1.5px; border-left-color: rgba(255,255,255,0.55); border-left-style: solid; border-left-width: 1.5px; border-radius: 1px; border-right-color: rgba(255,255,255,0.55); border-right-style: solid; border-right-width: 1.5px; border-top-color: rgba(255,255,255,0.55); border-top-style: solid; border-top-width: 1.5px; color: #ffffff; column-gap: 0.5rem; display: inline-flex; font-family: var(--body-font, inherit); font-size: 1rem; font-weight: 700; padding-bottom: 0.85rem; padding-left: 1.7rem; padding-right: 1.7rem; padding-top: 0.85rem; text-decoration: none; transition: background-color 0.2s cubic-bezier(.22,.61,.36,1), color 0.2s cubic-bezier(.22,.61,.36,1); width: fit-content; } .brand-button-outline--reverse:is(:hover, :focus) { background-color: #ffffff; color: var(--contrast); }.brand-button-primary--reverse { align-items: center; background-color: #ffffff; border-bottom-color: #ffffff; border-bottom-style: solid; border-bottom-width: 1.5px; border-left-color: #ffffff; border-left-style: solid; border-left-width: 1.5px; border-radius: 1px; border-right-color: #ffffff; border-right-style: solid; border-right-width: 1.5px; border-top-color: #ffffff; border-top-style: solid; border-top-width: 1.5px; color: var(--contrast); column-gap: 0.5rem; display: inline-flex; font-family: var(--body-font, inherit); font-size: 1rem; font-weight: 700; padding-bottom: 0.85rem; padding-left: 1.7rem; padding-right: 1.7rem; padding-top: 0.85rem; text-decoration: none; transition: opacity 0.2s ease; width: fit-content; } .brand-button-primary--reverse:is(:hover, :focus) { opacity: 0.9; }.brand-button-outline { align-items: center; background-color: transparent; border-bottom-color: var(--primary); border-bottom-style: solid; border-bottom-width: 1.5px; border-left-color: var(--primary); border-left-style: solid; border-left-width: 1.5px; border-radius: 1px; border-right-color: var(--primary); border-right-style: solid; border-right-width: 1.5px; border-top-color: var(--primary); border-top-style: solid; border-top-width: 1.5px; color: var(--primary); column-gap: 0.5rem; display: inline-flex; font-family: var(--body-font, inherit); font-size: 1rem; font-weight: 700; padding-bottom: 0.85rem; padding-left: 1.7rem; padding-right: 1.7rem; padding-top: 0.85rem; text-decoration: none; transition: background-color 0.2s cubic-bezier(.22,.61,.36,1), color 0.2s cubic-bezier(.22,.61,.36,1); width: fit-content; } .brand-button-outline:is(:hover, :focus) { background-color: var(--primary); color: #ffffff; }.brand-button-primary { align-items: center; background-color: var(--primary); border-bottom-color: var(--primary); border-bottom-style: solid; border-bottom-width: 1.5px; border-left-color: var(--primary); border-left-style: solid; border-left-width: 1.5px; border-radius: 1px; border-right-color: var(--primary); border-right-style: solid; border-right-width: 1.5px; border-top-color: var(--primary); border-top-style: solid; border-top-width: 1.5px; color: #ffffff; column-gap: 0.5rem; display: inline-flex; font-family: var(--body-font, inherit); font-size: 1rem; font-weight: 700; padding-bottom: 0.85rem; padding-left: 1.7rem; padding-right: 1.7rem; padding-top: 0.85rem; text-decoration: none; transition: background-color 0.2s cubic-bezier(.22,.61,.36,1), border-color 0.2s cubic-bezier(.22,.61,.36,1); width: fit-content; } .brand-button-primary:is(:hover, :focus) { background-color: var(--contrast-3); border-bottom-color: var(--contrast-3); border-left-color: var(--contrast-3); border-right-color: var(--contrast-3); border-top-color: var(--contrast-3); }.gbp-card__text { color: var(--contrast-2); font-size: 1.05rem; line-height: 1.6; margin: 0 0 0.9rem; white-space: pre-line; }.gbp-card__title { color: var(--contrast); font-family: var(--heading-font, inherit); font-size: 1.6rem; font-weight: 500; line-height: 1.15; margin: 0 0 0.5rem; }.gbp-card__body { display: flex; flex-direction: column; flex-grow: 1; }.gbp-footer__grid { column-gap: clamp(2rem, 4vw, 3.25rem); display: grid; grid-template-columns: 1.5fr max-content max-content max-content; justify-content: space-between; row-gap: 2.5rem; } @media (max-width:860px) { .gbp-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width:560px) { .gbp-footer__grid { grid-template-columns: 1fr; } }.gbp-footer__title { color: #ffffff; font-family: var(--body-font, inherit); font-size: .78rem; font-weight: 700; letter-spacing: .14em; margin-bottom: 1rem; text-transform: uppercase; }.gbp-footer__link { color: rgba(255,255,255,0.7); font-size: 1rem; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.35); text-underline-offset: 0.22em; transition: color 0.2s ease; } .gbp-footer__link:is(:hover, :focus) { color: #ffffff; text-decoration-color: #ffffff; }.brand-letter { position: relative; }.brand-timeline__body { min-width: 0; }.brand-body-sm { color: var(--contrast-4); font-size: 1rem; line-height: 1.618; }.gbp-section__headline--center { align-items: center; text-align: center; }.brand-collegewall{display:flex;flex-direction:column;gap:6px;width:100%}.brand-collegewall:not(.is-marquee){flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 52px;padding:0 40px}.brand-collegewall__logo{display:flex;align-items:center;justify-content:center;outline-offset:6px}.brand-collegewall__logo img{height:48px;width:auto;max-width:100%;object-fit:contain;display:block;filter:grayscale(1);opacity:.8;transition:filter .35s ease,opacity .35s ease,transform .35s ease}.brand-collegewall__logo:hover img,.brand-collegewall__logo:focus-visible img{filter:none;opacity:1;transform:scale(1.14)}.brand-collegewall__logo:focus-visible{outline:2px solid var(--primary);border-radius:4px}.brand-collegewall__ribbon{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}.brand-collegewall__track{display:flex;align-items:center;width:max-content;will-change:transform;padding:8px 0}.brand-collegewall.is-marquee .brand-collegewall__logo{margin-right:72px}@media (prefers-reduced-motion:no-preference){.brand-collegewall__track{animation:brand-collegewall-drift var(--dur,70s) linear infinite}.brand-collegewall__ribbon[data-dir="rev"] .brand-collegewall__track{animation-direction:reverse}.brand-collegewall__ribbon:hover .brand-collegewall__track,.brand-collegewall__ribbon:focus-within .brand-collegewall__track{animation-play-state:paused}}@keyframes brand-collegewall-drift{to{transform:translateX(-50%)}}.brand-hero--stack:has(.brand-collegewall){height:auto;min-height:calc(100vh - var(--ths-header-h,108px))}.brand-hero--stack:has(.brand-collegewall) .brand-hero__media{flex:0 0 auto;height:40vh;min-height:260px}@media (max-width:640px){.brand-collegewall{gap:0}.brand-collegewall.is-marquee .brand-collegewall__logo{margin-right:44px}.brand-collegewall__logo img{height:32px}.brand-collegewall:not(.is-marquee){gap:16px 32px;padding:0 16px}}@media (prefers-reduced-motion:reduce){.brand-collegewall__logo:hover img{transform:none}}.brand-grid-2,.brand-grid-3,.brand-grid-4{list-style:none;margin-inline-start:0;padding-inline-start:0}.brand-grid-2 > li,.brand-grid-3 > li,.brand-grid-4 > li{list-style:none}.brand-faq-item{border-bottom:1px solid var(--base-2)}
.brand-faq-item:first-of-type{border-top:1px solid var(--base-2)}
.brand-faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1.25rem;padding:1.3rem 0.25rem;font-family:var(--heading-font,inherit);font-size:1.16rem;font-weight:500;line-height:1.3;color:var(--contrast);transition:color .2s ease}
.brand-faq-item summary::-webkit-details-marker{display:none}
.brand-faq-item summary::after{content:"";flex:0 0 auto;width:11px;height:11px;border-right:2px solid var(--primary);border-bottom:2px solid var(--primary);transform:rotate(45deg);transition:transform .25s ease;margin-right:.4rem;margin-top:-4px}
.brand-faq-item[open] summary::after{transform:rotate(-135deg);margin-top:2px}
.brand-faq-item summary:hover{color:var(--primary)}
.brand-faq-item summary:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.brand-faq-item > p,.brand-faq-item .prose{margin:0 0 1.35rem;padding-right:2.5rem;color:var(--contrast-2);line-height:1.6;max-width:70ch}.brand-hexgrid .gbp-card { align-items: center; background-color: transparent; overflow: visible; text-align: center; }
.brand-hexgrid .gbp-card__photo { aspect-ratio: 1/1; background: var(--primary); clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); margin: 0 auto 1.15rem; max-width: 210px; position: relative; width: 74%; }
.brand-hexgrid .gbp-card__photo img { inset: 0; height: 100%; max-width: none; object-fit: cover; position: absolute; transition: transform .45s ease; width: 100%; }
.brand-hexgrid .gbp-card__silhouette { align-items: center; color: var(--base-3); display: flex; inset: 0; justify-content: center; position: absolute; }
.brand-hexgrid .gbp-card__silhouette svg { height: 44%; opacity: .9; width: 44%; }
.brand-hexgrid .gbp-card:is(:hover, :focus-within) .gbp-card__photo img { transform: scale(1.05); }
.brand-hexgrid .gbp-card__title { margin-bottom: .35rem; margin-top: 0; }
.brand-hexgrid .gbp-card__text { margin-bottom: .55rem; }
.brand-hexgrid .gbp-card .gbp-section__tagline { margin-bottom: 0; }
.brand-hexgrid .gbp-card__email { align-items: center; color: var(--primary); display: flex; font-size: .9rem; font-weight: 500; gap: .4em; justify-content: center; margin-top: .35rem; max-height: 0; min-height: 44px; opacity: 0; overflow: hidden; padding: .4rem .6rem; text-decoration: none; transition: opacity .3s ease, max-height .3s ease; word-break: break-word; }
.brand-hexgrid .gbp-card:is(:hover, :focus-within) .gbp-card__email { max-height: 64px; opacity: 1; }
.brand-hexgrid .gbp-card__email:hover, .brand-hexgrid .gbp-card__email:focus-visible { text-decoration: underline; }
.brand-hexgrid .gbp-card__email:empty { display: none; }
@media (max-width:860px) { .brand-hexgrid .gbp-card__photo { max-width: 180px; width: 66%; } }
@media (max-width:560px) { .brand-hexgrid .gbp-card__photo { max-width: 200px; width: 52%; } }.brand-hero__bg h1 em,.brand-hero em{color:var(--accent);font-style:italic}
.brand-values__lead{font-family:var(--heading-font,"Fraunces",serif);font-style:italic;font-size:1.25rem;line-height:1.5;color:var(--contrast-2);max-width:60ch;margin:.85rem 0 0;text-align:left}
.brand-values__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,3.25rem);margin-top:clamp(2.5rem,5vw,3.5rem)}
.brand-value{border-top:2px solid var(--primary);padding-top:1.4rem}
.brand-value h3{font-family:var(--heading-font,"Fraunces",serif);font-weight:500;font-size:1.6rem;line-height:1.1;margin:0 0 .55rem}
.brand-value p{color:var(--contrast-2);margin:0}
.brand-band{overflow-x:clip;display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.brand-band__text{display:flex;flex-direction:column;justify-content:center;padding:clamp(3rem,6vw,5rem) 7% clamp(3rem,6vw,5rem) max(2rem,6vw)}
.brand-band--rev .brand-band__text{padding:clamp(3rem,6vw,5rem) max(2rem,6vw) clamp(3rem,6vw,5rem) 7%;order:2}
.brand-band__photo{position:relative;min-height:clamp(340px,38vw,480px)}
.brand-band__photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.brand-band__eyebrow{display:block;font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);margin-bottom:.6rem}
.brand-band h3{font-family:var(--heading-font,"Fraunces",serif);font-weight:500;font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.08;margin:0}
.brand-band__text p{color:var(--contrast-2);margin:.9rem 0 1.4rem;max-width:46ch}
.brand-band__link{font-weight:600;color:var(--primary);border-bottom:2px solid var(--accent);padding-bottom:3px;text-decoration:none;align-self:flex-start}
/* Square (non-hex) feature bands get a solid brand-yellow (--accent) panel; the
   photo half is full-bleed so yellow fills the text side. Text/link darkened to
   hold WCAG AA on #f6be00 — the muted --contrast-2 body (3.3:1) and crimson
   --primary eyebrow/link (4.4:1) both fail on yellow, so use --contrast / --contrast-3.
   The --accent link underline would also vanish on yellow → recolor it. */
.brand-band:not(.brand-band--hex){background:var(--accent)}
.brand-band:not(.brand-band--hex) .brand-band__eyebrow{color:var(--contrast-3)}
.brand-band:not(.brand-band--hex) h3{color:var(--contrast)}
.brand-band:not(.brand-band--hex) .brand-band__text p{color:var(--contrast)}
.brand-band:not(.brand-band--hex) .brand-band__link{color:var(--contrast-3);border-bottom-color:var(--contrast-3)}
.brand-stat-strip{background:var(--primary)}
.brand-stat-strip__row{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.brand-stat-strip__row>*{padding:clamp(2.2rem,4vw,3.2rem) 1rem}
.brand-stat-strip__row>*+*{border-left:1px solid rgba(255,255,255,.22)}
.brand-stat-strip__k{font-family:var(--heading-font,"Fraunces",serif);font-weight:500;font-size:clamp(2rem,3vw,2.9rem);line-height:1;color:#fff;display:block}
.brand-stat-strip__l{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-top:.5rem;display:block}
.brand-cta--photo{position:relative;overflow:hidden}
.brand-cta__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.brand-cta--photo::after{content:"";position:absolute;inset:0;background:rgba(20,17,15,.68);z-index:1}
.brand-cta--photo>.gbp-section__inner{position:relative;z-index:2}
.brand-video-hero{position:relative;overflow:hidden;padding:0;min-height:clamp(560px,80vh,760px);background-color:var(--contrast);background-size:cover;background-position:center}
.brand-video-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.brand-video-hero__inner{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;min-height:inherit;padding-top:clamp(4rem,10vh,7rem);padding-bottom:clamp(2.5rem,6vh,4.5rem)}
.brand-video-hero .gbp-section__tagline{color:var(--base-3);margin-bottom:.6rem;text-shadow:0 1px 4px rgba(20,17,15,.6)}
.brand-video-hero h1{color:var(--base-3);max-width:20ch;margin:0;text-shadow:0 2px 12px rgba(20,17,15,.6)}
.brand-video-hero h1 em{color:var(--accent);font-style:italic}
.gbp-section--primary .brand-body-lg{color:var(--base-3);font-size:clamp(1.3rem,2.1vw,1.65rem);line-height:1.5;max-width:var(--measure,64ch)}
.brand-video-hero .brand-video-hero__inner{max-width:calc(var(--gb-container-width,1200px) + (2 * clamp(1.25rem,4vw,2.5rem)));margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
@media(prefers-reduced-motion:reduce){.brand-video-hero video{display:none}}
/* Hero (stacked): full-bleed photo on top keeps its banner height, a crimson
   content panel sits directly below, and the two together fill the viewport.
   For pages where the hero copy reads better on a solid band than over the photo. */
/* --ths-header-h = the static site header's height, so the composed hero (photo +
   crimson panel + CTAs) fills the viewport BELOW the header rather than running past
   the fold. Tune the var if the header height changes. */
.brand-hero--stack{--ths-header-h:108px;display:flex;flex-direction:column;height:calc(100vh - var(--ths-header-h));overflow:hidden;background:var(--primary)}
.brand-hero__media{flex:1 1 0;min-height:0;overflow:hidden}
.brand-hero__media img,.brand-hero--stack>img{width:100%;height:100%;object-fit:cover;display:block}
.brand-hero__panel{flex:0 0 auto;background:var(--primary);color:var(--base-3);padding-block:clamp(1.6rem,3.2vw,2.6rem)}
.brand-hero__panel-inner{max-width:calc(var(--gb-container-width,1200px) + (2 * clamp(1.25rem,4vw,2.5rem)));margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem);display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
.brand-hero__panel .gbp-section__tagline{color:var(--accent)}
.brand-hero__panel h1{color:var(--base-3);margin:0;max-width:22ch;font-size:clamp(2.2rem,3.6vw,3.1rem);line-height:1.08}
.brand-hero__panel h1 em{color:var(--accent);font-style:italic}
.brand-hero__panel .brand-body-lg{color:var(--base-3);max-width:62ch;margin:0}
.brand-hero__panel .brand-hero__actions{margin-top:.5rem}
@media(max-width:860px){.brand-hero--stack{height:auto}.brand-hero__media{flex:0 0 auto;height:46vh}.brand-hero__panel{padding-block:clamp(1.5rem,5vw,2.25rem)}}
/* Caption variant (lower-school): move the eyebrow tagline onto the bottom of the
   photo (frees panel height for more image) at ~2x size, over a soft bottom scrim.
   Aligned to the same container gutter as the panel headline below it. */
.brand-hero--caption .brand-hero__media{position:relative}
.brand-hero--caption .brand-hero__media::after{content:"";position:absolute;inset-inline:0;bottom:0;height:42%;background:linear-gradient(to top,rgba(20,17,15,.6),transparent);pointer-events:none;z-index:1}
.brand-hero--caption .brand-hero__caption{position:absolute;inset-inline:0;bottom:0;z-index:2;max-width:calc(var(--gb-container-width,1200px) + (2 * clamp(1.25rem,4vw,2.5rem)));margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem);padding-bottom:clamp(.9rem,2vw,1.5rem)}
.brand-hero--caption .brand-hero__caption .gbp-section__tagline{display:block;color:var(--accent);font-size:2rem;line-height:1.1;text-shadow:0 1px 2px rgba(20,17,15,.85),0 2px 6px rgba(20,17,15,.7),0 4px 18px rgba(20,17,15,.6)}
@media(max-width:860px){.brand-hero--caption .brand-hero__caption .gbp-section__tagline{font-size:1.4rem}}
/* Gold-panel variant (middle-school): swaps crimsongold vs the lower-school hero.
   Panel becomes gold, the on-image caption + heading accent become crimson, and the
   non-colored panel text (h1 + lead) is near-black instead of white for legibility
   on the light panel. Pair with light-bg button variants (brand-button-primary/outline). */
.brand-hero--gold,.brand-hero--gold .brand-hero__panel{background:var(--accent)}
.brand-hero--gold .brand-hero__panel{color:var(--contrast)}
.brand-hero--gold .brand-hero__panel h1{color:var(--contrast)}
.brand-hero--gold .brand-hero__panel h1 em{color:var(--primary)}
.brand-hero--gold .brand-hero__panel .brand-body-lg{color:var(--contrast)}
/* The on-image caption keeps the base gold-on-dark-scrim treatment (legible over the
   photo); only the panel swaps to gold. */
/* Page-width variant (upper-school trial): ease the panel + caption off the extra hero
   inset (6vw) to the standard 2rem page gutter, and let the heading + lead span the
   standard 1200px container instead of the narrow hero measure — so the hero text lines
   up with, and is as wide as, the sections below it. */
.brand-hero--pagewidth .brand-hero__panel-inner,.brand-hero--pagewidth .brand-hero__caption{padding-inline:2rem}
.brand-hero--pagewidth .brand-hero__panel h1{max-width:none}
.brand-hero--pagewidth .brand-hero__panel .brand-body-lg{max-width:none}
/* Lighter variant: ease only the h1 wide enough to stay on one line on desktop,
   leaving the lead at its readable measure and the standard hero inset. */
.brand-hero--wide-h1 .brand-hero__panel h1{max-width:none}
/* Head's letter: portrait + name aside (sticky) beside the letter body + signature. */
.brand-letter__grid{display:grid;grid-template-columns:minmax(220px,290px) 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.brand-letter__aside{display:flex;flex-direction:column;gap:.5rem}
.brand-letter__portrait{width:100%;aspect-ratio:53/80;object-fit:cover;object-position:center top;border-radius:4px;box-shadow:0 14px 34px rgba(20,17,15,.18)}
.brand-letter__name{font-family:var(--heading-font,"Fraunces",serif);font-weight:600;font-size:1.4rem;line-height:1.12;color:var(--primary);margin-top:.5rem}
.brand-letter__title{font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;color:var(--contrast-4);font-weight:700}
.brand-letter__body{max-width:64ch}
.brand-letter__body p{color:var(--contrast-2);margin:0 0 1.25rem;line-height:1.75}
.brand-letter__body .brand-letter__lead{font-size:1.22rem;color:var(--contrast-2);line-height:1.6}
.brand-letter__body .brand-letter__signoff{margin-top:2rem;margin-bottom:.15rem}
.brand-letter__sign-name{display:block;font-family:var(--heading-font,"Fraunces",serif);font-style:italic;font-weight:500;font-size:1.6rem;line-height:1.15;color:var(--primary)}
.brand-letter__sign-title{display:block;margin-top:.25rem;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--contrast-4);font-weight:700}
@media(max-width:768px){.brand-letter__grid{grid-template-columns:1fr;gap:1.5rem}.brand-letter__aside{position:static;max-width:220px}}
/* Buttons are  tags, so GP's site-wide link :hover (link_color_hover = dark red,
   underline_links = hover) leaks onto them — the button Global Styles only change
   opacity/bg on hover, never color/text-decoration. Re-assert both on hover+focus for
   every variant so buttons never pick up the red link-hover text or underline. */
.brand-button-primary:hover,.brand-button-primary:focus,.brand-button-primary--reverse:hover,.brand-button-primary--reverse:focus,.brand-button-outline:hover,.brand-button-outline:focus,.brand-button-outline--reverse:hover,.brand-button-outline--reverse:focus{text-decoration:none}
.brand-button-primary:hover,.brand-button-primary:focus{color:#fff}
.brand-button-primary--reverse:hover,.brand-button-primary--reverse:focus{color:var(--contrast)}
.brand-button-outline:hover,.brand-button-outline:focus{color:#fff}
.brand-button-outline--reverse:hover,.brand-button-outline--reverse:focus{color:var(--contrast)}
/* Hexagonal band photos — GB global classes (apply .brand-band--hex + an accent
   via block globalClasses; no page scoping). Regular flat-top hexagon (2:sqrt3);
   corners reveal the section bg. Constrained to the site 1200px measure.
   Accents: .brand-hex--gold / --crimson (colored frame + heavy drop-shadow for a
   3D lift-off-the-page effect). The old no-frame --shadow (float) variant is retired.
   TUNING KNOBS (custom properties on .brand-band--hex — override in the Global
   Styles bundle, a section wrapper, or per-instance to retune without touching rules):
     --hex-photo-w      hexagon size (photo width). default min(84%,470px)
     --hex-frame        colored border thickness — a CONSTANT px, so the surround
                        is the same weight at every breakpoint (not a % of the
                        photo). default 11px
     --hex-shadow-rgb   shadow color as an R,G,B triplet. default 20,17,15
     --hex-shadow-x/y   shadow offset — bigger = more lift toward bottom-right
     --hex-shadow-blur  shadow softness. default 34px
     --hex-shadow-alpha primary-layer opacity (0-1). default .5
   The 3D lift is a two-layer drop-shadow; the tight second layer is derived from
   these knobs (≈40% offset, ≈68% alpha), so tuning the primary retunes both.
   NOTE: the photo cell has no padding on purpose — the frame ::before is absolutely
   positioned, so its width must resolve against the same box as the in-flow 
   (padding would inflate the ::before's %-basis and make the surround grow). */
.brand-band--hex{--hex-photo-w:min(84%,470px);--hex-frame:11px;--hex-shadow-rgb:20,17,15;--hex-shadow-x:15px;--hex-shadow-y:20px;--hex-shadow-blur:26px;--hex-shadow-alpha:.5;align-items:center;max-width:calc(var(--gb-container-width,1200px) + (2 * clamp(1.25rem,4vw,2.5rem)));margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem);margin-block:clamp(2.5rem,5vw,4rem)}
/* White space wraps a RUN of hex bands, not each one: above the first and below
   the last, none between adjacent hex bands (a stack reads as one unit); a lone
   hex band gets both. Space every hex band, then zero the shared interior edges —
   the follower's top and the leader's bottom — so only run boundaries keep space. */
.brand-band--hex + .brand-band--hex{margin-top:0}
.brand-band--hex:has(+ .brand-band--hex){margin-bottom:0}
.brand-band--hex .brand-band__text{padding-block:clamp(2rem,4vw,3rem);padding-inline:0 clamp(1rem,3vw,2.5rem)}
.brand-band--hex.brand-band--rev .brand-band__text{padding-inline:clamp(1rem,3vw,2.5rem) 0}
.brand-band--hex .brand-band__photo{min-height:clamp(360px,40vw,520px);background:transparent;display:flex;align-items:center;justify-content:center;filter:drop-shadow(var(--hex-shadow-x) var(--hex-shadow-y) var(--hex-shadow-blur) rgba(var(--hex-shadow-rgb),var(--hex-shadow-alpha))) drop-shadow(calc(var(--hex-shadow-x)*.4) calc(var(--hex-shadow-y)*.43) calc(var(--hex-shadow-blur)*.47) rgba(var(--hex-shadow-rgb),calc(var(--hex-shadow-alpha)*.68)))}
.brand-band--hex .brand-band__photo>img{position:relative;z-index:1;inset:auto;height:auto;width:var(--hex-photo-w);aspect-ratio:1.1547/1;object-fit:cover;clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)}
/* A + B: crisp hexagonal frame — a constant-thickness ring; ::before matches the
   photo width plus a fixed px on every side, so it never rescales with the image. */
.brand-hex--gold .brand-band__photo::before,.brand-hex--crimson .brand-band__photo::before{content:"";position:absolute;left:50%;top:50%;width:calc(var(--hex-photo-w) + var(--hex-frame)*2);aspect-ratio:1.1547/1;clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);transform:translate(-50%,-50%);z-index:0}
.brand-hex--gold .brand-band__photo::before{background:var(--accent)}
.brand-hex--crimson .brand-band__photo::before{background:var(--primary)}
@media(max-width:860px){.brand-values__grid{grid-template-columns:1fr}.brand-band{grid-template-columns:1fr}.brand-band__text,.brand-band--rev .brand-band__text{padding:2.5rem 1.5rem;order:0}.brand-band__photo{min-height:320px;order:-1}.brand-stat-strip__row{grid-template-columns:1fr 1fr}.brand-stat-strip__row>*+*{border-left:none}.brand-stat-strip__row>*:nth-child(3),.brand-stat-strip__row>*:nth-child(4){border-top:1px solid rgba(255,255,255,.22)}}

/* Card interior padding (gbp-card ships bg+flex but no padding). */
.gbp-card__body{padding:clamp(1.5rem,2.4vw,1.9rem)}
/* Upper School department directory — staggered hexagon cards. */
.brand-dept-hex{display:grid;grid-template-columns:repeat(3,1fr);column-gap:0;row-gap:.5rem;align-items:start;padding-bottom:12rem}
.brand-dept-hex .gbp-card{clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);aspect-ratio:1.1547/1;border:0;border-radius:0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--base-3);filter:drop-shadow(0 9px 20px rgba(28,26,25,.12));margin-inline:-9%;transition:transform .35s ease}
.brand-dept-hex .gbp-card__body{padding:1rem clamp(1.5rem,4%,2.6rem);text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}
.brand-dept-hex .gbp-card__title{font-family:var(--heading-font,"Fraunces",serif);font-size:clamp(1.26rem,1.44vw,1.56rem);line-height:1.12;margin:0 0 .4rem;color:var(--primary)}
.brand-dept-hex .gbp-card__text{font-size:1rem;line-height:1.4;margin:0;max-width:24ch;color:var(--contrast-2)}
/* honeycomb: center column drops 50% of the hex height so it interlocks */
.brand-dept-hex .gbp-card:nth-child(3n+2){transform:translateY(50%)}
.brand-dept-hex .gbp-card:hover{transform:translateY(-6px)}
.brand-dept-hex .gbp-card:nth-child(3n+2):hover{transform:translateY(calc(50% - 6px))}
.brand-dept-hex .gbp-card:nth-child(2n) .gbp-card__title{color:var(--accent-dark,var(--primary))}
/* 11 cards: the trailing item would otherwise land offset in col 2 and dangle
   below its row — pin it to col 3 so it sits level with the last col-1 hex. */
.brand-dept-hex .gbp-card:last-child{grid-column:3;transform:none}
.brand-dept-hex .gbp-card:last-child:hover{transform:translateY(-6px)}
/* Honeycomb is a desktop delight; on a narrow phone the hex clip + offset waste
   space and read as random — fall back to a clean 2-col grid of rounded cards.
   The :nth-child/:last-child offset rules are (0,3,0); the resets here must match
   that specificity to win, hence the repeated selectors. */
@media(max-width:720px){.brand-dept-hex{grid-template-columns:repeat(2,1fr);gap:1rem;padding-bottom:0}.brand-dept-hex .gbp-card{clip-path:none;aspect-ratio:auto;margin-inline:0;border-radius:14px;filter:drop-shadow(0 6px 14px rgba(28,26,25,.10))}.brand-dept-hex .gbp-card:nth-child(3n+2),.brand-dept-hex .gbp-card:last-child{transform:none;grid-column:auto}.brand-dept-hex .gbp-card:hover,.brand-dept-hex .gbp-card:nth-child(3n+2):hover,.brand-dept-hex .gbp-card:last-child:hover{transform:translateY(-4px)}.brand-dept-hex .gbp-card__body{padding:1.4rem 1.6rem;max-width:none}}

/* Numbered progression timeline — for sequential, long-copy sections (e.g. grade-
   by-grade) that would over-crowd a hexagon. Big crimson index numerals + a hairline
   rule between rows read as a year-by-year sequence, deliberately distinct from the
   card grids. Item = [num | body]; body groups eyebrow + title + description. */
.brand-timeline{max-width:860px;margin-inline:auto;margin-top:clamp(1.5rem,4vw,2.5rem)}
.brand-timeline__item{display:grid;grid-template-columns:clamp(2.6rem,6vw,4rem) 1fr;column-gap:clamp(1.1rem,2.6vw,2rem);align-items:start;padding-block:clamp(1.6rem,3vw,2.4rem)}
.brand-timeline__item + .brand-timeline__item{border-top:1px solid var(--base-2)}
.brand-timeline__num{font-family:var(--heading-font,"Fraunces",serif);font-weight:500;font-size:clamp(1.9rem,4vw,3rem);line-height:.85;color:var(--primary);font-variant-numeric:tabular-nums}
.brand-timeline__eyebrow{display:flex;align-items:center;gap:.55rem;font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);margin:.3rem 0 .5rem}
.brand-timeline__eyebrow::before{content:"";width:1.5rem;height:2px;background:var(--primary);flex:none}
.brand-timeline__title{font-family:var(--heading-font,"Fraunces",serif);font-weight:500;font-size:clamp(1.3rem,2.3vw,1.8rem);line-height:1.12;margin:0 0 .5rem;color:var(--contrast)}
.brand-timeline__text{color:var(--contrast-2);margin:0;max-width:60ch;line-height:1.6}
@media(max-width:560px){.brand-timeline__item{grid-template-columns:1fr;row-gap:.2rem}.brand-timeline__num{font-size:2.1rem}}
.looks-h3 { font-family: var(--heading-font, inherit); font-size: 1.6rem; font-weight: 500; line-height: 1.15; margin: 0; }.looks-h2 { font-family: var(--heading-font, inherit); font-size: clamp(2rem,3.6vw,3rem); font-weight: 500; letter-spacing: -.01em; line-height: 1.08; margin: 0; }.looks-h1 { font-family: var(--heading-font, inherit); font-size: clamp(3rem,7vw,6rem); font-weight: 400; letter-spacing: -.015em; line-height: 1.05; margin: 0; }.brand-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(.22,.61,.36,1), transform 0.7s cubic-bezier(.22,.61,.36,1); } .brand-reveal.is-in { opacity: 1; transform: none; }.brand-bottom-bar { align-items: center; border-top-color: rgba(255,255,255,0.14); border-top-style: solid; border-top-width: 1px; column-gap: 0.75rem; display: flex; flex-wrap: wrap; font-size: .82rem; justify-content: space-between; letter-spacing: .02em; margin-top: 2.5rem; padding-top: 1.4rem; row-gap: 0.75rem; }.gbp-card__media { aspect-ratio: 4/3; margin-bottom: 1.1rem; overflow: hidden; position: relative; } .gbp-card__media img { height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.22,.61,.36,1); width: 100%; }.gbp-card { background-color: var(--base-3); display: flex; flex-direction: column; overflow: hidden; } .gbp-card > img { max-width: none; } .gbp-card:is(:hover, :focus-within) .gbp-card__media img { transform: scale(1.04); }.brand-grid-2 { column-gap: clamp(1.75rem,3vw,3.25rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: clamp(1.75rem,3vw,3.25rem); } @media (max-width:860px) { .brand-grid-2 { grid-template-columns: minmax(0, 1fr); } }.brand-body-lg { color: var(--contrast-2); font-size: clamp(1.15rem,1.5vw,1.3rem); font-weight: 400; line-height: 1.55; margin: 0; }.brand-prose { max-width: 64ch; }.brand-ruled__idx { color: var(--contrast-2); font-family: var(--body-font, inherit); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; } .brand-ruled__idx b { color: var(--accent); }.brand-ruled { align-items: flex-end; border-bottom-color: var(--base-2); border-bottom-style: solid; border-bottom-width: 1px; column-gap: 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 2.4rem; padding-bottom: 1.4rem; row-gap: 1rem; }.gbp-section__tagline { color: var(--primary); display: block; font-family: var(--body-font, inherit); font-size: 0.78rem; font-weight: 600; letter-spacing: .22em; line-height: 1.3; margin-bottom: 1rem; text-transform: uppercase; } .gbp-section__tagline:is(.gbp-section--dark *, .gbp-section--primary *) { color: var(--accent); }.gbp-section__headline { column-gap: 1rem; display: flex; flex-direction: column; margin-bottom: 2.4rem; row-gap: 1rem; }.gbp-section__inner { margin-left: auto; margin-right: auto; max-width: 1200px; position: relative; width: 100%; z-index: 1; }.gbp-section--rhythm-4 { background-color: var(--base); }.gbp-section--rhythm-3 { background-color: var(--base-3); }.gbp-section--rhythm-2 { background-color: var(--base); }.gbp-section--rhythm-1 { background-color: var(--base-3); }.gbp-section--primary { background-color: var(--primary); color: #ffffff; } .gbp-section--primary :is(h1,h2,h3,h4) { color: #ffffff; } .gbp-section--primary .gbp-section__tagline { color: var(--accent); }.gbp-section--dark { background-color: var(--contrast); color: #ffffff; }.gbp-section--alt { background-color: var(--base); }.brand-grid-3 { column-gap: clamp(1.75rem,3vw,3.25rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(1.75rem,3vw,3.25rem); } @media (max-width:860px) { .brand-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:560px) { .brand-grid-3 { grid-template-columns: minmax(0, 1fr); } }.brand-grid-4 { column-gap: clamp(1.75rem,3vw,3.25rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: clamp(1.75rem,3vw,3.25rem); } @media (max-width:900px) { .brand-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:560px) { .brand-grid-4 { grid-template-columns: minmax(0, 1fr); } }.brand-num-badge { align-items: center; background-color: var(--primary); border-radius: 100px; color: #ffffff; display: flex; height: 48px; justify-content: center; width: 48px; }.brand-hero__content { position: relative; text-shadow: 0 1px 3px rgba(20,17,15,.45); z-index: 2; }.brand-hero__bg { align-items: flex-end; background-position: center; background-size: cover; display: flex; min-height: clamp(420px, 52vh, 560px); overflow: hidden; padding-bottom: clamp(2rem, 5vw, 3.5rem); padding-top: clamp(2rem, 6vw, 4rem); position: relative; } .brand-hero__bg::after { background: linear-gradient(180deg, rgba(20,17,15,.55) 0%, rgba(20,17,15,.30) 42%, rgba(20,17,15,.78) 100%), linear-gradient(0deg, rgba(20,17,15,.28), rgba(20,17,15,.28)); content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 1; }.brand-hero--full { align-items: flex-end; color: #ffffff; display: flex; min-height: clamp(360px, 44vh, 460px); overflow: hidden; position: relative; } .brand-hero--full .brand-hero__media { inset: 0; position: absolute; } .brand-hero--full .brand-hero__media img { height: 100%; object-fit: cover; width: 100%; } .brand-hero--full .brand-hero__media::after { background: linear-gradient(180deg, rgba(20,17,15,.15), rgba(20,17,15,.72)); content: ""; inset: 0; position: absolute; }.brand-hero__photo { aspect-ratio: 16/9; overflow: hidden; position: relative; } .brand-hero__photo img { height: 100%; object-fit: cover; width: 100%; } .brand-hero__photo::after { background-color: var(--primary); bottom: 0; content: ""; height: 5px; left: 0; position: absolute; width: 56px; }.brand-hero__actions { align-items: center; column-gap: 1rem; display: flex; flex-wrap: wrap; margin-top: 0.6rem; row-gap: 1rem; } @media (max-width:560px) { .brand-hero__actions { align-items: stretch; flex-direction: column; } }.brand-hero__meta { color: var(--contrast-2); font-family: var(--body-font, inherit); font-size: .9rem; font-weight: 700; letter-spacing: .06em; line-height: 1.6; margin: 0.4rem 0 0; }.brand-hero-content { column-gap: 1.2rem; display: flex; flex-direction: column; row-gap: 1.2rem; }.brand-hero__grid { align-items: center; column-gap: clamp(2rem, 5vw, 4.5rem); display: grid; grid-template-columns: 1fr 1.05fr; row-gap: clamp(2rem, 5vw, 4.5rem); } @media (max-width:860px) { .brand-hero__grid { grid-template-columns: 1fr; } }.brand-hero { background-color: var(--base); }.brand-duotone { overflow: hidden; position: relative; }.brand-ar-16x9 { aspect-ratio: 16/9; }.brand-ar-5x6 { aspect-ratio: 5/6; }.brand-ar-4x3 { aspect-ratio: 4/3; }.brand-ar-1x1 { aspect-ratio: 1/1; }.brand-cover { display: block; height: 100%; object-fit: cover; width: 100%; }.gbp-section { box-sizing: border-box; overflow: hidden; padding-bottom: clamp(5rem,9vw,8rem); padding-left: clamp(1.25rem, 4vw, 2.5rem); padding-right: clamp(1.25rem, 4vw, 2.5rem); padding-top: clamp(5rem,9vw,8rem); position: relative; width: 100%; }
/* Same-background adjacency: halve each shared edge so plain-on-plain boundaries total ~128px instead of 192-256px (extends the hex+hex band solve). */
.brand-band--hex + .gbp-section:not(.gbp-section--dark):not(.gbp-section--accent):not([class*="--rhythm"]) { padding-top: clamp(2.5rem,4.5vw,4rem); }
.gbp-section:not(.gbp-section--dark):not(.gbp-section--accent):not([class*="--rhythm"]):has(+ .brand-band--hex) { padding-bottom: clamp(2.5rem,4.5vw,4rem); }
.gbp-section:not(.gbp-section--dark):not(.gbp-section--accent):not([class*="--rhythm"]) + .gbp-section:not(.gbp-section--dark):not(.gbp-section--accent):not([class*="--rhythm"]) { padding-top: clamp(2.5rem,4.5vw,4rem); }
.gbp-section:not(.gbp-section--dark):not(.gbp-section--accent):not([class*="--rhythm"]):has(+ .gbp-section:not(.gbp-section--dark):not(.gbp-section--accent):not([class*="--rhythm"])) { padding-bottom: clamp(2.5rem,4.5vw,4rem); }