/* shared */
/* ==========================================================================
   Tenos — shared block components.
   Auto-prepended to every block CSS bundle by the Blocks plugin's endpoints and by
   enqueue_template_blocks(). Everything here is used by two or more blocks;
   a rule used by exactly one block belongs in that block's own CSS.

   Tokens come from resources/css/global.css. Buttons from buttons.css.
   ========================================================================== */


/* --- Card (article cards, discover/careers cards) ------------------------ */

.card{
  display:flex;flex-direction:column;gap:1rem;
  padding:clamp(20px, 2.4vw, 32px);min-height:200px;
  text-decoration:none;color:var(--navy);
  transition:transform var(--speed) var(--ease);
}
.card:hover{transform:translateY(-4px)}
.card__label{font-size:var(--step-micro)}
.card__title{
  font-family:var(--font-display);font-size:var(--step-body);font-weight:700;line-height:1.25;
}
.card__body{font-size:var(--step-body)}
.card .link-arrow{margin-top:auto;align-self:flex-start}

.card--cyan  {background:var(--cyan)}
.card--green {background:var(--green)}
.card--yellow{background:var(--yellow)}
.card--white {background:var(--white)}
.card--purple{background:var(--purple);color:var(--white)}
.card--pink  {background:var(--pink);color:var(--white)}
.card--navy  {background:var(--navy);color:var(--white)}
.card--orange{background:var(--orange);color:var(--navy)}
.card--tall  {min-height:290px}

@media (prefers-reduced-motion: reduce){
  .card:hover{transform:none}
}


/* --- Collage (three overlapping photos) ----------------------------------
   Images sit on a 12x12 grid so they can overlap; below 900px the stack
   flattens into a simple grid.
   ------------------------------------------------------------------------ */

.collage{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  grid-template-rows:repeat(12, 1fr);
  aspect-ratio:4 / 3;
}
.collage>*{min-width:0;min-height:0;overflow:hidden}
.collage img{
  width:100%;height:100%;object-fit:cover;
  background:var(--grey-100);font-size:0.8125rem;color:var(--ink);
}

/* Mobile: the collage grid is proportional, so the composition holds at any
   width — flattening it into equal 4:3 tiles was what read badly, because the
   small overlapping accent became a third full-size photo (and in the CTA band
   and home hero that accent is a crop of a photo already in the collage, so it
   showed twice). Keep the layout, drop the accent: the tile it sits on always
   spans the area beneath it, so nothing leaves a hole. */
@media (max-width: 700px){
  /* Doubled class so this beats the per-block ratios (equal specificity, and
     block CSS loads after shared): the desktop ratios are landscape-ish, which
     leaves the two remaining photos squat on a phone. */
  .collage.collage{aspect-ratio:1 / 1}
  .collage__accent{display:none}
}


/* --- Media pair (two overlapping photos) --------------------------------- */

.media-pair{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  grid-template-rows:repeat(12, 1fr);
  aspect-ratio:4 / 3;
}
.media-pair>*{min-width:0;min-height:0;overflow:hidden}
.media-pair img{
  width:100%;height:100%;object-fit:cover;
  background:var(--grey-100);font-size:0.8125rem;color:var(--ink);
}
.media-pair__a{grid-area:1 / 1 / 8 / 9}
.media-pair__b{grid-area:4 / 6 / 13 / 13}

@media (max-width: 700px){
  .media-pair{grid-template-columns:repeat(2, 1fr);grid-template-rows:none;gap:8px;aspect-ratio:auto}
  .media-pair>*{grid-area:auto !important;aspect-ratio:4 / 3}
}


/* --- Breadcrumb ----------------------------------------------------------
   Rendered by tenos_breadcrumb() inside hero blocks and CPT singles.
   Inherits its colour from the surface it sits on.
   ------------------------------------------------------------------------ */

