/* ==========================================
   WEB DESIGN PAGE — HERO
========================================== */

.wd-reveal-hero{

    position:relative;

    /* Scroll-through distance for the pinned, staged reveal. The pin
       itself is 100vh, so this leaves 170vh of scroll during which it
       stays put: 70vh drives the 4 staged reveals below (js/app.js
       reserves the final 100vh — one screen height — as a hold, so
       these percentages are of that 70vh, not the full 170vh):
         0%–20%   text card exits (fades + rises out)
         20%–50%  laptop fades/scales in, large and central
         50%–75%  tablet joins it
         75%–100% phone joins last
       ...then the fully-assembled scene just sits still for the
       remaining 100vh before the section unpins. Resets to a normal
       auto-height stack below 900px — see MOBILE below — where
       there's no pin, no staged percentages and no hold, just a plain
       sequential fade-in per device as the visitor scrolls. */
    height:270vh;

    /* Extends the hero background up behind the floating pill header
       instead of leaving flat body background showing around it — see
       --header-h in variables.css. The pin's content-wrap absorbs the
       same amount back via padding-top so text doesn't shift under it. */
    margin-top:calc(-1 * var(--header-h));

}
/* Mobile (skips the pin entirely — feels janky on small screens) and
   reduced-motion (skips the whole staged-scroll mechanism, per the
   requirement to show a static final state) both collapse this back
   to a normal, un-pinned, auto-height section. js/app.js handles the
   text card separately for reduced-motion (hidden outright, since the
   final state has no text) — mobile leaves it as normal in-flow text
   above the stacked devices below. */
@media (max-width:900px), (prefers-reduced-motion: reduce){

    .wd-reveal-hero{

        height:auto;

        margin-top:0;

    }

}
.wd-reveal-hero__pin{

    position:sticky;

    top:0;

    height:100vh;

    overflow:hidden;

    display:flex;

    align-items:center;

}
@media (max-width:900px), (prefers-reduced-motion: reduce){

    .wd-reveal-hero__pin{

        position:static;

        height:auto;

        display:block;

        padding:calc(90px + var(--header-h)) 0 0;

    }

}
/* The real, full-brightness storefront photo — the section's general
   backdrop, filling the whole pinned viewport behind the text and
   devices. Purely ambient background: each device-*-final.png
   mockup already has the Oak & Ember site rendered onto its own
   screen (see .wd-device__mockup below), so nothing shows through
   the devices from back here anymore. No darkening layer over it —
   see .wd-hero__content::before below for the small text-only scrim
   instead. */
.wd-reveal-hero__bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

    z-index:0;

    pointer-events:none;

}
.wd-reveal-hero__content-wrap{

    position:relative;

    z-index:2;

    /* Content is flex-centered in the 100vh pin (see __pin above), so
       this isn't absorbing a negative margin like the old hero's did
       — it's just keeping text clear of the floating pill header. */
    padding-top:var(--header-h);

}
@media (max-width:900px){

    .wd-reveal-hero__content-wrap{

        padding-top:0;

    }

}

/* ------------------------------------------
   DEVICE MOCKUPS
------------------------------------------ */

.wd-reveal-hero__stage{

    position:absolute;

    inset:0;

    z-index:1;

}
@media (max-width:900px), (prefers-reduced-motion: reduce){

    .wd-reveal-hero__stage{

        position:static;

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:48px;

        padding:48px 24px 64px;

    }

}

