/* =========================================================
   FALE ALFA — theme build (ported from static/fale-alfa)
   Design frame: 1600 × 4500 px.  Base: 16px = 1rem.
   ========================================================= */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;            /* variable: covers Regular / SemiBold / Bold */
  font-display: swap;
  src: url("fonts/figtree-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  --white:  #ffffff;
  --orange: #ff6200;
  --black:  #000000;

  --gray-desc:        #4b5563;   /* contact sub-heading (Inter) - AA on the light section */
  --gray-placeholder: #6b7280;   /* form placeholders - AA contrast on white inputs */

  /* Section backgrounds — exact Figma fills, composited over the black page */
  --bg-services: rgba(0, 0, 0, 0.8);
  --bg-light:    rgba(255, 255, 255, 0.9);
  --bg-clients:  rgba(255, 98, 0, 0.8);

  --font:       "Figtree", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-inter: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --design-w: 1600px;
  --btn-radius: 30px;            /* pill — keep in px */

  /* The two floating controls, the language pill and the hamburger, are both
     fixed at the same top. They are only aligned with each other if they are
     the same height: aligning by the top edge alone put their centres 2.5px
     apart the moment the pill grew a border and padding. */
  --ctrl-h: 2rem;                /* 32 — same as the logo, so all three share a centre line */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--black);
  font-family: var(--font);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: none; }
p { margin: 0; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ---------- Full-bleed sections + centered stage ----------
   Section backgrounds span the full viewport width. The CONTENT lives in a
   1600px "stage" (the Figma frame), centered, and is scaled to fit between
   1024 and 1600px by falealfa.js so the layout stays pixel-faithful. */
#site { position: relative; width: 100%; overflow-x: clip; }
.stage {
  position: relative;
  width: var(--design-w);          /* 1600 */
  height: 56.25rem;                /* 900 — all Figma sections are 900 tall */
  margin: 0;
  transform-origin: top left;      /* JS centers via translateX so it never clips */
}
.section-fw {                      /* full-width section wrapper */
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* =========================================================
   BUTTON (shared) — Figma: orange pill, 24/12 padding,
   Figtree Bold 14, tracking 1.4px, uppercase, white
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;          /* 12 / 24 */
  background: var(--orange);
  color: var(--white);
  font-weight: 700;
  font-size: 0.875rem;              /* 14 */
  line-height: 1;
  letter-spacing: 0.0875rem;        /* 1.4px */
  text-transform: uppercase;
  white-space: nowrap;
  /* The button never said it was not underlined, and got away with it until it
     landed inside WooCommerce content, where links are underlined by the
     plugin stylesheet: the pill came out with a line under the label. A
     component has to state its own appearance rather than rely on nobody
     styling links around it. */
  text-decoration: none;
  border: none;
  border-radius: var(--btn-radius);
}


/* ---- Button hover ----
   The pill had no feedback at all: same fill, same position, nothing on
   press. A sweep of light crossing the label reads on both the orange pill
   and the black one it becomes on orange sections, where a simple darken
   would be invisible. */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.28) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  filter: brightness(1.06);
}
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::after { transition: none; }
  .btn:hover { transform: none; }
}

/* =========================================================
   HEADER  (1600 × 80, padding 24, justify-between)
   ========================================================= */
.header {
  position: absolute;
  top: 0; left: 0;
  z-index: 110;                     /* above the nav overlay so the X stays on top */
  width: 100%;
  height: 5rem;                     /* 80 */
}
.header__inner {                    /* content capped to the 1600 frame */
  max-width: var(--design-w);
  height: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;                /* 24 */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  position: relative;
  width: 9.284375rem;               /* 148.55 */
  height: 2rem;                     /* 32 */
  flex-shrink: 0;
}
/* Written as .logo .logo__* (0-2-0) rather than .logo__* (0-1-0) on purpose.
   WooCommerce puts `woocommerce-page` on the body and ships
   `.woocommerce-page img { height: auto; max-width: 100% }`, which is 0-1-1 and
   outranked the flat class. These marks are drawn with
   preserveAspectRatio="none", so losing the explicit height stretched the whole
   logo to 150px tall on the cart and checkout. */
