/* =============================================================================
   TEN DIGITALS - COMPONENT LIBRARY
   Every surface reads the --td-card-* contract from tokens.css, so a component
   written once renders as soft relief in light and frosted glass in dark.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   SURFACES
   -------------------------------------------------------------------------- */

.td-surface {
	background: var(--td-card-bg);
	-webkit-backdrop-filter: var(--td-card-backdrop);
	backdrop-filter: var(--td-card-backdrop);
	border: var(--td-card-border);
	border-radius: var(--td-r-card);
	box-shadow: var(--td-card-shadow);
	position: relative;
}

.td-surface--flat    { box-shadow: var(--td-card-shadow-flat); }
.td-surface--inset   { background: var(--td-well-bg); box-shadow: var(--td-card-shadow-inset); border-color: transparent; }
.td-surface--raised  { background: var(--td-card-bg-2); }
.td-surface--lg      { border-radius: var(--td-r-lg); }
.td-surface--xl      { border-radius: var(--td-r-xl); }
.td-surface--pad     { padding: clamp(24px, 2.6vw, 40px); }
.td-surface--pad-lg  { padding: clamp(28px, 3.4vw, 56px); }

/* A hairline of brand colour along the top edge - used on featured surfaces. */
.td-surface--accent-top::before {
	background: var(--td-grad-brand);
	border-radius: var(--td-r-card) var(--td-r-card) 0 0;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

/* -----------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */

.td-btn {
	--td-btn-py: 15px;
	--td-btn-px: 28px;
	align-items: center;
	border: 1px solid transparent;
	border-radius: var(--td-r-btn);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--td-font-body);
	font-size: var(--td-fs-xs);
	font-weight: 600;
	gap: 10px;
	isolation: isolate;
	justify-content: center;
	letter-spacing: var(--td-tracking-button);
	line-height: 1;
	overflow: hidden;
	padding: var(--td-btn-py) var(--td-btn-px);
	position: relative;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		transform var(--td-t-micro) var(--td-ease-spring),
		box-shadow var(--td-t-micro) var(--td-ease),
		background-color var(--td-t-micro) var(--td-ease),
		border-color var(--td-t-micro) var(--td-ease),
		color var(--td-t-micro) var(--td-ease);
	white-space: nowrap;
}

.td-btn:hover { transform: translateY(-2px); }
.td-btn:active { transform: translateY(0); transition-duration: 80ms; }

/* Primary - the brand gradient. Reserved for Book a Discovery Call. */
.td-btn--primary {
	background: var(--td-grad-brand);
	box-shadow: 0 10px 26px -12px rgba(248, 104, 0, 0.75);
	color: #fff;
}

.td-btn--primary::before {
	background: linear-gradient(118deg, #FF9A34 0%, #FF7714 58%, #F86800 100%);
	border-radius: inherit;
	content: "";
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity var(--td-t-micro) var(--td-ease);
	z-index: -1;
}

.td-btn--primary:hover {
	box-shadow: 0 16px 34px -12px rgba(248, 104, 0, 0.85);
	color: #fff;
}

.td-btn--primary:hover::before { opacity: 1; }

/* Secondary - surface-matched, so it inherits relief or glass. */
.td-btn--secondary {
	background: var(--td-card-bg);
	-webkit-backdrop-filter: var(--td-card-backdrop);
	backdrop-filter: var(--td-card-backdrop);
	border: var(--td-card-border);
	box-shadow: var(--td-card-shadow-flat);
	color: var(--td-ink);
}

.td-btn--secondary:hover {
	border-color: var(--td-hairline-accent);
	box-shadow: var(--td-card-shadow);
	color: var(--td-ink);
}

/* Ghost - outline only. */
.td-btn--ghost {
	background: transparent;
	border-color: var(--td-line-2);
	color: var(--td-ink);
}

.td-btn--ghost:hover {
	border-color: var(--td-accent);
	color: var(--td-accent);
}

/* Quiet - text with a leading rule. */
.td-btn--quiet {
	background: none;
	color: var(--td-ink);
	overflow: visible;
	padding-inline: 0;
}

.td-btn--quiet::after {
	background: var(--td-accent);
	bottom: 8px;
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	transform: scaleX(0.18);
	transform-origin: left center;
	transition: transform var(--td-t-standard) var(--td-ease-out);
	width: 100%;
}

.td-btn--quiet:hover { color: var(--td-accent); transform: none; }
.td-btn--quiet:hover::after { transform: scaleX(1); }

.td-btn--sm { --td-btn-py: 11px; --td-btn-px: 20px; font-size: 0.75rem; }
.td-btn--lg { --td-btn-py: 19px; --td-btn-px: 36px; font-size: var(--td-fs-sm); }
.td-btn--block { display: flex; width: 100%; }

.td-btn[aria-disabled="true"],
.td-btn:disabled { cursor: not-allowed; opacity: 0.45; transform: none; }

.td-btn-group {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--td-s-3);
}

