/* ==========================================================================
   benqueils-custom.css
   Benqueil's Fine Jewelry - Punchmark Global CSS
   Paste into Site Manager > Design / Theme Settings > Global CSS.
   Do NOT paste into the page editor.

   Palette B "Black Lacquer" (Sept 24, 2026). Supersedes the sage palette
   in DES-1282. Sampled from the store's second photo delivery: black
   lacquer casework, espresso and cognac wood, brass, ivory.

     Background ivory      #F8F3EA   template background slot
     Primary black         #161412   template primary slot
     Body text             #141414
     Band tint (linen)     #EFE6D8
     Cognac accent         #6B3A22   eyebrows, captions, inline links
     Gold, decorative      #B8912F   rules and flourishes on light grounds
     Gold, light           #C9A45C   the only gold allowed as text, and
                                     only on black
     Green accent          #56604A   icons only, the "little touch of green"

   Contrast, all text pairs AAA:
     ivory on black        16.62:1
     black on ivory        16.62:1
     black on linen        14.86:1
     cognac on ivory        8.43:1
     cognac on linen        7.54:1
     ivory on cognac        8.43:1
     gold light on black    7.83:1
     ink on gold light      7.85:1   (button hover fills)
   Non-text only:
     green on ivory 6.00:1, green on linen 5.36:1, gold on ivory 2.67:1.
   Do not substitute colors without re-running contrast.

   Because the primary and body text are both near black, color alone can
   no longer tell a link from body copy. Links inside these widgets are
   cognac AND underlined. Keep the underline.

   Sections:
     1. Gabriel & Co. embed container
     2. Giftware landing page (no CSS)
     3. Perks page
     4. Teva Diamonds education page
     5. Homepage trust banner
     6. Reusable page intro (pagebuilder pages, embed pages, category grids)
   ========================================================================== */

:root {
	--bq-cream: #F8F3EA;
	--bq-primary: #161412;
	--bq-ink: #141414;
	--bq-tint: #EFE6D8;
	--bq-cognac: #6B3A22;
	--bq-gold: #B8912F;
	--bq-gold-lt: #C9A45C;
	--bq-green: #56604A;
}

/* --------------------------------------------------------------------------
   1. Gabriel & Co. embed container (Bridal, Fashion, Stackables pages)
   -------------------------------------------------------------------------- */

.benqueils-gabriel-embed {
	min-height: 900px;
}

@media (min-width: 768px) {
	.benqueils-gabriel-embed { min-height: 1200px; }
}

@media (min-width: 1200px) {
	.benqueils-gabriel-embed { min-height: 1400px; }
}

/* --------------------------------------------------------------------------
   2. Giftware landing page (/pages/giftware)
   No custom CSS needed. The page is built from native pagebuilder widgets and
   inherits the template's own section, heading, and button styling.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   3. Perks page (/pages/perks)
   Icons are inline SVG in the widget markup. They inherit color from
   currentColor, so they follow the palette with no icon font to load.
   -------------------------------------------------------------------------- */

.benqueils-perks {
	color: var(--bq-ink);
	font-size: 1rem;
	line-height: 1.65;
}

.benqueils-perks p { font-size: 1rem; }

.benqueils-perks h2,
.benqueils-perks h3 { color: var(--bq-primary); }

/* shared icon treatment */

.benqueils-perks svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* hero */

.benqueils-perks .bq-perks-hero { padding-block: 3rem 2rem; }

.benqueils-perks .bq-perks-eyebrow {
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .8125rem;
	color: var(--bq-cognac);
	margin-bottom: .5rem;
}

.benqueils-perks .bq-perks-h1 {
	color: var(--bq-primary);
	margin-bottom: 1rem;
}

.benqueils-perks .bq-perks-lede { font-size: 1.125rem; }

/* at a glance */

.benqueils-perks .bq-perks-glance { margin-bottom: 3.5rem; }

.benqueils-perks .bq-glance {
	background: var(--bq-primary);
	color: var(--bq-cream);
	padding: 1.5rem 1rem;
	text-align: center;
}

/* Every element inside the black tile must set its color explicitly. The
   theme has its own p rule, and an inherited color loses to it, which is
   what put dark ink on the colored tile the first time around. */