.logo .logo__full { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.logo .logo__wordmark {             /* white "fale alfa" overlay (node 67:92) */
  position: absolute;
  left: 3.534375rem;                /* 56.55 (80.55 − 24) */
  top: 0.708125rem;                 /* 11.33 (35.33 − 24) */
  width: 5.749375rem;               /* 91.99 */
  height: 0.53125rem;               /* 8.50 */
  max-width: none;
}
.menu-toggle {
  position: fixed;                  /* always reachable while scrolling */
  top: 1.5rem;
  right: 1.5rem;
  z-index: 120;                     /* above the nav overlay */
  width: 1.75rem;
  height: var(--ctrl-h);            /* same centre line as the language pill */
  padding: 0;
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.3125rem;                   /* 5 between bars */
}
.menu-toggle span {
  display: block;
  width: 1.5rem;                    /* 24 */
  height: 2px;
  background: #fff;                 /* white by default (over dark) */
  border-radius: 2px;
  transition: transform 0.3s ease, background 0.2s ease;
}
.menu-toggle--dark span { background: #111; }       /* over light sections */
.menu-toggle.is-active span { background: #fff; }   /* over dark menu overlay */
/* hamburger → X morph */
.menu-toggle.is-active span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle.is-active span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* =========================================================
   NAV MENU — scroll to sections (desktop + mobile)
   Not defined in Figma; on-brand overlay panel.
   ========================================================= */
.nav {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* Opaque, not 0.96. Those 4% read as nothing against a swatch and as a ghost
     against the real page: the panel opens over white-on-black headings and a
     white content band, and both stayed legible straight through the menu. */
  background: var(--black);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.nav.is-open { opacity: 1; visibility: visible; }
/* Set by the menu script while the panel is open. The scroll position travels
   in an inline `top`, which is why this only ever pairs with that script. */
body.is-nav-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}
.nav__list { list-style: none; margin: 0; padding: 0; text-align: center; display: flex; flex-direction: column; gap: 0.25rem; }
.nav__link {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: -0.05rem;
  color: var(--white);
  transition: color 0.2s ease;
}
.nav__link:hover { color: var(--orange); }

/* =========================================================
   HERO  (1600 × 900)
   ========================================================= */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--black);
}
.hero__bg { position: absolute; inset: 0; z-index: 0; background: var(--black); overflow: hidden; }
/* Static "world" cover, exactly as the Figma frame (video_bg 67:103).
   Background image is set inline by the template (ACF field or fallback). */
.hero__earth {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* The loop is laid over the still, which has already painted, and the still is
   the video's own first frame, so the swap is invisible. It arrives with a
   fade for the moment the decoder needs. */
.hero__video {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hero__video.is-playing { opacity: 1; }


.hero__alpha {
  position: absolute;
  left: 7.838906rem;                /* 125.42 */
  top: 6.300125rem;                 /* 100.80 */
  width: 56.893251rem;              /* 910.292 */
  height: 43.649752rem;             /* 698.396 */
  z-index: 1;
}
.hero__content {
  position: absolute;
  left: 58.671875rem;               /* 938.75 */
  top: 30.331875rem;                /* 485.31 */
  width: 33.946094rem;              /* 543.137 */
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;                      /* 24 */
}
.hero__title {
  margin: 0;
  font-weight: 700;
  font-size: 3rem;                  /* 48 */
  line-height: 1;
  letter-spacing: -0.15rem;         /* -2.4px */
  color: var(--white);
}
.hero__desc {
  font-weight: 400;
  font-size: 1rem;                  /* 16 */
  line-height: 1.5;
  color: var(--white);
}
.hero__desc p + p { margin-top: 0; }

/* The hero opener is two lines in the briefing: the headline and its echo in
   the other language. Italic and dimmed so it reads as the same thought said
   twice, not as a second sentence. Sits inside .hero__content, whose flex gap
   would push it away from the H1, hence the negative pull. */
.hero__echo {
  margin-top: -0.75rem;
  font-style: italic;
  font-weight: 400;
  font-size: 1.375rem;              /* 22 */
  line-height: 1.2;
  letter-spacing: -0.02rem;
  color: rgba(255, 255, 255, 0.62);
}
@media (max-width: 1024px) {
  .hero__echo { margin-top: -0.5rem; font-size: 1.125rem; }
}

/* =========================================================
   SERVICES  (1600 × 900, black 80%)
   ========================================================= */
.services {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--bg-services);
}
.services__list {
  position: absolute;
  left: 6.708125rem;                /* 107.33 */
  top: 7.125rem;                    /* 114 — same as Figma */
  font-weight: 700;
  font-size: 2.5rem;                /* 40 — Figma is 96, but the real names are ~3x longer; single line preserved */
  line-height: 1;
  letter-spacing: -0.125rem;
  color: var(--white);
  white-space: nowrap;              /* one line per service, exactly like the Figma */
}
.services__list p { margin: 0 0 0.875rem; } /* 14 between rows keeps the Figma's stacked-list feel */
.services__list p:last-child { margin-bottom: 0; }
/* Scoped to the list on purpose. A bare `.service` collides with WordPress:
   post_class() prints the post type as a class, so every single-service
   <article> matched this rule and inherited cursor:pointer (and width:
   max-content) across the whole page. */
.services__list .service { cursor: pointer; transition: color 0.25s ease; width: max-content; }
.services__list .service.is-accent { color: var(--orange); }
.service-detail { display: none; }   /* mobile-only accordion (shown via media query) */

/* Right-side panel (divider + description + button) that follows the
   hovered service line vertically. It spans the whole stage, so it must NOT
   capture the mouse — otherwise it sits on top of the list and the lines
   never receive :hover. Only the button re-enables pointer events. */
.services__panel {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.services__panel .btn { pointer-events: auto; }
.services__list { z-index: 2; }
.services__divider {
  position: absolute;
  left: 46.599375rem;               /* 745.59 — JS adapts this to the list column */
  top: 24.5rem;                     /* JS re-anchors below the description */
  width: 47.239188rem;              /* 755.827 */
  height: 2px;                      /* 1px vanishes when the stage scales below 1600px */
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.services__desc {
  position: absolute;
  right: 6.16125rem;                /* 1600 − 1501.42 = 98.58 */
  top: 13.75rem;                    /* JS re-anchors: text ends just above the divider */
  width: 34rem;                     /* 544 — wider than the Figma 425 so the real copy takes fewer lines */
  transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 400;
  font-size: 1rem;                  /* 16 */
  line-height: 1.5;
  text-align: right;
  color: var(--white);
}
.services__btn {
  position: absolute;
  left: 84.463875rem;               /* 1351.42 */
  top: 26.375rem;                   /* JS re-anchors just below the divider */
  transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* The services stage doesn't need the full 900px frame anymore: the real
   list (8 rows at the smaller type) ends around 610px — trim the dead space. */
.stage--services { height: 41rem; }

/* =========================================================
   TESTIMONIAL  (1600 × 900, white 90%)
   ========================================================= */
.testimonial {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--bg-light);
  color: var(--black);
}
.testimonial__alpha {
  position: absolute;
  left: 15.09375rem;                /* 241.5 */
  top: 14.224846rem;                /* 227.5975 */
  width: 15.625rem;                 /* 250 */
  height: 12rem;                    /* 192 */
}
.testimonial__quote {
  position: absolute;
  left: 78.03125rem;                /* 1248.5 */
  top: 30.349846rem;                /* 485.5975 */
  width: 6.875rem;                  /* 110 */
  height: 5.75rem;                  /* 92 */
}
.testimonial__text {
  position: absolute;
  left: 31.746094rem;               /* 507.9375 */
  top: 16.599846rem;                /* 265.5975 */
  width: 50.680709rem;              /* 810.891 */
  font-weight: 700;
  font-size: 2.5rem;                /* 40 */
  line-height: 1.2;
  color: var(--black);
}
.testimonial__text,
.testimonial__name,
.testimonial__role { transition: opacity 0.16s ease; }
.testimonial__footer {
  position: absolute;
  left: 31.75rem;                   /* 508 */
  top: 39.775154rem;                /* 636.4025 */
  width: 53.1875rem;                /* 851 */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.testimonial__info {
  display: flex;
  align-items: baseline;
  gap: 1rem;                        /* 16 */
  line-height: 1.2;
  white-space: nowrap;
}
.testimonial__name {
  font-weight: 700;
  font-size: 1.5rem;                /* 24 */
  color: var(--orange);
}
.testimonial__role {
  font-weight: 400;
  font-size: 1rem;                  /* 16 */
  color: var(--black);
}
.testimonial__nav { display: flex; align-items: center; gap: 1.125rem; } /* 18 */
.nav-arrow {                        /* CSS circle; image is just the arrow */
  width: 2.25rem;                   /* 36 */
  height: 2.25rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.nav-arrow img { width: 100%; height: 100%; }
.nav-arrow--prev { transform: rotate(180deg); }
.nav-arrow:hover { background: #f0f0f0; }

/* =========================================================
   CLIENTS  (1600 × 900, orange 80%)
   ========================================================= */
.clients {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--bg-clients);
}
/* The wall grows with the client list, so this stage is the one section that
   is not a fixed 900 frame: same offsets as the Figma frame, expressed as flow
   instead of absolute coordinates, so a fourth and fifth row extend the
   section instead of being clipped by its overflow. */
.stage--clients {
  height: auto;
  padding: 7.923069rem 0 8.3125rem; /* 126.77 top, 133 bottom, as in the frame */
}
.clients__title {
  position: static;
  margin: 0 0 4.514375rem;          /* 247 - 126.77 - 48, the frame's gap */
  font-weight: 700;
  font-size: 3rem;                  /* 48 */
  line-height: 1;
  letter-spacing: -0.15rem;         /* -2.4px */
  text-align: center;
  color: var(--white);
}
.clients__grid {
  position: static;
  width: max-content;               /* 4 x 200 + 3 x 80 = 1040, as in the frame */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 12.5rem);   /* 200 */
  grid-auto-rows: 7.5rem;                      /* 120 */
  column-gap: 5rem;                 /* 80 */
  row-gap: 5rem;                    /* 80 */
}
.client {
  position: relative;
  width: 12.5rem;                   /* 200 */
  height: 7.5rem;                   /* 120 */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.client__piece { position: absolute; }
/* Single flattened logo (WP repeater item): every mark gets the same box and
   is contained inside it, whatever it happens to measure.
   The box is pinned with inset rather than sized in percentages: a percentage
   width on a replaced element inside this flex cell was falling back to the
   file's own size, so a 43px square monogram rendered at 39px next to
   wordmarks at 180px, and the wall looked broken rather than varied. */
.client__piece--single {
  position: absolute;
  top: 10%;
  left: 5%;
  width: 90%;                  /* 180 x 96 inside the 200 x 120 cell */
  height: 80%;
  object-fit: contain;
}
/* The wall is one voice: every mark is flattened to white on the orange, the
   way the first twelve were exported. Marks taken from each company's own site
   arrive in their brand colours, and a wall of twenty logos in twenty palettes
   reads as a directory, not as a client list. brightness(0) crushes any fill
   to black and invert(1) lifts it to white, so a file's own colour never
   matters. */
.client img { filter: brightness(0) invert(1); }
.flip-y { transform: scaleY(-1); }  /* Figma rotate(180)·scaleX(-1) ≡ scaleY(-1) */

/* =========================================================
   CONTACT  (1600 × 900, white 90%)
   ========================================================= */
.contact {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--bg-light);
  color: var(--black);
}
.stage--contact {
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact__inner {
  width: 65rem;                     /* 1040 — same container width as the Clients grid (Figma x=280, w=1040) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;                      /* 40 */
}
.contact__head {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 1rem;                        /* 16 */
}
.contact__title {
  margin: 0;
  font-weight: 700;
  font-size: 3rem;                  /* 48 */
  line-height: 1;
  letter-spacing: -0.15rem;         /* -2.4px */
  color: var(--orange);
  white-space: nowrap;
}
.contact__sub {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 0.875rem;              /* 14 */
  line-height: 1.5;
  color: var(--gray-desc);
}

.contact__form {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2.5rem;                      /* 40 */
}
.form-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.form-card { gap: 1.25rem; }        /* 20 — left card fields gap */
.form-card--right { gap: 1.5rem; }  /* 24 — fields block + button */
.form-card__fields { display: flex; flex-direction: column; gap: 1.25rem; } /* 20 */

.field,
.lf-field { display: flex; flex-direction: column; gap: 0.5rem; } /* 8 */
.field label,
.lf-field__label {
  font-weight: 600;                 /* SemiBold */
  font-size: 0.875rem;              /* 14 */
  color: var(--black);
}

.field input,
.field textarea,
.lf-field input,
.lf-field textarea,
.cselect__trigger {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--white);
  border-radius: 0.625rem;          /* 10 */
  font-family: var(--font);
  font-weight: 400;
  font-size: 0.875rem;              /* 14 */
  color: var(--black);
}
.field input,
.lf-field input,
.cselect__trigger { height: 3rem; padding: 0 0.875rem; } /* 48 / 14 */
.field textarea,
.lf-field textarea {
  height: 8.75rem;                  /* 140 */
  padding: 0.75rem 0.875rem;        /* 12 / 14 */
  line-height: 1.5;
  resize: none;
}
.field input::placeholder,
.field textarea::placeholder,
.lf-field input::placeholder,
.lf-field textarea::placeholder { color: var(--gray-placeholder); }
.field input:focus,
.field textarea:focus,
.lf-field input:focus,
.lf-field textarea:focus,
.cselect__trigger:focus-visible { outline: none; border-color: var(--orange); }

/* ---- Custom select (brand-themed dropdown) ---- */
.cselect { position: relative; }
.cselect__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
  text-align: left;
}
.cselect__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect__value.is-placeholder { color: var(--gray-placeholder); }
.cselect__chevron { width: 1.125rem; height: 1.125rem; transition: transform 0.2s ease; }
.cselect.is-open .cselect__trigger { border-color: var(--orange); }
.cselect.is-open .cselect__chevron { transform: rotate(180deg); }

.cselect__menu {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 0.375rem;
  list-style: none;
  background: var(--white);
  border: 1px solid #e5e5ea;
  border-radius: 0.625rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  max-height: 16rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.25rem);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
.cselect.is-open .cselect__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.cselect__option {
  padding: 0.625rem 0.75rem;
  border-radius: 0.4375rem;
  font-size: 0.875rem;              /* 14 */
  color: var(--black);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.cselect__option:hover { background: #fff1e8; color: var(--orange); }
.cselect__option.is-selected { background: var(--orange); color: var(--white); }

.form-actions { display: flex; justify-content: flex-end; width: 100%; }

/* ---- Form submit feedback (theme addition, not in the Figma mockup) ---- */
.form-feedback {
  width: 100%;
  font-size: 0.875rem;
  line-height: 1.5;
  display: none;
}
.form-feedback.is-visible { display: block; }
.form-feedback--success { color: #1a7f37; }
.form-feedback--error { color: #cc1f1f; }

/* =========================================================
   RESPONSIVE — stack the design below 1024px.
   (Figma only ships a 1600px desktop frame; this is a sensible
   stacked interpretation, kept on-spec for type/colour/spacing.)
   ========================================================= */
@media (max-width: 1024px) {
  /* stages stop scaling and flow naturally */
  .stage {
    position: static;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    margin: 0;
  }

  .header__inner { padding: 0 1.5rem; }

  /* HERO */
  .hero {
    height: auto;
    min-height: 100vh;              /* full screen on mobile */
    min-height: 100svh;             /* small-viewport unit dodges the URL-bar jump */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8rem 1.5rem 4rem;
  }
  .hero__alpha {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    height: auto;
    aspect-ratio: 910.292 / 698.396; /* the SVG has no intrinsic size - height:auto alone distorts it */
    opacity: 0.22;
  }
  .hero__content {
    position: relative;              /* keep positioned for z-index … */
    left: auto; top: auto;           /* … but drop the desktop offsets */
    z-index: 2;
    display: block;                  /* block flow wraps reliably on mobile */
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .hero__content > * + * { margin-top: 1.5rem; }
  .hero__title { font-size: 2.5rem; }
  .hero__desc { width: 100%; max-width: 100%; overflow-wrap: break-word; }

  /* SERVICES (mobile) — scroll-LINKED crossfade. The section is tall to give
     scroll room; the stage PINS (sticky) and centers its content vertically.
     falealfa.js drives each detail's height directly from scroll position (a tent
     function), so the text opens to 100% then closes as the next opens. Because
     neighbouring tents sum to 1, the open height is ~constant → the centered
     block stays put: no jitter, and no empty gap. Heights are JS-driven, so the
     details must NOT have a CSS transition (it would fight the scroll). */
  .services { height: 360vh; padding: 0; overflow: visible; }
  .stage--services {
    position: sticky;
    top: 0;
    height: 100vh !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 1.5rem;
    overflow: hidden;
  }
  .services__list {
    position: static;
    width: auto;
    font-size: 1.5rem;              /* 24 — 8 long names + one open detail must fit the pinned 100vh stage */
    letter-spacing: -0.03rem;
    line-height: 1.1;
    white-space: normal;
    /* No transition: the column glide is scroll-driven per frame (JS) */
  }
  .services__panel { display: none; }   /* single hover-panel is desktop-only */
  .services__list .service { width: max-content; max-width: 100%; margin: 0.375rem 0; }
  .services__list .service:first-child { margin-top: 0; }
  .service-detail {
    display: block;
    position: relative;             /* bottom-anchored inner (see below) */
    height: 0;
    opacity: 0;
    overflow: hidden;
    /* No transition: heights are scroll-driven per frame (JS) - a CSS
       transition here fights the scroll and makes it feel snappy/laggy */
  }
  .service-detail__inner {
    position: absolute;             /* pinned to the BOTTOM of the reveal box:
                                       the button shows first and stays visible
                                       through the whole crossfade */
    bottom: 0; left: 0; right: 0;
    padding: 0.5rem 0 0.75rem;
    border-top: 1px solid var(--orange);
  }
  .service-detail .services__desc { position: static; width: 100%; text-align: left; font-size: 0.875rem; line-height: 1.5; }
  .service-detail .services__btn { position: static; display: inline-flex; margin-top: 1rem; }

  /* TESTIMONIAL */
  .testimonial { height: auto; padding: 5rem 1.5rem; }
  .testimonial__alpha { position: static; margin-bottom: 2rem; }
  .testimonial__quote { display: none; }
  .testimonial__text { position: static; width: 100%; font-size: 1.875rem; margin-bottom: 2.5rem; }
  .testimonial__footer { position: static; width: 100%; flex-wrap: wrap; gap: 1.5rem; }
  .testimonial__info { white-space: normal; flex-wrap: wrap; gap: 0.25rem 1rem; }

  /* CLIENTS */
  .clients { height: auto; padding: 5rem 1.5rem; }
  .stage--clients { padding: 0; }
  .clients__title { position: static; margin: 0 0 3rem; }
  .clients__grid {
    position: static;
    margin: 0 auto;
    width: 100%;
    max-width: 34rem;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 2.5rem 1.5rem;
    justify-items: center;
  }
  .client { width: 100%; max-width: 12.5rem; height: auto; aspect-ratio: 5 / 3; }

  /* CONTACT — form fills the full width on mobile */
  .contact { height: auto; padding: 5rem 1.5rem; }  /* same rhythm as testimonial/clients */
  .stage--contact { display: block; }
  .contact__inner { width: 100%; max-width: 100%; align-items: stretch; }
  .contact__form { flex-direction: column; gap: 1.5rem; }
  .form-card { width: 100%; }
}

@media (max-width: 640px) {
  .hero__title { font-size: 2.25rem; }
  .services__list { font-size: 2.25rem; }      /* 36 */
  .testimonial__text { font-size: 1.5rem; }
  .clients__grid { grid-template-columns: repeat(2, 1fr); max-width: 24rem; }
  .contact__head { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .contact__title { white-space: normal; }
  .nav__link { font-size: 2rem; }
}

/* =========================================================
   Reduced-motion: stop the hero rotation
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero__earth { animation: none; }
}

/* ---- Language switcher (fixed, sits left of the hamburger) ---- */
.lang-switcher {
  position: fixed;                  /* same behavior as .menu-toggle */
  top: 1.5rem;
  right: 4.25rem;                   /* toggle right (1.5) + width (1.75) + 1rem gap */
  z-index: 120;                     /* above the nav overlay, like the toggle */
  display: flex;
  align-items: center;
  height: var(--ctrl-h);            /* same centre line as the hamburger */
  gap: 0.625rem;
}
.lang-switcher__item {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s ease;
}
.lang-switcher__item.is-current { color: #fff; }
a.lang-switcher__item:hover { color: #fff; }
.lang-switcher--dark .lang-switcher__item { color: rgba(17, 17, 17, 0.45); }
.lang-switcher--dark .lang-switcher__item.is-current,
.lang-switcher--dark a.lang-switcher__item:hover { color: #111; }
@media (max-width: 1023px) {
  .lang-switcher { right: 4rem; }
}

/* The admin bar is fixed over the top of the page for logged-in users, and
   these two controls are fixed as well, so they landed underneath it. Only
   ever affects the team, never a visitor. */
body.admin-bar .menu-toggle,
body.admin-bar .lang-switcher { top: calc(1.5rem + 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .menu-toggle,
  body.admin-bar .lang-switcher { top: calc(1.5rem + 46px); }   /* the bar grows on small screens */
}

/* ---- Last Form (contact section) ----
   The Last Form template reuses the theme's .form-card/.field markup, so
   most styling comes from the rules above; these map the .lf-* wrapper,
   select control, submit button and feedback onto the section design. */
.contact .lf-form {
  width: 100%;
  flex-direction: row;              /* LF base is a column; the design is two cards side by side */
  flex-wrap: wrap;                  /* feedback message drops to its own row */
  align-items: flex-start;
  justify-content: center;
  gap: 2.5rem;                      /* 40 — same as .contact__form */
}
.contact .lf-form > .form-card { flex: 1 1 0; min-width: 20rem; }
.contact .lf-form__message { flex-basis: 100%; order: 10; text-align: center; }
.field select,
.lf-field select {
  width: 100%;
  height: 3rem;
  padding: 0 0.875rem;
  background: var(--white);
  border: 1px solid var(--white);
  border-radius: 0.625rem;
  font-family: var(--font);
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--black);
  appearance: none;
  -webkit-appearance: none;
}
.field select:focus,
.lf-field select:focus { outline: none; border-color: var(--orange); }
.contact .lf-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background: var(--orange);
  color: var(--white);
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: 0.0875rem;
  text-transform: uppercase;
  white-space: nowrap;
  border: none;
  border-radius: var(--btn-radius);
  cursor: pointer;
}
.contact .lf-form__message {
  width: 100%;
  font-size: 0.875rem;
  font-weight: 600;
}
.contact .lf-form__message--success { color: #1a7f37; }
.contact .lf-form__message--error { color: #cc1f1f; }
.field .lf-field__error,
.lf-field .lf-field__error { font-size: 0.8125rem; color: #cc1f1f; }
/* O plugin marca o campo obrigatorio com um asterisco proprio. Ele nao
   substitui o rotulo, entao fica escondido do leitor de tela (aria-hidden
   ja vem do plugin) e discreto na tela. */
/* Herda a cor do rotulo de proposito. Em laranja o asterisco ficava em 2.39:1
   sobre a faixa clara - a mesma reprovacao de contraste que o laranja da marca
   ja tem, e essa aqui seria introduzida por mim. */
.lf-field__req { color: inherit; font-weight: 700; }
/* SVG chevron injected by the select enhancer (falealfa.js) */
svg.cselect__chevron { stroke: var(--black); }
@media (max-width: 1024px) {
  .contact .lf-form { flex-direction: column; gap: 1.5rem; }
}

/* ---- Footer (ported from the static traducoes page, Figma 173:94) ---- */
.tfooter {
  width: 100%;
  padding: 3.75rem 5rem;            /* 60 / 80 */
  display: flex;
  flex-direction: column;
  /* Was 60. The rule between the columns and the copyright had 60 above it and
     60 below, so a single line of copyright sat in 120px of empty footer. */
  gap: 2.25rem;
  background: #111;
}
.tfooter__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 2.5rem; }
.tfooter__brand { width: 18.75rem; display: flex; flex-direction: column; gap: 1rem; }
.tfooter__logo { display: flex; align-items: center; gap: 0.75rem; }
.tfooter__logo img { width: 2.5rem; height: 2.5rem; }
.tfooter__logo span {
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.04rem;
  color: var(--white);
  white-space: nowrap;
}
.tfooter__brand p { font-size: 0.875rem; color: #999; }
.tfooter__col { width: 15rem; display: flex; flex-direction: column; gap: 1.25rem; }
.tfooter__col--contact { width: 17.5rem; }
.tfooter__col h2 { margin: 0; font-weight: 700; font-size: 1.125rem; color: var(--white); }
.tfooter__col ul {
  margin: 0; padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: #999;
}
/* :not(.btn) because this is the rule for the footer's TEXT links. Being
   0-2-0 it outranked .btn and replaced the whole transition shorthand, so the
   WhatsApp pill in this column lost its transform timing and snapped to the
   hover position instead of gliding. A generic link rule must not reach into a
   button. */
.tfooter__col a:not(.btn) { color: #999; transition: color 0.2s ease; }
.tfooter__col a:not(.btn):hover { color: var(--orange); }
.tfooter__divider { width: 100%; height: 0; margin: 0; border: 0; border-top: 1px solid #333; }
.tfooter__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.tfooter__bottom .copyright { margin: 0; font-size: 0.875rem; color: #999; }
.tfooter__bottom .copyright a { color: #ccc; text-decoration: underline; }
.tfooter__bottom .copyright a:hover { color: var(--orange); }
/* Lives in the contact column now, under the phone: these are ways to reach
   the company, not legal boilerplate for the bottom bar. */
.tfooter__social { display: flex; gap: 0.75rem; margin-top: 0.25rem; }
.tfooter__social a {
  width: 2.25rem; height: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #3a3a3a;
  border-radius: 1.125rem;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.tfooter__social a:hover { border-color: var(--orange); background: var(--orange); }
/* The marks carry their own dark fill and an <img> cannot inherit currentColor,
   so they read as grey on grey against the footer. brightness(0) crushes any
   fill to black and invert(1) lifts it to white, which holds whatever colour
   each file happens to ship with. */
.tfooter__social img { width: 1.125rem; height: 1.125rem; filter: brightness(0) invert(1); }
@media (max-width: 1024px) {
  .tfooter { padding: 3rem 1.5rem; gap: 2.5rem; }
  .tfooter__top { flex-wrap: wrap; gap: 2rem; }
  .tfooter__brand, .tfooter__col, .tfooter__col--contact { width: 100%; }
  .tfooter__bottom { flex-wrap: wrap; }
}

/* ---- Single service page ----
   Built from the same tokens as the briefing sections, so it alternates tones
   the way the home does. The hero band is what gives the fixed header
   something to sit on: the old template put the title straight under it. */
.service-entry { width: 100%; max-width: 100vw; }

.fa-sec.svc-hero {
  display: flex;
  /* Top-aligned, not bottom. Anchoring to the base put the eyebrow at a
     different height on every page, because the band holds different amounts:
     the listing has a title and a line, the article adds meta. Aligned to the
     top, the distance from the header to the eyebrow is identical everywhere
     and the band simply grows downward. */
  align-items: flex-start;
  min-height: 22rem;
  padding: 11rem 0 5rem;             /* clears the 5rem fixed header with real air */
  overflow: hidden;
}
.svc-hero__media { position: absolute; inset: 0; z-index: 0; }
.svc-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.32; }
.svc-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.85));
}
/* Watermark when the service has no featured image: the brand mark carries
   the band instead of leaving it empty.

   hero-alpha.svg carries preserveAspectRatio="none" with width/height 100%,
   so it actively stretches to whatever box it is given - height:auto cannot
   save it. The ratio has to come from the box, same as .hero__alpha on the
   home. Numbers are the SVG's own viewBox. */
.svc-hero__mark {
  position: absolute;
  right: -8rem;
  top: 50%;
  transform: translateY(-50%);
  width: 38rem;
  height: auto;
  aspect-ratio: 910.292 / 698.396;
  opacity: 0.09;
  z-index: 0;
  pointer-events: none;
}
.svc-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  max-width: 54rem;
}
.svc-hero__eyebrow {
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.0875rem;
  text-transform: uppercase;
  color: var(--sec-accent);
}
/* No underline. The eyebrow is a link on some pages and plain text on others,
   and underlining only the link made the same element read as two different
   things across the blog. Hover carries the affordance. */
.svc-hero__eyebrow a { color: inherit; transition: opacity 0.2s ease; }
.svc-hero__eyebrow a:hover { opacity: 0.65; }
.svc-hero__title {
  margin: 0;
  font-weight: 700;
  font-size: 3.5rem;                 /* 56 */
  line-height: 1.05;
  letter-spacing: -0.18rem;
  color: var(--sec-title);
}
.svc-hero__lead { font-size: 1.25rem; line-height: 1.6; color: var(--sec-text); }
.svc-hero__cta { margin-top: 0.5rem; }

.svc-body__inner {
  max-width: 46rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--sec-text);
}
.svc-body__inner > * + * { margin-top: 1.25rem; }
.svc-body__inner h2,
.svc-body__inner h3 {
  margin: 2.5rem 0 0;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.05rem;
  color: var(--sec-title);
}
.svc-body__inner h2 { font-size: 1.75rem; }
.svc-body__inner h3 { font-size: 1.375rem; }
.svc-body__inner a { color: var(--sec-accent); text-decoration: underline; }
.svc-body__inner strong { color: var(--sec-title); }
.svc-body__inner ul,
.svc-body__inner ol { padding-left: 1.25rem; }
.svc-body__inner li + li { margin-top: 0.5rem; }
.svc-body__inner img { max-width: 100%; height: auto; border-radius: 0.75rem; }
.svc-body__inner blockquote {
  margin: 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--sec-accent);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--sec-title);
}

.svc-more__title {
  margin: 0;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.08rem;
  color: var(--sec-title);
}
.svc-more .fa-block__cards { margin-top: 2.5rem; }

.svc-cta__inner { display: flex; flex-wrap: wrap; gap: 3.75rem; align-items: flex-start; }
.svc-cta__copy {
  flex: 1 1 22rem;
  min-width: 0;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.svc-cta__title {
  margin: 0;
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: -0.1rem;
  color: var(--sec-title);
}
.svc-cta__text { font-size: 1.0625rem; line-height: 1.6; color: var(--sec-text); }
.svc-cta__wa { margin-top: 0.5rem; }
/* The copy is six lines and the form is ten fields. Aligned to the top it left
   two thirds of its column empty; on the centre line the band reads as one
   composition instead of a heading with a wall of inputs next to it. */
@media (min-width: 1025px) {
  .svc-cta__inner { align-items: center; }
}
.svc-cta__form { flex: 1 1 34rem; min-width: 0; }
/* Last Form on the closing band. The .contact rules are scoped to the home
   section, so the submit needs its own here - and on the orange tone the
   brand-orange pill would vanish, hence the tone tokens. */
.svc-cta .field label,
.svc-cta .lf-field__label { color: var(--sec-title); }
/* Last Form's own grid rules reach the form's direct children. Our template
   wraps the fields in a .form-card, one level down, so nothing laid them out:
   the card shrank to fit (296px of a 748px column) and nine fields stacked
   into a 1060px tower on the orange band. Same flex model as the plugin's,
   applied to the card, so the per-field width control in the Last Form
   builder keeps working and the client can rearrange it without us. */
.svc-cta .lf-form { display: flex; flex-direction: column; align-items: stretch; gap: 1.25rem; }
.svc-cta .lf-form > .form-card {
  display: flex;
  /* .form-card is a column everywhere else in the theme; here it is the row
     that wraps, or the 50% widths resolve against the height and the fields
     flow sideways out of the card. */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.25rem 1.5rem;
}
.svc-cta .form-card > * { flex: 1 1 100%; min-width: 0; }
.svc-cta .form-card > .lf-col--50 { flex: 1 1 calc(50% - 0.75rem); }
.svc-cta .form-card > .lf-col--33 { flex: 1 1 calc(33.333% - 1rem); }
.svc-cta .form-card > .lf-col--25 { flex: 1 1 calc(25% - 1.125rem); }
@media (max-width: 640px) {
  .svc-cta .form-card > .lf-col--50,
  .svc-cta .form-card > .lf-col--33,
  .svc-cta .form-card > .lf-col--25 { flex: 1 1 100%; }
}
/* A file input is not a text field: the theme's 3rem control height left the
   button floating in a box, so it sits on its own line height. */
.svc-cta .lf-field input[type="file"] { height: auto; padding: 0.75rem 0.875rem; }
.svc-cta .lf-field__help { font-size: 0.8125rem; line-height: 1.5; color: var(--sec-text); }
.svc-cta .lf-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 0.75rem 1.5rem;
  background: var(--sec-btn-bg);
  color: var(--sec-btn-fg);
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: 0.0875rem;
  text-transform: uppercase;
  white-space: nowrap;
  border: none;
  border-radius: var(--btn-radius);
  cursor: pointer;
}
.svc-cta .lf-form__message { font-size: 0.875rem; font-weight: 600; color: var(--sec-title); }

@media (max-width: 1024px) {
  .fa-sec.svc-hero { min-height: 0; padding: 9rem 0 4rem; }
  .svc-hero__title { font-size: 2.5rem; letter-spacing: -0.1rem; }
  .svc-hero__lead { font-size: 1.0625rem; }
  /* Cap against the viewport too: on a narrow window a fixed rem width made
     the mark swallow the whole band. */
  .svc-hero__mark { right: -20%; width: min(28rem, 90vw); }
  .svc-cta__title { font-size: 2rem; }
  .svc-cta__inner { gap: 2.5rem; }
}

/* ---- Cookie consent: floating card, bottom-left ---- */
.cookie-banner {
  position: fixed;
  left: 1.5rem;
  bottom: 1.5rem;
  z-index: 200;                     /* above nav overlay and lang switcher */
  max-width: 24rem;
  padding: 1.5rem;
  background: #111;
  border: 1px solid #333;
  border-radius: 1rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  animation: cookieIn 0.35s ease both;
}
.cookie-banner p {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #ccc;
}
.cookie-banner p a { color: var(--orange); text-decoration: underline; }
.cookie-buttons { display: flex; gap: 0.75rem; }
.cookie-banner .btn-decline {
  background: transparent;
  border: 1px solid #333;
  color: #999;
  /* Keeps transform in the list: this rule is 0-2-0 and replaces the shorthand
     .btn sets, so leaving it out made Decline snap to the hover position while
     Accept beside it glided. */
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.cookie-banner .btn-decline:hover { border-color: #666; color: #fff; }
@keyframes cookieIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  .cookie-banner { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; }
  .cookie-buttons .btn { flex: 1 1 0; }
}

/* Hero video background fills the frame like the image cover */
video.hero__earth { width: 100%; height: 100%; object-fit: cover; }


/* =========================================================
   BRIEFING 06/08/2026 — sections added after the Figma frames.
   The Figma only ships 1600px desktop frames, so everything below
   is FLUID (no scaled .stage), same approach the footer already uses.

   TONES: the home alternates three fills (black, white 90%, orange
   80%) and these sections join that rhythm. A tone only swaps the
   --sec-* custom properties below; every component rule reads those,
   so no rule ever branches on the tone. Picked per section in
   wp-admin (see inc/sections.php), never hardcoded per template.
   ========================================================= */

.fa-sec {
  --sec-bg:          var(--black);
  --sec-title:       var(--white);
  --sec-text:        rgba(255, 255, 255, 0.78);
  --sec-muted:       rgba(255, 255, 255, 0.6);
  --sec-accent:      var(--orange);
  --sec-card-bg:     #111;
  --sec-card-border: #262626;
  --sec-rule:        #262626;
  --sec-btn-bg:      var(--orange);
  --sec-btn-fg:      var(--white);
  --sec-hl-bg:       linear-gradient(90deg, rgba(255, 98, 0, 0.16), rgba(255, 98, 0, 0.04));
  --sec-hl-border:   rgba(255, 98, 0, 0.5);
}

/* Measured, not eyeballed: the light fill composites to #e6e6e6, and brand
   orange on it is only 2.40:1 — it fails AA even at large sizes. The accent
   therefore DARKENS on light (#a33e00 = 5.18:1, passes for small text too)
   while staying recognisably the brand orange. Same idea for muted text:
   #6b7280 is 3.87:1 and would fail, so light reuses the body colour. */
.fa-sec--light {
  --sec-bg:          var(--bg-light);
  --sec-title:       var(--black);
  --sec-text:        var(--gray-desc);           /* #4b5563 — 6.06:1 */
  --sec-muted:       var(--gray-desc);
  --sec-accent:      #a33e00;
  --sec-card-bg:     var(--white);
  --sec-card-border: #e2e4ea;
  --sec-rule:        #d7dae1;
  --sec-hl-bg:       linear-gradient(90deg, rgba(255, 98, 0, 0.12), rgba(255, 98, 0, 0.03));
  --sec-hl-border:   rgba(255, 98, 0, 0.55);
}

/* On the orange fill the brand orange disappears, so the accent and the
   button flip: white text for emphasis, black pill for the CTA. Same
   context-dependent token idea the clients section already relies on.
   Text is FULL white, not 92%: at 92% it drops to 3.56:1 and fails.

   The fill is the brand orange at 0.72 rather than the clients section's
   0.80. That section only carries a 48px title, where AA asks 3:1, so 0.80
   (4.50:1) is fine there; these sections carry body copy at 4.5:1, and 0.80
   lands exactly on the line. 0.72 gives 5.36:1 and real headroom.
   --bg-clients itself is untouched, so the existing home does not shift. */
.fa-sec--orange {
  --sec-bg:          rgba(255, 98, 0, 0.72);
  --sec-title:       var(--white);
  --sec-text:        var(--white);
  --sec-muted:       var(--white);
  --sec-accent:      var(--white);
  --sec-card-bg:     rgba(0, 0, 0, 0.14);
  --sec-card-border: rgba(255, 255, 255, 0.34);
  --sec-rule:        rgba(255, 255, 255, 0.34);
  --sec-btn-bg:      var(--black);
  --sec-btn-fg:      var(--white);
  --sec-hl-bg:       rgba(0, 0, 0, 0.16);
  --sec-hl-border:   rgba(255, 255, 255, 0.5);
}

.fa-wrap {
  width: 100%;
  max-width: var(--design-w);        /* 1600 */
  margin: 0 auto;
  padding: 0 5rem;                   /* 80 — matches the footer gutter */
}

.fa-sec {
  position: relative;
  width: 100%;
  padding: 5rem 0;
  background: var(--sec-bg);
  color: var(--sec-title);
}

/* .btn is 0-1-0; matching the section makes this 0-2-0 so the pill follows
   the tone instead of always painting brand orange. */
.fa-sec .btn {
  background: var(--sec-btn-bg);
  color: var(--sec-btn-fg);
}

.fa-cases__title,
.fa-quotes__title,
.fa-faq__title,
.fa-block__title,
.fa-method__title {
  margin: 0;
  font-weight: 700;
  font-size: 3rem;                   /* 48 — same as the Figma section titles */
  line-height: 1.05;
  letter-spacing: -0.15rem;
  color: var(--sec-title);
}

/* ---------- Stats bar ---------- */
.fa-stats { padding: 4.5rem 0; border-bottom: 1px solid var(--sec-rule); }
.fa-stats__inner { display: flex; flex-direction: column; align-items: center; gap: 2rem; text-align: center; }
.fa-stats__title {
  margin: 0;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sec-muted);
}
/* The same claim as the numbers, written as one quotable sentence. Held to a
   readable measure and set below the eyebrow, so it reads as the section's
   opening line rather than as a caption under the digits. */
.fa-stats__lead {
  max-width: 52ch;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--sec-text);
}
/* A definition list: each number is the term, its wording the definition.
   Dividers are drawn between items, never after the last one. */
.fa-stats__list {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 1.5rem 0;
}
.fa-stat {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0 2.5rem;
}
.fa-stat + .fa-stat { border-left: 1px solid var(--sec-rule); }
.fa-stat dd { margin: 0; }
.fa-stats__presence {
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--sec-text);
}
.fa-stat__value {
  /* Tabular figures: every digit the same width, so counting up changes the
     number without shifting the line. */
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 2.5rem;                 /* 40 */
  line-height: 1;
  letter-spacing: -0.08rem;
  color: var(--sec-accent);
}
.fa-stat__label { font-size: 1rem; line-height: 1.4; color: var(--sec-text); }

/* ---------- Audience split (two large buttons) ---------- */
.fa-audience__label {
  margin: 0 0 1.5rem;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--sec-text);
}
.fa-audience__links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.fa-audience__link {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2.5rem 2rem;
  background: var(--sec-card-bg);
  border: 1px solid var(--sec-card-border);
  border-radius: 1rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.fa-audience__link:hover { border-color: var(--sec-accent); transform: translateY(-2px); }
.fa-audience__link-label {
  font-weight: 700;
  font-size: 2rem;                   /* 32 */
  line-height: 1.1;
  letter-spacing: -0.06rem;
  color: var(--sec-title);
}
.fa-audience__link-desc { font-size: 1rem; line-height: 1.5; color: var(--sec-text); }

/* ---------- Manifesto video card ---------- */
.fa-video__inner { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3.75rem; align-items: center; }
.fa-video__card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: var(--sec-card-bg);
  border: none;
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.fa-video__cover { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease, opacity 0.3s ease; }
.fa-video__card:hover .fa-video__cover { transform: scale(1.03); opacity: 0.85; }
.fa-video__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 5.5rem; height: 5.5rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--sec-btn-bg);
  color: var(--sec-btn-fg);
  border-radius: 50%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease;
}
.fa-video__card:hover .fa-video__play { transform: translate(-50%, -50%) scale(1.06); }
.fa-video__play svg { width: 2.5rem; height: 2.5rem; }
.fa-video__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.fa-video__eyebrow {
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.0875rem;
  text-transform: uppercase;
  color: var(--sec-accent);
}
.fa-video__title {
  margin: 0;
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: -0.1rem;
  color: var(--sec-title);
}
.fa-video__text { font-size: 1.0625rem; line-height: 1.6; color: var(--sec-text); }

/* ---------- Video modal ---------- */
.fa-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
.fa-modal[hidden] { display: none; }
.fa-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.88); }
.fa-modal__dialog {
  position: relative;
  isolation: isolate;
  width: min(64rem, calc(100vw - 3rem));
  background: #000;
  border-radius: 0.75rem;
  overflow: hidden;
}
/* Inside the dialog, not floating above it: at -2.75rem the button sat off
   the top of the viewport on shorter screens and the modal had no visible way
   out. Over the player it needs its own plate to stay legible on any frame. */
.fa-modal__close {
  position: absolute;
  top: 0.75rem; right: 0.75rem;
  z-index: 2;
  width: 2.5rem; height: 2.5rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--white);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.fa-modal__close:hover { background: var(--orange); border-color: var(--orange); }
.fa-modal__player { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.fa-modal__player video,
.fa-modal__player iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Cases ---------- */
.fa-cases__list { margin-top: 3.75rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.fa-case {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2.5rem 2rem;
  background: var(--sec-card-bg);
  border: 1px solid var(--sec-card-border);
  border-radius: 1rem;
}
/* The client's mark is the first thing the card says, so it gets the full width
   of the card as its own band rather than sitting small in a corner - that is
   how the reference the briefing points at reads.

   The negative margins cancel the card padding so the band runs edge to edge.
   object-fit works now because every mark carries a real viewBox: the three
   generated here shipped with preserveAspectRatio="none", which stretches an
   SVG to any box and defeats object-fit entirely, and they were rewritten to
   xMidYMid meet to match the client logos. */
.fa-case__logo {
  margin: -2.5rem -2rem 0;
  padding: 2.25rem 2rem;
  border-bottom: 1px solid var(--sec-card-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fa-case__logo img {
  width: 100%;
  height: 4.5rem;                 /* 72 - generous, and the same on every card */
  object-fit: contain;
  object-position: center;
}
/* No mark yet: hold the same height so the cards stay aligned. */
.fa-case__logo--empty { min-height: 4.5rem; }
/* White monochrome marks drawn for the orange band have to become ink on a
   light card. brightness(0), not invert(1): invert flips hue as well as
   value, which turned the orange alpha bright blue. */
.fa-sec--light .fa-case__logo img { filter: brightness(0); }
.fa-case__client { font-weight: 700; font-size: 1.25rem; color: var(--sec-title); }
.fa-case__headline {
  margin: 0;
  font-weight: 700;
  font-size: 1.75rem;                /* 28 */
  line-height: 1.2;
  letter-spacing: -0.05rem;
  color: var(--sec-accent);
}
/* The body always lives in the HTML (GEO: each case must be quotable without
   running the toggle); the collapsed state only clips it visually. */
.fa-case__body {
  max-height: 7.5rem;
  overflow: hidden;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--sec-text);
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  transition: max-height 0.35s ease;
}
.fa-case__body p + p { margin-top: 0.75rem; }
.fa-case__body.is-open {
  max-height: 60rem;
  -webkit-mask-image: none;
  mask-image: none;
}
.fa-case__quote { margin: 0; padding-left: 1rem; border-left: 3px solid var(--sec-accent); }
.fa-case__quote blockquote { margin: 0; font-size: 0.9375rem; line-height: 1.5; font-style: italic; color: var(--sec-text); }
.fa-case__quote figcaption { margin-top: 0.5rem; font-size: 0.8125rem; font-weight: 700; color: var(--sec-muted); }
/* Photo + name + role, the format the briefing reserves inside each case.
   Same portrait treatment as the corporate quote cards, one size down: inside
   a case the person supports the metric rather than carrying the card. */
.fa-case__author { display: flex; align-items: center; gap: 0.75rem; }
.fa-case__photo {
  width: 2.5rem; height: 2.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}
.fa-case__photo--initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--sec-btn-bg);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--sec-btn-fg);
}
.fa-case__author-meta { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.fa-case__author-name { font-weight: 700; color: var(--sec-title); }
.fa-case__author-role { font-weight: 400; color: var(--sec-muted); }
.fa-case__actions { margin-top: auto; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.fa-case__toggle {
  padding: 0;
  background: none;
  border: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.0875rem;
  text-transform: uppercase;
  color: var(--sec-accent);
  border-bottom: 1px solid currentColor;
}
.fa-case__link { font-size: 0.875rem; color: var(--sec-muted); text-decoration: underline; }
.fa-case__link:hover { color: var(--sec-title); }

/* ---------- Corporate quotes ---------- */
.fa-quotes__grid { margin-top: 3.75rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.fa-quote {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.5rem 2rem;
  background: var(--sec-card-bg);
  border: 1px solid var(--sec-card-border);
  border-radius: 1rem;
}
.fa-quote__text {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--sec-text);
}
.fa-quote__text::before { content: "\201C"; color: var(--sec-accent); }
.fa-quote__text::after  { content: "\201D"; color: var(--sec-accent); }
.fa-quote__person { display: flex; align-items: center; gap: 1rem; }
.fa-quote__photo {
  width: 3rem; height: 3rem;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}
.fa-quote__photo--initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--sec-btn-bg);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--sec-btn-fg);
}
.fa-quote__meta { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.fa-quote__name { font-weight: 700; font-size: 1rem; color: var(--sec-title); }
.fa-quote__role { font-size: 0.875rem; line-height: 1.4; color: var(--sec-muted); }

/* ---------- Method ---------- */
.fa-method__inner { display: grid; grid-template-columns: 1fr 1.35fr; gap: 3.75rem; align-items: start; }
.fa-method__eyebrow {
  margin-bottom: 0.75rem;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.0875rem;
  text-transform: uppercase;
  color: var(--sec-accent);
}
.fa-method__body { font-size: 1.0625rem; line-height: 1.7; color: var(--sec-text); }
.fa-method__body p + p { margin-top: 1.25rem; }

/* ---------- Audience block (Voce / Sua Empresa) ---------- */
.fa-block__head { max-width: 46rem; display: flex; flex-direction: column; gap: 1.25rem; }
.fa-block__intro { font-size: 1.0625rem; line-height: 1.6; color: var(--sec-text); }
.fa-block__intro p + p { margin-top: 1rem; }
.fa-block__cards { margin-top: 3rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.fa-card {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 2rem;
  background: var(--sec-card-bg);
  border: 1px solid var(--sec-card-border);
  border-radius: 1rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.fa-card:hover { border-color: var(--sec-accent); transform: translateY(-2px); }
.fa-card__title { margin: 0; font-weight: 700; font-size: 1.375rem; line-height: 1.25; color: var(--sec-title); }
.fa-card__desc { font-size: 0.9375rem; line-height: 1.6; color: var(--sec-text); }
.fa-card__more {
  margin-top: auto;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.0875rem;
  text-transform: uppercase;
  color: var(--sec-accent);
}
.fa-highlight {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.75rem 2rem;
  background: var(--sec-hl-bg);
  border: 1px solid var(--sec-hl-border);
  border-radius: 1rem;
  transition: border-color 0.2s ease;
}
.fa-highlight:hover { border-color: var(--sec-accent); }
.fa-highlight__label { font-weight: 700; font-size: 1.375rem; color: var(--sec-title); }
.fa-highlight__text { font-size: 0.9375rem; color: var(--sec-text); }
.fa-block__actions { margin-top: 2.5rem; }

/* ---------- Level test band ----------
   The test used to be a .fa-highlight strip inside the "Voce" block, with the
   WhatsApp CTA right under it. It reads as a product now: its own band, the
   section title size the other sections use, and the two stages spelled out
   beside the copy so the button is obviously free to press.

   Everything paints from the --sec-* tokens, so the band follows whichever
   background the editor picks without a second rule per tone. */
.fa-leveltest__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.75rem;
  align-items: center;
}
.fa-leveltest__copy { display: flex; flex-direction: column; align-items: flex-start; }
.fa-leveltest__eyebrow {
  margin: 0 0 0.75rem;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.0875rem;
  text-transform: uppercase;
  color: var(--sec-accent);
}
.fa-leveltest__title {
  margin: 0;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.05;
  letter-spacing: -0.15rem;
  color: var(--sec-title);
}
.fa-leveltest__text {
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--sec-text);
}
.fa-leveltest__text p + p { margin-top: 1rem; }
.fa-leveltest__cta { margin-top: 2rem; }
.fa-leveltest__note {
  margin: 1rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--sec-muted);
}

.fa-leveltest__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Counter-free: the number is a real element because it is also the
     card's visual anchor, and ::marker cannot be laid out beside the body. */
}
.fa-leveltest__step {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.75rem 2rem;
  background: var(--sec-card-bg);
  border: 1px solid var(--sec-card-border);
  border-radius: 1rem;
}
.fa-leveltest__step-number {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--sec-btn-fg);
  background: var(--sec-btn-bg);
  border-radius: 50%;
}
.fa-leveltest__step-body { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.fa-leveltest__step-title { font-weight: 700; font-size: 1.125rem; color: var(--sec-title); }
.fa-leveltest__step-text { font-size: 0.9375rem; line-height: 1.6; color: var(--sec-text); }

@media (max-width: 1024px) {
  .fa-leveltest__inner { grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
  .fa-leveltest__title { font-size: 2.25rem; letter-spacing: -0.08rem; }
}

@media (max-width: 640px) {
  .fa-leveltest__step { padding: 1.25rem 1.25rem; gap: 1rem; }
  .fa-leveltest__cta { align-self: stretch; text-align: center; }
}

/* ---------- FAQ ---------- */
.fa-faq__list { margin-top: 3rem; border-top: 1px solid var(--sec-rule); }
.fa-faq__item { border-bottom: 1px solid var(--sec-rule); }
.fa-faq__question { margin: 0; }
.fa-faq__trigger {
  width: 100%;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: none;
  border: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.35;
  text-align: left;
  color: var(--sec-title);
}
.fa-faq__trigger:hover { color: var(--sec-accent); }
.fa-faq__icon { position: relative; width: 1rem; height: 1rem; flex-shrink: 0; }
.fa-faq__icon::before,
.fa-faq__icon::after {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 100%; height: 2px;
  background: var(--sec-accent);
  transition: transform 0.25s ease;
}
.fa-faq__icon::after { transform: rotate(90deg); }
.fa-faq__trigger[aria-expanded="true"] .fa-faq__icon::after { transform: rotate(0deg); }
/* Collapsed visually only — the answer text stays in the HTML for GEO. */
.fa-faq__answer {
  max-height: 0;
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--sec-text);
  transition: max-height 0.3s ease;
}
.fa-faq__answer.is-open { max-height: 40rem; }
.fa-faq__answer p { padding-bottom: 1.5rem; }

/* ---------- Floating WhatsApp ---------- */
.fa-wa {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 190;                      /* under the cookie card (200), above the nav overlay */
  width: 3.5rem; height: 3.5rem;
  display: flex; align-items: center; justify-content: center;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease;
}
.fa-wa:hover { transform: scale(1.06); }
.fa-wa__icon { width: 2rem; height: 2rem; }

/* ---------- Nav menu rendered by wp_nav_menu ---------- */
.nav__list a {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: -0.05rem;
  color: var(--white);
  transition: color 0.2s ease;
}
.nav__list a:hover { color: var(--orange); }

/* ---------- Language switcher: more prominent (briefing section 0) ---------- */
.lang-switcher--prominent {
  gap: 0;
  padding: 0.25rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  /* Stated, not derived from the font: an auto height here is what made the
     pill and the hamburger drift apart. */
  height: var(--ctrl-h);
}
.lang-switcher--prominent .lang-switcher__item {
  display: flex;
  align-items: center;
}
.lang-switcher--prominent .lang-switcher__item {
  padding: 0.3125rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
}
.lang-switcher--prominent .lang-switcher__item.is-current {
  background: var(--orange);
  color: var(--white);
}
.lang-switcher--prominent.lang-switcher--dark {
  background: rgba(17, 17, 17, 0.08);
  border-color: rgba(17, 17, 17, 0.18);
}
.lang-switcher--prominent.lang-switcher--dark .lang-switcher__item { color: rgba(17, 17, 17, 0.6); }
.lang-switcher--prominent.lang-switcher--dark .lang-switcher__item.is-current { color: var(--white); }

/* ---- Plate under the floating controls ----
   .header is absolute and scrolls away; the switcher and the hamburger are
   fixed and stay. Past the header's own height they are therefore sitting on
   whatever content is passing under them - on the blog they landed inside the
   search field, over the orange magnifier. A translucent 8-10% pill was enough
   while they sat on the hero and nothing else; it is not enough over content.
   Only applied once the header has left, so the design at the top of every
   page is untouched. */
.lang-switcher--prominent.is-floating {
  background: rgba(17, 17, 17, 0.92);
  border-color: rgba(255, 255, 255, 0.2);
}
.lang-switcher--prominent.lang-switcher--dark.is-floating {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(17, 17, 17, 0.14);
}
/* A pseudo-element rather than a background on the button: the plate has to be
   wider than the 24px bars to read as a control, and growing the button itself
   would shift it away from the switcher it is aligned with. */
.menu-toggle.is-floating::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 2.75rem;
  height: 2.75rem;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.92);
}
.menu-toggle--dark.is-floating::before {
  border-color: rgba(17, 17, 17, 0.14);
  background: rgba(255, 255, 255, 0.94);
}

/* ---- First section on a page must clear the header ----
   .header is absolutely positioned and 5rem tall, so it overlaps whatever
   comes first. The home gets away with it because its hero positions content
   low inside the 900px stage, but any page that opens with a briefing section
   tucks its numbers under the logo. */
.page-entry > .fa-sec:first-of-type:not(.svc-hero),
.front-page > .fa-sec:first-of-type:not(.svc-hero) { padding-top: 9rem; }

/* The wordmark is white, so it vanishes when the first section is light.
   Inverting it costs no extra asset and leaves the orange alpha alone. */
.logo--over-light .logo__wordmark { filter: invert(1); }

@media (max-width: 1024px) {
  .page-entry > .fa-sec:first-of-type:not(.svc-hero),
  .front-page > .fa-sec:first-of-type:not(.svc-hero) { padding-top: 7.5rem; }
}

/* ---- Blog cards ----
   Same .fa-card shell as the briefing sections, so the blog does not introduce
   a third card style. Padding moves to the body so the thumbnail can bleed to
   the card edge. */
.fa-card--post { padding: 0; overflow: hidden; }
.fa-card__hit { display: flex; flex-direction: column; height: 100%; color: inherit; }
.fa-card__media { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sec-rule); }
.fa-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.fa-card--post:hover .fa-card__media img { transform: scale(1.04); }
.fa-card__body { display: flex; flex-direction: column; gap: 0.875rem; padding: 2rem; height: 100%; }
.fa-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--sec-muted);
}
.fa-card__term {
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--sec-card-border);
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sec-accent);
}

