/* =============================================================================
 * Grit Guide — Single Company page (/companies/{slug})
 * Repeatable, data-driven profile. Scoped entirely under body.gg-company so it
 * never touches the rest of the site. Chrome (header/footer) is the theme's.
 *
 * Class prefix: .ggm-  (Grit Guide company Microsite) — distinct from the
 * directory's .ggc- so the two modules never collide.
 *
 * Display font is the same self-hosted Zuume the directory uses; we point the
 * @font-face at ../companies/fonts so there is one copy of the files.
 * House rules applied: no sub-15px running copy on mobile; FAQ question titles
 * bumped up (desktop 24 / mobile 22); no em dashes in any copy.
 * ========================================================================== */

/* ---- Self-hosted display font (shared with companies/) ---------------------- */
@font-face {
	font-family: "Zuume";
	src: url("../companies/fonts/Zuume-Regular.otf") format("opentype"),
	     url("../companies/fonts/Zuume-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Zuume";
	src: url("../companies/fonts/Zuume-Bold.otf") format("opentype"),
	     url("../companies/fonts/Zuume-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---- Tokens + scope --------------------------------------------------------- */
body.gg-company {
	--ggm-navy: #18355E;
	--ggm-deep: #0E1E36;
	--ggm-deep2: #123363;
	--ggm-pink: #FF1894;
	--ggm-pink-d: #D40D78;
	--ggm-cyan: #0092D6;
	--ggm-cream: #F9F7F2;
	--ggm-border: #DCDBD4;
	--ggm-hair: #F0EEE8;
	--ggm-hair2: #D5D3CA;
	--ggm-grey: #5A5F63;
	--ggm-muted: #94989B;
	--ggm-disp: "Zuume", "Oswald", "Arial Narrow", sans-serif;
	--ggm-sans: Helvetica, Arial, "Helvetica Neue", sans-serif;
}

/* Keep the page from ever sliding sideways. */
body.gg-company .gg-company-main { overflow-x: clip; }

body.gg-company .ggm-article,
body.gg-company .ggm-article * { box-sizing: border-box; }

body.gg-company .ggm-article {
	font-family: var(--ggm-sans);
	color: var(--ggm-navy);
	background: #FFFFFF;
}

/* Neutralize theme heading margins/scale inside our article. Wrapped in :where()
   so this reset stays low-specificity and our component rules (.ggm-h2, .ggm-h1,
   etc.) keep their own margins instead of being outranked and zeroed. */
body.gg-company .ggm-article :where(h1, h2, h3) { margin: 0; padding: 0; font-weight: 700; }

body.gg-company .ggm-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding-left: 36px;
	padding-right: 36px;
}

body.gg-company .ggm-eyebrow {
	font: 700 11.5px/1 var(--ggm-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ggm-pink);
	margin-bottom: 12px;
}
body.gg-company .ggm-h2 {
	font-family: var(--ggm-disp);
	text-transform: uppercase;
	font-size: 40px;
	line-height: 1;
	color: var(--ggm-navy);
	margin-bottom: 28px;
}
body.gg-company .ggm-section { max-width: 1400px; margin: 0 auto; padding: 34px 36px 8px 36px; scroll-margin-top: 90px; }

/* ---- Hero ------------------------------------------------------------------- */
body.gg-company .ggm-hero { background: var(--ggm-deep); position: relative; overflow: hidden; }
body.gg-company .ggm-hero-ghost {
	position: absolute; right: -20px; bottom: -20px; width: 44%; height: 82%;
	background-position: right bottom; background-size: contain; background-repeat: no-repeat;
	opacity: 0.10; pointer-events: none;
}
body.gg-company .ggm-hero-monobg {
	position: absolute; right: -14px; bottom: -52px;
	font-family: var(--ggm-disp); font-size: 290px; line-height: 1;
	color: rgba(255,255,255,0.045); pointer-events: none;
}
body.gg-company .ggm-hero-inner { max-width: 1400px; margin: 0 auto; padding: 26px 36px 40px 36px; position: relative; }
body.gg-company .ggm-crumb {
	font: 700 12px/1 var(--ggm-sans); letter-spacing: 0.14em; text-transform: uppercase;
	color: rgba(255,255,255,0.5); margin-bottom: 26px;
}
body.gg-company .ggm-crumb a { color: rgba(255,255,255,0.5); text-decoration: none; }
body.gg-company .ggm-crumb a:hover { color: var(--ggm-pink); }
body.gg-company .ggm-crumb .sep { margin: 0 8px; }
body.gg-company .ggm-crumb .cur { color: var(--ggm-pink); }

body.gg-company .ggm-hero-grid { display: grid; grid-template-columns: 1fr 300px; gap: 44px; align-items: center; }
body.gg-company .ggm-badge-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
body.gg-company .ggm-badge {
	display: inline-flex; align-items: center; gap: 7px;
	border: 1px solid rgba(255,24,148,0.55); color: var(--ggm-pink);
	font: 700 11.5px/1 var(--ggm-sans); letter-spacing: 0.16em; text-transform: uppercase;
	padding: 8px 13px; border-radius: 999px;
}
body.gg-company .ggm-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ggm-pink); }
body.gg-company .ggm-rank { font-family: var(--ggm-disp); font-size: 19px; line-height: 1; color: rgba(255,255,255,0.4); }

body.gg-company .ggm-h1 {
	font-family: var(--ggm-disp); text-transform: uppercase; font-size: 62px; line-height: 0.93;
	margin: 0 0 12px 0; color: #FFFFFF;
}
body.gg-company .ggm-linkrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 16px; }
body.gg-company .ggm-permalink { font: 700 13px/1 var(--ggm-sans); letter-spacing: 0.04em; color: var(--ggm-cyan); }
body.gg-company .ggm-webref {
	font: 700 13px/1 var(--ggm-sans); letter-spacing: 0.04em; color: rgba(255,255,255,0.65);
	text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 2px;
}
body.gg-company .ggm-webref:hover { color: var(--ggm-pink); }

