/* === The services pages — "ONE SYSTEM" ======================================
   Loaded by I_services.html, the seven I_services-detail*.html pages,
   I_contact.html and their Arabic mirrors. Nothing else on the site uses it,
   so it is its own file rather than more weight in custom.css, which every
   page pays for. See docs/plans/services-redesign.md.

   It is the factory page's language, generalised. Same void, same green, same
   fluid tokens, same two rooms:

     1. THE THEATRE — hero, spec and the acts. Transparent sections over one
        fixed WebGL canvas holding one object that never unloads. Scroll
        rearranges the object; it is never added to or taken off the stage.
     2. THE OFFICE  — the sequence, the scope, the proof, the chain, the call.
        Opaque surfaces in the drawing language the rest of the site speaks.

   The theatre is an enhancement. With no WebGL, no ES modules or reduced
   motion the canvas never appears and each act falls back to a drawn plan.
   Nothing here gates content: every word is in the DOM and visible without a
   single line of script having run.

   Prefix: ts-. wf- belongs to the factory page; ti- is spent on the homepage. */

/* -- 0. tokens -------------------------------------------------------------
   Everything fluid. The company works on iMacs: 2240x1260 CSS px on the 24",
   2560x1440 on the 27" and the Studio Display. The site's 1320px container
   leaves 620px of dead gutter each side at 2560 -- so the container tracks
   the viewport to 1760px and every type step is clamped against vw.

   The other half of that screen is the half people forget: only ~1260-1440px
   of HEIGHT. No act may assume more vertical room than that, which is why
   every full-height block is sized in svh and act copy is capped rather than
   centred in a 100vh box it overflows. */
.ts{
	--ts-void:#07090c;        /* the theatre: deeper than the site dark, so a */
	--ts-dark:#0c0e12;        /* lit object has somewhere to go               */
	--ts-dark-2:#10131a;
	--ts-stone:#f4f1ea;
	--ts-stone-2:#efeade;
	--ts-ink:#2a2a2a;
	--ts-ink-2:#595959;
	--ts-ink-3:#6b6b6b;
	--ts-green:#bbd636;
	/* The brand green is a light, high-luminance green. It reads on black and
	   it does not read on white: 3.95:1 for a link and 3.42:1 for an eyebrow
	   on stone, both under the 4.5 those sizes need. This is the same hue
	   taken down until it passes, and it is used wherever green meets a light
	   surface. Identical value to the factory page's --wf-green-ink on
	   purpose: two files, one decision. */
	--ts-green-ink:#5a7008;
	--ts-line:rgba(255,255,255,.13);
	--ts-line-2:rgba(255,255,255,.07);
	--ts-line-ink:rgba(42,42,42,.14);
	--ts-on-dark:#c7cacd;
	--ts-on-dark-2:#9aa0a7;

	--ts-gut:clamp(20px, 4vw, 72px);
	--ts-wrap:min(100% - (var(--ts-gut) * 2), 1760px);
	--ts-col:clamp(290px, 25vw, 460px);   /* an act's copy column */

	--ts-t-eyebrow:clamp(11px, 0.18vw + 9px, 14px);
	--ts-t-h1:clamp(38px, 6.6vw, 142px);
	--ts-t-h2:clamp(28px, 2.4vw + 10px, 64px);
	--ts-t-h3:clamp(23px, 1.5vw, 42px);
	--ts-t-h4:clamp(18px, 0.7vw + 12px, 26px);
	--ts-t-body:clamp(15px, 0.42vw + 9px, 20px);
	--ts-t-small:clamp(13px, 0.2vw + 11px, 16px);
	--ts-t-num:clamp(38px, 4vw, 92px);

	--ts-pad:clamp(72px, 7vw, 160px);

	/* Each page tints the light on its own stage -- the one thing that is
	   allowed to differ page to page, because the object under it differs.
	   The accent itself stays brand green everywhere: seven accent colours
	   would be seven brands. */
	--ts-wash:rgba(199,214,160,.07);
}

/* The theme insets .main and paints it white. Both have to go, or the theatre
   reads as a white page with dark boxes cut out of it. */
.main.ts{padding:0;margin:0;background:var(--ts-void);overflow-x:clip}
.ts .ts-wrap{width:var(--ts-wrap);margin-inline:auto;position:relative}

/* -- 1. the stage ----------------------------------------------------------
   One canvas, fixed, behind everything. Fixed rather than pinned: a pin
   rewrites layout and fights native scroll, and you get one pin per page at
   most. Fixed costs nothing, never reflows, and gives the same "the object
   stays while the page moves" reading.

   It is decoration. Every fact it shows is also written in the DOM beside it,
   so it is aria-hidden and never focusable. */
.ts-stage{position:fixed;inset:0;z-index:0;pointer-events:none;
	opacity:0;transition:opacity .6s ease}
.ts-stage.is-live{opacity:1}
.ts-stage.is-off{opacity:0}
.ts-stage[hidden]{display:none!important}
.ts-stage canvas{display:block;width:100%;height:100%}

/* The light the object sits in, and a vignette to seat it in the room. Drawn
   here rather than in GL: a volumetric cone would cost more than the whole
   rest of the scene and look no better. */
.ts-stage-light{position:absolute;inset:0;pointer-events:none;
	background:
		radial-gradient(58% 46% at 50% 32%, var(--ts-wash), transparent 70%),
		radial-gradient(120% 90% at 50% 50%, transparent 38%, rgba(0,0,0,.6) 100%)}

.ts-page{position:relative;z-index:1}

/* -- 2. shared section furniture ------------------------------------------ */
.ts .ts-sec{position:relative;padding:var(--ts-pad) 0;border:0;margin:0}
.ts .ts-void-sec{background:transparent}
.ts .ts-dark-sec{background:var(--ts-dark)}
.ts .ts-dark2-sec{background:var(--ts-dark-2)}
.ts .ts-stone-sec{background:var(--ts-stone)}

.ts .ts-eyebrow{font-family:"Poppins",sans-serif;font-size:var(--ts-t-eyebrow);
	font-weight:600;letter-spacing:.18em;text-transform:uppercase;
	color:var(--ts-green);margin:0 0 14px;line-height:1.6}
.ts .ts-stone-sec .ts-eyebrow{color:var(--ts-green-ink)}
/* Arabic is a connected script: tracking breaks the joins, and an uppercase
   transform is meaningless in it. */