@media (max-width: 479.98px) {
	.td-btn-group--stack { flex-direction: column; align-items: stretch; }
	.td-btn-group--stack .td-btn { width: 100%; }
}

/* -----------------------------------------------------------------------------
   BADGES, TAGS, PILLS
   -------------------------------------------------------------------------- */

.td-tag {
	align-items: center;
	background: var(--td-well-bg);
	border: 1px solid var(--td-line);
	border-radius: var(--td-r-pill);
	color: var(--td-ink-2);
	display: inline-flex;
	font-size: var(--td-fs-xs);
	font-weight: 500;
	gap: 6px;
	line-height: 1;
	padding: 7px 13px;
	transition: border-color var(--td-t-micro) var(--td-ease),
	            color var(--td-t-micro) var(--td-ease);
	white-space: nowrap;
}

a.td-tag:hover { border-color: var(--td-hairline-accent); color: var(--td-accent); }

.td-tag--accent {
	background: var(--td-grad-brand-soft);
	border-color: var(--td-hairline-accent);
	color: var(--td-accent);
}

.td-index {
	color: var(--td-ink-4);
	font-family: var(--td-font-mono);
	font-size: var(--td-fs-xs);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
}

/* Placeholder marker - the Production Bible forbids publishing unverified
   proof, so every stand-in is visibly flagged in the front end until the
   content team replaces it. */
