/* ==========================================================================
   components.css — buttons, header/nav, cards, forms, footer
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .6em;
	font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body-l); line-height: 1.2;
	padding: 1rem 1.5rem; border-radius: var(--r-pill); white-space: nowrap;   /* Figma: label inset 24px x, 16px y */
	transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease;
}
.btn .icon { width: 1.1em; height: 1.1em; transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .icon--arrow-right { transform: translateX(4px); }
.btn:hover .icon--arrow-down { transform: translateY(3px); }
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--c-brand); color: #fff; }
.btn--primary:hover { background: var(--c-brand-2); box-shadow: 0 10px 30px -10px rgba(116,88,215,.6); }
.btn--dark { background: var(--c-ink); color: #fff; }
.btn--dark:hover { background: #000; }
.btn--lg { padding: 25px 43px; }   /* Figma: footer Sign-Up label inset 43x / 25y */
.icon { width: 1.25em; height: 1.25em; flex: none; }
.icon.flip { transform: scaleX(-1); }

/* ---------- Header ---------- */
.site-header {
	position: absolute; inset: 0 0 auto 0; z-index: 50;
	padding-top: var(--header-top);
	transition: transform var(--dur) var(--ease-out), background-color var(--dur) ease, padding var(--dur) ease;
}
.site-header__inner {
	max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-3);
}
.site-header.is-fixed { position: fixed; padding-top: .9rem; padding-bottom: .9rem; background: rgba(243,243,243,.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.site-header.is-hidden { transform: translateY(-110%); }
.site-header__right { display: flex; justify-content: flex-end; align-items: center; gap: var(--s-2); }

.logo { display: inline-flex; align-items: center; height: var(--header-h); }
.logo__img { height: 60px; width: auto; }
.logo__text { font-family: var(--f-display); font-weight: 500; font-size: 1.6rem; letter-spacing: -.01em; }
.logo__text b { color: var(--c-brand); font-weight: 600; }

/* Figma: purple pill, dark outline, soft drop shadow. The current page is marked
   by white text rather than a second pill. */
.nav__list {
	display: flex; align-items: center; gap: .25rem;
	background: var(--c-brand); color: #fff; height: var(--nav-pill-h); padding: 0 .4rem;
	border: 3px solid var(--c-ink); border-radius: var(--r-pill);
	box-shadow: 0 5px 14px rgba(47, 47, 47, .3);
}
.nav__link {
	display: inline-flex; align-items: center; height: calc(var(--nav-pill-h) - 18px);
	padding: 0 1.15rem; border-radius: var(--r-pill);
	font-family: var(--f-display); font-size: 1.0625rem; font-weight: 500; line-height: 1.2;
	text-transform: uppercase; letter-spacing: .035em; color: rgba(255, 255, 255, .62);
	transition: color var(--dur-fast) ease;
}
.nav__link:hover { color: #fff; }
.nav__item.is-current .nav__link { color: #fff; font-weight: 500; }

.social { display: flex; gap: .75rem; }
.social__link {
	/* Figma: bare purple glyphs in the header, no ring around them. */
	display: grid; place-items: center; color: var(--c-brand);
	transition: color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.social__link .icon { width: 1.75rem; height: 1.75rem; }
.social__link:hover { color: var(--c-brand-2); transform: translateY(-2px); }
.social--header { gap: 1.15rem; }

.nav-toggle { display: none; width: var(--header-h); height: var(--header-h); border-radius: 50%; background: var(--c-ink); color: #fff; place-items: center; position: relative; z-index: 60; }
.nav-toggle .icon { width: 1.5rem; height: 1.5rem; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

@media (max-width: 1024px) {
	.site-header__inner { grid-template-columns: auto 1fr; }
	.social--header { display: none; }
	.nav-toggle { display: grid; }
	.nav {
		position: fixed; inset: 0; z-index: 55; background: var(--c-ink); color: #fff;
		display: grid; place-items: center; padding: var(--gutter);
		opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease-out), visibility 0s linear var(--dur);
	}
	.nav.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
	.nav__list { flex-direction: column; height: auto; background: none; border: 0; box-shadow: none; padding: 0; gap: .5rem; }
	.nav__link { font-size: 2rem; height: auto; padding: .6rem 1.5rem; }
}

/* ---------- Section head ---------- */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-5); margin-bottom: var(--s-6); }
.sec-head__main { flex: 1 1 auto; }
.sec-title { font-size: var(--fs-h2); line-height: 0.97; }   /* Figma: Clash Display Medium 64, line box 62 */
.sec-title__sub { display: block; }   /* same size unless a section overrides it */
.sec-rule { display: block; width: clamp(180px, 25vw, 439px); height: 2px; background: var(--c-ink); margin-top: var(--s-4); transform-origin: left; }
.sec-lead { flex: 0 1 640px; font-size: var(--fs-lead); font-weight: 500; line-height: 1.22; text-align: right; }   /* Figma: Lato Medium 32/39, W640, right-aligned */
@media (max-width: 900px) { .sec-head { flex-direction: column; align-items: flex-start; gap: var(--s-3); } }
/* Stacked heads read left-aligned; the right-aligned lead only works beside the title. */
@media (max-width: 640px) {
	.sec-lead { text-align: left; flex-basis: auto; }
	.sec-title__sub { font-size: 1em; }
	.sec-rule { width: clamp(120px, 45vw, 220px); margin-top: var(--s-2); }
	.sec-head { margin-bottom: var(--s-4); }
}

/* ---------- Stat card ---------- */
.stat { border-radius: var(--r-md); padding: 36px 41px 18px; min-height: var(--stat-h); display: flex; flex-direction: column; gap: 11px; color: var(--c-ink); }   /* Figma: label Y36.41, value Y76, card H209 */
.stat--pink { background: var(--c-pink); }
.stat--yellow { background: var(--c-yellow); }
.stat--blue { background: var(--c-blue); }
.stat--green { background: var(--c-green); }
.stat__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.stat__label { font-size: var(--fs-body-l); line-height: 1.2; }
.stat__icon .icon { width: 30px; height: 30px; stroke-width: 1.6; }   /* Figma: ~30px (measured from canvas) */
.stat__value { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-stat); line-height: 1.2; letter-spacing: 0; display: flex; align-items: baseline; }   /* Figma: Clash Display Bold 96/120%, 0 tracking */

/* ---------- Brand tile ---------- */
.brand-tile { display: grid; place-items: center; background: var(--c-white); border-radius: var(--r-lg); height: var(--brand-tile-h); padding: 2rem; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease; }
a.brand-tile:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(47,47,47,.35); }
.brand-tile__logo { max-height: 90px; max-width: 200px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .9; transition: filter var(--dur-fast) ease, opacity var(--dur-fast) ease; }
.brand-tile:hover .brand-tile__logo { filter: none; opacity: 1; }
.brand-tile .wz-ph { min-height: 0; height: 100%; background: var(--c-tint); }

/* ---------- Service card (bento) ---------- */
.service-card { position: relative; border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; background: var(--c-surface); }
.service-card--white { background: var(--c-white); }
.service-card--yellow { background: var(--c-yellow); }
.service-card--pink { background: var(--c-pink); }
.service-card--green { background: var(--c-green); }
.service-card--blue { background: var(--c-blue); }
.service-card--lilac { background: var(--c-lilac); }
.service-card--cream { background: var(--c-cream); }
.service-card--dark { background: var(--c-ink); }
/* The artwork is exported at the full card size, so it fills the card and the
   label bar sits on top of it — taking the bar out of the flow is what stops
   the image being squeezed into a shorter box and cropped. */
.service-card__visual { position: absolute; inset: 0; overflow: hidden; }
/* contain, not cover: every export's own background is the card's tone colour,
   so the fitted edges are invisible and nothing is ever trimmed off the art. */
.service-card__visual img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--dur-slow) var(--ease-out); }
.service-card__visual .wz-ph { width: 100%; height: 100%; object-fit: cover; }
.service-card:hover .service-card__visual img { transform: scale(1.04); }
.service-card__bar {
	position: relative; z-index: 1; margin-top: auto;
	flex: none; height: var(--card-bar-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 0 1.75rem; background: var(--c-ink); color: #fff;
	font-family: var(--f-body); font-weight: 700; font-size: clamp(1.1rem, 1.45vw, 1.575rem);
	transition: background-color var(--dur-fast) ease;
}
.service-card__bar .icon { width: 2rem; height: 2rem; transition: transform var(--dur-fast) var(--ease-out); }
.service-card:hover .service-card__bar { background: var(--c-brand); }
.service-card:hover .service-card__bar .icon { transform: translate(3px, -3px); }

/* ---------- Case card ---------- */
/* Case category card — cover photo full-bleed, name over the top, count in the
   corner. Light scrims top and bottom so any uploaded photo keeps the text legible. */
.case-card {
	position: relative; flex: 0 0 auto; width: clamp(240px, 24vw, 380px); aspect-ratio: 280 / 345;
	border-radius: var(--r-md); overflow: hidden; scroll-snap-align: start; background: var(--c-surface);
}
.case-card__link { position: absolute; inset: 0; display: block; }
.case-card__media { position: absolute; inset: 0; display: block; }
.case-card__media img, .case-card__media .wz-ph {
	width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out);
}
.case-card__media .wz-ph { min-height: 0; }
.case-card__scrim {
	position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .36) 22%, rgba(255, 255, 255, 0) 42%),
		linear-gradient(0deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .34) 16%, rgba(255, 255, 255, 0) 32%);
}
.case-card:hover .case-card__media img { transform: scale(1.04); }
.case-card__label {
	position: absolute; left: clamp(.9rem, 1.15vw, 1.25rem); right: clamp(.9rem, 1.15vw, 1.25rem); top: clamp(.9rem, 1.15vw, 1.25rem);
	margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(.95rem, 1.2vw, 1.25rem);
	line-height: 1.2; color: var(--c-ink); text-wrap: balance;
}
.case-card__foot {
	position: absolute; left: clamp(.9rem, 1.15vw, 1.25rem); right: clamp(.9rem, 1.15vw, 1.25rem); bottom: clamp(.8rem, 1.05vw, 1.15rem);
	display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--c-ink);
}
.case-card__count { font-family: var(--f-display); font-weight: 700; font-size: clamp(.95rem, 1.2vw, 1.25rem); }
.case-card__foot .icon { width: 1.4rem; height: 1.4rem; transition: transform var(--dur-fast) var(--ease-out); }
.case-card:hover .case-card__foot .icon { transform: translateX(5px); }
@media (max-width: 768px) { .case-card { width: 70vw; } }

