@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,700&family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap');

/* ============================================================
   SHiFT Physiotherapy — Design System tokens + layout.
   Ported from /Design_System (tokens/*.css). Brand: warm-black
   ink #0C0A08 + gold; Archivo/Roboto; sharp 2-4px corners.
   ============================================================ */

:root {
  /* Ink (brand black) */
  --ink-950:#060504; --ink-900:#0C0A08; --ink-800:#181512; --ink-700:#26221D; --ink-600:#3B362F;
  --navy-950:var(--ink-950); --navy-900:var(--ink-900); --navy-800:var(--ink-800); --navy-700:var(--ink-700); --navy-600:var(--ink-600);

  /* Gold */
  --gold-500:#DDA853; --gold-300:#FFD084; --gold-200:#FFDDA2; --gold-100:#FFE9C5;
  --gold-tint:rgba(221,168,83,0.18); --gold-stroke:rgba(221,168,83,0.18);

  /* Neutrals */
  --black:#000; --white:#FFF; --ink:#181512;
  --slate-700:#33302B; --slate-600:#4A463F; --slate-500:#6E6961;
  --mist-100:#F7F5F1; --mist-200:#F2EFE9;
  --on-dark-1:#FFF; --on-dark-2:#E6E3DD; --on-dark-3:#D3CFC7;
  --success:oklch(0.55 0.09 165); --error:oklch(0.55 0.09 30);

  /* Semantic — light */
  --surface-page:var(--white); --surface-alt:var(--mist-100); --surface-wash:var(--mist-200);
  --surface-card:var(--white); --surface-inverse:var(--ink-900); --surface-inverse-raised:var(--ink-800);
  --text-display:var(--ink-900); --text-strong:var(--ink); --text-body:var(--slate-700);
  --text-soft:var(--slate-600); --text-muted:var(--slate-500);
  --accent:var(--gold-500); --accent-contrast:var(--ink-900);
  --border-subtle:rgba(12,10,8,0.08); --border-strong:rgba(12,10,8,0.18);
  --scrim-hero:linear-gradient(90deg, rgba(6,5,4,0.95) 0%, rgba(10,8,6,0.88) 34%, rgba(12,10,8,0.55) 66%, rgba(12,10,8,0.28) 100%);
  --grad-inverse:radial-gradient(circle at 80% 20%, rgba(221,168,83,0.10) 0%, rgba(12,10,8,0) 55%), linear-gradient(135deg, #060504 0%, #0C0A08 45%, #26221D 100%);
  --icon-filter:none;

  /* Type */
  --font-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-body:'Roboto','Helvetica Neue',Arial,sans-serif;
  --text-hero:clamp(38px,5vw,62px); --text-h1:40px; --text-h2:clamp(24px,3vw,36px);
  --text-h3:22px; --text-h4:19px; --text-lead:17.5px; --text-body-size:16.5px; --text-base:16px;
  --text-sm:15.5px; --text-caption:13px;
  --lh-tight:1.06; --lh-heading:1.15; --lh-snug:1.35; --lh-body:1.7; --lh-relaxed:1.75;
  --ls-tight:-0.5px; --ls-caps:0.01em; --ls-eyebrow:0.16em; --ls-wide:2.5px;

  /* Spacing */
  --container-max:1200px; --container-content:1120px; --container-prose:900px;
  --gutter:24px; --grid-gap:20px; --stack-gap:20px;
  --section-pad-y:66px; --section-pad-y-lg:72px;

  /* Effects */
  --radius-0:0px; --radius-1:2px; --radius-2:4px; --radius-pill:999px;
  --shadow-card:0 6px 18px rgba(12,10,8,0.07); --shadow-hover:0 5px 10px rgba(0,0,0,0.15);
  --shadow-pop:0 16px 36px rgba(0,0,0,0.30); --shadow-deep:0 20px 44px rgba(0,0,0,0.35);
  --shadow-gold:0 10px 24px rgba(221,168,83,0.35); --focus-ring:0 0 0 3px rgba(221,168,83,0.40);
  --ease-out:ease; --ease-reveal:cubic-bezier(0.16,1,0.3,1);
  --dur-fast:0.15s; --dur:0.2s; --dur-slow:0.3s; --dur-reveal:0.9s; --lift-hover:translateY(-2px);
}

/* Dark mode */
[data-theme="dark"] {
  --surface-page:var(--ink-950); --surface-alt:var(--ink-900); --surface-wash:var(--ink-900);
  --surface-card:var(--ink-800); --surface-inverse:var(--ink-900); --surface-inverse-raised:var(--ink-800);
  --text-display:var(--white); --text-strong:var(--white); --text-body:var(--on-dark-3);
  --text-soft:var(--on-dark-2); --text-muted:rgba(255,255,255,0.62);
  --accent:var(--gold-300); --accent-contrast:var(--ink-900);
  --border-subtle:rgba(255,255,255,0.10); --border-strong:rgba(255,255,255,0.22);
  --icon-filter:invert(1);
}

@keyframes shiftFadeUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:none; } }

