/* Candidscape blog-only styles. Loaded only by /blog and blog articles. */

/* ========================================================================
   CANDIDSCAPE INSIGHTS
   The blog is intentionally an editorial system, not a second visual brand.
   Its paper, ink, line and gold values are the shared site tokens above.
   ======================================================================== */
.page-blog,
.page-blog-article { background:var(--paper); }

.blog-index-hero,
.blog-hero { background:var(--noir, #05051f); color:var(--white); overflow:hidden; }

.blog-index-hero { padding:clamp(112px, 15vw, 194px) 0 clamp(70px, 9vw, 126px); }
.blog-index-hero__grid { display:grid; grid-template-columns:minmax(0, 820px) 1fr; gap:48px; align-items:end; }
.blog-index-hero h1 { max-width:750px; margin:20px 0 22px; color:var(--white); font-size:clamp(46px, 6.6vw, 92px); line-height:.98; letter-spacing:-.065em; }
.blog-index-hero__copy > p:not(.cs-index) { max-width:580px; color:rgba(253,252,249,.74); font-size:clamp(16px, 1.45vw, 20px); line-height:1.65; }
.blog-index-hero .cs-index,
.blog-close .cs-index,
.blog-section-head .cs-index { margin:0; }
.blog-index-hero .cs-index span,
.blog-close .cs-index span { color:var(--gold); }
.blog-index-hero .cs-index i,
.blog-close .cs-index i { background:rgba(217,195,154,.48); }
.blog-index-hero__rule { display:flex; justify-content:flex-end; align-items:center; gap:12px; padding-bottom:12px; color:rgba(253,252,249,.58); font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.blog-index-hero__rule i { width:min(9vw, 128px); height:1px; background:rgba(253,252,249,.28); }

.blog-index-grid { padding:clamp(42px, 4vw, 64px) 0 clamp(78px, 10vw, 140px); }
.blog-section-head { display:flex; justify-content:space-between; align-items:end; gap:28px; margin-bottom:34px; }
.blog-section-head h2 { max-width:680px; margin:0; font-size:clamp(30px, 3.5vw, 54px); letter-spacing:-.055em; line-height:1.03; }
.blog-section-head--compact { margin-bottom:30px; }

.blog-card { position:relative; display:flex; flex-direction:column; min-width:0; overflow:hidden; padding:0; border:1px solid var(--line); border-radius:8px; background:var(--white); box-shadow:0 3px 14px rgba(20,19,42,.045); transition:transform .42s var(--ease), border-color .42s var(--ease), box-shadow .42s var(--ease); }
.blog-card::before { position:absolute; z-index:2; top:0; right:0; left:0; height:2px; content:""; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease); pointer-events:none; }
.blog-card:hover { transform:translateY(-6px); border-color:rgba(20,19,42,.44); box-shadow:0 22px 42px rgba(20,19,42,.13); }
.blog-card:hover::before { transform:scaleX(1); }
.blog-card__image { position:relative; display:block; aspect-ratio:1.78; overflow:hidden; background:var(--ink); }
.blog-card__image::after { position:absolute; inset:0; content:""; background:linear-gradient(180deg, transparent 48%, rgba(5,5,31,.15)); pointer-events:none; transition:background .35s var(--ease); }
.blog-card:hover .blog-card__image::after { background:linear-gradient(180deg, rgba(5,5,31,.02), rgba(5,5,31,.35)); }
.blog-card__image img { width:100%; height:100%; object-fit:cover; transition:transform .85s var(--ease), filter .85s var(--ease); }
.blog-card:hover .blog-card__image img { transform:scale(1.07); filter:saturate(1.08) contrast(1.03); }
.blog-card__body { display:flex; flex:1; flex-direction:column; padding:20px; }
.blog-card__body { position:relative; }
.blog-card__meta,
.blog-article__category { display:flex; align-items:center; gap:9px; margin:0 0 14px; color:var(--ink-soft); font-size:12px; font-weight:500; letter-spacing:0; line-height:1.3; text-transform:none; }
.blog-icon { display:grid; flex:0 0 auto; width:26px; height:26px; place-items:center; border:1px solid rgba(201,163,106,.62); border-radius:50%; color:var(--clay); }
.blog-icon svg { width:14px; height:14px; }
.blog-card .blog-icon { transition:transform .42s var(--ease), background .42s var(--ease), color .42s var(--ease); }
.blog-card:hover .blog-icon { transform:rotate(-10deg) scale(1.08); background:var(--clay); color:var(--gold); }
.blog-card h3 { display:-webkit-box; overflow:hidden; margin:0 0 13px; -webkit-box-orient:vertical; -webkit-line-clamp:3; font-size:20px; font-weight:650; line-height:1.45; letter-spacing:-.02em; }
.blog-card h3 a { color:var(--ink); text-decoration:none; }
.blog-card__body > p:not(.blog-card__meta) { display:-webkit-box; overflow:hidden; margin:0 0 20px; color:var(--ink-soft); -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:15px; line-height:1.6; }
.blog-card__footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; }
.blog-card__tag { display:inline-flex; padding:3px 6px; border-radius:3px; background:var(--clay); color:var(--white); font-size:9px; font-weight:650; line-height:1; letter-spacing:.02em; }
.blog-card__link { display:inline-flex; align-items:center; gap:8px; width:max-content; color:var(--clay); font-size:13px; font-weight:600; letter-spacing:0; text-decoration:none; text-transform:none; }
.blog-card__link span { color:var(--clay); font-size:18px; line-height:.6; transition:transform .28s var(--ease); }
.blog-card:hover .blog-card__link span { transform:translateX(6px); }
.blog-card--feature { display:grid; grid-template-columns:minmax(0, 1.22fr) minmax(320px, .78fr); }
.blog-card--feature .blog-card__image { min-height:410px; aspect-ratio:auto; }
.blog-card--feature .blog-card__body { padding:clamp(28px, 4vw, 58px); justify-content:center; }
.blog-card--feature h3 { max-width:520px; font-size:clamp(30px, 3.35vw, 52px); line-height:1.04; }
.blog-card--feature .blog-card__body > p:not(.blog-card__meta) { max-width:465px; font-size:16px; }
.blog-card-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px; }
.blog-card-grid > .blog-card { min-height:100%; }
.blog-card-grid > .blog-card .blog-card__image { aspect-ratio:1.78; }
.blog-card-grid > .blog-card .blog-card__body { padding:20px; }