.blog-list__empty { font-size: 1.0625rem; color: var(--sec-text); }

.post-entry__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.875rem;
  font-size: 0.9375rem;
  color: var(--sec-muted);
}
.post-entry__term {
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--sec-card-border);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sec-accent);
  /* It is a link now, so it has to look like one on hover and never pick up
     the body underline the tone applies to anchors. */
  display: inline-block;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.post-entry__term:hover,
.post-entry__term:focus-visible {
  background: var(--sec-accent);
  border-color: var(--sec-accent);
  color: var(--sec-bg);
  text-decoration: none;
}

/* Standard WordPress visually-hidden helper. It was missing entirely, so every
   label written for screen readers - the sidebar search among them - printed as
   ordinary visible text next to the field it describes. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

/* ---- Numbered pagination ----
   Reads the --sec-* tokens like every other component, so the same markup
   works on the light blog band and on a dark archive without branching.
   The pill is the site's own control shape: a circle at the button colours,
   which is what every other action on the page already looks like. */
.fa-pager {
  margin-top: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.fa-pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;                   /* 44: also the minimum comfortable tap target */
  height: 2.75rem;
  border: 1px solid var(--sec-card-border);
  border-radius: 50%;
  background: var(--sec-card-bg);
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1;
  color: var(--sec-title);
  font-variant-numeric: tabular-nums;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.fa-pager a.page-numbers:hover,
.fa-pager a.page-numbers:focus-visible { border-color: var(--sec-accent); color: var(--sec-accent); }
.fa-pager .page-numbers.current {
  background: var(--sec-btn-bg);
  border-color: var(--sec-btn-bg);
  color: var(--sec-btn-fg);
}
/* The gap marker is not a control: no circle, no border, no hover. */
.fa-pager .page-numbers.dots {
  width: 1.25rem;
  border: 0;
  background: none;
  color: var(--sec-muted);
}
.fa-pager .prev svg { transform: rotate(180deg); }
/* Own row, centred under the controls: it is a status line, not a button. */
.fa-pager__count {
  flex-basis: 100%;
  margin: 0.25rem 0 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--sec-muted);
  font-variant-numeric: tabular-nums;
}


