/* PAGE CSS: business-transactions
   Enqueued by functions.php when the slug matches.
   Lifted verbatim from the approved static build. */


/* ==========================================================
   TYPE SCALE, matched to the homepage
     18px    running body copy (global default)
     16.5px  copy inside cards and panels
     16px    smallest tier
     lede    clamp(18px,1.85vw,22px)
   ==========================================================
   PAGE: /services/business-transactions/
   Built on the ASSET PROTECTION practice template. The devices
   below are shared with /services/asset-protection-planning/.
   Only the .ln--* heading sizes are tuned per page, because the
   headings are set to one line and their lengths differ.

   Devices: centred dark masthead, audience tiles, provisions
   with a tall image, two figures on navy, retained list,
   limits panel, closing.
   ========================================================== */

/* ---------- Centred dark masthead ---------- */
.top{background:var(--ink-deep);color:var(--cream);text-align:center;}
.top__in{padding-block:calc(var(--barh) + clamp(56px,6.5vw,96px)) clamp(52px,6vw,88px);}
.top .eyebrow{display:block;text-align:center;max-width:none;width:100%;text-indent:.28em;}
.top h1{font-size:clamp(38px,5.4vw,74px);line-height:1.04;color:var(--cream);
  max-width:16ch;margin:0 auto 26px;}
.top__lede{font-size:clamp(18px,1.85vw,22px);line-height:1.58;
  color:rgba(244,240,232,.82);max-width:56ch;margin:0 auto;}
.top__rule{width:56px;height:1px;background:var(--gold);margin:clamp(30px,3.4vw,44px) auto 0;}

/* ---------- Audience tiles ---------- */
.for{display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  border-top:1px solid var(--stone);border-bottom:1px solid var(--stone);}
.for__cell{padding:clamp(24px,2.8vw,38px) clamp(16px,1.8vw,26px);
  border-left:1px solid var(--stone);}
.for__cell:first-child{border-left:0;padding-left:0;}
.for__cell:last-child{padding-right:0;}
.for__cell h3{font-family:var(--display);font-weight:300;font-size:clamp(16px,1.6vw,20px);
  line-height:1.24;margin-bottom:10px;}
.for__cell p{font-size:16px;line-height:1.58;color:rgba(23,55,70,.82);margin:0;}

/* ---------- Provisions with image ---------- */
.prov__grid{display:grid;grid-template-columns:42fr 58fr;gap:clamp(32px,4.6vw,80px);
  /* stretch, not start. the image runs the full height of the numbered list
     beside it rather than sitting at a fixed 4/5 and leaving the column short.
     the row height is set by the copy, so the image follows it. */
  align-items:stretch;margin-top:clamp(40px,5vw,64px);}
.prov__media{position:relative;height:100%;min-height:0;overflow:hidden;background:var(--ink-deep);}
.prov__media img{width:100%;height:100%;object-fit:cover;display:block;}
.prov__list{border-top:1px solid var(--ink);}
.prov__row{padding-block:clamp(22px,2.4vw,30px);border-bottom:1px solid var(--stone);}
.prov__no{font-family:var(--display);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:12px;}
.prov__row h3{font-size:clamp(19px,2vw,25px);line-height:1.2;margin-bottom:12px;}
.prov__row p{font-size:16.5px;line-height:1.68;color:rgba(23,55,70,.88);margin:0;max-width:54ch;}

/* ---------- Two figures on navy ---------- */
.clock{background:var(--ink-deep);color:var(--cream);}
.clock h2{color:var(--cream);}
.clock > .wrap > p{color:rgba(244,240,232,.8);}
.clock__grid{display:grid;grid-template-columns:1fr 1fr;gap:0;
  margin-top:clamp(38px,4.6vw,60px);border:1px solid rgba(244,240,232,.24);}
.clock__cell{padding:clamp(28px,3.4vw,52px);}
.clock__cell + .clock__cell{border-left:1px solid rgba(244,240,232,.24);}
.clock__cell .clock__fig{font-family:var(--display);font-weight:200;font-size:clamp(44px,6vw,86px);
  line-height:.96;color:var(--gold);letter-spacing:-.02em;margin-bottom:16px;}
.clock__cell h3{font-size:20px;line-height:1.22;color:var(--cream);margin-bottom:12px;}
.clock__cell p{font-size:16.5px;line-height:1.66;color:rgba(244,240,232,.8);margin:0;}
/* the paragraph above the two figure cells and the note below them both run
   the full width of the chart between them, not the 64ch running measure. */
.clock__intro{margin:18px 0 0;max-width:none;}
.clock__note{font-size:16px;color:rgba(244,240,232,.62);margin:26px 0 0;max-width:none;}

/* ---------- Retained list ---------- */
.keep__grid{display:grid;grid-template-columns:44fr 56fr;gap:clamp(32px,5vw,88px);align-items:start;}
.keep ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--stone);}
.keep li{padding-block:19px;border-bottom:1px solid var(--stone);
  font-size:16.5px;line-height:1.62;color:rgba(23,55,70,.9);}
.keep li b{font-weight:600;color:var(--ink);}

