/* =============================================================================
   Service — Social Media Management
   Figma: Webz → Service Page, the 1728-wide column at x=-2287.

   Loads after service-web.css (which this page borrows .sv-tech from) and after
   every core sheet, so plain class selectors here win on source order alone —
   no !important and no inflated specificity anywhere in this file.

   Tokens used: --c-brand #7458D7 · --c-ink #2F2F2F · --c-surface #F3F3F3
                --c-forest #0A211F · --c-line #DFDFDF · --c-muted #8D8D8D
   ========================================================================== */

/* ---------- 1. Hero ------------------------------------------------------- */
.sm-hero {
	position: relative;
	overflow: hidden;
	padding: calc(var(--header-top) + var(--header-h) + clamp(1.5rem, 3.4vw, 58px)) 0 clamp(2.5rem, 4.6vw, 80px);
}
/* The wash is its own layer rather than a background on .sm-hero so the header,
   which sits over this section, never picks up the gradient's hard top edge. */
.sm-hero__wash {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background:
		radial-gradient(115% 85% at 84% 22%, rgba(116, 88, 215, .16), transparent 62%),
		linear-gradient(168deg, #FFFFFF 0%, #F8F4FE 40%, #E8DFFA 100%);
}
.sm-hero__inner {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
	gap: clamp(1.5rem, 3.4vw, 3.5rem); align-items: center;
}
.sm-hero__eyebrow {
	display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 clamp(.75rem, 1.2vw, 1.15rem);
	font-family: var(--f-display); font-weight: 500;
	font-size: clamp(.9rem, 1vw, 1.0625rem); color: var(--c-ink);
}
.sm-hero__spark { display: inline-flex; width: 1.05em; height: 1.05em; color: var(--c-ink); }
.sm-hero__spark svg { width: 100%; height: 100%; }
.sm-hero__title {
	margin: 0; font-family: var(--f-display); font-weight: 600;
	font-size: clamp(2.5rem, 5.1vw, 5.5rem); line-height: 1.03; letter-spacing: -.012em;
	color: var(--c-ink);
}
.sm-hero__title em { font-style: normal; color: var(--c-brand); }
.sm-hero__lead {
	margin: clamp(1rem, 1.5vw, 1.5rem) 0 clamp(1.5rem, 2.2vw, 2.25rem);
	max-width: 46ch; font-size: clamp(1rem, 1.08vw, 1.1875rem); line-height: 1.55; color: #4A4A4A;
}
.sm-hero__btn { align-self: flex-start; }
.sm-hero__art { margin: 0; }
.sm-hero__art img,
.sm-hero__art .wz-ph { display: block; width: 100%; height: auto; border-radius: var(--r-md); }

/* ---------- 2. Everything Your Brand Needs on Social Media ---------------- */
.sm-caps { padding: var(--section-pad) 0; background: var(--c-white); }
.sm-caps__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.1rem, 1.8vw, 1.9rem);
}
.sm-cap {
	--sm-cap-tone: var(--c-pink);
	position: relative; display: flex; flex-direction: column; align-items: flex-start;
	gap: clamp(.4rem, .7vw, .7rem); overflow: hidden;
	padding: clamp(1rem, 1.45vw, 1.6rem) clamp(1rem, 1.45vw, 1.6rem) clamp(1.5rem, 2.1vw, 2.2rem);
	background: var(--c-white); border: 1px solid var(--c-line); border-radius: 14px;
	/* Hairline of the card's colour down the leading edge, as in the design. */
	box-shadow: inset 1px 0 0 var(--sm-cap-tone);
	transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease;
}
.sm-cap:hover { transform: translateY(-4px); box-shadow: inset 1px 0 0 var(--sm-cap-tone), 0 18px 34px -24px rgba(47, 47, 47, .45); }
.sm-cap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: var(--sm-cap-tone); }
.sm-cap--pink   { --sm-cap-tone: #F1B1E0; }
.sm-cap--yellow { --sm-cap-tone: #F4DE78; }
.sm-cap--blue   { --sm-cap-tone: #BCC9EB; }
.sm-cap--green  { --sm-cap-tone: #D3E1A9; }
.sm-cap--lilac  { --sm-cap-tone: #C9B6F0; }
.sm-cap__num {
	position: absolute; top: clamp(.7rem, 1.1vw, 1.2rem); right: clamp(.9rem, 1.4vw, 1.6rem);
	font-family: var(--f-display); font-weight: 600; font-size: clamp(2.2rem, 3.1vw, 3.5rem);
	line-height: 1; color: #E7E7EB; pointer-events: none;
}
.sm-cap__art { display: block; width: clamp(64px, 5.6vw, 96px); margin-bottom: clamp(.3rem, .6vw, .6rem); }
.sm-cap__art img,
.sm-cap__art .wz-ph { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; min-height: 0; }
.sm-cap__title {
	margin: 0; font-family: var(--f-display); font-weight: 500;
	font-size: clamp(1.05rem, 1.22vw, 1.375rem); line-height: 1.2; color: var(--c-ink);
}
.sm-cap__text { margin: 0; font-size: clamp(.875rem, .92vw, 1rem); line-height: 1.55; color: #5C5C5C; }

/* ---------- 3. Tech Stack ------------------------------------------------- */
/* Markup and styling come from service-web.css; only the band colour differs. */
.sm-tech { background: var(--c-surface); }

/* ---------- 4. CTA band --------------------------------------------------- */
.sm-band { background: var(--c-forest); color: #fff; padding: clamp(2.25rem, 3.6vw, 3.5rem) 0; }
.sm-band__inner {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .68fr);
	gap: clamp(1.25rem, 3vw, 3rem); align-items: center;
}
.sm-band__title {
	margin: 0; font-family: var(--f-display); font-weight: 500;
	font-size: var(--fs-band); line-height: 1.16; white-space: pre-line;
}
.sm-band__text {
	margin: clamp(.7rem, 1vw, 1rem) 0 clamp(1.25rem, 1.8vw, 1.75rem);
	max-width: 62ch; font-size: clamp(.95rem, 1.02vw, 1.125rem); line-height: 1.55;
	color: rgba(255, 255, 255, .82);
}
.sm-band__text b { color: #fff; font-weight: 700; }
.sm-band__visual { margin: 0; }
.sm-band__visual img,
.sm-band__visual .wz-ph { display: block; width: 100%; height: auto; }

/* ---------- 5. Process ---------------------------------------------------- */
.sm-process {
	/* One tile size drives the tiles AND the connector geometry below. */
	--sm-tile: clamp(86px, 8.2vw, 141px);
	--sm-gap: clamp(1.25rem, 2.6vw, 3rem);
	padding: var(--section-pad) 0; background: #F8F8F9;
}
.sm-process__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(2.5rem, 4.4vw, 4.5rem) var(--sm-gap);
}
.sm-step { --sm-step-tone: #CDBBF2; position: relative; text-align: center; }
.sm-step--lilac { --sm-step-tone: #CDBBF2; }
.sm-step--pink  { --sm-step-tone: #F2A9DC; }
.sm-step--green { --sm-step-tone: #AFC37C; }
.sm-step--blue  { --sm-step-tone: #B9C6F2; }
.sm-step--yellow{ --sm-step-tone: #F2D74B; }
.sm-step--red   { --sm-step-tone: #F0334C; }
.sm-step__tile { position: relative; display: block; width: var(--sm-tile); aspect-ratio: 1; margin: 0 auto clamp(1rem, 1.5vw, 1.5rem); }
/* Offset slab behind the face — the extruded sticker look from the design. */
.sm-step__shadow { position: absolute; inset: 0; border-radius: 26%; background: rgba(47, 47, 47, .16); translate: -6px 7px; }
.sm-step__face {
	position: absolute; inset: 0; display: grid; place-items: center;
	border-radius: 26%; background: var(--sm-step-tone); color: var(--c-ink);
	box-shadow: inset 0 0 0 1px rgba(47, 47, 47, .12);
}
.sm-step__face img { width: 46%; height: auto; }
.sm-step__icon { width: 42%; height: auto; }
.sm-step--red .sm-step__face { color: #fff; }
.sm-step__title {
	margin: 0 0 .5rem; font-family: var(--f-display); font-weight: 500;
	font-size: clamp(1rem, 1.13vw, 1.25rem); line-height: 1.25; color: var(--c-ink);
}
.sm-step__n { color: var(--c-ink); }
.sm-step__text {
	margin: 0 auto; max-width: 34ch;
	font-size: clamp(.85rem, .9vw, .9375rem); line-height: 1.55; color: #5C5C5C;
}
/* Dashed connectors. Each one spans from this tile's edge to the next tile's
   edge: 100% of a column plus one gap, less half a tile at either end. They
   alternate bow-down / bow-up, and the last cell in a row never draws one. */
.sm-step::after {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	top: calc(var(--sm-tile) / 2 - 28px); height: 56px;
	left: calc(50% + var(--sm-tile) / 2 + 12px);
	width: calc(100% + var(--sm-gap) - var(--sm-tile) - 24px);
	background-repeat: no-repeat; background-size: 100% 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 56' preserveAspectRatio='none'%3E%3Cpath d='M2 12C56 62 144 62 198 16' fill='none' stroke='%23BFBFC6' stroke-width='2' stroke-linecap='round' stroke-dasharray='6 9'/%3E%3C/svg%3E");
}
.sm-step:nth-child(3n)::after { content: none; }
.sm-step:nth-child(3n + 2)::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 56' preserveAspectRatio='none'%3E%3Cpath d='M2 44C56 -6 144 -6 198 40' fill='none' stroke='%23BFBFC6' stroke-width='2' stroke-linecap='round' stroke-dasharray='6 9'/%3E%3C/svg%3E");
}

/* ---------- 6. Case Studies ---------------------------------------------- */
/* The cards are the site-wide case study card (components.css). Only the band
   behind them and the row's resting position belong to this page. */
.sm-cases { background: var(--c-white); }
/* The cards snap to the scroller's start edge, which would park the first one
   flush against the viewport. Snapping respects scroll-padding, so the row
   keeps the page gutter at rest. */
.sm-cases .cases__scroller { scroll-padding-left: var(--gutter); }

/* ---------- 7. Responsive ------------------------------------------------- */
@media (max-width: 1024px) {
	.sm-hero__inner { grid-template-columns: minmax(0, 1fr); }
	.sm-hero__art { order: -1; max-width: 560px; margin-inline: auto; }
	.sm-caps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sm-process__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* The connector geometry assumes three columns — drop it rather than redraw. */
	.sm-step::after { content: none; }
	.sm-band__inner { grid-template-columns: minmax(0, 1fr); }
	.sm-band__visual { max-width: 420px; }
}
@media (max-width: 640px) {
	.sm-hero { padding-bottom: clamp(2rem, 8vw, 3rem); }
	.sm-hero__lead { max-width: none; }
	.sm-caps__grid { grid-template-columns: minmax(0, 1fr); }
	.sm-process__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 8vw, 2.75rem); }
	.sm-step__text { max-width: 40ch; }
	.sm-band__text { max-width: none; }
}