/* =========================================================
   CERTIFICATE
   Reached only through the token e-mailed to the candidate. On screen it is a
   card on the light band; on paper it is the whole page, which is why the
   print block below strips the site chrome instead of scaling it down.
   ========================================================= */
.fa-certpage .fa-wrap { max-width: 62rem; }
.fa-cert__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.fa-cert__valid { margin: 0; font-weight: 600; font-size: 0.9375rem; color: var(--sec-text); }
.fa-cert__valid::before { content: "\2713\00a0"; color: #1b6b47; font-weight: 700; }
/* ---- Verification screen ---- */
.fa-check { max-width: 40rem; }
.fa-check__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sec-title);
}
.fa-check__lead { margin: 0 0 2rem; color: var(--sec-text); }
.fa-check__form { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.fa-check__form input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.85rem 1.125rem;
  border: 1px solid var(--sec-card-border);
  border-radius: 999px;
  background: var(--sec-card-bg);
  font-family: var(--font-inter);
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sec-title);
}
.fa-check__form input:focus-visible { outline: 2px solid var(--sec-accent); outline-offset: 2px; }
.fa-check__result {
  margin-top: 2rem;
  padding: 1.5rem;
  border: 1px solid var(--sec-card-border);
  border-left: 3px solid var(--sec-card-border);
  border-radius: 1rem;
  background: var(--sec-card-bg);
}
/* :not(the stamp) because this rule carries an element selector and therefore
   outranks .fa-check__stamp's own margin, which is how the heading ended up
   sitting on top of the data it introduces. */
