/*
Theme Name: WEB H INDIA
Theme URI: https://webhindia.com/
Author: WEB H INDIA
Description: Lightweight block theme for the WEB H INDIA corporate site. No page builder. Page content is core blocks generated from content/*.md by tools/build_site.py — edit the markdown, not the page.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: webhindia
*/

:root {
	--whi-gutter: clamp(1rem, 4vw, 2rem);
	--whi-radius: 10px;
	--whi-shadow: 0 1px 2px rgba(14, 27, 43, .05), 0 6px 18px rgba(14, 27, 43, .06);
	--whi-topbar-h: 2rem;
	--whi-mbar-h: 0px;
	--whi-verify-bg: #FFF4C2;
	--whi-verify-ink: #5C4400;
	--whi-verify-line: #C99A00;
}

html { scroll-behavior: smooth; scroll-padding-top: 6rem; } /* clear the sticky header */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.wp-site-blocks > * { margin-block: 0; }
.wp-block-post-content > .alignfull { margin-block: 0 !important; }
:focus-visible { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.screen-reader-text:focus { clip: auto; }

/* ---------- Layout primitives ---------- */

.whi-wrap { max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; }
.whi-wrap--narrow { max-width: var(--wp--style--global--content-size, 760px); }

/* Measured 14 Sep 2026: at 88px a side, section padding alone came to 2,112px on
   the homepage - 22% of a 9,445px page spent on gaps between bands. 64px still
   separates them clearly and gives the page back roughly 600px, without cutting
   a single word. The hero keeps its own, larger, breathing room. */
.whi-section,
.whi-cta { padding-block: clamp(2.5rem, 5vw, 4rem); padding-inline: var(--whi-gutter); }
.whi-hero { padding-block: clamp(3rem, 7vw, 5.5rem); padding-inline: var(--whi-gutter); }
.whi-section--alt { background: var(--wp--preset--color--surface); }

.whi-section .whi-wrap > p,
.whi-section .whi-wrap > ul,
.whi-section .whi-wrap > ol,
.whi-section .whi-wrap > .whi-verify { max-width: 72ch; }
.whi-section h2 { max-width: 28ch; margin-block: 0 1.25rem; }
.whi-section .whi-wrap > h3 { margin-block: 2.25rem .75rem; }
.whi-section .whi-wrap > :first-child { margin-top: 0; }

/* ---------- Hero ---------- */

.whi-hero {
	color: #fff;
	background-color: var(--wp--preset--color--ink);
	background-image:
		linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px),
		radial-gradient(ellipse at 85% 0%, rgba(240, 160, 48, .20), transparent 55%),
		linear-gradient(140deg, var(--wp--preset--color--petrol-dark) 0%, var(--wp--preset--color--ink) 72%);
	background-size: 44px 44px, 44px 44px, auto, auto;
	padding-block: clamp(3.5rem, 9vw, 7rem);
}
.whi-hero h1 { color: #fff; max-width: 20ch; margin-block: 0 1.25rem; }
.whi-hero .whi-lead { color: #D3E2EA; font-size: var(--wp--preset--font-size--lead); max-width: 60ch; margin-block: 0 2rem; }
.whi-hero a:not(.wp-block-button__link) { color: #fff; }
.whi-hero .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; border-color: rgba(255, 255, 255, .55); }
.whi-hero .wp-block-button.is-style-outline .wp-block-button__link:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
.whi-hero--simple { padding-block: clamp(2.5rem, 6vw, 4rem); }
.whi-hero--simple h1 { max-width: 30ch; margin-bottom: .5rem; }
.whi-hero--simple .whi-lead { margin-bottom: 0; }
.whi-hero .wp-block-post-date,
.whi-hero .wp-block-post-terms { color: #B9CCD6; font-size: var(--wp--preset--font-size--small); }

.whi-trust {
	list-style: none; padding: 1.75rem 0 0; margin: 2.75rem 0 0;
	display: flex; flex-wrap: wrap; gap: .75rem 2rem;
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-size: .95rem; color: #E4EEF3;
}
.whi-trust li { display: flex; gap: .55rem; align-items: baseline; }
.whi-trust li::before {
	content: ""; flex: none; width: .6rem; height: .6rem; border-radius: 2px;
	background: var(--wp--preset--color--accent); transform: translateY(-.05rem);
}

/* ---------- CTA band ---------- */

.whi-cta { background: var(--wp--preset--color--petrol); color: #E7F1F5; text-align: center; }
.whi-cta h2 { color: #fff; margin: 0 auto 1rem; max-width: 26ch; }
.whi-cta .whi-wrap > p { margin-inline: auto; max-width: 62ch; }
.whi-cta a:not(.wp-block-button__link) { color: #fff; }
.whi-cta .wp-block-buttons { justify-content: center; margin-top: 2rem; }
.whi-cta .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; border-color: rgba(255, 255, 255, .6); }

/* ---------- Buttons ---------- */

.wp-block-buttons { gap: .75rem; margin-top: 1.75rem; }
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent; color: var(--wp--preset--color--ink);
	border: 2px solid currentColor; padding: calc(.8rem - 2px) calc(1.4rem - 2px);
}
.wp-block-button__link { transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
.wp-block-button__link:active { transform: translateY(1px); }

/* ---------- Cards ---------- */

.whi-cards { display: grid; gap: 1.1rem; margin-top: 2.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.whi-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.whi-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.whi-cards > * { margin: 0 !important; }
@media (max-width: 1024px) {
	.whi-cards, .whi-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.whi-cards, .whi-cards--2, .whi-cards--4 { grid-template-columns: minmax(0, 1fr); }
}

.whi-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--whi-radius);
	padding: 1.5rem 1.5rem 1.6rem;
	box-shadow: var(--whi-shadow);
	transition: border-color .15s ease, transform .15s ease;
}
.whi-card > * { margin-block: 0; }
.whi-card > * + * { margin-top: .6rem; }
.whi-card h3 { font-size: 1.125rem; }
.whi-card p { color: var(--wp--preset--color--muted); font-size: .98rem; }
.whi-card--linked:hover { border-color: var(--wp--preset--color--petrol); transform: translateY(-2px); }
.whi-card__more { margin-top: 1rem !important; }
.whi-card__more a { font-weight: 700; text-decoration: none; }
.whi-card__more a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.whi-card__more a.whi-deadlink::after { display: none; }
.whi-card--linked::before {
	content: ""; position: absolute; left: 1.5rem; top: 0; width: 2.5rem; height: 3px;
	background: var(--wp--preset--color--accent); border-radius: 0 0 3px 3px;
}
.whi-label { display: block; color: var(--wp--preset--color--ink); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .15rem; }

.whi-step-no {
	display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; margin-right: .6rem;
	border-radius: 50%; background: var(--wp--preset--color--sky); color: var(--wp--preset--color--petrol-dark);
	font-size: .85rem; font-weight: 800; vertical-align: .1rem;
}

/* Industry-style cards: a heading plus labelled paragraphs */
.whi-card--sub h3 { font-size: 1.2rem; padding-bottom: .6rem; border-bottom: 1px solid var(--wp--preset--color--line); }

/* ---------- Chips ---------- */

.whi-chips { list-style: none; padding: 0; margin: 1.75rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; max-width: none !important; }
.whi-chips li {
	background: var(--wp--preset--color--sky); color: var(--wp--preset--color--petrol-dark);
	border-radius: 999px; padding: .35rem .95rem; font-size: .92rem; font-weight: 600;
}

/* ---------- FAQ ---------- */

.whi-faq {
	background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 8px;
	margin-block: .75rem 0 !important; max-width: 72ch;
}
.whi-faq summary {
	cursor: pointer; list-style: none; position: relative;
	padding: 1rem 3rem 1rem 1.25rem; font-weight: 700; color: var(--wp--preset--color--ink);
}
.whi-faq summary::-webkit-details-marker { display: none; }
.whi-faq summary::after {
	content: "+"; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%);
	font-size: 1.4rem; line-height: 1; color: var(--wp--preset--color--petrol);
}
.whi-faq[open] summary::after { content: "\2212"; }
.whi-faq > :not(summary) { margin: 0 !important; padding: 0 1.25rem 1.1rem; }

/* ---------- Review markers (never published: import.php refuses them in production) ---------- */

.whi-verify {
	background: var(--whi-verify-bg); color: var(--whi-verify-ink);
	border: 1px dashed var(--whi-verify-line); border-left: 4px solid var(--whi-verify-line);
	border-radius: 6px; padding: .75rem 1rem; font-size: .92rem;
}
.whi-verify::before {
	content: "VERIFY \00B7  resolve before publishing"; display: block;
	font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; margin-bottom: .2rem;
}
span.whi-verify { display: inline; padding: .05rem .4rem; border-left-width: 1px; font-size: .85em; }
span.whi-verify::before { content: "VERIFY"; display: inline; margin-right: .35rem; }
.whi-hero .whi-verify, .whi-cta .whi-verify { text-align: left; }
.whi-note {
	background: #EEF1F4; color: #36424F; border: 1px dashed #8A99A8; border-radius: 6px;
	padding: .75rem 1rem; font-size: .92rem;
}
.whi-note::before {
	content: "Build note"; display: block; font-size: .7rem; font-weight: 800;
	letter-spacing: .07em; text-transform: uppercase; margin-bottom: .2rem;
}
a.whi-deadlink { text-decoration: underline wavy #C0392B; text-underline-offset: 3px; }

/* ---------- Content odds and ends ---------- */

code { background: var(--wp--preset--color--sky); padding: .1em .35em; border-radius: 4px; font-size: .92em; }
.wp-block-code { background: var(--wp--preset--color--ink); color: #E6EEF3; border-radius: 8px; padding: 1rem 1.25rem; overflow-x: auto; font-size: .9rem; }
.wp-block-code code { background: none; padding: 0; }
.whi-table { overflow-x: auto; }
.whi-table table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.whi-table th, .whi-table td { border: 1px solid var(--wp--preset--color--line); padding: .55rem .75rem; text-align: left; vertical-align: top; }
.whi-table th { background: var(--wp--preset--color--surface); }
.wp-block-separator { border: 0; border-top: 1px solid var(--wp--preset--color--line); margin-block: 2.5rem; }
.wp-block-quote { border-left: 4px solid var(--wp--preset--color--petrol); padding-left: 1.25rem; margin-inline: 0; }

/* Long-form reading (blog posts, legal pages) */
.whi-prose { font-size: 1.075rem; }
.whi-prose h2 { margin-top: 2.75rem; font-size: 1.7rem; }
/* The 28ch cap suits big section headings, not article headings or post titles. */
.whi-section .whi-prose h2,
.whi-section .whi-postcard h2 { max-width: none; }
.whi-prose h3 { margin-top: 2rem; }
.whi-prose li + li { margin-top: .35rem; }

/* ---------- Header ---------- */

.whi-header {
	position: sticky; top: calc(-1 * var(--whi-topbar-h)); z-index: 50;
	background: #fff; box-shadow: 0 1px 0 var(--wp--preset--color--line);
}
.admin-bar .whi-header { top: calc(32px - var(--whi-topbar-h)); }

.whi-topbar {
	background: var(--wp--preset--color--ink); color: #C4D1DB; font-size: .8125rem;
	height: var(--whi-topbar-h); display: flex; align-items: center; padding-inline: var(--whi-gutter);
}
.whi-topbar .whi-wrap { width: 100%; }
.whi-topbar p { margin: 0; text-align: right; }
.whi-topbar a { color: #fff; text-decoration: none; }
.whi-topbar a:hover { text-decoration: underline; }
.whi-topbar__sep { margin-inline: .75rem; opacity: .5; }

.whi-bar { padding-inline: var(--whi-gutter); }
.whi-bar__inner { min-height: 70px; gap: 1.25rem; }

.whi-wordmark { margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: .03em; white-space: nowrap; }
.whi-wordmark a { color: var(--wp--preset--color--ink); text-decoration: none; display: inline-flex; align-items: center; gap: .55rem; }
.whi-wordmark a::before {
	content: ""; width: 1.05rem; height: 1.05rem; border-radius: 4px; flex: none;
	background: linear-gradient(135deg, var(--wp--preset--color--petrol) 0 55%, var(--wp--preset--color--accent) 55% 100%);
}

.whi-nav { flex: 1 1 auto; justify-content: flex-end; font-size: .93rem; font-weight: 600; }
.whi-nav .wp-block-navigation__container { gap: .25rem 1.1rem; }
.whi-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--ink); text-decoration: none; padding-block: .4rem; }
.whi-nav .wp-block-navigation-item__content:hover,
.whi-nav .current-menu-item > .wp-block-navigation-item__content,
.whi-nav .current-menu-ancestor > .wp-block-navigation-item__content { color: var(--wp--preset--color--petrol); }
.whi-nav .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--line) !important; border-radius: 8px;
	box-shadow: var(--whi-shadow); padding: .4rem 0; min-width: 240px !important;
}
.whi-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .55rem 1.1rem; }

.whi-bar__cta { margin: 0; flex: none; }
.whi-bar__cta .wp-block-button__link { padding: .6rem 1rem; font-size: .9rem; white-space: nowrap; }

.whi-bar__call { display: none; }
.whi-bar__call a {
	display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
	background: var(--wp--preset--color--sky); color: var(--wp--preset--color--petrol-dark);
}
.whi-bar__call svg { width: 1.2rem; height: 1.2rem; }

/* The core navigation block only collapses below 600px; a full menu plus a button
   needs the hamburger much earlier. Both numbers here were measured in the
   browser, never guessed:

     11 Sep 2026, nine top-level items          -> needed a ~1264px viewport
     12 Sep 2026, regrouped to seven             -> needs  a ~1056px viewport
     12 Sep 2026, text wordmark -> 206px logo    -> needs  a ~1102px viewport
     10 Nov 2026, mark + "WEB H INDIA" as text, 208px -> needs a ~1104px viewport

   The brand is part of this measurement, which is easy to forget: swapping the
   161px text wordmark for the 206px logo lockup cost 46px and would have wrapped
   the menu onto two lines between 1100 and 1144px had the breakpoint stayed at
   1099. It is 1149px now, ~47px above the measured need. Anything from 1150px up
   keeps the real menu; below that the hamburger, never a two-line menu.

   Re-measure whenever the menu OR the logo changes: squeeze .whi-bar__inner
   until the nav items wrap onto a second row, then add the 64px of bar padding. */
@media (max-width: 1149px) {
	.whi-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.whi-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.whi-nav { flex: 0 0 auto; order: 3; }
	.whi-header .whi-bar__cta { order: 2; margin-left: auto; } /* two classes: core's flex-child margin reset outranks one */
	.whi-header .wp-block-navigation__responsive-container.is-menu-open { padding: 1.25rem var(--whi-gutter); }
	.whi-header .is-menu-open .wp-block-navigation__container { gap: .9rem; font-size: 1.05rem; }
	/* The desktop menu is right-justified; an open full-screen menu reads better from the left. */
	.whi-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.whi-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.whi-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
	.whi-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { align-items: flex-start !important; text-align: left; }
	.whi-header .is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; box-shadow: none; padding: .4rem 0 0 1rem !important; }
}
@media (max-width: 700px) {
	/* Two classes: core's `body .is-layout-flex { display: flex }` outranks one. */
	.whi-header .whi-bar__cta { display: none; }
	.whi-bar__call { display: block; margin-left: auto; order: 2; }
	.whi-bar__inner { min-height: 60px; gap: .75rem; }
	:root { --whi-topbar-h: 0px; }
	.whi-topbar { display: none; }
}
@media (max-width: 782px) {
	.admin-bar .whi-header { top: 0; }
}

