/* ============================================================================
   X3WEB — PAGE COMPONENTS
   Layouts that belong to one page or one family of pages. Anything reused
   across the site lives in components.css instead.
   ========================================================================== */

/* ── Skip link ─────────────────────────────────────────────────────────── */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:3000;
  padding:12px 20px;
  border-radius:0 0 var(--radius-md) 0;
  background:var(--accent);
  color:var(--on-dark);
  font-weight:var(--w-semi);
}
.skip-link:focus{left:0;color:var(--on-dark)}

/* ── Generic grids used by several pages ───────────────────────────────── */
.services-grid,
.benefits-grid,
.why-grid,
.growth-cards-grid,
.feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--gap-md);
}
.growth-cards-grid{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}

/* The six "What We Stand For" values are pinned to three across so they read
   as two even rows. Left on auto-fit they spread five wide on a large screen
   and stranded the sixth on a row of its own. */
.why-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

.service-card,.benefit-card,.why-item{border-radius:var(--radius-xl)}
.service-card h3,.benefit-card h4,.why-item h4{color:var(--ink)}

/* A card whose icon and copy sit side by side. */
.card-row{
  display:flex;
  align-items:flex-start;
  gap:var(--space-4);
}
.card-row .icon-tile{margin-bottom:0}
.card-row-title{
  font-size:var(--fs-sm);
  font-weight:var(--w-semi);
  letter-spacing:var(--ls-tight);
  color:var(--ink);
  margin-bottom:5px;
}
.card-row-text{font-size:var(--fs-xs);color:var(--muted);line-height:1.6}

/* ── Process steps ─────────────────────────────────────────────────────── */
.process-steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--gap-md);
  counter-reset:x3-step;
}
.process-step,.step-item{
  border-radius:var(--radius-xl);
  text-align:left;
}
.step-number{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  margin-bottom:18px;
  border-radius:50%;
  background:var(--accent);
  color:var(--on-dark);
  font-size:var(--fs-h4);
  font-weight:var(--w-semi);
  letter-spacing:0;
}
.process-title{margin-bottom:10px}

/* ── Text blocks ───────────────────────────────────────────────────────── */
.text-block{max-width:var(--container-narrow)}
.text-block p + p{margin-top:16px}
.section-title{margin-bottom:15px}

/* ── About: teaser ─────────────────────────────────────────────────────── */
.about-teaser-grid{
  display:grid;
  grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,56px);
  align-items:center;
}
.about-teaser-img,
.about-teaser-media{
  border-radius:var(--radius-2xl);
  overflow:hidden;
  box-shadow:var(--shadow-md);
}
.about-teaser-img img,
.about-teaser-media video,
.about-teaser-media img{width:100%;height:100%;object-fit:cover;display:block}
.about-teaser-text h2{margin-bottom:16px}

/* ── About: team ───────────────────────────────────────────────────────── */
.team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--gap-md);
}
.team-grid--row1,.team-grid--row2{margin-bottom:var(--gap-md)}
.team-card{
  border-radius:var(--radius-xl);
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.team-card__img-wrap{
  aspect-ratio:4 / 5;
  overflow:hidden;
  background:var(--frame-deep);
}
.team-card__img-wrap img,
.team-card__img-wrap video{width:100%;height:100%;object-fit:cover}
.team-card__body{padding:22px 24px 26px}
.team-card__name{
  font-size:var(--fs-h4);
  font-weight:var(--w-semi);
  letter-spacing:var(--ls-tight);
  color:var(--ink);
  margin-bottom:3px;
}
.team-card__role{
  font-size:var(--fs-xs);
  font-weight:var(--w-medium);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent-strong);
  margin-bottom:12px;
}
.team-card__bio{font-size:var(--fs-xs);color:var(--muted);line-height:1.65}
.team-additionally{
  margin-top:var(--gap-lg);
  text-align:center;
  font-size:var(--fs-sm);
  color:var(--muted);
}

/* ── Portfolio ─────────────────────────────────────────────────────────── *
   Every portfolio grid on the site carries the same 28 screenshots, so it is
   pinned to four across — seven even rows — rather than auto-fit, which gave
   a different column count on each page depending on its container width. */
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--gap-md);
}
.portfolio-card{
  border-radius:var(--radius-xl);
  padding:0;
  overflow:hidden;
}
/* The portfolio screenshots are square (1080x1080). The frame matches that
   ratio so the whole screenshot is visible — a wider frame would crop roughly
   a third of every image away. */
.portfolio-card img{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  object-position:center;
}
.portfolio-card-content{padding:20px 22px 24px}
.portfolio-card-content h4{margin-bottom:5px}
.portfolio-card-content p{font-size:var(--fs-xs)}

/* Work page — three across instead of four, so each project reads larger.
   Everything else (card, hover veil, aspect ratio) is the shared component.
   Responsive steps live in the RESPONSIVE ladder at the foot of this file. */
.work-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.work-intro p{
  max-width:720px;
  margin-inline:auto;
  text-align:center;
  font-size:var(--fs-sm);
  color:var(--muted);
}