.wd-device{

    position:absolute;

}
@media (max-width:900px), (prefers-reduced-motion: reduce){

    .wd-device{

        /* No width:100% here — each .wd-device--laptop/tablet/phone
           sets its own mobile width below (min(vw,px) per device),
           which needs to win over anything set here. */
        position:static;

    }

}
/* Text is gone by the time any device arrives now (stage 1 finishes
   at 20%, laptop doesn't start until 20%), so unlike the old layout
   these don't need to dodge a permanently-visible text block — they
   can take the whole frame, sized to actually read as the section's
   main visual focus rather than small decorative accents.

   No coordinate-matching against .wd-reveal-hero__bg anymore — that
   used to be the whole point of top:% here (aligning each device's
   own screen-center to the photo's own vertical midpoint, since the
   screens were a real see-through crop of that same photo). Now that
   device-*-final.png has its content baked directly into the image,
   the devices don't need to land on any particular part of the
   background — top/left below are chosen purely for how the
   composition looks: a big, dominant laptop dead center, with the
   tablet tucked behind its left side and the phone stepping out in
   front of its right, fanned out the way product photography usually
   stages three screens together, deliberately overlapping rather
   than sitting as isolated islands. The background photo still shows
   in the margins/gaps around them for context, but the devices are
   now the dominant visual weight, not the photo.

   Sizing is clamp(floor, preferred, ceiling) same shape as before,
   just substantially larger at every point — with one addition: the
   preferred term is min(Nvw, Mvh) instead of a bare vw value. Going
   this big means the laptop's vw-driven width alone could translate
   to a taller box than the 100vh pin actually has room for on a
   short-but-wide viewport (a 1920×900 laptop screen, say) — the pin
   clips to 100vh (see .wd-reveal-hero__pin), so that would crop the
   device rather than just cap its growth. The vh term converts that
   same risk into a plain width limit (device aspect ratio is fixed,
   so a height ceiling is just a width ceiling in disguise), and
   min() applies whichever of the two is more restrictive — vw drives
   sizing normally, vh only actually kicks in on that short/wide
   combination. Each device's own vh number is picked so it lands
   within the pin with margin to spare even centered at its most
   off-center top:% below. left/top + translate(-50%,-50%) position
   each by its own center point.

   left/top/transform/width here are wrapped in min-width:901px —
   NOT unconditional the way they were before. That was a real bug,
   not just a mobile-specific oversight: transform applies to an
   element regardless of its `position` value, so even after .wd-device
   drops to position:static below 900px, translate(-50%,-50%) here
   was STILL shifting each device up-and-left by half its own
   (now much bigger) box size, straight out of its normal-flow slot
   in the mobile stack — that's what put the laptop over the
   paragraph text and the tablet/phone over the navbar. z-index and
   the drop-shadow filter are left unscoped below since they're
   harmless (actively nice, for the shadow) at any width; everything
   position-related now only exists on desktop, where .wd-device
   is actually position:absolute for it to mean anything. */
@media (min-width:901px){

    .wd-device--laptop{

        width:clamp(620px, min(68vw, 120vh), 1700px);

        left:50%;

        top:50%;

        transform:translate(-50%, -50%);

    }

    .wd-device--tablet{

        width:clamp(340px, min(38vw, 70vh), 980px);

        left:24%;

        top:44%;

        transform:translate(-50%, -50%);

    }

    .wd-device--phone{

        width:clamp(180px, min(19vw, 46vh), 480px);

        left:77%;

        top:58%;

        transform:translate(-50%, -50%);

    }

}
.wd-device--laptop{

    z-index:2;

    filter:drop-shadow(0 34px 42px rgba(0,0,0,.42));

}
.wd-device--tablet{

    z-index:1;

    filter:drop-shadow(0 24px 32px rgba(0,0,0,.36));

}
.wd-device--phone{

    z-index:3;

    filter:drop-shadow(0 18px 24px rgba(0,0,0,.36));

}
/* Mobile sizing is a clean, self-contained min(vw, px) per device —
   NOT the old desktop clamp() floor with a mobile max-width papered
   over it (that floor, 620/340/180px, could still exceed a narrow
   phone's own content width once you account for .wd-reveal-hero__stage's
   24px side padding, which is exactly the other half of what caused
   the laptop to bleed off-screen). vw keeps each device around the
   same relative size across 375-430px phones; the px ceiling just
   stops them from growing past that on a landscape phone or small
   tablet still under the 900px breakpoint. Laptop tops out around
   85vw (the "roughly 85-90%" ask); tablet and phone are deliberately
   smaller fractions, same relative hierarchy as the desktop
   composition, not three same-width boxes. */
@media (max-width:900px), (prefers-reduced-motion: reduce){

    .wd-device--laptop{

        width:min(85vw, 480px);

    }

    .wd-device--tablet{

        width:min(70vw, 380px);

    }

    .wd-device--phone{

        width:min(55vw, 260px);

    }

}

/* The reveal itself lives on __frame (not .wd-device, which only
   handles the static position/size above) so it never has to fight
   the translate(-50%,-50%) centering transform.

   Desktop (>900px, motion OK): opacity/transform are driven directly
   by js/app.js on every scroll frame, one continuous value per stage
   — deliberately no transition here, so the reveal tracks the
   scrollbar 1:1 instead of visibly lagging behind it.

   Mobile and reduced-motion both go through the media query below
   instead: a single CSS-transitioned .is-visible toggle, either
   triggered by IntersectionObserver as each device scrolls into view
   (mobile) or set immediately with no transition to play at all
   (reduced-motion, since transition is only added under
   no-preference below). */
