/* Whitefield interior designers guide only - all presentation assets for this article live in this folder.
   Base layout, typography and motion follow the turnkey guide; the PDF
   document components are added at the end. */
.blog-article.page-blog-whitefield-interiors {
  --article-ink:#090928;
  --article-blue:#151842;
  --article-gold:#c7a96c;
  --article-cream:#faf8f1;
  --article-line:rgba(21,24,66,.13);
}

.page-blog-whitefield-interiors .blog-detail-card .blog-hero__media {
  overflow:hidden;
  outline:1px solid color-mix(in srgb, var(--article-gold) 58%, transparent);
  outline-offset:6px;
}
.page-blog-whitefield-interiors .blog-detail-card .blog-hero__media::after {
  position:absolute;
  inset:auto 0 0;
  height:31%;
  background:linear-gradient(transparent, rgba(9,9,40,.18));
  content:"";
  pointer-events:none;
}
.page-blog-whitefield-interiors .blog-detail-card .blog-prose {
  gap:22px;
  padding-top:clamp(32px, 4vw, 50px);
  background:linear-gradient(180deg, rgba(199,169,108,.09), transparent 15%);
}

/* Introduction: a strong start without inventing a separate summary. */
.page-blog-whitefield-interiors .blog-content-intro {
  padding:clamp(24px, 3vw, 36px) clamp(20px, 3.2vw, 42px);
  border:1px solid var(--article-line);
  border-left:4px solid var(--article-gold);
  border-radius:16px;
  background:
    radial-gradient(circle at 100% 0, rgba(199,169,108,.16), transparent 30%),
    linear-gradient(135deg, #fff, var(--article-cream));
  box-shadow:0 16px 36px rgba(9,9,40,.06);
}
.page-blog-whitefield-interiors .blog-content-intro::after { width:148px; height:148px; border-color:rgba(199,169,108,.37); }
.page-blog-whitefield-interiors .blog-content-intro > p {
  position:relative;
  z-index:1;
  max-width:72ch;
  margin:0;
  color:#30304c;
  font-size:clamp(17px, 1.25vw, 19px);
  line-height:1.72;
}

/* Article sections use purposeful surfaces; their icon names come from content.php. */
.page-blog-whitefield-interiors .blog-content-section {
  overflow:hidden;
  padding:clamp(26px, 3.5vw, 42px);
  border:1px solid var(--article-line);
  border-radius:16px;
  background:linear-gradient(145deg, #fff 0%, #fffdf9 100%);
  box-shadow:0 13px 32px rgba(9,9,40,.045);
}
.page-blog-whitefield-interiors .blog-section-heading {
  grid-template-columns:44px minmax(0, 1fr);
  align-items:center;
  gap:15px;
  margin-bottom:22px;
  padding-bottom:19px;
  border-bottom-color:rgba(21,24,66,.12);
}
.page-blog-whitefield-interiors .blog-section-mark {
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border:1px solid rgba(199,169,108,.62);
  border-radius:12px;
  background:linear-gradient(135deg, #fffdf7, #f2ead9);
  color:var(--article-blue);
}
.page-blog-whitefield-interiors .blog-section-mark::before,
.page-blog-whitefield-interiors .blog-section-mark::after { display:none; }
.page-blog-whitefield-interiors .blog-section-mark svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
.page-blog-whitefield-interiors .blog-detail-card .blog-section-heading h2 {
  max-width:none;
  color:var(--article-ink);
  font-size:clamp(24px, 2vw, 32px);
  font-weight:650;
  letter-spacing:-.042em;
  line-height:1.14;
}
.page-blog-whitefield-interiors .blog-content-section > p {
  max-width:75ch;
  margin:0 0 20px;
  color:#33334d;
}

/* PDF lists become scannable, responsive cards. */
.page-blog-whitefield-interiors .blog-card-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:22px;
}
/* Let an unpaired final card use the full row instead of leaving an empty cell. */
.page-blog-whitefield-interiors .blog-card-grid:not(.blog-card-grid--timeline) > .blog-info-card:last-child:nth-child(odd) {
  grid-column:1 / -1;
}
.page-blog-whitefield-interiors .blog-detail-card .blog-info-card {
  display:grid;
  min-height:100%;
  grid-template-columns:38px minmax(0, 1fr);
  align-items:start;
  gap:13px;
  margin:0;
  padding:18px;
  border:1px solid rgba(21,24,66,.12);
  border-left:2px solid var(--article-gold);
  border-radius:12px;
  background:linear-gradient(145deg, #fff, #fbf9f3);
  box-shadow:0 7px 18px rgba(9,9,40,.035);
}
.page-blog-whitefield-interiors .blog-detail-card .blog-info-card__icon {
  display:grid;
  width:32px;
  height:32px;
  place-items:center;
  border-radius:10px;
  background:var(--article-blue);
  color:#f4dfb2;
}
.page-blog-whitefield-interiors .blog-detail-card .blog-info-card__icon svg {
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.75;
}
.page-blog-whitefield-interiors .blog-detail-card .blog-info-card p {
  margin:0;
  color:#2d2d48;
  font-size:15px;
  line-height:1.58;
}
/* Ordered PDF lists become a connected step timeline. */
.page-blog-whitefield-interiors .blog-card-grid--timeline {
  position:relative;
  grid-template-columns:1fr;
  gap:20px;
  margin:26px 0 5px 72px;
}
.page-blog-whitefield-interiors .blog-card-grid--timeline::before {
  position:absolute;
  top:48px;
  bottom:48px;
  left:-47px;
  width:2px;
  background:var(--article-blue);
  content:"";
}
.page-blog-whitefield-interiors .blog-detail-card .blog-card-grid--timeline .blog-info-card--numbered {
  display:block;
  min-height:0;
  padding:22px 24px;
  border-left:1px solid rgba(21,24,66,.12);
}
.page-blog-whitefield-interiors .blog-card-grid--timeline .blog-info-card__icon { display:none; }
.page-blog-whitefield-interiors .blog-card-grid--timeline .blog-info-card__number {
  position:absolute;
  z-index:1;
  top:21px;
  left:-72px;
  display:grid;
  width:50px;
  height:50px;
  place-items:center;
  border:4px solid var(--article-cream);
  border-radius:50%;
  background:linear-gradient(135deg, #181a4b, #096fae);
  box-shadow:0 8px 17px rgba(9,9,40,.14);
  color:#fff;
  font-size:17px;
  font-weight:750;
  letter-spacing:-.02em;
  line-height:1;
}
.page-blog-whitefield-interiors .blog-card-grid--timeline .blog-info-card p { font-size:16px; line-height:1.62; }

/* The PDF FAQ copy is presented as accessible expandable cards, not duplicated. */
.page-blog-whitefield-interiors .turnkey-faq-grid { display:grid; gap:11px; }
.page-blog-whitefield-interiors .turnkey-faq-card {
  overflow:hidden;
  border:1px solid rgba(21,24,66,.12);
  border-radius:12px;
  background:#fff;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.page-blog-whitefield-interiors .turnkey-faq-card[open] { border-color:rgba(199,169,108,.8); box-shadow:0 11px 24px rgba(9,9,40,.055); }
.page-blog-whitefield-interiors .turnkey-faq-card summary {
  display:grid;
  grid-template-columns:28px minmax(0, 1fr) 23px;
  align-items:center;
  gap:12px;
  padding:18px 20px;
  color:var(--article-ink);
  cursor:pointer;
  font-size:16px;
  font-weight:650;
  line-height:1.4;
  list-style:none;
}
.page-blog-whitefield-interiors .turnkey-faq-card summary::-webkit-details-marker { display:none; }
.page-blog-whitefield-interiors .turnkey-faq-card summary span { display:grid; width:27px; height:27px; place-items:center; border-radius:50%; background:#f1eadc; color:var(--article-blue); }
.page-blog-whitefield-interiors .turnkey-faq-card summary svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.page-blog-whitefield-interiors .turnkey-faq-card summary b { color:var(--article-gold); font-size:21px; font-weight:400; text-align:center; transition:transform .25s var(--ease); }
.page-blog-whitefield-interiors .turnkey-faq-card[open] summary b { transform:rotate(45deg); }
.page-blog-whitefield-interiors .turnkey-faq-card p { margin:0; padding:0 20px 20px 60px; color:#34344e; font-size:15px; line-height:1.65; }

@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .page-blog-whitefield-interiors .blog-content-section,
  .page-blog-whitefield-interiors .blog-content-intro,
  .page-blog-whitefield-interiors .blog-info-card { transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
  .page-blog-whitefield-interiors .blog-content-section:hover { transform:translateY(-3px); border-color:rgba(199,169,108,.63); box-shadow:0 22px 42px rgba(9,9,40,.075); }
  .page-blog-whitefield-interiors .blog-info-card:hover { transform:translateY(-4px); border-color:rgba(199,169,108,.7); box-shadow:0 15px 25px rgba(9,9,40,.085); }
  .page-blog-whitefield-interiors .turnkey-faq-card:hover { border-color:rgba(199,169,108,.7); }
}

/* Never hide copy before JavaScript runs. Motion enhances only after an item enters view. */
@media (prefers-reduced-motion:no-preference) {
  .page-blog-whitefield-interiors[data-article-motion="true"] .blog-info-card.is-in-view { animation:article-card-enter .52s var(--ease) both; animation-delay:var(--blog-card-delay, 0ms); }
  .page-blog-whitefield-interiors[data-article-motion="true"] .turnkey-faq-card.is-in-view { animation:article-card-enter .45s var(--ease) both; }
  .page-blog-whitefield-interiors[data-article-ready="true"] .blog-hero__media { animation:article-hero-in .7s var(--ease) both; }
  @keyframes article-card-enter { from { opacity:.35; transform:translateY(13px); } to { opacity:1; transform:none; } }
  @keyframes article-hero-in { from { opacity:.72; transform:translateY(12px); } to { opacity:1; transform:none; } }
}

@media (max-width:760px) {
  .page-blog-whitefield-interiors .blog-detail-card .blog-hero__media { outline-offset:3px; }
  .page-blog-whitefield-interiors .blog-content-intro,
  .page-blog-whitefield-interiors .blog-content-section { padding:21px 16px; border-radius:12px; }
  .page-blog-whitefield-interiors .blog-section-heading { grid-template-columns:36px minmax(0, 1fr); gap:11px; margin-bottom:17px; padding-bottom:14px; }
  .page-blog-whitefield-interiors .blog-section-mark { width:32px; height:32px; border-radius:10px; }
  .page-blog-whitefield-interiors .blog-section-mark svg { width:17px; height:17px; }
  .page-blog-whitefield-interiors .blog-detail-card .blog-section-heading h2 { font-size:clamp(22px, 6vw, 26px); }
  .page-blog-whitefield-interiors .blog-card-grid { grid-template-columns:1fr; gap:10px; margin-top:17px; }
  .page-blog-whitefield-interiors .blog-detail-card .blog-info-card { grid-template-columns:34px minmax(0, 1fr); gap:11px; padding:15px; }
  .page-blog-whitefield-interiors .blog-detail-card .blog-info-card__icon { width:29px; height:29px; border-radius:9px; }
  .page-blog-whitefield-interiors .blog-card-grid--timeline { gap:14px; margin:20px 0 4px 54px; }
  .page-blog-whitefield-interiors .blog-card-grid--timeline::before { top:40px; bottom:40px; left:-35px; }
  .page-blog-whitefield-interiors .blog-detail-card .blog-card-grid--timeline .blog-info-card--numbered { padding:17px 16px; }
  .page-blog-whitefield-interiors .blog-card-grid--timeline .blog-info-card__number { top:15px; left:-54px; width:42px; height:42px; border-width:3px; font-size:15px; }
  .page-blog-whitefield-interiors .blog-card-grid--timeline .blog-info-card p { font-size:14px; line-height:1.58; }
.page-blog-whitefield-interiors .blog-detail-card .blog-info-card p { font-size:14px; line-height:1.58; }

  .page-blog-whitefield-interiors .turnkey-faq-card summary { grid-template-columns:25px minmax(0, 1fr) 20px; gap:9px; padding:16px; font-size:15px; }
  .page-blog-whitefield-interiors .turnkey-faq-card summary span { width:24px; height:24px; }
  .page-blog-whitefield-interiors .turnkey-faq-card p { padding:0 16px 17px 50px; font-size:14px; }
}

/* Flat reading layout: the main article card is the only content surface. */
.page-blog-whitefield-interiors .blog-detail-card .blog-prose {
  gap:0;
  padding-top:clamp(20px, 2.2vw, 28px);
  background:transparent;
}
.page-blog-whitefield-interiors .blog-content-intro {
  padding:0 0 clamp(26px, 3vw, 38px);
  border:0;
  border-bottom:1px solid var(--article-line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.page-blog-whitefield-interiors .blog-content-intro::after { display:none; }
.page-blog-whitefield-interiors .blog-content-intro > p {
  max-width:none;
  color:#35354e;
  font-size:clamp(16px, 1.18vw, 18px);
}
.page-blog-whitefield-interiors .blog-content-section {
  overflow:visible;
  padding:clamp(30px, 3.6vw, 48px) 0;
  border:0;
  border-bottom:1px solid var(--article-line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.page-blog-whitefield-interiors .blog-content-section:last-child { border-bottom:0; }
.page-blog-whitefield-interiors .blog-section-heading {
  grid-template-columns:34px minmax(0, 1fr);
  gap:12px;
  margin-bottom:18px;
  padding-bottom:0;
  border-bottom:0;
}
.page-blog-whitefield-interiors .blog-section-mark {
  width:30px;
  height:30px;
  border:1px solid rgba(199,169,108,.7);
  border-radius:50%;
  background:transparent;
}
.page-blog-whitefield-interiors .blog-section-mark svg { width:16px; height:16px; }
.page-blog-whitefield-interiors .blog-content-section > p { max-width:none; }
.page-blog-whitefield-interiors .blog-card-grid {
  gap:14px 30px;
  margin-top:20px;
}
.page-blog-whitefield-interiors .blog-detail-card .blog-info-card {
  min-height:0;
  padding:2px 0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.page-blog-whitefield-interiors .blog-detail-card .blog-info-card__icon {
  width:28px;
  height:28px;
  border:1px solid rgba(21,24,66,.35);
  border-radius:50%;
  background:transparent;
  color:var(--article-blue);
}
.page-blog-whitefield-interiors .blog-detail-card .blog-info-card p { color:#35354e; }

/* Numbered PDF lists retain a clear timeline, without creating inner cards. */
.page-blog-whitefield-interiors .blog-card-grid--timeline { gap:18px; margin:24px 0 0 62px; }
.page-blog-whitefield-interiors .blog-card-grid--timeline::before { top:38px; bottom:38px; left:-40px; background:var(--article-blue); }
.page-blog-whitefield-interiors .blog-detail-card .blog-card-grid--timeline .blog-info-card--numbered {
  display:block;
  padding:8px 0 8px 8px;
  border:0;
  border-left:1px solid rgba(21,24,66,.1);
  background:transparent;
  box-shadow:none;
}
.page-blog-whitefield-interiors .blog-card-grid--timeline .blog-info-card__number {
  top:2px;
  left:-62px;
  width:44px;
  height:44px;
  border:3px solid var(--white);
  background:var(--article-blue);
  box-shadow:none;
  font-size:15px;
}
.page-blog-whitefield-interiors .blog-card-grid--timeline .blog-info-card p { font-size:16px; line-height:1.62; }

.page-blog-whitefield-interiors .turnkey-faq-grid { gap:0; border-top:1px solid var(--article-line); }
.page-blog-whitefield-interiors .turnkey-faq-card,
.page-blog-whitefield-interiors .turnkey-faq-card[open] {
  border:0;
  border-bottom:1px solid var(--article-line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.page-blog-whitefield-interiors .turnkey-faq-card summary { padding:17px 0; }
.page-blog-whitefield-interiors .turnkey-faq-card summary span { background:transparent; border:1px solid rgba(21,24,66,.35); }
.page-blog-whitefield-interiors .turnkey-faq-card p { padding:0 0 18px 40px; }

@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .page-blog-whitefield-interiors .blog-content-section:hover,
  .page-blog-whitefield-interiors .blog-info-card:hover {
    transform:none;
    border-color:inherit;
    box-shadow:none;
  }
  .page-blog-whitefield-interiors .turnkey-faq-card:hover { border-color:var(--article-line); }
}

@media (max-width:760px) {
  .page-blog-whitefield-interiors .blog-detail-card .blog-prose { padding-top:18px; }
  .page-blog-whitefield-interiors .blog-content-intro { padding-bottom:24px; }
  .page-blog-whitefield-interiors .blog-content-section { padding:28px 0; }
  .page-blog-whitefield-interiors .blog-section-heading { grid-template-columns:30px minmax(0, 1fr); gap:9px; }
  .page-blog-whitefield-interiors .blog-section-mark { width:27px; height:27px; }
  .page-blog-whitefield-interiors .blog-card-grid { grid-template-columns:1fr; gap:13px; }
  .page-blog-whitefield-interiors .blog-detail-card .blog-info-card { grid-template-columns:30px minmax(0, 1fr); padding:1px 0; }
  .page-blog-whitefield-interiors .blog-detail-card .blog-info-card__icon { width:25px; height:25px; }
  .page-blog-whitefield-interiors .blog-card-grid--timeline { gap:16px; margin-top:19px; margin-left:50px; }
  .page-blog-whitefield-interiors .blog-card-grid--timeline::before { top:35px; bottom:35px; left:-33px; }
  .page-blog-whitefield-interiors .blog-detail-card .blog-card-grid--timeline .blog-info-card--numbered { display:block; padding:4px 0 4px 7px; }
  .page-blog-whitefield-interiors .blog-card-grid--timeline .blog-info-card__number { top:0; left:-50px; width:38px; height:38px; border-width:2px; font-size:14px; }
  .page-blog-whitefield-interiors .blog-card-grid--timeline .blog-info-card p { font-size:14px; line-height:1.58; }
  .page-blog-whitefield-interiors .turnkey-faq-card summary { padding:15px 0; }
  .page-blog-whitefield-interiors .turnkey-faq-card p { padding:0 0 16px 35px; }
}

/* Reference-inspired information cards for this article only. */
.page-blog-whitefield-interiors .blog-detail-card .blog-prose {
  gap:20px;
  padding-top:clamp(28px, 3vw, 42px);
  background:linear-gradient(180deg, rgba(199,169,108,.08), transparent 17%);
}
.page-blog-whitefield-interiors .blog-content-intro {
  padding:clamp(23px, 3vw, 34px);
  border:1px solid rgba(199,169,108,.5);
  border-left:4px solid var(--article-gold);
  border-radius:15px;
  background:linear-gradient(135deg, #fffefb, #f7f1e4);
  box-shadow:0 12px 29px rgba(9,9,40,.055);
}
.page-blog-whitefield-interiors .blog-content-intro::after { display:block; }
.page-blog-whitefield-interiors .blog-content-section {
  padding:clamp(26px, 3.1vw, 40px);
  border:1px solid rgba(21,24,66,.12);
  border-radius:15px;
  background:linear-gradient(145deg, #fff, #fcfaf5);
  box-shadow:0 12px 30px rgba(9,9,40,.045);
}
.page-blog-whitefield-interiors .blog-content-section:last-child { border-bottom:1px solid rgba(21,24,66,.12); }
.page-blog-whitefield-interiors .blog-section-heading {
  grid-template-columns:40px minmax(0, 1fr);
  gap:13px;
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(21,24,66,.11);
}
.page-blog-whitefield-interiors .blog-section-mark {
  width:36px;
  height:36px;
  border:0;
  border-radius:11px;
  background:linear-gradient(135deg, var(--article-blue), #096fae);
  color:#f5e2b9;
  box-shadow:0 6px 13px rgba(9,9,40,.13);
}
.page-blog-whitefield-interiors .blog-section-mark svg { width:18px; height:18px; }
.page-blog-whitefield-interiors .blog-card-grid { gap:14px; margin-top:21px; }
.page-blog-whitefield-interiors .blog-detail-card .blog-info-card {
  min-height:100%;
  padding:17px;
  border:1px solid rgba(21,24,66,.11);
  border-left:3px solid var(--article-gold);
  border-radius:12px;
  background:linear-gradient(145deg, #fff, #f9f6ee);
  box-shadow:0 8px 19px rgba(9,9,40,.035);
}
.page-blog-whitefield-interiors .blog-detail-card .blog-info-card__icon {
  width:32px;
  height:32px;
  border:0;
  border-radius:10px;
  background:var(--article-blue);
  color:#f5e2b9;
}

/* Connected steps: card surfaces on the right, with the number on the rail. */
.page-blog-whitefield-interiors .blog-card-grid--timeline { gap:18px; margin:25px 0 4px 67px; }
.page-blog-whitefield-interiors .blog-card-grid--timeline::before { top:48px; bottom:48px; left:-44px; background:linear-gradient(var(--article-blue), #096fae); }
.page-blog-whitefield-interiors .blog-detail-card .blog-card-grid--timeline .blog-info-card--numbered {
  display:block;
  padding:20px;
  border:1px solid rgba(21,24,66,.11);
  border-left:3px solid var(--article-gold);
  border-radius:12px;
  background:linear-gradient(145deg, #fff, #faf7ef);
  box-shadow:0 8px 20px rgba(9,9,40,.04);
}
.page-blog-whitefield-interiors .blog-card-grid--timeline .blog-info-card__number {
  top:19px;
  left:-67px;
  width:48px;
  height:48px;
  border:4px solid #fff;
  background:linear-gradient(135deg, var(--article-blue), #096fae);
  box-shadow:0 8px 17px rgba(9,9,40,.14);
  font-size:16px;
}

.page-blog-whitefield-interiors .turnkey-faq-grid { gap:10px; border:0; }
.page-blog-whitefield-interiors .turnkey-faq-card,
.page-blog-whitefield-interiors .turnkey-faq-card[open] {
  border:1px solid rgba(21,24,66,.11);
  border-radius:11px;
  background:#fff;
  box-shadow:0 5px 14px rgba(9,9,40,.025);
}
.page-blog-whitefield-interiors .turnkey-faq-card[open] { border-color:rgba(199,169,108,.75); box-shadow:0 11px 24px rgba(9,9,40,.055); }
.page-blog-whitefield-interiors .turnkey-faq-card summary { padding:17px 18px; }
.page-blog-whitefield-interiors .turnkey-faq-card summary span { border:0; background:#f1eadc; }
.page-blog-whitefield-interiors .turnkey-faq-card p { padding:0 18px 19px 58px; }

@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .page-blog-whitefield-interiors .blog-content-section,
  .page-blog-whitefield-interiors .blog-content-intro,
  .page-blog-whitefield-interiors .blog-info-card { transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); }
  .page-blog-whitefield-interiors .blog-content-section:hover { transform:translateY(-3px); border-color:rgba(199,169,108,.65); box-shadow:0 20px 40px rgba(9,9,40,.075); }
  .page-blog-whitefield-interiors .blog-info-card:hover { transform:translateY(-4px); border-color:rgba(199,169,108,.72); box-shadow:0 15px 27px rgba(9,9,40,.08); }
  .page-blog-whitefield-interiors .turnkey-faq-card:hover { border-color:rgba(199,169,108,.65); }
}
@media (prefers-reduced-motion:no-preference) {
  .page-blog-whitefield-interiors[data-article-motion="true"] .blog-content-section.is-in-view { animation:article-section-in .56s var(--ease) both; }
  @keyframes article-section-in { from { opacity:.35; transform:translateY(18px); } to { opacity:1; transform:none; } }
}

@media (max-width:960px) {
  .page-blog-whitefield-interiors .blog-content-section { padding:28px 24px; }
  .page-blog-whitefield-interiors .blog-card-grid { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .page-blog-whitefield-interiors .blog-detail-card .blog-prose { gap:15px; padding-top:22px; }
  .page-blog-whitefield-interiors .blog-content-intro,
  .page-blog-whitefield-interiors .blog-content-section { padding:20px 16px; border-radius:11px; }
  .page-blog-whitefield-interiors .blog-section-heading { grid-template-columns:32px minmax(0, 1fr); gap:10px; margin-bottom:16px; padding-bottom:13px; }
  .page-blog-whitefield-interiors .blog-section-mark { width:29px; height:29px; border-radius:9px; }
  .page-blog-whitefield-interiors .blog-detail-card .blog-info-card { padding:14px; }
  .page-blog-whitefield-interiors .blog-card-grid--timeline { gap:14px; margin:19px 0 2px 52px; }
  .page-blog-whitefield-interiors .blog-card-grid--timeline::before { top:41px; bottom:41px; left:-34px; }
  .page-blog-whitefield-interiors .blog-detail-card .blog-card-grid--timeline .blog-info-card--numbered { display:block; padding:15px; }
  .page-blog-whitefield-interiors .blog-card-grid--timeline .blog-info-card__number { top:13px; left:-52px; width:40px; height:40px; border-width:3px; font-size:14px; }
  .page-blog-whitefield-interiors .turnkey-faq-grid { gap:8px; }
  .page-blog-whitefield-interiors .turnkey-faq-card summary { padding:15px; }
  .page-blog-whitefield-interiors .turnkey-faq-card p { padding:0 15px 16px 51px; }
}

/* Final conversion and trust moments - backed only by the existing PDF sections. */
.page-blog-whitefield-interiors .blog-content-section--trust {
  border-color:rgba(199,169,108,.68);
  background:
    radial-gradient(circle at 100% 0, rgba(199,169,108,.19), transparent 34%),
    linear-gradient(145deg, #fffdf8, #f7f0df);
}
.page-blog-whitefield-interiors .blog-content-section--trust .blog-section-mark {
  background:linear-gradient(135deg, #b48a3d, #d7bd83);
  color:var(--article-blue);
}
.page-blog-whitefield-interiors .blog-content-section--cta {
  overflow:hidden;
  border-color:transparent;
  background:
    radial-gradient(circle at 94% 7%, rgba(199,169,108,.28), transparent 26%),
    linear-gradient(135deg, #070722, #171943);
  box-shadow:0 22px 46px rgba(9,9,40,.18);
}
.page-blog-whitefield-interiors .blog-content-section--cta::after {
  position:absolute;
  right:-72px;
  bottom:-86px;
  width:230px;
  height:230px;
  border:1px solid rgba(245,226,185,.28);
  border-radius:50%;
  content:"";
  pointer-events:none;
}
.page-blog-whitefield-interiors .blog-content-section--cta .blog-section-heading { position:relative; z-index:1; border-bottom-color:rgba(255,255,255,.18); }
.page-blog-whitefield-interiors .blog-content-section--cta .blog-section-heading h2 { color:#fff; }
.page-blog-whitefield-interiors .blog-content-section--cta .blog-section-mark { background:#f3ead7; color:var(--article-blue); box-shadow:none; }
.page-blog-whitefield-interiors .blog-content-section--cta > p { position:relative; z-index:1; color:rgba(255,255,255,.79); }
.page-blog-whitefield-interiors .turnkey-inline-cta { margin:24px 0 0 !important; }
.page-blog-whitefield-interiors .turnkey-inline-cta a {
  display:inline-flex;
  align-items:center;
  gap:13px;
  min-height:48px;
  padding:0 22px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 9px 20px rgba(0,0,0,.18);
  color:var(--article-blue);
  font-size:14px;
  font-weight:750;
  letter-spacing:.01em;
  text-decoration:none;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.page-blog-whitefield-interiors .turnkey-inline-cta a:hover { transform:translateY(-2px); background:#f5e2b9; }
.page-blog-whitefield-interiors .turnkey-inline-cta a:focus-visible,
.page-blog-whitefield-interiors .turnkey-faq-card summary:focus-visible {
  outline:3px solid #c7a96c;
  outline-offset:4px;
}
@media (prefers-reduced-motion:no-preference) {
  .page-blog-whitefield-interiors[data-article-motion="true"] .blog-content-section--cta.is-in-view { animation:article-cta-arrive .65s var(--ease) both; }
  @keyframes article-cta-arrive { from { opacity:.45; transform:translateY(22px) scale(.985); } to { opacity:1; transform:none; } }
}
@media (max-width:760px) {
  .page-blog-whitefield-interiors .blog-content-section--cta { padding:24px 18px; }
  .page-blog-whitefield-interiors .turnkey-inline-cta a { width:100%; justify-content:center; }
}

/* Layout background only; cards retain their own visual treatment. */
body:has(.page-blog-whitefield-interiors),
.page-blog-whitefield-interiors,
.page-blog-whitefield-interiors .blog-reference-stage,
.page-blog-whitefield-interiors .blog-detail-card {
  background:#FDFCF9;
}

/* The title, metadata and the space between content sections are part of the
   page layout—not separate cards—so they use one uninterrupted background. */
.page-blog-whitefield-interiors .blog-detail-card .blog-hero,
.page-blog-whitefield-interiors .blog-detail-card .blog-hero__copy,
.page-blog-whitefield-interiors .blog-detail-card .blog-article__meta,
.page-blog-whitefield-interiors .blog-detail-card .blog-prose {
  background:#FDFCF9 !important;
}

/* Reading copy is not a card. Remove only these large section containers;
   the comparison, numbered timeline and FAQ cards inside remain intact. */
.page-blog-whitefield-interiors .blog-content-intro,
.page-blog-whitefield-interiors .blog-content-section:not(.blog-content-section--trust):not(.blog-content-section--cta),
.page-blog-whitefield-interiors .blog-content-section:last-child:not(.blog-content-section--cta) {
  padding:12px 4px 20px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
/* Keep the opening copy flush with the reading layout, with no card treatment. */
.page-blog-whitefield-interiors .blog-content-intro {
  border:0 !important;
  border-left:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.page-blog-whitefield-interiors .blog-content-intro::after { display:none !important; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .page-blog-whitefield-interiors .blog-content-intro,
  .page-blog-whitefield-interiors .blog-content-section:not(.blog-content-section--trust):not(.blog-content-section--cta) {
    transition:none;
  }
  .page-blog-whitefield-interiors .blog-content-section:not(.blog-content-section--trust):not(.blog-content-section--cta):hover {
    transform:none;
    border-color:transparent;
    box-shadow:none;
  }
}
@media (max-width:760px) {
  .page-blog-whitefield-interiors .blog-content-intro,
  .page-blog-whitefield-interiors .blog-content-section:not(.blog-content-section--trust):not(.blog-content-section--cta),
  .page-blog-whitefield-interiors .blog-content-section:last-child:not(.blog-content-section--cta) { padding:10px 0 18px; }
}

/* Keep the article compact without running separate paragraphs together. */
.page-blog-whitefield-interiors .blog-detail-card .blog-prose {
  gap:8px;
  padding-top:8px !important;
  padding-bottom:clamp(16px, 2.6vw, 34px);
}
.page-blog-whitefield-interiors .blog-content-intro { padding-top:6px; }
.page-blog-whitefield-interiors .blog-content-intro > p + p { margin-top:14px; }
@media (max-width:760px) {
  .page-blog-whitefield-interiors .blog-detail-card .blog-prose { padding-top:4px !important; padding-bottom:20px; }
  .page-blog-whitefield-interiors .blog-content-intro { padding-top:4px; }
  .page-blog-whitefield-interiors .blog-content-intro > p + p { margin-top:12px; }
}

/* FAQ answers use the complete width of their expanded card. */
.page-blog-whitefield-interiors .turnkey-faq-card p {
  width:100%;
  max-width:none !important;
  box-sizing:border-box;
  padding:0 18px 19px 58px;
}
@media (max-width:760px) {
  .page-blog-whitefield-interiors .turnkey-faq-card p { padding:0 15px 16px 51px; }
}

/* Project CTA: a distinct, high-contrast finishing moment for the article. */
.page-blog-whitefield-interiors .blog-content-section--cta {
  position:relative;
  isolation:isolate;
  min-height:0;
  padding:clamp(32px, 4vw, 56px) !important;
  border:1px solid rgba(231,202,142,.5) !important;
  border-radius:18px;
  background:
    radial-gradient(circle at 92% 12%, rgba(238,204,137,.33), transparent 24%),
    radial-gradient(circle at 15% 115%, rgba(32,117,171,.36), transparent 42%),
    linear-gradient(130deg, #070721, #111442 62%, #151949) !important;
  box-shadow:0 24px 52px rgba(9,9,40,.24) !important;
}
.page-blog-whitefield-interiors .blog-content-section--cta::before {
  position:absolute;
  inset:14px;
  z-index:-1;
  border:1px solid rgba(255,255,255,.11);
  border-radius:12px;
  content:"";
  pointer-events:none;
}
.page-blog-whitefield-interiors .blog-content-section--cta::after {
  right:-56px;
  bottom:-86px;
  width:260px;
  height:260px;
  border-color:rgba(245,226,185,.38);
}
.page-blog-whitefield-interiors .blog-content-section--cta .blog-section-heading {
  max-width:none;
  margin-bottom:19px;
  padding-bottom:16px;
  border-bottom-color:rgba(255,255,255,.2);
}
.page-blog-whitefield-interiors .blog-content-section--cta .blog-section-heading h2 { color:#fff; }
.page-blog-whitefield-interiors .blog-content-section--cta > p {
  max-width:none;
  color:rgba(255,255,255,.84);
  font-size:clamp(16px, 1.25vw, 18px);
  line-height:1.68;
}
.page-blog-whitefield-interiors .turnkey-inline-cta {
  display:flex;
  justify-content:flex-start;
  margin:28px 0 0 !important;
}
.page-blog-whitefield-interiors .turnkey-inline-cta a {
  position:relative;
  overflow:hidden;
  min-height:52px;
  padding:0 26px;
  background:linear-gradient(135deg, #f7e6bd, #d7b66f);
  box-shadow:0 12px 24px rgba(0,0,0,.26);
  color:#090928;
}
.page-blog-whitefield-interiors .turnkey-inline-cta a::before {
  position:absolute;
  top:0;
  bottom:0;
  left:-120%;
  width:70%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.58), transparent);
  content:"";
  transform:skewX(-22deg);
  transition:left .45s var(--ease);
}
.page-blog-whitefield-interiors .turnkey-inline-cta a span { transition:transform .25s var(--ease); }
.page-blog-whitefield-interiors .turnkey-inline-cta a:hover {
  transform:translateY(-3px);
  background:linear-gradient(135deg, #fff4d7, #e0bd74);
  box-shadow:0 16px 28px rgba(0,0,0,.32);
}
.page-blog-whitefield-interiors .turnkey-inline-cta a:hover::before { left:150%; }
.page-blog-whitefield-interiors .turnkey-inline-cta a:hover span { transform:translateX(4px); }
.page-blog-whitefield-interiors .turnkey-inline-cta a:focus-visible { outline-color:#fff; }
@media (max-width:760px) {
  .page-blog-whitefield-interiors .blog-content-section--cta { min-height:0; padding:28px 20px !important; border-radius:14px; }
  .page-blog-whitefield-interiors .blog-content-section--cta::before { inset:10px; }
  .page-blog-whitefield-interiors .turnkey-inline-cta a { width:100%; justify-content:center; }
}

/* Keep introductory and section body copy on one readable scale. */
.page-blog-whitefield-interiors .blog-content-intro > p,
.page-blog-whitefield-interiors .blog-content-section > p { font-size:clamp(16px, 1.18vw, 18px); line-height:1.72; }

/* Keep any grouped card icon and heading on the same row. */
.page-blog-whitefield-interiors .blog-topic-card-grid { grid-template-columns:1fr !important; }
.page-blog-whitefield-interiors .blog-topic-card { display:grid !important; grid-template-columns:30px minmax(0,1fr) !important; align-content:start !important; column-gap:12px; row-gap:8px; }
.page-blog-whitefield-interiors .blog-topic-card > span { grid-column:1 !important; grid-row:1 !important; align-self:start; margin:0 !important; }
.page-blog-whitefield-interiors .blog-topic-card h3 { grid-column:2 !important; grid-row:1 !important; align-self:start !important; margin:2px 0 0 !important; transform:none !important; opacity:1 !important; }
.page-blog-whitefield-interiors .blog-topic-card p { grid-column:2 !important; grid-row:2 !important; }

/* ==========================================================================
   PDF document components for this article only.
   Blocks come from ui.pdfSections in content.php. Colours follow the source
   PDF: navy tables (#E8EEF7 / #23416D) and the warm second-option panel
   (#FFF2E2 / #C86900). Type sizes follow the existing blog articles.
   ========================================================================== */
.blog-article.page-blog-whitefield-interiors {
  --pdf-navy:#23416D;
  --pdf-navy-bg:#E8EEF7;
  --pdf-orange:#C86900;
  --pdf-orange-bg:#FFF2E2;
  --pdf-orange-text:#B45F06;
  /* The same type scale as the published blogs: paragraphs, list cards,
     FAQ answers and timeline steps each keep the old-blog size. */
  --pdf-body:clamp(16px, 1.18vw, 18px);
  --pdf-line:1.72;
  --pdf-card-size:15px;
  --pdf-card-line:1.58;
  --pdf-faq-size:15px;
  --pdf-faq-line:1.65;
  --pdf-step-size:16px;
  --pdf-step-line:1.62;
  --pdf-radius-panel:16px;
  --pdf-radius-card:12px;
  --pdf-tile:32px;
}

/* Paragraph copy: the old-blog section paragraph size. */
.page-blog-whitefield-interiors .blog-content-intro > p,
.page-blog-whitefield-interiors .blog-content-section > p,
.page-blog-whitefield-interiors .pdf-subsection > p,
.page-blog-whitefield-interiors .pdf-callout > p {
  font-size:var(--pdf-body) !important;
  line-height:var(--pdf-line) !important;
}
/* Point cards, table cells and comparison rows: the old-blog card size. */
.page-blog-whitefield-interiors .pdf-callout li,
.page-blog-whitefield-interiors .pdf-table__cell p,
.page-blog-whitefield-interiors .pdf-compare li,
.page-blog-whitefield-interiors .pdf-card,
.page-blog-whitefield-interiors .pdf-card p,
.page-blog-whitefield-interiors .pdf-link-card__title {
  font-size:var(--pdf-card-size) !important;
  line-height:var(--pdf-card-line) !important;
}
.page-blog-whitefield-interiors .pdf-steps .blog-info-card p:not(.pdf-step__badge) {
  font-size:var(--pdf-step-size) !important;
  line-height:var(--pdf-step-line) !important;
}
.page-blog-whitefield-interiors .pdf-faq-answer li {
  font-size:var(--pdf-faq-size) !important;
  line-height:var(--pdf-faq-line) !important;
}
@media (max-width:760px) {
  .blog-article.page-blog-whitefield-interiors { --pdf-card-size:14px; --pdf-faq-size:14px; --pdf-step-size:14px; --pdf-step-line:1.58; }
}
.page-blog-whitefield-interiors .blog-content-intro > p,
.page-blog-whitefield-interiors .blog-content-section > p,
.page-blog-whitefield-interiors .pdf-subsection > p { max-width:none; margin:0 0 16px; color:#33334d; }

/* Section headings follow the PDF hierarchy: navy H2, warm-orange H3. */
.page-blog-whitefield-interiors .blog-detail-card .blog-section-heading h2 { color:var(--pdf-navy); }
.page-blog-whitefield-interiors .blog-detail-card .blog-content-section--cta .blog-section-heading h2 { color:#fff; }
.page-blog-whitefield-interiors .pdf-subsection { margin-top:30px; }
.page-blog-whitefield-interiors .blog-section-heading + .pdf-subsection { margin-top:6px; }
.page-blog-whitefield-interiors .pdf-subheading {
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 16px;
}
.page-blog-whitefield-interiors .pdf-submark {
  display:grid;
  flex:0 0 32px;
  width:32px;
  height:32px;
  place-items:center;
  border:1.5px solid rgba(200,105,0,.45);
  border-radius:10px;
  background:var(--pdf-orange-bg);
  color:var(--pdf-orange-text);
}
.page-blog-whitefield-interiors .pdf-subheading h3 {
  margin:0;
  color:var(--pdf-orange-text);
  font-size:clamp(19px, 1.45vw, 22px);
  font-weight:650;
  letter-spacing:-.02em;
  line-height:1.25;
}

/* Every sprite icon shares one stroke treatment. */
.page-blog-whitefield-interiors .pdf-icon svg,
.page-blog-whitefield-interiors .pdf-submark svg {
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.75;
}

/* Callouts: "Quick Answer", "In plain words", "Get in touch". */
.page-blog-whitefield-interiors .pdf-callout {
  margin:20px 0 4px;
  padding:20px 22px;
  border:1.5px solid rgba(35,65,109,.28);
  border-left:4px solid var(--pdf-navy);
  border-radius:var(--pdf-radius-panel);
  background:var(--pdf-navy-bg);
  box-shadow:0 10px 24px rgba(35,65,109,.07);
}
.page-blog-whitefield-interiors .pdf-callout__head { display:flex; align-items:center; gap:12px; margin:0 0 10px; }
.page-blog-whitefield-interiors .pdf-callout__head .pdf-icon {
  display:grid;
  flex:0 0 var(--pdf-tile);
  width:var(--pdf-tile);
  height:var(--pdf-tile);
  place-items:center;
  border-radius:10px;
  background:var(--pdf-navy);
  color:#fff;
}
.page-blog-whitefield-interiors .pdf-callout__label {
  margin:0 !important;
  color:var(--pdf-navy);
  font-size:14px !important;
  font-weight:700;
  letter-spacing:.06em;
  line-height:1.2 !important;
  text-transform:uppercase;
}
.page-blog-whitefield-interiors .pdf-callout > p { margin:0; color:#1d2b44; }
.page-blog-whitefield-interiors .pdf-callout__list { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.page-blog-whitefield-interiors .pdf-callout__list li { position:relative; margin:0; padding-left:20px; color:#1d2b44; }
.page-blog-whitefield-interiors .pdf-callout__list li::before {
  position:absolute;
  top:calc(.5lh - 4px);
  left:2px;
  width:8px;
  height:8px;
  border-radius:2px;
  background:var(--pdf-navy);
  content:"";
}

/* Standard PDF table panels: two columns on desktop, one on mobile. */
.page-blog-whitefield-interiors .pdf-table {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  margin:18px 0 6px;
}
.page-blog-whitefield-interiors .pdf-table--1 > .pdf-table__cell,
.page-blog-whitefield-interiors .pdf-table > .pdf-table__cell:last-child:nth-child(odd) { grid-column:1 / -1; }
.page-blog-whitefield-interiors .pdf-table__cell {
  min-width:0;
  margin:0;
  padding:20px 20px 18px;
  border:1.5px solid var(--pdf-navy);
  border-radius:var(--pdf-radius-panel);
  background:var(--pdf-navy-bg);
  box-shadow:0 10px 22px rgba(35,65,109,.07);
}
.page-blog-whitefield-interiors .pdf-table__head { display:flex; align-items:center; gap:12px; margin:0 0 10px; }
.page-blog-whitefield-interiors .pdf-table__head .pdf-icon {
  display:grid;
  flex:0 0 var(--pdf-tile);
  width:var(--pdf-tile);
  height:var(--pdf-tile);
  place-items:center;
  border:1.5px solid rgba(35,65,109,.3);
  border-radius:10px;
  background:#fff;
  color:var(--pdf-navy);
}
.page-blog-whitefield-interiors .pdf-table__head h3,
.page-blog-whitefield-interiors .pdf-table__head h4 {
  margin:0;
  color:var(--pdf-navy);
  font-size:17px;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.3;
}
.page-blog-whitefield-interiors .pdf-table__cell p { margin:0; color:var(--pdf-navy); }

/* Comparison panels: first option navy, second option warm orange. */
.page-blog-whitefield-interiors .pdf-compare {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  margin:18px 0 6px;
}
.page-blog-whitefield-interiors .pdf-compare__panel {
  min-width:0;
  padding:20px 20px 18px;
  border:1.5px solid var(--pdf-navy);
  border-radius:var(--pdf-radius-panel);
  background:var(--pdf-navy-bg);
  box-shadow:0 10px 22px rgba(35,65,109,.07);
}
.page-blog-whitefield-interiors .pdf-compare__panel--orange {
  border-color:var(--pdf-orange);
  background:var(--pdf-orange-bg);
  box-shadow:0 10px 22px rgba(200,105,0,.08);
}
.page-blog-whitefield-interiors .pdf-compare__title {
  margin:0 0 12px;
  padding-bottom:10px;
  border-bottom:1.5px solid rgba(35,65,109,.25);
  color:var(--pdf-navy);
  font-size:14px !important;
  font-weight:700;
  letter-spacing:.06em;
  line-height:1.3;
  text-transform:uppercase;
}
.page-blog-whitefield-interiors .pdf-compare__panel--orange .pdf-compare__title { border-bottom-color:rgba(200,105,0,.3); color:var(--pdf-orange); }
.page-blog-whitefield-interiors .pdf-compare ul { display:grid; gap:9px; margin:0; padding:0; list-style:none; }
.page-blog-whitefield-interiors .pdf-compare li { position:relative; margin:0; padding-left:20px; color:#1b2740; }
.page-blog-whitefield-interiors .pdf-compare li::before {
  position:absolute;
  top:calc(.5lh - 4px);
  left:2px;
  width:8px;
  height:8px;
  border-radius:2px;
  background:var(--pdf-navy);
  content:"";
}
.page-blog-whitefield-interiors .pdf-compare__panel--orange li::before { background:var(--pdf-orange); }
.page-blog-whitefield-interiors .pdf-compare li strong { color:var(--pdf-navy); font-weight:700; }
.page-blog-whitefield-interiors .pdf-compare__panel--orange li strong { color:#8f4a00; }

/* Ordinary PDF lists: icon cards in the old-blog style. The icon tile is
   centred on the first line of text, so icon and title share one row. */
.page-blog-whitefield-interiors .pdf-cards {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  margin:18px 0 6px;
  padding:0;
  list-style:none;
}
.page-blog-whitefield-interiors .pdf-cards > .pdf-card:last-child:nth-child(odd) { grid-column:1 / -1; }
.page-blog-whitefield-interiors .pdf-card {
  display:grid;
  grid-template-columns:var(--pdf-tile) minmax(0, 1fr);
  align-items:start;
  column-gap:12px;
  margin:0;
  padding:16px 18px;
  border:1px solid rgba(21,24,66,.11);
  border-left:3px solid var(--article-gold);
  border-radius:var(--pdf-radius-card);
  background:linear-gradient(145deg, #fff, #f9f6ee);
  box-shadow:0 8px 19px rgba(9,9,40,.035);
  color:#2d2d48;
}
.page-blog-whitefield-interiors .pdf-card > .pdf-icon,
.page-blog-whitefield-interiors .pdf-card__head > .pdf-icon {
  display:grid;
  width:var(--pdf-tile);
  height:var(--pdf-tile);
  place-items:center;
  border-radius:10px;
  background:var(--article-blue);
  color:#f5e2b9;
}
.page-blog-whitefield-interiors .pdf-card > .pdf-icon { margin-top:max(0px, calc((1lh - var(--pdf-tile)) / 2)); }
.page-blog-whitefield-interiors .pdf-card > p { margin:0; padding-top:max(0px, calc((var(--pdf-tile) - 1lh) / 2)); color:#2d2d48; }
.page-blog-whitefield-interiors .pdf-card--labelled { display:block; }
.page-blog-whitefield-interiors .pdf-card__head { display:flex; align-items:center; gap:12px; }
.page-blog-whitefield-interiors .pdf-card__head > .pdf-icon { flex:0 0 var(--pdf-tile); }
.page-blog-whitefield-interiors .pdf-card__head strong { color:var(--pdf-navy); font-weight:700; line-height:1.35; }
.page-blog-whitefield-interiors .pdf-card--labelled > p { margin:6px 0 0 calc(var(--pdf-tile) + 12px); color:#2d2d48; }
.page-blog-whitefield-interiors .pdf-card a,
.page-blog-whitefield-interiors .blog-content-section p a,
.page-blog-whitefield-interiors .pdf-table__cell a { color:var(--pdf-navy); font-weight:650; text-decoration:underline; text-decoration-color:rgba(35,65,109,.4); text-underline-offset:3px; }
/* PDF tick lists keep a navy accent; red flags and mistakes use the orange accent. */
.page-blog-whitefield-interiors .pdf-cards--check .pdf-card { border-left-color:var(--pdf-navy); }
.page-blog-whitefield-interiors .pdf-cards--check .pdf-card > .pdf-icon,
.page-blog-whitefield-interiors .pdf-cards--check .pdf-card__head > .pdf-icon { background:var(--pdf-navy-bg); color:var(--pdf-navy); box-shadow:inset 0 0 0 1.5px rgba(35,65,109,.3); }
.page-blog-whitefield-interiors .pdf-cards--warning .pdf-card { border-left-color:var(--pdf-orange); background:linear-gradient(145deg, #fff, #fff8ef); }
.page-blog-whitefield-interiors .pdf-cards--warning .pdf-card > .pdf-icon { background:var(--pdf-orange-bg); color:var(--pdf-orange); box-shadow:inset 0 0 0 1.5px rgba(200,105,0,.35); }

/* Numbered PDF processes reuse the old-blog vertical timeline. */
.page-blog-whitefield-interiors ol.pdf-steps { padding:0; list-style:none; }
.page-blog-whitefield-interiors .pdf-steps > .blog-info-card { position:relative; }
.page-blog-whitefield-interiors .pdf-step__badge {
  margin:0 0 4px !important;
  color:var(--pdf-orange-text);
  font-size:12px !important;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.3 !important;
}
.page-blog-whitefield-interiors .pdf-step__title { margin:0 0 4px; color:var(--pdf-navy); font-size:18px; font-weight:700; line-height:1.3; }
.page-blog-whitefield-interiors .pdf-steps .blog-info-card p:not(.pdf-step__badge) { margin:0; color:#35354e; }

/* PDF image positions. */
.page-blog-whitefield-interiors .pdf-figure {
  overflow:hidden;
  margin:4px 0;
  border:1px solid rgba(21,24,66,.1);
  border-radius:var(--pdf-radius-panel);
  background:#efe9dc;
  box-shadow:0 14px 30px rgba(9,9,40,.08);
}
.page-blog-whitefield-interiors .pdf-figure img { display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover; }

/* Keep reading links. */
.page-blog-whitefield-interiors .pdf-links { display:grid; gap:10px; margin:16px 0 4px; padding:0; list-style:none; }
.page-blog-whitefield-interiors .pdf-links li { margin:0; }
.page-blog-whitefield-interiors .pdf-link-card {
  display:grid;
  grid-template-columns:var(--pdf-tile) minmax(0, 1fr) 20px;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  border:1.5px solid rgba(35,65,109,.22);
  border-radius:var(--pdf-radius-card);
  background:#fff;
  color:var(--pdf-navy);
  text-decoration:none;
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.page-blog-whitefield-interiors .pdf-link-card .pdf-icon { display:grid; width:var(--pdf-tile); height:var(--pdf-tile); place-items:center; border-radius:10px; background:var(--pdf-navy-bg); color:var(--pdf-navy); }
.page-blog-whitefield-interiors .pdf-link-card__title { font-weight:650; }
.page-blog-whitefield-interiors .pdf-link-card b { color:var(--pdf-orange); font-weight:700; transition:transform .25s var(--ease); }
.page-blog-whitefield-interiors .pdf-link-card:hover { transform:translateY(-2px); border-color:var(--pdf-navy); box-shadow:0 10px 22px rgba(35,65,109,.1); }
.page-blog-whitefield-interiors .pdf-link-card:hover b { transform:translateX(4px); }
.page-blog-whitefield-interiors .pdf-link-card:focus-visible { outline:3px solid var(--article-gold); outline-offset:3px; }
/* A PDF title whose article is not published yet: same card, no link. */
.page-blog-whitefield-interiors .pdf-link-card--pending { grid-template-columns:var(--pdf-tile) minmax(0, 1fr); border-style:dashed; background:#fbfaf6; color:#4a5670; cursor:default; }
.page-blog-whitefield-interiors .pdf-link-card--pending:hover { transform:none; border-color:rgba(35,65,109,.22); box-shadow:none; }

/* FAQ answers keep the PDF bullet points inside the old-blog FAQ cards. */
.page-blog-whitefield-interiors .pdf-faq-answer { display:grid; gap:6px; margin:0; padding:0 18px 19px 58px; list-style:none; }
.page-blog-whitefield-interiors .pdf-faq-answer li { position:relative; margin:0; padding-left:16px; color:#34344e; }
.page-blog-whitefield-interiors .pdf-faq-answer li::before {
  position:absolute;
  top:calc(.5lh - 3px);
  left:0;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--article-gold);
  content:"";
}

/* Trust panel keeps the old-blog gold surface; its PDF table stays navy. */
.page-blog-whitefield-interiors .blog-content-section--trust .pdf-table { margin-bottom:0; }

/* CTA: the old-blog dark finishing block, with PDF lines and contact actions. */
.page-blog-whitefield-interiors .blog-content-section--cta .pdf-callout {
  position:relative;
  z-index:1;
  border-color:rgba(255,255,255,.18);
  border-left-color:var(--article-gold);
  background:rgba(255,255,255,.06);
  box-shadow:none;
}
.page-blog-whitefield-interiors .blog-content-section--cta .pdf-callout__head .pdf-icon { background:#f3ead7; color:var(--article-blue); }
.page-blog-whitefield-interiors .blog-content-section--cta .pdf-callout__label { color:#f5e2b9; }
.page-blog-whitefield-interiors .blog-content-section--cta .pdf-callout__list li { color:rgba(255,255,255,.88); }
.page-blog-whitefield-interiors .blog-content-section--cta .pdf-callout__list li::before { background:var(--article-gold); }
.page-blog-whitefield-interiors .blog-content-section--cta .pdf-cards { position:relative; z-index:1; }
.page-blog-whitefield-interiors .blog-content-section--cta .pdf-card {
  border-color:rgba(255,255,255,.14);
  border-left-color:var(--article-gold);
  background:rgba(255,255,255,.06);
  box-shadow:none;
  color:rgba(255,255,255,.88);
}
.page-blog-whitefield-interiors .blog-content-section--cta .pdf-card > p { color:rgba(255,255,255,.88); }
.page-blog-whitefield-interiors .blog-content-section--cta .pdf-card > .pdf-icon { background:#f3ead7; color:var(--article-blue); }
.page-blog-whitefield-interiors .pdf-actions { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.page-blog-whitefield-interiors .pdf-action {
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:50px;
  padding:0 22px;
  border:1.5px solid transparent;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.01em;
  text-decoration:none;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.page-blog-whitefield-interiors .pdf-action .pdf-icon { display:grid; place-items:center; }
.page-blog-whitefield-interiors .pdf-action .pdf-icon svg { width:17px; height:17px; }
.page-blog-whitefield-interiors .pdf-action--call { background:linear-gradient(135deg, #f7e6bd, #d7b66f); box-shadow:0 12px 24px rgba(0,0,0,.26); color:#090928; }
.page-blog-whitefield-interiors .pdf-action--whatsapp { background:#1f9d55; box-shadow:0 12px 24px rgba(0,0,0,.22); color:#fff; }
.page-blog-whitefield-interiors .pdf-action--contact { border-color:rgba(255,255,255,.55); color:#fff; }
.page-blog-whitefield-interiors .pdf-action:hover { transform:translateY(-2px); box-shadow:0 16px 28px rgba(0,0,0,.3); }
.page-blog-whitefield-interiors .pdf-action:focus-visible { outline:3px solid #fff; outline-offset:3px; }

/* Motion: panels and cards rise into view; nothing is hidden before JS runs. */
@media (prefers-reduced-motion:no-preference) {
  .page-blog-whitefield-interiors[data-article-motion="true"] .pdf-card.is-in-view,
  .page-blog-whitefield-interiors[data-article-motion="true"] .pdf-table__cell.is-in-view,
  .page-blog-whitefield-interiors[data-article-motion="true"] .pdf-compare__panel.is-in-view { animation:article-card-enter .52s var(--ease) both; animation-delay:var(--blog-card-delay, 0ms); }
  .page-blog-whitefield-interiors[data-article-motion="true"] .pdf-figure.is-in-view,
  .page-blog-whitefield-interiors[data-article-motion="true"] .pdf-callout.is-in-view { animation:article-section-in .6s var(--ease) both; }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .page-blog-whitefield-interiors .pdf-card,
  .page-blog-whitefield-interiors .pdf-table__cell,
  .page-blog-whitefield-interiors .pdf-compare__panel { transition:transform .28s var(--ease), box-shadow .28s var(--ease); }
  .page-blog-whitefield-interiors .pdf-card:hover,
  .page-blog-whitefield-interiors .pdf-table__cell:hover,
  .page-blog-whitefield-interiors .pdf-compare__panel:hover { transform:translateY(-3px); box-shadow:0 15px 27px rgba(9,9,40,.08); }
  .page-blog-whitefield-interiors .pdf-figure img { transition:transform .6s var(--ease); }
  .page-blog-whitefield-interiors .pdf-figure:hover img { transform:scale(1.02); }
}

@media (max-width:760px) {
  .page-blog-whitefield-interiors .pdf-table,
  .page-blog-whitefield-interiors .pdf-compare,
  .page-blog-whitefield-interiors .pdf-cards { grid-template-columns:1fr; gap:12px; }
  .page-blog-whitefield-interiors .pdf-table__cell,
  .page-blog-whitefield-interiors .pdf-compare__panel { padding:17px 16px 15px; }
  .page-blog-whitefield-interiors .pdf-callout { padding:17px 16px; }
  .page-blog-whitefield-interiors .pdf-card { padding:14px 15px; }
  .page-blog-whitefield-interiors .pdf-card--labelled > p { margin-left:0; }
  .page-blog-whitefield-interiors .pdf-subsection { margin-top:24px; }
  .page-blog-whitefield-interiors .pdf-faq-answer { padding:0 15px 16px 51px; }
  .page-blog-whitefield-interiors .pdf-link-card { padding:13px 14px; }
  .page-blog-whitefield-interiors .pdf-actions { flex-direction:column; }
  .page-blog-whitefield-interiors .pdf-action { justify-content:center; width:100%; }
}

/* The shared blog stylesheets size every prose h3 with !important and cap
   paragraph widths. Component headings and copy restate their own scale. */
.page-blog-whitefield-interiors.blog-article .blog-detail-card .blog-prose p,
.page-blog-whitefield-interiors.blog-article .blog-detail-card .blog-prose li { width:auto !important; max-width:none !important; text-wrap:wrap !important; }
.page-blog-whitefield-interiors.blog-article .blog-detail-card .blog-prose .pdf-subheading h3 {
  margin:0;
  color:var(--pdf-orange-text);
  font-size:clamp(19px, 1.45vw, 22px) !important;
  font-weight:600 !important;
}
.page-blog-whitefield-interiors.blog-article .blog-detail-card .blog-prose .pdf-table__head h3,
.page-blog-whitefield-interiors.blog-article .blog-detail-card .blog-prose .pdf-table__head h4 {
  margin:0;
  color:var(--pdf-navy);
  font-size:17px !important;
  font-weight:700 !important;
  letter-spacing:-.01em;
  line-height:1.3;
}
.page-blog-whitefield-interiors.blog-article .blog-detail-card .blog-prose .pdf-compare__title {
  margin:0 0 12px;
  color:var(--pdf-navy);
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:.06em;
  line-height:1.3;
}
.page-blog-whitefield-interiors.blog-article .blog-detail-card .blog-prose .pdf-compare__panel--orange .pdf-compare__title { color:var(--pdf-orange); }
.page-blog-whitefield-interiors.blog-article .blog-detail-card .blog-prose .pdf-step__title {
  margin:0 0 4px;
  color:var(--pdf-navy);
  font-size:18px !important;
  font-weight:700 !important;
  line-height:1.3;
}