/* ========================================================================== Gates Albert — component styles (ported from approved V1 concept) Tokens also exposed via theme.json; CSS custom props kept for ported classes. Sections marked [JETENGINE] become JetEngine Listing Grids in a later phase. ========================================================================== */ :root { --navy:#002153; --navy-deep:#001233; --red:#B7121C; --red-hover:#D3161F; --graphite:#595A5C; --gray:#A5A7A9; --mist:#BBBCBE; --light:#F5F6F8; --white:#fff; --display:'Russo One',sans-serif; --text:'Poppins',sans-serif; } /* Base ------------------------------------------------------------------- */ body{font-family:var(--text);color:#2b2c2e;background:#fff;font-size:17px;line-height:1.7} .ga h1,.ga h2,.ga h3,.ga h4{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.015em;color:var(--navy);font-synthesis:none;line-height:1.15} /* Layout container ------------------------------------------------------- */ .wrap{max-width:1200px;margin:0 auto;padding:0 48px} /* Shared bits ------------------------------------------------------------ */ .eyebrow{font-family:var(--text);font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:14px} .eyebrow::before{content:"";display:inline-block;width:30px;height:2px;background:var(--red);vertical-align:middle;margin-right:12px} .btn{font-family:var(--text);font-weight:600;font-size:15px;padding:15px 32px;border-radius:3px;text-decoration:none;display:inline-block;transition:all .15s ease} .btn-red{background:var(--red);color:#fff} .btn-red:hover{background:var(--red-hover);transform:translateY(-1px)} .btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.4)} .btn-ghost:hover{border-color:#fff} .btn-navy{color:var(--navy);border:1px solid var(--navy)} .btn-navy:hover{background:var(--navy);color:#fff} /* Utility bar + nav ------------------------------------------------------ */ .util{background:var(--navy-deep);color:var(--mist);font-size:13px;padding:8px 0} .util .wrap{max-width:100%;width:100%;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:0 40px} .util span b{color:#fff;font-weight:600} .util a{color:#fff;text-decoration:none;font-weight:600} /* Certifications strip (Option A — text-only, site-wide). "Certified to" is a small uppercase label; the standard names sit in brand white on the navy band. */ .ga-certstrip__label{text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:600;color:var(--gray);margin-right:8px} .ga-certstrip__list{color:#fff;font-weight:600;letter-spacing:.01em} .nav{background:#fff;position:sticky;top:0;z-index:100;border-bottom:3px solid var(--red);box-shadow:0 1px 8px rgba(0,18,51,.06)} .nav .wrap{position:relative;max-width:100%;width:100%;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:14px 40px;flex-wrap:nowrap} .nav img{height:50px;width:auto;flex:0 0 auto} .nav ul{display:flex;gap:22px;list-style:none;align-items:center;white-space:nowrap} .nav a{color:var(--navy);text-decoration:none;font-size:14px;font-weight:500} .nav a:hover{color:var(--red)} /* Header CTA reuses the site .btn .btn-red (matches the RFQ-band button: red fill, white legible text). The .nav a{color:navy} rule (0,1,1) would otherwise override .btn-red's white text, so set it here at higher specificity. Keep it from shrinking in the flex nav row. */ .nav .ga-nav-cta,.nav .ga-nav-cta:hover{color:#fff;font-size:15px;font-weight:600;flex:0 0 auto;white-space:nowrap} /* Hero ------------------------------------------------------------------- */ .hero{position:relative;overflow:hidden;color:#fff;background-color:var(--navy-deep);background-image:linear-gradient(100deg,rgba(0,13,36,.94) 0%,rgba(0,18,51,.86) 38%,rgba(0,18,51,.60) 72%,rgba(0,18,51,.50) 100%),url('/wp-content/uploads/home-hero.webp');background-size:cover;background-position:center} .rings{position:absolute;right:-220px;top:50%;transform:translateY(-50%);width:760px;height:760px;border-radius:50%; background:repeating-radial-gradient(circle at center, rgba(187,188,190,.09) 0 1px, transparent 1px 15px); -webkit-mask-image:radial-gradient(circle,#000 30%,transparent 70%);mask-image:radial-gradient(circle,#000 30%,transparent 70%);pointer-events:none} .hero-inner{position:relative;z-index:2;padding:96px 0 80px;max-width:760px} .hero .hero-inner{margin-left:0!important;margin-right:auto!important} .hero h1{color:#fff;font-size:clamp(34px,4.8vw,58px);line-height:1.1;margin-bottom:22px} .hero h1 .red{color:#ff5560} .hero p.lede{color:var(--mist);font-size:18px;max-width:620px;margin-bottom:36px} .cta-row{display:flex;gap:16px;flex-wrap:wrap} .spec-strip{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.28)} .spec-strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:26px;padding-bottom:26px} .spec b{font-family:var(--display);font-weight:400;font-size:27px;color:#fff;letter-spacing:.02em;display:block} .spec span{font-size:13px;color:var(--mist);font-weight:500} /* Homepage hero certifications band — "Certified to" + three bordered pills with a shield-check icon, white on the hero gradient, wrapping on mobile. */ .hero-certs{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.28)} .hero-certs .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding-top:22px;padding-bottom:22px} .hero-certs__label{color:var(--mist);font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin-right:4px} .cert-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:9px 18px;color:#fff;font-size:14px;font-weight:600;white-space:nowrap} .cert-pill__icon{flex:0 0 auto;color:#fff} @media(max-width:600px){.hero-certs .wrap{gap:10px}.hero-certs__label{width:100%;margin:0 0 2px}} /* Identity --------------------------------------------------------------- */ .identity{padding:88px 0;background:#fff} .identity .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center} .identity h2{font-size:33px;line-height:1.2;margin-bottom:20px} .identity p{color:#3c3d3f;margin-bottom:16px} .big-mark{font-family:var(--display);color:var(--navy);background:var(--light);border-left:4px solid var(--red);padding:18px 22px;font-size:15px;letter-spacing:.05em;text-transform:uppercase;margin:22px 0;line-height:1.5} .photo-ph{border-radius:4px;min-height:380px;position:relative;overflow:hidden;background:linear-gradient(135deg,#1a2940 0%,#2c3e5c 50%,#1a2940 100%)} .photo-ph::after{content:attr(data-label);position:absolute;inset:auto 0 0 0;padding:14px 18px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mist);background:rgba(0,0,0,.45)} .photo-ph::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 18px,rgba(255,255,255,.03) 18px 19px)} /* Capabilities [JETENGINE] ---------------------------------------------- */ .caps{padding:88px 0;background:var(--light)} .caps h2{font-size:33px;margin-bottom:10px} .caps .sub{color:var(--graphite);max-width:700px;margin-bottom:48px} .cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .cap{background:#fff;border-radius:4px;padding:32px 28px;border-top:4px solid var(--navy);transition:transform .15s ease, box-shadow .15s ease} .cap:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,18,51,.12)} .cap h3{font-size:17px;letter-spacing:.04em;margin-bottom:12px;line-height:1.35} .cap p{font-size:15px;color:var(--graphite);line-height:1.65;margin-bottom:16px} .cap a{font-weight:600;font-size:14px;color:var(--red);text-decoration:none} .cap a:hover{color:var(--red-hover)} /* Materials [JETENGINE] ------------------------------------------------- */ .materials{padding:88px 0;background:var(--navy-deep);color:#fff;position:relative;overflow:hidden} .materials .rings{left:-260px;right:auto;opacity:.7} .materials h2{color:#fff;font-size:33px;margin-bottom:10px;position:relative;z-index:2} .materials .sub{color:var(--mist);max-width:680px;margin-bottom:42px;position:relative;z-index:2} .mat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative;z-index:2} .mat{border:1px solid rgba(255,255,255,.16);border-radius:4px;padding:22px 20px;text-decoration:none;transition:all .15s ease;display:block} .mat:hover{border-color:var(--red);background:rgba(183,18,28,.08)} /* Material card featured-image banner (gates-albert/card-banner) — flush to the card's top edge. Mirror the .cap card pattern: drop the card padding, clip the corners, and re-pad the text children so the banner meets the border cleanly (no gap above it, no border line sitting over the image). */ .mat:has(.mat__banner){padding:0;overflow:hidden} .mat__banner{margin:0;line-height:0;aspect-ratio:1980/600;background:#0f1826} .mat__banner img{display:block;width:100%;height:100%;object-fit:cover} .mat:has(.mat__banner) > *:not(.mat__banner){padding-left:20px;padding-right:20px} .mat:has(.mat__banner) > *:not(.mat__banner):first-of-type{padding-top:18px} .mat:has(.mat__banner) > *:not(.mat__banner):last-of-type{padding-bottom:20px} .mat b{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.04em;font-size:15px;color:#fff;display:block;margin-bottom:6px} .mat span{font-size:13px;color:var(--mist);line-height:1.5;display:block} .mat.cta-tile{background:var(--red);border-color:var(--red);display:flex;align-items:center;justify-content:center} .mat.cta-tile b{margin:0} .mat.cta-tile:hover{background:var(--red-hover)} /* Industries [JETENGINE] ------------------------------------------------ */ .industries{padding:88px 0;background:#fff} .industries h2{font-size:33px;margin-bottom:10px} .industries .sub{color:var(--graphite);max-width:700px;margin-bottom:42px} .ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .ind{background:var(--light);border-left:3px solid var(--navy);padding:16px 18px;font-weight:500;font-size:15px;color:var(--navy);text-decoration:none;border-radius:0 3px 3px 0;transition:all .15s} .ind:hover{border-left-color:var(--red);background:#eef0f4} /* Case studies [JETENGINE] ---------------------------------------------- */ .cases{padding:88px 0;background:var(--light)} .cases h2{font-size:33px;margin-bottom:10px} .cases .sub{color:var(--graphite);max-width:700px;margin-bottom:48px} .case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .case{background:#fff;border-radius:4px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s ease, box-shadow .15s ease} .case:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,18,51,.12)} .case .stat{background:var(--navy);color:#fff;padding:26px 26px 22px} .case .stat b{font-family:var(--display);font-weight:400;font-size:34px;display:block;letter-spacing:.02em} .case .stat span{font-size:13px;color:var(--mist);font-weight:500} .case .body{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1} .case h3{font-size:15px;letter-spacing:.04em;line-height:1.45;margin-bottom:10px} .case p{font-size:14.5px;color:var(--graphite);line-height:1.65;flex:1;margin-bottom:16px} .case a{font-weight:600;font-size:14px;color:var(--red);text-decoration:none} .case blockquote{font-size:14px;font-style:italic;color:var(--navy);border-left:3px solid var(--red);padding-left:12px;margin-bottom:14px} /* Quality / why ---------------------------------------------------------- */ .why{padding:88px 0;background:#fff} .why .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center} .why h2{font-size:33px;margin-bottom:24px} .why-item{display:flex;gap:18px;margin-bottom:26px} .why-item .tick{flex:0 0 44px;height:44px;border-radius:3px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:16px} .why-item h4{font-size:15px;letter-spacing:.04em;margin-bottom:4px} .why-item p{font-size:15px;color:var(--graphite);line-height:1.6} .cert-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px} .cert{font-family:var(--display);font-size:13px;letter-spacing:.06em;color:var(--navy);border:1.5px solid var(--navy);border-radius:3px;padding:8px 14px;text-transform:uppercase} /* RFQ band --------------------------------------------------------------- */ .rfq-band{background:linear-gradient(115deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;padding:72px 0;position:relative;overflow:hidden;border-top:6px solid var(--red)} .rfq-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;position:relative;z-index:2} .rfq-band h2{color:#fff;font-size:30px;margin-bottom:8px} .rfq-band p{color:var(--mist);max-width:540px} /* Footer ----------------------------------------------------------------- */ .site-footer{background:#0a0d12;color:var(--gray);padding:64px 0 32px;font-size:14px} .site-footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px} .site-footer img{height:44px;margin-bottom:18px} .site-footer h5{font-family:var(--text);font-weight:600;color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px} .site-footer a{color:var(--gray);text-decoration:none;display:block;margin-bottom:8px} .site-footer a:hover{color:#fff} .site-footer .legal{grid-column:1/-1;border-top:1px solid #1d2026;margin-top:0;padding-top:24px;font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px} /* Membership band (PMPA + AMT) — full-width row below the footer columns. Overrides the .site-footer .wrap grid + the blanket .site-footer img sizing. */ .footer-memberships{border-top:1px solid #1d2026;margin-top:40px;padding-top:28px} .site-footer .footer-memberships .wrap{display:block;text-align:center} .footer-memberships__hook{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray);margin:0 0 16px} .footer-memberships__logos{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap} .site-footer .footer-memberships__logos img{height:52px;width:auto;margin:0;opacity:.9} /* Real top spacing separates the terms row from the membership logos above. No border here on purpose — the memberships band (top) and the .legal copyright row (below) already carry hairlines; a third would read as busy. */ .site-footer .footer-legal-wrap{display:block;padding-top:30px} .site-footer .footer-legal-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0 0 14px} .footer-legal-links__label{color:var(--mist);font-weight:600;font-size:13px;letter-spacing:.02em} .site-footer .footer-legal-links a{color:var(--gray);text-decoration:none;font-size:13px;margin:0;display:inline} .site-footer .footer-legal-links a:hover{color:#fff} /* Pipe separators between links only: a+a::before starts at the SECOND link (the first is preceded by the "Terms:" label ), so there is no pipe after the label and none before the first link. */ .site-footer .footer-legal-links a + a::before{content:"|";color:var(--gray);opacity:.55;margin-right:14px;font-size:12px} @media(max-width:600px){ .site-footer .footer-legal-wrap{padding-top:24px} /* Stacked links read fine gap-separated; drop the pipes so a wrapped line never starts with a leading | (Cowork R7 QA). A CSS ::before separator can't detect line-start, so suppressing it on mobile is the clean fix. */ .site-footer .footer-legal-links{gap:6px 16px} .site-footer .footer-legal-links a + a::before{content:none} } /* JetEngine Listing Grid equal-height bridge (Session 4) ----------------- */ /* Columns come from the listing-grid block's per-device `columns` settings (JetEngine flexes .jet-listing-grid__items). .ga-grid--N is on JE's inert outer wrapper — used here ONLY as a hook to stretch cards to equal height: JE equalizes the item wrappers per row, but the inner .cap kept content height → masonry without this. Targets > * so it covers all card shapes. */ .ga-grid--3 .jet-listing-grid__item, .ga-grid--4 .jet-listing-grid__item{margin:0!important;width:auto!important;display:flex!important;align-items:stretch} .ga-grid--3 .jet-listing-grid__item > *, .ga-grid--4 .jet-listing-grid__item > *{flex:1 1 auto;width:100%} /* Whole-card clickable link — uniform across all four card types. Each listing emits a JetEngine Dynamic Link (). We stretch that anchor over the entire tile with a transparent ::after, positioned against the CARD ROOT (which has real content height). BUGFIX: the old .ga-cover wrappers were themselves position:absolute, so an auto-height abs box whose only child was also abs collapsed to 0 height — the anchor rendered 259x0 and caught no clicks. Neutralize those wrappers to static so the card root (.mat/.ind/.cap/.case) is the anchor's containing block. */ .mat,.ind,.cap,.case{position:relative} /* keep the intermediate link wrappers in normal flow (no collapsing abs boxes) */ .ga-cover,.ga-cover .jet-listing-dynamic-link,.ga-cover .jet-listing-dynamic-link__link{position:static;inset:auto;margin:0} /* the stretched cover: fills the card root, above content, transparent */ .mat .jet-listing-dynamic-link__link::after, .ind .jet-listing-dynamic-link__link::after, .cap .jet-listing-dynamic-link__link::after, .case .jet-listing-dynamic-link__link::after{content:"";position:absolute;inset:0;height:100%;width:100%;z-index:1} /* any genuine inner link (e.g. inside dynamic rich text) stays clickable above the cover */ .mat a:not(.jet-listing-dynamic-link__link), .ind a:not(.jet-listing-dynamic-link__link), .cap a:not(.jet-listing-dynamic-link__link), .case a:not(.jet-listing-dynamic-link__link){position:relative;z-index:2} /* mat/ind tiles have no visible label — keep the empty cover anchor from taking space */ .ga-cover,.ga-cover *{font-size:0;line-height:0;color:transparent} /* Industry tile: title + one-line lede snippet */ .ind b{display:block;font-size:15px;font-weight:600;margin-bottom:4px} .ind .ind-sum .jet-listing-dynamic-field__content{font-size:12.5px;font-weight:400;color:var(--graphite);line-height:1.45} /* Case-study quote: JE can't emit
, so style the field content as V1's .case blockquote. */ .case .ga-quote .jet-listing-dynamic-field__content{font-size:14px;font-style:italic;color:var(--navy);border-left:3px solid var(--red);padding-left:12px;margin-bottom:14px} /* JetSearch inline field in header (Session 4 Group 6) ------------------ */ .ga-search{flex:0 0 auto;position:relative} .ga-search .jet-ajax-search__form{display:flex;margin:0} .ga-search .jet-ajax-search__field{width:210px;max-width:210px;height:40px;padding:8px 14px;font-size:14px;line-height:1.2;border:1px solid var(--mist);border-radius:3px 0 0 3px;background:#fff;color:var(--navy)} .ga-search .jet-ajax-search__field:focus{outline:2px solid var(--navy);outline-offset:0;border-color:var(--navy)} .ga-search .jet-ajax-search__submit{height:40px;min-width:44px;background:var(--navy);color:#fff;border:none;border-radius:0 3px 3px 0;cursor:pointer;display:flex;align-items:center;justify-content:center} .ga-search .jet-ajax-search__submit:hover{background:var(--red)} .ga-search .jet-ajax-search__submit svg{width:18px;height:18px;fill:currentColor} @media(max-width:980px){ .ga-search .jet-ajax-search__field{width:150px;max-width:150px} } /* JetSmartFilters bar (Session 4 Group 6) ------------------------------- */ .ga-filter{margin-bottom:30px} .ga-filter .jet-checkboxes-list{display:flex;flex-wrap:wrap;gap:10px 20px;list-style:none;margin:0;padding:0} .ga-filter .jet-checkbox{font-size:14px;color:var(--graphite);cursor:pointer} .ga-filter .jet-checkbox input{margin-right:7px;accent-color:var(--red)} /* Single (detail) pages (Session 4 Group 5) ----------------------------- */ .single-hero{background:linear-gradient(115deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;padding:64px 0;border-top:4px solid var(--red)} /* cover-block hero: featured image where present, gradient fallback where not */ .single-hero.wp-block-cover{min-height:0;align-items:stretch;justify-content:flex-start} .single-hero.wp-block-cover .wp-block-cover__inner-container{width:100%} .single-hero h1,.single-hero .wp-block-post-title,.single-hero .eyebrow,.single-hero .eyebrow a{color:#fff!important} .single-hero .eyebrow a{text-decoration:none} .single-hero .eyebrow a:hover{color:var(--mist)!important} .single-hero h1{color:#fff;font-size:clamp(30px,4vw,46px);line-height:1.12} /* archive band heading is an

(one per archive); match the band size */ .caps h1,.materials h1,.industries h1,.cases h1{font-size:33px;margin-bottom:10px;line-height:1.15} .materials h1{color:#fff} .single-hero .lede .jet-listing-dynamic-field__content,.single-hero p{color:var(--mist);font-size:18px;line-height:1.6;max-width:720px;margin-top:16px} .single-body{padding:72px 0;background:#fff} .single-body .wrap > h2{font-size:28px;margin-bottom:26px} .single-body > .wrap > h2:not(:first-child),.single-section{margin-top:8px} /* Grades render in a readable card grid (JetEngine repeater defaults to a cramped flex nowrap row — override to auto-fit cards). */ .grades-list .jet-listing-dynamic-repeater__items{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px} .grades-list .jet-listing-dynamic-repeater__item{padding:24px 26px;border:1px solid #e6e8ec;border-top:3px solid var(--navy);border-radius:4px;background:#fff;margin:0} .grades-list h4{font-family:var(--display);color:var(--navy);font-size:16px;letter-spacing:.03em;text-transform:uppercase;margin-bottom:8px} .grades-list .grade-desc{color:var(--graphite);font-size:15.5px;line-height:1.7} .grades-list .grade-desc p{margin:0 0 10px} /* single body prose + field section headings */ .single-body .wrap > h3,.field-h{font-family:var(--display);color:var(--navy);font-size:18px;text-transform:uppercase;letter-spacing:.03em;margin:30px 0 12px} .single-body p{color:#3c3d3f;line-height:1.7;margin:0 0 14px} .single-body .field-body p{margin:0 0 12px} /* typical_parts chips (clean inline chips — no list bullets / separators) */ .parts-list .jet-listing-dynamic-repeater__items{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;list-style:none;padding:0} .parts-list .jet-listing-dynamic-repeater__item{list-style:none;background:var(--light);border-left:3px solid var(--navy);padding:8px 14px;font-size:14px;color:var(--navy);border-radius:0 3px 3px 0} /* certs badges: certs is a checkbox map rendered via the "Checked values list" (jet_engine_render_checklist) callback -> per-item .jet-check-list nodes, styled as V1 .cert badges. */ .cert-list .jet-check-list{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px} .cert-list .jet-check-list__item{display:inline-flex} .cert-list .jet-check-list__item-content,.cert-badge{font-family:var(--display);font-size:13px;letter-spacing:.06em;color:var(--navy);border:1.5px solid var(--navy);border-radius:3px;padding:8px 14px;text-transform:uppercase;line-height:1.2} /* equipment list */ .equip-list .jet-listing-dynamic-repeater__item{padding:14px 0;border-top:1px solid #e6e8ec;font-size:15px;color:var(--graphite)} .equip-list .jet-listing-dynamic-repeater__item b{color:var(--navy);font-family:var(--display);font-weight:400;letter-spacing:.02em} /* case-study single hero: headline stat as the navy .stat centerpiece */ .cs-hero .cs-stat{background:var(--navy-deep);border-left:5px solid var(--red);border-radius:4px;padding:22px 28px;margin-bottom:22px;max-width:max-content} .cs-hero .stat-big .jet-listing-dynamic-field__content{font-family:var(--display);font-size:clamp(40px,6vw,66px);color:#fff;line-height:1;letter-spacing:.02em} .cs-hero .stat-label .jet-listing-dynamic-field__content{color:var(--mist);font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin-top:6px} /* Case-study subtitle — the long descriptive title as a subheading under the shortened H1 (Round 1 title/subtitle structure). */ .cs-hero .cs-subtitle .jet-listing-dynamic-field__content{color:var(--mist);font-size:clamp(16px,2vw,19px);font-weight:400;line-height:1.4;margin-top:12px;max-width:760px} /* case-study single quote -> V1 .case blockquote (red border, italic) */ .cs-quote .jet-listing-dynamic-field__content{font-size:18px;font-style:italic;color:var(--navy);border-left:3px solid var(--red);padding-left:16px;margin:24px 0} /* related-items section on singles */ .single-related{padding:16px 0 80px;background:#fff} .single-related .wrap > h2{font-size:26px;margin-bottom:24px} /* dark band for related-MATERIALS grids: .mat tiles are built white-on-dark, so they're illegible on the default white band (homepage/archive run them on the navy band). Put the materials grid on the same navy band here. */ .single-related--dark{background:var(--navy-deep);color:#fff;padding:56px 0 72px} .single-related--dark .wrap > h2,.single-related--dark h2{color:#fff} /* empty related grids: hide the grid AND its orphan heading (sparse relations). JE marks an empty grid's container .jet-listing-not-found only when 0 results. */ .single-related .jet-listing-not-found{display:none} .single-related .jet-listing-grid--blocks:has(.jet-listing-not-found){display:none} .single-related h2:has(+ .jet-listing-grid--blocks .jet-listing-not-found){display:none} /* Hide the ENTIRE related section (padded band + heading) when its listing is empty — not just the grid — so empty "Related Case Studies" / "Materials We Machine" bands don't render as blank strips. */ .single-related:has(.jet-listing-not-found){display:none} /* Primary mega-menu (Session 5) ---------------------------------------- */ /* Custom dynamic nav (gates-albert/primary-nav) replaces core wp:navigation. Scoped under .ga-nav so panel