/*
Theme Name: A2TEAM
Theme URI: https://a2team.lv
Author: A2TEAM
Author URI: https://a2team.lv
Description: Block theme for SIA A2TEAM - concrete works and foundation construction in Latvia. Ships a three-language site (LV / EN / RU) as three editable pages.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: a2team
Tags: block-theme, business, one-page, full-site-editing, custom-colors, translation-ready
*/

/* -------------------------------------------------------------------------
   Design tokens
   ---------------------------------------------------------------------- */

:root {
  --navy: #10202f;
  --navy-deep: #0a1520;
  --steel: #3c6f9c;
  --steel-light: #5f9bcb;
  --sand: #f4f2ee;
  --line: rgba(255, 255, 255, 0.12);
  --ink: #16202a;
  --muted: #64748b;
  --rust: #a95835;
  --concrete: #aeb5b8;
  /* The design's .wrap is 1180px wide *including* its 24px gutters, so the
     content column itself is 1132px. Sections carry the gutter as padding and
     constrain their children to --content; the header and footer bars use the
     full --maxw with their own padding, exactly as .wrap did. */
  --maxw: 1180px;
  --content: 1132px;
  --gutter: 24px;
  --header-h: 84px;
}

/* -------------------------------------------------------------------------
   Base
   ---------------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: "Barlow", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

/* Mirrors the design's condensed-type list exactly (h1-h3, .stat-num, .btn,
   nav links). The language switch and step numbers are deliberately NOT here:
   in the design they set their own font and keep their own letter-spacing. */
body h1,
body h2,
body h3,
body .stat-num,
body .wp-block-button__link,
body .site-nav a {
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  letter-spacing: 0.02em;
}

img {
  display: block;
  max-width: 100%;
}

.wp-site-blocks {
  min-height: 100vh;
}

/* Screen-reader-only helper, used by the burger button label. */
.a2-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------
   Sections
   ---------------------------------------------------------------------- */

.a2-section {
  padding: 110px var(--gutter);
  scroll-margin-top: var(--header-h);
}

.a2-section.dark {
  background: var(--navy);
  color: #fff;
}

.section-title {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 40px;
  font-weight: 700;
}

/* The second line of every headline is a highlight-formatted <mark>, so the
   colour stays editable in the block editor. */
.section-title mark,
.hero h1 mark {
  display: block;
  background: none;
  color: var(--steel);
}

.dark .section-title mark {
  color: var(--steel-light);
}

.lead {
  color: var(--muted);
  margin: 0 0 1em;
}

.dark .lead {
  color: rgba(255, 255, 255, 0.72);
}

/* -------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------- */

/* Scoped through .wp-block-button on purpose. Core's global styles ship
   `:root :where(.wp-element-button, .wp-block-button__link)` with a grey
   background and zero border width; that is the same specificity as a bare
   `.wp-block-button__link`, so which one wins comes down to stylesheet order -
   and the order is reversed between the front end and the editor canvas. The
   extra class puts these rules above it in both places. */
.wp-block-button .wp-block-button__link {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 18px;
  /* 0.02em, not the 0.08em the design's `.btn` rule declares: the design's
     condensed-type group outranks `.btn`, so 0.02em is what actually renders
     there. Stated outright because this selector now outranks the equivalent
     group above, which used to supply it. */
  letter-spacing: 0.02em;
  padding: 14px 34px;
  border: 2px solid var(--steel);
  border-radius: 0;
  background: var(--steel);
  color: #fff;
  transition: background 0.2s, color 0.2s, transform 0.2s;
  cursor: pointer;
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus-visible {
  background: var(--steel-light);
  border-color: var(--steel-light);
  color: #fff;
  transform: translateY(-2px);
}

.wp-block-button.is-ghost .wp-block-button__link {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.6);
}

.wp-block-button.is-ghost .wp-block-button__link:hover,
.wp-block-button.is-ghost .wp-block-button__link:focus-visible {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}

/* -------------------------------------------------------------------------
   Header
   ---------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: linear-gradient(to bottom, rgba(10, 21, 32, 0.78), transparent);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.site-header.scrolled {
  background: var(--navy);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.wp-block-group.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  height: var(--header-h);
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  flex-wrap: nowrap;
}

.site-header .brand {
  margin: 0;
  line-height: 0;
  flex: 0 0 auto;
}

.site-header .brand a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 52px;
  background: #fff;
  padding: 8px 14px;
  border-radius: 3px;
  line-height: 0;
}

.site-header .brand img {
  width: 58px;
  height: 38px;
  object-fit: contain;
}

.wp-block-group.site-nav {
  display: flex;
  gap: 30px;
  align-items: center;
  flex-wrap: nowrap;
}

.site-nav p {
  margin: 0;
}

.site-nav a {
  /* Block, so the hover underline sits where the design puts it: the nav link
     is a flex item there and gets blockified. */
  display: block;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 17px;
  opacity: 0.86;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  opacity: 1;
  border-bottom-color: var(--steel-light);
}

