@charset "UTF-8";
/* ============================================================================
   ShowEvents — restyle of the existing theme
   ----------------------------------------------------------------------------
   Direction: the Wedist wedding-management reference Ran sent — pastel bands
   (lavender / blush / cream / lilac), a coral call to action, deep indigo
   type, and an elegant serif for headings.

   This file RESTYLES. It does not replace the hero, hide the sticky form, the
   side WhatsApp, the mobile buttons or the bottom bar, or swap any template.
   Everything the theme renders keeps rendering; only its colour, type and
   spacing change. Scoped to body.se-v2, so with the flag off it is inert.
   ========================================================================== */

/* The theme registers Assistant-SemiBold under weight 900, so there is no real
   600 to reach for. Register the file at the weight it actually is. */
@font-face {
    font-display: swap;
    font-family: 'Assistant';
    font-weight: 600;
    font-style: normal;
    src: url('fonts/Assistant/Assistant-SemiBold.woff2') format('woff2'),
         url('fonts/Assistant/Assistant-SemiBold.ttf') format('truetype');
}

body.se-v2 {
    /* ---- grounds: the reference alternates four pastels ---------------- */
    --lav:   #F6F6FD;   /* page */
    --blush: #FCE8E2;
    --cream: #FFFBF1;
    --lilac: #EFE9F9;
    --white: #FFFFFF;

    /* ---- ink ---------------------------------------------------------- */
    --ink:    #221C46;   /* 14.76:1 on lavender */
    --body:   #4A4570;   /*  8.21:1 */
    --muted:  #635E8C;   /*  5.56:1 */
    --line:   #E4E2F2;   /* decorative hairline */
    --border: #8681AC;   /*  3.39:1 - the lightest legal control border */

    /* ---- coral --------------------------------------------------------
       The reference puts white on a bright coral, which measures 2.98:1 and
       fails. Two values instead: a deep coral that carries white text, and
       the bright one kept for accents and for fills that take dark type. */
    --coral:       #C6411D;   /* white on it: 5.03:1 */
    --coral-hover: #A8360F;
    --coral-br:    #F2643C;   /* accents; with --ink on it: 5.04:1 */
    --coral-soft:  #FDEDE7;

    --font-display: 'Frank Ruhl Libre', 'almoni-tzar', Georgia, serif;
    --font-body:    'Assistant', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --fs-h1:   clamp(2.1rem, 1.35rem + 2.6vw, 3.5rem);
    --fs-h2:   clamp(1.7rem, 1.25rem + 1.7vw, 2.75rem);
    --fs-h3:   clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
    --fs-h4:   clamp(1.1rem, 1.04rem + 0.3vw, 1.25rem);
    --fs-lead: clamp(1rem, 0.96rem + 0.25vw, 1.15rem);
    --fs-body: 1.0625rem;
    --fs-sm:   0.9375rem;
    --fs-xs:   0.8125rem;

    --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
    --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

    --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:999px;
    --r-arch: 180px 180px var(--r-lg) var(--r-lg);   /* the reference's arch tops */

    --sh-1: 0 2px 10px rgba(34,28,70,.05);
    --sh-2: 0 8px 28px rgba(34,28,70,.08);
    --sh-3: 0 18px 46px rgba(34,28,70,.12);

    --ease: cubic-bezier(.2,.7,.3,1);
    --dur: 260ms;
}

/* ===========================================================================
   1. Base
   ======================================================================== */

body.se-v2 {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.75;
    color: var(--body);
    background: var(--lav);
    -webkit-font-smoothing: antialiased;
}
body.se-v2 #wrapper { overflow-x: clip; }

/* Justified Hebrew with no hyphenation opens rivers at every narrow measure,
   and the theme sets it inline in a dozen places. */
body.se-v2 [style*="justify"],
body.se-v2 .ops,
body.se-v2 p { text-align: start !important; }
body.se-v2 .center, body.se-v2 [class*="center"] { text-align: center !important; }

body.se-v2 a { text-decoration: none; }
body.se-v2 img { max-width: 100%; height: auto; }

body.se-v2 :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--coral);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* ===========================================================================
   2. Typography - the serif is what makes the reference feel expensive
   ======================================================================== */

