/* Client results: the Lilies Home Care story told as a journey through our three services.
   A light hero with one line from Diane and a map of the three projects, then a chapter each for
   recruitment automation, the website and the bespoke software, the result with Diane's full
   testimonial, and the dark closing band. Uses the Pricing card language (white cards, green
   accents) and the service page cards. */

/* Hero: one line from Diane, with her and the Lilies logo beneath */
.hero-quote{position:relative;margin:0;padding:84px 24px 24px;border:1px solid #fff;border-radius:28px;background:#ffffff94;box-shadow:0 20px 50px #20472b0f}
.hero-quote:before{content:'“';position:absolute;top:20px;left:20px;font-size:96px;font-weight:600;line-height:1;color:#b9d8a3;pointer-events:none}
.story-page .page-hero .hero-quote blockquote{max-width:none;margin:0;font-size:22px;font-weight:500;line-height:1.3;letter-spacing:-.03em;color:#183f29;text-wrap:balance}
.hero-quote figcaption{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px;padding-top:20px;border-top:1px solid #e3ecd9}
.hero-quote-who{display:flex;align-items:center;gap:14px;font-size:13px;line-height:1.4;color:#536456}
.hero-quote-who img{flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover}
.hero-quote-who b{display:block;font-size:15px;font-weight:600;color:#205732}
.hero-quote-logo{flex:none;width:96px;height:auto}
.results-hero .hero-layout{align-items:center}
/* Sized to the copy column so the heading always sits on two lines, as on the service pages */
.results-page .hero-copy{container-type:inline-size}
.story-page.results-page .page-hero h1{font-size:clamp(30px,10.5cqi,74px);max-width:none}

/* Before and after figures */
.result-figure{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;margin:4px 0 0;font-size:22px;font-weight:600;line-height:1.1;letter-spacing:-.035em;color:#205732;white-space:nowrap}
.result-was{color:#8a988d;font-weight:500}
.result-figure svg{flex:none;width:.7em;height:.7em;fill:none;stroke:#479b20;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* The three projects as buttons: each one takes you straight to its chapter */
.story-page main>.journey-map{padding-block:8px 24px}
.journey-steps{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.journey-steps a{display:flex;align-items:center;gap:14px;height:100%;padding:12px 12px 12px 12px;border:1px solid #cfdec4;border-radius:20px;background:#fff;box-shadow:0 10px 26px rgba(20,60,35,.06);color:inherit;text-decoration:none;transition:background-color .25s,border-color .25s,box-shadow .25s,translate .3s}
.journey-icon{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#e3ecd9;transition:background-color .25s}
.journey-icon svg{width:22px;height:22px;fill:none;stroke:#205732;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
.journey-text{flex:1;min-width:0}
.journey-steps strong{display:block;font-size:17px;font-weight:600;line-height:1.25;color:#183f29;transition:color .25s}
.journey-result{display:block;margin-top:2px;font-size:14px;line-height:1.4;color:#536456;transition:color .25s}
.journey-go{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#205732;transition:background-color .25s,translate .3s}
.journey-go svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.journey-steps a:hover,.journey-steps a:focus-visible{border-color:#205732;background:#205732;box-shadow:0 16px 34px rgba(20,60,35,.18)}
.journey-steps a:hover strong,.journey-steps a:focus-visible strong{color:#fff}
.journey-steps a:hover .journey-result,.journey-steps a:focus-visible .journey-result{color:rgba(255,255,255,.78)}
.journey-steps a:hover .journey-icon,.journey-steps a:focus-visible .journey-icon{background:rgba(255,255,255,.14)}
.journey-steps a:hover .journey-icon svg,.journey-steps a:focus-visible .journey-icon svg{stroke:#fff}
.journey-steps a:hover .journey-go,.journey-steps a:focus-visible .journey-go{background:#479b20}
.journey-steps a:focus-visible{outline:2px solid #205732;outline-offset:3px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .journey-steps a:hover{translate:0 -2px}
  .journey-steps a:hover .journey-go{translate:0 2px}
}
@media(prefers-reduced-motion:reduce){.journey-steps a,.journey-steps a *{transition:none}}

/* Chapters */
.chapter{scroll-margin-top:96px}
.story-page main>.chapter-soft{background:#eef3ec}
.story-page .chapter h3,.story-page .results-voice h3{font-size:clamp(26px,2.6vw,36px);line-height:1.12;font-weight:500;letter-spacing:-.035em;color:var(--forest)}

/* A pull quote from Diane closing each chapter */
.chapter-quote{max-width:820px;margin:56px auto 0;text-align:center}
.chapter-quote blockquote{margin:0;font-size:clamp(22px,2.4vw,32px);font-weight:500;line-height:1.3;letter-spacing:-.03em;color:#183f29;text-wrap:balance}
.chapter-quote figcaption{display:inline-flex;align-items:center;gap:12px;margin-top:22px;font-size:13px;line-height:1.4;color:#536456;text-align:left}
.chapter-quote img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.chapter-quote b{display:block;font-size:15px;font-weight:600;color:#205732}

/* 01 Recruitment: Diane's recruitment quote beside the story, then before and after */
.recruitment-intro{display:grid;gap:28px;margin-bottom:40px}
.story-page .recruitment-intro .story-heading{margin-bottom:0}
.story-page .recruitment-intro .story-heading p+p{margin-top:14px}
.recruitment-quote{margin:0;padding:28px 26px;border-radius:28px;background:radial-gradient(70% 90% at 100% 0%,rgba(168,237,125,.35),transparent 65%),#e3ecd9;border:1px solid #d5e1ca}
.recruitment-quote .result-figure{margin:0;font-size:clamp(40px,4.4vw,58px);font-weight:500;letter-spacing:-.055em}
.recruitment-quote .result-was{color:#7d9180}
.recruitment-quote-context{margin:10px 0 0;font-size:14px;color:#4b644d}
.recruitment-quote blockquote{margin:22px 0 0;padding-top:20px;border-top:1px solid rgba(32,87,50,.15);font-size:16px;line-height:1.65;color:#243a2c}
.recruitment-quote figcaption{margin-top:14px;font-size:14px;font-weight:600;color:var(--forest)}

.compare{border:1px solid rgba(255,255,255,.92);border-radius:24px;background:linear-gradient(150deg,rgba(255,255,255,.9),rgba(255,255,255,.65));box-shadow:inset 0 1px 0 #fff,0 18px 44px rgba(20,60,35,.07);overflow:hidden}
.compare-head{display:none}
.compare-rows{margin:0}
.compare-row{display:grid;gap:12px;padding:22px 22px 24px}
.compare-row+.compare-row{border-top:1px solid #e6ede1}
.compare-row dt{font-size:19px;font-weight:500;letter-spacing:-.02em;line-height:1.25;color:var(--forest)}
.compare-row dd{position:relative;margin:0;padding-left:30px;font-size:15px;line-height:1.6}
.compare-row dd:before{content:'';position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background-position:center;background-repeat:no-repeat;background-size:11px}
.compare-before{color:#6a786d}
.compare-before:before{background-color:#e4e8e2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8a80' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E")}
.compare-after{color:#2f3d34;font-weight:500}
.compare-after:before{background-color:#479b20;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")}
.compare-label{display:block;margin-bottom:2px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#7d8a80}
.compare-after .compare-label{color:#479b20}

/* 02 Website: a short introduction, the old and new sites side by side, then what the new site
   does to win enquiries and be found */
.story-page .website-heading{max-width:780px;margin-bottom:36px}
.site-compare{display:grid;gap:28px}
.site-compare figure{margin:0}
.site-compare figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:12px;font-size:14px;color:#536456}
.site-compare figcaption b{font-size:18px;font-weight:600;letter-spacing:-.02em;color:#183f29}
.site-compare figure:first-child figcaption b{color:#7d8a80}
.site-compare figcaption .text-link{margin-left:auto;font-size:14px}
.site-frame{overflow:hidden;border:5px solid #000;border-radius:15px;background:#000;box-shadow:0 24px 50px #1d3f2724}
.site-frame img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}

/* One box below both screenshots, so neither group reads as belonging to one of them */
.site-gains{margin-top:48px;padding:28px 24px;border:1px solid rgba(255,255,255,.92);border-radius:24px;background:linear-gradient(150deg,rgba(255,255,255,.92),rgba(255,255,255,.7));box-shadow:inset 0 1px 0 #fff,0 18px 44px rgba(20,60,35,.06)}
.site-gain-group+.site-gain-group{margin-top:32px;padding-top:32px;border-top:1px solid #e3ecd9}
.site-gain-group ul{display:grid;gap:20px;margin:22px 0 0;padding:0;list-style:none}
.site-gain-group li{display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:start}
.site-gain-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#e3ecd9}
.site-gain-icon svg{width:20px;height:20px;fill:none;stroke:#205732;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.site-gain-group strong{display:block;font-size:16px;font-weight:600;line-height:1.3;color:#183f29}
.site-gain-group li span:not(.site-gain-icon){display:block;margin-top:4px;font-size:14.5px;line-height:1.55;color:#536456}
.story-page .chapter .site-gain-group h3{font-size:clamp(22px,2vw,27px)}

/* 03 Software: what was wrong, what we built, the features and the finance week */
.story-page .software-heading{margin-bottom:28px}
.problem-grid{display:grid;gap:12px;margin:0 0 56px;padding:0;list-style:none}
.problem-grid li{position:relative;padding:20px 22px 20px 62px;border-radius:20px;background:#fff;border:1px solid #e6ede1}
.problem-grid li:before{content:'';position:absolute;left:22px;top:21px;width:26px;height:26px;border-radius:50%;background:#f1ece6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0613f' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center/12px no-repeat}
.problem-grid strong{display:block;font-size:17px;font-weight:600;line-height:1.3;color:#183f29}
.problem-grid span{display:block;margin-top:4px;font-size:14.5px;line-height:1.55;color:#536456}

/* Black behind the screenshots, so the smoothed edge of a rotated frame shows no pale hairline */
.results-page .device-scene .browser-device,.results-page .device-scene .phone-device{background:#000}
.software-result{display:grid;gap:40px;align-items:center;margin-bottom:56px}
.software-result-copy>p{margin-top:18px;color:#4b5b4e;max-width:34em}
.software-result-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:28px 0 0;padding:0;list-style:none}
.software-result-stats li{padding:18px 16px;border-radius:18px;background:#fff;border:1px solid #e6ede1}
.software-result-stats strong{display:block;font-size:clamp(30px,3vw,40px);font-weight:600;line-height:1;letter-spacing:-.045em;color:#205732}
.software-result-stats span{display:block;margin-top:8px;font-size:13px;line-height:1.4;color:#536456}

/* These cards have no outcome line, so they line up across three rows, not four */
@supports (grid-template-rows:subgrid){.system-grid .help-card{grid-row:span 3}}
.story-page .system-grid .help-card h3{font-size:21px;font-weight:500;letter-spacing:-.025em;line-height:1.2}


/* The result: three outcomes, then Diane's full testimonial */
.outcome-heading{max-width:760px;margin:0 0 48px}
.outcome-heading h2{font-size:clamp(34px,4vw,55px);line-height:1.06;font-weight:500;letter-spacing:-.045em;text-wrap:balance}
.outcome-heading>p:last-child{margin:20px 0 0;color:#4b5b4e;max-width:38em}

/* Diane's full testimonial as a quote box of its own */
.results-voice-quote{position:relative;margin:0;padding:84px 26px 26px;border:1px solid rgba(255,255,255,.92);border-radius:28px;background:linear-gradient(150deg,rgba(255,255,255,.9),rgba(255,255,255,.6));box-shadow:inset 0 1px 0 #fff,0 20px 50px rgba(20,60,35,.07)}
.results-voice-quote:before{content:'“';position:absolute;top:22px;left:22px;font-size:96px;font-weight:600;line-height:1;color:#b9d8a3;pointer-events:none}
.results-voice-quote blockquote{position:relative;margin:0;font-size:18px;line-height:1.65;letter-spacing:-.01em;color:#243a2c}

@media(min-width:700px){
  .hero-quote{padding:96px 36px 30px}
  .hero-quote:before{top:26px;left:32px}
  .story-page .page-hero .hero-quote blockquote{font-size:27px}
  .hero-quote-logo{width:108px}
  .journey-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .compare-head{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(0,1fr);gap:32px;padding:18px 28px;border-bottom:1px solid #e6ede1;background:#f7faf4;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#7d8a80}
  .compare-head span:last-child{color:#479b20}
  .compare-row{grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start;padding:24px 28px}
  .compare-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .problem-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .results-voice-quote{padding:100px 56px 48px}
  .results-voice-quote:before{top:28px;left:52px}
  .results-voice-quote blockquote{font-size:21px}
}
@media(min-width:1000px){
  /* Recruitment and software put their picture on the left */
  .recruitment-intro{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:center;margin-bottom:48px}
  .recruitment-quote{order:-1}
  .site-gains{padding:44px 44px 48px}
  .site-gain-group ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
  .site-compare{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .software-result{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:72px}
  .software-result .device-scene{order:-1}
  /* A shorter step from the software chapter into the result */
  .story-page main>#software{padding-bottom:56px}
  .story-page main>#outcome{padding-top:56px}
  /* A tighter step from the hero into the journey */
  .story-page.results-page main>.page-hero{padding-bottom:40px}
  .story-page.results-page main>.page-hero+.section{padding-top:8px}
}
@media(max-width:480px){
  .hero-quote-logo{position:absolute;top:26px;right:22px;width:84px}
  .software-result-stats{gap:8px}
  .software-result-stats li{padding:14px 12px}
  .chapter-quote{margin-top:44px}
}
@media(prefers-reduced-transparency:reduce){.hero-quote,.results-voice-quote,.compare,.journey-steps a{background:#fbfcfa}}