/* ---- Global baseline (formerly from hello-elementor reset.css, now removed) ---- */
*, *::before, *::after { box-sizing:border-box; }
body { margin:0; background:var(--surface-page); color:var(--text-body); font-family:var(--font-body); -webkit-font-smoothing:antialiased; }

/* ---- Scoped base (only affects the DS site tree) ---- */
.ds-root, .ds-root *, .ds-root *::before, .ds-root *::after { box-sizing:border-box; }
.ds-root {
  font-family:var(--font-body); font-size:var(--text-base); line-height:var(--lh-body);
  color:var(--text-body); background:var(--surface-page); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.ds-root h1,.ds-root h2,.ds-root h3,.ds-root h4,.ds-root h5,.ds-root h6 { font-family:var(--font-display); color:var(--text-display); margin:0; }
.ds-root img { max-width:100%; }
.ds-root ::selection { background:var(--gold-tint); }
.ds-reveal { animation:shiftFadeUp var(--dur-reveal) var(--ease-reveal) both; }

/* ---- Layout utilities ---- */
.ds-container { width:100%; max-width:var(--container-max); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.ds-container--content { max-width:var(--container-content); }
.ds-section { padding:var(--section-pad-y) 0; }
.ds-section--lg { padding:var(--section-pad-y-lg) 0; }
.ds-section--alt { background:var(--surface-alt); }
.ds-section--inverse { background:var(--grad-inverse); }

.ds-grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--grid-gap); }
.ds-grid-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--grid-gap); }
.ds-grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--grid-gap); }
/* Custom column ratios must come via --split-cols (not inline grid-template-columns),
   so the ≤900px single-column override below still wins on mobile. */
.ds-split { display:grid; grid-template-columns:var(--split-cols, 1fr 1.1fr); gap:56px; align-items:center; }
.ds-split--rev { grid-template-columns:1.1fr 0.9fr; }
.ds-checklist { display:grid; grid-template-columns:repeat(var(--cols,2),minmax(0,1fr)); gap:12px 32px; }
/* Column-flow variant: fills the first column top-to-bottom before the second. */
.ds-checklist--colflow { grid-auto-flow:column; grid-template-rows:repeat(var(--rows,10),auto); }
@media (max-width:640px) { .ds-checklist--colflow { grid-auto-flow:row; grid-template-rows:none; } }
.ds-contact-grid { display:grid; grid-template-columns:1.2fr 0.8fr; gap:48px; align-items:start; }
.ds-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ds-team-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--grid-gap); }
@media (max-width:900px) { .ds-team-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:820px) { .ds-contact-grid { grid-template-columns:1fr; } }
@media (max-width:640px) { .ds-checklist { grid-template-columns:1fr; } .ds-form-grid { grid-template-columns:1fr; } }
@media (max-width:520px) { .ds-team-grid { grid-template-columns:1fr; } }

/* ---- Tablet ---- */
@media (max-width:900px) {
  .ds-grid-3, .ds-grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ds-split, .ds-split--rev { grid-template-columns:1fr; gap:32px; }
  .ds-split .ds-order-img { order:-1; }
}
/* ---- Mobile ---- */
@media (max-width:600px) {
  :root { --section-pad-y:48px; --section-pad-y-lg:56px; }
  .ds-grid-3, .ds-grid-4, .ds-grid-2 { grid-template-columns:1fr; }
  .ds-hide-sm { display:none !important; }
}
html { scroll-behavior:smooth; }

/* ============================================================
   Header
   ============================================================ */
.ds-header { position:sticky; top:0; z-index:50; -webkit-tap-highlight-color:transparent; }
.ds-header, .ds-header *, .ds-header *::before, .ds-header *::after { box-sizing:border-box; }
.ds-header button:focus-visible, .ds-header a:focus-visible { outline:2px solid var(--gold-300); outline-offset:2px; }

