/* ==========================================================================
   1.8.393 — Service-page family (body.idx-family): Magazines, 1911 Grips, Wood Signs, UV/LED,
   Printing, Custom Design. Same language as Signs & Sheet / Laser Ready Blanks / shop:
   navy hero with the footer diamond lattice + yellow base rule, white one-line headline,
   full-width sections (40px sides), light ↔ navy rhythm, one card style with hover lift,
   textured CTA band. Styling only — copy, prices, photos and links are unchanged.
   ========================================================================== */
.idx-family {
	--pf-navy: #0f143a; --pf-navy-2: #1b2560; --pf-blue: #2d4a8a; --pf-sky: #9ccaf5;
	--pf-yellow: #f3c91a; --pf-red: #8f1c2c; --pf-red-dk: #8f1c2c;
	--pf-line: #e3e6ef; --pf-bg: #f5f6fa; --pf-muted: #5b6080; --pf-radius: 14px;
	--pf-side: 40px;
}
@media (max-width: 1024px) { .idx-family { --pf-side: 24px; } }
@media (max-width: 600px) { .idx-family { --pf-side: 16px; } }

/* ---------- Full width: 40px sides (narrow text containers keep their measure) ---------- */
.idx-family .page-hero > .container,
.idx-family .section > .container:not(.container--narrow) {
	width: auto; max-width: none; margin-inline: var(--pf-side);
}
.idx-family .section > .container--full { padding-left: 0; padding-right: 0; }

