/* =========================================================
   SOCIAL MEDIA DESIGN — page-specific styles
   Loaded AFTER design-services.css, which provides the shared
   design system (container, section-heading, cards, FAQ, ROI
   table, buttons). Only components that do not exist in the
   shared system live here.

   Used by: Social_Media_Design_Monthly.php
   Do not couple this file to Design_Services_Monthly.php.
   ========================================================= */

/* =========================
   WHAT WE CREATE — 6 cards
   Reuses .value-card visuals; only the 3-col grid at this
   breakpoint is defined here.
========================= */
.create-section { background:var(--bg-soft, #F7F8FA); padding:150px 0; }
.create-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.create-card {
  background:#fff; padding:40px; border-radius:24px;
  border:1px solid rgba(0,0,0,.06);
  transition:transform .4s var(--ease-premium, ease), box-shadow .4s ease, border-color .3s ease;
}
.create-card:hover { transform:translateY(-6px); box-shadow:0 24px 50px rgba(19,72,130,.08); }
.create-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:background .35s ease, color .35s ease, transform .45s var(--ease-premium, ease);
}
.create-icon svg { width:24px; height:24px; }
.create-card:hover .create-icon { background:var(--primary, #134882); color:#fff; transform:scale(1.08) rotate(-4deg); }
.create-card h3 { font-size:1.25rem; margin-bottom:14px; letter-spacing:-.02em; }
.create-card p { color:#666; line-height:1.8; }

/* =========================
   PRICING — three plans
   The shared system only has a single .pricing-card, so the
   tiered layout is defined here.
========================= */
.plans-section { background:#fff; padding:150px 0; }
.plans-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:26px; align-items:stretch;
  max-width:1160px; margin:0 auto;
}
.plan-card {
  display:flex; flex-direction:column;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:28px; padding:44px 36px;
  position:relative;
  transition:transform .4s var(--ease-premium, ease), box-shadow .4s ease, border-color .3s ease;
}
.plan-card:hover { transform:translateY(-6px); box-shadow:0 24px 50px rgba(19,72,130,.08); }

/* Featured plan — brand blue #073E81 per brief */
.plan-card.featured {
  background:#073E81; border-color:#073E81; color:#fff;
  box-shadow:0 40px 90px rgba(7,62,129,.18);
}
.plan-card.featured:hover { box-shadow:0 46px 100px rgba(7,62,129,.24); }
.plan-badge {
  position:absolute; top:-15px; left:50%; transform:translateX(-50%);
  background:#E11931; color:#fff;
  font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:8px 18px; border-radius:100px; white-space:nowrap;
}
.plan-name {
  display:block; font-size:.82rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em;
  color:var(--primary, #134882); margin-bottom:18px;
}
.plan-card.featured .plan-name { color:rgba(255,255,255,.75); }

.plan-price {
  font-family:'Manrope',sans-serif; font-weight:800;
  font-size:2.6rem; letter-spacing:-.03em; line-height:1;
  color:var(--primary, #134882); margin-bottom:6px;
}
.plan-card.featured .plan-price { color:#fff; }
.plan-price span { font-size:.95rem; font-weight:600; color:#888; letter-spacing:0; }
.plan-card.featured .plan-price span { color:rgba(255,255,255,.7); }
.plan-gst { font-size:.85rem; color:#999; margin-bottom:18px; }
.plan-card.featured .plan-gst { color:rgba(255,255,255,.6); }

.plan-for {
  font-size:.95rem; line-height:1.7; color:#666;
  padding-bottom:26px; margin-bottom:26px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.plan-card.featured .plan-for { color:rgba(255,255,255,.8); border-bottom-color:rgba(255,255,255,.18); }

.plan-includes {
  list-style:none; padding:0; margin:0 0 32px;
  display:flex; flex-direction:column; gap:13px;
  flex-grow:1;
}
.plan-includes li {
  font-size:.94rem; color:#444; line-height:1.5;
  padding-left:26px; position:relative;
}
.plan-includes li::before {
  content:'✓'; position:absolute; left:0; top:0;
  color:var(--primary, #134882); font-weight:700; font-size:.85rem;
}
.plan-card.featured .plan-includes li { color:rgba(255,255,255,.9); }
.plan-card.featured .plan-includes li::before { color:#fff; }

/* Plan button — matches shared .btn sizing, full width inside the card */
.plan-btn {
  display:block; text-align:center;
  padding:15px 24px; border-radius:14px;
  font-size:.95rem; font-weight:700;
  background:var(--primary, #134882); color:#fff;
  transition:transform .45s var(--ease-premium, ease), box-shadow .45s ease, background .3s ease, color .3s ease;
}
.plan-btn:hover { transform:translateY(-3px); box-shadow:0 18px 38px rgba(19,72,130,.26); }
.plan-card.featured .plan-btn { background:#fff; color:#073E81; }
.plan-card.featured .plan-btn:hover { box-shadow:0 18px 38px rgba(0,0,0,.28); }

.plans-note {
  text-align:center; font-size:.88rem; color:#999;
  margin-top:36px; font-style:italic;
}

/* =========================
   CHOOSE THE RIGHT SERVICE
   Positions this page against the Monthly Creative Partnership
   so visitors pick on fit, not price.
========================= */
.choose-section { background:var(--bg-soft, #F7F8FA); padding:130px 0; }
.choose-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:28px;
  max-width:1000px; margin:0 auto;
}
.choose-card {
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:28px; padding:46px 40px;
  display:flex; flex-direction:column;
}
.choose-card.current { border-color:rgba(7,62,129,.35); box-shadow:0 24px 60px rgba(7,62,129,.08); }
.choose-tag {
  display:inline-block; align-self:flex-start;
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:7px 14px; border-radius:100px; margin-bottom:20px;
  background:rgba(19,72,130,.08); color:var(--primary, #134882);
}
.choose-card.current .choose-tag { background:#073E81; color:#fff; }
.choose-card h3 { font-size:1.35rem; margin-bottom:14px; letter-spacing:-.02em; }
.choose-card p { color:#666; line-height:1.85; font-size:.98rem; flex-grow:1; margin-bottom:26px; }
.choose-link {
  font-weight:700; font-size:.95rem; color:var(--primary, #134882);
  display:inline-flex; align-items:center; gap:8px;
  transition:gap .3s ease;
}
.choose-link:hover { gap:14px; }
.choose-current-note { font-weight:700; font-size:.95rem; color:#999; }

/* =========================
   INCLUDED / NOT INCLUDED — two columns
========================= */
.scope-section { background:#fff; padding:130px 0; }
.scope-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; max-width:980px; margin:0 auto; }
.scope-card {
  background:var(--bg-soft, #F7F8FA);
  border:1px solid rgba(0,0,0,.06);
  border-radius:28px; padding:46px 40px;
}
.scope-card h3 {
  font-size:.96rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:#888; margin-bottom:26px;
}
.scope-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.scope-list li {
  font-size:.95rem; font-weight:500; color:#444;
  padding-left:26px; position:relative; line-height:1.45;
}
.scope-list.yes li::before {
  content:'✓'; position:absolute; left:0; top:0;
  color:var(--primary, #134882); font-weight:800; font-size:.85rem;
}
.scope-list.no li::before {
  content:'✗'; position:absolute; left:0; top:1px;
  color:#E11931; font-weight:800; font-size:.8rem;
}
.scope-note {
  max-width:980px; margin:32px auto 0;
  font-size:.9rem; color:#888; line-height:1.8; text-align:center;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:1024px) {
  .plans-grid { grid-template-columns:1fr; max-width:560px; gap:32px; }
  .plan-card.featured { order:-1; }
  .create-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px) {
  .choose-grid, .scope-grid { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  .create-grid { grid-template-columns:1fr; }
  .create-section, .plans-section { padding:90px 0; }
  .choose-section, .scope-section { padding:80px 0; }
  .plan-card { padding:38px 28px; }
  .choose-card, .scope-card { padding:36px 28px; }
}

/* =========================================================
   V2 ADDITIONS — show the work + make plans scannable
   ========================================================= */

/* =========================
   SAMPLE WORK
   A page selling visual design should show visual design.
========================= */
.work-sample-section { background:var(--bg-soft, #F7F8FA); padding:150px 0; }
.work-sample-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:34px;
  max-width:1120px; margin:0 auto; align-items:start;
}
.work-sample-card {
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:28px; padding:26px; overflow:hidden;
  transition:transform .4s var(--ease-premium, ease), box-shadow .4s ease;
}
.work-sample-card:hover { transform:translateY(-6px); box-shadow:0 24px 50px rgba(19,72,130,.09); }
.work-sample-card img {
  width:100%; height:auto; display:block;
  border-radius:16px; border:1px solid rgba(0,0,0,.05);
}
.work-sample-head { display:flex; align-items:baseline; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.work-sample-head h3 { font-size:1.15rem; letter-spacing:-.02em; }
.work-sample-head span {
  font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--primary, #134882); background:rgba(19,72,130,.08);
  padding:5px 11px; border-radius:100px;
}
.work-sample-card > p { color:#666; font-size:.93rem; line-height:1.7; margin-top:18px; }
.work-sample-note {
  text-align:center; font-size:.88rem; color:#999;
  margin-top:34px; font-style:italic;
}

/* =========================
   PLAN COMPARISON TABLE
   Three cards with different item counts are hard to compare.
   This makes the difference readable in seconds.
========================= */
.compare-plans-section { background:#fff; padding:0 0 150px; }
.compare-wrap { max-width:1000px; margin:0 auto; overflow-x:auto; }
.compare-plans {
  width:100%; border-collapse:collapse; min-width:640px;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:24px; overflow:hidden;
}
.compare-plans th, .compare-plans td {
  padding:17px 20px; text-align:center;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.compare-plans thead th {
  background:var(--bg-soft, #F7F8FA);
  font-size:.82rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--primary, #134882);
}
.compare-plans thead th.feature-col { text-align:left; }
.compare-plans thead th.hi { background:#073E81; color:#fff; position:relative; }
.compare-plans thead th small { display:block; font-size:.72rem; font-weight:600; letter-spacing:0; text-transform:none; margin-top:5px; opacity:.75; }
.compare-plans tbody td { font-size:.94rem; color:#444; }
.compare-plans tbody td.feature-col {
  text-align:left; font-weight:600; color:#22293a;
}
.compare-plans tbody td.hi { background:rgba(7,62,129,.04); font-weight:700; color:#073E81; }
.compare-plans tbody tr:last-child td { border-bottom:none; }
.compare-plans .yes { color:var(--primary, #134882); font-weight:800; }
.compare-plans .no  { color:#c9ced8; font-weight:700; }
.compare-note { text-align:center; font-size:.86rem; color:#999; margin-top:22px; }

/* =========================
   AT A GLANCE — quick facts strip
========================= */
.glance-strip {
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  max-width:1000px; margin:0 auto;
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:22px; overflow:hidden;
}
.glance-item { padding:30px 24px; text-align:center; border-right:1px solid rgba(0,0,0,.06); }
.glance-item:last-child { border-right:none; }
.glance-num {
  font-family:'Manrope',sans-serif; font-weight:800; font-size:1.7rem;
  color:var(--primary, #134882); letter-spacing:-.02em; line-height:1;
}
.glance-label { font-size:.8rem; color:#777; margin-top:9px; line-height:1.5; }

@media (max-width:860px) {
  .work-sample-grid { grid-template-columns:1fr; gap:26px; }
  .glance-strip { grid-template-columns:1fr 1fr; }
  .glance-item:nth-child(2) { border-right:none; }
  .glance-item:nth-child(-n+2) { border-bottom:1px solid rgba(0,0,0,.06); }
}
@media (max-width:720px) {
  .work-sample-section { padding:90px 0; }
  .compare-plans-section { padding:0 0 90px; }
  .work-sample-card { padding:18px; }
}

/* Reels showcase — copy left, phones right (balances the two square feeds above) */
.reels-showcase {
  display:grid; grid-template-columns:.85fr 1.15fr; gap:40px; align-items:center;
  max-width:1120px; margin:34px auto 0;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:28px; padding:44px 46px;
}
.reels-copy h3 { font-size:1.35rem; letter-spacing:-.02em; margin-bottom:14px; }
.reels-copy p { color:#666; font-size:.98rem; line-height:1.85; }
.reels-visual img { width:100%; height:auto; display:block; border-radius:16px; }

@media (max-width:860px) {
  .reels-showcase { grid-template-columns:1fr; gap:28px; padding:34px 26px; text-align:center; }
}

/* Equalise the two feed cards regardless of caption length */
.work-sample-grid { align-items:stretch; }
.work-sample-card { display:flex; flex-direction:column; }
.work-sample-card > p { margin-top:auto; padding-top:18px; }

/* =========================
   FEATURED FEED — one strong sample, given room
   Replaces the two-card grid: better to show one excellent
   example than two where one is weak.
========================= */
.feed-feature {
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
  max-width:1120px; margin:0 auto;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:32px; padding:46px;
}
.feed-feature-visual img {
  width:100%; height:auto; display:block;
  border-radius:20px; border:1px solid rgba(0,0,0,.05);
  box-shadow:0 24px 60px rgba(19,72,130,.10);
}
.feed-feature-tag {
  display:inline-block; font-size:.7rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--primary, #134882); background:rgba(19,72,130,.08);
  padding:6px 13px; border-radius:100px; margin-bottom:18px;
}
.feed-feature-copy h3 { font-size:1.5rem; line-height:1.3; letter-spacing:-.02em; margin-bottom:14px; }
.feed-feature-copy > p { color:#666; font-size:1rem; line-height:1.85; margin-bottom:24px; }
.feed-feature-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:13px; }
.feed-feature-list li {
  font-size:.95rem; color:#444; line-height:1.55;
  padding-left:28px; position:relative;
}
.feed-feature-list li::before {
  content:'✓'; position:absolute; left:0; top:0;
  color:var(--primary, #134882); font-weight:800; font-size:.86rem;
}

@media (max-width:900px) {
  .feed-feature { grid-template-columns:1fr; gap:32px; padding:32px 26px; }
}

/* =========================
   SAMPLE WORK v3 — real template sets (landscape crops)
   Supersedes .feed-feature / .reels-showcase above.
========================= */
.sample-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:30px;
  max-width:1120px; margin:0 auto 30px;
}
.sample-tile {
  margin:0; background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:24px; padding:18px; overflow:hidden;
  transition:transform .4s var(--ease-premium, ease), box-shadow .4s ease;
}
.sample-tile:hover { transform:translateY(-6px); box-shadow:0 26px 56px rgba(19,72,130,.10); }
.sample-tile img {
  width:100%; height:auto; display:block;
  border-radius:14px; border:1px solid rgba(0,0,0,.05);
}
.sample-tile figcaption {
  font-size:.88rem; color:#777; line-height:1.5;
  padding:16px 6px 4px;
}
.sample-tile figcaption strong {
  display:block; color:#22293a; font-size:.98rem;
  font-weight:700; letter-spacing:-.01em; margin-bottom:3px;
}

/* Stories band — copy left, ultra-wide story set right */
.sample-stories {
  display:grid; grid-template-columns:.8fr 1.2fr; gap:40px; align-items:center;
  max-width:1120px; margin:0 auto;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:28px; padding:40px 42px;
}
.sample-stories-copy h3 { font-size:1.45rem; line-height:1.3; letter-spacing:-.02em; margin-bottom:12px; }
.sample-stories-copy p { color:#666; font-size:.98rem; line-height:1.85; }
.sample-stories-visual { margin:0; }
.sample-stories-visual img {
  width:100%; height:auto; display:block;
  border-radius:16px; border:1px solid rgba(0,0,0,.05);
}

@media (max-width:900px) {
  .sample-grid { grid-template-columns:1fr; gap:24px; }
  .sample-stories { grid-template-columns:1fr; gap:26px; padding:30px 24px; text-align:center; }
}

/* =========================
   SAMPLE GALLERY — 3x3 of real template sets
   All tiles pre-cropped to 4:3 so the grid stays even.
========================= */
.sample-gallery {
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  max-width:1120px; margin:0 auto 30px;
}
.gal-tile {
  margin:0; border-radius:16px; overflow:hidden;
  border:1px solid rgba(0,0,0,.06); background:#fff;
  line-height:0;
  transition:transform .4s var(--ease-premium, ease), box-shadow .4s ease;
}
.gal-tile img { width:100%; height:auto; display:block; }
.gal-tile:hover { transform:translateY(-5px); box-shadow:0 22px 46px rgba(19,72,130,.13); }

@media (max-width:860px) { .sample-gallery { grid-template-columns:repeat(2,1fr); gap:14px; } }
@media (max-width:520px) { .sample-gallery { grid-template-columns:1fr; } }

/* =========================
   CLIENT WORK — full-width feature
   Real campaign work, shown large enough to actually read.
========================= */
.client-work {
  margin:0 auto 30px; max-width:1120px;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:28px; padding:22px 22px 8px; overflow:hidden;
}
.client-work img {
  width:100%; height:auto; display:block;
  border-radius:18px; border:1px solid rgba(0,0,0,.05);
}
.client-work figcaption {
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:22px 8px 18px;
}
.cw-tag {
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:var(--primary, #134882);
  padding:6px 12px; border-radius:100px;
}
.client-work figcaption strong {
  font-family:'Manrope',sans-serif; font-size:1.1rem;
  font-weight:800; letter-spacing:-.02em; color:#22293a;
}
.cw-desc { flex:1 1 320px; font-size:.94rem; color:#666; line-height:1.7; }

@media (max-width:720px) {
  .client-work { padding:14px 14px 4px; border-radius:20px; }
  .client-work figcaption { padding:18px 4px 14px; }
}

/* Illustration note, scoped to the stock stories sample only */
.stories-note { font-size:.78rem; color:#a0a6b0; font-style:italic; padding-top:10px; text-align:right; }
@media (max-width:900px) { .stories-note { text-align:center; } }

/* Two stacked campaign strips inside the client-work feature */
.client-work img + img { margin-top:16px; }

/* =========================================================
   V3 — PURE WHITE CANVAS + VIBRANCY
   Grey section fills replaced with white. Definition now comes
   from borders, coloured accents and one bold blue moment
   rather than alternating grey.
   ========================================================= */

/* ---- 1. Pure white everywhere ---- */
.services-hero,
.problem-section,
.create-section,
.work-sample-section,
.plans-section,
.compare-plans-section,
.choose-section,
.roi-section,
.scope-section,
.faq-section,
.reviews-section,
.glance-section,
.final-cta-section { background:#fff !important; }

/* Cards that relied on white-on-grey now need their own edge */
.problem-card,
.create-card,
.scope-card,
.choose-card,
.faq-item,
.roi-table-card { background:#fff; border-color:rgba(7,62,129,.10); }
.faq-item.open { border-color:rgba(7,62,129,.28); }

/* ---- 2. Hero trust line ---- */
.hero-trust { display:flex; align-items:center; gap:11px; margin-top:24px; flex-wrap:wrap; }
.ht-stars { color:#FFB400; font-size:1rem; letter-spacing:2px; }
.ht-text { font-size:.88rem; color:#777; }
.ht-text strong { color:var(--primary, #134882); font-weight:800; }

/* ---- 3. Glance strip, now its own band under the hero ---- */
.glance-section { padding:0 0 90px; }
.glance-strip {
  border:none; border-radius:24px; overflow:hidden;
  background:linear-gradient(120deg, #073E81 0%, #0d4f9e 55%, #0098ff 100%);
  box-shadow:0 26px 60px rgba(7,62,129,.20);
}
.glance-item { border-right:1px solid rgba(255,255,255,.16); padding:34px 24px; }
.glance-item:last-child { border-right:none; }
.glance-num { color:#fff; font-size:1.9rem; }
.glance-label { color:rgba(255,255,255,.72); }

/* ---- 4. Vibrancy: colour the section labels and icons ---- */
.section-label { color:#FF0033; }
.create-icon {
  background:linear-gradient(135deg, rgba(0,152,255,.12), rgba(7,62,129,.10));
  color:#073E81;
}
.create-card:hover .create-icon {
  background:linear-gradient(135deg, #0098ff, #073E81); color:#fff;
}
.create-card { border-color:rgba(7,62,129,.10); }
.create-card:hover { border-color:rgba(0,152,255,.35); box-shadow:0 24px 50px rgba(0,152,255,.14); }

/* Problem cards get a red top rule — the "cost of doing nothing" */
.problem-card { position:relative; overflow:hidden; }
.problem-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, #FF0033, rgba(255,0,51,.15));
}

/* Plan cards — accent rule on the two non-featured tiers */
.plan-card:not(.featured) { border-color:rgba(7,62,129,.12); }
.plan-card:not(.featured):hover { border-color:rgba(0,152,255,.4); box-shadow:0 24px 50px rgba(0,152,255,.14); }

/* ---- 5. Mid-page CTA band ---- */
.mid-cta {
  display:flex; align-items:center; justify-content:space-between;
  gap:28px; flex-wrap:wrap;
  max-width:1000px; margin:56px auto 0;
  padding:34px 40px; border-radius:24px;
  background:linear-gradient(120deg, rgba(7,62,129,.05), rgba(0,152,255,.08));
  border:1px solid rgba(7,62,129,.12);
}
.mid-cta-copy h3 { font-size:1.25rem; letter-spacing:-.02em; margin-bottom:6px; }
.mid-cta-copy p { color:#666; font-size:.96rem; line-height:1.7; }
.mid-cta .btn { flex-shrink:0; }

/* ---- 6. Reviews, now high on the page ---- */
.reviews-section { padding-top:40px; }

@media (max-width:720px) {
  .mid-cta { flex-direction:column; align-items:stretch; text-align:center; padding:30px 24px; }
  .mid-cta .btn { justify-content:center; }
  .glance-section { padding:0 0 60px; }
  .glance-item { border-right:none; border-bottom:1px solid rgba(255,255,255,.16); }
  .glance-item:last-child { border-bottom:none; }
}

/* =========================================================
   LANDING-PAGE CHROME
   Minimal header (logo + CTA) and footer (contact only), so the
   only route off this page is getting in touch.
   ========================================================= */
.nav-landing { justify-content:space-between; }
.nav-landing .nav-logo { display:inline-flex; align-items:center; cursor:default; }
.nav-links-landing { display:flex !important; align-items:center; gap:0; }
.nav-links-landing .nav-cta { margin:0; }

/* Footer — two columns instead of four */
.footer-inner-landing {
  display:grid; grid-template-columns:1.4fr .6fr; gap:60px; align-items:start;
}
.fl-brand img { height:44px; margin-bottom:18px; filter:brightness(0) invert(1); opacity:.92; }
.fl-brand .f-brand-about { max-width:50ch; }
.fl-contact h4 { margin-bottom:14px; }

@media (max-width:760px) {
  .footer-inner-landing { grid-template-columns:1fr; gap:34px; }
}

/* =========================================================
   INLINE ENQUIRY FORM + WHATSAPP
   The enquiry is captured on this page. Form styling mirrors
   contact.css so both forms feel identical.
   ========================================================= */
.enquire-section { background:#fff !important; padding:0 0 140px; }
.enquire-card {
  max-width:900px; margin:0 auto;
  background:#fff; border:1px solid rgba(7,62,129,.14);
  border-radius:32px; padding:56px 52px;
  box-shadow:0 34px 80px rgba(7,62,129,.10);
}
.enquire-head { text-align:center; margin-bottom:38px; }
.enquire-head h2 { font-size:clamp(1.7rem,3.2vw,2.4rem); line-height:1.2; letter-spacing:-.025em; margin:12px 0 12px; }
.enquire-head p { color:#666; font-size:1rem; line-height:1.8; max-width:46ch; margin:0 auto; }

/* fields */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.form-field { display:flex; flex-direction:column; }
.form-field.full { grid-column:1 / -1; }
.form-field label { font-size:.84rem; font-weight:700; color:var(--primary, #134882); margin-bottom:9px; }
.form-field .req { color:#E11931; }
.form-field input,
.form-field select,
.form-field textarea {
  font-family:'Inter',sans-serif; font-size:.98rem; color:#22293a;
  background:var(--bg-soft, #F7F8FA);
  border:1.5px solid rgba(7,62,129,.12); border-radius:14px;
  padding:15px 17px; width:100%;
  transition:border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.form-field textarea { resize:vertical; min-height:120px; line-height:1.7; }
.form-field input::placeholder, .form-field textarea::placeholder { color:#a3a9b5; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline:none; background:#fff; border-color:var(--primary, #134882);
  box-shadow:0 0 0 4px rgba(19,72,130,.10);
}
.form-field input.has-error, .form-field select.has-error, .form-field textarea.has-error {
  border-color:#E11931; background:#fff;
}
.field-error { font-size:.82rem; color:#E11931; margin-top:7px; font-weight:500; }
.form-field select {
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:46px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23134882' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:18px;
}
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }

.enquire-actions { display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.enquire-actions .btn { flex:1 1 220px; justify-content:center; }
.enquire-note { font-size:.84rem; color:#999; margin-top:16px; text-align:center; }

/* alerts */
.form-alert { border-radius:18px; padding:22px 24px; margin-bottom:28px; display:flex; gap:15px; align-items:flex-start; }
.form-alert-icon { flex-shrink:0; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.95rem; font-weight:800; }
.form-alert h3 { font-size:1.02rem; margin-bottom:5px; letter-spacing:-.01em; }
.form-alert p { font-size:.93rem; line-height:1.7; margin:0; }
.form-alert a { font-weight:700; text-decoration:underline; }
.form-alert.success { background:rgba(19,72,130,.06); border:1px solid rgba(19,72,130,.18); }
.form-alert.success .form-alert-icon { background:var(--primary, #134882); color:#fff; }
.form-alert.success h3, .form-alert.success a { color:var(--primary, #134882); }
.form-alert.success p { color:#4a5568; }
.form-alert.error { background:rgba(225,25,49,.05); border:1px solid rgba(225,25,49,.2); }
.form-alert.error .form-alert-icon { background:#E11931; color:#fff; }
.form-alert.error h3, .form-alert.error a { color:#E11931; }
.form-alert.error p { color:#4a5568; }

/* ---- WhatsApp button (inline) ---- */
.btn-whatsapp {
  background:#25D366; color:#fff;
  display:inline-flex; align-items:center; gap:10px;
}
.btn-whatsapp svg { width:20px; height:20px; flex-shrink:0; }
.btn-whatsapp:hover { background:#1da851; transform:translateY(-3px); box-shadow:0 18px 38px rgba(37,211,102,.32); }


@media (max-width:720px) {
  .enquire-card { padding:36px 24px; border-radius:24px; }
  .enquire-section { padding:0 0 100px; }
  .form-grid { grid-template-columns:1fr; gap:18px; }
  .enquire-actions { flex-direction:column; }
  .enquire-actions .btn { flex:1 1 auto; }
}

/* =========================================================
   FIX — horizontal overflow on small screens
   design-services.css sets `white-space:nowrap` on the ROI
   table's cost column. On narrow viewports the price ranges
   cannot wrap, forcing the card wider than the screen (450px
   inside a 375px viewport) and making the whole page scroll
   sideways — which also knocks position:fixed elements out of
   place. Scoped here so the shared stylesheet is untouched.
   NOTE: the same bug affects Design_Services_Monthly.php.
   ========================================================= */
@media (max-width:820px) {
  .roi-table td:last-child,
  .roi-total strong { white-space:normal; }
  .roi-table { font-size:.86rem; }
  .roi-table td { padding:10px 0; }
  .roi-table-card,
  .roi-partner-card { padding:30px 22px; min-width:0; }
  .roi-grid { min-width:0; }
}
/* Belt and braces: nothing on this page may scroll the page sideways */
html, body { overflow-x:hidden; }

/* =========================================================
   CLIENT WORK GRID — six real campaigns
   Supersedes the single .client-work feature.
   ========================================================= */
.work-stack {
  display:grid; grid-template-columns:1fr 1fr; gap:26px;
  max-width:1120px; margin:0 auto 30px;
}
.work-item {
  margin:0; background:#fff; border:1px solid rgba(7,62,129,.10);
  border-radius:22px; padding:16px; overflow:hidden;
  transition:transform .4s var(--ease-premium, ease), box-shadow .4s ease, border-color .3s ease;
}
.work-item:hover { transform:translateY(-6px); box-shadow:0 26px 56px rgba(7,62,129,.12); border-color:rgba(0,152,255,.32); }
.work-item img { width:100%; height:auto; display:block; border-radius:14px; border:1px solid rgba(0,0,0,.05); }
.work-item figcaption { display:flex; align-items:center; gap:11px; padding:16px 6px 4px; flex-wrap:wrap; }
.work-item .cw-tag {
  font-size:.64rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:#fff; background:var(--primary, #134882); padding:5px 11px; border-radius:100px;
}
.work-item figcaption strong {
  font-family:'Manrope',sans-serif; font-size:1rem; font-weight:800;
  letter-spacing:-.02em; color:#22293a;
}

/* =========================================================
   LANDING HEADER — on-page anchor nav
   ========================================================= */
.nav-links-landing { display:flex !important; align-items:center; gap:30px; }
.lp-anchor {
  font-size:.92rem; font-weight:600; color:#4a5568;
  position:relative; white-space:nowrap;
  transition:color .3s ease;
}
.lp-anchor::after {
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--primary, #134882); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease-premium, ease);
}
.lp-anchor:hover { color:var(--primary, #134882); }
.lp-anchor:hover::after,
.lp-anchor.is-current::after { transform:scaleX(1); }
.lp-anchor.is-current { color:var(--primary, #134882); }
.nav-links-landing .nav-cta { margin-left:6px; }

/* Anchors clear the fixed header when jumped to */
#create, #samples, #plans, #faq, #enquire { scroll-margin-top:110px; }
html { scroll-behavior:smooth; }

@media (max-width:1024px) { .nav-links-landing { gap:20px; } .lp-anchor { font-size:.86rem; } }

/* Mobile: the landing nav collapses into the same hamburger dropdown as the
   main site nav. Because .nav-links-landing also carries the .nav-links class,
   the dropdown rules in responsive.css already apply — we just need to show
   the anchors inside that dropdown (they used to be hidden) and give them the
   dropdown's stacked styling. The hamburger button lives in header-landing.php
   and is wired by the existing toggle handler in main.js. */
@media (max-width:880px) {
  .nav-links-landing { gap:0 !important; align-items:stretch !important; }
  .nav-links-landing .lp-anchor {
    display:block; font-size:15px; padding:13px 16px; border-radius:12px;
  }
  .nav-links-landing .lp-anchor::after { display:none; }
  .nav-links-landing .lp-anchor:hover,
  .nav-links-landing .lp-anchor.is-current { background:rgba(7,62,129,.05); color:var(--primary, #134882); }
}
@media (max-width:900px)  { .work-stack { grid-template-columns:1fr; gap:20px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

/* =========================================================
   WORK GALLERY — clickable tiles
   ========================================================= */
.work-open {
  all:unset; display:block; position:relative; cursor:zoom-in;
  border-radius:14px; overflow:hidden; width:100%;
}
.work-open:focus-visible { outline:3px solid var(--primary, #134882); outline-offset:3px; }
.work-open img { transition:transform .5s var(--ease-premium, ease); }
.work-item:hover .work-open img { transform:scale(1.03); }

.work-zoom-hint {
  position:absolute; right:12px; bottom:12px;
  width:38px; height:38px; border-radius:50%;
  background:rgba(7,62,129,.88); color:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(6px);
  transition:opacity .35s ease, transform .35s var(--ease-premium, ease);
  pointer-events:none;
}
.work-zoom-hint svg { width:18px; height:18px; }
.work-item:hover .work-zoom-hint { opacity:1; transform:translateY(0); }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lb {
  position:fixed; inset:0; z-index:200;
  background:rgba(6,16,32,.94);
  display:flex; align-items:center; justify-content:center;
  padding:70px 78px 96px;
  animation:lb-in .28s ease;
}
.lb[hidden] { display:none; }
@keyframes lb-in { from { opacity:0; } to { opacity:1; } }

.lb-stage {
  max-width:100%; max-height:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.lb-stage img {
  max-width:100%; max-height:calc(100vh - 166px);
  width:auto; height:auto; display:block;
  border-radius:10px; cursor:zoom-in;
  box-shadow:0 30px 90px rgba(0,0,0,.55);
  transition:transform .35s var(--ease-premium, ease);
}
.lb-stage.is-zoomed img { transform:scale(2.2); cursor:zoom-out; }

.lb-btn {
  all:unset; position:absolute; z-index:2;
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.10); color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .3s ease, transform .3s ease;
}
.lb-btn svg { width:22px; height:22px; }
.lb-btn:hover { background:rgba(255,255,255,.22); transform:scale(1.06); }
.lb-btn:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.lb-close { top:22px; right:24px; }
.lb-prev  { left:22px;  top:50%; margin-top:-23px; }
.lb-next  { right:22px; top:50%; margin-top:-23px; }

.lb-bar {
  position:absolute; left:0; right:0; bottom:0;
  padding:20px 30px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  color:#fff; flex-wrap:wrap;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent);
}
.lb-meta { display:flex; align-items:center; gap:12px; }
.lb-tag {
  font-size:.62rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  background:var(--primary, #134882); padding:5px 11px; border-radius:100px;
}
.lb-meta strong { font-family:'Manrope',sans-serif; font-size:1rem; font-weight:800; letter-spacing:-.02em; }
.lb-hint  { font-size:.8rem; color:rgba(255,255,255,.55); }
.lb-count { font-size:.85rem; font-weight:700; color:rgba(255,255,255,.75); }

@media (max-width:820px) {
  .lb { padding:64px 14px 92px; }
  .lb-stage img { max-height:calc(100vh - 158px); }
  .lb-stage.is-zoomed img { transform:scale(1.9); }
  .lb-prev { left:10px; } .lb-next { right:10px; }
  .lb-btn { width:40px; height:40px; }
  .lb-hint { display:none; }
  .work-zoom-hint { opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce) {
  .lb { animation:none; }
  .lb-stage img, .work-open img, .work-zoom-hint { transition:none; }
}

/* Secondary entry-price line under the ROI comparison price */
.roi-from {
  display:block; margin-top:8px;
  font-size:.8rem; color:rgba(255,255,255,.62); font-style:italic;
}

/* Cross-link line near the final CTA (three-page interlink) */
.cross-link { margin-top:30px; font-size:.95rem; color:rgba(255,255,255,.72); }
.final-cta-section .cross-link { color:#666; }
.cross-link a { color:var(--primary, #134882); font-weight:700; }
.final-cta-section .cross-link a { color:var(--primary, #134882); }
.cross-link a:hover { text-decoration:underline; }

/* When the page is embedded in the pricing-hub panel, its own nav is mirrored
   into the panel's blue bar, so hide the embedded nav on desktop. On mobile the
   panel bar is too narrow for links, so the embedded nav stays (as a hamburger). */
.nav-embed { display:none !important; }
@media (max-width:820px) {
  .nav-embed { display:flex !important; justify-content:flex-end; }
}