/* =====================================================================
   Collins Street Physiotherapy — Clinical + Fit redesign
   Palette: clinical blue (primary) + muted brand red (accent), flat surfaces.
   Scope: everything is namespaced under #serene so it can coexist with the
   existing theme. The four body>… rules hide the legacy homepage markup;
   drop them if you render #serene into a clean/blank page template.
   Font: Manrope (add the <link> from README, or bundle locally).
   ===================================================================== */

:root{
  --ink:#123047; --body:#3D5468; --muted:#6C8095;
  --blue:#1668BE; --blue-d:#125499; --blue-soft:#E6F0FB;
  --red:#C6443F; --red-d:#A5322D; --red-soft:#FBEBE9;
  /* accent tokens (formerly "fit"): now the brand red */
  --fit:#C6443F; --fit-d:#C5241D; --fit-soft:#FBEBE9;
  --line:#E1E9F0; --line-2:#EEF3F8;
  --bg:#FFFFFF; --bg2:#F5F8FB; --ink-bg:#0F2A3E;
  --r:14px; --r-lg:18px; --pill:999px;
  --sh:0 6px 18px rgba(18,48,71,.07);
  --sh-2:0 12px 30px rgba(18,48,71,.10);
  /* Brand type: Area Normal (licensed) → Reddit Sans / Open Sans / system fallbacks. Single family. */
  --f:'Area Normal','Reddit Sans','Open Sans',ui-sans-serif,system-ui,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
  --fd:'Area Normal','Reddit Sans','Open Sans',ui-sans-serif,system-ui,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
}

/* Reset legacy homepage sections (remove if using a blank template) */
body>header.page,body>section.homeBanner,body>section.contentGeneral,body>footer.footerBottom{display:none!important;}

#serene *{box-sizing:border-box;}
#serene{font-family:var(--f);color:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;text-align:left;}
/* Legacy screen.css centers inherited text — force one consistent left edge */
#serene .stat,#serene .day,#serene .slot{text-align:center;} /* intentionally centered */
#serene .shead .eyebrow,#serene .hero .eyebrow{display:block;margin-bottom:7px;}
#serene img{max-width:100%;display:block;}
#serene h1,#serene h2,#serene h3,#serene h4,#serene h5,#serene h6{height:auto;min-height:0;border:0;background:none;padding:0;white-space:normal;font-family:var(--fd);color:var(--ink);margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.15;}
#serene .stat b,#serene .brand-txt b{font-family:var(--fd);font-weight:700;}
#serene .hero h1,#serene .shead h2,#serene .cta-inner h2{letter-spacing:-.03em;}
#serene p{margin:0;white-space:normal;}
#serene .wrap{max-width:1180px;margin:0 auto;padding:0 26px;}
#serene .eyebrow{font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--blue);}
#serene .eyebrow.fit{color:var(--fit-d);}
#serene .btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font-family:var(--f);font-weight:800;font-size:15px;padding:13px 24px;border-radius:10px;transition:.18s;text-decoration:none;white-space:nowrap;}
#serene .btn-primary{background:var(--blue);color:#fff;}
#serene .btn-primary:hover{background:var(--blue-d);}
#serene .btn-fit{background:var(--fit);color:#fff;}
#serene .btn-fit:hover{background:var(--fit-d);}
#serene .btn-ghost{background:#fff;color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--line);}
#serene .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--blue);}

/* Utility top bar (clinic) */
#serene .util{background:var(--ink-bg);color:#cdd9e3;font-size:13px;font-weight:600;border-top:3px solid var(--red);}
#serene .util .wrap{display:flex;align-items:center;gap:22px;height:40px;}
#serene .util .u{display:inline-flex;align-items:center;gap:7px;}
#serene .util svg{stroke:var(--fit);}
#serene .util .sp{margin-left:auto;}
#serene .util a{color:#fff;text-decoration:none;}
#serene .util a[href="#book"]{color:#ff8078;font-weight:800;}

/* Header */
#serene .hd{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);}
#serene .hd .wrap{display:flex;align-items:center;gap:26px;height:72px;}
#serene .brand{display:flex;align-items:center;gap:11px;text-decoration:none;}
#serene .brand-mark{display:grid;place-items:center;}
#serene .brand-mark img{height:42px;width:auto;display:block;}
#serene .brand-txt b{display:block;font-size:16px;color:var(--ink);line-height:1.05;font-weight:800;letter-spacing:-.01em;}
#serene .brand-txt span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700;}
#serene .nav{display:flex;gap:2px;margin-left:auto;}
#serene .nav a{padding:9px 15px;border-radius:8px;color:var(--body);text-decoration:none;font-weight:700;font-size:14.5px;transition:.15s;}
#serene .nav a:hover{background:var(--blue-soft);color:var(--blue-d);}
#serene .nav a.active{position:relative;background:transparent;color:var(--ink);}
#serene .nav a.active::after{content:"";position:absolute;left:15px;right:15px;bottom:1px;height:2.5px;background:var(--red);border-radius:2px;}
#serene .hd .btn{padding:11px 20px;font-size:14px;}

