/* ==================================================================
   MADHAV FLOWER DECOR — CORE STYLESHEET
   1. Design Tokens
   2. Reset & Base
   3. Typography
   4. Layout Primitives
   5. Header & Navigation
   6. Mobile Menu
   7. Hero
   8. Footer
   9. Utilities
   ================================================================== */

/* ------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------ */
:root {
    /* Palette */
    --c-white:       #ffffff;
    --c-ivory:       #fcfaf6;
    --c-beige:       #f1e7d9;
    --c-beige-soft:  #f8f2e9;
    --c-grey:        #f4f4f2;
    --c-grey-line:   #e6e3dd;

    --c-gold:        #c0a062;
    --c-gold-deep:   #a6873f;
    --c-gold-glow:   rgba(192, 160, 98, 0.28);

    --c-green:       #16301f;
    --c-green-mid:   #234833;
    --c-green-soft:  rgba(22, 48, 31, 0.06);

    --c-ink:         #1a1a18;
    --c-body:        #4a4741;
    --c-muted:       #857f75;

    /* Typography */
    --font-display: "Cormorant Garamond", "Times New Roman", serif;
    --font-body:    "Jost", -apple-system, "Segoe UI", sans-serif;

    --fs-hero:  clamp(2.75rem, 1.4rem + 5.6vw, 6rem);
    --fs-h2:    clamp(2rem, 1.15rem + 3.1vw, 3.75rem);
    --fs-h3:    clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
    --fs-lead:  clamp(1rem, 0.94rem + 0.28vw, 1.175rem);
    --fs-body:  1rem;
    --fs-small: 0.875rem;
    --fs-eyebrow: 0.72rem;

    /* Space */
    --space-section: clamp(4.5rem, 2rem + 9vw, 8.5rem);
    --gutter:        clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);
    --container:     1320px;

    /* Form */
    --radius-sm: 10px;
    --radius:    18px;
    --radius-lg: 28px;
    --radius-pill: 999px;

    /* Elevation — layered, never a single flat blur */
    --shadow-sm: 0 1px 2px rgba(26, 26, 24, 0.04),
                 0 4px 14px rgba(26, 26, 24, 0.05);
    --shadow:    0 2px 6px rgba(26, 26, 24, 0.05),
                 0 14px 34px rgba(26, 26, 24, 0.08);
    --shadow-lg: 0 4px 10px rgba(26, 26, 24, 0.05),
                 0 28px 64px rgba(26, 26, 24, 0.14);
    --shadow-gold: 0 10px 30px var(--c-gold-glow);

    /* Motion */
    --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast:    0.24s;
    --t-base:    0.42s;
    --t-slow:    0.8s;

    --header-h: 96px;
}

/* ------------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h);
}

body {
    background: var(--c-ivory);
    color: var(--c-body);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: 1.75;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;          /* guarantees no horizontal scroll */
}

/* Locks scroll while the mobile menu is open. */
body.is-locked { overflow: hidden; }

img,
svg,
picture {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
    background-color: var(--c-grey);   /* placeholder tint while loading */
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
}

ul, ol { list-style: none; padding: 0; }

address { font-style: normal; }

:focus-visible {
    outline: 2px solid var(--c-gold);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection {
    background: var(--c-gold);
    color: var(--c-white);
}

/* Skip link — visible only on keyboard focus. */
.skip-link {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 200;
    padding: 0.75rem 1.5rem;
    background: var(--c-green);
    color: var(--c-white);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    transform: translate(-50%, -110%);
    transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ------------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------------ */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--c-ink);
    text-wrap: balance;
}

h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }

p { text-wrap: pretty; }

/* Small caps label above every section heading. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--c-gold-deep);
}
.eyebrow::before {
    content: "";
    width: 34px;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}
.eyebrow--center::after {
    content: "";
    width: 34px;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}

/* Gold italic emphasis inside display headings. */
.accent {
    font-style: italic;
    color: var(--c-gold-deep);
}

.lead {
    font-size: var(--fs-lead);
    line-height: 1.85;
    color: var(--c-muted);
}

/* ------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   ------------------------------------------------------------------ */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: var(--space-section); }