body.se-v2 :is(h1,h2,h3,h4,h5,h6) {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--ink);
    line-height: 1.2;
    letter-spacing: 0;
}
body.se-v2 h1, body.se-v2 .hfs55, body.se-v2 .hfs50 { font-size: var(--fs-h1); }
body.se-v2 h2, body.se-v2 .hfs45, body.se-v2 .hfs40 { font-size: var(--fs-h2); }
body.se-v2 .hfs35, body.se-v2 .hfs30                { font-size: var(--fs-h3); }
body.se-v2 h3, body.se-v2 .hfs26, body.se-v2 .hfs23,
body.se-v2 .hfs22                                   { font-size: var(--fs-h3); }
body.se-v2 h4, body.se-v2 .hfs21, body.se-v2 .hfs20 { font-size: var(--fs-h4); }
body.se-v2 .hfs18, body.se-v2 .hfs17                { font-size: var(--fs-body); }
body.se-v2 .hfs16, body.se-v2 .hfs15,
body.se-v2 .hfs14, body.se-v2 .hfs13                { font-size: var(--fs-sm); }

body.se-v2 .ops,
body.se-v2 .Assistant,
body.se-v2 p { font-family: var(--font-body); line-height: 1.75; }

body.se-v2 .sc1 { color: var(--ink) !important; }
body.se-v2 .sc2 { color: var(--coral) !important; }
body.se-v2 .bold { font-weight: 600 !important; }

/* the theme's section underline: a red slab becomes a coral hairline */
body.se-v2 .redline {
    width: 56px; height: 2px;
    border-radius: var(--r-pill);
    background: var(--coral-br);
    margin-block: var(--s-3) var(--s-5);
}
body.se-v2 .redline.margin { margin-inline: auto; }

/* the theme's six inline greys, unified onto two */
body.se-v2 [style*="#1a1a1a"],
body.se-v2 [style*="#191717"],
body.se-v2 [style*="#1f2021"],
body.se-v2 [style*="#242d3c"],
body.se-v2 [style*="#434244"],
body.se-v2 [style*="#3b3737"] { color: var(--body) !important; }
body.se-v2 [style*="#9e9999"] { color: var(--muted) !important; }

/* ===========================================================================
   3. Buttons - coral primary, indigo secondary
   ======================================================================== */

body.se-v2 .readmore,
body.se-v2 .mainlink {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 46px;
    padding: 0 var(--s-5);
    border-radius: var(--r-sm);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--fs-sm);
    letter-spacing: .02em;
    width: max-content;
    box-shadow: none !important;
    transition: background-color var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}
