/* =====================================================================
 * Pillar — Pricing page
 * Loaded only on pages using the "Pillar — Pricing" template.
 *
 * Stockholm note: the theme forces heading colors (h1 #5d5d5d, h2 #393939)
 * and link color (a #E6AE48), overriding anything inherited. Headings below
 * therefore set their color with !important to win.
 * ================================================================== */

/* ---- Stockholm header over the dark hero -------------------------------
   The theme header starts transparent with DARK text and only turns solid
   white once scrolled — invisible over our dark hero. These rules turn the
   nav + logo white while the header is transparent, and hand control back to
   the theme the moment it adds `.scrolled`.

   DESKTOP ONLY (min-width:1001px): below that Stockholm switches to a SOLID
   (light) mobile header + hamburger, so forcing them white there makes the
   logo and menu invisible (light-on-light). Gating to desktop lets the theme's
   normal dark-on-light mobile header show. */
@media (min-width:1001px){
  body.page-template-pillar-pricing .page_header:not(.scrolled) .menu-item > a,
  body.page-template-pillar-pricing .page_header:not(.scrolled) .menu-item > a:hover,
  body.page-template-pillar-pricing .page_header:not(.scrolled) .q_menu .menu-item > a{
    color:#fff !important;
  }
  body.page-template-pillar-pricing .page_header:not(.scrolled) img.normal{opacity:0 !important;}
  body.page-template-pillar-pricing .page_header:not(.scrolled) img.light{opacity:1 !important;}
  body.page-template-pillar-pricing .page_header:not(.scrolled) .mobile_menu_button,
  body.page-template-pillar-pricing .page_header:not(.scrolled) .mobile_menu_button span{color:#fff !important;}
}

.pillar-pricing-pg{
  --ink:      #161616;
  --dark:     #17130d;
  --accent:   #e6ae48;
  --muted:    #6b6b6b;
  --dmuted:   #9a938a;   /* muted text on dark */
  --hair:     #ededed;
  --dhair:    rgba(255,255,255,.14);
  --maxw:     2400px;
  --pad:      96px;
}
.pillar-pricing-pg *,.pillar-pricing-pg *::before,.pillar-pricing-pg *::after{box-sizing:border-box;margin:0;padding:0;}
.pillar-pricing-pg{
  font-family:'Barlow',sans-serif;color:var(--ink);background:#fff;line-height:1.6;
  -webkit-font-smoothing:antialiased;width:100%;max-width:100%;overflow-x:hidden;
}
.pillar-pricing-pg p{margin:0;}
.ppr-display{
  font-family:'Barlow',sans-serif;font-weight:800;font-style:normal;
  line-height:.98;letter-spacing:-.035em;text-transform:none;
}
.ppr-gold{color:var(--accent) !important;}

/* Shared eyebrow */
.ppr-eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);
}
.ppr-eyebrow--accent{color:var(--accent);}
.ppr-eyebrow--rule{
  display:flex;align-items:center;gap:18px;color:var(--ink);
}
.ppr-eyebrow--rule::before{content:"";width:46px;height:2px;background:var(--accent);flex:none;}

/* ---- 1 · HERO (dark, editorial split) ---------------------------------- */
.ppr-hero{background:var(--dark);}
.ppr-hero__inner{
  max-width:var(--maxw);margin:0 auto;padding:170px var(--pad) 150px;
  display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.4fr);gap:80px;align-items:start;
}
.ppr-hero__left .ppr-eyebrow{margin-bottom:30px;}
.ppr-hero__body,.ppr-hero__body p{color:var(--dmuted);font-size:17px;line-height:1.7;max-width:46ch;}
.ppr-hero__body p + p{margin-top:18px;}
.pillar-pricing-pg .ppr-hero__title{
  font-size:clamp(40px,5.2vw,78px);color:#fff !important;text-align:right;
  justify-self:end;max-width:14ch;
}

/* ---- 2 · COMPLEXITY SCALE + PROJECT RANGES (white) --------------------- */
.ppr-ranges{padding:110px 0 130px;}
.ppr-ranges__inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}

.ppr-scale{margin-bottom:96px;}
.ppr-scale__labels{display:flex;justify-content:space-between;margin-bottom:14px;}
.ppr-scale__label{
  font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}
.ppr-scale__bars{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.ppr-scale__bars span{height:6px;display:block;border-radius:0;}
.ppr-scale__bars span:nth-child(1){background:rgba(230,174,72,.32);}
.ppr-scale__bars span:nth-child(2){background:rgba(230,174,72,.52);}
.ppr-scale__bars span:nth-child(3){background:rgba(230,174,72,.74);}
.ppr-scale__bars span:nth-child(4){background:var(--accent);}

.ppr-ranges__eyebrow{margin-bottom:20px;}

.ppr-range-list{border-top:1px solid var(--hair);}
/* Default (no length column): title/price left, description column uses the
   SAME split + gap as the drivers section below (0.95/1.05, gap 96) so its left
   edge lines up with that section's factor-list column at every width. */
.ppr-range{
  display:grid;grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);gap:96px;
  padding:40px 0;border-bottom:1px solid var(--hair);align-items:start;
}
/* With a "typical length" middle column: three tracks — title left, length in
   the middle, and the description shifted right to make room. */