/* ---------- Limits ---------- */
.care{border:1px solid var(--stone);padding:clamp(30px,3.6vw,56px);}
.care__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.2vw,52px);margin-top:32px;}
.care__grid h3{font-size:18px;margin-bottom:10px;}
.care__grid p{font-size:16.5px;line-height:1.66;color:rgba(23,55,70,.84);margin:0;}

/* ---------- Closing ---------- */
.end{background:var(--ink-deep);}
.end__grid{display:grid;grid-template-columns:84fr 116fr;gap:clamp(32px,4vw,72px);align-items:center;}
.end h2{color:var(--cream);max-width:17ch;}
.end p{color:rgba(244,240,232,.82);}
.end__row{display:flex;flex-wrap:nowrap;gap:14px;margin-top:8px;}
.end__row .btn{flex:0 0 auto;padding-inline:26px;}

/* ---------- One-line headings, sized to this page's strings ---------- */
.ln{max-width:none;white-space:nowrap;}
.ln--prov{font-size:clamp(24px,3.15vw,41px);}
.ln--clock{font-size:clamp(24px,3.05vw,40px);}
.ln--keep{font-size:clamp(24px,3.2vw,42px);}
.ln--care{font-size:clamp(23px,3.05vw,40px);}

@media (max-width:1080px){
  .for{grid-template-columns:1fr 1fr;}
  .for__cell{border-left:0;border-top:1px solid var(--stone);padding-inline:0;}
  .for__cell:nth-child(-n+2){border-top:0;}
  .prov__grid,.keep__grid,.end__grid{grid-template-columns:1fr;}
  /* single column here, so there is no copy beside it to match.
     give the height back and let the frame set its own shape.
     the 745px cap that used to live here is gone: it existed only because
     farm-sunset.jpg was a 745px file being stretched past its own
     resolution. that image is now 1527px and every other provisions image
     is 1536 or larger, so the frame can run the full measure again. */
  .prov__media{height:auto;aspect-ratio:16/10;}
  .ln{white-space:normal;}
  .ln--prov,.ln--clock,.ln--keep,.ln--care{font-size:clamp(24px,4.4vw,36px);max-width:22ch;}
}
@media (max-width:780px){
  .for,.clock__grid,.care__grid{grid-template-columns:1fr;}
  .clock__cell + .clock__cell{border-left:0;border-top:1px solid rgba(244,240,232,.24);}
  .end__row{flex-wrap:wrap;}
  .end__row .btn{width:100%;justify-content:center;}
}

/* ---------- Optional full-bleed ground on the closing band ----------
   Only present on pages whose data carries end_image. Same wash family as
   .top--media, but firmer at .82. The binding constraint is the GOLD
   eyebrow, not the cream headline: gold is a light ink, so it needs a
   darker ground than any cream text on the page. At .74 the eyebrow came
   in at 4.36:1, just under. Measured at .82: eyebrow 5.07:1 desktop and
   5.95:1 mobile, headline 10.37:1 and 9.19:1. */
.end--media{position:relative;overflow:hidden;}
.end--media .end__media{position:absolute;inset:0;z-index:0;}
.end--media .end__media img{width:100%;height:100%;object-fit:cover;
  object-position:50% 54%;filter:saturate(.84);}
.end--media .end__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(rgba(11,32,43,.74),rgba(11,32,43,.74)),
    radial-gradient(96% 86% at 50% 50%,
      rgba(11,32,43,0) 0%,
      rgba(11,32,43,.18) 62%,
      rgba(11,32,43,.44) 100%);
}
.end--media .end__grid{position:relative;z-index:1;}

/* ---------- Image under the retained-rights copy ----------
   Only present on pages whose data carries keep_image. The left cell of
   .keep__grid is short and the right list is long, so the column left a
   run of dead space below the intro. The image fills it and gives the
   section a horizon to sit against. */
.keep__media{margin:clamp(28px,3.4vw,44px) 0 0;position:relative;
  aspect-ratio:3/2;overflow:hidden;background:var(--ink-deep);}
.keep__media img{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:1080px){
  /* the grid has already collapsed to one column here, so the image would
     run the full measure and overpower the list. hold it back. */
  .keep__media{aspect-ratio:16/9;max-width:60ch;}
}

/* ---------- Optional full-bleed masthead ground ----------
   Only present on pages whose data carries a hero. The wash values are
   copied from the homepage .close__media treatment so a photographic
   masthead reads as the same device wherever it appears.
   The flat layer is .66 rather than the homepage's .80, because this
   image is already dark and .80 buried it. Measured at 1440 and 390:
   headline 6.90:1, lede 5.58:1 against the lightest ground pixel behind
   each. Do not lighten further, .60 puts the lede at 4.66:1. */
.top--media{position:relative;overflow:hidden;}
.top--media .top__media{position:absolute;inset:0;z-index:0;}
.top--media .top__media img{width:100%;height:100%;object-fit:cover;
  object-position:50% 58%;filter:saturate(.86);}
.top--media .top__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(rgba(11,32,43,.66),rgba(11,32,43,.66)),
    radial-gradient(94% 82% at 50% 50%,
      rgba(11,32,43,0) 0%,
      rgba(11,32,43,.20) 60%,
      rgba(11,32,43,.46) 100%);
}
.top--media .top__in{position:relative;z-index:1;}