/* NOTE: this stylesheet uses px, not rem.
   The Agenio theme sets html { font-size: 10px }, so 1rem is 10px here. Values
   written against the usual 16px root render at ~62% of their intended size,
   which is why everything below is absolute. */

/* =========================================================================
   Emerging Freelancer — brand layer over the Agenio template.

   Loaded AFTER style.css so it overrides by cascade. The template's own
   stylesheet is left untouched, which keeps this reversible: remove this one
   file from the <link> list in layout.tsx and the template looks stock again.

   Brand (per the supplied guide):
     charcoal #252623  ivory #F5F4EF  lime #C3E635  muted #666A61  line #DADDD3
   Balance aimed at roughly 70% ivory / 25% charcoal / 5% lime.
   ========================================================================= */

:root {
  /* --- core palette remap --- */
  --color-primary: #c3e635;       /* was #98FF03 — brand lime */
  --color-secondary: #252623;     /* was #1F1F25 — charcoal */
  --color-black: #252623;
  --color-bg-1: #f5f4ef;          /* was #F3F4F6 — ivory */
  --color-bg-5: #f5f4ef;
  --color-bg-dark: #252623;
  --color-bg-dark-2: #1c1d1a;

  --color-border: #daddd3;
  --color-border-dark: #3b3c37;

  --color-heading-1: #252623;
  --color-title: #252623;
  --color-title-nav: #252623;
  --color-body-1: #666a61;        /* muted — 5.06:1 on ivory, passes AA */
  --color-body-dark: #9ba096;     /* lighter muted for charcoal surfaces */
  --color-service-heading: #252623;
  --counter-title: #666a61;

  /* Brand guide: Manrope is the supporting website face. The logo lettering
     is supplied as outlines and is never set in a font.
     --font-manrope comes from next/font in layout.tsx (self-hosted). */
  --font-primary: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;
  --font-secondary: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;

  --footer-bg: #f5f4ef;

  /* Tints the template derives from the old accent. */
  --ef-lime-soft: rgba(195, 230, 53, 0.18);
  --ef-lime-deep: #b4d92b;
}

body {
  background-color: var(--color-bg-1);
  color: var(--color-body-1);
}

/* -------------------------------------------------------------------------
   Logo sizing

   The supplied lockup is 1475×170 (aspect 8.68) where the template's own mark
   was 118×31. Without an explicit height it would render enormous. The brand
   guide sets a 240px minimum width for the horizontal lockup, so the header
   height here (30px → ~260px wide) stays above it.
   ------------------------------------------------------------------------- */

.logo-area .logo img,
.header-main .logo img,
.wpr-offcanvas-menu .logo img {
  height: 30px;
  width: auto;
  max-width: none;
}

.wpr-cta-area .section-inner .logo img {
  width: auto;
  height: 34px;
}

/* Between the desktop-nav breakpoint and ~1400px the wider lockup, a seven-item
   nav and the header CTA no longer fit on one row, so the nav tightens up.
   (The template's own mark was 118px wide and never hit this.) */
@media (min-width: 992px) and (max-width: 1399px) {
  .main-nav-area ul {
    gap: 22px;
  }

  .main-nav-area ul li a {
    font-size: 13px;
  }

  .logo-area .logo img,
  .header-main .logo img {
    height: 28px; /* 243px wide — still above the 240px minimum */
  }
}

/* Bootstrap caps .container at 960px from 992px up, so the header has 928px of
   usable width while the lockup, seven nav items and the CTA needed 986px —
   enough to push a horizontal scrollbar onto the page at 992 and 1024. The
   logo cannot give way (240px is its stated minimum), so the room comes from
   the nav spacing and the button. */
@media (min-width: 992px) and (max-width: 1199px) {
  .main-nav-area ul {
    gap: 14px;
  }

  .main-nav-area ul li a {
    font-size: 12px;
  }

  .header-style-one-wrapper .button-area-start .wpr-btn {
    padding-inline: 18px;
  }
}

/* On phones the 240px-minimum lockup plus the header CTA overflows a 360–390px
   screen. The brand guide allows the symbol on compact surfaces (24px minimum),
   so the header swaps to the mark rather than shrinking the lockup below its
   stated minimum or stretching it out of proportion. */
@media (max-width: 767px) {
  .logo-area .logo img,
  .header-main .logo img {
    content: url("/brand/symbol.svg");
    height: 36px;
    width: 36px;
  }
}

.wpr-footer-area .footer-logo-area img {
  width: min(620px, 72vw);
  height: auto;
  margin-inline: auto;
}

.wpr-footer-area .footer-logo-area {
  padding: 96px 0;
}

/* The template's decorative corner shapes were drawn for its own wordmark. */
.wpr-footer-area .footer-logo-area .shape {
  opacity: 0.5;
}

/* -------------------------------------------------------------------------
   Lime discipline

   Lime on ivory is ~1.2:1 — illegible. It is a FILL colour, never light-background
   body text. Charcoal on lime is 10.9:1 and is the button pairing.
   ------------------------------------------------------------------------- */

/* Buttons keep the template's original treatment: the dark glossy gradient for
   the primary, white for the secondary. They are deliberately NOT recoloured to
   lime — charcoal is a brand colour, the gradient reads as more considered than
   a flat fill, and it keeps lime to roughly the 5% the guide asks for.
   Only the text colour is pinned, so each sits correctly on its own fill. */
.wpr-btn {
  color: #f9fafb;
}

.wpr-btn.btn-white,
.wpr-btn.btn-white:hover {
  color: #252623;
}

/* Lime text is only safe on charcoal (10.9:1). */
.bg-dark .sub-title,
.wpr-cta-area .sub-title,
[class*="dark"] .sub-title {
  color: var(--color-primary);
}

/* The template already draws its own marker on .sub-title via ::after and
   reserves room for it with padding-left — so this only recolours the text and
   the background tint. Adding a second marker here duplicated it. */
.section-title-area .sub-title {
  color: var(--color-body-1);
  background: var(--color-bg-1);
  letter-spacing: 0.08em;
}

.wpr-cta-area .sub-title,
.bg-dark .sub-title {
  color: #9ba096;
  background: transparent;
}

