/* 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}

/* hero-home */
/* ==========================================================================
   Homepage Hero — design module 02, geometry from the approved
   html-modules/index.html build.
   Uses from shared: .container, .collage · from global: .h-hero, surfaces
   ========================================================================== */

.m-hero{
  position:relative;
  overflow:hidden;
  padding-block:0 clamp(48px, 6vw, 96px);
}
.m-hero__grid{
  display:grid;
  grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
  gap:clamp(24px, 4vw, 64px);
  align-items:center;
}
/* Single-image layout: the photo fills a plain 50/50 right column instead of
   the 5fr/7fr split tuned for the four-photo collage. Stretch (rather than
   center) so the photo fills the column's full height with no band showing
   above and below it; the copy is re-centred within that height. */
.m-hero__grid--single{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);align-items:stretch}
.m-hero__grid--single .m-hero__copy{align-self:center}
.m-hero__copy{padding-block:clamp(16px, 4vw, 72px)}

/* The artwork sets each sentence on ONE line. The size is fitted to the
   5fr column so "Protecting People." never wraps above the 900px collapse;
   nowrap guards the fit. */
.m-hero .h-hero{
  margin-bottom:2.5rem;
  font-size:calc(clamp(2.2rem, 0.9rem + 2.4vw, 2.875rem) * var(--ui-scale, 1));
  white-space:nowrap;
}
.m-hero .btn-row{margin-top:0}
.m-hero__title em{font-style:italic;font-weight:300}

/* Four layered photographs, exactly as the reference build places them:
   facade top right, a small rooftop square overlapping, the large rooftop
   left, the meeting shot bottom right. */
.m-hero__collage{aspect-ratio:1 / 0.82;     margin-right: calc(-1 * var(--gutter));}
.m-hero__collage>:nth-child(1){grid-area:1 / 5 / 6 / 13}
.m-hero__collage>:nth-child(2){grid-area:4 / 5 / 6 / 7;z-index:1}
.m-hero__collage>:nth-child(3){grid-area:4 / 1 / 11 / 7}
.m-hero__collage>:nth-child(4){grid-area:8 / 6 / 13 / 12}
.m-hero__collage img{width:100%;height:100%;object-fit:cover}

/* Single image: fills the right column and bleeds through the container's
   gutter so it meets the viewport's right edge. The explicit width (rather than
   stretch alignment) is what lets the crop ratio set the HEIGHT from the width;
   left to stretch, the copy's height would drive the ratio instead and the box
   would size sideways. The ratio matches the 'hero-single' image preset, and at
   this width it is taller than the copy, so the photo sets the module height. */
.m-hero__collage--single{width:calc(100% + var(--gutter));margin-right:0}
/* Doubled class so the 'hero-single' crop ratio also beats shared.css's
   .collage.collage square rule on phones. */
.m-hero__collage--single.m-hero__collage--single{aspect-ratio:1024 / 840}
/* :nth-child(1) to match the specificity of the four-photo grid-area rules
   above, which would otherwise keep the photo in the top-right collage slot. */
.m-hero__collage--single>:nth-child(1){grid-area:1 / 1 / 13 / 13}
/* The artwork is a transparent PNG, so the shared .collage img grey would show
   through it instead of the band colour. */
.m-hero__collage--single img{background:none}

@media (max-width: 900px){
  .m-hero__grid{grid-template-columns:1fr}
  .m-hero .h-hero{white-space:normal;font-size:var(--step-hero)}
  /* Stacked: the photo already spans the full column, so the gutter bleed would
     only push it off-screen and add a horizontal scrollbar. */
  .m-hero__collage--single{width:100%}
}

/* story-mark */
/* ==========================================================================
   Story Mark — design modules 03 + 21. A brand image sits in the mark area
   beside the About copy (about) or the Our Story teaser (teaser).
   ========================================================================== */