/* ── Packages ──────────────────────────────────────────────────────────── */
.packages-grid,
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:var(--gap-md);
  align-items:stretch;
}
.pkg-card,.package-card{
  display:flex;
  flex-direction:column;
  border-radius:var(--radius-2xl);
  padding:clamp(26px,2.4vw,34px);
}
.pkg-card--popular{
  border-color:var(--accent-line);
  box-shadow:
    inset 1px 1px 0 var(--glass-hi),
    0 0 0 2px var(--accent-line),
    var(--glass-drop-lg);
}
.pkg-popular-pill,.pkg-limited-label{
  position:absolute;
  top:-13px;left:50%;
  transform:translateX(-50%);
  padding:6px 16px;
  border-radius:var(--radius-pill);
  background:var(--accent);
  color:var(--on-dark);
  font-size:var(--fs-2xs);
  font-weight:var(--w-semi);
  letter-spacing:0.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.pkg-card-top,.pkg-card-header{margin-bottom:18px}
.pkg-name{
  font-size:var(--fs-h3);
  font-weight:var(--w-semi);
  letter-spacing:var(--ls-h3);
  color:var(--ink);
  margin-bottom:4px;
}
.pkg-subtitle,.pkg-desc{font-size:var(--fs-xs);color:var(--muted);line-height:1.6}
.pkg-price-block{margin:20px 0 6px}
.pkg-price{
  font-size:clamp(34px,3.6vw,48px);
  font-weight:var(--w-thin);
  letter-spacing:0;
  line-height:1;
  color:var(--ink);
}
.pkg-price-type,.pkg-price-note{
  font-size:var(--fs-xs);
  color:var(--muted-3);
  margin-top:6px;
}
.pkg-features-list{
  display:flex;flex-direction:column;gap:var(--space-2);
  margin:20px 0;
  flex:1;
}
.pkg-features-list li,
.pkg-more-list li{
  position:relative;
  padding-left:26px;
  font-size:var(--fs-xs);
  color:var(--muted);
  line-height:1.6;
}
.pkg-features-list li::before,
.pkg-more-list li::before{
  content:"";
  position:absolute;
  left:0;top:6px;
  width:12px;height:7px;
  border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.pkg-more{margin-top:4px}
.pkg-more-list{display:flex;flex-direction:column;gap:var(--space-2);margin-top:12px}
.pkg-more-toggle,.pkg-more-btn,.pkg-see-details-btn{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:var(--fs-xs);
  font-weight:var(--w-semi);
  color:var(--accent-strong);
}
.pkg-more-toggle::after,.pkg-more-btn::after{
  content:"";
  width:8px;height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--dur-mid) var(--ease-out);
}
.pkg-more-toggle.open::after,.pkg-more-btn.open::after{transform:rotate(225deg) translateY(-2px)}

.pkg-payment-options{
  margin-top:18px;padding-top:16px;
  border-top:1px solid var(--hairline);
}
.pkg-payment-heading{
  font-size:var(--fs-2xs);font-weight:var(--w-semi);
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--muted-3);margin-bottom:10px;
}
.pkg-payment-line{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);font-size:var(--fs-xs);color:var(--muted)}
.pkg-payment-amount,.pkg-payment-total{font-weight:var(--w-semi);color:var(--ink)}
.pkg-payment-then{color:var(--muted-3)}
.pkg-payment-divider,.pkg-summary-divider{height:1px;background:var(--hairline);margin:12px 0}
.pkg-summary-strip{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:16px}
.pkg-summary-item{font-size:var(--fs-xs);color:var(--muted)}
.pkg-guarantee{
  display:flex;align-items:center;gap:var(--space-2);
  margin-top:16px;
  font-size:var(--fs-xs);
  color:var(--muted-3);
}
.pkg-guarantee i{color:var(--accent)}
.pkg-card .btn{margin-top:18px;width:100%;justify-content:center}

/* ── Package detail page ───────────────────────────────────────────────── */
.package-detail-page{background:var(--frame)}
.package-detail-back-link{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:var(--fs-sm);
  font-weight:var(--w-medium);
  color:var(--accent-strong);
  margin-bottom:22px;
}
.package-detail-hero-price{
  display:inline-flex;align-items:baseline;gap:var(--space-2);
  margin-top:8px;
  font-size:var(--fs-stat-sm);
  font-weight:var(--w-thin);
  color:var(--on-dark);
}
.package-detail-tagline{
  display:inline-block;
  margin-bottom:16px;
  padding:6px 15px;
  border-radius:var(--radius-pill);
  background:var(--accent-tint-strong);
  border:1px solid var(--accent-line);
  font-size:var(--fs-xs);
  font-weight:var(--w-semi);
  color:var(--accent);
}
.package-detail-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);
  align-items:start;
}
.package-detail-intro h2,.package-detail-overview h2{margin-bottom:16px}
.package-detail-copy p + p{margin-top:14px}
.package-detail-summary,
.package-detail-media-card,
.package-detail-inclusion-card,
.package-detail-inclusion-card-static,
.package-detail-value-card,
.package-detail-note{
  background:linear-gradient(135deg,var(--glass-a),var(--glass-b));
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:
    inset 1px 1px 0 var(--glass-hi),
    inset -1px -1px 0 var(--glass-lo),
    var(--glass-ring),
    var(--glass-drop);
  border-radius:var(--radius-xl);
  padding:clamp(22px,2.2vw,30px);
}
.package-detail-media{border-radius:var(--radius-2xl);overflow:hidden;box-shadow:var(--shadow-md)}
.package-detail-media video,.package-detail-media img{width:100%;display:block}
.package-detail-inclusion-groups{display:flex;flex-direction:column;gap:var(--space-4)}
.package-detail-inclusion-heading,.package-detail-value-heading{
  font-size:var(--fs-h4);
  font-weight:var(--w-semi);
  color:var(--ink);
  margin-bottom:10px;
}
.package-detail-inclusion-summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  cursor:pointer;
  font-weight:var(--w-medium);
  color:var(--ink);
}
.package-detail-inclusion-chevron{
  width:11px;height:11px;flex:none;
  border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(45deg);
  transition:transform var(--dur-mid) var(--ease-out);
}
details[open] .package-detail-inclusion-chevron{transform:rotate(225deg)}
.package-detail-inclusion-list,
.package-detail-note-list,
.package-detail-check-columns{display:flex;flex-direction:column;gap:var(--space-2);margin-top:14px}
.package-detail-check-columns{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:var(--space-3) var(--space-6);
}
.package-detail-inclusion-list li,
.package-detail-note-list li,
.package-detail-check-columns li{
  position:relative;
  padding-left:25px;
  font-size:var(--fs-xs);
  color:var(--muted);
  line-height:1.6;
}
.package-detail-inclusion-list li::before,
.package-detail-note-list li::before,
.package-detail-check-columns li::before{
  content:"";
  position:absolute;left:0;top:6px;
  width:12px;height:7px;
  border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.package-detail-feature-grid,
.package-detail-value-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:var(--gap-md);
}
.package-detail-feature-band{padding:var(--section-pad-tight) 0;background:var(--white)}
.package-detail-pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--gap-md);
}
.package-detail-pricing-summary-title{
  font-size:var(--fs-h4);
  font-weight:var(--w-semi);
  margin-bottom:12px;
}
.package-detail-pricing-summary-list{display:flex;flex-direction:column;gap:var(--space-2)}
.package-detail-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:24px}
.package-detail-final-bg{
  padding:var(--section-pad) 0;
  background:linear-gradient(168deg,var(--brand) 0%,var(--brand-deep) 100%);
  color:var(--on-dark);
  text-align:center;
}
.package-detail-final-cta h2{color:var(--on-dark);margin-bottom:14px}
.package-detail-final-cta p{color:var(--on-dark-soft);max-width:640px;margin:0 auto 28px}
.package-detail-faqs{max-width:900px;margin-inline:auto}