/* -------------------------------------------------------------------------
   Availability ticker (header top)

   Reuses the template's own @keyframes marquee. Two identical tracks sit side
   by side and the pair translates by one full track width, so the seam never
   shows. Lime is used for the separator dots only — the copy stays ivory,
   because lime on charcoal at 14px is an accent, not body text.
   ------------------------------------------------------------------------- */

.header-style-one .header-top .header-top-inner {
  gap: 0;
  justify-content: flex-start;
  overflow: hidden;
}

.ef-ticker {
  display: flex;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ef-ticker__track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  animation: marquee 38s linear infinite;
  will-change: transform;
}

.ef-ticker__item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding-inline: 26px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-white);
  font-family: var(--font-primary);
}

.ef-ticker__item::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 26px;
  background: var(--color-primary);
  flex: none;
}

.ef-ticker:hover .ef-ticker__track {
  animation-play-state: paused;
}

/* -------------------------------------------------------------------------
   Surfaces
   ------------------------------------------------------------------------- */

.wpr-footer-area {
  background: var(--color-bg-1);
}

.section-inner.border-1,
.border-1 {
  border-color: var(--color-border);
}

.wpr-cta-area .section-inner {
  background-color: var(--color-secondary);
}

/* -------------------------------------------------------------------------
   Closing CTA band

   The template's heading rendered charcoal-on-charcoal, the decorative graphic
   was the loudest thing on the page, and there was nothing to click. Heading
   goes ivory, the graphic is toned to a near-charcoal so it reads as texture,
   and the section gets an actual button — white on charcoal, which carries the
   contrast without spending lime on it.
   ------------------------------------------------------------------------- */

/* The template fades this heading with a gradient clipped to the text
   (#55595C -> #000000). On a charcoal panel the second half of that gradient is
   black on near-black, so the words disappeared. `color` cannot fix it —
   -webkit-text-fill-color wins — so the gradient itself is restated, fading
   ivory to muted instead. Same effect, now legible. */
