/* Plus Jakarta Sans, served from this site (Syafie, 2026-10-07). SIL Open Font License. */
@font-face{font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:200 800; font-display:swap; src:url("/assets/fonts/plus-jakarta-sans-latin-wght.woff2") format("woff2")}
/* Pulse Rehab: the one shared stylesheet. Every page links to this file. */
/* Palette is locked to light. The site keeps these colours even when the
   visitor's Mac or Windows is set to dark mode (no dark override below,
   and color-scheme:light keeps form controls light too). */
:root{
  color-scheme: light;
  --sky:#8FBBE3; --teal:#5FC1B4; --teal-deep:#3E9C90; --orange:#EDA45F;
  --ink:#243330; --ink-soft:#4f615c; --ink-faint:#7c8e89;
  --bg:#ffffff; --bg-soft:#f3f9f7; --bg-mint:#e8f4f0; --line:#dde9e5;
  --card:#ffffff; --shadow:0 1px 2px rgba(14,32,30,.06),0 8px 24px rgba(14,32,30,.06);
  --radius:16px; --maxw:1120px;
  --font:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  line-height:1.6; -webkit-font-smoothing:antialiased; font-size:17px;
}
h1,h2,h3{line-height:1.2; margin:0 0 .4em; font-weight:700; letter-spacing:-.02em}
h1{font-size:clamp(2rem,5vw,3.3rem); font-weight:800}
h2{font-size:clamp(1.5rem,3.2vw,2.1rem)}
h3{font-size:1.15rem}
p{margin:0 0 1rem}
a{color:var(--teal-deep); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.eyebrow{text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; font-weight:700; color:var(--teal-deep); margin:0 0 .6em}
.muted{color:var(--ink-soft)}
.intro{max-width:56ch}
section{padding:84px 0}
.section-soft{background:var(--bg-soft)}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:1rem;
  padding:.85em 1.4em; border-radius:999px; border:1.5px solid transparent; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-primary{background:var(--orange); color:#3a2410; box-shadow:var(--shadow)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--teal)}

/* Header */
header.site{
  position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:-.02em; font-size:1.25rem; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand svg{display:block; flex:none}
.navlinks{display:flex; align-items:center; gap:24px}
.navlinks a{color:var(--ink-soft); font-weight:500; font-size:.95rem; white-space:nowrap}
.navlinks a:hover{color:var(--ink); text-decoration:none}
.navlinks a[aria-current],.navlinks a.current{color:var(--ink); font-weight:700}
.navlinks .btn[aria-current]{color:#3a2410}
/* Dropdown under a menu item (Our Services) */
.navgroup{position:relative; display:flex; align-items:center}
.subtoggle{background:none; border:0; padding:8px 4px; margin-left:2px; cursor:pointer; color:var(--ink-soft); display:flex; border-radius:6px}
.subtoggle:hover{color:var(--ink)}
.subtoggle svg{transition:transform .15s ease}
.navgroup.open .subtoggle svg{transform:rotate(180deg)}
.submenu{display:none; position:absolute; top:100%; left:-14px; padding-top:10px; z-index:60}
.submenu-panel{background:var(--bg); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:8px; min-width:250px}
.submenu a{display:block; padding:10px 14px; border-radius:8px}
.submenu a:hover{background:var(--bg-soft)}
@media (hover:hover){.navgroup:hover .submenu{display:block}}
.navgroup:focus-within .submenu,.navgroup.open .submenu{display:block}
.navtoggle{display:none; background:none; border:0; color:var(--ink); cursor:pointer; padding:8px}
.nav-contact{display:none}
@media (max-width:420px){
  .nav .brand{font-size:1.05rem; gap:8px}
  .nav .brand svg{width:32px; height:32px}
}
@media (max-width:980px){
  .nav-contact{display:inline-flex; margin-left:auto; margin-right:2px; padding:.5em 1em; font-size:.85rem}
  .navlinks > .btn{display:none}
  .brand{white-space:nowrap}
  .navlinks{
    position:absolute; top:72px; left:0; right:0; background:var(--bg); flex-direction:column;
    align-items:stretch; gap:0; padding:8px 0; border-bottom:1px solid var(--line); display:none;
  }
  .navlinks.open{display:flex}
  .navlinks a{padding:14px 24px}
  .navlinks .btn{margin:10px 24px}
  /* Phone menu: the pages under Our Services are always listed, indented. No arrow needed. */
  .navgroup{display:block}
  .navgroup > a{display:block}
  .subtoggle{display:none}
  .submenu{display:block; position:static; padding:0}
  .submenu-panel{border:0; box-shadow:none; background:none; padding:0 0 6px 18px; min-width:0}
  .submenu a{padding:10px 24px; border-radius:0}
  .navtoggle{display:block}
}

/* Hero */
.hero{padding:88px 0 72px; background:
  radial-gradient(60% 90% at 85% 0%, var(--bg-mint) 0%, transparent 60%),
  radial-gradient(50% 80% at 0% 100%, var(--bg-soft) 0%, transparent 55%);}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr; gap:32px}}
.hero p.lede{font-size:1.15rem; color:var(--ink-soft); max-width:40ch; margin-bottom:.8rem}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px}
.hero-art{display:flex; justify-content:center}
.hero-art svg{width:min(420px,90%); height:auto}

/* Conditions list (hero) */
.conditions{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.conditions li{display:flex; gap:12px; align-items:baseline; font-size:1.05rem}
.conditions .dot{width:10px;height:10px;border-radius:50%;background:var(--orange);flex:none;transform:translateY(-1px)}
.conditions small{display:block; color:var(--ink-soft); font-size:.9rem; font-weight:400}

/* Trust bar */
.trust{display:flex; flex-wrap:wrap; gap:14px 36px; margin-top:36px; padding-top:28px; border-top:1px solid var(--line)}
.trust div{display:flex; align-items:center; gap:10px; color:var(--ink-soft); font-size:.95rem; font-weight:500}
.trust .dot{width:9px;height:9px;border-radius:50%;background:var(--teal);flex:none}

/* Cards grid */
.grid{display:grid; gap:22px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.grid-3,.grid-2{grid-template-columns:1fr}}
@media (max-width:520px){.grid-4{grid-template-columns:1fr}}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow)}
.card .ic{width:46px;height:46px;border-radius:12px;background:var(--bg-mint);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.card h3{margin-bottom:.35em}
.card p{margin:0; color:var(--ink-soft); font-size:.97rem}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.more{display:inline-block; margin-top:16px; font-weight:600; font-size:.95rem}
.card-wide{grid-column:1/-1}

/* About / USP */
.usp-list{list-style:none; padding:0; margin:20px 0 0; display:grid; gap:18px}
.usp-list li{display:flex; gap:14px; align-items:flex-start}
.usp-list .tick{flex:none; width:26px;height:26px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;margin-top:2px}
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
@media (max-width:860px){.about-grid{grid-template-columns:1fr; gap:28px}}

/* Process */
.steps{counter-reset:step}
.step{position:relative; padding-top:64px}
.step::before{
  counter-increment:step; content:counter(step);
  position:absolute; top:24px; left:28px; width:34px; height:34px; border-radius:50%;
  background:var(--orange); color:#3a2410; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.step ol{margin:.6em 0 0; padding-left:1.2em; color:var(--ink-soft); font-size:.97rem}
.lead-note{display:flex; gap:14px; align-items:center; margin-top:28px; padding:18px 22px; background:var(--card);
  border:1px solid var(--line); border-left:4px solid var(--teal); border-radius:12px}

/* Equipment */
.equip-media{aspect-ratio:4/3; max-width:100%; border-radius:12px; margin-bottom:16px; border:1px dashed var(--line);
  background:linear-gradient(135deg,var(--bg-mint),var(--bg-soft)); display:flex; flex-direction:column; gap:8px;
  align-items:center; justify-content:center; color:var(--ink-faint); font-size:.82rem}
.equip-media img{width:100%; height:100%; object-fit:cover; border-radius:12px}
.loan{display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; margin-top:28px;
  background:var(--bg-mint); border-radius:var(--radius); padding:28px}
@media (max-width:640px){.loan{grid-template-columns:1fr}}
.loan .ic{width:56px;height:56px;border-radius:14px;background:var(--card);display:flex;align-items:center;justify-content:center}
.loan p{margin:0; color:var(--ink-soft)}
/* Draft-only marker for items HS has not decided. TODO: remove before launch. */
.draft{border-style:dashed; border-color:var(--orange); box-shadow:none}
.draft-flag{display:inline-block; background:#fdf0e3; color:#8a5420; font-weight:700; font-size:.7rem;
  padding:3px 9px; border-radius:999px; letter-spacing:.04em; margin-bottom:10px}

/* Team */
.team-photo{aspect-ratio:4/3; max-width:100%; background:linear-gradient(135deg,var(--bg-mint),var(--bg-soft));
  border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--ink-faint);
  font-size:.85rem; text-align:center; padding:16px; margin-bottom:18px; border:1px dashed var(--line)}
.team-headshot{display:block; width:140px; height:140px; border-radius:50%; object-fit:cover; margin:0 auto 18px; border:3px solid var(--bg-mint)}
/* Photo, name, role and belief line centred; the detail fields below stay left-aligned */
#team .card > h3, #team .team-role, #team .belief{text-align:center}
.team-role{color:var(--teal-deep); font-weight:600; font-size:.92rem; margin:0 0 .6em}
/* Bio framework: same fields, same order, for every team member */
.belief{font-style:italic; color:var(--ink-soft); margin:0; font-size:.97rem}
.bio{display:grid; grid-template-columns:max-content 1fr; gap:8px 18px; margin:16px 0 0; padding-top:16px; border-top:1px solid var(--line); font-size:.95rem}
.bio dt{color:var(--ink-faint); font-weight:600}
.bio dd{margin:0; color:var(--ink)}
.tbc{color:var(--ink-faint)}
.bio-list{list-style:none; margin:0; padding:0; display:grid; gap:6px}

/* Partners */
.partner-tile{aspect-ratio:3/2; max-width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; text-align:center; background:var(--card); border:1px dashed var(--line); border-radius:12px; color:var(--ink-faint); font-size:.85rem; padding:12px}
.partner-tile strong{color:var(--ink-soft); font-size:.95rem}
/* A partner card that links out (Cognetix to its Etsy shop, HS 12 Oct): lifts on hover */
.partner-link{transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.partner-link:hover{text-decoration:none; border-color:var(--teal); box-shadow:var(--shadow); transform:translateY(-2px)}
.partner-link:focus-visible{outline:3px solid var(--sky); outline-offset:3px}

/* Careers */
.roles{display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 26px}
.role{background:var(--card); border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-weight:600; font-size:.95rem}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr; gap:32px}}
.field{margin-bottom:16px}
.field label{display:block; font-weight:600; font-size:.9rem; margin-bottom:6px}
.field input,.field textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:1rem; background:var(--bg); color:var(--ink);
}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--teal)}
.contact-ways{display:grid; gap:14px; margin-top:20px}
.contact-ways a{display:flex; gap:14px; align-items:center; padding:16px; background:var(--card);
  border:1px solid var(--line); border-radius:12px; color:var(--ink); font-weight:500}
