/* ══════════════════════════════════════════════════════════════════════════ css/services.css — ALL SERVICES INDEX (/services.php) The page is a directory: eight care areas, nine treatments in each. Its whole job is to let someone find one of seventy-two things fast, and to make that not feel like a sitemap. THREE RULES IT KEEPS, from the project standard: · No max-width container anywhere. Width is 100% plus a gutter — 28px on desktop, 14px on mobile. Measure comes from column ratios. · No cards around prose. A tile is allowed where the thing IS a destination with a mark and a count; a box around a paragraph is not. · Outfit only. No serif face on any FertilityWorld page. ONE MARKUP, CSS VARIANTS. Every band is the same block; the alternating ground, the numbering and the two-column split are all CSS, and the row count is the single value PHP hands over (--rows). ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ 00 · TOKENS & PRIMITIVES ══════════════════════════════════════════════════════════════ */ .fw-svl-page{ --pad:28px; --article-top:116px; --ink:var(--dk-d); --paper:var(--wh); --paper-2:var(--paper); --line:color-mix(in srgb, var(--dk) 9%, transparent); --line-soft:color-mix(in srgb, var(--dk) 5.5%, transparent); --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --sec:clamp(38px, 4.4vw, 78px); --r1:8px; --r2:12px; --r3:16px; --ease:cubic-bezier(.22,1,.36,1); --ease-soft:cubic-bezier(.16,1,.3,1); background:var(--paper); -webkit-text-size-adjust:100% } .fw-svl{display:block;position:relative} /* The one layout primitive: width:100% plus the gutter. No max-width and no margin-inline:auto anywhere in this file. */ .fw-svl-inner{ position:relative;z-index:1; width:100%; padding-inline:var(--pad) } /* ── Icon primitive ── Every SVG is one of a printed once in the body. stroke and fill are inherited properties, so they cross the shadow boundary — which is why one rule styles every icon and colour is just currentColor. 1em sizing means a chip resizes its glyph by changing one number. */ .fw-ico{ width:1em;height:1em;flex-shrink:0; fill:none;stroke:currentColor;stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round; vertical-align:middle;overflow:visible } .fw-ico-sprite{position:absolute;width:0;height:0;overflow:hidden} .fw-svl-eyebrow{ display:block; font-size:9.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--pk) } .fw-svl-eyebrow--onDark{color:color-mix(in srgb, var(--wh) 60%, transparent)} .fw-svl-link{ display:inline-flex;align-items:center;gap:8px; font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--bl); transition:color .25s } .fw-svl-link i{font-size:11px;transition:transform .3s var(--ease)} .fw-svl-link:hover{color:var(--pk-d)} .fw-svl-link:hover i{transform:translateX(4px)} .fw-svl-txtlink{ display:inline-flex;align-items:center;gap:8px; font-size:13px;font-weight:500;color:var(--g6); transition:color .25s } .fw-svl-txtlink i{font-size:12px;color:var(--pk);transition:transform .3s var(--ease)} .fw-svl-txtlink:hover{color:var(--ink)} .fw-svl-txtlink:hover i{transform:translateY(3px)} .fw-svl-btn{ display:inline-flex;align-items:center;gap:9px; padding:13px 26px;border-radius:100px; font-size:13.5px;font-weight:600;letter-spacing:.01em; color:var(--wh);background:linear-gradient(120deg, var(--pk), var(--pk-d)); box-shadow:0 12px 28px -12px color-mix(in srgb, var(--pk) 62%, transparent); transition:transform .3s var(--ease), box-shadow .3s } .fw-svl-btn:hover{color:var(--wh);transform:translateY(-2px);box-shadow:0 18px 34px -14px color-mix(in srgb, var(--pk) 70%, transparent)} .fw-svl-btn--wh{color:var(--pk-d);background:var(--wh);box-shadow:0 12px 30px -12px color-mix(in srgb, var(--bk) 50%, transparent)} .fw-svl-btn--wh:hover{color:var(--pk-d)} .fw-svl-btn--onDark{ color:var(--wh);background:transparent; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--wh) 28%, transparent) } .fw-svl-btn--onDark:hover{color:var(--ink);background:var(--wh);box-shadow:none} /* ══════════════════════════════════════════════════════════════ 01 · §1 MASTHEAD ══════════════════════════════════════════════════════════════ */ /* ── The band ── Capped at 65vh, and a cap rather than a fixed height: the content lands below it on its own, so nothing is ever squeezed or clipped. Released below 1024, where two thirds of a phone screen cannot hold a headline this size plus its reading matter. */ .fw-svl-mast{ position:relative; display:flex;align-items:center; min-height:min(56vh, 620px); max-height:65vh; padding:clamp(18px, 2.2vw, 30px) 0; background:var(--paper) } .fw-svl-mast__in{display:flex;flex-direction:column;justify-content:center;gap:clamp(14px, 2vw, 26px)} /* Solid brand circles under filter:blur(), drifting on long loops. A flat radial wash reads as a tint; a blurred disc has a centre of mass and reads as light falling on the page. overflow:hidden alone would cut each disc dead at the box edge and leave a straight seam, so the layer is masked out before the clip reaches it. */ .fw-svl-mast__fx{ position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden; -webkit-mask-image:linear-gradient(180deg, transparent, var(--bk) 10%, var(--bk) 72%, transparent); mask-image:linear-gradient(180deg, transparent, var(--bk) 10%, var(--bk) 72%, transparent) } .fw-svl-orb{position:absolute;display:block;aspect-ratio:1;border-radius:50%;filter:blur(72px)} .fw-svl-orb--p{top:-30%;left:26%;width:clamp(240px, 26vw, 430px);background:color-mix(in srgb, var(--pk) 14%, transparent);animation:fwOrbA 21s ease-in-out infinite} .fw-svl-orb--b{top:16%;left:-6%;width:clamp(170px, 19vw, 320px);background:color-mix(in srgb, var(--bl) 13%, transparent);animation:fwOrbB 26s ease-in-out infinite} .fw-svl-orb--m{bottom:-34%;left:14%;width:clamp(160px, 18vw, 300px);background:color-mix(in srgb, var(--mt) 9%, transparent);animation:fwOrbC 24s ease-in-out infinite} @keyframes fwOrbA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-38px,30px,0) scale(1.12)}} @keyframes fwOrbB{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(30px,-26px,0) scale(.9)}} @keyframes fwOrbC{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-26px,-22px,0) scale(1.13)}} /* Crumb and kicker share one line — a magazine masthead rule, and it buys back a whole row of height inside the cap. */ .fw-svl-mast__top{ display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; padding-bottom:clamp(12px, 1.6vw, 20px); border-bottom:1px solid var(--line) } .fw-svl-kick{ display:inline-flex;align-items:center;gap:8px; font-size:10px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--g5) } .fw-svl-kick__ico{font-size:15px;color:var(--pk);stroke-width:1.6} /* All of the reading matter left; the moving frame right. */ .fw-svl-mast__grid{ /* Three columns: copy, helix, reel. The helix gets a real track rather than a percentage offset — at 58% it landed on top of the reel, because the gap's position depends on the fr ratio and the gap width, not on a share of the total. A track cannot drift. */ display:grid;grid-template-columns:minmax(0, 1.08fr) auto minmax(0, .92fr); gap:clamp(16px, 2.2vw, 38px); /* stretch, not center: the reel then takes its height from the row the copy sets, instead of from its own width. With aspect-ratio it grew with the viewport — 656px tall inside a 492px band at 1920 — because width and the height cap have nothing to do with each other. */ align-items:stretch } /* Centred as one block. It used to stretch with the CTA pinned to the foot, which left a hole between the figures and the buttons; with a title above the count the column is taller and centring reads better than a gap. */ .fw-svl-mast__copy{min-width:0;display:flex;flex-direction:column;justify-content:center} /* ── The title ── The heading proper. The count below it is the display type, so this is set for authority rather than size — tight tracking, one or two lines. */ .fw-svl-title{ margin:0 0 clamp(8px, 1.2vh, 14px); font-family:var(--ff); font-size:clamp(24px, 3.1vh + 8px, 44px); font-weight:600;line-height:1.06;letter-spacing:-.04em;color:var(--bl-d); text-wrap:balance } /* ── The count ── One line, set as a sentence. The numerals are the display type and the words ride their baseline, so it reads "8 care areas. 72 treatments." rather than as four stacked fragments. Flat brand colour, not a gradient: at this size a gradient turns the numeral into an object and the eye reads the colour instead of the number. */ .fw-svl-h1{ margin:0;font-family:var(--ff); display:flex;flex-wrap:wrap;align-items:baseline; column-gap:clamp(9px, .9vw, 15px);row-gap:2px } .fw-svl-h1__n{ /* vh, not vw. The band is capped in vh, so type that scales with WIDTH overflows it on a wide short screen. Scaling with height keeps the hero proportional to the space it is actually allowed. */ /* Stepped down now that a title sits above it: the two together have to live inside the same 65vh, and the title is the thing being read first. vh, not vw — the band is capped in vh, so type that scales with WIDTH overflows it on a wide short screen. */ font-size:clamp(34px, 5.4vh + 4px, 66px); font-weight:700;line-height:.92;letter-spacing:-.055em; font-variant-numeric:tabular-nums } /* .counter-inherit sets `font-size:inherit` at specificity (0,2,0), which beats a single class — so it silently shrank these numerals to the 16px they inherit from the paragraph. The size has to be restated at (0,3,0) to win it back, and the family too, because counter-inherit hands back size and weight but NOT --cnvs-counter-font-family (Inter). tabular-nums matters more than usual here: the number is CHANGING, and proportional digits make the line jitter as it counts. */ .fw-svl-h1__n.counter.counter-inherit{ font-size:clamp(34px, 5.4vh + 4px, 66px); font-weight:700;font-family:var(--ff);font-variant-numeric:tabular-nums } .fw-svl-vitals b.counter.counter-inherit{ font-size:clamp(16px, 1.05vw, 21px); font-weight:600;font-family:var(--ff);font-variant-numeric:tabular-nums } .fw-svl-h1__n--bl{color:var(--bl)} .fw-svl-h1__n--pk{color:var(--pk)} /* The third level, when it exists. Violet sits between the brand blue and the brand pink, so three counts read as one family rather than as two brand colours plus an outsider. */ .fw-svl-h1__n--pu{color:var(--pu)} /* A little air before the second clause so the sentence breathes where a full stop would put a pause. */ .fw-svl-h1__n--pk{margin-left:clamp(6px, .8vw, 16px)} .fw-svl-h1__w{ font-size:clamp(17px, 2vh + 5px, 27px); font-weight:600;line-height:1.12;letter-spacing:-.035em;color:var(--ink) } .fw-svl-mast__lede{ margin:clamp(12px, 1.6vh, 20px) 0 0; font-size:clamp(13.5px, .32vw + 12.6px, 15.5px); font-weight:400;line-height:1.58;letter-spacing:-.006em;color:var(--g6); text-wrap:pretty } /* ── The figures ── Icon left, number and label stacked beside it. Each item takes an equal share of the row, which is what puts even air between them AND lands the dividers on a regular rhythm — space-between alone gives dynamic gaps that a divider cannot be positioned against. */ .fw-svl-vitals{ display:flex;align-items:stretch; gap:0;margin:clamp(12px, 1.6vh, 20px) 0 0;padding:clamp(10px, 1.4vh, 16px) 0 0; list-style:none;border-top:1px solid var(--line) } .fw-svl-vitals li{ position:relative;flex:1 1 0;min-width:0; display:flex;align-items:center;gap:10px; padding-left:clamp(12px, 1.6vw, 24px) } .fw-svl-vitals li:first-child{padding-left:0} /* The divider fades out at both ends — a rule that runs the full height and stops dead reads as a table border. */ .fw-svl-vitals li + li::before{ content:'';position:absolute;left:0;top:0;bottom:0;width:1px; background:linear-gradient(180deg, transparent, var(--line) 22%, var(--line) 78%, transparent) } .fw-svl-vitals__ico{ box-sizing:content-box;flex-shrink:0; display:flex;align-items:center;justify-content:center; width:17px;height:17px;padding:8px;border-radius:10px; font-size:17px;color:var(--pk);background:var(--pk-l); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--pk) 10%, transparent) } .fw-svl-vitals li > span:last-child{display:flex;flex-direction:column;gap:1px;min-width:0} .fw-svl-vitals b{ font-size:clamp(16px, 1.05vw, 21px);font-weight:600;line-height:1.1; letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums } /* The sign is a separate mark, not part of the figure — a hair of space stops "50+" reading as one glyph cluster. em, so it tracks the sign's own size rather than a fixed pixel gap that grows wrong at large sizes. */ .fw-svl-vitals b em{ font-style:normal;font-size:.6em;font-weight:500;color:var(--pk); margin-left:.16em } .fw-svl-vitals small{font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--g5)} .fw-svl-mast__act{ display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4); margin-top:clamp(18px, 2.8vh, 34px) } /* ── The double helix ── The section's own mark, standing in the column gap. Drawn, not filled, and not a generic shape: on a fertility catalogue the helix is the one piece of ornament that is also the subject. It is decorative, so it is absolutely positioned and costs the 65vh budget nothing. */ .fw-svl-helix{ position:relative;align-self:stretch; width:clamp(22px, 2.1vw, 38px);height:100%; pointer-events:none; /* The frame. It clips the spare period that makes the loop seamless — and fades the cut so the helix emerges from nothing and returns to it, rather than being sliced off at two hard edges. */ overflow:hidden; -webkit-mask-image:linear-gradient(180deg, transparent, var(--bk) 14%, var(--bk) 86%, transparent); mask-image:linear-gradient(180deg, transparent, var(--bk) 14%, var(--bk) 86%, transparent) } /* 133.33% tall = four periods where the frame shows three. */ .fw-svl-helix__svg{ position:absolute;top:0;left:0; width:100%;height:133.3333% } @media(prefers-reduced-motion:no-preference){ /* translateY is a percentage of the SVG's OWN height, so -25% is exactly one of its four periods — the frame cannot tell the difference between the end of the loop and the start of it. */ .fw-svl-helix__svg{animation:fwHelixTurn 14s linear infinite} } @keyframes fwHelixTurn{from{transform:translateY(0)}to{transform:translateY(-25%)}} .fw-svl-helix__s{ stroke:var(--bl);stroke-width:1.4;stroke-linecap:round;opacity:.34 } .fw-svl-helix__s--b{stroke:var(--pk);opacity:.3} .fw-svl-helix__r{stroke:var(--g3);stroke-width:1;stroke-linecap:round;opacity:.5} @media(prefers-reduced-motion:no-preference){ /* Drawn on, not faded in — pathLength normalises every path to 1 so one dash pair works for all three regardless of their real lengths. */ .fw-svl-helix__s, .fw-svl-helix__r{ pathLength:1;stroke-dasharray:1;stroke-dashoffset:1; animation:fwDraw 1.6s cubic-bezier(.4,0,.2,1) both } .fw-svl-helix__s{animation-delay:.35s} .fw-svl-helix__s--b{animation-delay:.5s} .fw-svl-helix__r{animation-delay:.9s;animation-duration:1.1s} } @keyframes fwDraw{to{stroke-dashoffset:0}} /* ══ THE REEL ══════════════════════════════════════════════════════ One frame, every care area crossfading through it. The height is set by aspect-ratio, so eight areas and eighteen occupy exactly the same space — which is the whole reason the tile grid came out of this section. services.js advances the active slide for any catalogue size. The first slide is visible without JavaScript; reduced motion pauses the reel. */ .fw-svl-reel{ --slide:4.6s; position:relative; height:100%;min-height:clamp(270px, 43vh, 430px);min-width:0; /* Square, and no shadow. A radius makes a photograph a card; edge to edge it reads as a printed plate, which is the whole point of the magazine treatment. */ overflow:hidden; background:linear-gradient(160deg, var(--g1), var(--g2)) } .fw-svl-reel figure{ position:absolute;inset:0;margin:0;opacity:0; transition:opacity .55s ease } .fw-svl-reel figure.is-active{opacity:1} .fw-svl-reel img{ position:absolute;inset:0; width:100%!important;height:100%!important; max-width:none!important;max-height:none!important; object-fit:cover!important; opacity:1 } .fw-svl-reel figcaption{ position:absolute;left:0;right:0;bottom:0;z-index:2; display:flex;align-items:center;gap:11px; padding:34px 18px 16px; background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--dk-d) 72%, transparent) 55%, color-mix(in srgb, var(--dk-d) 88%, transparent)); color:var(--wh) } .fw-svl-reel__ico{ display:flex;align-items:center;justify-content:center; width:34px;height:34px;flex-shrink:0;border-radius:11px; font-size:18px;color:var(--wh); background:color-mix(in srgb, var(--wh) 16%, transparent); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--wh) 22%, transparent) } .fw-svl-reel figcaption > span{display:flex;flex-direction:column;gap:1px;min-width:0} .fw-svl-reel figcaption b{font-size:15px;font-weight:600;letter-spacing:-.02em} .fw-svl-reel figcaption small{font-size:11px;color:color-mix(in srgb, var(--wh) 72%, transparent)} /* The timer. One slide wide, looping — it tells the eye the frame is on a clock rather than reacting to it. */ /* The line you read down the edge of a magazine cover. writing-mode turns the text rather than a transform, so it stays selectable and the box it occupies is the box it actually needs. */ .fw-svl-reel__spine{ position:absolute;left:0;top:0;z-index:3; writing-mode:vertical-rl; padding:16px 11px; font-size:9.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase; color:color-mix(in srgb, var(--wh) 90%, transparent); background:linear-gradient(180deg, color-mix(in srgb, var(--dk-d) 42%, transparent), transparent); text-shadow:0 1px 8px color-mix(in srgb, var(--bk) 50%, transparent) } .fw-svl-reel__bar{position:absolute;left:0;right:0;bottom:0;z-index:3;height:2px;background:var(--wh-a20)} .fw-svl-reel__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg, var(--bl), var(--pk))} @media(prefers-reduced-motion:no-preference){ /* Ken Burns on the picture, not the slide, so the fade and the drift are independent and neither has to compromise for the other. */ .fw-svl-reel figure.is-active img{ animation:fwKen var(--slide) linear both } .fw-svl-reel__bar i{animation:fwBar var(--slide) linear infinite} } @keyframes fwKen{ from{transform:scale(1.02)}to{transform:scale(1.1)} } @keyframes fwBar{from{width:0}to{width:100%}} /* ── Motion ── The stagger is the child's position, stated here — nothing in the markup carries a delay (no inline CSS, ever). */ @media(prefers-reduced-motion:no-preference){ .fw-svl-mast__copy > *{animation:fwRise .55s cubic-bezier(.22,1,.36,1) both} .fw-svl-mast__copy > :nth-child(1){animation-delay:80ms} .fw-svl-mast__copy > :nth-child(2){animation-delay:150ms} .fw-svl-mast__copy > :nth-child(3){animation-delay:220ms} .fw-svl-mast__copy > :nth-child(4){animation-delay:360ms} .fw-svl-h1__n{animation:fwNum .8s cubic-bezier(.22,1,.36,1) both;animation-delay:120ms} .fw-svl-h1__n--pk{animation-delay:230ms} .fw-svl-reel{animation:fwRise .7s cubic-bezier(.22,1,.36,1) both;animation-delay:200ms} /* Then the scroll: the masthead lifts and dims as it leaves, which is what makes the page feel like it is moving rather than jumping. Progressive enhancement — a browser without animation-timeline never applies the rule and shows the hero normally. */ @supports (animation-timeline: view()) { .fw-svl-mast__in{ animation:fwHeroExit linear both; animation-timeline:view(); animation-range:exit 0% exit 78% } .fw-svl-mast__fx{ animation:fwHeroDrift linear both; animation-timeline:view(); animation-range:exit 0% exit 100% } } } @keyframes fwRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* The numerals arrive from slightly under and over-scaled — the one place on the page where a little theatre is earned. */ @keyframes fwNum{from{opacity:0;transform:translateY(22px) scale(.94)}to{opacity:1;transform:none}} @keyframes fwHeroExit{from{opacity:1;transform:none}to{opacity:.25;transform:translateY(-38px)}} @keyframes fwHeroDrift{from{transform:none}to{transform:translateY(-56px) scale(1.06)}} /* ══════════════════════════════════════════════════════════════ 02 · §2 JUMP RAIL ══════════════════════════════════════════════════════════════ */ .fw-svl-jump{ position:sticky;top:var(--article-top);z-index:40; background:color-mix(in srgb, var(--wh) 90%, transparent); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px); border-block:1px solid var(--line-soft) } /* padding-block belongs to the SCROLLING
    , never to the wrapper: overflow-x:auto forces overflow-y:auto, and a wrapper's padding sits outside that scroll box — so anything that overflows an item gets sliced off top and bottom. */ .fw-svl-jump ul{ display:flex;align-items:stretch;gap:0; margin:0;padding:0;list-style:none; overflow-x:auto;overflow-y:hidden; scrollbar-width:none;-ms-overflow-style:none; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch } .fw-svl-jump ul::-webkit-scrollbar{display:none} .fw-svl-jump li{position:relative;flex:0 0 auto;scroll-snap-align:start;display:flex} /* The leading word. Same device as the "Try" on a search strip: it tells you what the row is before you read any of it. */ .fw-svl-jump__lbl{ align-items:center; padding:0 clamp(12px, 1.2vw, 18px) 0 0; font-size:9.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase; color:var(--g4);white-space:nowrap } /* A divider between items, faded at both ends. A rule that runs the full height and stops dead reads as a table border. */ .fw-svl-jump li + li::before{ content:'';position:absolute;left:0;top:22%;bottom:22%;width:1px; background:linear-gradient(180deg, transparent, var(--line) 26%, var(--line) 74%, transparent) } /* No radius, no ring, no fill. The only thing that marks a link is the rule under it — blue while the pointer is on it, brand pink when it is the one you are looking at. The border is always THERE and only changes colour, so nothing shifts by 2px as you move across the row. */ .fw-svl-jump__link{ display:flex;align-items:center;gap:9px;white-space:nowrap; padding:13px clamp(12px, 1.3vw, 20px); border-bottom:2px solid transparent; font-size:12.5px;font-weight:500;letter-spacing:-.005em;color:var(--g6); transition:color .25s, border-color .25s, background .25s } .fw-svl-jump__link:hover{color:var(--bl-d);border-bottom-color:var(--bl);background:var(--bl-bg)} .fw-svl-jump__link.is-on{color:var(--pk-d);font-weight:600;border-bottom-color:var(--pk)} /* The uploaded icon. Greyed back until the item is hovered or current, so eight raster marks in a row read as one quiet strip rather than eight competing colours. */ .fw-svl-jump__ico{ width:20px;height:20px;flex-shrink:0;object-fit:contain; opacity:.45;filter:grayscale(1); transition:opacity .25s, filter .25s } .fw-svl-jump__link:hover .fw-svl-jump__ico, .fw-svl-jump__link.is-on .fw-svl-jump__ico{opacity:1;filter:none} /* ── When the row is wider than the screen ── Two arrows and an edge fade, both switched on by core.js and only when the row actually overflows: `.has-rail` on the nav, plus `.at-start` / `.at-end` so each side's fade and arrow disappear once there is nothing further that way. On a phone there is nothing to show — a swipe is the affordance — so the arrows stay hidden there and the fade does the work. The fade starts at the gutter, not at 0: the scrolling
      sits inside the padded wrapper, so that IS the edge content is clipped at. */ .fw-svl-jump__inner::before, .fw-svl-jump__inner::after{ content:'';position:absolute;top:0;bottom:0;z-index:2; width:clamp(40px, 5vw, 74px); pointer-events:none;opacity:0;transition:opacity .3s } .fw-svl-jump__inner::before{left:var(--pad);background:linear-gradient(90deg, var(--wh) 22%, transparent)} .fw-svl-jump__inner::after{right:var(--pad);background:linear-gradient(270deg, var(--wh) 22%, transparent)} .fw-svl-jump.has-rail:not(.at-start) .fw-svl-jump__inner::before{opacity:1} .fw-svl-jump.has-rail:not(.at-end) .fw-svl-jump__inner::after{opacity:1} .fw-svl-jump__nav{ position:absolute;top:50%;transform:translateY(-50%);z-index:3; display:none;align-items:center;justify-content:center; width:30px;height:30px;padding:0;border:0;border-radius:50%; background:var(--wh);color:var(--g6);cursor:pointer; box-shadow:0 4px 14px -5px var(--ink-a40), inset 0 0 0 1px var(--line); transition:color .22s, background .22s, opacity .25s, transform .25s var(--ease) } .fw-svl-jump.has-rail .fw-svl-jump__nav{display:flex} .fw-svl-jump__nav i{font-size:12px;line-height:1} .fw-svl-jump__nav:hover{color:var(--bl-d);background:var(--wh)} .fw-svl-jump__nav:active{transform:translateY(-50%) scale(.94)} /* Disabled rather than removed: taking the button out of the flow at the end of the travel would shift the fade and flicker on every click. */ .fw-svl-jump__nav[disabled]{opacity:0;pointer-events:none} .fw-svl-jump__nav--prev{left:calc(var(--pad) - 5px)} .fw-svl-jump__nav--next{right:calc(var(--pad) - 5px)} /* Phones keep the fade and lose the arrows: a swipe is the affordance there, and two 30px targets over a 14px gutter crowd the row. Not keyed to (hover:none) — a touchscreen laptop is still a desktop layout, and would lose the arrows with nothing replacing them. */ @media(max-width:768px){ .fw-svl-jump.has-rail .fw-svl-jump__nav{display:none} } /* ══════════════════════════════════════════════════════════════ 03 · §3 CARE-AREA BANDS A contents page, not a grid of tiles. The reader here is scanning NAMES — nine treatments and their services — and names read faster in a column than inside a card. Typography and rules carry it; there is no box, no plate and no gradient anywhere in this section. ══════════════════════════════════════════════════════════════ */ .fw-svl-band{position:relative;padding:var(--sec) 0;overflow:hidden} /* The grounds cycle themselves — :nth-child over a wrapper holding only bands, so eight today and twelve tomorrow keep the same rhythm with nothing in PHP deciding it. Four steps, not two: alternating one tint reads as a stripe, four reads as a sequence of chapters. */ .fw-svl-bands > .fw-svl-band:nth-child(4n+1){background:var(--paper)} .fw-svl-bands > .fw-svl-band:nth-child(4n+2){background:linear-gradient(180deg, var(--paper-b), var(--paper-b2))} .fw-svl-bands > .fw-svl-band:nth-child(4n+3){background:linear-gradient(180deg, var(--paper-p), var(--paper-p2))} .fw-svl-bands > .fw-svl-band:nth-child(4n+4){background:linear-gradient(180deg, var(--paper-m), var(--paper-m2))} .fw-svl-bands > .fw-svl-band + .fw-svl-band{border-top:1px solid var(--line-soft)} /* ── The ambient layer ── Every band ships the same three empty elements; WHICH motif and which colours they become is decided here by :nth-child. That is the whole point — the bands are dynamic, so the variety has to live in CSS rather than in a value PHP writes per section. The cycle is 8, so a ninth care area starts the sequence again instead of falling off the end of it. Two blurred discs give the band its ground (the page was reading black and white without them); the third element is a drawn figure that turns. */ .fw-svl-band__fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .fw-svl-band__orb{ position:absolute;display:block;aspect-ratio:1;border-radius:50%; filter:blur(84px);opacity:.55 } .fw-svl-band__ring{ position:absolute;display:block;aspect-ratio:1; border-radius:50%;opacity:.5 } /* Positions and sizes are shared; only the figure, its hue and its speed change per band, so the sequence reads as one system rather than eight unrelated treatments. */ .fw-svl-band__orb:nth-child(1){top:-18%;right:6%;width:clamp(230px, 26vw, 430px)} .fw-svl-band__orb:nth-child(2){bottom:-30%;left:22%;width:clamp(180px, 20vw, 330px)} /* ── The spine ── The hero's helix, one per band. Same construction: a narrow drawn strip running the full height, travelling by exactly one tile so the loop has no seam, faded at both ends. It sits in the page gutter — the padding outside the content — so it can never land on a word. Drawn as a background IMAGE, not a mask. A mask takes only the alpha, so every figure came out one flat colour — which is what made these read as 2D next to the hero. As images the SVGs carry their own strokes, so each one has a blue strand, a pink strand and its own accents, and the depth comes from the artwork rather than from opacity tricks. Still chosen by :nth-child, so the markup is identical in every band and a ninth care area restarts the sequence. */ .fw-svl-band__ring{ right:0;top:0;bottom:0; width:var(--pad);height:auto;aspect-ratio:auto; border-radius:0;overflow:hidden;opacity:1; -webkit-mask-image:linear-gradient(180deg, transparent, var(--bk) 12%, var(--bk) 88%, transparent); mask-image:linear-gradient(180deg, transparent, var(--bk) 12%, var(--bk) 88%, transparent) } .fw-svl-band__ring::before{ content:'';position:absolute;left:0;right:0;top:0; /* One tile taller than the frame, so translating by exactly one tile lands the pattern back where it started. */ height:calc(100% + 280px); background-repeat:repeat-y; /* The strip is --pad wide and every figure is drawn in a 56x560 viewBox, so the tile has to be --pad x --pad*10 — at any other ratio the SVG is letterboxed and the figure breaks at each tile edge. 280 is two tiles at the 14px gutter and one at 28px, so the loop stays seamless. */ background-size:var(--pad) calc(var(--pad) * 10); background-position:center top; opacity:.62 } @media(prefers-reduced-motion:no-preference){ .fw-svl-band__ring::before{animation:fwSpineRun linear infinite} } @keyframes fwSpineRun{from{transform:translateY(0)}to{transform:translateY(-280px)}} /* Positions and sizes are shared; only the figure, its orbs and its speed change per band, so the sequence reads as one system. */ .fw-svl-band__orb:nth-child(1){top:-18%;right:6%;width:clamp(230px, 26vw, 430px)} .fw-svl-band__orb:nth-child(2){bottom:-30%;left:22%;width:clamp(180px, 20vw, 330px)} /* 1 · DNA double helix */ .fw-svl-bands > .fw-svl-band:nth-child(8n+1) .fw-svl-band__orb:nth-child(1){background:color-mix(in srgb, var(--pk) 30%, transparent)} .fw-svl-bands > .fw-svl-band:nth-child(8n+1) .fw-svl-band__orb:nth-child(2){background:color-mix(in srgb, var(--bl) 24%, transparent)} .fw-svl-bands > .fw-svl-band:nth-child(8n+1) .fw-svl-band__ring::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 560' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M41.3 21L14.7 21' stroke='%23CBD5E1' stroke-width='1.5' opacity='0.7'/%3E%3Cpath d='M44.5 35L11.5 35' stroke='%23CBD5E1' stroke-width='1.5' opacity='0.8'/%3E%3Cpath d='M41.3 49L14.7 49' stroke='%23CBD5E1' stroke-width='1.5' opacity='0.7'/%3E%3Cpath d='M19.1 11.2C9 27.1 9 42.9 19.1 58.8' stroke='%23E9348A' stroke-width='2' opacity='0.5'/%3E%3Cpath d='M28 0C50 23.3 50 46.7 28 70' stroke='%231478C8' stroke-width='2.4' opacity='0.9'/%3E%3Ccircle cx='41.3' cy='21' r='1.7' fill='%231478C8' opacity='0.9'/%3E%3Ccircle cx='41.3' cy='49' r='1.7' fill='%231478C8' opacity='0.9'/%3E%3Cpath d='M14.7 91L41.3 91' stroke='%23CBD5E1' stroke-width='1.5' opacity='0.7'/%3E%3Cpath d='M11.5 105L44.5 105' stroke='%23CBD5E1' stroke-width='1.5' opacity='0.8'/%3E%3Cpath d='M14.7 119L41.3 119' stroke='%23CBD5E1' stroke-width='1.5' opacity='0.7'/%3E%3Cpath d='M19.1 81.2C9 97.1 9 112.9 19.1 128.8' stroke='%231478C8' stroke-width='2' opacity='0.5'/%3E%3Cpath d='M28 70C50 93.3 50 116.7 28 140' stroke='%23E9348A' stroke-width='2.4' opacity='0.9'/%3E%3Ccircle cx='14.7' cy='91' r='1.7' fill='%23E9348A' opacity='0.9'/%3E%3Ccircle cx='14.7' cy='119' r='1.7' fill='%23E9348A' opacity='0.9'/%3E%3Cpath d='M41.3 161L14.7 161' stroke='%23CBD5E1' stroke-width='1.5' opacity='0.7'/%3E%3Cpath d='M44.5 175L11.5 175' stroke='%23CBD5E1' stroke-width='1.5' opacity='0.8'/%3E%3Cpath d='M41.3 189L14.7 189' stroke='%23CBD5E1' stroke-width='1.5' opacity='0.7'/%3E%3Cpath d='M19.1 151.2C9 167.1 9 182.9 19.1 198.8' stroke='%23E9348A' stroke-width='2' opacity='0.5'/%3E%3Cpath d='M28 140C50 163.3 50 186.7 28 210' stroke='%231478C8' stroke-width='2.4' opacity='0.9'/%3E%3Ccircle cx='41.3' cy='161' r='1.7' fill='%231478C8' opacity='0.9'/%3E%3Ccircle cx='41.3' cy='189' r='1.7' fill='%231478C8' opacity='0.9'/%3E%3Cpath d='M14.7 231L41.3 231' stroke='%23CBD5E1' stroke-width='1.5' opacity='0.7'/%3E%3Cpath d='M11.5 245L44.5 245' stroke='%23CBD5E1' stroke-width='1.5' opacity='0.8'/%3E%3Cpath d='M14.7 259L41.3 259' stroke='%23CBD5E1' stroke-width='1.5' opacity='0.7'/%3E%3Cpath d='M19.1 221.2C9 237.1 9 252.9 19.1 268.8' stroke='%231478C8' stroke-width='2' opacity='0.5'/%3E%3Cpath d='M28 210C50 233.3 50 256.7 28 280' stroke='%23E9348A' stroke-width='2.4' opacity='0.9'/%3E%3Ccircle cx='14.7' cy='231' r='1.7' fill='%23E9348A' opacity='0.9'/%3E%3Ccircle cx='14.7' cy='259' r='1.7' fill='%23E9348A' opacity='0.9'/%3E%3Cpath d='M41.3 301L14.7 301' stroke='%23CBD5E1' stroke-width='1.5' opacity='0.7'/%3E%3Cpath d='M44.5 315L11.5 315' stroke='%23CBD5E1' stroke-width='1.5' opacity='0.8'/%3E%3Cpath d='M41.3 329L14.7 329' stroke='%23CBD5E1' stroke-width='1.5' opacity='0.7'/%3E%3Cpath d='M19.1 291.2C9 307.1 9 322.9 19.1 338.8' stroke='%23E9348A' stroke-width='2' opacity='0.5'/%3E%3Cpath d='M28 280C50 303.3 50 326.7 28 350' stroke='%231478C8' stroke-width='2.4' opacity='0.9'/%3E%3Ccircle cx='41.3' cy='301' r='1.7' fill='%231478C8' opacity='0.9'/%3E%3Ccircle cx='41.3' cy='329' r='1.7' fill='%231478C8' opacity='0.9'/%3E%3Cpath d='M14.7 371L41.3 371' stroke='%23CBD5E1' stroke-width='1.5' opacity='0.7'/%3E%3Cpath d='M11.5 385L44.5 385' stroke='%23CBD5E1' stroke-width='1.5' opacity='0.8'/%3E%3Cpath d='M14.7 399L41.3 399' stroke='%23CBD5E1' stroke-width='1.5' opacity='0.7'/%3E%3Cpath d='M19.1 361.2C9 377.1 9 392.9 19.1 408.8' stroke='%231478C8' stroke-width='2' opacity='0.5'/%3E%3Cpath d='M28 350C50 373.3 50 396.7 28 420' stroke='%23E9348A' stroke-width='2.4' opacity='0.9'/%3E%3Ccircle cx='14.7' cy='371' r='1.7' fill='%23E9348A' opacity='0.9'/%3E%3Ccircle cx='14.7' cy='399' r='1.7' fill='%23E9348A' opacity='0.9'/%3E%3Cpath d='M41.3 441L14.7 441' stroke='%23CBD5E1' stroke-width='1.5' opacity='0.7'/%3E%3Cpath d='M44.5 455L11.5 455' stroke='%23CBD5E1' stroke-width='1.5' opacity='0.8'/%3E%3Cpath d='M41.3 469L14.7 469' stroke='%23CBD5E1' stroke-width='1.5' opacity='0.7'/%3E%3Cpath d='M19.1 431.2C9 447.1 9 462.9 19.1 478.8' stroke='%23E9348A' stroke-width='2' opacity='0.5'/%3E%3Cpath d='M28 420C50 443.3 50 466.7 28 490' stroke='%231478C8' stroke-width='2.4' opacity='0.9'/%3E%3Ccircle cx='41.3' cy='441' r='1.7' fill='%231478C8' opacity='0.9'/%3E%3Ccircle cx='41.3' cy='469' r='1.7' fill='%231478C8' opacity='0.9'/%3E%3Cpath d='M14.7 511L41.3 511' stroke='%23CBD5E1' stroke-width='1.5' opacity='0.7'/%3E%3Cpath d='M11.5 525L44.5 525' stroke='%23CBD5E1' stroke-width='1.5' opacity='0.8'/%3E%3Cpath d='M14.7 539L41.3 539' stroke='%23CBD5E1' stroke-width='1.5' opacity='0.7'/%3E%3Cpath d='M19.1 501.2C9 517.1 9 532.9 19.1 548.8' stroke='%231478C8' stroke-width='2' opacity='0.5'/%3E%3Cpath d='M28 490C50 513.3 50 536.7 28 560' stroke='%23E9348A' stroke-width='2.4' opacity='0.9'/%3E%3Ccircle cx='14.7' cy='511' r='1.7' fill='%23E9348A' opacity='0.9'/%3E%3Ccircle cx='14.7' cy='539' r='1.7' fill='%23E9348A' opacity='0.9'/%3E%3C/svg%3E"); animation-duration:48s} /* 2 · ovarian follicle, maturing */ .fw-svl-bands > .fw-svl-band:nth-child(8n+2) .fw-svl-band__orb:nth-child(1){background:color-mix(in srgb, var(--bl) 30%, transparent)} .fw-svl-bands > .fw-svl-band:nth-child(8n+2) .fw-svl-band__orb:nth-child(2){background:color-mix(in srgb, var(--mt) 24%, transparent)} .fw-svl-bands > .fw-svl-band:nth-child(8n+2) .fw-svl-band__ring::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 560' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='28' cy='72' r='13.5' stroke='%23CBD5E1' stroke-width='1.2' opacity='0.8'/%3E%3Ccircle cx='28' cy='72' r='13.5' stroke='%23E9348A' stroke-width='3.8' opacity='0.7' stroke-dasharray='0.1 8.5'/%3E%3Ccircle cx='28' cy='70.7' r='8.6' stroke='%23E9348A' stroke-width='1.4' opacity='0.9'/%3E%3Cpath d='M28 76L28 85.5' stroke='%234CD5AA' stroke-width='1.2' opacity='0.6'/%3E%3Ccircle cx='28' cy='76' r='7.5' stroke='%234CD5AA' stroke-width='1' opacity='0.8'/%3E%3Ccircle cx='28' cy='76' r='4.3' fill='%23E9348A' opacity='0.9'/%3E%3Ccircle cx='26.7' cy='74.8' r='1.5' fill='%23FFFFFF' opacity='0.6'/%3E%3Ccircle cx='28' cy='212' r='17.5' stroke='%23CBD5E1' stroke-width='1.2' opacity='0.8'/%3E%3Ccircle cx='28' cy='212' r='17.5' stroke='%231478C8' stroke-width='3.8' opacity='0.7' stroke-dasharray='0.1 9.2'/%3E%3Ccircle cx='28' cy='210.2' r='11.2' stroke='%231478C8' stroke-width='1.4' opacity='0.9'/%3E%3Cpath d='M28 217.2L28 229.5' stroke='%234CD5AA' stroke-width='1.2' opacity='0.6'/%3E%3Ccircle cx='28' cy='217.2' r='8.6' stroke='%234CD5AA' stroke-width='1' opacity='0.8'/%3E%3Ccircle cx='28' cy='217.2' r='5.3' fill='%231478C8' opacity='0.9'/%3E%3Ccircle cx='26.4' cy='215.6' r='1.8' fill='%23FFFFFF' opacity='0.6'/%3E%3Ccircle cx='28' cy='352' r='21.5' stroke='%23CBD5E1' stroke-width='1.2' opacity='0.8'/%3E%3Ccircle cx='28' cy='352' r='21.5' stroke='%23E9348A' stroke-width='3.8' opacity='0.7' stroke-dasharray='0.1 9.6'/%3E%3Ccircle cx='28' cy='349.9' r='13.8' stroke='%23E9348A' stroke-width='1.4' opacity='0.9'/%3E%3Cpath d='M28 358.4L28 373.5' stroke='%234CD5AA' stroke-width='1.2' opacity='0.6'/%3E%3Ccircle cx='28' cy='358.4' r='9.6' stroke='%234CD5AA' stroke-width='1' opacity='0.8'/%3E%3Ccircle cx='28' cy='358.4' r='6.4' fill='%23E9348A' opacity='0.9'/%3E%3Ccircle cx='26.1' cy='356.5' r='2.2' fill='%23FFFFFF' opacity='0.6'/%3E%3Ccircle cx='28' cy='492' r='25.5' stroke='%23CBD5E1' stroke-width='1.2' opacity='0.8'/%3E%3Ccircle cx='28' cy='492' r='25.5' stroke='%231478C8' stroke-width='3.8' opacity='0.7' stroke-dasharray='0.1 10'/%3E%3Ccircle cx='28' cy='489.4' r='16.3' stroke='%231478C8' stroke-width='1.4' opacity='0.9'/%3E%3Cpath d='M28 499.6L28 517.5' stroke='%234CD5AA' stroke-width='1.2' opacity='0.6'/%3E%3Ccircle cx='28' cy='499.6' r='10.6' stroke='%234CD5AA' stroke-width='1' opacity='0.8'/%3E%3Ccircle cx='28' cy='499.6' r='7.4' fill='%231478C8' opacity='0.9'/%3E%3Ccircle cx='25.8' cy='497.4' r='2.5' fill='%23FFFFFF' opacity='0.6'/%3E%3C/svg%3E"); animation-duration:56s} /* 3 · spermatozoa */ .fw-svl-bands > .fw-svl-band:nth-child(8n+3) .fw-svl-band__orb:nth-child(1){background:color-mix(in srgb, var(--pu) 30%, transparent)} .fw-svl-bands > .fw-svl-band:nth-child(8n+3) .fw-svl-band__orb:nth-child(2){background:color-mix(in srgb, var(--pk) 24%, transparent)} .fw-svl-bands > .fw-svl-band:nth-child(8n+3) .fw-svl-band__ring::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 560' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='21' cy='34' rx='5.4' ry='7.4' fill='%231478C8' opacity='0.95' transform='rotate(-14 21 34)'/%3E%3Ccircle cx='19.6' cy='31.8' r='1.8' fill='%23FFFFFF' opacity='0.5'/%3E%3Cpath d='M22.1 42L22.5 46L22.5 50L21.9 54L20.7 58L19.3 62L18.1 66L17.7 70L18.3 74L19.9 78L22.2 82L24.4 86L25.8 90L26 94L24.5 98L21.8 102L18.5 106L15.7 110L14.2 114L14.7 118L17.1 122L21 126L25.2 130L28.4 134L29.7 138' stroke='%231478C8' stroke-width='1.5' opacity='0.8'/%3E%3Cpath d='M21 41L21.9 54' stroke='%231478C8' stroke-width='2.6' opacity='0.9'/%3E%3Cellipse cx='35' cy='174' rx='5.4' ry='7.4' fill='%23E9348A' opacity='0.95' transform='rotate(14 35 174)'/%3E%3Ccircle cx='33.6' cy='171.8' r='1.8' fill='%23FFFFFF' opacity='0.5'/%3E%3Cpath d='M33.9 182L33.5 186L33.5 190L34.1 194L35.3 198L36.7 202L37.9 206L38.3 210L37.7 214L36.1 218L33.8 222L31.6 226L30.2 230L30 234L31.5 238L34.2 242L37.5 246L40.3 250L41.8 254L41.3 258L38.9 262L35 266L30.8 270L27.6 274L26.3 278' stroke='%23E9348A' stroke-width='1.5' opacity='0.8'/%3E%3Cpath d='M35 181L34.1 194' stroke='%23E9348A' stroke-width='2.6' opacity='0.9'/%3E%3Cellipse cx='21' cy='314' rx='5.4' ry='7.4' fill='%231478C8' opacity='0.95' transform='rotate(-14 21 314)'/%3E%3Ccircle cx='19.6' cy='311.8' r='1.8' fill='%23FFFFFF' opacity='0.5'/%3E%3Cpath d='M22.1 322L22.5 326L22.5 330L21.9 334L20.7 338L19.3 342L18.1 346L17.7 350L18.3 354L19.9 358L22.2 362L24.4 366L25.8 370L26 374L24.5 378L21.8 382L18.5 386L15.7 390L14.2 394L14.7 398L17.1 402L21 406L25.2 410L28.4 414L29.7 418' stroke='%231478C8' stroke-width='1.5' opacity='0.8'/%3E%3Cpath d='M21 321L21.9 334' stroke='%231478C8' stroke-width='2.6' opacity='0.9'/%3E%3Cellipse cx='35' cy='454' rx='5.4' ry='7.4' fill='%23E9348A' opacity='0.95' transform='rotate(14 35 454)'/%3E%3Ccircle cx='33.6' cy='451.8' r='1.8' fill='%23FFFFFF' opacity='0.5'/%3E%3Cpath d='M33.9 462L33.5 466L33.5 470L34.1 474L35.3 478L36.7 482L37.9 486L38.3 490L37.7 494L36.1 498L33.8 502L31.6 506L30.2 510L30 514L31.5 518L34.2 522L37.5 526L40.3 530L41.8 534L41.3 538L38.9 542L35 546L30.8 550L27.6 554L26.3 558' stroke='%23E9348A' stroke-width='1.5' opacity='0.8'/%3E%3Cpath d='M35 461L34.1 474' stroke='%23E9348A' stroke-width='2.6' opacity='0.9'/%3E%3C/svg%3E"); animation-duration:40s} /* 4 · fetal heart trace */ .fw-svl-bands > .fw-svl-band:nth-child(8n+4) .fw-svl-band__orb:nth-child(1){background:color-mix(in srgb, var(--mt) 30%, transparent)} .fw-svl-bands > .fw-svl-band:nth-child(8n+4) .fw-svl-band__orb:nth-child(2){background:color-mix(in srgb, var(--bl) 24%, transparent)} .fw-svl-bands > .fw-svl-band:nth-child(8n+4) .fw-svl-band__ring::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 560' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17L11 17' stroke='%23CBD5E1' stroke-width='1' opacity='0.3'/%3E%3Cpath d='M3 52L11 52' stroke='%23CBD5E1' stroke-width='1' opacity='0.3'/%3E%3Cpath d='M3 87L11 87' stroke='%23CBD5E1' stroke-width='1' opacity='0.3'/%3E%3Cpath d='M3 122L11 122' stroke='%23CBD5E1' stroke-width='1' opacity='0.3'/%3E%3Cpath d='M3 157L11 157' stroke='%23CBD5E1' stroke-width='1' opacity='0.3'/%3E%3Cpath d='M3 192L11 192' stroke='%23CBD5E1' stroke-width='1' opacity='0.3'/%3E%3Cpath d='M3 227L11 227' stroke='%23CBD5E1' stroke-width='1' opacity='0.3'/%3E%3Cpath d='M3 262L11 262' stroke='%23CBD5E1' stroke-width='1' opacity='0.3'/%3E%3Cpath d='M3 297L11 297' stroke='%23CBD5E1' stroke-width='1' opacity='0.3'/%3E%3Cpath d='M3 332L11 332' stroke='%23CBD5E1' stroke-width='1' opacity='0.3'/%3E%3Cpath d='M3 367L11 367' stroke='%23CBD5E1' stroke-width='1' opacity='0.3'/%3E%3Cpath d='M3 402L11 402' stroke='%23CBD5E1' stroke-width='1' opacity='0.3'/%3E%3Cpath d='M3 437L11 437' stroke='%23CBD5E1' stroke-width='1' opacity='0.3'/%3E%3Cpath d='M3 472L11 472' stroke='%23CBD5E1' stroke-width='1' opacity='0.3'/%3E%3Cpath d='M3 507L11 507' stroke='%23CBD5E1' stroke-width='1' opacity='0.3'/%3E%3Cpath d='M3 542L11 542' stroke='%23CBD5E1' stroke-width='1' opacity='0.3'/%3E%3Cpath d='M8 0L8 22L14 35L8 48L8 70L8 70L8 92L14 105L8 118L8 140L8 140L8 162L14 175L8 188L8 210L8 210L8 232L14 245L8 258L8 280L8 280L8 302L14 315L8 328L8 350L8 350L8 372L14 385L8 398L8 420L8 420L8 442L14 455L8 468L8 490L8 490L8 512L14 525L8 538L8 560' stroke='%23CBD5E1' stroke-width='1.2' opacity='0.5'/%3E%3Cpath d='M21 0L21 24L28 33L21 42L21 54L15 58L48 66L11 74L21 79L21 94L32 107L21 119L21 140L21 140L21 164L28 173L21 182L21 194L15 198L48 206L11 214L21 219L21 234L32 247L21 259L21 280L21 280L21 304L28 313L21 322L21 334L15 338L48 346L11 354L21 359L21 374L32 387L21 399L21 420L21 420L21 444L28 453L21 462L21 474L15 478L48 486L11 494L21 499L21 514L32 527L21 539L21 560' stroke='%23E9348A' stroke-width='2' opacity='0.9'/%3E%3Ccircle cx='48' cy='66' r='2.6' fill='%234CD5AA' opacity='0.9'/%3E%3Ccircle cx='48' cy='206' r='2.6' fill='%234CD5AA' opacity='0.9'/%3E%3Ccircle cx='48' cy='346' r='2.6' fill='%234CD5AA' opacity='0.9'/%3E%3Ccircle cx='48' cy='486' r='2.6' fill='%234CD5AA' opacity='0.9'/%3E%3C/svg%3E"); animation-duration:64s} /* 5 · antibody and antigen */ .fw-svl-bands > .fw-svl-band:nth-child(8n+5) .fw-svl-band__orb:nth-child(1){background:color-mix(in srgb, var(--pk) 30%, transparent)} .fw-svl-bands > .fw-svl-band:nth-child(8n+5) .fw-svl-band__orb:nth-child(2){background:color-mix(in srgb, var(--bl) 24%, transparent)} .fw-svl-bands > .fw-svl-band:nth-child(8n+5) .fw-svl-band__ring::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 560' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 90L28 60' stroke='%231478C8' stroke-width='2.2' opacity='0.9'/%3E%3Ccircle cx='28' cy='90' r='2.2' fill='%231478C8' opacity='0.6'/%3E%3Cpath d='M28 60L14.5 43' stroke='%231478C8' stroke-width='2' opacity='0.9'/%3E%3Ccircle cx='14.5' cy='43' r='2.8' stroke='%231478C8' stroke-width='1.4' opacity='0.9'/%3E%3Ccircle cx='14.5' cy='36' r='2.9' fill='%234CD5AA' opacity='0.8'/%3E%3Cpath d='M28 60L41.5 43' stroke='%231478C8' stroke-width='2' opacity='0.9'/%3E%3Ccircle cx='41.5' cy='43' r='2.8' stroke='%231478C8' stroke-width='1.4' opacity='0.9'/%3E%3Ccircle cx='41.5' cy='36' r='2.9' fill='%234CD5AA' opacity='0.8'/%3E%3Ccircle cx='28' cy='60' r='2' fill='%231478C8' opacity='0.9'/%3E%3Cpath d='M28 170L28 200' stroke='%23E9348A' stroke-width='2.2' opacity='0.9'/%3E%3Ccircle cx='28' cy='170' r='2.2' fill='%23E9348A' opacity='0.6'/%3E%3Cpath d='M28 200L14.5 217' stroke='%23E9348A' stroke-width='2' opacity='0.9'/%3E%3Ccircle cx='14.5' cy='217' r='2.8' stroke='%23E9348A' stroke-width='1.4' opacity='0.9'/%3E%3Ccircle cx='14.5' cy='224' r='2.9' fill='%234CD5AA' opacity='0.8'/%3E%3Cpath d='M28 200L41.5 217' stroke='%23E9348A' stroke-width='2' opacity='0.9'/%3E%3Ccircle cx='41.5' cy='217' r='2.8' stroke='%23E9348A' stroke-width='1.4' opacity='0.9'/%3E%3Ccircle cx='41.5' cy='224' r='2.9' fill='%234CD5AA' opacity='0.8'/%3E%3Ccircle cx='28' cy='200' r='2' fill='%23E9348A' opacity='0.9'/%3E%3Cpath d='M28 370L28 340' stroke='%231478C8' stroke-width='2.2' opacity='0.9'/%3E%3Ccircle cx='28' cy='370' r='2.2' fill='%231478C8' opacity='0.6'/%3E%3Cpath d='M28 340L14.5 323' stroke='%231478C8' stroke-width='2' opacity='0.9'/%3E%3Ccircle cx='14.5' cy='323' r='2.8' stroke='%231478C8' stroke-width='1.4' opacity='0.9'/%3E%3Ccircle cx='14.5' cy='316' r='2.9' fill='%234CD5AA' opacity='0.8'/%3E%3Cpath d='M28 340L41.5 323' stroke='%231478C8' stroke-width='2' opacity='0.9'/%3E%3Ccircle cx='41.5' cy='323' r='2.8' stroke='%231478C8' stroke-width='1.4' opacity='0.9'/%3E%3Ccircle cx='41.5' cy='316' r='2.9' fill='%234CD5AA' opacity='0.8'/%3E%3Ccircle cx='28' cy='340' r='2' fill='%231478C8' opacity='0.9'/%3E%3Cpath d='M28 450L28 480' stroke='%23E9348A' stroke-width='2.2' opacity='0.9'/%3E%3Ccircle cx='28' cy='450' r='2.2' fill='%23E9348A' opacity='0.6'/%3E%3Cpath d='M28 480L14.5 497' stroke='%23E9348A' stroke-width='2' opacity='0.9'/%3E%3Ccircle cx='14.5' cy='497' r='2.8' stroke='%23E9348A' stroke-width='1.4' opacity='0.9'/%3E%3Ccircle cx='14.5' cy='504' r='2.9' fill='%234CD5AA' opacity='0.8'/%3E%3Cpath d='M28 480L41.5 497' stroke='%23E9348A' stroke-width='2' opacity='0.9'/%3E%3Ccircle cx='41.5' cy='497' r='2.8' stroke='%23E9348A' stroke-width='1.4' opacity='0.9'/%3E%3Ccircle cx='41.5' cy='504' r='2.9' fill='%234CD5AA' opacity='0.8'/%3E%3Ccircle cx='28' cy='480' r='2' fill='%23E9348A' opacity='0.9'/%3E%3C/svg%3E"); animation-duration:44s} /* 6 · molecular chain */ .fw-svl-bands > .fw-svl-band:nth-child(8n+6) .fw-svl-band__orb:nth-child(1){background:color-mix(in srgb, var(--bl) 30%, transparent)} .fw-svl-bands > .fw-svl-band:nth-child(8n+6) .fw-svl-band__orb:nth-child(2){background:color-mix(in srgb, var(--mt) 24%, transparent)} .fw-svl-bands > .fw-svl-band:nth-child(8n+6) .fw-svl-band__ring::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 560' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M38.8 32.2L28 38.5L17.2 32.3L17.2 19.8L28 13.5L38.8 19.8Z' stroke='%231478C8' stroke-width='1.5' opacity='0.9'/%3E%3Cpath d='M35.8 30.5L28 35' stroke='%231478C8' stroke-width='1.3' opacity='0.7'/%3E%3Cpath d='M20.2 30.5L20.2 21.5' stroke='%231478C8' stroke-width='1.3' opacity='0.7'/%3E%3Cpath d='M28 17L35.8 21.5' stroke='%231478C8' stroke-width='1.3' opacity='0.7'/%3E%3Cpath d='M28 38.5L17 68L39 96L28 139.5' stroke='%231478C8' stroke-width='1.5' opacity='0.7'/%3E%3Ccircle cx='17' cy='68' r='3' fill='%234CD5AA' opacity='0.9'/%3E%3Ccircle cx='17' cy='68' r='5.2' stroke='%234CD5AA' stroke-width='0.9' opacity='0.3'/%3E%3Ccircle cx='39' cy='96' r='3' fill='%234CD5AA' opacity='0.9'/%3E%3Ccircle cx='39' cy='96' r='5.2' stroke='%234CD5AA' stroke-width='0.9' opacity='0.3'/%3E%3Cpath d='M38.8 172.2L28 178.5L17.2 172.2L17.2 159.8L28 153.5L38.8 159.8Z' stroke='%231478C8' stroke-width='1.5' opacity='0.9'/%3E%3Cpath d='M35.8 170.5L28 175' stroke='%231478C8' stroke-width='1.3' opacity='0.7'/%3E%3Cpath d='M20.2 170.5L20.2 161.5' stroke='%231478C8' stroke-width='1.3' opacity='0.7'/%3E%3Cpath d='M28 157L35.8 161.5' stroke='%231478C8' stroke-width='1.3' opacity='0.7'/%3E%3Cpath d='M28 178.5L17 208L39 236L28 279.5' stroke='%231478C8' stroke-width='1.5' opacity='0.7'/%3E%3Ccircle cx='17' cy='208' r='3' fill='%23E9348A' opacity='0.9'/%3E%3Ccircle cx='17' cy='208' r='5.2' stroke='%23E9348A' stroke-width='0.9' opacity='0.3'/%3E%3Ccircle cx='39' cy='236' r='3' fill='%23E9348A' opacity='0.9'/%3E%3Ccircle cx='39' cy='236' r='5.2' stroke='%23E9348A' stroke-width='0.9' opacity='0.3'/%3E%3Cpath d='M38.8 312.2L28 318.5L17.2 312.2L17.2 299.8L28 293.5L38.8 299.8Z' stroke='%231478C8' stroke-width='1.5' opacity='0.9'/%3E%3Cpath d='M35.8 310.5L28 315' stroke='%231478C8' stroke-width='1.3' opacity='0.7'/%3E%3Cpath d='M20.2 310.5L20.2 301.5' stroke='%231478C8' stroke-width='1.3' opacity='0.7'/%3E%3Cpath d='M28 297L35.8 301.5' stroke='%231478C8' stroke-width='1.3' opacity='0.7'/%3E%3Cpath d='M28 318.5L17 348L39 376L28 419.5' stroke='%231478C8' stroke-width='1.5' opacity='0.7'/%3E%3Ccircle cx='17' cy='348' r='3' fill='%234CD5AA' opacity='0.9'/%3E%3Ccircle cx='17' cy='348' r='5.2' stroke='%234CD5AA' stroke-width='0.9' opacity='0.3'/%3E%3Ccircle cx='39' cy='376' r='3' fill='%234CD5AA' opacity='0.9'/%3E%3Ccircle cx='39' cy='376' r='5.2' stroke='%234CD5AA' stroke-width='0.9' opacity='0.3'/%3E%3Cpath d='M38.8 452.2L28 458.5L17.2 452.2L17.2 439.8L28 433.5L38.8 439.8Z' stroke='%231478C8' stroke-width='1.5' opacity='0.9'/%3E%3Cpath d='M35.8 450.5L28 455' stroke='%231478C8' stroke-width='1.3' opacity='0.7'/%3E%3Cpath d='M20.2 450.5L20.2 441.5' stroke='%231478C8' stroke-width='1.3' opacity='0.7'/%3E%3Cpath d='M28 437L35.8 441.5' stroke='%231478C8' stroke-width='1.3' opacity='0.7'/%3E%3Cpath d='M28 458.5L17 488L39 516L28 559.5' stroke='%231478C8' stroke-width='1.5' opacity='0.7'/%3E%3Ccircle cx='17' cy='488' r='3' fill='%23E9348A' opacity='0.9'/%3E%3Ccircle cx='17' cy='488' r='5.2' stroke='%23E9348A' stroke-width='0.9' opacity='0.3'/%3E%3Ccircle cx='39' cy='516' r='3' fill='%23E9348A' opacity='0.9'/%3E%3Ccircle cx='39' cy='516' r='5.2' stroke='%23E9348A' stroke-width='0.9' opacity='0.3'/%3E%3C/svg%3E"); animation-duration:60s} /* 7 · skin in cross-section */ .fw-svl-bands > .fw-svl-band:nth-child(8n+7) .fw-svl-band__orb:nth-child(1){background:color-mix(in srgb, var(--go-2) 30%, transparent)} .fw-svl-bands > .fw-svl-band:nth-child(8n+7) .fw-svl-band__orb:nth-child(2){background:color-mix(in srgb, var(--pk) 24%, transparent)} .fw-svl-bands > .fw-svl-band:nth-child(8n+7) .fw-svl-band__ring::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 560' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 9C13 4 25 14 36 9C45 5 50 12 56 8' stroke='%23E9348A' stroke-width='2' opacity='0.9'/%3E%3Cpath d='M2 29C14 24 26 34 38 29C46 25 50 32 54 30' stroke='%23E8A33D' stroke-width='5' opacity='0.75' stroke-dasharray='0.1 8'/%3E%3Cpath d='M0 42C7 34 12 50 19 42C26 34 31 50 38 42C45 34 50 50 56 42' stroke='%23E8A33D' stroke-width='1.6' opacity='0.9'/%3E%3Cpath d='M4 62C11.2 57 20.8 67 28 62' stroke='%23CBD5E1' stroke-width='1.4' opacity='0.6'/%3E%3Cpath d='M26 78C33.8 83 44.2 73 52 78' stroke='%23CBD5E1' stroke-width='1.4' opacity='0.6'/%3E%3Cpath d='M6 96C13.8 101 24.2 91 32 96' stroke='%23CBD5E1' stroke-width='1.4' opacity='0.6'/%3E%3Cpath d='M28 114C35.2 109 44.8 119 52 114' stroke='%23CBD5E1' stroke-width='1.4' opacity='0.6'/%3E%3Cpath d='M8 130C15.2 125 24.8 135 32 130' stroke='%23CBD5E1' stroke-width='1.4' opacity='0.6'/%3E%3Ccircle cx='20' cy='74' r='4.6' stroke='%234CD5AA' stroke-width='1.4' opacity='0.8'/%3E%3Ccircle cx='20' cy='74' r='1.7' fill='%234CD5AA' opacity='0.8'/%3E%3Ccircle cx='42' cy='106' r='3.6' stroke='%23E9348A' stroke-width='1.3' opacity='0.6'/%3E%3Cpath d='M0 149C13 144 25 154 36 149C45 145 50 152 56 148' stroke='%23E9348A' stroke-width='2' opacity='0.9'/%3E%3Cpath d='M2 169C14 164 26 174 38 169C46 165 50 172 54 170' stroke='%23E8A33D' stroke-width='5' opacity='0.75' stroke-dasharray='0.1 8'/%3E%3Cpath d='M0 182C7 174 12 190 19 182C26 174 31 190 38 182C45 174 50 190 56 182' stroke='%23E8A33D' stroke-width='1.6' opacity='0.9'/%3E%3Cpath d='M4 202C11.2 197 20.8 207 28 202' stroke='%23CBD5E1' stroke-width='1.4' opacity='0.6'/%3E%3Cpath d='M26 218C33.8 223 44.2 213 52 218' stroke='%23CBD5E1' stroke-width='1.4' opacity='0.6'/%3E%3Cpath d='M6 236C13.8 241 24.2 231 32 236' stroke='%23CBD5E1' stroke-width='1.4' opacity='0.6'/%3E%3Cpath d='M28 254C35.2 249 44.8 259 52 254' stroke='%23CBD5E1' stroke-width='1.4' opacity='0.6'/%3E%3Cpath d='M8 270C15.2 265 24.8 275 32 270' stroke='%23CBD5E1' stroke-width='1.4' opacity='0.6'/%3E%3Ccircle cx='20' cy='214' r='4.6' stroke='%234CD5AA' stroke-width='1.4' opacity='0.8'/%3E%3Ccircle cx='20' cy='214' r='1.7' fill='%234CD5AA' opacity='0.8'/%3E%3Ccircle cx='42' cy='246' r='3.6' stroke='%23E9348A' stroke-width='1.3' opacity='0.6'/%3E%3Cpath d='M0 289C13 284 25 294 36 289C45 285 50 292 56 288' stroke='%23E9348A' stroke-width='2' opacity='0.9'/%3E%3Cpath d='M2 309C14 304 26 314 38 309C46 305 50 312 54 310' stroke='%23E8A33D' stroke-width='5' opacity='0.75' stroke-dasharray='0.1 8'/%3E%3Cpath d='M0 322C7 314 12 330 19 322C26 314 31 330 38 322C45 314 50 330 56 322' stroke='%23E8A33D' stroke-width='1.6' opacity='0.9'/%3E%3Cpath d='M4 342C11.2 337 20.8 347 28 342' stroke='%23CBD5E1' stroke-width='1.4' opacity='0.6'/%3E%3Cpath d='M26 358C33.8 363 44.2 353 52 358' stroke='%23CBD5E1' stroke-width='1.4' opacity='0.6'/%3E%3Cpath d='M6 376C13.8 381 24.2 371 32 376' stroke='%23CBD5E1' stroke-width='1.4' opacity='0.6'/%3E%3Cpath d='M28 394C35.2 389 44.8 399 52 394' stroke='%23CBD5E1' stroke-width='1.4' opacity='0.6'/%3E%3Cpath d='M8 410C15.2 405 24.8 415 32 410' stroke='%23CBD5E1' stroke-width='1.4' opacity='0.6'/%3E%3Ccircle cx='20' cy='354' r='4.6' stroke='%234CD5AA' stroke-width='1.4' opacity='0.8'/%3E%3Ccircle cx='20' cy='354' r='1.7' fill='%234CD5AA' opacity='0.8'/%3E%3Ccircle cx='42' cy='386' r='3.6' stroke='%23E9348A' stroke-width='1.3' opacity='0.6'/%3E%3Cpath d='M0 429C13 424 25 434 36 429C45 425 50 432 56 428' stroke='%23E9348A' stroke-width='2' opacity='0.9'/%3E%3Cpath d='M2 449C14 444 26 454 38 449C46 445 50 452 54 450' stroke='%23E8A33D' stroke-width='5' opacity='0.75' stroke-dasharray='0.1 8'/%3E%3Cpath d='M0 462C7 454 12 470 19 462C26 454 31 470 38 462C45 454 50 470 56 462' stroke='%23E8A33D' stroke-width='1.6' opacity='0.9'/%3E%3Cpath d='M4 482C11.2 477 20.8 487 28 482' stroke='%23CBD5E1' stroke-width='1.4' opacity='0.6'/%3E%3Cpath d='M26 498C33.8 503 44.2 493 52 498' stroke='%23CBD5E1' stroke-width='1.4' opacity='0.6'/%3E%3Cpath d='M6 516C13.8 521 24.2 511 32 516' stroke='%23CBD5E1' stroke-width='1.4' opacity='0.6'/%3E%3Cpath d='M28 534C35.2 529 44.8 539 52 534' stroke='%23CBD5E1' stroke-width='1.4' opacity='0.6'/%3E%3Cpath d='M8 550C15.2 545 24.8 555 32 550' stroke='%23CBD5E1' stroke-width='1.4' opacity='0.6'/%3E%3Ccircle cx='20' cy='494' r='4.6' stroke='%234CD5AA' stroke-width='1.4' opacity='0.8'/%3E%3Ccircle cx='20' cy='494' r='1.7' fill='%234CD5AA' opacity='0.8'/%3E%3Ccircle cx='42' cy='526' r='3.6' stroke='%23E9348A' stroke-width='1.3' opacity='0.6'/%3E%3C/svg%3E"); animation-duration:52s} /* 8 · drop and ripple */ .fw-svl-bands > .fw-svl-band:nth-child(8n+8) .fw-svl-band__orb:nth-child(1){background:color-mix(in srgb, var(--pu) 30%, transparent)} .fw-svl-bands > .fw-svl-band:nth-child(8n+8) .fw-svl-band__orb:nth-child(2){background:color-mix(in srgb, var(--pk) 24%, transparent)} .fw-svl-bands > .fw-svl-band:nth-child(8n+8) .fw-svl-band__ring::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 560' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 6C32.3 13.4 35.4 17.7 35.4 22.3A7.4 7.4 0 1 1 20.6 22.3C20.6 17.7 23.7 13.4 28 6Z' fill='%238B5CF6' opacity='0.9'/%3E%3Ccircle cx='25.5' cy='20.1' r='2' fill='%23FFFFFF' opacity='0.5'/%3E%3Ccircle cx='28' cy='38.6' r='1.5' fill='%238B5CF6' opacity='0.6'/%3E%3Cellipse cx='28' cy='50' rx='7' ry='2.8' stroke='%238B5CF6' stroke-width='1.7' opacity='0.9'/%3E%3Cellipse cx='28' cy='50' rx='14' ry='5.6' stroke='%23CBD5E1' stroke-width='1.3' opacity='0.5'/%3E%3Cellipse cx='28' cy='50' rx='22' ry='8.8' stroke='%23CBD5E1' stroke-width='1.1' opacity='0.3'/%3E%3Ccircle cx='28' cy='50' r='2.2' fill='%234CD5AA' opacity='0.9'/%3E%3Cpath d='M28 76C31.6 82.2 34.2 85.8 34.2 89.7A6.2 6.2 0 1 1 21.8 89.7C21.8 85.8 24.4 82.2 28 76Z' fill='%23E9348A' opacity='0.9'/%3E%3Ccircle cx='25.9' cy='87.8' r='1.7' fill='%23FFFFFF' opacity='0.5'/%3E%3Ccircle cx='28' cy='103.4' r='1.3' fill='%23E9348A' opacity='0.6'/%3E%3Cellipse cx='28' cy='120' rx='5.9' ry='2.4' stroke='%23E9348A' stroke-width='1.7' opacity='0.9'/%3E%3Cellipse cx='28' cy='120' rx='11.8' ry='4.7' stroke='%23CBD5E1' stroke-width='1.3' opacity='0.5'/%3E%3Cellipse cx='28' cy='120' rx='18.5' ry='7.4' stroke='%23CBD5E1' stroke-width='1.1' opacity='0.3'/%3E%3Ccircle cx='28' cy='120' r='1.8' fill='%234CD5AA' opacity='0.9'/%3E%3Cpath d='M28 146C32.3 153.4 35.4 157.7 35.4 162.3A7.4 7.4 0 1 1 20.6 162.3C20.6 157.7 23.7 153.4 28 146Z' fill='%238B5CF6' opacity='0.9'/%3E%3Ccircle cx='25.5' cy='160.1' r='2' fill='%23FFFFFF' opacity='0.5'/%3E%3Ccircle cx='28' cy='178.6' r='1.5' fill='%238B5CF6' opacity='0.6'/%3E%3Cellipse cx='28' cy='190' rx='7' ry='2.8' stroke='%238B5CF6' stroke-width='1.7' opacity='0.9'/%3E%3Cellipse cx='28' cy='190' rx='14' ry='5.6' stroke='%23CBD5E1' stroke-width='1.3' opacity='0.5'/%3E%3Cellipse cx='28' cy='190' rx='22' ry='8.8' stroke='%23CBD5E1' stroke-width='1.1' opacity='0.3'/%3E%3Ccircle cx='28' cy='190' r='2.2' fill='%234CD5AA' opacity='0.9'/%3E%3Cpath d='M28 216C31.6 222.2 34.2 225.8 34.2 229.7A6.2 6.2 0 1 1 21.8 229.7C21.8 225.8 24.4 222.2 28 216Z' fill='%23E9348A' opacity='0.9'/%3E%3Ccircle cx='25.9' cy='227.8' r='1.7' fill='%23FFFFFF' opacity='0.5'/%3E%3Ccircle cx='28' cy='243.4' r='1.3' fill='%23E9348A' opacity='0.6'/%3E%3Cellipse cx='28' cy='260' rx='5.9' ry='2.4' stroke='%23E9348A' stroke-width='1.7' opacity='0.9'/%3E%3Cellipse cx='28' cy='260' rx='11.8' ry='4.7' stroke='%23CBD5E1' stroke-width='1.3' opacity='0.5'/%3E%3Cellipse cx='28' cy='260' rx='18.5' ry='7.4' stroke='%23CBD5E1' stroke-width='1.1' opacity='0.3'/%3E%3Ccircle cx='28' cy='260' r='1.8' fill='%234CD5AA' opacity='0.9'/%3E%3Cpath d='M28 286C32.3 293.4 35.4 297.7 35.4 302.3A7.4 7.4 0 1 1 20.6 302.3C20.6 297.7 23.7 293.4 28 286Z' fill='%238B5CF6' opacity='0.9'/%3E%3Ccircle cx='25.5' cy='300.1' r='2' fill='%23FFFFFF' opacity='0.5'/%3E%3Ccircle cx='28' cy='318.6' r='1.5' fill='%238B5CF6' opacity='0.6'/%3E%3Cellipse cx='28' cy='330' rx='7' ry='2.8' stroke='%238B5CF6' stroke-width='1.7' opacity='0.9'/%3E%3Cellipse cx='28' cy='330' rx='14' ry='5.6' stroke='%23CBD5E1' stroke-width='1.3' opacity='0.5'/%3E%3Cellipse cx='28' cy='330' rx='22' ry='8.8' stroke='%23CBD5E1' stroke-width='1.1' opacity='0.3'/%3E%3Ccircle cx='28' cy='330' r='2.2' fill='%234CD5AA' opacity='0.9'/%3E%3Cpath d='M28 356C31.6 362.2 34.2 365.8 34.2 369.7A6.2 6.2 0 1 1 21.8 369.7C21.8 365.8 24.4 362.2 28 356Z' fill='%23E9348A' opacity='0.9'/%3E%3Ccircle cx='25.9' cy='367.8' r='1.7' fill='%23FFFFFF' opacity='0.5'/%3E%3Ccircle cx='28' cy='383.4' r='1.3' fill='%23E9348A' opacity='0.6'/%3E%3Cellipse cx='28' cy='400' rx='5.9' ry='2.4' stroke='%23E9348A' stroke-width='1.7' opacity='0.9'/%3E%3Cellipse cx='28' cy='400' rx='11.8' ry='4.7' stroke='%23CBD5E1' stroke-width='1.3' opacity='0.5'/%3E%3Cellipse cx='28' cy='400' rx='18.5' ry='7.4' stroke='%23CBD5E1' stroke-width='1.1' opacity='0.3'/%3E%3Ccircle cx='28' cy='400' r='1.8' fill='%234CD5AA' opacity='0.9'/%3E%3Cpath d='M28 426C32.3 433.4 35.4 437.7 35.4 442.3A7.4 7.4 0 1 1 20.6 442.3C20.6 437.7 23.7 433.4 28 426Z' fill='%238B5CF6' opacity='0.9'/%3E%3Ccircle cx='25.5' cy='440.1' r='2' fill='%23FFFFFF' opacity='0.5'/%3E%3Ccircle cx='28' cy='458.6' r='1.5' fill='%238B5CF6' opacity='0.6'/%3E%3Cellipse cx='28' cy='470' rx='7' ry='2.8' stroke='%238B5CF6' stroke-width='1.7' opacity='0.9'/%3E%3Cellipse cx='28' cy='470' rx='14' ry='5.6' stroke='%23CBD5E1' stroke-width='1.3' opacity='0.5'/%3E%3Cellipse cx='28' cy='470' rx='22' ry='8.8' stroke='%23CBD5E1' stroke-width='1.1' opacity='0.3'/%3E%3Ccircle cx='28' cy='470' r='2.2' fill='%234CD5AA' opacity='0.9'/%3E%3Cpath d='M28 496C31.6 502.2 34.2 505.8 34.2 509.7A6.2 6.2 0 1 1 21.8 509.7C21.8 505.8 24.4 502.2 28 496Z' fill='%23E9348A' opacity='0.9'/%3E%3Ccircle cx='25.9' cy='507.8' r='1.7' fill='%23FFFFFF' opacity='0.5'/%3E%3Ccircle cx='28' cy='523.4' r='1.3' fill='%23E9348A' opacity='0.6'/%3E%3Cellipse cx='28' cy='540' rx='5.9' ry='2.4' stroke='%23E9348A' stroke-width='1.7' opacity='0.9'/%3E%3Cellipse cx='28' cy='540' rx='11.8' ry='4.7' stroke='%23CBD5E1' stroke-width='1.3' opacity='0.5'/%3E%3Cellipse cx='28' cy='540' rx='18.5' ry='7.4' stroke='%23CBD5E1' stroke-width='1.1' opacity='0.3'/%3E%3Ccircle cx='28' cy='540' r='1.8' fill='%234CD5AA' opacity='0.9'/%3E%3C/svg%3E"); animation-duration:46s} @media(prefers-reduced-motion:reduce){ .fw-svl-band__ring::before{animation:none!important} } /* ── The watermark ── The care area's own uploaded icon, as a MASK rather than an image. The file supplies the silhouette; the background supplies the colour. So a multicoloured raster becomes one quiet brand tint, and it still will when a different icon set is uploaded — where an at 6% opacity would be a grey smudge today and a grey smudge forever. */ .fw-svl-band__wm{ position:absolute;z-index:0;pointer-events:none; /* The care area's own icon, and the one ambient mark meant to be READ. Same side as the spine, clear of it: the right offset is the gutter the spine occupies plus a gap, so the two never touch however wide --pad gets. Anything smaller and the mark would run under the figure. */ right:calc(var(--pad) + 22px);top:50%; width:clamp(190px, 22vw, 350px);height:auto;aspect-ratio:1;object-fit:contain; transform:translateY(-50%) rotate(-6deg); /* The ICON ITSELF, faint — not a silhouette of it. Masking was the wrong tool here: measured, these files are ~80% opaque (full-bleed illustrations, not sparse glyphs), so their alpha channel is very nearly a filled square and every band got the same blob. Drawn as a picture at low opacity the actual artwork shows through, which is what a watermark is. The radial mask only softens the edges. */ background-image:var(--wm); background-size:contain; background-repeat:no-repeat; background-position:center; opacity:.17; -webkit-mask-image:radial-gradient(closest-side, var(--bk) 66%, color-mix(in srgb, var(--bk) 55%, transparent) 86%, transparent 100%); mask-image:radial-gradient(closest-side, var(--bk) 66%, color-mix(in srgb, var(--bk) 55%, transparent) 86%, transparent 100%) } /* ── The head ── The folio is a display figure, not a label: set large, outlined in brand colour and sitting on the title's own baseline the way a chapter opener numbers itself. It is aria-hidden — "01" read aloud before the heading tells a screen reader nothing the heading does not. */ .fw-svl-band__head{ position:relative;z-index:1; display:grid;grid-template-columns:minmax(0, 5.5fr) minmax(0, 4.5fr); gap:clamp(18px, 2.6vw, 56px);align-items:end; padding-bottom:clamp(18px, 2.2vw, 28px); margin-bottom:clamp(20px, 2.6vw, 36px) } /* The rule under the head fades out, so the head separates from the catalogue without drawing a hard line across the band. */ .fw-svl-band__head::after{ content:'';position:absolute;left:0;right:0;bottom:0;height:1px; background:linear-gradient(90deg, var(--line), var(--line) 62%, transparent) } .fw-svl-band__id{display:flex;align-items:flex-end;gap:clamp(14px, 1.6vw, 26px);min-width:0} .fw-svl-band__no{ flex-shrink:0;line-height:.78; font-size:clamp(46px, 4.4vw + 8px, 86px);font-weight:700; letter-spacing:-.05em;font-variant-numeric:tabular-nums; /* Filled. The outlined version read as a rendering fault rather than a chapter number — hollow figures at this size look like text that has failed to load. Solid brand pink, held back by opacity instead, which keeps it subordinate to the care-area name without looking broken. */ color:var(--pk); opacity:.3; transition:opacity .4s var(--ease) } .fw-svl-band:hover .fw-svl-band__no{opacity:.6} .fw-svl-band__name{min-width:0;padding-bottom:3px} .fw-svl-band__title{ margin:3px 0 0; font-size:clamp(26px, 1.9vw + 10px, 46px); font-weight:600;line-height:1.02;letter-spacing:-.042em;color:var(--bl-d); text-wrap:balance } .fw-svl-band__meta{ display:flex;align-items:center;flex-wrap:wrap;gap:8px; margin-top:9px;font-size:12px;color:var(--g5) } .fw-svl-band__meta b{font-weight:600;color:var(--pk-d);font-variant-numeric:tabular-nums} .fw-svl-band__meta i{font-style:normal;color:var(--g3)} .fw-svl-band__side{min-width:0;display:flex;flex-direction:column;gap:clamp(12px, 1.6vw, 18px)} .fw-svl-band__lede{margin:0;font-size:14.5px;line-height:1.62;color:var(--g6);text-wrap:pretty} /* The one filled control in the band. Underlined rather than boxed — a button here would make eight buttons down the page. */ .fw-svl-band__open{ align-self:flex-start; display:inline-flex;align-items:center;gap:9px; padding-bottom:5px; font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--bl-d); border-bottom:2px solid color-mix(in srgb, var(--bl) 24%, transparent); transition:color .25s, border-color .25s } .fw-svl-band__open i{font-size:11px;transition:transform .3s var(--ease)} .fw-svl-band__open:hover{color:var(--pk-d);border-bottom-color:var(--pk)} .fw-svl-band__open:hover i{transform:translateX(4px)} /* ── The catalogue ── Three columns of treatments, each with its services beneath. The column rule is a fading hairline drawn by the item, so an incomplete last row never leaves a rule hanging over nothing. */ .fw-svl-tx{ position:relative;z-index:1; display:grid;grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:clamp(20px, 3vw, 58px);row-gap:clamp(20px, 2.4vw, 34px); margin:0;padding:0;list-style:none } .fw-svl-tx > li{position:relative;min-width:0;padding-left:clamp(16px, 1.8vw, 30px)} .fw-svl-tx > li:nth-child(3n+1){padding-left:0} .fw-svl-tx > li:not(:nth-child(3n+1))::before{ content:'';position:absolute;left:0;top:4px;bottom:4px;width:1px; background:linear-gradient(180deg, transparent, var(--line) 18%, var(--line) 82%, transparent) } /* The treatment. Its icon is small and beside the name — a mark, not a picture; the name is what is being read. */ .fw-svl-tx__h{display:flex;align-items:flex-start;gap:11px;min-width:0} .fw-svl-tx__ico{ width:28px;height:28px;flex-shrink:0;margin-top:1px;object-fit:contain; /* Full colour. These were greyscaled at 55% so eight bands of raster marks would not shout — but the page then had no colour in it at all, which is the complaint. They carry their own colour now and the restraint comes from their size instead. */ transition:transform .3s var(--ease) } .fw-svl-tx__h:hover .fw-svl-tx__ico{transform:scale(1.1) rotate(-4deg)} .fw-svl-tx__h > span{display:flex;flex-direction:column;gap:1px;min-width:0} .fw-svl-tx__h b{ font-size:clamp(14.5px, 1vw, 17px);font-weight:600; letter-spacing:-.024em;line-height:1.25;color:var(--ink); transition:color .25s } .fw-svl-tx__h small{font-size:11.5px;line-height:1.4;color:var(--g5)} .fw-svl-tx__h:hover b{color:var(--bl-d)} /* The services under it. Indented to the icon's gutter so the whole block hangs off one edge, and hairlined so it reads as a sub-list rather than more treatments. */ .fw-svl-tx__s{ margin:9px 0 0 39px;padding:0;list-style:none; border-left:1px solid color-mix(in srgb, var(--bl) 16%, transparent) } .fw-svl-tx__s li{position:relative} .fw-svl-tx__s a, .fw-svl-tx__s li > span{ display:block;padding:4px 0 4px 13px; font-size:12.5px;line-height:1.4;color:var(--g7); transition:color .22s, transform .28s var(--ease) } /* A tick on the rule rather than a bullet in the text — the rule is already the list marker, so the dot only has to say which line you are on. */ .fw-svl-tx__s a::before, .fw-svl-tx__s li > span::before{ content:'';position:absolute;left:-1px;top:50%; width:7px;height:1px;background:var(--bl);opacity:.5; transform:translateY(-50%); transition:background .22s, width .28s var(--ease) } .fw-svl-tx__s a:hover{color:var(--pk-d);transform:translateX(3px)} .fw-svl-tx__s a:hover::before{background:var(--pk);opacity:1;width:11px} /* ══════════════════════════════════════════════════════════════ 04 · §4 CLOSING BAND ══════════════════════════════════════════════════════════════ */ .fw-svl-close{ position:relative;overflow:hidden; padding:clamp(40px, 5vw, 86px) 0; background:linear-gradient(140deg, var(--dk-d), var(--dk-b) 46%, var(--dk-p)) } .fw-svl-close__aura{ position:absolute;top:-32%;right:-8%;width:min(56vw, 620px);aspect-ratio:1; border-radius:50%;pointer-events:none; background:radial-gradient(circle, var(--ua-ac-edge), transparent 66%); animation:fwBreath 9s ease-in-out infinite } @keyframes fwBreath{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.1);opacity:1}} .fw-svl-close__inner{ display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 5fr); gap:clamp(22px, 3vw, 60px);align-items:end } .fw-svl-close__title{ margin:var(--s3) 0 0; font-size:clamp(26px, 1.7vw + 12px, 46px); font-weight:600;line-height:1.06;letter-spacing:-.04em;color:var(--wh); text-wrap:balance } .fw-svl-close__sub{ margin:0; font-size:clamp(14.5px, 1.15vw, 17px);font-weight:300; line-height:1.62;letter-spacing:-.008em;color:color-mix(in srgb, var(--wh) 68%, transparent); text-wrap:pretty } .fw-svl-close__btns{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:clamp(20px, 2.4vw, 30px)} /* ══════════════════════════════════════════════════════════════ 05 · RESPONSIVE — mode switches only ══════════════════════════════════════════════════════════════ */ @media(max-width:1180px){ /* The band head stops being two columns before the lede gets narrow enough to break every line. */ .fw-svl-band__head{grid-template-columns:minmax(0,1fr);gap:var(--s4);align-items:start} .fw-svl-band__side{padding-bottom:0} /* Two columns of treatments. Three leaves each about 210px, which breaks most treatment names onto two lines and pushes the service list into a column narrower than its own indent. */ .fw-svl-tx{grid-template-columns:repeat(2, minmax(0,1fr))} .fw-svl-tx > li{padding-left:clamp(16px, 1.8vw, 30px)} .fw-svl-tx > li:nth-child(3n+1){padding-left:clamp(16px, 1.8vw, 30px)} .fw-svl-tx > li:nth-child(2n+1){padding-left:0} /* The rule follows the column count, so it is re-keyed to 2n here — a 3n rule left in place would draw a divider mid-column. */ .fw-svl-tx > li:not(:nth-child(3n+1))::before{display:none} .fw-svl-tx > li:not(:nth-child(2n+1))::before{ content:'';display:block;position:absolute;left:0;top:4px;bottom:4px;width:1px; background:linear-gradient(180deg, transparent, var(--line) 18%, var(--line) 82%, transparent) } /* Four across leaves each card about 210px here, which breaks most treatment names onto three lines. */ } @media(max-width:1024px){ /* The house gutter on mobile — the same 14px the header drops to. */ .fw-svl-page{--pad:14px} /* The cap is released here. Two thirds of a phone screen is about 500px, which cannot hold a headline at this size plus its reading matter AND the reel — capping it would clip, and clipping is worse than scrolling. The reel goes below the copy, and gets shorter. */ .fw-svl-mast{max-height:none;min-height:0;padding-block:clamp(20px, 5vw, 34px)} .fw-svl-mast__grid{grid-template-columns:minmax(0,1fr);gap:clamp(20px, 4vw, 30px)} /* The helix lives in the gutter between two columns. Stacked there is no gutter, and it becomes a 200px-tall strip of nothing between the CTA and the picture. */ .fw-svl-helix{display:none} .fw-svl-mast__top{flex-direction:row;align-items:center} /* The desktop min-height must go with the ratio: 43vh of a phone (about 363px) at 16/10 asked for a 581px-wide reel, which pushed the whole page past the screen (13 Oct 2026). Width leads here. */ .fw-svl-reel{aspect-ratio:16/10;height:auto;min-height:0} /* The smallest orb costs a compositor layer for something nobody can see at this size. */ .fw-svl-orb--m{display:none} .fw-svl-orb{filter:blur(52px)} .fw-svl-close__inner{grid-template-columns:minmax(0,1fr);row-gap:var(--s6)} } @media(max-width:768px){ /* The kicker says "the full catalogue" and so does the headline. At this width it crowds the breadcrumb against the gutter for no gain. */ .fw-svl-kick{display:none} .fw-svl-mast__top{justify-content:flex-start} /* Two up, turned on their side. A stacked plate over a title makes every treatment a third of a screen, and nine of those per band is a scroll nobody finishes. */ /* One column, ruled between treatments rather than beside them. Three columns at 390px gave each name about 100px — every treatment wrapped to two lines and the service list ran off the gutter. */ /* The ring sits behind the head rather than across the catalogue: at this width its 150px crosses the head rule and reads as a stray circle drawn over the content instead of ambient depth behind it. */ /* The gutter is 14px here — too thin to draw in, so the spine goes. */ .fw-svl-band__ring{display:none} .fw-svl-band__wm{right:-12%;width:clamp(170px, 42vw, 240px);opacity:.14} .fw-svl-band__orb{filter:blur(60px)} .fw-svl-tx{grid-template-columns:minmax(0,1fr);row-gap:0} .fw-svl-tx > li, .fw-svl-tx > li:nth-child(3n+1), .fw-svl-tx > li:nth-child(2n+1){padding:15px 0} .fw-svl-tx > li::before, .fw-svl-tx > li:not(:nth-child(2n+1))::before, .fw-svl-tx > li:not(:nth-child(3n+1))::before{display:none} .fw-svl-tx > li + li{border-top:1px solid var(--line-soft)} .fw-svl-band__wm{width:clamp(150px, 42vw, 240px);opacity:.11} .fw-svl-close__btns .fw-svl-btn{flex:1 1 100%} } @media(max-width:480px){ .fw-svl-counts{--cnt-gap:16px} .fw-svl-counts li + li::before{display:none} } /* ══════════════════════════════════════════════════════════════ TOUCH · MOTION · FOCUS ══════════════════════════════════════════════════════════════ */ /* A :hover transform latches after a tap on a touch screen. Strip the movement; the colour changes still read as feedback. */ @media(hover:none){ .fw-svl-btn:hover{transform:none} .fw-svl-tx__s a:hover{transform:none} .fw-svl-tx__h:hover .fw-svl-tx__ico{transform:none} } @media(prefers-reduced-motion:reduce){ .fw-svl-page *, .fw-svl-page *::before, .fw-svl-page *::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important } /* The active slide remains visible while services.js pauses rotation. */ .fw-svl-tx__ico{opacity:1} /* The artwork stays; it was the motion that was the problem. */ .fw-svl-orb, .fw-svl-close__aura{animation:none} } /* ANCHOR OFFSET custom/js/core.js scrolls in-page links with scrollIntoView, which honours scroll-margin-top — so this is the single place that records how far the sticky chrome and the jump rail reach together, and no JS anywhere repeats the number. */ .fw-svl [id]{scroll-margin-top:calc(var(--article-top) + 96px)} .fw-svl-page a:focus-visible, .fw-svl-page button:focus-visible{ outline:2px solid var(--bl); outline-offset:3px; border-radius:8px }