/* ── Contact ───────────────────────────────────────────────────────────── */
.contact-info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--gap-md);
}
.contact-info-card{border-radius:var(--radius-xl);text-align:center}
.contact-info-card i{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;
  margin-bottom:16px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent-strong);
  font-size:var(--fs-body);
}
.contact-detail-label{
  font-size:var(--fs-2xs);
  font-weight:var(--w-semi);
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted-3);
  margin-bottom:5px;
}
.contact-detail-value{font-size:var(--fs-sm);color:var(--ink);font-weight:var(--w-medium)}
/* Contact details read as information rather than as links, so the address,
   phone number and email addresses keep the surrounding text colour. The
   hover cue is an underline, not the accent. */
.contact-detail-value a,
.contact-info-card a{
  color:inherit;
  text-decoration:none;
}
.contact-detail-value a:hover,
.contact-detail-value a:focus-visible,
.contact-info-card a:hover,
.contact-info-card a:focus-visible{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ── Quick form / booking ──────────────────────────────────────────────── */
.qf-layout,
.booking-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(28px,4vw,56px);
  align-items:start;
}
.qf-form-card,
.booking-form-card,
.hero-form-card{border-radius:var(--radius-2xl)}
.qf-info h2,.booking-info h2{margin-bottom:16px}
.qf-details,
.booking-info-list{display:flex;flex-direction:column;gap:var(--space-4);margin-top:24px}
.booking-info-item,
.qf-details > div{
  display:flex;align-items:flex-start;gap:var(--space-3);
  font-size:var(--fs-sm);
  color:var(--muted);
}
.booking-info-item i,
.qf-details i{color:var(--accent-strong);margin-top:4px;width:17px;flex:none}
.booking-section{padding:var(--section-pad) 0;background:var(--frame)}

/* ── Reviews section ───────────────────────────────────────────────────── */
.reviews-section{padding:var(--section-pad) 0;background:var(--frame)}
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--gap-md);
}
.reviews-placeholder{
  text-align:center;
  padding:48px 24px;
  color:var(--muted-3);
}

/* ── Blog and case studies ─────────────────────────────────────────────── */
.blog-grid,
.case-study-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--gap-md);
}
.blog-card,
.case-study-card{
  border-radius:var(--radius-xl);
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.blog-card img,
.case-study-card img{width:100%;aspect-ratio:16 / 9;object-fit:cover}
.blog-card-body,
.case-study-card-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:var(--space-3);flex:1}
.blog-card-meta{
  font-size:var(--fs-2xs);
  font-weight:var(--w-semi);
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--accent-strong);
}
.blog-card :is(h2,h3){font-size:var(--fs-h4)}
.blog-card p{font-size:var(--fs-xs)}

/* Long-form article body, used by blog posts and every legal page. */
.prose{max-width:var(--container-narrow);margin-inline:auto}
.prose h2{margin:40px 0 14px;font-size:clamp(23px,2.4vw,30px)}
.prose h3{margin:30px 0 10px}
.prose h4{margin:24px 0 8px}
.prose p{margin-bottom:15px}
.prose ul,.prose ol{margin:0 0 18px 0;display:flex;flex-direction:column;gap:var(--space-2)}
.prose ul li{position:relative;padding-left:22px;color:var(--muted)}
.prose ul li::before{
  content:"";
  position:absolute;left:2px;top:10px;
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
}
.prose ol{counter-reset:x3-ol;list-style:none}
.prose ol li{position:relative;padding-left:30px;color:var(--muted);counter-increment:x3-ol}
.prose ol li::before{
  content:counter(x3-ol) ".";
  position:absolute;left:0;top:0;
  font-weight:var(--w-semi);
  color:var(--accent-strong);
}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose table{width:100%;border-collapse:collapse;margin:20px 0;font-size:var(--fs-sm)}
.prose th,.prose td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--hairline)}
.prose th{font-weight:var(--w-semi);color:var(--ink)}
.prose td{color:var(--muted)}
.prose blockquote{
  margin:22px 0;
  padding:18px 24px;
  border-left:3px solid var(--accent);
  background:var(--frame);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  color:var(--muted-2);
}

