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

/* feature-grid */
/* ==========================================================================
   Feature Grid — design module 19.
   ========================================================================== */

/* Artboard: grey band 57 above the eyebrow / 127 below the grid; heading at
   1.30 leading; 80 from sub-heading top to copy; 317 row pitch; 105 column gap. */
.m-fgrid{padding-block:clamp(40px, 3vw, 58px) clamp(56px, 6.6vw, 127px)}
.m-fgrid__head{margin-bottom:clamp(36px, 4.4vw, 84px)}
.m-fgrid__heading{
  font-family:var(--font-display);
  font-size:var(--step-h2);
  font-weight:300;
  line-height:1.30;
  letter-spacing:-0.01em;
  margin:0;
}

.m-fgrid__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(28px, 4vw, 77px) clamp(24px, 5.5vw, 105px);
  align-items:start;
}
.m-fgrid__item-title{
  font-size:var(--step-body-sm);font-weight:700;margin:0 0 clamp(14px, 2vw, 38px);
  font-family:var(--font-body);line-height:1.4;letter-spacing:0;
}
.m-fgrid__grid p{margin:0;font-size:var(--step-body-sm)}

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

/* related-services */
/* ==========================================================================
   Related Services — design module 30.
   Each bar is one link; the arrow is decoration inside it.
   ========================================================================== */

.m-rserv__heading{
  font-family:var(--font-display);
  font-size:var(--step-h2);
  font-weight:300;
  line-height:1.15;
  letter-spacing:-0.01em;
  margin:0 0 clamp(24px, 3.5vw, 67px);
}

.m-rserv__list{display:grid;gap:clamp(10px, 0.9vw, 17px)}

.m-rserv__item{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px, 3vw, 48px);
  /* Artboard bar: 210 tall, text 30 in from the left, pill 40 from the right. */
  padding:clamp(22px, 3.1vw, 60px) clamp(20px, 2.1vw, 40px) clamp(22px, 3.1vw, 60px) clamp(16px, 1.6vw, 30px);
  background:var(--navy);color:var(--white);
  text-decoration:none;
  transition:background var(--speed) var(--ease);
}
.m-rserv__item:hover{background:var(--navy-deep)}

.m-rserv__label{display:block;font-size:var(--step-body);line-height:1.3;margin-bottom:6px}
.m-rserv__title{
  display:block;
  font-family:var(--font-display);
  /* A notch under --step-h3 so the bars sit clearly below the heading above
     them, while staying well above the label. */
  font-size:calc(var(--step-h3) * 0.9);
  font-weight:300;
  line-height:1.2;
}
.m-rserv__item .btn--icon{pointer-events:none;width:clamp(58px, 5.7vw, 110px);min-height:clamp(40px, 3.9vw, 75px)}

/* Grid: rows of three boxes for the full list on the Services overview. Each
   box keeps the bar's anatomy — service name, promise line, chevron pill — but
   stacks it, the pill pinned to the bottom-right so nine boxes line up. */
.m-rserv--grid .m-rserv__list{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(16px, 1.6vw, 26px);
}
.m-rserv--grid .m-rserv__item{
  flex-direction:column;align-items:stretch;justify-content:space-between;
  gap:clamp(28px, 3vw, 56px);
  min-height:clamp(220px, 17vw, 330px);
  padding:clamp(22px, 2.1vw, 40px);
}
.m-rserv--grid .m-rserv__label{margin-bottom:10px}
.m-rserv--grid .m-rserv__title{font-size:var(--step-h3-sm)}
.m-rserv--grid .m-rserv__item .btn--icon{align-self:flex-end}

@media (max-width: 900px){
  .m-rserv--grid .m-rserv__list{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 560px){
  .m-rserv--grid .m-rserv__list{grid-template-columns:1fr}
  .m-rserv--grid .m-rserv__item{min-height:0}
  .m-rserv__item{gap:1rem}
  .m-rserv__item .btn--icon{width:56px;min-height:44px}
}

/* link-cards */
/* ==========================================================================
   Link Cards — design module 22.
   The card is not a link: it carries its own button, and a card-as-link would
   give the same destination two tab stops.
   ========================================================================== */

.m-lcards__lead{
  font-family:var(--font-body);
  font-size:var(--step-body);font-weight:700;letter-spacing:0;line-height:1.4;
  margin:0 0 clamp(24px, 3vw, 44px);
}

.m-lcards__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(16px, 1.6vw, 26px);
}

.m-lcards__card{
  display:flex;flex-direction:column;gap:1rem;
  padding:clamp(24px, 2.6vw, 40px);
  background:var(--navy);color:var(--white);
}
.m-lcards__card p{margin:0;font-size:var(--step-body-sm)}
.m-lcards__title{
  font-family:var(--font-display);
  font-size:var(--step-h3-sm);
  font-weight:300;
  line-height:1.2;
  margin:0;
}
.m-lcards__card .btn{align-self:flex-start;margin-top:auto}
.m-lcards__card .btn--solid:hover{background:var(--navy-deep)}

@media (max-width: 900px){.m-lcards__grid{grid-template-columns:repeat(2, minmax(0, 1fr))}}
/* The longer labels ("Explore Regulations & Guidance") outgrow the card once
   it narrows, so from tablet down the button steps a notch smaller and
   tighter. Where even that can't hold one line (tablet portrait, 320px
   phones) the label wraps balanced and centred rather than ragged. */
@media (max-width: 1700px){
  .m-lcards__card .btn{
    font-size:0.9375rem;
    padding-inline:1.1rem;
    text-align:center;
    text-wrap:balance;
  }
}
@media (max-width: 620px){
  .m-lcards__grid{grid-template-columns:1fr}
  .m-lcards__card{padding:22px 20px}
}
@media (max-width: 400px){
  .m-lcards__card .btn{font-size:0.875rem;padding-inline:0.9rem}
}

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