.wpr-cta-area .section-inner .section-title {
  background: linear-gradient(137.66deg, #f5f4ef 16%, #7e8378 86%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 3;
}

.wpr-cta-area .cta-desc {
  position: relative;
  z-index: 3;
  margin: 10px auto 0;
  max-width: 52ch;
  color: #c3c8bc;
  font-size: 17px;
  line-height: 1.65;
  text-align: center;
}

.wpr-cta-area .cta-actions {
  position: relative;
  z-index: 3;
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 26px;
}

.wpr-cta-area .cta-actions .wpr-btn {
  margin-inline: 0;
}

.wpr-cta-area .cta-link {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 16px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}

.wpr-cta-area .cta-link:hover {
  border-bottom-color: var(--color-primary);
}

/* The decorative blocks sit behind the content, not over it. */
.wpr-cta-area .section-bottom-shape,
.wpr-cta-area .bg-shape {
  z-index: 1;
}

.wpr-cta-area .section-bottom-shape .tag {
  z-index: 3;
}

/* Dark panels: keep muted copy legible against charcoal. */
.wpr-cta-area .section-inner p,
.wpr-cta-area .section-inner .desc {
  color: #9ba096;
}

/* -------------------------------------------------------------------------
   Pricing → "gigs"

   The template's pricing cards carry the packaged-service list. Lime is used
   only on the featured card's badge and its button, not across all three.
   ------------------------------------------------------------------------- */

/* The gig / package grid.

   Home shows four gig cards (2x2); /service shows three packages per gig
   (3-across). One set of rules covers both by sizing on child count, and the
   whole thing collapses to a single column on tablet and below. */
.wpr-pricing-plans-area .section-inner .section-mid-area {
  flex-wrap: wrap;
}

.wpr-pricing-plans-area .section-inner .section-mid-area .pricing-inner {
  padding: 48px 36px;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* Three packages: a third each, one row. */
.section-mid-area > .pricing-inner:first-child:nth-last-child(3),
.section-mid-area > .pricing-inner:first-child:nth-last-child(3) ~ .pricing-inner {
  width: 33.3333%;
  border-bottom: 0;
}

.section-mid-area > .pricing-inner:first-child:nth-last-child(3) ~ .pricing-inner:last-child {
  border-right: 0;
}

/* Four gigs: one row, a quarter each. The 2x2 block was twice as tall for the
   same information. */
.section-mid-area > .pricing-inner:first-child:nth-last-child(4),
.section-mid-area > .pricing-inner:first-child:nth-last-child(4) ~ .pricing-inner {
  width: 25%;
  padding: 36px 24px;
  border-bottom: 0;
}

.section-mid-area > .pricing-inner:first-child:nth-last-child(4) ~ .pricing-inner:last-child {
  border-right: 0;
}

/* At a quarter width the feature list has to go single file. The template sets
   the li to width:48% (its two-column trick) and line-height:1, both of which
   shred the text in a narrow card. */
.section-mid-area > .pricing-inner:first-child:nth-last-child(4) .pricing-body ul,
.section-mid-area > .pricing-inner:first-child:nth-last-child(4) ~ .pricing-inner .pricing-body ul {
  gap: 13px;
  align-items: stretch;
}

.section-mid-area > .pricing-inner:first-child:nth-last-child(4) .pricing-body ul li,
.section-mid-area > .pricing-inner:first-child:nth-last-child(4) ~ .pricing-inner .pricing-body ul li {
  width: 100%;
  line-height: 1.45;
  align-items: flex-start;
  font-size: 15px;
}

.section-mid-area > .pricing-inner:first-child:nth-last-child(4) .pricing-body ul li img,
.section-mid-area > .pricing-inner:first-child:nth-last-child(4) ~ .pricing-inner .pricing-body ul li img {
  flex: none;
  margin-top: 2px;
}

.section-mid-area > .pricing-inner:first-child:nth-last-child(4) .pricing-header .title,
.section-mid-area > .pricing-inner:first-child:nth-last-child(4) ~ .pricing-inner .pricing-header .title {
  font-size: 21px;
  margin-bottom: 26px;
}

.section-mid-area > .pricing-inner:first-child:nth-last-child(4) .bottom-pricing .price,
.section-mid-area > .pricing-inner:first-child:nth-last-child(4) ~ .pricing-inner .bottom-pricing .price {
  font-size: 38px;
}

/* Three packages: the feature list also goes single file. The template's
   li width:48% and line-height:1 were written for a half-width card. */
.section-mid-area > .pricing-inner:first-child:nth-last-child(3) .pricing-body ul li,
.section-mid-area > .pricing-inner:first-child:nth-last-child(3) ~ .pricing-inner .pricing-body ul li {
  width: 100%;
  line-height: 1.45;
  align-items: flex-start;
}

.section-mid-area > .pricing-inner:first-child:nth-last-child(3) .pricing-body ul li img,
.section-mid-area > .pricing-inner:first-child:nth-last-child(3) ~ .pricing-inner .pricing-body ul li img {
  flex: none;
  margin-top: 2px;
}

/* Equal-height cards. The template lets each wrapper size to its own content,
   which leaves four ragged bottom edges in a row. */
.wpr-pricing-plans-area .section-inner .section-mid-area .pricing-inner {
  display: flex;
}

.wpr-pricing-plans-area .section-mid-area .pricing-inner > .pricing-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.wpr-pricing-plans-area .section-mid-area .pricing-inner > .pricing-wrapper > .pricing-body {
  flex: 1 1 auto;
}

/* Two across once a quarter gets too narrow to read. */
@media (max-width: 1280px) {
  .section-mid-area > .pricing-inner:first-child:nth-last-child(4),
  .section-mid-area > .pricing-inner:first-child:nth-last-child(4) ~ .pricing-inner {
    width: 50%;
  }

  .section-mid-area > .pricing-inner:first-child:nth-last-child(4):nth-child(2n),
  .section-mid-area > .pricing-inner:first-child:nth-last-child(4) ~ .pricing-inner:nth-child(2n) {
    border-right: 0;
  }

  .section-mid-area > .pricing-inner:first-child:nth-last-child(4) ~ .pricing-inner:nth-child(-n + 2),
  .section-mid-area > .pricing-inner:first-child:nth-last-child(4):nth-child(-n + 2) {
    border-bottom: 1px solid var(--color-border);
  }
}

@media (max-width: 1199px) {
  .wpr-pricing-plans-area .section-inner .section-mid-area .pricing-inner {
    padding: 40px 28px;
  }
}

@media (max-width: 991px) {
  .wpr-pricing-plans-area .section-inner .section-mid-area .pricing-inner,
  .section-mid-area > .pricing-inner:first-child:nth-last-child(3),
  .section-mid-area > .pricing-inner:first-child:nth-last-child(3) ~ .pricing-inner,
  .section-mid-area > .pricing-inner:first-child:nth-last-child(4),
  .section-mid-area > .pricing-inner:first-child:nth-last-child(4) ~ .pricing-inner {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .wpr-pricing-plans-area .section-inner .section-mid-area .pricing-inner:last-child {
    border-bottom: 0;
  }
}

/* At a third (or a half) of the row the template's side-by-side price and
   button no longer fit, and the figure was breaking mid-number ("$15 / 0").
   Stack them, keep the price on one line, and let the button fill the card. */
.pricing-wrapper .pricing-header .bottom-pricing {
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}

.pricing-wrapper .pricing-header .bottom-pricing .price {
  font-size: 44px;
  line-height: 1.05;
  white-space: nowrap;
}

/* "Starting from" sits above the figure rather than trailing it. */
.pricing-wrapper .pricing-header .bottom-pricing .price span {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pricing-wrapper .pricing-header .bottom-pricing .button-area .wpr-btn {
  width: 100%;
  max-width: none;
  justify-content: center;
  text-align: center;
}

.pricing-wrapper .pricing-header .title {
  font-size: 24px;
  margin-bottom: 32px;
  text-wrap: balance;
}

/* The delivery chip sits next to the tier name and was being clipped. */
.pricing-wrapper .pricing-header .plan-type {
  flex-wrap: wrap;
  gap: 8px 12px;
  position: relative;
  z-index: 1;
}

.pricing-wrapper .pricing-header .plan-type p {
  white-space: normal;
}

.pricing-wrapper .pricing-body ul li {
  text-wrap: pretty;
}

/* The middle package is the one most people take — mark it. */
.wpr-pricing-plans-area .pricing-wrapper.dark .plan-type p {
  color: var(--color-primary);
}

/* Gig CTAs keep the template's dark gradient too. Only the label colour is
   pinned, because the 5-class template selector sets the background. */
.pricing-wrapper .pricing-header .bottom-pricing .button-area .wpr-btn,
.pricing-wrapper.dark .pricing-header .bottom-pricing .button-area .wpr-btn {
  color: #f9fafb;
}

/* -------------------------------------------------------------------------
   Focus visibility — the template ships almost none.
   ------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 3px;
  border-radius: 2px;
}

.wpr-cta-area a:focus-visible,
.wpr-cta-area button:focus-visible {
  outline-color: var(--color-bg-1);
}

/* -------------------------------------------------------------------------
   Preloader — template default is near-black with white lettering.
   ------------------------------------------------------------------------- */

.preloader {
  background-color: var(--color-secondary);
}

.preloader .site-name span {
  color: var(--color-bg-1);
}

/* The template sized the site name as 80px text; the lockup is an SVG, so it
   needs explicit sizing or it renders at its intrinsic 1475px width. */
.preloader .site-name img {
  display: block;
  width: min(520px, 62vw);
  height: auto;
  margin-inline: auto;
}

.preloader .inner-bar {
  background-color: var(--color-primary);
}

/* -------------------------------------------------------------------------
   Motion: the template animates regardless of the OS setting.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .wpr-marquee-area .marquee-inner,
  .marquee-wrapper,
  [class*="marquee"] * {
    animation: none !important;
    transform: none !important;
  }

  /* The ticker stops rather than snapping through its loop, and the duplicate
     track is hidden so the copy is not repeated on screen. */
  .ef-ticker__track {
    animation: none !important;
    transform: none !important;
  }

  .ef-ticker__track[aria-hidden="true"] {
    display: none;
  }

  .ef-ticker {
    overflow-x: auto;
  }
}

/* -------------------------------------------------------------------------
   Answer-first lead paragraph

   Sits directly under a section heading and states the plain answer — what it
   costs, how long it takes — in the opening lines, which is where both readers
   and answer engines look for it.
   ------------------------------------------------------------------------- */

.gig-answer {
  max-width: 68ch;
  margin: 22px auto 0;
  text-align: center;
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-body-1);
}

.gig-answer strong {
  color: var(--color-title);
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   Rotating hero word

   "I BUILD" stays; the right half cycles through the services. The slot is
   height-locked to two lines so a longer word cannot make the hero jump as it
   swaps — the template's two halves are already fixed at 50%, so nothing moves
   horizontally either.
   ------------------------------------------------------------------------- */

.ef-rotate {
  display: block;
  position: relative;
  min-height: 2.2em; /* clears the tallest (two-line) word, so nothing shifts */
  overflow: hidden;
}

.ef-rotate__word {
  display: block;
  animation: ef-word-in 520ms cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

@keyframes ef-word-in {
  from {
    opacity: 0;
    transform: translateY(0.42em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 991px) {
  .ef-rotate {
    min-height: 1.15em;
  }
}

/* The words still change — that is content. Only the movement goes. */
@media (prefers-reduced-motion: reduce) {
  .ef-rotate__word {
    animation: none;
  }
}

/* =========================================================================
   Density pass

   The theme was built for an agency site with long scroll and big empty
   bands. Trimmed here rather than in style.css so it stays one file to undo.
   ========================================================================= */

/* ---------- hero ----------

   "AUTOMATIONS" needs 537px at 88px type and the right half is 552px, so at
   the template's 120px it broke mid-word ("AUTOMATI / ONS"). At 88px every
   rotating word fits on one line, which also drops the hero by roughly a
   line-height. The vw term keeps that relationship as the column scales. */

.wpr-banner-area .banner-content-area .section-title {
  font-size: clamp(36px, 6.1vw, 88px);
}

.wpr-banner-area .banner-content-area .section-title .text,
.ef-rotate__word {
  /* Never split a word across lines, whatever the width. */
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}

/* One line now, so the slot no longer reserves two. */
.ef-rotate {
  min-height: 1.18em;
}

.wpr-banner-area .banner-content-area .section-title .left-area,
.wpr-banner-area .banner-content-area .section-title .right-area {
  padding: 22px 0;
}

.wpr-banner-area .banner-content-area {
  padding-bottom: 24px;
}

/* ---------- section bands ---------- */

.wpr-pricing-plans-area .section-inner .section-top-area,
.wpr-services-area .section-top-area,
.wpr-project-area .section-top-area {
  padding: 64px 0 40px;
}

/* The detail pages reuse these shells but their headings are left-aligned
   prose, so they need the horizontal inset the template gives .about. */
.wpr-project-area.inner .section-top-area,
.wpr-services-area.inner .section-top-area,
.wpr-next-project-area .section-top-area {
  padding: 56px 56px 32px;
}

@media (max-width: 767px) {
  .wpr-project-area.inner .section-top-area,
  .wpr-services-area.inner .section-top-area,
  .wpr-next-project-area .section-top-area {
    padding: 40px 24px 24px;
  }
}

.wpr-about-area .section-inner .section-top-area {
  padding: 64px 56px 48px;
}

.wpr-working-process .section-inner {
  padding-top: 64px;
  padding-bottom: 64px;
}

.wpr-cta-area .section-inner {
  padding-top: 64px;
  padding-bottom: 72px;
}

.wpr-faq-area .section-inner .section-content-area {
  padding-top: 64px;
  padding-bottom: 64px;
}

/* ---------- footer ----------

   The logo band was a 96px-tall stripe with the mark floating in it, and the
   template's corner shapes sit at z-index 1 — above the logo — which is what
   washed it out. */

.wpr-footer-area .footer-logo-area {
  padding: 56px 0;
}

.wpr-footer-area .footer-logo-area img {
  width: min(460px, 62vw);
  position: relative;
  z-index: 2;
}

.wpr-footer-area .footer-logo-area .shape {
  opacity: 0.35;
  z-index: 0;
}

.wpr-footer-area .footer-top {
  padding: 32px 56px;
}

.wpr-footer-area .copyright-area {
  padding: 20px 56px;
}

@media (max-width: 767px) {
  .wpr-footer-area .footer-top,
  .wpr-footer-area .copyright-area {
    padding-inline: 24px;
  }

  .wpr-footer-area .footer-logo-area {
    padding: 40px 0;
  }
}

/* The footer nav used space-between across the full width, which stranded four
   links in the corners with the dot separators adrift between them. Centred
   with a real gap instead, so the dots read as separators. */
.wpr-footer-area .footer-top ul {
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.wpr-footer-area .footer-top ul li.square-dot {
  width: 5px;
  height: 5px;
  background: var(--color-border);
  flex: none;
}

@media (max-width: 575px) {
  .wpr-footer-area .footer-top ul li.square-dot {
    display: none;
  }

  .wpr-footer-area .footer-top ul {
    gap: 12px 20px;
  }
}

/* ---------- hero band ----------

   The template fixes the hero at 800px with 172px of top padding, sized for a
   two-line headline. The headline is one line now, so most of that was empty. */

.wpr-banner-area:not(.breadcrumb) .banner-content-area {
  height: auto;
  min-height: 560px;
  padding: 96px 0 72px;
}

/* Inner pages: title and standfirst only, so they need far less room. */
.wpr-banner-area.breadcrumb .banner-content-area {
  padding: 64px 0 56px;
}

.wpr-banner-area .banner-content-area .text-area {
  margin-top: 36px;
}

@media (max-width: 991px) {
  .wpr-banner-area:not(.breadcrumb) .banner-content-area {
    min-height: 0;
    padding: 56px 0 48px;
  }

  .wpr-banner-area.breadcrumb .banner-content-area {
    padding: 44px 0 36px;
  }
}

/* ---------- process steps ----------

   Four full-height step images made this the tallest section on the page by a
   wide margin. Capping the image and tightening the rows roughly halves it
   without losing a step. */

.wpr-working-process .image-area img {
  max-height: 280px;
  width: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.wpr-working-process .row {
  --bs-gutter-y: 32px;
}

.wpr-working-process .right-content-area .content-area {
  padding-block: 20px;
}

/* ---------- footer decoration ----------

   The corner shapes were drawn around the template's own wordmark and now
   read as stray light blocks behind the logo. */

.wpr-footer-area .footer-logo-area .shape {
  display: none;
}

/* The template puts a hardcoded 188px gap between the process heading and its
   supporting text, sized for a much longer heading than ours — it rendered as
   a dead band down the left column. The column is already sticky, so the three
   pieces simply group together. */
.wpr-working-process .working-process-left {
  gap: 32px;
  top: 120px;
}

/* Four full-bleed step illustrations stacked made this the tallest section on
   the page; capping them keeps all four steps without the scroll. */
.wpr-working-process .right-content-area .image-area img {
  max-height: 210px;
  width: 100%;
  object-fit: cover;
}

/* =========================================================================
   Detail pages (/service/[slug] and /work/[slug])

   These reuse the theme's section shells; only the inner blocks are new, and
   they are kept deliberately plain so they inherit the page's type and rules.
   ========================================================================= */

.ef-detail {
  display: grid;
  gap: 40px;
  padding: 0 56px 56px;
}

@media (min-width: 992px) {
  .ef-detail {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 56px;
    align-items: start;
  }
}

.ef-detail__media {
  margin: 0;
}

.ef-detail__media img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--color-border);
}

.ef-detail__media figcaption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--color-body-1);
}

.ef-facts {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--color-border);
}

.ef-facts > div {
  display: grid;
  gap: 4px;
  padding-block: 16px;
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 560px) {
  .ef-facts > div {
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 18px;
    align-items: baseline;
  }
}

.ef-facts dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-body-1);
}

.ef-facts dd {
  margin: 0;
  font-size: 15px;
}

.ef-inline-link {
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
}

.ef-inline-link:hover {
  border-bottom-color: var(--color-title);
}

/* ---------- prose ---------- */

.ef-prose {
  max-width: 68ch;
  padding: 0 56px 72px;
  display: grid;
  gap: 16px;
}

/* The theme uppercases and shrinks bare h3s, which made these read as labels
   rather than section headings. */
.ef-prose h3,
.ef-detail + .ef-prose h3 {
  margin-top: 22px;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--color-title);
  font-family: var(--font-secondary);
}