/* Legal pages: prose on a frosted plate. */
.legal-body{padding:var(--section-pad) 0;background:var(--frame)}
.legal-card{
  max-width:var(--container-medium);
  margin-inline:auto;
  padding:clamp(28px,4vw,60px);
  border-radius:var(--radius-2xl);
  background:linear-gradient(135deg,var(--glass-a),var(--glass-b));
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:
    inset 1px 1px 0 var(--glass-hi),
    inset -1px -1px 0 var(--glass-lo),
    var(--glass-ring),
    var(--glass-drop);
}
.legal-card .prose{max-width:none}
.legal-card .prose > h2:first-child{margin-top:0}

/* Legal: US-review notice — flags that this policy was written under South
   African law and is pending US-specific legal review, rather than silently
   presenting SA-law text as if it were already US-compliant. */
.legal-review-notice{
  display:flex;
  gap:var(--space-3);
  align-items:flex-start;
  margin-bottom:28px;
  padding:var(--space-4) var(--space-5);
  border-radius:var(--radius-lg);
  background:var(--notice-soft);
  border:1px solid var(--notice-line);
  color:var(--ink);
  font-size:var(--fs-sm);
  line-height:1.6;
}
.legal-review-notice i{color:var(--notice);margin-top:3px;flex:none}
.legal-review-notice strong{color:var(--ink)}

/* ── Thank you / not a fit / error ─────────────────────────────────────── */
.thankyou-section,
.error-section{
  min-height:70vh;
  display:flex;align-items:center;
  padding:var(--section-pad) 0;
  background:var(--frame);
  text-align:center;
}
.thankyou-icon{
  width:84px;height:84px;
  margin:0 auto 28px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent-strong);
  font-size:var(--fs-stat-sm);
}
.error-code{
  font-size:clamp(70px,12vw,150px);
  font-weight:var(--w-thin);
  line-height:1;
  color:var(--accent);
  letter-spacing:0;
}
.error-section h1{margin-bottom:var(--space-4)}
.error-lead{
  max-width:var(--container-narrow);
  margin:0 auto var(--space-7);
  font-size:var(--fs-lead);
}
.error-section .cta-buttons{justify-content:center}

/* ── Home: AI / visibility block ───────────────────────────────────────── */
.home-ai-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);
  align-items:center;
}
.home-ai-copy h2{margin-bottom:16px}
.home-ai-feature{
  display:flex;align-items:flex-start;gap:var(--space-3);
  margin-top:14px;
  font-size:var(--fs-sm);
  color:var(--muted);
}
.home-ai-feature i{color:var(--accent-strong);margin-top:4px;flex:none}
.home-ai-prices{display:flex;flex-wrap:wrap;gap:var(--gap-sm);margin-top:24px}
.home-ai-placeholder{
  border-radius:var(--radius-2xl);
  overflow:hidden;
  box-shadow:var(--shadow-md);
}
.home-ai-placeholder img,.home-ai-placeholder video{width:100%;display:block}

/* ── Home ──────────────────────────────────────────────────────────────── *
   Layouts that belong to home.php only. Everything here replaces the two
   inline <style> blocks that used to live in that template.                 */

/* Shared: a centred button under a section's grid. */
.home-section-cta{text-align:center;margin-top:var(--gap-md)}

/* ── What We Do — large editorial rows, not a wall of icon cards ─────────── *
   Each discipline gets a full-width row: a big index numeral, a short title,
   one sentence, and a link. Stacked, not gridded — the brief's "large
   editorial sections" instruction reads as rows earning their height, not
   cards competing for width. */
.editorial-services{
  display:flex;
  flex-direction:column;
}
.editorial-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--gap-lg);
  padding:var(--space-8) 0;
  border-top:1px solid var(--hairline);
}
.editorial-services .editorial-row:last-child{border-bottom:1px solid var(--hairline)}
.editorial-index{
  font-size:clamp(20px,2.4vw,28px);
  font-weight:var(--w-thin);
  color:var(--muted-3);
  font-variant-numeric:tabular-nums;
}
.editorial-row-title{
  font-size:clamp(28px,3.6vw,48px);
  font-weight:var(--w-display);
  letter-spacing:var(--ls-h2);
  color:var(--ink);
  margin-bottom:8px;
}
.editorial-row-text{
  font-size:var(--fs-lead);
  color:var(--muted);
  max-width:640px;
}
/* Layout-only: colour, weight and the arrow-hover motion now live in the
   sitewide .btn-text component (components.css) — this just keeps the row's
   own link from wrapping at desktop widths. */
.editorial-row-link{white-space:nowrap}

/* ── South Africa → America — the signature section ──────────────────── *
   Full-bleed on the navy section, minimal chrome (no glass card): the line
   drawing itself is the visual, not a frame around it. */
.sa-usa-section{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(32px,5vw,72px);
  align-items:center;
}
.sa-usa-copy h2{
  font-size:clamp(32px,4.4vw,58px);
  margin-bottom:var(--space-5);
}
.sa-usa-copy p{max-width:520px}
.sa-usa-copy p + p{margin-top:14px}
.sa-usa-stat-row{
  display:flex;
  gap:var(--gap-xl);
  margin-top:var(--space-8);
}
.sa-usa-stat strong{
  display:block;
  font-size:var(--fs-stat-sm);
  font-weight:var(--w-thin);
  color:var(--on-dark);
}
.sa-usa-stat span{
  font-size:var(--fs-xs);
  color:var(--on-dark-mute);
  text-transform:uppercase;
  letter-spacing:0.08em;
}
.sa-usa-map{width:100%;height:auto;overflow:visible}
.sa-usa-map text{
  font-family:var(--font);
  font-size:15px;
  font-weight:var(--w-semi);
  letter-spacing:0.08em;
  fill:var(--on-dark);
  text-transform:uppercase;
}
.connector-node circle{fill:var(--accent)}