.benqueils-perks .bq-glance p,
.benqueils-perks .bq-glance a { color: var(--bq-cream); }

.benqueils-perks .bq-glance-num {
	font-size: 1.5rem;
	line-height: 1.2;
	margin-bottom: .35rem;
	color: var(--bq-cream);
}

.benqueils-perks .bq-glance-label {
	font-size: .9375rem;
	margin-bottom: 0;
	color: var(--bq-cream);
}

/* the four perk cards */

.benqueils-perks .bq-perks-grid { margin-bottom: 3.5rem; }

.benqueils-perks .bq-perk {
	background: var(--bq-tint);
	border-top: 3px solid var(--bq-primary);
	padding: 2rem 1.75rem;
}

.benqueils-perks .bq-perk-icon {
	display: block;
	width: 3.5rem;
	height: 3.5rem;
	color: var(--bq-green);
	margin-bottom: 1.25rem;
}

.benqueils-perks .bq-perk-num {
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .8125rem;
	color: var(--bq-cognac);
	margin-bottom: .35rem;
}

.benqueils-perks .bq-perk-title {
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

.benqueils-perks .bq-perk-title::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 2px;
	background: var(--bq-gold);
	margin-top: .75rem;
}

.benqueils-perks .bq-perk p:last-child { margin-bottom: 0; }

.benqueils-perks .bq-perk a {
	color: var(--bq-cognac);
	text-decoration: underline;
}

/* shared section headings */

.benqueils-perks .bq-perks-section-title { margin-bottom: .75rem; }

.benqueils-perks .bq-perks-section-lede {
	font-size: 1.0625rem;
	margin-bottom: 2rem;
}

/* how to use them */

.benqueils-perks .bq-perks-how {
	background: var(--bq-tint);
	padding-block: 3rem;
	margin-inline: 0;
	margin-bottom: 3.5rem;
}

.benqueils-perks .bq-step {
	padding: 0 .5rem;
	text-align: center;
}

/* green, not gold: gold on linen is 2.38:1, under the 3:1 needed for a
   meaningful icon. Green on linen is 5.36:1. */
.benqueils-perks .bq-step-icon {
	display: inline-block;
	width: 2.75rem;
	height: 2.75rem;
	color: var(--bq-green);
	margin-bottom: .75rem;
}

.benqueils-perks .bq-step-title {
	font-size: 1.125rem;
	margin-bottom: .5rem;
}

.benqueils-perks .bq-step p:last-child { margin-bottom: 0; }

/* while you are here */

.benqueils-perks .bq-perks-services { margin-bottom: 3.5rem; }

.benqueils-perks .bq-service-link {
	display: block;
	padding: .875rem 1.25rem;
	border: 1px solid var(--bq-primary);
	color: var(--bq-primary);
	text-decoration: none;
	text-align: center;
	transition: background-color .15s ease, color .15s ease;
}

.benqueils-perks .bq-service-link:hover,
.benqueils-perks .bq-service-link:focus {
	background: var(--bq-primary);
	color: var(--bq-cream);
	text-decoration: underline;
}

/* faq */

.benqueils-perks .bq-perks-faq { margin-bottom: 3rem; }

.benqueils-perks .bq-faq-item {
	border-top: 1px solid var(--bq-primary);
	padding-block: 1.25rem;
}

.benqueils-perks .bq-faq-item:last-child { border-bottom: 1px solid var(--bq-primary); }

.benqueils-perks .bq-faq-q {
	font-size: 1.125rem;
	margin-bottom: .5rem;
}

.benqueils-perks .bq-faq-item p { margin-bottom: 0; }

/* cta */

.benqueils-perks .bq-perks-cta { padding-bottom: 3.5rem; }

.benqueils-perks .bq-perks-cta-title { margin-bottom: 1rem; }

.benqueils-perks .bq-perks-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
	margin-top: 1.5rem;
	margin-bottom: 0;
}

/* buttons: ivory on black and black on ivory are both 16.62:1, AAA */

.benqueils-perks .btn-primary {
	background-color: var(--bq-primary);
	border-color: var(--bq-primary);
	color: var(--bq-cream);
}

