/* =========================================================================
   Sites Delight — main.css
   EXACT MIRROR of the live Elementor build (values pulled from the live
   kit/post CSS): content 1200px, headings/body #000, brand yellow #FEDC1A,
   panels #F7F7F7, buttons 20px / 14×40 / radius 1000 with gradient-slide hover.
   Breakpoints = Sites Delight house standard: 1160 (tablet), 800 (mobile).
   ========================================================================= */

/* ---------- Fonts (self-hosted, mirroring the brand's OMGF setup) ---------- */
@font-face { font-family:"Hind Vadodara"; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/hind-vadodara-normal-latin-400.woff2) format("woff2"); }
@font-face { font-family:"Hind Vadodara"; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/hind-vadodara-normal-latin-500.woff2) format("woff2"); }
@font-face { font-family:"Hind Vadodara"; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/hind-vadodara-normal-latin-600.woff2) format("woff2"); }
@font-face { font-family:"Hind Vadodara"; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/hind-vadodara-normal-latin-700.woff2) format("woff2"); }
@font-face { font-family:"Open Sans"; font-style:normal; font-weight:300 800; font-display:swap; src:url(../fonts/open-sans-normal-latin.woff2) format("woff2"); }
@font-face { font-family:"Open Sans"; font-style:italic; font-weight:300 800; font-display:swap; src:url(../fonts/open-sans-italic-latin.woff2) format("woff2"); }

/* ---------- Design tokens (exact from live kit) ---------- */
:root {
	--y:      #FEDC1A;   /* global "text" system colour — buttons/accents/borders */
	--yl:     #FDED8B;   /* accent — button gradient light half */
	--blk:    #000000;   /* headings + body text (global #8b52313) */
	--ink:    #000000;
	--muted:  #55565a;   /* small secondary/meta text only */
	--bg:     #FFFFFF;   /* page base — pure white */
	--panel:  #F9F9F9;   /* light-grey band/card (all grey backgrounds) */
	--white:  #FFFFFF;   /* (#dc5746a) */
	--border: #ececec;
	--mint:   #F0FEFE;   /* kit "secondary" — pale mint used in section washes */
	--mint1:  #eefaf7;
	--mint2:  #f6fbfd;
	--green:  #90BB15;   /* kit 05ee22b — the divider/accent green */

	--font-head: "Hind Vadodara", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Layout — content cap 1200 (Elementor --container-max-width) */
	--content-max: 1200px;
	--gutter: 20px;

	/* Type scale (desktop; steps at 880 / 490 below) */
	--fs-hero:  60px;   /* kit primary */
	--fs-h2:    54px;   /* kit 9a8bb9a */
	--fs-h3:    28px;   /* image-box titles (service cards) */
	--fs-lead:  20px;   /* hero subtitle / secondary */
	--fs-body:  18px;   /* kit text */
	--fs-count: 90px;   /* counter number */
	--lh-head:  1.15;
	--head-trim: 10px;  /* px trimmed off the header height (content shifts up); re-added on <main> so page layout below is unchanged */
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background-color: var(--bg); }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.7;
	color: var(--ink);
	/* Mint wash anchored to the bottom of the BODY box (footer bottom), fading up. html
	   carries the base colour so this gradient stays on the body box (no canvas-propagation),
	   showing through the transparent FAQ + footer as one continuous bottom-up accent. */
	background: linear-gradient(to top, var(--mint) 0%, rgba(240, 254, 254, 0) 100%) no-repeat bottom center / 100% 900px;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-head);
	font-weight: 600;
	line-height: var(--lh-head);
	text-transform: capitalize;
	color: var(--blk);
	margin: 0;
}

/* ---------- Layout helpers ---------- */
.content {
	width: 100%;
	max-width: calc(var(--content-max) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.site-main { display: block; }
/* Re-add the header's trimmed height as a mint band at the top of the page content,
   so (a) content below stays at the exact same Y on every page, and (b) at rest the
   top 100px reads as one continuous mint block just like before. `body >` targets the
   header's main only (some templates nest a second <main>). */
body > .site-main { padding-top: var(--head-trim); background: linear-gradient(var(--mint), var(--mint)) no-repeat top center / 100% var(--head-trim); }

/* Section vertical rhythm — mirrors Elementor's ~50/50 section padding, with
   coloured panels supplying their own internal padding. */
.section { padding-block: 50px; }              /* plain ↔ plain = 100px gap */
.hero { padding-top: 64px; padding-bottom: 50px; background: linear-gradient(180deg, var(--mint) 0%, rgba(252,252,252,0) 60%); }  /* 64px header→hero gap, matches live */
/* Coloured bands: the neighbour supplies 50px and the band adds a 50px margin, so the
   band EDGE sits a full 100px from the neighbour's content — matching plain↔plain.
   The band's own inner padding (60px) is separate breathing room, so every visible
   section gap reads ~100px consistently. */
.section--muted { margin-block: 50px; padding-block: 60px; background: var(--panel); }
.section--muted + .section--muted { margin-top: 100px; }  /* adjacent bands keep full 100px */
.section--panel { background: var(--panel); }
/* FAQ has no background of its own — the body's bottom-anchored mint wash shows through
   it and the footer as one continuous accent. */

/* Skip link */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--blk); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }

/* Visually-hidden (screen-reader only) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Intro / book-a-call — standalone CANVAS (no header/footer), mirrors live's
   Elementor Canvas: plain page background, full-viewport, HubSpot widget near the
   top with 40px top + 20px side padding (14px on mobile). */
/* Generic content page (Privacy Policy, etc.) — white card on a mint wash that
   flows down from the header and fades, mirroring live. */
.page-doc { padding-block: 50px; background: linear-gradient(180deg, var(--mint) 0%, rgba(252,252,252,0) 100%) no-repeat top center / 100% 320px; }
.page-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 2px 20px rgba(0,0,0,.05); padding: 52px 60px; }
.page-card__title { font-size: 40px; }
.page-card .sd-divider { margin: 16px 0 22px; }
.page-card__body { color: var(--blk); }
.page-card__body > p:first-child { font-weight: 700; }               /* the "Effective …" date line */
.page-card__body h2 { font-size: 28px; font-weight: 600; line-height: 1.2; text-transform: none; margin: 34px 0 14px; }
.page-card__body p { font-size: var(--fs-body); line-height: 1.7; margin: 0 0 16px; }
.page-card__body ul, .page-card__body ol { font-size: var(--fs-body); line-height: 1.7; margin: 0 0 16px; padding-left: 22px; }
.page-card__body a { text-decoration: underline; }
.page-card__body a:hover { color: var(--green); }
@media (max-width: 800px) { .page-card { padding: 34px 22px; } .page-card__title { font-size: 34px; } }