body.gg-company .ggm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
body.gg-company .ggm-chip-solid { font: 700 11.5px/1 var(--ggm-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ggm-navy); background: #FFFFFF; padding: 6px 10px; }
body.gg-company .ggm-chip-out { font: 700 11.5px/1 var(--ggm-sans); letter-spacing: 0.12em; text-transform: uppercase; color: #FFFFFF; border: 1px solid rgba(255,255,255,0.35); padding: 5px 10px; }
body.gg-company .ggm-chip-hq { font: 700 11.5px/1 var(--ggm-sans); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.2); padding: 5px 10px; }

body.gg-company .ggm-lead { font: 400 17px/1.7 var(--ggm-sans); color: rgba(255,255,255,0.82); margin: 0; max-width: 620px; text-wrap: pretty; }
body.gg-company .ggm-cta {
	display: inline-flex; align-items: center; gap: 9px; margin-top: 24px;
	background: var(--ggm-pink); color: #FFFFFF; font: 700 13.5px/1 var(--ggm-sans);
	letter-spacing: 0.1em; text-transform: uppercase; padding: 16px 28px; border-radius: 999px;
	text-decoration: none; box-shadow: 0 10px 26px rgba(255,24,148,0.38);
}
body.gg-company .ggm-cta:hover { background: var(--ggm-pink-d); }

/* Hero logo panel treatments */
body.gg-company .ggm-herologo { box-shadow: 0 16px 44px rgba(0,0,0,0.4); }
body.gg-company .ggm-herologo.is-plain { height: 240px; background-position: center; background-size: contain; background-repeat: no-repeat; box-shadow: none; }
body.gg-company .ggm-herologo.is-full { height: 320px; background-position: center; background-size: cover; }
body.gg-company .ggm-herologo.is-plaque { height: 210px; position: relative; box-shadow: 0 16px 44px rgba(0,0,0,0.35); }
body.gg-company .ggm-herologo.is-plaque .inner { position: absolute; inset: 24px; background-position: center; background-size: contain; background-repeat: no-repeat; }
body.gg-company .ggm-herologo.is-mono {
	height: 210px; border: 1px solid rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center;
	font-family: var(--ggm-disp); font-size: 64px; box-shadow: none;
}

/* ---- Quick answer ----------------------------------------------------------- */
body.gg-company .ggm-answer { background: #FFFFFF; border-bottom: 1px solid var(--ggm-border); }
body.gg-company .ggm-answer .ggm-inner { padding-top: 28px; padding-bottom: 28px; }
body.gg-company #gg-answer { font: 400 19px/1.6 var(--ggm-sans); color: var(--ggm-navy); margin: 0 0 16px 0; max-width: 1000px; text-wrap: pretty; }
body.gg-company .ggm-qfacts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; }
body.gg-company .ggm-qfacts > div { display: flex; align-items: baseline; gap: 8px; }
body.gg-company .ggm-qfacts dt { font: 700 11px/1 var(--ggm-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ggm-muted); }
body.gg-company .ggm-qfacts dd { margin: 0; font: 700 15px/1.3 var(--ggm-sans); color: var(--ggm-navy); }

/* ---- Facts bar -------------------------------------------------------------- */
body.gg-company .ggm-facts-wrap { max-width: 1400px; margin: 0 auto; padding: 26px 36px 0 36px; }
body.gg-company .ggm-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border: 1px solid var(--ggm-border); margin: 0; }
body.gg-company .ggm-facts > div { padding: 18px 22px; border-right: 1px solid var(--ggm-hair); }
body.gg-company .ggm-facts > div:last-child { border-right: none; }
body.gg-company .ggm-facts dt { font: 700 11px/1 var(--ggm-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ggm-muted); margin-bottom: 7px; }
body.gg-company .ggm-facts dd { margin: 0; font: 700 15.5px/1.3 var(--ggm-sans); color: var(--ggm-navy); }
body.gg-company .ggm-facts a { color: var(--ggm-cyan); text-decoration: none; overflow-wrap: anywhere; }
body.gg-company .ggm-facts a:hover { color: var(--ggm-pink); }
body.gg-company .ggm-facts .ggm-weblist { display: flex; flex-direction: column; gap: 4px; }

/* ---- Sticky jump nav -------------------------------------------------------- */
body.gg-company .ggm-toc {
	position: sticky; top: 0; z-index: 45;
	background: rgba(255,255,255,0.94); backdrop-filter: saturate(1.5) blur(9px);
	border-top: 1px solid var(--ggm-border); border-bottom: 1px solid var(--ggm-border); margin-top: 26px;
}
body.gg-company .ggm-toc-inner { max-width: 1400px; margin: 0 auto; padding: 0 36px; display: flex; align-items: center; gap: 14px; }
body.gg-company .ggm-toc-label { font: 700 11px/1 var(--ggm-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ggm-muted); white-space: nowrap; flex-shrink: 0; }
body.gg-company .ggm-toc-links { display: flex; gap: 20px; overflow-x: auto; padding: 8px 0; }
body.gg-company .ggm-toc-links a {
	font: 700 13.5px/1 var(--ggm-sans); letter-spacing: 0.01em; color: var(--ggm-navy);
	text-decoration: none; white-space: nowrap; padding: 9px 2px 7px 2px; border-bottom: 2px solid transparent;
}
body.gg-company .ggm-toc-links a:hover { color: var(--ggm-pink); }
body.gg-company .ggm-toc-links a.is-active { color: var(--ggm-pink); border-bottom-color: var(--ggm-pink); }

