@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/Archivo-500.woff2') format('woff2'); }
    @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/Archivo-700.woff2') format('woff2'); }
    @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 900; font-display: swap; src: url('/assets/fonts/Archivo-900.woff2') format('woff2'); }
    html, body { margin: 0; padding: 0; background: #ffffff; overflow-x: clip; }
    /* Hide the native scrollbar so the content box == full viewport width: without this the 15px
       gutter shifts every inset:0 element (the Gumtree) left of the vw/fixed-anchored hint & modal. */
    html { scrollbar-width: none; -ms-overflow-style: none; }
    html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
    * { box-sizing: border-box; }
    /* Short-description body text on LIGHT sections: solid deep black (replaces the psychedelic-window fill). Kali is on a dark backdrop so it is intentionally excluded. */
    #danjooBody, #storyTeaser p, #cultureTeaser p, #section3 .wwSub p, .svcBody { color: #0a0a0a !important; -webkit-text-fill-color: #0a0a0a !important; background-image: none !important; }
    #stage img { display: block; }
    @keyframes danjoo-hint-pulse {
      0%, 100% { transform: translateX(-5px); opacity: 0.85; }
      50% { transform: translateX(5px); opacity: 1; }
    }
    @keyframes ptnspin { to { transform: rotate(360deg); } }
    @keyframes modalPsyFlow { from { background-position: 0 0; } to { background-position: 60vmax 0; } }
    @keyframes cpLeafFall { 0% { transform: translateY(-6vh) rotate(var(--r0,0deg)); } 100% { transform: translateY(42vh) rotate(var(--r1,360deg)); } }
    @keyframes cpLeafSway { 0%,100% { margin-left: calc(var(--sw,18px) * -1); } 50% { margin-left: var(--sw,18px); } }
    #cpLeaves { position: absolute; left: 0; right: 0; top: 26vh; height: 40vh; z-index: 81; pointer-events: none; overflow: hidden; }
    #cpLeaves .cpLeaf { position: absolute; top: 0; -webkit-mask-image: url('/assets/Leaf.png'); mask-image: url('/assets/Leaf.png'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-image: url('/assets/min/Psychedelic.webp'); background-size: 120vmax; background-position: center; background-repeat: repeat; animation: cpLeafFall var(--d,9s) linear infinite, cpLeafSway var(--s,3.5s) ease-in-out infinite; will-change: transform; }
    @keyframes danjoo-hint-flow {
      0% { background-position: 0% 0; }
      100% { background-position: 250% 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      #scrollHint *, #stepHint * { animation: none !important; }
    }
    /* Kangaroo border is now baked into the smooth vector asset (KangVector.png), no drop-shadow trace needed. */
    .ffWrap { position: relative; overflow: hidden; padding: 5px; border-radius: 999px; }
    #stage button { transition: transform .38s cubic-bezier(.22,1,.36,1); }
    #stage button:hover { transform: translateY(-3px); }
    #storyTeaserBtn:hover, #cultureTeaserBtn:hover { transform: translateY(-3px); }
    #ffSubmit, .modalX { transition: transform .38s cubic-bezier(.22,1,.36,1), background .18s; }
    #ffSubmit:hover, #eventModal .modalX:hover, #cultureModal .modalX:hover { transform: translateY(-3px); }
    #cpClose:hover, #spClose:hover { transform: translateY(-3px); }
    #contactForm .ffWrap { padding: 0; overflow: hidden; border: 1.5px solid #cbb6ec; background: #fff; }
    #contactForm .ffWrap .mPlane { display: none !important; }
    #eventModal .ffWrap { padding: 0; overflow: hidden; border: 1.5px solid #cbb6ec; background: #fff; }
    #eventModal .ffWrap .mPlane { display: none !important; }
    #eventModal .ffIn { font-size: 0.88rem; padding: 8px 16px; }
    /* banner shows the rotating master plane (identical motion + centred motif) */
    /* EventModal TWO-LAYER model: emBase = one psychedelic sheet over the whole modal (big circle centred, responsive cover); emWhite = white Layer 2 on top with the top banner strip cut out so it reveals emBase. Title glyphs are true holes onto the SAME emBase (aligned in JS). */
    .emBase { position: absolute; inset: -60%; z-index: 0; background-image: url('/assets/min/Psychedelic.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; transform-origin: 50% 50%; will-change: transform; }
    .emWhite { position: absolute; inset: 0; z-index: 1; background: #fff; clip-path: inset(72px 0 0 0); -webkit-clip-path: inset(72px 0 0 0); }
    .ffIn { position: relative; z-index: 1; display: block; width: 100%; box-sizing: border-box; border: none; outline: none; background: #fff; padding: 10px 18px; border-radius: 999px; font-family: 'Archivo', sans-serif; font-size: 1rem; color: #2D1B4D; }
    .ffLbl { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: clamp(0.8rem, 1vw, 1rem); color: #2D1B4D; margin-bottom: 10px; }
    #contactForm .ffIcon { background-image: none !important; background-color: #4F1B8F; }
    #contactForm .ffLbl { margin-bottom: 10px !important; }
    .ffIcon { display: inline-block; width: 17px; height: 17px; flex: 0 0 auto; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-image: url('/assets/min/Psychedelic.webp'); background-size: 120vmax; background-repeat: repeat; }
    .ffSub { font-family: 'Archivo', sans-serif; font-size: 0.8rem; color: #8a7fa8; margin-top: 4px; padding-left: 6px; }
    /* BLINK FIX: NO will-change here. .mPlane is the inner rotating fill of every masked "window" (leaves
       .lfPlane, Kali rings .pWinPlane, pillars .kPillarPlane, timeline .tlPlane, impact .ipPlane, value
       cards, pop-ups). will-change:transform promoted each inner plane to its OWN compositor layer, which
       composited a frame out of sync with its parent's mask -> the fill flashed UNMASKED for 1 frame
       (solid disc / muddy leaf / phantom leaf). Without the promotion the plane rasterizes INSIDE its
       masked parent (overflow:hidden + mask) atomically -> mask and fill can never tear apart. Rotation +
       viewport-continuous field are unchanged. Do NOT re-add will-change to .mPlane. */
    .mPlane { position: absolute; left: 50%; top: 50%; width: 1200px; height: 1200px; margin: -600px 0 0 -600px; background-image: url('/assets/min/Psychedelic.webp'); background-size: 120vmax; background-position: calc(50% + 3.25vmax) calc(50% + 0.17vmax); background-repeat: repeat; transform-origin: center center; pointer-events: none; z-index: 0; }
    .modalPsych { position: relative; overflow: hidden; }
    /* ===== Hamburger nav ===== */
    #navBtn { position: fixed; top: 26px; right: 28px; z-index: 60; width: 46px; height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; cursor: pointer; background: rgba(255,255,255,0.0); border: none; padding: 0; }
    #navBtn span { display: block; width: 28px; height: 2px; border-radius: 100%; background: #4F1B8F; transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .3s, background .3s; }
    #navBtn.onPsych span { background: #ffffff; }
    #navBtn.open span { background: #d9c7ff; mix-blend-mode: normal; }
    #navBtn.open.onPsych span { background: #4F1B8F; }
    #navBtn.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    #navBtn.open span:nth-child(2) { opacity: 0; }
    #navBtn.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
    #navPanel { position: fixed; top: 0; right: 0; z-index: 55; width: min(82vw, 360px); height: 100dvh; background: #4F1B8F; transform: translateX(100%); transition: transform .6s cubic-bezier(.7,0,.2,1), background .4s; display: flex; flex-direction: column; justify-content: center; padding: 24px 38px; box-sizing: border-box; overflow-y: auto; }
    #navPanel.open { transform: translateX(0); box-shadow: -20px 0 60px rgba(20,4,46,.4); }
    #navPanel.onPsych { background: #ffffff; }
    #navPanel .navTag { font: 700 0.7rem/1 'Archivo',sans-serif; letter-spacing: .34em; text-transform: uppercase; color: #b89bff; margin-bottom: 26px; }
    #navPanel a { display: block; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.25; letter-spacing: -0.01em; color: #e3d4ff; text-decoration: none; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.16); cursor: pointer; transition: color .3s, padding-left .3s; }
    #navPanel a:hover { color: #ffffff; padding-left: 10px; }
    #navPanel a small { display: block; font-weight: 500; font-size: 0.875rem; line-height: 1.35; letter-spacing: .04em; color: #b89bff; margin-top: 8px; text-transform: uppercase; }
    /* Short viewports (e.g. 1440×720): compress the menu so all 9 items + padding fit with NO scroll */
    @media (max-height: 780px) {
      #navPanel { justify-content: center; padding: 18px 38px; }
      #navPanel a { font-size: 1.15rem; padding: 12px 0; }
      #navPanel a small { font-size: 0.72rem; margin-top: 3px; }
      #navPanel .navTag { margin-bottom: 12px; }
      #navBtn { width: 40px; height: 40px; }
      #navBtn span { width: 22px; }
    }
    @media (max-height: 620px) {
      #navPanel a { font-size: 1.02rem; padding: 6px 0; }
      #navPanel a small { font-size: 0.66rem; margin-top: 2px; }
    }
    #navPanel.onPsych a { color: #2D1B4D; border-bottom-color: rgba(45,27,77,.12); }
    #navPanel.onPsych a:hover { color: #7b2ff7; }
    #navPanel.onPsych a small { color: #8a6fd6; }
    #navScrim { position: fixed; inset: 0; z-index: 54; background: rgba(8,2,20,.45); opacity: 0; visibility: hidden; transition: opacity .5s; }
    #navScrim.open { opacity: 1; visibility: visible; }
    /* ===== RESPONSIVE (tablet ≤1024px, mobile ≤640px), no cutoff, no overlap ===== */
    @media (max-width: 1024px) {
      #navBtn { top: 18px; right: 18px; width: 42px; height: 42px; }
      #cpClose { top: 18px !important; right: 18px !important; }
      /* RESPONSIVE PROPORTION GUARD (≤1024): horizontal circle/timeline/pack rows wrap + centre so they
         can never cross the screen edges, and the big circles/ovals scale down so nothing reads "giant". */
      #kaliDetail > div, #kaliImpact2 > div, #kaliPartner > div, #kaliTimeline > div,
      #svcStage > div, #contactForm > div:last-child { flex-wrap: wrap !important; justify-content: center !important; }
      .ciRing { width: clamp(112px, 13.5vw, 170px) !important; height: clamp(112px, 13.5vw, 170px) !important; }
      .kaliCard { max-width: none !important; }
      #storyTeaserGum, #cultureTeaserGum { width: min(60vw, 420px) !important; height: min(34vh, 340px) !important; }
    }
    /* SHORT-VIEWPORT GUARD (laptops ≤1440 wide are usually ≤800px tall): the tall stacked blocks
       (service packs, Kali circles, timeline, contact form) shrink proportionally so they never collide
       with each other, the scroll hint, or the bottom edge. zoom keeps JS group-centring consistent. */
    @media (max-height: 820px) {
      #svcList { zoom: 0.86; }
      #storyTeaser, #cultureTeaser { zoom: 0.86; }
      #kaliDetail, #kaliImpact2, #kaliPartner, #kaliProcIntro, #kaliTimeline, #act5cards { zoom: 0.86; }
      #contactForm { zoom: 0.92; }
    }
    @media (max-height: 660px) {
      #svcList { zoom: 0.7; }
      #storyTeaser, #cultureTeaser { zoom: 0.7; }
      #kaliDetail, #kaliImpact2, #kaliPartner, #kaliProcIntro, #kaliTimeline, #act5cards { zoom: 0.7; }
      #contactForm { zoom: 0.8; }
      .ciRing { width: clamp(92px, 19vh, 140px) !important; height: clamp(92px, 19vh, 140px) !important; }
    }
    @media (max-width: 768px) {
      /* Match the 1440×720 splash EXACTLY: size by vmin (shorter side) like desktop, so the
         logo : kangaroo : viewport ratios are identical in portrait. 55vmin still leaves ≥72px
         side margins even at 320w, and the kangaroo body-centre stays pinned to screen centre by JS. */
      #logo { width: min(55vmin, 600px) !important; }
      #kangaroo { width: 27.2vmin !important; height: 27.2vmin !important; }
      /* Hamburger + close icons scale fluidly (vw) on phones */
      #navBtn { top: clamp(10px,3vw,16px) !important; right: clamp(10px,3vw,16px) !important; width: clamp(30px,8vw,40px) !important; height: clamp(30px,8vw,40px) !important; gap: clamp(3px,1vw,5px) !important; }
      #navBtn span { width: clamp(17px,4.6vw,24px) !important; height: 2px !important; }
      #navBtn.open span { display: none !important; }
      #navBtn.open::before { content: '\00d7'; color: #fff; font-family: 'Archivo', sans-serif; font-weight: 400; font-size: clamp(1.3rem, 5.5vw, 1.9rem); line-height: 1; }
      #navBtn.onPsych.open::before { color: #4F1B8F; }
      #cpClose { top: clamp(10px,3vw,16px) !important; right: clamp(10px,3vw,16px) !important; width: clamp(32px,8.5vw,42px) !important; height: clamp(32px,8.5vw,42px) !important; font-size: clamp(1.1rem,4vw,1.5rem) !important; }
      /* Fluid (vw-based) hint size, scales continuously with viewport, not a fixed mobile step */
      #stepHint > div, #scrollHint { font-size: clamp(0.42rem, 2.4vw, 0.7rem) !important; letter-spacing: 0.2em !important; gap: clamp(6px, 1.8vw, 12px) !important; }
      #stepHint > div > span:last-child, #scrollHint svg, #scrollHint span:last-child { width: clamp(30px, 10vw, 60px) !important; }
      /* full-screen sidebar on mobile */
      #navPanel { width: 100vw !important; padding: 26px 28px !important; }
      /* let every headline/paragraph wrap so nothing is clipped off-screen */
      #stage h1, #stage h2, #stage h3, #stage h4, #stage p,
      #culturePage h2, #culturePage p, #eventModal h3, #eventModal p { white-space: normal !important; }
      /* horizontal rows (pillars, contact info, timeline) stack vertically on phones */
      #kaliDetail > div, #kaliImpact2 > div, #kaliPartner > div, #kaliTimeline > div, #svcStage > div,
      #contactForm form > div, #contactForm > div:last-child { flex-wrap: wrap !important; justify-content: center !important; }
      .ciRing { width: clamp(104px, 26vw, 150px) !important; height: clamp(104px, 26vw, 150px) !important; }
      /* generous, sensible edge padding on phones */
      #storyTeaser, #cultureTeaser { padding: 5vh 7vw !important; }
      #storyTeaser p { white-space: normal !important; }
      #storyTeaser p br { display: none !important; }
      #kaliDetail, #kaliImpact2, #kaliPartner, #kaliProcIntro, #kaliCTA { width: min(92vw, 900px) !important; }
      #navBtn { top: 14px; right: 14px; width: 38px; height: 38px; }
      /* proportionally shrink the biggest JS-driven props so nothing overflows on phones */
      #contactForm form { width: min(94vw, 440px) !important; }
      /* Kali opening: the 3 dealt circles span ~3.1× the stack width — size the stack so the full
         spread always fits inside the screen with side padding, and thin the ring border to match. */
      #kaliStack { width: min(29vw, 200px) !important; height: min(29vw, 200px) !important; }
      .kaliCard { border-width: 5px !important; }
    }
    @media (max-width: 460px) {
      /* vertical deal on phones: the stack reserves the full 3-circle span (margins top+bottom equal
         to one dealt-card travel) so the top circle can NEVER overlap the title/sub-headline above,
         and aspect-ratio locks every photo to a perfect circle. */
      #kaliStack { width: min(44vw, 170px) !important; height: auto !important; aspect-ratio: 1 / 1; }
      .kaliCard { border-width: 5px !important; }
      #act5title { font-size: clamp(1.6rem, 8vw, 2.2rem) !important; }
      #act5body { font-size: clamp(0.82rem, 4vw, 1rem) !important; }
      /* Kali subsection 1, mobile: pillars stay HORIZONTAL, just smaller */
      #kPillarRow { gap: 14px !important; }
      .kPillarRing { width: min(40vw, 170px) !important; height: min(40vw, 170px) !important; }
      .kPillarRing > div:not(.mPlane) { inset: 10px !important; }
      .kPillarRing p { font-size: clamp(0.72rem, 3.4vw, 0.9rem) !important; }
      #kPillarLabel { font-size: clamp(0.9rem, 4.2vw, 1.1rem) !important; }
    }
    .kaliStep { text-align: left; }
    .kaliStepNo { font: 900 clamp(1.1rem,1.8vw,1.6rem)/1 'Archivo',sans-serif; color: #ffd400; margin-bottom: 10px; }
    .kaliStepT { font: 800 clamp(0.95rem,1.4vw,1.2rem)/1.2 'Archivo',sans-serif; color: #fff; margin-bottom: 8px; }
    .kaliStepD { font: 500 clamp(0.76rem,1.05vw,0.95rem)/1.45 'Archivo',sans-serif; color: rgba(255,255,255,0.9); }
    .kaliStat { text-align: center; }
    .kaliStatN { font: 900 clamp(2.4rem,5vw,4.4rem)/1 'Archivo',sans-serif; color: #ffd400; text-shadow: 0 2px 20px rgba(8,1,24,.5); }
    .kaliStatL { font: 600 clamp(0.72rem,1vw,0.92rem)/1.35 'Archivo',sans-serif; color: rgba(255,255,255,0.92); margin-top: 8px; }
    @keyframes kang-body-drift {
      0% { background-position: center, 0px 0px; }
      100% { background-position: center, -520px -520px; }
    }
    /* ===================================================================================================
       MOBILE DESIGN OVERRIDES ("Danjoo Mobile.dc.html"). Appended LAST + width-gated to ≤768px, so these
       win over the earlier (desktop-DC-derived) mobile rules by source order and NEVER touch desktop
       (>768 ignores the whole block). Only src/mobile.js runs at this width. Paired with the carousel
       placers in mobile.js (Community Impact / Partner / Process become one-item paged carousels).
       =================================================================================================== */
    @media (max-width: 768px) {
      /* svcList never zoom-shrinks on phones (mobile lays the 3 packs out vertically, sized below) */
      #svcList { zoom: 1 !important; }
      /* Splash group spans ~70vw (logo + 6vw herd gap + kangaroo), both ~equal height (~18.5vw). */
      #logo { width: 45.6vw !important; }
      #kangaroo { width: 26vw !important; height: 26vw !important; }
      /* Event pop-up = 90% of screen width, white sheet, centred by the scrim flex. */
      #eventModal { width: 90vw !important; background: #fff !important; }
      /* white canvas + modal scrim overshoot the bottom edge so no psychedelic hairline peeks below. */
      #canvas { height: calc(100% + 4px) !important; }
      #modalScrim { height: calc(100% + 4px) !important; }
      /* Scroll / step hint sizes to ONE line (no wrap), centred. */
      #scrollHint > div, #stepHint > div { flex-wrap: nowrap !important; justify-content: center !important; white-space: nowrap !important; font-size: 10px !important; letter-spacing: 0.16em !important; gap: 8px !important; }
      #scrollHint { left: 50% !important; }
      #stepHint > div > span:last-child, #scrollHint svg, #scrollHint span:last-child { width: 26px !important; }
      /* contact form: scrollable if tall, info rows wrap so address + website never exceed the column. */
      #contactForm { overflow-y: auto !important; }
      #contactForm .cInfoRow { flex-wrap: wrap !important; row-gap: 8px !important; }
      /* The Services: narrower column + smaller circular cards/text so the 3 packs read cleanly on phones. */
      #svcList { width: min(92vw, 540px) !important; margin: -5px auto 0 !important; gap: clamp(20px, 5.5vw, 34px) !important; }
      .svcPack { gap: clamp(16px, 4.5vw, 34px) !important; }
      .svcPack h3 { font-size: clamp(1.15rem, 5vw, 1.65rem) !important; }
      .svcBody { font-size: clamp(0.85rem, 3.6vw, 1.02rem) !important; }
      .svcCard { width: clamp(92px, 27vw, 150px) !important; height: clamp(92px, 27vw, 150px) !important; }
      /* HORIZONTAL Kali card deal (same layout as desktop): stack sized so the ~3.1× spread fits on-screen. */
      #kaliStack { width: min(40vw, 153px) !important; height: min(40vw, 153px) !important; aspect-ratio: 1 / 1; }
      #act5title { font-size: clamp(1.28rem, 6.4vw, 1.76rem) !important; }
      #act5body { font-size: clamp(0.66rem, 3.2vw, 0.8rem) !important; }
      /* Two Core Pillars: HORIZONTAL, desktop asymmetric layout, 0 gap. The Community Investment ring is
         larger so its longer label keeps ideal left/right white space inside the border. */
      #kPillarRow { gap: 0px !important; }
      #kPillarRow .kPillarRing:first-child { width: min(38vw, 150px) !important; height: min(38vw, 150px) !important; }
      #kPillarRow .kPillarRing:last-child { width: min(50vw, 200px) !important; height: min(50vw, 200px) !important; }
      .kPillarRing > div:not(.mPlane) { inset: 14px !important; }
      #kPillarRow .kPillarRing:last-child p { font-size: clamp(0.68rem, 3.1vw, 0.84rem) !important; }

      /* ---- Community Impact + Partner Selection: 4-ring CAROUSELS. The rows become positioned boxes with
             a fixed height; rings stack absolute + centred; mobile.js (_ciPlace/_pwPlace) slides them one
             per scroll. (Desktop keeps its inline flex row above 768.) ---- */
      #ciRow, #pwRow { position: relative !important; display: block !important; height: min(64vw, 260px) !important; max-width: 100% !important; margin: 0 auto clamp(1.6em, 4vh, 2.6em) !important; }
      #ciRow .ciRing, #pwRow .ciRing { position: absolute !important; left: 50%; top: 50%; margin: 0 !important; width: min(64vw, 260px) !important; height: min(64vw, 260px) !important; transform: translate(-50%, -50%); will-change: transform, opacity; }
      #ciRow .ciRing > div:not(.mPlane), #pwRow .ciRing > div:not(.mPlane) { inset: 15px !important; }
      #ciRow .ciRing p, #pwRow .ciRing p { font-size: clamp(0.82rem, 3.6vw, 1rem) !important; line-height: 1.5 !important; white-space: nowrap; }

      /* ---- The Process: ONE step at a time (circle → title → description), no horizontal timeline line. ---- */
      #tlRow { position: relative !important; display: block !important; height: min(56vh, 330px) !important; }
      #tlRow > div:not(.procStep) { display: none !important; }   /* hide the desktop horizontal timeline line */
      #tlRow .procStep { position: absolute !important; left: 50%; top: 0; width: min(94vw, 440px) !important; margin: 0 !important; transform: translate(-50%, 0); will-change: transform, opacity; }
      #tlRow .procStep [style*="52px"] { width: 91px !important; height: 91px !important; }
      /* The number badge scales 52->91px on mobile but its inner white disc keeps inset:3px, leaving a 3px
         hairline gradient ring that WebKit/iOS anti-aliasing washes out ("circle gone"). Widen the disc so
         the ring band is ~6px (≈ the CI/Partner rings' inset:15px on ~250px), restoring the bold ring. */
      #tlRow .procStep [style*="52px"] > span[style*="inset:3px"] { inset: 6px !important; }
      #tlRow .procStep span.tlText { font-size: 1.38rem !important; }
      #tlRow .procStep h4 { font-size: clamp(1.5rem, 6.96vw, 2.16rem) !important; }
      #tlRow .procStep p { font-size: clamp(1.02rem, 4.08vw, 1.2rem) !important; line-height: 1.6 !important; white-space: normal !important; }

      /* ---- Impact Pack rings: even gap from label to border on all sides; kill the row's phantom margin. ---- */
      #kaliImpactPack .ipWinRing { width: clamp(129px, 35vw, 230px) !important; height: clamp(129px, 35vw, 230px) !important; margin: 0 !important; }
      #kaliImpactPack > div { margin-bottom: 0 !important; }
      #kaliImpactPack .ipWinRing > div:not(.mPlane) { inset: 8px !important; }
      #kaliImpactPack .ipWinRing p { font-size: clamp(0.59rem, 2.37vw, 0.9rem) !important; line-height: 1.3 !important; }
      /* Proud-partners line: sized so both lines fit within mobile width, never clipped. */
      #ipProud { font-size: clamp(0.5rem, 2.72vw, 18px) !important; line-height: 1.5 !important; }
    }
    /* Phones ≤560: force the 2-2-1 Impact-Pack cluster; tuck ring 5 up so its circle is TANGENT (0px gap)
       to the two above (bounding boxes alone leave a curved gap). */
    @media (max-width: 560px) {
      #kaliImpactPack .ipWinRing { width: 39.1vw !important; height: 39.1vw !important; }
      #kaliImpactPack .ipWinRing:last-child { margin-top: -5.3vw !important; }
    }