body.intro-canvas { background: var(--bg); }
/* min-height 1440px matches live's canvas — leaves generous scroll room below the
   widget on desktop; collapses to content height on tablet/mobile (as live does). */
.intro { min-height: 1440px; padding: 40px 20px 0; background: linear-gradient(180deg, var(--mint) 0%, rgba(252,252,252,0) 100%) no-repeat top center / 100% 420px; }  /* mint bleeds down from the header into the page, matching every other page */
.intro__inner { width: 100%; max-width: var(--content-max); margin-inline: auto; }
.intro .meetings-iframe-container { min-height: 680px; }
.intro.intro--mkt { padding-bottom: 200px; }   /* breathing room below the scheduler on /marketing-intro */
/* /marketing-intro: full-width click-to-watch video facade above the scheduler. */
/* Headline above the video: house heading font, regular weight with an extra-bold
   opening phrase ("The ONLY two things"). text-transform:none keeps the sentence case. */
.mkt-intro__headline { text-transform: none; text-align: center; font-weight: 400; font-size: var(--fs-h2); line-height: 1.15; color: var(--ink); max-width: none; margin: 0 0 30px; }
.mkt-intro__headline strong { font-weight: 700; }
.mkt-intro__video { margin: 0 0 30px; }
/* Fill the content width, and scale the radius / "Click To Watch" / play icon
   PROPORTIONALLY to the larger video (container-query units) so the facade keeps
   the same visual ratio as the homepage's smaller one. */
.mkt-intro__video .video-facade { max-width: none; container-type: inline-size; border-radius: 1cqw; }
.mkt-intro__video .video-facade__cta { font-size: 10cqw; }
.mkt-intro__video .video-facade__play { width: 13cqw; height: 9.2cqw; }   /* definite height (13 × 48/68) so margin:auto keeps it centered */
.mkt-intro__video .video-facade__play svg { width: 100%; height: 100%; display: block; }
/* Minimal intro header: logo only, not a link → don't look clickable. */
.site-header--minimal .site-header__brand { cursor: default; }
@media (max-width: 1160px) { .intro { min-height: 0; padding-bottom: 60px; } }
@media (max-width: 800px) { .intro { padding-left: 14px; padding-right: 14px; } }

/* ---------- Typography roles ---------- */
.section-title { font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-head); text-transform: capitalize; color: var(--blk); }
.section-title--center { text-align: center; }
/* These headings are NOT capitalized on live (Elementor applies capitalize only
   to the var-based h2 role); their source casing shows through. */
.brands .section-title, .casestudy .section-title, .problem .section-title { text-transform: none; font-size: 52px; }
.section-title + p { margin-top: 20px; }
.eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .12em; font-size: 13px; font-weight: 700; color: var(--muted); margin: 0 0 12px; }
p { margin: 0 0 1rem; font-size: var(--fs-body); line-height: 1.7; }
p:last-child { margin-bottom: 0; }

/* Green divider widget under headings (live: kit colour #90BB15, 1.2px, 100px;
   full-width variant under the hero subtitle, brands title and contact panel). */
.sd-divider { display: block; width: 100px; max-width: 100%; height: 0; border: 0; border-top: 1.2px solid var(--green); margin: 16px 0 24px; }
.sd-divider--full { width: 100%; }
.section-title--center + .sd-divider { margin-inline: auto; }

/* ---------- Buttons (exact: 20px / 14×40 / radius 1000 / gradient slide) ---------- */
.btn {
	display: inline-flex; align-items: center; gap: .4em;
	font-family: var(--font-body); font-weight: 500; font-size: 20px; line-height: 1.2;
	text-transform: capitalize; cursor: pointer; color: var(--blk);
	padding: 14px 40px; border-radius: 1000px; border: 2px solid var(--y);
	background-color: var(--y);
	background-image: linear-gradient(to right, var(--yl) 50%, var(--y) 50%);
	background-size: 200%; background-position: 0;
	transition: background-position .4s ease, background-color .4s ease;
}
.btn:hover, .btn:focus-visible { background-position: -100%; }

/* =========================================================================
   HEADER
   ========================================================================= */
/* Live header: NOT sticky, no border. 100px tall, logo 290px, CTA = standard pill.
   The pale-mint hero wash continues up through the header (mint at the very top). */
/* Sticky header: mint at rest so it matches the hero 1:1, then fades to
   translucent-white + blur (alphaefficiency-style) once scrolled — `.is-scrolled`
   is toggled in JS. Blur stays on; it only shows through once the bg is translucent. */
.site-header { position: sticky; top: 0; z-index: 100;
	/* --sd-scroll (0..1, set in JS over ~180px of scroll) fades the mint out and a
	   translucent-white layer in, so the change is gradual and tied to scroll distance. */
	background:
		linear-gradient(rgba(255,255,255, calc(0.75 * var(--sd-scroll, 0))), rgba(255,255,255, calc(0.75 * var(--sd-scroll, 0)))),
		linear-gradient(rgba(240,254,254, calc(1 - var(--sd-scroll, 0))), rgba(240,254,254, calc(1 - var(--sd-scroll, 0)))); }
/* Blur only once scrolled — at the top of every page there's no backdrop-filter layer
   to build, which removes the paint hitch when navigating between pages. */