/* The problem statement is the page's opening paragraph, not a caption. */
.wpr-project-area.inner .section-top-area .gig-answer,
.wpr-services-area.inner .section-top-area .gig-answer {
  font-size: 17px;
  line-height: 1.7;
  max-width: 68ch;
}

.ef-prose p {
  color: var(--color-body-1);
  line-height: 1.7;
}

.ef-prose ul,
.ef-prose ol {
  display: grid;
  gap: 10px;
  padding-left: 0;
  margin: 0;
  list-style: none;
}

.ef-prose ol {
  counter-reset: efstep;
}

/* Markers are positioned rather than laid out as grid/flex items. A list item
   containing mixed inline content — "<strong>Label.</strong> then text" —
   turns each text run into its own grid item, which shredded the copy into a
   narrow column. Padding plus an absolute marker handles any content. */
.ef-prose ol li {
  position: relative;
  padding-left: 44px;
  color: var(--color-body-1);
  line-height: 1.7;
}

.ef-prose ol li::before {
  counter-increment: efstep;
  content: counter(efstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.15em;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-title);
}

.ef-prose ul li {
  position: relative;
  padding-left: 26px;
  color: var(--color-body-1);
  line-height: 1.7;
}

.ef-prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 9px;
  height: 2px;
  background: var(--color-primary);
}