/* ── Featured Work — large tiles, not a dense grid ────────────────────────  *
   Reuses the .home-portfolio-* hover veil below, just fewer per row so each
   project reads as a statement rather than a thumbnail. */
.featured-work-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--gap-lg);
}
.featured-work-grid .home-portfolio-card{
  border-radius:var(--radius-xl);
  overflow:hidden;
  position:relative;
}
.featured-work-grid .home-portfolio-card img{
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  object-position:top center;
}

/* ── Final CTA — the one cinematic close, bigger than the shared .cta-section
   headline used elsewhere on the site. */
.cta-section--cinematic h2{
  font-size:clamp(34px,5vw,68px);
  max-width:900px;
  margin-inline:auto;
}

/* About teaser — the plate is cropped so the copy column sets the height. */
.home-about-media{max-height:340px}
.home-about-text p + p{margin-top:14px}
.home-about-text .cta-buttons{margin-top:var(--gap-md)}

/* Portfolio — screenshots with a hover veil carrying the "Visit Website" cue. */
.home-portfolio-card{display:block;text-decoration:none}
.home-portfolio-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity var(--dur-mid) var(--ease-out);
}
/* The veil is the brand gradient held at partial opacity on its own layer, so
   the label above it stays fully opaque and no literal rgba() is needed. */
.home-portfolio-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(168deg,var(--brand) 0%,var(--brand-deep) 100%);
  opacity:0.78;
}
.home-portfolio-card:hover .home-portfolio-overlay,
.home-portfolio-card:focus-visible .home-portfolio-overlay{opacity:1}
.home-portfolio-badge{
  position:relative;
  padding:8px 16px;
  border:2px solid var(--on-dark);
  border-radius:var(--radius-xs);
  color:var(--on-dark);
  font-size:var(--fs-xs);
  font-weight:var(--w-semi);
  letter-spacing:0.08em;
  text-transform:uppercase;
}

/* ============================================================================
   PAGE BLOCK — about.php + contact.php
   Appended by the about/contact conversion. Layout only, every value a token.
   Each selector is scoped to a page-specific variant class that has no rule of
   its own further up this file — nothing here is an override for its own sake.
   ========================================================================== */

/* ── About: our-story copy ─────────────────────────────────────────────── */
.about-teaser-text p + p{margin-top:16px}

/* ── About: portfolio tiles ────────────────────────────────────────────── *
   The hover veil is the brand gradient carried at partial opacity rather than
   a literal rgba(), so it tracks the brand tokens.                          */
.portfolio-link{display:block;color:inherit}
.portfolio-visit{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(168deg,var(--brand) 0%,var(--brand-deep) 100%);
  opacity:0;
  transition:opacity var(--dur-mid) var(--ease-out);
}
.portfolio-link:hover .portfolio-visit,
.portfolio-link:focus-visible .portfolio-visit{opacity:0.88}
.portfolio-visit-label{
  padding:8px 16px;
  border:2px solid var(--on-dark);
  border-radius:var(--radius-xs);
  color:var(--on-dark);
  font-size:var(--fs-xs);
  font-weight:var(--w-nav);
  letter-spacing:0.08em;
  text-transform:uppercase;
}

/* ── Contact: detail strip ─────────────────────────────────────────────── *
   The same frosted plate as .proof-bar, but these tiles carry contact details
   rather than statistics, so the figure type steps down to body size.       */
.contact-strip .proof-item i{
  display:block;
  margin-bottom:6px;
  font-size:var(--fs-h4);
  color:var(--accent-strong);
}
.contact-strip .proof-item strong{
  font-size:var(--fs-sm);
  font-weight:var(--w-semi);
  line-height:1.45;
}
.contact-strip .proof-item a{color:var(--ink)}
.contact-strip .proof-item a:hover{color:var(--accent-strong)}

/* ── Contact: proposal note ────────────────────────────────────────────── */

/* ── Contact: four-card department layout ──────────────────────────────── */
.contact-department-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:1fr;
  align-items:stretch;
}
.contact-department-grid .contact-info-card{
  display:flex;
  flex-direction:column;
  height:100%;
}
.contact-department-grid .contact-info-card > i{align-self:center}
.contact-department-grid .contact-info-card h4{margin-bottom:8px}
.contact-department-grid .contact-info-card p{min-height:48px}
.contact-department-grid .contact-info-card a{
  display:block;
  margin-top:6px;
  font-size:var(--fs-sm);
}
.contact-department-grid .contact-info-card .text-body-xs{display:block;margin-top:10px}

/* ── Service pages: Meta Ads, Google Ads, Hosting ───────────────────────── *
   Added for packages/meta-ads.php, packages/google-ads.php and
   packages/hosting.php. Replaces the inline chrome those pages used to fake:
   icon-led feature lists, the hosting plan's storage/price plate, and a
   vertically centred card-row for the single-line benefit band.             */
.svc-icon-list{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  margin:16px 0 20px;
}
.svc-icon-list li{
  display:flex;
  align-items:flex-start;
  gap:var(--space-3);
  font-size:var(--fs-sm);
  color:var(--muted);
  line-height:1.6;
}
.svc-icon-list li i{
  flex:none;
  width:16px;
  margin-top:5px;
  text-align:center;
  color:var(--accent);
}
.svc-icon-list li strong{color:var(--ink);font-weight:var(--w-semi)}

/* Inside a plan card the list is the flexible middle, so the button sits on
   the floor of every card in the row. */
