/* Our services: the West Country Partners service layout, one service at a time.
   On larger screens the selector underneath switches between Automation, Software and
   Websites in one spot, without holding up scrolling. On phones the three sit side by side
   and swipe, with the same selector. Without JavaScript they stack. */
.home main>.home-services{--out:cubic-bezier(.16,1,.3,1);background:#eef3ec;color:#183f29;padding-top:120px}
.home-services h2{color:#205732}
.home-services .section-heading{margin-bottom:clamp(32px,calc((100svh - 589px) * .41),88px)}
.home-services .arrow{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.service-view{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center}
.service-view+.service-view{margin-top:88px;padding-top:88px;border-top:1px solid rgba(32,87,50,.14)}
.service-copy{display:grid;gap:20px;align-content:center;justify-items:start;min-width:0}
.home-services .service-name{margin:0;font-size:clamp(44px,4.6vw,68px);font-weight:600;line-height:1;letter-spacing:-.05em;color:#205732}
.home-services .service-blurb{max-width:35ch;margin:0;font-size:18px;line-height:1.6;color:#3d4a42}
.service-proof{display:grid;justify-items:start;gap:6px;width:100%;padding-top:18px;border-top:1px solid rgba(32,87,50,.18)}
.service-proof strong{font-size:30px;font-weight:600;line-height:1.1;letter-spacing:-.04em;color:#183f29}
.home-services .service-proof p{margin:0;font-size:14px;color:#56635a}
/* Harvey's tick line under the divider, with one supporting line beneath it. */
.home-services .service-proof--tick strong{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:#205732}
.home-services .service-tick{flex:none;width:20px;height:20px;padding:3px;border-radius:50%;background:rgba(71,155,32,.14);fill:none;stroke:#205732;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.home-services .service-proof--tick p{padding-left:28px;font-size:15px;line-height:1.6;color:#333}
/* Explore buttons share the Client results button's finish: rounder corners, a soft green gradient and shadow. */
.home-services .service-explore{min-height:56px;margin-top:6px;padding:0 28px;border-radius:16px;border-color:rgba(255,255,255,.2);background:linear-gradient(135deg,#28673d,#205732);font-size:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 24px rgba(32,87,50,.14)}
.home-services .service-explore:hover{background:var(--button)}

.service-media{display:grid;place-items:center;min-width:0}
/* All three share one showcase: a 1400 x 900 desktop and a 440 x 900 phone. */
.service-showcase{--bz:4px;--dw:.78;--pw:.17;--ov:.05;--k:.551429;--rd:16px;--rp:14px;display:flex;align-items:flex-end;justify-content:center;width:100%}
.service-device{padding:var(--bz);background:#000;box-shadow:0 24px 60px rgba(6,25,13,.28)}
.service-device img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.service-device--desktop{flex:0 1 auto;width:calc(var(--dw) * 100%);margin-bottom:calc(var(--ov) * 100%);border-radius:var(--rd)}
.service-device--desktop .service-screen{display:block;aspect-ratio:1400/900;border-radius:calc(var(--rd) - var(--bz));overflow:hidden}
.service-device--phone{flex:none;width:calc(var(--pw) * 100%);margin-left:calc(var(--ov) * -100%);border-radius:var(--rp)}
.service-device--phone .service-screen{display:block;aspect-ratio:440/900;border-radius:calc(var(--rp) - var(--bz));overflow:hidden}
/* Automation's screens are a plain green block until its screenshots are ready. */
.service-placeholder{background:linear-gradient(160deg,#2e7b1d,#205732)}

/* A quiet list of the three underneath: a green highlight slides to the service on screen
   and a hairline beneath fills across all three. */
.home-services:not(.is-tab-mode):not(.is-swipe-mode) .service-steps{display:none}
.service-steps{display:grid;justify-items:center;gap:14px;margin-top:clamp(44px,calc((100svh - 589px) * .59),128px)}
.service-steps-rail{position:relative;padding:5px;border:1px solid rgba(32,87,50,.16);border-radius:999px;background:rgba(255,255,255,.6);box-shadow:inset 0 1px 0 #fff}
.service-steps ol{position:relative;z-index:1;display:flex;gap:4px;margin:0;padding:0;list-style:none}
.service-step{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 24px;border-radius:999px;color:#3d4a42;font-size:15px;font-weight:500;letter-spacing:-.005em;line-height:1;text-decoration:none;white-space:nowrap;transition:color .45s var(--out)}
.service-step-num{font-size:12px;font-weight:600;letter-spacing:.06em;color:#64756a;font-variant-numeric:tabular-nums;transition:color .45s var(--out)}
.service-step[aria-current]{color:#fff}
.service-step[aria-current] .service-step-num{color:rgba(255,255,255,.72)}
.service-step:focus-visible{outline:2px solid #205732;outline-offset:3px}
.service-steps-thumb{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:var(--thumb-w,0);border-radius:999px;background:#205732;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 18px rgba(6,25,13,.16);transform:translateX(var(--thumb-x,5px));transition:transform .6s var(--out),width .6s var(--out)}
.service-steps-progress{width:min(100%,240px);height:2px;overflow:hidden;border-radius:2px;background:rgba(32,87,50,.14)}
.service-steps-progress span{display:block;height:100%;background:#205732;transform:scaleX(var(--progress,0));transform-origin:left;transition:transform .15s linear}
@media(hover:hover){.service-step:not([aria-current]):hover,.service-step:not([aria-current]):hover .service-step-num{color:#205732}}

/* Tab mode, switched on by site.js on wider screens: the three share one spot. */
/* The section ends 28px under the selector, as the original pinned stage did. */
.home main>.home-services.is-tab-mode{padding-bottom:28px}
.is-tab-mode .service-views{display:grid;grid-template-columns:minmax(0,1fr)}
.is-tab-mode .service-view{grid-area:1/1;margin:0;padding:0;border:0;visibility:hidden;pointer-events:none;transition:visibility 0s .6s}
.is-tab-mode .service-view.is-active{visibility:visible;pointer-events:auto;transition:visibility 0s}
/* Heading to selector fits on one screen under the navigation. The gaps above and below reach
   their full size on screens about 800px tall and shrink below that; under about 665px the
   pictures shrink too, and under 700px the text spacing tightens. */
.is-tab-mode .service-showcase{width:min(100%,calc((100svh - 322px) / var(--k)))}
@media(min-width:851px) and (max-height:700px){
  .is-tab-mode .service-copy{gap:14px}
  .is-tab-mode .service-blurb{font-size:16px}
  .is-tab-mode .service-proof{padding-top:12px}
}

/* Each service leaves in the direction you are moving and the next arrives behind it. */
.is-tab-mode .service-copy>*,.is-tab-mode .service-media{opacity:0;transform:translateY(calc(var(--dir,1) * -28px));transition:opacity .35s,transform .5s var(--out)}
.is-tab-mode .service-view.is-active .service-copy>*,.is-tab-mode .service-view.is-active .service-media{opacity:1;transform:none;transition:opacity .8s var(--out) var(--d,0s),transform 1s var(--out) var(--d,0s)}
.is-tab-mode .service-view.is-entering .service-copy>*,.is-tab-mode .service-view.is-entering .service-media{opacity:0;transform:translateY(calc(var(--dir,1) * 28px));transition:none}
.service-copy>:nth-child(2){--d:.08s}
.service-copy>:nth-child(3){--d:.16s}
.service-copy>:nth-child(4){--d:.24s}
.service-media{--d:.12s}
@media(hover:hover) and (pointer:fine){
  .is-tab-mode .service-copy>*,.is-tab-mode .service-media{filter:blur(8px);transition:opacity .35s,transform .5s var(--out),filter .35s}
  .is-tab-mode .service-view.is-active .service-copy>*,.is-tab-mode .service-view.is-active .service-media{filter:none;transition:opacity .8s var(--out) var(--d,0s),transform 1s var(--out) var(--d,0s),filter .8s var(--out) var(--d,0s)}
}

@media(min-width:851px) and (max-width:1100px){
  .home-services .service-blurb{font-size:16px}
  .service-proof strong{font-size:26px}
}

/* Swipe mode: phones. One service fills the width and the row snaps. */
.is-swipe-mode .service-views{display:flex;align-items:stretch;gap:24px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.is-swipe-mode .service-views::-webkit-scrollbar{display:none}
.is-swipe-mode .service-view{flex:0 0 100%;min-width:0;align-content:start;scroll-snap-align:start;scroll-snap-stop:always}
.is-swipe-mode .service-view+.service-view{margin-top:0;padding-top:0;border-top:0}
@media(max-width:600px){
  .service-steps-rail,.service-steps ol{width:100%}
  .service-steps li{flex:1;min-width:0}
  .service-step{width:100%;justify-content:center;gap:6px;padding:0 6px;font-size:14px}
}
@media(max-width:380px){.service-step-num{display:none}}

/* Phones: the WCP mobile arrangement, copy centred above its picture. */
@media(max-width:850px){
  .home main>.home-services{padding-top:104px}
  .home-services .section-heading{margin-bottom:40px}
  .service-steps{margin-top:24px}
  .service-view{grid-template-columns:1fr;gap:20px}
  .service-view+.service-view{margin-top:64px;padding-top:64px}
  .service-copy{gap:12px;justify-items:center;text-align:center}
  .home-services .service-blurb{margin-inline:auto}
  .service-proof{justify-items:center;padding-top:12px}
  .home-services .service-explore{margin-top:8px}
  .home-services .service-name{font-size:44px}
  .service-proof strong{font-size:24px}
  .service-showcase{--bz:3px;--dw:.8;--pw:.26;--ov:.06;--k:.556;--rd:11px;--rp:11px}
  /* Heading to selector fits on one phone screen: on shorter screens the pictures shrink,
     down to just over half their width. */
  .is-swipe-mode .service-showcase{width:clamp(55%,calc((100svh - 533px) / var(--k)),100%)}
  /* The swipe row clips the devices' shadow into a grey block, so phones show them without one. */
  .is-swipe-mode .service-device{box-shadow:none}
}
@media(min-width:601px) and (max-width:850px){.is-swipe-mode .service-showcase{width:clamp(55%,calc((100svh - 556px) / var(--k)),100%)}}
@media(max-width:600px){
  .home-services h2{font-size:34px}
  .home-services .service-name{font-size:40px}
  .home-services .service-blurb{font-size:15px;line-height:1.55}
  .service-proof strong{font-size:22px}
  .home-services .service-proof p{font-size:13px}
  .service-steps{margin-top:24px}
}
@media(max-width:850px){
  .home-services .service-proof--tick strong{justify-content:center;font-size:16px}
  .home-services .service-proof--tick p{padding-left:0;font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .service-step,.service-step-num,.service-steps-thumb,.service-steps-progress span,.is-swipe-mode .service-views,
  .is-tab-mode .service-view,.is-tab-mode .service-copy>*,.is-tab-mode .service-media,
  .is-tab-mode .service-view.is-active .service-copy>*,.is-tab-mode .service-view.is-active .service-media{transition:none!important;transform:none!important;filter:none!important}
}
/* The selector sits at the top and names the service, so each service's own heading is kept
   for screen readers only and the service is not named three times. */
/* Each service holds its hidden heading, so off-screen services on phones cannot widen the page. */
.home-services .service-view{position:relative}
.home-services .service-name{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* At the top the selector spans the section as three equal tabs, as it does on phones, and
   sits close to the copy it switches. The progress line was made for the bottom, so it is hidden. */
.home-services .section-heading{margin-bottom:24px}
.service-steps{justify-items:stretch;margin-top:0;margin-bottom:48px}
.service-steps-rail,.service-steps ol{width:100%}
.service-steps li{flex:1;min-width:0}
.service-step{width:100%;justify-content:center}
.service-steps-progress{display:none}
.home main>.home-services.is-tab-mode{padding-bottom:clamp(64px,7vw,104px)}
/* Each service is a short paragraph in the original quiet style, then its tick line with no
   divider and no line beneath, keeping Preview 1's amount of copy and space. */
.home-services .service-proof{padding-top:0;border-top:0}
.home-services .service-explore{margin-top:12px}
@media(min-width:851px){.home-services .service-proof--tick strong{font-size:20px}}
/* Small laptop windows: a slightly smaller tick line keeps the longest guarantee on one line. */
@media(min-width:851px) and (max-width:1000px){.home-services .service-proof--tick strong{font-size:18px}}
@media(min-width:851px) and (max-width:900px){.home-services .service-proof--tick strong{font-size:16px}}
/* Desktop: the paragraph is larger and a little darker so it fills its column and catches the
   eye. Its width is set in ch, so each line holds the same words and the line counts hold. */
@media(min-width:1201px){.home-services .service-blurb{font-size:21px;line-height:1.55;color:#2c3a31}}
@media(min-width:1001px) and (max-width:1200px){.home-services .service-blurb{font-size:18px;color:#2c3a31}}
@media(min-width:851px) and (max-width:1000px){.home-services .service-blurb{color:#2c3a31}}
@media(min-width:851px) and (max-width:920px){.home-services .service-blurb{font-size:15px}}
/* Phones: text, then the picture, then the button. */
@media(max-width:850px){
  .home-services .section-heading{margin-bottom:24px}
  .service-steps{margin-bottom:28px}
  .service-view{gap:14px;justify-items:center;text-align:center}
  .service-copy{display:contents}
  .home-services .service-blurb{order:1}
  .service-proof{order:2}
  .service-media{order:3;justify-self:stretch;margin-top:6px}
  .home-services .service-explore{order:4;margin-top:12px}
}