.ef-note {
  border-left: 2px solid var(--color-primary);
  padding: 6px 0 6px 16px;
  font-size: 15px;
  color: var(--color-body-1);
}

/* ---------- highlights ---------- */

/* The theme zeroes list padding with `padding: 0 !important`, so matching it
   is the only way to inset this list. Everywhere else `ul` padding is meant to
   be zero, which is why this is the one place that needs it. */
ul.ef-highlights {
  display: grid;
  gap: 14px;
  padding: 0 56px 64px !important;
  margin: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .ef-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 48px;
  }
}

.ef-highlights li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 17px;
  line-height: 1.5;
}

.ef-highlights li img {
  margin-top: 3px;
}

/* ---------- "other things" list ---------- */

.ef-next-list {
  display: grid;
  margin: 0 56px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.ef-next-list li {
  border-bottom: 1px solid var(--color-border);
}

.ef-next-list a {
  display: grid;
  gap: 5px;
  padding-block: 22px;
  transition: padding-inline-start var(--transition);
}

.ef-next-list a:hover {
  padding-inline-start: 10px;
}

.ef-next-list__cat {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-body-1);
}

.ef-next-list__name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.ef-next-list__name span {
  transition: transform var(--transition);
}

.ef-next-list a:hover .ef-next-list__name span {
  transform: translateX(5px);
}

.ef-next-list__blurb {
  color: var(--color-body-1);
  font-size: 16px;
  max-width: 62ch;
}

.ef-next-cta {
  padding: 32px 56px 56px;
}

.ef-next-cta .wpr-btn {
  display: inline-flex;
}

/* ---------- work card facts ---------- */

.ef-work-facts li h4 {
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-body-1);
  margin-bottom: 4px;
}

.ef-work-facts li p {
  font-size: 15px;
  color: var(--color-title);
}

@media (max-width: 767px) {
  .ef-detail,
  .ef-prose {
    padding-inline: 24px;
  }

  ul.ef-highlights {
    padding: 0 24px 48px !important;
  }

  .ef-next-list {
    margin-inline: 24px;
  }

  .ef-next-cta {
    padding-inline: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ef-next-list a:hover {
    padding-inline-start: 0;
  }

  .ef-next-list a:hover .ef-next-list__name span {
    transform: none;
  }
}

/* ---------- answer pages ----------

   The short answer sits above the body so it is the first thing read, and the
   first thing an assistant lifts. */

.ef-answer {
  margin: 0 56px 40px;
  padding: 26px 30px;
  background: var(--color-bg-1);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 12px 12px 0;
}

.ef-answer__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-body-1);
  margin-bottom: 10px;
}

.ef-answer__text {
  font-size: 20px;
  line-height: 1.55;
  color: var(--color-title);
  max-width: 62ch;
}

