/* ==========================================================================
   Erada homepage variation (/v3)
   Loaded ONLY by rp_erada_fe/pages/index_v3.html, after style.css.

   Scoping rules for this file:
     - Every selector is prefixed with `.erada-v3` (the wrapper in the
       template) so nothing can leak onto any other page.
     - Every new class is prefixed `v3-`. Webflow class names (.section,
       .container, .button, .pricing-overview, .logos, .logo_items ...) are
       never redefined here.
     - There is deliberately NO blanket element reset. The hero and services
       blocks are still verbatim Webflow markup, and a global
       `.erada-v3 img { display:block }` would break the hero's responsive
       image swap. Resets are scoped per component instead.
   ========================================================================== */

/* ==========================================================================
   TYPE SCALE

   One rule per typographic role. Every font-family, font-size, line-height,
   weight and tracking in this file resolves to a token below - if a component
   needs a value that is not here, the scale is wrong, not the component.

   Three families, each with one job:
     display  bodoni-72-book  section headlines and titles  (the site's own
                              Didone, declared in style.css:8473)
     body     Gothic A1       running prose
     ui       Montserrat      uppercase micro-type: eyebrows, buttons, meta

   Four roles:
     display  section headlines      "Two services.", "Ready to talk?"
     title    card and project names
     lead     standalone paragraphs  section intros, CTA copy
     body     copy inside cards
     micro    uppercase UI caps      eyebrows, links, buttons, metadata

   Sizes are rem so they honour the reader's browser text size; the two
   display roles use clamp() so they scale with the viewport between fixed
   bounds rather than needing per-breakpoint overrides.
   ========================================================================== */

.erada-v3 {
    /* families */
    --v3-font-display: "bodoni-72-book", Georgia, serif;
    --v3-font-body:    "Poppins", "Gothic A1", sans-serif;
    --v3-font-ui:      "Poppins", Montserrat, sans-serif;

    /* display — section headlines */
    --v3-size-display:     clamp(2.4rem, 5vw, 4.25rem);
    --v3-lh-display:       1.06;
    --v3-tracking-display: -0.01em;

    /* title — card and project names */
    --v3-size-title: clamp(1.45rem, 2.2vw, 1.95rem);
    --v3-lh-title:   1.18;

    /* SPACING — 8px base scale. Every margin, padding and gap resolves to one
       of these. Before this the file used 27 distinct values, 11 of them off
       any grid (7, 9, 13, 14, 18, 22, 26, 30, 34, 38px), which is why the
       section rhythm and gutters had drifted apart. */
    --v3-space-1:  4px;
    --v3-space-2:  8px;
    --v3-space-3:  12px;
    --v3-space-4:  16px;
    --v3-space-5:  24px;
    --v3-space-6:  32px;
    --v3-space-7:  48px;
    --v3-space-8:  64px;
    --v3-space-9:  96px;

    /* prose — one size. There used to be a 16px "lead" and a 15px "body";
       a 1px difference reads as inconsistency rather than hierarchy, and
       15px sits under the 16px baseline browsers default to for reading. */
    --v3-size-body: 1rem;        /* 16px */
    --v3-lh-body:   1.6;

    /* micro — uppercase UI caps */
    --v3-size-micro:     0.6875rem;  /* 11px */
    --v3-weight-micro:   500;
    --v3-tracking-micro: 0.2em;
    --v3-lh-micro:       1.6;
}

/* --------------------------------------------------------------------------
   Client marquee — repositioned to sit directly beneath the hero.

   Rebuilt under v3- names rather than reusing .client-logos-section, because
   that class is paired with .pricing-overview on the production homepage,
   which brings a textured cream background and a -70px bottom margin below
   479px. Both are position-dependent and unwanted directly under the hero.
   -------------------------------------------------------------------------- */

.erada-v3 .v3-clients {
    position: relative;
    width: 100%;
    padding: var(--v3-space-9) 0;
    /* Site cream (--secondary), NOT the #f8f9fa the production marquee
       declares. That grey is a cool blue-grey that never showed in
       production because .pricing-overview painted a cream texture over
       it; with that class dropped it clashed against the warm cream of
       .cc-store-home-wrap. Using the palette token keeps this component
       self-contained and on-brand wherever it is placed. */
    background-color: var(--v3-surface);
    overflow: hidden;
}

