/* Making the approved design work with native block markup.
   Everything here exists because a section was rebuilt out of core blocks so the
   office can edit it. The design file stays the source of truth for how things
   look; this layer only bridges the difference in markup. */

/* Nothing is reset here on purpose. The approved stylesheet already sets the
   spacing for these lists, and a blanket `margin: 0` took the 24px off the call
   details. The steps list also keeps the browser's 40px indent, which the reset
   in the design file leaves alone for ol — its text column is measured from it. */

/* The numerals were <span>s in the markup. A core list item holds only its text,
   so the number comes from the counter the stylesheet already sets up — which
   also means the office cannot renumber the steps by accident. */
.wp-site-blocks .v2-steps__list {
  list-style: none;
  margin-block: 1em;
}

/* The stylesheet lays the item out as a two-column grid, which worked when the
   markup was a numeral and one wrapping <div>. A core list item cannot hold a
   wrapper, so its <strong> becomes a grid item of its own and the columns come
   out as 342px / 41px. The numeral is taken out of the flow instead, and the
   item keeps the same 56px column plus the same 24px gap. */
.wp-site-blocks .v2-steps__list li {
  display: block;
  position: relative;
  min-height: 48px;
  padding-left: 80px;
}

/* The item keeps the design's own top padding, and the numeral has to start
   below it: at `top: 0` an absolute box sits on the border, so 02 ran into the
   rule above it. */
.wp-site-blocks .v2-steps__list li::before {
  position: absolute;
  left: 0;
  top: var(--s3);
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 56px;
  line-height: .85;
  color: var(--red);
}

.wp-site-blocks .v2-steps__list li:first-child::before { top: 0; }

/* The arrow as a class that only adds the icon.
   A core button holds text, not markup, so the inline <svg> of the approved
   build cannot live inside it. Adding `v2-btn--arrow` to a button draws the same
   arrow — same 18px, same stroke, same colour, same nudge on hover — and adding
   nothing draws no arrow. */
.wp-site-blocks .v2-btn--arrow > .wp-block-button__link::after,
.wp-site-blocks .v2-btn--arrow-down > .wp-block-button__link::after,
.wp-site-blocks a.v2-btn--arrow::after,
.wp-site-blocks a.v2-btn--arrow-down::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}

.wp-site-blocks .v2-btn--arrow-down > .wp-block-button__link::after,
.wp-site-blocks a.v2-btn--arrow-down::after {
  width: 16px;
  height: 16px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M6%2013l6%206%206-6%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M6%2013l6%206%206-6%22%2F%3E%3C%2Fsvg%3E");
}

.wp-site-blocks .v2-btn--arrow:hover > .wp-block-button__link::after,
.wp-site-blocks a.v2-btn--arrow:hover::after { transform: translateX(3px); }

.wp-site-blocks .v2-btn--arrow-down:hover > .wp-block-button__link::after,
.wp-site-blocks a.v2-btn--arrow-down:hover::after { transform: translateY(3px); }

/* A core button wrapper is a plain box; the design's look is on the link inside,
   so the wrapper must not add a width or a background of its own. */
.wp-site-blocks .wp-block-button.v2-btn { display: inline-flex; }
.wp-site-blocks .v2-subhero__actions .wp-block-buttons,
.wp-site-blocks .v2-subhero__actions p { margin: 0; line-height: inherit; }

@media (max-width: 479.98px) {
  .wp-site-blocks .wp-block-button.v2-btn:not(.v2-header__cta):not(.v2-door__cta),
  .wp-site-blocks .wp-block-buttons { width: 100%; }
  .wp-site-blocks .wp-block-button.v2-btn > .wp-block-button__link { width: 100%; }
}

/* The style names carry the design's classes at render, so the front end is
   already right. The editor canvas has only the style name, so the four colours
   are stated here — and only the colours. Unscoped on purpose: WordPress adds
   `.editor-styles-wrapper` to an editor stylesheet itself. */