.wp-block-group.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 4px;
  flex-wrap: nowrap;
  flex: 0 0 auto;
}

.lang-switch p {
  margin: 0;
  line-height: 0;
}

.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 30px;
  border-radius: 2px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
}

.lang-switch .is-active a,
.lang-switch a:hover,
.lang-switch a:focus-visible {
  background: #fff;
  color: var(--navy);
}

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 1px solid var(--line);
  color: #fff;
  width: 44px;
  height: 40px;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}

.burger span:not(.a2-sr-only) {
  width: 18px;
  height: 2px;
  background: currentColor;
}

/* -------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------- */

/* The design's hero is a <section>, so it picks up the generic 110px section
   padding *in addition to* the 100px/60px on its inner .wrap. Those are summed
   here, because the cover block has no equivalent inner wrapper to pad. */
.wp-block-cover.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  padding: 210px var(--gutter) 170px;
}

.wp-block-cover.hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content);
  margin: 0 auto;
}

.wp-block-cover.hero .wp-block-cover__image-background {
  object-fit: cover;
}

/* In the design, `.hero p` is declared after `.eyebrow` and outranks it, so the
   eyebrow actually renders at 1.15rem in translucent white with a 34px gap -
   not the 13px steel of the `.eyebrow` rule. These are the values the design
   really produces; do not "restore" the .eyebrow declarations. */
.hero .eyebrow {
  max-width: 620px;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 1.15rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 34px;
}

.hero h1 {
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 0.95;
  margin: 0 0 22px;
  text-transform: uppercase;
  font-weight: 700;
}

.hero h1 mark {
  color: var(--steel-light);
}

.hero .hero-text {
  max-width: 620px;
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 34px;
}

.wp-block-buttons.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
}

/* -------------------------------------------------------------------------
   About
   ---------------------------------------------------------------------- */

/* Vertical centring comes from the block's verticalAlignment attribute, not
   from here: core sets `.wp-block-columns{align-items:normal!important}`. */
.wp-block-columns.two-col {
  gap: 56px;
  margin-bottom: 0;
}

.frame {
  position: relative;
  margin: 0;
}

.frame::before {
  content: "";
  position: absolute;
  inset: -18px -18px 18px 18px;
  border: 2px solid var(--steel);
  z-index: 0;
}

.frame .wp-block-image,
.frame figure {
  margin: 0;
}

.frame img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 480px;
  object-fit: cover;
}

.wp-block-group.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  margin-top: 44px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 28px;
}

.stat-num {
  font-size: 3rem;
  font-weight: 700;
  color: var(--steel);
  line-height: 1;
  margin: 0;
}

.stat-label {
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin: 0;
}

/* -------------------------------------------------------------------------
   Service cards
   ---------------------------------------------------------------------- */

.wp-block-group.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.wp-block-group.card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  padding: 34px 28px;
  transition: transform 0.25s, border-color 0.25s, background 0.25s;
}

.wp-block-group.card:hover {
  transform: translateY(-6px);
  border-color: var(--steel-light);
  background: rgba(95, 155, 203, 0.1);
}

.card .num {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--steel-light);
  margin: 0;
}

.card h3 {
  font-size: 1.6rem;
  text-transform: uppercase;
  margin: 10px 0 12px;
}

.card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.card li {
  padding: 7px 0 7px 20px;
  position: relative;
  color: rgba(255, 255, 255, 0.75);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 16px;
}

.card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 8px;
  height: 2px;
  background: var(--steel-light);
}

/* -------------------------------------------------------------------------
   Gallery mosaic
   ---------------------------------------------------------------------- */

.wp-block-gallery.a2-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 70px;
  grid-auto-flow: dense;
  gap: 14px;
  margin: 0;
}

.a2-gallery figure.wp-block-image {
  margin: 0;
  overflow: hidden;
  background: var(--navy);
  width: auto !important;
  flex-grow: 0 !important;
  display: block;
}

.a2-gallery figure.wp-block-image a,
.a2-gallery figure.wp-block-image img {
  display: block;
  width: 100%;
  height: 100%;
}