.fa-check__result p:not(.fa-check__stamp) { margin: 0 0 0.35rem; color: var(--sec-text); }
.fa-check__result p:last-child { margin-bottom: 0; }
.fa-check__result--yes { border-left-color: #1b6b47; }
.fa-check__result--no,
.fa-check__result--wait { border-left-color: #8a5e06; }
.fa-check__stamp {
  margin: 0 0 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--sec-card-border);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1b6b47;
}
.fa-check__stamp::before { content: "\2713\00a0\00a0"; }
.fa-check__data { display: grid; gap: 0.75rem; margin: 0; }
.fa-check__data > div { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.fa-check__data dt {
  flex: 0 0 9rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sec-muted);
  padding-top: 0.15rem;
}
.fa-check__data dd { margin: 0; font-weight: 600; color: var(--sec-title); }

/* A single short message, and it read as an accident: a 34rem block pinned to
   the left gutter with the other half of the window empty beside it, a title
   one size smaller than the verification screen it links to, and the button
   sitting flush against the paragraph because it was wrapped in a <p> whose
   margin had been reset. Same shape as every other standalone message in the
   theme now - a centred column, left aligned inside, one gap doing all the
   spacing - and the type matches the screen the button leads to. */
.fa-cert__miss {
  max-width: 34rem;
  margin-inline: auto;
  padding: 2rem 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}
.fa-cert__miss h1 {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--sec-title);
}
.fa-cert__miss p { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--sec-text); }

@media (max-width: 640px) {
  /* The label is 36 characters and .btn never wraps, so on a 390px screen the
     pill ran off the right edge. On this screen it takes the width of the
     column and breaks a line if it has to. */
  .fa-cert__miss .btn {
    align-self: stretch;
    white-space: normal;
    line-height: 1.3;
    text-align: center;
  }
}

.fa-cert {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 3.5rem 3rem 2.25rem;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--sec-card-border);
  border-top: 6px solid var(--cert-accent, var(--orange));
  border-radius: 1rem;
  color: #111;
  overflow: hidden;                 /* the watermark is oversized on purpose */
}
/* Behind everything, and never a hit target. */
.fa-cert__wm {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 0;
  width: min(62%, 26rem);
  aspect-ratio: 1;                  /* footer-alpha is square and drawn with
                                       preserveAspectRatio="none" */
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}
.fa-cert > *:not(.fa-cert__wm) { position: relative; z-index: 1; }

/* Brand lockup. Both marks are authored with preserveAspectRatio="none" and
   width/height at 100%, so they take the shape of the box they are given: the
   box has to carry the ratio, and the wordmark has to be placed as a
   percentage of it rather than in rem, or it drifts at any other size.
   Percentages are the header's own numbers over the 148.55 x 32 viewBox. */
