/* ZEITRA v9 — components added for the systems-integrator rebuild.
   Loads after zeitra.css. Uses the same tokens. */

/* ---------- shared rhythm ---------- */
.sec{padding:110px 0}
.sec-tight{padding:74px 0}
@media(max-width:760px){.sec{padding:74px 0}.sec-tight{padding:54px 0}}
.max-60{max-width:60ch}
.max-52{max-width:52ch}
.center{text-align:center}
.mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:44px}

/* ---------- the honest banner ---------- */
.honest{
  border:1px solid var(--line-gold);
  border-left:3px solid var(--gold);
  background:linear-gradient(100deg,rgba(200,150,46,.075),rgba(200,150,46,.015) 60%);
  border-radius:3px;padding:30px 34px;
}
.honest h3{font-family:var(--font-display);font-weight:480;font-size:1.34rem;color:var(--cream);margin:0 0 10px}
.honest p{margin:0;color:var(--body);max-width:62ch;line-height:1.72}
@media(max-width:640px){.honest{padding:24px 22px}}

/* ---------- quick estimate ---------- */
.est{
  border:1px solid var(--line-gold);border-radius:4px;overflow:hidden;
  background:linear-gradient(165deg,var(--raised),var(--base));
}
.est-top{padding:34px 36px 6px}
.est-q{margin-bottom:26px}
.est-q > span{
  display:block;font-family:var(--font-mono);font-size:.65rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--muted);margin-bottom:13px;
}
.opts{display:flex;flex-wrap:wrap;gap:9px}
.opt{
  font-family:var(--font-body);font-size:.9rem;color:var(--body);cursor:pointer;
  background:rgba(243,235,218,.035);border:1px solid var(--line);
  padding:11px 19px;border-radius:2px;transition:all .38s var(--ease);
}
.opt:hover{border-color:var(--line-gold);color:var(--cream);background:rgba(200,150,46,.06)}
.opt[aria-pressed="true"]{
  background:rgba(200,150,46,.13);border-color:var(--gold);color:var(--amber);
  box-shadow:0 0 22px -8px rgba(200,150,46,.5);
}
.est-out{
  border-top:1px solid var(--line);padding:28px 36px 32px;
  background:rgba(17,17,25,.5);
}
.est-label{font-family:var(--font-mono);font-size:.63rem;letter-spacing:.19em;text-transform:uppercase;color:var(--muted)}
.est-fig{
  font-family:var(--font-display);font-weight:480;color:var(--amber);
  font-size:clamp(1.9rem,5vw,2.85rem);line-height:1.1;margin:9px 0 0;
  transition:opacity .3s var(--ease);
}
.est-fig.flip{opacity:.25}
.est-note{color:var(--muted);font-size:.85rem;margin:13px 0 0;max-width:52ch;line-height:1.65}
@media(max-width:640px){.est-top{padding:26px 22px 4px}.est-out{padding:22px 22px 26px}}

/* ---------- price menu ---------- */
.menu-group{border-top:1px solid var(--line)}
.menu-group:last-of-type{border-bottom:1px solid var(--line)}
.mg-head{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  padding:27px 4px;display:flex;align-items:center;gap:20px;
  font-family:var(--font-body);transition:color .35s var(--ease);
}
.mg-head:hover{color:var(--amber)}
.mg-idx{
  font-family:var(--font-mono);font-size:.68rem;color:var(--gold);
  letter-spacing:.13em;flex-shrink:0;opacity:.75;
}
.mg-title{
  font-family:var(--font-display);font-weight:480;font-size:clamp(1.12rem,2.4vw,1.42rem);
  color:var(--cream);flex:1;line-height:1.3;transition:color .35s var(--ease);
}
.mg-head:hover .mg-title{color:var(--amber)}
.mg-sign{position:relative;width:13px;height:13px;flex-shrink:0}
.mg-sign::before,.mg-sign::after{
  content:'';position:absolute;background:var(--gold);transition:transform .45s var(--ease);
}
.mg-sign::before{top:6px;left:0;width:13px;height:1.4px}
.mg-sign::after{left:6px;top:0;height:13px;width:1.4px}
.menu-group.open .mg-sign::after{transform:scaleY(0)}
.mg-body{max-height:0;overflow:hidden;transition:max-height .6s var(--ease)}
.mg-inner{padding:2px 0 34px}
.mg-sub{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--muted);margin:22px 0 12px;padding-bottom:9px;border-bottom:1px solid var(--line);
}
.mg-sub:first-child{margin-top:0}