.ppr-range-list.ppr-has-length .ppr-range{
  grid-template-columns:minmax(0,0.9fr) minmax(0,0.6fr) minmax(0,600px);gap:64px;
}
.ppr-range__length-label{
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;
}
.ppr-range__length-val{
  font-family:'Barlow',sans-serif;font-weight:600;font-size:17px;line-height:1.5;color:var(--accent);
}
.pillar-pricing-pg .ppr-range__title{
  font-family:'Barlow',sans-serif;font-weight:700;font-size:clamp(20px,1.6vw,24px);
  line-height:1.15;letter-spacing:-.01em;color:var(--ink) !important;margin-bottom:10px;max-width:26ch;
}
.ppr-range__price{
  font-family:'Barlow',sans-serif;font-weight:700;font-size:clamp(20px,1.6vw,24px);
  letter-spacing:-.01em;
}
.ppr-range__desc{font-size:16px;line-height:1.75;color:var(--muted);max-width:600px;}

/* ---- 3 · WHAT DRIVES THE COST (dark) ----------------------------------- */
.ppr-drivers{background:var(--dark);color:#fff;padding:120px 0;}
.ppr-drivers__inner{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);gap:96px;align-items:start;
}
.pillar-pricing-pg .ppr-drivers__title{
  font-size:clamp(30px,3vw,46px);color:#fff !important;margin-bottom:36px;max-width:14ch;
}
.ppr-drivers__media{margin:0;}

/* Slideshow — one image visible, crossfading factor-to-factor. Synced to the
   list by JS (see template): the active image's factor row lights up gold and
   its label shows as the caption. */
.ppr-slideshow{width:100%;}
.ppr-slideshow__stage{position:relative;width:100%;aspect-ratio:4 / 3;overflow:hidden;border:1px solid var(--dhair);background:#1c1913;}
.ppr-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease;}
.ppr-slide.is-active{opacity:1;}
.ppr-slide--ph{opacity:1;background:linear-gradient(150deg,#2a2620,#1c1913 72%);}
@media (prefers-reduced-motion:reduce){.ppr-slide{transition:none;}}

.ppr-slideshow__meta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;}
.ppr-slideshow__caption{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);}
.ppr-slideshow__dots{display:flex;gap:9px;}
.ppr-dot{
  width:8px;height:8px;padding:0;border:none;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.28);transition:background .2s,transform .2s;
}
.ppr-dot:hover{background:rgba(255,255,255,.55);}
.ppr-dot.is-active{background:var(--accent);transform:scale(1.15);}