.a2-gallery figure.wp-block-image img {
  object-fit: cover;
  transition: transform 0.6s ease, opacity 0.3s;
  opacity: 0.92;
  cursor: pointer;
}

.a2-gallery figure.wp-block-image:hover img,
.a2-gallery figure.wp-block-image:focus-within img {
  transform: scale(1.07);
  opacity: 1;
}

/* The nine featured tiles keep their hand-placed grid positions. */
.a2-gallery figure.wp-block-image:nth-child(1) { grid-column: 1 / 7; grid-row: 1 / 5; }
.a2-gallery figure.wp-block-image:nth-child(2) { grid-column: 7 / 10; grid-row: 1 / 6; }
.a2-gallery figure.wp-block-image:nth-child(3) { grid-column: 10 / 13; grid-row: 1 / 6; }
.a2-gallery figure.wp-block-image:nth-child(4) { grid-column: 1 / 7; grid-row: 5 / 9; }
.a2-gallery figure.wp-block-image:nth-child(5) { grid-column: 7 / 13; grid-row: 6 / 9; }
.a2-gallery figure.wp-block-image:nth-child(6) { grid-column: 1 / 4; grid-row: 9 / 17; }
.a2-gallery figure.wp-block-image:nth-child(7) { grid-column: 4 / 7; grid-row: 9 / 17; }
.a2-gallery figure.wp-block-image:nth-child(8) { grid-column: 7 / 13; grid-row: 9 / 13; }
.a2-gallery figure.wp-block-image:nth-child(9) { grid-column: 7 / 13; grid-row: 13 / 17; }

/* Everything past the ninth tile waits behind "Load more". */
.a2-gallery figure.wp-block-image:nth-child(n + 10) {
  display: none;
}

.wp-block-gallery.a2-gallery.expanded {
  display: block;
  column-count: 3;
  column-gap: 14px;
}

.a2-gallery.expanded figure.wp-block-image {
  display: block;
  width: 100% !important;
  margin: 0 0 14px;
  break-inside: avoid;
}

.a2-gallery.expanded figure.wp-block-image img {
  height: auto;
}

.wp-block-group.gallery-actions {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.gallery-actions .wp-block-buttons {
  margin: 0;
}

/* "Load more" is a <button> in the design, so it uses the UA line height
   rather than the inherited 1.65 the hero's anchor buttons pick up. */
.gallery-actions .wp-block-button__link {
  line-height: normal;
}

.gallery-actions[hidden] {
  display: none;
}

/* -------------------------------------------------------------------------
   Lightbox
   ---------------------------------------------------------------------- */

.a2-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(6, 12, 18, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--gutter);
}

.a2-lightbox.open {
  display: flex;
}

.a2-lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
}