/* Hero — short */
#serene .hero{background:var(--bg2);border-bottom:1px solid var(--line);}
#serene .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-top:44px;padding-bottom:44px;}
#serene .hero h1{font-size:clamp(29px,3.4vw,42px);line-height:1.1;margin:14px 0 0;}
#serene .hero h1 .fitw{color:var(--fit-d);}
#serene .hero .lede{font-size:17px;color:var(--muted);margin:16px 0 24px;max-width:44ch;}
#serene .hero-cta{display:flex;gap:12px;flex-wrap:wrap;}
#serene .hero-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);aspect-ratio:16/11;border:1px solid var(--line);}
#serene .hero-photo img{width:100%;height:100%;object-fit:cover;}
#serene .hero-badge{position:absolute;left:16px;bottom:16px;background:#fff;border-radius:12px;padding:12px 16px;box-shadow:var(--sh-2);display:flex;align-items:center;gap:11px;}
#serene .hero-badge .d{width:38px;height:38px;border-radius:9px;background:var(--red-soft);color:var(--fit-d);display:grid;place-items:center;font-weight:800;}
#serene .hero-badge .d svg{stroke:var(--red-d);}
#serene .hero-badge b{display:block;color:var(--ink);font-size:14px;}
#serene .hero-badge span{font-size:12px;color:var(--muted);}

/* Stat strip */
#serene .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:28px;}
#serene .stat{padding:16px 18px;border-right:1px solid var(--line);}
#serene .stat:last-child{border-right:0;}
#serene .stat b{display:block;font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.02em;}
#serene .stat b em{font-style:normal;color:var(--fit-d);}
#serene .stat span{font-size:12.5px;color:var(--muted);font-weight:600;}

/* Section shell */
#serene section.blk{padding:70px 0;}
#serene .blk.alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
#serene .shead{max-width:680px;margin:0 0 40px;}
#serene .shead.center{margin-left:auto;margin-right:auto;text-align:center;}
#serene .shead h2{font-size:clamp(24px,2.7vw,31px);margin-top:10px;}
#serene .shead p{color:var(--muted);font-size:16px;margin-top:12px;}

/* Services */
#serene .svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
#serene .svc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;transition:.18s;}
#serene .svc:hover{border-color:var(--blue);box-shadow:var(--sh);}
#serene .svc.fit{border-top:3px solid var(--fit);}
#serene .svc-ico{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;margin-bottom:16px;background:var(--blue-soft);}
#serene .svc.fit .svc-ico{background:var(--fit-soft);}
#serene .svc-ico svg{stroke:var(--blue);}
#serene .svc.fit .svc-ico svg{stroke:var(--fit-d);}
#serene .svc h3{font-size:17px;margin-bottom:8px;}
#serene .svc p{font-size:14px;color:var(--muted);line-height:1.55;}
#serene .svc .tag{display:inline-block;margin-top:14px;font-size:12px;font-weight:800;color:var(--blue-d);text-transform:uppercase;letter-spacing:.05em;}
#serene .svc.fit .tag{color:var(--fit-d);}

/* Comparison (room -> mat) */
#serene .cmp{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center;}
#serene .ba-slider{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);aspect-ratio:16/10;user-select:none;border:1px solid var(--line);background:#dfe7ee;}
#serene .ba-layer{position:absolute;inset:0;}
#serene .ba-layer img{width:100%;height:100%;object-fit:cover;}
#serene .ba-after{clip-path:inset(0 0 0 50%);}
#serene .ba-tag{position:absolute;top:14px;padding:6px 13px;border-radius:8px;font-weight:800;font-size:12px;color:#fff;}
#serene .ba-tag.l{left:14px;background:rgba(22,104,190,.92);}
#serene .ba-tag.r{right:14px;background:rgba(197,36,29,.92);}
#serene .ba-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);cursor:ew-resize;}
#serene .ba-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:var(--sh-2);display:grid;place-items:center;color:var(--blue);font-weight:800;cursor:ew-resize;border:1px solid var(--line);}
#serene .cmp-copy .step{display:flex;gap:13px;margin-bottom:18px;}
#serene .cmp-copy .n{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-weight:800;color:#fff;}
#serene .cmp-copy .step:nth-child(1) .n{background:var(--blue);}
#serene .cmp-copy .step:nth-child(2) .n{background:var(--fit);}
#serene .cmp-copy .step b{color:var(--ink);font-size:16px;}
#serene .cmp-copy .step p{font-size:14px;color:var(--muted);margin-top:3px;}

