/* ==========================================================================
   Basecamp OT
   Typography and colour rebuilt August 2026 for legibility with older readers.
   - Body 19px at weight 400. Nothing below 16px anywhere.
   - Literata: designed for long-form screen reading, even stroke weight.
   - Sea glass replaces sage (hue 191 not 96, so it belongs to the water).
   - Ocean used properly rather than at 2%.
   - Soft corners, 48px tap targets.
   ========================================================================== */

@font-face{font-family:'Literata';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/literata-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Literata';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/literata-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Literata';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/literata-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/figtree-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/figtree-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/figtree-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/figtree-latin-700-normal.woff2') format('woff2')}

:root{
  --chalk:#FCFBF8;      /* page */
  --mist:#F2F6F4;       /* alternate band, green-tinted */
  --linen:#F5F1E9;      /* warm band */
  --dune:#E4DACA;       /* rules, borders */
  --sand:#D9CDB8;

  --sage:#88A090;       /* THE business card green, hue 140 — fills, borders, accents */
  --sage-lt:#D5E0D9;    /* tints */
  --sage-dp:#4E6A5D;    /* buttons and links — 5.9:1 on white */

  --ocean:#2F6C7E;      /* water accent, hue 193 */
  --deep:#22403A;       /* dark bands — deep sea-green */
  --sun:#E8A93F;        /* warm accent, used sparingly */

  --ink:#232A2C;        /* headings — 14.1:1 on chalk */
  --body:#414B4E;       /* body — 8.7:1 on chalk */
  --muted:#6C7679;

  --serif:'Literata', Georgia, 'Times New Roman', serif;
  --sans:'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --wrap:1140px;
  --gutter:24px;
  --r:12px;
  --r-lg:18px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--chalk); color:var(--body);
  font-family:var(--sans); font-size:19px; font-weight:400; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter)}
.narrow{max-width:720px}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif); color:var(--ink); font-weight:600; margin:0 0 .45em; letter-spacing:-.01em;
  text-wrap:balance}   /* stops a single word stranding on the last line */
h1{font-size:clamp(34px,5.4vw,54px); line-height:1.1}
h2{font-size:clamp(27px,3.6vw,38px); line-height:1.15}
h3{font-size:clamp(20px,2.2vw,23px); line-height:1.25}
p{margin:0 0 1.05em; max-width:66ch}
strong{font-weight:600; color:var(--ink)}

