/* TCW motion — styles for the "Selected work" ribbon. Without JavaScript the same Grid shows as framed screenshots. */

.tcw-work-marquee .el-title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tcw-work-marquee .el-image { display: block; width: 100%; height: auto; aspect-ratio: 3440 / 1980; object-fit: cover; object-position: top center; border: 1px solid #3a3a3a; border-radius: 14px; box-shadow: 0 0 0 6px #141414; }

.tcw-mq-viewport { position: relative; overflow: hidden; padding: 24px 0 64px; -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); }
.tcw-mq-track { display: flex; gap: 48px; padding-right: 48px; width: max-content; will-change: transform; }
.tcw-mq-item { position: relative; flex: none; width: clamp(280px, 30vw, 460px); isolation: isolate; }
.tcw-mq-item > a { display: block; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.tcw-mq-item picture { position: relative; z-index: 1; display: block; }
/* The glow under each screenshot. */
.tcw-mq-item::before { content: ""; position: absolute; z-index: 0; left: 8%; right: 8%; bottom: -34px; height: 55%; background: radial-gradient(closest-side, rgba(97, 195, 48, .32), rgba(97, 195, 48, 0) 100%); filter: blur(26px); opacity: .7; transition: opacity .5s ease; pointer-events: none; }
.tcw-mq-item:hover::before, .tcw-mq-item:focus-within::before { opacity: 1; }
.tcw-mq-item:hover > a, .tcw-mq-item:focus-within > a { transform: translateY(-6px); }

@media (prefers-reduced-motion: reduce) {
	.tcw-mq-viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
	.tcw-mq-item > a, .tcw-mq-item::before { transition: none; }
}

/* Page H1 lines (JS splits the title into masked lines). */
.tcw-line { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.tcw-line-in { display: inline-block; will-change: transform; }

/* Numbered steps: a thin green rail runs along the steps; reached steps light up. */
.tcw-steps { position: relative; }
.tcw-steps-rail { position: absolute; left: -22px; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, .06); border-radius: 2px; pointer-events: none; }
.tcw-steps-rail span { display: block; width: 100%; height: 100%; background: #61c330; transform-origin: top; transform: scaleY(0); border-radius: 2px; }
.tcw-steps .el-item .el-image { transition: filter .5s ease; }
.tcw-steps .el-item.tcw-step-on .el-image { filter: drop-shadow(0 0 10px rgba(97, 195, 48, .45)); }
@media (max-width: 959px) { .tcw-steps-rail { left: -14px; } }

/* Reading progress on articles. */
.tcw-progress { position: fixed; z-index: 1100; top: 0; left: 0; right: 0; height: 2px; background: #61c330; transform-origin: left; transform: scaleX(0); pointer-events: none; }

/* Start a Project: magnetic button with a soft green sheen on hover. */
/* UIkit sets .uk-button { overflow: visible }, so the class pair is needed to keep the sheen inside the button. */
.uk-button.tcw-magnet { position: relative; overflow: hidden; will-change: transform; }
.tcw-magnet::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(97, 195, 48, .28), transparent); transform: skewX(-20deg); transition: left .6s ease; pointer-events: none; }
.tcw-magnet:hover::after { left: 120%; }

/* Path variant (Grid class "tcw-path", How It Works): the line runs through the step icons like a drawing.
   Base = a faint white dashed construction line; a green pen draws over it while scrolling. JS sets left/top/bottom. */
.tcw-path.tcw-steps .tcw-steps-rail { width: 1px; margin-left: -.5px; border-radius: 0; background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .24) 0 6px, transparent 6px 12px); }
.tcw-path.tcw-steps .tcw-steps-rail span { position: absolute; top: 0; left: -.5px; width: 2px; height: 0; transform: none; border-radius: 2px; background: #61c330; }
.tcw-path.tcw-steps .tcw-steps-rail span::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #61c330; box-shadow: 0 0 0 4px rgba(97, 195, 48, .18), 0 0 14px rgba(97, 195, 48, .55); }
.tcw-path .el-item .el-image { position: relative; z-index: 1; border-radius: 50%; background: #000; box-shadow: 0 0 0 10px #000; }
.tcw-path .el-item .el-title { transition: color .5s ease; }
.tcw-path .el-item.tcw-step-on .el-title { color: #fff; }

/* Cards with a light border (Grid class "tcw-cards", How It Works → "Why Everything Happens in Writing").
   Near-black glass card, hairline border, a light top edge and a short green highlight in the middle of it;
   on hover the border glows green where the pointer is (only the border, never behind the text). */
.tcw-cards > .uk-grid > * { display: flex; }
.tcw-cards .el-item { position: relative; flex: 1; box-sizing: border-box; padding: 36px 32px 34px; border-radius: 18px;
	background: linear-gradient(180deg, #121212 0%, #090909 55%, #060606 100%);
	border: 1px solid rgba(255, 255, 255, .08);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 48px -24px rgba(0, 0, 0, .9);
	transition: border-color .4s ease, transform .4s ease; }
.tcw-cards .el-item::after { content: ""; position: absolute; top: -1px; left: 18%; right: 18%; height: 1px; pointer-events: none;
	background: linear-gradient(90deg, rgba(97, 195, 48, 0), #61c330 50%, rgba(97, 195, 48, 0));
	box-shadow: 0 -2px 12px 1px rgba(97, 195, 48, .45); }
.tcw-cards .el-item::before { content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s ease;
	background: radial-gradient(220px circle at var(--tcw-x, 50%) var(--tcw-y, 0%), rgba(97, 195, 48, .9), rgba(97, 195, 48, 0) 70%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.tcw-cards .el-item:hover { border-color: rgba(255, 255, 255, .12); }
.tcw-cards .el-item:hover::before { opacity: 1; }
.tcw-cards .el-item .el-title { color: #fff; }
@media (prefers-reduced-motion: reduce) { .tcw-cards .el-item, .tcw-cards .el-item::before { transition: none; } }
/* Variant "tcw-cards-bottom": the green highlight sits on the bottom edge and glows downwards. */
.tcw-cards.tcw-cards-bottom .el-item::after { top: auto; bottom: -1px; box-shadow: 0 2px 12px 1px rgba(97, 195, 48, .45); }

/* Dark band with engineering-paper dots (Section class "tcw-band"). The dots fade out towards the edges and never sit under
   a bright patch; text stays on an even dark ground. */
.tcw-band { position: relative; background: #070707 !important; border-top: 1px solid rgba(255, 255, 255, .05); border-bottom: 1px solid rgba(255, 255, 255, .05); }
.tcw-band::before { content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.2px); background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 20%, transparent 80%); mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 20%, transparent 80%); }
.tcw-band > * { position: relative; z-index: 1; }

/* Promises as frosted glass cards (Grid class "tcw-ledger"): translucent, blurring the dots behind them, so the green lens
   shows through softly when it passes under a card. */
.tcw-ledger > .uk-grid > * { display: flex; }
.tcw-ledger .el-item { position: relative; flex: 1; box-sizing: border-box; padding: 30px 32px; border-radius: 16px;
	background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .07);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
	-webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.tcw-ledger .el-item .el-title { color: #fff; }

/* The band answers the pointer (JS draws the dots on a canvas, see tcw-motion.js); touch screens keep the CSS dots. */
.tcw-band-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.tcw-band.tcw-band-live::before { display: none; }

/* FAQ as margin notes (Accordion class "tcw-faq"): glass rows; opening an answer turns + into a green × and a green pen
   draws a line down the left margin of the answer (a response to the click; static with "reduce motion"). */
.tcw-faq > .el-item { border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); transition: border-color .3s ease, background-color .3s ease; }
.tcw-faq > :nth-child(n+2) { margin-top: 12px; }
.tcw-faq > .el-item:hover { border-color: rgba(255, 255, 255, .12); }
.tcw-faq > .el-item.uk-open { background: rgba(255, 255, 255, .045); border-color: rgba(97, 195, 48, .28); }
.tcw-faq .el-title.uk-accordion-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 56px; box-sizing: border-box; padding: 18px 24px; }
.tcw-faq .uk-accordion-icon { flex: none; }
.tcw-faq [aria-expanded="true"] .uk-accordion-icon svg > .line-1 { transform: rotate(45deg); opacity: 1; }
.tcw-faq [aria-expanded="true"] .uk-accordion-icon svg > .line-2 { transform: rotate(45deg); }
.tcw-faq .uk-accordion-content { position: relative; margin: 0; padding: 4px 24px 26px 48px; }
.tcw-faq .uk-accordion-content::before { content: ""; position: absolute; left: 24px; top: 6px; bottom: 28px; width: 2px; border-radius: 2px; background: #61c330; transform-origin: top center; transform: scaleY(0); }
/* JS adds "tcw-pen" when the answer has finished opening (UIkit "shown"), so the pen draws once, after the height animation. */
.tcw-faq > .el-item.tcw-pen .uk-accordion-content::before { transform: scaleY(1); transition: transform 1.4s cubic-bezier(.45, .05, .25, 1); }
@media (max-width: 639px) { .tcw-faq .el-title.uk-accordion-title { padding: 16px 18px; } .tcw-faq .uk-accordion-content { padding: 2px 18px 22px 38px; } .tcw-faq .uk-accordion-content::before { left: 18px; } }
@media (prefers-reduced-motion: reduce) { .tcw-faq .uk-accordion-content::before { transform: none; } .tcw-faq > .el-item.tcw-pen .uk-accordion-content::before { transition: none; } }

/* Final call to action (Section classes "tcw-band tcw-cta"): one glass panel in the middle of the dark dotted band,
   green highlight on its top edge, the same material as the cards above. */
.tcw-cta > .uk-container { position: relative; box-sizing: border-box; max-width: 840px; padding: 64px 56px; border-radius: 22px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, .02) 100%);
	border: 1px solid rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 80px -40px rgba(0, 0, 0, .9);
	-webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.tcw-cta > .uk-container::after { content: ""; position: absolute; top: -1px; left: 22%; right: 22%; height: 1px; pointer-events: none;
	background: linear-gradient(90deg, rgba(97, 195, 48, 0), #61c330 50%, rgba(97, 195, 48, 0)); box-shadow: 0 -2px 12px 1px rgba(97, 195, 48, .45); }
.tcw-cta .uk-h3, .tcw-cta h2 { color: #fff; }
/* Jellyfish field instead of the dots (tcw-medusa.js, WebGL 2): on "tcw-band tcw-cta" and on any "tcw-band tcw-medusa".
   Without WebGL 2 the CSS dots stay. */
.tcw-medusa-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; }
.tcw-band.tcw-medusa-live::before { display: none; }
@media (max-width: 639px) { .tcw-cta > .uk-container { margin: 0 16px; padding: 44px 22px; border-radius: 18px; } }

/* ===== Service pages (2026-11-12): more patterns in the How It Works material ===== */

/* Band variants. "tcw-band-grid" = engineering paper (hairline squares, the lens bends them and turns them green);
   "tcw-band-cross" = inspection marks (+). JS draws them with the pointer lens; touch screens get these CSS versions. */
.tcw-band.tcw-band-grid::before { background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 40px 40px; background-position: center center; }
.tcw-band.tcw-band-cross::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M16 13v6M13 16h6' stroke='%23fff' stroke-opacity='.14' stroke-width='1'/%3E%3C/svg%3E"); background-size: 32px 32px; background-position: center center; }

/* Scope table on a band (Text class "tcw-sheet"): the table keeps the site's own table style; it gets the frosted glass
   of the cards so the band shows through softly, and every "Included" cell gets a small green tick (added by JS). */
.tcw-sheet .uk-table { -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.tcw-sheet .tcw-tick { display: inline-block; width: 14px; height: 14px; margin-right: 10px; vertical-align: -2px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4l2.9 2.9 6.1-6.6' fill='none' stroke='%2361c330' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }

/* "Quoted separately" (Text class "tcw-outside"): the work outside the agreed scope sits outside a solid border,
   in a dashed outline, quieter than the scope itself. */
.tcw-outside { box-sizing: border-box; padding: 24px 28px; border: 1px dashed rgba(255, 255, 255, .2); border-radius: 16px; }
.tcw-outside > :last-child { margin-bottom: 0; }

/* Guides as a reading list (Grid class "tcw-shelf"): plain rows on a hairline; on hover a green pen draws the line under
   the row from left to right and the book icon lights up. */
.tcw-shelf .el-item { position: relative; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.tcw-shelf .el-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #61c330; box-shadow: 0 0 10px rgba(97, 195, 48, .5); transform: scaleX(0); transform-origin: left center; transition: transform .7s cubic-bezier(.45, .05, .25, 1); pointer-events: none; }
.tcw-shelf .el-item:hover::after, .tcw-shelf .el-item:focus-within::after { transform: scaleX(1); }
.tcw-shelf .el-item .el-image { opacity: .7; transition: opacity .4s ease, filter .4s ease; }
.tcw-shelf .el-item:hover .el-image, .tcw-shelf .el-item:focus-within .el-image { opacity: 1; filter: drop-shadow(0 0 8px rgba(97, 195, 48, .45)); }
.tcw-shelf .el-title a { color: #fff; }
@media (prefers-reduced-motion: reduce) { .tcw-shelf .el-item::after, .tcw-shelf .el-item .el-image { transition: none; } }

/* Service showcase (Grid class "tcw-showcase"): the illustration fills the top of the card edge to edge and dissolves
   into the card, so its own dark background never shows a frame; price in green; green highlight on the top edge. */
.tcw-showcase > .uk-grid > * { display: flex; }
.tcw-showcase .el-item { position: relative; flex: 1; display: flex; flex-direction: column; box-sizing: border-box; padding: 0 28px 30px !important; border-radius: 20px; overflow: hidden;
	background: linear-gradient(180deg, #0c0c0c 0%, #070707 100%) !important; border: 1px solid rgba(255, 255, 255, .07);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -30px rgba(0, 0, 0, .9); transition: border-color .4s ease; }
.tcw-showcase .el-item::after { content: ""; position: absolute; z-index: 2; top: -1px; left: 18%; right: 18%; height: 1px; pointer-events: none;
	background: linear-gradient(90deg, rgba(97, 195, 48, 0), #61c330 50%, rgba(97, 195, 48, 0)); box-shadow: 0 -2px 12px 1px rgba(97, 195, 48, .45); }
.tcw-showcase .el-item > .el-image { display: block; width: calc(100% + 56px); max-width: none; height: auto; margin: 0 -28px; border-radius: 0 !important;
	-webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
	transform-origin: 50% 70%; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.tcw-showcase .el-item:hover { border-color: rgba(255, 255, 255, .13); }
.tcw-showcase .el-item:hover > .el-image { transform: scale(1.035); }
.tcw-showcase .el-item > .el-meta { position: relative; margin-top: -6px !important; color: #61c330; }
.tcw-showcase .el-item .el-title a { color: #fff; }
.tcw-showcase .el-item > .uk-margin-top:last-child { margin-top: auto !important; padding-top: 22px; }
@media (max-width: 639px) { .tcw-showcase .el-item { padding: 0 20px 24px !important; } .tcw-showcase .el-item > .el-image { width: calc(100% + 40px); margin: 0 -20px; } }
@media (prefers-reduced-motion: reduce) { .tcw-showcase .el-item > .el-image { transition: none; } }

/* Steps in a row (Grid class "tcw-relay"): the same pen as "tcw-path", running left to right through the step icons;
   when the steps stack on a phone it runs top to bottom like the path. */
.tcw-relay.tcw-steps .tcw-steps-rail { width: 1px; margin-left: -.5px; border-radius: 0; background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .24) 0 6px, transparent 6px 12px); }
.tcw-relay.tcw-steps .tcw-steps-rail span { position: absolute; top: 0; left: -.5px; width: 2px; height: 0; transform: none; border-radius: 2px; background: #61c330; }
.tcw-relay.tcw-steps .tcw-steps-rail span::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #61c330; box-shadow: 0 0 0 4px rgba(97, 195, 48, .18), 0 0 14px rgba(97, 195, 48, .55); }
.tcw-relay.tcw-relay-h .tcw-steps-rail { height: 1px; width: auto; margin: -.5px 0 0; background: repeating-linear-gradient(to right, rgba(255, 255, 255, .24) 0 6px, transparent 6px 12px); }
.tcw-relay.tcw-relay-h .tcw-steps-rail span { top: -.5px; left: 0; width: 0; height: 2px; }
.tcw-relay.tcw-relay-h .tcw-steps-rail span::after { left: auto; right: -4px; top: 50%; bottom: auto; margin: -4px 0 0; }
.tcw-relay .el-item .el-image { position: relative; z-index: 1; border-radius: 50%; background: #000; box-shadow: 0 0 0 10px #000; }
.tcw-relay .el-item .el-title { transition: color .5s ease; }
.tcw-relay .el-item.tcw-step-on .el-title { color: #fff; }
/* Illustrations standing on a band (e.g. the booking feature on /services/): their own dark background would show a
   rectangle over the paper, so the edges dissolve into the band. */
.tcw-band img.el-image[src*=".webp"] { -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); }
/* Steps in a row, stacked (below 960px): icon on the left, words on the right, so the pen runs down beside the text. */
@media (max-width: 959px) {
	.tcw-relay .el-item { display: grid; grid-template-columns: auto 1fr; column-gap: 28px; align-items: start; }
	.tcw-relay .el-item > .el-image { grid-row: 1 / span 3; }
	.tcw-relay .el-item > :not(.el-image) { grid-column: 2; }
	.tcw-relay .el-item > .el-title { margin-top: 0 !important; }
}
/* Stacked scope tables on a phone: the site's table style keeps tables 780px wide below 768px (for side scrolling), which
   does not fit the stacked layout, so the sheet fits the screen and each cell shows its column heading above it. */
@media (max-width: 959px) {
	.tcw-sheet .uk-table.uk-table-responsive { min-width: 0; }
	.tcw-sheet .uk-table-responsive td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, .45); }
}

/* ---------- Batch 2 (2026-11-12): features and industries ---------- */

/* Band papers drawn by tcw-motion.js: "tcw-band-cal" = week calendar (day columns, hour and half-hour lines; appointments
   turn green under the pointer), "tcw-band-radius" = dots with rings spreading from the pointer (search radius).
   Touch screens: the calendar lines in CSS; the radius keeps the plain dots of .tcw-band. */
.tcw-band.tcw-band-cal::before { background-image: linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px); background-size: 112px 56px, 112px 56px, 112px 28px; background-position: center center; }

/* Service lengths (Grid class "tcw-slots"): a time bar on one scale for the whole grid; JS reads "60 minutes", "2 hours". */
.tcw-slot { position: relative; height: 6px; margin-bottom: 20px; border-radius: 3px;
	background: repeating-linear-gradient(90deg, transparent 0 calc(var(--tcw-tick) - 1px), rgba(255, 255, 255, .22) calc(var(--tcw-tick) - 1px) var(--tcw-tick)), rgba(255, 255, 255, .06); }
.tcw-slot > span { position: absolute; left: 0; top: 0; bottom: 0; width: var(--tcw-fill); border-radius: 3px; background: #61c330; box-shadow: 0 0 12px rgba(97, 195, 48, .5);
	transform: scaleX(0); transform-origin: left center; transition: transform 1.1s cubic-bezier(.45, .05, .25, 1) var(--tcw-delay, 0s); }
.tcw-slots.tcw-on .tcw-slot > span { transform: scaleX(1); }

/* The pages of a website as a site tree (Text class "tcw-sitemap" on a two-column table: page | what it holds).
   The first page is the root; the rest branch off one rail. Hover lights the branch. */
.tcw-sitemap .uk-overflow-auto { overflow: visible; }
.tcw-sitemap table, .tcw-sitemap tbody { display: block; width: 100%; min-width: 0 !important; margin: 0; background: none !important; border: 0 !important; box-shadow: none !important; }
.tcw-sitemap tr { position: relative; display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr); column-gap: 28px; padding: 13px 0 13px 42px; border: 0 !important; background: none !important; }
.tcw-sitemap td { display: block; width: auto !important; padding: 0 !important; border: 0 !important; background: none !important; }
.tcw-sitemap td::before { content: none !important; }
.tcw-sitemap td:first-child, .tcw-sitemap td:first-child strong { color: #fff; }
.tcw-sitemap td + td { color: rgba(255, 255, 255, .62); transition: color .3s ease; }
.tcw-sitemap tr::before { content: ""; position: absolute; left: 9px; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .16); }
.tcw-sitemap tr:first-child::before { top: 27px; }
.tcw-sitemap tr:last-child::before { bottom: auto; height: 27px; }
.tcw-sitemap tr::after { content: ""; position: absolute; left: 10px; top: 26px; width: 18px; height: 1px; background: rgba(255, 255, 255, .16); transition: background .3s ease, box-shadow .3s ease; }
.tcw-sitemap tr:first-child::after { display: none; }
.tcw-sitemap td:first-child::after { content: ""; position: absolute; left: 27px; top: 23px; width: 7px; height: 7px; box-sizing: border-box; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4); background: #070707; transition: all .3s ease; }
.tcw-sitemap tr:first-child td:first-child::after { left: 5px; top: 22px; width: 9px; height: 9px; border-color: #61c330; background: #61c330; box-shadow: 0 0 10px rgba(97, 195, 48, .55); }
.tcw-sitemap tr:hover::after { background: #61c330; box-shadow: 0 0 8px rgba(97, 195, 48, .5); }
.tcw-sitemap tr:hover td:first-child::after { border-color: #61c330; background: #61c330; box-shadow: 0 0 10px rgba(97, 195, 48, .55); }
.tcw-sitemap tr:hover td + td { color: rgba(255, 255, 255, .85); }
@media (max-width: 639px) { .tcw-sitemap tr { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding-left: 38px; } }

/* Prices in running text (Text class "tcw-price"): the amounts in green, the paragraph marked like a price tag. */
.tcw-price { padding-left: 20px; border-left: 1px solid rgba(97, 195, 48, .6); }
.tcw-price .tcw-amount { color: #61c330; white-space: nowrap; }

/* Spec rows (Section class "tcw-spec"): rows of heading | text. Each row opens with one finished rule: a small green
   node at the start and a hairline that runs from it across the row, green fading into white and out to nothing at the
   right edge. When the row comes into view the node lights up and the line is drawn from it (JS adds .tcw-on).
   (2026-11-13, Theo: the old grey line with a green stub cut at a third looked unfinished.) */
.tcw-spec .uk-container > .uk-grid { position: relative; padding-top: 36px; }
.tcw-spec .uk-container > .uk-grid::before { content: ""; position: absolute; top: 0; left: 30px; right: 0; height: 1px;
	background: linear-gradient(90deg, rgba(97, 195, 48, .85) 0, rgba(97, 195, 48, .3) 14%, rgba(255, 255, 255, .14) 34%, rgba(255, 255, 255, .06) 70%, rgba(255, 255, 255, 0) 100%);
	transform: scaleX(0); transform-origin: left center; transition: transform 1.6s cubic-bezier(.22, .61, .36, 1) .15s; }
.tcw-spec .uk-container > .uk-grid::after { content: ""; position: absolute; top: -3px; left: 27px; width: 7px; height: 7px; border-radius: 50%;
	background: #61c330; box-shadow: 0 0 0 4px rgba(97, 195, 48, .12), 0 0 14px rgba(97, 195, 48, .55);
	transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.tcw-spec .uk-container > .uk-grid.tcw-on::before { transform: scaleX(1); }
.tcw-spec .uk-container > .uk-grid.tcw-on::after { transform: scale(1); }
@media (min-width: 1200px) { .tcw-spec .uk-container > .uk-grid::before { left: 40px; } .tcw-spec .uk-container > .uk-grid::after { left: 37px; } }

/* Customers | team (Section class "tcw-sides"): two lists side by side; the divider between them glows green at the
   pointer's height. */
.tcw-sides .el-item { padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.tcw-sides .el-item .el-image { opacity: .85; }
.tcw-sides .uk-grid-divider > :not(.uk-first-column)::before { border-left: 0 !important; width: 1px;
	background: linear-gradient(180deg, transparent calc(var(--tcw-sy, -999px) - 120px), rgba(97, 195, 48, .95) var(--tcw-sy, -999px), transparent calc(var(--tcw-sy, -999px) + 120px)), rgba(255, 255, 255, .1); }

@media (prefers-reduced-motion: reduce) { .tcw-slot > span, .tcw-spec .uk-container > .uk-grid::before, .tcw-spec .uk-container > .uk-grid::after, .tcw-sitemap tr::after, .tcw-sitemap td:first-child::after { transition: none; } }

/* 2026-11-13: more air inside spec rows and customer | team lists (Theo: «плотно»). */
.tcw-spec .uk-container > .uk-grid { padding-top: 48px; }
.tcw-spec .uk-container > .uk-grid + .uk-grid { margin-top: 88px; }
.tcw-sides .el-item { padding: 26px 0; border-bottom-color: rgba(255, 255, 255, .06); }
.tcw-sides .uk-grid-divider > * > .uk-margin-medium, .tcw-sides h2 { margin-bottom: 28px; }
@media (max-width: 959px) { .tcw-spec .uk-container > .uk-grid + .uk-grid { margin-top: 64px; } }

/* Batch 3 (2026-11-13): pricing pages.
   "tcw-band-ledger" (section, with tcw-band) = account-book paper drawn by tcw-motion.js; touch screens get the ruled
   lines and the double margin line in CSS. */
.tcw-band.tcw-band-ledger::before { background-image: linear-gradient(90deg, transparent calc(6% - 1px), rgba(97, 195, 48, .14) calc(6% - 1px), rgba(97, 195, 48, .14) 6%, transparent 6%, transparent calc(6% + 3px), rgba(97, 195, 48, .14) calc(6% + 3px), rgba(97, 195, 48, .14) calc(6% + 4px), transparent calc(6% + 4px)), linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 100% 100%, 100% 32px; background-position: 0 0, center center; }
/* Amounts in green without the price-tag rule (Text or Headline class "tcw-amounts"; a Headline with "tcw-price" too). */
.tcw-amounts .tcw-amount, .tcw-amounts strong.tcw-amount, h1.tcw-price .tcw-amount, h2.tcw-price .tcw-amount, h3.tcw-price .tcw-amount { color: #61c330; white-space: nowrap; }
h1.tcw-price, h2.tcw-price, h3.tcw-price { padding-left: 0; border-left: 0; }
/* Payment stages (Text class "tcw-split"): a bar split into the shares of the table, each share filled in turn. */
.tcw-split-bar { display: flex; gap: 6px; margin: 8px 0 28px; }
.tcw-split-bar > div { position: relative; min-width: 0; padding-top: 18px; }
.tcw-split-bar > div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); }
.tcw-split-bar span { position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 3px; background: #61c330; box-shadow: 0 0 12px rgba(97, 195, 48, .5); transform: scaleX(0); transform-origin: left center; transition: transform .9s cubic-bezier(.45, .05, .25, 1) var(--tcw-delay, 0s); }
.tcw-split-bar.tcw-on span { transform: scaleX(1); }
.tcw-split-bar b { display: block; font-weight: 500; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .85); }
@media (prefers-reduced-motion: reduce) { .tcw-split-bar span { transition: none; } }
/* Plain (not responsive) tables in a sheet on a phone: stacked like the responsive ones — one block per row, the first
   cell as its title, each other cell with its column heading above it — instead of side scrolling. */
@media (max-width: 639px) {
	.tcw-sheet .uk-overflow-auto { overflow: visible; }
	.tcw-sheet .uk-table:not(.uk-table-responsive) { min-width: 0 !important; }
	.tcw-sheet .uk-table:not(.uk-table-responsive), .tcw-sheet .uk-table:not(.uk-table-responsive) tbody,
	.tcw-sheet .uk-table:not(.uk-table-responsive) tr, .tcw-sheet .uk-table:not(.uk-table-responsive) td { display: block; width: auto !important; }
	.tcw-sheet .uk-table:not(.uk-table-responsive) thead { display: none; }
	.tcw-sheet .uk-table:not(.uk-table-responsive) tr { padding: 16px 20px; }
	.tcw-sheet .uk-table:not(.uk-table-responsive) td { padding: 4px 0 !important; text-align: left !important; border: 0 !important; }
	.tcw-sheet .uk-table:not(.uk-table-responsive) tr + tr { border-top: 1px solid rgba(255, 255, 255, .08); }
	.tcw-sheet .uk-table:not(.uk-table-responsive) td:first-child { padding-bottom: 8px !important; color: #fff; }
	.tcw-sheet .uk-table:not(.uk-table-responsive) td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, .45); }
}

/* Batch 4 (2026-11-13): guides. Chapters are rows of a tcw-spec section (heading left, sticky; chapter text right,
   Text class "tcw-read"). Illustrations dissolve at the edges like those on the bands; sub-chapters get air above. */
.tcw-read figure { margin: 48px 0 !important; }
.tcw-read figure img { display: block; margin: 0 auto; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); }
.tcw-read h3 { margin-top: 44px; }
.tcw-read > h3:first-child { margin-top: 0; }
.tcw-read.tcw-wide > :not(.uk-overflow-auto):not(table):not(figure) { max-width: 820px; }

/* 2026-11-13 Theo: no long empty stretches in the guides. Chapter illustrations sit under the heading on the left
   (Image class "tcw-side-pic", dissolving edges); sub-chapters inside a chapter are separated by a hairline. */
.tcw-side-pic img { -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); }
.tcw-read h3:not(:first-child) { margin-top: 40px; padding-top: 36px; border-top: 1px solid rgba(255, 255, 255, .08); }
@media (max-width: 959px) { .tcw-side-pic { max-width: 420px; } }
/* A section that lost its paper but keeps an illustration (Section class "tcw-fade"): the image still dissolves at the edges. */
.tcw-fade img.el-image[src*=".webp"] { -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); }
/* "What Is Quoted Separately" right after the package table (no band around them any more): air above its heading. */
#tm-main .uk-h2:has(+ .tcw-outside), #tm-main h2:has(+ .tcw-outside) { margin-top: 88px !important; }

/* Batch 6 (2026-11-13, Theo approved): blog. List (/blog/, categories): glass card like tcw-cards, green arrow instead of the theme pink.
   Article (theme output, no builder): chapters like the guides — H2 left, text right, finished green rule; quick answers = glass
   panel; numbered steps; FAQ rows with a green pen. Text unchanged; new SEO Machine posts get it automatically. */
body.blog .uk-tile-muted.el-item, body.category .uk-tile-muted.el-item {position: relative; background: linear-gradient(180deg, #121212 0%, #090909 55%, #060606 100%) !important;
  border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 18px 18px 30px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 48px -24px rgba(0,0,0,.9);}
body.blog .uk-tile-muted.el-item::after, body.category .uk-tile-muted.el-item::after {content: ""; position: absolute; top: -1px; left: 18%; right: 18%; height: 1px;
  background: linear-gradient(90deg, rgba(97,195,48,0), #61c330 50%, rgba(97,195,48,0)); box-shadow: 0 -2px 12px 1px rgba(97,195,48,.45);}
body.blog .uk-tile-muted.el-item img, body.category .uk-tile-muted.el-item img {border-radius: 12px;}
body.blog .uk-tile-muted.el-item > :not(img), body.category .uk-tile-muted.el-item > :not(img) {padding-left: 14px; padding-right: 14px;}
body.blog .uk-tile-muted.el-item .el-title a, body.category .uk-tile-muted.el-item .el-title a {color: #fff;}
body.blog .uk-button-text::before, body.category .uk-button-text::before, body.blog .uk-button-text::after, body.category .uk-button-text::after {color: #61c330 !important; border-color: #61c330 !important;}
body.blog .uk-button-text, body.category .uk-button-text {color: #fff;}
body.blog .uk-button-text svg, body.category .uk-button-text svg, body.blog .uk-button-text *, body.category .uk-button-text * {color: #61c330;}
@media (min-width: 960px) {
body.single-post .uk-article [property="text"] {display: flow-root;}
body.single-post .uk-article [property="text"] > h2 {clear: both; float: left; width: 30%; position: relative; box-sizing: border-box;
    margin: 88px 0 0 !important; padding: 48px 32px 0 0; font-size: 2rem; line-height: 1.2;}
body.single-post .uk-article [property="text"] > h2::before {content: ""; position: absolute; top: 0; left: 0; width: calc(100% / .30); height: 1px;
    background: linear-gradient(90deg, rgba(97,195,48,.85) 0, rgba(97,195,48,.3) 14%, rgba(255,255,255,.14) 34%, rgba(255,255,255,.06) 70%, rgba(255,255,255,0) 100%);}
body.single-post .uk-article [property="text"] > h2::after {content: ""; position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%;
    background: #61c330; box-shadow: 0 0 0 4px rgba(97,195,48,.12), 0 0 14px rgba(97,195,48,.55);}
body.single-post .uk-article [property="text"] > :not(h2):not(.quick-answers):not(p:first-child) {margin-left: 34%; max-width: 820px;}
body.single-post .uk-article [property="text"] > h2 + * {margin-top: 136px !important;}
body.single-post .uk-article [property="text"] > figure.seo-machine-cover {margin: 64px 0 0 34% !important;}
}
body.single-post .uk-article [property="text"] > p:first-child {font-size: 1.3rem; line-height: 1.55; color: #d9dcd6; max-width: 980px;}
body.single-post .uk-article [property="text"] p, body.single-post .uk-article [property="text"] li {font-size: 1.05rem; line-height: 1.75;}
body.single-post .quick-answers {margin: 56px 0 24px; padding: 36px 40px 30px; border-radius: 18px; position: relative;
  background: linear-gradient(180deg, #121212 0%, #090909 55%, #060606 100%); border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 48px -24px rgba(0,0,0,.9);}
body.single-post .quick-answers::after {content: ""; position: absolute; top: -1px; left: 18%; right: 18%; height: 1px;
  background: linear-gradient(90deg, rgba(97,195,48,0), #61c330 50%, rgba(97,195,48,0)); box-shadow: 0 -2px 12px 1px rgba(97,195,48,.45);}
body.single-post .quick-answers h2 {font-size: 1.6rem; margin: 0 0 20px;}
body.single-post .quick-answers ul {list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 40px; margin: 0;}
body.single-post .quick-answers li {padding-left: 18px; border-left: 2px solid #61c330;}
@media (max-width: 959px) {
body.single-post .quick-answers ul {grid-template-columns: 1fr;}
body.single-post .quick-answers {padding: 28px 22px;}
}
body.single-post .uk-article [property="text"] > figure.seo-machine-cover img {-webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);}
body.single-post .uk-article [property="text"] > ol {counter-reset: s; list-style: none; padding-left: 0;}
body.single-post .uk-article [property="text"] > ol > li {counter-increment: s; position: relative; padding: 14px 0 14px 52px; border-top: 1px solid rgba(255,255,255,.07);}
body.single-post .uk-article [property="text"] > ol > li::before {content: counter(s); position: absolute; left: 0; top: 12px; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(97,195,48,.6); color: #61c330; font-size: .9rem; display: grid; place-items: center;}
body.single-post .uk-article [property="text"] > h3 {margin-top: 12px !important; padding: 20px 24px 6px; border-radius: 14px 14px 0 0; font-size: 1.15rem;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-bottom: 0;}
body.single-post .uk-article [property="text"] > h3 + p {margin-top: 0 !important; padding: 4px 24px 22px 48px; position: relative; border-radius: 0 0 14px 14px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-top: 0;}
body.single-post .uk-article [property="text"] > h3 + p::before {content: ""; position: absolute; left: 24px; top: 6px; bottom: 24px; width: 2px; border-radius: 2px; background: #61c330;}
body.single-post .uk-article [property="text"] > h2 + h3 {margin-top: 136px !important;}
body.blog .uk-tile-muted.el-item .el-link.uk-button-text::after, body.category .uk-tile-muted.el-item .el-link.uk-button-text::after {background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2211%22%20viewBox%3D%220%200%2020%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%2361c330%22%20stroke-width%3D%221.1%22%20points%3D%2214%201%2019%205.5%2014%2010%22%2F%3E%3Cline%20fill%3D%22none%22%20stroke%3D%22%2361c330%22%20stroke-width%3D%221.1%22%20x1%3D%2218.5%22%20y1%3D%225.5%22%20x2%3D%220%22%20y2%3D%225.5%22%2F%3E%3C%2Fsvg%3E") !important;}

/* Contrast (2026-11-13, Theo OK). The grey meta text was rgba(255,255,255,.4), i.e. #666 on black = 3.65:1;
   WCAG AA needs 4.5:1. Now .55 (#8c8c8c): 6.3:1 on black and 5.2:1 on #1a1a1a cards. The hover (.7) and
   the current breadcrumb (.7) keep the theme's more specific rules. The `html` prefix wins over the theme
   sheet, which loads after this file. */
html .uk-text-meta, html .uk-text-meta > a, html .uk-article-meta, html .uk-article-meta a, html .uk-breadcrumb > * > * { color: rgba(255,255,255,.55); }
/* Project Builder start screen: eyebrow and help text were 3.4-3.8:1 through opacity .7/.75. */
.tpb .tpb-eyebrow, .tpb .tpb-help { opacity: .9; }