/* ==================================================
   MONTHLY SERVICES PAGE — Design_Services_Monthly.php
   (scoped exclusively to this page — see project memory)
================================================== */

.services-page { overflow-x:hidden; }

/* Base container — every section on this page wraps content in .container */
.container {
  max-width:1260px;
  margin:0 auto;
  padding:0 48px;
}
@media (max-width:640px) {
  .container { padding:0 24px; }
}

/* =========================
   SHARED PATTERNS
========================= */
.section-label {
  display:inline-block;
  color:var(--secondary, #E11931);
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:.8rem;
  font-weight:700;
  margin-bottom:18px;
}
.section-heading {
  max-width:760px;
  margin:0 auto 80px;
  text-align:center;
}
.section-heading h2 {
  font-size:clamp(2rem,4.2vw,3.4rem);
  line-height:1.12;
  letter-spacing:-0.03em;
  margin:14px 0 22px;
}

/* Kicker line — folds a former standalone "transition" sentence into the
   section it now leads into, instead of giving it its own full-height section */
.lead-in {
  font-style:italic;
  color:#8a93a6;
  font-size:.98rem;
  line-height:1.7;
  max-width:520px;
  margin:0 auto 22px;
}
.section-heading p {
  color:#666;
  line-height:1.9;
  font-size:1.05rem;
}

/* Chip / tag list — used by values-list, three-points, ideal-grid */
.values-list,
.three-points,
.ideal-grid {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:32px;
}
.values-list span,
.three-points span,
.ideal-grid span {
  display:inline-flex;
  align-items:center;
  padding:11px 22px;
  border-radius:100px;
  background:#fff;
  border:1px solid rgba(19,72,130,.12);
  font-size:.92rem;
  font-weight:600;
  color:var(--primary, #134882);
  transition:.3s ease;
}
.values-list span:hover,
.three-points span:hover,
.ideal-grid span:hover {
  background:var(--primary, #134882);
  color:#fff;
  border-color:var(--primary, #134882);
  transform:translateY(-3px);
}
.client-values .container,
.value-reinforcement .three-points,
.ideal-for-section .container { text-align:center; }
.values-list, .ideal-grid, .three-points { justify-content:center; }

/* Ideal-for-section — elevate chips with icon + shadow, give the section a clear focal card */
.ideal-for-section { padding:140px 0; }
.ideal-for-section .ideal-grid { gap:16px; margin-top:8px; }
.ideal-grid span {
  gap:9px;
  padding:13px 24px 13px 18px;
  box-shadow:0 6px 18px rgba(19,72,130,.06);
  font-size:.96rem;
}
.ideal-grid span::before {
  content:'✓';
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  background:rgba(19,72,130,.1); color:var(--primary, #134882);
  font-size:.66rem; font-weight:800;
  transition:.3s ease;
}
.ideal-grid span:hover::before { background:#fff; color:var(--primary, #134882); }
.ideal-grid span:hover { box-shadow:0 14px 30px rgba(19,72,130,.16); }
.not-for-note { margin-top:40px; }

.client-values { background:var(--bg-soft, #F7F8FA); }
.client-values .section-heading { margin-bottom:48px; }

/* Generic card grid lift */
.problem-card, .value-card, .service-category-card, .comparison-column,
.process-card, .philosophy-card, .expectation-card, .growth-card,
.experience-card, .portfolio-card {
  transition:transform .4s var(--ease-premium, ease), box-shadow .4s ease, border-color .3s ease;
}
.problem-card:hover, .value-card:hover, .service-category-card:hover,
.process-card:hover, .philosophy-card:hover, .expectation-card:hover,
.growth-card:hover, .experience-card:hover, .portfolio-card:hover {
  transform:translateY(-6px);
  box-shadow:0 24px 50px rgba(19,72,130,.08);
  border-color:rgba(19,72,130,.16);
}

/* =========================
   HERO
========================= */
.services-hero { padding:200px 0 120px; position:relative; }

.hero-pill {
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px;
  border:1px solid rgba(255,0,51,.15);
  border-radius:999px;
  background:#fff;
  color:#FF0033;
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:30px;
}
.hero-pill span { font-size:.6rem; }

.hero-belief {
  font-weight:600;
  color:var(--primary, #134882);
  margin:30px 0;
  line-height:1.8;
  padding-left:18px;
  border-left:2px solid #E11931;
}

.services-hero-grid {
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:60px;
  align-items:start;
}
.services-hero-visual { display:flex; justify-content:flex-end; align-items:flex-start; }

.services-hero-content h1 {
  font-size:clamp(3rem,4.5vw,4.8rem);
  line-height:0.94;
  letter-spacing:-0.05em;
  max-width:9ch;
}
.hero-subheadline { font-size:1.25rem; line-height:1.8; color:#5f6368; max-width:650px; margin-bottom:24px; }
.hero-supporting-text { font-size:1rem; line-height:1.9; color:#7b7f85; max-width:620px; margin-bottom:32px; }

.hero-buttons { display:flex; gap:18px; flex-wrap:wrap; margin-top:8px; }
.btn-secondary {
  display:inline-flex; align-items:center; justify-content:center;
  padding:18px 32px; border-radius:16px;
  border:1.5px solid rgba(19,72,130,.16);
  color:var(--primary, #134882);
  background:#fff;
  font-weight:700; font-size:15px;
  text-decoration:none;
  transition:.35s ease;
}
.btn-secondary:hover { background:var(--primary, #134882); color:#fff; border-color:var(--primary, #134882); transform:translateY(-3px); }

.services-hero-visual { position:relative; }
.services-hero-visual::before {
  content:'';
  position:absolute;
  width:420px; height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(19,72,130,.1), transparent 70%);
  top:-80px; right:-80px;
  pointer-events:none;
  z-index:0;
}

.partnership-card {
  max-width:480px; width:100%; margin-top:10px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:28px;
  padding:44px 40px 0;
  box-shadow:0 25px 70px rgba(19,72,130,.14);
  transition:.45s var(--ease-premium, ease);
  position:relative;
  overflow:hidden;
  z-index:1;
}
.partnership-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:6px;
  background:linear-gradient(90deg, #E11931, var(--primary, #134882));
}
.partnership-card:hover { transform:translateY(-8px); box-shadow:0 36px 90px rgba(19,72,130,.2); }

.card-label {
  display:flex; align-items:center; gap:10px;
  color:var(--primary, #134882); font-size:.82rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.15em; margin-bottom:28px;
}
.card-label-dot { color:#E11931; font-size:.6rem; }

.partnership-card ul { list-style:none; padding:0; margin:0 0 8px; }
.partnership-card li {
  display:flex; align-items:center; gap:14px;
  padding:14px 0; border-bottom:1px solid rgba(0,0,0,.06);
  font-size:1rem; font-weight:500; color:#22293a;
}
.li-check {
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; flex-shrink:0; border-radius:50%;
  background:rgba(19,72,130,.08);
  color:var(--primary, #134882);
  font-size:.72rem; font-weight:800;
  transition:.3s ease;
}
.partnership-card li:hover .li-check { background:var(--primary, #134882); color:#fff; }

.card-footer {
  display:flex; align-items:center; gap:14px;
  margin:28px -40px 0; padding:22px 40px;
  background:linear-gradient(135deg, var(--primary, #134882), #0c2c54);
  color:#fff; font-weight:700; font-size:.96rem;
  border-radius:0 0 27px 27px;
  cursor:default;
  overflow:hidden;
}

.footer-icon-wrap { position:relative; width:18px; height:20px; flex-shrink:0; }
.footer-play {
  position:absolute; top:50%; left:0;
  width:14px; height:auto;
  transition:transform .5s var(--ease-premium, ease), opacity .4s ease;
}
.footer-play-red   { transform:translate(0,-50%); opacity:1; }
.footer-play-white { transform:translate(-22px,-50%); opacity:0; }
.card-footer:hover .footer-play-red   { opacity:0; transform:translate(18px,-50%); }
.card-footer:hover .footer-play-white { opacity:1; transform:translate(0,-50%); }

.footer-text-wrap { position:relative; flex:1; height:1.3em; overflow:hidden; }
.footer-text {
  position:absolute; left:0; top:0; white-space:nowrap;
  transition:transform .45s var(--ease-premium, ease), opacity .45s ease;
}
.footer-text-default { transform:translateY(0); opacity:1; }
.footer-text-hover   { transform:translateY(8px); opacity:0; }
.card-footer:hover .footer-text-default { transform:translateY(-10px); opacity:0; }
.card-footer:hover .footer-text-hover   { transform:translateY(0); opacity:1; }

/* =========================
   SECTION BACKGROUND RHYTHM
========================= */
.problem-section,
.replace-section,
.process-section,
.real-business-section,
.ideal-for-section { background:var(--bg-soft, #F7F8FA); }

.beyond-design-section,
.creative-capability-section,
.comparison-section,
.growth-focus-section,
.process-philosophy,
.why-8d-section,
.difference-thinking,
.selected-work-section,
.client-experience-section,
.investment-section,
.final-belief { background:#fff; }

/* Dark "statement" breaks — pacing accents */
.power-statement,
.transition-large,
.value-reinforcement {
  background:var(--primary, #134882);
  color:#fff;
}
.power-statement p,
.transition-large p,
.value-reinforcement p { color:rgba(255,255,255,.72); }
.value-reinforcement .three-points span {
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  color:#fff;
}
.value-reinforcement .three-points span:hover { background:#fff; color:var(--primary, #134882); }

/* =========================
   PROBLEM / VALUE / SERVICE GRIDS
========================= */
.problem-section, .beyond-design-section, .everything-section,
.comparison-section, .why-8d-section,
.selected-work-section, .investment-section { padding:150px 0; }
.process-section { padding:70px 0 70px; }

.problem-grid, .value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.problem-card, .value-card { background:#fff; padding:40px; border-radius:24px; border:1px solid rgba(0,0,0,.06); }
.problem-card h3, .value-card h3 { font-size:1.25rem; margin-bottom:14px; letter-spacing:-.02em; }
.problem-card p, .value-card p { color:#666; line-height:1.8; }

.value-icon {
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:16px;
  background:rgba(19,72,130,.07);
  color:var(--primary, #134882);
  margin-bottom:24px;
  transition:.35s ease;
}
.value-icon svg { width:24px; height:24px; }
.value-card:hover .value-icon { background:var(--primary, #134882); color:#fff; transform:scale(1.08) rotate(-4deg); }

.service-categories-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:32px; }
.service-category-card { background:#fff; border-radius:28px; padding:42px; border:1px solid rgba(0,0,0,.06); }
.service-category-card h3 { font-size:1.35rem; margin-bottom:14px; letter-spacing:-.02em; }
.service-category-card p { color:#666; line-height:1.8; margin-bottom:26px; }
.service-category-card ul { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.service-category-card li { font-size:.92rem; color:#444; }
.service-category-card.featured { border-color:var(--primary, #134882); border-width:1.5px; background:linear-gradient(180deg,#fff,#f6f9ff); position:relative; }
.service-category-card.featured::before {
  content:'Most Requested';
  position:absolute; top:-13px; left:42px;
  background:var(--primary, #134882); color:#fff;
  font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 14px; border-radius:100px;
}

/* =========================
   POWER / TRANSITION STATEMENTS
========================= */
.power-statement, .process-philosophy, .final-belief,
.transition-large, .value-reinforcement {
  padding:130px 0; text-align:center;
}
.process-philosophy { padding-top:70px; }
.confidence-row {
  display:flex; justify-content:center; align-items:center;
  gap:18px; margin-top:26px;
  font-family:'Manrope',sans-serif; font-weight:800;
  font-size:clamp(1rem,2vw,1.3rem); letter-spacing:.02em;
  color:var(--primary, #134882); text-transform:uppercase;
}
.confidence-row .cr-divider { color:#ccc; font-weight:400; font-size:.8em; }
@media (max-width:640px) {
  .confidence-row { gap:10px; font-size:.92rem; flex-wrap:wrap; }
}
.difference-thinking, .creative-capability-section {
  padding:90px 0; text-align:center;
}
.power-statement h2, .process-philosophy h2, .final-belief h2,
.transition-large h2, .value-reinforcement h2,
.difference-thinking h2, .statement-wrapper h2 {
  font-size:clamp(1.9rem,3.8vw,2.9rem);
  line-height:1.25;
  letter-spacing:-0.025em;
  max-width:18ch;
  margin:0 auto;
}
.power-statement h2 { max-width:32ch; }
@media (max-width:640px) { .power-statement h2 { max-width:18ch; } }
.power-statement p, .process-philosophy p, .final-belief p,
.transition-large p, .value-reinforcement p,
.difference-thinking p, .statement-wrapper p {
  max-width:600px; margin:22px auto 0; line-height:1.85; color:#666; font-size:1.02rem;
}
.statement-wrapper { max-width:680px; margin:0 auto; }

/* Explicit white text on the dark statement sections — never rely on inheritance */
.power-statement h2, .power-statement p,
.transition-large h2, .transition-large p,
.value-reinforcement h2, .value-reinforcement p {
  color:#fff;
}
.power-statement p, .transition-large p, .value-reinforcement p { color:rgba(255,255,255,.72); }

/* Subtle on-brand texture — same grid + glow language as the homepage hero, no photo needed */
.power-statement, .transition-large, .value-reinforcement { position:relative; overflow:hidden; }
.power-statement::before, .transition-large::before, .value-reinforcement::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(circle at 50% 40%, rgba(0,0,0,.9), transparent 75%);
  mask-image:radial-gradient(circle at 50% 40%, rgba(0,0,0,.9), transparent 75%);
}
.power-statement::after, .transition-large::after, .value-reinforcement::after {
  content:''; position:absolute; pointer-events:none;
  width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,0,51,.10), transparent 70%);
  top:-180px; right:-120px;
}
.power-statement .container, .transition-large .container, .value-reinforcement .container {
  position:relative; z-index:1;
}

/* =========================
   WHAT THIS REPLACES
========================= */
.replace-section { padding:150px 0 70px; }
.replace-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.replace-left ul { list-style:none; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:14px; }
.replace-left li {
  font-size:1.05rem; color:#888; font-weight:500;
  padding-left:24px; position:relative;
}
.replace-left li::before {
  content:'✕'; position:absolute; left:0; color:#E11931; font-weight:700; font-size:.85rem; top:3px;
}
.replace-right h2 { font-size:clamp(2rem,4vw,3.2rem); line-height:1.2; letter-spacing:-.03em; color:var(--primary, #134882); }

/* =========================
   COMPARISON TABLE
========================= */
.comparison-table { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.comparison-column { padding:44px; border-radius:24px; border:1px solid rgba(0,0,0,.06); background:#fff; }
.comparison-column h3 { font-size:1.3rem; margin-bottom:24px; }
.comparison-column ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.comparison-column li { font-size:.96rem; color:#666; padding-left:22px; position:relative; }
.comparison-column li::before { content:'–'; position:absolute; left:0; color:#bbb; }
.comparison-column.featured { background:var(--primary, #134882); color:#fff; border-color:var(--primary, #134882); }
.comparison-column.featured li { color:rgba(255,255,255,.85); }
.comparison-column.featured li::before { content:'✓'; color:#fff; }

/* =========================
   GROWTH CARDS
========================= */
.growth-focus-section { padding:70px 0 90px; text-align:center; }
.growth-focus-section h2 { font-size:clamp(1.9rem,3.8vw,2.9rem); max-width:20ch; margin:0 auto 24px; line-height:1.2; letter-spacing:-.025em; }
.growth-focus-section > .container > p { max-width:620px; margin:0 auto 64px; color:#666; line-height:1.85; font-size:1.05rem; }
.growth-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; text-align:left; }
.growth-card { background:#fff; padding:40px; border-radius:24px; border:1px solid rgba(0,0,0,.06); }
.growth-card h3 { font-size:1.18rem; margin-bottom:12px; }
.growth-card p { color:#666; line-height:1.8; font-size:.96rem; }

/* =========================
   PROCESS STEPS
========================= */
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.process-card { padding:38px 32px; border-radius:24px; border:1px solid rgba(0,0,0,.06); background:#fff; position:relative; }
.step-number {
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%;
  background:var(--primary, #134882); color:#fff;
  font-family:'Manrope',sans-serif; font-weight:800; font-size:.95rem;
  margin-bottom:24px;
}
.process-card h3 { font-size:1.15rem; margin-bottom:12px; letter-spacing:-.02em; }
.process-card p { color:#666; line-height:1.75; font-size:.92rem; margin-bottom:18px; }
.step-highlight {
  display:block; font-size:.84rem; font-weight:600; font-style:italic;
  color:var(--primary, #134882); line-height:1.6; padding-top:14px;
  border-top:1px solid rgba(0,0,0,.06);
}

/* =========================
   WHY 8D / PHILOSOPHY
========================= */
.philosophy-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:30px; }
.philosophy-card { padding:42px; border-radius:24px; border:1px solid rgba(0,0,0,.06); background:#fff; position:relative; }
.philosophy-card span {
  display:inline-block; font-family:'Manrope',sans-serif; font-weight:800;
  font-size:1.4rem; color:transparent; -webkit-text-stroke:1.5px rgba(19,72,130,.25);
  margin-bottom:18px;
}
.philosophy-card h3 { font-size:1.22rem; margin-bottom:12px; letter-spacing:-.02em; }
.philosophy-card p { color:#666; line-height:1.8; font-size:.95rem; }

/* =========================
   BUILT FOR REAL BUSINESSES
========================= */
.expectation-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.expectation-card { background:#fff; padding:36px 30px; border-radius:22px; border:1px solid rgba(0,0,0,.06); text-align:center; }
.expectation-card h3 { font-size:1.08rem; margin-bottom:12px; }
.expectation-card p { color:#666; line-height:1.75; font-size:.9rem; }
.expectation-icon {
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%;
  background:rgba(225,25,49,.08); color:#E11931;
  margin:0 auto 18px;
}
.expectation-icon svg { width:22px; height:22px; }
.expectation-card:hover .expectation-icon { background:#E11931; color:#fff; transform:scale(1.08); transition:.3s ease; }

/* =========================
   SELECTED WORK / PORTFOLIO
========================= */
.portfolio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.portfolio-card { background:#fff; border-radius:24px; overflow:hidden; border:1px solid rgba(0,0,0,.06); padding-bottom:30px; }
.portfolio-placeholder {
  aspect-ratio:4/3;
  overflow:hidden;
  margin-bottom:26px;
  transition:transform .6s var(--ease-premium, ease);
}
.portfolio-placeholder svg { display:block; width:100%; height:100%; }
.portfolio-card:hover .portfolio-placeholder { transform:scale(1.04); }

/* Portfolio illustration micro-animations — one slow, deliberate loop per card */

/* Financial Services — trend line draws itself, endpoint pulses */
.fin-trendline {
  stroke-dasharray:220;
  animation:fin-line-draw 6s ease-in-out infinite;
}
@keyframes fin-line-draw {
  0%   { stroke-dashoffset:220; opacity:0; }
  10%  { opacity:.85; }
  45%  { stroke-dashoffset:0; opacity:.85; }
  75%  { stroke-dashoffset:0; opacity:.85; }
  95%  { opacity:0; }
  100% { stroke-dashoffset:220; opacity:0; }
}
.fin-dot {
  transform-box:fill-box; transform-origin:center;
  animation:fin-dot-pulse 6s ease-in-out infinite;
}
@keyframes fin-dot-pulse {
  0%, 40%  { transform:scale(0); opacity:0; }
  50%      { transform:scale(1); opacity:1; }
  75%      { transform:scale(1.6); opacity:.5; }
  95%,100% { transform:scale(0); opacity:0; }
}

/* Organic Products — growth ring draws closed, leaf sways gently */
.organic-ring {
  stroke-dasharray:428;
  opacity:.45;
  animation:organic-ring-grow 7s ease-in-out infinite;
}
@keyframes organic-ring-grow {
  0%   { stroke-dashoffset:428; opacity:0; }
  10%  { opacity:.45; }
  55%  { stroke-dashoffset:0; opacity:.45; }
  85%  { stroke-dashoffset:0; opacity:.45; }
  100% { stroke-dashoffset:428; opacity:0; }
}
.organic-leaf {
  transform-box:fill-box; transform-origin:50% 100%;
  animation:organic-leaf-sway 5s ease-in-out infinite;
}
@keyframes organic-leaf-sway {
  0%,100% { transform:translate(178px,128px) scale(1.8) rotate(-3deg); }
  50%     { transform:translate(178px,128px) scale(1.8) rotate(3deg); }
}

/* Corporate Communication — typing indicator dots */
.typing-dot {
  transform-box:fill-box; transform-origin:center;
  animation:typing-bounce 2.4s ease-in-out infinite;
}
.td1 { animation-delay:0s; }
.td2 { animation-delay:.3s; }
.td3 { animation-delay:.6s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform:translateY(0); opacity:.5; }
  30%           { transform:translateY(-6px); opacity:1; }
}
.portfolio-card > span {
  display:block; margin:0 28px 10px;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:#E11931; font-weight:700;
}
.portfolio-card h3 { margin:0 28px; font-size:1.2rem; line-height:1.3; letter-spacing:-.02em; }

/* =========================
   CLIENT EXPERIENCE
========================= */
.experience-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.experience-card { background:var(--bg-soft, #F7F8FA); padding:36px 30px; border-radius:22px; }
.experience-card h3 { font-size:1.1rem; margin-bottom:12px; }
.experience-card p { color:#666; line-height:1.75; font-size:.9rem; }

/* Reviews / testimonials section moved to global css/style.css + css/animations.css
   — it's now shared between this page and index.php, so it no longer lives here. */

/* =========================
   ROI / REAL COST OF HIRING IN-HOUSE
========================= */
.roi-section { padding:70px 0 100px; background:var(--bg-soft, #F7F8FA); text-align:center; }
.roi-grid {
  display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:center;
  max-width:980px; margin:0 auto 36px; text-align:left;
}
.roi-table-card, .roi-partner-card {
  background:#fff; border-radius:24px; padding:40px 36px;
  border:1px solid rgba(0,0,0,.06);
}
.roi-table-card { border-top-right-radius:0; border-bottom-right-radius:0; }
.roi-partner-card { background:var(--primary, #134882); color:#fff; border:none; border-top-left-radius:0; border-bottom-left-radius:0; }
.roi-table-card h3, .roi-partner-card h3 { font-size:1.05rem; margin-bottom:20px; letter-spacing:-.01em; }

.roi-vs {
  position:relative; z-index:2;
  width:48px; height:48px; border-radius:50%;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:center;
  margin:0 -24px;
  box-shadow:0 8px 24px rgba(19,72,130,.1);
}
.roi-vs span { font-size:.78rem; font-weight:800; color:var(--primary, #134882); letter-spacing:.05em; }

.roi-table { width:100%; border-collapse:collapse; margin-bottom:22px; }
.roi-table th {
  text-align:left; font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:#999; padding-bottom:10px; border-bottom:1px solid rgba(0,0,0,.08);
}
.roi-table th:last-child, .roi-table td:last-child { text-align:right; }
.roi-table td { padding:11px 0; font-size:.9rem; color:#444; border-bottom:1px solid rgba(0,0,0,.05); }
.roi-table td:last-child { font-weight:600; color:#22293a; white-space:nowrap; }
.roi-total {
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  background:var(--bg-soft, #F7F8FA); border-radius:14px; padding:16px 18px; margin-bottom:14px;
}
.roi-total span { font-size:.86rem; font-weight:700; color:var(--primary, #134882); }
.roi-total strong { font-size:1.15rem; font-weight:800; color:var(--primary, #134882); white-space:nowrap; }
.roi-total strong small { font-size:.6em; font-weight:600; color:#888; }
.roi-note { font-size:.8rem; color:#999; font-style:italic; }

/* Secondary qualitative comparison, folded into the ROI section (v2 consolidation) */
.roi-secondary { max-width:760px; margin:0 auto 40px; text-align:center; }
.roi-secondary-label {
  display:block; font-size:.76rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; color:#999; margin-bottom:20px;
}
.roi-secondary .comparison-table { text-align:left; }
.roi-secondary .comparison-column { padding:28px 30px; }
.roi-secondary .comparison-column h3 { font-size:1rem; margin-bottom:14px; }
.roi-secondary .comparison-column li { font-size:.88rem; }

/* Mid-page CTA prompts (v2 consolidation — gives engaged visitors an exit ramp
   without forcing them to scroll to the very bottom) */
.mid-cta {
  display:flex; flex-direction:column; align-items:center; gap:18px;
  margin-top:48px; text-align:center;
}

.roi-included { list-style:none; padding:0; margin:0 0 28px; display:flex; flex-direction:column; gap:11px; }
.roi-included li { font-size:.92rem; font-weight:500; padding-left:24px; position:relative; color:rgba(255,255,255,.9); }
.roi-included li::before { content:'✓'; position:absolute; left:0; color:#fff; font-weight:800; }
.roi-partner-label { display:block; font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:14px; }
.roi-price { padding-top:18px; border-top:1px solid rgba(255,255,255,.18); }
.roi-price span { display:block; font-size:.82rem; color:rgba(255,255,255,.6); margin-bottom:6px; }
.roi-price strong { font-size:1.8rem; font-weight:800; color:#fff; }
.roi-price strong small { font-size:.5em; font-weight:600; color:rgba(255,255,255,.7); }
.roi-gst { display:block; font-size:.78rem; color:rgba(255,255,255,.55); margin-top:4px; }

.ip-link {
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:.92rem; color:#E11931;
  text-decoration:none; transition:.3s ease;
}
.ip-link:hover { color:var(--primary, #134882); }

/* =========================
   FAQ
========================= */
.faq-section { background:#fff; padding:150px 0 80px; }
.faq-list { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
@media (min-width:992px) {
  .faq-list {
    max-width:1080px;
    display:block;
    column-count:2;
    column-gap:24px;
  }
  .faq-item { break-inside:avoid; margin-bottom:16px; }
}
.faq-item {
  background:var(--bg-soft, #F7F8FA);
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  padding:0 28px;
  transition:border-color .4s ease, background .4s ease, box-shadow .4s ease;
}
.faq-item.open { background:#fff; border-color:rgba(19,72,130,.18); box-shadow:0 16px 40px rgba(19,72,130,.08); }

.faq-question {
  all:unset;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  width:100%; box-sizing:border-box;
  cursor:pointer;
  padding:22px 0; font-size:1.05rem; font-weight:700;
  color:var(--primary, #134882); letter-spacing:-.01em;
  font-family:inherit;
}
.faq-question::after {
  content:'+';
  flex-shrink:0;
  width:30px; height:30px; border-radius:50%;
  background:rgba(19,72,130,.08);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; font-weight:700; color:var(--primary, #134882);
  transition:transform .4s var(--ease-premium, ease), background .35s ease, color .35s ease;
}
.faq-item.open .faq-question::after { transform:rotate(135deg); background:var(--primary, #134882); color:#fff; }

/* Smooth slide — JS sets max-height to scrollHeight on open, 0 on close */
.faq-answer {
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .45s var(--ease-premium, cubic-bezier(.16,1,.3,1)), opacity .35s ease;
}
.faq-item.open .faq-answer { opacity:1; }
.faq-answer-inner { padding:0 0 26px; }
.faq-answer p { color:#555; line-height:1.85; font-size:.96rem; margin-bottom:14px; }
.faq-answer p:last-child { margin-bottom:0; }
.faq-answer ul { list-style:none; padding:0; margin:0 0 14px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.faq-answer li { font-size:.92rem; color:#444; padding-left:20px; position:relative; }
.faq-answer li::before { content:'✓'; position:absolute; left:0; color:var(--primary, #134882); font-weight:700; }

.faq-getting-started {
  max-width:680px; margin:64px auto 0; text-align:center;
  background:linear-gradient(180deg, #fff, var(--bg-soft, #F7F8FA));
  border:1px solid rgba(19,72,130,.12);
  border-radius:32px;
  padding:56px 48px;
  box-shadow:0 30px 70px rgba(19,72,130,.1);
}
.fgs-icon {
  display:flex; align-items:center; justify-content:center;
  width:60px; height:60px; border-radius:50%;
  background:var(--primary, #134882); color:#fff;
  margin:0 auto 24px;
}
.fgs-icon svg { width:28px; height:28px; }
.faq-getting-started h3 { font-size:1.5rem; margin-bottom:32px; letter-spacing:-.02em; color:#1a2030; }

.fgs-steps { display:flex; flex-direction:column; gap:18px; text-align:left; margin-bottom:32px; }
.fgs-step { display:flex; gap:16px; align-items:flex-start; }
.fgs-num {
  flex-shrink:0; width:28px; height:28px; border-radius:50%;
  background:rgba(19,72,130,.1); color:var(--primary, #134882);
  display:flex; align-items:center; justify-content:center;
  font-family:'Manrope',sans-serif; font-weight:800; font-size:.85rem;
}
.fgs-step p { color:#555; line-height:1.7; font-size:.96rem; margin:0; padding-top:3px; }

.faq-getting-started .btn { display:inline-flex; }

/* =========================
   RIGHT-FIT FAQ (pre-pricing)
========================= */
.right-fit-section { background:var(--bg-soft, #F7F8FA); padding:100px 0; }
.right-fit-card {
  max-width:760px; margin:0 auto; text-align:center;
  background:#fff; padding:60px 56px;
  border-radius:32px; border:1px solid rgba(0,0,0,.06);
  box-shadow:0 30px 70px rgba(19,72,130,.08);
}
.right-fit-card h2 { font-size:clamp(1.8rem,3.6vw,2.6rem); line-height:1.2; letter-spacing:-.025em; margin-bottom:24px; }
.right-fit-intro { color:#666; font-size:1rem; margin-bottom:24px; }
.right-fit-list { list-style:none; padding:0; margin:0 0 28px; display:inline-flex; flex-direction:column; gap:14px; text-align:left; }
.right-fit-list li { font-size:.98rem; font-weight:500; color:#22293a; padding-left:30px; position:relative; }
.right-fit-list li::before {
  content:'✓';
  position:absolute; left:0; top:0;
  width:20px; height:20px; border-radius:50%;
  background:rgba(19,72,130,.1); color:var(--primary, #134882);
  font-size:.68rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.right-fit-best-suited {
  font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:#999; margin:8px 0 18px; padding-top:28px; border-top:1px solid rgba(0,0,0,.06);
}
.right-fit-close { font-weight:700; color:var(--primary, #134882); font-size:1.02rem; margin-top:28px; }

/* =========================
   WHAT'S NOT INCLUDED
========================= */
.not-included-section { background:#fff; padding:130px 0; }
.not-included-card {
  max-width:880px; margin:0 auto;
  background:var(--bg-soft, #F7F8FA);
  border:1px solid rgba(0,0,0,.06);
  border-radius:32px;
  padding:52px 56px;
}
.not-included-card h3 {
  font-size:.96rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:#888; margin-bottom:28px; text-align:center;
}
.not-included-list {
  list-style:none; padding:0; margin:0 0 40px;
  display:grid; grid-template-columns:1fr 1fr; gap:14px 28px;
}
.not-included-list li {
  font-size:.93rem; font-weight:500; color:#444;
  padding-left:26px; position:relative; line-height:1.4;
}
.not-included-list li::before {
  content:'✗';
  position:absolute; left:0; top:1px;
  color:#E11931; font-size:.8rem; font-weight:800;
}
.not-included-callout {
  display:flex; gap:18px; align-items:flex-start;
  background:#fff; border-radius:20px; border:1px solid rgba(19,72,130,.12);
  padding:28px 30px;
}
.nic-icon {
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  background:var(--primary, #134882); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Manrope',sans-serif; font-weight:800; font-size:1.1rem;
}
.not-included-callout h4 { font-size:1.02rem; margin-bottom:8px; letter-spacing:-.01em; }
.not-included-callout p { font-size:.92rem; color:#666; line-height:1.7; margin:0; }

/* "Not for" note under Who It's For chips */
.not-for-note {
  text-align:center; max-width:560px; margin:32px auto 0;
  font-size:.9rem; font-style:italic; color:#888; line-height:1.7;
}

/* =========================
   PRICING
========================= */
.investment-section { background:#fff; }
.pricing-card {
  max-width:760px; margin:80px auto 0; padding:64px;
  border-radius:32px; background:#fff;
  border:1.5px solid var(--primary, #134882);
  box-shadow:0 40px 90px rgba(19,72,130,.12);
  position:relative; text-align:center;
}
.pricing-card::before {
  content:'Best Value';
  position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  background:#E11931; color:#fff;
  font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:8px 20px; border-radius:100px;
}
.pricing-label { display:block; color:var(--primary, #134882); font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.16em; margin-bottom:20px; }
.pricing-card h3 { font-size:1.5rem; line-height:1.3; max-width:30ch; margin:0 auto 24px; letter-spacing:-.02em; }
.price { font-size:4.2rem; font-weight:800; margin:8px 0; font-family:'Manrope',sans-serif; letter-spacing:-.03em; color:var(--primary, #134882); }
.price span { font-size:1.1rem; font-weight:600; color:#888; }
.gst { color:#888; font-size:.92rem; margin-bottom:36px; }
.pricing-features { list-style:none; padding:0; margin:0 0 26px; display:grid; grid-template-columns:1fr 1fr; gap:14px; text-align:left; max-width:560px; margin-left:auto; margin-right:auto; }
.pricing-features li { font-size:.95rem; color:#333; font-weight:500; }
.pricing-note { font-size:.82rem; color:#999; font-style:italic; }

/* =========================
   FINAL CTA
========================= */
.final-cta-section { padding:170px 0; text-align:center; background:var(--bg-soft, #F7F8FA); }
.final-cta-section h2 { font-size:clamp(2.1rem,4.5vw,3.4rem); line-height:1.15; margin:18px auto 22px; max-width:16ch; letter-spacing:-.025em; }
.final-cta-section p { max-width:560px; margin:0 auto 40px; line-height:1.85; color:#666; font-size:1.05rem; }
.final-cta-section .hero-buttons { justify-content:center; }

/* =========================
   RESPONSIVE
========================= */
@media (max-width:991px) {
  .services-hero-grid, .problem-grid, .value-grid, .service-categories-grid,
  .comparison-table, .process-grid, .philosophy-grid, .replace-grid,
  .growth-cards, .expectation-grid, .portfolio-grid, .experience-grid,
  .pricing-features, .faq-answer ul, .not-included-list {
    grid-template-columns:1fr;
  }
  .roi-grid { grid-template-columns:1fr; }
  .roi-table-card, .roi-partner-card { border-radius:24px; }
  .roi-vs { margin:-24px auto; }
  .not-included-card { padding:36px 28px; }
  .not-included-callout { flex-direction:column; }
  .right-fit-card { padding:44px 28px; }
  .services-hero { padding:150px 0 80px; }
  .services-hero-visual { justify-content:flex-start; }
  .services-hero-content h1 { font-size:3.4rem; max-width:100%; }
  .section-heading { margin-bottom:50px; }
  .pricing-card { padding:40px 28px; }
  .price { font-size:3.2rem; }
  .service-category-card ul { grid-template-columns:1fr; }
}