.prow{
  display:flex;gap:24px;align-items:baseline;justify-content:space-between;
  padding:13px 0;border-bottom:1px solid rgba(243,235,218,.045);
}
.prow:last-child{border-bottom:0}
.prow-l{flex:1;min-width:0}
.prow-n{color:var(--cream);font-size:.955rem;line-height:1.5}
.prow-d{color:var(--muted);font-size:.83rem;line-height:1.62;margin-top:5px;max-width:62ch}
.prow-p{
  font-family:var(--font-mono);font-size:.87rem;color:var(--amber);
  white-space:nowrap;flex-shrink:0;
}
@media(max-width:600px){
  .prow{flex-direction:column;gap:6px}
  .prow-p{font-size:.83rem}
}

/* ---------- care ---------- */
.care-line{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:15px 0;border-bottom:1px solid rgba(243,235,218,.05);
}
.care-line:last-child{border-bottom:0}
.care-line b{color:var(--cream);font-weight:500;font-size:.96rem}
.care-line span{font-family:var(--font-mono);font-size:.87rem;color:var(--amber);white-space:nowrap}
.care-line small{display:block;color:var(--muted);font-size:.82rem;margin-top:4px;line-height:1.6;font-weight:400}

/* ---------- diagram ---------- */
.diagram{width:100%;height:auto;display:block;max-width:760px;margin:0 auto}
.diagram .dg-line{stroke:var(--gold);stroke-width:1.1;fill:none;opacity:.42}
.diagram .dg-flow{
  stroke:var(--amber);stroke-width:1.8;fill:none;stroke-linecap:round;
  stroke-dasharray:7 190;animation:dgFlow 5.5s linear infinite;
}
@keyframes dgFlow{to{stroke-dashoffset:-394}}
.diagram .dg-box{fill:rgba(32,32,46,.9);stroke:var(--line-gold);stroke-width:1}
.diagram .dg-core{fill:rgba(200,150,46,.1);stroke:var(--gold);stroke-width:1.3}
.diagram text{font-family:var(--font-body);fill:var(--body);font-size:12.5px}
.diagram .dg-lab{fill:var(--cream);font-size:13px}
.diagram .dg-mono{font-family:var(--font-mono);fill:var(--muted);font-size:9.5px;letter-spacing:.14em}
.reduced .diagram .dg-flow{animation:none;stroke-dasharray:none;opacity:.5}

/* ---------- numbered steps ---------- */
.nsteps{counter-reset:ns}
.nstep{
  display:flex;gap:26px;padding:26px 0;border-top:1px solid var(--line);
}
.nstep:last-child{border-bottom:1px solid var(--line)}
.nstep-n{
  font-family:var(--font-mono);font-size:.7rem;color:var(--gold);
  padding-top:5px;flex-shrink:0;width:32px;letter-spacing:.1em;
}
.nstep h4{
  font-family:var(--font-display);font-weight:480;font-size:1.16rem;
  color:var(--cream);margin:0 0 8px;line-height:1.35;
}
.nstep p{margin:0;color:var(--body);line-height:1.75;max-width:60ch}
@media(max-width:600px){.nstep{gap:16px}}

/* ---------- pull quote ---------- */
.pull{
  border-left:2px solid var(--gold);padding:6px 0 6px 28px;
  font-family:var(--font-display);font-weight:400;font-style:italic;
  font-size:clamp(1.15rem,2.7vw,1.5rem);color:var(--cream);line-height:1.55;max-width:56ch;
}

/* ---------- small caps label ---------- */
.slab{
  font-family:var(--font-mono);font-size:.63rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);
}

/* ---------- comparison split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.split > div{padding:32px 30px}
.split > div:first-child{border-right:1px solid var(--line);background:rgba(243,235,218,.014)}
.split h4{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.19em;text-transform:uppercase;margin:0 0 18px}
.split-no h4{color:var(--muted)}
.split-yes h4{color:var(--gold)}
.split ul{list-style:none;padding:0;margin:0}
.split li{color:var(--body);padding:9px 0 9px 22px;position:relative;line-height:1.65;font-size:.94rem}
.split-no li::before{content:'';position:absolute;left:0;top:16px;width:9px;height:1px;background:var(--muted)}
.split-yes li::before{content:'';position:absolute;left:1px;top:13px;width:5px;height:9px;border:solid var(--gold);border-width:0 1.4px 1.4px 0;transform:rotate(42deg)}
@media(max-width:700px){
  .split{grid-template-columns:1fr}
  .split > div:first-child{border-right:0;border-bottom:1px solid var(--line)}
}

/* ═══════════════════════════════════════════════════════
   v9.1 — layout polish, breathing room, mobile
   ═══════════════════════════════════════════════════════ */