.fa-cert__mark {
  position: relative;
  display: block;
  width: 15rem;
  aspect-ratio: 148.55 / 32;
  margin-bottom: 0.75rem;
}
.fa-cert__mark-full { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.fa-cert__mark-word {
  position: absolute;
  left: 38.07%;                     /* 56.55 / 148.55 */
  top: 35.41%;                      /* 11.33 / 32 */
  width: 61.93%;                    /* 91.99 / 148.55 */
  height: 26.57%;                   /* 8.50 / 32 */
  max-width: none;
  filter: invert(1);                /* the file is white; the certificate is not */
}
.fa-cert__logo { width: 15rem; height: auto; margin-bottom: 0.75rem; }
.fa-cert__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cert-accent, var(--orange));
}
.fa-cert__intro { margin: 0; font-size: 1rem; color: #4b5563; }
.fa-cert__name {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.fa-cert__body { display: flex; flex-direction: column; gap: 0.75rem; max-width: 40rem; }
.fa-cert__body p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: #374151; }
.fa-cert__body .fa-cert__level {
  font-family: var(--font);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #111;
}
/* The rubric is its own row ABOVE the rule, not a box pulled up over it: a
   scan can be any height, so a negative margin sized in rem either leaves the
   ink floating above the line or lets the line run through the middle of it.
   The overlap below is a hair, just enough that descenders touch the line the
   way they do on paper. */
.fa-cert__sign { display: flex; flex-direction: column; align-items: center; margin-top: 2rem; }
.fa-cert__rubric {
  display: block;
  width: auto;
  max-width: 12.75rem;
  max-height: 4.5rem;
  margin-bottom: -0.35rem;
  mix-blend-mode: multiply;         /* kills the white box on a scan */
}
.fa-cert__signline { padding-top: 0.6rem; border-top: 1px solid #e2e4ea; min-width: 19rem; }
.fa-cert__signer { margin: 0; font-weight: 700; }
.fa-cert__role { margin: 0.15rem 0 0; font-size: 0.875rem; color: #6b7280; }
/* Pushed to the bottom edge and made small: it is registry data, not part of
   the statement, and sitting next to the signature it read as a caption for it. */
.fa-cert__foot {
  margin: auto 0 0;
  padding-top: 2.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
}

@media print {
  /* Everything that is site, not certificate. */
  .header, .nav, .menu-toggle, .lang-switcher, .tfooter, .fa-wa,
  #cookie-banner-container, .fa-lang, .fa-cert__bar { display: none !important; }

  body, .fa-sec, .fa-certpage .fa-sec { background: #fff !important; padding: 0 !important; }
  .fa-certpage .fa-wrap { max-width: none; padding: 0; }

  .fa-cert {
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    page-break-inside: avoid;
  }
  /* The accent survives as a rule rather than a fill: printers render a 6px
     coloured band reliably, a full-bleed background only sometimes. */
  .fa-cert::before {
    content: "";
    display: block;
    width: 6rem;
    height: 4px;
    background: var(--cert-accent, var(--orange));
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .fa-cert__title, .fa-cert__level, .fa-cert__wm, .fa-cert__mark-word {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* On paper the footer has the page to fall to, so it goes to the very foot. */
  .fa-cert__foot { padding-top: 4rem; }
}
@page { margin: 12mm; }

/* ---- 404 ----
   Card + illustrated scene + copy, same structure as the Be Safe 404, with a
   scene built for this business: the question is said and understood, and the
   reply never arrives. The word below keeps cycling and never settles - the
   site's own translation motion, left unresolved on purpose. */
.fa-sec.fa-404 { padding: 11rem 0 6rem; overflow: hidden; }
.fa-404__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; }

.fa-404__scene {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 3rem 2rem;
  background: var(--sec-card-bg);
  border: 1px solid var(--sec-card-border);
  border-radius: 1.25rem;
  min-height: 22rem;
}
.fa-404__code {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14rem;
  line-height: 1;
  letter-spacing: -0.6rem;
  color: var(--sec-title);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
}
.fa-404__talk { position: relative; width: min(20rem, 100%); height: auto; color: var(--sec-accent); }
.fa-404__bubble--said { opacity: 0.9; }
.fa-404__bubble--lost { opacity: 0.45; }
.fa-404__alpha { opacity: 0.9; }
.fa-404__dot { animation: fa404Dot 1.4s ease-in-out infinite; }
.fa-404__dot:nth-child(3) { animation-delay: 0.18s; }
.fa-404__dot:nth-child(4) { animation-delay: 0.36s; }
@keyframes fa404Dot {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-5px); }
}
.fa-404__scramble {
  position: relative;
  min-height: 1.75rem;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--sec-muted);
}

.fa-404__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.fa-404__title {
  margin: 0;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.05;
  letter-spacing: -0.15rem;
  color: var(--sec-title);
}
.fa-404__sub { font-size: 1.0625rem; line-height: 1.6; color: var(--sec-text); }
.fa-404__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem 1.75rem; margin-top: 0.5rem; }
.fa-404__link {
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.0875rem;
  text-transform: uppercase;
  color: var(--sec-accent);
  border-bottom: 1px solid currentColor;
}

@media (max-width: 1024px) {
  .fa-sec.fa-404 { padding: 9rem 0 4rem; }
  .fa-404__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .fa-404__title { font-size: 2.25rem; letter-spacing: -0.08rem; }
  .fa-404__code { font-size: 9rem; letter-spacing: -0.3rem; }
  .fa-404__scene { min-height: 0; padding: 2.5rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fa-404__dot { animation: none; opacity: 0.6; }
}


/* ---- Level test (briefing section 4) ---- */
.fa-sec.lvl-hero { padding: 11rem 0 5rem; overflow: hidden; }
.lvl-hero__inner { position: relative; z-index: 1; max-width: 46rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
/* The test is a task, not an editorial page. Every screen of it is a 46rem
   column, and on a wide window that column sat against the left gutter with
   the other half of the screen empty beside it. The column is centred; the
   text inside stays left aligned, which is how the brand reads. */
.lvl-hero__inner,
.lvl-form,
.lvl-run { margin-inline: auto; }
.lvl-run { max-width: 46rem; }
.lvl-run .lvl-quiz { max-width: none; }
.lvl-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.75rem; font-size: 1.0625rem; line-height: 1.6; color: var(--sec-text); }
.lvl-steps strong { color: var(--sec-accent); }
.lvl-note { font-size: 0.9375rem; line-height: 1.6; color: var(--sec-muted); }

.lvl-form { max-width: 34rem; }
.lvl-form__title { margin: 0 0 0.5rem; font-weight: 700; font-size: 2rem; letter-spacing: -0.06rem; color: var(--sec-title); }
.lvl-form__hint { margin-bottom: 2rem; font-size: 0.9375rem; line-height: 1.6; color: var(--sec-text); }
.lvl-form__fields { display: flex; flex-direction: column; gap: 1.25rem; align-items: stretch; }
.lvl-form__fields .btn { align-self: flex-start; margin-top: 0.5rem; }

.lvl-langs { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.lvl-langs legend { padding: 0; margin-bottom: 0.75rem; font-weight: 600; font-size: 0.875rem; color: var(--sec-title); }

/* ---------- Consent boxes on the start form ----------
   Two opt-ins, sitting between the language choice and the button so they are
   read as part of signing up and not as fine print after the fact. Both start
   unticked; the note below them is the promise that the transactional messages
   do not depend on either one. */
.lvl-consent { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.lvl-consent legend { padding: 0; margin-bottom: 0.75rem; font-weight: 600; font-size: 0.875rem; color: var(--sec-title); }
.lvl-consent__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--sec-text);
  cursor: pointer;
}
.lvl-consent__item input {
  flex: 0 0 auto;
  /* The box is the click target and the label sits beside it, so it needs a
     stated size: left to the UA it lands a couple of pixels above the cap
     height of the first line. */
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.125rem 0 0;
  accent-color: var(--orange);
  cursor: pointer;
}
.lvl-consent__note { margin: 0.25rem 0 0; font-size: 0.8125rem; line-height: 1.6; color: var(--sec-muted); }
.lvl-lang {
  display: flex; align-items: center; gap: 0.875rem;
  padding: 1rem 1.25rem;
  background: var(--sec-card-bg);
  border: 1px solid var(--sec-card-border);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.lvl-lang:hover { border-color: var(--sec-accent); }
.lvl-lang.is-empty { opacity: 0.5; cursor: not-allowed; }
.lvl-lang__flag { display: inline-flex; gap: 0.25rem; align-items: center; }
.lvl-flag { display: block; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 2px; }
.lvl-lang__name { font-weight: 700; color: var(--sec-title); }
.lvl-lang__soon { margin-left: auto; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sec-muted); }

.lvl-test__title { margin: 0 0 0.5rem; font-weight: 700; font-size: 2.5rem; letter-spacing: -0.1rem; color: var(--sec-title); }
.lvl-quiz { margin-top: 3rem; display: flex; flex-direction: column; gap: 1.5rem; max-width: 46rem; }
.lvl-q {
  margin: 0; padding: 2rem;
  background: var(--sec-card-bg);
  border: 1px solid var(--sec-card-border);
  border-radius: 1rem;
}
.lvl-q__num { padding: 0 0 0.75rem; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.1em; color: var(--sec-accent); }
.lvl-q__media { width: 100%; max-width: 34rem; margin-bottom: 1.25rem; border-radius: 0.5rem; display: block; }
/* The reading passage travels with each of its questions, so it has to read as
   the source material and not as another prompt: inset, quieter, its own rule. */
.lvl-q__passage {
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.5rem;
  border-left: 2px solid var(--sec-accent);
  background: rgba(127, 127, 127, 0.06);
  border-radius: 0 0.625rem 0.625rem 0;
  font-size: 0.9375rem; line-height: 1.6; color: var(--sec-text);
}
.lvl-q__passage p { margin: 0 0 0.625rem; }
.lvl-q__passage p:last-child { margin-bottom: 0; }
.lvl-q__passage-title { font-weight: 700; color: var(--sec-title); }
.lvl-q__prompt { font-size: 1.0625rem; line-height: 1.5; color: var(--sec-title); margin-bottom: 1.25rem; }
.lvl-q__options { display: flex; flex-direction: column; gap: 0.625rem; }
.lvl-opt {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--sec-card-border);
  border-radius: 0.625rem;
  font-size: 0.9375rem; line-height: 1.45;
  color: var(--sec-text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.lvl-opt:hover { border-color: var(--sec-accent); }
.lvl-opt:has(input:checked) { border-color: var(--sec-accent); background: rgba(255, 98, 0, 0.08); color: var(--sec-title); }
.lvl-quiz__submit { align-self: flex-start; }

.lvl-result__level {
  font-weight: 700; font-size: 6rem; line-height: 1;
  letter-spacing: -0.3rem; color: var(--sec-accent);
}
/* The free stage reports a score, not a level: same weight on the page, and
   the denominator sits back so the eye lands on what was achieved. */
.lvl-result__score {
  margin: 0;
  font-weight: 700; font-size: 6rem; line-height: 1;
  letter-spacing: -0.3rem; color: var(--sec-accent);
}
.lvl-result__score span { font-size: 0.4em; letter-spacing: -0.05rem; opacity: 0.55; }
/* Under the level: its CEFR name, then the raw count. Descending weight, so
   the level is read first and the score is available without competing. */
.lvl-result__label {
  margin: 0.25rem 0 0;
  font-weight: 700; font-size: 1.375rem; line-height: 1.2;
  letter-spacing: -0.02rem; color: var(--sec-title);
}
.lvl-result__count {
  margin: 0.5rem 0 1.5rem;
  font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--sec-muted);
}
.lvl-includes {
  margin: 2rem 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 0.625rem;
  font-size: 0.9375rem; color: var(--sec-text);
}
.lvl-includes li { display: flex; gap: 0.625rem; align-items: baseline; }
.lvl-includes li::before { content: "\2713"; color: var(--sec-accent); font-weight: 700; }
/* Only an administrator ever sees this, so it announces itself as a note to
   the team and not as part of the page. */
.lvl-note--admin {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--sec-card-border);
  border-radius: 0.625rem;
  font-size: 0.8125rem;
}
.lvl-slots { width: 100%; }
.lvl-slots__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem; margin-bottom: 2rem; }
.lvl-slot {
  display: block; padding: 0.75rem 1rem; text-align: center;
  border: 1px solid var(--sec-card-border); border-radius: 0.625rem;
  font-size: 0.9375rem; color: var(--sec-text); cursor: pointer;
}
.lvl-slot input { position: absolute; opacity: 0; pointer-events: none; }
.lvl-slot:has(input:checked) { border-color: var(--sec-accent); background: rgba(255, 98, 0, 0.1); color: var(--sec-title); }

@media (max-width: 1024px) {
  .fa-sec.lvl-hero { padding: 9rem 0 4rem; }
  .lvl-result__level, .lvl-result__score { font-size: 4rem; letter-spacing: -0.15rem; }
  .lvl-result__label { font-size: 1.125rem; }
  .lvl-q__passage { padding: 1rem 1.125rem; }
  .lvl-q { padding: 1.5rem; }
}


/* ---- Blog: reading column plus sidebar ----
   The column is capped for legibility, which left a wide empty band that read
   as a sidebar slot with nothing in it. Now it holds one. */
.blog-single__grid { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 4rem; align-items: start; }
.blog-single__main { min-width: 0; }
.blog-single .svc-body__inner { max-width: none; }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.5rem; }

.blog-side { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: 1.25rem; }
.blog-side__box {
  padding: 1.5rem;
  background: var(--sec-card-bg);
  border: 1px solid var(--sec-card-border);
  border-radius: 1rem;
}
.blog-side__title {
  margin: 0 0 1rem;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sec-accent);
}
.blog-search { display: flex; gap: 0.5rem; }
.blog-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 2.75rem;
  padding: 0 0.875rem;
  background: var(--white);
  border: 1px solid var(--sec-card-border);
  border-radius: 0.625rem;
  font-family: var(--font);
  font-size: 0.875rem;
  color: var(--black);
}
.blog-search input:focus { outline: none; border-color: var(--sec-accent); }
.blog-search button {
  width: 2.75rem; height: 2.75rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--sec-btn-bg); color: var(--sec-btn-fg);
  border: none; border-radius: 0.625rem;
}

.blog-side__cats { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.blog-side__cats a {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--sec-card-border);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--sec-text);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.blog-side__cats a:hover { border-color: var(--sec-accent); color: var(--sec-accent); }
.blog-side__cats span { font-weight: 700; color: var(--sec-muted); }

