/* Nahang Services Studio RC10 — final visual-system candidate.
   This sheet loads after frontend.css and contains only scoped service-page refinements. */

/* ---------- Theme tokens / contrast ---------- */
.nhs{
  --nh-text:var(--nhs-t1);
  --nh-muted:var(--nhs-t2);
  --nh-subtle:var(--nhs-t3);
  --nhs-panel:rgba(9,21,34,.82);
  --nhs-panel-strong:rgba(10,25,40,.94);
  --nhs-field:rgba(255,255,255,.035);
  --nhs-field-hover:rgba(255,255,255,.055);
  --nhs-accent-soft:rgba(8,126,255,.10);
  --nhs-accent-line:rgba(41,199,255,.30);
}
:is(html[data-theme="light"],body.light-mode,body.theme-light,body.is-light,body[data-theme="light"]) .nhs{
  --nhs-t1:#10263c;
  --nhs-t2:#344e65;
  --nhs-t3:#526b80;
  --nhs-blue:#075d9b;
  --nhs-cyan:#09638b;
  --nh-accent:#075d9b!important;
  --nhs-panel:rgba(255,255,255,.94);
  --nhs-panel-strong:#ffffff;
  --nhs-field:#f7fafc;
  --nhs-field-hover:#f1f6fa;
  --nhs-accent-soft:rgba(7,93,155,.075);
  --nhs-accent-line:rgba(7,93,155,.24);
}

/* Explicit text roles stop dark-only fallback colors leaking into light mode. */
.nhs :is(.nhs-copy,.nhs-section-head,.nhs-service-panel,.nhs-service-card-front,.nhs-person,.nhs-capability,.nhs-case,.nhs-fit-card,.nhs-model,.nhs-commit,.nhs-hub,.nhs-faq-list,.nhs-form-shell){color:var(--nhs-t1)}
.nhs :is(.nhs-copy p,.nhs-section-head p,.nhs-person-bio,.nhs-person-role,.nhs-case-body,.nhs-model p,.nhs-commit p,.nhs-faq-answer,.nhs-service-panel p,.nhs-service-panel li,.nhs-capability p,.nhs-fit-card p,.nhs-form-head p){color:var(--nhs-t2)!important;text-shadow:none}
.nhs :is(.nhs-topic-badges span,.nhs-diagnostic-label,.nhs-model-output-label){color:var(--nhs-t1)!important}
.nhs .nhs-hero-cinematic .nhs-copy p{color:var(--nhs-t2)}
.nhs .nhs-hero-cinematic .nhs-proof{color:var(--nhs-t3)}
.nhs .nhs-form-help{color:var(--nhs-t3)!important}

