/*
 * /home-v4/ — the StoryBrand homepage, from craa-home-v4.html (2026-10-28).
 *
 * Copied VERBATIM out of the design file — line 536 and lines 538-634 — with
 * two deliberate differences, both recorded here rather than quietly applied:
 *
 *  1. The design opens the block with
 *         :root{--font-display:'Lora',Georgia,serif}
 *     and that line is dropped. It sits on :root, so it would have re-set the
 *     display face for the WHOLE document, the live header and footer
 *     included — and Lora is only the mockup's stand-in for a face it could
 *     not load. The theme already defines --font-display as Meta Serif Pro,
 *     so every rule below that asks for var(--font-display) resolves to the
 *     real licensed face instead of the stand-in.
 *
 *  2. Rules are ADDED at the end, below the marked divider. The design fills
 *     the client wall with placeholder text names under a chip reading "Wire
 *     the live 31-logo wall"; this build wires the real wall as the theme's
 *     own moving marquee, which has to be fitted into that slot. The design's
 *     own .sb-logos rules stay here, verbatim and now unused, rather than
 *     being deleted — as do .sb-steps/.sb-step* and .sb-next, which the
 *     mockup styles but its markup never uses.
 *
 * Nothing else is edited: no property dropped, added or reordered. Everything
 * else the page uses — the tokens, .container, .section, .kicker, .statement,
 * .more-link, .reveal, .ph-chip — is already the theme's own.
 */