.blog-side__recent { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.blog-side__recent a { display: flex; flex-direction: column; gap: 0.25rem; }
.blog-side__recent-title { font-weight: 700; font-size: 0.9375rem; line-height: 1.35; color: var(--sec-title); }
.blog-side__recent time { font-size: 0.75rem; color: var(--sec-muted); }
.blog-side__recent a:hover .blog-side__recent-title { color: var(--sec-accent); }

.blog-side__cta p { margin-bottom: 1rem; font-size: 0.875rem; line-height: 1.5; color: var(--sec-text); }

/* ---- Share ---- */
.post-share {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sec-rule);
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem;
}
.post-share__label {
  margin-right: 0.25rem;
  font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sec-muted);
}
.post-share__link {
  width: 2.5rem; height: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  background: none;
  border: 1px solid var(--sec-card-border);
  border-radius: 50%;
  color: var(--sec-text);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.post-share__link:hover { border-color: var(--sec-accent); color: var(--sec-accent); }
.post-share__link.is-done { border-color: var(--sec-accent); background: var(--sec-accent); color: var(--white); }

@media (max-width: 1024px) {
  .blog-single__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .blog-side { position: static; }
}



/* The post card image must fill the card. .fa-card--post zeroes the padding so
   the media can bleed to the edges, but the media block still has to be told
   to take the full width or it sits inset like the rest of the content. */
.fa-card--post .fa-card__media { width: 100%; margin: 0; border-radius: 0; }
.fa-card--post .fa-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ---- Level test: stepper ----
   Only applied once JS marks the form, so with scripting off every question
   stays visible and the test still works. */
.lvl-quiz.is-stepped .lvl-q { display: none; }
.lvl-quiz.is-stepped .lvl-q.is-current { display: block; animation: lvlIn 0.28s ease both; }
@keyframes lvlIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.lvl-progress { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.lvl-progress__bar { flex: 1 1 auto; height: 4px; background: var(--sec-card-border); border-radius: 2px; overflow: hidden; }
.lvl-progress__bar span {
  display: block; width: 100%; height: 100%;
  background: var(--sec-accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.lvl-progress__count { flex: 0 0 auto; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--sec-muted); }

.lvl-nav { display: flex; align-items: center; gap: 1rem; }
.lvl-nav__back {
  padding: 0.75rem 0; background: none; border: none;
  font-family: inherit; font-weight: 700; font-size: 0.875rem;
  letter-spacing: 0.0875rem; text-transform: uppercase;
  color: var(--sec-muted); cursor: pointer;
}
.lvl-nav__back:hover { color: var(--sec-title); }
.lvl-nav .btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.lvl-nav [hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .lvl-quiz.is-stepped .lvl-q.is-current { animation: none; }
  .lvl-progress__bar span { transition: none; }
}

/* ---------- Language switch: the translation overlay ----------
   Covers the navigation between languages, so the switch reads as the site
   translating itself instead of a white flash. Above every other layer
   (cookie card 200, video modal 300). */
.fa-lang {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.fa-lang[hidden] { display: none; }
.fa-lang.is-visible { opacity: 1; }
/* Raised during parse on arrival (header.php): it must be opaque on the very
   first paint, so no fade IN there - only the fade OUT once JS takes over. */
.fa-lang.is-instant { transition: none; }
/* On arrival the bar has to already be full: it finished at 100% on the page we
   left. It is scaleX(0) in the stylesheet and the class that fills it is added
   by script, so without this the transition runs again and the bar refills from
   empty at the exact moment it had just completed. */
.fa-lang.is-instant .fa-lang__bar span { transition: none; }

/* Base rule, NOT scoped to .is-instant.
   Scoped, it only applied on the arriving page: the departing overlay rendered
   this as a bare <p> at 16px, normal weight, sentence case, and the arriving one
   at 13px, bold, uppercase, letter-spaced, dimmed. So the label changed its
   entire typography across the navigation - which is the flicker of "the text
   and the style change when the bar completes". Both halves share one rule. */
.fa-lang__label {
  margin: 0;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.fa-lang__word { color: var(--orange); }
.fa-lang__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.fa-lang__mark {
  width: 4.5rem;
  height: 4.5rem;
  animation: faLangPulse 1.4s ease-in-out infinite;
}
.fa-lang__word {
  min-height: 2.75rem;
  font-weight: 700;
  font-size: 2.25rem;                /* 36 */
  line-height: 1.2;
  letter-spacing: -0.05rem;
  text-align: center;
  color: var(--white);
  /* Tabular-ish rendering keeps the line from jittering while characters
     cycle through glyphs of different widths. */
  font-variant-ligatures: none;
}
.fa-lang__word .is-settled { color: var(--orange); }
.fa-lang__bar {
  width: 10rem;
  height: 2px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.fa-lang__bar span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.fa-lang.is-loading .fa-lang__bar span { transform: scaleX(1); }

@keyframes faLangPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.65; transform: scale(0.94); }
}

@media (max-width: 640px) {
  .fa-lang__word { font-size: 1.75rem; }
  .fa-lang__mark { width: 3.5rem; height: 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fa-lang { transition: none; }
  .fa-lang__mark { animation: none; }
  .fa-lang__bar span { transition: none; }
}

/* ---------- Footer additions (briefing section 5) ---------- */
.tfooter__presence,
.tfooter__taxid { font-size: 0.8125rem; color: #999; }
/* The button sits inside .tfooter__col, whose `a` rule (0-1-1) outranks the
   plain .btn colour (0-1-0) and rendered the label #999 on orange. Matching
   the column raises this to 0-2-0 so the label is white again, without
   reaching for !important. */
.tfooter__col .tfooter__whatsapp {
  margin-top: 1.25rem;
  align-self: flex-start;
  color: var(--white);
}
.tfooter__col .tfooter__whatsapp:hover { color: var(--white); }
/* The payment link sits under the WhatsApp button and stays secondary to it:
   the conversation is the channel, the link is what closes it. */
.tfooter__paypal {
  margin-top: 0.75rem;
  align-self: flex-start;
  font-size: 0.875rem;
  color: #ccc;
  text-decoration: underline;
}
.tfooter__paypal:hover { color: var(--orange); }
.tfooter__col--contact { display: flex; flex-direction: column; align-items: flex-start; }
.tfooter__privacy { font-size: 0.875rem; color: #ccc; text-decoration: underline; }
.tfooter__privacy:hover { color: var(--orange); }
/* LinkedIn leads the socials — the briefing calls it the channel that matters
   for the M&A and internationalisation audience. */
.tfooter__social-link--linkedin { border-color: var(--orange); }
.tfooter__social-link--linkedin:hover { background: var(--orange); }

/* =========================================================
   BRIEFING SECTIONS — mobile
   ========================================================= */
@media (max-width: 1024px) {
  .fa-wrap { padding: 0 1.5rem; }

  .fa-sec { padding: 4rem 0; }
  .fa-stats { padding: 2.5rem 0; }

  .fa-cases__title,
  .fa-quotes__title,
  .fa-faq__title,
  .fa-block__title,
  .fa-method__title { font-size: 2.25rem; letter-spacing: -0.08rem; }

  .fa-stats { padding: 3.5rem 0; }
  .fa-stats__inner { gap: 1.5rem; }
  .fa-stats__list { gap: 1.25rem 0; }
  .fa-stat { padding: 0 1.25rem; }
  .fa-stat__value { font-size: 2rem; }

  .fa-audience__links { grid-template-columns: 1fr; }
  .fa-audience__link { padding: 2rem 1.5rem; }
  .fa-audience__link-label { font-size: 1.75rem; }

  .fa-video__inner { grid-template-columns: 1fr; gap: 2rem; }
  .fa-video__play { width: 4rem; height: 4rem; }
  .fa-video__play svg { width: 1.75rem; height: 1.75rem; }
  .fa-video__title { font-size: 2rem; }

  .fa-cases__list,
  .fa-quotes__grid,
  .fa-block__cards { grid-template-columns: 1fr; margin-top: 2.5rem; }

  .fa-method__inner { grid-template-columns: 1fr; gap: 1.75rem; }

  .fa-faq__trigger { font-size: 1.0625rem; padding: 1.25rem 0; }

  .fa-modal__dialog { width: calc(100vw - 2rem); }
  .fa-modal__close { top: -2.5rem; }

  .fa-wa { right: 1rem; bottom: 1rem; width: 3rem; height: 3rem; }
  .fa-wa__icon { width: 1.75rem; height: 1.75rem; }
}

@media (max-width: 640px) {
  /* Stacked, the vertical dividers sat beside each row separating nothing, and
     centring every row on its own left the numbers ragged. One left edge, no
     rules. */
  .fa-stats__inner { align-items: flex-start; gap: 1.25rem; text-align: left; }
  .fa-stats__list { flex-direction: column; align-items: flex-start; gap: 0.875rem; }
  .fa-stat { padding: 0; }
  .fa-stat + .fa-stat { border-left: 0; }
  .fa-case { padding: 2rem 1.5rem; }
  .fa-quote { padding: 2rem 1.5rem; }
  /* :not(--post) because the post card zeroes its own padding so the thumbnail
     can bleed to the card edges, and the flat .fa-card rule below it in the
     cascade was handing that padding straight back. Two things broke at once:
     the media stopped bleeding, and the body's own 2rem stacked on top of this
     1.5rem, so the post card sat at 56px of inner padding against the 24px of
     every sidebar box beside it. */
  .fa-card:not(.fa-card--post) { padding: 1.5rem; }
  /* Matches .blog-side__box, which is the card this one is stacked against on
     a phone. */
  .fa-card--post .fa-card__body { padding: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fa-audience__link,
  .fa-card,
  .fa-case__body,
  .fa-faq__answer,
  .fa-video__cover,
  .fa-video__play,
  .fa-wa { transition: none; }
}

/* =========================================================
   WOOCOMMERCE — cart, checkout, order received

   WooCommerce ships a complete look of its own: grey notice bars, blue info
   stripes, rounded grey buttons, its own type scale. Dropped inside the site it
   read as a different product bolted on, which is exactly what the cart and the
   checkout looked like. This restates those components in the section tokens,
   so the store inherits whatever tone the band around it is using instead of
   painting its own palette.

   Everything is scoped under .woocommerce, so none of it can leak into the rest
   of the site.
   ========================================================= */

/* A checkout is a form, not an editorial page: a full-height banner pushed the
   first field below the fold for no reason. */
.woocommerce-page .fa-sec.svc-hero,
.woocommerce-checkout .fa-sec.svc-hero,
.woocommerce-cart .fa-sec.svc-hero {
  min-height: 0;
  padding: 9.5rem 0 3.5rem;
}

.woocommerce { color: var(--sec-text); }
.woocommerce a { color: var(--sec-accent); }

/* ---- Notices ----
   One shape for all three, told apart by the colour of the leading rule. The
   stock look mixes a green tick, a blue stripe and a red block, none of which
   belong to this palette. */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
  margin: 0 0 1.5rem;
  padding: 1.125rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--sec-card-bg);
  border: 1px solid var(--sec-card-border);
  border-left: 3px solid var(--sec-accent);
  border-radius: 0.625rem;
  color: var(--sec-text);
  font-size: 0.9375rem;
  line-height: 1.5;
  list-style: none;
}
/* The stock tick / info / alert glyphs are drawn as ::before content. */
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before { content: none; }
.woocommerce .woocommerce-error { border-left-color: #d93025; }
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button { margin-left: auto; }

/* ---- Buttons ----
   Reuses the site pill rather than restyling WooCommerce's own: .btn already
   carries the hover, the tone swap and the reduced-motion handling. */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order,
.woocommerce a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background: var(--sec-btn-bg);
  color: var(--sec-btn-fg);
  border: none;
  border-radius: var(--btn-radius);
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: 0.0875rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover,
.woocommerce a.button:hover {
  background: var(--sec-btn-bg);
  color: var(--sec-btn-fg);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  filter: brightness(1.06);
}
.woocommerce #place_order { width: 100%; padding: 1rem 1.5rem; }

/* ---- Fields ----
   Same shape as the site's own .field, so the checkout does not introduce a
   second input style halfway through the journey. */
.woocommerce .form-row { margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.woocommerce .form-row label {
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sec-muted);
}
.woocommerce .form-row .required { color: var(--sec-accent); text-decoration: none; }
.woocommerce .input-text,
.woocommerce select,
.woocommerce textarea,
.woocommerce .select2-container .select2-selection {
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--white);
  border: 1px solid var(--sec-card-border);
  border-radius: 0.625rem;
  font-family: var(--font);
  font-size: 0.875rem;
  color: var(--black);
  transition: border-color 0.18s ease;
}
.woocommerce .input-text:focus,
.woocommerce select:focus,
.woocommerce textarea:focus { outline: none; border-color: var(--sec-accent); }
.woocommerce .select2-container .select2-selection { display: flex; align-items: center; height: auto; }
.woocommerce .select2-container .select2-selection__rendered { padding: 0; line-height: 1.4; color: var(--black); }
.woocommerce .select2-container .select2-selection__arrow { top: 50%; transform: translateY(-50%); right: 0.75rem; }

/* ---- Two columns ----
   WooCommerce floats these; a grid keeps the review panel level with the fields
   instead of hanging below them at odd widths. */
.woocommerce .col2-set { display: grid; grid-template-columns: 1fr; gap: 0; width: 100%; }
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 { width: 100%; float: none; }
.woocommerce form.checkout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 3rem; align-items: start; }
.woocommerce form.checkout > .col2-set { grid-column: 1; }
.woocommerce form.checkout > #order_review,
.woocommerce form.checkout > #order_review_heading,
.woocommerce form.checkout > .woocommerce-checkout-review-order { grid-column: 2; }
.woocommerce h3,
.woocommerce #order_review_heading {
  margin: 0 0 1.25rem;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--sec-title);
}

/* ---- Order review ---- */
.woocommerce .shop_table {
  width: 100%;
  margin: 0 0 1.5rem;
  border: 1px solid var(--sec-card-border);
  border-radius: 0.625rem;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--sec-card-bg);
}
.woocommerce .shop_table th,
.woocommerce .shop_table td {
  padding: 1rem 1.25rem;
  border: 0;
  border-bottom: 1px solid var(--sec-card-border);
  text-align: left;
  font-size: 0.9375rem;
  color: var(--sec-text);
}
.woocommerce .shop_table th { font-weight: 700; color: var(--sec-title); }
.woocommerce .shop_table tr:last-child th,
.woocommerce .shop_table tr:last-child td { border-bottom: 0; }
.woocommerce .shop_table .order-total th,
.woocommerce .shop_table .order-total td { font-size: 1.125rem; color: var(--sec-title); }
.woocommerce .shop_table .amount { font-weight: 700; }

.woocommerce .woocommerce-checkout-payment,
.woocommerce #payment {
  padding: 1.5rem;
  background: var(--sec-card-bg);
  border: 1px solid var(--sec-card-border);
  border-radius: 0.625rem;
}
.woocommerce #payment ul.payment_methods { margin: 0 0 1.25rem; padding: 0; list-style: none; border: 0; }
.woocommerce #payment ul.payment_methods li { margin: 0 0 0.75rem; }
.woocommerce #payment ul.payment_methods label {
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sec-title);
}
.woocommerce #payment .payment_box {
  margin: 0.625rem 0 0;
  padding: 0.875rem 1rem;
  background: var(--sec-bg);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: var(--sec-muted);
}
.woocommerce #payment .payment_box::before { content: none; }
.woocommerce .woocommerce-terms-and-conditions-wrapper { margin-bottom: 1.25rem; font-size: 0.8125rem; color: var(--sec-muted); }

