/* service.css — the layout every service page uses. Reusable: set the copy, keep the classes. */
.sv-hero{padding-top:clamp(120px,17vh,190px);padding-bottom:clamp(40px,6vh,70px)}
.sv-hero .label{display:block;margin-bottom:18px}
.sv-hero h1{font-weight:500;font-size:clamp(40px,7vw,104px);line-height:.96;letter-spacing:-.04em;max-width:14ch}
.sv-hero .lead{color:var(--grey-1);font-size:clamp(18px,1.7vw,24px);max-width:52ch;margin-top:26px}
.sv-hero .cta{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}

/* the plain answer, set large so it reads as the page's definition */
.sv-answer{padding-block:clamp(50px,8vh,100px);border-top:1px solid var(--line)}
.sv-answer .in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:clamp(20px,4vw,60px);align-items:start}
.sv-answer h2{font-weight:500;font-size:clamp(26px,2.8vw,40px);line-height:1.05;letter-spacing:-.03em}
.sv-answer .say{font-size:clamp(20px,2.1vw,30px);line-height:1.35;letter-spacing:-.02em;font-weight:500}
.sv-answer p+p{margin-top:1em}
.sv-answer .body{color:var(--grey-1);font-size:clamp(16px,1.35vw,19px);line-height:1.6;max-width:62ch}
.sv-answer .body strong{color:var(--ink);font-weight:500}

/* two halves of a ranking explanation, or any paired idea */
.sv-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(26px,4vh,44px)}
.sv-half{background:var(--paper);border-radius:var(--r);padding:clamp(22px,2.6vw,34px)}
.sv-half.k{background:var(--ink);color:#fff}
.sv-half h3{font-weight:500;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.02em;margin-bottom:12px}
.sv-half p{font-size:15.5px;line-height:1.55;opacity:.78}
.sv-half ul{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:9px}
.sv-half li{font-size:15.5px;padding-left:18px;position:relative;opacity:.86}
.sv-half li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:2px;background:currentColor;opacity:.5}

/* numbered list of what the service includes */
.sv-list{padding-block:clamp(50px,8vh,100px);border-top:1px solid var(--line)}
.sv-list h2,.sv-steps h2,.sv-faq h2{font-weight:500;font-size:clamp(30px,4.4vw,64px);line-height:1;letter-spacing:-.035em;margin-bottom:clamp(26px,4vh,46px)}
.sv-items{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.sv-items li{display:grid;grid-template-columns:56px minmax(0,1.1fr) minmax(0,1.7fr);gap:20px;align-items:baseline;padding:22px 10px;border-bottom:1px solid var(--line);transition:padding .35s cubic-bezier(.2,.7,.2,1),background .35s}
/* when the row is a link the grid has to sit on the anchor, or the anchor
   becomes a single grid item in the 56px column and the text wraps to nothing */
.sv-items.linked li{display:block;padding:0}
.sv-items.linked li a{display:grid;grid-template-columns:56px minmax(0,1.1fr) minmax(0,1.7fr) auto;gap:20px;align-items:baseline;padding:22px 10px;transition:padding .35s cubic-bezier(.2,.7,.2,1),background .35s}
@media (hover:hover){.sv-items.linked li:hover{background:transparent}.sv-items.linked li a:hover{padding-inline:22px;background:var(--paper)}}
@media (hover:hover){.sv-items li:hover{padding-inline:22px;background:var(--paper)}}
.sv-items .i{font-size:13px;color:var(--grey-2);font-variant-numeric:tabular-nums}
.sv-items b{font-weight:500;font-size:clamp(19px,1.9vw,27px);letter-spacing:-.02em}
.sv-items span.d{color:var(--grey-1);font-size:15.5px;line-height:1.55}

/* process */
.sv-steps{padding-block:clamp(50px,8vh,100px);border-top:1px solid var(--line)}
.sv-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.sv-step{border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.6vw,34px);display:grid;align-content:start;gap:12px}
.sv-step small{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-1)}
.sv-step h3{font-weight:500;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.025em}
.sv-step p{color:var(--grey-1);font-size:15.5px;line-height:1.55}