/* --- Main bar --- */
.ds-header__main { background:var(--ink-900); box-shadow:0 1px 0 rgba(255,255,255,0.05); transition:box-shadow var(--dur-slow) var(--ease-out); }
.ds-header[data-scrolled="true"] .ds-header__main { box-shadow:0 8px 24px rgba(0,0,0,0.35); }
.ds-header__bar { max-width:var(--container-max); margin:0 auto; padding:0 var(--gutter); height:94px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.ds-header__logo { display:flex; align-items:center; flex:none; }
.ds-header__logo img { height:82px; display:block; }
.ds-nav { display:flex; align-items:center; gap:28px; }
.ds-nav__link { position:relative; display:inline-flex; align-items:center; height:94px; font-family:var(--font-display); font-size:15.5px; font-weight:600; letter-spacing:0.01em; color:var(--on-dark-1); text-decoration:none; transition:color var(--dur) var(--ease-out); white-space:nowrap; }
.ds-nav__link::after { content:''; position:absolute; left:0; right:0; bottom:29px; height:2px; background:var(--gold-300); transform:scaleX(0); transform-origin:left center; transition:transform var(--dur) var(--ease-out); }
.ds-nav__link:hover, .ds-nav__link[data-active="true"] { color:var(--gold-300); }
.ds-nav__link:hover::after, .ds-nav__link[data-active="true"]::after { transform:scaleX(1); }
.ds-header__actions { display:flex; align-items:center; gap:16px; flex:none; }
.ds-header__desk-actions { display:flex; align-items:center; gap:18px; }
.ds-callbtn { display:inline-flex; align-items:center; gap:10px; color:var(--white); text-decoration:none; font-family:var(--font-display); font-weight:600; font-size:15.5px; white-space:nowrap; transition:color var(--dur) var(--ease-out); }
.ds-callbtn svg { width:36px; height:36px; padding:9px; box-sizing:border-box; border-radius:50%; background:rgba(255,208,132,0.14); color:var(--gold-300); flex:none; }
.ds-callbtn:hover { color:var(--gold-300); }
.ds-burger { display:none; width:46px; height:46px; border-radius:var(--radius-1); border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.06); color:var(--white); cursor:pointer; align-items:center; justify-content:center; }
/* Override hello-elementor reset.css's `button:hover/:focus` pink (#CC3366). */
.ds-header .ds-burger:hover, .ds-header .ds-burger:focus, .ds-header .ds-burger:active { background:rgba(255,255,255,0.14); color:var(--white); border-color:rgba(255,255,255,0.4); }
.ds-mobilenav { display:none; }

/* --- Mobile quick-action row (Call · Book) --- */
.ds-header__mutil { display:none; }
.ds-mutil { flex:1; min-width:0; display:flex; align-items:center; gap:12px; padding:11px 14px; text-decoration:none; -webkit-tap-highlight-color:transparent; }
.ds-mutil + .ds-mutil { border-left:1px solid rgba(255,255,255,0.12); }
.ds-mutil__icon { width:42px; height:42px; flex:none; border-radius:50%; background:var(--gold-300); color:var(--ink-900); display:flex; align-items:center; justify-content:center; }
.ds-mutil__icon svg { width:20px; height:20px; }
.ds-mutil__text { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.ds-mutil__label { font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-300); }
.ds-mutil__value { font-family:var(--font-body); font-size:13.5px; color:var(--white); line-height:1.25; }

/* --- Services dropdown --- */
.ds-dropdown { position:absolute; top:100%; left:0; margin-top:0; min-width:300px; padding:10px 0; background:var(--ink-800); border-radius:0 0 var(--radius-2) var(--radius-2); border-top:2px solid var(--gold-300); box-shadow:var(--shadow-pop); z-index:60; }
.ds-dropdown a { display:block; padding:10px 20px; color:var(--on-dark-2); text-decoration:none; font-family:var(--font-display); font-size:14.5px; font-weight:500; border-left:2px solid transparent; transition:color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out); }
.ds-dropdown a:hover { color:var(--gold-300); border-left-color:var(--gold-300); background:rgba(255,255,255,0.03); }

