/* The kind "service" (work order 46): the approved sample's content area (server-code/sample-page/files/sample.css),
   every rule scoped to the content wrapper .svc so that the theme's header, menu and footer keep their own look.
   Left out, because the theme owns them: the fonts, :root, the base rules (*, html, body, img, a, h1-h3, p,
   :focus-visible), the skip link, the header and menu (.hd, .nav, .menu), the footer (.ft) and the cookie strip (.ck).
   The sample's colours equal the theme's; only its corner size --r is set here. The sample's own widths (900 and
   1180 px) are kept, so the content behaves as the approved sample does. Loaded only on pages of this kind.
   Work order 49: the grounds that belong to a range's colours are variables, printed by the theme for a page or
   product whose file names a range (brand.php "ranges"); without one, each falls back to its value of work order 46:
   --tint-from, --tint-to (strip, card and picture grounds), --alt-from, --alt-to (alternate section), --ghost
   (outline button), --bold-from, --bold-to (bold panels), --ring, --pick (buying box). --wash is the theme's.
   The looks approved on 11 October 2026 follow at the end. The kind also serves a product made from a file. */
.svc{--r:22px}
.svc .w{max-width:1200px;margin:0 auto;padding:0 24px}
.svc .eb{font:700 12.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--deep);margin:0 0 10px}
.svc .sub{color:var(--mute);max-width:62ch;margin-bottom:28px}
.svc .grad{background:linear-gradient(100deg,var(--ba),var(--bb));-webkit-background-clip:text;background-clip:text;color:transparent}
.svc .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:14px 26px;border:0;border-radius:16px;font:700 16px var(--body);color:#fff;text-decoration:none;cursor:pointer;background:linear-gradient(120deg,var(--ba),var(--bb));box-shadow:0 12px 28px -10px var(--a),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .25s,box-shadow .25s}
.svc .btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s}
.svc .btn:hover,.svc .btn:focus-visible{transform:translateY(-3px);box-shadow:0 20px 36px -10px var(--a),inset 0 1px 0 rgba(255,255,255,.45)}
.svc .btn:hover::after,.svc .btn:focus-visible::after{transform:translateX(120%)}
.svc .btn .ar{transition:transform .25s}
.svc .btn:hover .ar{transform:translateX(5px)}
.svc .btn.ghost{color:var(--ink);background:linear-gradient(var(--ghost,#F6FAFF),var(--ghost,#F6FAFF)) padding-box,linear-gradient(120deg,var(--a),var(--b)) border-box;border:2px solid transparent;box-shadow:none}
.svc .btn.ghost:hover{box-shadow:0 14px 28px -14px var(--a)}
.svc .btn.white{background:#fff;color:var(--ink);box-shadow:0 14px 30px -12px rgba(0,0,0,.45)}
.svc .more{display:flex;align-items:center;justify-content:center;min-height:44px;text-align:center;margin-top:4px;font-size:14.5px}
.svc .hero{position:relative;overflow:hidden;background:var(--wash)}
.svc .hero::before,.svc .hero::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;animation:drift 16s ease-in-out infinite alternate}
.svc .hero::before{width:420px;height:420px;background:var(--a);top:-160px;left:-80px}
.svc .hero::after{width:380px;height:380px;background:var(--b);bottom:-180px;left:34%;animation-delay:-7s}
@keyframes drift{to{transform:translate(50px,30px) scale(1.12)}}
.svc .hero .w{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center;padding-top:64px;padding-bottom:64px}
.svc .hero .pic{border-radius:32px;overflow:hidden;box-shadow:0 40px 80px -40px var(--bb);aspect-ratio:4/5}
.svc .hero .pic img{width:100%;height:100%;object-fit:cover;object-position:center 28%}
.svc .lead{font-size:19px;color:var(--mute);max-width:44ch;margin-bottom:22px}
.svc .pill{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:999px;background:var(--glass);border:1px solid #fff;font-weight:700;font-size:14px;box-shadow:0 8px 22px -14px var(--a)}
.svc .stars{color:#F5A800;letter-spacing:2px}
.svc .row{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px}
.svc .figs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px}
.svc .fig{background:var(--glass);border:1px solid #fff;border-radius:18px;padding:14px 16px}
.svc .fig b{display:block;font:800 24px var(--disp);line-height:1.1}
.svc .fig span{font-size:12.5px;font-weight:700;color:var(--mute)}
.svc .strip{background:linear-gradient(90deg,var(--tint-from,#E3F8FB),var(--tint-to,#E8ECFF));font-size:13.5px;font-weight:700}
.svc .strip .w{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.svc .sec{padding:56px 0}
.svc .sec.alt,.svc .fkit-sec.alt{background:linear-gradient(180deg,var(--alt-from,#FBFDFF),var(--alt-to,#F1F6FF))}
.svc .sec.wash{background:var(--wash)}
.svc .cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.svc .card{display:flex;flex-direction:column;background:var(--glass);border:1px solid #fff;border-radius:var(--r);overflow:hidden;box-shadow:0 18px 44px -30px var(--b);transition:transform .3s,box-shadow .3s}
.svc .card:hover{transform:translateY(-6px);box-shadow:0 30px 54px -28px var(--b)}
.svc .card.pop{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,var(--a),var(--b)) border-box}
.svc .card .im{position:relative;aspect-ratio:3/4;background:linear-gradient(135deg,var(--tint-from,#DDF4F8),var(--tint-to,#E1E6FF));overflow:hidden}
.svc .card .im img{width:100%;height:100%;object-fit:cover;object-position:center}
.svc .tag{position:absolute;top:10px;left:10px;background:var(--sun);color:var(--ink);font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.svc .card .bd{padding:16px;display:flex;flex-direction:column;flex:1}
.svc .card h3{margin-bottom:4px}
.svc .card .ln{font-size:14.5px;color:var(--mute);min-height:66px}
.svc .specs{list-style:none;margin:0 0 12px;padding:0;font-size:14px}
.svc .specs li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #EAF0F7}
.svc .specs li:last-child{border:0}
.svc .specs span{color:var(--mute);font-weight:600}
.svc .specs b{text-align:right}
.svc .price{font:800 30px var(--disp);text-align:center;margin:auto 0 12px}
.svc .price small{display:block;font:700 12px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.svc .card .btn{width:100%;min-height:50px;padding:12px;font-size:15px}
.svc .swipe{display:none}
.svc .tw{overflow-x:auto;border-radius:var(--r);border:1px solid #fff;background:var(--glass);box-shadow:0 18px 44px -30px var(--b)}
.svc table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:820px}
.svc th{text-align:left;padding:14px;color:#fff;background:linear-gradient(120deg,var(--ba),var(--bb));font-size:13px}
.svc td{padding:12px 14px;border-top:1px solid #EAF0F7;color:var(--mute);vertical-align:top}
.svc td:first-child{font-weight:800;color:var(--ink);white-space:nowrap}
.svc .two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.svc .two p{color:var(--mute)}
.svc .list{display:flex;flex-direction:column;gap:10px}
.svc .it{position:relative;background:var(--glass);border:1px solid #fff;border-radius:18px;padding:14px 16px 14px 28px;box-shadow:0 14px 34px -28px var(--b)}
.svc .it::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:5px;border-radius:5px;background:linear-gradient(180deg,var(--a),var(--b))}
.svc .it b{display:block}
.svc .it span{font-size:15px;color:var(--mute)}
.svc .fnd{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.svc .fc{background:var(--glass);border:1px solid #fff;border-radius:var(--r);overflow:hidden;box-shadow:0 18px 44px -30px var(--b);transition:transform .3s,box-shadow .3s}
.svc .fc:hover{transform:translateY(-6px);box-shadow:0 30px 54px -28px var(--b)}
.svc .fc .ph{aspect-ratio:4/5;background:linear-gradient(135deg,var(--tint-from,#DDF4F8),var(--tint-to,#E1E6FF))}
.svc .fc .ph img{width:100%;height:100%;object-fit:cover;object-position:center top}
.svc .fc .tx{padding:14px 16px 16px}
.svc .fc b{display:block;font:700 19px var(--disp)}
.svc .fc small{display:block;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--deep);margin:2px 0 6px}
.svc .fc span{font-size:14.5px;color:var(--mute)}
.svc .gw{margin-top:12px}
.svc .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.svc .chip{background:#fff;border:1px solid #E3EAF4;border-radius:999px;padding:6px 13px;font-size:13.5px;font-weight:700}
.svc .steps,.svc .revs{display:grid;gap:14px}
.svc .steps{grid-template-columns:repeat(4,1fr)}
.svc .revs{grid-template-columns:repeat(3,1fr)}
.svc .step,.svc .rev{background:var(--glass);border:1px solid #fff;border-radius:var(--r);padding:22px;box-shadow:0 18px 44px -30px var(--b)}
.svc .step small{display:block;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--deep);margin-bottom:8px;font-size:12px}
.svc .step p,.svc .rev p{color:var(--mute);font-size:15.5px;margin:0}
.svc .rev{display:flex;flex-direction:column;gap:12px}
.svc :where(.rev) .who{display:flex;gap:12px;align-items:center;border-top:1px solid #EAF0F7;padding-top:12px;margin-top:auto}
.svc .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;background:linear-gradient(135deg,var(--ba),var(--bb));flex:none}
.svc :where(.rev) .who b{display:block;font-size:14.5px}
.svc :where(.rev) .who span{font-size:13px;color:var(--mute)}
.svc :where(.rev) .who span{display:block}
.svc :where(.rev) .who span+span{font-size:12px;font-weight:700;color:var(--deep)}
.svc .bold{background:linear-gradient(125deg,var(--bold-from,#0A7C93),var(--bold-to,#2F56D6));color:#fff}
.svc .bold h2,.svc .bold .eb,.svc .bold p,.svc .bold a:not(.btn){color:#fff}
.svc .box{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);border-radius:var(--r);padding:24px;backdrop-filter:blur(12px)}
.svc .box ul{list-style:none;margin:0 0 18px;padding:0}
.svc .box li{position:relative;padding-left:22px;margin-bottom:9px}
.svc .box li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:var(--sun)}
.svc .gl{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.svc .gl a{display:block;text-decoration:none;color:var(--ink)}
.svc .faq{max-width:860px;margin:0 auto}
.svc details.q,.svc details.fold{border-radius:18px;background:var(--glass);border:1px solid #fff;box-shadow:0 14px 34px -28px var(--b);margin-bottom:10px}
.svc details.q>summary,.svc details.fold>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:56px;padding:14px 20px;font-weight:700}
.svc summary::-webkit-details-marker{display:none}
.svc details.q>summary::after,.svc details.fold>summary::after{content:"+";font:400 24px var(--disp);color:var(--deep)}
.svc details[open]>summary::after{content:"\2212"}
.svc details.q>div{padding:0 20px 16px;color:var(--mute)}
.svc details.fold>.in{padding:0 4px 4px}
.svc .last{text-align:center;padding:84px 0}
.svc .last p{max-width:56ch;margin:0 auto 22px}
.svc .bar{display:none}
@media (min-width:901px){
.svc details.fold{background:none;border:0;box-shadow:none;margin:0}
.svc details.fold>summary{display:none}
.svc details.fold>.in{padding:0}
}
@media (max-width:1180px){
.svc .cards{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
body.kind-service{padding-bottom:86px}
.svc{font-size:16px}
.svc .w{padding:0 16px}
.svc .hero .w{display:flex;flex-direction:column;gap:0;padding:0 0 26px}
.svc .hero .pic{order:-1;border-radius:0 0 28px 28px;aspect-ratio:auto;height:300px;width:100%;margin:0 0 18px;box-shadow:none}
.svc .hero .txt{padding:0 16px}
.svc h1{font-size:33px}
.svc .lead{font-size:16.5px;margin-bottom:14px}
.svc .row{flex-direction:column;gap:10px}
.svc .row .btn{width:100%}
.svc .figs{grid-template-columns:1fr 1fr;margin-top:8px}
.svc .fig b{font-size:21px}
.svc .strip .w{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;white-space:nowrap;scrollbar-width:none}
.svc .sec{padding:40px 0}
.svc .last{padding:46px 0}
.svc .sub{margin-bottom:16px}
.svc .swipe{display:block;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--deep);margin:0 0 6px}
.svc .cards,.svc .steps,.svc .revs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:6px 16px 18px;margin:0 -16px;scrollbar-width:none}
.svc .cards>*{flex:0 0 78%;scroll-snap-align:center}
.svc .steps>*,.svc .revs>*{flex:0 0 84%;scroll-snap-align:center}
.svc .card .ln{min-height:0}
.svc .two{grid-template-columns:1fr;gap:16px}
.svc .gl{grid-template-columns:1fr}
.svc .bar{position:fixed;left:10px;right:10px;bottom:10px;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 16px;border-radius:20px;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);border:1px solid #fff;box-shadow:0 18px 40px -16px rgba(15,34,51,.45)}
.svc .bar small{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.svc .bar b{font:800 18px var(--disp)}
.svc .bar .btn{min-height:48px;padding:0 20px;font-size:15px;border-radius:14px}
}
/* Work order 107: on a phone, a product page's first screen holds the heading, the price and the button. The picture
   is lower (28 per cent of the small screen height, never over 300 px; 28vh where svh is unknown), and on screens
   shorter than 800 px the rating pill is hidden: the strip under the hero carries the same line. */
@media (max-width:900px){
body.single-product .svc .hero .pic{height:min(300px,28vh);height:min(300px,28svh)}
}
@media (max-width:900px) and (max-height:799px){
body.single-product .svc .hero .pill{display:none}
}
@media (max-width:900px){
.svc .cards>*{flex:0 0 62%}
.svc .card .bd{padding:14px}
.svc .card h3{font-size:18px}
.svc .bar{transition:opacity .25s,transform .25s}
.svc .bar.off{opacity:0;transform:translateY(120%);pointer-events:none}
}
@media (prefers-reduced-motion:reduce){
.svc .btn::after{display:none}
}

/* Work order 49, part C: the looks approved on 11 October 2026, moved here from the style blocks and inline scripts of
   the page files (home-new, packages-new, portfolio-new, product-new). Word for word, except that the buying box's two
   warm colours are the roles --ring and --pick, and the rules for ".sp" (used by no file) are not moved. */
/* a. The four figures of the first screen: one short value and one short label, each on one line, centred, four
   boxes of equal size, two by two on a phone; nothing wraps (a permanent rule from Dragos). */
.svc .figs{grid-template-columns:repeat(4,minmax(0,1fr))}.svc .fig{padding:16px 8px;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:6px}.svc .fig b{font-size:19px;white-space:nowrap}.svc .fig span{display:block;font-size:12px;line-height:1.3;white-space:nowrap}@media(min-width:901px) and (max-width:1100px){.svc .fig b{font-size:17px}.svc .fig span{font-size:11px}}@media(max-width:900px){.svc .figs{grid-template-columns:repeat(2,minmax(0,1fr))}.svc .fig b{font-size:21px}.svc .fig span{font-size:13px}}
/* b. The trust strip: slides on screens up to 900 px wide, still above, and still for a visitor who asks for less
   motion. service.js makes the second copy of the items (.dup) when the file has none. */
.svc .strip .dup{display:none}
@keyframes vlm{to{transform:translateX(-50%)}}
@media(max-width:900px){.svc .strip{overflow:hidden}.svc .strip .w{overflow:visible;width:max-content;max-width:none;padding-left:0;padding-right:0;gap:0;animation:vlm 26s linear infinite}.svc .strip .w span{padding:0 16px}.svc .strip .dup{display:inline}.svc .strip:active .w{animation-play-state:paused}}
@media(max-width:900px) and (prefers-reduced-motion:reduce){.svc .strip .w{animation:none;width:auto;overflow-x:auto}.svc .strip .dup{display:none}}
/* c. The sliding picture cards of the home page and their two arrow buttons (service.js scrolls them). */
.svc .hs{position:relative}
.svc .hs-t{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 2px 14px;margin:0;scroll-behavior:smooth}
.svc .hs-t::-webkit-scrollbar{display:none}
.svc .hs-c{position:relative;flex:0 0 calc((100% - 48px)/4);aspect-ratio:3/4;border-radius:18px;overflow:hidden;scroll-snap-align:start;display:block;color:#fff;text-decoration:none;background:#0F2233;box-shadow:0 8px 24px rgba(15,34,51,.12);transition:transform .25s,box-shadow .25s}
.svc .hs-c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.svc .hs-c::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,34,51,0) 40%,rgba(15,34,51,.88) 100%)}
.svc .hs-c span{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;display:block}
.svc .hs-c b{display:block;font-family:Outfit,sans-serif;font-size:19px;line-height:1.2;color:#fff}
.svc .hs-c i{display:block;font-style:normal;font-size:14px;margin-top:4px;color:#fff;opacity:.92}
.svc .hs-c:hover,.svc .hs-c:focus-visible{transform:translateY(-4px);box-shadow:0 14px 32px rgba(15,34,51,.22)}
.svc .hs-c:hover img{transform:scale(1.06)}
.svc .hs-n{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}
.svc .hs-n button{width:44px;height:44px;border-radius:50%;border:1px solid #C9D6E6;background:#fff;color:#0F2233;font-size:20px;cursor:pointer}
.svc .hs-n button:hover{border-color:#0A7C93;color:#0A7C93}
@media(max-width:1023px){.svc .hs-c{flex-basis:calc((100% - 32px)/3)}}
@media(max-width:719px){.svc .hs-c{flex-basis:calc((100% - 16px)/2)}.svc .hs-c b{font-size:16px}.svc .hs-c i{font-size:13px}}
@media(prefers-reduced-motion:reduce){.svc .hs-t{scroll-behavior:auto}.svc .hs-c,.svc .hs-c img{transition:none}}
/* d. Four even columns of cards, and the card that says "You are here". e. The video grids, six in a row and three in a row, large. */
@media(min-width:901px){.svc .cards.c4{grid-template-columns:repeat(4,1fr)}}@media(min-width:901px) and (max-width:1100px){.svc .cards.c4{grid-template-columns:repeat(2,1fr)}}
.svc .hv .vids{grid-template-columns:repeat(6,minmax(0,1fr))}@media(max-width:1023px){.svc .hv .vids{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* e, f. Three large videos in a row; the even list of four, with its price line. */
.svc .pv .vids{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}@media(max-width:719px){.svc .pv .vids{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.svc .gl.g4{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:1023px){.svc .gl.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:519px){.svc .gl.g4{grid-template-columns:1fr}}
.svc .gl.g4 .it b i{font-style:normal;display:block;font-family:Outfit,sans-serif;font-size:24px;margin-top:2px}
/* f, g, h. The product's buying box (service.js writes the chosen price on the button), the even lists of two and
   three, "What you get" as tiles, and the box's three ticks. */
.svc .buy{background:var(--glass);border:1px solid #fff;border-radius:22px;padding:20px;margin-top:22px;box-shadow:0 18px 44px -30px var(--a)}
.svc .buy legend{font:800 15px var(--disp);padding:0;margin-bottom:12px}
.svc .buy fieldset{border:0;padding:0;margin:0}
.svc .pos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.svc .po{position:relative;display:block;cursor:pointer}
.svc .po input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.svc .po span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:74px;border-radius:14px;border:2px solid var(--ring,#DDE7F3);background:#fff;text-align:center;transition:border-color .2s,box-shadow .2s,transform .2s}
.svc .po b{font:700 13.5px var(--body);color:var(--mute);white-space:nowrap}
.svc .po i{font:800 20px var(--disp);font-style:normal;color:var(--ink)}
.svc .po:hover span{transform:translateY(-2px)}
.svc .po input:checked+span{border-color:var(--a);box-shadow:0 10px 22px -12px var(--a);background:linear-gradient(#fff,var(--pick,#F3F8FF))}
.svc .po input:focus-visible+span{outline:3px solid var(--bb);outline-offset:2px}
.svc .buy .btn{width:100%;margin-top:14px}
.svc .buy .nt{margin:12px 0 0;font-size:13px;color:var(--mute);text-align:center}
.svc .gl.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.svc .gl.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.svc .gl.g3{grid-template-columns:1fr}}
@media(max-width:719px){.svc .pos{grid-template-columns:repeat(2,minmax(0,1fr))}.svc .gl.g2{grid-template-columns:1fr}}
.svc .wg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px}
.svc .wt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:104px;padding:16px 10px;text-align:center;background:var(--glass);border:1px solid #fff;border-radius:18px;box-shadow:0 14px 34px -26px var(--a)}
.svc .wt b{font:800 20px var(--disp);line-height:1.15;color:var(--ink)}
.svc .wt span{font-size:13.5px;line-height:1.35;color:var(--mute)}
.svc .wn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.svc .wn p{margin:0;padding:14px 18px;border-radius:16px;background:rgba(255,255,255,.6);font-size:14.5px;color:var(--mute)}
.svc .wn b{color:var(--ink)}
@media(max-width:900px){.svc .wg{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.svc .wt{min-height:96px}.svc .wt b{font-size:18px}.svc .wn{grid-template-columns:1fr}}
.svc :where(.buy) .tk{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:center;font-size:12.5px;font-weight:700;color:var(--ink)}
.svc :where(.buy) .tk li::before{content:"\2713";display:block;color:var(--a);font-size:15px}
.svc .card .here{display:flex;align-items:center;justify-content:center;min-height:54px;border-radius:16px;border:2px dashed var(--a);font-weight:800;font-size:14.5px;color:var(--ba)}
@media(prefers-reduced-motion:reduce){.svc .po span{transition:none}}
/* Work order 51, part A.3: from home-new's trial block, for every page of a kind: the founders on a phone (full-width
   cards, photograph on the left, words on the right) and the space under the video rows. The founders' rules are
   scoped one level deeper (.svc .fkit) than in the block: this file loads before the plugin's own stylesheet, whose
   equally specific rules would otherwise win, as the block won by coming last. */
@media(max-width:719px){.svc .fkit .fnd{grid-template-columns:1fr;gap:12px}.svc .fkit .fc{display:grid;grid-template-columns:118px minmax(0,1fr);align-items:stretch}.svc .fkit .fc .ph{aspect-ratio:auto;min-height:136px}.svc .fkit .fc .tx{align-self:center;padding:14px 16px}}
.svc .hv .fkit-vids,.svc .pv .fkit-vids{padding:6px 0 0}
/* Work order 52, point 10: the buying box's three ticks (.tk) and a review's author row (.who) were written for the
   whole content area, and also reached the round tick of the contact and digital products pages' thank-you panels and
   the digital products sign-up's choice cards. They are now scoped to the buying box (.buy) and the review card (.rev)
   with :where(), which adds no weight, so that the buying box and the reviews win and lose exactly as before. */
/* Work order 54, the extras of decision 103. The key facts block: its tiles (.kf) and the list of plain facts under them
   (.kd). From content/about-facts-new, word for word. */
.svc .kf .wg{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:24px}
.svc .kf .wt{min-height:112px}
.svc .kf .wt b{font-size:clamp(24px,3vw,32px);white-space:nowrap;font-variant-numeric:tabular-nums}
.svc .kf .wt span{font-size:14px;white-space:nowrap}
.svc .kd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px;margin:26px 0 0;background:var(--glass);border:1px solid #fff;border-radius:22px;padding:10px 24px;box-shadow:0 18px 44px -32px var(--b)}
.svc .kd div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;padding:13px 0;border-bottom:1px solid #E3EAF4}
.svc .kd dt{font:800 11.5px/1.5 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--deep);padding-top:2px}
.svc .kd dd{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink)}
.svc .kd dd a{color:var(--deep);font-weight:700}
.svc .kd div:nth-last-child(-n+2){border-bottom:0}
@media(max-width:900px){.svc .kd{grid-template-columns:1fr;padding:6px 18px}.svc .kd div:nth-last-child(2){border-bottom:1px solid #E3EAF4}}
@media(max-width:719px){.svc .kf .wg{grid-template-columns:repeat(2,minmax(0,1fr))}.svc .kd div{grid-template-columns:1fr;gap:2px}}
/* Comparing two plans on a phone (.c2p, built by service.js from a comparison table inside a .fold with at least three
   plans; .c2all is its link to the whole table; .has2 hides the table on a phone). From content/compare-new, word for word. */
.svc .c2p{display:none;margin:18px 0 6px}
.svc .c2p .pk2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;position:sticky;top:calc(var(--hd,56px) + 6px);z-index:5;background:var(--page,#FBFDFF);padding:8px 0 10px}
.hd.away~main .svc .c2p .pk2{top:6px}
.svc .c2p label{display:block;font:800 11px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--deep);margin-bottom:5px}
.svc .c2p select{width:100%;min-height:48px;font:700 16px var(--body);color:var(--ink);background:#fff;border:1.5px solid #D5DFEC;border-radius:12px;padding:8px 10px}
.svc .c2p .pr{display:block;font:800 24px var(--disp);margin-top:8px;text-align:center}
.svc .c2p .pr small{display:block;font:700 11.5px var(--body);color:var(--mute)}
.svc .c2p .rw{background:var(--glass);border:1px solid #fff;border-radius:16px;padding:12px 14px;margin-bottom:8px;box-shadow:0 14px 34px -28px var(--b)}
.svc .c2p .rw small{display:block;text-align:center;font:800 11px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--deep);margin-bottom:8px}
.svc .c2p .rw div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;text-align:center;font-size:15px;line-height:1.35}
.svc .c2p .rw.df{border-color:var(--a);background:#fff}
.svc .c2p .rw.df b{font-weight:800}
.svc .c2p .rw:not(.df) span{color:var(--mute)}
.svc .c2p .sm{display:flex;align-items:center;gap:8px;justify-content:center;font-size:14px;color:var(--mute);margin:12px 0}
.svc .c2p .sm input{width:20px;height:20px;accent-color:var(--ba)}
@media(max-width:719px){.svc .c2p{display:block}.svc .fold.has2{display:none}.svc .c2all{display:block;text-align:center;margin-top:6px;font-weight:700}}
.svc .c2all{display:none}

/* Work order 119, A (decision 194): no grid leaves a lone card. In each width range where a grid has N columns, it is
   laid on L units (60 for five, 12 for four, 6 for three, 2 for two); a card takes L/N and the cards of a short last row
   share the width; a lone .card is drawn across the row, its picture on the left at 4:5. Generated (work order 119). */
@media (min-width:1181px){
.svc .cards:not(.c4){grid-template-columns:repeat(60,minmax(0,1fr))}
.svc .cards:not(.c4)>*{grid-column:span 12}
.svc .cards:not(.c4)>:nth-child(5n+1):nth-last-child(1),.svc .cards:not(.c4)>:nth-child(5n+1):nth-last-child(1)~*{grid-column:span 60}
.svc .cards:not(.c4)>:nth-child(5n+1):nth-last-child(2),.svc .cards:not(.c4)>:nth-child(5n+1):nth-last-child(2)~*{grid-column:span 30}
.svc .cards:not(.c4)>:nth-child(5n+1):nth-last-child(3),.svc .cards:not(.c4)>:nth-child(5n+1):nth-last-child(3)~*{grid-column:span 20}
.svc .cards:not(.c4)>:nth-child(5n+1):nth-last-child(4),.svc .cards:not(.c4)>:nth-child(5n+1):nth-last-child(4)~*{grid-column:span 15}
.svc .cards:not(.c4)>.card:nth-child(5n+1):last-child{flex-direction:row}
.svc .cards:not(.c4)>.card:nth-child(5n+1):last-child>.im{flex:0 0 min(320px,36%);aspect-ratio:4/5;height:auto}
.svc .cards:not(.c4)>.card:nth-child(5n+1):last-child>.bd{justify-content:center}
}
@media (min-width:901px) and (max-width:1180px){
.svc .cards:not(.c4){grid-template-columns:repeat(6,minmax(0,1fr))}
.svc .cards:not(.c4)>*{grid-column:span 2}
.svc .cards:not(.c4)>:nth-child(3n+1):nth-last-child(1),.svc .cards:not(.c4)>:nth-child(3n+1):nth-last-child(1)~*{grid-column:span 6}
.svc .cards:not(.c4)>:nth-child(3n+1):nth-last-child(2),.svc .cards:not(.c4)>:nth-child(3n+1):nth-last-child(2)~*{grid-column:span 3}
.svc .cards:not(.c4)>.card:nth-child(3n+1):last-child{flex-direction:row}
.svc .cards:not(.c4)>.card:nth-child(3n+1):last-child>.im{flex:0 0 min(320px,36%);aspect-ratio:4/5;height:auto}
.svc .cards:not(.c4)>.card:nth-child(3n+1):last-child>.bd{justify-content:center}
}
@media (min-width:1101px){
.svc .cards.c4{grid-template-columns:repeat(12,minmax(0,1fr))}
.svc .cards.c4>*{grid-column:span 3}
.svc .cards.c4>:nth-child(4n+1):nth-last-child(1),.svc .cards.c4>:nth-child(4n+1):nth-last-child(1)~*{grid-column:span 12}
.svc .cards.c4>:nth-child(4n+1):nth-last-child(2),.svc .cards.c4>:nth-child(4n+1):nth-last-child(2)~*{grid-column:span 6}
.svc .cards.c4>:nth-child(4n+1):nth-last-child(3),.svc .cards.c4>:nth-child(4n+1):nth-last-child(3)~*{grid-column:span 4}
.svc .cards.c4>.card:nth-child(4n+1):last-child{flex-direction:row}
.svc .cards.c4>.card:nth-child(4n+1):last-child>.im{flex:0 0 min(320px,36%);aspect-ratio:4/5;height:auto}
.svc .cards.c4>.card:nth-child(4n+1):last-child>.bd{justify-content:center}
}
@media (min-width:901px) and (max-width:1100px){
.svc .cards.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
.svc .cards.c4>*{grid-column:span 1}
.svc .cards.c4>:nth-child(2n+1):nth-last-child(1),.svc .cards.c4>:nth-child(2n+1):nth-last-child(1)~*{grid-column:span 2}
.svc .cards.c4>.card:nth-child(2n+1):last-child{flex-direction:row}
.svc .cards.c4>.card:nth-child(2n+1):last-child>.im{flex:0 0 min(320px,36%);aspect-ratio:4/5;height:auto}
.svc .cards.c4>.card:nth-child(2n+1):last-child>.bd{justify-content:center}
}
@media (min-width:901px){
.svc .steps{grid-template-columns:repeat(12,minmax(0,1fr))}
.svc .steps>*{grid-column:span 3}
.svc .steps>:nth-child(4n+1):nth-last-child(1),.svc .steps>:nth-child(4n+1):nth-last-child(1)~*{grid-column:span 12}
.svc .steps>:nth-child(4n+1):nth-last-child(2),.svc .steps>:nth-child(4n+1):nth-last-child(2)~*{grid-column:span 6}
.svc .steps>:nth-child(4n+1):nth-last-child(3),.svc .steps>:nth-child(4n+1):nth-last-child(3)~*{grid-column:span 4}
}
@media (min-width:1101px){
.svc .revs{grid-template-columns:repeat(6,minmax(0,1fr))}
.svc .revs>*{grid-column:span 2}
.svc .revs>:nth-child(3n+1):nth-last-child(1),.svc .revs>:nth-child(3n+1):nth-last-child(1)~*{grid-column:span 6}
.svc .revs>:nth-child(3n+1):nth-last-child(2),.svc .revs>:nth-child(3n+1):nth-last-child(2)~*{grid-column:span 3}
}
@media (min-width:901px){
/* Work order 143: a one-column list (.g1) keeps its one column on a computer; it was drawn as six narrow columns. */
.svc .gl:not(.g1):not(.g2):not(.g4){grid-template-columns:repeat(6,minmax(0,1fr))}
.svc .gl:not(.g1):not(.g2):not(.g4)>*{grid-column:span 2}
.svc .gl:not(.g1):not(.g2):not(.g4)>:nth-child(3n+1):nth-last-child(1),.svc .gl:not(.g1):not(.g2):not(.g4)>:nth-child(3n+1):nth-last-child(1)~*{grid-column:span 6}
.svc .gl:not(.g1):not(.g2):not(.g4)>:nth-child(3n+1):nth-last-child(2),.svc .gl:not(.g1):not(.g2):not(.g4)>:nth-child(3n+1):nth-last-child(2)~*{grid-column:span 3}
}
@media (min-width:1024px){
.svc .gl.g4{grid-template-columns:repeat(12,minmax(0,1fr))}
.svc .gl.g4>*{grid-column:span 3}
.svc .gl.g4>:nth-child(4n+1):nth-last-child(1),.svc .gl.g4>:nth-child(4n+1):nth-last-child(1)~*{grid-column:span 12}
.svc .gl.g4>:nth-child(4n+1):nth-last-child(2),.svc .gl.g4>:nth-child(4n+1):nth-last-child(2)~*{grid-column:span 6}
.svc .gl.g4>:nth-child(4n+1):nth-last-child(3),.svc .gl.g4>:nth-child(4n+1):nth-last-child(3)~*{grid-column:span 4}
}
@media (min-width:520px) and (max-width:1023px){
.svc .gl.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
.svc .gl.g4>*{grid-column:span 1}
.svc .gl.g4>:nth-child(2n+1):nth-last-child(1),.svc .gl.g4>:nth-child(2n+1):nth-last-child(1)~*{grid-column:span 2}
}
@media (min-width:720px){
.svc .gl.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.svc .gl.g2>*{grid-column:span 1}
.svc .gl.g2>:nth-child(2n+1):nth-last-child(1),.svc .gl.g2>:nth-child(2n+1):nth-last-child(1)~*{grid-column:span 2}
}
@media (min-width:901px){
.svc .wg:not(.g3){grid-template-columns:repeat(12,minmax(0,1fr))}
.svc .wg:not(.g3)>*{grid-column:span 3}
.svc .wg:not(.g3)>:nth-child(4n+1):nth-last-child(1),.svc .wg:not(.g3)>:nth-child(4n+1):nth-last-child(1)~*{grid-column:span 12}
.svc .wg:not(.g3)>:nth-child(4n+1):nth-last-child(2),.svc .wg:not(.g3)>:nth-child(4n+1):nth-last-child(2)~*{grid-column:span 6}
.svc .wg:not(.g3)>:nth-child(4n+1):nth-last-child(3),.svc .wg:not(.g3)>:nth-child(4n+1):nth-last-child(3)~*{grid-column:span 4}
}
@media (max-width:900px){
.svc .wg:not(.g3){grid-template-columns:repeat(2,minmax(0,1fr))}
.svc .wg:not(.g3)>*{grid-column:span 1}
.svc .wg:not(.g3)>:nth-child(2n+1):nth-last-child(1),.svc .wg:not(.g3)>:nth-child(2n+1):nth-last-child(1)~*{grid-column:span 2}
}
/* Work order 121: on a phone, a product page with the length chooser shows the heading, the chooser and the "Add to
   basket" button in the first screen: the four lengths in one row of compact pills (the length above the price, 13 px,
   10 px at the sides, 44 px high, equal widths; two rows under 360 px), the hero's rating pill not shown at any height
   (the strip under the hero keeps the rating line), and a shorter space under the lead. Product pages only. */
@media (max-width:699px){
body.single-product .svc .pos{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
body.single-product .svc .po span{min-height:44px;padding:6px 10px;gap:2px;border-radius:12px}
body.single-product .svc .po b{font-size:13px;line-height:1.15;white-space:normal}
body.single-product .svc .po i{font-size:13px;line-height:1.15}
body.single-product .svc .hero .pill{display:none}
body.single-product .svc .hero .lead{margin-bottom:10px}
}
@media (max-width:359px){body.single-product .svc .pos{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Work order 122: a select in a hero's form (the UGC Monthly Plan's ranges), like the service kind's other select: full
   width, 48 px high, 16 px text, the theme's border and radius; its label above in the form's own label style. */
.svc .hero .buy .f{margin:0 0 4px}
.svc .hero .buy .f label{display:block;font:800 15px var(--disp);color:var(--ink);margin-bottom:10px}
.svc .hero .buy select.sel{display:block;width:100%;min-height:48px;font:700 16px var(--body);color:var(--ink);background:#fff;border:1.5px solid #D5DFEC;border-radius:12px;padding:8px 10px}
.svc .hero .buy select.sel:focus-visible{outline:3px solid var(--bb);outline-offset:2px}
/* Work order 123, C: a link inside a list item (.gl .it a, "See Basic" on the category pages) is at least 44 px tall
   on a phone, its words where they were (the 24 px line, 10 px taken back above and below). */
@media (max-width:719px){.svc .gl .it a{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0}}
/* Work order 125, B: a link inside a .list item ("UGC packages" in the "Which plan" list) is at least 44 px tall on a
   phone, as work order 123 made the .gl items' links, its words where they were (the office measured a 21 px line:
   11.5 px taken back above and below). */
@media (max-width:719px){.svc .list .it a{display:inline-flex;align-items:center;min-height:44px;margin:-11.5px 0}}
/* Work order 129 (decision 199): a row of videos is centred whatever its count, each video the width it has in a full
   row (the row's width less its gaps, by the columns), so a full row looks as before. .hv: six across from 1024 px,
   three from 720 to 1023 px; .pv: three across from 720 px. Under 720 px the rows are as before (the swipe row). */
@media (min-width:1024px){.svc .hv .vids{display:flex;flex-wrap:wrap;justify-content:center}.svc .hv .vids>.vid{flex:0 0 calc((100% - 5 * var(--fk-gap,14px)) / 6);min-width:0}}
@media (min-width:720px) and (max-width:1023px){.svc .hv .vids{display:flex;flex-wrap:wrap;justify-content:center}.svc .hv .vids>.vid{flex:0 0 calc((100% - 2 * var(--fk-gap,14px)) / 3);min-width:0}}
@media (min-width:720px){.svc .pv .vids{display:flex;flex-wrap:wrap;justify-content:center}.svc .pv .vids>.vid{flex:0 0 calc((100% - 36px) / 3);min-width:0}}
/* Work order 133 (decision 203): the films band. A row of long films on the range's ink, the first film large,
   the caption on the picture, the length in a corner. Only a set of wide videos is drawn this way. */
.svc .films{background:radial-gradient(70% 90% at 100% 0%,color-mix(in srgb,var(--bb) 55%,transparent),transparent 70%),radial-gradient(60% 80% at 0% 100%,color-mix(in srgb,var(--ba) 35%,transparent),transparent 70%),var(--ink);color:#fff}
.svc .films .eb{color:var(--fam-l)}
.svc .films h2{color:#fff}
.svc .films .grad{background:linear-gradient(100deg,var(--fam-l),#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.svc .films .sub{color:rgba(255,255,255,.84)}
.svc .films .fh{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:10px 48px;align-items:end;margin:0 0 28px}
.svc .films .fh h2,.svc .films .fh .sub{margin-bottom:0}
@media(max-width:899px){.svc .films .fh{grid-template-columns:1fr}}
.svc .films .fkit-vids{padding:0}
.svc .films .row{justify-content:center;margin:30px 0 0}
.svc .films .btn.ghost{color:#fff;background:transparent;border:2px solid rgba(255,255,255,.72)}
.svc .films .btn.ghost:hover,.svc .films .btn.ghost:focus-visible{background:#fff;color:var(--ink);box-shadow:none}
.svc .films .vid-play:focus-visible{outline-color:#fff}
@media(min-width:900px){
.svc .hv .vids.wide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.svc .hv .vids.wide>.vid{flex:none;width:auto;min-width:0}
.svc .hv .vids.wide.n3>.vid:first-child,.svc .hv .vids.wide.n6>.vid:first-child,.svc .hv .vids.wide.n9>.vid:first-child{grid-column:span 2;grid-row:span 2}
.svc .hv .vids.wide.n3>.vid:first-child .vid-play,.svc .hv .vids.wide.n6>.vid:first-child .vid-play,.svc .hv .vids.wide.n9>.vid:first-child .vid-play,
.svc .hv .vids.wide.n3>.vid:first-child .vid-frame,.svc .hv .vids.wide.n6>.vid:first-child .vid-frame,.svc .hv .vids.wide.n9>.vid:first-child .vid-frame{aspect-ratio:auto;flex:1 1 auto;min-height:100%}
.svc .hv .vids.wide>.vid:first-child .vid-mark{width:84px;height:84px;margin:-42px 0 0 -42px}
.svc .hv .vids.wide>.vid:first-child .vid-mark::after{left:34px;top:26px;border-width:16px 0 16px 25px}
.svc .hv .vids.wide>.vid:first-child figcaption{font-size:22px;padding:90px 26px 22px}
}
@media(min-width:600px) and (max-width:899px){.svc .hv .vids.wide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;overflow:visible;padding:0}.svc .hv .vids.wide>.vid{flex:none;width:auto;min-width:0}}
.svc .vids.wide>.vid{position:relative}
.svc .vids.wide figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:52px 16px 14px;color:#fff;font-size:15px;line-height:1.3;background:linear-gradient(180deg,rgba(8,6,12,0),rgba(8,6,12,.88) 70%);border-radius:0 0 var(--fk-r,22px) var(--fk-r,22px);pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.svc .vids.wide .vid-frame~figcaption{display:none}
.svc .vids.wide .vid-len{position:absolute;top:12px;right:12px;padding:5px 11px;border-radius:999px;background:rgba(8,6,12,.78);color:#fff;font-size:13px;font-weight:700;line-height:1.2;letter-spacing:.01em}
.svc .vids.wide .vid-play{transition:transform .3s,box-shadow .3s}
@media(hover:hover){.svc .vids.wide .vid-play:hover{transform:translateY(-4px);box-shadow:0 30px 60px -28px rgba(0,0,0,.9)}}
@media(prefers-reduced-motion:reduce){.svc .vids.wide .vid-play{transition:none}.svc .vids.wide .vid-play:hover{transform:none}}
/* Work order 134 (decision 203, continued): the films line up with the band's heading, and on a phone the six films
   are a grid, not a swipe row: the first and the last full width, the four between them two by two. */
.svc .films .fkit-vids>.w{max-width:none;padding:0}
@media(max-width:599px){
.svc .hv .vids.wide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;overflow:visible;padding:0;scroll-snap-type:none}
.svc .hv .vids.wide>.vid{flex:none;width:auto;min-width:0}
.svc .hv .vids.wide>.vid:first-child,.svc .hv .vids.wide.n2>.vid,.svc .hv .vids.wide.n4>.vid:last-child,.svc .hv .vids.wide.n6>.vid:last-child{grid-column:1/-1}
.svc .vids.wide figcaption{font-size:13px;padding:36px 12px 10px}
.svc .hv .vids.wide>.vid:first-child figcaption,.svc .hv .vids.wide.n6>.vid:last-child figcaption{font-size:15px;padding:48px 16px 14px}
.svc .vids.wide .vid-len{top:8px;right:8px;padding:3px 8px;font-size:12px}
.svc .hv .vids.wide>.vid:not(:first-child):not(:last-child) .vid-mark{width:48px;height:48px;margin:-24px 0 0 -24px}
.svc .hv .vids.wide>.vid:not(:first-child):not(:last-child) .vid-mark::after{left:19px;top:14px;border-width:10px 0 10px 15px}
}

/* Work order 153 (final reading, changes 5, 11, 12). */
/* Two buttons side by side in the opening band and the closing band keep a gap, and a gap above and below when they wrap. */
.svc .bh>.w>.btn{margin:6px 12px 6px 0}
.svc .last>.w>.btn{margin:6px 8px}
/* The four figures of the first screen: never wrapped (Dragos's rule), so from 901 to 1199 px they stand two by two, as on a phone, and every tile has a little more room inside. */
.svc .fig{padding-left:6px;padding-right:6px}
@media(min-width:901px) and (max-width:1199px){.svc .figs{grid-template-columns:repeat(2,minmax(0,1fr))}.svc .fig b{font-size:19px}.svc .fig span{font-size:12px}}
/* Reviews: from 901 to 1100 px the theme follows the plugin's two columns; its six columns now start at 1101 px (eight reviews fell into columns 0 px wide at 1024). */
@media(min-width:901px) and (max-width:1100px){.svc .revs{grid-template-columns:repeat(2,minmax(0,1fr))}.svc .revs>*{grid-column:span 1}.svc .revs>:nth-child(2n+1):last-child{grid-column:1/-1}}
/* Two choices only: two wide boxes, not two of four. */
.svc .pos:has(>.po:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
/* The events row: one video and two photographs. */
.svc .evg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:26px auto 0;max-width:960px;align-items:start}
.svc .evg figure{margin:0;min-width:0}
.svc .evg img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;object-position:center 40%;border-radius:22px;box-shadow:0 24px 54px -34px var(--bb)}
.svc .evg figcaption{margin:10px 2px 0;font-size:14px;line-height:1.45;color:var(--mute)}
.svc .evg .vids{display:grid!important;grid-template-columns:1fr!important}
.svc .evg .vids>.vid{flex:none!important;width:auto!important}
@media(max-width:719px){.svc .evg{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.svc .evg>.ev-v{grid-column:1/-1;justify-self:center;width:100%;max-width:280px}}
/* A lone last note in a two-column row of notes takes the whole row (decision 194). */
.svc .wn>:last-child:nth-child(odd){grid-column:1/-1}
/* Work order 154: two buttons in the offer box of a bold band keep a gap, and a gap above and below when they wrap. */
.svc .box>.btn{margin:6px 8px 6px 0}
/* Work order 154: the events row, the video block without its own section padding, so the video lines up with the two photographs. */
.svc .evg .fkit-vids{padding:0;margin:0}.svc .evg .fkit-vids>.w{padding:0;max-width:none}.svc .evg .vids{padding:0!important;margin:0!important}

/* Work order 165 (Dragos's phone notes, 1): a lone review is one centred card, full width on a phone, measured on a computer. */
.svc .revs>.rev:only-child{grid-column:1/-1;max-width:760px;width:100%;margin-inline:auto}
@media(max-width:900px){.svc .revs>.rev:only-child{flex:0 0 100%;max-width:none}}