/* ============ HOME v4 — StoryBrand restructure (client-directed, per the approved mockup) ============ */
.sbh{position:relative;min-height:min(78vh,760px);display:flex;align-items:flex-end;background:var(--navy-deep);color:#fff;overflow:hidden}
.sbh-img{position:absolute;inset:0;background-size:cover;background-position:center;background-image:linear-gradient(180deg,rgba(6,18,32,0.5),rgba(6,18,32,0.82)),url('https://cramanya.com/wp-content/uploads/2022/10/case-law.jpg')}
.sbh-inner{position:relative;z-index:2;width:100%;padding:clamp(8rem,16vh,11rem) 0 0}
.sbh-kicker{font-size:0.74rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.75)}
.sbh-title{font-family:var(--font-display);font-size:clamp(2.1rem,4.4vw,3.6rem);font-weight:500;line-height:1.16;letter-spacing:-0.01em;max-width:21em;margin-top:1.1rem}
.sbh-lede{font-size:1.02rem;line-height:1.7;color:rgba(255,255,255,0.82);max-width:62ch;margin-top:1.2rem}
.sbh-ctas{display:flex;gap:0.8rem;flex-wrap:wrap;margin-top:1.8rem}
.btn-solid{display:inline-flex;align-items:center;gap:0.5rem;background:var(--blue-bright);color:#fff;font-size:0.8rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.95rem 1.5rem;text-decoration:none;transition:background .25s}
.btn-solid:hover{background:#2b79c0;color:#fff}
.btn-line{display:inline-flex;align-items:center;gap:0.5rem;border:1px solid rgba(255,255,255,0.55);color:#fff;font-size:0.8rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;padding:0.95rem 1.5rem;text-decoration:none;transition:all .25s}
.btn-line:hover{background:#fff;color:var(--navy);border-color:#fff}
.sbh-strip{margin-top:2.4rem;padding:1.1rem 0 1.4rem;border-top:1px solid rgba(255,255,255,0.22);font-size:0.8rem;letter-spacing:0.04em;color:rgba(255,255,255,0.75)}
.sbh-strip b{color:#fff;font-weight:600}
.sb-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.sb-head .statement{font-family:var(--font-display);font-weight:500;letter-spacing:-0.005em}
.sb-lede{font-size:0.97rem;line-height:1.7;color:var(--grey);max-width:46ch}
.sb-aud{display:grid;grid-template-columns:repeat(4,1fr);gap:0.3rem;margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.sb-aud-card{background:#fff;padding:1.5rem 1.4rem 1.6rem;border-top:2px solid var(--blue)}
.sb-aud-card h3{font-size:1.05rem;font-weight:700;letter-spacing:-0.005em;margin:0}
.sb-aud-card p{font-size:0.88rem;line-height:1.6;color:var(--grey);margin:0.55rem 0 0}
.sb-pa{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.sb-pa-card{display:flex;flex-direction:column;background:#fff;padding:1.7rem 1.6rem 1.6rem;transition:box-shadow .3s,transform .3s}
.sb-pa-card:hover{box-shadow:0 18px 40px rgba(8,20,35,0.09);transform:translateY(-2px)}
.sb-num{font-size:0.82rem;font-weight:700;letter-spacing:0.1em;color:var(--blue)}
.sb-pa-card h3{font-family:var(--font-display);font-size:1.3rem;font-weight:500;line-height:1.3;letter-spacing:-0.005em;margin:0.8rem 0 0}
.sb-pa-card p{font-size:0.92rem;line-height:1.65;color:#3d4145;margin:0.7rem 0 1.3rem}
.sb-pa-card .more-link{margin-top:auto}
.sb-how{background:radial-gradient(52% 72% at 0% 0%,rgba(99,188,175,0.30),rgba(99,188,175,0) 58%),linear-gradient(142deg,#0a5c82 0%,#004d7e 26%,#004571 44%,#003153 61%,#002640 75%,#00223a 84%);color:#fff;position:relative;overflow:hidden}
.sb-how .sb-lede{color:rgba(255,255,255,0.7)}
.sb-how .statement{color:#fff}
.sb-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,4vw,3.4rem);margin-top:clamp(2rem,4vw,3rem);position:relative;z-index:1}
.sb-step-num{font-family:var(--font-display);font-size:1.6rem;font-weight:500;color:var(--gold)}
.sb-step h3{font-family:var(--font-display);font-size:1.25rem;font-weight:500;margin:0.7rem 0 0}
.sb-step p{font-size:0.92rem;line-height:1.65;color:rgba(255,255,255,0.75);margin:0.6rem 0 0}
.sb-why{display:grid;grid-template-columns:1.1fr 1.4fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.sb-why-quote{border-left:2px solid var(--blue);padding-left:1.3rem;font-size:1.02rem;line-height:1.7;color:var(--ink);margin-top:1.6rem;max-width:46ch}
.sb-proof{display:grid;grid-template-columns:1fr 1fr;gap:0 2.4rem}
.sb-proof a{display:block;padding:1.3rem 0;border-top:1px solid var(--line);text-decoration:none}
.sb-proof h3{font-size:1rem;font-weight:700;color:var(--ink);margin:0;transition:color .2s}
.sb-proof a:hover h3{color:var(--blue)}
.sb-proof p{font-size:0.88rem;line-height:1.6;color:var(--grey);margin:0.45rem 0 0}
.sb-evidence{display:flex;justify-content:space-between;align-items:center;gap:1.5rem 3rem;flex-wrap:wrap;margin-top:clamp(2.4rem,4vw,3.4rem);padding-top:1.8rem;border-top:1px solid var(--line)}
.sb-logos{display:flex;flex-wrap:wrap;gap:0.5rem 2rem;align-items:center}
.sb-logos span{font-size:0.78rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#9AA4AE}
.sb-rate{display:flex;align-items:baseline;gap:0.7rem;white-space:nowrap}
.sb-rate b{font-family:var(--font-display);font-size:1.9rem;font-weight:500}
.sb-rate .stars{color:var(--gold);letter-spacing:0.15em;font-size:0.85rem}
.sb-rate a{font-size:0.78rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--blue)}
.sb-ins{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.sb-ins-card{display:flex;flex-direction:column;background:#fff;padding:1.6rem 1.5rem;border-top:2px solid var(--blue);transition:box-shadow .3s,transform .3s}
.sb-ins-card:hover{box-shadow:0 18px 40px rgba(8,20,35,0.09);transform:translateY(-2px)}
.sb-ins-cat{font-size:0.7rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--blue)}
.sb-ins-card h3{font-family:var(--font-display);font-size:1.22rem;font-weight:500;line-height:1.4;margin:0.9rem 0 1.4rem}
.sb-ins-card .more-link{margin-top:auto}
.sb-next{background:var(--blue);color:#fff;position:relative;overflow:hidden}
.sb-next-grid{display:grid;grid-template-columns:1.5fr auto;gap:2rem;align-items:center;position:relative;z-index:1}
.sb-next .statement{color:#fff}
.sb-next p{font-size:0.95rem;line-height:1.7;color:rgba(255,255,255,0.8);max-width:62ch;margin-top:1rem}
.sb-next small{display:block;font-size:0.78rem;color:rgba(255,255,255,0.55);margin-top:0.9rem}
.sb-next .btn-line{border-color:rgba(255,255,255,0.75)}
.sb-next-ctas{display:flex;flex-direction:column;gap:0.8rem;align-items:flex-start}
.sb-bars{position:absolute;top:0;right:0;height:100%;width:clamp(90px,10vw,160px);opacity:0.16;pointer-events:none;transform:scaleX(-1)}
.sb-bars rect{fill:#fff}
@media (max-width:1100px){.sb-aud{grid-template-columns:1fr 1fr}.sb-pa{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.sb-why{grid-template-columns:1fr}.sb-steps{grid-template-columns:1fr}.sb-next-grid{grid-template-columns:1fr}}
@media (max-width:640px){.sb-aud,.sb-pa,.sb-ins{grid-template-columns:1fr}.sb-proof{grid-template-columns:1fr}}

/* merged process+CTA closer */
.sb-how .kicker--light .kicker-strong{color:#fff}
.sb-how .kicker--light{color:rgba(255,255,255,0.75)}
.sb-cta{display:flex;justify-content:space-between;align-items:center;gap:1.6rem 3rem;flex-wrap:wrap;margin-top:clamp(2.4rem,4.5vw,3.6rem);padding:clamp(1.6rem,3vw,2.2rem) clamp(1.6rem,3vw,2.4rem);background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.05)}
.sb-cta-title{font-family:var(--font-display);font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:500;line-height:1.35;margin:0;color:rgba(255,255,255,0.72)}
.sb-cta-title span{color:#fff}
.sb-cta-note{font-size:0.78rem;color:rgba(255,255,255,0.55);margin:0.7rem 0 0}
.sb-cta-actions{display:flex;gap:0.8rem;flex-wrap:wrap;align-items:center}
.btn-gold{display:inline-flex;align-items:center;gap:0.5rem;background:var(--gold);color:var(--navy-deep);font-size:0.82rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:1.05rem 1.7rem;text-decoration:none;transition:filter .25s}
.btn-gold:hover{filter:brightness(1.08);color:var(--navy-deep)}
@media (max-width:760px){.sb-cta{flex-direction:column;align-items:stretch;text-align:left}.sb-cta-actions{flex-direction:column;align-items:stretch}.sb-cta-actions a{justify-content:center}}



/* how-we-work step TILES: gradient cards, corner arrow chip; interaction = borders draw from top-left (right + down) and arrow turns */
.hwt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(2rem,4vw,3rem);position:relative;z-index:1}
.hwt{position:relative;display:flex;flex-direction:column;background:linear-gradient(135deg,#1D5286 0%,#0E3153 78%);padding:1.6rem 1.6rem 4.6rem;text-decoration:none;overflow:hidden}
.hwt::before,.hwt::after{content:"";position:absolute;background:var(--gold);z-index:2;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.hwt::before{top:0;left:0;right:0;height:3px;transform:scaleX(0);transform-origin:left}
.hwt::after{top:0;left:0;bottom:0;width:3px;transform:scaleY(0);transform-origin:top}
.hwt:hover::before,.hwt:focus-visible::before,.hwt.is-active::before{transform:scaleX(1)}
.hwt:hover::after,.hwt:focus-visible::after,.hwt.is-active::after{transform:scaleY(1);transition-delay:.12s}
.hwt-label{font-size:0.74rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold)}
.hwt-title{font-family:var(--font-display);font-size:1.28rem;font-weight:500;line-height:1.35;color:#fff;margin:0.8rem 0 0}
.hwt-copy{font-size:0.88rem;line-height:1.65;color:rgba(255,255,255,0.75);margin:0.7rem 0 0}
.hwt-arrow{position:absolute;right:0;bottom:0;width:48px;height:48px;background:var(--gold);color:var(--navy-deep);display:flex;align-items:center;justify-content:center}
.hwt-arrow svg{width:21px;height:21px;transform:rotate(-45deg);transition:transform .35s cubic-bezier(.4,0,.2,1)}
.hwt:hover .hwt-arrow svg,.hwt:focus-visible .hwt-arrow svg,.hwt.is-active .hwt-arrow svg{transform:rotate(0deg)}
@media (max-width:900px){.hwt-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.hwt::before,.hwt::after,.hwt-arrow svg{transition:none}}

/* ---- added for this build, not in the design file ----------------------- */
/*
 * The client wall, as a moving marquee.
 *
 * The design draws this slot as a static row of placeholder names under a chip
 * reading "Wire the live 31-logo wall". It is now the theme's own
 * `.logo-marquee` — the same component the live front page uses — so all 31
 * logos travel past instead of eight sitting still behind a "+23 more" label.
 * The rules below only fit that component into this narrower slot; the
 * component itself is the theme's and is not touched.
 *
 * `.sb-logos` is therefore gone from the markup, and so are its rules' job.
 */

/* Share the row with the rating, and clip rather than push it off.
   min-width:0 is the load-bearing part: without it a flex child refuses to
   shrink below its content, and a marquee's content is a track about twenty
   screens wide — the rating would be shoved out of the viewport. */
.sb-evidence .logo-marquee{flex:1 1 340px;min-width:0}

/* The theme's marquee draws its own rule and air above, for when it sits
   alone under a section heading. Here it is already inside .sb-evidence,
   which has the border-top and the padding — so both would double up. */
.sb-evidence .logo-marquee{margin-top:0;padding-top:0;border-top:0}

/* The edge fades hang from 2.4rem to clear that padding. With the padding
   gone they have to start at the top, or the first 2.4rem of each logo
   crosses the boundary unfaded. */
.sb-evidence .logo-marquee::before,
.sb-evidence .logo-marquee::after{top:0}

/* Size and colour are deliberately NOT overridden here.
   The theme's own .logo-item img — 65px tall, 180px wide, full colour — is
   what the live home page shows, and this wall is meant to match it. An
   earlier pass shrank them to 34px and greyed them off; both are removed, so
   these logos and the ones on / are the same logos at the same size. */

/*
 * Practice-area tiles with a background image.
 *
 * The design draws these as white cards: blue number, near-black title, grey
 * copy, ink "Explore this practice". A photograph underneath makes every one
 * of those unreadable, so the modifier inverts the whole card — it is never
 * applied without the image, and the image is never applied without it.
 *
 * The scrim itself is NOT here. It travels with the image as an inline
 * background layer from preview-home-v4.php, where the measurement that chose
 * it is recorded, so artwork and wash stay one decision.
 *
 * Tiles with no artwork are untouched and keep the design's white card, which
 * is what makes it safe to fill these in one at a time.
 */
.sb-pa-card--art{background-size:cover;background-position:center;background-repeat:no-repeat}
.sb-pa-card--art h3{color:#fff}
.sb-pa-card--art p{color:rgba(255,255,255,0.80)}
.sb-pa-card--art .more-link{color:#fff}
/* The design lifts a card 2px on hover with a shadow tuned for white cards.
   On a dark tile that shadow is invisible, so the lift is carried by the
   artwork brightening very slightly instead. */
.sb-pa-card--art{transition:box-shadow .3s,transform .3s,filter .3s}
.sb-pa-card--art:hover{filter:brightness(1.12)}

/*
 * Bands that need less air above them than --sect gives.
 *
 * .section is padding-block:var(--sect) — clamp(4rem,9vw,7.5rem), so 7.5rem
 * on a wide screen. That is the right gap where one band of text meets
 * another, and too much where the band above already ends in something that
 * carries its own space: the hero, which closes with its own padding and the
 * practice-area strip, or the practice grid, whose cards end in whitespace of
 * their own. In both cases the two stack into a visibly empty screen.
 *
 * Fixed at 5rem rather than a clamp: this is a specific gap against a
 * specific thing above it, not a measure that should scale with the viewport.
 *
 * Only the top. The bottom keeps --sect, because below each of these is an
 * ordinary band boundary.
 *
 * On: "Who we help", "Practice areas" and "Insights" — which is every band on
 * the page bar the dark "How we work", whose colour block wants its own air.
 */
.section--tight-top{padding-top:5rem}

/*
 * Insight cards: the article's featured image across the top.
 *
 * The negative margins are the whole trick. The design pads .sb-ins-card by
 * 1.6rem/1.5rem, so a child sits inset from the card edge; pulling the band
 * back by exactly that padding makes it full-bleed to three sides while the
 * text below keeps its measure. The values must track the card's padding — if
 * that changes in the design, these change with it.
 *
 * A fixed 16:9 band, not the image's own shape: these three featured images
 * are 1267x817 and two 2362x2362 squares, and a row in mixed aspect ratios
 * reads as three unrelated cards rather than one set.
 *
 * The design's 2px blue rule along the card top is dropped — with a picture
 * starting at the same edge it read as a stripe laid over the photograph
 * rather than as the card's own accent. The picture is now the top edge.
 */
.sb-ins-card{border-top:0}
/* 2/1 rather than 16/9: at the same card width that is 11% less height, the
   "about 10%" asked for, and a cleaner ratio to hold to than 16/8.1. The
   square originals give up a little more of their top and bottom for it. */
.sb-ins-img{display:block;margin:-1.6rem -1.5rem 1.3rem;aspect-ratio:2/1;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--mist)}
/* The design lifts the card 2px on hover; the picture answers with a slow
   push in, so the whole card moves as one object rather than the frame
   sliding off a fixed image. */
.sb-ins-card .sb-ins-img{transition:transform .45s cubic-bezier(.4,0,.2,1)}
.sb-ins-card{overflow:hidden}
.sb-ins-card:hover .sb-ins-img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.sb-ins-card .sb-ins-img{transition:none}.sb-ins-card:hover .sb-ins-img{transform:none}}

/*
 * Practice-area cards: no numbering, and a floor on the height.
 *
 * The 01-06 spans are gone from the markup; the design's .sb-num rules are
 * left in place above, unused. With the number gone the title is the card's
 * first child, and the design gives it margin-top:0.8rem — written to sit it
 * below the number — which would now open an unexplained gap above the
 * heading, so that margin is zeroed.
 *
 * min-height keeps a short card from collapsing to its copy. The grid already
 * equalises cards within a row, so this governs the shortest ROW rather than
 * any single card, and matters most once a card carries artwork: a small dark
 * rectangle reads as a mistake where a deeper one reads as a panel.
 */
.sb-pa-card{min-height:245px}
.sb-pa-card h3{margin-top:0}

/*
 * Practice tiles: the bullet chips that replaced the prose sentence.
 * Samuel, 2026-11-05. Copy lives in $craa_tile_chips in preview-home-v4.php.
 *
 * WAS text-wrap:balance, CHANGED TO pretty the same day, because balance was
 * visibly wrong for this content and Samuel caught it on the Land Law card.
 *
 * balance minimises the LONGEST line, so it deliberately under-fills the
 * first one. On Land Law at the full desktop width that reads as a mistake,
 * because it splits a single value across the break:
 *
 *   balance            Title searches - Land transfers - Tenure      304.9px
 *                      conversion - Caveats - Mortgages -            289.9px
 *                      Condominiums - Landlord & tenant              255.4px
 *
 * "Tenure conversion" is one thing the firm does, and it is cut in half with
 * 129px of the line still free. Filling greedily instead puts the whole value
 * on line 1 — but then the last line orphans a single word:
 *
 *   no balance         Title searches - Land transfers - Tenure conversion -   410.5px
 *                      Caveats - Mortgages - Condominiums - Landlord &         396.0px
 *                      tenant                                                   43.9px
 *
 * pretty is the one that does both: fill the early lines, then adjust the end
 * so the last line is not an orphan. Same line count as greedy in the normal
 * case, so the four-line budget is unaffected either way.
 *
 * It does NOT stop a chip splitting in principle — only width does that, and
 * making chips unbreakable costs more than it is worth here: the widest card
 * would then need 372px to hold four lines, which the 3-column grid does not
 * reach until a 1414px viewport. That would put a common 1366px laptop on two
 * columns. Measured, rejected; the note is here so it is not re-derived.
 *
 * No font-size here on purpose. .sb-pa-card p already sets 0.92rem/1.65, and
 * the chip line counts were measured against exactly that — changing the size
 * here would silently invalidate them.
 */
.sb-pa-chips{text-wrap:pretty}

/*
 * The gap either side of the bullet, widened on Samuel's note of 2026-11-05.
 *
 * Padding on the inline span rather than more   characters: HTML
 * collapses runs of ordinary spaces, so extra width can only come from CSS or
 * from stacking non-breaking spaces — and each   added would bind more
 * text into one unbreakable token, which is exactly what a four-line brief
 * cannot afford.
 *
 * 0.4em is the measured ceiling-with-margin, not a round number. Line counts
 * per card (six cards, in grid order) against the real Inter face:
 *
 *     pad     desktop 434px   2-col 309px   phone 300px
 *     0.00em     333323         444434        444434
 *     0.40em     333333         444434        444444     <- here
 *     0.45em     333333         444434        444444
 *     0.55em     333333         444444        454444  OVER
 *
 * 0.55em puts a phone card on five lines, so 0.45 is the hard ceiling and 0.4
 * leaves a little room for a longer chip later. At 0.4em two columns still
 * hold four lines from V=777, so the 800px rule below keeps its margin.
 *
 * word-spacing on the paragraph would have been the lazy way to do this and
 * is wrong: it would also stretch the spaces INSIDE a chip, so
 * "Custody & access" would spread as much as the gaps between chips.
 */
.sb-pa-chips .sb-sep{padding:0 0.4em}

/*
 * The practice grid has its OWN column ladder, tighter than the other grids
 * on the page, which stay three-up to 1100 and two-up to 640.
 *
 * Not a style preference — arithmetic, and it moved on 2026-11-05 when the
 * cards went from six chips to eight, to use the empty space above the CTA.
 *
 * Eight explicit chips need 337px of text to set in four lines (the widest
 * card is Corporate & Commercial). Each layout therefore has a floor:
 *
 *     3 columns   (0.92V - 32) / 3 - 51.2 >= 337  ->  V >= 1301
 *     2 columns   (0.92V - 16) / 2 - 51.2 >= 337  ->  V >=  862
 *
 * Left at the old 1100 and 800, the bands between ran to five and six lines:
 *
 *     3-col V=1200  text 306px   5 5 5 5 5 5 lines
 *     3-col V=1101  text 276px   6 6 5 5 5 6
 *     2-col V= 801  text 309px   5 5 5 5 5 5
 *
 * THE SINGLE-COLUMN STACK IS DELIBERATELY NOT HELD TO FOUR LINES. A 390px
 * phone sets these at five, and that costs nothing there: the cards are
 * stacked, so each sizes itself and a taller one drags no sibling with it.
 * The four-line rule exists to keep a ROW even, and below 862 there are no
 * rows. Holding the phone to four would have meant cutting two chips from
 * every card to pay for a constraint that does not apply.
 *
 * Both rules must stay BELOW the max-width:1100px rule near the top of the
 * file, which also sets .sb-pa to two columns — same specificity, so source
 * order decides. They are scoped to .sb-pa alone; .sb-aud and .sb-ins keep
 * the original ladder.
 *
 * Figures are for the NBSP + bullet separator with 0.4em either side. The
 * bullet is 8.28px against a pipe's 4.89 at 0.92rem, and the padding adds
 * 11.8px per separator, so changing either moves every number here —
 * re-measure rather than assume.
 */
@media (max-width:1300px){.sb-pa{grid-template-columns:1fr 1fr}}
@media (max-width:861px){.sb-pa{grid-template-columns:1fr}}

/*
 * Put the hero content back inside the site container.
 *
 * .sbh-inner carries the .container class, so it should already line up with
 * every other section and with the logo in the header. It does not, because
 * the design writes its top offset as the padding SHORTHAND:
 *
 *     .sbh-inner{position:relative;z-index:2;width:100%;padding:clamp(...) 0 0}
 *
 * which also sets padding-left and padding-right to 0 and so wipes
 * .container's padding-inline:var(--pad). Same specificity — one class each —
 * and this stylesheet loads after the theme's, so the zero wins.
 *
 * The result is the hero text sitting up to 56px further left than everything
 * below it, and than the logo above it. Restoring the inline padding alone
 * fixes it; the vertical offset the shorthand was actually written for is left
 * exactly as the design set it.
 */
.sbh-inner{padding-inline:var(--pad)}

/* ---- the one requested change, kept separate so it can be undone --------- */
/*
 * "Adjust the inner cards so they sit well."
 *
 * The design reserves padding-bottom:4.6rem on every step tile — a band the
 * full width of the card — although the gold arrow chip is only 48px wide and
 * sits in the right-hand corner. The copy therefore stops about 74px short of
 * the card floor, which reads as a hollow card: that is the dead strip under
 * the text in the screenshot.
 *
 * The floor is dropped to 3.4rem (54.4px), which still clears the 48px chip
 * with room to spare, so the last line can never run under it. The tiles come
 * in tighter and the arrow reads as attached to the card rather than marooned
 * below it. Nothing else about the tile changes.
 *
 * To go back to the mockup exactly, delete this block — the verbatim rule
 * above it is untouched.
 */
.hwt{padding-bottom:3.4rem}

/*
 * The grid stretches all three tiles to the tallest one, so an unequal step
 * description would re-open the same gap on the shorter two. Pushing the chip
 * to the tile floor keeps them even whatever the copy does — which is already
 * how the design positions it, stated here so the two decisions stay together.
 */
.hwt-copy{margin-bottom:0}

/*
 * A little more hero height.
 *
 * The design sets min-height:min(78vh,760px). At that size the practice-area
 * strip lands hard against the bottom edge of the section — it reads as cut
 * off rather than as the closing line of the hero. This first went to
 * min(86vh,840px) and was halved back on 2026-10-28: enough air under the
 * strip that it no longer reads as trimmed, without the hero turning into a
 * full screen of its own.
 *
 * Both halves move together on purpose: 82vh alone would do nothing on a tall
 * monitor, where the px cap is what actually applies.
 */
.sbh{min-height:min(82vh,800px)}

/* ---- the hero becomes two slides ---------------------------------------- */
/*
 * Requested 2026-11-03: a second frame, cross-fading, its copy on the right.
 *
 * Three things had to be true for this not to disturb the design above.
 *
 * 1. THE SECTION MUST NOT CHANGE HEIGHT AS THE SLIDES SWAP. The frames are
 *    therefore stacked in one grid cell rather than laid out one after the
 *    other, so .sbh-inner is as tall as the taller of the two and stays there.
 *    The practice-area strip is outside both, in its own row, for the same
 *    reason — and because it is the hero's foot rather than a message, so
 *    repeating it per slide would only make it blink.
 *
 * 2. THE CROSS-FADE MUST NOT DIP. If both images simply animate their opacity
 *    the midpoint is half of each over .sbh's navy, and a quarter of that navy
 *    shows through as a visible darkening. So only the INCOMING image animates,
 *    above the outgoing one, which is held solid underneath at .is-prev until
 *    it is fully covered. Nothing is ever composited over bare background.
 *
 * 3. THE HIDDEN SLIDE MUST BE HIDDEN FROM EVERYTHING, not just from the eye.
 *    Its two buttons are real links; left at opacity:0 alone they would still
 *    take tab focus and still be read aloud, and a keyboard user would tab
 *    into a frame nobody can see. visibility:hidden takes them out of the tab
 *    order and the accessibility tree together, and is transitioned at the end
 *    of the fade rather than instantly so it does not cut the animation short.
 */
.sbh--slides .sbh-img{opacity:0;transition:opacity 1.1s ease}
.sbh--slides .sbh-img.is-active{opacity:1;z-index:1}
.sbh--slides .sbh-img.is-prev{opacity:1;z-index:0;transition:none}

.sbh--slides .sbh-inner{display:grid;grid-template-columns:minmax(0,1fr)}
/*
 * Both frames bottom out on the same line, just above the practice strip.
 * The row is as tall as the taller copy block, so without this the shorter
 * one would hang from the top of the row and leave a gap over the strip that
 * the other frame does not have. It matters most on a phone, where the
 * portrait crop keeps its open space at the FOOT and the words want to be in
 * it.
 */
.sbh--slides .sbh-copy{grid-area:1/1;align-self:end}
.sbh--slides .sbh-foot{grid-area:2/1}

.sbh--slides .sbh-copy{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
.sbh--slides .sbh-copy.is-active{opacity:1;visibility:visible;transition:opacity .75s ease .4s,visibility 0s}

/*
 * Copy on the right — BOTH frames, from 2026-11-03.
 *
 * The block moves rather than only its text, and the 34rem cap comes from
 * slide 2's photograph: the man in it ends at about 58% of the frame, and at
 * this width the column starts past him at 61%. Wider and the headline would
 * run back over his shoulder, which is both uglier and the one band where that
 * scrim has to work hardest.
 *
 * SLIDE 1 TAKES A WIDER ONE — .sbh-copy--wide below. Its headline is the
 * longer of the two and ran to four lines in 34rem; Samuel asked for three,
 * with a longer first line. Measured in the real face at 57.6px, the break he
 * wants needs "Legal guidance for businesses" to fit on one line, which is
 * 757px, so the column has to reach 48rem. Slide 2 is left at 34rem for the
 * reason above, and the two still agree where it shows: both are right-aligned
 * so their RIGHT edges line up exactly, and only the ragged left differs —
 * which is ragged anyway.
 *
 * The two max-widths inherited from the design — 21em on the title, 62ch on
 * the lede — are wider than this block, so the block is what binds and they can
 * be left exactly as the mockup set them.
 */
.sbh-copy--right{justify-self:end;text-align:right;max-width:min(34rem,52%)}
.sbh-copy--right .sbh-ctas{justify-content:flex-end}

/*
 * Push the title and the lede to the END of the column.
 *
 * text-align:right aligns the TEXT inside a box; it does not move the box. The
 * design gives both of these their own measure - 21em on the title, 62ch on
 * the lede - and a block with a max-width sits at the start edge of its
 * container unless told otherwise. On the 34rem column neither measure binds,
 * so nothing showed. On slide 1's 48rem column the lede's 62ch (638px - Inter sets "0" at 0.631em, measured 2026-11-04)
 * is a good deal narrower than the 768px available, so its box sat at the LEFT
 * and its right-aligned text stopped about 260px short of where the headline,
 * the kicker and the button all end. That is the ragged right edge in the
 * screenshot of 2026-11-04.
 *
 * margin-inline-start:auto moves the box itself. Reset in the portrait query
 * below, where the text goes back to left-aligned: there the lede's measure
 * still binds on a wide portrait tablet, and an auto start margin would push a
 * LEFT-aligned box to the right, which is the same bug mirrored.
 */
.sbh-copy--right .sbh-title,.sbh-copy--right .sbh-lede{margin-inline-start:auto}

/*
 * Let the browser balance the headline's lines.
 *
 * Added 2026-11-04 when "businesses" went back into slide 1's headline. Under
 * a greedy wrap that line fills to 757px, then 668px, and leaves "Uganda."
 * alone on a 213px third line - the same orphan that was the first thing wrong
 * with slide 2's old "Africa." ending. text-wrap:balance keeps the line COUNT
 * and minimises the longest line, which turns it into 469 / 635 / 535.
 *
 * Measured, not assumed: it changes nothing on slide 2 at either breakpoint,
 * and because balance never alters the number of lines it cannot move any
 * band, so neither wash is affected. Browsers without it fall back to the
 * greedy wrap, which is simply today's behaviour.
 */
.sbh-title{text-wrap:balance}

/*
 * Slide 1's wider column: 48rem, capped at 58% of the container.
 *
 * Both halves are measured, not picked. 48rem is what the three-line break
 * costs at the title's full 57.6px. The 58% decides how far down the range
 * that break survives — below the cap the column shrinks with the container
 * and the headline falls back to four lines, which is fine, it just happens
 * sooner or later:
 *
 *     52%   three lines from 1680px up
 *     58%   three lines from 1440px up    <- here
 *     62%   three lines from 1366px up
 *
 * It is not free, and the price is paid in the scrim rather than here. The
 * wider the column, the further left the longest line reaches across the
 * photograph, and the further left the wash has to start: 52% keeps text east
 * of 0.487 of the frame, 58% of 0.437, 62% of 0.411. At 62% the wash would be
 * deep across the flyover itself, which is the subject. 58% stops just short
 * of it and covers every common laptop.
 */
.sbh-copy--wide{max-width:min(48rem,58%)}

/*
 * The strip keeps the rule it was drawn with; it just moves up one element so
 * the dots can sit on the same line. .sbh-strip's own border is the one being
 * replaced, not doubled — hence the explicit 0.
 */
.sbh-foot{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-top:2.4rem;border-top:1px solid rgba(255,255,255,0.22)}
.sbh-foot .sbh-strip{margin-top:0;border-top:0}
/*
 * The slide controls are the THEME'S, not a new component: .hero-controls and
 * .hero-count, the same pair the live front page's slider uses, so their look
 * is defined once in shared.css and this page inherits any future change to
 * it. Replaces the bar-dots this build carried first.
 *
 * Only two things are overridden, and both are positional. shared.css makes
 * .hero-controls absolute at the bottom-right of the hero, floating over the
 * artwork; here they belong in the hero's foot, on the same rule as the
 * practice-area strip, so position goes back to static and the absolute
 * offsets with it. Everything visual - the button colours, the hover, the
 * counter's size and letter-spacing - is left to the theme.
 *
 * Specificity: .sbh-foot .hero-controls is two classes against shared.css's
 * one, so this wins wherever both load, without !important.
 */
.sbh-foot .hero-controls{position:static;right:auto;bottom:auto;flex:none}

/*
 * Narrow AND upright. On a phone held portrait, background-size:cover throws
 * away about two-thirds of the wide crop's width — the empty blue the
 * right-hand column was composed around is simply not on screen. So both
 * frames go full width and left, and slide 2 swaps to the portrait artwork
 * (that rule is emitted by the template, which is where the URLs are).
 *
 * The orientation test is not decoration. A phone turned sideways is about
 * 2:1, which is the wide crop's own ratio: it fits exactly, empty right-hand
 * side and all, so the designed arrangement is the RIGHT one there and a width
 * test on its own would have broken it.
 */
@media (max-width:860px) and (orientation:portrait){
  .sbh-copy--right,.sbh-copy--wide{justify-self:stretch;text-align:left;max-width:none}
  .sbh-copy--right .sbh-title,.sbh-copy--right .sbh-lede{margin-inline-start:0}
  .sbh-copy--right .sbh-ctas{justify-content:flex-start}
  .sbh-foot{flex-wrap:wrap;gap:0.8rem}
  /*
   * The practice-area strip comes off the hero on a phone.
   *
   * It is the one element here that genuinely did not survive the narrow
   * layout: six practice areas on one line at 1869px, but three wrapped lines
   * at 390px, eating 130px of a frame that has none to spare. The areas are
   * listed again further down the page, so nothing is lost by dropping them
   * from the hero.
   *
   * IT IS NOT JUST 130px LESS. Removing it takes the hero UNDER its own
   * min-height, so the section stops being content-driven: .sbh is
   * align-items:flex-end, so .sbh-inner now bottoms out in a 692px box with
   * slack above it rather than filling it from the top. Everything in the copy
   * moves DOWN the frame — the headline from 0.246 to 0.370, the kicker from
   * 0.195 to 0.318 — which on both crops means off the subject and onto the
   * open blue beneath it. Both portrait washes were re-derived for that and
   * came out markedly lighter over the pictures. Assuming the bands merely
   * shift UP by the strip's height would have been the easy mistake.
   *
   * .sbh-foot keeps its rule and its dots, with padding-top above so they are
   * not pinned against it.
   */
  .sbh-strip{display:none}
  /*
   * Anchor the portrait crop to its left edge, so Claire is the one the frame
   * keeps. `cover` still has to lose width here — a 650x1000 file in a 390x825
   * box sheds about 27% of it — and centred it would take half off each side,
   * trimming her and him equally. Left-anchored it all comes off the right,
   * which is where he is, so on a phone the frame is her and the conference
   * banner. Deliberate: she is the point of focus. The vertical ramp above is
   * unaffected and every band still measures the same.
   */
  .sbh-img--2{background-position:left center}
}

/*
 * Reduced motion: no fade at all, and the script reads the same query and does
 * not advance on its own. The dots still work, so both frames stay reachable —
 * the preference is about movement, not about hiding content.
 */
@media (prefers-reduced-motion:reduce){
  .sbh--slides .sbh-img,.sbh--slides .sbh-copy{transition:none}
}