.blog-close { padding:clamp(72px, 10vw, 128px) 0; text-align:center; }
.blog-close__inner { display:grid; justify-items:center; }
.blog-close h2 { max-width:760px; margin:18px 0 30px; color:var(--white); font-size:clamp(35px, 5vw, 70px); letter-spacing:-.065em; line-height:1; }
.blog-close .btn { min-width:178px; }

/* Individual article */
.blog-hero { padding:clamp(100px, 12vw, 160px) 0 clamp(48px, 7vw, 96px); }
.blog-hero__grid { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(330px, .95fr); gap:clamp(34px, 6vw, 88px); align-items:end; }
.blog-crumb { display:inline-flex; gap:9px; margin-bottom:32px; color:rgba(253,252,249,.65); font-size:11px; font-weight:650; letter-spacing:.12em; text-decoration:none; text-transform:uppercase; }
.blog-crumb:hover { color:var(--gold); }
.blog-article__category { color:var(--gold); }
.blog-article__category .blog-icon { color:var(--gold); border-color:rgba(217,195,154,.56); }
.blog-hero h1 { max-width:770px; margin:0 0 24px; color:var(--white); font-size:clamp(39px, 5.1vw, 75px); letter-spacing:-.06em; line-height:1.02; }
.blog-hero__lede { max-width:700px; margin:0; color:rgba(253,252,249,.75); font-size:clamp(16px, 1.35vw, 19px); line-height:1.65; }
.blog-article__reading { display:flex; align-items:center; gap:8px; margin:26px 0 0; color:rgba(253,252,249,.62); font-size:12px; font-weight:650; letter-spacing:.06em; }
.blog-hero__media { position:relative; min-height:370px; margin:0; overflow:hidden; border-radius:12px; background:var(--ink); }
.blog-hero__media::after { position:absolute; inset:0; content:""; background:linear-gradient(180deg, rgba(5,5,31,.05), rgba(5,5,31,.28)); }
.blog-hero__media img { width:100%; height:100%; min-height:370px; object-fit:cover; }