.pkg-card .svc-icon-list{flex:1;margin:18px 0 0}

/* The plan's storage / price plate. Was an inline background + radius. */
.pkg-plan-meta{
  margin-top:16px;
  padding:16px;
  border-radius:var(--radius-md);
  background:var(--off-white);
  border:1px solid var(--hairline);
}
.pkg-plan-storage{font-size:var(--fs-sm);color:var(--muted)}
.pkg-price-suffix{
  font-size:var(--fs-body);
  font-weight:var(--w-semi);
  letter-spacing:var(--ls-tight);
}

/* Benefit band: one line of copy beside its tile, so centre the pair. */
.card-row.card-row--middle{align-items:center}
.card-row.card-row--middle .card-row-title{margin-bottom:0}

/* ============================================================================
   PAGE BLOCKS — blog, case studies and the utility pages
   Appended for blog/index.php, blog/post.php, case-studies/index.php,
   case-studies/view.php, thank-you.php, not-a-fit.php and request-proposal.php.
   Tokens only. Nothing here reaches outside those pages' own blocks.
   ========================================================================== */

/* ── Empty state, shown before any post or case study is published ─────── */
.empty-state{
  max-width:var(--container-narrow);
  margin-inline:auto;
  padding:clamp(48px,5vw,72px) clamp(24px,3vw,40px);
  text-align:center;
}
.empty-state-icon{
  font-size:var(--fs-stat-sm);
  line-height:1;
  color:var(--accent-strong);
  margin-bottom:20px;
}
.empty-state h2{font-size:var(--fs-h3);margin-bottom:12px}
.empty-state p{max-width:480px;margin:0 auto 28px}

/* ── Blog and case-study card internals ────────────────────────────────── */
.blog-card-media{display:block}
.blog-card-media--blank{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:16 / 9;
  background:var(--off-white);
  color:var(--accent-strong);
  font-size:var(--fs-stat-sm);
}
.blog-card-meta{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.blog-card-tag{
  padding:4px 11px;
  border-radius:var(--radius-pill);
  background:var(--accent-soft);
  color:var(--accent-strong);
}
.blog-card-tag--muted{background:var(--brand-soft);color:var(--muted-2)}
.blog-card-date{color:var(--muted-3);letter-spacing:0.08em}
.case-study-card h3{font-size:var(--fs-h4)}
.case-study-card p{font-size:var(--fs-xs)}
.blog-card :is(h2,h3) a,
.case-study-card h3 a{color:var(--ink)}
.blog-card :is(h2,h3) a:hover,
.case-study-card h3 a:hover{color:var(--accent-strong)}

/* The arrow link that closes a card or a page block. */
.card-link{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:var(--fs-sm);
  font-weight:var(--w-semi);
  letter-spacing:var(--ls-tight);
  color:var(--accent-strong);
}
.card-link i{font-size:0.8em}
.card-link--foot{margin-top:auto}
.section-blue .card-link{color:var(--accent)}

/* Three small figures inside a case-study card. */
.case-study-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.case-study-stat{
  text-align:center;
  padding:12px 6px;
  border-radius:var(--radius-md);
  background:var(--off-white);
}
.case-study-stat strong{
  display:block;
  font-size:var(--fs-h4);
  font-weight:var(--w-semi);
  color:var(--ink);
}
.case-study-stat span{font-size:var(--fs-2xs);color:var(--muted-3)}

/* ── case-studies/view.php — the narrative blocks ──────────────────────── */
.cs-block h2{margin-bottom:16px}
.cs-copy{line-height:1.8;color:var(--muted)}

/* ── blog/post.php — the closing band under the article ────────────────── */
.post-outro{max-width:var(--container-narrow);margin-inline:auto}
.post-cta{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--gap-sm);flex-wrap:wrap;
}
.post-cta strong{display:block;margin-bottom:4px}
.post-cta span{font-size:var(--fs-sm);color:var(--muted)}
.post-nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--gap-sm);flex-wrap:wrap;
  margin-top:var(--gap-lg);
}

/* ── thank-you.php ─────────────────────────────────────────────────────── */
.thankyou-icon--logo{
  width:auto;height:auto;
  background:none;
  border-radius:0;
}
.thankyou-icon--logo img{height:72px;width:auto}
.thankyou-title{margin-bottom:18px}
.thankyou-lead{font-size:var(--fs-lead);max-width:620px;margin:0 auto 32px}
.thankyou-alert{max-width:560px;margin-inline:auto;text-align:left}
.thankyou-next{text-align:left;margin-bottom:var(--gap-xl)}
.thankyou-next h4{margin-bottom:18px}
.thankyou-steps{display:flex;flex-direction:column;gap:var(--gap-sm)}
.thankyou-step{display:flex;align-items:flex-start;gap:var(--gap-sm)}
.thankyou-step .step-number{
  width:38px;height:38px;
  margin-bottom:0;
  font-size:var(--fs-sm);
  flex:none;
}
.thankyou-step p{margin:0;font-size:var(--fs-sm)}
.thankyou-section .cta-buttons{justify-content:center}
.thankyou-foot{margin-top:var(--gap-lg)}

/* ── not-a-fit.php ─────────────────────────────────────────────────────── */
.naf-card{display:flex;flex-direction:column;text-align:center}
.naf-card .card-icon{margin-inline:auto}
.naf-card p{flex:1}
.naf-card .btn{margin-top:18px}
.naf-foot{margin-top:var(--gap-lg)}

/* ── request-proposal.php — contact medallions on the navy band ────────── */
.rfp-departments .contact-info-card i{background:var(--brand-soft);color:var(--accent)}
.rfp-departments .contact-info-card a{color:var(--on-dark)}
.rfp-departments .contact-info-card a:hover{color:var(--accent)}