body.se-v2 .readmore {
    background: var(--coral) !important;
    color: #fff !important;
}
body.se-v2 .readmore:hover {
    background: var(--coral-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(198,65,29,.26) !important;
}
body.se-v2 .mainlink {
    background: var(--ink) !important;
    color: #fff !important;
}
body.se-v2 .mainlink:hover {
    background: #17123A !important;
    transform: translateY(-2px);
    box-shadow: var(--sh-2) !important;
}
body.se-v2 .mainlink.marginl { margin-inline: auto; }

/* ===========================================================================
   4. Layout and section bands
   ======================================================================== */

body.se-v2 .container { max-width: 1240px; width: min(100% - 2 * var(--s-4), 1240px); }
body.se-v2 .container.c900 { max-width: 780px; }
body.se-v2 .container.c13, body.se-v2 .container.c14,
body.se-v2 .container.c15, body.se-v2 .container.c16,
body.se-v2 .container.c17, body.se-v2 .container.c18 { max-width: 1240px; }

body.se-v2 .pdgtb40 { padding-block: clamp(var(--s-7), 5vw, var(--s-9)) !important; }
body.se-v2 .pdgtb80 { padding-block: clamp(var(--s-8), 6vw, var(--s-9)) !important; }

/* the card rows: wrapped flex with calc() widths becomes a real grid */
body.se-v2 .inrowf {
    display: grid !important;
    gap: var(--s-5);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
body.se-v2 .inrowf > * { width: auto !important; margin-inline: 0 !important; }
@media (max-width: 767px) {
    body.se-v2 .inrowf { grid-template-columns: repeat(auto-fill, minmax(min(100%, 158px), 1fr)); gap: var(--s-3); }
}

/* alternating pastel bands, the way the reference stacks them */
body.se-v2 #content > div:nth-of-type(even) { background: var(--white); }
body.se-v2 #content > div:nth-of-type(4n+3) { background: var(--cream); }
body.se-v2 #content > div[class*="bgimg"],
body.se-v2 #content > div[style*="background-image"] { background-color: transparent; }

/* ===========================================================================
   5. Header - kept whole, just lightened
   ======================================================================== */

body.se-v2 header[role="banner"] {
    background: rgba(246,246,253,.94) !important;
    backdrop-filter: saturate(150%) blur(12px);
    border-top: 0 !important;
    border-bottom: 1px solid var(--line);
    box-shadow: none !important;
}
body.se-v2.se-scrolled header[role="banner"] { box-shadow: var(--sh-1) !important; }
body.se-v2 header[role="banner"] > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
}
body.se-v2 header[role="banner"] .logo { flex: 0 0 auto; margin: 0 !important; }
body.se-v2 header[role="banner"] .logo img { max-height: 54px; width: auto; }
body.se-v2 header[role="banner"] > .container > .flex { flex: 0 0 auto; }
body.se-v2 #MainNav { flex: 1 1 auto; min-width: 0; }

@media (min-width: 801px) {
    body.se-v2 nav#MainNav div.main_menu > ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
    body.se-v2 nav#MainNav div.main_menu > ul > li > a {
        color: var(--ink) !important;
        background: none !important;
        font-family: var(--font-body);
        font-weight: 500;
        /* px, not rem: the theme sets html{font-size:18px} and a rem clamp
           here resolves about 4px larger than it reads */
        font-size: clamp(13px, .72vw + 4px, 15px) !important;
        padding: 10px clamp(7px, .75vw, 13px) !important;
        white-space: nowrap;
        border-radius: var(--r-sm);
        position: relative;
    }
    body.se-v2 nav#MainNav div.main_menu ul li:hover > a,
    body.se-v2 nav#MainNav div.main_menu ul li.current-menu-item > a {
        color: var(--coral) !important;
        background: none !important;
    }
    /* a coral rule grows from the start edge, as the reference underlines */
    body.se-v2 nav#MainNav div.main_menu > ul > li > a::after {
        content: "";
        position: absolute;
        inset-inline: clamp(7px, .75vw, 13px);
        bottom: 5px;
        height: 2px;
        border-radius: 2px;
        background: var(--coral-br);
        transform: scaleX(0);
        transform-origin: right;   /* RTL: grows from the start edge */
        transition: transform var(--dur) var(--ease);
    }
    body.se-v2 nav#MainNav div.main_menu > ul > li:hover > a::after,
    body.se-v2 nav#MainNav div.main_menu ul li.current-menu-item > a::after { transform: scaleX(1); }
    body.se-v2 nav#MainNav div.main_menu > ul > li ul.sub-menu {
        background: #fff !important;
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        box-shadow: var(--sh-3);
        overflow: hidden;
    }
    body.se-v2 nav#MainNav .sub-menu li a { color: var(--ink) !important; }
}

/* eight long Hebrew labels plus a logo do not fit one row until ~1400px */
@media (min-width: 801px) and (max-width: 1399px) {
    body.se-v2 header[role="banner"] > .container { flex-wrap: wrap; padding-block: var(--s-2); }
    body.se-v2 #MainNav { flex: 1 0 100%; order: 3; }
    body.se-v2 nav#MainNav div.main_menu > ul { justify-content: center; }
}

/* the header phone stays - it is one of the buttons that must not vanish */
body.se-v2 .headerphone {
    color: var(--ink) !important;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--fs-body) !important;
}
body.se-v2 .headerphone a { color: var(--ink) !important; }
body.se-v2 .headerphone svg,
body.se-v2 .headerphone path { fill: var(--coral); }

/* ===========================================================================
   6. Hero - the theme's own video and images, given a soft frame
   ======================================================================== */

body.se-v2 .topvideo,
body.se-v2 .topimages { background: var(--lilac); position: relative; overflow: hidden; }

/* The hero box is min-height:60vh, but the media inside keeps its own aspect
   ratio - 960x540 at phone width is 211px in a 487px box, so 276px of the box
   was empty. The theme hid that by yanking the tiles up 210px over it. Fill
   the box instead, then the overlap can be a design choice rather than a
   patch over a hole. */