/* ---------- Post card ---------- */
.post-card { display: flex; flex-direction: column; gap: 1.1rem; }
.post-card__visual { display: block; aspect-ratio: 416 / 213; border-radius: var(--r-sm); overflow: hidden; background: var(--c-tint); }
.post-card__visual img, .post-card__visual .wz-ph { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.post-card:hover .post-card__visual img { transform: scale(1.04); }
.post-card__meta { display: flex; align-items: center; gap: .75rem; font-size: var(--fs-small); color: var(--c-muted); letter-spacing: .02em; }
.post-card__meta i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.post-card__title { font-size: 1.5rem; font-weight: 500; line-height: 1.2; }
.post-card__title a:hover { color: var(--c-brand); }
.post-card__excerpt { font-size: var(--fs-body); line-height: 1.55; color: #4a4a4a; }
.post-card__author { display: flex; align-items: center; gap: .75rem; margin-top: auto; padding-top: .5rem; }
.post-card__author b { display: block; font-size: .95rem; }
.post-card__author small { display: block; color: var(--c-muted); }
.post-card__avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--c-tint); flex: none; }
.post-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.post-grid { display: flex; gap: 50px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }   /* Figma: carousel, card 416.33, gap 50 */
.post-grid::-webkit-scrollbar { display: none; }
.post-grid > .post-card { flex: 0 0 416.33px; scroll-snap-align: start; }
@media (max-width: 560px) { .post-grid > .post-card { flex-basis: 82vw; } }