.m-mark__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(32px, 6vw, 96px);
  align-items:start;
}
.m-mark__grid--teaser{align-items:center}
/* Homepage "About us": the top of the 30 mark lines up with the top of the
   "About us" letters (client feedback, Oct 2026). Both columns start at the
   grid's top edge (.m-mark__body has no top padding); the eyebrow's capitals
   start about 0.28em below its line box (measured in the browser), so the
   mark drops by that much. Side by side only. */
@media (min-width: 861px){
  .m-mark--about .m-mark__grid>:first-child{padding-top:calc(var(--step-eyebrow) * 0.28)}
}

.m-mark__img{
  margin:0 0 2.5rem;
  width:100%;
  max-width:clamp(240px, 16.4vw, 315px);
}
.m-mark__img img{
  display:block;
  width:100%;
  height:auto;            /* keep the graphic's own proportions — never crop */
}
/* Teaser: the mark image is the whole left half of the block. */
.m-mark__img--big{margin:0;max-width:clamp(300px, 30vw, 576px)}

.m-mark__claim{
  font-family:var(--font-display);
  font-size:var(--step-h3);
  font-weight:700;
  line-height:1.35;
  color:var(--navy);
  max-width:20ch;
  margin:0;
}
/* Homepage artboard: 54px claim leading, 68px claim→button, 47px under the
   50px heading (65px leading), one 40px line between paragraphs. */
.m-mark--about .btn-row{margin-top:clamp(2rem, 3.5vw, 4.25rem)}
.m-mark__body{padding-top:0}
.m-mark__body .h-section{margin-bottom:clamp(1.5rem, 2.45vw, 2.95rem)}
.m-mark__body .prose p{margin:0}
.m-mark__body .prose p+p{margin-top:1.6em}

.m-mark__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(20px, 2.3vw, 44px);
}
.m-mark__teaser-body{max-width:46ch}
.m-mark__teaser-body p{margin:0}
.m-mark__teaser-body p+p{margin-top:1.6em}

@media (max-width: 860px){
  .m-mark__grid{grid-template-columns:1fr;gap:2rem}
  .m-mark__claim,.m-mark__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}
}

/* stats-grid */
/* ==========================================================================
   Stats Grid — design module 05 (Tenos at a glance).
   Colour-coded stat headings per the Homepage v2 design.
   ========================================================================== */

.m-glance__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(28px, 2.5vw, 48px) clamp(24px, 4vw, 72px);
  margin:0;
}
/* Twice the eyebrow's usual gap: the stats need more air under the label. */
.m-glance .eyebrow{margin-bottom:2.2em}
.m-glance__stat{margin:0}

/* Homepage artboard: 26px between the 40px value and its label, 48px rows. */
.m-glance__value{
  font-family:var(--font-display);
  font-size:var(--step-h3);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-0.01em;
  margin:0 0 clamp(0.5rem, 1.35vw, 1.625rem);
}
.m-glance__value--navy  {color:var(--navy)}
.m-glance__value--purple{color:var(--purple)}
.m-glance__value--green {color:var(--green)}
.m-glance__value--cyan  {color:var(--cyan)}
.m-glance__value--pink  {color:var(--pink)}

.m-glance__label{margin:0;max-width:34ch}

@media (max-width: 900px){.m-glance__grid{grid-template-columns:repeat(2, minmax(0, 1fr))}}
@media (max-width: 560px){.m-glance__grid{grid-template-columns:1fr}}

/* edit-teaser */
/* ==========================================================================
   Edit Teaser — design module 06, geometry from the approved
   html-modules/index.html build.
   ========================================================================== */

.m-discover__grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(32px, 5vw, 80px);
  align-items:start;
}

