/* ============================================================
   INDUSTRIES INDEX — editorial layout
   Extracted from the Industries.html reference into a dedicated
   stylesheet, loaded on the /industries overview page and the
   per-industry service pages.
   ============================================================ */

/* S01 · three service columns */
.svcgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3.4vw, 48px); }
.svcblk { border-left: 2px solid var(--accent-dark); padding-left: clamp(18px, 2vw, 28px); }
.svcblk h3 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.2rem, 1.8vw, 1.44rem); color: #fff; letter-spacing: -.01em; margin-bottom: 10px; }
.svcblk__tag { font-family: var(--font-body); font-size: 1.02rem; color: var(--accent); font-style: italic; margin-bottom: 18px; line-height: 1.5; display: block; }
.svcblk ul { display: flex; flex-direction: column; gap: 10px; }
.svcblk li { display: flex; gap: 10px; align-items: flex-start; color: var(--grey-mid-2); font-size: .95rem; line-height: 1.5; }
.svcblk li::before { content: "·"; color: var(--accent-dark); font-weight: 700; flex: 0 0 auto; margin-top: -1px; }
@media (max-width: 760px) { .svcgrid { grid-template-columns: 1fr; gap: 36px; } }

/* S02 · industry index rows */
.ind { display: flex; flex-direction: column; }
.indrow {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: clamp(20px, 3vw, 44px); align-items: center;
  padding: clamp(28px, 3.6vw, 44px) 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background .35s var(--ease);
}
.indrow:first-child { border-top: 1px solid rgba(255,255,255,.08); }
.indrow:hover { background: linear-gradient(100deg, rgba(244,160,0,.07) 0%, rgba(244,160,0,.02) 50%, transparent 100%); }
.indrow__n {
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  color: rgba(255,255,255,.14); letter-spacing: -.03em; line-height: 1;
  min-width: clamp(56px, 6vw, 80px); text-align: right;
  transition: color .3s;
}
.indrow:hover .indrow__n { color: var(--accent); }
.indrow__body { min-width: 0; }
.indrow__name {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.36rem, 2.4vw, 2rem);
  color: #fff; letter-spacing: -.02em; line-height: 1.12;
  margin-bottom: 7px; transition: color .3s;
}
.indrow:hover .indrow__name { color: var(--accent); }
.indrow__liner { color: var(--grey-mid); font-size: clamp(.9rem, 1.1vw, 1.04rem); line-height: 1.5; max-width: 46ch; }
.indrow__links { display: flex; gap: 10px; flex-shrink: 0; }
.indrow__links a {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: #777; padding: 9px 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
  white-space: nowrap; text-decoration: none;
}
.indrow__links a:hover, .indrow__links a:focus-visible {
  color: var(--accent); border-color: var(--accent); background: rgba(244,160,0,.08);
}
.indrow__links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 900px) {
  .indrow { grid-template-columns: auto 1fr; gap: 14px 20px; }
  .indrow__links { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .indrow { grid-template-columns: 1fr; gap: 10px; }
  .indrow__n { text-align: left; font-size: 1.5rem; }
  .indrow__links { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .indrow, .indrow__n, .indrow__name, .indrow__links a { transition: none; }
}

/* S03 · statement band */
.stmt {
  background: var(--accent); padding: clamp(60px, 8vw, 110px) var(--gutter);
  text-align: center; position: relative; overflow: hidden;
}
.stmt h2 {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.8rem, 4.2vw, 3.2rem);
  color: #000; letter-spacing: -.03em; line-height: 1.06;
  max-width: 820px; margin: 0 auto 26px;
}
.stmt p { font-size: clamp(1.02rem, 1.4vw, 1.16rem); color: rgba(0,0,0,.68); max-width: 64ch; margin-inline: auto; line-height: 1.62; }
.stmt__sub { margin-top: 22px; font-family: var(--font-mono); font-size: .82rem; letter-spacing: .04em; color: rgba(0,0,0,.46); display: block; }

/* ============================================================
   INDUSTRY SERVICE PAGES (SEO / Web Design for each industry)
   Extracted from the reference home.css INDUSTRY SERVICE PAGE block.
   ============================================================ */
/* trade-type chips */
.trade-chips { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 6px; }
.trade-chip { font-family: var(--font-head); font-weight: 600; font-size: .96rem; color: #333; background: var(--white); border: 1px solid var(--line-light); border-radius: 100px; padding: 11px 20px; transition: border-color .2s, background .2s, transform .2s var(--ease); }
.trade-chip:hover { border-color: var(--accent); background: #FFF8EA; transform: translateY(-2px); }
.trade-note { margin-top: 24px; color: #555; font-size: 1.02rem; }
.trade-note .gold { color: var(--accent-dark); font-weight: 600; }

/* seasonal table — dark, gold season labels, mobile cards */
.season { border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden; background: var(--off-black); }
.season__row { display: grid; grid-template-columns: 0.85fr 2fr; border-bottom: 1px solid var(--line-dark); }
.season__row:last-child { border-bottom: none; }
.season__k { padding: 18px 24px; font-family: var(--font-head); font-weight: 700; color: var(--accent); border-right: 1px solid var(--line-dark); display: flex; align-items: center; }
.season__v { padding: 18px 24px; color: var(--grey-mid-2); display: flex; align-items: center; line-height: 1.5; }
.season-note { margin-top: 22px; color: var(--grey-mid-2); font-size: 1.02rem; max-width: 70ch; }
@media (max-width: 640px) {
  .season__row { grid-template-columns: 1fr; }
  .season__k { border-right: none; border-bottom: 1px solid var(--line-dark); padding-bottom: 10px; }
  .season__v { padding-top: 12px; }
}

/* gold-accent callout list (dark) — "what trades SEO needs to get right" */
.goldlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 26px; margin-top: 8px; }
.goldlist li { display: flex; align-items: flex-start; gap: 13px; color: #e8e8e8; font-size: 1.04rem; line-height: 1.5; }
.goldlist li svg { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 720px) { .goldlist { grid-template-columns: 1fr; } }

/* campaign-includes checklist (light, compact, gold checks) */
.inclist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 6px; }
.inclist li { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border: 1px solid var(--line-light); border-radius: var(--radius-sm); background: var(--white); font-size: .96rem; color: #333; font-family: var(--font-head); font-weight: 500; }
.inclist li svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: var(--accent-dark); stroke-width: 2.6; }
@media (max-width: 860px) { .inclist { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .inclist { grid-template-columns: 1fr; } }

/* "what we need from you" checklist (light) */
.needlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.needlist li { display: flex; align-items: flex-start; gap: 13px; padding: 18px 20px; border: 1px solid var(--line-light); border-radius: var(--radius-sm); background: var(--white); color: #444; font-size: 1rem; line-height: 1.5; }
.needlist li svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--accent-dark); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 720px) { .needlist { grid-template-columns: 1fr; } }

/* numbered mistake cards (light) */
.mistakes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.mistake { position: relative; padding: clamp(24px, 2.6vw, 32px); border: 1px solid var(--line-light); border-radius: var(--radius); background: var(--white); transition: border-color .3s, transform .3s var(--ease); }
.mistake:hover { border-color: var(--accent); transform: translateY(-3px); }
.mistake__n { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--accent-dark); background: #FFF3DA; border: 1px solid #FBE3B3; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 16px; }
.mistake h3 { color: var(--black); font-size: 1.18rem; margin-bottom: 10px; }
.mistake p { color: #555; font-size: .98rem; line-height: 1.6; }
@media (max-width: 720px) { .mistakes { grid-template-columns: 1fr; } }

/* ============================================================
   SEO FOR TRADES — industry page design system (.page-trades)
   distinct hero, varied section rhythm, stronger hierarchy
   ============================================================ */
/* --- global readability --- */
.page-trades .sec-head p { font-size: 1.16rem; line-height: 1.66; }
.page-trades .fcard p, .page-trades .scard p { font-size: 1.06rem; line-height: 1.65; color: #4a4a4a; }
.page-trades .fcard h3, .page-trades .scard h3 { font-size: 1.32rem; }
.page-trades .trade-note { font-size: 1.12rem; }

/* --- HERO: full-width, centred industry treatment --- */
.indhero { position: relative; overflow: hidden; text-align: center; padding-top: clamp(122px, 15vh, 168px); padding-bottom: clamp(50px, 6vw, 84px); background: radial-gradient(125% 95% at 50% 0%, #171717 0%, #0b0b0b 56%, #060606 100%); }
.indhero .hero__grid { opacity: .2; }
.indhero .hero__glow { top: 32%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: min(880px, 96vw); height: min(700px, 78vw); max-width: none; max-height: none; background: radial-gradient(circle at 50% 42%, rgba(244,160,0,.26), rgba(244,160,0,.06) 44%, transparent 68%); }
.indhero .hero__fig { top: 42%; left: 50%; right: auto; transform: translate(-50%, -50%); width: min(1000px, 102%); opacity: .05; }
.indhero .hero__inner { position: relative; z-index: 2; max-width: 960px; margin-inline: auto; }
.indhero .hero__badge { margin-inline: auto; }
.indhero h1 { font-size: clamp(2.5rem, 4.7vw, 3.95rem); margin-inline: auto; max-width: 17ch; }
.indhero h1 .nb { white-space: normal; }
.indhero .hero__tagline { justify-content: center; font-size: clamp(1.02rem, 1.4vw, 1.22rem); margin-bottom: 22px; }
.indhero .hero__sub { font-size: clamp(1.14rem, 1.5vw, 1.32rem); line-height: 1.6; color: #cfcfcf; max-width: 54ch; margin: 0 auto 30px; }
.indhero .hero__cta { justify-content: center; }
.indhero .hero__cta .btn--lg { height: 60px; padding: 0 34px; font-size: 1.1rem; }
.page-trades .hero__cta .btn--primary { box-shadow: 0 14px 38px -10px rgba(244,160,0,.6); }
.page-trades .hero .btn--ghost { border-color: #4a4a4a; color: #fff; background: rgba(255,255,255,.03); }
.page-trades .hero .btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: rgba(244,160,0,.08); }

/* --- CHALLENGES: stacked full-width rows --- */
.chrows { display: flex; flex-direction: column; gap: 14px; }
.chrow { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 2.4vw, 30px); align-items: center; padding: clamp(24px, 2.6vw, 34px) clamp(26px, 3vw, 40px); border: 1px solid var(--line-dark); border-radius: 16px; background: #131313; transition: border-color .3s, transform .3s var(--ease); }
.chrow:hover { border-color: var(--accent); transform: translateY(-2px); }
.chrow__n { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.7rem); color: var(--accent); letter-spacing: -.03em; line-height: 1; }
.chrow__t h3 { color: #fff; font-size: 1.34rem; margin-bottom: 8px; letter-spacing: -.01em; }
.chrow__t p { color: #c8c8c8; font-size: 1.08rem; line-height: 1.62; max-width: 84ch; }
@media (max-width: 560px) { .chrow { grid-template-columns: 1fr; gap: 8px; padding: 24px; } }

/* --- SEASONAL: 4 cards, pre-season highlighted --- */
.tseason { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tseason__card { border: 1px solid var(--line-dark); border-radius: 14px; background: var(--off-black); padding: clamp(22px, 2.4vw, 28px); transition: border-color .3s, transform .3s var(--ease); }
.tseason__card:hover { border-color: var(--accent-dark); transform: translateY(-3px); }
.tseason__ic { width: 44px; height: 44px; border-radius: 11px; background: rgba(255,255,255,.05); border: 1px solid var(--line-dark); display: grid; place-items: center; margin-bottom: 16px; }
.tseason__ic svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tseason__k { font-family: var(--font-head); font-weight: 700; font-size: 1.32rem; color: #fff; margin-bottom: 14px; letter-spacing: -.01em; }
.tseason__list { display: flex; flex-direction: column; gap: 8px; }
.tseason__list li { color: var(--grey-mid-2); font-size: .98rem; line-height: 1.4; padding-left: 16px; position: relative; }
.tseason__list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.tseason__card--hl { background: linear-gradient(170deg, rgba(244,160,0,.16), rgba(244,160,0,.03)); border-color: var(--accent); }
.tseason__card--hl .tseason__ic { background: var(--accent); border-color: var(--accent); }
.tseason__card--hl .tseason__ic svg { stroke: #000; }
.tseason__tag { display: inline-block; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: #000; background: var(--accent); border-radius: 100px; padding: 4px 10px; margin-bottom: 14px; }
.tseason__card--hl .tseason__list li { color: #e8e8e8; }
.preseason { display: flex; align-items: center; gap: 22px; margin-top: 16px; padding: clamp(26px, 3vw, 36px); border-radius: 16px; border: 1px solid var(--accent); background: linear-gradient(150deg, rgba(244,160,0,.16), rgba(244,160,0,.03)); }
.preseason__ic { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 14px; background: var(--accent); display: grid; place-items: center; }
.preseason__ic svg { width: 28px; height: 28px; fill: none; stroke: #000; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.preseason__body h3 { color: #fff; font-size: 1.34rem; margin-bottom: 8px; letter-spacing: -.01em; }
.preseason__body p { color: #d6d6d6; font-size: 1.06rem; line-height: 1.6; max-width: 86ch; }
@media (max-width: 760px) { .tseason { grid-template-columns: 1fr; } .preseason { flex-direction: column; align-items: flex-start; gap: 16px; } }

/* --- SEO VS LEAD PLATFORMS: premium two-panel argument --- */
.vsblock { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.vspanel { border-radius: 16px; padding: clamp(26px, 3vw, 38px); border: 1px solid var(--line-light); background: #fff; }
.vspanel__head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line-light); }
.vspanel__head h3 { font-size: 1.34rem; color: var(--black); letter-spacing: -.01em; }
.vspanel__tag { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; padding: 5px 11px; border-radius: 100px; }
.vspanel__list { display: flex; flex-direction: column; gap: 16px; }
.vspanel__list li { display: flex; gap: 13px; align-items: flex-start; font-size: 1.06rem; line-height: 1.5; }
.vspanel__list li svg { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vspanel--us { background: linear-gradient(170deg, #FFF8EA, #fff); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.vspanel--us .vspanel__head { border-bottom-color: #F0DCB0; }
.vspanel--us .vspanel__tag { background: var(--accent); color: #000; }
.vspanel--us .vspanel__list li { color: #3a3a3a; }
.vspanel--us .vspanel__list li svg { stroke: var(--accent-dark); }
.vspanel--them { background: #f4f4f2; }
.vspanel--them .vspanel__tag { background: #e4e4e2; color: #666; }
.vspanel--them .vspanel__list li { color: #6a6a6a; }
.vspanel--them .vspanel__list li svg { stroke: #adadad; }
.vsclose { margin-top: 26px; text-align: center; font-family: var(--font-head); font-weight: 500; font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.5; color: var(--black); max-width: 70ch; margin-inline: auto; }
.vsclose b { color: var(--accent-dark); font-weight: 700; }
@media (max-width: 820px) { .vsblock { grid-template-columns: 1fr; } }

/* --- HOW WE DO SEO: core-focus emphasis --- */
.page-trades .scard--core { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.scard__badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: #000; background: var(--accent); border-radius: 100px; padding: 4px 10px; margin-bottom: 14px; align-self: flex-start; }
.page-trades .inclist li { font-size: 1.02rem; }

/* --- LEAD JOURNEY: timeline, 3 per row, connectors --- */
.tjourney { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px; position: relative; }
.tstep { position: relative; }
.tstep__num { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(160deg, #1a1408, #0d0d0d); border: 1px solid var(--accent); color: var(--accent); display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; margin-bottom: 20px; position: relative; z-index: 2; }
.tstep h3 { color: #fff; font-size: 1.26rem; margin-bottom: 10px; }
.tstep p { color: #c4c4c4; font-size: 1.04rem; line-height: 1.6; }
.tstep:not(:nth-child(3n))::after { content: ""; position: absolute; top: 30px; left: 60px; right: -30px; height: 2px; background: linear-gradient(90deg, var(--accent), rgba(244,160,0,.15)); z-index: 1; }
@media (max-width: 860px) {
  .tjourney { grid-template-columns: 1fr 1fr; }
  .tstep:not(:nth-child(3n))::after { display: none; }
  .tstep:not(:nth-child(2n))::after { content: ""; display: block; position: absolute; top: 30px; left: 60px; right: -30px; height: 2px; background: linear-gradient(90deg, var(--accent), rgba(244,160,0,.15)); }
}
@media (max-width: 560px) { .tjourney { grid-template-columns: 1fr; } .tstep::after { display: none !important; } }

/* --- ELEV8D DIFFERENCE: elevated --- */
.page-trades .diff-intro { color: #cfcfcf; font-size: 1.22rem; line-height: 1.72; max-width: 74ch; margin-bottom: 38px; }
.diff-punch { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.18; letter-spacing: -.02em; color: #fff; margin: 0 0 40px; max-width: 20ch; }
.diff-punch b { color: var(--accent); }
.gold-callout { border: 1px solid rgba(244,160,0,.34); background: linear-gradient(180deg, rgba(244,160,0,.08), rgba(244,160,0,.02)); border-radius: 16px; padding: clamp(28px, 3.4vw, 44px); }
.gold-callout__label { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 22px; }
.page-trades .goldlist li { font-size: 1.1rem; line-height: 1.5; color: #f0f0f0; }
.page-trades .goldlist li svg { width: 24px; height: 24px; }

/* --- MISTAKES: mistake / better-move rows --- */
.fixrows { display: flex; flex-direction: column; gap: 16px; }
.fixrow { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; padding: clamp(22px, 2.4vw, 30px); border: 1px solid var(--line-light); border-radius: 14px; background: var(--white); transition: border-color .3s, transform .3s var(--ease); }
.fixrow:hover { border-color: var(--accent); transform: translateY(-2px); }
.fixrow__n { width: 46px; height: 46px; border-radius: 50%; background: #FFF3DA; border: 1px solid #FBE3B3; color: var(--accent-dark); display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; }
.fixrow h3 { color: var(--black); font-size: 1.22rem; margin-bottom: 8px; }
.fixrow__bad { color: #555; font-size: 1.04rem; line-height: 1.6; margin-bottom: 14px; }
.fixrow__good { display: flex; gap: 11px; align-items: flex-start; padding: 14px 16px; background: #F6FBF6; border-left: 3px solid #2E7D32; border-radius: 8px; }
.fixrow__good svg { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 2px; fill: none; stroke: #2E7D32; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fixrow__good p { color: #2f4f33; font-size: .98rem; line-height: 1.55; margin: 0; }
.fixrow__good b { color: #1f6e26; font-family: var(--font-head); }
@media (max-width: 560px) { .fixrow { grid-template-columns: 1fr; gap: 16px; } }

/* --- Hero: single CTA + support line (web design industry pages) --- */
.hero__cta--single { gap: 0; }
.indhero .hero__cta--single .btn--lg { width: auto; }
.hero__support { margin-top: 18px; font-size: .98rem; color: var(--grey-mid-2); }
.indhero .hero__support { text-align: center; }
.hero__support a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.hero__support a:hover { color: var(--accent-light); }

/* --- 2-column comparison variant (cmp3 with one rival) --- */
.cmp3--2 .cmp3__row { grid-template-columns: 1fr 1.15fr 1fr; }
@media (max-width: 820px) { .cmp3--2 .cmp3__row { grid-template-columns: 1fr; } }

/* --- Neutral 3-way platform comparison cards (eCommerce) --- */
.platgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.platcard { display: flex; flex-direction: column; border: 1px solid var(--line-light); border-radius: 16px; background: var(--white); overflow: hidden; transition: border-color .3s, transform .3s var(--ease), box-shadow .3s; }
.platcard:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(0,0,0,.22); }
.platcard__head { padding: clamp(22px, 2.4vw, 28px); border-bottom: 1px solid var(--line-light); background: #FBFAF8; }
.platcard__name { font-family: var(--font-head); font-weight: 700; font-size: 1.32rem; color: var(--black); letter-spacing: -.01em; }
.platcard__for { color: #666; font-size: .96rem; line-height: 1.5; margin-top: 8px; }
.platcard__rows { padding: clamp(20px, 2.2vw, 26px); display: flex; flex-direction: column; gap: 0; flex: 1; }
.platcard__row { padding: 13px 0; border-bottom: 1px solid var(--line-light); }
.platcard__row:last-child { border-bottom: none; }
.platcard__k { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 5px; }
.platcard__v { color: #444; font-size: .96rem; line-height: 1.5; }
.platnote { margin-top: 26px; display: flex; gap: 14px; align-items: flex-start; padding: 22px 24px; border-radius: 14px; background: #FFF8EA; border: 1px solid #FBE3B3; }
.platnote svg { flex: 0 0 auto; width: 24px; height: 24px; fill: none; stroke: var(--accent-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.platnote p { color: #6a5320; font-size: 1.02rem; line-height: 1.6; margin: 0; }
.platnote b { color: var(--accent-dark); font-family: var(--font-head); }
@media (max-width: 860px) { .platgrid { grid-template-columns: 1fr; } }

/* --- WHAT WE NEED: 3 grouped cards --- */
.need3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.need-card { border: 1px solid var(--line-light); border-radius: 16px; background: var(--white); padding: clamp(26px, 2.8vw, 34px); }
.need-card__ic { width: 48px; height: 48px; border-radius: 12px; background: #FFF7E8; border: 1px solid #FBE3B3; display: grid; place-items: center; margin-bottom: 20px; }
.need-card__ic svg { width: 24px; height: 24px; fill: none; stroke: var(--accent-dark); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.need-card h3 { color: var(--black); font-size: 1.18rem; margin-bottom: 14px; }
.need-card ul { display: flex; flex-direction: column; gap: 10px; }
.need-card li { display: flex; gap: 10px; align-items: flex-start; color: #4a4a4a; font-size: 1rem; line-height: 1.5; }
.need-card li svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 3px; fill: none; stroke: var(--accent-dark); stroke-width: 2.6; }
@media (max-width: 860px) { .need3 { grid-template-columns: 1fr; } }

/* --- RELATED: real article cards with banded header --- */
.page-trades .art-grid .acard { display: flex; flex-direction: column; }
.page-trades .acard__band { aspect-ratio: 16/8; display: flex; align-items: flex-end; padding: 20px; background: linear-gradient(150deg, #1a1408, #0d0d0d); position: relative; overflow: hidden; }
.page-trades .acard__band::after { content: ""; position: absolute; top: -40%; right: -10%; width: 60%; height: 160%; background: radial-gradient(circle, rgba(244,160,0,.22), transparent 65%); }
.page-trades .acard__band svg { width: 44px; height: 44px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; position: relative; z-index: 1; opacity: .9; }
.page-trades .acard__body { padding: 24px clamp(22px,2vw,26px) 26px; display: flex; flex-direction: column; flex: 1; }
.page-trades .acard h3 { font-size: 1.24rem; line-height: 1.28; margin-bottom: 10px; }
.page-trades .acard__desc { color: #666; font-size: .98rem; line-height: 1.55; margin-bottom: 20px; }
.page-trades .acard .txtlink { margin-top: auto; color: var(--accent-dark); }

/* --- FINAL CTA: bigger, benefit bullets --- */
.page-trades .final { padding-block: clamp(76px, 8vw, 124px); }
.page-trades .final h2 { font-size: clamp(2rem, 3.4vw, 2.9rem); }
.page-trades .final__lead { font-size: 1.18rem; line-height: 1.65; }
.cta-benefits { display: flex; flex-direction: column; gap: 12px; margin: 26px 0 34px; }
.cta-benefits li { display: flex; gap: 12px; align-items: center; color: #e2e2e2; font-size: 1.06rem; }
.cta-benefits li svg { flex: 0 0 auto; width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.page-trades .final .form { padding: clamp(28px, 3.4vw, 44px); }
.page-trades .final .field input, .page-trades .final .field textarea { font-size: 1.04rem; padding: 16px 18px; }
.page-trades .final .field label { font-size: .96rem; }
.page-trades .final .contact-row .val { font-size: 1.16rem; }
.page-trades .final .btn--lg { height: 58px; font-size: 1.1rem; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.contact-aside { display: flex; flex-direction: column; gap: 14px; }
.contact-aside .contact-row { border-color: var(--line-light); }
.contact-aside .contact-row:first-of-type { border-top: 1px solid var(--line-light); }
.contact-aside .lbl { color: var(--grey-mid); }
.contact-aside .val { color: var(--black); }
.contact-aside a.val:hover { color: var(--accent-dark); }
.contact-aside .contact-row svg { stroke: var(--accent-dark); }
.map-embed { margin-top: 8px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-light); aspect-ratio: 4/3; background: var(--grey-light); }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.3) contrast(1.05); }
/* form on light bg */
.form--light { background: var(--white); border: 1px solid var(--line-light); }
.form--light .field label { color: #555; }
.form--light .field input, .form--light .field textarea, .form--light .field select { background: #fff; border-color: #dcdcdc; color: #1a1a1a; }
.form--light .field input::placeholder, .form--light .field textarea::placeholder { color: #aaa; }
.form--light .field input:focus, .form--light .field textarea:focus, .form--light .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(244,160,0,.16); }
.form--light .form__ok h3 { color: var(--black); }
.form--light .form__ok p { color: #555; }
.field select {
  width: 100%; appearance: none; -webkit-appearance: none; background: #fff; border: 1px solid #dcdcdc; border-radius: var(--radius-sm);
  padding: 14px 40px 14px 16px; color: #1a1a1a; font-family: var(--font-body); font-size: 1rem; cursor: pointer; transition: border-color .2s, box-shadow .2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.field select:focus { outline: none; }
.field select:invalid { color: #aaa; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } .contact-aside { margin-top: 8px; } }

/* Trust signals strip (text + icon) */
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tsig { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border: 1px solid var(--line-dark); border-radius: var(--radius-sm); background: var(--off-black); }
.tsig svg { flex: 0 0 auto; width: 24px; height: 24px; stroke: var(--accent); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tsig span { font-family: var(--font-head); font-weight: 600; color: #fff; font-size: .98rem; }
@media (max-width: 760px) { .trust-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .trust-strip { grid-template-columns: 1fr; } }

/* 3-step process (Contact "what happens next") */
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position: relative; }
.step3 { padding: clamp(26px, 3vw, 34px); border: 1px solid var(--line-light); border-radius: var(--radius); background: var(--white); transition: border-color .3s, transform .3s var(--ease); }
.step3:hover { border-color: var(--accent); transform: translateY(-3px); }
.step3__n { width: 52px; height: 52px; border-radius: 50%; background: #FFF7E8; border: 1px solid #FBE3B3; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: var(--accent-dark); margin-bottom: 20px; }
.step3 h3 { color: var(--black); font-size: 1.2rem; margin-bottom: 10px; }
.step3 p { color: #555; font-size: .97rem; }
@media (max-width: 760px) { .steps3 { grid-template-columns: 1fr; } }

/* ============================================================
   CASE STUDY CARDS (overview + related)
   ============================================================ */
.cs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.cs-card {
  display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line-light);
  border-radius: var(--radius); padding: clamp(30px, 3.2vw, 44px); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.cs-card.hide { display: none; }
.cs-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 28px 60px -32px rgba(0,0,0,.26); }
.cs-card__tags { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.cs-card__big { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.8rem, 5vw, 4rem); color: var(--accent-dark); line-height: .95; letter-spacing: -.03em; }
.cs-card__metric { color: #444; font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; margin-top: 8px; margin-bottom: 18px; }
.cs-card h3 { color: var(--black); font-size: 1.3rem; line-height: 1.2; margin-bottom: 10px; }
.cs-card p { color: #555; font-size: .98rem; margin-bottom: 24px; }
.cs-card .txtlink { margin-top: auto; color: var(--accent-dark); }
.cs-tag { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 100px; }
.cs-tag--svc { background: var(--accent); color: #000; }
.cs-tag--ind { background: #F1F1F1; color: #666; }
@media (max-width: 720px) { .cs-grid { grid-template-columns: 1fr; } }

/* Case study detail — massive metric hero */
.cs-hero__metric { font-family: var(--font-head); font-weight: 700; font-size: clamp(3.6rem, 11vw, 7rem); color: var(--accent); line-height: .9; letter-spacing: -.04em; margin-bottom: 18px; }
.cs-hero__tags { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; flex-wrap: wrap; }
.cs-hero h1 { font-size: clamp(1.9rem, 3.8vw, 3rem); max-width: 22ch; }
.cs-hero__hook { color: var(--grey-mid-2); font-size: 1.15rem; margin-top: 20px; max-width: 56ch; }

/* takeaway callouts (light body) */
.takeaways { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 28px 0; }
.takeaway { display: flex; gap: 14px; padding: 22px; background: #FFF8EA; border: 1px solid #FBE3B3; border-radius: var(--radius-sm); }
.takeaway svg { flex: 0 0 auto; width: 22px; height: 22px; stroke: var(--accent-dark); fill: none; stroke-width: 2.4; margin-top: 2px; }
.takeaway p { margin: 0; font-size: .98rem; color: #444; line-height: 1.55; }
@media (max-width: 640px) { .takeaways { grid-template-columns: 1fr; } }

/* --- evidence / proof module (industry pages) --- */
.proofcard { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 3.4vw, 44px); align-items: center; border: 1px solid rgba(244,160,0,.34); background: linear-gradient(160deg, rgba(244,160,0,.09), rgba(244,160,0,.02)); border-radius: 18px; padding: clamp(28px, 3.4vw, 46px); margin-bottom: 36px; }
.proofcard__metric { text-align: center; padding-right: clamp(0px, 2vw, 28px); border-right: 1px solid rgba(244,160,0,.22); }
.proofcard__metric b { font-family: var(--font-head); font-weight: 700; font-size: clamp(3rem, 6vw, 4.6rem); color: var(--accent); line-height: .9; letter-spacing: -.03em; display: block; }
.proofcard__metric span { display: block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #cfcfcf; margin-top: 12px; }
.proofcard__body h3 { color: #fff; font-size: 1.4rem; margin-bottom: 16px; letter-spacing: -.01em; }
.proofcard__rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.proofcard__rows > div { display: flex; gap: 12px; font-size: 1.04rem; color: #cfcfcf; line-height: 1.5; }
.proofcard__rows b { color: #fff; font-family: var(--font-head); font-weight: 600; flex: 0 0 92px; }
.proofcard .txtlink { color: var(--accent); }
@media (max-width: 640px) { .proofcard { grid-template-columns: 1fr; gap: 22px; } .proofcard__metric { border-right: none; border-bottom: 1px solid rgba(244,160,0,.22); padding-right: 0; padding-bottom: 22px; } }

/* --- Healthcare "How We Do SEO" rework: callout + compact support rows --- */
.hc-callout { display: flex; gap: clamp(18px, 2.4vw, 28px); align-items: center; margin-top: 22px; padding: clamp(24px, 3vw, 34px); border: 1px solid var(--accent); border-radius: 16px; background: linear-gradient(150deg, #FFF8EA, #fff); box-shadow: 0 0 0 1px var(--accent), 0 26px 50px -36px rgba(244,160,0,.4); }
.hc-callout__ic { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 14px; background: var(--accent); display: grid; place-items: center; }
.hc-callout__ic svg { width: 27px; height: 27px; fill: none; stroke: #000; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hc-callout__body h3 { color: var(--black); font-size: clamp(1.2rem, 1.8vw, 1.5rem); letter-spacing: -.01em; margin-bottom: 8px; }
.hc-callout__body p { color: #5a5a56; font-size: 1.02rem; line-height: 1.6; }
.hc-support-label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-mid); margin: 38px 0 16px; }
.supportrows { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.supportrow { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 20px 22px; border: 1px solid var(--line-light); border-radius: 12px; background: #fbfbfa; transition: border-color .3s, transform .3s var(--ease); }
.supportrow:hover { border-color: var(--accent); transform: translateY(-2px); }
.supportrow__ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; background: #FFF3DA; border: 1px solid #FBE3B3; display: grid; place-items: center; }
.supportrow__ic svg { width: 20px; height: 20px; fill: none; stroke: var(--accent-dark); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.supportrow__t h4 { font-family: var(--font-head); font-weight: 600; font-size: 1.08rem; color: var(--black); letter-spacing: -.01em; margin-bottom: 6px; }
.supportrow__t p { color: #5d5d59; font-size: .95rem; line-height: 1.55; }
@media (max-width: 760px) { .supportrows { grid-template-columns: 1fr; } .hc-callout { flex-direction: column; align-items: flex-start; gap: 14px; } }

/* --- Outcome example cards (hospitality, dark, labelled fields) --- */
.outcome-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.outcome { border: 1px solid var(--line-dark); border-radius: 16px; background: #131313; padding: clamp(24px, 2.6vw, 32px); transition: border-color .3s, transform .3s var(--ease); display: flex; flex-direction: column; }
.outcome:hover { border-color: var(--accent); transform: translateY(-3px); }
.outcome__tag { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); background: rgba(244,160,0,.1); border: 1px solid rgba(244,160,0,.28); border-radius: 100px; padding: 5px 11px; align-self: flex-start; margin-bottom: 18px; }
.outcome__result { color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 1.14rem; line-height: 1.35; letter-spacing: -.01em; margin-bottom: 18px; }
.outcome__rows { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.outcome__rows > div { display: flex; gap: 11px; font-size: .92rem; color: #b4b4b4; line-height: 1.45; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.07); }
.outcome__rows b { color: #e8e8e8; font-family: var(--font-head); font-weight: 600; flex: 0 0 64px; }
@media (max-width: 860px) { .outcome-grid { grid-template-columns: 1fr; } }

/* --- Editorial three-pillar layout (Pro Services web design) --- */
.pillars { display: flex; flex-direction: column; }
.pillar { display: grid; grid-template-columns: 76px 1.2fr 1fr; gap: clamp(20px, 3vw, 48px); align-items: start; padding: clamp(28px, 3.4vw, 40px) 0; border-top: 1px solid var(--line-light); }
.pillar:last-child { border-bottom: 1px solid var(--line-light); }
.pillar__lead { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 76px; }
.pillar__n { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; line-height: 1; letter-spacing: .02em; color: var(--accent-dark); text-align: center; }
.pillar__ic { width: 48px; height: 48px; border-radius: 12px; background: #FFF7E8; border: 1px solid #FBE3B3; display: grid; place-items: center; }
.pillar__ic svg { width: 22px; height: 22px; fill: none; stroke: var(--accent-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pillar__body h3 { font-size: clamp(1.25rem, 1.9vw, 1.5rem); color: var(--black); letter-spacing: -.015em; margin-bottom: 12px; }
.pillar__body p { color: #555; font-size: 1.02rem; line-height: 1.6; }
.pillar__points { display: flex; flex-direction: column; gap: 11px; padding-top: 4px; }
.pillar__points li { position: relative; padding-left: 22px; font-size: .98rem; color: #444; line-height: 1.5; }
.pillar__points li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
@media (max-width: 860px) {
  .pillar { grid-template-columns: 1fr; gap: 16px; }
  .pillar__lead { flex-direction: row; align-items: center; gap: 14px; width: auto; }
}

/* refined, un-boxed insight note */
.pillar-note { display: flex; gap: clamp(18px, 2.4vw, 28px); align-items: flex-start; margin-top: clamp(34px, 4vw, 52px); padding-left: 4px; }
.pillar-note__rule { flex: 0 0 auto; width: 3px; align-self: stretch; min-height: 56px; border-radius: 3px; background: linear-gradient(180deg, var(--accent), rgba(244,160,0,.25)); }
.pillar-note__body { max-width: 80ch; }
.pillar-note__body h3 { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.3rem, 2vw, 1.65rem); color: var(--black); letter-spacing: -.015em; margin-bottom: 10px; }
.pillar-note__body p { color: #555; font-size: 1.06rem; line-height: 1.65; }

/* ============================================================
   PROFESSIONAL SERVICES — premium / advisory layer (.page-pro)
   differentiates the shared trades template: calmer, trust-led
   ============================================================ */
/* --- 1. Hero: calmer, more editorial than trades --- */
.page-pro .indhero { background: radial-gradient(135% 100% at 50% 0%, #161616 0%, #0c0c0c 60%, #080808 100%); padding-bottom: clamp(56px, 6vw, 92px); }
.page-pro .indhero .hero__glow { opacity: .5; width: min(700px, 88vw); height: min(540px, 62vw); background: radial-gradient(circle at 50% 42%, rgba(244,160,0,.16), rgba(244,160,0,.04) 46%, transparent 70%); }
.page-pro .indhero .hero__fig { opacity: .03; }
.page-pro .indhero .hero__grid { opacity: .12; }
.page-pro .indhero h1 { font-size: clamp(2.4rem, 4.2vw, 3.55rem); font-weight: 600; letter-spacing: -.022em; max-width: 19ch; }
.page-pro .indhero h1 .nb { color: var(--accent); }
.page-pro .indhero .hero__tagline { letter-spacing: .04em; color: #c4c4c4; }
.page-pro .indhero .hero__sub { color: #b8b8b8; max-width: 58ch; }
.page-pro .indhero .hero__badge { background: rgba(255,255,255,.04); border-color: #2c2c2c; }

/* --- 2. Client journey: considered decision path (vertical rail) --- */
.decpath { position: relative; max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; padding-left: 8px; }
.decpath__rail { position: absolute; left: 35px; top: 24px; bottom: 24px; width: 2px; background: linear-gradient(180deg, transparent, var(--line-dark) 12%, var(--line-dark) 88%, transparent); }
.decstep { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 22px; align-items: start; padding: 6px 0; }
/* all journey nodes share one calm, consistent gold treatment */
.decstep__node { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; background: #131313; border: 1px solid rgba(244,160,0,.45); display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: var(--accent); }
.decstep__body { padding: 6px 0 10px; }
.decstep__phase { display: inline-block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grey-mid); margin-bottom: 8px; }
.decstep__body h3 { color: #fff; font-size: 1.24rem; letter-spacing: -.01em; margin-bottom: 8px; }
.decstep__body p { color: #b0b0b0; font-size: 1.04rem; line-height: 1.6; max-width: 64ch; }
/* key stages emphasise copy only, not the node, so the journey stays one continuous path */
.decstep--key .decstep__phase { color: var(--accent); }
.decstep--key .decstep__body p { color: #cfcfcf; }
@media (max-width: 560px) {
  .decpath { padding-left: 0; gap: 10px; }
  .decpath__rail { left: 26px; }
  .decstep { grid-template-columns: 52px 1fr; gap: 16px; }
  .decstep__node { width: 52px; height: 52px; font-size: 1.2rem; }
  .decstep__body p { font-size: 1rem; }
}

/* --- 3. SEO vs Referrals: calm advisory split --- */
.advisory { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.advisory__col { border-radius: 18px; padding: clamp(28px, 3.2vw, 42px); border: 1px solid var(--line-light); }
.advisory__col--ceiling { background: #f6f6f4; }
.advisory__col--add { background: linear-gradient(168deg, #FFF8EA, #fff); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 30px 60px -38px rgba(244,160,0,.4); }
.advisory__tag { display: inline-block; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: #8a8a86; background: #ececea; border-radius: 100px; padding: 6px 13px; margin-bottom: 18px; }
.advisory__tag--gold { color: #000; background: var(--accent); }
.advisory__col h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); color: var(--black); letter-spacing: -.015em; line-height: 1.2; margin-bottom: 14px; }
.advisory__lead { font-size: 1.04rem; line-height: 1.6; color: #5a5a56; margin-bottom: 22px; }
.advisory__list { display: flex; flex-direction: column; gap: 14px; }
.advisory__list li { display: flex; gap: 13px; align-items: flex-start; font-size: 1.05rem; line-height: 1.45; color: #3a3a3a; }
.advisory__list li svg { flex: 0 0 auto; width: 21px; height: 21px; margin-top: 1px; fill: none; stroke: var(--accent-dark); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.advisory__list--ceiling li { color: #6a6a66; }
.advisory__list--ceiling li svg { stroke: #b4b4ae; }
.page-pro .vsclose { color: var(--black); }
.page-pro .vsclose b { color: var(--accent-dark); }
@media (max-width: 820px) { .advisory { grid-template-columns: 1fr; } }

/* --- 4. Proof module: bigger, more premium evidence --- */
.page-pro .proofcard { gap: clamp(28px, 4vw, 56px); padding: clamp(34px, 4vw, 56px); border-width: 1.5px; box-shadow: 0 40px 80px -44px rgba(244,160,0,.4); }
.page-pro .proofcard__metric b { font-size: clamp(2.7rem, 4.4vw, 4rem); }
.page-pro .proofcard__metric span { font-size: .72rem; }
.page-pro .proofcard__body h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.page-pro .proofcard__rows { gap: 13px; margin-bottom: 24px; }
.page-pro .proofcard__rows > div { padding-bottom: 13px; border-bottom: 1px solid rgba(244,160,0,.14); }
.page-pro .proofcard__rows > div:last-child { border-bottom: none; padding-bottom: 0; }
.page-pro .proofcard .txtlink { font-size: 1rem; font-weight: 600; }
.page-pro .diff-intro { font-size: clamp(1.1rem, 1.5vw, 1.28rem); }

/* --- 5. How We Do SEO: stronger core-pillar emphasis --- */
.page-pro .scard--core { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 24px 48px -34px rgba(244,160,0,.4); background: linear-gradient(180deg, #fffdf8, #fff); }
.page-pro .scard--core .icon { background: var(--accent); border-color: var(--accent); }
.page-pro .scard--core .icon svg { stroke: #000; }
.page-pro .scard:not(.scard--core) { background: #fbfbfa; }
.page-pro .scard:not(.scard--core) .scard__top h3 { color: #2a2a2a; }

/* ============================================================
   INDUSTRIES HUB — premium strategic redesign
   ============================================================ */
/* hero CTA + secondary link */
.indhub-hero__cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 34px; }
.indhub-hero__link { font-family: var(--font-head); font-weight: 600; color: var(--grey-mid-2); font-size: .98rem; }
.indhub-hero__link a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.indhub-hero__link a:hover { color: var(--accent-light); }

/* main industry-first card grid */
.indx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.indx-card { display: flex; flex-direction: column; padding: clamp(22px, 2vw, 28px); border: 1px solid var(--line-light); border-radius: 16px; background: var(--white); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; scroll-margin-top: 100px; }
.indx-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 26px 54px -32px rgba(0,0,0,.26); }
.indx-card__ic { width: 46px; height: 46px; border-radius: 12px; background: #FFF7E8; border: 1px solid #FBE3B3; display: grid; place-items: center; margin-bottom: 18px; transition: background .3s; }
.indx-card:hover .indx-card__ic { background: var(--accent); }
.indx-card__ic svg { width: 23px; height: 23px; fill: none; stroke: var(--accent-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.indx-card:hover .indx-card__ic svg { stroke: #000; }
.indx-card h3 { color: var(--black); font-size: 1.2rem; line-height: 1.22; letter-spacing: -.01em; margin-bottom: 10px; }
.indx-card p { color: #555; font-size: .97rem; line-height: 1.58; flex: 1; margin-bottom: 18px; }
/* compact action rows (cleaner than stacked buttons) */
.indx-card__acts { display: flex; flex-direction: column; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line-light); }
.indx-act { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; min-height: 46px; font-family: var(--font-head); font-weight: 600; font-size: .98rem; color: var(--black); transition: color .2s; }
.indx-act + .indx-act { border-top: 1px solid var(--line-light); }
.indx-act:hover { color: var(--accent-dark); }
.indx-act .arr { color: var(--accent); transition: transform .25s var(--ease); }
.indx-act:hover .arr { transform: translateX(4px); }
@media (max-width: 1080px) { .indx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .indx-grid { grid-template-columns: 1fr; } }

/* hub hero refinement (scoped, does not affect service-page heroes) */
.indhero--hub h1 { font-size: clamp(2.15rem, 3.8vw, 3.35rem); max-width: 19ch; line-height: 1.06; }
.indhero--hub .hero__sub { max-width: 890px; font-size: clamp(1.06rem, 1.35vw, 1.22rem); line-height: 1.6; }
.indhero--hub .hero__glow { opacity: .62; }
.indhero--hub .hero__fig { opacity: .04; }
.indhero--hub .indhub-hero__cta { justify-content: center; }

/* Why we build by industry — 3 cards (dark) */
.why-ind { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.why-card { background: var(--off-black); border: 1px solid var(--line-dark); border-radius: var(--radius); padding: clamp(26px, 2.6vw, 34px); transition: border-color .3s, transform .3s var(--ease); }
.why-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.why-card__ic { width: 48px; height: 48px; border-radius: 11px; background: rgba(244,160,0,.12); border: 1px solid rgba(244,160,0,.3); display: grid; place-items: center; margin-bottom: 20px; }
.why-card__ic svg { width: 24px; height: 24px; stroke: var(--accent); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.why-card h3 { color: #fff; font-size: 1.22rem; margin-bottom: 10px; }
.why-card p { color: var(--grey-mid-2); font-size: 1rem; line-height: 1.6; }
@media (max-width: 860px) { .why-ind { grid-template-columns: 1fr; } }

/* How strategy changes — 4 horizontal rows */
.strat-rows { display: flex; flex-direction: column; gap: 16px; }
.strat-row { display: grid; grid-template-columns: 56px 1.1fr 1.4fr; gap: clamp(18px, 2.4vw, 32px); align-items: center; padding: clamp(24px, 2.6vw, 32px) clamp(26px, 3vw, 38px); border: 1px solid var(--line-light); border-radius: 16px; background: var(--white); transition: border-color .3s, transform .3s var(--ease); }
.strat-row:hover { border-color: var(--accent); transform: translateY(-2px); }
.strat-row__ic { width: 56px; height: 56px; border-radius: 13px; background: #FFF7E8; border: 1px solid #FBE3B3; display: grid; place-items: center; }
.strat-row__ic svg { width: 28px; height: 28px; fill: none; stroke: var(--accent-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.strat-row__head h3 { color: var(--black); font-size: 1.2rem; letter-spacing: -.01em; margin-bottom: 8px; }
.strat-row__tags { display: flex; flex-wrap: wrap; gap: 7px; }
.strat-row__tags span { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dark); background: #FFF3DA; border-radius: 100px; padding: 4px 9px; }
.strat-row__focus { color: #555; font-size: 1rem; line-height: 1.6; }
.strat-row__focus b { color: var(--black); font-family: var(--font-head); }
@media (max-width: 820px) {
  .strat-row { grid-template-columns: 1fr; gap: 16px; }
  .strat-row__ic { width: 48px; height: 48px; }
}

/* SEO vs Web Design two-column */
.svw { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.svw-col { padding: clamp(30px, 3.2vw, 44px); border-radius: 18px; border: 1px solid var(--line-light); background: var(--white); display: flex; flex-direction: column; }
.svw-col__tag { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 16px; }
.svw-col h3 { color: var(--black); font-size: clamp(1.4rem, 2vw, 1.8rem); letter-spacing: -.015em; margin-bottom: 14px; }
.svw-col p { color: #555; font-size: 1.04rem; line-height: 1.65; flex: 1; margin-bottom: 26px; }
@media (max-width: 760px) { .svw { grid-template-columns: 1fr; } }