.wd-device__frame{

    position:relative;

    width:100%;

    opacity:0;

}
@media (max-width:900px){

    .wd-device__frame{

        transform:translateY(28px) scale(.94);

    }

    .wd-device.is-visible .wd-device__frame{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}
@media (max-width:900px) and (prefers-reduced-motion: no-preference){

    .wd-device__frame{

        transition:opacity .9s cubic-bezier(.16,.8,.3,1), transform .9s cubic-bezier(.16,.8,.3,1);

        will-change:opacity, transform;

    }

}

/* device-*-final.png mockups have the Oak & Ember site already
   rendered directly onto each screen — a single flat, complete
   image, nothing layered behind it. Replaced the old device-*-v2.png
   mockups (a real transparent alpha "hole" for the screen) plus
   everything that used to sit behind that hole — a live iframe embed
   with a JS-computed, resize-driven matrix3d warp, later a static
   image with its own per-device rotate/skewX/scale transform and
   clip-path — all of which existed solely to align separate content
   to an empty screen cutout. With the screen baked into the image
   itself there's nothing left to align, warp, or clip: just an img,
   same as any other. */
.wd-device__mockup{

    display:block;

    width:100%;

    height:auto;

}

.wd-hero__content{

    position:relative;

    max-width:620px;

    animation:wd-hero-slide-in 1.1s cubic-bezier(.16,.8,.3,1) both;

}
/* Local legibility scrim — NOT a filter over the whole photo. The
   background stays at full golden-hour brightness everywhere else;
   this soft, off-center glow sits only behind the text block itself
   (bleeding a bit past its edges) so the headline/paragraph stay
   readable without darkening the image. */
.wd-hero__content::before{

    content:"";

    position:absolute;

    inset:-48px -80px -48px -48px;

    z-index:-1;

    pointer-events:none;

    background:radial-gradient(
        ellipse 120% 100% at 30% 45%,
        rgba(8,21,45,.7) 0%,
        rgba(8,21,45,.45) 45%,
        rgba(8,21,45,0) 78%
    );

}
.wd-hero__content h1{

    font-family:"Times New Roman", serif;

    font-size:2.9rem;

    line-height:1.25;

    color:var(--color-white);

    letter-spacing:-1px;

    margin-bottom:24px;

    text-shadow:0 4px 28px rgba(0,0,0,.65);

}
.wd-hero__content p{

    font-size:1.15rem;

    line-height:1.8;

    color:var(--color-text);

    text-shadow:0 2px 16px rgba(0,0,0,.7);

}
@keyframes wd-hero-slide-in{

    from{

        transform:translateX(140px);

        opacity:0;

    }

    to{

        transform:translateX(0);

        opacity:1;

    }

}

/* ==========================================
   SECTION 2 — PROBLEM / COMPARISON VISUAL
========================================== */

.wd-problem{

    background:var(--color-background-alt);

    padding:var(--space-3xl) 0;

}
.wd-problem__grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}
.wd-problem__content{

    max-width:520px;

    text-align:left;

}
.wd-problem__content h2{

    font-family:"Times New Roman", serif;

    font-size:2.4rem;

    line-height:1.3;

    color:var(--color-white);

    letter-spacing:-.5px;

    margin-bottom:24px;

}
.wd-problem__content p{

    font-size:1.15rem;

    line-height:1.8;

    color:var(--color-text);

    margin-bottom:0;

}
.compare-visual__image{

    width:100%;

    display:block;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-card);
}
.compare-visual__caption{

    text-align:center;

    color:var(--color-gold);

    font-weight:700;

    margin-top:24px;

}

@media (max-width:900px){

    /* Fixed 1fr 1fr forced two cramped ~160px columns on phones —
       stack the comparison image above the copy instead. */
    .wd-problem__grid{

        grid-template-columns:1fr;

    }

    .wd-problem__content{

        max-width:none;

    }

}

/* ==========================================
   SECTION 3 — DIGITAL EXTENSION PHILOSOPHY
========================================== */