@media (max-width:860px) {
  .ds-nav { display:none; }
  .ds-header__desk-actions { display:none; }
  .ds-burger { display:inline-flex; }
  .ds-header__bar { height:84px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
  .ds-header__logo { grid-column:2; justify-self:center; }
  .ds-header__actions { grid-column:3; justify-self:end; }
  .ds-header__logo img { height:74px; }
  .ds-header__mutil { display:flex; align-items:stretch; background:var(--ink-950); border-top:1px solid rgba(255,255,255,0.07); }
  .ds-mobilenav { display:block; background:var(--ink-800); border-top:1px solid rgba(255,255,255,0.08); }
  .ds-mobilenav a { display:block; padding:15px var(--gutter); color:var(--white); text-decoration:none; font-family:var(--font-display); font-weight:600; font-size:16px; border-bottom:1px solid rgba(255,255,255,0.06); }
  .ds-mobilenav a:hover { color:var(--gold-300); }
}

/* ============================================================
   Hero
   ============================================================ */
.ds-hero { position:relative; display:flex; align-items:center; min-height:min(78vh,720px); background:var(--ink-900); overflow:hidden; isolation:isolate; }
.ds-hero__bg { position:absolute; inset:0; z-index:-2; background-position:center; background-size:cover; background-repeat:no-repeat; }
.ds-hero__scrim { position:absolute; inset:0; z-index:-1; background:var(--scrim-hero); }
.ds-hero__inner { width:100%; max-width:var(--container-max); margin:0 auto; padding:96px var(--gutter); }
.ds-hero__content { max-width:640px; }
.ds-root .ds-hero__title { margin:0 0 20px; font-size:var(--text-hero); font-weight:800; line-height:var(--lh-tight); letter-spacing:var(--ls-tight); color:var(--white); text-wrap:balance; }
.ds-root .ds-hero__title em { font-style:normal; color:var(--gold-300); }
.ds-hero__sub { margin:0 0 34px; max-width:560px; font-family:var(--font-body); font-size:18px; line-height:1.62; color:rgba(255,255,255,0.86); }
.ds-hero__points { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:14px 30px; margin:0; padding:0; list-style:none; text-align:left; }
.ds-hero__points li { display:flex; align-items:flex-start; gap:10px; color:rgba(255,255,255,0.92); font-family:var(--font-body); font-size:15px; font-weight:500; line-height:1.45; }
.ds-hero__points svg { margin-top:2px; }
@media (max-width:600px) {
  .ds-hero__inner { padding:72px var(--gutter) 64px; }
  .ds-hero__scrim { background:linear-gradient(180deg, rgba(6,5,4,0.62) 0%, rgba(12,10,8,0.74) 100%); }
  /* Keep the centered headline in clean groups on small screens:
     "Physiotherapy" / "and Rehab" / "in Scarborough" */
  .ds-root .ds-hero__title { font-size:clamp(26px, 8.2vw, 34px); }
  .ds-hero__and { display:block; }
  .ds-hero__br { display:none; }
  .ds-hero__points { flex-direction:column; align-items:flex-start; gap:12px; }
}

/* ============================================================
   Photo carousel prev/next arrows
   ============================================================ */
.ds-carousel__arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:1; width:38px; height:38px; padding:0; border:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; background:rgba(12,10,8,0.45); color:#fff; transition:background var(--dur) var(--ease-out); }
.ds-carousel__arrow:hover { background:rgba(12,10,8,0.72); }
.ds-carousel__arrow--prev { left:12px; }
.ds-carousel__arrow--next { right:12px; }

/* ============================================================
   Direct-billing insurer marquee
   ============================================================ */
.ds-billing__wrap { position:relative; }
.ds-billing__viewport { overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; margin:44px 0 36px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.ds-billing__viewport::-webkit-scrollbar { display:none; }
.ds-billing__track { display:flex; gap:28px; width:max-content; }
.ds-billing__item { flex:none; width:172px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.ds-billing__card { width:128px; height:128px; border-radius:50%; background:var(--white); display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:var(--shadow-card); }
.ds-billing__card img { width:100px; height:100px; object-fit:contain; }
.ds-billing__name { font-family:var(--font-display); font-size:14.5px; font-weight:600; line-height:1.3; color:var(--on-dark-1); text-align:center; }
@media (max-width:600px) { .ds-billing__item { width:140px; } .ds-billing__card { width:108px; height:108px; } .ds-billing__card img { width:84px; height:84px; } }

/* ============================================================
   Footer
   ============================================================ */
.ds-footer { background:var(--ink-950); color:var(--on-dark-2); }
.ds-footer__grid { max-width:var(--container-max); margin:0 auto; padding:64px var(--gutter) 40px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; }
.ds-footer__logo { width:260px; max-width:70%; display:block; margin-bottom:18px; }
.ds-footer__col-h { font-family:var(--font-display); font-size:15px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-300); margin-bottom:16px; }
.ds-footer a.ds-footer__link { display:block; font-family:var(--font-body); font-size:15px; color:var(--on-dark-2); text-decoration:none; line-height:2; }
.ds-footer a.ds-footer__link:hover { color:var(--gold-300); }
.ds-footer__bar { border-top:1px solid rgba(255,255,255,0.1); }
.ds-footer__bar-inner { max-width:var(--container-max); margin:0 auto; padding:18px var(--gutter); display:flex; justify-content:space-between; gap:16px; font-size:13px; color:rgba(255,255,255,0.55); flex-wrap:wrap; }
@media (max-width:860px) { .ds-footer__grid { grid-template-columns:1fr 1fr; gap:32px; } }
@media (max-width:520px) { .ds-footer__grid { grid-template-columns:1fr; } }