/* ===========================================================================
   About MADDS — glass panel with living border, orbiting sunflower, glass cards.

   Loaded AFTER style.css + header-glass.css (see layout/base.html) so it wins on the
   .about-section rules without touching them. The glass recipe is deliberately the
   same one as the navbar (header-glass.css): blur(22px) saturate(180%) over a deep
   purple tint, so the panel reads as part of the same material as the navbar and
   the footer bar.

   Structure:
     .ag-panel          rotating magenta → orange → cyan gradient frame (the living border)
       .ag-panel__inner frosted glass surface
         .ag-visual     sunflower + orbiting service badges
         .ag-copy       heading, line-by-line reveal text, glass cards, stat counters
   =========================================================================== */

/* ---------- the section shell ---------------------------------------------- */

/* The section fills the whole view under the fixed navbar: its height is the viewport
   minus the compact navbar (--hdr-compact, measured by header-glass.js), the panel
   stretches edge to edge inside it, and the page gently snaps to it when scrolling close,
   so no hero above or next section below peeks in. On short / narrow screens, where the
   content is taller than the view, the section simply grows to fit the content.
   There is NO separate section background any more: the panel's own colour field below
   is the section background. */
.about-section {
    box-sizing: border-box;
    /* one-screen height + snapping: see sections-snap.css / sections-snap.js */
    display: flex;
    align-items: stretch;
    padding: 0;
    background: none;                   /* old pink/orange gradient removed */
    animation: none;
    overflow: hidden;
}

/* the old plain white outline frame is replaced by nothing at all */
.about-section::after {
    display: none;
}

/* full-bleed: drop the centred, max-width container for this section */
.about-section > .container {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* ---------- the panel is now the whole section: no frame, no radius -------- */

.ag-panel {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    padding: 0;
    border-radius: 0;
    overflow: hidden;                   /* clips the spinning gradient to the section */
    isolation: isolate;
    box-shadow: none;
}

/* the colour field that IS the section background — the original brand colours flowing
   in ONE direction in an endless loop (no bounce): the gradient ends on the colour it starts
   with, so the repeat is seamless, and the pan moves exactly one full tile per cycle. */
.ag-panel::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    /* colours are the brand palette with the old saturate(180%) boost baked in (see .ag-panel__inner) */
    background: linear-gradient(90deg, #FF00FF 0%, #FFA000 25%, #FB00FF 50%, #00EAFF 75%, #FF00FF 100%);
    background-size: 200% 100%;
    background-repeat: repeat-x;
    animation: ag-gradient-flow 16s linear infinite;
    pointer-events: none;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

@keyframes ag-gradient-flow {
    from { background-position: 0% 50%; }
    to   { background-position: 200% 50%; }      /* exactly one tile -> seamless loop */
}

/* frosted surface — same blur / tint family as the navbar glass */
.ag-panel__inner {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    border: 0;
    border-radius: 0;
    background: linear-gradient(180deg,
        rgba(38, 13, 78, 0.16) 0%,
        rgba(38, 13, 78, 0.26) 100%);
    /* NO backdrop-filter here. It used to be saturate(180%), but Safari does not invalidate a
       backdrop-filter region while the gradient behind it and the spinning flower above it keep
       animating, so old frames smeared across the flower as coloured trails. The same colour
       boost is now baked into the gradient stops on .ag-panel::before. */
    /* content stays in a comfortable column even on very wide screens */
    padding-block: clamp(1.6rem, 4vh, 3.6rem);
    /* padding-inline: max(clamp(1.25rem, 5vw, 4rem), calc((100% - 1400px) / 2)); */
    display: grid;
    padding-left: 0;
padding-right: max(clamp(1.25rem, 5vw, 4rem), calc((100% - 1400px) / 2));
    /* the flower column gets the extra room (was .92fr / 1.08fr) and the copy is
       pushed further right so the bigger scene never crowds it */
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: clamp(1.75rem, 4.5vw, 3.75rem);
    align-items: center;
    color: #fff;
    font-family: "Afacad", sans-serif;
}

/* browsers without backdrop-filter: solid tint so the text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ag-panel__inner {
        background: linear-gradient(180deg, rgba(38, 13, 78, 0.82), rgba(38, 13, 78, 0.7));
    }
}

/* ---------- left column: the living tech-flower scene ------------------------
   .ag-stage      square stage that everything floats inside
   .ag-orbit      layer of floating service badges (moved by js/flower-scene.js)
   .ag-sun-*      flower: scroll-spin -> mouse tilt -> float -> petals + centre disc
   .ag-butterfly  vector butterfly that flutters around and lands on the flower  */

.ag-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 900px;
}

.ag-stage {
    --r: clamp(128px, 18vw, 260px);     /* only used by the no-JS fallback ring */
    --flower-w: 86%;                    /* width of the flower inside the stage (was 80%) */
    --core-scale: 0.62;                /* size of the black centre ring + logo (1 = old size); the glass disc keeps its size so it still meets the petals */
    position: relative;
    flex: 0 0 auto;
    width: min(100%, 720px);            /* was 640px — the whole scene is bigger now */
    width: min(100%, 720px, 88svh);     /* …but never taller than the section view */
    aspect-ratio: 1 / 1;
}

/* display:contents keeps every badge in the stage's stacking context, so the
   script can slide each one in front of / behind the flower */
.ag-orbit {
    display: contents;
}

.ag-badge {
    --a: 0deg;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    /* no-JS fallback: a static ring. flower-scene.js overrides this inline. */
    transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)));
    pointer-events: auto;
    will-change: transform, opacity;
}

