/* O.R. Healthcare Solutions — Concept 1 "Steady".
 *
 * Design system is a Scalus PROPOSAL. This business has no live site, no socials
 * and no published brand, so nothing here was extracted from an existing palette.
 * Warm sand + deep teal: clinical enough to trust, domestic enough to want in
 * your home. Clay accent carries the calls to action.
 */

:root{
  --sand:#F4EDE4;
  --cream:#FFFBF6;
  --ink:#12403C;
  --teal:#146B60;
  --teal-d:#0D4F47;
  /* The bright clay stays the decorative accent (logo dot, icons, scroll bar).
     Text and button variants are darkened off the same hue so white on the
     button and clay on cream both clear 4.5:1, and a lightened one carries the
     accent on the ink footer. */
  --clay:#C4623C;
  --clay-btn:#AE522F;
  --clay-txt:#A64F2D;
  --clay-lt:#E29B76;
  --clay-d:#964524;
  --muted:#5A6B66;
  --line:#E2D7C8;
  --shadow:0 1px 2px rgba(18,64,60,.05),0 12px 34px -18px rgba(18,64,60,.28);
  --wrap:1160px;
  --r:18px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--sand);color:var(--ink);
  font:400 17px/1.65 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* Sapphireworld lesson: width/height attributes otherwise defeat aspect-ratio. */
img,svg{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.1;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(2.35rem,6.2vw,4.3rem)}
h2{font-size:clamp(1.85rem,4vw,2.9rem)}
h3{font-size:1.2rem;line-height:1.3}
p{margin:0}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.eyebrow{
  font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);margin-bottom:14px;
}
.lede{font-size:clamp(1.05rem,2.1vw,1.22rem);color:var(--muted);max-width:60ch}

/* ---------- concept notice ---------- */
.cnote{
  display:flex;gap:14px;align-items:flex-start;justify-content:center;
  background:var(--ink);color:#EFE6DA;padding:12px 18px;font-size:.88rem;line-height:1.5;
}
.cnote[hidden]{display:none}          /* Pro Shield lesson: hidden loses to display:flex */
.cnote span{max-width:80ch}
.cnote strong{color:#F0BFA5}
.cnote button{
  flex:none;background:transparent;border:0;color:#EFE6DA;font-size:1.4rem;line-height:1;
  cursor:pointer;min-width:44px;min-height:44px;border-radius:10px;
}
.cnote button:hover{background:rgba(255,255,255,.1)}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:60;background:rgba(244,237,228,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;gap:20px;min-height:74px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none;padding:6px 0}
.brand .bm{width:38px;height:38px;flex:none;color:var(--ink)}
.brand .bm .dot{fill:var(--clay)}
.brand b{font-family:Fraunces,Georgia,serif;font-size:1.12rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.brand i{display:block;font-style:normal;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-family:Inter,sans-serif}
.nav{display:flex;gap:6px;margin-left:auto}
.nav a{
  text-decoration:none;font-size:.94rem;font-weight:500;color:var(--muted);
  padding:10px 13px;border-radius:10px;min-height:44px;display:inline-flex;align-items:center;
  white-space:nowrap;
}
.nav a:hover{color:var(--ink);background:rgba(20,107,96,.08)}
.hd-cta{display:flex;align-items:center;gap:10px}
.tel{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;
  font-size:.94rem;color:var(--ink);padding:10px 12px;border-radius:10px;min-height:44px;
  white-space:nowrap;
}
.tel:hover{background:rgba(20,107,96,.08)}
.burger{
  display:none;width:46px;height:46px;border:1px solid var(--line);background:var(--cream);
  border-radius:12px;cursor:pointer;padding:0;place-items:center;
}
.burger span{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;margin:3px auto}
.mmenu{display:none;border-top:1px solid var(--line);background:var(--cream);padding:10px 0 18px}
.mmenu.open{display:block}
.mmenu a{
  display:block;text-decoration:none;font-weight:500;padding:15px 4px;border-bottom:1px solid var(--line);
  min-height:52px;
}
.mmenu .btn{margin-top:16px;width:100%;border-bottom:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 26px;border-radius:999px;text-decoration:none;font-weight:600;font-size:1rem;
  border:1.5px solid transparent;cursor:pointer;min-height:52px;transition:transform .18s,background .18s,box-shadow .18s;
  white-space:nowrap;
}
.btn-p{background:var(--clay-btn);color:#fff;box-shadow:0 10px 24px -12px rgba(196,98,60,.75)}
.btn-p:hover{background:var(--clay-d);transform:translateY(-1px)}
.btn-s{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-s:hover{background:var(--ink);color:var(--sand)}
.btn-sm{padding:11px 20px;font-size:.93rem;min-height:44px}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(56px,9vw,104px) 0 clamp(48px,7vw,86px);overflow:hidden}
.hero::before,.hero::after{
  content:"";position:absolute;left:0;top:0;border-radius:50%;pointer-events:none;
  /* A'o'K lesson: anchor absolutes explicitly, never to their static position. */
}
.hero::before{
  width:min(760px,105vw);height:min(760px,105vw);
  background:radial-gradient(circle,rgba(20,107,96,.15),transparent 68%);
  transform:translate(-32%,-46%);
}
.hero::after{
  width:min(560px,88vw);height:min(560px,88vw);
  background:radial-gradient(circle,rgba(196,98,60,.16),transparent 66%);
  transform:translate(88%,12%);
}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,5vw,68px);align-items:center}
.hero h1{margin-bottom:22px}
.hero h1 em{font-style:italic;color:var(--teal)}
.hero .lede{margin-bottom:30px}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:32px}
.trust{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:8px;background:var(--cream);border:1px solid var(--line);
  border-radius:999px;padding:9px 16px;font-size:.86rem;font-weight:500;color:var(--muted);min-height:40px;
}
.chip svg{width:15px;height:15px;color:var(--teal);flex:none}