.site-header.is-scrolled { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.site-header__inner { min-height: calc(100px - var(--head-trim)); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.site-header__logo--wide { width: 196px; height: auto; }  /* cropped wordmark (977px of the 1443px "…Studios") kept at the same typographic scale as the 290px original */
.site-header__logo--mark { width: 60px; height: auto; display: none; }
/* Header nav — centered between the logo and the Contact CTA button; collapses to a
   hamburger drawer at <=1160. */
.site-nav { flex: 1; display: flex; justify-content: center; }
.site-nav ul { list-style: none; display: flex; align-items: center; gap: 46px; margin: 0; padding: 0; }
/* hover + current page = a green underline (text stays black) */
.site-nav a { font-family: var(--font-body); font-weight: 500; font-size: 18px; color: var(--blk); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.2px; text-underline-offset: 6px; transition: text-decoration-color .2s ease; }
.site-nav a:hover, .site-nav a:focus-visible { text-decoration-color: var(--green); }
.site-nav [aria-current="page"], .site-nav .current-menu-item > a { text-decoration-color: var(--green); }
.site-nav__contact { display: none; }   /* desktop: Contact is the CTA button; this drawer-only link is hidden */
.site-header__cta { flex: none; }

/* "Our Work" dropdown (desktop hover panel) */
.site-nav__group { position: relative; }
.site-nav__group-label { position: relative; cursor: pointer; padding-right: 15px; font-family: var(--font-body); font-weight: 500; font-size: 18px; color: var(--blk); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.2px; text-underline-offset: 6px; transition: text-decoration-color .2s ease; }
.site-nav__group-label::after { content: ""; position: absolute; right: 0; top: 50%; margin-top: -2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .55; transition: transform .2s ease; }
.site-nav__group:hover .site-nav__group-label, .site-nav__group-label:focus-visible, .site-nav__group-label[aria-current="page"] { text-decoration-color: var(--green); }
.site-nav__group:hover .site-nav__group-label::after { transform: rotate(180deg); }
.site-nav__drop { position: absolute; top: 100%; left: 50%; z-index: 70; padding-top: 15px; transform: translateX(-50%) translateY(-6px); opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.site-nav__group:hover .site-nav__drop, .site-nav__group:focus-within .site-nav__drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-drop { position: relative; width: 340px; background: var(--white); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 44px rgba(0,0,0,.13); padding: 10px; }
.nav-drop::before { content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 13px; height: 13px; background: var(--white); border-left: 1px solid var(--border); border-top: 1px solid var(--border); }
.nav-drop__item { display: block; padding: 14px 16px; border-radius: 10px; text-decoration: none; transition: background .15s ease; }
.nav-drop__item:hover { background: var(--panel); }
.nav-drop__title { display: block; font-family: var(--font-head); font-weight: 600; font-size: 18px; color: var(--blk); }
.nav-drop__arrow { color: var(--green); }
.nav-drop__desc { display: block; margin-top: 5px; font-size: 14px; line-height: 1.5; color: var(--muted); }
/* No underline across the whole item (would underline the description); green underline
   only on the title on hover. (Beats the .site-nav a underline rule.) */
.site-nav .nav-drop__item { text-decoration: none; }
.nav-drop__item:hover .nav-drop__title, .nav-drop__item:focus-visible .nav-drop__title { text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 1.2px; text-underline-offset: 4px; }
/* the item for the page you're on shows the hover appearance persistently */
.nav-drop__item[aria-current="page"] { background: var(--panel); }
.nav-drop__item[aria-current="page"] .nav-drop__title { text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 1.2px; text-underline-offset: 4px; }

/* Hamburger toggle: hidden on desktop; shown + animated as a drawer at <=1160. */
.site-header__toggle { display: none; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.hero__lead { font-family: var(--font-head); font-weight: 600; text-transform: capitalize; font-size: var(--fs-hero); line-height: var(--lh-head); color: var(--blk); margin: 0 0 20px; max-width: 548px; }
.hero__title { font-family: var(--font-head); font-weight: 400; text-transform: none; font-size: var(--fs-lead); line-height: 1.5; color: var(--blk); margin: 0 0 22px; max-width: 580px; }
.hero__proof { width: min(300px, 100%); height: auto; margin: 0 0 26px; }
.hero__media { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }  /* video flush to the content's right edge */
.hero__caption { width: 100%; max-width: 520px; text-align: center; color: var(--muted); font-size: 15px; margin: 0; }

.video-facade { position: relative; width: 100%; max-width: 535px; margin: 0; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 34px rgba(0,0,0,.14); background: #000; }
.video-facade__btn { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; width: 100%; height: 100%; }
.video-facade__poster { width: 100%; height: 100%; object-fit: cover; }
/* "Click To Watch" italic across the TOP + red play button dead-centre, straight
   over the thumbnail (no dark scrim). Strong text-shadow keeps it legible over
   bright frames. No hover animation (static, per brief). */
.video-facade__overlay { position: absolute; inset: 0; }
.video-facade__cta { position: absolute; top: 20%; left: 5%; right: 5%; text-align: center; font-family: var(--font-head); font-weight: 700; font-style: italic; color: #fff; font-size: clamp(28px, 6.5vw, 54px); line-height: 1.02; text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 3px 16px rgba(0,0,0,.6); }
.video-facade__play { position: absolute; inset: 0; margin: auto; width: 68px; height: 48px; display: block; opacity: .82; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* =========================================================================
   BRANDS
   ========================================================================= */
.brands { text-align: center; }
.brands__grid { list-style: none; margin: 34px 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 20px; align-items: center; justify-items: center; }
.brands__item { display: flex; align-items: center; justify-content: center; }
/* each logo width is set inline per the live values; height follows */
.brands__item img { max-width: 100%; height: auto; object-fit: contain; }

/* =========================================================================
   CASE STUDY (contained rounded grey card on the white page)
   ========================================================================= */
.casestudy__grid { display: grid; grid-template-columns: 280px 1fr; gap: 44px; align-items: center; background: var(--panel); border-radius: 0; padding: 46px 50px; }
.casestudy__number { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-count); line-height: 1; color: var(--blk); margin: 0; }
.casestudy__stat-label { color: var(--blk); font-size: 16px; margin: 6px 0 0; }
.casestudy__body .section-title { margin-bottom: 18px; }
.casestudy__body .btn { margin-top: 22px; }

/* =========================================================================
   PROJECTS
   ========================================================================= */
.projects__grid { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 20px; }
/* A lone straggler on the last row of the portfolio grid (e.g. 13 items in 3 cols) → center it (desktop only; tablet/mobile stack to 1 column). */
@media (min-width: 1161px) { .portfolio__grid > .projects__item:last-child:nth-child(3n+1) { grid-column: 2; } }
/* Outer frame (live .first): 2px PALE-yellow (#FDED8B), 18px rounded, 10px padding
   (the gap) around the 14px-rounded image (.second) inside it. */
.projects__item { border: 2px solid var(--yl); border-radius: 18px; padding: 10px; display: flex; }
.project-card { position: relative; display: block; width: 100%; min-height: 351px; background-size: cover; background-position: top center; background-repeat: no-repeat; border-radius: 14px; overflow: hidden; box-shadow: 0 0 4px rgba(0,0,0,.25); }
.project-card__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; background: rgba(0,0,0,0); opacity: 0; pointer-events: none; transition: opacity .5s ease, background .5s ease; }
/* Reveal via the JS .is-revealed class (touch tap) or keyboard focus — everywhere. */
.project-card.is-revealed .project-card__overlay, .project-card:focus-within .project-card__overlay { opacity: 1; background: rgba(0,0,0,.5); pointer-events: auto; }
/* Mouse hover reveal ONLY where real hover exists. Keeping :hover out of touch
   devices stops the sticky-hover "double-tap" (1st tap hovered, 2nd tap clicked). */
@media (hover: hover) {
	.project-card:hover .project-card__overlay { opacity: 1; background: rgba(0,0,0,.5); pointer-events: auto; }
}
.project-card__name { color: #fff; font-size: 26px; }
.project-card__link { font-size: 17px; padding: 11px 28px; }

/* =========================================================================
   PROBLEM
   ========================================================================= */
.problem { text-align: center; }
.problem .section-title { max-width: 966px; margin-inline: auto; }
.problem__grid { list-style: none; margin: 54px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; text-align: center; }  /* ~71px heading→icon, matches live */
.pain-card { max-width: 347px; margin-inline: auto; }
.pain-card__icon { width: 70px; height: 70px; object-fit: contain; margin: 0 auto 14px; }
.pain-card__title { font-size: 28px; font-weight: 500; color: var(--blk); margin: 0 0 10px; }
.pain-card p { color: #333; margin: 0; font-size: 16px; line-height: 1.5; text-wrap: pretty; }  /* pretty: keeps a lone word off the last line (no orphans) */

/* =========================================================================
   SOLUTION + SERVICE CARDS
   ========================================================================= */
/* live: 480px text column + 720px cards column, cards block vertically centered vs the text */
.solution__grid { display: grid; grid-template-columns: 480px 1fr; gap: 0; align-items: center; }
.solution__copy .section-title { margin: 4px 0 18px; }
/* live: solution body copy is capped at ~425px (18px / 27px line-height) */
.solution__copy p { max-width: 425px; font-size: 18px; line-height: 1.5; }
.solution__copy .btn { margin-top: 22px; }
/* two independent columns → masonry stagger like live; cards 331px, block right-aligned to the content edge */
.solution__services { list-style: none; margin: 0; padding: 0; display: flex; justify-content: flex-end; gap: 20px; }
.solution__services-col { display: flex; flex-direction: column; gap: 20px; flex: 0 0 331px; }
.service-card { position: relative; background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 22px 20px 26px; box-shadow: 0 2px 14px rgba(0,0,0,.05); transition: transform .5s ease; }
.service-card:hover { transform: translateY(-10px); }
.service-card--link { display: block; text-decoration: none; color: inherit; cursor: pointer; }  /* whole card clickable; keeps div styling + hover lift */
/* Desktop-only forced line break (e.g. contact copy): dropped at tablet & below so the text wraps naturally. */
@media (max-width: 1160px) { br.sd-br-desktop { display: none; } }
.service-card__icon { position: absolute; top: 20px; right: 18px; width: 40px; height: 40px; object-fit: contain; margin: 0; }
.service-card__title { font-size: 28px; font-weight: 500; margin: 0 0 10px; padding-right: 48px; }
.service-card p { color: var(--muted); font-size: 16px; margin: 0; }

/* =========================================================================
   TESTIMONIALS
   ========================================================================= */
.testimonials { text-align: center; }
/* live: 300px avatar column + 740px quote column, centered (=1040), no inter-column gap */
.testimonials__list { display: flex; flex-direction: column; gap: 120px; margin: 46px auto 0; max-width: 1054px; text-align: left; }  /* 120px between testimonials, matches live */
/* 46px gap between the avatar and the quote text, matching live (was ~16px). */
.testimonial { display: grid; grid-template-columns: 268px 740px; gap: 46px; align-items: center; margin: 0; }
.testimonial--reverse { grid-template-columns: 740px 268px; }
.testimonial--reverse .testimonial__person { order: 2; }
.testimonial__person { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
/* The circular crop + green ring are baked INTO the avatar image file — show it as-is,
   no border-radius (would clip the ring), no object-fit, no CSS ring. */
.testimonial__avatar { width: 268px; max-width: 100%; height: auto; }
.testimonial__meta { display: flex; flex-direction: column; gap: 4px; }
.testimonial__name { font-family: var(--font-head); font-weight: 600; font-size: 30px; line-height: 1.15; color: var(--blk); }
.testimonial__role { color: var(--muted); font-size: 18px; }
.testimonial__quote-mark { width: 68px; height: auto; margin: 0 0 8px; }
.testimonial__quote { margin: 0; }
.testimonial__quote p { font-size: 26px; line-height: 1.76; color: var(--ink); margin: 0; }
/* company logo sits on the OUTER edge of the quote (width set inline per logo) */
.testimonial__logo { display: block; height: auto; object-fit: contain; margin: 24px 0 0 auto; }
.testimonial--reverse .testimonial__logo { margin-left: 0; margin-right: auto; }

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.contact__copy .section-title { margin-bottom: 0; max-width: 574px; }
.contact__copy > p { color: var(--blk); }
.contact__social ul { list-style: none; display: flex; gap: 14px; margin: 22px 0 0; padding: 0; }
.contact__social a { display: inline-flex; align-items: center; justify-content: center; }
.contact__social .sd-social-icon { width: 42px; height: 42px; }

.contact__panel { background: var(--white); border-radius: 16px; box-shadow: 0 14px 40px rgba(0,0,0,.10); padding: 30px 28px; text-align: center; border: 1px solid var(--border); }
.contact__panel-title { font-family: var(--font-head); font-weight: 700; text-transform: capitalize; font-size: 24px; color: var(--blk); margin: 0 0 10px; }
/* the green divider runs full-width THROUGH the avatar's centre (avatar sits on top) */
.contact__panel-avatar-row { position: relative; display: flex; justify-content: center; align-items: center; margin: 14px 0 20px; }
.contact__panel-avatar-row .sd-divider { position: absolute; left: 0; right: 0; top: 50%; width: 100%; margin: 0; }
/* ring width == the divider thickness (1.2px) so the line flows into the ring as one unit */
.contact__panel-avatar { position: relative; z-index: 1; width: 62px; height: 62px; border-radius: 50%; object-fit: cover; margin: 0; border: 1.2px solid var(--green); background: var(--white); }

.contact-form { text-align: left; margin-top: 6px; }
.contact-form__row { margin: 0 0 12px; }
.contact-form__row label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--ink); padding: 12px 14px; border: 1px solid #e2e2e2; border-radius: 6px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #9aa0a6; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--y); box-shadow: 0 0 0 3px rgba(254,220,26,.25); }
.contact-form textarea { resize: vertical; min-height: 104px; }
.contact-form__submit { width: 100%; justify-content: center; margin-top: 6px; }
.contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__status { padding: 12px 14px; border-radius: 6px; font-size: 15px; margin: 0 0 14px; }
.contact-form__status--ok { background: #e8f5ed; color: #1f7a3d; }
.contact-form__status--err { background: #fdecec; color: #b3261e; }

/* Contact PAGE (/contact) — vertical stack: heading, call options, then the form,
   centered in a narrow column, on a mint wash flowing down from the header. */
.contact-page { padding-block: 50px 70px; background: linear-gradient(180deg, var(--mint) 0%, rgba(252,252,252,0) 100%) no-repeat top center / 100% 360px; }
.contact-page__inner { max-width: 640px; margin-inline: auto; text-align: center; }
.contact-page .section-title--center + .sd-divider { margin-inline: auto; }
/* two branded CTA buttons side by side (wrap to stacked on narrow screens) */
.contact-page__options { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 30px 0 0; }
.contact-page__cta { padding-inline: 26px; }   /* a touch tighter than the default btn so both fit one row */
.contact-page__cta-icon { width: 20px; height: 20px; flex: none; }
/* space between the CTA buttons and the message form */
.contact-page__panel { margin-top: 54px; }
/* panel title stays centered (inherits .contact__panel); the form itself is left-aligned via .contact-form */

/* =========================================================================
   FAQ + CTA
   ========================================================================= */
.faq__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 54px; align-items: start; }
.faq__list-wrap .section-title { margin-bottom: 0; }
.faq__list { display: flex; flex-direction: column; gap: 12px; }
.faq__item { background: var(--white); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.05); overflow: hidden; }
.faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 17px 22px; font-family: var(--font-head); font-weight: 600; font-size: 18px; color: var(--blk); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before { content: "+"; flex: 0 0 auto; font-size: 24px; font-weight: 400; line-height: 1; color: var(--blk); transition: transform .2s ease; }
.faq__item[open] summary::before { transform: rotate(45deg); }
.faq__answer { padding: 0 22px 18px 58px; color: var(--muted); }
.faq__answer p { margin: 0; font-size: 16px; }

.cta-card { background: linear-gradient(127deg, var(--mint) 0%, var(--white) 80%); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 2px 14px rgba(0,0,0,.05); padding: 38px 30px; text-align: center; }
.cta-card__avatar { width: 118px; height: 118px; border-radius: 50%; object-fit: cover; margin: 0 auto 18px; border: 2px solid var(--green); background: var(--white); }
.cta-card__title { font-size: 28px; margin: 0 0 20px; }

/* =========================================================================
   FOOTER (light)
   ========================================================================= */
/* transparent — the body's bottom-anchored mint wash provides the footer background */
.site-footer { background: transparent; padding: 54px 0 30px; }
.site-footer__divider { margin: 0 0 46px; }   /* green top divider (content width) */

/* 3-column layout: brand + map | pages | contact */
.site-footer__cols { display: grid; grid-template-columns: 1.6fr 1fr 1.1fr; gap: 44px; align-items: start; }
.site-footer__col { min-width: 0; }
.site-footer__brand { display: inline-block; }
.site-footer__brand img { width: 220px; height: auto; }
.site-footer__blurb { margin: 18px 0 20px; max-width: 330px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.site-footer__map { max-width: 360px; }
.site-footer__map iframe { display: block; width: 100%; height: 200px; border: 0; border-radius: 12px; }
.site-footer__heading { font-size: 28px; font-weight: 500; color: var(--blk); margin: 0 0 18px; }  /* matches .service-card__title (h3) */
.site-footer__col--nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.site-footer__col--nav a { font-size: 16px; color: var(--muted); text-decoration: none; transition: color .2s ease; }
.site-footer__col--nav a:hover { color: var(--blk); }
.site-footer__contact { font-style: normal; display: flex; flex-direction: column; gap: 11px; margin: 0 0 22px; }
.site-footer__contact a, .site-footer__contact span { font-size: 16px; color: var(--muted); text-decoration: none; transition: color .2s ease; }
.site-footer__contact a:hover { color: var(--blk); }
.site-footer__social ul { list-style: none; display: flex; gap: 14px; margin: 0; padding: 0; }
.site-footer__social a { display: inline-flex; align-items: center; justify-content: center; }

/* bottom legal bar */
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--border); }
.site-footer__copy { font-size: 14px; color: var(--blk); margin: 0; }
.site-footer__legal { display: flex; gap: 20px; }
.site-footer__legal a { font-size: 14px; color: var(--muted); text-decoration: none; transition: color .2s ease; }
.site-footer__legal a:hover { color: var(--blk); }

@media (max-width: 1160px) {
	.site-footer__cols { grid-template-columns: 1fr 1fr; gap: 40px 36px; }
	.site-footer__col--brand { grid-column: 1 / -1; }
	.site-footer__map { max-width: 460px; }
}
@media (max-width: 800px) {
	.site-footer { padding: 40px 0 26px; }
	.site-footer__divider { margin: 0 0 34px; }
	.site-footer__cols { grid-template-columns: 1fr; gap: 34px; }
	.site-footer__map { max-width: 100%; }
	.site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 34px; }
}
/* custom brand icons — green shape centered in the 48 viewBox (yellow sits off-centre) */
.sd-social-icon { display: block; width: 34px; height: 34px; }

/* =========================================================================
   CASE STUDY (car-wrap-marketing-case-study) — mirrors live post-1719
   ========================================================================= */
/* Hero: H1 (left) + client logo (right), on the shared mint hero wash. */
.cs-hero__grid { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; }
.cs-hero__title { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-hero); line-height: var(--lh-head); color: var(--blk); text-transform: capitalize; margin: 0; max-width: 861px; }
.cs-hero__logo { width: 300px; height: auto; }

/* Stats band (grey): three big counters, each with a full-width green divider + label. */
.cs-stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 56px; }
.cs-stat__num { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-count); line-height: 1.15; color: var(--blk); margin: 0; }
.cs-stat .sd-divider { width: 100%; margin: 8px 0 16px; }
.cs-stat__label { font-size: var(--fs-body); line-height: 1.5; color: var(--blk); margin: 0; }

/* Google review: review image (left) + client logo (right), then author row below. */
.cs-review__grid { display: grid; grid-template-columns: 720px 1fr; align-items: center; gap: 40px; }
.cs-review__img { width: 100%; height: auto; }
.cs-review__img--mobile { display: none; }
.cs-review__logo-wrap { display: flex; justify-content: center; }
.cs-review__logo { width: 300px; height: auto; }
.cs-review__author { display: flex; align-items: center; gap: 24px; margin-top: 30px; }
.cs-review__avatar { width: 71px; height: 71px; border-radius: 50%; object-fit: cover; }
.cs-review__meta { display: flex; flex-direction: column; gap: 2px; margin: 0; margin-left: -8px; }
.cs-review__name { font-family: var(--font-head); font-weight: 600; font-size: 22px; color: var(--blk); line-height: 1.2; }
.cs-review__role { font-size: 16px; color: var(--muted); }

/* Article body — a narrower 900px reading column (live uses ~900 here, not 1200). */
.cs-article { padding-block: 0; }
.cs-narrow { width: 100%; max-width: calc(900px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.cs-block { margin-block: 56px; }
.cs-block:first-child { margin-top: 20px; }
.cs-h2 { font-size: var(--fs-h2); text-transform: none; }
.cs-block .sd-divider { margin: 16px 0 24px; }
.cs-h3 { font-size: 35px; font-weight: 600; line-height: 1.15; margin: 40px 0 20px; }
.cs-block > p { font-size: var(--fs-body); line-height: 1.7; color: var(--blk); margin: 0 0 14px; }
.cs-block .cs-h2 + p { margin-top: 20px; }
.cs-list { font-size: var(--fs-body); line-height: 1.7; color: var(--blk); margin: 0 0 14px; padding-left: 22px; }
.cs-list li { margin: 0; }
.cs-img { width: 100%; height: auto; border-radius: 14px; margin: 26px 0; }
.cs-figure { margin: 26px 0; }
.cs-figure .cs-img { margin: 0; }
.cs-caption { font-size: 16px; font-style: italic; line-height: 1.4; color: var(--muted); margin: 10px 0 0; }
/* Pull-quote with the block-quotes glyph and a green left rule. */
.cs-quote { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 16px; border-left: 4px solid var(--green); padding: 4px 0 4px 22px; margin: 40px 0 0; }
.cs-quote__mark { width: 34px; height: auto; }
.cs-quote p { font-size: var(--fs-body); line-height: 1.6; color: var(--blk); margin: 0; }

/* =========================================================================
   SIMPLE LANDING PAGES (web-design / seo) — centered ProfResults-style one-pager
   ========================================================================= */
.landing-hero { padding-top: 64px; padding-bottom: 50px;
	background: linear-gradient(180deg, var(--mint) 0%, rgba(252,252,252,0) 60%); }
.landing-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.landing-hero__copy { max-width: 580px; }              /* SEO page (default); released at <=1160 */
.landing-hero__copy--narrow { max-width: 570px; }      /* Web Design page */
.landing-hero__title { font-family: var(--font-head); font-weight: 600; text-transform: none; font-size: var(--fs-hero); line-height: var(--lh-head); color: var(--blk); margin: 0; } /* none = show the copy's exact casing (e.g. "invisible on Google") */
.landing-hero__lead { font-family: var(--font-head); font-weight: 400; font-size: var(--fs-lead); line-height: 1.5; color: var(--blk); margin: 20px 0 0; } /* Hind Vadodara 400 — matches the homepage hero subtitle */
.landing-hero__h1 { text-transform: none; } /* it's an <h1> styled like body text — override the base heading capitalize so its exact casing shows */
.landing-hero__proof { display: block; width: min(300px, 100%); height: auto; margin: 26px 0 0; }

/* Single circular-photo testimonial snippet (replaces the proof logos when set). */
.lp-testi { display: flex; align-items: center; gap: 16px; margin: 28px 0 0; max-width: 480px; }
/* green ring "floats" around the photo with a gap (matches the homepage testimonial avatars) */
.lp-testi__photo { width: 66px; height: 66px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 5px var(--bg), 0 0 0 6px var(--green); }
/* photo that already has the ring baked in — show as-is (a touch larger so the inner face matches the CSS-ring size) */
.lp-testi__photo--baked { width: 80px; height: 80px; border-radius: 0; box-shadow: none; }
.lp-testi__body { display: flex; flex-direction: column; gap: 4px; }
.lp-testi__quote { margin: 0; border: 0; padding: 0; }
.lp-testi__quote p { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 17px; line-height: 1.35; color: var(--blk); }
.lp-testi__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.lp-testi__name { font-size: 14px; color: var(--muted); }
.lp-testi__stars { color: #F5A623; font-size: 15px; letter-spacing: 3px; line-height: 1; }
.lp-testi__logo { height: auto; object-fit: contain; }

/* The video + form read as ONE white rounded card: the card clips the video's top
   corners (16px) while its bottom stays square and flush into the form below it. */
.landing-hero__media { max-width: 535px; width: 100%; align-self: center; justify-self: end; display: flex; flex-direction: column;
	background: var(--white); border: 1px solid var(--border); border-radius: 16px;
	box-shadow: 0 14px 40px rgba(0,0,0,.10); overflow: hidden; }
.landing-hero__video { width: 100%; max-width: none; margin: 0; border-radius: 0; box-shadow: none; }
.landing-hero__form { margin: 0; padding: 22px 22px 24px; }
.landing-hero__form-intro { font-family: var(--font-head); font-weight: 600; font-size: 18px; color: var(--blk); text-align: center; margin: 0 0 14px; }

/* Lead form: fields 50% (two per row), status + Send button full width. */
.lead-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lead-form .contact-form__row { margin: 0; }
.lead-form .contact-form__status { grid-column: 1 / -1; margin: 0; }
.lead-form .contact-form__submit { grid-column: 1 / -1; margin-top: 2px; }

/* Service pages: mint (scroll-fade) header, and a hero that fades from the mint blue
   into the grey (--hero-grey) over the top ~400px. The default mint <main> band still
   applies, so the header blue flows straight into the hero's blue-to-grey fade. */
body.sd-landing { --hero-grey: #F9F9F9; }
body.sd-landing .landing-hero { background: linear-gradient(180deg, var(--mint), var(--hero-grey) 400px); }
/* Final CTA = a floating contained grey card (like the case study), not a full-width band */
/* Floating grey CTA box (service pages + portfolio): grey sits on the inner box, not a full-width band. */
.landing-cta { background: transparent; margin-block: 0; padding-block: 50px; }
.landing-cta__inner { background: var(--panel); border-radius: 0; padding: 52px 44px; }
@media (max-width: 800px) { .landing-cta__inner { padding: 40px 24px; } }

.landing-cta__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
@media (min-width: 1161px) { .landing-cta__inner { min-height: 420px; } }  /* desktop only: give the box presence; content centers vertically */
.landing-cta__img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 2px solid var(--green); background: var(--white); margin: 0 0 20px; }
.landing-cta__body { max-width: 620px; margin: 20px auto 26px; }

/* =========================================================================
   PORTFOLIO ("Our Work") — reuses the homepage .projects grid
   ========================================================================= */
.portfolio { text-align: center; background: linear-gradient(180deg, var(--mint), rgba(252,252,252,0) 450px) no-repeat; }
/* Homepage projects: tagline under the heading + a "See our portfolio" button below the top-3 grid */
.projects__lead { font-family: var(--font-head); font-weight: 400; font-size: var(--fs-lead); line-height: 1.5; color: var(--blk); margin: 0; }
.projects__cta { text-align: center; margin-top: 42px; }
.portfolio__lead { font-family: var(--font-head); font-weight: 400; font-size: var(--fs-lead); line-height: 1.5; color: var(--blk); max-width: 620px; margin: 20px auto 0; }
.portfolio__grid { margin-top: 48px; text-align: left; }
/* "Reach out to Adam" CTA — founder avatar tucked into the pill button */
.reach-cta { display: inline-flex; align-items: center; }
.reach-cta__face { width: 74px; height: 74px; flex: none; border-radius: 50%; object-fit: cover; position: relative; z-index: 2; }
.reach-cta__btn { margin-left: -26px; padding-left: 48px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.reach-cta__arrow { margin-left: 8px; }

/* =========================================================================
   BLOG — "coming soon" placeholder
   ========================================================================= */
.blog-soon { min-height: 76vh; display: flex; align-items: center; text-align: center;
	background: linear-gradient(180deg, var(--mint) 0%, rgba(252,252,252,0) 70%); }
.blog-soon__inner { max-width: 620px; margin-inline: auto; }
.blog-soon__title { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-hero); line-height: var(--lh-head); color: var(--blk); margin: 0; }
.blog-soon .sd-divider { margin: 22px auto; }
.blog-soon__badge { font-family: var(--font-head); font-weight: 600; font-size: 20px; color: var(--green); text-transform: uppercase; letter-spacing: .14em; margin: 0 0 14px; }
.blog-soon__lead { font-family: var(--font-head); font-weight: 400; font-size: var(--fs-lead); line-height: 1.5; color: var(--blk); margin: 0 0 30px; }

/* =========================================================================
   RESPONSIVE — TABLET (<=1160, Sites Delight house standard)
   ========================================================================= */
@media (max-width: 1160px) {
	:root { --content-max: 1024px; --fs-hero: 50px; --fs-h2: 50px; }
	/* --- Mobile nav: hamburger + drawer (collapses the 3-item nav) --- */
	.site-header__inner { position: relative; }
	.site-header__toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -8px 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
	.hamburger { position: relative; width: 24px; height: 16px; }
	.hamburger span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--blk); transition: transform .3s ease, opacity .2s ease, top .3s ease; }
	.hamburger span:nth-child(1) { top: 0; }
	.hamburger span:nth-child(2) { top: 7px; }
	.hamburger span:nth-child(3) { top: 14px; }
	.site-header.is-open .hamburger span:nth-child(1) { top: 7px; transform: rotate(45deg); }
	.site-header.is-open .hamburger span:nth-child(2) { opacity: 0; }
	.site-header.is-open .hamburger span:nth-child(3) { top: 7px; transform: rotate(-45deg); }
	.site-nav { display: block; flex: none; position: absolute; top: calc(100% - 4px); left: 0; right: 0; z-index: 60; background: var(--mint); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 34px rgba(0,0,0,.12); overflow: hidden; max-height: 0; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: max-height .3s ease, opacity .25s ease, transform .3s ease, visibility .3s; }
	.site-header__cta { display: none; }            /* the CTA moves into the drawer at <=1160 */
	.site-nav__contact { display: block; }          /* Contact appears as a link inside the drawer */
	.site-header.is-open .site-nav { max-height: 80vh; overflow-y: auto; opacity: 1; visibility: visible; transform: none; }
	.site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 8px; }
	.site-nav li + li { border-top: 1px solid var(--border); }
	.site-nav a { display: block; padding: 14px 12px; font-size: 18px; }
	/* "Our Work" dropdown in the drawer: a label + indented sub-links (no card / descriptions) */
	.site-nav__group { position: static; }
	.site-nav__group-label { display: block; padding: 14px 12px; }
	/* Caret stays visible on mobile as an expand/collapse affordance; rotates when open. */
	.site-nav__group-label::after { display: block; right: 14px; }
	.site-nav__group.is-open > .site-nav__group-label::after { transform: rotate(180deg); }
	/* Dropdown is COLLAPSED by default in the drawer; the label toggles .is-open (JS accordion). */
	.site-nav__drop { position: static; transform: none; padding-top: 0; overflow: hidden; max-height: 0; opacity: 0; visibility: hidden; transition: max-height .28s ease, opacity .2s ease, visibility .28s; }
	.site-nav__group.is-open .site-nav__drop { max-height: 60vh; opacity: 1; visibility: visible; }
	/* Neutralize the desktop hover/focus-within dropdown transform (translateX(-50%)) on
	   mobile — on the static drawer drop it shoves the items ~178px off-screen left, so a
	   real tap (which focuses the label) shows only empty rows. The drawer accordion is
	   driven solely by .is-open, so hover/focus must not transform or reveal the drop. */
	.site-nav__group:hover .site-nav__drop,
	.site-nav__group:focus-within .site-nav__drop { transform: none; opacity: 0; visibility: hidden; }
	.site-nav__group.is-open:hover .site-nav__drop,
	.site-nav__group.is-open:focus-within .site-nav__drop { transform: none; max-height: 60vh; opacity: 1; visibility: visible; }
	.nav-drop { position: static; width: auto; background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0; }
	.nav-drop::before { display: none; }
	.nav-drop__item { padding: 12px 12px 12px 30px; border-radius: 0; border-top: 1px solid var(--border); }
	.nav-drop__title { font-family: var(--font-body); font-weight: 500; font-size: 18px; }
	.nav-drop__arrow, .nav-drop__desc { display: none; }
	.brands .section-title, .casestudy .section-title, .problem .section-title { font-size: 44px; }
	.hero__grid, .solution__grid, .contact__grid, .faq__grid, .landing-hero__grid { grid-template-columns: 1fr; gap: 40px; }
	.solution__copy p { max-width: none; }   /* full-width solution body on tablet + below */
	.solution__services { justify-content: center; }
	.hero__media { align-self: center; align-items: center; }
	/* landing hero stacks: copy (left-aligned) first, then the video+form centered */
	.landing-hero__media { max-width: 535px; width: 100%; margin-inline: auto; }
	.landing-hero__grid .landing-hero__copy { max-width: none; }   /* release both width variants when stacked */
	.hero__lead, .hero__title { max-width: none; }
	.casestudy__grid { grid-template-columns: 1fr; gap: 20px; }
	.projects__grid { grid-template-columns: 1fr; }   /* live: 1 column at tablet */
	.project-card { min-height: 480px; }
	.problem__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
	.testimonial, .testimonial--reverse { grid-template-columns: 230px 1fr; gap: 20px; }
	.testimonial--reverse .testimonial__person { order: 0; }
	.testimonial__logo, .testimonial--reverse .testimonial__logo { margin-left: 0; margin-right: auto; }   /* logo LEFT for all 3 on tablet + mobile */
	.testimonial__avatar { width: 200px; }
	.testimonial__name { font-size: 27px; }
	.testimonial__quote p { font-size: 22px; line-height: 1.6; }
	.faq__cta { max-width: 480px; }
	/* case study: hero + stats + review stack and CENTER (matches live) —
	   hero logo sits ABOVE the heading; stats collapse to one centered column. */
	.cs-hero__grid { grid-template-columns: 1fr; gap: 24px; justify-items: center; text-align: center; }
	.cs-hero__title { max-width: none; order: 2; }
	.cs-hero__logo { order: 1; justify-self: center; }
	.cs-stats__grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
	.cs-stat .sd-divider { margin-inline: auto; }
	.cs-review__grid { grid-template-columns: 1fr; gap: 24px; }
	.cs-review__card { display: flex; justify-content: center; }
	.cs-review__img--desktop { max-width: 720px; }
	.cs-review__author { justify-content: center; }
}

/* =========================================================================
   RESPONSIVE — MOBILE (<=800, Sites Delight house standard)
   ========================================================================= */
@media (max-width: 800px) {
	:root { --fs-hero: 42px; --fs-h2: 42px; --fs-lead: 18px; --fs-body: 16px; --fs-count: 62px; --gutter: 14px; }
	.cs-h3 { font-size: 30px; }
	/* mobile section gaps = 60px (30+30 / neighbour 30 + band margin 30) */
	.section { padding-block: 30px; }
	.hero { padding-top: 44px; padding-bottom: 30px; }
	.section--muted { margin-block: 30px; padding-block: 40px; }
	body { background-size: 100% 720px; }
	.brands .section-title, .casestudy .section-title, .problem .section-title { font-size: 36px; }
	.site-header__inner { min-height: 74px; }   /* slightly shorter header on mobile */
	.site-header__logo--wide { display: none; }  /* mark only on mobile; nav is the hamburger drawer (see <=1160) */
	.site-header__logo--mark { display: block; }
	.brands__grid { grid-template-columns: repeat(2, 1fr); gap: 26px 24px; }
	.projects__grid, .problem__grid { grid-template-columns: 1fr; }
	/* case study mobile: swap to the tall mobile review image; stats already
	   stacked + centered from the tablet rule above. */
	.cs-stat .sd-divider { margin: 6px auto 12px; }
	.cs-review__img--desktop { display: none; }
	.cs-review__img--mobile { display: block; width: 100%; max-width: 420px; margin-inline: auto; }
	.cs-review__author { flex-wrap: wrap; gap: 14px; }
	.cs-block { margin-block: 40px; }
	.solution__services { flex-direction: column; align-items: center; }
	.solution__services-col { flex: none; width: 100%; max-width: 360px; }
	.project-card { min-height: 300px; }
	.hero__grid { gap: 20px; }
	.testimonial, .testimonial--reverse { grid-template-columns: 1fr; gap: 16px; }
	.testimonial__person { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: 16px; }
	.testimonial__meta { align-items: flex-start; }
	.testimonial__avatar { width: 130px; }
	.testimonial__name { font-size: 24px; }
	.testimonial__role { font-size: 16px; }
	.testimonial__quote p { font-size: 20px; line-height: 1.6; }
	.testimonial__quote-mark { width: 54px; }
	.testimonials__list { gap: 64px; }
	.contact__panel { padding: 24px 18px; }
	.lead-form { grid-template-columns: 1fr; }   /* fields stack full-width on phones */
	.cta-card { padding: 30px 20px; }
}