/* ==========================================================================
   Homepage (/)

   Loaded after v3.css and scoped to .erada-home; every new class is hm-.
   Forked from fitout.css on purpose: the homepage and the commercial-fit-out
   page share a section structure but must not share a stylesheet, so a change
   to one page can never move the other. Keep it that way - do not load
   fitout.css on the homepage, and do not load this file anywhere else.

   Every type, spacing and surface value resolves to a v3 token - this file
   adds components, never a second design system. See CLAUDE.md.

   Classes that still read fo- here (.fo-stats, .fo-stat*, .fo-caret,
   .fo-sr-only) are defined in v3.css, not in this file.
   ========================================================================== */

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

.erada-home h1,
.erada-home h2,
.erada-home h3,
.erada-home p,
.erada-home ul,
.erada-home ol,
.erada-home li,
.erada-home figure,
.erada-home blockquote { margin: 0; padding: 0; }

.erada-home ul,
.erada-home ol { list-style: none; }

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

/* elevation ---------------------------------------------------------------
   Two resting levels and one hover level, tinted toward the brand olive
   rather than neutral grey: a grey shadow over warm cream (#f8f6ee) reads as
   dirt rather than depth. Two stacked layers per level - a tight one for the
   contact edge, a wide soft one for the cast - which is what separates a real
   elevation from a grey halo.

   Dark sections get their own: the testimonial cards sit on --v3-dark at
   only a few units lighter, so a tinted shadow is invisible there and they
   need a true black cast plus a hairline to define the edge. */
.erada-home {
    --hm-elev-1: 0 1px 2px rgba(47, 51, 32, 0.05),
                 0 2px 8px rgba(47, 51, 32, 0.06);
    --hm-elev-2: 0 2px 4px rgba(47, 51, 32, 0.06),
                 0 14px 30px rgba(47, 51, 32, 0.13);
    --hm-elev-dark-1: 0 2px 6px rgba(0, 0, 0, 0.20),
                      0 10px 24px rgba(0, 0, 0, 0.22);
    --hm-elev-dark-2: 0 4px 10px rgba(0, 0, 0, 0.26),
                      0 18px 40px rgba(0, 0, 0, 0.34);

    /* One easing for every card motion, so lift, shadow and image scale all
       arrive together instead of drifting apart. */
    --hm-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* Corner radius. Two steps, not one: a single value applied to both a
       360px card and a 42px input reads as two different radii to the eye,
       because what registers is the arc relative to the edge it sits on.
       Controls take the small step, surfaces the large one, and the pair
       reads as one system.

       v3.css sets border-radius:0 on .v3-btn and the form fields, so the
       overrides below are scoped to .erada-home - /v3 keeps its square
       corners. */
    --hm-radius-sm: 8px;    /* inputs, buttons, chips */
    --hm-radius:    14px;   /* cards, panels, media */
}

/* shared container + section heading ------------------------------------- */

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

.erada-home .hm-inner--narrow { max-width: 820px; }

.erada-home .hm-h2 {
    margin: var(--v3-space-4) 0 var(--v3-space-7);
    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-home .hm-h2--ondark { color: var(--v3-on-dark); }

/* nav ----------------------------------------------------------------------
   The homepage keeps the site's own Webflow nav (parts/nav.html): 5rem tall,
   position:relative, 68% cream with a blur (style.css .uui-navbar06_component).

   The hero starts BELOW it rather than being pulled up underneath it the way
   the fit-out hero rides under its own transparent bar. Over the scrimmed
   photo that translucent cream composites to a mid grey, and the olive nav
   links measured about 3.4:1 on it - under the 4.5:1 floor. Over the page
   cream they keep their normal contrast.

   The nav is not sticky, so in-page anchors only need a little air. */
.erada-home section[id] { scroll-margin-top: var(--v3-space-5); }

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

.erada-home .hm-hero {
    position: relative;
    padding: var(--v3-space-9) 0;
    overflow: hidden;
    /* Holds the section dark from first paint, so the light hero text is
       never briefly rendered on cream while the photo is still in flight. */
    background-color: #21260f;
}

.erada-home .hm-hero__bg {
    position: absolute;
    inset: 0;
}

.erada-home .hm-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Anchors the composition on the upper part of the frame, which is where
       this render's ceiling detail sits; the default 50% centred it on the
       floor once the section got short. */
    object-position: 50% 38%;
}

/* Scrim.

   Two stacked gradients, and it lives on .hm-hero__bg rather than on the
   section, so it paints over the photo but under .hm-hero__inner without
   anyone having to reason about negative z-index.

   The horizontal pass is weighted left: that is where the headline and the
   paragraph sit, and long-form reading needs the deepest floor. It stays at
   0.62 on the right so the photo still reads behind the form panel instead
   of being flattened to a colour field.

   These values are not taste - they are what holds body text at 4.5:1 over
   the BRIGHTEST pixel of this photo, not its average. A scrim tuned to the
   average fails wherever a highlight lands under the text. */
.erada-home .hm-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right,
            rgba(20, 23, 12, 0.90) 0%,
            rgba(20, 23, 12, 0.82) 46%,
            rgba(20, 23, 12, 0.62) 100%),
        linear-gradient(rgba(20, 23, 12, 0.34), rgba(20, 23, 12, 0.34));
}

.erada-home .hm-hero__inner {
    position: relative;
    z-index: 1;
}

.erada-home .hm-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--v3-space-8);
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--v3-space-6);
}

.erada-home .hm-hero__eyebrow { text-align: left; text-indent: 0; }

/* The eyebrow takes the -70 on-dark step, like the lead paragraph below it,
   rather than the -50 the eyebrow--ondark modifier sets. On the square mobile
   crop the bright ceiling arc sits right behind it, and sampled against the
   brightest pixel there it measured 4.27:1 at -50 - under the 4.5:1 floor for
   11px text. At -70 it clears with room to spare. */
.erada-home .hm-hero__eyebrow.v3-eyebrow--ondark { color: var(--v3-on-dark-70); }

.erada-home .hm-hero__title {
    margin: var(--v3-space-4) 0 var(--v3-space-5);
    color: var(--v3-on-dark);
    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);
}

.erada-home .hm-hero__lead {
    max-width: 34em;
    margin-bottom: var(--v3-space-7);
    font-family: var(--v3-font-body);
    font-size: var(--v3-size-body);
    line-height: var(--v3-lh-body);
    color: var(--v3-on-dark-70);
}

/* The ghost button's olive border and text vanish against the scrim; on-dark
   variant, scoped to the hero so the token version is untouched elsewhere. */
.erada-home .hm-hero__ghost {
    border-color: rgba(248, 246, 238, 0.45);
    color: var(--v3-on-dark);
}

.erada-home .hm-hero__ghost:hover {
    background-color: rgba(248, 246, 238, 0.10);
    border-color: var(--v3-on-dark);
}

.erada-home .hm-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v3-space-3);
    margin-bottom: var(--v3-space-7);
}

.erada-home .hm-sectors {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v3-space-5);
    padding-top: var(--v3-space-5);
    border-top: 1px solid var(--v3-on-dark-15);
    font-family: var(--v3-font-ui);
    font-size: var(--v3-size-micro);
    font-weight: var(--v3-weight-micro);
    letter-spacing: var(--v3-tracking-micro);
    text-transform: uppercase;
    color: var(--v3-on-dark-70);
}

/* Hero lead panel --------------------------------------------------------
   The right-hand column of the hero: a light panel on the scrimmed photo.
   Light rather than olive because it is the page's primary conversion action
   and has to be the brightest object in the hero - an olive panel on a dark
   photo reads as part of the scrim.

   The field skin is .hm-form, shared with the "Let's Discuss Your Project"
   panel; the light surface is the .hm-form--light modifier below. */

.erada-home .hm-hero__form {
    align-self: start;
    border-radius: var(--hm-radius);
    padding: var(--v3-space-6);
    /* Opaque, not translucent: the panel has to stay readable regardless of
       what the photo is doing behind it. */
    background-color: var(--v3-dark);
    border: 1px solid rgba(248, 246, 238, 0.14);
    box-shadow: var(--hm-elev-dark-2);
}