.benqueils-perks .btn-outline-primary {
	border-color: var(--bq-primary);
	color: var(--bq-primary);
}

.benqueils-perks .btn-primary:hover,
.benqueils-perks .btn-primary:focus,
.benqueils-perks .btn-outline-primary:hover,
.benqueils-perks .btn-outline-primary:focus {
	background-color: var(--bq-cream);
	border-color: var(--bq-primary);
	color: var(--bq-primary);
	text-decoration: underline;
}

.benqueils-perks .btn:focus-visible {
	outline: 3px solid var(--bq-cognac);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   4. Teva Diamonds education page (proposed /education/teva-diamonds)
   Same palette and same icon approach as section 3. Inline SVG, currentColor,
   no icon font. Every element sitting on a colored ground sets its own color
   explicitly, for the same theme-specificity reason noted in section 3.

   Color rhythm down the page, so no two adjacent bands match:
     hero          ivory
     hero image    ivory
     glance        black tiles, center tile ruled in gold
     explainer     ivory, framed portrait
     quote         photo under a near opaque black wash
     compare       linen band, ivory cards
     disclosure    full bleed cognac (the wood tone)
     faq           ivory
     cta           photo under a near opaque ink wash

   Contrast: ivory on black 16.62:1, ivory on cognac 8.43:1, both AAA. The
   two photo bands put ivory on a 0.92 wash, which stays above 13:1 for any
   image that lands under it. Gold text appears only on black, and only in
   the light gold (7.83:1). Standard gold stays decorative.
   -------------------------------------------------------------------------- */

.benqueils-teva {
	color: var(--bq-ink);
	font-size: 1rem;
	line-height: 1.65;
}

.benqueils-teva p { font-size: 1rem; }

.benqueils-teva h2,
.benqueils-teva h3 { color: var(--bq-primary); }

.benqueils-teva svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* shared image treatment */

.benqueils-teva .bq-figure { margin: 0; }

.benqueils-teva .bq-figure img {
	display: block;
	width: 100%;
	height: auto;
}

/* the portrait in the explainer gets a gold corner rule so an ordinary
   product photo still reads as art directed */
.benqueils-teva .bq-figure-frame {
	position: relative;
	padding: 0 0 .75rem .75rem;
}

.benqueils-teva .bq-figure-frame::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 55%;
	height: 55%;
	border-left: 3px solid var(--bq-gold);
	border-bottom: 3px solid var(--bq-gold);
}

.benqueils-teva .bq-figure-cap {
	font-size: .875rem;
	color: var(--bq-cognac);
	padding-top: .625rem;
	border-top: 1px solid var(--bq-gold);
	margin-top: .75rem;
}

/* shared eyebrow, section headings, gold rule */

.benqueils-teva .bq-teva-eyebrow {
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .8125rem;
	color: var(--bq-cognac);
	margin-bottom: .5rem;
}

.benqueils-teva .bq-teva-rule {
	display: block;
	width: 3.5rem;
	height: 2px;
	background: var(--bq-gold);
	margin: 0 auto 1.25rem;
}

.benqueils-teva .bq-teva-section-title { margin-bottom: .75rem; }

.benqueils-teva .bq-teva-section-lede {
	font-size: 1.0625rem;
	margin-bottom: 2rem;
}

/* anything sitting on a dark band. The class name is kept from the sage
   build so the widget markup does not need to change. */

.benqueils-teva .bq-on-sage { color: var(--bq-cream); }

/* hero */

.benqueils-teva .bq-teva-hero {
	background: var(--bq-cream);
	padding-block: 3.5rem 2rem;
}

.benqueils-teva .bq-teva-h1 {
	color: var(--bq-primary);
	margin-bottom: 1rem;
}

.benqueils-teva .bq-teva-lede { font-size: 1.125rem; }

/* hero image band */

.benqueils-teva .bq-teva-herofigure {
	background: var(--bq-cream);
	padding-bottom: 3.5rem;
}

/* at a glance */

.benqueils-teva .bq-teva-glance { margin-bottom: 3.5rem; }

