/* ============================================================
   Servette — theme corrections
   Loaded after styles.css so the design stylesheet stays byte-identical
   to the source export (easy to re-import). Each rule documents the bug it
   fixes in the original design.
   ============================================================ */

/* FIX: homepage hero text sat UNDER the veil.
   .hero-veil is position:absolute; z-index:1, but .hero-content was
   position:relative with no z-index (auto) — so per CSS paint order the veil
   painted on top of the content. The text stayed selectable (the veil is
   pointer-events:none) but was visually covered, and on a dark/imageless slide
   it looked invisible. The design already uses this exact pattern correctly for
   the service hero (`.cat-hero .wrap{z-index:2}`); the homepage hero just
   missed it. Lift the content above the veil (dots/counter/label stay at
   z-index:3, above content, as intended). */
.hero-content { z-index: 2; }

/* FIX: uploaded partner logos rendered distorted / clipped.
   The design only styles `.brand-row .logo svg` (the built-in 80×80 monograms,
   meant to fill the tile edge-to-edge). An uploaded <img> had no rule, so it
   fell back to the global `img{max-width:100%}` with no height:auto — the
   intrinsic height attribute stretched it while width clamped to 80px, and the
   tile's overflow:hidden clipped it. Real brand logos also come in very mixed
   aspect ratios (square to 5:1 wide), so a square tile shrinks the wide ones to
   a sliver. When the logo is an uploaded <img>, widen the tile to a landscape
   format and `contain` the logo (no distortion, no clip) on a white card. The
   built-in SVG monograms (.logo, no modifier) keep the original 80×80 square.
   The template adds `.logo--img` only when the logo is an uploaded image. */
.brand-row .logo--img {
	width: auto;
	min-width: 96px;
	height: 72px;
	justify-self: start;
	align-self: center;
	padding: 10px 14px;
	box-sizing: border-box;
	background: #fff;
}
.brand-row .logo--img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left center;
	display: block;
}

/* CTA: the email form was removed — the contact card is now WhatsApp-only with
   an email address below. Style the (now static) channel header and the email
   row. `.tabs` keeps its bottom border + flame accent for visual parity. */
.channel .tabs { grid-template-columns: 1fr; }
.channel .tab-head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px;
	font-family: "Bricolage Grotesque";
	font-weight: 600;
	font-size: 22px;
	letter-spacing: -0.015em;
	color: var(--ink);
	border-bottom: 3px solid var(--flame);
}
.channel .tab-head .ico {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #25D366;
	color: #fff;
	flex: 0 0 auto;
}
.channel .tab-head .sub {
	display: block;
	font-family: "Bricolage Grotesque";
	font-style: italic;
	font-size: 15px;
	font-weight: 400;
	color: var(--ink-2);
	margin-top: 2px;
	letter-spacing: -0.005em;
}
.cta-email {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 4px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}
.cta-email .ico {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--flame);
	color: var(--paper);
	flex: 0 0 auto;
}
.cta-email-text { display: flex; flex-direction: column; line-height: 1.3; }
.cta-email-label {
	font-family: "Bricolage Grotesque";
	font-style: italic;
	font-weight: 500;
	font-size: 15px;
	color: var(--muted);
	letter-spacing: -0.005em;
}
.cta-email a {
	font-weight: 600;
	font-size: 19px;
	color: var(--ink);
	letter-spacing: -0.01em;
	text-decoration: none;
}
.cta-email a:hover { color: var(--flame); }

/* FIX: the CTA grid had no mobile breakpoint, so it stayed 2-column
   (1fr 1.3fr) on phones — the channel card was crushed into a narrow strip
   (visible bug). Stack it below the design's main breakpoint. */
@media (max-width: 900px) {
	.cta-grid { grid-template-columns: 1fr; gap: 48px; }
}