.m-discover__masthead{
  display:flex;align-items:center;gap:1.5rem;
  margin:0 0 2.5rem;
}
.m-discover__badge{
  display:block;flex:0 0 auto;
  width:clamp(96px, 9vw, 128px);height:auto;
}
.m-discover__wordmark{
  font-family:var(--font-display);
  font-size:var(--step-h1);
  font-weight:700;line-height:1.14;letter-spacing:-0.02em;
  color:var(--navy);
}
.m-discover__lead{margin-bottom:clamp(1.5rem, 2.45vw, 2.95rem)}
.m-discover .prose p{margin:0}
.m-discover .prose p+p{margin-top:1.6em}

.m-discover__collage{aspect-ratio:1 / 0.86}
.m-discover__collage>:nth-child(1){grid-area:1 / 1 / 6 / 8}
.m-discover__collage>:nth-child(2){grid-area:3 / 6 / 6 / 8;z-index:1}
.m-discover__collage>:nth-child(3){grid-area:3 / 8 / 12 / 13}
.m-discover__collage img{width:100%;height:100%;object-fit:cover}

/* Single image: sits beside the copy, exactly where the collage would, and
   bleeds through the right gutter to the viewport edge as the artwork has it
   (Tenos_Homepage_v2: the composite runs off the right of the artboard). The
   'hero-single' crop ratio sets its height from the column width. */
.m-discover__grid--single{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)}
.m-discover__media--single{width:calc(100% + var(--gutter));aspect-ratio:1024 / 840}
.m-discover__media--single>*{display:block;width:100%;height:100%}
.m-discover__media--single img{width:100%;height:100%;object-fit:cover}

.m-discover__cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(16px, 2vw, 28px);
  align-items:stretch;
  margin-top:clamp(40px, 5vw, 72px);
}
/* Equal cards. The height is FIXED, not content-driven: the excerpt and link
   fold away and unfold on hover or keyboard focus inside that box, so the
   hovered card never grows past its neighbours (a min-height would let the
   revealed copy stretch the whole row). The excerpt is clamped to three
   lines and the link is pinned to the bottom edge, so however long the title
   runs the link stays inside the card and the excerpt is what gives way. */