[dir="rtl"] .ts .ts-eyebrow{letter-spacing:0;text-transform:none;font-weight:500;
	font-size:clamp(13px,.2vw+11px,16px)}

.ts h2.ts-h2{font-family:"Poppins",sans-serif;font-weight:600;
	font-size:var(--ts-t-h2);line-height:1.18;letter-spacing:-.015em;
	color:#fff;margin:0 0 18px;text-transform:none}
.ts .ts-stone-sec h2.ts-h2{color:var(--ts-ink)}
.ts .ts-h3{font-family:"Poppins",sans-serif;font-weight:600;
	font-size:var(--ts-t-h3);line-height:1.3;color:#fff;margin:0 0 10px;
	text-transform:none}
.ts .ts-stone-sec .ts-h3{color:var(--ts-ink)}
.ts .ts-h4{font-family:"Poppins",sans-serif;font-weight:600;
	font-size:var(--ts-t-h4);line-height:1.35;color:#fff;margin:0 0 8px;
	text-transform:none;letter-spacing:0}
.ts .ts-stone-sec .ts-h4{color:var(--ts-ink)}

.ts .ts-lede{font-size:var(--ts-t-body);line-height:1.75;color:var(--ts-on-dark);
	max-width:62ch;margin:0}
.ts .ts-stone-sec .ts-lede{color:var(--ts-ink-2)}
.ts .ts-lede + .ts-lede{margin-top:1.1em}
.ts .ts-head{margin-bottom:clamp(40px,3.6vw,72px)}
.ts .ts-head .ts-lede{max-width:70ch}

/* -- 3. the hero ----------------------------------------------------------
   svh, not vh: on mobile the URL bar makes vh taller than the screen and the
   cue ends up under the chrome. */
.ts .ts-hero{min-height:100svh;display:flex;align-items:flex-end;
	padding:calc(var(--ts-pad) + 60px) 0 clamp(40px,4vw,80px)}
.ts .ts-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;
	gap:clamp(24px,3vw,64px);align-items:end;width:100%}
/* The breadcrumb doubles as the hero's eyebrow: the page needs one for the
   same reason every other page has one, and a second label above it would be
   two lines of small type saying nearly the same thing. */