/* ---- Order received ---- */
.woocommerce .woocommerce-order-overview,
.woocommerce ul.order_details {
  margin: 0 0 2rem;
  padding: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  list-style: none;
  background: var(--sec-card-bg);
  border: 1px solid var(--sec-card-border);
  border-radius: 0.625rem;
}
.woocommerce ul.order_details li {
  margin: 0;
  padding: 0;
  border: 0;
  float: none;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sec-muted);
}
.woocommerce ul.order_details li strong {
  display: block;
  margin-top: 0.375rem;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sec-title);
}

/* The test's own hand-off, printed right after the order details. */
.lvl-thankyou {
  margin: 0 0 2rem;
  padding: 2rem;
  background: var(--sec-card-bg);
  border: 1px solid var(--sec-accent);
  border-radius: 0.625rem;
}
.lvl-thankyou h2 { margin: 0 0 0.75rem; font-size: 1.375rem; color: var(--sec-title); }
.lvl-thankyou p { margin: 0 0 1.5rem; color: var(--sec-text); }

/* ---- Cart ---- */
.woocommerce .cart_totals { margin-top: 2rem; }
.woocommerce .wc-proceed-to-checkout { padding: 0; }
.woocommerce .quantity .qty {
  width: 4.5rem;
  padding: 0.625rem;
  background: var(--white);
  border: 1px solid var(--sec-card-border);
  border-radius: 0.5rem;
  color: var(--black);
}
.woocommerce .cart-empty { font-size: 1.125rem; color: var(--sec-text); }
.woocommerce .return-to-shop { margin-top: 1.5rem; }

@media (max-width: 900px) {
  .woocommerce form.checkout { grid-template-columns: 1fr; gap: 2rem; }
  .woocommerce form.checkout > #order_review,
  .woocommerce form.checkout > #order_review_heading,
  .woocommerce form.checkout > .woocommerce-checkout-review-order { grid-column: 1; }
  .woocommerce-page .fa-sec.svc-hero { padding: 8rem 0 2.5rem; }
}

/* ---- Overrides where WooCommerce outranks the block above ----
   Measured, not guessed: the notices, the payment panel and the order button
   took the tokens, but the table, the inputs and the container did not.
   WooCommerce writes those as `table.shop_table` and
   `form .form-row input.input-text`, which carry an element on the end and beat
   a plain two-class selector. Matched here at the same shape plus one. */

/* The checkout is not prose: .svc-body__inner caps the reading column at 46rem,
   which squeezed the two columns down to 395px + 292px. */
.woocommerce-page .svc-body__inner,
.woocommerce-checkout .svc-body__inner,
.woocommerce-cart .svc-body__inner { max-width: none; font-size: 1rem; }

.woocommerce table.shop_table {
  border: 1px solid var(--sec-card-border);
  border-radius: 0.625rem;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--sec-card-bg);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 1rem 1.25rem;
  border: 0;
  border-bottom: 1px solid var(--sec-card-border);
  color: var(--sec-text);
}
.woocommerce table.shop_table tr:last-child th,
.woocommerce table.shop_table tr:last-child td { border-bottom: 0; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
  padding: 0.875rem 1rem;
  background: var(--white);
  border: 1px solid var(--sec-card-border);
  border-radius: 0.625rem;
  font-family: var(--font);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--black);
  box-shadow: none;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { outline: none; border-color: var(--sec-accent); }

/* Woo marks invalid rows with its own red; keep the shape, use the palette. */
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: #d93025; }
.woocommerce form .form-row.woocommerce-validated input.input-text { border-color: var(--sec-card-border); }

/* ---- Footer: services grouped by audience ----
   Você and Sua Empresa are sub-headings inside the SAME column, not two
   columns: the briefing's split is about who the reader is, and splitting it
   across columns read as two unrelated lists. The column is given more room
   than its siblings because it now carries two lists. */
.tfooter__col--services { flex: 1.6 1 16rem; }
.tfooter__group + .tfooter__group { margin-top: 1.75rem; }
.tfooter__group-title {
  margin: 0 0 0.75rem;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}
.tfooter__group-title a { color: inherit; text-decoration: none; }
.tfooter__group-title a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .tfooter__col--services { flex: 1 1 100%; }
}

/* ---- Checkout: place the summary explicitly ----
   Measured: #customer_details is ~1160px tall and occupies row 1, the heading
   auto-placed into row 1 column 2, and #order_review into row 2 - which starts
   only after that 1160px row, so the summary landed a whole screen below its
   own heading. Auto-placement cannot know they belong together; the rows are
   stated. */
.woocommerce form.checkout { grid-template-rows: auto 1fr; }
.woocommerce form.checkout > .col2-set,
.woocommerce form.checkout > #customer_details { grid-column: 1; grid-row: 1 / span 2; }
.woocommerce form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; }
.woocommerce form.checkout > #order_review,
.woocommerce form.checkout > .woocommerce-checkout-review-order { grid-column: 2; grid-row: 2; }

/* WooCommerce prepends the validation errors into the form and then scrolls to
   the top of it. Both rows of both columns are placed above, so the notice was
   auto-placed into an implicit row underneath everything: the page scrolled to
   a form whose errors were a screen below, off view. It gets its own row at
   the top, and the rest moves down a row - only when a notice is on the page,
   so the empty state keeps its spacing. */
.woocommerce form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; margin: 0 0 0.5rem; }

@media (min-width: 901px) {
  .woocommerce form.checkout:has(> .woocommerce-NoticeGroup) { grid-template-rows: auto auto 1fr; }
  .woocommerce form.checkout > .woocommerce-NoticeGroup { grid-row: 1; }
  .woocommerce form.checkout:has(> .woocommerce-NoticeGroup) > .col2-set,
  .woocommerce form.checkout:has(> .woocommerce-NoticeGroup) > #customer_details { grid-row: 2 / span 2; }
  .woocommerce form.checkout:has(> .woocommerce-NoticeGroup) > #order_review_heading { grid-row: 2; }
  .woocommerce form.checkout:has(> .woocommerce-NoticeGroup) > #order_review,
  .woocommerce form.checkout:has(> .woocommerce-NoticeGroup) > .woocommerce-checkout-review-order { grid-row: 3; }
}

/* The billing form is long; keeping the total and the pay button in view while
   it is filled in is the point of having a column for them. */
.woocommerce form.checkout > #order_review { position: sticky; top: 7rem; }

@media (max-width: 900px) {
  .woocommerce form.checkout { grid-template-rows: none; }
  .woocommerce form.checkout > .col2-set,
  .woocommerce form.checkout > #customer_details,
  .woocommerce form.checkout > #order_review_heading,
  .woocommerce form.checkout > #order_review,
  .woocommerce form.checkout > .woocommerce-checkout-review-order { grid-column: 1; grid-row: auto; }
  .woocommerce form.checkout > #order_review { position: static; }
}

/* ---------- Points list ----------
   One component, three shapes, picked per section in wp-admin. Everything
   paints from the --sec-* tokens, so a section follows whichever background
   the editor chose without a rule per tone. */
.fa-points__inner { display: flex; flex-direction: column; gap: 3rem; }
.fa-points__head { max-width: 46rem; }
.fa-points__eyebrow {
  margin: 0 0 0.75rem;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.0875rem;
  text-transform: uppercase;
  color: var(--sec-accent);
}
.fa-points__title {
  margin: 0;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.05;
  letter-spacing: -0.15rem;
  color: var(--sec-title);
}
.fa-points__intro { margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.7; color: var(--sec-text); }
.fa-points__intro p + p { margin-top: 1rem; }

.fa-points__list { margin: 0; padding: 0; list-style: none; }
.fa-points__item-title { display: block; margin: 0; font-weight: 700; color: var(--sec-title); }
.fa-points__item-text { margin: 0.5rem 0 0; font-size: 1rem; line-height: 1.65; color: var(--sec-text); }
.fa-points__footnote { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--sec-muted); }

/* Cards: ideas that carry the same weight, so they sit side by side and the
   grid is minmax(0, 1fr) rather than 1fr - a long unbroken word in one card
   would otherwise widen its column and skew the row. */
.fa-points--cards .fa-points__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 1.5rem;
}
.fa-points--cards .fa-points__item {
  padding: 2rem;
  background: var(--sec-card-bg);
  border: 1px solid var(--sec-card-border);
  border-radius: 1rem;
}
.fa-points--cards .fa-points__item-title { font-size: 1.25rem; line-height: 1.25; }

/* Numbered: the order is the meaning, so the number is drawn rather than
   left to ::marker, which cannot be laid out beside the body. */
.fa-points--numbered .fa-points__list {
  counter-reset: fa-ponto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.fa-points--numbered .fa-points__item {
  counter-increment: fa-ponto;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0 1.25rem;
  align-items: start;
  padding: 1.75rem 2rem;
  background: var(--sec-card-bg);
  border: 1px solid var(--sec-card-border);
  border-radius: 1rem;
}
.fa-points--numbered .fa-points__item::before {
  content: counter(fa-ponto);
  grid-row: 1 / span 2;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--sec-btn-fg);
  background: var(--sec-btn-bg);
  border-radius: 50%;
}
.fa-points--numbered .fa-points__item-title { font-size: 1.125rem; }
/* Explicit placement, because a title-less point would otherwise let the text
   fall into the row the title was meant to occupy. */
.fa-points--numbered .fa-points__item-title { grid-column: 2; }
.fa-points--numbered .fa-points__item-text { grid-column: 2; }

/* List: principles, read top to bottom, with a rule between them instead of
   a box around each. */
.fa-points--list .fa-points__list { border-top: 1px solid var(--sec-rule); }
.fa-points--list .fa-points__item { padding: 1.5rem 0; border-bottom: 1px solid var(--sec-rule); }
.fa-points--list .fa-points__item-title { font-size: 1.125rem; }

@media (max-width: 1024px) {
  .fa-points__inner { gap: 2.25rem; }
  .fa-points__title { font-size: 2.25rem; letter-spacing: -0.08rem; }
  .fa-points--cards .fa-points__list { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .fa-points--cards .fa-points__item { padding: 1.5rem; }
  .fa-points--numbered .fa-points__item { padding: 1.25rem; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0 1rem; }
  .fa-points--numbered .fa-points__item::before { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
}

/* ---------- Form: one error message, not two ----------
   Last Form answers a field-level validation failure with per-field messages
   AND a form-level summary, and the summary it picks is the "internal error"
   one, which is both redundant and wrong: nothing broke, a field is empty.
   Where the fields are already pointing at the problem the summary is hidden;
   a failure with no field to blame (rate limit, send failure, a real 500)
   marks no field, so its message still shows. */
.lf-form:has(.lf-field--error) .lf-form__message--error { display: none; }

.fa-method__cta { margin-top: 2rem; }

/* ---------- Blog cards, share row, content images ---------- */

/* More picture, less air. The image was 16/9 and the "read more" is pushed to
   the bottom of the card by margin-top:auto, so a card whose title ran two
   lines while its neighbour ran four ended with a hole in the middle of it.
   Clamping the title and the excerpt makes every card in a row the same
   height, which closes the gap without giving up the aligned baseline. */
.fa-card--post .fa-card__media { flex: 0 0 auto; aspect-ratio: 3 / 2; }
/* Clamping the title closed the gap too, and cut headlines mid-word to do it.
   The taller image is what actually fills the card, so the text is left
   alone: a card title that reads "aprendizagem mai..." is a worse card than
   one with a little air under it. */
.fa-card--post .fa-card__more { margin-top: auto; padding-top: 0.5rem; }

/* The share row wrapped on a phone and left the copy button alone on a second
   line, which read as a stray control rather than as part of the set. The
   label is what should give way, not the icons. */
@media (max-width: 640px) {
  .post-share { flex-wrap: nowrap; gap: 0.5rem; }
  .post-share__label {
    flex: 0 1 auto;
    min-width: 0;
    margin-right: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .post-share__link { flex: 0 0 auto; width: 2.25rem; height: 2.25rem; }
}

/* An image inside the text sat at its own intrinsic width, so on a phone a
   640px file rendered narrower than the column it lives in and looked like a
   thumbnail someone forgot to size. It fills the reading column instead. */
.svc-body__inner figure,
.svc-body__inner .wp-block-image {
  width: 100%;
  max-width: 100%;
  /* The browser gives a bare <figure> margin: 1em 40px. Setting the width
     alone left the box the right size and 40px to the right of the column,
     hanging off the edge on a phone: the first fix measured the width and
     never looked at where the thing actually was. */
  margin-inline: 0;
}
.svc-body__inner figure img,
.svc-body__inner .wp-block-image img {
  width: 100%;
  height: auto;
}