body.se-v2 .topvideo > img,
body.se-v2 .topvideo > video,
body.se-v2 .topimages > div {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    object-fit: cover;
    /* the theme sets z-index:-1 inline. Once .topvideo is positioned, a
       negative-z child paints behind its parent's background and vanishes -
       the same trap as an isolated stacking context. Put it back on 0. */
    z-index: 0 !important;
}

/* the tiles still ride up over the hero, just not by a whole screen */
body.se-v2 .container.c17.relative[style*="-210px"] { margin-top: -120px !important; }
@media (max-width: 767px) {
    body.se-v2 .container.c17.relative[style*="-210px"] { margin-top: -80px !important; }
}

/* ===========================================================================
   7. Cards
   ======================================================================== */

/* category tiles: arch-topped and image-forward, as in the reference collage */
body.se-v2 .catbox {
    position: relative;
    display: block !important;
    height: auto !important;
    padding: 0 !important;
    border-radius: var(--r-arch) !important;
    background: var(--white) !important;
    border: 1px solid var(--line);
    box-shadow: var(--sh-1) !important;
    overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
body.se-v2 .catbox:hover {
    transform: translateY(-4px);
    background: var(--white) !important;
    box-shadow: var(--sh-3) !important;
}
body.se-v2 .catbox .se-media,
body.se-v2 .catbox .se-media--tile { display: block; aspect-ratio: 3 / 4; }
body.se-v2 .catbox img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 700ms var(--ease);
}
body.se-v2 .catbox:hover img { transform: scale(1.05); }
body.se-v2 .catbox .se-media__caption { display: none; }
body.se-v2 .catbox > div > div:last-child {
    padding: var(--s-4) var(--s-3) var(--s-5) !important;
    font-family: var(--font-display) !important;
    font-size: var(--fs-h4) !important;
    font-weight: 500;
    color: var(--ink) !important;
    background: var(--white);
    transition: color var(--dur) var(--ease);
}
body.se-v2 .catbox:hover > div > div:last-child { color: var(--coral) !important; }

/* product / project / article cards */
body.se-v2 .product,
body.se-v2 .project {
    display: flex !important;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-1);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
body.se-v2 .product:hover,
body.se-v2 .project:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
body.se-v2 :is(.product, .project) > .bgimg:first-child {
    height: auto !important;
    aspect-ratio: 4 / 3;
    min-height: 0 !important;
    background-size: cover;
    background-position: center;
    border-radius: 0 !important;
}
/* the archive uses background-contain, because 37% of this library is
   portrait and cover crops the subject out. Keep contain, frame it. */
body.se-v2 .product .bgcontain {
    height: auto !important;
    aspect-ratio: 4 / 3;
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--lilac);
}
body.se-v2 :is(.product, .project) > *:not(.bgimg):not(.bgcontain) { padding-inline: var(--s-5); }
body.se-v2 :is(.product, .project) > .pdg20 { padding: var(--s-5) !important; box-shadow: none !important; }
body.se-v2 :is(.product, .project) h3 {
    font-size: var(--fs-h4) !important;
    color: var(--ink) !important;
    padding-block: var(--s-4) var(--s-2) !important;
    line-height: 1.35;
}
body.se-v2 :is(.product, .project) .ops {
    color: var(--muted) !important;
    font-size: var(--fs-sm) !important;
    flex: 1;
}
body.se-v2 :is(.product, .project) hr {
    border: 0; border-top: 1px solid var(--line); margin-block: var(--s-3);
}
body.se-v2 :is(.product, .project) .readmore { margin: var(--s-4) 0 var(--s-5); }
body.se-v2 .product .flex .txleft {
    color: var(--coral) !important;
    font-weight: 700 !important;
    font-size: var(--fs-body) !important;
}

/* ===========================================================================
   8. Forms
   ======================================================================== */

body.se-v2 .wpcf7 :is(input[type=text], input[type=tel], input[type=email], select, textarea) {
    width: 100%;
    min-height: 50px;
    padding: 0 var(--s-4);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--ink);
    background: #fff;
    border: 1.5px solid var(--border) !important;   /* 3.39:1 */
    border-radius: var(--r-sm) !important;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