.eyebrow{
  font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--sage-dp); margin:0 0 16px;
}
.lede{font-size:clamp(20px,2.2vw,23px); line-height:1.55; color:#33393B; max-width:56ch}
.small{font-size:16px; color:var(--muted)}
.centered{text-align:center; margin-left:auto; margin-right:auto}
.centered p{margin-left:auto; margin-right:auto}

/* ---------- layout ---------- */
section{padding:clamp(56px,7vw,92px) 0}
.band-mist{background:var(--mist)}
.band-linen{background:var(--linen)}
.band-deep{background:var(--deep); color:#D3E2DA}
.band-deep h2,.band-deep h3{color:#F3F9F5}
.band-deep .eyebrow{color:var(--sage-lt)}
.band-deep strong{color:#fff}

.cols-2{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center}
.cols-2 img{border-radius:var(--r-lg)}
/* give the photo a little more room than the copy */
.cols-media{grid-template-columns:1fr 1.18fr; gap:clamp(28px,4vw,52px)}

/* ---------- buttons — sentence case, 48px min, soft ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:14px 26px; border-radius:var(--r);
  font-family:var(--sans); font-size:17px; font-weight:600; letter-spacing:.005em;
  text-decoration:none; border:2px solid transparent; cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.btn-primary{background:var(--sage-dp); color:#fff}
.btn-primary:hover{background:#3E5849}
.btn-line{border-color:var(--sand); color:var(--ink); background:rgba(255,255,255,.85)}
.btn-line:hover{border-color:var(--sage-dp); color:var(--sage-dp)}
.btn-light{background:#fff; color:var(--deep)}
.btn-light:hover{background:var(--mist)}
.btn-line-light{border-color:rgba(255,255,255,.55); color:#fff}
.btn-line-light:hover{background:#fff; color:var(--deep)}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:6px}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(252,251,248,.96);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--dune)}
.header-in{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px var(--gutter)}
.wordmark{text-decoration:none; display:flex; align-items:center; gap:12px; line-height:1.05; color:var(--deep); min-height:46px}
.wm-mark{width:42px; height:42px; flex:none; display:block}
.wm-text{display:block}
.wordmark .wm-name{font-family:var(--serif); font-size:25px; font-weight:600; color:var(--ink); display:block; letter-spacing:-.015em}
/* the lockup is "Basecamp OT" on one line; "occupational therapy" earns its
   keyword weight in the titles, headings and copy, not in the logo */
.nav{display:flex; align-items:center; gap:6px}
.nav a:not(.btn){
  font-family:var(--sans); font-size:17px; font-weight:500; color:#4C5558;
  text-decoration:none; padding:14px 14px; border-radius:8px; min-height:48px;
  display:inline-flex; align-items:center;
}
.nav a:not(.btn):hover,.nav a[aria-current="page"]{color:var(--sage-dp); background:var(--mist)}
.nav .btn{margin-left:8px; min-height:48px; padding:12px 22px; font-size:16px}
.header-actions{display:flex; align-items:center; gap:10px}
.call-mobile{display:none; align-items:center; min-height:48px; padding:12px 20px; border-radius:var(--r);
  background:var(--sage-dp); color:#fff; font-size:16px; font-weight:600; text-decoration:none}
.nav-toggle{display:none; min-height:48px; padding:12px 18px; background:#fff; border:2px solid var(--dune);
  border-radius:var(--r); font-family:var(--sans); font-size:16px; font-weight:600; color:var(--ink)}

/* ---------- hero — full bleed image, copy over it ----------
   Text over photography is the hardest legibility case on the site, so the
   scrim does the work and the shadow only sharpens the edges. Two gradients:
   a vertical one that lands the copy on near-black, and a horizontal one that
   holds the left column dark while the couple stays in clear water.        */
.hero{position:relative; min-height:clamp(540px,76vh,700px); display:flex; align-items:flex-end; overflow:hidden}
.hero>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 62%; z-index:0}
.hero .veil{position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(6,26,33,.44) 0%,rgba(6,26,33,.14) 26%,rgba(6,26,33,.58) 58%,rgba(6,26,33,.90) 100%)}
.hero .veil::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(6,26,33,.40) 0%,rgba(6,26,33,.16) 26%,rgba(6,26,33,0) 52%)}
.hero-in{position:relative; z-index:2; width:100%; padding:0 0 clamp(44px,5vw,68px)}
.hero .eyebrow{font-size:15px; font-weight:700; color:#DCE9E2; text-shadow:0 1px 3px rgba(0,0,0,.75)}
.hero h1{color:#fff; max-width:16ch; text-shadow:0 2px 5px rgba(0,0,0,.55), 0 2px 30px rgba(0,0,0,.5)}
.hero .lede{font-size:clamp(21px,2.4vw,25px); font-weight:500; color:#fff; line-height:1.5;
  text-shadow:0 1px 3px rgba(0,0,0,.8), 0 2px 22px rgba(0,0,0,.55); margin-bottom:28px; max-width:46ch}

/* ---------- split hero ----------
   A bright, sunlit photo can't carry white text without a scrim that kills
   the light. So the photo keeps its brightness and the words get their own
   panel: full contrast, no shadow tricks, and the picture stays a picture. */
.hero-split{display:flex; align-items:stretch; padding:0; background:var(--linen);
  min-height:clamp(500px,68vh,640px); border-bottom:1px solid var(--dune)}
.hs-copy{flex:1 1 0; min-width:0; display:flex; align-items:center;
  padding:clamp(44px,5vw,64px) clamp(28px,4vw,52px) clamp(44px,5vw,64px)
          max(var(--gutter), calc((100vw - var(--wrap))/2 + var(--gutter)))}
.hs-in{max-width:34rem}
.hs-in .lede{color:var(--body); margin-bottom:28px}
.hs-media{flex:1.04 1 0; min-width:0; position:relative; overflow:hidden}
.hs-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:48% 88%}   /* on very wide screens the crop takes sky, never feet */

/* ---------- photo band ---------- */
.photo-band{position:relative; min-height:clamp(300px,38vw,420px); display:grid; place-items:center; overflow:hidden}
.photo-band img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.photo-band .veil{position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(14,38,33,.92) 0%,rgba(14,38,33,.78) 55%,rgba(14,38,33,.52) 100%)}
.photo-band .band-copy{position:relative; z-index:2; color:#fff; width:100%;
  text-shadow:0 1px 3px rgba(0,0,0,.6)}
.photo-band h2{color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.65)}
.photo-band p{color:#fff}
.photo-band .suburbs{font-size:17.5px}

/* ---------- services ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.svc{background:#fff; border:1px solid var(--dune); border-radius:var(--r-lg); padding:26px 26px 24px}
.svc h3{margin-bottom:8px}
.svc p{font-size:17.5px; margin:0; color:var(--body)}

/* services page: one card per row, with the clinical detail set apart */
.svc-list{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; align-items:start}
.svc-list .svc{padding:28px 30px 26px}
.svc-list .svc p{max-width:62ch}
.clinical{margin-top:16px!important; padding-top:14px; border-top:1px solid var(--dune);
  font-size:16.5px!important; color:var(--muted)!important; line-height:1.6}

/* ---------- lists ---------- */
.ticks{list-style:none; margin:0; padding:0}
.ticks li{position:relative; padding-left:32px; margin-bottom:14px; font-size:17.5px}
.ticks li::before{content:""; position:absolute; left:2px; top:.6em; width:13px; height:7px;
  border-left:2.5px solid var(--sage-dp); border-bottom:2.5px solid var(--sage-dp); transform:rotate(-45deg)}
.band-deep .ticks li::before{border-color:var(--sage-lt)}

.suburbs{display:flex; flex-wrap:wrap; gap:8px 0; margin:18px 0 0; padding:0; list-style:none; font-size:17px}
.suburbs li:not(:last-child)::after{content:"·"; margin:0 10px; opacity:.55}

/* ---------- steps ---------- */
.steps{display:grid; gap:0; counter-reset:s}
.step{display:grid; grid-template-columns:52px 1fr; gap:20px; padding:24px 0; border-top:1px solid var(--dune)}
.step:last-child{border-bottom:1px solid var(--dune)}
.step::before{counter-increment:s; content:counter(s);
  font-family:var(--serif); font-size:24px; font-weight:600; color:var(--sage-dp);
  width:44px; height:44px; border-radius:50%; background:var(--mist); display:grid; place-items:center}
.step h3{font-size:21px; margin-bottom:5px}
.step p{font-size:17.5px; margin:0}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--dune); background:#fff; border-radius:var(--r); margin-bottom:8px; border:1px solid var(--dune)}
.faq summary{list-style:none; cursor:pointer; padding:22px 52px 22px 22px; position:relative;
  font-family:var(--serif); font-size:20px; font-weight:600; color:var(--ink); line-height:1.35; min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:22px; top:32px; width:11px; height:11px;
  border-right:2.5px solid var(--sage-dp); border-bottom:2.5px solid var(--sage-dp);
  transform:rotate(45deg); transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(-135deg); top:36px}
