/* =====================================================================
   TARC — Services listing page. Loads on top of tarc-pages.css (shared
   .tarc-page tokens, hero, buttons, eyebrow, hero-rail).
===================================================================== */

/* centered section head + white-outline button (used on dark CTA) */
.tarc-page .tc-sec-head.center{ margin-inline:auto; text-align:center; }
.tarc-page .tc-sec-head.center .tc-eyebrow{ justify-content:center; }
.tarc-page .tc-btn--outw{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3); }
.tarc-page .tc-btn--outw:hover{ border-color:var(--brand); color:#fff; }

/* ===================== SERVICE CARDS ===================== */
.tarc-page .sv-cards{ background:var(--paper); }
.tarc-page .sv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,24px); }
@media (max-width:900px){ .tarc-page .sv-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .tarc-page .sv-grid{ grid-template-columns:1fr; } }

.tarc-page .sv-card{ display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); color:inherit; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.tarc-page .sv-card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--brand) 26%,var(--line)); box-shadow:0 24px 48px -24px rgba(12,13,14,.3); }
.tarc-page .sv-card:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }

.tarc-page .sv-photo{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--paper-2); }
.tarc-page .sv-photo .sv-img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.tarc-page .sv-card:hover .sv-photo .sv-img{ transform:scale(1.05); }
.tarc-page .sv-photo-ic{ position:absolute; inset:0; display:grid; place-items:center; color:color-mix(in srgb,var(--brand) 45%,var(--line)); background:linear-gradient(135deg,#efeae1,#f7f4ee); }
.tarc-page .sv-photo-ic svg{ width:64px; height:64px; }

.tarc-page .sv-body{ padding:0 clamp(22px,2.4vw,28px) 26px; display:flex; flex-direction:column; flex:1; }
.tarc-page .sv-ic{ width:56px; height:56px; border-radius:12px; display:grid; place-items:center; color:var(--brand); background:#fff; border:1px solid color-mix(in srgb,var(--brand) 18%,var(--line)); box-shadow:var(--shadow); margin:-30px 0 16px; position:relative; z-index:2; }
.tarc-page .sv-ic svg{ width:29px; height:29px; }
.tarc-page .sv-body h3{ font-family:var(--tc-font-display); font-weight:600; font-size:20px; letter-spacing:-.01em; margin:0 0 9px; color:var(--ink); }
.tarc-page .sv-desc{ font-size:14px; color:var(--ink-2); margin:0 0 18px; }
.tarc-page .sv-wyg{ font-family:var(--tc-font-display); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin:0 0 12px; padding-top:16px; border-top:1px solid var(--line-2); }
.tarc-page .sv-out{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:10px; }
.tarc-page .sv-out li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--ink); }
.tarc-page .sv-tick{ flex:none; width:18px; height:18px; margin-top:1px; border-radius:50%; background:color-mix(in srgb,var(--brand) 14%,#fff); color:var(--brand); display:grid; place-items:center; }
.tarc-page .sv-tick svg{ width:11px; height:11px; }
.tarc-page .sv-cardcta{ margin-top:auto; display:inline-flex; align-items:center; gap:9px; font-family:var(--tc-font-display); font-weight:600; font-size:14.5px; color:var(--ink); }
.tarc-page .sv-cardcta .tc-arw{ color:var(--brand); transition:transform .2s ease; }
.tarc-page .sv-card:hover .sv-cardcta .tc-arw{ transform:translateX(4px); }
.tarc-page .sv-empty{ border:1px dashed var(--line); border-radius:12px; padding:44px 24px; text-align:center; color:var(--ink-2); background:var(--card); }
.tarc-page .sv-empty b{ color:var(--ink); font-family:var(--tc-font-display); }

/* ===================== HOW IT WORKS — timeline ===================== */
.tarc-page .sv-proc{ background:var(--paper-2); }
.tarc-page .w1-tl{ position:relative; max-width:980px; margin-inline:auto; }
.tarc-page .w1-tl::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; background:var(--line); transform:translateX(-50%); }
.tarc-page .w1-tl::after{ content:""; position:absolute; left:50%; top:0; width:2px; height:0; background:linear-gradient(var(--brand),var(--brand-2)); transform:translateX(-50%); }
.tarc-page .w1-tl.in::after{ animation:sv-grow 1.4s ease forwards; }
@keyframes sv-grow{ from{ height:0 } to{ height:100% } }
/* Alternating rows: card in one 1fr column, node absolutely centred on the line
   (guarantees the node lines up with the card centre on BOTH sides). Equal card
   min-height keeps the node spacing even. */
.tarc-page .w1-row{ position:relative; display:grid; grid-template-columns:1fr 1fr; column-gap:74px; align-items:center; margin-bottom:22px; }
.tarc-page .w1-row:last-child{ margin-bottom:0; }
.tarc-page .w1-card{ grid-column:1; background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px 24px; box-shadow:var(--shadow); min-height:132px; display:flex; flex-direction:column; justify-content:center; }
.tarc-page .w1-row:nth-child(even) .w1-card{ grid-column:2; }
.tarc-page .w1-node{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:56px; height:56px; border-radius:50%; background:#fff; border:2px solid var(--brand); color:var(--brand); display:grid; place-items:center; font-family:var(--tc-font-display); font-weight:700; font-size:16px; z-index:3; box-shadow:0 0 0 6px var(--paper-2); font-variant-numeric:tabular-nums; }
.tarc-page .w1-card h3{ font-family:var(--tc-font-display); font-weight:600; font-size:19px; margin:0 0 8px; color:var(--ink); }
.tarc-page .w1-card p{ margin:0; font-size:14px; color:var(--ink-2); }
/* reveal */
.tarc-page.anim .w1-row{ opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; }
.tarc-page.anim .w1-row.in{ opacity:1; transform:none; }
@media (max-width:720px){
  .tarc-page .w1-tl{ max-width:540px; }
  .tarc-page .w1-tl::before, .tarc-page .w1-tl::after{ left:27px; }
  .tarc-page .w1-row{ grid-template-columns:1fr; column-gap:0; }
  .tarc-page .w1-card, .tarc-page .w1-row:nth-child(even) .w1-card{ grid-column:1; margin-left:64px; min-height:0; }
  .tarc-page .w1-node{ left:27px; }
}

/* ===================== TRUST — numbers + certified ===================== */
.tarc-page .sv-trust{ background:var(--paper); }
.tarc-page .ta-panel{ background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; }
.tarc-page .ta-stats{ display:grid; grid-template-columns:repeat(4,1fr); }
@media (max-width:700px){ .tarc-page .ta-stats{ grid-template-columns:repeat(2,1fr); } }
.tarc-page .ta-stat{ padding:clamp(22px,3vw,34px); text-align:center; border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.tarc-page .ta-stat .n{ font-family:var(--tc-font-display); font-weight:700; font-size:clamp(30px,4vw,44px); color:var(--brand); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.tarc-page .ta-stat .l{ font-size:13px; color:var(--ink-2); margin-top:8px; }
.tarc-page .ta-certs{ display:flex; align-items:center; justify-content:center; gap:clamp(16px,3vw,34px); flex-wrap:wrap; padding:20px 24px; background:var(--paper-2); }
.tarc-page .ta-certs .lb{ font-family:var(--tc-font-display); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.tarc-page .ta-certs .cc{ display:inline-flex; align-items:center; gap:8px; font-family:var(--tc-font-display); font-weight:600; font-size:14px; color:var(--ink); }
.tarc-page .ta-certs .cc svg{ width:20px; height:20px; color:var(--brand); }

/* ===================== CTA — split with photo (full-width) ===================== */
.tarc-page .sv-cta.ca{ background:var(--paper); padding-top:30px; }
.tarc-page .sv-cta .tc-wrap{ max-width:100%; }
.tarc-page .sv-cta .ca-box{ display:grid; grid-template-columns:1.1fr 1fr; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); min-height:480px; }
@media (max-width:760px){ .tarc-page .sv-cta .ca-box{ grid-template-columns:1fr; } }
.tarc-page .sv-cta .ca-content{ background:var(--ground); color:#fff; padding:clamp(30px,4vw,54px); display:flex; flex-direction:column; justify-content:center; }
.tarc-page .sv-cta .ca-content .tc-eyebrow{ color:#ff8a4c; }
.tarc-page .sv-cta .ca-content .tc-h2{ color:#fff; margin:0 0 12px; }
.tarc-page .sv-cta .ca-content p{ color:var(--ground-ink-2); margin:0 0 24px; max-width:44ch; }
.tarc-page .sv-cta .ca-points{ list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:12px; }
.tarc-page .sv-cta .ca-points li{ display:flex; align-items:flex-start; gap:11px; font-size:15px; color:#eceae6; }
.tarc-page .sv-cta .ca-points .ck{ flex:none; width:22px; height:22px; margin-top:1px; border-radius:50%; background:color-mix(in srgb,var(--brand) 22%, #1a1c1f); color:var(--brand); display:grid; place-items:center; }
.tarc-page .sv-cta .ca-points .ck svg{ width:12px; height:12px; }
.tarc-page .sv-cta .ca-acts{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:25px; }
.tarc-page .sv-cta .ca-ln{ font-family:var(--tc-font-display); font-weight:600; font-size:15px; color:#fff; }
.tarc-page .sv-cta .ca-ln:hover{ color:var(--brand); }
.tarc-page .sv-cta .ca-img{ position:relative; background:var(--paper-2); min-height:240px; overflow:hidden; }
.tarc-page .sv-cta .ca-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.tarc-page .sv-cta .ca-img .ca-ph{ position:absolute; inset:0; display:grid; place-items:center; color:color-mix(in srgb,var(--brand) 45%,var(--line)); background:linear-gradient(135deg,#efeae1,#f7f4ee); }
.tarc-page .sv-cta .ca-img .ca-ph svg{ width:70px; height:70px; }

@media (prefers-reduced-motion:reduce){
  .tarc-page .sv-card, .tarc-page .sv-img, .tarc-page .sv-cardcta .tc-arw{ transition:none !important; }
  .tarc-page .w1-tl::after{ height:100% !important; animation:none !important; }
  .tarc-page.anim .w1-row{ opacity:1 !important; transform:none !important; }
}