.erada-home .hm-hero__form--light {
    background-color: var(--v3-surface);
    border-color: rgba(255, 255, 255, 0.55);
    /* Still the dark elevation: the panel sits on a photo, so the cast has to
       be a real shadow, not the tinted one used over cream. */
    box-shadow: var(--hm-elev-dark-2);
}

.erada-home .hm-hero__form--light .hm-hero__form-title { color: var(--primary, #595a20); }
.erada-home .hm-hero__form--light .hm-hero__form-sub { color: var(--paragraph-color, #69694e); }

.erada-home .hm-hero__form-head { margin-bottom: var(--v3-space-4); }

.erada-home .hm-hero__form-title {
    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-home .hm-hero__form-sub {
    margin-top: var(--v3-space-2);
    font-family: var(--v3-font-body);
    font-size: var(--v3-size-body);
    line-height: var(--v3-lh-body);
    color: var(--v3-on-dark-70);
}

/* Hero panel: compact -----------------------------------------------------
   The panel sits beside the hero copy and has to stay near the fold, so it
   runs tighter than the "Let's Discuss Your Project" panel, which has a
   whole section to itself.

   The field labels are visually hidden here rather than deleted:
   form_body.html renders every control with placeholder=field.label, so the
   placeholder already carries the identical string, and the <label> stays in
   the DOM correctly associated for assistive tech. That is ~24px per field
   and the single largest saving in the panel.

   Trade-off, deliberately taken to hit the reference height: a placeholder
   disappears once the visitor starts typing, so the persistent visual label
   is lost for sighted users. The section panel keeps its labels visible, so
   the long-form panel is unaffected. */

.erada-home .hm-hero__form .hm-form .form-group > label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* "What do you need?" is the exception: chips have no placeholder to fall
   back on, so its label has to stay on screen. */
.erada-home .hm-hero__form .hm-form .form-group:has(> div.hm-checkboxes) > label {
    position: static;
    width: auto;
    height: auto;
    margin-bottom: var(--v3-space-2);
    overflow: visible;
    clip-path: none;
}

/* Email and message are both optional in both panels, shown as italic
   "(optional)". The accent is a label ::after so a placeholder (which can't
   style part of its text) isn't needed; text-transform:none keeps it lower
   case under the section panel's uppercased labels. Targeted by the id
   suffix each field carries in both panels (the hero prefixes ids with
   "hero"). Unlike the fit-out page, the homepage hero keeps its Message box,
   so both fields get the overlay treatment below. */
.erada-home .hm-form label[for$="getInTouchEmail"]::after,
.erada-home .hm-form label[for$="getInTouchMessage"]::after {
    content: " (optional)";
    font-style: italic;
    text-transform: none;
    letter-spacing: normal;
}

/* In the hero the labels are visually hidden and the placeholder carries the
   text - but a placeholder can't be part-italic, so the email and message
   labels are laid over their controls in the placeholder's place and the
   real placeholders are made transparent. */
.erada-home .hm-hero__form .hm-form .form-group:has(> input[id$="getInTouchEmail"]),
.erada-home .hm-hero__form .hm-form .form-group:has(> textarea[id$="getInTouchMessage"]) {
    position: relative;
}

.erada-home .hm-hero__form .hm-form .form-group:has(> input[id$="getInTouchEmail"]) > label,
.erada-home .hm-hero__form .hm-form .form-group:has(> textarea[id$="getInTouchMessage"]) > label {
    top: calc(var(--v3-space-2) + 1px);     /* input padding + border */
    left: calc(var(--v3-space-4) + 1px);
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    pointer-events: none;
    font-family: var(--v3-font-body);
    font-size: var(--v3-size-body);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: #6b6f5c;                          /* = the light placeholder colour */
}

.erada-home .hm-hero__form .hm-form input[id$="getInTouchEmail"]::placeholder,
.erada-home .hm-hero__form .hm-form textarea[id$="getInTouchMessage"]::placeholder {
    color: transparent;
}

.erada-home .hm-hero__form .hm-form .form-group:has(> input[id$="getInTouchEmail"]:not(:placeholder-shown)) > label,
.erada-home .hm-hero__form .hm-form .form-group:has(> textarea[id$="getInTouchMessage"]:not(:placeholder-shown)) > label {
    display: none;
}

/* The hero's Message box. Three lines is enough to start a brief and keeps
   the panel from outgrowing the copy beside it; the visitor can still drag
   it taller. 88px is the same height the section panel's wide box uses. */
.erada-home .hm-hero__form .hm-form textarea { height: 88px; }

/* The chips are the last block of height left. 44px is the target where a
   finger is doing the pointing; with a mouse the 24x24 WCAG 2.5.8 floor is
   what applies, so desktop takes the tighter row and touch keeps 44. */
@media (hover: hover) and (pointer: fine) {
    .erada-home .hm-hero__form .hm-form div.hm-checkboxes label { min-height: 36px; }
}

/* 02 trust ---------------------------------------------------------------- */

.erada-home .hm-trust {
    background-color: var(--v3-surface);
    /* Full padding both ends: it follows the dark photo hero, so the surface
       changes at that boundary and the rhythm is not shared with it. */
    padding: var(--v3-space-9) 0;
    text-align: center;
}

/* Client marquees. The track, row, item and logo rules come from v3.css
   (.erada-v3 .v3-clients__*); this places the pair and sets what differs.

   The mask fades logos in and out at the viewport edges instead of cutting
   them off at the screen border. */
.erada-home .hm-trust__marquees {
    display: flex;
    flex-direction: column;
    gap: var(--v3-space-4);
    margin: var(--v3-space-7) 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

/* text-align:left undoes .hm-trust's centring - the rows are inline-flex, and
   centring them would shift the loop off its seam. */
.erada-home .hm-trust__marquee {
    text-align: left;
}

/* Bottom track runs left-to-right. Reversing the same keyframes starts the
   pair at -100% and ends at 0, which is still one row-width: seamless. */
.erada-home .hm-trust__marquee--reverse .v3-clients__row {
    animation-direction: reverse;
}

/* Pausing on hover lets a visitor stop the motion to read a logo
   (WCAG 2.2.2). */
.erada-home .hm-trust__marquee:hover .v3-clients__row {
    animation-play-state: paused;
}

/* Larger than /v3's 50 / 60 / 80. max-width grows too, because wide
   wordmarks were capped by the width before they reached the height. */
.erada-home .hm-trust__marquee .v3-clients__logo {
    height: 60px;
    max-width: 150px;
}

@media screen and (min-width: 768px) {
    .erada-home .hm-trust__marquee .v3-clients__logo { height: 76px; max-width: 190px; }
}

@media screen and (min-width: 992px) {
    .erada-home .hm-trust__marquee .v3-clients__logo { height: 96px; max-width: 210px; }
}

/* Trust / stats strip (.fo-stats, .fo-stat*, the typewriter caret, .fo-caret
   and .fo-sr-only) lives in v3.css, scoped to .erada-v3 - which this page's
   wrapper also carries. The markup is the shared parts/trust_stats.html and
   the typewriter is initStatTypewriter in v3.js. */

/* 03 sector picker -------------------------------------------------------- */

.erada-home .hm-sectorpick {
    background-color: var(--v3-surface-raised);
    padding: var(--v3-space-9) 0;
    text-align: center;
}

/* Pre-init and no-JS layout. Once slick runs it sets .slick-initialized and
   owns the layout itself - same arrangement v3.css uses for Selected Work. */
.erada-home .hm-sectorpick__grid:not(.slick-initialized) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 340px));
    justify-content: center;
    gap: var(--v3-space-6);
    text-align: left;
}

.erada-home .hm-sectorpick__grid { text-align: left; }

/* --- as a carousel ------------------------------------------------------
   slick sets the track to flex; stretching keeps every card the same height
   whatever its copy does. The gap is made with slide padding rather than a
   margin, so the scaled-up centre card has room to grow into instead of
   overlapping its neighbours. */
/* align-items: flex-start, NOT stretch.
   Stretch gave every slide a definite height, and a definite height on the
   card - which is itself a flex column - stopped the media's aspect-ratio
   resolving: the image rendered 586px tall instead of 450px and pushed the
   title and the pill out of the card, where .slick-list clipped them. Letting
   each card size to its own content fixes it, and since every card has the
   same structure they come out level anyway. */
/* The padding is headroom, not decoration. .slick-list clips to its box, and
   the centre card sits ~20px higher than its neighbours (scaling a card DOWN
   moves its top down), lifts another 6px on hover, and casts --hm-elev-2
   upward. At 24px the card cleared but its shadow was grazing the edge.
   40/48 leaves the pop, the lift and the cast all inside the box. */
.erada-home .hm-sectorpick .slick-track {
    display: flex;
    align-items: flex-start;
    padding: var(--v3-space-7) 0 var(--v3-space-7);
}

.erada-home .hm-sectorpick .slick-slide {
    height: auto;
    padding: 0 var(--v3-space-3);
}

/* The pop. Every card sits back a little; the centre one comes forward and
   takes the deeper shadow. transform and opacity only, so a row of cards
   moving costs no layout. */
.erada-home .hm-sectorpick .slick-slide .hm-sectorcard,
.erada-home .hm-sectorpick .slick-slide.hm-sectorcard {
    transform: scale(0.93);
    opacity: 0.72;
    transition: transform 0.55s var(--hm-ease),
                opacity 0.55s var(--hm-ease),
                box-shadow 0.55s var(--hm-ease);
}

.erada-home .hm-sectorpick .slick-center .hm-sectorcard,
.erada-home .hm-sectorpick .slick-center.hm-sectorcard {
    transform: scale(1);
    opacity: 1;
    box-shadow: var(--hm-elev-2);
}

/* Hover has to beat the centre rule, which is (0,4,0). */
.erada-home .hm-sectorpick .slick-slide .hm-sectorcard:hover,
.erada-home .hm-sectorpick .slick-slide .hm-sectorcard:focus-within,
.erada-home .hm-sectorpick .slick-slide.hm-sectorcard:hover,
.erada-home .hm-sectorpick .slick-slide.hm-sectorcard:focus-within {
    transform: scale(1) translateY(-6px);
    opacity: 1;
    box-shadow: var(--hm-elev-2);
}

/* Dash pagination, matching the Selected Work carousel. */
.erada-home .hm-sectorpick .slick-dots {
    display: flex;
    justify-content: center;
    gap: 0;
    list-style: none;
    margin: var(--v3-space-4) 0 0;
    padding: 0;
}

.erada-home .hm-sectorpick .slick-dots li { line-height: 0; }

.erada-home .hm-sectorpick .slick-dots li button {
    display: block;
    box-sizing: content-box;
    width: 30px;
    height: 4px;
    padding: 20px 7px;               /* 44x44 hit area, WCAG 2.5.8 */
    background-clip: content-box;
    border: 0;
    background-color: var(--v3-line, #e4ded1);
    font-size: 0;
    color: transparent;
    cursor: pointer;
    transition: background-color 0.3s ease, width 0.3s ease;
}

.erada-home .hm-sectorpick .slick-dots li button:hover { background-color: var(--v3-muted, #66644f); }

.erada-home .hm-sectorpick .slick-dots li.slick-active button {
    width: 46px;
    background-color: var(--primary, #595a20);
}

.erada-home .hm-sectorpick .slick-dots li button:focus-visible {
    outline: 2px solid var(--primary, #595a20);
    outline-offset: 4px;
}

/* Seven sectors here (Residential is the extra one) means seven 44px dots -
   308px - which no longer fits the 272px container at 320px and pushed the
   page 2px wider than the screen. Below 360px the side padding drops to the
   4px step: each hit area becomes 38x44, still well above the 24x24 WCAG
   2.5.8 floor, and the visible 30x4 bar is unchanged. */
@media screen and (max-width: 359px) {
    .erada-home .hm-sectorpick .slick-dots li button { padding: 20px var(--v3-space-1); }
}

@media (prefers-reduced-motion: reduce) {
    .erada-home .hm-sectorpick .slick-slide .hm-sectorcard,
    .erada-home .hm-sectorpick .slick-slide.hm-sectorcard {
        transition: none;
        transform: none;
        opacity: 1;
    }
}

/* The image is inset inside the card rather than bleeding to its edge, which
   is what gives the reference its "photo mounted on a card" read. That means
   padding on the card and a second, smaller radius on the media. */
.erada-home .hm-sectorcard {
    display: block;
    padding: var(--v3-space-4);
    border-radius: 22px;
    background-color: var(--v3-surface);
    border: 1px solid var(--v3-line, #e4ded1);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--hm-elev-1);
    transition: transform 0.35s var(--hm-ease),
                box-shadow 0.35s var(--hm-ease),
                border-color 0.35s var(--hm-ease);
}

/* :focus-within, not :focus-visible - the card is an <article> now and never
   takes focus itself; what focuses is the CTA inside it, and the card should
   lift for a keyboard user exactly as it does for a mouse. */
.erada-home .hm-sectorcard:hover,
.erada-home .hm-sectorcard:focus-within {
    transform: translateY(-6px);
    box-shadow: var(--hm-elev-2);
    border-color: transparent;
}

/* Card body is a column so the CTA can be pinned to the bottom edge; without
   it a two-line sub-heading pushes the button out of line with its
   neighbours. */
/* position:relative scopes the Get Quote ::after overlay to this card, and
   gives the cycling spotlight below something to raise z-index against. */
.erada-home .hm-sectorcard { position: relative; display: flex; flex-direction: column; }
.erada-home .hm-sectorcard__media { flex: 0 0 auto; }

/* --- Get Quote ----------------------------------------------------------
   The only anchor in the card. ::after stretches it over the whole card, so
   the card is clickable everywhere but there is still exactly one link in the
   accessibility tree. position:static on the link itself is what lets the
   pseudo resolve against .hm-sectorcard's positioning context. */

/* A pill, matching the reference's "Follow +". position:static is what lets
   its stretched ::after resolve against .hm-sectorcard. */
.erada-home .hm-sectorcard__cta {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: var(--v3-space-2);
    min-height: 44px;
    padding: 0 var(--v3-space-5);
    border: 1px solid var(--v3-line, #e4ded1);
    border-radius: 999px;
    background-color: var(--v3-surface-raised);
    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);
    transition: background-color 0.3s var(--hm-ease), color 0.3s var(--hm-ease),
                border-color 0.3s var(--hm-ease);
}

.erada-home .hm-sectorcard:hover .hm-sectorcard__cta {
    border-color: var(--v3-dark);
    background-color: var(--v3-dark);
    color: var(--v3-on-dark);
}

.erada-home .hm-sectorcard__cta::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 22px;
}

.erada-home .hm-sectorcard__cta svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s var(--hm-ease);
}

.erada-home .hm-sectorcard:hover .hm-sectorcard__cta svg { transform: translateX(4px); }

/* The outline goes on the card, because the link's own box is only the words
   "Get Quote" while its clickable area is the whole card - outlining the text
   alone would point at the wrong thing. */
.erada-home .hm-sectorcard:focus-within {
    outline: 2px solid var(--primary, #595a20);
    outline-offset: 3px;
}

.erada-home .hm-sectorcard__cta:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
    .erada-home .hm-sectorcard__cta svg,
    .erada-home .hm-sectorcard:hover .hm-sectorcard__cta svg {
        transition: none;
        transform: none;
    }
}

.erada-home .hm-sectorcard__media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 16px;
}

.erada-home .hm-sectorcard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.erada-home .hm-sectorcard:hover .hm-sectorcard__media img { transform: scale(1.05); }

.erada-home .hm-sectorcard__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: var(--v3-space-5) var(--v3-space-2) var(--v3-space-2);
}

.erada-home .hm-sectorcard__sub { margin-bottom: auto; }

/* Bottom row, as in the reference. The numeric meta on its left is
   deliberately not reproduced: there is no per-sector project count in the
   data, and inventing one on a page that already carries placeholder figures
   would be one more number nobody can stand behind. */
.erada-home .hm-sectorcard__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--v3-space-3);
    margin-top: var(--v3-space-5);
}

.erada-home .hm-sectorcard__title {
    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-home .hm-sectorcard__sub {
    margin-top: var(--v3-space-2);
    font-family: var(--v3-font-ui);
    font-size: var(--v3-size-micro);
    font-weight: var(--v3-weight-micro);
    letter-spacing: var(--v3-tracking-micro);
    text-transform: uppercase;
    color: var(--v3-muted, #66644f);
}

/* 05 project proof (dark) -------------------------------------------------
   The v3 Selected Work component (.v3-work / .v3-project), which v3.css
   styles under .erada-v3 - including the slick carousel and its dash
   pagination. What makes it match the fit-out page's Project proof is
   further down: the 3D coverflow and the details resting open. */

/* 06 before / after ------------------------------------------------------- */

.erada-home .hm-ba {
    background-color: var(--v3-surface);
    padding: var(--v3-space-9) 0;
    text-align: center;
}

.erada-home .hm-ba__stage {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    user-select: none;
}

.erada-home .hm-ba__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The clip is always the full stage, so both images are sized and cropped
   identically by object-fit; home.js reveals it with clip-path. Resizing
   the box instead forces the before image to a different width (it used to
   be 100vw) and the two halves stop lining up. */
.erada-home .hm-ba__clip {
    position: absolute;
    inset: 0;
    clip-path: inset(0 50% 0 0);
}

.erada-home .hm-ba__tag {
    position: absolute;
    top: var(--v3-space-4);
    z-index: 3;
    padding: var(--v3-space-2) var(--v3-space-3);
    background-color: rgba(24, 28, 14, 0.72);
    font-family: var(--v3-font-ui);
    font-size: var(--v3-size-micro);
    font-weight: var(--v3-weight-micro);
    letter-spacing: var(--v3-tracking-micro);
    text-transform: uppercase;
    color: var(--v3-on-dark);
}

.erada-home .hm-ba__tag--before { left: var(--v3-space-4); }
.erada-home .hm-ba__tag--after  { right: var(--v3-space-4); }

/* A real range input drives the compare, so it is keyboard operable and
   announced by screen readers. It is stretched over the stage and made
   visually transparent rather than hidden. */
.erada-home .hm-ba__range {
    position: absolute;
    inset: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

.erada-home .hm-ba__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 44px;
    height: 100%;
}

.erada-home .hm-ba__range:focus-visible + .hm-ba__handle {
    outline: 2px solid var(--v3-on-dark);
    outline-offset: 2px;
}

.erada-home .hm-ba__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 4;
    width: 2px;
    background-color: var(--v3-on-dark);
    pointer-events: none;
}

.erada-home .hm-ba__handle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    border: 2px solid var(--v3-on-dark);
    border-radius: 50%;
    background-color: rgba(24, 28, 14, 0.45);
}

/* --- Before/after slider -------------------------------------------------
   One stage per project, moved by translating the track. Not slick this time:
   slick's own drag would fight the compare handle inside each slide, and
   turning slick's dragging off to avoid that throws away the only thing it
   was providing here. A translated track is a dozen lines and leaves the
   drag gesture entirely to the compare. */

.erada-home .hm-ba__slider {
    position: relative;
    overflow: hidden;
    border-radius: var(--hm-radius);
}

.erada-home .hm-ba__track {
    display: flex;
    transition: transform 0.6s var(--hm-ease);
}

.erada-home .hm-ba__slide {
    flex: 0 0 100%;
    min-width: 0;
}

.erada-home .hm-ba__meta {
    display: flex;
    align-items: baseline;
    gap: var(--v3-space-3);
    padding: var(--v3-space-4) var(--v3-space-2) 0;
}

.erada-home .hm-ba__name {
    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-home .hm-ba__place {
    font-family: var(--v3-font-ui);
    font-size: var(--v3-size-micro);
    font-weight: var(--v3-weight-micro);
    letter-spacing: var(--v3-tracking-micro);
    text-transform: uppercase;
    color: var(--v3-muted, #66644f);
}

.erada-home .hm-ba__dots {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: var(--v3-space-4);
}

/* 44x44 hit area with the visible bar painted into the content box - the same
   trick the /v3 carousel dots use, and for the same WCAG 2.5.8 reason. */
.erada-home .hm-ba__dot {
    display: block;
    box-sizing: content-box;
    width: 30px;
    height: 4px;
    padding: 20px 7px;
    background-clip: content-box;
    border: 0;
    background-color: var(--v3-line, #e4ded1);
    cursor: pointer;
    transition: background-color 0.3s ease, width 0.3s ease;
}

.erada-home .hm-ba__dot:hover { background-color: var(--v3-muted, #66644f); }

.erada-home .hm-ba__dot.is-active {
    width: 46px;
    background-color: var(--primary, #595a20);
}

.erada-home .hm-ba__dot:focus-visible {
    outline: 2px solid var(--primary, #595a20);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .erada-home .hm-ba__track { transition: none; }
}

.erada-home .hm-ba__hint {
    margin-top: var(--v3-space-4);
    font-family: var(--v3-font-ui);
    font-size: var(--v3-size-micro);
    font-weight: var(--v3-weight-micro);
    letter-spacing: var(--v3-tracking-micro);
    text-transform: uppercase;
    color: var(--v3-muted, #66644f);
}

/* 07 why ------------------------------------------------------------------ */

.erada-home .hm-why {
    background-color: var(--v3-surface-raised);
    padding: var(--v3-space-9) 0;
    text-align: center;
}

.erada-home .hm-why__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--v3-space-6);
    text-align: left;
}

.erada-home .hm-reason { padding-top: var(--v3-space-4); border-top: 1px solid var(--v3-line, #e4ded1); }

.erada-home .hm-reason__title {
    margin-bottom: var(--v3-space-2);
    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-home .hm-reason__text {
    font-family: var(--v3-font-body);
    font-size: var(--v3-size-body);
    line-height: var(--v3-lh-body);
    color: var(--paragraph-color, #69694e);
}

/* 08 testimonials (dark) -------------------------------------------------- */

.erada-home .hm-testimonials {
    background-color: var(--v3-dark);
    padding: var(--v3-space-9) 0;
    text-align: center;
}

/* Split: portrait video on the left, the quote wheel on the right. The video
   column is fixed-ish and the wheel takes the rest, because a 9:16 video has
   a hard aspect and the text does not. */
.erada-home .hm-testimonials__split {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    gap: var(--v3-space-8);
    align-items: center;
    text-align: left;
}

/* --- Portrait video ---------------------------------------------------- */

.erada-home .hm-vidquote__frame {
    position: relative;
    aspect-ratio: 9 / 16;
    max-height: 620px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--hm-radius);
    background-color: #10130a;
    box-shadow: var(--hm-elev-dark-2);
}

.erada-home .hm-vidquote__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.erada-home .hm-vidquote__by {
    margin-top: var(--v3-space-4);
    text-align: center;
    font-family: var(--v3-font-ui);
    font-size: var(--v3-size-micro);
    font-weight: var(--v3-weight-micro);
    letter-spacing: var(--v3-tracking-micro);
    text-transform: uppercase;
    color: var(--v3-on-dark-50);
}

/* --- Quote wheel --------------------------------------------------------
   A vertical version of the Selected Work coverflow: the active quote sits
   centred and full size, the rest are stacked above and below it, smaller and
   dimmer. Travels bottom to top.

   The viewport is a fixed height with the items absolutely positioned, so
   nothing reflows as the wheel turns - only transform and opacity animate.
   .is-wheeling is added by initTestimonialWheel; without it the quotes render
   as a plain readable stack. */

.erada-home .hm-wheel__viewport {
    position: relative;
    display: grid;
    gap: var(--v3-space-5);
}

.erada-home .hm-wheel.is-wheeling .hm-wheel__viewport {
    display: block;
    height: 400px;
    /* Clips the wheel to its own box. Without this the item above the active
       one climbs out of the section and lands on the "In their words."
       heading. */
    overflow: hidden;
}

/* The card itself. Applies with or without .is-wheeling, so the quotes read
   as cards even when the script never runs.

   Solid #4a5433 rather than the --v3-panel token: that is
   rgba(255,255,255,0.07), only 7% white over the olive band, which renders but
   is far too faint to read as an edge - the quotes looked like loose text
   lying on the section background. A few units lighter than --v3-dark, with
   the dark elevation, gives each card a front and a back. */
.erada-home .hm-wheel__item {
    padding: var(--v3-space-6);
    border: 1px solid rgba(248, 246, 238, 0.12);
    border-radius: var(--hm-radius);
    background-color: #4a5433;
    box-shadow: var(--hm-elev-dark-2);
}

/* Webflow styles bare <blockquote> globally at style.css:425 - a 5px #e2e2e2
   left bar plus its own margin, padding and type. That bar was the grey line
   running down the middle of every quote. The card supplies the padding. */
.erada-home .hm-wheel__quote {
    margin: 0;
    padding: 0;
    border: 0;
    font-style: italic;
    /* Curly marks, generated rather than typed into the template: the quote
       text stays clean in views.py, and CSS quotes nest correctly if a quote
       ever contains one of its own. */
    quotes: "\201C" "\201D";
}

.erada-home .hm-wheel__quote::before { content: open-quote; }
.erada-home .hm-wheel__quote::after  { content: close-quote; }

.erada-home .hm-wheel.is-wheeling .hm-wheel__item {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    /* Fixed pixel step, NOT a percentage of translateY.
       A percentage resolves against each item's OWN height, and the quotes are
       different lengths - so a short quote sat closer to the active one than a
       long quote did and the spacing visibly jittered as the wheel turned. */
    --hm-step: 128px;
    transform-origin: center center;
    transition: transform 0.7s var(--hm-ease), opacity 0.7s var(--hm-ease);
    z-index: 1;
}

/* Active */
.erada-home .hm-wheel.is-wheeling .hm-wheel__item[data-hm-vpos="0"] {
    transform: translateY(-50%) scale(1);
    opacity: 1;
    z-index: 4;
}

/* One step out: the outgoing quote above, the incoming one below. */
.erada-home .hm-wheel.is-wheeling .hm-wheel__item[data-hm-vpos="-1"] {
    transform: translateY(calc(-50% - var(--hm-step))) scale(0.85);
    opacity: 0.4;
    z-index: 3;
}

.erada-home .hm-wheel.is-wheeling .hm-wheel__item[data-hm-vpos="1"] {
    transform: translateY(calc(-50% + var(--hm-step))) scale(0.85);
    opacity: 0.4;
    z-index: 3;
}

/* Two out: read as depth, not as text. */
.erada-home .hm-wheel.is-wheeling .hm-wheel__item[data-hm-vpos="-2"] {
    transform: translateY(calc(-50% - var(--hm-step) * 1.85)) scale(0.72);
    opacity: 0.14;
    z-index: 2;
}

.erada-home .hm-wheel.is-wheeling .hm-wheel__item[data-hm-vpos="2"] {
    transform: translateY(calc(-50% + var(--hm-step) * 1.85)) scale(0.72);
    opacity: 0.14;
    z-index: 2;
}

/* Parked past the clip so quotes arrive from somewhere rather than fading in
   on the spot. */
.erada-home .hm-wheel.is-wheeling .hm-wheel__item[data-hm-vpos="-3"] {
    transform: translateY(calc(-50% - var(--hm-step) * 2.6)) scale(0.64);
    opacity: 0;
}

.erada-home .hm-wheel.is-wheeling .hm-wheel__item[data-hm-vpos="3"] {
    transform: translateY(calc(-50% + var(--hm-step) * 2.6)) scale(0.64);
    opacity: 0;
}

.erada-home .hm-wheel__quote {
    font-family: var(--v3-font-body);
    font-size: var(--v3-size-body);
    line-height: var(--v3-lh-body);
    color: var(--v3-on-dark);
}

.erada-home .hm-wheel__by {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--v3-space-2) var(--v3-space-3);
    margin-top: var(--v3-space-4);
    padding-top: var(--v3-space-3);
    border-top: 1px solid var(--v3-on-dark-15);
    font-family: var(--v3-font-ui);
    font-size: var(--v3-size-micro);
    font-weight: var(--v3-weight-micro);
    letter-spacing: var(--v3-tracking-micro);
    text-transform: uppercase;
}

.erada-home .hm-wheel__role { color: var(--v3-on-dark); }
/* --v3-on-dark-50 (alpha .61) measured 3.93:1 here, under the 4.5 floor: the
   card is lighter than the band those tokens were tuned against, so the
   dimmer of the two loses its margin. The -70 token puts it back at 4.8. */
.erada-home .hm-wheel__org  { color: var(--v3-on-dark-70); }

.erada-home .hm-wheel__dots {
    display: none;
    justify-content: center;
    gap: 0;
    margin-top: var(--v3-space-4);
}

.erada-home .hm-wheel.is-wheeling .hm-wheel__dots { display: flex; }

.erada-home .hm-wheel__dot {
    display: block;
    box-sizing: content-box;
    width: 24px;
    height: 4px;
    padding: 20px 6px;
    background-clip: content-box;
    border: 0;
    background-color: var(--v3-on-dark-15);
    cursor: pointer;
    transition: background-color 0.3s ease, width 0.3s ease;
}

.erada-home .hm-wheel__dot:hover { background-color: var(--v3-on-dark-50); }

.erada-home .hm-wheel__dot.is-active {
    width: 38px;
    background-color: var(--v3-on-dark);
}

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

@media (prefers-reduced-motion: reduce) {
    .erada-home .hm-wheel.is-wheeling .hm-wheel__item { transition: none; }
}

/* Stack the split below the two-up breakpoint: a 9:16 video and a wheel side
   by side leave neither enough width. */
@media screen and (max-width: 900px) {
    .erada-home .hm-testimonials__split {
        grid-template-columns: 1fr;
        gap: var(--v3-space-7);
    }
    .erada-home .hm-vidquote__frame { max-height: 520px; max-width: 300px; }
    .erada-home .hm-wheel.is-wheeling .hm-wheel__viewport { height: 420px; }
    .erada-home .hm-wheel.is-wheeling .hm-wheel__item { --hm-step: 136px; }
}

/* 09 lead form (dark) ----------------------------------------------------- */

.erada-home .hm-lead {
    background-color: var(--v3-dark);
    padding: var(--v3-space-9) 0;
    text-align: center;
}

/* The section closes the page now that the final CTA is gone, so it takes
   that section's photographic treatment: image, scrim, and the form riding on
   top as an elevated light card.

   The scrim is deliberately heavier on this one than on the hero. The hero
   only had to hold a headline; this has to hold a card edge, so the photo
   needs to sit further back or the card's own shadow disappears into it. */
.erada-home .hm-lead--photo {
    position: relative;
    overflow: hidden;
    background-color: #21260f;
}

.erada-home .hm-lead__bg {
    position: absolute;
    inset: 0;
}

.erada-home .hm-lead__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.erada-home .hm-lead__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(20, 23, 12, 0.86), rgba(20, 23, 12, 0.9));
}

.erada-home .hm-lead__inner {
    position: relative;
    z-index: 1;
}

/* The card. Opaque cream so it reads regardless of what the photo does behind
   it, and the dark elevation rather than the tinted one - it is cast onto a
   photograph, not onto cream. */
.erada-home .hm-lead__card {
    padding: var(--v3-space-7);
    border-radius: var(--hm-radius);
    background-color: var(--v3-surface);
    box-shadow: var(--hm-elev-dark-2);
}

/* Two columns inside the wide card.
   The card now spans the standard 1240px content width, and a single column of
   1150px-wide inputs both looks wrong and made the section 1300px tall. Pairing
   the four short fields halves the field stack; the requirement chips and the
   message keep the full width because they need it - and at this width the six
   chips fit on one row instead of two, which is another row of height gone.

   form_body.html nests every field as .row > .col-md-12 > .col-md-12, so the
   grid goes on the OUTER col-md-12 and the per-field wrappers are its items. */
.erada-home .hm-lead__card .hm-form .row > .col-md-12 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--v3-space-5);
    align-items: start;
}

.erada-home .hm-lead__card .hm-form .row > .col-md-12 > .col-md-12:has(div.hm-checkboxes),
.erada-home .hm-lead__card .hm-form .row > .col-md-12 > .col-md-12:has(textarea) {
    grid-column: 1 / -1;
}

/* The honeypot renders a zero-height wrapper, which would still consume a grid
   cell and push Company onto its own row. */
.erada-home .hm-lead__card .hm-form .row > .col-md-12 > .col-md-12:has(#getInTouchBusinessName) {
    display: none;
}

/* Wider box needs less height to hold the same words. */
.erada-home .hm-lead__card .hm-form textarea { height: 88px; }

@media screen and (max-width: 760px) {
    /* One column again - two 300px inputs side by side is worse than one
       readable column. */
    .erada-home .hm-lead__card .hm-form .row > .col-md-12 {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 640px) {
    .erada-home .hm-lead__card { padding: var(--v3-space-5); }
}

/* No padding collapse between the lead panel and the FAQ.
   An earlier version collapsed it on the reasoning that both were light - but
   the rule in CLAUDE.md is about two sections sharing the SAME surface, and
   these do not (raised greige against cream, and now a photo band against
   cream). The surface changes, so the boundary splits the void and both keep
   their 96px. Collapsing it left the FAQ heading 96px from the section above
   where every other boundary on the page sits at 192px. */

.erada-home .hm-lead__sub {
    max-width: 46ch;
    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);
    color: var(--v3-on-dark-70);
}

.erada-home .hm-lead__form { text-align: left; }

/* the form body is rendered by elements/forms/form_body.html, so its markup
   is styled here by element rather than by class */
.erada-home .hm-form label {
    display: block;
    margin-bottom: var(--v3-space-1);
    font-family: var(--v3-font-ui);
    font-size: var(--v3-size-micro);
    font-weight: var(--v3-weight-micro);
    letter-spacing: var(--v3-tracking-micro);
    text-transform: uppercase;
    color: var(--v3-on-dark-70);
}

.erada-home .hm-form input[type="text"],
.erada-home .hm-form input[type="email"],
.erada-home .hm-form textarea {
    width: 100%;
    min-height: 42px;
    margin-bottom: var(--v3-space-3);
    padding: var(--v3-space-2) var(--v3-space-4);
    border: 1px solid var(--v3-on-dark-15);
    border-radius: var(--hm-radius-sm);
    background-color: rgba(255, 255, 255, 0.06);
    font-family: var(--v3-font-body);
    font-size: var(--v3-size-body);
    color: var(--v3-on-dark);
}

.erada-home .hm-form textarea { min-height: 0; height: 104px; resize: vertical; }

.erada-home .hm-form input::placeholder,
.erada-home .hm-form textarea::placeholder { color: rgba(248, 246, 238, 0.45); }

.erada-home .hm-form input:focus-visible,
.erada-home .hm-form textarea:focus-visible {
    outline: 2px solid var(--v3-on-dark);
    outline-offset: 2px;
}

/* "What do you need?" - CheckboxSelectMultiple renders
   div#id_requirement > div > label > input, and render_field puts
   .form-control on every input, so these are targeted by structure and the
   inherited field styling is undone. Presented as toggle chips: easier to
   scan and hit than a stack of raw checkboxes. */

/* form_body.html emits the widget BEFORE its label for this field type, so
   the group is reversed to put "What do you need?" above its chips. The help
   text is empty here, so order: -1 on the label is enough. */
.erada-home .hm-form div.hm-checkboxes ~ label { order: -1; }

.erada-home .hm-form .form-group:has(> div.hm-checkboxes) {
    display: flex;
    flex-direction: column;
    gap: var(--v3-space-2);
}

.erada-home .hm-form div.hm-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v3-space-2);
    width: auto;
    min-height: 0;
    margin-bottom: 0;
    padding: 0;
    border: 0;
    background: none;
}

/* form_body.html always emits <p class="form-text text-muted"></p> after every
   field, empty when there is no help text. Harmless for the inputs, but the
   requirement group is a flex column, so the empty <p> becomes a third child
   and the column gap adds space after the chips that no other field carries -
   the gap under the chips measured 45px against 25px everywhere else. Take it
   out of the flow so the rhythm is uniform. */
.erada-home .hm-form .form-text:empty { display: none; }

.erada-home .hm-form div.hm-checkboxes > div { display: flex; }

.erada-home .hm-form div.hm-checkboxes label {
    display: inline-flex;
    align-items: center;
    gap: var(--v3-space-2);
    min-height: 44px;                 /* touch target */
    margin-bottom: 0;
    border-radius: var(--hm-radius-sm);
    margin: 0;
    padding: 0 var(--v3-space-4);
    border: 1px solid var(--v3-on-dark-15);
    background-color: rgba(255, 255, 255, 0.04);
    font-family: var(--v3-font-body);
    font-size: var(--v3-size-body);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--v3-on-dark-70);
    cursor: pointer;
    transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.erada-home .hm-form div.hm-checkboxes label:hover {
    border-color: var(--v3-on-dark-50);
    color: var(--v3-on-dark);
}

/* :has() keeps the checked state on the chip itself. Browsers without it
   still show a working checkbox and label, just without the fill. */
.erada-home .hm-form div.hm-checkboxes label:has(input:checked) {
    border-color: var(--v3-on-dark);
    background-color: var(--v3-on-dark);
    color: #232a12;
}

.erada-home .hm-form div.hm-checkboxes label:has(input:focus-visible) {
    outline: 2px solid var(--v3-on-dark);
    outline-offset: 2px;
}

.erada-home .hm-form div.hm-checkboxes input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    accent-color: #232a12;
    flex: 0 0 auto;
}

/* No generic button rule here: form_body.html renders no button, and a
   `.hm-form button` selector is (0,2,1) - it silently outranked
   .hm-lead__submit and capped it at 46px. The submit button owns its class. */

.erada-home .hm-form .errorlist {
    margin-bottom: var(--v3-space-4);
    color: #ffb4a2;
    font-family: var(--v3-font-body);
    font-size: var(--v3-size-body);
}

/* a light button variant for use on photography */
.erada-home .v3-btn--light {
    background-color: var(--v3-on-dark);
    border-color: var(--v3-on-dark);
    color: #232a12;
}

/* 10 faq ------------------------------------------------------------------ */

/* Sits below the lead panel now. Kept on the cream surface: the lead
   panel above it is the raised greige, so the boundary still reads as a
   surface change - see the padding collapse near .hm-lead--light. */
.erada-home .hm-faq {
    background-color: var(--v3-surface);
    padding: var(--v3-space-9) 0;
    text-align: center;
}

.erada-home .hm-faq__list { text-align: left; }

.erada-home .hm-faq__item { border-top: 1px solid var(--v3-line, #e4ded1); }
.erada-home .hm-faq__item:last-child { border-bottom: 1px solid var(--v3-line, #e4ded1); }

.erada-home .hm-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v3-space-4);
    min-height: 44px;                 /* touch target */
    padding: var(--v3-space-5) 0;
    cursor: pointer;
    list-style: none;
    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-home .hm-faq__q::-webkit-details-marker { display: none; }

.erada-home .hm-faq__q::after {
    content: "+";
    flex: 0 0 auto;
    font-family: var(--v3-font-ui);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--v3-muted, #66644f);
    transition: transform 0.3s ease;
}

.erada-home .hm-faq__item[open] .hm-faq__q::after { transform: rotate(45deg); }

.erada-home .hm-faq__a {
    padding-bottom: var(--v3-space-5);
    max-width: 60ch;
    font-family: var(--v3-font-body);
    font-size: var(--v3-size-body);
    line-height: var(--v3-lh-body);
    color: var(--paragraph-color, #69694e);
}

/* .hm-form--light ---------------------------------------------------------
   The same form on a light surface. Every colour in the dark skin has a
   counterpart here - miss one and that piece of the form goes invisible
   rather than merely looking wrong, which is why this block mirrors the dark
   rules one for one rather than patching a few of them.

   Used by the hero panel and by the lead card. */

.erada-home .hm-form--light label { color: var(--v3-muted, #66644f); }

.erada-home .hm-form--light input[type="text"],
.erada-home .hm-form--light input[type="email"],
.erada-home .hm-form--light textarea {
    border-color: var(--v3-line, #e4ded1);
    background-color: #fff;
    color: #2f3320;
}

.erada-home .hm-form--light input::placeholder,
.erada-home .hm-form--light textarea::placeholder {
    /* 4.6:1 on white. The dark skin's 0.45 alpha equivalent would land near
       2.5:1 here, and in the hero panel these placeholders are carrying the
       field labels - they are not decorative. */
    color: #6b6f5c;
}

.erada-home .hm-form--light input:focus-visible,
.erada-home .hm-form--light textarea:focus-visible {
    outline: 2px solid var(--primary, #595a20);
    outline-offset: 2px;
}

.erada-home .hm-form--light div.hm-checkboxes label {
    border-color: var(--v3-line, #e4ded1);
    background-color: #fff;
    color: #4a4e3a;
}

.erada-home .hm-form--light div.hm-checkboxes label:hover {
    border-color: var(--primary, #595a20);
    color: #2f3320;
}

.erada-home .hm-form--light div.hm-checkboxes label:has(input:checked) {
    border-color: var(--v3-dark);
    background-color: var(--v3-dark);
    color: var(--v3-on-dark);
}

.erada-home .hm-form--light div.hm-checkboxes label:has(input:focus-visible) {
    outline: 2px solid var(--primary, #595a20);
    outline-offset: 2px;
}

.erada-home .hm-form--light div.hm-checkboxes input[type="checkbox"] {
    accent-color: var(--v3-dark);
}

.erada-home .hm-form--light .errorlist { color: #8c3226; }

/* The submit button is cream-on-olive in the dark skin, which would vanish
   into a light panel. Inverted here, hover swaps to the outline the same way. */
.erada-home .hm-form--light .hm-lead__submit {
    border-color: var(--v3-dark);
    background-color: var(--v3-dark);
    color: var(--v3-on-dark);
}

.erada-home .hm-form--light .hm-lead__submit:hover {
    background-color: transparent;
    color: var(--v3-dark);
}

.erada-home .hm-form--light .hm-lead__note { color: var(--v3-muted, #66644f); }

/* The success state replaces the whole form, so it needs the light treatment
   too - otherwise the thank-you lands as cream text on cream. */
.erada-home .hm-form--light .hm-lead__done {
    border-color: var(--v3-line, #e4ded1);
    background-color: var(--v3-surface-raised);
}

.erada-home .hm-form--light .hm-lead__done p { color: #2f3320; }

/* The in-place "spotlight" that used to cycle a highlight through the static
   grid is gone - the section is a carousel now, and slick's .slick-center
   carries the same idea while the cards actually move. See the .slick-center
   rules above. */

/* Selected Work: 3D coverflow --------------------------------------------
   Scoped to .erada-home, so /v3 keeps the flat peeking carousel it has.
   The markup and the slick instance are shared - only the transforms differ.

   perspective has to sit on .slick-list, and .slick-track needs
   transform-style: preserve-3d for it to reach the slides: perspective only
   applies to an element's DIRECT children, and slick puts a track in between. */

.erada-home .v3-work__slider.is-coverflow .slick-list {
    perspective: 1500px;
    padding-top: var(--v3-space-5);
    padding-bottom: var(--v3-space-5);
}

.erada-home .v3-work__slider.is-coverflow .slick-track {
    transform-style: preserve-3d;
    display: flex;
    align-items: center;
}

/* 0.6s matches the slick `speed` in v3.js, so the rotation and the slide
   travel finish together instead of one landing before the other. */
.erada-home .v3-work__slider.is-coverflow .slick-slide {
    transform-origin: center center;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    backface-visibility: hidden;
}

/* Set while the offsets are being rewritten for something that is not the
   slide travelling - chiefly slick's snap-back at the wrap, which is itself
   instantaneous. See the `instant` branch in initWorkCoverflow. */
.erada-home .v3-work__slider.is-coverflow.is-instant .slick-slide {
    transition: none;
}

/* Active: square on, full size. Stacking order is NOT set here - style.css
   carries a global `a { z-index:100000000 !important }` and slick puts
   .slick-slide on the <a>, so initWorkCoverflow sets z-index inline with
   !important instead. */
.erada-home .v3-work__slider.is-coverflow .slick-slide[data-hm-pos="0"] {
    transform: rotateY(0deg) scale(1);
    opacity: 1;
}

.erada-home .v3-work__slider.is-coverflow .slick-slide[data-hm-pos="-1"] {
    transform: translateX(32%) rotateY(36deg) scale(0.84);
    opacity: 0.8;
}

.erada-home .v3-work__slider.is-coverflow .slick-slide[data-hm-pos="1"] {
    transform: translateX(-32%) rotateY(-36deg) scale(0.84);
    opacity: 0.8;
}

.erada-home .v3-work__slider.is-coverflow .slick-slide[data-hm-pos="-2"] {
    transform: translateX(64%) rotateY(46deg) scale(0.70);
    opacity: 0.5;
}

.erada-home .v3-work__slider.is-coverflow .slick-slide[data-hm-pos="2"] {
    transform: translateX(-64%) rotateY(-46deg) scale(0.70);
    opacity: 0.5;
}

.erada-home .v3-work__slider.is-coverflow .slick-slide[data-hm-pos="-3"] {
    transform: translateX(88%) rotateY(50deg) scale(0.60);
    opacity: 0;
}

.erada-home .v3-work__slider.is-coverflow .slick-slide[data-hm-pos="3"] {
    transform: translateX(-88%) rotateY(-50deg) scale(0.60);
    opacity: 0;
}

/* Ambient glow behind the active card. Brand olive rather than the
   reference's red, sized to the card so it reads as light coming off the
   artwork rather than a spotlight on the band. */
.erada-home .v3-work__slider.is-coverflow .slick-list::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 620px;
    height: 620px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
                rgba(168, 186, 118, 0.22) 0%,
                rgba(168, 186, 118, 0.10) 38%,
                rgba(168, 186, 118, 0) 68%);
    pointer-events: none;
    z-index: 0;
}

/* Only the front card reveals its overlay. NOT pointer-events:none, which was
   the first attempt: the slides are the full width of the carousel, so killing
   pointer events also kills slick's drag/swipe anywhere except the centre.
   Side cards stay live and clicking one brings it forward instead of
   navigating (see initWorkCoverflow). */
.erada-home .v3-work__slider.is-coverflow .slick-slide:not([data-hm-pos="0"]) .v3-project__overlay {
    opacity: 0;
}

.erada-home .v3-work__slider.is-coverflow .slick-slide:not([data-hm-pos="0"]) {
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .erada-home .v3-work__slider.is-coverflow .slick-slide { transition: none; }
}

/* Below the two-up breakpoint the rotation eats too much of a narrow slide;
   flatten to a scale-and-fade so the neighbours still recede. */
@media screen and (max-width: 700px) {
    .erada-home .v3-work__slider.is-coverflow .slick-slide[data-hm-pos="-1"],
    .erada-home .v3-work__slider.is-coverflow .slick-slide[data-hm-pos="1"] {
        transform: scale(0.88);
        opacity: 0.6;
    }
    .erada-home .v3-work__slider.is-coverflow .slick-slide[data-hm-pos="-2"],
    .erada-home .v3-work__slider.is-coverflow .slick-slide[data-hm-pos="2"] {
        transform: scale(0.78);
        opacity: 0.35;
    }
    .erada-home .v3-work__slider.is-coverflow .slick-list::before { width: 320px; height: 320px; }
}

/* card reveal on scroll ---------------------------------------------------
   Cards fade and rise the first time their grid enters the viewport,
   staggered so a row resolves left to right instead of snapping in.

   The hidden state is applied BY JavaScript (initCardReveal adds .hm-reveal),
   never by this stylesheet on its own. If the script never runs the cards have
   simply never been hidden. Declaring opacity:0 statically here would mean one
   broken script leaves the page blank. */

.erada-home .hm-reveal {
    opacity: 0;
    transform: translateY(18px);
}

.erada-home .hm-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.55s var(--hm-ease),
                transform 0.55s var(--hm-ease);
}

@media (prefers-reduced-motion: reduce) {
    .erada-home .hm-reveal,
    .erada-home .hm-reveal.is-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* radius: the pieces owned by v3.css -------------------------------------
   .v3-btn, the Selected Work cards and the before/after stage are declared
   square in v3.css, which /v3 shares. Overriding them here rather than there
   keeps the homepage exactly as it is.

   .v3-project__media already carries overflow:hidden, so the image corners
   follow the radius. */

.erada-home .v3-btn { border-radius: var(--hm-radius-sm); }

.erada-home .v3-project__media { border-radius: var(--hm-radius); }

.erada-home .hm-ba__stage { border-radius: var(--hm-radius); }

/* Selected Work: details shown by default ---------------------------------
   v3.css keeps the project overlay at opacity 0 until :hover / :focus-within.
   On this page it rests open instead: the carousel rotates on its own, so a
   card is only under the pointer by accident, and the scope line under each
   project is the part that answers "have you done work like mine?".

   The scrim gradient is already dark enough at the foot for the copy - the
   contrast numbers that set it were measured against the overlay fully
   opaque, which is now its resting state.

   Scoped to .erada-home: /v3 keeps the hover reveal. */

.erada-home .v3-project__overlay {
    opacity: 1;
}

.erada-home .v3-project__overlay-inner {
    transform: none;
    opacity: 1;
}

/* The lift on hover stays - it is the only remaining hover affordance now
   that the copy no longer appears on hover. */

/* section texture --------------------------------------------------------
   The leaf pattern that /v3 lays under its bands, extended to every section
   on this page. v3.css only applies it to .v3-clients / .v3-services /
   .v3-work / .v3-cta, so on this page it was reaching the Selected Work band
   and nothing else.

   Same construction as v3.css: two background layers, a flat colour veil on
   top of the texture. The veil is what keeps each band on its own surface -
   the texture is only ever a few units of variation underneath it.

   Sections that carry their own photograph (.hm-hero, .hm-lead--photo) are
   deliberately excluded: they already have an image layer, and a second one
   behind it would never be seen.
   -------------------------------------------------------------------------- */

.erada-home .hm-trust,
.erada-home .hm-sectorpick,
.erada-home .hm-ba,
.erada-home .hm-why,
.erada-home .hm-testimonials,
.erada-home .hm-faq {
    background-position: 0 0, 50%;
    background-size: auto, 100%;
    background-repeat: repeat, no-repeat;
    background-attachment: scroll, fixed;
}

/* Cream bands. */
.erada-home .hm-trust,
.erada-home .hm-ba,
.erada-home .hm-faq {
    background-image: linear-gradient(#f8f6eee0, #f8f6eee0), var(--v3-texture);
}

/* Raised greige bands. */
.erada-home .hm-sectorpick,
.erada-home .hm-why {
    background-image: linear-gradient(rgba(241, 236, 225, 0.90), rgba(241, 236, 225, 0.90)),
                      var(--v3-texture);
}

/* Dark band - a heavy olive veil so the pattern reads as a faint lighter
   tracery rather than washing the section out. */
.erada-home .hm-testimonials {
    background-image: linear-gradient(rgba(63, 71, 40, 0.93), rgba(63, 71, 40, 0.93)),
                      var(--v3-texture);
}

/* iOS Safari ignores background-attachment:fixed and repaints it badly on
   scroll; /v3 makes the same concession at the same breakpoint. */
@media screen and (max-width: 767px) {
    .erada-home .hm-trust,
    .erada-home .hm-sectorpick,
    .erada-home .hm-ba,
    .erada-home .hm-why,
    .erada-home .hm-testimonials,
    .erada-home .hm-faq {
        background-attachment: scroll, scroll;
    }
}

/* responsive -------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
    .erada-home .hm-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* .fo-stats responsive columns live in v3.css (shared with /v3). */
}

@media screen and (max-width: 860px) {
    .erada-home .hm-hero__inner { grid-template-columns: 1fr; gap: var(--v3-space-7); }
    .erada-home .hm-testimonials__grid { grid-template-columns: 1fr; }
}

@media screen and (max-width: 640px) {
    .erada-home .hm-hero,
    .erada-home .hm-sectorpick,
    .erada-home .hm-ba,
    .erada-home .hm-why,
    .erada-home .hm-testimonials,
    .erada-home .hm-faq,
    .erada-home .hm-trust,
    .erada-home .hm-lead { padding: var(--v3-space-8) 0; }
    .erada-home .hm-hero__form { padding: var(--v3-space-5); }

    .erada-home .hm-inner,
    .erada-home .hm-hero__inner { padding: 0 var(--v3-space-5); }

    .erada-home .hm-why__grid { grid-template-columns: 1fr; }

    .erada-home .hm-hero__actions { flex-direction: column; align-items: stretch; }
    .erada-home .hm-ba__stage { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
    .erada-home .hm-sectorcard,
    .erada-home .hm-wheel__item,
    .erada-home .hm-sectorcard__media img,
    .erada-home .hm-faq__q::after { transition: none; }
    .erada-home .hm-sectorcard:hover,
    .erada-home .hm-sectorcard:focus-visible { transform: none; }
    .erada-home .hm-sectorcard:hover .hm-sectorcard__media img { transform: none; }
    /* The marquee and the Selected Work carousel are both already handled by
       v3.css; the typewriter (caret still rule) is handled there too now. */
}

/* submit button + post-submit state --------------------------------------- */

.erada-home .hm-lead__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: var(--v3-space-3) var(--v3-space-7);
    border: 1px solid var(--v3-on-dark);
    border-radius: var(--hm-radius-sm);
    background-color: var(--v3-on-dark);
    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: #232a12;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.erada-home .hm-lead__submit:hover {
    background-color: transparent;
    color: var(--v3-on-dark);
}

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

.erada-home .hm-lead__submit.is-busy { opacity: 0.6; cursor: progress; }

.erada-home .hm-lead__note {
    margin-top: var(--v3-space-4);
    font-family: var(--v3-font-ui);
    font-size: var(--v3-size-micro);
    font-weight: var(--v3-weight-micro);
    letter-spacing: var(--v3-tracking-micro);
    text-transform: uppercase;
    color: var(--v3-on-dark-50);
}

.erada-home .hm-lead__done {
    padding: var(--v3-space-7) var(--v3-space-6);
    border-radius: var(--hm-radius-sm);
    border: 1px solid var(--v3-on-dark-15);
    background-color: rgba(255, 255, 255, 0.06);
    text-align: center;
}

.erada-home .hm-lead__done p {
    font-family: var(--v3-font-body);
    font-size: var(--v3-size-body);
    line-height: var(--v3-lh-body);
    color: var(--v3-on-dark);
}

/* Dismiss the thank-you and restore the pristine form (initLeadForm in
   home.js). Both panels on this page are .hm-form--light, so the controls
   are coloured for the light success card. There are two: a corner x to close
   it, and an explicit "Send another enquiry" action below the message. */
.erada-home .hm-lead__done { position: relative; }

.erada-home .hm-lead__back {
    position: absolute;
    top: var(--v3-space-3);
    right: var(--v3-space-3);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #2f3320;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.erada-home .hm-lead__back:hover,
.erada-home .hm-lead__back:focus-visible {
    background-color: var(--v3-line, #e4ded1);
}

.erada-home .hm-lead__back-link {
    position: static;
    width: auto;
    height: auto;
    margin-top: var(--v3-space-5);
    border-radius: 0;
    font-family: var(--v3-font-ui);
    font-size: var(--v3-size-micro);
    font-weight: var(--v3-weight-micro);
    letter-spacing: var(--v3-tracking-micro);
    text-transform: uppercase;
    color: var(--v3-muted, #66644f);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.erada-home .hm-lead__back-link:hover,
.erada-home .hm-lead__back-link:focus-visible {
    background-color: transparent;
    color: #2f3320;
}

@media (prefers-reduced-motion: reduce) {
    .erada-home .hm-lead__submit,
    .erada-home .hm-form div.hm-checkboxes label { transition: none; }
}

@media screen and (max-width: 640px) {
    .erada-home .hm-lead__submit { width: 100%; }
}