.is-style-usmrc-red > .wp-block-button__link { background: var(--red); border-color: var(--red); color: #fff; }
.is-style-usmrc-navy > .wp-block-button__link { background: var(--navy); border-color: var(--navy); color: #fff; }
.is-style-usmrc-wine > .wp-block-button__link { background: #8C1C24; border-color: #8C1C24; color: #fff; }
.is-style-usmrc-paper > .wp-block-button__link { background: var(--paper); border-color: var(--paper); color: var(--navy); }

/* The wrapper is a box, not the button; without this the canvas drew a coloured
   rectangle around a dark one. */
.wp-block-button.is-style-usmrc-red,
.wp-block-button.is-style-usmrc-navy,
.wp-block-button.is-style-usmrc-wine,
.wp-block-button.is-style-usmrc-paper { background: none; }

/* Columns own the two real splits on Book a Call.
   These were CSS grids inside plain Groups, so the width controls in the panel
   did nothing. As Columns blocks the panel is in charge; the design keeps the
   gap and the point at which the pair stacks, which is 1024 here, not core's
   782. The ratios are flex-grow because `7fr 5fr` divides what is left after the
   96px gap — a percentage divides the whole box and lands 40px out. */
.wp-site-blocks .wp-block-columns.v2-prep__grid,
.wp-site-blocks .wp-block-columns.v2-crosssell__grid {
  display: flex;
  flex-wrap: wrap;
}

.wp-site-blocks .wp-block-columns.v2-prep__grid > .wp-block-column,
.wp-site-blocks .wp-block-columns.v2-crosssell__grid > .wp-block-column {
  flex: 1 1 100%;
}

@media (min-width: 1024px) {
  .wp-site-blocks .wp-block-columns.v2-prep__grid,
  .wp-site-blocks .wp-block-columns.v2-crosssell__grid { flex-wrap: nowrap; }

  .wp-site-blocks .wp-block-columns.v2-prep__grid > .wp-block-column:first-child { flex: 7 1 0%; }
  .wp-site-blocks .wp-block-columns.v2-prep__grid > .wp-block-column:last-child { flex: 5 1 0%; }
  .wp-site-blocks .wp-block-columns.v2-crosssell__grid > .wp-block-column:first-child { flex: 5 1 0%; }
  .wp-site-blocks .wp-block-columns.v2-crosssell__grid > .wp-block-column:last-child { flex: 7 1 0%; }
}

/* The editor caps every top-level block at the theme's content width, so the
   full-width sections were drawn in a 720px column in the middle of the canvas.
   They carry `alignfull`, which says exactly this; the cap is lifted for them.
   On the published page they have no cap to begin with. */
.is-root-container > .wp-block-group.alignfull,
.is-root-container > .alignfull { max-width: none; }

/* Everything below is keyed on the design's own classes rather than on
   `.wp-site-blocks`. The editor canvas has no such element, so a rule scoped to
   it styles the published page and leaves the editor showing something else —
   which is exactly what happened to the bars and to the hero photo. */

/* Pick Your Conversation: the two bars are Groups, so the office can edit every
   line. The approved build made the whole bar one <a>; a Group cannot be a link,
   so the CTA link covers the card and the arrow moved onto the paragraph — the
   pseudo-element on the link is taken by that overlay. */
.v2-bars .v2-bar { position: relative; }
.v2-bars .v2-bar p { margin: 0; }
.v2-bar .v2-bar__cta a { color: inherit; text-decoration: none; }
.v2-bar .v2-bar__cta::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
.v2-bar:hover .v2-bar__cta::after { transform: translateX(4px); }
/* Published pages only: in the editor an overlay would swallow the clicks that
   select the blocks underneath it. */
.wp-site-blocks .v2-bar__cta a::after { content: ""; position: absolute; inset: 0; }

/* The badge figures built from blocks instead of pasted HTML.
   A core Image brings its own <figure>, so the photo rules that the approved
   build put on the <img> have to reach through it, and the seam — decoration
   the office never edits — becomes a pseudo-element rather than an empty block. */
.v2-subhero__media figure.v2-subhero__photo,
.v2-crosssell__media .wp-block-image { margin: 0; }
.v2-subhero__media figure.v2-subhero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 30%;
}
.v2-subhero--call .v2-subhero__media figure.v2-subhero__photo img { object-position: 55% 30%; }
.v2-crosssell__media .wp-block-image { height: 100%; }

/* Gutenberg gives every block `position: relative`, and a theme's editor
   stylesheet is wrapped in `:where()`, which is worth nothing — so the moment
   these figures became blocks the photo and the badge stopped being positioned
   in the editor. One extra class each is all it takes to outrank it. */
.v2-subhero__media .v2-subhero__photo { position: absolute; inset: 0; z-index: -1; }
.v2-subhero__media .v2-subhero__num,
.v2-crosssell__media .v2-crosssell__num { position: absolute; }
@media (min-width: 1024px) {
  .v2-subhero .v2-subhero__media { position: absolute; }
}

.v2-subhero .v2-subhero__media.wp-block-group::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--red) 0 34%, #fff 34% 67%, var(--navy-2) 67%);
}
@media (min-width: 1024px) {
  .v2-subhero .v2-subhero__media.wp-block-group::after {
    right: auto;
    bottom: 0;
    width: 6px;
    height: auto;
    background: linear-gradient(180deg, var(--red) 0 34%, #fff 34% 67%, var(--navy-2) 67%);
  }
}

.v2-subhero__media .v2-subhero__num p,
.v2-crosssell__media .v2-crosssell__num p { margin: 0; }
.v2-subhero__media .v2-subhero__num .v2-subhero__unit,
.v2-crosssell__media .v2-crosssell__num .v2-crosssell__unit {
  font-family: var(--font-ui);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.v2-subhero__media .v2-subhero__num .v2-subhero__unit {
  font-size: 18px;
  color: #fff;
  margin-top: 18px;
  text-shadow: 0 2px 12px rgba(3, 25, 59, .7);
}
.v2-crosssell__media .v2-crosssell__num .v2-crosssell__unit {
  font-size: 16px;
  color: var(--on-dark-muted);
  margin-top: 14px;
}

/* Representative login, on the copyright line.
   Not part of the approved design — it is the way in for the ten people who
   have an account, so it reads as glass over the footer rather than as a fourth
   navigation column. `backdrop-filter` is progressive: without it the panel is
   still a legible translucent box with its own border. */
.v2-footer .v2-footer__account ul { margin: 0; padding: 0; list-style: none; }
.v2-footer .v2-footer__account a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 16px 6px 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.v2-footer .v2-footer__account a::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%2216.5%22%20r%3D%223.6%22%2F%3E%3Cpath%20d%3D%22M10.1%2013.9%2020.5%203.5M16.6%207.4l2.6%202.6M14%2010l2.6%202.6%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%2216.5%22%20r%3D%223.6%22%2F%3E%3Cpath%20d%3D%22M10.1%2013.9%2020.5%203.5M16.6%207.4l2.6%202.6M14%2010l2.6%202.6%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.v2-footer .v2-footer__account a:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .12));
  border-color: rgba(255, 255, 255, .7);
  color: #fff;
  transform: translateY(-1px);
}
.v2-footer .v2-footer__account a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ------------------------------------------------------------------ home page
   The sections below were pasted HTML until every piece of them became a block.
   The design's own rules still do the work; these only reach through the extra
   elements a block brings — a <figure> around an image, a <p> where a <span>
   used to be — and restate the few bits of `<small>` styling that have no
   equivalent in a paragraph. */

