/* apagency.ca /services/ + homepage services band (order t_1167a0214b, 2026-10-19).
   Source of truth: SteveCommand projects/apagency-services/. Deployed to /site-assets/services.css.
   Everything is scoped under .svc so it can never touch the site's own Tailwind classes. */
.svc{--g:#B9935B;--g2:#CFA66B;--bg:#0a0a0a;--card:#121110;--line:#2a251d;--txt:#FFFBF6;--mute:#a59d92;
  background:#0a0a0a;color:var(--txt);font-family:Inter,system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;position:relative;z-index:2}
.svc *{box-sizing:border-box}
.svc a{color:inherit}
.svc .w{max-width:1200px;margin:0 auto;padding:0 24px}
.svc .mono{font-family:"IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;font-size:12.5px;color:var(--g);display:inline-block}
.svc h1,.svc h2{font-family:Kanit,Inter,sans-serif;font-weight:700;text-transform:uppercase;line-height:.95;letter-spacing:-.01em;margin:0}
.svc h1{font-size:clamp(42px,7vw,96px)}
.svc h2{font-size:clamp(32px,4.8vw,62px);margin:12px 0 18px}
.svc h3{font-family:Inter,sans-serif;font-weight:700;font-size:20px;line-height:1.2;margin:0 0 8px;letter-spacing:-.01em}
.svc p{margin:0}
.svc .lead{font-size:clamp(17px,1.6vw,20px);color:var(--mute);max-width:660px}
.svc em{font-style:normal;color:var(--g)}
.svc section{padding:104px 0;border-top:1px solid #17140f;scroll-margin-top:96px}
.svc .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 26px;font-weight:700;text-decoration:none;font-size:14px;letter-spacing:.12em;text-transform:uppercase;transition:transform .2s,background .2s,box-shadow .2s,border-color .2s;white-space:nowrap}
.svc .btn-g{background:var(--g);color:#0a0a0a}
.svc .btn-g:hover{background:var(--g2);transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(185,147,91,.6)}
.svc .btn-o{border:1px solid #4a3d2a;color:var(--txt)}
.svc .btn-o:hover{border-color:var(--g);color:var(--g2)}
.svc .ctas{display:flex;gap:12px;flex-wrap:wrap}
/* hero */
.svc .hero{padding:168px 0 96px;border-top:0;position:relative;overflow:hidden}
.svc .hero:before{content:"";position:absolute;right:-12%;top:-20%;width:820px;height:820px;background:radial-gradient(closest-side,rgba(185,147,91,.20),transparent);pointer-events:none}
.svc .hero .lead{margin:26px 0 34px}
.svc .proofrow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:60px}
.svc .proof{border:1px solid var(--line);padding:20px;background:linear-gradient(160deg,#15120d,#0d0c0a)}
.svc .proof b{display:block;font-family:Kanit,sans-serif;font-size:34px;color:var(--g);line-height:1;text-transform:uppercase}
.svc .proof span{font-size:14px;color:var(--mute);display:block;margin-top:8px}
/* grids + cards */
.svc .g2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.svc .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.svc .card{background:var(--card);border:1px solid var(--line);padding:30px;transition:border-color .25s,transform .25s}
.svc .card:hover{border-color:#6a5638;transform:translateY(-3px)}
.svc .card p{color:var(--mute);font-size:16px}
.svc .num{font-family:"IBM Plex Mono",monospace;color:var(--g);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;display:block}
.svc ul.ticks{list-style:none;margin:14px 0 0;padding:0}
.svc ul.ticks li{padding:6px 0 6px 26px;position:relative;font-size:15.5px}
.svc ul.ticks li:before{content:"";position:absolute;left:2px;top:13px;width:12px;height:7px;border-left:2px solid var(--g);border-bottom:2px solid var(--g);transform:rotate(-45deg)}
/* critique */
.svc .crit{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.svc .score{background:var(--card);border:1px solid var(--line);padding:28px}
.svc .sl{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid #1d1a14;font-size:15.5px;gap:12px}
.svc .sl:last-child{border:0}
.svc .dev{display:flex;gap:8px;margin:4px 0 12px}
.svc .dev span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);padding:5px 10px;color:var(--mute)}
.svc .bar{width:140px;height:8px;background:#221e17;overflow:hidden;flex:none}
.svc .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--g),var(--g2));width:var(--w);transition:width 1.2s ease}
.svc.js .score:not(.in) .bar i{width:0}
.svc .in .bar i,.svc .score.in .bar i{width:var(--w)}
/* flow */
.svc .flow{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:40px}
.svc .step{background:var(--card);border:1px solid var(--line);padding:18px;position:relative}
.svc .step b{display:block;font-size:16px;margin:6px 0 4px}
.svc .step span{font-size:14px;color:var(--mute)}
.svc .step:not(:last-child):after{content:"";position:absolute;right:-10px;top:50%;width:8px;height:8px;border-top:2px solid var(--g);border-right:2px solid var(--g);transform:translateY(-50%) rotate(45deg)}
/* sms phone */
.svc .phone{max-width:350px;margin:0 auto;background:#000;border:1px solid #3a3124;border-radius:36px;padding:24px 16px;box-shadow:0 30px 80px -30px rgba(185,147,91,.35)}
.svc .phone .top{text-align:center;font-size:13px;color:var(--mute);margin-bottom:14px}
.svc .msg{max-width:84%;padding:10px 14px;border-radius:18px;font-size:14.5px;margin:8px 0;line-height:1.4;transition:opacity .4s,transform .4s}
.svc.js .phone:not(.in) .msg{opacity:0;transform:translateY(8px)}
.svc .phone.in .msg{opacity:1;transform:none}
.svc .msg.us{background:#1f1b15;border:1px solid #3a3124}
.svc .msg.them{background:var(--g);color:#120e08;margin-left:auto}
.svc .msg small{display:block;font-size:11px;opacity:.7;margin-top:3px}
.svc .phone.in .msg:nth-child(3){transition-delay:.5s}.svc .phone.in .msg:nth-child(4){transition-delay:1s}
/* video tiles */
.svc .vt{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.svc .vt .card{border-top:3px solid var(--g)}
/* timeline */
.svc .tl{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.svc .tl .card{border-top:3px solid var(--g)}
/* calculator */
.svc .calc{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.svc .field{margin-bottom:22px}
.svc .field label{display:flex;justify-content:space-between;font-size:15px;margin-bottom:10px;gap:10px}
.svc .field output{color:var(--g);font-weight:600;font-family:"IBM Plex Mono",monospace}
.svc input[type=range]{width:100%;accent-color:#B9935B;height:28px}
.svc select{width:100%;background:#0d0c0a;color:var(--txt);border:1px solid var(--line);padding:12px;font:inherit;font-size:15px}
.svc .res{background:linear-gradient(160deg,#17130d,#0d0c0a);border:1px solid #5a4a33;padding:30px}
.svc .rg{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.svc .r{background:rgba(0,0,0,.4);padding:16px}
.svc .r span{font-size:13px;color:var(--mute);display:block}
.svc .r b{font-size:28px;line-height:1.2}
.svc .r.big{grid-column:1/-1}
.svc .r.big b{font-family:Kanit,sans-serif;font-size:48px;color:var(--g)}
.svc .note{font-size:13.5px;color:#8a8278;margin-top:14px}
/* pricing */
.svc .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;align-items:stretch}
.svc .plan{background:var(--card);border:1px solid var(--line);padding:32px;display:flex;flex-direction:column;position:relative}
.svc .plan.pop{border:1px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(140deg,var(--g2),#3a2f20 45%,var(--g)) border-box;transform:translateY(-8px)}
.svc .tag{position:absolute;top:-13px;left:32px;background:var(--g);color:#0a0a0a;font-size:11.5px;font-weight:800;padding:5px 12px;text-transform:uppercase;letter-spacing:.12em}
.svc .price{font-family:Kanit,sans-serif;font-size:52px;line-height:1;margin:16px 0 4px}
.svc .price small{font-family:Inter,sans-serif;font-size:16px;color:var(--mute);font-weight:400}
.svc .setup{font-size:14px;color:var(--mute);margin-bottom:6px}
.svc .plan ul.ticks{flex:1;margin-bottom:26px}
.svc .plan .btn{width:100%}
.svc .addon{margin-top:20px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.svc .terms{font-size:14px;color:var(--mute);margin-top:18px}
/* guarantees */
.svc .gc{background:var(--card);border:1px solid var(--line);padding:28px}
.svc .gc .big{font-family:Kanit,sans-serif;text-transform:uppercase;font-size:30px;line-height:1.02;margin-bottom:12px}
.svc .gc p{font-size:15.5px;color:var(--mute)}
.svc .gc .cond{font-size:13.5px;color:#8a8278;margin-top:14px;border-top:1px solid #1d1a14;padding-top:12px}
/* final */
.svc .final{text-align:center}
.svc .final .lead{margin:18px auto 32px}
.svc .final .ctas{justify-content:center}
/* homepage band */
.svc.band{padding:0}
.svc.band section{padding:112px 0}
.svc .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.svc .tiles a.card{text-decoration:none;display:block}
.svc .tiles a.card .go{display:inline-block;margin-top:14px;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--g)}
.svc .gstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:28px 0 34px}
.svc .gstrip div{border:1px solid var(--line);padding:18px;background:#0e0d0b}
.svc .gstrip b{display:block;font-family:Kanit,sans-serif;text-transform:uppercase;font-size:22px;line-height:1.05;color:var(--g)}
.svc .gstrip span{font-size:14px;color:var(--mute);display:block;margin-top:6px}
.svc .rv{transition:opacity .7s,transform .7s}
.svc.js .rv:not(.in){opacity:0;transform:translateY(18px)}
.svc .rv.in{opacity:1;transform:none}
@media (max-width:1000px){
  .svc .g3,.svc .plans,.svc .tl,.svc .tiles{grid-template-columns:1fr 1fr}
  .svc .plans{grid-template-columns:1fr}
  .svc .plan.pop{transform:none;padding-top:44px;margin-top:14px}
  .svc .g4,.svc .proofrow,.svc .vt,.svc .gstrip{grid-template-columns:1fr 1fr}
  .svc .flow{grid-template-columns:1fr}
  .svc .step:not(:last-child):after{right:auto;left:50%;top:auto;bottom:-10px;transform:translateX(-50%) rotate(135deg)}
  .svc .crit,.svc .calc,.svc .g2{grid-template-columns:1fr}
}
@media (max-width:600px){
  .svc{font-size:16px}
  .svc section,.svc.band section{padding:68px 0}
  .svc .w{padding:0 18px}
  .svc .hero{padding:124px 0 60px}
  .svc .g3,.svc .tl,.svc .tiles,.svc .g4,.svc .vt{grid-template-columns:1fr;gap:12px}
  .svc .proofrow,.svc .gstrip{grid-template-columns:1fr 1fr;gap:10px}
  .svc .proof b{font-size:26px}
  .svc .gstrip b{font-size:18px}
  .svc .card,.svc .plan,.svc .res,.svc .gc,.svc .score{padding:22px}
  .svc .r b{font-size:22px}.svc .r.big b{font-size:36px}
  .svc .gc .big{font-size:25px}
  .svc .ctas .btn{width:100%}
  .svc .btn{white-space:normal;text-align:center}
  .svc .bar{width:84px}
}
@media (prefers-reduced-motion:reduce){
  .svc *,.svc *:before,.svc *:after{transition:none!important;animation:none!important}
  .svc .rv,.svc .msg{opacity:1;transform:none}
  .svc .bar i{width:var(--w)}
}