/* ---------- Testimonial card ---------- */
.t-card { flex: 0 0 689px; width: 689px; margin: 0; padding: 1.75rem; border-radius: var(--r-md); background: var(--c-tint); display: flex; flex-direction: column; gap: 2rem; }
.t-card__quote { margin: 0; font-size: var(--fs-lead); line-height: 1.25; }
.t-card__quote::before { content: "“"; } .t-card__quote::after { content: "”"; }
.t-card__who { display: flex; align-items: center; gap: .75rem; }
.t-card__who b { display: block; font-size: var(--fs-body-l); font-family: var(--f-display); font-weight: 500; }
.t-card__who small { display: block; color: var(--c-muted); }
.t-card__avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--c-brand); flex: none; }
.t-card__avatar img, .t-card__avatar .wz-ph { width: 100%; height: 100%; object-fit: cover; min-height: 0; padding: 0; font-size: 0; }
@media (max-width: 768px) { .t-card { flex-basis: 85vw; width: 85vw; } }

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: 1.25rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form__field { display: flex; flex-direction: column; gap: .5rem; font-family: var(--f-display); font-weight: 500; }
.form__field input, .form__field select, .form__field textarea {
	width: 100%; padding: .9rem 1.1rem; border: 2px solid var(--c-line); border-radius: var(--r-sm); background: #fff; font-family: var(--f-body);
	transition: border-color var(--dur-fast) ease;
}
.form__field input:focus, .form__field select:focus, .form__field textarea:focus { outline: 0; border-color: var(--c-brand); }
.form__hp { position: absolute; left: -9999px; }
.form__notice { padding: 1rem 1.25rem; border-radius: var(--r-sm); }
.form__notice--ok { background: var(--c-green); }
.form__notice--err { background: var(--c-pink); }
.form .btn { align-self: flex-start; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }

/* ---------- Pagination ---------- */
.pagination { margin-top: var(--s-6); display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: .5rem; }
.pagination .page-numbers { display: inline-grid; place-items: center; min-width: 48px; height: 48px; padding: 0 .75rem; border-radius: var(--r-pill); font-family: var(--f-display); }
.pagination .page-numbers.current { background: var(--c-ink); color: #fff; }
.pagination a.page-numbers:hover { background: var(--c-tint); }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-brand); color: #fff; padding: 95px 0 42px; }   /* Figma: headline Y95, section H582 */
.site-footer__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); padding-bottom: var(--s-5); border-bottom: 1px solid rgba(255,255,255,.35); }
.site-footer__title { font-size: var(--fs-footer); line-height: 1; letter-spacing: .02em; white-space: pre-line; }   /* Figma: Clash Display Medium 82/100%, +2% */
.site-footer__grid { display: flex; justify-content: space-between; gap: var(--s-5); padding-top: var(--s-5); }
.site-footer__cols { display: flex; gap: clamp(3rem, 8vw, 7rem); }
.site-footer__menu { display: flex; flex-direction: column; gap: 2.5rem; font-family: var(--f-display); font-weight: 500; font-size: 1.5rem; letter-spacing: -.01em; }
.site-footer__menu a:hover { text-decoration: underline; text-underline-offset: .2em; }
.site-footer__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4rem; font-family: var(--f-display); font-weight: 500; font-size: 1.5rem; }
.site-footer__social { display: flex; gap: 2.5rem; }
.site-footer__social a:hover, .site-footer__contact a:hover { text-decoration: underline; text-underline-offset: .2em; }
.site-footer__contact { display: flex; flex-direction: column; gap: 1rem; text-align: right; }
.site-footer__note { margin-top: var(--s-6); font-size: var(--fs-small); opacity: .8; }
@media (max-width: 900px) {
	.site-footer__top { flex-direction: column; align-items: flex-start; }
	.site-footer__grid { flex-direction: column; }
	.site-footer__meta { align-items: flex-start; gap: 2rem; }
	.site-footer__contact { text-align: left; }
	.site-footer__menu { gap: 1.25rem; font-size: 1.25rem; }
	.site-footer__social { flex-wrap: wrap; gap: 1.25rem; }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding: calc(var(--header-top) + var(--header-h) + var(--s-6)) 0 var(--s-6); }
