/*
 * Ifatis — Homepage art direction: "Movement Editorial"
 * Loaded only on the home template. Scoped to .page-template-home.
 * Brand palette + Assistant font unchanged; the layout, rhythm and
 * visual language are fully reimagined. Content is untouched.
 * Hardened for any content length + any image colour (see legibility engine).
 */

/* ============================================================
   0. Home atmosphere + local tokens
   ============================================================ */
.page-template-home {
    --ink: #2b2230;
    --ink-2: #574b5c;
    --edge: rgba(97, 73, 95, 0.14);
    --shadow-plum: 0 6px 20px -12px rgba(43, 34, 48, 0.28);
    --wash: #f3ece9;              /* warm paper */
    --text-scrim: 0 2px 14px rgba(0,0,0,0.55);   /* defensive text-shadow over images */
}

/* Full-bleed hero sits behind the (transparent) fixed header */
body.page-template-home { padding-top: 0; background: var(--wash); }

/* Fine grain for depth over the whole page */
body.page-template-home::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
.page-template-home main { position: relative; z-index: 2; }

/* Transparent header while at the top of the home page, over the hero.
   Never fully clears so light nav/logo/hamburger stay legible over any image. */
.page-template-home:not(.is-scrolled) header#menu {
    background: linear-gradient(180deg, rgba(43,34,48,0.72) 0%, rgba(43,34,48,0.4) 60%, rgba(43,34,48,0.3) 100%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}
.page-template-home:not(.is-scrolled) .hamburger-inner,
.page-template-home:not(.is-scrolled) .hamburger-inner::before,
.page-template-home:not(.is-scrolled) .hamburger-inner::after { box-shadow: 0 1px 3px rgba(0,0,0,0.55); }
/* The open drawer shares ONE background with the bar (set on the header),
   so the items never look like a separate opaque block. */
.page-template-home header#menu .mobile-toggle .menu-wrapper.active { background: transparent; }
/* At the top over the hero, the whole open menu is one translucent glassy surface
   (matches the transparent bar's opacity instead of a solid item block). */
.page-template-home:not(.is-scrolled) header#menu:has(.menu-wrapper.active) {
    background: rgba(43, 34, 48, 0.85);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: none;
}

/* Reveal-on-scroll (gated on html.js so no-JS keeps content visible) */
html.js .page-template-home .reveal { opacity: 0; transform: translateY(38px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
html.js .page-template-home .reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html.js .page-template-home .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Shared editorial section header
   ============================================================ */
.page-template-home .section-title {
    font-weight: 800;
    color: var(--c-plum);
    letter-spacing: -0.02em;
    line-height: 1.02;
    margin: 0 0 clamp(1.75rem, 4vw, 3rem);
    position: relative;
    overflow-wrap: break-word;
    word-break: break-word;
}
.page-template-home .flex-section-container { position: relative; }

/* ============================================================
   1. HERO — full-bleed, oversized wordmark
   ============================================================ */
.page-template-home .hero-container {
    position: relative;
    min-height: 100svh;
    max-height: 100svh;              /* keep the whole hero (incl. scroll cue) in one viewport */
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--c-plum-deep);
    isolation: isolate;
}
.page-template-home .hero-media { position: absolute; inset: 0; z-index: 0; }
.page-template-home .hero-bg {
    width: 100%; height: 100%;
    object-fit: cover; object-position: 62% 28%;
    transform: scale(1.04);
    animation: heroZoom 12s ease-out forwards;
    /* fade the composed image's left edge into the plum canvas */
    -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 48%);
    mask-image: linear-gradient(90deg, transparent 4%, #000 48%);
}
/* Legibility engine (A): scrim darkest under the text zone (bottom + RTL right),
   never below ~0.4 behind the wordmark, independent of the image. */
.page-template-home .hero-scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(0deg, rgba(43,34,48,0.94) 0%, rgba(43,34,48,0.5) 45%, rgba(43,34,48,0.4) 100%),
        linear-gradient(270deg, rgba(43,34,48,0.85) 0%, rgba(43,34,48,0.15) 45%, transparent 65%);
}
.page-template-home .hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-block: calc(var(--menu-h, 90px) + 1.25rem) clamp(5rem, 8vh, 6.5rem);
    /* extra room on the RTL start (right) so the accessibility widget can't hide the wordmark */
    padding-inline-start: clamp(2rem, 7vw, 6rem);
    padding-inline-end: clamp(1.25rem, 4vw, 3rem);
}
.page-template-home .hero-container .home-title { margin: 0; font-weight: 800; }
.page-template-home .hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--c-blush);
    font-weight: 700;
    font-size: clamp(0.9rem, 0.8rem + 0.4vw, 1.15rem);
    letter-spacing: 0.02em;
    /* eyebrow now sits below the wordmark, so the gap moves to the top */
    margin: clamp(0.5rem, 2vw, 1.25rem) 0 0;
    animation: heroUp 0.9s 0.15s both var(--ease-out);
}
.page-template-home .hero-eyebrow::before {
    content: '';
    width: clamp(28px, 5vw, 64px);
    height: 2px;
    background: var(--c-blush);
    border-radius: var(--r-pill);
    flex: 0 0 auto;
}
.page-template-home .hero-wordmark {
    display: block;
    color: #fff;
    font-size: clamp(2.6rem, 12vw, 11rem);
    line-height: 0.9;
    letter-spacing: -0.03em;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: none;
    animation: heroTitle 1.1s 0.05s both var(--ease-out);
}