/* one figure, stated plainly */
.sv-proof{padding-block:clamp(50px,8vh,100px);border-top:1px solid var(--line)}
.sv-proof .in{background:var(--ink);color:#fff;border-radius:var(--r);padding:clamp(28px,4vw,60px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center}
.sv-proof b{display:block;font-weight:500;font-size:clamp(56px,8vw,130px);letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums}
.sv-proof small{display:block;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-2);margin-bottom:18px}
.sv-proof p{color:var(--grey-2);font-size:clamp(16px,1.4vw,20px);line-height:1.55}
.sv-proof .note{display:block;margin-top:14px;font-size:13.5px;color:var(--grey-1)}

/* faq: native disclosure, so it works with no script at all */
.sv-faq{padding-block:clamp(50px,8vh,100px);border-top:1px solid var(--line)}
.sv-faq dl{margin:0;border-top:1px solid var(--line)}
.sv-faq details{border-bottom:1px solid var(--line)}
.sv-faq summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;gap:20px;align-items:baseline;justify-content:space-between;font-weight:500;font-size:clamp(18px,1.8vw,24px);letter-spacing:-.015em}
.sv-faq summary::-webkit-details-marker{display:none}
.sv-faq summary::after{content:"+";font-size:22px;line-height:1;color:var(--grey-1);transition:transform .3s;flex:none}
.sv-faq details[open] summary::after{transform:rotate(45deg)}
.sv-faq summary:focus-visible{outline:2px solid var(--peri);outline-offset:3px}
.sv-faq .a{padding:0 0 24px;color:var(--grey-1);font-size:clamp(16px,1.3vw,18px);line-height:1.6;max-width:70ch}
.sv-faq .a p+p{margin-top:.9em}

@media (max-width:860px){
  .sv-items.linked li a{grid-template-columns:34px minmax(0,1fr);gap:6px 14px}
  .sv-items.linked li a span.d{grid-column:2}
  .sv-items.linked li a span.a{display:none}
  .sv-answer .in{grid-template-columns:minmax(0,1fr)}
  .sv-pair,.sv-grid3,.sv-proof .in{grid-template-columns:minmax(0,1fr)}
  .sv-items li{grid-template-columns:34px minmax(0,1fr);gap:6px 14px}
  .sv-items span.d{grid-column:2}
}

/* related services, so every page links on to its neighbours */
.sv-rel{padding-block:clamp(40px,6vh,80px);border-top:1px solid var(--line)}
.sv-rel h2{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-1);font-weight:400;margin-bottom:22px}
.sv-rel ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.sv-rel a{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:999px;padding:11px 18px;font-size:15px;transition:border-color .25s,background .25s}
.sv-rel a:hover{border-color:var(--ink);background:var(--paper)}
.sv-rel a::after{content:"→";color:var(--grey-1)}