body.se-v2 .wpcf7 textarea { padding-block: var(--s-3); min-height: 120px; }
body.se-v2 .wpcf7 :is(input, select, textarea):focus {
    border-color: var(--coral) !important;
    box-shadow: 0 0 0 4px rgba(198,65,29,.14);
    outline: none;
}
body.se-v2 .wpcf7 ::placeholder { color: var(--muted); opacity: 1; }
body.se-v2 .wpcf7 input[type=submit] {
    width: 100%;
    min-height: 54px;
    background: var(--coral) !important;
    color: #fff !important;
    border: 0;
    border-radius: var(--r-sm) !important;
    font-family: var(--font-body);
    font-size: var(--fs-lead) !important;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
body.se-v2 .wpcf7 input[type=submit]:hover { background: var(--coral-hover) !important; transform: translateY(-2px); }
body.se-v2 .wpcf7-not-valid-tip { color: #B3261E; font-size: var(--fs-sm); font-weight: 600; }
body.se-v2 .wpcf7 .wpcf7-not-valid { border-color: #B3261E !important; }
body.se-v2 .wpcf7-response-output {
    border-radius: var(--r-sm) !important;
    border-width: 1.5px !important;
    font-size: var(--fs-sm);
    padding: var(--s-3) var(--s-4) !important;
}

/* the footer form panel: a flat red block becomes blush with indigo type */
body.se-v2 footer .flex > div[style*="e71515"] {
    background: var(--blush) !important;
    height: auto !important;
    padding-block: clamp(var(--s-7), 6vw, var(--s-9)) !important;
}
body.se-v2 footer .flex > div[style*="e71515"] :is(h2, p, div) { color: var(--ink) !important; }
body.se-v2 footer .flex > .bgimg { height: auto !important; min-height: 340px; }

/* ===========================================================================
   9. Footer
   ======================================================================== */

body.se-v2 .mask2 > .flex { background-color: var(--ink) !important; }
body.se-v2 footer .ftitle {
    font-family: var(--font-display) !important;
    font-size: var(--fs-h4) !important;
    border-bottom: 0 !important;
    padding-bottom: var(--s-2);
    position: relative;
}
body.se-v2 footer .ftitle::after {
    content: ""; position: absolute; inset-inline-start: 0; bottom: 0;
    width: 40px; height: 2px; border-radius: 2px; background: var(--coral-br);
}
body.se-v2 footer #FooterNav a,
body.se-v2 footer .fphone {
    font-size: var(--fs-sm) !important;
    color: rgba(255,255,255,.84) !important;
    line-height: 2;
}
body.se-v2 footer #FooterNav a:hover { color: #fff !important; }
body.se-v2 .legal-links { background: var(--ink); }
body.se-v2 .legal-links a { color: rgba(255,255,255,.7) !important; font-size: var(--fs-sm); }
body.se-v2 #leos { background: var(--ink) !important; }
body.se-v2 #leos img { height: 26px !important; opacity: .45; }

/* ===========================================================================
   10. The theme's own floating buttons - restyled, never hidden
   ======================================================================== */

body.se-v2 .fixed-buttons {
    inset-inline: 0;
    bottom: 0;
    display: flex;
    gap: 0;
    background: var(--ink);
    box-shadow: 0 -4px 24px rgba(34,28,70,.24);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 9000;
}
body.se-v2 .fixed-buttons a {
    flex: 1 1 0;
    display: flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: 60px;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 700;
    color: #fff !important;
}
body.se-v2 .fixed-buttons a.cblue  { background: var(--coral); }
body.se-v2 .fixed-buttons a.cgreen { background: #157C3C; }
body.se-v2 .fixed-buttons a:active { filter: brightness(.92); }
body.se-v2 .fixed-buttons .ficon { width: 20px; height: 20px; }

@media (max-width: 767px) {
    body.se-v2 { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
    body.se-v2 #leos { position: static; }
    body.se-v2 .sidewhatsapp,
    body.se-v2 #BackToTop { bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ===========================================================================
   11. Archive sidebar and banner
   ======================================================================== */

body.se-v2 #ProductsArchPage .flex.jcsb { gap: var(--s-6); align-items: flex-start; }
body.se-v2 #SideBar {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--s-3);
}
body.se-v2 #SideBar a {
    display: block;
    padding: 10px var(--s-3);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink);
    line-height: 1.4;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
body.se-v2 #SideBar a:hover { background: var(--coral-soft); color: var(--coral); }
body.se-v2 #SideBar .current-menu-item > a {
    background: var(--coral-soft);
    color: var(--coral);
    border-inline-start: 3px solid var(--coral-br);
}
body.se-v2 #ProductsArchPage h2[style*="e3010f"] {
    border-bottom: 0 !important;
    padding: 0 0 var(--s-3) !important;
    font-size: var(--fs-h4) !important;
}
/* 600px of wordless banner is most of a phone screen */
body.se-v2 .topimage {
    height: clamp(220px, 34svh, 400px) !important;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}

@media (max-width: 900px) {
    body.se-v2 #ProductsArchPage .flex.jcsb { flex-direction: column-reverse; }
    body.se-v2 #ProductsArchPage .w25 { width: 100% !important; }
}

/* ===========================================================================
   12. Articles and the about block
   ======================================================================== */

body.se-v2 .entry { max-width: 70ch; }
body.se-v2 .entry :is(h2, h3) { margin-block: var(--s-7) var(--s-3); }
body.se-v2 .entry p { margin-block: 0 var(--s-4); }
body.se-v2 .entry :is(ul, ol) { margin: 0 0 var(--s-4); padding-inline-start: var(--s-5); }
body.se-v2 .entry li { margin-bottom: var(--s-2); }
body.se-v2 .entry a:not(.readmore):not(.mainlink) {
    color: var(--coral);
    text-decoration: underline;
    text-underline-offset: 3px;
}
body.se-v2 .se-byline { color: var(--muted) !important; font-size: var(--fs-sm) !important; }

body.se-v2 .video_about video,
body.se-v2 .circlebox {
    height: auto !important;
    aspect-ratio: 4 / 5;
    width: 100%;
    border-radius: var(--r-arch);
    object-fit: cover;
}

/* ===========================================================================
   13. Motion
   ======================================================================== */

body.se-v2 .se-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 560ms var(--ease), transform 560ms var(--ease);
}
body.se-v2 .se-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    body.se-v2 *, body.se-v2 *::before, body.se-v2 *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
    body.se-v2 .se-reveal { opacity: 1; transform: none; }
}