.ts .ts-crumb{display:flex;align-items:center;flex-wrap:wrap;gap:10px;
	margin:0 0 clamp(16px,1.4vw,28px);list-style:none;padding:0;
	font-family:"Overpass",sans-serif;font-size:var(--ts-t-eyebrow);font-weight:700;
	letter-spacing:.16em;text-transform:uppercase;color:#7d838b}
[dir="rtl"] .ts .ts-crumb{letter-spacing:0;text-transform:none;
	font-size:clamp(13px,.2vw+11px,16px);font-weight:500}
.ts .ts-crumb li{display:flex;align-items:center;gap:10px}
.ts .ts-crumb li + li::before{content:"";width:14px;height:1px;
	background:#44494f;flex:none}
.ts .ts-crumb a{color:#7d838b;text-decoration:none;transition:color .2s ease}
.ts .ts-crumb a:hover,.ts .ts-crumb a:focus-visible{color:var(--ts-green)}
.ts .ts-crumb [aria-current]{color:#fff}

.ts h1.ts-h1{font-family:"Poppins",sans-serif;font-weight:600;
	font-size:var(--ts-t-h1);line-height:.96;letter-spacing:-.035em;
	color:#fff;margin:0 0 clamp(18px,1.6vw,32px);text-transform:none}
.ts .ts-h1 em{font-style:normal;color:var(--ts-green)}
[dir="rtl"] .ts h1.ts-h1{letter-spacing:0;line-height:1.1}
.ts .ts-hero-sub{font-size:var(--ts-t-body);line-height:1.7;color:var(--ts-on-dark);
	max-width:52ch;margin:0}

/* A line of hard facts under the hero lede. On an iMac it runs across; on a
   phone it stacks. */
.ts .ts-hero-facts{display:flex;flex-wrap:wrap;gap:0;margin:clamp(28px,2.4vw,48px) 0 0;
	padding:0;list-style:none;border-top:1px solid var(--ts-line)}
.ts .ts-hero-facts li{padding:14px clamp(20px,2vw,38px) 0 0;min-width:170px}
[dir="rtl"] .ts .ts-hero-facts li{padding:14px 0 0 clamp(20px,2vw,38px)}
.ts .ts-fact-k{display:block;font-family:"Overpass",sans-serif;font-weight:700;
	font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7d838b;
	margin-bottom:6px}
[dir="rtl"] .ts .ts-fact-k{letter-spacing:0;text-transform:none;font-size:13px}
.ts .ts-fact-v{display:block;font-family:"Overpass",sans-serif;font-weight:700;
	font-size:clamp(15px,.3vw+13px,19px);color:#fff;line-height:1.3}

/* The cue is the only thing on the page that loops. It stops the moment the
   visitor does the thing it asks for. */
.ts .ts-cue{display:flex;align-items:center;gap:12px;
	font-family:"Overpass",sans-serif;font-size:12px;font-weight:700;
	letter-spacing:.16em;text-transform:uppercase;color:#8b9097;
	white-space:nowrap}
[dir="rtl"] .ts .ts-cue{letter-spacing:0;text-transform:none;font-size:14px}
.ts .ts-cue-rule{display:block;width:1px;height:52px;background:var(--ts-line);
	position:relative;overflow:hidden}
.ts .ts-cue-rule::after{content:"";position:absolute;inset-inline:0;top:0;height:18px;
	background:var(--ts-green);animation:ts-cue 2.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes ts-cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(290%)}}
.ts-scrolled .ts-cue{opacity:0;transition:opacity .4s ease}

/* -- 4. the spec card -----------------------------------------------------
   A card floating in the theatre rather than an opaque band, so the object
   stays visible behind it and the room is never interrupted. */
.ts .ts-brief{min-height:100svh;display:flex;align-items:center}
.ts .ts-spec{width:min(100%, 580px);
	background:rgba(7,9,12,.74);backdrop-filter:blur(16px);
	-webkit-backdrop-filter:blur(14px);
	border:1px solid var(--ts-line);padding:clamp(28px,2.4vw,48px)}
@supports not (backdrop-filter:blur(4px)){.ts .ts-spec{background:rgba(7,9,12,.92)}}
.ts .ts-spec-list{list-style:none;margin:clamp(22px,2vw,36px) 0 0;padding:0;
	display:grid;gap:0}
.ts .ts-spec-list li{display:flex;justify-content:space-between;align-items:baseline;
	gap:20px;padding:14px 0;border-top:1px solid var(--ts-line)}
.ts .ts-spec-k{font-size:13px;letter-spacing:.1em;text-transform:uppercase;
	color:#a9aeb5}
[dir="rtl"] .ts .ts-spec-k{letter-spacing:0;text-transform:none;font-size:15px}
.ts .ts-spec-v{font-family:"Overpass",sans-serif;font-weight:700;
	font-size:clamp(15px,.3vw+13px,19px);color:#fff;text-align:end}

/* -- 5. the acts ----------------------------------------------------------
   Full-height blocks. The copy column alternates side so the eye is not
   parked in one place for four screens, and the camera leans the other way to
   meet it -- which is what makes the object cross the screen as you scroll
   rather than sit in the middle of it. Each act is taller than the viewport
   so the transformation reads as a transformation and not as a cut. */
.ts .ts-act{min-height:130svh;display:flex;align-items:center;
	padding-block:clamp(48px,5vw,96px)}
.ts .ts-act-inner{width:var(--ts-wrap);margin-inline:auto;display:flex}
.ts .ts-act-a .ts-act-inner{justify-content:flex-start}
.ts .ts-act-b .ts-act-inner{justify-content:flex-end}
/* The rail lives in the end gutter and its current label reaches into the
   page. On the acts whose copy is also end-aligned that is the same strip of
   screen, so the copy steps aside for it. */
@media (min-width:992px){.ts .ts-act-b .ts-act-copy{margin-inline-end:clamp(56px,6vw,132px)}}
/* A scrim down the side the copy sits on. The object behind it is lit and
   moving, so white text over it cannot be relied on to clear 4.5:1 at every
   scroll position. This guarantees it without putting the copy in a box,
   which is what a box would cost us here. Drawn only where the theatre is
   live; with no WebGL there is nothing to scrim. */
.ts-gl .ts-act::before{content:"";position:absolute;inset:0;pointer-events:none;
	z-index:0}
.ts-gl .ts-act-a::before{background:linear-gradient(to right,
	rgba(7,9,12,.93) 0%, rgba(7,9,12,.76) 24%, rgba(7,9,12,.32) 42%, transparent 58%)}
.ts-gl .ts-act-b::before{background:linear-gradient(to left,
	rgba(7,9,12,.93) 0%, rgba(7,9,12,.76) 24%, rgba(7,9,12,.32) 42%, transparent 58%)}
/* A gradient has no logical direction, so RTL needs the pair written out. */
[dir="rtl"] .ts-gl .ts-act-a::before{background:linear-gradient(to left,
	rgba(7,9,12,.93) 0%, rgba(7,9,12,.76) 24%, rgba(7,9,12,.32) 42%, transparent 58%)}
[dir="rtl"] .ts-gl .ts-act-b::before{background:linear-gradient(to right,
	rgba(7,9,12,.93) 0%, rgba(7,9,12,.76) 24%, rgba(7,9,12,.32) 42%, transparent 58%)}
.ts .ts-act-inner{position:relative;z-index:1}

.ts .ts-act-copy{width:var(--ts-col);max-width:100%}
.ts .ts-act-k{display:block;font-family:"Overpass",sans-serif;font-weight:800;
	font-size:clamp(44px,3.4vw,74px);line-height:1;color:transparent;
	-webkit-text-stroke:1px rgba(255,255,255,.42);margin:0 0 4px}
.ts .ts-act-copy .ts-lede{max-width:none}
.ts .ts-act-points{list-style:none;margin:clamp(20px,1.8vw,32px) 0 0;padding:0}
.ts .ts-act-points li{position:relative;padding:11px 0 11px 22px;
	border-top:1px solid var(--ts-line);font-size:clamp(14px,.26vw+11px,17px);
	line-height:1.6;color:var(--ts-on-dark)}
[dir="rtl"] .ts .ts-act-points li{padding:11px 22px 11px 0}
.ts .ts-act-points li::before{content:"";position:absolute;inset-inline-start:0;
	top:1.15em;width:9px;height:1px;background:var(--ts-green)}
.ts .ts-act-points strong{color:#fff;font-weight:600}

/* The drawn plan. It is the whole picture when there is no WebGL, and a quiet
   annotation beside the real thing when there is. */
.ts .ts-plan{display:block;width:clamp(150px,13vw,230px);height:auto;margin-bottom:22px;
	fill:none;stroke:rgba(255,255,255,.42);stroke-width:1.1;
	stroke-linecap:round;stroke-linejoin:round}
.ts .ts-plan .ts-plan-hi{stroke:var(--ts-green)}
.ts-gl .ts-plan{width:clamp(96px,7vw,132px);stroke:rgba(255,255,255,.26)}
.ts-gl .ts-plan .ts-plan-hi{stroke:rgba(187,214,54,.6)}

/* -- 6. the act rail ------------------------------------------------------
   Four or five acts is more than a visitor holds in their head while
   scrolling, and someone who came for one of them should not have to pass the
   others. A real nav list, so it is in the tab order and reads as one. */
.ts-rail{position:fixed;z-index:3;inset-inline-end:clamp(14px,1.6vw,34px);
	top:50%;transform:translateY(-50%);
	opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s ease}
.ts-rail.is-on{opacity:1;visibility:visible}
.ts-rail ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ts-rail a{display:flex;align-items:center;justify-content:flex-end;gap:12px;
	padding:7px 0;text-decoration:none;
	font-family:"Overpass",sans-serif;font-size:11px;font-weight:700;
	letter-spacing:.14em;text-transform:uppercase;color:#6c727a;
	transition:color .25s ease}
[dir="rtl"] .ts-rail a{justify-content:flex-start;letter-spacing:0;
	text-transform:none;font-size:13px}
.ts-rail a:hover,.ts-rail a:focus-visible{color:#fff}
.ts-rail .ts-rail-t{opacity:0;transform:translateX(6px);
	transition:opacity .25s ease,transform .25s ease}
[dir="rtl"] .ts-rail .ts-rail-t{transform:translateX(-6px)}
.ts-rail a:hover .ts-rail-t,.ts-rail a:focus-visible .ts-rail-t,
.ts-rail li.is-on .ts-rail-t{opacity:1;transform:none}
.ts-rail .ts-rail-b{display:block;width:26px;height:2px;background:#3a3f46;
	flex:none;transition:background .25s ease,width .25s ease}
.ts-rail li.is-on a{color:#fff}
.ts-rail li.is-on .ts-rail-b{background:var(--ts-green);width:44px}
.ts-rail a:focus-visible{outline:2px solid var(--ts-green);outline-offset:4px}

/* -- 7. the sequence -----------------------------------------------------
   Leaving the theatre. From here down the page is the drawing office: opaque
   surfaces, line-work, no 3D. At 1500px and up the steps run as one rail
   across the page, which is what finally uses an iMac's width for something
   other than margin. */
.ts .ts-steps{display:grid;gap:1px;background:var(--ts-line);
	grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.ts .ts-step{background:var(--ts-dark);padding:clamp(24px,1.8vw,38px)}
.ts .ts-step-k{display:block;font-family:"Overpass",sans-serif;font-weight:700;
	font-size:12px;letter-spacing:.14em;color:var(--ts-green);margin-bottom:18px}
[dir="rtl"] .ts .ts-step-k{letter-spacing:.04em}
.ts .ts-step p{font-size:clamp(13px,.2vw+11px,16px);line-height:1.7;
	color:var(--ts-on-dark-2);margin:0}
.ts .ts-step h3{font-family:"Poppins",sans-serif;font-weight:600;
	font-size:clamp(17px,.5vw+13px,22px);color:#fff;margin:0 0 10px;
	text-transform:none;line-height:1.3}
.ts svg.ts-ico{display:block;width:clamp(38px,2.6vw,52px);height:auto;
	margin-bottom:20px;fill:none;stroke:#fff;stroke-width:1.2;
	stroke-linecap:round;stroke-linejoin:round}
.ts .ts-stone-sec svg.ts-ico{stroke:var(--ts-ink)}
.ts svg.ts-ico path,.ts svg.ts-ico line,.ts svg.ts-ico circle,
.ts svg.ts-ico rect,.ts svg.ts-ico polyline{
	stroke-dasharray:var(--l,200);stroke-dashoffset:0}
.ts-anim .ts-step svg.ts-ico path,.ts-anim .ts-step svg.ts-ico line,
.ts-anim .ts-step svg.ts-ico circle,.ts-anim .ts-step svg.ts-ico rect,
.ts-anim .ts-step svg.ts-ico polyline{
	stroke-dashoffset:var(--l,200);transition:stroke-dashoffset .9s ease}
.ts-anim .ts-step.is-in svg.ts-ico path,.ts-anim .ts-step.is-in svg.ts-ico line,
.ts-anim .ts-step.is-in svg.ts-ico circle,.ts-anim .ts-step.is-in svg.ts-ico rect,
.ts-anim .ts-step.is-in svg.ts-ico polyline{stroke-dashoffset:0}

/* -- 8. the scope table --------------------------------------------------
   What is in the package and what is not. A table, because it is one: a
   quantity surveyor reads down a column, not through a paragraph. */
.ts .ts-scope{display:grid;gap:1px;background:var(--ts-line-ink);
	grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.ts .ts-scope-col{background:var(--ts-stone);padding:clamp(28px,2.2vw,46px)}
.ts .ts-scope-col:nth-child(2){background:var(--ts-stone-2)}
.ts .ts-scope-col h3{font-family:"Poppins",sans-serif;font-weight:600;
	font-size:clamp(19px,.6vw+15px,26px);color:var(--ts-ink);margin:0 0 20px;
	text-transform:none}
.ts .ts-scope-list{list-style:none;margin:0;padding:0}
.ts .ts-scope-list li{position:relative;padding:12px 0 12px 26px;
	border-top:1px solid var(--ts-line-ink);font-size:var(--ts-t-small);
	line-height:1.65;color:var(--ts-ink-2)}
[dir="rtl"] .ts .ts-scope-list li{padding:12px 26px 12px 0}
.ts .ts-scope-list li::before{content:"";position:absolute;
	inset-inline-start:0;top:1.35em;width:12px;height:1px;
	background:var(--ts-green-ink)}
.ts .ts-scope-list strong{color:var(--ts-ink);font-weight:600}
/* The excluded column reads as excluded: a rule through the marker, not a
   colour nobody can see on stone. */
.ts .ts-scope-out .ts-scope-list li::before{background:#b9b3a4;
	width:12px;height:1px}
.ts .ts-scope-out .ts-scope-list li{color:var(--ts-ink-3)}

/* -- 9. the proof --------------------------------------------------------
   No invented figures. A contractor's site carrying numbers nobody can source
   is worse than one carrying none. Everything here is either sourced in the
   plan doc or a claim the company can stand behind as written. */
.ts .ts-proof{display:grid;gap:1px;background:var(--ts-line-ink);
	grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.ts .ts-proof-cell{background:var(--ts-stone);padding:clamp(28px,2.2vw,46px)}
.ts .ts-proof-cell:nth-child(even){background:var(--ts-stone-2)}
.ts .ts-proof-cell p{font-size:clamp(14px,.24vw+11px,17px);line-height:1.75;
	color:var(--ts-ink-2);margin:0}
.ts .ts-proof-n{display:block;font-family:"Overpass",sans-serif;font-weight:900;
	font-size:var(--ts-t-num);line-height:1;letter-spacing:-.025em;
	color:var(--ts-ink);margin:0 0 4px}
.ts .ts-proof-n small{font-size:.42em;font-weight:700;letter-spacing:0;
	margin-inline-start:.15em}

/* -- 10. the index -------------------------------------------------------
   The services once more, as ways in. Everything above was a story; this is
   the part someone scrolls to. */
.ts .ts-cards{display:grid;gap:1px;background:var(--ts-line-ink);
	grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.ts .ts-card{background:#fff;padding:clamp(28px,2.2vw,48px);
	display:flex;flex-direction:column;text-decoration:none;
	transition:background .3s ease}
.ts .ts-card:hover,.ts .ts-card:focus-visible{background:var(--ts-stone)}
.ts .ts-card:focus-visible{outline:2px solid var(--ts-green-ink);outline-offset:-2px}
.ts .ts-card .ts-plan{stroke:rgba(42,42,42,.4);width:clamp(110px,8vw,150px);
	margin-bottom:clamp(22px,2vw,36px)}
.ts .ts-card .ts-plan .ts-plan-hi{stroke:var(--ts-green-ink)}
.ts .ts-card h3{font-family:"Poppins",sans-serif;font-weight:600;
	font-size:clamp(19px,.6vw+15px,27px);color:var(--ts-ink);margin:0 0 10px;
	text-transform:none;line-height:1.25}
.ts .ts-card p{font-size:clamp(14px,.22vw+11px,16px);line-height:1.7;
	color:var(--ts-ink-3);margin:0 0 clamp(20px,1.6vw,30px)}
.ts .ts-card-go{margin-top:auto;font-family:"Overpass",sans-serif;font-weight:700;
	font-size:12px;letter-spacing:.14em;text-transform:uppercase;
	color:var(--ts-green-ink);display:flex;align-items:center;gap:10px}
[dir="rtl"] .ts .ts-card-go{letter-spacing:0;text-transform:none;font-size:14px}
.ts .ts-card-go::after{content:"";width:22px;height:1px;
	background:var(--ts-green-ink);transition:width .3s ease}
.ts .ts-card:hover .ts-card-go::after{width:40px}

/* -- 11. the chain -------------------------------------------------------
   The way out. Not a dead end and not a grid of six other things: the next
   service, named, with its own object already rising into frame behind it.
   This is what makes the seven pages read as one scroll rather than seven
   tabs. */
/* Transparent, not dark: this band is a window back onto the fixed stage, and
   across it the object becomes the NEXT page's object. The office sections
   above and below it are opaque, so the stage is only ever visible in the
   theatre and here -- which is exactly the two places it has something to
   say. A scrim keeps the type off the moving object. */
.ts .ts-chain{position:relative;min-height:88svh;display:flex;align-items:center;
	background:transparent;overflow:hidden;
	padding-block:clamp(72px,7vw,140px)}
.ts-gl .ts-chain::before{content:"";position:absolute;inset:0;pointer-events:none;
	z-index:0;background:linear-gradient(to bottom,
		var(--ts-void) 0%, rgba(7,9,12,.72) 22%, rgba(7,9,12,.5) 50%,
		rgba(7,9,12,.74) 78%, var(--ts-void) 100%)}
.ts .ts-chain-inner{position:relative;z-index:1;width:var(--ts-wrap);
	margin-inline:auto}
.ts .ts-chain-k{display:block;font-family:"Overpass",sans-serif;font-weight:700;
	font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#7d838b;
	margin-bottom:clamp(14px,1.2vw,24px)}
[dir="rtl"] .ts .ts-chain-k{letter-spacing:0;text-transform:none;font-size:14px}
.ts a.ts-chain-link{display:inline-flex;align-items:baseline;gap:clamp(16px,2vw,40px);
	text-decoration:none;flex-wrap:wrap}
.ts .ts-chain-h{font-family:"Poppins",sans-serif;font-weight:600;
	font-size:clamp(34px,5.2vw,108px);line-height:1;letter-spacing:-.03em;
	color:#fff;margin:0;transition:color .3s ease;text-transform:none}
[dir="rtl"] .ts .ts-chain-h{letter-spacing:0;line-height:1.15}
.ts a.ts-chain-link:hover .ts-chain-h,
.ts a.ts-chain-link:focus-visible .ts-chain-h{color:var(--ts-green)}
.ts a.ts-chain-link:focus-visible{outline:2px solid var(--ts-green);
	outline-offset:8px}
.ts .ts-chain-arrow{display:block;width:clamp(44px,4vw,88px);height:auto;
	flex:none;fill:none;stroke:var(--ts-green);stroke-width:1.4;
	transform:translateX(0);transition:transform .35s cubic-bezier(.4,0,.2,1)}
[dir="rtl"] .ts .ts-chain-arrow{transform:scaleX(-1)}
.ts a.ts-chain-link:hover .ts-chain-arrow{transform:translateX(14px)}
[dir="rtl"] .ts a.ts-chain-link:hover .ts-chain-arrow{transform:scaleX(-1) translateX(14px)}
.ts .ts-chain-sub{font-size:var(--ts-t-body);line-height:1.7;
	color:var(--ts-on-dark);max-width:54ch;margin:clamp(20px,1.8vw,34px) 0 0}

/* The overlay the chain fades through on its way to the next page. Only used
   where the browser has no cross-document view transition; where it does,
   the transition does this better. */
.ts-veil{position:fixed;inset:0;z-index:9999;background:var(--ts-void);
	opacity:0;pointer-events:none;transition:opacity .42s ease}
.ts-veil.is-on{opacity:1}

/* -- 12. the call --------------------------------------------------------- */
.ts .ts-cta{background:var(--ts-dark);position:relative}
.ts .ts-cta-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;
	gap:clamp(28px,3vw,80px);align-items:center}
.ts .ts-cta h2{margin-bottom:0}
.ts .ts-btn{display:inline-flex;align-items:center;gap:14px;
	background:var(--ts-green);color:#111;text-decoration:none;
	font-family:"Overpass",sans-serif;font-weight:800;
	font-size:clamp(13px,.2vw+11px,15px);letter-spacing:.12em;
	text-transform:uppercase;padding:clamp(16px,1.2vw,22px) clamp(28px,2.4vw,48px);
	transition:background .25s ease,transform .25s ease;white-space:nowrap}
[dir="rtl"] .ts .ts-btn{letter-spacing:0;text-transform:none;font-size:16px}
.ts .ts-btn:hover,.ts .ts-btn:focus-visible{background:#cde24e;color:#111}
.ts .ts-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ts .ts-btn-ghost{background:transparent;color:#fff;
	box-shadow:inset 0 0 0 1px var(--ts-line)}
.ts .ts-btn-ghost:hover,.ts .ts-btn-ghost:focus-visible{background:rgba(255,255,255,.07);
	color:#fff}
.ts .ts-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,2.2vw,42px)}

/* -- 13. the hub's horizontal rail ---------------------------------------
   The one place on these pages where scrolling down moves the page sideways.
   A real scroller with real links: it works from the keyboard, it works with
   a trackpad swipe, and the scroll-down drive is layered on top rather than
   replacing it. */
.ts .ts-reel{position:relative;padding-block:var(--ts-pad)}
.ts .ts-reel-vp{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
	-ms-overflow-style:none;scroll-snap-type:x mandatory;
	padding-inline:var(--ts-gut);padding-block:clamp(10px,1vw,20px)}
.ts .ts-reel-vp::-webkit-scrollbar{display:none}
.ts .ts-reel-track{display:flex;gap:clamp(16px,1.6vw,34px);width:max-content;
	padding-inline-end:var(--ts-gut)}
.ts .ts-reel-cell{scroll-snap-align:center;flex:none;
	width:clamp(260px,24vw,420px);
	background:var(--ts-dark);border:1px solid var(--ts-line-2);
	padding:clamp(24px,2vw,44px);display:flex;flex-direction:column;
	text-decoration:none;position:relative;
	transition:background .35s ease,border-color .35s ease,transform .5s cubic-bezier(.4,0,.2,1)}
.ts .ts-reel-cell:hover,.ts .ts-reel-cell:focus-visible{
	background:var(--ts-dark-2);border-color:rgba(187,214,54,.42)}
.ts .ts-reel-cell:focus-visible{outline:2px solid var(--ts-green);outline-offset:3px}
.ts .ts-reel-cell.is-near{transform:translateY(-14px)}
.ts .ts-reel-k{font-family:"Overpass",sans-serif;font-weight:800;
	font-size:clamp(30px,2.4vw,52px);line-height:1;color:transparent;
	-webkit-text-stroke:1px rgba(255,255,255,.3);margin:0 0 clamp(18px,1.6vw,30px);
	transition:-webkit-text-stroke-color .35s ease}
.ts .ts-reel-cell.is-near .ts-reel-k{-webkit-text-stroke-color:rgba(187,214,54,.7)}
.ts .ts-reel-cell h3{font-family:"Poppins",sans-serif;font-weight:600;
	font-size:clamp(20px,1.1vw+13px,32px);line-height:1.2;color:#fff;
	margin:0 0 12px;text-transform:none}
.ts .ts-reel-cell p{font-size:var(--ts-t-small);line-height:1.7;
	color:var(--ts-on-dark-2);margin:0 0 clamp(22px,2vw,36px)}
.ts .ts-reel-cell .ts-plan{width:clamp(88px,6vw,120px);margin:0 0 20px}
/* The fallback for a service added in the dashboard that the writer has no
   drawn plan for: its uploaded icon, at the same weight as the drawings. */
.ts .ts-reel-img{display:block;width:52px;height:52px;object-fit:contain;
	margin:0 0 20px;filter:grayscale(1) brightness(2.2);opacity:.7}
.ts .ts-reel-go{margin-top:auto;font-family:"Overpass",sans-serif;font-weight:700;
	font-size:11px;letter-spacing:.14em;text-transform:uppercase;
	color:var(--ts-green);display:flex;align-items:center;gap:10px}
[dir="rtl"] .ts .ts-reel-go{letter-spacing:0;text-transform:none;font-size:13px}
.ts .ts-reel-go::after{content:"";width:20px;height:1px;background:var(--ts-green);
	transition:width .3s ease}
.ts .ts-reel-cell:hover .ts-reel-go::after{width:38px}
/* The scroller's own controls. A horizontal region that can only be reached
   by swiping is a horizontal region half the visitors never see. */
.ts .ts-reel-nav{display:flex;gap:10px;align-items:center;
	width:var(--ts-wrap);margin:clamp(24px,2vw,40px) auto 0}
.ts .ts-reel-btn{width:46px;height:46px;flex:none;display:grid;place-items:center;
	background:transparent;border:1px solid var(--ts-line);color:#fff;
	cursor:pointer;transition:background .25s ease,border-color .25s ease}
.ts .ts-reel-btn:hover{background:rgba(255,255,255,.07);border-color:var(--ts-green)}
.ts .ts-reel-btn:focus-visible{outline:2px solid var(--ts-green);outline-offset:3px}
.ts .ts-reel-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;
	stroke-width:1.6}
[dir="rtl"] .ts .ts-reel-btn svg{transform:scaleX(-1)}
.ts .ts-reel-bar{flex:1;height:1px;background:var(--ts-line);position:relative}
.ts .ts-reel-bar span{position:absolute;inset-block:-1px;inset-inline-start:0;
	height:3px;width:20%;background:var(--ts-green);
	transition:inset-inline-start .2s linear}

/* -- 14. the matrix ------------------------------------------------------
   Seven services against the things a client actually asks who carries. The
   iMac's width earning its keep. */
.ts .ts-matrix-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ts table.ts-matrix{width:100%;border-collapse:collapse;
	font-size:var(--ts-t-small);min-width:720px}
.ts .ts-matrix th,.ts .ts-matrix td{text-align:start;padding:16px 18px;
	border-top:1px solid var(--ts-line)}
.ts .ts-matrix thead th{font-family:"Overpass",sans-serif;font-weight:700;
	font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#8b9097;
	border-top:0;vertical-align:bottom;line-height:1.4}
[dir="rtl"] .ts .ts-matrix thead th{letter-spacing:0;text-transform:none;font-size:13px}
.ts .ts-matrix tbody th{font-family:"Poppins",sans-serif;font-weight:600;
	font-size:clamp(14px,.26vw+11px,17px);color:#fff;white-space:nowrap}
.ts .ts-matrix tbody tr:hover{background:rgba(255,255,255,.035)}
.ts .ts-matrix td{color:var(--ts-on-dark-2)}
.ts .ts-mk{display:inline-block;width:10px;height:10px;
	background:var(--ts-green);border-radius:50%}
.ts .ts-mk-o{background:transparent;box-shadow:inset 0 0 0 1px #4a5058}
.ts .ts-matrix .ts-mk-cell{text-align:center;width:1%}

/* -- 15. the contact page ------------------------------------------------ */
.ts .ts-form-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
	gap:clamp(32px,4vw,96px);align-items:start}
.ts .ts-form-card{background:rgba(7,9,12,.74);backdrop-filter:blur(16px);
	-webkit-backdrop-filter:blur(14px);border:1px solid var(--ts-line);
	padding:clamp(26px,2.4vw,52px)}
@supports not (backdrop-filter:blur(4px)){.ts .ts-form-card{background:rgba(7,9,12,.93)}}
/* The theme's own form markup and validation stay exactly as they are -- the
   action, the field names, the honeypot and every data-msg-* attribute. Only
   the paint changes. */
.ts .ts-form-card .form-control{background:rgba(255,255,255,.04);
	border:1px solid var(--ts-line);border-radius:0;color:#fff;
	font-size:var(--ts-t-small);padding:15px 18px;box-shadow:none;
	transition:border-color .25s ease,background .25s ease}
.ts .ts-form-card .form-control::placeholder{color:#7d838b;opacity:1}
.ts .ts-form-card .form-control:focus{background:rgba(255,255,255,.07);
	border-color:var(--ts-green);box-shadow:none;color:#fff;outline:none}
.ts .ts-form-card textarea.form-control{min-height:140px;resize:vertical}
.ts .ts-form-card label{font-family:"Overpass",sans-serif;font-weight:700;
	font-size:11px;letter-spacing:.13em;text-transform:uppercase;
	color:#8b9097;margin-bottom:8px;display:block}
[dir="rtl"] .ts .ts-form-card label{letter-spacing:0;text-transform:none;font-size:13px}
.ts .ts-form-card .btn{background:var(--ts-green);border:0;border-radius:0;
	color:#111;font-family:"Overpass",sans-serif;font-weight:800;
	font-size:clamp(13px,.2vw+11px,15px);letter-spacing:.12em;
	text-transform:uppercase;padding:17px 44px;transition:background .25s ease}
[dir="rtl"] .ts .ts-form-card .btn{letter-spacing:0;text-transform:none;font-size:16px}
.ts .ts-form-card .btn:hover,.ts .ts-form-card .btn:focus-visible{background:#cde24e;color:#111}
.ts .ts-form-card .alert{border-radius:0;font-size:var(--ts-t-small)}
/* The theme paints validation errors a colour that disappears on the void. */
.ts .ts-form-card label.error,.ts .ts-form-card .error{color:#ff9d8a;
	font-size:13px;letter-spacing:0;text-transform:none;font-weight:600;
	margin-top:6px}
.ts .ts-form-card .form-control.error{border-color:#ff9d8a}

.ts .ts-reach{list-style:none;margin:0;padding:0}
.ts .ts-reach li{padding:clamp(18px,1.6vw,28px) 0;
	border-top:1px solid var(--ts-line)}
.ts .ts-reach li:first-child{border-top:0;padding-top:0}
.ts .ts-reach-k{display:block;font-family:"Overpass",sans-serif;font-weight:700;
	font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7d838b;
	margin-bottom:10px}
[dir="rtl"] .ts .ts-reach-k{letter-spacing:0;text-transform:none;font-size:13px}
.ts .ts-reach-v,.ts .ts-reach a{font-family:"Overpass",sans-serif;font-weight:700;
	font-size:clamp(16px,.42vw+13px,22px);line-height:1.45;color:#fff;
	text-decoration:none;transition:color .2s ease;font-style:normal}
.ts .ts-reach a:hover,.ts .ts-reach a:focus-visible{color:var(--ts-green)}
.ts .ts-reach p{font-size:var(--ts-t-small);line-height:1.7;
	color:var(--ts-on-dark-2);margin:8px 0 0}
/* The two regions ContactSyncService owns keep their own markup, because it
   rewrites them on every dashboard save and anything we put there instead
   would survive exactly until the next one. So they are restyled where they
   stand: the theme's classes, repainted for a dark surface. */
.ts .ts-form-head{margin-bottom:clamp(22px,2vw,38px)}
.ts .ts-form-head h2{font-family:"Overpass",sans-serif!important;font-weight:700!important;
	font-size:11px!important;letter-spacing:.16em;text-transform:uppercase;
	color:var(--ts-green)!important;margin:0 0 10px!important;line-height:1.6!important}
[dir="rtl"] .ts .ts-form-head h2{letter-spacing:0;text-transform:none;font-size:14px}
.ts .ts-form-head h3{font-family:"Poppins",sans-serif!important;font-weight:600!important;
	font-size:clamp(24px,1.6vw+14px,40px)!important;line-height:1.2!important;
	color:#fff!important;margin:0!important;text-transform:none;letter-spacing:-.01em}
/* The divider is a light-mode JPEG. On the void it is a grey smear. */
.ts .ts-form-head img{display:none}

.ts .ts-reach-dyn .row{margin:0;display:grid;gap:0;
	grid-template-columns:minmax(0,1fr)}
.ts .ts-reach-dyn [class*="col-"]{width:auto;max-width:none;flex:none;padding:0;
	border-top:1px solid var(--ts-line);padding-block:clamp(18px,1.6vw,28px)}
.ts .ts-reach-dyn [class*="col-"]:first-child{border-top:0;padding-top:0}
.ts .ts-reach-dyn h4{font-family:"Overpass",sans-serif!important;font-weight:700!important;
	font-size:11px!important;letter-spacing:.14em;text-transform:uppercase;
	color:#7d838b!important;margin:0 0 10px!important;line-height:1.6!important}
[dir="rtl"] .ts .ts-reach-dyn h4{letter-spacing:0;text-transform:none;font-size:13px!important}
.ts .ts-reach-dyn h4 + h4{margin-top:clamp(18px,1.6vw,26px)!important}
.ts .ts-reach-dyn a,.ts .ts-reach-dyn p{font-family:"Overpass",sans-serif;
	font-weight:700;font-size:clamp(16px,.42vw+13px,21px);line-height:1.45;
	color:#fff!important;text-decoration:none;margin:0;display:block;
	transition:color .2s ease}
.ts .ts-reach-dyn a:hover,.ts .ts-reach-dyn a:focus-visible{color:var(--ts-green)!important}
/* The theme's appear-animation leaves these at opacity 0 until its own
   observer fires. Ours already handles the reveal, and two observers racing
   for the same element is how a block ends up permanently invisible. */
.ts .ts-reach-dyn .appear-animation,.ts .ts-form-head .appear-animation{
	opacity:1!important;transform:none!important;animation:none!important}

.ts a.ts-find-link{font-family:"Overpass",sans-serif;font-weight:700;
	font-size:12px;letter-spacing:.14em;text-transform:uppercase;
	color:var(--ts-green-ink);text-decoration:none;
	display:inline-flex;align-items:center;gap:10px;
	border-bottom:1px solid currentColor;padding-bottom:3px}
[dir="rtl"] .ts a.ts-find-link{letter-spacing:0;text-transform:none;font-size:15px}
.ts a.ts-find-link:hover,.ts a.ts-find-link:focus-visible{color:var(--ts-ink)}

/* -- 15b. the theme, turned off where it fights us -------------------------
   Two of the theme's own systems have to be quietened on these pages, and
   both for the same reason: they were written for a white page.

   The loading overlay is white and covers the viewport until window.load. On
   a page whose whole point is a dark room, that is a white flash first and a
   black page second -- and because these pages fetch Three.js, the flash
   lasts as long as the download. It is painted the void colour instead, which
   also makes the theme's own page transition fade through the right colour.

   The appear-animation plugin sets opacity to 0 and waits for its own
   observer. Our reveal does the same job and already ran; two observers
   racing for one element is how a block ends up permanently invisible. */
body.ts-dark-boot .loading-overlay{background:#07090c!important}
body.ts-dark-boot .loading-overlay .bounce-loader .bounce1,
body.ts-dark-boot .loading-overlay .bounce-loader .bounce2,
body.ts-dark-boot .loading-overlay .bounce-loader .bounce3{background:#bbd636!important}
.ts .appear-animation{opacity:1!important;transform:none!important;
	animation:none!important;visibility:visible!important}

/* -- 16. reveals ---------------------------------------------------------
   Added by script after first paint, so a visitor whose JavaScript never
   executes gets the completed page rather than an empty one. */
.ts-anim .ts-rise{opacity:0;transform:translateY(26px);
	transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)}
.ts-anim .ts-rise.is-in{opacity:1;transform:none}
.ts-anim .ts-stagger > *{opacity:0;transform:translateY(22px);
	transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.ts-anim .ts-stagger.is-in > *{opacity:1;transform:none}
.ts-anim .ts-stagger.is-in > *:nth-child(2){transition-delay:.07s}
.ts-anim .ts-stagger.is-in > *:nth-child(3){transition-delay:.14s}
.ts-anim .ts-stagger.is-in > *:nth-child(4){transition-delay:.21s}
.ts-anim .ts-stagger.is-in > *:nth-child(5){transition-delay:.28s}
.ts-anim .ts-stagger.is-in > *:nth-child(6){transition-delay:.35s}
.ts-anim .ts-stagger.is-in > *:nth-child(7){transition-delay:.42s}

/* -- 17. shapes ----------------------------------------------------------- */
.ts .ts-rule{height:1px;background:var(--ts-line);border:0;margin:0}
.ts .ts-stone-sec .ts-rule{background:var(--ts-line-ink)}

/* -- 18. responsive -------------------------------------------------------
   Two real breakpoints, not five. Below 992 the theatre stops competing with
   the copy: the object is centred, the scrim becomes a flat wash, and the
   acts shrink to one screen each because a phone scrolling 130svh per act is
   a phone scrolling for a minute. */
@media (max-width:1199px){
	.ts .ts-form-grid{grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,56px)}
}
@media (max-width:991px){
	.ts{--ts-col:100%}
	.ts .ts-hero-grid{grid-template-columns:minmax(0,1fr)}
	.ts .ts-cue{display:none}
	.ts .ts-act{min-height:112svh}
	.ts .ts-act-inner,.ts .ts-act-a .ts-act-inner,.ts .ts-act-b .ts-act-inner{
		justify-content:center}
	.ts-gl .ts-act-a::before,.ts-gl .ts-act-b::before,
	[dir="rtl"] .ts-gl .ts-act-a::before,[dir="rtl"] .ts-gl .ts-act-b::before{
		background:linear-gradient(to bottom,
			rgba(7,9,12,.42) 0%, rgba(7,9,12,.82) 38%, rgba(7,9,12,.88) 100%)}
	.ts .ts-act-copy{width:100%}
	.ts .ts-cta-grid{grid-template-columns:minmax(0,1fr)}
	.ts .ts-reel-cell{width:min(78vw,340px)}
	.ts .ts-chain{min-height:68svh}
}
@media (max-width:600px){
	.ts .ts-hero-facts li{min-width:50%}
	.ts .ts-reel-cell{width:min(84vw,330px)}
}
/* The iMac. Above 1500px the single-column bands become rails, which is the
   difference between "a big screen" and "a big margin". */
@media (min-width:1500px){
	.ts .ts-steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
	.ts .ts-head .ts-lede{max-width:84ch}
}

/* -- 19. reduced motion --------------------------------------------------
   Nothing moves by itself. The page is complete and still. */
@media (prefers-reduced-motion:reduce){
	.ts .ts-cue-rule::after{animation:none;transform:translateY(0)}
	.ts-anim .ts-rise,.ts-anim .ts-stagger > *{opacity:1;transform:none;
		transition:none}
	.ts-anim .ts-step svg.ts-ico path,.ts-anim .ts-step svg.ts-ico line,
	.ts-anim .ts-step svg.ts-ico circle,.ts-anim .ts-step svg.ts-ico rect,
	.ts-anim .ts-step svg.ts-ico polyline{stroke-dashoffset:0;transition:none}
	.ts .ts-act{min-height:auto}
	.ts .ts-reel-vp{scroll-snap-type:none}
	.ts .ts-reel-cell.is-near{transform:none}
	.ts-veil{transition:none}
	.ts .ts-chain-arrow{transition:none}
}

/* -- 20. the page transition ---------------------------------------------
   Where the browser has a cross-document view transition, the chain band
   genuinely continues into the next page: the void stays put and the type
   crosses over it. Where it does not, js/ti-service.js fades through
   .ts-veil instead and this block is inert. */
@media (prefers-reduced-motion:no-preference){
	@view-transition{navigation:auto}
	::view-transition-old(root){animation:ts-out .34s cubic-bezier(.4,0,1,1) both}
	::view-transition-new(root){animation:ts-in .46s cubic-bezier(0,0,.2,1) both}
}
@keyframes ts-out{to{opacity:0;transform:translateY(-3%) scale(.995)}}
@keyframes ts-in{from{opacity:0;transform:translateY(3%) scale(1.005)}}