/* HeuMed Partners v0.7 — home page styles */

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;color:var(--on-deep);background:radial-gradient(900px 620px at 16% 55%,rgba(44,196,184,.16),transparent 62%),radial-gradient(900px 520px at 95% -5%,rgba(40,86,140,.55),transparent 60%),linear-gradient(180deg,var(--deep) 0%,var(--deep-3) 100%)}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:24px;align-items:end;padding-block:80px 0}
.hero-copy{align-self:center;padding-bottom:128px}
.hero-kicker{font:500 14px/1.5 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--teal-soft);direction:ltr;text-align:right;margin-bottom:22px}
.hero h1{font-size:clamp(2.3rem,4.8vw,4rem);line-height:1.45}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero-lead{margin-top:26px;max-width:600px;font-size:19px;line-height:2;color:var(--on-deep-2)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero-art{position:relative;align-self:end;justify-self:center;width:100%;max-width:560px}
.hero-art svg{display:block;width:100%;height:auto}
.hero-art .win{animation:win 7s ease-in-out infinite;animation-delay:var(--d)}
@keyframes win{0%,100%{opacity:.08}50%{opacity:.36}}
.hero-edge{position:absolute;inset-inline:0;bottom:-1px;width:100%;height:84px;display:block;z-index:2}

/* ---------- services (master–detail) ---------- */
#services{padding-top:104px}
.svc{display:grid;gap:0;grid-template-columns:minmax(0,1fr)}
.js .svc{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
.svc-list{border-top:1px solid var(--line)}
.svc-title{font:inherit}
.svc-btn{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;text-align:start;padding:22px 20px;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);cursor:default;font:600 20px/1.6 var(--font-display);transition:background .25s,color .25s,padding .25s}
.js .svc-btn{cursor:pointer}
.js .svc-btn:hover{background:var(--bg-alt)}
.svc-btn[aria-expanded="true"]{background:var(--bg-alt);color:var(--accent);box-shadow:inset -3px 0 0 var(--teal)}
.svc-state{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:var(--on-accent);opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s}
.svc-state svg{width:14px;height:14px}
.svc-btn.is-sel .svc-state{opacity:1;transform:none}
.svc-arrow{width:20px;height:20px;transition:transform .25s}
.svc-btn[aria-expanded="true"] .svc-arrow{transform:translateX(-5px)}
.slot{position:sticky;top:96px}
.slot:empty{display:none}
.panel,.svc-detail{background:linear-gradient(160deg,var(--deep-2),var(--deep));color:var(--on-deep);padding:40px;border-radius:6px;display:grid;gap:28px}
.panel{animation:rise .35s ease both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.plabel{font:600 15px/1.4 var(--font-body);letter-spacing:.04em;color:var(--teal-soft);margin-bottom:8px}
.panel h3{font-size:clamp(1.45rem,2.3vw,1.95rem);line-height:1.6}
.pintro{font:500 20px/2 var(--font-body)}
.pwhen{padding:22px 24px;background:rgba(255,255,255,.05);border-top:1px solid rgba(94,224,212,.5)}
.pwhen h4{font:600 18px/1.5 var(--font-display);color:var(--teal-soft);margin-bottom:8px}
.pwhen p{color:var(--on-deep-2);font-size:17px;line-height:1.95}
.pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pcard{position:relative;border:1px solid rgba(234,242,247,.16);padding:18px 16px 18px;font:500 17px/1.7 var(--font-body);transition:border-color .2s,background .2s}
.pcard::before{content:"";display:block;width:10px;height:10px;border:2px solid var(--teal);transform:rotate(45deg);margin-bottom:14px}
.pcard:hover{border-color:var(--teal);background:rgba(44,196,184,.07)}
.pactions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pactions .btn[aria-pressed="true"]{background:transparent;color:var(--teal-soft);border-color:var(--teal)}
.js .svc-detail{display:none}

/* ---------- request builder ---------- */
.req-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:40px;align-items:start}
.form{display:grid;gap:48px}
.step-h{display:flex;align-items:center;gap:14px;font-size:22px;margin-bottom:8px}
.stepno{display:grid;place-items:center;width:36px;height:36px;border:1.5px solid var(--accent);color:var(--accent);border-radius:50%;font:600 16px/1 var(--font-body);flex:none}
.hint{color:var(--ink-2);margin-bottom:20px;font-size:16px}
.opts{display:grid;gap:10px}
.opt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:16px 18px;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);cursor:pointer;transition:border-color .2s,background .2s}
.opt:hover{border-color:var(--line-strong)}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt .box{width:26px;height:26px;border:1.5px solid var(--line-strong);border-radius:var(--radius);display:grid;place-items:center;margin-top:4px;background:var(--bg);color:transparent;transition:all .15s}
.opt .box svg{width:16px;height:16px}
.opt.is-on{border-color:var(--accent)}
.opt.is-on .box{background:var(--teal);border-color:var(--teal);color:var(--on-accent)}
.opt:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.opt strong{display:block;font:600 18px/1.6 var(--font-display)}
.opt small{display:block;margin-top:2px;color:var(--ink-2);font-size:16px;line-height:1.7}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.field{display:grid;gap:8px;align-content:start;min-width:0}
.field.full{grid-column:1/-1}
.field label{font:600 16px/1.5 var(--font-body)}
.opt-tag{font-weight:400;color:var(--ink-2)}
.field input,.field select,.field textarea{width:100%;min-height:52px;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);padding:12px 14px;border-radius:var(--radius);font-size:17px;line-height:1.6;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(10,114,112,.15)}
.field textarea{min-height:128px;resize:vertical}
.field [aria-invalid="true"]{border-color:var(--err)}
.err{color:var(--err);font-size:15px;line-height:1.6;font-weight:500}
.err:empty{display:none}
.err-sum{border:1.5px solid var(--err);background:#FDF1F0;color:#7A1812;padding:18px 20px;border-radius:var(--radius)}
.err-sum p{font-weight:600;margin-bottom:8px}
.err-sum li{margin-bottom:2px}
.err-sum button{background:none;border:0;padding:4px 0;color:#7A1812;text-decoration:underline;text-underline-offset:4px;cursor:pointer;text-align:start;font-size:16px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.75;cursor:pointer}
.check input{width:22px;height:22px;margin-top:4px;accent-color:var(--accent);flex:none}
.privacy-line{margin-top:8px;margin-inline-start:34px;color:var(--ink-2);font-size:15px;line-height:1.75}
.privacy-line .pending{color:var(--ink-2);text-decoration:underline dotted;text-underline-offset:4px}
.notice{display:flex;gap:12px;padding:16px 18px;background:var(--bg);border:1.5px solid var(--line);border-radius:var(--radius);color:var(--ink-2);font-size:16px;line-height:1.75}
.notice svg{width:22px;height:22px;flex:none;color:var(--accent);margin-top:3px}
.submit-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.submit-row p{color:var(--ink-2);font-size:15px;flex:1 1 260px}
.result{background:var(--surface);border:1.5px solid var(--accent);border-radius:6px;padding:32px;display:grid;gap:22px}
.result h3{font-size:24px}
.warn{padding:14px 16px;background:var(--bg-alt);border:1.5px solid var(--line-strong);border-radius:var(--radius);font-size:16px;line-height:1.8}
.rev{display:grid;gap:0;margin:0;border-top:1px solid var(--line)}
.rev div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.rev dt{color:var(--ink-2);font-weight:500;font-size:16px}
.rev dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.rev ul{display:grid;gap:4px}
.result label.lbl{font:600 15px/1.5 var(--font-body);color:var(--ink-2)}
.result textarea{width:100%;min-height:200px;border:1.5px solid var(--line-strong);background:var(--bg);color:var(--ink);padding:14px;border-radius:var(--radius);font:400 16px/1.9 var(--font-body);resize:vertical;direction:rtl}
.result .row{display:flex;flex-wrap:wrap;gap:12px}
.result .small{color:var(--ink-2);font-size:15px}
.summary{position:sticky;top:96px;background:linear-gradient(160deg,var(--deep-2),var(--deep));color:var(--on-deep);border-radius:6px;padding:28px;display:grid;gap:18px}
.summary h3{font-size:22px}
.sum-empty{color:var(--on-deep-2);font-size:16px;line-height:1.8}
.sum-list{display:grid;gap:2px}
.sum-list li{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1);font:500 16px/1.65 var(--font-body)}
.sum-list button{flex:none;background:none;border:0;color:var(--teal-soft);cursor:pointer;font:500 15px/1.6 var(--font-body);text-decoration:underline;text-underline-offset:4px;padding:4px 2px;min-height:32px}
.sum-meta{display:grid;gap:4px;font-size:15px;color:var(--on-deep-2)}
.sum-meta strong{color:var(--on-deep);font-weight:500}
.sum-foot{border-top:1px solid rgba(255,255,255,.14);padding-top:16px;color:var(--on-deep-2);font-size:15px;line-height:1.8}
.sum-foot bdi{color:var(--on-deep);font-weight:500}
.pick-bar{position:fixed;inset-inline:0;bottom:0;z-index:40;background:var(--deep-3);color:var(--on-deep);border-top:1px solid rgba(44,196,184,.4);padding-top:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:16px}
.bar-in p{font:500 17px/1.5 var(--font-body)}
.bar-in .btn{min-height:46px;padding:0 22px}
body.has-bar .footer{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}

/* ---------- method ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;position:relative}
.steps::before{content:"";position:absolute;top:27px;inset-inline:28px;height:2px;background:linear-gradient(to left,var(--teal),var(--line-strong) 60%,var(--line));opacity:.8}
.mstep{position:relative;display:grid;gap:14px;align-content:start}
.mno{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:2px solid var(--teal);color:var(--accent);font:600 20px/1 var(--font-display);position:relative;transition:background .25s,color .25s}
.mstep:hover .mno{background:var(--teal);color:var(--on-accent)}
.mstep h3{font-size:21px}
.mstep p{color:var(--ink-2);font-size:17px}

/* ---------- who we serve ---------- */
.serve-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tile{display:grid;align-content:space-between;gap:18px;min-height:132px;text-align:start;padding:20px 20px 18px;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);cursor:pointer;color:var(--ink);font:600 19px/1.6 var(--font-display);transition:background .25s,color .25s,border-color .25s,transform .25s}
.tile .go{display:inline-flex;align-items:center;gap:6px;font:500 15px/1.4 var(--font-body);color:var(--accent);transition:color .25s}
.tile .go svg{width:16px;height:16px;transition:transform .25s}
.tile:hover{background:var(--deep);color:var(--on-deep);border-color:var(--deep);transform:translateY(-2px)}
.tile:hover .go{color:var(--teal-soft)}
.tile:hover .go svg{transform:translateX(-4px)}
.tile[aria-pressed="true"]{border-color:var(--teal);box-shadow:inset 0 -3px 0 var(--teal)}
.tile:focus-visible{outline-offset:2px}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:start}
.about h2{font-size:clamp(1.7rem,3.2vw,2.6rem);margin-bottom:22px}
.about p{color:var(--ink-2);font-size:19px;line-height:2}
.about p+p{margin-top:16px}
.dims{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line-strong)}
.dims li{padding:26px 6px;border-bottom:1px solid var(--line);font:600 22px/1.5 var(--font-display);display:flex;align-items:center;gap:14px}
.dims li::before{content:"";width:12px;height:12px;border:2px solid var(--teal);transform:rotate(45deg);flex:none}
.dims li:nth-child(odd){padding-inline-end:20px}