.breadcrumb__list{
  display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;
  margin:0;padding:0;list-style:none;
  font-size:var(--step-micro);font-weight:500;
}
.breadcrumb__list>li{display:flex;align-items:center;gap:0.5rem}
.breadcrumb__list>li+li::before{
  content:"";width:5px;height:5px;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  transform:rotate(45deg);opacity:0.7;
}
.breadcrumb a{text-decoration:none;opacity:0.75}
.breadcrumb a:hover{opacity:1;text-decoration:underline}
.breadcrumb [aria-current="page"]{font-weight:700}
.breadcrumb__home{display:inline-flex}
.breadcrumb__home svg{width:clamp(15px,1.15vw,22px);height:auto}


/* --- Tabs (category filters) --------------------------------------------- */

.tabs{display:flex;flex-wrap:wrap;gap:clamp(1.25rem, 3vw, 2.5rem)}
.tabs a{
  padding-bottom:6px;border-bottom:2px solid transparent;
  font-size:var(--step-nav);text-decoration:none;
}
.tabs a:hover{border-bottom-color:currentColor}
.tabs [aria-current="page"]{font-weight:700;border-bottom-color:currentColor}


/* --- Accordion -----------------------------------------------------------
   Real <details>/<summary> with a shared name, so one opens at a time and
   the whole thing works with JavaScript off. The +/− is CSS off [open].
   ------------------------------------------------------------------------ */

/* The artwork rules these at full-strength ink (#1E3096); currentColor keeps
   that true on navy surfaces too. */
.accordion{border-top:1px solid currentColor}
.accordion__item{border-bottom:1px solid currentColor}

.accordion__summary{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:clamp(14px, 1.8vw, 34px) 0;
  font-family:var(--font-display);font-size:var(--step-h3);font-weight:300;line-height:1.2;
  cursor:pointer;list-style:none;
}
.accordion__summary::-webkit-details-marker{display:none}
.accordion__summary:hover{opacity:0.72}

.accordion__summary::after{
  content:"";flex:none;width:22px;height:22px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition:transform var(--speed) var(--ease);
}
.accordion__item[open] .accordion__summary::after{
  background:linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
  transform:rotate(180deg);
}

.accordion__body{padding:0 clamp(2rem, 6vw, 5rem) clamp(20px, 2.4vw, 32px) 0;max-width:68ch}
.accordion__body>*{margin:0}
.accordion__body>*+*{margin-top:1rem}


/* --- Panel (inset card padding; surface-* supplies the colour) ----------- */

.panel{padding:clamp(28px, 4vw, 56px)}
.panel--flush{padding:0}


/* --- Small eyebrow (cards and feature panels) ---------------------------- */

.eyebrow--sm{font-size:var(--step-micro);font-weight:400;margin:0 0 0.875rem}

/* page-hero */
/* ==========================================================================
   Page Hero — design modules 14 a–f + 15.
   Uses from shared: .container, .breadcrumb, .collage, .media-pair, .tabs

   The band is painted with a hard-stopped gradient rather than a background
   colour, so it can end part-way down the section and let the photography
   hang past it. --phero-drop is that overhang, and it is also the section's
   bottom padding: one value lines up the band, the photo and the section.
   ========================================================================== */

.m-phero{
  --phero-bg:   var(--navy);
  --phero-drop: 0px;

  position:relative;
  background:linear-gradient(
    var(--phero-bg) 0 calc(100% - var(--phero-drop)),
    transparent     calc(100% - var(--phero-drop))
  );
  padding-block:clamp(26px, 2.7vw, 52px) var(--phero-drop);
  color:var(--white);
}

.m-phero--green {--phero-bg:var(--green); color:var(--navy)}
.m-phero--yellow{--phero-bg:var(--yellow);color:var(--navy)}

.m-phero__inner{position:relative}