.blog-reading-layout { display:grid; grid-template-columns:minmax(170px, .75fr) minmax(0, 2.2fr) minmax(175px, .8fr); gap:clamp(28px, 4vw, 58px); align-items:start; padding-top:clamp(54px, 8vw, 106px); padding-bottom:clamp(74px, 9vw, 128px); }
.blog-toc { position:sticky; top:112px; border-top:1px solid var(--ink); padding-top:14px; }
.blog-toc > p { margin:0 0 13px; color:var(--ink); font-size:11px; font-weight:750; letter-spacing:.14em; text-transform:uppercase; }
.blog-toc ol { display:grid; gap:9px; margin:0; padding:0; list-style:none; }
.blog-toc a { color:var(--ink-soft); font-size:12px; line-height:1.36; text-decoration:none; }
.blog-toc a:hover { color:var(--clay); }
.blog-prose { min-width:0; color:var(--ink); font-size:clamp(16px, 1.2vw, 18px); line-height:1.75; }
.blog-prose > p { margin:0 0 25px; }
.blog-prose h2 { scroll-margin-top:118px; margin:clamp(44px, 6vw, 72px) 0 20px; font-size:clamp(28px, 3vw, 42px); letter-spacing:-.052em; line-height:1.08; }
.blog-prose h2:first-child { margin-top:0; }
.blog-prose h3 { margin:36px 0 12px; font-size:clamp(21px, 2vw, 27px); letter-spacing:-.035em; line-height:1.2; }
.blog-info-card { display:grid; grid-template-columns:30px minmax(0, 1fr); gap:14px; margin:18px 0; padding:18px; border:1px solid var(--line); border-left:2px solid var(--gold); border-radius:8px; background:var(--paper-warm); }
.blog-info-card__icon { display:grid; width:28px; height:28px; place-items:center; border-radius:50%; background:var(--clay); color:var(--gold); font-size:13px; line-height:1; }
.blog-info-card p { margin:0; font-size:15px; line-height:1.58; }
.blog-related { position:sticky; top:112px; display:grid; gap:12px; }
.blog-related .cs-index { margin:0 0 4px; }
.blog-related-card { display:grid; grid-template-columns:74px minmax(0, 1fr); column-gap:11px; padding:8px 0 14px; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; }
.blog-related-card img { grid-row:span 3; width:74px; height:70px; border-radius:5px; object-fit:cover; }
.blog-related-card span { margin-bottom:4px; color:var(--ink-soft); font-size:9px; font-weight:750; letter-spacing:.11em; text-transform:uppercase; }
.blog-related-card strong { font-size:13px; font-weight:650; line-height:1.24; }
.blog-related-card em { margin-top:7px; color:var(--clay); font-size:10px; font-style:normal; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.blog-related-card:hover strong { text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:4px; }
.blog-service-links { grid-column:2 / -1; margin-top:14px; padding-top:28px; border-top:1px solid var(--line); }
.blog-service-links .cs-index { margin:0 0 15px; }
.blog-service-links > div { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.blog-service-links a { position:relative; display:grid; gap:5px; min-height:116px; padding:17px 38px 17px 17px; border:1px solid var(--line); border-radius:8px; color:var(--ink); text-decoration:none; transition:border-color .28s var(--ease), background .28s var(--ease); }
.blog-service-links a:hover { border-color:var(--ink); background:var(--paper-warm); }
.blog-service-links strong { font-size:var(--text-sm); font-weight:650; }
.blog-service-links span { color:var(--ink-soft); font-size:12px; line-height:1.45; }
.blog-service-links em { position:absolute; right:16px; bottom:15px; color:var(--clay); font-size:18px; font-style:normal; }

@media (max-width: 1080px) {
  .blog-card-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .blog-reading-layout { grid-template-columns:minmax(180px, .7fr) minmax(0, 2.1fr); }
  .blog-related { position:static; grid-column:2; grid-template-columns:repeat(3, minmax(0, 1fr)); margin-top:22px; }
  .blog-related .cs-index { grid-column:1 / -1; }
  .blog-related-card { grid-template-columns:1fr; row-gap:8px; }
  .blog-related-card img { grid-row:auto; width:100%; height:120px; }
  .blog-service-links { grid-column:2; }
  .blog-service-links > div { grid-template-columns:1fr; }
}

@media (max-width: 760px) {
  .blog-index-hero { padding-top:112px; }
  .blog-index-hero__grid,
  .blog-hero__grid { grid-template-columns:1fr; }
  .blog-index-hero__rule { justify-content:start; }
  .blog-section-head { display:block; }
  .blog-section-head .cs-index { margin-bottom:15px; }
  .blog-card--feature { grid-template-columns:1fr; }
  .blog-card--feature .blog-card__image { min-height:0; aspect-ratio:1.3; }
  .blog-card--feature .blog-card__body { padding:28px 22px; }
  .blog-card-grid { grid-template-columns:1fr; gap:16px; }
  .blog-card { display:flex; flex-direction:column; }
  .blog-card__image { min-height:0; height:auto; aspect-ratio:1.78; }
  .blog-card__body { padding:20px; }
  .blog-card h3 { font-size:20px; }
  .blog-card__body > p:not(.blog-card__meta) { display:-webkit-box; font-size:14px; }
  .blog-card__meta { gap:6px; margin-bottom:10px; font-size:9px; }
  .blog-icon { width:25px; height:25px; }
  .blog-icon svg { width:13px; height:13px; }
  .blog-hero { padding-top:106px; }
  .blog-crumb { margin-bottom:24px; }
  .blog-hero__media,
  .blog-hero__media img { min-height:270px; }
  .blog-reading-layout { display:block; padding-top:42px; }
  .blog-toc { position:relative; top:auto; margin:0 0 38px; padding:17px; border:1px solid var(--line); border-radius:8px; background:var(--paper-warm); }
  .blog-toc ol { max-height:170px; overflow:auto; padding-right:6px; }
  .blog-prose { font-size:16px; }
  .blog-prose h2 { margin-top:50px; font-size:29px; }
  .blog-related { display:grid; grid-template-columns:1fr; margin-top:46px; }
  .blog-related-card { grid-template-columns:86px minmax(0, 1fr); }
  .blog-related-card img { grid-row:span 3; width:86px; height:78px; }
  .blog-service-links { margin-top:28px; }
}

@media (max-width: 430px) {
  .blog-card__image { min-height:190px; height:auto; aspect-ratio:1.78; }
}

/* Insights typography deliberately uses the same published scale as the
   site-wide service, gallery and contact pages. */
.blog-index-hero h1,
.blog-hero h1 {
  font-size:var(--heading-lg);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.032em;
}
.blog-index-hero__copy > p:not(.cs-index),
.blog-hero__lede,
.blog-prose {
  font-size:var(--text-base);
  line-height:1.62;
}
.blog-section-head h2,
.blog-close h2 { font-size:var(--heading-lg); line-height:1.12; letter-spacing:-.026em; }
.blog-card h3 { font-size:var(--heading-sm); font-weight:600; line-height:1.25; letter-spacing:-.015em; }
.blog-card--feature h3 { font-size:var(--heading-md); line-height:1.12; letter-spacing:-.026em; }
.blog-card__body > p:not(.blog-card__meta),
.blog-card--feature .blog-card__body > p:not(.blog-card__meta),
.blog-info-card p { font-size:var(--text-sm); line-height:1.62; }
.blog-prose h2 { font-size:var(--heading-md); font-weight:700; line-height:1.12; letter-spacing:-.026em; }
.blog-prose h3 { font-size:var(--heading-sm); font-weight:600; line-height:1.25; letter-spacing:-.015em; }


/* ============================================================
   BLOG ARTICLE — EDITORIAL RE-DESIGN
   A quiet, card-led reading layout inspired by the supplied blog references,
   expressed entirely in Candidscape's typography, palette and components.
   ============================================================ */
.page-blog-article { background:var(--paper); }
.page-blog-article .blog-hero {
  padding:clamp(104px, 11vw, 154px) 0 clamp(54px, 7vw, 90px);
  background:linear-gradient(135deg, var(--paper-warm), var(--paper));
  border-bottom:1px solid var(--line);
}
.page-blog-article .blog-hero__grid {
  grid-template-columns:minmax(0, 1.08fr) minmax(330px, .92fr);
  align-items:center;
}
.page-blog-article .blog-crumb {
  width:max-content;
  max-width:100%;
  margin-bottom:22px;
  color:var(--ink-soft);
  font-size:10px;
  letter-spacing:.14em;
}
.page-blog-article .blog-article__category {
  display:inline-flex;
  width:max-content;
  margin:0 0 14px;
  padding:5px 9px;
  border:1px solid rgba(20,19,42,.16);
  border-radius:999px;
  color:var(--clay);
  font-size:10px;
  font-weight:700;
  letter-spacing:.09em;
  line-height:1;
  text-transform:uppercase;
}
.page-blog-article .blog-hero h1 {
  max-width:14ch;
  margin:0;
  color:var(--ink);
  font-size:clamp(37px, 4.5vw, 68px);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.048em;
}
.page-blog-article .blog-hero__lede {
  max-width:58ch;
  margin:20px 0 0;
  color:var(--ink-soft);
  font-size:clamp(15px, 1.22vw, 18px);
  line-height:1.68;
}
.page-blog-article .blog-article__reading {
  gap:9px;
  margin:23px 0 0;
  color:var(--ink-soft);
  font-size:10px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.page-blog-article .blog-article__reading i { width:3px; height:3px; border-radius:50%; background:var(--gold); }
.page-blog-article .blog-hero__media {
  min-height:0;
  aspect-ratio:4 / 5;
  border:8px solid var(--white);
  border-radius:14px;
  box-shadow:0 24px 55px rgba(20,19,42,.16);
}
.page-blog-article .blog-hero__media::after { background:linear-gradient(180deg, transparent 52%, rgba(5,5,31,.22)); }
.page-blog-article .blog-hero__media img { min-height:0; }

.blog-article-canvas { background:var(--paper); }
.page-blog-article .blog-reading-layout {
  grid-template-columns:minmax(0, 1fr) minmax(220px, .3fr);
  gap:clamp(22px, 3.3vw, 46px);
  align-items:start;
  padding-top:clamp(50px, 7vw, 92px);
  padding-bottom:clamp(66px, 9vw, 118px);
}
.page-blog-article .blog-toc,
.page-blog-article .blog-related {
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--white);
  box-shadow:0 10px 28px rgba(20,19,42,.045);
}
.page-blog-article .blog-toc {
  top:102px;
  padding:18px 17px;
  border-top:2px solid var(--clay);
}
.page-blog-article .blog-toc > p,
.page-blog-article .blog-aside-label {
  margin:0 0 14px;
  color:var(--clay);
  font-size:10px;
  font-weight:750;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.page-blog-article .blog-toc ol { gap:2px; }
.page-blog-article .blog-toc li { border-top:1px solid rgba(20,19,42,.08); }
.page-blog-article .blog-toc a { display:block; padding:8px 0; color:var(--ink-soft); font-size:12px; line-height:1.42; }
.page-blog-article .blog-toc a:hover { color:var(--clay); }
.page-blog-article .blog-prose {
  padding:clamp(25px, 3.8vw, 52px);
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--white);
  box-shadow:0 14px 36px rgba(20,19,42,.055);
  color:var(--ink);
  font-size:clamp(16px, 1.16vw, 18px);
  line-height:1.78;
}
.page-blog-article .blog-prose > p { max-width:66ch; margin-bottom:25px; }
.page-blog-article .blog-prose h2 {
  margin:clamp(46px, 6vw, 68px) 0 18px;
  padding-top:20px;
  border-top:1px solid var(--line);
  color:var(--ink);
  font-size:clamp(27px, 2.55vw, 39px);
  font-weight:650;
  line-height:1.12;
  letter-spacing:-.045em;
}
.page-blog-article .blog-prose h2:first-child { margin-top:0; padding-top:0; border-top:0; }
.page-blog-article .blog-prose h3 { color:var(--clay); }
.page-blog-article .blog-info-card {
  grid-template-columns:26px minmax(0, 1fr);
  gap:12px;
  margin:18px 0;
  padding:17px;
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  border-radius:8px;
  background:var(--paper);
}
.page-blog-article .blog-info-card__icon { width:25px; height:25px; background:var(--clay); color:var(--gold-lit); font-size:11px; }
.page-blog-article .blog-related { top:102px; gap:0; padding:17px; }
.page-blog-article .blog-related .blog-aside-label { margin-bottom:5px; }
.page-blog-article .blog-related-card { padding:13px 0; border-bottom:1px solid var(--line); }
.page-blog-article .blog-related-card:last-child { padding-bottom:0; border-bottom:0; }
.page-blog-article .blog-related-card span { color:var(--ink-soft); font-size:9px; }
.page-blog-article .blog-related-card strong { color:var(--ink); font-size:13px; line-height:1.32; }
.page-blog-article .blog-related-card em { color:var(--clay); font-size:9px; }
.page-blog-article .blog-related-card em b { display:inline-block; font-size:13px; font-weight:400; transition:transform .25s var(--ease); }
.page-blog-article .blog-related-card:hover em b { transform:translateX(4px); }
.page-blog-article .blog-service-links {
  grid-column:1 / -1;
  margin-top:0;
  padding:0;
  border:0;
}
.page-blog-article .blog-service-links .blog-aside-label { margin-bottom:14px; }
.page-blog-article .blog-service-links > div { gap:12px; }
.page-blog-article .blog-service-links a { min-height:124px; border-radius:9px; background:var(--white); box-shadow:0 7px 18px rgba(20,19,42,.035); }

@media (max-width:1080px) {
  .page-blog-article .blog-reading-layout { grid-template-columns:minmax(0, 1fr) minmax(210px, .34fr); }
  .page-blog-article .blog-related { position:static; grid-column:2; grid-template-columns:1fr; gap:0; }
  .page-blog-article .blog-related .blog-aside-label { grid-column:1 / -1; }
  .page-blog-article .blog-related-card { grid-template-columns:70px minmax(0, 1fr); row-gap:0; }
  .page-blog-article .blog-related-card img { grid-row:span 3; width:70px; height:66px; }
  .page-blog-article .blog-service-links { grid-column:1 / -1; }
}
@media (max-width:760px) {
  .page-blog-article .blog-hero { padding-top:104px; }
  .page-blog-article .blog-hero__grid { grid-template-columns:1fr; gap:30px; }
  .page-blog-article .blog-hero h1 { max-width:17ch; font-size:clamp(35px, 10vw, 48px); }
  .page-blog-article .blog-hero__media { width:min(100%, 520px); aspect-ratio:1.32; margin-inline:auto; }
  .page-blog-article .blog-reading-layout { display:block; padding-top:34px; }
  .page-blog-article .blog-prose { padding:25px 20px; border-radius:10px; }
  .page-blog-article .blog-prose h2 { margin-top:44px; font-size:27px; }
  .page-blog-article .blog-related { display:grid; margin-top:22px; padding:17px; }
  .page-blog-article .blog-related-card { grid-template-columns:78px minmax(0, 1fr); }
  .page-blog-article .blog-related-card img { grid-row:span 3; width:78px; height:70px; }
  .page-blog-article .blog-service-links { margin-top:28px; }
  .page-blog-article .blog-service-links > div { grid-template-columns:1fr; }
}

/* Image-led article header: the project photograph is the first visual entry
   point, followed by the title and guide details in the same editorial card. */
.page-blog-article .blog-hero {
  padding:clamp(104px, 11vw, 142px) 0 clamp(46px, 6vw, 76px);
  background:var(--paper);
  border-bottom:0;
}
.page-blog-article .blog-hero__grid {
  display:block;
  max-width:1120px;
  margin-inline:auto;
  padding:clamp(16px, 3vw, 34px);
  border:1px solid rgba(20,19,42,.1);
  border-radius:16px;
  background:var(--white);
  box-shadow:0 18px 48px rgba(20,19,42,.09);
}
.page-blog-article .blog-hero__media {
  width:100%;
  min-height:0;
  aspect-ratio:16 / 8.4;
  margin:0;
  border:0;
  border-radius:11px;
  box-shadow:none;
}
.page-blog-article .blog-hero__media img { min-height:0; }
.page-blog-article .blog-hero__copy { padding:clamp(22px, 3vw, 34px) 0 0; }
.page-blog-article .blog-crumb { margin-bottom:15px; }
.page-blog-article .blog-article__category { margin-bottom:12px; }
.page-blog-article .blog-hero h1 {
  max-width:23ch;
  font-size:clamp(29px, 3.35vw, 48px);
  line-height:1.1;
  letter-spacing:-.04em;
}
.page-blog-article .blog-hero__lede { max-width:68ch; margin-top:14px; }
.page-blog-article .blog-article__reading { margin-top:17px; }
@media (max-width:760px) {
  .page-blog-article .blog-hero { padding:94px 0 32px; }
  .page-blog-article .blog-hero__grid { padding:14px; border-radius:11px; }
  .page-blog-article .blog-hero__media { aspect-ratio:1.46; border-radius:7px; }
  .page-blog-article .blog-hero__copy { padding:22px 4px 6px; }
  .page-blog-article .blog-hero h1 { max-width:none; font-size:clamp(28px, 8.5vw, 39px); }
}

/* Full article-page composition: the image, heading and article copy are one
   editorial card; the supporting contact and discovery blocks form its rail. */
.blog-reference-stage { padding:clamp(34px, 3.8vw, 58px) 0 clamp(54px, 6vw, 86px); background:var(--paper); }
.blog-reference-stage > .wrap { max-width:1560px; padding-inline:clamp(16px, 2vw, 32px); }
.blog-reference-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(310px, .35fr); gap:clamp(18px, 2.2vw, 30px); align-items:start; }
.blog-detail-card { overflow:hidden; border:1px solid rgba(20,19,42,.1); border-radius:16px; background:var(--white); box-shadow:0 18px 48px rgba(20,19,42,.09); }
.page-blog-article .blog-detail-card .blog-hero { padding:clamp(16px, 2.6vw, 34px) clamp(16px, 2.6vw, 34px) 0; background:transparent; border:0; }
.page-blog-article .blog-detail-card .blog-hero__media { width:100%; height:clamp(350px, 31vw, 520px); min-height:0; aspect-ratio:auto; margin:0; border:0; border-radius:11px; box-shadow:none; }
.page-blog-article .blog-detail-card .blog-hero__media img { min-height:0; height:100%; }
.page-blog-article .blog-detail-card .blog-hero__copy { padding:clamp(22px, 3vw, 34px) 0 0; }
.page-blog-article .blog-detail-card .blog-crumb { margin-bottom:15px; }
.page-blog-article .blog-detail-card .blog-article__category { margin-bottom:12px; }
.page-blog-article .blog-detail-card .blog-hero h1 { max-width:23ch; font-size:clamp(29px, 3.35vw, 48px); line-height:1.1; letter-spacing:-.04em; }
.page-blog-article .blog-detail-card .blog-hero__lede { max-width:68ch; margin-top:14px; }
.page-blog-article .blog-detail-card .blog-article__reading { margin-top:17px; }
.page-blog-article .blog-detail-card .blog-prose { padding:clamp(30px, 4vw, 52px) clamp(16px, 2.6vw, 34px) clamp(34px, 4vw, 54px); border:0; border-radius:0; box-shadow:none; }
.page-blog-article .blog-detail-card .blog-prose h2 { scroll-margin-top:110px; }
.blog-reference-aside { display:grid; gap:18px; }
.blog-enquiry-card,
.page-blog-article .blog-reference-aside .blog-related { padding:22px; border:1px solid var(--line); border-radius:12px; background:var(--white); box-shadow:0 10px 28px rgba(20,19,42,.055); }
.blog-enquiry-card { position:static; border-top:2px solid var(--clay); }
.blog-enquiry-card h2 { margin:0; color:var(--ink); font-size:clamp(26px, 2.2vw, 34px); line-height:1.1; }
.blog-enquiry-card > p:not(.blog-aside-label) { margin:10px 0 18px; color:var(--ink-soft); font-size:13px; line-height:1.55; }
.blog-enquiry-card form { display:grid; gap:10px; }
.blog-enquiry-card input,
.blog-enquiry-card textarea { width:100%; min-height:46px; padding:11px 12px; border:1px solid var(--line); border-radius:6px; outline:0; background:var(--white); color:var(--ink); font:inherit; font-size:14px; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.blog-enquiry-card textarea { min-height:108px; resize:vertical; }
.blog-enquiry-card input:focus,
.blog-enquiry-card textarea:focus { border-color:var(--clay); box-shadow:0 0 0 3px rgba(0,0,59,.08); }
.blog-enquiry-card button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:48px; margin-top:4px; border:0; border-radius:999px; background:var(--clay); color:var(--white); font:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:transform .25s var(--ease), background .25s var(--ease); }
.blog-enquiry-card button:hover { background:var(--ink); transform:translateY(-2px); }
.blog-enquiry-card .hp { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.page-blog-article .blog-reference-aside .blog-related { position:static; display:grid; gap:0; }
.page-blog-article .blog-reference-aside .blog-related .blog-aside-label { margin-bottom:5px; }
.page-blog-article .blog-reference-aside .blog-related-card { grid-template-columns:72px minmax(0, 1fr); padding:13px 0; }
.page-blog-article .blog-reference-aside .blog-related-card img { grid-row:span 3; width:72px; height:67px; }
.page-blog-article .blog-reference-aside .blog-service-links { display:block; margin:0; padding:22px; border:1px solid var(--line); border-radius:12px; background:var(--white); box-shadow:0 10px 28px rgba(20,19,42,.04); }
.page-blog-article .blog-reference-aside .blog-service-links > div { grid-template-columns:1fr; }
.page-blog-article .blog-reference-aside .blog-service-links a { min-height:0; padding:14px 34px 14px 14px; box-shadow:none; }
@media (max-width:980px) {
  .blog-reference-grid { grid-template-columns:minmax(0, 1fr) minmax(250px, .36fr); gap:20px; }
  .blog-enquiry-card { position:static; }
  .page-blog-article .blog-reference-aside .blog-related-card { grid-template-columns:1fr; row-gap:7px; }
  .page-blog-article .blog-reference-aside .blog-related-card img { grid-row:auto; width:100%; height:110px; }
}
@media (max-width:760px) {
  .blog-reference-stage { padding:82px 0 38px; }
  .blog-reference-grid { grid-template-columns:1fr; }
  .blog-detail-card { border-radius:11px; }
  .page-blog-article .blog-detail-card .blog-hero { padding:14px 14px 0; }
  .page-blog-article .blog-detail-card .blog-hero__media { height:auto; aspect-ratio:1.46; border-radius:7px; }
  .page-blog-article .blog-detail-card .blog-hero h1 { max-width:none; font-size:clamp(28px, 8.5vw, 39px); }
  .page-blog-article .blog-detail-card .blog-prose { padding:28px 20px 34px; }
  .page-blog-article .blog-reference-aside .blog-related-card { grid-template-columns:78px minmax(0, 1fr); row-gap:0; }
  .page-blog-article .blog-reference-aside .blog-related-card img { grid-row:span 3; width:78px; height:70px; }
}

/* Responsive article layout: the rail stays useful on wide screens, becomes
   a balanced two-up support area on tablets, and stacks naturally on phones. */
@media (max-width:1180px) {
  .blog-reference-stage > .wrap { max-width:1320px; }
  .blog-reference-grid { grid-template-columns:minmax(0, 1fr) minmax(285px, .36fr); }
  .page-blog-article .blog-detail-card .blog-hero__media { height:clamp(330px, 34vw, 450px); }
  .page-blog-article .blog-detail-card .blog-hero h1 { font-size:clamp(29px, 4vw, 43px); }
}
@media (max-width:900px) {
  .blog-reference-stage { padding-top:34px; }
  .page-blog-article .blog-reference-grid { display:grid; grid-template-columns:minmax(0, 1fr) !important; }
  .page-blog-article .blog-reference-grid > * { min-width:0; width:auto; }
  .page-blog-article .blog-reference-aside { display:grid; min-width:0; grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:start; }
  .page-blog-article .blog-enquiry-card { grid-column:1 / -1; min-width:0; }
  .page-blog-article .blog-reference-aside .blog-related-card { grid-template-columns:76px minmax(0, 1fr); row-gap:0; }
  .page-blog-article .blog-reference-aside .blog-related-card img { grid-row:span 3; width:76px; height:70px; }
  .page-blog-article .blog-reference-aside .blog-service-links { min-width:0; }
}
@media (max-width:620px) {
  .blog-reference-stage { padding:26px 0 34px; }
  .blog-reference-stage > .wrap { padding-inline:14px; }
  .page-blog-article .blog-reference-aside { grid-template-columns:minmax(0, 1fr) !important; gap:14px; }
  .page-blog-article .blog-enquiry-card { grid-column:auto; width:100%; }
  .blog-enquiry-card,
  .page-blog-article .blog-reference-aside .blog-related,
  .page-blog-article .blog-reference-aside .blog-service-links { padding:18px; border-radius:10px; }
  .page-blog-article .blog-detail-card .blog-hero { padding:12px 12px 0; }
  .page-blog-article .blog-detail-card .blog-hero__copy { padding:22px 4px 0; }
  .page-blog-article .blog-detail-card .blog-hero__media { height:auto; aspect-ratio:1.36; }
  .page-blog-article .blog-detail-card .blog-hero h1 { max-width:none; font-size:clamp(28px, 8vw, 38px); overflow-wrap:anywhere; }
  .page-blog-article .blog-detail-card .blog-hero__lede { font-size:15px; line-height:1.58; }
  .page-blog-article .blog-detail-card .blog-article__reading { flex-wrap:wrap; row-gap:5px; }
  .page-blog-article .blog-detail-card .blog-prose { padding:26px 18px 32px; font-size:16px; line-height:1.72; }
  .page-blog-article .blog-detail-card .blog-prose h2 { margin-top:40px; font-size:27px; }
  .blog-enquiry-card input,
  .blog-enquiry-card textarea { font-size:16px; }
  .blog-enquiry-card button { min-height:52px; }
}
@media (max-width:380px) {
  .blog-reference-stage > .wrap { padding-inline:10px; }
  .page-blog-article .blog-detail-card .blog-hero h1 { font-size:27px; }
  .page-blog-article .blog-reference-aside .blog-related-card { grid-template-columns:66px minmax(0, 1fr); }
  .page-blog-article .blog-reference-aside .blog-related-card img { width:66px; height:64px; }
}

/* Mobile-first layout guard. The default is deliberately one column; the
   desktop rail is enabled only after there is room for both columns. This
   prevents a minimum sidebar width from ever squeezing article content. */
.page-blog-article { overflow-x:clip; }
.page-blog-article .blog-reference-grid { grid-template-columns:minmax(0, 1fr) !important; }
.page-blog-article .blog-reference-grid > * { min-width:0; max-width:100%; }
.page-blog-article .blog-reference-aside { grid-template-columns:minmax(0, 1fr) !important; min-width:0; }
.page-blog-article .blog-enquiry-card,
.page-blog-article .blog-reference-aside .blog-related,
.page-blog-article .blog-reference-aside .blog-service-links { width:100%; min-width:0; }
.page-blog-article .blog-detail-card .blog-hero__media { height:auto; aspect-ratio:1.36; }
.page-blog-article .blog-detail-card .blog-hero h1 { max-width:none; overflow-wrap:anywhere; }
@media (min-width:901px) {
  .page-blog-article .blog-reference-grid { grid-template-columns:minmax(0, 1fr) minmax(310px, .35fr) !important; }
  .page-blog-article .blog-reference-aside { grid-template-columns:minmax(0, 1fr) !important; }
  .page-blog-article .blog-detail-card .blog-hero__media { height:clamp(350px, 31vw, 520px); aspect-ratio:auto; }
}