.wd-philosophy{

    padding:var(--space-3xl) 0;

}
.wd-philosophy__content{

    max-width:720px;

    margin-inline:auto;

    text-align:center;

}
.wd-philosophy__icon{

    display:flex;

    justify-content:center;

    margin-bottom:20px;

}
.wd-philosophy__icon svg{

    width:38px;

    height:38px;

    color:var(--color-gold);

}
.wd-philosophy__content h2{

    font-family:"Times New Roman", serif;

    font-size:2.6rem;

    line-height:1.3;

    color:var(--color-white);

    letter-spacing:-.5px;

}
.wd-philosophy__divider{

    height:1px;

    background:rgba(255,255,255,.1);

    max-width:900px;

    margin:40px auto;

}
.wd-philosophy__grid{

    display:grid;

    grid-template-columns:repeat(4, 1fr);

    gap:32px;

    max-width:1160px;

    margin-inline:auto;

}
@media (max-width:760px){

    .wd-philosophy__grid{

        grid-template-columns:1fr 1fr;

        gap:28px 24px;

    }

}
@media (max-width:460px){

    .wd-philosophy__grid{

        grid-template-columns:1fr;

    }

}
.wd-philosophy__example h3{

    font-family:var(--font-heading);

    font-size:1.4rem;

    color:var(--color-white);

    margin-bottom:10px;

}
.wd-philosophy__example p{

    font-size:.95rem;

    line-height:1.6;

    color:var(--color-text);
}
.wd-philosophy__quote{

    font-family:var(--font-heading);

    font-style:italic;

    font-size:1.7rem;

    line-height:1.5;

    color:var(--color-gold);

    text-align:center;

    max-width:720px;

    margin-inline:auto;

}

/* ==========================================
   SECTION 4 — DISCOVERY TIMELINE (alternating, scroll-reveal)
========================================== */

.wd-discovery{

    background:var(--color-background-alt);

    padding:var(--space-3xl) 0;

}
.wd-discovery__heading{

    max-width:700px;

    margin:0 auto var(--space-2xl);

    text-align:center;

}
.wd-discovery__heading h2{

    font-family:"Times New Roman", serif;

    font-size:2.6rem;

    line-height:1.3;

    color:var(--color-white);

    letter-spacing:-.5px;

    margin-bottom:24px;

}
.wd-discovery__heading p{

    font-size:1.2rem;

    line-height:1.7;

    color:var(--color-text);
}
.wd-gold{

    color:var(--color-gold);

}
.wd-timeline-v2{

    position:relative;

    max-width:900px;

    margin-inline:auto;

}
.wd-timeline-v2__line-base{

    position:absolute;

    top:20px;

    bottom:20px;

    left:50%;

    transform:translateX(-50%);

    width:2px;

    background:rgba(216,177,75,.2);

    z-index:0;

}
.wd-timeline-v2__line-progress{

    position:absolute;

    top:20px;

    left:50%;

    transform:translateX(-50%);

    width:2px;

    height:0;

    background:var(--color-gold);

    z-index:1;

    transition:height .5s ease;

}
.wd-timeline-v2__row{

    position:relative;

    display:grid;

    grid-template-columns:1fr 60px 1fr;

    align-items:center;

    min-height:96px;

}
.wd-timeline-v2__side--left{

    text-align:right;

    padding-right:28px;

}
.wd-timeline-v2__side--right{

    text-align:left;

    padding-left:28px;

}
.wd-timeline-v2__card{

    display:inline-block;

    background:var(--color-card);

    border-radius:var(--radius-md);

    padding:16px 22px;

    color:var(--color-white);

    font-weight:600;

    font-size:var(--fs-sm);

    box-shadow:var(--shadow-card);

    opacity:0;

    transition:opacity .6s ease, transform .6s ease;
}
.wd-timeline-v2__card--final{

    color:var(--color-gold);

}
.wd-timeline-v2__row--left .wd-timeline-v2__card{

    transform:translateX(36px);

}
.wd-timeline-v2__row--right .wd-timeline-v2__card{

    transform:translateX(-36px);

}
.wd-timeline-v2__row.is-visible .wd-timeline-v2__card{

    opacity:1;

    transform:translateX(0);

}
.wd-timeline-v2__center{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:center;

}
.wd-timeline-v2__dot{

    width:32px;

    height:32px;

    border-radius:50%;

    background:var(--color-background-alt);

    border:2px solid var(--color-gold);

    color:var(--color-gold);

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:.8rem;

    font-family:var(--font-heading);

}
.wd-timeline-v2__dot--final{

    background:var(--color-gold);

    color:var(--color-background);

}