.contact-ways a:hover{border-color:var(--teal); text-decoration:none}
.contact-ways .ic{width:40px;height:40px;border-radius:10px;background:var(--bg-mint);display:flex;align-items:center;justify-content:center;flex:none}
.form-note{font-size:.85rem;color:var(--ink-faint);margin-top:12px;text-align:center}
/* Contact, "What to include" card: one text size, even spacing, note left-aligned under a rule (Syafie, 12 Oct) */
.contact-include h3{margin-bottom:12px}
.contact-include > p.muted{margin-bottom:16px}
.contact-include ul.ticks li{font-size:.97rem}
.card.contact-include p.form-note{margin-top:20px; padding-top:16px; border-top:1px solid var(--line); text-align:left; font-size:.85rem}

/* Footer */
footer.site{background:var(--bg-soft); border-top:1px solid var(--line); padding:48px 0 32px; font-size:.92rem}
.foot-grid{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; align-items:flex-start}
footer .muted{color:var(--ink-faint); max-width:42ch}
.foot-legal{margin-top:28px; padding-top:20px; border-top:1px solid var(--line); color:var(--ink-faint); font-size:.82rem}

.badge{display:inline-block;background:var(--bg-mint);color:var(--teal-deep);font-weight:600;
  font-size:.72rem;padding:4px 10px;border-radius:999px;letter-spacing:.04em}