.m-discover__card{
  position:relative;   /* the pinned link is placed against the card */
  height:clamp(300px, 19vw, 365px);
  min-height:0;
  overflow:hidden;
  padding-bottom:calc(clamp(20px, 2.4vw, 32px) + 2.4rem);
}
.m-discover__card .card__title{margin-top:0}
.m-discover__card-more{
  display:grid;
  grid-template-rows:0fr;
  /* Shrinks to whatever the fixed card has left under the title and clips,
     so the excerpt never runs into the padding reserved for the link. */
  min-height:0;
  overflow:hidden;
  opacity:0;
  transition:grid-template-rows var(--speed) var(--ease), opacity var(--speed) var(--ease);
}
.m-discover__card-more>span{
  display:block;min-height:0;overflow:hidden;
  /* Where the excerpt is cut short, fade its last line out rather than slicing
     through the glyphs. */
  -webkit-mask-image:linear-gradient(#000 calc(100% - 1.3em), transparent);
  mask-image:linear-gradient(#000 calc(100% - 1.3em), transparent);
}
.m-discover__card-more .card__body{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  font-size:var(--step-small);
  line-height:1.5;
}
.m-discover__card-more .link-arrow{
  position:absolute;
  left:clamp(20px, 2.4vw, 32px);
  bottom:clamp(20px, 2.4vw, 32px);
}
.m-discover__card:hover .m-discover__card-more,
.m-discover__card:focus-visible .m-discover__card-more{
  grid-template-rows:1fr;
  opacity:1;
}
/* Corner photo tile (the Edit page's project tile): bottom right, beside the
   pinned link. The card grows a little to make room, and its bottom padding
   reserves the tile's height so the revealed excerpt stops above it. Padding
   percentages resolve against the card's width, as the tile's width does. */
.m-discover__card--tile{
  height:clamp(340px, 23vw, 440px);
  padding-bottom:calc(clamp(20px, 2.4vw, 32px) * 1.5 + 30%);
}
.m-discover__thumb{
  position:absolute;
  right:clamp(20px, 2.4vw, 32px);
  bottom:clamp(20px, 2.4vw, 32px);
  width:40%;
  aspect-ratio:4 / 3;
  object-fit:cover;
}

@media (hover: none){
  /* No hover on touch: show everything and let the row grow to fit, since a
     fixed height would clip copy nobody can reveal. */
  .m-discover__card{height:auto;min-height:0;overflow:visible}
  .m-discover__card-more{grid-template-rows:1fr;opacity:1}
}
@media (prefers-reduced-motion: reduce){
  .m-discover__card-more{transition:none}
}
.m-discover .btn-row{margin-top:2.5rem}

@media (max-width: 900px){
  .m-discover__grid,
  .m-discover__grid--single{grid-template-columns:1fr}
  /* Stacked: the image spans the column already; the gutter bleed would only
     add a horizontal scrollbar. */
  .m-discover__media--single{width:100%}
  .m-discover__cards{grid-template-columns:1fr}
  .m-discover__card,
  .m-discover__card--tile{height:auto;min-height:0;overflow:visible}
}

/* 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}
}

/* careers-cards */
/* ==========================================================================
   Careers Cards — design module 08, geometry from the approved
   html-modules/index.html build.
   ========================================================================== */

.m-careers{overflow:hidden}
.m-careers__head{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(32px, 5vw, 80px);
  align-items:flex-start;
}
.m-careers__heading{margin-bottom:clamp(1.5rem, 3.15vw, 3.75rem);max-width:16ch}
.m-careers .btn-row{margin-top:clamp(28px, 4.5vw, 86px)}
.m-careers__body{max-width:44ch;margin:0}

.m-careers__collage{aspect-ratio:1 / 0.7}
.m-careers__collage>:nth-child(1){grid-area:1 / 3 / 10 / 10}
.m-careers__collage>:nth-child(2){grid-area:7 / 8 / 10 / 10;z-index:1}
.m-careers__collage>:nth-child(3){grid-area:7 / 8 / 13 / 13}
.m-careers__collage img{width:100%;height:100%;object-fit:cover}

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

.m-careers__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(16px, 2vw, 24px);
  align-items:end;
  margin-top:clamp(20px, 5vw, 40px);
}

@media (max-width: 900px){
  .m-careers__head{grid-template-columns:1fr}
  .m-careers__heading{max-width:none}
  .m-careers__grid{grid-template-columns:1fr}
}

/* contact-cta */
/* ==========================================================================
   Contact CTA — design modules 09 + 29.
   ========================================================================== */

/* Artboard (module 29): band 130 above / 142 below, 505px square photo,
   138 between photo and copy, heading at 1.28 leading, 58 to the body. */
.m-ccta{padding-block:clamp(56px, 6.8vw, 130px) clamp(60px, 7.4vw, 142px)}
.m-ccta__heading{max-width:20ch;line-height:1.28}
.m-ccta__body{max-width:56ch;margin:clamp(14px, 3vw, 58px) 0 0}

.m-ccta__grid{
  display:grid;
  /* The photo holds the artboard's 505px wherever there's room, but a fixed
     track would take all 505 out of a narrowing row and leave the copy with
     the remainder — at ~866px that was a 145px column and a 6-line heading.
     Capping it as a share of the row lets both sides narrow together. */
  grid-template-columns:minmax(0, min(505px, 45%)) minmax(0, 1fr);
  gap:clamp(28px, 7.2vw, 138px);
  align-items:center;
}
.m-ccta__media{aspect-ratio:1;max-width:505px}
.m-ccta__media img{
  width:100%;height:100%;object-fit:cover;
  background:var(--grey-100);
}

@media (max-width: 860px){
  .m-ccta__grid{grid-template-columns:1fr}
  .m-ccta__media{aspect-ratio:4 / 3;max-width:none}
  .m-ccta__heading{max-width:none}
}

/* 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}
}