/* ==========================================
   SECTION 6 — BUILD AROUND YOU (orbit diagram)
========================================== */

.wd-build-around{

    padding:var(--space-3xl) 0;

    overflow:hidden;

}
.hub-orbit{

    position:relative;

    width:820px;

    height:820px;

    max-width:100%;

    margin-inline:auto;

}
.hub-orbit__center{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    z-index:2;

    width:190px;

    height:130px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:12px;

    background:var(--color-card);

    border:2px solid var(--color-gold);

    border-radius:var(--radius-md);

    box-shadow:0 0 40px rgba(216,177,75,.15);
}
.hub-orbit__core-label{

    color:var(--color-gold);

    font-size:.72rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:6px;

}
.hub-orbit__core-title{

    font-family:var(--font-heading);

    font-size:1.4rem;

    font-weight:700;

    color:var(--color-white);

}
.hub-orbit__ring{

    position:absolute;

    inset:0;

    animation:hub-orbit-spin 100s linear infinite;

}
.hub-orbit__item{

    position:absolute;

    top:50%;

    left:50%;

    transform:rotate(var(--angle)) translateX(340px);

}
.hub-orbit__counter-static{

    position:absolute;

    top:0;

    left:0;

    transform:rotate(calc(var(--angle) * -1));
}
.hub-orbit__counter-spin{

    position:absolute;

    top:0;

    left:0;

    animation:hub-orbit-spin-reverse 100s linear infinite;

}
.hub-orbit__card{

    position:absolute;

    top:0;

    left:0;

    transform:translate(-50%,-50%);

    width:190px;

    background:var(--color-card);

    border:1px solid rgba(216,177,75,.3);

    border-radius:var(--radius-md);

    padding:14px 16px;

    text-align:left;

    box-shadow:var(--shadow-card);
}
.hub-orbit__card h4{

    font-family:var(--font-heading);

    font-size:1rem;

    color:var(--color-white);

    margin-bottom:4px;

}
.hub-orbit__card p{

    font-size:.8rem;

    line-height:1.5;

    color:var(--color-text);
}
@keyframes hub-orbit-spin{

    from{ transform:rotate(0deg); }

    to{ transform:rotate(360deg); }

}
@keyframes hub-orbit-spin-reverse{

    from{ transform:rotate(0deg); }

    to{ transform:rotate(-360deg); }

}

/* The orbit ring positions each card with a fixed 340px translateX
   from center — that radius doesn't scale down with the container,
   so on a narrow phone the cards land far outside the viewport on
   both sides no matter how small .hub-orbit itself is allowed to
   get. A circle of 7 cards doesn't have a smaller-but-still-circular
   form that fits a phone anyway, so drop the circular positioning
   and the (purely decorative) spin below 900px and lay the same
   center card + 7 cards out as a plain stack/grid instead. */
@media (max-width:900px){

    .hub-orbit{
        width:auto;
        height:auto;
    }
    .hub-orbit__center{
        position:static;
        transform:none;
        margin:0 auto 32px;
    }
    .hub-orbit__ring{
        position:static;
        inset:auto;
        animation:none;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:20px;
    }
    .hub-orbit__item{
        position:static;
        transform:none;
    }
    .hub-orbit__counter-static{
        position:static;
        transform:none;
    }
    .hub-orbit__counter-spin{
        position:static;
        animation:none;
    }
    .hub-orbit__card{
        position:static;
        transform:none;
        width:auto;
    }

}
@media (max-width:480px){

    .hub-orbit__ring{
        grid-template-columns:1fr;
    }

}

/* ==========================================
   SECTION 8 — DESIGNED TO FEEL FAMILIAR (stays dark)
========================================== */

.wd-familiar{

    background:var(--color-background-alt);

    padding:var(--space-3xl) 0;

}
.wd-familiar__content{

    max-width:720px;

    margin-inline:auto;

    text-align:center;

}
.wd-familiar__content h2{

    font-family:"Times New Roman", serif;

    font-size:2.6rem;

    line-height:1.3;

    color:var(--color-white);

    letter-spacing:-.5px;

    margin-bottom:32px;

}
.wd-familiar__text{

    font-size:1.35rem;

    line-height:1.7;

    color:var(--color-gold);

    max-width:760px;

    margin-inline:auto;

}
.wd-familiar__text--white{

    color:var(--color-white);

}
.wd-familiar__text em{

    font-style:italic;

    font-weight:700;

    white-space:nowrap;

}
.wd-familiar__content .wd-philosophy__divider{

    max-width:600px;

}