/* ================================================================
   Page-specific styles. Each block is scoped to one page's <main>
   so the shared header and footer stay identical everywhere.
   ================================================================ */
html{scroll-padding-top:84px}

/* ---- Conditions page ---- */
/* Title in the same place as every other page; the article text stays a 960px column, left-aligned under it (Syafie, 7 Oct) */
.page-conditions main .wrap:not(.page-head) > *{max-width:960px}
.page-conditions main h1{font-size:clamp(1.9rem,4.5vw,2.8rem)}
.page-conditions main h2{font-size:clamp(1.5rem,3.2vw,2rem)}
.page-conditions main h3{font-size:1.05rem; margin-top:1.4em}
.page-conditions main section{padding:64px 0}
.page-conditions main .btn{padding:.8em 1.3em}
.page-head{padding:56px 24px 24px}
.jump{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.jump a{background:var(--bg-mint); color:var(--teal-deep); font-weight:600; font-size:.92rem; padding:8px 16px; border-radius:999px}
.jump a:hover{text-decoration:none; background:#d9eee8}
.callout{background:var(--card); border:1px solid var(--line); border-left:4px solid var(--orange); border-radius:12px; padding:18px 22px; margin:18px 0 8px; font-weight:600; font-size:1.08rem}
.callout span{display:block; font-weight:400; color:var(--ink-soft); font-size:.97rem; margin-top:6px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:8px}
@media (max-width:760px){.two{grid-template-columns:1fr}}
.page-conditions main .card{padding:24px}
.page-conditions main .card h3{margin-top:0; margin-bottom:.4em}
.page-conditions main .card p{font-size:inherit}
ul.ticks{list-style:none; padding:0; margin:0; display:grid; gap:10px}
ul.ticks li{display:flex; gap:10px; align-items:baseline; color:var(--ink-soft)}
ul.ticks li::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--teal); flex:none; transform:translateY(-2px)}
.page-conditions main .table-wrap{overflow-x:auto; margin-top:12px; border:1px solid var(--line); border-radius:12px; background:var(--card)}
.page-conditions main table{border-collapse:collapse; width:100%; min-width:560px; font-size:.95rem}
.page-conditions main th,.page-conditions main td{text-align:left; vertical-align:top; padding:14px 16px; border-bottom:1px solid var(--line)}
.page-conditions main tr:last-child td{border-bottom:0}
.page-conditions main thead th{background:var(--bg-mint); color:var(--ink); font-weight:700}
.page-conditions main tbody th{color:var(--ink-faint); font-weight:600; width:24%}
.page-conditions main td{color:var(--ink-soft)}
.cta{margin-top:26px}