.td-placeholder {
	align-items: center;
	background: repeating-linear-gradient(
		135deg,
		var(--td-well-bg),
		var(--td-well-bg) 9px,
		transparent 9px,
		transparent 18px
	);
	border: 1px dashed var(--td-line-2);
	border-radius: var(--td-r-xs);
	color: var(--td-ink-4);
	display: inline-flex;
	font-family: var(--td-font-mono);
	font-size: 0.6875rem;
	gap: 6px;
	letter-spacing: 0.06em;
	padding: 5px 10px;
	text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   CARDS
   -------------------------------------------------------------------------- */

.td-card {
	background: var(--td-card-bg);
	-webkit-backdrop-filter: var(--td-card-backdrop);
	backdrop-filter: var(--td-card-backdrop);
	border: var(--td-card-border);
	border-radius: var(--td-r-card);
	box-shadow: var(--td-card-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: clamp(24px, 2.4vw, 36px);
	position: relative;
}

.td-card__head {
	align-items: flex-start;
	display: flex;
	gap: var(--td-s-4);
	justify-content: space-between;
	margin-bottom: var(--td-s-4);
}

.td-card__title {
	font-size: var(--td-fs-h4);
	letter-spacing: var(--td-tracking-head);
}

.td-card__copy {
	color: var(--td-ink-2);
	font-size: var(--td-fs-sm);
	line-height: var(--td-lh-body);
}

.td-card__foot {
	align-items: center;
	display: flex;
	gap: var(--td-s-3);
	justify-content: space-between;
	margin-top: auto;
	padding-top: var(--td-s-5);
}

/* Whole-card link: an anchor stretched over the card so the entire surface is
   clickable while only the real link text is announced. */
.td-stretch-link::after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 4;
}

/* -----------------------------------------------------------------------------
   ICON TILE - carries the Ten diamond motif at component scale
   -------------------------------------------------------------------------- */

.td-tile {
	align-items: center;
	background: var(--td-well-bg);
	border: 1px solid var(--td-line);
	border-radius: var(--td-r-btn);
	box-shadow: var(--td-card-shadow-flat);
	color: var(--td-accent);
	display: inline-flex;
	flex: none;
	height: 52px;
	justify-content: center;
	transition:
		background-color var(--td-t-standard) var(--td-ease),
		border-color var(--td-t-standard) var(--td-ease),
		transform var(--td-t-standard) var(--td-ease-spring);
	width: 52px;
}

.td-tile svg { height: 24px; width: 24px; }

.td-hover-card:hover .td-tile,
.td-hover-card:focus-within .td-tile {
	border-color: var(--td-hairline-accent);
	transform: rotate(45deg) scale(0.92);
}

.td-hover-card:hover .td-tile svg,
.td-hover-card:focus-within .td-tile svg {
	transform: rotate(-45deg);
	transition: transform var(--td-t-standard) var(--td-ease-spring);
}

.td-icon { flex: none; }

/* -----------------------------------------------------------------------------
   TEN FORM
   The SVG carries a viewBox but no intrinsic width, so it must be sized by
   its container in every context it appears.
   -------------------------------------------------------------------------- */

.td-ten-form {
	display: block;
	height: auto;
	width: 100%;
}

.td-media__geometry {
	max-width: 128px;
	opacity: 0.5;
	width: 40%;
}

/* -----------------------------------------------------------------------------
   DECORATIVE GEOMETRY
   Derived from the logo: a rotated square, never a random blob.
   Always aria-hidden and pointer-events: none.
   -------------------------------------------------------------------------- */

.td-decor {
	pointer-events: none;
	position: absolute;
	user-select: none;
	z-index: 0;
}

.td-decor__diamond {
	border: 1px solid var(--td-hairline-accent);
	border-radius: var(--td-r-lg);
	inset: 0;
	position: absolute;
	transform: rotate(45deg);
}

.td-glow {
	background: var(--td-glow);
	inset-inline: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	height: 60vh;
	z-index: 0;
}

/* Fine grid wash, echoing the geometric DNA without adding weight. */
.td-mesh {
	background-image:
		linear-gradient(to right, var(--td-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--td-line) 1px, transparent 1px);
	background-size: 88px 88px;
	inset: 0;
	-webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
	mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
	opacity: 0.6;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

/* -----------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */

.td-field { display: grid; gap: 8px; }

.td-label {
	color: var(--td-ink-2);
	font-size: var(--td-fs-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.td-input,
.td-textarea,
.td-select {
	background: var(--td-field-bg);
	border: 1px solid var(--td-line);
	border-radius: var(--td-r-btn);
	box-shadow: var(--td-card-shadow-inset);
	color: var(--td-ink);
	font-size: var(--td-fs-body);
	padding: 14px 16px;
	transition: border-color var(--td-t-micro) var(--td-ease),
	            box-shadow var(--td-t-micro) var(--td-ease);
	width: 100%;
}

.td-input::placeholder,
.td-textarea::placeholder { color: var(--td-ink-4); }

.td-input:focus,
.td-textarea:focus,
.td-select:focus {
	border-color: var(--td-accent);
	outline: none;
	box-shadow: var(--td-card-shadow-inset), 0 0 0 3px color-mix(in srgb, var(--td-accent) 22%, transparent);
}

.td-textarea { min-height: 140px; resize: vertical; }

.td-help { color: var(--td-ink-3); font-size: var(--td-fs-xs); }

/* -----------------------------------------------------------------------------
   MEDIA
   -------------------------------------------------------------------------- */

.td-media {
	background: var(--td-well-bg);
	border-radius: var(--td-r-card);
	overflow: hidden;
	position: relative;
}

.td-media::before {
	content: "";
	display: block;
	padding-top: var(--td-ratio, 62.5%);
}

.td-media > img,
.td-media > video,
.td-media > .td-media__fill {
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.td-media--square { --td-ratio: 100%; }
.td-media--4x3    { --td-ratio: 75%; }
.td-media--3x2    { --td-ratio: 66.667%; }
.td-media--16x9   { --td-ratio: 56.25%; }
.td-media--4x5    { --td-ratio: 125%; }

/* Empty-state fill for imagery awaiting approved client assets. */
.td-media__fill {
	align-items: center;
	background:
		radial-gradient(90% 120% at 20% 0%, rgba(248, 104, 0, 0.14), transparent 62%),
		var(--td-well-bg);
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
	text-align: center;
}

/* -----------------------------------------------------------------------------
   MARQUEE - trust strip
   -------------------------------------------------------------------------- */

.td-marquee {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	overflow: hidden;
}

.td-marquee__track {
	animation: td-marquee var(--td-marquee-duration, 46s) linear infinite;
	display: flex;
	gap: clamp(40px, 5vw, 88px);
	width: max-content;
}

.td-marquee:hover .td-marquee__track { animation-play-state: paused; }

/* -----------------------------------------------------------------------------
   ACCESSIBLE ACCORDION (mobile fallback for hover-driven systems)
   -------------------------------------------------------------------------- */

.td-accordion__trigger {
	align-items: center;
	display: flex;
	gap: var(--td-s-4);
	justify-content: space-between;
	padding: var(--td-s-5) 0;
	text-align: left;
	width: 100%;
}

.td-accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	/* The panel does the clipping. Without it a closed panel still stands at the
	   height of its inner padding, leaving a gap under every collapsed row. */
	overflow: hidden;
	transition: grid-template-rows var(--td-t-standard) var(--td-ease-out);
}

/* min-height:0 is what actually lets a 0fr track collapse: without it the
   panel's own padding sets a min-content floor and the row never closes. */
.td-accordion__panel > * { min-height: 0; overflow: hidden; }

/* Any control immediately preceding a panel drives it, whatever its own class,
   so the drawer, the dimensions accordion and FAQs all share one behaviour. */
[aria-expanded="true"] + .td-accordion__panel { grid-template-rows: 1fr; }

/* A trigger wrapped in a heading - which is what an accessible FAQ needs - is
   not the panel's adjacent sibling, so the sibling selector above cannot reach
   it. accordion.js marks the panel itself, and that works at any nesting. */
.td-accordion__panel.is-open { grid-template-rows: 1fr; }

.td-accordion__icon {
	flex: none;
	transition: transform var(--td-t-standard) var(--td-ease-spring);
}

[aria-expanded="true"] .td-accordion__icon { transform: rotate(45deg); }

/* -----------------------------------------------------------------------------
   THEME TOGGLE
   -------------------------------------------------------------------------- */

.td-theme-toggle {
	align-items: center;
	background: var(--td-well-bg);
	border: 1px solid var(--td-line);
	border-radius: var(--td-r-pill);
	box-shadow: var(--td-card-shadow-inset);
	display: inline-flex;
	flex: none;
	gap: 2px;
	padding: 3px;
	position: relative;
}

.td-theme-toggle__btn {
	align-items: center;
	border-radius: var(--td-r-pill);
	color: var(--td-ink-3);
	display: inline-flex;
	height: 32px;
	justify-content: center;
	position: relative;
	transition: color var(--td-t-micro) var(--td-ease);
	width: 34px;
	z-index: 2;
}

.td-theme-toggle__btn svg { height: 16px; width: 16px; }
.td-theme-toggle__btn:hover { color: var(--td-ink); }
.td-theme-toggle__btn[aria-pressed="true"] { color: var(--td-on-accent); }

.td-theme-toggle__thumb {
	background: var(--td-grad-brand);
	border-radius: var(--td-r-pill);
	box-shadow: 0 4px 12px -4px rgba(248, 104, 0, 0.7);
	height: 32px;
	left: 3px;
	position: absolute;
	top: 3px;
	transition: transform var(--td-t-standard) var(--td-ease-spring);
	width: 34px;
	z-index: 1;
}

/* theme.js stamps data-active once it has resolved the theme. Until then the
   thumb is not painted at all, so it never slides into position on load. */
.td-theme-toggle:not([data-active]) .td-theme-toggle__thumb { opacity: 0; transition: none; }
.td-theme-toggle[data-active="dark"] .td-theme-toggle__thumb { transform: translateX(36px); }


/* -----------------------------------------------------------------------------
   CASE CARD
   Moved out of home.css when capability, solution and hub pages started showing
   proof too - the card is a shared component, so it cannot live in a page bundle.
   -------------------------------------------------------------------------- */

.td-case { display: flex; flex-direction: column; overflow: hidden; padding: 0; text-decoration: none; }

.td-case__media { border-radius: 0; }

/* The body is its own height, never stretched. A card in a grid is routinely
   taller than its content, and a body that grows puts that slack inside the
   text - which is where the hole in the featured card came from. */
.td-case__body {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: var(--td-s-3);
	padding: clamp(22px, 2.2vw, 34px);
}

/* The image takes the slack instead. It is the one element that can absorb
   height without looking broken, because it crops. */
.td-case .td-media { flex: 1 1 auto; }

.td-case__client {
	color: var(--td-ink-3);
	font-size: var(--td-fs-xs);
	font-weight: 600;
	letter-spacing: var(--td-tracking-eyebrow);
	text-transform: uppercase;
}

.td-case__title {
	font-size: var(--td-fs-h4);
	letter-spacing: var(--td-tracking-head);
}

.td-case--feature .td-case__title { font-size: var(--td-fs-h3); }

.td-case__copy { color: var(--td-ink-2); font-size: var(--td-fs-sm); }

.td-case__metrics {
	border-top: 1px solid var(--td-line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--td-s-5);
	margin-top: var(--td-s-2);
	padding-top: var(--td-s-4);
}

.td-metric { display: flex; flex-direction: column; gap: 4px; }

.td-metric__value {
	color: var(--td-accent);
	font-family: var(--td-font-display);
	font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
}

.td-metric__label { color: var(--td-ink-3); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; }

.td-case__tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* =============================================================================
   The floating WhatsApp button
   ========================================================================== */

/* Fixed to the corner the Customizer chose, above the page and below the
   header's own layers, so it never covers navigation. A modal dialog renders in
   the browser's top layer and therefore covers this without either having to
   know about the other. */

.td-whatsapp {
	align-items: center;
	backdrop-filter: var(--td-card-backdrop);
	-webkit-backdrop-filter: var(--td-card-backdrop);
	background: var(--td-card-bg);
	border: var(--td-card-border);
	border-radius: var(--td-r-pill);
	bottom: clamp(16px, 3vw, 28px);
	box-shadow: var(--td-card-shadow);
	color: var(--td-ink);
	display: inline-flex;
	gap: 10px;
	padding: 7px;
	position: fixed;
	text-decoration: none;
	transition:
		box-shadow var(--td-t-standard) var(--td-ease),
		transform var(--td-t-standard) var(--td-ease-spring);
	z-index: var(--td-z-sticky);
}

.td-whatsapp--right { right: clamp(16px, 3vw, 28px); }
.td-whatsapp--left  { left: clamp(16px, 3vw, 28px); }

.td-whatsapp:hover { transform: translateY(-2px); }

.td-whatsapp:focus-visible {
	outline: 2px solid var(--td-accent);
	outline-offset: 3px;
}

/* The one piece of colour the theme does not own. WhatsApp green is how this
   button is recognised without being read, and a button nobody recognises is
   just a circle in the corner. */
.td-whatsapp__icon {
	align-items: center;
	background: #25d366;
	border-radius: var(--td-r-pill);
	color: #fff;
	display: inline-flex;
	flex: none;
	height: 46px;
	justify-content: center;
	width: 46px;
}

/* Out of the way until it is wanted. max-width rather than display, so it can
   be animated; the text stays in the accessibility tree throughout. */
.td-whatsapp__label {
	font-size: var(--td-fs-sm);
	font-weight: 600;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	transition:
		max-width var(--td-t-standard) var(--td-ease-out),
		opacity var(--td-t-micro) var(--td-ease),
		padding-right var(--td-t-standard) var(--td-ease-out);
	white-space: nowrap;
}

.td-whatsapp:hover .td-whatsapp__label,
.td-whatsapp:focus-visible .td-whatsapp__label {
	max-width: 16rem;
	opacity: 1;
	padding-right: 10px;
}

/* A pointer is what opens the label, and a touch screen has none: on a phone it
   would only ever appear for the instant between the tap and the app opening. */
@media (hover: none) {
	.td-whatsapp:hover .td-whatsapp__label { max-width: 0; opacity: 0; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.td-whatsapp,
	.td-whatsapp__label { transition: none; }

	.td-whatsapp:hover { transform: none; }
}

/* Printing a fixed button puts it in the middle of whatever paragraph it lands
   on, and it is not a link anybody can follow on paper. */
@media print {
	.td-whatsapp { display: none; }
}