/* ---------- Hero ---------- */
.idx-family .page-hero {
	padding: clamp(2.6rem, 5vw, 4.6rem) 0 clamp(2.8rem, 5vw, 4.8rem);
	background: linear-gradient(115deg, var(--pf-navy) 0%, var(--pf-navy-2) 58%, var(--pf-blue) 125%);
	border-bottom: 4px solid var(--pf-yellow); isolation: isolate;
}
.idx-family .page-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: url("../images/backgrounds/footer-diamond.png") repeat; background-size: 280px auto; opacity: .09;
}
.idx-family .page-hero::after {
	content: ""; position: absolute; z-index: -1; pointer-events: none; right: -8%; top: -40%; width: 60%; height: 170%;
	border-radius: 50%; background: radial-gradient(closest-side, rgba(156, 202, 245, .22), rgba(156, 202, 245, 0));
}
.idx-family .page-hero [class*="hero__grid"] { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.idx-family .page-hero [class*="hero__copy"] { min-width: 0; }
.idx-family .page-hero .hero__eyebrow { color: var(--pf-yellow) !important; margin-bottom: 1rem; }
.idx-family .page-hero .hero__eyebrow::before { width: 34px; height: 2px; background: var(--pf-yellow); }
.idx-family .page-hero h1 {
	margin: 0 0 1rem; color: #fff; white-space: nowrap; line-height: 1.04; letter-spacing: -.015em;
	font-size: clamp(2.1rem, 3.9vw, 3.75rem);
}
.idx-family .page-hero p { color: rgba(255, 255, 255, .8); }
.idx-family .page-hero [class*="hero__lead"] { color: #fff; font-weight: 600; font-size: clamp(1.02rem, 1.3vw, 1.18rem); max-width: 54ch; }
.idx-family .page-hero [class*="hero__tag"] { color: var(--pf-yellow); }
.idx-family .page-hero [class*="hero__media"] {
	position: relative; border-radius: 18px; overflow: hidden; justify-self: end; width: 100%; max-width: 620px;
	box-shadow: 14px 14px 0 0 var(--pf-yellow), 0 26px 60px rgba(0, 0, 0, .38);
	outline: 1px solid rgba(255, 255, 255, .14); outline-offset: -1px;
}
.idx-family .page-hero [class*="hero__media"] img { display: block; width: 100%; height: auto; max-height: 470px; object-fit: cover; }
.idx-family .page-hero .btn--ghost { border-color: rgba(255, 255, 255, .45); color: #fff; }
.idx-family .page-hero .btn--ghost:hover, .idx-family .page-hero .btn--ghost:focus-visible { background: #fff; border-color: #fff; color: var(--pf-navy); }
@media (max-width: 1024px) {
	.idx-family .page-hero [class*="hero__grid"] { grid-template-columns: 1fr; }
	.idx-family .page-hero [class*="hero__media"] { justify-self: start; max-width: 560px; box-shadow: 9px 9px 0 0 var(--pf-yellow), 0 18px 40px rgba(0, 0, 0, .32); }
}
@media (max-width: 600px) {
	.idx-family .page-hero h1 { font-size: clamp(1.7rem, 8.6vw, 2.4rem); }
	.idx-family .page-hero [class*="hero__media"] { width: calc(100% - 9px); }
	.idx-family .page-hero [class*="hero__media"] img { max-height: 320px; }
}

/* ---------- Section headers ---------- */
.idx-family .section__header { max-width: 760px; }
.idx-family .section__eyebrow { display: inline-flex; align-items: center; gap: .55rem; color: var(--pf-red); }
.idx-family .section__eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--pf-yellow); flex-shrink: 0; }
.idx-family .section h2 { letter-spacing: -.01em; }
.idx-family .section--ink .section__eyebrow { color: var(--pf-yellow); }

/* ---------- Light sections: soft base + faint navy diamond lattice (Laser Blanks "Start here" texture) ---------- */
.idx-family .section--paper:not(.wood-gallery-section) { position: relative; isolation: isolate; background: linear-gradient(180deg, #eef0f7 0, var(--pf-bg) 260px, #f7f8fb 100%); }
.idx-family .section--paper:not(.wood-gallery-section)::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--pf-navy); opacity: .06;
	-webkit-mask-image: url("../images/backgrounds/footer-diamond.png"); -webkit-mask-size: 280px auto; -webkit-mask-repeat: repeat;
	mask-image: url("../images/backgrounds/footer-diamond.png"); mask-size: 280px auto; mask-repeat: repeat;
}

/* ---------- Navy bands (rhythm): magazine stock, grip options, logo wall ---------- */
.idx-family--magazines #blanks,
.idx-family--grips .section:has(.grips-options-grid),
.idx-family--graphic-design .section:has(.graphic-logo-grid) {
	position: relative; isolation: isolate; color: #fff;
	background: linear-gradient(160deg, var(--pf-navy) 0%, var(--pf-navy-2) 70%, #22336e 100%);
}
.idx-family--magazines #blanks::before,
.idx-family--grips .section:has(.grips-options-grid)::before,
.idx-family--graphic-design .section:has(.graphic-logo-grid)::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .09;
	background: url("../images/backgrounds/footer-diamond.png") repeat; background-size: 280px auto;
	-webkit-mask-image: none; mask-image: none;
}
.idx-family--magazines #blanks h2,
.idx-family--grips .section:has(.grips-options-grid) h2,
.idx-family--graphic-design .section:has(.graphic-logo-grid) h2 { color: #fff; }
.idx-family--magazines #blanks .section__lead,
.idx-family--grips .section:has(.grips-options-grid) .section__lead,
.idx-family--graphic-design .section:has(.graphic-logo-grid) .section__lead { color: rgba(255, 255, 255, .78); }
.idx-family--magazines #blanks .section__eyebrow,
.idx-family--grips .section:has(.grips-options-grid) .section__eyebrow,
.idx-family--graphic-design .section:has(.graphic-logo-grid) .section__eyebrow { color: var(--pf-yellow); }
.idx-family--magazines #blanks { border-top: 4px solid var(--pf-yellow); }

/* ---------- One card style ---------- */
.idx-family .magazines-product-card,
.idx-family .grips-option-card,
.idx-family .grips-feature-grid > li,
.idx-family .signage-info-card,
.idx-family .signage-stack__item,
.idx-family .graphic-showcase__item,
.idx-family .graphic-pricing__card {
	position: relative; background: #fff; border: 1px solid var(--pf-line); border-radius: var(--pf-radius); overflow: hidden;
	box-shadow: 0 6px 18px rgba(15, 20, 58, .06);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.idx-family .magazines-product-card::after,
.idx-family .grips-option-card::after,
.idx-family .grips-feature-grid > li::after,
.idx-family .signage-info-card::after,
.idx-family .signage-stack__item::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pf-yellow);
	transform: scaleX(0); transform-origin: left center; transition: transform .3s ease;
}
.idx-family .magazines-product-card:hover,
.idx-family .grips-option-card:hover,
.idx-family .grips-feature-grid > li:hover,
.idx-family .signage-info-card:hover,
.idx-family .signage-stack__item:hover,
.idx-family .graphic-showcase__item:hover {
	transform: translateY(-4px); border-color: rgba(15, 20, 58, .16); box-shadow: 0 18px 36px rgba(15, 20, 58, .14);
}
.idx-family .magazines-product-card:hover::after,
.idx-family .grips-option-card:hover::after,
.idx-family .grips-feature-grid > li:hover::after,
.idx-family .signage-info-card:hover::after,
.idx-family .signage-stack__item:hover::after { transform: scaleX(1); }
.idx-family .magazines-product-card img,
.idx-family .grips-option-card img,
.idx-family .signage-stack__media img,
.idx-family .graphic-showcase__item img { transition: transform .5s ease; }
.idx-family .magazines-product-card:hover img,
.idx-family .grips-option-card:hover img,
.idx-family .signage-stack__item:hover .signage-stack__media img,
.idx-family .graphic-showcase__item:hover img { transform: scale(1.05); }
.idx-family .magazines-product-card h3,
.idx-family .grips-option-card h3,
.idx-family .signage-info-card h3,
.idx-family .signage-stack__copy h3 { color: var(--pf-navy); }
.idx-family .magazines-product-card__price { color: var(--pf-red); font-weight: 800; }
.idx-family .signage-info-card { padding: 1.35rem 1.4rem 1.5rem; }

/* Gallery tiles: rounded, zoom on hover */
.idx-family .magazines-gallery__item,
.idx-family .grips-gallery__item,
.idx-family .graphic-logo-grid__item {
	border-radius: 12px; overflow: hidden; box-shadow: 0 6px 18px rgba(15, 20, 58, .08); transition: transform .22s ease, box-shadow .22s ease;
}
.idx-family .magazines-gallery__item img,
.idx-family .grips-gallery__item img,
.idx-family .wood-gallery__item img { transition: transform .5s ease; }
.idx-family .magazines-gallery__item:hover,
.idx-family .grips-gallery__item:hover,
.idx-family .graphic-logo-grid__item:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(15, 20, 58, .16); }
.idx-family .magazines-gallery__item:hover img,
.idx-family .grips-gallery__item:hover img,
.idx-family .wood-gallery__item:hover img { transform: scale(1.05); }

/* ---------- Wider grids now that sections are full width ---------- */
@media (min-width: 1280px) {
	.idx-family .magazines-product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.idx-family .magazines-product-grid--blanks { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.idx-family .magazines-gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.idx-family .graphic-showcase { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.idx-family .graphic-logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1600px) {
	.idx-family .magazines-product-grid:not(.magazines-product-grid--blanks) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- CTA band ---------- */
.idx-family .section--ink { position: relative; isolation: isolate; background: linear-gradient(160deg, #0b0f2e 0%, var(--pf-navy) 55%, var(--pf-navy-2) 100%); }
.idx-family .section--ink::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .08;
	background: url("../images/backgrounds/footer-diamond.png") repeat; background-size: 280px auto;
}
.idx-family .section--ink .cta-band {
	position: relative; overflow: hidden; padding: clamp(1.8rem, 3.5vw, 2.8rem);
	border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; border-top: 4px solid var(--pf-yellow);
	background: linear-gradient(135deg, rgba(27, 37, 96, .92), rgba(15, 20, 58, .96));
	box-shadow: 0 24px 50px rgba(0, 0, 0, .35);
}
.idx-family .section--ink .cta-band h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.idx-family .section--ink .cta-band a:not(.btn) { color: var(--pf-yellow); }

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
	.idx-family .section { padding: clamp(2.6rem, 9vw, 3.5rem) 0; }
	.idx-family .section__header { margin-bottom: 1.75rem; }
	.idx-family .section--ink .cta-band { border-radius: 14px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.idx-family .magazines-product-card, .idx-family .grips-option-card, .idx-family .grips-feature-grid > li,
	.idx-family .signage-info-card, .idx-family .signage-stack__item, .idx-family .graphic-showcase__item,
	.idx-family .magazines-gallery__item, .idx-family .grips-gallery__item, .idx-family .graphic-logo-grid__item,
	.idx-family img, .idx-family [class*="card"]::after, .idx-family .signage-stack__item::after { transition: none !important; }
	.idx-family .magazines-product-card:hover, .idx-family .grips-option-card:hover, .idx-family .grips-feature-grid > li:hover,
	.idx-family .signage-info-card:hover, .idx-family .signage-stack__item:hover, .idx-family .graphic-showcase__item:hover,
	.idx-family .magazines-gallery__item:hover, .idx-family .grips-gallery__item:hover, .idx-family .graphic-logo-grid__item:hover,
	.idx-family :hover > img, .idx-family :hover img { transform: none !important; }
}

/* QA fixes */
.idx-family .page-hero [class*="hero__media"] { aspect-ratio: auto; min-height: 0; height: auto; align-self: center; }
.idx-family .page-hero [class*="hero__media"] img,
.idx-family .page-hero [class*="hero__media"] picture { height: auto; }
.idx-family .section > .container--narrow { width: auto; max-width: 820px; margin-left: var(--pf-side); margin-right: var(--pf-side); }

/* ==========================================================================
   1.8.395 — Our Work, About (Team IDX), Contact join the family. Shared pf-* building blocks.
   ========================================================================== */
.idx-family .pf-hero__grid { display: grid; }
.idx-family .pf-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.idx-family .pf-hero__media { background: var(--pf-navy); }
.idx-family .pf-hero__media img { aspect-ratio: 4 / 3; }
.idx-family .page-hero .pf-hero__tag {
	margin: -.2rem 0 .9rem; color: var(--pf-yellow); font-family: var(--font-display); font-weight: 700;
	font-size: clamp(1.05rem, 1.5vw, 1.35rem); letter-spacing: .02em;
}
.idx-family .page-hero .btn--ghost.idx-contact-link { text-transform: none; letter-spacing: .01em; }

/* Card grids */
.idx-family .pf-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 1.6vw, 1.5rem); }
.idx-family .pf-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.idx-family .pf-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .idx-family .pf-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .idx-family .pf-cards--3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .idx-family .pf-cards--4 { grid-template-columns: 1fr; } }
.idx-family .pf-card {
	position: relative; margin: 0; background: #fff; border: 1px solid var(--pf-line); border-radius: var(--pf-radius);
	padding: 1.5rem 1.5rem 1.6rem; overflow: hidden; box-shadow: 0 6px 18px rgba(15, 20, 58, .06);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.idx-family .pf-card::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pf-yellow);
	transform: scaleX(0); transform-origin: left center; transition: transform .3s ease;
}
.idx-family .pf-card:hover { transform: translateY(-4px); border-color: rgba(15, 20, 58, .16); box-shadow: 0 18px 36px rgba(15, 20, 58, .14); }
.idx-family .pf-card:hover::after { transform: scaleX(1); }
.idx-family .pf-card h3 { margin: 0 0 .5rem; color: var(--pf-navy); font-size: 1.25rem; }
.idx-family .pf-card p { color: var(--pf-muted); line-height: 1.6; margin: 0 0 .75rem; }
.idx-family .pf-card p:last-child { margin-bottom: 0; }

/* Section text on navy bands */
.idx-family .section--ink .section__header h2 { color: #fff; }
.idx-family .section--ink .section__lead { color: rgba(255, 255, 255, .78); }

/* CTA band (Work / About) */
.idx-family .pf-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; flex-wrap: wrap; }
.idx-family .pf-cta__copy { max-width: 62ch; }
.idx-family .pf-cta__copy h2 { color: #fff; margin: .35rem 0 .4rem; }
.idx-family .pf-cta__copy p:not(.section__eyebrow) { color: rgba(255, 255, 255, .8); margin: 0; }
.idx-family .pf-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.idx-family .section--ink .btn--ghost { border-color: rgba(255, 255, 255, .45); color: #fff; text-transform: none; }
.idx-family .section--ink .btn--ghost:hover, .idx-family .section--ink .btn--ghost:focus-visible { background: #fff; border-color: #fff; color: var(--pf-navy); }

/* Our Work gallery: full width, hover zoom, lightbox (shared [data-idx-lightbox] script) */
.idx-family .pf-gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(.6rem, 1vw, 1rem); }
.idx-family .pf-gallery .gallery-item {
	margin: 0; cursor: zoom-in; border-radius: 12px; overflow: hidden; background: #fff !important;
	box-shadow: 0 6px 18px rgba(15, 20, 58, .08); transition: transform .22s ease, box-shadow .22s ease;
}
.idx-family .pf-gallery .gallery-item img { transition: transform .5s ease; }
.idx-family .pf-gallery .gallery-item:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(15, 20, 58, .16); }
.idx-family .pf-gallery .gallery-item:hover img { transform: scale(1.06); }
@media (max-width: 1279px) { .idx-family .pf-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) { .idx-family .pf-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .idx-family .pf-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* About — intro + mosaic, I.D.X cards, family of brands, locations */
.idx-family .about-intro--family { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.idx-family .about-intro--family .prose { max-width: 62ch; }
.idx-family.about-page .about-mosaic--family, .idx-family .about-mosaic--family { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 1024px) { .idx-family .about-intro--family { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .idx-family .about-mosaic--family { grid-template-columns: 1fr 1fr; gap: .6rem; } .idx-family .about-mosaic__card, .idx-family .about-mosaic__card img { min-height: 160px; } }
.idx-family .idx-words { counter-reset: none; }
.idx-family .idx-words__card { padding-top: 1.35rem; }
.idx-family .idx-words__letter {
	display: inline-grid; place-items: center; width: 3.1rem; height: 3.1rem; margin-bottom: 1rem; border-radius: 12px;
	background: var(--pf-navy); color: var(--pf-yellow); font-family: var(--font-display); font-weight: 800; font-size: 1.6rem;
	box-shadow: 4px 4px 0 var(--pf-red);
}
.idx-family .idx-words__card:nth-child(2) .idx-words__letter { box-shadow: 4px 4px 0 var(--pf-sky); }
.idx-family .idx-words__card:nth-child(3) .idx-words__letter { box-shadow: 4px 4px 0 var(--pf-yellow); color: #fff; }
.idx-family .about-values__panel.pf-card { padding: 1.75rem 1.6rem; }
.idx-family .idx-brand { display: flex; flex-direction: column; }
.idx-family .idx-brand__tag, .idx-family .pf-loc__status {
	align-self: flex-start; margin: 0 0 .8rem !important; padding: .28rem .65rem; border-radius: 999px;
	background: rgba(15, 20, 58, .06); color: var(--pf-navy) !important; font-size: .7rem !important; font-weight: 800;
	letter-spacing: .12em; text-transform: uppercase; line-height: 1.2 !important;
}
.idx-family .pf-loc__status { display: inline-block; }
.idx-family .pf-loc__status--open { background: rgba(243, 201, 26, .22); }
.idx-family .idx-brand--soon { background: linear-gradient(160deg, #fff, #f3f5fb); border-style: dashed; }
.idx-family .idx-brand--soon .idx-brand__tag { background: rgba(143, 28, 44, .1); color: var(--pf-red-dk) !important; }
.idx-family .idx-brand__link, .idx-family .pf-loc__link {
	margin-top: auto; align-self: flex-start; color: var(--pf-red-dk); font-weight: 700; text-decoration: none;
	border-bottom: 2px solid rgba(143, 28, 44, .25); padding-bottom: 1px; word-break: break-word;
}
.idx-family .idx-brand__link:hover, .idx-family .pf-loc__link:hover, .idx-family .idx-brand__link:focus-visible, .idx-family .pf-loc__link:focus-visible { color: #6e1522; border-bottom-color: var(--pf-red); }
.idx-family .pf-loc { display: flex; flex-direction: column; }
.idx-family .pf-loc__social { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.idx-family .pf-loc__social .pf-loc__link { margin-top: 0; }
.idx-family .idx-family-also { margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--pf-muted); font-weight: 600; }
.idx-family .idx-chip { display: inline-block; padding: .3rem .8rem; border-radius: 999px; background: #fff; border: 1px solid var(--pf-line); color: var(--pf-navy); font-weight: 700; font-size: .85rem; }

/* Contact — cards + form card */
.idx-family .contact-grid--family { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.idx-family .contact-stack { display: grid; gap: 1rem; }
.idx-family .contact-card.pf-card { margin: 0; }
.idx-family .contact-card.pf-card h2 { font-size: 1.25rem; margin: 0 0 .5rem; color: var(--pf-navy); }
.idx-family .contact-card.pf-card a { color: var(--pf-red-dk); font-weight: 700; }
.idx-family .contact-form-card { padding: clamp(1.4rem, 2.4vw, 2.2rem); }
.idx-family .contact-form-card:hover { transform: none; }
.idx-family .contact-form-card::after { transform: scaleX(1); }
.idx-family .contact-form-card__title { margin: 0 0 1.25rem; color: var(--pf-navy); font-size: clamp(1.35rem, 2vw, 1.7rem); }
.idx-family .contact-form input:focus, .idx-family .contact-form textarea:focus, .idx-family .contact-form select:focus { outline: 2px solid var(--pf-yellow); outline-offset: 1px; border-color: var(--pf-navy); }
.idx-family .contact-form .btn--dark { min-width: 200px; }
@media (max-width: 900px) { .idx-family .contact-grid--family { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
	.idx-family .pf-card, .idx-family .pf-gallery .gallery-item { transition: none !important; }
	.idx-family .pf-card:hover, .idx-family .pf-gallery .gallery-item:hover { transform: none !important; }
}

/* ==========================================================================
   1.8.420 — About: section headings stay on one line at every width.
   Each headline keeps the site h2 size (clamp(1.9rem, 3.5vw, 2.75rem)) until its one-line width
   would pass the header box (760px max, page width minus 48px on smaller screens); then it scales
   with the viewport. Divisors = headline length in em at the display font (+~5% safety).
   ========================================================================== */
body.idx-family--about .about-page h2#team-idx-family-h,
body.idx-family--about .about-page h2#idx-meaning,
body.idx-family--about .about-page h2#about-locations,
body.idx-family--about .about-page .about-intro--family h2 { white-space: nowrap; max-width: none; }
/* 1.8.421 — "Many doors to one Family." (13.0em wide): divisor 23.3 → 13.6
   1.8.422 — Oswald 600 widths: Many doors 10.0em → /10.6, Imagine 10.0em → /10.5, Texas shop 9.2em → /9.7, Welcome 8.6em → /9.1 */
body.idx-family--about .about-page h2#team-idx-family-h { font-size: min(clamp(1.9rem, 3.5vw, 2.75rem), calc(min(760px, 100vw - 48px) / 10.6)); }
body.idx-family--about .about-page h2#idx-meaning { font-size: min(clamp(1.9rem, 3.5vw, 2.75rem), calc(min(760px, 100vw - 48px) / 10.5)); }
body.idx-family--about .about-page h2#about-locations { font-size: min(clamp(1.9rem, 3.5vw, 2.75rem), calc(min(760px, 100vw - 48px) / 9.7)); }
@media (max-width: 700px) {
	body.idx-family--about .about-page .about-intro--family h2 { font-size: min(1.9rem, calc((100vw - 48px) / 9.1)); }
}

/* ==========================================================================
   1.8.424 — About: TEAM IDX lockup hero, I.D.X lead + X hero letter,
   "Behind the badge" section, HQ copy.
   ========================================================================== */
/* Hero: the h1 carries the reverse lockup image (alt "TEAM IDX" stays the heading text). */
body.idx-family--about .pf-hero h1.pf-hero__lockup { margin: 0 0 1.1rem; line-height: 0; white-space: normal; font-size: 1rem; }
body.idx-family--about .pf-hero__lockup img { display: block; width: 100%; max-width: 560px; height: auto; }
@media (max-width: 600px) { body.idx-family--about .pf-hero__lockup img { max-width: 100%; } }

/* I.D.X: lead line under the heading + the X card letter as the hero. */
body.idx-family--about .idx-words__lead { margin-top: .75rem; max-width: 60ch; font-size: clamp(1rem, 1.25vw, 1.15rem); }
body.idx-family--about .idx-words__card:nth-child(3) .idx-words__letter {
	width: 4rem; height: 4rem; margin-bottom: .85rem; font-family: var(--font-head); font-weight: 700; font-size: 2.6rem; line-height: 1;
	color: #f3c91a; background: var(--pf-navy); box-shadow: 4px 4px 0 #f3c91a, 0 0 0 1px rgba(243, 201, 26, .55) inset;
}

/* Behind the badge */
body.idx-family--about .about-mark__grid {
	display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; max-width: 1080px;
}
body.idx-family--about .about-mark__media { justify-self: center; width: 100%; max-width: 380px; }
body.idx-family--about .about-mark__media img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(15, 20, 58, .22)); }
body.idx-family--about .about-mark__copy h2 { margin: .35rem 0 1.25rem; color: var(--pf-navy); white-space: nowrap; }
body.idx-family--about .about-mark__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
body.idx-family--about .about-mark__list li {
	position: relative; padding: .2rem 0 .2rem 1.6rem; font-family: var(--font-body); font-weight: 400; font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.55; color: #1a1f45;
}
body.idx-family--about .about-mark__list li::before {
	content: ""; position: absolute; left: 0; top: .78em; width: .7rem; height: .7rem; transform: translateY(-50%) rotate(45deg); background: #f3c91a; box-shadow: 2px 2px 0 var(--pf-navy);
}
@media (max-width: 860px) {
	body.idx-family--about .about-mark__grid { grid-template-columns: 1fr; gap: 1.75rem; }
	body.idx-family--about .about-mark__media { max-width: 260px; }
	body.idx-family--about .about-mark__copy { text-align: left; }
}

/* Locations: longer heading ("Headquartered in Texas. Rooted in Idaho.") — one line on desktop, wraps cleanly on phones. */
body.idx-family--about .about-page h2#about-locations { font-size: min(clamp(1.9rem, 3.5vw, 2.75rem), calc(min(1100px, 100vw - 48px) / 16.5)); }
@media (max-width: 700px) {
	body.idx-family--about .about-page h2#about-locations { font-size: clamp(1.6rem, 7vw, 2rem); text-wrap: balance; }
}

/* 1.8.425 — Behind the badge: approved TEAM ★ IDX wordmark (navy, from lockup-horizontal) beside the eagle so they read as the full lockup. */
body.idx-family--about .about-mark__wordmark { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 0 1.9rem; }
@media (max-width: 860px) {
	body.idx-family--about .about-mark__wordmark { max-width: 320px; margin: 0 auto 1.5rem; }
}
/* 1.8.425 — About hero lead: two set lines (line 2 always starts "Same crew mindset"); line 1 stays on one line on desktop. */
body.idx-family--about .pf-hero .pf-hero__lead { max-width: none; }
body.idx-family--about .pf-hero .pf-hero__lead-line { display: block; }
@media (min-width: 1025px) { body.idx-family--about .pf-hero .pf-hero__lead-line:first-child { white-space: nowrap; } }

/* ==========================================================================
   1.8.426 — "Follow along / Social" card (About + Contact): icon tiles.
   48px square navy tile, white icon; hover/focus = 1.8.423 slide fill to yellow, navy icon.
   ========================================================================== */
.idx-family .pf-loc:has(.pf-social), .idx-family .contact-card:has(.pf-social) { display: flex; flex-direction: column; }
.idx-family .pf-social__lead { margin: 0 0 1rem; font-family: var(--font-body); font-weight: 400; font-size: 1rem; line-height: 1.55; color: #3b4060; }
.idx-family .pf-social { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: .65rem; }
.idx-family .pf-social__item { margin: 0; }
.idx-family a.pf-social__link,
.idx-family .contact-card.pf-card a.pf-social__link {
	display: flex; align-items: center; gap: .9rem; padding: 0 1rem 0 0; min-height: 48px;
	border: 1px solid rgba(15, 20, 58, .14); border-radius: 0; background: #fff;
	color: #0f143a; text-decoration: none; font-weight: 600;
	transition: border-color .25s ease, box-shadow .25s ease;
}
.idx-family .pf-social__tile {
	flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; color: #fff;
	background: #0f143a linear-gradient(#f3c91a, #f3c91a) no-repeat left center / 0% 100%;
	transition: background-size .38s cubic-bezier(.2, .7, .2, 1), color .25s ease;
}
.idx-family .pf-social__tile svg { display: block; width: 24px; height: 24px; }
.idx-family .pf-social__name { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; color: #0f143a; }
.idx-family .pf-social__link::after { content: "↗"; margin-left: auto; font-size: 1rem; color: #0f143a; opacity: .55; transition: opacity .25s ease, transform .25s ease; }
.idx-family a.pf-social__link:hover, .idx-family a.pf-social__link:focus-visible,
.idx-family .contact-card.pf-card a.pf-social__link:hover, .idx-family .contact-card.pf-card a.pf-social__link:focus-visible {
	border-color: #0f143a; box-shadow: 0 10px 22px -16px rgba(15, 20, 58, .6); color: #0f143a;
}
.idx-family .pf-social__link:hover .pf-social__tile, .idx-family .pf-social__link:focus-visible .pf-social__tile { background-size: 100% 100%; color: #0f143a; }
.idx-family .pf-social__link:hover::after, .idx-family .pf-social__link:focus-visible::after { opacity: 1; transform: translate(2px, -2px); }
.idx-family .pf-social__link:focus-visible { outline: 2px solid #f3c91a; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.idx-family .pf-social__tile, .idx-family .pf-social__link, .idx-family .pf-social__link::after { transition: none; }
}

/* 1.8.427 — About hero: breathing room between the lockup and "Concept to Creation". */
body.idx-family--about .pf-hero h1.pf-hero__lockup { margin-bottom: 50px; }
@media (max-width: 600px) { body.idx-family--about .pf-hero h1.pf-hero__lockup { margin-bottom: 32px; } }
body.idx-family--about .pf-hero .pf-hero__tag { margin-top: 0; }
body.idx-family--about #idx-meaning .idx-em { color: #f3c91a; }