.faq .answer{padding:0 22px 22px}
.faq .answer p:last-child{margin-bottom:0}

/* ---------- contact ---------- */
.cols-2-tight{display:grid; grid-template-columns:1fr 1.06fr; gap:clamp(32px,4vw,56px)}
.contact-direct{background:var(--mist); border:1px solid var(--dune);
  border-radius:var(--r-lg); padding:clamp(24px,3vw,34px)}
.contact-card{background:var(--mist); border-radius:var(--r-lg); padding:clamp(26px,3vw,36px)}
hr.rule{border:0; border-top:1px solid var(--dune); margin:36px 0}
.big-link{font-family:var(--serif); font-size:clamp(26px,3.4vw,34px); font-weight:600;
  color:var(--ink); text-decoration:none; display:inline-block; line-height:1.2; min-height:48px}
.big-link:hover{color:var(--sage-dp)}

.form-grid{display:grid; gap:20px}
.field label{display:block; font-family:var(--sans); font-size:16px; font-weight:600; color:var(--ink); margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%; font-family:var(--sans); font-size:18px; color:var(--ink); background:#fff;
  border:2px solid var(--dune); border-radius:var(--r); padding:14px 16px; min-height:52px;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--sage-dp)}
.field textarea{min-height:150px; resize:vertical; line-height:1.6}
.hp{position:absolute; left:-9999px}