/* ── Prose tables: horizontal scroll on narrow screens ─────────────────── *
   Wide legal tables (cookie inventory, SLA lead times) would otherwise force
   the whole page to scroll sideways on a phone.                             */
.prose .table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:20px 0;
}
.prose .table-scroll table{margin:0}

/* Cookie policy chips */
.chip{
  display:inline-block;
  padding:3px 10px;
  border-radius:var(--radius-pill);
  font-size:var(--fs-xs);
  font-weight:var(--w-semi);
  letter-spacing:var(--ls-tight);
  line-height:1.5;
  white-space:nowrap;
}
.chip-essential{
  background:var(--brand);
  color:var(--on-dark);
}
.chip-analytics{
  background:var(--brand-soft);
  color:var(--brand);
  box-shadow:inset 0 0 0 1px var(--hairline-strong);
}
.chip-marketing{
  background:var(--accent-soft);
  color:var(--accent-strong);
  box-shadow:inset 0 0 0 1px var(--accent-line);
}
.chip-preferences{
  background:var(--off-white);
  color:var(--muted-2);
  box-shadow:inset 0 0 0 1px var(--hairline-strong);
}

/* ── POPIA: navy commitment band ───────────────────────────────────────── *
   The page opened on a dark navy panel; it keeps that rhythm as a
   .section-blue band carrying the same frosted card the rest of the site
   uses. Only the panel's own type scale and link colour are set here.       */
.popia-intro .card-row h2{
  font-size:var(--fs-h3);
  margin-bottom:12px;
}
.popia-intro .card-row p{margin-bottom:10px}
.popia-intro .card-row p:last-child{margin-bottom:0}
.popia-intro a{color:var(--accent)}
.popia-intro a:hover{color:var(--on-dark)}

/* ============================================================================
   PACKAGES OVERVIEW — packages.php
   Appended for the six service cards and the category headers on the packages
   overview. The frosted surface comes from .service-card in components.css;
   these rules only do layout. Tokens only.
   ========================================================================== */

/* The six cards are equal-height columns so every "View Details" button lands
   on the same floor. .pkg-features-list already carries flex:1. */
.packages-services .service-card{display:flex;flex-direction:column}

/* Icon tile beside the label + title pair at the head of each service card. */
.service-card-head{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  margin-bottom:18px;
}
.service-card-head .icon-tile{margin-bottom:0}
.service-card-head h3{margin-bottom:0;font-size:var(--fs-h4)}
.service-card-label{
  font-size:var(--fs-2xs);
  font-weight:var(--w-semi);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent-strong);
  margin-bottom:3px;
}

/* Category header: a small icon tile sitting inline with the eyebrow. */
.packages-category-label{
  display:inline-flex;
  align-items:center;
  gap:var(--space-3);
  margin-bottom:12px;
}
.packages-category-label .icon-tile{
  width:36px;
  height:36px;
  font-size:var(--fs-body);
  margin-bottom:0;
}
.packages-category-label .section-label{margin-bottom:0}

/* The "… Pricing" link under each category's pricing grid. */
.packages-category-action{margin-top:36px;text-align:center}

/* ============================================================================
   SHARED PARTIALS — includes/package-detail-page.php, pricing-cards.php,
   quick-form.php, enquiry-modal.php, reviews-slider.php,
   case-study-placeholder.php

   Only what those partials genuinely need on top of the design system. Every
   rule below adds properties the owning component does not already declare;
   none of them re-declare or defeat an earlier one.
   ========================================================================== */

/* ── Forms (quick-form.php, enquiry-modal.php) ─────────────────────────── */

/* The required marker and the "(optional)" qualifier inside a field label. */
.form-group label .req{color:var(--accent-strong);margin-left:2px}
.form-optional{font-weight:var(--w-regular);color:var(--muted-3)}

/* Inline field errors are rendered up front and revealed only once the field
   fails validation — interactions.js / enquiry-modal.php toggle .has-error. */
.form-group .form-error-msg{display:none;margin-top:4px}
.form-group.has-error .form-error-msg{display:block}

/* The modal close button is positioned against the modal card, not the
   full-screen overlay. */
.x3-modal-wrap{position:relative}

/* ── Contact details beside the quick form ─────────────────────────────── */
.qf-details .contact-detail-label,
.qf-details .contact-detail-value{display:block}

/* ── Pricing cards: the two-payment layout ─────────────────────────────── */

/* A labelled separator between the once-off and monthly options. The plain
   .pkg-payment-divider hairline stays as it is for dividers with no label. */
.pkg-payment-or{
  display:flex;align-items:center;gap:var(--space-3);
  margin:18px 0;
  font-size:var(--fs-xs);
  font-weight:var(--w-semi);
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted-3);
}
.pkg-payment-or::before,
.pkg-payment-or::after{content:"";flex:1;height:1px;background:var(--hairline)}

.pkg-payment-limited{
  font-size:var(--fs-xs);
  font-weight:var(--w-medium);
  color:var(--accent-strong);
  margin-bottom:10px;
}
.pkg-payment-line + .pkg-price-note{margin-top:2px}
.pkg-payment-then{font-size:var(--fs-xs);margin:10px 0 6px}
.pkg-payment-total{display:block;margin-top:12px;font-size:var(--fs-xs);line-height:1.55}