/* scroll cue */
.page-template-home .hero-scroll {
    position: absolute;
    bottom: clamp(1rem, 3vh, 2rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: block;
}
.page-template-home .hero-scroll-track {
    display: block;
    width: 26px; height: 44px;
    border: 2px solid rgba(255,255,255,0.7);
    border-radius: var(--r-pill);
    position: relative;
}
.page-template-home .hero-scroll-dot {
    position: absolute;
    top: 7px; left: 50%;
    width: 4px; height: 8px;
    margin-left: -2px;
    background: #fff;
    border-radius: var(--r-pill);
    animation: scrollDot 1.8s var(--ease) infinite;
}
.page-template-home .hero-scroll:hover .hero-scroll-track { border-color: #fff; }

/* On mobile the fixed contact bar sits at the bottom — end the hero above it */
@media (max-width: 991px) {
    .page-template-home .hero-container {
        min-height: calc(100svh - var(--f-b-h, 64px));
        max-height: calc(100svh - var(--f-b-h, 64px));
    }
}

@keyframes heroZoom  { to { transform: scale(1); } }
@keyframes heroUp    { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes heroTitle { from { opacity: 0; transform: translateY(40px); letter-spacing: 0.04em; } to { opacity: 1; transform: none; letter-spacing: -0.03em; } }
@keyframes scrollDot { 0%{opacity:0;transform:translateY(0);} 40%{opacity:1;} 80%{opacity:0;transform:translateY(16px);} 100%{opacity:0;} }

/* ============================================================
   2. Title section ("האימונים שלנו") — editorial header
   ============================================================ */
.page-template-home #section_0 {
    background: var(--wash);
    padding-top: clamp(3.5rem, 8vw, 7rem);
    padding-bottom: clamp(1.5rem, 3vw, 3rem);
}
.page-template-home #section_0 .section-title {
    /* !important intentionally overrides the ACF inline color so the heading
       always meets AA on the light --wash, regardless of the chosen colour. */
    color: var(--c-plum) !important;
    font-size: clamp(2rem, 7vw, 5.5rem);
    margin: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}
.page-template-home #section_0 .section-title::after {
    content: '';
    display: block;
    width: clamp(48px, 7vw, 90px);
    height: 5px;
    margin: 1rem 0 0;                 /* follows the (RTL-start) text alignment */
    border-radius: var(--r-pill);
    background: var(--grad-rose) !important;   /* pin against a pale ACF udl_color */
}
.page-template-home #section_0 .section-title.text-center::after { margin-inline: auto; }

/* ============================================================
   3. WORKOUTS — image-forward bento gallery
   ============================================================ */
.page-template-home .grid-section {
    background: var(--wash);
    padding-bottom: clamp(3rem, 6vw, 6rem);
    padding-inline: clamp(0.75rem, 3vw, 2.5rem);
}
/* Editorial bento mosaic (>=1200px): a large pilates hero + a tall strength
   tile on top, then the 4 supporting tiles in an alternating wide/narrow rhythm.
   Every tile stays wide enough to show its FULL hover copy (no clamp/shrink).
   Tiles are placed by their order class (tile-1..6, featured first — see grid.php):
     tile-1 pilates(hero)  tile-2 strength      tile-3 עיצוב
     tile-4 פונקציונלי      tile-5 טבטה          tile-6 לידה   */
/* Varied mosaic — three tile sizes interlocking:
     big (heroes): pilates, strength    tall: עיצוב, פונקציונלי    wide banners: טבטה, לידה
   Pilates + Strength are the two big featured tiles. The two formerly-square tiles
   (עיצוב, פונקציונלי) are now TALL, and the wide banners get enough height for their
   copy. 4-col × 4-row grid tessellates cleanly; every tile fits its full text. */
