/* v65: visibly distinct editorial treatments; scoped exclusively to the ten trade guides.
   Every variant has an accessible H1, a real trade photo, and an early audit CTA.
   The photograph is displayed before the main headline on narrow screens. */
.trade-guide-page .trade-hero-head{margin:0}
.trade-guide-page .trade-hero-description{min-width:0}
.trade-guide-page .trade-hero-copy .trade-eyebrow{margin-bottom:12px}
.trade-guide-page .trade-hero-head h1{margin-bottom:15px}
.trade-guide-page .trade-hero-tags{margin-top:7px}
.trade-guide-page .trade-hero-grid{gap:clamp(20px,3.5vw,48px)}

/* 1 — Original clean editorial split, used only for the hub and carpentry guide. */
.trade-guide-page.hero-style-classic .trade-hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.97fr)}

/* 2 — Photo-led left-hand spread for advice about improving existing businesses. */
.trade-guide-page.hero-style-reverse .trade-hero-grid{
 display:grid;grid-template-columns:minmax(0,.98fr) minmax(0,1.14fr);grid-template-areas:"photo copy";
 align-items:center;gap:clamp(24px,4.5vw,58px);padding-bottom:42px;
}
.trade-guide-page.hero-style-reverse .trade-hero-copy{grid-area:copy}
.trade-guide-page.hero-style-reverse .trade-hero-picture{grid-area:photo;aspect-ratio:1.18/1;max-height:440px;box-shadow:0 15px 35px rgba(20,64,96,.08)}
.trade-guide-page.hero-style-reverse .trade-hero-lede{line-height:1.64}
.trade-guide-page.hero-style-reverse .trade-hero-tags span{background:#eaf4fa}

/* 3 — Magazine headline above a separate photo and action summary.
   Distinct DOM composition: the heading spans the entire grid while image and actionable copy are paired below. */
.trade-guide-page.hero-style-editorial .trade-hero-grid{
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);
 grid-template-areas:"heading heading" "photo description";
 align-items:center;column-gap:clamp(24px,4.5vw,58px);row-gap:22px;padding-bottom:44px;
}
.trade-guide-page.hero-style-editorial .trade-hero-copy{display:contents}
.trade-guide-page.hero-style-editorial .trade-hero-head{grid-area:heading;border-bottom:1px solid #dbe5ee;padding-bottom:16px}
.trade-guide-page.hero-style-editorial .trade-hero-head h1{max-width:980px;font-size:clamp(2.2rem,3.6vw,3.35rem);margin:0}
.trade-guide-page.hero-style-editorial .trade-hero-description{grid-area:description;align-self:center}
.trade-guide-page.hero-style-editorial .trade-hero-picture{grid-area:photo;aspect-ratio:1.48/1;max-height:350px;box-shadow:0 10px 24px rgba(22,53,85,.065)}
.trade-guide-page.hero-style-editorial .trade-hero-lede{font-size:1.08rem;line-height:1.67;margin-bottom:20px}
.trade-guide-page.hero-style-editorial .trade-hero-actions{flex-direction:column;align-items:flex-start;gap:12px}
.trade-guide-page.hero-style-editorial .trade-hero-tags{margin-bottom:15px}

/* 4 — Feature panel: the picture and offer live inside a single framed section. */
.trade-guide-page.hero-style-framed .trade-hero-grid{
 display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
 grid-template-areas:"photo copy";gap:clamp(22px,3.5vw,44px);
 background:linear-gradient(115deg,#eaf4fa 0%,#f3f8fc 58%,#ffffff 100%);
 border:1px solid #d5e5f0;border-radius:22px;padding:clamp(18px,3vw,34px);
 margin-bottom:28px;align-items:center;
}
.trade-guide-page.hero-style-framed .trade-hero-copy{grid-area:copy}
.trade-guide-page.hero-style-framed .trade-hero-picture{grid-area:photo;max-height:430px;aspect-ratio:1.17/1;border-radius:16px;box-shadow:none}
.trade-guide-page.hero-style-framed .trade-hero-copy h1{font-size:clamp(2.05rem,3.05vw,3rem)}
.trade-guide-page.hero-style-framed .trade-hero-actions{align-items:flex-start;flex-direction:column;gap:12px}
.trade-guide-page.hero-style-framed .trade-hero-lede{font-size:1.01rem;line-height:1.65}
.trade-guide-page.hero-style-framed .trade-hero-tags span{background:#ffffff}

/* Tablet: keep multi-column structure only while legible. */
@media(max-width:950px){
 .trade-guide-page.hero-style-reverse .trade-hero-grid,
 .trade-guide-page.hero-style-framed .trade-hero-grid{gap:23px}
 .trade-guide-page.hero-style-editorial .trade-hero-grid{column-gap:23px}
 .trade-guide-page.hero-style-framed .trade-hero-copy h1{font-size:clamp(2rem,3.5vw,2.65rem)}
}
/* Phone: photograph first, headline second, no overflowing images or CTA buttons. */
@media(max-width:720px){
 .trade-guide-page.hero-style-classic .trade-hero-grid,
 .trade-guide-page.hero-style-reverse .trade-hero-grid,
 .trade-guide-page.hero-style-framed .trade-hero-grid{
  display:flex;flex-direction:column;align-items:stretch;gap:17px;
 }
 .trade-guide-page.hero-style-reverse .trade-hero-picture,
 .trade-guide-page.hero-style-framed .trade-hero-picture{order:-1;aspect-ratio:1.56/1;max-height:none;width:100%}
 .trade-guide-page.hero-style-reverse .trade-hero-grid{padding-bottom:26px}
 .trade-guide-page.hero-style-framed .trade-hero-grid{padding:15px;margin-bottom:20px;border-radius:17px}
 .trade-guide-page.hero-style-framed .trade-hero-copy h1{font-size:clamp(1.95rem,8vw,2.55rem)}
 .trade-guide-page.hero-style-editorial .trade-hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"photo" "heading" "description";
  row-gap:14px;padding-bottom:26px;
 }
 .trade-guide-page.hero-style-editorial .trade-hero-picture{aspect-ratio:1.56/1;max-height:none;width:100%}
 .trade-guide-page.hero-style-editorial .trade-hero-head{border-bottom:0;padding-bottom:0}
 .trade-guide-page.hero-style-editorial .trade-hero-head h1{font-size:clamp(1.95rem,8vw,2.55rem)}
 .trade-guide-page.hero-style-editorial .trade-hero-lede{font-size:1rem}
 .trade-guide-page.hero-style-editorial .trade-hero-actions,.trade-guide-page.hero-style-framed .trade-hero-actions{align-items:stretch}
 .trade-guide-page.hero-style-editorial .trade-hero-actions .trade-btn,
 .trade-guide-page.hero-style-framed .trade-hero-actions .trade-btn{width:100%}
 .trade-guide-page.hero-style-editorial .trade-hero-actions small,
 .trade-guide-page.hero-style-framed .trade-hero-actions small{text-align:center;width:100%}
}
@media(max-width:720px){
 .trade-guide-page.hero-style-framed .trade-hero-actions .trade-btn{font-size:.84rem;padding-inline:11px;white-space:nowrap}
}
@media(max-width:360px){
 .trade-guide-page.hero-style-framed .trade-hero-actions .trade-btn{font-size:.78rem}
}