.benqueils-teva .bq-glance {
	background: var(--bq-primary);
	color: var(--bq-cream);
	padding: 1.75rem 1rem;
	text-align: center;
	height: 100%;
	border-top: 3px solid var(--bq-primary);
}

.benqueils-teva .bq-glance p { color: var(--bq-cream); }

/* center tile is ruled and lit in gold rather than filled with it, which
   keeps the text on black at AAA */
.benqueils-teva .bq-glance-gold { border-top-color: var(--bq-gold); }

.benqueils-teva .bq-glance-gold .bq-glance-icon { color: var(--bq-gold-lt); }

.benqueils-teva .bq-glance-icon {
	display: inline-block;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--bq-cream);
	margin-bottom: .875rem;
}

.benqueils-teva .bq-glance-num {
	font-size: 1.375rem;
	line-height: 1.2;
	margin-bottom: .35rem;
	color: var(--bq-cream);
}

.benqueils-teva .bq-glance-label {
	font-size: .9375rem;
	margin-bottom: 0;
	color: var(--bq-cream);
}

/* explainer */

.benqueils-teva .bq-teva-explainer { margin-bottom: 3.5rem; }

.benqueils-teva .bq-teva-explainer p:last-child { margin-bottom: 0; }

/* quote band, photo under a black wash */

.benqueils-teva .bq-teva-quote {
	position: relative;
	margin-bottom: 3.5rem;
	background: var(--bq-primary);
	overflow: hidden;
}

.benqueils-teva .bq-quote-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* rgba of --bq-primary #161412 */
.benqueils-teva .bq-quote-body {
	position: relative;
	background: rgba(22, 20, 18, .92);
	padding-block: 4rem;
}

.benqueils-teva .bq-quote-text { margin-bottom: 1rem; }

.benqueils-teva .bq-quote-text p {
	color: var(--bq-cream);
	font-size: 1.5rem;
	line-height: 1.45;
	margin-bottom: 0;
}

.benqueils-teva .bq-quote-attr {
	color: var(--bq-gold-lt);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .8125rem;
	margin-bottom: 0;
}

/* three paths */

.benqueils-teva .bq-teva-compare {
	background: var(--bq-tint);
	padding-block: 3.5rem;
	margin-bottom: 3.5rem;
}

.benqueils-teva .bq-path {
	background: var(--bq-cream);
	border-top: 3px solid var(--bq-primary);
	height: 100%;
}

/* the middle card is the subject of the page, so it gets the gold rule */
.benqueils-teva .bq-path-feature { border-top-color: var(--bq-gold); }

.benqueils-teva .bq-path-figure {
	position: relative;
	margin: 0;
	overflow: hidden;
}

.benqueils-teva .bq-path-figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.benqueils-teva .bq-path-flag {
	position: absolute;
	left: 0;
	bottom: 0;
	background: var(--bq-primary);
	color: var(--bq-cream);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .75rem;
	padding: .4rem .9rem;
}

.benqueils-teva .bq-path-body { padding: 1.75rem; }

.benqueils-teva .bq-path-num {
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .8125rem;
	color: var(--bq-cognac);
	margin-bottom: .35rem;
}

.benqueils-teva .bq-path-title {
	font-size: 1.375rem;
	margin-bottom: 1rem;
}

.benqueils-teva .bq-path-title::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 2px;
	background: var(--bq-gold);
	margin-top: .75rem;
}

.benqueils-teva .bq-path p:last-child { margin-bottom: 0; }

.benqueils-teva .bq-path a {
	color: var(--bq-cognac);
	text-decoration: underline;
}

/* disclosure, full bleed cognac. Gold on cognac is only 3.16:1, so the
   eyebrow here goes ivory instead of gold. */

.benqueils-teva .bq-teva-disclosure {
	background: var(--bq-cognac);
	color: var(--bq-cream);
	padding-block: 3.5rem;
	margin-bottom: 3.5rem;
}

.benqueils-teva .bq-teva-disclosure p { color: var(--bq-cream); }

.benqueils-teva .bq-teva-disclosure p:last-child { margin-bottom: 0; }

.benqueils-teva .bq-teva-disclosure .bq-teva-eyebrow { color: var(--bq-cream); }

