/* SMJB Implementation Group website styles, loaded after styles.css on the public pages.
   Website-only additions live here (Oct 2026 update) so styles.css stays as the Clarity Check tool expects. */
/* ===== Oct 18, 2026 update: who we help, option cards, phone booking bar ===== */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.button.secondary{background:transparent;border-color:var(--petrol);color:var(--petrol)}
.button.secondary:hover{background:var(--petrol);border-color:var(--petrol);color:var(--white)}
/* Home hero: one column, no side box. */
.home-hero.solo{grid-template-columns:1fr;padding-block:80px 76px}
.home-hero-surface.slim:before{width:16%}
.home-hero.solo>div{max-width:860px}
.home-hero.solo .actions{gap:16px}
/* Who we help: tiles (two since Nov 2, 2026; see .who-grid.two). */
.who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.who-grid article{display:flex;flex-direction:column;background:var(--oyster);border-top:3px solid var(--apricot);padding:26px 24px 26px}
.who-grid h3{font-size:17px;margin-bottom:12px}
.who-grid .pain{font-family:'DM Serif Display',Georgia,serif;font-size:21px;line-height:1.3;margin:0}
.who-grid .who-extra{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:14px;line-height:1.6}
.who-grid .who-extra a{color:var(--petrol);font-weight:600}
/* Where things slip, and what we fix: each problem beside its fix. */
.slip-list{list-style:none;padding:0;margin:40px 0 0;border-top:1px solid var(--line)}
.slip-list li{display:grid;grid-template-columns:1fr 36px 1fr;column-gap:24px;align-items:start;padding:24px 0;border-bottom:1px solid var(--line)}
.slip-problem{font-family:'DM Serif Display',Georgia,serif;font-size:22px;line-height:1.3;margin:0}
.slip-arrow{color:var(--apricot);font-size:24px;line-height:1.2;text-align:center}
.slip-fix{font-size:16px;line-height:1.65;margin:2px 0 0}
/* How we help: rows without numbers or package names. */
.service-row.plain{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) 28px}
.service-row.plain h3{font-size:18px}
/* Client Delivery System phases: one compact row. */
.phase-row{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(5,1fr);border:1px solid rgba(191,221,229,.35)}
.phase-row li{padding:16px 18px 18px;border-left:1px solid rgba(191,221,229,.35)}
.phase-row li:first-child{border-left:0}
.phase-row strong{display:block;font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:21px;line-height:1.2;color:var(--white)}
.phase-row span{display:block;font-size:13px;line-height:1.5;color:#d5e3e8;margin-top:6px}
.flagship-band .demo-grid{margin-top:56px}
.flagship-band .flagship-link{margin:26px 0 0}
/* How it starts: three steps. */
.path.three{grid-template-columns:repeat(3,1fr)}
.path-note{font-size:16px;margin:36px 0 0;max-width:820px}
/* "How it works" steps: a short terms line under each step name (Oct 24). */
.path .step-terms{margin:0 0 10px;color:var(--petrol);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
/* Practical AI: three examples. */
.ai-examples{grid-template-columns:repeat(3,1fr)}
/* Services: option cards that open in place. */
.notsure{margin-top:30px;background:rgba(255,255,255,.88);border-left:4px solid var(--apricot);padding:18px 22px;max-width:660px}
.notsure p{margin:0;font-size:15px;line-height:1.65}
.notsure p+p{margin-top:6px}
.notsure a{color:var(--petrol);font-weight:600}
.svc-section{background:var(--oyster)}
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;align-items:start}
.svc-card{background:var(--white);border:1px solid var(--line);border-top:4px solid var(--apricot);padding:28px 30px 22px}
.svc-card>h2{font-size:28px;line-height:1.2;margin:0 0 10px}
.svc-line{font-size:16px;margin:0 0 6px}
/* Services: the plain service name above each value-led card title (Oct 24). */
.svc-kind{margin:0 0 8px;color:var(--petrol);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.svc-card summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 0;cursor:pointer;list-style:none;font-size:15px;font-weight:600;color:var(--petrol)}
.svc-card summary::-webkit-details-marker{display:none}
.svc-card summary:after{content:'+';display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid var(--petrol);font-size:17px;line-height:1}
.svc-card details[open]>summary:after{content:'−'}
.svc-card summary:focus-visible{outline:3px solid var(--petrol);outline-offset:4px}
.svc-card .when-open,.svc-card details[open] .when-closed{display:none}
.svc-card details[open] .when-open{display:inline}
.svc-body{border-top:1px solid var(--line);margin-top:10px;padding:6px 0 8px}
.svc-body h3{font-size:12px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--petrol);margin:22px 0 10px}
.fit-list{list-style:none;padding:0;margin:0}
.fit-list li{position:relative;padding:6px 0 6px 24px;font-size:15px;line-height:1.6}
.fit-list li:before{content:'';position:absolute;left:0;top:17px;width:12px;height:3px;background:var(--apricot)}
.option-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.option-list li{padding:14px 0;border-bottom:1px solid var(--line)}
.option-name{font-size:16px;font-weight:600;line-height:1.5;margin:0}
.pkg{display:inline-block;margin-left:8px;padding:1px 8px;background:var(--mist);color:var(--petrol);font-size:11px;font-weight:600;letter-spacing:.06em;line-height:1.7;text-transform:uppercase;vertical-align:2px;white-space:nowrap}
.option-line{font-size:15px;line-height:1.6;margin:4px 0 0}
.option-time{font-size:13px;line-height:1.5;color:var(--petrol);margin:6px 0 0}
.option-line a{color:var(--petrol);font-weight:600}
.svc-leave{font-size:15px;margin:0}
.svc-body .button{margin-top:22px}
.svc-card .includes{font-size:15px;margin:0}
.svc-card .includes li{margin-bottom:8px}
.svc-pitch{font-size:15px;margin:0}
.spotlight-meta{font-size:14px;color:#d5e3e8;margin:18px 0 0}
.spotlight-meta a{color:var(--white)}
/* About: who we help, compact. */
.who-chips{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.who-chips li{background:var(--white);border-left:3px solid var(--apricot);padding:8px 14px;font-size:15px;line-height:1.5}
.founder-bio .credentials-list{list-style:none;padding:0;margin:22px 0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:15px;color:var(--petrol);font-weight:600}
@media(max-width:1000px){
  .who-grid{grid-template-columns:repeat(2,1fr)}
  .svc-grid{grid-template-columns:1fr}
  .phase-row{grid-template-columns:repeat(5,minmax(0,1fr))}
  .phase-row li{padding:14px 12px 16px}
  .phase-row strong{font-size:18px}
  .ai-examples{grid-template-columns:repeat(3,1fr)}
  .service-row.plain{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) 28px}
}
/* Phones: the booking bar sits above the home indicator, never covers the end of the page,
   and slides away while another booking button is on screen (assets/site.js). */
@media(max-width:860px){
  body{padding-bottom:calc(52px + env(safe-area-inset-bottom))}
  html{scroll-padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .site-header .nav-cta{min-height:calc(52px + env(safe-area-inset-bottom));padding:10px 20px calc(10px + env(safe-area-inset-bottom));font-size:15px}
  .booking-in-view .site-header .nav-cta{transform:translateY(100%);visibility:hidden}
  .booking-bar-ready .site-header .nav-cta{transition:transform .2s ease,visibility 0s linear 0s}
  .booking-bar-ready.booking-in-view .site-header .nav-cta{transition:transform .2s ease,visibility 0s linear .2s}
}
@media(max-width:720px){
  .home-hero.solo{padding-block:44px 48px}
  .home-hero.solo .actions .button{width:100%}
  .who-grid{grid-template-columns:1fr;gap:14px;margin-top:28px}
  .who-grid .pain{font-size:20px}
  .slip-list{margin-top:28px}
  .slip-list li{grid-template-columns:1fr;row-gap:10px;padding:20px 0}
  .slip-arrow{display:none}
  .slip-problem{font-size:20px}
  .slip-fix{border-left:3px solid var(--apricot);padding-left:14px;margin:0}
  .home-hero-surface.slim:before{display:none}
  .service-row.plain{grid-template-columns:1fr 28px;gap:6px 12px}
  .service-row.plain h3{grid-column:1;grid-row:1}
  .service-row.plain p{grid-column:1;grid-row:2}
  .service-row.plain>span:last-child{grid-column:2;grid-row:1}
  .phase-row{grid-template-columns:1fr}
  .phase-row li{display:grid;grid-template-columns:96px 1fr;column-gap:12px;align-items:baseline;padding:11px 14px;border-left:0;border-top:1px solid rgba(191,221,229,.3)}
  .phase-row li:first-child{border-top:0}
  .phase-row strong{font-size:18px}
  .phase-row span{margin-top:0}
  .path.three{grid-template-columns:1fr}
  .ai-examples{grid-template-columns:1fr}
  .svc-card{padding:22px 18px 16px}
  .svc-card>h2{font-size:25px}
  .svc-body .button{width:100%}
  .pkg{margin-left:0;margin-top:4px}
  .notsure{padding:16px 18px}
}
@media(prefers-reduced-motion:reduce){.booking-bar-ready .site-header .nav-cta,.booking-bar-ready.booking-in-view .site-header .nav-cta{transition:none}}
@supports(padding:max(0px)){body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}}
/* What clients say (Home): shown only once real testimonials are added; see README. */
.testimonials{margin-top:64px;border-top:3px solid var(--apricot);padding-top:32px}
.testimonials h3{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:30px;color:var(--white);margin-bottom:24px}
.testimonial{margin:0 0 28px;max-width:780px}
.testimonial blockquote{margin:0}
.testimonial blockquote p{font-size:18px;line-height:1.6;color:var(--white);margin:0 0 10px}
.testimonial figcaption{font-size:14px;color:#d5e3e8}
/* Services hero (Oct 19): a dark band with a "find your starting point" card, so Services no longer
   shares the light grid hero used on Clarity Check. */
.svc-hero{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(135deg,#164B60 0%,#143f51 55%,#172B36 100%)}
.svc-hero:before{content:'';position:absolute;inset:0 0 0 44%;z-index:-1;background-image:linear-gradient(rgba(191,221,229,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(191,221,229,.08) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%);mask-image:linear-gradient(90deg,transparent,#000 35%)}
.svc-hero:after{content:'';position:absolute;z-index:-1;left:-170px;bottom:-230px;width:460px;height:460px;border-radius:50%;border:64px solid rgba(231,175,138,.09)}
.svc-hero-inner{display:grid;grid-template-columns:1.05fr 1fr;gap:72px;align-items:center;padding-block:80px 92px}
.svc-hero h1{color:var(--white);font-size:clamp(38px,3.9vw,54px);line-height:1.1;max-width:600px;margin-bottom:24px}
.svc-hero .lead{color:#e5eef0;max-width:540px;margin:0 0 32px}
.svc-hero .call-note{color:var(--mist);font-size:14px;line-height:1.6;max-width:460px;margin:16px 0 0}
.journey{position:relative;background:var(--white);color:var(--ink);padding:30px 32px 0;box-shadow:16px 16px 0 rgba(0,0,0,.2)}
.journey:after{content:'';position:absolute;top:-17px;right:-17px;width:55px;height:55px;border-top:8px solid var(--apricot);border-right:8px solid var(--apricot)}
.journey-title{font-size:30px;line-height:1.15;margin:0 0 2px;color:var(--ink)}
.journey-sub{font-size:11px;line-height:1.6;letter-spacing:.15em;text-transform:uppercase;font-weight:600;color:var(--petrol);margin:20px 0 6px}
.journey-rail{list-style:none;margin:0;padding:0;position:relative}
.journey-rail:before{content:'';position:absolute;left:8px;top:22px;bottom:22px;width:2px;background:linear-gradient(var(--apricot),rgba(231,175,138,.35))}
.journey a{position:relative;display:block;color:var(--ink);text-decoration:none;transition:background .15s}
.journey a:hover{background:var(--oyster)}
.journey a:focus-visible{outline:3px solid var(--petrol);outline-offset:2px}
.journey .go{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--petrol);font-weight:600;transition:transform .15s}
.journey a:hover .go{transform:translate(3px,-50%)}
.journey-rail a{padding:10px 34px 10px 34px}
.journey-rail a:before{content:'';position:absolute;left:1px;top:15px;width:16px;height:16px;border-radius:50%;background:var(--white);border:3px solid var(--apricot);box-sizing:border-box}
.journey-rail li:first-child a:before{background:var(--apricot)}
.journey-rail strong{display:block;font-size:16px;line-height:1.4;font-weight:600}
.journey-rail .desc{display:block;font-size:13px;line-height:1.5;color:#4b5f68;margin-top:2px}
.journey-chips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.journey-chips a{display:flex;align-items:center;min-height:54px;padding:9px 30px 9px 14px;background:var(--oyster);border-left:3px solid var(--apricot);font-size:14px;font-weight:600;line-height:1.35}
.journey-chips a:hover{background:var(--mist)}
.journey .notsure{margin:22px -32px 0;max-width:none;background:var(--mist);border-left:0;border-top:3px solid var(--apricot);padding:16px 32px 18px}
.journey .notsure a{color:var(--petrol)}
@media(max-width:1000px){
  .svc-hero-inner{grid-template-columns:1fr;gap:52px;padding-block:60px 72px}
  .journey{max-width:640px;margin-right:17px}
  .svc-hero:before{inset:0}
}
@media(max-width:720px){
  .svc-hero-inner{padding-block:44px 56px;gap:44px}
  .svc-hero h1{font-size:34px}
  .svc-hero .lead{font-size:16px;margin-bottom:26px}
  .svc-hero .actions .button{width:100%}
  .journey{padding:24px 18px 0;margin-right:12px;box-shadow:10px 10px 0 rgba(0,0,0,.2)}
  .journey:after{top:-12px;right:-12px;width:40px;height:40px;border-width:6px}
  .journey-title{font-size:26px}
  .journey .notsure{margin:20px -18px 0;padding:14px 18px 16px}
}
@media(max-width:420px){.journey-chips{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.journey a,.journey .go{transition:none}}
.journey .notsure a{display:inline;background:none;text-decoration:underline;text-underline-offset:4px}
/* ===== Oct 23, 2026: ClickUp positioning ===== */
/* "How we build in ClickUp" label above the five phases (on the petrol flagship bands). */
.phase-label{font-size:11px;line-height:1.6;letter-spacing:.15em;text-transform:uppercase;font-weight:600;color:var(--mist);margin:34px 0 0}
.phase-label+.phase-row{margin-top:12px}
/* Services: the ClickUp section after the flagship. */
.clickup-band{background:var(--white);border-bottom:1px solid var(--line)}
.clickup-band h2{max-width:720px}
.clickup-band .lead{max-width:760px;margin-bottom:24px}
.works-line{font-size:16px;line-height:1.7;margin:0 0 12px;padding-left:16px;border-left:3px solid var(--petrol);max-width:760px}
.move-line{font-size:16px;font-weight:600;color:var(--petrol);margin:0;max-width:760px}
.also-note{font-size:14px;color:var(--petrol);margin:18px 0 0}
.journey-more{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.journey-more a{padding:8px 34px 8px 0;font-size:14px;font-weight:600;color:var(--petrol)}
.journey-more a:hover{background:transparent;text-decoration:underline}
/* Home: spots for demo screenshots and the tour video (hidden until added; see README). */
.demo-shots{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
.demo-shots figure{margin:0;background:var(--oyster);padding:10px 10px 12px}
.demo-shots img{display:block;width:100%;height:auto}
.demo-shots figcaption{font-size:13px;line-height:1.5;color:var(--ink);margin-top:10px}
.demo-video{position:relative;margin-top:40px;aspect-ratio:16/9;background:var(--ink);max-width:900px}
.demo-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-play{position:absolute;inset:0;width:100%;display:flex;align-items:center;justify-content:center;gap:12px;background:var(--ink);color:var(--white);border:0;font:600 16px/1.4 Inter,Arial,sans-serif;cursor:pointer}
.video-play:before{content:'';width:0;height:0;border-left:18px solid var(--apricot);border-top:11px solid transparent;border-bottom:11px solid transparent}
.video-play:hover,.video-play:focus-visible{background:var(--petrol)}
.video-play:focus-visible{outline:3px solid var(--apricot);outline-offset:-6px}
/* Back to top: appears once someone has scrolled down a screen (assets/site.js). On phones it sits
   above the booking bar, and the footer has room below its last line so the button never covers it. */
.to-top{position:fixed;right:max(16px,calc(env(safe-area-inset-right) + 16px));bottom:calc(24px + env(safe-area-inset-bottom));z-index:30;display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--white);color:var(--petrol);border:1px solid var(--petrol);box-shadow:4px 4px 0 rgba(0,0,0,.2);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s,background .15s,color .15s}
.to-top-on .to-top{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease,visibility 0s,background .15s,color .15s}
.to-top:hover{background:var(--petrol);color:var(--white)}
.to-top-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
footer{padding-bottom:88px}
@media(max-width:860px){.to-top{bottom:calc(64px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.to-top,.to-top-on .to-top{transition:none;transform:none}}
@media print{.to-top{display:none}}
@media(max-width:720px){
  .phase-label{margin-top:26px}
  .demo-shots{grid-template-columns:1fr}
  .works-line,.move-line{font-size:15px}
}
/* ===== Nov 2, 2026: Website Update Pack v3 (agencies and professional services firms, five ways we help).
   Layout only: every size, spacing and color below is already used elsewhere on the site. ===== */
/* Home, who we help: two tiles. */
.who-grid.two{grid-template-columns:repeat(2,1fr)}
/* Services: the onboarding card spans the row, so its three steps read left to right. */
.svc-card.wide{grid-column:1/-1}
/* Steps inside a card: the numbered steps from "How it works", joined by an arrow
   (in the gap beside the number markers; pointing down when stacked on phones). */
.path.two{grid-template-columns:repeat(2,1fr)}
.path.step-path{margin:18px 0 0}
.step-path li{position:relative}
.step-path h4{font-size:18px;line-height:1.45;font-weight:600;margin:0 0 8px}
.step-path .option-time{font-size:13px;margin-top:6px}
.step-path li:not(:last-child):after{content:'→';content:'→'/'';position:absolute;left:100%;top:22px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--apricot);font-size:24px}
@media(max-width:720px){
  .who-grid.two,.path.two{grid-template-columns:1fr}
  .step-path li:not(:last-child):after{content:'↓';content:'↓'/'';left:0;top:100%;height:36px}
}