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

/* content */
/* ==========================================================================
   Content — design module 36. Everything styles off the element, so whatever
   the editor emits into the wysiwyg comes out right without per-paragraph
   classes.

   The same rules dress TinyMCE's canvas (.mce-content-body), which
   app/setup.php hands this file to via add_editor_style() — so the body an
   editor types in the wysiwyg field matches the article it renders. Keep the
   two halves of each selector list together when editing.
   ========================================================================== */

.m-abody{padding-block:clamp(36px, 3.5vw, 67px) clamp(36px, 4.5vw, 72px)}
/* Offset matches .m-ndetail__inner (161px at 1920) so an article title and
   its body share a left edge. */
.m-abody__inner{
  margin-left:clamp(0px, 8.4vw, 161px);
  max-width:50em;
}

.m-abody__inner h1,
.m-abody__inner h2,
.mce-content-body h1,
.mce-content-body h2{
  font-family:var(--font-display);
  font-size:var(--step-h2);
  font-weight:300;
  line-height:1.15;
  letter-spacing:-0.01em;
  max-width:20ch;
  margin:0 0 clamp(28px, 3.4vw, 52px);
}

.m-abody__inner h3,
.m-abody__inner h4,
.mce-content-body h3,
.mce-content-body h4{
  font-family:var(--font-body);
  font-size:var(--step-body);
  font-weight:700;
  margin:clamp(28px, 3.4vw, 52px) 0 1rem;
}
.m-abody__inner h3:first-child,
.m-abody__inner h4:first-child,
.mce-content-body h3:first-child,
.mce-content-body h4:first-child{margin-top:0}

/* Sub-titles emitted by tenos_heading() keep the small-bold treatment at
   whatever level the auto-ladder assigns them. */
.m-abody__inner .m-abody__sub{
  font-family:var(--font-body);
  font-size:var(--step-body);
  font-weight:700;
  line-height:1.4;
  letter-spacing:0;
  max-width:none;
  margin:clamp(28px, 3.4vw, 52px) 0 1rem;
}
.m-abody__inner .m-abody__sub:first-child{margin-top:0}

.m-abody__inner p,
.mce-content-body p{margin:0 0 1.25em}
.m-abody__inner p:first-of-type,
.mce-content-body p:first-of-type{font-size:var(--step-lead);line-height:1.47;max-width:66ch}

.m-abody__inner ul,
.m-abody__inner ol,
.mce-content-body ul,
.mce-content-body ol{margin:0 0 1.25em;padding-left:0;list-style:none}
.m-abody__inner li,
.mce-content-body li{margin-bottom:1em}

.m-abody__inner img,
.mce-content-body img{
  width:100%;height:auto;
  margin:clamp(32px, 4vw, 64px) 0 0.875rem;
  background:var(--grey-100);
}
.m-abody__inner figure,
.mce-content-body figure{margin:clamp(32px, 4vw, 64px) 0}
.m-abody__inner figure img,
.mce-content-body figure img{margin:0 0 0.875rem}
/* WordPress writes an inline pixel width onto the caption wrapper, which is
   the uploaded file's width — override it so a captioned image sits in the
   column like an uncaptioned one. */
.m-abody__inner .wp-caption,
.mce-content-body .wp-caption{width:auto !important;max-width:100%;margin:clamp(32px, 4vw, 64px) 0}
.m-abody__inner .wp-caption img,
.mce-content-body .wp-caption img{margin:0 0 0.875rem}

.m-abody__inner figcaption,
.m-abody__inner .wp-caption-text,
.mce-content-body figcaption,
.mce-content-body .wp-caption-text{font-size:var(--step-small);margin:0;color:var(--ink)}

.m-abody__inner a,
.mce-content-body a{text-decoration:underline;text-underline-offset:2px}
.m-abody__inner blockquote,
.mce-content-body blockquote{
  margin:clamp(28px, 3.4vw, 52px) 0;
  padding-left:1.5rem;
  border-left:3px solid var(--navy);
  font-family:var(--font-display);
  font-size:var(--step-h3);
  font-weight:700;
  line-height:1.3;
}

@media (max-width: 620px){
  .m-abody__inner{margin-left:0}
  .m-abody__inner h1,.m-abody__inner h2{max-width:none}
}

/* --- Contact Form 7 inside the article body (Speak to Tenos) -------------- */
/* A body block that holds a form becomes its own section: tucked up under
   the intro, aligned to the copy (no prose offset), on a grey band as a
   white card, and wide enough for two-up rows. */
.module:has(+ .m-abody .wpcf7){padding-bottom:clamp(20px, 2.5vw, 40px)}
.m-abody:has(.wpcf7){background:var(--grey-50);padding-block:clamp(36px, 4vw, 64px) clamp(48px, 5vw, 80px)}
.m-abody:has(.wpcf7) .m-abody__inner{margin-left:0;max-width:60rem}
.m-abody .wpcf7{margin:0;background:var(--white);padding:clamp(24px, 3.2vw, 48px) clamp(20px, 3.2vw, 48px);border-radius:8px}
.m-abody .wpcf7-form label{display:block;margin:0 0 1.25rem;font-size:0.9375rem;font-weight:700;color:var(--navy)}
.m-abody .wpcf7-form label span[aria-hidden]{color:var(--navy);opacity:0.6;margin-left:2px}
.m-abody .tn-form__row{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0 24px}
.m-abody .wpcf7-form-control-wrap{display:block;margin-top:0.45rem}
.m-abody .wpcf7-form input:not([type=submit]):not([type=checkbox]),
.m-abody .wpcf7-form select,
.m-abody .wpcf7-form textarea{
  width:100%;box-sizing:border-box;
  padding:14px 16px;border:1.5px solid rgba(30, 48, 150, 0.25);border-radius:6px;
  background:var(--white);font:inherit;font-size:1rem;font-weight:400;color:var(--navy);
  transition:border-color var(--speed) var(--ease);
}
.m-abody .wpcf7-form input:focus,
.m-abody .wpcf7-form select:focus,
.m-abody .wpcf7-form textarea:focus{outline:none;border-color:var(--navy)}
.m-abody .wpcf7-form textarea{min-height:160px;resize:vertical}
.m-abody .tn-form__consent{font-size:0.875rem;font-weight:400;margin:0 0 1.5rem}
.m-abody .tn-form__consent .wpcf7-list-item{margin:0}
.m-abody .tn-form__consent input[type=checkbox]{margin-right:8px;accent-color:var(--navy)}
.m-abody .wpcf7-form .wpcf7-submit{cursor:pointer}
.m-abody .wpcf7-not-valid-tip{font-size:0.8125rem;font-weight:400;color:#b3261e;margin-top:4px}
.m-abody .wpcf7-response-output{margin:1.25rem 0 0;padding:14px 16px;border:1.5px solid var(--navy);border-radius:6px;font-size:0.9375rem}
.m-abody .wpcf7-spinner{margin-left:12px}
@media (max-width: 620px){
  .m-abody .tn-form__row{grid-template-columns:1fr}
}