/* ===========================================================================
   14. Responsive
   ======================================================================== */

@media (max-width: 1024px) {
    body.se-v2 header[role="banner"] .logo img { max-height: 46px; }
}
@media (max-width: 800px) {
    body.se-v2 nav#MainNav,
    body.se-v2 nav#MainNav ul.sub-menu { background-color: rgba(34,28,70,.97) !important; }
    body.se-v2 #MobNavBtn { background: var(--coral) !important; }
    body.se-v2 nav#MainNav div.main_menu > ul > li > a {
        color: rgba(255,255,255,.92) !important;
        font-size: var(--fs-lead) !important;
        padding: var(--s-3) var(--s-5) !important;
        display: block;
    }
    body.se-v2 .container { width: calc(100% - 2 * var(--s-4)); }
    body.se-v2 .mblock > * { width: 100% !important; }
}

/* ===========================================================================
   15. Card text and the price row
   The archive card centres its title and excerpt, which at three-up widths
   gives a ragged column, and it lays the two prices side by side in w50
   halves that wrap mid-label. Left-align the copy, stack the prices, and let
   the strikethrough do the work the second label was doing in words.
   ======================================================================== */

body.se-v2 :is(.product, .project) { text-align: start; }
body.se-v2 :is(.product, .project) :is(h3, .ops, p) { text-align: start !important; }

body.se-v2 :is(.product, .project) .flex {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
body.se-v2 :is(.product, .project) .flex > div {
    width: 100% !important;
    text-align: start !important;
    font-size: var(--fs-sm) !important;
    line-height: 1.5;
}
/* the original price, once there is a sale price under it */
body.se-v2 :is(.product, .project) .flex > div:first-child:not(:only-child) {
    color: var(--muted) !important;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
body.se-v2 :is(.product, .project) .flex > .txleft {
    color: var(--coral) !important;
    font-weight: 700 !important;
    font-size: var(--fs-body) !important;
    text-decoration: none;
}