/* ---------- footer ---------- */
.site-footer{background:var(--deep); color:#B3C7BC; padding:clamp(48px,6vw,72px) 0 28px; font-size:17px}
.site-footer a{color:#E2EDE6; text-decoration:none; display:inline-flex; align-items:center; min-height:44px}
.site-footer a:hover{color:#fff; text-decoration:underline}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.16)}
.footer-grid h4{font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--sage-lt); margin:0 0 10px}
.footer-grid ul{list-style:none; margin:0; padding:0}
.footer-wm{color:#fff}
.footer-wm .wm-name{color:#fff}
.footer-wm .wm-mark{width:44px; height:44px}
.footer-suburbs{font-size:16px; line-height:1.8; color:#92A99C; padding-top:22px}
.footer-bottom{display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; padding-top:18px; font-size:16px; color:#9DB3A6}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .cols-2,.cols-media,.cols-2-tight{grid-template-columns:1fr}
  .svc-list{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--gutter:20px}
  .wm-mark{width:38px; height:38px}
  .wordmark .wm-name{font-size:23px}
  body{font-size:18px}
  .svc-grid,.svc-list{grid-template-columns:1fr}
  .nav{display:none}
  .nav.open{display:flex; flex-direction:column; align-items:stretch; gap:4px;
    position:absolute; top:100%; left:0; right:0; background:var(--chalk);
    border-bottom:1px solid var(--dune); padding:14px var(--gutter) 22px}
  .nav a:not(.btn){font-size:19px; padding:16px 12px}
  .nav .btn{margin-left:0; margin-top:8px}
  .nav-toggle{display:inline-flex; align-items:center}
  .call-mobile{display:inline-flex}
  .header-in{position:relative}
  .footer-grid{grid-template-columns:1fr; gap:26px}
  .hero-split{flex-direction:column; min-height:0}
  .hs-media{order:-1; flex:none; aspect-ratio:5/4; width:100%}
  .hs-media img{object-position:54% 88%}
  .hs-copy{padding:34px var(--gutter) 40px}
  .hero{min-height:clamp(520px,82vh,660px)}
  .hero>img{object-position:64% 55%}
  .hero .veil{background:linear-gradient(180deg,rgba(6,26,33,.46) 0%,rgba(6,26,33,.24) 24%,rgba(6,26,33,.66) 54%,rgba(6,26,33,.92) 100%)}
  .hero .veil::after{background:none}
  .photo-band .veil{background:linear-gradient(180deg,rgba(14,38,33,.66) 0%,rgba(14,38,33,.90) 100%)}
}

@media (max-width:440px){
  /* on a narrow phone the sub-line can't sit on one line beside Call and Menu,
     and a wrapped lockup reads as a mistake. Mark plus name only; the hero
     says "in-home occupational therapy" two lines later. */
  .wordmark .wm-name{font-size:22px}
  .call-mobile,.nav-toggle{padding:12px 16px; font-size:15px}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto!important}}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--deep); color:#fff; padding:14px 22px; z-index:100; font-size:17px; border-radius:0 0 var(--r) 0}
.skip-link:focus{left:0}