/* ==========================================================================
   Triple Boost - finishing layer
   Loads after main, home and icons. Refines, never redesigns: seams between
   rooms, focus and hover states, form states, selection, scrollbar, image
   edges, the footer, and small optical fixes. One vocabulary throughout:
   1px hairlines, square corners, cyan on the night, white on the blue.
   ========================================================================== */

/* 1. Room seams ---------------------------------------------------------------
   One rule everywhere: a blue room carries a lit top lip and a shadowed floor
   line; the dark room that follows it catches a soft spill of that blue. */
:is(.tb-section, .tb-proof, .tb-group).tb-room--blue,
.tb-section.tb-field--blue {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 10, 50, .45);
}
.tb-hero--inner, .tb-page-hero, .tb-audit { box-shadow: inset 0 -1px 0 rgba(0, 10, 50, .45); }

:is(.tb-room--blue, .tb-field--blue, .tb-hero--inner, .tb-page-hero, .tb-audit) + section:not(.tb-room--blue):not(.tb-field--blue):not(.tb-press):not(.tb-newsprint),
main:has(> :last-child:is(.tb-room--blue, .tb-field--blue, .tb-hero--inner)) + .tb-footer {
	background-image: linear-gradient(180deg, rgba(2, 83, 252, .10) 0, rgba(2, 83, 252, .035) 64px, rgba(2, 83, 252, 0) 180px);
	border-top-color: rgba(120, 160, 255, .12);
}