.ppr-driver-list{margin:0;}
.ppr-driver{
  display:grid;grid-template-columns:minmax(0,0.42fr) minmax(0,0.58fr);gap:28px;
  padding:22px 0;border-top:1px solid var(--dhair);align-items:baseline;
  transition:opacity .3s ease;
}
.ppr-driver:last-child{border-bottom:1px solid var(--dhair);}
.ppr-driver__label{
  font-weight:700;font-size:16px;letter-spacing:.01em;color:#fff;transition:color .3s ease;
}
.ppr-driver__desc{margin:0;font-size:15px;line-height:1.65;color:var(--dmuted);transition:color .3s ease;}
/* The factor matching the current slide lights up gold. */
.ppr-driver.is-active .ppr-driver__label{color:var(--accent);}
.ppr-driver.is-active .ppr-driver__desc{color:#e8dcc6;}

/* ---- 4 · PROTOTYPE IS NOT THE FINAL PRODUCT (white) -------------------- */
.ppr-proto{padding:130px 0;}
.ppr-proto__inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.ppr-proto .ppr-eyebrow--rule{margin-bottom:34px;}
.pillar-pricing-pg .ppr-proto__title{
  font-size:clamp(28px,3.1vw,50px);color:var(--ink) !important;max-width:24ch;
  line-height:1.03;letter-spacing:-.03em;
}
.ppr-proto__body,.ppr-proto__body p{
  margin-top:30px;font-size:17px;line-height:1.75;color:var(--muted);max-width:58ch;
}

/* ---- 5 · ENGAGEMENTS + HOW WE START (dark) ----------------------------- */
.ppr-eng{background:var(--dark);color:#fff;padding:120px 0;}
.ppr-eng__inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.ppr-eng__block{
  display:grid;grid-template-columns:minmax(0,0.42fr) minmax(0,1fr);gap:80px;align-items:start;
}
.ppr-eng__block + .ppr-eng__block{margin-top:96px;padding-top:96px;border-top:1px solid var(--dhair);}
.ppr-eng__intro .ppr-eyebrow{margin-bottom:22px;}
.pillar-pricing-pg .ppr-eng__title{
  font-family:'Barlow',sans-serif;font-weight:800;font-size:clamp(26px,2.4vw,38px);
  line-height:1.05;letter-spacing:-.03em;color:#fff !important;max-width:16ch;
}
.ppr-eng__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;}
.pillar-pricing-pg .ppr-eng__coltitle{
  font-family:'Barlow',sans-serif;font-weight:700;font-size:19px;color:#fff !important;margin-bottom:14px;
}
.ppr-eng__coldesc{font-size:15px;line-height:1.7;color:var(--dmuted);max-width:44ch;}

/* How we start — numbered steps */
.ppr-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;}
.ppr-step__num{
  font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--accent);margin-bottom:16px;
}
.ppr-step__text{font-size:15px;line-height:1.6;color:#e9e5df;max-width:22ch;}

/* ---- 6 · CTA (gold band) -----------------------------------------------
   Same format as the other pages: gold band, white headline, supporting
   subtext, white button with dark text that inverts on hover. */
.ppr-cta{background:var(--accent);color:#fff;text-align:center;}
.ppr-cta__inner{max-width:var(--maxw);margin:0 auto;padding:140px var(--pad) 150px;}
.pillar-pricing-pg .ppr-cta__title{
  font-size:clamp(40px,5vw,80px);color:#fff !important;max-width:16ch;margin:0 auto !important;
  line-height:.98;letter-spacing:-.035em;text-align:center !important;
}
/* Prefixed + !important so Stockholm's own `p` margin/alignment can't pull the
   subtext to the left — it stays centered under the headline. */
.pillar-pricing-pg .ppr-cta__lede{
  margin:26px auto 0 !important;max-width:48ch;font-size:18px;line-height:1.65;
  color:rgba(255,255,255,.9);text-align:center !important;
}
/* Button matches the other pages' CTA button (service/company): white on gold,
   dark text, inverts on hover. !important throughout so Stockholm's own link /
   button styling can't reshape it on the live site. */
.pillar-pricing-pg .ppr-cta__btn{
  display:inline-block;margin-top:44px;
  background:#fff !important;color:var(--ink) !important;
  font-family:'Barlow',sans-serif !important;font-weight:600 !important;font-size:16px !important;
  letter-spacing:.02em !important;line-height:1.1 !important;text-transform:none !important;
  padding:22px 46px !important;text-decoration:none !important;
  border:none !important;border-radius:0 !important;box-shadow:none !important;
  transition:background .2s,color .2s;
}
.pillar-pricing-pg .ppr-cta__btn:hover,
.pillar-pricing-pg .ppr-cta__btn:focus{background:var(--ink) !important;color:#fff !important;}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width:1300px){
  .pillar-pricing-pg{--pad:56px;}
  .ppr-hero__inner{padding:150px var(--pad) 130px;gap:56px;}
  /* Keep ranges + drivers on the same gap so their right-hand columns stay aligned. */
  .ppr-drivers__inner{gap:64px;}
  .ppr-range{gap:64px;}
}
@media (max-width:1000px){
  .ppr-hero__inner{grid-template-columns:1fr;gap:40px;padding:130px var(--pad) 100px;}
  /* Headline leads on narrow screens — sits ABOVE the eyebrow + intro. */
  .pillar-pricing-pg .ppr-hero__title{text-align:left;justify-self:start;max-width:100%;order:-1;margin-bottom:6px;}
  .ppr-ranges{padding:80px 0 90px;}
  .ppr-scale{margin-bottom:64px;}
  .ppr-range,
  .ppr-range-list.ppr-has-length .ppr-range{grid-template-columns:1fr;gap:16px;padding:32px 0;}
  .ppr-range-list.ppr-has-length .ppr-range{gap:14px;}
  .ppr-drivers,.ppr-eng{padding:80px 0;}
  .ppr-drivers__inner{grid-template-columns:1fr;gap:48px;}
  /* Slideshow is hidden once the section stacks — the driver list carries it. */
  .ppr-drivers__media{display:none;}
  .ppr-eng__block{grid-template-columns:1fr;gap:32px;}
  .ppr-eng__block + .ppr-eng__block{margin-top:64px;padding-top:64px;}
  .ppr-steps{grid-template-columns:repeat(2,1fr);gap:32px;}
  .ppr-proto{padding:90px 0;}
}
@media (max-width:640px){
  .ppr-hero__inner{padding:120px var(--pad) 80px;}
  .ppr-eng__cols{grid-template-columns:1fr;gap:36px;}
  .ppr-steps{grid-template-columns:1fr;gap:26px;}
  .ppr-driver{grid-template-columns:1fr;gap:6px;}
  .ppr-cta__inner{padding:80px var(--pad) 88px;}
}