.page-template-home .grid-section > .row:not(.not-sure) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* rows 1-2 sized so the two big hero tiles are ~1.5:1 (each big tile spans
       both, ≈32vw tall over a ~2-col ≈46vw width). rows 3-4 stay tall enough for
       the wide banners' copy (לידה needs ~375). */
    grid-template-rows: 15.2vw 15.2vw clamp(390px, 21vw, 420px) clamp(390px, 21vw, 420px);
    grid-template-areas:
        "pil pil str str"
        "pil pil str str"
        "eit fun tab tab"
        "eit fun lid lid";
    gap: clamp(0.5rem, 0.8vw, 0.9rem);
    margin: 0;
}
.page-template-home .grid-section > .row:not(.not-sure) > .single-grid-element {
    position: relative;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    min-height: 0;
}
.page-template-home .grid-section > .row:not(.not-sure) > .tile-1 { grid-area: pil; }  /* pilates — big hero */
.page-template-home .grid-section > .row:not(.not-sure) > .tile-2 { grid-area: str; }  /* strength — big hero */
.page-template-home .grid-section > .row:not(.not-sure) > .tile-3 { grid-area: eit; }  /* עיצוב — tall */
.page-template-home .grid-section > .row:not(.not-sure) > .tile-4 { grid-area: fun; }  /* פונקציונלי — tall */
.page-template-home .grid-section > .row:not(.not-sure) > .tile-5 { grid-area: tab; }  /* טבטה — wide */
.page-template-home .grid-section > .row:not(.not-sure) > .tile-6 { grid-area: lid; }  /* לידה — wide */

.page-template-home .grid-section .single-grid-element .inner {
    position: absolute;
    inset: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    display: block;
    box-shadow: var(--shadow-plum);
    background: var(--c-plum-deep);
}
.page-template-home .grid-section .single-grid-element .elem-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.9s var(--ease);
}
.page-template-home .grid-section .single-grid-element .inner:hover .elem-img,
.page-template-home .grid-section .single-grid-element .inner:focus-within .elem-img { transform: scale(1.06); }

/* Legibility engine (B): scrim darkest at the bottom text zone, deepens on hover. */
.page-template-home .grid-section .single-grid-element .inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(43,34,48,0.93) 0%, rgba(43,34,48,0.7) 45%, rgba(43,34,48,0.32) 100%);
    transition: opacity 0.5s var(--ease);
}
.page-template-home .grid-section .single-grid-element .inner:hover::after,
.page-template-home .grid-section .single-grid-element .inner:focus-within::after { opacity: 1; }