/* ---------- Footer ---------- */

.whi-footer { background: var(--wp--preset--color--ink); color: #B7C5D1; padding: clamp(3rem, 6vw, 4.5rem) var(--whi-gutter) 0; font-size: .95rem; }
.whi-footer a { color: #E4EDF3; text-decoration: none; }
.whi-footer a:hover { color: #fff; text-decoration: underline; }
.whi-footer__cols { gap: 2.5rem; margin: 0; }
.whi-footer__brand { color: #fff; font-weight: 800; font-size: 1.15rem; letter-spacing: .03em; margin: 0 0 .25rem; }
.whi-footer__h { color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 .9rem; }
.whi-footer ul { list-style: none; padding: 0; margin: 0; }
.whi-footer li + li { margin-top: .5rem; }
.whi-footer p { margin: 0 0 .9rem; }
.whi-footer strong { color: #E4EDF3; font-weight: 600; }
.whi-footer .wp-block-buttons { flex-direction: column; align-items: stretch; gap: .6rem; margin-top: 1rem; }
.whi-footer .wp-block-button__link { width: 100%; text-align: center; }
.whi-footer .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; border-color: rgba(255, 255, 255, .35); }
.whi-footer__desc { text-align: center; font-size: .85rem; color: #8FA2B2; margin: 2.75rem 0 0 !important; padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, .1); }
.whi-footer__bottom { gap: .5rem 1.5rem; padding-block: 1.25rem calc(1.25rem + var(--whi-mbar-h)); font-size: .85rem; color: #8FA2B2; }
.whi-footer__bottom p { margin: 0; }

/* ---------- Floating WhatsApp + mobile bottom bar ---------- */

.whi-wa {
	position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60;
	width: 3.5rem; height: 3.5rem; border-radius: 50%;
	display: grid; place-items: center;
	background: #1FA855; color: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .24);
	transition: transform .15s ease;
}
.whi-wa:hover { transform: scale(1.06); color: #fff; }
.whi-wa svg { width: 1.9rem; height: 1.9rem; }

.whi-mbar { display: none; }
@media (max-width: 781px) {
	:root { --whi-mbar-h: 3.6rem; }
	.whi-mbar {
		display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 59;
		background: #fff; box-shadow: 0 -1px 0 var(--wp--preset--color--line), 0 -6px 18px rgba(14, 27, 43, .08);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.whi-mbar a {
		display: flex; align-items: center; justify-content: center; gap: .5rem;
		height: var(--whi-mbar-h); font-weight: 700; text-decoration: none; font-size: 1rem;
	}
	.whi-mbar svg { width: 1.2rem; height: 1.2rem; }
	.whi-mbar__call { color: var(--wp--preset--color--petrol-dark); }
	.whi-mbar__wa { background: #1FA855; color: #fff; }
	.whi-wa { bottom: calc(var(--whi-mbar-h) + env(safe-area-inset-bottom) + .9rem); }
	body { padding-bottom: calc(var(--whi-mbar-h) + env(safe-area-inset-bottom)); }
	.whi-footer__bottom { padding-bottom: 1.25rem; }
}

/* ---------- Blog lists ---------- */

.whi-postlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.whi-postcard { border: 1px solid var(--wp--preset--color--line); border-radius: var(--whi-radius); padding: 1.5rem; background: #fff; }
.whi-postcard > * { margin-block: 0; }
.whi-postcard > * + * { margin-top: .5rem; }
.whi-postcard .wp-block-post-title { font-size: 1.3rem; }
.whi-postcard .wp-block-post-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.whi-postcard .wp-block-post-title a:hover { color: var(--wp--preset--color--petrol); }
.whi-postcard .wp-block-post-terms a { font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; }
.whi-postcard .wp-block-post-date { font-size: .85rem; color: var(--wp--preset--color--muted); }
.wp-block-query-pagination { margin-top: 2rem; }

/* ---------- Enquiry form (Fluent Forms, built by build/form.php) ---------- */

.whi-section .fluentform { max-width: 760px; margin-top: 1.5rem; }
.fluentform .ff-el-group { margin-bottom: 1.1rem; }
.fluentform .ff-el-input--label label { font-weight: 700; color: var(--wp--preset--color--ink); font-size: .95rem; }
.fluentform .ff-el-form-control {
	border: 1px solid #C9D7DF; border-radius: 8px; padding: .7rem .85rem; font-size: 1rem;
	background: #fff; color: var(--wp--preset--color--text); width: 100%;
}
.fluentform .ff-el-form-control:focus { border-color: var(--wp--preset--color--petrol); box-shadow: 0 0 0 3px rgba(11, 82, 112, .15); outline: none; }
.fluentform .ff-el-is-error .ff-el-form-control { border-color: #B42318; }
.fluentform .error,
.fluentform .text-danger { color: #B42318; font-size: .85rem; margin-top: .3rem; }
.fluentform .ff-btn-submit { font-weight: 700; font-size: 1rem; padding: .8rem 1.6rem; cursor: pointer; }
.whi-consent p { font-size: .85rem; color: var(--wp--preset--color--muted); margin: .25rem 0 0; }
.ff-message-success {
	background: #E7F5EE; border: 1px solid #A8D9BF; color: #14532D;
	border-radius: 10px; padding: 1rem 1.25rem; max-width: 760px;
}
.whi-form-error {
	background: #FDECEC; border: 1px solid #E7A9A9; color: #7F1D1D;
	border-radius: 10px; padding: .9rem 1.1rem; margin-top: 1rem; max-width: 760px;
}

/* ---------- Hero slider (home page) ---------- */

/* Headline, text and buttons on the left; the slider on the right; the trust
   strip across the bottom. The H1 never moves — only the illustration panel. */
/* The slider is taller than the text beside it. Empty 1fr rows above and below
   the text soak up the difference, so the headline, lead and buttons stay packed
   together and vertically centred instead of being spread apart. */
.whi-hero--split .whi-wrap {
	display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
	grid-template-rows: 1fr auto auto auto 1fr auto;
	column-gap: clamp(2rem, 4vw, 4rem);
}
.whi-hero--split .whi-wrap > * { grid-column: 1; }
.whi-hero--split .whi-wrap > h1 { grid-row: 2; }
.whi-hero--split .whi-wrap > .whi-lead { grid-row: 3; }
.whi-hero--split .whi-wrap > .wp-block-buttons { grid-row: 4; }
.whi-hero--split .whi-wrap > .whi-slider,
.whi-hero--split .whi-wrap > .whi-hero-art { grid-column: 2; grid-row: 1 / 6; align-self: center; }
.whi-hero--split .whi-wrap > .whi-trust { grid-column: 1 / -1; grid-row: 6; }
@media (max-width: 960px) {
	.whi-hero--split .whi-wrap { display: block; }
	.whi-hero--split .whi-slider { margin-top: 2.5rem; max-width: 34rem; }
	.whi-hero--split .whi-hero-art { margin-top: 2.25rem; max-width: 30rem; }
}

/* Single illustration on inner pages' heroes (build_site.py picks it by slug). */
.whi-hero-art { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }

.whi-slider { position: relative; }
.whi-slider__track { display: grid; }
.whi-slide {
	grid-area: 1 / 1; margin: 0; background: #fff; border-radius: 16px; overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
	opacity: 0; visibility: hidden; transform: translateY(10px) scale(.985);
	transition: opacity .55s ease, transform .55s ease, visibility .55s;
}
.whi-slide.is-active,
.whi-slider:not(.is-ready) .whi-slide:first-child { opacity: 1; visibility: visible; transform: none; }
.whi-art { aspect-ratio: 4 / 3; background: linear-gradient(160deg, #EAF3F7, #F8FBFC); }
.whi-art svg { display: block; width: 100%; height: 100%; }
.whi-slide figcaption { display: grid; gap: .2rem; padding: 1rem 1.35rem 1.2rem; border-top: 1px solid var(--wp--preset--color--line); }
.whi-slide figcaption strong { color: var(--wp--preset--color--ink); font-size: 1.1rem; line-height: 1.3; }
.whi-slide figcaption span { color: var(--wp--preset--color--muted); font-size: .95rem; line-height: 1.5; }
.whi-hero .whi-slide figcaption a { color: var(--wp--preset--color--petrol); font-weight: 700; text-decoration: none; margin-top: .3rem; justify-self: start; }
.whi-hero .whi-slide figcaption a:hover { text-decoration: underline; }

.whi-slider__nav { display: flex; align-items: center; justify-content: center; gap: .9rem; margin-top: 1.1rem; }
.whi-slider:not(.is-ready) .whi-slider__nav { display: none; }
.whi-slider__prev,
.whi-slider__next {
	width: 2.4rem; height: 2.4rem; border-radius: 50%; cursor: pointer;
	border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: #fff;
	font-size: 1.5rem; line-height: 1; display: grid; place-items: center; padding: 0 0 .15rem;
}
.whi-slider__prev:hover,
.whi-slider__next:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.whi-slider__dots { display: flex; gap: .45rem; }
.whi-slider__dot {
	width: .6rem; height: .6rem; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
	background: rgba(255, 255, 255, .38); transition: width .3s ease, background-color .3s ease;
}
.whi-slider__dot[aria-current="true"] { width: 1.6rem; background: var(--wp--preset--color--accent); }

/* Moving dashes on the connector lines — the data "flows". Paused off-screen. */
.whi-art .whi-flow { stroke-dasharray: 6 7; animation: whi-flow 1.4s linear infinite; }
.whi-slide:not(.is-active) .whi-flow { animation-play-state: paused; }
@keyframes whi-flow { to { stroke-dashoffset: -26; } }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
	.whi-art .whi-flow { animation: none; }
}

/* ---------------------------------------------------------------- tools
   The domain-availability and DNS lookup boxes ([whi_tool] in functions.php,
   behaviour in assets/tools.js). Verdict colours match the enquiry form's:
   green for a clean result, the same red family for a problem, and a neutral
   grey for "we could not tell" — which is a third answer, not a failure. */
.whi-tool { max-width: 760px; margin-top: 1.5rem; }
.whi-tool__form label { display: block; font-weight: 700; color: var(--wp--preset--color--ink); font-size: .95rem; margin-bottom: .4rem; }
.whi-tool__row { display: flex; gap: .6rem; flex-wrap: wrap; }
.whi-tool__row input {
	flex: 1 1 16rem; min-width: 0;
	border: 1px solid #C9D7DF; border-radius: 8px; padding: .7rem .85rem; font-size: 1rem;
	background: #fff; color: var(--wp--preset--color--text);
}
.whi-tool__row input:focus { border-color: var(--wp--preset--color--petrol); box-shadow: 0 0 0 3px rgba(11, 82, 112, .15); outline: none; }
.whi-tool .whi-btn {
	border: 0; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 1rem; padding: .8rem 1.6rem;
	background: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink);
}
.whi-tool .whi-btn:hover { background: var(--wp--preset--color--accent-dark); }
.whi-tool .whi-btn:disabled { opacity: .6; cursor: progress; }
.whi-tool__hint { font-size: .85rem; color: var(--wp--preset--color--muted); margin: .5rem 0 0; }
.whi-tool__status { font-size: .95rem; color: var(--wp--preset--color--muted); margin: 1rem 0 0; min-height: 1.4em; }
.whi-tool__out:not(:empty) { margin-top: 1rem; }

/* Availability table. The name column wraps rather than scrolling the page. */
.whi-tool__table { width: 100%; border-collapse: collapse; }
.whi-tool__table th,
.whi-tool__table td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--wp--preset--color--line); font-weight: 400; }
.whi-tool__table th { font-family: inherit; word-break: break-all; color: var(--wp--preset--color--ink); font-weight: 700; }
.whi-pill {
	display: inline-block; border-radius: 999px; padding: .15rem .7rem;
	font-size: .82rem; font-weight: 700; white-space: nowrap;
}
.whi-pill--free    { background: #E7F5EE; color: #14532D; border: 1px solid #A8D9BF; }
.whi-pill--taken   { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--muted); border: 1px solid var(--wp--preset--color--line); }
.whi-pill--unknown { background: var(--whi-verify-bg); color: var(--whi-verify-ink); border: 1px solid var(--whi-verify-line); }
.whi-pill--wait    { background: transparent; color: var(--wp--preset--color--muted); border: 1px dashed var(--wp--preset--color--line); }
.whi-tool__note { font-size: .82rem; color: var(--wp--preset--color--muted); }

/* DNS report cards. */
.whi-tool__card {
	border: 1px solid var(--wp--preset--color--line); border-left-width: 4px;
	border-radius: var(--whi-radius); background: #fff; padding: 1rem 1.15rem; margin-top: .8rem;
}
.whi-tool__card h3 { font-size: 1rem; margin: 0; color: var(--wp--preset--color--ink); }
.whi-tool__verdict { margin: .35rem 0 0; font-size: .95rem; }
.whi-tool__card ul { margin: .6rem 0 0; padding-left: 1.1rem; }
.whi-tool__card li {
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: .85rem; color: var(--wp--preset--color--muted); word-break: break-all;
}
.whi-tool__card--ok   { border-left-color: #4E9E76; }
.whi-tool__card--warn { border-left-color: #B42318; }
.whi-tool__card--info { border-left-color: var(--wp--preset--color--line); }
.whi-tool__card--warn .whi-tool__verdict { color: #7F1D1D; }

/* TRIAL 12 Sep 2026 - supplied WebH_Logo.jpg in the header. Remove with the
   markup in parts/header.html if the wordmark goes back. */
.whi-logo { flex: none; line-height: 0; }
.whi-logo img { height: 40px; width: auto; display: block; }
@media (max-width: 700px) { .whi-logo img { height: 34px; } }

/* ------------------------------------------------ sections with a drawing
   A "### Art" label in the markdown puts a drawing beside the text. Before
   this, a section's heading capped at 618px and its paragraphs at 660px inside
   a 1200px wrap, so the right 45% of every band on the site was empty - which
   reads as unfinished rather than airy.

   The text keeps its own measure (it must stay readable), the drawing takes the
   space that was going to waste, and a card grid still spans the full width
   underneath, because cards squeezed into half a band are worse than no cards. */
.whi-section--split .whi-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
	column-gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
/* Both get an explicit row. Grid auto-placement never goes back to fill a cell
   it has already passed, so the drawing - asked for column 1 after the text had
   taken column 2 - was landing on a second row instead of beside the words. */
.whi-split__text { grid-column: 1; grid-row: 1; }
.whi-split__text > * { max-width: none; }
.whi-section--split .whi-wrap > .whi-section-art { grid-column: 2; grid-row: 1; }
/* Cards keep the whole band: squeezed into half of one they are worse than none. */
.whi-section--split .whi-wrap > .whi-cards,
.whi-section--split .whi-wrap > .whi-chips,
.whi-section--split .whi-wrap > .whi-verify,
.whi-section--split .whi-wrap > .wp-block-buttons { grid-column: 1 / -1; margin-top: 2.5rem; }

/* Odd-numbered sections carry the tinted background; their drawing goes left so
   the alternation is legible rather than accidental. */
.whi-section--flip .whi-wrap { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }
.whi-section--flip .whi-wrap > .whi-split__text { grid-column: 2; grid-row: 1; }
.whi-section--flip .whi-wrap > .whi-section-art { grid-column: 1; grid-row: 1; }

.whi-section-art { line-height: 0; }
/* .whi-art is pinned to 4/3 for the hero slider, whose drawings are all 480x360.
   Section drawings are whatever height their subject needs - 250, 280, 312 - so
   the fixed ratio letterboxed them and left dead space under the picture. */
.whi-section-art .whi-art {
	aspect-ratio: auto;
	border-radius: var(--whi-radius);
	padding: clamp(.75rem, 2vw, 1.25rem);
}
.whi-section-art .whi-art svg { width: 100%; height: auto; display: block; }

@media (max-width: 960px) {
	.whi-section--split .whi-wrap,
	.whi-section--flip .whi-wrap { display: block; }
	.whi-section-art { margin-top: 2.25rem; max-width: 30rem; }
	/* On a phone the drawing follows the words it illustrates, never leads. */
	.whi-section--flip .whi-section-art { margin-top: 2.25rem; }
}

/* ------------------------------------------------------- card icons
   A card that links to one of our own pages gets that page's icon, picked from
   the slug by build_site.py - so a card never names its own picture and can
   never name the wrong one. The six-card services grid was the largest block of
   undifferentiated text on the site; this is what breaks it up.

   The glyphs are drawn on currentColor, so the tile below owns the colour and
   the hover state comes for free. */
.whi-card__icon {
	display: grid; place-items: center;
	width: 2.75rem; height: 2.75rem; margin-bottom: 1rem;
	border-radius: 10px;
	background: var(--wp--preset--color--sky);
	color: var(--wp--preset--color--petrol);
	transition: background .15s ease, color .15s ease;
}
.whi-card__icon svg { width: 1.5rem; height: 1.5rem; display: block; }
.whi-card--linked:hover .whi-card__icon {
	background: var(--wp--preset--color--petrol); color: #fff;
}
/* The accent bar at the card's top edge and a tile immediately under it read as
   two competing markers; the icon replaces the bar where there is one. */
.whi-card--linked:has(.whi-card__icon)::before { display: none; }
.whi-card__icon + h3 { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
	.whi-card__icon { transition: none; }
}

/* -------------------------------------------------- scroll reveal
   The starting state is behind .whi-reveal, which assets/reveal.js sets on
   <html> only once it is actually running. Without that class nothing is
   hidden, so a visitor with no JavaScript sees the whole page as before -
   the one thing a reveal effect must never get wrong. */
.whi-reveal .whi-section > .whi-wrap,
.whi-reveal .whi-cta > .whi-wrap {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}
.whi-reveal .whi-section.is-in > .whi-wrap,
.whi-reveal .whi-cta.is-in > .whi-wrap {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.whi-reveal .whi-section > .whi-wrap,
	.whi-reveal .whi-cta > .whi-wrap { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------- hero: fit the first screen
   Measured 14 Sep 2026 on a 1280x631 laptop: the hero came to 884px, so the two
   buttons — the only things on it a visitor can act on — sat 80px below the
   fold. Somebody arriving saw a headline and nothing to do.

   Three things were spending the height: 224px of padding, a headline running to
   three lines, and a 544px slider that set the row height on its own. All three
   are trimmed on short viewports only, so a tall desktop still gets the roomy
   version. Re-measure with the check in the scroll-cue block below. */
@media (min-width: 961px) and (max-height: 820px) {
	.whi-hero { padding-block: clamp(1.75rem, 3.5vh, 3rem); }
	.whi-hero h1 { font-size: clamp(2rem, 3.2vw, 2.7rem); margin-bottom: .85rem; }
	.whi-hero .whi-lead { margin-bottom: 1.35rem; }
	.whi-hero .whi-trust { margin-top: 1rem; }

	/* The slider sets the row height on its own, so it is the piece that has to
	   give. Its drawing is 4/3 everywhere else; here it is cropped to a wider
	   frame, which loses nothing — the drawings are built wide and the caption
	   underneath carries the point. */
	.whi-hero--split .whi-slider { max-width: 28rem; margin-inline: auto; }
	.whi-hero--split .whi-slide .whi-art { aspect-ratio: 16 / 9; }
	.whi-hero--split .whi-slide figcaption { padding-block: .9rem 1rem; }
}

/* The cue is a grid child of the hero like everything else. Without a row of its
   own it lands in the empty spacer at the top, above the headline. */
.whi-hero--split .whi-wrap > .whi-scrollcue {
	grid-column: 1; grid-row: 5; align-self: start; margin-top: .25rem;
}
/* Below 961px the hero stacks and the cue falls to the bottom, under the slider
   and the trust strip - by which point the reader has already scrolled and the
   cue is telling them something they just did. It exists for the desktop hero,
   where the first screen can be mistaken for the whole page. */
@media (max-width: 960px) {
	.whi-scrollcue { display: none; }
}

/* A visitor who cannot see a second screen does not know there is one. The cue
   sits under the hero, points at the next band, and is the one piece of motion
   on the page that repeats — so it is small, slow, and stops for anyone who has
   asked for reduced motion. */
.whi-scrollcue {
	display: flex; align-items: center; gap: .6rem;
	margin-top: 2rem;
	font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
	text-decoration: none; width: max-content;
}
.whi-scrollcue:hover { color: #fff; }
.whi-scrollcue svg { width: 1.1rem; height: 1.1rem; animation: whi-nudge 2.4s ease-in-out infinite; }
@keyframes whi-nudge {
	0%, 70%, 100% { transform: translateY(0); }
	82%           { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
	.whi-scrollcue svg { animation: none; }
}

/* ---------------------------------------------- section rhythm
   Every band opened with a bare h2, so eleven of them in a row read as one
   undifferentiated column. A short accent rule above each heading gives the page
   a beat without adding a word. It is drawn on the heading itself rather than as
   a wrapper, so it costs no markup and never lands on a hero or a CTA. */
.whi-section .whi-wrap h2::before,
.whi-split__text h2::before {
	content: "";
	display: block;
	width: 2.25rem; height: 3px;
	margin-bottom: 1.1rem;
	border-radius: 3px;
	background: var(--wp--preset--color--accent);
}

/* ------------------------------------------------ WhatsApp greeting bubble
   The look every visitor recognises from a chat widget - corner avatar, unread
   badge, a greeting that opens itself - sitting on the WhatsApp button we
   already had. No third-party script, no account, no cookie: each choice opens
   WhatsApp with the subject written. Behaviour in assets/chat.js. */
.whi-wa { position: fixed; }
.whi-wa__badge {
	position: absolute; top: -2px; right: -2px;
	min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem;
	border-radius: 999px; background: #D64545; color: #fff;
	font-size: .7rem; font-weight: 700; line-height: 1.15rem; text-align: center;
	box-shadow: 0 0 0 2px #fff;
}

.whi-chat {
	position: fixed; right: 1.1rem; bottom: 5.4rem; z-index: 61;
	width: min(21rem, calc(100vw - 2.2rem));
	background: #fff; color: var(--wp--preset--color--text);
	border: 1px solid var(--wp--preset--color--line); border-radius: 14px;
	box-shadow: 0 18px 44px rgba(14, 27, 43, .22);
	padding: 1rem 1.05rem .9rem;
	/* It came to 417px and reached up over the sticky header on a 575px laptop.
	   Capped against the viewport instead of a fixed number, so it shortens with
	   the window rather than only on the size I happened to test. */
	max-height: calc(100vh - 9rem);
	display: flex; flex-direction: column;
	opacity: 0; transform: translateY(8px) scale(.98);
	transition: opacity .2s ease, transform .2s ease;
}
.whi-chat.is-open { opacity: 1; transform: none; }
.whi-chat__x {
	position: absolute; top: .35rem; right: .5rem;
	border: 0; background: none; cursor: pointer;
	font-size: 1.4rem; line-height: 1; color: var(--wp--preset--color--muted);
}
.whi-chat__x:hover { color: var(--wp--preset--color--ink); }
.whi-chat__hi { margin: 0 1rem .5rem 0; font-size: .9rem; line-height: 1.45; }
.whi-chat__hi strong { color: var(--wp--preset--color--ink); }
.whi-chat__ask { margin: 0 0 .6rem; font-weight: 700; color: var(--wp--preset--color--ink); font-size: .95rem; }
/* The list is the part that scrolls if the window is short; the greeting and the
   hours line stay put, because the hours are the thing that must not be missed. */
.whi-chat__list {
	list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem;
	overflow-y: auto; min-height: 0;
}
.whi-chat__list a {
	display: block; padding: .42rem .65rem;
	border: 1px solid var(--wp--preset--color--line); border-radius: 8px;
	background: var(--wp--preset--color--paper, #F6F8FA);
	color: var(--wp--preset--color--ink); text-decoration: none;
	font-size: .9rem; line-height: 1.35;
}
.whi-chat__list a:hover { border-color: #1FA855; background: #F0FAF4; }
.whi-chat__when {
	flex: none;
	margin: .7rem 0 0; padding-top: .6rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: .8rem; color: var(--wp--preset--color--muted); line-height: 1.45;
}

/* On a phone the mobile call bar owns the bottom of the screen, so the bubble
   sits above both it and the button. It never opens itself there. */
@media (max-width: 781px) {
	.whi-chat { bottom: calc(var(--whi-mbar-h) + env(safe-area-inset-bottom) + 5.2rem); }
}
@media (prefers-reduced-motion: reduce) {
	.whi-chat { transition: none; }
}

/* The header checker takes a paste, not a word, so its form is a textarea with
   the button underneath rather than beside it. */
.whi-tool__form textarea {
	width: 100%; resize: vertical; min-height: 8rem;
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: .82rem; line-height: 1.5;
	border: 1px solid #C9D7DF; border-radius: 8px; padding: .7rem .85rem;
	background: #fff; color: var(--wp--preset--color--text);
}
.whi-tool__form textarea:focus-visible {
	outline: none; border-color: var(--wp--preset--color--petrol);
	box-shadow: 0 0 0 3px rgba(11, 82, 112, .15);
}
.whi-tool__row--wide { margin-top: .6rem; }

/* ================================================= colour pass, 10 Nov 2026
   Owner: "abhi bhi attraction ni aa raha". Measured first: after the dark hero
   the homepage ran ~8,900px of white and #F4F6F8 only, with ten bands in the
   same shape (heading, paragraph, white cards, amber button) and six services
   that all looked identical. This block does three things, none of which
   changes a word of copy:
     1. service colours - each service owns a hue (cards, icons, labels, bars);
     2. dark bands      - "### Band: dark" in the markdown, for rhythm;
     3. livelier cards  - a coloured top edge that runs out on hover, a lift. */

/* ---------- 1. Service colours ----------
   --svc is for text and marks on white (all >= 4.5:1 on #fff), --svc-soft for
   tile backgrounds, --svc-light for marks on the dark bands. Set on a band, the
   colour cascades to every card inside it; a linked card's own class wins. */
:root,
.whi-section,
.whi-card {
	--svc: var(--wp--preset--color--petrol);
	--svc-soft: var(--wp--preset--color--sky);
	--svc-light: #8FD0E8;
}
.whi-section .whi-card { --svc: inherit; --svc-soft: inherit; --svc-light: inherit; }
.whi-svc-tally,      .whi-section .whi-card.whi-svc-tally      { --svc: #B45309; --svc-soft: #FDF1E1; --svc-light: #FBBF6A; }
.whi-svc-cloud,      .whi-section .whi-card.whi-svc-cloud      { --svc: #1D5FBF; --svc-soft: #E8F0FC; --svc-light: #8DB8F5; }
.whi-svc-backup,     .whi-section .whi-card.whi-svc-backup     { --svc: #15803D; --svc-soft: #E5F5EB; --svc-light: #7DD3A0; }
.whi-svc-automation, .whi-section .whi-card.whi-svc-automation { --svc: #6D28D9; --svc-soft: #F0E9FE; --svc-light: #C4A5FA; }
.whi-svc-digital,    .whi-section .whi-card.whi-svc-digital    { --svc: #4338CA; --svc-soft: #ECEEFE; --svc-light: #A5B4FC; }
.whi-svc-hosting,    .whi-section .whi-card.whi-svc-hosting    { --svc: #0E7490; --svc-soft: #E0F3F7; --svc-light: #7DD3E5; }

/* The label over each home-page heading, with its own short bar - which
   replaces the plain amber rule the heading carried before. */
.whi-eyebrow {
	display: flex; align-items: center; gap: .6rem;
	margin: 0 0 .85rem !important;
	font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
	color: var(--svc);
}
.whi-eyebrow::before {
	content: ""; width: 1.75rem; height: 3px; border-radius: 3px; flex: none;
	background: var(--svc);
}
.whi-section .whi-wrap .whi-eyebrow + h2::before,
.whi-split__text .whi-eyebrow + h2::before { display: none; }
.whi-section .whi-wrap h2::before,
.whi-split__text h2::before { background: var(--svc); }
.whi-section:not([class*="whi-svc-"]) .whi-wrap h2::before { background: var(--wp--preset--color--accent); }

/* A band's drawing sits on its service's tint, framed, instead of the same
   pale blue panel everywhere. */
.whi-section-art .whi-art {
	background: linear-gradient(155deg, var(--svc-soft) 0%, #fff 85%);
	border: 1px solid color-mix(in srgb, var(--svc) 18%, transparent);
	border-radius: 16px;
	box-shadow: 0 22px 48px -24px color-mix(in srgb, var(--svc) 45%, transparent);
}
.whi-section .whi-step-no { background: var(--svc-soft); color: var(--svc); }
.whi-section .wp-block-list:not(.whi-chips):not(.whi-trust) li::marker { color: var(--svc); }

/* ---------- 3. Cards ---------- */
.whi-card {
	border-radius: 14px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	overflow: hidden;
}
/* A coloured edge on every card: short at rest, the full width on hover. */
.whi-card::after {
	content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
	background: var(--svc);
	transform: scaleX(.18); transform-origin: left;
	transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.whi-card--linked::before { display: none; } /* the old amber stub; the edge above replaces it */
.whi-card--linked:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--svc) 35%, var(--wp--preset--color--line));
	box-shadow: 0 2px 4px rgba(14, 27, 43, .04), 0 18px 40px -12px color-mix(in srgb, var(--svc) 35%, transparent);
}
.whi-card--linked:hover::after,
.whi-card:focus-within::after { transform: scaleX(1); }
.whi-card__more a { color: var(--svc); }

.whi-card__icon {
	width: 3.1rem; height: 3.1rem; border-radius: 12px;
	background: var(--svc-soft); color: var(--svc);
}
.whi-card__icon svg { width: 1.6rem; height: 1.6rem; }
.whi-card--linked:hover .whi-card__icon { background: var(--svc); color: #fff; }

/* ---------- 2. Dark bands ----------
   The hero's own look - ink, a faint grid, one warm glow - so the page returns
   to its opening colour twice on the way down instead of fading to grey. */
.whi-section--dark {
	color: #C9D7E1;
	background-color: var(--wp--preset--color--ink);
	background-image:
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
		radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--svc-light) 22%, transparent), transparent 55%),
		radial-gradient(ellipse at 0% 100%, rgba(240, 160, 48, .12), transparent 50%),
		linear-gradient(160deg, var(--wp--preset--color--petrol-dark) 0%, var(--wp--preset--color--ink) 70%);
	background-size: 44px 44px, 44px 44px, auto, auto, auto;
}
.whi-section--dark h2,
.whi-section--dark h3 { color: #fff; }
.whi-section--dark .whi-eyebrow { color: var(--svc-light); }
.whi-section--dark .whi-eyebrow::before { background: var(--svc-light); }
.whi-section--dark:not([class*="whi-svc-"]) .whi-eyebrow { color: var(--wp--preset--color--accent); }
.whi-section--dark:not([class*="whi-svc-"]) .whi-eyebrow::before { background: var(--wp--preset--color--accent); }
.whi-section--dark a:not(.wp-block-button__link) { color: #fff; }
.whi-section--dark .whi-card {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .12);
	box-shadow: none;
	backdrop-filter: blur(2px);
}
.whi-section--dark .whi-card::after { background: var(--svc-light); }
.whi-section--dark:not([class*="whi-svc-"]) .whi-card:not([class*="whi-svc-"])::after { background: var(--wp--preset--color--accent); }
.whi-section--dark .whi-card:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); }
.whi-section--dark .whi-card:hover::after { transform: scaleX(1); }
.whi-section--dark .whi-card p { color: #B9CAD6; }
.whi-section--dark .whi-card__icon { background: rgba(255, 255, 255, .08); color: var(--svc-light); }
.whi-section--dark .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; border-color: rgba(255, 255, 255, .55); }

/* ---------- Closing CTA: the hero's palette, not a flat petrol slab ---------- */
.whi-cta {
	position: relative; overflow: hidden;
	background-color: var(--wp--preset--color--petrol);
	background-image:
		radial-gradient(circle at 12% 20%, rgba(240, 160, 48, .28), transparent 38%),
		radial-gradient(circle at 88% 85%, rgba(141, 184, 245, .22), transparent 40%),
		linear-gradient(135deg, var(--wp--preset--color--petrol) 0%, var(--wp--preset--color--petrol-dark) 55%, var(--wp--preset--color--ink) 100%);
	padding-block: clamp(3rem, 6vw, 4.75rem);
}
.whi-cta h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }

@media (prefers-reduced-motion: reduce) {
	.whi-card, .whi-card::after { transition: none; }
	.whi-card--linked:hover { transform: none; }
}

/* ================================================= section shapes, 10 Nov 2026
   Ten bands in one shape was the other half of "no attraction". A process now
   reads as a process, and the industry list as something to look at. */

/* ---------- Timeline: a run of numbered cards (build_site.py card_grid) ----------
   Gole numbers joined by one line, left to right on a desktop and top to bottom
   on anything narrower. The line's dashes move slowly - the same "flow" the
   drawings use - and stop for reduced motion. */
.whi-steps {
	position: relative;
	display: grid; gap: 1.5rem;
	grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr));
	margin-top: 2.75rem;
}
.whi-steps--3 { --n: 3; } .whi-steps--4 { --n: 4; } .whi-steps--5 { --n: 5; }
.whi-steps--6 { --n: 6; }
.whi-steps::before {
	content: ""; position: absolute; z-index: 0;
	/* ends at the centre of the last circle: one column (less a gap share) from the right */
	top: 1.5rem; left: 1.5rem; right: calc((100% - (var(--n, 6) - 1) * 1.5rem) / var(--n, 6) - 1.5rem); height: 2px;
	background: repeating-linear-gradient(90deg, var(--svc) 0 8px, transparent 8px 16px);
	opacity: .45;
	animation: whi-steps-flow 1.6s linear infinite;
}
@keyframes whi-steps-flow { to { background-position: 16px 0; } }
.whi-steps .whi-card {
	position: relative; z-index: 1;
	background: transparent; border: 0; box-shadow: none; overflow: visible;
	padding: 4.4rem .25rem 0 0;
}
.whi-steps .whi-card::after { display: none; }
.whi-steps .whi-card h3 { font-size: 1.1rem; }
.whi-steps .whi-step-no {
	position: absolute; top: 0; left: 0; margin: 0;
	width: 3rem; height: 3rem; font-size: 1rem;
	background: var(--svc); color: #fff;
	box-shadow: 0 0 0 6px var(--wp--preset--color--surface), 0 8px 20px -6px color-mix(in srgb, var(--svc) 60%, transparent);
	transition: transform .2s ease, background-color .2s ease;
}
.whi-section:not(.whi-section--alt):not(.whi-section--dark) .whi-steps .whi-step-no {
	box-shadow: 0 0 0 6px #fff, 0 8px 20px -6px color-mix(in srgb, var(--svc) 60%, transparent);
}
.whi-steps .whi-card:hover .whi-step-no { transform: scale(1.08); background: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink); }
.whi-steps .whi-card:last-child .whi-step-no { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink); }

/* Vertical: below 1025px, and always for seven or more steps (more than six
   across a 1200px band leaves each step too narrow to read). Same rules twice
   because a media query cannot share a selector list with a class. */
.whi-steps:is(.whi-steps--7, .whi-steps--8, .whi-steps--9, .whi-steps--10) { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.whi-steps:is(.whi-steps--7, .whi-steps--8, .whi-steps--9, .whi-steps--10)::before {
	top: 1.5rem; bottom: 1.5rem; left: calc(1.5rem - 1px); right: auto; width: 2px; height: auto;
	background: repeating-linear-gradient(180deg, var(--svc) 0 8px, transparent 8px 16px);
	animation-name: whi-steps-flow-v;
}
.whi-steps:is(.whi-steps--7, .whi-steps--8, .whi-steps--9, .whi-steps--10) .whi-card { padding: .55rem 0 0 4.4rem; }
.whi-steps:is(.whi-steps--7, .whi-steps--8, .whi-steps--9, .whi-steps--10) .whi-card p { max-width: 72ch; }
@media (max-width: 1024px) {
	.whi-steps { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
	.whi-steps::before {
		top: 1.5rem; bottom: 1.5rem; left: calc(1.5rem - 1px); right: auto; width: 2px; height: auto;
		background: repeating-linear-gradient(180deg, var(--svc) 0 8px, transparent 8px 16px);
		animation-name: whi-steps-flow-v;
	}
	.whi-steps .whi-card { padding: .55rem 0 0 4.4rem; }
	.whi-steps .whi-card p { max-width: 60ch; }
}
@keyframes whi-steps-flow-v { to { background-position: 0 16px; } }

/* ---------- Industry tiles: chips that have an icon each ---------- */
.whi-chips--tiles {
	display: grid !important; gap: .85rem;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	margin-top: 2.25rem;
}
.whi-chips--tiles li {
	display: flex; flex-direction: column; align-items: center; gap: .6rem;
	padding: 1.1rem .5rem 1rem; border-radius: 14px; text-align: center;
	background: #fff; color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line);
	font-size: .9rem; font-weight: 700; line-height: 1.25;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.whi-chip__icon {
	display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
	background: var(--t-soft); color: var(--t);
	transition: background-color .2s ease, color .2s ease;
}
.whi-chip__icon svg { width: 1.55rem; height: 1.55rem; display: block; }
.whi-chips--tiles li:hover {
	transform: translateY(-3px); border-color: color-mix(in srgb, var(--t) 40%, transparent);
	box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--t) 55%, transparent);
}
.whi-chips--tiles li:hover .whi-chip__icon { background: var(--t); color: #fff; }
/* The six service hues in turn, so the row is colourful without any industry
   being tied to a service it has nothing to do with. */
.whi-chips--tiles li:nth-child(6n+1) { --t: #B45309; --t-soft: #FDF1E1; }
.whi-chips--tiles li:nth-child(6n+2) { --t: #1D5FBF; --t-soft: #E8F0FC; }
.whi-chips--tiles li:nth-child(6n+3) { --t: #15803D; --t-soft: #E5F5EB; }
.whi-chips--tiles li:nth-child(6n+4) { --t: #6D28D9; --t-soft: #F0E9FE; }
.whi-chips--tiles li:nth-child(6n+5) { --t: #4338CA; --t-soft: #ECEEFE; }
.whi-chips--tiles li:nth-child(6n+6) { --t: #0E7490; --t-soft: #E0F3F7; }
@media (max-width: 1024px) { .whi-chips--tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .whi-chips--tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; } .whi-chips--tiles li { font-size: .82rem; padding: .9rem .35rem .8rem; } }

/* ---------- Hero: two slow glows drifting behind the content ----------
   Plain radial gradients moved with transform - no blur filter, no image, no
   script - so it costs the browser almost nothing. 22s and 28s, so the two never
   fall into step and it never looks like a loop. Still for reduced motion. */
.whi-hero { position: relative; isolation: isolate; overflow: hidden; }
.whi-hero::before,
.whi-hero::after {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; border-radius: 50%;
}
.whi-hero::before {
	left: -12%; top: -30%;
	background: radial-gradient(circle, rgba(29, 95, 191, .38) 0%, transparent 65%);
	animation: whi-drift-a 22s ease-in-out infinite alternate;
}
.whi-hero::after {
	right: -10%; bottom: -35%;
	background: radial-gradient(circle, rgba(240, 160, 48, .26) 0%, transparent 65%);
	animation: whi-drift-b 28s ease-in-out infinite alternate;
}
@keyframes whi-drift-a { to { transform: translate(18vw, 22%) scale(1.15); } }
@keyframes whi-drift-b { to { transform: translate(-22vw, -18%) scale(.9); } }

/* ---------- Hero slides in their service colour ----------
   They were four white cards on the same pale blue - the most-seen pictures on
   the site and the least colourful. Now each slide's drawing sits on its
   service's tint with two coloured glows, the caption is filled with the service
   colour (white on every --svc is >= 4.5:1), and a tag names the product. The
   drawings themselves are unchanged: their grey labels still sit on a light
   ground, so nothing inside them loses contrast. */
.whi-slide { position: relative; }
.whi-slide[class*="whi-svc-"] {
	box-shadow: 0 24px 60px -10px color-mix(in srgb, var(--svc) 55%, rgba(0, 0, 0, .35));
}
.whi-slide[class*="whi-svc-"] .whi-art {
	background:
		radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--svc) 30%, transparent), transparent 42%),
		radial-gradient(circle at 8% 92%, color-mix(in srgb, var(--svc-light) 55%, transparent), transparent 48%),
		linear-gradient(160deg, var(--svc-soft) 0%, #fff 90%);
}
.whi-slide[class*="whi-svc-"] figcaption {
	border-top: 0;
	background: linear-gradient(120deg, var(--svc) 0%, color-mix(in srgb, var(--svc) 78%, #0E1B2B) 100%);
}
.whi-slide[class*="whi-svc-"] figcaption strong { color: #fff; }
.whi-slide[class*="whi-svc-"] figcaption span { color: rgba(255, 255, 255, .9); }
.whi-hero .whi-slide[class*="whi-svc-"] figcaption a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* The tag sits on the caption's link row, bottom right. It started in the
   drawing's top-left corner and covered the backup drawing's own headline -
   every drawing uses its corners, the caption's right end is always free. */
.whi-slide figcaption { position: relative; }
.whi-slide__tag {
	position: absolute; right: 1.35rem; bottom: 1.25rem;
	padding: .25rem .7rem; border-radius: 999px;
	background: rgba(255, 255, 255, .18); color: #fff;
	border: 1px solid rgba(255, 255, 255, .35);
	font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
/* A narrow slide has no room for tag and link on one row (measured overlapping
   by up to 51px at 412px), so the tag moves above the title. NOT a container
   query: container-type on the slide removed its intrinsic width and the
   centred slider collapsed to ~320px on a laptop. */
@media (max-width: 560px) {
	.whi-slide__tag { position: static; order: -1; justify-self: start; margin-bottom: .35rem; }
}
/* The active dot takes the colour of the slide it stands for. */
.whi-slider:has(.whi-svc-tally.is-active)      .whi-slider__dot[aria-current="true"] { background: #FBBF6A; }
.whi-slider:has(.whi-svc-cloud.is-active)      .whi-slider__dot[aria-current="true"] { background: #8DB8F5; }
.whi-slider:has(.whi-svc-backup.is-active)     .whi-slider__dot[aria-current="true"] { background: #7DD3A0; }
.whi-slider:has(.whi-svc-automation.is-active) .whi-slider__dot[aria-current="true"] { background: #C4A5FA; }
.whi-slider:has(.whi-svc-digital.is-active)    .whi-slider__dot[aria-current="true"] { background: #A5B4FC; }
.whi-slider:has(.whi-svc-hosting.is-active)    .whi-slider__dot[aria-current="true"] { background: #7DD3E5; }

@media (prefers-reduced-motion: reduce) {
	.whi-steps::before, .whi-hero::before, .whi-hero::after { animation: none; }
	.whi-chips--tiles li, .whi-chip__icon, .whi-steps .whi-step-no { transition: none; }
}

/* ================================================ big hero slides, 10 Nov 2026
   Owner marked the whole hero: "badi badi slides ... product bhi dikhenge hmare
   sabhi". Slide 1 is the old hero (H1, lead, buttons) plus a tile per product,
   and it is what a visitor without JavaScript sees. Slides 2-7 are one product
   each, full width, its drawing large on the right. As each product comes up,
   the hero's drifting glow turns that product's colour.

   Height budget, from the 14 Sep measurement: on a 1280x631 laptop the hero must
   stay near 590px so its buttons are on the first screen. Re-measure if any of
   this changes (the check is in the hero block above). */

@property --whi-glow { syntax: "<color>"; inherits: true; initial-value: rgba(29, 95, 191, .38); }
.whi-hero--slides { --whi-glow: rgba(29, 95, 191, .38); transition: --whi-glow 1s ease; }
.whi-hero--slides::before { background: radial-gradient(circle, var(--whi-glow) 0%, transparent 65%); }
.whi-hero--slides:has(.whi-svc-tally.is-active)      { --whi-glow: rgba(251, 191, 106, .42); }
.whi-hero--slides:has(.whi-svc-cloud.is-active)      { --whi-glow: rgba(141, 184, 245, .45); }
.whi-hero--slides:has(.whi-svc-backup.is-active)     { --whi-glow: rgba(125, 211, 160, .40); }
.whi-hero--slides:has(.whi-svc-automation.is-active) { --whi-glow: rgba(196, 165, 250, .42); }
.whi-hero--slides:has(.whi-svc-digital.is-active)    { --whi-glow: rgba(244, 154, 193, .40); }
.whi-hero--slides:has(.whi-svc-hosting.is-active)    { --whi-glow: rgba(125, 211, 229, .40); }
/* The glow sits behind the drawing, on the right, not top-left. */
.whi-hero--slides::before { left: auto; right: -6%; top: -25%; }

.whi-hero--slides .whi-trust { margin-top: 1.5rem; }

.whi-bigslide {
	display: grid; align-items: center;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	column-gap: clamp(2rem, 5vw, 4.5rem);
	background: none; border-radius: 0; box-shadow: none; overflow: visible;
	transform: translateX(28px);
}
.whi-bigslide.is-active,
.whi-slider:not(.is-ready) .whi-bigslide:first-child { transform: none; }
.whi-bigslide__text > :first-child { margin-top: 0; }
/* These buttons are raw HTML inside the slider block, so WordPress never adds
   its is-layout-flex class to them - the flex and the gap have to be ours. */
.whi-bigslide__text .wp-block-buttons { margin-top: 0; display: flex; flex-wrap: wrap; gap: .75rem; }

.whi-bigslide__tag {
	display: inline-flex; align-items: center; gap: .5rem;
	margin-bottom: 1rem; padding: .35rem .85rem; border-radius: 999px;
	background: color-mix(in srgb, var(--svc-light) 18%, transparent);
	border: 1px solid color-mix(in srgb, var(--svc-light) 45%, transparent);
	color: var(--svc-light);
	font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.whi-bigslide__tag::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--svc-light); }
.whi-bigslide__title {
	color: #fff; font-weight: 800; line-height: 1.12; letter-spacing: -.01em;
	font-size: clamp(2rem, 3.6vw, 3.1rem); max-width: 19ch; margin: 0 0 1rem;
}
.whi-hero .whi-bigslide__body { max-width: 44ch; margin-bottom: 1.75rem; }

/* The product's drawing, large, on its own tint with a glow in its colour. */
.whi-bigslide__media { justify-self: end; width: 100%; max-width: 34rem; }
.whi-bigslide__media .whi-art {
	aspect-ratio: 4 / 3; border-radius: 22px;
	background:
		radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--svc) 28%, transparent), transparent 42%),
		radial-gradient(circle at 8% 92%, color-mix(in srgb, var(--svc-light) 50%, transparent), transparent 48%),
		linear-gradient(160deg, var(--svc-soft) 0%, #fff 90%);
	box-shadow: 0 0 0 6px rgba(255, 255, 255, .06), 0 30px 70px -18px color-mix(in srgb, var(--svc-light) 60%, rgba(0, 0, 0, .5));
}
.whi-bigslide .whi-flow { animation-play-state: paused; }
.whi-bigslide.is-active .whi-flow { animation-play-state: running; }

/* Slide 1's right side: every product as a tile, each in its colour. */
.whi-prodtiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.whi-hero a.whi-prodtile {
	display: flex; align-items: center; gap: .85rem;
	padding: .9rem 1rem; border-radius: 14px; text-decoration: none;
	background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13);
	color: #fff; font-weight: 700; font-size: .98rem; line-height: 1.25;
	transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.whi-prodtile .whi-card__icon {
	margin: 0; flex: none; width: 2.75rem; height: 2.75rem;
	background: color-mix(in srgb, var(--svc-light) 18%, transparent); color: var(--svc-light);
}
.whi-hero a.whi-prodtile:hover {
	transform: translateY(-3px);
	background: color-mix(in srgb, var(--svc-light) 14%, transparent);
	border-color: color-mix(in srgb, var(--svc-light) 55%, transparent);
}
.whi-hero a.whi-prodtile:hover .whi-card__icon { background: var(--svc-light); color: var(--wp--preset--color--ink); }

/* Navigation under the slides, lined up with the text column. */
.whi-bigslider .whi-slider__nav { justify-content: flex-start; margin-top: 1.75rem; }

/* Short laptop screens: the same trims the old hero had. */
@media (min-width: 961px) and (max-height: 820px) {
	.whi-bigslide__media { max-width: 29rem; }
	.whi-bigslide__title { font-size: clamp(1.9rem, 3vw, 2.6rem); }
	.whi-hero .whi-bigslide__body { margin-bottom: 1.35rem; }
	.whi-hero--slides .whi-trust { margin-top: 1rem; padding-top: 1rem; }
	.whi-bigslider .whi-slider__nav { margin-top: 1rem; }
	.whi-prodtiles { gap: .6rem; }
	.whi-hero a.whi-prodtile { padding: .7rem .9rem; }
}
@media (max-width: 960px) {
	.whi-bigslide { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; align-items: start; }
	.whi-bigslide__media { justify-self: start; max-width: 30rem; }
	.whi-bigslider .whi-slider__nav { justify-content: center; }
}
@media (max-width: 480px) {
	.whi-prodtiles { gap: .5rem; }
	.whi-hero a.whi-prodtile { flex-direction: column; align-items: flex-start; gap: .5rem; padding: .75rem; font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
	.whi-hero--slides { transition: none; }
	.whi-bigslide { transform: none; }
}

/* The small slider's coloured card shadow (.whi-slide[class*="whi-svc-"]) must
   not reach the big slides - it drew a faint box round the whole slide.
   (10 Nov 2026: the owner tried a light "option A" look and went back to this
   dark one; that block is saved in the session scratchpad as style-optionA.css.) */
.whi-slide.whi-bigslide { box-shadow: none; border-radius: 0; }

/* ---------------------------------------------- multi-field tools, 10 Nov 2026
   GST calculator, UPI QR, email signature: a small grid of labelled fields
   (WHI_TOOLS 'fields' in functions.php), then the result. */
.whi-tool__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
@media (max-width: 640px) { .whi-tool__grid { grid-template-columns: minmax(0, 1fr); } }
.whi-tool__field label { margin-bottom: .35rem; }
.whi-tool__field input,
.whi-tool__field select {
	box-sizing: border-box; min-width: 0;
	width: 100%; border: 1px solid #C9D7DF; border-radius: 8px; padding: .7rem .85rem; font-size: 1rem;
	background: #fff; color: var(--wp--preset--color--text); font-family: inherit;
}
.whi-tool__field input:focus,
.whi-tool__field select:focus { border-color: var(--wp--preset--color--petrol); box-shadow: 0 0 0 3px rgba(11, 82, 112, .15); outline: none; }
.whi-tool__grid + .whi-tool__row--wide { margin-top: 1rem; }

/* GST result */
.whi-tool__sum { max-width: 30rem; margin-bottom: .5rem; }
.whi-tool__sum td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.whi-tool__sum tr.is-total th,
.whi-tool__sum tr.is-total td { font-weight: 800; font-size: 1.1rem; color: var(--wp--preset--color--ink); border-bottom: 0; border-top: 2px solid var(--wp--preset--color--ink); }

/* UPI QR card */
.whi-qr { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-end; margin-bottom: .5rem; }
.whi-qr__img { width: min(18rem, 100%); height: auto; border: 1px solid var(--wp--preset--color--line); border-radius: 12px; box-shadow: var(--whi-shadow); }
.whi-qr__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: .75rem 0; }
.whi-qr__actions a.whi-btn { display: inline-block; text-decoration: none; }
.whi-tool .whi-btn--ghost { background: #fff; border: 2px solid var(--wp--preset--color--ink); padding: calc(.8rem - 2px) calc(1.6rem - 2px); }
.whi-tool .whi-btn--ghost:hover { background: var(--wp--preset--color--surface); }
.whi-tool__card li { word-break: break-word; }

/* Signature preview: shown on white, as it will look in a mail */
.whi-sig { background: #fff; border: 1px dashed #C9D7DF; border-radius: 10px; padding: 1.1rem 1.25rem; overflow-x: auto; }
/* The DNS cards list raw records in monospace; these new cards list sentences. */
.whi-tool__card--prose li { font-family: inherit; font-size: .92rem; }

/* Click-to-load map (contact page; build_site.py "### Map", assets/map.js) */
.whi-map { margin-top: 1.5rem; border-radius: var(--whi-radius); overflow: hidden; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--sky); }
.whi-map__face {
	min-height: 260px; display: grid; place-content: center; justify-items: center; gap: .6rem; padding: 2rem 1rem; text-align: center;
	background-image: linear-gradient(rgba(11, 82, 112, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 82, 112, .06) 1px, transparent 1px);
	background-size: 28px 28px;
}
.whi-map__face svg { width: 2.6rem; height: 2.6rem; color: var(--wp--preset--color--petrol); }
.whi-map__note { margin: 0; font-size: .9rem; color: var(--wp--preset--color--muted); }
.whi-map__actions { margin: .25rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: center; }
.whi-map__show { border: 0; border-radius: 8px; cursor: pointer; font: inherit; font-weight: 700; padding: .7rem 1.4rem; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink); }
.whi-map__show:hover { background: var(--wp--preset--color--accent-dark); }
.whi-map__actions a { font-weight: 700; }
.whi-map__frame { display: block; width: 100%; height: 360px; border: 0; }

/* Header lockup, 10 Nov 2026: the logo's mark + the name as live text. The
   supplied logo file spells it WEBHINDIA; the owner settled the name as
   WEB H INDIA, so the header no longer shows the logo's own wordmark. Navy is
   the logo's own #203070. Re-measure the hamburger breakpoint if this changes. */
.whi-logo a { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; line-height: 1; }
.whi-logo img { height: 40px; width: auto; }
.whi-logo__name { color: #203070; font-weight: 800; font-size: 1.3rem; letter-spacing: .02em; white-space: nowrap; }
@media (max-width: 700px) { .whi-logo__name { font-size: 1.12rem; } .whi-logo img { height: 34px; } }

/* Tally partner badge ([whi_partner_badge]): Tally's own artwork, unmodified,
   on a white tile so it reads on the dark footer as well as on a page. Empty
   until assets/partner/tally-partner.* exists. */
.whi-partner { display: inline-block; background: #fff; border-radius: 10px; padding: .5rem .75rem; line-height: 0; margin: .5rem 0 1rem; box-shadow: 0 1px 3px rgba(14, 27, 43, .12); }
.whi-partner img { height: 56px; width: auto; display: block; }
.whi-footer .whi-partner { margin: .25rem 0 0; }