.ef-prose > section {
  display: grid;
  gap: 16px;
}

@media (max-width: 767px) {
  .ef-answer {
    margin: 0 24px 32px;
    padding: 20px 22px;
  }

  .ef-answer__text {
    font-size: 17px;
  }
}

/* ---------- legal pages ---------- */

.ef-legal {
  max-width: 76ch;
}

.ef-legal section {
  padding-bottom: 6px;
}

.ef-legal ul li strong {
  color: var(--color-title);
  font-weight: 700;
}

.ef-legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  background: var(--color-bg-1);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1px 6px;
}

.ef-legal a {
  border-bottom: 1px solid var(--color-border);
}

.ef-legal a:hover {
  border-bottom-color: var(--color-title);
}

/* Unresolved decisions are marked so they cannot be published unnoticed. */
.ef-legal-todo {
  border-left: 3px solid #d9822b;
  background: #fdf5ec;
  padding: 14px 18px;
  border-radius: 0 10px 10px 0;
  font-size: 15px;
  line-height: 1.6;
  color: #6b4517;
}

.ef-legal-todo strong {
  color: #8a5212;
}

/* Footer legal row */
.ef-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 14px;
}

.ef-legal-links a {
  color: inherit;
  opacity: 0.85;
}

.ef-legal-links a:hover {
  opacity: 1;
  color: var(--color-primary);
}

/* ---------- legal: tables, callouts, worked examples ---------- */

/* Wrapper, not the table itself: a 4-column table cannot shrink below its
   content at 360px, so the scroll has to live on a parent. */
.ef-table {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  margin: 4px 0 8px;
  -webkit-overflow-scrolling: touch;
}

.ef-table table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
  /* The theme gives every table a 20px bottom margin, which here would show
     as dead space inside the rounded wrapper. */
  margin: 0;
}

/* The theme puts a full 1px box on every td, which draws a vertical rule
   between the columns. Rows read better separated only horizontally, so the
   box is cleared before the single bottom rule is set. */
.ef-table th,
.ef-table td {
  text-align: left;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.ef-table thead th {
  background: var(--color-bg-1);
  color: var(--color-title);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ef-table tbody tr:last-child th,
.ef-table tbody tr:last-child td {
  border-bottom: 0;
}

/* The theme uppercases <th> globally, which is right for a column heading and
   shouty for a row label. Row headers are sentences, so they are reset and
   allowed to wrap — only the figures stay on one line. */
.ef-table tbody th {
  font-weight: 600;
  color: var(--color-title);
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
}

/* Percentages read as figures, so they are kept on one line and aligned. */
.ef-table td.num,
.ef-table th.num {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The one thing a client most wants to find: when do I get everything back. */
.ef-keybox {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  background: var(--color-bg-1);
  border-radius: 0 10px 10px 0;
  padding: 18px 20px;
  margin: 4px 0 8px;
}

.ef-keybox > :last-child {
  margin-bottom: 0;
}

.ef-keybox ul {
  margin-bottom: 0;
}

/* The theme's paragraph and list margins stack here, leaving a gap that reads
   as a missing line between the lead-in and the list it introduces. */
.ef-keybox > p:first-child {
  margin-bottom: 6px;
}

.ef-keybox > p:first-child + ul {
  margin-top: 0;
}

/* Worked example: a number is more convincing than a paragraph about numbers. */
.ef-example {
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 4px 0 8px;
  font-size: 15px;
}

.ef-example > :last-child {
  margin-bottom: 0;
}

/* column-gap stays 0 so the total row's border-top meets across both columns
   as one continuous rule instead of two segments; dd carries the gap as
   padding instead. */
.ef-example dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 0;
}

.ef-example dt {
  margin: 0;
  color: var(--color-text);
}

.ef-example dd {
  margin: 0;
  padding-left: 16px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--color-title);
  font-weight: 600;
}

/* Breathing room between the figures and the sentence explaining them. */
.ef-example dl + p {
  margin-top: 14px;
}

.ef-example dl .total {
  border-top: 1px solid var(--color-border);
  padding-top: 8px;
  margin-top: 2px;
}

.ef-example__title {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-title);
  margin-bottom: 10px;
}

/* On a phone a four-column table either scrolls sideways — hiding the
   percentages, which are the point — or shrinks past legibility. Each row
   becomes a card instead, so nothing is cut off and nothing is dropped. */
@media (max-width: 639px) {
  .ef-table {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
  }

  .ef-table table {
    min-width: 0;
    display: block;
    font-size: 15px;
  }

  .ef-table thead {
    display: none;
  }

  .ef-table tbody,
  .ef-table tr,
  .ef-table tbody th,
  .ef-table td {
    display: block;
    width: auto;
  }

  .ef-table tr {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 12px 15px;
    margin-bottom: 10px;
  }

  .ef-table tr:last-child {
    margin-bottom: 0;
  }

  .ef-table tbody th {
    font-size: 16px;
    font-weight: 700;
    padding: 0 0 5px;
    border: 0;
  }

  .ef-table td {
    border: 0;
    padding: 2px 0;
  }

  .ef-table td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--color-title);
  }

  .ef-keybox,
  .ef-example {
    padding: 14px 16px;
  }
}

/* Q&A block on a legal page. <div> wrappers inside <dl> are valid HTML5 and
   keep each pair together for the border treatment. */
.ef-legal-faq {
  margin: 0;
  display: grid;
  gap: 18px;
}

.ef-legal-faq > div {
  border-left: 2px solid var(--color-border);
  padding-left: 18px;
}

.ef-legal-faq dt {
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--color-title);
  font-size: 17px;
  line-height: 1.45;
}

.ef-legal-faq dd {
  margin: 0;
  color: var(--color-text);
}

@media (max-width: 575px) {
  .ef-legal-faq > div {
    padding-left: 14px;
  }
  .ef-legal-faq dt {
    font-size: 16px;
  }
}

/* ---------- footer bottom row ----------

   The theme lays .copyright-area out as three flex children at 33% each:
   left links, centred copyright, back-to-top. The legal links share the centre
   column with the copyright rather than becoming a fourth child, which is what
   previously overflowed the row and pushed "Refunds" onto a line of its own. */

