/* ============================================================
   Hyrac Tech v2 — service-detail shared styles
   Loaded alongside base.css on services/*.html
   ============================================================ */

.dsec{padding-block:var(--s-16)}
.dsec--sand{background:var(--sand)} .dsec--paper{background:var(--paper)}

/* ---------- Detail hero ---------- */
.dhero{padding-block:var(--s-16) var(--s-12); background:var(--sand)}
.crumb{display:flex; gap:var(--s-2); align-items:center; flex-wrap:wrap; font-family:var(--mono);
  font-size:var(--t-xs); letter-spacing:var(--tr-mono); color:var(--ink-500); margin-bottom:var(--s-5)}
.crumb a{color:var(--ink-500)} .crumb a:hover{color:var(--red)} .crumb__sep{color:var(--ink-300)}
.dhero__eyebrow{margin-bottom:var(--s-5)}
.dhero h1{font-family:var(--serif); font-weight:var(--w-normal); font-optical-sizing:auto;
  font-variation-settings:"wght" 440,"SOFT" 0,"WONK" 0;
  font-size:clamp(2.2rem, 1.4rem + 3vw, var(--t-4xl)); line-height:1.04; letter-spacing:-0.025em; max-width:20ch; text-wrap:balance}
.dhero__sub{margin-top:var(--s-5); font-size:var(--t-md); line-height:var(--lh-relaxed); color:var(--ink-700); max-width:58ch}
.dhero__meta{margin-top:var(--s-6); display:flex; flex-wrap:wrap; gap:var(--s-3)}
.pill{font-family:var(--mono); font-size:var(--t-xs); letter-spacing:var(--tr-mono); color:var(--ink-700);
  background:var(--paper); border:var(--hair); border-radius:100px; padding:6px 14px; white-space:nowrap}
.pill--price{color:var(--red); border-color:rgba(224,27,27,.32)}
.dhero__ctas{margin-top:var(--s-8); display:flex; gap:var(--s-3); flex-wrap:wrap}

/* ---------- Deliverables (numbered) ---------- */
.dlist{list-style:none; padding:0; margin:var(--s-4) 0 0; max-width:var(--prose); border-top:var(--hair)}
.dlist li{display:grid; grid-template-columns:44px minmax(0,1fr); gap:var(--s-4); padding-block:var(--s-5); border-bottom:var(--hair)}
.dlist__n{font-family:var(--mono); font-size:var(--t-sm); color:var(--red); font-variant-numeric:tabular-nums; padding-top:2px}
.dlist p{font-size:var(--t-base); color:var(--ink-800); line-height:var(--lh-normal); max-width:none}

/* ---------- Phases ---------- */
.phases{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-8); margin-top:var(--s-4)}
@media(min-width:820px){ .phases{grid-template-columns:repeat(3,minmax(0,1fr))} }
.phase{padding-top:var(--s-6); border-top:2px solid var(--ink-150); position:relative}
.phase::before{content:""; position:absolute; top:-6px; left:0; width:10px; height:10px; border-radius:50%; background:var(--red)}
.phase__when{font-family:var(--mono); font-size:var(--t-xs); letter-spacing:var(--tr-mono); text-transform:uppercase; color:var(--red)}
.phase h3{margin-top:var(--s-3); font-size:var(--t-lg); color:var(--ink-900); line-height:1.2}
.phase p{margin-top:var(--s-3); font-size:var(--t-sm); color:var(--ink-700); line-height:var(--lh-normal); max-width:none}