:is(html[data-theme="light"],body.light-mode,body.theme-light,body.is-light,body[data-theme="light"]) .nhs .nhs-cinematic-vignette{
  background:linear-gradient(90deg,rgba(242,247,252,.94),rgba(242,247,252,.85)),linear-gradient(180deg,#f2f7fc,transparent 40%,#f2f7fc)!important;
}
:is(html[data-theme="light"],body.light-mode,body.theme-light,body.is-light,body[data-theme="light"]) .nhs :is(.nhs-person,.nhs-capability,.nhs-case,.nhs-model,.nhs-diagnostic,.nhs-service-index,.nhs-service-panels,.nhs-service-card-front,.nhs-form-shell,.nhs-price-card,.nhs-fit-card,.nhs-experience-profile,.nhs-model-note,.nhs-hub,.nhs-faq-list,.nhs-commit){
  background:var(--nhs-panel)!important;
  color:var(--nhs-t1);
  border-color:rgba(26,63,95,.20);
  box-shadow:0 22px 54px rgba(31,67,105,.085);
}
:is(html[data-theme="light"],body.light-mode,body.theme-light,body.is-light,body[data-theme="light"]) .nhs.nhs-lines-dynamic :is(.nhs-copy h1,.nhs-copy h2,.nhs-section-head h2){
  color:#10263c;
  background:linear-gradient(105deg,#10263c,#075b91,#10263c);
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
}
:is(html[data-theme="light"],body.light-mode,body.theme-light,body.is-light,body[data-theme="light"]) .nhs :is(.nhs-person-focus span,.nhs-person-badge,.nhs-kicker,.nhs-textlink){color:#075b91}
:is(html[data-theme="light"],body.light-mode,body.theme-light,body.is-light,body[data-theme="light"]) .nhs .nhs-btn.ghost{background:#fff;color:#10263c;border-color:rgba(26,63,95,.22)}
:is(html[data-theme="light"],body.light-mode,body.theme-light,body.is-light,body[data-theme="light"]) .nhs .nhs-topic-badges span{background:rgba(7,93,155,.055);border-color:rgba(7,93,155,.22);color:#193750!important;box-shadow:none}
:is(html[data-theme="light"],body.light-mode,body.theme-light,body.is-light,body[data-theme="light"]) .nhs .nhs-service-index button.is-active{background:linear-gradient(135deg,rgba(7,93,155,.10),rgba(9,99,139,.05));border-color:rgba(7,93,155,.26)}
:is(html[data-theme="light"],body.light-mode,body.theme-light,body.is-light,body[data-theme="light"]) .nhs .nhs-galaxy-node{color:#10263c;background:radial-gradient(circle at 34% 28%,#fff,#e8f3fb);border-color:#6e93b0}
:is(html[data-theme="light"],body.light-mode,body.theme-light,body.is-light,body[data-theme="light"]) .nhs .nhs-galaxy-node small{color:#344e65}

/* ---------- Founders / technical-experience cards ---------- */
.nhs .nhs-amir-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.nhs .nhs-amir-card{position:relative;border:1px solid var(--nhs-line2);border-radius:24px;overflow:hidden;background:var(--nhs-s1);box-shadow:inset 0 1px 0 rgba(145,211,255,.15)}
.nhs .nhs-amir-card::before,.nhs .nhs-person::before{content:"";position:absolute;inset-inline:24px;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--nhs-cyan),transparent);pointer-events:none}
.nhs .nhs-amir-card figure{margin:0}.nhs .nhs-amir-card img{display:block;width:100%;height:auto;aspect-ratio:1348/926;object-fit:cover;object-position:top}
.nhs .nhs-amir-card figcaption{padding:12px 22px;font-size:11px;line-height:1.8;color:var(--nhs-t2);border-bottom:1px solid var(--nhs-line)}
.nhs .nhs-amir-copy{padding:28px}.nhs .nhs-amir-copy h3{color:var(--nhs-t1);font-size:23px;line-height:1.7;margin:0 0 16px}.nhs .nhs-amir-copy p{font-size:15px;line-height:2;color:var(--nhs-t2);margin:0 0 24px}.nhs .nhs-amir-note{font-size:13px;line-height:2;color:var(--nhs-t2);padding:20px 0}.nhs .nhs-person>.nhs-textlink{display:inline-block;margin-top:22px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.nhs .nhs-amir-card{transition:border-color .2s ease,transform .2s ease}.nhs .nhs-amir-card:hover{transform:translateY(-3px);border-color:var(--nhs-cyan)}}

/* ---------- Dense service catalogue -> accessible tabs ---------- */
.nhs .nhs-service-layout{grid-template-columns:minmax(280px,.68fr) minmax(0,1.32fr);gap:22px;align-items:start}
.nhs .nhs-service-tabs-shell{align-self:start;position:sticky;top:calc(var(--nhs-head) + 18px)}
.nhs .nhs-service-index{padding:9px;background:var(--nhs-panel);border-color:var(--nhs-line2);box-shadow:0 20px 55px rgba(0,0,0,.12)}
.nhs .nhs-service-index button{min-height:62px;border-radius:16px;padding:10px 12px;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}
.nhs .nhs-service-index button:hover{background:var(--nhs-field-hover);border-color:var(--nhs-line2)}
.nhs .nhs-service-index button.is-active{background:linear-gradient(135deg,rgba(8,126,255,.14),rgba(41,199,255,.045));border-color:rgba(41,199,255,.26);box-shadow:inset 3px 0 0 var(--nh-accent)}
.nhs .nhs-service-index em{font-size:.93rem;color:inherit}
.nhs .nhs-service-panels{min-height:620px;background:var(--nhs-panel);border-color:var(--nhs-line2)}
.nhs .nhs-service-panel{padding:clamp(34px,4.4vw,64px);outline:none}
.nhs .nhs-service-panel:focus-visible{outline:2px solid var(--nh-accent);outline-offset:-6px}
.nhs .nhs-service-panel h3{max-width:24ch;line-height:1.35;color:var(--nhs-t1)}
.nhs .nhs-service-panel p{font-size:1rem;line-height:1.95}
.nhs .nhs-service-panel ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 26px;margin-top:26px}
.nhs .nhs-service-panel li{padding:10px 18px 10px 10px;border-bottom:1px solid color-mix(in srgb,var(--nhs-line2) 60%,transparent);line-height:1.8}
.nhs .nhs-service-panel li::before{top:1.35em;width:7px}
.nhs .nhs-service-panel .mini-note{margin-top:26px;border-radius:14px;background:var(--nhs-field)}

/* ---------- Intake form ---------- */
.nhs .nhs-form-shell{position:relative;border:1px solid var(--nhs-line2);border-radius:28px;background:var(--nhs-panel);box-shadow:var(--nhs-shadow);overflow:hidden;isolation:isolate}
.nhs .nhs-form-shell::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,var(--nh-accent),var(--nhs-cyan),transparent);opacity:.9}
.nhs .nhs-form-shell::after{content:"";position:absolute;width:280px;aspect-ratio:1;left:-150px;top:-150px;border-radius:50%;background:radial-gradient(circle,rgba(41,199,255,.11),transparent 68%);pointer-events:none;z-index:-1}
.nhs .nhs-form-head{padding:26px 26px 0}
.nhs .nhs-form-eyebrow{display:block;color:var(--nh-accent);font:800 9px/1.5 Inter,Arial,sans-serif;letter-spacing:.15em;direction:ltr;text-align:right}
.nhs .nhs-form-head h3{margin:10px 0 0;font-size:clamp(1.45rem,2.3vw,2rem);line-height:1.45;color:var(--nhs-t1)}
.nhs .nhs-form-head p{margin:8px 0 0;font-size:.9rem;line-height:1.8}
.nhs .nhs-form-steps{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.nhs .nhs-form-steps span{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--nhs-line);border-radius:999px;background:var(--nhs-field);color:var(--nhs-t2);font-size:10px}
.nhs .nhs-form-steps b{color:var(--nh-accent);font:800 9px/1 Inter,Arial,sans-serif}
.nhs .nhs-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;padding:22px 26px 26px;border:0;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important}
.nhs .nhs-form label{gap:8px;font-size:11px;color:var(--nhs-t2)}
.nhs .nhs-form label>span{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:760}
.nhs .nhs-form label em{font-style:normal;color:var(--nh-accent);font-size:9px;font-weight:800}
.nhs .nhs-form input,.nhs .nhs-form textarea{border:1px solid var(--nhs-line2);border-radius:15px;background:var(--nhs-field);color:var(--nhs-t1);padding:14px 15px;caret-color:var(--nh-accent);transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease}
.nhs .nhs-form input::placeholder,.nhs .nhs-form textarea::placeholder{color:var(--nhs-t3);opacity:.82}
.nhs .nhs-form input:hover,.nhs .nhs-form textarea:hover{background:var(--nhs-field-hover)}
.nhs .nhs-form input:focus,.nhs .nhs-form textarea:focus{border-color:var(--nh-accent);background:var(--nhs-field-hover);box-shadow:0 0 0 4px color-mix(in srgb,var(--nh-accent) 13%,transparent);transform:translateY(-1px)}
.nhs .nhs-form textarea{min-height:150px;resize:vertical;line-height:1.8}
.nhs .nhs-form-submit{display:grid;gap:10px;margin-top:2px}
.nhs .nhs-form-submit .nhs-btn{width:100%;justify-content:space-between;padding-inline:20px;min-height:58px}
.nhs .nhs-form-submit .nhs-btn b{font:800 20px/1 Arial,sans-serif;transition:transform .18s ease}
.nhs .nhs-form-submit .nhs-btn:hover b{transform:translateX(-4px)}
.nhs .nhs-form-submit small{color:var(--nhs-t3);font-size:10px;line-height:1.7;text-align:center}
:is(html[data-theme="light"],body.light-mode,body.theme-light,body.is-light,body[data-theme="light"]) .nhs .nhs-form-shell{box-shadow:0 24px 58px rgba(31,67,105,.10)}

/* ---------- Responsive QA breakpoints ---------- */
@media(max-width:1100px){
  .nhs .nhs-service-layout{grid-template-columns:1fr;gap:16px}
  .nhs .nhs-service-tabs-shell{position:relative;top:auto}
  .nhs .nhs-service-tab-tools{display:flex}
  .nhs .nhs-service-index{display:flex;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-inline:contain;padding:8px}
  .nhs .nhs-service-index button{min-width:220px;scroll-snap-align:center}
  .nhs .nhs-service-panels{min-height:0}
  .nhs .nhs-service-panel ul{grid-template-columns:1fr 1fr}
}
@media(max-width:782px){
  /* RC9 mobile screenshots: the persistent rail title could cover Hero copy/visuals. Keep dots/aria-labels, hide only the floating title. */
  .nhs .nhs-rail .nhs-rail-title{display:none!important}
  /* frontend.js measures fixed theme/mobile navigation and writes --nhs-bottom. */
  .nhs .nhs-hero{padding-bottom:calc(56px + max(88px,var(--nhs-bottom)) + env(safe-area-inset-bottom))!important}
  .nhs .nhs-amir-grid{grid-template-columns:1fr}.nhs .nhs-amir-copy{padding:22px}.nhs .nhs-amir-copy h3{font-size:21px}
  .nhs .nhs-topic-badges span{color:var(--nhs-t1)!important}
  .nhs .nhs-service-index button{min-width:min(76vw,280px);min-height:56px}
  .nhs .nhs-service-panel{padding:23px 18px}
  .nhs .nhs-service-panel .panel-no{margin-bottom:24px}
  .nhs .nhs-service-panel h3{font-size:1.55rem;max-width:none}
  .nhs .nhs-service-panel p{font-size:.94rem;line-height:1.82}
  .nhs .nhs-service-panel ul{grid-template-columns:1fr;margin-top:18px;gap:4px}
  .nhs .nhs-service-panel li{padding-block:9px;font-size:.9rem}
  .nhs .nhs-form-shell{border-radius:22px}
  .nhs .nhs-form-head{padding:21px 18px 0}
  .nhs .nhs-form{padding:18px;grid-template-columns:1fr}
  .nhs .nhs-form .wide{grid-column:1}
  .nhs .nhs-form-steps{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .nhs .nhs-form-steps::-webkit-scrollbar{display:none}
  .nhs .nhs-form-steps span{flex:0 0 auto}
}
@media(max-width:430px){
  .nhs .nhs-service-index button{min-width:78vw}
  .nhs .nhs-form input,.nhs .nhs-form textarea{font-size:16px} /* prevent iOS zoom */
}
@media(prefers-reduced-motion:reduce){.nhs .nhs-amir-card,.nhs .nhs-service-index button,.nhs .nhs-form input,.nhs .nhs-form textarea,.nhs .nhs-form-submit .nhs-btn b{transition:none!important}}