/*
 CloudMonsta Shared Stylesheet
 V6 White Design System

 Used by:
 - Homepage
 - Service/module pages
 - Future case study pages
 - Future advice/article pages

 Keep page styling here wherever it is reusable across the site.
*/


:root{--ink:#14213d;--muted:#647084;--blue:#0f6cbd;--blue-dark:#0a5596;--blue-soft:#eef6ff;--soft:#f6f8fb;--line:#e2e7ee;--shadow:0 14px 38px rgba(24,44,78,.08);--shadow-sm:0 6px 20px rgba(24,44,78,.055)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);line-height:1.55;background:#fff}a{color:inherit;text-decoration:none}.container{width:min(1180px,calc(100% - 36px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.nav{height:76px;display:flex;align-items:center;gap:26px}.brand img{height:52px;display:block}.nav-links{display:flex;gap:24px;margin-left:auto;color:#445066;font-size:.94rem}.nav-links a{padding:27px 0;border-bottom:2px solid transparent}.nav-links a:hover{color:var(--blue);border-color:var(--blue)}.menu-toggle{display:none;border:0;background:transparent;font-size:1.5rem}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:10px;background:var(--blue);color:#fff;border:1px solid var(--blue);font-weight:800;transition:.18s}.button:hover{background:var(--blue-dark);transform:translateY(-1px)}.button.secondary{background:#fff;color:var(--blue);border-color:#bccbdd}.button.secondary:hover{background:var(--blue-soft)}.button.compact{min-height:42px;padding:0 17px;font-size:.9rem}
.hero{padding:70px 0 32px;background:linear-gradient(180deg,#fff,#fbfcfe)}.hero-grid{display:grid;grid-template-columns:1.03fr .97fr;gap:38px;align-items:stretch}.hero-copy-open{min-height:535px;padding:32px 8px 22px 0;display:flex;flex-direction:column}.hero-kicker{color:var(--blue);text-transform:uppercase;letter-spacing:.11em;font-size:.76rem;font-weight:900;margin-bottom:22px}h1,h2,h3{margin:0;line-height:1.07;letter-spacing:-.04em}h1{font-size:clamp(3.25rem,5.6vw,5.65rem);max-width:760px}.hero-copy{color:var(--muted);font-size:clamp(1.04rem,1.7vw,1.18rem);max-width:690px;margin:24px 0 0}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.hero-tags{margin-top:auto;padding-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:9px}.hero-tag{padding:13px 0;border-top:1px solid var(--line)}.hero-tag strong{display:block;font-size:.94rem}.hero-tag span{display:block;color:var(--muted);font-size:.81rem;margin-top:2px}
.specialist-card{min-height:535px;padding:40px;border:1px solid #d9e3ef;border-radius:26px;background:linear-gradient(145deg,#f8fbff,#fff);box-shadow:var(--shadow);overflow:hidden;position:relative;display:flex}.specialist-card:after{content:"";position:absolute;right:-80px;bottom:-95px;width:280px;height:280px;border-radius:50%;background:rgba(15,108,189,.07)}.specialist-top{display:flex;flex-direction:column;width:100%;position:relative;z-index:2}.specialist-label,.overline{color:var(--blue);font-size:.76rem;font-weight:900;text-transform:uppercase;letter-spacing:.11em}.specialist-card h2{font-size:clamp(2.3rem,3.4vw,3.5rem);margin-top:14px}.original-promise{font-size:clamp(1.9rem,2.8vw,2.8rem);line-height:1.04;font-weight:900;letter-spacing:-.045em;margin:27px 0 0}.original-promise span{display:block;color:var(--blue);font-size:.47em;margin-top:9px}.specialist-card .lead{color:var(--muted);margin:18px 0 0}.original-checklist{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:11px}.original-checklist li{display:grid;grid-template-columns:25px 1fr;gap:9px;align-items:center}.original-checklist li span{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);font-weight:900}.specialist-foot{margin-top:auto;padding-top:24px;border-top:1px solid var(--line)}
.hero-proofbar{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}.hero-proofbar div{padding:15px 17px;border:1px solid var(--line);border-radius:14px;background:#fff}.hero-proofbar strong{display:block}.hero-proofbar span{display:block;color:var(--muted);font-size:.82rem;margin-top:3px}
.visual-break{padding:18px 0;background:#fff}.soft-break{background:var(--soft)}.letterbox-image{height:235px;position:relative;overflow:hidden;border-radius:24px;background:#dfe8f3;box-shadow:var(--shadow-sm)}.letterbox-image img{width:100%;height:100%;object-fit:cover;object-position:center 48%;display:block;filter:saturate(.82) contrast(.98)}.letterbox-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,33,63,.72),rgba(10,33,63,.18) 52%,rgba(10,33,63,.03))}.alternate-crop img{object-position:center 63%;transform:scale(1.06)}.letterbox-caption{position:absolute;z-index:2;left:34px;bottom:30px;color:#fff;max-width:610px}.letterbox-caption span{display:block;font-size:.76rem;font-weight:900;text-transform:uppercase;letter-spacing:.12em;margin-bottom:7px;opacity:.85}.letterbox-caption strong{font-size:clamp(1.45rem,2.5vw,2.35rem);line-height:1.1;letter-spacing:-.035em}
.section{padding:68px 0}.section:nth-of-type(even){background:var(--soft)}.section-title{max-width:850px;margin-bottom:34px}.section-title .overline{margin-bottom:10px}.section-title h2{font-size:clamp(2.35rem,4vw,4rem)}.section-title p{color:var(--muted);font-size:1.06rem;margin:15px 0 0}
.tile-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:15px}.service-tile{grid-column:span 4;min-height:320px;padding:27px;border:1px solid var(--line);border-radius:18px;background:#fff;display:flex;flex-direction:column;transition:.18s}.service-tile:hover{transform:translateY(-4px);border-color:#b9ccdf;box-shadow:var(--shadow-sm)}.service-tile:nth-child(1),.service-tile:nth-child(4){grid-column:span 5}.service-tile:nth-child(2),.service-tile:nth-child(5){grid-column:span 3}.service-tile:nth-child(3),.service-tile:nth-child(6){grid-column:span 4}.tile-number{color:#66758a;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.11em}.tile-icon{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;margin:20px 0 17px;background:var(--blue-soft);color:var(--blue);font-size:1.4rem}.service-tile h3{font-size:1.45rem}.service-tile p{color:var(--muted);margin:10px 0 0}.tile-checks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:7px;color:#3d4a5e;font-size:.88rem}.tile-checks li{display:grid;grid-template-columns:17px 1fr;gap:7px}.tile-checks li:before{content:"✓";color:var(--blue);font-weight:900}
.about-wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:15px}.founder-card,.about-point,.journey-step,.why-card,.process-card,details,form{border:1px solid var(--line);background:#fff;border-radius:18px;box-shadow:var(--shadow-sm)}.founder-card{padding:30px}.founder-profile{display:flex;gap:18px;align-items:center;margin-bottom:22px}.avatar{width:112px;height:112px;border-radius:50%;overflow:hidden;flex:0 0 112px;border:2px solid var(--line)}.avatar img{width:100%;height:100%;object-fit:cover;object-position:center top;transform:scale(1.05)}.founder-meta strong{font-size:1.35rem}.founder-meta span{display:block;color:var(--blue);font-weight:800;margin-top:4px}.founder-card h2{font-size:2.35rem}.founder-card p,.about-point p,.journey-step p,.why-card p,.process-card p,.case-copy p,details p,.contact-copy p{color:var(--muted)}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.about-point{padding:23px}.about-point .icon{width:43px;height:43px;display:grid;place-items:center;border-radius:12px;background:var(--blue-soft);color:var(--blue);margin-bottom:15px}
.journey-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:11px}.journey-step,.why-card,.process-card{padding:23px}.journey-step span,.process-card span{display:block;color:var(--blue);font-size:.76rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}.case-grid{display:grid;grid-template-columns:.78fr 1.22fr;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;box-shadow:var(--shadow-sm)}.case-logo{display:grid;place-items:center;padding:40px;background:#f7f9fb}.case-logo img{max-width:100%;max-height:150px}.case-copy{padding:36px}.case-copy h2{font-size:clamp(2.25rem,4vw,3.7rem)}.quote{margin-top:22px;padding:21px;border-radius:15px;border:1px solid #d8e6f5;background:var(--blue-soft);font-size:1.06rem}.quote small{display:block;color:var(--muted);margin-top:11px}.why-grid,.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.advice-bar{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;margin-top:25px;padding:28px;border:1px solid var(--line);border-radius:18px;background:#fff}.faq{display:grid;gap:10px}details{padding:19px 21px}summary{font-weight:800;cursor:pointer}.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:26px}.contact-copy h2{font-size:clamp(2.4rem,4vw,4rem)}.contact-points{display:grid;gap:9px}.contact-points b{color:var(--blue)}form{display:grid;gap:12px;padding:23px}input,select,textarea{width:100%;font:inherit;color:var(--ink);background:#fff;border:1px solid #d2dae5;border-radius:10px;padding:14px 15px}textarea{min-height:116px;resize:vertical}
.site-footer{background:#f8fafc;border-top:1px solid var(--line)}.footer-accent{height:3px;background:linear-gradient(90deg,var(--blue),#2b88d8)}.footer-wrap{padding:46px 0 28px}.footer-brand{text-align:center;max-width:650px;margin:0 auto 38px}.footer-brand img{height:56px}.footer-brand p,.footer-columns a,.footer-columns span,.footer-bottom{color:var(--muted)}.footer-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.footer-columns a,.footer-columns span{display:block;margin:8px 0;font-size:.91rem}.footer-columns a:hover{color:var(--blue)}.footer-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:25px}.footer-badges span{padding:7px 10px;border-radius:999px;border:1px solid var(--line);background:#fff;color:#4b5c72;font-size:.83rem}.footer-bottom{display:flex;justify-content:space-between;gap:18px;margin-top:26px;font-size:.84rem}.footer-bottom strong{color:#4b5c72;text-align:right}
@media(max-width:960px){.nav-links{display:none}.menu-toggle{display:block;margin-left:auto}.nav>.button{display:none}.hero-grid,.about-wrap,.case-grid,.contact-grid{grid-template-columns:1fr}.hero-copy-open,.specialist-card{min-height:auto}.hero-proofbar{grid-template-columns:1fr 1fr}.service-tile:nth-child(n){grid-column:span 6}.journey-grid,.why-grid,.process-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.container{width:min(100% - 24px,1180px)}.hero{padding-top:44px}.hero-grid{gap:22px}.hero-copy-open{padding:10px 0}.specialist-card{padding:28px 24px}.hero-tags,.hero-proofbar,.about-grid,.journey-grid,.why-grid,.process-grid,.footer-columns{grid-template-columns:1fr}.service-tile:nth-child(n){grid-column:1/-1}.letterbox-image{height:190px;border-radius:18px}.letterbox-caption{left:22px;right:22px;bottom:22px}.founder-profile{flex-direction:column;text-align:center}.advice-bar{grid-template-columns:1fr}.footer-bottom{flex-direction:column;text-align:center}.footer-bottom strong{text-align:center}.hero-actions .button{width:100%}}


/* Modular V6 footer centering */
.footer-columns{
  text-align:center;
  justify-items:center;
}
.footer-columns > div{
  width:100%;
  text-align:center;
}
.footer-columns h3{
  text-align:center;
}
.footer-columns a,
.footer-columns span{
  text-align:center;
}
.footer-bottom{
  justify-content:center;
  align-items:center;
  flex-direction:column;
  text-align:center;
}
.footer-bottom strong{
  text-align:center;
}


/* V6 modular v2 refinements */
.original-checklist{
  gap:13px;
}
.original-checklist li{
  align-items:flex-start;
}
.original-checklist li span{
  margin-top:2px;
}
.original-checklist li div{
  min-width:0;
}
.original-checklist li strong{
  display:block;
  font-size:.94rem;
  line-height:1.25;
  color:var(--ink);
}
.original-checklist li small{
  display:block;
  color:var(--muted);
  font-size:.79rem;
  line-height:1.35;
  margin-top:3px;
}
.specialist-card{
  min-height:595px;
}
.hero-copy-open{
  min-height:595px;
}

/* Machine-Tech case study client panel */
.case-client-panel{
  padding:34px;
  background:
    linear-gradient(180deg,#f8fafc 0%,#f3f7fb 100%);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.case-client-label{
  color:var(--blue);
  font-size:.74rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.11em;
  margin-bottom:20px;
}
.case-logo-wrap{
  width:min(250px,82%);
  min-height:112px;
  padding:24px 26px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-sm);
}
.case-logo-wrap img{
  max-width:170px;
  max-height:72px;
  width:auto;
  height:auto;
  display:block;
}
.fallback-client-name{
  font-size:1.35rem;
  letter-spacing:.04em;
  color:#384759;
}
.case-client-copy{
  margin-top:22px;
}
.case-client-copy strong{
  display:block;
  font-size:1.12rem;
  color:var(--ink);
}
.case-client-copy span{
  display:block;
  color:var(--muted);
  font-size:.88rem;
  margin-top:4px;
}
.case-client-points{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 12px;
  margin-top:22px;
  width:100%;
  max-width:280px;
}
.case-client-points span{
  font-size:.82rem;
  color:#435169;
  text-align:left;
}
.case-client-points span::first-letter{
  color:var(--blue);
}
.case-grid{
  grid-template-columns:.72fr 1.28fr;
}
@media(max-width:960px){
  .case-client-panel{
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:30px 24px;
  }
  .case-client-points{
    grid-template-columns:1fr 1fr;
  }
  .specialist-card,.hero-copy-open{min-height:auto}
}
@media(max-width:620px){
  .case-client-points{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   SERVICE / MODULE PAGE COMPONENTS
   ========================================================= */


/* Business Websites service page — V6 */
.websites-page-hero{
  padding:76px 0 56px;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
  border-bottom:1px solid var(--line);
}
.websites-page-hero .container{max-width:1040px}
.websites-kicker{
  color:var(--blue);font-size:.76rem;font-weight:900;text-transform:uppercase;
  letter-spacing:.11em;margin-bottom:18px
}
.websites-page-hero h1{
  font-size:clamp(3.1rem,6vw,5.7rem);
  max-width:930px;
}
.websites-page-hero p{
  color:var(--muted);font-size:1.16rem;max-width:820px;margin:22px 0 0
}
.websites-page-hero .hero-actions{margin-top:30px}

.websites-visual-break{padding:22px 0 10px;background:#fff}
.websites-letterbox{
  height:235px;position:relative;overflow:hidden;border-radius:22px;
  background:#dfe8f3;box-shadow:var(--shadow-sm)
}
.websites-letterbox img{
  width:100%;height:100%;object-fit:cover;object-position:center 50%;
  display:block;filter:saturate(.82) contrast(.98)
}
.websites-letterbox:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,33,63,.74),rgba(10,33,63,.18) 58%,rgba(10,33,63,.03))
}
.websites-letterbox-caption{
  position:absolute;z-index:2;left:34px;bottom:30px;color:#fff;max-width:650px
}
.websites-letterbox-caption span{
  display:block;font-size:.75rem;font-weight:900;text-transform:uppercase;
  letter-spacing:.12em;margin-bottom:7px;opacity:.88
}
.websites-letterbox-caption strong{
  font-size:clamp(1.45rem,2.5vw,2.35rem);line-height:1.1;letter-spacing:-.035em
}

.problem-solution{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.problem-panel,.solution-panel{
  padding:30px;border:1px solid var(--line);border-radius:20px;background:#fff;
  box-shadow:var(--shadow-sm)
}
.problem-panel{border-top:5px solid #d26a61}
.solution-panel{border-top:5px solid var(--blue)}
.launch,.offer-label{
  color:var(--blue);font-size:.75rem;font-weight:900;text-transform:uppercase;
  letter-spacing:.11em;margin-bottom:12px
}
.problem-panel .launch{color:#b74e45}
.problem-panel h2,.solution-panel h2{font-size:clamp(1.8rem,3vw,2.55rem)}
.problem-panel p,.solution-panel p{color:var(--muted);margin:14px 0 0}

.website-offering-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.website-offering{
  display:flex;flex-direction:column;padding:30px;border:1px solid var(--line);
  border-radius:20px;background:#fff;box-shadow:var(--shadow-sm);position:relative;overflow:hidden
}
.website-offering:before{content:"";position:absolute;left:0;top:0;right:0;height:5px;background:#8290a3}
.website-offering.featured:before{background:var(--blue)}
.website-offering.featured{background:linear-gradient(180deg,#f8fbff,#fff);border-color:#cfdfef}
.website-offering h2{font-size:clamp(2rem,3.7vw,3rem);margin-bottom:14px}
.website-offering p{color:var(--muted);margin:0}
.website-offering ul{list-style:none;padding:0;margin:24px 0;display:grid;gap:11px}
.website-offering li{display:grid;grid-template-columns:23px 1fr;gap:9px;color:#37465a}
.website-offering li span:first-child{color:var(--blue);font-weight:900}
.website-offering .offer-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:8px}
.demo-badge{
  display:inline-flex;width:max-content;max-width:100%;padding:8px 11px;border-radius:999px;
  background:var(--blue-soft);color:var(--blue);font-weight:800;font-size:.86rem;margin:2px 0 18px
}

.use-case-grid,.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.use-case-card,.audience-card{
  padding:24px;border:1px solid var(--line);border-radius:18px;background:#fff;
  box-shadow:var(--shadow-sm)
}
.use-case-card h3,.audience-card h3{font-size:1.28rem}
.use-case-card p,.audience-card p{color:var(--muted);margin:9px 0 0}

.website-benefits,.outcome-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.website-benefit,.outcome{
  text-align:center;padding:23px;border:1px solid var(--line);border-radius:18px;background:#fff
}
.website-benefit strong,.outcome strong{display:block;font-size:1.1rem}
.website-benefit p,.outcome p{color:var(--muted);margin:7px 0 0}

.website-process{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.website-step{
  padding:23px;border:1px solid var(--line);border-radius:18px;background:#fff;
  box-shadow:var(--shadow-sm)
}
.website-step .number{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--blue-soft);color:var(--blue);font-weight:900;margin-bottom:15px
}
.website-step h3{font-size:1.22rem}.website-step p{color:var(--muted);margin:9px 0 0}

.two-col,.structure-grid,.included-clean-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.scope-card,.structure-card,.included-clean-card,.card{
  padding:27px;border:1px solid var(--line);border-radius:18px;background:#fff;
  box-shadow:var(--shadow-sm)
}
.scope-card h2,.structure-card h2{font-size:1.75rem;margin-bottom:16px}
.scope-card ul,.structure-card ul,.included-clean-card ul{
  list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px
}
.scope-card li,.structure-card li,.included-clean-card li{
  display:grid;grid-template-columns:23px 1fr;gap:9px;color:#3f4d61
}
.scope-card .yes,.structure-card li span:first-child,.included-clean-card li span:first-child{color:var(--blue);font-weight:900}
.scope-card .no{color:#b74e45;font-weight:900}
.included-clean-card .number{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--blue-soft);color:var(--blue);font-weight:900;margin-bottom:17px
}
.included-clean-card h3{font-size:1.38rem;margin-bottom:10px}
.included-clean-card p,.card p{color:var(--muted)}

.addon-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.addon-card{
  display:flex;flex-direction:column;padding:23px;border:1px solid var(--line);
  border-radius:18px;background:#fff;box-shadow:var(--shadow-sm)
}
.addon-card:nth-child(1){grid-column:1/span 2}.addon-card:nth-child(2){grid-column:3/span 2}.addon-card:nth-child(3){grid-column:5/span 2}.addon-card:nth-child(4){grid-column:2/span 2}.addon-card:nth-child(5){grid-column:4/span 2}
.addon-card h3{font-size:1.2rem}.addon-card p{color:var(--muted);margin:9px 0 0}
.addon-tag{margin-top:auto;padding-top:15px;color:var(--blue);font-size:.85rem;font-weight:850}

.brief-proof,.case-study-strip{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px;align-items:stretch}
.case-study-strip{
  padding:30px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,#f8fbff,#fff)
}
.case-study-strip h2{font-size:clamp(2rem,4vw,3.3rem)}
.case-study-strip p{color:var(--muted);margin:13px 0 0}
.case-study-points{display:grid;gap:10px;align-content:center}
.case-study-points span{display:flex;gap:9px;align-items:center;font-weight:750;color:#3b4a60}
.case-study-points b{color:var(--blue)}

.faq{display:grid;gap:10px}
details{border:1px solid var(--line);background:#fff;border-radius:16px;padding:19px 21px}
summary{cursor:pointer;font-weight:800}details p{color:var(--muted);margin:13px 0 0}

.cta-panel{
  padding:36px;border:1px solid #d7e2ee;border-radius:22px;
  background:linear-gradient(135deg,#f4f9ff,#fff);
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center
}
.cta-panel h2{font-size:clamp(2rem,4vw,3.5rem)}
.cta-panel p{color:var(--muted);margin:13px 0 0}

@media(max-width:900px){
  .problem-solution,.website-offering-grid,.two-col,.structure-grid,.included-clean-grid,
  .brief-proof,.case-study-strip{grid-template-columns:1fr}
  .use-case-grid,.audience-grid{grid-template-columns:1fr 1fr}
  .website-benefits,.outcome-strip,.website-process{grid-template-columns:1fr 1fr}
  .addon-grid{grid-template-columns:1fr}
  .addon-card:nth-child(n){grid-column:auto}
  .cta-panel{grid-template-columns:1fr}
}
@media(max-width:620px){
  .websites-page-hero{padding:48px 0 38px}
  .websites-letterbox{height:190px;border-radius:18px}
  .websites-letterbox-caption{left:22px;right:22px;bottom:22px}
  .use-case-grid,.audience-grid,.website-benefits,.outcome-strip,.website-process{grid-template-columns:1fr}
}




.service-tile.current-module::after{
  content:"Current module";
  position:absolute;
  top:18px;
  right:18px;
  padding:5px 8px;
  border-radius:999px;
  background:var(--blue-soft);
  color:var(--blue);
  font-size:.68rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.07em;
}




/* Current service module — same master card, subtle highlight only */
.service-tile.active-module{
  background:#f3f8fd;
  border-color:#8fb9dd;
}
.service-tile.active-module .tile-number{
  color:var(--blue);
}


/* =========================================================
   MICROSOFT 365 FOUNDATION / SERVICE PAGE COMPONENTS
   ========================================================= */
.foundation-hero{
  padding:70px 0 54px;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
  border-bottom:1px solid var(--line);
}
.foundation-hero-grid{
  display:grid;
  grid-template-columns:1.03fr .97fr;
  gap:26px;
  align-items:stretch;
}
.foundation-hero-copy{padding:26px 8px 18px 0;display:flex;flex-direction:column}
.foundation-kicker{
  color:var(--blue);
  font-size:.76rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.11em;
  margin-bottom:20px;
}
.foundation-hero h1{font-size:clamp(3.1rem,5.5vw,5.5rem)}
.foundation-trust{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
.foundation-trust span{
  padding:8px 11px;border:1px solid var(--line);border-radius:999px;
  background:#fff;color:#4b5c72;font-size:.84rem;font-weight:750
}
.foundation-summary{
  padding:36px;border:1px solid #d7e3ef;border-radius:24px;
  background:linear-gradient(145deg,#f7fbff,#fff);
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column
}
.foundation-summary h2{font-size:clamp(2rem,3.3vw,3.3rem);margin-top:12px}
.foundation-summary p{color:var(--muted);margin:16px 0 0}
.foundation-checklist{list-style:none;padding:0;margin:25px 0 0;display:grid;gap:12px}
.foundation-checklist li{display:grid;grid-template-columns:24px 1fr;gap:9px;align-items:center}
.foundation-checklist li span{
  width:23px;height:23px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue-soft);color:var(--blue);font-weight:900
}
.foundation-content-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.foundation-card{
  padding:24px;border:1px solid var(--line);border-radius:18px;background:#fff;
  box-shadow:var(--shadow-sm)
}
.foundation-card h3{font-size:1.3rem}
.foundation-card strong{font-size:1.08rem}
.foundation-card p{color:var(--muted);margin:9px 0 0}
.foundation-icon{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:var(--blue-soft);margin-bottom:16px;font-size:1.35rem
}
.foundation-fit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.foundation-why-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:16px}
.foundation-feature{
  padding:30px;border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(145deg,#f7fbff,#fff);box-shadow:var(--shadow-sm)
}
.foundation-feature h2{font-size:clamp(2rem,3.5vw,3.3rem);margin-top:10px}
.foundation-feature p{color:var(--muted)}
.foundation-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.foundation-micro-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.foundation-process-panel{
  text-align:center;padding:38px;border:1px solid var(--line);border-radius:22px;
  background:linear-gradient(135deg,#f5f9ff,#fff)
}
.foundation-process-panel h2{font-size:clamp(2rem,4vw,3.5rem);margin-top:10px}
.foundation-process-panel p{max-width:760px;margin:16px auto 0;color:var(--muted)}
.foundation-process-flow{
  display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;
  margin:26px 0 28px
}
.foundation-process-flow span{
  padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;
  font-size:.88rem;font-weight:750
}
.foundation-process-flow b{color:var(--blue)}
@media(max-width:900px){
  .foundation-hero-grid,.foundation-why-grid{grid-template-columns:1fr}
  .foundation-content-grid,.foundation-fit-grid{grid-template-columns:1fr 1fr}
  .foundation-micro-proof{grid-template-columns:1fr}
}
@media(max-width:620px){
  .foundation-hero{padding-top:46px}
  .foundation-hero-copy{padding:0}
  .foundation-summary{padding:26px 22px}
  .foundation-content-grid,.foundation-fit-grid,.foundation-mini-grid{grid-template-columns:1fr}
  .foundation-process-flow b{display:none}
}


/* Sleek related-client case study */
.related-client-card{
  display:grid;
  grid-template-columns:.7fr 1.15fr .85fr;
  gap:28px;
  align-items:center;
  padding:28px;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(135deg,#f8fbff 0%,#ffffff 58%);
  box-shadow:var(--shadow-sm);
}
.related-client-brand{
  min-width:0;
  padding-right:24px;
  border-right:1px solid var(--line);
}
.related-client-label{
  color:var(--blue);
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.11em;
  margin-bottom:16px;
}
.related-client-logo{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:78px;
}
.related-client-logo img{
  width:auto;
  height:auto;
  max-width:165px;
  max-height:62px;
  object-fit:contain;
  display:block;
}
.related-client-name{
  margin-top:16px;
}
.related-client-name strong{
  display:block;
  font-size:1.04rem;
}
.related-client-name span{
  display:block;
  color:var(--muted);
  font-size:.84rem;
  margin-top:3px;
}
.related-client-copy h2{
  font-size:clamp(1.8rem,3vw,2.65rem);
  line-height:1.08;
}
.related-client-copy p{
  color:var(--muted);
  margin:14px 0 20px;
}
.related-client-results{
  display:grid;
  gap:10px;
}
.related-client-results div{
  display:grid;
  grid-template-columns:24px 1fr;
  gap:10px;
  align-items:start;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff;
}
.related-client-results span{
  width:22px;
  height:22px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--blue-soft);
  color:var(--blue);
  font-size:.78rem;
  font-weight:900;
}
.related-client-results strong{
  font-size:.88rem;
  line-height:1.3;
  color:#314158;
}
@media(max-width:900px){
  .related-client-card{
    grid-template-columns:1fr;
  }
  .related-client-brand{
    padding-right:0;
    padding-bottom:22px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
}


/* =========================================================
   EMAIL MIGRATION PAGE COMPONENTS
   ========================================================= */
.migration-problem-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.migration-problem-card,
.migration-solution-card{
  padding:30px;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow-sm);
}
.migration-problem-card{
  background:linear-gradient(145deg,#fff9fa,#fff);
}
.migration-solution-card{
  background:linear-gradient(145deg,#f6fbff,#fff);
}
.migration-problem-card h2,
.migration-solution-card h2{
  font-size:clamp(1.8rem,3vw,2.8rem);
  margin-top:10px;
}
.migration-problem-card p,
.migration-solution-card p{
  color:var(--muted);
  margin:14px 0 0;
}
.migration-platform-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.migration-platform-grid .foundation-card{
  text-align:center;
}
.migration-steps-new{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.migration-step-new{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:15px;
  align-items:start;
  padding:22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.migration-step-new>span{
  width:48px;
  height:48px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:var(--blue-soft);
  color:var(--blue);
  font-weight:900;
}
.migration-step-new h3{
  font-size:1.25rem;
}
.migration-step-new p{
  color:var(--muted);
  margin:7px 0 0;
}
@media(max-width:900px){
  .migration-problem-grid,
  .migration-steps-new{
    grid-template-columns:1fr;
  }
  .migration-platform-grid{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:620px){
  .migration-platform-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   TEAMS & SHAREPOINT PAGE COMPONENTS
   ========================================================= */
.teams-included-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.teams-included-card{
  padding:28px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.teams-number{
  width:46px;
  height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:var(--blue-soft);
  color:var(--blue);
  font-weight:900;
  margin-bottom:18px;
}
.teams-included-card h3{
  font-size:1.45rem;
}
.teams-included-card p{
  color:var(--muted);
  margin:10px 0 0;
}
.teams-included-card ul,
.teams-structure-card ul{
  list-style:none;
  padding:0;
  margin:18px 0 0;
  display:grid;
  gap:10px;
}
.teams-included-card li,
.teams-structure-card li{
  display:grid;
  grid-template-columns:22px 1fr;
  gap:9px;
  align-items:start;
}
.teams-included-card li>span:first-child,
.teams-structure-card li>span:first-child{
  width:20px;
  height:20px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--blue-soft);
  color:var(--blue);
  font-size:.72rem;
  font-weight:900;
  margin-top:2px;
}
.teams-structure-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.teams-structure-card{
  padding:30px;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(145deg,#f8fbff,#fff);
  box-shadow:var(--shadow-sm);
}
.teams-structure-card h2{
  font-size:clamp(1.9rem,3vw,2.8rem);
  margin-top:10px;
}
.teams-outcomes{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.teams-outcomes .foundation-card{
  text-align:center;
}
@media(max-width:900px){
  .teams-included-grid,
  .teams-structure-grid{
    grid-template-columns:1fr;
  }
  .teams-outcomes{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:620px){
  .teams-outcomes{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   MICROSOFT 365 BACKUP PAGE COMPONENTS
   ========================================================= */
.backup-included-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.backup-included-card{
  padding:28px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.backup-number{
  width:46px;
  height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:var(--blue-soft);
  color:var(--blue);
  font-weight:900;
  margin-bottom:18px;
}
.backup-included-card h3{font-size:1.45rem}
.backup-included-card p{color:var(--muted);margin:10px 0 0}
.backup-included-card ul{
  list-style:none;
  padding:0;
  margin:18px 0 0;
  display:grid;
  gap:10px;
}
.backup-included-card li{
  display:grid;
  grid-template-columns:22px 1fr;
  gap:9px;
  align-items:start;
}
.backup-included-card li>span:first-child{
  width:20px;
  height:20px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--blue-soft);
  color:var(--blue);
  font-size:.72rem;
  font-weight:900;
  margin-top:2px;
}
.backup-risk-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.backup-protection-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.backup-protection-grid .foundation-card{text-align:center}
.backup-restore-flow{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.backup-restore-step{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:15px;
  align-items:start;
  padding:22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.backup-restore-step>span{
  width:48px;
  height:48px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:var(--blue-soft);
  color:var(--blue);
  font-weight:900;
}
.backup-restore-step h3{font-size:1.25rem}
.backup-restore-step p{color:var(--muted);margin:7px 0 0}
@media(max-width:900px){
  .backup-included-grid,
  .backup-restore-flow{
    grid-template-columns:1fr;
  }
  .backup-risk-grid,
  .backup-protection-grid{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:620px){
  .backup-risk-grid,
  .backup-protection-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   ONGOING MANAGEMENT PAGE COMPONENTS
   ========================================================= */
.management-included-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.management-included-card{
  padding:28px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.management-number{
  width:46px;
  height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:var(--blue-soft);
  color:var(--blue);
  font-weight:900;
  margin-bottom:18px;
}
.management-included-card h3{font-size:1.45rem}
.management-included-card p{color:var(--muted);margin:10px 0 0}
.management-included-card ul,
.management-boundary-panel ul{
  list-style:none;
  padding:0;
  margin:18px 0 0;
  display:grid;
  gap:10px;
}
.management-included-card li,
.management-boundary-panel li{
  display:grid;
  grid-template-columns:22px 1fr;
  gap:9px;
  align-items:start;
}
.management-included-card li>span:first-child,
.management-boundary-panel.included li>span:first-child{
  width:20px;
  height:20px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--blue-soft);
  color:var(--blue);
  font-size:.72rem;
  font-weight:900;
  margin-top:2px;
}
.management-response-note{
  margin-top:18px;
  padding:20px 22px;
  border:1px solid #c6dcef;
  border-radius:16px;
  background:#f5f9fd;
}
.management-response-note strong{
  display:block;
  color:var(--blue);
  margin-bottom:5px;
}
.management-response-note span{color:var(--muted)}
.management-boundary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.management-boundary-panel{
  padding:30px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.management-boundary-panel.included{
  background:linear-gradient(145deg,#f5faff,#fff);
}
.management-boundary-panel.excluded{
  background:linear-gradient(145deg,#fff9f9,#fff);
}
.management-boundary-panel h2{
  font-size:clamp(1.8rem,3vw,2.7rem);
  margin-top:10px;
}
.management-boundary-panel.excluded li>span:first-child{
  width:20px;
  height:20px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff0f1;
  color:#b84a55;
  font-size:.72rem;
  font-weight:900;
  margin-top:2px;
}
.management-monthly-flow{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.management-monthly-step{
  padding:24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow-sm);
  text-align:center;
}
.management-monthly-step>span{
  width:42px;
  height:42px;
  border-radius:13px;
  display:grid;
  place-items:center;
  margin:0 auto 14px;
  background:var(--blue-soft);
  color:var(--blue);
  font-weight:900;
}
.management-monthly-step strong{
  display:block;
  font-size:1.08rem;
}
.management-monthly-step p{
  color:var(--muted);
  margin:8px 0 0;
}
@media(max-width:900px){
  .management-included-grid,
  .management-boundary{
    grid-template-columns:1fr;
  }
  .management-monthly-flow{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:620px){
  .management-monthly-flow{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   APPOINTMENT WEBSITES PAGE
   Standalone Business Websites add-on — not a core module
   ========================================================= */
.appointment-hero{
  padding:70px 0 54px;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
  border-bottom:1px solid var(--line);
}
.appointment-hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:26px;
  align-items:stretch;
}
.appointment-hero-copy{
  padding:26px 8px 18px 0;
  display:flex;
  flex-direction:column;
}
.appointment-hero h1{
  font-size:clamp(3.1rem,5.5vw,5.5rem);
}
.appointment-summary{
  padding:36px;
  border:1px solid #d7e3ef;
  border-radius:24px;
  background:linear-gradient(145deg,#f7fbff,#fff);
  box-shadow:var(--shadow-sm);
}
.appointment-summary h2{
  font-size:clamp(2rem,3.3vw,3.3rem);
  margin-top:12px;
}
.appointment-summary p{
  color:var(--muted);
  margin:16px 0 0;
}
.appointment-feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.appointment-feature{
  padding:24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.appointment-feature h3{
  font-size:1.3rem;
}
.appointment-feature p{
  color:var(--muted);
  margin:9px 0 0;
}
.appointment-included-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.appointment-included-card{
  padding:28px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.appointment-number{
  width:46px;
  height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:var(--blue-soft);
  color:var(--blue);
  font-weight:900;
  margin-bottom:18px;
}
.appointment-included-card h3{
  font-size:1.45rem;
}
.appointment-included-card p{
  color:var(--muted);
  margin:10px 0 0;
}
.appointment-included-card ul{
  list-style:none;
  padding:0;
  margin:18px 0 0;
  display:grid;
  gap:10px;
}
.appointment-included-card li{
  display:grid;
  grid-template-columns:22px 1fr;
  gap:9px;
  align-items:start;
}
.appointment-included-card li>span:first-child{
  width:20px;
  height:20px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--blue-soft);
  color:var(--blue);
  font-size:.72rem;
  font-weight:900;
  margin-top:2px;
}
.appointment-demo-showcase{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:28px;
  align-items:center;
  padding:30px;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(135deg,#f8fbff 0%,#fff 58%);
  box-shadow:var(--shadow-sm);
}
.appointment-demo-copy h2{
  font-size:clamp(2rem,3.7vw,3.5rem);
  margin-top:10px;
}
.appointment-demo-copy h3{
  font-size:1.25rem;
  margin-top:22px;
}
.appointment-demo-copy p{
  color:var(--muted);
  margin:13px 0 0;
}
.appointment-demo-image{
  padding:10px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.appointment-demo-image img{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
}
.appointment-try-card,
.appointment-demo-cta{
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  padding:30px;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(135deg,#f5f9ff,#fff);
  box-shadow:var(--shadow-sm);
}
.appointment-try-card h2,
.appointment-demo-cta h2{
  font-size:clamp(2rem,3.5vw,3.2rem);
  margin-top:10px;
}
.appointment-try-card p,
.appointment-demo-cta p{
  color:var(--muted);
  margin:13px 0 0;
}
.appointment-try-actions{
  display:grid;
  gap:10px;
}
.appointment-audience-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.appointment-benefit-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.appointment-benefit-grid .foundation-card{
  text-align:center;
}
@media(max-width:900px){
  .appointment-hero-grid,
  .appointment-demo-showcase{
    grid-template-columns:1fr;
  }
  .appointment-feature-grid,
  .appointment-audience-grid{
    grid-template-columns:1fr 1fr;
  }
  .appointment-benefit-grid{
    grid-template-columns:1fr 1fr;
  }
  .appointment-try-card,
  .appointment-demo-cta{
    grid-template-columns:1fr;
  }
}
@media(max-width:620px){
  .appointment-hero{padding-top:46px}
  .appointment-hero-copy{padding:0}
  .appointment-summary{padding:26px 22px}
  .appointment-feature-grid,
  .appointment-included-grid,
  .appointment-audience-grid,
  .appointment-benefit-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   ABOUT CLOUDMONSTA
   ========================================================= */
.about-hero{
  padding:70px 0 54px;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
  border-bottom:1px solid var(--line);
}
.about-hero-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:28px;
  align-items:stretch;
}
.about-hero-copy{
  padding:26px 8px 18px 0;
  display:flex;
  flex-direction:column;
}
.about-hero h1{
  font-size:clamp(3.1rem,5.5vw,5.5rem);
}
.about-profile-card{
  display:grid;
  grid-template-columns:190px 1fr;
  gap:24px;
  align-items:center;
  padding:28px;
  border:1px solid #d7e3ef;
  border-radius:24px;
  background:linear-gradient(145deg,#f7fbff,#fff);
  box-shadow:var(--shadow-sm);
}
.about-profile-photo{
  width:190px;
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  border:6px solid #fff;
  box-shadow:0 12px 34px rgba(23,52,83,.12);
}
.about-profile-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
}
.about-profile-copy h2{
  font-size:2.3rem;
  margin-top:8px;
}
.about-profile-copy p{
  color:var(--muted);
  margin:10px 0 0;
}
.about-profile-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}
.about-profile-meta span{
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:#4b5c72;
  font-size:.8rem;
  font-weight:750;
}
.about-story-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:42px;
  align-items:start;
}
.about-story-intro h2{
  font-size:clamp(2.2rem,4vw,3.8rem);
  margin-top:10px;
}
.about-story-copy{
  font-size:1.18rem;
  color:#46566c;
}
.about-story-copy p{
  margin:0 0 20px;
}
.about-value-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.about-value-card{
  padding:24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.about-value-number{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:var(--blue-soft);
  color:var(--blue);
  font-weight:900;
  margin-bottom:16px;
}
.about-value-card h3{
  font-size:1.25rem;
}
.about-value-card p{
  color:var(--muted);
  margin:9px 0 0;
}
.about-experience-panel{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:28px;
  align-items:center;
  padding:32px;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(135deg,#f7fbff,#fff);
  box-shadow:var(--shadow-sm);
}
.about-experience-panel h2{
  font-size:clamp(2rem,3.7vw,3.4rem);
  margin-top:10px;
}
.about-experience-panel p{
  color:var(--muted);
  margin:14px 0 0;
}
.about-experience-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.about-experience-grid div{
  padding:18px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
}
.about-experience-grid strong{
  display:block;
  font-size:1.05rem;
}
.about-experience-grid span{
  display:block;
  color:var(--muted);
  margin-top:4px;
  font-size:.9rem;
}
.about-services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.about-service-link{
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.about-service-link:hover{
  transform:translateY(-3px);
  border-color:#a9c8e3;
  box-shadow:0 14px 32px rgba(23,52,83,.09);
}
.about-principles{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:center;
  padding:32px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.about-principles-copy h2{
  font-size:clamp(2rem,3.7vw,3.4rem);
  margin-top:10px;
}
.about-principles-copy p{
  color:var(--muted);
  margin:14px 0 0;
}
.about-principles-list{
  display:grid;
  gap:12px;
}
.about-principles-list div{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:10px;
  align-items:center;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#f9fbfd;
}
.about-principles-list span{
  width:24px;
  height:24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--blue-soft);
  color:var(--blue);
  font-weight:900;
}
@media(max-width:900px){
  .about-hero-grid,
  .about-story-grid,
  .about-experience-panel,
  .about-principles{
    grid-template-columns:1fr;
  }
  .about-value-grid{
    grid-template-columns:1fr 1fr;
  }
  .about-services-grid{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:620px){
  .about-hero{padding-top:46px}
  .about-hero-copy{padding:0}
  .about-profile-card{
    grid-template-columns:1fr;
    text-align:center;
  }
  .about-profile-photo{
    width:150px;
    margin:0 auto;
  }
  .about-profile-meta{
    justify-content:center;
  }
  .about-value-grid,
  .about-experience-grid,
  .about-services-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   PROJECT JOURNEY
   ========================================================= */
.journey-hero{
  padding:70px 0 54px;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
  border-bottom:1px solid var(--line);
  text-align:center;
}
.journey-hero .container{max-width:1000px}
.journey-hero h1{font-size:clamp(3.1rem,6vw,5.8rem);margin:12px auto 0}
.journey-hero .hero-copy{max-width:800px;margin:22px auto 0}
.journey-hero .hero-actions{justify-content:center}
.journey-list{position:relative;display:grid;gap:18px}
.journey-list:before{
  content:"";position:absolute;left:35px;top:36px;bottom:36px;width:2px;
  background:linear-gradient(180deg,#1d78b8,#7ab8df);border-radius:99px
}
.journey-step{position:relative;display:grid;grid-template-columns:72px 1fr;gap:20px;align-items:start}
.journey-number{
  width:72px;height:72px;border-radius:20px;display:grid;place-items:center;
  background:#fff;border:1px solid #bdd6e8;color:var(--blue);font-size:1.15rem;
  font-weight:900;box-shadow:var(--shadow-sm);z-index:2
}
.journey-card{
  padding:28px;border:1px solid var(--line);border-radius:20px;background:#fff;
  box-shadow:var(--shadow-sm)
}
.journey-card h3{font-size:1.55rem}
.journey-card>p{color:var(--muted);margin:11px 0 0}
.journey-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.journey-mini{padding:17px;border:1px solid var(--line);border-radius:14px;background:#f8fbfd}
.journey-mini strong{display:block;color:var(--text);margin-bottom:5px}
.journey-mini span{color:var(--muted);font-size:.94rem}
.journey-promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.journey-promise{
  padding:24px;border:1px solid var(--line);border-radius:18px;background:#fff;
  box-shadow:var(--shadow-sm)
}
.journey-promise .foundation-icon{margin-bottom:16px}
.journey-promise h3{font-size:1.28rem}
.journey-promise p{color:var(--muted);margin:9px 0 0}
@media(max-width:800px){
  .journey-promise-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .journey-hero{padding-top:46px}
  .journey-list:before{left:24px}
  .journey-step{grid-template-columns:50px 1fr;gap:12px}
  .journey-number{width:50px;height:50px;border-radius:15px;font-size:.95rem}
  .journey-card{padding:20px}
  .journey-split,.journey-promise-grid{grid-template-columns:1fr}
}


/* =========================================================
   MACHINE-TECH CASE STUDY
   ========================================================= */
.case-hero{padding:70px 0 54px;background:linear-gradient(180deg,#fff,#f8fbff);border-bottom:1px solid var(--line)}
.case-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:34px;align-items:center}
.case-hero h1{font-size:clamp(3.1rem,5.6vw,5.6rem);margin-top:12px}
.case-logo-panel{min-height:310px;display:flex;align-items:center;justify-content:center;padding:38px;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:var(--shadow-sm)}
.case-logo-panel img{width:min(100%,520px);height:auto;display:block}
.case-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.case-stat{padding:22px;border:1px solid var(--line);border-radius:17px;background:#fff;box-shadow:var(--shadow-sm)}
.case-stat span{display:block;color:var(--blue);font-size:.75rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.case-stat strong{display:block;margin-top:7px;font-size:1.3rem}
.case-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.case-card{padding:26px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow-sm)}
.case-card .foundation-icon{margin-bottom:16px}.case-card h3{font-size:1.35rem}.case-card p{color:var(--muted);margin:10px 0 0}
.case-timeline{position:relative;display:grid;gap:16px}
.case-timeline:before{content:"";position:absolute;left:28px;top:28px;bottom:28px;width:2px;background:#bdd9eb}
.case-step{position:relative;display:grid;grid-template-columns:58px 1fr;gap:16px}
.case-step-no{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;background:#fff;border:1px solid #b9d4e7;color:var(--blue);font-weight:900;z-index:2}
.case-step-body{padding:22px 24px;border:1px solid var(--line);border-radius:17px;background:#fff;box-shadow:var(--shadow-sm)}
.case-step-body h3{font-size:1.25rem}.case-step-body p{color:var(--muted);margin:7px 0 0}
.case-deliverables{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin:0;padding:28px;list-style:none;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow-sm)}
.case-deliverables li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start}
.case-tick{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);font-weight:900}
.case-tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.case-tech{padding:19px;text-align:center;border:1px solid var(--line);border-radius:15px;background:#fff;font-weight:800;box-shadow:var(--shadow-sm)}
.case-before-after{display:grid;grid-template-columns:1fr 70px 1fr;gap:18px;align-items:center}
.case-state{padding:28px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow-sm)}
.case-state h3{font-size:1.65rem}.case-state ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px;color:var(--muted)}
.case-state.before li:before{content:"×";color:#a44747;font-weight:900;margin-right:9px}
.case-state.after li:before{content:"✓";color:var(--blue);font-weight:900;margin-right:9px}
.case-arrow{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin:auto;background:var(--blue);color:#fff;font-size:1.5rem;font-weight:900}
.case-quote{max-width:920px;margin:auto;padding:36px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,#f7fbff,#fff);box-shadow:var(--shadow-sm);text-align:center}
.case-quote-mark{font-size:4.5rem;line-height:.65;color:var(--blue);opacity:.55}
.case-quote blockquote{margin:20px auto 0;font-size:clamp(1.35rem,2.6vw,2.15rem);line-height:1.42;font-weight:750;letter-spacing:-.025em}
.case-quote footer{margin-top:22px;color:var(--muted)}
@media(max-width:900px){.case-hero-grid,.case-before-after{grid-template-columns:1fr}.case-stats,.case-tech-grid{grid-template-columns:1fr 1fr}.case-arrow{transform:rotate(90deg)}}
@media(max-width:620px){.case-hero{padding-top:46px}.case-grid-2,.case-stats,.case-tech-grid,.case-deliverables{grid-template-columns:1fr}.case-step{grid-template-columns:48px 1fr;gap:11px}.case-step-no{width:48px;height:48px}.case-timeline:before{left:23px}.case-logo-panel{min-height:220px;padding:24px}}


/* =========================================================
   TYPICAL INVESTMENT — ORIGINAL CONTENT / WHITE STYLE
   ========================================================= */

.service-page-hero{
  padding:70px 0 54px;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
  border-bottom:1px solid var(--line);
  text-align:center;
}
.service-page-hero .container{max-width:980px}
.service-page-hero .eyebrow,
.article-hero .eyebrow,
.advice-hero .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 13px;
  border:1px solid #c9dce9;
  background:#fff;
  border-radius:999px;
  color:var(--blue);
  font-size:.84rem;
  font-weight:850;
  margin-bottom:16px;
}
.service-page-hero .dot,
.article-hero .dot,
.advice-hero .dot{
  width:8px;height:8px;border-radius:50%;background:var(--blue);
}
.service-page-hero h1{
  max-width:980px;
  margin:0 auto;
  font-size:clamp(3rem,5.8vw,5.7rem);
}
.service-page-hero p{
  max-width:780px;
  margin:22px auto 0;
  color:var(--muted);
  font-size:1.14rem;
}
.service-page-hero .hero-actions{justify-content:center}

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.pricing-card{
  padding:30px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:22px;
  box-shadow:var(--shadow-sm);
}
.pricing-card .launch{
  color:var(--blue);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.76rem;
  font-weight:900;
}
.pricing-card h2{
  font-size:1.9rem;
  margin:10px 0 20px;
}
.price-table{
  display:grid;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
}
.price-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  align-items:center;
  padding:17px 18px;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.price-row:last-child{border-bottom:0}
.price-row strong{font-size:1rem}
.price-row span{
  color:var(--blue);
  font-weight:900;
  white-space:nowrap;
}
.pricing-note{
  margin:18px 0 0;
  color:var(--muted);
  font-size:.94rem;
}

.extras-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.extras-card{
  padding:28px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:20px;
  box-shadow:var(--shadow-sm);
}
.extras-card h3{font-size:1.5rem;margin-bottom:16px}
.extras-card ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:12px;
}
.extras-card li{
  display:grid;
  grid-template-columns:22px 1fr;
  gap:10px;
  color:var(--muted);
}
.extras-card li span:first-child{
  color:var(--blue);
  font-weight:900;
}

.pricing-process{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.pricing-step{
  padding:26px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:20px;
  box-shadow:var(--shadow-sm);
}
.pricing-step .number{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:var(--blue-soft);
  color:var(--blue);
  font-weight:900;
  margin-bottom:16px;
}
.pricing-step h3{font-size:1.3rem}
.pricing-step p{color:var(--muted);margin:10px 0 0}

/* ORIGINAL LICENCE CARDS */
.licensing-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.licence-card{
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:30px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:22px;
  box-shadow:var(--shadow-sm);
}
.licence-card .launch{
  color:var(--blue);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.76rem;
  font-weight:900;
}
.licence-card h3{
  font-size:1.55rem;
  margin-top:12px;
}
.licence-price{
  margin-top:20px;
  color:var(--blue);
  font-size:clamp(2rem,4vw,3rem);
  font-weight:950;
  letter-spacing:-.055em;
  line-height:1;
}
.licence-price small{
  display:block;
  margin-top:9px;
  color:var(--muted);
  font-size:.92rem;
  font-weight:700;
  letter-spacing:0;
  line-height:1.4;
}
.licence-card p{
  color:var(--muted);
  margin:18px 0 0;
}
.licence-card ul{
  list-style:none;
  padding:0;
  margin:20px 0 0;
  display:grid;
  gap:11px;
}
.licence-card li{
  display:grid;
  grid-template-columns:22px 1fr;
  gap:10px;
  color:var(--muted);
}
.licence-card li span:first-child{
  color:var(--blue);
  font-weight:900;
}

/* ORIGINAL BACKUP PANEL */
.backup-cost-panel{
  margin-top:18px;
  padding:30px;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(145deg,#f7fbff,#fff);
  box-shadow:var(--shadow-sm);
}
.backup-cost-panel h3{font-size:1.7rem}
.backup-price-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:20px;
  align-items:center;
  margin-top:20px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}
.backup-price-row strong{font-size:1.08rem}
.backup-price-row span{
  color:var(--blue);
  font-weight:950;
  font-size:1.35rem;
  white-space:nowrap;
}
.licensing-note{
  margin-top:20px;
  color:var(--muted);
  font-size:.94rem;
}

/* Any original generic cards/strips used later on the page */
.case-study-strip,
.problem-panel,
.solution-panel,
.scope-card,
.structure-card,
.use-case-card,
.included-clean-card,
.outcome,
.card{
  border-color:var(--line);
  background:#fff;
  color:var(--text);
  box-shadow:var(--shadow-sm);
}
.case-study-strip{
  padding:34px;
  border-radius:22px;
}
.case-study-strip p,
.problem-panel p,
.solution-panel p,
.scope-card p,
.structure-card p,
.use-case-card p,
.included-clean-card p,
.outcome p{
  color:var(--muted);
}
.case-study-points span{
  color:var(--muted);
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:11px 13px;
}
.case-study-points b{color:var(--blue)}

@media(max-width:900px){
  .pricing-grid,
  .extras-grid,
  .pricing-process,
  .licensing-grid,
  .backup-price-row{
    grid-template-columns:1fr;
  }
  .backup-price-row span{white-space:normal}
}
@media(max-width:560px){
  .service-page-hero{padding-top:46px}
  .pricing-card,
  .extras-card,
  .pricing-step,
  .licence-card,
  .backup-cost-panel{
    padding:21px;
  }
  .price-row{
    grid-template-columns:1fr;
    gap:5px;
  }
  .price-row span{white-space:normal}
}

/* =========================================================
   ADVICE CENTRE
   ========================================================= */
.advice-hero{
  padding:70px 0 46px;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
  border-bottom:1px solid var(--line);
}
.advice-hero-inner{
  max-width:920px;
}
.advice-hero h1{
  font-size:clamp(3.1rem,5.7vw,5.7rem);
  max-width:900px;
}
.advice-hero h1 span{
  color:var(--blue);
}
.advice-hero .hero-copy{
  max-width:720px;
}
.advice-search-wrap{
  margin-top:30px;
  max-width:760px;
}
.advice-search{
  width:100%;
  min-height:58px;
  border:1px solid #d2dae5;
  border-radius:14px;
  padding:0 18px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:1rem;
  box-shadow:var(--shadow-sm);
  outline:none;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.advice-search:focus{
  border-color:#9fc3df;
  box-shadow:0 0 0 4px rgba(15,108,189,.08);
}
.advice-search::placeholder{
  color:#8a96a8;
}
.filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:16px;
}
.filter-btn{
  border:1px solid var(--line);
  background:#fff;
  color:#4b5c72;
  padding:9px 13px;
  border-radius:999px;
  font:inherit;
  font-size:.88rem;
  font-weight:800;
  cursor:pointer;
  transition:.18s;
}
.filter-btn:hover{
  border-color:#b8cadb;
  color:var(--blue);
  background:var(--blue-soft);
}
.filter-btn.active{
  border-color:var(--blue);
  background:var(--blue);
  color:#fff;
}
#result-count{
  color:var(--muted)!important;
}

.featured-guide{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:26px;
  align-items:center;
  padding:34px;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(135deg,#f7fbff 0%,#fff 65%);
  box-shadow:var(--shadow-sm);
}
.featured-guide h2{
  font-size:clamp(2.2rem,4vw,3.8rem);
  margin-top:10px;
}
.featured-guide p{
  color:var(--muted);
  font-size:1.07rem;
}
.featured-badge{
  display:inline-block;
  color:var(--blue);
  text-transform:uppercase;
  letter-spacing:.11em;
  font-weight:900;
  font-size:.76rem;
}
.featured-visual{
  min-height:250px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  display:grid;
  align-content:center;
  gap:12px;
  box-shadow:var(--shadow-sm);
}
.featured-visual .big{
  color:var(--ink);
  font-size:clamp(2.3rem,4vw,3.2rem);
  font-weight:950;
  letter-spacing:-.055em;
  line-height:1.05;
}
.featured-visual span{
  color:var(--muted);
}

.advice-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.advice-card{
  display:flex;
  flex-direction:column;
  min-height:240px;
  padding:26px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.advice-card:hover{
  transform:translateY(-4px);
  border-color:#b9ccdf;
  box-shadow:var(--shadow);
}
.advice-card .category{
  display:block;
  color:var(--blue);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.75rem;
  font-weight:900;
  margin-bottom:11px;
}
.advice-card h3{
  font-size:1.5rem;
}
.advice-card p{
  color:var(--muted);
  margin:11px 0 0;
}
.advice-card .meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  padding-top:22px;
  color:#536176;
  font-size:.88rem;
  font-weight:800;
}
.advice-card .meta span:last-child{
  color:var(--blue);
}
.coming-card{
  opacity:.72;
}
.no-results{
  display:none;
  padding:28px;
  border:1px dashed #cbd4df;
  border-radius:18px;
  background:#fafbfc;
  color:var(--muted);
  text-align:center;
}

.advice-cta{
  padding:36px;
  border:1px solid #d7e2ee;
  border-radius:22px;
  background:linear-gradient(135deg,#f4f9ff,#fff);
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
}
.advice-cta h2{
  font-size:clamp(2rem,4vw,3.4rem);
}
.advice-cta p{
  color:var(--muted);
  margin:13px 0 0;
}
.advice-cta .trust-row{
  margin-top:20px;
}

@media(max-width:900px){
  .featured-guide,
  .advice-grid,
  .advice-cta{
    grid-template-columns:1fr;
  }
}
@media(max-width:620px){
  .advice-hero{
    padding-top:46px;
  }
  .featured-guide,
  .advice-card,
  .advice-cta{
    padding:22px;
  }
}

/* =========================================================
   ADVICE ARTICLE PAGES
   ========================================================= */
.article-hero{padding:70px 0 50px;background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);border-bottom:1px solid var(--line)}
.article-hero-inner{max-width:900px}
.article-hero h1{font-size:clamp(3.1rem,5.7vw,5.7rem);max-width:900px}
.article-hero h1 span{color:var(--blue)}
.article-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.article-meta .pill{border:1px solid var(--line);background:#fff;color:#4b5c72;padding:8px 11px;border-radius:999px;font-size:.84rem;font-weight:750}
.article-shell{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:30px;align-items:start}
.article-content{display:grid;gap:18px}
.article-card{padding:30px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow-sm)}
.article-card h2{font-size:clamp(1.9rem,3.4vw,2.8rem);margin-bottom:15px}
.article-card p{color:var(--muted);font-size:1.04rem;margin:0 0 16px}
.article-card p:last-child{margin-bottom:0}
.article-card ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.article-card li{display:grid;grid-template-columns:24px 1fr;gap:9px;color:#3f4d61;align-items:start}
.article-card .tick{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);font-size:.75rem;font-weight:900}
.article-number{width:48px;height:48px;display:grid;place-items:center;margin-bottom:17px;border-radius:14px;background:var(--blue-soft);color:var(--blue);font-weight:950;font-size:1rem}
.example-box{margin:20px 0;padding:20px;border:1px solid var(--line);border-radius:16px;background:#f8fbff;text-align:center;color:#536176}
.example-box strong{color:var(--blue);font-size:1.12rem}
.sidebar{position:sticky;top:98px;display:grid;gap:14px}
.sidebar-card{padding:21px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow-sm)}
.sidebar-card h3{font-size:1.18rem;margin-bottom:13px}
.sidebar-links{display:grid;gap:9px}
.sidebar-links a{color:var(--muted);font-size:.92rem}
.sidebar-links a:hover{color:var(--blue)}
.sidebar-help-copy{color:var(--muted);margin:0 0 18px}
.summary-panel{padding:34px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,#f6faff,#fff);box-shadow:var(--shadow-sm)}
.summary-panel h2{font-size:clamp(2.2rem,4.5vw,4rem)}
.summary-copy{color:var(--muted);font-size:1.08rem;max-width:820px}
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.summary-item{padding:19px;border:1px solid var(--line);border-radius:16px;background:#fff}
.summary-item strong{display:block;margin-bottom:6px}
.summary-item span{color:var(--muted)}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.related-card{padding:24px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow-sm);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.related-card:hover{transform:translateY(-3px);border-color:#b9ccdf;box-shadow:var(--shadow)}
.related-card span{display:block;color:var(--blue);font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;font-weight:900;margin-bottom:9px}
.related-card h3{font-size:1.3rem;margin-bottom:9px}
.related-card p{color:var(--muted);margin:0}
.article-cta{padding:36px;border:1px solid #d7e2ee;border-radius:22px;background:linear-gradient(135deg,#f4f9ff,#fff);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.article-cta h2{font-size:clamp(2rem,4vw,3.4rem)}
.article-cta p{color:var(--muted);margin:13px 0 0}
.article-cta .trust-row{margin-top:20px}
.article-cta-action{text-align:center}
@media(max-width:900px){.article-shell{grid-template-columns:1fr}.sidebar{position:static;order:-1}.summary-grid,.related-grid,.article-cta{grid-template-columns:1fr}}
@media(max-width:620px){.article-hero{padding-top:46px}.article-card,.summary-panel,.related-card,.article-cta{padding:21px}}

/* =========================================================
   HOMEPAGE FEATURED CASE STUDY — MOBILE FIX
   ========================================================= */
@media (max-width: 960px) {
  #project .case-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #project .case-client-panel,
  #project .case-copy {
    min-width: 0;
    width: 100%;
  }

  #project .case-copy {
    padding: 30px 24px;
  }
}

@media (max-width: 620px) {
  #project .case-client-panel {
    padding: 26px 20px;
  }

  #project .case-logo-wrap {
    width: min(250px, 100%);
  }

  #project .case-copy {
    padding: 24px 20px;
  }

  #project .case-copy h2 {
    font-size: clamp(2rem, 11vw, 2.8rem);
    overflow-wrap: anywhere;
  }

  #project .quote {
    padding: 18px;
    font-size: 1rem;
  }
}

/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */
@media (max-width: 960px) {
  .nav {
    position: relative;
  }

  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    padding: 12px 0;
    z-index: 1000;
  }

  .nav-links.open a {
    padding: 14px 24px;
    border-bottom: 0;
  }
}