/* OceanBridge Recruit — additions on top of Nova's main.css. Reuses Nova's CSS
   custom properties (--heading-color / --accent-color / --surface-color etc.)
   defined in main.css so new components stay in the same palette. */

/* Brand palette — monochromatic scale off base #202a80 (client-supplied 2026-08-18).
   Mapped onto Nova's semantic tokens: 20% for headings, 40% for links/buttons
   (base main.css's own --background-color:#202a80 already *is* the 100% base, used
   for the hero/dark-background panels, so that token is untouched). --accent-color
   is bumped up to the 70% tier specifically inside .dark-background — the hero's
   own CTA button uses --accent-color as its fill, and 40% is too close to the
   #202a80 base to stay legible there; 70% keeps it in the same family but visible. */
:root {
	--brand-90: #D6D9F5;
	--brand-80: #ADB4EB;
	--brand-70: #858EE0;
	--brand-60: #5C68D6;
	--brand-50: #334299;
	--brand-40: #29357A;
	--brand-30: #1F285C;
	--brand-20: #141B52;
	--brand-10: #0A0D29;

	--heading-color: var(--brand-20);
	--accent-color: var(--brand-40);
}
.dark-background { --accent-color: var(--brand-70); }
.scrolled .header { --background-color: var(--brand-20); }

/* client feedback 2026-09-04: 「全体的に文字を少し大きくしたい」— body copy runs on
   Nova's inherited 16px default almost everywhere (headings/labels already carry their
   own explicit sizes), so nudging the base up cascades through every plain <p> without
   touching anything that was deliberately sized. */
body { font-size: 17px; }

/* client feedback 2026-09-04: hero photo should read a bit darker. main.css's own
   .hero:before exists as an empty full-cover layer (its background is commented out
   there) sitting at z-index:2, above the photo (1) and below the text (3) — just
   giving it a color turns it into the darkening overlay without touching the image. */
.hero:before { background: rgba(8, 12, 36, .32); }


/* people grid ("人を知る") — wraps Nova's .team-member card in a link. The hover trigger
   and the transform live on the SAME element (the link) so the hoverable area moves as
   one rigid piece with the card — putting the transform on a nested element while the
   link (the thing actually being :hover'd) stays still is what caused the jittery,
   unnatural motion before. The photo zoom is clipped by .member-img's own overflow so
   it can never spill past the card's rounded corners. */
.people-grid .team-member-link { display: block; text-decoration: none; color: inherit; border-radius: 5px; transition: transform .25s ease, box-shadow .25s ease; }
.people-grid .team-member-link:hover { transform: translateY(-6px); }
.people-grid .member-img { overflow: hidden; border-radius: 3px; }
.people-grid .member-img img { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; transition: transform .4s ease; }
.people-grid .team-member-link:hover .member-img img { transform: scale(1.07); }
.people-grid .member-info { padding: 25px 18px; }
.people-grid .member-info h4 { font-weight: 700; margin-top: 10px; transition: color .25s ease; }
.people-grid .team-member-link:hover .member-info h4 { color: var(--accent-color); }
.people-grid .position-lines { display: block; white-space: pre-line; font-size: .95rem; margin-top: 4px; }
.people-grid .placeholder-note { font-size: .68rem; color: var(--accent-color); margin-top: 4px; }

/* below desktop (<992px): swap the large photo-on-top card for a compact horizontal
   card matching the "他のメンバーを見る" nav-card style on single-staff_interview.php.
   1 column on phones, 2 columns on tablets via the existing col-md-6 grid. */
@media (max-width: 991.98px) {
	.people-grid .team-member-link:hover { transform: none; }
	.people-grid .team-member { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; transition: box-shadow .2s ease, border-color .2s ease; }
	.people-grid .team-member-link:hover .team-member { box-shadow: 0 4px 14px rgba(0,0,0,.1); }
	.people-grid .member-img { flex: none; width: 90px; height: 90px; border-radius: 6px; }
	.people-grid .member-img img { aspect-ratio: 1 / 1; }
	.people-grid .team-member-link:hover .member-img img { transform: none; }
	.people-grid .member-info { padding: 0; text-align: left; }
	.people-grid .member-info h4 { font-size: 1.3rem; margin-top: 0; }
	.people-grid .position-lines { font-size: .9rem; line-height: 1.1rem; margin-top: 4px; }
}