.erada-v3 .v3-clients__header {
    text-align: center;
    margin-bottom: var(--v3-space-7);
    padding: 0 var(--v3-space-6);
}

/* Was carrying Webflow's .centered-heading-2/.font-bodoni-72, which put it
   outside this scale and at a different size and case from every other
   section headline. Now it uses the display role like the rest. */
.erada-v3 .v3-clients__title {
    margin: 0;
    font-family: var(--v3-font-display);
    font-weight: 400;
    font-size: var(--v3-size-display);
    line-height: var(--v3-lh-display);
    letter-spacing: var(--v3-tracking-display);
    color: var(--primary, #595a20);
}

.erada-v3 .v3-clients__subtitle {
    margin: 12px 0 0;
    padding: 0;
    color: var(--paragraph-color);
    font-family: var(--v3-font-body);
    font-size: var(--v3-size-body);
    line-height: var(--v3-lh-body);
}

/* Marquee viewport */
.erada-v3 .v3-clients__track {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

/* Two identical rows sit inline; each slides one full row-width left, so the
   second row lands exactly where the first began. Seamless loop. */
.erada-v3 .v3-clients__row {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 12px 0;
    animation: v3-marquee 20s linear infinite;
}

.erada-v3 .v3-clients__item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}

.erada-v3 .v3-clients__logo {
    display: block;
    height: 50px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.erada-v3 .v3-clients__item:hover .v3-clients__logo {
    transform: scale(1.05);
}

@keyframes v3-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

@media screen and (min-width: 768px) {
    .erada-v3 .v3-clients__logo { height: 60px; max-width: 150px; }
    .erada-v3 .v3-clients__item { padding: 0 var(--v3-space-6); }
}

@media screen and (min-width: 992px) {
    .erada-v3 .v3-clients { padding: var(--v3-space-9) 0; }
    .erada-v3 .v3-clients__logo { height: 80px; max-width: 160px; }
    .erada-v3 .v3-clients__item { padding: 0 40px; }
}

/* The production marquee animates unconditionally; honour the OS setting. */
@media (prefers-reduced-motion: reduce) {
    .erada-v3 .v3-clients__row { animation: none; }
    .erada-v3 .v3-clients__track { overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   Services — 2-up editorial card grid.

   Replaces the Webflow .pricing-overview block. Type is set in
   "bodoni-72-book" (the site's own Didone, declared at style.css:8473) and
   Montserrat, so nothing new is loaded. Local tokens below are warm tints
   derived from --secondary; they are scoped to .erada-v3 and leak nowhere.
   -------------------------------------------------------------------------- */

.erada-v3 {
    /* SURFACES — three, and only three.
         base    every light section
         raised  one step up: cards, and the closing CTA band
         dark    the Selected Work band
       Before this the page rendered four different creams: #f8f6ee for the
       sections, #f2f1ea for the hero (a Webflow gradient), #e5e0d5 for the
       CTA and #f1ece1 for cards - three of them unintentional. */
    --v3-surface:        #f8f6ee;
    --v3-surface-raised: #f1ece1;

    --v3-card-bg: var(--v3-surface-raised);
    --v3-line:    #e4ded1;   /* hairline border */
    --v3-muted:   #66644f;   /* index numerals - darkened from #8d8a76, which
                                measured 2.96:1 on --v3-card-bg (WCAG AA needs 4.5) */
}

.erada-v3 .v3-services {
    background-color: var(--v3-surface);
    padding: var(--v3-space-9) 0;
}

.erada-v3 .v3-services *,
.erada-v3 .v3-services *::before,
.erada-v3 .v3-services *::after { box-sizing: border-box; }

.erada-v3 .v3-services__inner {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--v3-space-6);
}

.erada-v3 .v3-eyebrow {
    margin: 0 0 var(--v3-space-4);
    text-align: center;
    /* letter-spacing adds a trailing gap after the last character, which
       shifts centred text visually left; indent by the same amount to
       optically re-centre it. */
    text-indent: 0.22em;
    font-family: var(--v3-font-ui);
    font-size: var(--v3-size-micro);
    font-weight: var(--v3-weight-micro);
    line-height: var(--v3-lh-micro);
    letter-spacing: var(--v3-tracking-micro);
    text-transform: uppercase;
    color: var(--primary, #595a20);
}

.erada-v3 .v3-services__title {
    margin: 0 0 var(--v3-space-7);
    text-align: center;
    font-family: var(--v3-font-display);
    font-weight: 400;
    font-size: var(--v3-size-display);
    line-height: var(--v3-lh-display);
    letter-spacing: var(--v3-tracking-display);
    color: var(--primary, #595a20);
}

.erada-v3 .v3-services__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--v3-space-5);
}

.erada-v3 .v3-card {
    display: flex;
    flex-direction: column;
    background-color: var(--v3-card-bg);
    border: 1px solid var(--v3-line);
    overflow: hidden;
}

.erada-v3 .v3-card__media {
    aspect-ratio: 7 / 3;
    overflow: hidden;
}

.erada-v3 .v3-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.erada-v3 .v3-card:hover .v3-card__img { transform: scale(1.03); }

.erada-v3 .v3-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: var(--v3-space-5) var(--v3-space-6) var(--v3-space-6);
}

.erada-v3 .v3-card__index {
    display: block;
    margin-bottom: var(--v3-space-3);
    font-family: var(--v3-font-ui);
    font-size: var(--v3-size-micro);
    font-weight: var(--v3-weight-micro);
    line-height: var(--v3-lh-micro);
    letter-spacing: var(--v3-tracking-micro);
    color: var(--v3-muted);
}

.erada-v3 .v3-card__title {
    margin: 0 0 12px;
    font-family: var(--v3-font-display);
    font-weight: 400;
    font-size: var(--v3-size-title);
    line-height: var(--v3-lh-title);
    color: var(--primary, #595a20);
}

.erada-v3 .v3-card__text {
    margin: 0 0 var(--v3-space-5);
    font-family: var(--v3-font-body);
    font-size: var(--v3-size-body);
    line-height: var(--v3-lh-body);
    color: var(--paragraph-color, #69694e);
}

/* margin-top:auto pins the link to the card foot, so both cards align
   even when their descriptions differ in length. */
.erada-v3 .v3-card__link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    /* min-height lifts the target from 18px to the 24px WCAG 2.5.8 floor */
    min-height: 24px;
    gap: var(--v3-space-2);
    font-family: var(--v3-font-ui);
    font-size: var(--v3-size-micro);
    font-weight: var(--v3-weight-micro);
    line-height: var(--v3-lh-micro);
    letter-spacing: var(--v3-tracking-micro);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--primary, #595a20);
}

.erada-v3 .v3-card__arrow { transition: transform 0.3s ease; }
.erada-v3 .v3-card__link:hover .v3-card__arrow { transform: translateX(4px); }

@media screen and (max-width: 767px) {
    .erada-v3 .v3-services { padding: var(--v3-space-8) 0; }
    .erada-v3 .v3-services__inner { padding: 0 var(--v3-space-5); }
    .erada-v3 .v3-services__title { margin-bottom: var(--v3-space-6); }
    .erada-v3 .v3-services__grid { grid-template-columns: 1fr; gap: var(--v3-space-5); }
    .erada-v3 .v3-card__body { padding: var(--v3-space-5); }
    /* one narrow column: 7/3 would read as a thin strip, so give it height back */
    .erada-v3 .v3-card__media { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
    .erada-v3 .v3-card__img,
    .erada-v3 .v3-card__arrow { transition: none; }
    .erada-v3 .v3-card:hover .v3-card__img { transform: none; }
}

/* --------------------------------------------------------------------------
   Selected Work — dark band, 2-up cards split image | text panel.

   The brand palette has no dark tone, so --v3-dark is introduced here. Every
   colour on top of it is the brand cream (--secondary) at varying alpha
   rather than a set of invented hexes, which keeps the band tied to the
   palette and guarantees the text tints stay in harmony.
   -------------------------------------------------------------------------- */

.erada-v3 {
    --v3-dark:       #3f4728;
    --v3-panel:      rgba(255, 255, 255, 0.07);
    --v3-on-dark:    var(--secondary, #f8f6ee);
    --v3-on-dark-70: rgba(248, 246, 238, 0.72);
    /* 0.61 not 0.52: at 0.52 the eyebrow, project category and meta all
       measured 3.75:1 on the dark band, under the 4.5 AA floor for body text */
    --v3-on-dark-50: rgba(248, 246, 238, 0.61);
    --v3-on-dark-15: rgba(248, 246, 238, 0.16);
}

.erada-v3 .v3-work {
    background-color: var(--v3-dark);
    padding: var(--v3-space-9) 0;
}

.erada-v3 .v3-work *,
.erada-v3 .v3-work *::before,
.erada-v3 .v3-work *::after { box-sizing: border-box; }

.erada-v3 .v3-work__inner {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--v3-space-6);
}

.erada-v3 .v3-eyebrow--ondark { color: var(--v3-on-dark-50); }

.erada-v3 .v3-work__title {
    margin: 0 0 var(--v3-space-7);
    text-align: center;
    font-family: var(--v3-font-display);
    font-weight: 400;
    font-size: var(--v3-size-display);
    line-height: var(--v3-lh-display);
    letter-spacing: var(--v3-tracking-display);
    color: var(--v3-on-dark);
}

/* Fallback layout: used until slick initialises, and permanently if JS or
   slick is unavailable. Once slick takes over it sets .slick-initialized and
   owns the layout itself. */
.erada-v3 .v3-work__slider { width: 100%; overflow: hidden; }

.erada-v3 .v3-work__grid:not(.slick-initialized) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--v3-space-5);
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--v3-space-6);
}

/* The card is a single <a> wrapping flow content, so there is exactly one
   link per project and no nested-anchor invalidity. */
.erada-v3 .v3-project {
    display: block;
    text-decoration: none;
    color: inherit;
}

.erada-v3 .v3-project__media {
    position: relative;             /* containing block for the overlay */
    aspect-ratio: 9 / 10;           /* portrait, as in the reference gallery */
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.12);
}

.erada-v3 .v3-project__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.erada-v3 .v3-project:hover .v3-project__img,
.erada-v3 .v3-project:focus-within .v3-project__img { transform: scale(1.06); }

/* --- Hover overlay -------------------------------------------------------
   Two layers move independently so the reveal has some craft to it: the
   scrim fades in first, then the text lifts into place just behind it.
   Driven by opacity/transform only, both of which the compositor can
   animate without triggering layout. */

.erada-v3 .v3-project__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: var(--v3-space-6);
    opacity: 0;
    background-image: linear-gradient(
        to top,
        rgba(24, 28, 14, 0.94) 0%,
        rgba(24, 28, 14, 0.82) 42%,
        rgba(24, 28, 14, 0.30) 74%,
        rgba(24, 28, 14, 0) 100%
    );
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.erada-v3 .v3-project__overlay-inner {
    width: 100%;
    display: flex;
    align-items: flex-end;      /* arrow sits on the last line of the copy */
    gap: var(--v3-space-4);
    transform: translateY(18px);
    opacity: 0;
    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.06s,
        opacity   0.4s ease 0.06s;
}

/* :focus-within keeps the card usable by keyboard, not just mouse */
.erada-v3 .v3-project:hover .v3-project__overlay,
.erada-v3 .v3-project:focus-visible .v3-project__overlay,
.erada-v3 .v3-project:focus-within .v3-project__overlay { opacity: 1; }

.erada-v3 .v3-project:hover .v3-project__overlay-inner,
.erada-v3 .v3-project:focus-visible .v3-project__overlay-inner,
.erada-v3 .v3-project:focus-within .v3-project__overlay-inner {
    transform: translateY(0);
    opacity: 1;
}

.erada-v3 .v3-project:focus-visible {
    outline: 2px solid var(--v3-on-dark);
    outline-offset: 3px;
}

/* Touch devices have no hover, so the details would be unreachable.
   Show them resting instead. */
@media (hover: none) {
    .erada-v3 .v3-project__overlay { opacity: 1; }
    .erada-v3 .v3-project__overlay-inner { transform: none; opacity: 1; }
}

.erada-v3 .v3-project__copy {
    flex: 1 1 auto;
    min-width: 0;
}

.erada-v3 .v3-project__cat {
    margin: 0 0 var(--v3-space-3);
    font-family: var(--v3-font-ui);
    font-size: var(--v3-size-micro);
    font-weight: var(--v3-weight-micro);
    line-height: var(--v3-lh-micro);
    letter-spacing: var(--v3-tracking-micro);
    text-transform: uppercase;
    color: var(--v3-on-dark-50);
}

.erada-v3 .v3-project__title {
    margin: 0 0 var(--v3-space-3);
    font-family: var(--v3-font-display);
    font-weight: 400;
    font-size: var(--v3-size-title);
    line-height: var(--v3-lh-title);
    color: var(--v3-on-dark);
}

.erada-v3 .v3-project__text {
    margin: 0 0 var(--v3-space-5);
    font-family: var(--v3-font-body);
    font-size: var(--v3-size-body);
    line-height: var(--v3-lh-body);
    color: var(--v3-on-dark-70);
}

/* margin-top:auto pins the meta strip to the panel foot so the rules line up
   across cards whose descriptions differ in length. */
.erada-v3 .v3-project__foot {
    margin-top: var(--v3-space-4);
    padding-top: var(--v3-space-3);
    border-top: 1px solid var(--v3-on-dark-15);
}

.erada-v3 .v3-project__meta {
    margin: 0;
    font-family: var(--v3-font-ui);
    font-size: var(--v3-size-micro);
    font-weight: var(--v3-weight-micro);
    line-height: var(--v3-lh-micro);
    letter-spacing: var(--v3-tracking-micro);
    text-transform: uppercase;
    color: var(--v3-on-dark-50);
}

/* One card per row: the split still works, it just gets the full width. */
@media screen and (max-width: 991px) {
    .erada-v3 .v3-work__grid { grid-template-columns: 1fr; gap: var(--v3-space-5); }
}

/* Too narrow to sit side by side - stack image over panel. */
@media screen and (max-width: 640px) {
    .erada-v3 .v3-work { padding: var(--v3-space-8) 0; }
    .erada-v3 .v3-work__inner { padding: 0 var(--v3-space-5); }
    .erada-v3 .v3-work__title { margin-bottom: var(--v3-space-6); }
    /* Taller than desktop's 9/10 on purpose: the card is narrower here, the
       copy wraps to more lines, and the overlay rests open on touch (no
       hover), so it needs the extra vertical room. The 16/9 that used to sit
       here dates from when mobile stacked image-over-panel; against the
       overlay layout it clipped the title. Desktop is untouched - this only
       overrides inside the 640px query. */
    .erada-v3 .v3-project__media { aspect-ratio: 3 / 4; }
    .erada-v3 .v3-project__overlay { padding: var(--v3-space-5); }
}

@media (prefers-reduced-motion: reduce) {
    .erada-v3 .v3-project__img { transition: none; }
    .erada-v3 .v3-project:hover .v3-project__img,
    .erada-v3 .v3-project:focus-within .v3-project__img { transform: none; }
    .erada-v3 .v3-project__overlay { transition: opacity 0.15s linear; }
    .erada-v3 .v3-project__overlay-inner { transform: none; transition: opacity 0.15s linear; }
}

/* --------------------------------------------------------------------------
   Closing CTA — replaces parts/cta.html for /v3 only.

   Rendered from parts/footer_v3.html, which sits in {% block footer %},
   outside the .erada-v3 wrapper in {% block content %} - hence that partial
   carries its own .erada-v3 wrapper so these rules and tokens apply.
   -------------------------------------------------------------------------- */

.erada-v3 {
    --v3-cta-bg: var(--v3-surface-raised);
}

.erada-v3 .v3-cta {
    background-color: var(--v3-cta-bg);
    padding: var(--v3-space-9) 0;
    text-align: center;
}

.erada-v3 .v3-cta *,
.erada-v3 .v3-cta *::before,
.erada-v3 .v3-cta *::after { box-sizing: border-box; }

.erada-v3 .v3-cta__inner {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 0 var(--v3-space-6);
}

.erada-v3 .v3-cta__rule {
    display: block;
    width: 46px;
    height: 2px;
    margin: 0 auto var(--v3-space-6);
    background-color: var(--v3-dark, #3f4728);
}

.erada-v3 .v3-cta__title {
    margin: 0 0 var(--v3-space-4);
    font-family: var(--v3-font-display);
    font-weight: 400;
    font-size: var(--v3-size-display);
    line-height: var(--v3-lh-display);
    letter-spacing: var(--v3-tracking-display);
    color: var(--v3-dark, #3f4728);
}

.erada-v3 .v3-cta__text {
    max-width: 30em;
    margin: 0 auto var(--v3-space-7);
    font-family: var(--v3-font-body);
    font-size: var(--v3-size-body);
    line-height: var(--v3-lh-body);
    /* Back on the palette token: it needed a darker one-off when this band
       was #e5e0d5 (4.28:1), but on the raised surface it measures 4.78:1. */
    color: var(--paragraph-color, #69694e);
}

.erada-v3 .v3-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--v3-space-3);
}

.erada-v3 .v3-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: var(--v3-space-3) var(--v3-space-5);
    border: 1px solid transparent;
    border-radius: 0;
    font-family: var(--v3-font-ui);
    font-size: var(--v3-size-micro);
    font-weight: var(--v3-weight-micro);
    /* explicit: without it the button inherits Webflow's body
       line-height: 28px and drifts off the micro role */
    line-height: var(--v3-lh-micro);
    letter-spacing: var(--v3-tracking-micro);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.erada-v3 .v3-btn--solid {
    background-color: var(--v3-dark, #3f4728);
    border-color: var(--v3-dark, #3f4728);
    color: var(--secondary, #f8f6ee);
}

.erada-v3 .v3-btn--solid:hover {
    background-color: #333a1f;
    border-color: #333a1f;
    color: var(--secondary, #f8f6ee);
}

.erada-v3 .v3-btn--ghost {
    background-color: transparent;
    border-color: rgba(63, 71, 40, 0.35);
    color: var(--v3-dark, #3f4728);
}

.erada-v3 .v3-btn--ghost:hover {
    background-color: rgba(63, 71, 40, 0.06);
    border-color: rgba(63, 71, 40, 0.6);
}

/* Keyboard focus must stay visible - these sit on a mid-tone background. */
.erada-v3 .v3-btn:focus-visible {
    outline: 2px solid var(--v3-dark, #3f4728);
    outline-offset: 3px;
}

@media screen and (max-width: 640px) {
    .erada-v3 .v3-cta { padding: var(--v3-space-8) 0; }
    .erada-v3 .v3-cta__rule { margin-bottom: var(--v3-space-5); }
    .erada-v3 .v3-cta__text { margin-bottom: var(--v3-space-6); }
    .erada-v3 .v3-cta__actions { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
    .erada-v3 .v3-btn { transition: none; }
}

/* --------------------------------------------------------------------------
   Shared leaf texture.

   Same asset and same technique the production site uses on
   .section.cc-cta.contact-cta (style.css:2265) and .pricing-overview
   (style.css:3803): a flat colour veil layered over the leaf PNG, with
   background-attachment:fixed so the pattern stays put while the page
   scrolls and reads as one continuous surface across sections.

   Each section keeps its own tone - the veil colour is what differs, so the
   cream bands stay cream, Selected Work stays dark and the CTA stays greige.
   The background-color set on each section earlier still sits underneath as
   the fallback if the remote PNG fails to load.
   -------------------------------------------------------------------------- */

.erada-v3 {
    /* Self-hosted copy of the Webflow leaf texture. Path is relative to this
       stylesheet (static/rp_erada_fe/css/), so it survives collectstatic. */
    --v3-texture: url("../images/webflow/design1.png");
}

.erada-v3 .v3-clients,
.erada-v3 .v3-services,
.erada-v3 .v3-work,
.erada-v3 .v3-cta {
    background-position: 0 0, 50%;
    background-size: auto, 100%;
    background-repeat: repeat, no-repeat;
    background-attachment: scroll, fixed;
}

/* Light cream bands - veil matches production's .contact-cta alpha. */
.erada-v3 .v3-clients {
    background-image: linear-gradient(#f8f6eee0, #f8f6eee0), var(--v3-texture);
}

.erada-v3 .v3-services {
    background-image: linear-gradient(#f8f6eee0, #f8f6eee0), var(--v3-texture);
}

/* Dark band: a heavy olive veil keeps the section dark while letting the
   pattern read as a faint lighter tracery rather than washing it out. */
.erada-v3 .v3-work {
    background-image: linear-gradient(rgba(63, 71, 40, 0.93), rgba(63, 71, 40, 0.93)), var(--v3-texture);
}

/* Greige CTA band. */
.erada-v3 .v3-cta {
    background-image: linear-gradient(rgba(241, 236, 225, 0.90), rgba(241, 236, 225, 0.90)), var(--v3-texture);
}

/* iOS Safari ignores background-attachment:fixed and can repaint it badly on
   scroll; production has the same behaviour, so match it rather than diverge. */
@media screen and (max-width: 767px) {
    .erada-v3 .v3-clients,
    .erada-v3 .v3-services,
    .erada-v3 .v3-work,
    .erada-v3 .v3-cta {
        background-attachment: scroll, scroll;
    }
}

/* --------------------------------------------------------------------------
   Selected Work carousel (slick).

   slick and jQuery already ship on every page from parts/foot.html, so this
   adds no dependency. slick wraps each child in .slick-slide, so the gap is
   made with slide margins and cancelled on .slick-list, and centerMode lets
   the neighbouring cards peek in at the edges.
   -------------------------------------------------------------------------- */

.erada-v3 .v3-work__grid.slick-initialized { display: block; }

/* variableWidth: each slide is sized here, not by slick.

   min() rather than a breakpoint: the cap sets the slide width on wide
   viewports, and 84vw takes over once the viewport is narrow enough that the
   cap would not fit. Because the two meet exactly where they cross, the width
   is continuous - previously a fixed 380px sat next to an 84vw rule at the
   700px breakpoint, so a single pixel of viewport swung the slide 208px. */
.erada-v3 .v3-work .slick-slide {
    width: min(432px, 84vw);
    margin: 0 var(--v3-space-3);
    height: auto;
}

/* slick sets the slide track to flex; stretch so every card matches height */
.erada-v3 .v3-work .slick-track { display: flex; align-items: stretch; }
.erada-v3 .v3-work .slick-slide > div { height: 100%; }
.erada-v3 .v3-work .slick-slide .v3-project { height: 100%; }

/* No dimming: with variableWidth the "active" set is uneven, so fading
   non-active slides made a fully-visible card look broken rather than
   de-emphasised. The reference gallery doesn't dim either. */

/* Dash pagination, matching the reference's bars rather than round dots. */
.erada-v3 .v3-work .slick-dots {
    display: flex;
    justify-content: center;
    gap: 0;                       /* the buttons' own padding is the gap now */
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}

.erada-v3 .v3-work .slick-dots li { line-height: 0; }

/* The visible bar stays 30x3, but the button is padded out to a 44x44 hit
   area and the bar painted with background-clip: content-box. Without this
   the tap target was 30x3, far under the 24x24 WCAG 2.5.8 minimum. */
.erada-v3 .v3-work .slick-dots li button {
    display: block;
    box-sizing: content-box;
    width: 30px;
    height: 4px;
    /* 20 + 4 + 20 = 44px tall, 7 + 30 + 7 = 44px wide: this pair is set by
       the 44px target, not the spacing scale */
    padding: 20px 7px;
    background-clip: content-box;
    border: 0;
    border-radius: 0;
    background-color: var(--v3-on-dark-15);
    font-size: 0;
    line-height: 0;
    color: transparent;
    cursor: pointer;
    transition: background-color 0.3s ease, width 0.3s ease;
}

.erada-v3 .v3-work .slick-dots li button:hover { background-color: var(--v3-on-dark-50); }

.erada-v3 .v3-work .slick-dots li.slick-active button {
    width: 46px;
    background-color: var(--v3-on-dark);
}

.erada-v3 .v3-work .slick-dots li button:focus-visible {
    outline: 2px solid var(--v3-on-dark);
    outline-offset: 4px;
}

@media screen and (max-width: 1100px) {
    .erada-v3 .v3-work .slick-slide { width: min(380px, 84vw); }
}

@media screen and (max-width: 700px) {
    .erada-v3 .v3-work .slick-slide { margin: 0 8px; }
    .erada-v3 .v3-work .slick-dots { margin-top: 28px; gap: 8px; }
    .erada-v3 .v3-work .slick-dots li button { width: 22px; }
    .erada-v3 .v3-work .slick-dots li.slick-active button { width: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    .erada-v3 .v3-work .slick-dots li button { transition: none; }
}

/* --------------------------------------------------------------------------
   "Opens the project" affordance.

   Sits in the overlay's flex row rather than floating over the image. Centred
   on the card it collided optically with the copy stack below it; anchored to
   the last line it balances the left-aligned text instead. In normal flow the
   centring transform is gone, so `scale` is free for the entrance.
   -------------------------------------------------------------------------- */

.erada-v3 .v3-project__open {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 2px;               /* optical nudge, not a scale step */
    border: 1px solid var(--v3-on-dark, #f8f6ee);
    border-radius: 50%;
    background-color: var(--v3-on-dark, #f8f6ee);
    color: #232a12;
    opacity: 0;
    transform: scale(0.8);
    transition:
        opacity 0.3s ease 0.1s,
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
    pointer-events: none;             /* the whole card is the link */
}

.erada-v3 .v3-project__open svg {
    display: block;
    width: 18px;
    height: 18px;
}

.erada-v3 .v3-project:hover .v3-project__open,
.erada-v3 .v3-project:focus-visible .v3-project__open,
.erada-v3 .v3-project:focus-within .v3-project__open {
    opacity: 1;
    transform: scale(1);
}

@media (hover: none) {
    .erada-v3 .v3-project__open { opacity: 1; transform: scale(1); }
}

@media screen and (max-width: 700px) {
    .erada-v3 .v3-project__overlay-inner { gap: 12px; }
    .erada-v3 .v3-project__open { width: 40px; height: 40px; }
    .erada-v3 .v3-project__open svg { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .erada-v3 .v3-project__open { transition: opacity 0.15s linear; transform: scale(1); }
}

/* --------------------------------------------------------------------------
   Hero headline — brought into the display role.

   The hero is verbatim production markup, so Webflow's .heading-jumbo still
   supplies its layout (centring, flex, width). Only the type is overridden
   here: it was a fixed 52px in uppercase while every section headline below
   it is sentence-case and scales 38 -> 68px, which made the hero read as a
   different design from the rest of the page.

   Scoped to .erada-v3 and applied via an extra class, so the production
   homepage's own hero is completely unaffected.
   -------------------------------------------------------------------------- */

/* !important is required, not sloppiness: style.css:8613 declares
   `.heading-jumbo { font-size: 3.25rem !important }`, which no amount of
   specificity can beat. Everything else here wins on specificity alone. */
.erada-v3 .v3-hero__title {
    font-size: var(--v3-size-display) !important;
    line-height: var(--v3-lh-display);
    letter-spacing: var(--v3-tracking-display);
    text-transform: none;
}

/* Hero tagline: Gothic A1 at 20px/34px from Webflow's .paragraph-bigger.
   Matched to the body role so the hero uses the same prose voice as the
   rest of the page. */
/* Matches the specificity of style.css:8355
   (.paragraph-bigger.cc-bigger-white-light.hero-caption) and wins on order,
   since v3.css is loaded after style.css. */
.erada-v3 .paragraph-bigger.cc-bigger-white-light.hero-caption {
    font-family: var(--v3-font-body);
    font-size: var(--v3-size-body);
    line-height: var(--v3-lh-body);
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   Hero band surface.

   Webflow paints .cc-store-home-wrap with two stacked translucent cream
   gradients that composite to #f2f1ea - close to the page cream but not
   equal, which left a faint seam where the hero band meets the clients
   section. Flattened to the base surface so every light band matches.
   Scoped to .erada-v3, so the production homepage keeps its own treatment.
   -------------------------------------------------------------------------- */

.erada-v3 .section.cc-store-home-wrap {
    background-image: none;
    background-color: var(--v3-surface);
}

/* --------------------------------------------------------------------------
   Collapsing adjacent same-surface sections.

   Every section carries its own 96px vertical padding, so any two in a row
   put 96 + 96 = 192px between them. Where the surface colour changes
   (services -> Selected Work, Selected Work -> CTA) that boundary is visible
   and the 192 reads correctly as breathing room either side of the edge.

   Where the surface is identical there is no edge, so the two paddings merge
   into a single void at twice the intended rhythm. Clients and Services are
   both --v3-surface, which left a 192px hole between the logo marquee and
   "WHAT WE DO". Collapsing the following section's top padding restores the
   96px rhythm.
   -------------------------------------------------------------------------- */

.erada-v3 .v3-clients + .v3-services {
    padding-top: 0;
}

/* Clients had no mobile override, so it stayed at 96 while every other
   section dropped to 64 below 640px. */
@media screen and (max-width: 640px) {
    .erada-v3 .v3-clients { padding: var(--v3-space-8) 0; }
}