/* 2. Selection ------------------------------------------------------------------ */
:is(.tb-room--blue, .tb-field--blue, .tb-hero--inner, .tb-page-hero, .tb-404, .tb-audit) ::selection { background: #fff; color: var(--tb-blue); }
:is(.tb-room--blue, .tb-field--blue, .tb-hero--inner, .tb-audit) :is(.tb-contact__form, .tb-lit, .tb-plate, .tb-paper) ::selection { background: var(--tb-blue); color: #fff; }

/* 3. Scrollbar (desktop pointers only): a dark rail, a smoked thumb ------------- */
@media (hover: hover) and (pointer: fine) {
	html::-webkit-scrollbar { width: 12px; }
	html::-webkit-scrollbar-track { background: var(--n0); border-inline-start: 1px solid rgba(255, 255, 255, .05); }
	html::-webkit-scrollbar-thumb { background: #2A303B; border: 3px solid var(--n0); border-radius: 0; }
	html::-webkit-scrollbar-thumb:hover { background: #3C4452; }
	html::-webkit-scrollbar-thumb:active { background: var(--tb-blue); }
	@supports not selector(::-webkit-scrollbar) { html { scrollbar-color: #2A303B var(--n0); scrollbar-width: thin; } }
}

/* 4. Focus: 2px, set off the edge, in the room's ink ----------------------------- */
:focus-visible { outline: 2px solid var(--tb-cyan); outline-offset: 4px; }
:is(.tb-room--blue, .tb-field--blue, .tb-hero--inner, .tb-page-hero, .tb-404, .tb-audit) :focus-visible { outline-color: #fff; }
:is(.tb-paper, .tb-contact--page .tb-contact__form, .tb-audit__form) :focus-visible { outline-color: var(--tb-blue); }
.tb-contact.tb-field--blue .tb-contact__form :focus-visible { outline-color: var(--tb-cyan); }
.tb-btn:focus-visible, .tb-icon-btn:focus-visible { outline-offset: 3px; }
.tb-nav__list > li > a:focus-visible { outline-offset: 0; }
.tb-nav__list > li > a:focus-visible::after { transform: scaleX(1); }
.tb-mega__link:focus-visible { outline-offset: -2px; background: var(--tb-blue); color: #fff; }
.tb-mega__link:focus-visible .tb-icon { color: #fff; }
.tb-accordion__item summary:focus-visible { outline-offset: 2px; }
/* Keyboard users get the same row states as the mouse. */
.tb-index__row:focus-visible { outline-offset: 0; }
.tb-index__row:focus-visible .tb-index__title { font-weight: var(--fw-black); }
.tb-index__row:focus-visible .tb-index__num { color: var(--tb-accent); }
.tb-index__row:focus-visible .tb-index__go { background: #fff; border-color: #fff; color: var(--tb-black); }
.tb-svc__row:focus-visible { outline-offset: 0; }
.tb-svc__row:focus-visible .tb-svc__title { color: #fff; }
/* Inputs show focus through their own border, never a second ring. */
.tb-field :is(input, select, textarea):focus-visible { outline: none; }

/* 5. Hover and press ------------------------------------------------------------ */
.tb-btn:active, .tb-icon-btn:active, .tb-social a:active, .tb-index__go:active, .tb-share :is(a, button):active { transform: translateY(1px); transition-duration: .08s; }
.tb-link { transition: gap .35s var(--tb-ease), border-color .3s; }
.tb-link:hover { border-bottom-color: var(--tb-heading); }
.tb-press .tb-link:hover, .tb-newsprint .tb-link:hover { border-bottom-color: var(--tb-black); }
.tb-accordion__item summary:hover .tb-icon { border-color: currentColor; }
.tb-accordion__item[open] summary:hover .tb-icon { border-color: var(--tb-blue); }
.tb-contact__channels a { transition: border-color .3s; }
.tb-contact__channels a:hover { border-bottom-color: rgba(255, 255, 255, .6); }
.tb-contact__item { transition: border-color .3s; }
a.tb-contact__item:hover { border-bottom-color: var(--tb-line-strong); }
.tb-crumbs a { transition: color .2s; }
.tb-faq-page__nav a { transition: color .2s, padding .35s var(--tb-ease); }
@media (min-width: 961px) { .tb-faq-page__nav a:hover { padding-inline-start: 8px; } }

/* 6. Forms --------------------------------------------------------------------- */
.tb-field textarea { resize: vertical; }
.tb-field :is(input, select, textarea) { caret-color: var(--tb-blue); }
.tb-contact.tb-field--blue .tb-field :is(input, select, textarea) { caret-color: var(--tb-cyan); }
.tb-contact.tb-field--blue .tb-field select:hover { border-color: rgba(255, 255, 255, .34); }
.tb-contact.tb-field--blue .tb-field select:focus { border-color: var(--tb-cyan); box-shadow: inset 0 0 0 1px var(--tb-cyan); background-color: rgba(255, 255, 255, .09); }
/* Selects drop the native pill and take a drawn chevron on the inline end. */
.tb-field select {
	-webkit-appearance: none; appearance: none; cursor: pointer;
	padding-inline-end: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: left 16px center; background-size: 16px;
}
.tb-contact.tb-field--blue .tb-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 16px center; background-size: 16px; }
.tb-field select option { color: var(--tb-black); background: #fff; }
/* Filled: a required field that is complete carries a slightly firmer edge. */
.tb-field :is(input, textarea):required:valid:not(:focus) { border-color: rgba(10, 10, 10, .42); }
.tb-contact.tb-field--blue .tb-field :is(input, textarea):required:valid:not(:focus) { border-color: rgba(255, 255, 255, .3); }
/* Invalid, only after the visitor has touched the field. */
.tb-field :is(input, select, textarea):user-invalid { border-color: #E5484D; box-shadow: inset 0 0 0 1px #E5484D; }
.tb-contact.tb-field--blue .tb-field :is(input, select, textarea):user-invalid { border-color: #FF7A7E; box-shadow: inset 0 0 0 1px #FF7A7E; }
.tb-field:has(:user-invalid) label { color: #C8323A; }
.tb-contact.tb-field--blue .tb-field:has(:user-invalid) label { color: #FF9A9D; }
/* Browser autofill keeps the room's surface instead of flashing pale yellow. */
.tb-field :is(input, textarea):-webkit-autofill { -webkit-box-shadow: inset 0 0 0 100px #fff; -webkit-text-fill-color: var(--tb-black); caret-color: var(--tb-blue); }
.tb-contact.tb-field--blue .tb-field :is(input, textarea):-webkit-autofill { -webkit-box-shadow: inset 0 0 0 100px #1A1F29; -webkit-text-fill-color: #fff; caret-color: var(--tb-cyan); }
.tb-form .tb-btn:disabled, .tb-form .tb-btn[aria-busy="true"] { opacity: .6; cursor: progress; }

/* 7. Figures: every photo and cover sits behind a 1px hairline ------------------- */
.tb-post__img, .tb-gallery__item, .tb-team__img, .tb-case__img, .tb-work__item, .tb-post-cover img, .tb-prose img {
	outline: 1px solid rgba(255, 255, 255, .08); outline-offset: -1px;
}
.tb-prose figure { margin: 2em 0; }
.tb-prose figcaption { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--tb-line); color: var(--tb-muted); font-size: .92rem; }
.tb-prose hr { height: 1px; margin: 2.4em 0; border: 0; background: var(--tb-line); }

/* 8. Footer -------------------------------------------------------------------- */
.tb-footer__links a, .tb-footer__contact a, .tb-footer__bottom a {
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
	text-decoration-color: transparent; transition: color .2s, text-decoration-color .25s;
}
.tb-footer__links a:hover, .tb-footer__contact a:hover, .tb-footer__bottom a:hover { color: #fff; text-decoration-color: rgba(255, 255, 255, .4); }
.tb-footer__title { font-size: .92rem; letter-spacing: .02em; color: rgba(255, 255, 255, .92); }
.tb-footer__contact li { align-items: flex-start; }
.tb-footer__contact .tb-icon { margin-top: .22em; }
.tb-social a:hover { border-color: #fff; }
.tb-footer__bottom { align-items: center; padding-block: 28px 32px; font-size: .86rem; color: rgba(255, 255, 255, .5); }
.tb-footer__bottom a { color: rgba(255, 255, 255, .6); }
@media (max-width: 640px) {
	/* The two link lists sit side by side; brand and contact keep the full width. */
	.tb-footer__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 44px 20px; padding-block: 56px 48px; }
	.tb-footer__grid > :first-child, .tb-footer__grid > :last-child { grid-column: 1 / -1; }
	.tb-footer__links { gap: 12px; font-size: 1rem; }
	.tb-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* 9. Type details --------------------------------------------------------------- */
.tb-footer__big, .tb-index__title, .tb-svc__title, .tb-press__title, .tb-accordion__item summary, .tb-contact__form-head .tb-h3 { text-wrap: balance; }
.tb-checks li, .tb-includes__grid li, .tb-pains__list li, .tb-accordion__item p, .tb-lead, .tb-hero__lead { text-wrap: pretty; }
/* Check marks sit on the first line of a wrapped item, not in the middle of it. */
.tb-checks li { align-items: flex-start; }
.tb-checks .tb-icon { margin-top: .2em; }
/* Numerals: lining figures in every stat so the digits share one baseline. */
.tb-hero__stats strong, .tb-proof__stats strong, .tb-audit__proof strong, .tb-case__results strong, .tb-kpi__ring strong { font-variant-numeric: lining-nums; }

/* Category archive intro (term description) */
.tb-archive__intro { margin-top: 14px; }
.tb-archive__intro p { margin: 0; }

/* Lead Club signup page (/lead-club/): free-audit landing layout, email + consent form */
.tb-club__form { display: grid; gap: 18px; }
.tb-club__name { white-space: nowrap; }
.tb-club__form .tb-btn { justify-self: stretch; width: 100%; justify-content: center; }
.tb-club__consent { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; color: var(--tb-muted); line-height: 1.55; cursor: pointer; }
.tb-club__consent input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--tb-blue); }
.tb-club__consent a { text-decoration: underline; }
.tb-club__gift { display: inline-flex; align-items: center; gap: 6px; direction: rtl; }
.tb-club__gift .tb-icon { width: 15px; height: 15px; animation: tb-gift-shake 2.8s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes tb-gift-shake {
	0%, 70%, 100% { transform: rotate(0); }
	74% { transform: rotate(-14deg); }
	78% { transform: rotate(12deg); }
	82% { transform: rotate(-10deg); }
	86% { transform: rotate(6deg); }
	90% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .tb-club__gift .tb-icon { animation: none; } }
/* Mobile: the form comes first, straight under the header */
@media (max-width: 960px) {
	.tb-club .tb-audit__form { order: -1; margin-top: 70px; }
}
.tb-club__art { rotate: 6deg; }
/* Less empty space above the fold; the gift sits higher and smaller so it never covers the headline */
.tb-hero.tb-club { padding-top: calc(var(--tb-header) + clamp(28px, 3vw, 52px)); }
@media (min-width: 961px) { .tb-club .tb-club__art { top: clamp(-150px, -9vw, -110px); inset-inline-end: clamp(-70px, -4vw, -40px); width: clamp(140px, 12vw, 180px); } }
@media (max-width: 960px) { .tb-hero.tb-club { padding-top: calc(var(--tb-header) + 8px); } .tb-club .tb-club__art { width: 112px; top: -74px; inset-inline-end: calc(10px - var(--tb-gutter)); } }
/* Form title: "you won 10 gifts" */
.tb-club__win { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.1rem); line-height: 1.2; font-weight: var(--fw-black); color: var(--tb-black); padding-inline-end: clamp(0px, 6vw, 90px); }
@media (max-width: 960px) { .tb-club__win { padding-inline-end: 0; margin-top: 34px; } }
.tb-club__win-num { color: var(--tb-blue); white-space: nowrap; background: linear-gradient(transparent 62%, rgba(2, 205, 253, .35) 62%); padding-inline: 2px; }
/* CTA: a short wiggle every few seconds so it draws the eye */
.tb-club__cta { animation: tb-cta-wiggle 4s ease-in-out 1.5s infinite; }
.tb-club__cta:hover { animation-play-state: paused; }
@keyframes tb-cta-wiggle {
	0%, 82%, 100% { transform: translateX(0) rotate(0); }
	85% { transform: translateX(-3px) rotate(-1deg); }
	88% { transform: translateX(3px) rotate(1deg); }
	91% { transform: translateX(-2px) rotate(-.6deg); }
	94% { transform: translateX(2px) rotate(.6deg); }
	97% { transform: translateX(0) rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .tb-club__cta { animation: none; } }

/* Summary box that the blog automation writes into posts with inline light styles (white background, Arial):
   restyle it for the dark theme without touching the post content. */
.tb-prose div[style*="background"] {
	background: var(--tb-surface) !important;
	border: 1px solid var(--tb-line) !important;
	border-inline-start: 3px solid var(--tb-blue) !important;
	color: var(--tb-text) !important;
	font-family: inherit !important;
}