.m-phero__copy{padding-block:clamp(34px, 4.65vw, 89px) clamp(38px, 5.6vw, 107px)}
/* Label band is 492px on the artboards; the 59px goes below the heading. */
.m-phero--label .m-phero__copy{padding-bottom:clamp(48px, 8.6vw, 166px)}
.m-phero--media .m-phero__copy{padding-block:clamp(44px, 7.15vw, 137px) clamp(48px, 12.7vw, 244px)}
/* Portrait band is also 492px (excluding the hanging portrait). */
.m-phero--portrait .m-phero__copy{padding-block:clamp(44px, 7.15vw, 137px) clamp(40px, 4.4vw, 84px)}

/* The measure is set on the heading, not the column: ch resolves against the
   element's own font-size. */
.m-phero__title{
  max-width:10.4em;
  font-family:var(--font-display);
  font-size:var(--step-h2);
  font-weight:300;
  line-height:1.30;
  letter-spacing:-0.02em;
  margin:0;
}
.m-phero__title--bold{font-size:var(--step-h1);font-weight:700;line-height:1.14;max-width:13.1em}

/* --- Service eyebrow ------------------------------------------------------ */
.m-phero__service{
  display:flex;align-items:center;gap:1rem;
  margin:0 0 clamp(16px, 1.8vw, 26px);
  font-size:var(--step-body);font-weight:700;
}
/* Sized against the artwork's icon, which sits about four times the label's
   cap height — the 46px box read as too small on every service page. */
.m-phero__icon{flex:none;display:grid;place-items:center;width:clamp(56px, 4.9vw, 94px);height:clamp(56px, 4.9vw, 94px)}
.m-phero__icon svg{width:100%;height:100%;display:block}

/* --- Service style (Tenos_Services_Page.pdf p2): shorter band (650 @1920), the
   collage starts lower (152) and hangs 238 past the band. ------------------ */
.m-phero--service.m-phero--media{--phero-drop:clamp(48px, 12.4vw, 238px)}
.m-phero--service.m-phero--media .m-phero__copy{
  min-height:clamp(260px, 29.8vw, 572px);
  padding-bottom:clamp(48px, 8.75vw, 168px);
}
.m-phero--service.m-phero--media .m-phero__media{top:clamp(0px, 5.2vw, 100px)}
@media (max-width: 900px){
  .m-phero--service.m-phero--media{--phero-drop:0px}
  .m-phero--service.m-phero--media .m-phero__copy{padding-bottom:0}
}

/* --- Listing tabs ---------------------------------------------------------
   Tenos_Experienced_Jobs_Listing_Page.pdf at 1920: the 70px title sits 96px
   under the breadcrumb, the tabs 62px under the title, 104px to the band edge.
   ------------------------------------------------------------------------ */
.m-phero--listing .m-phero__copy{padding-block:clamp(28px, 3.75vw, 72px) clamp(32px, 5.4vw, 104px)}
.m-phero__tabs{margin-top:clamp(20px, 3.2vw, 62px)}

/* --- Photography ----------------------------------------------------------
   Anchored to the container's right edge, stretched from near the top of the
   band to --phero-drop past its bottom.
   ------------------------------------------------------------------------ */
.m-phero--media .m-phero__copy{
  min-height:clamp(260px, 30vw, 575px);
  max-width:46%;
}
.m-phero--portrait .m-phero__copy{max-width:62%}

.m-phero--media .m-phero__media{
  position:absolute;
  top:clamp(0px, 1.4vw, 24px);
  right:var(--gutter);
  bottom:calc(-1 * var(--phero-drop));
  width:min(50%, calc(768px * var(--ui-scale, 1)));
  aspect-ratio:auto;
}
.m-phero--media{--phero-drop:clamp(48px, 6vw, 96px)}

/* Single image: one photo at the 'hero-single' crop ratio, matching the
   homepage hero. Dropping the bottom anchor is what lets the ratio set the
   height from the width, instead of the band's height stretching the photo. */
.m-phero--single .m-phero__media{
  bottom:auto;
  aspect-ratio:1024 / 840;
}
.m-phero--single .m-phero__media>*{display:block;width:100%;height:100%}
/* Middle-aligned single image (the Our Story "30" artwork): centred on the band
   rather than hung from its top. The inner box starts below the section's top
   padding, so pull up by half of it to centre on the band itself. */