/* A core Image inside a design element that positions the <img> itself. */
.v2-door .v2-door__photo,
.v2-plan .v2-plan__photo,
.v2-final .v2-final__photo { position: absolute; inset: 0; margin: 0; }
.v2-door .v2-door__photo { z-index: -2; }
.v2-plan .v2-plan__photo { z-index: -2; }
.v2-final .v2-final__photo { z-index: -2; }
.v2-door__photo img,
.v2-plan__photo img,
.v2-final__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v2-door__photo img { object-position: 45% 25%; }
.v2-door--call .v2-door__photo img { object-position: 55% 25%; }
.v2-door--zoom .v2-door__photo img { object-position: 60% 40%; }
.v2-plan__photo img { object-position: 45% 30%; }
.v2-plan--call .v2-plan__photo img { object-position: 55% 30%; }
.v2-plan--zoom .v2-plan__photo img { object-position: 60% 35%; }

/* The design animates `.v2-door__photo` / `.v2-plan__photo` itself; with a
   figure in between, the transform has to travel one level further in. */
.v2-door__photo img,
.v2-plan__photo img { transition: transform 900ms var(--ease); }
.v2-door--call .v2-door__photo img { transform: scaleX(-1); }
.v2-door--zoom .v2-door__photo img { transform: scale(1.18); transform-origin: 12% 45%; }
.v2-door:hover .v2-door__photo img { transform: scale(1.045); }
.v2-door--call:hover .v2-door__photo img { transform: scaleX(-1) scale(1.045); }
.v2-door--zoom:hover .v2-door__photo img { transform: scale(1.23); }
.v2-plan--call .v2-plan__photo img { transform: scaleX(-1); }
.v2-plan:hover .v2-plan__photo img { transform: scale(1.05); }
.v2-plan--call:hover .v2-plan__photo img { transform: scaleX(-1) scale(1.05); }

