/* Services pages (services.html and the service pages), Request a Quote and the capability statement. */

/* Hero */
.svc-hero{padding:88px 0 72px}
.svc-hero h1{max-width:880px}
.svc-hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.svc-hero .facts{display:flex;gap:28px;flex-wrap:wrap;margin-top:30px;font-family:var(--mono);font-size:.76rem;color:var(--slate-soft);letter-spacing:.02em}
.svc-hero .facts b{color:var(--navy);font-weight:500}
.svc-hero .back{font-family:var(--sans);font-size:.82rem;font-weight:600;color:var(--slate-soft);text-decoration:none;display:inline-block;margin-bottom:18px}
.svc-hero .back:hover{color:var(--teal-deep)}

/* Service cards */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.svc-card{background:var(--card-bg);padding:30px 28px 26px;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:background-color .2s ease;position:relative}
a.svc-card:hover{background:var(--card-hover)}
a.svc-card:hover h3{color:var(--teal-deep)}
.svc-card .num{font-family:var(--mono);font-size:.78rem;color:var(--teal-deep)}
.svc-card h3{font-size:1.3rem;margin:12px 0 10px;line-height:1.25}
.svc-card p{font-family:var(--sans);font-size:.92rem;line-height:1.65;color:var(--slate);margin-bottom:14px}
.svc-card ul{list-style:none;margin:0 0 18px;padding:0;font-family:var(--sans);font-size:.86rem;color:var(--slate)}
.svc-card li{padding:5px 0 5px 16px;position:relative}
.svc-card li::before{content:"";position:absolute;left:0;top:13px;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.svc-card .more{margin-top:auto}

/* Who we work with */
.svc-clients{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--tint-2)}
.svc-clients div{background:var(--white);padding:24px 24px 22px}
section:nth-of-type(even) .svc-clients div{background:var(--tint)}
.svc-clients b{display:block;font-family:var(--serif);font-weight:500;font-size:1.08rem;color:var(--navy);margin-bottom:6px}
.svc-clients span{font-family:var(--sans);font-size:.88rem;line-height:1.6;color:var(--slate)}

/* Process steps */
.svc-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:step}
.svc-steps li{counter-increment:step;background:var(--card-bg);padding:26px 22px;font-family:var(--sans);font-size:.9rem;line-height:1.6;color:var(--slate)}
.svc-steps li::before{content:counter(step,decimal-leading-zero);display:block;font-family:var(--mono);font-size:.78rem;color:var(--teal-deep);margin-bottom:12px}
.svc-steps li b{display:block;font-family:var(--serif);font-size:1.1rem;font-weight:500;color:var(--navy);margin-bottom:6px}

/* Proof strip */
.proof{background:var(--navy);color:#fff;padding:64px 0}
section.proof{background:var(--navy)}
.proof .label{color:var(--teal-dim)}
.proof-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:22px 0 30px}
.proof-stats b{display:block;font-family:var(--mono);font-weight:500;font-size:2.3rem;letter-spacing:-.03em;color:#fff}
.proof-stats span{font-family:var(--sans);font-size:.86rem;color:#C9D2DB;line-height:1.5}
.proof p.speakers{font-family:var(--serif);font-size:1.05rem;color:#C9D2DB;max-width:860px;line-height:1.65;margin:0}
.proof p.speakers b{color:#fff;font-weight:500}

/* Why PIVRA */
.why-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.why-grid .card h3{font-size:1.15rem;margin-bottom:8px}
.why-grid .card p{font-family:var(--sans);font-size:.92rem;line-height:1.65}

/* Deliverables and examples on service pages */
.svc-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.svc-list{list-style:none;margin:0;padding:0}
.svc-list li{font-family:var(--sans);font-size:.96rem;line-height:1.6;color:var(--slate);padding:13px 0;border-bottom:1px solid var(--tint-2);display:grid;grid-template-columns:18px 1fr;gap:10px}
.svc-list li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal);margin-top:8px}
.svc-list li b{color:var(--navy);font-weight:600}
.svc-h3{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep);font-weight:500;margin:0 0 10px}
.svc-related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.svc-related a{background:var(--card-bg);padding:24px;text-decoration:none;display:flex;flex-direction:column;transition:background-color .2s ease}
.svc-related a:hover{background:var(--card-hover)}
.svc-related a:hover strong{color:var(--teal-deep)}
.svc-related .t{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep)}
.svc-related strong{font-family:var(--serif);font-weight:500;font-size:1.05rem;color:var(--navy);margin:10px 0 0;line-height:1.35}

