/* ============================================================================
GSI SPINE — shared design-system CSS
Ported from the approved mockup: docs/superpowers/mockups/home.html
(restrained gallery hover ported from docs/superpowers/mockups/case-study.html)
Loaded ONLY on spine templates (front page, gsi_project single/archive,
Gallery page) via inc/gsi-spine-enqueue.php — never globally.
Every template built on this foundation wraps its content in
`…
` (Divi header/footer sit outside it), so
every section rule below is scoped under `.gsi-spine` to guarantee nothing
leaks onto Divi-built pages. The handful of atoms reused verbatim across
many templates (buttons, overline labels, the progress bar, the grain
overlay) are additionally given a hard `gsi-` prefix.
Design tokens (--gsi-teal, --gsi-dark, --gsi-deep, --gsi-light, --gsi-card,
--gsi-ease) are defined once in style.css's :root and referenced here, not
redefined. Two mockup tokens have no equivalent in style.css because the
values genuinely differ (see style.css :root vs. mockup :root):
--deep (#0A151D) vs. --gsi-deep (#0D1B24)
--dark (#16242E) vs. --gsi-dark (#1C2B35)
--paper (#F4F6F7) vs. --gsi-light (#F4F7FA)
--paper-2 (#E9EDEF), --ink (#132029), --ink-soft (#4a5b66) — no token at all
Per task brief, these are kept as literal hex rather than mapped onto a
token with a different value or invented as new tokens.
============================================================================ */
/* ----------------------------------------------------------------------------
BASE — scoped reset + typography for the spine content area only
(mockup's global *{}/html{}/body{} rules, scoped so Divi chrome outside
.gsi-spine — header, footer, admin bar — is never touched)
---------------------------------------------------------------------------- */
.gsi-spine,
.gsi-spine * { margin: 0; padding: 0; box-sizing: border-box; }
.gsi-spine {
font-family: 'Inter', system-ui, sans-serif;
color: #fff;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/* Divi's global stylesheet sets h1..h6{color:#333} directly, which overrides
inherited white. Force spine headings white by default; light-section and
accent rules (higher specificity) override where they need dark/teal text. */
.gsi-spine h1, .gsi-spine h2, .gsi-spine h3, .gsi-spine h4, .gsi-spine h5, .gsi-spine h6 { color: #fff; }
.gsi-spine p { color: inherit; }
/* Homepage CTA — darker dark->teal overlay so headline/body/button stay legible
over bright hero imagery (loads after style.css, so this wins over the shared
.gsi-archive-cta::before). Keeps the signature dark-to-teal character. */
/* .gsi-archive-cta was built outside .gsi-spine; the spine's `* {margin:0;padding:0}`
reset strips its padding + centering margins, collapsing it to a cramped left-aligned
band. Restore the old treatment's spacing with ID-specificity rules (beat the reset). */
#cta.gsi-archive-cta {
background-attachment: scroll; background-position: center; background-size: cover;
padding: 9vh 5%;
min-height: 100vh;
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
/* Lighter, less-teal scrim: let more of the building photo show through, and
pull the teal way back (a hint at the base, not a wash). */
#cta.gsi-archive-cta::before {
background: linear-gradient(to bottom, rgba(8,16,24,.68) 0%, rgba(9,18,26,.38) 46%, rgba(13,40,48,.52) 100%);
}
#cta .gsi-archive-cta-inner { max-width: 820px; margin-left: auto; margin-right: auto; }
/* Text sits directly on the (now lighter) photo — a soft shadow keeps it
legible over bright areas without darkening the whole image again. */
/* White (not teal) on the photo — the teal eyebrow washed out over bright sky. */
#cta .gsi-cta-label { margin-bottom: 20px; color: rgba(255,255,255,.92); text-shadow: 0 1px 14px rgba(6,14,20,.9), 0 0 3px rgba(6,14,20,.6); }
#cta .gsi-cta-heading { margin-bottom: 28px; text-shadow: 0 2px 30px rgba(6,14,20,.55); }
#cta .gsi-cta-body { max-width: 580px; margin: 0 auto 44px; color: rgba(255,255,255,.88); text-shadow: 0 1px 18px rgba(6,14,20,.7); }
#cta .gsi-cta-btn { padding: 16px 44px; border: 1px solid rgba(255,255,255,.75); color: #fff; display: inline-block; }
#cta .gsi-cta-btn:hover { background: rgba(255,255,255,.12); border-color: #fff; }
@media (max-width: 767px) { #cta.gsi-archive-cta { padding: 80px 6%; } }
.gsi-spine img { display: block; max-width: 100%; }
.gsi-spine ::selection { background: var(--gsi-teal); color: #fff; }
.gsi-spine a { color: inherit; }
/* ----------------------------------------------------------------------------
PROGRESS BAR + GRAIN OVERLAY
(mockup #prog / .grain — kept, renamed to hard gsi- prefix per brief)
---------------------------------------------------------------------------- */
.gsi-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--gsi-teal); z-index: 200; }
.gsi-grain {
position: fixed; inset: 0; z-index: 150; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ----------------------------------------------------------------------------
REVEAL UTILITY — shared by every spine template's motion engine
Kept unscoped/unprefixed as directed (already a safe, generic attribute
selector; gsi-motion.js queries these globally on spine pages only).
---------------------------------------------------------------------------- */
[data-reveal] { transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
html.gsi-js [data-reveal] { opacity: 0; transform: translateY(34px); }
html.gsi-js [data-reveal].in { opacity: 1; transform: none; }
.d1 { transition-delay: .1s; }
.d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; }
.d4 { transition-delay: .4s; }
/* ----------------------------------------------------------------------------
SHARED ATOMS — reused across every spine template
---------------------------------------------------------------------------- */
.gsi-lab { font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gsi-teal); }
.gsi-btn {
font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; padding: 16px 34px;
text-decoration: none; border: 1px solid rgba(255, 255, 255, .55); color: #fff; display: inline-block;
transition: background .4s cubic-bezier(0.16, 1, 0.3, 1), border-color .4s cubic-bezier(0.16, 1, 0.3, 1), color .4s cubic-bezier(0.16, 1, 0.3, 1);
}
.gsi-btn:hover { background: #fff; color: #132029; border-color: #fff; }
.gsi-btn.solid { background: var(--gsi-teal); border-color: var(--gsi-teal); }
.gsi-btn.solid:hover { background: #fff; color: var(--gsi-teal); }
/* ----------------------------------------------------------------------------
HERO
---------------------------------------------------------------------------- */
.gsi-spine .hero { position: relative; height: 100vh; min-height: 640px; overflow: hidden; display: flex; align-items: flex-end; }
.gsi-spine .hero-media { position: absolute; inset: -10% 0; height: 120%; will-change: transform; z-index: 0; }
.gsi-spine .hero-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); }
.gsi-spine .hero-scrim {
position: absolute; inset: 0;
/* Lightened so the glass reads more vibrant; bottom-left stays dark enough
for the headline + CTAs to remain legible. */
background:
linear-gradient(180deg, rgba(8, 16, 24, .42) 0%, rgba(8, 16, 24, .05) 24%, rgba(8, 16, 24, .20) 58%, rgba(8, 16, 24, .88) 100%),
linear-gradient(90deg, rgba(8, 16, 24, .78) 0%, rgba(8, 16, 24, .28) 44%, transparent 80%);
}
.gsi-spine .hero-inner { position: relative; z-index: 2; width: 100%; padding: 0 44px 8vh; max-width: 1400px; }
.gsi-spine .eyebrow {
font-size: 12px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: rgba(255, 255, 255, .82);
display: flex; align-items: center; gap: 16px; margin-bottom: 26px;
}
.gsi-spine .eyebrow::before { content: ''; width: 44px; height: 1px; background: var(--gsi-teal); }
.gsi-spine h1.hero-title {
font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-style: italic;
font-size: clamp(48px, 8.4vw, 132px); line-height: .96; letter-spacing: -.01em;
color: #fff; text-shadow: 0 2px 44px rgba(0, 0, 0, .4);
}
.gsi-spine .hero-sub, .gsi-spine .eyebrow { text-shadow: 0 1px 24px rgba(0, 0, 0, .45); }
.gsi-spine .line { display: block; overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
.gsi-spine .line > span { display: block; transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1); }
html.gsi-js .gsi-spine .line > span { transform: translateY(122%); }
html.gsi-js .gsi-spine .revealed .line > span { transform: translateY(0); }
.gsi-spine .hero-sub {
margin-top: 30px; max-width: 440px; font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, .72);
transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) .5s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) .5s;
}
html.gsi-js .gsi-spine .hero-sub { opacity: 0; transform: translateY(20px); }
html.gsi-js .gsi-spine .revealed .hero-sub { opacity: 1; transform: none; }
.gsi-spine .hero-award {
margin-top: 26px; display: flex; align-items: center; gap: 14px;
font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
color: rgba(255, 255, 255, .78); text-shadow: 0 1px 24px rgba(0, 0, 0, .45);
transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) .6s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) .6s;
}
.gsi-spine .hero-award::before, .gsi-spine .hero-award::after { content: ''; width: 22px; height: 1px; background: var(--gsi-teal); flex: none; }
html.gsi-js .gsi-spine .hero-award { opacity: 0; transform: translateY(20px); }
html.gsi-js .gsi-spine .revealed .hero-award { opacity: 1; transform: none; }
@media (max-width: 760px) { .gsi-spine .hero-award { font-size: 9px; letter-spacing: .22em; gap: 10px; } }
.gsi-spine .hero-ctas {
margin-top: 38px; display: flex; gap: 16px; flex-wrap: wrap;
transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) .68s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) .68s;
}
html.gsi-js .gsi-spine .hero-ctas { opacity: 0; transform: translateY(20px); }
html.gsi-js .gsi-spine .revealed .hero-ctas { opacity: 1; transform: none; }
.gsi-spine .hero-credit {
position: absolute; right: 44px; bottom: 8vh; z-index: 2; font-size: 10px; font-weight: 600; letter-spacing: .16em;
text-transform: uppercase; color: rgba(255, 255, 255, .85); background: rgba(10, 21, 29, .5); backdrop-filter: blur(8px);
border-left: 2px solid var(--gsi-teal); padding: 10px 15px; transition: opacity 1s ease 1s;
}
html.gsi-js .gsi-spine .hero-credit { opacity: 0; }
html.gsi-js .gsi-spine .revealed .hero-credit { opacity: 1; }
@media (max-width: 760px) { .gsi-spine .hero-credit { display: none; } }
.gsi-spine .cue {
position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2; font-size: 9px; letter-spacing: .3em;
text-transform: uppercase; color: rgba(255, 255, 255, .55); display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.gsi-spine .cue i { width: 1px; height: 34px; background: linear-gradient(rgba(255, 255, 255, .6), transparent); animation: gsi-cue-drop 2s infinite; }
@keyframes gsi-cue-drop {
0% { transform: scaleY(0); transform-origin: top; }
45% { transform: scaleY(1); transform-origin: top; }
46% { transform-origin: bottom; }
100% { transform: scaleY(0); transform-origin: bottom; }
}
/* Phone: the stacked full-width CTAs reach into the cue's bottom-center spot,
so the cue overlaps the Start a Project button. Drop it — the hero visibly
continues below the fold on phones anyway. */
@media (max-width: 760px) { .gsi-spine .cue { display: none; } }
/* ----------------------------------------------------------------------------
STATS
---------------------------------------------------------------------------- */
.gsi-spine .stats { background: var(--gsi-deep); padding: 14vh 44px; position: relative; overflow: hidden; }
.gsi-spine .stats::before {
content: 'ESTABLISHED 1984'; position: absolute; left: -2%; top: 6%; font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic; font-size: clamp(80px, 15vw, 260px); color: rgba(27, 126, 143, .06); white-space: nowrap;
pointer-events: none; line-height: 1;
}
.gsi-spine .stats-head { position: relative; max-width: 1400px; margin: 0 auto 9vh; }
.gsi-spine .stats-head h2 {
font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: clamp(30px, 4.4vw, 60px);
line-height: 1.08; max-width: 900px; margin-top: 22px;
}
.gsi-spine .stats-head h2 em { font-style: italic; color: rgba(255, 255, 255, .5); }
.gsi-spine .stat-grid { position: relative; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
@media (max-width: 860px) { .gsi-spine .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 30px; } }
.gsi-spine .stat { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 24px; }
.gsi-spine .stat .n {
font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: clamp(52px, 6vw, 88px); line-height: 1;
font-variant-numeric: tabular-nums;
}
.gsi-spine .stat .n .suf { color: var(--gsi-teal); }
.gsi-spine .stat .k { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-top: 16px; }
/* ----------------------------------------------------------------------------
CAPABILITIES
---------------------------------------------------------------------------- */
.gsi-spine .caps { background: var(--gsi-dark); padding: 15vh 44px; }
.gsi-spine .caps-head { max-width: 1400px; margin: 0 auto 6vh; }
.gsi-spine .caps-head h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: clamp(32px, 4.6vw, 62px); line-height: 1.05; margin-top: 20px; max-width: 760px; }
.gsi-spine .caps-list { max-width: 1400px; margin: 0 auto; border-top: 1px solid rgba(255, 255, 255, .12); }
.gsi-spine .cap-row {
display: grid; grid-template-columns: 90px 1.1fr 1.4fr auto; gap: 30px; align-items: center; padding: 34px 0;
border-bottom: 1px solid rgba(255, 255, 255, .12); transition: padding-left .5s cubic-bezier(0.16, 1, 0.3, 1), background .5s cubic-bezier(0.16, 1, 0.3, 1);
position: relative; cursor: pointer; text-decoration: none;
}
.gsi-spine .cap-row::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--gsi-teal);
transform: scaleY(0); transform-origin: top; transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
}
.gsi-spine .cap-row:hover { padding-left: 26px; }
.gsi-spine .cap-row:hover::before { transform: scaleY(1); }
.gsi-spine .cap-row .num { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 34px; color: rgba(27, 126, 143, .5); }
.gsi-spine .cap-row .name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(24px, 2.6vw, 34px); font-weight: 500; }
.gsi-spine .cap-row .desc { font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, .55); }
.gsi-spine .cap-row .go { font-size: 22px; color: rgba(255, 255, 255, .3); transition: color .4s, transform .4s cubic-bezier(0.16, 1, 0.3, 1); }
.gsi-spine .cap-row:hover .go { color: var(--gsi-teal); transform: translateX(8px); }
@media (max-width: 860px) {
.gsi-spine .cap-row { grid-template-columns: 60px 1fr; gap: 8px 18px; }
.gsi-spine .cap-row .desc, .gsi-spine .cap-row .go { display: none; }
}
/* ----------------------------------------------------------------------------
HORIZONTAL WORK GALLERY
---------------------------------------------------------------------------- */
.gsi-spine .h-gallery { height: 100vh; overflow: hidden; background: var(--gsi-deep); position: relative; }
html:not(.gsi-js) .h-gallery { overflow-x: auto; overflow-y: hidden; }
.gsi-spine .h-track { display: flex; height: 100%; align-items: center; padding: 0 44px; gap: 40px; width: max-content; }
.gsi-spine .h-intro { flex: 0 0 34vw; min-width: 300px; padding-right: 20px; }
.gsi-spine .h-intro h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; color: #fff; font-size: clamp(40px, 4.4vw, 72px); line-height: 1; margin-top: 20px; }
.gsi-spine .h-intro p { color: rgba(255, 255, 255, .6); font-size: 14px; line-height: 1.9; max-width: 320px; margin-top: 26px; }
.gsi-spine .h-hint { margin-top: 32px; display: flex; align-items: center; gap: 12px; color: var(--gsi-teal); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.gsi-spine .h-hint i { width: 44px; height: 1px; background: var(--gsi-teal); position: relative; }
.gsi-spine .h-hint i::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--gsi-teal); border-right: 1px solid var(--gsi-teal); transform: rotate(45deg); }
.gsi-spine .h-card { flex: 0 0 40vw; min-width: 380px; height: 74vh; position: relative; overflow: hidden; background: #ccc; }
.gsi-spine .h-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
.gsi-spine .h-card:hover img { transform: scale(1.06); }
/* restrained inset-frame hover, matching .gal-item below, applied to the home page's gallery cards */
.gsi-spine .h-card::after {
content: ''; position: absolute; inset: 14px; border: 1px solid rgba(255, 255, 255, .55); opacity: 0;
transition: opacity .5s cubic-bezier(0.16, 1, 0.3, 1), inset .5s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; z-index: 1;
}
.gsi-spine .h-card:hover::after { opacity: 1; inset: 20px; }
.gsi-spine .h-card .meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 32px 30px; background: linear-gradient(transparent, rgba(8, 16, 22, .9)); color: #fff; z-index: 2; }
.gsi-spine .h-card .meta .m { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #5fd0e0; }
.gsi-spine .h-card .meta .t { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 34px; font-weight: 600; margin-top: 6px; font-style: italic; }
.gsi-spine .h-card .idx { position: absolute; top: 22px; left: 24px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; color: rgba(255, 255, 255, .8); z-index: 2; }
.gsi-spine .h-card .idx::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #fff; vertical-align: middle; margin-right: 10px; }
/* Mobile/tablet: the GSAP pin is disabled below 1025px (see gsi-motion.js) — the
track becomes a native, snap-scrolling swipe carousel instead of a pinned
section. Kept in sync with the nav hamburger breakpoint (1024px) so touch
tablets (iPad landscape = 1024px) get the swipeable carousel, not a pinned
scrub that fights their scroll. */
@media (max-width: 1024px) {
.gsi-spine .h-gallery { height: auto; overflow: visible; }
.gsi-spine .h-track {
width: auto; height: auto; flex-wrap: nowrap; align-items: stretch;
overflow-x: auto; -webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory; scrollbar-width: none;
padding: 64px 24px 72px; gap: 18px;
/* Without this a snapped card aligns flush to the viewport edge, while the
first card sits 24px in from the track padding — so the row looks inset
until you swipe, then jams against the edge. Match the padding so every
card rests in the same place. */
scroll-padding-inline: 24px;
}
.gsi-spine .h-track::-webkit-scrollbar { display: none; }
/* 70vw, not 80vw: at 80vw the intro filled the screen, so the first project
was entirely offscreen — a full swipe of nothing before any work appears,
and no hint that the row scrolls at all. At 70vw roughly a third of the
first card sits beside the heading, which shortens the gap and doubles as
the scroll affordance. */
.gsi-spine .h-intro {
flex: 0 0 70vw; min-width: 0; padding-right: 0; scroll-snap-align: start;
display: flex; flex-direction: column; justify-content: center;
}
/* 78vw, not 84vw: with the 24px scroll-padding above, an 84vw card leaves only
~20px of the next one showing — too thin to read as "there is more". At 78vw
the next card peeks ~44px on a 390px phone, which is the cue that invites
the swipe. */
.gsi-spine .h-card { flex: 0 0 78vw; min-width: 0; height: 62vh; scroll-snap-align: start; }
/* The desktop hint is a static arrow beside "Scroll to explore". On touch the
gesture is a swipe and nothing signals it, so nudge the arrow. The card peek
above is the primary cue; this is the secondary one. */
.gsi-spine .h-hint i { animation: gsi-hint-nudge 1.8s ease-in-out infinite; }
}
@keyframes gsi-hint-nudge {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(9px); }
}
/* Motion is decoration here — the peek carries the same message without it. */
@media (prefers-reduced-motion: reduce) {
.gsi-spine .h-hint i { animation: none; }
}
/* Reduced motion: the GSAP pin/horizontal-scrub is disabled in gsi-motion.js
when prefers-reduced-motion is set. Without this the track sits at x=0 inside
a 100vh overflow:hidden section, so every card past the first is clipped and
unreachable. Fall back to a native horizontal scroll carousel so all projects
stay reachable by wheel, touch, and keyboard. */
@media (prefers-reduced-motion: reduce) {
.gsi-spine .h-gallery {
height: auto; overflow-x: auto; overflow-y: hidden;
-webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none;
}
.gsi-spine .h-gallery::-webkit-scrollbar { display: none; }
.gsi-spine .h-intro, .gsi-spine .h-card { scroll-snap-align: start; }
}
/* ----------------------------------------------------------------------------
COVERAGE
---------------------------------------------------------------------------- */
.gsi-spine .cov { background: var(--gsi-deep); padding: 15vh 44px; text-align: center; position: relative; overflow: hidden; }
.gsi-spine .cov h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: clamp(38px, 6vw, 92px); line-height: 1.02; }
.gsi-spine .cov h2 em { font-style: italic; color: var(--gsi-teal); }
.gsi-spine .cov p { max-width: 520px; margin: 26px auto 0; color: rgba(255, 255, 255, .6); font-size: 15px; line-height: 1.85; }
.gsi-spine .cov-states { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; max-width: 720px; margin: 44px auto 0; }
.gsi-spine .cov-states span { font-size: 11px; font-weight: 600; letter-spacing: .12em; color: rgba(255, 255, 255, .42); border: 1px solid rgba(255, 255, 255, .16); padding: 8px 16px; border-radius: 40px; transition: all .4s cubic-bezier(0.16, 1, 0.3, 1); }
.gsi-spine .cov-states span.on { color: var(--gsi-teal); border-color: var(--gsi-teal); }
.gsi-spine .cov-note { margin-top: 34px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .3); }
/* Phone: the coverage-map plugin swaps its SVG for a stacked state list — but
the section already lists every state as chips right above it. Hide the
plugin's duplicate list here (its "Don't see your state?" note stays). */
@media (max-width: 767px) { .gsi-spine .cov .gsi-state-grid { display: none; } }
/* ----------------------------------------------------------------------------
FEATURE
---------------------------------------------------------------------------- */
.gsi-spine .feature { position: relative; height: 118vh; overflow: hidden; display: flex; align-items: center; }
.gsi-spine .feature-media { position: absolute; inset: -10% 0; height: 120%; will-change: transform; z-index: 0; }
.gsi-spine .feature-media img { width: 100%; height: 100%; object-fit: cover; }
.gsi-spine .feature-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 21, 29, .9), rgba(10, 21, 29, .42) 55%, rgba(10, 21, 29, .18) 100%); }
.gsi-spine .feature-inner { position: relative; z-index: 2; padding: 0 44px; max-width: 1400px; margin: 0 auto; width: 100%; }
.gsi-spine .feature .ghost { position: absolute; right: 2%; top: 6%; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; font-size: clamp(140px, 26vw, 420px); color: rgba(27, 126, 143, .16); line-height: .8; z-index: 1; pointer-events: none; }
.gsi-spine .feature h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-style: italic; font-size: clamp(40px, 7vw, 104px); line-height: .98; max-width: 760px; margin-top: 22px; }
.gsi-spine .feature .meta { display: flex; gap: 52px; margin-top: 40px; border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 24px; max-width: 680px; flex-wrap: wrap; }
.gsi-spine .feature .meta .v { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; font-weight: 500; font-variant-numeric: tabular-nums; }
.gsi-spine .feature .meta .k { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-top: 6px; }
.gsi-spine .feature .feature-cta { margin-top: 44px; }
/* ----------------------------------------------------------------------------
PARTNERS MARQUEE
---------------------------------------------------------------------------- */
.gsi-spine .partners { background: var(--gsi-dark); padding: 11vh 0; overflow: hidden; }
.gsi-spine .partners .gsi-lab { text-align: center; display: block; margin-bottom: 6vh; }
.gsi-spine .marquee { display: flex; gap: 80px; width: max-content; animation: gsi-marquee-scroll 32s linear infinite; }
.gsi-spine .marquee span { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(30px, 3.6vw, 52px); color: rgba(255, 255, 255, .32); white-space: nowrap; transition: color .4s; }
.gsi-spine .marquee span:hover { color: #fff; }
@keyframes gsi-marquee-scroll { to { transform: translateX(-50%); } }
/* ----------------------------------------------------------------------------
CTA
---------------------------------------------------------------------------- */
.gsi-spine .cta { position: relative; text-align: center; padding: 18vh 44px; background: linear-gradient(180deg, var(--gsi-deep), rgba(19, 58, 66, .9) 60%, rgba(27, 126, 143, .85) 100%); }
.gsi-spine .cta h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-style: italic; font-size: clamp(40px, 6.5vw, 92px); line-height: 1.02; max-width: 900px; margin: 26px auto 40px; }
.gsi-spine .cta .gsi-btn { border-color: rgba(255, 255, 255, .7); }
/* ----------------------------------------------------------------------------
GALLERY CARD — restrained hover treatment (approved on the case study)
Inset frame draw + small "Expand" label + subtle zoom. Reused by the
Gallery page / case-study project galleries (Phase 2/3) and by anything
else on a spine template that links out to a larger image.
Ported from docs/superpowers/mockups/case-study.html (.gal-item/.gal-tag).
---------------------------------------------------------------------------- */
.gsi-spine .gal-item { position: relative; overflow: hidden; aspect-ratio: 4 / 3; display: block; }
.gsi-spine .gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1); }
.gsi-spine .gal-item:hover img { transform: scale(1.05); }
.gsi-spine .gal-item::after {
content: ''; position: absolute; inset: 14px; border: 1px solid rgba(255, 255, 255, .55); opacity: 0;
transition: opacity .5s cubic-bezier(0.16, 1, 0.3, 1), inset .5s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; z-index: 2;
}
.gsi-spine .gal-item:hover::after { opacity: 1; inset: 20px; }
.gsi-spine .gal-tag {
position: absolute; left: 26px; bottom: 24px; font-size: 10px; font-weight: 600; letter-spacing: .16em;
text-transform: uppercase; color: #fff; opacity: 0; transform: translateY(8px);
transition: opacity .5s cubic-bezier(0.16, 1, 0.3, 1), transform .5s cubic-bezier(0.16, 1, 0.3, 1); z-index: 3;
}
.gsi-spine .gal-item:hover .gal-tag { opacity: 1; transform: none; }
/* ----------------------------------------------------------------------------
REDUCED MOTION
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.gsi-spine * { transition: none !important; animation: none !important; }
.gsi-spine .line > span,
.gsi-spine .hero-sub,
.gsi-spine .hero-award,
.gsi-spine .hero-ctas,
.gsi-spine .hero-credit,
[data-reveal] { transform: none !important; opacity: 1 !important; }
.gsi-spine .h-track { flex-wrap: nowrap; overflow-x: auto; }
}
/* ============================================================================
CASE STUDY (single gsi_project)
Ported from the approved mockup: docs/superpowers/mockups/case-study.html
Every case-study template wraps its content in `…
`
(Divi header/footer sit outside it) — collision-free with the homepage's
`.gsi-spine .hero`/`.cta` scope. Shared atoms (.gsi-btn, .gsi-lab,
[data-reveal], .gsi-progress, .gsi-grain, the motion engine hooks) are
reused verbatim, unscoped, from the block above.
Dropped from the mockup per plan: :root token block, html/body globals,
.nav/.cur* (cursor rejected; Divi header provides chrome).
Literal hex used for tokens with no equivalent in style.css's :root
(mirrors the header comment at the top of this file):
--deep #0A151D --dark #16242E --paper #F4F6F7
--ink #132029 --ink-soft #4a5b66
============================================================================ */
.gsi-cs, .gsi-cs * { margin: 0; padding: 0; box-sizing: border-box; }
.gsi-cs {
font-family: 'Inter', system-ui, sans-serif;
color: #fff;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/* Divi's global stylesheet sets h1..h6{color:#333} directly, overriding
inherited white. Force case-study headings white by default; the light
.cs-spec section overrides to dark ink below at higher specificity. */
.gsi-cs h1, .gsi-cs h2, .gsi-cs h3, .gsi-cs h4, .gsi-cs h5, .gsi-cs h6 { color: #fff; }
.gsi-cs p { color: inherit; }
.gsi-cs a { color: inherit; }
.gsi-cs img { display: block; max-width: 100%; }
.gsi-cs ::selection { background: var(--gsi-teal); color: #fff; }
/* ----------------------------------------------------------------------------
HERO
---------------------------------------------------------------------------- */
.gsi-cs .cs-hero { position: relative; height: 100vh; min-height: 620px; overflow: hidden; display: flex; align-items: flex-end; }
.gsi-cs .cs-hero-media { position: absolute; inset: -10% 0; height: 120%; z-index: 0; will-change: transform; }
.gsi-cs .cs-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.gsi-cs .cs-hero-scrim {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(10, 21, 29, .5), rgba(10, 21, 29, .05) 30%, rgba(10, 21, 29, .2) 55%, rgba(10, 21, 29, .92) 100%);
}
.gsi-cs .cs-hero-inner { position: relative; z-index: 2; padding: 0 44px 8vh; max-width: 1400px; width: 100%; }
.gsi-cs .cs-hero-credit {
position: absolute; right: 34px; bottom: 30px; z-index: 5;
font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .72);
background: rgba(13, 27, 36, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
border-left: 2px solid var(--gsi-teal); padding: 10px 16px; margin: 0; line-height: 1.4;
}
@media (max-width: 767px) { .gsi-cs .cs-hero-credit { display: none; } }
.gsi-cs .cs-hero .eyebrow {
display: flex; align-items: center; gap: 16px; font-size: 12px; font-weight: 600; letter-spacing: .28em;
text-transform: uppercase; color: rgba(255, 255, 255, .82); margin-bottom: 24px;
}
.gsi-cs .cs-hero .eyebrow::before { content: ''; width: 44px; height: 1px; background: var(--gsi-teal); }
.gsi-cs .cs-hero h1 {
font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-style: italic;
font-size: clamp(52px, 9vw, 150px); line-height: .94; color: #fff; text-shadow: 0 2px 44px rgba(0, 0, 0, .4);
}
.gsi-cs .line { display: block; overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
.gsi-cs .line > span { display: block; transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1); }
html.gsi-js .gsi-cs .line > span { transform: translateY(122%); }
html.gsi-js .gsi-cs .revealed .line > span { transform: translateY(0); }
/* ----------------------------------------------------------------------------
STATS BAR (count-up)
---------------------------------------------------------------------------- */
.gsi-cs .cs-sbar { background: #0A151D; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); padding: 8vh 44px; }
/* auto-fit, not repeat(4,1fr): sparse projects (3 stats on file) otherwise
leave a dead right-hand quarter of the band. */
.gsi-cs .cs-sbar-in { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; }
@media (max-width: 760px) { .gsi-cs .cs-sbar-in { grid-template-columns: repeat(2, 1fr); gap: 44px 24px; } }
.gsi-cs .cs-sb .v { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: clamp(38px, 4.6vw, 64px); line-height: 1; font-variant-numeric: tabular-nums; }
.gsi-cs .cs-sb .v .suf { color: var(--gsi-teal); }
.gsi-cs .cs-sb .k { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .45); margin-top: 14px; }
/* ----------------------------------------------------------------------------
OVERVIEW (narrative + spec-sheet profile)
---------------------------------------------------------------------------- */
.gsi-cs .cs-ov { background: #16242E; padding: 15vh 44px; }
.gsi-cs .cs-ov-in { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr; gap: 80px; }
@media (max-width: 860px) { .gsi-cs .cs-ov-in { grid-template-columns: 1fr; gap: 50px; } }
.gsi-cs .cs-ov-copy p { font-size: 16px; line-height: 1.9; color: rgba(255, 255, 255, .68); margin-bottom: 1.3em; max-width: 600px; }
.gsi-cs .cs-profile { border-top: 2px solid var(--gsi-teal); }
.gsi-cs .cs-prow { display: flex; flex-direction: column; gap: 5px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.gsi-cs .cs-plabel { font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gsi-teal); }
.gsi-cs .cs-pval { font-size: 15px; color: rgba(255, 255, 255, .85); }
/* ----------------------------------------------------------------------------
CHALLENGE (case studies only)
---------------------------------------------------------------------------- */
.gsi-cs .cs-chal { background: #0A151D; padding: 16vh 44px; text-align: center; }
.gsi-cs .cs-chal-in { max-width: 780px; margin: 0 auto; }
.gsi-cs .cs-chal-body p { font-size: 16px; line-height: 2; color: rgba(255, 255, 255, .6); margin-bottom: 1.2em; }
/* ----------------------------------------------------------------------------
SOLUTION (case studies only)
---------------------------------------------------------------------------- */
.gsi-cs .cs-sol { background: #16242E; padding: 15vh 44px; }
.gsi-cs .cs-sol-in { max-width: 1400px; margin: 0 auto; }
.gsi-cs .cs-sol-intro p { font-size: 16px; line-height: 1.9; color: rgba(255, 255, 255, .65); max-width: 640px; margin-bottom: 8vh; }
.gsi-cs .cs-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 6vh; }
@media (max-width: 860px) { .gsi-cs .cs-pillars { grid-template-columns: 1fr; gap: 36px; } }
.gsi-cs .cs-pillar { border-left: 2px solid rgba(27, 126, 143, .45); padding-left: 24px; }
.gsi-cs .cs-pillar .cs-pnum { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 44px; color: rgba(27, 126, 143, .4); line-height: 1; display: block; }
.gsi-cs .cs-pillar h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; font-weight: 600; margin: 12px 0; }
.gsi-cs .cs-pillar p { font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, .6); }
/* ----------------------------------------------------------------------------
TECHNICAL PROFILE (light — the temperature-cut moment)
---------------------------------------------------------------------------- */
.gsi-cs .cs-spec { background: #F4F6F7; color: #132029; padding: 16vh 44px; }
.gsi-cs .cs-spec-in { max-width: 1400px; margin: 0 auto; }
.gsi-cs .cs-spec h1, .gsi-cs .cs-spec h2, .gsi-cs .cs-spec h3,
.gsi-cs .cs-spec h4, .gsi-cs .cs-spec h5, .gsi-cs .cs-spec h6 { color: #132029; }
.gsi-cs .cs-spec-h { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: clamp(30px, 4vw, 54px); margin: 18px 0 7vh; max-width: 640px; }
.gsi-cs .cs-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 80px; }
@media (max-width: 760px) { .gsi-cs .cs-spec-grid { grid-template-columns: 1fr; gap: 0; } }
.gsi-cs .cs-spec-row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 20px 0; border-bottom: 1px solid rgba(19, 32, 41, .14); }
.gsi-cs .cs-spec-row .k { flex-shrink: 0; }
.gsi-cs .cs-spec-row .k { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #4a5b66; }
.gsi-cs .cs-spec-row .v { font-family: 'Inter', system-ui, sans-serif; font-size: 16px; color: #132029; font-variant-numeric: tabular-nums; text-align: right; }
.gsi-cs .cs-spec-note { margin-top: 5vh; font-size: 11px; letter-spacing: .06em; color: #8a99a2; }
/* ----------------------------------------------------------------------------
GALLERY — restrained hover (inset frame + "Expand" label + subtle zoom),
applied to .cs-gal-grid a; no big cursor.
---------------------------------------------------------------------------- */
.gsi-cs .cs-gal { background: #0A151D; padding: 15vh 0 0; }
.gsi-cs .cs-gal-head { max-width: 1400px; margin: 0 auto 6vh; padding: 0 44px; }
.gsi-cs .cs-gal-h { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-style: italic; font-size: clamp(40px, 6vw, 88px); line-height: 1.02; margin-top: 12px; max-width: 900px; }
.gsi-cs .cs-gal-lead { height: 96vh; overflow: hidden; position: relative; }
.gsi-cs .cs-gal-lead .gm { position: absolute; inset: -10% 0; height: 120%; will-change: transform; }
.gsi-cs .cs-gal-lead img { width: 100%; height: 100%; object-fit: cover; }
.gsi-cs .cs-gal-grid { max-width: 1400px; margin: 0 auto; padding: 12px 44px 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .gsi-cs .cs-gal-grid { grid-template-columns: 1fr; } }
.gsi-cs .cs-gal-grid a { position: relative; overflow: hidden; aspect-ratio: 4 / 3; display: block; }
.gsi-cs .cs-gal-grid a img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1); }
.gsi-cs .cs-gal-grid a:hover img { transform: scale(1.05); }
.gsi-cs .cs-gal-grid a::after {
content: ''; position: absolute; inset: 14px; border: 1px solid rgba(255, 255, 255, .55); opacity: 0;
transition: opacity .5s cubic-bezier(0.16, 1, 0.3, 1), inset .5s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; z-index: 2;
}
.gsi-cs .cs-gal-grid a:hover::after { opacity: 1; inset: 20px; }
.gsi-cs .cs-gal-grid a .gsi-gal-tag {
position: absolute; left: 26px; bottom: 24px; font-size: 10px; font-weight: 600; letter-spacing: .16em;
text-transform: uppercase; color: #fff; opacity: 0; transform: translateY(8px);
transition: opacity .5s cubic-bezier(0.16, 1, 0.3, 1), transform .5s cubic-bezier(0.16, 1, 0.3, 1); z-index: 3;
}
.gsi-cs .cs-gal-grid a:hover .gsi-gal-tag { opacity: 1; transform: none; }
/* ----------------------------------------------------------------------------
CTA + NEXT PROJECT (locked treatment — native .cs-cta, not .gsi-archive-cta;
the .gsi-cs *{margin:0;padding:0} reset above would strip a reused
style.css class, so this is built with explicit padding/margins instead)
---------------------------------------------------------------------------- */
/* Photo (project image, set inline in the template) behind a dark-to-teal
gradient overlay — matches the .gsi-archive-cta treatment used site-wide. */
.gsi-cs .cs-cta { position: relative; overflow: hidden; text-align: center; padding: 18vh 44px; background-color: #0A151D; background-position: center; background-size: cover; background-repeat: no-repeat; }
.gsi-cs .cs-cta::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(8, 16, 24, .82) 0%, rgba(10, 20, 28, .52) 48%, rgba(16, 52, 60, .74) 100%); }
/* White eyebrow on the photo CTA — teal .gsi-lab washes out over the imagery
(same reasoning as #cta .gsi-cta-label in style-scoped rules above). */
.gsi-cs .cs-cta .gsi-lab { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 14px rgba(6, 14, 20, .9); }
.gsi-cs .cs-cta > * { position: relative; z-index: 1; }
.gsi-cs .cs-cta-h { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-style: italic; font-size: clamp(38px, 6vw, 86px); line-height: 1.02; max-width: 860px; margin: 24px auto 40px; }
.gsi-cs .cs-cta .gsi-btn { padding: 16px 34px; border: 1px solid rgba(255, 255, 255, .7); }
.gsi-cs .cs-next {
display: block; margin-top: 7vh; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 24px;
color: rgba(255, 255, 255, .7); text-decoration: none; transition: color .3s;
}
.gsi-cs .cs-next:hover { color: #fff; }
.gsi-cs .cs-next small { display: block; font-family: 'Inter', system-ui, sans-serif; font-style: normal; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-bottom: 8px; }
/* ----------------------------------------------------------------------------
REDUCED MOTION
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.gsi-cs * { transition: none !important; animation: none !important; }
.gsi-cs .line > span { transform: none !important; }
}
/* ============================================================================
PROJECTS ARCHIVE (gsi_project post type archive — /projects/)
Ported to the same bespoke motion-led spine language as the homepage and
case study. archive-gsi_project.php wraps its content in `…
`
(Divi header/footer sit outside it) — its own scope, collision-free with
`.gsi-spine`/`.gsi-cs`. Shared atoms (.gsi-btn, .gsi-lab, [data-reveal],
.gsi-progress, .gsi-grain, the motion engine hooks, the #cta overrides,
and .gsi-archive-cta/.gsi-cta-* from style.css) are reused verbatim.
============================================================================ */
.gsi-arch, .gsi-arch * { margin: 0; padding: 0; box-sizing: border-box; }
.gsi-arch {
font-family: 'Inter', system-ui, sans-serif;
color: #fff;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/* Divi's global stylesheet sets h1..h6{color:#333} directly, overriding
inherited white — force archive headings white by default. */
.gsi-arch h1, .gsi-arch h2, .gsi-arch h3, .gsi-arch h4, .gsi-arch h5, .gsi-arch h6 { color: #fff; }
.gsi-arch p { color: inherit; }
.gsi-arch a { color: inherit; text-decoration: none; }
.gsi-arch img { display: block; max-width: 100%; }
.gsi-arch ::selection { background: var(--gsi-teal); color: #fff; }
/* ----------------------------------------------------------------------------
HERO
---------------------------------------------------------------------------- */
.gsi-arch .arch-hero { position: relative; height: 100vh; min-height: 620px; overflow: hidden; display: flex; align-items: flex-end; }
.gsi-arch .arch-hero-media { position: absolute; inset: -10% 0; height: 120%; z-index: 0; will-change: transform; }
.gsi-arch .arch-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.gsi-arch .arch-hero-scrim {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(8, 16, 24, .58) 0%, rgba(8, 16, 24, .12) 24%, rgba(8, 16, 24, .42) 58%, rgba(8, 16, 24, .95) 100%),
linear-gradient(90deg, rgba(8, 16, 24, .9) 0%, rgba(8, 16, 24, .42) 44%, transparent 80%);
}
.gsi-arch .arch-hero-inner { position: relative; z-index: 2; width: 100%; padding: 0 44px 8vh; max-width: 1400px; }
.gsi-arch .eyebrow {
font-size: 12px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: rgba(255, 255, 255, .82);
display: flex; align-items: center; gap: 16px; margin-bottom: 26px; text-shadow: 0 1px 24px rgba(0, 0, 0, .45);
}
.gsi-arch .eyebrow::before { content: ''; width: 44px; height: 1px; background: var(--gsi-teal); }
.gsi-arch h1 {
font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-style: italic;
font-size: clamp(48px, 8.4vw, 132px); line-height: .96; letter-spacing: -.01em;
color: #fff; text-shadow: 0 2px 44px rgba(0, 0, 0, .4);
}
.gsi-arch .line { display: block; overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
.gsi-arch .line > span { display: block; transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1); }
html.gsi-js .gsi-arch .line > span { transform: translateY(122%); }
html.gsi-js .gsi-arch .revealed .line > span { transform: translateY(0); }
.gsi-arch .arch-hero-sub {
margin-top: 28px; max-width: 460px; font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, .72);
text-shadow: 0 1px 24px rgba(0, 0, 0, .45);
transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) .5s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) .5s;
}
html.gsi-js .gsi-arch .arch-hero-sub { opacity: 0; transform: translateY(20px); }
html.gsi-js .gsi-arch .revealed .arch-hero-sub { opacity: 1; transform: none; }
/* ----------------------------------------------------------------------------
FILTER + GRID
---------------------------------------------------------------------------- */
.gsi-arch .arch-grid { background: #0A151D; padding: 15vh 44px 16vh; }
.gsi-arch .arch-grid-head { max-width: 1400px; margin: 0 auto 6vh; }
.gsi-arch .arch-grid-head h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: clamp(32px, 4.6vw, 62px); line-height: 1.06; margin-top: 20px; max-width: 760px; }
.gsi-arch .arch-filter { max-width: 1400px; margin: 0 auto 7vh; display: flex; flex-wrap: wrap; gap: 16px 40px; }
.gsi-arch .arch-filter-group { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.gsi-arch .arch-filter-label { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .35); margin-right: 4px; }
.gsi-arch .arch-fbtn {
font-family: 'Inter', system-ui, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
color: rgba(255, 255, 255, .5); background: transparent; border: 1px solid rgba(255, 255, 255, .18); padding: 10px 20px; cursor: pointer;
transition: color .4s cubic-bezier(0.16, 1, 0.3, 1), border-color .4s cubic-bezier(0.16, 1, 0.3, 1), background .4s cubic-bezier(0.16, 1, 0.3, 1);
}
.gsi-arch .arch-fbtn:hover, .gsi-arch .arch-fbtn.active { color: #fff; border-color: var(--gsi-teal); background: rgba(27, 126, 143, .14); }
/* Comfortable tap size for the filter chips on touch (was ~34px tall). */
@media (max-width: 767px) { .gsi-arch .arch-fbtn { padding: 13px 22px; min-height: 44px; } }
.gsi-arch .arch-cards { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px; }
@media (max-width: 980px) { .gsi-arch .arch-cards { grid-template-columns: repeat(2, 1fr); gap: 34px 24px; } }
@media (max-width: 640px) { .gsi-arch .arch-cards { grid-template-columns: 1fr; } }
.gsi-arch .arch-card { display: block; }
.gsi-arch .arch-card-img { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #16242E; }
.gsi-arch .arch-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1); }
.gsi-arch .arch-card:hover .arch-card-img img { transform: scale(1.05); }
.gsi-arch .arch-card-img::after {
content: ''; position: absolute; inset: 14px; border: 1px solid rgba(255, 255, 255, .55); opacity: 0;
transition: opacity .5s cubic-bezier(0.16, 1, 0.3, 1), inset .5s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; z-index: 1;
}
.gsi-arch .arch-card:hover .arch-card-img::after { opacity: 1; inset: 20px; }
.gsi-arch .arch-card-tag {
position: absolute; left: 26px; bottom: 24px; font-size: 10px; font-weight: 600; letter-spacing: .16em;
text-transform: uppercase; color: #fff; opacity: 0; transform: translateY(8px);
transition: opacity .5s cubic-bezier(0.16, 1, 0.3, 1), transform .5s cubic-bezier(0.16, 1, 0.3, 1); z-index: 2;
}
.gsi-arch .arch-card:hover .arch-card-tag { opacity: 1; transform: none; }
.gsi-arch .arch-card-body { padding-top: 20px; }
.gsi-arch .arch-card-type { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gsi-teal); }
.gsi-arch .arch-card-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 25px; line-height: 1.2; margin-top: 8px; transition: color .3s; }
.gsi-arch .arch-card:hover .arch-card-title { color: var(--gsi-teal); }
.gsi-arch .arch-card-loc { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .45); margin-top: 8px; }
.gsi-arch .arch-empty { text-align: center; color: rgba(255, 255, 255, .45); font-size: 15px; padding: 40px 0; max-width: 1400px; margin: 0 auto; }
/* ----------------------------------------------------------------------------
REDUCED MOTION
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.gsi-arch * { transition: none !important; animation: none !important; }
.gsi-arch .line > span,
.gsi-arch .arch-hero-sub,
[data-reveal] { transform: none !important; opacity: 1 !important; }
}
/* ============================================================================
GALLERY PAGE ([gsi_gallery] shortcode — page id 109, /gallery/)
Light-touch restyle of the plugin's existing filter bar / grid / lightbox
markup (gsi-projects.php) to the spine aesthetic. This file only loads on
spine pages (gsi_is_spine()), so these unscoped class selectors are already
effectively page-scoped — the classes below don't render anywhere else.
No shortcode PHP changes: the "Expand" tag + inset-frame hover are drawn
entirely with CSS pseudo-elements against the existing
markup (same restrained treatment as .gal-item above).
============================================================================ */
.gsi-gallery-page { background: #0A151D; padding: 8vh 0 4vh; }
.gsi-gallery-page .gsi-filter-bar {
display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px;
}
.gsi-gallery-page .gsi-filter-btn {
font-family: 'Inter', system-ui, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
color: rgba(255, 255, 255, .5); background: transparent; border: 1px solid rgba(255, 255, 255, .18); padding: 10px 20px; cursor: pointer;
transition: color .4s cubic-bezier(0.16, 1, 0.3, 1), border-color .4s cubic-bezier(0.16, 1, 0.3, 1), background .4s cubic-bezier(0.16, 1, 0.3, 1);
}
.gsi-gallery-page .gsi-filter-btn:hover, .gsi-gallery-page .gsi-filter-btn.active { color: #fff; border-color: var(--gsi-teal); background: rgba(27, 126, 143, .14); }
.gsi-gallery-page .gsi-gallery-grid { gap: 12px; }
.gsi-gallery-page .gsi-gallery-item { position: relative; transition: opacity .25s, transform .25s; }
.gsi-gallery-page .gsi-gallery-item img { transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1); }
.gsi-gallery-page .gsi-gallery-item:hover img { transform: scale(1.05); }
.gsi-gallery-page .gsi-gallery-item::after {
content: ''; position: absolute; inset: 14px; border: 1px solid rgba(255, 255, 255, .55); opacity: 0;
transition: opacity .5s cubic-bezier(0.16, 1, 0.3, 1), inset .5s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; z-index: 1;
}
.gsi-gallery-page .gsi-gallery-item:hover::after { opacity: 1; inset: 20px; }
.gsi-gallery-page .gsi-gallery-item::before {
content: 'Expand'; position: absolute; left: 26px; bottom: 24px; font-family: 'Inter', system-ui, sans-serif;
font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #fff; opacity: 0; transform: translateY(8px);
transition: opacity .5s cubic-bezier(0.16, 1, 0.3, 1), transform .5s cubic-bezier(0.16, 1, 0.3, 1); z-index: 2; pointer-events: none;
}
.gsi-gallery-page .gsi-gallery-item:hover::before { opacity: 1; transform: none; }
/* ============================================================================
ABOUT / CAREERS / CONTACT (bespoke spine templates — phase B1)
template-spine-about.php / template-spine-careers.php / template-spine-contact.php.
Each wraps its content in its own scope (`.gsi-about`, `.gsi-careers`,
`.gsi-contact` — Divi header/footer sit outside it), collision-free with
`.gsi-spine`/`.gsi-cs`/`.gsi-arch`. Like the case study, each wrapper does
its own local reset (it is NOT `.gsi-spine`, so that reset doesn't reach
it) and forces headings white by default (Divi's global h1..h6{color:#333}
otherwise wins). Shared atoms (.gsi-btn, .gsi-lab, [data-reveal], .d1-.d4,
.gsi-progress, .gsi-grain, the motion engine hooks, .gsi-archive-cta/
.gsi-cta-* + the #cta restore-rules) are reused verbatim from above.
============================================================================ */
.gsi-about, .gsi-about *,
.gsi-careers, .gsi-careers *,
.gsi-contact, .gsi-contact * { margin: 0; padding: 0; box-sizing: border-box; }
.gsi-about, .gsi-careers, .gsi-contact {
font-family: 'Inter', system-ui, sans-serif;
color: #fff;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
.gsi-about h1, .gsi-about h2, .gsi-about h3, .gsi-about h4, .gsi-about h5, .gsi-about h6,
.gsi-careers h1, .gsi-careers h2, .gsi-careers h3, .gsi-careers h4, .gsi-careers h5, .gsi-careers h6,
.gsi-contact h1, .gsi-contact h2, .gsi-contact h3, .gsi-contact h4, .gsi-contact h5, .gsi-contact h6 { color: #fff; }
.gsi-about p, .gsi-careers p, .gsi-contact p { color: inherit; }
.gsi-about a, .gsi-careers a, .gsi-contact a { color: inherit; text-decoration: none; }
.gsi-about img, .gsi-careers img, .gsi-contact img { display: block; max-width: 100%; }
.gsi-about ::selection, .gsi-careers ::selection, .gsi-contact ::selection { background: var(--gsi-teal); color: #fff; }
/* .gsi-btn is defined above (shared atoms) at equal (0,1,0) specificity to this
wrapper's own `* {padding:0}` reset; because this block loads later in the
file, the reset would otherwise win on source order and flatten the button
to zero padding (the same class of bug the #cta restore-rules exist to
prevent for .gsi-archive-cta). Two-class specificity beats it unconditionally. */
.gsi-about .gsi-btn, .gsi-careers .gsi-btn, .gsi-contact .gsi-btn { padding: 16px 34px; border: 1px solid rgba(255, 255, 255, .55); }
/* ----------------------------------------------------------------------------
SHARED HERO ANATOMY (centered eyebrow/h1/sub — distinct from the
bottom-left-aligned hero used by the homepage/case study/archive)
---------------------------------------------------------------------------- */
.gsi-about .ab-hero, .gsi-careers .cr-hero, .gsi-contact .ct-hero {
position: relative; height: 100vh; min-height: 640px; overflow: hidden; display: flex; align-items: flex-end;
}
.gsi-about .ab-hero-media, .gsi-careers .cr-hero-media, .gsi-contact .ct-hero-media {
position: absolute; inset: -10% 0; height: 120%; will-change: transform; z-index: 0;
}
.gsi-about .ab-hero-media img, .gsi-careers .cr-hero-media img, .gsi-contact .ct-hero-media img {
width: 100%; height: 100%; object-fit: cover; transform: scale(1.05);
}
.gsi-about .ab-hero-scrim, .gsi-careers .cr-hero-scrim, .gsi-contact .ct-hero-scrim {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(10, 21, 29, .55), rgba(10, 21, 29, .08) 32%, rgba(10, 21, 29, .24) 56%, rgba(10, 21, 29, .94) 100%);
}
.gsi-about .ab-hero-inner, .gsi-careers .cr-hero-inner, .gsi-contact .ct-hero-inner {
position: relative; z-index: 2; width: 100%; padding: 0 44px 9vh; max-width: 1000px; text-align: left;
}
.gsi-about .eyebrow, .gsi-careers .eyebrow, .gsi-contact .eyebrow {
display: flex; align-items: center; justify-content: flex-start; gap: 18px;
font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
color: rgba(255, 255, 255, .82); margin-bottom: 26px; text-shadow: 0 1px 24px rgba(0, 0, 0, .45);
}
.gsi-about .eyebrow::before,
.gsi-careers .eyebrow::before,
.gsi-contact .eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--gsi-teal); }
.gsi-about .ab-hero h1 {
font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; letter-spacing: .03em;
font-size: clamp(48px, 9vw, 118px); line-height: .95; color: #fff; text-shadow: 0 2px 44px rgba(0, 0, 0, .4);
}
.gsi-careers .cr-hero h1, .gsi-contact .ct-hero h1 {
font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-style: italic;
font-size: clamp(40px, 7.6vw, 90px); line-height: 1.03; color: #fff; text-shadow: 0 2px 44px rgba(0, 0, 0, .4);
}
.gsi-about .line, .gsi-careers .line, .gsi-contact .line { display: block; overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
.gsi-about .line > span, .gsi-careers .line > span, .gsi-contact .line > span { display: block; transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1); }
html.gsi-js .gsi-about .line > span, html.gsi-js .gsi-careers .line > span, html.gsi-js .gsi-contact .line > span { transform: translateY(122%); }
html.gsi-js .gsi-about .revealed .line > span, html.gsi-js .gsi-careers .revealed .line > span, html.gsi-js .gsi-contact .revealed .line > span { transform: translateY(0); }
.gsi-about .ab-hero-sub, .gsi-careers .cr-hero-sub, .gsi-contact .ct-hero-sub {
margin: 28px 0 0; max-width: 560px; font-size: 16px; line-height: 1.85; color: rgba(255, 255, 255, .68);
text-shadow: 0 1px 24px rgba(0, 0, 0, .45);
transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) .5s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) .5s;
}
.gsi-about .ab-hero-sub::before, .gsi-careers .cr-hero-sub::before, .gsi-contact .ct-hero-sub::before {
content: ''; display: block; width: 56px; height: 1px; background: rgba(27, 126, 143, .7); margin: 0 0 28px;
}
html.gsi-js .gsi-about .ab-hero-sub, html.gsi-js .gsi-careers .cr-hero-sub, html.gsi-js .gsi-contact .ct-hero-sub { opacity: 0; transform: translateY(20px); }
html.gsi-js .gsi-about .revealed .ab-hero-sub, html.gsi-js .gsi-careers .revealed .cr-hero-sub, html.gsi-js .gsi-contact .revealed .ct-hero-sub { opacity: 1; transform: none; }
/* ----------------------------------------------------------------------------
ABOUT — Our Story
---------------------------------------------------------------------------- */
.gsi-about .ab-story { background: var(--gsi-deep); }
.gsi-about .ab-story-in { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr .85fr; }
@media (max-width: 900px) { .gsi-about .ab-story-in { grid-template-columns: 1fr; } }
.gsi-about .ab-story-copy { position: relative; padding: 15vh 6vw; overflow: hidden; }
.gsi-about .ab-story-copy .ghost {
position: absolute; top: -3vh; left: 2vw; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300;
font-size: clamp(110px, 15vw, 220px); color: rgba(27, 126, 143, .18); line-height: .85; z-index: 0; pointer-events: none;
}
.gsi-about .ab-story-copy > * { position: relative; z-index: 1; }
.gsi-about .ab-story-copy h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(30px, 3.6vw, 50px); line-height: 1.15; margin: 18px 0 24px; max-width: 520px; }
.gsi-about .ab-story-copy p { font-size: 15px; line-height: 1.9; color: rgba(255, 255, 255, .65); margin-bottom: 1.3em; max-width: 520px; }
.gsi-about .ab-story-copy .gsi-btn { margin-top: 14px; }
.gsi-about .ab-story-media { position: relative; overflow: hidden; min-height: 360px; display: flex; align-items: center; justify-content: center; padding: 8vh 6vw; }
/* Brand seal: the red + white logo, contained + centered (not a stretched
cover image). Native colours — red lettering, white building mark. */
.gsi-about .ab-story-media img { width: auto; height: auto; max-width: 76%; max-height: 76%; object-fit: contain; }
/* ----------------------------------------------------------------------------
ABOUT — Mission
---------------------------------------------------------------------------- */
.gsi-about .ab-mission { background: var(--gsi-dark); padding: 10vh 44px; }
.gsi-about .ab-mission-in { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
@media (max-width: 860px) { .gsi-about .ab-mission-in { grid-template-columns: 1fr; gap: 36px; } }
.gsi-about .ab-mission-quote .rule { display: block; width: 40px; height: 1px; background: var(--gsi-teal); margin-bottom: 24px; }
.gsi-about .ab-mission-quote h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-style: italic; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.25; }
.gsi-about .ab-mission-copy p { font-size: 15px; line-height: 1.9; color: rgba(255, 255, 255, .62); margin-bottom: 1.3em; }
.gsi-about .ab-mission-copy p:last-child { margin-bottom: 0; color: rgba(255, 255, 255, .5); }
/* ----------------------------------------------------------------------------
ABOUT — How We Work
---------------------------------------------------------------------------- */
.gsi-about .ab-process { background: var(--gsi-deep); padding: 15vh 44px; }
.gsi-about .ab-process-head { max-width: 1400px; margin: 0 auto 8vh; }
.gsi-about .ab-process-head h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(32px, 4.6vw, 52px); line-height: 1.1; margin-top: 20px; }
.gsi-about .ab-process-list { max-width: 1400px; margin: 0 auto; border-top: 1px solid rgba(255, 255, 255, .12); }
.gsi-about .ab-prow { display: grid; grid-template-columns: 80px 260px 1fr; gap: 24px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
@media (max-width: 760px) { .gsi-about .ab-prow { grid-template-columns: 1fr; gap: 8px; } }
.gsi-about .ab-prow .num { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 32px; color: var(--gsi-teal); }
.gsi-about .ab-prow .name { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 22px; color: #fff; }
.gsi-about .ab-prow .desc { font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, .55); max-width: 640px; }
/* ----------------------------------------------------------------------------
ABOUT — Counters (count-up)
---------------------------------------------------------------------------- */
.gsi-about .ab-stats { background: var(--gsi-dark); padding: 11vh 44px; }
.gsi-about .ab-stats-in { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
@media (max-width: 760px) { .gsi-about .ab-stats-in { grid-template-columns: repeat(2, 1fr); gap: 44px 24px; } }
.gsi-about .ab-stat { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 24px; }
.gsi-about .ab-stat .n { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: clamp(40px, 5vw, 66px); line-height: 1; font-variant-numeric: tabular-nums; }
.gsi-about .ab-stat .n .suf { color: var(--gsi-teal); }
.gsi-about .ab-stat .k { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-top: 16px; }
/* ----------------------------------------------------------------------------
ABOUT — Photo Break
---------------------------------------------------------------------------- */
.gsi-about .ab-photo { position: relative; height: 72vh; min-height: 440px; overflow: hidden; }
.gsi-about .ab-photo-media { position: absolute; inset: -10% 0; height: 120%; will-change: transform; }
.gsi-about .ab-photo-media img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.gsi-about .ab-photo-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 16, 22, .88), rgba(8, 16, 22, .04) 45%); }
.gsi-about .ab-photo-caption { position: absolute; left: 44px; bottom: 44px; z-index: 2; max-width: 480px; }
.gsi-about .ab-photo-caption .m { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-bottom: 8px; }
.gsi-about .ab-photo-caption .t { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(22px, 2.6vw, 30px); color: #fff; }
.gsi-about .ab-photo-caption .c { font-size: 12px; letter-spacing: .04em; color: rgba(255, 255, 255, .5); margin-top: 6px; }
/* ----------------------------------------------------------------------------
ABOUT — Core Values
---------------------------------------------------------------------------- */
.gsi-about .ab-values { background: var(--gsi-deep); padding: 15vh 44px; }
.gsi-about .ab-values-head { max-width: 680px; margin: 0 auto 8vh; text-align: center; }
.gsi-about .ab-values-head h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(32px, 4.6vw, 52px); line-height: 1.1; margin-top: 20px; }
.gsi-about .ab-values-list { max-width: 1000px; margin: 0 auto; border-top: 1px solid rgba(27, 126, 143, .2); }
.gsi-about .ab-vrow { display: grid; grid-template-columns: 70px 220px 1fr; gap: 24px; align-items: baseline; padding: 30px 0; border-bottom: 1px solid rgba(27, 126, 143, .22); }
@media (max-width: 760px) { .gsi-about .ab-vrow { grid-template-columns: 1fr; gap: 8px; } }
.gsi-about .ab-vrow .num { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 15px; letter-spacing: .06em; color: rgba(27, 126, 143, .75); }
.gsi-about .ab-vrow h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 24px; color: #fff; }
.gsi-about .ab-vrow p { font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, .55); }
/* ----------------------------------------------------------------------------
ABOUT — FAQ
---------------------------------------------------------------------------- */
.gsi-about .ab-faq { background: var(--gsi-dark); padding: 15vh 44px; }
.gsi-about .ab-faq-head { max-width: 680px; margin: 0 auto 8vh; text-align: center; }
.gsi-about .ab-faq-head h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(32px, 4.6vw, 52px); line-height: 1.1; margin-top: 20px; }
.gsi-about .ab-faq-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6vh 60px; }
@media (max-width: 820px) { .gsi-about .ab-faq-grid { grid-template-columns: 1fr; gap: 5vh; } }
.gsi-about .ab-faq-item { border-top: 1px solid rgba(27, 126, 143, .3); padding-top: 26px; }
.gsi-about .ab-faq-item h3 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gsi-teal); font-weight: 600; margin-bottom: 10px; }
.gsi-about .ab-faq-item p { font-size: 14px; line-height: 1.85; color: rgba(255, 255, 255, .62); }
/* ----------------------------------------------------------------------------
CAREERS — Intro
---------------------------------------------------------------------------- */
.gsi-careers .cr-intro { background: var(--gsi-dark); padding: 10vh 44px; }
.gsi-careers .cr-intro-in { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 3fr 2fr; gap: 70px; }
@media (max-width: 900px) { .gsi-careers .cr-intro-in { grid-template-columns: 1fr; gap: 40px; } }
.gsi-careers .cr-intro-copy h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(32px, 4vw, 52px); line-height: 1.1; margin: 16px 0 24px; }
.gsi-careers .cr-intro-copy p { font-size: 15px; line-height: 1.9; color: rgba(255, 255, 255, .6); margin-bottom: 1.2em; max-width: 560px; }
.gsi-careers .cr-intro-list { align-self: start; padding-left: 10%; }
@media (max-width: 900px) { .gsi-careers .cr-intro-list { padding-left: 0; } }
.gsi-careers .cr-intro-list ul { list-style: none; margin-top: 22px; }
.gsi-careers .cr-intro-list li { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500; font-size: 24px; color: #fff; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); margin-bottom: 18px; }
.gsi-careers .cr-intro-list li:last-child { margin-bottom: 0; }
/* ----------------------------------------------------------------------------
CAREERS — Open Roles
---------------------------------------------------------------------------- */
.gsi-careers .cr-roles { background: var(--gsi-deep); padding: 15vh 44px; }
.gsi-careers .cr-roles-head { max-width: 860px; margin: 0 auto 8vh; }
.gsi-careers .cr-roles-head h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(32px, 4.4vw, 48px); line-height: 1.1; margin: 16px 0; }
.gsi-careers .cr-roles-head p { font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, .58); }
.gsi-careers .cr-roles-head a { color: var(--gsi-teal); }
.gsi-careers .cr-roles-head a:hover { text-decoration: underline; }
.gsi-careers .cr-roles-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: rgba(255, 255, 255, .08); }
@media (max-width: 820px) { .gsi-careers .cr-roles-grid { grid-template-columns: 1fr; } }
.gsi-careers .cr-role { background: var(--gsi-deep); padding: 40px 40px 44px; }
.gsi-careers .cr-role .num { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 40px; color: rgba(27, 126, 143, .45); line-height: 1; margin-bottom: 8px; }
.gsi-careers .cr-role h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 26px; color: #fff; margin-bottom: 16px; }
.gsi-careers .cr-role .desc { font-size: 14px; line-height: 1.85; color: rgba(255, 255, 255, .6); margin-bottom: 16px; }
.gsi-careers .cr-role ul { list-style: none; }
.gsi-careers .cr-role li { font-size: 13px; line-height: 1.9; color: rgba(255, 255, 255, .5); padding-left: 16px; position: relative; }
.gsi-careers .cr-role li::before { content: '—'; position: absolute; left: 0; color: rgba(27, 126, 143, .6); }
.gsi-careers .cr-role .contact { display: inline-block; margin-top: 16px; font-size: 12px; letter-spacing: .03em; color: var(--gsi-teal); }
.gsi-careers .cr-role .contact:hover { text-decoration: underline; }
/* ----------------------------------------------------------------------------
CAREERS — Benefits
---------------------------------------------------------------------------- */
.gsi-careers .cr-benefits { background: var(--gsi-dark); padding: 15vh 44px; }
.gsi-careers .cr-benefits-head { max-width: 800px; margin: 0 auto 8vh; }
.gsi-careers .cr-benefits-head h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(32px, 4.4vw, 48px); line-height: 1.1; margin: 16px 0; }
.gsi-careers .cr-benefits-head p { font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, .6); }
.gsi-careers .cr-benefits-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: rgba(255, 255, 255, .06); }
@media (max-width: 820px) { .gsi-careers .cr-benefits-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .gsi-careers .cr-benefits-grid { grid-template-columns: 1fr; } }
.gsi-careers .cr-tile { background: var(--gsi-dark); padding: 30px 28px 34px; }
.gsi-careers .cr-tile h4 { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 12px; }
.gsi-careers .cr-tile p { font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, .58); }
/* ----------------------------------------------------------------------------
CAREERS — ESOP Spotlight (deep-dark band with a restrained teal-glow accent;
teal is accent-only per CLAUDE.md — no full teal section fills)
---------------------------------------------------------------------------- */
.gsi-careers .cr-esop { position: relative; background: var(--gsi-deep); padding: 12vh 44px; overflow: hidden; }
.gsi-careers .cr-esop::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(27, 126, 143, .16), rgba(13, 27, 36, 0) 55%); }
.gsi-careers .cr-esop-in { position: relative; z-index: 1; max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
@media (max-width: 860px) { .gsi-careers .cr-esop-in { grid-template-columns: 1fr; gap: 40px; } }
.gsi-careers .cr-esop-copy .gsi-lab { color: var(--gsi-teal); }
.gsi-careers .cr-esop-copy h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-style: italic; font-size: clamp(32px, 3.6vw, 50px); margin: 16px 0 22px; color: #fff; }
.gsi-careers .cr-esop-copy p { font-size: 15px; line-height: 1.9; color: rgba(255, 255, 255, .7); margin-bottom: 1.1em; }
.gsi-careers .cr-esop-copy p:last-child { color: rgba(255, 255, 255, .55); margin-bottom: 0; }
.gsi-careers .cr-esop-row { padding: 18px 0 18px 20px; border-left: 2px solid var(--gsi-teal); margin-bottom: 14px; }
.gsi-careers .cr-esop-row:last-child { margin-bottom: 0; }
.gsi-careers .cr-esop-row strong { display: block; font-size: 14px; color: #fff; margin-bottom: 4px; }
.gsi-careers .cr-esop-row span { font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, .6); }
/* ----------------------------------------------------------------------------
CONTACT — Form + Info
---------------------------------------------------------------------------- */
.gsi-contact .ct-form-section { background: var(--gsi-dark); padding: 10vh 44px; }
.gsi-contact .ct-form-head { max-width: 640px; margin: 0 auto 7vh; text-align: center; }
.gsi-contact .ct-form-head h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(32px, 4.6vw, 54px); line-height: 1.1; margin: 16px 0 18px; }
.gsi-contact .ct-form-head p { font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, .58); }
.gsi-contact .ct-form-in { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 2fr 3fr; gap: 80px; }
@media (max-width: 900px) { .gsi-contact .ct-form-in { grid-template-columns: 1fr; gap: 50px; } }
.gsi-contact .ct-info-item { border-top: 1px solid rgba(27, 126, 143, .3); padding-top: 26px; margin-bottom: 32px; }
.gsi-contact .ct-info-item:last-child { margin-bottom: 0; }
.gsi-contact .ct-info-item .lab { display: block; font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gsi-teal); margin-bottom: 12px; }
.gsi-contact .ct-info-item .val { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 28px; line-height: 1.3; color: #fff; }
.gsi-contact .ct-info-item a { display: inline-block; margin-top: 14px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gsi-teal); }
.gsi-contact .ct-info-item a:hover { text-decoration: underline; }
.gsi-contact .ct-field { margin-bottom: 22px; }
.gsi-contact .ct-field label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-bottom: 10px; }
.gsi-contact .ct-field input, .gsi-contact .ct-field textarea {
display: block; width: 100%; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .15); color: #fff;
font-family: 'Inter', system-ui, sans-serif; font-size: 14px; padding: 14px 16px; transition: border-color .3s, background .3s;
}
.gsi-contact .ct-field input:focus, .gsi-contact .ct-field textarea:focus { outline: none; border-color: var(--gsi-teal); background: rgba(255, 255, 255, .09); }
.gsi-contact .ct-field textarea { resize: vertical; min-height: 120px; }
/* iOS Safari auto-zooms the page when focusing an input with font-size < 16px.
Bump to 16px on phones (also gives a taller, comfier ~50px field). */
@media (max-width: 767px) {
.gsi-contact .ct-field input, .gsi-contact .ct-field textarea { font-size: 16px; padding: 15px 16px; }
}
.gsi-contact .ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gsi-contact .ct-form-wrap button[type="submit"] { margin-top: 6px; cursor: pointer; background: var(--gsi-teal); font-family: inherit; }
.gsi-contact .ct-form-status { margin-top: 16px; font-size: 13px; color: rgba(255, 255, 255, .6); min-height: 1.4em; }
.gsi-contact .ct-form-status.is-success { color: #7fd8c9; }
.gsi-contact .ct-form-status.is-error { color: #e2836f; }
/* ----------------------------------------------------------------------------
CONTACT — Departments
---------------------------------------------------------------------------- */
.gsi-contact .ct-dept { background: var(--gsi-deep); padding: 13vh 44px; }
.gsi-contact .ct-dept-head { max-width: 800px; margin: 0 auto 6vh; }
.gsi-contact .ct-dept-head h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; margin: 14px 0 12px; }
.gsi-contact .ct-dept-head p { font-size: 14px; line-height: 1.85; color: rgba(255, 255, 255, .55); }
.gsi-contact .ct-dept-grid { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: rgba(255, 255, 255, .06); }
@media (max-width: 760px) { .gsi-contact .ct-dept-grid { grid-template-columns: 1fr; } }
.gsi-contact .ct-dept-card { background: var(--gsi-deep); padding: 44px 42px 48px; border-left: 2px solid var(--gsi-teal); }
.gsi-contact .ct-dept-card h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 30px; color: #fff; margin: 14px 0 16px; }
.gsi-contact .ct-dept-card p { font-size: 14px; line-height: 1.9; color: rgba(255, 255, 255, .58); margin-bottom: 20px; }
.gsi-contact .ct-dept-card a { font-size: 13px; color: var(--gsi-teal); }
.gsi-contact .ct-dept-card a:hover { text-decoration: underline; }
/* ----------------------------------------------------------------------------
CONTACT — Find Us
---------------------------------------------------------------------------- */
.gsi-contact .ct-find { background: var(--gsi-dark); display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .gsi-contact .ct-find { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .gsi-contact .ct-find { grid-template-columns: 1fr; } }
.gsi-contact .ct-find-item { padding: 56px 36px; border-left: 1px solid rgba(255, 255, 255, .08); }
.gsi-contact .ct-find-item:first-child { border-left: none; }
@media (max-width: 900px) { .gsi-contact .ct-find-item:nth-child(2n+1) { border-left: none; } }
@media (max-width: 540px) {
.gsi-contact .ct-find-item { border-left: none; border-top: 1px solid rgba(255, 255, 255, .08); }
.gsi-contact .ct-find-item:first-child { border-top: none; }
}
.gsi-contact .ct-find-item h4 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 24px; color: #fff; margin: 14px 0 12px; }
.gsi-contact .ct-find-item p { font-size: 13px; line-height: 1.8; color: rgba(255, 255, 255, .6); }
.gsi-contact .ct-find-item a { color: var(--gsi-teal); }
.gsi-contact .ct-find-item a:hover { text-decoration: underline; }
/* ----------------------------------------------------------------------------
REDUCED MOTION
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.gsi-about *, .gsi-careers *, .gsi-contact * { transition: none !important; animation: none !important; }
.gsi-about .line > span, .gsi-careers .line > span, .gsi-contact .line > span { transform: none !important; }
}
/* ============================================================================
SERVICES SUITE — Services hub / Glazing / Specialty / Facades / Design Assist
(bespoke spine templates — phase B2)
template-spine-services.php / -glazing.php / -specialty.php / -facades.php /
-design-assist.php. Each wraps its content in its own scope (`.gsi-services`,
`.gsi-svc-glazing`, `.gsi-specialty`, `.gsi-facades`, `.gsi-design-assist` —
Divi header/footer sit outside it), collision-free with every other spine
scope. The glazing wrapper is deliberately named `.gsi-svc-glazing` (not
`.gsi-glazing-page`) so it never collides with the site-wide `.gsi-glazing-*`
flip-card classes (style.css) used inside it.
Like About/Careers/Contact, each wrapper does its own local reset (not
`.gsi-spine`, so that reset doesn't reach it) and forces headings white by
default (Divi's global h1..h6{color:#333} otherwise wins). Shared atoms
(.gsi-btn, .gsi-lab, [data-reveal], .d1-.d4, .gsi-progress, .gsi-grain, the
motion engine hooks, .gsi-archive-cta/.gsi-cta-* + the #cta restore-rules)
are reused verbatim from above.
============================================================================ */
.gsi-services, .gsi-services *,
.gsi-svc-glazing, .gsi-svc-glazing *,
.gsi-specialty, .gsi-specialty *,
.gsi-facades, .gsi-facades *,
.gsi-design-assist, .gsi-design-assist * { margin: 0; padding: 0; box-sizing: border-box; }
.gsi-services, .gsi-svc-glazing, .gsi-specialty, .gsi-facades, .gsi-design-assist {
font-family: 'Inter', system-ui, sans-serif;
color: #fff;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
.gsi-services h1, .gsi-services h2, .gsi-services h3, .gsi-services h4, .gsi-services h5, .gsi-services h6,
.gsi-svc-glazing h1, .gsi-svc-glazing h2, .gsi-svc-glazing h3, .gsi-svc-glazing h4, .gsi-svc-glazing h5, .gsi-svc-glazing h6,
.gsi-specialty h1, .gsi-specialty h2, .gsi-specialty h3, .gsi-specialty h4, .gsi-specialty h5, .gsi-specialty h6,
.gsi-facades h1, .gsi-facades h2, .gsi-facades h3, .gsi-facades h4, .gsi-facades h5, .gsi-facades h6,
.gsi-design-assist h1, .gsi-design-assist h2, .gsi-design-assist h3, .gsi-design-assist h4, .gsi-design-assist h5, .gsi-design-assist h6 { color: #fff; }
.gsi-services p, .gsi-svc-glazing p, .gsi-specialty p, .gsi-facades p, .gsi-design-assist p { color: inherit; }
.gsi-services a, .gsi-svc-glazing a, .gsi-specialty a, .gsi-facades a, .gsi-design-assist a { color: inherit; text-decoration: none; }
.gsi-services img, .gsi-svc-glazing img, .gsi-specialty img, .gsi-facades img, .gsi-design-assist img { display: block; max-width: 100%; }
.gsi-services ::selection, .gsi-svc-glazing ::selection, .gsi-specialty ::selection, .gsi-facades ::selection, .gsi-design-assist ::selection { background: var(--gsi-teal); color: #fff; }
/* Same latent box-model risk as About/Careers/Contact: .gsi-btn and this
wrapper's own `* {padding:0}` reset share (0,1,0) specificity, and this
block loads later in the file — restore explicitly. */
.gsi-services .gsi-btn, .gsi-svc-glazing .gsi-btn, .gsi-specialty .gsi-btn, .gsi-facades .gsi-btn, .gsi-design-assist .gsi-btn { padding: 16px 34px; border: 1px solid rgba(255, 255, 255, .55); }
/* ----------------------------------------------------------------------------
SHARED HERO ANATOMY (centered eyebrow/h1/rule/sub — same anatomy as
About/Careers/Contact, plus an accent rule under the title per the
gen_*.py hero sections for these five pages)
---------------------------------------------------------------------------- */
.gsi-services .sv-hero, .gsi-svc-glazing .gz-hero, .gsi-specialty .sp-hero, .gsi-facades .fc-hero, .gsi-design-assist .da-hero {
position: relative; height: 100vh; min-height: 640px; overflow: hidden; display: flex; align-items: flex-end;
}
.gsi-services .sv-hero-media, .gsi-svc-glazing .gz-hero-media, .gsi-specialty .sp-hero-media, .gsi-facades .fc-hero-media, .gsi-design-assist .da-hero-media {
position: absolute; inset: -10% 0; height: 120%; will-change: transform;
}
.gsi-services .sv-hero-media img, .gsi-svc-glazing .gz-hero-media img, .gsi-specialty .sp-hero-media img, .gsi-facades .fc-hero-media img, .gsi-design-assist .da-hero-media img {
width: 100%; height: 100%; object-fit: cover;
}
.gsi-services .sv-hero-scrim, .gsi-svc-glazing .gz-hero-scrim, .gsi-specialty .sp-hero-scrim, .gsi-facades .fc-hero-scrim, .gsi-design-assist .da-hero-scrim {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(8, 16, 24, .70) 0%, rgba(8, 16, 24, .30) 30%, rgba(8, 16, 24, .58) 62%, rgba(8, 16, 24, .93) 100%);
}
.gsi-services .sv-hero-inner, .gsi-svc-glazing .gz-hero-inner, .gsi-specialty .sp-hero-inner, .gsi-facades .fc-hero-inner, .gsi-design-assist .da-hero-inner {
position: relative; z-index: 2; width: 100%; max-width: 900px; padding: 0 44px 9vh; text-align: left;
}
.gsi-services .eyebrow, .gsi-svc-glazing .eyebrow, .gsi-specialty .eyebrow, .gsi-facades .eyebrow, .gsi-design-assist .eyebrow {
font-size: 12px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: rgba(255, 255, 255, .78);
display: flex; align-items: center; justify-content: flex-start; gap: 16px; margin-bottom: 24px; text-shadow: 0 1px 24px rgba(0, 0, 0, .45);
}
.gsi-services .eyebrow::before,
.gsi-svc-glazing .eyebrow::before,
.gsi-specialty .eyebrow::before,
.gsi-facades .eyebrow::before,
.gsi-design-assist .eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--gsi-teal); }
.gsi-services .sv-hero h1, .gsi-svc-glazing .gz-hero h1, .gsi-specialty .sp-hero h1, .gsi-facades .fc-hero h1, .gsi-design-assist .da-hero h1 {
font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-style: italic;
font-size: clamp(40px, 6.4vw, 84px); line-height: 1.04; color: #fff; text-shadow: 0 2px 44px rgba(0, 0, 0, .4);
}
.gsi-services .line, .gsi-svc-glazing .line, .gsi-specialty .line, .gsi-facades .line, .gsi-design-assist .line { display: block; overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
.gsi-services .line > span, .gsi-svc-glazing .line > span, .gsi-specialty .line > span, .gsi-facades .line > span, .gsi-design-assist .line > span { display: block; transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1); }
html.gsi-js .gsi-services .line > span, html.gsi-js .gsi-svc-glazing .line > span, html.gsi-js .gsi-specialty .line > span, html.gsi-js .gsi-facades .line > span, html.gsi-js .gsi-design-assist .line > span { transform: translateY(122%); }
html.gsi-js .gsi-services .revealed .line > span, html.gsi-js .gsi-svc-glazing .revealed .line > span, html.gsi-js .gsi-specialty .revealed .line > span, html.gsi-js .gsi-facades .revealed .line > span, html.gsi-js .gsi-design-assist .revealed .line > span { transform: translateY(0); }
.gsi-services .sv-hero-rule, .gsi-svc-glazing .gz-hero-rule, .gsi-specialty .sp-hero-rule, .gsi-facades .fc-hero-rule, .gsi-design-assist .da-hero-rule {
display: block; width: 56px; height: 1px; margin: 26px 0 0; background: rgba(27, 126, 143, .8);
transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) .55s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) .55s; transform-origin: left;
}
html.gsi-js .gsi-services .sv-hero-rule, html.gsi-js .gsi-svc-glazing .gz-hero-rule, html.gsi-js .gsi-specialty .sp-hero-rule, html.gsi-js .gsi-facades .fc-hero-rule, html.gsi-js .gsi-design-assist .da-hero-rule { opacity: 0; transform: scaleX(0); }
html.gsi-js .gsi-services .revealed .sv-hero-rule, html.gsi-js .gsi-svc-glazing .revealed .gz-hero-rule, html.gsi-js .gsi-specialty .revealed .sp-hero-rule, html.gsi-js .gsi-facades .revealed .fc-hero-rule, html.gsi-js .gsi-design-assist .revealed .da-hero-rule { opacity: 1; transform: scaleX(1); }
.gsi-services .sv-hero-sub, .gsi-svc-glazing .gz-hero-sub, .gsi-specialty .sp-hero-sub, .gsi-facades .fc-hero-sub, .gsi-design-assist .da-hero-sub {
margin-top: 26px; font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, .68); text-shadow: 0 1px 24px rgba(0, 0, 0, .45);
transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) .68s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) .68s;
}
html.gsi-js .gsi-services .sv-hero-sub, html.gsi-js .gsi-svc-glazing .gz-hero-sub, html.gsi-js .gsi-specialty .sp-hero-sub, html.gsi-js .gsi-facades .fc-hero-sub, html.gsi-js .gsi-design-assist .da-hero-sub { opacity: 0; transform: translateY(20px); }
html.gsi-js .gsi-services .revealed .sv-hero-sub, html.gsi-js .gsi-svc-glazing .revealed .gz-hero-sub, html.gsi-js .gsi-specialty .revealed .sp-hero-sub, html.gsi-js .gsi-facades .revealed .fc-hero-sub, html.gsi-js .gsi-design-assist .revealed .da-hero-sub { opacity: 1; transform: none; }
/* ----------------------------------------------------------------------------
SERVICES HUB — discipline rows
---------------------------------------------------------------------------- */
.gsi-services .sv-svc { background: var(--gsi-deep); padding: 8vw 44px; }
.gsi-services .sv-svc-alt { background: var(--gsi-dark); }
.gsi-services .sv-svc-in { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 3fr 2fr; gap: 60px; align-items: center; }
@media (max-width: 900px) { .gsi-services .sv-svc-in { grid-template-columns: 1fr; gap: 40px; } }
.gsi-services .sv-svc-copy .gsi-service-num { margin-bottom: 0; }
/* 20px top: the ghost numeral above is oldstyle Cormorant — the descenders of
"3"/"4" reach below the baseline and collided with this label at 8px. */
.gsi-services .sv-svc-copy .gsi-lab { display: block; margin: 20px 0 14px; }
.gsi-services .sv-svc-copy h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(30px, 3.6vw, 50px); line-height: 1.1; margin-bottom: 20px; max-width: 620px; }
.gsi-services .sv-svc-copy p { font-size: 15px; line-height: 1.9; color: rgba(255, 255, 255, .60); margin-bottom: 22px; max-width: 560px; }
.gsi-services .sv-svc-bullets { list-style: none; margin-bottom: 30px; }
.gsi-services .sv-svc-bullets li { font-size: 14px; line-height: 1.9; color: rgba(255, 255, 255, .58); }
.gsi-services .sv-svc-tags { padding-left: 6%; }
@media (max-width: 900px) { .gsi-services .sv-svc-tags { padding-left: 0; } }
.gsi-services .sv-tag { border-top: 1px solid rgba(27, 126, 143, .45); padding-top: 16px; margin-bottom: 22px; }
.gsi-services .sv-tag:last-child { margin-bottom: 0; }
.gsi-services .sv-tag .n { display: block; font-family: 'Inter', system-ui, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .3em; color: var(--gsi-teal); margin-bottom: 8px; }
.gsi-services .sv-tag .t { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; color: rgba(255, 255, 255, .88); }
/* ----------------------------------------------------------------------------
SERVICES HUB — Why GSI
---------------------------------------------------------------------------- */
.gsi-services .sv-why { background: var(--gsi-dark); padding: 7vw 44px; }
.gsi-services .sv-why-head { max-width: 720px; margin: 0 auto 8vh; text-align: center; }
.gsi-services .sv-why-head h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(32px, 4.4vw, 50px); line-height: 1.1; margin-top: 14px; }
.gsi-services .sv-why-list { max-width: 1000px; margin: 0 auto; }
.gsi-services .sv-why-row { display: grid; grid-template-columns: 90px 1fr; gap: 24px; border-top: 1px solid rgba(255, 255, 255, .08); padding: 36px 0; }
@media (max-width: 700px) { .gsi-services .sv-why-row { grid-template-columns: 56px 1fr; } }
.gsi-services .sv-why-row .num { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 60px; line-height: 1; color: rgba(27, 126, 143, .22); }
.gsi-services .sv-why-row h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 24px; margin-bottom: 12px; }
.gsi-services .sv-why-row p { font-size: 14px; line-height: 1.85; color: rgba(255, 255, 255, .58); max-width: 640px; }
/* ----------------------------------------------------------------------------
GLAZING — intro statement
---------------------------------------------------------------------------- */
.gsi-svc-glazing .gz-intro { background: var(--gsi-dark); padding: 9vw 44px; }
.gsi-svc-glazing .gz-intro-in { max-width: 880px; margin: 0 auto; text-align: center; }
.gsi-svc-glazing .gz-intro-in h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-style: italic; font-size: clamp(28px, 3.6vw, 48px); line-height: 1.2; }
.gsi-svc-glazing .gz-intro-in h2.teal { color: rgba(27, 126, 143, .9); margin-bottom: 26px; }
.gsi-svc-glazing .gz-intro-in .rule { display: block; width: 48px; height: 1px; background: rgba(27, 126, 143, .4); margin: 0 auto 26px; }
.gsi-svc-glazing .gz-intro-in p { max-width: 560px; margin: 0 auto; font-size: 14px; line-height: 1.85; color: rgba(255, 255, 255, .45); }
/* ----------------------------------------------------------------------------
GLAZING — system capabilities (flip card grid CSS itself is global,
defined site-wide in style.css; only the section head is styled here)
---------------------------------------------------------------------------- */
.gsi-svc-glazing .gz-caps { background: var(--gsi-deep); padding: 8vw 44px; }
.gsi-svc-glazing .gz-caps-head { max-width: 720px; margin: 0 auto 7vh; text-align: center; }
.gsi-svc-glazing .gz-caps-head h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.1; margin-top: 16px; }
.gsi-svc-glazing .gz-caps-head p { font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, .55); margin-top: 18px; }
.gsi-svc-glazing .gsi-glazing-grid { max-width: 1280px; margin: 0 auto; }
/* ----------------------------------------------------------------------------
GLAZING — glass solutions
---------------------------------------------------------------------------- */
.gsi-svc-glazing .gz-solutions { background: var(--gsi-dark); display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .gsi-svc-glazing .gz-solutions { grid-template-columns: 1fr; } }
.gsi-svc-glazing .gz-sol-left, .gsi-svc-glazing .gz-sol-right { padding: 7vw 6vw; }
.gsi-svc-glazing .gz-sol-right { background: rgba(255, 255, 255, .04); }
.gsi-svc-glazing .gz-sol-left h2, .gsi-svc-glazing .gz-sol-right h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; margin: 16px 0 22px; }
.gsi-svc-glazing .gz-sol-left h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; }
.gsi-svc-glazing .gz-sol-right h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; }
.gsi-svc-glazing .gz-sol-left p { font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, .60); margin-bottom: 28px; max-width: 460px; }
.gsi-svc-glazing .gz-sol-right ul { list-style: none; }
.gsi-svc-glazing .gz-sol-right li { font-size: 14px; line-height: 2; color: rgba(255, 255, 255, .60); padding-left: 18px; position: relative; }
.gsi-svc-glazing .gz-sol-right li::before { content: '—'; position: absolute; left: 0; color: rgba(27, 126, 143, .7); }
/* ----------------------------------------------------------------------------
GLAZING — glass types
---------------------------------------------------------------------------- */
.gsi-svc-glazing .gz-types { background: var(--gsi-deep); padding: 8vw 44px; }
.gsi-svc-glazing .gz-types-head { max-width: 720px; margin: 0 auto 7vh; text-align: center; }
.gsi-svc-glazing .gz-types-head .gsi-lab { display: block; }
.gsi-svc-glazing .gz-types-head h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.1; margin: 16px 0 18px; }
.gsi-svc-glazing .gz-types-head p { font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, .55); }
.gsi-svc-glazing .gz-types-grid { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 860px) { .gsi-svc-glazing .gz-types-grid { grid-template-columns: 1fr; } }
.gsi-svc-glazing .gz-type-card { background: rgba(255, 255, 255, .025); padding: 32px 32px 40px 28px; }
.gsi-svc-glazing .gz-type-card h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 24px; margin-bottom: 14px; }
.gsi-svc-glazing .gz-type-card p { font-size: 14px; line-height: 1.85; color: rgba(255, 255, 255, .58); }
.gsi-svc-glazing .gz-types-note { max-width: 720px; margin: 6vh auto 0; text-align: center; font-size: 15px; line-height: 1.85; font-style: italic; color: rgba(255, 255, 255, .42); }
/* ----------------------------------------------------------------------------
GLAZING — our approach
---------------------------------------------------------------------------- */
.gsi-svc-glazing .gz-approach { background: var(--gsi-dark); padding: 10vw 44px; }
.gsi-svc-glazing .gz-approach-in { max-width: 860px; margin: 0 auto; text-align: center; }
.gsi-svc-glazing .gz-approach-in .gsi-lab { display: block; }
.gsi-svc-glazing .gz-approach-in h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-style: italic; font-size: clamp(28px, 4vw, 50px); line-height: 1.15; margin: 20px 0 30px; }
.gsi-svc-glazing .gz-approach-in .rule { display: block; width: 60px; height: 1px; background: var(--gsi-teal); margin: 0 auto 30px; }
.gsi-svc-glazing .gz-approach-in p { font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, .62); max-width: 640px; margin: 0 auto; }
/* ----------------------------------------------------------------------------
SPECIALTY — intro
---------------------------------------------------------------------------- */
.gsi-specialty .sp-intro { background: var(--gsi-dark); padding: 10vw 44px; }
.gsi-specialty .sp-intro-in { max-width: 940px; margin: 0 auto; text-align: center; }
.gsi-specialty .sp-intro-in h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-style: italic; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.2; }
.gsi-specialty .sp-intro-in h2.teal { color: rgba(27, 126, 143, .9); margin-bottom: 30px; }
.gsi-specialty .sp-intro-in .rule { display: block; width: 48px; height: 1px; background: rgba(27, 126, 143, .4); margin: 0 auto 26px; }
.gsi-specialty .sp-intro-in p { max-width: 600px; margin: 0 auto 40px; font-size: 15px; line-height: 1.9; color: rgba(255, 255, 255, .5); }
.gsi-specialty .sp-systems { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; letter-spacing: .02em; line-height: 2.2; color: rgba(27, 126, 143, .75); max-width: 780px; }
/* ----------------------------------------------------------------------------
SPECIALTY — glass types (6 cards)
---------------------------------------------------------------------------- */
.gsi-specialty .sp-types { background: var(--gsi-deep); padding: 8vw 44px; }
.gsi-specialty .sp-types-head { max-width: 720px; margin: 0 auto 7vh; text-align: center; }
.gsi-specialty .sp-types-head .gsi-lab { display: block; }
.gsi-specialty .sp-types-head h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.1; margin: 16px 0 18px; }
.gsi-specialty .sp-types-head p { font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, .5); }
.gsi-specialty .sp-types-grid { max-width: 1300px; margin: 0 auto 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .gsi-specialty .sp-types-grid { grid-template-columns: 1fr; } }
.gsi-specialty .sp-card { background: rgba(255, 255, 255, .03); border-left: 2px solid var(--gsi-teal); padding: 32px 28px 36px; }
.gsi-specialty .sp-card .num { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(27, 126, 143, .7); margin-bottom: 8px; }
.gsi-specialty .sp-card h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 21px; margin-bottom: 12px; }
.gsi-specialty .sp-card .desc { font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, .6); margin-bottom: 12px; }
.gsi-specialty .sp-card ul { list-style: none; }
.gsi-specialty .sp-card li { font-size: 13px; line-height: 1.9; color: rgba(255, 255, 255, .45); }
/* ----------------------------------------------------------------------------
SPECIALTY — engineering & collaboration
---------------------------------------------------------------------------- */
.gsi-specialty .sp-collab { background: var(--gsi-dark); display: grid; grid-template-columns: 3fr 2fr; }
@media (max-width: 900px) { .gsi-specialty .sp-collab { grid-template-columns: 1fr; } }
.gsi-specialty .sp-collab-left { padding: 7vw 6vw; }
.gsi-specialty .sp-collab-right { padding: 7vw 5vw; background: rgba(255, 255, 255, .04); }
.gsi-specialty .sp-collab-left h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; margin: 16px 0 24px; }
.gsi-specialty .sp-collab-left p { font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, .60); max-width: 480px; }
.gsi-specialty .sp-pillar { border-left: 2px solid var(--gsi-teal); padding-left: 20px; margin-bottom: 30px; }
.gsi-specialty .sp-pillar:last-child { margin-bottom: 0; }
.gsi-specialty .sp-pillar strong { display: block; font-size: 13px; letter-spacing: .04em; color: #fff; margin-bottom: 8px; font-weight: 600; }
.gsi-specialty .sp-pillar p { font-size: 14px; line-height: 1.85; color: rgba(255, 255, 255, .58); }
/* ----------------------------------------------------------------------------
SPECIALTY — custom solutions
---------------------------------------------------------------------------- */
.gsi-specialty .sp-custom { background: var(--gsi-deep); display: grid; grid-template-columns: 3fr 2fr; padding: 8vw 44px; gap: 60px; }
@media (max-width: 900px) { .gsi-specialty .sp-custom { grid-template-columns: 1fr; gap: 40px; } }
.gsi-specialty .sp-custom-left h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-style: italic; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.1; margin: 16px 0 24px; }
.gsi-specialty .sp-custom-left p { font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, .6); max-width: 540px; }
.gsi-specialty .sp-custom-right { border-left: 2px solid rgba(255, 255, 255, .15); padding-left: 32px; }
.gsi-specialty .sp-custom-right .gsi-lab { display: block; color: rgba(255, 255, 255, .3); margin-bottom: 20px; }
.gsi-specialty .sp-custom-right p { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 22px; line-height: 2; color: rgba(255, 255, 255, .55); }
/* ----------------------------------------------------------------------------
FACADES — intro
---------------------------------------------------------------------------- */
/* --gsi-deep (not --gsi-dark) so the intro reads as its own band — group-a
below is --gsi-dark, and matching backgrounds made the two sections merge. */
.gsi-facades .fc-intro { background: var(--gsi-deep); display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .gsi-facades .fc-intro { grid-template-columns: 1fr; } }
.gsi-facades .fc-intro-left, .gsi-facades .fc-intro-right { padding: 8vw 6vw; }
.gsi-facades .fc-intro-left h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-style: italic; font-size: clamp(30px, 3.6vw, 50px); line-height: 1.1; margin-top: 16px; }
.gsi-facades .fc-intro-right p { font-size: 15px; line-height: 1.9; color: rgba(255, 255, 255, .62); margin-bottom: 28px; max-width: 520px; }
.gsi-facades .fc-intro-right p.italic { font-style: italic; color: rgba(255, 255, 255, .45); }
.gsi-facades .fc-intro-right p.strip { font-family: 'Inter', system-ui, sans-serif; font-size: 12px; letter-spacing: .06em; line-height: 2.2; text-transform: uppercase; color: rgba(27, 126, 143, .75); margin-bottom: 0; }
/* ----------------------------------------------------------------------------
FACADES — material groups (metal panel / natural & composite)
---------------------------------------------------------------------------- */
.gsi-facades .fc-group-a { background: var(--gsi-dark); padding: 8vw 44px 6vw; }
.gsi-facades .fc-group-b { background: var(--gsi-deep); padding: 6vw 44px; }
.gsi-facades .fc-group-head { max-width: 800px; margin: 0 auto 6vh; }
.gsi-facades .fc-group-head h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.1; margin-top: 12px; }
.gsi-facades .fc-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .gsi-facades .fc-grid { grid-template-columns: 1fr; } }
.gsi-facades .fc-card { background: rgba(255, 255, 255, .025); padding: 32px 36px 40px 32px; }
.gsi-facades .fc-card h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 22px; line-height: 1.25; margin-bottom: 14px; }
.gsi-facades .fc-card .desc { font-size: 14px; line-height: 1.85; color: rgba(255, 255, 255, .58); margin-bottom: 16px; }
.gsi-facades .fc-card ul { list-style: none; }
.gsi-facades .fc-card li { font-size: 13px; line-height: 1.9; color: rgba(255, 255, 255, .5); }
/* ----------------------------------------------------------------------------
FACADES — beyond the catalog
---------------------------------------------------------------------------- */
.gsi-facades .fc-beyond { background: var(--gsi-dark); padding: 10vw 44px; }
.gsi-facades .fc-beyond-in { max-width: 860px; margin: 0 auto; text-align: center; }
.gsi-facades .fc-beyond-in .gsi-lab { display: block; }
.gsi-facades .fc-beyond-in h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-style: italic; font-size: clamp(28px, 4vw, 50px); line-height: 1.15; margin: 20px 0 30px; }
.gsi-facades .fc-beyond-in .rule { display: block; width: 60px; height: 1px; background: var(--gsi-teal); margin: 0 auto 30px; }
.gsi-facades .fc-beyond-in p { font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, .62); max-width: 660px; margin: 0 auto; }
/* ----------------------------------------------------------------------------
DESIGN ASSIST — what it means
---------------------------------------------------------------------------- */
.gsi-design-assist .da-what { background: var(--gsi-dark); display: grid; grid-template-columns: 3fr 2fr; }
@media (max-width: 900px) { .gsi-design-assist .da-what { grid-template-columns: 1fr; } }
.gsi-design-assist .da-what-left { padding: 8vw 6vw; }
.gsi-design-assist .da-what-right { padding: 8vw 5vw; display: flex; align-items: center; }
.gsi-design-assist .da-what-left h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; margin: 16px 0 24px; }
.gsi-design-assist .da-what-left p { font-size: 15px; line-height: 1.9; color: rgba(255, 255, 255, .62); margin-bottom: 20px; max-width: 520px; }
.gsi-design-assist .da-what-left p:last-child { margin-bottom: 0; color: rgba(255, 255, 255, .52); }
.gsi-design-assist .da-what-right p { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 22px; line-height: 1.6; color: rgba(255, 255, 255, .30); }
/* ----------------------------------------------------------------------------
DESIGN ASSIST — three pillars
---------------------------------------------------------------------------- */
.gsi-design-assist .da-pillars { background: var(--gsi-deep); padding: 8vw 44px; }
.gsi-design-assist .da-pillars-head { max-width: 780px; margin: 0 auto 7vh; text-align: center; }
.gsi-design-assist .da-pillars-head .gsi-lab { display: block; }
.gsi-design-assist .da-pillars-head h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(30px, 4vw, 46px); line-height: 1.1; margin-top: 16px; }
.gsi-design-assist .da-pillars-grid { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 860px) { .gsi-design-assist .da-pillars-grid { grid-template-columns: 1fr; } }
.gsi-design-assist .da-pillar { border-left: 2px solid var(--gsi-teal); padding-left: 26px; padding-top: 6px; }
.gsi-design-assist .da-pillar .num { display: block; font-size: 11px; font-weight: 600; letter-spacing: .18em; color: var(--gsi-teal); margin-bottom: 12px; }
.gsi-design-assist .da-pillar h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 24px; margin-bottom: 12px; }
.gsi-design-assist .da-pillar p { font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, .55); }
/* ----------------------------------------------------------------------------
DESIGN ASSIST — pull quote
---------------------------------------------------------------------------- */
.gsi-design-assist .da-quote { background: var(--gsi-dark); padding: 8vw 44px; }
.gsi-design-assist .da-quote-in { max-width: 820px; margin: 0 auto; text-align: center; }
.gsi-design-assist .da-quote-in .rule { display: block; width: 40px; height: 1px; background: var(--gsi-teal); margin: 0 auto 26px; }
.gsi-design-assist .da-quote-in h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-style: italic; font-size: clamp(26px, 3.4vw, 46px); line-height: 1.25; margin-bottom: 24px; }
.gsi-design-assist .da-quote-in .attr { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .4); }
/* ----------------------------------------------------------------------------
REDUCED MOTION
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.gsi-services *, .gsi-svc-glazing *, .gsi-specialty *, .gsi-facades *, .gsi-design-assist * { transition: none !important; animation: none !important; }
.gsi-services .line > span, .gsi-svc-glazing .line > span, .gsi-specialty .line > span, .gsi-facades .line > span, .gsi-design-assist .line > span { transform: none !important; }
}
/* ============================================================================
PARTNERS / TEAM (bespoke spine templates — phase B3)
template-spine-partners.php / template-spine-team.php. Each wraps its
content in its own scope (`.gsi-partners-page`, `.gsi-team-page` — the
`-page` suffix avoids colliding with the gsi-partners/gsi-team plugins'
own `.gsi-partner*`/`.gsi-team*` shortcode-rendered classes, which are
styled globally in style.css / gsi-team.css and reused verbatim here,
unmodified). Same local-reset + white-heading pattern as the other spine
wrappers; shared atoms (.gsi-btn, .gsi-lab, [data-reveal], .d1-.d4,
.gsi-progress, .gsi-grain, .gsi-archive-cta/.gsi-cta-* + the #cta
restore-rules) are reused verbatim from above.
============================================================================ */
.gsi-partners-page, .gsi-partners-page *,
.gsi-team-page, .gsi-team-page * { margin: 0; padding: 0; box-sizing: border-box; }
.gsi-partners-page, .gsi-team-page {
font-family: 'Inter', system-ui, sans-serif;
color: #fff;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
.gsi-partners-page h1, .gsi-partners-page h2, .gsi-partners-page h3, .gsi-partners-page h4, .gsi-partners-page h5, .gsi-partners-page h6,
.gsi-team-page h1, .gsi-team-page h2, .gsi-team-page h3, .gsi-team-page h4, .gsi-team-page h5, .gsi-team-page h6 { color: #fff; }
.gsi-partners-page p, .gsi-team-page p { color: inherit; }
.gsi-partners-page a, .gsi-team-page a { color: inherit; text-decoration: none; }
.gsi-partners-page img, .gsi-team-page img { display: block; max-width: 100%; }
.gsi-partners-page ::selection, .gsi-team-page ::selection { background: var(--gsi-teal); color: #fff; }
.gsi-partners-page .gsi-btn, .gsi-team-page .gsi-btn { padding: 16px 34px; border: 1px solid rgba(255, 255, 255, .55); }
/* Same latent box-model risk as .gsi-btn above, extended to the shortcode-
rendered markup: [gsi_partners]/[gsi_team] output real content (logo,
type label, name, description, link / role, bio, rule) whose spacing
comes entirely from margin/padding on globally-defined classes in
style.css and the gsi-team plugin's own gsi-team.css. Both share (0,1,0)
specificity with this wrapper's `* {margin:0;padding:0}` reset and load
earlier in the document, so without an explicit restore every card would
render with its text crammed edge-to-edge. Values below mirror the
currently-winning declarations for each class (style.css defines
.gsi-partner-card etc. twice — the later "Home strip, featured cards,
extended grid" block wins; restore that version, not the earlier one). */
.gsi-partners-page .gsi-partner-card { padding: 44px 40px 48px 42px; }
.gsi-partners-page .gsi-partner-card--extended { padding: 36px 32px 40px 32px; }
.gsi-partners-page .gsi-partner-logo { margin-bottom: 28px; }
.gsi-partners-page .gsi-partner-name { margin: 0 0 14px; }
.gsi-partners-page .gsi-partner-desc { margin: 0 0 28px; }
.gsi-partners-page .gsi-partner-link { margin-top: auto; }
@media (max-width: 767px) {
.gsi-partners-page .gsi-partner-card { padding: 32px 28px 36px; }
}
.gsi-team-page .gsi-team-front-bar { padding: 48px 18px 16px; }
.gsi-team-page .gsi-team-back { padding: 28px 24px; }
.gsi-team-page .gsi-team-role { margin-bottom: 5px; }
.gsi-team-page .gsi-team-rule { margin: 12px 0; }
@media (hover: none) {
.gsi-team-page .gsi-team-front-bar { padding-bottom: 44px; }
.gsi-team-page .gsi-team-learn-bar { padding: 9px 18px; }
}
/* ----------------------------------------------------------------------------
SHARED HERO ANATOMY (centered eyebrow/h1/sub — matches About/Careers/Contact)
---------------------------------------------------------------------------- */
.gsi-partners-page .pt-hero, .gsi-team-page .tm-hero {
position: relative; height: 100vh; min-height: 640px; overflow: hidden; display: flex; align-items: flex-end;
}
.gsi-partners-page .pt-hero-media, .gsi-team-page .tm-hero-media {
position: absolute; inset: -10% 0; height: 120%; will-change: transform; z-index: 0;
}
.gsi-partners-page .pt-hero-media img, .gsi-team-page .tm-hero-media img {
width: 100%; height: 100%; object-fit: cover; transform: scale(1.05);
}
.gsi-partners-page .pt-hero-scrim, .gsi-team-page .tm-hero-scrim {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(10, 21, 29, .55), rgba(10, 21, 29, .08) 32%, rgba(10, 21, 29, .24) 56%, rgba(10, 21, 29, .94) 100%);
}
.gsi-partners-page .pt-hero-inner, .gsi-team-page .tm-hero-inner {
position: relative; z-index: 2; width: 100%; padding: 0 44px 9vh; max-width: 1000px; text-align: left;
}
.gsi-partners-page .eyebrow, .gsi-team-page .eyebrow {
display: flex; align-items: center; justify-content: flex-start; gap: 18px;
font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
color: rgba(255, 255, 255, .82); margin-bottom: 26px; text-shadow: 0 1px 24px rgba(0, 0, 0, .45);
}
.gsi-partners-page .eyebrow::before,
.gsi-team-page .eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--gsi-teal); }
.gsi-partners-page .pt-hero h1, .gsi-team-page .tm-hero h1 {
font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-style: italic;
font-size: clamp(40px, 7.6vw, 90px); line-height: 1.03; color: #fff; text-shadow: 0 2px 44px rgba(0, 0, 0, .4);
}
.gsi-partners-page .line, .gsi-team-page .line { display: block; overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
.gsi-partners-page .line > span, .gsi-team-page .line > span { display: block; transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1); }
html.gsi-js .gsi-partners-page .line > span, html.gsi-js .gsi-team-page .line > span { transform: translateY(122%); }
html.gsi-js .gsi-partners-page .revealed .line > span, html.gsi-js .gsi-team-page .revealed .line > span { transform: translateY(0); }
.gsi-partners-page .pt-hero-sub, .gsi-team-page .tm-hero-sub {
margin: 28px 0 0; max-width: 560px; font-size: 16px; line-height: 1.85; color: rgba(255, 255, 255, .68);
text-shadow: 0 1px 24px rgba(0, 0, 0, .45);
transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) .5s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) .5s;
}
.gsi-partners-page .pt-hero-sub::before, .gsi-team-page .tm-hero-sub::before {
content: ''; display: block; width: 56px; height: 1px; background: rgba(27, 126, 143, .7); margin: 0 0 28px;
}
html.gsi-js .gsi-partners-page .pt-hero-sub, html.gsi-js .gsi-team-page .tm-hero-sub { opacity: 0; transform: translateY(20px); }
html.gsi-js .gsi-partners-page .revealed .pt-hero-sub, html.gsi-js .gsi-team-page .revealed .tm-hero-sub { opacity: 1; transform: none; }
/* ----------------------------------------------------------------------------
PARTNERS — Intro
---------------------------------------------------------------------------- */
.gsi-partners-page .pt-intro { background: var(--gsi-dark); padding: 9vw 44px; }
.gsi-partners-page .pt-intro-in { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
@media (max-width: 900px) { .gsi-partners-page .pt-intro-in { grid-template-columns: 1fr; gap: 36px; } }
.gsi-partners-page .pt-intro-head h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; margin-top: 16px; }
.gsi-partners-page .pt-intro-copy p { font-size: 15px; line-height: 1.9; color: rgba(255, 255, 255, .6); margin-bottom: 1.2em; }
.gsi-partners-page .pt-intro-copy p:last-child { margin-bottom: 0; }
/* ----------------------------------------------------------------------------
PARTNERS — Featured Partners
(card CSS itself is global, defined site-wide in style.css via the
gsi-partners plugin shortcode markup; only the section head is styled here)
---------------------------------------------------------------------------- */
.gsi-partners-page .pt-featured { background: var(--gsi-deep); padding: 9vw 44px; }
.gsi-partners-page .pt-featured-head { max-width: 820px; margin: 0 auto 6vh; }
.gsi-partners-page .pt-featured-head h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; margin-top: 14px; }
.gsi-partners-page .pt-featured-grid { max-width: 1400px; margin: 0 auto; }
/* ----------------------------------------------------------------------------
PARTNERS — Additional Partners (grid)
---------------------------------------------------------------------------- */
.gsi-partners-page .pt-grid { background: var(--gsi-dark); padding: 9vw 44px; }
.gsi-partners-page .pt-grid-head { max-width: 820px; margin: 0 auto 6vh; }
.gsi-partners-page .pt-grid-head h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; margin: 14px 0 16px; }
.gsi-partners-page .pt-grid-head p { font-size: 14px; line-height: 1.85; color: rgba(255, 255, 255, .55); max-width: 700px; }
.gsi-partners-page .pt-grid-grid { max-width: 1400px; margin: 0 auto; }
/* ----------------------------------------------------------------------------
TEAM — Team Grid
(flip-card CSS itself is global, defined in the gsi-team plugin's own
enqueued gsi-team.css; only the section head is styled here)
---------------------------------------------------------------------------- */
.gsi-team-page .tm-grid { background: var(--gsi-deep); padding: 9vw 44px; }
.gsi-team-page .tm-grid-head { max-width: 720px; margin: 0 auto 8vh; text-align: center; }
.gsi-team-page .tm-grid-head h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.1; margin-top: 16px; }
.gsi-team-page .tm-grid-cards { max-width: 1400px; margin: 0 auto; }
/* ----------------------------------------------------------------------------
REDUCED MOTION
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.gsi-partners-page *, .gsi-team-page * { transition: none !important; animation: none !important; }
.gsi-partners-page .line > span, .gsi-team-page .line > span { transform: none !important; }
}
/* ============================================================================
GALLERY PAGE WRAP (bespoke spine template — phase C1)
template-spine-gallery.php. Wraps the page's own hero/CTA in `.gsi-gallery-
page-wrap` (own local reset + white-heading pattern, same as every other
spine wrapper above). Deliberately NOT the same class as `.gsi-gallery-page`
— that's the [gsi_gallery] shortcode's own wrapper (styled above, in the
"GALLERY PAGE" block), reused unmodified here as the grid section's inner
content. Shared atoms (.gsi-btn, .gsi-lab, [data-reveal], .gsi-progress,
.gsi-grain, .gsi-archive-cta/.gsi-cta-* + the #cta restore-rules) are
reused verbatim from above.
============================================================================ */
.gsi-gallery-page-wrap, .gsi-gallery-page-wrap * { margin: 0; padding: 0; box-sizing: border-box; }
.gsi-gallery-page-wrap {
font-family: 'Inter', system-ui, sans-serif;
color: #fff;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
.gsi-gallery-page-wrap h1, .gsi-gallery-page-wrap h2, .gsi-gallery-page-wrap h3,
.gsi-gallery-page-wrap h4, .gsi-gallery-page-wrap h5, .gsi-gallery-page-wrap h6 { color: #fff; }
.gsi-gallery-page-wrap p { color: inherit; }
.gsi-gallery-page-wrap a { color: inherit; text-decoration: none; }
.gsi-gallery-page-wrap img { display: block; max-width: 100%; }
.gsi-gallery-page-wrap ::selection { background: var(--gsi-teal); color: #fff; }
.gsi-gallery-page-wrap .gsi-btn { padding: 16px 34px; border: 1px solid rgba(255, 255, 255, .55); }
/* ----------------------------------------------------------------------------
GALLERY — Hero (full-bleed parallax, clip-reveal title — same anatomy as
the Partners/Team hero above)
---------------------------------------------------------------------------- */
.gsi-gallery-page-wrap .gw-hero {
position: relative; height: 100vh; min-height: 640px; overflow: hidden; display: flex; align-items: flex-end;
}
.gsi-gallery-page-wrap .gw-hero-media {
position: absolute; inset: -10% 0; height: 120%; will-change: transform; z-index: 0;
}
.gsi-gallery-page-wrap .gw-hero-media img {
width: 100%; height: 100%; object-fit: cover; transform: scale(1.05);
}
.gsi-gallery-page-wrap .gw-hero-scrim {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(10, 21, 29, .55), rgba(10, 21, 29, .08) 32%, rgba(10, 21, 29, .24) 56%, rgba(10, 21, 29, .94) 100%);
}
.gsi-gallery-page-wrap .gw-hero-inner {
position: relative; z-index: 2; width: 100%; padding: 0 44px 9vh; max-width: 1000px; text-align: left;
}
.gsi-gallery-page-wrap .eyebrow {
display: flex; align-items: center; justify-content: flex-start; gap: 18px;
font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
color: rgba(255, 255, 255, .82); margin-bottom: 26px; text-shadow: 0 1px 24px rgba(0, 0, 0, .45);
}
.gsi-gallery-page-wrap .eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--gsi-teal); }
.gsi-gallery-page-wrap .gw-hero h1 {
font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-style: italic;
font-size: clamp(40px, 7.6vw, 90px); line-height: 1.03; color: #fff; text-shadow: 0 2px 44px rgba(0, 0, 0, .4);
}
.gsi-gallery-page-wrap .line { display: block; overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
.gsi-gallery-page-wrap .line > span { display: block; transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1); }
html.gsi-js .gsi-gallery-page-wrap .line > span { transform: translateY(122%); }
html.gsi-js .gsi-gallery-page-wrap .revealed .line > span { transform: translateY(0); }
.gsi-gallery-page-wrap .gw-hero-sub {
margin: 28px 0 0; max-width: 560px; font-size: 16px; line-height: 1.85; color: rgba(255, 255, 255, .68);
text-shadow: 0 1px 24px rgba(0, 0, 0, .45);
transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) .5s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) .5s;
}
.gsi-gallery-page-wrap .gw-hero-sub::before {
content: ''; display: block; width: 56px; height: 1px; background: rgba(27, 126, 143, .7); margin: 0 0 28px;
}
html.gsi-js .gsi-gallery-page-wrap .gw-hero-sub { opacity: 0; transform: translateY(20px); }
html.gsi-js .gsi-gallery-page-wrap .revealed .gw-hero-sub { opacity: 1; transform: none; }
/* ----------------------------------------------------------------------------
GALLERY — Grid section wrapper (dark #0A151D field; the shortcode's own
`.gsi-gallery-page` div — styled in the "GALLERY PAGE" block above — sits
inside `.gw-gallery-in` unmodified and supplies its own background/padding/
filter-bar/grid CSS). Per task brief, the grid itself is never wrapped in
[data-reveal] — it's too tall, and hiding it would delay the whole photo
archive behind a scroll-triggered fade. Only the head label/heading reveal.
---------------------------------------------------------------------------- */
.gsi-gallery-page-wrap .gw-gallery { background: #0A151D; padding: 9vw 44px 2vw; }
.gsi-gallery-page-wrap .gw-gallery-head { max-width: 1400px; margin: 0 auto 6vh; }
.gsi-gallery-page-wrap .gw-gallery-head h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; margin-top: 14px; }
.gsi-gallery-page-wrap .gw-gallery-in { max-width: 1400px; margin: 0 auto; }
/* [gsi_gallery] output has its own narrower max-width + left margin — override so
the filter bar and grid fill/center within the 1400 container (was left-shoved). */
.gsi-gallery-page-wrap .gw-gallery-in .gsi-filter-bar,
.gsi-gallery-page-wrap .gw-gallery-in .gsi-gallery-grid { max-width: none; width: 100%; margin-left: 0; margin-right: 0; }
/* ----------------------------------------------------------------------------
REDUCED MOTION
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.gsi-gallery-page-wrap * { transition: none !important; animation: none !important; }
.gsi-gallery-page-wrap .line > span, .gsi-gallery-page-wrap .gw-hero-sub { transform: none !important; opacity: 1 !important; }
}
/* ============================================================================
PRIVACY POLICY / LEGAL (bespoke spine template — phase C1)
template-spine-privacy.php. Compact, non-full-screen dark hero band (no
image — the page is text-first) + a narrow (max ~820px) centered policy
body with teal border-top dividers between sections. Same local-reset +
white-heading pattern as the other spine wrappers; legal body copy uses a
lighter grey (not pure white) for readability over long paragraphs. Shared
atoms (.gsi-lab, [data-reveal], .gsi-progress, .gsi-grain) reused verbatim.
============================================================================ */
.gsi-legal, .gsi-legal * { margin: 0; padding: 0; box-sizing: border-box; }
.gsi-legal {
font-family: 'Inter', system-ui, sans-serif;
color: #fff;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
.gsi-legal h1, .gsi-legal h2, .gsi-legal h3, .gsi-legal h4, .gsi-legal h5, .gsi-legal h6 { color: #fff; }
.gsi-legal p { color: inherit; }
.gsi-legal a { color: inherit; text-decoration: none; }
.gsi-legal img { display: block; max-width: 100%; }
.gsi-legal ::selection { background: var(--gsi-teal); color: #fff; }
/* ----------------------------------------------------------------------------
LEGAL — Compact hero band (NOT full 100vh; no image)
---------------------------------------------------------------------------- */
.gsi-legal .lg-hero {
background: var(--gsi-deep);
min-height: 50vh;
display: flex; align-items: center;
padding: 17vh 44px 8vh;
}
.gsi-legal .lg-hero-inner { max-width: 820px; margin: 0 auto; width: 100%; }
.gsi-legal .eyebrow {
display: flex; align-items: center; gap: 14px;
font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
color: rgba(255, 255, 255, .72); margin-bottom: 22px;
}
.gsi-legal .eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--gsi-teal); }
.gsi-legal .lg-hero h1 {
font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-style: italic;
font-size: clamp(36px, 6vw, 64px); line-height: 1.05; color: #fff;
}
.gsi-legal .line { display: block; overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
.gsi-legal .line > span { display: block; transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1); }
html.gsi-js .gsi-legal .line > span { transform: translateY(122%); }
html.gsi-js .gsi-legal .revealed .line > span { transform: translateY(0); }
.gsi-legal .lg-hero-date {
margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .35);
transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) .5s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) .5s;
}
html.gsi-js .gsi-legal .lg-hero-date { opacity: 0; transform: translateY(14px); }
html.gsi-js .gsi-legal .revealed .lg-hero-date { opacity: 1; transform: none; }
/* ----------------------------------------------------------------------------
LEGAL — Policy body (narrow centered column, teal border-top dividers)
---------------------------------------------------------------------------- */
.gsi-legal .lg-body { background: var(--gsi-dark); padding: 8vh 44px 14vh; }
.gsi-legal .lg-body-in { max-width: 820px; margin: 0 auto; }
.gsi-legal .lg-intro { font-size: 15px; line-height: 1.9; color: rgba(255, 255, 255, .62); margin-bottom: 8px; }
.gsi-legal .lg-sec { border-top: 1px solid rgba(27, 126, 143, .30); padding-top: 28px; margin-top: 40px; }
.gsi-legal .lg-sec h2 {
font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600;
font-size: clamp(22px, 2.6vw, 26px); line-height: 1.2; margin-bottom: 14px;
}
.gsi-legal .lg-sec p { font-size: 15px; line-height: 1.9; color: rgba(255, 255, 255, .62); margin-bottom: 1em; }
.gsi-legal .lg-sec p:last-child { margin-bottom: 0; }
.gsi-legal .lg-sec ul { margin: 0 0 1em 1.2em; padding: 0; }
.gsi-legal .lg-sec li { font-size: 15px; line-height: 1.9; color: rgba(255, 255, 255, .62); margin-bottom: .4em; list-style: disc; }
.gsi-legal .lg-sec strong { color: #fff; font-weight: 600; }
.gsi-legal .lg-sec a, .gsi-legal .lg-back a { color: var(--gsi-teal); text-decoration: underline; text-underline-offset: 3px; }
.gsi-legal .lg-sec a:hover, .gsi-legal .lg-back a:hover { color: #fff; }
.gsi-legal .lg-credits { list-style: none; margin: 8px 0 0; }
.gsi-legal .lg-credits li { list-style: none; margin-bottom: 22px; padding-left: 16px; border-left: 2px solid rgba(27, 126, 143, .45); }
.gsi-legal .lg-credits li:last-child { margin-bottom: 0; }
.gsi-legal .lg-credit-use { display: block; color: #fff; font-weight: 600; letter-spacing: .02em; margin-bottom: 4px; }
.gsi-legal .lg-back {
margin-top: 48px; font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
}
.gsi-legal .lg-back a { text-decoration: none; }
/* ----------------------------------------------------------------------------
REDUCED MOTION
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.gsi-legal * { transition: none !important; animation: none !important; }
.gsi-legal .line > span, .gsi-legal .lg-hero-date { transform: none !important; opacity: 1 !important; }
}
/* ============================================================================
EMPLOYEE STORE (bespoke spine template)
template-spine-employee-store.php. The unlocked page reuses the .gsi-legal
scope wholesale (compact .lg-hero band + narrow .lg-body); this block only
adds the full-height password gate (.es-gate) with a dark form treatment
matching the contact form, plus shop-button spacing. Wrapper is
`.gsi-legal.gsi-store`, so legal gutters/reduced-motion apply automatically.
---------------------------------------------------------------------------- */
/* Same latent box-model risk as About/Careers/Contact: the .gsi-legal * reset
out-orders the .gsi-btn atom, so padding/border must be re-asserted here
(this wrapper is the first .gsi-legal page to contain buttons). */
.gsi-store .gsi-btn { padding: 16px 34px; border: 1px solid rgba(255, 255, 255, .55); }
.gsi-store .gsi-btn.solid { border-color: var(--gsi-teal); }
.gsi-store .es-gate {
background: var(--gsi-deep);
min-height: 100vh;
min-height: 100svh;
display: flex; align-items: center;
padding: 17vh var(--gsi-gutter) 10vh;
}
.gsi-store .es-gate-inner { max-width: 460px; margin: 0 auto; width: 100%; }
.gsi-store .es-gate h1 {
font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-style: italic;
font-size: clamp(36px, 6vw, 58px); line-height: 1.05; color: #fff;
}
.gsi-store .es-gate-note { margin-top: 16px; font-size: 15px; line-height: 1.8; color: rgba(255, 255, 255, .62); }
.gsi-store .es-gate-error { margin-top: 16px; font-size: 14px; line-height: 1.6; color: #e2836f; }
.gsi-store .es-pass-form { margin-top: 30px; }
.gsi-store .es-pass-form label {
display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
color: rgba(255, 255, 255, .5); margin-bottom: 10px;
}
.gsi-store .es-pass-form input[type="password"] {
display: block; width: 100%; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .15); color: #fff;
font-family: 'Inter', system-ui, sans-serif; font-size: 14px; padding: 14px 16px; transition: border-color .3s, background .3s;
}
.gsi-store .es-pass-form input[type="password"]:focus { outline: none; border-color: var(--gsi-teal); background: rgba(255, 255, 255, .09); }
/* iOS Safari auto-zooms inputs with font-size < 16px — same fix as the contact form. */
@media (max-width: 767px) {
.gsi-store .es-pass-form input[type="password"] { font-size: 16px; padding: 15px 16px; }
}
.gsi-store .es-pass-form button[type="submit"] { margin-top: 18px; cursor: pointer; font-family: inherit; }
.gsi-store .es-gate-help { margin-top: 26px; font-size: 13px; color: rgba(255, 255, 255, .35); }
.gsi-store .es-gate-help a { color: var(--gsi-teal); text-decoration: underline; text-underline-offset: 3px; }
.gsi-store .es-gate-help a:hover { color: #fff; }
.gsi-store .es-shop .gsi-btn { margin-top: 18px; }
/* ═══════════════════════════════════════════════════════════════════════════
PROJECT ARCHIVE — Filter enhancements (H3)
Non-matches are removed from flow (not just faded), with a live result
count, an empty state, a Clear control, keyboard focus rings, and
aria-pressed toggles. Progressive enhancement: without JS every card shows.
═══════════════════════════════════════════════════════════════════════════ */
.gsi-arch .arch-card.is-filtered-out { display: none; }
.gsi-arch .arch-fbtn { -webkit-appearance: none; appearance: none; }
.gsi-arch .arch-fbtn:focus-visible { outline: 2px solid var(--gsi-teal); outline-offset: 3px; }
.gsi-arch .arch-fbtn[aria-pressed="true"] { color: #fff; border-color: var(--gsi-teal); background: rgba(27, 126, 143, .14); }
.gsi-arch .arch-clear {
margin-left: auto;
align-self: center;
background: transparent;
border: 0;
cursor: pointer;
color: rgba(255, 255, 255, .7);
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
text-decoration: underline;
text-underline-offset: 4px;
padding: 6px 4px;
}
.gsi-arch .arch-clear:hover { color: var(--gsi-teal); }
.gsi-arch .arch-clear:focus-visible { outline: 2px solid var(--gsi-teal); outline-offset: 3px; }
.gsi-arch .arch-clear[hidden] { display: none; }
.gsi-arch .arch-filter-status {
max-width: 1400px;
margin: 0 auto 5vh;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255, 255, 255, .4);
}
.gsi-arch .arch-filter-status:empty { display: none; }
.gsi-arch .arch-empty[hidden] { display: none; }
.gsi-arch .arch-link-clear {
background: transparent;
border: 0;
cursor: pointer;
color: var(--gsi-teal);
font: inherit;
text-decoration: underline;
text-underline-offset: 3px;
padding: 0;
}
.gsi-arch .arch-link-clear:hover { color: #fff; }
/* ═══════════════════════════════════════════════════════════════════════════
CONTACT FORM — inquiry-type select + progressive project fields (H5)
═══════════════════════════════════════════════════════════════════════════ */
.gsi-contact .ct-field select {
display: block; width: 100%;
background-color: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .15);
color: #fff;
font-family: 'Inter', system-ui, sans-serif; font-size: 14px;
padding: 14px 42px 14px 16px;
transition: border-color .3s, background-color .3s;
-webkit-appearance: none; appearance: none; border-radius: 0; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' fill-opacity='.5' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 16px center;
}
.gsi-contact .ct-field select:focus { outline: none; border-color: var(--gsi-teal); background-color: rgba(255, 255, 255, .09); }
.gsi-contact .ct-field select option { color: #111; }
.gsi-contact .ct-project-fields {
border: 0;
border-left: 2px solid rgba(27, 126, 143, .45);
margin: 0 0 22px; padding: 4px 0 4px 20px;
min-width: 0; /* reset UA fieldset min-width so it can shrink on mobile */
}
.gsi-contact .ct-project-fields[hidden] { display: none; }
.gsi-contact .ct-project-fields legend {
padding: 0; margin-bottom: 16px;
font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
color: rgba(255, 255, 255, .5);
}
.gsi-contact .ct-project-fields .ct-field:last-child { margin-bottom: 0; }
.gsi-contact .ct-opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: rgba(255, 255, 255, .32); }
/* ============================================================================
RESPONSIVE GUTTER (phones)
Every spine section/hero-inner hard-codes a 44px horizontal gutter, which is
never reduced on phones — leaving a cramped ~232px column at 320px. These
longhand overrides re-point the horizontal padding at the --gsi-gutter token
(44px on desktop, 22px ≤600px — see style.css :root). Left/right only, so the
vertical vh/vw rhythm and the intentional bottom gaps (e.g. .cs-gal-grid) are
untouched. Desktop is a no-op (token still 44px); this only bites on phones.
---------------------------------------------------------------------------- */
.gsi-spine .hero-inner, .gsi-spine .stats, .gsi-spine .caps, .gsi-spine .cov, .gsi-spine .feature-inner, .gsi-spine .cta,
.gsi-cs .cs-hero-inner, .gsi-cs .cs-sbar, .gsi-cs .cs-ov, .gsi-cs .cs-chal, .gsi-cs .cs-sol, .gsi-cs .cs-spec, .gsi-cs .cs-gal-head, .gsi-cs .cs-gal-grid, .gsi-cs .cs-cta,
.gsi-arch .arch-hero-inner, .gsi-arch .arch-grid,
.gsi-about .ab-hero-inner, .gsi-about .ab-mission, .gsi-about .ab-process, .gsi-about .ab-stats, .gsi-about .ab-values, .gsi-about .ab-faq,
.gsi-careers .cr-hero-inner, .gsi-careers .cr-intro, .gsi-careers .cr-roles, .gsi-careers .cr-benefits, .gsi-careers .cr-esop,
.gsi-contact .ct-hero-inner, .gsi-contact .ct-form-section, .gsi-contact .ct-dept,
.gsi-services .sv-hero-inner, .gsi-services .sv-svc, .gsi-services .sv-why,
.gsi-svc-glazing .gz-hero-inner, .gsi-svc-glazing .gz-intro, .gsi-svc-glazing .gz-caps, .gsi-svc-glazing .gz-types, .gsi-svc-glazing .gz-approach,
.gsi-specialty .sp-hero-inner, .gsi-specialty .sp-intro, .gsi-specialty .sp-types, .gsi-specialty .sp-custom,
.gsi-facades .fc-hero-inner, .gsi-facades .fc-group-a, .gsi-facades .fc-group-b, .gsi-facades .fc-beyond,
.gsi-design-assist .da-hero-inner, .gsi-design-assist .da-pillars, .gsi-design-assist .da-quote,
.gsi-partners-page .pt-hero-inner, .gsi-partners-page .pt-intro, .gsi-partners-page .pt-featured, .gsi-partners-page .pt-grid,
.gsi-team-page .tm-hero-inner, .gsi-team-page .tm-grid,
.gsi-gallery-page-wrap .gw-hero-inner, .gsi-gallery-page-wrap .gw-gallery,
.gsi-legal .lg-hero-inner, .gsi-legal .lg-hero, .gsi-legal .lg-body {
padding-left: var(--gsi-gutter);
padding-right: var(--gsi-gutter);
}
/* ============================================================================
DYNAMIC VIEWPORT HEROES
`height:100vh` ignores mobile Safari/Chrome's collapsing URL bar, so heroes
visibly resize/jump on scroll. `100svh` (small viewport height) is stable.
The `100vh` line stays as a fallback for browsers without svh support.
---------------------------------------------------------------------------- */
.gsi-spine .hero, .gsi-cs .cs-hero, .gsi-arch .arch-hero,
.gsi-about .ab-hero, .gsi-careers .cr-hero, .gsi-contact .ct-hero,
.gsi-services .sv-hero, .gsi-svc-glazing .gz-hero, .gsi-specialty .sp-hero, .gsi-facades .fc-hero, .gsi-design-assist .da-hero,
.gsi-partners-page .pt-hero, .gsi-team-page .tm-hero, .gsi-gallery-page-wrap .gw-hero {
height: 100vh;
height: 100svh;
}
/* A physically short screen (landscape phone) shouldn't be forced to a 640px
hero — relax the min-height so the fold isn't dominated by the hero. */
@media (max-height: 560px) and (orientation: landscape) {
.gsi-spine .hero, .gsi-cs .cs-hero, .gsi-arch .arch-hero,
.gsi-about .ab-hero, .gsi-careers .cr-hero, .gsi-contact .ct-hero,
.gsi-services .sv-hero, .gsi-svc-glazing .gz-hero, .gsi-specialty .sp-hero, .gsi-facades .fc-hero, .gsi-design-assist .da-hero,
.gsi-partners-page .pt-hero, .gsi-team-page .tm-hero, .gsi-gallery-page-wrap .gw-hero {
min-height: 480px;
}
}
/* ── Mobile (art-direction) CTA backgrounds ─────────────────────────────────
Templates set --gsi-bg (and optionally --gsi-bg-m) inline; phones ≤767px get
the variant via the var() fallback, so desktop-only slots need no special
casing. This file loads after style.css, so background-image here wins over
the `background:` shorthand on .gsi-archive-cta. */
.gsi-archive-cta, .gsi-cs .cs-cta { background-image: var(--gsi-bg); }
@media (max-width: 767px) {
.gsi-archive-cta, .gsi-cs .cs-cta { background-image: var(--gsi-bg-m, var(--gsi-bg)); }
}