/* Cosmetic & dermatology clinics page (2026-10-01), rebuilt from the live sekhn.com page in the V3 look. A full-bleed
   photo hero with a frosted white glass panel, a signature card that rewrites her own example compliantly, a soft lime
   panel for the reasons, and the services as two sideways rows. Loaded after v3.css and ind.css and only by this page.
   Class prefix cd-. 2026-10-03: brought onto the homepage palette and type scale (ind.css tokens); the blush tint and
   the page's own teals are gone, photos take the homepage teal scrim and grain. */

/* film grain: the same monochrome noise as the homepage photo tiles, on top of a .cd-grain block */
.cd-grain{position:relative;isolation:isolate}
.cd-grain::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;opacity:var(--gr,.55);mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/180px 180px}
@keyframes cd-drift{from{transform:scale(1)}to{transform:scale(1.07) translate(-1.2%,.8%)}}
.cd-hph,.cd-sph,.cd-stph,.cd-thph{position:absolute;inset:-4%;z-index:-2;background:50% 50%/cover no-repeat}
.js .cd-hph,.js .cd-stph,.js .cd-thph{animation:cd-drift 40s ease-in-out infinite alternate}
.cd-still .cd-hph,.cd-still .cd-stph,.cd-still .cd-thph{animation-play-state:paused}

/* ---- nav over the photo: white text and a pale lime call button until the page scrolls or a menu opens, when the
   bar frosts white and the shared dark styling returns ---- */