/* FAQ */
.faq{max-width:840px}
.faq details{border-bottom:1px solid var(--tint-2);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;font-family:var(--serif);font-size:1.1rem;color:var(--navy);padding:18px 36px 18px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:15px;font-family:var(--sans);font-size:1.3rem;color:var(--teal-deep)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{font-family:var(--sans);font-size:.95rem;line-height:1.7;color:var(--slate);margin:0 0 20px;max-width:760px}

/* Closing call to action */
.quote-band{background:var(--navy);padding:52px 56px;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.quote-band h2{color:#fff;margin:0 0 8px;font-size:clamp(1.6rem,2.6vw,2.1rem)}
.quote-band p{font-family:var(--sans);color:#C9D3DE;margin:0;max-width:600px;line-height:1.6}
.quote-band .actions{display:flex;gap:12px;flex-wrap:wrap}
.quote-band .btn.primary{background:#fff;color:var(--navy)}
.quote-band .btn.primary:hover{background:var(--tint-2)}
.quote-band .btn.secondary{background:rgba(255,255,255,.1);color:#fff}
.quote-band .btn.secondary:hover{background:rgba(255,255,255,.18)}

/* Request a Quote: side panel */
.quote-layout{grid-template-columns:minmax(0,1fr) 320px}
.quote-aside{position:sticky;top:100px;display:grid;gap:16px}
.qa-card{background:var(--white);padding:24px 24px 22px}
.qa-card .label{display:block;margin-bottom:12px}
.qa-card p{font-family:var(--sans);font-size:.9rem;line-height:1.6;color:var(--slate);margin:0}
.qa-steps{list-style:none;margin:0;padding:0;counter-reset:qa}
.qa-steps li{counter-increment:qa;position:relative;padding:0 0 14px 34px;font-family:var(--sans);font-size:.86rem;line-height:1.55;color:var(--slate)}
.qa-steps li::before{content:counter(qa);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:var(--tint-2);color:var(--navy);font-family:var(--mono);font-size:.74rem;display:flex;align-items:center;justify-content:center}
.qa-steps li b{display:block;color:var(--navy);font-weight:600}
.qa-proof{list-style:none;margin:0 0 14px;padding:0;font-family:var(--sans);font-size:.88rem;color:var(--slate)}
.qa-proof li{padding:6px 0;border-bottom:1px solid var(--tint)}
.qa-proof b{font-family:var(--mono);font-weight:500;color:var(--navy);margin-right:6px}

@media (max-width:1000px){
  .svc-grid,.svc-related{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-steps,.proof-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quote-layout{grid-template-columns:1fr}
  .quote-aside{position:static}
}
@media (max-width:860px){
  .svc-two{grid-template-columns:1fr;gap:36px}
  .svc-clients{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .svc-hero{padding:56px 0 48px}
  .svc-grid,.svc-related,.why-grid,.svc-clients,.svc-steps{grid-template-columns:1fr}
  .quote-band{padding:34px 24px}
  .proof{padding:48px 0}
  .proof-stats b{font-size:1.9rem}
}

/* Capability statement (capability-statement.html), designed to print on A4 */
.cap{max-width:900px}
.cap-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;border-bottom:3px solid var(--navy);padding-bottom:22px;margin-bottom:28px}
.cap-head img{height:44px;width:auto}
.cap-head .org{font-family:var(--serif);font-size:1.25rem;color:var(--navy);margin-top:12px}
.cap-head .tl{font-family:var(--serif);font-style:italic;color:var(--teal-deep)}
.cap-head .contact{font-family:var(--sans);font-size:.86rem;color:var(--slate);text-align:right;line-height:1.7}
section > .wrap.cap h2,.cap h2{margin:26px 0 10px;max-width:none;line-height:1.3;font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep);font-weight:500}
.cap p,.cap li{font-family:var(--sans);font-size:.93rem;line-height:1.6;color:var(--slate)}
.cap .cap-cols{display:grid;grid-template-columns:1fr 1fr;gap:6px 36px}
.cap .cap-svc{margin:0 0 10px;font-family:var(--sans);font-size:.9rem;line-height:1.55;color:var(--slate)}
.cap .cap-svc b{display:block;font-family:var(--serif);font-weight:500;color:var(--navy);font-size:1.02rem}
.cap ul{margin:0;padding-left:18px}
.cap .cap-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:6px 0}
.cap .cap-stats div{background:var(--tint);padding:14px}
.cap .cap-stats b{display:block;font-family:var(--mono);font-size:1.5rem;font-weight:500;color:var(--navy)}
.cap .cap-stats span{font-family:var(--sans);font-size:.78rem;color:var(--slate-soft)}
.cap-tools{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
@media (max-width:640px){.cap .cap-cols,.cap .cap-stats{grid-template-columns:1fr 1fr}.cap-head .contact{text-align:left}}
@media print{
  @page{size:A4;margin:11mm 13mm 10mm}
  header.site,footer.site,.cap-tools,.wa-float,.no-print{display:none!important}
  body{background:#fff}
  section{padding:0!important;background:#fff!important}
  .wrap{padding:0;max-width:none}
  .cap p,.cap li,.cap .cap-svc{font-size:8.7pt;line-height:1.36}
  .cap .cap-svc{margin-bottom:6px}
  .cap .cap-svc b{font-size:10.5pt}
  .cap-head{padding-bottom:12px;margin-bottom:12px}
  .cap .cap-stats div{padding:8px 10px}
  .cap .cap-stats b{font-size:15pt}
  section > .wrap.cap h2,.cap h2{margin:12px 0 5px}
  .cap .cap-stats{grid-template-columns:repeat(4,1fr)}
  .cap .cap-cols{grid-template-columns:1fr 1fr}
  a{color:inherit;text-decoration:none}
}