/* Side by side only: below 900px the photo stacks under the heading (static,
   see Small screens), where this shift would lift it back over the text. */
@media (min-width: 901px){
  .m-phero--single.m-phero--middle .m-phero__media{
    top:calc(50% - clamp(13px, 1.35vw, 26px));
    transform:translateY(-50%);
  }
}
.m-phero--single .m-phero__media img{width:100%;height:100%;object-fit:cover}

/* Collage: tall anchor, small square over its top corner, wide to the right */
.m-phero__img--a{grid-area:3 / 1 / 13 / 8}
.m-phero__img--b{grid-area:2 / 6 / 6 / 8}
.m-phero__img--c{grid-area:1 / 8 / 6 / 13}
.m-phero__img--a img,.m-phero__img--b img,.m-phero__img--c img{width:100%;height:100%;object-fit:cover}

/* --- Portrait ------------------------------------------------------------- */
.m-phero--portrait{--phero-drop:clamp(72px, 20.6vw, 395px)}
.m-phero--portrait .m-phero__media{
  top:auto;
  height:clamp(240px, 24.4vw, 469px);
  width:min(34%, calc(492px * var(--ui-scale, 1)));
}
.m-phero--portrait .m-phero__media img{
  width:100%;height:100%;object-fit:cover;
  background:var(--grey-100);
}

/* --- Bare (article header) ------------------------------------------------ */
.m-phero--bare .m-phero__copy{display:none}
.m-phero--bare .m-phero__inner{min-height:clamp(180px, 17vw, 300px)}
.m-phero--bare .m-phero__media{width:min(58%, calc(720px * var(--ui-scale, 1)))}
.m-phero--bare .media-pair img{width:100%;height:100%;object-fit:cover}

/* --- Small screens -------------------------------------------------------- */
@media (max-width: 900px){
  .m-phero--media,
  .m-phero--portrait{--phero-drop:0px}

  .m-phero--bare .m-phero__inner{min-height:0}
  .m-phero--bare .m-phero__media{width:auto}

  .m-phero--media .m-phero__media,
  .m-phero--portrait .m-phero__media{
    position:static;width:auto;height:auto;
    margin-top:clamp(24px, 4vw, 40px);
  }
  .m-phero--media .m-phero__copy,
  .m-phero--portrait .m-phero__copy{min-height:0;max-width:none;padding-bottom:0}
  .m-phero--portrait .m-phero__media{max-width:320px;aspect-ratio:4 / 5}
  .m-phero__title,
  .m-phero__title--bold{max-width:none}
}

/* intro-statement */
/* ==========================================================================
   Intro Statement — design module 16.
   ========================================================================== */

.m-intro__grid{
  display:grid;
  grid-template-columns:minmax(0, 0.55fr) minmax(0, 1fr);
  gap:clamp(24px, 4vw, 64px);
}
.m-intro__body{grid-column:2}

.m-intro__statement{
  font-family:var(--font-display);
  font-size:var(--step-h2);
  font-weight:300;
  line-height:1.3;
  letter-spacing:-0.01em;
  margin:0 0 clamp(24px, 2.9vw, 56px);
}

.m-intro__prose{max-width:62ch}
.m-intro__prose p{margin:0}
.m-intro__prose p+p{margin-top:1.5em}

.m-intro .btn-row{margin-top:clamp(28px, 3.4vw, 52px)}

.m-intro--wide .m-intro__grid{grid-template-columns:1fr}
.m-intro--wide .m-intro__body{grid-column:1}
/* Full-width layout is the artboards' "Intro Paragraph Style": 32px/1.47. */
.m-intro--wide .m-intro__prose{max-width:92ch;font-size:var(--step-lead);line-height:1.47}

/* Two columns (the service-page "Challenge" treatment, Tenos_Services_Page.pdf
   p2): heading and opening copy left; the list's lead-in set bold over a grey
   panel of bullets on the right, closing copy underneath. Both columns start
   from the eyebrow line, so the aside is pushed down to sit level with the
   body copy rather than the heading. */