/* services hub */
.hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.hub-col{border-radius:var(--r);padding:clamp(24px,3vw,44px)}
.hub-col.k{background:var(--ink);color:#fff}
.hub-col.w{background:var(--paper)}
.hub-col>span{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.hub-col h2{font-weight:500;font-size:clamp(30px,4vw,56px);line-height:1;letter-spacing:-.035em;margin:10px 0 8px}
.hub-col>p{font-size:15.5px;opacity:.75;max-width:40ch;margin-bottom:22px}
.hub-col ul{list-style:none;padding:0;margin:0;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.hub-col li a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:15px 0;border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.hub-col li b{font-weight:500;font-size:clamp(17px,1.5vw,21px);letter-spacing:-.015em}
.hub-col li em{font-style:normal;opacity:.65;font-size:14.5px;display:block;margin-top:3px}
.hub-col li a span{opacity:.6}
@media (hover:hover){.hub-col li a:hover span{transform:translateX(4px)}}
.hub-col li a span{transition:transform .3s}
@media (max-width:860px){.hub-grid{grid-template-columns:minmax(0,1fr)}}

/* ---- optional visual layer -------------------------------------------------
   Cutouts come from Riithink's own brand film, so they are grayscale halftone
   on a flat ground. Rather than cutting alpha masks, each one is laid over a
   matching ground and blended: screen drops black, multiply drops white. */
.cut{pointer-events:none;user-select:none}

/* hero with a piece of art beside the type */
.sv-hero.has-art .in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.sv-art{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:relative;aspect-ratio:4/5;display:grid;place-items:center}
.sv-art img{position:absolute;inset:-4%;width:108%;height:108%;object-fit:contain;-webkit-mask-image:radial-gradient(ellipse 72% 76% at 50% 48%,#000 62%,transparent 97%);mask-image:radial-gradient(ellipse 72% 76% at 50% 48%,#000 62%,transparent 97%)}

/* a halftone dot ground, the same screen the brand film uses */
.sv-ground{position:relative;isolation:isolate}
.sv-ground::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(circle,rgba(11,13,14,.085) 1.1px,transparent 1.3px);background-size:9px 9px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}

/* evidence: the work itself, two up */
.sv-eviq{padding-block:clamp(50px,8vh,100px);border-top:1px solid var(--line)}
.sv-eviq h2{font-weight:500;font-size:clamp(30px,4.4vw,64px);line-height:1;letter-spacing:-.035em;margin-bottom:10px}
.sv-eviq .sub{color:var(--grey-1);max-width:52ch;margin-bottom:clamp(26px,4vh,44px)}
.sv-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:clamp(14px,2vw,24px);align-items:start}
.sv-shot{display:grid;gap:12px}
.sv-shot .m{border-radius:22px;overflow:hidden;background:var(--ink-2);position:relative}
.sv-shot .m img,.sv-shot .m video{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);transition:filter .7s}
.sv-shot .m.on img,.sv-shot .m.on video{filter:none}
@media (hover:hover){.sv-shot:hover .m img,.sv-shot:hover .m video{filter:none}}
.sv-shot.sq .m{aspect-ratio:1/1}
.sv-shot.wide .m{aspect-ratio:16/10}
.sv-shot figcaption{font-size:14.5px;color:var(--grey-1)}
.sv-shot figcaption b{color:var(--ink);font-weight:500;display:block}
/* A+ pages: three tall frames. The image is the whole page; the frame shows
   the top, then rolls to the bottom once it is on screen, which is how a
   shopper meets it. 100cqh is the frame's own height, so the roll always ends
   exactly at the last module whatever the page length. */
.sv-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);align-items:start}
.sv-shot.ap .m{aspect-ratio:3/4;container-type:size;background:var(--paper)}
.sv-shot.ap .m img{position:absolute;left:0;top:0;width:100%;height:auto;object-fit:unset}
.sv-shot.ap .m.on img{animation:aproll 14s cubic-bezier(.4,0,.6,1) 1.2s forwards}
@keyframes aproll{to{transform:translateY(calc(100cqh - 100%))}}
body.paused .sv-shot.ap .m.on img{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.sv-shot.ap .m.on img{animation:none}}
@media (max-width:700px){
  /* one row to swipe through, so three tall panels do not stack into a wall */
  .sv-three{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);gap:12px;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scrollbar-width:none}
  .sv-three::-webkit-scrollbar{display:none}
  .sv-three .sv-shot{flex:0 0 min(78%,320px);scroll-snap-align:start}
}
/* platform marks under the work grid: glyph plus name, pill-shaped like the buttons */
.sv-plat{list-style:none;margin:clamp(18px,3vh,28px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 14px}
.sv-plat a{display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 12px;border:1px solid var(--line);border-radius:999px;font-size:14px;color:var(--ink);transition:border-color .25s}
.sv-plat a:hover{border-color:var(--ink)}
.sv-plat img{width:22px;height:22px;display:block}
@media (max-width:860px){
  .sv-hero.has-art .in{grid-template-columns:minmax(0,1fr)}
  /* the cutouts are portrait, so a wide panel would crop them to nothing */
  .sv-art{aspect-ratio:4/3;order:-1}
  .sv-art img{inset:0;width:100%;height:100%}
  .sv-two{grid-template-columns:minmax(0,1fr)}
}

/* the world map on /locations/ -------------------------------------------- */
/* The dot grid is a static SVG generated by make_map.mjs; the arcs sit over it
   in the same viewBox, using the coordinates dotted-map reported for each city,
   so a pin cannot drift off its country. */
.geo{padding-block:clamp(40px,7vh,86px) clamp(46px,8vh,96px);border-top:1px solid var(--line)}
.geo .top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(18px,4vw,60px);align-items:end}
.geo h2{font-weight:500;font-size:clamp(28px,3.6vw,52px);line-height:1.04;letter-spacing:-.03em;margin-top:14px}
.geo .top p{color:var(--grey-1);max-width:52ch}
.geo figure{margin:clamp(20px,3.5vh,40px) 0 0}
.geo figcaption{margin-top:14px;font-size:13.5px;color:var(--grey-2);text-align:center}