/* ------------------------------------------------------------------
   TWO SECTIONS WITH THE SAME BACKGROUND MUST NOT DOUBLE THEIR PADDING

   Section padding is breathing room around a CHANGE OF COLOUR. When the
   colour changes, one section's bottom padding plus the next one's top
   padding reads as a single, generous band — which is the intent.

   When it does NOT change, the same two paddings read as one enormous
   empty hole, because there is no edge for the eye to land on. At the
   top of the scale that is 8.5rem + 8.5rem — over 270px of nothing.

   This is not hypothetical. The homepage alternates plain/tint all the
   way down, but three of its sections are CONDITIONAL — the shop strip,
   the featured decorations, the projects. Hide one and its neighbours
   collide, which is exactly what happens on a site whose catalogue is
   still empty: the requirement chooser (tint) lands straight on top of
   the decoration categories (tint), and the gap between them doubles.

   So: when two adjacent sections share a background, the second one
   drops its top padding. The visible gap stays the same wherever you
   are on the page, whatever is switched on.
   ------------------------------------------------------------------ */
.section--tint  + .section--tint,
.section--beige + .section--beige,
.section--dark  + .section--dark {
    padding-top: 0;
}

/* And the same for two adjacent PLAIN sections — the case that appears
   the moment a conditional section between them renders nothing. */
.section:not(.section--tint):not(.section--beige):not(.section--dark)
    + .section:not(.section--tint):not(.section--beige):not(.section--dark) {
    padding-top: 0;
}

.section--tint  { background: var(--c-grey); }
.section--beige { background: linear-gradient(180deg, var(--c-beige-soft), var(--c-ivory)); }
.section--dark  { background: var(--c-green); color: rgba(255, 255, 255, 0.72); }
.section--dark h2,
.section--dark h3 { color: var(--c-white); }

/* The light-background muted greys fail contrast on dark green, and
   the deep gold goes muddy — lift both. */
.section--dark .lead   { color: rgba(255, 255, 255, 0.6); }
.section--dark .accent { color: var(--c-gold); }

/* Centred heading block used by most sections. */
.section-head {
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: clamp(2.5rem, 4vw, 4.5rem);
    text-align: center;
}
.section-head h2 { margin-block: 1rem 1.15rem; }
.section-head .lead { margin-inline: auto; }

/* Heading block aligned left, with an action pinned right on desktop. */
.section-head--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    max-width: none;
    text-align: left;
}
.section-head--split > div { max-width: 640px; }

.grid { display: grid; gap: clamp(1rem, 1.8vw, 1.75rem); }

/* ------------------------------------------------------------------
   5. HEADER & NAVIGATION
   ------------------------------------------------------------------ */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: height var(--t-base) var(--ease),
                background var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease),
                border-color var(--t-base) var(--ease);
}

.site-header > .container {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2.5rem);
}

/* Scrolled state — frosted white, sticky, subtle lift. */
.site-header.is-scrolled {
    height: 74px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-bottom-color: var(--c-grey-line);
    box-shadow: var(--shadow-sm);
}

/* --- Logo --- */
.logo {
    display: flex;
    flex-direction: row;      /* emblem, then the wordmark beside it */
    align-items: center;
    gap: 0.65rem;
    line-height: 1;
    margin-right: auto;
    text-decoration: none;
}

/* The crown-and-lotus, cropped out of the stacked master. Purely decorative —
   the wordmark next to it already carries the name, so the alt is empty and it
   is hidden from screen readers rather than read out twice. */
.logo__emblem {
    display: block;
    flex: 0 0 auto;

    /* The base rule gives every <img> a grey placeholder tint while it loads:
       `img { background-color: var(--c-grey); }`. That is right for a photograph
       — it stops the page flashing white-on-white — and WRONG for a logo, whose
       whole point is a transparent background. The tint shows straight through
       the PNG's alpha and the emblem sits on a pale tile, which over the dark
       hero looks like a sticker somebody stuck on the header. */
    background: none;
}

/* The whole stacked logo — footer only, where there is room for the straplines
   to be legible. */
.logo__full {
    display: block;
    max-width: 100%;
    background: none;   /* same placeholder-tint problem as the emblem */
}

/* The two lines of type keep their own column inside the row. */
.logo__text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.logo__mark {
    font-family: var(--font-display);
    font-size: 1.65rem;
    letter-spacing: 0.02em;
    color: var(--c-white);
    transition: color var(--t-base) var(--ease);
}
.logo__mark em {
    font-style: italic;
    color: var(--c-gold);
}
.logo__sub {
    margin-top: 0.35rem;
    font-size: 0.58rem;
    font-weight: 400;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
    transition: color var(--t-base) var(--ease);
}
.is-scrolled .logo__mark { color: var(--c-ink); }
.is-scrolled .logo__sub  { color: var(--c-muted); }