.wpr-footer-area .copyright-area .ef-footer-centre {
  width: 34%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

/* The theme sizes any <p> in this row at 33%; inside the centre column it
   should simply be as wide as its text. */
.wpr-footer-area .copyright-area .ef-footer-centre p.copyright {
  width: auto;
  text-align: center;
}

/* The size has to be set on the <li>, not just the <ul>: the theme styles
   list items directly, and a rule that targets the element always beats a
   value inherited from its parent however specific that parent's rule is. */
.wpr-footer-area .copyright-area .ef-footer-centre .ef-legal-links {
  justify-content: center;
  gap: 6px 18px;
}

.wpr-footer-area .copyright-area .ef-footer-centre .ef-legal-links li,
.wpr-footer-area .copyright-area .ef-footer-centre .ef-legal-links li a {
  font-size: 13px;
  line-height: 1.3;
}

/* Keep the outer columns from being squeezed by the taller centre. */
.wpr-footer-area .copyright-area .left-social-area,
.wpr-footer-area .copyright-area .scroll-top-btn {
  flex: none;
  width: 33%;
}

.wpr-footer-area .copyright-area .scroll-top-btn {
  max-width: none;
  background: transparent;
  padding: 0;
}

/* Below the theme's own stacking breakpoint every column goes full width and
   centres, so the three groups read as three tidy rows instead of three
   cramped columns. */
@media (max-width: 991px) {
  .wpr-footer-area .copyright-area {
    flex-direction: column;
    gap: 18px;
  }

  .wpr-footer-area .copyright-area .ef-footer-centre,
  .wpr-footer-area .copyright-area .left-social-area,
  .wpr-footer-area .copyright-area .scroll-top-btn {
    width: 100%;
  }

  .wpr-footer-area .copyright-area .left-social-area ul {
    justify-content: center;
  }

  .wpr-footer-area .copyright-area .scroll-top-btn {
    justify-content: center;
  }
}

/* The logo band was the tallest thing in the footer by some margin. */
.wpr-footer-area .footer-logo-area {
  padding: 44px 0;
}

@media (max-width: 767px) {
  .wpr-footer-area .footer-logo-area {
    padding: 32px 0;
  }
}

/* #goTop is fixed at the bottom-right of the viewport, so at the end of the
   page it sits on top of the copyright line. On wide screens there is room
   beside it; once the footer stacks and centres there is not, and it covers
   legal text. The footer's own "Back to Top" control serves the same purpose
   at that size, so the floating duplicate steps aside. */
@media (max-width: 991px) {
  #goTop {
    display: none;
  }
}

/* At tablet widths the six footer links plus five dot separators need more
   room than the container has, so "Contact" wrapped alone and left a dot
   dangling at the end of the first line. Dropping the decorative dots frees
   enough width for one tidy row. */
@media (max-width: 991px) {
  .wpr-footer-area .footer-top ul li.square-dot {
    display: none;
  }

  .wpr-footer-area .footer-top ul {
    gap: 12px 24px;
  }
}

/* ---------- grouped index pages ----------

   The answers and work indexes had grown to 24 and 17 items in a single
   column. They now break into one block per service, with a jump bar so a
   reader who arrived for one topic does not scroll through the others. */

.ef-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* .section-inner has no padding of its own here; the lists inside it carry a
     56px gutter, so anything added beside them has to match or it sits flush
     against the border. */
  margin: 0 56px 36px;
}

.ef-jump a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-title);
  background: var(--color-bg-1);
  transition: var(--transition);
}

.ef-jump a:hover {
  border-color: var(--color-title);
}

.ef-jump__count {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  min-width: 22px;
  padding: 1px 6px;
  text-align: center;
}

.ef-group {
  /* Anchored from the jump bar, so leave room for the sticky header. */
  scroll-margin-top: 110px;
}

.ef-group + .ef-group {
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
}

@media (max-width: 767px) {
  .ef-jump {
    margin-inline: 24px;
  }

  .ef-group__head {
    margin-inline: 24px;
  }
}

.ef-group__head {
  margin-inline: 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 20px;
}

.ef-group__head h3 {
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--color-title);
}

.ef-group__head a {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

.ef-group__head a:hover {
  color: var(--color-title);
}

@media (max-width: 575px) {
  .ef-jump {
    gap: 6px;
    margin-bottom: 28px;
  }

  .ef-jump a {
    padding: 7px 12px;
    font-size: 13px;
  }

  .ef-group__head h3 {
    font-size: 20px;
  }
}

/* Cross-links between the three policies. The privacy page in particular had
   no onward link of its own — the footer was the only way on or off it. */
.ef-legal-related {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  max-width: 76ch;
}

.ef-legal-related p {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-title);
}

.ef-legal-related ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0 !important;
  list-style: none;
}

.ef-legal-related li {
  padding: 0;
  margin: 0;
}

.ef-legal-related li::before {
  content: none;
}

