/* Cat60 Designs - Google Map Pack case studies. Scoped .cs-*; inherits Montserrat + brand vars, with fallbacks. */
.cs{--cs-blue:var(--blue,#4285F4);--cs-ink:var(--blue-ink,#1F5FCC);--cs-sky:var(--sky,#8AB4F8);--cs-navy:var(--navy,#101B2D);--cs-gray:var(--gray,#5B6678);--cs-line:var(--line,#DCE3EE);--cs-paper:var(--paper,#F6F8FC);--cs-bg:var(--bg,#EEF3FB);--cs-ease:var(--ease,cubic-bezier(.2,.7,.2,1));--cs-red:#B3261E;--cs-green:#187545;position:relative;padding-block:clamp(4rem,8vw,7rem);background:var(--cs-paper);color:var(--cs-navy);overflow-x:clip}
.cs *,.cs *::before,.cs *::after{box-sizing:border-box}
.cs-wrap{width:100%;max-width:1320px;margin-inline:auto;padding-inline:var(--pad,clamp(1.1rem,4vw,2.5rem))}
.cs :where(h2,h3,h4,p,dl,dd,figure){margin:0}
.cs img{display:block;max-width:100%;height:auto}
.cs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Head */
.cs-head{max-width:880px;margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.cs-kicker{display:inline-flex;align-items:center;gap:.6rem;font-size:.74rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--cs-ink);margin-bottom:1rem}
.cs-kicker::before{content:"";width:28px;height:2px;background:currentColor}
.cs-h{font-size:clamp(2rem,4.2vw,3.4rem);font-weight:800;letter-spacing:-.035em;line-height:1.05;text-wrap:balance;color:var(--cs-navy)}
.cs-intro{margin-top:1.2rem;font-size:clamp(1.02rem,1.4vw,1.16rem);line-height:1.7;color:#3E4A5C;max-width:720px}
.cs-intro strong{font-weight:600;color:#2E3A4D}
.cs-toc{list-style:none;padding:0;margin:2rem 0 0;display:grid;border-top:1px solid var(--cs-line)}
.cs-toc a{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1rem;min-height:52px;padding:.8rem 0;border-bottom:1px solid var(--cs-line);text-decoration:none;color:var(--cs-navy);font-weight:700;transition:color .2s,padding .35s var(--cs-ease)}
.cs-toc a span{font-size:.75rem;letter-spacing:.14em;color:var(--cs-blue);font-variant-numeric:tabular-nums}
.cs-toc a small{margin-left:auto;font-weight:600;color:var(--cs-gray);font-size:.84rem}
.cs-toc a:hover{color:var(--cs-ink);padding-left:.4rem}

/* Case */
.cs-case{padding-top:clamp(2.5rem,5vw,4rem);border-top:2px solid var(--cs-navy);scroll-margin-top:calc(var(--head-h,76px) + 16px)}
.cs-case+.cs-case{margin-top:clamp(4rem,9vw,7rem)}
.cs-index{display:flex;gap:1rem;align-items:center;font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--cs-ink);margin-bottom:.9rem}
.cs-index span+span{color:var(--cs-gray);padding-left:1rem;border-left:1px solid var(--cs-line)}
.cs-case-h{font-size:clamp(1.5rem,2.9vw,2.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.12;text-wrap:balance;max-width:960px}
.cs-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.5rem;margin-top:1.8rem;padding-bottom:1.8rem;border-bottom:1px solid var(--cs-line)}
@media (min-width:900px){.cs-meta{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cs-meta dt{font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--cs-gray);margin-bottom:.25rem}
.cs-meta dd{font-size:.98rem;font-weight:600;color:var(--cs-navy)}
.cs-meta dd strong{font-weight:800}

/* Screenshot trigger */
.cs-shot{display:block;max-width:100%;color:var(--cs-ink);cursor:zoom-in;text-decoration:none}
.cs-shot img{width:100%;height:auto}
.cs-shot:hover,.cs-shot:focus-visible{color:var(--cs-navy)}
.cs-shot:focus-visible{outline:3px solid var(--cs-blue);outline-offset:3px}
.cs-zoom{display:flex;align-items:center;justify-content:flex-end;gap:.4rem;font-size:.72rem;font-weight:700;padding:.55rem 0;min-height:32px;color:inherit;transition:color .25s}

/* Comparison: mobile chronological stack, desktop 3 columns */
.cs-compare{display:grid;gap:1.8rem;margin-top:clamp(2rem,4vw,3rem)}
.cs-mlabel{display:flex;align-items:baseline;gap:.6rem;font-weight:800;font-size:.95rem;color:var(--cs-navy);margin-bottom:.7rem}
.cs-mlabel span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cs-gray)}
.cs-after .cs-mlabel span{color:var(--cs-green)}
.cs-mid{display:none}
@media (min-width:900px){
  .cs-compare{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(1rem,2vw,1.8rem);align-items:center}
  .cs-compare .cs-mlabel{display:none}
  .cs-mid{display:flex;flex-direction:column;justify-content:center;gap:1.1rem;align-self:center;white-space:nowrap}
  .cs-mid p{font-size:clamp(.82rem,1vw,.95rem);font-weight:800;color:var(--cs-navy);display:flex;align-items:center;gap:.4rem}
  .cs-mid-l{color:var(--cs-gray)!important}
  .cs-mid-r{justify-content:flex-end}
  .cs-ar{font-size:1.25em;color:var(--cs-blue);line-height:1}
}

/* Map pack */
.cs-pack{margin:clamp(2rem,4vw,3rem) auto 0;max-width:min(100%,880px);display:grid;justify-items:center;gap:1rem;text-align:center}
.cs-pack .cs-shot{width:fit-content;max-width:100%}
.cs-pack-cap{max-width:640px;font-size:1rem;color:var(--cs-navy);line-height:1.6}

/* Results */
.cs-results{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;gap:1.5rem}
.cs-panels{display:grid;gap:1rem}
@media (min-width:700px){.cs-panels{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch}}
.cs-panel{padding:clamp(1.3rem,3vw,2rem);border-radius:16px;border:1px solid var(--cs-line);background:#fff}
.cs-panel-a{background:var(--cs-navy);border-color:var(--cs-navy);color:#fff}
.cs-panel-h{font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--cs-gray);margin-bottom:1.2rem!important}
.cs-panel-a .cs-panel-h{color:var(--cs-sky)}
.cs-panel dl{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;align-items:flex-end}
.cs-panel dt{font-size:.8rem;font-weight:700;color:var(--cs-gray);margin-bottom:.2rem}
.cs-panel-a dt{color:#B9C5D8}
.cs-big{font-size:clamp(2.6rem,5.5vw,4rem);font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.cs-mid-n{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.cs-panel-a .cs-big{color:#fff}
.cs-delta{display:grid;place-items:center;color:var(--cs-blue)}
.cs-delta .cs-arr{width:28px;height:28px}
@media (max-width:699px){.cs-delta{transform:rotate(90deg);height:24px}}
.cs-lower{font-size:.86rem;font-weight:600;color:var(--cs-ink)}
.cs-lower::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cs-blue);margin-right:.55rem;vertical-align:middle}
.cs-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cs-table{width:100%;min-width:420px;border-collapse:collapse;font-size:.95rem;font-variant-numeric:tabular-nums}
.cs-table th,.cs-table td{padding:.85rem .6rem;border-bottom:1px solid var(--cs-line);text-align:right}
.cs-table thead th{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--cs-gray);border-bottom:2px solid var(--cs-navy)}
.cs-table th:first-child{text-align:left;padding-left:0}
.cs-table tbody th{font-weight:600;color:#2E3A4D}
.cs-table td:last-child{font-weight:800;color:var(--cs-navy)}
.cs-table tbody tr{transition:background-color .2s}
.cs-table tbody tr:hover{background:var(--cs-bg)}
.cs-summary{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.5;color:var(--cs-navy);padding-left:1rem;border-left:4px solid var(--cs-blue)}
.cs-method{display:grid;gap:.35rem;font-size:.86rem;line-height:1.7;color:var(--cs-gray);max-width:860px}
.cs-method span,.cs-disclaim span{font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--cs-navy);font-style:normal}

/* CTA */
.cs-cta{margin-top:clamp(4rem,8vw,6rem);padding-top:clamp(2.5rem,5vw,3.5rem);border-top:2px solid var(--cs-navy);display:grid;gap:1rem;justify-items:start;max-width:820px}
.cs-cta-h{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
.cs-cta p{color:var(--cs-gray);font-size:.92rem}
.cs-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:56px;padding:0 1.6rem;border-radius:12px;background:var(--cs-ink);color:#fff;font-weight:800;font-size:1rem;text-decoration:none;margin-top:.6rem;transition:transform .35s var(--cs-ease),box-shadow .35s var(--cs-ease),background-color .2s}
.cs-btn .cs-arr{transition:transform .35s var(--cs-ease)}
.cs-btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 18px 34px -18px rgba(31,95,204,.8)}
.cs-btn:hover .cs-arr{transform:translateX(4px)}
.cs-btn:focus-visible{outline:3px solid var(--cs-blue);outline-offset:3px}

/* Compact */
.cs-compact{background:#fff}
@media (min-width:900px){.cs-head-row{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:1rem 4rem;align-items:end}.cs-head-row .cs-intro{margin-top:0}}
.cs-clist{display:grid;border-top:2px solid var(--cs-navy)}
.cs-citem{display:grid;gap:1.6rem;padding-block:clamp(2rem,4vw,3rem);border-bottom:1px solid var(--cs-line)}
@media (min-width:900px){.cs-citem{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
  .cs-mode-website-design .cs-citem{grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr)}}
.cs-ch{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:800;letter-spacing:-.03em;line-height:1.15}
.cs-cperiod{margin-top:.5rem!important;color:var(--cs-gray);font-size:.92rem;line-height:1.6}
.cs-cperiod strong{color:var(--cs-navy)}
.cs-avg{display:flex;align-items:flex-end;gap:1.2rem;margin-top:1.4rem!important}
.cs-avg dt{font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cs-gray);margin-bottom:.3rem}
.cs-avg dd{font-size:clamp(2rem,4vw,2.8rem);font-weight:800;letter-spacing:-.045em;line-height:1;color:#7A8597;font-variant-numeric:tabular-nums}
.cs-avg dd.cs-avg-a{color:var(--cs-navy)}
.cs-avg-arr{color:var(--cs-blue);padding-bottom:.45rem}
.cs-cdelta{margin-top:1rem!important;font-size:.9rem;font-weight:600;color:var(--cs-ink)}
.cs-pair{display:grid;gap:1.4rem}
@media (min-width:600px){.cs-pair{grid-template-columns:1fr 1fr;gap:1rem}}
.cs-compact .cs-lower{margin-top:1.5rem}
.cs-disclaim{display:grid;gap:.3rem;margin-top:1rem;max-width:860px;font-size:.9rem;line-height:1.65;color:#3E4A5C;padding-left:1rem;border-left:3px solid var(--cs-navy)}
.cs-compact .cs-btn{margin-top:2rem}
.cs-compact-method{font-size:.85rem;line-height:1.65;color:var(--cs-gray);max-width:860px;margin-top:.8rem}
.cs-source-link{margin-top:2rem;font-weight:700}.cs-source-link a{color:var(--cs-ink)}.cs-source-link .cs-arr{vertical-align:middle}
.page-results .crumbs a{color:#1f5fcc}.page-results .crumbs li,.page-results .crumbs [aria-current]{color:#49566b}

@media (prefers-reduced-motion:reduce){.cs *{transition:none!important}.cs-shot:hover,.cs-shot:focus-visible,.cs-btn:hover{transform:none}}