.cdp .nbar .logo,.cdp .nmenu{transition:color .3s,background .3s}
.cdp .nav:not(.scrolled):not(.open) .nbar .logo{color:#fff}
.cdp .nav:not(.scrolled):not(.open) .nlink{color:rgba(255,255,255,.92)}
.cdp .nav:not(.scrolled):not(.open) .nlink:hover{background:rgba(255,255,255,.14);color:#fff}
.cdp .nav:not(.scrolled):not(.open) .nbtn.dark{background:#E3F08C;color:#0E3A1F}
.cdp .nav:not(.scrolled):not(.open) .nbtn.dark:hover{box-shadow:0 8px 20px rgba(var(--s-teal),.3)}
.cdp .nav:not(.scrolled):not(.open) .nmenu{background:rgba(255,255,255,.18);color:#fff}

/* ---- 1. hero: full-bleed photo, the homepage teal scrim heaviest on the left and along the top (for the menu), grain,
   and a large frosted white glass panel with her headline (sized by ind.css) ---- */
.cd-hero{min-height:clamp(600px,100svh,920px);justify-content:center;padding:calc(64px + clamp(1.5rem,5vh,3rem)) 0 clamp(2.5rem,7vh,4rem);
  background:#16485A;border-radius:0 0 clamp(22px,3vw,36px) clamp(22px,3vw,36px);--gr:.6}
.cd-hph{background-image:url(img/cd-cover.jpg);background-position:62% 46%}
.cd-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(180deg,rgba(var(--s-teal),.55) 0,rgba(var(--s-teal),0) 170px),
  linear-gradient(90deg,rgba(var(--s-teal),.72) 0%,rgba(var(--s-teal),.5) 32%,rgba(var(--s-teal),.16) 64%,rgba(var(--s-teal),.04) 100%)}
.cd-hero>.wrap{position:relative;z-index:1;width:100%}
.cd-glass{max-width:640px;display:grid;gap:1.15rem;justify-items:start;padding:clamp(1.6rem,3.6vw,3rem);border-radius:28px;
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.92);
  backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 34px 90px rgba(var(--s-teal),.3),inset 0 1px 0 #fff}
.cd-glass .crumb{margin:0;color:var(--ink2)}
.cd-glass .lede{color:var(--ink2);line-height:1.65;max-width:52ch}
.cd-glass .btn{margin-top:.35rem}
.js .cd-glass>*{animation:rise 1s var(--ease) both}
.js .cd-glass>:nth-child(2){animation-delay:.08s}.js .cd-glass>:nth-child(3){animation-delay:.16s}.js .cd-glass>:nth-child(4){animation-delay:.24s}

/* ---- 2. problem: heading and signature card left, her four points as a list right, the admin point as a strip ---- */
.cd-pgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,4.6vw,4.2rem);align-items:stretch}
.cd-pleft{display:flex;flex-direction:column;gap:clamp(1.4rem,3.4vh,2.1rem)}
.cd-pleft h2{max-width:18ch}

/* the signature card: a frosted card on a close crop of the petals under a light teal scrim */
.cd-sig{flex:1;min-height:330px;border-radius:28px;overflow:hidden;display:grid;place-items:center;padding:clamp(.9rem,1.8vw,1.4rem);background:#16485A;
  box-shadow:0 30px 70px rgba(34,53,42,.14);--gr:.5}
.cd-sph{background-image:url(img/cd-card.jpg)}
.cd-sig::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(200deg,rgba(var(--s-teal),.06) 0%,rgba(var(--s-teal),.24) 100%)}
.cd-card{position:relative;z-index:1;width:100%;max-width:470px;display:grid;gap:1.15rem;padding:clamp(1.35rem,2.6vw,2rem) clamp(1.2rem,2.4vw,1.9rem);border-radius:22px;
  background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.92);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 22px 50px rgba(34,53,42,.14),inset 0 1px 0 #fff}
.cd-line{display:flex;align-items:flex-start;gap:.8rem}
.cd-mk{flex:none;width:30px;height:30px;margin-top:.08em;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.cd-mk.no{stroke:rgba(34,53,42,.4)}
.cd-mk.ok circle{fill:#EEF5DF;stroke:#3F5C3B}
.cd-mk.ok path{stroke:#0E3A1F;stroke-width:2.2;stroke-dasharray:1;stroke-dashoffset:0}
.cd-tx{position:relative;min-width:0}
.cd-ph{font:600 clamp(1.3rem,2vw,1.62rem)/1.2 var(--display);letter-spacing:-.03em;color:var(--ink)}
.cd-old .cd-ph{white-space:nowrap;color:#6B7266;opacity:.45;display:inline-block}
.cd-strike{position:absolute;left:-4%;width:108%;top:52%;height:14px;transform:translateY(-50%);overflow:visible;pointer-events:none}
.cd-strike path{fill:none;stroke:#0E3A1F;stroke-width:2.3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.cd-new .cd-ph{color:#0E3A1F;padding:0 .06em;background:linear-gradient(#C6E57C,#C6E57C) no-repeat 0 88%/100% 36%}
.cd-wd{white-space:nowrap}
.cd-cap{padding-top:1rem;border-top:1px solid rgba(34,53,42,.1);font-size:.88rem;line-height:1.45;color:var(--muted)}
/* the loop: ten seconds. Strike draws, old words fade back, new words write in letter by letter, the highlighter sweeps
   under them, the tick draws; a long hold, then it all clears and starts again. Paused unless .run (on screen). */
.cd-anim{--ps:paused}
.cd-anim.run{--ps:running}
.cd-anim .cd-strike path{animation:cd-strike 10s var(--ease) infinite both;animation-play-state:var(--ps)}
.cd-anim .cd-old .cd-ph{animation:cd-old 10s ease infinite both;animation-play-state:var(--ps)}
.cd-anim .cd-l{display:inline-block;animation:cd-write 10s var(--ease) infinite both;animation-delay:calc(var(--i) * 45ms);animation-play-state:var(--ps)}
.cd-anim .cd-new .cd-ph{animation:cd-new 10s var(--ease) infinite both;animation-play-state:var(--ps)}
.cd-anim .cd-mk.ok path{animation:cd-tick 10s var(--ease) infinite both;animation-play-state:var(--ps)}
@keyframes cd-strike{0%,7%{stroke-dashoffset:1;opacity:0}7.5%{stroke-dashoffset:1;opacity:1}16%,87%{stroke-dashoffset:0;opacity:1}93%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes cd-old{0%,15%{opacity:1;color:#22271F}25%,87%{opacity:.45;color:#6B7266}94%,100%{opacity:1;color:#22271F}}
@keyframes cd-write{0%,21%{opacity:0;transform:translateY(.22em);filter:blur(5px)}27%,100%{opacity:1;transform:none;filter:blur(0)}}
/* the new words clear together: their line fades out at the end of the loop and comes back just before they rewrite */
@keyframes cd-new{0%,19%{opacity:0;background-size:0% 36%}20%,44%{opacity:1;background-size:0% 36%}56%,86%{opacity:1;background-size:100% 36%}91%,100%{opacity:0;background-size:100% 36%}}
@keyframes cd-tick{0%,55%{stroke-dashoffset:1;opacity:0}55.5%{stroke-dashoffset:1;opacity:1}62%,86%{stroke-dashoffset:0;opacity:1}91%,100%{stroke-dashoffset:0;opacity:0}}

/* her four points: icon, title, description, hairlines between */
.cd-list{list-style:none;margin:0;padding:0;display:grid;align-content:start}
.cd-list li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:1.1rem;padding:clamp(.95rem,2.4vh,1.3rem) 0}
.cd-list li:first-child{padding-top:.2rem}
.cd-list li:last-child{padding-bottom:0}
.cd-list li+li{border-top:1px solid rgba(34,53,42,.11)}
.cd-list .ico,.cd-strip .ico,.cd-reason .ico,.cd-scard .ico{display:grid;place-items:center;border-radius:50%;flex:none}
.cd-list .ico{width:42px;height:42px;background:var(--i-limesoft);color:var(--i-mid)}
.cd-list .ico .ic{width:19px;height:19px}
.cd-list h3{font-size:var(--i-t2);line-height:1.25;letter-spacing:-.02em;color:var(--i-title);margin:.45rem 0 .35rem}
.cd-list p{font-size:var(--i-body);line-height:1.55;color:var(--i-text);max-width:62ch}

/* the fifth point: a photo strip across the full width under the homepage teal scrim, heaviest on the left, bubbles
   drawn on the right */
.cd-strip{margin-top:clamp(2rem,5vh,3rem);border-radius:26px;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.2rem clamp(1.3rem,3vw,2.2rem);
  min-height:170px;padding:clamp(1.6rem,3.4vw,2.3rem) clamp(1.5rem,3.8vw,2.9rem);background:#16485A;color:#fff;--gr:.62;box-shadow:0 26px 60px rgba(var(--s-teal),.16)}
.cd-stph{background-image:url(img/cd-band.jpg);background-position:60% 50%}
.cd-strip::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(var(--s-teal),.82) 0%,rgba(var(--s-teal),.62) 42%,rgba(var(--s-teal),.3) 72%,rgba(var(--s-teal),.42) 100%)}
.cd-strip>:not(.cd-stph){position:relative;z-index:1}
.cd-strip .ico{width:48px;height:48px;background:rgba(255,255,255,.12);color:var(--i-teallight);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cd-strip .ico .ic{width:21px;height:21px}
.cd-sttext{display:grid;gap:.4rem}
.cd-strip h3{color:var(--i-title-on);font-size:var(--i-t1);letter-spacing:-.02em;text-shadow:0 2px 18px rgba(var(--s-teal),.3)}
.cd-strip p{color:var(--i-text-on);font-size:var(--i-copy);line-height:1.6;max-width:64ch;text-shadow:0 1px 12px rgba(var(--s-teal),.3)}
.cd-bub{width:clamp(170px,17vw,230px);height:auto;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.cd-bub path{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.3s var(--ease)}
.cd-bub .b2,.cd-bub .b2l{opacity:.62}
.cd-bub .b3{opacity:.34}
.cd-bub .b1l,.cd-bub .b2l{stroke:#A6D6D8}
.cd-bub .b3d circle{fill:#fff;stroke:none;opacity:.34}
.cd-draw:not(.drawn) .cd-bub path{stroke-dashoffset:1}
.cd-draw .cd-bub .b2,.cd-draw .cd-bub .b2l{transition-delay:.35s}
.cd-draw .cd-bub .b3{transition-delay:.7s}
.cd-draw .cd-bub .b1l{transition-delay:.25s}
.cd-draw .cd-bub .b3d circle{animation:cd-dot 2.4s ease-in-out infinite both}
.cd-draw .cd-bub .b3d circle:nth-child(2){animation-delay:.3s}.cd-draw .cd-bub .b3d circle:nth-child(3){animation-delay:.6s}
.cd-still.cd-draw .cd-bub .b3d circle{animation-play-state:paused}
@keyframes cd-dot{0%,100%{opacity:.2}40%{opacity:.6}}

/* ---- 3. why SEKHN: a large rounded grainy panel in the homepage's soft lime tint; centred heading, her two lines and
   her four reasons (icon and heading only) as a two by two, quartered by hairlines ---- */
.cd-why{border-radius:28px;overflow:hidden;padding:clamp(2.2rem,5.5vh,3.6rem) clamp(1.3rem,4.5vw,4rem) clamp(1.6rem,3.8vh,2.6rem);
  background:var(--g-cream);--gr:.3;box-shadow:0 18px 44px rgba(34,53,42,.06)}
.cd-why>*{position:relative;z-index:1}
.cd-why .shead{max-width:840px;gap:.6rem;margin-bottom:clamp(1.2rem,3vh,1.9rem)}
.cd-why .shead .lede{max-width:62ch}
.cd-reasons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;margin:0 auto}
.cd-reasons::before,.cd-reasons::after{content:"";position:absolute;pointer-events:none}
.cd-reasons::before{left:50%;top:0;bottom:0;width:1px;background:linear-gradient(180deg,rgba(34,53,42,0),rgba(34,53,42,.13) 22%,rgba(34,53,42,.13) 78%,rgba(34,53,42,0))}
.cd-reasons::after{top:50%;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(34,53,42,0),rgba(34,53,42,.13) 18%,rgba(34,53,42,.13) 82%,rgba(34,53,42,0))}
.cd-reason{display:flex;align-items:center;justify-content:center;gap:.85rem;padding:clamp(1rem,2.6vh,1.45rem) clamp(.8rem,2.4vw,1.6rem)}
.cd-reason .ico{width:44px;height:44px;background:#fff;color:var(--i-mid);border:1px solid rgba(255,255,255,.92);box-shadow:0 8px 20px rgba(34,53,42,.08),inset 0 1px 0 #fff}
.cd-reason .ico .ic{width:20px;height:20px}
.cd-reason h3{font-size:var(--i-t2);line-height:1.25;letter-spacing:-.02em;color:var(--i-title)}

/* ---- 4. services: the homepage band (lime > yellow > teal); each pillar a header (title, intro, measured-on line,
   arrows) over a sideways row of white glass cards ---- */
.cd-svc{background:var(--g-band);--gr:.35}
.cd-svc>.wrap{position:relative;z-index:1}
.cd-svc .shead.left{margin-bottom:clamp(1.3rem,3.4vh,2rem)}
.cd-group+.cd-group{margin-top:clamp(1.8rem,4.4vh,2.8rem);padding-top:clamp(1.8rem,4.4vh,2.6rem);border-top:1px solid rgba(34,53,42,.12)}
.cd-ghead{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:1.2rem}
.cd-gtext{display:grid;gap:.4rem;justify-items:start}
.cd-gtext h3{font-size:var(--i-t1);letter-spacing:-.02em;color:var(--i-title)}
.cd-gtext p{font-size:var(--i-copy);color:var(--i-text)}
.cd-mt{display:inline-flex;gap:.45rem;align-items:center;font-size:.88rem;color:var(--ink2)}
.cd-mt .ic{width:15px;height:15px;color:var(--i-mid)}
.cd-group.ai .cd-mt .ic{color:var(--i-teal2)}
.cd-arrows{display:flex;gap:.5rem;flex:none}
.cd-arrows[hidden]{display:none}
.cd-arr{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;color:#0E3A1F;
  background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.92);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 8px 22px rgba(34,53,42,.1),inset 0 1px 0 #fff;transition:background .2s,transform .2s var(--ease),opacity .2s}
.cd-arr:hover{background:#fff;transform:translateY(-1px)}
.cd-arr .ic{width:18px;height:18px;stroke-width:2}
.cd-arr[aria-disabled="true"]{opacity:.38;cursor:default;transform:none}
.cd-row{--g:.9rem;display:flex;gap:var(--g);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin:-14px -26px -56px;padding:14px 26px 56px;scroll-padding-inline:26px}
.cd-row::-webkit-scrollbar{display:none}
.cd-row:focus-visible{outline-offset:-6px;border-radius:24px}
.cd-scard{flex:0 0 calc((100% - 3 * var(--g)) / 4);scroll-snap-align:start;display:flex;flex-direction:column;gap:.5rem;padding:1.3rem 1.25rem 1.3rem;border-radius:22px;
  background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.92);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 18px 44px rgba(34,53,42,.09),inset 0 1px 0 #fff}
.cd-scard .ico{width:40px;height:40px;margin-bottom:.2rem;background:var(--i-limesoft);color:var(--i-mid)}
.cd-group.ai .cd-scard .ico{background:var(--i-tealsoft);color:var(--i-teal2)}
.cd-scard .ico .ic{width:20px;height:20px}
.cd-scard h4{margin:0;font-family:var(--display);font-weight:600;font-size:var(--i-t2);line-height:1.22;letter-spacing:-.02em;color:var(--i-title);text-wrap:balance}
.cd-scard p{font-size:var(--i-body);line-height:1.55;color:var(--i-text)}
.cd-scard ul{list-style:none;margin:.25rem 0 0;padding:.8rem 0 0;border-top:1px solid rgba(34,53,42,.1);display:grid;gap:.45rem}
.cd-scard li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:.5rem;font-size:var(--i-li);line-height:1.45;color:var(--i-list)}
.cd-scard li::before{content:"";width:14px;height:14px;margin-top:.17em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F5C3B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E") center/contain no-repeat}
.cd-group.ai .cd-scard li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6577' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E")}
.cd-cta{display:flex;justify-content:center;margin-top:clamp(2rem,5vh,2.8rem)}
.cd-cta .btn{min-width:min(340px,100%);justify-content:center;padding:.95rem 2.6rem}

/* ---- 5. her closing paragraphs, centred, under a slim drifting strip of the photo (teal scrim and grain) ---- */
.cd-thin{height:clamp(44px,5vw,64px);border-radius:999px;overflow:hidden;margin:0 auto clamp(1.8rem,4.5vh,2.6rem);max-width:880px;background:#16485A;--gr:.55}
.cd-thph{background-image:url(img/cd-close.jpg);background-position:50% 40%;filter:saturate(.9)}
.cd-thin::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(var(--s-teal),.42),rgba(var(--s-teal),.16) 45%,rgba(var(--s-teal),.38))}
.cd-copy{max-width:780px;margin:0 auto;display:grid;gap:1rem;text-align:center}
.cd-copy p{font-size:var(--i-copy);color:var(--i-text);line-height:1.7}

/* ---- tablets: the problem split stacks; service rows show two and a half cards and scroll ---- */
@media (max-width:1100px){
  .cd-scard{flex-basis:calc((100% - 2 * var(--g)) / 2.55)}
}
@media (max-width:960px){
  .cd-pgrid{grid-template-columns:1fr}
  .cd-pleft h2{max-width:22ch}
  .cd-sig{min-height:300px}
  .cd-card{max-width:520px}
}
/* ---- phones ---- */
@media (max-width:860px){
  .cd-hero{min-height:clamp(620px,100svh,860px);justify-content:flex-end;padding:calc(64px + 9rem) 0 1.1rem;border-radius:0 0 26px 26px}
  .cd-hph{background-position:84% 50%}
  .cd-hero::before{background:linear-gradient(180deg,rgba(var(--s-teal),.55) 0,rgba(var(--s-teal),0) 150px),linear-gradient(0deg,rgba(var(--s-teal),.5) 0%,rgba(var(--s-teal),.12) 60%)}
  .cd-glass{gap:.9rem;padding:1.4rem 1.25rem 1.5rem;border-radius:24px}
  .cd-glass .lede{line-height:1.6}
  .cd-glass .btn{align-self:stretch;justify-content:center;width:100%}
  .cd-sig{min-height:0;aspect-ratio:auto;padding:1.4rem .9rem}
  .cd-list li{grid-template-columns:38px minmax(0,1fr);gap:.9rem;padding:1.15rem 0}
  .cd-list .ico{width:38px;height:38px}
  .cd-list h3{margin-top:.3rem}
  .cd-strip{grid-template-columns:1fr;gap:.9rem;padding:1.6rem 1.35rem}
  .cd-strip::before{background:linear-gradient(180deg,rgba(var(--s-teal),.55) 0%,rgba(var(--s-teal),.78) 100%)}
  .cd-bub{display:none}
  .cd-why{border-radius:26px}
  .cd-reasons{grid-template-columns:1fr;border-top:1px solid rgba(34,53,42,.1)}
  .cd-reasons::before{display:none}
  .cd-reasons::after{display:none}
  .cd-reason{justify-content:flex-start;gap:.8rem;padding:.8rem .2rem}
  .cd-reason+.cd-reason{border-top:1px solid rgba(34,53,42,.1)}
  .cd-reason .ico{width:40px;height:40px}
  .cd-ghead{align-items:flex-start}
  .cd-arrows{margin-top:.1rem}
  .cd-arr{width:40px;height:40px}
  .cd-row{margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);scroll-padding-inline:var(--pad)}
  .cd-scard{flex-basis:84%}
  .cd-thin{height:52px}
}
@media (prefers-reduced-motion:reduce){
  .js .cd-hph,.js .cd-stph,.js .cd-thph,.js .cd-glass>*{animation:none!important}
  .cd-bub path{transition:none}
}