.benqueils-teva .bq-teva-disclosure a {
	color: var(--bq-cream);
	text-decoration: underline;
}

/* faq */

.benqueils-teva .bq-teva-faq { margin-bottom: 3.5rem; }

.benqueils-teva .bq-faq-item {
	border-top: 1px solid var(--bq-primary);
	padding-block: 1.25rem;
}

.benqueils-teva .bq-faq-item:last-child { border-bottom: 1px solid var(--bq-primary); }

.benqueils-teva .bq-faq-q {
	font-size: 1.125rem;
	margin-bottom: .5rem;
}

.benqueils-teva .bq-faq-item p { margin-bottom: 0; }

/* cta, photo under an ink wash */

.benqueils-teva .bq-teva-cta {
	position: relative;
	background: var(--bq-ink);
	overflow: hidden;
}

.benqueils-teva .bq-cta-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.benqueils-teva .bq-cta-body {
	position: relative;
	background: rgba(20, 20, 20, .92);
	padding-block: 4rem;
}

.benqueils-teva .bq-cta-body p { color: var(--bq-cream); }

.benqueils-teva .bq-teva-cta-title {
	color: var(--bq-cream);
	margin-bottom: 1rem;
}

.benqueils-teva .bq-rule-light { background: var(--bq-gold); }

.benqueils-teva .bq-teva-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
	margin-top: 1.5rem;
	margin-bottom: 0;
}

/* buttons. On the dark CTA the primary flips to ivory on ink so it still
   carries the most weight, and the outline button goes gold. */

.benqueils-teva .btn-primary {
	background-color: var(--bq-primary);
	border-color: var(--bq-primary);
	color: var(--bq-cream);
}

.benqueils-teva .btn-outline-primary {
	border-color: var(--bq-primary);
	color: var(--bq-primary);
}

.benqueils-teva .bq-cta-body .btn-primary {
	background-color: var(--bq-cream);
	border-color: var(--bq-cream);
	color: var(--bq-ink);
}

.benqueils-teva .bq-cta-body .btn-outline-primary {
	border-color: var(--bq-gold);
	color: var(--bq-cream);
}

.benqueils-teva .btn-primary:hover,
.benqueils-teva .btn-primary:focus,
.benqueils-teva .btn-outline-primary:hover,
.benqueils-teva .btn-outline-primary:focus {
	background-color: var(--bq-cream);
	border-color: var(--bq-primary);
	color: var(--bq-primary);
	text-decoration: underline;
}

/* light gold fill so ink text stays AAA at 7.85:1 */
.benqueils-teva .bq-cta-body .btn-primary:hover,
.benqueils-teva .bq-cta-body .btn-primary:focus,
.benqueils-teva .bq-cta-body .btn-outline-primary:hover,
.benqueils-teva .bq-cta-body .btn-outline-primary:focus {
	background-color: var(--bq-gold-lt);
	border-color: var(--bq-gold-lt);
	color: var(--bq-ink);
	text-decoration: underline;
}

.benqueils-teva .btn:focus-visible {
	outline: 3px solid var(--bq-cognac);
	outline-offset: 3px;
}

.benqueils-teva .bq-cta-body .btn:focus-visible,
.benqueils-teva .bq-quote-body .btn:focus-visible {
	outline-color: var(--bq-cream);
}

/* --------------------------------------------------------------------------
   5. Homepage trust banner (below the hero, above Custom Design)
   Full bleed black band. Ivory text at 16.62:1, AAA. The eyebrow uses the
   light gold (7.83:1). Standard gold is decorative only, used for the rule
   above each item.

   The bleed rule breaks the wrapper out of the pagebuilder container using
   the standard 50vw technique. 100vw counts the scrollbar on some desktop
   browsers, so overflow-x is clipped on the wrapper to stop a stray
   horizontal scrollbar. If the widget is dropped into a section that is
   already full width, drop the bq-trust-bleed class instead of nesting two
   breakouts.

   No icons here. The page editor strips inline SVG, so the visual weight is
   carried by type and the gold rules instead.
   -------------------------------------------------------------------------- */