/* --- Desktop nav --- */
.nav { display: flex; }
.nav__list {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.4vw, 1.9rem);
}
.nav__link {
    position: relative;
    display: block;
    padding: 0.5rem 0;
    font-size: 0.83rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.86);
    transition: color var(--t-fast) var(--ease);
}
.is-scrolled .nav__link { color: var(--c-body); }

/* Gold underline that grows from the centre. */
.nav__link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--c-gold);
    transform: translateX(-50%);
    transition: width var(--t-base) var(--ease-out);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--c-gold); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { width: 100%; }

/* --- Header actions --- */
.header__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Circular WhatsApp button with a soft breathing ring. */
.btn-whatsapp {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #25d366;
    color: var(--c-white);
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.34);
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn-whatsapp svg { width: 21px; height: 21px; }
.btn-whatsapp:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 10px 24px rgba(37, 211, 102, 0.45);
}
.btn-whatsapp::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid #25d366;
    animation: pulse-ring 2.6s var(--ease-out) infinite;
}

/* --- Burger --- */
.burger {
    display: none;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    color: var(--c-white);
    border: 1px solid rgba(255, 255, 255, 0.28);
    transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.burger svg { width: 22px; height: 22px; }
.is-scrolled .burger {
    color: var(--c-ink);
    border-color: var(--c-grey-line);
}

/* ------------------------------------------------------------------
   6. MOBILE MENU
   ------------------------------------------------------------------ */
.menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(22, 48, 31, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base) var(--ease), visibility var(--t-base);
}
.menu-backdrop.is-open { opacity: 1; visibility: visible; }

.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    width: min(400px, 88vw);
    display: flex;
    flex-direction: column;
    padding: 2rem var(--gutter) 2.5rem;
    background: var(--c-ivory);
    box-shadow: var(--shadow-lg);
    transform: translateX(101%);
    transition: transform var(--t-base) var(--ease-out);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.mobile-menu.is-open { transform: translateX(0); }

.mobile-menu__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1.75rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--c-grey-line);
}
.mobile-menu__top .logo__mark { color: var(--c-ink); }
.mobile-menu__top .logo__sub  { color: var(--c-muted); }

.menu-close {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: var(--c-ink);
    border: 1px solid var(--c-grey-line);
    transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.menu-close:hover { background: var(--c-beige-soft); transform: rotate(90deg); }
.menu-close svg { width: 20px; height: 20px; }

.mobile-menu__list { display: flex; flex-direction: column; }
.mobile-menu__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    font-family: var(--font-display);
    font-size: 1.65rem;
    color: var(--c-ink);
    border-bottom: 1px solid var(--c-grey-line);
    transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.mobile-menu__list a::after {
    content: "";
    width: 18px;
    height: 1px;
    background: var(--c-gold);
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease);
}
.mobile-menu__list a:hover,
.mobile-menu__list a[aria-current="page"] {
    color: var(--c-gold-deep);
    padding-left: 0.5rem;
}
.mobile-menu__list a:hover::after { opacity: 1; }

.mobile-menu__foot {
    margin-top: auto;
    padding-top: 2rem;
    display: grid;
    gap: 0.85rem;
}
.mobile-menu__contact {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: var(--fs-small);
    color: var(--c-muted);
}
.mobile-menu__contact svg { width: 17px; height: 17px; color: var(--c-gold-deep); }

/* ------------------------------------------------------------------
   7. HERO
   ------------------------------------------------------------------ */
.hero {
    position: relative;
    min-height: 100svh;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Slow, endless breathing zoom. */
    animation: hero-zoom 26s var(--ease) infinite alternate;
}

/* Two-stop overlay: heavier at the base so the CTAs stay legible. */
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg,
            rgba(10, 22, 14, 0.62) 0%,
            rgba(10, 22, 14, 0.42) 42%,
            rgba(10, 22, 14, 0.78) 100%),
        radial-gradient(ellipse at 50% 42%,
            rgba(0, 0, 0, 0) 30%,
            rgba(10, 22, 14, 0.45) 100%);
}