.ag-stage.ag-js .ag-badge {
    left: 0;
    top: 0;
}

.ag-badge:hover {
    z-index: 6 !important;
    opacity: 1 !important;
}

.ag-badge__in {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.38);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    backdrop-filter: blur(10px) saturate(160%);
    box-shadow: 0 10px 26px rgba(15, 0, 45, 0.22);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.ag-badge:hover .ag-badge__in {
    background: rgba(255, 255, 255, 0.26);
    border-color: rgba(255, 255, 255, 0.7);
    transform: scale(1.06);
}

.ag-badge__in i {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* tooltip shown while the badge is hovered (the floating pauses at the same time) */
.ag-tip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translate(-50%, 6px);
    width: max-content;
    max-width: 210px;
    white-space: normal;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.35;
    padding: 0.55rem 0.8rem;
    border-radius: 12px;
    color: #fff;
    background: rgba(28, 8, 62, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 14px 34px rgba(15, 0, 45, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    pointer-events: none;
}

.ag-badge:hover .ag-tip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* the flower itself:
   .ag-sun-scroll -> rotates slowly with the page scroll (ScrollTrigger scrub)
   .ag-sun-tilt   -> tilts a few degrees toward the mouse
   .ag-sun-float  -> gentle floating bob
   .ag-flower     -> petals layer + centre-disc layer that sway against each other */
.ag-sun-scroll,
.ag-sun-tilt,
.ag-sun-float {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* no transform-style: preserve-3d: the tilt uses its own perspective() (about-glass.js), and
       a 3D rendering context around the animated SVG made Safari leave paint trails */
}

.ag-sun-scroll {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* the flower layers span the whole stage; let hovers fall through to the badges
   (mouse tilt is listened for on .ag-visual, so it still works) */
.ag-sun-scroll,
.ag-sun-tilt,
.ag-sun-float {
    pointer-events: none;
}

.ag-sun-tilt,
.ag-sun-float {
    width: 100%;
    height: 100%;
}

.ag-sun-tilt {
    transition: transform 0.35s ease-out;
    will-change: transform;
}

.ag-sun-float {
    animation: ag-float 7s ease-in-out infinite alternate;
}

@keyframes ag-float {
    from { transform: translateY(-10px) rotate(-2deg); }
    to   { transform: translateY(12px) rotate(2deg); }
}

.ag-flower {
    position: relative;
    width: var(--flower-w);
    aspect-ratio: 1 / 1;
    /* no CSS filter here on purpose: the glow is drawn inside the SVG (halo + glow
       filters), because a big blur on constantly animating content is expensive */
}

/* ---- tech flower (inline SVG, partials/tech_flower.html) ----------------
   Layers, back to front: halo, HUD rings (STRATEGY + DESIGN + TECHNOLOGY text ring,
   MADDS-in-binary ring, tick rings, comet satellites, rotating star-polygon
   constellation), 24 glass blades, 16 circuit petals, radar sweep, 12 mid petals,
   8 gold-tipped inner petals, 36 filaments, then the core: a golden-angle seed
   spiral, hex rings and a glowing "M" chip. Sparkles and bokeh float on top.
   Every group rotates around the centre of the 600x600 viewBox. */
.ag-flower .tf {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

.ag-flower .tf-plate-grp {
    transform-box: view-box;
    transform-origin: 300px 300px;
    transform: scale(var(--core-scale));
}

.ag-flower .tf-spin,
.ag-flower .tf-sway,
.ag-flower .tf-sweep {
    transform-box: view-box;
    transform-origin: 300px 300px;
}

.tf-spin--cw    { animation: tf-spin 70s linear infinite; }
.tf-spin--ccw   { animation: tf-spin 46s linear infinite reverse; }
.tf-spin--x     { animation: tf-spin 11s linear infinite; }
.tf-spin--rev   { animation-direction: reverse; }
.tf-spin--slow  { animation-duration: 24s; }
.tf-spin--vslow { animation-duration: 150s; }
.tf-text-ring   { animation-duration: 120s; }

.tf-sweep       { animation: tf-spin 7s linear infinite; }

.tf-sway--a     { animation: tf-sway-a 9s ease-in-out infinite alternate; }
.tf-sway--b     { animation: tf-sway-b 9s ease-in-out infinite alternate; }
.tf-sway--c     { animation: tf-sway-b 12s ease-in-out infinite alternate-reverse; }
.tf-sway--d     { animation: tf-sway-a 7s ease-in-out infinite alternate-reverse; }

@keyframes tf-spin {
    to { transform: rotate(360deg); }
}

@keyframes tf-sway-a {
    from { transform: rotate(-2.5deg) scale(1); }
    50%  { transform: rotate(0.6deg) scale(1.018); }
    to   { transform: rotate(2.5deg) scale(1.03); }
}

@keyframes tf-sway-b {
    from { transform: rotate(1.8deg) scale(1); }
    to   { transform: rotate(-1.8deg) scale(1.02); }
}

/* a bright data packet travelling base -> tip along each vein */
.tf-pulse {
    stroke-dasharray: 9 91;
    stroke-dashoffset: 100;
    animation: tf-pulse 3.4s linear infinite;
}

.tf-pulse--fast {
    animation-duration: 2.4s;
}

@keyframes tf-pulse {
    0%   { stroke-dashoffset: 100; opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

/* sonar ping at every main petal tip */
.tf-ping {
    transform-box: fill-box;
    transform-origin: center;
    animation: tf-ping 3.4s ease-out infinite;
}

@keyframes tf-ping {
    0%   { transform: scale(0.5); opacity: 0.9; }
    70%  { transform: scale(2); opacity: 0; }
    100% { transform: scale(2); opacity: 0; }
}

/* core: seed points twinkle in three groups, the chip breathes */
.tf-tw {
    animation: tf-bit 2.6s ease-in-out infinite;
}

.tf-tw1 { animation-delay: -0.9s; }
.tf-tw2 { animation-delay: -1.7s; }

@keyframes tf-bit {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 1; }
}

.tf-chip {
    transform-box: fill-box;
    transform-origin: center;
    animation: tf-chip 2.6s ease-in-out infinite;
}

@keyframes tf-chip {
    0%, 100% { transform: scale(0.94); }
    50%      { transform: scale(1.1); }
}

/* four-point sparkles + drifting bokeh around the bloom */
.tf-spark {
    transform-box: fill-box;
    transform-origin: center;
    animation: tf-spark 3.4s ease-in-out infinite;
}

@keyframes tf-spark {
    0%, 100% { transform: scale(0.15) rotate(0deg); opacity: 0; }
    50%      { transform: scale(1) rotate(90deg); opacity: 1; }
}

.tf-bokeh {
    animation: tf-bokeh 5s ease-in-out infinite;
}

@keyframes tf-bokeh {
    0%, 100% { opacity: 0.1; transform: translateY(0); }
    50%      { opacity: 0.95; transform: translateY(-9px); }
}

/* the MADDS logo sits in the middle of the black centre ring. It is a child of .ag-sun-float, so it
   floats, tilts and sways exactly with the flower and can never drift off-centre. The
   scroll-spin on .ag-sun-scroll is cancelled on this element by about-glass.js, which keeps the
   logo upright. */
.ag-logo {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* soft light glow behind the logo so it lifts off the black centre ring.
   It is exactly the size of that ring and clipped to a circle, so nothing spills outside it. */
.ag-logo::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    width: calc(var(--flower-w) * 0.18 * var(--core-scale) * 0.98);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle closest-side,
        rgba(255, 255, 255, 0.60) 0%,
        rgba(158, 255, 255, 0.40) 55%,
        rgba(255, 255, 255, 0) 100%);       /* fades to nothing exactly at the circle's edge */
    clip-path: circle(50%);
    pointer-events: none;
}

.ag-logo-img {
    display: block;
    position: relative;
    z-index: 1;
    /* always a fixed fraction of the centre ring: ring diameter = 108/600 of the flower,
       scaled by --core-scale; the logo fills ~95% of it, so the two resize together */
    width: calc(var(--flower-w) * 0.18 * var(--core-scale) * 0.95);
    height: auto;
    filter: none;                       /* no outer halo: the glow lives only in the circle behind */
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

@keyframes ag-float-y {
    from { transform: translateY(-10px); }
    to   { transform: translateY(12px); }
}

/* the butterfly: hidden until the script places it (no-JS = no butterfly) */
.ag-butterfly {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    width: 25%;
    aspect-ratio: 200 / 160;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    /* holographic neon glow */
    filter: drop-shadow(0 0 6px rgba(67, 210, 224, 0.8))
            drop-shadow(0 0 18px rgba(181, 27, 181, 0.55));
}

.ag-butterfly svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ---- tech butterfly (partials/tech_butterfly.html) ---- */
.tb-pulse {
    stroke-dasharray: 12 88;
    stroke-dashoffset: 100;
    animation: tf-pulse 2.2s linear infinite;
}

.tb-shine {
    animation: tb-shine 3.6s ease-in-out infinite;
}

@keyframes tb-shine {
    from { transform: translateX(0); }
    to   { transform: translateX(170px); }
}

.tb-core {
    animation: tf-bit 1.6s ease-in-out infinite;
}

/* LED dots marching round the wing edge */
.tb-led {
    stroke-dasharray: 0 5.4;
    animation: tb-march 1.4s linear infinite;
}

@keyframes tb-march {
    to { stroke-dashoffset: -5.4; }
}

/* dashed rings turning around the eye-spots */
.tb-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: tf-spin 7s linear infinite;
}

.tb-ring--r {
    animation-direction: reverse;
}

/* soft energy halo breathing behind the wings */
.tb-halo {
    animation: tb-halo 2.8s ease-in-out infinite;
}

@keyframes tb-halo {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

/* pixel trail the butterfly leaves behind in flight (squares spawned by flower-scene.js) */
.ag-trail {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: 7px;
    height: 7px;
    border-radius: 1.5px;
    background: #34d399;
    box-shadow: 0 0 8px 1px rgba(52, 211, 153, 0.9);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

.ag-trail--m {
    background: #84cc16;
    box-shadow: 0 0 8px 1px rgba(132, 204, 22, 0.9);
}

/* save battery: everything in the scene freezes while it is off-screen */
.ag-stage.ag-paused .ag-sun-float,
.ag-stage.ag-paused .ag-logo,
.ag-stage.ag-paused .ag-flower *,
.ag-stage.ag-paused .ag-butterfly * {
    animation-play-state: paused !important;
}

/* ---------- right column: heading, copy, cards, stats ---------------------- */

.ag-copy h1 {
    font-size: clamp(2.1rem, 3.6vw, 3.1rem);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 0.6rem;
    letter-spacing: 0.01em;
}

.ag-copy h2 {
    font-size: clamp(1.15rem, 1.8vw, 1.55rem);
    font-weight: 400;
    line-height: 1.45;
    margin: 0 0 1.6rem;
    color: rgba(255, 255, 255, 0.92);
}

/* line-by-line mask reveal (JS wraps every visual line in .ag-line) */
.ag-line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
}

.ag-line__in {
    display: block;
    will-change: transform;
}

/* three glass cards — one per word of the tagline */
.ag-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    margin: 0 0 1.6rem;
}

.ag-card {
    border-radius: 18px;
}

.ag-card__tilt {
    position: relative;
    overflow: hidden;
    height: 100%;
    border-radius: 18px;
    padding: 1.15rem 1.15rem 1.25rem;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: background 0.35s ease, border-color 0.35s ease, transform 0.25s ease-out;
    will-change: transform;
}

.ag-card:hover .ag-card__tilt {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.5);
}

/* cursor-following spotlight on hover */
.ag-card__tilt::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
        rgba(255, 255, 255, 0.22), transparent 65%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.ag-card:hover .ag-card__tilt::after {
    opacity: 1;
}

.ag-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 0.7rem;
    border-radius: 12px;
    font-size: 1rem;
    color: #fff;
    background: linear-gradient(135deg, rgba(255, 47, 214, 0.55), rgba(67, 210, 224, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.ag-card h3 {
    margin: 0 0 0.35rem;
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ag-card p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.86);
}

/* about blurb under the Ideate / Illuminate / Integrate cards */
.ag-about-text {
    margin: 1.25rem 0 0;
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.86);
}

/* counter row: years / projects / clients */
.ag-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem 2.2rem;
    padding-top: 1.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.ag-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ag-stat__num {
    font-size: clamp(1.75rem, 2.6vw, 2.35rem);
    font-weight: 600;
    line-height: 1;
    background: linear-gradient(90deg, #ffffff, #ffd9f4 55%, #c9f4fb);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ag-stat__label {
    font-size: 0.86rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

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

@media (max-width: 1100px) {
    .ag-panel__inner {
        grid-template-columns: 1fr;
    }

    .ag-stage {
        width: min(100%, 560px);
        --r: clamp(135px, 26vw, 225px);
    }
}

@media (max-width: 768px) {
    .ag-cards {
        grid-template-columns: 1fr;
    }

    .ag-badge__in {
        padding: 0.42rem 0.75rem;
        font-size: 0.78rem;
    }

    .ag-tip {
        display: none;              /* no hover on touch anyway */
    }

    .ag-stats {
        gap: 1rem 1.6rem;
    }
}

@media (max-width: 520px) {
    .ag-panel__inner {
        padding: 1.35rem 1.15rem;
    }

    .ag-stage {
        --r: clamp(112px, 33vw, 160px);
    }

    .ag-stage {
        --flower-w: 74%;
    }

    .ag-butterfly {
        width: 27%;
    }

    .ag-badge__in {
        padding: 0.28rem 0.55rem;
        font-size: 0.66rem;
        gap: 0.3rem;
    }

    .ag-badge__in i {
        display: none;              /* keep the labels compact so they never crowd */
    }
}

/* ---------- reduced motion ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ag-panel::before,
    .ag-sun-float,
    .ag-logo,
    .ag-flower *,
    .ag-butterfly * {
        animation: none !important;
    }

    .ag-sun-tilt,
    .ag-card__tilt,
    .ag-tip {
        transition: none;
    }
}

@media (max-width: 400px) {
    .ag-badge__in {
        padding: 0.24rem 0.42rem;
        font-size: 0.58rem;
        letter-spacing: 0;
    }
}
/* ---------- Safari only: no live backdrop blur on the moving service badges ------------
   Badges drift over the animated flower; Safari does not refresh a backdrop-filter behind
   moving layers cleanly, so use a slightly stronger flat tint there instead. */
@media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
        .ag-badge__in {
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
            background: rgba(255, 255, 255, 0.22);
        }
    }
}