/* stats ("データで見るオーシャンブリッジ") */
/* データで見るオーシャンブリッジ — grid mirrors the client's Excel layout exactly
   (4 cols x 3 rows, irregular spans). Cell fill colors are a follow-up step — for
   now each cell just gets a border so the grid shape itself is correct. */
/* 会社を知る — whole section is the brand color, matching how 人を知る (#h-people)
   colors its whole section; individual boxes are white cards inside it, so each
   box re-pins --heading-color/--default-color back to navy for its own descendants
   (otherwise they'd inherit the section's white text color and vanish on the white
   card background). */
#h-company { --background-color: #334299; --default-color: #fff; --heading-color: #fff; background: linear-gradient(135deg, #1F285C 0%, #334299 100%); }

.data-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.data-cell { padding: 22px 20px; background: #fff; color: #141B52; border-radius: 3px; min-width: 0; --heading-color: #141B52; --default-color: #141B52; }
.dg-label { font-size: 1.2rem; font-weight: 700; color: #141B52; margin-bottom: 10px; }
.dg-value { font-size: 2.3rem; font-weight: 800; color: var(--heading-color); }
.dg-value-sub { font-size: 1rem; font-weight: 700; margin-top: 8px; }

/* infographic-style donut charts (男女比 / 有休取得率 / 育休取得率) */
.chart-donut { width: 150px; max-width: 100%; aspect-ratio: 1 / 1; height: auto; border-radius: 50%; margin: 6px auto 0; display: flex; align-items: center; justify-content: center; }
.chart-donut-hole { width: 84px; height: 84px; border-radius: 50%; background: var(--surface-color); display: flex; align-items: center; justify-content: center; }
.chart-donut-hole span { font-size: 1.4rem; font-weight: 800; color: var(--heading-color); }
.chart-donut-hole span i { font-style: normal; opacity: .5; margin: 0 1px; }
.chart-legend { display: flex; justify-content: center; gap: 14px; margin-top: 10px; font-size: .78rem; color: #141B52; }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dg-value-text { font-size: 1rem; font-weight: 700; line-height: 1.6; }
.dg-childcare-charts { display: flex; justify-content: center; gap: 72px; flex-wrap: wrap; }
.dg-childcare-chart { text-align: center; }
.data-cell ul { margin: 0; padding-left: 1.1em; font-size: .95rem; color: #141B52; line-height: 1.3; }
.data-cell li { margin-bottom: 1px; }

.dg-headcount { grid-column: 1; grid-row: 1; position: relative; display: flex; align-items: center; justify-content: center; }
.dg-age       { grid-column: 2; grid-row: 1; position: relative; display: flex; align-items: center; justify-content: center; }
.dg-headcount .dg-value, .dg-age .dg-value { font-size: 3rem; }
.dg-headcount .dg-label, .dg-age .dg-label { position: absolute; top: 22px; left: 20px; margin-bottom: 0; }

.age-bar-chart { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: 100%; max-width: 250px; display: flex; flex-direction: column; gap: 1.5px; }
.age-bar-row { display: flex; align-items: center; gap: 8px; height: 18px; font-size: .72rem; line-height: 1; color: #141B52; }
.age-bar-label { width: 56px; flex-shrink: 0; text-align: right; white-space: nowrap; }
.age-bar-track { flex: 1; min-width: 55px; height: 12px; background: rgba(0,0,0,.08); border-radius: 6px; overflow: hidden; }
.age-bar-fill { height: 100%; background: var(--accent-color); border-radius: 6px; }
.age-bar-value { width: 62px; flex-shrink: 0; font-weight: 700; white-space: nowrap; }
.age-bar-value i { font-style: normal; font-weight: 400; opacity: .65; margin-left: 3px; }
.dg-note-corner { position: absolute; right: 16px; bottom: 14px; font-size: .7rem; opacity: .6; }
.dg-ratio     { grid-column: 3; grid-row: 1; }
.dg-paid-leave{ grid-column: 4; grid-row: 1 / 3; display: flex; flex-direction: column; }
.dg-childcare { grid-column: 1 / 4; grid-row: 2; }
.dg-cert      { grid-column: 1 / 3; grid-row: 3; }
.dg-benefits  { grid-column: 3 / 5; grid-row: 3; }
.dg-training  { grid-column: 1 / 3; grid-row: 4; }
.dg-workstyle { grid-column: 3 / 5; grid-row: 4; }

/* その他休暇制度 now lives inside the 有休取得率 cell, not as its own grid item */
.dg-paid-leave .dg-other-leave { margin-top: auto; padding-top: 16px; }

.dg-cert-row { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 8px; }
.dg-cert-item { flex: 1 1 240px; }
.dg-cert-item img { height: 64px; width: auto; margin-bottom: 10px; }
.dg-cert-item p { font-size: .88rem; color: #141B52; line-height: 1.6; margin: 0; }

/* 有休/育休取得率 — current-year figure stays the big emphasized number; the tag names
   which fiscal year it's for, and the history line adds the two prior years in smaller
   supplementary text underneath (client feedback 2026-09-04). */
.dg-year-tag { font-size: .8rem; font-weight: 700; color: var(--accent-color); text-align: center; margin-top: 4px; }
.dg-history { font-size: .78rem; color: #141B52; opacity: .75; text-align: center; margin-top: 10px; line-height: 1.6; }
.dg-training ul, .dg-workstyle ul { margin: 8px 0 0; padding-left: 1.1em; font-size: .95rem; color: #141B52; line-height: 1.5; }
.dg-training p, .dg-workstyle p { margin: 8px 0 0; font-size: .95rem; color: #141B52; line-height: 1.6; }

@media (max-width: 767px) {
	.data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dg-headcount { grid-column: 1; grid-row: 1; }
	.dg-age        { grid-column: 2; grid-row: 1; }
	.dg-ratio      { grid-column: 1; grid-row: 2; }
	.dg-paid-leave { grid-column: 2; grid-row: 2; }
	.dg-childcare  { grid-column: 1 / 3; grid-row: 3; }
	.dg-cert       { grid-column: 1 / 3; grid-row: 4; }
	.dg-benefits   { grid-column: 1 / 3; grid-row: 5; }
	.dg-training   { grid-column: 1 / 3; grid-row: 6; }
	.dg-workstyle  { grid-column: 1 / 3; grid-row: 7; }

	.dg-headcount .dg-value, .dg-age .dg-value { font-size: 2rem; }
	.dg-age { flex-direction: column; gap: 8px; padding: 46px 12px 16px; min-width: 0; }
	.dg-age .age-bar-chart { position: static; left: auto; bottom: auto; transform: none; margin-top: 2px; max-width: 100%; min-width: 0; }
	.age-bar-row { gap: 4px; font-size: .62rem; min-width: 0; }
	.age-bar-label { width: 34px; }
	.age-bar-track { min-width: 18px; }
	.age-bar-value { width: auto; flex-shrink: 0; }

	.dg-childcare-charts { flex-wrap: nowrap; gap: 24px; }
	.dg-childcare-chart { flex: 1 1 0; min-width: 0; }
	.dg-childcare-chart .chart-donut { width: 120px; }
}

/* evaluation */
.eval-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.eval-tile { border: 1px solid rgba(255,255,255,.3); border-radius: 10px; padding: 20px; text-align: center; }
.eval-tile b { color: var(--heading-color); display: block; margin-bottom: 6px; }

/* events */
.event-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.event-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; }
.event-card .label { text-align: center; margin-top: 8px; font-size: .85rem; }

/* text-only event cards (no photos, per client) */
/* Square-ish event card: the photo itself is a fixed 1:1 square sized off the card's
   own width (robust — no percentage flex-basis inside an aspect-ratio parent, which
   several engines fail to resolve and end up stretching the photo to fill the card).
   Text sits below at its natural height, so the card stays square when the copy is
   short and grows into a taller rectangle only if the copy needs more room. */
.event-card-text { display: flex; flex-direction: column; background: var(--brand-90); border-radius: 10px; overflow: hidden; text-align: center; --heading-color: var(--brand-20); --default-color: var(--brand-20); }
.event-card-text .event-photo { aspect-ratio: 1 / 0.6; width: 100%; }
.event-card-text .event-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-card-text .event-body { padding: 14px 16px; }
.event-card-text h4 { font-size: 1.3rem; font-weight: 700; color: var(--heading-color); margin: 0 0 6px; }
.event-card-text p { font-size: .9rem; color: var(--default-color); opacity: .85; margin: 0; }

/* career plan */
.mock-badge { display: inline-block; font-size: .65rem; letter-spacing: .04em; background: var(--brand-90); color: var(--heading-color); border-radius: 999px; padding: 3px 10px; margin-left: 8px; vertical-align: middle; }
.career-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: .88rem; }
.career-table th, .career-table td { border: 1px solid rgba(0,0,0,.1); padding: 10px 14px; text-align: left; }
.career-table th { background: var(--brand-90); color: var(--heading-color); }
.career-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.career-col { border: 1px solid rgba(0,0,0,.08); border-radius: 10px; padding: 18px; }
.career-col h4 { color: var(--heading-color); font-size: 1rem; margin-bottom: 10px; }

/* faq — accordion cards, ported from ocl-ai.jp's "よくある質問" design/interaction */
#h-faq { background: #ecf3fe; }
.faq-list { display: flex; flex-direction: column; gap: 16px; }
.faq-list .accordion { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.06); transition: box-shadow .25s ease, transform .2s ease; }
@media (min-width: 992px) {
	.faq-list .accordion:has(.accordion_head:hover) { box-shadow: 0 4px 16px rgba(0,0,0,.12); transform: translateY(-2px); }
}
.faq-list .accordion_head { display: flex; align-items: center; gap: 18px; width: 100%; padding: 22px 28px; cursor: pointer; }
.faq-list .accordion_head_q { flex: none; font-size: 1.5rem; font-weight: 800; color: var(--accent-color); line-height: 1; }
.faq-list .accordion_head_text { flex: 1; font-weight: 700; color: var(--heading-color); line-height: 1.5; }
.faq-list .accordion_head_arrow { flex: none; display: flex; color: var(--accent-color); transition: transform .25s ease; }
.faq-list .accordion.open .accordion_head_arrow { transform: rotate(180deg); }
.faq-list .accordion_inner { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-list .accordion.open .accordion_inner { max-height: 600px; }
.faq-list .accordion_inner > p { display: flex; gap: 16px; margin: 0; padding: 0 28px 26px; border-top: 1px solid rgba(0,0,0,.08); padding-top: 20px; }
.faq-list .accordion_inner_a { flex: none; font-size: 1.5rem; font-weight: 800; color: var(--accent-color); line-height: 1; }
.faq-list .accordion_inner span:last-child { color: var(--default-color); opacity: .85; line-height: 1.7; }

@media (max-width: 767px) {
	.faq-list .accordion_head { gap: 12px; padding: 16px 18px; }
	.faq-list .accordion_head_q { font-size: 1.2rem; }
	.faq-list .accordion_head_text { font-size: .92rem; }
	.faq-list .accordion_inner > p { gap: 10px; padding: 16px 18px 20px; }
	.faq-list .accordion_inner_a { font-size: 1.2rem; }
}

/* products */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.product-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 10px; padding: 24px 18px 10px; text-decoration: none; color: inherit; box-shadow: 0 2px 8px rgba(0,0,0,.08); transition: box-shadow .2s ease; }
.product-tile:hover { box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.product-tile .plogo { height: auto; width: auto; max-width: 250px; max-height: 250px; }
.product-tile .ptagline { width: 100%; font-size: .95rem; font-weight: 400; color: var(--default-color); white-space: nowrap; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(0,0,0,.1); }

/* entry */
.entry-box { background: var(--brand-90); border-radius: 12px; padding: 30px; text-align: center; }
.entry-box .status-pill { display: inline-block; font-size: .78rem; padding: 4px 14px; border-radius: 999px; background: rgba(0,0,0,.06); margin-bottom: 14px; }
.zoho-embed-placeholder { border: 1px dashed rgba(0,0,0,.2); border-radius: 10px; padding: 30px; margin-top: 18px; font-size: .82rem; opacity: .75; }
.entry-cta-btn { display: inline-block; margin-top: 20px; padding: 12px 32px; border-radius: 999px; background: var(--accent-color); color: #fff; font-weight: 700; font-size: .9rem; text-decoration: none; transition: opacity .2s ease; }
.entry-cta-btn:hover { opacity: .85; color: #fff; }

/* single interview page */
.interview-head { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; }
.interview-head img.main-photo { width: 100%; border-radius: 10px; }
.interview-head .name { font-size: 1.6rem; color: var(--heading-color); font-weight: 800; margin: 8px 0; }
.qa-block { margin: 34px 0; }
.qa-block .q { font-size: 2rem; font-weight: 700; color: var(--heading-color); margin-bottom: 2rem; }
.qa-block .q:before { content: "Q. "; color: var(--accent-color); }
.qa-block .a { white-space: pre-line; margin-top: 10px; }
.qa-block .inset-photo { margin-top: 18px; }
.qa-block .inset-photo img { width: 100%; border-radius: 10px; }
.interview-back { display: flex; justify-content: space-between; padding-top: 24px; border-top: 1px solid rgba(0,0,0,.1); font-size: .9rem; }

@media (max-width: 991px) {
	.event-grid { grid-template-columns: repeat(2, 1fr); }
	.product-grid { grid-template-columns: repeat(2, 1fr); }
	.eval-grid, .career-cols { grid-template-columns: 1fr; }
	.interview-head { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.product-grid { grid-template-columns: 1fr; }
}

/* logo images */
.header .logo .header-logo-img { height: 52px; max-height: none; width: auto; margin-right: 12px; }
.header .logo span { font-size: .95rem; color: var(--nav-color); margin-left: 10px; }
.footer .footer-about .footer-logo-img { width: 138px; height: 61px; }

/* Astra's built-in scroll-to-top duplicates Nova's own #scroll-top button; keep only Nova's (accent blue) */
#ast-scroll-top { display: none !important; }

/* footer background */
.footer.light-background { background-color: #f1f1f1; }

/* header nav — bold */
.navmenu a, .navmenu a:focus { font-weight: 700; }

/* hero photo — on narrow/tall viewports "cover" crops out one of the two people in the
   source photo (they sit ~24%-81% across the frame); switch to "contain" below the point
   where a full-bleed crop would clip them, so both stay fully visible. Desktop/landscape
   keeps the full-bleed "cover" look since it already comfortably fits both people. */
@media (max-width: 767px) {
	.hero img { object-fit: cover; }
	.hero { min-height: 62vh; padding: 90px 0 40px; }
	.section-title h2 { font-size: 30px; }
	.section-title p { font-size: 1.2rem; }
}

/* トップメッセージ（正解が用意されていない、という自由。） */
#h-message { background-color: #fff; }

/* 人を知る */
#h-people { background-color: #fff; }
#h-candidate { background: linear-gradient(to top right, #e2e2e6 0%, #fbfbfc 100%); }
#h-candidate .row { --bs-gutter-x: 3rem; --bs-gutter-y: 3rem; }
#h-candidate h3 { font-size: 1.4rem; text-align: center; }
#h-products { background: linear-gradient(80deg, #FAFBFE 0%, #D6D9F5 100%); }

/* トップメッセージ写真下のクレジット */
.ceo-credit { text-align: left; font-size: 1.1rem; font-weight: 700; color: var(--heading-color); margin-top: 18px; }
#h-message .content p { font-size: 1.1rem; line-height: 1.9; }

/* section-title の p はリード文/サブ見出しとして使っているセクションが3つあるため
   (世界で見つけて.../求める人物像/データで見るオーシャンブリッジ)、強調して大きくする */
.section-title p { font-size: 1.5rem; font-weight: 700; line-height: 1.7; color: var(--heading-color); font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif; }

/* h2's underline bar sized to the heading text itself (text width + 1em) rather than
   a fixed 50px — h2 becomes inline-block so its own box shrinks to the text, and the
   :after bar (still centered via left/right:0 + margin:auto from main.css) inherits
   that width. */
.section-title h2 { display: inline-block; }
.section-title h2:after { left: 50%; right: auto; margin: 0; transform: translateX(-50%); width: calc(100% + 1em); background: #FFC933; }

.company-info-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 44px; padding: 12px 28px; border-radius: 999px; background: var(--accent-color); color: #fff; font-weight: 700; font-size: .9rem; text-decoration: none; transition: opacity .2s ease; }
.company-info-btn:hover { opacity: .85; color: #fff; }
.company-info-btn .btn-icon-circle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #FFC933; }
.company-info-btn .btn-icon-circle i { font-size: .78rem; color: #fff; }

/* 世界で見つけて、日本でつくる市場。— faint world-map watermark, full-bleed & responsive
   via background-size:cover; kept as a low-opacity ::before so it never competes with
   the text sitting on top of it. */
#h-intro { position: relative; overflow: hidden; }
#h-intro::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../img/bg/world-map.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: .2;
	z-index: 0;
}
#h-intro .section-title { position: relative; z-index: 1; }

/* interior pages (社員インタビュー詳細): the header is transparent-by-default because on
   the front page it overlays the hero photo; on these pages there's no dark hero behind
   it, so it needs a solid background from the start instead of waiting for the
   .scrolled class that main.js adds on scroll. */
.single-staff_interview .header { --background-color: rgba(32,42,128,.95); }

/* "他のメンバーを見る" — 4 cols x 2 rows, small square photo + name/dept to its right */
.people-nav-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.people-nav-card { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; text-decoration: none; color: inherit; transition: box-shadow .2s ease, border-color .2s ease; }
.people-nav-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.people-nav-photo { flex: none; width: 56px; height: 56px; border-radius: 6px; overflow: hidden; }
.people-nav-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.people-nav-name { font-size: .85rem; font-weight: 700; color: var(--heading-color); }
.people-nav-dept { font-size: .68rem; color: var(--default-color); opacity: .7; white-space: pre-line; line-height: 1.3; margin-top: 2px; }
.people-nav-card.is-current { border-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 6%, #fff); }

@media (max-width: 767px) {
	.people-nav-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.product-tile { padding: 14px 10px; gap: 0; }
	.product-tile .ptagline { display: none; }
	.product-tile .plogo { height: auto; width: auto; max-height: 30px; max-width: 150px; }
}

/* Nova's stock .hero:after (desktop, >=1200px) is a fully OPAQUE navy/black panel over
   the left 44% of the hero — meant to give the headline a solid backdrop, but on our
   photo that panel sits directly over the left-hand person and hides them completely.
   Replace it with a left-to-right fade instead of a flat opaque fill, so the text still
   has a darker backdrop near where it sits but the photo — and both people in it —
   read through it rather than disappearing behind a solid block. */
@media (min-width: 1200px) {
	.hero:after {
		background-image: linear-gradient(90deg, rgba(32,42,128,.65) 0%, rgba(32,42,128,.45) 60%, rgba(32,42,128,0) 100%);
	}
}