/* ---- About ------------------------------------------------------------------ */
body.gg-company .ggm-about .ggm-story { max-width: 820px; }
body.gg-company .ggm-about .ggm-story p { font: 400 16.5px/1.7 var(--ggm-sans); color: var(--ggm-grey); margin: 0 0 16px 0; text-wrap: pretty; }
body.gg-company .ggm-why { background: var(--ggm-cream); border-left: 3px solid var(--ggm-pink); padding: 22px 26px; margin-top: 26px; }
body.gg-company .ggm-why p { font: 400 16px/1.65 var(--ggm-sans); color: var(--ggm-navy); margin: 0; max-width: 1000px; text-wrap: pretty; }

/* ---- Rails (products, gallery, related, styles) ----------------------------- */
body.gg-company .ggm-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-auto-rows: 1fr; gap: 18px; }
body.gg-company .ggm-prod {
	border: 1px solid var(--ggm-border); background: #FFFFFF; padding: 22px 24px; text-align: left; width: 100%;
	cursor: pointer; display: block; font-family: inherit;
	/* the card is a <button>; the theme forces uppercase on buttons, so reset it
	   (the .name heading below re-applies uppercase on purpose) */
	text-transform: none; letter-spacing: normal;
}
body.gg-company .ggm-prod:hover { border-color: var(--ggm-pink); }
body.gg-company .ggm-prod .name { font-family: var(--ggm-disp); text-transform: uppercase; font-size: 24px; line-height: 1; color: var(--ggm-navy); margin-bottom: 8px; }
body.gg-company .ggm-prod p { font: 400 15px/1.6 var(--ggm-sans); color: var(--ggm-grey); margin: 0; text-transform: none; text-wrap: pretty; }