/* ---- Privacy page ---- */
.page-privacy main{padding:0; line-height:1.65}
/* Privacy text stays a readable 760px column, left-aligned under the page title like every other page */
.page-privacy main .wrap:not(.page-head) > *{max-width:760px}
.page-privacy main h2{font-size:1.3rem; margin-top:2.2em}
.page-privacy main ul{margin:0 0 1rem; padding-left:1.2em; color:var(--ink-soft)}
.page-privacy main li{margin-bottom:.35em}
.updated{color:var(--ink-faint); font-size:.9rem}
.summary{background:var(--bg-mint); border-radius:var(--radius); padding:22px 26px; margin:24px 0 8px}
.summary strong{display:block; margin-bottom:8px}
.page-privacy main .summary ul{margin:0; color:var(--ink)}
.box{background:var(--card); border:1px solid var(--line); border-left:4px solid var(--orange); border-radius:12px; padding:16px 20px; margin:12px 0 16px; color:var(--ink-soft)}
.page-privacy main .table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:12px; margin:12px 0 16px}
.page-privacy main table{border-collapse:collapse; width:100%; min-width:480px; font-size:.95rem}
.page-privacy main th,.page-privacy main td{text-align:left; vertical-align:top; padding:12px 16px; border-bottom:1px solid var(--line)}
.page-privacy main tr:last-child td{border-bottom:0}
.page-privacy main thead th{background:var(--bg-soft)}
.page-privacy main td{color:var(--ink-soft)}