.m-intro--columns .m-intro__grid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(32px, 6vw, 104px);
  align-items:start;
}
.m-intro--columns .m-intro__body{grid-column:1}
.m-intro--columns .m-intro__prose{max-width:none}
.m-intro__aside{
  grid-column:2;
  padding-top:clamp(0px, 15vw, 290px);
}
.m-intro__aside p{margin:0}
.m-intro__aside p+p{margin-top:1.5em}
.m-intro__lead-in{font-weight:700}
.m-intro__panel{
  background:var(--grey-50);
  padding:clamp(20px, 2.3vw, 44px) clamp(20px, 2.4vw, 46px);
  margin:clamp(20px, 2.5vw, 48px) 0;
}
.m-intro__panel ul,
.m-intro__panel ol{margin:0;padding-left:1.4em}
.m-intro__panel li+li{margin-top:0.55em}
.m-intro__aside .m-intro__panel+p{margin-top:0}

@media (max-width: 860px){
  .m-intro__grid,
  .m-intro--columns .m-intro__grid{grid-template-columns:1fr}
  .m-intro__body{grid-column:1}
  .m-intro__aside{grid-column:1;padding-top:0}
}

/* column-text */
/* ==========================================================================
   Column Text — design module 18. Real columns in the markup, not CSS
   multi-column: the passages are separate content and must not reflow into
   each other.
   ========================================================================== */

.m-cols__heading{
  font-family:var(--font-display);
  font-size:var(--step-h2);
  font-weight:300;
  line-height:1.3;
  letter-spacing:-0.01em;
  max-width:16ch;
  margin:0 0 clamp(36px, 5vw, 76px);
}

.m-cols__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(24px, 4vw, 72px);
  align-items:start;
}
.m-cols__grid p{margin:0}
.m-cols__grid p+p{margin-top:1.25em}

/* A column can carry a titled group of entries — a body of legislation, a set
   of guidance documents — rather than one passage of prose. */
.m-cols__group{
  font-size:var(--step-micro);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:0 0 1.25em;
  padding-bottom:.75em;
  border-bottom:1px solid currentColor;
}
.m-cols__entry{
  font-family:var(--font-display);
  font-size:var(--step-body);
  font-weight:700;
  line-height:1.3;
  margin:1.75em 0 .4em;
}
.m-cols__group + .m-cols__entry{margin-top:0}
/* A group label that follows a passage or a list needs to read as a new start. */
.m-cols__grid p + .m-cols__group,
.m-cols__grid ul + .m-cols__group{margin-top:2.5em}
.m-cols__grid ul{margin:.6em 0 0;padding-left:1.1em}
.m-cols__grid li+li{margin-top:.3em}
.m-cols__grid ul+p{margin-top:1.25em}

/* Fewer than three columns still sit on the three-track grid, so a two-group
   section (Wales) lines up with the three-group one above it (England) instead
   of its columns swelling to fill the row. A single column is the exception —
   it is a passage of prose and takes the measure it needs. */
.m-cols__grid:has(> :only-child){grid-template-columns:minmax(0, 1fr)}

/* Grouped columns — a titled body of legislation or guidance — sit in a panel
   of the opposite tone to the section (white on grey, grey on white), so a run
   of these sections on the Technical Library pages reads as separate blocks.
   Plain prose columns (the About pages) are left as they were. */
.m-cols__grid>div:has(.m-cols__group){
  background:var(--white);
  padding:clamp(22px, 2.3vw, 44px) clamp(20px, 2.1vw, 40px) clamp(26px, 2.6vw, 50px);
  align-self:stretch;
}
.m-cols.surface-white .m-cols__grid>div:has(.m-cols__group){background:var(--grey-50)}
.m-cols__grid>div:has(.m-cols__group) .m-cols__group{border-bottom-color:var(--hairline)}

@media (max-width: 900px){
  .m-cols__grid{grid-template-columns:1fr;gap:1.75rem}
  .m-cols__heading{max-width:none}
}