/* hero art: an echo of the mark, built from the same two arcs */
.hero-art{position:relative;aspect-ratio:1/1;display:grid;place-items:center}
.hero-art .ring{width:100%;height:100%;color:var(--teal);opacity:.9}
.hero-art .ring .dot{fill:var(--clay)}
/* A'o'K lesson: anchor these explicitly rather than letting them fall back to
   their static position, which stacks them on top of each other. */
.hero-card{
  position:absolute;left:0;top:0;background:var(--cream);border:1px solid var(--line);
  border-radius:16px;padding:16px 18px;box-shadow:var(--shadow);width:min(258px,68%);
}
.hero-card.a{left:-5%;top:9%}
.hero-card.b{left:auto;right:-5%;top:62%}
.hero-card .k{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--teal);font-weight:600;margin-bottom:6px}
.hero-card .v{font-family:Fraunces,Georgia,serif;font-size:1.06rem;line-height:1.35}

/* ---------- generic section ---------- */
section{padding:clamp(58px,8vw,104px) 0}
.sec-head{max-width:66ch;margin-bottom:clamp(34px,4.5vw,54px)}
.sec-head p{margin-top:15px}
.band{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- service cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px}
.card{
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 26px 30px;box-shadow:var(--shadow);
}
.card .ic{
  width:48px;height:48px;border-radius:14px;background:rgba(20,107,96,.1);color:var(--teal);
  display:grid;place-items:center;margin-bottom:18px;
}
.card .ic svg{width:24px;height:24px}
.card h3{margin-bottom:10px}
.card p{color:var(--muted);font-size:.97rem}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:28px;counter-reset:s}
.step{position:relative;padding-top:56px}
.step::before{
  counter-increment:s;content:counter(s);position:absolute;left:0;top:0;
  width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--sand);
  display:grid;place-items:center;font-family:Fraunces,Georgia,serif;font-size:1.15rem;
}
.step h3{margin-bottom:9px}
.step p{color:var(--muted);font-size:.97rem}

/* ---------- who we support ---------- */
.who{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:0;padding:0}
.who li{
  list-style:none;background:var(--cream);border:1px solid var(--line);border-radius:14px;
  padding:19px 20px;font-weight:500;display:flex;gap:12px;align-items:flex-start;
}
.who svg{width:19px;height:19px;color:var(--clay);flex:none;margin-top:3px}
.who ul{margin:0;padding:0}

/* ---------- sample label ---------- */
.samp{
  display:inline-flex;align-items:center;gap:8px;background:rgba(196,98,60,.12);
  border:1px solid rgba(196,98,60,.32);color:var(--clay-d);border-radius:999px;
  padding:7px 15px;font-size:.78rem;font-weight:600;letter-spacing:.03em;margin-bottom:18px;min-height:34px;
}

