/* shared Detox/Thermo public service page styles. */ *{box-sizing:border-box} html, body{ -webkit-tap-highlight-color:transparent; } :where( a, button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], .btn ){ -webkit-tap-highlight-color:transparent; tap-highlight-color:transparent; } :where( button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], .btn ){ -webkit-appearance:none; appearance:none; background-clip:padding-box; } @media (hover:none), (pointer:coarse){ :where( a, button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], .btn ):is(:focus, :focus-visible, :active){ outline:none !important; box-shadow:none !important; } } html{scroll-behavior:smooth} body{ margin:0; font-family:var(--anima-font-text, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif); background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{color:inherit} /* One consistent width for everything */ .wrap{max-width:var(--content-max-width);margin:0 auto;padding:0 var(--page-padding-x) 0} .section{padding:56px 0} .hero{padding:var(--anima-service-hero-padding);text-align:var(--anima-service-hero-text-align)} .hero.heroFullscreen{ padding:var(--anima-service-hero-fullscreen-padding); margin-top:var(--anima-service-hero-fullscreen-margin-top); margin-bottom:var(--anima-service-hero-fullscreen-margin-bottom); } .heroMedia{ position:var(--anima-service-hero-media-position); isolation:var(--anima-service-hero-media-isolation); width:var(--anima-service-hero-media-width); margin-left:var(--anima-service-hero-media-margin-inline); margin-right:var(--anima-service-hero-media-margin-inline); min-height:var(--anima-service-hero-media-min-height); overflow:var(--anima-service-hero-media-overflow); background:var(--anima-service-hero-media-bg); } .heroMedia::before, .heroMedia::after{ content:""; position:absolute; inset:var(--anima-service-hero-media-overlay-inset); pointer-events:none; } .heroMedia::before{ z-index:1; background:var(--anima-service-hero-media-overlay-vertical); } .heroMedia::after{ z-index:1; background:var(--anima-service-hero-media-overlay-horizontal); } .heroMedia img{ position:var(--anima-service-hero-media-image-position); inset:var(--anima-service-hero-media-image-inset); z-index:var(--anima-service-hero-media-image-z); width:var(--anima-service-hero-media-image-width); height:var(--anima-service-hero-media-image-height); object-fit:var(--anima-service-hero-media-image-fit); display:var(--anima-service-hero-media-image-display); } .heroOverlay{ position:var(--anima-service-hero-media-overlay-position); z-index:var(--anima-service-hero-media-overlay-z); min-height:var(--anima-service-hero-media-overlay-min-height); width:var(--anima-service-hero-media-overlay-width); max-width:var(--anima-service-hero-media-overlay-max-width); margin:var(--anima-service-hero-media-overlay-margin); padding:var(--anima-service-hero-media-overlay-padding); display:var(--anima-service-hero-media-overlay-display); flex-direction:var(--anima-service-hero-media-overlay-direction); align-items:var(--anima-service-hero-media-overlay-align); justify-content:var(--anima-service-hero-media-overlay-justify); text-align:var(--anima-service-hero-media-overlay-text-align); color:var(--anima-service-hero-media-overlay-color); } .heroHeadline{ width:var(--anima-service-hero-media-headline-width); max-width:var(--anima-service-hero-media-headline-max-width); margin:var(--anima-service-hero-media-headline-margin); text-align:var(--anima-service-hero-media-headline-text-align); color:var(--anima-service-hero-media-headline-color); font-size:clamp(52px, 6vw, 84px); line-height:.98; letter-spacing:-1.2px; font-weight:780; text-shadow:var(--anima-service-hero-media-headline-shadow); } #hero_title, #hero_sub{ display:none; } .storyStack{ display:var(--anima-service-story-stack-display); gap:var(--anima-service-story-stack-gap); width:var(--anima-service-story-stack-width); margin:var(--anima-service-story-stack-margin); position:var(--anima-service-story-stack-position); isolation:var(--anima-service-story-stack-isolation); } .storyPanel{ position:var(--anima-service-story-panel-position); display:var(--anima-service-story-panel-display); grid-template-columns:var(--anima-service-story-panel-columns); min-height:var(--anima-service-story-panel-min-height); overflow:var(--anima-service-story-panel-overflow); border:var(--anima-service-story-panel-border); box-shadow:var(--anima-service-story-panel-shadow); background:var(--anima-service-story-panel-bg); z-index:var(--anima-service-story-panel-z); } .storyPanelCopy{ position:var(--anima-service-story-copy-position); display:var(--anima-service-story-copy-display); flex-direction:var(--anima-service-story-copy-direction); justify-content:var(--anima-service-story-copy-justify); gap:var(--anima-service-story-copy-gap); min-height:var(--anima-service-story-copy-min-height); padding:var(--anima-service-story-copy-padding); background:var(--anima-service-story-copy-bg); font-family:var(--anima-font-text, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif); } .storyPanel--creamIntro{ grid-template-columns:1fr; } .storyPanel--creamIntro .storyPanelCopy{ background:var(--detox-ph-bg-cream); } .storyPanel--creamIntro .storyPanelBody{ max-width:980px; } .storyPanel--creamIntro .storyPanelTitle{ color:var(--detox-ph-text); max-width:12ch; } .storyPanel--creamIntro .storyPanelLead{ color:var(--detox-ph-text-muted); max-width:44rem; } .storyPanel--creamIntro .storyPanelMiniCard h3{ color:var(--detox-ph-text); } .storyPanel--creamIntro .storyPanelMiniCard p, .storyPanel--creamIntro .storyPanelMiniCard--accent p{ color:var(--detox-ph-text-muted); } .storyPanel--centerIntro .storyPanelCopy, .storyPanel--pricingSection .storyPanelCopy{ min-height:auto; justify-content:flex-start; align-items:center; text-align:center; padding-block:clamp(28px, 4vw, 52px); } .storyPanel--centerIntro{ min-height:auto; } .storyPanel--centerIntro .storyPanelBody{ justify-items:center; } .storyPanel--centerIntro .storyPanelTitle{ width:100%; max-width:none; font-size:clamp(38px, 4.6vw, 70px); line-height:1.04; text-align:center; } .storyPanel--centerIntro .storyPanelLead{ max-width:880px; font-size:clamp(18px, 1.7vw, 24px); line-height:1.5; text-align:center; } .storyPanel--heroBridge .storyPanelCopy{ background:var(--detox-ph-bg-taupe); min-height:auto; justify-content:flex-start; padding-block:clamp(24px, 3vw, 42px); } .storyPanel--heroBridge{ min-height:auto; } .storyPanel--heroBridge .storyPanelBody{ justify-items:center; gap:clamp(18px, 2vw, 26px); } .storyPanel--heroBridge .storyPanelTitle, .storyPanel--taupeExplain .storyPanelTitle{ color:var(--detox-ph-white); width:100%; max-width:none; text-align:center; } .storyPanel--heroBridge .storyPanelLead{ color:var(--detox-ph-white); max-width:900px; text-align:center; margin:0 auto; } .storyPanel--heroBridge .storyPanelLead:last-of-type{ color:var(--detox-ph-text-warm); max-width:900px; text-align:center; } .storyPanel--featureGallery{ min-height:auto; grid-template-columns:1fr; } .storyPanel--featureGallery .storyPanelCopy{ background:var(--detox-ph-bg-taupe); min-height:auto; justify-content:flex-start; align-items:center; text-align:left; padding-block:clamp(12px, 2vw, 24px); } .storyPanel--featureGallery .storyPanelBody{ width:min(100%, 1120px); max-width:1120px; justify-items:stretch; } .storyPanel--featureGallery .storyPanelSplit{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:28px; align-items:start; } .storyPanel--featureGallery .storyPanelMiniCard{ gap:var(--anima-service-info-card-feature-gap); } .storyPanel--featureGallery .storyPanelMiniCard img{ width:100%; height:var(--anima-service-info-card-feature-image-height); aspect-ratio:1 / 1; object-fit:cover; display:block; border-radius:var(--anima-service-info-card-feature-image-radius); } .storyPanel--featureGallery .storyPanelMiniCard h3{ font-size:var(--anima-service-info-card-feature-title-size); margin:0; color:var(--detox-ph-white); } .storyPanel--featureGallery .storyPanelMiniCard p{ margin:0; font-size:var(--anima-service-info-card-feature-text-size); line-height:var(--anima-service-info-card-feature-text-line-height); color:var(--detox-ph-white); } .storyPanel--beforeAfterShowcase{ min-height:auto; grid-template-columns:1fr; } .storyPanel--beforeAfterShowcase .storyPanelCopy{ background:var(--detox-ph-bg-cream); min-height:auto; justify-content:flex-start; align-items:center; text-align:center; padding-block:clamp(28px, 4vw, 56px); } .storyPanel--beforeAfterShowcase .storyPanelBody{ justify-items:center; gap:clamp(20px, 2.4vw, 30px); } .storyPanel--beforeAfterShowcase .storyPanelTitle{ width:100%; max-width:none; color:var(--detox-ph-text); text-align:center; margin:0 auto; text-wrap:balance; line-height:var(--detoxLargeHeadingLineHeight); font-size:var(--detoxLargeHeadingSize); font-weight:var(--detoxLargeHeadingWeight); } .storyPanel--beforeAfterShowcase .storyPanelLead, .beforeAfterStandaloneNote{ max-width:var(--anima-service-before-after-content-note-max-width); color:var(--anima-service-before-after-content-note-color); text-align:var(--anima-service-before-after-content-note-align); margin:var(--anima-service-before-after-content-note-margin); font-size:clamp(18px, 1.45vw, 24px); line-height:1.5; } .beforeAfterBand{ width:var(--anima-service-before-after-content-band-width); margin-left:var(--anima-service-before-after-content-band-margin-left); margin-right:var(--anima-service-before-after-content-band-margin-right); padding:var(--anima-service-before-after-content-band-padding); background:var(--anima-service-before-after-content-band-bg); } .beforeAfterTabs{ width:var(--anima-service-before-after-content-tabs-width); display:var(--anima-service-before-after-content-tabs-display); grid-template-columns:var(--anima-service-before-after-content-tabs-columns); justify-items:var(--anima-service-before-after-content-tabs-justify); align-items:var(--anima-service-before-after-content-tabs-align); column-gap:var(--anima-service-before-after-content-tabs-column-gap); gap:var(--anima-service-before-after-content-tabs-gap); margin-top:var(--anima-service-before-after-content-tabs-margin-top); padding:var(--anima-service-before-after-content-tabs-padding); background:var(--anima-service-before-after-content-tabs-bg); } .beforeAfterTabPanel{ width:var(--anima-service-before-after-content-panel-width); max-width:var(--anima-service-before-after-content-panel-max-width); display:var(--anima-service-before-after-content-panel-display); justify-items:var(--anima-service-before-after-content-panel-justify); padding:var(--anima-service-before-after-content-panel-padding); border-radius:var(--anima-service-before-after-content-panel-radius); background:var(--anima-service-before-after-content-panel-bg); color:var(--anima-service-before-after-content-panel-color); box-shadow:var(--anima-service-before-after-content-panel-shadow); } #detox-one-session.beforeAfterTabPanel{ grid-column:1; } #detox-course.beforeAfterTabPanel{ grid-column:2; } .beforeAfterTabPanel[hidden]{ display:none; } .beforeAfterPoints{ margin:var(--anima-service-before-after-content-points-margin); padding:var(--anima-service-before-after-content-points-padding); list-style:var(--anima-service-before-after-content-points-list-style); display:var(--anima-service-before-after-content-points-display); gap:var(--anima-service-before-after-content-points-gap); text-align:var(--anima-service-before-after-content-points-align); width:var(--anima-service-before-after-content-points-width); } .beforeAfterPoints li{ position:var(--anima-service-before-after-content-point-position); padding-left:var(--anima-service-before-after-content-point-padding-left); color:var(--anima-service-before-after-content-point-color); font-size:clamp(18px, 1.45vw, 24px); line-height:1.5; } .beforeAfterPoints li::before{ content:""; position:absolute; left:var(--anima-service-before-after-content-marker-left); top:var(--anima-service-before-after-content-marker-top); width:var(--anima-service-before-after-content-marker-size); height:var(--anima-service-before-after-content-marker-size); border-radius:var(--anima-service-before-after-content-marker-radius); background:var(--anima-service-before-after-content-marker-bg); transform:var(--anima-service-before-after-content-marker-transform); } .storyPanel--contraCentered .storyPanelBody{ gap:clamp(20px, 2.2vw, 28px); } .storyPanel--contraCentered .beforeAfterBand{ width:var(--anima-service-before-after-content-contra-band-width); margin:var(--anima-service-before-after-content-contra-band-margin); padding:var(--anima-service-before-after-content-contra-band-padding); background:var(--anima-service-before-after-content-contra-band-bg); } .storyPanel--contraCentered .beforeAfterTabs{ width:var(--anima-service-before-after-content-contra-tabs-width); max-width:var(--anima-service-before-after-content-contra-tabs-max-width); column-gap:var(--anima-service-before-after-content-contra-tabs-column-gap); gap:var(--anima-service-before-after-content-contra-tabs-gap); } .storyPanel--contraCentered .beforeAfterTabButtons{ border-bottom:none; } .storyPanel--contraCentered .beforeAfterTab{ color:rgba(255,255,255,.7); box-shadow:none; } .storyPanel--contraCentered .beforeAfterTab.is-active{ color:var(--detox-ph-white); box-shadow:none; } .storyPanel--contraCentered .beforeAfterTab.is-active::after{ background:var(--detox-ph-white); opacity:1; } .storyPanel--contraCentered .beforeAfterTabPanel{ color:var(--anima-service-before-after-content-on-dark-color); } #detox-indications.beforeAfterTabPanel{ grid-column:1; } #detox-contraindications.beforeAfterTabPanel{ grid-column:2; } .storyPanel--contraCentered .beforeAfterPoints li{ color:var(--anima-service-before-after-content-on-dark-color); font-size:clamp(18px, 1.45vw, 24px); line-height:1.5; } .storyPanel--contraCentered .beforeAfterPoints li::before{ width:var(--anima-service-before-after-content-contra-marker-size); height:var(--anima-service-before-after-content-contra-marker-size); background:var(--anima-service-before-after-content-contra-marker-bg); } .storyPanel--benefitsGrid{ min-height:auto; grid-template-columns:1fr; } .storyPanel--benefitsGrid .storyPanelCopy{ background:var(--detox-ph-bg-taupe); min-height:auto; justify-content:flex-start; align-items:center; text-align:left; padding-block:clamp(16px, 2.4vw, 28px); } .storyPanel--benefitsGrid .storyPanelBody, .storyPanel--differenceGrid .storyPanelBody{ width:min(100%, 1180px); max-width:1180px; justify-items:stretch; } .storyPanel--benefitsGrid .storyPanelTitle{ width:100%; max-width:none; text-align:center; margin:0 auto 18px; color:var(--detox-ph-white); } .benefitsGrid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:26px 44px; } .benefitItem{ display:grid; grid-template-columns:var(--anima-service-info-benefit-grid-columns); gap:var(--anima-service-info-benefit-gap); align-items:center; } .benefitIcon{ width:var(--anima-service-info-icon-size); height:var(--anima-service-info-icon-size); border-radius:999px; border:var(--anima-service-info-icon-border); display:inline-flex; align-items:center; justify-content:center; color:var(--anima-service-info-icon-color); text-align:center; flex-shrink:0; } .benefitIcon svg{ width:var(--anima-service-info-icon-svg-size); height:var(--anima-service-info-icon-svg-size); display:block; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; overflow:visible; } .benefitText{ margin:0; color:var(--detox-ph-white); font-size:var(--anima-service-info-benefit-text-size); line-height:var(--anima-service-info-benefit-text-line-height); } .storyPanel--taupeExplain{ position:relative; grid-template-columns:1fr; min-height:auto; overflow:hidden; background:var(--detox-ph-bg-taupe); } .storyPanel--taupeExplain .storyPanelAccentImage{ position:var(--anima-service-story-accent-image-position); right:var(--anima-service-story-accent-image-right); top:var(--anima-service-story-accent-image-top); transform:var(--anima-service-story-accent-image-transform); width:var(--anima-service-story-accent-image-width); aspect-ratio:var(--anima-service-story-accent-image-ratio); border-radius:var(--anima-service-story-accent-image-radius); overflow:var(--anima-service-story-accent-image-overflow); box-shadow:var(--anima-service-story-accent-image-shadow); border:var(--anima-service-story-accent-image-border); z-index:var(--anima-service-story-accent-image-z); pointer-events:var(--anima-service-story-accent-image-pointer-events); } .storyPanel--taupeExplain .storyPanelAccentImage img{ display:var(--anima-service-story-accent-image-display); width:var(--anima-service-story-accent-image-img-width); height:var(--anima-service-story-accent-image-img-height); object-fit:var(--anima-service-story-accent-image-img-fit); } .storyPanel--taupeExplain .storyPanelCopy{ background:var(--detox-ph-bg-taupe); min-height:auto; padding-right:clamp(32px, 5vw, 64px); padding-block:clamp(16px, 2.4vw, 28px); justify-content:flex-start; align-items:center; text-align:center; position:relative; z-index:2; } .storyPanel--taupeExplain .storyPanelBody{ justify-items:center; } .storyPanel--taupeExplain .storyPanelLead, .storyPanel--taupeExplain .storyPanelMeta{ color:var(--detox-ph-text-warm); width:min(100%, 1240px); max-width:1240px; text-align:center; font-size:clamp(21px, 1.75vw, 28px); line-height:1.55; } .storyPanel--taupeExplain .storyPanelLead:last-of-type{ color:var(--detox-ph-white); margin-top:6px; } .storyPanel--taupeExplain .storyPanelLead:nth-of-type(2){ color:var(--detox-ph-white); } .storyPanel--taupeExplain .storyPanelHighlight{ color:var(--anima-service-info-highlight-color); width:100%; text-align:center; font-size:var(--anima-service-info-highlight-size); line-height:var(--anima-service-info-highlight-line-height); font-weight:400; margin:0; } .storyPanel--taupeExplain .storyPanelHighlightGroup{ width:min(100%, 1240px); margin:0 auto; display:grid; justify-items:center; } .storyPanel--taupeExplain .storyPanelHighlight + .storyPanelHighlight{ margin-top:var(--anima-service-info-highlight-gap); } .storyPanel--taupeExplain .storyPanelMeta{ border-top:none; padding-top:2px; color:var(--detox-ph-text-warm); font-size:clamp(20px, 1.6vw, 26px); text-align:center; } .storyPanel--differenceGrid{ min-height:auto; grid-template-columns:1fr; } .storyPanel--differenceGrid .storyPanelCopy{ background:var(--detox-ph-bg-taupe); min-height:auto; justify-content:flex-start; align-items:center; text-align:left; padding-block:clamp(28px, 3.8vw, 46px); } .storyPanel--differenceGrid .storyPanelTitle{ width:100%; max-width:none; text-align:center; margin:0 auto 28px; color:var(--detox-ph-white); } .differenceGrid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:34px 44px; } .differenceItem{ display:grid; grid-template-columns:var(--anima-service-info-difference-grid-columns); gap:var(--anima-service-info-difference-gap); align-items:start; } .differenceIcon{ width:var(--anima-service-info-difference-icon-size); height:var(--anima-service-info-difference-icon-size); border-radius:999px; border:var(--anima-service-info-icon-border); display:flex; align-items:center; justify-content:center; color:var(--anima-service-info-icon-color); flex-shrink:0; } .differenceIcon svg{ width:var(--anima-service-info-icon-svg-size); height:var(--anima-service-info-icon-svg-size); stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .differenceItem h3{ margin:var(--anima-service-info-difference-title-margin); color:var(--detox-ph-white); font-size:var(--anima-service-info-difference-title-size); line-height:var(--anima-service-info-difference-title-line-height); } .differenceItem p{ margin:0; color:var(--detox-ph-white); font-size:var(--anima-service-info-difference-text-size); line-height:var(--anima-service-info-difference-text-line-height); } .storyPanel--taupeSoft .storyPanelCopy{ background:var(--detox-ph-bg-soft); } .storyPanel--taupeSoft .storyPanelTitle, .storyPanel--taupeSoft .storyPanelMiniCard h3{ color:var(--detox-ph-text-stone); } .storyPanel--taupeSoft .storyPanelLead, .storyPanel--taupeSoft .storyPanelMiniCard p, .storyPanel--taupeSoft .storyPanelMiniCard--accent p{ color:var(--detox-ph-text-stone-soft); } .storyPanel--taupeSoft.storyPanel--benefitsGrid .storyPanelCopy{ background:var(--detox-ph-bg-taupe); } .storyPanel--taupeSoft.storyPanel--benefitsGrid .storyPanelTitle{ color:var(--detox-ph-white); } .storyPanel--taupeSoft.storyPanel--benefitsGrid .benefitText, .storyPanel--taupeSoft.storyPanel--benefitsGrid .benefitIcon{ color:var(--detox-ph-white); } .storyPanel--taupeSoft.storyPanel--benefitsGrid .benefitIcon{ border-color:var(--detox-ph-white); } .storyPanel--softStone .storyPanelCopy{ background:var(--detox-ph-bg-stone); } .storyPanel--softStone .storyPanelTitle, .storyPanel--softStone .storyPanelMiniCard h3, .storyPanel--softStone .storyPanelMeta strong{ color:var(--detox-ph-text-softstone); } .storyPanel--softStone .storyPanelLead, .storyPanel--softStone .storyPanelMiniCard p, .storyPanel--softStone .storyPanelMiniCard--accent p, .storyPanel--softStone .storyPanelMeta{ color:var(--detox-ph-text-softstone-muted); } .storyPanel--softStone .storyPanelMeta{ border-top-color:var(--detox-ph-softstone-border); } .storyPanelBody{ display:var(--anima-service-story-body-display); gap:var(--anima-service-story-body-gap); align-content:var(--anima-service-story-body-align-content); } .storyPanelTitle{ margin:var(--anima-service-story-title-margin); font-size:var(--detoxLargeHeadingSize); line-height:var(--detoxLargeHeadingLineHeight); letter-spacing:var(--detoxLargeHeadingLetterSpacing); font-weight:var(--detoxLargeHeadingWeight); color:#101015; max-width:var(--anima-service-story-title-max-width); } .storyPanelLead{ margin:var(--anima-service-story-lead-margin); color:rgba(17,18,24,.72); font-size:clamp(18px, 1.6vw, 23px); line-height:1.56; max-width:var(--anima-service-story-lead-max-width); } .storyPanelMeta{ margin:var(--anima-service-story-meta-margin); color:rgba(17,18,24,.5); font-size:13px; line-height:1.5; letter-spacing:.02em; padding-top:var(--anima-service-story-meta-padding-top); border-top:var(--anima-service-story-meta-border-top); } .storyPanelSplit{ display:var(--anima-service-story-split-display); grid-template-columns:var(--anima-service-story-split-columns); gap:var(--anima-service-story-split-gap); } .storyPanelMiniCard{ display:grid; gap:var(--anima-service-info-card-gap); align-content:start; padding:var(--anima-service-info-card-padding); min-height:var(--anima-service-info-card-min-height); border-radius:var(--anima-service-info-card-radius); background:var(--anima-service-info-card-bg); border:var(--anima-service-info-card-border); box-shadow:var(--anima-service-info-card-shadow); } .storyPanelMiniCard h3{ margin:0; font-size:var(--anima-service-info-card-title-size); line-height:var(--anima-service-info-card-title-line-height); letter-spacing:var(--anima-service-info-card-title-letter-spacing); font-weight:var(--anima-service-info-card-title-weight); color:var(--anima-service-info-card-title-color); } .storyPanelMiniCard p{ margin:0; color:var(--anima-service-info-card-text-color); font-size:var(--anima-service-info-card-text-size); line-height:var(--anima-service-info-card-text-line-height); } .storyPanelMiniCard--accent{ padding-top:0; } .storyPanelMiniCard--accent p{ color:var(--anima-service-info-card-text-accent-color); } .btn{ display:inline-flex; align-items:center; justify-content:center; padding:14px 30px; border-radius:999px; border:1px solid rgba(255,255,255,.8); background:#fff; text-decoration:none; font-weight:700; font-size:14px; color:#0b0b0f; transition:background-color .2s ease, box-shadow .2s ease, transform .2s ease; cursor:pointer; min-width:180px; box-shadow:0 14px 28px rgba(0,0,0,.08); } .btn:hover{ background:#ffffff; box-shadow:0 16px 32px rgba(0,0,0,.1); transform:translateY(-1px); } .btn.ctaOlive{ background:var(--anima-service-cta-bg); color:var(--anima-service-cta-text); border:1px solid var(--anima-service-cta-border); box-shadow:var(--anima-service-cta-shadow); } .btn.ctaOlive:hover{ background:var(--anima-service-cta-bg-hover); color:var(--anima-service-cta-text); box-shadow:var(--anima-service-cta-shadow-hover); opacity:1; } .stepsFlow{ display:grid; gap:14px; } .stepRow{ display:grid; grid-template-columns:68px minmax(0, 1fr) auto; gap:18px; align-items:start; padding:20px 22px; border-radius:26px; background:#fff; border:1px solid rgba(0,0,0,.08); box-shadow:0 12px 26px rgba(0,0,0,.05); } .stepBadge{ width:52px; height:52px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:#111218; color:#fff; font-size:24px; line-height:1; font-weight:760; } .stepCopy h3{ margin:0 0 8px; font-size:22px; line-height:1.18; letter-spacing:-.02em; font-weight:760; color:#111218; } .stepCopy p{ margin:0; color:rgba(17,18,24,.72); font-size:16px; line-height:1.6; } .stepTime{ white-space:nowrap; color:rgba(17,18,24,.54); font-size:14px; line-height:1.5; padding-top:8px; } .pricingShowcase{ display:grid; gap:28px; width:100%; max-width:1120px; margin:0 auto; } .storyPanel--pricingSection .storyPanelBody{ justify-items:center; } .storyPanel--pricingSection .storyPanelTitle{ width:100%; max-width:none; margin:0 auto; text-align:center; font-size:var(--detoxLargeHeadingSize); line-height:var(--detoxLargeHeadingLineHeight); font-weight:var(--detoxLargeHeadingWeight); text-wrap:balance; } .pricingIntro{ display:grid; gap:var(--anima-service-pricing-intro-gap); width:100%; max-width:var(--anima-service-pricing-intro-max-width); margin:0 auto; justify-items:center; text-align:center; } .pricingIntro p{ margin:0; color:var(--anima-service-pricing-intro-text-color); font-size:var(--anima-service-pricing-intro-text-size); line-height:var(--anima-service-pricing-intro-text-line-height); } .pricingTabs{ display:grid; gap:var(--anima-service-pricing-tabs-gap); width:100%; max-width:var(--anima-service-pricing-tabs-max-width); margin:0 auto; } .pricingTabButtons{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; } .pricingTab{ appearance:none; border:1px solid var(--detox-ph-border-strong); background:rgba(255,255,255,.36); color:var(--detox-ph-text-softstone-muted); border-radius:0; padding:18px 16px; font:inherit; font-size:clamp(15px, 1.2vw, 19px); line-height:1.2; font-weight:700; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; } .pricingTab.is-active{ background:var(--detox-ph-tab-active); color:var(--detox-ph-white); border-color:var(--detox-ph-tab-active); box-shadow:none; } .pricingPanel{ display:grid; gap:var(--anima-service-pricing-panel-gap); padding:var(--anima-service-pricing-panel-padding); min-height:var(--pricing-panels-min-height, auto); align-content:start; background:var(--anima-service-pricing-panel-bg); border:var(--anima-service-pricing-panel-border); border-top:var(--anima-service-pricing-panel-border-top); } .pricingPanel[hidden]{ display:none; } .pricingTable{ display:grid; gap:var(--anima-service-pricing-table-gap); } .pricingTableHead{ display:grid; grid-template-columns:var(--anima-service-pricing-table-head-columns); align-items:end; gap:var(--anima-service-pricing-table-head-gap); padding:var(--anima-service-pricing-table-head-padding); border-bottom:var(--anima-service-pricing-table-head-border-bottom); } .pricingHeadLabel{ margin:0; color:var(--anima-service-pricing-head-label-color); font-size:var(--anima-service-pricing-head-label-size); line-height:var(--anima-service-pricing-head-label-line-height); letter-spacing:var(--anima-service-pricing-head-label-letter-spacing); text-transform:uppercase; font-weight:var(--anima-service-pricing-head-label-weight); text-align:left; justify-self:start; } .pricingHeadLabel--price{ text-align:right; justify-self:end; } .pricingRow{ display:grid; grid-template-columns:var(--anima-service-pricing-row-columns); align-items:center; gap:var(--anima-service-pricing-row-gap); padding:var(--anima-service-pricing-row-padding); min-height:var(--anima-service-pricing-row-min-height); border-radius:var(--anima-service-pricing-row-radius); background:var(--anima-service-pricing-row-bg); border:var(--anima-service-pricing-row-border); border-bottom:var(--anima-service-pricing-row-border-bottom); } .pricingRowMain{ display:grid; gap:var(--anima-service-pricing-row-main-gap); align-content:center; min-height:var(--anima-service-pricing-row-main-min-height); } .pricingRowTitle{ margin:0; color:var(--anima-service-pricing-title-color); font-size:var(--anima-service-pricing-title-size); line-height:var(--anima-service-pricing-title-line-height); font-weight:var(--anima-service-pricing-title-weight); text-align:left; } .pricingPrice{ color:var(--anima-service-pricing-price-color); font-size:var(--anima-service-pricing-price-size); line-height:var(--anima-service-pricing-price-line-height); font-weight:var(--anima-service-pricing-price-weight); white-space:nowrap; text-align:right; align-self:center; } .pricingAction{ display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 24px; border-radius:var(--anima-service-action-radius); background:var(--anima-service-action-bg); color:var(--anima-service-action-text); text-decoration:none; font-size:15px; line-height:1; font-weight:700; transition:background .2s ease, transform .2s ease; white-space:nowrap; position:relative; z-index:2; pointer-events:auto; } .pricingRow .pricingAction{ justify-self:end; width:var(--anima-service-action-row-width); max-width:var(--anima-service-action-row-width); align-self:center; } .pricingAction:hover{ background:var(--anima-service-action-bg-hover); transform:translateY(-1px); } .pricingStack{ display:grid; gap:var(--anima-service-pricing-stack-gap); max-width:none; } .pricingCareNote{ display:grid; gap:var(--anima-service-pricing-care-gap); padding:var(--anima-service-pricing-care-padding); min-height:var(--anima-service-pricing-care-min-height); align-content:start; border-radius:var(--anima-service-pricing-care-radius); background:var(--anima-service-pricing-care-bg); border:var(--anima-service-pricing-care-border); border-top:var(--anima-service-pricing-care-border-top); max-width:var(--anima-service-pricing-care-max-width); margin:0 auto; justify-items:center; text-align:center; } .pricingCareNote p{ margin:0; color:var(--anima-service-pricing-care-text-color); font-size:var(--anima-service-pricing-care-text-size); line-height:var(--anima-service-pricing-care-text-line-height); } .pricingCareNote .pricingAction{ justify-self:center; width:auto; min-width:var(--anima-service-action-care-width); max-width:none; } .pricingConsultNote{ margin:var(--anima-service-pricing-consult-margin); } .pricingConsultNote + .pricingAction{ margin-top:var(--anima-service-pricing-consult-action-margin-top); } .storyPanel--expectations .storyPanelCopy{ background:var(--detox-ph-bg-taupe-alt); min-height:auto; justify-content:flex-start; align-items:center; text-align:center; padding-block:clamp(36px, 5vw, 74px); } .storyPanel--expectations .storyPanelBody{ justify-items:center; gap:clamp(26px, 3vw, 40px); } .storyPanel--expectations .storyPanelTitle{ width:100%; max-width:none; margin:0 auto; text-align:center; color:var(--detox-ph-white); font-size:var(--detoxLargeHeadingSize); line-height:var(--detoxLargeHeadingLineHeight); font-weight:var(--detoxLargeHeadingWeight); text-wrap:balance; } .expectationsIntro{ display:grid; gap:18px; max-width:1160px; margin:0 auto; } .expectationsIntro p{ margin:0; color:var(--detox-ph-text-rgb-soft); font-size:clamp(16px, 1.08vw, 19px); line-height:1.6; } .storyPanel--expectations .stepRow{ border:2px solid var(--detox-ph-steps-stroke); z-index:1; } .storyPanel--expectations .stepBadge{ width:auto; height:auto; border-radius:0; background:transparent; color:var(--detox-ph-white); font-size:clamp(18px, 1.7vw, 28px); line-height:1.08; letter-spacing:.04em; text-transform:uppercase; font-weight:700; justify-content:center; order:1; } .storyPanel--expectations .stepTime{ order:2; color:#F7F1EB; font-size:clamp(16px, 1.02vw, 19px); line-height:1.2; font-weight:700; padding-top:0; margin:0 auto 6px; } .storyPanel--expectations .stepCopy{order:3} .storyPanel--expectations .stepCopy h3{ margin-bottom:8px; color:var(--detox-ph-white); font-size:clamp(18px, 1.45vw, 24px); line-height:1.5; } .storyPanel--expectations .stepCopy p{ color:rgba(255,255,255,.9); font-size:clamp(18px, 1.45vw, 24px); line-height:1.5; max-width:18ch; margin:0 auto; } .storyPanel--expectations .stepTime{ margin-top:0; } .storyPanel--careGuide .storyPanelCopy{ background:var(--detox-ph-bg-taupe-alt); min-height:auto; justify-content:flex-start; align-items:center; text-align:center; padding-block:clamp(0px, .6vw, 8px) clamp(32px, 3.6vw, 48px); } .storyPanel--careGuide .storyPanelBody{ justify-items:center; gap:clamp(20px, 2vw, 28px); } .storyPanel--careGuide .storyPanelTitle{ width:100%; max-width:none; margin:0 auto; color:var(--detox-ph-white); text-align:center; font-size:var(--detoxLargeHeadingSize); line-height:var(--detoxLargeHeadingLineHeight); letter-spacing:var(--detoxLargeHeadingLetterSpacing); font-weight:var(--detoxLargeHeadingWeight); } .careGuideLead{ display:none; } .careGuideGrid{ width:100%; display:grid; grid-template-columns:1fr; gap:clamp(24px, 2.6vw, 32px); align-items:stretch; } .careGuideColumn{ display:grid; gap:clamp(20px, 2vw, 28px); justify-items:stretch; } .careGuideColumnTitle{ margin:0; color:var(--detox-ph-white); text-align:center; font-size:clamp(18px, 1.7vw, 28px); line-height:1.08; letter-spacing:.04em; text-transform:uppercase; font-weight:700; } .scrollNav{ width:100%; display:flex; align-items:center; justify-content:flex-end; gap:18px; margin:18px auto 0; padding-right:var(--content-grid-inset); } .scrollNav[hidden]{ display:none; } .scrollNavBtn{ width:58px; height:58px; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(247,243,236,.72); color:rgba(38,38,38,.68); display:inline-flex; align-items:center; justify-content:center; padding:0; cursor:pointer; box-shadow:none; transition:background .2s ease, color .2s ease, opacity .2s ease, transform .2s ease; } .scrollNavBtn:hover{ background:rgba(247,243,236,.9); color:rgba(38,38,38,.86); transform:translateY(-1px); } .scrollNavBtn:disabled{ opacity:.38; cursor:default; transform:none; } .scrollNavBtn svg{ width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; } @media (max-width:1180px){ .scrollNav{ display:none; } } .careGuideCard{ --anima-service-info-care-card-shadow-legacy:var(--anima-service-info-care-card-shadow); flex:var(--anima-service-info-care-card-flex); min-height:var(--anima-service-info-care-card-min-height); padding:var(--anima-service-info-care-card-padding); border-radius:var(--anima-service-info-care-card-radius); border:var(--anima-service-info-care-card-border); display:flex; flex-direction:column; align-items:flex-start; gap:var(--anima-service-info-care-card-gap); text-align:left; } .careGuideColumn--before .careGuideCard:nth-child(4n + 1){ background:var(--anima-service-info-care-card-before-1); } .careGuideColumn--before .careGuideCard:nth-child(4n + 2){ background:var(--anima-service-info-care-card-before-2); } .careGuideColumn--before .careGuideCard:nth-child(4n + 3){ background:var(--anima-service-info-care-card-before-3); } .careGuideColumn--before .careGuideCard:nth-child(4n + 4){ background:var(--anima-service-info-care-card-before-4); } .careGuideColumn--after .careGuideCard:nth-child(4n + 1){ background:var(--anima-service-info-care-card-after-1); } .careGuideColumn--after .careGuideCard:nth-child(4n + 2){ background:var(--anima-service-info-care-card-after-2); } .careGuideColumn--after .careGuideCard:nth-child(4n + 3){ background:var(--anima-service-info-care-card-after-3); } .careGuideColumn--after .careGuideCard:nth-child(4n + 4){ background:var(--anima-service-info-care-card-after-4); } .careGuideIcon{ width:var(--anima-service-info-care-icon-size); height:var(--anima-service-info-care-icon-size); border-radius:999px; display:flex; align-items:center; justify-content:center; border:var(--anima-service-info-care-icon-border); color:var(--anima-service-info-care-icon-color); margin:var(--anima-service-info-care-icon-margin); opacity:var(--anima-service-info-care-icon-opacity); } .careGuideIcon svg{ width:var(--anima-service-info-care-icon-svg-size); height:var(--anima-service-info-care-icon-svg-size); stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .careGuideCard h4{ margin:var(--anima-service-info-care-title-margin); color:var(--anima-service-info-care-title-color); font-size:var(--anima-service-info-care-title-size); line-height:var(--anima-service-info-care-title-line-height); font-weight:var(--anima-service-info-care-title-weight); letter-spacing:var(--anima-service-info-care-title-letter-spacing); } .careGuideCard p{ margin:var(--anima-service-info-care-text-margin); color:var(--anima-service-info-care-text-color); font-size:var(--anima-service-info-care-text-size); line-height:var(--anima-service-info-care-text-line-height); letter-spacing:var(--anima-service-info-care-text-letter-spacing); } @media (min-width:1181px){ .careGuideCard{ min-height:var(--anima-service-info-care-card-min-height-desktop); } .careGuideIcon{ margin:var(--anima-service-info-care-icon-margin-desktop); } .careGuideCard h4{ margin:var(--anima-service-info-care-title-margin-desktop); } } .bookingHero--detoxFinal{ margin-top:var(--anima-service-cta-band-final-margin-top); } .bookingHero--detoxFinal .bookingHeroMedia img{ object-position:var(--anima-service-cta-band-final-image-position); } .bookingHero--detoxFinal .bookingHeroTitle{ width:var(--anima-service-cta-band-final-title-width); max-width:var(--anima-service-cta-band-final-title-max-width); margin:var(--anima-service-cta-band-final-title-margin); } .storyPanel--contraCentered{ min-height:auto; } .storyPanel--contraCentered .storyPanelCopy{ min-height:auto; justify-content:flex-start; align-items:center; text-align:center; background:var(--detox-ph-bg-taupe-alt); padding-block:clamp(8px, 1vw, 16px) clamp(54px, 4.8vw, 80px); } .storyPanel--contraCentered .storyPanelBody{ width:min(100%, 1240px); max-width:1240px; justify-items:center; gap:clamp(12px, 1.4vw, 18px); } .storyPanel--contraCentered .storyPanelTitle{ width:100%; max-width:none; text-align:center; margin:0 auto; color:var(--detox-ph-white); } .bookingHero{ position:relative; margin:var(--anima-service-cta-band-margin); min-height:var(--anima-service-cta-band-min-height); display:var(--anima-service-cta-band-display); align-items:var(--anima-service-cta-band-align); overflow:var(--anima-service-cta-band-overflow); background:var(--anima-service-cta-band-bg); } .bookingHeroMedia{ position:var(--anima-service-cta-band-media-position); inset:var(--anima-service-cta-band-media-inset); } .bookingHeroMedia::after{ content:""; position:var(--anima-service-cta-band-media-position); inset:var(--anima-service-cta-band-media-inset); background:var(--anima-service-cta-band-overlay); } .bookingHeroMedia img{ width:var(--anima-service-cta-band-image-width); height:var(--anima-service-cta-band-image-height); object-fit:var(--anima-service-cta-band-image-fit); object-position:var(--anima-service-cta-band-image-position); display:block; } .bookingHeroContent{ position:var(--anima-service-cta-band-content-position); z-index:var(--anima-service-cta-band-content-z); width:var(--anima-service-cta-band-content-width); max-width:var(--anima-service-cta-band-content-max-width); margin:var(--anima-service-cta-band-content-margin); padding:var(--anima-service-cta-band-content-padding); display:var(--anima-service-cta-band-content-display); justify-items:var(--anima-service-cta-band-content-justify); gap:var(--anima-service-cta-band-content-gap); text-align:var(--anima-service-cta-band-content-align); } .bookingHeroTitle{ margin:var(--anima-service-cta-band-title-margin); color:var(--anima-service-cta-band-title-color); font-size:var(--anima-service-cta-band-title-size); line-height:var(--anima-service-cta-band-title-line-height); letter-spacing:var(--anima-service-cta-band-title-letter-spacing); font-weight:var(--anima-service-cta-band-title-weight); width:var(--anima-service-cta-band-title-width); max-width:var(--anima-service-cta-band-title-max-width); } .bookingHero .btn{ min-width:var(--anima-service-cta-on-media-min-width); padding:var(--anima-service-cta-on-media-padding-block) var(--anima-service-cta-on-media-padding-inline); font-size:var(--anima-service-cta-on-media-font-size); box-shadow:var(--anima-service-cta-band-button-shadow); } .bookingHero .bookingHeroTitle + .btn{ margin-top:var(--anima-service-cta-band-title-button-gap); } .faqCard--inline{ background:var(--anima-service-faq-card-bg); border:var(--anima-service-faq-card-border); border-radius:var(--anima-service-faq-card-radius); padding:var(--anima-service-faq-card-padding); box-shadow:var(--anima-service-faq-card-shadow); } .faqSectionBlock{ margin:var(--anima-service-faq-section-margin); padding:var(--anima-service-faq-section-padding); background:var(--anima-service-faq-section-bg); } .faqSectionInner{ max-width:var(--anima-service-faq-inner-max-width); margin:var(--anima-service-faq-inner-margin); padding:var(--anima-service-faq-inner-padding); } .faqSectionHeading{ width:var(--anima-service-faq-heading-width); margin:var(--anima-service-faq-heading-margin); color:var(--anima-service-faq-heading-color); text-align:var(--anima-service-faq-heading-align); font-size:var(--anima-service-faq-heading-size); line-height:var(--anima-service-faq-heading-line-height); letter-spacing:var(--anima-service-faq-heading-letter-spacing); font-weight:var(--anima-service-faq-heading-weight); } #faqSectionContent{ display:var(--anima-service-faq-content-display); } #faqSectionContent[hidden]{ display:none; } .faqSectionList{ margin:0; padding:0; list-style:none; display:grid; gap:var(--anima-service-faq-list-gap); } .faqSectionList li{ margin:0; padding:0; border:var(--anima-service-faq-item-border); border-radius:var(--anima-service-faq-item-radius); background:var(--anima-service-faq-item-bg); overflow:hidden; } .faqSectionList .faqQuestionBtn{ align-items:center; justify-content:space-between; gap:var(--anima-service-faq-question-gap); padding:var(--anima-service-faq-question-padding); color:var(--anima-service-faq-question-color); font-size:var(--anima-service-faq-question-size); line-height:var(--anima-service-faq-question-line-height); font-weight:var(--anima-service-faq-question-weight); } .faqSectionList .faqQuestionBtn span:last-child{ flex:1 1 auto; min-width:0; } .faqSectionList .faqArrow{ order:2; width:var(--anima-service-faq-arrow-width); flex:0 0 var(--anima-service-faq-arrow-width); margin-top:0; font-size:var(--anima-service-faq-arrow-font-size); line-height:var(--anima-service-faq-arrow-line-height); color:var(--anima-service-faq-arrow-color); text-align:center; transform:var(--anima-service-faq-arrow-transform); transform-origin:center; } .faqSectionList .faqInlineAnswer{ padding:var(--anima-service-faq-answer-padding); border-top:var(--anima-service-faq-answer-border-top); } .faqSectionList .faqInlineText{ padding-top:var(--anima-service-faq-text-padding-top); color:var(--anima-service-faq-text-color); font-size:var(--anima-service-faq-text-size); line-height:var(--anima-service-faq-text-line-height); font-weight:var(--anima-service-faq-text-weight); } @media (max-width:920px){ :root{ --detoxLargeHeadingSize:var(--anima-service-type-large-heading-mobile-size); } .hero.heroFullscreen{ margin-bottom:var(--anima-service-hero-fullscreen-margin-bottom); } .heroMedia, .heroOverlay{ min-height:var(--anima-service-hero-media-min-height-mobile); } .heroOverlay{ align-items:var(--anima-service-hero-media-overlay-align); justify-content:var(--anima-service-hero-media-overlay-justify); text-align:var(--anima-service-hero-media-overlay-text-align); padding:var(--anima-service-hero-media-overlay-padding-mobile); } .heroHeadline{ max-width:var(--anima-service-hero-media-headline-max-width); font-size:clamp(40px, 11vw, 56px); line-height:.98; letter-spacing:-1.2px; } .pricingTabButtons{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .pricingTab{ padding:16px 12px; font-size:14px; } .pricingPanel{ padding:var(--anima-service-pricing-panel-padding-mobile); border-radius:var(--anima-service-pricing-panel-radius); } .pricingRow{ grid-template-columns:var(--anima-service-pricing-row-columns-mobile); align-items:center; gap:var(--anima-service-pricing-row-gap-mobile); padding:var(--anima-service-pricing-row-padding-mobile); min-height:var(--anima-service-pricing-row-min-height-mobile); } .pricingRowMain{ gap:var(--anima-service-pricing-row-main-gap-mobile); align-content:center; min-height:var(--anima-service-pricing-row-main-min-height-mobile); } .pricingRowMain, .pricingPrice{ grid-column:1; } .pricingAction{ grid-column:2; grid-row:1 / span 2; align-self:center; justify-self:end; width:var(--anima-service-action-row-width-compact); min-width:var(--anima-service-action-row-width-compact); padding:0 18px; } .pricingTableHead{ grid-template-columns:var(--anima-service-pricing-table-head-columns-mobile); gap:var(--anima-service-pricing-table-head-gap-mobile); } .pricingTableHead .pricingAction{ display:none; } .pricingHeadLabel--price, .pricingPrice{ text-align:left; } .pricingPrice{ font-size:var(--anima-service-pricing-price-mobile-size); margin-top:0; line-height:var(--anima-service-pricing-price-line-height); } .pricingCareNote{ padding:var(--anima-service-pricing-care-padding-mobile); border-radius:var(--anima-service-pricing-care-radius); display:grid; grid-template-columns:1fr; justify-items:center; text-align:center; gap:var(--anima-service-pricing-care-gap-mobile); } .pricingCareNote p{ max-width:var(--anima-service-pricing-care-text-max-width-mobile); margin:0 auto; text-align:center; } .pricingCareNote .pricingAction{ grid-column:1; grid-row:auto; justify-self:center; align-self:center; width:min(100%, 320px); min-width:0; } .expectationsIntro{ gap:14px; } .expectationsIntro p{ font-size:18px; line-height:1.7; } .storyPanel--careGuide .storyPanelTitle{ max-width:none; } .careGuideColumnTitle{ font-size:clamp(14px, 3.9vw, 18px); letter-spacing:.18em; } .careGuideCards{ padding:4px max(22px, env(safe-area-inset-right)) 10px max(22px, env(safe-area-inset-left)); scroll-padding-left:max(22px, env(safe-area-inset-left)); } .scrollNav{ padding-right:max(22px, env(safe-area-inset-right)); } .careGuideCard{ flex:var(--anima-service-info-care-card-flex-mobile); min-height:var(--anima-service-info-care-card-min-height-mobile); padding:var(--anima-service-info-care-card-padding-mobile); } .careGuideIcon{ width:var(--anima-service-info-care-icon-size-mobile); height:var(--anima-service-info-care-icon-size-mobile); margin:var(--anima-service-info-care-icon-margin-mobile); } .careGuideCard h4{ margin:var(--anima-service-info-care-title-margin-mobile); font-size:var(--anima-service-info-care-title-mobile-size); line-height:var(--anima-service-info-care-title-line-height); } .careGuideCard p{ font-size:var(--anima-service-info-care-text-mobile-size); line-height:var(--anima-service-info-care-text-mobile-line-height); } .stepRow{ grid-template-columns:52px minmax(0, 1fr); gap:14px; padding:18px 18px; } .stepTime{ grid-column:2; padding-top:0; } .bookingHero{ min-height:var(--anima-service-cta-band-mobile-min-height); } .bookingHeroContent{ padding:var(--anima-service-cta-band-content-mobile-padding); gap:var(--anima-service-cta-band-content-mobile-gap); } .bookingHeroTitle{ max-width:var(--anima-service-cta-band-title-mobile-max-width); } .bookingHero .btn{ min-width:var(--anima-service-cta-on-media-mobile-min-width); } .bookingHeroMedia img{ object-position:var(--anima-service-cta-band-image-position); } .storyStack{ gap:var(--anima-service-story-stack-mobile-gap); margin:var(--anima-service-story-stack-mobile-margin); } .storyPanel{ grid-template-columns:var(--anima-service-story-panel-mobile-columns); grid-template-rows:var(--anima-service-story-panel-mobile-rows); min-height:var(--anima-service-story-panel-mobile-min-height); } .storyPanel--creamIntro{ grid-template-rows:1fr; } .storyPanelCopy{ min-height:var(--anima-service-story-copy-mobile-min-height); padding:var(--anima-service-story-copy-mobile-padding); gap:var(--anima-service-story-copy-mobile-gap); } .storyPanel--taupeExplain .storyPanelCopy{ min-height:auto; padding:24px 20px; align-items:center; text-align:center; } .storyPanel--taupeExplain .storyPanelAccentImage{ position:var(--anima-service-story-accent-image-mobile-position); right:var(--anima-service-story-accent-image-mobile-right); top:var(--anima-service-story-accent-image-mobile-top); transform:var(--anima-service-story-accent-image-mobile-transform); width:var(--anima-service-story-accent-image-mobile-width); max-width:var(--anima-service-story-accent-image-mobile-max-width); margin:var(--anima-service-story-accent-image-mobile-margin); border-radius:var(--anima-service-story-accent-image-mobile-radius); } .storyPanel--taupeExplain .storyPanelBody{ width:100%; max-width:none; justify-items:center; } .storyPanelTitle{ font-size:clamp(30px, 8.4vw, 42px); max-width:var(--anima-service-story-title-mobile-max-width); } .storyPanelLead{ font-size:15px; } .storyPanel--taupeExplain .storyPanelLead, .storyPanel--taupeExplain .storyPanelMeta{ text-align:center; } .storyPanelSplit{ grid-template-columns:var(--anima-service-story-split-mobile-columns); } .storyPanel--featureGallery .storyPanelSplit{ grid-template-columns:1fr; gap:30px; } .storyPanel--featureGallery .storyPanelMiniCard img{ height:var(--anima-service-info-card-feature-image-mobile-height); border-radius:var(--anima-service-info-card-feature-image-mobile-radius); } .benefitsGrid{ grid-template-columns:1fr; gap:18px; } .benefitItem{ grid-template-columns:var(--anima-service-info-benefit-mobile-grid-columns); gap:var(--anima-service-info-benefit-mobile-gap); align-items:flex-start; } .benefitIcon{ width:var(--anima-service-info-icon-mobile-size); height:var(--anima-service-info-icon-mobile-size); } .benefitIcon svg{ width:var(--anima-service-info-icon-svg-mobile-size); height:var(--anima-service-info-icon-svg-mobile-size); } .benefitText{ font-size:var(--anima-service-info-benefit-text-mobile-size); } .storyPanel--featureGallery .storyPanelMiniCard p{ font-size:var(--anima-service-info-card-feature-text-mobile-size); line-height:var(--anima-service-info-card-feature-text-line-height); } .storyPanel--beforeAfterShowcase .storyPanelBody{ width:100%; max-width:none; justify-items:center; } .storyPanel--beforeAfterShowcase .storyPanelTitle, .storyPanel--beforeAfterShowcase .storyPanelLead{ width:100%; max-width:none; margin-left:0; margin-right:0; text-align:center; } .storyPanel--beforeAfterShowcase .storyPanelTitle{ font-size:clamp(34px, 10vw, 52px); line-height:1.02; } .storyPanel--beforeAfterShowcase .storyPanelLead{ font-size:20px; line-height:1.55; } .beforeAfterTabs{ width:var(--anima-service-before-after-content-tabs-mobile-width); grid-template-columns:var(--anima-service-before-after-content-tabs-mobile-columns); gap:var(--anima-service-before-after-content-tabs-mobile-gap); padding:var(--anima-service-before-after-content-tabs-mobile-padding); } .storyPanel--contraCentered .beforeAfterPoints, .storyPanel--contraCentered .beforeAfterPoints li, .storyPanel--contraCentered .beforeAfterTabPanel{ color:var(--anima-service-before-after-content-mobile-on-dark-color); } .beforeAfterTabPanel{ width:var(--anima-service-before-after-content-panel-mobile-width); grid-column:auto !important; border-radius:var(--anima-service-before-after-content-panel-mobile-radius); padding:var(--anima-service-before-after-content-panel-mobile-padding); } .beforeAfterTabs .beforeAfterTabPanel[hidden]{ display:none; } .beforeAfterPoints li{ font-size:20px; line-height:1.55; } .storyPanel--taupeExplain .storyPanelLead, .storyPanel--taupeExplain .storyPanelMeta{ font-size:20px; line-height:1.55; } .storyPanel--taupeExplain .storyPanelHighlight{ font-size:var(--anima-service-info-highlight-mobile-size); line-height:var(--anima-service-info-highlight-line-height); } .storyPanel--taupeExplain .storyPanelCopy{ padding-right:20px; text-align:center; } .differenceGrid{ grid-template-columns:1fr; gap:30px; } .differenceItem{ grid-template-columns:var(--anima-service-info-difference-mobile-grid-columns); gap:var(--anima-service-info-difference-mobile-gap); } .differenceIcon{ width:var(--anima-service-info-icon-mobile-size); height:var(--anima-service-info-icon-mobile-size); } .differenceIcon svg{ width:var(--anima-service-info-icon-difference-svg-mobile-size); height:var(--anima-service-info-icon-difference-svg-mobile-size); } .differenceItem p{ font-size:var(--anima-service-info-difference-text-mobile-size); line-height:var(--anima-service-info-difference-text-line-height); } .storyPanelMiniCard{ min-height:var(--anima-service-info-card-min-height); padding:var(--anima-service-info-card-padding); } .storyPanelMiniCard h3{ font-size:var(--anima-type-h4, 22px); } .btn{min-width:140px} } /* Typography synced from /laser. Layout, cards and text content stay unchanged. */ :root{ --appleFontText:var(--anima-service-type-font-text); --appleFontDisplay:var(--anima-service-type-font-display); --appleHeadingWeight:var(--anima-service-type-heading-weight); --appleSubheadingWeight:var(--anima-service-type-subheading-weight); --appleBodyWeight:var(--anima-service-type-body-weight); --appleEmphasisWeight:var(--anima-service-type-emphasis-weight); --appleSmallWeight:var(--anima-service-type-small-weight); --appleHeadingTracking:var(--anima-service-type-heading-tracking); --appleBodyTracking:var(--anima-service-type-body-tracking); --appleSmallTracking:var(--anima-service-type-small-tracking); --appleHeroDisplaySize:var(--anima-service-type-hero-display-size); --appleSectionTitleSize:var(--anima-service-type-section-title-size); --appleBodyLargeSize:var(--anima-service-type-body-large-size); --appleBodySize:var(--anima-service-type-body-size); --appleCalloutSize:var(--anima-service-type-callout-size); --appleFootnoteSize:var(--anima-service-type-footnote-size); --appleButtonSize:var(--anima-service-type-button-size); --detoxLargeHeadingSize:var(--anima-service-type-large-heading-size); --detoxLargeHeadingLineHeight:var(--anima-service-type-large-heading-line-height); --detoxLargeHeadingWeight:var(--anima-service-type-heading-weight); --detoxLargeHeadingLetterSpacing:var(--anima-service-type-heading-tracking); } body{ font-family:var(--anima-service-type-font-text); } :is( h1, h2, h3, h4, h5, h6, .storyPanelTitle, .storyPanelLead, .storyPanelMiniCard h3, .storyPanelMiniCard p, .beforeAfterTab, .pricingTab, .pricingRowTitle, .pricingPrice, .pricingAction, .stepBadge, .stepTime, .stepCopy h3, .stepCopy p, .careGuideColumnTitle, .careGuideCard h4, .careGuideCard p, .bookingHeroTitle ){ font-family:var(--anima-service-type-font-text); } .heroHeadline{ font-family:var(--anima-service-type-font-display); font-size:var(--anima-service-type-hero-display-size); line-height:.98; letter-spacing:var(--anima-service-type-heading-tracking); font-weight:var(--anima-service-type-heading-weight); } .btn, .pricingAction{ font-size:var(--anima-service-type-button-size); line-height:var(--anima-service-type-button-line-height); letter-spacing:var(--anima-service-type-body-tracking); font-weight:var(--anima-service-type-emphasis-weight); } .bookingHero .btn.ctaOlive{ background:var(--anima-service-cta-on-media-bg); color:var(--anima-service-cta-on-media-text); border-color:var(--anima-service-cta-on-media-border); border-radius:var(--anima-service-button-radius); box-shadow:var(--anima-service-cta-on-media-shadow); backdrop-filter:var(--anima-service-cta-on-media-backdrop); -webkit-backdrop-filter:var(--anima-service-cta-on-media-backdrop); } .bookingHero .btn.ctaOlive:hover{ background:var(--anima-service-cta-on-media-bg-hover); color:var(--anima-service-cta-on-media-text); border-color:var(--anima-service-cta-on-media-border); opacity:1; } .storyPanelHighlight{ font-size:var(--anima-service-type-body-large-size); line-height:var(--anima-service-type-body-large-line-height); letter-spacing:var(--anima-service-type-body-tracking); font-weight:var(--anima-service-type-body-weight); } .storyPanelHighlight, .pricingPrice{ font-weight:var(--anima-service-type-emphasis-weight); } .storyPanelMiniCard h3, .benefitItem h3, .pricingRowTitle, .careGuideCard h4, .storyPanel--expectations .stepCopy h3{ font-size:var(--anima-service-type-compact-card-title-size); line-height:var(--anima-service-type-compact-card-title-line-height); letter-spacing:var(--anima-service-type-heading-tracking); font-weight:var(--anima-service-type-heading-weight); } .expectationsIntro p, .storyPanel--expectations .stepCopy p, .careGuideLead, .careGuideCard p{ font-size:var(--anima-service-type-body-size); line-height:var(--anima-service-type-body-line-height); letter-spacing:var(--anima-service-type-body-tracking); font-weight:var(--anima-service-type-body-weight); } .beforeAfterTab, .pricingTab, .careGuideColumnTitle, .storyPanel--expectations .stepBadge, .storyPanel--expectations .stepTime{ font-size:var(--anima-service-type-callout-size); line-height:1.08; letter-spacing:.04em; font-weight:600; } .pricingPrice{ font-size:var(--anima-service-pricing-price-size); line-height:var(--anima-service-pricing-price-line-height); letter-spacing:var(--anima-service-type-body-tracking); } @media (max-width:920px){ :root{ --anima-service-type-heading-tracking:var(--anima-service-type-mobile-heading-tracking); --anima-service-type-body-tracking:var(--anima-service-type-mobile-body-tracking); --anima-service-type-small-tracking:var(--anima-service-type-mobile-small-tracking); --detoxLargeHeadingSize:var(--anima-service-type-large-heading-mobile-size); --appleHeadingTracking:var(--anima-service-type-heading-tracking); --appleBodyTracking:var(--anima-service-type-body-tracking); --appleSmallTracking:var(--anima-service-type-small-tracking); } } @media (max-width:640px){ :root{ --anima-service-type-heading-tracking:var(--anima-service-type-narrow-heading-tracking); --anima-service-type-body-tracking:var(--anima-service-type-narrow-body-tracking); --anima-service-type-small-tracking:var(--anima-service-type-narrow-small-tracking); --appleHeadingTracking:var(--anima-service-type-heading-tracking); --appleBodyTracking:var(--anima-service-type-body-tracking); --appleSmallTracking:var(--anima-service-type-small-tracking); } .storyPanel--beforeAfterShowcase .storyPanelTitle{ font-size:var(--anima-service-type-before-after-mobile-title-size); } .storyPanel--beforeAfterShowcase .storyPanelLead{ font-size:var(--anima-service-type-before-after-mobile-lead-size); } .beforeAfterTab, .pricingTab{ font-size:var(--anima-service-type-tab-mobile-size); line-height:var(--anima-service-type-tab-mobile-line-height); letter-spacing:var(--anima-service-type-tab-mobile-letter-spacing); } } .faqSectionHeading, .storyPanelTitle, .bookingHeroTitle, #benefits_title, #how_work_title, #difference_title, #mid_cta_title, #before_after_title, #pricing_title, #expectations_title, #care_title, #contra_title, #cta_title{ font-size:var(--anima-service-type-section-title-size); line-height:var(--anima-service-type-large-heading-line-height); letter-spacing:var(--anima-service-type-heading-tracking); font-weight:var(--anima-service-type-heading-weight); } .storyPanelMiniCard h3, .storyPanel--featureGallery .storyPanelMiniCard h3, .differenceItem h3, .pricingRowTitle, .careGuideCard h4, .storyPanel--careGuide .careGuideColumnTitle, .storyPanel--expectations .stepCopy h3{ font-size:var(--anima-service-type-card-title-size); line-height:var(--anima-service-type-card-title-line-height); letter-spacing:var(--anima-service-type-card-title-letter-spacing); font-weight:var(--anima-service-type-card-title-weight); } .storyPanelLead, .storyPanelMiniCard p, .storyPanelMeta, .storyPanel--taupeExplain .storyPanelLead, .storyPanel--taupeExplain .storyPanelMeta, .storyPanel--taupeExplain .storyPanelHighlight, .storyPanel--featureGallery .storyPanelMiniCard p, .storyPanel--taupeSoft.storyPanel--benefitsGrid .benefitText, .benefitText, .differenceItem p, .beforeAfterPoints li, .beforeAfterStandaloneNote, .pricingIntro p, .pricingConsultNote, .pricingCareNote p, .expectationsIntro p, .storyPanel--expectations .stepCopy p, .careGuideLead, .careGuideCard p{ font-size:var(--anima-service-type-body-large-size); line-height:var(--anima-service-type-body-large-line-height); letter-spacing:var(--anima-service-type-body-tracking); font-weight:var(--anima-service-type-body-weight); } .beforeAfterTab, .pricingTab, .pricingHeadLabel, .careGuideColumnTitle, .storyPanel--expectations .stepBadge, .storyPanel--expectations .stepTime{ font-size:var(--anima-service-type-callout-size); line-height:var(--anima-service-type-callout-line-height); letter-spacing:var(--anima-service-type-body-tracking); font-weight:var(--anima-service-type-emphasis-weight); } .pricingPrice{ font-size:var(--anima-service-pricing-price-size); line-height:var(--anima-service-pricing-price-line-height); letter-spacing:var(--anima-service-type-body-tracking); font-weight:var(--anima-service-type-emphasis-weight); } .faqSectionList{ gap:var(--anima-service-faq-list-gap-refined); } .faqSectionList li{ border:var(--anima-service-faq-item-border-refined); border-radius:var(--anima-service-faq-item-radius-refined); background:var(--anima-service-faq-item-bg-refined); box-shadow:var(--anima-service-faq-item-shadow); backdrop-filter:var(--anima-service-faq-item-backdrop); -webkit-backdrop-filter:var(--anima-service-faq-item-backdrop); overflow:hidden; transition:var(--anima-service-faq-item-transition); } .faqSectionList li:has(.faqStaticItem[open]){ border-color:var(--anima-service-faq-item-border-open); box-shadow:var(--anima-service-faq-item-shadow-open); background:var(--anima-service-faq-item-bg-open); } .faqStaticItem summary{ list-style:none; } .faqStaticItem summary::-webkit-details-marker{ display:none; } .faqSectionList .faqQuestionBtn{ align-items:center; justify-content:space-between; gap:var(--anima-service-faq-question-gap-refined); padding:var(--anima-service-faq-question-padding-refined); color:var(--anima-service-faq-question-color-refined); font-size:var(--anima-service-faq-question-size-refined); line-height:var(--anima-service-faq-question-line-height-refined); letter-spacing:var(--anima-service-faq-question-letter-spacing); font-weight:var(--anima-service-faq-question-weight-refined); } .faqSectionList .faqArrow{ order:2; width:var(--anima-service-faq-arrow-width-refined); height:var(--anima-service-faq-arrow-height-refined); flex:0 0 var(--anima-service-faq-arrow-width-refined); margin-top:0; font-size:var(--anima-service-faq-arrow-font-size-refined); line-height:var(--anima-service-faq-arrow-line-height); color:var(--anima-service-faq-arrow-color); position:relative; transform:var(--anima-service-faq-arrow-transform-refined); } .faqSectionList .faqArrow::before, .faqSectionList .faqArrow::after{ content:""; position:absolute; left:50%; top:50%; width:var(--anima-service-faq-arrow-bar-width); height:var(--anima-service-faq-arrow-bar-height); border-radius:var(--anima-service-faq-arrow-bar-radius); background:currentColor; transform:translate(-50%, -50%); transition:var(--anima-service-faq-arrow-bar-transition); } .faqSectionList .faqArrow::after{ transform:translate(-50%, -50%) rotate(90deg); } .faqSectionList .faqStaticItem[open] .faqArrow::after{ opacity:0; } .faqSectionList .faqStaticItem[open] .faqArrow{ transform:none; color:var(--anima-service-faq-arrow-color); } .faqSectionList .faqInlineAnswer{ padding:var(--anima-service-faq-answer-padding-refined); border-top:var(--anima-service-faq-answer-border-top-refined); } .faqSectionList .faqStaticItem[open] .faqInlineAnswer{ max-height:var(--anima-service-faq-answer-max-height-open); opacity:var(--anima-service-faq-answer-opacity-open); padding:var(--anima-service-faq-answer-padding-open); } .faqSectionList .faqInlineText{ margin:var(--anima-service-faq-text-margin); padding-top:var(--anima-service-faq-text-padding-top-refined); color:var(--anima-service-faq-text-color-refined); font-size:var(--anima-service-faq-text-size-refined); line-height:var(--anima-service-faq-text-line-height-refined); letter-spacing:var(--anima-service-faq-text-letter-spacing); font-weight:var(--anima-service-faq-text-weight-refined); } .faqSectionList .faqStaticItem[open] .faqInlineText{ opacity:var(--anima-service-faq-text-opacity-open); } @media (max-width:640px){ .faqSectionList{ gap:var(--anima-service-faq-list-gap-mobile); } .faqSectionList li{ border-radius:var(--anima-service-faq-item-radius-mobile); } .faqSectionList .faqQuestionBtn{ padding:var(--anima-service-faq-question-padding-mobile); font-size:var(--anima-service-faq-question-size-mobile); } .faqSectionList .faqStaticItem[open] .faqInlineAnswer{ padding:var(--anima-service-faq-answer-padding-open-mobile); } } .beforeAfterTabButtons{ --tab-gap:var(--anima-service-before-after-tablist-gap); --tab-pad-x:var(--anima-service-before-after-tablist-pad-x); --tab-pad-y:var(--anima-service-before-after-tablist-pad-y); width:var(--anima-service-before-after-tablist-width); max-width:var(--anima-service-before-after-tablist-max-width); margin-inline:auto; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:end; grid-column:1 / -1; gap:var(--tab-gap); padding:var(--tab-pad-y) var(--tab-pad-x); border:var(--anima-service-before-after-tablist-border); border-radius:var(--anima-service-before-after-tablist-radius); background:var(--anima-service-before-after-tablist-bg); box-shadow:var(--anima-service-before-after-tablist-shadow); backdrop-filter:var(--anima-service-before-after-tablist-backdrop); -webkit-backdrop-filter:var(--anima-service-before-after-tablist-backdrop); position:relative; overflow:hidden; isolation:isolate; } .beforeAfterTabButtons::before{ content:""; position:absolute; z-index:0; top:var(--tab-pad-y); bottom:var(--tab-pad-y); left:var(--tab-pad-x); width:calc((100% - (var(--tab-pad-x) * 2) - var(--tab-gap)) / 2); border-radius:var(--anima-service-before-after-tablist-indicator-radius); background:var(--anima-service-before-after-tablist-indicator-bg); box-shadow:var(--anima-service-before-after-tablist-indicator-shadow); backdrop-filter:var(--anima-service-before-after-tablist-indicator-backdrop); -webkit-backdrop-filter:var(--anima-service-before-after-tablist-indicator-backdrop); pointer-events:none; transition:var(--anima-service-before-after-tablist-indicator-transition); } .beforeAfterTabButtons:has(.beforeAfterTab:nth-child(2).is-active)::before{ transform:translateX(calc(100% + var(--tab-gap))); } .beforeAfterTabs .beforeAfterTab, .beforeAfterTab{ appearance:var(--anima-service-before-after-tab-button-appearance); border:var(--anima-service-before-after-tab-button-border); background:var(--anima-service-before-after-tab-button-bg); position:var(--anima-service-before-after-tab-button-position); z-index:var(--anima-service-before-after-tab-button-z); width:var(--anima-service-before-after-tab-button-width); min-width:var(--anima-service-before-after-tab-button-min-width); min-height:var(--anima-service-before-after-tab-button-min-height); padding:var(--anima-service-before-after-tab-button-padding); border-radius:var(--anima-service-before-after-tab-button-radius); font:var(--anima-service-before-after-tab-button-font); font-size:var(--anima-service-type-before-after-tab-size); line-height:var(--anima-service-type-before-after-tab-line-height); font-weight:var(--anima-service-type-before-after-tab-weight); letter-spacing:var(--anima-service-type-before-after-tab-tracking); text-transform:var(--anima-service-before-after-tab-button-text-transform); color:var(--anima-service-before-after-tab-color) !important; cursor:var(--anima-service-before-after-tab-button-cursor); transition:var(--anima-service-before-after-tab-button-transition); text-align:var(--anima-service-before-after-tab-button-align); white-space:var(--anima-service-before-after-tab-button-white-space); overflow-wrap:var(--anima-service-before-after-tab-button-overflow-wrap); display:var(--anima-service-before-after-tab-button-display); align-items:var(--anima-service-before-after-tab-button-align-items); justify-content:var(--anima-service-before-after-tab-button-justify); box-shadow:var(--anima-service-before-after-tab-button-shadow); } .beforeAfterTabs .beforeAfterTab::after, .beforeAfterTab::after{ content:var(--anima-service-before-after-tab-button-after-content); } .beforeAfterTabs .beforeAfterTab:hover, .beforeAfterTab:hover{ color:var(--anima-service-before-after-tab-color-hover) !important; background:var(--anima-service-before-after-tab-button-hover-bg); transform:var(--anima-service-before-after-tab-button-hover-transform); } .beforeAfterTabs .beforeAfterTab.is-active, .beforeAfterTab.is-active{ color:var(--anima-service-before-after-tab-color-active) !important; background:var(--anima-service-before-after-tab-button-active-bg); box-shadow:var(--anima-service-before-after-tab-button-active-shadow); text-shadow:var(--anima-service-before-after-tab-button-active-text-shadow); } .storyPanel--contraCentered .beforeAfterTabButtons{ margin-top:var(--anima-service-before-after-tablist-contra-margin-top); width:var(--anima-service-before-after-tablist-contra-width); max-width:var(--anima-service-before-after-tablist-contra-max-width); } .storyPanel--contraCentered .beforeAfterTab{ color:var(--anima-service-before-after-tab-color) !important; font-size:var(--anima-service-type-before-after-tab-contra-size); box-shadow:var(--anima-service-before-after-tab-button-shadow); } .storyPanel--contraCentered .beforeAfterTab:hover{ color:var(--anima-service-before-after-tab-color-hover) !important; } .storyPanel--contraCentered .beforeAfterTab.is-active{ color:var(--anima-service-before-after-tab-color-active) !important; box-shadow:var(--anima-service-before-after-tab-button-active-shadow); } @media (max-width:720px){ .beforeAfterTabButtons{ --tab-gap:var(--anima-service-before-after-tablist-mobile-gap); --tab-pad-x:var(--anima-service-before-after-tablist-mobile-pad-x); --tab-pad-y:var(--anima-service-before-after-tablist-mobile-pad-y); grid-column:auto; gap:var(--tab-gap); width:var(--anima-service-before-after-tablist-mobile-width); max-width:var(--anima-service-before-after-tablist-mobile-max-width); padding:var(--tab-pad-y) var(--tab-pad-x); border-radius:var(--anima-service-before-after-tablist-mobile-radius); border:var(--anima-service-before-after-tablist-mobile-border); background:var(--anima-service-before-after-tablist-mobile-bg); box-shadow:var(--anima-service-before-after-tablist-mobile-shadow); } .beforeAfterTabs .beforeAfterTab, .beforeAfterTab{ min-height:var(--anima-service-before-after-tab-button-mobile-min-height); padding:var(--anima-service-before-after-tab-button-mobile-padding); font-size:var(--anima-service-type-before-after-tab-mobile-size); line-height:var(--anima-service-type-before-after-tab-mobile-line-height); font-weight:var(--anima-service-type-before-after-tab-mobile-weight); letter-spacing:var(--anima-service-type-before-after-tab-mobile-tracking); text-transform:var(--anima-service-before-after-tab-button-text-transform); color:var(--anima-service-before-after-tab-mobile-color) !important; } .beforeAfterTabs .beforeAfterTab.is-active, .beforeAfterTab.is-active{ color:var(--anima-service-before-after-tab-mobile-color-active) !important; opacity:var(--anima-service-before-after-tab-button-mobile-active-opacity); } } @media (min-width:1181px){ .storyPanel--expectations .storyPanelBody{ max-width:min(1800px, calc(100vw - 120px)); } .storyPanel--pricingSection .pricingTabButtons{ --pricing-tab-gap:14px; --pricing-tab-pad-x:12px; --pricing-tab-pad-y:8px; position:relative; isolation:isolate; overflow:hidden; gap:var(--pricing-tab-gap); padding:var(--pricing-tab-pad-y) var(--pricing-tab-pad-x); border:1px solid rgba(255,255,255,.32); border-radius:30px; background:linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.09) 100%); box-shadow:0 14px 28px rgba(8,10,14,.08), inset 0 1px 0 rgba(255,255,255,.24); backdrop-filter:saturate(150%) blur(14px); -webkit-backdrop-filter:saturate(150%) blur(14px); } .storyPanel--pricingSection .pricingTabButtons::before{ content:""; position:absolute; z-index:0; top:var(--pricing-tab-pad-y); bottom:var(--pricing-tab-pad-y); left:var(--pricing-tab-pad-x); width:calc((100% - (var(--pricing-tab-pad-x) * 2) - (var(--pricing-tab-gap) * 3)) / 4); border-radius:999px; background:linear-gradient(180deg, rgba(89,79,70,.96) 0%, rgba(66,58,51,.98) 100%); box-shadow:0 10px 22px rgba(47,39,34,.20), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter:saturate(150%) blur(12px); -webkit-backdrop-filter:saturate(150%) blur(12px); pointer-events:none; transition:transform .36s cubic-bezier(.22, 1, .36, 1), background-color .24s ease; } .storyPanel--pricingSection .pricingTabButtons:has(.pricingTab:nth-child(2).is-active)::before{ transform:translateX(calc(100% + var(--pricing-tab-gap))); } .storyPanel--pricingSection .pricingTabButtons:has(.pricingTab:nth-child(3).is-active)::before{ transform:translateX(calc((100% + var(--pricing-tab-gap)) * 2)); } .storyPanel--pricingSection .pricingTabButtons:has(.pricingTab:nth-child(4).is-active)::before{ transform:translateX(calc((100% + var(--pricing-tab-gap)) * 3)); } .storyPanel--pricingSection .pricingTab{ min-height:58px; padding:0 22px; border-radius:999px; border:none; background:transparent; color:rgba(38,38,38,.74); box-shadow:none; font-size:18px; line-height:1.2; font-weight:760; letter-spacing:0; text-transform:none; position:relative; z-index:1; transition:color .24s ease, transform .2s ease; } .storyPanel--pricingSection .pricingTab:hover{ background:transparent; color:rgba(38,38,38,.92); } .storyPanel--pricingSection .pricingTab.is-active{ background:transparent; border-color:transparent; color:#fff; box-shadow:none; } .storyPanel--pricingSection .pricingRowTitle, .storyPanel--pricingSection .pricingPrice{ font-size:var(--anima-service-pricing-title-size); line-height:var(--anima-service-pricing-title-line-height); font-weight:var(--anima-service-pricing-raised-title-weight); letter-spacing:var(--anima-service-pricing-raised-title-letter-spacing); } .storyPanel--pricingSection .pricingAction{ min-height:54px; border:1px solid var(--anima-service-action-raised-border); border-radius:var(--anima-service-action-radius); background:var(--anima-service-action-raised-bg); color:var(--anima-service-action-text); box-shadow:var(--anima-service-action-raised-shadow); backdrop-filter:saturate(150%) blur(12px); -webkit-backdrop-filter:saturate(150%) blur(12px); font-size:16px; line-height:1.1; font-weight:760; } .storyPanel--pricingSection .pricingAction:hover{ background:var(--anima-service-action-raised-bg-hover); border-color:var(--anima-service-action-raised-border-hover); transform:translateY(-1px); } } @media (max-width:720px){ .storyPanel--pricingSection .pricingTabButtons{ --pricing-tab-gap:8px; --pricing-tab-pad-x:6px; --pricing-tab-pad-y:6px; position:relative; isolation:isolate; overflow:hidden; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--pricing-tab-gap); padding:var(--pricing-tab-pad-y) var(--pricing-tab-pad-x); border:1px solid rgba(255,255,255,.32); border-radius:24px; background:linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.09) 100%); box-shadow:0 12px 24px rgba(8,10,14,.08), inset 0 1px 0 rgba(255,255,255,.24); backdrop-filter:saturate(150%) blur(14px); -webkit-backdrop-filter:saturate(150%) blur(14px); } .storyPanel--pricingSection .pricingTabButtons::before{ content:""; position:absolute; z-index:0; top:var(--pricing-tab-pad-y); left:var(--pricing-tab-pad-x); width:calc((100% - (var(--pricing-tab-pad-x) * 2) - var(--pricing-tab-gap)) / 2); height:calc((100% - (var(--pricing-tab-pad-y) * 2) - var(--pricing-tab-gap)) / 2); border-radius:999px; background:linear-gradient(180deg, rgba(89,79,70,.96) 0%, rgba(66,58,51,.98) 100%); box-shadow:0 10px 22px rgba(47,39,34,.20), inset 0 1px 0 rgba(255,255,255,.12); pointer-events:none; transition:transform .36s cubic-bezier(.22, 1, .36, 1), background-color .24s ease; } .storyPanel--pricingSection .pricingTabButtons:has(.pricingTab:nth-child(2).is-active)::before{ transform:translateX(calc(100% + var(--pricing-tab-gap))); } .storyPanel--pricingSection .pricingTabButtons:has(.pricingTab:nth-child(3).is-active)::before{ transform:translateY(calc(100% + var(--pricing-tab-gap))); } .storyPanel--pricingSection .pricingTabButtons:has(.pricingTab:nth-child(4).is-active)::before{ transform:translate(calc(100% + var(--pricing-tab-gap)), calc(100% + var(--pricing-tab-gap))); } .storyPanel--pricingSection .pricingTab{ min-height:52px; padding:10px 8px; border:none; border-radius:999px; background:transparent; box-shadow:none; color:rgba(38,38,38,.74); font-size:15px; line-height:1.08; font-weight:760; letter-spacing:0; text-transform:none; position:relative; z-index:1; transition:color .24s ease, transform .2s ease; } .storyPanel--pricingSection .pricingTab.is-active{ background:transparent; border-color:transparent; box-shadow:none; color:#fff; } .storyPanel--pricingSection .pricingPrice{ font-size:var(--anima-service-pricing-price-compact-size); line-height:var(--anima-service-pricing-price-compact-line-height); font-weight:var(--anima-service-pricing-price-weight); letter-spacing:var(--anima-service-pricing-raised-title-letter-spacing); } .storyPanel--pricingSection .pricingAction{ width:min(100%, 210px); min-width:0; min-height:52px; padding:0 18px; border:1px solid var(--anima-service-action-raised-border); border-radius:var(--anima-service-action-radius); background:var(--anima-service-action-raised-bg); color:var(--anima-service-action-text); box-shadow:var(--anima-service-action-raised-shadow); backdrop-filter:saturate(150%) blur(12px); -webkit-backdrop-filter:saturate(150%) blur(12px); font-size:clamp(15px, 3.8vw, 17px); line-height:1.1; font-weight:760; } .storyPanel--pricingSection .pricingAction:hover{ background:var(--anima-service-action-raised-bg-hover); border-color:var(--anima-service-action-raised-border-hover); } } .storyPanel--benefitsGrid .benefitIcon svg, .storyPanel--benefitsGrid .benefitIcon svg *{ vector-effect:non-scaling-stroke; } .storyPanel--differenceGrid .differenceItem{ grid-template-columns:minmax(0, 1fr); gap:0; } .storyPanel--differenceGrid .differenceIcon{ display:none; } .storyPanel--benefitsGrid .benefitItem{ grid-template-columns:72px minmax(0, 1fr); gap:18px; } .storyPanel--benefitsGrid .benefitIcon{ width:72px; height:72px; border-width:1.5px; } .storyPanel--benefitsGrid .benefitIcon svg{ width:42px; height:42px; } .storyPanel--benefitsGrid .benefitIcon svg, .storyPanel--benefitsGrid .benefitIcon svg *{ stroke-width:1.5; } .storyPanel--featureGallery .storyPanelMiniCard{ display:grid; grid-template-rows:auto auto auto; align-content:end; justify-content:stretch; gap:14px; } .storyPanel--featureGallery .storyPanelMiniCard h3{ min-height:1.12em; align-self:end; } .storyPanel--featureGallery .storyPanelMiniCard p{ min-height:4.5em; align-self:start; } .storyPanel--featureGallery .storyPanelMiniCard::after{ content:none; } .storyPanel--featureGallery, .storyPanel--featureGallery .storyPanelCopy, .storyPanel--featureGallery .storyPanelBody, .storyPanel--featureGallery .storyPanelSplit{ overflow:visible; } .storyPanel--featureGallery .storyPanelCopy{ padding-bottom:clamp(54px, 5vw, 84px); } @media (max-width:720px){ .storyPanel--beforeAfterShowcase .beforeAfterTabs .beforeAfterTab:not(.is-active), .storyPanel--contraCentered .beforeAfterTabs .beforeAfterTab:not(.is-active){ color:var(--anima-service-before-after-tab-mobile-color) !important; } .storyPanel--beforeAfterShowcase .beforeAfterTabs .beforeAfterTab.is-active, .storyPanel--contraCentered .beforeAfterTabs .beforeAfterTab.is-active{ color:var(--anima-service-before-after-tab-mobile-color-active) !important; } } /* Shared layout grid alignment: match index.html boundaries without changing components. */ .storyPanelCopy{ padding-left:var(--content-grid-inset); padding-right:var(--content-grid-inset); } .storyPanel--centerIntro .storyPanelBody, .storyPanel--heroBridge .storyPanelBody, .storyPanel--beforeAfterShowcase .storyPanelBody, .storyPanel--pricingSection .storyPanelBody, .storyPanel--expectations .storyPanelBody, .storyPanel--careGuide .storyPanelBody, .storyPanel--taupeExplain .storyPanelBody{ width:100%; max-width:var(--content-max-width); } .pricingIntro, .pricingTabs, .expectationsIntro, .faqSectionInner{ max-width:var(--content-max-width); } .beforeAfterTabs{ width:var(--anima-service-before-after-content-tabs-aligned-width); max-width:var(--anima-service-before-after-content-tabs-aligned-max-width); } @media (max-width:920px){ .storyPanelCopy{ padding-left:var(--page-padding-x); padding-right:var(--page-padding-x); } .careGuideCards{ padding-left:var(--page-padding-x); padding-right:var(--page-padding-x); scroll-padding-left:var(--page-padding-x); } .scrollNav{ padding-right:var(--page-padding-x); } }