/* ==========================================
   LIGHT SECTIONS (alternating background rhythm)
========================================== */

.section-light{

    background:#ffffff !important;

}

/* Section 3 — Digital Extension */
.section-light .wd-philosophy__icon svg{

    color:var(--color-gold);

}
.section-light .wd-philosophy__content h2{

    color:#0B1D3A;

}
.section-light .wd-philosophy__divider{

    background:rgba(11,29,58,.12);

}
.section-light .wd-philosophy__example h3{

    color:#0B1D3A;

}
.section-light .wd-philosophy__example p{

    color:#5B6472;

}
.section-light .wd-philosophy__quote{

    color:var(--color-gold);

}

/* Section 6 — Build Around You (orbit) */
.section-light .wd-discovery__heading h2{

    color:#0B1D3A;

}
.section-light .wd-discovery__heading p{

    color:#5B6472;

}
.section-light .hub-orbit__center{

    background:#F1F2F4;

    border-color:var(--color-gold);

    box-shadow:none;

}
.section-light .hub-orbit__core-label{

    color:var(--color-gold);

}
.section-light .hub-orbit__core-title{

    color:#0B1D3A;

}
.section-light .hub-orbit__card{

    background:#F1F2F4;

    border-color:rgba(11,29,58,.12);

    box-shadow:0 6px 18px rgba(11,29,58,.08);
}
.section-light .hub-orbit__card h4{

    color:#0B1D3A;

}
.section-light .hub-orbit__card p{

    color:#5B6472;

}

/* Final CTA */
.section-light .final-cta__content h2{

    color:#0B1D3A;

}
.section-light .final-cta__content p{

    color:#5B6472;

}

/* ==========================================
   SERVICE OVERVIEW — closing pillars
   Centered hook + lead paragraph, then the supporting
   claims broken out into a scannable 2x2 card grid
   (icon + title + short claim) instead of a wall of
   prose. Closes on the same divider + italic-gold quote
   treatment used in .wd-philosophy, so the section still
   reads as part of the page's existing visual language.
========================================== */

.wd-overview{

    background:var(--color-background);

    padding:var(--space-3xl) 0;

}
.wd-overview__inner{

    max-width:760px;

    margin-inline:auto;

    text-align:center;

}
.wd-overview__inner h2{

    font-family:"Times New Roman", serif;

    font-size:2.6rem;

    line-height:1.3;

    color:var(--color-white);

    letter-spacing:-.5px;

    margin-bottom:22px;

}
.wd-overview__inner p{

    font-size:1.15rem;

    line-height:1.8;

    color:var(--color-text);

}
.wd-overview__grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:28px;

    max-width:940px;

    margin:var(--space-2xl) auto;

}
.wd-overview__card{

    position:relative;

    overflow:hidden;

    background:var(--color-card);

    border:1px solid rgba(216,177,75,.16);

    border-radius:var(--radius-md);

    padding:34px 32px;

    text-align:left;

    box-shadow:var(--shadow-card);

    transition:var(--transition);

    transition-property:transform,border-color,box-shadow;

}
.wd-overview__card::before{

    content:"";

    position:absolute;

    inset:0 0 auto 0;

    height:2px;

    background:linear-gradient(90deg, transparent, var(--color-gold), transparent);

    opacity:.6;

}
.wd-overview__card:hover{

    transform:translateY(-6px);

    border-color:rgba(216,177,75,.4);

    box-shadow:0 16px 36px rgba(0,0,0,.32);

}
.wd-overview__icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:52px;

    height:52px;

    margin-bottom:20px;

    border-radius:var(--radius-pill);

    background:rgba(216,177,75,.1);

}
.wd-overview__icon svg{

    width:24px;

    height:24px;

    color:var(--color-gold);

}
.wd-overview__card h3{

    font-family:var(--font-heading);

    font-size:1.3rem;

    color:var(--color-white);

    margin-bottom:10px;

}
.wd-overview__card p{

    font-size:.98rem;

    line-height:1.7;

    color:var(--color-text);

}
.wd-overview .wd-philosophy__divider{

    max-width:700px;

}
.wd-overview .wd-philosophy__quote{

    font-size:1.4rem;

}

@media (max-width:760px){

    .wd-overview__inner h2{

        font-size:2.1rem;

    }

    .wd-overview__grid{

        grid-template-columns:1fr;

        gap:20px;

    }

}