/* Numerals: the unit was a <small>, and a paragraph cannot be one. */
.v2-door__num p,
.v2-plan__num p { margin: 0; }
.v2-door__num { pointer-events: none; }
.v2-door__num .v2-door__unit {
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.3vw, 22px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin-top: clamp(16px, 1.8vw, 32px);
  text-shadow: none;
}
.v2-plan__num { display: flex; align-items: baseline; gap: 4px; }
.v2-plan__num .v2-plan__unit {
  font-family: var(--font-ui);
  font-size: 16px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  text-shadow: none;
}

/* The card was one big <a>; a Group cannot be a link, so the call to action is
   the link and it covers the card. */
.v2-door__body p { margin: 0; }
.v2-door__body .wp-block-buttons { margin: 0; }
.v2-door__cta { align-self: flex-start; margin-top: 6px; }
/* `::after` on this link already draws the arrow, so the overlay takes `::before`
   — sharing one pseudo-element left an 18px arrow pinned to the corner of the
   card and no arrow beside the label. */
.wp-site-blocks .v2-door__cta .wp-block-button__link::before { content: ""; position: absolute; inset: 0; }
/* The design keeps the door button its own width on a phone; the exclusion in
   that rule names the element carrying `v2-btn`, which is now the button. */
@media (max-width: 479.98px) {
  .wp-site-blocks .v2-door__cta .v2-btn { width: auto; }
}

/* The seam between the doors is a Separator, so it sits in the grid track the
   design reserves for it — and an <hr> arrives with a border and a width. */
.wp-site-blocks .v2-doors__seam,
.editor-styles-wrapper .v2-doors__seam {
  width: auto;
  max-width: none;
  height: auto;
  margin: 0;
  border: 0;
  opacity: 1;
}

/* The ticker: eight items the office edits, doubled by the script so the
   marquee can loop without a seam. */
.v2-ticker__track.wp-block-list { margin: 0; padding: 0; }

/* The video section is a Columns block; the design's own grid keeps the 4/8
   split, so the columns are its grid items. */
.v2-video-grid.wp-block-columns { flex-wrap: nowrap; gap: var(--s5); }
@media (min-width: 1024px) { .v2-video-grid.wp-block-columns { gap: var(--s7); } }
.v2-video-grid > .wp-block-column { min-width: 0; }

/* The specification list was a <dl>; the rows are Groups, which the design's
   `.v2-spec > div` already matches, and the term needs the <dt> styling. */
.v2-spec p { margin: 0; }
.v2-spec .v2-spec__t {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 6px;
}
.v2-plan__body .wp-block-buttons { margin-top: auto; align-self: flex-start; }
.v2-plan__head p { margin: 0; }
.v2-plan__head .v2-plan__title { margin: 10px 0 2px; }

/* "or" between the two plans is decoration, not content. */
.v2-plans { position: relative; }
@media (min-width: 900px) {
  .v2-plans::after {
    content: "or";
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
    display: grid; place-items: center; width: 56px; height: 56px;
    border-radius: 50%; border: 1px solid var(--line); background: #fff;
    box-shadow: 0 6px 18px rgba(3, 25, 59, .10);
    font-family: var(--font-display); font-size: 24px; color: var(--navy);
  }
}

/* The trust marks: four Groups in the grid the design already describes. */
.v2-trust > .wp-block-group { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.v2-trust > .wp-block-group p { margin: 0; }
.v2-trust .wp-block-image { margin: 0; }
.v2-trust .wp-block-image img { height: 40px; width: auto; }
.v2-trust > .wp-block-group:nth-child(3) .wp-block-image img { height: 22px; margin-block: 9px; }
.v2-trust .v2-trust__cap {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.v2-trust a { color: inherit; text-decoration: none; }

/* A core Image caption carries a bottom margin of its own; the design puts the
   whole gap above it. */
.v2-better__media figcaption { margin-bottom: 0; }
/* The separator draws its line from `color`, which it must not tint. */
.v2-doors__seam { color: inherit; }

/* The contact details on the privacy page were a <dl>; the rows are Groups now,
   so the layout rules are keyed on the class rather than on the tag. */
.v2-prose .v2-contact { margin-top: var(--s3); }
.v2-prose .v2-contact > .wp-block-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 480px) {
  .v2-prose .v2-contact > .wp-block-group { grid-template-columns: 160px 1fr; gap: var(--s2); }
}
.v2-prose .v2-contact > .wp-block-group:last-child { border-bottom: 1px solid var(--line); }
.v2-prose .v2-contact p { margin: 0; }
.v2-prose .v2-contact .v2-contact__t {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 4px;
}