.page-template-home .grid-section .single-grid-element .content {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 2;
    min-width: 0;
    max-height: 100%;
    text-align: right;
    padding: clamp(1.1rem, 1.7vw, 1.7rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.page-template-home .grid-section > .row:not(.not-sure) > .single-grid-element.is-featured .content {
    padding: clamp(1.5rem, 2.2vw, 2.4rem);
}
.page-template-home .grid-section .single-grid-element.is-featured .content .elem-title {
    font-size: clamp(1.9rem, 3vw, 3rem);
}
.page-template-home .grid-section .single-grid-element .content .elem-title {
    color: #fff !important;
    font-weight: 800;
    font-size: clamp(1.5rem, 2.3vw, 2.4rem);
    line-height: 1.05;
    margin: 0;
    letter-spacing: -0.01em;
    position: relative;
    padding-bottom: 0.7rem;
    overflow-wrap: anywhere;
    word-break: break-word;
    flex: 0 0 auto;
}
.page-template-home .grid-section .single-grid-element .content .elem-title::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 44px; height: 4px;
    border-radius: var(--r-pill);
    background: var(--c-blush);
}
/* description + CTA reveal on hover/focus. The wrapper animates its TRUE height
   via grid-template-rows, so the open AND close are equally smooth. Full text,
   no line clamp — the taller tiles give it room. */
.page-template-home .grid-section .single-grid-element .content .tile-body {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    width: 100%;
    min-height: 0;
    transition: grid-template-rows 0.55s var(--ease), opacity 0.45s var(--ease);
}
.page-template-home .grid-section .single-grid-element .content .tile-body-inner {
    min-height: 0;
    overflow: hidden;
}
.page-template-home .grid-section .single-grid-element .content .tile-body-inner p {
    color: rgba(255,255,255,0.95) !important;
    font-size: clamp(0.92rem, 1.05vw, 1.05rem);
    line-height: 1.45;
    margin: 0.5rem 0 0;
    overflow-wrap: anywhere;
}
.page-template-home .grid-section .single-grid-element .content .tile-body-inner .btn-ifatis {
    margin-top: 0.7rem;
    transform: translateY(10px);
    transition: transform 0.5s var(--ease) 0.05s;
}
.page-template-home .grid-section .single-grid-element .inner:hover .content .tile-body,
.page-template-home .grid-section .single-grid-element .inner:focus-within .content .tile-body { grid-template-rows: 1fr; opacity: 1; }
.page-template-home .grid-section .single-grid-element .inner:hover .content .tile-body-inner .btn-ifatis,
.page-template-home .grid-section .single-grid-element .inner:focus-within .content .tile-body-inner .btn-ifatis { transform: none; }
.page-template-home .grid-section .single-grid-element .btn-ifatis {
    --btn-bg: #fff;
    color: var(--c-plum) !important;
    border-color: #fff;
}
.page-template-home .grid-section .single-grid-element .btn-ifatis::before { background: var(--c-blush); }

/* Any non-hover pointer (touch tablets, phones): always show copy + CTA + deep scrim */
@media (hover: none) {
    .page-template-home .grid-section .single-grid-element .content .tile-body { grid-template-rows: 1fr; opacity: 1; }
    .page-template-home .grid-section .single-grid-element .content .tile-body-inner .btn-ifatis { transform: none; }
    .page-template-home .grid-section .single-grid-element .inner::after { opacity: 1; }
}

/* "not sure which workout?" — bold editorial band */
.page-template-home .grid-section .not-sure {
    margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
    margin-inline: 0;
    width: 100%;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
    background: var(--grad-rose);
    border-radius: var(--r-lg);
}
.page-template-home .grid-section .not-sure > .col-12 { padding-inline: 0; }
.page-template-home .grid-section .not-sure h3 {
    color: var(--c-plum-deep);
    font-weight: 800;
    font-size: clamp(1.75rem, 6vw, 2.4rem);
    line-height: 1.2;
    margin: 0 auto 0.7rem;
    max-width: 62ch;
}
.page-template-home .grid-section .not-sure p { color: var(--c-plum-deep); font-size: clamp(1.1rem, 4vw, 1.25rem); margin: 0 auto 1.5rem; max-width: 62ch; }
.page-template-home .grid-section .not-sure a:not(.btn-ifatis) { color: var(--c-plum-deep); font-weight: 800; text-decoration: underline !important; }

/* Below the bento breakpoint the columns get too narrow for the full copy, so
   switch tiles to the stacked card style (image band + plum text panel that grows
   with the copy). Two tiles per row on tablet (768–1199), one per row on phones. */
@media (max-width: 1199px) {
    .page-template-home .grid-section > .row:not(.not-sure) { grid-template-rows: none; grid-template-areas: none; gap: clamp(14px, 2.2vw, 22px); }
    .page-template-home .grid-section > .row:not(.not-sure) > .single-grid-element,
    .page-template-home .grid-section > .row:not(.not-sure) > .single-grid-element.is-featured { grid-area: auto; grid-column: auto; min-height: 0; }
    .page-template-home .grid-section .single-grid-element .inner { position: relative; inset: auto; height: auto; }
    .page-template-home .grid-section .single-grid-element .elem-img { position: relative; inset: auto; height: clamp(200px, 28vw, 300px); }
    .page-template-home .grid-section .single-grid-element .inner::after { bottom: auto; height: clamp(200px, 28vw, 300px); opacity: 1; }
    .page-template-home .grid-section .single-grid-element .content { position: relative; inset: auto; max-height: none; background: var(--c-plum-deep); }
    .page-template-home .grid-section .single-grid-element .content .tile-body { grid-template-rows: 1fr; opacity: 1; }
    .page-template-home .grid-section .single-grid-element .content .tile-body-inner .btn-ifatis { transform: none; }
}
/* Type + button ease down from 1500px so the copy sits comfortably on the
   narrower tiles/cards. */
@media (max-width: 1500px) {
    .page-template-home .grid-section .single-grid-element .content .elem-title { font-size: clamp(1.3rem, 2.4vw, 1.9rem); }
    .page-template-home .grid-section .single-grid-element.is-featured .content .elem-title { font-size: clamp(1.6rem, 2.7vw, 2.4rem); }
    .page-template-home .grid-section .single-grid-element .content .tile-body-inner p { font-size: clamp(0.85rem, 1.1vw, 0.98rem); line-height: 1.5; }
    .page-template-home .grid-section .single-grid-element .content .tile-body-inner .btn-ifatis { font-size: 0.8rem; min-width: 0; padding: 0.52em 1.3em; }
}
/* Tablet: two tiles per row, equal height */
@media (min-width: 768px) and (max-width: 1199px) {
    .page-template-home .grid-section > .row:not(.not-sure) { grid-template-columns: 1fr 1fr; align-items: stretch; }
    /* let each card fill its (stretched) grid cell so the two in a row match height */
    .page-template-home .grid-section .single-grid-element { display: flex; }
    .page-template-home .grid-section .single-grid-element .inner { flex: 1 1 auto; display: flex; flex-direction: column; }
    .page-template-home .grid-section .single-grid-element .content { flex: 1 1 auto; }
    /* push the CTA to the bottom of the card so buttons align across the row */
    .page-template-home .grid-section .single-grid-element .content .tile-body { flex: 1 1 auto; }
    .page-template-home .grid-section .single-grid-element .content .tile-body-inner { display: flex; flex-direction: column; height: 100%; }
    .page-template-home .grid-section .single-grid-element .content .tile-body-inner .btn-ifatis { margin-top: auto; align-self: flex-start; }
    /* keep at least 15px between the copy and the (bottom-aligned) button */
    .page-template-home .grid-section .single-grid-element .content .tile-body-inner p:last-of-type { margin-bottom: 15px; }
}
/* Phones: one tile per row */
@media (max-width: 767px) {
    .page-template-home .grid-section > .row:not(.not-sure) { grid-template-columns: 1fr; }
}

/* ============================================================
   4. WHY-US — dark plum contrast band
   ============================================================ */
.page-template-home .icons-section {
    position: relative;
    background: radial-gradient(120% 100% at 80% 0%, #6b4f68 0%, var(--c-plum-deep) 60%);
    padding: clamp(3.5rem, 8vw, 7rem) 0;
    overflow: hidden;
}
.page-template-home .icons-section .container-fluid {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
}
.page-template-home .icons-section::before {
    content: '';
    position: absolute;
    top: -20%; inset-inline-end: -10%;
    width: 46vw; max-width: 620px; aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(211,185,198,0.12) 0%, transparent 65%);
    pointer-events: none;
}
.page-template-home .icons-section .title-col .section-title {
    color: #fff;
    text-align: center;
    font-size: clamp(2rem, 5vw, 3.6rem);
}
.page-template-home .icons-section .title-col .txt {
    text-align: center;
    color: rgba(255,255,255,0.92);
    font-size: var(--fs-300);
    max-width: 64ch;
    margin: 1rem auto 0;
    line-height: 1.8;
}
.page-template-home .icons-section .title-col .txt a { color: #ffe3d9 !important; text-decoration: underline !important; font-weight: 700; }
.page-template-home .icons-section .title-col .txt strong { color: #fff; }

.page-template-home .icons-section .icons-row { margin-top: clamp(2rem, 5vw, 3.5rem); }
.page-template-home .icons-section .single-icon { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.page-template-home .icons-section .single-icon .inner {
    height: 100%;
    min-width: 0;
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
    border-radius: var(--r-md);
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    text-align: right;
    position: relative;
    transition: background 0.4s var(--ease), transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.page-template-home .icons-section .single-icon .inner:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(211,185,198,0.5);
    transform: translateY(-5px);
}
/* keep medallion + title + text all inline-start aligned (Bootstrap adds .text-center) */
.page-template-home .icons-section .single-icon .img-wrap.text-center,
.page-template-home .icons-section .single-icon .content-wrap.text-center { text-align: right; }
.page-template-home .icons-section .single-icon .img-wrap {
    width: 62px; height: 62px;
    margin: 0 0 1.1rem;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(211,185,198,0.55);
    border-radius: 50%;
}
.page-template-home .icons-section .single-icon .img-wrap img { width: 32px; height: auto; filter: brightness(0) invert(1); opacity: 0.92; }
.page-template-home .icons-section .single-icon .title { color: #fff; font-weight: 800; font-size: var(--fs-400); margin-bottom: 0.5rem; }
.page-template-home .icons-section .single-icon .txt { color: rgba(255,255,255,0.92); font-size: var(--fs-200); line-height: 1.7; }

.page-template-home .icons-section .btn-wrap { margin-top: clamp(2rem, 4vw, 3rem); gap: 0.75rem; flex-wrap: wrap; }
.page-template-home .icons-section .btn-ifatis {
    --btn-bg: transparent;
    color: #fff !important;
    border-color: rgba(255,255,255,0.85);
}
.page-template-home .icons-section .btn-ifatis::before { background: #fff; }
.page-template-home .icons-section .btn-ifatis:hover,
.page-template-home .icons-section .btn-ifatis:focus-visible {
    background: #fff !important;
    color: var(--c-plum-deep) !important;
    border-color: #fff;
}

/* tablet: even 2-up grid (no orphan special-casing) */
@media (min-width: 768px) and (max-width: 991px) {
    .page-template-home .icons-section .icons-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
    .page-template-home .icons-section .single-icon { width: auto; max-width: none; margin: 0; }
}

/* ============================================================
   5. REVIEWS — bold quote field
   ============================================================ */
.page-template-home .reviews-section {
    position: relative;
    padding: clamp(3.5rem, 8vw, 7rem) 0;
    overflow: hidden;
    background: var(--grad-blush);
}
/* wider than the default container so 3 cards get more room (shadow removed, so no clipping) */
.page-template-home .reviews-section .flex-section-container.container-fluid {
    max-width: 1480px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
}
.page-template-home .reviews-section .section-title {
    color: var(--c-plum-deep);
    text-align: center;
    font-size: clamp(2rem, 5vw, 3.6rem);
}
.page-template-home .reviews-section .section-title::after {
    content: '';
    display: block;
    width: 72px; height: 5px;
    margin: 0.9rem auto 0;
    border-radius: var(--r-pill);
    background: var(--c-plum);
}
/* no horizontal padding so adjacent slides never peek at the edges; vertical
   padding keeps the quote-mark visible above the cards */
.page-template-home .reviews-section .slick-list {
    padding: 34px 0 44px;
    overflow-x: clip;
    overflow-y: visible;
    position: relative;
}
.page-template-home .reviews-section .single-review-wrap {
    position: relative;
    padding: 2.75rem 1.8rem 2rem;
    margin: 0 14px 12px;
    text-align: right;
    background: #fff;
    height: 100%;
    border-radius: var(--r-lg);
    box-shadow: none;
    border: 1px solid rgba(97, 73, 95, 0.10);
}
.page-template-home .reviews-section .single-review-wrap .inner { display: flex; flex-direction: column; position: relative; z-index: 1; min-width: 0; height: 100%; }
/* push name + date to the bottom of the card (cards are equal height) */
.page-template-home .reviews-section .single-review-wrap .name { order: 3; font-size: 1.2rem; font-weight: 800; margin: auto 0 0; padding-top: 1.25rem; color: var(--c-plum); }
.page-template-home .reviews-section .single-review-wrap .name .date { font-size: 0.6em; display: block; color: var(--c-ink-soft); font-weight: 600; margin-top: 2px; }
.page-template-home .reviews-section .single-review-wrap .stars { order: 1; display: flex; align-items: center; justify-content: flex-start; padding-top: 0.25rem; padding-bottom: 0.9rem; gap: 3px; }
.page-template-home .reviews-section .single-review-wrap .star { color: var(--c-gold); font-size: 1.25rem; }
.page-template-home .reviews-section .single-review-wrap .review { order: 2; font-size: 1.05rem; color: #453b4c; line-height: 1.8; overflow-wrap: anywhere; }
.page-template-home .reviews-section .single-review-wrap .review * { color: inherit; }
.page-template-home .reviews-section .single-review-wrap .review p:last-of-type { margin-bottom: 0; }
/* oversized decorative quote mark, clear of the stars row */
.page-template-home .reviews-section .single-review-wrap .quotation {
    position: absolute;
    top: -30px; inset-inline-end: 16px;
    width: 46px;
    opacity: 0.9;
    z-index: 2;
    filter: drop-shadow(0 6px 12px rgba(43,34,48,0.2));
}

.page-template-home .reviews-section .slick-track { display: flex !important; }
.page-template-home .reviews-section .slick-slide { height: inherit !important; }
.page-template-home .reviews-section .slick-slide > div { height: 100%; }
.page-template-home .reviews-section .slick-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 50px; height: 50px; z-index: 5;
    background: var(--c-plum); border: none; border-radius: 50%;
    box-shadow: var(--shadow-plum); padding: 13px; cursor: pointer;
    transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.page-template-home .reviews-section .slick-arrow:hover { background: var(--c-plum-deep); }
.page-template-home .reviews-section .slick-arrow img { width: 100%; height: 100%; display: block; filter: brightness(0) invert(1); }
.page-template-home .reviews-section .slick-arrow.prev-arrow { left: 6px; }
.page-template-home .reviews-section .slick-arrow.next-arrow { right: 6px; }
.page-template-home .reviews-section .slick-arrow.prev-arrow:hover { transform: translateY(-50%) translateX(-3px); }
.page-template-home .reviews-section .slick-arrow.next-arrow:hover { transform: translateY(-50%) translateX(3px); }

.page-template-home ul.slick-dots {
    position: static; display: flex; list-style: none; justify-content: center;
    width: 100%; padding: 0; margin-top: 1rem; gap: 8px;
}
.page-template-home ul.slick-dots li { width: 11px; height: 11px; }
.page-template-home ul.slick-dots button {
    display: block; width: 11px; height: 11px; padding: 0; border: none;
    border-radius: 50%; background: rgba(97,73,95,0.35); text-indent: -9999px;
    cursor: pointer; transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.page-template-home ul.slick-dots li.slick-active button { background: var(--c-plum); transform: scale(1.3); }

/* single card per slide from 991px down → move the arrows BELOW the card so they
   never sit on top of the review text */
@media (max-width: 991px) {
    .page-template-home .reviews-section { padding-bottom: clamp(4rem, 9vw, 5.5rem); }
    .page-template-home .reviews-section .single-review-wrap { margin-inline: 6px; }
    .page-template-home .reviews-section .slick-arrow { top: auto; bottom: -6px; transform: none; width: 44px; height: 44px; }
    .page-template-home .reviews-section .slick-arrow.prev-arrow { left: 50%; right: auto; margin-left: -54px; }
    .page-template-home .reviews-section .slick-arrow.next-arrow { right: 50%; left: auto; margin-right: -54px; }
    /* no vertical shift on tap */
    .page-template-home .reviews-section .slick-arrow.prev-arrow:hover,
    .page-template-home .reviews-section .slick-arrow.next-arrow:hover,
    .page-template-home .reviews-section .slick-arrow:focus,
    .page-template-home .reviews-section .slick-arrow:active { transform: none; }
}
@media (max-width: 575px) {
    .page-template-home .reviews-section .single-review-wrap { margin-inline: 4px; padding: 2.5rem clamp(1.2rem, 5vw, 1.8rem) 1.6rem; }
}

/* ============================================================
   6. GALLERY — full-bleed collage (deterministic aspect ratios)
   ============================================================ */
.page-template-home .grid-gallery-section {
    padding: clamp(3.5rem, 8vw, 7rem) clamp(0.75rem, 3vw, 2.5rem);
    background: var(--wash);
}
.page-template-home .grid-gallery-section .section-title {
    color: var(--c-plum);
    font-size: clamp(2rem, 5vw, 3.6rem);
    margin-bottom: clamp(1.75rem, 4vw, 3rem);
}
.page-template-home .grid-gallery-section .section-title::after {
    content: '';
    display: block;
    width: clamp(48px, 7vw, 90px); height: 5px;
    margin: 1rem auto 0;
    border-radius: var(--r-pill);
    background: var(--grad-rose);
}
.page-template-home .grid-gallery-container { display: flex; flex-wrap: wrap; margin: 0 -7px; }
.page-template-home .grid-gallery-container .grid-column { padding: 0 7px; flex: 0 0 25%; width: 25%; flex-wrap: wrap; display: flex; align-content: flex-start; }
.page-template-home .grid-gallery-container .column-1 .item-1 { flex: 0 0 100%; width: 100%; padding-bottom: 14px; }
.page-template-home .grid-gallery-container .column-1 .item-2,
.page-template-home .grid-gallery-container .column-1 .item-3 { flex: 0 0 50%; width: 50%; }
.page-template-home .grid-gallery-container .column-1 .item-2 { padding-left: 7px; }
.page-template-home .grid-gallery-container .column-1 .item-3 { padding-right: 7px; }
.page-template-home .grid-gallery-container .column-3 .item-5,
.page-template-home .grid-gallery-container .column-3 .item-6 { flex: 0 0 50%; width: 50%; }
.page-template-home .grid-gallery-container .column-3 .item-5 { padding-left: 7px; }
.page-template-home .grid-gallery-container .column-3 .item-6 { padding-right: 7px; }
.page-template-home .grid-gallery-container .column-3 .item-7 { flex: 0 0 100%; width: 100%; padding-top: 14px; }

/* deterministic tile heights via aspect-ratio (content/upload agnostic) */
.page-template-home .grid-gallery-container .item { position: relative; overflow: hidden; border-radius: var(--r-md); height: auto; box-sizing: border-box; box-shadow: inset 0 0 0 1px rgba(43,34,48,0.06); }
.page-template-home .grid-gallery-container .column-1 .item-1,
.page-template-home .grid-gallery-container .column-3 .item-7 { aspect-ratio: 16 / 11; }
.page-template-home .grid-gallery-container .column-1 .item-2,
.page-template-home .grid-gallery-container .column-1 .item-3,
.page-template-home .grid-gallery-container .column-3 .item-5,
.page-template-home .grid-gallery-container .column-3 .item-6 { aspect-ratio: 1 / 1; }
/* single-image columns: match the stacked columns' combined height so all four
   column bottoms align. Stacked column = 16/11 tile (0.6875·W) + square (0.5·W)
   = 1.1875·W, so the portrait ratio is W / 1.1875·W = 0.842 (≈ 27/32). */
.page-template-home .grid-gallery-container .column-2 .item,
.page-template-home .grid-gallery-container .column-4 .item { aspect-ratio: 27 / 32; }
.page-template-home .grid-gallery-container .item img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md); transition: transform 0.8s var(--ease); }
.page-template-home .grid-gallery-container .item::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(150deg, rgba(97,73,95,0.5), rgba(43,34,48,0.35));
    opacity: 0; transition: opacity 0.4s var(--ease);
    border-radius: var(--r-md);
}
.page-template-home .grid-gallery-container .item:hover img { transform: scale(1.08); }
.page-template-home .grid-gallery-container .item:hover::after { opacity: 1; }
.page-template-home .grid-gallery-container .item:focus-visible { outline: 3px solid #fff; outline-offset: -3px; box-shadow: var(--focus-ring); }

@media (hover: none) { .page-template-home .grid-gallery-container .item::after { opacity: 0.14; } }
@media (max-width: 1200px) { .page-template-home .grid-gallery-container .grid-column { flex: 0 0 50%; width: 50%; margin-bottom: 14px; } }
@media (max-width: 640px)  {
    .page-template-home .grid-gallery-container .grid-column { flex: 0 0 100%; width: 100%; margin-bottom: 14px; }
    .page-template-home .grid-gallery-container .column-1 .item-2,
    .page-template-home .grid-gallery-container .column-1 .item-3 { margin-top: 0; }
}

/* ============================================================
   7. ABOUT — huge editorial quote over image
   ============================================================ */
.page-template-home .about-section {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(88vh, 720px);
    padding: clamp(4rem, 9vw, 8rem) 0;
    isolation: isolate;
    overflow: hidden;
}
.page-template-home .about-section.screen-height { height: auto; }
/* Legibility engine (C): center-weighted floor that never drops below ~0.55 behind the quote */
.page-template-home .about-section::before {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(70% 70% at 50% 50%, rgba(43,34,48,0.55) 0%, rgba(43,34,48,0.3) 100%),
        linear-gradient(180deg, rgba(43,34,48,0.55), rgba(43,34,48,0.55));
}
.page-template-home .about-section .section-content {
    color: #fff;
    text-align: center;
    position: relative;
    padding-inline: clamp(1.25rem, 6vw, 2rem);
}
.page-template-home .about-section .section-content::before {
    content: '”';
    display: block;
    font-family: Georgia, serif;
    font-size: clamp(4rem, 12vw, 11rem);
    line-height: 0.8;
    color: rgba(211,185,198,0.85);
    filter: drop-shadow(0 4px 18px rgba(43,34,48,0.6));
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.page-template-home .about-section .section-content h2 {
    color: #fff;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.8rem, 4.5vw, 3.8rem);
    line-height: 1.28;
    max-width: min(20ch, 100%);
    margin: 0 auto;
    overflow-wrap: break-word;
    word-break: break-word;
}
.page-template-home .about-section .section-content h2 strong { font-weight: 800; font-style: normal; }
.page-template-home .about-section .section-content *:not(strong) { color: #fff; }

/* ============================================================
   8. FOUNDER — editorial split
   ============================================================ */
.page-template-home .about-ifat-section {
    padding: clamp(4rem, 9vw, 8rem) 0;
    background: linear-gradient(180deg, var(--wash) 0%, #ece2e6 100%);
    overflow: hidden;
}
.page-template-home .about-ifat-section .container { max-width: 1120px; }
.page-template-home .about-ifat-section .ifat-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(2rem, 3.5vw, 4rem);
    align-items: start;
}
.page-template-home .about-ifat-section .img-wrap {
    position: relative;
    text-align: center;
    margin-inline: auto;
    max-width: 380px;
}
.page-template-home .about-ifat-section .img-wrap::before {
    content: '';
    position: absolute;
    inset: 7% 9% -6% -6%;
    border: 2px solid var(--c-rose);
    border-radius: var(--r-xl) var(--r-md) var(--r-xl) var(--r-md);
    z-index: 0;
    pointer-events: none;
}
.page-template-home .about-ifat-section .ifat-img {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: var(--r-xl) var(--r-md) var(--r-xl) var(--r-md);
    margin: 0 auto;
    box-shadow: var(--shadow-plum);
    border: none;
}
.page-template-home .about-ifat-section .ifat-text { min-width: 0; }
.page-template-home .about-ifat-section .ifat-text .section-title {
    /* !important intentionally overrides Bootstrap .text-center for the split layout */
    text-align: right !important;
    color: var(--c-plum);
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    margin: 0 0 1.5rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.page-template-home .about-ifat-section .section-title::after {
    content: '';
    display: block;
    width: 70px; height: 5px;
    margin-top: 1rem;
    border-radius: var(--r-pill);
    background: var(--grad-rose);
}
.page-template-home .about-ifat-section .content {
    color: #453b4c;
    font-size: var(--fs-300);
    line-height: 1.9;
    text-align: right;
}
.page-template-home .about-ifat-section .content p { margin-bottom: 1.1rem; }
.page-template-home .about-ifat-section .content strong { color: var(--c-plum-deep); }
.page-template-home .about-ifat-section .btn-wrap { text-align: right; margin-top: 2rem; }

@media (max-width: 900px) {
    .page-template-home .about-ifat-section .ifat-grid { grid-template-columns: 1fr; gap: 2rem; }
    .page-template-home .about-ifat-section .img-wrap { max-width: 320px; margin-inline: auto; }
    .page-template-home .about-ifat-section .img-wrap::before { inset: 6% 6% -6% -6%; }
    .page-template-home .about-ifat-section .ifat-text .section-title { text-align: center !important; }
    .page-template-home .about-ifat-section .content,
    .page-template-home .about-ifat-section .btn-wrap { text-align: center; }
    .page-template-home .about-ifat-section .section-title::after { margin-inline: auto; }
}