/* Commwiser — the home page hero, redesigned. One full-width photograph, the words set onto its dark side so picture
   and words read as one; nothing else in the hero. Loaded after home.css, which keeps the rest of the page as it is. */
.hx{isolation:isolate;min-height:max(100svh,640px);height:auto;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(68px + 40px) var(--gutter) 0;background:#0E1113;color:#F7F2EF;overflow:hidden}
.hx__bg{position:absolute;inset:0;z-index:-2}
.hx__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hx::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,17,19,.94) 0%,rgba(14,17,19,.78) 34%,rgba(14,17,19,.18) 66%,rgba(14,17,19,.08) 100%),linear-gradient(0deg,rgba(14,17,19,.85) 0%,transparent 34%)}
.hx__in{max-width:min(820px,62%);margin-bottom:clamp(28px,6vh,72px)}
.hx__four{font-family:var(--display);font-size:clamp(13px,1vw,15px);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#A9CBD8}
.hx h1{margin-top:clamp(16px,2.4vh,26px);font-family:var(--display);font-weight:400;font-size:clamp(46px,6.4vw,104px);line-height:.96;letter-spacing:-.03em;text-transform:none;color:#F7F2EF;text-wrap:balance}
.hx__l1,.hx__l2{display:block}
.hx h1 em{font-style:normal;font-weight:400;color:#A9CBD8}
.hx__say{margin-top:clamp(18px,2.6vh,28px);max-width:50ch;font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:rgba(247,242,239,.82)}
.hx__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3.2vh,36px)}
.hx__btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;background:#F7F2EF;border:1px solid #F7F2EF;color:#0E1113;font-family:var(--display);font-size:17px;transition:background .3s ease,color .3s ease}
.hx__btn:hover{background:transparent;color:#F7F2EF}
.hx__btn--line{background:transparent;color:#F7F2EF;border-color:rgba(247,242,239,.6)}
.hx__btn--line:hover{background:#F7F2EF;color:#0E1113}
.hx :focus-visible{outline:2px solid #A9CBD8;outline-offset:3px}
.hx .cue__lbl{color:rgba(247,242,239,.6)}
.hx .cue__pulse{background:linear-gradient(180deg,rgba(169,203,216,0),#A9CBD8)}
/* the podium stands to the right of the words on wide screens */
@media (min-width:901px){.hx__bg{left:36%}}
/* the headline fades in with the rest (home.css pins .hero h1 for the bars effect, which this hero does not use) */
.rdx .hx h1[data-in]{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease) var(--d,0ms),transform 1s var(--ease) var(--d,0ms)}
.js .is-ready .hx h1[data-in]{opacity:1;transform:none}
/* the photograph settles as the page opens */
.js .hx__bg img{transform:scale(1.05);transition:transform 2.4s var(--ease)}
.js .is-ready .hx__bg img{transform:none}
@media (prefers-reduced-motion:reduce){.js .hx__bg img{transform:none;transition:none}}
@media (max-width:900px){
  .hx{min-height:min(100svh,780px);padding-top:calc(60px + 40px)}
  .hx__in{max-width:none}
  .hx::before{background:linear-gradient(0deg,rgba(14,17,19,.97) 0%,rgba(14,17,19,.86) 48%,rgba(14,17,19,.3) 80%,rgba(14,17,19,.15) 100%)}
  .hx__bg img{object-position:62% 30%}
  .hx__btns{flex-direction:column;align-items:stretch}
  .hx__btn{justify-content:space-between}
}

/* ---- the other heroes: the same words, a different idea each; each a modifier on .hx ---- */
/* A. type: ivory, the words very large, nothing else */
.hx--type{background:#F7F2EF;color:var(--dust);justify-content:center}
.hx--type::before{content:none}
.hx--type .hx__in{max-width:none;margin-bottom:0;padding-bottom:clamp(40px,8vh,96px)}
.hx--type .hx__four{color:var(--steel-light)}
.hx--type h1{max-width:12ch;font-size:clamp(56px,9.2vw,152px);line-height:.92;letter-spacing:-.04em;color:var(--dust)}
.hx--type h1 em{color:#3E7C96}
.hx--type .hx__say{max-width:54ch;color:rgba(21,25,27,.78)}
.hx--type .hx__btn{background:var(--dust);border-color:var(--dust);color:#F7F2EF}
.hx--type .hx__btn:hover{background:transparent;color:var(--dust)}
.hx--type .hx__btn--line{background:transparent;color:var(--dust);border-color:rgba(21,25,27,.4)}
.hx--type .hx__btn--line:hover{background:var(--dust);color:#F7F2EF}
.hx--type .cue__lbl{color:rgba(21,25,27,.55)}.hx--type .cue__pulse{background:linear-gradient(180deg,rgba(34,77,95,0),#224D5F)}
/* B. split: ivory left, the photograph bleeding off the right, full height */
.hx--split{background:#F7F2EF;color:var(--dust);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:minmax(0,1fr) auto;padding-right:0}
.hx--split::before{content:none}
.hx--split .hx__in{grid-column:1;grid-row:1;align-self:center;max-width:none;padding-right:clamp(24px,4vw,64px);margin-bottom:0}
.hx--split .hx__side{grid-column:2;grid-row:1/span 2;margin:calc(-1 * (68px + 40px)) 0 0;display:block;min-height:100%}
.hx--split .hx__side img{width:100%;height:100%;object-fit:cover;object-position:45% 50%;display:block}
.hx--split .cue{grid-column:1;grid-row:2}
.hx--split .hx__four{color:var(--steel-light)}
.hx--split h1{color:var(--dust);font-size:clamp(44px,5.6vw,92px)}
.hx--split h1 em{color:#3E7C96}
.hx--split .hx__say{color:rgba(21,25,27,.78)}
.hx--split .hx__btn{background:var(--dust);border-color:var(--dust);color:#F7F2EF}
.hx--split .hx__btn:hover{background:transparent;color:var(--dust)}
.hx--split .hx__btn--line{background:transparent;color:var(--dust);border-color:rgba(21,25,27,.4)}
.hx--split .hx__btn--line:hover{background:var(--dust);color:#F7F2EF}
.hx--split .cue__lbl{color:rgba(21,25,27,.55)}.hx--split .cue__pulse{background:linear-gradient(180deg,rgba(34,77,95,0),#224D5F)}
/* C. light: a daylight photograph under an ivory gradient, the words dark on it */
.hx--light{background:#F7F2EF;color:var(--dust)}
.hx--light .hx__bg{left:0}
.hx--light .hx__bg img{object-position:70% 50%}
.hx--light::before{background:linear-gradient(90deg,rgba(247,242,239,.97) 0%,rgba(247,242,239,.9) 36%,rgba(247,242,239,.35) 68%,rgba(247,242,239,.1) 100%),linear-gradient(0deg,rgba(247,242,239,.9) 0%,transparent 36%)}
.hx--light .hx__four{color:var(--steel-light)}
.hx--light h1{color:var(--dust)}
.hx--light h1 em{color:#3E7C96}
.hx--light .hx__say{color:rgba(21,25,27,.8)}
.hx--light .hx__btn{background:var(--dust);border-color:var(--dust);color:#F7F2EF}
.hx--light .hx__btn:hover{background:transparent;color:var(--dust)}
.hx--light .hx__btn--line{background:transparent;color:var(--dust);border-color:rgba(21,25,27,.4)}
.hx--light .hx__btn--line:hover{background:var(--dust);color:#F7F2EF}
.hx--light .cue__lbl{color:rgba(21,25,27,.55)}.hx--light .cue__pulse{background:linear-gradient(180deg,rgba(34,77,95,0),#224D5F)}
/* D. mark: the Commwiser mark, large, on ink; the words beside it */
.hx--mark{background:#0E1113;justify-content:center}
.hx--mark::before{background:radial-gradient(60% 70% at 78% 50%,rgba(62,124,150,.22),transparent 70%)}
.hx__mark{position:absolute;right:calc(-1 * clamp(20px,4vw,80px));top:50%;width:clamp(320px,46vw,760px);transform:translateY(-46%);color:#F7F2EF;opacity:.1;z-index:-1}
.hx__mark svg{display:block;width:100%;height:auto;fill:currentColor}
.hx--mark .hx__in{margin-bottom:0;padding-bottom:clamp(40px,8vh,96px)}
.js .hx__mark{opacity:0;transform:translateY(-46%) translateX(40px);transition:opacity 1.6s ease .3s,transform 1.6s var(--ease) .3s}
.js .is-ready .hx__mark{opacity:.1;transform:translateY(-46%)}
@media (max-width:900px){
  .hx--type h1{font-size:clamp(46px,13vw,72px)}
  .hx--split{display:flex;flex-direction:column;padding-right:var(--gutter);padding-top:0}
  .hx--split .hx__side{order:-1;margin:0 calc(-1 * var(--gutter));height:44svh;min-height:0}
  .hx--split .hx__in{padding:28px 0 0}
  .hx--light::before{background:linear-gradient(0deg,rgba(247,242,239,.98) 0%,rgba(247,242,239,.9) 50%,rgba(247,242,239,.35) 82%,rgba(247,242,239,.15) 100%)}
  .hx__mark{width:70vw;right:-20vw;top:38%}
}
/* B: the header's dark links sit over the photograph, so its top fades to ivory under them */
.hx--split .hx__side{position:relative}
.hx--split .hx__side::after{content:"";position:absolute;left:0;right:0;top:0;height:150px;background:linear-gradient(180deg,rgba(247,242,239,.96) 0%,rgba(247,242,239,.6) 45%,transparent 100%)}

/* ---- heroes with an idea of their own ---- */
/* shared: an ivory hero's words, buttons and cue */
.hx--ivory{background:#F7F2EF;color:var(--dust)}
.hx--ivory::before{content:none}
.hx--ivory .hx__four{color:var(--steel-light)}
.hx--ivory h1{color:var(--dust)}
.hx--ivory h1 em{color:#3E7C96}
.hx--ivory .hx__say{color:rgba(21,25,27,.78)}
.hx--ivory .hx__btn{background:var(--dust);border-color:var(--dust);color:#F7F2EF}
.hx--ivory .hx__btn:hover{background:transparent;color:var(--dust)}
.hx--ivory .hx__btn--line{background:transparent;color:var(--dust);border-color:rgba(21,25,27,.4)}
.hx--ivory .hx__btn--line:hover{background:var(--dust);color:#F7F2EF}
.hx--ivory .cue__lbl{color:rgba(21,25,27,.55)}.hx--ivory .cue__pulse{background:linear-gradient(180deg,rgba(34,77,95,0),#224D5F)}

/* F. the two arenas: two photographs in one frame, the seam between them at the mark's own slash angle;
   the line across both. --dx is how far the seam travels sideways over the hero's height */
.hx--two{--sx:63%;--dx:calc(100svh / tan(55.753deg));justify-content:center;background:#0E1113}
.hx--two::before{background:linear-gradient(90deg,rgba(14,17,19,.9) 0%,rgba(14,17,19,.6) 38%,rgba(14,17,19,.15) 62%,rgba(14,17,19,.1) 100%),linear-gradient(0deg,rgba(14,17,19,.85) 0%,transparent 45%)}
.hx__arena{position:absolute;inset:0;z-index:-2}
.hx__arena img{width:100%;height:100%;object-fit:cover}
.hx__arena--court{clip-path:polygon(0 0,calc(var(--sx) + var(--dx) / 2) 0,calc(var(--sx) - var(--dx) / 2) 100%,0 100%)}
.hx__arena--court img{object-position:30% 50%}
.hx__arena--public{clip-path:polygon(calc(var(--sx) + var(--dx) / 2) 0,100% 0,100% 100%,calc(var(--sx) - var(--dx) / 2) 100%)}
.hx__arena--public img{object-position:60% 40%;filter:saturate(.7)}
.hx__seam{position:absolute;left:calc(var(--sx) - 1.5px);top:-2%;height:104%;width:3px;background:#A9CBD8;transform:rotate(calc(90deg - 55.753deg));transform-origin:50% 50%;z-index:-1;opacity:.85}
.hx__in--centre{max-width:min(760px,56%);margin-bottom:0;padding-bottom:clamp(36px,7vh,80px)}
.hx--two h1{max-width:12ch;font-size:clamp(46px,6vw,96px)}
.hx--two .hx__say{max-width:56ch}
.hx__two{display:flex;align-items:center;gap:14px;font-family:var(--display);font-size:clamp(12px,.95vw,14px);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#A9CBD8}
.hx__two i{width:36px;height:2px;background:#A9CBD8;transform:skewX(calc(-1 * (90deg - 55.753deg)))}
/* play: the public arena wipes in along the seam, then the seam itself */
.js .hx__arena--public{clip-path:polygon(calc(100% + var(--dx)) 0,100% 0,100% 100%,100% 100%);transition:clip-path 1.4s var(--ease) .2s}
.js .is-ready .hx__arena--public{clip-path:polygon(calc(var(--sx) + var(--dx) / 2) 0,100% 0,100% 100%,calc(var(--sx) - var(--dx) / 2) 100%)}
.js .hx__seam{opacity:0;transition:opacity .6s ease 1.5s}
.js .is-ready .hx__seam{opacity:.85}

/* G. the words hold the picture: "communication matters." is a window onto the courtroom */
.hx--window{justify-content:center}
.hx--window .hx__in{max-width:none;margin-bottom:0;padding-bottom:clamp(40px,8vh,96px)}
.hx--window h1{max-width:12ch;font-size:clamp(56px,9vw,150px);line-height:.94;letter-spacing:-.04em}
.hx--window h1 em.hx__win{display:inline-block;color:transparent;background:#5A452F url(../img/photos/courtroom-wide-1920.jpg) 50% 40%/cover no-repeat;-webkit-background-clip:text;background-clip:text;font-style:normal;font-weight:700;letter-spacing:-.035em;padding-right:.06em}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.hx--window h1 em.hx__win{color:#3E7C96;background:none}}
/* the picture drifts inside the letters while the hero is on screen */
@media (prefers-reduced-motion:no-preference){.hx--window h1 em.hx__win{animation:hxwin 18s ease-in-out infinite alternate}@keyframes hxwin{from{background-position:40% 40%}to{background-position:60% 50%}}}
.hx--window .hx__say{max-width:54ch}

/* H. the cut: one photograph cut along the mark's slash, bleeding off the top, right and bottom; the mark on the cut */
.hx--cut{--sx:64%;--dx:calc(100svh / tan(55.753deg));justify-content:center}
.hx__cutpic{position:absolute;top:0;right:0;bottom:0;width:calc(100% - var(--sx) + var(--dx) / 2);z-index:-1;clip-path:polygon(var(--dx) 0,100% 0,100% 100%,0 100%)}
.hx__cutpic img{width:100%;height:100%;object-fit:cover;object-position:40% 50%}
.hx__cutmark{position:absolute;left:calc(var(--sx) - var(--dx) / 2 + 2px);bottom:clamp(40px,9vh,96px);width:clamp(64px,6vw,96px);transform:translateX(-50%);color:#15191B;filter:drop-shadow(0 12px 22px rgba(21,25,27,.3))}
.hx__cutmark svg{display:block;width:100%;height:auto;fill:currentColor}
.hx--cut .hx__in{max-width:calc(var(--sx) - var(--dx) / 2 - clamp(24px,3vw,56px));margin-bottom:0;padding-bottom:clamp(40px,8vh,96px)}
.hx--cut h1{font-size:clamp(40px,5.2vw,80px)}
.js .hx__cutpic{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);transition:clip-path 1.3s var(--ease) .15s}
.js .is-ready .hx__cutpic{clip-path:polygon(var(--dx) 0,100% 0,100% 100%,0 100%)}
.js .hx__cutmark{opacity:0;transition:opacity .6s ease 1.3s}
.js .is-ready .hx__cutmark{opacity:1}

@media (max-width:900px){
  .hx--two{--dx:calc(100svh / tan(55.753deg) * .6)}
  .hx--two h1{font-size:clamp(40px,11vw,60px)}
  .hx__in--centre{max-width:none}
  .hx__two{font-size:11px;gap:10px}
  .hx--window h1{font-size:clamp(46px,13vw,72px)}
  /* the cut photograph becomes the top of the hero, cut along the slash at its foot */
  .hx--cut{padding-top:0}
  .hx__cutpic{position:static;width:100%;height:46svh;margin:0 calc(-1 * var(--gutter));width:calc(100% + 2 * var(--gutter));clip-path:polygon(0 0,100% 0,100% calc(100% - 44px),0 100%)}
  .hx__cutmark{left:auto;right:var(--gutter);top:calc(46svh - 70px);bottom:auto;transform:none;width:56px}
  .hx--cut .hx__in{max-width:none;padding-top:28px}
  .js .hx__cutpic{clip-path:polygon(0 0,100% 0,100% 0,0 0)}
  .js .is-ready .hx__cutpic{clip-path:polygon(0 0,100% 0,100% calc(100% - 44px),0 100%)}
}

/* "Seeing beyond the surface": the contour picture across the whole hero, fading out where the words sit */
.hx--contour{justify-content:center}
.hx--contour .hx__bg{left:0}
.hx--contour .hx__bg img{object-position:72% 50%}
.hx--contour::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#F7F2EF 0,rgba(247,242,239,.85) 70px,rgba(247,242,239,0) 160px),linear-gradient(90deg,#F7F2EF 0%,rgba(247,242,239,.94) 26%,rgba(247,242,239,.5) 46%,rgba(247,242,239,0) 66%)}
.hx--contour .hx__in{max-width:min(640px,46%);margin-bottom:0;padding-bottom:clamp(40px,8vh,96px)}
.hx--contour .hx__four{letter-spacing:.24em;color:rgba(21,25,27,.62)}
.hx--contour h1{max-width:9ch;font-size:clamp(56px,7.2vw,120px);line-height:.98;letter-spacing:-.03em;color:var(--dust)}
.hx--contour .hx__say{max-width:30ch;font-size:clamp(18px,1.5vw,22px);color:rgba(21,25,27,.76)}
.hx--contour .hx__btns{align-items:center;gap:clamp(20px,2.4vw,36px)}
.hx__link{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:17px;color:var(--dust);border-bottom:1px solid transparent;transition:border-color .3s ease}
.hx__link:hover{border-color:currentColor}
/* the lines drift very slightly as the page opens */
.js .hx--contour .hx__bg img{transform:scale(1.04);transition:transform 2.6s var(--ease)}
.js .is-ready .hx--contour .hx__bg img{transform:none}
@media (max-width:900px){
  .hx--contour .hx__in{max-width:none}
  .hx--contour::before{background:linear-gradient(0deg,#F7F2EF 0%,rgba(247,242,239,.92) 52%,rgba(247,242,239,.4) 80%,rgba(247,242,239,.2) 100%)}
  .hx--contour .hx__bg img{object-position:78% 30%}
  .hx--contour .hx__btns{flex-direction:row;flex-wrap:wrap}
}
/* the contour does not stop at the hero's edge: it carries on into the next section (Latest) and fades out there,
   behind its cards. The hero lets it overflow; the picture's box runs on below and is masked to nothing. */
.hx--contour{overflow:visible;z-index:0}
.hx--contour .hx__bg{bottom:auto;height:calc(100% + clamp(340px,44vh,480px));overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 58%,rgba(0,0,0,.45) 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 58%,rgba(0,0,0,.45) 78%,transparent 100%)}
.hx--contour .hx__bg img{object-position:72% 0}
/* the contour is a vector drawing: sharp at any size and on any screen */
/* the ivory wash that keeps the words clear covers the picture's full run, not just the hero */
.hx--contour::before{bottom:auto;height:calc(100% + clamp(340px,44vh,480px))}
@media (max-width:900px){.hx--contour .hx__bg,.hx--contour::before{height:calc(100% + 280px)}}
/* the section after the hero (Latest) paints its own ivory ground, which would cut the contour off at the hero's
   edge: leave it clear so the contour shows through it and fades out there */
/* (the home page's centre line runs behind the sections and was hidden here by that ground: a narrow ivory strip down the
   centre keeps it hidden, while the rest stays clear) */
.hx--contour ~ main .lead::before,.fx .hx--contour ~ main .lead::before{background:linear-gradient(#F7F2EF,#F7F2EF) 50% 0/4px 100% no-repeat}