/* ── Package detail: pricing summary ───────────────────────────────────── */
.package-detail-summary{position:relative}
.package-detail-pricing-summary{margin-top:24px}
.package-detail-pricing-summary-list li{
  position:relative;
  padding-left:25px;
  font-size:var(--fs-xs);
  color:var(--muted);
  line-height:1.6;
}
.package-detail-pricing-summary-list li::before{
  content:"";
  position:absolute;left:0;top:6px;
  width:12px;height:7px;
  border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.package-detail-pricing-copy .package-detail-back-link{margin-top:24px}

/* ── Package detail: inclusion accordion ───────────────────────────────── */
.package-detail-inclusion-summary{list-style:none}
.package-detail-inclusion-summary::-webkit-details-marker{display:none}
.package-detail-inclusion-group{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:var(--space-1) var(--space-3);
  flex:1;
  min-width:0;
}
.package-detail-inclusion-group > i{color:var(--accent-strong);font-size:var(--fs-sm);flex:none}
.package-detail-inclusion-count{
  font-size:var(--fs-xs);
  font-weight:var(--w-regular);
  color:var(--muted-3);
}
.package-detail-inclusion-action{
  font-size:var(--fs-xs);
  font-weight:var(--w-semi);
  color:var(--accent-strong);
}
details[open] .package-detail-inclusion-action{visibility:hidden}
.package-detail-inclusion-close{
  margin-top:16px;
  font-size:var(--fs-xs);
  font-weight:var(--w-semi);
  color:var(--accent-strong);
}

/* ── Package detail: media plates ──────────────────────────────────────── */
.package-detail-media-card{display:flex;align-items:center;gap:var(--space-3)}
.package-detail-media-card i{color:var(--accent-strong);font-size:var(--fs-body);flex:none}

/* ── Package detail: notes ─────────────────────────────────────────────── */
.package-detail-notes .package-detail-note{
  max-width:var(--container-medium);
  margin-inline:auto;
}

/* ── Package detail: closing CTA over its own video plate ──────────────── */
.package-detail-final-bg{position:relative;overflow:hidden}
.package-detail-final-media{position:absolute;inset:0;z-index:0}
.package-detail-final-media video{width:100%;height:100%;object-fit:cover}
.package-detail-final-media::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(168deg,var(--brand) 0%,var(--brand-deep) 100%);
  opacity:0.82;
}
.package-detail-final-bg > .container{position:relative;z-index:1}
.package-detail-actions{justify-content:center}

/* ── Package detail: not-found fallback ────────────────────────────────── */
.package-detail-404-copy{margin:16px 0 28px}

/* ── Case study placeholder cards ──────────────────────────────────────── */
.cs-placeholder-card{text-align:center}
.cs-placeholder-card .icon-tile{margin-inline:auto}
.cs-placeholder-label{
  font-size:var(--fs-xs);
  font-weight:var(--w-semi);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted-3);
  margin-bottom:8px;
}
.cs-placeholder-result{
  font-size:var(--fs-h3);
  font-weight:var(--w-semi);
  letter-spacing:var(--ls-h3);
  color:var(--ink);
  margin-bottom:8px;
}

/* ============================================================================
   RESPONSIVE — the one breakpoint ladder
   1180 / 1080 / 980 / 860 / 560, with min-width:861px as the paired step.
   Every media query in this file lives here, one block per rung, in
   descending order so the narrower rung always wins. Nothing above this
   point declares a media query.
   ========================================================================== */

/* ── 1180: wide desktop -> desktop ─────────────────────────────────────── */
@media (max-width:1180px){
  /* Portfolio steps 4 -> 3 -> 2 -> 1 down the ladder. */
  .portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Work grid steps 3 -> 2 -> 1. */
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── 1080: desktop -> small desktop / landscape tablet ─────────────────── */
@media (max-width:1080px){
  /* The six "What We Stand For" values step 3 -> 2 -> 1. */
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .package-detail-grid,
  .about-teaser-grid,
  .qf-layout,
  .booking-inner,
  .home-ai-shell{grid-template-columns:minmax(0,1fr)}
  .about-teaser-grid .about-teaser-img,
  .about-teaser-grid .about-teaser-media{max-height:340px}
  .sa-usa-section{grid-template-columns:minmax(0,1fr)}
  .sa-usa-stat-row{flex-wrap:wrap;gap:var(--gap-lg)}
}

/* The contact departments hold two across for the whole tablet band, then
   stack at the 860 rung below. */
@media (max-width:1080px) and (min-width:861px){
  .contact-department-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── 861: the paired min-width step ────────────────────────────────────── *
   About: team row 2 — two cards held to the row-1 column width.            */
@media (min-width:861px){
  .team-grid--row2{
    grid-template-columns:repeat(2,calc((100% - var(--gap-md) * 2) / 3));
    justify-content:center;
  }
}

/* ── 860: tablet -> stacked ────────────────────────────────────────────── */
@media (max-width:860px){
  .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .packages-grid,.pricing-grid{grid-template-columns:minmax(0,1fr)}
  .process-steps,.team-grid,
  .blog-grid,.case-study-grid,
  .services-grid,.benefits-grid,.why-grid,
  .growth-cards-grid,.feature-grid,
  .contact-info-grid{grid-template-columns:minmax(0,1fr)}
  .contact-department-grid{grid-template-columns:minmax(0,1fr)}
  .contact-department-grid .contact-info-card p{min-height:0}
  .legal-card{padding:26px 22px}
  .editorial-row{grid-template-columns:minmax(0,1fr);gap:var(--space-3);text-align:left}
  .editorial-row-link{margin-top:4px}
  .featured-work-grid{grid-template-columns:minmax(0,1fr)}
}

/* ── 560: stacked -> phone ─────────────────────────────────────────────── */
@media (max-width:560px){
  .portfolio-grid{grid-template-columns:minmax(0,1fr)}
  .work-grid{grid-template-columns:minmax(0,1fr)}
  .case-study-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post-cta,.post-nav{flex-direction:column;align-items:stretch}
  .popia-intro .card-row{flex-direction:column}
}