.geo-map{position:relative;aspect-ratio:154/78;max-width:1180px;margin-inline:auto;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 90%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 90%,transparent)}
.geo-dots,.geo-arcs{position:absolute;inset:0;width:100%;height:100%}
.geo-dots{object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none}
.geo-arcs stop{stop-color:var(--acc)}
.geo-arc{fill:none;stroke:url(#geoline);stroke-width:.34;stroke-linecap:round}
.geo-pin{fill:var(--acc)}
.geo-home{fill:var(--ink)}
.geo-home-ring{fill:none;stroke:var(--acc);stroke-width:.28;opacity:0;
  transform-box:fill-box;transform-origin:center}

/* Without JavaScript the map is simply finished: the routes are the content, so
   they must never depend on an observer that may not run. */
.js .geo-arc{stroke-dasharray:1;stroke-dashoffset:1}
.js .geo-pin{opacity:0}
.geo-map.on .geo-arc{animation:geo-draw 1.15s cubic-bezier(.3,.7,.3,1) forwards;animation-delay:calc(var(--i)*.13s)}
.geo-map.on .geo-pin{animation:geo-pin .4s ease-out forwards;animation-delay:calc(var(--i)*.13s + .9s)}
.geo-map.on .geo-home-ring{animation:geo-ring 2.6s ease-out .3s infinite}
@keyframes geo-draw{to{stroke-dashoffset:0}}
@keyframes geo-pin{to{opacity:1}}
@keyframes geo-ring{0%{opacity:.6;transform:scale(.7)}70%,100%{opacity:0;transform:scale(3.6)}}

/* the pause control and prefers-reduced-motion both land here: show the finished
   map rather than an empty one. These have to out-specify the .geo-map.on rules
   above, which is why .geo-map.on is repeated rather than dropped. */
body.paused .geo-map.on .geo-arc{animation:none;stroke-dashoffset:0}
body.paused .geo-map.on .geo-pin{animation:none;opacity:1}
body.paused .geo-map.on .geo-home-ring{animation:none;opacity:0}

/* the closing call to action, so the section does not hand the reader straight
   to the footer with nothing to do */
.geo-cta{margin-top:clamp(26px,4.5vh,50px);display:flex;gap:clamp(16px,3vw,40px);
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.geo-cta p{font-size:clamp(19px,2vw,28px);font-weight:500;letter-spacing:-.02em;max-width:24ch}
.geo-cta .cta{display:flex;gap:10px;flex-wrap:wrap}

@media (max-width:860px){
  .geo .top{grid-template-columns:minmax(0,1fr);align-items:start;gap:14px}
  .geo-map{-webkit-mask-image:none;mask-image:none}
  /* thin strokes and half-point dots vanish on a phone; scale rather than set
     `r`, which only lands as a CSS property in newer browsers */
  .geo-arc{stroke-width:.55}
  .geo-pin,.geo-home{transform-box:fill-box;transform-origin:center;transform:scale(1.5)}
}

/* sub-groups inside a hub column. The development services were invisible
   because they sat unlabelled in the middle of the e-commerce list. */
.hub-sub{font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.55;
  font-weight:500;margin:26px 0 10px}
.hub-col>h3.hub-sub:first-of-type{margin-top:0}
.hub-col ul+.hub-sub{margin-top:30px}