.benqueils-trust {
	background: var(--bq-primary);
	color: var(--bq-cream);
	padding-block: 3.5rem;
	overflow-x: clip;
}

.benqueils-trust.bq-trust-bleed {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	max-width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
}

/* the theme has its own p and heading rules, so every element on the black
   ground states its color explicitly. Same lesson as section 3. */

.benqueils-trust p,
.benqueils-trust h2 { color: var(--bq-cream); }

.benqueils-trust .bq-trust-eyebrow {
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .8125rem;
	color: var(--bq-gold-lt);
	margin-bottom: .5rem;
}

.benqueils-trust .bq-trust-title {
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.benqueils-trust .bq-trust-lede {
	font-size: 1.0625rem;
	line-height: 1.65;
	margin-bottom: 0;
}

/* the four items */

.benqueils-trust .bq-trust-grid {
	margin-top: 2.5rem;
	margin-bottom: 2rem;
}

.benqueils-trust .bq-trust-item {
	height: 100%;
	text-align: center;
	padding-top: 1.25rem;
	border-top: 2px solid var(--bq-gold);
}

.benqueils-trust .bq-trust-num {
	font-size: 1.75rem;
	line-height: 1.15;
	letter-spacing: .02em;
	text-transform: uppercase;
	margin-bottom: .5rem;
	color: var(--bq-cream);
}

.benqueils-trust .bq-trust-label {
	font-size: .9375rem;
	line-height: 1.5;
	margin-bottom: 0;
	color: var(--bq-cream);
}

@media (min-width: 992px) {
	.benqueils-trust .bq-trust-num { font-size: 2rem; }
}

/* actions */

.benqueils-trust .bq-trust-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
	margin-bottom: 0;
}

/* buttons sit on black, so the fills invert against the rest of the site:
   ivory on black is the solid, gold outline is the secondary */

.benqueils-trust .btn-primary {
	background-color: var(--bq-cream);
	border-color: var(--bq-cream);
	color: var(--bq-primary);
}

.benqueils-trust .btn-outline-primary {
	background-color: transparent;
	border-color: var(--bq-gold);
	color: var(--bq-cream);
}

/* light gold fill so ink text stays AAA at 7.85:1 */
.benqueils-trust .btn-primary:hover,
.benqueils-trust .btn-primary:focus,
.benqueils-trust .btn-outline-primary:hover,
.benqueils-trust .btn-outline-primary:focus {
	background-color: var(--bq-gold-lt);
	border-color: var(--bq-gold-lt);
	color: var(--bq-ink);
	text-decoration: underline;
}

.benqueils-trust .btn:focus-visible {
	outline: 3px solid var(--bq-cream);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   6. Reusable page intro
   One component for every intro on the site: pagebuilder pages, the Gabriel
   & Co. embed pages, and the above-grid content on category pages.

   Wrapper: .benqueils-intro. Centered by default. Modifiers stack:
     .bq-intro-left      left aligned (H1 centering below is skipped)
     .bq-intro-band      linen band behind the intro
     .bq-intro-compact   tighter spacing for category grids, so products
                         stay near the top of the page

   Parts, all optional:
     .bq-intro-eyebrow   small cognac caps line
     .bq-intro-title     an H1 or H2 inside the intro, if the template does
                         not render the page heading itself
     .bq-intro-rule      short gold rule (decorative, aria-hidden)
     .bq-intro-lede      the opening sentence, set larger
     .bq-intro-more      a <details> block for longer SEO copy on grids.
                         Native HTML, no script, so the page editor keeps it.
     .bq-intro-actions   button row

   Contrast: ink on ivory 16.62:1, ink on linen 14.86:1, cognac on ivory
   8.43:1, cognac on linen 7.54:1. All AAA. Gold is the rule only.
   -------------------------------------------------------------------------- */

.benqueils-intro {
	color: var(--bq-ink);
	text-align: center;
	padding-block: 2.5rem 2rem;
}

.benqueils-intro .bq-intro-inner {
	max-width: 46rem;
	margin-inline: auto;
}

.benqueils-intro p {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--bq-ink);
}

.benqueils-intro p:last-child { margin-bottom: 0; }