/* accordion */
/* ==========================================================================
   Accordion — design modules 20 + 04. The +/− rows themselves live in
   blocks/shared/shared.css (.accordion); this file carries the headings and
   the services-row treatment.
   ========================================================================== */

.m-acc__heading{
  font-family:var(--font-display);
  font-size:var(--step-h2);
  font-weight:300;
  line-height:1.3;
  letter-spacing:-0.01em;
  max-width:26ch;
  margin:0 0 clamp(28px, 3.35vw, 64px);
}

.m-acc--compact .m-acc__heading{
  font-family:var(--font-body);
  font-size:var(--step-eyebrow);
  font-weight:700;
  letter-spacing:0;
  margin-bottom:clamp(18px, 2vw, 28px);
}

/* --- Services rows (module 04) -------------------------------------------- */
.m-acc__service{display:flex;align-items:center;gap:clamp(14px, 1.6vw, 24px);min-width:0}
.m-acc__icon{flex:none;display:grid;place-items:center;width:clamp(40px, 3.75vw, 72px);height:clamp(40px, 3.75vw, 72px);color:var(--navy)}
.m-acc__icon svg{width:100%;height:100%;display:block}
/* The surveying drawing carries more internal whitespace than its siblings, so
   it reads smaller at the same box size — scale it to match. */
.m-acc__icon .icon--service-surveying{transform:scale(1.14)}
.m-acc__label{margin-bottom:10px;display:block;font-size:var(--step-body);font-weight:400;font-family:var(--font-body);letter-spacing:0}
.m-acc__strap{
  display:block;
  font-family:var(--font-display);
  font-size:var(--step-h3);
  font-weight:400;
  line-height:1.2;
}
/* The services list on the artboard is ruled BETWEEN rows only — no rule
   above the first or below the last. The plain accordion keeps both. */
.m-acc--services .accordion{border-top:0}
.m-acc--services .accordion__item:last-child{border-bottom:0}
.m-acc--services .accordion__summary{font-weight:400}
.m-acc--services .accordion__body{padding-left:calc(clamp(40px, 3.75vw, 72px) + clamp(14px, 1.6vw, 24px))}

@media (max-width: 620px){
  .m-acc__heading{max-width:none}
  .m-acc--services .accordion__body{padding-left:0}
}

/* text-image-split */
/* ==========================================================================
   Text + Image Split — design modules 17 + 07.
   The flip is grid direction, not markup order, so the heading always comes
   before the image in the document.
   ========================================================================== */

.m-split__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(32px, 6vw, 104px);
  align-items:center;
}
.m-split--flip .m-split__grid{direction:rtl}
.m-split--flip .m-split__grid>*{direction:ltr}

.m-split__lead{max-width:40ch}
.m-split__heading{
  font-family:var(--font-display);
  font-size:var(--step-h2);
  font-weight:300;
  line-height:1.3;
  letter-spacing:-0.01em;
  max-width:18ch;
  margin:0 0 clamp(24px, 2.45vw, 47px);
}
.m-split__prose p{margin:0}
.m-split__prose p+p{margin-top:1.6em}
.m-split .btn-row{margin-top:clamp(32px, 3.75vw, 72px)}

.m-split__media{aspect-ratio:1 / 1}
/* Single photo: the 'hero-single' crop ratio, matching the heroes. Doubled
   class so it also holds past the 860px collapse below. */
.m-split__media--single.m-split__media--single{aspect-ratio:1024 / 840}
.m-split__media img{
  width:100%;height:100%;object-fit:cover;
  background:var(--grey-100);
}
/* Transparent artwork: let the surface show through rather than the grey.
   Must follow the rule above — equal specificity, so source order decides. */
.m-split__media--single img{background:none}

/* Collage variant — the Our People treatment, geometry from the approved
   html-modules/index.html build (four layers; the small square repeats the
   first shot). */
