/* ==================================================================
   Web Development Agency Page + Checkout Flow
   ================================================================== */

:root{
  --primary-dark:#0C3529;
  --shadow-card:0 1px 2px rgba(18,74,61,0.04), 0 8px 24px -12px rgba(18,74,61,0.12);
  --shadow-lift:0 2px 4px rgba(18,74,61,0.06), 0 20px 40px -18px rgba(18,74,61,0.28);
}

.eyebrow{
  display:block;
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.18em;
  color:var(--primary-light);
  margin-bottom:8px;
}

/* ---------------- Agency header (nav + Book a project) ---------------- */
.agency-nav{display:flex; align-items:center; gap:28px;}
.agency-nav a{
  font-size:14.5px; font-weight:500; color:var(--muted); text-decoration:none;
  transition:color .15s ease;
}
.agency-nav a:hover{color:var(--primary);}
@media (max-width:820px){ .agency-nav{display:none;} }

/* ---------------- Hero ---------------- */
.agency-hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(242,183,5,0.18), transparent 60%),
    linear-gradient(180deg, rgba(244,247,245,0.7), #ffffff 75%);
}
.agency-hero-grid{
  display:grid; gap:44px;
  padding:72px 0 64px 0;
}
@media (min-width:900px){
  .agency-hero-grid{grid-template-columns:1.15fr 0.85fr; align-items:center; padding:96px 0 88px 0;}
}
.hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border); background:#fff; border-radius:999px;
  padding:6px 14px; font-size:13px; font-weight:600; color:var(--primary);
  box-shadow:var(--shadow-card);
}
.hero-badge .dot{width:7px; height:7px; border-radius:50%; background:var(--accent);}
.agency-hero h1{
  font-size:clamp(34px,5.6vw,58px); font-weight:800; line-height:1.05; margin-top:20px;
}
.agency-hero h1 .accent-text{color:var(--primary-light);}
.agency-hero .lead{font-size:17.5px; color:var(--muted); max-width:58ch; margin-top:18px;}
.agency-hero .hero-actions{margin-top:30px;}
.hero-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:36px;}
.hero-tags span{
  border:1px solid var(--border); background:#fff; border-radius:999px;
  padding:6px 14px; font-size:13px; font-weight:500; color:var(--muted);
}