.benqueils-intro .bq-intro-eyebrow {
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .8125rem;
	color: var(--bq-cognac);
	margin-bottom: .5rem;
}

.benqueils-intro .bq-intro-title {
	color: var(--bq-primary);
	margin-bottom: .75rem;
}

.benqueils-intro .bq-intro-rule {
	display: block;
	width: 3.5rem;
	height: 2px;
	background: var(--bq-gold);
	margin: 0 auto 1.25rem;
}

.benqueils-intro .bq-intro-lede {
	font-size: 1.125rem;
	line-height: 1.6;
}

@media (min-width: 992px) {
	.benqueils-intro .bq-intro-lede { font-size: 1.25rem; }
}

/* inline links: cognac and underlined, per the palette note at the top */
.benqueils-intro a:not(.btn) {
	color: var(--bq-cognac);
	text-decoration: underline;
}

/* read more, for longer copy on category grids */

.benqueils-intro .bq-intro-more { margin-top: .75rem; }

.benqueils-intro .bq-intro-more summary {
	display: inline-block;
	cursor: pointer;
	list-style: none;
	font-size: .9375rem;
	color: var(--bq-cognac);
	text-decoration: underline;
}

.benqueils-intro .bq-intro-more summary::-webkit-details-marker { display: none; }

.benqueils-intro .bq-intro-more summary:focus-visible {
	outline: 3px solid var(--bq-cognac);
	outline-offset: 3px;
}

.benqueils-intro .bq-intro-more .bq-less { display: none; }

.benqueils-intro .bq-intro-more[open] .bq-more { display: none; }

.benqueils-intro .bq-intro-more[open] .bq-less { display: inline; }

.benqueils-intro .bq-intro-more[open] summary { margin-bottom: .75rem; }

/* buttons: ivory on black and black on ivory are both 16.62:1, AAA */

.benqueils-intro .bq-intro-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
	margin-top: 1.5rem;
	margin-bottom: 0;
}

.benqueils-intro .btn-primary {
	background-color: var(--bq-primary);
	border-color: var(--bq-primary);
	color: var(--bq-cream);
}

.benqueils-intro .btn-outline-primary {
	background-color: transparent;
	border-color: var(--bq-primary);
	color: var(--bq-primary);
}

.benqueils-intro .btn-primary:hover,
.benqueils-intro .btn-primary:focus,
.benqueils-intro .btn-outline-primary:hover,
.benqueils-intro .btn-outline-primary:focus {
	background-color: var(--bq-cream);
	border-color: var(--bq-primary);
	color: var(--bq-primary);
	text-decoration: underline;
}

.benqueils-intro .btn:focus-visible {
	outline: 3px solid var(--bq-cognac);
	outline-offset: 3px;
}

/* modifiers */

.benqueils-intro.bq-intro-left { text-align: left; }

.benqueils-intro.bq-intro-left .bq-intro-inner { margin-inline: 0; }

.benqueils-intro.bq-intro-left .bq-intro-rule { margin-left: 0; }

.benqueils-intro.bq-intro-left .bq-intro-actions { justify-content: flex-start; }

.benqueils-intro.bq-intro-band {
	background: var(--bq-tint);
	padding-inline: 1.25rem;
}

.benqueils-intro.bq-intro-compact { padding-block: 1rem 1.5rem; }

.benqueils-intro.bq-intro-compact .bq-intro-lede { font-size: 1.0625rem; }

@media (min-width: 992px) {
	.benqueils-intro.bq-intro-compact .bq-intro-lede { font-size: 1.125rem; }
}

/* Center the page H1 on any page carrying a centered intro. On category
   grids the template renders its own H1 above the above-grid content, left
   aligned, so the intro alone would sit centered under a left heading.
   :has() is supported in current Chrome, Edge, Safari, and Firefox. Older
   browsers keep the template's alignment, which is a safe fallback.
   !important is needed because Bootstrap's alignment utilities
   (text-left, text-md-left) are themselves !important. */
body:has(.benqueils-intro:not(.bq-intro-left)) #main-content h1,
body:has(.benqueils-intro:not(.bq-intro-left)) main h1 {
	text-align: center !important;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}