.ef-legal-related a {
  font-size: 15px;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

.ef-legal-related a:hover {
  color: var(--color-title);
  border-bottom-color: var(--color-title);
}

/* ---------- reveal-animation overflow ----------

   The theme's entrance animations start elements off-screen to the right and
   slide them in. Between 992px and the next breakpoint that briefly pushed a
   horizontal scrollbar onto /service for the first few seconds of a visit.

   `clip` rather than `hidden`: hidden would make the body a scroll container
   and break the three position:sticky elements the site uses, where clip
   leaves them pinned. */
body.overflow-x-visible {
  overflow-x: clip;
}

/* =========================================================================
   Review fixes (closing CTA, hero fit)
   ========================================================================= */

/* Closing CTA: the title area and the stepped graphic both sat at z-index 1,
   and the graphic comes later in the DOM, so it painted over the description,
   the button and the logo. The content now stacks above the graphic, and the
   band keeps enough bottom room that the graphic's centre steps (about a third
   of its 356:1408 height) sit below the content instead of behind it. */
.wpr-cta-area .section-inner .section-title-area {
  z-index: 3;
}

.wpr-cta-area .section-inner .section-bottom-shape {
  z-index: 1;
  pointer-events: none;
}

@media (min-width: 768px) {
  .wpr-cta-area .section-inner {
    padding-bottom: calc(min(100vw, 1408px) * 0.12 + 72px);
  }
}

/* Hero: "AUTOMATIONS" ran into the right edge of its frame at 1280-1440px.
   A slightly smaller ceiling keeps every rotating word inside the frame, and
   the arrow tracks are clipped to the banner instead of leaking past it. */
.wpr-banner-area .banner-content-area .section-title {
  font-size: clamp(36px, 5.6vw, 80px);
}

.wpr-banner-area {
  overflow-x: clip;
}

/* =========================================================================
   Mobile hero (<= 767px)

   Desktop keeps the template's three-panel banner. On a phone that layout
   stacked into three dotted boxes with a bare mark in the middle, which read as
   scaffolding. The phone version follows the approved mockup instead:
     I BUILD → the EF mark on a raised app-icon tile → a hairline with a lime
     pill → the rotating word → the line of copy → the buttons,
   on a soft ivory panel with rounded lime blocks in two corners.
   ========================================================================= */
@media (max-width: 767px) {
  .wpr-banner-area:not(.breadcrumb) .banner-content-area {
    position: relative;
    overflow: hidden;
    padding: 64px 16px 120px;
    background:
      linear-gradient(135deg, transparent 58%, rgba(255, 255, 255, 0.85) 58.2%, rgba(255, 255, 255, 0) 80%),
      linear-gradient(180deg, #ffffff 0%, #f7f7f4 60%, #f2f2ee 100%);
  }

  /* Template scaffolding that does not belong on the phone layout. */
  .wpr-banner-area:not(.breadcrumb) .bg-shape,
  .wpr-banner-area:not(.breadcrumb) .banner-shape-area,
  .wpr-banner-area:not(.breadcrumb) .section-title .square-shape,
  .wpr-banner-area:not(.breadcrumb) .section-title .arrow-track {
    display: none !important;
  }

  .wpr-banner-area:not(.breadcrumb) .banner-content-area .section-title {
    flex-direction: column;
    align-items: center;
    gap: 0;
    font-size: clamp(40px, 14vw, 54px);
    position: relative;
    z-index: 2;
  }

  .wpr-banner-area:not(.breadcrumb) .section-title .left-area,
  .wpr-banner-area:not(.breadcrumb) .section-title .right-area {
    border: 0;
    background: transparent;
    padding: 0;
    width: 100%;
  }

  .wpr-banner-area:not(.breadcrumb) .section-title .text,
  .wpr-banner-area:not(.breadcrumb) .ef-rotate__word {
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1;
  }

  /* The EF mark on a raised tile. */
  .wpr-banner-area:not(.breadcrumb) .section-title .mid-icon {
    padding: 0;
    margin: 30px auto 0;
  }

  .wpr-banner-area:not(.breadcrumb) .section-title .mid-icon .inner {
    display: grid;
    place-items: center;
    width: min(200px, 54vw);
    aspect-ratio: 1 / 0.95;
    border-radius: 40px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f4f1 100%);
    box-shadow:
      0 28px 48px -24px rgba(37, 38, 35, 0.32),
      0 2px 6px rgba(37, 38, 35, 0.06),
      inset 0 1px 0 #ffffff;
    border: 1px solid rgba(37, 38, 35, 0.04);
  }

  .wpr-banner-area:not(.breadcrumb) .section-title .mid-icon .inner img {
    width: 64%;
    height: auto;
  }

  /* Hairline with a lime pill, between the tile and the rotating word. */
  .wpr-banner-area:not(.breadcrumb) .section-title .right-area::before {
    content: "";
    display: block;
    width: calc(100% - 40px);
    height: 4px;
    margin: 30px auto 26px;
    border-radius: 2px;
    background:
      linear-gradient(#c3e635, #c3e635) center / 52px 4px no-repeat,
      linear-gradient(#dadcd5, #dadcd5) center / 100% 1px no-repeat;
  }

  .wpr-banner-area:not(.breadcrumb) .ef-rotate {
    font-size: clamp(32px, 11.4vw, 46px);
    min-height: 1.1em;
    background: transparent;
  }

  .wpr-banner-area:not(.breadcrumb) .banner-content-area .text-area {
    margin-top: 22px;
    position: relative;
    z-index: 2;
  }

  .wpr-banner-area:not(.breadcrumb) .banner-content-area .text-area .desc {
    font-size: 17px;
    line-height: 1.55;
    color: #2f302c;
  }

  .wpr-banner-area:not(.breadcrumb) .banner-content-area .text-area .desc br {
    display: none;
  }

  .wpr-banner-area:not(.breadcrumb) .banner-content-area .button-area {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
  }

  /* Rounded lime blocks: top-left cluster, bottom-left bar, faded tiles bottom-right. */
  .wpr-banner-area:not(.breadcrumb) .banner-content-area::before,
  .wpr-banner-area:not(.breadcrumb) .banner-content-area::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .wpr-banner-area:not(.breadcrumb) .banner-content-area::before {
    top: 0;
    left: 0;
    width: 112px;
    height: 100px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 100'%3E%3Crect x='-8' y='-8' width='40' height='44' rx='8' fill='%23c3e635'/%3E%3Crect x='52' y='-8' width='56' height='44' rx='8' fill='%23c3e635'/%3E%3Crect x='32' y='36' width='33' height='34' rx='8' fill='%23bfe02f'/%3E%3Crect x='-8' y='76' width='30' height='24' rx='6' fill='%23c3e635' fill-opacity='0.3'/%3E%3C/svg%3E");
    filter: drop-shadow(0 6px 10px rgba(130, 160, 20, 0.18));
  }

  .wpr-banner-area:not(.breadcrumb) .banner-content-area::after {
    left: 0;
    right: 0;
    bottom: 0;
    height: 92px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 92' preserveAspectRatio='none'%3E%3Crect x='-10' y='0' width='46' height='42' rx='8' fill='%23c3e635' fill-opacity='0.28'/%3E%3Crect x='-10' y='40' width='150' height='62' rx='14' fill='%23c3e635'/%3E%3Crect x='300' y='20' width='70' height='80' rx='14' fill='%23ffffff' stroke='%23e7e8e2'/%3E%3Crect x='240' y='60' width='56' height='40' rx='10' fill='%23ffffff' stroke='%23ecede7'/%3E%3C/svg%3E");
  }
}