/* Browser mockup graphic */
.browser-mock{
  border:1px solid var(--border); background:#fff; border-radius:16px;
  padding:12px; box-shadow:var(--shadow-lift);
}
@media (max-width:899px){
  .browser-mock{display:block; width:100%; max-width:520px; margin:0 auto;}
}
.browser-mock .bm-bar{display:flex; align-items:center; gap:6px; padding-bottom:12px;}
.browser-mock .bm-dot{width:10px; height:10px; border-radius:50%;}
.browser-mock .bm-dot.red{background:#ff6058;}
.browser-mock .bm-dot.yellow{background:#febc2e;}
.browser-mock .bm-dot.green{background:#28c840;}
.browser-mock .bm-url{
  margin-left:10px; flex:1; border:1px solid var(--border); background:var(--bg-soft);
  border-radius:6px; padding:5px 10px; font-size:12px; color:var(--muted);
}
.browser-mock .bm-body{
  border-radius:12px; padding:22px;
  background:linear-gradient(160deg, var(--bg-soft), #fff);
}
.bm-row{display:flex; justify-content:space-between; margin-bottom:16px;}
.bm-bar-shape{height:10px; border-radius:999px;}
.bm-cta{
  display:inline-flex; margin-top:20px; padding:7px 14px; border-radius:999px;
  background:var(--accent); color:#231a00; font-size:12px; font-weight:700;
}
.bm-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:20px;}
.bm-card{border:1px solid var(--border); border-radius:8px; padding:8px; background:#fff;}
.bm-card-thumb{height:36px; border-radius:6px; background:var(--bg-soft); margin-bottom:8px;}

/* ---------------- Trust strip ---------------- */
.trust-strip{
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:rgba(244,247,245,0.6);
  padding:34px 0;
}
.trust-strip .wrap{
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
}
@media (min-width:800px){ .trust-strip .wrap{grid-template-columns:repeat(4,1fr);} }
.trust-stat{text-align:center;}
@media (min-width:800px){ .trust-stat{text-align:left;} }
.trust-stat .k{font-family:'Poppins',sans-serif; font-weight:800; font-size:22px; color:var(--primary);}
.trust-stat .v{font-size:12.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted);}

/* ---------------- Generic agency section framing ---------------- */
.agency-section{padding:88px 0;}
.agency-section.tight{padding:64px 0;}
.agency-section.soft{background:var(--bg-soft);}
.agency-intro{max-width:680px; margin-bottom:52px;}
.agency-intro h2{font-size:clamp(28px,3.8vw,38px); font-weight:800;}
.agency-intro p{color:var(--muted);}

/* Fade-in on scroll */
.fade-in{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.fade-in.is-visible{opacity:1; transform:translateY(0);}

/* ---------------- Feature grid (Why choose / Included) ---------------- */
.feature-grid{display:grid; gap:20px;}
@media (min-width:640px){ .feature-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:960px){ .feature-grid{grid-template-columns:repeat(3,1fr);} }
.feature-card{
  border:1px solid var(--border); background:#fff; border-radius:12px; padding:24px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.feature-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift);}
.feature-card .fc-icon{
  width:44px; height:44px; border-radius:12px; background:var(--bg-soft);
  display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:12px;
}
.feature-card h3{font-size:17px; margin-bottom:6px;}
.feature-card p{font-size:14.5px; color:var(--muted); margin-bottom:0;}

/* ---------------- Packages ---------------- */
.packages-grid{display:grid; gap:22px;}
@media (min-width:640px){ .packages-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1180px){ .packages-grid{grid-template-columns:repeat(4,1fr);} }
.package-card{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--border); background:#fff; border-radius:16px; padding:28px;
  box-shadow:var(--shadow-card);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.package-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--primary-light);}
.package-card.featured{
  border-color:var(--primary); background:var(--primary); color:#fff;
  box-shadow:var(--shadow-lift);
}
.package-card.featured:hover{border-color:var(--primary);}
.package-badge{
  position:absolute; top:-12px; left:28px;
  background:var(--accent); color:#231a00;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
  border-radius:999px; padding:4px 12px;
}
.package-card h3{font-size:21px; margin-bottom:2px;}
.package-card.featured h3{color:#fff;}
.package-card .pkg-tagline{font-size:14.5px; color:var(--muted); margin-bottom:0;}
.package-card.featured .pkg-tagline{color:rgba(255,255,255,0.8);}
.package-card .pkg-price-row{display:flex; align-items:baseline; gap:8px; margin-top:18px;}
.package-card .pkg-price{font-family:'Poppins',sans-serif; font-weight:800; font-size:29px; color:var(--primary);}
.package-card.featured .pkg-price{color:var(--accent);}
.package-card .pkg-price-note{font-size:13px; color:var(--muted);}
.package-card.featured .pkg-price-note{color:rgba(255,255,255,0.7);}
.pkg-meta{margin-top:14px; font-size:13px; color:var(--muted); display:flex; flex-direction:column; gap:3px;}
.package-card.featured .pkg-meta{color:rgba(255,255,255,0.8);}
.pkg-features{list-style:none; margin:18px 0 0 0; padding:0; flex-grow:1; display:flex; flex-direction:column; gap:9px;}
.pkg-features li{display:flex; gap:9px; font-size:14.5px; align-items:flex-start;}
.pkg-check{
  flex-shrink:0; width:19px; height:19px; border-radius:50%;
  background:rgba(18,74,61,0.1); color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700;
  margin-top:2px;
}
.package-card.featured .pkg-check{background:var(--accent); color:#231a00;}
.package-card .btn{width:100%; justify-content:center; margin-top:26px;}
.package-card.featured .btn-primary{background:var(--accent); color:#231a00;}
.package-card.featured .btn-primary:hover{background:var(--accent-dark); color:#fff;}

/* ---------------- Comparison table ---------------- */
.compare-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:16px; background:#fff; box-shadow:var(--shadow-card);}
table.compare-table{width:100%; min-width:720px; border-collapse:collapse; font-size:14.5px;}
table.compare-table thead tr{background:var(--bg-soft); text-align:left;}
table.compare-table th{
  padding:16px; font-family:'Poppins',sans-serif; font-weight:700; font-size:13.5px; color:var(--primary);
}
table.compare-table th.muted-head{color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; font-size:13px;}
table.compare-table th .mini-badge{
  margin-left:6px; background:var(--accent); color:#231a00; font-size:10px; font-weight:700;
  border-radius:999px; padding:2px 8px;
}
table.compare-table td{padding:16px; border-top:1px solid var(--border); color:var(--muted);}
table.compare-table tr:nth-child(even) td{background:rgba(244,247,245,0.4);}
table.compare-table td.feature-name{font-weight:600; color:var(--text);}
table.compare-table td.highlight{font-weight:700; color:var(--primary);}
.compare-footnote{font-size:13px; color:var(--muted); margin-top:12px;}

/* ---------------- Process (How it works) ---------------- */
.process-grid{display:grid; gap:20px;}
@media (min-width:640px){ .process-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1080px){ .process-grid{grid-template-columns:repeat(4,1fr);} }
.process-card{
  border:1px solid var(--border); background:#fff; border-radius:12px; padding:24px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.process-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift);}
.process-card .step-num{
  font-family:'Poppins',sans-serif; font-weight:800; font-size:13px; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--accent-dark);
}
.process-card h3{font-size:18px; margin-top:8px; margin-bottom:6px;}
.process-card p{font-size:14.5px; color:var(--muted); margin-bottom:0;}

/* ---------------- FAQ (native details/summary, no JS needed) ---------------- */
.faq-list{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
.faq-item{
  border:1px solid var(--border); background:#fff; border-radius:12px; padding:20px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.faq-item[open]{border-color:var(--primary-light); box-shadow:var(--shadow-card);}
.faq-item summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:16px; color:var(--primary);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-icon{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--primary);
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.faq-item[open] .faq-icon{transform:rotate(45deg); background:var(--primary); color:#fff;}
.faq-item p{margin:12px 0 0 0; font-size:15px; color:var(--muted);}

/* ---------------- Final CTA ---------------- */
.final-cta-wrap{padding:88px 0;}
@media (max-width:639px){
  .final-cta-wrap{padding-left:20px; padding-right:20px;}
}
.final-cta{
  position:relative; overflow:hidden; border-radius:24px;
  padding:56px clamp(24px,6vw,64px);
  background:
    radial-gradient(600px 300px at 90% 0%, rgba(242,183,5,0.28), transparent 60%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  display:grid; gap:28px;
}
@media (min-width:860px){ .final-cta{grid-template-columns:1.4fr 1fr; align-items:center;} }
.final-cta h2{color:#fff; font-size:clamp(28px,3.8vw,38px);}
.final-cta p{color:rgba(255,255,255,0.8); max-width:52ch; margin-bottom:0;}
.final-cta .cta-actions{display:flex; flex-wrap:wrap; gap:12px;}
@media (min-width:860px){ .final-cta .cta-actions{justify-content:flex-end;} }
.final-cta .btn-outline-white{
  border:2px solid rgba(255,255,255,0.4); color:#fff; background:transparent;
}
.final-cta .btn-outline-white:hover{background:rgba(255,255,255,0.1); transform:translateY(-1px);}

/* ==================================================================
   Checkout / Payment / Order-success flow
   ================================================================== */
.checkout-shell{background:rgba(244,247,245,0.4); min-height:100vh;}
.checkout-header{border-bottom:1px solid var(--border); background:#fff;}
.checkout-header .header-inner{padding:14px 0;}
.step-tracker{display:none; align-items:center; gap:10px; font-size:13px; font-weight:600;}
@media (min-width:640px){ .step-tracker{display:flex;} }
.step-tracker .tick{
  width:24px; height:24px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--muted);
}
.step-tracker .tick.active{border-color:var(--primary); background:var(--primary); color:#fff;}
.step-tracker .tick.done{border-color:var(--primary); background:rgba(18,74,61,0.1); color:var(--primary);}
.step-tracker .label{color:var(--muted);}
.step-tracker .label.active{color:var(--primary);}
.step-tracker .sep{width:24px; height:1px; background:var(--border);}

.checkout-main{max-width:1100px; margin:0 auto; padding:48px 20px;}
.checkout-grid{display:grid; gap:32px;}
@media (min-width:1024px){ .checkout-grid{grid-template-columns:1.4fr 0.8fr;} }
.checkout-col{display:flex; flex-direction:column; gap:28px;}
.checkout-card{
  border:1px solid var(--border); background:#fff; border-radius:16px; padding:26px;
  box-shadow:var(--shadow-card);
}
.checkout-card h2{font-size:18px; margin-bottom:18px;}

.pkg-picker{display:grid; gap:12px;}
@media (min-width:640px){ .pkg-picker{grid-template-columns:repeat(2,1fr);} }
.pkg-option{
  text-align:left; border:1px solid var(--border); background:#fff; border-radius:12px;
  padding:16px; cursor:pointer; display:flex; flex-direction:column; gap:4px;
  transition:border-color .15s ease, background .15s ease;
  font-family:inherit;
}
.pkg-option:hover{border-color:var(--primary-light);}
.pkg-option.active{border-color:var(--primary); background:rgba(18,74,61,0.04); box-shadow:var(--shadow-card);}
.pkg-option-top{display:flex; align-items:center; justify-content:space-between;}
.pkg-option-name{font-family:'Poppins',sans-serif; font-weight:700; font-size:15px; color:var(--primary);}
.pkg-option-dot{width:16px; height:16px; border-radius:50%; border:1px solid var(--border); background:#fff;}
.pkg-option.active .pkg-option-dot{border-color:var(--primary); background:var(--primary);}
.pkg-option-tagline{font-size:13px; color:var(--muted);}
.pkg-option-price{font-family:'Poppins',sans-serif; font-weight:700; font-size:16px; color:var(--primary-light); margin-top:4px;}

.field{display:block; margin-bottom:0;}
.field .field-label{font-size:13.5px; font-weight:600; color:var(--text); display:block; margin-bottom:6px;}
.field .field-label .req{color:var(--accent-dark); margin-left:2px;}
.field input, .field textarea{
  width:100%; border:1px solid var(--border); border-radius:8px; padding:10px 14px;
  font-family:'Inter',sans-serif; font-size:15px; color:var(--text); outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(18,74,61,0.1);}
.field textarea{min-height:96px; resize:vertical;}
.field-grid{display:grid; gap:16px;}
@media (min-width:640px){ .field-grid{grid-template-columns:repeat(2,1fr);} }
.field-stack > * + *{margin-top:16px;}

.order-sidebar{
  position:sticky; top:24px;
  border:1px solid var(--border); background:#fff; border-radius:16px; padding:24px;
  box-shadow:var(--shadow-card);
}
.order-sidebar .os-label{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--primary-light);}
.order-sidebar .os-name{font-family:'Poppins',sans-serif; font-weight:700; font-size:20px; color:var(--primary); margin-top:8px;}
.order-sidebar .os-tagline{font-size:14px; color:var(--muted); margin-top:2px;}
.os-rows{margin-top:18px; display:flex; flex-direction:column; gap:8px; font-size:14px;}
.os-row{display:flex; justify-content:space-between; gap:12px;}
.os-row dt{color:var(--muted); margin:0;}
.os-row dd{margin:0; font-weight:600; text-align:right; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.os-total{
  display:flex; justify-content:space-between; align-items:baseline;
  border-top:1px solid var(--border); margin-top:18px; padding-top:16px;
}
.os-total .os-total-label{font-size:14px; color:var(--muted);}
.os-total .os-total-price{font-family:'Poppins',sans-serif; font-weight:800; font-size:22px; color:var(--primary);}
.os-submit-note{font-size:12px; color:var(--muted); text-align:center; margin-top:12px;}

.orderid-block{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px;}
.orderid-value{font-family:'Poppins',sans-serif; font-weight:800; font-size:26px; color:var(--primary); margin-top:4px;}
.copy-btn{
  border:1px solid var(--primary); color:var(--primary); background:none;
  border-radius:999px; padding:8px 16px; font-size:13px; font-weight:600; cursor:pointer;
  transition:background .15s ease, color .15s ease; font-family:inherit;
}
.copy-btn:hover{background:var(--primary); color:#fff;}
.copy-btn-sm{
  border:1px solid var(--border); background:none; color:var(--muted);
  border-radius:6px; padding:4px 10px; font-size:11px; font-weight:600; cursor:pointer;
  transition:border-color .15s ease, color .15s ease; font-family:inherit;
}
.copy-btn-sm:hover{border-color:var(--primary); color:var(--primary);}
.orderid-note{
  margin-top:14px; background:rgba(242,183,5,0.15); border-radius:8px; padding:12px 14px;
  font-size:13.5px; color:var(--text);
}
.orderid-note .mono{font-family:monospace; font-weight:700;}

.bank-rows{display:flex; flex-direction:column;}
.bank-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:13px 0; border-bottom:1px solid var(--border); font-size:14.5px;
}
.bank-row:last-child{border-bottom:none;}
.bank-row .bank-label{color:var(--muted);}
.bank-row .bank-value{display:flex; align-items:center; gap:10px; text-align:right;}
.bank-row .bank-value span{font-weight:600; color:var(--text);}
.bank-row.reference .bank-value span{font-family:monospace; font-weight:700; color:var(--primary);}

.next-steps-list{display:flex; flex-direction:column; gap:12px; font-size:14.5px; color:var(--text); margin:0; padding:0; list-style:none;}
.next-steps-list li strong{color:var(--primary);}

/* Success page */
.success-shell{max-width:820px; margin:0 auto; padding:64px 20px;}
.success-card{
  border:1px solid var(--border); background:#fff; border-radius:16px;
  padding:48px 32px; text-align:center; box-shadow:var(--shadow-lift);
}
.success-check{
  width:64px; height:64px; border-radius:50%; background:var(--primary); color:var(--accent);
  display:flex; align-items:center; justify-content:center; margin:0 auto;
  font-family:'Poppins',sans-serif; font-weight:800; font-size:26px;
}
.success-card h1{font-size:clamp(28px,3.8vw,38px); margin-top:22px;}
.success-card > p{max-width:52ch; margin:0 auto 0 auto; color:var(--muted);}
.success-orderid-box{
  max-width:420px; margin:28px auto 0 auto; border:1px solid var(--border); border-radius:12px;
  background:var(--bg-soft); padding:20px;
}
.success-orderid-box .label{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--primary-light);}
.success-orderid-box .value{font-family:'Poppins',sans-serif; font-weight:800; font-size:24px; color:var(--primary); margin-top:4px;}
.success-orderid-box .hint{font-size:13px; color:var(--muted); margin-top:8px; margin-bottom:0;}
.next-step-grid{display:grid; gap:14px; text-align:left; margin-top:32px;}
@media (min-width:640px){ .next-step-grid{grid-template-columns:repeat(3,1fr);} }
.next-step-item{border:1px solid var(--border); border-radius:12px; padding:16px; background:#fff;}
.next-step-item .ns-step{font-family:'Poppins',sans-serif; font-weight:800; font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--accent-dark);}
.next-step-item .ns-title{font-family:'Poppins',sans-serif; font-weight:700; font-size:15px; color:var(--primary); margin-top:4px;}
.next-step-item p{font-size:13.5px; color:var(--muted); margin:4px 0 0 0;}
.success-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:34px;}
.success-footer-note{font-size:13px; color:var(--muted); margin-top:28px; margin-bottom:0;}

/* ==================================================================
   iPhone repair page: phone mockup, big-number steps, pricing table
   ================================================================== */
.phone-mock{
  position:relative; margin:0 auto; max-width:280px;
  aspect-ratio:9/16;
  border:10px solid var(--primary); border-radius:42px;
  background:linear-gradient(180deg, var(--bg-soft), #fff);
  box-shadow:var(--shadow-lift);
}
.phone-mock .notch{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:96px; height:20px; border-radius:999px; background:var(--primary);
}
.phone-mock .screen{
  position:absolute; inset:16px; top:40px; border-radius:26px;
  background:linear-gradient(135deg, var(--primary), var(--primary-light));
  color:#fff; padding:20px;
}
.phone-mock .screen-eyebrow{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--accent); }
.phone-mock .screen-title{ font-family:'Poppins',sans-serif; font-weight:700; font-size:22px; line-height:1.2; margin-top:8px; }
.phone-mock .screen-rows{ margin-top:24px; display:flex; flex-direction:column; gap:8px; }
.phone-mock .screen-row{ display:flex; justify-content:space-between; background:rgba(255,255,255,0.1); border-radius:8px; padding:8px 12px; font-size:13px; }
.phone-mock .screen-row strong{ color:var(--accent); }
.phone-mock .screen-price{
  position:absolute; left:16px; right:16px; bottom:16px;
  background:var(--accent); color:#231a00; text-align:center; font-weight:700; font-size:13px;
  border-radius:12px; padding:10px;
}

.big-steps-grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); }
.big-step-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:24px; }
.big-step-num{ font-family:'Poppins',sans-serif; font-weight:800; font-size:34px; line-height:1; color:var(--accent); }
.big-step-card h4{ font-size:16px; margin-top:10px; margin-bottom:4px; }
.big-step-card p{ font-size:14px; color:var(--muted); margin-bottom:0; }

.price-table-wrap{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:#fff; }
.price-table-head{
  display:grid; grid-template-columns:1.4fr 1fr 1fr;
  background:var(--primary); color:#fff; padding:14px 20px;
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
}
.price-table-head div:nth-child(2){ text-align:center; }
.price-table-head div:nth-child(3){ text-align:right; }
.price-row{
  display:grid; grid-template-columns:1.4fr 1fr 1fr;
  padding:14px 20px; font-size:14.5px; align-items:center;
}
.price-row:nth-child(even){ background:var(--bg-soft); }
.price-row .model{ font-weight:600; color:var(--text); }
.price-row .screen-price-col{ text-align:center; color:var(--primary); }
.price-row .battery-price-col{ text-align:right; color:var(--primary); }

/* ==================================================================
   CV application page: document mockup, numbered step circles
   ================================================================== */
.cv-mock-wrap{ position:relative; max-width:380px; margin:0 auto; }
.cv-mock-sticky{
  position:absolute; top:-12px; right:-12px; transform:rotate(3deg);
  background:var(--bg-soft); border:1px solid var(--border); border-radius:8px;
  padding:10px 12px; box-shadow:var(--shadow-card); z-index:1;
}
.cv-mock-sticky .bar{ height:8px; border-radius:4px; background:var(--border); margin-bottom:6px; }
.cv-mock-sticky .bar.title{ width:100px; height:12px; }
.cv-mock-sticky .bar.line{ width:110px; }
.cv-mock{
  position:relative; z-index:2; background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow-lift);
}
.cv-mock-head{ display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid var(--border); padding-bottom:12px; }
.cv-mock-name{ font-family:'Poppins',sans-serif; font-weight:700; font-size:15px; color:var(--primary); }
.cv-mock-role{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.cv-mock-score{ background:rgba(242,183,5,0.25); color:var(--primary); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; border-radius:999px; padding:3px 10px; white-space:nowrap; }
.cv-mock-section{ margin-top:16px; }
.cv-mock-section-title{ font-family:'Poppins',sans-serif; font-weight:700; font-size:12px; color:var(--primary); }
.cv-mock-section .bar{ height:6px; border-radius:4px; background:var(--border); margin-top:6px; }

.numbered-step-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.numbered-step-circle{
  width:36px; height:36px; border-radius:50%; background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif; font-weight:700; font-size:14px; flex-shrink:0;
}

.doc-icon-grid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); }
.doc-icon-item{ display:flex; align-items:center; gap:12px; border:1px solid var(--border); background:var(--bg-soft); border-radius:12px; padding:12px 16px; font-size:14px; }
.doc-icon-item .icon{ font-size:18px; flex-shrink:0; }
.doc-icon-item{ transition: border-color .18s ease, box-shadow .18s ease; }
.doc-icon-item .icon{ font-size:18px; flex-shrink:0; width:34px; height:34px; border-radius:9px; background:#fff; border:1px solid var(--border); color:var(--primary); display:flex; align-items:center; justify-content:center; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.doc-icon-item .icon svg{ width:18px; height:18px; display:block; }
.doc-icon-item:hover{ border-color:var(--primary-light); box-shadow:0 10px 22px -18px rgba(18,74,61,.55); }
.doc-icon-item:hover .icon{ background:var(--primary); border-color:var(--primary); color:var(--accent); }
@media (prefers-reduced-motion: reduce){ .doc-icon-item, .doc-icon-item .icon{ transition:none; } }


/* ==================================================================
   Simple stat row (numbers in green, not pill bubbles)
   ================================================================== */
.stat-row{
  display:flex; flex-wrap:wrap; gap:24px;
  margin-top:28px;
}
.stat-item{ font-size:13.5px; color:var(--muted); }
.stat-item strong{ font-weight:800; color:var(--primary-light); margin-right:4px; }

/* ==================================================================
   The hamburger menu)
   ================================================================== */
.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  width:40px; height:40px; align-items:center; justify-content:center;
  color:var(--primary);
}
@media (max-width:820px){
  .nav-toggle{ display:flex; }
  .agency-nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--border);
    flex-direction:column; gap:0; padding:8px 20px 16px;
    box-shadow:0 12px 24px rgba(0,0,0,0.08);
  }
  .agency-nav.open{ display:flex; }
  .agency-nav a{ padding:12px 0; border-bottom:1px solid var(--border); }
  .agency-nav a:last-child{ border-bottom:none; }
}



/* Mobile spacing for selected service-page heroes. */
@media (max-width:639px){
  /* Keep the hero aligned with the same 20px mobile gutter as the rest of the site. */
  .agency-hero.mobile-hero-fix .agency-hero-grid{
    padding-left:20px;
    padding-right:20px;
  }

  /* Keep the final CTA inside the same mobile content width. */
  .final-cta-wrap{
    padding-left:20px;
    padding-right:20px;
  }
}

.feature-card .fc-icon{
  width:44px; height:44px; border-radius:12px; background:var(--bg-soft);
  display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:12px;
  color:var(--primary); border:1px solid var(--border);
  transition:color .18s ease, background-color .18s ease, border-color .18s ease;
}
.feature-card .fc-icon svg{width:22px; height:22px; display:block;}
.feature-card:hover .fc-icon{color:var(--accent, var(--primary)); border-color:currentColor; background:#fff;}