/* Dental clinics page (2026-10-01), rebuilt from the live sekhn.com page in the V3 look. Theme: patients choosing on
   Google Maps in under 30 seconds, so the signature graphic is a line-drawn search, pin and booking. Loaded after
   v3.css and ind.css and only by this page. Every class here starts with dn-. Since 2026-10-03 the type sizes and
   colours come from the homepage through the ind.css tokens and gradients. */

/* film grain, the same monochrome noise as the homepage tiles; sits on top of a .dn-grain block */
.dn-grain{position:relative;isolation:isolate}
.dn-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}

/* line drawings: every stroke marked .dr has pathLength 1, so one dash covers it and the offset draws it in */
.dnp .dr{stroke-dasharray:1 1;stroke-dashoffset:0}
@keyframes dnDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes dnFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes dnIn{to{opacity:1}}
@keyframes dnDrift{from{transform:scale(1.03) translate(-1.4%,0)}to{transform:scale(1.08) translate(1.4%,.6%)}}

/* ---- hero and problem sit on the homepage .flow gradient (v3.css) ---- */

/* hero: her headline left, the journey card right; faint map lines run behind the card so its glass has something to blur */
.dn-hero{min-height:0;padding-top:calc(64px + clamp(2.5rem,8vh,5rem));padding-bottom:clamp(2.5rem,7vh,4.5rem)}
.dn-hero>.wrap{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;width:100%}
.dn-hmap{position:absolute;top:0;right:0;width:62%;height:100%;z-index:-1;pointer-events:none;fill:none;stroke:rgba(22,72,90,.16);stroke-width:1.3;stroke-linecap:round;
  -webkit-mask-image:radial-gradient(70% 70% at 62% 52%,#000 25%,transparent 78%);mask-image:radial-gradient(70% 70% at 62% 52%,#000 25%,transparent 78%)}
.dn-hmap circle{stroke-dasharray:3 7}
.dn-htext{display:grid;gap:1.25rem;justify-items:start}
.dn-htext .crumb{margin:0;color:var(--ink2)}
.dn-htext h1{max-width:none}
.dn-htext .lede{color:var(--ink2);max-width:54ch;line-height:1.65}
.dn-htext .btn{margin-top:.3rem}

/* the journey card */
.dn-jcard{justify-self:end;width:100%;max-width:470px;padding:1.3rem 1.3rem 1rem;border-radius:28px;
  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}
.dn-jsvg{display:block;width:100%;height:auto;overflow:visible}
.dn-roads path{fill:none;stroke:rgba(22,72,90,.3);stroke-width:1.4;stroke-linecap:round}
.dn-rad{fill:rgba(42,120,145,.07);stroke:#2A7891;stroke-width:1.3;stroke-dasharray:3 6;opacity:.7;transform-box:fill-box;transform-origin:center}
.dn-flowl{fill:none;stroke:#1E6577;stroke-width:2.2;stroke-linecap:round}
.dn-line{fill:none;stroke:#0E3A1F;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dn-tick{fill:none;stroke:#1E6577;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.dn-pillbg{fill:rgba(255,255,255,.88)}
.dn-calbg{fill:rgba(255,255,255,.9)}
.dn-jq{font:500 17px var(--sans);fill:var(--ink);letter-spacing:-.01em}
.dn-jcaret{fill:#1E6577;opacity:0}
.dn-pin path{fill:#1F4A31}
.dn-pin circle{fill:#E3F08C}
.dn-pin,.dn-pinsh{transform-box:fill-box;transform-origin:50% 100%}
.dn-pinsh{fill:rgba(14,58,31,.22);transform-origin:center}
.dn-timer{display:flex;align-items:center;gap:.7rem;margin-top:.7rem;padding-top:.85rem;border-top:1px solid rgba(34,53,42,.1)}
.dn-timer svg{width:34px;height:34px;transform:rotate(-90deg);flex:none}
.dn-timer circle{fill:none;stroke-width:3;stroke-linecap:round}
.dn-ttrk{stroke:rgba(22,72,90,.14)}
.dn-tarc{stroke:#1E6577;stroke-dasharray:1 1}
.dn-tlab{font-family:var(--display);font-weight:600;font-size:1.2rem;letter-spacing:-.02em;color:#0E3A1F}
.dn-tnum{display:inline-block;min-width:2ch;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
/* the sequence: hidden until the card plays (.go); with no script or reduced motion (.done) the finished picture shows */
.js .dn-j:not(.done) .dr,.js .dn-j:not(.done) .dn-tarc{stroke-dashoffset:1}
.js .dn-j:not(.done) .dn-pillbg,.js .dn-j:not(.done) .dn-calbg,.js .dn-j:not(.done) .dn-pin,.js .dn-j:not(.done) .dn-pinsh,.js .dn-j:not(.done) .dn-rad{opacity:0}
.dn-j.go .dr{animation:dnDraw var(--d,.9s) var(--ease) var(--t,0s) forwards}
.dn-j.go .dn-tarc{animation:dnDraw 2.5s linear .9s forwards}
.dn-j.go .dn-pillbg{animation:dnIn .6s var(--ease) .5s forwards}
.dn-j.go .dn-calbg{animation:dnIn .5s var(--ease) 4.05s forwards}
.dn-j.go .dn-pin{animation:dnDrop .7s cubic-bezier(.34,1.45,.6,1) 2.85s forwards}
.dn-j.go .dn-pinsh{animation:dnShadow .7s var(--ease) 2.95s forwards}
.dn-j.go .dn-rad{animation:dnRing 1s var(--ease) 3.3s forwards}
.dn-j.go:not(.typed) .dn-jcaret{animation:dnBlink 1s steps(1) .85s infinite}
@keyframes dnDrop{from{opacity:0;transform:translateY(-46px)}35%{opacity:1}to{opacity:1;transform:none}}
@keyframes dnShadow{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
@keyframes dnRing{from{opacity:0;transform:scale(.45)}to{opacity:.7;transform:none}}
@keyframes dnBlink{0%{opacity:1}50%{opacity:0}}

/* ---- problem: five tiles in a row; the open one widens (flex-grow) like the homepage stage tiles. Titles sit at the top,
   drawings at the foot, and the description appears under the title at its final width, so nothing reflows or jumps.
   Every title is a card title (--i-t2), open or not, so a title never changes size as the tiles take turns. ---- */
.dn-prob{padding-top:clamp(1.5rem,4vh,3rem)}
.dn-prob .shead{max-width:1000px}
.dn-tiles{--g:2.6;--gap:.8rem;--px:1.15rem;list-style:none;margin:0;padding:0;display:flex;gap:var(--gap);container-type:inline-size}
.dn-tile{--fg:#0E3A1F;--fg2:rgba(14,58,31,.82);--gc:#1F4A31;position:relative;overflow:hidden;flex:1 1 0;min-width:0;height:400px;border-radius:22px;
  padding:1.55rem var(--px) 1.5rem;display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center;color:var(--fg);cursor:pointer;
  box-shadow:0 18px 40px rgba(34,53,42,.10);transition:flex-grow .7s var(--ease),box-shadow .5s var(--ease)}
.dn-tile>:not(.dn-ph){position:relative;z-index:1}
.dn-tile.on{flex-grow:var(--g);cursor:default;box-shadow:0 26px 60px rgba(34,53,42,.18)}
.dn-tile h3{width:100%;font-size:var(--i-t2);line-height:1.24;letter-spacing:-.02em;color:var(--fg)}
.dn-tb{appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit;text-align:inherit;cursor:inherit;text-wrap:balance}
.dn-tb:focus-visible{outline:2px solid currentColor;outline-offset:5px;border-radius:6px}
.dn-pd{display:none;flex:none;font-size:var(--i-body);line-height:1.55;color:var(--fg2);
  width:calc((100cqw - 4 * var(--gap) - 10 * var(--px)) * var(--g) / (var(--g) + 4))}
.dn-tile.on .dn-pd{display:block;animation:dnFade .5s var(--ease) .26s both}
.dn-gx{margin-top:auto;display:grid;place-items:center;flex:none;color:var(--gc)}
.dn-gx svg{width:76px;height:76px;fill:none;stroke:currentColor;stroke-width:.62;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.js .dn-tiles:not(.dn-seen) .dn-tile.on .dr{stroke-dashoffset:1}
.dn-tile.dn-draw .dr{animation:dnDraw 1.3s var(--ease) both}
.dn-tile.dn-draw .dr:nth-child(2){animation-delay:.18s}
.dn-tile.dn-draw .dr:nth-child(3){animation-delay:.36s}
/* surfaces, the homepage stage tiles': lime (Strategy), the sea photo on teal (Deploy) under a teal scrim, the soft lime
   tint, white glass and forest (Build). Deep-forest text on the lime and tint, white on the teal and forest. */
.dn-tile.t-lime{--gr:.5;background:var(--g-lime);box-shadow:0 18px 40px rgba(34,53,42,.10),inset 0 0 0 1px rgba(255,255,255,.45)}
.dn-tile.t-lime.on{box-shadow:0 26px 60px rgba(34,53,42,.18),inset 0 0 0 1px rgba(255,255,255,.45)}
.dn-tile.t-sea{--fg:#fff;--fg2:var(--i-text-on);--gc:#A6D6D8;--gr:.6;background:var(--g-teal)}
.dn-tile.t-sea .dn-ph{position:absolute;inset:-4%;z-index:-2;background:url(img/dn-tile.jpg) 50% 50%/cover no-repeat}
.dn-tile.t-sea::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(var(--s-teal),.62) 0%,rgba(var(--s-teal),.42) 38%,rgba(var(--s-teal),.12) 64%,rgba(var(--s-teal),.4) 100%)}
.dn-tile.t-sea h3,.dn-tile.t-sea .dn-pd{text-shadow:0 1px 14px rgba(var(--s-teal),.35)}
.js .dn-tiles .t-sea .dn-ph{animation:dnDrift 34s ease-in-out infinite alternate;animation-play-state:paused}
.js .dn-tiles.dn-live .t-sea .dn-ph{animation-play-state:running}
.dn-tile.t-yel{--gr:.5;--gc:#3F5C3B;background:var(--g-cream);box-shadow:0 18px 40px rgba(34,53,42,.10),inset 0 0 0 1px rgba(255,255,255,.6)}
.dn-tile.t-yel.on{box-shadow:0 26px 60px rgba(34,53,42,.18),inset 0 0 0 1px rgba(255,255,255,.6)}
.dn-tile.t-glass{--fg:var(--i-title);--fg2:var(--i-text);--gr:.3;--gc:#1E6577;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}
.dn-tile.t-glass.on{box-shadow:0 26px 60px rgba(34,53,42,.14),inset 0 1px 0 #fff}
.dn-tile.t-forest{--fg:#fff;--fg2:var(--i-text-on);--gc:#C6E57C;--gr:.32;background:var(--g-forest)}

/* ---- why SEKHN: centred heading and intro, the four reasons as compact glass cards (icon over heading, no
   description), then the shoreline strip ---- */
.dn-why .shead{max-width:780px}
.dn-why .shead .lede{max-width:66ch}
.dn-reasons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.7rem,1.4vw,1rem)}
.dn-reason{display:grid;justify-items:center;align-content:center;text-align:center;gap:.8rem;padding:1.35rem 1rem 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}
.dn-ri{width:46px;height:46px;border-radius:50%;background:#EEF5DF;color:#3F5C3B;display:grid;place-items:center}
.dn-ri svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dn-reason h3{font-size:var(--i-t2);line-height:1.25;letter-spacing:-.02em;color:var(--i-title)}
.js .dn-reasons:not(.dn-in) .dr{stroke-dashoffset:1}
.dn-reasons.dn-in .dr{animation:dnDraw 1.3s var(--ease) both}
.dn-reasons.dn-in .dr:nth-child(2){animation-delay:.25s}
.dn-reasons.dn-in .dr:nth-child(3){animation-delay:.4s}
.dn-reasons.dn-in .dn-reason:nth-child(2) .dr{animation-delay:.15s}
.dn-reasons.dn-in .dn-reason:nth-child(2) .dr:nth-child(2){animation-delay:.4s}
.dn-reasons.dn-in .dn-reason:nth-child(3) .dr{animation-delay:.3s}
.dn-reasons.dn-in .dn-reason:nth-child(4) .dr{animation-delay:.45s}
.dn-reasons.dn-in .dn-reason:nth-child(4) .dr:nth-child(2){animation-delay:.6s}
.dn-reasons.dn-in .dn-reason:nth-child(4) .dr:nth-child(3){animation-delay:.75s}
.dn-pano{--gr:.6;margin-top:clamp(2.4rem,6vh,3.6rem);height:clamp(160px,18vw,250px);border-radius:28px;overflow:hidden;background:var(--i-teal3);box-shadow:0 30px 70px rgba(34,53,42,.14)}
.dn-pano .dn-ph{position:absolute;inset:-5%;z-index:-2;background:url(img/dn-pano.jpg) 50% 45%/cover no-repeat}
.dn-pano::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(var(--s-teal),.34) 0%,rgba(var(--s-teal),.16) 50%,rgba(var(--s-teal),.34) 100%)}
.js .dn-pano .dn-ph{animation:dnDrift 44s ease-in-out infinite alternate;animation-play-state:paused}
.js .dn-pano.dn-live .dn-ph{animation-play-state:running}

/* ---- services: the homepage band (lime > yellow > teal) with grain. Left, the two groups and their rows; right, one
   sticky glass panel. All eight panels share one grid cell, so the panel always holds the tallest and nothing jumps. ---- */
.dn-svc{--gr:.35;background:var(--g-band)}
.dn-svc>.wrap{position:relative;z-index:1}
.dn-md{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(2rem,4.5vw,4.5rem);align-items:start}
.dn-list h2{margin-bottom:clamp(1rem,2.6vh,1.5rem)}
.dn-grp+.dn-grp{margin-top:clamp(1.2rem,3vh,1.7rem)}
.dn-gh{font-size:var(--i-t1);letter-spacing:-.02em;color:var(--i-title)}
.dn-gi{font-size:var(--i-body);line-height:1.5;color:var(--i-text);margin-top:.3rem;max-width:56ch}
.dn-gm{display:inline-flex;align-items:center;gap:.45rem;margin-top:.35rem;font-size:.84rem;color:var(--green)}
.dn-gm .ic{width:15px;height:15px}
.dn-grp.ai .dn-gm{color:#1E6577}
.dn-rows{list-style:none;margin:.65rem 0 0 -.5rem;padding:0;display:grid;gap:2px}
.dn-row{width:100%;display:flex;align-items:center;gap:.75rem;padding:.4rem .7rem .4rem .5rem;border:0;border-radius:14px;background:transparent;
  font:600 var(--i-t2)/1.3 var(--display);letter-spacing:-.02em;color:var(--i-title);text-align:left;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.dn-row:hover{background:rgba(255,255,255,.42)}
.dn-row[aria-expanded="true"]{background:rgba(255,255,255,.8);box-shadow:0 8px 22px rgba(34,53,42,.08),inset 0 1px 0 #fff}
.dn-rico{width:28px;height:28px;border-radius:50%;background:#E2EFC8;color:#3F5C3B;display:grid;place-items:center;flex:none}
.dn-rico .ic{width:15px;height:15px}
.dn-grp.ai .dn-rico{background:#DDEFF0;color:#1E6577}
.dn-arr{width:16px;height:16px;margin-left:auto;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translateX(-5px);transition:opacity .25s,transform .35s var(--ease)}
.dn-row[aria-expanded="true"] .dn-arr{opacity:.7;transform:none}
.dn-scta{margin:1.15rem .55rem .35rem;padding-top:1.15rem;border-top:1px solid rgba(34,53,42,.1)}
.dn-scta .btn{padding:.85rem 2rem}
.dn-detail{position:sticky;top:calc(64px + 1.2rem);padding:1.15rem;border-radius:28px;
  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}
.dn-stack{display:grid}
.dn-sp{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .3s var(--ease),transform .4s var(--ease),visibility 0s .3s}
.dn-sp.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease) .1s,transform .5s var(--ease) .1s,visibility 0s}
.dn-sv{--gr:.5;height:clamp(130px,19vh,170px);border-radius:20px;overflow:hidden;display:grid;place-items:center;margin-bottom:1.3rem;color:#1F4A31;
  background:var(--g-lime)}
.dn-sp.ai .dn-sv{--gr:.55;color:#fff;background:var(--g-teal)}
.dn-sv svg{position:relative;z-index:1;width:84px;height:84px;fill:none;stroke:currentColor;stroke-width:.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.dn-sp h3,.dn-sp>p,.dn-sp ul{padding-inline:.55rem}
.dn-sp h3{font-size:var(--i-t1);letter-spacing:-.02em;color:var(--i-title)}
.dn-sp>p{margin-top:.55rem;color:var(--i-text);line-height:1.6;font-size:var(--i-body)}
.dn-sp ul{list-style:none;margin:1rem 0 0;padding-top:1rem;padding-bottom:0;border-top:1px solid rgba(34,53,42,.1);display:grid;gap:.55rem}
.dn-sp li{display:flex;gap:.6rem;font-size:var(--i-li);line-height:1.45;color:var(--i-list)}
.dn-sp li::before{content:"";flex:none;width:16px;height:16px;margin-top:.12em;
  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}
.dn-sp.ai 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")}
.js .dn-svc:not(.dn-seen) .dn-sp.on .dr{stroke-dashoffset:1}
.dn-sp.dn-draw .dr{animation:dnDraw 1.2s var(--ease) .12s both}
.dn-sp.dn-draw .dr:nth-child(2){animation-delay:.3s}
.dn-sp.dn-draw .dr:nth-child(3){animation-delay:.45s}

/* ---- closing: her heading left with a small search, pin and booked drawing; her paragraphs right ---- */
.dn-cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.dn-chead{position:sticky;top:calc(64px + 2rem);display:grid;gap:1.6rem;justify-items:start}
.dn-chead h2{max-width:18ch}
.dn-cgx{width:min(300px,100%);height:auto;fill:none;stroke:#0E3A1F;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.dn-cgx .dn-cfl{stroke:#1E6577;stroke-width:1.8}
.dn-cgx .dn-ctk{stroke:#1E6577;stroke-width:2.2}
.js .dn-cgx:not(.dn-in) .dr{stroke-dashoffset:1}
.dn-cgx.dn-in .dr{animation:dnDraw .8s var(--ease) both}
.dn-cgx.dn-in .dr:nth-child(2){animation-delay:.15s}.dn-cgx.dn-in .dr:nth-child(3){animation-delay:.25s}.dn-cgx.dn-in .dr:nth-child(4){animation-delay:.35s}
.dn-cgx.dn-in .dr:nth-child(5){animation-delay:.55s}.dn-cgx.dn-in .dr:nth-child(6){animation-delay:.95s}.dn-cgx.dn-in .dr:nth-child(7){animation-delay:1.05s}
.dn-cgx.dn-in .dr:nth-child(8){animation-delay:1.2s}.dn-cgx.dn-in .dr:nth-child(9){animation-delay:1.55s}.dn-cgx.dn-in .dr:nth-child(10){animation-delay:1.65s}
.dn-cgx.dn-in .dr:nth-child(11){animation-delay:1.95s}
.dn-cgx .dn-cq{stroke:rgba(14,58,31,.4)}
.dn-ccopy{display:grid;gap:1.1rem;padding-top:.35rem}
.dn-ccopy p{font-size:var(--i-copy);color:var(--i-text);line-height:1.72}

/* ---- smaller laptops and tablets: the open tile takes a larger share and the row grows taller for the longer copy ---- */
@media (max-width:1180px){.dn-tile{height:440px}}
@media (max-width:1080px){
  .dn-tiles{--g:3;--px:.95rem}
  .dn-reasons{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px;margin-inline:auto}
}
/* ---- phones: hero stacks; tiles become a swipe row, all open; services become an accordion ---- */
@media (max-width:860px){
  .dn-hero>.wrap{grid-template-columns:1fr}
  .dn-htext h1{max-width:none}
  .dn-jcard{justify-self:stretch;max-width:none}
  .dn-hmap{width:100%;top:auto;bottom:0;height:60%}
  .dn-tiles{overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--pad));padding:0 var(--pad) .7rem;scrollbar-width:none;container-type:normal}
  .dn-tiles::-webkit-scrollbar{display:none}
  .dn-tile,.dn-tile.on{flex:0 0 84%;height:auto;min-height:380px;scroll-snap-align:center;cursor:default}
  .dn-tile .dn-pd,.dn-tile.on .dn-pd{display:block;width:auto;animation:none}
  .dn-gx svg{width:64px;height:64px}
  .dn-md{grid-template-columns:1fr}
  .dn-detail{position:static;padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .dn-detail .dn-scta{margin:.4rem 0 0;padding:0;border:0}
  .dn-rows{margin-left:0}
  .dn-rows li+li{margin-top:2px}
  .dn-rows .dn-sp{grid-area:auto;display:none;opacity:1;visibility:visible;transform:none;transition:none;margin:.35rem 0 .7rem;padding:1.1rem 1rem 1rem;border-radius:20px;
    background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.92);box-shadow:0 14px 34px rgba(34,53,42,.08),inset 0 1px 0 #fff}
  .dn-rows .dn-sp.on{display:block;animation:dnFade .4s var(--ease)}
  .dn-rows .dn-sv,.dn-rows .dn-sp h3{display:none}
  .dn-rows .dn-sp>p,.dn-rows .dn-sp ul{padding-inline:0}
  .dn-rows .dn-sp>p{margin-top:0}
  .dn-row{padding-block:.6rem}
  .dn-scta .btn{width:100%;justify-content:center}
  .dn-cgrid{grid-template-columns:1fr;gap:1.6rem}
  .dn-chead{position:static}
  .dn-chead h2{max-width:none}
}
@media (max-width:560px){
  .dn-reason{padding:1.1rem .75rem 1.05rem;gap:.65rem}
  .dn-ri{width:42px;height:42px}
  .dn-ri svg{width:20px;height:20px}
  .dn-pano{height:150px;border-radius:22px}
}
@media (prefers-reduced-motion:reduce){
  .dnp .dr,.dn-j .dn-tarc{animation:none!important;stroke-dashoffset:0!important}
  .js .dn-tiles .t-sea .dn-ph,.js .dn-pano .dn-ph{animation:none!important}
  .dn-tile{transition:none}
  .dn-tile.on .dn-pd,.dn-rows .dn-sp.on{animation:none}
  .dn-sp,.dn-sp.on{transition:none}
}