.hero__inner {
    position: relative;
    z-index: 1;
    max-width: 940px;
    padding-block: calc(var(--header-h) + 2rem) 6rem;
    text-align: center;
    color: var(--c-white);
}

.hero .eyebrow { color: var(--c-gold); }

.hero__title {
    margin-block: 1.5rem 1.75rem;
    font-size: var(--fs-hero);
    color: var(--c-white);
}
.hero__title .accent { color: var(--c-gold); }

/* Occasion pills, separated by hairline diamonds. */
.hero__occasions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem 1.4rem;
    margin-bottom: 1.5rem;
}
.hero__occasions li {
    position: relative;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}
.hero__occasions li + li::before {
    content: "";
    position: absolute;
    left: -0.85rem;
    top: 50%;
    width: 4px;
    height: 4px;
    background: var(--c-gold);
    transform: translateY(-50%) rotate(45deg);
}

.hero__tagline {
    max-width: 560px;
    margin: 0 auto 2.75rem;
    font-size: var(--fs-lead);
    color: rgba(255, 255, 255, 0.76);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* Scroll cue at the base of the hero. */
.hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    z-index: 1;
    transform: translateX(-50%);
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    font-size: 0.62rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    transition: color var(--t-fast) var(--ease);
}
.hero__scroll:hover { color: var(--c-gold); }
.hero__scroll::after {
    content: "";
    width: 1px;
    height: 52px;
    background: linear-gradient(180deg, var(--c-gold), transparent);
    animation: scroll-cue 2.2s var(--ease) infinite;
}

/* ------------------------------------------------------------------
   8. FOOTER
   ------------------------------------------------------------------ */
.site-footer {
    position: relative;
    background: var(--c-green);
    color: rgba(255, 255, 255, 0.62);
    overflow: hidden;
}
/* Faint gold vignette in the top-left corner. */
.site-footer::before {
    content: "";
    position: absolute;
    top: -30%;
    left: -10%;
    width: 55%;
    aspect-ratio: 1;
    background: radial-gradient(circle, var(--c-gold-glow), transparent 65%);
    opacity: 0.4;
    pointer-events: none;
}

.footer__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
    gap: clamp(2rem, 4vw, 4rem);
    padding-block: clamp(3.5rem, 6vw, 6rem) 3.5rem;
}

.footer__brand .logo__mark { color: var(--c-white); }
.footer__brand .logo__sub  { color: rgba(255, 255, 255, 0.45); }
.footer__about {
    margin-block: 1.75rem;
    max-width: 340px;
    font-size: var(--fs-small);
    line-height: 1.9;
}

.footer__title {
    margin-bottom: 1.5rem;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--c-white);
}

.footer__links { display: grid; gap: 0.85rem; }
.footer__links a {
    position: relative;
    display: inline-block;
    font-size: var(--fs-small);
    transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.footer__links a:hover {
    color: var(--c-gold);
    transform: translateX(5px);
}

.footer__contact { display: grid; gap: 1.1rem; }
.footer__contact li {
    display: flex;
    gap: 0.85rem;
    font-size: var(--fs-small);
    line-height: 1.7;
}
.footer__contact svg {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 0.3rem;
    color: var(--c-gold);
}
.footer__contact a:hover { color: var(--c-gold); }

/* Live Google Maps embed, from the settings table. */
.footer__map {
    margin-top: 1.75rem;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    line-height: 0;
    transition: border-color var(--t-base) var(--ease);
}
.footer__map:hover { border-color: var(--c-gold); }
.footer__map iframe {
    display: block;
    width: 100%;
    height: 150px;
    border: 0;
    /* The map's own tiles are bright; dim them into the dark footer. */
    filter: grayscale(0.4) contrast(0.95);
}

.footer__socials {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.75rem;
}
.footer__socials a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.7);
    transition: all var(--t-fast) var(--ease);
}
.footer__socials svg { width: 17px; height: 17px; }
.footer__socials a:hover {
    background: var(--c-gold);
    border-color: var(--c-gold);
    color: var(--c-green);
    transform: translateY(-3px);
}

.footer__bottom {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.8rem;
}
.footer__bottom nav { display: flex; gap: 1.75rem; }
.footer__bottom a:hover { color: var(--c-gold); }

/* ------------------------------------------------------------------
   9. UTILITIES
   ------------------------------------------------------------------ */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.text-center { text-align: center; }
.mt-lg { margin-top: clamp(2.5rem, 4vw, 4rem); }