/* Booking (flat clinical) */
#serene .book{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:grid;grid-template-columns:1fr 1fr 1.05fr;box-shadow:var(--sh);}
#serene .book-col{padding:26px 24px;border-right:1px solid var(--line);}
#serene .book-col:last-child{border-right:0;background:var(--bg2);}
#serene .book-step{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
#serene .book-step span{width:24px;height:24px;border-radius:7px;background:var(--blue);color:#fff;font-weight:800;font-size:12px;display:grid;place-items:center;}
#serene .book-step b{color:var(--ink);font-size:15px;}
#serene .opt{width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:13px 15px;margin-bottom:10px;cursor:pointer;font-family:var(--f);font-weight:700;color:var(--body);transition:.15s;display:flex;align-items:center;gap:11px;font-size:14.5px;}
#serene .opt small{display:block;font-weight:600;color:var(--muted);font-size:12px;margin-top:2px;}
#serene .opt:hover{border-color:var(--blue);}
#serene .opt.sel{border-color:var(--blue);background:var(--blue-soft);}
#serene .opt .av{margin-left:auto;width:34px;height:34px;border-radius:9px;background:var(--blue);display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px;}
#serene .days{display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap;}
#serene .day{flex:1;min-width:52px;text-align:center;background:#fff;border:1.5px solid var(--line);border-radius:9px;padding:9px 5px;cursor:pointer;transition:.15s;}
#serene .day small{display:block;font-size:10.5px;color:var(--muted);font-weight:800;text-transform:uppercase;}
#serene .day b{color:var(--ink);font-size:17px;font-weight:800;}
#serene .day.sel{background:var(--blue);border-color:var(--blue);}
#serene .day.sel small,#serene .day.sel b{color:#fff;}
#serene .slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
#serene .slot{background:#fff;border:1.5px solid var(--line);border-radius:9px;padding:10px 4px;text-align:center;font-weight:800;font-size:13px;color:var(--body);cursor:pointer;transition:.15s;}
#serene .slot:hover{border-color:var(--blue);color:var(--blue-d);}
#serene .slot.sel{background:var(--blue);border-color:var(--blue);color:#fff;}
#serene .slot.off{opacity:.4;pointer-events:none;text-decoration:line-through;}
#serene .book-confirm{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);}
#serene .book-confirm .sum{font-size:13.5px;color:var(--muted);margin-bottom:13px;line-height:1.7;}
#serene .book-confirm .sum b{color:var(--ink);}
#serene .book .btn-fit{width:100%;justify-content:center;}

/* Testimonials */
#serene .tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
#serene .tst{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:13px;}
#serene .stars{color:var(--fit);letter-spacing:2px;font-size:14px;}
#serene .tst p.q{font-size:15.5px;line-height:1.6;color:var(--body);}
#serene .tst-who{display:flex;align-items:center;gap:11px;margin-top:auto;}
#serene .tst-av{width:42px;height:42px;border-radius:50%;background:var(--blue-soft);display:grid;place-items:center;color:var(--blue-d);font-weight:800;}
#serene .tst-who b{color:var(--ink);font-weight:800;font-size:14.5px;}
#serene .tst-who small{display:block;color:var(--muted);font-size:12.5px;}

/* CTA + footer */
#serene .cta-inner{background:var(--blue);border-radius:var(--r-lg);padding:44px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
#serene .cta-inner h2{color:#fff;font-size:clamp(21px,2.4vw,28px);}
#serene .cta-inner p{color:rgba(255,255,255,.85);margin-top:8px;font-size:15px;}
#serene .cta-inner .btn{background:#fff;color:var(--blue-d);}
#serene .ft{background:var(--ink-bg);color:rgba(255,255,255,.66);padding:52px 0 26px;}
#serene .ft .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;}
#serene .ft h4{color:#fff;font-weight:800;margin:0 0 14px;font-size:14px;letter-spacing:.03em;}
#serene .ft a{color:rgba(255,255,255,.66);text-decoration:none;display:block;padding:4px 0;font-size:14px;}
#serene .ft a:hover{color:var(--fit);}
#serene .ft .brand-txt b{color:#fff;}
#serene .ft-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding-top:20px;font-size:12.5px;color:rgba(255,255,255,.45);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}

@media(max-width:960px){
  #serene .util .wrap{gap:14px;overflow:hidden;}
  #serene .hero .wrap,#serene .cmp{grid-template-columns:1fr;}
  #serene .svc-grid{grid-template-columns:repeat(2,1fr);}
  #serene .stats{grid-template-columns:repeat(2,1fr);}
  #serene .stat:nth-child(2){border-right:0;}
  #serene .book{grid-template-columns:1fr;}
  #serene .book-col{border-right:0;border-bottom:1px solid var(--line);}
  #serene .tst-grid{grid-template-columns:1fr;}
  #serene .ft .wrap{grid-template-columns:1fr 1fr;}
  #serene .nav{display:none;}
}