.a2-lightbox .close,
.a2-lightbox-nav {
  position: absolute;
  background: rgba(6, 12, 18, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.a2-lightbox .close {
  top: 18px;
  right: var(--gutter);
  width: 44px;
  height: 44px;
  font-size: 34px;
  border-radius: 50%;
}

.a2-lightbox-nav {
  top: 50%;
  width: 52px;
  height: 70px;
  font-size: 48px;
  transform: translateY(-50%);
}

.a2-lightbox-nav.prev {
  left: var(--gutter);
}

.a2-lightbox-nav.next {
  right: var(--gutter);
}

.a2-lightbox .close:hover,
.a2-lightbox .close:focus-visible,
.a2-lightbox-nav:hover,
.a2-lightbox-nav:focus-visible {
  background: rgba(95, 155, 203, 0.7);
  border-color: rgba(255, 255, 255, 0.7);
}

.a2-lightbox-nav:hover,
.a2-lightbox-nav:focus-visible {
  transform: translateY(-50%) scale(1.04);
}

/* -------------------------------------------------------------------------
   Process steps
   ---------------------------------------------------------------------- */

.wp-block-group.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.wp-block-group.step {
  border-top: 3px solid var(--steel);
  padding-top: 18px;
}

.step-num {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: rgba(16, 32, 47, 0.18);
  line-height: 1;
  display: block;
  margin: 0;
}

.step h3 {
  margin: 6px 0 8px;
  font-size: 1.35rem;
  text-transform: uppercase;
}

.step p:not(.step-num) {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

/* -------------------------------------------------------------------------
   Contact
   ---------------------------------------------------------------------- */

.wp-block-columns.contact-grid {
  gap: 56px;
  margin-bottom: 0;
}

/* The requisites list is the taller column, so the form would otherwise float
   at the top of the row. Dropping it to the foot lines the submit button up
   with the last requisites row. Below 980px the columns stack, and pushing
   down there would strand the form under a gap. */
@media (min-width: 981px) {
  .contact-grid > .wp-block-column:last-child {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  /* .wpcf7-response-output reserves a 20px note strip below the button, plus
     the form's 14px grid gap. That strip is invisible until a submission, so
     aligning on it would leave the button looking 34px high. Pull the form
     down by exactly that much: the button lands on the last requisites row and
     the reserved strip sits in the section padding, still reserved. */
  .contact-grid .a2form {
    margin-bottom: calc(-1 * (14px + 20px));
  }
}

.wp-block-group.req {
  display: block;
}

.wp-block-group.req-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 16px;
}

.req-label {
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.14em;
  margin: 0;
}

.req-value {
  margin: 0;
  text-align: right;
}

.req-value a {
  color: var(--steel-light);
  text-decoration: none;
}

/* Contact Form 7, styled to the design's form. */
.a2form {
  position: relative;
}

.a2form .wpcf7 {
  margin: 0;
}

.a2form .wpcf7-form {
  display: grid;
  gap: 14px;
}

.a2form .wpcf7-form p {
  margin: 0;
}

.a2form .wpcf7-form-control-wrap {
  display: block;
}

/* display:block drops the inline baseline strut inside Contact Form 7's
   paragraph wrappers, which would otherwise double the 14px field gap. */
.a2form input.wpcf7-form-control,
.a2form textarea.wpcf7-form-control {
  display: block;
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  color: #fff;
  padding: 14px 16px;
  font: inherit;
  font-size: 16px;
  border-radius: 2px;
}

.a2form input.wpcf7-form-control:focus,
.a2form textarea.wpcf7-form-control:focus {
  outline: none;
  border-color: var(--steel-light);
}

.a2form input.wpcf7-form-control::placeholder,
.a2form textarea.wpcf7-form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Contact Form 7 renders rows="10"; the design's field is 130px tall. */
.a2form textarea.wpcf7-form-control {
  height: 130px;
  min-height: 130px;
  resize: vertical;
}

/* The design's submit is a grid item, so it fills the form column. */
.a2form input.wpcf7-submit {
  display: block;
  width: 100%;
  text-transform: uppercase;
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: normal;
  letter-spacing: 0.02em;
  padding: 14px 34px;
  border: 2px solid var(--steel);
  background: var(--steel);
  color: #fff;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.a2form input.wpcf7-submit:hover,
.a2form input.wpcf7-submit:focus-visible {
  background: var(--steel-light);
  border-color: var(--steel-light);
  transform: translateY(-2px);
}

/* Out of flow: in flow the (hidden) spinner adds a line box under the submit
   button and stretches the form past the design's height. */
.a2form .wpcf7-spinner {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
}

/* Stands in for the design's .form-note: always present, reserving 20px below
   the button, plain text rather than Contact Form 7's bordered callout. */
.a2form .wpcf7 form .wpcf7-response-output {
  display: block;
  min-height: 20px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--steel-light);
  margin: 0;
  padding: 0;
  border: 0;
}

.a2form .wpcf7-not-valid-tip {
  font-size: 13px;
  color: #e88b6a;
  margin-top: 6px;
}

.a2form .wpcf7-form.invalid .wpcf7-response-output,
.a2form .wpcf7-form.unaccepted .wpcf7-response-output {
  color: #e88b6a;
}

/* -------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------- */

.site-footer {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.6);
  padding: 30px 0;
  font-size: 14px;
}

/* Gutters live on the inner bar, as in the design's .wrap. */
.wp-block-group.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.footer-inner p {
  margin: 0;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}

/* -------------------------------------------------------------------------
   Reveal on scroll
   ---------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */

@media (max-width: 980px) {
  .wp-block-columns.two-col,
  .wp-block-columns.contact-grid {
    flex-wrap: wrap;
  }

  .two-col > .wp-block-column,
  .contact-grid > .wp-block-column {
    flex-basis: 100% !important;
  }

  .wp-block-group.cards,
  .wp-block-group.steps {
    grid-template-columns: 1fr 1fr;
  }

  .wp-block-gallery.a2-gallery {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 82px;
  }

  .frame img {
    height: 340px;
  }

  .a2-gallery figure.wp-block-image:nth-child(1) { grid-column: 1 / 7; grid-row: 1 / 4; }
  .a2-gallery figure.wp-block-image:nth-child(2) { grid-column: 1 / 4; grid-row: 4 / 9; }
  .a2-gallery figure.wp-block-image:nth-child(3) { grid-column: 4 / 7; grid-row: 4 / 9; }
  .a2-gallery figure.wp-block-image:nth-child(4) { grid-column: 1 / 7; grid-row: 9 / 12; }
  .a2-gallery figure.wp-block-image:nth-child(5) { grid-column: 1 / 7; grid-row: 12 / 15; }
  .a2-gallery figure.wp-block-image:nth-child(6) { grid-column: 1 / 4; grid-row: 15 / 23; }
  .a2-gallery figure.wp-block-image:nth-child(7) { grid-column: 4 / 7; grid-row: 15 / 23; }
  .a2-gallery figure.wp-block-image:nth-child(8) { grid-column: 1 / 7; grid-row: 23 / 26; }
  .a2-gallery figure.wp-block-image:nth-child(9) { grid-column: 1 / 7; grid-row: 26 / 29; }

  .wp-block-gallery.a2-gallery.expanded {
    column-count: 2;
  }
}

@media (max-width: 720px) {
  .a2-section {
    padding: 72px var(--gutter);
  }

  .wp-block-group.header-inner {
    height: 76px;
  }

  .burger {
    display: flex;
  }

  .wp-block-group.lang-switch {
    margin-left: auto;
  }

  .wp-block-group.site-nav {
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: var(--navy);
    flex-direction: column;
    gap: 0;
    padding: 8px var(--gutter) 20px;
    display: none;
    align-items: stretch;
  }

  .wp-block-group.site-nav.open {
    display: flex;
  }

  .site-nav a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }

  .wp-block-group.cards,
  .wp-block-group.steps,
  .wp-block-group.stats {
    grid-template-columns: 1fr;
  }

  .wp-block-gallery.a2-gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 104px;
  }

  .a2-gallery figure.wp-block-image:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
  .a2-gallery figure.wp-block-image:nth-child(2) { grid-column: 1 / 2; grid-row: 3 / 6; }
  .a2-gallery figure.wp-block-image:nth-child(3) { grid-column: 2 / 3; grid-row: 3 / 6; }
  .a2-gallery figure.wp-block-image:nth-child(4) { grid-column: 1 / 3; grid-row: 6 / 8; }
  .a2-gallery figure.wp-block-image:nth-child(5) { grid-column: 1 / 3; grid-row: 8 / 10; }
  .a2-gallery figure.wp-block-image:nth-child(6) { grid-column: 1 / 2; grid-row: 10 / 14; }
  .a2-gallery figure.wp-block-image:nth-child(7) { grid-column: 2 / 3; grid-row: 10 / 14; }
  .a2-gallery figure.wp-block-image:nth-child(8) { grid-column: 1 / 3; grid-row: 14 / 16; }
  .a2-gallery figure.wp-block-image:nth-child(9) { grid-column: 1 / 3; grid-row: 16 / 18; }

  .wp-block-gallery.a2-gallery.expanded {
    column-count: 1;
  }

  .a2-lightbox {
    padding: 14px;
  }

  .a2-lightbox img {
    max-width: 100%;
    max-height: 82vh;
  }

  .a2-lightbox .close {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
  }

  .a2-lightbox-nav {
    bottom: 18px;
    top: auto;
    width: 48px;
    height: 48px;
    font-size: 36px;
    transform: none;
  }

  .a2-lightbox-nav.prev {
    left: 18px;
  }

  .a2-lightbox-nav.next {
    right: 18px;
  }

  .a2-lightbox-nav:hover,
  .a2-lightbox-nav:focus-visible {
    transform: scale(1.04);
  }

  .hero h1 {
    font-size: 3.3rem;
  }

  .hero .eyebrow {
    letter-spacing: 0.2em;
  }

  /* 72px section padding + the wrap's 100/60, as on desktop. */
  .wp-block-cover.hero {
    padding: 172px var(--gutter) 132px;
  }

  /* Full-width buttons stack via the existing flex gap, so no extra margin
     creeps in below the last one. */
  .wp-block-buttons.hero-actions .wp-block-button,
  .gallery-actions .wp-block-buttons,
  .gallery-actions .wp-block-button {
    width: 100%;
  }

  .hero-actions .wp-block-button__link,
  .gallery-actions .wp-block-button__link,
  .a2form input.wpcf7-submit {
    width: 100%;
    text-align: center;
  }

  .req-value {
    text-align: left;
  }
}