/* ---------- quote ---------- */
.quote{
  background:var(--ink);color:var(--sand);border-radius:24px;padding:clamp(34px,5vw,60px);
  position:relative;overflow:hidden;
}
.quote::before{
  content:"";position:absolute;left:0;top:0;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(196,98,60,.3),transparent 68%);transform:translate(62%,-38%);
}
.quote > *{position:relative}
.quote .samp{background:rgba(244,237,228,.14);border-color:rgba(244,237,228,.34);color:#F0D3C2}
.quote blockquote{
  margin:0 0 22px;font-family:Fraunces,Georgia,serif;font-size:clamp(1.35rem,3vw,2rem);
  line-height:1.35;max-width:24ch;
}
.quote .qby{color:#B9CBC5;font-size:.95rem}

/* ---------- faq ---------- */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{
  cursor:pointer;list-style:none;font-family:Fraunces,Georgia,serif;font-size:1.13rem;
  padding:18px 44px 18px 0;position:relative;min-height:52px;display:flex;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .ans{padding:0 0 20px;color:var(--muted);max-width:68ch}

/* ---------- contact ---------- */
.cx{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,4.5vw,58px);align-items:start}
.cx-info .row{display:flex;gap:14px;align-items:flex-start;margin-top:22px}
.cx-info .row svg{width:20px;height:20px;color:var(--teal);flex:none;margin-top:4px}
.cx-info .row a{font-weight:600;text-decoration:none;display:inline-block;padding:4px 0;min-height:40px}
.cx-info .row a:hover{color:var(--teal)}
.cx-info .row span{display:block;color:var(--muted);font-size:.92rem}
.form{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3.4vw,36px);box-shadow:var(--shadow)}
.fld{margin-bottom:17px}
.fld label{display:block;font-weight:600;font-size:.9rem;margin-bottom:7px}
.fld input,.fld select,.fld textarea{
  width:100%;border:1px solid var(--line);background:var(--sand);border-radius:12px;
  padding:14px 15px;font:inherit;font-size:1rem;color:var(--ink);min-height:52px;
}
.fld textarea{min-height:112px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.form .btn{width:100%;margin-top:6px}
.fine{margin-top:14px;font-size:.84rem;color:var(--muted);text-align:center}
.ok{
  display:none;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:30px 10px;
}
.ok.show{display:flex}
.ok[hidden]{display:none}
.ok .tick{width:56px;height:56px;border-radius:50%;background:rgba(20,107,96,.12);color:var(--teal);display:grid;place-items:center}
.ok .tick svg{width:27px;height:27px}
.ok h3{font-size:1.3rem}
.ok p{color:var(--muted);max-width:44ch}

/* ---------- footer ---------- */
.ft{background:var(--ink);color:#C9D8D3;padding:clamp(48px,6vw,74px) 0 30px;font-size:.94rem}
.ft-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px;margin-bottom:38px}
.ft .brand b,.ft .brand{color:var(--sand)}
.ft .brand i{color:#8FA8A2}          /* the muted body colour is unreadable on ink */
.ft .bm{color:var(--sand)}
.ft h4{font-family:Fraunces,Georgia,serif;color:var(--sand);font-size:1.02rem;margin:0 0 14px;font-weight:600}
.ft ul{list-style:none;margin:0;padding:0}
.ft ul li{margin-bottom:4px}
.ft ul a,.ft-c a{
  color:#C9D8D3;text-decoration:none;display:inline-block;padding:8px 0;min-height:40px;
}
.ft ul a:hover,.ft-c a:hover{color:var(--sand)}
.ft-blurb{margin:16px 0 0;max-width:42ch;color:#A8BDB7}
.disc{
  border-top:1px solid rgba(244,237,228,.16);padding-top:26px;margin-bottom:22px;
  font-size:.83rem;line-height:1.65;color:#9DB2AC;max-width:105ch;
}
.ft-bot{
  border-top:1px solid rgba(244,237,228,.16);padding-top:22px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;font-size:.86rem;color:#9DB2AC;
}
/* Sapphireworld lesson: inline-flex splits the text node from the <b> and eats
   the space, rendering "Website byScalus". Keep it inline-block. */
.by{display:inline-block;text-decoration:none;color:#9DB2AC;padding:8px 0;min-height:40px}
.by b{color:var(--clay-lt);font-weight:700}
.by:hover{color:#C9D8D3}

/* ---------- motion ---------- */
.sprog{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--clay);transform:scaleX(0);transform-origin:0 50%;z-index:200}
.js .reveal{opacity:0;transform:translateY(18px);filter:blur(7px);transition:opacity .72s cubic-bezier(.2,.7,.2,1),transform .72s cubic-bezier(.2,.7,.2,1),filter .72s}
.js .reveal.in{opacity:1;transform:none;filter:none}
.js [data-cascade] .word{display:inline-block;opacity:0;transform:translateY(22px);filter:blur(9px);transition:opacity .62s,transform .62s,filter .62s}
.js [data-cascade] .word.in{opacity:1;transform:none;filter:none}
.js [data-cascade].in .word{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js [data-cascade] .word{opacity:1;transform:none;filter:none;transition:none}
  .sprog{display:none}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .hero-art{max-width:430px;margin:8px auto 0}
  .cx{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav{display:none}
  .burger{display:grid}
  .hd-cta .btn{display:none}   /* Sapphireworld lesson: CTA + phone + burger will not fit */
  .hd-cta{margin-left:auto}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .hero{padding-top:40px}
  .hero-cta{gap:11px}
  .hero-cta .btn{width:100%}
  .hero-art{max-width:none;aspect-ratio:auto;padding-bottom:8px}
  .hero-art .ring{max-width:230px;margin:0 auto}
  .hero-card{position:static;width:100%;margin-top:14px}
  .hero-card.a,.hero-card.b{left:auto;right:auto;top:auto}
  .tel span{display:none}
  .tel{padding:10px;min-width:44px;justify-content:center}
  .ft-top{grid-template-columns:1fr;gap:26px}
  .ft-bot{flex-direction:column;align-items:flex-start;gap:6px}
  .quote{border-radius:18px}
  .cnote{font-size:.83rem;padding:11px 14px;gap:8px}
}