/* ---------- logo ---------- */
.nav-logo img{height:46px}
.nav.scrolled .nav-logo img{height:40px;transition:height .35s var(--ease)}
@media(max-width:900px){.nav-logo img{height:40px}}

/* ---------- container gutters ---------- */
.wrap{width:min(1180px,100% - 56px)}
@media(max-width:760px){.wrap{width:min(1180px,100% - 40px)}}
@media(max-width:420px){.wrap{width:min(1180px,100% - 32px)}}

/* ---------- centered sections: centre everything inside ---------- */
.center h1,.center h2,.center h3,.center p{margin-left:auto;margin-right:auto}
.center .lead,.center p{max-width:56ch}
.center .btn{margin:0 5px}
@media(max-width:560px){
  .center .btn{display:flex;width:100%;justify-content:center;margin:0 0 10px}
}

/* ---------- cards: more internal room ---------- */
.card,.card-gold,.card-flat{padding:34px 32px}
@media(max-width:760px){.card,.card-gold,.card-flat{padding:28px 24px}}
.card p:last-child,.card-gold p:last-child,.card-flat p:last-child{margin-bottom:0}

/* ---------- honest banner ---------- */
.honest{padding:34px 38px}
@media(max-width:760px){.honest{padding:26px 24px}}

/* ---------- grids collapse cleanly ---------- */
@media(max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}

/* ---------- headings ---------- */
h2{line-height:1.16}
.sec > .wrap > h2,.sec-tight > .wrap > h2{margin-bottom:0}

/* ---------- price menu: breathing room + mobile ---------- */
.mg-head{padding:29px 6px}
.mg-inner{padding:2px 6px 36px}
.prow{padding:15px 0;gap:30px}
@media(max-width:640px){
  .mg-head{gap:14px;padding:24px 2px}
  .mg-inner{padding:2px 2px 28px}
  .prow{flex-direction:row;flex-wrap:wrap;gap:6px 14px;padding:14px 0}
  .prow-l{flex:1 1 100%}
  .prow-p{flex:0 0 auto;margin-top:2px}
}

/* ---------- estimate ---------- */
@media(max-width:560px){
  .opts{gap:7px}
  .opt{padding:10px 15px;font-size:.86rem;flex:1 1 auto;text-align:center}
}

/* ---------- care lines ---------- */
.care-line{padding:16px 0;gap:24px}
@media(max-width:560px){
  .care-line{flex-direction:column;gap:5px}
  .care-line span{align-self:flex-start}
}

/* ---------- split ---------- */
.split > div{padding:36px 34px}
@media(max-width:760px){.split > div{padding:28px 24px}}

/* ---------- numbered steps ---------- */
.nstep{padding:28px 0;gap:28px}
@media(max-width:560px){.nstep{gap:14px;padding:24px 0}.nstep-n{width:24px}}

/* ---------- diagram: force solid dark boxes ---------- */
.diagram .dg-box{fill:#20202E;fill-opacity:1;stroke:rgba(200,150,46,.34);stroke-width:1}
.diagram .dg-core{fill:#241F16;fill-opacity:1;stroke:#C8962E;stroke-width:1.4}
.diagram text{fill:#C9C2B4}
.diagram .dg-lab{fill:#F3EBDA}
.diagram .dg-mono{fill:#948D7F}
@media(max-width:700px){.diagram{margin-top:8px}}

/* ---------- honeypot (class, not inline) ---------- */
.hp{position:absolute!important;left:-9999px!important;top:auto!important;
    width:1px!important;height:1px!important;overflow:hidden!important}

/* ---------- utilities replacing inline styles ---------- */
.lead-w{margin-top:22px;max-width:56ch}
.hero-lead{margin-top:24px;max-width:56ch}
.h2-tight{margin-top:12px}
.body-p{color:var(--body);line-height:1.75}
.card-h{font-family:var(--font-display);font-weight:480;font-size:1.18rem;
        color:var(--cream);margin:12px 0;line-height:1.35}
.card-p{color:var(--body);line-height:1.72;font-size:.94rem}
.fine{color:var(--muted);font-size:.89rem;line-height:1.65}
.fig{font-family:var(--font-mono);color:var(--amber);font-size:1.5rem;margin:22px 0 4px}
.gap-s{gap:20px}.gap-m{gap:22px}.gap-l{gap:36px}
.start{align-items:start}.mid{align-items:center}

/* ---------- mobile: full-width stacked CTAs everywhere ---------- */
@media(max-width:560px){
  .hero .btn,.page-hero .btn,.sec .btn,.sec-tight .btn{
    display:flex;width:100%;justify-content:center;margin:0 0 10px!important;
  }
  .form-shell .btn{margin-bottom:0!important}
}