/* ---- Product modal ---------------------------------------------------------- */
body.gg-company .ggm-modal { position: fixed; inset: 0; z-index: 80; background: rgba(14,30,54,0.72); display: none; align-items: center; justify-content: center; padding: 24px; }
body.gg-company .ggm-modal.is-open { display: flex; }
body.gg-company .ggm-modal-card { background: #FFFFFF; max-width: 620px; width: 100%; max-height: 88vh; overflow: auto; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
body.gg-company .ggm-modal-media { aspect-ratio: 16 / 9; background-color: var(--ggm-deep); background-size: cover; background-position: center; }
/* the fallback label only shows when there's no image; hide it over a photo */
body.gg-company .ggm-modal-media span { display: none; }
body.gg-company .ggm-modal-media.no-img { background: linear-gradient(150deg, var(--ggm-deep2), var(--ggm-deep)); display: flex; align-items: center; justify-content: center; padding: 0 30px; }
body.gg-company .ggm-modal-media.no-img span { display: block; font-family: var(--ggm-disp); text-transform: uppercase; font-size: 32px; line-height: 1; color: rgba(255,255,255,0.9); text-align: center; }
body.gg-company .ggm-modal-body { padding: 24px 30px 30px 30px; }
body.gg-company .ggm-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
body.gg-company .ggm-modal-head h3 { font-family: var(--ggm-disp); text-transform: uppercase; font-size: 30px; line-height: 1; color: var(--ggm-navy); }
body.gg-company .ggm-modal-close { flex: none; cursor: pointer; width: 36px; height: 36px; border: 1px solid var(--ggm-border); background: #FFFFFF; display: flex; align-items: center; justify-content: center; color: var(--ggm-navy); font: 700 17px/1 var(--ggm-sans); }
body.gg-company .ggm-modal-close:hover { border-color: var(--ggm-pink); color: var(--ggm-pink); }
body.gg-company .ggm-modal-body p { font: 400 16px/1.7 var(--ggm-sans); color: var(--ggm-grey); margin: 16px 0 0 0; text-wrap: pretty; }

/* ---- Gallery ---------------------------------------------------------------- */
body.gg-company .ggm-gal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
body.gg-company .ggm-gal-note { font: 400 13.5px/1.5 var(--ggm-sans); color: var(--ggm-muted); }
body.gg-company .ggm-gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
body.gg-company .ggm-fig { margin: 0; border: 1px solid var(--ggm-border); background: #FFFFFF; position: relative; transition: border-color 0.15s; }
body.gg-company .ggm-fig:hover { border-color: var(--ggm-pink); }
/* Whole image is the click target; cursor turns to the magnifying glass on hover */
body.gg-company .ggm-fig .ggm-fig-media { display: block; cursor: zoom-in; }
body.gg-company .ggm-fig img { display: block; width: 100%; height: 230px; object-fit: cover; }
body.gg-company .ggm-fig figcaption { padding: 10px 14px; font: 700 11px/1.4 var(--ggm-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ggm-muted); border-top: 1px solid var(--ggm-hair); }

/* ---- Lightbox (shared, pattern from the Harrill spotlight) ------------------- */
body.gg-company .ggm-lightbox {
	position: fixed; inset: 0; z-index: 400; background: rgba(6,12,22,0.94);
	display: flex; align-items: center; justify-content: center; padding: 32px;
	opacity: 0; visibility: hidden; transition: opacity 0.3s; cursor: zoom-out;
}
body.gg-company .ggm-lightbox.is-open { opacity: 1; visibility: visible; }
body.gg-company .ggm-lightbox img { max-width: 94vw; max-height: 88vh; box-shadow: 0 40px 100px -30px rgba(0,0,0,0.8); }
body.gg-company .ggm-lb-cap { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,0.82); font: 400 15px/1.5 var(--ggm-sans); padding: 0 24px; }
body.gg-company .ggm-lb-close { position: absolute; top: 20px; right: 26px; color: #FFFFFF; font: 400 34px/1 var(--ggm-sans); background: none; border: none; cursor: pointer; }
body.gg-company .ggm-lb-close:hover { color: var(--ggm-pink); }
body.gg-company .ggm-morewrap { margin-top: 18px; text-align: center; }
body.gg-company .ggm-more {
	display: inline-flex; align-items: center; gap: 8px; cursor: pointer; background: #FFFFFF;
	font: 700 11.5px/1 var(--ggm-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ggm-pink);
	border: 1px solid var(--ggm-pink); padding: 11px 20px; border-radius: 999px;
}
/* !important beats the theme's own button:hover (which forces a white bg and
   would leave white text on a white background). */
body.gg-company .ggm-more:hover { background: var(--ggm-pink) !important; color: #FFFFFF !important; border-color: var(--ggm-pink) !important; }
body.gg-company .ggm-hide { display: none !important; }

/* ---- Watch & Listen --------------------------------------------------------- */
body.gg-company .ggm-media-grid { display: grid; gap: 18px; align-items: stretch; }
body.gg-company .ggm-media-grid.has-pods { grid-template-columns: 1.6fr 1fr; }
body.gg-company .ggm-vids { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
body.gg-company .ggm-vid { border: 1px solid var(--ggm-border); background: #FFFFFF; text-decoration: none; display: flex; flex-direction: column; }
body.gg-company .ggm-vid:hover { border-color: var(--ggm-pink); }
body.gg-company .ggm-vid-thumb { aspect-ratio: 16 / 9; background-color: var(--ggm-deep); background-size: cover; background-position: center; position: relative; }
body.gg-company .ggm-vid-play { position: absolute; left: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%; background: var(--ggm-pink); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 15px; }
body.gg-company .ggm-vid-body { padding: 12px 16px 14px 16px; }
body.gg-company .ggm-vid-title { font-family: var(--ggm-disp); text-transform: uppercase; font-size: 20px; line-height: 1.05; color: var(--ggm-navy); }
body.gg-company .ggm-vid-tag { font: 700 11px/1 var(--ggm-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ggm-muted); margin-top: 6px; }
body.gg-company .ggm-pods { border: 1px solid var(--ggm-border); background: #FFFFFF; display: flex; flex-direction: column; height: 100%; }
body.gg-company .ggm-pods-head { padding: 14px 18px; border-bottom: 1px solid var(--ggm-hair); font: 700 11.5px/1 var(--ggm-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ggm-muted); }
body.gg-company .ggm-pod { display: flex; gap: 14px; align-items: baseline; padding: 13px 18px; border-bottom: 1px solid var(--ggm-hair); text-decoration: none; }
body.gg-company .ggm-pod:hover { background: var(--ggm-cream); }
body.gg-company .ggm-pod .n { font-family: var(--ggm-disp); font-size: 19px; line-height: 1; color: var(--ggm-pink); flex: none; }
body.gg-company .ggm-pod .t { font: 700 15px/1.4 var(--ggm-sans); color: var(--ggm-navy); }

/* ---- Key features ----------------------------------------------------------- */
body.gg-company .ggm-feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 32px; }
body.gg-company .ggm-feat { display: flex; gap: 14px; align-items: flex-start; border-bottom: 1px solid var(--ggm-hair); padding-bottom: 14px; }
body.gg-company .ggm-feat .tick { width: 22px; height: 22px; background: var(--ggm-pink); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font: 700 13.5px/1 var(--ggm-sans); flex: none; margin-top: 1px; }
body.gg-company .ggm-feat .txt { font: 400 15.5px/1.6 var(--ggm-sans); color: var(--ggm-grey); }
body.gg-company .ggm-feat .txt strong { color: var(--ggm-navy); }

/* ---- Styles offered --------------------------------------------------------- */
body.gg-company .ggm-styles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); grid-auto-rows: 1fr; gap: 14px; }
body.gg-company .ggm-type { border: 1px solid var(--ggm-border); background: #FFFFFF; padding: 16px 18px; }
body.gg-company .ggm-type:hover { border-color: var(--ggm-pink); }
body.gg-company .ggm-type .name { font-family: var(--ggm-disp); text-transform: uppercase; font-size: 22px; line-height: 1; color: var(--ggm-navy); margin-bottom: 6px; }
body.gg-company .ggm-type p { font: 400 14px/1.55 var(--ggm-sans); color: var(--ggm-grey); margin: 0; text-wrap: pretty; }

/* ---- Statement callout ------------------------------------------------------ */
body.gg-company .ggm-callout { background: linear-gradient(150deg, var(--ggm-deep2) 0%, var(--ggm-deep) 72%); margin-top: 34px; }
body.gg-company .ggm-callout-inner { max-width: 1400px; margin: 0 auto; padding: 44px 36px 46px 36px; display: grid; grid-template-columns: 1.25fr auto; gap: 50px; align-items: center; }
body.gg-company .ggm-callout h2 { font-family: var(--ggm-disp); text-transform: uppercase; font-size: 46px; line-height: 0.96; margin: 0 0 24px 0; color: #FFFFFF; max-width: 640px; }
body.gg-company .ggm-callout p { font: 400 16px/1.7 var(--ggm-sans); color: rgba(255,255,255,0.82); margin: 0; max-width: 600px; text-wrap: pretty; }
body.gg-company .ggm-callout-stat { text-align: right; border-right: 3px solid var(--ggm-pink); padding-right: 26px; }
body.gg-company .ggm-callout-stat .n { font-family: var(--ggm-disp); font-size: 110px; line-height: 0.9; color: var(--ggm-pink); }
body.gg-company .ggm-callout-stat .l { font: 700 12.5px/1.5 var(--ggm-sans); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-top: 8px; max-width: 220px; margin-left: auto; }

/* ---- Comparison ------------------------------------------------------------- */
body.gg-company .ggm-cmp-intro { font: 400 15.5px/1.6 var(--ggm-sans); color: var(--ggm-grey); margin: 0 0 18px 0; max-width: 760px; text-wrap: pretty; }
body.gg-company .ggm-twrap { border: 1px solid var(--ggm-border); overflow: hidden; }
body.gg-company .ggm-trow { display: grid; border-top: 1px solid var(--ggm-hair2); }
body.gg-company .ggm-trow.head { background: var(--ggm-navy); border-top: none; }
body.gg-company .ggm-trow.head .cell-label { font: 700 11.5px/1.3 var(--ggm-sans); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
body.gg-company .ggm-trow.head .cell { font-family: var(--ggm-disp); text-transform: uppercase; font-size: 17px; line-height: 1.05; color: #FFFFFF; border-left: 1px solid rgba(255,255,255,0.28); }
body.gg-company .ggm-trow .cell-label { padding: 13px 18px; font: 700 12.5px/1.45 var(--ggm-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ggm-navy); }
body.gg-company .ggm-trow.head .cell-label { padding: 14px 18px; }
body.gg-company .ggm-trow .cell { padding: 13px 16px; font: 400 14px/1.5 var(--ggm-sans); color: var(--ggm-grey); border-left: 1px solid var(--ggm-hair2); }
body.gg-company .ggm-trow.head .cell { padding: 14px 16px; }
body.gg-company .ggm-cmp-note { font: 400 13px/1.6 var(--ggm-sans); color: var(--ggm-muted); margin: 10px 0 0 0; max-width: 900px; }

/* ---- Pricing ---------------------------------------------------------------- */
body.gg-company .ggm-price-sub { font: 400 14px/1.5 var(--ggm-sans); color: var(--ggm-muted); margin: 0 0 20px 0; }
body.gg-company .ggm-price-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 40px; align-items: start; }
body.gg-company .ggm-price-card { border: 1px solid var(--ggm-border); background: var(--ggm-cream); padding: 26px 28px; }
body.gg-company .ggm-price-dollars { font-family: var(--ggm-disp); font-size: 64px; line-height: 0.9; letter-spacing: 0.02em; }
body.gg-company .ggm-price-dollars .on { color: var(--ggm-pink); }
body.gg-company .ggm-price-dollars .off { color: #D4D2C8; }
body.gg-company .ggm-price-label { font-family: var(--ggm-disp); text-transform: uppercase; font-size: 22px; line-height: 1; color: var(--ggm-navy); margin: 12px 0; }
body.gg-company .ggm-price-card p { font: 400 15px/1.65 var(--ggm-sans); color: var(--ggm-grey); margin: 0 0 16px 0; text-wrap: pretty; }
body.gg-company .ggm-price-legend { font: 700 11px/1.4 var(--ggm-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ggm-muted); border-top: 1px solid var(--ggm-border); padding-top: 12px; }
body.gg-company .ggm-price-lines { border: 1px solid var(--ggm-border); }
body.gg-company .ggm-price-lines .head { padding: 12px 20px; background: var(--ggm-navy); font: 700 11.5px/1 var(--ggm-sans); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
body.gg-company .ggm-price-line { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--ggm-hair); }
body.gg-company .ggm-price-line .name { font-family: var(--ggm-disp); text-transform: uppercase; font-size: 19px; line-height: 1; color: var(--ggm-navy); }
body.gg-company .ggm-price-line .note { font: 400 13.5px/1.4 var(--ggm-sans); color: var(--ggm-muted); margin-top: 4px; }
body.gg-company .ggm-price-line .dollars { font-family: var(--ggm-disp); font-size: 26px; line-height: 1; letter-spacing: 0.03em; }
body.gg-company .ggm-price-line .dollars .on { color: var(--ggm-pink); }
body.gg-company .ggm-price-line .dollars .off { color: #D4D2C8; }

/* ---- By the numbers --------------------------------------------------------- */
body.gg-company .ggm-stats { background: var(--ggm-deep); margin-top: 34px; }
body.gg-company .ggm-stats-inner { max-width: 1400px; margin: 0 auto; padding: 32px 36px 36px 36px; }
body.gg-company .ggm-stats .ggm-eyebrow { color: rgba(255,255,255,0.55); margin-bottom: 18px; }
body.gg-company .ggm-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
body.gg-company .ggm-stat { border-top: 2px solid rgba(255,24,148,0.6); padding-top: 12px; }
body.gg-company .ggm-stat .n { font-family: var(--ggm-disp); font-size: 46px; line-height: 1; color: var(--ggm-pink); }
body.gg-company .ggm-stat .l { font: 700 12px/1.5 var(--ggm-sans); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-top: 6px; }

/* ---- Buyer's guide ---------------------------------------------------------- */
body.gg-company .ggm-buyer { background: var(--ggm-cream); border-top: 1px solid var(--ggm-border); border-bottom: 1px solid var(--ggm-border); margin-top: 34px; }
body.gg-company .ggm-buyer-inner { max-width: 1400px; margin: 0 auto; padding: 34px 36px 38px 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
body.gg-company .ggm-buyer h2 { font-family: var(--ggm-disp); text-transform: uppercase; font-size: 36px; line-height: 1; margin: 0 0 28px 0; color: var(--ggm-navy); }
body.gg-company .ggm-buyer .grey { color: var(--ggm-muted); }
body.gg-company .ggm-choose { display: flex; flex-direction: column; gap: 12px; }
body.gg-company .ggm-choose > div { display: flex; gap: 12px; align-items: flex-start; }
body.gg-company .ggm-choose .sq { width: 10px; height: 10px; background: var(--ggm-pink); margin-top: 5px; flex: none; }
body.gg-company .ggm-choose .txt { font: 400 15.5px/1.6 var(--ggm-sans); color: var(--ggm-navy); }
body.gg-company .ggm-ask { display: flex; flex-direction: column; gap: 13px; }
body.gg-company .ggm-ask > div { display: flex; gap: 14px; align-items: baseline; }
body.gg-company .ggm-ask .n { font-family: var(--ggm-disp); font-size: 22px; line-height: 1; color: var(--ggm-pink); flex: none; width: 26px; }
body.gg-company .ggm-ask .txt { font: 400 15.5px/1.55 var(--ggm-sans); color: var(--ggm-navy); }

/* ---- Programs --------------------------------------------------------------- */
body.gg-company .ggm-program { background: linear-gradient(150deg, var(--ggm-deep2) 0%, var(--ggm-deep) 72%); border: 1px solid rgba(255,255,255,0.14); padding: 30px 34px; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; margin-bottom: 18px; }
body.gg-company .ggm-program .eyebrow { font: 700 11.5px/1 var(--ggm-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ggm-pink); margin-bottom: 10px; }
body.gg-company .ggm-program .name { font-family: var(--ggm-disp); text-transform: uppercase; font-size: 30px; line-height: 1; color: #FFFFFF; margin-bottom: 10px; }
body.gg-company .ggm-program p { font: 400 15.5px/1.65 var(--ggm-sans); color: rgba(255,255,255,0.82); margin: 0; max-width: 660px; text-wrap: pretty; }
body.gg-company .ggm-program-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
body.gg-company .ggm-program-cta a { display: inline-block; background: var(--ggm-pink); color: #FFFFFF; font: 700 12.5px/1 var(--ggm-sans); letter-spacing: 0.1em; text-transform: uppercase; padding: 13px 20px; border-radius: 999px; text-decoration: none; box-shadow: 0 6px 18px rgba(255,24,148,0.35); }
body.gg-company .ggm-program-cta a:hover { background: var(--ggm-pink-d); }
body.gg-company .ggm-program-cta .note { font: 400 12.5px/1 var(--ggm-sans); color: rgba(255,255,255,0.45); }

/* ---- FAQ (titles bumped per house rule) ------------------------------------- */
body.gg-company .ggm-faq-list { border: 1px solid var(--ggm-border); background: #FFFFFF; margin-top: 4px; }
body.gg-company .ggm-faq-item { border-bottom: 1px solid var(--ggm-hair); }
body.gg-company .ggm-faq-item:last-child { border-bottom: none; }
body.gg-company .ggm-faq-q {
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	padding: 16px 22px; cursor: pointer; background: #FFFFFF; width: 100%; text-align: left; font-family: inherit;
	border: none;
}
body.gg-company .ggm-faq-q:hover { background: var(--ggm-cream); }
body.gg-company .ggm-faq-q .q { font: 700 24px/1.3 var(--ggm-disp); text-transform: uppercase; letter-spacing: 0.01em; color: var(--ggm-navy); }
body.gg-company .ggm-faq-q .ico { font-family: var(--ggm-disp); font-size: 24px; line-height: 1; color: var(--ggm-pink); flex: none; }
body.gg-company .ggm-faq-a { display: none; padding: 0 22px 18px 22px; }
body.gg-company .ggm-faq-item.is-open .ggm-faq-a { display: block; }
body.gg-company .ggm-faq-a p { font: 400 15.5px/1.65 var(--ggm-sans); color: var(--ggm-grey); margin: 0; max-width: 860px; text-wrap: pretty; }

/* ---- Related ---------------------------------------------------------------- */
body.gg-company .ggm-rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
body.gg-company .ggm-rel { border: 1px solid var(--ggm-border); background: #FFFFFF; display: flex; flex-direction: column; text-decoration: none; }
body.gg-company .ggm-rel:hover { border-color: var(--ggm-pink); }
body.gg-company .ggm-rel-tile { height: 72px; border-bottom: 1px solid var(--ggm-hair); display: flex; align-items: center; justify-content: center; position: relative; }
body.gg-company .ggm-rel-tile .logo { position: absolute; inset: 10px; background-position: center; background-size: contain; background-repeat: no-repeat; }
body.gg-company .ggm-rel-tile .mono { font-family: var(--ggm-disp); font-size: 26px; line-height: 1; }
body.gg-company .ggm-rel-body { padding: 14px 18px 16px 18px; display: flex; flex-direction: column; gap: 5px; }
body.gg-company .ggm-rel-body .name { font-family: var(--ggm-disp); text-transform: uppercase; font-size: 21px; line-height: 1; color: var(--ggm-navy); }
body.gg-company .ggm-rel-body .chip { font: 700 11px/1 var(--ggm-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ggm-muted); }

/* ---- Claim CTA + disclosures ------------------------------------------------ */
body.gg-company .ggm-claim-wrap { max-width: 1400px; margin: 0 auto; padding: 26px 36px 50px 36px; }
body.gg-company .ggm-claim { background: var(--ggm-cream); border: 1px solid var(--ggm-border); padding: 28px 32px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
body.gg-company .ggm-claim .title { font-family: var(--ggm-disp); text-transform: uppercase; font-size: 26px; line-height: 1; color: var(--ggm-navy); margin-bottom: 6px; }
body.gg-company .ggm-claim p { font: 400 15.5px/1.5 var(--ggm-sans); color: var(--ggm-grey); margin: 0; }
body.gg-company .ggm-claim-btns { display: flex; flex-wrap: wrap; gap: 10px; }
body.gg-company .ggm-btn-pink { display: inline-block; background: var(--ggm-pink); color: #FFFFFF; font: 700 13.5px/1 var(--ggm-sans); letter-spacing: 0.1em; text-transform: uppercase; padding: 15px 26px; text-decoration: none; }
body.gg-company .ggm-btn-pink:hover { background: var(--ggm-pink-d); }
body.gg-company .ggm-btn-out { display: inline-block; background: #FFFFFF; color: var(--ggm-navy); border: 1.5px solid var(--ggm-navy); font: 700 13.5px/1 var(--ggm-sans); letter-spacing: 0.1em; text-transform: uppercase; padding: 14px 24px; text-decoration: none; }
body.gg-company .ggm-btn-out:hover { background: var(--ggm-cream); }
body.gg-company .ggm-disc-wrap { max-width: 1400px; margin: 0 auto; padding: 0 36px 40px 36px; }
body.gg-company .ggm-disc { border-top: 1px solid var(--ggm-border); padding-top: 18px; }
body.gg-company .ggm-disc .label { font: 700 11px/1 var(--ggm-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ggm-muted); margin-bottom: 8px; }
body.gg-company .ggm-disc p { font: 400 13px/1.7 var(--ggm-sans); color: var(--ggm-muted); margin: 0; max-width: 1000px; }

/* ---- Not found -------------------------------------------------------------- */
body.gg-company .ggm-404 { max-width: 1100px; margin: 0 auto; padding: 80px 36px 100px 36px; text-align: center; }
body.gg-company .ggm-404 h1 { font-family: var(--ggm-disp); text-transform: uppercase; font-size: 44px; margin: 0 0 14px 0; color: var(--ggm-navy); }
body.gg-company .ggm-404 p { font: 400 16px/1.6 var(--ggm-sans); color: var(--ggm-grey); margin: 0 0 26px 0; }

/* =============================================================================
 * Responsive
 * ========================================================================== */
@media (max-width: 880px) {
	body.gg-company .ggm-inner,
	body.gg-company .ggm-section,
	body.gg-company .ggm-hero-inner,
	body.gg-company .ggm-facts-wrap,
	body.gg-company .ggm-toc-inner,
	body.gg-company .ggm-callout-inner,
	body.gg-company .ggm-stats-inner,
	body.gg-company .ggm-buyer-inner,
	body.gg-company .ggm-claim-wrap,
	body.gg-company .ggm-disc-wrap { padding-left: 24px; padding-right: 24px; }

	body.gg-company .ggm-hero-grid,
	body.gg-company .ggm-callout-inner,
	body.gg-company .ggm-buyer-inner,
	body.gg-company .ggm-price-grid,
	body.gg-company .ggm-media-grid.has-pods { grid-template-columns: 1fr; }

	body.gg-company .ggm-rail { grid-template-columns: repeat(2, 1fr); }
	body.gg-company .ggm-gal-grid { grid-template-columns: repeat(2, 1fr); }
	body.gg-company .ggm-rel-grid { grid-template-columns: repeat(2, 1fr); }

	body.gg-company .ggm-h1 { font-size: 48px; }
	body.gg-company .ggm-h2 { font-size: 36px; }
	body.gg-company .ggm-buyer h2 { font-size: 34px; }
	body.gg-company .ggm-callout h2 { font-size: 34px; }
	body.gg-company .ggm-hero-monobg { font-size: 170px; }
	body.gg-company .ggm-callout-stat { text-align: left; border-right: none; border-left: 3px solid var(--ggm-pink); padding-right: 0; padding-left: 22px; }
	body.gg-company .ggm-callout-stat .l { margin-left: 0; }

	/* Comparison table -> per-attribute cards */
	body.gg-company .ggm-twrap { border: none; overflow: visible; }
	body.gg-company .ggm-trow { display: block; grid-template-columns: none !important; background: #FFFFFF !important; border: 1px solid #E1DFD7; margin-bottom: 14px; overflow: hidden; border-top: 1px solid #E1DFD7; }
	body.gg-company .ggm-trow.head { display: none; }
	body.gg-company .ggm-trow .cell-label { background: var(--ggm-navy); color: #FFFFFF; font-size: 13.5px; padding: 11px 16px; }
	body.gg-company .ggm-trow .cell { border-left: none; border-top: 1px solid var(--ggm-hair); padding: 11px 16px; }
	body.gg-company .ggm-trow .cell::before { content: attr(data-co) ": "; font-weight: 700; color: var(--ggm-navy); }
}

@media (max-width: 760px) {
	body.gg-company .ggm-inner,
	body.gg-company .ggm-section,
	body.gg-company .ggm-hero-inner,
	body.gg-company .ggm-facts-wrap,
	body.gg-company .ggm-toc-inner,
	body.gg-company .ggm-callout-inner,
	body.gg-company .ggm-stats-inner,
	body.gg-company .ggm-buyer-inner,
	body.gg-company .ggm-claim-wrap,
	body.gg-company .ggm-disc-wrap { padding-left: 16px; padding-right: 16px; }

	/* Card rails become horizontal swipe carousels with peek + pink cue */
	body.gg-company .ggm-rail,
	body.gg-company .ggm-gal-grid,
	body.gg-company .ggm-rel-grid,
	body.gg-company .ggm-styles-grid {
		display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory; gap: 14px;
		/* first card lines up with the section content (and the title's left edge);
		   only the right side bleeds off-screen for the carousel peek */
		margin: 0 -16px 0 0; padding: 2px 16px 14px 0;
		scrollbar-color: var(--ggm-pink) transparent;
	}
	body.gg-company .ggm-rail > *,
	body.gg-company .ggm-gal-grid > *,
	body.gg-company .ggm-rel-grid > * { flex: 0 0 84%; scroll-snap-align: start; }
	body.gg-company .ggm-styles-grid > * { flex: 0 0 60%; scroll-snap-align: start; }
	body.gg-company .ggm-rail::-webkit-scrollbar,
	body.gg-company .ggm-gal-grid::-webkit-scrollbar,
	body.gg-company .ggm-rel-grid::-webkit-scrollbar,
	body.gg-company .ggm-styles-grid::-webkit-scrollbar { height: 5px; }
	body.gg-company .ggm-rail::-webkit-scrollbar-thumb,
	body.gg-company .ggm-gal-grid::-webkit-scrollbar-thumb,
	body.gg-company .ggm-rel-grid::-webkit-scrollbar-thumb,
	body.gg-company .ggm-styles-grid::-webkit-scrollbar-thumb { background: var(--ggm-pink); border-radius: 3px; }

	/* Gallery head: note drops beneath the title, title holds one line */
	body.gg-company .ggm-gal-head { flex-direction: column; align-items: flex-start; gap: 6px; }
	body.gg-company .ggm-gal-head .ggm-h2 { white-space: nowrap; }

	/* Hero stacks; logo panel hidden on phone */
	body.gg-company .ggm-hero-grid { display: flex; flex-direction: column; gap: 22px; }
	body.gg-company .ggm-hero-logo-col { display: none; }

	/* Facts stack one per row so long URLs fit */
	body.gg-company .ggm-facts { grid-template-columns: 1fr; }
	body.gg-company .ggm-facts > div { border-right: none; border-bottom: 1px solid var(--ggm-hair); }

	body.gg-company .ggm-feat-grid { grid-template-columns: 1fr; }
	body.gg-company .ggm-vids { grid-template-columns: 1fr; }

	body.gg-company .ggm-h1 { font-size: 52px; }
	body.gg-company .ggm-callout h2 { font-size: 30px; }
	body.gg-company .ggm-callout-stat .n { font-size: 78px; }

	/* Hero ghost watermark: on desktop it sits bottom-right behind the logo panel,
	   but that panel is hidden on mobile and the mark fell off the bottom. Lift it
	   up into the hero so the brand watermark is actually visible. */
	body.gg-company .ggm-hero-ghost { top: 9%; bottom: auto; right: -6%; width: 78%; height: 48%; opacity: 0.13; }

	/* Mobile type floor: no readable text under 16px. */
	body.gg-company #gg-answer,
	body.gg-company .ggm-lead,
	body.gg-company .ggm-about .ggm-story p,
	body.gg-company .ggm-why p,
	body.gg-company .ggm-prod p,
	body.gg-company .ggm-type p,
	body.gg-company .ggm-feat .txt,
	body.gg-company .ggm-choose .txt,
	body.gg-company .ggm-ask .txt,
	body.gg-company .ggm-callout p,
	body.gg-company .ggm-program p,
	body.gg-company .ggm-faq-a p,
	body.gg-company .ggm-price-card p,
	body.gg-company .ggm-cmp-intro,
	body.gg-company .ggm-claim p,
	body.gg-company .ggm-gal-note,
	body.gg-company .ggm-price-sub,
	body.gg-company .ggm-price-line .note,
	body.gg-company .ggm-pod .t,
	body.gg-company .ggm-trow .cell,
	body.gg-company .ggm-cmp-note,
	body.gg-company .ggm-disc p,
	body.gg-company .ggm-facts dd,
	body.gg-company .ggm-qfacts dd,
	body.gg-company .ggm-permalink,
	body.gg-company .ggm-webref,
	body.gg-company .ggm-facts a,
	body.gg-company .ggm-program-cta .note { font-size: 16px; }

	/* Uppercase micro-labels also hit the 16px floor, with tighter tracking so they fit. */
	body.gg-company .ggm-eyebrow,
	body.gg-company .ggm-facts dt,
	body.gg-company .ggm-qfacts dt,
	body.gg-company .ggm-fig figcaption,
	body.gg-company .ggm-vid-tag,
	body.gg-company .ggm-pods-head,
	body.gg-company .ggm-price-legend,
	body.gg-company .ggm-stat .l,
	body.gg-company .ggm-trow .cell-label,
	body.gg-company .ggm-rel-body .chip,
	body.gg-company .ggm-disc .label,
	body.gg-company .ggm-program .eyebrow,
	body.gg-company .ggm-toc-label,
	body.gg-company .ggm-toc-links a,
	body.gg-company .ggm-chip-solid,
	body.gg-company .ggm-chip-out,
	body.gg-company .ggm-chip-hq { font-size: 16px; letter-spacing: 0.06em; }

	/* Breadcrumb stays a small nav label, not body text. */
	body.gg-company .ggm-crumb { font-size: 12px; }

	/* Hero: company name one word per line; more air below it and the blue link row. */
	body.gg-company .ggm-h1-word { display: block; }
	body.gg-company .ggm-h1 { margin-bottom: 24px; }
	body.gg-company .ggm-linkrow { margin-bottom: 24px; }
	body.gg-company .ggm-chips { margin-bottom: 22px; }

	/* Item titles a lot bigger on mobile. */
	body.gg-company .ggm-vid-title { font-size: 22px; }
	body.gg-company .ggm-price-line .name { font-size: 21px; }
	body.gg-company .ggm-prod .name { font-size: 24px; }
	body.gg-company .ggm-type .name { font-size: 22px; }
	body.gg-company .ggm-rel-body .name { font-size: 22px; }

	/* Gallery: swipe through all photos, drop the show-all button. */
	body.gg-company #sec-gallery .ggm-hide { display: block !important; }
	body.gg-company #sec-gallery .ggm-morewrap { display: none; }

	/* Programs: one column, CTA + note beneath the copy. */
	body.gg-company .ggm-program { grid-template-columns: 1fr; gap: 20px; }
	body.gg-company .ggm-program-cta { align-items: flex-start; }

	/* FAQ: let long questions wrap inside the box (theme forces nowrap on buttons). */
	body.gg-company .ggm-faq-q { white-space: normal; align-items: flex-start; }
	body.gg-company .ggm-faq-q .q { min-width: 0; overflow-wrap: break-word; font-size: 20px; }

	/* keep everything on-screen */
	body.gg-company .ggm-article a,
	body.gg-company .ggm-article span,
	body.gg-company .ggm-article h1,
	body.gg-company .ggm-article h2,
	body.gg-company .ggm-article p { overflow-wrap: break-word; }
}

@media (max-width: 520px) {
	body.gg-company .ggm-claim { flex-direction: column; align-items: flex-start; }
	body.gg-company .ggm-h1 { font-size: 50px; }
}