/* ---------- knowledge intro (home) ---------- */
.knowledge{padding-block:104px}
.k-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:40px;align-items:end;margin-bottom:56px}
.k-head h2{font:700 clamp(2.4rem,5.2vw,4.2rem)/1.35 var(--font-editorial)}
.k-en{display:block;margin-top:8px;font:500 15px/1.5 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--teal-soft);direction:ltr;text-align:right}
.k-head p{color:var(--on-deep-2);font-size:19px;line-height:1.95}
.k-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.k-card{display:grid;gap:16px;align-content:start}
.k-card h3{font:700 26px/1.5 var(--font-editorial)}
.k-card p{color:var(--on-deep-2);font-size:16px;line-height:1.85}
.k-foot{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;margin-top:56px;padding-top:28px;border-top:1px solid rgba(255,255,255,.14)}
.k-foot p{color:var(--on-deep-2);font-size:17px;max-width:620px}
/* ---------- faq ---------- */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line-strong)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 4px;font:600 19px/1.7 var(--font-display);transition:color .2s}
.faq summary:hover{color:var(--accent)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:14px;height:14px;flex:none;background:linear-gradient(var(--accent),var(--accent)) center/100% 2px no-repeat,linear-gradient(var(--accent),var(--accent)) center/2px 100% no-repeat;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(90deg);background:linear-gradient(var(--accent),var(--accent)) center/100% 2px no-repeat}
.faq details p{padding:0 4px 24px;color:var(--ink-2);font-size:18px;max-width:720px;animation:rise .3s ease both}