.page-hero__kicker { font-family: var(--f-display); font-size: var(--fs-body-l); color: var(--c-brand); margin-bottom: 1rem; }
.page-hero__title { font-size: var(--fs-hero); line-height: var(--lh-tight); max-width: 18ch; }
.page-hero__lead { font-size: var(--fs-lead); font-weight: 500; line-height: 1.25; margin-top: var(--s-4); max-width: 30ch; }
.page-hero--404 .btn { margin-top: var(--s-4); }
.page-hero--article .page-hero__title { max-width: 24ch; }
.page-hero--article .post-card__meta { margin-bottom: 1.25rem; }
.page-hero--article .post-card__author { margin-top: var(--s-4); }
.article__hero img { width: 100%; height: auto; border-radius: var(--r-md); margin-bottom: var(--s-6); }
.case-facts { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: var(--s-4); }
.case-facts small { display: block; color: var(--c-muted); }
.case-facts span, .case-facts a { font-family: var(--f-display); font-size: var(--fs-body-l); font-weight: 500; }
.contact__grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--s-7); }
.contact__aside { display: flex; flex-direction: column; gap: 1.5rem; }
.contact__line { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--f-display); font-size: var(--fs-body-l); font-weight: 500; }
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; gap: var(--s-5); } }
.points { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-4); }
.point { background: var(--c-white); border-radius: var(--r-md); padding: 2rem; }
.point h3 { font-size: 1.5rem; margin-bottom: .75rem; }
.empty { font-size: var(--fs-lead); }
.empty a { color: var(--c-brand); text-decoration: underline; }


/* ---------- Case study card ------------------------------------------------
   One design, used on the listing, the home row and the service pages. It sizes
   itself from whatever lays it out: a grid cell on the listing, a fixed-width
   flex item inside the horizontal rows.
   Figma: Webz → "Case study & blog page", Frame 2147225765.
--------------------------------------------------------------------------- */
.ca-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.7vw, 1.75rem);
}
.ca-card { position: relative; }
.ca-card[hidden] { display: none; }
.ca-card__link {
	position: relative; display: block; overflow: hidden;
	aspect-ratio: 509 / 527; border-radius: 16px; background: #1A1A1C; text-decoration: none;
}
.ca-card__media { position: absolute; inset: 0; display: block; }
.ca-card__media img,
.ca-card__media .wz-ph {
	width: 100%; height: 100%; min-height: 0; object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
}
.ca-card:hover .ca-card__media img { transform: scale(1.045); }
/* The titles sit on the artwork, and the artwork is whatever was uploaded —
   the scrim is what guarantees they stay readable. */
.ca-card__scrim {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(0deg, rgba(10, 8, 20, .82) 0%, rgba(10, 8, 20, .35) 22%, rgba(10, 8, 20, 0) 46%);
}
.ca-card__body {
	position: absolute; left: clamp(.9rem, 1.3vw, 1.4rem); right: clamp(3.6rem, 4.6vw, 5rem); bottom: clamp(.9rem, 1.3vw, 1.4rem);
	display: grid; gap: .5rem; justify-items: start;
}
.ca-card__pill {
	padding: .25rem .6rem; border-radius: var(--r-pill);
	border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12);
	font-size: clamp(.62rem, .72vw, .75rem); line-height: 1.3; color: #fff; backdrop-filter: blur(6px);
	max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ca-card__title {
	font-family: var(--f-display); font-weight: 500;
	font-size: clamp(1.05rem, 1.3vw, 1.5rem); line-height: 1.15; color: #fff;
}
.ca-card__go {
	position: absolute; right: clamp(.9rem, 1.3vw, 1.4rem); bottom: clamp(.9rem, 1.3vw, 1.4rem);
	display: grid; place-items: center; width: clamp(34px, 2.8vw, 44px); aspect-ratio: 1;
	border-radius: 50%; background: var(--c-white); color: var(--c-brand);
	transition: transform var(--dur-fast) var(--ease-out);
}
.ca-card__go .icon { width: 1.1rem; height: 1.1rem; }
.ca-card:hover .ca-card__go { transform: translate(2px, -2px); }

/* Inside the drag-scroll rows the card is a flex item, so it needs a width of
   its own and a snap point. */
.cases__row .ca-card { flex: 0 0 auto; width: clamp(240px, 24vw, 380px); scroll-snap-align: start; }