/* ---------- Facets (what it covers) ---------- */
.facets{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-4); margin-top:var(--s-4)}
@media(min-width:600px){ .facets{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(min-width:1000px){ .facets--3{grid-template-columns:repeat(3,minmax(0,1fr))} }
.facet{background:var(--paper); border:var(--hair); border-radius:var(--r-sm); padding:var(--s-5) var(--s-6)}
.dsec--paper .facet{background:var(--sand)}
.facet__i{font-family:var(--mono); font-size:var(--t-xs); letter-spacing:var(--tr-mono); text-transform:uppercase; color:var(--ink-500)}
.facet h3{margin-top:var(--s-2); font-size:var(--t-md); color:var(--ink-900); line-height:var(--lh-snug); letter-spacing:-0.005em}
.facet p{margin-top:var(--s-2); font-size:var(--t-sm); color:var(--ink-700); line-height:var(--lh-normal); max-width:none}

/* ---------- Investment ---------- */
.invest{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-8); margin-top:var(--s-4)}
@media(min-width:900px){ .invest{grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--s-12); align-items:start} }
.invest__card{background:var(--deep); color:#fff; border-radius:var(--r-lg); padding:var(--s-8); display:flex; flex-direction:column; gap:var(--s-5)}
.invest__row{display:flex; flex-direction:column; gap:var(--s-1)}
.invest__row+.invest__row{padding-top:var(--s-5); border-top:1px solid rgba(255,255,255,.12)}
.invest__k{font-family:var(--mono); font-size:var(--t-xs); letter-spacing:var(--tr-mono); text-transform:uppercase; color:var(--navy-200)}
.invest__v{font-size:var(--t-2xl); color:#fff; letter-spacing:-0.02em; line-height:1.1; font-variant-numeric:tabular-nums}
.invest__note{font-size:var(--t-sm); color:var(--ink-300); margin-top:2px}
.invest__cols{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-6)}
@media(min-width:560px){ .invest__cols{grid-template-columns:repeat(2,minmax(0,1fr))} }
.invest__col h3{font-family:var(--mono); font-size:var(--t-xs); letter-spacing:var(--tr-mono); text-transform:uppercase; color:var(--ink-500); margin-bottom:var(--s-3)}
.invest__col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--s-2)}
.invest__col li{font-size:var(--t-sm); color:var(--ink-900); line-height:var(--lh-normal); padding-left:var(--s-5); position:relative; max-width:none}
.invest__col li::before{content:""; position:absolute; left:0; top:.62em; width:8px; height:1px; background:var(--red)}
.invest__col--no li{color:var(--ink-500)} .invest__col--no li::before{background:var(--ink-300)}

/* ---------- What shapes the price (cost drivers) ---------- */
.drivers{margin-top:var(--s-10); border-top:var(--hair); padding-top:var(--s-8)}
.drivers__h{font-family:var(--mono); font-size:var(--t-xs); letter-spacing:var(--tr-wide); text-transform:uppercase; color:var(--ink-500); margin-bottom:var(--s-6)}
.drivers__grid{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-5)}
@media(min-width:640px){ .drivers__grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-5) var(--s-10)} }
.driver{display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s-3); align-items:baseline}
.driver__up{color:var(--red); font-family:var(--mono); font-size:var(--t-sm); line-height:1.5}
.driver p{font-size:var(--t-sm); color:var(--ink-700); line-height:var(--lh-normal); max-width:none}
.driver b{color:var(--ink-900); font-weight:var(--w-semibold)}

/* ---------- FAQ ---------- */
.faq{max-width:var(--prose); margin-top:var(--s-4); border-top:var(--hair)}
.faq details{border-bottom:var(--hair)}
.faq summary{list-style:none; cursor:pointer; padding:var(--s-5) 0; display:flex; align-items:flex-start;
  justify-content:space-between; gap:var(--s-4); font-size:var(--t-base); font-weight:var(--w-semibold);
  color:var(--ink-900); line-height:var(--lh-snug); letter-spacing:-0.005em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary::after{content:"+"; font-family:var(--mono); font-size:var(--t-lg); color:var(--red); line-height:1; flex:none; transition:transform .2s ease}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--red)}
.faq summary:focus-visible{outline:2px solid var(--red); outline-offset:3px; border-radius:2px}
.faq__a{padding-bottom:var(--s-5); font-size:var(--t-base); color:var(--ink-700); line-height:var(--lh-relaxed); max-width:none}
.faq__a p+p{margin-top:var(--s-3)}

/* ---------- Related ---------- */
.related{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-4); margin-top:var(--s-4)}
@media(min-width:768px){ .related{grid-template-columns:repeat(3,minmax(0,1fr))} }
.rcard{background:var(--paper); border:var(--hair); border-radius:var(--r-md); padding:var(--s-6);
  display:flex; flex-direction:column; gap:var(--s-2); color:inherit; text-decoration:none;
  transition:border-color .16s ease, transform .16s ease, box-shadow .2s ease}
.dsec--paper .rcard{background:var(--sand)}
.rcard:hover{border-color:var(--ink-300); transform:translateY(-3px); box-shadow:0 18px 40px -24px rgba(20,16,10,.3)}
.rcard h3{font-size:var(--t-md); color:var(--ink-900); line-height:var(--lh-snug)}
.rcard p{font-size:var(--t-sm); color:var(--ink-700); line-height:var(--lh-normal); max-width:none}
.rcard__foot{margin-top:auto; padding-top:var(--s-3); border-top:var(--hair); display:flex; align-items:center;
  justify-content:space-between; gap:var(--s-3); font-family:var(--mono); font-size:var(--t-xs);
  letter-spacing:var(--tr-mono); text-transform:uppercase; color:var(--ink-500)}
.rcard__price{color:var(--ink-900)} .rcard__arw{color:var(--red)}