/* ---------- cta ---------- */
.cta{background:linear-gradient(135deg,var(--deep-2),var(--deep));color:var(--on-deep);padding-block:88px;border-top:1px solid rgba(44,196,184,.35)}
.cta-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center}
.cta h2{font-size:clamp(1.8rem,3.6vw,2.9rem);line-height:1.5}
.cta p.lead{margin-top:16px;color:var(--on-deep-2);font-size:19px;max-width:560px}
.cta .btn{margin-top:32px}
.contact-box{display:grid;gap:14px}
.ct{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:18px 20px;border:1px solid rgba(234,242,247,.2);border-radius:var(--radius);background:rgba(255,255,255,.04)}
.ct small{display:block;color:var(--on-deep-2);font-size:15px;line-height:1.5}
.ct .val{display:block;font:600 20px/1.6 var(--font-body);color:var(--on-deep);text-decoration:none;word-break:break-all;user-select:all}
.copy{min-height:44px;padding:0 16px;background:transparent;border:1.5px solid rgba(234,242,247,.4);color:var(--on-deep);border-radius:var(--radius);cursor:pointer;font:500 15px/1 var(--font-body);transition:border-color .2s,color .2s}
.copy:hover{border-color:var(--teal);color:var(--teal-soft)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr);padding-block:48px 0;gap:8px}
  .hero-copy{padding-bottom:16px}
  .hero-art{max-width:420px;margin-top:8px;margin-bottom:-4px}
  .hero-edge{height:56px}
  #services{padding-top:72px}
  .js .svc{grid-template-columns:minmax(0,1fr);gap:0}
  .slot{display:none}
  .js .svc-detail:not([hidden]){display:grid}
  .svc-detail{margin:0 0 10px;padding:28px 22px}
  .svc-btn[aria-expanded="true"]{box-shadow:none}
  .svc-btn[aria-expanded="true"] .svc-arrow{transform:rotate(-90deg)}
  .pcards{grid-template-columns:minmax(0,1fr)}
  .req-grid,.k-head,.cta-grid,.about{grid-template-columns:minmax(0,1fr)}
  .about{gap:40px}
  .summary{position:static}
  .steps{grid-template-columns:minmax(0,1fr);gap:28px}
  .steps::before{inset-inline:auto;inset-inline-start:27px;top:28px;bottom:28px;width:2px;height:auto}
  .mstep{grid-template-columns:56px minmax(0,1fr);column-gap:20px}
  .mstep .mno{grid-row:1/3}
  .k-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cover{aspect-ratio:4/3}
  .fields{grid-template-columns:minmax(0,1fr)}
  .serve-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rev div{grid-template-columns:minmax(0,1fr);gap:2px}
}
@media (max-width:560px){
  .k-grid{grid-template-columns:minmax(0,1fr)}
  .hero-cta .btn,.submit-row .btn{width:100%}
  .result{padding:22px 18px}
  .bar-in p{font-size:16px}
  .dims{grid-template-columns:minmax(0,1fr)}
  .tile{min-height:112px;font-size:17px;padding:16px 14px}
  .panel,.svc-detail{padding:26px 18px}
}
@media (max-width:360px){
  .serve-grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .hero-art .win{animation:none;opacity:.2}
}