.m-split__media--collage{aspect-ratio:1 / 0.95}
.m-split__grid:has(.m-split__media--collage){
  gap:clamp(32px, 5vw, 80px);
}
.m-split__media--collage>:nth-child(1){grid-area:3 / 5 / 6 / 10}
.m-split__media--collage>:nth-child(2){grid-area:4 / 5 / 6 / 6;z-index:1}
.m-split__media--collage>:nth-child(3){grid-area:4 / 1 / 11 / 6}
.m-split__media--collage>:nth-child(4){grid-area:9 / 7 / 13 / 11}

@media (max-width: 860px){
  .m-split__grid,
  .m-split--flip .m-split__grid{grid-template-columns:1fr;direction:ltr}
  .m-split__heading,.m-split__lead{max-width:none}
  .m-split__media{aspect-ratio:4 / 3}
}

/* cta-banner */
/* ==========================================================================
   CTA Banner — design modules 28 + 10.
   ========================================================================== */

.m-cta__heading{
  font-family:var(--font-display);
  font-size:var(--step-h2);
  font-weight:300;
  line-height:1.15;
  letter-spacing:-0.01em;
  max-width:26ch;
  margin:0 0 clamp(18px, 2vw, 28px);
}
.m-cta__body{max-width:70ch}
.m-cta__body p{margin:0}
.m-cta__body p+p{margin-top:1.25em}

/* Band — the full-width navy call to action. Quieter than the other variants:
   a small eyebrow over a heading that settles at 27px on desktop. */
/* Tenos_Experienced_Jobs_Listing_Page.pdf at 1920: 100px from eyebrow to
   heading, 106px from the 40px heading to the body. */
.m-cta--band .eyebrow{
  font-size:var(--step-eyebrow);
  margin-bottom:clamp(10px, 2.7vw, 52px);
}
.m-cta--band .m-cta__heading{
  font-size:var(--step-h3);
  line-height:1.25;
  margin-bottom:clamp(18px, 2.9vw, 56px);
  max-width: 100%;
  @media(min-width:1200px) {
    max-width: 60%;
  }
}

/* Inset panel — bold heading, tighter rhythm. Tenso_Talent_Discovery_Page.pdf
   at 1920: panel 443 tall, padding 56 top / 80 sides / 72 bottom; 50px from
   the heading to the body, 59px from the body to the button. */
.m-cta__panel.panel{
  min-height:clamp(220px, 23vw, 443px);
  padding:clamp(24px, 2.9vw, 56px) clamp(24px, 4.2vw, 80px) clamp(24px, 3.75vw, 72px);
}
.m-cta--panel .m-cta__heading{
  font-size:var(--step-h3);
  font-weight:700;
  margin-bottom:clamp(12px, 2.6vw, 50px);
}
.m-cta--panel .btn-row{margin-top:clamp(24px, 3vw, 58px)}

/* Green collage band — collage left, copy right. Geometry from the approved
   html-modules/index.html build (module 10). */
.m-cta__grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(32px, 5vw, 80px);
  align-items:flex-start;
}
.m-cta--collage .m-cta__heading{
  font-size:var(--step-h1);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-0.02em;
  margin-bottom:1.75rem;
}
.m-cta__collage{aspect-ratio:1 / 0.9}
.m-cta__collage>:nth-child(1){grid-area:1 / 1 / 5 / 7}
.m-cta__collage>:nth-child(2){grid-area:3 / 5 / 5 / 7;z-index:1}
.m-cta__collage>:nth-child(3){grid-area:3 / 5 / 12 / 11}
.m-cta__collage img{width:100%;height:100%;object-fit:cover}

/* Single image: one photo at the 'hero-single' crop ratio, matching the heroes. */
.m-cta__media--single{width:100%;aspect-ratio:1024 / 840}
.m-cta__media--single>*{display:block;width:100%;height:100%}
.m-cta__media--single img{width:100%;height:100%;object-fit:cover}

@media (max-width: 860px){
  .m-cta__grid{grid-template-columns:1fr}
  .m-cta__heading{max-width:none}
}