/* ---- Inner pages (equipment, team, FAQ, contact): a page heading, smaller than the home hero ---- */
.page-inner main h1{font-size:clamp(1.9rem,4.5vw,2.8rem)}
.page-foot{padding:40px 24px 64px}
.contact-band{text-align:center}
.contact-band .muted{max-width:56ch; margin:0 auto 1.6rem}
.team-cta{margin-top:40px}
.team-cta .muted{margin-bottom:1rem}

/* ---- Device articles (src/equipment/*.md) ---- */
.page-article main{--maxw:760px}
.page-article main h1{font-size:clamp(1.9rem,4.5vw,2.8rem)}
.article{padding-bottom:72px}
.article h2{font-size:1.3rem; margin-top:1.8em}
.article p,.article li{color:var(--ink-soft)}
.article ul{padding-left:1.2em; margin:0 0 1rem}
.article .cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:36px}
.soon{display:inline-block; margin-top:16px; font-size:.85rem; font-weight:600; color:var(--ink-faint)}
.draft-banner{background:#fdf0e3; color:#8a5420; text-align:center; font-weight:700; font-size:.85rem; padding:10px 24px}
/* 2026-10-04: hero conditions are links */
.conditions a{color:inherit; text-decoration:none; border-bottom:1px solid transparent}
.conditions a:hover{color:var(--teal-deep); border-bottom-color:currentColor}
.conditions a strong::after{content:" →"; font-weight:400; color:var(--teal-deep)}
/* 2026-10-04: four hero points, two by two */
.trust{display:grid; grid-template-columns:1fr 1fr; gap:14px 28px}
@media (max-width:520px){.trust{grid-template-columns:1fr}}

/* ---- Activities page ---- */
.activity-shot{display:block; aspect-ratio:4/3; max-width:100%; border-radius:12px; overflow:hidden; margin-bottom:16px; border:1px solid var(--line); background:var(--bg-soft)}
.activity-shot img{width:100%; height:100%; object-fit:cover; object-position:top; display:block}
.sister-note{margin-top:36px; padding:22px 26px; background:var(--bg-mint); border-radius:var(--radius); max-width:760px}
.sister-note p{margin:0 0 6px; color:var(--ink-soft)}
.sister-note strong{color:var(--ink)}

/* Who we are: centred heading with the logo under it (Our Team page) */
/* Every section that uses the heading system: 64px above the label and 64px after the last content */
section:has(.section-head){padding:64px 0}
/* Heading system (About us page first): small teal label, then the section heading,
   centred, no full stops. Sub-headings sit one clear step above card titles. */
.section-head{text-align:center; margin:0 auto 36px; max-width:760px}
.section-head h2{margin-bottom:0}
.section-head .intro{max-width:56ch; margin:14px auto 0}
.subhead{font-size:1.4rem; margin:40px 0 12px}
.partner-row{display:flex; flex-wrap:wrap; justify-content:center; gap:22px}
.partner-row .partner-tile{width:220px}
.partner-row .partner-real{width:280px; aspect-ratio:auto; border-style:solid; padding:14px; justify-content:flex-start; gap:8px; color:var(--ink-soft); font-size:.92rem; line-height:1.5}
/* Partner logos in a circle, matching the team headshots. The circle is a frame around the logo,
   so the logo itself is never rounded or trimmed. Wide logos: width set per logo so the corners stay
   at least 4px inside the ring. A square logo with its own background fills the frame (.logo-fill). */
.logo-circle{display:flex; align-items:center; justify-content:center; width:120px; height:120px; box-sizing:border-box; border-radius:50%; background:#fff; border:3px solid var(--bg-mint); overflow:hidden; margin:0 auto 6px; flex:none}
.logo-circle img{display:block; height:auto; max-width:none; border-radius:0}
.logo-circle img.logo-fill{width:100%; height:100%; object-fit:cover}
.partner-real strong{font-size:1.05rem; color:var(--ink)}
.about-head{text-align:center; margin-bottom:28px}
.about-head h2{margin-bottom:28px; text-wrap:balance}
.about-head svg{display:block; margin:0 auto; max-width:100%}
/* The two columns under it start on the same line */
.about-head + .about-grid{align-items:start}
.about-head + .about-grid .usp-list{margin-top:0}
/* Who we are as one short centred piece, no ticks (HS, 12 Oct) */
.about-text{max-width:760px; text-align:center}
.about-text p{margin:0; color:var(--ink-soft); font-size:1.05rem; line-height:1.7; text-wrap:pretty}
.about-text p + p{margin-top:14px}
/* A partner not yet agreed: red outline, preview only */
.partner-row .partner-pending{border-color:#d9534f; box-shadow:0 0 0 1px #d9534f}
/* Founders: one card across the full row, photo centred above the story */
/* Its own row, centred, the same width as one team card */
.founders{display:flex; flex-direction:column; align-items:center; max-width:760px; margin:0 auto}
.founders-photo{display:block; width:100%; max-width:640px; height:auto; border-radius:18px; margin:0 auto 22px}
.founders-story{max-width:640px; width:100%; text-align:center}
.founders-story h3{font-size:1.4rem; margin:0 0 12px; text-align:center}
.founders-story p{color:var(--ink-soft); margin:0 0 14px; text-align:justify; text-align-last:center; hyphens:manual; text-wrap:pretty}
@media (max-width:600px){.founders-story p{text-align:center}}
.founders-story p:last-child{margin-bottom:0}
/* Preview-only filler cards: red outline, blank round photo */
.team-filler{border:1px solid #d9534f; box-shadow:0 0 0 1px #d9534f}
.headshot-blank{background:var(--bg-soft)}
/* 2026-10-05: founders subtitle */
.founders-story .team-role{color:var(--teal-deep); text-align:center; margin:-6px 0 14px}
/* FAQ fee table (HS 7 Oct): longer sessions show the full price struck, then the session price. */
.fee-table{border-collapse:collapse; width:100%; max-width:460px; margin:14px auto 0; font-size:.95rem}
.fee-table th,.fee-table td{text-align:center; padding:8px 12px; border-bottom:1px solid var(--line)}
.fee-table thead th{font-weight:700; color:var(--ink); background:var(--bg-mint); border-bottom:none}
.fee-table thead th:first-child{border-radius:10px 0 0 10px}
.fee-table thead th:last-child{border-radius:0 10px 10px 0}
.fee-table caption{text-align:center; font-weight:700; color:var(--ink, inherit); padding-bottom:10px}
.fee-table s{opacity:.6; margin-right:6px}

/* FAQ (Syafie, 2026-10-07): grouped questions, an icon per question, a + that turns to x, smooth open */
.faq{max-width:820px}
.faq-group{margin-top:40px}
.faq-group-title{font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700; color:var(--teal-deep); margin:0 0 14px}
.faq-item{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:12px; overflow:hidden; transition:border-color .2s, box-shadow .2s, transform .2s}
.faq-item:hover{border-color:var(--teal); transform:translateY(-1px); box-shadow:0 1px 2px rgba(14,32,30,.06),0 12px 28px rgba(14,32,30,.09)}
.faq-item[open]{border-color:var(--teal); box-shadow:inset 4px 0 0 var(--teal), var(--shadow)}
.faq-item summary{display:flex; align-items:center; gap:16px; padding:18px 22px; cursor:pointer; list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:3px solid var(--sky); outline-offset:-3px; border-radius:var(--radius)}
.faq-ic{flex:none; width:42px; height:42px; border-radius:12px; background:var(--bg-mint); display:flex; align-items:center; justify-content:center; transition:background .2s}
.faq-ic svg{width:22px; height:22px; fill:none; stroke:var(--teal-deep); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:stroke .2s}
.faq-item[open] .faq-ic{background:var(--teal)}
.faq-item[open] .faq-ic svg{stroke:#fff}
.faq-q{flex:1; font-weight:700; font-size:1.1rem; color:var(--ink)}
.faq-toggle{flex:none; position:relative; width:30px; height:30px; border-radius:50%; background:var(--bg-soft); transition:transform .3s ease, background .2s}
.faq-toggle::before,.faq-toggle::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; margin:-1px 0 0 -6px; background:var(--teal-deep); border-radius:2px}
.faq-toggle::after{transform:rotate(90deg)}
.faq-item[open] .faq-toggle{transform:rotate(135deg); background:var(--bg-mint)}
.faq-a{padding:0 22px 22px 80px; color:var(--ink-soft)}
.faq-a p{margin:0 0 .6em}
.faq-a p:last-child{margin-bottom:0}
.faq-a ul{margin:0}
.faq-item[open] .faq-a{animation:faq-in .3s ease}
@keyframes faq-in{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
/* Smooth height where the browser supports it; others still get the fade */
@supports selector(::details-content){
  .faq{interpolate-size:allow-keywords}
  .faq-item::details-content{block-size:0; overflow:hidden; transition:block-size .3s ease, content-visibility .3s allow-discrete}
  .faq-item[open]::details-content{block-size:auto}
}
.faq-more{padding:64px 0}
@media (max-width:600px){
  .faq-item summary{padding:16px; gap:12px}
  .faq-ic{width:36px; height:36px}
  .faq-q{font-size:1.02rem}
  .faq-a{padding:0 16px 18px 16px}
}
@media (prefers-reduced-motion:reduce){
  .faq-item,.faq-toggle,.faq-item::details-content{transition:none}
  .faq-item:hover{transform:none}
  .faq-item[open] .faq-a{animation:none}
}
/* FAQ answers with a table: no extra gap above, no rule under the last row, and the whole answer
   (intro line included) centred in the card, not in the indented text column (Syafie, 2026-10-07) */
.faq-a:has(.fee-table){padding-left:22px; text-align:center}
.faq-a .fee-table:first-child{margin-top:0}
.faq-a p + .fee-table{margin-top:12px}
.fee-table tbody tr:last-child td{border-bottom:none}
@media (max-width:600px){ .faq-a:has(.fee-table){padding-left:16px} }

/* Team cards (Syafie, 2026-10-07): read as a table (Focus, Qualifications, Languages). Each card shares the
   row lines of the grid (subgrid), so side by side every part of every card, and every table row, is the same height. */
.team-cards > .card{display:grid; grid-template-rows:subgrid; grid-row:span 8; row-gap:0}
/* A shorter belief line sits in the middle of its row, not at the top (Syafie, 7 Oct) */
.team-cards .belief{align-self:center}
.team-cards .team-headshot{background:#F6F1E7}
.bio-rows{display:contents}
.bio-row{display:grid; grid-template-columns:8.5em minmax(0,1fr); margin:0; border:1px solid var(--line); border-top:none; font-size:.95rem}
.bio-rows .bio-row:first-child{margin-top:18px; border-top:1px solid var(--line); border-radius:12px 12px 0 0}
.bio-rows .bio-row:last-child{border-radius:0 0 12px 12px}
.bio-row dt{display:flex; align-items:center; justify-content:center; text-align:center; padding:12px 16px; background:var(--bg-mint); color:var(--teal-deep); font-weight:700}
.bio-rows .bio-row:first-child dt{border-top-left-radius:11px}
.bio-rows .bio-row:last-child dt{border-bottom-left-radius:11px}
.bio-row dd{margin:0; padding:12px 16px; color:var(--ink); display:flex; flex-direction:column; justify-content:center}
/* Single-line values stay on one line */
.bio-langs dd{white-space:nowrap}
/* Focus and Qualifications: lists with teal dots; a long name that wraps is indented under its own first line */
.bio-row .bio-list li{position:relative; padding-left:16px}
.bio-row .bio-list li::before{content:""; position:absolute; left:2px; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--teal)}
@media (max-width:600px){.bio-row{grid-template-columns:7.5em minmax(0,1fr)} .bio-row dt,.bio-row dd{padding:10px 12px} .bio-langs dd{white-space:normal}}

/* Join us layout (Syafie, 2026-10-07) */
/* Both Join us boxes: same width, title above the box (Syafie, 7 Oct) */
.join-look{max-width:900px; margin:0 auto; text-align:center; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:30px 40px}
.join-look p{margin:0; color:var(--ink-soft); font-size:1.05rem; line-height:1.7; text-align:justify; text-align-last:center; text-wrap:pretty}
@media (max-width:600px){.join-look p{text-align:center}}
.join-look p + p{margin-top:12px}
.join-sub{font-size:1.35rem; margin:0 0 22px; text-align:center}
.join-sub-center{margin:56px 0 22px}
/* Why work with us: one box, four points; the 1px gaps show the box's line colour as dividers */
.join-panel{max-width:900px; margin:0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.join-item{background:var(--card); padding:28px; display:flex; gap:18px; align-items:center}
.join-ic{flex:none; width:48px; height:48px; border-radius:12px; background:var(--bg-mint); display:flex; align-items:center; justify-content:center}
.join-ic svg{width:24px; height:24px; fill:none; stroke:var(--teal-deep); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.join-body h3{font-size:1.12rem; margin:0 0 8px}
.join-body p{margin:0; color:var(--ink-soft)}
.join-body p + p{margin-top:10px}
@media (max-width:860px){.join-panel{grid-template-columns:1fr}}
.join-cta{max-width:900px; margin:56px auto 0; text-align:center; background:var(--bg-mint); border-radius:var(--radius); padding:34px 28px}
.join-cta-line{font-weight:700; font-size:1.15rem; color:var(--ink); margin:0}
.join-cta .roles{justify-content:center; margin:18px 0 24px}
@media (max-width:600px){.join-look{padding:24px 20px} .join-cta{padding:26px 18px} .join-item{padding:22px 18px; gap:14px} .join-ic{width:40px; height:40px}}
.join-mail{margin:16px 0 0; color:var(--ink-soft); font-size:.95rem}
.copy-btn{margin-left:6px; font:inherit; font-size:.85rem; font-weight:600; color:var(--teal-deep); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:4px 12px; cursor:pointer}
.copy-btn:hover{border-color:var(--teal)}
.copy-btn:focus-visible{outline:3px solid var(--sky); outline-offset:2px}

/* One page-title pattern on every inner page (Syafie, 2026-10-07): the title alone at the top left, same size and spacing.
   The first section starts right under it. */
/* Every inner page but Home: white band with the title, then sections alternating grey-green and white (Syafie, 7 Oct) */
.page-head + section:not(:has(.section-head)){padding-top:56px; padding-bottom:72px}
.tags-center{justify-content:center}
.page-head h1{font-size:clamp(1.9rem,4.5vw,2.8rem)}
.page-intro{text-align:center; color:var(--ink-soft); font-size:1.1rem; max-width:60ch; margin:0 auto 32px}
/* Activities page: everything centred (Syafie, 2026-10-07) */
.activity-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:22px}
.activity-grid > .card{width:340px; max-width:100%; text-align:center}
.sister-center{margin-left:auto; margin-right:auto; text-align:center}
/* Condition pages: one text size inside every box, box titles clearly above it, with room under them (Syafie, 2026-10-07) */
.page-conditions main .callout{font-size:1.1rem}
.page-conditions main .callout span{font-size:1rem}
.page-conditions main .card h3{font-size:1.15rem; margin:0 0 14px}
.page-conditions main .card li,.page-conditions main .card p{font-size:1rem}
/* Activities box: its bold title sits on its own line (Syafie, 2026-10-07) */
.sister-note strong{display:block; margin-bottom:2px}
.all-services{margin:18px 0 0}
/* Equipment page before the device list is confirmed (Syafie, 2026-10-07) */
.coming-soon{max-width:640px; margin:8px auto 0; text-align:center; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:48px 32px}
.coming-soon-big{font-size:clamp(2.2rem,6vw,3.4rem); font-weight:800; letter-spacing:-.02em; color:var(--teal-deep); margin:0 0 12px; line-height:1.1}
.coming-soon p{color:var(--ink-soft); margin:0 0 24px}
.soon-note{text-align:center; margin:0 0 16px}